diff --git a/index.html b/index.html
index 645401c..a2c03d9 100644
--- a/index.html
+++ b/index.html
@@ -4,31 +4,26 @@
     <title>Tab to Window</title>
     <style>
       @font-face {
-        font-family: "Oxygen";
-        font-style: normal;
+        font-family: 'Inter';
         font-weight: 300;
-        src:
-          local("Oxygen Light"),
-          local("Oxygen-Light"),
-          url(css/fonts/oxygenLight.woff) format("woff");
+        src: url('fonts/Inter-Light.woff2') format('woff2'),
+             url('fonts/Inter-Light.woff') format('woff');
       }
       @font-face {
-        font-family: "Oxygen";
-        font-style: normal;
+        font-family: 'Inter';
         font-weight: 400;
-        src:
-          local("Oxygen"),
-          local("Oxygen-Regular"),
-          url(css/fonts/oxygenRegular.woff) format("woff");
+        src: url('fonts/Inter-Regular.woff2') format('woff2'),
+             url('fonts/Inter-Regular.woff') format('woff');
       }
       @font-face {
-        font-family: "Oxygen";
-        font-style: normal;
+        font-family: 'Inter';
         font-weight: 700;
-        src:
-          local("Oxygen Bold"),
-          local("Oxygen-Bold"),
-          url(css/fonts/oxygenBold.woff) format("woff");
+        src: url('fonts/Inter-Bold.woff2') format('woff2'),
+             url('fonts/Inter-Bold.woff') format('woff');
+      }
+
+      body {
+        font-family: 'Inter', sans-serif;
       }
 
       html {
@@ -37,36 +32,43 @@
 
       body {
         height: 100%;
-        background-color: rgb(43, 156, 212);
-        font-family: "Oxygen", sans-serif;
+        background-color: #f0f4f8;
+        font-family: 'Inter', sans-serif;
+        background-image: radial-gradient(circle, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
+        background-size: 20px 20px;
+        color: #333;
+        line-height: 1.6;
       }
 
       h1,
       h2 {
-        border-bottom: 1px rgb(200, 200, 200) solid;
+        border-bottom: 1px #e0e0e0 solid;
         padding-bottom: 10px;
+        color: #2c3e50;
       }
 
       .container {
         max-width: 800px;
         min-width: 600px;
-        margin: 10px auto;
-        background: white;
-        padding: 5px 20px;
-        border-radius: 10px;
+        margin: 20px auto;
+        background: rgba(255, 255, 255, 0.95);
+        padding: 20px 30px;
+        border-radius: 12px;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
       }
 
       kbd {
-        background-color: rgb(243, 243, 243);
-        border: solid 1px #ccc;
+        background-color: #f8f9fa;
+        border: solid 1px #e0e0e0;
         box-sizing: border-box;
-        border-bottom-color: #bbb;
+        border-bottom-color: #d0d0d0;
         border-radius: 3px;
-        box-shadow: inset 0 -1px 0 #bbb;
-        color: rgb(33, 33, 33);
-        font-family: monospace;
+        box-shadow: inset 0 -1px 0 #d0d0d0;
+        color: #333;
+        font-family: 'Roboto Mono', monospace;
         margin-left: 2px;
-        padding: 1px 4px;
+        padding: 2px 6px;
+        font-size: 0.9em;
       }
 
       p,
@@ -80,204 +82,309 @@
       }
 
       li {
-        margin-bottom: 7px;
+        margin-bottom: 10px;
       }
 
       img,
       video {
-        border: 1px black solid;
+        border: 1px #e0e0e0 solid;
+        border-radius: 6px;
+        max-width: 100%;
+        height: auto;
       }
 
       .key-label {
         display: inline-block;
         width: 80px;
+        font-weight: 600;
       }
 
       .command-sets {
         display: flex;
         justify-content: space-between;
+        flex-wrap: wrap;
       }
-    </style>
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-6P35E7VQNF"></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag() {
-        dataLayer.push(arguments);
+
+      .key-command-set {
+        flex-basis: 30%;
+        margin-bottom: 20px;
       }
-      gtag("js", new Date());
 
-      gtag("config", "G-6P35E7VQNF");
-    </script>
-  </head>
+      a {
+        color: #3498db;
+        text-decoration: none;
+        transition: color 0.3s ease;
+      }
 
-  <body>
-    <div class="container">
-      <h1>Tab to Window</h1>
-
-      <h3>
-        <a
-          href="https://chrome.google.com/webstore/detail/tab-to-windowpopup-keyboa/adbkphmimfcaeonicpmamfddbbnphikh"
-          >Install via Chrome Web Store</a
-        >
-      </h3>
-
-      <p>Dragging is a drag, move your tabs to a new window in an instant!</p>
-
-      <video playsinline controls loop width="100%" height="auto">
-        <source src="docs/01-basic.mp4" type="video/mp4" />
-        <source src="docs/01-basic.webm" type="video/webm" />
-      </video>
-    </div>
+      a:hover {
+        color: #2980b9;
+      }
+
+      /* Keep existing font-face rules */
+      @font-face {
+        font-family: "Oxygen";
+        font-style: normal;
+        font-weight: 300;
+        src:
+          local("Oxygen Light"),
+          local("Oxygen-Light"),
+          url(css/fonts/oxygenLight.woff) format("woff");
+      }
+      @font-face {
+        font-family: "Oxygen";
+        font-style: normal;
+        font-weight: 400;
+        src:
+          local("Oxygen"),
+          local("Oxygen-Regular"),
+          url(css/fonts/oxygenRegular.woff) format("woff");
+      }
+      @font-face {
+        font-family: "Oxygen";
+        font-style: normal;
+        font-weight: 700;
+        src:
+          local("Oxygen Bold"),
+          local("Oxygen-Bold"),
+          url(css/fonts/oxygenBold.woff) format("woff");
+      }
 
-    <div class="container">
-      <h2>Moving Tabs</h2>
-      <p>Tabs can be moved to a new window with either a key command:</p>
+      /* New styles for the navbar */
+      .navbar {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        background-color: rgba(255, 255, 255, 0.95);
+        padding: 10px 20px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        z-index: 1000;
+      }
 
-      <ul>
-        <li><span class="key-label">Mac:</span> <kbd>Alt</kbd><kbd>X</kbd></li>
-        <li><span class="key-label">Windows:</span> <kbd>Alt</kbd><kbd>X</kbd></li>
-        <li><span class="key-label">Linux:</span> <kbd>Alt</kbd><kbd>Shift</kbd><kbd>X</kbd></li>
-      </ul>
+      .navbar-title {
+        font-size: 1.2rem;
+        font-weight: 700;
+        color: #2c3e50;
+        text-decoration: none;
+      }
 
-      <p>Or by clicking the extension button:</p>
+      .navbar-links a {
+        margin-left: 20px;
+        color: #3498db;
+        text-decoration: none;
+        font-weight: 500;
+      }
 
-      <img src="docs/button.jpg" alt="Menu Button" width="400" height="auto" />
-    </div>
+      .navbar-links a:hover {
+        color: #2980b9;
+      }
 
-    <div class="container">
-      <h2>Popup Window</h2>
-      <p>New windows can also be a Popup window (no UI):</p>
+      /* Adjust body padding to account for fixed navbar */
+      body {
+        padding-top: 60px;
+      }
 
-      <img id="popup" src="docs/popup.jpg" alt="Popup Window" width="100%" height="auto" />
+      /* New styles for bento grid layout */
+      .bento-grid {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 20px;
+        max-width: 1200px;
+        margin: 20px auto;
+        padding: 0 20px;
+      }
 
-      <p>This can be done with a key command:</p>
+      .bento-item {
+        background: rgba(255, 255, 255, 0.95);
+        border-radius: 12px;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        padding: 20px;
+        overflow: hidden;
+      }
 
-      <ul>
-        <li><span class="key-label">Mac:</span> <kbd>Alt</kbd><kbd>C</kbd></li>
-        <li><span class="key-label">Windows:</span> <kbd>Alt</kbd><kbd>C</kbd></li>
-        <li><span class="key-label">Linux:</span> <kbd>Alt</kbd><kbd>Shift</kbd><kbd>C</kbd></li>
-      </ul>
+      .bento-item.wide {
+        grid-column: span 2;
+      }
 
-      <p>Or by changing the Window Type for the button (right click):</p>
+      .bento-item.tall {
+        grid-row: span 2;
+      }
 
-      <img src="docs/type.jpg" alt="Changing Window Type" width="400" height="auto" />
-    </div>
+      .bento-item h2 {
+        margin-top: 0;
+      }
 
-    <div class="container">
-      <h2>Moving Between Windows</h2>
-      <p>
-        Tabs can also be moved between windows with the <strong>Tab to Next Window</strong> and
-        <strong>Tab To Previous Window</strong> commands
-      </p>
-
-      <h3>Tab To Next Window</h3>
-      <ul>
-        <li><span class="key-label">Mac:</span> <kbd>Alt</kbd><kbd>Z</kbd></li>
-        <li><span class="key-label">Windows:</span> <kbd>Alt</kbd><kbd>Z</kbd></li>
-        <li><span class="key-label">Linux:</span> <kbd>Alt</kbd><kbd>Shift</kbd><kbd>Z</kbd></li>
-      </ul>
-
-      <p>
-        (No defaults are provided for <strong>Tab To Previous Window</strong> as Chrome has a limit
-        of four default key commands)
-      </p>
-
-      <video playsinline controls loop width="100%" height="auto">
-        <source src="docs/02-window.mp4" type="video/mp4" />
-        <source src="docs/02-window.webm" type="video/webm" />
-      </video>
-    </div>
+      .bento-item img,
+      .bento-item video {
+        max-width: 100%;
+        height: auto;
+        margin-bottom: 10px;
+      }
 
-    <div class="container">
-      <h2>Moving Multiple Tabs</h2>
-      <p>
-        You can move multiple tabs by selecting them first (by holding <kbd>shift</kbd> or
-        <kbd>command</kbd>/<kbd>control</kbd>):
-      </p>
-
-      <video playsinline controls loop width="100%" height="auto">
-        <source src="docs/03-multiple.mp4" type="video/mp4" />
-        <source src="docs/03-multiple.webm" type="video/webm" />
-      </video>
-    </div>
+      /* Responsive adjustments */
+      @media (max-width: 1024px) {
+        .bento-grid {
+          grid-template-columns: repeat(2, 1fr);
+        }
+      }
+
+      @media (max-width: 768px) {
+        .bento-grid {
+          grid-template-columns: 1fr;
+        }
+        .bento-item.wide {
+          grid-column: auto;
+        }
+        .bento-item.tall {
+          grid-row: auto;
+        }
+      }
+    </style>
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-6P35E7VQNF"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
 
-    <div class="container">
-      <h2>Arrangement</h2>
-      <p>The window arrangement and other settings can be customised in the options page:</p>
+      gtag("config", "G-6P35E7VQNF");
+    </script>
+  </head>
 
-      <img src="docs/options.jpg" alt="Options Page" width="400" height="auto" />
+  <body>
+    <nav class="navbar">
+      <a href="#" class="navbar-title">Tab to Window</a>
+      <div class="navbar-links">
+        <a href="https://chrome.google.com/webstore/detail/tab-to-windowpopup-keyboa/adbkphmimfcaeonicpmamfddbbnphikh">Install</a>
+        <a href="https://www.arthurcarabott.com">Author</a>
+      </div>
+    </nav>
+
+    <div class="bento-grid">
+      <div class="bento-item wide tall" id="install">
+        <h3>Dragging is a drag, move your tabs to a new window in an instant!</h3>
+        <video playsinline controls loop width="100%" height="auto">
+          <source src="docs/01-basic.mp4" type="video/mp4" />
+          <source src="docs/01-basic.webm" type="video/webm" />
+        </video>
+      </div>
 
-      <p>Get to it by right clicking the extension button:</p>
-      <img src="docs/options-menu.jpg" alt="Options Menu" width="400" height="auto" />
-    </div>
+      <div class="bento-item">
+        <h2>Moving Tabs</h2>
+        <p>Tabs can be moved to a new window with either a key command:</p>
+        <ul>
+          <li><span class="key-label">Mac:</span> <kbd>Alt</kbd><kbd>X</kbd></li>
+          <li><span class="key-label">Windows:</span> <kbd>Alt</kbd><kbd>X</kbd></li>
+          <li><span class="key-label">Linux:</span> <kbd>Alt</kbd><kbd>Shift</kbd><kbd>X</kbd></li>
+        </ul>
+        <p>Or by clicking the extension button:</p>
+        <img src="docs/button.jpg" alt="Menu Button" width="100%" height="auto" />
+      </div>
 
-    <div class="container">
-      <h2>Multiple Displays</h2>
-      <p>Multiple displays are supported! Windows are split on their current display.</p>
-      <p>
-        A tab can be moved to a new window on the <em>next</em> display with the
-        <strong>Tab to Next Display</strong> command.
-      </p>
-
-      <ul>
-        <li><span class="key-label">Mac:</span> <kbd>Alt</kbd><kbd>D</kbd></li>
-        <li><span class="key-label">Windows:</span> <kbd>Alt</kbd><kbd>Shift</kbd><kbd>D</kbd></li>
-        <li><span class="key-label">Linux:</span> <kbd>Alt</kbd><kbd>Shift</kbd><kbd>D</kbd></li>
-      </ul>
-    </div>
+      <div class="bento-item">
+        <h2>Popup Window</h2>
+        <p>New windows can also be a Popup window (no UI):</p>
+        <img id="popup" src="docs/popup.jpg" alt="Popup Window" width="100%" height="auto" />
+        <p>This can be done with a key command:</p>
+        <ul>
+          <li><span class="key-label">Mac:</span> <kbd>Alt</kbd><kbd>C</kbd></li>
+          <li><span class="key-label">Windows:</span> <kbd>Alt</kbd><kbd>C</kbd></li>
+          <li><span class="key-label">Linux:</span> <kbd>Alt</kbd><kbd>Shift</kbd><kbd>C</kbd></li>
+        </ul>
+      </div>
 
-    <div class="container">
-      <h2>Context Menu</h2>
+      <div class="bento-item wide">
+        <h2>Moving Between Windows</h2>
+        <p>Tabs can also be moved between windows with the <strong>Tab to Next Window</strong> and <strong>Tab To Previous Window</strong> commands</p>
+        <h3>Tab To Next Window</h3>
+        <ul>
+          <li><span class="key-label">Mac:</span> <kbd>Alt</kbd><kbd>Z</kbd></li>
+          <li><span class="key-label">Windows:</span> <kbd>Alt</kbd><kbd>Z</kbd></li>
+          <li><span class="key-label">Linux:</span> <kbd>Alt</kbd><kbd>Shift</kbd><kbd>Z</kbd></li>
+        </ul>
+        <video playsinline controls loop width="100%" height="auto">
+          <source src="docs/02-window.mp4" type="video/mp4" />
+          <source src="docs/02-window.webm" type="video/webm" />
+        </video>
+      </div>
 
-      <p>Right click a link to open it in a new window:</p>
-      <img src="docs/menu-link.jpg" alt="Link Menu" width="600" height="auto" />
+      <div class="bento-item">
+        <h2>Moving Multiple Tabs</h2>
+        <p>You can move multiple tabs by selecting them first (by holding <kbd>shift</kbd> or <kbd>command</kbd>/<kbd>control</kbd>):</p>
+        <video playsinline controls loop width="100%" height="auto">
+          <source src="docs/03-multiple.mp4" type="video/mp4" />
+          <source src="docs/03-multiple.webm" type="video/webm" />
+        </video>
+      </div>
 
-      <p>Also works on pages:</p>
-      <img src="docs/menu-page.jpg" alt="Page Menu" width="600" height="auto" />
-    </div>
+      <div class="bento-item">
+        <h2>Arrangement</h2>
+        <p>The window arrangement and other settings can be customised in the options page:</p>
+        <img src="docs/options.jpg" alt="Options Page" width="100%" height="auto" />
+        <p>Get to it by right clicking the extension button:</p>
+        <img src="docs/options-menu.jpg" alt="Options Menu" width="100%" height="auto" />
+      </div>
 
-    <div class="container">
-      <h2>Key Commands</h2>
-      <p>The key commands can be customised by following the link on the options page.</p>
-      <p>The defaults are:</p>
-
-      <div class="command-sets">
-        <div class="key-command-set">
-          <h3>Mac</h3>
-          <ul>
-            <li><kbd>Alt</kbd><kbd>X</kbd> - Window</li>
-            <li><kbd>Alt</kbd><kbd>C</kbd> - Popup</li>
-            <li><kbd>Alt</kbd><kbd>Z</kbd> - Next Window</li>
-            <li><kbd>Alt</kbd><kbd>D</kbd> - Next Display</li>
-          </ul>
-        </div>
+      <div class="bento-item wide">
+        <h2>Context Menu</h2>
+        <p>Right click a link to open it in a new window:</p>
+        <img src="docs/menu-link.jpg" alt="Link Menu" width="100%" height="auto" />
+        <p>Also works on pages:</p>
+        <img src="docs/menu-page.jpg" alt="Page Menu" width="100%" height="auto" />
+      </div>
 
-        <div class="key-command-set">
-          <h3>Windows</h3>
-          <ul>
-            <li><kbd>Alt</kbd><kbd>X</kbd> - Window</li>
-            <li><kbd>Alt</kbd><kbd>C</kbd> - Popup</li>
-            <li><kbd>Alt</kbd><kbd>Z</kbd> - Next Window</li>
-            <li><kbd>Alt</kbd><kbd>Shift</kbd><kbd>D</kbd> - Next Display</li>
-          </ul>
-        </div>
+      <div class="bento-item">
+        <h2>Multiple Displays</h2>
+        <p>Multiple displays are supported! Windows are split on their current display.</p>
+        <p>A tab can be moved to a new window on the <em>next</em> display with the <strong>Tab to Next Display</strong> command.</p>
+        <ul>
+          <li><span class="key-label">Mac:</span> <kbd>Alt</kbd><kbd>D</kbd></li>
+          <li><span class="key-label">Windows:</span> <kbd>Alt</kbd><kbd>Shift</kbd><kbd>D</kbd></li>
+          <li><span class="key-label">Linux:</span> <kbd>Alt</kbd><kbd>Shift</kbd><kbd>D</kbd></li>
+        </ul>
+      </div>
 
-        <div class="key-command-set">
-          <h3>Linux</h3>
-          <ul>
-            <li><kbd>Alt</kbd><kbd>Shift</kbd><kbd>X</kbd> - Window</li>
-            <li><kbd>Alt</kbd><kbd>Shift</kbd><kbd>C</kbd> - Popup</li>
-            <li><kbd>Alt</kbd><kbd>Shift</kbd><kbd>Z</kbd> - Next Window</li>
-            <li><kbd>Alt</kbd><kbd>Shift</kbd><kbd>D</kbd> - Next Display</li>
-          </ul>
+      
+
+      <div class="bento-item wide">
+        <h2>Key Commands</h2>
+        <p>The key commands can be customised by following the link on the options page.</p>
+        <p>The defaults are:</p>
+        <div class="command-sets">
+          <div class="key-command-set">
+            <h3>Mac</h3>
+            <ul>
+              <li><kbd>Alt</kbd><kbd>X</kbd> - Window</li>
+              <li><kbd>Alt</kbd><kbd>C</kbd> - Popup</li>
+              <li><kbd>Alt</kbd><kbd>Z</kbd> - Next Window</li>
+              <li><kbd>Alt</kbd><kbd>D</kbd> - Next Display</li>
+            </ul>
+          </div>
+          <div class="key-command-set">
+            <h3>Windows</h3>
+            <ul>
+              <li><kbd>Alt</kbd><kbd>X</kbd> - Window</li>
+              <li><kbd>Alt</kbd><kbd>C</kbd> - Popup</li>
+              <li><kbd>Alt</kbd><kbd>Z</kbd> - Next Window</li>
+              <li><kbd>Alt</kbd><kbd>Shift</kbd><kbd>D</kbd> - Next Display</li>
+            </ul>
+          </div>
+          <div class="key-command-set">
+            <h3>Linux</h3>
+            <ul>
+              <li><kbd>Alt</kbd><kbd>Shift</kbd><kbd>X</kbd> - Window</li>
+              <li><kbd>Alt</kbd><kbd>Shift</kbd><kbd>C</kbd> - Popup</li>
+              <li><kbd>Alt</kbd><kbd>Shift</kbd><kbd>Z</kbd> - Next Window</li>
+              <li><kbd>Alt</kbd><kbd>Shift</kbd><kbd>D</kbd> - Next Display</li>
+            </ul>
+          </div>
         </div>
       </div>
     </div>
-
-    <div class="container">
-      <h2>Author</h2>
-      <p><a href="https://www.arthurcarabott.com">Arthur Carabott</a></p>
-    </div>
   </body>
 </html>