diff --git a/src/router/router.js b/src/router/router.js
index deeef2f..f3a01e7 100644
--- a/src/router/router.js
+++ b/src/router/router.js
@@ -23,6 +23,7 @@ import ContentPage from "@/views/contents/ContentPage.vue";
 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";
 
 
 const routes = [
@@ -58,6 +59,10 @@ const routes = [
                 path: 'content',
                 component: CreatorContent
             },
+            {
+                path: 'subscription',
+                component: SubscriptionMenu
+            },
         ]
     },
     {
diff --git a/src/views/creators/SubscriptionMenu.vue b/src/views/creators/SubscriptionMenu.vue
new file mode 100644
index 0000000..6f10960
--- /dev/null
+++ b/src/views/creators/SubscriptionMenu.vue
@@ -0,0 +1,88 @@
+<script setup>
+import { useBrandingStore } from "@/stores/brandingStore.js";
+import { ref } from 'vue';
+
+const branding = useBrandingStore();
+const selectedTier = ref(null);
+const tiers = ref([
+  {
+    id: 1,
+    name: 'Les Visionnaires',
+    description: 'Container blablal HtmlContainer blablal HtmlContainer blablalContainer blablal HtmlContainer blablal HtmlContainer blablalContainer blablal HtmlContainer blablal HtmlContainer blablalContainer blablal HtmlContainer blablal HtmlContainer blablalContainer blablal HtmlContainer blablal HtmlContainer blablalContainer blablal HtmlContainer blablal HtmlContainer blablalContainer blablal HtmlContainer blablal HtmlContainer blablalContainer blablal HtmlContainer blablal HtmlContainer blablalContainer blablal HtmlContainer blablal HtmlContainer blablal...',
+    price: 15,
+  },
+]);
+
+// Colors
+
+const onPrimary = { color: branding.colors.onPrimary}
+const Primary = { backgroundColor: branding.colors.primary}
+
+const onSecondaryColor = { color: branding.colors.onSecondary}
+const secondaryColor = { backgroundColor: branding.colors.secondary}
+
+function selectTier(id) {
+  selectedTier.value = id;
+}
+</script>
+
+<template>
+  <v-container class="d-flex justify-center">
+    <v-row justify="center">
+      <!-- Tiers -->
+      <v-col
+          :cols="12 / Math.min(tiers.length, 3)"
+          md="4"
+          v-for="tier in tiers"
+          :key="tier.id"
+      >
+        <div class="bg-white shadow-2xl rounded-2xl">
+          <v-img src="/images/hutopymedia/loginpage/loginhutopy.png" class="rounded-t-2xl"></v-img>
+          <div class="pa-6" :style="[Primary, onPrimary]">
+            <v-card-title class="text-h4 text-center py-4 ">{{ tier.name }}</v-card-title>
+           
+           <div class="text-justify">{{ tier.description }}</div> 
+          </div>
+          <div class="text-center bg-fuchsia-800 py-10" :style="[Primary]">
+            <v-btn
+                :color="selectedTier === tier.id ? 'primary' : ''"
+                @click="selectTier(tier.id)"
+                class="mx-auto"
+                width="200px"
+                :style="{ backgroundColor: selectedTier === tier.id ? branding.colors.primary : branding.colors.secondary, color: branding.colors.onSecondary }"
+            >
+              {{ selectedTier === tier.id ? 'Sélectionné' : 'Choisir' }}
+            </v-btn>
+
+          </div>
+          <v-card-text class="text-center rounded-b-2xl" :style="[secondaryColor,onSecondaryColor]" >
+            <span class="text-h5">{{ tier.price }} $ / par mois </span>
+          </v-card-text>
+        </div>
+      </v-col>
+    </v-row>
+  </v-container>
+
+  <v-card-actions class="d-flex justify-center mt-10">
+    <v-btn
+        :style="{ backgroundColor: branding.colors.secondary, color: branding.colors.onBackground }"
+        width="250px"
+        variant="elevated"
+    >
+      Payer
+    </v-btn>
+
+
+  </v-card-actions>
+</template>
+
+<style scoped>
+.v-card {
+  border-radius: 12px;
+}
+
+.dotted-border {
+  border: 2px dotted ;
+  padding: 1px;
+}
+</style>