diff --git a/.ci/tags.html b/.ci/tags.html
index a0a94b6923..94ff05a739 100644
--- a/.ci/tags.html
+++ b/.ci/tags.html
@@ -2,51 +2,79 @@
 <script src="https://unpkg.com/papaparse@5.4.1/papaparse.min.js"></script>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.14/dist/full.min.css" rel="stylesheet" type="text/css" />
+<script src="https://cdn.tailwindcss.com"></script>
 
 
 <body>
   <div id="app">
     <link v-for="family in uniqueFamilies" :href="familyLink(family)" rel="stylesheet">
 
-    <h1>Google Fonts Tagger</h1>
+    <!-- Navbar -->
+    <div style="max-height: 3rem" class="navbar bg-base-100 fixed left-0 top-0 shadow">
+        <a class="btn btn-ghost btn-sm text-xl">GF Tagger</a>
+        <ul class="menu menu-horizontal px-1">
+          <li>
+            <details>
+              <summary>File</summary>
+              <ul class="shadow w-36">
+                <li><a @click="saveCSV">Export CSV</a></li>
+                <li><a @click="prCSV">Open PR</a></li>
+              </ul>
+            </details>
+          </li>
+          <li>
+            <details>
+              <summary>{{ CurrentCategory }}</summary>
+              <ul class="shadow">
+                <div class="cont" style="max-height: 16rem; overflow: scroll">
+                  <li  v-for="category in sortedCategories()">
+                    <a @click="CurrentCategory = category">{{ category }}</a>
+                  </li>
+                </div>
+              </ul>
+            </details>
+          </li>
+          <li>
+            <form @submit.prevent="commit">
+            <div class="join" style="padding-top: 12px;">
+              <input class="join-item input input-sm input-bordered w-full max-w-xs" v-model="commit" required placeholder="refs/heads/main">
+              <button class="join-item btn btn-sm">checkout</button>
+            </div>
+          </form> 
+          </li>
+        </ul>
+    </div>    
 
-    <div id="panel">
-      <div class="panel-tile">
-        <form @submit.prevent="loadCSV">
-          <label>Checkout Commit:</label>
-          <input v-model="commit" required placeholder="refs/heads/main">
-          <button>Checkout</button>
-        </form>
-      <div style="border: 0.1px solid rgb(161, 161, 161); margin-bottom: 10pt; margin-top: 10pt;"></div>
-
-        <label>Current tag:</label>
-        <select v-model="CurrentCategory" style="max-width: 300px;">
-          <option v-for="category in sortedCategories()" :key="category" :value="category">
-            {{ category }}
-          </option>
-        </select>
-      </div>
+    <!-- Add font panel -->
+    <div id="panel" class="fixed top-20 right-0 bg-base-100 p-5 shadow">
       <div class="panel-tile">
         <form @submit.prevent="AddTag">
-          <label>Add Tag:</label>
-          <input v-model="newTag" required placeholder="Tag Name">
-          <button>Add</button>
-        </form>
-      </div>
-      <div style="border: 0.1px solid rgb(161, 161, 161); margin-bottom: 10pt; margin-top: 10pt;"></div>
-
-      <div class="panel-tile">
+          <div class="label label-xs">
+            <span class="label-text label-xs">Add Tag</span>
+          </div>
+          <div class="join">
+            <input class="join-item input input-xs input-bordered w-full max-w-xs" v-model="newTag" required placeholder="/Expressive/Funky">
+            <button class="join-item btn btn-xs">Add</button>
+          </div>
+        </form> 
+        <div class="divider"></div>
         <form @submit.prevent="AddFamily">
-          <label>Add family:</label>
-          <input list="items" v-model="newFamily" required placeholder="Family Name">
-          <datalist id="items">
-            <option v-for="family in uniqueFamilies" :value="family">
-          </datalist>
-          <input v-model="newWeight" required placeholder="Score">
-          <button>Add</button>
+          <div class="label lavel-xs">
+            <span class="label-text label-xs">Add Family</span>
+          </div>
+          <div class="join">
+            <input class="join-item input input-xs input-bordered w-full max-w-xs" list="items" v-model="newFamily" required placeholder="Family Name">
+            <datalist id="items">
+              <option v-for="family in uniqueFamilies" :value="family">
+            </datalist>
+            <input class="join-item input input-xs input-bordered btn-square" v-model="newWeight" required placeholder="Score">
+            <button class="join-item btn btn-xs">Add</button>
+          </div>
         </form>
       </div>
-      <div style="border: 0.1px solid rgb(161, 161, 161); margin-bottom: 10pt; margin-top: 10pt;"></div>
+      <div class="divider"></div>
+
       <div class="panel-tile" style="max-height: 100px; overflow: scroll;">
         <label>History</label>
           <div v-if="isEdited">
@@ -56,20 +84,15 @@ <h1>Google Fonts Tagger</h1>
             <p style="font-size: 10pt;">No changes</p>
           </div>
       </div>
-      <div style="border: 0.1px solid rgb(161, 161, 161); margin-bottom: 10pt; margin-top: 10pt;"></div>
-      <div style="border: 0.1px solid rgb(161, 161, 161); margin-bottom: 10pt; margin-top: 10pt;"></div>
-      <div class="panel-tile">
-        <button @click="prCSV">Open Pull Request</button>
-        <button style="float: right;" @click="saveCSV">Save CSV</button>
-      </div>
-
     </div>
 
     <div v-if="sortedFamilies.length === 0">
       <p>No families found for this tag. Please add some</p>
     </div>
-    <div class="item" v-for="family in sortedFamilies" :key="family.Family">
-      <family-item :family="family" :ready="ready" @edited="edited" @remove="removeFamily"></family-item>
+    <div class="mt-20">
+      <div class="item" v-for="family in sortedFamilies" :key="family.Family">
+        <family-item :family="family" :ready="ready" @edited="edited" @remove="removeFamily"></family-item>
+      </div>
     </div>
 
   </div>
@@ -79,20 +102,19 @@ <h1>Google Fonts Tagger</h1>
   Vue.component('family-item', {
     props: ['family', 'ready'],
     template: `
-      <div class="item">
-        <div style="float: left; width: 150px;">
-          <b>{{ family.Family }}</b>
-        </div>
-        <div style="float: left; width: 100px;">
-          <input style="width: 50px;" v-model.lazy="family.Weight" @change="edited" placeholder="family.Weight">
-          <button @click="removeFamily">X</button>
-        </div>
-        <div v-if="ready" :style="familyStyle" contenteditable="true">
-          {{ familyPangram }}
-        </div>
+      <div class="item p-1">
+        <div class="join">
+          <b class="pr-2">{{ family.Family }}</b>
+          <input style="width: 3rem;" class="join-item input input-xs input-bordered btn-square"  v-model.lazy="family.Weight" @change="edited" placeholder="family.Weight">
+          <button class="btn btn-xs join-item pr-2" @click="removeFamily">X</button>
+          </div>
+          <div v-if="ready" :style="familyStyle" contenteditable="true">
+            {{ familyPangram }}
+          </div>
         <div v-else>
           Loading...
         </div>
+        <div class="divider"></div>
       </div>
     `,
     methods: {
@@ -370,43 +392,4 @@ <h1>Google Fonts Tagger</h1>
       font-family: "Adobe NotDef";
       src: url(https://cdn.jsdelivr.net/gh/adobe-fonts/adobe-notdef/AND-Regular.ttf);
   }
-  #app {
-    font-family: "Roboto", Helvetica, Arial, sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-align: left;
-    color: #2c3e50;
-    margin-top: 60px;
-  }
-  #panel {
-    position: fixed;
-    top: 0;
-    right: 0;
-    padding: 10px;
-    background-color: white;
-    box-shadow: 3px 3px 3px lightgray;
-  }
-  .panel-tile {
-    margin-bottom: 10px;
-  }
-  .familyy {
-    padding-top: 10px;
-    padding-bottom: 10px;
-  }
-  .item {
-    margin-top: 10px;
-    padding-top: 10px;
-    padding-bottom: 10px;
-    border-top: 1px solid #000;
-  }
-  #edited-panel {
-    position: fixed;
-    left: 0px;
-    top: 0px;
-    width: 80px;
-    padding: 5px;
-    background-color: black;
-    color: white;
-    font-weight: bold;
-  }
 </style>
