diff --git a/frontend/src/components/Dialog/LogoutDialog.tsx b/frontend/src/components/Dialog/LogoutDialog.tsx
new file mode 100644
index 000000000..c53600796
--- /dev/null
+++ b/frontend/src/components/Dialog/LogoutDialog.tsx
@@ -0,0 +1,42 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogDescription,
+} from '@/components/ui/alert-dialog';
+
+interface LogoutDialogProps {
+  open: boolean;
+  onCancel: () => void;
+  onConfirm: () => void;
+}
+
+export function LogoutDialog({ open, onCancel, onConfirm }: LogoutDialogProps) {
+  return (
+    <AlertDialog open={open} onOpenChange={onCancel}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Log out</AlertDialogTitle>
+          <AlertDialogDescription>
+            Are you sure you want to log out? You’ll need to sign in again to
+            access your account.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction
+            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            onClick={onConfirm}
+          >
+            Logout
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
diff --git a/frontend/src/components/Navigation/Navbar/Navbar.tsx b/frontend/src/components/Navigation/Navbar/Navbar.tsx
index c565b7f6d..fd21a436d 100644
--- a/frontend/src/components/Navigation/Navbar/Navbar.tsx
+++ b/frontend/src/components/Navigation/Navbar/Navbar.tsx
@@ -8,6 +8,8 @@ import { convertFileSrc } from '@tauri-apps/api/core';
 import { FaceSearchDialog } from '@/components/Dialog/FaceSearchDialog';
 
 export function Navbar() {
+  const dispatch = useDispatch();
+
   const userName = useSelector(selectName);
   const userAvatar = useSelector(selectAvatar);
 
@@ -15,9 +17,11 @@ export function Navbar() {
   const isSearchActive = searchState.active;
   const queryImage = searchState.queryImage;
 
-  const dispatch = useDispatch();
+  /* ---------------- Avatar Normalization (Tauri + Logout Safe) ---------------- */
+  const displayName = userName || 'Guest';
+
   return (
-    <div className="sticky top-0 z-40 flex h-14 w-full items-center justify-between border-b pr-4 backdrop-blur">
+    <div className="bg-background sticky top-0 z-40 flex h-14 w-full items-center justify-between border-b pr-4 backdrop-blur">
       {/* Logo */}
       <div className="flex w-[256px] items-center justify-center">
         <a href="/" className="flex items-center space-x-2">
@@ -28,13 +32,13 @@ export function Navbar() {
 
       {/* Search Bar */}
       <div className="mx-auto flex max-w-md flex-1 justify-center px-4">
-        <div className="dark:bg-muted/50 flex w-full items-center gap-1 rounded-md bg-neutral-100 px-1 py-1">
+        <div className="bg-muted flex w-full items-center gap-1 rounded-md px-1 py-1">
           {/* Query Image */}
           {queryImage && (
             <div className="relative mr-2 ml-2">
               <img
                 src={
-                  queryImage?.startsWith('data:')
+                  queryImage.startsWith('data:')
                     ? queryImage
                     : convertFileSrc(queryImage)
                 }
@@ -44,9 +48,8 @@ export function Navbar() {
               {isSearchActive && (
                 <button
                   onClick={() => dispatch(clearSearch())}
-                  className="absolute -top-1 -right-1 flex h-3 w-3 items-center justify-center rounded-full bg-red-600 text-[10px] leading-none text-white"
-                  title="Close"
-                  aria-label="Close"
+                  className="absolute -top-1 -right-1 flex h-3 w-3 items-center justify-center rounded-full bg-red-600 text-[10px] text-white"
+                  aria-label="Clear search"
                 >
                   ✕
                 </button>
@@ -54,20 +57,18 @@ export function Navbar() {
             </div>
           )}
 
-          {/* Input */}
+          {/* Search Input */}
           <Input
             type="search"
             placeholder="Add to your search"
-            className="mr-2 flex-1 border-0 bg-neutral-200"
+            className="mr-2 flex-1 border-0 bg-transparent"
           />
 
-          {/* FaceSearch Dialog */}
-
+          {/* Face Search */}
           <FaceSearchDialog />
 
           <button
-            className="text-muted-foreground hover:bg-accent dark:hover:bg-accent/50 hover:text-foreground mx-1 cursor-pointer rounded-sm p-2"
-            title="Search"
+            className="text-muted-foreground hover:bg-accent hover:text-foreground mx-1 rounded-sm p-2 transition"
             aria-label="Search"
           >
             <Search className="h-4 w-4" />
@@ -78,15 +79,18 @@ export function Navbar() {
       {/* Right Side */}
       <div className="flex items-center space-x-4">
         <ThemeSelector />
+
         <div className="flex items-center space-x-2">
           <span className="hidden text-sm sm:inline-block">
-            Welcome <span className="text-muted-foreground">{userName}</span>
+            Welcome,&nbsp;
+            <span className="text-muted-foreground">{displayName}</span>
           </span>
-          <a href="/settings" className="p-2">
+
+          <a href="/profile" className="p-2">
             <img
               src={userAvatar || '/photo1.png'}
-              className="hover:ring-primary/50 h-8 w-8 cursor-pointer rounded-full transition-all hover:ring-2"
               alt="User avatar"
+              className="hover:ring-primary/50 h-8 w-8 cursor-pointer rounded-full transition hover:ring-2"
             />
           </a>
         </div>
diff --git a/frontend/src/components/ui/alert-dialog.tsx b/frontend/src/components/ui/alert-dialog.tsx
new file mode 100644
index 000000000..ec1f0dfba
--- /dev/null
+++ b/frontend/src/components/ui/alert-dialog.tsx
@@ -0,0 +1,155 @@
+import * as React from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+
+import { cn } from '@/lib/utils';
+import { buttonVariants } from '@/components/ui/button';
+
+/* -------------------------------------------------------------------------- */
+/*                                  Root                                      */
+/* -------------------------------------------------------------------------- */
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+/* -------------------------------------------------------------------------- */
+/*                                  Portal                                   */
+/* -------------------------------------------------------------------------- */
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    ref={ref}
+    className={cn('fixed inset-0 z-50 bg-black/50 backdrop-blur-sm', className)}
+    {...props}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+/* -------------------------------------------------------------------------- */
+/*                                 Content                                   */
+/* -------------------------------------------------------------------------- */
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'border-border bg-background fixed top-[50%] left-[50%] z-50 w-full max-w-lg translate-x-[-50%] translate-y-[-50%] rounded-xl border p-6 shadow-xl',
+        className,
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+/* -------------------------------------------------------------------------- */
+/*                                  Header                                   */
+/* -------------------------------------------------------------------------- */
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+    {...props}
+  />
+);
+AlertDialogHeader.displayName = 'AlertDialogHeader';
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold', className)}
+    {...props}
+  />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn('text-muted-foreground text-sm', className)}
+    {...props}
+  />
+));
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName;
+
+/* -------------------------------------------------------------------------- */
+/*                                  Footer                                   */
+/* -------------------------------------------------------------------------- */
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+      className,
+    )}
+    {...props}
+  />
+);
+AlertDialogFooter.displayName = 'AlertDialogFooter';
+
+/* -------------------------------------------------------------------------- */
+/*                                  Actions                                  */
+/* -------------------------------------------------------------------------- */
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants({ variant: 'destructive' }), className)}
+    {...props}
+  />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(buttonVariants({ variant: 'outline' }), className)}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+/* -------------------------------------------------------------------------- */
+/*                                  Exports                                  */
+/* -------------------------------------------------------------------------- */
+
+export {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogAction,
+  AlertDialogCancel,
+};
diff --git a/frontend/src/constants/routes.ts b/frontend/src/constants/routes.ts
index 7a8da5bb5..c47e40de0 100644
--- a/frontend/src/constants/routes.ts
+++ b/frontend/src/constants/routes.ts
@@ -9,4 +9,6 @@ export const ROUTES = {
   ALBUMS: 'albums',
   MEMORIES: 'memories',
   PERSON: 'person/:clusterId',
+  PROFILE: 'profile',
+  EDIT_PROFILE: 'profile/edit',
 };
diff --git a/frontend/src/features/onboardingSlice.ts b/frontend/src/features/onboardingSlice.ts
index 541fac94a..9e570e802 100644
--- a/frontend/src/features/onboardingSlice.ts
+++ b/frontend/src/features/onboardingSlice.ts
@@ -18,40 +18,54 @@ const initialState: OnboardingState = {
   avatar: localStorage.getItem('avatar'),
   name: localStorage.getItem('name') || '',
 };
+
 const onboardingSlice = createSlice({
   name: 'onboarding',
   initialState,
   reducers: {
     setAvatar(state, action: PayloadAction<string>) {
       state.avatar = action.payload;
+      localStorage.setItem('avatar', action.payload);
     },
+
     setName(state, action: PayloadAction<string>) {
       state.name = action.payload;
+      localStorage.setItem('name', action.payload);
+    },
+
+    /** ✅ LOGOUT / RESET */
+    resetOnboarding() {
+      localStorage.removeItem('avatar');
+      localStorage.removeItem('name');
+      return initialState;
     },
+
     markCompleted(state, action: PayloadAction<number>) {
-      const stepIndex = action.payload;
-      if (stepIndex >= 0 && stepIndex < state.stepStatus.length) {
-        state.stepStatus[stepIndex] = true;
-      } else {
-        console.warn(
-          `Invalid step index: ${stepIndex}. Valid range: 0-${state.stepStatus.length - 1}`,
-        );
+      const index = action.payload;
+      if (index >= 0 && index < state.stepStatus.length) {
+        state.stepStatus[index] = true;
       }
-      state.currentStepIndex = state.stepStatus.findIndex((status) => !status);
+      state.currentStepIndex = state.stepStatus.findIndex((s) => !s);
       state.currentStepName = STEP_NAMES[state.currentStepIndex] || '';
     },
+
     previousStep(state) {
-      const lastCompletedIndex = state.stepStatus.lastIndexOf(true);
-      if (lastCompletedIndex !== -1) {
-        state.stepStatus[lastCompletedIndex] = false;
+      const lastCompleted = state.stepStatus.lastIndexOf(true);
+      if (lastCompleted !== -1) {
+        state.stepStatus[lastCompleted] = false;
       }
-      state.currentStepIndex = state.stepStatus.findIndex((status) => !status);
+      state.currentStepIndex = state.stepStatus.findIndex((s) => !s);
       state.currentStepName = STEP_NAMES[state.currentStepIndex] || '';
     },
   },
 });
 
-export const { setAvatar, setName, markCompleted, previousStep } =
-  onboardingSlice.actions;
+export const {
+  setAvatar,
+  setName,
+  resetOnboarding,
+  markCompleted,
+  previousStep,
+} = onboardingSlice.actions;
 
 export default onboardingSlice.reducer;
diff --git a/frontend/src/pages/ProfilePage/EditProfilePage.tsx b/frontend/src/pages/ProfilePage/EditProfilePage.tsx
new file mode 100644
index 000000000..7e7a64c55
--- /dev/null
+++ b/frontend/src/pages/ProfilePage/EditProfilePage.tsx
@@ -0,0 +1,94 @@
+import { useDispatch, useSelector } from 'react-redux';
+import { selectAvatar, selectName } from '@/features/onboardingSelectors';
+import { setAvatar, setName } from '@/features/onboardingSlice';
+import { Input } from '@/components/ui/input';
+import { useState } from 'react';
+
+const EditProfilePage = () => {
+  const dispatch = useDispatch();
+
+  const currentName = useSelector(selectName);
+  const currentAvatar = useSelector(selectAvatar);
+
+  const [name, setLocalName] = useState(currentName || '');
+  const [avatar, setLocalAvatar] = useState(currentAvatar || '/photo1.png');
+
+  const handleSave = () => {
+    dispatch(setName(name));
+    dispatch(setAvatar(avatar));
+    window.location.href = '/profile';
+  };
+
+  return (
+    <div className="bg-background flex h-full justify-center px-4 py-8">
+      <div className="w-full max-w-2xl">
+        {/* Header */}
+        <div className="mb-6 flex items-center gap-4">
+          <a
+            href="/profile"
+            className="text-muted-foreground hover:text-foreground text-sm"
+          >
+            ← Back
+          </a>
+          <h1 className="text-2xl font-bold">Edit Profile</h1>
+        </div>
+
+        <div className="border-border bg-background rounded-xl border p-6">
+          {/* Avatar */}
+          <div className="mb-6 flex items-center gap-6">
+            <img
+              src={avatar}
+              className="h-24 w-24 rounded-full border object-cover"
+            />
+
+            <input
+              type="file"
+              accept="image/*"
+              id="avatar-upload"
+              className="hidden"
+              onChange={(e) => {
+                const file = e.target.files?.[0];
+                if (!file) return;
+                setLocalAvatar(URL.createObjectURL(file));
+              }}
+            />
+
+            <button
+              onClick={() => document.getElementById('avatar-upload')?.click()}
+              className="hover:bg-accent rounded-md border px-4 py-2 text-sm"
+            >
+              Change Avatar
+            </button>
+          </div>
+
+          {/* Name */}
+          <div className="mb-6">
+            <label className="mb-1 block text-sm font-medium">
+              Display Name
+            </label>
+            <Input
+              value={name}
+              onChange={(e) => setLocalName(e.target.value)}
+            />
+          </div>
+
+          {/* Actions */}
+          <div className="flex justify-end gap-3">
+            <a href="/profile">
+              <button className="rounded-md border px-4 py-2">Cancel</button>
+            </a>
+
+            <button
+              onClick={handleSave}
+              className="bg-primary rounded-md px-4 py-2 text-white"
+            >
+              Save Changes
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EditProfilePage;
diff --git a/frontend/src/pages/ProfilePage/ProfilePage.tsx b/frontend/src/pages/ProfilePage/ProfilePage.tsx
new file mode 100644
index 000000000..765231b3a
--- /dev/null
+++ b/frontend/src/pages/ProfilePage/ProfilePage.tsx
@@ -0,0 +1,119 @@
+import { useDispatch, useSelector } from 'react-redux';
+import { useState } from 'react';
+import { selectAvatar, selectName } from '@/features/onboardingSelectors';
+import { resetOnboarding } from '@/features/onboardingSlice';
+import { LogoutDialog } from '@/components/Dialog/LogoutDialog';
+import { useTheme } from '@/contexts/ThemeContext';
+
+const ProfilePage = () => {
+  const dispatch = useDispatch();
+  const { theme } = useTheme();
+
+  const userName = useSelector(selectName);
+  const userAvatar = useSelector(selectAvatar);
+
+  const [showLogout, setShowLogout] = useState(false);
+
+  const completion = (userAvatar ? 50 : 0) + (userName ? 50 : 0);
+
+  const handleLogout = () => {
+    dispatch(resetOnboarding());
+    window.location.href = '/';
+  };
+
+  return (
+    <div className="bg-background text-foreground flex h-full justify-center overflow-y-auto px-4 py-8">
+      <div className="w-full max-w-3xl">
+        {/* Header */}
+        <div className="mb-6 flex items-center justify-between">
+          <div>
+            <p className="text-muted-foreground text-xs font-semibold tracking-[0.2em] uppercase">
+              Your Account
+            </p>
+            <h1 className="text-2xl font-bold">Profile</h1>
+          </div>
+
+          <span className="border-border bg-muted text-muted-foreground rounded-full border px-3 py-1 text-xs">
+            Logged in
+          </span>
+        </div>
+
+        {/* Card */}
+        <div className="border-border bg-background rounded-2xl border p-6 shadow-lg sm:p-8">
+          <div className="flex flex-col gap-6 sm:flex-row sm:items-center">
+            {/* Avatar */}
+            <div className="relative">
+              <div className="border-border bg-muted h-24 w-24 rounded-full border-4 shadow-xl ring-2 ring-indigo-500/50">
+                <img
+                  src={userAvatar || '/photo1.png'}
+                  alt="User avatar"
+                  className="h-full w-full rounded-full object-cover"
+                />
+              </div>
+            </div>
+
+            {/* Info */}
+            <div className="flex-1">
+              <h2 className="text-xl font-semibold">
+                {userName || 'Guest User'}
+              </h2>
+              <p className="text-muted-foreground mt-1 text-sm">
+                Manage your personal info, security, and preferences.
+              </p>
+
+              {/* Meta */}
+              <div className="mt-4 flex flex-wrap gap-2 text-xs">
+                <span className="border-border bg-muted rounded-full border px-3 py-1">
+                  Profile completion: {completion}%
+                </span>
+
+                <span className="border-border bg-muted rounded-full border px-3 py-1">
+                  Theme: {theme}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          {/* Divider */}
+          <div className="border-border my-6 border-t" />
+
+          {/* Actions */}
+          <div className="grid gap-3 sm:grid-cols-3">
+            <a
+              href="/profile/edit"
+              className="border-border bg-muted hover:bg-accent flex items-center justify-between rounded-xl border px-4 py-3 text-sm font-medium"
+            >
+              <span>Edit Profile</span>
+              <span className="text-muted-foreground text-xs">⌘E</span>
+            </a>
+
+            <a
+              href="/settings"
+              className="border-border bg-muted hover:bg-accent flex items-center justify-between rounded-xl border px-4 py-3 text-sm font-medium"
+            >
+              <span>Account Settings</span>
+              <span className="text-muted-foreground text-xs">⚙</span>
+            </a>
+
+            <button
+              onClick={() => setShowLogout(true)}
+              className="border-destructive/40 bg-destructive/5 text-destructive hover:bg-destructive/15 flex items-center justify-between rounded-xl border px-4 py-3 text-sm font-medium"
+            >
+              <span>Logout</span>
+              <span className="text-xs">⟶</span>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Logout Dialog */}
+      <LogoutDialog
+        open={showLogout}
+        onCancel={() => setShowLogout(false)}
+        onConfirm={handleLogout}
+      />
+    </div>
+  );
+};
+
+export default ProfilePage;
diff --git a/frontend/src/routes/AppRoutes.tsx b/frontend/src/routes/AppRoutes.tsx
index 22153edbb..596140846 100644
--- a/frontend/src/routes/AppRoutes.tsx
+++ b/frontend/src/routes/AppRoutes.tsx
@@ -9,6 +9,8 @@ import { MyFav } from '@/pages/Home/MyFav';
 import { AITagging } from '@/pages/AITagging/AITagging';
 import { PersonImages } from '@/pages/PersonImages/PersonImages';
 import { ComingSoon } from '@/pages/ComingSoon/ComingSoon';
+import ProfilePage from '@/pages/ProfilePage/ProfilePage';
+import EditProfilePage from '@/pages/ProfilePage/EditProfilePage';
 
 export const AppRoutes: React.FC = () => {
   return (
@@ -23,6 +25,8 @@ export const AppRoutes: React.FC = () => {
         <Route path={ROUTES.ALBUMS} element={<ComingSoon />} />
         <Route path={ROUTES.MEMORIES} element={<ComingSoon />} />
         <Route path={ROUTES.PERSON} element={<PersonImages />} />
+        <Route path={ROUTES.PROFILE} element={<ProfilePage />} />
+        <Route path={ROUTES.EDIT_PROFILE} element={<EditProfilePage />} />
       </Route>
     </Routes>
   );