diff --git a/components/Nav/Navbar.vue b/components/Nav/Navbar.vue
index cf7f51d22f26b73235369c51d1179faafe54b310..f580e4c8b290b5f5cb7b42c13076cc062341253c 100644
--- a/components/Nav/Navbar.vue
+++ b/components/Nav/Navbar.vue
@@ -13,8 +13,6 @@ function toggleTheme() {
   theme.global.name.value = theme.global.current.value.dark ? "light" : "dark";
 }
 
-
-
 const sections = ref([
   {
     id: "webservice",
@@ -27,20 +25,6 @@ const sections = ref([
 ]);
 
 
-// const computedSections = computed(() => {
-//   return sections.value.map(section => {
-
-//     if (section?.to) {
-//       const { refinedUrl } = useRefinedUrl(section.to)
-//       return { ...section, to: refinedUrl.value }
-//     }
-//     else {
-//       return section
-//     }
-
-
-//   })
-// })
 
 
 const drawer = ref(true);
diff --git a/components/content/Alert/Danger.vue b/components/content/Alert/Danger.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f66b8e8e6aa59c393fc10bde3c55000fcffca21a
--- /dev/null
+++ b/components/content/Alert/Danger.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+export interface Props {
+    title?: string
+}
+
+const { title } = withDefaults(defineProps<Props>(), {
+    title: 'Danger'
+});
+</script>
+
+<template>
+    <v-alert type="error" border="start" variant="tonal" class="my-2" prominent :title="title">
+        <slot></slot>
+    </v-alert>
+</template>
diff --git a/components/content/Alert/ExpansionDetails.vue b/components/content/Alert/ExpansionDetails.vue
new file mode 100644
index 0000000000000000000000000000000000000000..62823929718b0ffbd8a08ad8f419db08e79b4aea
--- /dev/null
+++ b/components/content/Alert/ExpansionDetails.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+export interface Props {
+    title?: string
+}
+
+const { title } = withDefaults(defineProps<Props>(), {
+    title: 'Details'
+});
+
+
+import { useTheme } from "vuetify";
+const theme = useTheme();
+
+
+</script>
+<template>
+    <div>
+        <v-expansion-panels>
+            <v-expansion-panel>
+                <v-expansion-panel-title class=" text-h6">
+                    {{ title }}
+                </v-expansion-panel-title>
+                <v-expansion-panel-text>
+                    <slot></slot>
+                </v-expansion-panel-text>
+            </v-expansion-panel>
+        </v-expansion-panels>
+    </div>
+</template>
diff --git a/components/content/Alert/Info.vue b/components/content/Alert/Info.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4d804852ccd50256b40ef214455e6911f7ee9bab
--- /dev/null
+++ b/components/content/Alert/Info.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+export interface Props {
+    title?: string
+}
+
+const { title } = withDefaults(defineProps<Props>(), {
+    title: 'Info'
+});
+</script>
+
+<template>
+    <v-alert type="info" border="start" variant="tonal" class="my-2" prominent :title="title">
+        <slot></slot>
+    </v-alert>
+</template>
diff --git a/components/content/Alert/Tip.vue b/components/content/Alert/Tip.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f9e390e280b399f061e2d49c7e374b129d5a41de
--- /dev/null
+++ b/components/content/Alert/Tip.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+export interface Props {
+    title?: string
+}
+
+const { title } = withDefaults(defineProps<Props>(), {
+    title: 'Tip'
+});
+</script>
+<template>
+    <v-alert color="primary" border-color="primary" border="start" variant="tonal" class="my-2" prominent :title="title"
+        icon="md:lightbulb">
+        <slot></slot>
+    </v-alert>
+</template>
diff --git a/components/content/Alert/Warning.vue b/components/content/Alert/Warning.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c5fc34a2bbe45c1f965f230e3ee569bf7dbfb354
--- /dev/null
+++ b/components/content/Alert/Warning.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+export interface Props {
+    title?: string
+}
+
+const { title } = withDefaults(defineProps<Props>(), {
+    title: 'Warning'
+});
+</script>
+<template>
+    <v-alert type="warning" border="start" variant="tonal" class="my-2" prominent :title="title">
+        <slot></slot>
+    </v-alert>
+</template>
diff --git a/content/3.defense-systems/abi2.md b/content/3.defense-systems/abi2.md
index ee06af707f5751426dea7d9d69e2e96560ee7f21..7e1d4617a877197aec2c7a5405fa0227afffc01d 100644
--- a/content/3.defense-systems/abi2.md
+++ b/content/3.defense-systems/abi2.md
@@ -19,7 +19,7 @@ The Abi2 system is composed of one protein: Abi_2.
 
 Here is an example found in the RefSeq database: 
 
-![abi2](/abi2/Abi2.svg){max-width=750px}
+![abi2](/abi2/Abi2.svg)
 
 Abi2 system in the genome of *Clostridium butyricum* (GCF_014131795.1) is composed of 1 protein: Abi_2 (WP_035763709.1).
 
@@ -29,7 +29,7 @@ The Abi2 system is present in a total of 176 different species.
 
 Among the 22k complete genomes of RefSeq, this system is present in 1210 genomes (5.3 %).
 
-![abi2](/abi2/Distribution_Abi2.svg){max-width=750px}
+![abi2](/abi2/Distribution_Abi2.svg)
 
 *Proportion of genome encoding the Abi2 system for the 14 phyla with more than 50 genomes in the RefSeq database.* 
 
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 2eac5520d11c49de27cc5e7662abf045e856d437..2a61a770fa262195880939a9c98360e6b615a732 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -11,6 +11,16 @@ export default defineNuxtConfig({
   content: {
     documentDriven: {
       injectPage: false,
+    },
+    highlight: {
+      theme: {
+        // Default theme (same as single string)        
+        default: 'github-light',
+        // Theme used if `html.dark`        
+        dark: 'github-dark',
+        // Theme used if `html.sepia`        
+        sepia: 'monokai'
+      }
     }
   },
   vuetify: {