diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 4f4c0ba..159e5f4 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -17894,7 +17894,7 @@
 				"tsserver": "bin/tsserver"
 			},
 			"engines": {
-				"node": ">=14.17"
+				"node": ">=4.2.0"
 			}
 		},
 		"node_modules/unbox-primitive": {
diff --git a/frontend/src/components/buttons/LogOutButton.jsx b/frontend/src/components/buttons/LogOutButton.jsx
new file mode 100644
index 0000000..2e663d7
--- /dev/null
+++ b/frontend/src/components/buttons/LogOutButton.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+export default function LogOutButton({ onClick }) {
+	return (
+		<button
+			type="button"
+			className="bg-mv-white w-100% h-100% items-center justify-center"
+			onClick={onClick}
+		>
+			<div className="font-poppins text-base font-medium leading-6 text-center">
+				Log Out
+			</div>
+		</button>
+	);
+}
diff --git a/frontend/src/components/cards/ProfilePopUpCard.jsx b/frontend/src/components/cards/ProfilePopUpCard.jsx
new file mode 100644
index 0000000..4fdf75b
--- /dev/null
+++ b/frontend/src/components/cards/ProfilePopUpCard.jsx
@@ -0,0 +1,89 @@
+import React from 'react';
+import { useNavigate } from 'react-router';
+import HistoryIcon from '@mui/icons-material/History';
+import PersonIcon from '@mui/icons-material/Person';
+import LogOutButton from '../buttons/LogOutButton';
+
+export default function ProfilePopUpCard({ bidderID }) {
+	const navigate = useNavigate();
+
+	const handleLogOut = async () => {
+		try {
+			localStorage.removeItem('userInfo');
+			navigate('/');
+		} catch (err) {
+			// eslint-disable-next-line no-console
+			console.error(
+				err.response ? err.response.data.error : 'An unknown error occurred'
+			);
+		}
+	};
+	return (
+		<div className="flex w-[362px] h-[409px] rounded-2xl shadow-2xl m-5 overflow-hidden relative bg-mv-white">
+			<div className="w-full flex">
+				<div className="w-full px-9 py-7">
+					<div className="flex flex-col text-gray-700 text-base text-xxs">
+						<div className="flex flex-row justify-center">
+							<div>
+								<div className="flex flex-col items-center">
+									<div className="flex flex-col justify-center">
+										<span className="font-poppins text-xl font-semibold leading-10 text-center bg-gray-600">
+											Bidder ID: #123456
+										</span>
+										<span>{bidderID}</span>
+									</div>
+								</div>
+							</div>
+						</div>
+						<hr className="border-solid border border-black border-opacity-30 my-4" />
+						<div className="flex flex-row justify-between py-3">
+							<div>
+								<div className="flex flex-row items-center px-5">
+									<PersonIcon style={{ fontSize: '39px' }} className="mr-2" />
+									<div className="flex flex-col justify-between px-6">
+										<span className="font-poppins text-base font-medium leading-6 text-left">
+											User Profile
+										</span>
+										<a
+											href="/onboard"
+											className="font-poppins text-xs font-normal leading-5 text-left text-blue-600 underline hover:text-blue-800"
+										>
+											Click to see your user details, notification settings, and
+											watchlist
+										</a>
+									</div>
+								</div>
+							</div>
+						</div>
+						<div className="flex flex-row justify-between">
+							<div>
+								<div className="flex flex-row items-center px-5">
+									<HistoryIcon style={{ fontSize: '39px' }} className="mr-2" />
+									<div className="flex flex-col justify-between px-6 py-4">
+										<span className="font-poppins text-base font-medium leading-6 text-left">
+											Bid History
+										</span>
+										<a
+											href="/onboard"
+											className="font-poppins text-xs font-normal leading-5 text-left text-blue-600 underline hover:text-blue-800"
+										>
+											Click to see your current and past bids
+										</a>
+									</div>
+								</div>
+							</div>
+						</div>
+						<hr className="border-solid border border-black border-opacity-30 my-4" />
+						<div className="flex flex-row justify-center my-4">
+							<div>
+								<div className="flex flex-col items-center">
+									<LogOutButton onClick={handleLogOut} />
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}
diff --git a/frontend/src/components/navBars/NavBar.jsx b/frontend/src/components/navBars/NavBar.jsx
index 963abb9..350d0f0 100644
--- a/frontend/src/components/navBars/NavBar.jsx
+++ b/frontend/src/components/navBars/NavBar.jsx
@@ -6,6 +6,7 @@ import PersonIcon from '@mui/icons-material/Person';
 import PersonOutlinedIcon from '@mui/icons-material/PersonOutlined';
 import logo from '../../assets/microvan_logo.svg';
 import useAuth from '../../hooks/useAuth';
+import ProfilePopUpCard from '../cards/ProfilePopUpCard';
 
 export default function NavBar() {
 	const [notificationHover, setNotificationHover] = useState(false);
@@ -93,6 +94,18 @@ export default function NavBar() {
 					) : (
 						<PersonOutlinedIcon className="w-[35px] h-[35px] text-mv-black hover:cursor-pointer" />
 					)}
+					{personHover && (
+						<div
+							style={{
+								position: 'fixed',
+								bottom: '230',
+								right: '10px',
+								zIndex: 100,
+							}}
+						>
+							<ProfilePopUpCard />
+						</div>
+					)}
 				</div>
 			</div>
 		</div>