diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 6a3468f..8b17e54 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -6,12 +6,13 @@ import LoginPage from "./components/authentication/LoginPage";
 import SignUpPage from "./components/authentication/SignUpPage";
 import NavBar from "./components/navigations/Navbar";
 import Home from "./components/Home";
-import ProfileUpdate from "./components/ProfileUpdatePage";
 import Calendar from "./components/calendar/calendar";
 import KanbanBoard from "./components/kanbanBoard/kanbanBoard";
 import IconSideNav from "./components/navigations/IconSideNav";
 import Eisenhower from "./components/eisenhowerMatrix/Eisenhower";
 import PrivateRoute from "./PrivateRoute";
+import ProfileUpdatePage from "./components/profilePage";
+
 
 const App = () => {
   const location = useLocation();
@@ -30,8 +31,8 @@ const App = () => {
               <Route exact path="/tasks" element={<KanbanBoard />} />
             </Route>
             <Route path="/testAuth" element={<TestAuth />} />
-            <Route exact path="/update_profile" element={<PrivateRoute />}>
-              <Route exact path="/update_profile" element={<ProfileUpdate />} />
+            <Route exact path="/profile" element={<PrivateRoute />}>
+              <Route exact path="/profile" element={<ProfileUpdatePage />} />
             </Route>
             <Route exact path="/calendar" element={<PrivateRoute />}>
               <Route exact path="/calendar" element={<Calendar />} />
diff --git a/frontend/src/components/ProfileUpdatePage.jsx b/frontend/src/components/ProfileUpdateComponent.jsx
similarity index 97%
rename from frontend/src/components/ProfileUpdatePage.jsx
rename to frontend/src/components/ProfileUpdateComponent.jsx
index 6985851..74da41f 100644
--- a/frontend/src/components/ProfileUpdatePage.jsx
+++ b/frontend/src/components/ProfileUpdateComponent.jsx
@@ -1,7 +1,7 @@
 import React, { useState, useRef } from "react";
 import { ApiUpdateUserProfile } from "../api/UserProfileApi";
 
-function ProfileUpdate() {
+function ProfileUpdateComponent() {
   const [file, setFile] = useState(null);
   const [username, setUsername] = useState("");
   const [fullName, setFullName] = useState("");
@@ -101,4 +101,4 @@ function ProfileUpdate() {
   );
 }
 
-export default ProfileUpdate;
+export default ProfileUpdateComponent;
diff --git a/frontend/src/components/navigations/Navbar.jsx b/frontend/src/components/navigations/Navbar.jsx
index 6910405..0c95389 100644
--- a/frontend/src/components/navigations/Navbar.jsx
+++ b/frontend/src/components/navigations/Navbar.jsx
@@ -4,8 +4,8 @@ import axiosapi from "../../api/AuthenticationApi";
 import { useAuth } from "../../hooks/authentication/IsAuthenticated"; 
 
 const settings = {
-  Profile: "/update_profile",
-  Account: "/account",
+  Profile: '/profile',
+  Account: '/account',
 };
 
 function NavBar() {
diff --git a/frontend/src/components/profilePage.jsx b/frontend/src/components/profilePage.jsx
new file mode 100644
index 0000000..2f00049
--- /dev/null
+++ b/frontend/src/components/profilePage.jsx
@@ -0,0 +1,146 @@
+import * as React from "react";
+import ProfileUpdateComponent from "./ProfileUpdateComponent";
+
+function ProfileUpdatePage() {
+  return (
+    <div>
+      <div className="stats shadow">
+        <div className="stat">
+          <div className="stat-title truncate">Username</div>
+          <div className="stat-value truncate">Sirin</div>
+          <div className="stat-desc truncate">User ID</div>
+          <div className="stat-figure text-secondary">
+            <div className="avatar online">
+              <div className="w-20 rounded-full">
+                <img src="https://us-tuna-sounds-images.voicemod.net/f322631f-689a-43ac-81ab-17a70f27c443-1692187175560.png" />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="stat">
+          <div className="stat-title">Health</div>
+          <div className="stat-value flex truncate">
+            234/3213
+            <div className="stat-figure text-secondary px-2">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="red" viewBox="0 0 24 24" className="inline-block w-8 h-8">
+                <path d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0"></path>
+              </svg>
+            </div>
+          </div>
+          <div className="stat-desc py-2">32% Remain</div>
+          <progress className="progress progress-error w-56" value={20} max="100"></progress>
+        </div>
+
+        <div className="stat">
+          <div className="stat-title truncate">Level</div>
+          <div className="stat-value flex">
+            1
+            <div className="stat-figure text-secondary px-2">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="#3abff8"
+                viewBox="0 0 24 24"
+                className="inline-block w-8 h-8">
+                <path d="M13 10V3L4 14h7v7l9-11h-7z"></path>
+              </svg>
+            </div>
+          </div>
+          <div className="stat-desc py-2">3213/321312321 points</div>
+          <progress class="progress progress-info w-36" value="10" max="100"></progress>
+        </div>
+
+        <div className="stat">
+          <div className="stat-title">Gold</div>
+          <div className="stat-value flex truncate">
+            331412421
+            <div className="stat-figure text-secondary px-2">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                className="inline-block w-8 h-8 stroke-current">
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  stroke="gold"
+                  d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"></path>
+              </svg>
+            </div>
+          </div>
+          <div className="stat-desc py-2">Top 12% of Global Ranking</div>
+          <progress className="progress progress-warning w-56" value={20} max="100"></progress>
+        </div>
+      </div>
+
+      <div className="card bg-base-100 shadow">
+        <div class="card-body">
+          <h2 class="card-title">About me</h2>
+          <div class="card-actions justify-end"></div>
+          <textarea class="textarea textarea-bordered textarea-lg w-full" disabled>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum dolores recusandae, officiis consequuntur
+            nam, non ab commodi totam mollitia iusto nemo voluptatum error aliquam similique perspiciatis, eligendi
+            nulla. Animi, sit?
+          </textarea>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-2 grid-rows-2 gap-4 my-2">
+        <div className="col-span-full">
+          <div className="card bg-base-100 shadow">
+            <div class="card-body">
+              <h2 class="card-title">Overall Statistics</h2>
+              <div class="card-actions justify-end"></div>
+            </div>
+          </div>
+        </div>
+        <div className="col-start-2 row-start-2">
+          <div className="card bg-base-100 shadow">
+            <div class="card-body">
+              <h2 class="card-title">Achievements</h2>
+              <div class="card-actions justify-end"></div>
+            </div>
+          </div>
+        </div>
+        <div className="col-start-1 row-start-2">
+          <div className="card bg-base-100 shadow">
+            <div class="card-body">
+              <h2 class="card-title">Friends</h2>
+              <div class="card-actions justify-end"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="fixed bottom-4 right-4">
+        <ul className="menu menu-horizontal bg-base-200 rounded-box">
+          <li>
+            <a onClick={() => document.getElementById("my_modal_4").showModal()}>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-5 w-5"
+                fill="currentColor"
+                viewBox="0 0 16 16"
+                stroke="currentColor">
+                <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z" />
+              </svg>
+              <p className="text-xl font-bold">Edit</p>
+            </a>
+          </li>
+        </ul>
+      </div>
+
+      {/* Modal */}
+      <dialog id="my_modal_4" className="modal">
+        <div className="modal-box w-11/12 max-w-5xl flex flex-col">
+          <form method="dialog">
+            <ProfileUpdateComponent />
+            <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+          </form>
+        </div>
+      </dialog>
+    </div>
+  );
+}
+export default ProfileUpdatePage;