diff --git a/public/images/hutopymedia/banners/hutopyul.png b/public/images/hutopymedia/banners/hutopyul.png
new file mode 100644
index 0000000..ef74cb6
Binary files /dev/null and b/public/images/hutopymedia/banners/hutopyul.png differ
diff --git a/src/router/router.js b/src/router/router.js
index f3a01e7..b769da4 100644
--- a/src/router/router.js
+++ b/src/router/router.js
@@ -24,6 +24,7 @@ import CreatorContent from "@/views/creators/CreatorContent.vue";
 import CreatorHome from "@/views/creators/CreatorHome.vue";
 import CTA01 from "@/views/CTA01.vue";
 import SubscriptionMenu from "@/views/creators/SubscriptionMenu.vue";
+import Utilitylinks from "@/views/documentation/utilitylinks.vue";
 
 
 const routes = [
@@ -65,44 +66,51 @@ const routes = [
             },
         ]
     },
+    {
+        path: '/utilitylinks',
+        component: Utilitylinks,
+        children: [
+            {
+                path: 'helpandcontact',
+                component: HelpAndContact
+            },
+            {
+                path: 'termsandconditions',
+                name: 'termsandconditions',
+                component: TermsAndConditions
+            },
+            {
+                path: 'contentpolicy',
+                name: 'contentpolicy',
+                component: ContentPolicy
+            },
+            {
+                path: 'faq',
+                name: 'FAQ',
+                component: FAQ
+            },
+            {
+                path: 'guideforcreators',
+                name: 'guideforcreators',
+                component: CreatorGuide
+            },
+            {
+                path: 'about',
+                name: 'about',
+                component: About
+            },
+            {
+                path: 'pricing',
+                name: 'pricing',
+                component: Pricing
+            },
+        ]
+    },
     {
         path: '/content/post',
         component: PostContent,
     },
-    {
-        path: '/helpandcontact',
-        component: HelpAndContact
-    },
-    {
-        path: '/termsandconditions',
-        name: 'termsandconditions',
-        component: TermsAndConditions
-    },
-    {
-        path: '/contentpolicy',
-        name: 'contentpolicy',
-        component: ContentPolicy
-    },
-    {
-        path: '/faq',
-        name: 'FAQ',
-        component: FAQ
-    },
-    {
-        path: '/guideforcreators',
-        name: 'guideforcreators',
-        component: CreatorGuide
-    },
-    {
-        path: '/about',
-        name: 'about',
-        component: About
-    },
-    {
-        path: '/pricing',
-        name: 'pricing',
-        component: Pricing
-    },
+  
     {
         path: '/join',
         name: 'join',
diff --git a/src/views/creators/CreatorLayout.vue b/src/views/creators/CreatorLayout.vue
index 2ac38b2..9c48646 100644
--- a/src/views/creators/CreatorLayout.vue
+++ b/src/views/creators/CreatorLayout.vue
@@ -25,6 +25,5 @@
 import CreatorBanner from "@/views/creators/CreatorBanner.vue";
 import Footer from "@/views/main/Footer.vue";
 import {useBrandingStore} from "@/stores/brandingStore.js";
-
 const brandingStore = useBrandingStore()
 </script>
diff --git a/src/views/documentation/About.vue b/src/views/documentation/About.vue
index 835df87..7e30016 100644
--- a/src/views/documentation/About.vue
+++ b/src/views/documentation/About.vue
@@ -1,7 +1,6 @@
 <template>
-  <div class="relative pb-10">
-    <img src="/images/hutopymedia/tospage/headerbackground.png" class="mx-auto block max-w-[1000px] shadow-2xl rounded-none md:rounded-2xl" alt="">
-    <h1 class="h1-tos py-10 absolute inset-0 flex items-center justify-center text-white uppercase">À propos</h1>
+  <div>  
+    <h1 class="h1-tos py-10   flex items-center justify-center uppercase">À propos</h1>
   </div>
 
   <div class="mx-auto max-w-[1000px] px-4">
diff --git a/src/views/documentation/ContentPolicy.vue b/src/views/documentation/ContentPolicy.vue
index ea71c38..0cf36c6 100644
--- a/src/views/documentation/ContentPolicy.vue
+++ b/src/views/documentation/ContentPolicy.vue
@@ -1,7 +1,6 @@
 <template>
-  <div class="relative pb-10">
-    <img src="/images/hutopymedia/tospage/headerbackground.png" class="mx-auto block max-w-[1000px] shadow-2xl rounded-none md:rounded-2xl" alt="">
-    <h1 class="h1-tos py-10 absolute inset-0 flex items-center justify-center text-white uppercase">Politique de Contenu</h1>
+  <div>
+    <h1 class="h1-tos py-10   flex items-center justify-center uppercase">Politique de Contenu</h1>
   </div>
 
   <div class="mx-auto max-w-[1000px] px-4">
@@ -127,4 +126,6 @@
 
 <style>
 @import '@/cssstyle/tosstyle.css';
-</style>
\ No newline at end of file
+</style>
+<script setup lang="ts">
+</script>
\ No newline at end of file
diff --git a/src/views/documentation/CreatorGuide.vue b/src/views/documentation/CreatorGuide.vue
index 913bd53..af737c6 100644
--- a/src/views/documentation/CreatorGuide.vue
+++ b/src/views/documentation/CreatorGuide.vue
@@ -1,7 +1,6 @@
 <template>
-  <div class="relative pb-10">
-    <img src="/images/hutopymedia/tospage/headerbackground.png" class="mx-auto block max-w-[1000px] shadow-2xl rounded-none md:rounded-2xl" alt="">
-    <h1 class="h1-tos py-10 absolute inset-0 flex items-center justify-center text-white uppercase">Guide pour les Créateurs</h1>
+  <div>
+    <h1 class="h1-tos py-10   flex items-center justify-center uppercase">Guide pour les Créateurs</h1>
   </div>
 
   <div class="mx-auto max-w-[1000px] px-4">
@@ -43,3 +42,5 @@
 <style>
 @import '@/cssstyle/tosstyle.css';
 </style>
+<script setup lang="ts">
+</script>
\ No newline at end of file
diff --git a/src/views/documentation/FAQ.vue b/src/views/documentation/FAQ.vue
index 5186875..9b03506 100644
--- a/src/views/documentation/FAQ.vue
+++ b/src/views/documentation/FAQ.vue
@@ -1,7 +1,6 @@
 <template>
-  <div class="relative pb-10">
-    <img src="/images/hutopymedia/tospage/headerbackground.png" class="mx-auto block max-w-[1000px] shadow-2xl rounded-none md:rounded-2xl" alt="">
-    <h1 class="h1-tos py-10 absolute inset-0 flex items-center justify-center text-white uppercase">FAQ</h1>
+  <div>
+    <h1 class="h1-tos py-10   flex items-center justify-center uppercase">FAQ</h1>
   </div>
 
   <div class="mx-auto max-w-[1000px] px-4">
@@ -89,3 +88,5 @@
   @apply m-2 text-red-500 my-4;
 }
 </style>
+<script setup lang="ts">
+</script>
\ No newline at end of file
diff --git a/src/views/documentation/HelpAndContact.vue b/src/views/documentation/HelpAndContact.vue
index 4eca91f..02a1b47 100644
--- a/src/views/documentation/HelpAndContact.vue
+++ b/src/views/documentation/HelpAndContact.vue
@@ -1,7 +1,6 @@
 <template>
-  <div class="relative pb-10"> 
-    <img src="/images/hutopymedia/tospage/headerbackground.png" class="mx-auto block max-w-[1000px] shadow-2xl rounded-none md:rounded-2xl" alt="">
-    <h1 class="h1-tos py-10 absolute inset-0 flex items-center justify-center text-white uppercase">Aide et Contact</h1>
+  <div>
+    <h1 class="h1-tos py-10   flex items-center justify-center uppercase">Aide et contact</h1>
   </div>
 
   <div class="mx-auto max-w-[1000px] px-4">
@@ -38,4 +37,6 @@
 
 <style>
 @import '@/cssstyle/tosstyle.css';
-</style>
\ No newline at end of file
+</style>
+<script setup lang="ts">
+</script>
\ No newline at end of file
diff --git a/src/views/documentation/Pricing.vue b/src/views/documentation/Pricing.vue
index 834bafc..52da677 100644
--- a/src/views/documentation/Pricing.vue
+++ b/src/views/documentation/Pricing.vue
@@ -1,7 +1,6 @@
 <template>
-  <div class="relative pb-10">
-    <img src="/images/hutopymedia/tospage/headerbackground.png" class="mx-auto block max-w-[1000px] shadow-2xl rounded-none md:rounded-2xl" alt="">
-    <h1 class="h1-tos py-6 absolute inset-0 flex items-center justify-center text-white uppercase">Frais</h1>
+  <div>
+    <h1 class="h1-tos py-10   flex items-center justify-center uppercase">Frais</h1>
   </div>
 
   <div class="mx-auto max-w-[1000px] px-4">
@@ -20,8 +19,7 @@
     <p class="text-justify p-tos">
       Hutopy est plus qu'une plateforme ; c'est une communauté où la transformation de la passion en profit devient réalité, grâce au soutien indéfectible d'une équipe dévouée à enrichir votre parcours. Nous vous invitons à nous rejoindre pour explorer ensemble les avenues de succès, tout en vous garantissant une part conséquente de vos revenus. Embarquez dans une aventure où votre présence en ligne ne connaît pas de limites, soutenue par Hutopy, votre allié dans la quête du succès.
     </p>
-  </div>
-  
+  </div>  
 </template>
 
 <style>
diff --git a/src/views/documentation/TermsAndConditions.vue b/src/views/documentation/TermsAndConditions.vue
index 8e4c96f..8b58fa9 100644
--- a/src/views/documentation/TermsAndConditions.vue
+++ b/src/views/documentation/TermsAndConditions.vue
@@ -1,7 +1,6 @@
 <template>
-  <div class="relative pb-10">
-    <img src="/images/hutopymedia/tospage/headerbackground.png" class="mx-auto block max-w-[1000px] shadow-2xl rounded-none md:rounded-2xl" alt="">
-    <h1 class="h1-tos py-10 absolute inset-0 flex items-center justify-center text-white uppercase">Conditions générales</h1>
+  <div>
+    <h1 class="h1-tos py-10   flex items-center justify-center uppercase">Conditions générales</h1>
   </div>
 
   <div class="mx-auto max-w-[1000px] px-4">
@@ -67,4 +66,6 @@
 
 <style>
 @import '@/cssstyle/tosstyle.css';
-</style>
\ No newline at end of file
+</style>
+<script setup lang="ts">
+</script>
\ No newline at end of file
diff --git a/src/views/documentation/utilitylinks.vue b/src/views/documentation/utilitylinks.vue
new file mode 100644
index 0000000..a6e55f4
--- /dev/null
+++ b/src/views/documentation/utilitylinks.vue
@@ -0,0 +1,47 @@
+<script setup>
+import {useBrandingStore} from "@/stores/brandingStore.js";
+const brandingStore = useBrandingStore()
+import Footer from "@/views/main/Footer.vue";
+</script>
+
+<template>
+  <div>    
+  <div>
+    <img src="/images/hutopymedia/banners/hutopyul.png" class="max-w-[1000px] rounded-2xl shadow"  alt="">  
+  </div>
+
+    <div class="flex flex-row flex-wrap justify-center gap-6 py-2" >
+      <router-link to="helpandcontact"  :style="{color: brandingStore.colors.onBackground}">
+        Aide & Contact
+      </router-link>
+      <router-link to="faq"  :style="{color: brandingStore.colors.onBackground}">
+        FAQ
+      </router-link>
+      <router-link to="guideforcreators"  :style="{color: brandingStore.colors.onBackground}">
+        Guide pour les créateurs
+      </router-link>
+      <router-link to="termsandconditions"  :style="{color: brandingStore.colors.onBackground}">
+        Termes et Conditions
+      </router-link>
+      <router-link to="contentpolicy"  :style="{color: brandingStore.colors.onBackground}">
+        Politique de Contenu
+      </router-link>
+      <router-link to="about"  :style="{color: brandingStore.colors.onBackground}">
+        À Propos
+      </router-link>
+      <router-link to="pricing"  :style="{color: brandingStore.colors.onBackground}">
+        Frais
+      </router-link>
+    </div>
+    
+  <div class="py-8 flex-grow">
+    <router-view></router-view>
+  </div>
+  <Footer></Footer>
+  </div>
+  
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/main/Footer.vue b/src/views/main/Footer.vue
index 65dee55..13027e4 100644
--- a/src/views/main/Footer.vue
+++ b/src/views/main/Footer.vue
@@ -28,25 +28,25 @@ const brandingStore = useBrandingStore()
     </div>
 
     <div class="flex flex-row flex-wrap justify-center gap-4" >
-      <router-link to="/helpandcontact"  :style="{color: brandingStore.colors.onBackground}">
+      <router-link to="helpandcontact"  :style="{color: brandingStore.colors.onBackground}">
         Aide & Contact
       </router-link>
-      <router-link to="/faq"  :style="{color: brandingStore.colors.onBackground}">
+      <router-link to="faq"  :style="{color: brandingStore.colors.onBackground}">
         FAQ
       </router-link>
-      <router-link to="/guideforcreators"  :style="{color: brandingStore.colors.onBackground}">
+      <router-link to="guideforcreators"  :style="{color: brandingStore.colors.onBackground}">
         Guide pour les créateurs
       </router-link>
-      <router-link to="/termsandconditions"  :style="{color: brandingStore.colors.onBackground}">
+      <router-link to="termsandconditions"  :style="{color: brandingStore.colors.onBackground}">
         Termes et Conditions
       </router-link>
-      <router-link to="/contentpolicy"  :style="{color: brandingStore.colors.onBackground}">
+      <router-link to="contentpolicy"  :style="{color: brandingStore.colors.onBackground}">
         Politique de Contenu
       </router-link>
-      <router-link to="/about"  :style="{color: brandingStore.colors.onBackground}">
+      <router-link to="about"  :style="{color: brandingStore.colors.onBackground}">
         À Propos
       </router-link>
-      <router-link to="/pricing"  :style="{color: brandingStore.colors.onBackground}">
+      <router-link to="pricing"  :style="{color: brandingStore.colors.onBackground}">
         Frais
       </router-link>
     </div>