diff --git a/server/src/app.ts b/server/src/app.ts
index ae647d8..f2189a8 100644
--- a/server/src/app.ts
+++ b/server/src/app.ts
@@ -20,6 +20,7 @@ const app = express();
 const PORT = process.env.PORT || 3000;
 const jwtSecret = process.env.JWT_SECRET;
 const tempTokenTtlMs = 2 * 60 * 1000;
+const authCookieTtlMs = 10 * 365 * 24 * 60 * 60 * 1000;
 const normalizeOrigin = (value: string) => value.replace(/\/+$/, '');
 const allowedOrigin = normalizeOrigin(process.env.FE_BASE_URL || '');
 const isProduction = process.env.NODE_ENV === 'production';
@@ -27,7 +28,7 @@ const cookieOptions = {
   httpOnly: true,
   secure: isProduction,
   sameSite: isProduction ? ('none' as const) : ('lax' as const),
-  maxAge: 60 * 60 * 1000,
+  maxAge: authCookieTtlMs,
   path: '/',
 };
 const cookieClearOptions = {
@@ -164,6 +165,34 @@ type TempToken = {
 
 const tempTokens = new Map<string, TempToken>();
 
+const buildUserPayload = (data: {
+  id?: string | null;
+  email?: string | null;
+  name?: string | null;
+  picture?: string | null;
+}) => ({
+  id: data.id || '',
+  email: data.email || '',
+  name: data.name || '',
+  picture: data.picture || '',
+});
+
+const signAuthToken = (user: {
+  id: string;
+  email: string;
+  name: string;
+  picture?: string;
+}) =>
+  jwt.sign(
+    {
+      id: user.id,
+      email: user.email,
+      name: user.name,
+      picture: user.picture,
+    },
+    jwtSecret,
+  );
+
 const cleanupExpiredTempTokens = () => {
   const now = Date.now();
   for (const [code, tempToken] of tempTokens.entries()) {
@@ -210,22 +239,13 @@ app.get('/api/auth/google/callback', authLimiter, async (req, res) => {
             console.log('New user created:', user.email);
           }
 
-          const token = jwt.sign(
-            {
-              id: data?.id,
-              email: data?.email,
-              name: data?.name,
-              picture: data?.picture,
-            },
-            jwtSecret,
-            { expiresIn: '1h' },
-          );
-          const userPayload = {
-            id: data?.id || '',
-            email: data?.email || '',
-            name: data?.name || '',
-            picture: data?.picture || '',
-          };
+          const userPayload = buildUserPayload({
+            id: data?.id,
+            email: data?.email,
+            name: data?.name,
+            picture: data?.picture,
+          });
+          const token = signAuthToken(userPayload);
 
           const tempCode = randomBytes(32).toString('hex');
           tempTokens.set(tempCode, {
@@ -247,7 +267,7 @@ app.get('/api/auth/google/callback', authLimiter, async (req, res) => {
   }
 });
 
-// New endpoint to exchange temporary code for token
+// exchange temporary code for token
 app.post('/api/auth/token', authLimiter, (req, res) => {
   const { code } = req.body;
   if (typeof code !== 'string') {
@@ -280,7 +300,6 @@ app.post('/api/auth/logout', authLimiter, (req, res) => {
   res.status(204).send();
 });
 
-// Get user's watchlist
 app.get('/api/watchlist', authenticateToken, async (req, res) => {
   try {
     const user = await User.findOne({ googleId: req.user.id });
@@ -290,7 +309,6 @@ app.get('/api/watchlist', authenticateToken, async (req, res) => {
   }
 });
 
-// Add movie to watchlist
 app.post('/api/watchlist', authenticateToken, async (req, res) => {
   try {
     const user = await User.findOneAndUpdate(
@@ -304,7 +322,6 @@ app.post('/api/watchlist', authenticateToken, async (req, res) => {
   }
 });
 
-// Delete movie from watchlist
 app.delete('/api/watchlist/:movieId', authenticateToken, async (req, res) => {
   try {
     const movieId = Number(req.params.movieId);
@@ -325,7 +342,6 @@ app.delete('/api/watchlist/:movieId', authenticateToken, async (req, res) => {
   }
 });
 
-// Get user's watched list
 app.get('/api/watched', authenticateToken, async (req, res) => {
   try {
     const user = await User.findOne({ googleId: req.user.id });
@@ -335,7 +351,6 @@ app.get('/api/watched', authenticateToken, async (req, res) => {
   }
 });
 
-// Add movie to watched list
 app.post('/api/watched', authenticateToken, async (req, res) => {
   try {
     const user = await User.findOneAndUpdate(
diff --git a/server/src/models/User.ts b/server/src/models/User.ts
index f2593e4..7fab51e 100644
--- a/server/src/models/User.ts
+++ b/server/src/models/User.ts
@@ -31,6 +31,8 @@ const userSchema = new mongoose.Schema({
       genre_ids: [Number],
       times_watched: { type: Number, default: 1 },
       last_watched: { type: Date, default: Date.now },
+      user_rating: { type: Number, default: 0 },
+      notes: { type: String, default: '' },
     },
   ],
 });
diff --git a/watchlist/src/App.css b/watchlist/src/App.css
index 7defb47..2ab3e1c 100644
--- a/watchlist/src/App.css
+++ b/watchlist/src/App.css
@@ -1,42 +1,384 @@
+:root {
+  --bg-900: #020617;
+  --bg-800: #0b1220;
+  --bg-700: #121a2f;
+  --border-500: #273553;
+  --text-100: #f8fafc;
+  --text-300: #94a3b8;
+  --purple-500: #7c3aed;
+  --purple-400: #8b5cf6;
+  --green-500: #059669;
+  --gold-500: #ca8a04;
+  --blue-500: #2563eb;
+}
+
 #root {
-  /* max-width: 1280px; */
-  margin: 0 auto;
-  padding: 2rem;
-  /* text-align: center; */
+  width: 100%;
+  min-height: 100vh;
+  padding: 0;
 }
 
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
+.dashboard-nav {
+  background: linear-gradient(
+    180deg,
+    rgba(2, 6, 23, 0.95) 0%,
+    rgba(2, 6, 23, 0.72) 100%
+  );
+  backdrop-filter: blur(8px);
+  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
 }
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
+
+.dashboard-brand {
+  color: var(--text-100);
+  font-weight: 700;
+  letter-spacing: 0.01em;
 }
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
+
+.dashboard-nav-link {
+  color: var(--text-300);
 }
 
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.dashboard-nav-link.active,
+.dashboard-nav-link:hover {
+  color: var(--text-100);
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
+.dashboard-user-name {
+  color: var(--text-100);
+  font-size: 0.925rem;
+}
+
+.development-banner {
+  margin-top: 3.5rem;
+  padding: 0.55rem 1rem;
+  text-align: center;
+  font-size: 0.85rem;
+  letter-spacing: 0.01em;
+  color: #bfdbfe;
+  border-top: 1px solid rgba(37, 99, 235, 0.35);
+  border-bottom: 1px solid rgba(37, 99, 235, 0.35);
+  background: rgba(15, 23, 42, 0.94);
+}
+
+.dashboard-container {
+  margin-top: 1.25rem;
+  max-width: 1180px;
+}
+
+.dashboard-title {
+  font-size: clamp(2rem, 4vw, 2.9rem);
+  margin: 0;
+  color: var(--text-100);
+}
+
+.dashboard-subtitle {
+  color: var(--text-300);
+}
+
+.stats-card {
+  border-radius: 16px;
+  padding: 1rem 1.1rem;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  background: linear-gradient(
+    145deg,
+    rgba(16, 23, 41, 0.75),
+    rgba(8, 14, 28, 0.95)
+  );
+}
+
+.stats-card h3 {
+  color: var(--text-100);
+  font-size: 1.9rem;
+  margin: 0.5rem 0 0.1rem;
+}
+
+.stats-card p {
+  color: var(--text-300);
+  margin: 0;
+}
+
+.stats-card--purple {
+  box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.35);
+}
+
+.stats-card--gold {
+  box-shadow: inset 0 0 0 1px rgba(202, 138, 4, 0.35);
+}
+
+.stats-card--green {
+  box-shadow: inset 0 0 0 1px rgba(5, 150, 105, 0.35);
+}
+
+.dashboard-input,
+.dashboard-select,
+.dashboard-input-addon {
+  background-color: rgba(15, 23, 42, 0.85) !important;
+  border-color: rgba(148, 163, 184, 0.2) !important;
+  color: var(--text-100) !important;
+}
+
+.dashboard-input::placeholder {
+  color: #6b7b9a;
+}
+
+.dashboard-select:focus,
+.dashboard-input:focus {
+  box-shadow: 0 0 0 0.2rem rgba(124, 58, 237, 0.25) !important;
+}
+
+.add-movie-btn {
+  border: none !important;
+  background: linear-gradient(
+    135deg,
+    var(--purple-500),
+    var(--purple-400)
+  ) !important;
+  color: #fff !important;
+  min-height: 42px;
+}
+
+.movie-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 1rem;
+}
+
+.movie-card {
+  position: relative;
+  min-height: 330px;
+  border-radius: 16px;
+  border: 1px solid rgba(148, 163, 184, 0.2);
+  overflow: hidden;
+  background: var(--bg-800);
+}
+
+.movie-card__poster {
+  width: 100%;
+  height: 100%;
+  min-height: 330px;
+  object-fit: cover;
+  display: block;
+}
+
+.movie-card__poster--fallback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-300);
+  background: linear-gradient(135deg, #1f2937, #111827);
+}
+
+.movie-card__overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 0.75rem;
+  background: linear-gradient(
+    180deg,
+    rgba(2, 6, 23, 0.25) 0%,
+    rgba(2, 6, 23, 0.82) 45%,
+    rgba(2, 6, 23, 0.96) 100%
+  );
+}
+
+.movie-card__top-row {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.movie-status-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  border-radius: 999px;
+  padding: 0.2rem 0.55rem;
+  font-size: 0.78rem;
+  font-weight: 600;
+}
+
+.movie-status-pill--want {
+  color: #fde68a;
+  border: 1px solid rgba(202, 138, 4, 0.5);
+  background: rgba(146, 104, 3, 0.35);
+}
+
+.movie-status-pill--watched {
+  color: #a7f3d0;
+  border: 1px solid rgba(5, 150, 105, 0.55);
+  background: rgba(6, 95, 70, 0.38);
+}
+
+.movie-user-rating {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.2rem;
+  color: #facc15;
+  font-size: 0.86rem;
+  font-weight: 700;
+}
+
+.movie-card__body {
+  cursor: pointer;
+}
+
+.movie-card__title {
+  color: var(--text-100);
+  font-size: 1.35rem;
+  margin: 0 0 0.2rem;
+  line-height: 1.2;
+}
+
+.movie-card__meta {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.86rem;
+  color: var(--text-300);
+  flex-wrap: wrap;
+}
+
+.movie-tmdb-rating {
+  color: #facc15;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.2rem;
+}
+
+.movie-card__genres {
+  display: flex;
+  gap: 0.4rem;
+  flex-wrap: wrap;
+}
+
+.movie-genre-badge {
+  background-color: rgba(30, 41, 59, 0.85) !important;
+  border: 1px solid rgba(148, 163, 184, 0.3);
+  font-weight: 500;
+}
+
+.movie-card__actions {
+  margin-top: 0.6rem;
+}
+
+.movie-action-btn {
+  border: none !important;
+  min-height: 38px;
+}
+
+.movie-action-btn--primary {
+  background: linear-gradient(
+    135deg,
+    var(--purple-500),
+    var(--purple-400)
+  ) !important;
+}
+
+.movie-action-btn--danger {
+  background: rgba(220, 38, 38, 0.9) !important;
+}
+
+.movie-action-btn--secondary {
+  background: rgba(30, 41, 59, 0.9) !important;
+  border: 1px solid rgba(148, 163, 184, 0.35) !important;
+}
+
+.dashboard-modal-content {
+  background: #090d1b;
+  border: 1px solid rgba(119, 98, 155, 0.35);
+  color: var(--text-100);
+  border-radius: 14px;
+}
+
+.dashboard-modal-header {
+  border-bottom-color: rgba(148, 163, 184, 0.25) !important;
 }
 
-.card {
-  padding: 2em;
+.search-result-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.65rem;
+  max-height: 320px;
+  overflow-y: auto;
 }
 
-.read-the-docs {
-  color: #888;
+.search-result-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.8rem;
+  padding: 0.7rem 0.75rem;
+  border-radius: 10px;
+  border: 1px solid rgba(148, 163, 184, 0.2);
+  background: rgba(15, 23, 42, 0.8);
+}
+
+.rating-star-btn {
+  border: none;
+  background: transparent;
+  padding: 0;
+  line-height: 0;
+}
+
+.empty-state {
+  padding: 1.2rem;
+  border-radius: 12px;
+  border: 1px solid rgba(148, 163, 184, 0.2);
+  background: rgba(15, 23, 42, 0.75);
+  color: var(--text-300);
+  text-align: center;
+}
+
+.search-result-poster {
+  border-radius: 4px;
+}
+
+.search-result-poster-title {
+  display: flex;
+}
+
+@media (max-width: 767px) {
+  .dashboard-container {
+    margin-top: 1rem;
+    padding-left: 0.9rem;
+    padding-right: 0.9rem;
+  }
+
+  .development-banner {
+    margin-top: 3.3rem;
+    font-size: 0.78rem;
+    padding: 0.5rem 0.75rem;
+  }
+
+  .movie-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0.8rem;
+  }
+
+  .movie-card {
+    min-height: 280px;
+  }
+
+  .movie-card__poster {
+    min-height: 280px;
+  }
+
+  .movie-card__title {
+    font-size: 1rem;
+  }
+
+  .movie-card__meta {
+    font-size: 0.77rem;
+  }
+
+  .search-result-row {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .search-result-row .btn {
+    width: 100%;
+  }
 }
diff --git a/watchlist/src/App.tsx b/watchlist/src/App.tsx
index f21af80..4a64f9c 100644
--- a/watchlist/src/App.tsx
+++ b/watchlist/src/App.tsx
@@ -2,8 +2,6 @@ import './App.css';
 import { BrowserRouter, Route, Routes } from 'react-router';
 import Nav from './nav/Nav';
 import MyWatchlist from './watchlist/Watchlist';
-import Watched from './watched/Watched';
-import Results from './search/Results';
 import AuthCallback from './auth/AuthCallback';
 import { useEffect, useState } from 'react';
 import { useAuthStore } from './auth/useAuthStore';
@@ -30,7 +28,7 @@ function App() {
         `${import.meta.env.VITE_BE_BASE_URL}/api/watchlist`,
         {
           credentials: 'include',
-        }
+        },
       );
       if (response.ok) {
         const data = await response.json();
@@ -43,19 +41,14 @@ function App() {
   return (
     <BrowserRouter>
       <Nav />
+      <div className='development-banner' role='status' aria-live='polite'>
+        Live development preview. Updates are deployed nightly.
+      </div>
       <Routes>
         <Route
-          path='/my-watchlist'
+          path='/'
           element={<MyWatchlist watchlistState={watchlistState} />}
         />
-        <Route
-          path='/my-watched'
-          element={<Watched watchlistState={watchlistState} />}
-        />
-        <Route
-          path='/searchResults'
-          element={<Results watchlistState={watchlistState} />}
-        />
         <Route path='/auth' element={<AuthCallback />} />
       </Routes>
     </BrowserRouter>
diff --git a/watchlist/src/auth/AuthCallback.tsx b/watchlist/src/auth/AuthCallback.tsx
index f527449..f032f82 100644
--- a/watchlist/src/auth/AuthCallback.tsx
+++ b/watchlist/src/auth/AuthCallback.tsx
@@ -32,12 +32,12 @@ const AuthCallback = () => {
         } else {
           await initAuth();
         }
-        navigate('/my-watchlist', { replace: true });
+        navigate('/', { replace: true });
       })
       .catch((error) => {
         console.error('Auth error:', error);
         setUser(null);
-        navigate(`${import.meta.env.VITE_BE_BASE_URL}/auth/google`);
+        navigate(`/`, { replace: true });
       });
   }, [code, initAuth, navigate, setUser]);
 
diff --git a/watchlist/src/auth/useAuthStore.ts b/watchlist/src/auth/useAuthStore.ts
index f53315c..aa1bff8 100644
--- a/watchlist/src/auth/useAuthStore.ts
+++ b/watchlist/src/auth/useAuthStore.ts
@@ -10,7 +10,7 @@ interface AuthState {
   user: User | null;
   setUser: (user: User | null) => void;
   logout: () => Promise<void>;
-  initAuth: () => void;
+  initAuth: () => Promise<void>;
 }
 
 export const useAuthStore = create<AuthState>((set) => ({
diff --git a/watchlist/src/components/MovieCard.tsx b/watchlist/src/components/MovieCard.tsx
index 20fa448..4c040ed 100644
--- a/watchlist/src/components/MovieCard.tsx
+++ b/watchlist/src/components/MovieCard.tsx
@@ -1,103 +1,74 @@
-import { Badge, Card } from 'react-bootstrap';
 import type { Movie } from '../models/Movie';
-import { Eye, Star } from 'lucide-react';
+import { Check, Clock3, Star } from 'lucide-react';
 import { getGenreName } from '../static/genres';
 
 const MovieCard: React.FC<{
   movie: Movie;
+  status?: 'want' | 'watched';
+  userRating?: number;
+  onOpenDetails?: (movie: Movie) => void;
   children?: React.ReactNode;
-}> = ({ movie, children }) => {
+}> = ({ movie, status = 'want', userRating = 0, onOpenDetails, children }) => {
+  const year = movie.release_date?.substring(0, 4) || 'N/A';
+  const posterUrl = movie.poster_path
+    ? `https://image.tmdb.org/t/p/w342${movie.poster_path}`
+    : '';
+
   return (
-    <Card style={{ width: '15rem', padding: '0' }} className='m-2'>
-      {movie.poster_path ? (
-        <Card.Img
-          variant='top'
-          src={`https://image.tmdb.org/t/p/w185${movie.poster_path}`}
-          alt={movie.title}
-        />
+    <article className='movie-card'>
+      {posterUrl ? (
+        <img className='movie-card__poster' src={posterUrl} alt={movie.title} />
       ) : (
-        <div
-          style={{
-            width: '100%',
-            height: '300px',
-            background: '#cfcfcf',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            color: '#555',
-            padding: '0.5rem',
-            textAlign: 'center',
-          }}
-        >
-          <div style={{ fontSize: '1.25rem', fontWeight: 700 }}>
-            No Poster Available
-          </div>
+        <div className='movie-card__poster movie-card__poster--fallback'>
+          <span>No Poster</span>
         </div>
       )}
-      <Card.Body>
-        <Card.Title>
+      <div className='movie-card__overlay'>
+        <div className='movie-card__top-row'>
           <span
-            className='fw-bold text-truncate d-inline-block'
-            style={{
-              maxWidth: '12rem',
-              verticalAlign: 'bottom',
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              whiteSpace: 'nowrap',
-            }}
+            className={`movie-status-pill ${status === 'watched' ? 'movie-status-pill--watched' : 'movie-status-pill--want'}`}
           >
-            {movie.title}
-          </span>
-          <span className='text-muted'>
-            {' '}
-            ({movie.release_date?.substring(0, 4)})
-          </span>
-        </Card.Title>
-        <div className='d-flex flex-column gap-2'>
-          <div className='d-flex align-items-center gap-4 small text-muted'>
-            <div className='d-flex align-items-center gap-1'>
-              <Star className='star' />
-              <span>
-                {movie.vote_average ? movie.vote_average.toFixed(1) : 'N/A'}
-              </span>
-            </div>
-            {movie.times_watched > 0 && (
-              <div className='d-flex align-items-center gap-1'>
-                <Eye className='me-1' width={16} height={16} />
-                <span>{movie.times_watched}</span>
-              </div>
-            )}
-          </div>
-          <div className='d-flex flex-wrap gap-1'>
-            {movie.genre_ids?.slice(0, 2).map((g) => (
-              <Badge key={g} bg='secondary' className='text-xs'>
-                {getGenreName(g)}
-              </Badge>
-            ))}
-            {movie.genre_ids?.length > 2 && (
-              <Badge bg='secondary' className='text-xs'>
-                +{movie.genre_ids.length - 2}
-              </Badge>
+            {status === 'watched' ? (
+              <>
+                <Check size={14} />
+                Watched
+              </>
+            ) : (
+              <>
+                <Clock3 size={14} />
+                Want to Watch
+              </>
             )}
+          </span>
+          {status === 'watched' && userRating > 0 && (
+            <span className='movie-user-rating'>
+              <Star size={14} fill='currentColor' />
+              {userRating}/10
+            </span>
+          )}
+        </div>
+
+        <div
+          className='movie-card__body'
+          onClick={() => onOpenDetails?.(movie)}
+        >
+          <h3 className='movie-card__title'>{movie.title}</h3>
+          <div className='movie-card__meta'>
+            <span>{year}</span>
+            <span>•</span>
+            <span>{getGenreName(movie.genre_ids?.[0] || 0)}</span>
+            <span>•</span>
+            <span className='movie-tmdb-rating'>
+              <Star size={14} fill='currentColor' />
+              {movie.vote_average ? movie.vote_average.toFixed(1) : 'N/A'}
+            </span>
           </div>
-          <p className='small text-muted'>
-            {movie.overview.length > 100
-              ? movie.overview.slice(0, 100) + '...'
-              : movie.overview}
-          </p>
         </div>
-      </Card.Body>
-      <Card.Footer
-        style={{
-          backgroundColor: 'transparent',
-          borderTop: 'none',
-          paddingTop: 0,
-          paddingBottom: '1rem',
-        }}
-      >
-        {children}
-      </Card.Footer>
-    </Card>
+        {children ? (
+          <div className='movie-card__actions'>{children}</div>
+        ) : null}
+      </div>
+    </article>
   );
 };
 export default MovieCard;
diff --git a/watchlist/src/components/modals/SearchMovies.tsx b/watchlist/src/components/modals/SearchMovies.tsx
new file mode 100644
index 0000000..b0496d6
--- /dev/null
+++ b/watchlist/src/components/modals/SearchMovies.tsx
@@ -0,0 +1,136 @@
+import { useState } from 'react';
+import { Alert, Button, Form, InputGroup, Modal } from 'react-bootstrap';
+import type { Movie } from '../../models/Movie';
+import { Search, Plus } from 'lucide-react';
+import { addToWatchlist } from '../../util/watchlist-actions';
+import { getGenreName } from '../../static/genres';
+
+const SearchMovies = ({
+  show,
+  onHide,
+  watchlistState: { watchlist, setWatchlist },
+  addToast,
+}: {
+  show: boolean;
+  onHide: () => void;
+  watchlistState: {
+    watchlist: Movie[];
+    setWatchlist: React.Dispatch<React.SetStateAction<Movie[]>>;
+  };
+  addToast: (message: string, severity: 'success' | 'error') => void;
+}) => {
+  const [searchResults, setSearchResults] = useState<Movie[]>([]);
+  const [searchLoading, setSearchLoading] = useState(false);
+  const [searchError, setSearchError] = useState<string | null>(null);
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const searchMovies = async () => {
+    const trimmedQuery = searchQuery.trim();
+    if (!trimmedQuery) {
+      return;
+    }
+
+    setSearchLoading(true);
+    setSearchError(null);
+
+    try {
+      const response = await fetch(
+        `${import.meta.env.VITE_BE_BASE_URL}/api/tmdb/search?query=${encodeURIComponent(trimmedQuery)}&page=1`,
+        {
+          credentials: 'include',
+        },
+      );
+
+      if (!response.ok) {
+        throw new Error('Search failed');
+      }
+
+      const payload = await response.json();
+      setSearchResults(payload.results || []);
+    } catch (error) {
+      setSearchError('Search failed. Please try again.');
+    } finally {
+      setSearchLoading(false);
+    }
+  };
+
+  return (
+    <Modal
+      show={show}
+      onHide={onHide}
+      centered
+      contentClassName='dashboard-modal-content'
+      size='lg'
+    >
+      <Modal.Header closeButton className='dashboard-modal-header'>
+        <Modal.Title>Search Movies</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <InputGroup className='mb-3'>
+          <InputGroup.Text className='dashboard-input-addon'>
+            <Search size={16} />
+          </InputGroup.Text>
+          <Form.Control
+            className='dashboard-input'
+            value={searchQuery}
+            placeholder='Search movies...'
+            onChange={(e) => setSearchQuery(e.target.value)}
+            onKeyDown={(e) => e.key === 'Enter' && searchMovies()}
+          />
+          <Button className='add-movie-btn' onClick={searchMovies}>
+            Search
+          </Button>
+        </InputGroup>
+
+        {searchError && <Alert variant='danger'>{searchError}</Alert>}
+
+        <div className='search-result-list'>
+          {searchLoading && <p className='text-center mb-0'>Searching...</p>}
+          {!searchLoading && searchResults.length === 0 && (
+            <p className='text-center text-secondary mb-0'>
+              No results yet. Hit search to find movies.
+            </p>
+          )}
+          {!searchLoading &&
+            searchResults.map((movie) => (
+              <div key={movie.id} className='search-result-row'>
+                <div className='d-flex align-items-center gap-3'>
+                  <img
+                    src={
+                      movie.poster_path
+                        ? `https://image.tmdb.org/t/p/w45${movie.poster_path}`
+                        : undefined
+                    }
+                    alt={movie.title}
+                    className='search-result-poster'
+                  />
+                  <div>
+                    <h6 className='mb-1'>{movie.title}</h6>
+                    <small className='text-secondary'>
+                      {movie.release_date?.substring(0, 4) || 'N/A'}
+                      {movie.genre_ids?.[0]
+                        ? ` • ${getGenreName(movie.genre_ids[0])}`
+                        : ''}
+                      {movie.vote_average
+                        ? ` • TMDb: ${movie.vote_average.toFixed(1)}/10`
+                        : ' • No rating'}
+                    </small>
+                  </div>
+                </div>
+                <Button
+                  className='movie-action-btn movie-action-btn--primary'
+                  disabled={watchlist.some((w) => w.movieId === movie.id)}
+                  onClick={() => addToWatchlist(movie, addToast, setWatchlist)}
+                  size='sm'
+                >
+                  <Plus size={14} className='me-1' />
+                  Add
+                </Button>
+              </div>
+            ))}
+        </div>
+      </Modal.Body>
+    </Modal>
+  );
+};
+export default SearchMovies;
diff --git a/watchlist/src/index.css b/watchlist/src/index.css
index 13dd253..b34c421 100644
--- a/watchlist/src/index.css
+++ b/watchlist/src/index.css
@@ -1,58 +1,21 @@
-#root,
+html,
 body,
-html {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87) !important;
-  background-color: #242424 !important;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
+#root {
+  min-height: 100%;
 }
 
 body {
   margin: 0;
-  display: flex;
-  place-items: center;
   min-width: 320px;
-  min-height: 100vh;
-  padding-top: 56px;
+  font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  color: #f8fafc;
+  background: #020617;
 }
 
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-.no-bg {
-  background-color: transparent !important;
-}
-
-.card {
-  padding: 0 !important;
+a {
+  text-decoration: none;
 }
 
-.star {
-  width: 1rem;
-  height: 1rem;
-  fill: #facc15;
-  color: #facc15;
-}
-.rotate-ccw {
-  width: 1rem;
-  height: 1rem;
+.navbar-toggler {
+  border-color: rgba(148, 163, 184, 0.35) !important;
 }
diff --git a/watchlist/src/main.tsx b/watchlist/src/main.tsx
index 35ba819..f12cf60 100644
--- a/watchlist/src/main.tsx
+++ b/watchlist/src/main.tsx
@@ -1,8 +1,8 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
+import 'bootstrap/dist/css/bootstrap.min.css';
 import './index.css';
 import App from './App.tsx';
-import 'bootstrap/dist/css/bootstrap.min.css';
 import { Container } from 'react-bootstrap';
 
 createRoot(document.getElementById('root')!).render(
diff --git a/watchlist/src/models/Movie.ts b/watchlist/src/models/Movie.ts
index c1d9b6c..9bc6d84 100644
--- a/watchlist/src/models/Movie.ts
+++ b/watchlist/src/models/Movie.ts
@@ -10,4 +10,8 @@ export interface Movie {
   vote_count: number;
   genre_ids: number[];
   times_watched: number;
+  user_rating?: number;
+  notes?: string;
+  added_at?: string;
+  last_watched?: string;
 }
diff --git a/watchlist/src/nav/Nav.tsx b/watchlist/src/nav/Nav.tsx
index 96ffb15..e793bad 100644
--- a/watchlist/src/nav/Nav.tsx
+++ b/watchlist/src/nav/Nav.tsx
@@ -1,22 +1,18 @@
 import { Button, Navbar } from 'react-bootstrap';
-import { Link } from 'react-router';
-import { useLocation } from 'react-router';
-import Search from '../search/Search';
 import { useAuthStore } from '../auth/useAuthStore';
+import { LogOut } from 'lucide-react';
+import { Link } from 'react-router';
 
 const Nav = () => {
-  const location = useLocation();
   const user = useAuthStore((state) => state.user);
   const logout = useAuthStore((state) => state.logout);
 
-  function isActive(path: string) {
-    return location.pathname === path ? 'active' : '';
-  }
-
   return (
-    <Navbar className='bg-body-tertiary fixed-top'>
-      <div className='container-fluid'>
-        <span className='navbar-brand mb-0 h1'>Watchlist+More</span>
+    <Navbar className='dashboard-nav fixed-top' expand='lg'>
+      <div className='container-fluid px-3 px-md-4'>
+        <Link className='navbar-brand mb-0 h1 dashboard-brand' to='/'>
+          Watchlist
+        </Link>
         <button
           className='navbar-toggler'
           type='button'
@@ -29,29 +25,9 @@ const Nav = () => {
           <span className='navbar-toggler-icon'></span>
         </button>
         <div className='collapse navbar-collapse' id='navbarText'>
-          <ul className='navbar-nav me-auto mb-2 mb-lg-0'>
-            <li className='nav-item'>
-              <Link
-                className={`nav-link ${isActive('/my-watchlist')}`}
-                to='/my-watchlist'
-              >
-                Watchlist
-              </Link>
-            </li>
-            <li className='nav-item'>
-              <Link
-                className={`nav-link ${isActive('/my-watched')}`}
-                to='/my-watched'
-              >
-                Watched
-              </Link>
-            </li>
-          </ul>
-          <Search />
-          &nbsp;&nbsp;&nbsp;&nbsp;
           {user ? (
-            <div className='d-flex align-items-center'>
-              <span className='ms-2'>{user.name}</span>
+            <div className='d-flex align-items-center gap-2'>
+              <span className='dashboard-user-name'>{user.name}</span>
             </div>
           ) : (
             <Button
@@ -61,17 +37,19 @@ const Nav = () => {
               Sign in with Google
             </Button>
           )}
-          <Button
-            className='ms-2'
-            variant='outline-secondary'
-            size='sm'
-            onClick={async () => {
-              await logout();
-              window.location.href = '/';
-            }}
-          >
-            Logout
-          </Button>
+          {user && (
+            <Button
+              className='ms-2 movie-action-btn movie-action-btn--secondary'
+              size='sm'
+              onClick={async () => {
+                await logout();
+                window.location.href = '/';
+              }}
+            >
+              <LogOut size={14} className='me-1' />
+              Logout
+            </Button>
+          )}
         </div>
       </div>
     </Navbar>
diff --git a/watchlist/src/search/Results.tsx b/watchlist/src/search/Results.tsx
deleted file mode 100644
index fe55397..0000000
--- a/watchlist/src/search/Results.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import { Container, Button, Alert } from 'react-bootstrap';
-import type { Movie } from '../models/Movie';
-import useApiFetch from '../hooks/useApiFetch';
-import { useSearchParams } from 'react-router';
-import { useState } from 'react';
-import MovieCard from '../components/MovieCard';
-import MyToast from '../components/Toast';
-import type { ToastConfig } from '../models/Toast';
-import { Bookmark } from 'lucide-react';
-import { addToWatchlist } from '../util/watchlist-actions';
-
-interface ResultsProps {
-  data: {
-    page: number;
-    results: Movie[];
-    total_pages: number;
-    total_results: number;
-  } | null;
-  loading: boolean;
-  error: string | null;
-}
-
-const Results = ({
-  watchlistState,
-}: {
-  watchlistState: {
-    watchlist: Movie[];
-    setWatchlist: React.Dispatch<React.SetStateAction<Movie[]>>;
-  };
-}) => {
-  let [searchParams] = useSearchParams();
-  const query = searchParams.get('query');
-
-  const [currentPage, setCurrentPage] = useState(1);
-  const { data, loading, error }: ResultsProps = useApiFetch(
-    `${import.meta.env.VITE_BE_BASE_URL}/api/tmdb/search?query=${encodeURIComponent(query || '')}&page=${currentPage}`
-  );
-  const [toasts, setToasts] = useState<ToastConfig[]>([]);
-  const { watchlist, setWatchlist } = watchlistState;
-
-  const addToast = (message: string, severity: 'success' | 'error') => {
-    const newToast: ToastConfig = {
-      id: Date.now(),
-      message,
-      severity,
-    };
-    setToasts((prev) => [...prev, newToast]);
-  };
-
-  const removeToast = (id: number) => {
-    setToasts((prev) => prev.filter((toast) => toast.id !== id));
-  };
-
-  return (
-    <Container>
-      <MyToast messages={toasts} onClose={removeToast} />
-      {loading ? (
-        <p>Loading...</p>
-      ) : error ? (
-        <Alert variant='danger'>{error}</Alert>
-      ) : (
-        <>
-          <div className='d-flex flex-wrap'>
-            {data?.results.map((movie) => (
-              <MovieCard movie={movie} key={movie.id}>
-                <div className='d-flex flex-column gap-2'>
-                  <Button
-                    size='sm'
-                    onClick={() => addToWatchlist(movie, addToast, setWatchlist)}
-                    className='d-flex align-items-center flex-grow-1'
-                    disabled={watchlist.some((m) => m.movieId === movie.id)}
-                  >
-                    {(watchlist.some((m) => m.movieId === movie.id) && (
-                      <>
-                        <Bookmark
-                          className='me-2'
-                          width={16}
-                          height={16}
-                          fill='white'
-                        />
-                        {'Already in watchlist'}
-                      </>
-                    )) || (
-                      <>
-                        <Bookmark className='me-2' width={16} height={16} />
-                        {'Add to watchlist'}
-                      </>
-                    )}
-                  </Button>
-                </div>
-              </MovieCard>
-            ))}
-          </div>
-          <div className='d-flex justify-content-center gap-2'>
-            <Button
-              disabled={currentPage <= 1}
-              variant='primary'
-              onClick={() => setCurrentPage(currentPage - 1)}
-            >
-              {'<'}
-            </Button>
-            <Button
-              disabled={currentPage >= (data?.total_pages || 1)}
-              variant='primary'
-              onClick={() => setCurrentPage(currentPage + 1)}
-            >
-              {'>'}
-            </Button>
-          </div>
-          <span>page: {data?.page}</span>
-          <br />
-          <span>total pages: {data?.total_pages}</span>
-        </>
-      )}
-    </Container>
-  );
-};
-export default Results;
diff --git a/watchlist/src/search/Search.tsx b/watchlist/src/search/Search.tsx
deleted file mode 100644
index 2e89928..0000000
--- a/watchlist/src/search/Search.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Button } from 'react-bootstrap';
-import { useState } from 'react';
-import { useNavigate } from 'react-router';
-
-const Search = () => {
-  const [query, setQuery] = useState('');
-  const navigate = useNavigate();
-  const onSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    navigate('/searchResults?query=' + query);
-  };
-  return (
-    <form className='d-flex' role='search' onSubmit={onSubmit}>
-      <input
-        className='form-control me-2 form-control-sm'
-        type='search'
-        placeholder='Search for a movie...'
-        aria-label='Search'
-        value={query}
-        onChange={(e) => setQuery(e.target.value)}
-      />
-      <Button variant='outline-success' size='sm' type='submit'>
-        Search
-      </Button>
-    </form>
-  );
-};
-export default Search;
diff --git a/watchlist/src/watched/Watched.tsx b/watchlist/src/watched/Watched.tsx
deleted file mode 100644
index d008021..0000000
--- a/watchlist/src/watched/Watched.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import { Button, Container } from 'react-bootstrap';
-import type { Movie } from '../models/Movie';
-import MovieCard from '../components/MovieCard';
-import { RotateCcw } from 'lucide-react';
-import { useEffect, useState } from 'react';
-import { useAuthStore } from '../auth/useAuthStore';
-import { addToWatchlist } from '../util/watchlist-actions';
-import type { ToastConfig } from '../models/Toast';
-import MyToast from '../components/Toast';
-
-const Watched = ({
-  watchlistState,
-}: {
-  watchlistState: {
-    watchlist: Movie[];
-    setWatchlist: React.Dispatch<React.SetStateAction<Movie[]>>;
-  };
-}) => {
-  const [watched, setWatched] = useState<Movie[]>([]);
-  const user = useAuthStore((state) => state.user);
-  const { watchlist, setWatchlist } = watchlistState;
-  const [toasts, setToasts] = useState<ToastConfig[]>([]);
-
-  useEffect(() => {
-    if (user) {
-      fetch(`${import.meta.env.VITE_BE_BASE_URL}/api/watched`, {
-        method: 'GET',
-        credentials: 'include',
-      })
-        .then((res) => res.json())
-        .then((data) => setWatched(data))
-        .catch((error) =>
-          console.error('Error fetching watched movies:', error)
-        );
-    }
-  }, [user]);
-
-  const addToast = (message: string, severity: 'success' | 'error') => {
-    const newToast: ToastConfig = {
-      id: Date.now(),
-      message,
-      severity,
-    };
-    setToasts((prev) => [...prev, newToast]);
-  };
-
-  const removeToast = (id: number) => {
-    setToasts((prev) => prev.filter((toast) => toast.id !== id));
-  };
-
-  return (
-    <Container>
-      <MyToast messages={toasts} onClose={removeToast} />
-      <h1 className='text-center'>My Watched Movies</h1>
-      <p className='text-center'>
-        {watched.length === 0
-          ? 'You have not watched any movies.'
-          : `You have watched ${watched.length} movie(s).`}
-      </p>
-      <div className='d-flex flex-wrap'>
-        {watched.map((movie) => (
-          <MovieCard movie={movie} key={movie.movieId}>
-            <div className='d-flex justify-content-center gap-2'>
-              <Button
-                size='sm'
-                className='d-flex align-items-center flex-grow-1'
-                disabled={watchlist.some((m) => m.movieId === movie.movieId)}
-                onClick={() => {
-                  if (!watchlist.some((m) => m.movieId === movie.movieId)) {
-                    addToWatchlist(movie, addToast, setWatchlist);
-                  }
-                }}
-              >
-                <div className='d-flex align-items-center gap-1'>
-                  <RotateCcw className='rotate-ccw' /> Mark for rewatch
-                </div>
-              </Button>
-            </div>
-          </MovieCard>
-        ))}
-      </div>
-    </Container>
-  );
-};
-export default Watched;
diff --git a/watchlist/src/watchlist/Watchlist.tsx b/watchlist/src/watchlist/Watchlist.tsx
index 7f77143..af57b3b 100644
--- a/watchlist/src/watchlist/Watchlist.tsx
+++ b/watchlist/src/watchlist/Watchlist.tsx
@@ -1,11 +1,33 @@
-import { Button, Container } from 'react-bootstrap';
+import {
+  Button,
+  Col,
+  Container,
+  Form,
+  InputGroup,
+  Modal,
+  Row,
+} from 'react-bootstrap';
 import type { Movie } from '../models/Movie';
 import MovieCard from '../components/MovieCard';
-import { Eye, Trash2 } from 'lucide-react';
-import { useState } from 'react';
+import {
+  Check,
+  Clock3,
+  Eye,
+  Film,
+  Plus,
+  Search,
+  Star,
+  Trash2,
+} from 'lucide-react';
+import { useEffect, useMemo, useState } from 'react';
 import type { ToastConfig } from '../models/Toast';
 import MyToast from '../components/Toast';
 import { updateMovieInWatchedList } from '../util/watched-actions';
+import { useAuthStore } from '../auth/useAuthStore';
+import SearchMovies from '../components/modals/SearchMovies';
+
+type MovieStatus = 'want' | 'watched';
+type MovieWithStatus = Movie & { status: MovieStatus };
 
 const MyWatchlist = ({
   watchlistState,
@@ -15,9 +37,41 @@ const MyWatchlist = ({
     setWatchlist: React.Dispatch<React.SetStateAction<Movie[]>>;
   };
 }) => {
+  const user = useAuthStore((state) => state.user);
   const [toasts, setToasts] = useState<ToastConfig[]>([]);
+  const [watched, setWatched] = useState<Movie[]>([]);
+  const [statusFilter, setStatusFilter] = useState<'all' | 'want' | 'watched'>(
+    'all',
+  );
+  const [sortOrder, setSortOrder] = useState<'recent' | 'title' | 'rating'>(
+    'recent',
+  );
+  const [query, setQuery] = useState('');
+  const [showAddModal, setShowAddModal] = useState(false);
+  const [detailMovie, setDetailMovie] = useState<Movie | null>(null);
+  const [userRating, setUserRating] = useState(0);
+  const [notes, setNotes] = useState('');
   const { watchlist, setWatchlist } = watchlistState;
 
+  useEffect(() => {
+    if (!user) {
+      setWatched([]);
+      return;
+    }
+
+    fetch(`${import.meta.env.VITE_BE_BASE_URL}/api/watched`, {
+      credentials: 'include',
+    })
+      .then((res) => {
+        if (!res.ok) {
+          throw new Error('Failed to fetch watched movies');
+        }
+        return res.json();
+      })
+      .then((data) => setWatched(data))
+      .catch((error) => console.error(error));
+  }, [user]);
+
   const addToast = (message: string, severity: 'success' | 'error') => {
     const newToast: ToastConfig = {
       id: Date.now(),
@@ -31,19 +85,68 @@ const MyWatchlist = ({
     setToasts((prev) => prev.filter((toast) => toast.id !== id));
   };
 
+  const stats = useMemo(() => {
+    const total = watchlist.length + watched.length;
+    return {
+      total,
+      want: watchlist.length,
+      watched: watched.length,
+    };
+  }, [watchlist, watched]);
+
+  const combinedMovies = useMemo<MovieWithStatus[]>(() => {
+    const wantMovies: MovieWithStatus[] = watchlist.map((movie) => ({
+      ...movie,
+      status: 'want',
+    }));
+    const watchedMovies: MovieWithStatus[] = watched.map((movie) => ({
+      ...movie,
+      status: 'watched',
+    }));
+    const allMovies = [...wantMovies, ...watchedMovies];
+
+    const filtered = allMovies.filter((movie) => {
+      const matchesQuery = movie.title
+        .toLowerCase()
+        .includes(query.toLowerCase().trim());
+      const matchesStatus =
+        statusFilter === 'all' ? true : movie.status === statusFilter;
+      return matchesQuery && matchesStatus;
+    });
+
+    const sorted = [...filtered].sort((a, b) => {
+      if (sortOrder === 'title') {
+        return a.title.localeCompare(b.title);
+      }
+      if (sortOrder === 'rating') {
+        return (b.vote_average || 0) - (a.vote_average || 0);
+      }
+
+      const aDate = new Date(
+        a.last_watched || a.added_at || a.release_date || 0,
+      ).getTime();
+      const bDate = new Date(
+        b.last_watched || b.added_at || b.release_date || 0,
+      ).getTime();
+      return bDate - aDate;
+    });
+
+    return sorted;
+  }, [query, sortOrder, statusFilter, watchlist, watched]);
+
   const removeFromWatchlist = (movie: Movie) => {
     fetch(
       `${import.meta.env.VITE_BE_BASE_URL}/api/watchlist/${movie.movieId}`,
       {
         method: 'DELETE',
         credentials: 'include',
-      }
+      },
     )
       .then(() => {
         setWatchlist(watchlist.filter((m) => m.movieId !== movie.movieId));
         addToast(
           `${movie.title} removed from watchlist successfully`,
-          'success'
+          'success',
         );
       })
       .catch((error) => {
@@ -52,6 +155,48 @@ const MyWatchlist = ({
       });
   };
 
+  const openDetails = (movie: Movie) => {
+    if (!watched.some((item) => item.movieId === movie.movieId)) {
+      return;
+    }
+    setDetailMovie(movie);
+    setUserRating(movie.user_rating || 0);
+    setNotes(movie.notes || '');
+  };
+
+  const saveDetails = async () => {
+    if (!detailMovie) return;
+
+    try {
+      const response = await fetch(
+        `${import.meta.env.VITE_BE_BASE_URL}/api/watched/${detailMovie.movieId}`,
+        {
+          method: 'PUT',
+          credentials: 'include',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            ...detailMovie,
+            user_rating: userRating,
+            notes,
+          }),
+        },
+      );
+
+      if (!response.ok) {
+        throw new Error('Failed to save movie details');
+      }
+
+      const updatedWatched = await response.json();
+      setWatched(updatedWatched);
+      setDetailMovie(null);
+      addToast('Movie details updated', 'success');
+    } catch (error) {
+      addToast('Failed to update movie details', 'error');
+    }
+  };
+
   const markAsWatched = (movie: Movie) => {
     if (movie.times_watched > 0) {
       updateMovieInWatchedList(movie, addToast, setWatchlist, watchlist);
@@ -69,6 +214,10 @@ const MyWatchlist = ({
       })
         .then(() => {
           setWatchlist(watchlist.filter((m) => m.movieId !== movie.movieId));
+          setWatched((prev) => [
+            ...prev,
+            { ...movie, times_watched: (movie.times_watched || 0) + 1 },
+          ]);
           addToast(`${movie.title} marked as watched successfully`, 'success');
         })
         .catch((error) => {
@@ -79,41 +228,193 @@ const MyWatchlist = ({
   };
 
   return (
-    <Container>
+    <Container className='dashboard-container py-4 py-md-5'>
       <MyToast messages={toasts} onClose={removeToast} />
-      <h1 className='text-center'>My Watchlist</h1>
-      <p className='text-center'>
-        {watchlist.length === 0
-          ? 'Your watchlist is empty.'
-          : `You have ${watchlist.length} movie(s) in your watchlist.`}
-      </p>
-      <div className='d-flex flex-wrap'>
-        {watchlist.map((movie) => (
-          <MovieCard movie={movie} key={movie.movieId}>
-            <div className='d-flex flex-column gap-2'>
-              <Button
-                size='sm'
-                variant='success'
-                onClick={() => markAsWatched(movie)}
-                className='d-flex align-items-center flex-grow-1'
-              >
-                <Eye className='me-2' width={16} height={16} />
-                Mark as watched{' '}
-                {movie.times_watched > 0 && `(${movie.times_watched + 1})`}
-              </Button>
-              <Button
-                size='sm'
-                onClick={() => removeFromWatchlist(movie)}
-                className='d-flex align-items-center flex-grow-1'
-                variant='danger'
-              >
-                <Trash2 className='me-2' width={16} height={16} />
-                Remove from list
-              </Button>
-            </div>
-          </MovieCard>
-        ))}
+      <div className='d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 mb-4'>
+        <div>
+          <h1 className='dashboard-title mb-1'>Watchlist</h1>
+          <p className='dashboard-subtitle mb-0'>Track your movie journey</p>
+        </div>
+        <Button className='add-movie-btn' onClick={() => setShowAddModal(true)}>
+          <Plus size={16} className='me-2' />
+          Add Movie
+        </Button>
       </div>
+
+      <Row className='g-3 mb-3'>
+        <Col xs={12} md={4}>
+          <div className='stats-card stats-card--purple'>
+            <Film size={18} />
+            <h3>{stats.total}</h3>
+            <p>Total</p>
+          </div>
+        </Col>
+        <Col xs={12} md={4}>
+          <div className='stats-card stats-card--gold'>
+            <Clock3 size={18} />
+            <h3>{stats.want}</h3>
+            <p>Want to Watch</p>
+          </div>
+        </Col>
+        <Col xs={12} md={4}>
+          <div className='stats-card stats-card--green'>
+            <Check size={18} />
+            <h3>{stats.watched}</h3>
+            <p>Watched</p>
+          </div>
+        </Col>
+      </Row>
+
+      <Row className='g-2 g-md-3 mb-4'>
+        <Col xs={12} md={6}>
+          <InputGroup>
+            <InputGroup.Text className='dashboard-input-addon'>
+              <Search size={16} />
+            </InputGroup.Text>
+            <Form.Control
+              className='dashboard-input'
+              placeholder='Filter your watchlist...'
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+            />
+          </InputGroup>
+        </Col>
+        <Col xs={6} md={3}>
+          <Form.Select
+            className='dashboard-select'
+            value={statusFilter}
+            onChange={(e) =>
+              setStatusFilter(e.target.value as 'all' | 'want' | 'watched')
+            }
+          >
+            <option value='all'>All Status</option>
+            <option value='want'>Want to Watch</option>
+            <option value='watched'>Watched</option>
+          </Form.Select>
+        </Col>
+        <Col xs={6} md={3}>
+          <Form.Select
+            className='dashboard-select'
+            value={sortOrder}
+            onChange={(e) =>
+              setSortOrder(e.target.value as 'recent' | 'title' | 'rating')
+            }
+          >
+            <option value='recent'>Recently Added</option>
+            <option value='title'>Title A-Z</option>
+            <option value='rating'>TMDB Rating</option>
+          </Form.Select>
+        </Col>
+      </Row>
+
+      <div className='movie-grid'>
+        {combinedMovies.map((movie) => {
+          const isWatched = movie.status === 'watched';
+          return (
+            <MovieCard
+              key={`${movie.status}-${movie.movieId}`}
+              movie={movie}
+              status={isWatched ? 'watched' : 'want'}
+              userRating={movie.user_rating || 0}
+              onOpenDetails={isWatched ? openDetails : undefined}
+            >
+              {isWatched ? (
+                <Button
+                  className='w-100 movie-action-btn movie-action-btn--secondary'
+                  onClick={() => openDetails(movie)}
+                >
+                  Edit details
+                </Button>
+              ) : (
+                <div className='d-grid gap-2'>
+                  <Button
+                    className='w-100 movie-action-btn movie-action-btn--primary'
+                    onClick={() => markAsWatched(movie)}
+                  >
+                    <Eye className='me-2' size={16} />
+                    Mark Watched
+                  </Button>
+                  <Button
+                    className='w-100 movie-action-btn movie-action-btn--danger'
+                    onClick={() => removeFromWatchlist(movie)}
+                  >
+                    <Trash2 className='me-2' size={16} />
+                    Remove
+                  </Button>
+                </div>
+              )}
+            </MovieCard>
+          );
+        })}
+      </div>
+
+      {combinedMovies.length === 0 && (
+        <div className='empty-state mt-4'>No movies match your filters.</div>
+      )}
+
+      <SearchMovies
+        show={showAddModal}
+        onHide={() => setShowAddModal(false)}
+        watchlistState={{ watchlist, setWatchlist }}
+        addToast={addToast}
+      />
+
+      <Modal
+        show={!!detailMovie}
+        onHide={() => setDetailMovie(null)}
+        centered
+        contentClassName='dashboard-modal-content'
+      >
+        <Modal.Header closeButton className='dashboard-modal-header'>
+          <Modal.Title>{detailMovie?.title}</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <p className='text-secondary mb-3'>{detailMovie?.overview}</p>
+          <div className='mb-3'>
+            <p className='small text-uppercase text-secondary mb-2'>
+              Your Rating
+            </p>
+            <div className='d-flex flex-wrap align-items-center gap-2'>
+              {Array.from({ length: 10 }).map((_, i) => {
+                const value = i + 1;
+                const active = userRating >= value;
+                return (
+                  <button
+                    key={value}
+                    type='button'
+                    className='rating-star-btn'
+                    onClick={() => setUserRating(value)}
+                  >
+                    <Star
+                      size={22}
+                      fill={active ? 'currentColor' : 'none'}
+                      color={active ? '#facc15' : '#2f3d5b'}
+                    />
+                  </button>
+                );
+              })}
+              <span className='text-secondary'>{userRating}/10</span>
+            </div>
+          </div>
+
+          <Form.Group className='mb-3'>
+            <Form.Label className='small text-uppercase text-secondary'>
+              Notes
+            </Form.Label>
+            <Form.Control
+              as='textarea'
+              rows={4}
+              className='dashboard-input'
+              value={notes}
+              onChange={(e) => setNotes(e.target.value)}
+            />
+          </Form.Group>
+
+          <Button className='w-100 add-movie-btn' onClick={saveDetails}>
+            Save Changes
+          </Button>
+        </Modal.Body>
+      </Modal>
     </Container>
   );
 };