diff --git a/components/DbCompoundShowList.vue b/components/DbCompoundShowList.vue
new file mode 100644
index 0000000..6458009
--- /dev/null
+++ b/components/DbCompoundShowList.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+const { t } = useI18n();
+const props = defineProps({
+    nameTable: {
+        type:String,
+        required:true
+    }
+});
+console.log(props.nameTable);
+const structTable = await $fetch("/api/manageControl/header",{
+    method:"post",
+    body:{nameTable:props.nameTable}
+});
+
+structTable.push({key:"action"});
+
+const nbPage = await $fetch("/api/manageControl/nbPages",{
+    method:"post",
+    body:{nameTable:props.nameTable}
+});
+
+const items = await $fetch("/api/manageControl/getPage",{
+    method:"post",
+    body:{nameTable:props.nameTable}
+});
+
+const totalItems = await $fetch("/api/manageControl/totalItems",{
+    method:"post",
+    body:{nameTable:props.nameTable}
+});
+
+</script>
+
+<template>
+  <v-data-table-server
+    :headers="structTable"
+    :items="items"
+    :items-length="totalItems"
+  >
+    <template #headers="{ columns, isSorted, getSortIcon, toggleSort }">
+      <tr>
+        <template
+          v-for="column in columns"
+          :key="column.key"
+        >
+          <td>
+            <span
+              class="mr-2 cursor-pointer"
+              @click="() => toggleSort(column)"
+            >{{ t("header."+column.key) }}</span>
+            <template v-if="isSorted(column)">
+              <v-icon :icon="getSortIcon(column)" />
+            </template>
+          </td>
+        </template>
+      </tr>
+    </template>
+    <template #item.action="{ item }">
+      <v-btn
+        density="compact"
+        icon="mdi-pen"
+        color="green"
+        @click="console.log(item)"
+      />
+      <v-btn
+        density="compact"
+        icon="mdi-trash-can"
+        color="red"
+        @click="console.log(item)"
+      />
+    </template>
+  </v-data-table-server>
+</template>
\ No newline at end of file
diff --git a/components/ExtrasNav.vue b/components/ExtrasNav.vue
index 1aaf80d..8c089e3 100644
--- a/components/ExtrasNav.vue
+++ b/components/ExtrasNav.vue
@@ -14,14 +14,15 @@ import lang from "~/components/LangButton.vue";
 import {reactive} from "vue";
 // import { useI18n } from "#imports";
 const { t } = useI18n();
+const localePath = useLocalePath()
 
 const iconLinkTo = ref("i-heroicons-home-modern");
 const titleLinkTo = ref(t("button.home"));
-const pathLinkTo = ref("/");
+const pathLinkTo = ref(localePath({name: "index"}));
 if(props.linkTo == "control"){
     iconLinkTo.value = "i-heroicons-scale";
     titleLinkTo.value = t("button.control");
-    pathLinkTo.value = "/control"
+    pathLinkTo.value = localePath({name: "control"})
 }
 
 // Variable identify user
diff --git a/lang/en-US.ts b/lang/en-US.ts
index f7e7d33..ece5d04 100644
--- a/lang/en-US.ts
+++ b/lang/en-US.ts
@@ -15,6 +15,12 @@ export default {
         viewProject: "View",
         yes: "Yes"
     },
+    header:{
+        action: "Actions",
+        name: "Name",
+        url: "URL",
+        description: "Description"
+    },
     image:{
         banner:{
             alt:"P2M2 icon",
@@ -55,6 +61,11 @@ export default {
         updateProject:"updated",
         waitCreateProject: "Hold on please, we're creating your project"
     },
+    tabs:{
+        reference: "Reference",
+        machine: "Machine",
+        fitting: "Fitting"
+    },
     title:{
         projectName: "Projet name"
     }
diff --git a/lang/fr-FR.ts b/lang/fr-FR.ts
index cea2f0e..b0de044 100644
--- a/lang/fr-FR.ts
+++ b/lang/fr-FR.ts
@@ -15,6 +15,12 @@ export default {
         viewProject: "Détails",
         yes: "Oui"
     },
+    header:{
+        action: "Actions",
+        name: "Nom",
+        url: "URL",
+        description: "Description"
+    },
     image: {
         banner: {
             alt: "icône P2M2",
@@ -55,6 +61,11 @@ export default {
         updateProject:"est mise à jour",
         waitCreateProject: "Projet en cours de création"
     },
+    tabs:{
+        reference: "Témoin",
+        machine: "Matériel",
+        fitting: "Ajustement"
+    },
     title: {
         projectName: "Nom du projet"
     }
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 83a6c92..8ffb0b8 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -31,7 +31,7 @@ export default defineNuxtConfig({
         preference: "light"
     },
     i18n: {
-        strategy: "no_prefix",
+        // strategy: "no_prefix",
         locales: [
             {
                 code: "en-US",
@@ -46,7 +46,18 @@ export default defineNuxtConfig({
 
         ],
         lazy: true,
-        langDir: "lang"
+        langDir: "lang",
+        customRoutes: "config",   // disable custom route with page components
+        pages: {
+            index: {
+                en: "/",
+                fr: "/",
+            },
+            control: {
+                en: "/control",
+                fr: "/control",
+            }
+        }
     },
     pages:true,
     // thx: https://stackoverflow.com/a/77140279
diff --git a/pages/control.vue b/pages/control.vue
index ac70892..16debbe 100644
--- a/pages/control.vue
+++ b/pages/control.vue
@@ -3,23 +3,26 @@
  -->
 
 <script lang="ts">
+import comp from "~/components/DbCompoundShowList.vue";
 import banner from "~/components/BannerMain.vue";
 import extras from "~/components/ExtrasNav.vue";
-import extract from "~/components/ExtractInfo.vue";
 import login from "~/components/LoginForm.vue";
 import bug from "~/components/BugButton.vue";
 import { useCookie } from "nuxt/app";
 
 export default{
     components:{
+        comp,
         login,
         banner,
         extras,
-        extract,
         bug
     },
     data(){
-        return {checkSession: false};
+        return {
+            checkSession: false,
+            tab: "reference"
+        };
     },
     created:async function() {
         const token = useCookie("token",{sameSite:"strict"});
@@ -38,8 +41,16 @@ export default{
             body: token.value.toString()
         });
     },
+    methods:{
+        t(params:string) {
+            const {t} = useI18n();
+            return t(params);
+        }
+    }
+    
 };
 
+
 </script>
 
 <template>
@@ -64,11 +75,85 @@ export default{
       </UContainer>
       <login />
     </template>
-      
-    <extract v-if="checkSession" />
+    <UContainer v-if="checkSession">
+      <div class="d-flex flex-row">
+        <v-tabs
+          v-model="tab"
+          direction="vertical"
+        >
+          <v-tab value="reference">
+            <v-icon start>
+              mdi-beaker-outline
+            </v-icon>
+            {{ t("tabs.reference") }}
+          </v-tab>
+          <v-tab value="machine">
+            <v-icon start>
+              mdi-washing-machine
+            </v-icon>
+            {{ t("tabs.machine") }}
+          </v-tab>
+          <v-tab value="fitting">
+            <v-icon start>
+              mdi-scale-balance
+            </v-icon>
+            {{ t("tabs.fitting") }}
+          </v-tab>
+        </v-tabs>
+        <v-window v-model="tab">
+          <v-window-item value="reference">
+            <v-card flat>
+              <v-card-text>
+                <comp
+                  name-table="compound"
+                />
+              </v-card-text>
+            </v-card>
+          </v-window-item>
+          <v-window-item value="machine">
+            <v-card flat>
+              <v-card-text>
+                <p>
+                  Morbi nec metus. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Nunc sed turpis.
+                </p>
+
+                <p>
+                  Suspendisse feugiat. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. In hac habitasse platea dictumst. Fusce ac felis sit amet ligula pharetra condimentum.
+                </p>
+
+                <p>
+                  Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Nam commodo suscipit quam. In consectetuer turpis ut velit. Sed cursus turpis vitae tortor. Aliquam eu nunc.
+                </p>
+
+                <p>
+                  Etiam ut purus mattis mauris sodales aliquam. Ut varius tincidunt libero. Aenean viverra rhoncus pede. Duis leo. Fusce fermentum odio nec arcu.
+                </p>
+
+                <p class="mb-0">
+                  Donec venenatis vulputate lorem. Aenean viverra rhoncus pede. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Fusce commodo aliquam arcu. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi.
+                </p>
+              </v-card-text>
+            </v-card>
+          </v-window-item>
+          <v-window-item value="fitting">
+            <v-card flat>
+              <v-card-text>
+                <p>
+                  Fusce a quam. Phasellus nec sem in justo pellentesque facilisis. Nam eget dui. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. In dui magna, posuere eget, vestibulum et, tempor auctor, justo.
+                </p>
+
+                <p class="mb-0">
+                  Cras sagittis. Phasellus nec sem in justo pellentesque facilisis. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nam at tortor in tellus interdum sagittis.
+                </p>
+              </v-card-text>
+            </v-card>
+          </v-window-item>
+        </v-window>
+      </div>
+    </UContainer>
+
     <!-- <bug v-else /> -->
     <template 
-      
       #footer
     >
       <bug />
diff --git a/server/api/class/tableClass.ts b/server/api/class/tableClass.ts
index 886917b..b6f2e40 100644
--- a/server/api/class/tableClass.ts
+++ b/server/api/class/tableClass.ts
@@ -43,21 +43,30 @@ export default class Table {
     get header(){
         return this._headers.filter(x => x.key != "id");
     }
-    /**
-     * Get number of page of Table
-     * @param nbRowsByPage number : number of rows by page
-     * @returns number
-     */
-    async getNbPage(nbRowsByPage: number){
+
+    async totalItems(){
         const client = new pg.Client();
         await client.connect();
         // get number of rows
         // TODO add id in all table or use sql properties to get nb rows
-        const resp = await client.query(`SELECT COUNT(id) as nbRows
+        const resp = await client.query(`SELECT COUNT(id) as nb_rows
                                    FROM ${this._nameTable}`);
+        console.log(resp);
+        
         client.end();
-        return Math.floor(resp.rows[0].nbRows/nbRowsByPage) +
-            (resp.rows[0].nbRows%nbRowsByPage?1:0);
+        console.log(resp.rows[0].nb_rows);
+        return resp.rows[0].nb_rows;
+    }
+    /**
+     * Get number of page of Table
+     * @param nbRowsByPage number : number of rows by page
+     * @returns number
+     */
+    async getNbPage(nbRowsByPage: number){
+        const nbRows = this.totalItems;
+
+        return Math.floor(nbRows/nbRowsByPage) +
+            (nbRows%nbRowsByPage?1:0);
     }
 
     /**
diff --git a/server/api/manageControl/[action].post.ts b/server/api/manageControl/[action].post.ts
index 9ad36b7..df1ddbb 100644
--- a/server/api/manageControl/[action].post.ts
+++ b/server/api/manageControl/[action].post.ts
@@ -17,11 +17,19 @@ export default defineEventHandler(async (event) => {
     }
 
     if (action == "nbPages"){
-        return table.getNbPage(2);
+        return await table.getNbPage(2);
     }
 
     if(action == "getPage"){
-        return table.getPage(1, 2);
+        return await table.getPage(1, 2);
+    }
+
+    if(action == "totalItems"){
+        console.log("vas-y");
+        
+        console.log(await table.totalItems());
+        
+        return await table.totalItems();
     }
     return table.header;
 });
\ No newline at end of file