diff --git a/components/TableOfContent.vue b/components/TableOfContent.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a281e098719d2207c20efc52ad366e9dc6a3609c
--- /dev/null
+++ b/components/TableOfContent.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+const props = defineProps<{
+  links: any;
+  depth: {
+    type: number;
+    default: 2;
+  };
+}>();
+
+// const { navigation } = useContent();
+// console.log(navigation.value);
+</script>
+
+<template>
+  <template v-for="link in props.links">
+    <v-list-item
+      nav
+      :title="link.text"
+      :value="link.id"
+      :href="`#${link.id}`"
+      variant="plain"
+    >
+      <template v-if="link?.children && links.depth <= props.depth">
+        <TableOfContent :links="link.children" />
+      </template>
+    </v-list-item>
+  </template>
+</template>
diff --git a/content/1.introduction/index.md b/content/1.introduction/index.md
index fd2ce8a14c9858283eff46739a54043bb4a60302..fe74ab00afd3a6510efa6235b1a4e519b76d9e1c 100644
--- a/content/1.introduction/index.md
+++ b/content/1.introduction/index.md
@@ -1,6 +1,6 @@
 ---
 title: Introduction
-layout: custom
+layout: article
 ---
 
 # Introduction
diff --git a/content/2.defense-systems/0.index.md b/content/2.defense-systems/0.index.md
index b602c6a202bc5cdd493694ace6c16a54e16ccafd..d2087bd6c8c7ef6a5130ff2e9b1f436cf85ec827 100644
--- a/content/2.defense-systems/0.index.md
+++ b/content/2.defense-systems/0.index.md
@@ -1,5 +1,6 @@
 ---
 title: List of defense systems
+layout: article
 ---
 
 # List of defense systems
diff --git a/content/2.defense-systems/1.PARIS.md b/content/2.defense-systems/1.PARIS.md
index 1922d68894b1e7dc5855ec83e5525e24551b8590..915effc02a4ec9e198d336611a0348e33e14e7c5 100644
--- a/content/2.defense-systems/1.PARIS.md
+++ b/content/2.defense-systems/1.PARIS.md
@@ -1,7 +1,7 @@
 ---
 title: Paris
 toc: true
-layout: custom
+layout: article
 ---
 
 # PARIS system
@@ -56,10 +56,10 @@ Paris type II merge system in _Desulfovibrio desulfuricans_ (GCF\__000025705.1).
 
 3. Studier FW. Gene 0.3 of bacteriophage T7 acts to overcome the DNA restriction system of the host. J Mol Biol. 1975 May 15;94(2):283-95. doi: 10.1016/0022-2836(75)90083-2. PMID: 1095770.
 
-## ::references-list
+<!-- ## ::references-list
 
 items: - 10.1101/2021.01.21.427644 - 10.1093/nar/gkaa290 - 10.1016/0022-2836(75)90083-2
 
 ---
 
-::
+:: -->
diff --git a/layouts/article.vue b/layouts/article.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6b2bfaf854575457f871dbe1e237d0cbb7c71fda
--- /dev/null
+++ b/layouts/article.vue
@@ -0,0 +1,37 @@
+<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>
+      <v-navigation-drawer location="right" permanent>
+        <v-list> <TableOfContent :links="page.body.toc.links" /> </v-list
+      ></v-navigation-drawer>
+      <v-main style="min-height: 300px">
+        <v-container>
+          <slot />
+
+          <v-footer app>footer</v-footer>
+        </v-container></v-main
+      >
+    </v-app>
+  </v-card>
+</template>
+<script setup lang="ts">
+const { navigation, page, surround, globals } = useContent();
+console.log(page.value);
+
+const drawer = ref(true);
+</script>