diff --git a/backend/routes.py b/backend/routes.py
index 96c61fb..08bb6de 100644
--- a/backend/routes.py
+++ b/backend/routes.py
@@ -75,7 +75,7 @@ async def download_html(guide_id: str):
     html_path, _ = final_paths(guide["topic"], guide["format"])
     if not html_path.exists():
         raise HTTPException(404, "Datei nicht gefunden")
-    return FileResponse(html_path, filename=html_path.name, media_type="text/html")
+    return FileResponse(html_path, media_type="text/html", content_disposition_type="inline")
 
 
 @router.post("/guides/{guide_id}/rework")
diff --git a/frontend/src/components/TopicDetail.vue b/frontend/src/components/TopicDetail.vue
index b8889ea..6351d07 100644
--- a/frontend/src/components/TopicDetail.vue
+++ b/frontend/src/components/TopicDetail.vue
@@ -1,17 +1,28 @@
 <script setup>
-import { pdfUrl, htmlUrl } from '../api.js'
+import { computed } from 'vue'
+import { htmlUrl } from '../api.js'
 
-defineProps({
+const props = defineProps({
   previewGuide: { type: Object, default: null },
 })
+
+const LANDSCAPE_FORMATS = ['OnePager', 'Cheatsheet']
+const isLandscape = computed(() => LANDSCAPE_FORMATS.includes(props.previewGuide?.format))
+
+function injectPadding(e) {
+  if (isLandscape.value) return
+  const doc = e.target.contentDocument
+  if (!doc) return
+  const style = doc.createElement('style')
+  style.textContent = '@media screen { body { padding: 2.5rem 3rem; } }'
+  doc.head?.appendChild(style)
+}
 </script>
 
 <template>
   <div class="detail">
     <div class="preview" v-if="previewGuide">
-      <object :data="pdfUrl(previewGuide.id)" type="application/pdf" class="preview-frame">
-        <p>PDF kann nicht angezeigt werden. <a :href="pdfUrl(previewGuide.id)" target="_blank">Direkt öffnen</a></p>
-      </object>
+      <iframe :src="htmlUrl(previewGuide.id)" class="preview-frame" :class="{ landscape: isLandscape }" title="Guide-Vorschau" @load="injectPadding"></iframe>
     </div>
 
     <div class="empty-preview" v-else>
@@ -30,6 +41,9 @@ defineProps({
   height: 100%;
   display: flex;
   flex-direction: column;
+  align-items: center;
+  padding: 2rem;
+  background: #f0f1f4;
 }
 
 .preview-header {
@@ -62,8 +76,15 @@ defineProps({
 
 .preview-frame {
   width: 100%;
+  max-width: 900px;
   flex: 1;
   border: none;
+  background: #fff;
+  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
+}
+
+.preview-frame.landscape {
+  max-width: 1180px;
 }
 
 .empty-preview {