diff --git a/src/views/PayementCompleted.vue b/src/views/PayementCompleted.vue
deleted file mode 100644
index e02c937..0000000
--- a/src/views/PayementCompleted.vue
+++ /dev/null
@@ -1,106 +0,0 @@
-<template>
-
-    <v-container>
-      <div class="margin-top-mobile">
-        <v-row style="margin-top: 4%; margin-bottom: 2%" class="d-flex justify-center align-center">
-          <v-col cols="12" xxl="4" xl="4" lg="5" md="7" sm="9"> <v-card class="custom-dialog"
-              style="background-color: white;">
-              <v-container>
-                <!-- Title Card -->
-                <v-card-text style="font-weight: 600; margin-top: 20px; margin-bottom: 20px; font-size: 2rem;"
-                  class="text-center">
-                  Paiement complété
-                </v-card-text>
-                <v-row justify="center">
-
-                  <!-- Icon Check -->
-                  <v-col cols="12" class="text-center">
-                    <v-icon color=#a30e79 size="150">mdi-check-circle</v-icon>
-                  </v-col>
-                </v-row>
-                <!-- Informations -->
-                <v-row justify="center">
-                  <v-col cols="12">
-                    <v-card-text style="font-size: 1.2rem; text-align: center;">
-                      Merci de supporter
-                    </v-card-text>
-                    <v-card-text style="font-weight: 600; font-size: 1.6rem; text-align: center; margin-bottom: 10px;">
-                      {{ creatorName }}
-                    </v-card-text>
-                  </v-col>
-                </v-row>
-                <!-- Ok btn -->
-                <v-row>
-                  <v-row style="margin-left: 30px; margin-right: 30px; margin-bottom: 10px;">
-                    <v-text-field variant="underlined" style=" margin-right: 10px;" v-model="email"
-                      label="Email"></v-text-field>
-                    <v-btn color="#6b0065" variant="outlined" style="margin-top: 10px;" @click="getReceipt">Reçu</v-btn>
-                  </v-row>
-                  <v-col cols="12">
-
-                    <v-card-actions class="justify-center">
-                      <v-btn color="white" outlined elevation="2"
-                        style="font-size: 2rem; width: 175px; height: 45px; margin-bottom: 25px; background-color: #a30e79;"
-                        @click="router.push({ path: `/${creatorUserName}` })">Ok</v-btn>
-                    </v-card-actions>
-                  </v-col>
-                </v-row>
-              </v-container>
-            </v-card>
-          </v-col>
-        </v-row>
-      </div>
-      <v-snackbar v-model="errorSnackBar">
-        Aucun reçu trouvé pour ce email.
-        <template v-slot:actions>
-          <v-btn color="red" variant="text" @click="errorSnackBar = false">Fermer</v-btn>
-        </template>
-      </v-snackbar>
-    </v-container>
-  
-</template>
-
-<script async setup>
-import { useClient } from '@/plugins/api.js';
-import { onBeforeMount, ref } from 'vue';
-import { useRouter } from 'vue-router';
-const router = useRouter()
-const client = useClient();
-
-const queryString = window.location.search;
-const urlParams = new URLSearchParams(queryString);
-const creatorId = urlParams.get('creatorId')
-const creatorName = ref("");
-const creatorUserName = ref("");
-const email = ref("");
-const errorSnackBar = ref(false);
-
-
-onBeforeMount(async () => {
-  const creatorResponse = await client.get(`/api/Users?UserId=${creatorId}`);
-  creatorName.value = creatorResponse.data.firstName + " " + creatorResponse.data.lastName;
-  creatorUserName.value = creatorResponse.data.userName;
-})
-
-async function getReceipt() {
-  const receiptResponse = await client.get(`/api/Stripe/GetMyLastReceipt?CreatorId=${creatorId}&Email=${email.value}`);
-  const receiptUrl = receiptResponse.data.receiptUrl;
-
-  if (receiptUrl === "") {
-    errorSnackBar.value = true;
-    return;
-  }
-  window.open(receiptUrl);
-
-}
-
-
-</script>
-
-<style scoped>
-@media (min-width: 200px) and (max-width: 960px) {
-  .margin-top-mobile {
-    margin-top: 60px;
-  }
-}
-</style>
diff --git a/src/views/PaymentCompleted.vue b/src/views/PaymentCompleted.vue
new file mode 100644
index 0000000..f0e6434
--- /dev/null
+++ b/src/views/PaymentCompleted.vue
@@ -0,0 +1,124 @@
+<template>
+  <v-container class="py-10">
+    <v-row class="d-flex flex-column align-center">
+      <v-col cols="10">
+        <v-card class="elevation-3" style="background-color: white; border-radius: 12px;">
+          <!-- Title Section -->
+          <v-card-title class="text-center text-h4 font-weight-bold mb-4">
+            Paiement complété
+          </v-card-title>
+
+          <!-- Check Icon -->
+          <v-card-text class="text-center mb-4">
+            <v-icon size="120" color="success">mdi-check-circle</v-icon>
+          </v-card-text>
+
+          <!-- Thank You Message -->
+          <v-card-text class="text-center mb-4">
+            <p class="text-h6">Merci de supporter</p>
+            <p class="text-h5 font-weight-bold">{{ creatorName }}</p>
+          </v-card-text>
+
+          <!-- Email Input and Receipt Button -->
+          <v-card-text>
+            <v-row class="d-flex flex-column align-center">
+              <v-col cols="12" sm="10" md="8" lg="6">
+                <v-text-field
+                    v-model="email"
+                    label="Entrez votre email pour recevoir le reçu"
+                    variant="underlined"
+                    hide-details
+                ></v-text-field>
+              </v-col>
+              <v-col cols="12" class="text-center">
+                <v-btn color="primary" class="text-white" @click="getReceipt">
+                  Télécharger le reçu
+                </v-btn>
+              </v-col>
+            </v-row>
+          </v-card-text>
+
+          <!-- Continue Button -->
+          <v-card-actions class="justify-center">
+            <v-btn
+                color="primary"
+                class="text-white px-5 py-3"
+                @click="router.push({ path: `/${creatorUserName}` })"
+            >
+              Continuer
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-col>
+    </v-row>
+
+    <!-- Error Snackbar -->
+    <v-snackbar v-model="errorSnackBar" color="red darken-1">
+      Aucun reçu trouvé pour cet email.
+      <template v-slot:actions>
+        <v-btn color="white" text @click="errorSnackBar = false">Fermer</v-btn>
+      </template>
+    </v-snackbar>
+  </v-container>
+</template>
+
+<script setup>
+import { ref, onBeforeMount } from 'vue';
+import { useRouter } from 'vue-router';
+import { useClient } from '@/plugins/api.js';
+
+const router = useRouter();
+const client = useClient();
+
+const queryString = window.location.search;
+const urlParams = new URLSearchParams(queryString);
+const creatorId = urlParams.get('creatorId');
+
+const creatorName = ref('');
+const creatorUserName = ref('');
+const email = ref('');
+const errorSnackBar = ref(false);
+
+onBeforeMount(async () => {
+  try {
+    const response = await client.get(`/api/Users?UserId=${creatorId}`);
+    creatorName.value = `${response.data.firstName} ${response.data.lastName}`;
+    creatorUserName.value = response.data.userName;
+  } catch (error) {
+    console.error('Failed to fetch creator data:', error);
+  }
+});
+
+async function getReceipt() {
+  try {
+    const response = await client.get(
+        `/api/Stripe/GetMyLastReceipt?CreatorId=${creatorId}&Email=${email.value}`
+    );
+    const receiptUrl = response.data.receiptUrl;
+
+    if (!receiptUrl) {
+      errorSnackBar.value = true;
+    } else {
+      window.open(receiptUrl, '_blank');
+    }
+  } catch (error) {
+    console.error('Failed to fetch receipt:', error);
+    errorSnackBar.value = true;
+  }
+}
+</script>
+
+<style scoped>
+.v-container {
+  max-width: 800px;
+  margin: auto;
+}
+
+.v-card {
+  padding: 24px;
+}
+
+.v-btn {
+  border-radius: 8px;
+}
+</style>