diff --git a/components/Nav/Navbar.vue b/components/Nav/Navbar.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ed9146b984dbb0ff8eb6d904dcc049fe2a0904d1
--- /dev/null
+++ b/components/Nav/Navbar.vue
@@ -0,0 +1,29 @@
+<template>
+  <v-app-bar>
+    <v-app-bar-nav-icon
+      variant="text"
+      @click.stop="drawer = !drawer"
+    ></v-app-bar-nav-icon>
+    <v-toolbar-title>Microbial Warefare</v-toolbar-title>
+    <v-btn @click="toggleTheme">toggle theme</v-btn>
+  </v-app-bar>
+  <v-navigation-drawer v-model="drawer">
+    <v-card flat>
+      <v-list>
+        <NavNavigation :navigation="navigation" />
+      </v-list>
+    </v-card>
+  </v-navigation-drawer>
+ 
+</template>
+<script setup lang="ts">
+import { useTheme } from "vuetify";
+const { navigation, page, surround, globals } = useContent();
+console.log(page.value);
+const theme = useTheme();
+
+function toggleTheme() {
+  theme.global.name.value = theme.global.current.value.dark ? "light" : "dark";
+}
+const drawer = ref(true);
+</script>
diff --git a/components/Navigation.vue b/components/Nav/Navigation.vue
similarity index 94%
rename from components/Navigation.vue
rename to components/Nav/Navigation.vue
index faad58fdc55243b82007af915045e9282c7de7f5..b2c227d988f6fd4548333e4c2322b4ece7f68a00 100644
--- a/components/Navigation.vue
+++ b/components/Nav/Navigation.vue
@@ -13,7 +13,6 @@ const props = defineProps<{
       <template v-slot:activator="{ props }">
         <v-list-item
           v-bind="props"
-          prepend-icon="mdi-account-circle"
           nav
           :title="navItem.title"
           active-color="primary"
diff --git a/components/TableOfContent.vue b/components/Nav/TableOfContent.vue
similarity index 79%
rename from components/TableOfContent.vue
rename to components/Nav/TableOfContent.vue
index a281e098719d2207c20efc52ad366e9dc6a3609c..ef7a7e6c8c380e4f88ebaf88f73589479fa545e2 100644
--- a/components/TableOfContent.vue
+++ b/components/Nav/TableOfContent.vue
@@ -1,10 +1,6 @@
 <script setup lang="ts">
 const props = defineProps<{
   links: any;
-  depth: {
-    type: number;
-    default: 2;
-  };
 }>();
 
 // const { navigation } = useContent();
@@ -20,7 +16,7 @@ const props = defineProps<{
       :href="`#${link.id}`"
       variant="plain"
     >
-      <template v-if="link?.children && links.depth <= props.depth">
+      <template v-if="link?.children?.length > 0 && link.depth <= 3">
         <TableOfContent :links="link.children" />
       </template>
     </v-list-item>
diff --git a/layouts/article.vue b/layouts/article.vue
index 6b2bfaf854575457f871dbe1e237d0cbb7c71fda..cd373b26d7c93483f2530b42ed56c6079a30c810 100644
--- a/layouts/article.vue
+++ b/layouts/article.vue
@@ -1,26 +1,12 @@
 <template>
   <v-card>
     <v-app>
-      <v-app-bar>
-        <v-app-bar-nav-icon
-          variant="text"
-          @click.stop="drawer = !drawer"
-        ></v-app-bar-nav-icon>
-        <v-toolbar-title>Microbial Warefare</v-toolbar-title>
-      </v-app-bar>
-
-      <v-navigation-drawer v-model="drawer">
-        <v-card flat>
-          <v-list>
-            <Navigation :navigation="navigation" />
-          </v-list>
-        </v-card>
-      </v-navigation-drawer>
+      <NavNavbar />
       <v-navigation-drawer location="right" permanent>
-        <v-list> <TableOfContent :links="page.body.toc.links" /> </v-list
+        <v-list> <NavTableOfContent :links="page.body.toc.links" /> </v-list
       ></v-navigation-drawer>
       <v-main style="min-height: 300px">
-        <v-container>
+        <v-container class="px-8">
           <slot />
 
           <v-footer app>footer</v-footer>
@@ -31,7 +17,6 @@
 </template>
 <script setup lang="ts">
 const { navigation, page, surround, globals } = useContent();
-console.log(page.value);
 
-const drawer = ref(true);
+console.log("the toc", page.value);
 </script>
diff --git a/layouts/custom.vue b/layouts/custom.vue
index 0f6a223dce2bf1bf46f5a2809eed3e506df3447c..8e67eac306f116c582dd8cae95e614b073d23b5b 100644
--- a/layouts/custom.vue
+++ b/layouts/custom.vue
@@ -1,21 +1,7 @@
 <template>
   <v-card>
     <v-app>
-      <v-app-bar>
-        <v-app-bar-nav-icon
-          variant="text"
-          @click.stop="drawer = !drawer"
-        ></v-app-bar-nav-icon>
-        <v-toolbar-title>Microbial Warefare</v-toolbar-title>
-      </v-app-bar>
-
-      <v-navigation-drawer v-model="drawer">
-        <v-card flat>
-          <v-list>
-            <Navigation :navigation="navigation" />
-          </v-list>
-        </v-card>
-      </v-navigation-drawer>
+      <NavNavbar />
 
       <v-main style="min-height: 300px">
         <v-container>
@@ -27,7 +13,7 @@
   </v-card>
 </template>
 <script setup lang="ts">
-const { navigation, page, surround, globals } = useContent();
+const { navigation } = useContent();
 
 const drawer = ref(true);
 </script>