diff --git a/admin_ui/index.html b/admin_ui/index.html
index ce724d5..561bb17 100644
--- a/admin_ui/index.html
+++ b/admin_ui/index.html
@@ -112,6 +112,7 @@
       color: #9ca3af;
       margin-left: auto;
     }
+
     .preview {
       width: 45%;
       min-width: 320px;
@@ -125,16 +126,75 @@
       font-size: 0.85rem;
       color: #9ca3af;
       background: #020617;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 0.5rem;
+    }
+    .preview-title {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .preview-controls {
+      display: flex;
+      align-items: center;
+      gap: 0.25rem;
+      font-size: 0.8rem;
+    }
+    .device-btn {
+      padding: 0.15rem 0.5rem;
+      border-radius: 999px;
+      border: 1px solid #4b5563;
+      background: #020617;
+      color: #e5e7eb;
+      cursor: pointer;
+      font-size: 0.75rem;
+    }
+    .device-btn.active {
+      background: #4b5563;
+      color: #f9fafb;
+    }
+    .preview-open {
+      padding: 0.15rem 0.45rem;
+      border-radius: 999px;
+      border: 1px solid #4b5563;
+      text-decoration: none;
+      color: #e5e7eb;
+      font-size: 0.75rem;
+    }
+
+    .preview-inner {
+      flex: 1;
+      display: flex;
+      justify-content: center;
+      align-items: stretch;
+      padding: 0.5rem;
+      box-sizing: border-box;
+      background: #000;
+      overflow: auto;
     }
     .preview iframe {
-      flex: 1;
-      width: 100%;
       border: none;
+      height: 100%;
+      max-height: 100%;
       background: #000;
     }
+
+    /* Device width presets for iframe */
+    .device-mobile #preview-frame {
+      width: 390px;   /* typical phone */
+    }
+    .device-tablet #preview-frame {
+      width: 820px;   /* typical tablet */
+    }
+    .device-desktop #preview-frame {
+      width: 1200px;  /* typical desktop layout */
+      max-width: 100%;
+    }
   </style>
 </head>
-<body>
+<body class="device-desktop">
   <aside class="sidebar">
     <h1>Pages</h1>
     <ul class="page-list" id="page-list"></ul>
@@ -151,9 +211,19 @@
     </section>
     <section class="preview">
       <div class="preview-header">
-        Preview: <span id="preview-label">–</span>
+        <span class="preview-title">
+          Preview: <span id="preview-label">–</span>
+        </span>
+        <div class="preview-controls">
+          <button class="device-btn" data-mode="mobile">📱</button>
+          <button class="device-btn" data-mode="tablet">📱📱</button>
+          <button class="device-btn active" data-mode="desktop">🖥</button>
+          <a id="open-preview" class="preview-open" href="#" target="_blank" rel="noopener noreferrer">↗</a>
+        </div>
+      </div>
+      <div class="preview-inner">
+        <iframe id="preview-frame" src="about:blank"></iframe>
       </div>
-      <iframe id="preview-frame" src="about:blank"></iframe>
     </section>
   </main>
 
@@ -168,9 +238,26 @@
     const jsonEditorEl = document.getElementById('json-editor');
     const saveBtnEl = document.getElementById('save-btn');
     const statusEl = document.getElementById('status');
+    const deviceButtons = document.querySelectorAll('.device-btn');
+    const openPreviewEl = document.getElementById('open-preview');
 
     let currentSlug = null;
 
+    function setDeviceMode(mode) {
+      document.body.classList.remove('device-mobile', 'device-tablet', 'device-desktop');
+      document.body.classList.add('device-' + mode);
+      deviceButtons.forEach(btn => {
+        btn.classList.toggle('active', btn.dataset.mode === mode);
+      });
+    }
+
+    deviceButtons.forEach(btn => {
+      btn.addEventListener('click', () => {
+        const mode = btn.dataset.mode;
+        setDeviceMode(mode);
+      });
+    });
+
     async function loadPages() {
       const res = await fetch(API_BASE + '/api/pages');
       const pages = await res.json();
@@ -205,7 +292,9 @@
       saveBtnEl.disabled = false;
       statusEl.textContent = 'Loaded';
 
-      previewFrameEl.src = API_BASE + '/preview/' + encodeURIComponent(slug) + '/';
+      const url = API_BASE + '/preview/' + encodeURIComponent(slug) + '/';
+      previewFrameEl.src = url;
+      openPreviewEl.href = url;
     }
 
     async function saveCurrent() {
@@ -233,7 +322,9 @@
       saveBtnEl.disabled = false;
 
       // refresh preview
-      previewFrameEl.src = API_BASE + '/preview/' + encodeURIComponent(currentSlug) + '/';
+      const url = API_BASE + '/preview/' + encodeURIComponent(currentSlug) + '/';
+      previewFrameEl.src = url;
+      openPreviewEl.href = url;
     }
 
     jsonEditorEl.addEventListener('input', () => {
@@ -243,6 +334,9 @@
 
     saveBtnEl.addEventListener('click', saveCurrent);
 
+    // Default device mode = desktop
+    setDeviceMode('desktop');
+
     loadPages().catch(err => {
       console.error(err);
       statusEl.textContent = 'Error loading pages';
