diff --git a/components/EditGitlab.vue b/components/EditGitlab.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a7009b2ed1934bfdf9d64703341305efab367e56
--- /dev/null
+++ b/components/EditGitlab.vue
@@ -0,0 +1,29 @@
+<template>
+  <v-row>
+    <v-col>
+      <v-btn
+        prepend-icon="mdi-gitlab"
+        variant="text"
+        size="small"
+        :href="path"
+        target="_blank"
+        >Edit on gitlab</v-btn
+      >
+    </v-col>
+  </v-row>
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+const { page } = useContent();
+const owner = ref("mdm-lab");
+const repo = ref("wiki");
+const branch = ref("main");
+
+const baseUrl = ref(new URL("https://gitlab.pasteur.fr"));
+const path = ref(
+  new URL(
+    `/${owner.value}/${repo.value}/-/edit/${branch.value}/content/${page.value._file}`,
+    baseUrl.value
+  ).href
+);
+</script>
diff --git a/layouts/article.vue b/layouts/article.vue
index 9ccd09d0a8e89d5015887c1963654cda0e03986e..9a20d6598e157f384a8634e3907189b9cddc44fb 100644
--- a/layouts/article.vue
+++ b/layouts/article.vue
@@ -1,3 +1,6 @@
+<script setup lang="ts">
+const { page, surround } = useContent();
+</script>
 <template>
   <v-card>
     <v-app>
@@ -5,9 +8,29 @@
         <!-- <v-container class="fill-height w-auto" > -->
         <!-- <v-card flat max-width="1000" min-height="300" color="transparent">
             <v-card-text> -->
-        <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>
@@ -16,11 +39,7 @@
     </v-app>
   </v-card>
 </template>
-<script setup lang="ts">
-const { page } = useContent();
 
-console.log("the toc", page.value);
-</script>
 <style scoped>
 #app-footer {
   border-top: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));