diff --git a/components/Footer.vue b/components/Footer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..940569a18a799da1ba38bedbe5d48653167ef830
--- /dev/null
+++ b/components/Footer.vue
@@ -0,0 +1,3 @@
+<template>
+    <v-footer id="app-footer" app>footer</v-footer>
+</template>
\ No newline at end of file
diff --git a/components/Nav/Navbar.vue b/components/Nav/Navbar.vue
index 831b782ce182d7517d90a3b1fab7e2bb767a4bde..bef009bfaa558adbee5b26dc04a9b6fb0a587de2 100644
--- a/components/Nav/Navbar.vue
+++ b/components/Nav/Navbar.vue
@@ -10,9 +10,11 @@
       <v-btn v-for="section in sections" :key="section.id" color="primary" :href="section.href">
         {{ section.label }}
       </v-btn>
+      <v-btn @click="toggleTheme" color="primary"
+        :icon="theme.global.current.value.dark ? 'md:light_mode' : 'md:dark_mode'"></v-btn>
     </template>
   </v-app-bar>
-  <v-navigation-drawer v-model="drawer" :border="0">
+  <v-navigation-drawer v-model="drawer" :border="1">
     <v-card flat>
       <v-list nav density="compact" :lines="false">
         <NavNavigation :navigation="navigation" />
@@ -21,13 +23,17 @@
   </v-navigation-drawer>
 </template>
 <script setup lang="ts">
-import { useCustomTheme } from '~/composables/useCustomTheme'
+// import { useCustomTheme } from '~/composables/useCustomTheme'
+import { useDisplay, useTheme } from 'vuetify'
 
 const runtimeConfig = useRuntimeConfig()
-const { toggle } = useCustomTheme()
 const { navigation } = useContent();
 const { mobile } = useDisplay();
+const theme = useTheme()
 
+function toggleTheme() {
+  theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
+}
 const sections = ref([
   { id: "webservice", label: "webservice", href: runtimeConfig.public.defenseFinderWebservice }
 ])
diff --git a/components/content/MolstarPdbePlugin.vue b/components/content/MolstarPdbePlugin.vue
index d0ecd3b7b2040019b6a9a39b58200340efe67fa1..c9de71ed6f9913849130abf7b3026f53fe4a4878 100644
--- a/components/content/MolstarPdbePlugin.vue
+++ b/components/content/MolstarPdbePlugin.vue
@@ -31,10 +31,7 @@ const computedWidth = computed(() => {
     return width
 })
 
-
-
 useHead({
-
     link: [
         {
             rel: 'stylesheet',
@@ -64,8 +61,13 @@ useHead({
     <v-sheet class="d-flex align-center justify-center flex-wrap text-center mx-auto px-4 my-3" height="500"
         :max-width="1300" :width="computedWidth - 950" position="relative">
         <pdbe-molstar :custom-data-url="refinedDataUrl" custom-data-format="pdb" hide-expand-icon="true"
-            hide-controls="true"></pdbe-molstar>
+            hide-controls="true" landscape="true" sequence-panel></pdbe-molstar>
     </v-sheet>
 </template>
 
 
+<style scoped>
+.msp-plugin .msp-plugin-content {
+    color: black !important;
+}
+</style>
\ No newline at end of file
diff --git a/layouts/article.vue b/layouts/article.vue
index 78da292c847a3528361b4b4a7e8142d9cf18400a..0a6d156570e1b541117eb13caa0578609573aa72 100644
--- a/layouts/article.vue
+++ b/layouts/article.vue
@@ -1,14 +1,16 @@
 <script setup lang="ts">
 const { page, surround } = useContent();
-import { useCustomTheme } from '~/composables/useCustomTheme'
+// import { useCustomTheme } from '~/composables/useCustomTheme'
 import { useDisplay } from 'vuetify'
 
-const { isDark } = useCustomTheme()
+// const { isDark } = useCustomTheme()
 const { mobile } = useDisplay()
 
+
+
 </script>
 <template>
-  <VApp :theme="isDark ? 'dark' : 'light'">
+  <VApp>
     <v-main style="min-height: 300px">
       <!-- <v-container class="fill-height w-auto" > -->
       <!-- <v-card flat max-width="1000" min-height="300" color="transparent">
@@ -26,8 +28,7 @@ const { mobile } = useDisplay()
           </v-col>
         </v-row>
       </v-container>
-      <v-footer id="app-footer" app>footer</v-footer>
-      <!-- </v-container> -->
+      <Footer></Footer>
     </v-main>
     <NavNavbar />
     <NavTableOfContent :links="page.body.toc.links" />
diff --git a/layouts/custom.vue b/layouts/custom.vue
index afa688471e34c3e672e2ae0f69df3a80fb765964..e33c8d3bd337075515e46b56d6780b462b3a765e 100644
--- a/layouts/custom.vue
+++ b/layouts/custom.vue
@@ -6,7 +6,7 @@
       <v-main style="min-height: 300px">
         <v-container>
           <slot />
-          <v-footer app>footer</v-footer>
+          <Footer></Footer> 
         </v-container></v-main>
     </VApp>
   </v-card>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index cde52901bd7b7c2d2fa84a721f6159ea0ad15305..3f54bffc98378bd4b76b1daa803c35cb91da632e 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -4,7 +4,8 @@ export default defineNuxtConfig({
     '@nuxt/content',
     'vuetify-nuxt-module',
     '@vueuse/nuxt',
-    '@pinia/nuxt'
+    '@pinia/nuxt',
+    // '@unocss/nuxt',
   ],
   content: {
     documentDriven: {
@@ -13,7 +14,11 @@ export default defineNuxtConfig({
   },
   vuetify: {
     vuetifyOptions: {
-      labComponents: true
+      labComponents: true,
+      icons: {
+        defaultSet: 'mdi',
+        sets: ['mdi', 'fa', 'md'],
+      }
     }
   },
   devtools: {
@@ -24,10 +29,11 @@ export default defineNuxtConfig({
       defenseFinderWebservice: '/'
     }
   },
-  vue: {  
+  vue: {
     compilerOptions: {
       isCustomElement: (tag) => ['pdbe-molstar'].includes(tag),
     },
-  }
+  },
+
 
 })