diff --git a/components/LayoutWrapper.vue b/components/LayoutWrapper.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1d71a3e3869d64015e6d001c8098c6a0391c62ad
--- /dev/null
+++ b/components/LayoutWrapper.vue
@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+export interface Props {
+  fluid: boolean
+  toc: boolean
+  edit: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  fluid: false,
+  toc: true,
+  edit: true
+});
+
+const { page } = useContent();
+const scrollThreshold = ref(200)
+const density = ref<'compact' | 'prominent'>("prominent")
+function onScroll() {
+  if (window.scrollY > scrollThreshold.value) {
+    density.value = "compact"
+  }
+  else { density.value = "prominent" }
+}
+
+</script>
+
+<template>
+  <VApp>
+    <v-main style="min-height: 300px">
+      <v-container v-scroll="onScroll" :fluid="fluid">
+        <slot />
+        <!-- </v-card-text>
+          </v-card> -->
+        <EditGitlab v-if="edit" />
+        <NavPrevNext v-if="edit" />
+      </v-container>
+      <!-- <Footer></Footer> -->
+    </v-main>
+    <NavNavbar :density="density" />
+    <NavTableOfContent v-if="toc" :links="page.body.toc.links" />
+    <nav-back-to-top />
+  </VApp>
+</template>
+
+<style scoped></style>
diff --git a/components/Nav/Navbar.vue b/components/Nav/Navbar.vue
index 5384e5dfe158844dbdd64d1cac51866cf25ac99a..579534876181fcbf82fee4af7e48595104d51fd5 100644
--- a/components/Nav/Navbar.vue
+++ b/components/Nav/Navbar.vue
@@ -50,7 +50,7 @@ const computedNavigation = computed(() => {
 });
 </script>
 <template>
-  <v-app-bar :elevation="0" border :density="density" color="background">
+  <v-app-bar :elevation="0" border name="app-bar" :density="density" color="background">
     <template #prepend>
       <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
       <!-- <Logo height="45px" /> -->
diff --git a/layouts/article-no-toc.vue b/layouts/article-no-toc.vue
index 12b7006d3d82dcf41ca73f33a6d0e3b80ba643a4..5ee7044adfbacadba3e2a5c660a6c037212fd572 100644
--- a/layouts/article-no-toc.vue
+++ b/layouts/article-no-toc.vue
@@ -1,15 +1,8 @@
 
 <template>
-    <VApp>
-        <v-main style="min-height: 300px">
-            <v-container>
-                <slot />
-                <NavPrevNext />
-            </v-container>
-        </v-main>
-        <NavNavbar />
-        <nav-back-to-top />
-    </VApp>
+    <LayoutWrapper :fluid="true" :toc="false" :edit="false">
+        <slot />
+    </LayoutWrapper>
 </template>
 
 <style scoped>
diff --git a/layouts/article.vue b/layouts/article.vue
index 1f197401633a141979ca599eaf1c63398214da29..47f2cb0d6f6735c5a58a6076794badf603f54619 100644
--- a/layouts/article.vue
+++ b/layouts/article.vue
@@ -1,30 +1,8 @@
-<script setup lang="ts">
-const { page } = useContent();
-const scrollThreshold = ref(200)
-const density = ref<'compact' | 'prominent'>("prominent")
-function onScroll() {
-  if (window.scrollY > scrollThreshold.value) {
-    density.value = "compact"
-  }
-  else { density.value = "prominent" }
-}
-</script>
+<script setup lang="ts"></script>
 <template>
-  <VApp>
-    <v-main style="min-height: 300px">
-      <v-container v-scroll="onScroll">
-        <slot />
-        <!-- </v-card-text>
-          </v-card> -->
-        <EditGitlab />
-        <NavPrevNext />
-      </v-container>
-      <!-- <Footer></Footer> -->
-    </v-main>
-    <NavNavbar :density="density" />
-    <NavTableOfContent :links="page.body.toc.links" />
-    <nav-back-to-top />
-  </VApp>
+  <LayoutWrapper :fluid="true" :toc="false">
+    <slot />
+  </LayoutWrapper>
 </template>
 
 <style scoped>
diff --git a/pages/defense-systems.vue b/pages/defense-systems.vue
index f0754901d99a0ce087b4b4ea1dff30ea8fdc4c35..2e866bd4cb1b4f4a20bd0563a06977eb610d81e6 100644
--- a/pages/defense-systems.vue
+++ b/pages/defense-systems.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { useDisplay } from "vuetify";
+import { useDisplay, useLayout } from "vuetify";
 
 const { height } = useDisplay();
-
+// const { getLayoutItem } = useLayout()
+// console.log(getLayoutItem('app-bar'))
 const { data, error, pending } = await useAsyncData(
   "list-defense-systems",
   () => queryContent("/defense-systems").where({ _partial: false }).find()
@@ -53,6 +54,6 @@ const systems = computed(() => {
 </script>
 <template>
   <v-card flat color="transparent">
-    <ListSystems :headers="headers" :systems="systems" :height="height - 350"></ListSystems>
+    <ListSystems :headers="headers" :systems="systems" :height="height - 220"></ListSystems>
   </v-card>
 </template>
\ No newline at end of file
diff --git a/pages/predicted-structure.vue b/pages/predicted-structure.vue
index 0f8b2d977a5650f136554815a40c4b7bb36b45d5..3776e4bc144b1bfcdb34b24bd6cf8e374c2b25dd 100644
--- a/pages/predicted-structure.vue
+++ b/pages/predicted-structure.vue
@@ -7,7 +7,7 @@ import { useDisplay } from "vuetify";
 const { height } = useDisplay();
 const minTableHeight = ref(400)
 const computedTableHeight = computed(() => {
-    const computedHeight = height.value - 500
+    const computedHeight = height.value - 400
     return computedHeight > minTableHeight.value ? computedHeight : minTableHeight.value
 })
 
@@ -36,7 +36,7 @@ const {
 </script>
 
 <template>
-    <v-card>
+    <v-card flat>
         <v-toolbar color="primary" density="compact">
             <v-app-bar-nav-icon></v-app-bar-nav-icon>
             <v-toolbar-title>Predicted Structures summary ({{ totalHits }})
diff --git a/pages/refseq.vue b/pages/refseq.vue
index ea9682f9ce4e469dad5e846d8f6e37a414fe8b8f..be42cde2212f5c599f71c245dbac8d252193e39b 100644
--- a/pages/refseq.vue
+++ b/pages/refseq.vue
@@ -156,7 +156,7 @@ const datatable = ref(null)
 </script>
 
 <template>
-  <v-card>
+  <v-card flat>
     <v-toolbar color="primary" density="compact">
       <v-app-bar-nav-icon></v-app-bar-nav-icon>
       <v-toolbar-title>RefSeq Entries ({{ totalHits }})
@@ -192,7 +192,7 @@ const datatable = ref(null)
     </v-data-table-virtual>
 
   </v-card>
-  <v-card class="my-3" :loading="pending">
+  <v-card flat class="my-3" :loading="pending">
     <v-card-title> Systems Distribution</v-card-title>
 
     <!-- <v-toolbar density="compact"><v-toolbar-title> Distribution Systems</v-toolbar-title></v-toolbar> -->
@@ -200,7 +200,7 @@ const datatable = ref(null)
       <PlotFigure :options="unref(computedDistriSystemOptions)" defer></PlotFigure>
     </v-card-text>
   </v-card>
-  <v-card :loading="pending">
+  <v-card flat :loading="pending">
     <v-card-title> Taxonomic Distribution</v-card-title>
     <!-- <v-toolbar density="compact"><v-toolbar-title> Distribution Taxonomy</v-toolbar-title></v-toolbar> -->
     <v-card-text>