diff --git a/ui/src/App.vue b/ui/src/App.vue
index 5d1608a..963e8a2 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -1,22 +1,14 @@
 <script setup lang="ts">
 import { ref, provide, onMounted } from "vue";
 import { AppAgentClient, AppAgentWebsocket } from "@holochain/client";
-import DistributeGpgKey from "./trusted/trusted/DistributeGpgKey.vue";
-import MyKeys from "./trusted/trusted/MyKeys.vue";
-import SearchKeys from "./trusted/trusted/SearchKeys.vue";
 import NotifyContainer from "./component/NotifyContainer.vue";
 import { useThemeStore } from "./store/theme-store";
-import SettingsEditor from "./component/SettingsEditor.vue";
-import KeyCollections from "./trusted/trusted/KeyCollections.vue";
-import { useRouter } from "vue-router";
 
 const themeStore = useThemeStore();
-const router = useRouter();
 
 const client = ref<AppAgentClient | null>(null);
 provide("client", client);
 const loading = ref(true);
-const showScreen = ref<"home" | "search" | "settings" | "about">("home");
 
 const applyTheme = (theme: string) => {
   document.documentElement.setAttribute("data-theme", theme);
diff --git a/ui/src/component/LoadingSpinner.vue b/ui/src/component/LoadingSpinner.vue
index c85f8e5..a998d83 100644
--- a/ui/src/component/LoadingSpinner.vue
+++ b/ui/src/component/LoadingSpinner.vue
@@ -1,22 +1,21 @@
 <script setup lang="ts">
-import { defineProps } from 'vue'
+import { defineProps } from "vue";
 
 defineProps<{
-    loading: boolean
-}>()
-
+  loading: boolean;
+}>();
 </script>
 
 <template>
-    <Transition name="fade" mode="out-in">
-        <div class="flex flex-col items-center" v-if="loading">
-            <slot name="loading"></slot>
-            <span class="loading loading-infinity loading-lg"></span>
-        </div>
-        <template v-else>
-            <slot name="content"></slot>
-        </template>
-    </Transition>
+  <Transition name="fade" mode="out-in">
+    <div class="flex flex-col items-center" v-if="loading">
+      <slot name="loading"></slot>
+      <span class="loading loading-infinity loading-lg"></span>
+    </div>
+    <template v-else>
+      <slot name="content"></slot>
+    </template>
+  </Transition>
 </template>
 
 <style>
diff --git a/ui/src/component/NavBar.vue b/ui/src/component/NavBar.vue
index 72ced42..a8e73f8 100644
--- a/ui/src/component/NavBar.vue
+++ b/ui/src/component/NavBar.vue
@@ -1,42 +1,63 @@
 <script setup lang="ts">
-import { useRouter } from 'vue-router';
+import { useRouter } from "vue-router";
 
 const router = useRouter();
-
 </script>
 
 <template>
-    <div class="navbar bg-base-100">
-        <div class="navbar-start">
-            <div class="dropdown">
-                <div tabindex="0" role="button" class="btn btn-ghost btn-circle">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
-                        stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" />
-                    </svg>
-                </div>
-                <ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
-                    <li><router-link to="/">Home</router-link></li>
-                    <li>
-                        <router-link to="/settings">Settings</router-link>
-                    </li>
-                    <li><router-link to="/about">About</router-link></li>
-                </ul>
-            </div>
-        </div>
-        <div class="navbar-center">
-            <button class="btn btn-ghost text-xl" @click="router.push('/')">
-                Web of Trust
-            </button>
-        </div>
-        <div class="navbar-end">
-            <router-link to="/search" class="px-2">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
-                    stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-                </svg>
-            </router-link>
+  <div class="navbar bg-base-100">
+    <div class="navbar-start">
+      <div class="dropdown">
+        <div tabindex="0" role="button" class="btn btn-ghost btn-circle">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-5 w-5"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M4 6h16M4 12h16M4 18h7"
+            />
+          </svg>
         </div>
+        <ul
+          tabindex="0"
+          class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52"
+        >
+          <li><router-link to="/">Home</router-link></li>
+          <li>
+            <router-link to="/settings">Settings</router-link>
+          </li>
+          <li><router-link to="/about">About</router-link></li>
+        </ul>
+      </div>
+    </div>
+    <div class="navbar-center">
+      <button class="btn btn-ghost text-xl" @click="router.push('/')">
+        Web of Trust
+      </button>
+    </div>
+    <div class="navbar-end">
+      <router-link to="/search" class="px-2">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-5 w-5"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+          />
+        </svg>
+      </router-link>
     </div>
-</template>
\ No newline at end of file
+  </div>
+</template>
diff --git a/ui/src/main.ts b/ui/src/main.ts
index 4e3e141..66328c8 100644
--- a/ui/src/main.ts
+++ b/ui/src/main.ts
@@ -2,7 +2,7 @@ import { createApp } from "vue";
 import "./style.css";
 import App from "./App.vue";
 import { createPinia } from "pinia";
-import router from './router'
+import router from "./router";
 
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
diff --git a/ui/src/pages/AboutPage.vue b/ui/src/pages/AboutPage.vue
index 90a6153..5ac152e 100644
--- a/ui/src/pages/AboutPage.vue
+++ b/ui/src/pages/AboutPage.vue
@@ -1,26 +1,32 @@
 <script setup lang="ts">
-import NavBar from '../component/NavBar.vue';
-
+import NavBar from "../component/NavBar.vue";
 </script>
 
 <template>
-    <NavBar></NavBar>
-    <div class="container mx-auto mt-5">
-        <p>
-            You can learn more about protecting your E-mails with GPG from the
-            <a href="https://emailselfdefense.fsf.org/en/" target="_blank" class="link">Free Software Foundation</a>.
-        </p>
-        <p>
-            This hApp is a distributed solution for section #5. Rather than
-            needing to send your public keys to a centralized server, you can
-            distribute them using Holochain.
-        </p>
+  <NavBar></NavBar>
+  <div class="container mx-auto mt-5">
+    <p>
+      You can learn more about protecting your E-mails with GPG from the
+      <a
+        href="https://emailselfdefense.fsf.org/en/"
+        target="_blank"
+        class="link"
+        >Free Software Foundation</a
+      >.
+    </p>
+    <p>
+      This hApp is a distributed solution for section #5. Rather than needing to
+      send your public keys to a centralized server, you can distribute them
+      using Holochain.
+    </p>
 
-        <br />
-        <p>
-            You can get the
-            <a href="https://github.com/ThetaSinner/hWOT" target="_blank" class="link">source code</a>
-            for this app to verify its behavior.
-        </p>
-    </div>
-</template>
\ No newline at end of file
+    <br />
+    <p>
+      You can get the
+      <a href="https://github.com/ThetaSinner/hWOT" target="_blank" class="link"
+        >source code</a
+      >
+      for this app to verify its behavior.
+    </p>
+  </div>
+</template>
diff --git a/ui/src/pages/HomePage.vue b/ui/src/pages/HomePage.vue
index ee35716..aef9e2d 100644
--- a/ui/src/pages/HomePage.vue
+++ b/ui/src/pages/HomePage.vue
@@ -1,16 +1,15 @@
 <script setup lang="ts">
 import MyKeys from "../trusted/trusted/MyKeys.vue";
 import KeyCollections from "../trusted/trusted/KeyCollections.vue";
-import NavBar from '../component/NavBar.vue';
-
+import NavBar from "../component/NavBar.vue";
 </script>
 
 <template>
-    <NavBar></NavBar>
-    <div class="container mx-auto mt-5">
-        <MyKeys></MyKeys>
-        <div class="mt-5">
-            <KeyCollections></KeyCollections>
-        </div>
+  <NavBar></NavBar>
+  <div class="container mx-auto mt-5">
+    <MyKeys></MyKeys>
+    <div class="mt-5">
+      <KeyCollections></KeyCollections>
     </div>
+  </div>
 </template>
diff --git a/ui/src/pages/SearchPage.vue b/ui/src/pages/SearchPage.vue
index e881e9f..423300a 100644
--- a/ui/src/pages/SearchPage.vue
+++ b/ui/src/pages/SearchPage.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import SearchKeys from "../trusted/trusted/SearchKeys.vue";
-import NavBar from '../component/NavBar.vue';
-
+import NavBar from "../component/NavBar.vue";
 </script>
 
 <template>
-    <NavBar></NavBar>
-    <div class="container mx-auto mt-5">
-        <SearchKeys></SearchKeys>
-    </div>
+  <NavBar></NavBar>
+  <div class="container mx-auto mt-5">
+    <SearchKeys></SearchKeys>
+  </div>
 </template>
diff --git a/ui/src/pages/SettingsPage.vue b/ui/src/pages/SettingsPage.vue
index adc405d..ffdac78 100644
--- a/ui/src/pages/SettingsPage.vue
+++ b/ui/src/pages/SettingsPage.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import SettingsEditor from "../component/SettingsEditor.vue";
-import NavBar from '../component/NavBar.vue';
-
+import NavBar from "../component/NavBar.vue";
 </script>
 
 <template>
-    <NavBar></NavBar>
-    <div class="container mx-auto w-1/2 mt-5">
-        <SettingsEditor></SettingsEditor>
-    </div>
+  <NavBar></NavBar>
+  <div class="container mx-auto w-1/2 mt-5">
+    <SettingsEditor></SettingsEditor>
+  </div>
 </template>
diff --git a/ui/src/router.ts b/ui/src/router.ts
index 8af3789..edc2efa 100644
--- a/ui/src/router.ts
+++ b/ui/src/router.ts
@@ -1,14 +1,13 @@
-import { createRouter, createWebHistory } from 'vue-router'
-
+import { createRouter, createWebHistory } from "vue-router";
 
 const router = createRouter({
-    history: createWebHistory(),
-    routes: [
-        { path: '/', component: () => import('./pages/HomePage.vue') },
-        { path: '/search', component: () => import('./pages/SearchPage.vue') },
-        { path: '/settings', component: () => import('./pages/SettingsPage.vue') },
-        { path: '/about', component: () => import('./pages/AboutPage.vue') },
-      ]
+  history: createWebHistory(),
+  routes: [
+    { path: "/", component: () => import("./pages/HomePage.vue") },
+    { path: "/search", component: () => import("./pages/SearchPage.vue") },
+    { path: "/settings", component: () => import("./pages/SettingsPage.vue") },
+    { path: "/about", component: () => import("./pages/AboutPage.vue") },
+  ],
 });
 
-export default router
+export default router;
diff --git a/ui/src/store/key-collections-store.ts b/ui/src/store/key-collections-store.ts
index 4eda5a8..4f5f498 100644
--- a/ui/src/store/key-collections-store.ts
+++ b/ui/src/store/key-collections-store.ts
@@ -36,7 +36,7 @@ export const useKeyCollectionsStore = defineStore("key-collections", () => {
         payload: null,
         cap_secret: null,
       });
-  
+
       keyCollections.value = [...collections, ...keyCollections.value];
     } catch (e) {
       // TODO Don't have the notifications store here, can I use it?
diff --git a/ui/src/store/my-keys-store.ts b/ui/src/store/my-keys-store.ts
index 64f1019..0f08c4f 100644
--- a/ui/src/store/my-keys-store.ts
+++ b/ui/src/store/my-keys-store.ts
@@ -26,7 +26,7 @@ export const useMyKeysStore = defineStore("my-keys", () => {
         payload: null,
         cap_secret: null,
       });
-  
+
       myKeys.value = [...r, ...myKeys.value];
     } catch (e) {
       // TODO Don't have the notifications store here, can I use it?
diff --git a/ui/src/trusted/trusted/DistributeGpgKey.vue b/ui/src/trusted/trusted/DistributeGpgKey.vue
index 7038eb7..3bd9eb7 100644
--- a/ui/src/trusted/trusted/DistributeGpgKey.vue
+++ b/ui/src/trusted/trusted/DistributeGpgKey.vue
@@ -9,7 +9,7 @@ import KeyList from "../../component/KeyList.vue";
 const client = inject("client") as ComputedRef<AppAgentClient>;
 
 const emit = defineEmits<{
-  (e: 'distributed'): void;
+  (e: "distributed"): void;
 }>();
 
 const notifications = useNotificationsStore();
diff --git a/ui/src/trusted/trusted/KeyCollections.vue b/ui/src/trusted/trusted/KeyCollections.vue
index f8374c3..5a611d2 100644
--- a/ui/src/trusted/trusted/KeyCollections.vue
+++ b/ui/src/trusted/trusted/KeyCollections.vue
@@ -15,27 +15,22 @@ const { loading, keyCollections } = storeToRefs(useKeyCollectionsStore());
       <p class="text-lg p-2">Loading key collections</p>
     </template>
     <template #content>
-      <div> <!-- Single root for loading transition -->
-        <div
-        v-if="keyCollections.length === 0"
-        class="ms-5 italic"
-      >
-        <p>You don't have any key collections yet.</p>
-        <!-- TODO I want to link to the search screen here but I need the router for that -->
-        <p>When you add a key you will be able to create a collection for it!</p>
-      </div>
-      <template v-else>
-        <div
-          v-for="c in keyCollections"
-          v-bind:key="c.name"
-          class="mt-3"
-        >
-          <p class="font-bold">{{ c.name }}</p>
-          <KeyList :keys-with-meta="c.gpg_keys" :readonly="true"></KeyList>
+      <div>
+        <!-- Single root for loading transition -->
+        <div v-if="keyCollections.length === 0" class="ms-5 italic">
+          <p>You don't have any key collections yet.</p>
+          <!-- TODO I want to link to the search screen here but I need the router for that -->
+          <p>
+            When you add a key you will be able to create a collection for it!
+          </p>
         </div>
-      </template>
+        <template v-else>
+          <div v-for="c in keyCollections" v-bind:key="c.name" class="mt-3">
+            <p class="font-bold">{{ c.name }}</p>
+            <KeyList :keys-with-meta="c.gpg_keys" :readonly="true"></KeyList>
+          </div>
+        </template>
       </div>
     </template>
   </LoadingSpinner>
-
 </template>
diff --git a/ui/src/trusted/trusted/MyKeys.vue b/ui/src/trusted/trusted/MyKeys.vue
index 30a0bf4..f9378c5 100644
--- a/ui/src/trusted/trusted/MyKeys.vue
+++ b/ui/src/trusted/trusted/MyKeys.vue
@@ -11,12 +11,15 @@ const { loading, myKeys } = storeToRefs(useMyKeysStore());
 const showDistribute = ref(false);
 
 // Encourage the user to distribute a key if they don't have any yet
-watch(loading, (loading) => {
-  if (!loading && myKeys.value.length === 0) {
-    showDistribute.value = true;
-  }
-}, { immediate: true });
-
+watch(
+  loading,
+  (loading) => {
+    if (!loading && myKeys.value.length === 0) {
+      showDistribute.value = true;
+    }
+  },
+  { immediate: true },
+);
 </script>
 
 <template>
@@ -25,8 +28,15 @@ watch(loading, (loading) => {
       <h3 class="text-lg">My GPG Keys</h3>
 
       <div class="flex flex-grow justify-end">
-        <button class="btn btn-circle btn-primary" title="Distribute a GPG key" @click="showDistribute = !showDistribute">
-          <font-awesome-icon v-if="!showDistribute" icon="fa-regular fa-share-from-square" />
+        <button
+          class="btn btn-circle btn-primary"
+          title="Distribute a GPG key"
+          @click="showDistribute = !showDistribute"
+        >
+          <font-awesome-icon
+            v-if="!showDistribute"
+            icon="fa-regular fa-share-from-square"
+          />
           <font-awesome-icon v-else icon="fa-solid fa-xmark" />
         </button>
       </div>
@@ -37,18 +47,21 @@ watch(loading, (loading) => {
         <p class="text-lg p-2">Loading keys</p>
       </template>
       <template #content>
-        <div> <!-- Single root for loading transition -->
+        <div>
+          <!-- Single root for loading transition -->
           <Transition name="fade">
             <div class="flex justify-center my-3" v-if="showDistribute">
               <div class="card w-3/4 bg-base-100 shadow-xl">
                 <div class="card-body">
                   <h2 class="card-title">Distribute your GPG public key</h2>
-                  <DistributeGpgKey @distributed="showDistribute = false"></DistributeGpgKey>
+                  <DistributeGpgKey
+                    @distributed="showDistribute = false"
+                  ></DistributeGpgKey>
                 </div>
               </div>
             </div>
           </Transition>
-  
+
           <template v-if="myKeys.length">
             <KeyList :keys-with-meta="myKeys" :readonly="true"></KeyList>
           </template>