diff --git a/src/App.tsx b/src/App.tsx
index 4ae35c4..d672a94 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -12,6 +12,7 @@ import ViewEvent from "./features/Events/v1/Pages/ViewEvent";
 import { startAutoUpdater } from "./system/updater/autoUpdater";
 import LoginPage from "./features/Auth/v1/Pages/LoginPage";
 import SignUpPage from "./features/Auth/v1/Pages/SignUpPage";
+import ProjectDetailPage from "./projects/[id]/page";
 
 function App() {
   useEffect(() => {
@@ -25,6 +26,10 @@ function App() {
         <Route path="/" element={<LoginPage />} />
         <Route path="/signup" element={<SignUpPage />} />
 
+        <Route path="/projects/:projectId" element={<LoginUserTemplate />}>
+          <Route index element={<ProjectDetailPage />} />
+        </Route>
+
         {/* Protected / Org Routes */}
         <Route path="/org" element={<LoginUserTemplate />}>
           <Route index element={<DashboardPage />} />
diff --git a/src/projects/[id]/components/Header.tsx b/src/projects/[id]/components/Header.tsx
new file mode 100644
index 0000000..cc7c05d
--- /dev/null
+++ b/src/projects/[id]/components/Header.tsx
@@ -0,0 +1,123 @@
+import { CalendarClock, PencilLine, Rocket, ShieldCheck, Trash2, XCircle } from "lucide-react";
+
+import { Button } from "@/shadcnComponet/ui/button";
+import { cn } from "@/lib/utils";
+
+import type { ProjectPermissions, ProjectRecord, UserRole, ViewerContext } from "../types";
+
+type HeaderProps = {
+  project: ProjectRecord;
+  viewer: ViewerContext;
+  permissions: ProjectPermissions;
+  isWorking: boolean;
+  onEdit: () => void;
+  onDelete: () => void;
+  onSubmit: () => void;
+  onApprove: () => void;
+  onReject: () => void;
+};
+
+const statusTheme: Record<ProjectRecord["status"], string> = {
+  draft: "bg-slate-100 text-slate-700 ring-slate-200",
+  submitted: "bg-amber-100 text-amber-800 ring-amber-200",
+  under_review: "bg-sky-100 text-sky-800 ring-sky-200",
+  approved: "bg-emerald-100 text-emerald-800 ring-emerald-200",
+  rejected: "bg-rose-100 text-rose-800 ring-rose-200",
+};
+
+const roleLabel: Record<UserRole, string> = {
+  participant: "Participant",
+  judge: "Judge",
+  organizer: "Organizer",
+  admin: "Admin",
+};
+
+function getStatusLabel(status: ProjectRecord["status"]) {
+  return status.replace("_", " ").replace(/\b\w/g, (value) => value.toUpperCase());
+}
+
+export default function Header({
+  project,
+  viewer,
+  permissions,
+  isWorking,
+  onEdit,
+  onDelete,
+  onSubmit,
+  onApprove,
+  onReject,
+}: HeaderProps) {
+  return (
+    <header className="relative overflow-hidden rounded-[28px] border border-white/60 bg-white/90 p-6 shadow-[0_24px_80px_-40px_rgba(15,23,42,0.5)] backdrop-blur xl:p-8">
+      <div className="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-teal-500 via-cyan-500 to-amber-400" />
+      <div className="absolute -right-16 top-0 h-40 w-40 rounded-full bg-cyan-100 blur-3xl" />
+      <div className="absolute -left-10 bottom-0 h-32 w-32 rounded-full bg-amber-100 blur-3xl" />
+
+      <div className="relative flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between">
+        <div className="space-y-4">
+          <div className="flex flex-wrap items-center gap-3">
+            <span
+              className={cn(
+                "inline-flex items-center rounded-full px-3 py-1 text-sm font-semibold ring-1 ring-inset",
+                statusTheme[project.status],
+              )}
+            >
+              {getStatusLabel(project.status)}
+            </span>
+            <span className="inline-flex items-center gap-2 rounded-full bg-slate-900 px-3 py-1 text-sm font-medium text-white">
+              <ShieldCheck className="size-4" />
+              {roleLabel[viewer.role]} view
+            </span>
+          </div>
+
+          <div>
+            <p className="text-sm uppercase tracking-[0.24em] text-slate-500">{project.eventType}</p>
+            <h1 className="mt-2 text-3xl font-semibold tracking-tight text-slate-950 xl:text-4xl">
+              {project.title}
+            </h1>
+            <p className="mt-2 flex items-center gap-2 text-sm text-slate-600">
+              <CalendarClock className="size-4" />
+              {project.eventName}
+            </p>
+          </div>
+        </div>
+
+        <div className="grid gap-3 sm:grid-cols-2 xl:min-w-[360px]">
+          {permissions.canSubmit && (
+            <Button className="bg-teal-600 hover:bg-teal-700" disabled={isWorking} onClick={onSubmit}>
+              <Rocket className="size-4" />
+              Submit
+            </Button>
+          )}
+
+          {permissions.canEdit && (
+            <Button variant="outline" disabled={isWorking} onClick={onEdit}>
+              <PencilLine className="size-4" />
+              Edit
+            </Button>
+          )}
+
+          {(permissions.canDeleteDraft || permissions.canDeleteAny) && (
+            <Button variant="destructive" disabled={isWorking} onClick={onDelete}>
+              <Trash2 className="size-4" />
+              Delete
+            </Button>
+          )}
+
+          {permissions.canModerate && (
+            <>
+              <Button className="bg-emerald-600 hover:bg-emerald-700" disabled={isWorking} onClick={onApprove}>
+                <ShieldCheck className="size-4" />
+                Approve
+              </Button>
+              <Button variant="outline" disabled={isWorking} onClick={onReject}>
+                <XCircle className="size-4" />
+                Reject
+              </Button>
+            </>
+          )}
+        </div>
+      </div>
+    </header>
+  );
+}
diff --git a/src/projects/[id]/components/ModerationPanel.tsx b/src/projects/[id]/components/ModerationPanel.tsx
new file mode 100644
index 0000000..9401f8d
--- /dev/null
+++ b/src/projects/[id]/components/ModerationPanel.tsx
@@ -0,0 +1,74 @@
+import { AlertTriangle, CheckCircle2, Trash2, XCircle } from "lucide-react";
+
+import { Button } from "@/shadcnComponet/ui/button";
+
+import type { ProjectRecord, ScoreSummary } from "../types";
+
+type ModerationPanelProps = {
+  project: ProjectRecord;
+  scoreSummary: ScoreSummary;
+  isWorking: boolean;
+  onApprove: () => void;
+  onReject: () => void;
+  onDelete: () => void;
+};
+
+export default function ModerationPanel({
+  project,
+  scoreSummary,
+  isWorking,
+  onApprove,
+  onReject,
+  onDelete,
+}: ModerationPanelProps) {
+  return (
+    <section className="rounded-[24px] border border-slate-200 bg-white p-6 shadow-sm">
+      <div className="mb-5">
+        <p className="text-sm font-semibold uppercase tracking-[0.2em] text-slate-500">
+          Moderation
+        </p>
+        <h2 className="mt-2 text-xl font-semibold text-slate-950">Organizer controls</h2>
+      </div>
+
+      <div className="rounded-[24px] border border-amber-200 bg-amber-50 p-5">
+        <p className="flex items-center gap-2 text-sm font-semibold uppercase tracking-[0.18em] text-amber-800">
+          <AlertTriangle className="size-4" />
+          Review context
+        </p>
+        <div className="mt-4 grid gap-3 md:grid-cols-3">
+          <div className="rounded-2xl bg-white px-4 py-4">
+            <p className="text-sm text-slate-500">Current status</p>
+            <p className="mt-2 text-lg font-semibold capitalize text-slate-950">
+              {project.status.replace("_", " ")}
+            </p>
+          </div>
+          <div className="rounded-2xl bg-white px-4 py-4">
+            <p className="text-sm text-slate-500">Average score</p>
+            <p className="mt-2 text-lg font-semibold text-slate-950">
+              {scoreSummary.averageScore === null ? "Pending" : `${scoreSummary.averageScore.toFixed(1)} / 40`}
+            </p>
+          </div>
+          <div className="rounded-2xl bg-white px-4 py-4">
+            <p className="text-sm text-slate-500">Judges completed</p>
+            <p className="mt-2 text-lg font-semibold text-slate-950">{scoreSummary.judgeCount}</p>
+          </div>
+        </div>
+      </div>
+
+      <div className="mt-5 grid gap-3 sm:grid-cols-3">
+        <Button className="bg-emerald-600 hover:bg-emerald-700" disabled={isWorking} onClick={onApprove}>
+          <CheckCircle2 className="size-4" />
+          Approve project
+        </Button>
+        <Button variant="outline" disabled={isWorking} onClick={onReject}>
+          <XCircle className="size-4" />
+          Reject project
+        </Button>
+        <Button variant="destructive" disabled={isWorking} onClick={onDelete}>
+          <Trash2 className="size-4" />
+          Delete project
+        </Button>
+      </div>
+    </section>
+  );
+}
diff --git a/src/projects/[id]/components/Overview.tsx b/src/projects/[id]/components/Overview.tsx
new file mode 100644
index 0000000..6cd324a
--- /dev/null
+++ b/src/projects/[id]/components/Overview.tsx
@@ -0,0 +1,211 @@
+import { Globe, Github, Link2, Save, X } from "lucide-react";
+import { useState } from "react";
+
+import { Button } from "@/shadcnComponet/ui/button";
+
+import type { ProjectRecord, ProjectUpdateInput } from "../types";
+
+type OverviewProps = {
+  project: ProjectRecord;
+  canEdit: boolean;
+  isEditing: boolean;
+  isSaving: boolean;
+  validationErrors: string[];
+  onEditingChange: (editing: boolean) => void;
+  onSave: (values: ProjectUpdateInput) => Promise<void>;
+};
+
+type FormState = {
+  title: string;
+  description: string;
+  techStack: string;
+  repositoryUrl: string;
+  demoUrl: string;
+};
+
+function toFormState(project: ProjectRecord): FormState {
+  return {
+    title: project.title,
+    description: project.description,
+    techStack: project.techStack.join(", "),
+    repositoryUrl: project.repositoryUrl,
+    demoUrl: project.demoUrl,
+  };
+}
+
+export default function Overview({
+  project,
+  canEdit,
+  isEditing,
+  isSaving,
+  validationErrors,
+  onEditingChange,
+  onSave,
+}: OverviewProps) {
+  const [form, setForm] = useState<FormState>(() => toFormState(project));
+
+  async function handleSubmit() {
+    await onSave({
+      title: form.title,
+      description: form.description,
+      techStack: form.techStack
+        .split(",")
+        .map((entry) => entry.trim())
+        .filter(Boolean),
+      repositoryUrl: form.repositoryUrl,
+      demoUrl: form.demoUrl,
+    });
+  }
+
+  if (isEditing && canEdit) {
+    return (
+      <section className="rounded-[24px] border border-slate-200 bg-white p-6 shadow-sm">
+        <div className="mb-5 flex items-start justify-between gap-4">
+          <div>
+            <p className="text-sm font-semibold uppercase tracking-[0.2em] text-slate-500">Overview</p>
+            <h2 className="mt-2 text-xl font-semibold text-slate-950">Refine your submission</h2>
+          </div>
+          <div className="flex gap-2">
+            <Button variant="outline" disabled={isSaving} onClick={() => onEditingChange(false)}>
+              <X className="size-4" />
+              Cancel
+            </Button>
+            <Button className="bg-slate-900 hover:bg-slate-800" disabled={isSaving} onClick={handleSubmit}>
+              <Save className="size-4" />
+              Save changes
+            </Button>
+          </div>
+        </div>
+
+        {validationErrors.length > 0 && (
+          <div className="mb-5 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">
+            {validationErrors.map((error) => (
+              <p key={error}>{error}</p>
+            ))}
+          </div>
+        )}
+
+        <div className="grid gap-4">
+          <label className="grid gap-2 text-sm font-medium text-slate-700">
+            Project title
+            <input
+              className="rounded-2xl border border-slate-200 px-4 py-3 outline-none transition focus:border-teal-500 focus:ring-4 focus:ring-teal-100"
+              value={form.title}
+              onChange={(event) => setForm((current) => ({ ...current, title: event.target.value }))}
+            />
+          </label>
+
+          <label className="grid gap-2 text-sm font-medium text-slate-700">
+            Description
+            <textarea
+              className="min-h-36 rounded-2xl border border-slate-200 px-4 py-3 outline-none transition focus:border-teal-500 focus:ring-4 focus:ring-teal-100"
+              value={form.description}
+              onChange={(event) =>
+                setForm((current) => ({ ...current, description: event.target.value }))
+              }
+            />
+          </label>
+
+          <div className="grid gap-4 lg:grid-cols-2">
+            <label className="grid gap-2 text-sm font-medium text-slate-700">
+              Tech stack
+              <input
+                className="rounded-2xl border border-slate-200 px-4 py-3 outline-none transition focus:border-teal-500 focus:ring-4 focus:ring-teal-100"
+                value={form.techStack}
+                onChange={(event) =>
+                  setForm((current) => ({ ...current, techStack: event.target.value }))
+                }
+                placeholder="React, TypeScript, Node.js"
+              />
+            </label>
+            <label className="grid gap-2 text-sm font-medium text-slate-700">
+              GitHub repository
+              <input
+                className="rounded-2xl border border-slate-200 px-4 py-3 outline-none transition focus:border-teal-500 focus:ring-4 focus:ring-teal-100"
+                value={form.repositoryUrl}
+                onChange={(event) =>
+                  setForm((current) => ({ ...current, repositoryUrl: event.target.value }))
+                }
+              />
+            </label>
+          </div>
+
+          <label className="grid gap-2 text-sm font-medium text-slate-700">
+            Live demo URL
+            <input
+              className="rounded-2xl border border-slate-200 px-4 py-3 outline-none transition focus:border-teal-500 focus:ring-4 focus:ring-teal-100"
+              value={form.demoUrl}
+              onChange={(event) =>
+                setForm((current) => ({ ...current, demoUrl: event.target.value }))
+              }
+            />
+          </label>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <section className="rounded-[24px] border border-slate-200 bg-white p-6 shadow-sm">
+      <div className="mb-5 flex items-start justify-between gap-4">
+        <div>
+          <p className="text-sm font-semibold uppercase tracking-[0.2em] text-slate-500">Overview</p>
+          <h2 className="mt-2 text-xl font-semibold text-slate-950">Project summary</h2>
+        </div>
+        {canEdit && (
+          <Button variant="outline" onClick={() => onEditingChange(true)}>
+            Edit details
+          </Button>
+        )}
+      </div>
+
+      <p className="text-base leading-7 text-slate-700">{project.description}</p>
+
+      <div className="mt-6 grid gap-6 lg:grid-cols-[1.3fr_1fr]">
+        <div>
+          <p className="mb-3 flex items-center gap-2 text-sm font-semibold uppercase tracking-[0.2em] text-slate-500">
+            <Link2 className="size-4" />
+            Tech stack
+          </p>
+          <div className="flex flex-wrap gap-2">
+            {project.techStack.map((item) => (
+              <span
+                key={item}
+                className="rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-sm font-medium text-slate-700"
+              >
+                {item}
+              </span>
+            ))}
+          </div>
+        </div>
+
+        <div className="grid gap-3">
+          <a
+            className="flex items-center justify-between rounded-2xl border border-slate-200 px-4 py-3 text-sm font-medium text-slate-700 transition hover:border-teal-300 hover:bg-teal-50"
+            href={project.repositoryUrl}
+            rel="noreferrer"
+            target="_blank"
+          >
+            <span className="flex items-center gap-2">
+              <Github className="size-4" />
+              GitHub repository
+            </span>
+            <span>Open</span>
+          </a>
+          <a
+            className="flex items-center justify-between rounded-2xl border border-slate-200 px-4 py-3 text-sm font-medium text-slate-700 transition hover:border-cyan-300 hover:bg-cyan-50"
+            href={project.demoUrl}
+            rel="noreferrer"
+            target="_blank"
+          >
+            <span className="flex items-center gap-2">
+              <Globe className="size-4" />
+              Live demo
+            </span>
+            <span>Visit</span>
+          </a>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/projects/[id]/components/ScorePanel.tsx b/src/projects/[id]/components/ScorePanel.tsx
new file mode 100644
index 0000000..22013c8
--- /dev/null
+++ b/src/projects/[id]/components/ScorePanel.tsx
@@ -0,0 +1,151 @@
+import { formatDistanceToNowStrict } from "date-fns";
+import { CheckCircle2, Clock3, MessageSquareText, Star } from "lucide-react";
+import { useMemo, useState } from "react";
+
+import { Button } from "@/shadcnComponet/ui/button";
+
+import type { JudgeScoreInput, ProjectPermissions, ProjectRecord, ViewerContext } from "../types";
+
+type ScorePanelProps = {
+  project: ProjectRecord;
+  viewer: ViewerContext;
+  permissions: ProjectPermissions;
+  isSubmitting: boolean;
+  onSubmit: (values: JudgeScoreInput) => Promise<void>;
+};
+
+const criteria: Array<{
+  key: keyof Omit<JudgeScoreInput, "feedback">;
+  label: string;
+  helper: string;
+}> = [
+  { key: "innovation", label: "Innovation", helper: "Novelty, differentiation, and ambition." },
+  {
+    key: "technicalComplexity",
+    label: "Technical Complexity",
+    helper: "Engineering depth, architecture, and execution difficulty.",
+  },
+  { key: "designUx", label: "Design / UX", helper: "Clarity, usability, and polish." },
+  { key: "impact", label: "Impact", helper: "Practical value, reach, and event relevance." },
+];
+
+function clamp(value: number) {
+  return Math.max(0, Math.min(10, value));
+}
+
+export default function ScorePanel({
+  project,
+  viewer,
+  permissions,
+  isSubmitting,
+  onSubmit,
+}: ScorePanelProps) {
+  const existingScore = project.judgeScores.find((entry) => entry.judgeId === viewer.userId);
+
+  const [form, setForm] = useState<JudgeScoreInput>({
+    innovation: existingScore?.innovation ?? 0,
+    technicalComplexity: existingScore?.technicalComplexity ?? 0,
+    designUx: existingScore?.designUx ?? 0,
+    impact: existingScore?.impact ?? 0,
+    feedback: existingScore?.feedback ?? "",
+  });
+
+  const total = useMemo(
+    () => form.innovation + form.technicalComplexity + form.designUx + form.impact,
+    [form],
+  );
+
+  const canWrite = permissions.canScore || permissions.canEditScore;
+
+  const lockMessage = existingScore
+    ? "You already scored this project. Editing remains open until the judging deadline."
+    : "Submit one scorecard for this assigned project before the judging deadline.";
+
+  return (
+    <section className="rounded-[24px] border border-slate-200 bg-white p-6 shadow-sm">
+      <div className="mb-5 flex items-start justify-between gap-4">
+        <div>
+          <p className="text-sm font-semibold uppercase tracking-[0.2em] text-slate-500">Judge panel</p>
+          <h2 className="mt-2 text-xl font-semibold text-slate-950">Evaluation scorecard</h2>
+        </div>
+        <div className="rounded-2xl bg-slate-900 px-4 py-3 text-right text-white">
+          <p className="text-xs uppercase tracking-[0.18em] text-slate-300">Total score</p>
+          <p className="mt-1 text-2xl font-semibold">{total} / 40</p>
+        </div>
+      </div>
+
+      <div className="mb-5 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-600">
+        <p className="flex items-center gap-2">
+          <Clock3 className="size-4 text-amber-500" />
+          Deadline closes {formatDistanceToNowStrict(new Date(project.judgingDeadline), { addSuffix: true })}
+        </p>
+        <p className="mt-2 flex items-start gap-2">
+          {existingScore ? (
+            <CheckCircle2 className="mt-0.5 size-4 text-emerald-600" />
+          ) : (
+            <Star className="mt-0.5 size-4 text-sky-600" />
+          )}
+          {lockMessage}
+        </p>
+      </div>
+
+      <div className="grid gap-4">
+        {criteria.map((criterion) => (
+          <label key={criterion.key} className="rounded-2xl border border-slate-200 p-4">
+            <div className="flex items-start justify-between gap-4">
+              <div>
+                <p className="font-medium text-slate-900">{criterion.label}</p>
+                <p className="mt-1 text-sm text-slate-600">{criterion.helper}</p>
+              </div>
+              <input
+                type="number"
+                min={0}
+                max={10}
+                value={form[criterion.key]}
+                disabled={!canWrite || isSubmitting}
+                onChange={(event) =>
+                  setForm((current) => ({
+                    ...current,
+                    [criterion.key]: clamp(Number(event.target.value)),
+                  }))
+                }
+                className="w-24 rounded-xl border border-slate-200 px-3 py-2 text-right text-lg font-semibold outline-none transition focus:border-teal-500 focus:ring-4 focus:ring-teal-100 disabled:bg-slate-100"
+              />
+            </div>
+          </label>
+        ))}
+      </div>
+
+      <label className="mt-5 grid gap-2 text-sm font-medium text-slate-700">
+        <span className="flex items-center gap-2">
+          <MessageSquareText className="size-4" />
+          Feedback
+        </span>
+        <textarea
+          className="min-h-32 rounded-2xl border border-slate-200 px-4 py-3 outline-none transition focus:border-teal-500 focus:ring-4 focus:ring-teal-100 disabled:bg-slate-100"
+          disabled={!canWrite || isSubmitting}
+          value={form.feedback}
+          onChange={(event) => setForm((current) => ({ ...current, feedback: event.target.value }))}
+          placeholder="Summarize the strongest areas, product risks, and next improvements."
+        />
+      </label>
+
+      <div className="mt-5 flex items-center justify-between gap-3">
+        <p className="text-sm text-slate-500">
+          {canWrite
+            ? existingScore
+              ? "Your existing scorecard will be updated."
+              : "Submitting will create your first scorecard."
+            : "Scoring is locked because the deadline has passed or you are not assigned."}
+        </p>
+        <Button
+          className="bg-slate-900 hover:bg-slate-800"
+          disabled={!canWrite || isSubmitting}
+          onClick={() => onSubmit(form)}
+        >
+          {existingScore ? "Update score" : "Submit score"}
+        </Button>
+      </div>
+    </section>
+  );
+}
diff --git a/src/projects/[id]/components/Submission.tsx b/src/projects/[id]/components/Submission.tsx
new file mode 100644
index 0000000..c1f1d60
--- /dev/null
+++ b/src/projects/[id]/components/Submission.tsx
@@ -0,0 +1,84 @@
+import { format } from "date-fns";
+import { BarChart3, Calendar, FileLock2, Trophy } from "lucide-react";
+
+import type { ProjectRecord, ScoreSummary } from "../types";
+
+type SubmissionProps = {
+  project: ProjectRecord;
+  scoreSummary: ScoreSummary;
+};
+
+function formatDate(value?: string) {
+  return value ? format(new Date(value), "dd MMM yyyy, hh:mm a") : "Not available";
+}
+
+export default function Submission({ project, scoreSummary }: SubmissionProps) {
+  const cards = [
+    { label: "Submission status", value: project.status.replace("_", " "), icon: FileLock2 },
+    { label: "Submitted at", value: formatDate(project.submittedAt), icon: Calendar },
+    { label: "Last updated", value: formatDate(project.updatedAt), icon: Calendar },
+    { label: "Version", value: project.version, icon: FileLock2 },
+  ];
+
+  return (
+    <section className="rounded-[24px] border border-slate-200 bg-white p-6 shadow-sm">
+      <div className="mb-5">
+        <p className="text-sm font-semibold uppercase tracking-[0.2em] text-slate-500">
+          Submission
+        </p>
+        <h2 className="mt-2 text-xl font-semibold text-slate-950">Lifecycle snapshot</h2>
+      </div>
+
+      <div className="grid gap-3 md:grid-cols-2">
+        {cards.map((card) => (
+          <div key={card.label} className="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-4">
+            <p className="flex items-center gap-2 text-sm font-medium text-slate-500">
+              <card.icon className="size-4" />
+              {card.label}
+            </p>
+            <p className="mt-3 text-lg font-semibold capitalize text-slate-900">{card.value}</p>
+          </div>
+        ))}
+      </div>
+
+      <div className="mt-6 rounded-[24px] border border-teal-100 bg-gradient-to-br from-teal-50 via-white to-cyan-50 p-5">
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          <div>
+            <p className="flex items-center gap-2 text-sm font-semibold uppercase tracking-[0.2em] text-teal-700">
+              <BarChart3 className="size-4" />
+              Score aggregation
+            </p>
+            <h3 className="mt-2 text-lg font-semibold text-slate-950">Evaluation summary</h3>
+          </div>
+          {scoreSummary.ranking ? (
+            <span className="inline-flex items-center gap-2 rounded-full bg-slate-900 px-3 py-1 text-sm font-medium text-white">
+              <Trophy className="size-4 text-amber-300" />
+              Rank #{scoreSummary.ranking}
+            </span>
+          ) : null}
+        </div>
+
+        <div className="mt-5 grid gap-3 sm:grid-cols-3">
+          <div className="rounded-2xl bg-white px-4 py-4 shadow-sm">
+            <p className="text-sm text-slate-500">Average score</p>
+            <p className="mt-2 text-2xl font-semibold text-slate-950">
+              {scoreSummary.averageScore === null ? "Pending" : `${scoreSummary.averageScore.toFixed(1)} / 40`}
+            </p>
+          </div>
+          <div className="rounded-2xl bg-white px-4 py-4 shadow-sm">
+            <p className="text-sm text-slate-500">Judges scored</p>
+            <p className="mt-2 text-2xl font-semibold text-slate-950">{scoreSummary.judgeCount}</p>
+          </div>
+          <div className="rounded-2xl bg-white px-4 py-4 shadow-sm">
+            <p className="text-sm text-slate-500">Judging status</p>
+            <p className="mt-2 text-2xl font-semibold capitalize text-slate-950">
+              {project.status === "under_review" || project.status === "approved" || project.status === "rejected"
+                ? "Active"
+                : "Awaiting"}
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/projects/[id]/components/Team.tsx b/src/projects/[id]/components/Team.tsx
new file mode 100644
index 0000000..8e2c601
--- /dev/null
+++ b/src/projects/[id]/components/Team.tsx
@@ -0,0 +1,44 @@
+import { Crown, Users } from "lucide-react";
+
+import type { ProjectRecord } from "../types";
+
+type TeamProps = {
+  project: ProjectRecord;
+};
+
+export default function Team({ project }: TeamProps) {
+  return (
+    <section className="rounded-[24px] border border-slate-200 bg-white p-6 shadow-sm">
+      <div className="mb-5">
+        <p className="text-sm font-semibold uppercase tracking-[0.2em] text-slate-500">Team</p>
+        <h2 className="mt-2 text-xl font-semibold text-slate-950">
+          {project.teamName || "Solo project"}
+        </h2>
+      </div>
+
+      <div className="grid gap-3">
+        {project.members.map((member, index) => (
+          <div
+            key={member.id}
+            className="flex items-center justify-between rounded-2xl border border-slate-200 px-4 py-3"
+          >
+            <div className="flex items-center gap-3">
+              <div className="flex size-11 items-center justify-center rounded-full bg-slate-900 text-sm font-semibold text-white">
+                {member.avatarLabel}
+              </div>
+              <div>
+                <p className="font-medium text-slate-900">{member.name}</p>
+                <p className="text-sm text-slate-600">{member.role}</p>
+              </div>
+            </div>
+
+            <div className="inline-flex items-center gap-2 rounded-full bg-slate-100 px-3 py-1 text-sm font-medium text-slate-700">
+              {index === 0 ? <Crown className="size-4 text-amber-500" /> : <Users className="size-4" />}
+              {index === 0 ? "Lead" : "Member"}
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
diff --git a/src/projects/[id]/components/Timeline.tsx b/src/projects/[id]/components/Timeline.tsx
new file mode 100644
index 0000000..d846eaa
--- /dev/null
+++ b/src/projects/[id]/components/Timeline.tsx
@@ -0,0 +1,65 @@
+import { format } from "date-fns";
+import {
+  CheckCircle2,
+  ClipboardCheck,
+  FileEdit,
+  FilePlus2,
+  ShieldX,
+  Trash2,
+  UploadCloud,
+} from "lucide-react";
+
+import type { TimelineEvent } from "../types";
+
+type TimelineProps = {
+  events: TimelineEvent[];
+};
+
+const iconMap: Record<TimelineEvent["type"], typeof FilePlus2> = {
+  created: FilePlus2,
+  edited: FileEdit,
+  submitted: UploadCloud,
+  scored: ClipboardCheck,
+  approved: CheckCircle2,
+  rejected: ShieldX,
+  deleted: Trash2,
+};
+
+export default function Timeline({ events }: TimelineProps) {
+  return (
+    <section className="rounded-[24px] border border-slate-200 bg-white p-6 shadow-sm">
+      <div className="mb-5">
+        <p className="text-sm font-semibold uppercase tracking-[0.2em] text-slate-500">Timeline</p>
+        <h2 className="mt-2 text-xl font-semibold text-slate-950">Activity log</h2>
+      </div>
+
+      <div className="relative space-y-5">
+        <div className="absolute left-[17px] top-2 bottom-2 w-px bg-slate-200" />
+        {events.map((event) => {
+          const Icon = iconMap[event.type];
+
+          return (
+            <div key={event.id} className="relative flex gap-4">
+              <div className="relative z-10 flex size-9 shrink-0 items-center justify-center rounded-full bg-slate-900 text-white">
+                <Icon className="size-4" />
+              </div>
+              <div className="flex-1 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-4">
+                <div className="flex flex-wrap items-center justify-between gap-3">
+                  <div>
+                    <p className="font-medium text-slate-900">{event.message}</p>
+                    <p className="mt-1 text-sm text-slate-600">
+                      {event.actorName} {" \u2022 "} {event.actorRole}
+                    </p>
+                  </div>
+                  <p className="text-sm text-slate-500">
+                    {format(new Date(event.timestamp), "dd MMM yyyy, hh:mm a")}
+                  </p>
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </section>
+  );
+}
diff --git a/src/projects/[id]/mockApi.ts b/src/projects/[id]/mockApi.ts
new file mode 100644
index 0000000..0baaf2d
--- /dev/null
+++ b/src/projects/[id]/mockApi.ts
@@ -0,0 +1,527 @@
+import { addMinutes } from "date-fns";
+
+import type {
+  JudgeScoreInput,
+  ProjectRecord,
+  ProjectUpdateInput,
+  ScoreSummary,
+  TimelineEvent,
+  UserRole,
+  ViewerContext,
+} from "./types";
+
+const NETWORK_DELAY_MS = 450;
+
+export class ProjectApiError extends Error {
+  code: "NOT_FOUND" | "UNAUTHORIZED" | "CONFLICT" | "VALIDATION" | "DELETED";
+  details?: string[];
+
+  constructor(
+    code: ProjectApiError["code"],
+    message: string,
+    details?: string[],
+  ) {
+    super(message);
+    this.code = code;
+    this.details = details;
+  }
+}
+
+const viewerDirectory: Record<string, ViewerContext> = {
+  "participant-owner": {
+    userId: "participant-owner",
+    name: "Aarav Sharma",
+    role: "participant",
+    assignedProjectIds: [],
+    ownedProjectIds: ["project-nebula"],
+    communityIds: ["community-01"],
+  },
+  "participant-guest": {
+    userId: "participant-guest",
+    name: "Nina Kapoor",
+    role: "participant",
+    assignedProjectIds: [],
+    ownedProjectIds: [],
+    communityIds: ["community-02"],
+  },
+  "judge-01": {
+    userId: "judge-01",
+    name: "Sana Malik",
+    role: "judge",
+    assignedProjectIds: ["project-nebula", "project-orbit"],
+    ownedProjectIds: [],
+    communityIds: [],
+  },
+  "judge-02": {
+    userId: "judge-02",
+    name: "Noah Bennett",
+    role: "judge",
+    assignedProjectIds: ["project-orbit"],
+    ownedProjectIds: [],
+    communityIds: [],
+  },
+  "organizer-01": {
+    userId: "organizer-01",
+    name: "Maya Torres",
+    role: "organizer",
+    assignedProjectIds: [],
+    ownedProjectIds: [],
+    communityIds: ["community-01"],
+  },
+  "admin-01": {
+    userId: "admin-01",
+    name: "Jordan Lee",
+    role: "admin",
+    assignedProjectIds: [],
+    ownedProjectIds: [],
+    communityIds: [],
+  },
+};
+
+const defaultViewerByRole: Record<UserRole, string> = {
+  participant: "participant-owner",
+  judge: "judge-01",
+  organizer: "organizer-01",
+  admin: "admin-01",
+};
+
+function isProjectInReviewLifecycle(project: ProjectRecord) {
+  return project.status === "submitted" || project.status === "under_review";
+}
+
+function buildEvent(
+  type: TimelineEvent["type"],
+  actorName: string,
+  actorRole: UserRole,
+  message: string,
+): TimelineEvent {
+  return {
+    id: `${type}-${Math.random().toString(36).slice(2, 10)}`,
+    type,
+    actorName,
+    actorRole,
+    message,
+    timestamp: new Date().toISOString(),
+  };
+}
+
+const projectStore = new Map<string, ProjectRecord>([
+  [
+    "project-nebula",
+    {
+      id: "project-nebula",
+      title: "Nebula Forge",
+      description:
+        "A collaborative hackathon workspace that turns event briefs into scoped tasks, live mentor loops, and ship-ready deliverables for student teams.",
+      eventName: "BuildSphere Hackathon 2026",
+      eventType: "AI + Productivity",
+      status: "draft",
+      teamName: "Nebula Crew",
+      members: [
+        { id: "participant-owner", name: "Aarav Sharma", role: "Frontend Engineer", avatarLabel: "AS" },
+        { id: "member-02", name: "Riya Mehta", role: "ML Engineer", avatarLabel: "RM" },
+        { id: "member-03", name: "Dev Khanna", role: "Product Designer", avatarLabel: "DK" },
+      ],
+      techStack: ["React", "TypeScript", "Node.js", "PostgreSQL", "OpenAI API"],
+      repositoryUrl: "https://github.com/commdesk/nebula-forge",
+      demoUrl: "https://nebula-forge.demo.app",
+      communityId: "community-01",
+      ownerId: "participant-owner",
+      version: "draft",
+      createdAt: "2026-04-20T08:00:00.000Z",
+      updatedAt: "2026-04-24T16:30:00.000Z",
+      judgingDeadline: addMinutes(new Date(), 180).toISOString(),
+      assignedJudgeIds: ["judge-01"],
+      judgeScores: [],
+      ranking: undefined,
+      timeline: [
+        {
+          id: "created-nebula",
+          type: "created",
+          actorName: "Aarav Sharma",
+          actorRole: "participant",
+          timestamp: "2026-04-20T08:00:00.000Z",
+          message: "Project created from the participant workspace.",
+        },
+        {
+          id: "edited-nebula",
+          type: "edited",
+          actorName: "Aarav Sharma",
+          actorRole: "participant",
+          timestamp: "2026-04-24T16:30:00.000Z",
+          message: "Updated description, demo URL, and tech stack before submission.",
+        },
+      ],
+    },
+  ],
+  [
+    "project-orbit",
+    {
+      id: "project-orbit",
+      title: "Orbit Relay",
+      description:
+        "An event operations platform that automates mentorship routing, sponsor booth lead capture, and post-demo follow-up for hackathon communities.",
+      eventName: "BuildSphere Hackathon 2026",
+      eventType: "Community Ops",
+      status: "under_review",
+      teamName: "Orbit Labs",
+      members: [
+        { id: "member-11", name: "Anika Das", role: "Founder", avatarLabel: "AD" },
+        { id: "member-12", name: "Samir Joshi", role: "Backend Engineer", avatarLabel: "SJ" },
+      ],
+      techStack: ["React", "Go", "gRPC", "Redis", "Docker"],
+      repositoryUrl: "https://github.com/commdesk/orbit-relay",
+      demoUrl: "https://orbit-relay.demo.app",
+      communityId: "community-01",
+      ownerId: "member-11",
+      version: "final",
+      createdAt: "2026-04-18T07:10:00.000Z",
+      updatedAt: "2026-04-24T10:45:00.000Z",
+      submittedAt: "2026-04-24T10:45:00.000Z",
+      judgingDeadline: addMinutes(new Date(), 90).toISOString(),
+      assignedJudgeIds: ["judge-01", "judge-02"],
+      judgeScores: [
+        {
+          judgeId: "judge-01",
+          judgeName: "Sana Malik",
+          innovation: 8,
+          technicalComplexity: 9,
+          designUx: 7,
+          impact: 8,
+          feedback: "Strong event ops framing with clear system thinking.",
+          submittedAt: "2026-04-24T12:15:00.000Z",
+        },
+      ],
+      ranking: 3,
+      timeline: [
+        {
+          id: "created-orbit",
+          type: "created",
+          actorName: "Anika Das",
+          actorRole: "participant",
+          timestamp: "2026-04-18T07:10:00.000Z",
+          message: "Project created from the participant workspace.",
+        },
+        {
+          id: "submitted-orbit",
+          type: "submitted",
+          actorName: "Anika Das",
+          actorRole: "participant",
+          timestamp: "2026-04-24T10:45:00.000Z",
+          message: "Final submission sent for judging.",
+        },
+        {
+          id: "scored-orbit",
+          type: "scored",
+          actorName: "Sana Malik",
+          actorRole: "judge",
+          timestamp: "2026-04-24T12:15:00.000Z",
+          message: "Submitted judge evaluation and feedback.",
+        },
+      ],
+    },
+  ],
+]);
+
+function cloneProject(project: ProjectRecord): ProjectRecord {
+  return structuredClone(project);
+}
+
+function validateProject(project: ProjectUpdateInput) {
+  const issues: string[] = [];
+
+  if (!project.title.trim()) issues.push("Project title is required.");
+  if (project.description.trim().length < 40)
+    issues.push("Description must be at least 40 characters.");
+  if (project.techStack.length === 0) issues.push("Add at least one technology.");
+  if (!project.repositoryUrl.trim()) issues.push("GitHub repository URL is required.");
+  if (!project.demoUrl.trim()) issues.push("Live demo URL is required.");
+
+  return issues;
+}
+
+function totalScore(input: JudgeScoreInput) {
+  return input.innovation + input.technicalComplexity + input.designUx + input.impact;
+}
+
+function ensureProject(projectId: string) {
+  const project = projectStore.get(projectId);
+
+  if (!project) {
+    throw new ProjectApiError("NOT_FOUND", "Project not found.");
+  }
+
+  if (project.deletedAt) {
+    throw new ProjectApiError("DELETED", "This project has been deleted.");
+  }
+
+  return project;
+}
+
+function wait(ms = NETWORK_DELAY_MS) {
+  return new Promise((resolve) => window.setTimeout(resolve, ms));
+}
+
+export async function fetchProject(projectId: string) {
+  await wait();
+  return cloneProject(ensureProject(projectId));
+}
+
+export async function getMockViewer(searchParams: URLSearchParams) {
+  await wait(150);
+
+  const requestedRole = searchParams.get("role") as UserRole | null;
+  const requestedViewer = searchParams.get("viewer");
+
+  if (requestedViewer && viewerDirectory[requestedViewer]) {
+    return structuredClone(viewerDirectory[requestedViewer]);
+  }
+
+  if (requestedRole && defaultViewerByRole[requestedRole]) {
+    return structuredClone(viewerDirectory[defaultViewerByRole[requestedRole]]);
+  }
+
+  return structuredClone(viewerDirectory[defaultViewerByRole.participant]);
+}
+
+export async function updateProjectDraft(
+  projectId: string,
+  actor: ViewerContext,
+  payload: ProjectUpdateInput,
+) {
+  await wait();
+
+  const project = ensureProject(projectId);
+
+  if (project.ownerId !== actor.userId || project.status !== "draft") {
+    throw new ProjectApiError(
+      "UNAUTHORIZED",
+      "Only the project owner can edit a draft project.",
+    );
+  }
+
+  const issues = validateProject(payload);
+  if (issues.length > 0) {
+    throw new ProjectApiError("VALIDATION", "Please resolve the validation issues.", issues);
+  }
+
+  project.title = payload.title.trim();
+  project.description = payload.description.trim();
+  project.techStack = payload.techStack;
+  project.repositoryUrl = payload.repositoryUrl.trim();
+  project.demoUrl = payload.demoUrl.trim();
+  project.updatedAt = new Date().toISOString();
+  project.timeline.unshift(
+    buildEvent("edited", actor.name, actor.role, "Saved draft changes to the project."),
+  );
+
+  return cloneProject(project);
+}
+
+export async function submitProject(projectId: string, actor: ViewerContext) {
+  await wait();
+
+  const project = ensureProject(projectId);
+
+  if (project.ownerId !== actor.userId || project.status !== "draft") {
+    throw new ProjectApiError(
+      "UNAUTHORIZED",
+      "Only the project owner can submit a draft project.",
+    );
+  }
+
+  const issues = validateProject({
+    title: project.title,
+    description: project.description,
+    techStack: project.techStack,
+    repositoryUrl: project.repositoryUrl,
+    demoUrl: project.demoUrl,
+  });
+
+  if (issues.length > 0) {
+    throw new ProjectApiError("VALIDATION", "Project validation failed.", issues);
+  }
+
+  const now = new Date().toISOString();
+  project.status = "submitted";
+  project.version = "final";
+  project.submittedAt = now;
+  project.updatedAt = now;
+  project.timeline.unshift(
+    buildEvent("submitted", actor.name, actor.role, "Final project submission completed."),
+  );
+
+  return cloneProject(project);
+}
+
+export async function submitJudgeScore(
+  projectId: string,
+  actor: ViewerContext,
+  payload: JudgeScoreInput,
+) {
+  await wait();
+
+  const project = ensureProject(projectId);
+
+  const isAssignedJudge =
+    actor.role === "judge" &&
+    project.assignedJudgeIds.includes(actor.userId) &&
+    actor.assignedProjectIds.includes(projectId);
+
+  if (!isAssignedJudge) {
+    throw new ProjectApiError(
+      "UNAUTHORIZED",
+      "This judge is not assigned to the selected project.",
+    );
+  }
+
+  if (!isProjectInReviewLifecycle(project)) {
+    throw new ProjectApiError(
+      "CONFLICT",
+      "Scoring is only allowed after a project has been submitted for review.",
+    );
+  }
+
+  if (new Date(project.judgingDeadline).getTime() < Date.now()) {
+    throw new ProjectApiError(
+      "CONFLICT",
+      "Judging is closed. Scores can no longer be edited.",
+    );
+  }
+
+  const values = [
+    payload.innovation,
+    payload.technicalComplexity,
+    payload.designUx,
+    payload.impact,
+  ];
+  const invalidValue = values.some((value) => value < 0 || value > 10 || Number.isNaN(value));
+
+  if (invalidValue) {
+    throw new ProjectApiError(
+      "VALIDATION",
+      "Each score must be between 0 and 10.",
+    );
+  }
+
+  if (!payload.feedback.trim()) {
+    throw new ProjectApiError("VALIDATION", "Feedback is required.");
+  }
+
+  const existingEntry = project.judgeScores.find((score) => score.judgeId === actor.userId);
+  const now = new Date().toISOString();
+
+  if (existingEntry) {
+    existingEntry.innovation = payload.innovation;
+    existingEntry.technicalComplexity = payload.technicalComplexity;
+    existingEntry.designUx = payload.designUx;
+    existingEntry.impact = payload.impact;
+    existingEntry.feedback = payload.feedback.trim();
+    existingEntry.updatedAt = now;
+  } else {
+    project.judgeScores.push({
+      judgeId: actor.userId,
+      judgeName: actor.name,
+      submittedAt: now,
+      ...payload,
+      feedback: payload.feedback.trim(),
+    });
+  }
+
+  if (project.status === "submitted") {
+    project.status = "under_review";
+  }
+
+  project.updatedAt = now;
+  project.timeline.unshift(
+    buildEvent(
+      "scored",
+      actor.name,
+      actor.role,
+      `${existingEntry ? "Updated" : "Submitted"} evaluation with a total score of ${totalScore(payload)}/40.`,
+    ),
+  );
+
+  return cloneProject(project);
+}
+
+export async function moderateProject(
+  projectId: string,
+  actor: ViewerContext,
+  decision: "approve" | "reject",
+) {
+  await wait();
+
+  const project = ensureProject(projectId);
+  const canModerate =
+    actor.role === "admin" ||
+    (actor.role === "organizer" && actor.communityIds.includes(project.communityId));
+
+  if (!canModerate) {
+    throw new ProjectApiError("UNAUTHORIZED", "You cannot moderate this project.");
+  }
+
+  if (!isProjectInReviewLifecycle(project)) {
+    throw new ProjectApiError(
+      "CONFLICT",
+      "Moderation is only allowed after a project has been submitted for review.",
+    );
+  }
+
+  project.status = decision === "approve" ? "approved" : "rejected";
+  project.updatedAt = new Date().toISOString();
+  project.timeline.unshift(
+    buildEvent(
+      decision === "approve" ? "approved" : "rejected",
+      actor.name,
+      actor.role,
+      decision === "approve"
+        ? "Approved the project for the event showcase."
+        : "Rejected the project during moderation review.",
+    ),
+  );
+
+  return cloneProject(project);
+}
+
+export async function deleteProject(projectId: string, actor: ViewerContext) {
+  await wait();
+
+  const project = ensureProject(projectId);
+  const isOwnerDraftDelete = actor.userId === project.ownerId && project.status === "draft";
+  const isModeratorDelete =
+    actor.role === "admin" ||
+    (actor.role === "organizer" && actor.communityIds.includes(project.communityId));
+
+  if (!isOwnerDraftDelete && !isModeratorDelete) {
+    throw new ProjectApiError("UNAUTHORIZED", "You cannot delete this project.");
+  }
+
+  project.deletedAt = new Date().toISOString();
+  project.updatedAt = project.deletedAt;
+  project.timeline.unshift(
+    buildEvent("deleted", actor.name, actor.role, "Deleted the project record."),
+  );
+
+  return cloneProject(project);
+}
+
+export function getScoreSummary(project: ProjectRecord): ScoreSummary {
+  if (project.judgeScores.length === 0) {
+    return {
+      averageScore: null,
+      judgeCount: 0,
+      ranking: project.ranking,
+    };
+  }
+
+  const totals = project.judgeScores.map((score) => totalScore(score));
+  const averageScore =
+    totals.reduce((sum, score) => sum + score, 0) / totals.length;
+
+  return {
+    averageScore,
+    judgeCount: project.judgeScores.length,
+    ranking: project.ranking,
+  };
+}
diff --git a/src/projects/[id]/page.tsx b/src/projects/[id]/page.tsx
new file mode 100644
index 0000000..12b6e75
--- /dev/null
+++ b/src/projects/[id]/page.tsx
@@ -0,0 +1,387 @@
+import { AlertTriangle, RefreshCcw, ShieldAlert } from "lucide-react";
+import { startTransition, useCallback, useEffect, useMemo, useState, type ReactNode } from "react";
+import { useParams, useSearchParams } from "react-router-dom";
+
+import { Button } from "@/shadcnComponet/ui/button";
+import { cn } from "@/lib/utils";
+
+import Header from "./components/Header";
+import ModerationPanel from "./components/ModerationPanel";
+import Overview from "./components/Overview";
+import ScorePanel from "./components/ScorePanel";
+import Submission from "./components/Submission";
+import Team from "./components/Team";
+import Timeline from "./components/Timeline";
+import {
+  deleteProject,
+  fetchProject,
+  getMockViewer,
+  getScoreSummary,
+  moderateProject,
+  ProjectApiError,
+  submitJudgeScore,
+  submitProject,
+  updateProjectDraft,
+} from "./mockApi";
+import { getProjectPermissions } from "./permissions";
+import type { JudgeScoreInput, ProjectRecord, ProjectUpdateInput, ViewerContext } from "./types";
+
+type PageState = "loading" | "ready" | "error" | "not-found" | "unauthorized" | "deleted";
+
+type PendingAction =
+  | "save"
+  | "submit"
+  | "score"
+  | "approve"
+  | "reject"
+  | "delete"
+  | null;
+
+function StatePanel({
+  title,
+  description,
+  action,
+  icon: Icon,
+}: {
+  title: string;
+  description: string;
+  action?: ReactNode;
+  icon: typeof AlertTriangle;
+}) {
+  return (
+    <div className="mx-auto flex min-h-[70vh] max-w-2xl items-center justify-center px-6 py-12">
+      <div className="w-full rounded-[28px] border border-slate-200 bg-white p-8 text-center shadow-sm">
+        <div className="mx-auto flex size-14 items-center justify-center rounded-full bg-slate-100">
+          <Icon className="size-6 text-slate-700" />
+        </div>
+        <h1 className="mt-5 text-2xl font-semibold text-slate-950">{title}</h1>
+        <p className="mt-3 text-base leading-7 text-slate-600">{description}</p>
+        {action ? <div className="mt-6 flex justify-center">{action}</div> : null}
+      </div>
+    </div>
+  );
+}
+
+function LoadingSkeleton() {
+  return (
+    <div className="min-h-screen w-full bg-[radial-gradient(circle_at_top_right,_rgba(34,211,238,0.18),transparent_30%),radial-gradient(circle_at_bottom_left,_rgba(245,158,11,0.18),transparent_25%),#f8fafc] px-4 py-6 sm:px-6 lg:px-10">
+      <div className="mx-auto flex w-full max-w-7xl flex-col gap-6">
+        <div className="h-52 animate-pulse rounded-[28px] bg-white/80" />
+        <div className="grid gap-6 xl:grid-cols-[minmax(0,1.6fr)_minmax(320px,0.9fr)]">
+          <div className="space-y-6">
+            <div className="h-72 animate-pulse rounded-[24px] bg-white/80" />
+            <div className="h-64 animate-pulse rounded-[24px] bg-white/80" />
+            <div className="h-80 animate-pulse rounded-[24px] bg-white/80" />
+          </div>
+          <div className="space-y-6">
+            <div className="h-72 animate-pulse rounded-[24px] bg-white/80" />
+            <div className="h-96 animate-pulse rounded-[24px] bg-white/80" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function ProjectDetailPage() {
+  const { projectId } = useParams<{ projectId: string }>();
+  const [searchParams] = useSearchParams();
+
+  const [pageState, setPageState] = useState<PageState>("loading");
+  const [project, setProject] = useState<ProjectRecord | null>(null);
+  const [viewer, setViewer] = useState<ViewerContext | null>(null);
+  const [pendingAction, setPendingAction] = useState<PendingAction>(null);
+  const [editingOverview, setEditingOverview] = useState(false);
+  const [flashMessage, setFlashMessage] = useState<string | null>(null);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [validationErrors, setValidationErrors] = useState<string[]>([]);
+
+  const loadProject = useCallback(async () => {
+    if (!projectId) {
+      setPageState("not-found");
+      return;
+    }
+
+    setPageState("loading");
+    setErrorMessage(null);
+
+    try {
+      const [projectResponse, viewerResponse] = await Promise.all([
+        fetchProject(projectId),
+        getMockViewer(searchParams),
+      ]);
+
+      const nextPermissions = getProjectPermissions(projectResponse, viewerResponse);
+
+      startTransition(() => {
+        setProject(projectResponse);
+        setViewer(viewerResponse);
+        setValidationErrors([]);
+        setEditingOverview(false);
+        setPageState(nextPermissions.canView ? "ready" : "unauthorized");
+        setErrorMessage(nextPermissions.denialReason ?? null);
+      });
+    } catch (error) {
+      if (error instanceof ProjectApiError) {
+        if (error.code === "DELETED") {
+          setPageState("deleted");
+          return;
+        }
+
+        if (error.code === "NOT_FOUND") {
+          setPageState("not-found");
+          return;
+        }
+      }
+
+      setPageState("error");
+      setErrorMessage("We could not load the project right now.");
+    }
+  }, [projectId, searchParams]);
+
+  useEffect(() => {
+    void loadProject();
+  }, [loadProject]);
+
+  const permissions = useMemo(() => {
+    if (!project || !viewer) return null;
+    return getProjectPermissions(project, viewer);
+  }, [project, viewer]);
+
+  const scoreSummary = useMemo(() => (project ? getScoreSummary(project) : null), [project]);
+
+  async function runAction(
+    action: Exclude<PendingAction, null>,
+    operation: () => Promise<ProjectRecord>,
+    options?: { successMessage?: string; deletedState?: boolean; preserveEditing?: boolean },
+  ) {
+    setPendingAction(action);
+    setErrorMessage(null);
+    setValidationErrors([]);
+
+    try {
+      const result = await operation();
+
+      if (options?.deletedState) {
+        setProject(null);
+        setPageState("deleted");
+      } else {
+        setProject(result);
+        setPageState("ready");
+      }
+
+      if (!options?.preserveEditing) {
+        setEditingOverview(false);
+      }
+
+      setFlashMessage(options?.successMessage ?? null);
+    } catch (error) {
+      if (error instanceof ProjectApiError) {
+        if (error.code === "DELETED") {
+          setPageState("deleted");
+          return;
+        }
+
+        if (error.code === "NOT_FOUND") {
+          setPageState("not-found");
+          return;
+        }
+
+        setErrorMessage(error.message);
+        setValidationErrors(error.details ?? []);
+        if (action === "save") {
+          setEditingOverview(true);
+        }
+        return;
+      }
+
+      setErrorMessage("Something went wrong while updating the project.");
+    } finally {
+      setPendingAction(null);
+    }
+  }
+
+  if (pageState === "loading") {
+    return <LoadingSkeleton />;
+  }
+
+  if (pageState === "not-found") {
+    return (
+      <StatePanel
+        title="Project not found"
+        description="The project may have been removed, or the link is no longer valid."
+        icon={AlertTriangle}
+        action={
+          <Button variant="outline" onClick={() => void loadProject()}>
+            <RefreshCcw className="size-4" />
+            Retry
+          </Button>
+        }
+      />
+    );
+  }
+
+  if (pageState === "deleted") {
+    return (
+      <StatePanel
+        title="Project deleted"
+        description="This project was removed while you were viewing it, so lifecycle actions are no longer available."
+        icon={ShieldAlert}
+      />
+    );
+  }
+
+  if (pageState === "error") {
+    return (
+      <StatePanel
+        title="Unable to load project"
+        description={errorMessage ?? "A temporary issue blocked the project detail page."}
+        icon={AlertTriangle}
+        action={
+          <Button variant="outline" onClick={() => void loadProject()}>
+            <RefreshCcw className="size-4" />
+            Retry
+          </Button>
+        }
+      />
+    );
+  }
+
+  if (pageState === "unauthorized") {
+    return (
+      <StatePanel
+        title="Access denied"
+        description={
+          errorMessage ??
+          "Your current role does not have permission to view this project."
+        }
+        icon={ShieldAlert}
+      />
+    );
+  }
+
+  if (!project || !viewer || !permissions || !scoreSummary) {
+    return null;
+  }
+
+  return (
+    <div className="min-h-screen w-full bg-[radial-gradient(circle_at_top_right,_rgba(34,211,238,0.18),transparent_30%),radial-gradient(circle_at_bottom_left,_rgba(245,158,11,0.18),transparent_25%),#f8fafc] px-4 py-6 sm:px-6 lg:px-10">
+      <div className="mx-auto flex w-full max-w-7xl flex-col gap-6">
+        <Header
+          project={project}
+          viewer={viewer}
+          permissions={permissions}
+          isWorking={pendingAction !== null}
+          onEdit={() => {
+            setValidationErrors([]);
+            setEditingOverview(true);
+          }}
+          onDelete={() =>
+            void runAction("delete", () => deleteProject(project.id, viewer), {
+              deletedState: true,
+              successMessage: "Project deleted successfully.",
+            })
+          }
+          onSubmit={() =>
+            void runAction("submit", () => submitProject(project.id, viewer), {
+              successMessage: "Project submitted successfully. Editing is now locked.",
+            })
+          }
+          onApprove={() =>
+            void runAction("approve", () => moderateProject(project.id, viewer, "approve"), {
+              successMessage: "Project approved.",
+            })
+          }
+          onReject={() =>
+            void runAction("reject", () => moderateProject(project.id, viewer, "reject"), {
+              successMessage: "Project rejected.",
+            })
+          }
+        />
+
+        {(flashMessage || errorMessage) && (
+          <div
+            className={cn(
+              "rounded-2xl border px-4 py-3 text-sm shadow-sm",
+              errorMessage
+                ? "border-rose-200 bg-rose-50 text-rose-700"
+                : "border-emerald-200 bg-emerald-50 text-emerald-700",
+            )}
+          >
+            {errorMessage ?? flashMessage}
+          </div>
+        )}
+
+        <div className="grid gap-6 xl:grid-cols-[minmax(0,1.65fr)_minmax(320px,0.95fr)]">
+          <div className="space-y-6">
+            <Overview
+              key={`${project.id}-${project.updatedAt}-${editingOverview ? "editing" : "view"}`}
+              project={project}
+              canEdit={permissions.canEdit}
+              isEditing={editingOverview}
+              isSaving={pendingAction === "save"}
+              validationErrors={validationErrors}
+              onEditingChange={setEditingOverview}
+              onSave={(values: ProjectUpdateInput) =>
+                runAction("save", () => updateProjectDraft(project.id, viewer, values), {
+                  successMessage: "Draft updated.",
+                })
+              }
+            />
+            <Submission project={project} scoreSummary={scoreSummary} />
+            <Timeline events={project.timeline} />
+          </div>
+
+          <div className="space-y-6">
+            <Team project={project} />
+
+            {viewer.role === "judge" && (
+              <ScorePanel
+                key={`${project.id}-${viewer.userId}-${project.updatedAt}`}
+                project={project}
+                viewer={viewer}
+                permissions={permissions}
+                isSubmitting={pendingAction === "score"}
+                onSubmit={(values: JudgeScoreInput) => {
+                  if (!permissions.canScore) {
+                    setErrorMessage("Scoring is only allowed when the project is submitted for review.");
+                    setValidationErrors([]);
+                    return;
+                  }
+
+                  void runAction("score", () => submitJudgeScore(project.id, viewer, values), {
+                    successMessage: "Judge score submitted.",
+                  });
+                }}
+              />
+            )}
+
+            {(viewer.role === "organizer" || viewer.role === "admin") && permissions.canModerate && (
+              <ModerationPanel
+                project={project}
+                scoreSummary={scoreSummary}
+                isWorking={pendingAction === "approve" || pendingAction === "reject" || pendingAction === "delete"}
+                onApprove={() =>
+                  void runAction("approve", () => moderateProject(project.id, viewer, "approve"), {
+                    successMessage: "Project approved.",
+                  })
+                }
+                onReject={() =>
+                  void runAction("reject", () => moderateProject(project.id, viewer, "reject"), {
+                    successMessage: "Project rejected.",
+                  })
+                }
+                onDelete={() =>
+                  void runAction("delete", () => deleteProject(project.id, viewer), {
+                    deletedState: true,
+                    successMessage: "Project deleted successfully.",
+                  })
+                }
+              />
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/projects/[id]/permissions.ts b/src/projects/[id]/permissions.ts
new file mode 100644
index 0000000..09f9dbf
--- /dev/null
+++ b/src/projects/[id]/permissions.ts
@@ -0,0 +1,73 @@
+import { isAfter, parseISO } from "date-fns";
+
+import type { ProjectPermissions, ProjectRecord, ViewerContext } from "./types";
+
+function isProjectInReviewLifecycle(project: ProjectRecord) {
+  return project.status === "submitted" || project.status === "under_review";
+}
+
+export function getProjectPermissions(
+  project: ProjectRecord,
+  viewer: ViewerContext,
+  now = new Date(),
+): ProjectPermissions {
+  if (project.deletedAt) {
+    return {
+      canView: false,
+      canEdit: false,
+      canDeleteDraft: false,
+      canSubmit: false,
+      canScore: false,
+      canEditScore: false,
+      canModerate: false,
+      canDeleteAny: false,
+      denialReason: "This project has been deleted.",
+    };
+  }
+
+  const isOwner = project.ownerId === viewer.userId;
+  const isAssignedJudge =
+    viewer.role === "judge" &&
+    project.assignedJudgeIds.includes(viewer.userId) &&
+    viewer.assignedProjectIds.includes(project.id);
+  const isCommunityOrganizer =
+    viewer.role === "organizer" && viewer.communityIds.includes(project.communityId);
+  const isAdmin = viewer.role === "admin";
+
+  const canView =
+    isOwner || isAssignedJudge || isCommunityOrganizer || isAdmin;
+
+  if (!canView) {
+    const denialReason =
+      viewer.role === "judge"
+        ? "You are not assigned to evaluate this project."
+        : "You do not have access to this project.";
+
+    return {
+      canView: false,
+      canEdit: false,
+      canDeleteDraft: false,
+      canSubmit: false,
+      canScore: false,
+      canEditScore: false,
+      canModerate: false,
+      canDeleteAny: false,
+      denialReason,
+    };
+  }
+
+  const deadlinePassed = isAfter(now, parseISO(project.judgingDeadline));
+  const existingScore = project.judgeScores.find((entry) => entry.judgeId === viewer.userId);
+  const reviewLifecycleActive = isProjectInReviewLifecycle(project);
+
+  return {
+    canView: true,
+    canEdit: isOwner && project.status === "draft",
+    canDeleteDraft: isOwner && project.status === "draft",
+    canSubmit: isOwner && project.status === "draft",
+    canScore: isAssignedJudge && reviewLifecycleActive && !deadlinePassed,
+    canEditScore: Boolean(isAssignedJudge && existingScore && reviewLifecycleActive && !deadlinePassed),
+    canModerate: (isCommunityOrganizer || isAdmin) && reviewLifecycleActive,
+    canDeleteAny: isCommunityOrganizer || isAdmin,
+  };
+}
diff --git a/src/projects/[id]/types.ts b/src/projects/[id]/types.ts
new file mode 100644
index 0000000..485a769
--- /dev/null
+++ b/src/projects/[id]/types.ts
@@ -0,0 +1,104 @@
+export type ProjectStatus = "draft" | "submitted" | "under_review" | "approved" | "rejected";
+
+export type UserRole = "participant" | "judge" | "organizer" | "admin";
+
+export type TimelineEventType =
+  | "created"
+  | "edited"
+  | "submitted"
+  | "scored"
+  | "approved"
+  | "rejected"
+  | "deleted";
+
+export type ProjectMember = {
+  id: string;
+  name: string;
+  role: string;
+  avatarLabel: string;
+};
+
+export type JudgeScoreInput = {
+  innovation: number;
+  technicalComplexity: number;
+  designUx: number;
+  impact: number;
+  feedback: string;
+};
+
+export type JudgeScore = JudgeScoreInput & {
+  judgeId: string;
+  judgeName: string;
+  submittedAt: string;
+  updatedAt?: string;
+};
+
+export type TimelineEvent = {
+  id: string;
+  type: TimelineEventType;
+  actorName: string;
+  actorRole: UserRole;
+  timestamp: string;
+  message: string;
+};
+
+export type ProjectRecord = {
+  id: string;
+  title: string;
+  description: string;
+  eventName: string;
+  eventType: string;
+  status: ProjectStatus;
+  teamName?: string;
+  members: ProjectMember[];
+  techStack: string[];
+  repositoryUrl: string;
+  demoUrl: string;
+  communityId: string;
+  ownerId: string;
+  version: "draft" | "final";
+  createdAt: string;
+  updatedAt: string;
+  submittedAt?: string;
+  judgingDeadline: string;
+  assignedJudgeIds: string[];
+  judgeScores: JudgeScore[];
+  ranking?: number;
+  timeline: TimelineEvent[];
+  deletedAt?: string;
+};
+
+export type ViewerContext = {
+  userId: string;
+  name: string;
+  role: UserRole;
+  assignedProjectIds: string[];
+  ownedProjectIds: string[];
+  communityIds: string[];
+};
+
+export type ProjectPermissions = {
+  canView: boolean;
+  canEdit: boolean;
+  canDeleteDraft: boolean;
+  canSubmit: boolean;
+  canScore: boolean;
+  canEditScore: boolean;
+  canModerate: boolean;
+  canDeleteAny: boolean;
+  denialReason?: string;
+};
+
+export type ProjectUpdateInput = {
+  title: string;
+  description: string;
+  techStack: string[];
+  repositoryUrl: string;
+  demoUrl: string;
+};
+
+export type ScoreSummary = {
+  averageScore: number | null;
+  judgeCount: number;
+  ranking?: number;
+};