diff --git a/src/layouts/MainPage.vue b/src/layouts/MainPage.vue
new file mode 100644
index 0000000..6c5f79e
--- /dev/null
+++ b/src/layouts/MainPage.vue
@@ -0,0 +1,91 @@
+<template>
+    <v-container style="margin-top: 5%;">
+        <v-row style="background-color: #c4c4c4;">
+            <v-col align="center">
+                <div>
+                    <p>Router : {{ selectedUsername }}</p>
+                    <div v-if="PublicCreatorData">
+                        <h1>{{ PublicCreatorData.userName }}</h1>
+                        <h1>{{ PublicCreatorData.firstName }} {{ PublicCreatorData.lastName }}</h1>
+                    </div>
+                    <div v-else>
+                        <p v-if="errorMessage">{{ errorMessage }}</p>
+                    </div>
+
+                    <form @submit.prevent="manualFetch">
+                        <input v-model="manualUsername" placeholder="Enter username" />
+                        <button type="submit">Fetch User</button>
+                    </form>
+                </div>
+            </v-col>
+        </v-row>
+    </v-container>
+
+    <v-snackbar v-model="errorSnackBar">
+        {{ snackBarMessage }}
+        <template v-slot:actions>
+            <v-btn color="red" variant="text" @click="errorSnackBar = false">Fermer</v-btn>
+        </template>
+    </v-snackbar>
+</template>
+
+<script setup>
+import { useClient } from "@/plugins/api.js";
+import { onMounted, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+
+const PublicCreatorData = ref(null);
+const selectedUsername = ref('');
+const manualUsername = ref('');
+const route = useRoute();
+const client = useClient();
+
+let errorSnackBar = ref(false);
+let snackBarMessage = ref('');
+const errorMessage = ref('');
+
+const fetchUser = async (username) => {
+    console.log(`Fetching user: ${username}`);
+    try {
+        const response = await client.get(`/api/GetCreatorInfo`, {
+            params: {
+                UserName: username
+            }
+        });
+        const data = response.data;
+        console.log(`Data received: `, data);
+        if (data && Object.keys(data).length > 0 && (data.userName || data.firstName || data.lastName)) {
+            PublicCreatorData.value = data; // Met à jour la référence réactive
+            errorMessage.value = '';
+            errorSnackBar.value = false;
+        } else {
+            PublicCreatorData.value = null; // Réinitialise la référence si l'utilisateur n'est pas trouvé
+            errorMessage.value = "Utilisateur non trouvé";
+            snackBarMessage.value = "Utilisateur non trouvé";
+            errorSnackBar.value = true;
+        }
+    } catch (error) {
+        console.error(`Error fetching user: ${error}`);
+        PublicCreatorData.value = null;
+        errorMessage.value = "Erreur lors de la récupération des données";
+        snackBarMessage.value = "Erreur lors de la récupération des données";
+        errorSnackBar.value = true;
+    }
+};
+
+const updateUser = () => {
+    selectedUsername.value = route.params.username;
+    console.log(`Route username: ${selectedUsername.value}`);
+    if (selectedUsername.value) {
+        fetchUser(selectedUsername.value);
+    }
+};
+
+const manualFetch = () => {
+    fetchUser(manualUsername.value);
+};
+
+onMounted(updateUser);
+
+watch(() => route.params.username, updateUser);
+</script>
diff --git a/src/layouts/UserProfile.vue b/src/layouts/UserProfile.vue
deleted file mode 100644
index c7db7e1..0000000
--- a/src/layouts/UserProfile.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-  <!-- Fiche test pour router -->
-<template>
-    <div v-if="user">
-        <h1>{{ user.name }}</h1>
-        <p>{{ user.bio }}</p>
-        <!-- Afficher plus de contenu utilisateur ici -->
-    </div>
-    <div v-else>
-        <p>Utilisateur non trouvé</p>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            user: null
-        };
-    },
-    created() {
-        this.fetchUser();
-    },
-    watch: {
-        '$route.params.username': 'fetchUser'
-    },
-    methods: {
-        fetchUser() {
-            const username = this.$route.params.username;
-            fetch(`https://api.hutopy.ca/users/${username}`)
-                .then(response => response.json())
-                .then(data => {
-                    if (data) {
-                        this.user = data;
-                    } else {
-                        this.user = null;
-                    }
-                })
-                .catch(() => {
-                    this.user = null;
-                });
-        }
-    }
-};
-</script>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index a26d79e..f34e65d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -8,7 +8,7 @@ import HelpAndContact from '@/views/tos/HelpAndContact.vue'
 import TermsAndConditions from '@/views/tos/TermsAndConditions.vue'
 import Transactions from '@/views/tos/Transactions.vue'
 import { createRouter, createWebHistory } from 'vue-router'
-import UserProfile from '../layouts/UserProfile.vue'
+import MainPage from '../layouts/MainPage.vue'
 import LoginView from '../views/LoginView.vue'
 import PaymentCompleted from '../views/PayementCompleted.vue'
 import SignupView from '../views/SignupView.vue'
@@ -136,7 +136,7 @@ const routes = [
   {
     path: '/:username',
     name: 'user-profile',
-    component: UserProfile
+    component: MainPage
   },
 
   {
@@ -152,6 +152,7 @@ const router = createRouter({
   scrollBehavior(to, from, savedPosition) {
     return { top: 0 };
   }
+
 })
 
 export default router