diff --git a/src/assets/icons/dollar.png b/src/assets/icons/dollar.png
new file mode 100644
index 0000000000000000000000000000000000000000..ed7c58b29cd15ec18e850a5b7c463e883d5f3972
Binary files /dev/null and b/src/assets/icons/dollar.png differ
diff --git a/src/assets/icons/fire.png b/src/assets/icons/fire.png
new file mode 100644
index 0000000000000000000000000000000000000000..248d2434e1b7712b097ed38ef585596704e455e6
Binary files /dev/null and b/src/assets/icons/fire.png differ
diff --git a/src/components/BaseComponents/Menu.vue b/src/components/BaseComponents/Menu.vue
index 1b5a85fab29f79d7defebcf13d54a8cd5a509eb5..35f6e8f10a7df8efbb4aec5e020496130fd3f1cf 100644
--- a/src/components/BaseComponents/Menu.vue
+++ b/src/components/BaseComponents/Menu.vue
@@ -31,7 +31,7 @@
                   Username
                 </a>
                 <ul class="dropdown-menu bg-success dropdown-username-content">
-                  <li><a class="dropdown-item text-white dropdown-username-link" href="/news" @click="toUserProfile">User Profile</a></li>
+                  <li><router-link class="dropdown-item text-white dropdown-username-link"  to="/profile">User Profile</router-link></li>
                   <li><a class="dropdown-item text-white dropdown-username-link" href="/news" @click="toSetting">Setting</a></li>
                   <li><a class="dropdown-item text-white dropdown-username-link" href="/news" @click="toFeedback">Feedback</a></li>
                 </ul>
@@ -81,7 +81,7 @@ function toFeedback(){
 }
 
 function toUserProfile(){
-  router.push('/news')
+  router.push('/profile')
 }
 
 
diff --git a/src/components/UserProfile/UserProfileLayout.vue b/src/components/UserProfile/UserProfileLayout.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4341b00433b67b37db58f08599cd3a8ce696ceac
--- /dev/null
+++ b/src/components/UserProfile/UserProfileLayout.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+
+import Menu from "@/components/BaseComponents/Menu.vue";
+import Footer from "@/components/BaseComponents/Footer.vue";
+
+let points = 0;
+let streak = 0;
+</script>
+
+<template>
+  <Menu></Menu>
+    <div class="container text-center">
+    <div class="row">
+      <div class="col">
+        <img src="/src/assets/userprofile.png" class="img-fluid">
+        <p class="h2">Username</p>
+        <p><a class="link-dark" href="#">Edit profile</a></p>
+      </div>
+      <div class="row">
+      <div class="col">
+        Streak
+      </div>
+      </div>
+      <div class="row">
+      <div class="col">
+        <img src="/src/assets/icons/dollar.png" class=" w-10" alt="dollar">
+        <p>Points: + </p>
+      </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col">
+        total points earned
+      </div>
+      <div class="col">
+        total badges earned
+      </div>
+    </div>
+    <div class="row">
+      <div class="col">
+        History
+      </div>
+    </div>
+    <div class="row">
+      <div class="col">
+        Your Badges
+      </div>
+    </div>
+  </div>
+  <Footer></Footer>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index 5f3a683a89ec1edd6c1e2d20c2b31f46102ff1e1..33f8b29fb3109eb4e12723fbd350178a6439d0cd 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -2,6 +2,7 @@
 import { createRouter, createWebHistory } from 'vue-router';
 import LoginView from '../views/Authentication/LoginView.vue';
 import { useUserInfoStore } from '@/stores/UserStore';
+import UserProfileView from "@/views/User/UserProfileView.vue";
 
 const routes = [
   {
@@ -48,6 +49,11 @@ const routes = [
     name: 'login',
     component: LoginView,
   },
+  {
+    path: '/profile',
+    name: 'profile',
+    component: UserProfileView
+  },
   {
     path: '/:pathMatch(.*)*',
     redirect: { name: 'not-found' },
diff --git a/src/views/User/UserProfileView.vue b/src/views/User/UserProfileView.vue
new file mode 100644
index 0000000000000000000000000000000000000000..85e9882866797433edfa76cc3fbf4368796432cf
--- /dev/null
+++ b/src/views/User/UserProfileView.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+
+import UserProfileLayout from "@/components/UserProfile/UserProfileLayout.vue";
+</script>
+
+<template>
+<UserProfileLayout></UserProfileLayout>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file