diff --git a/src-tauri/src/app/mod.rs b/src-tauri/src/app/mod.rs
new file mode 100644
index 0000000..a1398cc
--- /dev/null
+++ b/src-tauri/src/app/mod.rs
@@ -0,0 +1 @@
+mod ox_speak_app;
\ No newline at end of file
diff --git a/src-tauri/src/app/ox_speak_app.rs b/src-tauri/src/app/ox_speak_app.rs
new file mode 100644
index 0000000..d02a539
--- /dev/null
+++ b/src-tauri/src/app/ox_speak_app.rs
@@ -0,0 +1,14 @@
+use tauri::AppHandle;
+
+pub struct OxSpeakApp {
+    tauri_handle: AppHandle
+}
+
+impl OxSpeakApp {
+    pub async fn new(tauri_handle: AppHandle) -> Self {
+
+        Self {
+            tauri_handle
+        }
+    }
+}
\ No newline at end of file
diff --git a/src-tauri/src/audio/microphone/mod.rs b/src-tauri/src/audio/microphone/mod.rs
new file mode 100644
index 0000000..e69de29
diff --git a/src-tauri/src/audio/mod.rs b/src-tauri/src/audio/mod.rs
new file mode 100644
index 0000000..e69de29
diff --git a/src-tauri/src/audio/speaker/mod.rs b/src-tauri/src/audio/speaker/mod.rs
new file mode 100644
index 0000000..e69de29
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index 7b08f31..324ac41 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -13,4 +13,5 @@ pub fn run() {
         .expect("error while running tauri application");
 }
 
-mod utils;
\ No newline at end of file
+mod utils;
+mod app;
\ No newline at end of file
diff --git a/src-tauri/src/network/http/mod.rs b/src-tauri/src/network/http/mod.rs
new file mode 100644
index 0000000..e69de29
diff --git a/src-tauri/src/network/mod.rs b/src-tauri/src/network/mod.rs
new file mode 100644
index 0000000..e69de29
diff --git a/src-tauri/src/network/udp/mod.rs b/src-tauri/src/network/udp/mod.rs
new file mode 100644
index 0000000..e69de29
diff --git a/src-tauri/src/network/ws/mod.rs b/src-tauri/src/network/ws/mod.rs
new file mode 100644
index 0000000..e69de29
diff --git a/src/App.vue b/src/App.vue
index a4a0591..4317e23 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,15 @@
 <script setup lang="ts">
-import { listen } from "@tauri-apps/api/event";
-import {onMounted, onUnmounted, ref, Ref} from 'vue';
+import {listen} from "@tauri-apps/api/event";
+import {onMounted, onUnmounted, ref} from 'vue';
 import {NavigationMenuItem} from "@nuxt/ui";
 
+// vars
+let unlisten: (() => void) | null = null;
+const servers = ref<NavigationMenuItem[]>([
+  { label: 'Main Canal', to: '/', icon: 'i-lucide-house'},
+])
+
+// methods
 const getInitials = (name: string) => {
   return name
     .split(' ')
@@ -12,21 +19,42 @@ const getInitials = (name: string) => {
     .toUpperCase();
 }
 
-const servers = ref<NavigationMenuItem[]>([
-  { label: 'Main Canal', to: '/', icon: 'i-lucide-house'},
-  { label: "Alpha", to: "/server/d6e1a762-8d70-4bfc-bbca-07c19af7a4ab", avatar: {text: getInitials("Alpha"),}},
-  { label: "Bravo", to: "/server/ef08f718-58ee-402f-8fe6-34c76665e61d", avatar: {text: getInitials("Bravo"),}}
-])
+async function fetchServers() {
+  // todo : Cette méthode devra appeler la liste des serveurs via le "proxy" rust
+  const response = await fetch("http://localhost:7000/api/server/servers/")
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  }
+  let data = await response.json()
+  data.forEach(server => {
+    servers.value.push({
+      label: server.name,
+      to: `/server/${server.id}`, avatar: {text: getInitials(server.name)}
+    })
+  })
+}
+
+
+// const servers = ref<NavigationMenuItem[]>([
+//   { label: 'Main Canal', to: '/', icon: 'i-lucide-house'},
+//   { label: "Alpha", to: "/server/d6e1a762-8d70-4bfc-bbca-07c19af7a4ab", avatar: {text: getInitials("Alpha"),}},
+//   { label: "Bravo", to: "/server/ef08f718-58ee-402f-8fe6-34c76665e61d", avatar: {text: getInitials("Bravo"),}}
+// ])
 
 onMounted(async () => {
-  const unlisten = await listen("app-ready", event => {
-    console.log("App is ready", event)
-  })
+  // tauri
+  // unlisten = await listen("app-ready", event => {
+  //   console.log("App is ready", event)
+  // })
 
-  onUnmounted(() => {
-    unlisten()
-  })
+  // fetch servers
+  await fetchServers()
 })
+
+onUnmounted(() => {
+  // if (unlisten) unlisten()
+})
+
 </script>
 
 <template>
diff --git a/src/main.ts b/src/main.ts
index aa0fe40..14075ae 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -13,8 +13,13 @@ const router = createRouter({
     {
       path: '/server/:server_id',
       component: () => import('./pages/server_detail.vue'),
+      props: true,
       children: [
-        { path: 'channel/:channel_id', component: () => import('./pages/channel_detail.vue') },
+        {
+          path: 'channel/:channel_id',
+          component: () => import('./pages/channel_detail.vue'),
+          props: true
+        },
       ]
     }
   ],
diff --git a/src/pages/channel_detail.vue b/src/pages/channel_detail.vue
index fe5d44d..bb4c102 100644
--- a/src/pages/channel_detail.vue
+++ b/src/pages/channel_detail.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import { useRoute } from 'vue-router'
-import { computed } from 'vue'
 
 // routes
-const route = useRoute()
-const server_id = route.params.server_id
-const channel_id = computed(() => route.params.channel_id)
+const props = defineProps<{
+  server_id: string,
+  channel_id: string,
+}>()
 
 </script>
 
diff --git a/src/pages/server_detail.vue b/src/pages/server_detail.vue
index c4b2bfd..5278952 100644
--- a/src/pages/server_detail.vue
+++ b/src/pages/server_detail.vue
@@ -1,20 +1,59 @@
 <script setup lang="ts">
-import { useRoute } from 'vue-router'
-import {ref, computed} from 'vue';
+import {ref, computed, onMounted} from 'vue';
 import {NavigationMenuItem} from "@nuxt/ui";
 
-const route = useRoute()
-const server_id = computed(() => route.params.server_id)
+// vars
+const props = defineProps<{
+  server_id: string
+}>()
+const channels = ref<NavigationMenuItem[]>([])
 
-const channels = ref<NavigationMenuItem[]>([
-  { label: 'Channel 1', to: `/server/${server_id}/channel/c201ad7d-6634-4767-b260-9ec0827b91d4`},
-  { label: "Channel 2", to: `/server/${server_id}/channel/939c0491-ee9b-426a-b1c2-fbc0d0a1a49c`},
-  { label: "Channel 3", to: `/server/${server_id}/channel/4fd367fd-3d32-4953-9794-d4d2235dfe33`}
-])
+// methods
+async function fetchTree(){
+  const response = await fetch(`http://localhost:7000/api/server/servers/${props.server_id}/tree/`)
+  let data = await response.json()
+
+  const formattedChannels: any[] = []
+
+  data.forEach(el => {
+    if (el.type === "category") {
+      // On crée un groupe pour la catégorie
+      const categoryGroup = {
+        label: el.name.toUpperCase(),
+        type: 'label', // Nuxt UI utilisera ceci comme un label non cliquable
+        children: el.channels.map((ch: any) => ({
+          label: ch.name,
+          icon: 'i-heroicons-hashtag', // Un petit hash pour le style
+          to: `/server/${props.server_id}/channel/${ch.id}`
+        }))
+      }
+      formattedChannels.push(categoryGroup)
+    } else if (el.type === "channel") {
+      // Pour les "orphelins" (ceux sans catégorie), on les met à la racine
+      formattedChannels.push({
+        label: el.name,
+        icon: 'i-heroicons-hashtag',
+        to: `/server/${props.server_id}/channel/${el.id}`
+      })
+    }
+  })
+
+  channels.value = formattedChannels
+}
+
+// const channels = ref<NavigationMenuItem[]>([
+//   { label: 'Channel 1', to: `/server/${server_id}/channel/c201ad7d-6634-4767-b260-9ec0827b91d4`},
+//   { label: "Channel 2", to: `/server/${server_id}/channel/939c0491-ee9b-426a-b1c2-fbc0d0a1a49c`},
+//   { label: "Channel 3", to: `/server/${server_id}/channel/4fd367fd-3d32-4953-9794-d4d2235dfe33`}
+// ])
+
+onMounted(() => {
+  fetchTree()
+})
 </script>
 
 <template>
-  <UDashboardSidebar>
+  <UDashboardSidebar :default-size="20">
     <template #default>
       <UNavigationMenu
         :items="channels"
diff --git a/vite.config.ts b/vite.config.ts
index 25e40ff..03778ba 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -21,6 +21,7 @@ export default defineConfig(async () => ({
     port: 1420,
     strictPort: true,
     host: host || false,
+    cors: true,
     hmr: host
       ? {
           protocol: "ws",