diff --git a/assets/style.css b/assets/style.css
index a6346d6..742bfe5 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -11,6 +11,10 @@ body {
     font-family: sans-serif;
 }
 
+.panel {
+    margin-top: 70px;
+}
+
 table td+td {
     border-left: 1px dashed silver;
     text-align: center;
diff --git a/index_main.php b/index_main.php
index 77a96e1..5222259 100644
--- a/index_main.php
+++ b/index_main.php
@@ -9,9 +9,18 @@
 <body class="mdc-typography">
   <header class="mdc-toolbar mdc-toolbar--fixed">
     <div class="mdc-toolbar__row">
-      <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
+      <section class="mdc-toolbar__section mdc-toolbar__section--shrink-to-fit mdc-toolbar__section--align-start">
         <span class="mdc-toolbar__title">BlackBerry/TCL Firmware List</span>
       </section>
+      <section class="mdc-toolbar__section mdc-toolbar__section--align-end" role="toolbar">
+        <div>
+          <nav id="tab-bar" class="mdc-tab-bar mdc-tab-bar--indicator-accent">
+            <a class="mdc-tab mdc-tab--active" href="#keyone" data-panel="family-keyone">KEYone</a>
+            <a class="mdc-tab" href="#motion" data-panel="family-motion">Motion</a>
+            <span class="mdc-tab-bar__indicator"></span>
+          </nav>
+        </div>
+      </section>
     </div>
   </header>
   <main>
@@ -37,6 +46,7 @@ if (count($unknowns) > 0) {
 }
 
 foreach ($allVars as $family => $models) {
+    echo '<div id="family-' . strtolower($family) . '" class="panel" role="tabpanel">';
     foreach ($models as $model => $variants) {
         echo '<h2>' . $family . ' ' . $model . '</h2>' . PHP_EOL;
         $allVersions = $db->getAllVersionsForModel($model);
@@ -66,10 +76,41 @@ foreach ($allVars as $family => $models) {
         }
         echo '</tbody></table>';
     }
+    echo '</div>';
 }
 ?>
   </main>
-  <script src="node_modules/material-components-web/dist/material-components-web.js"></script>
-  <script>window.mdc.autoInit()</script>
+  <script type="text/javascript" src="node_modules/material-components-web/dist/material-components-web.js"></script>
+  <script type="text/javascript">
+    window.mdc.autoInit();
+    window.tabBar = new mdc.tabs.MDCTabBar(document.querySelector('#tab-bar'));
+
+    function activatePanel(panelId)
+    {
+        var allPanels = document.querySelectorAll('.panel');
+        for (var i=0; i<allPanels.length; i++) {
+            var panel = allPanels[i];
+            if (panel.id == panelId) {
+                tabBar.activeTabIndex = i;
+            }
+            panel.style.display = (panel.id == panelId)?'block':'none';
+        }
+    }
+
+    window.tabBar.listen('MDCTabBar:change', function(t) {
+        var nthChildIndex = t.detail.activeTabIndex;
+        var tabId = t.srcElement.id;
+        var tab = document.querySelector('#' + tabId + ' .mdc-tab:nth-child(' + (nthChildIndex + 1) + ')');
+        var panelId = tab.dataset.panel;
+        activatePanel(panelId);
+    });
+
+    var hash = location.hash;
+    if (hash.length > 1) {
+        activatePanel('family-' + hash.substring(1));
+    } else {
+        activatePanel('family-keyone');
+    }
+  </script>
 </body>
 </html>
