diff --git a/src/components/Menu.vue b/src/components/Menu.vue
new file mode 100644
index 0000000..f7d9681
--- /dev/null
+++ b/src/components/Menu.vue
@@ -0,0 +1,35 @@
+<template>
+	<button @click="toggleExpand()" class="btn btn--white | rounded-lg" aria-controls="menu" :aria-expanded="isExpanded">
+		<svg aria-labelledby="menu-toggle" class="icon" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<title id="menu-toggle">Masquer le menu</title>
+		<path d="M10.6751 2.625L3.00007 10.3125C2.94028 10.3686 2.89263 10.4364 2.86005 10.5116C2.82748 10.5869 2.81067 10.668 2.81067 10.75C2.81067 10.832 2.82748 10.9131 2.86005 10.9884C2.89263 11.0636 2.94028 11.1314 3.00007 11.1875L10.6751 18.875M17.1876 2.625L9.50007 10.3125C9.38555 10.4293 9.32141 10.5864 9.32141 10.75C9.32141 10.9136 9.38555 11.0707 9.50007 11.1875L17.1876 18.875" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+		</svg>
+
+	</button>
+	<aside id="menu" class="cluster | rounded-lg">
+		<h2>Nom du service</h2>
+		<nav>
+		<ul class="cluster">
+			<li data-icon="home">
+			<a aria-current="page">Home</a>
+			</li>
+			<li data-icon="megaphone">
+			<a>Notifications</a>
+			</li>
+			<li data-icon="calendar">
+			<a>Réunions</a>
+			</li>
+			<li data-icon="inspirations">
+			<a>Inspirations</a>
+			</li>
+		</ul>
+		</nav>
+	</aside>
+</template>
+<script setup>
+import { ref } from 'vue';
+const isExpanded = ref(true);
+function toggleExpand() {
+	isExpanded.value != isExpanded.value;
+}	
+</script>
\ No newline at end of file
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 0e3188a..41fd2ca 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,7 +1,12 @@
 <template>
-  <h1>{{ data.content.title }}</h1>
+  <h1 class="sr-only">{{ data.content.title }}</h1>
+  <Menu />
+  <header class="header">
+    
+  </header>
 </template>
 <script setup>
+import Menu from "../components/Menu.vue";
 const { data } = defineProps({
   data: Object,
 });