diff --git a/frontend/marketplace/package-lock.json b/frontend/marketplace/package-lock.json
index bd620ced3..82a680cce 100644
--- a/frontend/marketplace/package-lock.json
+++ b/frontend/marketplace/package-lock.json
@@ -11,6 +11,7 @@
         "@apollo/client": "^3.7.14",
         "@empower-plastic/empowerjs": "0.0.18",
         "@keplr-wallet/types": "^0.11.51",
+        "@logto/vue": "^2.0.3",
         "@vue/apollo-composable": "^4.0.0-beta.5",
         "@vue/apollo-option": "^4.0.0-beta.5",
         "@vuepic/vue-datepicker": "^5.1.0",
@@ -26,7 +27,7 @@
         "vue-router": "^4.1.6",
         "vue3-carousel": "^0.3.1",
         "vue3-google-map": "^0.15.0",
-        "vue3-toastify": "^0.1.11"
+        "vue3-toastify": "^0.1.14"
       },
       "devDependencies": {
         "@rushstack/eslint-patch": "^1.2.0",
@@ -834,6 +835,48 @@
         "long": "^4.0.0"
       }
     },
+    "node_modules/@logto/browser": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@logto/browser/-/browser-2.1.2.tgz",
+      "integrity": "sha512-LADZHT7LTyiWDwWmBwh3qAtOg+IVEjfaFKBTB/RQBc5T9xYO4q4JcyW1XgpMlkc0uLqOtW3uOGztUVs0ugi6/g==",
+      "dependencies": {
+        "@logto/client": "^2.2.3",
+        "@silverhand/essentials": "^2.6.2",
+        "js-base64": "^3.7.4"
+      }
+    },
+    "node_modules/@logto/client": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/@logto/client/-/client-2.2.3.tgz",
+      "integrity": "sha512-xq4LhQ6ItbukAHgsMDcgfspTpdpO5sSfSEugpOrGP/nLwzGTfBO78OSUfMdBQEDr5+3SRmONuSjUBBwssOLINA==",
+      "dependencies": {
+        "@logto/js": "^2.1.3",
+        "@silverhand/essentials": "^2.6.2",
+        "camelcase-keys": "^7.0.1",
+        "jose": "^4.13.2"
+      }
+    },
+    "node_modules/@logto/js": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@logto/js/-/js-2.1.3.tgz",
+      "integrity": "sha512-TOuoC5gHx/SfY5gcGSBfw63x5TpM6Lm/9J5y0Jy003Z1DZARUlpz0KbzyCVAIC/+6qIefkmNPHKl1rq9MB/hog==",
+      "dependencies": {
+        "@silverhand/essentials": "^2.6.2",
+        "camelcase-keys": "^7.0.1",
+        "jose": "^4.13.2"
+      }
+    },
+    "node_modules/@logto/vue": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@logto/vue/-/vue-2.0.3.tgz",
+      "integrity": "sha512-Yxyly8gEsZprJW9avy08uT3ctMxMljjn8HbZ9Q86YpGS4px3t0LLyf4pb2COzO2xOS5d/IZAcOG/jjnY5BYOyA==",
+      "dependencies": {
+        "@logto/browser": "^2.1.2"
+      },
+      "peerDependencies": {
+        "vue": ">=3.0.0"
+      }
+    },
     "node_modules/@noble/hashes": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.3.1.tgz",
@@ -946,6 +989,15 @@
       "integrity": "sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg==",
       "dev": true
     },
+    "node_modules/@silverhand/essentials": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/@silverhand/essentials/-/essentials-2.8.5.tgz",
+      "integrity": "sha512-ChOGm1NeETWkEZXkIDD123cf8gxphqeSbtnvgsiqKMmWH2oSMvqORAyVFdngl0MuL9Ef5EdLFII+JrJkdytHrQ==",
+      "engines": {
+        "node": "^16.13.0 || ^18.12.0 || ^19.2.0",
+        "pnpm": "^8.0.0"
+      }
+    },
     "node_modules/@tootallnate/once": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -2106,6 +2158,17 @@
         "node": ">=6"
       }
     },
+    "node_modules/camelcase": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
+      "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/camelcase-css": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
@@ -2114,6 +2177,34 @@
         "node": ">= 6"
       }
     },
+    "node_modules/camelcase-keys": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-7.0.2.tgz",
+      "integrity": "sha512-Rjs1H+A9R+Ig+4E/9oyB66UC5Mj9Xq3N//vcLf2WzgdTi/3gUu3Z9KoqmlrEG4VuuLK8wJHofxzdQXz/knhiYg==",
+      "dependencies": {
+        "camelcase": "^6.3.0",
+        "map-obj": "^4.1.0",
+        "quick-lru": "^5.1.1",
+        "type-fest": "^1.2.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/camelcase-keys/node_modules/type-fest": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-1.4.0.tgz",
+      "integrity": "sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001486",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001486.tgz",
@@ -4116,6 +4207,19 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/jose": {
+      "version": "4.15.4",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-4.15.4.tgz",
+      "integrity": "sha512-W+oqK4H+r5sITxfxpSU+MMdr/YSWGvgZMQDIsNoBDGGy4i7GBPTtvFKibQzW06n3U3TqHjhvBJsirShsEJ6eeQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/panva"
+      }
+    },
+    "node_modules/js-base64": {
+      "version": "3.7.5",
+      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-3.7.5.tgz",
+      "integrity": "sha512-3MEt5DTINKqfScXKfJFrRbxkrnk2AxPWGBL/ycjz4dK8iqiSJ06UxD8jh8xuh6p10TX4t2+7FsBYVxxQbMg+qA=="
+    },
     "node_modules/js-beautify": {
       "version": "1.14.6",
       "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.14.6.tgz",
@@ -4406,6 +4510,17 @@
         "node": ">=12"
       }
     },
+    "node_modules/map-obj": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-4.3.0.tgz",
+      "integrity": "sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/memorystream": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",
@@ -5382,6 +5497,17 @@
         }
       ]
     },
+    "node_modules/quick-lru": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
+      "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/raf": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
@@ -6774,9 +6900,9 @@
       }
     },
     "node_modules/vue3-toastify": {
-      "version": "0.1.11",
-      "resolved": "https://registry.npmjs.org/vue3-toastify/-/vue3-toastify-0.1.11.tgz",
-      "integrity": "sha512-xOghHidGEuzLaDp9yiCdEt53c02x16m3ai/G3vq9d7XST77YAaPk1p1D0DiTbbpYUvGQGC1SYA7e3Z9+IP3r6w==",
+      "version": "0.1.14",
+      "resolved": "https://registry.npmjs.org/vue3-toastify/-/vue3-toastify-0.1.14.tgz",
+      "integrity": "sha512-2wyzMhWq8IjTclL25tqKWknDFdFI1vPueMGZpHNlPWf6TBfxBycBANS+2n4W1xD7tHhX4G6HhCe31sle6OpwYQ==",
       "engines": {
         "node": ">=16",
         "npm": ">=7"
diff --git a/frontend/marketplace/package.json b/frontend/marketplace/package.json
index bb3d19c97..6a03b1201 100644
--- a/frontend/marketplace/package.json
+++ b/frontend/marketplace/package.json
@@ -17,6 +17,7 @@
     "@apollo/client": "^3.7.14",
     "@empower-plastic/empowerjs": "0.0.18",
     "@keplr-wallet/types": "^0.11.51",
+    "@logto/vue": "^2.0.3",
     "@vue/apollo-composable": "^4.0.0-beta.5",
     "@vue/apollo-option": "^4.0.0-beta.5",
     "@vuepic/vue-datepicker": "^5.1.0",
@@ -32,7 +33,7 @@
     "vue-router": "^4.1.6",
     "vue3-carousel": "^0.3.1",
     "vue3-google-map": "^0.15.0",
-    "vue3-toastify": "^0.1.11"
+    "vue3-toastify": "^0.1.14"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.2.0",
diff --git a/frontend/marketplace/src/components/NavBar.vue b/frontend/marketplace/src/components/NavBar.vue
index c81d57eb0..8cb6be7df 100644
--- a/frontend/marketplace/src/components/NavBar.vue
+++ b/frontend/marketplace/src/components/NavBar.vue
@@ -5,16 +5,21 @@ import { toast } from "vue3-toastify";
 import { useRoute } from "vue-router";
 import SellectWalletModal from "@/components/SellectWalletModal.vue";
 import { getWalletFromType } from "@/utils/wallet-utils";
+import { useLogto } from "@logto/vue";
 
+const { signIn, isAuthenticated, signOut, fetchUserInfo, isLoading } =
+  useLogto();
 const router = useRoute();
 const address = ref();
 const addressVisible = ref();
 const showNav = ref(false);
 const selectedWallet = ref();
 const selectWalletModal = ref(false);
+const userDetails = ref();
 
 onMounted(() => {
   connect();
+  getUserInfo();
 });
 
 const openSelectWalletModal = () => {
@@ -71,6 +76,15 @@ const copyAddress = async () => {
   await navigator.clipboard.writeText(address.value);
   toast.success("Address copied to clipboard");
 };
+
+const onClickSignIn = () => signIn("http://localhost:5173/callback");
+
+const onClickSignOut = () => signOut("http://localhost:5173");
+
+const getUserInfo = async () => {
+  const details = await fetchUserInfo();
+  userDetails.value = details;
+};
 </script>
 
 <template>
@@ -107,54 +121,91 @@ const copyAddress = async () => {
         </div>
 
         <div class="flex flex-row justify-end">
-          <button
-            v-if="!address"
-            class="max-w-[220px] bg-lightBlack border border-borderBlack text-white text-title18 w-full rounded-xl h-full px-5 py-1"
-            @click="openSelectWalletModal"
-          >
-            {{ address || "Connect wallet" }}
-          </button>
           <!--          User Profile Dropdown-->
           <div class="dropdown dropdown-end">
-            <template v-if="address">
-              <label tabindex="0" class="btn btn-circle m-1">
-                <div class="avatar">
-                  <div
-                    class="w-[48px] rounded-full border-borderBlack bg-darkBlack border-[1.5px] p-2"
-                  >
-                    <img src="../assets/walletAvatar.png" />
-                  </div>
-                </div>
-              </label>
-            </template>
             <div
+              class="avatar mb-3 cursor-pointer"
+              tabindex="0"
+              v-if="isAuthenticated || address"
+            >
+              <div class="w-[55px] rounded-full bg-lightBlack">
+                <img class="p-4" src="../assets/walletAvatar.png" />
+              </div>
+            </div>
+            <button
+              v-if="!(isAuthenticated || address)"
+              tabindex="0"
+              class="min-w-[150px] bg-lightBlack border border-borderBlack text-white text-title18 w-full rounded-xl h-full px-5 py-1"
+            >
+              Login
+            </button>
+            <div
+              v-if="!(isAuthenticated || address)"
+              tabindex="0"
+              class="dropdown-content menu font-Inter divide-y divide-lightGray bg-avatarBlack rounded-sm items-center border-avatarBorder border-[1.5px]"
+            >
+              <div class="menu py-5 items-center mx-6 min-w-[180px]">
+                <button
+                  @click="openSelectWalletModal"
+                  class="btn nav-dropdown-button"
+                >
+                  Wallet
+                </button>
+                <button @click="onClickSignIn" class="btn nav-dropdown-button">
+                  Email
+                </button>
+              </div>
+            </div>
+            <div
+              v-if="isAuthenticated || address"
               tabindex="0"
               class="dropdown-content menu font-Inter divide-y divide-lightGray bg-avatarBlack rounded-sm items-center border-avatarBorder border-[1.5px]"
             >
-              <div class="menu py-5 items-center mx-6 min-w-[120px]">
+              <div class="menu py-5 items-center mx-6 min-w-[180px]">
                 <div class="avatar mb-3">
-                  <div class="w-[82px] rounded-full bg-lightBlack">
+                  <div class="w-[62px] rounded-full bg-lightBlack">
                     <img class="p-4" src="../assets/walletAvatar.png" />
                   </div>
                 </div>
-                <div class="flex flex-row cursor-pointer" @click="copyAddress">
+                <div
+                  class="flex flex-row cursor-pointer"
+                  @click="copyAddress"
+                  v-if="addressVisible"
+                >
                   <p class="text-title14 text-white">
-                    {{ addressVisible || "Connect wallet" }}
+                    {{ addressVisible }}
                   </p>
                   <img class="w-4 mx-3" src="../assets/copyIcon.svg" />
                 </div>
+                <p class="text-title14 text-white" v-if="userDetails?.username">
+                  {{ userDetails?.email }}
+                </p>
               </div>
-
               <div class="menu py-2 items-center w-full">
                 <a href="/certificate" class="btn nav-dropdown-button">
                   My Credits
                 </a>
+                <a
+                  href="/profile"
+                  class="btn nav-dropdown-button"
+                  v-if="isAuthenticated"
+                >
+                  Profile
+                </a>
                 <button
+                  v-if="address"
                   @click="disconnectWallet"
                   class="btn nav-dropdown-button"
                 >
                   Disconnect
                 </button>
+                <button
+                  v-if="isAuthenticated"
+                  @click="onClickSignOut"
+                  class="btn nav-dropdown-button"
+                >
+                  Logout
+                </button>
               </div>
             </div>
           </div>
@@ -192,20 +243,42 @@ const copyAddress = async () => {
         class="grid grid-cols-1 gap-8 p-5 w-full font-Inter text-title24 text-white"
       >
         <div>
-          <button
-            v-if="!address"
-            class="bg-buttonGray border border-greenPrimary w-full h-11 rounded-xl text-ellipsis overflow-hidden"
-            @click="openSelectWalletModal"
+          <div
+            class="dropdown dropdown-start w-full"
+            v-if="!(isAuthenticated || address)"
           >
-            {{ address || "Connect wallet" }}
-          </button>
+            <button
+              tabindex="0"
+              class="bg-buttonGray border border-greenPrimary w-full h-11 rounded-xl text-ellipsis overflow-hidden"
+            >
+              Login
+            </button>
+            <!--          Login Option dropdown-->
+            <div
+              tabindex="0"
+              class="dropdown-content menu font-Inter divide-y divide-lightGray bg-avatarBlack rounded-sm items-center border-avatarBorder border-[1.5px] w-full mt-2"
+            >
+              <div class="menu py-5 items-center mx-6 min-w-[180px]">
+                <button
+                  @click="openSelectWalletModal"
+                  class="btn nav-dropdown-button"
+                >
+                  Wallet
+                </button>
+                <button @click="onClickSignIn" class="btn nav-dropdown-button">
+                  Email
+                </button>
+              </div>
+            </div>
+          </div>
+
           <!--          User Profile Dropdown-->
           <div class="dropdown dropdown-start w-full">
-            <template v-if="address">
+            <template v-if="isAuthenticated || address">
               <button
                 class="bg-buttonGray border px-5 border-greenPrimary w-full h-11 rounded-xl text-ellipsis overflow-hidden"
               >
-                {{ addressVisible || "Connect wallet" }}
+                {{ addressVisible || userDetails?.email }}
               </button>
             </template>
             <div
@@ -218,24 +291,46 @@ const copyAddress = async () => {
                     <img class="p-4" src="../assets/walletAvatar.png" />
                   </div>
                 </div>
-                <div class="flex flex-row cursor-pointer" @click="copyAddress">
+                <div
+                  class="flex flex-row cursor-pointer"
+                  @click="copyAddress"
+                  v-if="address"
+                >
                   <p class="text-title14 text-white">
                     {{ addressVisible || "Connect wallet" }}
                   </p>
                   <img class="w-4 mx-3" src="../assets/copyIcon.svg" />
                 </div>
+                <p class="text-title14 text-white">
+                  {{ userDetails?.email }}
+                </p>
               </div>
 
               <div class="menu py-2 items-center w-full">
                 <a href="/certificate" class="btn nav-dropdown-button">
                   My Credits
                 </a>
+                <a
+                  href="/profile"
+                  class="btn nav-dropdown-button"
+                  v-if="isAuthenticated"
+                >
+                  Profile
+                </a>
                 <button
+                  v-if="address"
                   @click="disconnectWallet"
                   class="btn nav-dropdown-button"
                 >
                   Disconnect
                 </button>
+                <button
+                  @click="onClickSignOut"
+                  class="btn nav-dropdown-button"
+                  v-if="isAuthenticated"
+                >
+                  Logout
+                </button>
               </div>
             </div>
           </div>
diff --git a/frontend/marketplace/src/config/config.ts b/frontend/marketplace/src/config/config.ts
index dc9f9e680..e30770ebe 100644
--- a/frontend/marketplace/src/config/config.ts
+++ b/frontend/marketplace/src/config/config.ts
@@ -10,6 +10,8 @@ const GOOGLE_MAPS_API_KEY = import.meta.env.VITE_GOOGLE_MAPS_API_KEY;
 const REVISION_ID = import.meta.env.VITE_REVISION_ID;
 const ENVIRONMENT = import.meta.env.VITE_ENVIRONMENT;
 const ROLLBAR_ACCESS_TOKEN = import.meta.env.VITE_ROLLBAR_ACCESS_TOKEN;
+const LOGTO_ENDPOINT = import.meta.env.VITE_LOGTO_ENDPOINT;
+const LOGTO_APP_ID = import.meta.env.VITE_LOGTO_APP_ID;
 export {
   API_ENDPOINT,
   HTTPS_FILE_URL,
@@ -23,4 +25,6 @@ export {
   REVISION_ID,
   ENVIRONMENT,
   ROLLBAR_ACCESS_TOKEN,
+  LOGTO_ENDPOINT,
+  LOGTO_APP_ID,
 };
diff --git a/frontend/marketplace/src/main.ts b/frontend/marketplace/src/main.ts
index 7373b2cdd..40bdad2bf 100644
--- a/frontend/marketplace/src/main.ts
+++ b/frontend/marketplace/src/main.ts
@@ -19,9 +19,12 @@ import "./css/custom.css";
 import {
   API_ENDPOINT,
   ENVIRONMENT,
+  LOGTO_APP_ID,
+  LOGTO_ENDPOINT,
   REVISION_ID,
   ROLLBAR_ACCESS_TOKEN,
 } from "@/config/config";
+import { createLogto } from "@logto/vue";
 
 const cache = new InMemoryCache();
 const apolloClient = new ApolloClient({
@@ -30,7 +33,14 @@ const apolloClient = new ApolloClient({
 });
 
 const app = createApp(App);
+const config = {
+  endpoint: LOGTO_ENDPOINT,
+  appId: LOGTO_APP_ID,
+  scopes: ["email"],
+  resources: ["http://localhost:3000"],
+};
 
+app.use(createLogto, config);
 app.use(createPinia());
 app.use(router as any);
 app.use(VueAwesomePaginate);
diff --git a/frontend/marketplace/src/pages/CallbackView.vue b/frontend/marketplace/src/pages/CallbackView.vue
new file mode 100644
index 000000000..3ee42ba04
--- /dev/null
+++ b/frontend/marketplace/src/pages/CallbackView.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { useHandleSignInCallback } from "@logto/vue";
+import router from "@/router";
+import CustomSpinner from "@/components/CustomSpinner.vue";
+const { isLoading } = useHandleSignInCallback(() => {
+  router.push("/");
+});
+</script>
+<template>
+  <div class="h-[30vh] w-full flex">
+    <CustomSpinner :visible="isLoading" />
+  </div>
+</template>
diff --git a/frontend/marketplace/src/pages/UserProfile.vue b/frontend/marketplace/src/pages/UserProfile.vue
new file mode 100644
index 000000000..26723ce3d
--- /dev/null
+++ b/frontend/marketplace/src/pages/UserProfile.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { useLogto } from "@logto/vue";
+import { onMounted, ref } from "vue";
+
+const { fetchUserInfo } = useLogto();
+const userDetails = ref();
+
+onMounted(() => {
+  getUserInfo();
+});
+
+const getUserInfo = async () => {
+  const details = await fetchUserInfo();
+  userDetails.value = details;
+};
+</script>
+<template>
+  <div class="p-5 md:px-[10%] min-h-[50vh] font-Inter">
+    <h1 class="text-title18 md:text-title24 text-white mb-5">User Profile</h1>
+    <label class="label" for="email">
+      <span class="label-text text-white">Email</span>
+    </label>
+    <input
+      id="email"
+      type="text"
+      placeholder="Email"
+      :value="userDetails?.email"
+      class="input input-info w-full bg-mediumGray text-white"
+    />
+    <label class="label" for="email">
+      <span class="label-text text-white">Retirer name</span>
+    </label>
+    <input
+      id="email"
+      type="text"
+      placeholder="Username"
+      :value="userDetails?.username"
+      class="input input-info w-full bg-mediumGray text-white"
+    />
+    <label class="label" for="email">
+      <span class="label-text text-white">Retirer data</span>
+    </label>
+    <textarea
+      id="email"
+      type="text"
+      placeholder="Retirer data"
+      class="input input-info w-full bg-mediumGray"
+    />
+  </div>
+</template>
diff --git a/frontend/marketplace/src/router/index.ts b/frontend/marketplace/src/router/index.ts
index 9b5ab49b8..d7d615dda 100644
--- a/frontend/marketplace/src/router/index.ts
+++ b/frontend/marketplace/src/router/index.ts
@@ -5,6 +5,8 @@ import CertificatesAndCreditsPage from "@/pages/CertificatesAndCreditsPage.vue";
 import AuctionPage from "@/pages/AuctionPage.vue";
 import AuctionDetails from "@/pages/AuctionDetails.vue";
 import CertificatePage from "@/pages/CertificatePage.vue";
+import CallbackView from "@/pages/CallbackView.vue";
+import UserProfile from "@/pages/UserProfile.vue";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -40,6 +42,17 @@ const router = createRouter({
       component: CertificatePage,
       meta: { hideNavFooter: true }, //To hide nav and footer on this page
     },
+    {
+      path: "/callback",
+      name: "CallbackPage",
+      component: CallbackView,
+      meta: { hideNavFooter: true }, //To hide nav and footer on this page
+    },
+    {
+      path: "/profile",
+      name: "UserProfilePage",
+      component: UserProfile,
+    },
   ],
 });