diff --git a/src/ss_frontend/src/components/Navbar.jsx b/src/ss_frontend/src/components/Navbar.jsx
index 7cf65bb..5d2284e 100644
--- a/src/ss_frontend/src/components/Navbar.jsx
+++ b/src/ss_frontend/src/components/Navbar.jsx
@@ -83,7 +83,12 @@ const Navbar = () => {
             className="btn btn-ghost btn-circle avatar"
           >
             <div className="w-10 rounded-full flex justify-center items-center">
-              <AiOutlineUser alt="profile" className="text-4xl pl-1" />
+              <Link
+                to={"/profile"}
+                className="flex flex-col justify-center items-center cursor-pointer hover:mb-2 hover:transition-all"
+              >
+                <AiOutlineUser alt="profile" className="text-4xl pl-1" />
+              </Link>
             </div>
           </div>
         </div>
diff --git a/src/ss_frontend/src/pages/ProfileDetailPage.jsx b/src/ss_frontend/src/pages/ProfileDetailPage.jsx
index 508d729..00dc82b 100644
--- a/src/ss_frontend/src/pages/ProfileDetailPage.jsx
+++ b/src/ss_frontend/src/pages/ProfileDetailPage.jsx
@@ -1,29 +1,70 @@
-import { useQuery } from "@tanstack/react-query";
-import React, { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import React, { useEffect } from "react";
+import { AiOutlineUser } from "react-icons/ai";
+import { Link, useNavigate } from "react-router-dom";
 import { useAuth } from "../hooks/UseAuth";
+import { useQuery } from "@tanstack/react-query";
+import { useState } from "react";
+import profilePlaceholder from "../assets/profilePlaceholder.jpg";
 
 export default function ProfileDetailPage() {
-  const { user, getUser } = useAuth();
+  const { isAuthenticated, getUser, user } = useAuth();
+  const navigate = useNavigate();
   const { data, isLoading, error } = useQuery({
     queryKey: ["getUser", user],
     queryFn: getUser,
   });
-  const navigate = useNavigate();
+  const [name, setName] = useState("");
   const [username, setUsername] = useState("");
-
+  const [pfp, setPfp] = useState("");
   useEffect(() => {
     console.log(data);
-    
-    if (!isLoading) {
+
+    if (!isLoading && data != undefined) {
       if (data.ok) {
         setUsername(data.ok.username);
+        setName(data.ok.name);
+        setPfp(data.ok.profileUrl);
       } else {
-        navigate(`/profile-form`);
+        console.log(data);
+
+        setName("Something's wrong");
       }
     }
   }, [data, isLoading]);
 
-  // masukin post
-  return <div className="p-32">{username}</div>;
+  return (
+    <>
+      <div className=" border-gray-200 border rounded-xl flex-col flex max-w-md items-center w-[20vw]">
+        <div className="border-2 rounded-full border-neutral-500 mt-4">
+          {isAuthenticated ? (
+            <img
+              id="profileImage"
+              src={pfp === "" ? profilePlaceholder : pfp}
+              alt="Upload a file"
+              className="object-cover w-24 h-24 rounded-full"
+            />
+          ) : (
+            <AiOutlineUser className="text-6xl"></AiOutlineUser>
+          )}
+        </div>
+        <div className="mt-4 mb-4 pr-8 pl-8 flex flex-col items-center">
+          {/* {isAuthenticated} */}
+          {isAuthenticated ? (
+            <>
+              <div className="font-semibold text-2xl">{name}</div>
+              <p className="text-lg">{"@" + username}</p>
+              <button className="btn btn-error">Log out</button>
+            </>
+          ) : (
+            <Link
+              to="/profile"
+              className="btn btn-wide btn-outline btn-primary"
+            >
+              Login using internet identity
+            </Link>
+          )}
+        </div>
+      </div>
+    </>
+  );
 }
diff --git a/src/ss_frontend/src/pages/ProfilePage.jsx b/src/ss_frontend/src/pages/ProfilePage.jsx
index 7fbc595..3a455a5 100644
--- a/src/ss_frontend/src/pages/ProfilePage.jsx
+++ b/src/ss_frontend/src/pages/ProfilePage.jsx
@@ -20,7 +20,7 @@ export default function ProfilePage() {
   return (
     <>
       <MainTemplate>
-        {isAuthenticated ? <ProfileDetailPage /> : <NeedAuth />}
+        {isAuthenticated ? <div className="p-5 pt-32"><ProfileDetailPage /></div> : <NeedAuth />}
       </MainTemplate>
     </>
   );