added image upload feature

package.json

@@ -10,6 +10,7 @@
         "preview": "vite preview"
     },
     "dependencies": {
+        "driver.js": "^1.4.0",
         "firebase": "^12.9.0",
         "libsodium-wrappers": "^0.8.2",
         "react": "^19.2.0",

src/App.css

@@ -754,6 +754,114 @@
     text-transform: uppercase;
 }
 
+.settings-edit-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border-radius: 10px;
+    border: none;
+    background: #f0fdf4;
+    color: #22c55e;
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: background 0.15s;
+}
+
+.settings-edit-btn:hover {
+    background: #dcfce7;
+}
+
+.edit-modal-title {
+    font-size: 1.2rem;
+    font-weight: 700;
+    color: #1a1a1a;
+    margin: 0 0 1rem;
+    text-align: center;
+    font-family: "Sniglet", system-ui;
+}
+
+.edit-modal-avatar {
+    position: relative;
+    width: 80px;
+    height: 80px;
+    margin: 0 auto 0.5rem;
+    cursor: pointer;
+    border-radius: 50%;
+    overflow: hidden;
+}
+
+.edit-modal-avatar-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 50%;
+}
+
+.edit-modal-avatar-placeholder {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #86efac 0%, #22c55e 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 2rem;
+    font-weight: 700;
+    color: #fff;
+    font-family: "Sniglet", system-ui;
+}
+
+.edit-modal-avatar-overlay {
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.35);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    border-radius: 50%;
+}
+
+.edit-modal-remove-photo {
+    display: block;
+    margin: 0 auto 0.5rem;
+    background: none;
+    border: none;
+    color: #ef4444;
+    font-size: 0.75rem;
+    cursor: pointer;
+    padding: 0.25rem 0.5rem;
+}
+
+.edit-modal-remove-photo:hover {
+    text-decoration: underline;
+}
+
+.edit-modal-save {
+    flex: 1;
+    padding: 0.65rem;
+    border: none;
+    border-radius: 12px;
+    font-size: 0.9rem;
+    font-weight: 600;
+    font-family: inherit;
+    cursor: pointer;
+    background: #22c55e;
+    color: #fff;
+    transition: background 0.15s;
+}
+
+.edit-modal-save:hover:not(:disabled) {
+    background: #16a34a;
+}
+
+.edit-modal-save:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
 .settings-section {
     margin-bottom: 1rem;
 }
@@ -932,6 +1040,30 @@
     cursor: not-allowed;
 }
 
+/* See Tutorial */
+.settings-tutorial-btn {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 0.875rem 1.125rem;
+    margin-bottom: 0.75rem;
+    font-size: 0.9375rem;
+    font-weight: 600;
+    color: var(--color-primary, #22c55e);
+    background: var(--color-surface, #fff);
+    border: none;
+    border-radius: 14px;
+    cursor: pointer;
+    transition: background 0.2s;
+    font-family: "Sniglet", system-ui;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+}
+.settings-tutorial-btn:hover {
+    background: var(--color-accent-light, #dcfce7);
+}
+
 /* Clear Data */
 .settings-clear-btn {
     width: 100%;
@@ -1655,6 +1787,15 @@
 }
 
 /* -- Settings buttons -- */
+[data-theme="dark"] .settings-tutorial-btn {
+    background: #1a1a1a;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+[data-theme="dark"] .settings-tutorial-btn:hover {
+    background: rgba(74, 222, 128, 0.08);
+}
+
 [data-theme="dark"] .settings-clear-btn {
     background: #1a1a1a;
     color: #f87171;
@@ -1682,6 +1823,19 @@
     color: #fff;
 }
 
+[data-theme="dark"] .settings-edit-btn {
+    background: rgba(34, 197, 94, 0.15);
+    color: #4ade80;
+}
+
+[data-theme="dark"] .settings-edit-btn:hover {
+    background: rgba(34, 197, 94, 0.25);
+}
+
+[data-theme="dark"] .edit-modal-title {
+    color: #e8f5e8;
+}
+
 /* -- Settings divider -- */
 [data-theme="dark"] .settings-divider {
     background: #2a2a2a;
@@ -1872,3 +2026,215 @@
     border-color: rgba(74, 222, 128, 0.3);
     box-shadow: 0 1px 8px rgba(74, 222, 128, 0.1);
 }
+
+/* ============================
+   WELCOME MODAL
+   ============================ */
+.welcome-modal-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.55);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    padding: 1.5rem;
+    animation: welcome-fade-in 0.3s ease;
+}
+
+@keyframes welcome-fade-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes welcome-slide-up {
+    from {
+        opacity: 0;
+        transform: translateY(24px) scale(0.96);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+.welcome-modal {
+    background: var(--color-surface, #ffffff);
+    border-radius: 20px;
+    padding: 2.5rem 2rem 2rem;
+    max-width: 400px;
+    width: 100%;
+    text-align: center;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
+    animation: welcome-slide-up 0.35s ease;
+}
+
+.welcome-modal-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 72px;
+    height: 72px;
+    margin: 0 auto 1.25rem;
+    background: var(--color-accent-light, #dcfce7);
+    border-radius: 50%;
+    color: var(--color-primary, #22c55e);
+}
+
+.welcome-modal-title {
+    font-family: "Sniglet", system-ui;
+    font-size: 1.375rem;
+    font-weight: 700;
+    color: var(--color-text, #1a1a1a);
+    margin: 0 0 0.75rem;
+}
+
+.welcome-modal-text {
+    font-family: "Sniglet", system-ui;
+    font-size: 0.9rem;
+    line-height: 1.6;
+    color: var(--color-text-muted, #6b7280);
+    margin: 0 0 1.75rem;
+}
+
+.welcome-modal-btn {
+    font-family: "Sniglet", system-ui;
+    font-size: 1rem;
+    font-weight: 700;
+    color: #fff;
+    background: var(--color-primary, #22c55e);
+    border: none;
+    border-radius: 14px;
+    padding: 0.875rem 2rem;
+    width: 100%;
+    cursor: pointer;
+    transition:
+        background 0.15s,
+        transform 0.15s;
+}
+
+.welcome-modal-btn:hover {
+    background: #16a34a;
+    transform: translateY(-1px);
+}
+
+.welcome-modal-btn:active {
+    transform: translateY(0);
+}
+
+.welcome-modal-skip {
+    font-family: "Sniglet", system-ui;
+    font-size: 0.8125rem;
+    color: var(--color-text-muted, #6b7280);
+    background: none;
+    border: none;
+    cursor: pointer;
+    margin-top: 0.75rem;
+    padding: 0.5rem 1rem;
+    transition: color 0.15s;
+}
+
+.welcome-modal-skip:hover {
+    color: var(--color-text, #1a1a1a);
+}
+
+/* ============================
+   DRIVER.JS TOUR CUSTOMIZATION
+   ============================ */
+.gj-tour-popover {
+    font-family: "Sniglet", system-ui !important;
+    border-radius: 16px !important;
+    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2) !important;
+}
+
+.gj-tour-popover .driver-popover-title {
+    font-family: "Sniglet", system-ui !important;
+    font-size: 1.05rem !important;
+    font-weight: 700 !important;
+    color: var(--color-text, #1a1a1a) !important;
+}
+
+.gj-tour-popover .driver-popover-description {
+    font-family: "Sniglet", system-ui !important;
+    font-size: 0.85rem !important;
+    line-height: 1.55 !important;
+    color: var(--color-text-muted, #6b7280) !important;
+}
+
+.gj-tour-popover .driver-popover-progress-text {
+    font-family: "Sniglet", system-ui !important;
+    font-size: 0.75rem !important;
+    color: var(--color-text-muted, #6b7280) !important;
+}
+
+.gj-tour-popover .driver-popover-navigation-btns button {
+    font-family: "Sniglet", system-ui !important;
+    border-radius: 10px !important;
+    font-size: 0.825rem !important;
+    padding: 0.4rem 1rem !important;
+    font-weight: 600 !important;
+}
+
+.gj-tour-popover .driver-popover-next-btn {
+    background: var(--color-primary, #22c55e) !important;
+    color: #fff !important;
+    border: none !important;
+    text-shadow: none !important;
+}
+
+.gj-tour-popover .driver-popover-prev-btn {
+    color: var(--color-text-muted, #6b7280) !important;
+    border: 1px solid var(--color-border, #d4e8d4) !important;
+    background: transparent !important;
+}
+
+.gj-tour-popover .driver-popover-close-btn {
+    color: var(--color-text-muted, #6b7280) !important;
+    outline: none !important;
+    box-shadow: none !important;
+    border: none !important;
+    background: transparent !important;
+}
+
+.gj-tour-popover .driver-popover-close-btn:focus,
+.gj-tour-popover .driver-popover-close-btn:focus-visible {
+    outline: none !important;
+    box-shadow: none !important;
+    border: none !important;
+}
+
+/* -- Dark theme: welcome modal -- */
+[data-theme="dark"] .welcome-modal {
+    background: #1a1a1a;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+}
+
+/* -- Dark theme: driver.js -- */
+[data-theme="dark"] .gj-tour-popover {
+    background: #1a1a1a !important;
+    border: 1px solid rgba(74, 222, 128, 0.12) !important;
+}
+
+[data-theme="dark"] .gj-tour-popover .driver-popover-title {
+    color: #e8f5e8 !important;
+}
+
+[data-theme="dark"] .gj-tour-popover .driver-popover-description {
+    color: #7a8a7a !important;
+}
+
+[data-theme="dark"] .gj-tour-popover .driver-popover-prev-btn {
+    border-color: rgba(74, 222, 128, 0.15) !important;
+    color: #7a8a7a !important;
+}
+
+[data-theme="dark"] .gj-tour-popover .driver-popover-close-btn {
+    color: #7a8a7a !important;
+    outline: none !important;
+    box-shadow: none !important;
+    border: none !important;
+}

src/components/BottomNav.tsx

@@ -29,6 +29,7 @@ export default function BottomNav() {
       {/* History */}
       <button
         type="button"
+        id="tour-nav-history"
         className={`bottom-nav-btn ${isActive('/history') ? 'bottom-nav-btn-active' : ''}`}
         onClick={() => navigate('/history')}
         aria-label="History"
@@ -44,6 +45,7 @@ export default function BottomNav() {
       {/* Settings */}
       <button
         type="button"
+        id="tour-nav-settings"
         className={`bottom-nav-btn ${isActive('/settings') ? 'bottom-nav-btn-active' : ''}`}
         onClick={() => navigate('/settings')}
         aria-label="Settings"

src/components/WelcomeModal.tsx

@@ -0,0 +1,30 @@
+interface WelcomeModalProps {
+  onStart: () => void
+  onSkip: () => void
+}
+
+export default function WelcomeModal({ onStart, onSkip }: WelcomeModalProps) {
+  return (
+    <div className="welcome-modal-overlay" onClick={onSkip}>
+      <div className="welcome-modal" onClick={(e) => e.stopPropagation()}>
+        <div className="welcome-modal-icon">
+          <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
+          </svg>
+        </div>
+        <h2 className="welcome-modal-title">Welcome to Grateful Journal</h2>
+        <p className="welcome-modal-text">
+          A private, peaceful space to capture what you're grateful for — every day.
+          Your entries are end-to-end encrypted, so only you can read them.
+          No feeds, no noise — just you and your thoughts.
+        </p>
+        <button className="welcome-modal-btn" onClick={onStart}>
+          Start Your Journey
+        </button>
+        <button className="welcome-modal-skip" onClick={onSkip}>
+          Skip tour
+        </button>
+      </div>
+    </div>
+  )
+}

src/contexts/AuthContext.tsx

@@ -29,13 +29,23 @@ import {
   getEncryptedSecretKey,
 } from '../lib/crypto'
 
+type MongoUser = {
+  id: string
+  email: string
+  displayName?: string
+  photoURL?: string
+  theme?: string
+}
+
 type AuthContextValue = {
   user: User | null
   userId: string | null
+  mongoUser: MongoUser | null
   loading: boolean
   secretKey: Uint8Array | null
   signInWithGoogle: () => Promise<void>
   signOut: () => Promise<void>
+  refreshMongoUser: () => Promise<void>
 }
 
 const AuthContext = createContext<AuthContextValue | null>(null)
@@ -43,6 +53,7 @@ const AuthContext = createContext<AuthContextValue | null>(null)
 export function AuthProvider({ children }: { children: ReactNode }) {
   const [user, setUser] = useState<User | null>(null)
   const [userId, setUserId] = useState<string | null>(null)
+  const [mongoUser, setMongoUser] = useState<MongoUser | null>(null)
   const [secretKey, setSecretKey] = useState<Uint8Array | null>(null)
   const [loading, setLoading] = useState(true)
 
@@ -114,9 +125,10 @@ export function AuthProvider({ children }: { children: ReactNode }) {
       // Try to get existing user
       try {
         console.log('[Auth] Fetching user by email:', email)
-        const existingUser = await getUserByEmail(email, token) as { id: string }
+        const existingUser = await getUserByEmail(email, token) as MongoUser
         console.log('[Auth] Found existing user:', existingUser.id)
         setUserId(existingUser.id)
+        setMongoUser(existingUser)
       } catch (error) {
         console.warn('[Auth] User not found, registering...', error)
         // User doesn't exist, register them
@@ -127,9 +139,10 @@ export function AuthProvider({ children }: { children: ReactNode }) {
             photoURL: authUser.photoURL || undefined,
           },
           token
-        ) as { id: string }
+        ) as MongoUser
         console.log('[Auth] Registered new user:', newUser.id)
         setUserId(newUser.id)
+        setMongoUser(newUser)
       }
     } catch (error) {
       console.error('[Auth] Error syncing user with database:', error)
@@ -148,6 +161,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
         }
       } else {
         setUserId(null)
+        setMongoUser(null)
         setSecretKey(null)
       }
       setLoading(false)
@@ -160,9 +174,25 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     await signInWithPopup(auth, googleProvider)
   }
 
+  async function refreshMongoUser() {
+    if (!user) return
+    try {
+      const token = await user.getIdToken()
+      const email = user.email!
+      const updated = await getUserByEmail(email, token) as MongoUser
+      setMongoUser(updated)
+    } catch (error) {
+      console.error('[Auth] Error refreshing mongo user:', error)
+    }
+  }
+
   async function signOut() {
     // Clear secret key from memory
     setSecretKey(null)
+    setMongoUser(null)
+    // Reset onboarding so tour shows again on next login
+    localStorage.removeItem('gj-onboarding-done')
+    localStorage.removeItem('gj-tour-pending-step')
     // Keep device key and encrypted key for next login
     // Do NOT clear localStorage or IndexedDB
     await firebaseSignOut(auth)
@@ -172,10 +202,12 @@ export function AuthProvider({ children }: { children: ReactNode }) {
   const value: AuthContextValue = {
     user,
     userId,
+    mongoUser,
     secretKey,
     loading,
     signInWithGoogle,
     signOut,
+    refreshMongoUser,
   }
 
   return (

src/hooks/useOnboardingTour.ts

@@ -0,0 +1,216 @@
+import { useCallback, useRef } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { driver, type DriveStep } from 'driver.js'
+import 'driver.js/dist/driver.css'
+
+const ONBOARDING_KEY = 'gj-onboarding-done'
+const TOUR_PENDING_KEY = 'gj-tour-pending-step'
+
+export function hasSeenOnboarding(): boolean {
+  return localStorage.getItem(ONBOARDING_KEY) === 'true'
+}
+
+export function markOnboardingDone(): void {
+  localStorage.setItem(ONBOARDING_KEY, 'true')
+}
+
+export function hasPendingTourStep(): string | null {
+  return localStorage.getItem(TOUR_PENDING_KEY)
+}
+
+export function clearPendingTourStep(): void {
+  localStorage.removeItem(TOUR_PENDING_KEY)
+}
+
+function driverDefaults() {
+  return {
+    showProgress: true,
+    animate: true,
+    allowClose: true,
+    overlayColor: 'rgba(0, 0, 0, 0.6)',
+    stagePadding: 8,
+    stageRadius: 12,
+    popoverClass: 'gj-tour-popover',
+    nextBtnText: 'Next',
+    prevBtnText: 'Back',
+    doneBtnText: 'Got it!',
+    progressText: '{{current}} of {{total}}',
+  } as const
+}
+
+function getHomeSteps(isMobile: boolean): DriveStep[] {
+  return [
+    {
+      element: '#tour-title-input',
+      popover: {
+        title: 'Give it a Title',
+        description: 'Start by naming your gratitude entry. A short title helps you find it later.',
+        side: 'bottom',
+        align: 'center',
+      },
+    },
+    {
+      element: '#tour-content-textarea',
+      popover: {
+        title: 'Write Your Thoughts',
+        description: 'Pour out what you\'re grateful for today. There\'s no right or wrong — just write from the heart.',
+        side: isMobile ? 'top' : 'bottom',
+        align: 'center',
+      },
+    },
+    {
+      element: '#tour-save-btn',
+      popover: {
+        title: 'Save Your Entry',
+        description: 'Hit save and your entry is securely encrypted and stored. Only you can read it.',
+        side: 'top',
+        align: 'center',
+      },
+    },
+    {
+      element: '#tour-nav-history',
+      popover: {
+        title: 'View Your History',
+        description: 'This takes you to the History page. Let\'s go there next!',
+        side: isMobile ? 'top' : 'right',
+        align: 'center',
+      },
+    },
+  ]
+}
+
+function getHistorySteps(isMobile: boolean): DriveStep[] {
+  return [
+    {
+      element: '#tour-calendar',
+      popover: {
+        title: 'Your Calendar',
+        description: 'Green dots mark days you wrote entries. Navigate between months using the arrows.',
+        side: isMobile ? 'bottom' : 'right',
+        align: 'center',
+      },
+    },
+    {
+      element: '#tour-entries-list',
+      popover: {
+        title: 'Your Past Entries',
+        description: 'Tap any date on the calendar to see entries from that day. Tap an entry card to read the full content.',
+        side: isMobile ? 'top' : 'left',
+        align: 'center',
+      },
+    },
+    {
+      element: '#tour-nav-settings',
+      popover: {
+        title: 'Your Settings',
+        description: 'Let\'s check out your settings next!',
+        side: isMobile ? 'top' : 'right',
+        align: 'center',
+      },
+    },
+  ]
+}
+
+function getSettingsSteps(isMobile: boolean): DriveStep[] {
+  return [
+    {
+      element: '#tour-theme-switcher',
+      popover: {
+        title: 'Pick Your Theme',
+        description: 'Switch between Light and Dark mode. Your choice is saved automatically.',
+        side: isMobile ? 'top' : 'bottom',
+        align: 'center',
+      },
+    },
+  ]
+}
+
+export function useOnboardingTour() {
+  const navigate = useNavigate()
+  const driverRef = useRef<ReturnType<typeof driver> | null>(null)
+
+  const startTour = useCallback(() => {
+    const isMobile = window.innerWidth < 860
+
+    const driverObj = driver({
+      ...driverDefaults(),
+      onDestroyStarted: () => {
+        markOnboardingDone()
+        clearPendingTourStep()
+        driverObj.destroy()
+      },
+      onNextClick: () => {
+        const activeIndex = driverObj.getActiveIndex()
+        const steps = driverObj.getConfig().steps || []
+
+        // Last home step → navigate to /history
+        if (activeIndex === steps.length - 1) {
+          localStorage.setItem(TOUR_PENDING_KEY, 'history')
+          driverObj.destroy()
+          navigate('/history')
+          return
+        }
+
+        driverObj.moveNext()
+      },
+      steps: getHomeSteps(isMobile),
+    })
+
+    driverRef.current = driverObj
+    setTimeout(() => driverObj.drive(), 150)
+  }, [navigate])
+
+  const continueTourOnHistory = useCallback(() => {
+    const isMobile = window.innerWidth < 860
+
+    const driverObj = driver({
+      ...driverDefaults(),
+      onDestroyStarted: () => {
+        markOnboardingDone()
+        clearPendingTourStep()
+        driverObj.destroy()
+      },
+      onNextClick: () => {
+        const activeIndex = driverObj.getActiveIndex()
+        const steps = driverObj.getConfig().steps || []
+
+        // Last history step → navigate to /settings
+        if (activeIndex === steps.length - 1) {
+          localStorage.setItem(TOUR_PENDING_KEY, 'settings')
+          driverObj.destroy()
+          navigate('/settings')
+          return
+        }
+
+        driverObj.moveNext()
+      },
+      steps: getHistorySteps(isMobile),
+    })
+
+    driverRef.current = driverObj
+    setTimeout(() => driverObj.drive(), 300)
+  }, [navigate])
+
+  const continueTourOnSettings = useCallback(() => {
+    const isMobile = window.innerWidth < 860
+
+    const driverObj = driver({
+      ...driverDefaults(),
+      onDestroyStarted: () => {
+        markOnboardingDone()
+        clearPendingTourStep()
+        driverObj.destroy()
+      },
+      onDestroyed: () => {
+        markOnboardingDone()
+        clearPendingTourStep()
+      },
+      steps: getSettingsSteps(isMobile),
+    })
+
+    driverRef.current = driverObj
+    setTimeout(() => driverObj.drive(), 300)
+  }, [])
+
+  return { startTour, continueTourOnHistory, continueTourOnSettings }
+}

src/lib/api.ts

@@ -73,7 +73,7 @@ export async function updateUserProfile(
   updates: { displayName?: string; photoURL?: string; theme?: string },
   token: string
 ) {
-  return apiCall(`/api/users/update/${userId}`, {
+  return apiCall(`/api/users/${userId}`, {
     method: 'PUT',
     body: updates,
     token,

src/pages/HistoryPage.tsx

@@ -4,6 +4,7 @@ import { getUserEntries, type JournalEntry } from '../lib/api'
 import { decryptEntry } from '../lib/crypto'
 import { formatIST, getISTDateComponents } from '../lib/timezone'
 import BottomNav from '../components/BottomNav'
+import { useOnboardingTour, hasPendingTourStep, clearPendingTourStep } from '../hooks/useOnboardingTour'
 
 interface DecryptedEntry extends JournalEntry {
   decryptedTitle?: string
@@ -19,6 +20,16 @@ export default function HistoryPage() {
   const [loadingEntries, setLoadingEntries] = useState(false)
   const [selectedEntry, setSelectedEntry] = useState<DecryptedEntry | null>(null)
 
+  const { continueTourOnHistory } = useOnboardingTour()
+
+  // Continue onboarding tour if navigated here from the home page tour
+  useEffect(() => {
+    if (hasPendingTourStep() === 'history') {
+      clearPendingTourStep()
+      continueTourOnHistory()
+    }
+  }, [])
+
   // Fetch entries on mount and when userId changes
   useEffect(() => {
     if (!user || !userId) return
@@ -189,7 +200,7 @@ export default function HistoryPage() {
       </header>
 
       <main className="history-container">
-        <div className="calendar-card">
+        <div id="tour-calendar" className="calendar-card">
           <div className="calendar-header">
             <h2 className="calendar-month">{monthName}</h2>
             <div className="calendar-nav">
@@ -239,7 +250,7 @@ export default function HistoryPage() {
           </div>
         </div>
 
-        <section className="recent-entries">
+        <section id="tour-entries-list" className="recent-entries">
           <h3 className="recent-entries-title">
             {selectedDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }).toUpperCase()}
           </h3>

src/pages/HomePage.tsx

@@ -1,9 +1,11 @@
 import { useAuth } from '../contexts/AuthContext'
 import { Link } from 'react-router-dom'
-import { useState, useRef } from 'react'
+import { useState, useRef, useEffect } from 'react'
 import { createEntry } from '../lib/api'
 import { encryptEntry } from '../lib/crypto'
 import BottomNav from '../components/BottomNav'
+import WelcomeModal from '../components/WelcomeModal'
+import { useOnboardingTour, hasSeenOnboarding, markOnboardingDone } from '../hooks/useOnboardingTour'
 
 export default function HomePage() {
   const { user, userId, secretKey, loading } = useAuth()
@@ -11,10 +13,30 @@ export default function HomePage() {
   const [title, setTitle] = useState('')
   const [saving, setSaving] = useState(false)
   const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null)
-  
+  const [showWelcome, setShowWelcome] = useState(false)
+
   const titleInputRef = useRef<HTMLInputElement>(null)
   const contentTextareaRef = useRef<HTMLTextAreaElement>(null)
 
+  const { startTour } = useOnboardingTour()
+
+  // Check if onboarding should be shown after login
+  useEffect(() => {
+    if (!loading && user && userId && !hasSeenOnboarding()) {
+      setShowWelcome(true)
+    }
+  }, [loading, user, userId])
+
+  const handleStartTour = () => {
+    setShowWelcome(false)
+    startTour()
+  }
+
+  const handleSkipTour = () => {
+    setShowWelcome(false)
+    markOnboardingDone()
+  }
+
   if (loading) {
     return (
       <div className="home-page" style={{ alignItems: 'center', justifyContent: 'center' }}>
@@ -106,6 +128,9 @@ export default function HomePage() {
 
   return (
     <div className="home-page">
+      {showWelcome && (
+        <WelcomeModal onStart={handleStartTour} onSkip={handleSkipTour} />
+      )}
       <main className="journal-container">
         <div className="journal-card">
           <div className="journal-date">{dateString}</div>
@@ -115,6 +140,7 @@ export default function HomePage() {
           <div className="journal-writing-area">
             <input
               type="text"
+              id="tour-title-input"
               className="journal-title-input"
               placeholder="Title your thoughts..."
               value={title}
@@ -125,6 +151,7 @@ export default function HomePage() {
               disabled={saving}
             />
             <textarea
+              id="tour-content-textarea"
               className="journal-entry-textarea"
               placeholder="Start writing your entry here..."
               value={entry}
@@ -151,6 +178,7 @@ export default function HomePage() {
 
           <div style={{ marginTop: '1.5rem', display: 'flex', gap: '0.75rem' }}>
             <button
+              id="tour-save-btn"
               className="journal-write-btn"
               onClick={handleWrite}
               disabled={saving || !title.trim() || !entry.trim()}

src/pages/SettingsPage.tsx

@@ -1,11 +1,40 @@
-import { useState, useEffect, useCallback } from 'react'
+import { useState, useEffect, useCallback, useRef } from 'react'
 import { useAuth } from '../contexts/AuthContext'
-import { deleteUser as deleteUserApi } from '../lib/api'
+import { deleteUser as deleteUserApi, updateUserProfile } from '../lib/api'
 import { clearDeviceKey, clearEncryptedSecretKey } from '../lib/crypto'
+import { useNavigate } from 'react-router-dom'
 import BottomNav from '../components/BottomNav'
+import { useOnboardingTour, hasPendingTourStep, clearPendingTourStep } from '../hooks/useOnboardingTour'
+
+const MAX_PHOTO_SIZE = 200 // px — resize to 200x200
+
+function resizeImage(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => {
+      const img = new Image()
+      img.onload = () => {
+        const canvas = document.createElement('canvas')
+        canvas.width = MAX_PHOTO_SIZE
+        canvas.height = MAX_PHOTO_SIZE
+        const ctx = canvas.getContext('2d')!
+        // Crop to square from center
+        const side = Math.min(img.width, img.height)
+        const sx = (img.width - side) / 2
+        const sy = (img.height - side) / 2
+        ctx.drawImage(img, sx, sy, side, side, 0, 0, MAX_PHOTO_SIZE, MAX_PHOTO_SIZE)
+        resolve(canvas.toDataURL('image/jpeg', 0.8))
+      }
+      img.onerror = reject
+      img.src = reader.result as string
+    }
+    reader.onerror = reject
+    reader.readAsDataURL(file)
+  })
+}
 
 export default function SettingsPage() {
-  const { user, userId, signOut, loading } = useAuth()
+  const { user, userId, mongoUser, signOut, loading, refreshMongoUser } = useAuth()
   // const [passcodeEnabled, setPasscodeEnabled] = useState(false) // Passcode lock — disabled for now
   // const [faceIdEnabled, setFaceIdEnabled] = useState(false)     // Face ID — disabled for now
   const [theme, setTheme] = useState<'light' | 'dark'>(() => {
@@ -18,7 +47,77 @@ export default function SettingsPage() {
   const [confirmEmail, setConfirmEmail] = useState('')
   const [deleting, setDeleting] = useState(false)
 
-  const displayName = user?.displayName || 'User'
+  const { continueTourOnSettings } = useOnboardingTour()
+  const navigate = useNavigate()
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  // Edit profile modal state
+  const [showEditModal, setShowEditModal] = useState(false)
+  const [editName, setEditName] = useState('')
+  const [editPhotoPreview, setEditPhotoPreview] = useState<string | null>(null)
+  const [saving, setSaving] = useState(false)
+
+  // Continue onboarding tour if navigated here from the history page tour
+  useEffect(() => {
+    if (hasPendingTourStep() === 'settings') {
+      clearPendingTourStep()
+      continueTourOnSettings()
+    }
+  }, [])
+
+  const handleSeeTutorial = () => {
+    localStorage.removeItem('gj-onboarding-done')
+    localStorage.removeItem('gj-tour-pending-step')
+    navigate('/')
+  }
+
+  const displayName = mongoUser?.displayName || user?.displayName || 'User'
+  // Prefer mongo photo; only fall back to Google photo if mongo has no photo set
+  const photoURL = (mongoUser && 'photoURL' in mongoUser) ? (mongoUser.photoURL || null) : (user?.photoURL || null)
+
+  const openEditModal = () => {
+    setEditName(displayName)
+    setEditPhotoPreview(photoURL)
+    setShowEditModal(true)
+  }
+
+  const handlePhotoSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (!file) return
+    try {
+      const resized = await resizeImage(file)
+      setEditPhotoPreview(resized)
+    } catch {
+      setMessage({ type: 'error', text: 'Failed to process image' })
+    }
+  }
+
+  const handleSaveProfile = async () => {
+    if (!user || !userId) return
+    setSaving(true)
+    try {
+      const token = await user.getIdToken()
+      const updates: { displayName?: string; photoURL?: string } = {}
+      if (editName.trim() && editName.trim() !== displayName) {
+        updates.displayName = editName.trim()
+      }
+      if (editPhotoPreview !== photoURL) {
+        updates.photoURL = editPhotoPreview || ''
+      }
+      if (Object.keys(updates).length > 0) {
+        await updateUserProfile(userId, updates, token)
+        await refreshMongoUser()
+        setMessage({ type: 'success', text: 'Profile updated!' })
+        setTimeout(() => setMessage(null), 2000)
+      }
+      setShowEditModal(false)
+    } catch (error) {
+      const msg = error instanceof Error ? error.message : 'Failed to update profile'
+      setMessage({ type: 'error', text: msg })
+    } finally {
+      setSaving(false)
+    }
+  }
 
   // Apply theme to DOM
   const applyTheme = useCallback((t: 'light' | 'dark') => {
@@ -108,14 +207,23 @@ export default function SettingsPage() {
         {/* Profile Section */}
         <div className="settings-profile">
           <div className="settings-avatar">
-            <div className="settings-avatar-placeholder" style={{ fontSize: '1.75rem', background: 'linear-gradient(135deg, #86efac 0%, #22c55e 100%)' }}>
+            {photoURL ? (
-              🍀
+              <img src={photoURL} alt={displayName} className="settings-avatar-img" />
-            </div>
+            ) : (
+              <div className="settings-avatar-placeholder" style={{ fontSize: '1.75rem', background: 'linear-gradient(135deg, #86efac 0%, #22c55e 100%)' }}>
+                {displayName.charAt(0).toUpperCase()}
+              </div>
+            )}
           </div>
           <div className="settings-profile-info">
             <h2 className="settings-profile-name">{displayName}</h2>
-            {/* <span className="settings-profile-badge">PRO MEMBER</span> */}
           </div>
+          <button type="button" className="settings-edit-btn" onClick={openEditModal} title="Edit profile">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+              <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+            </svg>
+          </button>
         </div>
 
         {/* Privacy & Security */}
@@ -203,7 +311,7 @@ export default function SettingsPage() {
             <div className="settings-divider"></div>
             */}
 
-            <div className="settings-item">
+            <div id="tour-theme-switcher" className="settings-item">
               <div className="settings-item-icon settings-item-icon-blue">
                 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                   <circle cx="13.5" cy="6.5" r=".5"></circle>
@@ -249,6 +357,16 @@ export default function SettingsPage() {
           </div>
         )}
 
+        {/* See Tutorial */}
+        <button type="button" className="settings-tutorial-btn" onClick={handleSeeTutorial}>
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <circle cx="12" cy="12" r="10" />
+            <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
+            <line x1="12" y1="17" x2="12.01" y2="17" />
+          </svg>
+          <span>See Tutorial</span>
+        </button>
+
         {/* Clear Data */}
         <button type="button" className="settings-clear-btn" onClick={handleClearData}>
           <span>Clear All Data</span>
@@ -310,6 +428,80 @@ export default function SettingsPage() {
         </div>
       )}
 
+      {/* Edit Profile Modal */}
+      {showEditModal && (
+        <div className="confirm-modal-overlay" onClick={() => !saving && setShowEditModal(false)}>
+          <div className="confirm-modal" onClick={(e) => e.stopPropagation()}>
+            <h3 className="edit-modal-title">Edit Profile</h3>
+
+            <div className="edit-modal-avatar" onClick={() => fileInputRef.current?.click()}>
+              {editPhotoPreview ? (
+                <img src={editPhotoPreview} alt="Preview" className="edit-modal-avatar-img" />
+              ) : (
+                <div className="edit-modal-avatar-placeholder">
+                  {editName.charAt(0).toUpperCase() || 'U'}
+                </div>
+              )}
+              <div className="edit-modal-avatar-overlay">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" />
+                  <circle cx="12" cy="13" r="4" />
+                </svg>
+              </div>
+              <input
+                ref={fileInputRef}
+                type="file"
+                accept="image/*"
+                style={{ display: 'none' }}
+                onChange={handlePhotoSelect}
+              />
+            </div>
+            {editPhotoPreview && (
+              <button
+                type="button"
+                className="edit-modal-remove-photo"
+                onClick={() => setEditPhotoPreview(null)}
+              >
+                Remove photo
+              </button>
+            )}
+
+            <label className="confirm-modal-label" style={{ marginTop: '1rem' }}>Display Name</label>
+            <input
+              type="text"
+              className="confirm-modal-input"
+              value={editName}
+              onChange={(e) => setEditName(e.target.value)}
+              disabled={saving}
+              maxLength={50}
+              autoFocus
+              style={{ borderColor: '#d1d5db' }}
+              onFocus={(e) => (e.target.style.borderColor = '#22c55e')}
+              onBlur={(e) => (e.target.style.borderColor = '#d1d5db')}
+            />
+
+            <div className="confirm-modal-actions" style={{ marginTop: '1rem' }}>
+              <button
+                type="button"
+                className="confirm-modal-cancel"
+                onClick={() => setShowEditModal(false)}
+                disabled={saving}
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                className="edit-modal-save"
+                onClick={handleSaveProfile}
+                disabled={saving || !editName.trim()}
+              >
+                {saving ? 'Saving...' : 'Save'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
       <BottomNav />
     </div>
   )