diff --git a/components/Nav/Navbar.vue b/components/Nav/Navbar.vue
index 6330ceadef453c05b36c5b423cbfb27de72ecb65..97d9560ccb1091bf2a6392257e6799e7adbfd23f 100644
--- a/components/Nav/Navbar.vue
+++ b/components/Nav/Navbar.vue
@@ -2,7 +2,8 @@
   <v-app-bar>
     <v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
     <v-toolbar-title>DefenseFinder Wiki</v-toolbar-title>
-    <v-btn @click="toggle()">toggle theme</v-btn>
+    <v-btn icon="mdi-theme-light-dark" @click="toggle()">
+    </v-btn>
   </v-app-bar>
   <v-navigation-drawer v-model="drawer" :border="0">
     <v-card flat>
diff --git a/composables/useCustomTheme.ts b/composables/useCustomTheme.ts
index 9d7fc03b1715d3a26701ea982266ee64918d6e1b..7a44c724e9553eb0081ebb52ba1cc0d980ddf4cc 100644
--- a/composables/useCustomTheme.ts
+++ b/composables/useCustomTheme.ts
@@ -5,7 +5,7 @@ export function useCustomTheme() {
     const isDark = useDark({
       valueDark: 'dark',
       valueLight: 'light',
-      initialValue: 'light',
+      initialValue: 'auto',
       onChanged: (dark: boolean) => {
         $vuetify.theme.global.name.value = dark ? 'dark' : 'light'
       },
diff --git a/layouts/article.vue b/layouts/article.vue
index 4f93ec839a31fa9f63c30baa0829a6423e1ae413..46805b472cd8a1c1b6a294279710b8abac8be3ec 100644
--- a/layouts/article.vue
+++ b/layouts/article.vue
@@ -3,34 +3,33 @@ const { page, surround } = useContent();
 import { useCustomTheme } from '~/composables/useCustomTheme'
 
 const { isDark } = useCustomTheme()
+
 </script>
 <template>
-  <v-card>
-    <VApp :theme="isDark ? 'dark' : 'light'">
-      <v-main style="min-height: 300px">
-        <!-- <v-container class="fill-height w-auto" > -->
-        <!-- <v-card flat max-width="1000" min-height="300" color="transparent">
+  <VApp :theme="isDark ? 'dark' : 'light'">
+    <v-main style="min-height: 300px">
+      <!-- <v-container class="fill-height w-auto" > -->
+      <!-- <v-card flat max-width="1000" min-height="300" color="transparent">
             <v-card-text> -->
-        <v-container>
-          <slot />
-          <!-- </v-card-text>
+      <v-container>
+        <slot />
+        <!-- </v-card-text>
           </v-card> -->
-          <EditGitlab />
-          <v-row justify="space-between">
-            <v-col v-for="(surroundPage, i) in surround" :key="surroundPage?._id" cols="auto">
-              <v-btn v-if="surroundPage" :prepend-icon="i === 0 ? 'mdi-arrow-left' : undefined"
-                :append-icon="i === 1 ? 'mdi-arrow-right' : undefined" variant="outlined" color="primary"
-                :to="surroundPage?._path">{{ surroundPage?.title }}</v-btn>
-            </v-col>
-          </v-row>
-        </v-container>
-        <v-footer id="app-footer" app>footer</v-footer>
-        <!-- </v-container> -->
-      </v-main>
-      <NavNavbar />
-      <NavTableOfContent :links="page.body.toc.links" />
-    </VApp>
-  </v-card>
+        <EditGitlab />
+        <v-row justify="space-between">
+          <v-col v-for="(surroundPage, i) in surround" :key="surroundPage?._id" cols="auto">
+            <v-btn v-if="surroundPage" :prepend-icon="i === 0 ? 'mdi-arrow-left' : undefined"
+              :append-icon="i === 1 ? 'mdi-arrow-right' : undefined" variant="outlined" color="primary"
+              :to="surroundPage?._path">{{ surroundPage?.title }}</v-btn>
+          </v-col>
+        </v-row>
+      </v-container>
+      <v-footer id="app-footer" app>footer</v-footer>
+      <!-- </v-container> -->
+    </v-main>
+    <NavNavbar />
+    <NavTableOfContent :links="page.body.toc.links" />
+  </VApp>
 </template>
 
 <style scoped>