From 85ff0a428f488865453a92220dd964578ee9d5a7 Mon Sep 17 00:00:00 2001
From: Alameen <smokinaxle67@gmail.com>
Date: Tue, 23 Dec 2025 18:28:10 +0530
Subject: [PATCH 1/7] feat: add demo mode for portfolio showcase - Add separate
 MongoDB collections (demoUsers, demoWatchlist) with TTL indexes - Auto-delete
 demo accounts after configurable TTL.

---
 cinetrack-app/client/src/App.tsx              |  17 +-
 .../components/common/DemoWelcomeModal.tsx    |  88 ++++++++++
 .../src/components/features/SettingsModal.tsx | 151 +++++++++++-------
 .../client/src/contexts/AuthContext.tsx       |   1 +
 cinetrack-app/client/src/pages/AuthPage.tsx   |  63 +++++---
 cinetrack-app/server/.env.example             |   6 +
 cinetrack-app/server/src/config.js            |   2 +
 cinetrack-app/server/src/routes/authRoutes.js |  70 ++++++--
 .../server/src/routes/watchlistRoutes.js      |  63 ++++++--
 cinetrack-app/server/src/server.js            |  31 +++-
 10 files changed, 364 insertions(+), 128 deletions(-)
 create mode 100644 cinetrack-app/client/src/components/common/DemoWelcomeModal.tsx

diff --git a/cinetrack-app/client/src/App.tsx b/cinetrack-app/client/src/App.tsx
index ad407f9..1c87deb 100644
--- a/cinetrack-app/client/src/App.tsx
+++ b/cinetrack-app/client/src/App.tsx
@@ -6,6 +6,7 @@ import { useWatchlistStore, getWatchlistIds } from "./store/useWatchlistStore";
 import { UIProvider, useUIContext } from "./contexts/UIContext";
 import { DiscoverProvider } from "./contexts/DiscoverContext";
 import { AuthProvider, useAuthContext } from "./contexts/AuthContext";
+import { DemoWelcomeModal, useDemoWelcome } from "./components/common/DemoWelcomeModal";
 import { SearchBar } from "./components/common/SearchBar";
 import { SearchPalette } from "./components/common/SearchPalette";
 import { NotificationsModal } from "./components/common/NotificationsModal";
@@ -56,21 +57,21 @@ const Header: React.FC = memo(() => {
           </div>
           {/* Tablet - Regular SearchBar */}
           <div className="lg:hidden w-full max-w-sm flex items-center gap-2 ml-auto">
-            <div className="flex-grow">
+            <div className="grow">
               <SearchBar onSearch={handleSearch} isLoading={isSearchLoading} />
             </div>
             <a
               href="https://github.com/Alameen1433"
               target="_blank"
               rel="noopener noreferrer"
-              className="p-2 rounded-full text-brand-text-dim hover:text-brand-text-light hover:bg-brand-surface transition-colors flex-shrink-0"
+              className="p-2 rounded-full text-brand-text-dim hover:text-brand-text-light hover:bg-brand-surface transition-colors shrink-0"
               aria-label="View on GitHub"
             >
               <FiGithub className="h-6 w-6" />
             </a>
             <button
               onClick={openNotifications}
-              className="p-2 rounded-full text-brand-text-dim hover:text-brand-text-light hover:bg-brand-surface transition-colors flex-shrink-0 relative"
+              className="p-2 rounded-full text-brand-text-dim hover:text-brand-text-light hover:bg-brand-surface transition-colors shrink-0 relative"
               aria-label="Notifications"
             >
               <FiBell className="h-6 w-6" />
@@ -78,7 +79,7 @@ const Header: React.FC = memo(() => {
             </button>
             <button
               onClick={openSettings}
-              className="p-2 rounded-full text-brand-text-dim hover:text-brand-text-light hover:bg-brand-surface transition-colors flex-shrink-0"
+              className="p-2 rounded-full text-brand-text-dim hover:text-brand-text-light hover:bg-brand-surface transition-colors shrink-0"
               aria-label="Open settings"
             >
               <FiSettings className="h-6 w-6" />
@@ -101,7 +102,7 @@ const Header: React.FC = memo(() => {
               >
                 <FiArrowLeft className="h-6 w-6" />
               </button>
-              <div className="flex-grow">
+              <div className="grow">
                 <SearchBar
                   onSearch={handleSearch}
                   isLoading={isSearchLoading}
@@ -141,7 +142,7 @@ const Header: React.FC = memo(() => {
                 </button>
                 <button
                   onClick={openSettings}
-                  className="p-2 rounded-full text-brand-text-dim hover:text-brand-text-light hover:bg-brand-surface transition-colors flex-shrink-0"
+                  className="p-2 rounded-full text-brand-text-dim hover:text-brand-text-light hover:bg-brand-surface transition-colors shrink-0"
                   aria-label="Open settings"
                 >
                   <FiSettings className="h-6 w-6" />
@@ -381,7 +382,8 @@ const App: React.FC = () => {
 
 // Renders either AuthPage or the main app based on auth state
 const AuthenticatedApp: React.FC = () => {
-  const { isAuthenticated, isLoading } = useAuthContext();
+  const { isAuthenticated, isLoading, user } = useAuthContext();
+  const { showWelcome, closeWelcome } = useDemoWelcome(user?.isDemo);
 
   if (isLoading) {
     return (
@@ -417,6 +419,7 @@ const AuthenticatedApp: React.FC = () => {
           </DiscoverProvider>
         </UIProvider>
       </WatchlistProvider>
+      {showWelcome && <DemoWelcomeModal onClose={closeWelcome} />}
       <style>{`
         @keyframes fadeIn {
           from {
diff --git a/cinetrack-app/client/src/components/common/DemoWelcomeModal.tsx b/cinetrack-app/client/src/components/common/DemoWelcomeModal.tsx
new file mode 100644
index 0000000..b892db5
--- /dev/null
+++ b/cinetrack-app/client/src/components/common/DemoWelcomeModal.tsx
@@ -0,0 +1,88 @@
+import React, { useState, useEffect } from "react";
+import { FiX, FiClock, FiInfo } from "react-icons/fi";
+
+interface DemoWelcomeModalProps {
+    onClose: () => void;
+}
+
+const DEMO_WELCOME_SHOWN_KEY = "scenestack_demo_welcome_shown";
+
+export const DemoWelcomeModal: React.FC<DemoWelcomeModalProps> = ({ onClose }) => {
+    const handleClose = () => {
+        sessionStorage.setItem(DEMO_WELCOME_SHOWN_KEY, "true");
+        onClose();
+    };
+
+    return (
+        <div
+            className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm"
+            onClick={handleClose}
+        >
+            <div
+                className="bg-brand-surface border border-brand-primary/30 w-full max-w-lg rounded-2xl p-6 shadow-2xl animate-fadeIn"
+                onClick={(e) => e.stopPropagation()}
+            >
+                {/* Header */}
+                <div className="flex justify-between items-start mb-4">
+                    <div>
+                        <h2 className="text-xl font-bold text-white">Welcome to SceneStack Demo</h2>
+                        <p className="text-sm text-brand-text-dim mt-1">Try it out before you leave!</p>
+                    </div>
+                    <button
+                        onClick={handleClose}
+                        className="p-1 text-brand-text-dim hover:text-white transition-colors rounded-lg hover:bg-white/10"
+                        aria-label="Close"
+                    >
+                        <FiX className="h-5 w-5" />
+                    </button>
+                </div>
+
+                {/* Content */}
+                <div className="space-y-4">
+                    <div className="flex items-start gap-3 p-3 bg-amber-500/10 border border-amber-500/20 rounded-xl">
+                        <FiClock className="h-5 w-5 text-amber-400 shrink-0 mt-0.5" />
+                        <div>
+                            <p className="text-amber-400 font-medium text-sm">Temporary Account</p>
+                            <p className="text-xs text-brand-text-dim mt-1">
+                                Your demo account and all data will be automatically deleted after a few hours.
+                            </p>
+                        </div>
+                    </div>
+
+                    <div className="flex items-start gap-3 p-3 bg-brand-primary/10 border border-brand-primary/20 rounded-xl">
+                        <FiInfo className="h-5 w-5 text-brand-primary shrink-0 mt-0.5" />
+                        <div>
+                            <p className="text-brand-primary font-medium text-sm">Why Invite Codes?</p>
+                            <p className="text-xs text-brand-text-dim mt-1">
+                                SceneStack is a personal project. Invite codes keep this instance private.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+
+                {/* Action */}
+                <button
+                    onClick={handleClose}
+                    className="w-full mt-6 py-3 px-4 rounded-xl font-semibold bg-brand-primary hover:bg-brand-secondary text-white transition-all hover:scale-[1.01] active:scale-[0.99]"
+                >
+                    Got it, let's explore!
+                </button>
+            </div>
+        </div>
+    );
+};
+
+export const useDemoWelcome = (isDemo: boolean | undefined) => {
+    const [showWelcome, setShowWelcome] = useState(false);
+
+    useEffect(() => {
+        if (isDemo && !sessionStorage.getItem(DEMO_WELCOME_SHOWN_KEY)) {
+            setShowWelcome(true);
+        }
+    }, [isDemo]);
+
+    return {
+        showWelcome,
+        closeWelcome: () => setShowWelcome(false),
+    };
+};
diff --git a/cinetrack-app/client/src/components/features/SettingsModal.tsx b/cinetrack-app/client/src/components/features/SettingsModal.tsx
index 2f835e8..76e7f21 100644
--- a/cinetrack-app/client/src/components/features/SettingsModal.tsx
+++ b/cinetrack-app/client/src/components/features/SettingsModal.tsx
@@ -16,7 +16,8 @@ import {
   FiTrash2,
   FiAlertTriangle,
   FiChevronRight,
-  FiChevronDown
+  FiChevronDown,
+  FiClock
 } from "react-icons/fi";
 
 // API requests use relative URLs - Vite proxy handles forwarding in dev
@@ -312,17 +313,32 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({
             </h3>
             <div className="bg-black/30 rounded-xl p-4">
               <div className="flex items-center gap-4">
-                <div className="w-12 h-12 rounded-full bg-gradient-to-br from-brand-primary to-brand-secondary flex items-center justify-center text-white text-lg font-bold">
+                <div className="w-12 h-12 rounded-full bg-linear-to-br from-brand-primary to-brand-secondary flex items-center justify-center text-white text-lg font-bold">
                   {user?.email?.charAt(0).toUpperCase() || "U"}
                 </div>
                 <div className="flex-1 min-w-0">
                   <p className="text-white font-medium truncate">{user?.email}</p>
-                  <p className="text-sm text-brand-text-dim">Logged in</p>
+                  <p className="text-sm text-brand-text-dim">
+                    {user?.isDemo ? "Demo Account" : "Logged in"}
+                  </p>
                 </div>
               </div>
 
-              {/* Change Password Toggle */}
-              {!showPasswordForm ? (
+              {/* Demo Account Badge */}
+              {user?.isDemo && (
+                <div className="mt-4 bg-amber-500/15 border border-amber-500/30 rounded-lg p-3">
+                  <p className="text-amber-400 font-medium flex items-center gap-2 text-sm">
+                    <FiClock className="h-4 w-4" />
+                    Demo Account
+                  </p>
+                  <p className="text-xs text-brand-text-dim mt-1">
+                    This account expires automatically. Some features are limited.
+                  </p>
+                </div>
+              )}
+
+              {/* Change Password Toggle - hidden for demo users */}
+              {!user?.isDemo && !showPasswordForm ? (
                 <button
                   onClick={() => { setShowPasswordForm(true); setPasswordSuccess(false); }}
                   className="w-full mt-4 py-2 px-4 rounded-lg font-medium transition-colors bg-white/10 hover:bg-white/20 text-white flex items-center justify-center gap-2"
@@ -335,13 +351,13 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({
                   {/* Status Messages */}
                   {passwordError && (
                     <div className="flex items-start gap-2 p-3 bg-red-500/20 border border-red-500/30 rounded-lg">
-                      <FiAlertCircle className="h-5 w-5 text-red-400 flex-shrink-0 mt-0.5" />
+                      <FiAlertCircle className="h-5 w-5 text-red-400 shrink-0 mt-0.5" />
                       <p className="text-red-400 text-sm">{passwordError}</p>
                     </div>
                   )}
                   {passwordSuccess && (
                     <div className="flex items-start gap-2 p-3 bg-green-500/20 border border-green-500/30 rounded-lg">
-                      <FiCheckCircle className="h-5 w-5 text-green-400 flex-shrink-0 mt-0.5" />
+                      <FiCheckCircle className="h-5 w-5 text-green-400 shrink-0 mt-0.5" />
                       <div>
                         <p className="text-green-400 text-sm font-medium">Password updated successfully!</p>
                         <p className="text-green-400/70 text-xs mt-1">Your new password is now active. Use it the next time you log in.</p>
@@ -434,17 +450,30 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({
             <p className="text-sm text-brand-text-dim mb-4">
               Export your watchlist to a file for backup, or import from a previous export.
             </p>
+            {user?.isDemo && (
+              <p className="text-xs text-amber-400/80 mb-3">
+                Export/Import is disabled for demo accounts.
+              </p>
+            )}
             <div className="flex flex-col sm:flex-row gap-3">
               <button
-                onClick={onExport}
-                className="flex-1 py-2.5 px-4 rounded-xl font-semibold transition-all bg-brand-primary hover:bg-brand-secondary text-white flex items-center justify-center gap-2 hover:scale-[1.02] active:scale-[0.98]"
+                onClick={user?.isDemo ? undefined : onExport}
+                disabled={user?.isDemo}
+                className={`flex-1 py-2.5 px-4 rounded-xl font-semibold transition-all flex items-center justify-center gap-2 ${user?.isDemo
+                    ? "bg-white/5 text-brand-text-dim cursor-not-allowed"
+                    : "bg-brand-primary hover:bg-brand-secondary text-white hover:scale-[1.02] active:scale-[0.98]"
+                  }`}
               >
                 <FiDownload className="h-5 w-5" />
                 Export
               </button>
               <button
-                onClick={handleImportClick}
-                className="flex-1 py-2.5 px-4 rounded-xl font-semibold transition-all bg-white/10 hover:bg-white/20 text-white flex items-center justify-center gap-2 hover:scale-[1.02] active:scale-[0.98]"
+                onClick={user?.isDemo ? undefined : handleImportClick}
+                disabled={user?.isDemo}
+                className={`flex-1 py-2.5 px-4 rounded-xl font-semibold transition-all flex items-center justify-center gap-2 ${user?.isDemo
+                    ? "bg-white/5 text-brand-text-dim cursor-not-allowed"
+                    : "bg-white/10 hover:bg-white/20 text-white hover:scale-[1.02] active:scale-[0.98]"
+                  }`}
               >
                 <FiUpload className="h-5 w-5" />
                 Import
@@ -460,55 +489,57 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({
             </div>
           </section>
 
-          {/* Storage Stats */}
-          <section className="pt-4 border-t border-white/10">
-            <button
-              onClick={() => setIsDangerZoneExpanded(!isDangerZoneExpanded)}
-              className="w-full flex items-center justify-between text-left mb-3 group"
-            >
-              <h3 className="text-sm font-semibold text-white flex items-center gap-2 group-hover:text-red-400 transition-colors">
-                <FiAlertTriangle className="h-4 w-4 text-red-500" />
-                Danger Zone
-              </h3>
-              {isDangerZoneExpanded ? (
-                <FiChevronDown className="h-4 w-4 text-brand-text-dim" />
-              ) : (
-                <FiChevronRight className="h-4 w-4 text-brand-text-dim" />
-              )}
-            </button>
-
-            {isDangerZoneExpanded && (
-              <div className="bg-red-500/10 border border-red-500/20 rounded-xl p-4 animate-fadeIn">
-                <p className="text-sm text-brand-text-dim mb-4">
-                  These actions are permanent and cannot be undone.
-                </p>
-                <div className="flex flex-col gap-3">
-                  <button
-                    onClick={() => {
-                      setDangerAction("wipe");
-                      setShowDangerConfirm(true);
-                      setConfirmationText("");
-                    }}
-                    className="w-full py-2.5 px-4 rounded-lg font-semibold transition-colors bg-red-500/80 hover:bg-red-600 text-white flex items-center justify-center gap-2"
-                  >
-                    <FiTrash2 className="h-4 w-4" />
-                    Wipe Watchlist
-                  </button>
-                  <button
-                    onClick={() => {
-                      setDangerAction("delete");
-                      setShowDangerConfirm(true);
-                      setConfirmationText("");
-                    }}
-                    className="w-full py-2.5 px-4 rounded-lg font-semibold transition-colors bg-white/5 hover:bg-red-500/20 text-red-500 border border-red-500/30 hover:border-red-500/50 flex items-center justify-center gap-2"
-                  >
-                    <FiTrash2 className="h-4 w-4" />
-                    Delete Account
-                  </button>
+          {/* Danger Zone - hidden for demo users (auto-deleted) */}
+          {!user?.isDemo && (
+            <section className="pt-4 border-t border-white/10">
+              <button
+                onClick={() => setIsDangerZoneExpanded(!isDangerZoneExpanded)}
+                className="w-full flex items-center justify-between text-left mb-3 group"
+              >
+                <h3 className="text-sm font-semibold text-white flex items-center gap-2 group-hover:text-red-400 transition-colors">
+                  <FiAlertTriangle className="h-4 w-4 text-red-500" />
+                  Danger Zone
+                </h3>
+                {isDangerZoneExpanded ? (
+                  <FiChevronDown className="h-4 w-4 text-brand-text-dim" />
+                ) : (
+                  <FiChevronRight className="h-4 w-4 text-brand-text-dim" />
+                )}
+              </button>
+
+              {isDangerZoneExpanded && (
+                <div className="bg-red-500/10 border border-red-500/20 rounded-xl p-4 animate-fadeIn">
+                  <p className="text-sm text-brand-text-dim mb-4">
+                    These actions are permanent and cannot be undone.
+                  </p>
+                  <div className="flex flex-col gap-3">
+                    <button
+                      onClick={() => {
+                        setDangerAction("wipe");
+                        setShowDangerConfirm(true);
+                        setConfirmationText("");
+                      }}
+                      className="w-full py-2.5 px-4 rounded-lg font-semibold transition-colors bg-red-500/80 hover:bg-red-600 text-white flex items-center justify-center gap-2"
+                    >
+                      <FiTrash2 className="h-4 w-4" />
+                      Wipe Watchlist
+                    </button>
+                    <button
+                      onClick={() => {
+                        setDangerAction("delete");
+                        setShowDangerConfirm(true);
+                        setConfirmationText("");
+                      }}
+                      className="w-full py-2.5 px-4 rounded-lg font-semibold transition-colors bg-white/5 hover:bg-red-500/20 text-red-500 border border-red-500/30 hover:border-red-500/50 flex items-center justify-center gap-2"
+                    >
+                      <FiTrash2 className="h-4 w-4" />
+                      Delete Account
+                    </button>
+                  </div>
                 </div>
-              </div>
-            )}
-          </section>
+              )}
+            </section>
+          )}
 
           <StorageStats />
 
@@ -539,7 +570,7 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({
       {/* Danger Confirmation Modal - Nested */}
       {showDangerConfirm && (
         <div
-          className="fixed inset-0 z-[60] flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm"
+          className="fixed inset-0 z-60 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm"
           onClick={(e) => e.stopPropagation()}
         >
           <div className="bg-brand-surface border border-red-500/30 w-full max-w-md rounded-2xl p-6 shadow-2xl animate-fadeIn">
diff --git a/cinetrack-app/client/src/contexts/AuthContext.tsx b/cinetrack-app/client/src/contexts/AuthContext.tsx
index 6221f2f..3dc1af5 100644
--- a/cinetrack-app/client/src/contexts/AuthContext.tsx
+++ b/cinetrack-app/client/src/contexts/AuthContext.tsx
@@ -14,6 +14,7 @@ const API_BASE_URL = '';
 interface User {
     id: string;
     email: string;
+    isDemo?: boolean;
 }
 
 interface AuthContextType {
diff --git a/cinetrack-app/client/src/pages/AuthPage.tsx b/cinetrack-app/client/src/pages/AuthPage.tsx
index a1ccc2c..0ae22d1 100644
--- a/cinetrack-app/client/src/pages/AuthPage.tsx
+++ b/cinetrack-app/client/src/pages/AuthPage.tsx
@@ -20,8 +20,8 @@ const PasswordInput: React.FC<{
                 onChange={(e) => onChange(e.target.value)}
                 onBlur={onBlur}
                 className={`w-full px-4 py-3 pr-12 bg-black/40 border rounded-lg text-white placeholder:text-brand-text-muted focus:outline-none focus:ring-1 transition-all ${hasError
-                        ? "border-red-500/50 focus:border-red-500 focus:ring-red-500/30"
-                        : "border-white/5 focus:border-brand-primary/50 focus:ring-brand-primary/30"
+                    ? "border-red-500/50 focus:border-red-500 focus:ring-red-500/30"
+                    : "border-white/5 focus:border-brand-primary/50 focus:ring-brand-primary/30"
                     }`}
             />
             <button
@@ -150,10 +150,10 @@ export const AuthPage: React.FC = () => {
 
     return (
         <div
-            className="min-h-screen bg-brand-bg flex items-center justify-center p-4 overflow-hidden"
+            className="min-h-screen bg-brand-bg flex items-center justify-center p-4 py-8"
             onMouseMove={handleMouseMove}
         >
-            <div className="absolute inset-0 overflow-hidden">
+            <div className="fixed inset-0 pointer-events-none overflow-hidden">
                 <div className="absolute inset-0 animate-gradient-slow bg-gradient-radial will-change-[background-position]" />
                 <div className="absolute top-0 left-1/4 w-96 h-96 bg-brand-primary/20 rounded-full blur-[120px] animate-float-slow will-change-transform" />
                 <div className="hidden sm:block absolute bottom-0 right-1/4 w-80 h-80 bg-brand-secondary/15 rounded-full blur-[100px] animate-float-reverse will-change-transform" />
@@ -206,7 +206,7 @@ export const AuthPage: React.FC = () => {
                     {/* Error Message */}
                     {error && (
                         <div className="mb-4 p-3 bg-red-500/20 border border-red-500/50 rounded-xl flex items-start gap-2 animate-shake">
-                            <FiAlertCircle className="h-5 w-5 text-red-400 flex-shrink-0 mt-0.5" />
+                            <FiAlertCircle className="h-5 w-5 text-red-400 shrink-0 mt-0.5" />
                             <p className="text-red-400 text-sm">{error}</p>
                         </div>
                     )}
@@ -250,24 +250,39 @@ export const AuthPage: React.FC = () => {
                         </div>
 
                         {mode === "register" && (
-                            <div className="animate-slideDown">
-                                <label htmlFor="inviteCode" className="block text-sm text-brand-text-dim mb-2">
-                                    Invite Code
-                                </label>
-                                <input
-                                    id="inviteCode"
-                                    type="text"
-                                    value={inviteCode}
-                                    onChange={(e) => handleInviteCodeChange(e.target.value)}
-                                    onBlur={() => handleBlur("inviteCode")}
-                                    className={`w-full px-4 py-3 bg-black/40 border rounded-lg text-white placeholder:text-brand-text-muted focus:outline-none focus:ring-1 transition-all ${fieldErrors.inviteCode && touched.inviteCode
-                                        ? "border-red-500/50 focus:border-red-500 focus:ring-red-500/30"
-                                        : "border-white/5 focus:border-brand-primary/50 focus:ring-brand-primary/30"
-                                        }`}
-                                />
-                                {fieldErrors.inviteCode && touched.inviteCode && (
-                                    <p className="text-red-400 text-xs mt-1">{fieldErrors.inviteCode}</p>
-                                )}
+                            <div className="animate-slideDown space-y-3">
+                                <div>
+                                    <label htmlFor="inviteCode" className="block text-sm text-brand-text-dim mb-2">
+                                        Invite Code
+                                    </label>
+                                    <input
+                                        id="inviteCode"
+                                        type="text"
+                                        value={inviteCode}
+                                        onChange={(e) => handleInviteCodeChange(e.target.value)}
+                                        onBlur={() => handleBlur("inviteCode")}
+                                        className={`w-full px-4 py-3 bg-black/40 border rounded-lg text-white placeholder:text-brand-text-muted focus:outline-none focus:ring-1 transition-all ${fieldErrors.inviteCode && touched.inviteCode
+                                            ? "border-red-500/50 focus:border-red-500 focus:ring-red-500/30"
+                                            : "border-white/5 focus:border-brand-primary/50 focus:ring-brand-primary/30"
+                                            }`}
+                                    />
+                                    {fieldErrors.inviteCode && touched.inviteCode && (
+                                        <p className="text-red-400 text-xs mt-1">{fieldErrors.inviteCode}</p>
+                                    )}
+                                </div>
+
+                                {/* Invite code explanation */}
+                                <p className="text-xs text-brand-text-muted">
+                                    SceneStack is a personal project. Invite codes keep this instance private.
+                                </p>
+
+                                {/* Demo hint */}
+                                <div className="bg-brand-primary/10 border border-brand-primary/20 rounded-lg p-3">
+                                    <p className="text-sm text-brand-primary">
+                                        <span className="font-medium">Want to try it out?</span>{" "}
+                                        Use demo code: <code className="bg-black/40 px-1.5 py-0.5 rounded font-mono text-xs">DEMONOW</code>
+                                    </p>
+                                </div>
                             </div>
                         )}
 
@@ -309,7 +324,7 @@ export const AuthPage: React.FC = () => {
                     </p>
                 </div>
 
-                <div className="absolute -z-10 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[102%] h-[102%] bg-gradient-to-b from-brand-primary/20 via-transparent to-transparent rounded-2xl blur-sm" />
+                <div className="absolute -z-10 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[102%] h-[102%] bg-linear-to-b from-brand-primary/20 via-transparent to-transparent rounded-2xl blur-sm" />
             </div>
 
             {/* CSS Animations */}
diff --git a/cinetrack-app/server/.env.example b/cinetrack-app/server/.env.example
index d61cc5d..0f1bad8 100644
--- a/cinetrack-app/server/.env.example
+++ b/cinetrack-app/server/.env.example
@@ -21,3 +21,9 @@ TMDB_API_READ_ACCESS_TOKEN=your_tmdb_read_access_token
 # Get a free Redis instance at: https://upstash.com/
 # use the TCP connection string
 REDIS_URL=rediss://default:your_password@your-instance.upstash.io:6379
+
+# Demo mode settings
+# Demo invite code (default: DEMONOW)
+DEMO_CODE=DEMONOW
+# Demo account TTL in seconds (default: 14400 = 4 hours)
+DEMO_TTL_SECONDS=14400
diff --git a/cinetrack-app/server/src/config.js b/cinetrack-app/server/src/config.js
index 160999d..aefa2c7 100644
--- a/cinetrack-app/server/src/config.js
+++ b/cinetrack-app/server/src/config.js
@@ -98,6 +98,8 @@ module.exports = {
         secret: process.env.JWT_SECRET,
     },
     inviteCodes: process.env.INVITE_CODES.split(",").map((c) => c.trim()).filter(Boolean),
+    demoCode: process.env.DEMO_CODE || "DEMONOW",
+    demoTtlSeconds: parseInt(process.env.DEMO_TTL_SECONDS, 10) || 14400,
     port: parseInt(process.env.PORT, 10) || 3001,
     cache,
 };
diff --git a/cinetrack-app/server/src/routes/authRoutes.js b/cinetrack-app/server/src/routes/authRoutes.js
index 57417f9..58e5c62 100644
--- a/cinetrack-app/server/src/routes/authRoutes.js
+++ b/cinetrack-app/server/src/routes/authRoutes.js
@@ -10,38 +10,62 @@ const { ObjectId } = require("mongodb");
 const router = express.Router();
 
 const INVITE_CODES = config.inviteCodes;
+const DEMO_CODE = config.demoCode;
+
+module.exports = (usersCollection, demoUsersCollection) => {
+    const findUser = async (query) => {
+        let user = await usersCollection.findOne(query);
+        if (user) return { user, isDemo: false };
+
+        user = await demoUsersCollection.findOne(query);
+        if (user) return { user, isDemo: true };
+
+        return { user: null, isDemo: false };
+    };
+
+    const getCollectionForUser = async (userId) => {
+        const user = await usersCollection.findOne({ _id: new ObjectId(userId) });
+        if (user) return { collection: usersCollection, user, isDemo: false };
+
+        const demoUser = await demoUsersCollection.findOne({ _id: new ObjectId(userId) });
+        if (demoUser) return { collection: demoUsersCollection, user: demoUser, isDemo: true };
+
+        return { collection: null, user: null, isDemo: false };
+    };
 
-module.exports = (usersCollection) => {
     // POST /api/auth/register
     router.post("/register", validate(registerSchema), async (req, res) => {
         try {
             const { email, password, inviteCode } = req.body;
+            const isDemo = inviteCode === DEMO_CODE;
 
-            if (!INVITE_CODES.includes(inviteCode)) {
+            if (!isDemo && !INVITE_CODES.includes(inviteCode)) {
                 return res.status(403).json({ message: "Invalid invite code" });
             }
 
-            const existingUser = await usersCollection.findOne({ email: email.toLowerCase() });
+            const { user: existingUser } = await findUser({ email: email.toLowerCase() });
             if (existingUser) {
                 return res.status(409).json({ message: "Email already registered" });
             }
 
             const passwordHash = await bcrypt.hash(password, 10);
+            const collection = isDemo ? demoUsersCollection : usersCollection;
 
-            const result = await usersCollection.insertOne({
+            const result = await collection.insertOne({
                 email: email.toLowerCase(),
                 passwordHash,
                 createdAt: new Date(),
             });
 
+            const tokenExpiry = isDemo ? "4h" : "7d";
             const token = jwt.sign({ userId: result.insertedId.toString() }, JWT_SECRET, {
-                expiresIn: "7d",
+                expiresIn: tokenExpiry,
             });
 
             res.status(201).json({
                 message: "Account created successfully",
                 token,
-                user: { id: result.insertedId, email: email.toLowerCase() },
+                user: { id: result.insertedId, email: email.toLowerCase(), isDemo },
             });
         } catch (err) {
             console.error("Registration error:", err);
@@ -54,7 +78,7 @@ module.exports = (usersCollection) => {
         try {
             const { email, password } = req.body;
 
-            const user = await usersCollection.findOne({ email: email.toLowerCase() });
+            const { user, isDemo } = await findUser({ email: email.toLowerCase() });
             if (!user) {
                 return res.status(401).json({ message: "Invalid email or password" });
             }
@@ -64,13 +88,14 @@ module.exports = (usersCollection) => {
                 return res.status(401).json({ message: "Invalid email or password" });
             }
 
+            const tokenExpiry = isDemo ? "4h" : "7d";
             const token = jwt.sign({ userId: user._id.toString() }, JWT_SECRET, {
-                expiresIn: "7d",
+                expiresIn: tokenExpiry,
             });
 
             res.json({
                 token,
-                user: { id: user._id, email: user.email },
+                user: { id: user._id, email: user.email, isDemo },
             });
         } catch (err) {
             console.error("Login error:", err);
@@ -81,14 +106,14 @@ module.exports = (usersCollection) => {
     // GET /api/auth/me - Get current user
     router.get("/me", authMiddleware, async (req, res) => {
         try {
-            const user = await usersCollection.findOne({ _id: new ObjectId(req.userId) });
+            const { user, isDemo } = await getCollectionForUser(req.userId);
 
             if (!user) {
                 return res.status(404).json({ message: "User not found" });
             }
 
             res.json({
-                user: { id: user._id, email: user.email },
+                user: { id: user._id, email: user.email, isDemo },
             });
         } catch (err) {
             console.error("Get user error:", err);
@@ -100,19 +125,23 @@ module.exports = (usersCollection) => {
     router.put("/password", authMiddleware, validate(changePasswordSchema), async (req, res) => {
         try {
             const { currentPassword, newPassword } = req.body;
+            const { collection, user, isDemo } = await getCollectionForUser(req.userId);
 
-            const user = await usersCollection.findOne({ _id: new ObjectId(req.userId) });
             if (!user) {
                 return res.status(404).json({ message: "User not found" });
             }
 
+            if (isDemo) {
+                return res.status(403).json({ message: "Demo accounts cannot change password" });
+            }
+
             const isValid = await bcrypt.compare(currentPassword, user.passwordHash);
             if (!isValid) {
                 return res.status(401).json({ message: "Current password is incorrect" });
             }
 
             const newPasswordHash = await bcrypt.hash(newPassword, 10);
-            await usersCollection.updateOne(
+            await collection.updateOne(
                 { _id: new ObjectId(req.userId) },
                 { $set: { passwordHash: newPasswordHash } }
             );
@@ -124,11 +153,20 @@ module.exports = (usersCollection) => {
         }
     });
 
-    // DELETE /api/auth - Delete account
+    // DELETE /api/auth - Delete account 
     router.delete("/", authMiddleware, async (req, res) => {
         try {
-            const userId = new ObjectId(req.userId);
-            const userResult = await usersCollection.deleteOne({ _id: userId });
+            const { collection, user, isDemo } = await getCollectionForUser(req.userId);
+
+            if (!user) {
+                return res.status(404).json({ message: "User not found" });
+            }
+
+            if (isDemo) {
+                return res.status(403).json({ message: "Demo accounts are deleted automatically" });
+            }
+
+            const userResult = await collection.deleteOne({ _id: new ObjectId(req.userId) });
             if (userResult.deletedCount === 0) {
                 return res.status(404).json({ message: "User not found" });
             }
diff --git a/cinetrack-app/server/src/routes/watchlistRoutes.js b/cinetrack-app/server/src/routes/watchlistRoutes.js
index 7f537f5..9f8f4d8 100644
--- a/cinetrack-app/server/src/routes/watchlistRoutes.js
+++ b/cinetrack-app/server/src/routes/watchlistRoutes.js
@@ -4,6 +4,7 @@ const { asyncHandler, AppError } = require("../middleware/errorHandler");
 const { validate } = require("../middleware/validate");
 const { watchlistItemSchema, watchlistImportSchema } = require("../validation/schemas");
 const { cache } = require("../config");
+const { ObjectId } = require("mongodb");
 
 const router = express.Router();
 
@@ -37,13 +38,22 @@ const computeWatchlistStatus = (item) => {
     return "watching";
 };
 
-module.exports = (watchlistCollection, broadcastToUser, client) => {
+module.exports = (watchlistCollection, demoWatchlistCollection, broadcastToUser, client, usersCollection, demoUsersCollection) => {
+    const getWatchlistCollection = async (userId) => {
+        const demoUser = await demoUsersCollection.findOne({ _id: new ObjectId(userId) });
+        if (demoUser) {
+            return { collection: demoWatchlistCollection, isDemo: true };
+        }
+        return { collection: watchlistCollection, isDemo: false };
+    };
+
     // GET /api/watchlist
     router.get(
         "/",
         authMiddleware,
         asyncHandler(async (req, res) => {
-            const items = await watchlistCollection
+            const { collection } = await getWatchlistCollection(req.userId);
+            const items = await collection
                 .find({ userId: req.userId })
                 .sort({ _id: -1 })
                 .toArray();
@@ -56,8 +66,9 @@ module.exports = (watchlistCollection, broadcastToUser, client) => {
         "/stats",
         authMiddleware,
         asyncHandler(async (req, res) => {
-            const userItemCount = await watchlistCollection.countDocuments({ userId: req.userId });
-            const totalDocuments = await watchlistCollection.countDocuments();
+            const { collection, isDemo } = await getWatchlistCollection(req.userId);
+            const userItemCount = await collection.countDocuments({ userId: req.userId });
+            const totalDocuments = await collection.countDocuments();
             const db = client.db("scenestackDB");
 
             let dbStats = null;
@@ -68,7 +79,7 @@ module.exports = (watchlistCollection, broadcastToUser, client) => {
             }
 
             res.json({
-                user: { itemCount: userItemCount },
+                user: { itemCount: userItemCount, isDemo },
                 collection: {
                     totalDocuments,
                     storageSize: dbStats?.storageSize || 0,
@@ -87,6 +98,7 @@ module.exports = (watchlistCollection, broadcastToUser, client) => {
         "/recommendations",
         authMiddleware,
         asyncHandler(async (req, res) => {
+            const { collection } = await getWatchlistCollection(req.userId);
             const refresh = req.query.refresh === "true";
             const cacheKey = `user:recommendations:${req.userId}`;
 
@@ -98,7 +110,7 @@ module.exports = (watchlistCollection, broadcastToUser, client) => {
                 }
             }
 
-            const watchlist = await watchlistCollection
+            const watchlist = await collection
                 .find({ userId: req.userId })
                 .toArray();
 
@@ -148,12 +160,13 @@ module.exports = (watchlistCollection, broadcastToUser, client) => {
         "/:id",
         authMiddleware,
         asyncHandler(async (req, res) => {
+            const { collection } = await getWatchlistCollection(req.userId);
             const id = parseInt(req.params.id, 10);
             if (isNaN(id)) {
                 throw new AppError("Invalid ID format.", 400);
             }
 
-            const item = await watchlistCollection.findOne({ id, userId: req.userId });
+            const item = await collection.findOne({ id, userId: req.userId });
             if (!item) {
                 throw new AppError("Item not found.", 404);
             }
@@ -167,13 +180,19 @@ module.exports = (watchlistCollection, broadcastToUser, client) => {
         authMiddleware,
         validate(watchlistItemSchema),
         asyncHandler(async (req, res) => {
+            const { collection } = await getWatchlistCollection(req.userId);
             const item = req.body;
 
             const { _id, ...itemWithoutId } = item;
             const watchlistStatus = computeWatchlistStatus(itemWithoutId);
-            const itemWithUser = { ...itemWithoutId, userId: req.userId, watchlistStatus };
-
-            await watchlistCollection.replaceOne(
+            const itemWithUser = {
+                ...itemWithoutId,
+                userId: req.userId,
+                watchlistStatus,
+                createdAt: new Date()
+            };
+
+            await collection.replaceOne(
                 { id: item.id, userId: req.userId },
                 itemWithUser,
                 { upsert: true }
@@ -189,12 +208,13 @@ module.exports = (watchlistCollection, broadcastToUser, client) => {
         "/:id",
         authMiddleware,
         asyncHandler(async (req, res) => {
+            const { collection } = await getWatchlistCollection(req.userId);
             const id = parseInt(req.params.id, 10);
             if (isNaN(id)) {
                 throw new AppError("Invalid ID format.", 400);
             }
 
-            const result = await watchlistCollection.deleteOne({ id, userId: req.userId });
+            const result = await collection.deleteOne({ id, userId: req.userId });
             if (result.deletedCount !== 1) {
                 throw new AppError("Item not found.", 404);
             }
@@ -209,16 +229,24 @@ module.exports = (watchlistCollection, broadcastToUser, client) => {
         "/",
         authMiddleware,
         asyncHandler(async (req, res) => {
-            await watchlistCollection.deleteMany({ userId: req.userId });
+            const { collection } = await getWatchlistCollection(req.userId);
+            await collection.deleteMany({ userId: req.userId });
             broadcastToUser(req.userId, "watchlist:sync", { trigger: "wipe" });
             res.status(204).send();
         })
     );
 
-    // POST /api/watchlist/import
+    // POST /api/watchlist/import (blocked for demo users)
     router.post(
         "/import",
         authMiddleware,
+        asyncHandler(async (req, res, next) => {
+            const { isDemo } = await getWatchlistCollection(req.userId);
+            if (isDemo) {
+                throw new AppError("Demo accounts cannot import watchlists", 403);
+            }
+            next();
+        }),
         validate(watchlistImportSchema),
         asyncHandler(async (req, res) => {
             const items = req.body;
@@ -229,7 +257,8 @@ module.exports = (watchlistCollection, broadcastToUser, client) => {
                 const itemsWithUser = items.map((item) => ({
                     ...item,
                     userId: req.userId,
-                    watchlistStatus: computeWatchlistStatus(item)
+                    watchlistStatus: computeWatchlistStatus(item),
+                    createdAt: new Date()
                 }));
                 await watchlistCollection.insertMany(itemsWithUser);
             }
@@ -244,6 +273,7 @@ module.exports = (watchlistCollection, broadcastToUser, client) => {
         "/by-status/:status",
         authMiddleware,
         asyncHandler(async (req, res) => {
+            const { collection } = await getWatchlistCollection(req.userId);
             const { status } = req.params;
             const validStatuses = ["watchlist", "watching", "watched"];
             if (!validStatuses.includes(status)) {
@@ -257,13 +287,13 @@ module.exports = (watchlistCollection, broadcastToUser, client) => {
             const query = { userId: req.userId, watchlistStatus: status };
 
             const [items, totalCount] = await Promise.all([
-                watchlistCollection
+                collection
                     .find(query)
                     .sort({ _id: -1 })
                     .skip(skip)
                     .limit(limit + 1)
                     .toArray(),
-                watchlistCollection.countDocuments(query)
+                collection.countDocuments(query)
             ]);
 
             const hasMore = items.length > limit;
@@ -275,4 +305,3 @@ module.exports = (watchlistCollection, broadcastToUser, client) => {
 
     return router;
 };
-
diff --git a/cinetrack-app/server/src/server.js b/cinetrack-app/server/src/server.js
index 88301fb..73feae2 100644
--- a/cinetrack-app/server/src/server.js
+++ b/cinetrack-app/server/src/server.js
@@ -116,6 +116,8 @@ const client = new MongoClient(config.mongo.uri, {
 
 let watchlistCollection;
 let usersCollection;
+let demoUsersCollection;
+let demoWatchlistCollection;
 
 async function connectToDb() {
   try {
@@ -123,12 +125,27 @@ async function connectToDb() {
     const db = client.db("scenestackDB");
     watchlistCollection = db.collection("watchlist");
     usersCollection = db.collection("users");
+    demoUsersCollection = db.collection("demoUsers");
+    demoWatchlistCollection = db.collection("demoWatchlist");
     console.log("Successfully connected to MongoDB.");
 
-    // Create indexes
+    // Create indexes for production collections
     await watchlistCollection.createIndex({ userId: 1, id: 1 }, { unique: true });
     await watchlistCollection.createIndex({ userId: 1, watchlistStatus: 1 });
     await usersCollection.createIndex({ email: 1 }, { unique: true });
+
+    // Create indexes for demo collections with TTL for auto-cleanup
+    await demoUsersCollection.createIndex({ email: 1 }, { unique: true });
+    await demoUsersCollection.createIndex(
+      { createdAt: 1 },
+      { expireAfterSeconds: config.demoTtlSeconds }
+    );
+    await demoWatchlistCollection.createIndex({ userId: 1, id: 1 }, { unique: true });
+    await demoWatchlistCollection.createIndex(
+      { createdAt: 1 },
+      { expireAfterSeconds: config.demoTtlSeconds }
+    );
+    console.log(`Demo TTL indexes created (${config.demoTtlSeconds}s)`);
   } catch (err) {
     console.error("Failed to connect to MongoDB:", err.message);
     process.exit(1);
@@ -150,13 +167,19 @@ client.on("timeout", () => {
 
 // --- Auth Routes ---
 app.use("/api/auth", authLimiter, (req, res, next) => {
-  req.usersCollection = usersCollection;
-  authRoutes(usersCollection)(req, res, next);
+  authRoutes(usersCollection, demoUsersCollection)(req, res, next);
 });
 
 // --- Watchlist Routes ---
 app.use("/api/watchlist", (req, res, next) => {
-  watchlistRoutes(watchlistCollection, broadcastToUser, client)(req, res, next);
+  watchlistRoutes(
+    watchlistCollection,
+    demoWatchlistCollection,
+    broadcastToUser,
+    client,
+    usersCollection,
+    demoUsersCollection
+  )(req, res, next);
 });
 
 // --- TMDB Proxy Routes ---

From 1f22610a3976f46baec8d12a7569a1060705dcb1 Mon Sep 17 00:00:00 2001
From: Alameen <smokinaxle67@gmail.com>
Date: Sun, 28 Dec 2025 07:51:11 +0530
Subject: [PATCH 2/7] add docker-compose for local MongoDB and Redis

---
 cinetrack-app/.gitignore               |  1 +
 cinetrack-app/infra/docker-compose.yml | 34 ++++++++++++++++++++++++++
 2 files changed, 35 insertions(+)
 create mode 100644 cinetrack-app/infra/docker-compose.yml

diff --git a/cinetrack-app/.gitignore b/cinetrack-app/.gitignore
index b50664c..4c4a1b6 100644
--- a/cinetrack-app/.gitignore
+++ b/cinetrack-app/.gitignore
@@ -14,6 +14,7 @@ dist-ssr
 .env
 .env.*
 !.env.example
+infra/data
 
 # Editor directories and files
 .vscode/*
diff --git a/cinetrack-app/infra/docker-compose.yml b/cinetrack-app/infra/docker-compose.yml
new file mode 100644
index 0000000..ea5532e
--- /dev/null
+++ b/cinetrack-app/infra/docker-compose.yml
@@ -0,0 +1,34 @@
+version: "3.9"
+services:
+  mongo:
+    image: mongo:7
+    container_name: local-mongo
+    restart: unless-stopped
+    ports:
+      - "27017:27017"
+    environment:
+      MONGO_INITDB_ROOT_USERNAME: admin
+      MONGO_INITDB_ROOT_PASSWORD: admin
+    volumes:
+      - ./data/mongo:/data/db
+    command: ["mongod", "--auth"]
+    healthcheck:
+      test: ["CMD", "mongosh", "--eval", "db.adminCommand('ping')"]
+      interval: 10s
+      timeout: 5s
+      retries: 3
+
+  redis:
+    image: redis:7
+    container_name: local-redis
+    restart: unless-stopped
+    ports:
+      - "6379:6379"
+    volumes:
+      - ./data/redis:/data
+    command: ["redis-server", "--appendonly", "yes"]
+    healthcheck:
+      test: ["CMD", "redis-cli", "ping"]
+      interval: 10s
+      timeout: 3s
+      retries: 3
\ No newline at end of file

From 781d72ecc3248ad46710c808e722279b0ce172ad Mon Sep 17 00:00:00 2001
From: Alameen <smokinaxle67@gmail.com>
Date: Thu, 1 Jan 2026 01:10:26 +0530
Subject: [PATCH 3/7] small fixes

---
 cinetrack-app/client/.env.example             |  6 +-
 .../components/common/DemoWelcomeModal.tsx    |  6 +-
 .../client/src/services/tmdbService.ts        | 57 ++++++++++++++-----
 cinetrack-app/infra/docker-compose.yml        | 17 +-----
 4 files changed, 51 insertions(+), 35 deletions(-)

diff --git a/cinetrack-app/client/.env.example b/cinetrack-app/client/.env.example
index 06581bd..4388b4a 100644
--- a/cinetrack-app/client/.env.example
+++ b/cinetrack-app/client/.env.example
@@ -1,10 +1,10 @@
 # Client Environment Variables
 # Copy this file to .env and fill in your values
 
-# TMDB API Read Access Token (required)
-# Used as fallback if backend proxy fails
+# TMDB API Read Access Token (optional - only needed as fallback)
+# The server proxies all TMDB requests, so this is only used if proxy fails
 # Get one at: https://www.themoviedb.org/settings/api
-VITE_TMDB_API_READ_ACCESS_TOKEN=your_tmdb_api_read_access_token
+VITE_TMDB_API_READ_ACCESS_TOKEN=
 
 # API Base URL (optional, for development when server runs separately)
 # Leave empty in production as the client is served by the backend
diff --git a/cinetrack-app/client/src/components/common/DemoWelcomeModal.tsx b/cinetrack-app/client/src/components/common/DemoWelcomeModal.tsx
index b892db5..5c1c316 100644
--- a/cinetrack-app/client/src/components/common/DemoWelcomeModal.tsx
+++ b/cinetrack-app/client/src/components/common/DemoWelcomeModal.tsx
@@ -76,8 +76,12 @@ export const useDemoWelcome = (isDemo: boolean | undefined) => {
     const [showWelcome, setShowWelcome] = useState(false);
 
     useEffect(() => {
-        if (isDemo && !sessionStorage.getItem(DEMO_WELCOME_SHOWN_KEY)) {
+        // Only show for demo users who haven't seen the modal yet
+        if (isDemo === true && !sessionStorage.getItem(DEMO_WELCOME_SHOWN_KEY)) {
             setShowWelcome(true);
+        } else if (isDemo === false) {
+            // Ensure modal is hidden for non-demo users
+            setShowWelcome(false);
         }
     }, [isDemo]);
 
diff --git a/cinetrack-app/client/src/services/tmdbService.ts b/cinetrack-app/client/src/services/tmdbService.ts
index 8fe3ba6..74c96e4 100644
--- a/cinetrack-app/client/src/services/tmdbService.ts
+++ b/cinetrack-app/client/src/services/tmdbService.ts
@@ -70,28 +70,55 @@ export const searchMedia = async (query: string): Promise<SearchResult[]> => {
   return data.results;
 };
 
+interface DiscoverData {
+  trending: SearchResult[];
+  popularMovies: SearchResult[];
+  popularTV: SearchResult[];
+}
+
+let cachedDiscover: DiscoverData | null = null;
+
+const fetchDiscoverData = async (): Promise<DiscoverData> => {
+  if (cachedDiscover) return cachedDiscover;
+
+  try {
+    const data = await fetchFromProxy<DiscoverData>("/discover");
+    cachedDiscover = data;
+    setTimeout(() => { cachedDiscover = null; }, 5 * 60 * 1000);
+    return data;
+  } catch (err) {
+    console.warn("Proxy /discover failed, falling back to direct TMDB:", err);
+    const [trending, popularMovies, popularTV] = await Promise.all([
+      fetchFromTMDB<{ results: SearchResult[] }>("trending/all/week"),
+      fetchFromTMDB<{ results: Omit<SearchResult, "media_type">[] }>("movie/popular"),
+      fetchFromTMDB<{ results: Omit<SearchResult, "media_type">[] }>("tv/popular"),
+    ]);
+    const data = {
+      trending: trending.results.filter(
+        (item) => item.media_type === "movie" || item.media_type === "tv"
+      ),
+      popularMovies: popularMovies.results.map((item) => ({ ...item, media_type: "movie" as const })),
+      popularTV: popularTV.results.map((item) => ({ ...item, media_type: "tv" as const })),
+    };
+    cachedDiscover = data;
+    setTimeout(() => { cachedDiscover = null; }, 5 * 60 * 1000);
+    return data;
+  }
+};
+
 export const getTrendingMedia = async (): Promise<SearchResult[]> => {
-  const data = await fetchFromTMDB<{ results: SearchResult[] }>(
-    `trending/all/week`
-  );
-  return data.results.filter(
-    (item) => item.media_type === "movie" || item.media_type === "tv"
-  );
+  const data = await fetchDiscoverData();
+  return data.trending;
 };
 
 export const getPopularMovies = async (): Promise<SearchResult[]> => {
-  const data = await fetchFromTMDB<{
-    results: Omit<SearchResult, "media_type">[];
-  }>(`movie/popular`);
-  return data.results.map((item) => ({ ...item, media_type: "movie" }));
+  const data = await fetchDiscoverData();
+  return data.popularMovies;
 };
 
 export const getPopularTVShows = async (): Promise<SearchResult[]> => {
-  const data = await fetchFromTMDB<{
-    results: Omit<SearchResult, "media_type">[];
-  }>(`tv/popular`);
-  // Explicitly add media_type as it might be missing from this endpoint
-  return data.results.map((item) => ({ ...item, media_type: "tv" }));
+  const data = await fetchDiscoverData();
+  return data.popularTV;
 };
 
 export const getMovieDetails = async (id: number): Promise<MovieDetail> => {
diff --git a/cinetrack-app/infra/docker-compose.yml b/cinetrack-app/infra/docker-compose.yml
index ea5532e..d0ab782 100644
--- a/cinetrack-app/infra/docker-compose.yml
+++ b/cinetrack-app/infra/docker-compose.yml
@@ -1,4 +1,3 @@
-version: "3.9"
 services:
   mongo:
     image: mongo:7
@@ -6,17 +5,8 @@ services:
     restart: unless-stopped
     ports:
       - "27017:27017"
-    environment:
-      MONGO_INITDB_ROOT_USERNAME: admin
-      MONGO_INITDB_ROOT_PASSWORD: admin
     volumes:
       - ./data/mongo:/data/db
-    command: ["mongod", "--auth"]
-    healthcheck:
-      test: ["CMD", "mongosh", "--eval", "db.adminCommand('ping')"]
-      interval: 10s
-      timeout: 5s
-      retries: 3
 
   redis:
     image: redis:7
@@ -26,9 +16,4 @@ services:
       - "6379:6379"
     volumes:
       - ./data/redis:/data
-    command: ["redis-server", "--appendonly", "yes"]
-    healthcheck:
-      test: ["CMD", "redis-cli", "ping"]
-      interval: 10s
-      timeout: 3s
-      retries: 3
\ No newline at end of file
+    command: ["redis-server", "--appendonly", "yes"]
\ No newline at end of file

From f498e7effa0878ee9b68295f407427dce5fd3a5e Mon Sep 17 00:00:00 2001
From: Alameen <smokinaxle67@gmail.com>
Date: Fri, 2 Jan 2026 09:40:25 +0530
Subject: [PATCH 4/7] remove client-side TMDB API exposure and enforce proxy

---
 .../client/src/constants/constants.ts         |   1 -
 .../client/src/services/tmdbService.ts        | 171 +++++-------------
 2 files changed, 49 insertions(+), 123 deletions(-)

diff --git a/cinetrack-app/client/src/constants/constants.ts b/cinetrack-app/client/src/constants/constants.ts
index de16405..113f3e2 100644
--- a/cinetrack-app/client/src/constants/constants.ts
+++ b/cinetrack-app/client/src/constants/constants.ts
@@ -1,3 +1,2 @@
-export const TMDB_API_BASE_URL = "https://api.themoviedb.org/3";
 export const TMDB_IMAGE_BASE_URL = "https://image.tmdb.org/t/p/w500";
 export const TMDB_IMAGE_BASE_URL_MOBILE = "https://image.tmdb.org/t/p/w342";
diff --git a/cinetrack-app/client/src/services/tmdbService.ts b/cinetrack-app/client/src/services/tmdbService.ts
index 74c96e4..4919ade 100644
--- a/cinetrack-app/client/src/services/tmdbService.ts
+++ b/cinetrack-app/client/src/services/tmdbService.ts
@@ -1,4 +1,3 @@
-import { TMDB_API_BASE_URL } from "../constants/constants";
 import type {
   SearchResult,
   MovieDetail,
@@ -10,62 +9,47 @@ import type {
   WatchProviderCountry,
 } from "../types/types";
 
-const TMDB_API_READ_ACCESS_TOKEN = import.meta.env.VITE_TMDB_API_READ_ACCESS_TOKEN;
 const API_BASE_URL = "/api/tmdb";
 
-const fetchFromTMDB = async <T>(endpoint: string): Promise<T> => {
-  const url = `${TMDB_API_BASE_URL}/${endpoint}`;
-  const options = {
-    method: "GET",
-    headers: {
-      accept: "application/json",
-      Authorization: `Bearer ${TMDB_API_READ_ACCESS_TOKEN}`,
-    },
-  };
+export class TMDBServiceError extends Error {
+  public readonly statusCode: number;
+  public readonly isNetworkError: boolean;
 
-  const response = await fetch(url, options);
-
-  if (!response.ok) {
-    const errorData = await response.json().catch(() => ({}));
-    console.error("TMDB API Error:", errorData);
-    throw new Error(`TMDB API request failed: ${response.statusText}`);
+  constructor(message: string, statusCode = 0, isNetworkError = false) {
+    super(message);
+    this.name = "TMDBServiceError";
+    this.statusCode = statusCode;
+    this.isNetworkError = isNetworkError;
   }
-  return response.json();
-};
+}
 
 const fetchFromProxy = async <T>(endpoint: string): Promise<T> => {
-  const response = await fetch(`${API_BASE_URL}${endpoint}`);
-  if (!response.ok) {
-    throw new Error(`Proxy API error: ${response.status}`);
-  }
-  return response.json();
-};
+  let response: Response;
 
-const fetchWithFallback = async <T>(
-  proxyEndpoint: string,
-  tmdbFallback: () => Promise<T>
-): Promise<T> => {
   try {
-    return await fetchFromProxy<T>(proxyEndpoint);
-  } catch (err) {
-    console.warn("Proxy failed, falling back to direct TMDB:", err);
-    return tmdbFallback();
+    response = await fetch(`${API_BASE_URL}${endpoint}`);
+  } catch {
+    throw new TMDBServiceError(
+      "Unable to connect to the server. Please check your internet connection.",
+      0,
+      true
+    );
+  }
+
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => ({ message: "Unknown error" }));
+    throw new TMDBServiceError(
+      errorData.message || `Request failed with status ${response.status}`,
+      response.status
+    );
   }
+
+  return response.json();
 };
 
 export const searchMedia = async (query: string): Promise<SearchResult[]> => {
-  const data = await fetchWithFallback<{ results: SearchResult[] }>(
-    `/search?q=${encodeURIComponent(query)}`,
-    async () => {
-      const response = await fetchFromTMDB<{ results: SearchResult[] }>(
-        `search/multi?query=${encodeURIComponent(query)}`
-      );
-      return {
-        results: response.results.filter(
-          (item) => item.media_type === "movie" || item.media_type === "tv"
-        ),
-      };
-    }
+  const data = await fetchFromProxy<{ results: SearchResult[] }>(
+    `/search?q=${encodeURIComponent(query)}`
   );
   return data.results;
 };
@@ -81,29 +65,10 @@ let cachedDiscover: DiscoverData | null = null;
 const fetchDiscoverData = async (): Promise<DiscoverData> => {
   if (cachedDiscover) return cachedDiscover;
 
-  try {
-    const data = await fetchFromProxy<DiscoverData>("/discover");
-    cachedDiscover = data;
-    setTimeout(() => { cachedDiscover = null; }, 5 * 60 * 1000);
-    return data;
-  } catch (err) {
-    console.warn("Proxy /discover failed, falling back to direct TMDB:", err);
-    const [trending, popularMovies, popularTV] = await Promise.all([
-      fetchFromTMDB<{ results: SearchResult[] }>("trending/all/week"),
-      fetchFromTMDB<{ results: Omit<SearchResult, "media_type">[] }>("movie/popular"),
-      fetchFromTMDB<{ results: Omit<SearchResult, "media_type">[] }>("tv/popular"),
-    ]);
-    const data = {
-      trending: trending.results.filter(
-        (item) => item.media_type === "movie" || item.media_type === "tv"
-      ),
-      popularMovies: popularMovies.results.map((item) => ({ ...item, media_type: "movie" as const })),
-      popularTV: popularTV.results.map((item) => ({ ...item, media_type: "tv" as const })),
-    };
-    cachedDiscover = data;
-    setTimeout(() => { cachedDiscover = null; }, 5 * 60 * 1000);
-    return data;
-  }
+  const data = await fetchFromProxy<DiscoverData>("/discover");
+  cachedDiscover = data;
+  setTimeout(() => { cachedDiscover = null; }, 5 * 60 * 1000);
+  return data;
 };
 
 export const getTrendingMedia = async (): Promise<SearchResult[]> => {
@@ -122,60 +87,32 @@ export const getPopularTVShows = async (): Promise<SearchResult[]> => {
 };
 
 export const getMovieDetails = async (id: number): Promise<MovieDetail> => {
-  return fetchWithFallback<MovieDetail>(
-    `/details/movie/${id}`,
-    async () => {
-      const details = await fetchFromTMDB<Omit<MovieDetail, "media_type">>(
-        `movie/${id}?append_to_response=videos,credits,images`
-      );
-      return { ...details, media_type: "movie" };
-    }
-  );
+  return fetchFromProxy<MovieDetail>(`/details/movie/${id}`);
 };
 
 export const getTVDetails = async (id: number): Promise<TVDetail> => {
-  return fetchWithFallback<TVDetail>(
-    `/details/tv/${id}`,
-    async () => {
-      const details = await fetchFromTMDB<Omit<TVDetail, "media_type">>(
-        `tv/${id}?append_to_response=videos,credits,images`
-      );
-      return { ...details, media_type: "tv" };
-    }
-  );
+  return fetchFromProxy<TVDetail>(`/details/tv/${id}`);
 };
 
 export const getTVSeasonDetails = async (
   tvId: number,
   seasonNumber: number
 ): Promise<SeasonDetail> => {
-  return fetchWithFallback<SeasonDetail>(
-    `/season/${tvId}/${seasonNumber}`,
-    () => fetchFromTMDB<SeasonDetail>(`tv/${tvId}/season/${seasonNumber}`)
-  );
+  return fetchFromProxy<SeasonDetail>(`/season/${tvId}/${seasonNumber}`);
 };
 
 export const getWatchProviders = async (
   id: number,
   media_type: "movie" | "tv"
 ): Promise<WatchProvidersResponse> => {
-  return fetchWithFallback<WatchProvidersResponse>(
-    `/providers/${media_type}/${id}`,
-    () => fetchFromTMDB<WatchProvidersResponse>(`${media_type}/${id}/watch/providers`)
-  );
+  return fetchFromProxy<WatchProvidersResponse>(`/providers/${media_type}/${id}`);
 };
 
 export const getMovieRecommendations = async (
   id: number
 ): Promise<SearchResult[]> => {
-  const data = await fetchWithFallback<{ results: SearchResult[] }>(
-    `/recommendations/movie/${id}`,
-    async () => {
-      const response = await fetchFromTMDB<{ results: Omit<SearchResult, "media_type">[] }>(
-        `movie/${id}/recommendations`
-      );
-      return { results: response.results.map((item) => ({ ...item, media_type: "movie" as const })) };
-    }
+  const data = await fetchFromProxy<{ results: SearchResult[] }>(
+    `/recommendations/movie/${id}`
   );
   return data.results;
 };
@@ -183,14 +120,8 @@ export const getMovieRecommendations = async (
 export const getTVRecommendations = async (
   id: number
 ): Promise<SearchResult[]> => {
-  const data = await fetchWithFallback<{ results: SearchResult[] }>(
-    `/recommendations/tv/${id}`,
-    async () => {
-      const response = await fetchFromTMDB<{ results: Omit<SearchResult, "media_type">[] }>(
-        `tv/${id}/recommendations`
-      );
-      return { results: response.results.map((item) => ({ ...item, media_type: "tv" as const })) };
-    }
+  const data = await fetchFromProxy<{ results: SearchResult[] }>(
+    `/recommendations/tv/${id}`
   );
   return data.results;
 };
@@ -199,10 +130,7 @@ export const getMediaImages = async (
   id: number,
   media_type: "movie" | "tv"
 ) => {
-  return fetchWithFallback<{ logos: LogoImage[] }>(
-    `/images/${media_type}/${id}`,
-    () => fetchFromTMDB<{ logos: LogoImage[] }>(`${media_type}/${id}/images`)
-  );
+  return fetchFromProxy<{ logos: LogoImage[] }>(`/images/${media_type}/${id}`);
 };
 
 export const getBestLogo = (logos?: LogoImage[]): LogoImage | null => {
@@ -222,26 +150,26 @@ export const getBestLogo = (logos?: LogoImage[]): LogoImage | null => {
   return logos[0];
 };
 
-export const getBestTrailer = (videos?: { results: any[] }): any | null => {
+export const getBestTrailer = (videos?: { results: { site: string; type: string; official: boolean; key: string }[] }): { site: string; type: string; official: boolean; key: string } | null => {
   const videoList = videos?.results;
   if (!videoList) return null;
 
-  const youtubeVideos = videoList.filter((v: any) => v.site === "YouTube");
+  const youtubeVideos = videoList.filter((v) => v.site === "YouTube");
 
   const officialTrailer = youtubeVideos.find(
-    (v: any) => v.type === "Trailer" && v.official
+    (v) => v.type === "Trailer" && v.official
   );
   if (officialTrailer) return officialTrailer;
 
-  const anyTrailer = youtubeVideos.find((v: any) => v.type === "Trailer");
+  const anyTrailer = youtubeVideos.find((v) => v.type === "Trailer");
   if (anyTrailer) return anyTrailer;
 
   const officialTeaser = youtubeVideos.find(
-    (v: any) => v.type === "Teaser" && v.official
+    (v) => v.type === "Teaser" && v.official
   );
   if (officialTeaser) return officialTeaser;
 
-  const anyTeaser = youtubeVideos.find((v: any) => v.type === "Teaser");
+  const anyTeaser = youtubeVideos.find((v) => v.type === "Teaser");
   if (anyTeaser) return anyTeaser;
 
   return null;
@@ -267,7 +195,6 @@ export const combineRentBuyProviders = (providers?: WatchProviderCountry | null)
   return Array.from(combined.values());
 };
 
-// Logo Cache
 const logoCache = new Map<number, string | null>();
 
 import { selectBestLogo, getLogoUrl } from "../utils/logoHelpers";
@@ -287,7 +214,7 @@ export const fetchAndCacheLogo = async (id: number, media_type: "movie" | "tv"):
     const url = getLogoUrl(bestLogo) || null;
     logoCache.set(id, url);
     return url;
-  } catch (error) {
+  } catch {
     logoCache.set(id, null);
     return null;
   }

From f336086b647f966cf1d29beb020d77ab6cd770c4 Mon Sep 17 00:00:00 2001
From: Alameen <smokinaxle67@gmail.com>
Date: Fri, 2 Jan 2026 10:07:07 +0530
Subject: [PATCH 5/7] feat: retire custom tabs for actual SPA routing

- Replaced the custom "Tab" system with react-router-dom
- Implemented RootLayout and Outlet for a smoother, more "legit" SPA experience.
- Updated ViewAllPage to use dynamic params instead of state telepathy.
---
 cinetrack-app/client/package.json             |   1 +
 cinetrack-app/client/src/App.tsx              | 405 +-----------------
 .../src/components/common/MediaSection.tsx    |  31 +-
 .../src/components/common/SearchBar.tsx       |   8 +-
 .../client/src/contexts/UIContext.tsx         | 150 ++-----
 .../client/src/layouts/RootLayout.tsx         | 318 ++++++++++++++
 .../client/src/pages/SearchResultsPage.tsx    | 112 +++++
 .../client/src/pages/ViewAllPage.tsx          | 143 ++++---
 cinetrack-app/client/src/router.tsx           |  27 ++
 cinetrack-app/package-lock.json               |  59 +++
 10 files changed, 675 insertions(+), 579 deletions(-)
 create mode 100644 cinetrack-app/client/src/layouts/RootLayout.tsx
 create mode 100644 cinetrack-app/client/src/pages/SearchResultsPage.tsx
 create mode 100644 cinetrack-app/client/src/router.tsx

diff --git a/cinetrack-app/client/package.json b/cinetrack-app/client/package.json
index e1368ad..d485b99 100644
--- a/cinetrack-app/client/package.json
+++ b/cinetrack-app/client/package.json
@@ -13,6 +13,7 @@
     "react": "^19.2.1",
     "react-dom": "^19.2.1",
     "react-icons": "^5.5.0",
+    "react-router-dom": "^7.11.0",
     "scheduler": "^0.27.0",
     "socket.io-client": "^4.8.1",
     "use-context-selector": "^2.0.0",
diff --git a/cinetrack-app/client/src/App.tsx b/cinetrack-app/client/src/App.tsx
index 1c87deb..c029fc4 100644
--- a/cinetrack-app/client/src/App.tsx
+++ b/cinetrack-app/client/src/App.tsx
@@ -1,386 +1,15 @@
-import React, { Suspense, lazy, memo, useMemo } from "react";
-import { FiSettings, FiSearch, FiBell, FiGithub, FiArrowLeft } from "react-icons/fi";
+import React, { Suspense, lazy } from "react";
 import { ErrorBoundary } from "./components/common/ErrorBoundary";
 import { WatchlistProvider } from "./contexts/WatchlistContext";
-import { useWatchlistStore, getWatchlistIds } from "./store/useWatchlistStore";
-import { UIProvider, useUIContext } from "./contexts/UIContext";
+import { UIProvider } from "./contexts/UIContext";
 import { DiscoverProvider } from "./contexts/DiscoverContext";
 import { AuthProvider, useAuthContext } from "./contexts/AuthContext";
 import { DemoWelcomeModal, useDemoWelcome } from "./components/common/DemoWelcomeModal";
-import { SearchBar } from "./components/common/SearchBar";
-import { SearchPalette } from "./components/common/SearchPalette";
-import { NotificationsModal } from "./components/common/NotificationsModal";
-import { LoadingPosterAnimation } from "./components/common/LoadingPosterAnimation";
-import { BottomNavBar } from "./components/layout/BottomNavBar";
-import { SideNavBar } from "./components/layout/SideNavBar";
-import { MediaGrid } from "./components/media/MediaGrid";
-import { useLocalStorage } from "./hooks/useLocalStorage";
-import { getTVSeasonDetails } from "./services/tmdbService";
+import { RouterProvider } from "react-router-dom";
+import { router } from "./router";
 
-const AuthPage = lazy(() => import("./pages/AuthPage").then(m => ({ default: m.AuthPage })));
-const DiscoverPage = lazy(() => import("./pages/DiscoverPage").then(m => ({ default: m.DiscoverPage })));
-const ListsPage = lazy(() => import("./pages/ListsPage").then(m => ({ default: m.ListsPage })));
-const RecommendationsPage = lazy(() => import("./pages/RecommendationsPage").then(m => ({ default: m.RecommendationsPage })));
-const StatisticsPage = lazy(() => import("./pages/StatisticsPage").then(m => ({ default: m.StatisticsPage })));
-const ViewAllPage = lazy(() => import("./pages/ViewAllPage").then(m => ({ default: m.ViewAllPage })));
+const AuthPage = lazy(() => import("./pages/AuthPage").then((m) => ({ default: m.AuthPage })));
 
-// Lazy load heavy modal components
-const MediaDetailModal = lazy(() =>
-  import("./components/media/MediaDetailModal").then((module) => ({
-    default: module.MediaDetailModal,
-  }))
-);
-const SettingsModal = lazy(() =>
-  import("./components/features/SettingsModal").then((module) => ({
-    default: module.SettingsModal,
-  }))
-);
-
-// Loading fallback for modals
-const ModalLoadingFallback: React.FC = () => (
-  <div className="fixed inset-0 bg-black/80 z-50 flex items-center justify-center">
-    <div className="animate-pulse text-white text-lg">Loading...</div>
-  </div>
-);
-
-// Header component
-const Header: React.FC = memo(() => {
-  const { handleSearch, isSearchLoading, isSearchExpanded, setIsSearchExpanded, openSettings, openNotifications } = useUIContext();
-
-  return (
-    <header className="sticky top-0 z-20 bg-brand-bg/80 backdrop-blur-lg">
-      <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-4">
-        {/* Desktop Header */}
-        <div className="hidden sm:flex w-full items-center justify-between">
-          <div className="lg:hidden font-display text-3xl tracking-wide text-white">
-            SCENE<span className="text-brand-primary">STACK</span>
-          </div>
-          {/* Tablet - Regular SearchBar */}
-          <div className="lg:hidden w-full max-w-sm flex items-center gap-2 ml-auto">
-            <div className="grow">
-              <SearchBar onSearch={handleSearch} isLoading={isSearchLoading} />
-            </div>
-            <a
-              href="https://github.com/Alameen1433"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="p-2 rounded-full text-brand-text-dim hover:text-brand-text-light hover:bg-brand-surface transition-colors shrink-0"
-              aria-label="View on GitHub"
-            >
-              <FiGithub className="h-6 w-6" />
-            </a>
-            <button
-              onClick={openNotifications}
-              className="p-2 rounded-full text-brand-text-dim hover:text-brand-text-light hover:bg-brand-surface transition-colors shrink-0 relative"
-              aria-label="Notifications"
-            >
-              <FiBell className="h-6 w-6" />
-              <span className="absolute top-1 right-1 w-2 h-2 bg-brand-primary rounded-full" />
-            </button>
-            <button
-              onClick={openSettings}
-              className="p-2 rounded-full text-brand-text-dim hover:text-brand-text-light hover:bg-brand-surface transition-colors shrink-0"
-              aria-label="Open settings"
-            >
-              <FiSettings className="h-6 w-6" />
-            </button>
-          </div>
-          {/* Desktop - Command Palette Search */}
-          <div className="hidden lg:flex w-full justify-center">
-            <SearchPalette onSearch={handleSearch} isLoading={isSearchLoading} />
-          </div>
-        </div>
-
-        {/* Mobile Header */}
-        <div className="flex sm:hidden w-full items-center justify-between">
-          {isSearchExpanded ? (
-            <div className="flex w-full items-center gap-2">
-              <button
-                onClick={() => handleSearch("")}
-                className="p-2 rounded-full text-brand-text-dim hover:text-brand-text-light"
-                aria-label="Close search"
-              >
-                <FiArrowLeft className="h-6 w-6" />
-              </button>
-              <div className="grow">
-                <SearchBar
-                  onSearch={handleSearch}
-                  isLoading={isSearchLoading}
-                  isExpanded={isSearchExpanded}
-                />
-              </div>
-            </div>
-          ) : (
-            <>
-              <h1 className="font-display text-3xl tracking-wide text-white">
-                SCENE<span className="text-brand-primary">STACK</span>
-              </h1>
-              <div className="flex items-center gap-1">
-                <button
-                  onClick={() => setIsSearchExpanded(true)}
-                  className="p-2 rounded-full text-brand-text-dim hover:text-brand-text-light"
-                  aria-label="Open search"
-                >
-                  <FiSearch className="h-6 w-6" />
-                </button>
-                <a
-                  href="https://github.com/Alameen1433"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="p-2 rounded-full text-brand-text-dim hover:text-brand-text-light"
-                  aria-label="View on GitHub"
-                >
-                  <FiGithub className="h-6 w-6" />
-                </a>
-                <button
-                  onClick={openNotifications}
-                  className="p-2 rounded-full text-brand-text-dim hover:text-brand-text-light relative"
-                  aria-label="Notifications"
-                >
-                  <FiBell className="h-6 w-6" />
-                  <span className="absolute top-1 right-1 w-2 h-2 bg-brand-primary rounded-full" />
-                </button>
-                <button
-                  onClick={openSettings}
-                  className="p-2 rounded-full text-brand-text-dim hover:text-brand-text-light hover:bg-brand-surface transition-colors shrink-0"
-                  aria-label="Open settings"
-                >
-                  <FiSettings className="h-6 w-6" />
-                </button>
-              </div>
-            </>
-          )}
-        </div>
-      </div>
-    </header>
-  );
-});
-
-Header.displayName = "Header";
-
-// Main content component
-const MainContent: React.FC = memo(() => {
-  const { activeTab, searchResults, selectedMediaId, handleSelectMedia, error, handleSearch, isSearchLoading } = useUIContext();
-  const watchlist = useWatchlistStore(state => state.watchlist);
-  const watchlistIds = useMemo(() => getWatchlistIds(watchlist), [watchlist]);
-  const isDbLoading = useWatchlistStore(state => state.isLoading);
-
-  const handleBackToHome = () => {
-    handleSearch("");
-  };
-
-  return (
-    <main className="pb-24 lg:pb-0">
-      <div className="container mx-auto p-4 sm:p-6 lg:p-8">
-        {error && <p className="text-red-500 text-center mb-4">{error}</p>}
-
-        {/* Search Loading State */}
-        {isSearchLoading && (
-          <div className="flex flex-col items-center justify-center py-20 gap-4">
-            <div className="relative">
-              <div className="w-12 h-12 rounded-full border-2 border-brand-primary/20 border-t-brand-primary animate-spin" />
-            </div>
-            <p className="text-brand-text-dim animate-pulse">Searching...</p>
-          </div>
-        )}
-
-        {/* Search Results */}
-        {!isSearchLoading && searchResults.length > 0 ? (
-          <section>
-            <div className="flex items-center gap-4 mb-6">
-              <button
-                onClick={handleBackToHome}
-                className="flex items-center gap-2 px-3 py-2 rounded-xl text-brand-text-dim hover:text-white hover:bg-white/10 transition-all"
-              >
-                <FiArrowLeft className="h-5 w-5" />
-                <span className="text-sm font-medium">Back</span>
-              </button>
-              <div className="h-6 w-px bg-white/10" />
-              <h2 className="text-xl font-bold text-white">
-                Search Results
-                <span className="ml-2 text-sm font-normal text-brand-text-dim">
-                  ({searchResults.length} found)
-                </span>
-              </h2>
-            </div>
-            <MediaGrid
-              mediaItems={searchResults}
-              onCardClick={handleSelectMedia}
-              watchlistIds={watchlistIds}
-              selectedMediaId={selectedMediaId}
-            />
-          </section>
-        ) : !isSearchLoading && isDbLoading ? (
-          <div className="text-center py-20 text-brand-text-dim">
-            <p>Loading your watchlist...</p>
-          </div>
-        ) : !isSearchLoading && (
-          <Suspense fallback={
-            <div className="flex justify-center items-center py-20">
-              <div className="animate-pulse text-brand-text-dim">Loading...</div>
-            </div>
-          }>
-            {activeTab === "discover" && <DiscoverPage />}
-            {activeTab === "lists" && <ListsPage />}
-            {activeTab === "recommendations" && <RecommendationsPage />}
-            {activeTab === "stats" && <StatisticsPage />}
-          </Suspense>
-        )}
-      </div>
-    </main>
-  );
-});
-
-MainContent.displayName = "MainContent";
-
-// Modals component with lazy loading
-const Modals: React.FC = () => {
-  const {
-    detailedMedia,
-    animatingMedia,
-    handleCloseModal,
-    isSettingsOpen,
-    closeSettings,
-    isNotificationsOpen,
-    closeNotifications,
-    handleSearch,
-  } = useUIContext();
-  const watchlist = useWatchlistStore(state => state.watchlist);
-  const watchlistIds = useMemo(() => getWatchlistIds(watchlist), [watchlist]);
-  const toggleWatchlist = useWatchlistStore(state => state.toggleWatchlist);
-  const toggleMovieWatched = useWatchlistStore(state => state.toggleMovieWatched);
-  const toggleEpisodeWatched = useWatchlistStore(state => state.toggleEpisodeWatched);
-  const toggleSeasonWatched = useWatchlistStore(state => state.toggleSeasonWatched);
-  const updateTags = useWatchlistStore(state => state.updateTags);
-  const exportWatchlist = useWatchlistStore(state => state.exportWatchlist);
-  const storeImportWatchlist = useWatchlistStore(state => state.importWatchlist);
-
-  // Adapter for importWatchlist to match previous Context signature
-  const handleImportWatchlist = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-    if (file) {
-      if (window.confirm("Are you sure you want to overwrite your current watchlist? This action cannot be undone.")) {
-        storeImportWatchlist(file);
-      }
-    }
-    event.target.value = "";
-  };
-
-  return (
-    <>
-      {animatingMedia && !detailedMedia && (
-        <LoadingPosterAnimation media={animatingMedia.media} rect={animatingMedia.rect} />
-      )}
-
-      {detailedMedia && (
-        <Suspense fallback={<ModalLoadingFallback />}>
-          <MediaDetailModal
-            media={detailedMedia}
-            watchlistIds={watchlistIds}
-            onClose={handleCloseModal}
-            onToggleWatchlist={toggleWatchlist}
-            onToggleMovieWatched={toggleMovieWatched}
-            onToggleEpisodeWatched={toggleEpisodeWatched}
-            getSeasonDetails={getTVSeasonDetails}
-            watchlistItem={watchlist.find((item) => item.id === detailedMedia.id)}
-            onSearch={handleSearch}
-            onToggleSeasonWatched={toggleSeasonWatched}
-            onUpdateTags={updateTags}
-          />
-        </Suspense>
-      )}
-
-      <Suspense fallback={null}>
-        <SettingsModal
-          isOpen={isSettingsOpen}
-          onClose={closeSettings}
-          onExport={exportWatchlist}
-          onImport={handleImportWatchlist}
-        />
-      </Suspense>
-
-      <NotificationsModal
-        isOpen={isNotificationsOpen}
-        onClose={closeNotifications}
-      />
-    </>
-  );
-};
-
-// App layout component
-const AppLayout: React.FC = () => {
-  const { activeTab, setActiveTab, searchResults, openSettings, openNotifications, viewAllSection, closeViewAll, handleSearch } = useUIContext();
-  const [isSidebarCollapsed, setIsSidebarCollapsed] = useLocalStorage("sidebarCollapsed", false);
-
-  // Handle tab change - clear search results if any
-  const handleTabChange = (tab: "discover" | "lists" | "recommendations" | "stats") => {
-    if (searchResults.length > 0) {
-      handleSearch(""); // Clear search results
-    }
-    setActiveTab(tab);
-  };
-
-  // If viewing all items in a section, render the ViewAllPage
-  if (viewAllSection) {
-    return (
-      <div className="min-h-screen bg-brand-bg text-brand-text-light font-sans">
-        <Suspense fallback={
-          <div className="flex justify-center items-center min-h-screen">
-            <div className="animate-pulse text-brand-text-dim">Loading...</div>
-          </div>
-        }>
-          <ViewAllPage
-            title={viewAllSection.title}
-            items={viewAllSection.items}
-            status={viewAllSection.status}
-            onClose={closeViewAll}
-          />
-        </Suspense>
-        <Modals />
-      </div>
-    );
-  }
-
-  return (
-    <div className="min-h-screen bg-brand-bg text-brand-text-light font-sans">
-      <SideNavBar
-        activeTab={activeTab}
-        onTabChange={handleTabChange}
-        isCollapsed={isSidebarCollapsed}
-        onToggleCollapse={() => setIsSidebarCollapsed((prev) => !prev)}
-        onOpenSettings={openSettings}
-        onOpenNotifications={openNotifications}
-      />
-
-      <div
-        className={`transition-all duration-300 ease-out ${isSidebarCollapsed ? "lg:pl-[72px]" : "lg:pl-60"
-          }`}
-      >
-        <Header />
-        <MainContent />
-      </div>
-
-      {searchResults.length === 0 && (
-        <BottomNavBar activeTab={activeTab} onTabChange={handleTabChange} />
-      )}
-
-      <Modals />
-    </div>
-  );
-};
-
-// Main App component
-const App: React.FC = () => {
-  return (
-    <ErrorBoundary>
-      <AuthProvider>
-        <AuthenticatedApp />
-      </AuthProvider>
-    </ErrorBoundary>
-  );
-};
-
-// Renders either AuthPage or the main app based on auth state
 const AuthenticatedApp: React.FC = () => {
   const { isAuthenticated, isLoading, user } = useAuthContext();
   const { showWelcome, closeWelcome } = useDemoWelcome(user?.isDemo);
@@ -399,11 +28,13 @@ const AuthenticatedApp: React.FC = () => {
   if (!isAuthenticated) {
     return (
       <div className="animate-fadeIn">
-        <Suspense fallback={
-          <div className="min-h-screen bg-brand-bg flex items-center justify-center">
-            <div className="animate-pulse text-brand-text-dim">Loading...</div>
-          </div>
-        }>
+        <Suspense
+          fallback={
+            <div className="min-h-screen bg-brand-bg flex items-center justify-center">
+              <div className="animate-pulse text-brand-text-dim">Loading...</div>
+            </div>
+          }
+        >
           <AuthPage />
         </Suspense>
       </div>
@@ -415,7 +46,7 @@ const AuthenticatedApp: React.FC = () => {
       <WatchlistProvider>
         <UIProvider>
           <DiscoverProvider>
-            <AppLayout />
+            <RouterProvider router={router} />
           </DiscoverProvider>
         </UIProvider>
       </WatchlistProvider>
@@ -439,4 +70,14 @@ const AuthenticatedApp: React.FC = () => {
   );
 };
 
+const App: React.FC = () => {
+  return (
+    <ErrorBoundary>
+      <AuthProvider>
+        <AuthenticatedApp />
+      </AuthProvider>
+    </ErrorBoundary>
+  );
+};
+
 export default App;
diff --git a/cinetrack-app/client/src/components/common/MediaSection.tsx b/cinetrack-app/client/src/components/common/MediaSection.tsx
index 99f0d46..957784c 100644
--- a/cinetrack-app/client/src/components/common/MediaSection.tsx
+++ b/cinetrack-app/client/src/components/common/MediaSection.tsx
@@ -1,7 +1,7 @@
 import React, { useState, memo, useMemo, useCallback, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
 import { MediaCard } from "../media/MediaCard";
 import { ShowMoreCard } from "./ShowMoreCard";
-import { useUIContext } from "../../contexts/UIContext";
 import type { Media } from "../../types/types";
 import type { WatchlistStatus } from "../../services/dbService";
 
@@ -18,22 +18,18 @@ interface MediaSectionProps {
     status?: WatchlistStatus;
 }
 
-// Responsive breakpoints matching Tailwind's grid columns
-// grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6
 const getColumnsForWidth = (width: number): number => {
-    if (width >= 1280) return 6; // xl
-    if (width >= 1024) return 5; // lg
-    if (width >= 768) return 4;  // md
-    if (width >= 640) return 3;  // sm
-    return 2;                     // default
+    if (width >= 1280) return 6;
+    if (width >= 1024) return 5;
+    if (width >= 768) return 4;
+    if (width >= 640) return 3;
+    return 2;
 };
 
-// Rows to show: 2 for mobile, 3 for larger screens (pagination mode)
 const getRowsForWidth = (width: number): number => {
     return width >= 640 ? 3 : 2;
 };
 
-// Rows to show for expand mode (Discover): always 3 rows
 const EXPAND_MODE_ROWS = 3;
 
 export const MediaSection: React.FC<MediaSectionProps> = memo(({
@@ -48,13 +44,12 @@ export const MediaSection: React.FC<MediaSectionProps> = memo(({
     enablePagination = false,
     status,
 }) => {
-    const { openViewAll } = useUIContext();
+    const navigate = useNavigate();
     const [isExpanded, setIsExpanded] = useState(false);
     const [windowWidth, setWindowWidth] = useState(
         typeof window !== "undefined" ? window.innerWidth : 1024
     );
 
-    // Track window width for responsive calculations
     useEffect(() => {
         const handleResize = () => setWindowWidth(window.innerWidth);
         window.addEventListener("resize", handleResize);
@@ -64,12 +59,10 @@ export const MediaSection: React.FC<MediaSectionProps> = memo(({
     const columns = useMemo(() => getColumnsForWidth(windowWidth), [windowWidth]);
     const rows = useMemo(() => getRowsForWidth(windowWidth), [windowWidth]);
 
-    // Calculate items to show based on mode
     const maxVisibleItems = useMemo(() => columns * rows, [columns, rows]);
 
     const { displayedItems, hasMoreItems, remainingCount } = useMemo(() => {
         if (enablePagination) {
-            // Pagination mode: show limited rows with ShowMoreCard
             const hasMore = items.length > maxVisibleItems;
             const itemsToShow = hasMore ? maxVisibleItems - 1 : items.length;
             return {
@@ -78,7 +71,6 @@ export const MediaSection: React.FC<MediaSectionProps> = memo(({
                 remainingCount: items.length - itemsToShow,
             };
         } else {
-            // Expand mode: show 3 rows based on viewport with expand button
             const expandModeItems = columns * EXPAND_MODE_ROWS;
             const hasMore = items.length > expandModeItems;
             return {
@@ -90,8 +82,10 @@ export const MediaSection: React.FC<MediaSectionProps> = memo(({
     }, [enablePagination, items, maxVisibleItems, isExpanded, columns]);
 
     const handleViewAll = useCallback(() => {
-        openViewAll(title, items, status);
-    }, [openViewAll, title, items, status]);
+        if (status) {
+            navigate(`/lists/${status}`);
+        }
+    }, [navigate, status]);
 
     const handleToggleExpand = useCallback(() => {
         setIsExpanded(prev => !prev);
@@ -113,7 +107,6 @@ export const MediaSection: React.FC<MediaSectionProps> = memo(({
                                 isDimmed={selectedMediaId === `${item.media_type}-${item.id}`}
                             />
                         ))}
-                        {/* Pagination mode: Show arrow card inline */}
                         {enablePagination && hasMoreItems && (
                             <ShowMoreCard
                                 remainingCount={remainingCount}
@@ -121,7 +114,6 @@ export const MediaSection: React.FC<MediaSectionProps> = memo(({
                             />
                         )}
                     </div>
-                    {/* Expand mode: Show More/Less button below grid */}
                     {!enablePagination && hasMoreItems && (
                         <div className="text-center mt-8">
                             <button
@@ -146,4 +138,3 @@ export const MediaSection: React.FC<MediaSectionProps> = memo(({
 });
 
 MediaSection.displayName = "MediaSection";
-
diff --git a/cinetrack-app/client/src/components/common/SearchBar.tsx b/cinetrack-app/client/src/components/common/SearchBar.tsx
index 43e2352..e131c8f 100644
--- a/cinetrack-app/client/src/components/common/SearchBar.tsx
+++ b/cinetrack-app/client/src/components/common/SearchBar.tsx
@@ -4,14 +4,16 @@ interface SearchBarProps {
   onSearch: (query: string) => void;
   isLoading: boolean;
   isExpanded?: boolean;
+  defaultValue?: string;
 }
 
 export const SearchBar: React.FC<SearchBarProps> = ({
   onSearch,
   isLoading,
   isExpanded,
+  defaultValue = "",
 }) => {
-  const [query, setQuery] = useState("");
+  const [query, setQuery] = useState(defaultValue);
   const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
@@ -20,6 +22,10 @@ export const SearchBar: React.FC<SearchBarProps> = ({
     }
   }, [isExpanded]);
 
+  useEffect(() => {
+    setQuery(defaultValue);
+  }, [defaultValue]);
+
   const handleSearch = (e: React.FormEvent) => {
     e.preventDefault();
     onSearch(query);
diff --git a/cinetrack-app/client/src/contexts/UIContext.tsx b/cinetrack-app/client/src/contexts/UIContext.tsx
index 6029ced..1aee965 100644
--- a/cinetrack-app/client/src/contexts/UIContext.tsx
+++ b/cinetrack-app/client/src/contexts/UIContext.tsx
@@ -3,23 +3,21 @@ import React, {
     useContext,
     useState,
     useCallback,
-    useEffect,
     useMemo,
+    useEffect,
+    useRef,
     type ReactNode,
 } from "react";
 import { searchMedia, getMovieDetails, getTVDetails } from "../services/tmdbService";
 import type { SearchResult, MovieDetail, TVDetail, Media } from "../types/types";
-import type { WatchlistStatus } from "../services/dbService";
 
 interface UIContextType {
-    activeTab: "discover" | "lists" | "recommendations" | "stats";
-    setActiveTab: (tab: "discover" | "lists" | "recommendations" | "stats") => void;
-
     searchResults: SearchResult[];
     isSearchLoading: boolean;
+    setIsSearchLoading: (loading: boolean) => void;
     isSearchExpanded: boolean;
     setIsSearchExpanded: (expanded: boolean) => void;
-    handleSearch: (query: string) => void;
+    performSearch: (query: string) => Promise<void>;
 
     selectedMediaId: string | null;
     detailedMedia: MovieDetail | TVDetail | null;
@@ -35,10 +33,6 @@ interface UIContextType {
     openNotifications: () => void;
     closeNotifications: () => void;
 
-    viewAllSection: { title: string; items: Media[]; status?: WatchlistStatus } | null;
-    openViewAll: (title: string, items: Media[], status?: WatchlistStatus) => void;
-    closeViewAll: () => void;
-
     error: string | null;
     setError: (error: string | null) => void;
 }
@@ -46,9 +40,6 @@ interface UIContextType {
 const UIContext = createContext<UIContextType | undefined>(undefined);
 
 export const UIProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
-    const [activeTab, setActiveTab] = useState<"discover" | "lists" | "recommendations" | "stats">("discover");
-
-
     const [searchResults, setSearchResults] = useState<SearchResult[]>([]);
     const [isSearchLoading, setIsSearchLoading] = useState(false);
     const [isSearchExpanded, setIsSearchExpanded] = useState(false);
@@ -57,15 +48,33 @@ export const UIProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
     const [animatingMedia, setAnimatingMedia] = useState<{ media: Media; rect: DOMRect } | null>(null);
     const [isSettingsOpen, setIsSettingsOpen] = useState(false);
     const [isNotificationsOpen, setIsNotificationsOpen] = useState(false);
-    const [viewAllSection, setViewAllSection] = useState<{ title: string; items: Media[]; status?: WatchlistStatus } | null>(null);
     const [error, setError] = useState<string | null>(null);
 
+    const modalHistoryPushed = useRef(false);
+
+    const clearModalState = useCallback(() => {
+        setAnimatingMedia(null);
+        setSelectedMediaId(null);
+        setDetailedMedia(null);
+        modalHistoryPushed.current = false;
+    }, []);
+
+    useEffect(() => {
+        const handlePopState = () => {
+            if (detailedMedia || animatingMedia) {
+                clearModalState();
+            }
+        };
+
+        window.addEventListener("popstate", handlePopState);
+        return () => window.removeEventListener("popstate", handlePopState);
+    }, [detailedMedia, animatingMedia, clearModalState]);
+
     const performSearch = useCallback(async (query: string) => {
         if (!query) {
             setSearchResults([]);
             return;
         }
-        setIsSearchLoading(true);
         setError(null);
         try {
             const results = await searchMedia(query);
@@ -73,80 +82,15 @@ export const UIProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
         } catch (err) {
             setError("Failed to fetch search results. Please try again.");
             console.error(err);
-        } finally {
-            setIsSearchLoading(false);
         }
     }, []);
 
-    const handleSearch = useCallback(
-        (query: string) => {
-            const url = new URL(window.location.toString());
-            if (query) {
-                url.searchParams.set("q", query);
-            } else {
-                url.searchParams.delete("q");
-                setIsSearchExpanded(false);
-            }
-            window.history.pushState({}, "", url);
-            performSearch(query);
-        },
-        [performSearch]
-    );
-
-    // Consolidate all popstate handling into one effect to prevent race conditions
-    useEffect(() => {
-        const handlePopState = () => {
-            const params = new URLSearchParams(window.location.search);
-            const query = params.get("q") || "";
-            performSearch(query);
-            if (!query) {
-                setIsSearchExpanded(false);
-            }
-            const hash = window.location.hash;
-            if (!hash.startsWith("#media/") && !hash.startsWith("#settings") && !hash.startsWith("#viewall/")) {
-                setSelectedMediaId(null);
-                setDetailedMedia(null);
-                setAnimatingMedia(null);
-                setIsSettingsOpen(false);
-                setViewAllSection(null);
-            }
-        };
-
-        window.addEventListener("popstate", handlePopState);
-
-        // Initial State Checks
-        const initialParams = new URLSearchParams(window.location.search);
-        const initialQuery = initialParams.get("q");
-        if (initialQuery) {
-            performSearch(initialQuery);
-            setIsSearchExpanded(true);
-        }
-
-        // Cleanup invalid hashes on mount
-        const hash = window.location.hash;
-        if (hash.startsWith("#media/") || hash === "#settings" || hash.startsWith("#viewall/")) {
-            // Replace invalid initial hash states with clean URL
-            window.history.replaceState(
-                null,
-                "",
-                window.location.pathname + window.location.search
-            );
-        }
-
-        return () => {
-            window.removeEventListener("popstate", handlePopState);
-        };
-    }, [performSearch]);
-
     const handleSelectMedia = useCallback(
         async (media: Media, rect: DOMRect) => {
             if (animatingMedia) return;
 
-            window.history.pushState(
-                { modal: "mediaDetail" },
-                "",
-                `#media/${media.media_type}/${media.id}`
-            );
+            window.history.pushState({ modal: "media" }, "");
+            modalHistoryPushed.current = true;
 
             setAnimatingMedia({ media, rect });
             setSelectedMediaId(`${media.media_type}-${media.id}`);
@@ -166,26 +110,28 @@ export const UIProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
                 setError("Failed to fetch media details.");
                 console.error(err);
                 setAnimatingMedia(null);
-                window.history.back();
+                if (modalHistoryPushed.current) {
+                    window.history.back();
+                }
             }
         },
         [animatingMedia]
     );
 
     const handleCloseModal = useCallback(() => {
-        setAnimatingMedia(null);
-        setSelectedMediaId(null);
-        setDetailedMedia(null);
-        window.history.back();
-    }, []);
+        if (modalHistoryPushed.current) {
+            window.history.back();
+        } else {
+            clearModalState();
+        }
+    }, [clearModalState]);
 
     const openSettings = useCallback(() => {
-        window.history.pushState({ modal: "settings" }, "", "#settings");
         setIsSettingsOpen(true);
     }, []);
 
     const closeSettings = useCallback(() => {
-        window.history.back();
+        setIsSettingsOpen(false);
     }, []);
 
     const openNotifications = useCallback(() => {
@@ -196,25 +142,14 @@ export const UIProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
         setIsNotificationsOpen(false);
     }, []);
 
-    const openViewAll = useCallback((title: string, items: Media[], status?: WatchlistStatus) => {
-        const sectionSlug = title.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "");
-        window.history.pushState({ viewAll: sectionSlug }, "", `#viewall/${sectionSlug}`);
-        setViewAllSection({ title, items, status });
-    }, []);
-
-    const closeViewAll = useCallback(() => {
-        window.history.back();
-    }, []);
-
     const value = useMemo(
         () => ({
-            activeTab,
-            setActiveTab,
             searchResults,
             isSearchLoading,
+            setIsSearchLoading,
             isSearchExpanded,
             setIsSearchExpanded,
-            handleSearch,
+            performSearch,
             selectedMediaId,
             detailedMedia,
             animatingMedia,
@@ -226,18 +161,14 @@ export const UIProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
             isNotificationsOpen,
             openNotifications,
             closeNotifications,
-            viewAllSection,
-            openViewAll,
-            closeViewAll,
             error,
             setError,
         }),
         [
-            activeTab,
             searchResults,
             isSearchLoading,
             isSearchExpanded,
-            handleSearch,
+            performSearch,
             selectedMediaId,
             detailedMedia,
             animatingMedia,
@@ -249,9 +180,6 @@ export const UIProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
             isNotificationsOpen,
             openNotifications,
             closeNotifications,
-            viewAllSection,
-            openViewAll,
-            closeViewAll,
             error,
         ]
     );
diff --git a/cinetrack-app/client/src/layouts/RootLayout.tsx b/cinetrack-app/client/src/layouts/RootLayout.tsx
new file mode 100644
index 0000000..0e9512d
--- /dev/null
+++ b/cinetrack-app/client/src/layouts/RootLayout.tsx
@@ -0,0 +1,318 @@
+import React, { Suspense, memo, useMemo } from "react";
+import { Outlet, useLocation, useNavigate, useSearchParams } from "react-router-dom";
+import { FiSettings, FiSearch, FiBell, FiGithub, FiArrowLeft } from "react-icons/fi";
+import { useWatchlistStore, getWatchlistIds } from "../store/useWatchlistStore";
+import { useUIContext } from "../contexts/UIContext";
+import { SearchBar } from "../components/common/SearchBar";
+import { SearchPalette } from "../components/common/SearchPalette";
+import { NotificationsModal } from "../components/common/NotificationsModal";
+import { LoadingPosterAnimation } from "../components/common/LoadingPosterAnimation";
+import { BottomNavBar } from "../components/layout/BottomNavBar";
+import { SideNavBar } from "../components/layout/SideNavBar";
+import { useLocalStorage } from "../hooks/useLocalStorage";
+import { getTVSeasonDetails } from "../services/tmdbService";
+
+const MediaDetailModal = React.lazy(() =>
+    import("../components/media/MediaDetailModal").then((module) => ({
+        default: module.MediaDetailModal,
+    }))
+);
+const SettingsModal = React.lazy(() =>
+    import("../components/features/SettingsModal").then((module) => ({
+        default: module.SettingsModal,
+    }))
+);
+
+const ModalLoadingFallback: React.FC = () => (
+    <div className="fixed inset-0 bg-black/80 z-50 flex items-center justify-center">
+        <div className="animate-pulse text-white text-lg">Loading...</div>
+    </div>
+);
+
+const Header: React.FC = memo(() => {
+    const navigate = useNavigate();
+    const [searchParams] = useSearchParams();
+    const location = useLocation();
+    const {
+        isSearchLoading,
+        isSearchExpanded,
+        setIsSearchExpanded,
+        openSettings,
+        openNotifications,
+        setIsSearchLoading,
+        performSearch,
+    } = useUIContext();
+
+    const isOnSearchPage = location.pathname === "/search";
+    const currentQuery = searchParams.get("q") || "";
+
+    const handleSearch = (query: string) => {
+        if (query) {
+            navigate(`/search?q=${encodeURIComponent(query)}`);
+        } else {
+            setIsSearchExpanded(false);
+            navigate(-1);
+        }
+    };
+
+    const handleSearchSubmit = async (query: string) => {
+        if (query) {
+            navigate(`/search?q=${encodeURIComponent(query)}`);
+            setIsSearchLoading(true);
+            await performSearch(query);
+            setIsSearchLoading(false);
+        }
+    };
+
+    return (
+        <header className="sticky top-0 z-20 bg-brand-bg/80 backdrop-blur-lg">
+            <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-4">
+                {/* Desktop Header */}
+                <div className="hidden sm:flex w-full items-center justify-between">
+                    <div className="lg:hidden font-display text-3xl tracking-wide text-white">
+                        SCENE<span className="text-brand-primary">STACK</span>
+                    </div>
+                    {/* Tablet - Regular SearchBar */}
+                    <div className="lg:hidden w-full max-w-sm flex items-center gap-2 ml-auto">
+                        <div className="grow">
+                            <SearchBar onSearch={handleSearchSubmit} isLoading={isSearchLoading} />
+                        </div>
+                        <a
+                            href="https://github.com/Alameen1433"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="p-2 rounded-full text-brand-text-dim hover:text-brand-text-light hover:bg-brand-surface transition-colors shrink-0"
+                            aria-label="View on GitHub"
+                        >
+                            <FiGithub className="h-6 w-6" />
+                        </a>
+                        <button
+                            onClick={openNotifications}
+                            className="p-2 rounded-full text-brand-text-dim hover:text-brand-text-light hover:bg-brand-surface transition-colors shrink-0 relative"
+                            aria-label="Notifications"
+                        >
+                            <FiBell className="h-6 w-6" />
+                            <span className="absolute top-1 right-1 w-2 h-2 bg-brand-primary rounded-full" />
+                        </button>
+                        <button
+                            onClick={openSettings}
+                            className="p-2 rounded-full text-brand-text-dim hover:text-brand-text-light hover:bg-brand-surface transition-colors shrink-0"
+                            aria-label="Open settings"
+                        >
+                            <FiSettings className="h-6 w-6" />
+                        </button>
+                    </div>
+                    {/* Desktop - Command Palette Search */}
+                    <div className="hidden lg:flex w-full justify-center">
+                        <SearchPalette onSearch={handleSearchSubmit} isLoading={isSearchLoading} />
+                    </div>
+                </div>
+
+                {/* Mobile Header */}
+                <div className="flex sm:hidden w-full items-center justify-between">
+                    {isSearchExpanded || isOnSearchPage ? (
+                        <div className="flex w-full items-center gap-2">
+                            <button
+                                onClick={() => handleSearch("")}
+                                className="p-2 rounded-full text-brand-text-dim hover:text-brand-text-light"
+                                aria-label="Close search"
+                            >
+                                <FiArrowLeft className="h-6 w-6" />
+                            </button>
+                            <div className="grow">
+                                <SearchBar
+                                    onSearch={handleSearchSubmit}
+                                    isLoading={isSearchLoading}
+                                    isExpanded={true}
+                                    defaultValue={currentQuery}
+                                />
+                            </div>
+                        </div>
+                    ) : (
+                        <>
+                            <h1 className="font-display text-3xl tracking-wide text-white">
+                                SCENE<span className="text-brand-primary">STACK</span>
+                            </h1>
+                            <div className="flex items-center gap-1">
+                                <button
+                                    onClick={() => setIsSearchExpanded(true)}
+                                    className="p-2 rounded-full text-brand-text-dim hover:text-brand-text-light"
+                                    aria-label="Open search"
+                                >
+                                    <FiSearch className="h-6 w-6" />
+                                </button>
+                                <a
+                                    href="https://github.com/Alameen1433"
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    className="p-2 rounded-full text-brand-text-dim hover:text-brand-text-light"
+                                    aria-label="View on GitHub"
+                                >
+                                    <FiGithub className="h-6 w-6" />
+                                </a>
+                                <button
+                                    onClick={openNotifications}
+                                    className="p-2 rounded-full text-brand-text-dim hover:text-brand-text-light relative"
+                                    aria-label="Notifications"
+                                >
+                                    <FiBell className="h-6 w-6" />
+                                    <span className="absolute top-1 right-1 w-2 h-2 bg-brand-primary rounded-full" />
+                                </button>
+                                <button
+                                    onClick={openSettings}
+                                    className="p-2 rounded-full text-brand-text-dim hover:text-brand-text-light hover:bg-brand-surface transition-colors shrink-0"
+                                    aria-label="Open settings"
+                                >
+                                    <FiSettings className="h-6 w-6" />
+                                </button>
+                            </div>
+                        </>
+                    )}
+                </div>
+            </div>
+        </header>
+    );
+});
+
+Header.displayName = "Header";
+
+const Modals: React.FC = () => {
+    const {
+        detailedMedia,
+        animatingMedia,
+        handleCloseModal,
+        isSettingsOpen,
+        closeSettings,
+        isNotificationsOpen,
+        closeNotifications,
+    } = useUIContext();
+    const navigate = useNavigate();
+    const watchlist = useWatchlistStore((state) => state.watchlist);
+    const watchlistIds = useMemo(() => getWatchlistIds(watchlist), [watchlist]);
+    const toggleWatchlist = useWatchlistStore((state) => state.toggleWatchlist);
+    const toggleMovieWatched = useWatchlistStore((state) => state.toggleMovieWatched);
+    const toggleEpisodeWatched = useWatchlistStore((state) => state.toggleEpisodeWatched);
+    const toggleSeasonWatched = useWatchlistStore((state) => state.toggleSeasonWatched);
+    const updateTags = useWatchlistStore((state) => state.updateTags);
+    const exportWatchlist = useWatchlistStore((state) => state.exportWatchlist);
+    const storeImportWatchlist = useWatchlistStore((state) => state.importWatchlist);
+
+    const handleImportWatchlist = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const file = event.target.files?.[0];
+        if (file) {
+            if (window.confirm("Are you sure you want to overwrite your current watchlist? This action cannot be undone.")) {
+                storeImportWatchlist(file);
+            }
+        }
+        event.target.value = "";
+    };
+
+    const handleSearchFromModal = (query: string) => {
+        if (query) {
+            navigate(`/search?q=${encodeURIComponent(query)}`);
+        }
+    };
+
+    return (
+        <>
+            {animatingMedia && !detailedMedia && (
+                <LoadingPosterAnimation media={animatingMedia.media} rect={animatingMedia.rect} />
+            )}
+
+            {detailedMedia && (
+                <Suspense fallback={<ModalLoadingFallback />}>
+                    <MediaDetailModal
+                        media={detailedMedia}
+                        watchlistIds={watchlistIds}
+                        onClose={handleCloseModal}
+                        onToggleWatchlist={toggleWatchlist}
+                        onToggleMovieWatched={toggleMovieWatched}
+                        onToggleEpisodeWatched={toggleEpisodeWatched}
+                        getSeasonDetails={getTVSeasonDetails}
+                        watchlistItem={watchlist.find((item) => item.id === detailedMedia.id)}
+                        onSearch={handleSearchFromModal}
+                        onToggleSeasonWatched={toggleSeasonWatched}
+                        onUpdateTags={updateTags}
+                    />
+                </Suspense>
+            )}
+
+            <Suspense fallback={null}>
+                <SettingsModal
+                    isOpen={isSettingsOpen}
+                    onClose={closeSettings}
+                    onExport={exportWatchlist}
+                    onImport={handleImportWatchlist}
+                />
+            </Suspense>
+
+            <NotificationsModal isOpen={isNotificationsOpen} onClose={closeNotifications} />
+        </>
+    );
+};
+
+const RootLayout: React.FC = () => {
+    const location = useLocation();
+    const navigate = useNavigate();
+    const { openSettings, openNotifications } = useUIContext();
+    const [isSidebarCollapsed, setIsSidebarCollapsed] = useLocalStorage("sidebarCollapsed", false);
+
+    const getActiveTab = (): "discover" | "lists" | "recommendations" | "stats" => {
+        const path = location.pathname;
+        if (path.startsWith("/lists")) return "lists";
+        if (path.startsWith("/recommendations")) return "recommendations";
+        if (path.startsWith("/stats")) return "stats";
+        return "discover";
+    };
+
+    const handleTabChange = (tab: "discover" | "lists" | "recommendations" | "stats") => {
+        const routes: Record<string, string> = {
+            discover: "/",
+            lists: "/lists",
+            recommendations: "/recommendations",
+            stats: "/stats",
+        };
+        navigate(routes[tab]);
+    };
+
+    const isOnSearchPage = location.pathname === "/search";
+
+    return (
+        <div className="min-h-screen bg-brand-bg text-brand-text-light font-sans">
+            <SideNavBar
+                activeTab={getActiveTab()}
+                onTabChange={handleTabChange}
+                isCollapsed={isSidebarCollapsed}
+                onToggleCollapse={() => setIsSidebarCollapsed((prev) => !prev)}
+                onOpenSettings={openSettings}
+                onOpenNotifications={openNotifications}
+            />
+
+            <div
+                className={`transition-all duration-300 ease-out ${isSidebarCollapsed ? "lg:pl-[72px]" : "lg:pl-60"
+                    }`}
+            >
+                <Header />
+                <main className="pb-24 lg:pb-0">
+                    <div className="container mx-auto p-4 sm:p-6 lg:p-8">
+                        <Suspense
+                            fallback={
+                                <div className="flex justify-center items-center py-20">
+                                    <div className="animate-pulse text-brand-text-dim">Loading...</div>
+                                </div>
+                            }
+                        >
+                            <Outlet />
+                        </Suspense>
+                    </div>
+                </main>
+            </div>
+
+            {!isOnSearchPage && <BottomNavBar activeTab={getActiveTab()} onTabChange={handleTabChange} />}
+
+            <Modals />
+        </div>
+    );
+};
+
+export default RootLayout;
diff --git a/cinetrack-app/client/src/pages/SearchResultsPage.tsx b/cinetrack-app/client/src/pages/SearchResultsPage.tsx
new file mode 100644
index 0000000..73c6558
--- /dev/null
+++ b/cinetrack-app/client/src/pages/SearchResultsPage.tsx
@@ -0,0 +1,112 @@
+import React, { useEffect, useMemo } from "react";
+import { useSearchParams, useNavigate } from "react-router-dom";
+import { FiArrowLeft } from "react-icons/fi";
+import { useUIContext } from "../contexts/UIContext";
+import { useWatchlistStore, getWatchlistIds } from "../store/useWatchlistStore";
+import { MediaGrid } from "../components/media/MediaGrid";
+
+const SearchResultsPage: React.FC = () => {
+    const [searchParams] = useSearchParams();
+    const navigate = useNavigate();
+    const query = searchParams.get("q") || "";
+
+    const {
+        searchResults,
+        isSearchLoading,
+        performSearch,
+        setIsSearchLoading,
+        handleSelectMedia,
+        selectedMediaId,
+        error,
+    } = useUIContext();
+
+    const watchlist = useWatchlistStore((state) => state.watchlist);
+    const watchlistIds = useMemo(() => getWatchlistIds(watchlist), [watchlist]);
+
+    useEffect(() => {
+        if (query) {
+            setIsSearchLoading(true);
+            performSearch(query).finally(() => setIsSearchLoading(false));
+        }
+    }, [query, performSearch, setIsSearchLoading]);
+
+    const handleBackToHome = () => {
+        navigate("/");
+    };
+
+    if (isSearchLoading) {
+        return (
+            <div className="flex flex-col items-center justify-center py-20 gap-4">
+                <div className="relative">
+                    <div className="w-12 h-12 rounded-full border-2 border-brand-primary/20 border-t-brand-primary animate-spin" />
+                </div>
+                <p className="text-brand-text-dim animate-pulse">Searching...</p>
+            </div>
+        );
+    }
+
+    if (error) {
+        return (
+            <div className="text-center py-20">
+                <p className="text-red-500 mb-4">{error}</p>
+                <button
+                    onClick={handleBackToHome}
+                    className="px-4 py-2 rounded-xl bg-brand-surface hover:bg-brand-surface-alt text-white transition-colors"
+                >
+                    Go Back
+                </button>
+            </div>
+        );
+    }
+
+    if (!query) {
+        return (
+            <div className="text-center py-20 text-brand-text-dim">
+                <p>Enter a search term to find movies and TV shows.</p>
+            </div>
+        );
+    }
+
+    if (searchResults.length === 0) {
+        return (
+            <div className="text-center py-20">
+                <p className="text-brand-text-dim mb-4">No results found for "{query}"</p>
+                <button
+                    onClick={handleBackToHome}
+                    className="px-4 py-2 rounded-xl bg-brand-surface hover:bg-brand-surface-alt text-white transition-colors"
+                >
+                    Go Back
+                </button>
+            </div>
+        );
+    }
+
+    return (
+        <section>
+            <div className="flex items-center gap-4 mb-6">
+                <button
+                    onClick={handleBackToHome}
+                    className="flex items-center gap-2 px-3 py-2 rounded-xl text-brand-text-dim hover:text-white hover:bg-white/10 transition-all"
+                >
+                    <FiArrowLeft className="h-5 w-5" />
+                    <span className="text-sm font-medium">Back</span>
+                </button>
+                <div className="h-6 w-px bg-white/10" />
+                <h2 className="text-xl font-bold text-white">
+                    Search Results
+                    <span className="ml-2 text-sm font-normal text-brand-text-dim">
+                        ({searchResults.length} found)
+                    </span>
+                </h2>
+            </div>
+            <MediaGrid
+                mediaItems={searchResults}
+                onCardClick={handleSelectMedia}
+                watchlistIds={watchlistIds}
+                selectedMediaId={selectedMediaId}
+            />
+        </section>
+    );
+};
+
+export default SearchResultsPage;
diff --git a/cinetrack-app/client/src/pages/ViewAllPage.tsx b/cinetrack-app/client/src/pages/ViewAllPage.tsx
index 6351da5..556fcd2 100644
--- a/cinetrack-app/client/src/pages/ViewAllPage.tsx
+++ b/cinetrack-app/client/src/pages/ViewAllPage.tsx
@@ -1,8 +1,9 @@
 import { useState, useMemo, useCallback, useEffect, useRef } from "react";
+import { useParams, useNavigate } from "react-router-dom";
 import { MediaCard } from "../components/media/MediaCard";
 import { useWatchlistIds, useProgressMap } from "../contexts/WatchlistContext";
 import { useUIContext } from "../contexts/UIContext";
-import type { Media, WatchlistItem } from "../types/types";
+import type { WatchlistItem } from "../types/types";
 import type { WatchlistStatus } from "../services/dbService";
 import { getWatchlistByStatus } from "../services/dbService";
 import { FiArrowLeft, FiChevronLeft, FiChevronRight } from "react-icons/fi";
@@ -11,32 +12,40 @@ const ITEMS_PER_PAGE_MOBILE = 20;
 const ITEMS_PER_PAGE_DESKTOP = 24;
 const MAX_CACHED_PAGES = 3;
 
-interface ViewAllPageProps {
-    title: string;
-    items: Media[];
-    status?: WatchlistStatus;
-    onClose: () => void;
-}
-
-export const ViewAllPage: React.FC<ViewAllPageProps> = ({
-    title,
-    items: initialItems,
-    status,
-    onClose,
-}) => {
+const STATUS_TITLES: Record<WatchlistStatus, string> = {
+    watchlist: "My Watchlist",
+    watching: "Currently Watching",
+    watched: "Watched",
+};
+
+export const ViewAllPage: React.FC = () => {
+    const { status } = useParams<{ status: string }>();
+    const navigate = useNavigate();
     const watchlistIds = useWatchlistIds();
     const progressMap = useProgressMap();
     const { handleSelectMedia, selectedMediaId } = useUIContext();
     const [currentPage, setCurrentPage] = useState(1);
-    const [isLoading, setIsLoading] = useState(false);
+    const [isLoading, setIsLoading] = useState(true);
     const [windowWidth, setWindowWidth] = useState(
         typeof window !== "undefined" ? window.innerWidth : 1024
     );
 
     const pageCache = useRef<Map<number, WatchlistItem[]>>(new Map());
     const pageOrder = useRef<number[]>([]);
-    const [displayItems, setDisplayItems] = useState<Media[]>(initialItems);
-    const [totalItems, setTotalItems] = useState(initialItems.length);
+    const [displayItems, setDisplayItems] = useState<WatchlistItem[]>([]);
+    const [totalItems, setTotalItems] = useState(0);
+
+    const validStatus = (["watchlist", "watching", "watched"] as const).includes(
+        status as WatchlistStatus
+    )
+        ? (status as WatchlistStatus)
+        : null;
+
+    useEffect(() => {
+        if (!validStatus) {
+            navigate("/lists", { replace: true });
+        }
+    }, [validStatus, navigate]);
 
     useEffect(() => {
         const handleResize = () => setWindowWidth(window.innerWidth);
@@ -44,18 +53,19 @@ export const ViewAllPage: React.FC<ViewAllPageProps> = ({
         return () => window.removeEventListener("resize", handleResize);
     }, []);
 
-    const itemsPerPage = useMemo(() =>
-        windowWidth >= 640 ? ITEMS_PER_PAGE_DESKTOP : ITEMS_PER_PAGE_MOBILE
-        , [windowWidth]);
+    const itemsPerPage = useMemo(
+        () => (windowWidth >= 640 ? ITEMS_PER_PAGE_DESKTOP : ITEMS_PER_PAGE_MOBILE),
+        [windowWidth]
+    );
 
-    const totalPages = useMemo(() => {
-        if (!status) return Math.ceil(initialItems.length / itemsPerPage);
-        return Math.ceil(totalItems / itemsPerPage);
-    }, [status, initialItems.length, itemsPerPage, totalItems]);
+    const totalPages = useMemo(
+        () => Math.ceil(totalItems / itemsPerPage),
+        [totalItems, itemsPerPage]
+    );
 
     const addToCache = useCallback((page: number, items: WatchlistItem[]) => {
         if (pageCache.current.has(page)) {
-            pageOrder.current = pageOrder.current.filter(p => p !== page);
+            pageOrder.current = pageOrder.current.filter((p) => p !== page);
         }
         pageCache.current.set(page, items);
         pageOrder.current.push(page);
@@ -68,38 +78,36 @@ export const ViewAllPage: React.FC<ViewAllPageProps> = ({
         }
     }, []);
 
-    const fetchPage = useCallback(async (page: number) => {
-        if (!status) return;
+    const fetchPage = useCallback(
+        async (page: number) => {
+            if (!validStatus) return;
 
-        if (pageCache.current.has(page)) {
-            setDisplayItems(pageCache.current.get(page) || []);
-            return;
-        }
+            if (pageCache.current.has(page)) {
+                setDisplayItems(pageCache.current.get(page) || []);
+                setIsLoading(false);
+                return;
+            }
 
-        setIsLoading(true);
-        try {
-            const response = await getWatchlistByStatus(status, page, itemsPerPage);
-            addToCache(page, response.items);
-            setDisplayItems(response.items);
-            setTotalItems(response.totalCount);
-        } catch (err) {
-            console.error("Failed to fetch page:", err);
-        } finally {
-            setIsLoading(false);
-        }
-    }, [status, itemsPerPage, addToCache]);
+            setIsLoading(true);
+            try {
+                const response = await getWatchlistByStatus(validStatus, page, itemsPerPage);
+                addToCache(page, response.items);
+                setDisplayItems(response.items);
+                setTotalItems(response.totalCount);
+            } catch (err) {
+                console.error("Failed to fetch page:", err);
+            } finally {
+                setIsLoading(false);
+            }
+        },
+        [validStatus, itemsPerPage, addToCache]
+    );
 
     useEffect(() => {
-        if (status) {
+        if (validStatus) {
             fetchPage(currentPage);
         }
-    }, [currentPage, status, fetchPage]);
-
-    const paginatedItems = useMemo(() => {
-        if (status) return displayItems;
-        const startIndex = (currentPage - 1) * itemsPerPage;
-        return initialItems.slice(startIndex, startIndex + itemsPerPage);
-    }, [status, displayItems, initialItems, currentPage, itemsPerPage]);
+    }, [currentPage, validStatus, fetchPage]);
 
     const handlePrevPage = useCallback(() => {
         setCurrentPage((prev) => Math.max(1, prev - 1));
@@ -112,10 +120,14 @@ export const ViewAllPage: React.FC<ViewAllPageProps> = ({
         window.scrollTo({ top: 0, behavior: "smooth" });
     }, [currentPage, totalPages]);
 
+    const handleClose = useCallback(() => {
+        navigate("/lists");
+    }, [navigate]);
+
     useEffect(() => {
         const handleKeyDown = (e: KeyboardEvent) => {
             if (e.key === "Escape") {
-                onClose();
+                handleClose();
             } else if (e.key === "ArrowLeft" && currentPage > 1) {
                 handlePrevPage();
             } else if (e.key === "ArrowRight" && currentPage < totalPages) {
@@ -124,8 +136,13 @@ export const ViewAllPage: React.FC<ViewAllPageProps> = ({
         };
         window.addEventListener("keydown", handleKeyDown);
         return () => window.removeEventListener("keydown", handleKeyDown);
-    }, [onClose, currentPage, totalPages, handlePrevPage, handleNextPage]);
+    }, [handleClose, currentPage, totalPages, handlePrevPage, handleNextPage]);
 
+    if (!validStatus) {
+        return null;
+    }
+
+    const title = STATUS_TITLES[validStatus];
     const showPagination = totalPages > 1;
     const canGoNext = currentPage < totalPages;
 
@@ -135,19 +152,15 @@ export const ViewAllPage: React.FC<ViewAllPageProps> = ({
                 <div className="flex items-center justify-between px-4 sm:px-6 py-4">
                     <div className="flex items-center gap-4">
                         <button
-                            onClick={onClose}
+                            onClick={handleClose}
                             className="p-2 -ml-2 rounded-full hover:bg-white/10 transition-colors"
                             aria-label="Go back"
                         >
                             <FiArrowLeft className="h-6 w-6 text-brand-text-light" />
                         </button>
                         <div>
-                            <h1 className="text-xl sm:text-2xl font-bold text-brand-text-light">
-                                {title}
-                            </h1>
-                            <p className="text-sm text-brand-text-dim">
-                                {totalItems} items
-                            </p>
+                            <h1 className="text-xl sm:text-2xl font-bold text-brand-text-light">{title}</h1>
+                            <p className="text-sm text-brand-text-dim">{totalItems} items</p>
                         </div>
                     </div>
 
@@ -162,7 +175,7 @@ export const ViewAllPage: React.FC<ViewAllPageProps> = ({
                                 <FiChevronLeft className="h-5 w-5 text-brand-text-light" />
                             </button>
                             <span className="text-brand-text-light font-medium min-w-[80px] text-center">
-                                Page {currentPage}{status ? '' : ` of ${totalPages}`}
+                                Page {currentPage}
                             </span>
                             <button
                                 onClick={handleNextPage}
@@ -184,7 +197,7 @@ export const ViewAllPage: React.FC<ViewAllPageProps> = ({
                     </div>
                 ) : (
                     <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4 sm:gap-6">
-                        {paginatedItems.map((item) => (
+                        {displayItems.map((item) => (
                             <MediaCard
                                 key={`${item.media_type}-${item.id}`}
                                 media={item}
@@ -199,7 +212,8 @@ export const ViewAllPage: React.FC<ViewAllPageProps> = ({
             </main>
 
             {showPagination && (
-                <footer className="sm:hidden fixed bottom-0 left-0 right-0 flex items-center justify-center gap-4 p-4 bg-brand-bg/95 backdrop-blur-sm border-t border-white/10"
+                <footer
+                    className="sm:hidden fixed bottom-0 left-0 right-0 flex items-center justify-center gap-4 p-4 bg-brand-bg/95 backdrop-blur-sm border-t border-white/10"
                     style={{ paddingBottom: "calc(env(safe-area-inset-bottom) + 1rem)" }}
                 >
                     <button
@@ -211,7 +225,7 @@ export const ViewAllPage: React.FC<ViewAllPageProps> = ({
                         <span className="text-brand-text-light font-medium">Prev</span>
                     </button>
                     <span className="text-brand-text-light font-medium min-w-[80px] text-center">
-                        {currentPage}{status ? '' : ` / ${totalPages}`}
+                        {currentPage}
                     </span>
                     <button
                         onClick={handleNextPage}
@@ -226,4 +240,3 @@ export const ViewAllPage: React.FC<ViewAllPageProps> = ({
         </div>
     );
 };
-
diff --git a/cinetrack-app/client/src/router.tsx b/cinetrack-app/client/src/router.tsx
new file mode 100644
index 0000000..14503e7
--- /dev/null
+++ b/cinetrack-app/client/src/router.tsx
@@ -0,0 +1,27 @@
+import { createBrowserRouter, Navigate } from "react-router-dom";
+import { lazy } from "react";
+
+const RootLayout = lazy(() => import("./layouts/RootLayout"));
+const DiscoverPage = lazy(() => import("./pages/DiscoverPage").then(m => ({ default: m.DiscoverPage })));
+const ListsPage = lazy(() => import("./pages/ListsPage").then(m => ({ default: m.ListsPage })));
+const RecommendationsPage = lazy(() => import("./pages/RecommendationsPage").then(m => ({ default: m.RecommendationsPage })));
+const StatisticsPage = lazy(() => import("./pages/StatisticsPage").then(m => ({ default: m.StatisticsPage })));
+const ViewAllPage = lazy(() => import("./pages/ViewAllPage").then(m => ({ default: m.ViewAllPage })));
+const SearchResultsPage = lazy(() => import("./pages/SearchResultsPage"));
+
+export const router = createBrowserRouter([
+    {
+        path: "/",
+        element: <RootLayout />,
+        children: [
+            { index: true, element: <DiscoverPage /> },
+            { path: "discover", element: <DiscoverPage /> },
+            { path: "lists", element: <ListsPage /> },
+            { path: "lists/:status", element: <ViewAllPage /> },
+            { path: "recommendations", element: <RecommendationsPage /> },
+            { path: "stats", element: <StatisticsPage /> },
+            { path: "search", element: <SearchResultsPage /> },
+            { path: "*", element: <Navigate to="/" replace /> },
+        ],
+    },
+]);
diff --git a/cinetrack-app/package-lock.json b/cinetrack-app/package-lock.json
index 01746c6..2a75f51 100644
--- a/cinetrack-app/package-lock.json
+++ b/cinetrack-app/package-lock.json
@@ -19,6 +19,7 @@
         "react": "^19.2.1",
         "react-dom": "^19.2.1",
         "react-icons": "^5.5.0",
+        "react-router-dom": "^7.11.0",
         "scheduler": "^0.27.0",
         "socket.io-client": "^4.8.1",
         "use-context-selector": "^2.0.0",
@@ -4985,6 +4986,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.1.tgz",
       "integrity": "sha512-ibrK8llX2a4eOskq1mXKu/TGZj9qzomO+sNfO98M6d9zIPOEhlBkMkBUBLd1vgS0gQsLDBzA+8jJBVXDnfHmJg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -5011,6 +5013,57 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "7.11.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.11.0.tgz",
+      "integrity": "sha512-uI4JkMmjbWCZc01WVP2cH7ZfSzH91JAZUDd7/nIprDgWxBV1TkkmLToFh7EbMTcMak8URFRa2YoBL/W8GWnCTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.11.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.11.0.tgz",
+      "integrity": "sha512-e49Ir/kMGRzFOOrYQBdoitq3ULigw4lKbAyKusnvtDu2t4dBX4AGYPrzNvorXmVuOyeakai6FUPW5MmibvVG8g==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.11.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/react-router/node_modules/cookie": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
+      "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -5242,6 +5295,12 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
+      "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
+      "license": "MIT"
+    },
     "node_modules/setprototypeof": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",

From a3072dc7aa9add10186d77dc723556e6428bedbb Mon Sep 17 00:00:00 2001
From: Alameen <smokinaxle67@gmail.com>
Date: Fri, 2 Jan 2026 10:49:32 +0530
Subject: [PATCH 6/7] state management consolidated.

---
 cinetrack-app/client/package.json             |   1 -
 cinetrack-app/client/src/App.tsx              |  11 +-
 .../client/src/contexts/WatchlistContext.tsx  | 297 ------------------
 .../client/src/pages/StatisticsPage.tsx       |  25 +-
 .../client/src/pages/ViewAllPage.tsx          |   2 +-
 .../client/src/store/useWatchlistStore.ts     |  63 ++++
 cinetrack-app/client/vite.config.ts           |   1 -
 cinetrack-app/package-lock.json               |  11 -
 8 files changed, 90 insertions(+), 321 deletions(-)
 delete mode 100644 cinetrack-app/client/src/contexts/WatchlistContext.tsx

diff --git a/cinetrack-app/client/package.json b/cinetrack-app/client/package.json
index d485b99..2ea71a8 100644
--- a/cinetrack-app/client/package.json
+++ b/cinetrack-app/client/package.json
@@ -16,7 +16,6 @@
     "react-router-dom": "^7.11.0",
     "scheduler": "^0.27.0",
     "socket.io-client": "^4.8.1",
-    "use-context-selector": "^2.0.0",
     "zustand": "^5.0.9"
   },
   "devDependencies": {
diff --git a/cinetrack-app/client/src/App.tsx b/cinetrack-app/client/src/App.tsx
index c029fc4..52fc90d 100644
--- a/cinetrack-app/client/src/App.tsx
+++ b/cinetrack-app/client/src/App.tsx
@@ -1,15 +1,20 @@
 import React, { Suspense, lazy } from "react";
 import { ErrorBoundary } from "./components/common/ErrorBoundary";
-import { WatchlistProvider } from "./contexts/WatchlistContext";
 import { UIProvider } from "./contexts/UIContext";
 import { DiscoverProvider } from "./contexts/DiscoverContext";
 import { AuthProvider, useAuthContext } from "./contexts/AuthContext";
 import { DemoWelcomeModal, useDemoWelcome } from "./components/common/DemoWelcomeModal";
 import { RouterProvider } from "react-router-dom";
 import { router } from "./router";
+import { useWatchlistInit } from "./store/useWatchlistStore";
 
 const AuthPage = lazy(() => import("./pages/AuthPage").then((m) => ({ default: m.AuthPage })));
 
+const WatchlistInitializer: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  useWatchlistInit();
+  return <>{children}</>;
+};
+
 const AuthenticatedApp: React.FC = () => {
   const { isAuthenticated, isLoading, user } = useAuthContext();
   const { showWelcome, closeWelcome } = useDemoWelcome(user?.isDemo);
@@ -43,13 +48,13 @@ const AuthenticatedApp: React.FC = () => {
 
   return (
     <div className="animate-fadeIn">
-      <WatchlistProvider>
+      <WatchlistInitializer>
         <UIProvider>
           <DiscoverProvider>
             <RouterProvider router={router} />
           </DiscoverProvider>
         </UIProvider>
-      </WatchlistProvider>
+      </WatchlistInitializer>
       {showWelcome && <DemoWelcomeModal onClose={closeWelcome} />}
       <style>{`
         @keyframes fadeIn {
diff --git a/cinetrack-app/client/src/contexts/WatchlistContext.tsx b/cinetrack-app/client/src/contexts/WatchlistContext.tsx
deleted file mode 100644
index ecdfd27..0000000
--- a/cinetrack-app/client/src/contexts/WatchlistContext.tsx
+++ /dev/null
@@ -1,297 +0,0 @@
-import {
-    useEffect,
-    useMemo,
-    type ReactNode,
-} from "react";
-import { createContext, useContextSelector } from "use-context-selector";
-import { socketService } from "../services/socketService";
-import type {
-    WatchlistItem,
-    MovieDetail,
-    TVDetail,
-    SearchResult,
-    TVWatchlistItem,
-} from "../types/types";
-
-import {
-    useWatchlistStore,
-    getWatchlistIds,
-    getProgressMap,
-    getFilteredItems,
-} from "../store/useWatchlistStore";
-
-interface WatchlistContextType {
-    watchlist: WatchlistItem[];
-    watchlistIds: Set<number>;
-    isLoading: boolean;
-    error: string | null;
-    setError: (error: string | null) => void;
-
-    // Derived data
-    watchlistItems: WatchlistItem[];
-    currentlyWatchingItems: TVWatchlistItem[];
-    watchedItems: WatchlistItem[];
-    progressMap: Record<string, number>;
-    allUniqueTags: string[];
-    activeTagFilter: string | null;
-    setActiveTagFilter: (tag: string | null) => void;
-
-    // Operations
-    toggleWatchlist: (media: MovieDetail | TVDetail) => Promise<void>;
-    toggleWatchlistFromSearchResult: (media: SearchResult) => Promise<void>;
-    toggleMovieWatched: (movieId: number) => Promise<void>;
-    toggleEpisodeWatched: (
-        tvId: number,
-        seasonNumber: number,
-        episodeNumber: number
-    ) => Promise<void>;
-    toggleSeasonWatched: (
-        tvId: number,
-        seasonNumber: number,
-        allEpisodeNumbers: number[]
-    ) => Promise<void>;
-    updateTags: (mediaId: number, newTags: string[]) => Promise<void>;
-    exportWatchlist: () => Promise<void>;
-    importWatchlist: (event: React.ChangeEvent<HTMLInputElement>) => void;
-}
-
-const WatchlistContext = createContext<WatchlistContextType | undefined>(
-    undefined
-);
-
-export const WatchlistProvider: React.FC<{ children: ReactNode }> = ({
-    children,
-}) => {
-    const watchlist = useWatchlistStore(state => state.watchlist);
-    const activeTagFilter = useWatchlistStore(state => state.activeTagFilter);
-    const isLoading = useWatchlistStore(state => state.isLoading);
-    const error = useWatchlistStore(state => state.error);
-    const setError = useWatchlistStore(state => state.setError);
-    const setActiveTagFilter = useWatchlistStore(state => state.setActiveTagFilter);
-    const loadWatchlist = useWatchlistStore(state => state.loadWatchlist);
-    const toggleWatchlist = useWatchlistStore(state => state.toggleWatchlist);
-    const toggleWatchlistFromSearchResult = useWatchlistStore(state => state.toggleWatchlistFromSearchResult);
-    const toggleMovieWatched = useWatchlistStore(state => state.toggleMovieWatched);
-    const toggleEpisodeWatched = useWatchlistStore(state => state.toggleEpisodeWatched);
-    const toggleSeasonWatched = useWatchlistStore(state => state.toggleSeasonWatched);
-    const updateTags = useWatchlistStore(state => state.updateTags);
-    const exportWatchlist = useWatchlistStore(state => state.exportWatchlist);
-    const storeImportWatchlist = useWatchlistStore(state => state.importWatchlist);
-    const syncItem = useWatchlistStore(state => state.syncItem);
-    const deleteItem = useWatchlistStore(state => state.deleteItem);
-
-    // Derived state locally memoized to ensure stability and prevent loops
-    const watchlistIds = useMemo(
-        () => new Set(watchlist.map((item) => item.id)),
-        [watchlist]
-    );
-
-    const { watchlistItems, currentlyWatchingItems, watchedItems } =
-        useMemo(() => {
-            let filteredWatchlist = watchlist;
-            if (activeTagFilter) {
-                filteredWatchlist = watchlist.filter((item) =>
-                    item.tags?.includes(activeTagFilter)
-                );
-            }
-
-            const watchlistItems: WatchlistItem[] = [];
-            const currentlyWatchingItems: TVWatchlistItem[] = [];
-            const watchedItems: WatchlistItem[] = [];
-
-            for (const item of filteredWatchlist) {
-                if (item.media_type === "movie") {
-                    if (item.watched) {
-                        watchedItems.push(item);
-                    } else {
-                        watchlistItems.push(item);
-                    }
-                } else if (item.media_type === "tv") {
-                    const watchedCount = Object.values(item.watchedEpisodes || {}).reduce(
-                        (acc, eps) => acc + (Array.isArray(eps) ? eps.length : 0),
-                        0
-                    );
-                    if (watchedCount === 0) {
-                        watchlistItems.push(item);
-                    } else if (
-                        watchedCount > 0 &&
-                        watchedCount < item.number_of_episodes
-                    ) {
-                        currentlyWatchingItems.push(item);
-                    } else if (
-                        watchedCount > 0 &&
-                        watchedCount >= item.number_of_episodes
-                    ) {
-                        watchedItems.push(item);
-                    } else {
-                        watchlistItems.push(item);
-                    }
-                }
-            }
-            return { watchlistItems, currentlyWatchingItems, watchedItems };
-        }, [watchlist, activeTagFilter]);
-
-    // Progress map
-    const progressMap = useMemo(() => {
-        const map: Record<string, number> = {};
-        currentlyWatchingItems.forEach((item) => {
-            const watchedCount = Object.values(item.watchedEpisodes || {}).reduce(
-                (acc, eps) => acc + (Array.isArray(eps) ? eps.length : 0),
-                0
-            );
-            const progress =
-                item.number_of_episodes > 0
-                    ? (watchedCount / item.number_of_episodes) * 100
-                    : 0;
-            map[item.id] = progress;
-        });
-        return map;
-    }, [currentlyWatchingItems]);
-
-    // All unique tags
-    const allUniqueTags = useMemo(() => {
-        const tags = new Set<string>();
-        watchlist.forEach((item) => {
-            item.tags?.forEach((tag) => tags.add(tag));
-        });
-        return Array.from(tags).sort();
-    }, [watchlist]);
-
-    // Initial load and socket connection
-    useEffect(() => {
-        loadWatchlist();
-
-        return () => {
-            socketService.disconnect();
-        };
-    }, [loadWatchlist]);
-
-    // Socket listeners
-    useEffect(() => {
-        const unsubUpdate = socketService.onUpdate((item) => {
-            syncItem(item);
-        });
-
-        const unsubDelete = socketService.onDelete(({ id }) => {
-            deleteItem(id);
-        });
-
-        const unsubSync = socketService.onSync(async () => {
-            // Re-load full list on sync request
-            loadWatchlist();
-        });
-
-        return () => {
-            unsubUpdate();
-            unsubDelete();
-            unsubSync();
-        };
-    }, [syncItem, deleteItem, loadWatchlist]);
-
-    // Adapter for importWatchlist to match Context signature
-    const handleImportWatchlist = (event: React.ChangeEvent<HTMLInputElement>) => {
-        const file = event.target.files?.[0];
-        if (file) {
-            if (window.confirm("Are you sure you want to overwrite your current watchlist? This action cannot be undone.")) {
-                storeImportWatchlist(file);
-            }
-        }
-        event.target.value = "";
-    };
-
-    const value = useMemo(
-        () => ({
-            watchlist,
-            watchlistIds,
-            isLoading,
-            error,
-            setError,
-            watchlistItems,
-            currentlyWatchingItems,
-            watchedItems,
-            progressMap,
-            allUniqueTags,
-            activeTagFilter,
-            setActiveTagFilter,
-
-            toggleWatchlist,
-            toggleWatchlistFromSearchResult,
-            toggleMovieWatched,
-            toggleEpisodeWatched,
-            toggleSeasonWatched,
-            updateTags,
-            exportWatchlist,
-            importWatchlist: handleImportWatchlist,
-        }),
-        [
-            watchlist,
-            watchlistIds,
-            isLoading,
-            error,
-            setError, // stable
-            watchlistItems,
-            currentlyWatchingItems,
-            watchedItems,
-            progressMap,
-            allUniqueTags,
-            activeTagFilter,
-            setActiveTagFilter, // stable
-            toggleWatchlist, // stable
-            toggleWatchlistFromSearchResult, // stable
-            toggleMovieWatched, // stable
-            toggleEpisodeWatched, // stable
-            toggleSeasonWatched, // stable
-            updateTags, // stable
-            exportWatchlist, // stable
-            handleImportWatchlist // stable (created in render but deps are [])
-        ]
-    );
-
-    return (
-        <WatchlistContext.Provider value={value}>
-            {children}
-        </WatchlistContext.Provider>
-    );
-};
-
-// ============================================================================
-// HOOKS (Backward Compatible)
-// ============================================================================
-
-export const useWatchlistContext = (): WatchlistContextType => {
-    const context = useContextSelector(WatchlistContext, (ctx) => ctx);
-    if (context === undefined) {
-        throw new Error(
-            "useWatchlistContext must be used within a WatchlistProvider"
-        );
-    }
-    return context;
-};
-
-// ============================================================================
-// OPTIMIZED SELECTOR HOOKS (Delegating to Store directly where possible or Context)
-// ============================================================================
-
-// pointing these to the store directly for better performance!
-// This bypasses the Context completely for these specific hooks, 
-
-export const useWatchlistIds = () => {
-    const watchlist = useWatchlistStore(state => state.watchlist);
-    return useMemo(() => getWatchlistIds(watchlist), [watchlist]);
-};
-
-export const useWatchlistLoading = (): boolean => {
-    return useWatchlistStore(state => state.isLoading);
-};
-
-export const useWatchlist = (): WatchlistItem[] => {
-    return useWatchlistStore(state => state.watchlist);
-};
-
-export const useProgressMap = () => {
-    const watchlist = useWatchlistStore(state => state.watchlist);
-    const { currentlyWatchingItems } = useMemo(() => getFilteredItems(watchlist, null), [watchlist]);
-    return useMemo(() => getProgressMap(currentlyWatchingItems), [currentlyWatchingItems]);
-};
-
-
diff --git a/cinetrack-app/client/src/pages/StatisticsPage.tsx b/cinetrack-app/client/src/pages/StatisticsPage.tsx
index 82f21e4..487ab0c 100644
--- a/cinetrack-app/client/src/pages/StatisticsPage.tsx
+++ b/cinetrack-app/client/src/pages/StatisticsPage.tsx
@@ -1,9 +1,14 @@
-import React, { memo, useMemo } from "react";
+import React, { memo, useMemo, useDeferredValue } from "react";
 import { useWatchlistStore, getFilteredItems, calculateWatchStats, formatWatchTime, type WatchStatistics } from "../store/useWatchlistStore";
 
 import { FiPlayCircle, FiCheckCircle, FiStar, FiBookmark, FiBarChart2 } from "react-icons/fi";
 
-// Stat Card Component
+const EMPTY_STATS: WatchStatistics = {
+    shows: { totalWatchTimeMinutes: 0, totalEpisodes: 0, totalShows: 0 },
+    movies: { totalWatchTimeMinutes: 0, totalMovies: 0 },
+    summary: { currentlyWatching: 0, completionRate: 0, topGenres: [], averageRating: 0 },
+};
+
 const StatCard: React.FC<{
     title: string;
     mainValue: string;
@@ -54,16 +59,22 @@ const GenreBadge: React.FC<{ name: string; count: number }> = ({ name, count })
 
 export const StatisticsPage: React.FC = memo(() => {
     const watchlist = useWatchlistStore(state => state.watchlist);
+
+    // Defer the watchlist so heavy computation doesn't block UI updates
+    const deferredWatchlist = useDeferredValue(watchlist);
+    const isStale = deferredWatchlist !== watchlist;
+
     const { currentlyWatchingItems, watchedItems } = useMemo(() =>
-        getFilteredItems(watchlist, null),
-        [watchlist]);
+        getFilteredItems(deferredWatchlist, null),
+        [deferredWatchlist]);
 
     const stats = useMemo<WatchStatistics>(() => {
-        return calculateWatchStats(watchlist, currentlyWatchingItems.length, watchedItems);
-    }, [watchlist, currentlyWatchingItems.length, watchedItems]);
+        if (deferredWatchlist.length === 0) return EMPTY_STATS;
+        return calculateWatchStats(deferredWatchlist, currentlyWatchingItems.length, watchedItems);
+    }, [deferredWatchlist, currentlyWatchingItems.length, watchedItems]);
 
     return (
-        <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-6 pb-24 lg:pb-6">
+        <div className={`container mx-auto px-4 sm:px-6 lg:px-8 py-6 pb-24 lg:pb-6 transition-opacity duration-150 ${isStale ? "opacity-70" : "opacity-100"}`}>
             <h1 className="text-2xl font-bold text-white mb-6">Your Stats</h1>
 
             {/* Main Stats Grid */}
diff --git a/cinetrack-app/client/src/pages/ViewAllPage.tsx b/cinetrack-app/client/src/pages/ViewAllPage.tsx
index 556fcd2..b3fe401 100644
--- a/cinetrack-app/client/src/pages/ViewAllPage.tsx
+++ b/cinetrack-app/client/src/pages/ViewAllPage.tsx
@@ -1,7 +1,7 @@
 import { useState, useMemo, useCallback, useEffect, useRef } from "react";
 import { useParams, useNavigate } from "react-router-dom";
 import { MediaCard } from "../components/media/MediaCard";
-import { useWatchlistIds, useProgressMap } from "../contexts/WatchlistContext";
+import { useWatchlistIds, useProgressMap } from "../store/useWatchlistStore";
 import { useUIContext } from "../contexts/UIContext";
 import type { WatchlistItem } from "../types/types";
 import type { WatchlistStatus } from "../services/dbService";
diff --git a/cinetrack-app/client/src/store/useWatchlistStore.ts b/cinetrack-app/client/src/store/useWatchlistStore.ts
index 0c39386..ff3be1b 100644
--- a/cinetrack-app/client/src/store/useWatchlistStore.ts
+++ b/cinetrack-app/client/src/store/useWatchlistStore.ts
@@ -619,3 +619,66 @@ export const calculateWatchStats = (
         },
     };
 };
+
+// ============================================================================
+// INITIALIZATION HOOK - Call this once at app root
+// ============================================================================
+
+import { useEffect, useMemo } from 'react';
+
+export const useWatchlistInit = () => {
+    const loadWatchlist = useWatchlistStore(state => state.loadWatchlist);
+    const syncItem = useWatchlistStore(state => state.syncItem);
+    const deleteItem = useWatchlistStore(state => state.deleteItem);
+
+    useEffect(() => {
+        loadWatchlist();
+
+        return () => {
+            socketService.disconnect();
+        };
+    }, [loadWatchlist]);
+
+    useEffect(() => {
+        const unsubUpdate = socketService.onUpdate((item) => {
+            syncItem(item);
+        });
+
+        const unsubDelete = socketService.onDelete(({ id }) => {
+            deleteItem(id);
+        });
+
+        const unsubSync = socketService.onSync(() => {
+            loadWatchlist();
+        });
+
+        return () => {
+            unsubUpdate();
+            unsubDelete();
+            unsubSync();
+        };
+    }, [syncItem, deleteItem, loadWatchlist]);
+};
+
+// ============================================================================
+// SELECTOR HOOKS - Use these for optimized subscriptions
+// ============================================================================
+
+export const useWatchlistIds = () => {
+    const watchlist = useWatchlistStore(state => state.watchlist);
+    return useMemo(() => getWatchlistIds(watchlist), [watchlist]);
+};
+
+export const useWatchlistLoading = (): boolean => {
+    return useWatchlistStore(state => state.isLoading);
+};
+
+export const useWatchlist = (): WatchlistItem[] => {
+    return useWatchlistStore(state => state.watchlist);
+};
+
+export const useProgressMap = () => {
+    const watchlist = useWatchlistStore(state => state.watchlist);
+    const { currentlyWatchingItems } = useMemo(() => getFilteredItems(watchlist, null), [watchlist]);
+    return useMemo(() => getProgressMap(currentlyWatchingItems), [currentlyWatchingItems]);
+};
diff --git a/cinetrack-app/client/vite.config.ts b/cinetrack-app/client/vite.config.ts
index 512317c..a74f362 100644
--- a/cinetrack-app/client/vite.config.ts
+++ b/cinetrack-app/client/vite.config.ts
@@ -30,7 +30,6 @@ export default defineConfig({
         manualChunks: {
           'react-vendor': ['react', 'react-dom', 'scheduler'],
           'socket': ['socket.io-client'],
-          'context-selector': ['use-context-selector'],
         },
       },
     },
diff --git a/cinetrack-app/package-lock.json b/cinetrack-app/package-lock.json
index 2a75f51..686420a 100644
--- a/cinetrack-app/package-lock.json
+++ b/cinetrack-app/package-lock.json
@@ -22,7 +22,6 @@
         "react-router-dom": "^7.11.0",
         "scheduler": "^0.27.0",
         "socket.io-client": "^4.8.1",
-        "use-context-selector": "^2.0.0",
         "zustand": "^5.0.9"
       },
       "devDependencies": {
@@ -5867,16 +5866,6 @@
         "punycode": "^2.1.0"
       }
     },
-    "node_modules/use-context-selector": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/use-context-selector/-/use-context-selector-2.0.0.tgz",
-      "integrity": "sha512-owfuSmUNd3eNp3J9CdDl0kMgfidV+MkDvHPpvthN5ThqM+ibMccNE0k+Iq7TWC6JPFvGZqanqiGCuQx6DyV24g==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": ">=18.0.0",
-        "scheduler": ">=0.19.0"
-      }
-    },
     "node_modules/utils-merge": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",

From 9a39a8ae3bad870b207e112da80e5ac9bf9dc112 Mon Sep 17 00:00:00 2001
From: Alameen <smokinaxle67@gmail.com>
Date: Fri, 2 Jan 2026 13:46:40 +0530
Subject: [PATCH 7/7] redesigned stats page

---
 cinetrack-app/client/package.json             |   1 +
 .../src/components/layout/BottomNavBar.tsx    |  49 ++-
 .../client/src/pages/StatisticsPage.tsx       | 300 ++++++++++++------
 cinetrack-app/package-lock.json               |  52 ++-
 4 files changed, 286 insertions(+), 116 deletions(-)

diff --git a/cinetrack-app/client/package.json b/cinetrack-app/client/package.json
index 2ea71a8..7625931 100644
--- a/cinetrack-app/client/package.json
+++ b/cinetrack-app/client/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "framer-motion": "^12.23.26",
     "react": "^19.2.1",
     "react-dom": "^19.2.1",
     "react-icons": "^5.5.0",
diff --git a/cinetrack-app/client/src/components/layout/BottomNavBar.tsx b/cinetrack-app/client/src/components/layout/BottomNavBar.tsx
index 2df772c..f652476 100644
--- a/cinetrack-app/client/src/components/layout/BottomNavBar.tsx
+++ b/cinetrack-app/client/src/components/layout/BottomNavBar.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { FiCompass, FiList, FiHeart, FiBarChart2 } from "react-icons/fi";
+import { motion } from "framer-motion";
 
 interface BottomNavBarProps {
   activeTab: "discover" | "lists" | "recommendations" | "stats";
@@ -14,14 +15,37 @@ const NavItem: React.FC<{
 }> = ({ label, icon, isActive, onClick }) => (
   <button
     onClick={onClick}
-    className={`flex flex-col items-center justify-center w-full pt-2 pb-1 transition-colors ${isActive
-      ? "text-brand-primary"
-      : "text-brand-text-dim hover:text-brand-text-light"
-      }`}
+    className="relative flex flex-col items-center justify-center w-full pt-2 pb-2"
     aria-current={isActive ? "page" : undefined}
   >
-    {icon}
-    <span className="text-xs font-medium">{label}</span>
+    {isActive && (
+      <motion.div
+        layoutId="nav-indicator"
+        className="absolute inset-0 top-0 bottom-0 w-16 mx-auto bg-brand-primary/10 rounded-xl"
+        transition={{ type: "spring", bounce: 0.2, duration: 0.6 }}
+      />
+    )}
+
+    <motion.div
+      animate={{
+        scale: isActive ? 1.1 : 1,
+        color: isActive ? "var(--color-brand-primary)" : "var(--color-brand-text-dim)"
+      }}
+      transition={{ type: "spring", stiffness: 400, damping: 17 }}
+      className="relative z-10"
+    >
+      {icon}
+    </motion.div>
+
+    <motion.span
+      animate={{
+        color: isActive ? "var(--color-brand-primary)" : "var(--color-brand-text-dim)",
+        fontWeight: isActive ? 600 : 500
+      }}
+      className="text-[10px] mt-1 relative z-10"
+    >
+      {label}
+    </motion.span>
   </button>
 );
 
@@ -33,31 +57,30 @@ export const BottomNavBar: React.FC<BottomNavBarProps> = ({
     {
       id: "discover",
       label: "Discover",
-      icon: <FiCompass className="h-6 w-6 mb-1" />,
+      icon: <FiCompass className="h-6 w-6" />,
     },
     {
       id: "lists",
       label: "My List",
-      icon: <FiList className="h-6 w-6 mb-1" />,
+      icon: <FiList className="h-6 w-6" />,
     },
     {
       id: "recommendations",
       label: "For You",
-      icon: <FiHeart className="h-6 w-6 mb-1" />,
+      icon: <FiHeart className="h-6 w-6" />,
     },
     {
       id: "stats",
       label: "Stats",
-      icon: <FiBarChart2 className="h-6 w-6 mb-1" />,
+      icon: <FiBarChart2 className="h-6 w-6" />,
     },
   ] as const;
 
   return (
     <nav
-      className="lg:hidden fixed bottom-0 left-0 right-0 bg-brand-bg/80 backdrop-blur-lg border-t border-brand-surface/50 z-20"
-      style={{ paddingBottom: "env(safe-area-inset-bottom)" }}
+      className="lg:hidden fixed bottom-0 left-0 right-0 bg-brand-bg/90 backdrop-blur-xl border-t border-white/5 z-20 pb-[env(safe-area-inset-bottom)]"
     >
-      <div className="flex justify-around items-start max-w-xl mx-auto">
+      <div className="flex justify-around items-center max-w-xl mx-auto px-2 py-2">
         {navItems.map((item) => (
           <NavItem
             key={item.id}
diff --git a/cinetrack-app/client/src/pages/StatisticsPage.tsx b/cinetrack-app/client/src/pages/StatisticsPage.tsx
index 487ab0c..5c03ff1 100644
--- a/cinetrack-app/client/src/pages/StatisticsPage.tsx
+++ b/cinetrack-app/client/src/pages/StatisticsPage.tsx
@@ -1,7 +1,6 @@
 import React, { memo, useMemo, useDeferredValue } from "react";
 import { useWatchlistStore, getFilteredItems, calculateWatchStats, formatWatchTime, type WatchStatistics } from "../store/useWatchlistStore";
-
-import { FiPlayCircle, FiCheckCircle, FiStar, FiBookmark, FiBarChart2 } from "react-icons/fi";
+import { FiCheckCircle, FiStar, FiBookmark, FiActivity, FiTrendingUp } from "react-icons/fi";
 
 const EMPTY_STATS: WatchStatistics = {
     shows: { totalWatchTimeMinutes: 0, totalEpisodes: 0, totalShows: 0 },
@@ -9,62 +8,144 @@ const EMPTY_STATS: WatchStatistics = {
     summary: { currentlyWatching: 0, completionRate: 0, topGenres: [], averageRating: 0 },
 };
 
-const StatCard: React.FC<{
+const HeroCircle = ({ totalMinutes, showsMinutes, moviesMinutes }: { totalMinutes: number, showsMinutes: number, moviesMinutes: number }) => {
+    const totalTimeStr = formatWatchTime(totalMinutes);
+    const showsTimeStr = formatWatchTime(showsMinutes);
+    const moviesTimeStr = formatWatchTime(moviesMinutes);
+
+    return (
+        <div className="relative flex flex-col items-center justify-center py-10 lg:py-0 lg:h-full">
+            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-brand-primary/10 rounded-full blur-3xl opacity-50 pointer-events-none" />
+            <div className="relative w-64 h-64 lg:w-72 lg:h-72">
+                <svg className="w-full h-full -rotate-90" viewBox="0 0 100 100">
+                    <circle
+                        cx="50"
+                        cy="50"
+                        r="45"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="1"
+                        className="text-white/5"
+                    />
+                    <defs>
+                        <linearGradient id="circleGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                            <stop offset="0%" stopColor="#EAB308" /> 
+                            <stop offset="100%" stopColor="#A855F7" /> 
+                        </linearGradient>
+                    </defs>
+                    <circle
+                        cx="50"
+                        cy="50"
+                        r="45"
+                        fill="none"
+                        stroke="url(#circleGradient)"
+                        strokeWidth="2" 
+                        strokeLinecap="round"
+                        strokeDasharray="283" 
+                        strokeDashoffset="70" 
+                        className="opacity-90 drop-shadow-[0_0_10px_rgba(234,179,8,0.3)]"
+                    />
+                </svg>
+
+                <div className="absolute inset-0 flex flex-col items-center justify-center text-center">
+                    <h2 className="text-4xl lg:text-5xl font-bold bg-linear-to-br from-yellow-400 to-purple-400 bg-clip-text text-transparent tracking-tight">
+                        {totalTimeStr.split(' ')[0]} 
+                        <span className="text-xl lg:text-2xl text-white/40 font-medium ml-1">
+                            {totalTimeStr.split(' ').slice(1).join(' ')}
+                        </span>
+                    </h2>
+                    <p className="text-brand-text-dim text-sm mt-2 font-medium tracking-wide">
+                        Total time watching
+                    </p>
+                </div>
+            </div>
+
+
+            <div className="mt-6 flex items-center gap-3 text-sm text-brand-text-dim/60 font-medium tracking-wider uppercase">
+                <span>Shows: <span className="text-brand-text-dim">{showsTimeStr}</span></span>
+                <span className="w-1 h-1 bg-white/20 rounded-full" />
+                <span>Movies: <span className="text-brand-text-dim">{moviesTimeStr}</span></span>
+            </div>
+        </div>
+    );
+};
+
+const StatTile: React.FC<{
+    icon: React.ReactNode;
     title: string;
-    mainValue: string;
     subtitle: string;
-    details?: string;
-    gradientFrom?: string;
-    gradientTo?: string;
-}> = ({ title, mainValue, subtitle, details, gradientFrom = "from-brand-primary", gradientTo = "to-brand-secondary" }) => (
-    <div className="relative overflow-hidden bg-white/5 backdrop-blur-xl rounded-2xl p-5 border border-white/10 transition-all duration-300 hover:bg-white/[0.07] hover:border-white/20 group">
-        <div className={`absolute top-0 left-0 right-0 h-1 bg-gradient-to-r ${gradientFrom} ${gradientTo} opacity-60 group-hover:opacity-100 transition-opacity`} />
-
-        <p className="text-xs uppercase tracking-wider text-brand-text-dim font-medium mb-3">
-            {title}
-        </p>
-        <p className={`text-3xl font-bold bg-gradient-to-r ${gradientFrom} ${gradientTo} bg-clip-text text-transparent mb-1`}>
-            {mainValue}
-        </p>
-        <p className="text-sm text-brand-text-dim mb-1">{subtitle}</p>
-        {details && (
-            <p className="text-xs text-brand-text-dim/70">{details}</p>
-        )}
-    </div>
-);
+    status: string;
+    accentColor?: "yellow" | "purple" | "blue" | "green";
+}> = ({ icon, title, subtitle, status, accentColor = "yellow" }) => {
+    const iconStyles = {
+        yellow: "text-yellow-400 bg-yellow-400/10",
+        purple: "text-purple-400 bg-purple-400/10",
+        blue: "text-blue-400 bg-blue-400/10",
+        green: "text-green-400 bg-green-400/10",
+    }[accentColor];
 
+    return (
+        <div className="bg-[#121214] border border-white/6 rounded-2xl p-6 flex flex-col justify-between hover:border-white/10 transition-colors duration-300 group">
+            <div className="flex items-start gap-4 mb-4">
+                <div className={`w-10 h-10 rounded-full flex items-center justify-center ${iconStyles} shrink-0 group-hover:scale-110 transition-transform duration-300`}>
+                    {icon}
+                </div>
+                <div>
+                    <h3 className="text-base font-bold text-white mb-0.5">{title}</h3>
+                    <p className="text-xs text-brand-text-dim/60 uppercase tracking-wide">{subtitle}</p>
+                </div>
+            </div>
 
-const MiniStatCard: React.FC<{
-    label: string;
-    value: string | number;
-    icon: React.ReactNode;
-}> = ({ label, value, icon }) => (
-    <div className="flex items-center gap-3 bg-white/5 backdrop-blur-xl rounded-xl p-4 border border-white/10">
-        <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-primary/20 to-brand-secondary/20 flex items-center justify-center text-brand-primary">
-            {icon}
+            <div>
+                <p className="text-brand-text-light text-sm font-medium leading-relaxed">
+                    {status}
+                </p>
+            </div>
+        </div>
+    );
+};
+
+const CompletionCard: React.FC<{ rate: number, completedCount: number }> = ({ rate, completedCount }) => (
+    <div className="bg-[#121214] border border-white/6 rounded-2xl p-6 flex items-center gap-6 mt-6 hover:border-white/10 transition-colors duration-300">
+        <div className="relative w-16 h-16 shrink-0">
+            <svg className="w-full h-full -rotate-90" viewBox="0 0 36 36">
+                <path
+                    className="text-white/5"
+                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="4"
+                />
+                <path
+                    className="text-brand-primary drop-shadow-[0_0_8px_rgba(234,179,8,0.2)]"
+                    strokeDasharray={`${rate}, 100`}
+                    d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="4"
+                    strokeLinecap="round"
+                />
+            </svg>
+            <div className="absolute inset-0 flex items-center justify-center text-[10px] font-bold text-white">
+                {rate}%
+            </div>
         </div>
         <div>
-            <p className="text-lg font-semibold text-white">{value}</p>
-            <p className="text-xs text-brand-text-dim">{label}</p>
+            <h3 className="text-lg font-bold text-white mb-1">Completion Progress</h3>
+            <p className="text-brand-text-dim text-sm mb-1">{completedCount} Titles Completed</p>
+            <p className="text-xs text-white/30 italic">Stats get better when you actually watch something.</p>
         </div>
     </div>
 );
 
-const GenreBadge: React.FC<{ name: string; count: number }> = ({ name, count }) => (
-    <div className="flex items-center gap-2 bg-white/5 rounded-full px-3 py-1.5 border border-white/10">
-        <span className="text-sm text-white">{name}</span>
-        <span className="text-xs text-brand-text-dim bg-white/10 rounded-full px-2 py-0.5">{count}</span>
-    </div>
-);
 
 export const StatisticsPage: React.FC = memo(() => {
     const watchlist = useWatchlistStore(state => state.watchlist);
 
-    // Defer the watchlist so heavy computation doesn't block UI updates
     const deferredWatchlist = useDeferredValue(watchlist);
     const isStale = deferredWatchlist !== watchlist;
 
-    const { currentlyWatchingItems, watchedItems } = useMemo(() =>
+    const { currentlyWatchingItems, watchedItems, watchlistItems } = useMemo(() =>
         getFilteredItems(deferredWatchlist, null),
         [deferredWatchlist]);
 
@@ -73,78 +154,95 @@ export const StatisticsPage: React.FC = memo(() => {
         return calculateWatchStats(deferredWatchlist, currentlyWatchingItems.length, watchedItems);
     }, [deferredWatchlist, currentlyWatchingItems.length, watchedItems]);
 
+    const totalWatchTime = stats.shows.totalWatchTimeMinutes + stats.movies.totalWatchTimeMinutes;
+
+    let bingeLevel = "Beginner";
+    if (stats.summary.currentlyWatching >= 3) bingeLevel = "Regular";
+    if (stats.summary.currentlyWatching >= 6) bingeLevel = "Pro";
+    if (stats.summary.currentlyWatching >= 10) bingeLevel = "Binge Master";
+
+    const tasteLevel = stats.summary.averageRating > 0
+        ? `${stats.summary.averageRating}/10 Avg`
+        : "Unrated";
+    const tasteStatus = stats.summary.averageRating > 0
+        ? `Based on ${watchedItems.length} rated titles`
+        : "Your opinions are loading...";
+
+    const commitmentMsg = watchlistItems.length === 0
+        ? "No pressure."
+        : watchlistItems.length < 5
+            ? "Low risk. No pressure."
+            : "A growing backlog.";
+
     return (
-        <div className={`container mx-auto px-4 sm:px-6 lg:px-8 py-6 pb-24 lg:pb-6 transition-opacity duration-150 ${isStale ? "opacity-70" : "opacity-100"}`}>
-            <h1 className="text-2xl font-bold text-white mb-6">Your Stats</h1>
-
-            {/* Main Stats Grid */}
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
-                <StatCard
-                    title="Shows"
-                    mainValue={formatWatchTime(stats.shows.totalWatchTimeMinutes)}
-                    subtitle="All Time"
-                    details={`${stats.shows.totalEpisodes.toLocaleString()} episodes, ${stats.shows.totalShows} shows`}
-                    gradientFrom="from-purple-500"
-                    gradientTo="to-pink-500"
-                />
-                <StatCard
-                    title="Movies"
-                    mainValue={formatWatchTime(stats.movies.totalWatchTimeMinutes)}
-                    subtitle="All Time"
-                    details={`${stats.movies.totalMovies} movies`}
-                    gradientFrom="from-cyan-500"
-                    gradientTo="to-blue-500"
-                />
-            </div>
+        <div className={`container mx-auto px-4 sm:px-6 lg:px-8 py-8 transition-opacity duration-300 ${isStale ? "opacity-70" : "opacity-100"}`}>
 
-            {/* Summary Stats */}
-            <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-6">
-                <MiniStatCard
-                    label="Currently Watching"
-                    value={stats.summary.currentlyWatching}
-                    icon={<FiPlayCircle className="w-5 h-5" />}
-                />
-                <MiniStatCard
-                    label="Completion Rate"
-                    value={`${stats.summary.completionRate}%`}
-                    icon={<FiCheckCircle className="w-5 h-5" />}
-                />
-                <MiniStatCard
-                    label="Avg. Rating"
-                    value={stats.summary.averageRating > 0 ? `${stats.summary.averageRating}/10` : "—"}
-                    icon={<FiStar className="w-5 h-5" />}
-                />
-                <MiniStatCard
-                    label="Total in List"
-                    value={watchlist.length}
-                    icon={<FiBookmark className="w-5 h-5" />}
-                />
+            <h1 className="text-3xl font-bold text-white mb-2 tracking-tight">Your Watching Stats</h1>
+
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+
+                <div className="lg:col-span-1 bg-brand-bg border border-white/6 rounded-3xl p-6 flex flex-col items-center justify-center relative overflow-hidden shadow-2xl shadow-black/50">
+                    <HeroCircle
+                        totalMinutes={totalWatchTime}
+                        showsMinutes={stats.shows.totalWatchTimeMinutes}
+                        moviesMinutes={stats.movies.totalWatchTimeMinutes}
+                    />
+                </div>
+
+                <div className="lg:col-span-2 flex flex-col gap-6">
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <StatTile
+                            icon={<FiActivity className="w-5 h-5" />}
+                            title="Watching Style"
+                            subtitle={`Binge Level: ${bingeLevel}`}
+                            status={`${stats.summary.currentlyWatching} titles in progress`}
+                            accentColor="yellow"
+                        />
+                        <StatTile
+                            icon={<FiCheckCircle className="w-5 h-5" />}
+                            title="Follow-through"
+                            subtitle={watchedItems.length > 0 ? "You finish what you start." : "No completed titles yet."}
+                            status={watchedItems.length > 0 ? "Keep it up!" : "Let's change that."}
+                            accentColor="purple"
+                        />
+                        <StatTile
+                            icon={<FiStar className="w-5 h-5" />}
+                            title="Taste Level"
+                            subtitle={tasteLevel}
+                            status={tasteStatus}
+                            accentColor="yellow"
+                        />
+                        <StatTile
+                            icon={<FiBookmark className="w-5 h-5" />}
+                            title="Watchlist Commitment"
+                            subtitle={`${watchlistItems.length} title${watchlistItems.length !== 1 ? 's' : ''} saved`}
+                            status={commitmentMsg}
+                            accentColor="purple"
+                        />
+                    </div>
+
+                    <CompletionCard
+                        rate={stats.summary.completionRate}
+                        completedCount={watchedItems.length}
+                    />
+                </div>
             </div>
 
-            {/* Top Genres */}
             {stats.summary.topGenres.length > 0 && (
-                <div className="bg-white/5 backdrop-blur-xl rounded-2xl p-5 border border-white/10">
-                    <h2 className="text-sm uppercase tracking-wider text-brand-text-dim font-medium mb-4">
-                        Top Genres
+                <div className="mt-8 bg-brand-bg border border-white/6 rounded-2xl p-6">
+                    <h2 className="text-sm uppercase tracking-wider text-brand-text-dim font-medium mb-4 flex items-center gap-2">
+                        <FiTrendingUp className="w-4 h-4" /> Top Genres
                     </h2>
                     <div className="flex flex-wrap gap-2">
                         {stats.summary.topGenres.map(genre => (
-                            <GenreBadge key={genre.name} name={genre.name} count={genre.count} />
+                            <div key={genre.name} className="flex items-center gap-2 bg-white/5 rounded-full px-4 py-2 border border-white/10 hover:bg-white/10 transition-colors">
+                                <span className="text-sm text-white font-medium">{genre.name}</span>
+                                <span className="text-xs text-brand-text-dim bg-black/40 rounded-full px-2 py-0.5 min-w-[20px] text-center">{genre.count}</span>
+                            </div>
                         ))}
                     </div>
                 </div>
             )}
-
-            {/* Empty state */}
-            {watchlist.length === 0 && (
-                <div className="text-center py-12">
-                    <div className="w-16 h-16 rounded-full bg-white/5 flex items-center justify-center mx-auto mb-4">
-                        <FiBarChart2 className="w-8 h-8 text-brand-text-dim" />
-                    </div>
-                    <p className="text-brand-text-dim text-lg mb-2">No stats yet</p>
-                    <p className="text-brand-text-dim/70 text-sm">Add items to your watchlist and mark them as watched to see your stats!</p>
-                </div>
-            )}
         </div>
     );
 });
diff --git a/cinetrack-app/package-lock.json b/cinetrack-app/package-lock.json
index 686420a..270475d 100644
--- a/cinetrack-app/package-lock.json
+++ b/cinetrack-app/package-lock.json
@@ -16,6 +16,7 @@
       "name": "cinetrack-client",
       "version": "0.0.0",
       "dependencies": {
+        "framer-motion": "^12.23.26",
         "react": "^19.2.1",
         "react-dom": "^19.2.1",
         "react-icons": "^5.5.0",
@@ -3468,6 +3469,33 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "12.23.26",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.26.tgz",
+      "integrity": "sha512-cPcIhgR42xBn1Uj+PzOyheMtZ73H927+uWPDVhUMqxy8UHt6Okavb6xIz9J/phFUHUj0OncR6UvMfJTXoc/LKA==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.23.23",
+        "motion-utils": "^12.23.6",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -4541,6 +4569,21 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/motion-dom": {
+      "version": "12.23.23",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.23.tgz",
+      "integrity": "sha512-n5yolOs0TQQBRUFImrRfs/+6X4p3Q4n1dUEqt/H58Vx7OW6RF+foWEgmTVDhIWJIMXOuNNL0apKH2S16en9eiA==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.23.6"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.23.6",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz",
+      "integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -5218,8 +5261,7 @@
       "version": "0.27.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
       "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/semver": {
       "version": "6.3.1",
@@ -5738,6 +5780,12 @@
         "typescript": ">=4.8.4"
       }
     },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",