diff --git a/gdn-app/src/components/CNavbar.vue b/gdn-app/src/components/CNavbar.vue
index 5e04317..e89fa53 100644
--- a/gdn-app/src/components/CNavbar.vue
+++ b/gdn-app/src/components/CNavbar.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useReposStore } from "@/stores/repos";
 import { RiDeleteBinFill, RiSettings3Fill } from "@remixicon/vue";
+import CNavbarButton from "./CNavbarButton.vue";
 import CNavbarDropdown from "./CNavbarDropdown.vue";
 
 const repos = useReposStore();
@@ -15,19 +16,16 @@ const repos = useReposStore();
     </div>
 
     <!-- Temporary delete button until I add proper repo settings -->
-    <div
+    <CNavbarButton
       v-show="repos.selectedRepo !== undefined"
-      class="flex select-none items-center rounded-md bg-neutral-800 px-2 hover:bg-neutral-700 active:bg-neutral-500"
       @click="repos.removeRepo(repos.selectedRepoId)"
     >
       <RiDeleteBinFill size="16px" class="inline" />
-    </div>
+    </CNavbarButton>
 
     <!-- Nothing hooked up yet -->
-    <div
-      class="flex select-none items-center rounded-md bg-neutral-800 px-2 hover:bg-neutral-700 active:bg-neutral-500"
-    >
+    <CNavbarButton>
       <RiSettings3Fill size="16px" class="inline" />
-    </div>
+    </CNavbarButton>
   </div>
 </template>
diff --git a/gdn-app/src/components/CNavbarButton.vue b/gdn-app/src/components/CNavbarButton.vue
new file mode 100644
index 0000000..d7a2ff8
--- /dev/null
+++ b/gdn-app/src/components/CNavbarButton.vue
@@ -0,0 +1,7 @@
+<template>
+  <div
+    class="flex select-none items-center rounded-md bg-neutral-800 px-2 hover:bg-neutral-700 active:bg-neutral-500"
+  >
+    <slot></slot>
+  </div>
+</template>