diff --git a/components/content/ListSystems.vue b/components/content/ListSystems.vue
index ebff12739e35405d8e47b213c4b14a707c56ce58..ad355346dd1403c64552e1f407e749d6bbae7893 100644
--- a/components/content/ListSystems.vue
+++ b/components/content/ListSystems.vue
@@ -37,8 +37,8 @@ const { initPfam } = usePfamStore();
 initPfam();
 </script>
 <template>
-  <v-card flat color="transparent" class="my-5">
-    <v-toolbar>
+  <v-card variant="outlined" class="my-5">
+    <v-toolbar color="primary">
       <v-toolbar-title>Defense Systems</v-toolbar-title>
 
       <v-text-field
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 3f54bffc98378bd4b76b1daa803c35cb91da632e..c92e20d70dec7acfd9bd38a55b59fb106b706f24 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,3 +1,4 @@
+import { md3 } from 'vuetify/blueprints'
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
   modules: [
@@ -18,7 +19,10 @@ export default defineNuxtConfig({
       icons: {
         defaultSet: 'mdi',
         sets: ['mdi', 'fa', 'md'],
-      }
+      },
+      blueprint: md3
+
+
     }
   },
   devtools: {