diff --git a/.gitignore b/.gitignore
index 66c1946..a26d467 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,6 @@
+.idea/
+
 config.toml
 oxspeak.db
 target/
-# artefact ...
-oxspeak - Copie.db:Zone.Identifier
\ No newline at end of file
+
diff --git a/frontend/.yarn/install-state.gz b/frontend/.yarn/install-state.gz
new file mode 100644
index 0000000..0dd19a7
Binary files /dev/null and b/frontend/.yarn/install-state.gz differ
diff --git a/frontend/.yarnrc.yml b/frontend/.yarnrc.yml
new file mode 100644
index 0000000..3186f3f
--- /dev/null
+++ b/frontend/.yarnrc.yml
@@ -0,0 +1 @@
+nodeLinker: node-modules
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 1070c29..91b663d 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,10 +1,16 @@
-<script setup>
-import Server_list from "@/components/server/server_list.vue";
-</script>
-
 <template>
   <h1>Oxspeak</h1>
   <server_list />
+
+  <category_list />
+
+  <channel_list />
 </template>
 
+<script setup>
+import Server_list from "@/components/server/server_list.vue";
+import Category_list from "@/components/category/category_list.vue";
+import Channel_list from "@/components/channel/channel_list.vue";
+</script>
+
 <style scoped></style>
diff --git a/frontend/src/components/category/category_create.vue b/frontend/src/components/category/category_create.vue
new file mode 100644
index 0000000..cdaab9c
--- /dev/null
+++ b/frontend/src/components/category/category_create.vue
@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <label>
+      Category Name :
+      <input type="text" name="name" placeholder="Category Name" v-model="form_inputs.name">
+    </label>
+
+    <label>
+      Server ID :
+      <input type="text" name="server_id" placeholder="Server ID" v-model="form_inputs.server_id">
+    </label>
+
+    <button type="submit" @click="create_category">Create</button>
+  </div>
+</template>
+
+<script setup>
+// defined constants
+import {ref} from "vue";
+const emit = defineEmits(['created'])
+
+let form_inputs = ref({
+  name: '',
+  server_id: null
+})
+// defined methods
+async function create_category(){
+  const response = await fetch("/api/category/categories/", {
+    method: 'POST',
+    headers: {
+      "Content-Type": "application/json",
+      "Accept": "application/json",
+    },
+    body: JSON.stringify(form_inputs.value)
+  })
+  if (response.ok) {
+    emit('created', await response.json())
+  } else {
+    console.error("Failed to create category:", response.statusText)
+  }
+}
+
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/components/category/category_detail.vue b/frontend/src/components/category/category_detail.vue
new file mode 100644
index 0000000..f0ebde8
--- /dev/null
+++ b/frontend/src/components/category/category_detail.vue
@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <div>
+      <h3>category : {{category.name}} <button @click="remove">Remove</button></h3>
+    </div>
+  <hr>
+  </div>
+
+</template>
+
+<script setup>
+import {ref, onMounted} from "vue";
+
+// defined constants
+const {category} = defineProps({
+  category: {
+    type: Object,
+    required: true
+  }
+})
+const emit = defineEmits(['remove'])
+
+// defined methods
+async function remove(){
+  const response = await fetch(`/api/category/categories/${category.id}/`, {
+    method: 'DELETE'
+  })
+  if (response.ok) {
+    emit('remove')
+  } else {
+    console.error("Failed to delete category:", response.statusText)
+  }
+}
+
+onMounted(() => {
+
+})
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/components/category/category_list.vue b/frontend/src/components/category/category_list.vue
new file mode 100644
index 0000000..397bb58
--- /dev/null
+++ b/frontend/src/components/category/category_list.vue
@@ -0,0 +1,40 @@
+<template>
+  <h2>Categories</h2>
+  <category_create @created="categories.push($event)"/>
+  <button @click="fetch_categories">Refresh</button>
+  <category_detail
+    v-for="category in categories"
+    :category="category"
+    :key="category.id"
+    @remove="categories.splice(categories.indexOf(category), 1)"
+  />
+</template>
+
+<script setup>
+import {ref, onMounted} from "vue";
+import Category_detail from "@/components/category/category_detail.vue";
+import Category_create from "@/components/category/category_create.vue";
+
+// defined constants
+const categories = ref([])
+
+// defined methods
+async function fetch_categories(){
+  const response = await fetch("/api/category/categories/")
+  if (response.ok) {
+    categories.value = await response.json()
+  } else {
+    console.error("Failed to fetch categories:", response.statusText)
+  }
+}
+
+onMounted(() => {
+  fetch_categories()
+})
+
+
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/components/channel/channel_create.vue b/frontend/src/components/channel/channel_create.vue
new file mode 100644
index 0000000..229f501
--- /dev/null
+++ b/frontend/src/components/channel/channel_create.vue
@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <label>
+      Channel Name :
+      <input type="text" name="name" placeholder="Channel Name" v-model="form_inputs.name">
+    </label>
+
+    <label>
+      Server ID :
+      <input type="text" name="server_id" placeholder="Server ID" v-model="form_inputs.server_id">
+    </label>
+
+    <label>
+      Category ID :
+      <input type="text" name="category_id" placeholder="Category ID" v-model="form_inputs.category_id">
+    </label>
+
+    <label>
+      Type :
+      <input type="number" name="channel_type" v-model="form_inputs.channel_type">
+    </label>
+
+    <button type="submit" @click="create_channel">Create</button>
+  </div>
+</template>
+
+<script setup>
+// defined constants
+import {ref} from "vue";
+const emit = defineEmits(['created'])
+
+let form_inputs = ref({
+  name: '',
+  server_id: null,
+  category_id: null,
+  channel_type: 0,
+  position: 0
+})
+// defined methods
+async function create_channel(){
+  const response = await fetch("/api/channel/channels/", {
+    method: 'POST',
+    headers: {
+      "Content-Type": "application/json",
+      "Accept": "application/json",
+    },
+    body: JSON.stringify(form_inputs.value)
+  })
+  if (response.ok) {
+    emit('created', await response.json())
+  } else {
+    console.error("Failed to create channel:", response.statusText)
+  }
+}
+
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/components/channel/channel_detail.vue b/frontend/src/components/channel/channel_detail.vue
new file mode 100644
index 0000000..1405476
--- /dev/null
+++ b/frontend/src/components/channel/channel_detail.vue
@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <div>
+      <h3>channel : {{channel.name}} <button @click="remove">Remove</button></h3>
+      <p>Type: {{ channel.channel_type }}</p>
+    </div>
+  <hr>
+  </div>
+
+</template>
+
+<script setup>
+import {ref, onMounted} from "vue";
+
+// defined constants
+const {channel} = defineProps({
+  channel: {
+    type: Object,
+    required: true
+  }
+})
+const emit = defineEmits(['remove'])
+
+// defined methods
+async function remove(){
+  const response = await fetch(`/api/channel/channels/${channel.id}/`, {
+    method: 'DELETE'
+  })
+  if (response.ok) {
+    emit('remove')
+  } else {
+    console.error("Failed to delete channel:", response.statusText)
+  }
+}
+
+onMounted(() => {
+
+})
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/components/channel/channel_list.vue b/frontend/src/components/channel/channel_list.vue
new file mode 100644
index 0000000..91fe84c
--- /dev/null
+++ b/frontend/src/components/channel/channel_list.vue
@@ -0,0 +1,40 @@
+<template>
+  <h2>Channels</h2>
+  <channel_create @created="channels.push($event)"/>
+  <button @click="fetch_channels">Refresh</button>
+  <channel_detail
+    v-for="channel in channels"
+    :channel="channel"
+    :key="channel.id"
+    @remove="channels.splice(channels.indexOf(channel), 1)"
+  />
+</template>
+
+<script setup>
+import {ref, onMounted} from "vue";
+import Channel_detail from "@/components/channel/channel_detail.vue";
+import Channel_create from "@/components/channel/channel_create.vue";
+
+// defined constants
+const channels = ref([])
+
+// defined methods
+async function fetch_channels(){
+  const response = await fetch("/api/channel/channels/")
+  if (response.ok) {
+    channels.value = await response.json()
+  } else {
+    console.error("Failed to fetch channels:", response.statusText)
+  }
+}
+
+onMounted(() => {
+  fetch_channels()
+})
+
+
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/app/app.rs b/src/app/app.rs
index 3008db5..cde9691 100644
--- a/src/app/app.rs
+++ b/src/app/app.rs
@@ -63,6 +63,4 @@ impl App {
         
         println!("Nettoyage et fermeture de l'application.");
     }
-
-
 }
\ No newline at end of file