diff --git a/src/App.vue b/src/App.vue
index 5314a5f..9ceb4b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,55 +1,54 @@
 <template>
   <v-app>
     <div class="m-0 flex flex-column h-screen">
-
-      <Header class="fixed w-full z-40 top-0 p-2">
-      </Header>
-
-      <div class="flex flex-row justify-center">
-
-        <div class="w-48 fixed left-0 top-16 h-full border-r-2 bg-purple z-30">
-
-          <SideBar v-if="!hideSideBar">
-          </SideBar>
-
-        </div>
-
-        <!-- TODO: Put this #F4F4F4 color into a style somewhere as SystemDefaultBackground or something similar -->
-        <div class="flex flex-col p-2 ml-48 mt-16 bg-amber-50">
+      <Header @toggle-sidebar="toggleSidebar" class="fixed w-full z-50 top-0 p-2"></Header>
+      <div class="flex flex-row relative">       
+        <div
+            @mouseenter="openSidebar"
+            class="fixed left-0 top-0 h-full w-12 z-20"
+            style="background: transparent;"
+        ></div>
+        
+        <transition name="slide-fade">
+          <div v-show="!hideSideBar"
+               @mouseleave="startCloseSidebarTimer"
+               @mouseenter="clearCloseSidebarTimer"
+               class="w-48 fixed left-0 top-14 h-full border-r-2 bg-purple z-30 transition-transform duration-700">
+            <SideBar></SideBar>
+          </div>
+        </transition>
+        
+        <div class="flex flex-col mt-16 bg-amber-50 w-full md:ml-1">
           <RouterView></RouterView>
           <Footer></Footer>
         </div>
-
       </div>
 
       <div class="fixed z-50 bottom-10 right-10 flex flex-column">
-
-        <div v-if="showPopup"
-             ref="popup"
-             class="z-50 shadow-md shadow-gray-500 rounded-2xl">
-
+        <div
+            v-if="showPopup"
+            ref="popup"
+            class="z-50 shadow-md shadow-gray-500 rounded-2xl"
+        >
           <div class="bg-fuchsia-900 p-4 rounded-t-2xl font-semibold self-center text-white text-center">
             Je Soutiens!
           </div>
-
           <div class="bg-gray-100 rounded-b-2xl p-4">
             <div class="mx-2">
               <StripePayment></StripePayment>
             </div>
           </div>
-
         </div>
 
-        <div @click="togglePopup"
-             ref="popupButton"
-             class="bg-purple rounded-full w-16 h-16 flex justify-center items-center self-end mt-4 cursor-pointer"
-             style="background: radial-gradient(circle, rgba(163,14,121,1) 50%, rgba(107,0,101,1) 100%); border: 2px solid white; ">
+        <div
+            @click="togglePopup"
+            ref="popupButton"
+            class="bg-purple rounded-full w-16 h-16 flex justify-center items-center self-end mt-4 cursor-pointer"
+            style="background: radial-gradient(circle, rgba(163,14,121,1) 50%, rgba(107,0,101,1) 100%); border: 2px solid white;"
+        >
           <v-icon class="text-2xl">mdi-gift-outline</v-icon>
         </div>
-
-
       </div>
-
     </div>
   </v-app>
 </template>
@@ -58,40 +57,76 @@
 import Header from "@/views/main/Header.vue";
 import Footer from "@/views/main/Footer.vue";
 import SideBar from "@/views/main/SideBar.vue";
-import {useRoute} from 'vue-router'
-import {ref, onMounted, onUnmounted, computed} from 'vue';
+import {ref, onMounted, onUnmounted} from 'vue';
 import StripePayment from "@/views/StripePayment.vue";
+import {eventBus} from '@/eventBus.js';
 
-const route = useRoute()
-const hideSideBar = computed(() => route.meta.hideSideBar === true)
-
-// Reactive variable to control the visibility of the popup
+const hideSideBar = ref(false); 
 const showPopup = ref(false);
 const popup = ref(null);
 const popupButton = ref(null);
+let closeSidebarTimer = null;
 
-// Function to toggle the popup visibility
-const togglePopup = () => {
-  showPopup.value = !showPopup.value
+const toggleSidebar = () => {
+  hideSideBar.value = !hideSideBar.value;
+};
+
+const openSidebar = () => {
+  clearCloseSidebarTimer();
+  hideSideBar.value = false;
+};
+
+const startCloseSidebarTimer = () => {
+  closeSidebarTimer = setTimeout(() => {
+    hideSideBar.value = true;
+  }, 500); 
+};
+
+const clearCloseSidebarTimer = () => {
+  clearTimeout(closeSidebarTimer);
+};
+
+const togglePopup = () => {
+  showPopup.value = !showPopup.value;
 };
 
-// Function to handle clicks outside the popup
 const handleClickOutside = (event) => {
-  if (popup.value
-      && !popup.value.contains(event.target)
-      && !popupButton.value.contains(event.target)) {
+  if (
+      popup.value &&
+      !popup.value.contains(event.target) &&
+      !popupButton.value.contains(event.target) &&
+      !event.target.closest('.bg-purple')
+  ) {
     showPopup.value = false;
   }
+  if (
+      !event.target.closest('.w-48') &&
+      !event.target.closest('.v-app-bar-nav-icon')
+  ) {
+    hideSideBar.value = true;
+  }
 };
 
-// Add event listener for clicks outside the popup when component is mounted
 onMounted(() => {
   document.addEventListener('click', handleClickOutside);
+  eventBus.value.toggleSidebar = toggleSidebar;
 });
 
-// Remove event listener when component is unmounted
 onUnmounted(() => {
   document.removeEventListener('click', handleClickOutside);
+  eventBus.value.toggleSidebar = null;
 });
-
 </script>
+
+<style scoped>
+/* Do not remove. Used for animation */
+.slide-fade-enter-active, .slide-fade-leave-active {
+  transition: transform 0.7s ease, opacity 0.7s ease;
+}
+
+.slide-fade-enter, .slide-fade-leave-to 
+{
+  transform: translateX(-100%);
+  opacity: 0;
+}
+</style>
diff --git a/src/eventBus.js b/src/eventBus.js
new file mode 100644
index 0000000..024f9c3
--- /dev/null
+++ b/src/eventBus.js
@@ -0,0 +1,3 @@
+import { ref } from 'vue';
+
+export const eventBus = ref({});
\ No newline at end of file
diff --git a/src/views/main/Header.vue b/src/views/main/Header.vue
index c0755ff..2952349 100644
--- a/src/views/main/Header.vue
+++ b/src/views/main/Header.vue
@@ -1,129 +1,74 @@
 <template>
-
-  <header class="py-1 flex items-center justify-between bg-white shadow-md shadow-gray-700 z-20">
-
-    <div v-if="showPopup"
-         ref="popupRef"
-         class="bg-white shadow-md shadow-gray-700 top-14 left-0 absolute z-50 rounded-br-2xl border-t-2 border-gray-800"
-         @mouseleave="handleMouseLeave"
-         @mouseenter="handleMouseEnter">
-      <SiteMenu></SiteMenu>
-    </div>
-
+  <header
+      class="py-1 flex items-center justify-between bg-white shadow-md shadow-gray-700 z-20"
+      @click.stop
+  >
     <div class="flex items-center">
-      <v-app-bar-nav-icon @click.stop="drawer = !drawer">
+      <v-app-bar-nav-icon @click.stop="toggleSidebar">
       </v-app-bar-nav-icon>
 
       <RouterLink to="/">
-        <v-img src="/medias/hutopy.png"
-               ref="popupButtonRef"
-               alt="Hutopy Logo"
-               class="mr-2 h-10 w-20"
-               @mouseenter="togglePopup(true)">
-        </v-img>
+        <v-img
+            src="/medias/hutopy.png"
+            ref="popupButtonRef"
+            alt="Hutopy Logo"
+            class="mr-2 h-10 w-20"
+        ></v-img>
       </RouterLink>
     </div>
 
-
     <div class="flex items-center">
       <v-text-field
-          density=compact
+          density="compact"
           rounded
           variant="outlined"
           v-model="searchQuery"
           placeholder="Search"
           hide-details
           clearable
-          class="rounded-full mx-2 w-80 "
+          class="rounded-full mx-2 w-80"
           append-inner-icon="mdi-magnify"
-          @click:append-inner="onSearch">
-      </v-text-field>
+          @click:append-inner="onSearch"
+      ></v-text-field>
 
       <v-icon class="mx-2">mdi-bell-outline</v-icon>
 
       <span class="flex items-center mx-2">
-        
-      <span class="text-black text-base font-sans font-medium mr-3">
-      {{ currentUserName }}
-      </span>
-  
-      <img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
-           class="rounded-circle h-10 w-10"
-           alt="Logo"/>        
-      </span>
+        <span class="text-black text-base font-sans font-medium mr-3">
+          {{ currentUserName }}
+        </span>
 
+        <img
+            src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
+            class="rounded-circle h-10 w-10"
+            alt="Logo"
+        />
+      </span>
     </div>
-
   </header>
-
 </template>
 
-
 <script setup>
-import {ref, onMounted, onUnmounted} from 'vue';
-import {useRouter} from 'vue-router';
-import SiteMenu from "@/views/main/SiteMenu.vue";
+import { ref } from "vue";
+import { eventBus } from '@/eventBus.js';
 
+const currentUserName = "Jo Bumble";
+const searchQuery = ref("");
 
-const showPopup = ref(false);
-const popupRef = ref(null);
-const popupButtonRef = ref(null);
-let mouseLeaveTimeout = null;
-
-const togglePopup = (state) => {
-  clearTimeout(mouseLeaveTimeout)
-  showPopup.value = state
+const toggleSidebar = () => {
+  eventBus.value.toggleSidebar();
 };
 
-// Function to handle mouse enter event
-const handleMouseEnter = () => {
-  clearTimeout(mouseLeaveTimeout);
-};
-
-// Function to handle mouse leave event
-const handleMouseLeave = () => {
-  mouseLeaveTimeout = setTimeout(() => {
-    showPopup.value = false;
-  }, 200);
-};
-
-// Add event listener for clicks outside the popup when component is mounted
-onMounted(() => {
-  document.addEventListener('click', handleClickOutside);
-});
-
-// Remove event listener when component is unmounted
-onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside);
-});
-
-// Function to handle clicks outside the popup
-const handleClickOutside = (event) => {
-  if (popupRef.value
-      && !popupRef.value.contains(event.target)
-      && popupButtonRef.value
-      && !popupButtonRef.value.contains(event.target)) {
-    showPopup.value = false;
-  }
-};
-
-
-const currentUserName = 'Jo Bumble'
-const searchQuery = ref('');
-const router = useRouter();
-
 const onSearch = () => {
   const query = searchQuery.value.trim();
-
   if (!query) {
-    router.push('/browse');
+    router.push("/browse");
   } else {
-    const words = query.split(' ');
-
+    const words = query.split(" ");
     if (words.length === 1) {
       router.push(`/@${words[0]}`);
     } else {
-      router.push({name: 'browse', query: {q: query}});
+      router.push({ name: "browse", query: { q: query } });
     }
   }
 };
diff --git a/src/views/main/SideBar.vue b/src/views/main/SideBar.vue
index 50aeedf..c365f8a 100644
--- a/src/views/main/SideBar.vue
+++ b/src/views/main/SideBar.vue
@@ -1,78 +1,85 @@
 <template>
+  <aside class="relative">
 
-  <aside>
-   
-    <nav>
-      
-      <h2>Subscriptions</h2>
+    <nav class="flex items-center justify-between pt-3">
 
-      <ul class="space-y-32">
-        <li>
-          <RouterLink to="/@hutopy">
-            <div class="nav-button">
-              <v-icon class="mx-2">mdi-home</v-icon>
-              Hutopy
-            </div>
-          </RouterLink>
+      <div>
+        <h2 class="text-center">Subscriptions</h2>
 
-          <RouterLink to="/@leffet">
-            <div class="nav-button">
-              <v-icon class="mx-2">mdi-home</v-icon>
-              L'Effet
-            </div>
-          </RouterLink>
+        <ul class="space-y-32">
+          <li>
+            <RouterLink to="/@hutopy">
+              <div class="nav-button">
+                <v-icon class="mx-2">mdi-home</v-icon>
+                Hutopy
+              </div>
+            </RouterLink>
 
-          <RouterLink to="/@chloebeaugrand">
-            <div class="nav-button">
-              <v-icon class="mx-2">mdi-home</v-icon>
-              Chloe Beaugrand
-            </div>
-          </RouterLink>
+            <RouterLink to="/@leffet">
+              <div class="nav-button">
+                <v-icon class="mx-2">mdi-home</v-icon>
+                L'Effet
+              </div>
+            </RouterLink>
 
-          <RouterLink to="/@guillaumeaime">
-            <div class="nav-button">
-              <v-icon class="mx-2">mdi-home</v-icon>
-              Guillaume Aime
-            </div>
-          </RouterLink>
+            <RouterLink to="/@chloebeaugrand">
+              <div class="nav-button">
+                <v-icon class="mx-2">mdi-home</v-icon>
+                Chloe Beaugrand
+              </div>
+            </RouterLink>
 
-          <RouterLink to="/@mathieucaron">
-            <div class="nav-button">
-              <v-icon class="mx-2">mdi-home</v-icon>
-              Mathieu Caron
-            </div>
-          </RouterLink>
+            <RouterLink to="/@guillaumeaime">
+              <div class="nav-button">
+                <v-icon class="mx-2">mdi-home</v-icon>
+                Guillaume Aime
+              </div>
+            </RouterLink>
+
+            <RouterLink to="/@mathieucaron">
+              <div class="nav-button">
+                <v-icon class="mx-2">mdi-home</v-icon>
+                Mathieu Caron
+              </div>
+            </RouterLink>
+
+            <RouterLink to="/@arps">
+              <div class="nav-button">
+                <v-icon class="mx-2">mdi-home</v-icon>
+                ARPS
+              </div>
+            </RouterLink>
+
+          </li>
+        </ul>
+        <SiteMenu></SiteMenu>
+      </div>
 
-          <RouterLink to="/@arps">
-            <div class="nav-button">
-              <v-icon class="mx-2">mdi-home</v-icon>
-              ARPS
-            </div>
-          </RouterLink>
 
-        </li>
-      </ul>
 
     </nav>
-    
-  </aside>
 
+  </aside>
 </template>
 
 <style scoped>
-
 .nav-button {
-  @apply bg-purple-800 rounded p-1 m-2
+  @apply bg-purple-800 rounded p-1 m-2;
 }
 
 .nav-button:hover {
-  @apply bg-purple-400
+  @apply bg-purple-400;
 }
 
 h2 {
-  @apply font-sans font-bold ml-2
+  @apply font-sans font-bold ml-2;
 }
 
+aside {
+  @apply relative;
+}
 </style>
+
 <script setup lang="ts">
-</script>
\ No newline at end of file
+import SiteMenu from "@/views/main/SiteMenu.vue";
+</script>
diff --git a/src/views/main/SiteMenu.vue b/src/views/main/SiteMenu.vue
index 0944c5d..924bf1f 100644
--- a/src/views/main/SiteMenu.vue
+++ b/src/views/main/SiteMenu.vue
@@ -1,81 +1,50 @@
 <template>
-
-  <div class="flex flex-column py-4 px-8">
-
-    <div class="flex flex-row self-center pb-4 pt-2">
-
+  <div class="flex flex-col min-h-screen bg-white py-4 px-8">
+    <RouterLink class="nav-button font-weight-bold" to="/join">Aidez-nous</RouterLink>
+    <div class="flex flex-row justify-center pb-4 pt-2">
       <!-- Facebook -->
       <a href="https://www.facebook.com/profile.php?id=61556819217561">
-        <img src="/images/hutopymedia/icons/pink/facebookpink.png"
-             alt="Facebook Logo">
+        <img src="/images/hutopymedia/icons/pink/facebookpink.png" alt="Facebook Logo">
       </a>
-
       <!-- Instagram -->
       <a href="https://www.instagram.com/hutopy.inc/">
-        <img src="/images/hutopymedia/icons/pink/instagrampink.png"
-             alt="Instagram Logo">
+        <img src="/images/hutopymedia/icons/pink/instagrampink.png" alt="Instagram Logo">
       </a>
-
       <!-- X / Twitter -->
       <a href="https://twitter.com/Hutopyinc">
-        <img src="/images/hutopymedia/icons/pink/xpink.png"
-             alt="X Logo">
+        <img src="/images/hutopymedia/icons/pink/xpink.png" alt="X Logo">
       </a>
-
     </div>
-
-    <div class="grid grid-cols-1">
-
-      <RouterLink class="nav-button" to="/join">
-        Aidez-nous
-      </RouterLink>
-
-      <RouterLink class="nav-button" to="/helpandcontact">
-        Aide & Contact
-      </RouterLink>
-
-      <RouterLink class="nav-button" to="/faq">
-        FAQ
-      </RouterLink>
-
-      <RouterLink class="nav-button" to="/guideforcreators">
-        Guide pour les créateurs
-      </RouterLink>
-
-      <RouterLink class="nav-button" to="/termsandconditions">
-        Conditions générales
-      </RouterLink>
-
-      <RouterLink class="nav-button" to="/contentpolicy">
-        Politique de Contenu
-      </RouterLink>
-
-      <RouterLink class="nav-button" to="/about">
-        À Propos
-      </RouterLink>
-
-      <RouterLink class="nav-button" to="/pricing">
-        Frais
-      </RouterLink>
-
+    <div class="absolute  mt-44 text-center extra-small-text p-2">
+      <RouterLink class="nav-button" to="/helpandcontact">Aide & Contact</RouterLink>
+      <RouterLink class="nav-button" to="/faq">FAQ</RouterLink>
+      <RouterLink class="nav-button" to="/guideforcreators">Guide pour les créateurs</RouterLink>
+      <RouterLink class="nav-button" to="/termsandconditions">Conditions générales</RouterLink>
+      <RouterLink class="nav-button" to="/contentpolicy">Politique de Contenu</RouterLink>
+      <RouterLink class="nav-button" to="/about">À Propos</RouterLink>
+      <RouterLink class="nav-button" to="/pricing">Frais</RouterLink>
     </div>
-
   </div>
-
+  
+  
 </template>
 
 <style scoped>
-
 .nav-button {
-  @apply rounded m-1 flex justify-center font-sans
+  @apply rounded flex justify-center font-sans text-gray-800 py-1;
 }
 
 .nav-button:hover {
-  @apply text-purple-800 bg-gray-50
+  @apply text-purple-800 bg-gray-50;
 }
 
 img {
-  @apply m-2 w-10 h-10
+  @apply m-2 w-10 h-10;
 }
 
-</style>
\ No newline at end of file
+.extra-small-text {
+  font-size: 0.6rem; /* Ajustez cette valeur selon vos besoins */
+}
+</style>
+<script setup lang="ts">
+</script>
\ No newline at end of file
diff --git a/src/views/manualusers/ARPS.vue b/src/views/manualusers/ARPS.vue
index d78ba99..c9034cf 100644
--- a/src/views/manualusers/ARPS.vue
+++ b/src/views/manualusers/ARPS.vue
@@ -1,9 +1,9 @@
 <template>
   <!--  Bannière-->
-  <div class="z-20">
+  <div class="relative bottom-4  z-20 m">
     <div class="relative flex flex-col">
       <!-- Social Network-->
-      <div class="bg-black bg-opacity-50 flex flex-col md:flex-row items-center justify-between py-2 px-4">
+      <div class="bg-black bg-opacity-50 flex flex-col md:flex-row items-center justify-between py-2 px-4 min-h-24">
         <div class="text-white mb-2 md:mb-0 w-full md:w-auto flex justify-between md:block">
           <div class="text-lg">1000+ Abonnés</div>
           <div class="text-sm">500 Contacts en commun</div>
@@ -35,13 +35,14 @@
           </a>
         </div>
       </div>
-    </div>
 
+
+    </div>
     <!--Banner & user info-->
     <div class="relative">
       <!--Banner-->
       <div>
-        <img class="w-full  drop-shadow-[0_15px_10px_rgba(0,0,0,0.7)]" :src="imageSrc" alt="Profile Banner">
+        <img class=" w-full drop-shadow-[0_15px_10px_rgba(0,0,0,0.7)]" :src="imageSrc" alt="Profile Banner">
       </div>
       <!--User info -->
       <div class="absolute top-1/2 right-10 text-white z-30 transform -translate-y-1/2">
@@ -55,17 +56,18 @@
   </div>
 
   <!-- Actions Button & image profile -->
-  <div class="w-full ">
+  <div class="relative bottom-4 w-full">
     <div class="bg-gray-800 py-4 relative shadow-lg" style="background-color: #24120E">
-      <div class=" flex flex-col sm:flex-row items-center sm:justify-between">
+      <div class="flex flex-col sm:flex-row items-center sm:justify-between">
         <img
-            class=" left-5 rounded-full border-solid border-2 sm:absolute sm:top-1/2 sm:transform sm:-translate-y-1/2 md:left-20 z-30"
+            class="left-5 rounded-full border-solid border-2 sm:absolute sm:top-1/2 sm:transform sm:-translate-y-1/2 md:left-20 z-20"
             :src="profilePicture"
             alt="Profile Picture"
             style="border-color: rgb(70, 37, 24); max-width: 250px; width: 100%;">
         <div class="flex flex-wrap sm:flex-nowrap items-center mt-4 sm:mt-0 sm:ml-auto space-x-2 sm:space-x-4">
           <button
-              class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125">
+              class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125"
+              @click="isDialogActive = true">
             <v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-text-box-plus-outline</v-icon>
           </button>
           <button class="text-white py-2 px-4 rounded"
@@ -88,22 +90,81 @@
 
   <CreatorFeed></CreatorFeed>
 
-
-
-
-
-  
+  <!--Post-modale-->
+  <v-dialog v-model="isDialogActive" max-width="500">
+    <template v-slot:default="{ isActive }">
+      <v-card class="text-center rounded-xl">
+        <div class="text-white p-4 rounded-t" style="background-color: #110E0F">
+          <h2>Publication</h2>
+        </div>
+        <v-card-text class="bg">
+          <v-row class="justify-center mb-4">
+            <v-col class="d-flex align-center justify-end">
+              <v-btn :class="{'v-btn--active': !isArticle}" @click="togglePostType(false)">QUICKY</v-btn>
+            </v-col>
+            <v-col class="d-flex align-center justify-start">
+              <v-btn :class="{'v-btn--active': isArticle}" @click="togglePostType(true)">ARTICLE</v-btn>
+            </v-col>
+          </v-row>
+          <v-textarea label="Écrivez votre message ici..." v-model="message" outlined></v-textarea>
+          <v-file-input
+              label="Ajoutez des fichiers"
+              v-model="files"
+              outlined
+              multiple
+              dropzone
+              placeholder="Glissez et déposez des fichiers ici ou cliquez pour sélectionner des fichiers"
+          ></v-file-input>
+        </v-card-text>
+        <v-card-actions class="justify-end">
+          <v-btn color="primary" @click="publishPost">Publier</v-btn>
+          <v-btn color="primary" @click="cancelPost">Annuler</v-btn>
+        </v-card-actions>
+      </v-card>
+    </template>
+  </v-dialog>
 </template>
 
 <script setup>
-
 import CreatorFeed from "@/views/main/CreatorFeed.vue";
+import {ref} from 'vue';
+
 let imageSrc = '/images/usersmedia/ARPS/banners/bannerARPS01.png';
 let profilePicture = '/images/usersmedia/ARPS/profilepictures/profileARPS.png';
+let isDialogActive = ref(false);
+let message = ref('');
+let files = ref([]);
+let isArticle = ref(false);
+
+const publishPost = () => {
+  // Logic to publish post
+  console.log('Post published:', message.value, files.value);
+  isDialogActive.value = false;
+  resetPostForm();
+};
+
+const cancelPost = () => {
+  isDialogActive.value = false;
+  resetPostForm();
+};
+
+const resetPostForm = () => {
+  message.value = '';
+  files.value = [];
+};
+
+const togglePostType = (article) => {
+  isArticle.value = article;
+};
 </script>
 
 <style scoped>
 .shadow-lg {
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);
 }
-</style>
\ No newline at end of file
+
+.v-btn--active {
+  background-color: #1976D2;
+  color: white;
+}
+</style>