diff --git a/src/views/profile/ProfilePage.vue b/src/views/profile/ProfilePage.vue
new file mode 100644
index 0000000..a6fe533
--- /dev/null
+++ b/src/views/profile/ProfilePage.vue
@@ -0,0 +1,167 @@
+<template>
+  <div class="flex flex-col md:flex-row">
+
+    <!-- Left Menu -->
+    <div class="bg-[#f4f4f4] z-20 w-full md:max-w-xs fixed md:sticky md:top-0 md:flex md:flex-col top-0">
+      <div class="sticky top-20 z-30 bg-[#f4f4f4]">
+        <div class="flex flex-col items-center md:items-start md:pl-4 mt-16">
+          <h1 class="text-2xl py-4 font-bold text-center md:text-left">Gérer votre compte Hutopy</h1>
+
+          <div class="relative flex items-center md:mt-0 w-full">
+            <!-- Navigation buttons for small screens -->
+            <button @click="scrollLeftFunc"
+                    class="rounded p-1 absolute left-2 z-10 md:hidden text-fuchsia-800 bg-[#f4f4f4] text-2xl ">
+              <v-icon>mdi-chevron-left</v-icon>
+            </button>
+
+            <div
+                ref="scrollContainer"
+                class="flex md:flex-col space-x-2 space-y-0 md:space-x-0 md:space-y-2 p-4 items-center md:items-start overflow-x-scroll md:overflow-x-visible mx-2 md:mx-0 custom-scroll min-w-[400px] px-1"
+                @mousedown="mouseDown"
+                @mouseleave="mouseLeave"
+                @mouseup="mouseUp"
+                @mousemove="mouseMove">
+
+              <v-btn variant="text" @click="currentComponent = 'CreatorPage'">
+                <v-icon class="mr-2">mdi-file-edit-outline</v-icon>
+                Créateur
+              </v-btn>
+
+              <v-btn variant="text" @click="currentComponent = 'PersonnalInfo'">
+                <v-icon class="mr-2">mdi-information</v-icon>
+                Utilisateur
+              </v-btn>
+
+              <v-btn variant="text" @click="currentComponent = 'ManageAccount'">
+                <v-icon class="mr-2">mdi-account</v-icon>
+                Gestion de Comptes
+              </v-btn>
+
+              <v-btn variant="text" @click="currentComponent = 'AccountSecurity'">
+                <v-icon class="mr-2">mdi-security</v-icon>
+                Sécurité
+              </v-btn>
+
+            </div>
+            <button @click="scrollRightFunc"
+                    class="rounded p-1 absolute right-2 z-10 md:hidden text-fuchsia-800 bg-[#f4f4f4] text-2xl">
+              <v-icon>mdi-chevron-right</v-icon>
+            </button>
+          </div>
+
+        </div>
+      </div>
+    </div>
+
+    <!-- Mid Content -->
+    <div class="flex flex-col flex-1 align-center py-12 p-3 mt-28 md:mt-0">
+      <template v-if="currentComponent === 'ManageAccount'">
+        <manage-account></manage-account>
+      </template>
+      <template v-else-if="currentComponent === 'CreatorPage'">
+        <creator-page></creator-page>
+      </template>
+      <template v-else-if="currentComponent === 'PersonnalInfo'">
+        <personnal-info></personnal-info>
+      </template>
+      <template v-else-if="currentComponent === 'AccountSecurity'">
+        <account-security></account-security>
+      </template>
+    </div>
+  </div>
+
+</template>
+
+<script setup>
+import {ref, onMounted} from "vue";
+import ManageAccount from "@/views/profile/management/ManageAccount.vue";
+import CreatorPage from "@/views/profile/creators/CreatorPage.vue";
+import PersonnalInfo from "@/views/profile/account/PersonnalInfo.vue";
+import AccountSecurity from "@/views/profile/security/AccountSecurity.vue";
+
+const currentComponent = ref('PersonnalInfo'); // Default component
+const isDown = ref(false);
+const startX = ref(0);
+const scrollLeft = ref(0);
+
+
+onMounted(() => {
+  const slider = document.querySelector('.custom-scroll');
+  slider.addEventListener('mousedown', (e) => {
+    isDown.value = true;
+    slider.classList.add('active');
+    startX.value = e.pageX - slider.offsetLeft;
+    scrollLeft.value = slider.scrollLeft;
+  });
+
+  slider.addEventListener('mouseleave', () => {
+    isDown.value = false;
+    slider.classList.remove('active');
+  });
+
+  slider.addEventListener('mouseup', () => {
+    isDown.value = false;
+    slider.classList.remove('active');
+  });
+
+  slider.addEventListener('mousemove', (e) => {
+    if (!isDown.value) return;
+    e.preventDefault();
+    const x = e.pageX - slider.offsetLeft;
+    const walk = (x - startX.value) * 3; // scroll-fast
+    slider.scrollLeft = scrollLeft.value - walk;
+  });
+});
+
+const mouseDown = (e) => {
+  const slider = document.querySelector('.custom-scroll');
+  isDown.value = true;
+  slider.classList.add('active');
+  startX.value = e.pageX - slider.offsetLeft;
+  scrollLeft.value = slider.scrollLeft;
+};
+
+const mouseLeave = () => {
+  isDown.value = false;
+  const slider = document.querySelector('.custom-scroll');
+  slider.classList.remove('active');
+};
+
+const mouseUp = () => {
+  isDown.value = false;
+  const slider = document.querySelector('.custom-scroll');
+  slider.classList.remove('active');
+};
+
+const mouseMove = (e) => {
+  if (!isDown.value) return;
+  e.preventDefault();
+  const slider = document.querySelector('.custom-scroll');
+  const x = e.pageX - slider.offsetLeft;
+  const walk = (x - startX.value) * 3; // scroll-fast
+  slider.scrollLeft = scrollLeft.value - walk;
+};
+
+const scrollLeftFunc = () => {
+  const container = document.querySelector('.custom-scroll');
+  container.scrollBy({left: -100, behavior: 'smooth'});
+};
+
+const scrollRightFunc = () => {
+  const container = document.querySelector('.custom-scroll');
+  container.scrollBy({left: 100, behavior: 'smooth'});
+};
+</script>
+
+<style scoped>
+
+.custom-scroll {
+  -ms-overflow-style: none; /* Internet Explorer 10+ */
+  scrollbar-width: none; /* Firefox */
+}
+
+.custom-scroll::-webkit-scrollbar {
+  display: none; /* Safari and Chrome */
+}
+
+</style>
diff --git a/src/views/Profile/account/AdressesHome.vue b/src/views/profile/account/AdressesHome.vue
similarity index 100%
rename from src/views/Profile/account/AdressesHome.vue
rename to src/views/profile/account/AdressesHome.vue
diff --git a/src/views/Profile/account/AdressesWork.vue b/src/views/profile/account/AdressesWork.vue
similarity index 100%
rename from src/views/Profile/account/AdressesWork.vue
rename to src/views/profile/account/AdressesWork.vue
diff --git a/src/views/Profile/account/Birthday.vue b/src/views/profile/account/Birthday.vue
similarity index 100%
rename from src/views/Profile/account/Birthday.vue
rename to src/views/profile/account/Birthday.vue
diff --git a/src/views/Profile/account/Email.vue b/src/views/profile/account/Email.vue
similarity index 100%
rename from src/views/Profile/account/Email.vue
rename to src/views/profile/account/Email.vue
diff --git a/src/views/Profile/account/Gender.vue b/src/views/profile/account/Gender.vue
similarity index 100%
rename from src/views/Profile/account/Gender.vue
rename to src/views/profile/account/Gender.vue
diff --git a/src/views/Profile/account/Name.vue b/src/views/profile/account/Name.vue
similarity index 100%
rename from src/views/Profile/account/Name.vue
rename to src/views/profile/account/Name.vue
diff --git a/src/views/Profile/account/PersonnalInfo.vue b/src/views/profile/account/PersonnalInfo.vue
similarity index 100%
rename from src/views/Profile/account/PersonnalInfo.vue
rename to src/views/profile/account/PersonnalInfo.vue
diff --git a/src/views/Profile/account/Phone.vue b/src/views/profile/account/Phone.vue
similarity index 100%
rename from src/views/Profile/account/Phone.vue
rename to src/views/profile/account/Phone.vue
diff --git a/src/views/Profile/creators/About.vue b/src/views/profile/creators/About.vue
similarity index 100%
rename from src/views/Profile/creators/About.vue
rename to src/views/profile/creators/About.vue
diff --git a/src/views/Profile/creators/BannerPicker.vue b/src/views/profile/creators/BannerPicker.vue
similarity index 100%
rename from src/views/Profile/creators/BannerPicker.vue
rename to src/views/profile/creators/BannerPicker.vue
diff --git a/src/views/Profile/creators/ColorsPicker.vue b/src/views/profile/creators/ColorsPicker.vue
similarity index 100%
rename from src/views/Profile/creators/ColorsPicker.vue
rename to src/views/profile/creators/ColorsPicker.vue
diff --git a/src/views/Profile/creators/CreateCreator.vue b/src/views/profile/creators/CreateCreator.vue
similarity index 100%
rename from src/views/Profile/creators/CreateCreator.vue
rename to src/views/profile/creators/CreateCreator.vue
diff --git a/src/views/Profile/creators/CreatorPage.vue b/src/views/profile/creators/CreatorPage.vue
similarity index 100%
rename from src/views/Profile/creators/CreatorPage.vue
rename to src/views/profile/creators/CreatorPage.vue
diff --git a/src/views/Profile/creators/LogoPicker.vue b/src/views/profile/creators/LogoPicker.vue
similarity index 100%
rename from src/views/Profile/creators/LogoPicker.vue
rename to src/views/profile/creators/LogoPicker.vue
diff --git a/src/views/Profile/creators/Socials.vue b/src/views/profile/creators/Socials.vue
similarity index 100%
rename from src/views/Profile/creators/Socials.vue
rename to src/views/profile/creators/Socials.vue
diff --git a/src/views/profile/management/ManageAccount.vue b/src/views/profile/management/ManageAccount.vue
new file mode 100644
index 0000000..29b5c4c
--- /dev/null
+++ b/src/views/profile/management/ManageAccount.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="flex flex-col items-center w-full">
+    <h1 class="uppercase pb-5 text-2xl">  <v-icon class="mr-2 text">mdi-account</v-icon> Gestion des comptes</h1>
+
+    <div class="border rounded-2xl w-full max-w-[800px]">
+      <div class="py-5 uppercase ml-4">Comptes</div>
+
+      <div class="flex flex-col w-full">
+        <button class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
+          <span class="min-w-32 text-left">Id de la page</span>
+          <span class="flex-auto pr-6 text-left">Nom de la page / utilisateur </span>
+          <span class="flex-none">
+            <img
+                :src="'/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png'"
+                alt="Profile Image"
+                class="ml-2 rounded-full"
+                width="48"
+                height="48">
+          </span>
+        </button>
+
+        <button class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out rounded-b-2xl w-full">
+          <span class="flex-none pa-2 min-w-32 text-left">Ajouter un compte</span>
+
+          <span class="flex-none text-fuchsia-800">
+            <v-icon>mdi-plus-circle</v-icon>
+          </span>
+        </button>
+      </div>
+    </div>
+
+    <div class="border rounded-2xl w-full max-w-[800px] mt-10">
+      <div class="py-5 uppercase ml-4">Autorisations accordées</div>
+
+      <div class="flex flex-col w-full">
+        <button class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
+          <span class="min-w-32 text-left">Id de la page</span>
+          <span class="flex-auto pr-6 text-left">Nom de utilisateur </span>
+          <span class="flex-none">
+            <img
+                :src="'/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png'"
+                alt="Profile Image"
+                class="ml-2 rounded-full"
+                width="48"
+                height="48">
+          </span>
+        </button>
+
+        <button class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out rounded-b-2xl w-full">
+          <span class="flex-none pa-2 min-w-32 text-left">Ajouter un compte</span>
+
+          <span class="flex-none text-fuchsia-800">
+            <v-icon>mdi-plus-circle</v-icon>
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+
+<script setup>
+
+</script>
+
+<style>
+.HoverBtn:hover {
+  @apply bg-[#A6147D] text-white;
+  @apply hover:opacity-90; /* Réduire l'opacité au survol */
+}
+
+
+</style>
+
+
diff --git a/src/views/Profile/security/AccountSecurity.vue b/src/views/profile/security/AccountSecurity.vue
similarity index 100%
rename from src/views/Profile/security/AccountSecurity.vue
rename to src/views/profile/security/AccountSecurity.vue
diff --git a/src/views/Profile/security/ModalPassword.vue b/src/views/profile/security/ModalPassword.vue
similarity index 100%
rename from src/views/Profile/security/ModalPassword.vue
rename to src/views/profile/security/ModalPassword.vue
diff --git a/src/views/Profile/security/ModalRecoveryByEmailInfo.vue b/src/views/profile/security/ModalRecoveryByEmailInfo.vue
similarity index 100%
rename from src/views/Profile/security/ModalRecoveryByEmailInfo.vue
rename to src/views/profile/security/ModalRecoveryByEmailInfo.vue
diff --git a/src/views/Profile/security/ModalRecoveryByPhoneInfo.vue b/src/views/profile/security/ModalRecoveryByPhoneInfo.vue
similarity index 100%
rename from src/views/Profile/security/ModalRecoveryByPhoneInfo.vue
rename to src/views/profile/security/ModalRecoveryByPhoneInfo.vue