diff --git a/client/src/App.jsx b/client/src/App.jsx
index f511618..231e2ec 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -1,4 +1,4 @@
-import { BrowserRouter as Router, Routes, Route, useLocation } from 'react-router-dom';
+import { BrowserRouter as Router, Routes, Route, Navigate, useLocation } from 'react-router-dom';
 import { HelmetProvider } from 'react-helmet-async';
 import { AuthProvider } from './context/AuthContext';
 import { SocketProvider } from './context/SocketContext';
@@ -25,8 +25,10 @@ import ExplorePage from './pages/ExplorePage';
 import UploadPage from './pages/UploadPage';
 import CreatorDashboard from './pages/CreatorDashboard';
 import BrandDashboard from './pages/BrandDashboard';
+import MessagingPage from './pages/MessagingPage';
 
 import DirectMessagePage from './pages/DirectMessagePage';
+// MessagingPage removed — use DirectMessagePage at /dm/:id
 import CheckoutPage from './pages/CheckoutPage';
 import ProjectProgressPage from './pages/ProjectProgressPage';
 
@@ -36,6 +38,7 @@ import NotFoundPage from './pages/NotFoundPage';
 // Footer Pages - Product
 import FeaturesPage from './pages/FeaturesPage';
 import PricingPage from './pages/PricingPage';
+import CreatorPricingPage from './pages/CreatorPricingPage';
 import IntegrationsPage from './pages/IntegrationsPage';
 import ChangelogPage from './pages/ChangelogPage';
 
@@ -54,9 +57,20 @@ import ContactPage from './pages/ContactPage';
 import PrivacyPage from './pages/PrivacyPage';
 import TermsPage from './pages/TermsPage';
 
+import { useAuth } from './context/AuthContext';
+
+/** Redirects /profile/me → /profile/:userId, or /auth if not logged in */
+function ProfileMeRedirect() {
+  const { user, loading } = useAuth();
+  if (loading) return <div className="h-screen flex items-center justify-center"><div className="w-8 h-8 border-2 border-black border-t-transparent rounded-full animate-spin" /></div>;
+  if (!user) return <Navigate to="/auth" replace />;
+  return <Navigate to={`/profile/${user.id}`} replace />;
+}
+
 const AppLayout = () => {
   const location = useLocation();
   const isDriplens = location.pathname.startsWith('/driplens');
+
   const isDM = location.pathname.startsWith('/dm');
 
   return (
@@ -101,12 +115,12 @@ const AppLayout = () => {
           <Route path="/terms" element={<TermsPage />} />
 
           {/* Protected — any logged-in user */}
-          <Route path="/messages" element={
-            <ProtectedRoute><MessagingPage /></ProtectedRoute>
-          } />
           <Route path="/dm/:id" element={<DirectMessagePage />} />
+          <Route path="/profile/:id/pricing" element={<CreatorPricingPage />} />
+          <Route path="/profile/:id/checkout" element={<CheckoutPage />} />
           <Route path="/checkout" element={<CheckoutPage />} />
           <Route path="/progress" element={<ProjectProgressPage />} />
+          <Route path="/progress/:projectId" element={<ProjectProgressPage />} />
           <Route path="/profile/edit" element={
             <ProtectedRoute><EditProfilePage /></ProtectedRoute>
           } />
@@ -153,6 +167,7 @@ function App() {
                       <Route path="/creators" element={<CreatorsPage />} />
                       <Route path="/brands" element={<BrandsPage />} />
                       <Route path="/explore" element={<ExplorePage />} />
+                      <Route path="/profile/me" element={<ProfileMeRedirect />} />
                       <Route path="/profile/:id" element={<CreatorProfilePage />} />
                       <Route path="/brand/:id" element={<BrandProfilePage />} />
 
@@ -178,9 +193,13 @@ function App() {
                       <Route path="/terms" element={<TermsPage />} />
 
                       {/* Protected — any logged-in user */}
-                      <Route path="/messages" element={
-                        <ProtectedRoute><MessagingPage /></ProtectedRoute>
-                      } />
+
+                      <Route path="/dm/:id" element={<DirectMessagePage />} />
+                      <Route path="/profile/:id/pricing" element={<CreatorPricingPage />} />
+                      <Route path="/profile/:id/checkout" element={<CheckoutPage />} />
+                      <Route path="/checkout" element={<CheckoutPage />} />
+                      <Route path="/progress" element={<ProjectProgressPage />} />
+                      <Route path="/progress/:projectId" element={<ProjectProgressPage />} />
                       <Route path="/profile/edit" element={
                         <ProtectedRoute><EditProfilePage /></ProtectedRoute>
                       } />
@@ -189,6 +208,9 @@ function App() {
                       <Route path="/upload" element={
                         <ProtectedRoute requiredRole="creator"><UploadPage /></ProtectedRoute>
                       } />
+                      <Route path="/messages" element={
+                        <ProtectedRoute><MessagingPage /></ProtectedRoute>
+                      } />
                       <Route path="/dashboard/creator" element={
                         <ProtectedRoute requiredRole="creator"><CreatorDashboard /></ProtectedRoute>
                       } />
diff --git a/client/src/components/EditProjectModal.jsx b/client/src/components/EditProjectModal.jsx
new file mode 100644
index 0000000..48e369f
--- /dev/null
+++ b/client/src/components/EditProjectModal.jsx
@@ -0,0 +1,151 @@
+import { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { X, Save, Loader2 } from 'lucide-react';
+import { api } from '../lib/api';
+
+const CATEGORIES = [
+  'Cinematography', 'Photography', '3D Motion', 'Design',
+  'Illustration', 'Animation', 'Graphic Design', 'VFX'
+];
+
+export default function EditProjectModal({ project, isOpen, onClose, onSave }) {
+  const [formData, setFormData] = useState({
+    title: '',
+    description: '',
+    category: ''
+  });
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    if (project) {
+      setFormData({
+        title: project.title || '',
+        description: project.description || '',
+        category: project.category || CATEGORIES[0]
+      });
+    }
+  }, [project]);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+
+    try {
+      const res = await api.patch(`/upload/projects/${project.id}`, {
+        ...formData,
+        description: formData.description || null
+      });
+      onSave(res.data);
+      onClose();
+    } catch (err) {
+      setError(err.message || 'Failed to update project');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          className="fixed inset-0 z-[200] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm"
+          onClick={onClose}
+        >
+          <motion.div
+            initial={{ scale: 0.95, opacity: 0, y: 20 }}
+            animate={{ scale: 1, opacity: 1, y: 0 }}
+            exit={{ scale: 0.95, opacity: 0, y: 20 }}
+            className="bg-white w-full max-w-lg overflow-hidden shadow-2xl"
+            style={{ borderRadius: '0px' }}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="p-8">
+              <div className="flex justify-between items-center mb-8">
+                <div>
+                  <h2 className="text-2xl font-black text-[#0D1033] uppercase tracking-tighter">Edit Project</h2>
+                  <p className="text-[10px] text-[#9CA3AF] uppercase tracking-widest font-bold mt-1">Refine your showcase details</p>
+                </div>
+                <button 
+                  onClick={onClose}
+                  className="p-2 hover:bg-gray-100 rounded-full transition-colors"
+                >
+                  <X className="w-5 h-5 text-[#0D1033]" />
+                </button>
+              </div>
+
+              <form onSubmit={handleSubmit} className="space-y-6">
+                <div>
+                  <label className="block text-[10px] font-black text-[#9CA3AF] uppercase tracking-widest mb-2">Project Title</label>
+                  <input
+                    type="text"
+                    required
+                    value={formData.title}
+                    onChange={(e) => setFormData({ ...formData, title: e.target.value })}
+                    className="w-full px-4 py-3 bg-[#F8F9FC] border border-[#F0F0F0] focus:border-[#3B50E0] focus:ring-1 focus:ring-[#3B50E0] outline-none transition-all font-medium text-[#0D1033]"
+                    style={{ borderRadius: '0px' }}
+                    placeholder="Enter project title"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-[10px] font-black text-[#9CA3AF] uppercase tracking-widest mb-2">Category</label>
+                  <select
+                    value={formData.category}
+                    onChange={(e) => setFormData({ ...formData, category: e.target.value })}
+                    className="w-full px-4 py-3 bg-[#F8F9FC] border border-[#F0F0F0] focus:border-[#3B50E0] focus:ring-1 focus:ring-[#3B50E0] outline-none transition-all font-medium text-[#0D1033] appearance-none"
+                    style={{ borderRadius: '0px' }}
+                  >
+                    {CATEGORIES.map(cat => (
+                      <option key={cat} value={cat}>{cat}</option>
+                    ))}
+                  </select>
+                </div>
+
+                <div>
+                  <label className="block text-[10px] font-black text-[#9CA3AF] uppercase tracking-widest mb-2">Description</label>
+                  <textarea
+                    rows={4}
+                    value={formData.description}
+                    onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+                    className="w-full px-4 py-3 bg-[#F8F9FC] border border-[#F0F0F0] focus:border-[#3B50E0] focus:ring-1 focus:ring-[#3B50E0] outline-none transition-all font-medium text-[#0D1033] resize-none"
+                    style={{ borderRadius: '0px' }}
+                    placeholder="Tell the story behind this project..."
+                  />
+                </div>
+
+                {error && (
+                  <p className="text-red-500 text-[10px] font-bold uppercase tracking-tight">{error}</p>
+                )}
+
+                <div className="flex gap-3 pt-4">
+                  <button
+                    type="submit"
+                    disabled={loading}
+                    className="flex-1 bg-[#0D1033] text-white py-4 px-6 flex items-center justify-center gap-2 text-[11px] font-black uppercase tracking-[0.2em] hover:bg-[#1a1f5c] transition-all disabled:opacity-50"
+                    style={{ borderRadius: '0px' }}
+                  >
+                    {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
+                    Save Changes
+                  </button>
+                  <button
+                    type="button"
+                    onClick={onClose}
+                    className="px-6 border border-[#F0F0F0] text-[#0D1033] text-[11px] font-black uppercase tracking-[0.2em] hover:bg-gray-50 transition-all"
+                    style={{ borderRadius: '0px' }}
+                  >
+                    Cancel
+                  </button>
+                </div>
+              </form>
+            </div>
+          </motion.div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
diff --git a/client/src/components/WorkDetailCard.jsx b/client/src/components/WorkDetailCard.jsx
new file mode 100644
index 0000000..bf6fd7f
--- /dev/null
+++ b/client/src/components/WorkDetailCard.jsx
@@ -0,0 +1,197 @@
+import { useEffect, useRef } from 'react';
+import { Link } from 'react-router-dom';
+import { motion, AnimatePresence } from 'framer-motion';
+
+/**
+ * WorkDetailCard – redesigned modal
+ *
+ * Props:
+ *   project  – the selected content item (or null when closed)
+ *   onClose  – callback to clear selection
+ */
+export default function WorkDetailCard({ project, onClose }) {
+  const panelRef = useRef(null);
+
+  // Close on Escape key
+  useEffect(() => {
+    const handleKey = (e) => { if (e.key === 'Escape') onClose(); };
+    window.addEventListener('keydown', handleKey);
+    return () => window.removeEventListener('keydown', handleKey);
+  }, [onClose]);
+
+  // Lock body scroll while open
+  useEffect(() => {
+    if (project) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+    return () => { document.body.style.overflow = ''; };
+  }, [project]);
+
+  // Derive initials for the avatar
+  const initials = (str = 'A') =>
+    str
+      .split(/[\s_]/)
+      .slice(0, 2)
+      .map((w) => w[0]?.toUpperCase() ?? '')
+      .join('');
+
+  return (
+    <AnimatePresence>
+      {project && (
+        /* ── Backdrop ── */
+        <motion.div
+          key="wdc-backdrop"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.22 }}
+          className="fixed inset-0 z-[110] flex items-center justify-center p-4 md:p-8"
+          style={{ backgroundColor: 'rgba(2, 6, 23, 0.72)', backdropFilter: 'blur(6px)' }}
+          onClick={onClose}
+        >
+          {/* ── Card ── */}
+          <motion.div
+            key="wdc-card"
+            ref={panelRef}
+            initial={{ opacity: 0, scale: 0.97, y: 18 }}
+            animate={{ opacity: 1, scale: 1, y: 0 }}
+            exit={{ opacity: 0, scale: 0.97, y: 18 }}
+            transition={{ duration: 0.28, ease: [0.22, 1, 0.36, 1] }}
+            className="wdc-card"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {/* ─── Left: Image ─── */}
+            <div className="wdc-image-col overflow-y-auto custom-scrollbar">
+              <div className="flex flex-col gap-8 p-4 md:p-8">
+                {project.items?.map((item, idx) => (
+                  <div key={idx} className="relative group/item">
+                    {item.mediaType === 'video' ? (
+                      <video
+                        src={item.mediaUrl}
+                        controls
+                        className="wdc-media shadow-2xl max-h-[70vh] object-contain mx-auto"
+                      />
+                    ) : (
+                      <img
+                        src={item.mediaUrl}
+                        alt={`${project.title} - ${idx + 1}`}
+                        className="wdc-media shadow-2xl max-h-[70vh] object-contain mx-auto"
+                      />
+                    )}
+                    <div className="absolute top-4 left-4 bg-black/50 backdrop-blur-md text-white text-[8px] font-bold px-2 py-1 uppercase tracking-widest opacity-0 group-hover/item:opacity-100 transition-opacity">
+                      {idx + 1} / {project.items.length}
+                    </div>
+                  </div>
+                ))}
+              </div>
+              
+              {/* Category badge overlay */}
+              <span className="wdc-category-badge">
+                {project.category || 'Creative'}
+              </span>
+            </div>
+
+            {/* ─── Divider ─── */}
+            <div className="wdc-divider" />
+
+            {/* ─── Right: Content ─── */}
+            <div className="wdc-content-col">
+              {/* Close button */}
+              <button
+                id="wdc-close-btn"
+                className="wdc-close-btn"
+                onClick={onClose}
+                aria-label="Close"
+              >
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                  <path d="M18 6L6 18M6 6l12 12" />
+                </svg>
+              </button>
+
+              {/* Type label */}
+              <p className="wdc-type-label">{project.category || 'Cinematography'}</p>
+
+              {/* Title */}
+              <h2 className="wdc-title">{project.title}</h2>
+
+              {/* Description */}
+              <p className="wdc-description">
+                {project.description ||
+                  'A meticulously crafted visual piece delivering a cinematic narrative through careful composition, color, and movement.'}
+              </p>
+
+              {/* ── Divider ── */}
+              <div className="wdc-h-rule" />
+
+              {/* Creator row */}
+              <div className="wdc-creator-row">
+                {/* Avatar */}
+                <div className="wdc-avatar" aria-hidden="true">
+                  {project.author?.avatar_url ? (
+                    <img
+                      src={project.author.avatar_url}
+                      alt={project.author.username}
+                      className="wdc-avatar-img"
+                    />
+                  ) : (
+                    <span>{initials(project.author?.username || project.author?.display_name || 'AN')}</span>
+                  )}
+                </div>
+                <div className="wdc-creator-info">
+                  <p className="wdc-creator-name">
+                    {project.author?.display_name || project.author?.username || 'Anonymous'}
+                  </p>
+                  <p className="wdc-creator-sub">Independent Creator</p>
+                </div>
+              </div>
+
+              {/* ── Divider ── */}
+              <div className="wdc-h-rule" />
+
+              {/* Meta grid */}
+              <div className="wdc-meta-grid">
+                {[
+                  { label: 'Category',  value: project.category  || 'Creative'     },
+                  { label: 'Source',    value: project.source    || 'Driplens'      },
+                  { label: 'Format',    value: project.mediaType === 'video' ? 'Video' : 'Photo' },
+                  { label: 'Status',    value: 'Available'                          },
+                ].map(({ label, value }) => (
+                  <div key={label} className="wdc-meta-item">
+                    <p className="wdc-meta-label">{label}</p>
+                    <p className="wdc-meta-value">{value}</p>
+                  </div>
+                ))}
+              </div>
+
+              {/* ── Divider ── */}
+              <div className="wdc-h-rule" />
+
+              {/* CTA */}
+              <div className="wdc-cta-area">
+                <Link
+                  to={`/profile/${project.creator_id || project.user_id || project.id || 'demo'}`}
+                  id="wdc-hire-btn"
+                  className="wdc-hire-btn"
+                >
+                  Hire Me
+                  <svg className="wdc-hire-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" />
+                  </svg>
+                </Link>
+                <button
+                  id="wdc-message-btn"
+                  className="wdc-message-btn"
+                  onClick={onClose}
+                >
+                  Message
+                </button>
+              </div>
+            </div>
+          </motion.div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
diff --git a/client/src/hooks/useProject.js b/client/src/hooks/useProject.js
new file mode 100644
index 0000000..52c1a9c
--- /dev/null
+++ b/client/src/hooks/useProject.js
@@ -0,0 +1,158 @@
+/**
+ * useProject.js
+ *
+ * Custom hook that:
+ *  1. Fetches a project from the API on mount.
+ *  2. Subscribes to real-time socket events and merges updates into local state.
+ *  3. Exposes action helpers (submit, requestRevision, approve, updateProgress)
+ *     that call the API and optimistically update local state.
+ *
+ * Usage:
+ *   const { project, loading, error, actions } = useProject(projectId);
+ */
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { useSocket } from '../context/SocketContext';
+import * as projectService from '../services/projectService';
+
+const PROJECT_EVENTS = [
+  'project_update',
+  'project_progress',
+  'project_submitted',
+  'revision_requested',
+  'project_approved',
+  'project_cancelled',
+  'deliverable_submitted',
+  'payment_released',
+];
+
+export default function useProject(projectId) {
+  const socket = useSocket();
+  const [project, setProject]   = useState(null);
+  const [loading, setLoading]   = useState(true);
+  const [error, setError]       = useState(null);
+  const [actionPending, setActionPending] = useState(false);
+  const [actionError, setActionError]     = useState(null);
+  // Prevent stale closures in socket handlers
+  const projectRef = useRef(project);
+  useEffect(() => { projectRef.current = project; }, [project]);
+
+  // ── Fetch ──────────────────────────────────────────────────────────────
+  const fetchProject = useCallback(async () => {
+    if (!projectId) return;
+    try {
+      setLoading(true);
+      setError(null);
+      const res = await projectService.getProject(projectId);
+      setProject(res.data.project);
+    } catch (err) {
+      setError(err.message || 'Failed to load project');
+    } finally {
+      setLoading(false);
+    }
+  }, [projectId]);
+
+  useEffect(() => { fetchProject(); }, [fetchProject]);
+
+  // ── Socket subscriptions ───────────────────────────────────────────────
+  useEffect(() => {
+    if (!socket || !projectId) return;
+
+    const handleUpdate = (updatedProject) => {
+      // Only apply if this event is for our project
+      if (updatedProject?.id !== projectId && updatedProject?.project?.id !== projectId) return;
+      const proj = updatedProject?.project ?? updatedProject;
+      setProject((prev) => prev ? { ...prev, ...proj } : proj);
+    };
+
+    const handleDeliverableSubmitted = ({ project: proj, deliverable }) => {
+      if (proj?.id !== projectId) return;
+      setProject((prev) => prev ? {
+        ...prev,
+        ...proj,
+        latest_deliverable: deliverable,
+        all_deliverables: [deliverable, ...(prev.all_deliverables ?? [])],
+      } : proj);
+    };
+
+    const handleRevisionRequested = ({ project: proj, revision }) => {
+      if (proj?.id !== projectId) return;
+      setProject((prev) => prev ? {
+        ...prev,
+        ...proj,
+        open_revisions: [revision, ...(prev.open_revisions ?? [])],
+      } : proj);
+    };
+
+    PROJECT_EVENTS.forEach((ev) => {
+      if (ev === 'deliverable_submitted') {
+        socket.on(ev, handleDeliverableSubmitted);
+      } else if (ev === 'revision_requested') {
+        socket.on(ev, handleRevisionRequested);
+      } else {
+        socket.on(ev, handleUpdate);
+      }
+    });
+
+    return () => {
+      PROJECT_EVENTS.forEach((ev) => {
+        socket.off(ev, handleUpdate);
+        socket.off(ev, handleDeliverableSubmitted);
+        socket.off(ev, handleRevisionRequested);
+      });
+    };
+  }, [socket, projectId]);
+
+  // ── Action helpers ─────────────────────────────────────────────────────
+  const runAction = useCallback(async (fn) => {
+    try {
+      setActionPending(true);
+      setActionError(null);
+      const result = await fn();
+      // Merge returned data into local state immediately
+      const proj = result?.data?.project ?? result?.data?.result?.project ?? null;
+      if (proj) {
+        setProject((prev) => prev ? {
+          ...prev,
+          ...proj,
+          // Preserve enriched sub-arrays if not returned by the action
+          latest_deliverable: result?.data?.deliverable ?? prev.latest_deliverable,
+          all_deliverables: result?.data?.deliverable
+            ? [result.data.deliverable, ...(prev.all_deliverables ?? [])]
+            : prev.all_deliverables,
+          open_revisions: result?.data?.revision
+            ? [result.data.revision, ...(prev.open_revisions ?? [])]
+            : proj.status !== 'revision_requested'
+              ? (prev.open_revisions ?? [])
+              : prev.open_revisions,
+        } : proj);
+      }
+      return result;
+    } catch (err) {
+      setActionError(err.message || 'Action failed');
+      throw err;
+    } finally {
+      setActionPending(false);
+    }
+  }, []);
+
+  const actions = {
+    updateProgress: (progress) =>
+      runAction(() => projectService.updateProgress(projectId, progress)),
+
+    submitDeliverable: (payload) =>
+      runAction(() => projectService.submitDeliverable(projectId, payload)),
+
+    requestRevision: (payload) =>
+      runAction(() => projectService.requestRevision(projectId, payload)),
+
+    approve: () =>
+      runAction(() => projectService.approveProject(projectId)),
+
+    cancel: (reason) =>
+      runAction(() => projectService.cancelProject(projectId, reason)),
+
+    refresh: fetchProject,
+  };
+
+  return { project, loading, error, actionPending, actionError, actions };
+}
diff --git a/client/src/index.css b/client/src/index.css
index c901d34..e684914 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -16,6 +16,20 @@
   /* Shadows for Depth */
   --shadow-premium: 0 10px 30px -10px rgba(5, 64, 242, 0.1);
   --shadow-glow: 0 0 20px rgba(5, 64, 242, 0.15);
+  --shadow-soft: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
+
+  /* Animations */
+  @keyframes shadow-pulse {
+    0% { box-shadow: 0 0 0 0 rgba(5, 64, 242, 0.4); }
+    70% { box-shadow: 0 0 0 15px rgba(5, 64, 242, 0); }
+    100% { box-shadow: 0 0 0 0 rgba(5, 64, 242, 0); }
+  }
+
+  @keyframes float {
+    0% { transform: translateY(0px); }
+    50% { transform: translateY(-5px); }
+    100% { transform: translateY(0px); }
+  }
 }
 
 @layer base {
@@ -89,6 +103,32 @@
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
   }
+
+  /* Redesign Utilities */
+  .animated-underline-container {
+    @apply relative inline-block;
+  }
+
+  .animated-underline-container::after {
+    content: '';
+    @apply absolute bottom-0 left-0 w-0 h-[3px] bg-brand-accent transition-all duration-500 ease-out;
+  }
+
+  .animated-underline-container:hover::after {
+    @apply w-full;
+  }
+
+  .glass-card {
+    @apply bg-white/80 backdrop-blur-md border border-white/20 shadow-premium;
+  }
+
+  .pulse-shadow {
+    animation: shadow-pulse 2s infinite;
+  }
+
+  .float-animation {
+    animation: float 3s ease-in-out infinite;
+  }
 }
 
 /* Custom Scrollbar */
@@ -107,4 +147,360 @@
 
 ::-webkit-scrollbar-thumb:hover {
   background: var(--color-brand-label);
+}
+
+.custom-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar {
+  width: 5px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 10px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.4);
+}
+
+/* ═══════════════════════════════════════════════
+   WORK DETAIL CARD  – redesigned modal component
+═══════════════════════════════════════════════ */
+
+/* ── Card shell ── */
+.wdc-card {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 980px;
+  max-height: 90vh;
+  background: #ffffff;
+  border-radius: 0;                        /* sharp edges */
+  overflow: hidden;
+  box-shadow: 0 8px 40px rgba(2, 6, 23, 0.22), 0 2px 8px rgba(2, 6, 23, 0.08);
+  transition: box-shadow 0.3s ease;
+}
+
+.wdc-card:hover {
+  box-shadow: 0 20px 60px rgba(2, 6, 23, 0.28), 0 4px 16px rgba(2, 6, 23, 0.12);
+}
+
+@media (min-width: 768px) {
+  .wdc-card {
+    flex-direction: row;
+  }
+}
+
+/* ── Image column ── */
+.wdc-image-col {
+  position: relative;
+  flex: 0 0 55%;
+  min-height: 260px;
+  background: #111;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ── Media (image / video) ── */
+.wdc-media {
+  width: 100%;
+  height: auto;
+  object-fit: contain;
+  display: block;
+  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
+              filter 0.55s ease;
+}
+
+.wdc-image-col:hover .wdc-media {
+  transform: scale(1.04);
+  filter: brightness(1.06);
+}
+
+/* ── Category badge (image overlay) ── */
+.wdc-category-badge {
+  position: absolute;
+  top: 16px;
+  left: 16px;
+  background: rgba(2, 6, 23, 0.65);
+  backdrop-filter: blur(6px);
+  color: #fff;
+  font-family: 'Inter', sans-serif;
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  padding: 5px 10px;
+  border-radius: 0;
+}
+
+/* ── Vertical divider ── */
+.wdc-divider {
+  display: none;
+  flex: 0 0 1px;
+  background: #e8e8e8;
+}
+
+@media (min-width: 768px) {
+  .wdc-divider {
+    display: block;
+  }
+}
+
+/* ── Content column ── */
+.wdc-content-col {
+  flex: 1;
+  padding: 36px 36px 32px;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  overflow-y: auto;
+  position: relative;
+  background: #ffffff;
+}
+
+/* ── Close button ── */
+.wdc-close-btn {
+  position: absolute;
+  top: 18px;
+  right: 18px;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1.5px solid #e2e2e2;
+  background: #f9f9f9;
+  color: #555;
+  border-radius: 0;
+  cursor: pointer;
+  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
+  flex-shrink: 0;
+}
+
+.wdc-close-btn:hover {
+  background: #111;
+  color: #fff;
+  border-color: #111;
+}
+
+.wdc-close-btn:focus-visible {
+  outline: 2px solid #0046FF;
+  outline-offset: 2px;
+}
+
+/* ── Type label (e.g. "CINEMATOGRAPHY") ── */
+.wdc-type-label {
+  font-family: 'Inter', sans-serif;
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: #999;
+  margin-top: 4px;
+  margin-bottom: 10px;
+}
+
+/* ── Title ── */
+.wdc-title {
+  font-family: 'Space Grotesk', sans-serif;
+  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
+  font-weight: 700;
+  color: #0d0d0d;
+  line-height: 1.15;
+  letter-spacing: -0.02em;
+  margin-bottom: 14px;
+}
+
+/* ── Description ── */
+.wdc-description {
+  font-family: 'Inter', sans-serif;
+  font-size: 13.5px;
+  color: #4a4a4a;
+  line-height: 1.75;
+  margin-bottom: 22px;
+}
+
+/* ── Horizontal rule ── */
+.wdc-h-rule {
+  width: 100%;
+  height: 1px;
+  background: #ececec;
+  margin: 18px 0;
+  flex-shrink: 0;
+}
+
+/* ── Creator row ── */
+.wdc-creator-row {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+/* ── Avatar ── */
+.wdc-avatar {
+  flex-shrink: 0;
+  width: 44px;
+  height: 44px;
+  background: #0d0d0d;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: 'Inter', sans-serif;
+  font-size: 14px;
+  font-weight: 700;
+  letter-spacing: 0.03em;
+  border-radius: 0;             /* square avatar */
+  overflow: hidden;
+}
+
+.wdc-avatar-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* ── Creator name / sub ── */
+.wdc-creator-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.wdc-creator-name {
+  font-family: 'Inter', sans-serif;
+  font-size: 14px;
+  font-weight: 700;
+  color: #111;
+  line-height: 1.2;
+}
+
+.wdc-creator-sub {
+  font-family: 'Inter', sans-serif;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: #999;
+}
+
+/* ── Meta grid ── */
+.wdc-meta-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px 24px;
+}
+
+.wdc-meta-item {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.wdc-meta-label {
+  font-family: 'Inter', sans-serif;
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: #bbb;
+}
+
+.wdc-meta-value {
+  font-family: 'Inter', sans-serif;
+  font-size: 13px;
+  font-weight: 600;
+  color: #222;
+}
+
+/* ── CTA area ── */
+.wdc-cta-area {
+  display: flex;
+  gap: 12px;
+  margin-top: 4px;
+}
+
+/* ── HIRE ME button ── */
+.wdc-hire-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  justify-content: center;
+  background: #0046FF;
+  color: #fff;
+  border: none;
+  border-radius: 0;
+  font-family: 'Inter', sans-serif;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  padding: 14px 20px;
+  cursor: pointer;
+  box-shadow: 0 4px 16px rgba(0, 70, 255, 0.28);
+  transition: background 0.22s ease, box-shadow 0.22s ease, transform 0.15s ease;
+  text-decoration: none;
+}
+
+.wdc-hire-btn:hover {
+  background: #0031B0;
+  box-shadow: 0 6px 20px rgba(0, 49, 176, 0.35);
+  transform: translateY(-1px);
+}
+
+.wdc-hire-btn:active {
+  transform: translateY(0);
+  box-shadow: 0 2px 8px rgba(0, 49, 176, 0.3);
+}
+
+.wdc-hire-btn:focus-visible {
+  outline: 3px solid #0046FF;
+  outline-offset: 3px;
+}
+
+.wdc-hire-arrow {
+  width: 15px;
+  height: 15px;
+  transition: transform 0.2s ease;
+  flex-shrink: 0;
+}
+
+.wdc-hire-btn:hover .wdc-hire-arrow {
+  transform: translateX(3px);
+}
+
+/* ── Message button ── */
+.wdc-message-btn {
+  border: 1.5px solid #d8d8d8;
+  background: transparent;
+  color: #333;
+  border-radius: 0;
+  font-family: 'Inter', sans-serif;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  padding: 14px 20px;
+  cursor: pointer;
+  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+  flex-shrink: 0;
+}
+
+.wdc-message-btn:hover {
+  background: #f4f4f4;
+  border-color: #aaa;
+}
+
+.wdc-message-btn:focus-visible {
+  outline: 2px solid #0046FF;
+  outline-offset: 2px;
 }
\ No newline at end of file
diff --git a/client/src/pages/BrandDashboard.jsx b/client/src/pages/BrandDashboard.jsx
index 6bc3ec3..402f9da 100644
--- a/client/src/pages/BrandDashboard.jsx
+++ b/client/src/pages/BrandDashboard.jsx
@@ -167,7 +167,7 @@ export default function BrandDashboard() {
             <Link to="/messages" className="flex items-center gap-2 text-[10px] uppercase tracking-[0.3em] font-bold text-[#AAAAAA] hover:text-black transition-colors">
               <MessageSquare className="w-3.5 h-3.5" /> Messages
             </Link>
-            <Link to="/edit-profile" className="flex items-center gap-2 text-[10px] uppercase tracking-[0.3em] font-bold text-[#AAAAAA] hover:text-black transition-colors">
+            <Link to="/profile/edit" className="flex items-center gap-2 text-[10px] uppercase tracking-[0.3em] font-bold text-[#AAAAAA] hover:text-black transition-colors">
               <User className="w-3.5 h-3.5" /> Profile
             </Link>
           </div>
diff --git a/client/src/pages/CheckoutPage.jsx b/client/src/pages/CheckoutPage.jsx
index b62d99b..471bdab 100644
--- a/client/src/pages/CheckoutPage.jsx
+++ b/client/src/pages/CheckoutPage.jsx
@@ -1,115 +1,273 @@
-import { useLocation, useNavigate } from 'react-router-dom';
-import { motion } from 'framer-motion';
+import { useState } from 'react';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import { motion, AnimatePresence } from 'framer-motion';
+import { api } from '../lib/api';
+import { useAuth } from '../context/AuthContext';
 
+// ── helpers ───────────────────────────────────────────────────────────────────
+const InvoiceId = `DL-${Math.floor(Math.random() * 900_000) + 100_000}`;
+
+const CheckIcon = ({ className = "w-5 h-5" }) => (
+  <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
+  </svg>
+);
+
+const Spinner = () => (
+  <svg className="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
+    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" />
+  </svg>
+);
+
+const ArrowRightIcon = () => (
+  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M14 5l7 7m0 0l-7 7m7-7H3" />
+  </svg>
+);
+
+// ── main component ────────────────────────────────────────────────────────────
 export default function CheckoutPage() {
   const location = useLocation();
   const navigate = useNavigate();
-  const { pkg, creator } = location.state || {};
+  const { id: creatorId } = useParams();
+  const { user } = useAuth();
+
+  const { pkg, creator, hiring_request_id } = location.state || {};
 
-  if (!pkg || !creator) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [agreed, setAgreed] = useState(false);
+
+  // Guard — must arrive via navigate with state and valid data
+  if (!pkg?.title || !pkg?.price || !creator) {
     return (
-      <div className="min-h-[calc(100vh-60px)] flex items-center justify-center bg-[#f8f9fa] text-black">
-        <button onClick={() => navigate(-1)} className="text-[#0540F2] underline font-bold">Go back to Profile</button>
+      <div className="min-h-[calc(100vh-60px)] flex flex-col items-center justify-center gap-6 bg-[#f8f9fa] font-sans">
+        <div className="w-16 h-16 bg-zinc-100 rounded-full flex items-center justify-center mb-2">
+          <svg className="w-8 h-8 text-zinc-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
+          </svg>
+        </div>
+        <div className="text-center">
+          <h2 className="text-2xl font-bold text-black mb-2">No Package Selected</h2>
+          <p className="text-zinc-500 max-w-xs mx-auto mb-8">It looks like you haven't selected a package yet. Please return to the creator's profile to choose one.</p>
+          <button
+            onClick={() => navigate(creatorId ? `/profile/${creatorId}` : -1)}
+            className="bg-[#0033CC] text-white px-10 py-4 rounded-full text-xs font-bold uppercase tracking-widest hover:bg-[#002699] transition-all shadow-xl"
+          >
+            ← Back to Profile
+          </button>
+        </div>
       </div>
     );
   }
 
+  const handlePay = async () => {
+    if (!agreed) {
+      setError('Please agree to the Terms of Service to continue.');
+      return;
+    }
+    setError(null);
+    setLoading(true);
+
+    try {
+      if (hiring_request_id && user) {
+        const res = await api.post('/projects', {
+          hiring_request_id,
+          package_title: pkg.title,
+          package_price_str: pkg.price,
+        });
+        const projectId = res.data.project.id;
+        navigate(`/progress/${projectId}`, { replace: true });
+      } else {
+        navigate('/progress', { state: { pkg, creator }, replace: true });
+      }
+    } catch (err) {
+      setError(err.message || 'Payment failed. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
   return (
-    <div className="min-h-[calc(100vh-60px)] flex items-center justify-center bg-[#f8f9fa] font-['Space_Grotesk'] py-12 px-4">
-      <motion.div 
-        initial={{ opacity: 0, scale: 0.95 }}
-        animate={{ opacity: 1, scale: 1 }}
-        className="max-w-4xl w-full bg-white border-[3px] border-black rounded-none shadow-[16px_16px_0px_rgba(0,0,0,1)] flex flex-col md:flex-row overflow-hidden"
+    <div className="min-h-screen bg-[#F8F9FA] font-inter flex items-center justify-center py-12 px-4">
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="max-w-6xl w-full bg-white rounded-none shadow-2xl overflow-hidden flex flex-col md:flex-row min-h-[700px]"
       >
-        
-        {/* Left Side: Receipt Breakdown */}
-        <div className="w-full md:w-3/5 bg-white p-8 md:p-12 flex flex-col">
-          <div className="flex justify-between items-start mb-12">
-            <div>
-              <h2 className="text-3xl md:text-4xl font-black text-black tracking-tighter uppercase mb-2">Checkout</h2>
-              <p className="text-sm font-bold text-zinc-500 tracking-widest uppercase">Invoice #DL-{Math.floor(Math.random() * 90000) + 10000}</p>
-            </div>
-            <div className="bg-green-100 text-green-700 border border-green-700 px-3 py-1 text-[10px] font-bold uppercase tracking-widest flex items-center gap-1.5">
-              <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
-              Secure
-            </div>
-          </div>
+        {/* ── Left Column: Booking Details ───────────────────────────── */}
+        <div className="flex-1 p-8 md:p-16 flex flex-col">
+          <header className="mb-12">
+            <h1 className="font-heading text-[32px] font-bold text-brand-headings tracking-tight uppercase mb-1">
+              Checkout
+            </h1>
+            <p className="text-sm font-medium text-zinc-400 tracking-widest">
+              INVOICE #{InvoiceId}
+            </p>
+          </header>
 
-          <div className="flex items-center gap-4 mb-8 p-4 border-2 border-black bg-[#f8f9fa]">
-            <img src={creator.img} alt={creator.name} className="w-14 h-14 object-cover border-2 border-black shadow-[4px_4px_0px_rgba(0,0,0,1)]" />
-            <div>
-              <p className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest mb-0.5">Booking Creator</p>
-              <h3 className="font-bold text-black text-lg leading-none">{creator.name}</h3>
+          {/* Booking Creator Section */}
+          <section className="mb-10">
+            <div className="flex items-center gap-5 p-6 rounded-none border border-zinc-100 bg-white shadow-soft">
+              <div className="relative">
+                <img
+                  src={creator.img || creator.avatar_url || 'https://via.placeholder.com/64'}
+                  alt={creator.name || creator.username}
+                  className="w-16 h-16 rounded-full object-cover border-4 border-[#0033CC]/10"
+                />
+              </div>
+              <div>
+                <p className="text-[10px] font-bold text-zinc-400 uppercase tracking-widest mb-1">
+                  Booking Creator
+                </p>
+                <h3 className="text-xl font-bold text-brand-headings">
+                  {creator.display_name || creator.name || creator.username}
+                </h3>
+              </div>
             </div>
-          </div>
+          </section>
 
-          <div className="mb-8">
-            <h3 className="text-sm font-black text-black uppercase tracking-widest mb-4 border-b-2 border-black pb-2">Package Details</h3>
-            <div className="flex justify-between items-start mb-2">
+          {/* Package Details */}
+          <section className="flex-1">
+            <div className="flex justify-between items-end mb-6 border-b border-zinc-100 pb-6">
               <div>
-                <p className="font-bold text-black">{pkg.title}</p>
-                <p className="text-xs text-zinc-500 max-w-xs mt-1">{pkg.subtitle}</p>
+                <h2 className="text-2xl font-bold text-brand-headings mb-1">{pkg.title}</h2>
+                {pkg.subtitle && (
+                  <p className="text-sm text-zinc-500 font-medium">{pkg.subtitle}</p>
+                )}
+              </div>
+              <div className="text-2xl font-bold text-brand-headings">
+                {pkg.price}
               </div>
-              <p className="font-bold text-black">{pkg.price}</p>
             </div>
-          </div>
 
-          <div className="space-y-3 mt-auto">
-            <div className="flex justify-between text-sm font-bold text-zinc-600">
-              <span>Subtotal</span>
-              <span>{pkg.price}</span>
-            </div>
-            <div className="flex justify-between text-sm font-bold text-zinc-600">
-              <span>Platform Fee (2.5%)</span>
-              <span>Included</span>
-            </div>
-            <div className="flex justify-between text-sm font-bold text-zinc-600">
-              <span>GST (18%)</span>
-              <span>Included</span>
-            </div>
-          </div>
+            {pkg.features?.length > 0 && (
+              <ul className="space-y-4 mb-10">
+                {pkg.features.map((feature, i) => (
+                  <li key={i} className="flex items-start gap-3 text-zinc-600">
+                    <CheckIcon className="w-5 h-5 text-[#0033CC] mt-0.5 shrink-0" />
+                    <span className="text-sm font-medium leading-relaxed">{feature}</span>
+                  </li>
+                ))}
+              </ul>
+            )}
 
+            {/* Cost Breakdown */}
+            <div className="mt-auto space-y-4 pt-8 border-t border-zinc-100">
+              <div className="flex justify-between items-center text-sm">
+                <span className="font-medium text-zinc-500">Subtotal</span>
+                <span className="font-bold text-brand-headings">{pkg.price}</span>
+              </div>
+              <div className="flex justify-between items-center text-sm">
+                <span className="font-medium text-zinc-500">Platform Fee (2.5%)</span>
+                <span className="font-bold text-[#0033CC]">Included</span>
+              </div>
+              <div className="flex justify-between items-center text-sm">
+                <span className="font-medium text-zinc-500">GST (18%)</span>
+                <span className="font-bold text-[#0033CC]">Included</span>
+              </div>
+            </div>
+          </section>
         </div>
 
-        {/* Right Side: Total & Pay */}
-        <div className="w-full md:w-2/5 bg-[#0540F2] p-8 md:p-12 flex flex-col justify-between text-white border-t-[3px] md:border-t-0 md:border-l-[3px] border-black">
-          
+        {/* ── Right Column: Payment Summary ─────────────────────────── */}
+        <div className="w-full md:w-[420px] bg-[#0033CC] p-8 md:p-16 flex flex-col justify-between text-white">
           <div>
-            <h3 className="text-sm font-bold uppercase tracking-widest text-white/80 mb-2">Total Due Today</h3>
-            <p className="text-5xl font-black text-white tracking-tighter leading-none mb-4">{pkg.price}</p>
-            <div className="w-full h-1 bg-white/20 mb-8"></div>
-            
-            <ul className="space-y-4 mb-12">
-              <li className="flex items-center gap-3 text-sm font-bold text-white">
-                <svg className="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7"/></svg>
-                Funds held securely in escrow
-              </li>
-              <li className="flex items-center gap-3 text-sm font-bold text-white">
-                <svg className="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7"/></svg>
-                Released only upon approval
-              </li>
-              <li className="flex items-center gap-3 text-sm font-bold text-white">
-                <svg className="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7"/></svg>
-                Dedicated project manager
-              </li>
-            </ul>
+            <div className="mb-12">
+              <p className="text-sm font-bold text-white/70 uppercase tracking-widest mb-3">
+                Total Due Today
+              </p>
+              <h2 className="text-4xl font-bold tracking-tighter leading-none">
+                {pkg.price}
+              </h2>
+            </div>
+
+            <div className="w-full h-px bg-white/10 mb-10" />
+
+            <div className="space-y-6 mb-12">
+              {[
+                'Funds held securely in escrow',
+                'Released only upon approval',
+                'Revisions allowed',
+                'Tracking board access',
+              ].map((text, i) => (
+                <div key={i} className="flex items-center gap-4">
+                  <div className="w-6 h-6 rounded-full bg-white/10 flex items-center justify-center">
+                    <CheckIcon className="w-4 h-4 text-white" />
+                  </div>
+                  <span className="text-sm font-medium tracking-wide">{text}</span>
+                </div>
+              ))}
+            </div>
           </div>
 
           <div>
-            <button 
-              onClick={() => navigate('/progress', { state: { pkg, creator } })}
-              className="w-full bg-white text-black font-black uppercase tracking-widest py-5 border-[3px] border-black hover:-translate-y-1 hover:-translate-x-1 transition-transform shadow-[8px_8px_0px_rgba(0,0,0,1)] mb-4 flex items-center justify-center gap-2"
+            {/* Terms & Conditions */}
+            <label className="flex items-start gap-4 mb-8 cursor-pointer group">
+              <div className="relative mt-1">
+                <input
+                  type="checkbox"
+                  checked={agreed}
+                  onChange={(e) => setAgreed(e.target.checked)}
+                  className="peer sr-only"
+                />
+                <div className="w-6 h-6 border-2 border-white/30 rounded-none transition-all peer-checked:bg-white peer-checked:border-white group-hover:border-white/60 flex items-center justify-center">
+                  {agreed && <CheckIcon className="w-4 h-4 text-[#0033CC]" />}
+                </div>
+              </div>
+              <span className="text-xs font-medium text-white/80 leading-relaxed">
+                I agree to the{' '}
+                <a href="/terms" target="_blank" className="text-white underline font-bold underline-offset-4">
+                  Terms of Service
+                </a>{' '}
+                and understand that payment is held in escrow.
+              </span>
+            </label>
+
+            {/* Error Message */}
+            <AnimatePresence>
+              {error && (
+                <motion.div
+                  initial={{ opacity: 0, height: 0 }}
+                  animate={{ opacity: 1, height: 'auto' }}
+                  exit={{ opacity: 0, height: 0 }}
+                  className="bg-red-500/20 border border-red-500/50 rounded-xl p-4 mb-6"
+                >
+                  <p className="text-xs font-bold text-red-200">{error}</p>
+                </motion.div>
+              )}
+            </AnimatePresence>
+
+            {/* Confirm Button */}
+            <button
+              onClick={handlePay}
+              disabled={loading || !agreed}
+              className="w-full bg-[#6C84FF] hover:bg-[#5A70E0] disabled:bg-[#6C84FF]/40 disabled:cursor-not-allowed text-black font-bold uppercase tracking-[0.1em] py-5 px-8 rounded-none flex items-center justify-center gap-3 transition-all transform active:scale-[0.98] shadow-lg shadow-black/20 group"
             >
-              Pay Now
-              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>
+              {loading ? (
+                <Spinner />
+              ) : (
+                <>
+                  <span>Confirm & Pay</span>
+                  <div className="transition-transform group-hover:translate-x-1">
+                    <ArrowRightIcon />
+                  </div>
+                </>
+              )}
             </button>
-            <p className="text-center text-[10px] font-bold text-white/70 uppercase tracking-widest">
-              By paying, you agree to our Terms of Service
-            </p>
-          </div>
 
+            {/* Security Note */}
+            <div className="mt-8 text-center space-y-2">
+              <p className="text-[10px] font-bold text-white/40 uppercase tracking-widest">
+                256-bit SSL encrypted
+              </p>
+              <p className="text-[10px] font-medium text-white/30 italic">
+                Escrow powered by Driplens Payments
+              </p>
+            </div>
+          </div>
         </div>
-
       </motion.div>
     </div>
   );
diff --git a/client/src/pages/CreatorDashboard.jsx b/client/src/pages/CreatorDashboard.jsx
index 9e46bc4..163bb5c 100644
--- a/client/src/pages/CreatorDashboard.jsx
+++ b/client/src/pages/CreatorDashboard.jsx
@@ -1,47 +1,45 @@
 import { useState, useEffect } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
-import { Link } from 'react-router-dom';
+import { motion } from 'framer-motion';
+import { Link, useLocation, useNavigate } from 'react-router-dom';
 import { Helmet } from 'react-helmet-async';
 import { 
-  Zap, 
   MessageSquare, 
   User, 
   Plus, 
-  Clock, 
-  CheckCircle2, 
-  XCircle, 
-  Layout,
-  BarChart3,
+  PlayCircle,
   ArrowUpRight,
-  Briefcase,
-  PlayCircle
+  LayoutDashboard,
+  Image as ImageIcon,
+  Inbox,
+  TrendingUp
 } from 'lucide-react';
 import { api } from '../lib/api';
 import { useAuth } from '../context/AuthContext';
 import { useSocket } from '../context/SocketContext';
+import EditProjectModal from '../components/EditProjectModal';
+import WorkDetailCard from '../components/WorkDetailCard';
 
-// ─── StatCard ────────────────────────────────────────────────────────────────
-function StatCard({ label, value, loading, icon: Icon }) {
+// ─── MetricBlock ─────────────────────────────────────────────────────────────
+function MetricBlock({ label, value, loading, icon: Icon, trend }) {
   return (
     <motion.div 
-      initial={{ opacity: 0, y: 10 }}
-      animate={{ opacity: 1, y: 0 }}
-      className="bg-white border border-[#EEEEEE] p-6 relative overflow-hidden group"
+      whileHover={{ backgroundColor: '#F9FAFB' }}
+      className="border border-[#F0F0F0] p-6 bg-white transition-colors duration-200 flex flex-col group"
     >
-      <div className="flex justify-between items-start relative z-10">
-        <div>
-          <p className="text-[#AAAAAA] text-[9px] font-bold uppercase tracking-[0.4em] mb-2">{label}</p>
-          {loading ? (
-            <div className="h-10 w-24 bg-[#F5F5F5] animate-pulse" />
-          ) : (
-            <h2 className="text-4xl font-bold text-black tracking-tighter">{value}</h2>
-          )}
-        </div>
-        <div className="p-2 bg-[#FAFAFA] border border-[#EEEEEE] group-hover:border-black transition-colors">
-          <Icon className="w-4 h-4 text-[#AAAAAA] group-hover:text-black transition-colors" />
+      <div className="flex items-center gap-2">
+        <div className="p-1 border border-[#F0F0F0] bg-[#FAFAFA]">
+          <Icon className="w-3.5 h-3.5 text-[#0D1033]" />
         </div>
+        <span className="text-xs font-medium uppercase tracking-[0.2em] text-[#9CA3AF]">{label}</span>
+      </div>
+      {loading ? (
+        <div className="h-9 w-24 bg-gray-50 animate-pulse mt-2" />
+      ) : (
+        <h2 className="text-5xl text-[#0D1033] mt-2 group-hover:translate-x-1 transition-transform duration-300">{value}</h2>
+      )}
+      <div className="flex items-center gap-1 mt-2">
+        <span className="text-[10px] text-[#9CA3AF] font-bold uppercase tracking-tighter">{trend || '↑ 0.0%'}</span>
       </div>
-      <div className="absolute bottom-0 left-0 w-full h-[1px] bg-black translate-y-full group-hover:translate-y-0 transition-transform duration-500" />
     </motion.div>
   );
 }
@@ -49,21 +47,28 @@ function StatCard({ label, value, loading, icon: Icon }) {
 // ─── Main Component ───────────────────────────────────────────────────────────
 export default function CreatorDashboard() {
   const { user } = useAuth();
+  const location = useLocation();
+  const navigate = useNavigate();
   const [requests, setRequests]   = useState([]);
   const [portfolio, setPortfolio] = useState([]);
+  const [projects, setProjects]   = useState([]);
   const [loading, setLoading]     = useState(true);
+  const [editingProject, setEditingProject] = useState(null);
+  const [selectedDetailProject, setSelectedDetailProject] = useState(null);
 
   useEffect(() => {
     if (!user?.id) return;
     
     const load = async () => {
       try {
-        const [hiringData, uploadData] = await Promise.all([
+        const [hiringData, uploadData, projectsData] = await Promise.all([
           api.get('/hiring'),
-          api.get(`/upload?limit=10&creator_id=${user.id}`)
+          api.get(`/upload?limit=10&creator_id=${user.id}`),
+          api.get('/upload/projects')
         ]);
         setRequests(hiringData.data.requests || []);
         setPortfolio(uploadData.data.items || []);
+        setProjects(projectsData.data || []);
       } catch (err) {
         console.error(err);
       } finally {
@@ -102,196 +107,331 @@ export default function CreatorDashboard() {
     }
   };
 
-  const containerVariants = {
-    hidden: { opacity: 0 },
-    visible: { opacity: 1, transition: { staggerChildren: 0.1 } }
-  };
+  useEffect(() => {
+    const link = document.createElement('link');
+    link.href = 'https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500;600&display=swap';
+    link.rel = 'stylesheet';
+    document.head.appendChild(link);
+  }, []);
+
+  const handleAddWork = () => navigate('/upload');
 
   return (
-    <div className="min-h-screen bg-white selection:bg-black selection:text-white antialiased">
+    <div style={{ display: 'grid', gridTemplateColumns: '160px 1fr', minHeight: '100vh', fontFamily: '"Space Grotesk", sans-serif' }} className="antialiased">
       <Helmet>
         <title>Dashboard — {user?.username}</title>
       </Helmet>
 
-      {/* ── Top Bar Navigation ── */}
-      <div className="border-b border-[#F5F5F5] sticky top-0 z-50 bg-white/80 backdrop-blur-xl">
-        <div className="max-w-[1600px] mx-auto px-8 h-16 flex items-center justify-between">
-          <div className="flex items-center gap-4">
-             <div className="w-2 h-2 bg-black rounded-full" />
-             <span className="text-[10px] uppercase tracking-[0.5em] font-bold text-black">Console v1.0</span>
+      {/* LEFT SIDEBAR */}
+      <div style={{ background: '#fff', borderRight: '0.5px solid #F0F0F0', padding: '24px 14px', display: 'flex', flexDirection: 'column', gap: '4px' }}>
+        {/* Nav items */}
+        {[
+          { label: 'OVERVIEW', onClick: () => navigate('/dashboard/creator'), path: '/dashboard/creator' },
+          { label: 'PORTFOLIO', onClick: () => navigate('/profile/' + user?.id), path: '/profile/' + user?.id },
+          { label: 'INQUIRIES', onClick: () => {
+              navigate('/dashboard/creator');
+              setTimeout(() => {
+                document.getElementById('inquiries-section')?.scrollIntoView({ behavior: 'smooth' });
+              }, 100);
+            }, path: '/dashboard/creator' },
+          { label: 'MESSAGES', onClick: () => navigate('/messages'), path: '/messages' },
+          { label: 'PROFILE', onClick: () => navigate('/profile/edit'), path: '/profile/edit' }
+        ].map((item) => {
+          const active = (item.label === 'OVERVIEW' && location.pathname === '/dashboard/creator') ||
+                         (item.label === 'MESSAGES' && location.pathname === '/messages') ||
+                         (item.label === 'PORTFOLIO' && location.pathname.startsWith('/profile/'));
+          return (
+            <div 
+              key={item.label} 
+              onClick={item.onClick}
+              onMouseEnter={e => e.currentTarget.style.color = '#0D1033'}
+              onMouseLeave={e => e.currentTarget.style.color = active ? '#3B50E0' : '#9CA3AF'}
+              style={{ 
+                fontSize: '11px', 
+                color: active ? '#3B50E0' : '#9CA3AF', 
+                letterSpacing: '.08em', 
+                padding: '7px 10px', 
+                borderRadius: '0px', 
+                background: active ? '#F5F5FF' : 'transparent', 
+                cursor: 'pointer',
+                display: 'block',
+                transition: 'all 0.2s'
+              }}
+            >
+              {item.label}
+            </div>
+          );
+        })}
+      </div>
+
+      {/* MAIN CONTENT */}
+      <div style={{ background: '#F8F9FC', padding: '28px 32px', display: 'flex', flexDirection: 'column', gap: '20px' }}>
+
+        {/* Header */}
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+          <div>
+            <div style={{ fontSize: '24px', letterSpacing: '-.02em', color: '#9CA3AF', textTransform: 'uppercase', marginBottom: '8px', fontWeight: '800' }}>
+              Good morning
+            </div>
+            <div style={{ fontSize: '56px', letterSpacing: '-.05em', color: '#0D1033', lineHeight: '1', textTransform: 'uppercase', fontWeight: '800' }}>
+              {user?.username}
+            </div>
+            <div style={{ fontSize: '12px', color: '#9CA3AF', marginTop: '10px', letterSpacing: '.06em', textTransform: 'uppercase' }}>
+              Profile Performance Matrix · Q2 2026
+            </div>
           </div>
-          <div className="flex items-center gap-6">
-            <Link to="/messages" className="flex items-center gap-2 text-[10px] uppercase tracking-[0.3em] font-bold text-[#AAAAAA] hover:text-black transition-colors">
-              <MessageSquare className="w-3.5 h-3.5" /> Messages
-            </Link>
-            <Link to="/edit-profile" className="flex items-center gap-2 text-[10px] uppercase tracking-[0.3em] font-bold text-[#AAAAAA] hover:text-black transition-colors">
-              <User className="w-3.5 h-3.5" /> Profile
-            </Link>
+          <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+            <span style={{ fontSize: '9px', padding: '3px 10px', borderRadius: '999px', border: '0.5px solid #C8D0F8', background: '#EEF0FF', color: '#3B50E0', letterSpacing: '.08em' }}>CREATOR</span>
+            <span style={{ fontSize: '9px', padding: '3px 10px', borderRadius: '999px', border: '0.5px solid #BBF7D0', background: '#EDFFF4', color: '#16A34A', letterSpacing: '.08em' }}>ACTIVE</span>
+            <span style={{ fontSize: '10px', color: '#9CA3AF', marginLeft: '4px' }}>{new Date().toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}</span>
           </div>
         </div>
-      </div>
 
-      <div className="max-w-[1600px] mx-auto px-8 py-12">
-        
-        {/* ── Header Section ── */}
-        <motion.div 
-          initial={{ opacity: 0, y: 10 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="mb-16"
-        >
-          <div className="flex items-center gap-4 mb-4">
-            <div className="px-3 py-1 border border-black text-[9px] font-bold uppercase tracking-[0.4em]">Creator Account</div>
-            <div className="text-[10px] uppercase tracking-[0.3em] font-bold text-[#AAAAAA]">Session Active</div>
+        {/* Stat cards */}
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '10px' }}>
+          {[
+            { label: 'PORTFOLIO', value: portfolio.length, color: '#3B50E0', sub: '+0 this month', borderLeft: '3px solid #3B50E0' },
+            { label: 'PROJECTS', value: projects.length, color: '#0D1033', sub: 'portfolio projects', borderLeft: '3px solid #0D1033' },
+            { label: 'INQUIRIES', value: pendingRequests.length, color: '#C060C0', sub: '+0 new', borderLeft: '3px solid #C060C0' },
+            { label: 'ACTIVE JOBS', value: accepted.length, color: '#16A34A', sub: 'hired', borderLeft: '3px solid #16A34A' },
+          ].map(card => (
+            <div key={card.label} style={{ background: '#fff', border: 'none', borderLeft: card.borderLeft, boxShadow: '0 1px 3px rgba(0,0,0,0.06)', borderRadius: '0px', padding: '16px' }}>
+              <div style={{ fontSize: '10px', color: '#9CA3AF', letterSpacing: '.14em', textTransform: 'uppercase', marginBottom: '8px' }}>{card.label}</div>
+              <div style={{ fontSize: '24px', color: card.color }}>{card.value}</div>
+              <div style={{ fontSize: '9px', color: '#9CA3AF', marginTop: '6px' }}>{card.sub}</div>
+            </div>
+          ))}
+        </div>
+
+        {/* Projects Section */}
+        <div>
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px' }}>
+            <div style={{ fontSize: '10px', letterSpacing: '.16em', textTransform: 'uppercase', color: '#0D1033' }}>PORTFOLIO PROJECTS</div>
+            <Link to="/upload" style={{ fontSize: '9px', color: '#3B50E0', textDecoration: 'none' }}>+ Create project</Link>
           </div>
-          <h1 className="text-5xl md:text-7xl font-bold tracking-tighter mb-4">
-            Welcome back, <br />
-            <span className="text-[#DDDDDD]">{user?.username}</span>
-          </h1>
-          <p className="text-[#666666] text-sm font-light leading-relaxed max-w-md">
-            Monitor your project pipeline, update your portfolio, and engage with top brands in real-time.
-          </p>
-        </motion.div>
+          
+          {loading ? (
+            <div className="h-20 bg-gray-50 animate-pulse" />
+          ) : projects.length === 0 ? (
+            <div style={{ border: '1px dashed #E0E0EC', background: '#fff', borderRadius: '10px', padding: '32px', textAlign: 'center', fontSize: '11px', color: '#C4C4D0' }}>
+              Organize your work into projects to stand out
+            </div>
+          ) : (
+            <div className="flex gap-4 overflow-x-auto pb-4 scrollbar-hide">
+              {projects.map(project => {
+                const firstMedia = project.items?.[0];
+                return (
+                  <div 
+                    key={project.id}
+                    onClick={() => setSelectedDetailProject({
+                      ...project,
+                      items: (project.items || []).map(i => ({
+                        ...i,
+                        mediaUrl: i.media_url || i.mediaUrl,
+                        mediaType: i.media_type || i.mediaType
+                      })),
+                      author: user
+                    })}
+                    className="flex-shrink-0 w-64 bg-white border border-[#F0F0F0] p-0 hover:shadow-lg transition-all group relative cursor-pointer"
+                  >
+                    <div className="aspect-video relative overflow-hidden bg-[#FAFAFA]">
+                      {firstMedia ? (
+                        firstMedia.media_type === 'video' ? (
+                          <video 
+                            src={firstMedia.media_url} 
+                            className="w-full h-full object-cover"
+                            muted
+                            onMouseOver={e => e.target.play()}
+                            onMouseOut={e => e.target.pause()}
+                          />
+                        ) : (
+                          <img src={firstMedia.media_url} alt={project.title} className="w-full h-full object-cover" />
+                        )
+                      ) : (
+                        <div className="w-full h-full flex items-center justify-center">
+                          <ImageIcon className="w-6 h-6 text-[#F0F0F0]" />
+                        </div>
+                      )}
+                      <button 
+                        onClick={(e) => { e.stopPropagation(); setEditingProject(project); }}
+                        className="absolute top-3 right-3 p-2 bg-white/90 border border-[#F0F0F0] opacity-0 group-hover:opacity-100 transition-opacity hover:bg-white backdrop-blur-sm shadow-sm"
+                        style={{ borderRadius: '0px' }}
+                      >
+                        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3">
+                          <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+                        </svg>
+                      </button>
+                    </div>
+                    <div className="p-5">
+                      <h3 className="font-black text-xs uppercase tracking-tighter mb-1 truncate">{project.title}</h3>
+                      <p className="text-[9px] text-[#9CA3AF] uppercase tracking-widest font-bold mb-4">{project.category}</p>
+                      <div className="flex justify-between items-center text-[9px] font-black text-[#0D1033] uppercase mt-auto">
+                        <span>VIEW DETAILS</span>
+                        <ArrowUpRight className="w-3 h-3" />
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
 
-        {/* ── Stats Grid ── */}
-        <motion.div 
-          variants={containerVariants}
-          initial="hidden"
-          animate="visible"
-          className="grid grid-cols-1 md:grid-cols-3 gap-1 mb-16"
-        >
-          <StatCard label="Portfolio Assets" value={portfolio.length} loading={loading} icon={Layout} />
-          <StatCard label="Pending Inquiries" value={pendingRequests.length} loading={loading} icon={Clock} />
-          <StatCard label="Active Projects" value={accepted.length} loading={loading} icon={Briefcase} />
-        </motion.div>
+          <EditProjectModal 
+            project={editingProject}
+            isOpen={!!editingProject}
+            onClose={() => setEditingProject(null)}
+            onSave={(updated) => {
+              setProjects(prev => prev.map(p => p.id === updated.id ? updated : p));
+            }}
+          />
 
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-16 items-start">
+          <WorkDetailCard 
+            project={selectedDetailProject}
+            onClose={() => setSelectedDetailProject(null)}
+          />
+        </div>
+
+        {/* Portfolio section */}
+        <div>
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px' }}>
+            <div style={{ fontSize: '10px', letterSpacing: '.16em', textTransform: 'uppercase', color: '#0D1033' }}>DIGITAL PORTFOLIO</div>
+            <div onClick={handleAddWork} style={{ fontSize: '9px', color: '#3B50E0', cursor: 'pointer' }}>+ Add work</div>
+          </div>
           
-          {/* ── Portfolio Section ── */}
-          <div className="lg:col-span-2">
-            <div className="flex items-center justify-between mb-8 border-b border-[#F5F5F5] pb-6">
-              <h2 className="text-[10px] uppercase tracking-[0.5em] font-black">Digital Portfolio</h2>
-              <Link to="/upload" className="text-[9px] font-bold uppercase tracking-widest border border-black bg-black text-white px-6 py-2.5 hover:bg-[#222222] transition-all flex items-center gap-2">
-                <Plus className="w-3.5 h-3.5" /> Add Work
-              </Link>
+          {loading ? (
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+              {[1, 2, 3].map(i => (
+                <div key={i} className="aspect-square bg-gray-50 border border-[#F0F0F0] animate-pulse" />
+              ))}
             </div>
-
-            {loading ? (
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-1">
-                {[1, 2, 3, 4].map(i => (
-                  <div key={i} className="aspect-video bg-[#FAFAFA] animate-pulse" />
-                ))}
-              </div>
-            ) : portfolio.length === 0 ? (
-              <div className="border border-dashed border-[#EEEEEE] py-20 text-center">
-                <p className="text-[10px] uppercase tracking-[0.3em] font-bold text-[#AAAAAA] mb-4">No assets uploaded</p>
-                <Link to="/upload" className="text-[9px] font-bold uppercase tracking-widest border border-[#EEEEEE] px-6 py-3 hover:border-black transition-all inline-block">Initialize Portfolio</Link>
-              </div>
-            ) : (
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-1">
-                {portfolio.map(item => (
+          ) : portfolio.length === 0 ? (
+            <div style={{ border: '1px dashed #E0E0EC', background: '#fff', borderRadius: '10px', padding: '48px 32px', textAlign: 'center', fontSize: '11px', color: '#C4C4D0' }}>
+              Upload your first work to start attracting brands
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+              {portfolio.map(item => {
+                const firstMedia = item.items?.[0];
+                return (
                   <motion.div 
                     key={item.id}
-                    initial={{ opacity: 0 }}
-                    animate={{ opacity: 1 }}
-                    className="group border border-[#F5F5F5] bg-white p-6 hover:border-black hover:shadow-xl transition-all duration-500 relative overflow-hidden"
+                    whileHover={{ y: -4 }}
+                    onClick={() => setSelectedDetailProject({
+                      ...item,
+                      mediaUrl: firstMedia?.media_url,
+                      mediaType: firstMedia?.media_type,
+                      items: (item.items || []).map(i => ({
+                        ...i,
+                        mediaUrl: i.media_url || i.mediaUrl,
+                        mediaType: i.media_type || i.mediaType
+                      })),
+                      author: user
+                    })}
+                    className="group bg-white border border-[#F0F0F0] p-4 transition-all duration-300 cursor-pointer"
                   >
-                    <div className="aspect-video relative overflow-hidden bg-[#FAFAFA] mb-6">
-                      {item.media_type === 'image' ? (
-                        <img src={item.media_url} alt={item.title} className="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-700" />
+                    <div className="aspect-square relative overflow-hidden bg-[#FAFAFA] mb-4">
+                      {firstMedia ? (
+                        firstMedia.media_type === 'image' ? (
+                          <img src={firstMedia.media_url} alt={item.title} className="w-full h-full object-cover transition-all duration-500" />
+                        ) : (
+                          <video 
+                            src={firstMedia.media_url} 
+                            className="w-full h-full object-cover transition-all duration-500"
+                            muted
+                            loop
+                            onMouseOver={e => e.target.play()}
+                            onMouseOut={e => e.target.pause()}
+                          />
+                        )
                       ) : (
-                        <div className="w-full h-full flex items-center justify-center bg-[#111111] group-hover:bg-black transition-colors">
-                          <PlayCircle className="w-8 h-8 text-white/20 group-hover:text-white transition-colors" />
+                        <div className="w-full h-full flex items-center justify-center">
+                          <ImageIcon className="w-6 h-6 text-[#F0F0F0]" />
+                        </div>
+                      )}
+                      
+                      <div className="absolute top-0 left-0 px-2 py-1 bg-white border-r border-b border-[#F0F0F0] text-[8px] font-black uppercase tracking-widest text-[#0D1033]">
+                        {item.category}
+                      </div>
+                      {firstMedia?.media_type === 'video' && (
+                        <div className="absolute inset-0 flex items-center justify-center pointer-events-none group-hover:opacity-0 transition-opacity">
+                          <PlayCircle className="w-8 h-8 text-white/50" />
                         </div>
                       )}
                     </div>
-                    <div>
-                      <h3 className="text-sm font-bold tracking-tight mb-1 truncate">{item.title}</h3>
-                      <div className="flex justify-between items-center">
-                        <p className="text-[9px] uppercase tracking-widest font-bold text-[#AAAAAA]">{item.category}</p>
-                        <p className="text-[8px] uppercase tracking-widest text-[#CCCCCC]">{new Date(item.created_at).toLocaleDateString()}</p>
+                    <div className="px-1">
+                      <h3 className="text-xs font-black text-[#0D1033] truncate uppercase tracking-tighter">{item.title}</h3>
+                      <div className="flex justify-between items-center mt-2">
+                        <p className="text-[9px] font-bold text-[#9CA3AF] uppercase">{new Date(item.created_at).toLocaleDateString()}</p>
+                        <ArrowUpRight className="w-3 h-3 text-[#9CA3AF] group-hover:text-[#0D1033] transition-colors" />
                       </div>
                     </div>
-                    <div className="absolute top-0 right-0 w-8 h-8 border-t border-r border-transparent group-hover:border-black transition-all duration-500" />
                   </motion.div>
-                ))}
-              </div>
-            )}
-          </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
 
-          {/* ── Inquiries Sidebar ── */}
-          <div className="lg:col-span-1 space-y-12">
-            <div>
-              <div className="flex items-center justify-between mb-8 border-b border-[#F5F5F5] pb-6">
-                <h2 className="text-[10px] uppercase tracking-[0.5em] font-black">Inquiries</h2>
-                <span className="text-[9px] uppercase tracking-widest font-bold text-[#AAAAAA]">{pendingRequests.length} Pending</span>
-              </div>
+        {/* Inquiries section */}
+        <div id="inquiries-section">
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px' }}>
+            <div style={{ fontSize: '10px', letterSpacing: '.16em', textTransform: 'uppercase', color: '#0D1033' }}>INQUIRIES</div>
+            <div style={{ fontSize: '9px', color: '#9CA3AF' }}>{pendingRequests.length} PENDING</div>
+          </div>
 
-              {loading ? (
-                <div className="space-y-1">
-                  {[1, 2].map(i => (
-                    <div key={i} className="h-32 bg-[#FAFAFA] animate-pulse" />
-                  ))}
-                </div>
-              ) : pendingRequests.length === 0 ? (
-                <div className="p-12 border border-dashed border-[#EEEEEE] text-center">
-                   <p className="text-[9px] uppercase tracking-[0.3em] font-bold text-[#AAAAAA]">Queue is empty</p>
-                </div>
-              ) : (
-                <div className="space-y-1">
-                  {pendingRequests.map(r => (
-                    <motion.div 
-                      key={r.id}
-                      initial={{ opacity: 0, x: 10 }}
-                      animate={{ opacity: 1, x: 0 }}
-                      className="border border-[#F5F5F5] p-6 bg-white hover:border-black transition-all duration-500 group"
+          {loading ? (
+            <div className="space-y-6">
+              {[1, 2].map(i => (
+                <div key={i} className="h-40 bg-gray-50 border border-[#F0F0F0] animate-pulse" />
+              ))}
+            </div>
+          ) : pendingRequests.length === 0 ? (
+            <div style={{ border: '1px dashed #E0E0EC', background: '#fff', borderRadius: '10px', padding: '48px 32px', textAlign: 'center', fontSize: '11px', color: '#C4C4D0' }}>
+              No inquiries yet — brands will appear here once they reach out
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 gap-6">
+              {pendingRequests.map(r => (
+                <motion.div 
+                  key={r.id}
+                  whileHover={{ x: 4 }}
+                  className="bg-white border border-[#F0F0F0] p-8 transition-all"
+                >
+                  <div className="flex justify-between items-start mb-6">
+                    <div>
+                      <h3 className="text-lg font-light text-[#0D1033] tracking-tight">{r.project_title}</h3>
+                      <p className="text-[9px] font-black text-[#9CA3AF] uppercase mt-1 tracking-widest">Client: {r.brand?.username}</p>
+                    </div>
+                    <div className="text-right">
+                      <div className="text-lg font-light text-[#0D1033]">${r.budget?.toLocaleString()}</div>
+                      <div className="text-[9px] uppercase tracking-widest font-black text-[#9CA3AF]">Budget (USD)</div>
+                    </div>
+                  </div>
+                  <div className="border-l-2 border-[#F0F0F0] pl-6 py-2 mb-8">
+                    <p className="text-xs text-[#6B7280] leading-relaxed italic">
+                      {r.project_description}
+                    </p>
+                  </div>
+                  <div className="flex gap-4">
+                    <button 
+                      onClick={() => updateStatus(r.id, 'Accepted')} 
+                      className="border border-[#0D1033] bg-white text-[#0D1033] px-10 py-3 text-[9px] font-black uppercase tracking-[0.2em] hover:bg-[#F9FAFB] transition-all"
                     >
-                      <div className="flex justify-between items-start mb-4">
-                        <div>
-                          <h3 className="text-sm font-bold tracking-tight mb-1">{r.project_title}</h3>
-                          <p className="text-[9px] uppercase tracking-widest font-bold text-[#AAAAAA]">from {r.brand?.username}</p>
-                        </div>
-                        <div className="text-right">
-                          <div className="text-xs font-black text-black">${r.budget?.toLocaleString()}</div>
-                          <div className="text-[8px] uppercase tracking-widest text-[#AAAAAA]">Offer</div>
-                        </div>
-                      </div>
-                      <p className="text-[10px] text-[#666666] leading-relaxed mb-6 line-clamp-2 italic font-light border-l border-[#EEEEEE] pl-4">
-                        "{r.project_description}"
-                      </p>
-                      <div className="flex gap-1">
-                        <button 
-                          onClick={() => updateStatus(r.id, 'Accepted')} 
-                          className="flex-1 bg-black text-white py-3 text-[9px] font-bold uppercase tracking-widest hover:bg-[#222222] transition-colors"
-                        >
-                          Accept
-                        </button>
-                        <button 
-                          onClick={() => updateStatus(r.id, 'Declined')} 
-                          className="flex-1 border border-[#EEEEEE] text-black py-3 text-[9px] font-bold uppercase tracking-widest hover:border-black transition-colors"
-                        >
-                          Decline
-                        </button>
-                      </div>
-                    </motion.div>
-                  ))}
-                </div>
-              )}
+                      Accept Proposal
+                    </button>
+                    <button 
+                      onClick={() => updateStatus(r.id, 'Declined')} 
+                      className="border border-[#F0F0F0] text-[#6B7280] px-10 py-3 text-[9px] font-black uppercase tracking-[0.2em] hover:bg-gray-50 transition-all"
+                    >
+                      Decline
+                    </button>
+                  </div>
+                </motion.div>
+              ))}
             </div>
-
-            <Link
-              to="/messages"
-              className="group border border-[#EEEEEE] p-8 flex items-center justify-between hover:border-black transition-all"
-            >
-              <div>
-                <h3 className="text-[10px] font-bold uppercase tracking-[0.5em] mb-1">Encrypted Comms</h3>
-                <p className="text-[8px] text-[#AAAAAA] uppercase tracking-widest font-bold">Access all active threads</p>
-              </div>
-              <div className="p-3 bg-[#FAFAFA] border border-[#EEEEEE] group-hover:border-black transition-colors">
-                 <MessageSquare className="w-4 h-4 text-[#AAAAAA] group-hover:text-black transition-colors" />
-              </div>
-            </Link>
-          </div>
+          )}
         </div>
+
       </div>
     </div>
   );
diff --git a/client/src/pages/CreatorPricingPage.jsx b/client/src/pages/CreatorPricingPage.jsx
new file mode 100644
index 0000000..7a50e09
--- /dev/null
+++ b/client/src/pages/CreatorPricingPage.jsx
@@ -0,0 +1,177 @@
+import { useState, useEffect } from 'react';
+import { useParams, useNavigate, useLocation } from 'react-router-dom';
+import { motion } from 'framer-motion';
+import { 
+  CheckCircle, 
+  ArrowRight, 
+  ShieldCheck, 
+  Clock, 
+  CreditCard,
+  MessageSquare,
+  ChevronLeft
+} from 'lucide-react';
+import { api } from '../lib/api';
+
+const DEFAULT_PACKAGES = [
+  {
+    title: 'Social / Lifestyle',
+    price: '₹5,000–₹12,000',
+    subtitle: 'Perfect for personal branding & short reels',
+    features: ['2–4 hours shoot time', 'Professional lighting setup', 'Basic color grading', '2–3 edited short videos', 'Optimised for Instagram/TikTok', 'Web-ready delivery'],
+  },
+  {
+    title: 'Event Coverage',
+    price: '₹15,000–₹25,000',
+    subtitle: 'Best for corporate events & parties',
+    features: ['6–8 hours event coverage', 'Dual camera setup', 'Candid + staged shots', 'Advanced colour correction', '1–3 min highlight reel', 'Raw footage available'],
+    popular: true,
+  },
+  {
+    title: 'Commercial Film',
+    price: '₹35,000–₹80,000+',
+    subtitle: 'High-end visuals for brands & businesses',
+    features: ['Full-day shoot (10–12 h)', 'Pre-production & storyboarding', 'Cinema-grade cameras', 'Professional crew & sound', 'Cinematic colour grading', 'Multiple export formats'],
+  },
+];
+
+export default function CreatorPricingPage() {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const [creator, setCreator] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const loadCreator = async () => {
+      try {
+        const res = await api.get(`/creators/${id}`);
+        setCreator(res.data.creator);
+      } catch (err) {
+        console.error('Failed to load creator:', err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    loadCreator();
+    window.scrollTo(0, 0);
+  }, [id]);
+
+  if (loading) {
+    return (
+      <div className="h-screen flex items-center justify-center">
+        <div className="w-8 h-8 border-2 border-black border-t-transparent rounded-full animate-spin" />
+      </div>
+    );
+  }
+
+  if (!creator) return <div className="p-20 text-center">Creator not found</div>;
+
+  return (
+    <div className="min-h-screen bg-[#FDFDFD] font-sans text-black pb-20">
+      {/* ── Minimal Header ── */}
+      <div className="max-w-7xl mx-auto px-6 py-8 flex items-center justify-between">
+        <button 
+          onClick={() => navigate(`/profile/${id}`)}
+          className="text-[11px] font-bold uppercase tracking-[0.3em] text-[#AAAAAA] hover:text-black transition-all flex items-center gap-2"
+        >
+          <ChevronLeft className="w-4 h-4" /> Back to Profile
+        </button>
+        <div className="text-[11px] font-bold uppercase tracking-[0.4em] text-[#AAAAAA]">
+          Secure Checkout System
+        </div>
+      </div>
+
+
+      {/* ── Pricing Grid ── */}
+      <div className="max-w-7xl mx-auto px-6 mb-24">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          {DEFAULT_PACKAGES.map((pkg, i) => (
+            <motion.div
+              key={i}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: i * 0.1 }}
+              className={`relative flex flex-col p-10 border-2 transition-all duration-500 group ${
+                pkg.popular 
+                  ? 'border-black bg-white shadow-[12px_12px_0px_rgba(0,0,0,1)]' 
+                  : 'border-zinc-100 bg-white hover:border-black hover:shadow-[12px_12px_0px_rgba(0,0,0,1)]'
+              }`}
+            >
+              {pkg.popular && (
+                <div className="absolute -top-3 left-6 bg-black text-white px-4 py-1 text-[9px] font-bold uppercase tracking-[0.2em]">
+                  Most Popular Choice
+                </div>
+              )}
+              
+              <div className="mb-10">
+                <h3 className="text-xl font-black uppercase tracking-tight mb-2">{pkg.title}</h3>
+                <p className="text-[#888888] text-[13px] font-medium leading-relaxed">{pkg.subtitle}</p>
+              </div>
+
+              <div className="mb-12">
+                <div className="flex items-baseline gap-2">
+                  <span className="text-4xl font-black tracking-tighter">{pkg.price}</span>
+                </div>
+                <p className="text-[9px] font-bold uppercase tracking-[0.3em] text-[#AAAAAA] mt-2 italic">Est. Project Value</p>
+              </div>
+
+              <div className="flex-grow mb-12">
+                <ul className="space-y-4">
+                  {pkg.features.map((feature, fIdx) => (
+                    <li key={fIdx} className="flex items-start gap-3">
+                      <CheckCircle className="w-4 h-4 text-black shrink-0 mt-0.5" />
+                      <span className="text-[12px] font-bold text-zinc-600 leading-tight">
+                        {feature}
+                      </span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+
+              <button 
+                onClick={() => navigate(`/profile/${creator.id}/checkout`, { state: { pkg, creator } })}
+                className={`w-full py-5 text-[11px] font-bold uppercase tracking-[0.3em] transition-all border-2 ${
+                  pkg.popular 
+                    ? 'bg-black text-white border-black hover:bg-zinc-800' 
+                    : 'bg-white text-black border-zinc-900 hover:bg-black hover:text-white'
+                }`}
+              >
+                Select Package
+              </button>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+
+      {/* ── Trust Section ── */}
+      <div className="max-w-7xl mx-auto px-6 py-12 border-t border-zinc-100">
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-12">
+          <div className="space-y-4">
+            <ShieldCheck className="w-8 h-8 text-black" />
+            <h4 className="text-[11px] font-bold uppercase tracking-[0.2em]">Secure Escrow</h4>
+            <p className="text-[12px] text-[#888888] leading-relaxed">Funds are held safely in escrow and only released upon your final approval of the work.</p>
+          </div>
+          <div className="space-y-4">
+            <Clock className="w-8 h-8 text-black" />
+            <h4 className="text-[11px] font-bold uppercase tracking-[0.2em]">Timeline Guarantees</h4>
+            <p className="text-[12px] text-[#888888] leading-relaxed">Milestone-based tracking ensures your project stays on schedule and updates are frequent.</p>
+          </div>
+          <div className="space-y-4">
+            <CreditCard className="w-8 h-8 text-black" />
+            <h4 className="text-[11px] font-bold uppercase tracking-[0.2em]">Split Payments</h4>
+            <p className="text-[12px] text-[#888888] leading-relaxed">Flexible payment options including 50/50 splits or full upfront for priority scheduling.</p>
+          </div>
+          <div className="space-y-4 text-center border-2 border-dashed border-zinc-100 p-8 flex flex-col items-center justify-center">
+            <MessageSquare className="w-8 h-8 text-[#AAAAAA] mb-4" />
+            <h4 className="text-[11px] font-bold uppercase tracking-[0.2em]">Need something else?</h4>
+            <button 
+              onClick={() => navigate(`/dm/${id}`)}
+              className="mt-4 text-[11px] font-bold uppercase tracking-[0.2em] underline underline-offset-8 hover:text-blue-600 transition-all"
+            >
+              Request Custom Quote
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/pages/CreatorProfilePage.jsx b/client/src/pages/CreatorProfilePage.jsx
index b052ba1..32100f7 100644
--- a/client/src/pages/CreatorProfilePage.jsx
+++ b/client/src/pages/CreatorProfilePage.jsx
@@ -1,103 +1,92 @@
 import { useState, useEffect } from 'react';
 import { useParams, Link, useNavigate } from 'react-router-dom';
 import { motion, AnimatePresence } from 'framer-motion';
+import { 
+  MessageSquare,
+  Video,
+  MapPin,
+  Layers,
+  Camera,
+  Quote,
+  Edit,
+  Trash2,
+  Plus,
+  X,
+  Upload,
+  Loader2,
+  Globe,
+  Instagram,
+  Eye,
+  TrendingUp,
+  BarChart2,
+  Users,
+  Bookmark,
+  MoreHorizontal,
+  Star,
+  UserPlus
+} from 'lucide-react';
 import { api } from '../lib/api';
+import { useAuth } from '../context/AuthContext';
 
-const DEMO_CREATOR = {
-  id: 'demo',
-  name: 'Atharv Gadekar',
-  username: 'atharvagadekar2906',
-  role: 'Creative Director & Cinematographer',
-  location: 'Mumbai / Global',
-  img: 'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=500&auto=format&fit=crop',
-  qualifications: ['Advanced Color Grading', 'Certified Drone Operator', '10+ Years Industry Exp.'],
-  pastWork: ['Nike', 'Sony', 'RedBull'],
-  brandDeals: ['Nike', 'Sony', 'RedBull', 'Apple'],
-  workflow: [
-    { step: 'Discovery', description: 'Deep dive into brand guidelines and visual identity.' },
-    { step: 'Pre-Production', description: 'Storyboarding, scouting, and preparation.' },
-    { step: 'Production', description: 'On-set execution with top-tier equipment.' },
-    { step: 'Post & Delivery', description: 'Color grading and final rendering.' }
-  ],
-  portfolio_items: [
-    { id: 1, title: 'Mandai', type: 'Cinematography', img: 'https://images.unsplash.com/photo-1518131672697-613becd4fab5?w=500&auto=format&fit=crop' },
-    { id: 2, title: 'Ethnicity', type: 'Direction', img: 'https://images.unsplash.com/photo-1555680202-c86f0e12f086?w=500&auto=format&fit=crop' },
-    { id: 3, title: 'Urban Flow', type: 'Photography', img: 'https://images.unsplash.com/photo-1600132806370-bf17e65e942f?w=500&auto=format&fit=crop' },
-  ],
-  packages: [
-    {
-      title: "Social / Lifestyle",
-      price: "₹5,000-₹12,000",
-      subtitle: "Perfect for personal branding & short reels",
-      features: [
-        "2-4 hours shoot time",
-        "Professional lighting setup",
-        "Basic color grading",
-        "2-3 edited short videos",
-        "Optimized for Instagram/TikTok",
-        "Web-ready delivery"
-      ]
-    },
-    {
-      title: "Event Coverage",
-      price: "₹15,000-₹25,000",
-      subtitle: "Best choice for corporate events & parties",
-      features: [
-        "6-8 hours event coverage",
-        "Dual camera setup for backup",
-        "Candid + staged shots",
-        "Advanced color correction",
-        "1-3 minute highlight reel",
-        "Raw footage available"
-      ],
-      popular: true
-    },
-    {
-      title: "Commercial Film",
-      price: "₹35,000-₹80,000+",
-      subtitle: "High-end visuals for brands & businesses",
-      features: [
-        "Full-day shoot (10-12 hours)",
-        "Pre-production & storyboarding",
-        "Cinema-grade RED/ARRI cameras",
-        "Professional crew & sound design",
-        "Cinematic color grading",
-        "Multiple export formats"
-      ]
-    }
-  ]
-};
+
+
+/* Derive readable initials from a username / display_name */
+function initials(str = 'A') {
+  return str.split(/[\s_]/).slice(0, 2).map(w => w[0]?.toUpperCase() ?? '').join('');
+}
 
 export default function CreatorProfilePage() {
-  const { id } = useParams();
-  const navigate = useNavigate();
-  const [creator, setCreator] = useState(null);
-  const [error, setError] = useState(null);
+  const { id }       = useParams();
+  const navigate     = useNavigate();
+  const { user }     = useAuth();
+
+  const [creator,       setCreator]       = useState(null);
+  const [error,         setError]         = useState(null);
   const [selectedMedia, setSelectedMedia] = useState(null);
-  const [showPricing, setShowPricing] = useState(false);
 
-  useEffect(() => {
-    const load = async () => {
-      if (id === 'demo') {
-        setCreator(DEMO_CREATOR);
-        window.scrollTo(0, 0);
-        return;
-      }
-      try {
-        const data = await api.get(`/creators/${id}`);
-        if (data?.data?.creator) {
-          setCreator(data.data.creator);
-        } else {
-          setError('Creator not found');
-        }
-      } catch (err) {
-        setError(err.message || 'Failed to load creator profile');
+  const [portfolioFilter, setPortfolioFilter] = useState('All');
+  const [editingProject, setEditingProject] = useState(null);
+  const [isSaving, setIsSaving] = useState(false);
+
+  /* Resolve 'me' → real user id, then fetch */
+  const load = async () => {
+    const resolvedId = id === 'me' ? user?.id : id;
+    if (!resolvedId) return;
+
+    try {
+      const data = await api.get(`/creators/${resolvedId}`);
+      if (data?.data?.creator) {
+        setCreator(data.data.creator);
+      } else {
+        setError('Creator not found');
       }
-    };
+    } catch (err) {
+      setError(err.message || 'Failed to load creator profile');
+    }
+  };
+
+  useEffect(() => {
     load();
     window.scrollTo(0, 0);
-  }, [id]);
+  }, [id, user?.id]);
 
+  const isOwnProfile = user && creator && user.id === creator.id;
+
+  /* ── Portfolio filter ── */
+  const portfolioProjects = creator?.portfolio_projects || [];
+  const filteredProjects = portfolioFilter === 'All'
+    ? portfolioProjects
+    : portfolioProjects.filter(project =>
+        project.items?.some(item =>
+          portfolioFilter === 'Video'
+            ? item.media_type === 'video'
+            : item.media_type !== 'video'
+        )
+      );
+
+  const [activeTab, setActiveTab] = useState('Projects');
+
+  /* ── Error / loading states ── */
   if (error) {
     return (
       <div className="h-screen flex flex-col items-center justify-center gap-6">
@@ -107,281 +96,523 @@ export default function CreatorProfilePage() {
     );
   }
 
-  if (!creator) return <div className="h-screen flex items-center justify-center">Loading...</div>;
+  if (!creator) {
+    return (
+      <div className="h-screen flex items-center justify-center">
+        <div className="w-8 h-8 border-2 border-black border-t-transparent rounded-full animate-spin" />
+      </div>
+    );
+  }
+
+  /* Derive display values from real profile fields */
+  const displayName  = creator.display_name || creator.username || 'Salih Turan';
+  const roleLabel    = creator.category || 'Creator';
+  const locationLabel = creator.location || 'Bursa, Turkey';
+  const bio          = creator.bio || 'A multi-disciplinary creative professional with a passion for pushing visual boundaries and capturing the essence of the moment.';
+  
+  const stats = [
+    { label: 'Total Views', value: '1.2M', icon: Eye },
+    { label: 'Recent Rank', value: '#12', icon: TrendingUp },
+    { label: 'All-Time Rank', value: '#45', icon: BarChart2 },
+    { label: 'Followers', value: '8.4K', icon: Users },
+  ];
+
+
+
 
   return (
-    <div className="bg-[#FAFAFA] min-h-screen pb-20 font-poppins">
-      {/* Hero Section */}
-      <div className="relative h-[40vh] md:h-[50vh] overflow-hidden">
-        <img 
-          src={creator.banner_url || 'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?auto=format&fit=crop&q=80'} 
-          alt="Banner" 
-          className="w-full h-full object-cover brightness-50 scale-105"
-        />
-        <div className="absolute inset-0 bg-gradient-to-b from-transparent via-black/20 to-[#FAFAFA]"></div>
-        
-        <Link to="/explore" className="absolute top-8 left-8 z-20 flex items-center gap-2 text-white/80 hover:text-white transition-colors">
-          <span className="text-xl">←</span> Back to Explore
+    <div className="bg-white min-h-screen pb-20 font-sans text-[#111111]">
+
+      {/* ── Minimal Top Navigation ── */}
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center bg-white sticky top-0 z-30 border-b border-zinc-50">
+        <Link to="/explore" className="text-[11px] font-bold uppercase tracking-[0.2em] text-zinc-400 hover:text-black transition-colors flex items-center gap-2">
+          <span>←</span> Back
         </Link>
+        <div className="flex items-center gap-4">
+          {isOwnProfile && (
+            <Link to="/profile/edit" className="text-[11px] font-bold uppercase tracking-[0.2em] text-zinc-400 hover:text-black transition-all">
+              Settings
+            </Link>
+          )}
+          <button className="text-zinc-400 hover:text-black">
+            <MoreHorizontal className="w-5 h-5" />
+          </button>
+        </div>
       </div>
 
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 -mt-32 relative z-10">
-        <div className="flex flex-col lg:flex-row gap-12">
-          
-          {/* Left Wing: Profile & Quick Info */}
-          <div className="lg:w-1/3">
+      {/* ── Profile Header Section ── */}
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-12 pb-10">
+        <div className="flex flex-col md:flex-row items-start justify-between gap-6">
+          <div className="flex flex-col md:flex-row items-start gap-6 flex-1">
+            {/* Circular Avatar */}
             <motion.div 
-              initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: 1, y: 0 }}
-              className="bg-white rounded-none p-8 shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-white"
+              initial={{ opacity: 0, scale: 0.9 }}
+              animate={{ opacity: 1, scale: 1 }}
+              className="relative shrink-0"
             >
-              <div className="relative -mt-20 mb-6 flex justify-center lg:justify-start">
-                <div className="h-32 w-32 md:h-40 md:w-40 rounded-none bg-white p-2 shadow-2xl overflow-hidden rotate-3 hover:rotate-0 transition-transform duration-500">
-                  <img src={creator.avatar_url || 'https://via.placeholder.com/150'} alt={creator.username} className="w-full h-full object-cover rounded-none" />
-                </div>
+              <div className="w-[100px] h-[100px] rounded-none border border-zinc-900 shadow-sm overflow-hidden bg-zinc-50">
+                {creator.avatar_url ? (
+                  <img 
+                    src={creator.avatar_url} 
+                    alt={displayName} 
+                    className="w-full h-full object-cover" 
+                  />
+                ) : (
+                  <div className="w-full h-full flex items-center justify-center text-2xl font-bold text-zinc-300">
+                    {initials(displayName)}
+                  </div>
+                )}
               </div>
+            </motion.div>
 
-              <div className="text-center lg:text-left mb-8">
-                <div className="flex items-center justify-center lg:justify-start gap-3 mb-1">
-                  <h1 className="text-3xl font-bold text-black tracking-tight">{creator.display_name || creator.username}</h1>
-                  <span className="bg-black text-[10px] text-white px-2 py-1 rounded-none font-bold uppercase tracking-wider">Verified</span>
+            {/* Name and Bio */}
+            <div className="flex-1">
+              <h1 className="text-[28px] md:text-[32px] font-bold text-zinc-900 leading-tight mb-2">{displayName}</h1>
+              <p className="text-zinc-500 text-[15px] leading-relaxed mb-4 max-w-xl">
+                {bio}
+              </p>
+              
+              {/* Location and Socials */}
+              <div className="flex flex-wrap items-center gap-4 text-zinc-400 text-[14px]">
+                <div className="flex items-center gap-1.5">
+                  <MapPin className="w-4 h-4" /> {locationLabel}
+                </div>
+                <div className="flex items-center gap-4">
+                  <a href="#" className="hover:text-zinc-900 transition-colors flex items-center gap-1.5">
+                    <Globe className="w-4 h-4" /> website
+                  </a>
+                  <a href="#" className="hover:text-zinc-900 transition-colors flex items-center gap-1.5">
+                    <Instagram className="w-4 h-4" /> instagram
+                  </a>
                 </div>
-                <p className="text-[#888] font-medium text-lg uppercase tracking-wide text-xs">{creator.role} • {creator.location || 'Remote'}</p>
               </div>
+            </div>
+          </div>
 
-              <div className="flex gap-3 mb-10">
-                <Link to={`/dm/${creator.id}`} target="_blank" rel="noopener noreferrer" className="flex-1 border border-zinc-200 text-black py-4 rounded-none font-bold text-sm text-center hover:bg-zinc-50 transition-all flex items-center justify-center">
-                  Message
-                </Link>
-                <button 
-                  onClick={() => setShowPricing(true)}
-                  className="flex-1 bg-black text-white py-4 rounded-none font-bold text-sm hover:bg-zinc-800 transition-all shadow-[0_4px_14px_rgba(0,0,0,0.1)]"
-                >
-                  Hire
-                </button>
-                <button className="px-5 py-4 rounded-none border border-zinc-200 hover:bg-zinc-50 transition-all text-lg flex items-center justify-center">
-                  ★
-                </button>
-              </div>
+          {/* Action Buttons */}
+          <div className="flex items-center gap-3 self-end md:self-start mt-4 md:mt-2">
+            <button 
+              onClick={() => navigate(`/profile/${creator.id}/pricing`)}
+              className="flex items-center gap-2 px-8 py-2.5 bg-black text-white border border-black rounded-none shadow-md text-[11px] font-bold uppercase tracking-[0.2em] hover:bg-zinc-800 transition-all"
+            >
+              Hire Me
+            </button>
+            <button 
+              onClick={() => navigate(`/dm/${creator.id}`)}
+              className="flex items-center gap-2 px-5 py-2.5 bg-white border border-zinc-900 rounded-none shadow-sm text-sm font-semibold hover:bg-zinc-50 transition-all"
+            >
+              <MessageSquare className="w-4 h-4" /> Message
+            </button>
+          </div>
+        </div>
+      </div>
 
-              <div className="space-y-6">
-                <div>
-                  <h3 className="text-[11px] font-bold text-[#BBB] uppercase tracking-[0.2em] mb-4">Qualification</h3>
-                  <ul className="space-y-3">
-                    {(creator.qualifications || ['Professional Creator']).map((q, i) => (
-                      <li key={i} className="flex items-center gap-3 text-sm text-zinc-600">
-                        <span className="h-1.5 w-1.5 bg-black rounded-none" />
-                        {q}
-                      </li>
-                    ))}
-                  </ul>
-                </div>
+      {/* ── Statistics Section ── */}
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-12">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          {/* Performance Card */}
+          <motion.div 
+            whileHover={{ y: -4 }}
+            className="bg-white rounded-none border border-transparent hover:border-zinc-900 shadow-none hover:shadow-sm p-6 flex items-center justify-between transition-all duration-300 cursor-default group"
+          >
+            <div className="flex flex-col gap-1">
+              <span className="text-[22px] font-bold text-zinc-900">1.2M</span>
+              <span className="text-[11px] font-semibold uppercase tracking-wider text-zinc-400">Total Views</span>
+            </div>
+            <div className="flex flex-col gap-1 text-center">
+              <span className="text-[22px] font-bold text-zinc-900">#12</span>
+              <span className="text-[11px] font-semibold uppercase tracking-wider text-zinc-400">30-day Rank</span>
+            </div>
+            <div className="flex flex-col gap-1 text-right">
+              <span className="text-[22px] font-bold text-zinc-900">#45</span>
+              <span className="text-[11px] font-semibold uppercase tracking-wider text-zinc-400">All-time Rank</span>
+            </div>
+          </motion.div>
 
-                <div className="pt-6 border-t border-zinc-100">
-                  <h3 className="text-[11px] font-bold text-[#BBB] uppercase tracking-[0.2em] mb-4">Past Work</h3>
-                  <div className="flex flex-wrap gap-2">
-                    {(creator.past_work || creator.pastWork || ['New Member']).map((pw, i) => (
-                      <span key={i} className="bg-zinc-100 text-zinc-600 px-3 py-1.5 rounded-none text-[10px] font-bold uppercase">
-                        {pw}
-                      </span>
-                    ))}
-                  </div>
-                </div>
-              </div>
-            </motion.div>
+          {/* Activity Card */}
+          <motion.div 
+            whileHover={{ y: -4 }}
+            className="bg-white rounded-none border border-transparent hover:border-zinc-900 shadow-none hover:shadow-sm p-6 flex items-center justify-between transition-all duration-300 cursor-default group"
+          >
+            <div className="flex flex-col gap-1 opacity-50">
+              <span className="text-[22px] font-bold text-zinc-900">0</span>
+              <span className="text-[11px] font-semibold uppercase tracking-wider text-zinc-400">Challenges Won</span>
+            </div>
+            <div className="flex flex-col gap-1 text-center">
+              <span className="text-[22px] font-bold text-zinc-900">14</span>
+              <span className="text-[11px] font-semibold uppercase tracking-wider text-zinc-400">Shortlisted</span>
+            </div>
+            <div className="flex flex-col gap-1 text-right opacity-50">
+              <span className="text-[22px] font-bold text-zinc-900">0</span>
+              <span className="text-[11px] font-semibold uppercase tracking-wider text-zinc-400">Meetups</span>
+            </div>
+          </motion.div>
+        </div>
+      </div>
 
-            {/* Brand Deals Wing */}
-            <motion.div 
-              initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ delay: 0.1 }}
-              className="bg-zinc-900 rounded-none p-8 mt-8 text-white"
+      {/* ── Image Gallery Grid ── */}
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex gap-4 mb-8">
+          {['All', 'Video', 'Photos'].map(f => (
+            <button
+              key={f}
+              onClick={() => setPortfolioFilter(f)}
+              className={`px-6 py-2 rounded-none text-[11px] font-bold uppercase tracking-widest transition-all ${
+                portfolioFilter === f 
+                ? 'bg-zinc-900 text-white shadow-lg' 
+                : 'bg-zinc-50 text-zinc-500 hover:bg-zinc-100 border border-zinc-200'
+              }`}
             >
-               <h3 className="text-[11px] font-bold text-zinc-500 uppercase tracking-[0.2em] mb-6">Trusted By</h3>
-               <div className="grid grid-cols-2 gap-4">
-                  {(creator.brandDeals || ['Community Partner']).map((brand, i) => (
-                    <div key={i} className="bg-zinc-800/50 rounded-none p-4 flex items-center justify-center text-sm font-bold text-zinc-400 hover:text-white transition-colors border border-zinc-800">
-                      {brand}
-                    </div>
-                  ))}
-               </div>
-            </motion.div>
+              {f}
+            </button>
+          ))}
+        </div>
+
+        {filteredProjects.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-32 text-center bg-zinc-50 rounded-none border border-dashed border-zinc-200">
+            <Layers className="w-16 h-16 text-zinc-200 mb-6" />
+            <p className="text-zinc-500 text-lg font-medium mb-8">
+              {isOwnProfile ? 'Your portfolio is currently empty.' : 'No projects found in this category.'}
+            </p>
+            {isOwnProfile && (
+              <Link to="/upload" className="bg-black text-white px-10 py-4 rounded-none text-xs font-bold uppercase tracking-widest hover:bg-zinc-800 transition-all shadow-xl">
+                Add Your First Project
+              </Link>
+            )}
           </div>
+        ) : (
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-[16px]">
+            {filteredProjects.map((project, i) => {
+              const firstItem = project.items?.[0] || {};
+              const hasMedia = firstItem.media_url;
 
-          {/* Right Wing: Main Content */}
-          <div className="lg:w-2/3 space-y-12">
-            
-            {/* Workflow Section */}
-            <section>
-              <h2 className="text-2xl font-bold text-black mb-8 flex items-center gap-4">
-                Stable Workflow 
-                <span className="h-[1px] flex-1 bg-zinc-200" />
-              </h2>
-              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-                {(creator.workflow || [
-                  { step: 'Strategy', description: 'Aligning vision with brand goals.' },
-                  { step: 'Production', description: 'High-end content creation.' },
-                  { step: 'Review', description: 'Collaborative feedback loop.' },
-                  { step: 'Delivery', description: 'Final assets in all formats.' }
-                ]).map((item, i) => (
+              return (
+                <motion.div
+                  key={project.id}
+                  initial={{ opacity: 0, y: 10 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true }}
+                  transition={{ delay: i * 0.02 }}
+                  className="group"
+                >
                   <motion.div 
-                    key={i}
-                    whileHover={{ y: -5 }}
-                    className="bg-white p-6 rounded-none border border-zinc-100 shadow-sm relative overflow-hidden"
+                    whileHover={{ scale: 1.01, y: -2 }}
+                    onClick={() => setSelectedMedia({
+                      ...project,
+                      mediaUrl: firstItem.media_url,
+                      mediaType: firstItem.media_type,
+                      items: project.items
+                    })}
+                    className="relative aspect-square rounded-none overflow-hidden bg-zinc-50 cursor-pointer hover:shadow-xl transition-all duration-300 border border-transparent hover:border-zinc-900"
                   >
-                    <div className="absolute -right-4 -top-4 text-zinc-50 text-6xl font-black">{i + 1}</div>
-                    <div className="relative z-10">
-                      <p className="text-[10px] font-bold text-black uppercase tracking-widest mb-2">{item.step}</p>
-                      <p className="text-sm text-zinc-500 leading-relaxed">{item.description}</p>
+                    {hasMedia ? (
+                      <>
+                        {firstItem.media_type === 'video' ? (
+                          <video
+                            src={firstItem.media_url}
+                            className="w-full h-full object-cover"
+                            muted
+                            playsInline
+                            onMouseEnter={e => e.target.play()}
+                            onMouseLeave={e => {
+                              e.target.pause();
+                              e.target.currentTime = 0;
+                            }}
+                          />
+                        ) : (
+                          <img
+                            src={firstItem.media_url}
+                            alt={project.title}
+                            loading="lazy"
+                            className="w-full h-full object-cover"
+                          />
+                        )}
+                      </>
+                    ) : (
+                      <div className="w-full h-full flex flex-col items-center justify-center p-8 text-center bg-zinc-50">
+                        <Camera className="w-10 h-10 text-zinc-200 mb-4" />
+                        <p className="text-[10px] font-bold text-zinc-400 uppercase tracking-widest">No Preview</p>
+                      </div>
+                    )}
+
+                    {/* Favorite Star Icon */}
+                    <div className="absolute top-3 left-3 z-10">
+                      <button className="p-1.5 bg-black/10 hover:bg-black/20 backdrop-blur-sm rounded-none text-white transition-all">
+                        <Star className="w-4 h-4" />
+                      </button>
                     </div>
-                  </motion.div>
-                ))}
-              </div>
-            </section>
-
-            {/* Portfolio Grid */}
-            <section>
-              <div className="flex justify-between items-end mb-8">
-                <h2 className="text-2xl font-bold text-black flex items-center gap-4 flex-1">
-                  Portfolio 
-                  <span className="h-[1px] flex-1 bg-zinc-200" />
-                </h2>
-                <div className="flex gap-4 ml-6">
-                   {['All', 'Video', 'Photos'].map(f => (
-                     <button key={f} className={`text-[10px] font-bold uppercase tracking-widest ${f === 'All' ? 'text-black border-b-2 border-black pb-1' : 'text-[#888]'}`}>
-                       {f}
-                     </button>
-                   ))}
-                </div>
-              </div>
-              
-              <div className="columns-1 md:columns-2 gap-6 space-y-6">
-                {(creator.portfolio_items || []).map((item, i) => (
-                  <motion.div 
-                    key={item.id}
-                    initial={{ opacity: 0, scale: 0.95 }}
-                    animate={{ opacity: 1, scale: 1 }}
-                    transition={{ delay: 0.1 * i }}
-                    onClick={() => setSelectedMedia(item)}
-                    className="break-inside-avoid relative group cursor-pointer overflow-hidden rounded-none bg-zinc-100"
-                  >
-                    <img 
-                      src={item.media_url || item.img || creator.avatar_url} 
-                      alt={item.title} 
-                      className="w-full grayscale group-hover:grayscale-0 transition-all duration-700 group-hover:scale-105" 
-                    />
-                    <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-all duration-500 p-6 flex flex-col justify-end">
-                      <p className="text-white font-bold text-xl mb-1">{item.title}</p>
-                      <p className="text-white/60 text-xs uppercase tracking-widest">{item.type}</p>
+                    
+                    {/* More Menu Overlay */}
+                    <div className="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity z-10">
+                      <button className="p-1.5 bg-white/90 backdrop-blur-sm rounded-none shadow-sm text-zinc-600 hover:text-black transition-all border border-zinc-200">
+                        <MoreHorizontal className="w-4 h-4" />
+                      </button>
                     </div>
                   </motion.div>
-                ))}
-              </div>
-            </section>
+                </motion.div>
+              );
+            })}
           </div>
-
-        </div>
+        )}
       </div>
 
-      {/* Lightbox Modal */}
+      {/* ── Lightbox (Minimalist) ── */}
       <AnimatePresence>
         {selectedMedia && (
-          <motion.div 
+          <motion.div
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
-            className="fixed inset-0 z-[100] bg-black/95 flex items-center justify-center p-4 backdrop-blur-xl"
+            className="fixed inset-0 z-[100] bg-white flex flex-col"
             onClick={() => setSelectedMedia(null)}
           >
-            <motion.div 
-              initial={{ scale: 0.9, opacity: 0 }}
-              animate={{ scale: 1, opacity: 1 }}
-              exit={{ scale: 0.9, opacity: 0 }}
-              className="max-w-6xl w-full aspect-video bg-zinc-900 rounded-none overflow-hidden relative shadow-2xl border border-zinc-800" 
-              onClick={e => e.stopPropagation()}
-            >
-              <button 
-                onClick={() => setSelectedMedia(null)}
-                className="absolute top-8 right-8 text-white p-3 z-10 bg-black/50 backdrop-blur-md rounded-none hover:bg-black transition-all border border-white/10"
-              >
-                ✕
-              </button>
-              <img src={selectedMedia.media_url || selectedMedia.img || creator.avatar_url} alt={selectedMedia.title} className="w-full h-full object-cover" />
-              <div className="absolute bottom-0 left-0 right-0 p-12 bg-gradient-to-t from-black via-transparent to-transparent">
-                  <h2 className="text-4xl font-bold text-white mb-2">{selectedMedia.title}</h2>
-                  <p className="text-white/60 uppercase tracking-widest text-sm">{selectedMedia.media_type || selectedMedia.type}</p>
+            <div className="flex justify-between items-center px-8 py-6 shrink-0 border-b border-zinc-50">
+              <div className="flex items-center gap-4">
+                <div className="w-10 h-10 rounded-none border border-zinc-900 overflow-hidden">
+                  <img src={creator.avatar_url} className="w-full h-full object-cover" alt="" />
+                </div>
+                <div>
+                  <h4 className="font-bold text-sm">{displayName}</h4>
+                  <p className="text-[10px] text-zinc-400 uppercase font-bold tracking-widest">{roleLabel}</p>
+                </div>
               </div>
-            </motion.div>
+              <div className="flex items-center gap-4">
+                <button 
+                  onClick={() => navigate(`/dm/${creator.id}`)}
+                  className="bg-black text-white px-6 py-2 rounded-none text-xs font-bold hover:bg-zinc-800 transition-all"
+                >
+                  Hire Me
+                </button>
+                <button 
+                  onClick={() => setSelectedMedia(null)}
+                  className="p-2 hover:bg-zinc-100 rounded-none transition-all"
+                >
+                  <X className="w-6 h-6" />
+                </button>
+              </div>
+            </div>
+            
+            <div className="flex-1 overflow-y-auto custom-scrollbar p-8 md:p-12" onClick={e => e.stopPropagation()}>
+              <div className="max-w-5xl mx-auto">
+                <div className="mb-12">
+                  <h2 className="text-4xl font-bold text-zinc-900 mb-4">{selectedMedia.title}</h2>
+                  <p className="text-zinc-500 text-lg leading-relaxed max-w-2xl">{selectedMedia.description}</p>
+                </div>
+                
+                <div className="space-y-20">
+                  {selectedMedia.items?.map((item, idx) => (
+                    <div key={idx} className="relative w-full flex justify-center">
+                      {item.media_type === 'video' ? (
+                        <video 
+                          src={item.media_url} 
+                          controls 
+                          className="max-w-full max-h-[85vh] object-contain rounded-none shadow-md border border-zinc-100" 
+                        />
+                      ) : (
+                        <img 
+                          src={item.media_url} 
+                          alt="" 
+                          className="max-w-full max-h-[85vh] object-contain rounded-none shadow-md border border-zinc-100" 
+                        />
+                      )}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
           </motion.div>
         )}
       </AnimatePresence>
 
-      {/* Pricing Modal */}
+      {/* ── Edit Project Modal (Reusing existing logic) ── */}
       <AnimatePresence>
-        {showPricing && (
-          <motion.div 
+        {editingProject && (
+          <motion.div
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
-            className="fixed inset-0 z-[100] bg-black/95 flex items-center justify-center p-4 backdrop-blur-md font-poppins"
-            onClick={() => setShowPricing(false)}
+            className="fixed inset-0 z-[110] bg-white/95 flex items-center justify-center p-4 backdrop-blur-md"
+            onClick={() => setEditingProject(null)}
           >
-            <motion.div 
-              initial={{ scale: 0.95, opacity: 0, y: 20 }}
+            <motion.div
+              initial={{ scale: 0.98, opacity: 0, y: 10 }}
               animate={{ scale: 1, opacity: 1, y: 0 }}
-              exit={{ scale: 0.95, opacity: 0, y: 20 }}
-              className="max-w-5xl w-full my-auto bg-[#0a0a0a] rounded-3xl overflow-hidden relative shadow-2xl p-6 md:p-8 max-h-[95vh] flex flex-col" 
+              exit={{ scale: 0.98, opacity: 0, y: 10 }}
+              className="max-w-4xl w-full bg-white rounded-3xl overflow-hidden relative shadow-2xl p-10 border border-zinc-100 max-h-[90vh] flex flex-col"
               onClick={e => e.stopPropagation()}
             >
-              <div className="flex justify-between items-center mb-8 shrink-0">
-                <button 
-                  onClick={() => setShowPricing(false)}
-                  className="text-white/70 text-[10px] font-bold tracking-widest uppercase hover:text-white flex items-center gap-2 bg-white/5 px-4 py-2 rounded-full border border-white/10 transition-all hover:bg-white/10"
+              <div className="flex justify-between items-center mb-10 shrink-0">
+                <h2 className="text-2xl font-bold tracking-tight">Edit Project</h2>
+                <button
+                  onClick={() => setEditingProject(null)}
+                  className="p-2 hover:bg-zinc-100 rounded-full transition-all"
                 >
-                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
-                  Back
+                  <X className="w-6 h-6" />
                 </button>
-                <h2 className="text-xl md:text-2xl font-bold text-white text-center absolute left-1/2 -translate-x-1/2 tracking-wide">Photography</h2>
               </div>
-              
-              <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 md:gap-6 overflow-y-auto pb-2 custom-scrollbar pt-2">
-                {(creator.packages || []).map((pkg, i) => (
-                  <div key={i} className={`rounded-2xl p-6 md:p-8 flex flex-col relative ${pkg.popular ? 'bg-white text-black scale-[1.02] shadow-2xl z-10' : 'bg-[#111] border border-white/5 text-white'}`}>
-                    {pkg.popular && (
-                      <span className="absolute top-4 right-4 md:top-6 md:right-6 bg-[#2a2a2a] text-[#fcd53f] text-[9px] font-bold px-3 py-1 uppercase tracking-widest rounded-full flex items-center gap-1.5 shadow-lg z-20">
-                        <span>★</span> Popular
-                      </span>
-                    )}
-                    <div className="mb-6 relative">
-                      <p className={`text-[10px] tracking-[0.2em] uppercase font-bold mb-3 ${pkg.popular ? 'text-gray-500' : 'text-gray-400'}`}>{pkg.title}</p>
-                      <h3 className={`text-3xl md:text-4xl font-black mb-3 tracking-tighter leading-none ${pkg.popular ? 'text-black' : 'text-white'}`}>{pkg.price}</h3>
-                      <p className={`text-xs ${pkg.popular ? 'text-gray-600' : 'text-gray-400'}`}>{pkg.subtitle}</p>
+
+              <div className="flex-1 overflow-y-auto custom-scrollbar pr-4">
+                <form id="edit-project-form" onSubmit={async (e) => {
+                  e.preventDefault();
+                  setIsSaving(true);
+                  try {
+                    await api.patch(`/upload/projects/${editingProject.id}`, {
+                      title: editingProject.title,
+                      description: editingProject.description || null,
+                      category: editingProject.category
+                    });
+                    await load();
+                    setEditingProject(null);
+                  } catch (err) {
+                    alert(err.message || 'Failed to update project');
+                  } finally {
+                    setIsSaving(false);
+                  }
+                }} className="space-y-8 mb-12">
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+                    <div className="space-y-3">
+                      <label className="text-[11px] font-bold uppercase tracking-widest text-zinc-400 ml-1">Title</label>
+                      <input 
+                        type="text" 
+                        value={editingProject.title}
+                        onChange={e => setEditingProject({...editingProject, title: e.target.value})}
+                        className="w-full bg-zinc-50 border border-zinc-100 px-6 py-4 rounded-2xl text-sm focus:outline-none focus:ring-2 focus:ring-black/5 transition-all"
+                      />
                     </div>
-                    
-                    <ul className="space-y-3 mb-6 flex-1">
-                      {pkg.features.map((f, j) => (
-                        <li key={j} className="flex items-start gap-3 text-xs font-medium">
-                          <div className={`mt-0.5 shrink-0 ${pkg.popular ? 'text-black' : 'text-gray-400'}`}>
-                            <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7"/></svg>
+                    <div className="space-y-3">
+                      <label className="text-[11px] font-bold uppercase tracking-widest text-zinc-400 ml-1">Category</label>
+                      <select 
+                        value={editingProject.category}
+                        onChange={e => setEditingProject({...editingProject, category: e.target.value})}
+                        className="w-full bg-zinc-50 border border-zinc-100 px-6 py-4 rounded-2xl text-sm focus:outline-none focus:ring-2 focus:ring-black/5 transition-all appearance-none"
+                      >
+                        {['Cinematography', 'Photography', '3D Motion', 'Design', 'Illustration', 'Animation', 'Graphic Design', 'VFX'].map(c => (
+                          <option key={c} value={c}>{c}</option>
+                        ))}
+                      </select>
+                    </div>
+                  </div>
+                  <div className="space-y-3">
+                    <label className="text-[11px] font-bold uppercase tracking-widest text-zinc-400 ml-1">Description</label>
+                    <textarea 
+                      rows={4}
+                      value={editingProject.description || ''}
+                      onChange={e => setEditingProject({...editingProject, description: e.target.value})}
+                      className="w-full bg-zinc-50 border border-zinc-100 px-6 py-4 rounded-2xl text-sm focus:outline-none focus:ring-2 focus:ring-black/5 transition-all resize-none"
+                    />
+                  </div>
+                </form>
+
+                {/* Media Management */}
+                <div className="space-y-8">
+                  <div className="flex justify-between items-center">
+                    <h3 className="text-sm font-bold">Project Media</h3>
+                    <label className="flex items-center gap-2 text-[11px] font-bold uppercase tracking-widest text-black cursor-pointer hover:bg-zinc-50 transition-all px-6 py-3 border border-zinc-200 rounded-full">
+                      <Plus className="w-4 h-4" /> Add Media
+                      <input 
+                        type="file" 
+                        multiple 
+                        className="hidden" 
+                        onChange={async (e) => {
+                          if (!e.target.files?.length) return;
+                          const formData = new FormData();
+                          Array.from(e.target.files).forEach(file => formData.append('media', file));
+                          formData.append('project_id', editingProject.id);
+                          formData.append('category', editingProject.category);
+                          formData.append('title', editingProject.title);
+                          
+                          setIsSaving(true);
+                          try {
+                            await api.post('/upload/portfolio', formData, {
+                              headers: { 'Content-Type': 'multipart/form-data' }
+                            });
+                            await load();
+                            const res = await api.get(`/creators/${creator.id}`);
+                            const updated = res.data.creator.portfolio_projects.find(p => p.id === editingProject.id);
+                            setEditingProject(updated);
+                          } catch (err) {
+                            alert(err.message || 'Upload failed');
+                          } finally {
+                            setIsSaving(false);
+                          }
+                        }}
+                      />
+                    </label>
+                  </div>
+
+                  <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-6">
+                    {editingProject.items?.map((item, idx) => (
+                      <div key={item.id} className="relative group aspect-square bg-zinc-50 border border-zinc-100 rounded-2xl overflow-hidden shadow-sm">
+                        {item.media_type === 'video' ? (
+                          <div className="w-full h-full flex items-center justify-center">
+                            <Video className="w-8 h-8 text-zinc-200" />
                           </div>
-                          <span className={pkg.popular ? 'text-gray-800' : 'text-gray-300'}>{f}</span>
-                        </li>
-                      ))}
-                    </ul>
-                    
-                    <button 
-                      onClick={() => navigate('/checkout', { state: { pkg, creator } })}
-                      className={`w-full py-3 font-bold uppercase tracking-widest text-[10px] rounded-full transition-all mt-auto ${pkg.popular ? 'bg-black text-white hover:bg-gray-800' : 'bg-white/10 text-white hover:bg-white/20'}`}
-                    >
-                      Select Package
-                    </button>
+                        ) : (
+                          <img src={item.media_url} className="w-full h-full object-cover" alt="" />
+                        )}
+                        <button
+                          onClick={async () => {
+                            if (!confirm('Remove this item?')) return;
+                            try {
+                              await api.delete(`/upload/portfolio/${item.id}`);
+                              setEditingProject(prev => ({
+                                ...prev,
+                                items: prev.items.filter(i => i.id !== item.id)
+                              }));
+                              await load();
+                            } catch (err) {
+                              alert(err.message || 'Delete failed');
+                            }
+                          }}
+                          className="absolute top-3 right-3 p-2 bg-white/90 text-red-500 rounded-full opacity-0 group-hover:opacity-100 transition-all hover:bg-red-500 hover:text-white shadow-lg"
+                        >
+                          <Trash2 className="w-4 h-4" />
+                        </button>
+                      </div>
+                    ))}
                   </div>
-                ))}
+                </div>
+              </div>
+
+              <div className="mt-10 pt-8 border-t border-zinc-100 flex justify-between items-center shrink-0">
+                <button
+                  onClick={async () => {
+                    if (!confirm('Delete this entire project? This cannot be undone.')) return;
+                    try {
+                      await api.delete(`/upload/projects/${editingProject.id}`);
+                      await load();
+                      setEditingProject(null);
+                    } catch (err) {
+                      alert(err.message || 'Failed to delete project');
+                    }
+                  }}
+                  className="flex items-center gap-2 text-red-500 text-[11px] font-bold uppercase tracking-widest hover:text-red-700 transition-all"
+                >
+                  <Trash2 className="w-4 h-4" /> Delete Project
+                </button>
+
+                <div className="flex gap-4">
+                  <button
+                    onClick={() => setEditingProject(null)}
+                    className="px-8 py-3.5 text-[11px] font-bold uppercase tracking-widest border border-zinc-200 rounded-full hover:bg-zinc-50 transition-all"
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    form="edit-project-form"
+                    type="submit"
+                    disabled={isSaving}
+                    className="px-10 py-3.5 text-[11px] font-bold uppercase tracking-widest bg-black text-white rounded-full hover:bg-zinc-800 transition-all flex items-center gap-2 disabled:opacity-50 shadow-lg shadow-black/10"
+                  >
+                    {isSaving ? <Loader2 className="w-4 h-4 animate-spin" /> : 'Save Changes'}
+                  </button>
+                </div>
               </div>
             </motion.div>
           </motion.div>
         )}
       </AnimatePresence>
+
     </div>
   );
 }
diff --git a/client/src/pages/DirectMessagePage.jsx b/client/src/pages/DirectMessagePage.jsx
index 7987c18..40efc9f 100644
--- a/client/src/pages/DirectMessagePage.jsx
+++ b/client/src/pages/DirectMessagePage.jsx
@@ -1,19 +1,20 @@
 import { useState, useRef, useEffect } from 'react';
-import { useParams, Link } from 'react-router-dom';
+import { useParams, Link, useNavigate } from 'react-router-dom';
 import { motion } from 'framer-motion';
+import { api } from '../lib/api';
 
-const MOCK_CREATOR = {
-  name: 'Atharv Gadekar',
-  username: '@atharvagadekar2906',
-  role: 'Cinematographer & Director',
-  location: 'Mumbai, India',
-  img: 'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=500&auto=format&fit=crop',
-  bio: 'Specializing in high-end commercial videography and aesthetic brand storytelling. Let\'s create something beautiful together.',
-  rate: '₹5,000/hr'
-};
+
+
+function initials(str = 'A') {
+  return str.split(/[\s_]/).slice(0, 2).map(w => w[0]?.toUpperCase() ?? '').join('');
+}
 
 export default function DirectMessagePage() {
   const { id } = useParams();
+  const navigate = useNavigate();
+  const [creator, setCreator] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
   const [messages, setMessages] = useState([
     { id: 1, text: "Hey! I saw your portfolio and I love your work.", sender: 'me', time: '10:41 AM', status: 'read' },
     { id: 2, text: "Are you taking on new projects? We have a commercial shoot next month.", sender: 'me', time: '10:42 AM', status: 'read' },
@@ -22,6 +23,22 @@ export default function DirectMessagePage() {
   const [newMessage, setNewMessage] = useState("");
   const messagesEndRef = useRef(null);
 
+  useEffect(() => {
+    if (!id) return;
+    const loadCreator = async () => {
+      try {
+        const { data } = await api.get(`/creators/${id}`);
+        setCreator(data.creator);
+      } catch (err) {
+        console.error('Failed to load creator:', err);
+        setError('Creator not found');
+      } finally {
+        setLoading(false);
+      }
+    };
+    loadCreator();
+  }, [id]);
+
   const scrollToBottom = () => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   };
@@ -54,7 +71,7 @@ export default function DirectMessagePage() {
         setTimeout(() => {
           setMessages(prev => [...prev, {
             id: Date.now() + 1,
-            text: "That sounds interesting! Could you share the brief?",
+            text: `Hi! Thank you for reaching out. Let's discuss this further.`,
             sender: 'them',
             time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
           }]);
@@ -63,55 +80,99 @@ export default function DirectMessagePage() {
     }, 1000);
   };
 
+  if (loading) return <div className="h-screen flex items-center justify-center bg-white"><div className="w-8 h-8 border-2 border-black border-t-transparent rounded-full animate-spin" /></div>;
+  if (error) return <div className="h-screen flex flex-col items-center justify-center bg-white"><h1 className="text-2xl font-bold mb-4">{error}</h1><Link to="/messages" className="bg-black text-white px-6 py-2">Back to Messages</Link></div>;
+
+  const displayName = creator.display_name || creator.username;
+  const username = `@${creator.username}`;
+  const role = creator.category || 'Creator';
+  const location = creator.location || 'Remote';
+  const bio = creator.bio || 'Multi-disciplinary creative professional.';
+  const rate = creator.min_budget ? `₹${creator.min_budget}/hr` : 'Contact for Rates';
+
   return (
-    <div className="flex flex-col lg:flex-row h-[calc(100vh-60px)] bg-white font-['Space_Grotesk'] overflow-hidden">
+    <div className="flex flex-col lg:flex-row h-[calc(100vh-60px)] bg-white overflow-hidden">
       
       {/* Left Sidebar - Creator Profile */}
-      <div className="w-full lg:w-[35%] lg:min-w-[350px] lg:max-w-[450px] bg-white border-r border-zinc-200 p-8 md:p-12 flex flex-col justify-center relative shrink-0">
-        <Link to={`/profile/${id || 'demo'}`} className="absolute top-8 left-8 text-xs font-bold uppercase tracking-widest text-zinc-500 hover:text-black flex items-center gap-2 transition-colors">
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
-          Back to Profile
+      <div className="w-full lg:w-[30%] lg:min-w-[320px] lg:max-w-[400px] bg-white border-r border-[#F0F0F0] p-8 md:p-10 flex flex-col justify-center relative shrink-0">
+        <Link to={`/profile/${id}`} className="absolute top-8 left-8 text-[10px] uppercase tracking-[0.2em] text-[#999] hover:text-[#111] flex items-center gap-2 transition-colors">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
+          Back
         </Link>
 
-        <div className="flex flex-col items-center text-center mt-8">
+        <div className="flex flex-col items-center text-center mt-4">
           <div className="relative mb-6">
-            <img src={MOCK_CREATOR.img} alt={MOCK_CREATOR.name} className="w-32 h-32 md:w-40 md:h-40 object-cover rounded-full border-4 border-black shadow-[8px_8px_0px_rgba(0,0,0,1)]" />
-            <span className="absolute bottom-2 right-2 w-5 h-5 bg-green-500 border-2 border-black rounded-full shadow-[2px_2px_0px_rgba(0,0,0,1)]"></span>
+            <div className="w-24 h-24 md:w-28 md:h-28 rounded-full border border-[#EEE] overflow-hidden bg-[#FAFAFA] flex items-center justify-center">
+              {creator.avatar_url ? (
+                <img src={creator.avatar_url} alt={displayName} className="w-full h-full object-cover" />
+              ) : (
+                <span className="text-[#CCC] text-3xl font-light">{initials(displayName)}</span>
+              )}
+            </div>
+            <span className="absolute bottom-1 right-1 w-3 h-3 bg-green-500 border-2 border-white rounded-full"></span>
           </div>
           
-          <h1 className="text-3xl font-black text-black tracking-tighter mb-1">{MOCK_CREATOR.name}</h1>
-          <p className="text-sm font-bold text-zinc-500 mb-2">{MOCK_CREATOR.username}</p>
-          <div className="inline-block bg-black text-white text-[10px] font-bold uppercase tracking-widest px-3 py-1 mb-6 shadow-[4px_4px_0px_#0540F2]">
-            {MOCK_CREATOR.role}
+          <h1 className="text-xl font-medium text-[#111] tracking-tight mb-0.5">{displayName}</h1>
+          <p className="text-xs text-[#999] mb-4 font-normal">{username}</p>
+          
+          <div className="text-[10px] text-[#999] uppercase tracking-[0.2em] mb-8 font-normal">
+            {role}
           </div>
           
-          <p className="text-sm text-zinc-600 font-medium leading-relaxed mb-8 max-w-xs">
-            {MOCK_CREATOR.bio}
+          <p className="text-xs text-[#666] font-normal leading-relaxed mb-10 max-w-[240px]">
+            {bio}
           </p>
 
-          <div className="flex w-full max-w-xs justify-between items-center border-t border-b border-zinc-200 py-4">
+          <div className="flex w-full max-w-[240px] justify-between items-center border-t border-b border-[#F5F5F5] py-5 mb-8">
             <div className="text-left">
-              <p className="text-[10px] font-bold text-zinc-400 uppercase tracking-widest">Location</p>
-              <p className="text-sm font-bold text-black">{MOCK_CREATOR.location}</p>
+              <p className="text-[9px] text-[#999] uppercase tracking-widest mb-1">Location</p>
+              <p className="text-xs text-[#111] font-normal">{location}</p>
             </div>
             <div className="text-right">
-              <p className="text-[10px] font-bold text-zinc-400 uppercase tracking-widest">Base Rate</p>
-              <p className="text-sm font-bold text-black">{MOCK_CREATOR.rate}</p>
+              <p className="text-[9px] text-[#999] uppercase tracking-widest mb-1">Base Rate</p>
+              <p className="text-xs text-[#111] font-normal">{rate}</p>
             </div>
           </div>
+
+          {/* Action Buttons */}
+          <div className="space-y-2.5 w-full max-w-[240px]">
+            <a
+              href="https://meet.google.com/new"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="w-full flex items-center justify-center gap-2 bg-transparent text-[#111] text-[10px] font-normal uppercase tracking-[0.15em] py-2.5 border border-[#E5E5E5] hover:bg-[#FAFAFA] transition-colors"
+            >
+              Start Google Meet
+            </a>
+            <button
+              onClick={() => navigate('/checkout', { state: { creator: MOCK_CREATOR, pkg: null } })}
+              className="w-full flex items-center justify-center gap-2 bg-transparent text-[#111] text-[10px] font-normal uppercase tracking-[0.15em] py-2.5 border border-[#E5E5E5] hover:bg-[#FAFAFA] transition-colors"
+            >
+              Fix a Deal
+            </button>
+          </div>
         </div>
       </div>
 
       {/* Right Side - Chat Interface */}
-      <div className="flex-1 flex flex-col bg-[#111] relative h-full">
+      <div className="flex-1 flex flex-col bg-white relative h-full">
         
         {/* Chat Header */}
-        <header className="bg-[#0a0a0a] border-b border-white/5 px-6 py-4 flex justify-between items-center shrink-0 shadow-md z-10">
+        <header className="bg-white border-b border-[#F0F0F0] px-8 py-4 flex justify-between items-center shrink-0 z-10">
           <div className="flex items-center gap-3">
-            <img src={MOCK_CREATOR.img} alt={MOCK_CREATOR.name} className="w-10 h-10 object-cover rounded-full border border-white/10" />
+            <div className="w-8 h-8 rounded-full border border-[#EEE] overflow-hidden bg-[#FAFAFA] flex items-center justify-center">
+              {creator.avatar_url ? (
+                <img src={creator.avatar_url} alt={displayName} className="w-full h-full object-cover" />
+              ) : (
+                <span className="text-[#CCC] text-[10px]">{initials(displayName)}</span>
+              )}
+            </div>
             <div>
-              <h2 className="font-bold text-white text-sm tracking-wide">{MOCK_CREATOR.name}</h2>
-              <p className="text-[10px] text-green-500 font-bold uppercase tracking-widest">Online</p>
+              <h2 className="font-medium text-[#111] text-sm">{displayName}</h2>
+              <div className="flex items-center gap-1.5">
+                <span className="w-1.5 h-1.5 bg-green-500 rounded-full"></span>
+                <p className="text-[10px] text-[#999] uppercase tracking-widest">Online</p>
+              </div>
             </div>
           </div>
           <div className="flex gap-4 items-center">
@@ -119,19 +180,18 @@ export default function DirectMessagePage() {
               href="https://meet.google.com/new" 
               target="_blank" 
               rel="noopener noreferrer"
-              className="flex items-center gap-2 bg-[#0540F2] text-white px-4 py-2 rounded-full text-xs font-bold uppercase tracking-widest hover:bg-blue-600 transition-colors shadow-lg"
+              className="text-[10px] text-[#999] uppercase tracking-widest border border-[#E5E5E5] px-4 py-1.5 hover:bg-[#FAFAFA] transition-colors"
             >
-              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
               Meet
             </a>
-            <button className="text-white/40 hover:text-white transition-colors">
-              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg>
+            <button className="text-[#CCC] hover:text-[#111] transition-colors">
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg>
             </button>
           </div>
         </header>
 
         {/* Chat Messages */}
-        <div className="flex-1 overflow-y-auto p-6 md:p-10 space-y-6 custom-scrollbar" style={{ backgroundImage: "url('https://transparenttextures.com/patterns/cubes.png')", backgroundBlendMode: 'overlay', opacity: 0.95 }}>
+        <div className="flex-1 overflow-y-auto p-8 md:p-12 space-y-6 custom-scrollbar">
           {messages.map((msg) => (
             <motion.div 
               key={msg.id}
@@ -139,14 +199,13 @@ export default function DirectMessagePage() {
               animate={{ opacity: 1, y: 0 }}
               className={`flex ${msg.sender === 'me' ? 'justify-end' : 'justify-start'}`}
             >
-              <div className={`max-w-[75%] md:max-w-[60%] rounded-2xl px-5 py-3 relative shadow-md ${msg.sender === 'me' ? 'bg-[#0540F2] text-white rounded-tr-sm' : 'bg-[#222] border border-white/5 text-white rounded-tl-sm'}`}>
-                <p className="text-sm leading-relaxed font-medium">{msg.text}</p>
-                <div className={`flex items-center gap-1.5 mt-2 justify-end ${msg.sender === 'me' ? 'text-blue-200' : 'text-zinc-400'}`}>
-                  <span className="text-[9px] uppercase font-bold tracking-wider">{msg.time}</span>
+              <div className={`max-w-[70%] md:max-w-[50%] rounded-lg px-4 py-2.5 relative ${msg.sender === 'me' ? 'bg-[#3B50E0] text-white' : 'bg-white border border-[#E5E5E5] text-[#111]'}`}>
+                <p className="text-sm leading-relaxed font-normal">{msg.text}</p>
+                <div className={`flex items-center gap-1.5 mt-1.5 justify-end ${msg.sender === 'me' ? 'text-blue-100/60' : 'text-[#CCC]'}`}>
+                  <span className="text-[8px] uppercase tracking-wider font-normal">{msg.time}</span>
                   {msg.sender === 'me' && (
-                    <svg className={`w-3.5 h-3.5 ${msg.status === 'read' ? 'text-[#F072F2]' : msg.status === 'delivered' ? 'text-white' : 'text-white/50'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
-                      {msg.status !== 'sent' && <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 18l4 4L19 12" className="opacity-70" />}
+                    <svg className={`w-3 h-3 ${msg.status === 'read' ? 'text-white' : 'opacity-40'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                     </svg>
                   )}
                 </div>
@@ -157,26 +216,24 @@ export default function DirectMessagePage() {
         </div>
 
         {/* Chat Input */}
-        <div className="bg-[#0a0a0a] border-t border-white/5 p-4 shrink-0">
-          <form onSubmit={handleSend} className="w-full flex items-center gap-3">
-            <button type="button" className="p-2 text-white/40 hover:text-white transition-colors shrink-0">
-              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/></svg>
+        <div className="bg-white border-t border-[#F0F0F0] p-6 shrink-0">
+          <form onSubmit={handleSend} className="w-full flex items-center gap-4">
+            <button type="button" className="text-[#CCC] hover:text-[#111] transition-colors shrink-0">
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/></svg>
             </button>
-            <div className="flex-1 bg-[#1a1a1a] rounded-full px-4 py-1 flex items-center border border-white/10 focus-within:border-[#0540F2] transition-colors">
-              <input 
-                type="text" 
-                value={newMessage}
-                onChange={(e) => setNewMessage(e.target.value)}
-                placeholder="Type your message..."
-                className="flex-1 bg-transparent border-none text-white py-2 outline-none text-sm font-medium w-full"
-              />
-            </div>
+            <input 
+              type="text" 
+              value={newMessage}
+              onChange={(e) => setNewMessage(e.target.value)}
+              placeholder="Type your message..."
+              className="flex-1 bg-transparent border-none text-[#111] py-2 outline-none text-sm font-normal"
+            />
             <button 
               type="submit" 
               disabled={!newMessage.trim()}
-              className="w-10 h-10 bg-white text-black rounded-full hover:bg-[#0540F2] hover:text-white disabled:opacity-50 disabled:hover:bg-white disabled:hover:text-black transition-colors shadow-lg flex items-center justify-center shrink-0"
+              className="text-[#111] disabled:text-[#DDD] transition-colors flex items-center justify-center shrink-0"
             >
-              <svg className="w-4 h-4 ml-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/></svg>
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/></svg>
             </button>
           </form>
         </div>
diff --git a/client/src/pages/EditProfilePage.jsx b/client/src/pages/EditProfilePage.jsx
index d5633c6..bb49d1e 100644
--- a/client/src/pages/EditProfilePage.jsx
+++ b/client/src/pages/EditProfilePage.jsx
@@ -2,6 +2,19 @@ import { useState, useRef, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { motion, AnimatePresence } from 'framer-motion';
 import { Helmet } from 'react-helmet-async';
+import { 
+  Instagram, 
+  Twitter, 
+  Linkedin, 
+  Globe, 
+  Plus, 
+  Info,
+  DollarSign,
+  Users,
+  Target,
+  Hash,
+  Briefcase
+} from 'lucide-react';
 import { api } from '../lib/api';
 import { useAuth } from '../context/AuthContext';
 
@@ -44,6 +57,7 @@ export default function EditProfilePage() {
     banner_url: '',
     instagram: '',
     twitter: '',
+    linkedin: '',
     website: '',
     min_budget: 0,
     max_budget: 10000,
@@ -78,6 +92,7 @@ export default function EditProfilePage() {
           banner_url: creator.banner_url || '',
           instagram: creator.instagram || '',
           twitter: creator.twitter || '',
+          linkedin: creator.linkedin || '',
           website: creator.website || '',
           min_budget: creator.min_budget || 0,
           max_budget: creator.max_budget || 10000,
@@ -272,6 +287,7 @@ export default function EditProfilePage() {
         location:      formData.location,
         instagram:     formData.instagram,
         twitter:       formData.twitter,
+        linkedin:      formData.linkedin,
         website:       formData.website,
         avatar_url:    avatarUrl,
         banner_url:    bannerUrl,
@@ -289,7 +305,7 @@ export default function EditProfilePage() {
       await api.patch('/creators/profile', payload);
       setMessage({ type: 'success', text: 'Profile updated successfully!' });
       setTimeout(() => {
-        navigate(`/dashboard/${user.role}`);
+        navigate('/profile/me');
       }, 1500);
     } catch (err) {
       setMessage({ type: 'error', text: err.message || 'Failed to update profile' });
@@ -298,17 +314,48 @@ export default function EditProfilePage() {
     }
   };
 
-  const inputClass = (field) =>
-    `w-full border-b py-3 focus:outline-none transition-colors bg-transparent text-black placeholder:text-[#CCC] ${
-      errors[field] ? 'border-red-400' : 'border-[#DDD] focus:border-black'
-    }`;
+  const handleCancel = () => navigate('/profile/me');
+
+  const cardStyle = {
+    background: '#FFFFFF',
+    border: '1px solid #E5E7EB',
+    borderRadius: '8px',
+    padding: '32px',
+    boxShadow: '0px 1px 2px rgba(0, 0, 0, 0.05), 0px 0px 0px 1px rgba(0, 0, 0, 0.05)',
+    marginBottom: '32px'
+  };
+
+  const inputStyle = { 
+    width: '100%', 
+    border: '1px solid #D1D5DB', 
+    borderRadius: '6px', 
+    padding: '12px 16px', 
+    fontSize: '14px', 
+    color: '#111111', 
+    background: '#FFFFFF', 
+    outline: 'none',
+    transition: 'all 0.3s ease',
+    fontFamily: "'Inter', sans-serif"
+  };
+
+  const labelStyle = { 
+    fontSize: '14px', 
+    color: '#555555', 
+    fontWeight: '500',
+    marginBottom: '8px',
+    display: 'block',
+    fontFamily: "'Inter', sans-serif"
+  };
+
+  const focusStyle = "focus:border-[#3B82F6] focus:ring-2 focus:ring-[#3B82F6] focus:ring-opacity-20";
 
   if (initialLoading) {
     return (
-      <div className="max-w-4xl mx-auto px-4 py-20 min-h-screen flex items-center justify-center">
-        <div className="text-center">
-          <div className="w-8 h-8 border-2 border-black border-t-transparent rounded-full animate-spin mx-auto mb-4" />
-          <p className="text-[#666]">Loading profile...</p>
+      <div style={{ minHeight: '100vh', background: '#F8F9FC', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: "'Inter', sans-serif" }}>
+        <div style={{ textAlign: 'center' }}>
+          <div style={{ width: '24px', height: '24px', border: '2px solid #3B50E0', borderTopColor: 'transparent', borderRadius: '50%', animation: 'spin 1s linear infinite', margin: '0 auto 12px' }} />
+          <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
+          <p style={{ fontSize: '11px', color: '#9CA3AF', fontFamily: "'Inter', sans-serif" }}>Loading profile...</p>
         </div>
       </div>
     );
@@ -321,342 +368,373 @@ export default function EditProfilePage() {
         <meta name="description" content="Edit your Driplens profile" />
       </Helmet>
 
-      <div className="max-w-4xl mx-auto px-4 py-10 min-h-screen">
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.5 }}
-        >
-          <h1 className="text-4xl font-bold text-black mb-2 tracking-tight">Edit Profile</h1>
-          <p className="text-[#666] mb-12 text-sm">
-            {isCreator ? 'Showcase your work and let brands find you.' : 'Tell creators about your brand and what you\'re looking for.'}
-          </p>
-
-          {/* Banner Upload */}
-          <div className="mb-12">
-            <label className="block text-[10px] font-bold uppercase tracking-widest text-[#999] mb-4">
-              Banner Image
-            </label>
-            <div
-              onDragEnter={handleBannerDrag}
-              onDragLeave={handleBannerDrag}
-              onDragOver={handleBannerDrag}
-              onDrop={handleBannerDrop}
-              onClick={() => bannerInputRef.current?.click()}
-              className={`aspect-[3/1] border-2 border-dashed transition-all cursor-pointer flex flex-col items-center justify-center p-8 relative overflow-hidden ${
-                dragActiveBanner ? 'border-black bg-gray-50' : 'border-[#DDD] bg-white hover:border-black'
-              }`}
-            >
-              <input
-                type="file"
-                className="hidden"
-                ref={bannerInputRef}
-                onChange={handleBannerChange}
-                accept="image/*"
-              />
-              {bannerPreview ? (
-                <img src={bannerPreview} alt="Banner Preview" className="absolute inset-0 w-full h-full object-cover" />
-              ) : (
-                <>
-                  <svg className="w-10 h-10 text-[#CCC] mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M12 4v16m8-8H4" />
-                  </svg>
-                  <p className="text-xs font-bold uppercase tracking-widest text-black mb-1">Drag & Drop or Click</p>
-                  <p className="text-[10px] text-[#999]">Recommended: 1200×400px</p>
-                </>
-              )}
-            </div>
-            {errors.banner && <p className="text-red-500 text-xs mt-2">{errors.banner}</p>}
-          </div>
+      <div style={{ minHeight: '100vh', background: '#F9FAFB', display: 'flex', flexDirection: 'column', fontFamily: "'Inter', sans-serif" }}>
 
-          {/* Avatar Upload */}
-          <div className="mb-12">
-            <label className="block text-[10px] font-bold uppercase tracking-widest text-[#999] mb-4">
-              Avatar Image
-            </label>
-            <div
-              onDragEnter={handleAvatarDrag}
-              onDragLeave={handleAvatarDrag}
-              onDragOver={handleAvatarDrag}
-              onDrop={handleAvatarDrop}
-              onClick={() => avatarInputRef.current?.click()}
-              className={`w-32 h-32 border-2 border-dashed transition-all cursor-pointer flex items-center justify-center relative overflow-hidden rounded-lg ${
-                dragActiveAvatar ? 'border-black bg-gray-50' : 'border-[#DDD] bg-white hover:border-black'
-              }`}
-            >
-              <input
-                type="file"
-                className="hidden"
-                ref={avatarInputRef}
-                onChange={handleAvatarChange}
-                accept="image/*"
-              />
-              {avatarPreview ? (
-                <img src={avatarPreview} alt="Avatar Preview" className="absolute inset-0 w-full h-full object-cover" />
-              ) : (
-                <>
-                  <svg className="w-8 h-8 text-[#CCC]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M12 4v16m8-8H4" />
-                  </svg>
-                </>
-              )}
-            </div>
-            <p className="text-[10px] text-[#999] mt-2">Square image recommended (500×500px)</p>
-            {errors.avatar && <p className="text-red-500 text-xs mt-2">{errors.avatar}</p>}
-          </div>
+        {/* BODY */}
+        <div style={{ display: 'flex', flex: 1, maxWidth: '1000px', margin: '0 auto', width: '100%', padding: '48px 24px' }}>
 
-          {/* Form */}
-          <form onSubmit={handleSubmit} className="space-y-8 max-w-2xl">
+          <div style={{ flex: 1 }}>
+            
             <AnimatePresence>
               {message.text && (
                 <motion.div
-                  initial={{ opacity: 0, height: 0 }}
-                  animate={{ opacity: 1, height: 'auto' }}
-                  exit={{ opacity: 0, height: 0 }}
-                  className={`text-xs font-bold uppercase tracking-widest p-4 ${
-                    message.type === 'error'
-                      ? 'bg-red-50 text-red-600 border border-red-200'
-                      : 'bg-green-50 text-green-600 border border-green-200'
-                  }`}
+                  initial={{ opacity: 0, y: -10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: -10 }}
+                  style={{ 
+                    padding: '12px 16px', 
+                    borderRadius: '8px', 
+                    fontSize: '14px',
+                    marginBottom: '24px',
+                    background: message.type === 'error' ? '#FEF2F2' : '#F0FDF4',
+                    color: message.type === 'error' ? '#991B1B' : '#166534',
+                    border: `1px solid ${message.type === 'error' ? '#FEE2E2' : '#DCFCE7'}`,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    fontWeight: '500'
+                  }}
                 >
                   {message.text}
                 </motion.div>
               )}
             </AnimatePresence>
 
-            {/* Bio */}
-            <div>
-              <label className="block text-[10px] font-bold uppercase tracking-widest text-[#999] mb-3">
-                Bio {formData.bio.length > 0 && <span className="text-[#CCC] font-normal">({formData.bio.length}/500)</span>}
-              </label>
-              <textarea
-                name="bio"
-                value={formData.bio}
-                onChange={handleInputChange}
-                placeholder="Tell your story..."
-                rows="4"
-                className={`w-full border rounded p-3 focus:outline-none transition-colors resize-none bg-transparent ${
-                  errors.bio ? 'border-red-400' : 'border-[#DDD] focus:border-black'
-                }`}
-                maxLength="500"
-              />
-              {errors.bio && <p className="text-red-500 text-xs mt-2">{errors.bio}</p>}
-            </div>
-
-            {/* Category */}
-            <div>
-              <label className="block text-[10px] font-bold uppercase tracking-widest text-[#999] mb-3">
-                {isCreator ? 'Specialty' : 'Industry'}
-              </label>
-              <select
-                name="category"
-                value={formData.category}
-                onChange={handleInputChange}
-                className={`w-full border-b py-3 bg-transparent focus:outline-none transition-colors appearance-none ${
-                  errors.category ? 'border-red-400' : 'border-[#DDD] focus:border-black'
-                }`}
-              >
-                <option value="">Select a category...</option>
-                {categories.map(cat => (
-                  <option key={cat} value={cat}>{cat}</option>
-                ))}
-              </select>
-              {errors.category && <p className="text-red-500 text-xs mt-2">{errors.category}</p>}
-            </div>
-
-            {/* Location */}
-            <div>
-              <label className="block text-[10px] font-bold uppercase tracking-widest text-[#999] mb-3">
-                Location
-              </label>
-              <input
-                type="text"
-                name="location"
-                value={formData.location}
-                onChange={handleInputChange}
-                placeholder="City, Country"
-                className={inputClass('location')}
-              />
-              {errors.location && <p className="text-red-500 text-xs mt-2">{errors.location}</p>}
-            </div>
-
-            {/* Social Links */}
-            <div className="pt-4 border-t border-[#EEE]">
-              <h3 className="text-sm font-bold text-black mb-6">Social Links (Optional)</h3>
-
-              <div className="space-y-6">
-                <div>
-                  <label className="block text-[10px] font-bold uppercase tracking-widest text-[#999] mb-3">
-                    Instagram Handle
-                  </label>
-                  <input
-                    type="text"
-                    name="instagram"
-                    value={formData.instagram}
-                    onChange={handleInputChange}
-                    placeholder="yourhandle (without the @)"
-                    className={inputClass('instagram')}
-                  />
-                </div>
-
-                <div>
-                  <label className="block text-[10px] font-bold uppercase tracking-widest text-[#999] mb-3">
-                    Twitter/X Handle
-                  </label>
-                  <input
-                    type="text"
-                    name="twitter"
-                    value={formData.twitter}
-                    onChange={handleInputChange}
-                    placeholder="yourhandle (without the @)"
-                    className={inputClass('twitter')}
-                  />
-                </div>
-
-                <div>
-                  <label className="block text-[10px] font-bold uppercase tracking-widest text-[#999] mb-3">
-                    Website
-                  </label>
-                  <input
-                    type="url"
-                    name="website"
-                    value={formData.website}
-                    onChange={handleInputChange}
-                    placeholder="https://yourwebsite.com"
-                    className={inputClass('website')}
-                  />
-                  {errors.website && <p className="text-red-500 text-xs mt-2">{errors.website}</p>}
-                </div>
-              </div>
-            </div>
-
-            {/* Creator Specific Settings */}
-            {isCreator && (
-              <div className="pt-4 border-t border-[#EEE] space-y-8">
-                <h3 className="text-sm font-bold text-black">Creator Discovery Settings</h3>
+            {/* COMBINED SECTION — SOCIAL & DISCOVERY */}
+            <div style={cardStyle}>
+              <div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
                 
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                  <div>
-                    <label className="block text-[10px] font-bold uppercase tracking-widest text-[#999] mb-3">
-                      Min Budget ($)
-                    </label>
-                    <input
-                      type="number"
-                      name="min_budget"
-                      value={formData.min_budget}
-                      onChange={handleInputChange}
-                      className={inputClass('min_budget')}
-                    />
-                    {errors.min_budget && <p className="text-red-500 text-xs mt-2">{errors.min_budget}</p>}
-                  </div>
-                  <div>
-                    <label className="block text-[10px] font-bold uppercase tracking-widest text-[#999] mb-3">
-                      Max Budget ($)
-                    </label>
-                    <input
-                      type="number"
-                      name="max_budget"
-                      value={formData.max_budget}
-                      onChange={handleInputChange}
-                      className={inputClass('max_budget')}
-                    />
-                    {errors.max_budget && <p className="text-red-500 text-xs mt-2">{errors.max_budget}</p>}
+                {/* Left Column: Social Profiles */}
+                <div className="lg:col-span-5 border-b lg:border-b-0 lg:border-r border-[#F0F0F0] pb-10 lg:pb-0 lg:pr-10">
+                  <div style={{ marginBottom: '32px' }}>
+                    <div style={{ fontSize: '20px', color: '#111111', fontWeight: '700', marginBottom: '8px', display: 'flex', alignItems: 'center', gap: '8px' }}>
+                      <Globe className="w-5 h-5 text-brand-accent" /> Social Profiles
+                    </div>
+                    <p style={{ fontSize: '13px', color: '#6B7280', lineHeight: '1.5' }}>
+                      Connect your social profiles to boost visibility and help brands find your work easily.
+                    </p>
                   </div>
-                </div>
-
-                <div>
-                  <label className="block text-[10px] font-bold uppercase tracking-widest text-[#999] mb-3">
-                    Follower Count
-                  </label>
-                  <input
-                    type="number"
-                    name="follower_count"
-                    value={formData.follower_count}
-                    onChange={handleInputChange}
-                    className={inputClass('follower_count')}
-                  />
-                  {errors.follower_count && <p className="text-red-500 text-xs mt-2">{errors.follower_count}</p>}
-                </div>
 
-                <div>
-                  <label className="block text-[10px] font-bold uppercase tracking-widest text-[#999] mb-4">
-                    Platforms
-                  </label>
-                  <div className="flex flex-wrap gap-2">
-                    {['Instagram', 'TikTok', 'YouTube', 'Twitter', 'Twitch', 'LinkedIn'].map(plt => (
-                      <button
-                        key={plt}
-                        type="button"
-                        onClick={() => handlePlatformToggle(plt)}
-                        className={`px-4 py-2 rounded-full text-xs font-bold transition-all border ${
-                          formData.platforms.includes(plt)
-                            ? 'bg-black border-black text-white shadow-lg'
-                            : 'bg-white border-gray-100 text-gray-400 hover:border-black hover:text-black'
-                        }`}
-                      >
-                        {plt}
-                      </button>
-                    ))}
+                  <div className="space-y-6">
+                    {/* Instagram */}
+                    <div className="group">
+                      <div className="flex items-center justify-between mb-2">
+                        <div className="flex items-center gap-3">
+                          <div className="p-2 bg-pink-50 rounded-lg group-focus-within:bg-pink-500 group-focus-within:text-white transition-all">
+                            <Instagram className="w-4 h-4" />
+                          </div>
+                          <span className="text-sm font-semibold text-[#374151]">Instagram</span>
+                        </div>
+                        {!formData.instagram && (
+                          <span className="text-[10px] font-bold text-pink-500 uppercase tracking-wider">Required</span>
+                        )}
+                      </div>
+                      <div className="relative">
+                        <input
+                          type="text"
+                          name="instagram"
+                          value={formData.instagram}
+                          onChange={handleInputChange}
+                          placeholder="your_username"
+                          className={focusStyle}
+                          style={{ ...inputStyle, paddingLeft: '40px' }}
+                        />
+                        <span className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 text-sm">@</span>
+                      </div>
+                    </div>
+
+                    {/* Twitter/X */}
+                    <div className="group">
+                      <div className="flex items-center justify-between mb-2">
+                        <div className="flex items-center gap-3">
+                          <div className="p-2 bg-zinc-100 rounded-lg group-focus-within:bg-black group-focus-within:text-white transition-all">
+                            <Twitter className="w-4 h-4" />
+                          </div>
+                          <span className="text-sm font-semibold text-[#374151]">Twitter / X</span>
+                        </div>
+                      </div>
+                      <div className="relative">
+                        <input
+                          type="text"
+                          name="twitter"
+                          value={formData.twitter}
+                          onChange={handleInputChange}
+                          placeholder="your_handle"
+                          className={focusStyle}
+                          style={{ ...inputStyle, paddingLeft: '40px' }}
+                        />
+                        <span className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 text-sm">@</span>
+                      </div>
+                    </div>
+
+                    {/* LinkedIn */}
+                    <div className="group">
+                      <div className="flex items-center justify-between mb-2">
+                        <div className="flex items-center gap-3">
+                          <div className="p-2 bg-blue-50 rounded-lg group-focus-within:bg-blue-600 group-focus-within:text-white transition-all">
+                            <Linkedin className="w-4 h-4" />
+                          </div>
+                          <span className="text-sm font-semibold text-[#374151]">LinkedIn</span>
+                        </div>
+                      </div>
+                      <input
+                        type="text"
+                        name="linkedin"
+                        value={formData.linkedin}
+                        onChange={handleInputChange}
+                        placeholder="linkedin.com/in/yourprofile"
+                        className={focusStyle}
+                        style={inputStyle}
+                      />
+                    </div>
+
+                    {/* Website */}
+                    <div className="group">
+                      <div className="flex items-center justify-between mb-2">
+                        <div className="flex items-center gap-3">
+                          <div className="p-2 bg-indigo-50 rounded-lg group-focus-within:bg-indigo-600 group-focus-within:text-white transition-all">
+                            <Globe className="w-4 h-4" />
+                          </div>
+                          <span className="text-sm font-semibold text-[#374151]">Portfolio Website</span>
+                        </div>
+                      </div>
+                      <input
+                        type="url"
+                        name="website"
+                        value={formData.website}
+                        onChange={handleInputChange}
+                        placeholder="https://yourwork.com"
+                        className={focusStyle}
+                        style={inputStyle}
+                      />
+                      {errors.website && <p style={{ color: '#EF4444', fontSize: '11px', marginTop: '6px' }}>{errors.website}</p>}
+                    </div>
+
+                    <div className="pt-4 mt-8 bg-zinc-50 p-4 rounded-xl border border-dashed border-zinc-200">
+                      <div className="flex gap-3">
+                        <Info className="w-4 h-4 text-brand-accent mt-0.5" />
+                        <p className="text-[12px] text-[#4B5563] leading-relaxed">
+                          <span className="font-bold text-brand-accent">Pro Tip:</span> Linked profiles are shown on your public portfolio to build trust with potential clients.
+                        </p>
+                      </div>
+                    </div>
                   </div>
                 </div>
 
-                <div>
-                  <label className="block text-[10px] font-bold uppercase tracking-widest text-[#999] mb-3">
-                    Tags (Comma separated)
-                  </label>
-                  <input
-                    type="text"
-                    defaultValue={formData.tags.join(', ')}
-                    onBlur={handleTagsChange}
-                    placeholder="cinematic, storytelling, minimal"
-                    className="w-full border-b py-3 border-[#DDD] focus:border-black focus:outline-none transition-colors bg-transparent text-black"
-                  />
-                </div>
-
-                <div className="flex items-center justify-between p-4 bg-gray-50 rounded-xl">
-                  <div>
-                    <p className="text-xs font-bold text-black">Available for Hire</p>
-                    <p className="text-[10px] text-[#999]">Show "Available Now" badge on your profile</p>
+                {/* Right Column: Discovery Details */}
+                {isCreator && (
+                  <div className="lg:col-span-7">
+                    <div style={{ marginBottom: '32px' }}>
+                      <div style={{ fontSize: '20px', color: '#111111', fontWeight: '700', marginBottom: '8px', display: 'flex', alignItems: 'center', gap: '8px' }}>
+                        <Target className="w-5 h-5 text-brand-accent" /> Discovery Details
+                      </div>
+                      <p style={{ fontSize: '13px', color: '#6B7280', lineHeight: '1.5' }}>
+                        Set your preferences to help brands find and hire you based on their specific needs.
+                      </p>
+                    </div>
+
+                    <div className="grid grid-cols-2 gap-6 mb-8">
+                      <div>
+                        <label style={labelStyle}>
+                          <span className="flex items-center gap-2"><DollarSign className="w-3.5 h-3.5" /> Min Budget ($)</span>
+                        </label>
+                        <input
+                          type="number"
+                          name="min_budget"
+                          value={formData.min_budget}
+                          onChange={handleInputChange}
+                          placeholder="500"
+                          className={focusStyle}
+                          style={inputStyle}
+                        />
+                      </div>
+                      <div>
+                        <label style={labelStyle}>
+                          <span className="flex items-center gap-2"><DollarSign className="w-3.5 h-3.5" /> Max Budget ($)</span>
+                        </label>
+                        <input
+                          type="number"
+                          name="max_budget"
+                          value={formData.max_budget}
+                          onChange={handleInputChange}
+                          placeholder="5000"
+                          className={focusStyle}
+                          style={inputStyle}
+                        />
+                      </div>
+                    </div>
+
+                    <div className="mb-8">
+                      <label style={labelStyle}>
+                        <span className="flex items-center gap-2"><Users className="w-3.5 h-3.5" /> Total Follower Count</span>
+                      </label>
+                      <input
+                        type="number"
+                        name="follower_count"
+                        value={formData.follower_count}
+                        onChange={handleInputChange}
+                        placeholder="10000"
+                        className={focusStyle}
+                        style={inputStyle}
+                      />
+                    </div>
+
+                    <div className="mb-8">
+                      <label style={labelStyle}>
+                        <span className="flex items-center gap-2"><Globe className="w-3.5 h-3.5" /> Active Platforms</span>
+                      </label>
+                      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', marginTop: '12px' }}>
+                        {['Instagram', 'TikTok', 'YouTube', 'Twitter', 'Twitch', 'LinkedIn'].map(plt => {
+                          const isSelected = formData.platforms.includes(plt);
+                          return (
+                            <button
+                              key={plt}
+                              type="button"
+                              onClick={() => handlePlatformToggle(plt)}
+                              className="transition-all duration-200 active:scale-95"
+                              style={{
+                                padding: '8px 16px',
+                                borderRadius: '12px',
+                                fontSize: '13px',
+                                fontWeight: '600',
+                                border: isSelected ? 'none' : '1px solid #E5E7EB',
+                                background: isSelected ? '#3B82F6' : '#FFFFFF',
+                                color: isSelected ? '#FFFFFF' : '#4B5563',
+                                cursor: 'pointer',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                boxShadow: isSelected ? '0 4px 12px rgba(59, 130, 246, 0.25)' : 'none'
+                              }}
+                            >
+                              {plt}
+                            </button>
+                          );
+                        })}
+                      </div>
+                    </div>
+
+                    <div className="mb-8">
+                      <label style={labelStyle}>
+                        <span className="flex items-center gap-2"><Hash className="w-3.5 h-3.5" /> Expertise Tags</span>
+                      </label>
+                      <div style={{ 
+                        ...inputStyle, 
+                        display: 'flex', 
+                        flexWrap: 'wrap', 
+                        gap: '6px', 
+                        padding: '8px',
+                        minHeight: '48px',
+                        alignItems: 'center',
+                        cursor: 'text',
+                        borderRadius: '12px'
+                      }} onClick={() => document.getElementById('tags-input').focus()}>
+                        {formData.tags.map(tag => (
+                          <span
+                            key={tag}
+                            style={{
+                              background: '#3B82F6',
+                              color: '#FFFFFF',
+                              padding: '4px 10px',
+                              borderRadius: '8px',
+                              fontSize: '12px',
+                              fontWeight: '600',
+                              display: 'flex',
+                              alignItems: 'center',
+                              gap: '4px',
+                            }}
+                          >
+                            {tag}
+                            <button
+                              type="button"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                setFormData(p => ({ ...p, tags: p.tags.filter(t => t !== tag) }));
+                              }}
+                              style={{ border: 'none', background: 'none', color: '#FFFFFF', cursor: 'pointer', padding: '0', fontSize: '14px', opacity: 0.8 }}
+                            >
+                              &times;
+                            </button>
+                          </span>
+                        ))}
+                        <input
+                          id="tags-input"
+                          type="text"
+                          placeholder={formData.tags.length === 0 ? "add tags..." : ""}
+                          style={{ 
+                            border: 'none', 
+                            outline: 'none', 
+                            fontSize: '13px', 
+                            flex: 1, 
+                            minWidth: '100px',
+                            background: 'transparent'
+                          }}
+                          onKeyDown={(e) => {
+                            if (e.key === ',' || e.key === 'Enter') {
+                              e.preventDefault();
+                              const val = e.target.value.trim().replace(/,$/, '');
+                              if (val && !formData.tags.includes(val)) {
+                                setFormData(p => ({ ...p, tags: [...p.tags, val] }));
+                                e.target.value = '';
+                              }
+                            }
+                          }}
+                        />
+                      </div>
+                    </div>
+
+                    <div className="flex items-center justify-between p-4 bg-blue-50 rounded-2xl border border-blue-100">
+                      <div className="flex items-center gap-3">
+                        <div className="p-2 bg-blue-600 rounded-lg text-white">
+                          <Briefcase className="w-4 h-4" />
+                        </div>
+                        <div>
+                          <p className="text-sm font-bold text-blue-900 leading-none mb-1">Availability</p>
+                          <p className="text-[11px] text-blue-700">Allow brands to hire you for projects</p>
+                        </div>
+                      </div>
+                      <div 
+                        onClick={() => handleInputChange({ target: { name: 'is_available', type: 'checkbox', checked: !formData.is_available } })}
+                        className={`w-12 h-6 rounded-full p-1 cursor-pointer transition-all duration-300 ${formData.is_available ? 'bg-blue-600' : 'bg-gray-300'}`}
+                      >
+                        <div className={`w-4 h-4 bg-white rounded-full transition-all duration-300 transform ${formData.is_available ? 'translate-x-6' : 'translate-x-0'}`} />
+                      </div>
+                    </div>
                   </div>
-                  <input
-                    type="checkbox"
-                    name="is_available"
-                    checked={formData.is_available}
-                    onChange={handleInputChange}
-                    className="w-5 h-5 accent-black cursor-pointer"
-                  />
-                </div>
+                )}
               </div>
-            )}
+            </div>
+
 
-            {/* Submit Button */}
-            <div className="flex gap-4 pt-8">
-              <button
+            {/* SAVE BUTTON */}
+            <div style={{ marginTop: '48px' }}>
+              <button 
                 type="button"
-                onClick={() => navigate(`/dashboard/${user.role}`)}
-                className="flex-1 border border-black text-black py-4 font-bold text-xs uppercase tracking-[0.2em] hover:bg-black/5 transition-all"
-              >
-                Cancel
-              </button>
-              <button
-                type="submit"
+                onClick={handleSubmit} 
                 disabled={loading}
-                className={`flex-1 bg-black text-white py-4 font-bold text-xs uppercase tracking-[0.2em] hover:bg-black/90 transition-all ${
-                  loading ? 'opacity-50 cursor-not-allowed' : ''
-                }`}
+                style={{ 
+                  width: '100%',
+                  fontSize: '16px', 
+                  padding: '16px', 
+                  borderRadius: '8px', 
+                  border: 'none', 
+                  background: '#3B82F6', 
+                  color: '#FFFFFF', 
+                  cursor: 'pointer', 
+                  opacity: loading ? 0.7 : 1,
+                  fontWeight: '600',
+                  transition: 'all 0.3s ease',
+                  boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)'
+                }}
+                onMouseOver={(e) => e.currentTarget.style.background = '#2563EB'}
+                onMouseOut={(e) => e.currentTarget.style.background = '#3B82F6'}
               >
-                {loading ? (
-                  <span className="flex items-center justify-center gap-2">
-                    <span className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
-                    Saving...
-                  </span>
-                ) : (
-                  'Save Changes'
-                )}
+                {loading ? 'Saving...' : 'Save Settings'}
               </button>
             </div>
-          </form>
-        </motion.div>
+
+          </div>
+        </div>
       </div>
     </>
   );
diff --git a/client/src/pages/ExplorePage.jsx b/client/src/pages/ExplorePage.jsx
index 50b8884..2784413 100644
--- a/client/src/pages/ExplorePage.jsx
+++ b/client/src/pages/ExplorePage.jsx
@@ -3,6 +3,7 @@ import { motion } from 'framer-motion';
 import { Link } from 'react-router-dom';
 import { Helmet } from 'react-helmet-async';
 import { getAllExploreContent } from '../services/externalMediaService';
+import WorkDetailCard from '../components/WorkDetailCard';
 
 export default function ExplorePage() {
   const [content, setContent] = useState([]);
@@ -112,7 +113,7 @@ export default function ExplorePage() {
                   {item.mediaType === 'video' ? (
                     <video 
                       src={item.mediaUrl} 
-                      className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-105"
+                      className="w-full h-full object-contain transition-transform duration-1000 group-hover:scale-105"
                       muted
                       loop
                       onMouseOver={e => e.target.play()}
@@ -122,9 +123,20 @@ export default function ExplorePage() {
                     <img 
                       src={item.mediaUrl} 
                       alt={item.title} 
-                      className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-105"
+                      className="w-full h-full object-contain transition-transform duration-1000 group-hover:scale-105"
                     />
                   )}
+                  
+                  {/* Multi-item indicator */}
+                  {item.items?.length > 1 && (
+                    <div className="absolute top-6 right-6 bg-black/60 backdrop-blur-md text-white text-[9px] font-bold px-3 py-1.5 uppercase tracking-widest flex items-center gap-2">
+                      <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 10h16M4 14h16M4 18h16" />
+                      </svg>
+                      {item.items.length} Files
+                    </div>
+                  )}
+
                   <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-all duration-500"></div>
                   <div className="absolute bottom-0 left-0 right-0 p-8 transform translate-y-4 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-500">
                     <span className="bg-white text-black px-6 py-3 text-[10px] font-bold uppercase tracking-widest shadow-xl">
@@ -147,7 +159,7 @@ export default function ExplorePage() {
                       )}
                     </div>
                     <p className="text-xs uppercase tracking-widest font-semibold text-[#999999]">
-                      By {item.author?.username || 'Anonymous'} • {item.category}
+                      By {item.author?.username || item.author?.display_name || 'Anonymous'} • {item.category}
                     </p>
                   </div>
                   <div className="opacity-0 group-hover:opacity-100 transition-all duration-300">
@@ -178,60 +190,10 @@ export default function ExplorePage() {
           )}
         </>
       )}
-      {selectedProject && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 md:p-8 bg-black/80 backdrop-blur-sm" onClick={() => setSelectedProject(null)}>
-          <motion.div 
-            initial={{ opacity: 0, scale: 0.95 }}
-            animate={{ opacity: 1, scale: 1 }}
-            exit={{ opacity: 0, scale: 0.95 }}
-            className="bg-white w-full max-w-6xl max-h-[90vh] flex flex-col md:flex-row overflow-hidden border-4 border-black shadow-[16px_16px_0px_rgba(0,0,0,1)] relative"
-            onClick={e => e.stopPropagation()}
-          >
-            <button 
-              className="absolute top-4 right-4 z-10 bg-white border-2 border-black w-10 h-10 flex items-center justify-center hover:bg-black hover:text-white transition-colors shadow-[4px_4px_0px_rgba(0,0,0,1)]"
-              onClick={() => setSelectedProject(null)}
-            >
-              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
-            </button>
-            
-            <div className="md:w-2/3 bg-gray-100 flex items-center justify-center border-b-4 md:border-b-0 md:border-r-4 border-black min-h-[300px]">
-              {selectedProject.mediaType === 'video' ? (
-                <video src={selectedProject.mediaUrl} controls autoPlay className="w-full h-full object-contain max-h-[90vh]" />
-              ) : (
-                <img src={selectedProject.mediaUrl} alt={selectedProject.title} className="w-full h-full object-contain max-h-[90vh]" />
-              )}
-            </div>
-            
-            <div className="md:w-1/3 p-8 flex flex-col overflow-y-auto">
-              <h2 className="text-3xl font-bold font-['Space_Grotesk'] mb-2 uppercase">{selectedProject.title}</h2>
-              <p className="text-sm tracking-widest text-gray-500 uppercase font-bold mb-8">{selectedProject.category}</p>
-              
-              <div className="border-t-2 border-b-2 border-black py-6 mb-8">
-                <p className="text-xs text-gray-500 uppercase tracking-widest font-bold mb-2">Creator</p>
-                <div className="flex items-center gap-3 mb-4">
-                  <div className="w-12 h-12 bg-black rounded-full flex items-center justify-center text-white font-bold text-xl uppercase">
-                    {(selectedProject.author?.username || 'A')[0]}
-                  </div>
-                  <div>
-                    <h3 className="font-bold text-lg">{selectedProject.author?.username || 'Anonymous'}</h3>
-                    <p className="text-xs text-gray-500 uppercase tracking-widest font-bold">Independent</p>
-                  </div>
-                </div>
-                <p className="text-sm leading-relaxed text-gray-700">
-                  {selectedProject.author?.bio || "A multi-disciplinary creative professional with a proven track record of delivering high-impact visual experiences. Passionate about pushing boundaries and setting new industry standards."}
-                </p>
-              </div>
-              
-              <div className="mt-auto">
-                <Link to="/profile/demo" className="w-full bg-[var(--color-brand-accent)] text-white border-2 border-black py-4 font-bold uppercase tracking-widest shadow-[8px_8px_0px_rgba(0,0,0,1)] hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[6px_6px_0px_rgba(0,0,0,1)] transition-all flex items-center justify-center gap-2 group">
-                  <span>Hire Me</span>
-                  <svg className="w-5 h-5 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>
-                </Link>
-              </div>
-            </div>
-          </motion.div>
-        </div>
-      )}
+      <WorkDetailCard
+        project={selectedProject}
+        onClose={() => setSelectedProject(null)}
+      />
     </div>
   );
 }
diff --git a/client/src/pages/OnboardingPage.jsx b/client/src/pages/OnboardingPage.jsx
index 0e8f3a3..8af2083 100644
--- a/client/src/pages/OnboardingPage.jsx
+++ b/client/src/pages/OnboardingPage.jsx
@@ -407,7 +407,7 @@ function Step3({ onNext, onBack }) {
         />
       ))}
 
-      <NavButtons onBack={onBack} onNext={onNext} nextDisabled={data.tags.length === 0 || !data.qualifications.some(q => q.trim()) || !data.past_work.some(p => p.trim())} />
+      <NavButtons onBack={onBack} onNext={onNext} nextDisabled={false} />
     </div>
   );
 }
@@ -494,7 +494,7 @@ function Step4({ onNext, onBack }) {
 
       <p style={{ fontSize: 11, color: '#999', fontFamily: 'Poppins, sans-serif', marginTop: 16, fontStyle: 'italic' }}>You can change all of this anytime from your dashboard.</p>
 
-      <NavButtons onBack={onBack} onNext={onNext} nextDisabled={!data.min_budget || !data.max_budget || data.preferred_work_type.length === 0} />
+      <NavButtons onBack={onBack} onNext={onNext} nextDisabled={false} />
     </div>
   );
 }
@@ -666,7 +666,7 @@ function Step5({ onBack, onSubmit, loading }) {
         />
       </div>
 
-      <NavButtons onBack={onBack} onNext={onSubmit} nextLabel="Complete My Profile" loading={loading} nextDisabled={!data.location?.trim() || !data.bio?.trim() || !data.website?.trim() || uploadingAvatar || uploadingResume} />
+      <NavButtons onBack={onBack} onNext={onSubmit} nextLabel="Complete My Profile" loading={loading} nextDisabled={uploadingAvatar || uploadingResume} />
 
       <style dangerouslySetInnerHTML={{ __html: `
         @keyframes spin {
diff --git a/client/src/pages/ProjectProgressPage.jsx b/client/src/pages/ProjectProgressPage.jsx
index 1f1cb24..eea8465 100644
--- a/client/src/pages/ProjectProgressPage.jsx
+++ b/client/src/pages/ProjectProgressPage.jsx
@@ -1,101 +1,243 @@
+import { useState } from 'react';
 import { useLocation, Link } from 'react-router-dom';
 import { motion } from 'framer-motion';
+import { Check, LayoutDashboard, ArrowRight } from 'lucide-react';
 
 export default function ProjectProgressPage() {
   const location = useLocation();
+  const [revisionRequested, setRevisionRequested] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+  const [approved, setApproved] = useState(false);
+
+  // Mock data for project details
   const { pkg, creator } = location.state || {
-    creator: { name: 'Atharv Gadekar', img: 'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=500' },
+    creator: { 
+      name: 'Atharv Gadekar', 
+      img: 'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=500',
+      category: 'Event Coverage'
+    },
     pkg: { title: 'Cinematography Package' }
   };
 
+  const steps = [
+    {
+      id: 1,
+      title: 'Pre-Production',
+      description: 'Brief confirmed, moodboard approved. Concept locked in.',
+      status: 'COMPLETED',
+    },
+    {
+      id: 2,
+      title: 'Shooting & Production',
+      description: 'Currently on location capturing main footage. Lighting setup complete.',
+      status: 'IN PROGRESS',
+      progress: 60,
+    },
+    {
+      id: 3,
+      title: 'Post-Production',
+      description: 'Color grading and VFX pending completion of shoot.',
+      status: 'UPCOMING',
+    },
+    {
+      id: 4,
+      title: 'Final Delivery',
+      description: 'Final export and high-resolution asset delivery.',
+      status: 'UPCOMING',
+    },
+  ];
+
   return (
-    <div className="min-h-[calc(100vh-60px)] bg-[#f8f9fa] font-['Space_Grotesk'] text-black py-12 px-4 md:px-8 flex justify-center">
+    <div className="min-h-screen bg-[#F8F9FA] font-inter text-[#020617] py-12 px-4 md:px-8 flex justify-center">
       <div className="max-w-4xl w-full">
         
-        <motion.div 
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="bg-white border-[3px] border-black shadow-[16px_16px_0px_rgba(0,0,0,1)] rounded-none p-8 md:p-12 relative"
-        >
-          <Link to="/explore" className="absolute top-8 right-8 text-[10px] font-bold uppercase tracking-widest text-black border-2 border-black px-4 py-2 hover:bg-black hover:text-white transition-colors shadow-[4px_4px_0px_rgba(0,0,0,1)]">
-            Go to Dashboard
-          </Link>
-
-          <div className="flex flex-col md:flex-row items-start md:items-center gap-6 mb-16 mt-8 md:mt-0">
-            <img src={creator.img} alt={creator.name} className="w-24 h-24 rounded-full object-cover border-[3px] border-black shadow-[6px_6px_0px_rgba(0,0,0,1)] shrink-0" />
+        {/* Header Section */}
+        <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-12 gap-6">
+          <div className="flex items-center gap-5">
+            {/* Project Avatar / Placeholder */}
+            <div className="w-16 h-16 bg-[#0033CC]/10 flex items-center justify-center rounded-none border border-[#0033CC]/20 shrink-0">
+              <img 
+                src={creator.img} 
+                alt={creator.name} 
+                className="w-full h-full object-cover rounded-none shadow-sm"
+              />
+            </div>
             <div>
-              <div className="inline-block bg-[#0540F2] text-white text-[10px] font-bold uppercase tracking-widest px-3 py-1 mb-3 border-2 border-black shadow-[2px_2px_0px_rgba(0,0,0,1)]">
-                Active Project
+              <div className="flex items-center gap-3 mb-1">
+                <h1 className="text-xl font-bold tracking-tight">{creator.name}</h1>
+                <span className="bg-[#0033CC] text-white text-[9px] font-extrabold uppercase tracking-widest px-2 py-1 rounded-none shadow-sm">
+                  Active Project
+                </span>
               </div>
-              <h1 className="text-3xl md:text-5xl font-black text-black leading-none tracking-tighter mb-2 uppercase">{creator.name}</h1>
-              <p className="text-zinc-500 font-bold uppercase tracking-widest text-xs border-b-2 border-black pb-2 inline-block">{pkg.title}</p>
+              <p className="text-[#555555] font-medium text-xs">{creator.category || 'Event Coverage'}</p>
             </div>
           </div>
+          
+          <Link 
+            to="/dashboard/creator" 
+            className="flex items-center gap-2 text-xs font-semibold text-[#020617] border border-[#E2E8F0] px-4 py-2 rounded-none bg-white hover:bg-[#F8F9FA] hover:border-[#CBD5E1] transition-all duration-200 shadow-sm group"
+          >
+            <LayoutDashboard className="w-3.5 h-3.5 text-[#555555] group-hover:text-[#0033CC] transition-colors" />
+            Go to Dashboard
+          </Link>
+        </div>
 
-          {/* Timeline Wrapper */}
-          <div className="relative pl-6 md:pl-10">
-            {/* The Vertical Line */}
-            <div className="absolute top-4 bottom-4 left-[2.25rem] md:left-[3.25rem] w-1 bg-black z-0"></div>
+        {/* Timeline Content */}
+        <div className="relative">
+          {/* Central Vertical Line */}
+          <div className="absolute left-6 md:left-8 top-0 bottom-0 w-[2px] bg-[#C4C4C4] -z-0"></div>
 
-            {/* Step 1: Complete */}
-            <div className="relative flex items-start gap-8 mb-12 group z-10">
-              <div className="flex items-center justify-center w-12 h-12 rounded-full border-[3px] border-black bg-black text-white shrink-0 shadow-[4px_4px_0px_rgba(0,0,0,1)]">
-                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7"/></svg>
-              </div>
-              <div className="flex-1 p-6 border-[3px] border-black bg-zinc-100 shadow-[6px_6px_0px_rgba(0,0,0,1)]">
-                <div className="flex justify-between items-center mb-2">
-                  <h3 className="font-black text-xl md:text-2xl uppercase">Pre-Production</h3>
-                  <span className="bg-black text-white text-[9px] uppercase font-bold tracking-widest px-2 py-1">Completed</span>
-                </div>
-                <p className="text-sm font-bold text-zinc-600">Brief confirmed, moodboard approved. Concept locked in.</p>
-              </div>
-            </div>
+          <div className="space-y-12 relative z-10">
+            {steps.map((step, index) => {
+              const isCompleted = step.status === 'COMPLETED';
+              const isInProgress = step.status === 'IN PROGRESS';
+              const isUpcoming = step.status === 'UPCOMING';
 
-            {/* Step 2: In Progress */}
-            <div className="relative flex items-start gap-8 mb-12 group z-10">
-              <div className="flex items-center justify-center w-12 h-12 rounded-full border-[3px] border-black bg-[#0540F2] shrink-0 shadow-[4px_4px_0px_rgba(0,0,0,1)]">
-                <div className="w-3 h-3 bg-white rounded-full animate-pulse border-2 border-black"></div>
-              </div>
-              <div className="flex-1 p-6 border-[3px] border-black bg-[#0540F2] text-white shadow-[8px_8px_0px_rgba(0,0,0,1)] -rotate-1 hover:rotate-0 transition-transform">
-                <div className="flex justify-between items-center mb-4">
-                  <h3 className="font-black text-xl md:text-2xl uppercase">Shooting & Production</h3>
-                  <span className="bg-white text-black border-2 border-black text-[9px] uppercase font-bold tracking-widest px-2 py-1 shadow-[2px_2px_0px_rgba(0,0,0,1)]">In Progress</span>
-                </div>
-                
-                <div className="w-full bg-black/30 border-2 border-black h-4 mb-4 relative overflow-hidden">
-                  <div className="absolute top-0 left-0 h-full bg-white w-[60%] border-r-2 border-black"></div>
-                </div>
-                <div className="flex justify-between items-center">
-                  <p className="text-sm font-bold text-white/90 max-w-[80%]">Currently on location capturing main footage. Lighting setup complete.</p>
-                  <p className="text-xl font-black">60%</p>
-                </div>
-              </div>
-            </div>
+              return (
+                <div key={step.id} className="flex gap-8 md:gap-12 group">
+                  {/* Step Marker */}
+                  <div className="relative flex flex-col items-center">
+                    <div className={`
+                      w-12 h-12 rounded-full flex items-center justify-center shrink-0 z-20 transition-all duration-300
+                      ${isCompleted ? 'bg-[#0033CC] text-white shadow-lg' : ''}
+                      ${isInProgress ? 'bg-[#0033CC] text-white ring-4 ring-[#0033CC]/20 shadow-xl scale-110' : ''}
+                      ${isUpcoming ? 'bg-white border-2 border-[#C4C4C4] text-[#C4C4C4]' : ''}
+                    `}>
+                      {isCompleted ? (
+                        <Check className="w-6 h-6 stroke-[3px]" />
+                      ) : (
+                        <span className={`font-bold text-base ${isUpcoming ? 'text-[#C4C4C4]' : 'text-white'}`}>{step.id}</span>
+                      )}
+                    </div>
+                  </div>
 
-            {/* Step 3: Pending */}
-            <div className="relative flex items-start gap-8 mb-12 group z-10">
-              <div className="flex items-center justify-center w-12 h-12 rounded-full border-[3px] border-zinc-300 border-dashed bg-white shrink-0">
-                <span className="text-zinc-300 font-black">3</span>
-              </div>
-              <div className="flex-1 p-6 border-[3px] border-zinc-300 border-dashed bg-zinc-50">
-                <h3 className="font-black text-xl md:text-2xl uppercase text-zinc-400 mb-2">Post-Production</h3>
-                <p className="text-sm font-bold text-zinc-400">Color grading and VFX pending completion of shoot.</p>
-              </div>
-            </div>
+                  {/* Step Card */}
+                  <motion.div 
+                    initial={{ opacity: 0, x: 20 }}
+                    whileInView={{ opacity: 1, x: 0 }}
+                    viewport={{ once: true }}
+                    transition={{ delay: index * 0.1 }}
+                    className={`
+                      flex-1 p-6 md:p-8 rounded-none transition-all duration-300 border
+                      ${isCompleted ? 'bg-[#F0F0F0] border-transparent' : ''}
+                      ${isInProgress ? 'bg-[#0033CC] text-white border-[#0033CC] shadow-2xl shadow-blue-900/20' : ''}
+                      ${isUpcoming ? 'bg-white border-[#E2E8F0] opacity-60' : ''}
+                    `}
+                  >
+                    <div className="flex justify-between items-start mb-2">
+                      <h3 className={`text-base md:text-lg font-bold uppercase tracking-wide ${isInProgress ? 'text-white' : 'text-[#020617]'}`}>
+                        {step.title}
+                      </h3>
+                      <span className={`
+                        text-[9px] font-black uppercase tracking-[0.15em] px-2 py-0.5 rounded-none
+                        ${isCompleted ? 'bg-white/50 text-[#555555]' : ''}
+                        ${isInProgress ? 'bg-white text-[#0033CC]' : ''}
+                        ${isUpcoming ? 'bg-[#F1F5F9] text-[#94A3B8]' : ''}
+                      `}>
+                        {step.status}
+                      </span>
+                    </div>
+                    
+                    <p className={`
+                      text-xs md:text-sm leading-relaxed mb-6 font-medium
+                      ${isInProgress ? 'text-white/80' : 'text-[#555555]'}
+                    `}>
+                      {step.description}
+                    </p>
 
-            {/* Step 4: Pending */}
-            <div className="relative flex items-start gap-8 group z-10">
-              <div className="flex items-center justify-center w-12 h-12 rounded-full border-[3px] border-zinc-300 border-dashed bg-white shrink-0">
-                <span className="text-zinc-300 font-black">4</span>
-              </div>
-              <div className="flex-1 p-6 border-[3px] border-zinc-300 border-dashed bg-zinc-50">
-                <h3 className="font-black text-xl md:text-2xl uppercase text-zinc-400 mb-2">Final Delivery</h3>
-                <p className="text-sm font-bold text-zinc-400">Awaiting final revisions and export.</p>
-              </div>
-            </div>
+                    {/* Progress Bar for Active Step */}
+                    {isInProgress && (
+                      <div className="relative">
+                        <div className="flex justify-between items-center mb-2">
+                          <span className="text-[9px] font-bold uppercase tracking-widest text-white/60">Phase Progress</span>
+                          <span className="text-xs font-black bg-white text-[#0033CC] px-2 py-0.5 rounded-none shadow-sm">
+                            {step.progress}%
+                          </span>
+                        </div>
+                        <div className="h-2 w-full bg-white/20 rounded-none overflow-hidden border border-white/10">
+                          <motion.div 
+                            initial={{ width: 0 }}
+                            animate={{ width: `${step.progress}%` }}
+                            transition={{ duration: 1.5, ease: "easeOut" }}
+                            className="h-full bg-white shadow-[0_0_15px_rgba(255,255,255,0.5)]"
+                          />
+                        </div>
+                      </div>
+                    )}
 
+                    {/* Interactive Section for Final Step */}
+                    {step.id === 4 && (
+                      <div className="mt-6 pt-6 border-t border-[#E2E8F0]">
+                        {!submitted ? (
+                          <button
+                            onClick={() => setSubmitted(true)}
+                            className="w-full md:w-auto bg-[#020617] text-white font-bold uppercase tracking-widest px-6 py-3 text-xs rounded-none hover:bg-[#1e293b] transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 active:translate-y-0 flex items-center justify-center gap-3"
+                          >
+                            Submit Project
+                            <ArrowRight className="w-4 h-4" />
+                          </button>
+                        ) : (
+                          <div className="space-y-4">
+                            {approved ? (
+                              <div className="bg-[#DCFCE7] border border-[#BBF7D0] p-4 rounded-none flex items-start gap-3">
+                                <div className="w-8 h-8 bg-green-500 rounded-none flex items-center justify-center shrink-0">
+                                  <Check className="w-5 h-5 text-white" />
+                                </div>
+                                <div>
+                                  <p className="text-green-800 font-bold uppercase text-[9px] tracking-wider mb-1">Project Approved</p>
+                                  <p className="text-green-700 text-xs">Payment has been released. Project successfully completed!</p>
+                                </div>
+                              </div>
+                            ) : revisionRequested ? (
+                              <div className="bg-[#FEF9C3] border border-[#FEF08A] p-4 rounded-none space-y-4">
+                                <div className="flex items-start gap-3">
+                                  <div className="w-8 h-8 bg-yellow-500 rounded-none flex items-center justify-center shrink-0">
+                                    <span className="text-white font-bold text-lg">!</span>
+                                  </div>
+                                  <div>
+                                    <p className="text-yellow-800 font-bold uppercase text-[9px] tracking-wider mb-1">Revision Requested</p>
+                                    <p className="text-yellow-700 text-xs">The brand has requested some adjustments. Please review the notes and resubmit.</p>
+                                  </div>
+                                </div>
+                                <button
+                                  onClick={() => { setRevisionRequested(false); setSubmitted(false); }}
+                                  className="w-full bg-[#0033CC] text-white font-bold uppercase text-[9px] tracking-widest py-2.5 rounded-none hover:bg-[#0029A3] transition-colors"
+                                >
+                                  Resubmit After Changes
+                                </button>
+                              </div>
+                            ) : (
+                              <div className="bg-[#F8F9FA] border border-[#E2E8F0] p-6 rounded-none">
+                                <p className="text-[#555555] font-semibold text-xs mb-4 flex items-center gap-2">
+                                  <span className="w-2 h-2 bg-[#0033CC] rounded-full animate-pulse" />
+                                  Awaiting brand approval...
+                                </p>
+                                <div className="flex flex-col sm:flex-row gap-3">
+                                  <button
+                                    onClick={() => setApproved(true)}
+                                    className="flex-1 bg-green-600 text-white font-bold uppercase text-[9px] tracking-widest py-2.5 rounded-none hover:bg-green-700 transition-colors shadow-sm"
+                                  >
+                                    Approve & Release (Brand View)
+                                  </button>
+                                  <button
+                                    onClick={() => setRevisionRequested(true)}
+                                    className="flex-1 bg-white border border-[#E2E8F0] text-[#555555] font-bold uppercase text-[9px] tracking-widest py-2.5 rounded-none hover:bg-[#F8F9FA] transition-colors"
+                                  >
+                                    Request Revision
+                                  </button>
+                                </div>
+                              </div>
+                            )}
+                          </div>
+                        )}
+                      </div>
+                    )}
+                  </motion.div>
+                </div>
+              );
+            })}
           </div>
-        </motion.div>
+        </div>
       </div>
     </div>
   );
diff --git a/client/src/pages/UploadPage.jsx b/client/src/pages/UploadPage.jsx
index 19ebd6a..6615e11 100644
--- a/client/src/pages/UploadPage.jsx
+++ b/client/src/pages/UploadPage.jsx
@@ -1,225 +1,381 @@
-import { useState, useRef } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { useNavigate } from 'react-router-dom';
 import { Helmet } from 'react-helmet-async';
 import { api } from '../lib/api';
 import { useAuth } from '../context/AuthContext';
 
-// FIX: mirror the server-side allowed types so the client rejects bad files
-// immediately instead of wasting a round-trip
 const ALLOWED_MIME_TYPES = [
   'image/jpeg', 'image/png', 'image/webp', 'image/gif',
   'video/mp4', 'video/quicktime', 'video/webm',
 ];
 const MAX_FILE_SIZE = 500 * 1024 * 1024; // 500 MB
+const CATEGORIES = ['Cinematography', 'Photography', '3D Motion', 'Design', 'Illustration', 'Animation', 'Graphic Design', 'VFX'];
 
 export default function UploadPage() {
+  const [step, setStep] = useState(1); // 1: Project, 2: Upload
+  const [projects, setProjects] = useState([]);
+  const [selectedProjectId, setSelectedProjectId] = useState('');
+  const [isCreatingProject, setIsCreatingProject] = useState(false);
+  
+  // New Project Form
+  const [projectTitle, setProjectTitle] = useState('');
+  const [projectCategory, setProjectCategory] = useState('Cinematography');
+  const [projectDescription, setProjectDescription] = useState('');
+
+  // Upload State
+  const [files, setFiles] = useState([]);
+  const [previews, setPreviews] = useState([]);
   const [dragActive, setDragActive] = useState(false);
-  const [file, setFile] = useState(null);
-  const [preview, setPreview] = useState(null);
-  const [title, setTitle] = useState('');
-  const [category, setCategory] = useState('Cinematography');
-  const [description, setDescription] = useState('');
   const [loading, setLoading] = useState(false);
   const [message, setMessage] = useState({ type: '', text: '' });
 
   const fileInputRef = useRef(null);
   const navigate = useNavigate();
-  // FIX: useAuth is imported but was unused — keep it for future role-guard use
   const { user } = useAuth();
 
+  useEffect(() => {
+    fetchProjects();
+  }, []);
+
+  const fetchProjects = async () => {
+    try {
+      const res = await api.get('/upload/projects');
+      setProjects(res.data);
+    } catch (err) {
+      console.error('Failed to fetch projects', err);
+    }
+  };
+
+  const handleCreateProject = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    try {
+      const res = await api.post('/upload/projects', {
+        title: projectTitle,
+        category: projectCategory,
+        description: projectDescription
+      });
+      setProjects([res.data, ...projects]);
+      setSelectedProjectId(res.data.id);
+      setIsCreatingProject(false);
+      setStep(2);
+      setMessage({ type: 'success', text: 'Project created! Now add your media.' });
+    } catch (err) {
+      setMessage({ type: 'error', text: err.message || 'Failed to create project' });
+    } finally {
+      setLoading(false);
+    }
+  };
+
   const handleDrag = (e) => {
     e.preventDefault();
     e.stopPropagation();
-    if (e.type === 'dragenter' || e.type === 'dragover') {
-      setDragActive(true);
-    } else if (e.type === 'dragleave') {
-      setDragActive(false);
-    }
+    if (e.type === 'dragenter' || e.type === 'dragover') setDragActive(true);
+    else if (e.type === 'dragleave') setDragActive(false);
   };
 
   const handleDrop = (e) => {
     e.preventDefault();
     e.stopPropagation();
     setDragActive(false);
-    if (e.dataTransfer.files && e.dataTransfer.files[0]) {
-      handleFiles(e.dataTransfer.files[0]);
-    }
+    if (e.dataTransfer.files) handleFiles(Array.from(e.dataTransfer.files));
   };
 
   const handleFileChange = (e) => {
-    if (e.target.files && e.target.files[0]) {
-      handleFiles(e.target.files[0]);
-    }
+    if (e.target.files) handleFiles(Array.from(e.target.files));
   };
 
-  // FIX: validate file type and size on the client before even setting state
-  const handleFiles = (selectedFile) => {
-    if (!ALLOWED_MIME_TYPES.includes(selectedFile.type)) {
-      setMessage({
-        type: 'error',
-        text: 'Unsupported file type. Allowed: JPEG, PNG, WEBP, GIF, MP4, MOV, WEBM.',
+  const handleFiles = (newFiles) => {
+    const validFiles = [];
+    const newPreviews = [];
+
+    newFiles.forEach(file => {
+      if (!ALLOWED_MIME_TYPES.includes(file.type)) {
+        setMessage({ type: 'error', text: `Skipped ${file.name}: Unsupported type.` });
+        return;
+      }
+      if (file.size > MAX_FILE_SIZE) {
+        setMessage({ type: 'error', text: `Skipped ${file.name}: Too large.` });
+        return;
+      }
+      validFiles.push(file);
+      newPreviews.push({
+        url: URL.createObjectURL(file),
+        type: file.type.startsWith('video') ? 'video' : 'image',
+        name: file.name
       });
-      return;
-    }
-    if (selectedFile.size > MAX_FILE_SIZE) {
-      setMessage({ type: 'error', text: 'File too large. Maximum size is 500 MB.' });
-      return;
-    }
+    });
+
+    setFiles([...files, ...validFiles]);
+    setPreviews([...previews, ...newPreviews]);
     setMessage({ type: '', text: '' });
-    setFile(selectedFile);
-    const url = URL.createObjectURL(selectedFile);
-    setPreview({ url, type: selectedFile.type.startsWith('video') ? 'video' : 'image' });
   };
 
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    if (!file || !title || !category) {
-      setMessage({ type: 'error', text: 'Please fill all required fields and select a file.' });
+  const removeFile = (index) => {
+    const newFiles = [...files];
+    const newPreviews = [...previews];
+    URL.revokeObjectURL(newPreviews[index].url);
+    newFiles.splice(index, 1);
+    newPreviews.splice(index, 1);
+    setFiles(newFiles);
+    setPreviews(newPreviews);
+  };
+
+  const handlePublish = async () => {
+    if (files.length === 0) {
+      setMessage({ type: 'error', text: 'Please select at least one file.' });
       return;
     }
 
     setLoading(true);
-    setMessage({ type: '', text: '' });
-
     const formData = new FormData();
-    formData.append('media', file);
-    formData.append('title', title);
-    formData.append('category', category);
-    if (description) formData.append('description', description);
+    files.forEach(file => formData.append('media', file));
+    
+    // Project metadata (inheriting from project for now as per simple workflow)
+    const selectedProject = projects.find(p => p.id === selectedProjectId);
+    formData.append('project_id', selectedProjectId);
+    formData.append('title', selectedProject.title);
+    formData.append('category', selectedProject.category);
+    formData.append('description', selectedProject.description || '');
 
     try {
       await api.post('/upload/portfolio', formData);
-      setMessage({ type: 'success', text: 'Published successfully!' });
-      setTimeout(() => navigate('/explore'), 1800);
+      setMessage({ type: 'success', text: 'Project published successfully!' });
+      setTimeout(() => navigate('/explore'), 2000);
     } catch (err) {
-      // FIX: api.post returns undefined on 401 redirect (window.location.href set),
-      //      so err.message may be undefined — provide a clear fallback message.
-      setMessage({
-        type: 'error',
-        text: err?.message || 'Upload failed. Please check you are logged in and try again.',
-      });
+      setMessage({ type: 'error', text: err.message || 'Upload failed.' });
     } finally {
       setLoading(false);
     }
   };
 
   return (
-    <div className="max-w-4xl mx-auto px-4 py-20 min-h-screen">
+    <div className="max-w-6xl mx-auto px-4 py-20 min-h-screen font-sans">
       <Helmet>
-        <title>Upload Your Work — Driplens</title>
-        <meta name="description" content="Upload Your Work on Driplens" />
+        <title>Upload Content — Driplens</title>
       </Helmet>
 
-      <motion.div
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        className="mb-16"
-      >
-        <h1 className="text-4xl font-bold text-black mb-4 tracking-tight uppercase">Upload Content</h1>
-        <p className="text-[#666666]">Share your best work with the Driplens community. High resolution landscape images preferred.</p>
-      </motion.div>
-
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
-        {/* Drop zone */}
-        <div className="lg:col-span-2">
-          <div
-            onDragEnter={handleDrag}
-            onDragLeave={handleDrag}
-            onDragOver={handleDrag}
-            onDrop={handleDrop}
-            onClick={() => fileInputRef.current.click()}
-            className={`aspect-[16/9] border-2 border-dashed transition-all cursor-pointer flex flex-col items-center justify-center p-12 relative overflow-hidden ${dragActive ? 'border-black bg-gray-50' : 'border-[#DDD] bg-white hover:border-black'
-              }`}
-          >
-            <input
-              type="file"
-              className="hidden"
-              ref={fileInputRef}
-              onChange={handleFileChange}
-              accept="image/jpeg,image/png,image/webp,image/gif,video/mp4,video/quicktime,video/webm"
-            />
-
-            {preview ? (
-              preview.type === 'video'
-                ? <video src={preview.url} className="absolute inset-0 w-full h-full object-cover" controls={false} muted />
-                : <img src={preview.url} alt="Preview" className="absolute inset-0 w-full h-full object-cover" />
-            ) : (
-              <>
-                <svg className="w-12 h-12 text-[#CCC] mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M12 4v16m8-8H4" />
-                </svg>
-                <p className="text-sm font-bold uppercase tracking-widest text-black mb-2">Drag & Drop Files</p>
-                <p className="text-xs text-[#999] uppercase tracking-widest">or click to browse from device</p>
-                <p className="text-xs text-[#BBB] mt-3">JPEG · PNG · WEBP · GIF · MP4 · MOV · WEBM — max 500 MB</p>
-              </>
-            )}
-          </div>
+      <div className="flex items-center justify-between mb-12">
+        <div>
+          <h1 className="text-4xl font-black text-black tracking-tighter uppercase mb-2">
+            {step === 1 ? 'Select Project' : 'Upload Media'}
+          </h1>
+          <p className="text-[#666] text-sm uppercase tracking-widest font-bold">
+            Step {step} of 2 — {step === 1 ? 'Organize your work' : 'Add your files'}
+          </p>
         </div>
-
-        {/* Form */}
-        <form onSubmit={handleSubmit} className="space-y-8">
-          <AnimatePresence>
-            {message.text && (
-              <motion.div
-                initial={{ opacity: 0, height: 0 }}
-                animate={{ opacity: 1, height: 'auto' }}
-                exit={{ opacity: 0, height: 0 }}
-                className={`text-xs font-bold uppercase tracking-widest p-4 ${message.type === 'error' ? 'bg-red-50 text-red-500' : 'bg-green-50 text-green-500'
-                  }`}
-              >
-                {message.text}
-              </motion.div>
-            )}
-          </AnimatePresence>
-
-          <div>
-            <label className="block text-[10px] font-bold uppercase tracking-widest text-[#999] mb-3">Project Title *</label>
-            <input
-              type="text"
-              required
-              value={title}
-              onChange={(e) => setTitle(e.target.value)}
-              placeholder="e.g. Minimalist Architecture"
-              className="w-full border-b border-[#DDD] py-3 focus:outline-none focus:border-black transition-colors bg-transparent"
-            />
-          </div>
-
-          <div>
-            <label className="block text-[10px] font-bold uppercase tracking-widest text-[#999] mb-3">Category *</label>
-            <select
-              value={category}
-              onChange={(e) => setCategory(e.target.value)}
-              className="w-full border-b border-[#DDD] py-3 bg-transparent focus:outline-none focus:border-black transition-colors appearance-none"
-            >
-              <option>Cinematography</option>
-              <option>Photography</option>
-              <option>3D Motion</option>
-              <option>Design</option>
-            </select>
-          </div>
-
-          <div>
-            <label className="block text-[10px] font-bold uppercase tracking-widest text-[#999] mb-3">Description</label>
-            <textarea
-              rows="4"
-              value={description}
-              onChange={(e) => setDescription(e.target.value)}
-              placeholder="Tell the story behind this work..."
-              className="w-full border border-[#EEE] p-4 focus:outline-none focus:border-black transition-colors resize-none bg-transparent"
-            />
-          </div>
-
-          <button
-            type="submit"
-            disabled={loading}
-            className={`w-full bg-black text-white py-5 font-bold text-xs uppercase tracking-[0.2em] shadow-xl hover:bg-black/90 transition-all ${loading ? 'opacity-50 cursor-not-allowed' : ''
-              }`}
+        {step === 2 && (
+          <button 
+            onClick={() => setStep(1)}
+            className="text-[10px] font-bold uppercase tracking-widest text-[#999] hover:text-black transition-colors"
           >
-            {loading ? 'Publishing...' : 'Publish Content'}
+            ← Change Project
           </button>
-        </form>
+        )}
       </div>
+
+      <AnimatePresence mode="wait">
+        {step === 1 ? (
+          <motion.div
+            key="step1"
+            initial={{ opacity: 0, x: -20 }}
+            animate={{ opacity: 1, x: 0 }}
+            exit={{ opacity: 0, x: 20 }}
+            className="grid grid-cols-1 lg:grid-cols-2 gap-12"
+          >
+            {/* Existing Projects */}
+            <div className="space-y-6">
+              <label className="block text-[10px] font-bold uppercase tracking-widest text-[#999]">Choose an existing project</label>
+              <div className="grid grid-cols-1 gap-4">
+                {projects.length > 0 ? (
+                  projects.map(project => (
+                    <button
+                      key={project.id}
+                      onClick={() => {
+                        setSelectedProjectId(project.id);
+                        setStep(2);
+                      }}
+                      className="group text-left p-6 border border-[#EEE] hover:border-black transition-all bg-white flex justify-between items-center"
+                    >
+                      <div>
+                        <h3 className="font-bold text-lg">{project.title}</h3>
+                        <p className="text-xs text-[#999] uppercase tracking-widest">{project.category}</p>
+                      </div>
+                      <span className="text-xs font-black opacity-0 group-hover:opacity-100 transition-opacity">SELECT →</span>
+                    </button>
+                  ))
+                ) : (
+                  <div className="p-12 border border-dashed border-[#DDD] text-center text-[#999]">
+                    No projects found. Create your first one to get started.
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* Create New Project */}
+            <div className="bg-gray-50 p-8 rounded-2xl">
+              <h2 className="text-xl font-bold mb-8 uppercase tracking-tight">Create New Project</h2>
+              <form onSubmit={handleCreateProject} className="space-y-6">
+                <div>
+                  <label className="block text-[10px] font-bold uppercase tracking-widest text-[#999] mb-2">Project Title *</label>
+                  <input
+                    type="text"
+                    required
+                    value={projectTitle}
+                    onChange={(e) => setProjectTitle(e.target.value)}
+                    placeholder="e.g. Summer Campaign 2024"
+                    className="w-full bg-transparent border-b border-[#DDD] py-3 focus:outline-none focus:border-black transition-colors"
+                  />
+                </div>
+                <div>
+                  <label className="block text-[10px] font-bold uppercase tracking-widest text-[#999] mb-2">Category *</label>
+                  <select
+                    value={projectCategory}
+                    onChange={(e) => setProjectCategory(e.target.value)}
+                    className="w-full bg-transparent border-b border-[#DDD] py-3 focus:outline-none focus:border-black transition-colors"
+                  >
+                    {CATEGORIES.map(c => <option key={c}>{c}</option>)}
+                  </select>
+                </div>
+                <div>
+                  <label className="block text-[10px] font-bold uppercase tracking-widest text-[#999] mb-2">Description</label>
+                  <textarea
+                    rows="3"
+                    value={projectDescription}
+                    onChange={(e) => setProjectDescription(e.target.value)}
+                    placeholder="Briefly describe this project..."
+                    className="w-full bg-transparent border border-[#DDD] p-4 focus:outline-none focus:border-black transition-colors resize-none"
+                  />
+                </div>
+                <button
+                  type="submit"
+                  disabled={loading}
+                  className="w-full bg-black text-white py-4 font-bold text-xs uppercase tracking-widest hover:bg-black/90 transition-all shadow-lg"
+                >
+                  {loading ? 'Creating...' : 'Create & Continue'}
+                </button>
+              </form>
+            </div>
+          </motion.div>
+        ) : (
+          <motion.div
+            key="step2"
+            initial={{ opacity: 0, x: 20 }}
+            animate={{ opacity: 1, x: 0 }}
+            exit={{ opacity: 0, x: -20 }}
+          >
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
+              <div className="lg:col-span-2 space-y-8">
+                {/* Multi Drop Zone */}
+                <div
+                  onDragEnter={handleDrag}
+                  onDragLeave={handleDrag}
+                  onDragOver={handleDrag}
+                  onDrop={handleDrop}
+                  onClick={() => fileInputRef.current.click()}
+                  className={`aspect-video border-2 border-dashed transition-all cursor-pointer flex flex-col items-center justify-center p-12 relative ${
+                    dragActive ? 'border-black bg-gray-50' : 'border-[#DDD] bg-white hover:border-black'
+                  }`}
+                >
+                  <input
+                    type="file"
+                    multiple
+                    className="hidden"
+                    ref={fileInputRef}
+                    onChange={handleFileChange}
+                    accept={ALLOWED_MIME_TYPES.join(',')}
+                  />
+                  <svg className="w-12 h-12 text-[#CCC] mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M12 4v16m8-8H4" />
+                  </svg>
+                  <p className="text-sm font-bold uppercase tracking-widest text-black mb-2">Drop multiple files here</p>
+                  <p className="text-xs text-[#999] uppercase tracking-widest">or click to browse</p>
+                </div>
+
+                {/* Previews */}
+                {previews.length > 0 && (
+                  <div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
+                    <AnimatePresence>
+                      {previews.map((preview, index) => (
+                        <motion.div
+                          key={preview.url}
+                          initial={{ opacity: 0, scale: 0.9 }}
+                          animate={{ opacity: 1, scale: 1 }}
+                          exit={{ opacity: 0, scale: 0.9 }}
+                          className="group relative aspect-square bg-gray-100 rounded-lg overflow-hidden border border-[#EEE]"
+                        >
+                          {preview.type === 'video' ? (
+                            <video src={preview.url} className="w-full h-full object-cover" muted />
+                          ) : (
+                            <img src={preview.url} alt="Preview" className="w-full h-full object-cover" />
+                          )}
+                          <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+                            <button
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                removeFile(index);
+                              }}
+                              className="bg-white text-black p-2 rounded-full hover:bg-red-500 hover:text-white transition-colors"
+                            >
+                              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                              </svg>
+                            </button>
+                          </div>
+                        </motion.div>
+                      ))}
+                    </AnimatePresence>
+                  </div>
+                )}
+              </div>
+
+              <div className="space-y-8">
+                <div className="bg-white border border-gray-100 p-8 rounded-2xl shadow-sm">
+                  <h3 className="text-[10px] font-bold uppercase tracking-[0.2em] text-[#0540F2] mb-6">Publishing To</h3>
+                  <div className="mb-8">
+                    <h2 className="text-2xl font-bold mb-1 tracking-tight text-[#020617]">
+                      {projects.find(p => p.id === selectedProjectId)?.title}
+                    </h2>
+                    <p className="text-xs font-bold uppercase tracking-widest text-gray-400">
+                      {projects.find(p => p.id === selectedProjectId)?.category}
+                    </p>
+                  </div>
+                  
+                  <div className="space-y-4 pt-6 border-t border-gray-50">
+                    <div className="flex justify-between items-center text-xs">
+                      <span className="text-gray-400 uppercase tracking-widest">Selected Files</span>
+                      <span className="font-bold text-[#020617]">{files.length}</span>
+                    </div>
+                  </div>
+
+                  <button
+                    onClick={handlePublish}
+                    disabled={loading || files.length === 0}
+                    className={`w-full mt-12 bg-black text-white py-5 font-bold text-xs uppercase tracking-[0.2em] hover:bg-black/90 transition-all ${
+                      loading || files.length === 0 ? 'opacity-50 cursor-not-allowed' : ''
+                    }`}
+                  >
+                    {loading ? 'Publishing...' : 'Publish Project'}
+                  </button>
+                </div>
+
+                {message.text && (
+                  <motion.div
+                    initial={{ opacity: 0, y: 10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    className={`p-4 text-[10px] font-bold uppercase tracking-widest ${
+                      message.type === 'error' ? 'bg-red-50 text-red-500' : 'bg-green-50 text-green-500'
+                    }`}
+                  >
+                    {message.text}
+                  </motion.div>
+                )}
+              </div>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
     </div>
   );
 }
\ No newline at end of file
diff --git a/client/src/services/externalMediaService.js b/client/src/services/externalMediaService.js
index 537cf0c..779f0a3 100644
--- a/client/src/services/externalMediaService.js
+++ b/client/src/services/externalMediaService.js
@@ -121,26 +121,39 @@ export const getAllExploreContent = async (query = 'creative', page = 1) => {
     let localData = [];
     if (localRes.ok) {
       const response = await localRes.json();
-      // Backend returns { success: true, data: { items, pagination } }
-      const items = response.data?.items || [];
-      localData = items.map(item => ({
-        ...item,
-        mediaUrl: item.media_url || item.mediaUrl,
-        mediaType: item.media_type || item.mediaType,
-        source: 'Local'
+      const projects = response.data?.items || [];
+      localData = projects.map(project => ({
+        ...project,
+        source: 'Local',
+        items: (project.items || []).map(i => ({
+          ...i,
+          mediaUrl: i.media_url || i.mediaUrl,
+          mediaType: i.media_type || i.mediaType
+        })),
+        // Preview fields for the card
+        mediaUrl: project.items?.[0]?.media_url || project.items?.[0]?.mediaUrl,
+        mediaType: project.items?.[0]?.media_type || project.items?.[0]?.mediaType
       }));
-    } else {
-      console.error('Local fetch failed:', localRes.status, localRes.statusText);
     }
 
-    // Fetch external content (fetch fewer per page to avoid massive results)
+    // Fetch external content
     const [pexelsData, pixabayData] = await Promise.all([
       fetchPexelsContent(query, page, 6),
       fetchPixabayContent(query, page, 6)
     ]);
 
+    // Normalize external content to "project" structure
+    const normalizedExternal = [...pexelsData, ...pixabayData].map(item => ({
+      ...item,
+      items: [{
+        mediaUrl: item.mediaUrl,
+        mediaType: item.mediaType,
+        title: item.title
+      }]
+    }));
+
     // Combine
-    const combined = [...localData, ...pexelsData, ...pixabayData];
+    const combined = [...localData, ...normalizedExternal];
     
     // Sort by source priority: Local (highest), then External
     return combined.sort((a, b) => {
diff --git a/client/src/services/projectService.js b/client/src/services/projectService.js
new file mode 100644
index 0000000..df8407c
--- /dev/null
+++ b/client/src/services/projectService.js
@@ -0,0 +1,55 @@
+/**
+ * client/src/services/projectService.js
+ *
+ * Thin wrapper over api.js for all project-related calls.
+ * All functions throw ApiError on failure — callers handle UI state.
+ */
+import { api } from '../lib/api';
+
+/** List all projects for the logged-in user */
+export const listProjects = () => api.get('/projects');
+
+/** Fetch a single project with deliverables + revisions */
+export const getProject = (projectId) => api.get(`/projects/${projectId}`);
+
+/**
+ * Brand creates a project after deal is confirmed.
+ * @param {object} payload - { hiring_request_id, package_title, package_price_str, deadline? }
+ */
+export const createProject = (payload) => api.post('/projects', payload);
+
+/**
+ * Creator updates progress %.
+ * @param {string} projectId
+ * @param {number} progress  0–100
+ */
+export const updateProgress = (projectId, progress) =>
+  api.patch(`/projects/${projectId}/progress`, { progress });
+
+/**
+ * Creator submits a deliverable via its public URL (e.g. after client-side upload).
+ * @param {string} projectId
+ * @param {{ file_url, file_name, file_size?, mime_type?, notes? }} payload
+ */
+export const submitDeliverable = (projectId, payload) =>
+  api.post(`/projects/${projectId}/submit`, payload);
+
+/**
+ * Brand requests a revision.
+ * @param {string} projectId
+ * @param {{ deliverable_id, feedback }} payload
+ */
+export const requestRevision = (projectId, payload) =>
+  api.post(`/projects/${projectId}/revision`, payload);
+
+/**
+ * Brand approves deliverable — releases payment.
+ */
+export const approveProject = (projectId) =>
+  api.post(`/projects/${projectId}/approve`, {});
+
+/**
+ * Either party cancels the project.
+ */
+export const cancelProject = (projectId, reason = '') =>
+  api.post(`/projects/${projectId}/cancel`, { reason });
diff --git a/server/routes/v1/creators.js b/server/routes/v1/creators.js
index 4dda05b..3a86a74 100644
--- a/server/routes/v1/creators.js
+++ b/server/routes/v1/creators.js
@@ -16,6 +16,7 @@ router.get('/', apiLimiter, validate(listCreatorsSchema, 'query'), async (req, r
 
 router.get('/:id', apiLimiter, async (req, res, next) => {
   try {
+    console.log('Searching for creator id:', req.params.id);
     const creator = await creatorService.getCreator(req.params.id);
     res.json({ success: true, data: { creator } });
   } catch (err) { console.error(err); next(err); }
diff --git a/server/routes/v1/index.js b/server/routes/v1/index.js
index a3d82f7..ac9f81a 100644
--- a/server/routes/v1/index.js
+++ b/server/routes/v1/index.js
@@ -4,6 +4,7 @@ import creatorRoutes from './creators.js';
 import hiringRoutes  from './hiring.js';
 import messageRoutes from './messages.js';
 import uploadRoutes  from './upload.js';
+import projectRoutes from './projects.js';
 
 const router = Router();
 
@@ -12,5 +13,6 @@ router.use('/creators', creatorRoutes);
 router.use('/hiring',   hiringRoutes);
 router.use('/messages', messageRoutes);
 router.use('/upload',   uploadRoutes);
+router.use('/projects', projectRoutes);
 
 export default router;
diff --git a/server/routes/v1/projects.js b/server/routes/v1/projects.js
new file mode 100644
index 0000000..6634477
--- /dev/null
+++ b/server/routes/v1/projects.js
@@ -0,0 +1,208 @@
+/**
+ * /api/v1/projects
+ *
+ * Endpoint map:
+ *
+ *   GET    /                → list all projects for the auth'd user
+ *   POST   /                → create a project on checkout confirmation (brand)
+ *   GET    /:id             → get full project detail with deliverables + revisions
+ *   PATCH  /:id/progress    → creator updates progress %
+ *   POST   /:id/submit      → creator submits a deliverable (file URL)
+ *   POST   /:id/revision    → brand requests a revision
+ *   POST   /:id/approve     → brand approves + releases payment
+ *   POST   /:id/cancel      → either party cancels
+ */
+
+import { Router } from 'express';
+import multer     from 'multer';
+
+import { requireAuth, requireRole }    from '../../middleware/auth.js';
+import { apiLimiter, uploadLimiter }   from '../../middleware/rateLimiter.js';
+import { validate }                    from '../../middleware/validate.js';
+import * as uploadService              from '../../services/uploadService.js';
+import * as projectService             from '../../services/projectService.js';
+import {
+  createProjectSchema,
+  updateProgressSchema,
+  submitDeliverableSchema,
+  requestRevisionSchema,
+}                                      from '../../schemas/projectSchemas.js';
+
+const router = Router();
+
+// Multer — memory storage for deliverable file uploads (max 200 MB)
+const upload = multer({
+  storage: multer.memoryStorage(),
+  limits:  { fileSize: 200 * 1024 * 1024 },
+});
+
+// ── List projects ─────────────────────────────────────────────────────────
+
+router.get('/', requireAuth, apiLimiter, async (req, res, next) => {
+  try {
+    const projects = await projectService.listProjects(req.user.id);
+    res.json({ success: true, data: { projects } });
+  } catch (err) { next(err); }
+});
+
+// ── Create project (brand, on checkout confirmation) ──────────────────────
+
+router.post(
+  '/',
+  requireAuth,
+  requireRole('brand'),
+  apiLimiter,
+  validate(createProjectSchema),
+  async (req, res, next) => {
+    try {
+      const project = await projectService.createProject({
+        ...req.body,
+        brand_id: req.user.id,
+      });
+      res.status(201).json({ success: true, data: { project } });
+    } catch (err) { next(err); }
+  },
+);
+
+// ── Get single project ────────────────────────────────────────────────────
+
+router.get('/:id', requireAuth, apiLimiter, async (req, res, next) => {
+  try {
+    const project = await projectService.getProject(req.params.id, req.user.id);
+    res.json({ success: true, data: { project } });
+  } catch (err) { next(err); }
+});
+
+// ── Update progress (creator) ─────────────────────────────────────────────
+
+router.patch(
+  '/:id/progress',
+  requireAuth,
+  requireRole('creator'),
+  apiLimiter,
+  validate(updateProgressSchema),
+  async (req, res, next) => {
+    try {
+      const project = await projectService.updateProgress(
+        req.params.id,
+        req.user.id,
+        req.body,
+      );
+      res.json({ success: true, data: { project } });
+    } catch (err) { next(err); }
+  },
+);
+
+// ── Submit deliverable via file upload (creator) ──────────────────────────
+//
+// Two modes:
+//   1. Multipart/form-data → file uploaded to Supabase Storage via uploadService
+//   2. JSON body with existing file_url (already uploaded elsewhere)
+//
+// Mode 1 is preferred for production; mode 2 is a convenience for testing.
+
+router.post(
+  '/:id/submit',
+  requireAuth,
+  requireRole('creator'),
+  uploadLimiter,
+  // Conditionally parse multipart (if client sends a file) or JSON (if URL provided)
+  (req, res, next) => {
+    const contentType = req.headers['content-type'] ?? '';
+    if (contentType.includes('multipart/form-data')) {
+      return upload.single('deliverable')(req, res, next);
+    }
+    next();
+  },
+  async (req, res, next) => {
+    try {
+      let file_url, file_name, file_size, mime_type, storage_path, notes;
+
+      if (req.file) {
+        // Mode 1: file uploaded in this request → push to Supabase Storage
+        const uploaded = await uploadService.uploadDeliverable(
+          req.user.id,
+          req.params.id,
+          req.file,
+        );
+        file_url      = uploaded.publicUrl;
+        file_name     = req.file.originalname;
+        file_size     = req.file.size;
+        mime_type     = req.file.mimetype;
+        storage_path  = uploaded.storagePath;
+        notes         = req.body?.notes ?? null;
+      } else {
+        // Mode 2: client already has the URL (e.g. Supabase Storage SDK used client-side)
+        const parsed = submitDeliverableSchema.safeParse(req.body);
+        if (!parsed.success) {
+          const messages = parsed.error.issues.map(e => `${e.path.join('.')}: ${e.message}`).join(', ');
+          return res.status(400).json({ success: false, error: { code: 'VALIDATION_ERROR', message: messages } });
+        }
+        ({ file_url, file_name, file_size, mime_type, storage_path, notes } = parsed.data);
+      }
+
+      const result = await projectService.submitDeliverable(
+        req.params.id,
+        req.user.id,
+        { file_url, file_name, file_size, mime_type, storage_path, notes },
+      );
+
+      res.status(201).json({ success: true, data: result });
+    } catch (err) { next(err); }
+  },
+);
+
+// ── Request revision (brand) ──────────────────────────────────────────────
+
+router.post(
+  '/:id/revision',
+  requireAuth,
+  requireRole('brand'),
+  apiLimiter,
+  validate(requestRevisionSchema),
+  async (req, res, next) => {
+    try {
+      const result = await projectService.requestRevision(
+        req.params.id,
+        req.user.id,
+        req.body,
+      );
+      res.status(201).json({ success: true, data: result });
+    } catch (err) { next(err); }
+  },
+);
+
+// ── Approve + release payment (brand) ────────────────────────────────────
+
+router.post(
+  '/:id/approve',
+  requireAuth,
+  requireRole('brand'),
+  apiLimiter,
+  async (req, res, next) => {
+    try {
+      const project = await projectService.approveProject(req.params.id, req.user.id);
+      res.json({ success: true, data: { project } });
+    } catch (err) { next(err); }
+  },
+);
+
+// ── Cancel project ────────────────────────────────────────────────────────
+
+router.post(
+  '/:id/cancel',
+  requireAuth,
+  apiLimiter,
+  async (req, res, next) => {
+    try {
+      const project = await projectService.cancelProject(
+        req.params.id,
+        req.user.id,
+        req.body?.reason,
+      );
+      res.json({ success: true, data: { project } });
+    } catch (err) { next(err); }
+  },
+);
+
+export default router;
diff --git a/server/routes/v1/upload.js b/server/routes/v1/upload.js
index 2ad637c..783ec70 100644
--- a/server/routes/v1/upload.js
+++ b/server/routes/v1/upload.js
@@ -3,13 +3,50 @@ import multer from 'multer';
 import { requireAuth, requireRole } from '../../middleware/auth.js';
 import { uploadLimiter, apiLimiter } from '../../middleware/rateLimiter.js';
 import { validate } from '../../middleware/validate.js';
-import { uploadMetaSchema } from '../../schemas/uploadSchemas.js';
+import { uploadMetaSchema, createPortfolioProjectSchema, updatePortfolioProjectSchema } from '../../schemas/uploadSchemas.js';
 import { listCreatorsSchema } from '../../schemas/creatorSchemas.js';
 import * as uploadService from '../../services/uploadService.js';
 import { z } from 'zod';
 
 const router = Router();
 
+// ── Projects ──────────────────────────────────────────────────────────
+
+router.get('/projects', requireAuth, apiLimiter, async (req, res, next) => {
+  try {
+    const projects = await uploadService.listPortfolioProjects(req.user.id);
+    res.json({ success: true, data: projects });
+  } catch (err) { next(err); }
+});
+
+router.post(
+  '/projects',
+  requireAuth,
+  requireRole('creator'),
+  apiLimiter,
+  validate(createPortfolioProjectSchema),
+  async (req, res, next) => {
+    try {
+      const project = await uploadService.createPortfolioProject(req.user.id, req.body);
+      res.status(201).json({ success: true, data: project });
+    } catch (err) { next(err); }
+  }
+);
+
+router.patch(
+  '/projects/:id',
+  requireAuth,
+  requireRole('creator'),
+  apiLimiter,
+  validate(updatePortfolioProjectSchema),
+  async (req, res, next) => {
+    try {
+      const project = await uploadService.updatePortfolioProject(req.params.id, req.user.id, req.body);
+      res.json({ success: true, data: project });
+    } catch (err) { next(err); }
+  }
+);
+
 // File size limit enforced at multer level — 500MB hard cap
 const upload = multer({
   storage: multer.memoryStorage(),
@@ -21,12 +58,21 @@ router.post(
   requireAuth,
   requireRole('creator'),
   uploadLimiter,
-  upload.single('media'),
+  upload.array('media', 20), // Support up to 20 files at once
   validate(uploadMetaSchema),
   async (req, res, next) => {
     try {
-      const item = await uploadService.uploadPortfolio(req.user.id, req.file, req.body);
-      res.status(201).json({ success: true, data: { item } });
+      if (!req.files || req.files.length === 0) {
+        return res.status(400).json({ success: false, error: { code: 'NO_FILES', message: 'No files uploaded' } });
+      }
+
+      const results = [];
+      for (const file of req.files) {
+        const item = await uploadService.uploadPortfolio(req.user.id, file, req.body);
+        results.push(item);
+      }
+
+      res.status(201).json({ success: true, data: { items: results } });
     } catch (err) { next(err); }
   }
 );
@@ -68,4 +114,18 @@ router.get('/', apiLimiter, validate(paginationSchema, 'query'), async (req, res
   } catch (err) { next(err); }
 });
 
+router.delete('/projects/:id', requireAuth, requireRole('creator'), apiLimiter, async (req, res, next) => {
+  try {
+    const result = await uploadService.deletePortfolioProject(req.params.id, req.user.id);
+    res.json({ success: true, data: result });
+  } catch (err) { next(err); }
+});
+
+router.delete('/portfolio/:id', requireAuth, requireRole('creator'), apiLimiter, async (req, res, next) => {
+  try {
+    const result = await uploadService.deletePortfolioItem(req.params.id, req.user.id);
+    res.json({ success: true, data: result });
+  } catch (err) { next(err); }
+});
+
 export default router;
diff --git a/server/schemas/creatorSchemas.js b/server/schemas/creatorSchemas.js
index 293252a..0d3f5bc 100644
--- a/server/schemas/creatorSchemas.js
+++ b/server/schemas/creatorSchemas.js
@@ -25,6 +25,7 @@ export const updateProfileSchema = z.object({
   // Social links (from 20240003_add_social_links migration)
   instagram:     z.string().max(50).optional(),
   twitter:       z.string().max(50).optional(),
+  linkedin:      z.string().max(100).optional(),
   website:       z.string().url().or(z.literal('')).optional(),
   // Advanced filter fields (from 20240005 migration)
   min_budget:    z.number().optional(),
diff --git a/server/schemas/projectSchemas.js b/server/schemas/projectSchemas.js
new file mode 100644
index 0000000..cd4248e
--- /dev/null
+++ b/server/schemas/projectSchemas.js
@@ -0,0 +1,36 @@
+import { z } from 'zod';
+
+// ── Project ────────────────────────────────────────────────────────────────
+
+export const createProjectSchema = z.object({
+  hiring_request_id:  z.string().uuid(),
+  package_title:      z.string().min(1).max(100).optional(),
+  package_price_str:  z.string().max(50).optional(),
+  escrow_amount_paise: z.number().int().nonnegative().optional(),
+  stripe_payment_intent_id: z.string().optional(),
+  deadline:           z.string().date().optional(), // ISO date 'YYYY-MM-DD'
+});
+
+export const updateProgressSchema = z.object({
+  progress: z.number().int().min(0).max(100),
+  // Optional status override; usually derived server-side but allow client hint
+  note: z.string().max(500).optional(),
+});
+
+// ── Deliverable ────────────────────────────────────────────────────────────
+
+export const submitDeliverableSchema = z.object({
+  file_url:    z.string().url('file_url must be a valid URL'),
+  file_name:   z.string().min(1).max(255),
+  file_size:   z.number().int().nonnegative().optional(),
+  mime_type:   z.string().max(100).optional(),
+  storage_path: z.string().optional(),
+  notes:       z.string().max(2000).optional(),
+});
+
+// ── Revision Request ──────────────────────────────────────────────────────
+
+export const requestRevisionSchema = z.object({
+  deliverable_id: z.string().uuid(),
+  feedback:       z.string().min(10).max(3000),
+});
diff --git a/server/schemas/uploadSchemas.js b/server/schemas/uploadSchemas.js
index 7ec7ff5..b899518 100644
--- a/server/schemas/uploadSchemas.js
+++ b/server/schemas/uploadSchemas.js
@@ -12,10 +12,23 @@ export const ALLOWED_CATEGORIES = [
 
 export const uploadMetaSchema = z.object({
   title:       z.string().min(1).max(100),
-  description: z.string().max(500).optional(),
+  description: z.string().max(500).nullable().optional(),
+  category:    z.enum(ALLOWED_CATEGORIES),
+  project_id:  z.string().uuid().optional()
+});
+
+export const createPortfolioProjectSchema = z.object({
+  title:       z.string().min(1).max(100),
+  description: z.string().max(2000).nullable().optional(),
   category:    z.enum(ALLOWED_CATEGORIES)
 });
 
+export const updatePortfolioProjectSchema = z.object({
+  title:       z.string().min(1).max(100).optional(),
+  description: z.string().max(2000).nullable().optional(),
+  category:    z.enum(ALLOWED_CATEGORIES).optional()
+});
+
 export const ALLOWED_MIME_TYPES = [
   'image/jpeg', 'image/png', 'image/webp', 'image/gif',
   'video/mp4', 'video/quicktime', 'video/webm'
diff --git a/server/services/creatorService.js b/server/services/creatorService.js
index 83e44c0..a688f4a 100644
--- a/server/services/creatorService.js
+++ b/server/services/creatorService.js
@@ -93,12 +93,19 @@ export const getCreator = async (id) => {
       min_budget, max_budget, follower_count, platforms,
       is_available, rating, tags,
       instagram, twitter, website, created_at,
-      portfolio_items (id, title, media_url, media_type, created_at)
+      portfolio_projects (
+        id, title, description, category, created_at,
+        items:portfolio_items(id, title, media_url, media_type, created_at)
+      )
     `)
     .eq('id', id)
     .single();
 
-  if (error || !data) throw notFound('Creator not found');
+  if (error) {
+    console.error('Database error in getCreator:', error.message, error.details);
+    throw notFound('Creator not found');
+  }
+  if (!data) throw notFound('Creator not found');
   return data;
 };
 
diff --git a/server/services/projectService.js b/server/services/projectService.js
new file mode 100644
index 0000000..5c8879f
--- /dev/null
+++ b/server/services/projectService.js
@@ -0,0 +1,463 @@
+/**
+ * projectService.js
+ *
+ * All database interactions for the Projects, Deliverables, and
+ * Revision Requests tables.  Designed to be called only from the
+ * projects route handler — never from other services directly.
+ *
+ * Service-role Supabase client is used so RLS is bypassed server-side;
+ * access control is enforced explicitly in every function via
+ * assertParty() / role checks.
+ */
+
+import { supabase }                   from '../utils/supabase.js';
+import { emitToUser }                 from '../utils/socket.js';
+import logger                         from '../utils/logger.js';
+import {
+  badRequest,
+  forbidden,
+  notFound,
+  conflict,
+}                                     from '../utils/AppError.js';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Internal helpers
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * Fetch a project and confirm the requesting user is a party to it.
+ * Returns the project row.
+ */
+const assertParty = async (projectId, userId) => {
+  const { data, error } = await supabase
+    .from('projects')
+    .select(`
+      id, brand_id, creator_id, status, progress,
+      escrow_amount_paise, package_title, package_price_str,
+      stripe_payment_intent_id, stripe_transfer_id, deadline,
+      created_at, updated_at,
+      brand:brand_id     (id, username, avatar_url),
+      creator:creator_id (id, username, avatar_url),
+      hiring_request:hiring_request_id (id, project_title, project_description)
+    `)
+    .eq('id', projectId)
+    .single();
+
+  if (error || !data) throw notFound('Project not found');
+  if (data.brand_id !== userId && data.creator_id !== userId) {
+    throw forbidden('You are not a party to this project');
+  }
+  return data;
+};
+
+/**
+ * Emit a project update event to BOTH parties (brand and creator),
+ * except to the sender themselves.
+ */
+const broadcastProjectUpdate = (project, senderId, event = 'project_update') => {
+  const recipients = [project.brand_id, project.creator_id].filter(
+    (id) => id && id !== senderId,
+  );
+  recipients.forEach((recipientId) => emitToUser(recipientId, event, project));
+};
+
+/**
+ * Fetch the latest deliverable for a project.
+ */
+const getLatestDeliverable = async (projectId) => {
+  const { data } = await supabase
+    .from('deliverables')
+    .select('*')
+    .eq('project_id', projectId)
+    .order('version', { ascending: false })
+    .limit(1)
+    .maybeSingle();
+  return data ?? null;
+};
+
+/**
+ * Fetch all open revision requests for a project.
+ */
+const getOpenRevisions = async (projectId) => {
+  const { data } = await supabase
+    .from('revision_requests')
+    .select('*')
+    .eq('project_id', projectId)
+    .eq('status', 'open')
+    .order('requested_at', { ascending: false });
+  return data ?? [];
+};
+
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Public API
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * Create a new project after checkout is confirmed.
+ * Called by: POST /api/v1/projects
+ * Role: brand (or service-level call on checkout confirmation)
+ */
+export const createProject = async ({
+  hiring_request_id,
+  brand_id,
+  package_title,
+  package_price_str,
+  escrow_amount_paise = 0,
+  stripe_payment_intent_id,
+  deadline,
+}) => {
+  // Verify the hiring request exists and belongs to the brand
+  const { data: hr, error: hrErr } = await supabase
+    .from('hiring_requests')
+    .select('id, brand_id, creator_id, status')
+    .eq('id', hiring_request_id)
+    .single();
+
+  if (hrErr || !hr) throw notFound('Hiring request not found');
+  if (hr.brand_id !== brand_id) throw forbidden('This hiring request does not belong to you');
+  if (!hr.creator_id) throw badRequest('Cannot start a project without a targeted creator');
+
+  // Prevent duplicate project for same hiring_request
+  const { data: existing } = await supabase
+    .from('projects')
+    .select('id')
+    .eq('hiring_request_id', hiring_request_id)
+    .maybeSingle();
+
+  if (existing) throw conflict('A project already exists for this hiring request');
+
+  const payload = {
+    hiring_request_id,
+    brand_id:   hr.brand_id,
+    creator_id: hr.creator_id,
+    status:     'in_progress',
+    package_title,
+    package_price_str,
+    escrow_amount_paise,
+    ...(stripe_payment_intent_id && { stripe_payment_intent_id }),
+    ...(deadline && { deadline }),
+  };
+
+  const { data: project, error } = await supabase
+    .from('projects')
+    .insert(payload)
+    .select(`
+      *, 
+      brand:brand_id     (id, username, avatar_url),
+      creator:creator_id (id, username, avatar_url)
+    `)
+    .single();
+
+  if (error) throw error;
+
+  // Notify the creator that work has started
+  emitToUser(project.creator_id, 'project_created', project);
+
+  logger.info('Project created', { projectId: project.id, brandId: brand_id });
+  return project;
+};
+
+
+/**
+ * Fetch a project with full context (deliverables, revisions).
+ * Called by: GET /api/v1/projects/:id
+ */
+export const getProject = async (projectId, userId) => {
+  const project = await assertParty(projectId, userId);
+
+  const [latestDeliverable, openRevisions, allDeliverables] = await Promise.all([
+    getLatestDeliverable(projectId),
+    getOpenRevisions(projectId),
+    supabase
+      .from('deliverables')
+      .select('*')
+      .eq('project_id', projectId)
+      .order('version', { ascending: false })
+      .then(({ data }) => data ?? []),
+  ]);
+
+  return {
+    ...project,
+    latest_deliverable: latestDeliverable,
+    open_revisions:     openRevisions,
+    all_deliverables:   allDeliverables,
+  };
+};
+
+
+/**
+ * List all projects for the authenticated user (brand or creator).
+ * Called by: GET /api/v1/projects
+ */
+export const listProjects = async (userId) => {
+  const { data, error } = await supabase
+    .from('projects')
+    .select(`
+      id, status, progress, package_title, package_price_str, deadline, created_at, updated_at,
+      brand:brand_id     (id, username, avatar_url),
+      creator:creator_id (id, username, avatar_url),
+      hiring_request:hiring_request_id (id, project_title)
+    `)
+    .or(`brand_id.eq.${userId},creator_id.eq.${userId}`)
+    .order('updated_at', { ascending: false });
+
+  if (error) throw error;
+  return data ?? [];
+};
+
+
+/**
+ * Creator updates the progress percentage (and optionally leaves a note).
+ * Called by: PATCH /api/v1/projects/:id/progress
+ * Role: creator
+ */
+export const updateProgress = async (projectId, userId, { progress, note }) => {
+  const project = await assertParty(projectId, userId);
+
+  if (project.creator_id !== userId) {
+    throw forbidden('Only the creator can update progress');
+  }
+  if (['approved', 'completed', 'cancelled'].includes(project.status)) {
+    throw badRequest(`Cannot update progress on a project that is "${project.status}"`);
+  }
+
+  const { data: updated, error } = await supabase
+    .from('projects')
+    .update({ progress })
+    .eq('id', projectId)
+    .select(`
+      *, 
+      brand:brand_id     (id, username, avatar_url),
+      creator:creator_id (id, username, avatar_url)
+    `)
+    .single();
+
+  if (error) throw error;
+
+  broadcastProjectUpdate(updated, userId, 'project_progress');
+  logger.info('Progress updated', { projectId, progress, userId });
+  return updated;
+};
+
+
+/**
+ * Creator submits a deliverable (file already uploaded; provide URL).
+ * Changes project status → 'submitted'.
+ * Called by: POST /api/v1/projects/:id/submit
+ * Role: creator
+ */
+export const submitDeliverable = async (
+  projectId,
+  userId,
+  { file_url, file_name, file_size, mime_type, storage_path, notes },
+) => {
+  const project = await assertParty(projectId, userId);
+
+  if (project.creator_id !== userId) {
+    throw forbidden('Only the creator can submit deliverables');
+  }
+  if (['approved', 'completed', 'cancelled'].includes(project.status)) {
+    throw badRequest(`Cannot submit to a project that is "${project.status}"`);
+  }
+
+  // Insert deliverable (version auto-set by DB trigger)
+  const { data: deliverable, error: delErr } = await supabase
+    .from('deliverables')
+    .insert({
+      project_id: projectId,
+      creator_id: userId,
+      file_url,
+      file_name,
+      file_size:    file_size    ?? null,
+      mime_type:    mime_type    ?? null,
+      storage_path: storage_path ?? null,
+      notes:        notes        ?? null,
+    })
+    .select()
+    .single();
+
+  if (delErr) throw delErr;
+
+  // If there were open revisions, mark them as addressed
+  await supabase
+    .from('revision_requests')
+    .update({ status: 'addressed', addressed_at: new Date().toISOString() })
+    .eq('project_id', projectId)
+    .eq('status', 'open');
+
+  // Update project status → submitted
+  const { data: updatedProject, error: projErr } = await supabase
+    .from('projects')
+    .update({ status: 'submitted' })
+    .eq('id', projectId)
+    .select(`
+      *, 
+      brand:brand_id     (id, username, avatar_url),
+      creator:creator_id (id, username, avatar_url)
+    `)
+    .single();
+
+  if (projErr) throw projErr;
+
+  broadcastProjectUpdate(updatedProject, userId, 'project_submitted');
+  emitToUser(updatedProject.brand_id, 'deliverable_submitted', {
+    project:     updatedProject,
+    deliverable,
+  });
+
+  logger.info('Deliverable submitted', {
+    projectId,
+    deliverableId: deliverable.id,
+    version: deliverable.version,
+    userId,
+  });
+
+  return { project: updatedProject, deliverable };
+};
+
+
+/**
+ * Brand requests a revision on the latest deliverable.
+ * Changes project status → 'revision_requested'.
+ * Called by: POST /api/v1/projects/:id/revision
+ * Role: brand
+ */
+export const requestRevision = async (
+  projectId,
+  userId,
+  { deliverable_id, feedback },
+) => {
+  const project = await assertParty(projectId, userId);
+
+  if (project.brand_id !== userId) {
+    throw forbidden('Only the brand can request revisions');
+  }
+  if (project.status !== 'submitted') {
+    throw badRequest('Revisions can only be requested after the creator submits deliverables');
+  }
+
+  // Verify deliverable belongs to this project
+  const { data: deliverable, error: delErr } = await supabase
+    .from('deliverables')
+    .select('id, project_id')
+    .eq('id', deliverable_id)
+    .eq('project_id', projectId)
+    .single();
+
+  if (delErr || !deliverable) throw notFound('Deliverable not found on this project');
+
+  const { data: revision, error: revErr } = await supabase
+    .from('revision_requests')
+    .insert({
+      project_id:     projectId,
+      deliverable_id,
+      brand_id:       userId,
+      feedback,
+    })
+    .select()
+    .single();
+
+  if (revErr) throw revErr;
+
+  // Update project status → revision_requested
+  const { data: updatedProject, error: projErr } = await supabase
+    .from('projects')
+    .update({ status: 'revision_requested' })
+    .eq('id', projectId)
+    .select(`
+      *, 
+      brand:brand_id     (id, username, avatar_url),
+      creator:creator_id (id, username, avatar_url)
+    `)
+    .single();
+
+  if (projErr) throw projErr;
+
+  broadcastProjectUpdate(updatedProject, userId, 'revision_requested');
+  emitToUser(updatedProject.creator_id, 'revision_requested', {
+    project:  updatedProject,
+    revision,
+  });
+
+  logger.info('Revision requested', { projectId, revisionId: revision.id, userId });
+  return { project: updatedProject, revision };
+};
+
+
+/**
+ * Brand approves the deliverable — project → 'approved'.
+ * In a real Stripe integration you'd trigger payout here.
+ * Called by: POST /api/v1/projects/:id/approve
+ * Role: brand
+ */
+export const approveProject = async (projectId, userId) => {
+  const project = await assertParty(projectId, userId);
+
+  if (project.brand_id !== userId) {
+    throw forbidden('Only the brand can approve and release payment');
+  }
+  if (project.status !== 'submitted') {
+    throw badRequest('Project must be in "submitted" state to be approved');
+  }
+
+  // ── Stripe payout would go here ──────────────────────────────────────────
+  // const transfer = await stripe.transfers.create({ ... });
+  // const stripeTransferId = transfer.id;
+  // ─────────────────────────────────────────────────────────────────────────
+
+  const { data: updatedProject, error } = await supabase
+    .from('projects')
+    .update({
+      status: 'completed',
+      // stripe_transfer_id: stripeTransferId,  // ← uncomment when Stripe is wired
+    })
+    .eq('id', projectId)
+    .select(`
+      *, 
+      brand:brand_id     (id, username, avatar_url),
+      creator:creator_id (id, username, avatar_url)
+    `)
+    .single();
+
+  if (error) throw error;
+
+  broadcastProjectUpdate(updatedProject, userId, 'project_approved');
+  emitToUser(updatedProject.creator_id, 'payment_released', {
+    project: updatedProject,
+    message: 'Your payment has been released! Congratulations.',
+  });
+
+  logger.info('Project approved & payment released', { projectId, userId });
+  return updatedProject;
+};
+
+
+/**
+ * Either party can cancel a project that hasn't been completed yet.
+ * Called by: POST /api/v1/projects/:id/cancel
+ */
+export const cancelProject = async (projectId, userId, reason) => {
+  const project = await assertParty(projectId, userId);
+
+  if (['completed', 'cancelled'].includes(project.status)) {
+    throw badRequest(`Cannot cancel a project that is already "${project.status}"`);
+  }
+
+  const { data: updatedProject, error } = await supabase
+    .from('projects')
+    .update({ status: 'cancelled' })
+    .eq('id', projectId)
+    .select(`
+      *, 
+      brand:brand_id     (id, username, avatar_url),
+      creator:creator_id (id, username, avatar_url)
+    `)
+    .single();
+
+  if (error) throw error;
+
+  broadcastProjectUpdate(updatedProject, userId, 'project_cancelled');
+  logger.warn('Project cancelled', { projectId, userId, reason });
+  return updatedProject;
+};
diff --git a/server/services/uploadService.js b/server/services/uploadService.js
index 0ac3697..93125a0 100644
--- a/server/services/uploadService.js
+++ b/server/services/uploadService.js
@@ -1,197 +1,394 @@
-import { supabase } from '../utils/supabase.js';
-import { AppError } from '../utils/AppError.js';
-import { ALLOWED_MIME_TYPES, MAX_FILE_SIZE } from '../schemas/uploadSchemas.js';
-import { v4 as uuidv4 } from 'uuid';
-import { env } from '../config/env.js';
-import fs from 'fs';
-import path from 'path';
-
-export const validateFile = (file) => {
-  if (!file) throw new AppError('No file uploaded', 400, 'NO_FILE');
-  if (!ALLOWED_MIME_TYPES.includes(file.mimetype)) {
-    throw new AppError(
-      `File type not allowed. Allowed: ${ALLOWED_MIME_TYPES.join(', ')}`,
-      415,
-      'INVALID_FILE_TYPE'
-    );
-  }
-  if (file.size > MAX_FILE_SIZE) {
-    throw new AppError('File too large. Maximum size is 50MB', 413, 'FILE_TOO_LARGE');
-  }
-};
-
-export const uploadPortfolio = async (userId, file, { title, description, category }) => {
-  validateFile(file);
-
-  const ext = file.originalname.split('.').pop().toLowerCase();
-  const safeName = `${userId}_${uuidv4()}.${ext}`;   // UUID prevents path guessing
-  const filePath = `portfolio/${safeName}`;
-
-  if (env.SUPABASE_URL.includes('dummy')) {
-    const uploadDir = path.join(process.cwd(), 'public', 'uploads');
-    if (!fs.existsSync(uploadDir)) fs.mkdirSync(uploadDir, { recursive: true });
-    
-    fs.writeFileSync(path.join(uploadDir, safeName), file.buffer);
-    const publicUrl = `http://localhost:${env.PORT || 5001}/uploads/${safeName}`;
-
-    const dbPath = path.join(process.cwd(), 'portfolio.json');
-    let items = [];
-    if (fs.existsSync(dbPath)) items = JSON.parse(fs.readFileSync(dbPath, 'utf8'));
-
-    const newItem = {
-      id: uuidv4(),
-      creator_id: userId,
-      title,
-      description: description || null,
-      category,
-      media_url: publicUrl,
-      media_type: file.mimetype.startsWith('video') ? 'video' : 'image',
-      created_at: new Date().toISOString()
-    };
-    
-    items.push(newItem);
-    fs.writeFileSync(dbPath, JSON.stringify(items, null, 2));
-    
-    return newItem;
-  }
-
-  const { error: uploadError } = await supabase.storage
-    .from('DripLens upload')
-    .upload(filePath, file.buffer, {
-      contentType: file.mimetype,
-      cacheControl: '31536000',
-      upsert: false,
-    });
-
-  // FIX: wrap raw Supabase storage error in AppError so errorHandler formats it
-  //      consistently instead of leaking the raw Supabase error object to the client
-  if (uploadError) {
-    throw new AppError(
-      uploadError.message || 'Storage upload failed',
-      500,
-      'STORAGE_UPLOAD_FAILED'
-    );
-  }
-
-  const { data: { publicUrl } } = supabase.storage
-    .from('DripLens upload')
-    .getPublicUrl(filePath);
-
-  const { data, error: dbError } = await supabase
-    .from('portfolio_items')
-    .insert({
-      creator_id: userId,
-      title,
-      description: description || null,
-      category,
-      media_url: publicUrl,
-      media_type: file.mimetype.startsWith('video') ? 'video' : 'image',
-      storage_path: filePath,
-    })
-    .select()
-    .single();
-
-  if (dbError) {
-    // Attempt cleanup — don't leave orphaned storage objects on DB failure
-    await supabase.storage.from('DripLens upload').remove([filePath]);
-    throw new AppError(dbError.message || 'Database insert failed', 500, 'DB_INSERT_FAILED');
-  }
-
-  return data;
-};
-
-export const uploadProfileImage = async (userId, file, type) => {
-  validateFile(file);
-
-  const ext = file.originalname.split('.').pop().toLowerCase();
-  const safeName = `${userId}_${type}_${uuidv4()}.${ext}`;
-  const filePath = `images/${safeName}`;
-
-  if (env.SUPABASE_URL.includes('dummy')) {
-    const uploadDir = path.join(process.cwd(), 'public', 'uploads');
-    if (!fs.existsSync(uploadDir)) fs.mkdirSync(uploadDir, { recursive: true });
-    fs.writeFileSync(path.join(uploadDir, safeName), file.buffer);
-    const publicUrl = `http://localhost:${env.PORT || 5001}/uploads/${safeName}`;
-    return { publicUrl, storagePath: filePath };
-  }
-
-  const { error: uploadError } = await supabase.storage
-    .from('DripLens')
-    .upload(filePath, file.buffer, {
-      contentType: file.mimetype,
-      cacheControl: '3600',
-      upsert: true,
-    });
-
-  // FIX: same AppError wrapping as above
-  if (uploadError) {
-    throw new AppError(
-      uploadError.message || 'Profile image upload failed',
-      500,
-      'STORAGE_UPLOAD_FAILED'
-    );
-  }
-
-  const { data: { publicUrl } } = supabase.storage
-    .from('DripLens')
-    .getPublicUrl(filePath);
-
-  return { publicUrl, storagePath: filePath };
-};
-
-export const listPortfolio = async ({ page = 1, limit = 10, creator_id }) => {
-  const pageNum = parseInt(page) || 1;
-  const limitNum = parseInt(limit) || 10;
-  const from = (pageNum - 1) * limitNum;
-  const to = from + limitNum - 1;
-
-  if (env.SUPABASE_URL.includes('dummy')) {
-    const dbPath = path.join(process.cwd(), 'portfolio.json');
-    let items = [];
-    if (fs.existsSync(dbPath)) items = JSON.parse(fs.readFileSync(dbPath, 'utf8'));
-
-    if (creator_id) {
-      items = items.filter(i => i.creator_id === creator_id);
-    }
-    
-    // Sort descending by created_at
-    items.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
-
-    const total = items.length;
-    const paginatedItems = items.slice(from, to + 1);
-
-    return {
-      items: paginatedItems,
-      pagination: {
-        page: pageNum,
-        limit: limitNum,
-        total: total,
-        totalPages: Math.ceil(total / limitNum)
-      }
-    };
-  }
-
-  let query = supabase
-    .from('portfolio_items')
-    .select('*, author:profiles(username, avatar_url)', { count: 'exact' });
-
-  if (creator_id) {
-    query = query.eq('creator_id', creator_id);
-  }
-
-  const { data, error, count } = await query
-    .order('created_at', { ascending: false })
-    .range(from, to);
-
-  if (error) throw error;
-
-  return {
-    items: data,
-    pagination: { 
-      page: pageNum, 
-      limit: limitNum, 
-      total: count, 
-      totalPages: Math.ceil(count / limitNum) 
-    },
-  };
-};
\ No newline at end of file
+import { supabase } from '../utils/supabase.js';
+import { AppError } from '../utils/AppError.js';
+import { ALLOWED_MIME_TYPES, MAX_FILE_SIZE } from '../schemas/uploadSchemas.js';
+import { v4 as uuidv4 } from 'uuid';
+import { env } from '../config/env.js';
+import fs from 'fs';
+import path from 'path';
+
+export const validateFile = (file) => {
+  if (!file) throw new AppError('No file uploaded', 400, 'NO_FILE');
+  if (!ALLOWED_MIME_TYPES.includes(file.mimetype)) {
+    throw new AppError(
+      `File type not allowed. Allowed: ${ALLOWED_MIME_TYPES.join(', ')}`,
+      415,
+      'INVALID_FILE_TYPE'
+    );
+  }
+  if (file.size > MAX_FILE_SIZE) {
+    throw new AppError('File too large. Maximum size is 50MB', 413, 'FILE_TOO_LARGE');
+  }
+};
+
+export const uploadPortfolio = async (userId, file, { title, description, category, project_id }) => {
+  validateFile(file);
+
+  const ext = file.originalname.split('.').pop().toLowerCase();
+  const safeName = `${userId}_${uuidv4()}.${ext}`;   // UUID prevents path guessing
+  const filePath = `portfolio/${safeName}`;
+
+  if (env.SUPABASE_URL.includes('dummy')) {
+    const uploadDir = path.join(process.cwd(), 'public', 'uploads');
+    if (!fs.existsSync(uploadDir)) fs.mkdirSync(uploadDir, { recursive: true });
+    
+    fs.writeFileSync(path.join(uploadDir, safeName), file.buffer);
+    const publicUrl = `http://localhost:${env.PORT || 5001}/uploads/${safeName}`;
+
+    const dbPath = path.join(process.cwd(), 'portfolio.json');
+    let items = [];
+    if (fs.existsSync(dbPath)) items = JSON.parse(fs.readFileSync(dbPath, 'utf8'));
+
+    const newItem = {
+      id: uuidv4(),
+      creator_id: userId,
+      title,
+      description: description || null,
+      category,
+      media_url: publicUrl,
+      media_type: file.mimetype.startsWith('video') ? 'video' : 'image',
+      created_at: new Date().toISOString(),
+      project_id: project_id || null
+    };
+    
+    items.push(newItem);
+    fs.writeFileSync(dbPath, JSON.stringify(items, null, 2));
+    
+    return newItem;
+  }
+
+  const { error: uploadError } = await supabase.storage
+    .from('DripLens upload')
+    .upload(filePath, file.buffer, {
+      contentType: file.mimetype,
+      cacheControl: '31536000',
+      upsert: false,
+    });
+
+  // FIX: wrap raw Supabase storage error in AppError so errorHandler formats it
+  //      consistently instead of leaking the raw Supabase error object to the client
+  if (uploadError) {
+    throw new AppError(
+      uploadError.message || 'Storage upload failed',
+      500,
+      'STORAGE_UPLOAD_FAILED'
+    );
+  }
+
+  const { data: { publicUrl } } = supabase.storage
+    .from('DripLens upload')
+    .getPublicUrl(filePath);
+
+  const { data, error: dbError } = await supabase
+    .from('portfolio_items')
+    .insert({
+      creator_id: userId,
+      title,
+      description: description || null,
+      category,
+      media_url: publicUrl,
+      media_type: file.mimetype.startsWith('video') ? 'video' : 'image',
+      storage_path: filePath,
+      project_id: project_id || null,
+    })
+    .select()
+    .single();
+
+  if (dbError) {
+    // Attempt cleanup — don't leave orphaned storage objects on DB failure
+    await supabase.storage.from('DripLens upload').remove([filePath]);
+    throw new AppError(dbError.message || 'Database insert failed', 500, 'DB_INSERT_FAILED');
+  }
+
+  return data;
+};
+
+export const uploadProfileImage = async (userId, file, type) => {
+  validateFile(file);
+
+  const ext = file.originalname.split('.').pop().toLowerCase();
+  const safeName = `${userId}_${type}_${uuidv4()}.${ext}`;
+  const filePath = `images/${safeName}`;
+
+  if (env.SUPABASE_URL.includes('dummy')) {
+    const uploadDir = path.join(process.cwd(), 'public', 'uploads');
+    if (!fs.existsSync(uploadDir)) fs.mkdirSync(uploadDir, { recursive: true });
+    fs.writeFileSync(path.join(uploadDir, safeName), file.buffer);
+    const publicUrl = `http://localhost:${env.PORT || 5001}/uploads/${safeName}`;
+    return { publicUrl, storagePath: filePath };
+  }
+
+  const { error: uploadError } = await supabase.storage
+    .from('DripLens')
+    .upload(filePath, file.buffer, {
+      contentType: file.mimetype,
+      cacheControl: '3600',
+      upsert: true,
+    });
+
+  // FIX: same AppError wrapping as above
+  if (uploadError) {
+    throw new AppError(
+      uploadError.message || 'Profile image upload failed',
+      500,
+      'STORAGE_UPLOAD_FAILED'
+    );
+  }
+
+  const { data: { publicUrl } } = supabase.storage
+    .from('DripLens')
+    .getPublicUrl(filePath);
+
+  return { publicUrl, storagePath: filePath };
+};
+
+/**
+ * Upload a deliverable file for a project to Supabase Storage.
+ * Path: deliverables/{projectId}/{userId}_{uuid}.{ext}
+ * Returns { publicUrl, storagePath }.
+ */
+export const uploadDeliverable = async (userId, projectId, file) => {
+  validateFile(file);
+
+  const ext      = file.originalname.split('.').pop().toLowerCase();
+  const safeName = `${userId}_${uuidv4()}.${ext}`;
+  const filePath = `deliverables/${projectId}/${safeName}`;
+
+  if (env.SUPABASE_URL.includes('dummy')) {
+    const uploadDir = path.join(process.cwd(), 'public', 'uploads', 'deliverables', projectId);
+    if (!fs.existsSync(uploadDir)) fs.mkdirSync(uploadDir, { recursive: true });
+    fs.writeFileSync(path.join(uploadDir, safeName), file.buffer);
+    const publicUrl = `http://localhost:${env.PORT || 5001}/uploads/deliverables/${projectId}/${safeName}`;
+    return { publicUrl, storagePath: filePath };
+  }
+
+  const { error: uploadError } = await supabase.storage
+    .from('DripLens upload')
+    .upload(filePath, file.buffer, {
+      contentType: file.mimetype,
+      cacheControl: '3600',
+      upsert: false,
+    });
+
+  if (uploadError) {
+    throw new AppError(uploadError.message || 'Deliverable upload failed', 500, 'STORAGE_UPLOAD_FAILED');
+  }
+
+  const { data: { publicUrl } } = supabase.storage
+    .from('DripLens upload')
+    .getPublicUrl(filePath);
+
+  return { publicUrl, storagePath: filePath };
+};
+
+export const listPortfolio = async ({ page = 1, limit = 10, creator_id }) => {
+  const pageNum = parseInt(page) || 1;
+  const limitNum = parseInt(limit) || 10;
+  const from = (pageNum - 1) * limitNum;
+  const to = from + limitNum - 1;
+
+  if (env.SUPABASE_URL.includes('dummy')) {
+    const dbPath = path.join(process.cwd(), 'portfolio.json');
+    let items = [];
+    if (fs.existsSync(dbPath)) items = JSON.parse(fs.readFileSync(dbPath, 'utf8'));
+
+    // Group items by project_id in dummy mode
+    const projectsMap = {};
+    items.forEach(item => {
+      const pid = item.project_id || 'no-project';
+      if (!projectsMap[pid]) {
+        projectsMap[pid] = {
+          id: pid,
+          title: item.title, // fallback
+          category: item.category,
+          creator_id: item.creator_id,
+          created_at: item.created_at,
+          items: []
+        };
+      }
+      projectsMap[pid].items.push(item);
+    });
+
+    let projects = Object.values(projectsMap);
+
+    if (creator_id) {
+      projects = projects.filter(p => p.creator_id === creator_id);
+    }
+    
+    projects.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
+
+    const total = projects.length;
+    const paginatedProjects = projects.slice(from, to + 1);
+
+    return {
+      items: paginatedProjects,
+      pagination: {
+        page: pageNum,
+        limit: limitNum,
+        total: total,
+        totalPages: Math.ceil(total / limitNum)
+      }
+    };
+  }
+
+  let query = supabase
+    .from('portfolio_projects')
+    .select('*, author:profiles(username, avatar_url, display_name), items:portfolio_items(*)', { count: 'exact' });
+
+  if (creator_id) {
+    query = query.eq('creator_id', creator_id);
+  }
+
+  const { data, error, count } = await query
+    .order('created_at', { ascending: false })
+    .range(from, to);
+
+  if (error) throw error;
+
+  return {
+    items: data || [],
+    pagination: { 
+      page: pageNum, 
+      limit: limitNum, 
+      total: count, 
+      totalPages: Math.ceil(count / limitNum) 
+    },
+  };
+};
+
+// ── Portfolio Projects ──────────────────────────────────────────────────
+
+export const createPortfolioProject = async (userId, { title, description, category }) => {
+  const { data, error } = await supabase
+    .from('portfolio_projects')
+    .insert({
+      creator_id: userId,
+      title,
+      description: description || null,
+      category,
+    })
+    .select()
+    .single();
+
+  if (error) throw error;
+  return data;
+};
+
+export const listPortfolioProjects = async (userId) => {
+  const { data, error } = await supabase
+    .from('portfolio_projects')
+    .select('*, items:portfolio_items(*)')
+    .eq('creator_id', userId)
+    .order('created_at', { ascending: false });
+
+  if (error) throw error;
+  return data || [];
+};
+
+export const getPortfolioProject = async (projectId, userId) => {
+  const { data: project, error: projErr } = await supabase
+    .from('portfolio_projects')
+    .select('*, items:portfolio_items(*)')
+    .eq('id', projectId)
+    .single();
+
+  if (projErr) throw new AppError('Project not found', 404, 'PROJECT_NOT_FOUND');
+  
+  // Optional: check ownership if you want strict privacy
+  // if (project.creator_id !== userId) throw new AppError('Unauthorized', 403, 'FORBIDDEN');
+
+  return project;
+};
+
+export const updatePortfolioProject = async (projectId, userId, updates) => {
+  const { data, error } = await supabase
+    .from('portfolio_projects')
+    .update({
+      ...updates,
+      updated_at: new Date().toISOString()
+    })
+    .eq('id', projectId)
+    .eq('creator_id', userId) // Ensure ownership
+    .select()
+    .single();
+
+  if (error) {
+    if (error.code === 'PGRST116') throw new AppError('Project not found or unauthorized', 404, 'PROJECT_NOT_FOUND');
+    throw error;
+  }
+
+  // If category was updated, sync it to all portfolio items in this project
+  if (updates.category) {
+    const { error: syncError } = await supabase
+      .from('portfolio_items')
+      .update({ category: updates.category })
+      .eq('project_id', projectId);
+    
+    if (syncError) {
+      console.error('Failed to sync category to portfolio items:', syncError);
+      // We don't throw here to avoid failing the whole project update, 
+      // as the project itself is already updated.
+    }
+  }
+  
+  return data;
+};
+
+export const deletePortfolioItem = async (itemId, userId) => {
+  const { data: item, error: fetchError } = await supabase
+    .from('portfolio_items')
+    .select('*')
+    .eq('id', itemId)
+    .eq('creator_id', userId)
+    .single();
+
+  if (fetchError || !item) {
+    throw new AppError('Item not found or unauthorized', 404, 'ITEM_NOT_FOUND');
+  }
+
+  const { error: dbError } = await supabase
+    .from('portfolio_items')
+    .delete()
+    .eq('id', itemId);
+
+  if (dbError) throw dbError;
+
+  if (item.storage_path) {
+    await supabase.storage.from('DripLens upload').remove([item.storage_path]);
+  }
+
+  return { success: true };
+};
+
+export const deletePortfolioProject = async (projectId, userId) => {
+  const { data: project, error: projErr } = await supabase
+    .from('portfolio_projects')
+    .select('id')
+    .eq('id', projectId)
+    .eq('creator_id', userId)
+    .single();
+
+  if (projErr || !project) {
+    throw new AppError('Project not found or unauthorized', 404, 'PROJECT_NOT_FOUND');
+  }
+
+  const { data: items } = await supabase
+    .from('portfolio_items')
+    .select('storage_path')
+    .eq('project_id', projectId);
+
+  const { error: delErr } = await supabase
+    .from('portfolio_projects')
+    .delete()
+    .eq('id', projectId);
+
+  if (delErr) throw delErr;
+
+  if (items && items.length > 0) {
+    const paths = items.map(i => i.storage_path).filter(Boolean);
+    if (paths.length > 0) {
+      await supabase.storage.from('DripLens upload').remove(paths);
+    }
+  }
+
+  return { success: true };
+};
\ No newline at end of file
diff --git a/supabase/migrations/20240007_projects_deliverables.sql b/supabase/migrations/20240007_projects_deliverables.sql
new file mode 100644
index 0000000..ababc17
--- /dev/null
+++ b/supabase/migrations/20240007_projects_deliverables.sql
@@ -0,0 +1,257 @@
+-- =============================================================================
+-- DRIPLENS — Projects, Deliverables & Revision Requests
+-- Migration: 20240007_projects_deliverables.sql
+--
+-- This migration adds the project lifecycle tables that back the
+-- full 14-step brand↔creator workflow:
+--
+--   hiring_request → project → deliverable → revision_request → payout
+--
+-- Run AFTER 20240002_rls_policies.sql (depends on profiles, hiring_requests).
+-- Apply via: Supabase SQL editor, or `supabase db push`.
+-- =============================================================================
+
+
+-- ---------------------------------------------------------------------------
+-- 0. New ENUM types
+-- ---------------------------------------------------------------------------
+
+create type public.project_status as enum (
+  'in_progress',        -- creator is working
+  'submitted',          -- creator submitted deliverable, awaiting brand review
+  'revision_requested', -- brand requested changes
+  'approved',           -- brand approved, payment queued for release
+  'completed',          -- payment released, project archived
+  'cancelled'           -- either party cancelled before completion
+);
+
+create type public.revision_status as enum (
+  'open',       -- revision request sent, creator has not addressed it yet
+  'addressed'   -- creator resubmitted after addressing the request
+);
+
+
+-- ---------------------------------------------------------------------------
+-- 1. projects
+--    One project per accepted hiring_request. Created automatically by the
+--    server when the checkout (Step 8) is confirmed.
+-- ---------------------------------------------------------------------------
+create table public.projects (
+  id                uuid            primary key default gen_random_uuid(),
+  hiring_request_id uuid            not null unique references public.hiring_requests(id) on delete cascade,
+  brand_id          uuid            not null references public.profiles(id) on delete cascade,
+  creator_id        uuid            not null references public.profiles(id) on delete cascade,
+
+  status            project_status  not null default 'in_progress',
+  progress          integer         not null default 0 check (progress between 0 and 100),
+
+  -- Escrow tracking (store in paisa/cents as integer to avoid float rounding)
+  escrow_amount_paise  bigint       not null default 0 check (escrow_amount_paise >= 0),
+  -- Stripe PaymentIntent ID — set when checkout is confirmed
+  stripe_payment_intent_id  text    unique,
+
+  -- Stripe Transfer ID — set when payment is released to creator
+  stripe_transfer_id          text   unique,
+
+  package_title     text,
+  package_price_str text,          -- display string e.g. "₹15,000-₹25,000"
+
+  deadline          date,
+
+  created_at        timestamptz     not null default now(),
+  updated_at        timestamptz     not null default now()
+);
+
+comment on table  public.projects is
+  'One row per active / completed brand↔creator project. Drives the ProjectProgressPage.';
+comment on column public.projects.progress is
+  'Creator-reported percentage 0–100. Updated via PATCH /projects/:id/progress.';
+comment on column public.projects.escrow_amount_paise is
+  'Amount in smallest currency unit (paise / cents) held in escrow. Set at checkout.';
+comment on column public.projects.stripe_payment_intent_id is
+  'Stripe PaymentIntent ID used for escrow capture and release.';
+
+
+-- ---------------------------------------------------------------------------
+-- 2. deliverables
+--    Each time the creator hits "Submit Project" a new row is created
+--    (versioned). Brands see the latest deliverable.
+-- ---------------------------------------------------------------------------
+create table public.deliverables (
+  id            uuid          primary key default gen_random_uuid(),
+  project_id    uuid          not null references public.projects(id) on delete cascade,
+  creator_id    uuid          not null references public.profiles(id) on delete cascade,
+
+  -- File uploaded to Supabase Storage / external URL
+  file_url      text          not null,
+  storage_path  text,                    -- internal path for deletion; null for external URLs
+  file_name     text          not null,  -- original filename for display
+  file_size     bigint,                  -- bytes
+  mime_type     text,
+
+  version       integer       not null default 1, -- auto-incremented per project
+  notes         text          check (char_length(notes) <= 2000),
+
+  submitted_at  timestamptz   not null default now()
+);
+
+comment on table  public.deliverables is
+  'Versioned project deliverables submitted by creators. Each resubmission increments version.';
+comment on column public.deliverables.version is
+  'Starts at 1 for first submission. Incremented on every resubmission (revision → resubmit cycle).';
+
+
+-- ---------------------------------------------------------------------------
+-- 3. revision_requests
+--    Brand-authored feedback requests on a specific deliverable.
+-- ---------------------------------------------------------------------------
+create table public.revision_requests (
+  id              uuid              primary key default gen_random_uuid(),
+  project_id      uuid              not null references public.projects(id) on delete cascade,
+  deliverable_id  uuid              not null references public.deliverables(id) on delete cascade,
+  brand_id        uuid              not null references public.profiles(id) on delete cascade,
+
+  feedback        text              not null check (char_length(feedback) between 10 and 3000),
+  status          revision_status   not null default 'open',
+
+  requested_at    timestamptz       not null default now(),
+  addressed_at    timestamptz                -- set when creator resubmits
+);
+
+comment on table  public.revision_requests is
+  'Brand-authored revision requests on a deliverable. Status flips to ''addressed'' on creator resubmission.';
+
+
+-- ---------------------------------------------------------------------------
+-- 4. Indexes
+-- ---------------------------------------------------------------------------
+
+-- projects
+create index idx_projects_hiring_request on public.projects(hiring_request_id);
+create index idx_projects_brand          on public.projects(brand_id);
+create index idx_projects_creator        on public.projects(creator_id);
+create index idx_projects_status         on public.projects(status);
+create index idx_projects_updated_at     on public.projects(updated_at desc);
+
+-- deliverables
+create index idx_deliverables_project    on public.deliverables(project_id);
+create index idx_deliverables_version    on public.deliverables(project_id, version desc);
+
+-- revision_requests
+create index idx_revisions_project       on public.revision_requests(project_id);
+create index idx_revisions_deliverable   on public.revision_requests(deliverable_id);
+create index idx_revisions_status        on public.revision_requests(project_id, status);
+
+
+-- ---------------------------------------------------------------------------
+-- 5. updated_at trigger for projects
+-- ---------------------------------------------------------------------------
+create trigger trg_projects_updated_at
+  before update on public.projects
+  for each row execute function public.set_updated_at();
+
+
+-- ---------------------------------------------------------------------------
+-- 6. Auto-increment deliverable version per project (database trigger)
+--    Called BEFORE INSERT so `new.version` is already set correctly.
+-- ---------------------------------------------------------------------------
+create or replace function public.set_deliverable_version()
+returns trigger
+language plpgsql
+as $$
+declare
+  max_version integer;
+begin
+  select coalesce(max(version), 0)
+    into max_version
+    from public.deliverables
+   where project_id = new.project_id;
+
+  new.version = max_version + 1;
+  return new;
+end;
+$$;
+
+create trigger trg_deliverable_version
+  before insert on public.deliverables
+  for each row execute function public.set_deliverable_version();
+
+
+-- ---------------------------------------------------------------------------
+-- 7. RLS Policies
+-- ---------------------------------------------------------------------------
+
+alter table public.projects          enable row level security;
+alter table public.deliverables      enable row level security;
+alter table public.revision_requests enable row level security;
+
+
+-- projects: a party (brand or creator) can read their own projects
+create policy "project_party_select"
+  on public.projects for select
+  using (
+    auth.uid() = brand_id or auth.uid() = creator_id
+  );
+
+-- projects: only the system (service_role) can insert (server creates project on checkout)
+create policy "project_service_insert"
+  on public.projects for insert
+  with check (false);  -- blocked for normal users; server uses service_role key
+
+-- projects: brand or creator can update their own project
+create policy "project_party_update"
+  on public.projects for update
+  using (
+    auth.uid() = brand_id or auth.uid() = creator_id
+  );
+
+
+-- deliverables: party can read
+create policy "deliverable_party_select"
+  on public.deliverables for select
+  using (
+    exists (
+      select 1 from public.projects p
+       where p.id = deliverables.project_id
+         and (p.brand_id = auth.uid() or p.creator_id = auth.uid())
+    )
+  );
+
+-- deliverables: only creator can insert
+create policy "deliverable_creator_insert"
+  on public.deliverables for insert
+  with check (
+    auth.uid() = creator_id
+  );
+
+
+-- revision_requests: party can read
+create policy "revision_party_select"
+  on public.revision_requests for select
+  using (
+    exists (
+      select 1 from public.projects p
+       where p.id = revision_requests.project_id
+         and (p.brand_id = auth.uid() or p.creator_id = auth.uid())
+    )
+  );
+
+-- revision_requests: only brand can insert
+create policy "revision_brand_insert"
+  on public.revision_requests for insert
+  with check (
+    auth.uid() = brand_id
+  );
+
+
+-- ---------------------------------------------------------------------------
+-- 8. Realtime — publish projects so dashboards live-update status badges
+-- ---------------------------------------------------------------------------
+alter publication supabase_realtime add table public.projects;
+alter publication supabase_realtime add table public.deliverables;
+alter publication supabase_realtime add table public.revision_requests;
+
+
+-- =============================================================================
+-- Migration complete.
+-- =============================================================================
diff --git a/supabase/migrations/20240008_portfolio_projects.sql b/supabase/migrations/20240008_portfolio_projects.sql
new file mode 100644
index 0000000..b255d8a
--- /dev/null
+++ b/supabase/migrations/20240008_portfolio_projects.sql
@@ -0,0 +1,62 @@
+-- Migration: 20240008_portfolio_projects.sql
+-- Create portfolio projects table and link portfolio items
+
+-- 1. Create portfolio_projects table
+CREATE TABLE IF NOT EXISTS public.portfolio_projects (
+    id            UUID          PRIMARY KEY DEFAULT gen_random_uuid(),
+    creator_id    UUID          NOT NULL REFERENCES public.profiles(id) ON DELETE CASCADE,
+    title         TEXT          NOT NULL CHECK (char_length(title) BETWEEN 1 AND 100),
+    description   TEXT          CHECK (char_length(description) <= 2000),
+    category      TEXT          NOT NULL CHECK (char_length(category) BETWEEN 1 AND 50),
+    created_at    TIMESTAMPTZ   NOT NULL DEFAULT now(),
+    updated_at    TIMESTAMPTZ   NOT NULL DEFAULT now()
+);
+
+-- 2. Add project_id to portfolio_items
+DO $$ 
+BEGIN 
+    IF NOT EXISTS (SELECT 1 FROM information_schema.columns WHERE table_name='portfolio_items' AND column_name='project_id') THEN
+        ALTER TABLE public.portfolio_items ADD COLUMN project_id UUID REFERENCES public.portfolio_projects(id) ON DELETE CASCADE;
+    END IF;
+END $$;
+
+-- 3. Enable RLS
+ALTER TABLE public.portfolio_projects ENABLE ROW LEVEL SECURITY;
+
+-- 4. RLS Policies
+-- Anyone can view portfolio projects
+CREATE POLICY "portfolio_projects: public read"
+    ON public.portfolio_projects
+    FOR SELECT
+    USING (true);
+
+-- Only authenticated creators can insert their own projects
+CREATE POLICY "portfolio_projects: creator insert"
+    ON public.portfolio_projects
+    FOR INSERT
+    WITH CHECK (
+        auth.role() = 'authenticated'
+        AND auth.uid() = creator_id
+    );
+
+-- Only owners can update their own projects
+CREATE POLICY "portfolio_projects: creator update"
+    ON public.portfolio_projects
+    FOR UPDATE
+    USING (auth.uid() = creator_id)
+    WITH CHECK (auth.uid() = creator_id);
+
+-- Only owners can delete their own projects
+CREATE POLICY "portfolio_projects: creator delete"
+    ON public.portfolio_projects
+    FOR DELETE
+    USING (auth.uid() = creator_id);
+
+-- 5. Indexes
+CREATE INDEX IF NOT EXISTS idx_portfolio_projects_creator_id ON public.portfolio_projects(creator_id);
+CREATE INDEX IF NOT EXISTS idx_portfolio_items_project_id ON public.portfolio_items(project_id);
+
+-- 6. Trigger for updated_at
+CREATE TRIGGER trg_portfolio_projects_updated_at
+    BEFORE UPDATE ON public.portfolio_projects
+    FOR EACH ROW EXECUTE FUNCTION public.set_updated_at();
diff --git a/supabase/migrations/20240009_add_linkedin_social.sql b/supabase/migrations/20240009_add_linkedin_social.sql
new file mode 100644
index 0000000..d2e6da1
--- /dev/null
+++ b/supabase/migrations/20240009_add_linkedin_social.sql
@@ -0,0 +1,9 @@
+-- =============================================================================
+-- DRIPLENS — Add LinkedIn to Profiles
+-- Migration: 20240009_add_linkedin_social.sql
+-- =============================================================================
+
+alter table public.profiles
+  add column if not exists linkedin text check (char_length(linkedin) <= 100);
+
+comment on column public.profiles.linkedin is 'LinkedIn profile URL or handle.';