From 9210af6e0162361c5bce21d6427014ef8a80371c Mon Sep 17 00:00:00 2001
From: itzzavdheshh <aavdhesh.dadhich@gmail.com>
Date: Sun, 10 May 2026 00:12:51 +0530
Subject: [PATCH 01/13] =?UTF-8?q?feat:=20Event-Based=20Task=20Management?=
 =?UTF-8?q?=20System=20=E2=80=94=20CommDesk?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pnpm-workspace.yaml                           |   3 +
 src/App.css                                   |  13 +-
 src/App.tsx                                   |  11 +
 .../SideBar/v1/Section/BotamNavBar.tsx        |   8 +-
 src/features/SideBar/v1/Section/SideBar.tsx   |   3 +-
 src/features/Tasks/v1/Task.types.ts           | 122 +++++
 .../Tasks/v1/components/common/Avatar.tsx     | 140 ++++++
 .../v1/components/common/CommentsSection.tsx  |  83 ++++
 .../v1/components/common/ConfirmModal.tsx     | 112 +++++
 .../Tasks/v1/components/common/EmptyState.tsx | 101 +++++
 .../v1/components/common/PriorityBadge.tsx    |  22 +
 .../v1/components/common/SkeletonLoader.tsx   | 136 ++++++
 .../v1/components/common/StatusBadge.tsx      |  22 +
 .../components/common/ToastNotification.tsx   | 144 ++++++
 .../v1/components/event/EventDropdown.tsx     | 253 +++++++++++
 .../v1/components/submission/ReviewPanel.tsx  | 188 ++++++++
 .../components/submission/SubmissionCard.tsx  | 126 ++++++
 .../components/submission/SubmissionList.tsx  | 175 ++++++++
 .../Tasks/v1/components/task/TaskCardList.tsx | 171 +++++++
 .../Tasks/v1/components/task/TaskFilters.tsx  | 297 ++++++++++++
 .../Tasks/v1/components/task/TaskForm.tsx     | 325 ++++++++++++++
 .../Tasks/v1/components/task/TaskHeader.tsx   |  87 ++++
 .../Tasks/v1/components/task/TaskRow.tsx      | 117 +++++
 .../Tasks/v1/components/task/TaskTable.tsx    | 130 ++++++
 .../Tasks/v1/constants/task.constants.ts      | 135 ++++++
 .../Tasks/v1/constants/tech.constants.ts      |  24 +
 src/features/Tasks/v1/hooks/useComments.ts    |  38 ++
 src/features/Tasks/v1/hooks/useEvents.ts      |  16 +
 src/features/Tasks/v1/hooks/useSubmissions.ts |  52 +++
 src/features/Tasks/v1/hooks/useTaskDetail.ts  |  30 ++
 src/features/Tasks/v1/hooks/useTasks.ts       | 124 +++++
 src/features/Tasks/v1/index.ts                |  37 ++
 src/features/Tasks/v1/mock/taskMockData.ts    | 204 +++++++++
 src/features/Tasks/v1/mock/taskStore.ts       |  20 +
 .../Tasks/v1/pages/CreateTaskPage.tsx         |  33 ++
 src/features/Tasks/v1/pages/EditTaskPage.tsx  |  55 +++
 .../Tasks/v1/pages/TaskDetailPage.tsx         | 424 ++++++++++++++++++
 .../Tasks/v1/pages/TaskManagementPage.tsx     | 138 ++++++
 38 files changed, 4115 insertions(+), 4 deletions(-)
 create mode 100644 pnpm-workspace.yaml
 create mode 100644 src/features/Tasks/v1/Task.types.ts
 create mode 100644 src/features/Tasks/v1/components/common/Avatar.tsx
 create mode 100644 src/features/Tasks/v1/components/common/CommentsSection.tsx
 create mode 100644 src/features/Tasks/v1/components/common/ConfirmModal.tsx
 create mode 100644 src/features/Tasks/v1/components/common/EmptyState.tsx
 create mode 100644 src/features/Tasks/v1/components/common/PriorityBadge.tsx
 create mode 100644 src/features/Tasks/v1/components/common/SkeletonLoader.tsx
 create mode 100644 src/features/Tasks/v1/components/common/StatusBadge.tsx
 create mode 100644 src/features/Tasks/v1/components/common/ToastNotification.tsx
 create mode 100644 src/features/Tasks/v1/components/event/EventDropdown.tsx
 create mode 100644 src/features/Tasks/v1/components/submission/ReviewPanel.tsx
 create mode 100644 src/features/Tasks/v1/components/submission/SubmissionCard.tsx
 create mode 100644 src/features/Tasks/v1/components/submission/SubmissionList.tsx
 create mode 100644 src/features/Tasks/v1/components/task/TaskCardList.tsx
 create mode 100644 src/features/Tasks/v1/components/task/TaskFilters.tsx
 create mode 100644 src/features/Tasks/v1/components/task/TaskForm.tsx
 create mode 100644 src/features/Tasks/v1/components/task/TaskHeader.tsx
 create mode 100644 src/features/Tasks/v1/components/task/TaskRow.tsx
 create mode 100644 src/features/Tasks/v1/components/task/TaskTable.tsx
 create mode 100644 src/features/Tasks/v1/constants/task.constants.ts
 create mode 100644 src/features/Tasks/v1/constants/tech.constants.ts
 create mode 100644 src/features/Tasks/v1/hooks/useComments.ts
 create mode 100644 src/features/Tasks/v1/hooks/useEvents.ts
 create mode 100644 src/features/Tasks/v1/hooks/useSubmissions.ts
 create mode 100644 src/features/Tasks/v1/hooks/useTaskDetail.ts
 create mode 100644 src/features/Tasks/v1/hooks/useTasks.ts
 create mode 100644 src/features/Tasks/v1/index.ts
 create mode 100644 src/features/Tasks/v1/mock/taskMockData.ts
 create mode 100644 src/features/Tasks/v1/mock/taskStore.ts
 create mode 100644 src/features/Tasks/v1/pages/CreateTaskPage.tsx
 create mode 100644 src/features/Tasks/v1/pages/EditTaskPage.tsx
 create mode 100644 src/features/Tasks/v1/pages/TaskDetailPage.tsx
 create mode 100644 src/features/Tasks/v1/pages/TaskManagementPage.tsx

diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
new file mode 100644
index 0000000..04338cc
--- /dev/null
+++ b/pnpm-workspace.yaml
@@ -0,0 +1,3 @@
+allowBuilds:
+  esbuild: set this to true or false
+  msw: set this to true or false
diff --git a/src/App.css b/src/App.css
index b8822c2..6611c43 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,9 +1,9 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
+
 @import "tailwindcss";
 @import "tw-animate-css";
 @import "shadcn/tailwind.css";
 
-@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
-
 @custom-variant dark (&:is(.dark *));
 @plugin "@tailwindcss/typography";
 
@@ -175,4 +175,13 @@ body {
   .badge-default {
     @apply bg-gray-100 text-gray-600 px-2 py-1 rounded-full text-xs;
   }
+  
+  @keyframes shimmer {
+    100% {
+      transform: translateX(100%);
+    }
+  }
+  .animate-\[shimmer_1\.4s_infinite\] {
+    animation: shimmer 1.4s infinite;
+  }
 }
diff --git a/src/App.tsx b/src/App.tsx
index a279c7c..035f1bf 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -13,6 +13,11 @@ import ViewEvent from "./features/Events/v1/Pages/ViewEvent";
 import LoginPage from "./features/Auth/v1/Pages/LoginPage";
 import SignUpPage from "./features/Auth/v1/Pages/SignUpPage";
 
+import TaskManagementPage from "./features/Tasks/v1/pages/TaskManagementPage";
+import CreateTaskPage from "./features/Tasks/v1/pages/CreateTaskPage";
+import TaskDetailPage from "./features/Tasks/v1/pages/TaskDetailPage";
+import EditTaskPage from "./features/Tasks/v1/pages/EditTaskPage";
+
 import { startAutoUpdater } from "./system/updater/autoUpdater";
 import ProtectedRoute from "./routes/ProtectedRoute";
 import { dashboardData } from "./features/Dashboard/mock/dashboardData";
@@ -59,6 +64,12 @@ function App() {
           <Route path="create-event" element={<CreateNewEvent />} />
           <Route path="contact" element={<Contact />} />
 
+          {/* Tasks */}
+          <Route path="tasks" element={<ProtectedRoute user={user} allowedRoles={["Member", "Admin"]}><TaskManagementPage /></ProtectedRoute>} />
+          <Route path="tasks/create" element={<ProtectedRoute user={user} allowedRoles={["Member", "Admin"]}><CreateTaskPage /></ProtectedRoute>} />
+          <Route path="tasks/:taskId" element={<ProtectedRoute user={user} allowedRoles={["Member", "Admin"]}><TaskDetailPage /></ProtectedRoute>} />
+          <Route path="tasks/:taskId/edit" element={<ProtectedRoute user={user} allowedRoles={["Member", "Admin"]}><EditTaskPage /></ProtectedRoute>} />
+
           <Route path="*" element={<div>404 Not Found</div>} />
         </Route>
 
diff --git a/src/features/SideBar/v1/Section/BotamNavBar.tsx b/src/features/SideBar/v1/Section/BotamNavBar.tsx
index 1622495..12fe6a1 100644
--- a/src/features/SideBar/v1/Section/BotamNavBar.tsx
+++ b/src/features/SideBar/v1/Section/BotamNavBar.tsx
@@ -1,6 +1,6 @@
 import { RiContactsBookFill } from "react-icons/ri";
 import { type IconType } from "react-icons";
-import { MdDashboard, MdEvent, MdGroup } from "react-icons/md";
+import { MdDashboard, MdEvent, MdGroup, MdAssignment } from "react-icons/md";
 import { Link, useLocation } from "react-router-dom";
 import { getTheme } from "../../../../config/them.config";
 
@@ -30,6 +30,12 @@ const navItems: NavItem[] = [
     link: "/events",
     isActive: (pathname) => pathname.startsWith("/events") || pathname.startsWith("/create-event"),
   },
+  {
+    icon: MdAssignment,
+    text: "Tasks",
+    link: "/tasks",
+    isActive: (pathname) => pathname.startsWith("/tasks"),
+  },
   {
     icon: RiContactsBookFill,
     text: "Support",
diff --git a/src/features/SideBar/v1/Section/SideBar.tsx b/src/features/SideBar/v1/Section/SideBar.tsx
index a33f80d..f30346c 100644
--- a/src/features/SideBar/v1/Section/SideBar.tsx
+++ b/src/features/SideBar/v1/Section/SideBar.tsx
@@ -1,7 +1,7 @@
 import { RiContactsBookFill } from "react-icons/ri";
 import { getTheme } from "../../../../config/them.config";
 import SideBarLink from "../Components/SideBarLink";
-import { MdDashboard, MdEvent, MdGroup, MdSettings, MdWork } from "react-icons/md";
+import { MdDashboard, MdEvent, MdGroup, MdSettings, MdWork, MdAssignment } from "react-icons/md";
 import { dashboardData } from "@/features/Dashboard/mock/dashboardData";
 
 const SideBar = () => {
@@ -42,6 +42,7 @@ const SideBar = () => {
         <SideBarLink icon={<MdWork />} text="Projects" />
         <SideBarLink icon={<MdGroup />} text="Teams" link="/org/member" />
         <SideBarLink icon={<MdEvent />} text="Events" link="/org/events" />
+        <SideBarLink icon={<MdAssignment />} text="Tasks" link="/org/tasks" />
         <SideBarLink icon={<RiContactsBookFill />} text="Contact Submissions" link="/org/contact" />
 
         <div
diff --git a/src/features/Tasks/v1/Task.types.ts b/src/features/Tasks/v1/Task.types.ts
new file mode 100644
index 0000000..5c43155
--- /dev/null
+++ b/src/features/Tasks/v1/Task.types.ts
@@ -0,0 +1,122 @@
+export type TaskStatus      = "todo" | "in-progress" | "completed";
+export type TaskPriority    = "low" | "medium" | "high";
+export type SubmissionType  = "file" | "github" | "both";
+export type SubmissionStatus = "not-submitted" | "submitted" | "reviewed";
+export type ReviewDecision  = "approved" | "rejected" | "pending";
+export type EventType       = "hackathon" | "workshop" | "internal" | "community";
+
+// ─── Technology tag ───────────────────────────────────────────────────────────
+export interface TechTag {
+  id: string;
+  label: string;
+  color: string; // Tailwind bg class e.g. "bg-sky-100 text-sky-700"
+}
+
+export interface EventOption {
+  id: string;
+  name: string;
+  subtitle: string;
+  type: EventType;
+  status: "Live" | "Upcoming" | "Completed";
+  startDate: string;
+  endDate: string;
+}
+
+export interface MemberOption {
+  id: string;
+  name: string;
+  avatar: string;
+  role: string;
+  email: string;
+}
+
+export interface Task {
+  id: string;
+  eventId: string;
+  title: string;
+  description: string;
+  status: TaskStatus;
+  priority: TaskPriority;
+  deadline: string;
+  assignedTo: MemberOption[];
+  submissionType: SubmissionType;
+  submissionStatus: SubmissionStatus;
+  isMandatory: boolean;
+  points?: number;
+  allowLateSubmission: boolean;
+  maxSubmissions?: number;
+  attachments?: string[];
+  technologies?: TechTag[]; // NEW
+  createdAt: string;
+  updatedAt: string;
+  createdBy: string;
+}
+
+export interface Submission {
+  id: string;
+  taskId: string;
+  submittedBy: MemberOption;
+  fileUrl?: string;
+  githubUrl?: string;
+  notes?: string;
+  submittedAt: string;
+  review?: SubmissionReview;
+}
+
+export interface SubmissionReview {
+  decision: ReviewDecision;
+  score?: number;
+  feedback?: string;
+  reviewedBy: string;
+  reviewedAt: string;
+}
+
+export interface ActivityEvent {
+  id: string;
+  type: "created" | "updated" | "submitted" | "reviewed" | "commented";
+  actor: string;
+  description: string;
+  timestamp: string;
+}
+
+export interface TaskComment {
+  id: string;
+  taskId: string;
+  author: string;
+  avatar: string;
+  text: string;
+  createdAt: string;
+}
+
+export interface TaskFilters {
+  status: TaskStatus | "all";
+  priority: TaskPriority | "all";
+  time: "all" | "upcoming" | "past" | "completed";
+  members: string[];
+  search: string;
+}
+
+export interface CreateTaskPayload {
+  eventId: string;
+  title: string;
+  description: string;
+  assignedTo: string[];
+  deadline: string;
+  priority: TaskPriority;
+  submissionType: SubmissionType;
+  isMandatory: boolean;
+  points?: number;
+  allowLateSubmission: boolean;
+  maxSubmissions?: number;
+  technologies?: TechTag[];
+}
+
+export interface UpdateTaskPayload extends Partial<CreateTaskPayload> {
+  status?: TaskStatus;
+}
+
+export interface ReviewSubmissionPayload {
+  decision: ReviewDecision;
+  score?: number;
+  feedback?: string;
+}
\ No newline at end of file
diff --git a/src/features/Tasks/v1/components/common/Avatar.tsx b/src/features/Tasks/v1/components/common/Avatar.tsx
new file mode 100644
index 0000000..2902533
--- /dev/null
+++ b/src/features/Tasks/v1/components/common/Avatar.tsx
@@ -0,0 +1,140 @@
+import { useState } from "react";
+
+interface AvatarProps {
+  name: string;
+  src: string;
+  role?: string;
+  size?: "xs" | "sm" | "md" | "lg";
+  showTooltip?: boolean;
+  status?: "online" | "offline" | "busy" | null;
+  ring?: boolean;
+  ringColor?: string;
+}
+
+// Color map for initials fallback — derived from name char code
+const BG_COLORS = [
+  "bg-indigo-500", "bg-pink-500", "bg-orange-500",
+  "bg-emerald-500", "bg-sky-500", "bg-violet-500",
+  "bg-rose-500",   "bg-amber-500","bg-teal-500",
+];
+
+function getColor(name: string): string {
+  const code = name.charCodeAt(0) + (name.charCodeAt(1) ?? 0);
+  return BG_COLORS[code % BG_COLORS.length];
+}
+
+function getInitials(name: string): string {
+  return name.split(" ").map(w => w[0]).join("").slice(0, 2).toUpperCase();
+}
+
+const SIZE_MAP = {
+  xs: { outer: "w-6 h-6",   text: "text-[9px]",  dot: "w-1.5 h-1.5 -right-0 -bottom-0",   ring: "ring-1" },
+  sm: { outer: "w-7 h-7",   text: "text-[10px]", dot: "w-2 h-2 -right-0 -bottom-0",        ring: "ring-2" },
+  md: { outer: "w-9 h-9",   text: "text-xs",     dot: "w-2.5 h-2.5 right-0 bottom-0",      ring: "ring-2" },
+  lg: { outer: "w-12 h-12", text: "text-sm",     dot: "w-3 h-3 right-0.5 bottom-0.5",      ring: "ring-2" },
+};
+
+const STATUS_COLOR = {
+  online:  "bg-emerald-400",
+  offline: "bg-gray-300",
+  busy:    "bg-red-400",
+};
+
+export default function Avatar({
+  name, src, role, size = "sm",
+  showTooltip = true, status = null, ring = false, ringColor = "ring-white",
+}: AvatarProps) {
+  const [imgError, setImgError] = useState(false);
+  const [hovered, setHovered]   = useState(false);
+  const sz = SIZE_MAP[size];
+  const initials = getInitials(name);
+  const bgColor  = getColor(name);
+
+  return (
+    <div
+      className="relative inline-flex shrink-0 group"
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+    >
+      {/* Avatar circle */}
+      <div className={`
+        ${sz.outer} rounded-full overflow-hidden
+        ${ring ? `${sz.ring} ${ringColor}` : ""}
+        shadow-sm transition-transform duration-150
+        ${showTooltip ? "group-hover:scale-110 group-hover:shadow-md cursor-pointer" : ""}
+      `}>
+        {!imgError ? (
+          <img
+            src={src}
+            alt={name}
+            onError={() => setImgError(true)}
+            className="w-full h-full object-cover"
+          />
+        ) : (
+          /* Initials fallback */
+          <div className={`w-full h-full flex items-center justify-center font-bold ${sz.text} text-white ${bgColor}`}>
+            {initials}
+          </div>
+        )}
+      </div>
+
+      {/* Status dot */}
+      {status && (
+        <span className={`absolute ${sz.dot} rounded-full border-2 border-white ${STATUS_COLOR[status]}`} />
+      )}
+
+      {/* Tooltip */}
+      {showTooltip && hovered && (
+        <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 z-[9999] pointer-events-none">
+          <div className="bg-gray-900 text-white rounded-xl px-3 py-2 shadow-2xl whitespace-nowrap">
+            <p className="text-xs font-bold leading-tight">{name}</p>
+            {role && <p className="text-[10px] text-gray-400 mt-0.5">{role}</p>}
+          </div>
+          {/* Arrow */}
+          <div className="flex justify-center">
+            <div className="w-2 h-2 bg-gray-900 rotate-45 -mt-1 rounded-sm" />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── Avatar group (stacked, with +N overflow) ─────────────────────────────────
+interface AvatarGroupProps {
+  members: { id: string; name: string; avatar: string; role?: string }[];
+  max?: number;
+  size?: "xs" | "sm" | "md";
+}
+
+export function AvatarGroup({ members, max = 3, size = "sm" }: AvatarGroupProps) {
+  const visible  = members.slice(0, max);
+  const overflow = members.length - max;
+  const sz = SIZE_MAP[size];
+
+  return (
+    <div className="flex -space-x-2 items-center">
+      {visible.map((m) => (
+        <Avatar
+          key={m.id}
+          name={m.name}
+          src={m.avatar}
+          role={m.role}
+          size={size}
+          ring
+          ringColor="ring-white"
+          showTooltip
+        />
+      ))}
+      {overflow > 0 && (
+        <div className={`
+          ${sz.outer} rounded-full bg-gray-100 border-2 border-white
+          flex items-center justify-center shadow-sm z-10
+          ring-2 ring-white
+        `}>
+          <span className={`${sz.text} font-bold text-gray-500`}>+{overflow}</span>
+        </div>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/features/Tasks/v1/components/common/CommentsSection.tsx b/src/features/Tasks/v1/components/common/CommentsSection.tsx
new file mode 100644
index 0000000..398f3f5
--- /dev/null
+++ b/src/features/Tasks/v1/components/common/CommentsSection.tsx
@@ -0,0 +1,83 @@
+import { useState } from "react";
+import { formatDistanceToNow, parseISO } from "date-fns";
+import { Loader2, MessageCircle, Send } from "lucide-react";
+import { useComments, useAddComment } from "../../hooks/useComments";
+
+interface Props { taskId: string; }
+
+export default function CommentsSection({ taskId }: Props) {
+  const { data: comments = [], isLoading } = useComments(taskId);
+  const addComment = useAddComment();
+  const [text, setText] = useState("");
+  const [error, setError] = useState("");
+
+  const handleSubmit = async () => {
+    if (!text.trim()) { setError("Comment cannot be empty."); return; }
+    setError("");
+    await addComment.mutateAsync({ taskId, text: text.trim() });
+    setText("");
+  };
+
+  return (
+    <div className="flex flex-col gap-4">
+      {/* Header */}
+      <div className="flex items-center gap-2">
+        <MessageCircle size={15} className="text-gray-400" />
+        <h3 className="text-sm font-bold text-gray-900">Comments</h3>
+        <span className="px-2 py-0.5 rounded-full text-[11px] font-bold bg-gray-100 text-gray-500">
+          {comments.length}
+        </span>
+      </div>
+
+      {/* Comment list */}
+      {isLoading ? (
+        <p className="text-xs text-gray-400">Loading comments…</p>
+      ) : comments.length === 0 ? (
+        <p className="text-xs text-gray-400 text-center py-6">No comments yet. Be the first!</p>
+      ) : (
+        <div className="flex flex-col gap-3">
+          {comments.map((c) => (
+            <div key={c.id} className="flex gap-3">
+              <img src={c.avatar} alt={c.author} className="w-8 h-8 rounded-full shrink-0 object-cover" />
+              <div className="flex-1 bg-gray-50 rounded-xl px-3 py-2.5 border border-gray-100">
+                <div className="flex items-center gap-2 mb-1">
+                  <span className="text-xs font-bold text-gray-900">{c.author}</span>
+                  <span className="text-[10px] text-gray-400">
+                    {formatDistanceToNow(parseISO(c.createdAt), { addSuffix: true })}
+                  </span>
+                </div>
+                <p className="text-xs text-gray-700 leading-relaxed">{c.text}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Add comment */}
+      <div className="flex flex-col gap-1.5">
+        <div className="flex gap-2">
+          <textarea
+            value={text}
+            onChange={(e) => { setText(e.target.value); if (error) setError(""); }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); void handleSubmit(); }
+            }}
+            rows={2}
+            placeholder="Write a comment… (Enter to send, Shift+Enter for new line)"
+            className={`flex-1 text-sm rounded-xl border px-3 py-2.5 outline-none resize-none transition-all placeholder-gray-400 text-gray-800
+              ${error ? "border-red-300 ring-2 ring-red-100" : "border-gray-200 focus:border-indigo-400 focus:ring-2 focus:ring-indigo-100"}`}
+          />
+          <button
+            onClick={() => void handleSubmit()}
+            disabled={addComment.isPending || !text.trim()}
+            className="self-end flex items-center gap-1.5 px-4 py-2.5 bg-indigo-600 hover:bg-indigo-700 disabled:opacity-40 text-white text-xs font-bold rounded-xl transition"
+          >
+            {addComment.isPending ? <Loader2 size={13} className="animate-spin" /> : <Send size={13} />}
+            Send
+          </button>
+        </div>
+        {error && <p className="text-xs text-red-500 font-medium">{error}</p>}
+      </div>
+    </div>
+  );
+}
diff --git a/src/features/Tasks/v1/components/common/ConfirmModal.tsx b/src/features/Tasks/v1/components/common/ConfirmModal.tsx
new file mode 100644
index 0000000..460e6de
--- /dev/null
+++ b/src/features/Tasks/v1/components/common/ConfirmModal.tsx
@@ -0,0 +1,112 @@
+import { useEffect, useRef } from "react";
+import { AlertTriangle, X, Loader2 } from "lucide-react";
+
+interface ConfirmModalProps {
+  isOpen: boolean;
+  title: string;
+  message: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+  isLoading?: boolean;
+  danger?: boolean;
+}
+
+export default function ConfirmModal({
+  isOpen,
+  title,
+  message,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  onConfirm,
+  onCancel,
+  isLoading = false,
+  danger = false,
+}: ConfirmModalProps) {
+  const cancelRef = useRef<HTMLButtonElement>(null);
+
+  // Focus cancel on open & close on Escape
+  useEffect(() => {
+    if (!isOpen) return;
+    cancelRef.current?.focus();
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape" && !isLoading) onCancel();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [isOpen, isLoading, onCancel]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center"
+      aria-modal="true"
+      role="dialog"
+    >
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-black/30 backdrop-blur-[2px]"
+        onClick={() => !isLoading && onCancel()}
+      />
+
+      {/* Dialog */}
+      <div className="relative z-10 w-full max-w-md mx-4 bg-white rounded-2xl shadow-2xl border border-gray-100 overflow-hidden animate-in fade-in zoom-in-95 duration-150">
+        {/* Close */}
+        <button
+          onClick={onCancel}
+          disabled={isLoading}
+          className="absolute top-4 right-4 p-1.5 rounded-lg text-gray-400 hover:bg-gray-100 hover:text-gray-600 transition disabled:opacity-40"
+          aria-label="Close"
+        >
+          <X size={16} />
+        </button>
+
+        <div className="p-6">
+          {/* Icon + Title */}
+          <div className="flex items-start gap-4">
+            <div
+              className={`shrink-0 w-10 h-10 rounded-xl flex items-center justify-center ${
+                danger ? "bg-red-50" : "bg-indigo-50"
+              }`}
+            >
+              <AlertTriangle
+                size={20}
+                className={danger ? "text-red-500" : "text-indigo-500"}
+              />
+            </div>
+            <div className="flex flex-col gap-1.5 min-w-0">
+              <h3 className="text-base font-bold text-gray-900">{title}</h3>
+              <p className="text-sm text-gray-500 leading-relaxed">{message}</p>
+            </div>
+          </div>
+
+          {/* Actions */}
+          <div className="flex items-center justify-end gap-2.5 mt-6">
+            <button
+              ref={cancelRef}
+              onClick={onCancel}
+              disabled={isLoading}
+              className="px-4 py-2.5 rounded-xl border border-gray-200 text-sm font-semibold text-gray-600 hover:bg-gray-50 transition disabled:opacity-40"
+            >
+              {cancelLabel}
+            </button>
+            <button
+              onClick={onConfirm}
+              disabled={isLoading}
+              className={`flex items-center gap-2 px-4 py-2.5 rounded-xl text-sm font-semibold text-white transition disabled:opacity-60 ${
+                danger
+                  ? "bg-red-500 hover:bg-red-600"
+                  : "bg-indigo-600 hover:bg-indigo-700"
+              }`}
+            >
+              {isLoading && <Loader2 size={14} className="animate-spin" />}
+              {confirmLabel}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/features/Tasks/v1/components/common/EmptyState.tsx b/src/features/Tasks/v1/components/common/EmptyState.tsx
new file mode 100644
index 0000000..d19ba11
--- /dev/null
+++ b/src/features/Tasks/v1/components/common/EmptyState.tsx
@@ -0,0 +1,101 @@
+import type { ReactNode } from "react";
+
+// ─── Inline SVG illustrations ─────────────────────────────────────────────────
+function NoEventIllustration() {
+  return (
+    <svg width="96" height="80" viewBox="0 0 96 80" fill="none" className="mb-1">
+      <rect x="8" y="12" width="80" height="56" rx="8" fill="#F1F5F9" stroke="#CBD5E1" strokeWidth="1.5"/>
+      <rect x="8" y="12" width="80" height="16" rx="8" fill="#E2E8F0" stroke="#CBD5E1" strokeWidth="1.5"/>
+      <rect x="20" y="8" width="8" height="12" rx="4" fill="#94A3B8"/>
+      <rect x="68" y="8" width="8" height="12" rx="4" fill="#94A3B8"/>
+      <rect x="20" y="38" width="20" height="8" rx="3" fill="#CBD5E1"/>
+      <rect x="48" y="38" width="28" height="8" rx="3" fill="#E2E8F0"/>
+      <rect x="20" y="52" width="28" height="8" rx="3" fill="#E2E8F0"/>
+      <rect x="56" y="52" width="20" height="8" rx="3" fill="#CBD5E1"/>
+      <circle cx="76" cy="60" r="14" fill="#DBEAFE" stroke="#93C5FD" strokeWidth="1.5"/>
+      <path d="M76 54v6l3 3" stroke="#3B82F6" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </svg>
+  );
+}
+
+function NoTasksIllustration() {
+  return (
+    <svg width="96" height="80" viewBox="0 0 96 80" fill="none" className="mb-1">
+      <rect x="16" y="8" width="64" height="64" rx="10" fill="#F8FAFC" stroke="#E2E8F0" strokeWidth="1.5"/>
+      <rect x="28" y="24" width="40" height="6" rx="3" fill="#E2E8F0"/>
+      <rect x="28" y="36" width="28" height="6" rx="3" fill="#EEF2FF"/>
+      <rect x="28" y="48" width="34" height="6" rx="3" fill="#E2E8F0"/>
+      <circle cx="24" cy="27" r="4" fill="#C7D2FE" stroke="#818CF8" strokeWidth="1"/>
+      <circle cx="24" cy="39" r="4" fill="#C7D2FE" stroke="#818CF8" strokeWidth="1"/>
+      <circle cx="24" cy="51" r="4" fill="#C7D2FE" stroke="#818CF8" strokeWidth="1"/>
+      <circle cx="70" cy="58" r="14" fill="#DCFCE7" stroke="#86EFAC" strokeWidth="1.5"/>
+      <path d="M65 58l3 3 6-6" stroke="#16A34A" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </svg>
+  );
+}
+
+function ErrorIllustration() {
+  return (
+    <svg width="96" height="80" viewBox="0 0 96 80" fill="none" className="mb-1">
+      <rect x="12" y="16" width="72" height="48" rx="8" fill="#FFF1F2" stroke="#FECDD3" strokeWidth="1.5"/>
+      <path d="M48 30v14" stroke="#F43F5E" strokeWidth="2.5" strokeLinecap="round"/>
+      <circle cx="48" cy="50" r="2" fill="#F43F5E"/>
+      <path d="M28 16L20 8M68 16l8-8" stroke="#FECDD3" strokeWidth="1.5" strokeLinecap="round"/>
+    </svg>
+  );
+}
+
+function NoResultsIllustration() {
+  return (
+    <svg width="96" height="80" viewBox="0 0 96 80" fill="none" className="mb-1">
+      <circle cx="44" cy="36" r="24" fill="#F8FAFC" stroke="#E2E8F0" strokeWidth="1.5"/>
+      <circle cx="44" cy="36" r="14" fill="#EFF6FF" stroke="#BFDBFE" strokeWidth="1"/>
+      <path d="M36 36h16M44 28v16" stroke="#93C5FD" strokeWidth="1.5" strokeLinecap="round"/>
+      <path d="M62 54l12 12" stroke="#CBD5E1" strokeWidth="3" strokeLinecap="round"/>
+      <rect x="28" y="28" width="32" height="3" rx="1.5" fill="#BFDBFE" transform="rotate(45 28 28)"/>
+    </svg>
+  );
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+interface EmptyStateProps {
+  variant?: "no-event" | "no-tasks" | "no-results" | "error";
+  icon?: ReactNode;
+  title: string;
+  description?: string;
+  action?: ReactNode;
+}
+
+const illustrations: Record<string, () => JSX.Element> = {
+  "no-event":   NoEventIllustration,
+  "no-tasks":   NoTasksIllustration,
+  "no-results": NoResultsIllustration,
+  "error":      ErrorIllustration,
+};
+
+export default function EmptyState({
+  variant = "no-tasks",
+  icon,
+  title,
+  description,
+  action,
+}: EmptyStateProps) {
+  const Illustration = illustrations[variant];
+
+  return (
+    <div className="flex flex-col items-center justify-center text-center px-6 py-12 max-w-sm mx-auto">
+      {icon ? (
+        <div className="w-14 h-14 rounded-2xl bg-gray-100 flex items-center justify-center text-gray-400 mb-4">
+          {icon}
+        </div>
+      ) : (
+        <Illustration />
+      )}
+      <p className="text-sm font-semibold text-gray-800 mt-3">{title}</p>
+      {description && (
+        <p className="text-xs text-gray-400 mt-1.5 leading-relaxed">{description}</p>
+      )}
+      {action && <div className="mt-5">{action}</div>}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/features/Tasks/v1/components/common/PriorityBadge.tsx b/src/features/Tasks/v1/components/common/PriorityBadge.tsx
new file mode 100644
index 0000000..8e92fe2
--- /dev/null
+++ b/src/features/Tasks/v1/components/common/PriorityBadge.tsx
@@ -0,0 +1,22 @@
+import { PRIORITY_CONFIG } from "../../constants/task.constants";
+import type { TaskPriority } from "../../Task.types";
+
+interface Props {
+  priority: TaskPriority;
+  size?: "sm" | "md";
+}
+
+export default function PriorityBadge({ priority, size = "md" }: Props) {
+  const cfg = PRIORITY_CONFIG[priority];
+  const cls = size === "sm"
+    ? "px-2 py-0.5 text-[10px] gap-1"
+    : "px-2.5 py-1 text-xs gap-1.5";
+  return (
+    <span
+      className={`inline-flex items-center font-semibold rounded-full ${cls} ${cfg.badgeBg} ${cfg.badgeText}`}
+    >
+      <span className={`w-1.5 h-1.5 rounded-full shrink-0 ${cfg.dot}`} />
+      {cfg.label}
+    </span>
+  );
+}
\ No newline at end of file
diff --git a/src/features/Tasks/v1/components/common/SkeletonLoader.tsx b/src/features/Tasks/v1/components/common/SkeletonLoader.tsx
new file mode 100644
index 0000000..764d73c
--- /dev/null
+++ b/src/features/Tasks/v1/components/common/SkeletonLoader.tsx
@@ -0,0 +1,136 @@
+// ─── Shimmer base ─────────────────────────────────────────────────────────────
+function Shimmer({ className }: { className: string }) {
+  return (
+    <div
+      className={`relative overflow-hidden bg-gray-100 rounded ${className}`}
+    >
+      <div className="absolute inset-0 -translate-x-full animate-[shimmer_1.4s_infinite] bg-gradient-to-r from-transparent via-white/60 to-transparent" />
+    </div>
+  );
+}
+
+// ─── Table skeleton ───────────────────────────────────────────────────────────
+function TableSkeleton() {
+  return (
+    <div className="w-full">
+      {/* Header */}
+      <div className="flex items-center gap-4 px-4 py-3 border-b bg-gray-50">
+        <Shimmer className="h-3 w-40" />
+        <Shimmer className="h-3 w-24 ml-auto" />
+        <Shimmer className="h-3 w-20" />
+        <Shimmer className="h-3 w-16" />
+        <Shimmer className="h-3 w-20" />
+        <Shimmer className="h-3 w-16" />
+      </div>
+      {/* Rows */}
+      {Array.from({ length: 5 }).map((_, i) => (
+        <div
+          key={i}
+          className="flex items-center gap-4 px-4 py-4 border-b border-gray-50 border-l-4 border-l-gray-100"
+        >
+          {/* Title */}
+          <div className="flex-1 flex flex-col gap-1.5">
+            <Shimmer className="h-3.5 w-[60%]" />
+            <Shimmer className="h-2.5 w-[40%]" />
+          </div>
+          {/* Avatars */}
+          <div className="flex -space-x-1.5">
+            <Shimmer className="w-7 h-7 rounded-full" />
+            <Shimmer className="w-7 h-7 rounded-full" />
+          </div>
+          {/* Status badge */}
+          <Shimmer className="h-5 w-20 rounded-full" />
+          {/* Priority */}
+          <Shimmer className="h-5 w-14 rounded-full" />
+          {/* Deadline */}
+          <div className="flex flex-col gap-1">
+            <Shimmer className="h-3 w-20" />
+            <Shimmer className="h-2.5 w-14" />
+          </div>
+          {/* Submission */}
+          <Shimmer className="h-5 w-20 rounded-full" />
+          {/* Actions */}
+          <div className="flex gap-1">
+            <Shimmer className="w-7 h-7 rounded-lg" />
+            <Shimmer className="w-7 h-7 rounded-lg" />
+            <Shimmer className="w-7 h-7 rounded-lg" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ─── Detail skeleton ──────────────────────────────────────────────────────────
+function DetailSkeleton() {
+  return (
+    <div className="flex flex-1 overflow-hidden">
+      {/* Left panel */}
+      <div className="w-[420px] shrink-0 border-r bg-white p-6 flex flex-col gap-5">
+        <Shimmer className="h-3 w-28" />
+        <Shimmer className="h-6 w-4/5" />
+        <Shimmer className="h-3 w-full" />
+        <Shimmer className="h-3 w-3/4" />
+        <div className="flex gap-2">
+          <Shimmer className="h-6 w-20 rounded-full" />
+          <Shimmer className="h-6 w-14 rounded-full" />
+          <Shimmer className="h-6 w-20 rounded-full" />
+        </div>
+        <div className="grid grid-cols-2 gap-3">
+          {Array.from({ length: 4 }).map((_, i) => (
+            <Shimmer key={i} className="h-20 w-full rounded-xl" />
+          ))}
+        </div>
+        <div className="flex flex-col gap-2">
+          <Shimmer className="h-3 w-24" />
+          {Array.from({ length: 2 }).map((_, i) => (
+            <Shimmer key={i} className="h-14 w-full rounded-xl" />
+          ))}
+        </div>
+      </div>
+      {/* Right panel */}
+      <div className="flex-1 p-6 flex flex-col gap-4">
+        <div className="flex gap-4 border-b pb-4">
+          <Shimmer className="h-4 w-24" />
+          <Shimmer className="h-4 w-20" />
+        </div>
+        {Array.from({ length: 3 }).map((_, i) => (
+          <div key={i} className="border rounded-xl p-4 flex flex-col gap-2">
+            <div className="flex items-center gap-3">
+              <Shimmer className="w-8 h-8 rounded-full" />
+              <div className="flex flex-col gap-1">
+                <Shimmer className="h-3 w-28" />
+                <Shimmer className="h-2.5 w-16" />
+              </div>
+            </div>
+            <Shimmer className="h-3 w-full" />
+            <Shimmer className="h-3 w-3/4" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// ─── Form skeleton ────────────────────────────────────────────────────────────
+function FormSkeleton() {
+  return (
+    <div className="flex flex-col gap-5 p-6 max-w-2xl">
+      {Array.from({ length: 6 }).map((_, i) => (
+        <div key={i} className="flex flex-col gap-2">
+          <Shimmer className="h-3 w-24" />
+          <Shimmer className="h-10 w-full rounded-xl" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ─── Export ───────────────────────────────────────────────────────────────────
+type SkeletonType = "table" | "detail" | "form";
+
+export default function SkeletonLoader({ type = "table" }: { type?: SkeletonType }) {
+  if (type === "detail") return <DetailSkeleton />;
+  if (type === "form")   return <FormSkeleton />;
+  return <TableSkeleton />;
+}
\ No newline at end of file
diff --git a/src/features/Tasks/v1/components/common/StatusBadge.tsx b/src/features/Tasks/v1/components/common/StatusBadge.tsx
new file mode 100644
index 0000000..cab36f1
--- /dev/null
+++ b/src/features/Tasks/v1/components/common/StatusBadge.tsx
@@ -0,0 +1,22 @@
+import { STATUS_CONFIG } from "../../constants/task.constants";
+import type { TaskStatus } from "../../Task.types";
+
+interface Props {
+  status: TaskStatus;
+  size?: "sm" | "md";
+}
+
+export default function StatusBadge({ status, size = "md" }: Props) {
+  const cfg = STATUS_CONFIG[status];
+  const cls = size === "sm"
+    ? "px-2 py-0.5 text-[10px] gap-1"
+    : "px-2.5 py-1 text-xs gap-1.5";
+  return (
+    <span
+      className={`inline-flex items-center font-semibold rounded-full ${cls} ${cfg.bg} ${cfg.text}`}
+    >
+      <span className={`w-1.5 h-1.5 rounded-full shrink-0 ${cfg.dot}`} />
+      {cfg.label}
+    </span>
+  );
+}
\ No newline at end of file
diff --git a/src/features/Tasks/v1/components/common/ToastNotification.tsx b/src/features/Tasks/v1/components/common/ToastNotification.tsx
new file mode 100644
index 0000000..5f4bfab
--- /dev/null
+++ b/src/features/Tasks/v1/components/common/ToastNotification.tsx
@@ -0,0 +1,144 @@
+import { useState, useCallback, useEffect, useRef } from "react";
+import { CheckCircle2, XCircle, AlertTriangle, Info, X } from "lucide-react";
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+export type ToastVariant = "success" | "error" | "warning" | "info";
+
+export interface Toast {
+  id: string;
+  variant: ToastVariant;
+  title: string;
+  message?: string;
+}
+
+// ─── Config ───────────────────────────────────────────────────────────────────
+const TOAST_CONFIG: Record<
+  ToastVariant,
+  { icon: typeof CheckCircle2; bg: string; border: string; iconClass: string; bar: string }
+> = {
+  success: {
+    icon: CheckCircle2,
+    bg: "bg-white",
+    border: "border-emerald-200",
+    iconClass: "text-emerald-500",
+    bar: "bg-emerald-400",
+  },
+  error: {
+    icon: XCircle,
+    bg: "bg-white",
+    border: "border-red-200",
+    iconClass: "text-red-500",
+    bar: "bg-red-400",
+  },
+  warning: {
+    icon: AlertTriangle,
+    bg: "bg-white",
+    border: "border-amber-200",
+    iconClass: "text-amber-500",
+    bar: "bg-amber-400",
+  },
+  info: {
+    icon: Info,
+    bg: "bg-white",
+    border: "border-indigo-200",
+    iconClass: "text-indigo-500",
+    bar: "bg-indigo-400",
+  },
+};
+
+const AUTO_DISMISS_MS = 4500;
+
+// ─── Single toast ─────────────────────────────────────────────────────────────
+function ToastItem({ toast, onDismiss }: { toast: Toast; onDismiss: (id: string) => void }) {
+  const cfg = TOAST_CONFIG[toast.variant];
+  const Icon = cfg.icon;
+  const barRef = useRef<HTMLDivElement>(null);
+
+  // Animate progress bar shrink
+  useEffect(() => {
+    const el = barRef.current;
+    if (!el) return;
+    el.style.transition = "none";
+    el.style.width = "100%";
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        el.style.transition = `width ${AUTO_DISMISS_MS}ms linear`;
+        el.style.width = "0%";
+      });
+    });
+
+    const timer = setTimeout(() => onDismiss(toast.id), AUTO_DISMISS_MS);
+    return () => clearTimeout(timer);
+  }, [toast.id, onDismiss]);
+
+  return (
+    <div
+      className={`
+        relative flex items-start gap-3 w-80 rounded-xl border shadow-lg overflow-hidden
+        ${cfg.bg} ${cfg.border}
+        animate-in slide-in-from-right-4 fade-in duration-300
+      `}
+    >
+      {/* Progress bar */}
+      <div
+        ref={barRef}
+        className={`absolute bottom-0 left-0 h-[3px] ${cfg.bar}`}
+        style={{ width: "100%" }}
+      />
+
+      <div className="flex items-start gap-3 p-4 w-full">
+        <Icon size={18} className={`shrink-0 mt-0.5 ${cfg.iconClass}`} />
+        <div className="flex-1 min-w-0">
+          <p className="text-sm font-semibold text-gray-900">{toast.title}</p>
+          {toast.message && (
+            <p className="text-xs text-gray-500 mt-0.5 leading-relaxed">{toast.message}</p>
+          )}
+        </div>
+        <button
+          onClick={() => onDismiss(toast.id)}
+          className="shrink-0 p-0.5 text-gray-400 hover:text-gray-600 rounded transition"
+          aria-label="Dismiss"
+        >
+          <X size={14} />
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// ─── Container ────────────────────────────────────────────────────────────────
+export function ToastContainer({
+  toasts,
+  onDismiss,
+}: {
+  toasts: Toast[];
+  onDismiss: (id: string) => void;
+}) {
+  if (!toasts.length) return null;
+  return (
+    <div className="fixed bottom-5 right-5 z-50 flex flex-col gap-2.5">
+      {toasts.map((t) => (
+        <ToastItem key={t.id} toast={t} onDismiss={onDismiss} />
+      ))}
+    </div>
+  );
+}
+
+// ─── Hook ─────────────────────────────────────────────────────────────────────
+export function useToast() {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  const addToast = useCallback(
+    (variant: ToastVariant, title: string, message?: string) => {
+      const id = `toast-${Date.now()}-${Math.random()}`;
+      setToasts((prev) => [...prev, { id, variant, title, message }]);
+    },
+    []
+  );
+
+  const dismiss = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+
+  return { toasts, addToast, dismiss };
+}
\ No newline at end of file
diff --git a/src/features/Tasks/v1/components/event/EventDropdown.tsx b/src/features/Tasks/v1/components/event/EventDropdown.tsx
new file mode 100644
index 0000000..7bb2e1e
--- /dev/null
+++ b/src/features/Tasks/v1/components/event/EventDropdown.tsx
@@ -0,0 +1,253 @@
+import { useState, useRef, useEffect, useCallback } from "react";
+import { ChevronDown, Search, CalendarDays, Loader2, X } from "lucide-react";
+import { format, parseISO } from "date-fns";
+import { useEvents } from "../../hooks/useEvents";
+import { EVENT_TYPE_CONFIG, EVENT_STATUS_CONFIG, SELECTED_EVENT_KEY } from "../../constants/task.constants";
+import type { EventOption } from "../../Task.types";
+
+interface Props {
+  selectedEventId: string | null;
+  onSelect: (id: string | null) => void;
+}
+
+export default function EventDropdown({ selectedEventId, onSelect }: Props) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [highlighted, setHighlighted] = useState(0);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const searchRef = useRef<HTMLInputElement>(null);
+  const listRef = useRef<HTMLUListElement>(null);
+
+  const { data: events = [], isLoading } = useEvents();
+
+  const selectedEvent = events.find((e) => e.id === selectedEventId) ?? null;
+
+  // Filter events by query
+  const filtered = events.filter((e) =>
+    query.trim() === "" ||
+    e.name.toLowerCase().includes(query.toLowerCase()) ||
+    e.subtitle.toLowerCase().includes(query.toLowerCase())
+  );
+
+  // Persist selection
+  const handleSelect = useCallback(
+    (evt: EventOption) => {
+      localStorage.setItem(SELECTED_EVENT_KEY, evt.id);
+      onSelect(evt.id);
+      setOpen(false);
+      setQuery("");
+      setHighlighted(0);
+    },
+    [onSelect]
+  );
+
+  const handleClear = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    localStorage.removeItem(SELECTED_EVENT_KEY);
+    onSelect(null);
+  };
+
+  // Close on outside click
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (!containerRef.current?.contains(e.target as Node)) {
+        setOpen(false);
+        setQuery("");
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, []);
+
+  // Focus search on open
+  useEffect(() => {
+    if (open) {
+      setTimeout(() => searchRef.current?.focus(), 80);
+      setHighlighted(0);
+    }
+  }, [open]);
+
+  // Keyboard navigation
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (!open) {
+      if (e.key === "Enter" || e.key === " ") setOpen(true);
+      return;
+    }
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setHighlighted((h) => Math.min(h + 1, filtered.length - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setHighlighted((h) => Math.max(h - 1, 0));
+    } else if (e.key === "Enter") {
+      if (filtered[highlighted]) handleSelect(filtered[highlighted]);
+    } else if (e.key === "Escape") {
+      setOpen(false);
+      setQuery("");
+    }
+  };
+
+  // Scroll highlighted item into view
+  useEffect(() => {
+    const el = listRef.current?.children[highlighted] as HTMLElement | undefined;
+    el?.scrollIntoView({ block: "nearest" });
+  }, [highlighted]);
+
+  return (
+    <div ref={containerRef} className="relative w-72 shrink-0" onKeyDown={handleKeyDown}>
+      {/* Trigger button */}
+      <button
+        onClick={() => setOpen((o) => !o)}
+        className={`
+          w-full flex items-center gap-2.5 px-3.5 py-2.5 rounded-xl border text-sm font-medium transition-all
+          ${open
+            ? "border-indigo-400 ring-2 ring-indigo-100 bg-white"
+            : "border-gray-200 bg-white hover:border-gray-300"}
+        `}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+      >
+        {isLoading ? (
+          <Loader2 size={15} className="text-gray-400 animate-spin shrink-0" />
+        ) : (
+          <CalendarDays size={15} className="text-indigo-500 shrink-0" />
+        )}
+
+        <span className="flex-1 text-left truncate">
+          {isLoading ? (
+            <span className="text-gray-400">Loading events…</span>
+          ) : selectedEvent ? (
+            <span className="flex items-center gap-2">
+              <span className="text-gray-900 font-semibold truncate">{selectedEvent.name}</span>
+              {(() => {
+                const cfg = EVENT_TYPE_CONFIG[selectedEvent.type];
+                return (
+                  <span className={`shrink-0 text-[10px] font-bold px-1.5 py-0.5 rounded-md ${cfg.bg} ${cfg.text}`}>
+                    {cfg.label}
+                  </span>
+                );
+              })()}
+            </span>
+          ) : (
+            <span className="text-gray-400">Select an event…</span>
+          )}
+        </span>
+
+        <div className="flex items-center gap-1 shrink-0">
+          {selectedEvent && !isLoading && (
+            <span
+              role="button"
+              tabIndex={0}
+              onClick={handleClear}
+              onKeyDown={(e) => e.key === "Enter" && handleClear(e as unknown as React.MouseEvent)}
+              className="p-0.5 rounded text-gray-300 hover:text-gray-500 transition"
+              aria-label="Clear selection"
+            >
+              <X size={13} />
+            </span>
+          )}
+          <ChevronDown
+            size={15}
+            className={`text-gray-400 transition-transform duration-200 ${open ? "rotate-180" : ""}`}
+          />
+        </div>
+      </button>
+
+      {/* Dropdown panel */}
+      {open && (
+        <div className="absolute top-full left-0 mt-1.5 w-[340px] bg-white rounded-2xl border border-gray-200 shadow-xl shadow-gray-100/80 z-50 overflow-hidden">
+          {/* Search */}
+          <div className="flex items-center gap-2 px-3 py-2.5 border-b">
+            <Search size={14} className="text-gray-400 shrink-0" />
+            <input
+              ref={searchRef}
+              value={query}
+              onChange={(e) => { setQuery(e.target.value); setHighlighted(0); }}
+              placeholder="Search events…"
+              className="flex-1 text-sm outline-none placeholder-gray-400 text-gray-900 bg-transparent"
+            />
+            {query && (
+              <button onClick={() => setQuery("")} className="text-gray-400 hover:text-gray-600">
+                <X size={13} />
+              </button>
+            )}
+          </div>
+
+          {/* List */}
+          {filtered.length === 0 ? (
+            <div className="py-8 text-center">
+              <p className="text-sm text-gray-400">No events match "{query}"</p>
+            </div>
+          ) : (
+            <ul ref={listRef} role="listbox" className="max-h-64 overflow-y-auto py-1.5">
+              {filtered.map((evt, i) => {
+                const typeCfg   = EVENT_TYPE_CONFIG[evt.type];
+                const statusCfg = EVENT_STATUS_CONFIG[evt.status];
+                const isActive  = evt.id === selectedEventId;
+                const isHl      = i === highlighted;
+
+                return (
+                  <li
+                    key={evt.id}
+                    role="option"
+                    aria-selected={isActive}
+                    onClick={() => handleSelect(evt)}
+                    onMouseEnter={() => setHighlighted(i)}
+                    className={`
+                      flex items-start gap-3 px-3 py-3 cursor-pointer transition-colors
+                      ${isHl ? "bg-indigo-50" : "hover:bg-gray-50"}
+                      ${isActive ? "bg-indigo-50/70" : ""}
+                    `}
+                  >
+                    {/* Type color bar */}
+                    <div className={`w-1 self-stretch rounded-full mt-0.5 ${typeCfg.dot}`} />
+
+                    <div className="flex-1 min-w-0">
+                      {/* Event name + type badge */}
+                      <div className="flex items-center gap-2 flex-wrap">
+                        <span className={`text-sm font-semibold truncate ${isActive ? "text-indigo-700" : "text-gray-900"}`}>
+                          {evt.name}
+                        </span>
+                        <span className={`text-[10px] font-bold px-1.5 py-0.5 rounded-md ${typeCfg.bg} ${typeCfg.text}`}>
+                          {typeCfg.label}
+                        </span>
+                      </div>
+
+                      {/* Subtitle + dates */}
+                      <div className="flex items-center gap-2 mt-0.5 flex-wrap">
+                        <span className="text-xs text-gray-400 truncate">{evt.subtitle}</span>
+                        <span className="text-gray-200">·</span>
+                        <span className="text-[10px] text-gray-400 shrink-0">
+                          {format(parseISO(evt.startDate), "MMM d")} – {format(parseISO(evt.endDate), "MMM d, yyyy")}
+                        </span>
+                      </div>
+                    </div>
+
+                    {/* Status chip */}
+                    <span className={`shrink-0 flex items-center gap-1 text-[10px] font-semibold px-2 py-1 rounded-full ${statusCfg.bg} ${statusCfg.text}`}>
+                      {statusCfg.pulse ? (
+                        <span className="relative flex h-1.5 w-1.5">
+                          <span className={`animate-ping absolute inline-flex h-full w-full rounded-full opacity-75 ${statusCfg.dot}`} />
+                          <span className={`relative inline-flex rounded-full h-1.5 w-1.5 ${statusCfg.dot}`} />
+                        </span>
+                      ) : (
+                        <span className={`w-1.5 h-1.5 rounded-full ${statusCfg.dot}`} />
+                      )}
+                      {evt.status}
+                    </span>
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+
+          {/* Footer */}
+          <div className="border-t px-3 py-2 flex items-center justify-between">
+            <span className="text-[10px] text-gray-400">{filtered.length} event{filtered.length !== 1 ? "s" : ""}</span>
+            <span className="text-[10px] text-gray-400">↑↓ navigate · Enter select · Esc close</span>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/features/Tasks/v1/components/submission/ReviewPanel.tsx b/src/features/Tasks/v1/components/submission/ReviewPanel.tsx
new file mode 100644
index 0000000..69b51cb
--- /dev/null
+++ b/src/features/Tasks/v1/components/submission/ReviewPanel.tsx
@@ -0,0 +1,188 @@
+import { useState, useCallback } from "react";
+import { CheckCircle2, XCircle, Star, X, Loader2, MessageSquare } from "lucide-react";
+import { useReviewSubmission } from "../../hooks/useSubmissions";
+import type { ReviewDecision } from "../../Task.types";
+
+interface Props {
+  submissionId: string;
+  taskId: string;
+  currentTaskStatus: string;
+  onSuccess: () => void;
+  onCancel: () => void;
+}
+
+function getScoreInfo(score: number) {
+  if (score >= 90) return { text: "Excellent",  color: "text-emerald-600", bar: "bg-emerald-500" };
+  if (score >= 75) return { text: "Good",        color: "text-sky-600",     bar: "bg-sky-500"     };
+  if (score >= 50) return { text: "Average",     color: "text-amber-600",   bar: "bg-amber-400"   };
+  return               { text: "Needs Work",  color: "text-red-500",     bar: "bg-red-400"     };
+}
+
+export default function ReviewPanel({ submissionId, onSuccess, onCancel }: Props) {
+  const [decision, setDecision] = useState<ReviewDecision>("approved");
+  const [score,    setScore]    = useState<number>(80);
+  const [scoreInput, setScoreInput] = useState<string>("80"); // separate string for manual input
+  const [useScore, setUseScore] = useState(true);
+  const [feedback, setFeedback] = useState("");
+  const [error,    setError]    = useState("");
+
+  const { mutateAsync, isPending } = useReviewSubmission();
+  const info = getScoreInfo(score);
+
+  // ── Slider moves → update both number and string ──────────────────────────
+  const handleSlider = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const v = Number(e.target.value);
+    setScore(v);
+    setScoreInput(String(v));
+  };
+
+  // ── Manual typing → clamp to 0–100, update slider ────────────────────────
+  const handleManualInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const raw = e.target.value;
+    setScoreInput(raw); // allow typing freely
+    const parsed = parseInt(raw, 10);
+    if (!isNaN(parsed)) {
+      const clamped = Math.min(100, Math.max(0, parsed));
+      setScore(clamped);
+    }
+  };
+
+  // Sync input box when blurred (clamp display)
+  const handleManualBlur = () => {
+    setScoreInput(String(score));
+  };
+
+  const handleSubmit = async () => {
+    if (!feedback.trim()) { setError("Please add feedback for the submitter."); return; }
+    setError("");
+    try {
+      await mutateAsync({
+        submissionId,
+        payload: { decision, score: useScore ? score : undefined, feedback: feedback.trim() },
+      });
+      onSuccess();
+    } catch {
+      setError("Review failed. Please try again.");
+    }
+  };
+
+  return (
+    <div className="rounded-2xl border-2 border-indigo-200 bg-white shadow-lg shadow-indigo-100/40 overflow-hidden">
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-3 bg-indigo-50 border-b border-indigo-100">
+        <div className="flex items-center gap-2">
+          <MessageSquare size={15} className="text-indigo-600" />
+          <span className="text-sm font-bold text-indigo-900">Submit Review</span>
+        </div>
+        <button onClick={onCancel} className="p-1 rounded-lg text-indigo-400 hover:text-indigo-700 hover:bg-indigo-100 transition">
+          <X size={15} />
+        </button>
+      </div>
+
+      <div className="p-4 flex flex-col gap-4">
+        {/* Decision */}
+        <div className="flex flex-col gap-1.5">
+          <label className="text-xs font-bold text-gray-700 uppercase tracking-wide">Decision</label>
+          <div className="flex rounded-xl overflow-hidden border border-gray-200 p-1 gap-1 bg-gray-50">
+            <button onClick={() => setDecision("approved")}
+              className={`flex-1 flex items-center justify-center gap-2 py-2.5 rounded-lg text-sm font-bold transition-all
+                ${decision === "approved" ? "bg-emerald-500 text-white shadow-sm" : "text-gray-500 hover:bg-gray-100"}`}>
+              <CheckCircle2 size={14} /> Approve
+            </button>
+            <button onClick={() => setDecision("rejected")}
+              className={`flex-1 flex items-center justify-center gap-2 py-2.5 rounded-lg text-sm font-bold transition-all
+                ${decision === "rejected" ? "bg-red-500 text-white shadow-sm" : "text-gray-500 hover:bg-gray-100"}`}>
+              <XCircle size={14} /> Reject
+            </button>
+          </div>
+        </div>
+
+        {/* Score */}
+        <div className="flex flex-col gap-2">
+          <div className="flex items-center justify-between">
+            <label className="text-xs font-bold text-gray-700 uppercase tracking-wide flex items-center gap-1.5">
+              <Star size={11} className="text-amber-500" /> Score (optional)
+            </label>
+            <label className="flex items-center gap-1.5 text-xs text-gray-500 cursor-pointer select-none">
+              <div onClick={() => setUseScore((v) => !v)}
+                className={`relative w-8 h-4 rounded-full cursor-pointer transition-colors ${useScore ? "bg-indigo-500" : "bg-gray-200"}`}>
+                <span className={`absolute top-0.5 w-3 h-3 bg-white rounded-full shadow transition-transform ${useScore ? "translate-x-4" : "translate-x-0.5"}`} />
+              </div>
+              Enable
+            </label>
+          </div>
+
+          {useScore && (
+            <div className="flex flex-col gap-3">
+              {/* Slider + manual input + badge row */}
+              <div className="flex items-center gap-3">
+                {/* Slider */}
+                <div className="flex-1 flex flex-col gap-1">
+                  <input
+                    type="range" min={0} max={100} step={1} value={score}
+                    onChange={handleSlider}
+                    className="w-full h-3 rounded-full cursor-pointer accent-indigo-600"
+                  />
+                  <div className="flex justify-between text-[9px] text-gray-400 px-0.5">
+                    <span>0</span><span>25</span><span>50</span><span>75</span><span>100</span>
+                  </div>
+                </div>
+
+                {/* Manual type input */}
+                <div className="flex flex-col items-center gap-0.5 shrink-0">
+                  <div className="flex items-center gap-1">
+                    <input
+                      type="number" min={0} max={100}
+                      value={scoreInput}
+                      onChange={handleManualInput}
+                      onBlur={handleManualBlur}
+                      className="w-14 h-10 text-center text-xl font-extrabold text-amber-600 rounded-xl bg-amber-50 border-2 border-amber-200 outline-none focus:border-amber-400 focus:ring-2 focus:ring-amber-100 transition [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+                    />
+                    <span className="text-xs text-gray-400 font-semibold">/100</span>
+                  </div>
+                  <span className={`text-[10px] font-bold ${info.color}`}>{info.text}</span>
+                </div>
+              </div>
+
+              {/* Color progress bar */}
+              <div className="w-full h-2 rounded-full bg-gray-100 overflow-hidden">
+                <div className={`h-full rounded-full transition-all duration-200 ${info.bar}`}
+                  style={{ width: `${score}%` }} />
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Feedback */}
+        <div className="flex flex-col gap-1.5">
+          <label className="text-xs font-bold text-gray-700 uppercase tracking-wide">
+            Feedback <span className="text-red-400">*</span>
+          </label>
+          <textarea
+            value={feedback}
+            onChange={(e) => { setFeedback(e.target.value); if (error) setError(""); }}
+            rows={4} placeholder={decision === "approved" ? "Great work! Explain what they did well…" : "Explain what needs to be improved…"}
+            className={`w-full text-sm rounded-xl border px-3 py-2.5 outline-none resize-none transition-all placeholder-gray-400 text-gray-800
+              ${error ? "border-red-300 ring-2 ring-red-100 bg-red-50" : "border-gray-200 focus:border-indigo-400 focus:ring-2 focus:ring-indigo-100 bg-white"}`}
+          />
+          {error && <p className="text-xs text-red-500 font-medium">⚠ {error}</p>}
+          <p className="text-[10px] text-gray-400 text-right">{feedback.length}/500</p>
+        </div>
+
+        {/* Actions */}
+        <div className="flex items-center justify-end gap-2.5 pt-1 border-t">
+          <button onClick={onCancel} disabled={isPending}
+            className="px-4 py-2 rounded-xl border border-gray-200 text-sm font-semibold text-gray-600 hover:bg-gray-50 transition disabled:opacity-40">
+            Cancel
+          </button>
+          <button onClick={handleSubmit} disabled={isPending}
+            className={`flex items-center gap-2 px-5 py-2 rounded-xl text-sm font-bold text-white transition-all disabled:opacity-60 active:scale-95
+              ${decision === "approved" ? "bg-emerald-500 hover:bg-emerald-600 shadow-sm shadow-emerald-200" : "bg-red-500 hover:bg-red-600 shadow-sm shadow-red-200"}`}>
+            {isPending && <Loader2 size={13} className="animate-spin" />}
+            {decision === "approved" ? "Approve" : "Reject"} Submission
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/features/Tasks/v1/components/submission/SubmissionCard.tsx b/src/features/Tasks/v1/components/submission/SubmissionCard.tsx
new file mode 100644
index 0000000..c066c5a
--- /dev/null
+++ b/src/features/Tasks/v1/components/submission/SubmissionCard.tsx
@@ -0,0 +1,126 @@
+import Avatar from "../common/Avatar";
+import { ExternalLink, Github, FileUp, Clock, CheckCircle2, XCircle, Star } from "lucide-react";
+import { formatDistanceToNow, parseISO } from "date-fns";
+import { REVIEW_DECISION_CONFIG } from "../../constants/task.constants";
+import type { Submission } from "../../Task.types";
+
+interface Props {
+  submission: Submission;
+  onReview: (id: string) => void;
+}
+
+export default function SubmissionCard({ submission, onReview }: Props) {
+  const { submittedBy: member, review } = submission;
+  const reviewCfg = review ? REVIEW_DECISION_CONFIG[review.decision] : null;
+
+  return (
+    <div
+      className={`
+        flex flex-col gap-3 p-4 rounded-xl border transition-all duration-200
+        ${review?.decision === "approved"
+          ? "border-emerald-200 bg-emerald-50/40"
+          : review?.decision === "rejected"
+          ? "border-red-200 bg-red-50/40"
+          : "border-gray-200 bg-white hover:border-indigo-200 hover:shadow-sm"}
+      `}
+    >
+      {/* ── Member row ───────────────────────────────────────────────────────── */}
+      <div className="flex items-center justify-between gap-3">
+        <div className="flex items-center gap-2.5 min-w-0">
+          <Avatar name={member.name} src={member.avatar} role={member.role} size="md" showTooltip ring ringColor="ring-white" />
+          <div className="min-w-0">
+            <p className="text-sm font-semibold text-gray-900 truncate">{member.name}</p>
+            <p className="text-xs text-gray-400 truncate">{member.role}</p>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2 shrink-0">
+          {/* Timestamp */}
+          <span className="flex items-center gap-1 text-[10px] text-gray-400">
+            <Clock size={10} />
+            {formatDistanceToNow(parseISO(submission.submittedAt), { addSuffix: true })}
+          </span>
+
+          {/* Review status chip */}
+          {reviewCfg ? (
+            <span className={`flex items-center gap-1 text-[10px] font-bold px-2 py-0.5 rounded-full border ${reviewCfg.bg} ${reviewCfg.text} ${reviewCfg.border}`}>
+              {review!.decision === "approved" ? <CheckCircle2 size={10} /> : <XCircle size={10} />}
+              {reviewCfg.label}
+            </span>
+          ) : (
+            <span className="text-[10px] font-bold px-2 py-0.5 rounded-full border bg-amber-50 text-amber-700 border-amber-200">
+              Pending Review
+            </span>
+          )}
+        </div>
+      </div>
+
+      {/* ── Links ────────────────────────────────────────────────────────────── */}
+      <div className="flex flex-col gap-1.5">
+        {submission.githubUrl && (
+          <a
+            href={submission.githubUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            onClick={(e) => e.stopPropagation()}
+            className="flex items-center gap-2 px-3 py-2 rounded-lg bg-gray-900 hover:bg-gray-800 text-white text-xs font-semibold transition-colors group/link"
+          >
+            <Github size={13} />
+            <span className="flex-1 truncate">{submission.githubUrl.replace("https://", "")}</span>
+            <ExternalLink size={11} className="opacity-50 group-hover/link:opacity-100 transition" />
+          </a>
+        )}
+        {submission.fileUrl && (
+          <a
+            href={submission.fileUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            onClick={(e) => e.stopPropagation()}
+            className="flex items-center gap-2 px-3 py-2 rounded-lg bg-indigo-50 hover:bg-indigo-100 text-indigo-700 text-xs font-semibold transition-colors group/link"
+          >
+            <FileUp size={13} />
+            <span className="flex-1 truncate">{submission.fileUrl}</span>
+            <ExternalLink size={11} className="opacity-50 group-hover/link:opacity-100 transition" />
+          </a>
+        )}
+      </div>
+
+      {/* ── Notes ────────────────────────────────────────────────────────────── */}
+      {submission.notes && (
+        <p className="text-xs text-gray-500 leading-relaxed bg-gray-50 rounded-lg px-3 py-2 border border-gray-100">
+          {submission.notes}
+        </p>
+      )}
+
+      {/* ── Review details ───────────────────────────────────────────────────── */}
+      {review && (
+        <div className={`rounded-xl p-3 border flex flex-col gap-2 ${reviewCfg!.bg} ${reviewCfg!.border}`}>
+          <div className="flex items-center justify-between">
+            <span className={`text-xs font-bold ${reviewCfg!.text}`}>
+              {review.decision === "approved" ? "✓ Approved" : "✗ Rejected"} by {review.reviewedBy}
+            </span>
+            {review.score !== undefined && (
+              <span className="flex items-center gap-1 text-xs font-bold text-amber-600 bg-amber-50 px-2 py-0.5 rounded-full border border-amber-200">
+                <Star size={10} fill="currentColor" />
+                {review.score}/100
+              </span>
+            )}
+          </div>
+          {review.feedback && (
+            <p className="text-xs text-gray-600 leading-relaxed">{review.feedback}</p>
+          )}
+        </div>
+      )}
+
+      {/* ── Review action (if not yet reviewed) ──────────────────────────────── */}
+      {!review && (
+        <button
+          onClick={() => onReview(submission.id)}
+          className="self-start flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-indigo-600 hover:bg-indigo-700 active:scale-95 text-white text-xs font-semibold transition-all"
+        >
+          Review Submission
+        </button>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/features/Tasks/v1/components/submission/SubmissionList.tsx b/src/features/Tasks/v1/components/submission/SubmissionList.tsx
new file mode 100644
index 0000000..89e5b41
--- /dev/null
+++ b/src/features/Tasks/v1/components/submission/SubmissionList.tsx
@@ -0,0 +1,175 @@
+import { useState, useRef, useEffect, useLayoutEffect } from "react";
+import { createPortal } from "react-dom";
+import { ChevronDown, Check, Inbox, ArrowUpDown } from "lucide-react";
+import SubmissionCard from "./SubmissionCard";
+import SkeletonLoader from "../common/SkeletonLoader";
+import type { Submission } from "../../Task.types";
+
+interface Props {
+  submissions: Submission[];
+  isLoading: boolean;
+  onReview: (id: string) => void;
+}
+
+type SortKey = "newest" | "oldest" | "pending";
+
+const SORT_OPTIONS: { value: SortKey; label: string; dot: string }[] = [
+  { value: "newest",  label: "Newest first",  dot: "bg-indigo-500"  },
+  { value: "oldest",  label: "Oldest first",  dot: "bg-gray-400"    },
+  { value: "pending", label: "Pending first", dot: "bg-amber-400"   },
+];
+
+const SORT_ACTIVE_COLOR: Record<SortKey, string> = {
+  newest:  "bg-indigo-600 text-white",
+  oldest:  "bg-gray-600 text-white",
+  pending: "bg-amber-500 text-white",
+};
+
+// ─── Reusable portal dropdown (same pattern as TaskFilters) ───────────────────
+function SortDropdown({ sort, onChange }: { sort: SortKey; onChange: (v: SortKey) => void }) {
+  const [open, setOpen] = useState(false);
+  const btnRef   = useRef<HTMLButtonElement>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const [style, setStyle] = useState<React.CSSProperties>({});
+
+  // Close on outside click — tracks both btn and panel
+  useEffect(() => {
+    if (!open) return;
+    const h = (e: MouseEvent) => {
+      const t = e.target as Node;
+      if (!btnRef.current?.contains(t) && !panelRef.current?.contains(t)) setOpen(false);
+    };
+    document.addEventListener("mousedown", h);
+    return () => document.removeEventListener("mousedown", h);
+  }, [open]);
+
+  // Position panel above or below
+  useLayoutEffect(() => {
+    if (!open || !btnRef.current) return;
+    const rect = btnRef.current.getBoundingClientRect();
+    const PANEL_H = 160;
+    const below = window.innerHeight - rect.bottom;
+    if (below < PANEL_H && rect.top > below) {
+      setStyle({ position: "fixed", left: rect.left, bottom: window.innerHeight - rect.top + 6, zIndex: 9999 });
+    } else {
+      setStyle({ position: "fixed", left: rect.left, top: rect.bottom + 6, zIndex: 9999 });
+    }
+  }, [open]);
+
+  const current = SORT_OPTIONS.find(o => o.value === sort)!;
+
+  return (
+    <div className="relative shrink-0">
+      <button
+        ref={btnRef}
+        onClick={() => setOpen(o => !o)}
+        className={`flex items-center gap-1.5 pl-3 pr-2.5 py-1.5 rounded-full text-xs font-semibold border transition-all select-none
+          ${SORT_ACTIVE_COLOR[sort]} border-transparent shadow-sm`}
+      >
+        <ArrowUpDown size={11} className="opacity-80" />
+        {current.label}
+        <ChevronDown size={11} className={`transition-transform duration-200 ${open ? "rotate-180" : ""} opacity-80`} />
+      </button>
+
+      {open && createPortal(
+        <div ref={panelRef} style={style}
+          className="bg-white rounded-xl border border-gray-200 shadow-2xl shadow-gray-200/80 py-1 overflow-hidden min-w-[160px]">
+          {SORT_OPTIONS.map(opt => (
+            <button
+              key={opt.value}
+              onMouseDown={(e) => { e.preventDefault(); onChange(opt.value); setOpen(false); }}
+              className={`w-full flex items-center gap-2.5 px-3.5 py-2.5 text-xs font-semibold text-left transition-colors
+                ${opt.value === sort ? "bg-gray-50 text-gray-900" : "text-gray-600 hover:bg-gray-50 hover:text-gray-900"}`}
+            >
+              <span className={`w-2 h-2 rounded-full shrink-0 ${opt.dot}`} />
+              <span className="flex-1">{opt.label}</span>
+              {opt.value === sort && <Check size={12} className="text-indigo-500 shrink-0" />}
+            </button>
+          ))}
+        </div>,
+        document.body
+      )}
+    </div>
+  );
+}
+
+// ─── Toggle switch ────────────────────────────────────────────────────────────
+function Toggle({ value, onChange, label }: { value: boolean; onChange: (v: boolean) => void; label: string }) {
+  return (
+    <label className="flex items-center gap-2 cursor-pointer select-none group">
+      <div
+        onClick={() => onChange(!value)}
+        className={`relative w-9 h-5 rounded-full transition-colors duration-200 ${value ? "bg-indigo-500" : "bg-gray-200"}`}
+      >
+        <span className={`absolute top-0.5 w-4 h-4 bg-white rounded-full shadow transition-transform duration-200 ${value ? "translate-x-4" : "translate-x-0.5"}`} />
+      </div>
+      <span className={`text-xs font-semibold transition-colors ${value ? "text-indigo-600" : "text-gray-500"}`}>
+        {label}
+      </span>
+    </label>
+  );
+}
+
+// ─── Main ─────────────────────────────────────────────────────────────────────
+export default function SubmissionList({ submissions, isLoading, onReview }: Props) {
+  const [sort,         setSort]         = useState<SortKey>("newest");
+  const [showReviewed, setShowReviewed] = useState(true);
+
+  if (isLoading) return <SkeletonLoader type="form" />;
+
+  const sorted = [...submissions]
+    .filter(s => showReviewed || !s.review)
+    .sort((a, b) => {
+      if (sort === "newest") return new Date(b.submittedAt).getTime() - new Date(a.submittedAt).getTime();
+      if (sort === "oldest") return new Date(a.submittedAt).getTime() - new Date(b.submittedAt).getTime();
+      return (a.review ? 1 : 0) - (b.review ? 1 : 0); // pending first
+    });
+
+  return (
+    <div className="flex flex-col gap-4">
+      {/* ── Header bar ──────────────────────────────────────────────────────── */}
+      <div className="flex items-center justify-between gap-3 flex-wrap">
+        {/* Title + count */}
+        <div className="flex items-center gap-2">
+          <h3 className="text-sm font-bold text-gray-900">Submissions</h3>
+          <span className={`px-2 py-0.5 rounded-full text-[11px] font-bold
+            ${submissions.length > 0 ? "bg-indigo-50 text-indigo-600" : "bg-gray-100 text-gray-400"}`}>
+            {submissions.length}
+          </span>
+          {submissions.filter(s => !s.review).length > 0 && (
+            <span className="px-2 py-0.5 rounded-full text-[11px] font-bold bg-amber-50 text-amber-600 border border-amber-100">
+              {submissions.filter(s => !s.review).length} pending
+            </span>
+          )}
+        </div>
+
+        {/* Controls */}
+        <div className="flex items-center gap-3">
+          <Toggle value={showReviewed} onChange={setShowReviewed} label="Show reviewed" />
+          <SortDropdown sort={sort} onChange={setSort} />
+        </div>
+      </div>
+
+      {/* ── List ────────────────────────────────────────────────────────────── */}
+      {sorted.length === 0 ? (
+        <div className="flex flex-col items-center justify-center py-14 text-center">
+          <div className="w-12 h-12 rounded-2xl bg-gray-100 flex items-center justify-center mb-3">
+            <Inbox size={20} className="text-gray-400" />
+          </div>
+          <p className="text-sm font-semibold text-gray-700">No submissions yet</p>
+          <p className="text-xs text-gray-400 mt-1 max-w-[200px]">
+            {showReviewed
+              ? "Assignees haven't submitted anything for this task."
+              : "All submissions have been reviewed."}
+          </p>
+        </div>
+      ) : (
+        <div className="flex flex-col gap-3">
+          {sorted.map(sub => (
+            <SubmissionCard key={sub.id} submission={sub} onReview={onReview} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/features/Tasks/v1/components/task/TaskCardList.tsx b/src/features/Tasks/v1/components/task/TaskCardList.tsx
new file mode 100644
index 0000000..09d869b
--- /dev/null
+++ b/src/features/Tasks/v1/components/task/TaskCardList.tsx
@@ -0,0 +1,171 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Plus, Eye, Pencil, Trash2, SearchX, Github, FileUp, Layers, ChevronLeft, ChevronRight } from "lucide-react";
+import { formatDistanceToNow, isPast, parseISO } from "date-fns";
+import { AvatarGroup } from "../common/Avatar";
+import StatusBadge from "../common/StatusBadge";
+import PriorityBadge from "../common/PriorityBadge";
+import SkeletonLoader from "../common/SkeletonLoader";
+import EmptyState from "../common/EmptyState";
+import { SUBMISSION_STATUS_CONFIG, PRIORITY_CONFIG } from "../../constants/task.constants";
+import type { Task } from "../../Task.types";
+
+interface Props {
+  tasks: Task[];
+  isLoading: boolean;
+  onDelete: (task: Task) => void;
+  onCreateTask: () => void;
+  hasFilters: boolean;
+  onResetFilters: () => void;
+}
+
+const SUB_ICON: Record<string, React.ReactNode> = {
+  file: <FileUp size={11} />, github: <Github size={11} />, both: <Layers size={11} />,
+};
+
+const PRIORITY_BORDER: Record<string, string> = {
+  high: "border-l-red-500", medium: "border-l-amber-400", low: "border-l-sky-400",
+};
+
+export default function TaskCardList({ tasks, isLoading, onDelete, onCreateTask, hasFilters, onResetFilters }: Props) {
+  const navigate = useNavigate();
+  const [page, setPage] = useState(1);
+  const PAGE_SIZE  = 10;
+  const totalPages = Math.ceil(tasks.length / PAGE_SIZE);
+  const paginated  = tasks.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);
+
+  if (isLoading) return (
+    <div className="flex flex-col gap-3 p-4">
+      {Array.from({ length: 4 }).map((_, i) => (
+        <div key={i} className="h-32 bg-gray-100 rounded-xl animate-pulse" />
+      ))}
+    </div>
+  );
+
+  if (tasks.length === 0) {
+    return hasFilters ? (
+      <EmptyState variant="no-results" title="No tasks match your filters"
+        description="Try adjusting your filters."
+        action={<button onClick={onResetFilters}
+          className="flex items-center gap-1.5 px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-semibold rounded-xl transition">
+          <SearchX size={14} /> Clear Filters
+        </button>} />
+    ) : (
+      <EmptyState variant="no-tasks" title="No tasks yet"
+        description="Create the first task for this event."
+        action={<button onClick={onCreateTask}
+          className="flex items-center gap-1.5 px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold rounded-xl transition shadow-sm">
+          <Plus size={15} /> Create First Task
+        </button>} />
+    );
+  }
+
+  return (
+    <div className="flex flex-col">
+      <div className="flex flex-col gap-3 p-4">
+        {paginated.map((task) => {
+          const subCfg    = SUBMISSION_STATUS_CONFIG[task.submissionStatus];
+          const priCfg    = PRIORITY_CONFIG[task.priority];
+          const deadlineDt = parseISO(task.deadline);
+          const isOverdue = isPast(deadlineDt) && task.status !== "completed";
+
+          return (
+            <div key={task.id}
+              onClick={() => navigate(`/org/tasks/${task.id}`)}
+              className={`bg-white rounded-xl border border-gray-200 border-l-4 ${PRIORITY_BORDER[task.priority]} shadow-sm hover:shadow-md transition-shadow cursor-pointer p-4`}>
+
+              {/* Top row */}
+              <div className="flex items-start justify-between gap-2 mb-2">
+                <h3 className="text-sm font-bold text-gray-900 leading-snug flex-1">{task.title}</h3>
+                <div onClick={(e) => e.stopPropagation()} className="flex items-center gap-1 shrink-0">
+                  <button onClick={() => navigate(`/org/tasks/${task.id}`)}
+                    className="p-1.5 rounded-lg text-gray-400 hover:bg-indigo-100 hover:text-indigo-700 transition"><Eye size={13} /></button>
+                  <button onClick={() => navigate(`/org/tasks/${task.id}/edit`)}
+                    className="p-1.5 rounded-lg text-gray-400 hover:bg-gray-100 hover:text-gray-700 transition"><Pencil size={13} /></button>
+                  <button onClick={() => onDelete(task)}
+                    className="p-1.5 rounded-lg text-gray-400 hover:bg-red-100 hover:text-red-600 transition"><Trash2 size={13} /></button>
+                </div>
+              </div>
+
+              {/* Description */}
+              <p className="text-xs text-gray-400 mb-3 line-clamp-2">{task.description}</p>
+
+              {/* Tech tags */}
+              {task.technologies && task.technologies.length > 0 && (
+                <div className="flex flex-wrap gap-1 mb-3">
+                  {task.technologies.slice(0, 4).map((tech) => (
+                    <span key={tech.id} className={`text-[10px] font-semibold px-1.5 py-0.5 rounded-md ${tech.color}`}>
+                      {tech.label}
+                    </span>
+                  ))}
+                  {task.technologies.length > 4 && (
+                    <span className="text-[10px] font-semibold px-1.5 py-0.5 rounded-md bg-gray-100 text-gray-500">
+                      +{task.technologies.length - 4}
+                    </span>
+                  )}
+                </div>
+              )}
+
+              {/* Badges row */}
+              <div className="flex flex-wrap items-center gap-2 mb-3">
+                <StatusBadge status={task.status} size="sm" />
+                <PriorityBadge priority={task.priority} size="sm" />
+                <span className={`inline-flex items-center gap-1 text-[10px] font-semibold px-2 py-0.5 rounded-full ${subCfg.bg} ${subCfg.text}`}>
+                  {SUB_ICON[task.submissionType]}{subCfg.label}
+                </span>
+                {task.isMandatory && (
+                  <span className="text-[10px] font-semibold text-purple-600 bg-purple-50 px-1.5 py-0.5 rounded-md">Mandatory</span>
+                )}
+              </div>
+
+              {/* Bottom row: members + deadline + points */}
+              <div className="flex items-center justify-between gap-2">
+                {/* Member avatars */}
+                <AvatarGroup members={task.assignedTo} max={4} size="xs" />
+
+                <div className="flex items-center gap-3">
+                  {task.points !== undefined && (
+                    <span className="text-[10px] text-amber-600 font-bold">★ {task.points} pts</span>
+                  )}
+                  <span className={`text-[10px] font-semibold ${isOverdue ? "text-red-500" : "text-gray-500"}`}>
+                    {isOverdue ? "OVERDUE · " : ""}{formatDistanceToNow(deadlineDt, { addSuffix: true })}
+                  </span>
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Footer */}
+      <div className="sticky bottom-0 bg-white border-t px-4 py-3 flex items-center justify-between">
+        <span className="text-xs text-gray-400">{tasks.length} task{tasks.length !== 1 ? "s" : ""}</span>
+
+        {totalPages > 1 && (
+          <div className="flex items-center gap-2">
+            <button
+              onClick={() => setPage((p) => Math.max(1, p - 1))}
+              disabled={page === 1}
+              className="p-1 rounded-lg border border-gray-200 text-gray-500 hover:bg-gray-100 disabled:opacity-40 disabled:cursor-not-allowed transition"
+            >
+              <ChevronLeft size={13} />
+            </button>
+            <span className="text-xs text-gray-500 font-medium">{page} / {totalPages}</span>
+            <button
+              onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
+              disabled={page === totalPages}
+              className="p-1 rounded-lg border border-gray-200 text-gray-500 hover:bg-gray-100 disabled:opacity-40 disabled:cursor-not-allowed transition"
+            >
+              <ChevronRight size={13} />
+            </button>
+          </div>
+        )}
+
+        <button onClick={onCreateTask}
+          className="flex items-center gap-1.5 px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-bold rounded-xl transition shadow-sm">
+          <Plus size={13} /> Add Task
+        </button>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/features/Tasks/v1/components/task/TaskFilters.tsx b/src/features/Tasks/v1/components/task/TaskFilters.tsx
new file mode 100644
index 0000000..550dc36
--- /dev/null
+++ b/src/features/Tasks/v1/components/task/TaskFilters.tsx
@@ -0,0 +1,297 @@
+import { useEffect, useRef, useState, useLayoutEffect } from "react";
+import { createPortal } from "react-dom";
+import { Search, X, SlidersHorizontal, ChevronDown, Check, Sparkles } from "lucide-react";
+import { mockMembers } from "../../mock/taskMockData";
+import type { TaskFilters, TaskStatus, TaskPriority } from "../../Task.types";
+
+interface Props {
+  filters: TaskFilters; onChange: (f: TaskFilters) => void;
+  totalCount: number; filteredCount: number;
+}
+
+const STATUS_COLORS:   Record<string,string> = { all:"",todo:"bg-gray-600 text-white","in-progress":"bg-indigo-600 text-white",completed:"bg-emerald-500 text-white" };
+const TIME_COLORS:     Record<string,string> = { all:"",upcoming:"bg-sky-500 text-white",past:"bg-red-500 text-white",completed:"bg-emerald-500 text-white" };
+const PRIORITY_COLORS: Record<string,string> = { all:"",high:"bg-red-500 text-white",medium:"bg-amber-500 text-white",low:"bg-sky-400 text-white" };
+const STATUS_DOTS:     Record<string,string> = { all:"bg-gray-300",todo:"bg-gray-500","in-progress":"bg-indigo-500",completed:"bg-emerald-500" };
+const TIME_DOTS:       Record<string,string> = { all:"bg-gray-300",upcoming:"bg-sky-500",past:"bg-red-500",completed:"bg-emerald-500" };
+const PRIORITY_DOTS:   Record<string,string> = { all:"bg-gray-300",high:"bg-red-500",medium:"bg-amber-400",low:"bg-sky-400" };
+
+// ─── Shared dropdown hook ─────────────────────────────────────────────────────
+function useDropdown() {
+  const [open, setOpen] = useState(false);
+  const btnRef   = useRef<HTMLButtonElement>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (!open) return;
+    const h = (e: MouseEvent) => {
+      const t = e.target as Node;
+      if (!btnRef.current?.contains(t) && !panelRef.current?.contains(t)) setOpen(false);
+    };
+    document.addEventListener("mousedown", h);
+    return () => document.removeEventListener("mousedown", h);
+  }, [open]);
+  return { open, setOpen, btnRef, panelRef };
+}
+
+// ─── Portal panel ─────────────────────────────────────────────────────────────
+function DropdownPortal({ btnRef, panelRef, open, children }: {
+  btnRef: React.RefObject<HTMLButtonElement>; panelRef: React.RefObject<HTMLDivElement>;
+  open: boolean; children: React.ReactNode;
+}) {
+  const [style, setStyle] = useState<React.CSSProperties>({});
+  useLayoutEffect(() => {
+    if (!open || !btnRef.current) return;
+    const rect = btnRef.current.getBoundingClientRect();
+    const below = window.innerHeight - rect.bottom;
+    if (below < 240 && rect.top > below)
+      setStyle({ position:"fixed", left:rect.left, bottom:window.innerHeight - rect.top + 6, zIndex:9999 });
+    else
+      setStyle({ position:"fixed", left:rect.left, top:rect.bottom + 6, zIndex:9999 });
+  }, [open, btnRef]);
+  if (!open) return null;
+  return createPortal(
+    <div ref={panelRef} style={style}
+      className="bg-white rounded-xl border border-gray-200 shadow-2xl shadow-gray-200/80 py-1 overflow-hidden min-w-[150px]">
+      {children}
+    </div>,
+    document.body
+  );
+}
+
+// ─── Pill dropdown ────────────────────────────────────────────────────────────
+function PillDropdown<T extends string>({ value, options, onChange, colorMap, dotMap }: {
+  value:T; options:{value:T;label:string}[]; onChange:(v:T)=>void;
+  colorMap:Record<string,string>; dotMap:Record<string,string>;
+}) {
+  const { open, setOpen, btnRef, panelRef } = useDropdown();
+  const isActive = value !== options[0].value;
+  const label = options.find(o => o.value === value)?.label ?? options[0].label;
+  return (
+    <div className="relative shrink-0">
+      <button ref={btnRef} onClick={() => setOpen(o => !o)}
+        className={`flex items-center gap-1 px-3 py-1.5 rounded-full text-xs font-semibold border transition-all whitespace-nowrap select-none
+          ${isActive ? `${colorMap[value]} border-transparent shadow-sm` : "bg-white text-gray-600 border-gray-200 hover:border-gray-300"}`}>
+        {label}
+        <ChevronDown size={11} className={`transition-transform duration-200 ${open?"rotate-180":""} ${!isActive?"text-gray-400":"opacity-70"}`}/>
+      </button>
+      <DropdownPortal btnRef={btnRef} panelRef={panelRef} open={open}>
+        {options.map(opt => (
+          <button key={opt.value}
+            onMouseDown={(e) => { e.preventDefault(); onChange(opt.value); setOpen(false); }}
+            className={`w-full flex items-center gap-2.5 px-3.5 py-2 text-xs font-semibold text-left transition-colors
+              ${opt.value===value?"bg-gray-50 text-gray-900":"text-gray-600 hover:bg-gray-50 hover:text-gray-900"}`}>
+            <span className={`w-2 h-2 rounded-full shrink-0 ${dotMap[opt.value]??"bg-gray-300"}`}/>
+            <span className="flex-1">{opt.label}</span>
+            {opt.value===value && <Check size={12} className="text-indigo-500 shrink-0"/>}
+          </button>
+        ))}
+      </DropdownPortal>
+    </div>
+  );
+}
+
+// ─── Member filter ────────────────────────────────────────────────────────────
+function MemberFilter({ selected, onChange }: { selected:string[]; onChange:(ids:string[])=>void }) {
+  const { open, setOpen, btnRef, panelRef } = useDropdown();
+  const isActive = selected.length > 0;
+  const toggle = (id:string) => onChange(selected.includes(id) ? selected.filter(x=>x!==id) : [...selected,id]);
+  return (
+    <div className="relative shrink-0">
+      <button ref={btnRef} onClick={() => setOpen(o => !o)}
+        className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-semibold border transition-all select-none
+          ${isActive ? "bg-violet-600 text-white border-transparent shadow-sm" : "bg-white text-gray-600 border-gray-200 hover:border-gray-300"}`}>
+        {isActive && (
+          <span className="flex -space-x-1.5">
+            {selected.slice(0,2).map(id => { const m=mockMembers.find(x=>x.id===id);
+              return m ? <img key={id} src={m.avatar} alt={m.name} className="w-4 h-4 rounded-full border border-violet-400 object-cover"/> : null; })}
+          </span>
+        )}
+        {isActive ? `${selected.length} Member${selected.length>1?"s":""}` : "Members"}
+        <ChevronDown size={11} className={`transition-transform duration-200 ${open?"rotate-180":""} ${!isActive?"text-gray-400":""}`}/>
+      </button>
+      <DropdownPortal btnRef={btnRef} panelRef={panelRef} open={open}>
+        {mockMembers.map(m => { const isSel=selected.includes(m.id); return (
+          <button key={m.id} onMouseDown={(e)=>{e.preventDefault();toggle(m.id);}}
+            className={`w-full flex items-center gap-2.5 px-3 py-2 text-left transition-colors hover:bg-gray-50 ${isSel?"bg-violet-50":""}`}>
+            <img src={m.avatar} alt={m.name} className="w-6 h-6 rounded-full object-cover shrink-0"/>
+            <div className="flex-1 min-w-0">
+              <p className={`text-xs font-semibold truncate ${isSel?"text-violet-700":"text-gray-900"}`}>{m.name}</p>
+              <p className="text-[10px] text-gray-400 truncate">{m.role}</p>
+            </div>
+            {isSel && <div className="w-4 h-4 rounded-full bg-violet-600 flex items-center justify-center shrink-0"><Check size={9} className="text-white"/></div>}
+          </button>
+        );})}
+        {isActive && (<><div className="border-t my-1"/>
+          <button onMouseDown={(e)=>{e.preventDefault();onChange([]);}} className="w-full px-3 py-1.5 text-xs text-red-500 font-semibold text-left hover:bg-red-50">Clear all</button></>)}
+      </DropdownPortal>
+    </div>
+  );
+}
+
+// ─── Smart search input ───────────────────────────────────────────────────────
+function SmartSearch({ value, onChange, filteredCount, totalCount, isFiltered }: {
+  value: string; onChange: (v:string) => void;
+  filteredCount: number; totalCount: number; isFiltered: boolean;
+}) {
+  const [focused, setFocused] = useState(false);
+  const [showHint, setShowHint] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Show hint popup briefly on focus when empty
+  useEffect(() => {
+    if (focused && !value) {
+      setShowHint(true);
+      const t = setTimeout(() => setShowHint(false), 3000);
+      return () => clearTimeout(t);
+    } else {
+      setShowHint(false);
+    }
+  }, [focused, value]);
+
+  const hasResults = !value || filteredCount > 0;
+
+  return (
+    <div className="relative shrink-0">
+      <div className={`flex items-center gap-1.5 pl-2.5 pr-2 py-1.5 rounded-full border transition-all
+        ${focused
+          ? "border-indigo-400 ring-2 ring-indigo-100 bg-white w-52 sm:w-64"
+          : value
+          ? "border-indigo-300 bg-indigo-50 w-44 sm:w-52"
+          : "border-gray-200 bg-gray-50 hover:border-gray-300 w-36 sm:w-44"}`}>
+
+        <Search size={13} className={`shrink-0 transition-colors ${focused || value ? "text-indigo-500" : "text-gray-400"}`}/>
+
+        <input
+          ref={inputRef}
+          value={value}
+          onChange={e => onChange(e.target.value)}
+          onFocus={() => setFocused(true)}
+          onBlur={() => setFocused(false)}
+          placeholder="Search tasks…"
+          className="flex-1 text-xs bg-transparent outline-none placeholder-gray-400 text-gray-800 min-w-0"
+        />
+
+        {/* Result count badge while typing */}
+        {value && (
+          <span className={`shrink-0 text-[10px] font-bold px-1.5 py-0.5 rounded-full transition-colors
+            ${hasResults ? "bg-indigo-100 text-indigo-600" : "bg-red-100 text-red-500"}`}>
+            {filteredCount}
+          </span>
+        )}
+
+        {value && (
+          <button onClick={() => onChange("")} className="shrink-0 text-gray-400 hover:text-gray-600 transition-colors">
+            <X size={12}/>
+          </button>
+        )}
+      </div>
+
+      {/* Hint tooltip — opens BELOW the search input via portal */}
+      {showHint && inputRef.current && (() => {
+        const rect = inputRef.current.getBoundingClientRect();
+        return createPortal(
+          <div style={{ position:"fixed", left: rect.left, top: rect.bottom + 8, zIndex:9999, width:288 }}
+            className="bg-gray-900 text-white rounded-xl p-3 shadow-2xl">
+            <div className="flex items-center gap-1.5 mb-2">
+              <Sparkles size={12} className="text-indigo-400"/>
+              <span className="text-[11px] font-bold text-indigo-300">Smart Search</span>
+            </div>
+            <div className="grid grid-cols-2 gap-x-3 gap-y-1">
+              {[
+                ["React","technology"],["Arjun","member name"],
+                ["high","priority"],["completed","status"],
+                ["mandatory","flag"],["github","submit type"],
+              ].map(([ex, desc]) => (
+                <button key={ex} onMouseDown={(e) => { e.preventDefault(); onChange(ex); setShowHint(false); }}
+                  className="flex items-center gap-1.5 text-left hover:bg-white/10 rounded-lg px-1.5 py-1 transition-colors group">
+                  <span className="text-[10px] font-bold text-amber-300 bg-amber-300/10 px-1.5 py-0.5 rounded-md group-hover:bg-amber-300/20">
+                    {ex}
+                  </span>
+                  <span className="text-[10px] text-gray-400">{desc}</span>
+                </button>
+              ))}
+            </div>
+            <p className="text-[10px] text-gray-500 mt-2">Click any example to try it</p>
+          {/* Arrow pointing UP toward the search box */}
+          <div className="absolute -top-1.5 left-5 w-3 h-3 bg-gray-900 rotate-45 rounded-sm"/>
+          </div>,
+          document.body
+        );
+      })()}
+    </div>
+  );
+}
+
+// ─── Main ─────────────────────────────────────────────────────────────────────
+export default function TaskFiltersBar({ filters, onChange, totalCount, filteredCount }: Props) {
+  const [localSearch, setLocalSearch] = useState(filters.search);
+  const debounceRef = useRef<ReturnType<typeof setTimeout>>();
+
+  useEffect(() => {
+    clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => onChange({ ...filters, search: localSearch }), 300);
+    return () => clearTimeout(debounceRef.current);
+  }, [localSearch]); // eslint-disable-line
+
+  const hasActive = filters.status !== "all" || filters.priority !== "all" || filters.time !== "all" || filters.members.length > 0 || filters.search !== "";
+  const resetAll  = () => { setLocalSearch(""); onChange({ status:"all", priority:"all", time:"all", members:[], search:"" }); };
+
+  return (
+    <div className="border-b bg-white">
+      <div className="flex items-center gap-2 px-4 py-2.5 overflow-x-auto scrollbar-hide">
+        <SlidersHorizontal size={14} className="text-gray-400 shrink-0"/>
+
+        <PillDropdown<TaskStatus|"all"> value={filters.status} colorMap={STATUS_COLORS} dotMap={STATUS_DOTS}
+          onChange={v => onChange({...filters,status:v})}
+          options={[{value:"all",label:"Status"},{value:"todo",label:"Todo"},{value:"in-progress",label:"In Progress"},{value:"completed",label:"Completed"}]}/>
+
+        <PillDropdown<"all"|"upcoming"|"past"|"completed"> value={filters.time} colorMap={TIME_COLORS} dotMap={TIME_DOTS}
+          onChange={v => onChange({...filters,time:v})}
+          options={[{value:"all",label:"Time"},{value:"upcoming",label:"Upcoming"},{value:"past",label:"Past"},{value:"completed",label:"Completed"}]}/>
+
+        <PillDropdown<TaskPriority|"all"> value={filters.priority} colorMap={PRIORITY_COLORS} dotMap={PRIORITY_DOTS}
+          onChange={v => onChange({...filters,priority:v as TaskPriority|"all"})}
+          options={[{value:"all",label:"Priority"},{value:"high",label:"High"},{value:"medium",label:"Medium"},{value:"low",label:"Low"}]}/>
+
+        <MemberFilter selected={filters.members} onChange={ids => onChange({...filters,members:ids})}/>
+
+        <div className="w-3 shrink-0"/>
+
+        <SmartSearch
+          value={localSearch}
+          onChange={setLocalSearch}
+          filteredCount={filteredCount}
+          totalCount={totalCount}
+          isFiltered={hasActive}
+        />
+
+        {hasActive && (
+          <button onClick={resetAll}
+            className="flex items-center gap-1 px-3 py-1.5 rounded-full text-xs font-semibold text-red-500 bg-red-50 hover:bg-red-100 border border-red-100 transition shrink-0">
+            <X size={11}/> Reset
+          </button>
+        )}
+      </div>
+
+      {/* Count + search context */}
+      <div className="px-4 pb-2 flex items-center gap-2 flex-wrap">
+        <span className="text-[11px] text-gray-400">
+          Showing <span className="font-semibold text-gray-700">{filteredCount}</span>
+          {filteredCount !== totalCount && <> of <span className="font-semibold text-gray-700">{totalCount}</span></>}{" "}
+          task{filteredCount !== 1 ? "s" : ""}
+          {hasActive && <span className="text-indigo-500 font-semibold"> · filtered</span>}
+        </span>
+        {localSearch && filteredCount === 0 && (
+          <span className="text-[11px] text-red-500 font-medium">
+            No results for "{localSearch}" — try technology name, member, or status
+          </span>
+        )}
+        {localSearch && filteredCount > 0 && (
+          <span className="text-[11px] text-indigo-500 font-medium">
+            Searching across title, description, tech tags, members & more
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/features/Tasks/v1/components/task/TaskForm.tsx b/src/features/Tasks/v1/components/task/TaskForm.tsx
new file mode 100644
index 0000000..762b865
--- /dev/null
+++ b/src/features/Tasks/v1/components/task/TaskForm.tsx
@@ -0,0 +1,325 @@
+import { useState, useEffect } from "react";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import {
+  ChevronDown, ChevronUp, Calendar, Star, Loader2,
+  AlertCircle, Github, FileUp, Layers, Users, Code2,
+} from "lucide-react";
+import Avatar from "../common/Avatar";
+import { useEvents } from "../../hooks/useEvents";
+import { useCreateTask, useUpdateTask } from "../../hooks/useTasks";
+import { mockMembers } from "../../mock/taskMockData";
+import { TECH_OPTIONS } from "../../constants/tech.constants";
+import type { Task, TaskPriority, SubmissionType, TechTag, CreateTaskPayload } from "../../Task.types";
+
+interface Props { mode: "create" | "edit"; task?: Task; }
+
+interface Errors {
+  eventId?: string; title?: string; description?: string;
+  assignedTo?: string; deadline?: string; points?: string;
+}
+
+function validate(form: Partial<CreateTaskPayload>): Errors {
+  const e: Errors = {};
+  if (!form.eventId)             e.eventId     = "Please select an event.";
+  if (!form.title?.trim())       e.title       = "Task title is required.";
+  else if (form.title.trim().length < 5) e.title = "Title must be at least 5 characters.";
+  if (!form.description?.trim()) e.description = "Description is required.";
+  if (!form.assignedTo?.length)  e.assignedTo  = "Assign to at least one member.";
+  if (!form.deadline)            e.deadline    = "Deadline is required.";
+  if (form.points !== undefined && form.points < 0) e.points = "Points must be ≥ 0.";
+  return e;
+}
+
+function Field({ label, required, error, children, hint }: {
+  label: string; required?: boolean; error?: string; children: React.ReactNode; hint?: string;
+}) {
+  return (
+    <div className="flex flex-col gap-1.5">
+      <label className="text-xs font-bold text-gray-700 uppercase tracking-wide">
+        {label} {required && <span className="text-red-400">*</span>}
+      </label>
+      {children}
+      {hint && !error && <p className="text-[11px] text-gray-400">{hint}</p>}
+      {error && <p className="flex items-center gap-1 text-xs text-red-500 font-medium"><AlertCircle size={12} />{error}</p>}
+    </div>
+  );
+}
+
+function inputCls(error?: string) {
+  return `w-full text-sm rounded-xl border px-3.5 py-2.5 outline-none transition-all placeholder-gray-400 text-gray-900 bg-white
+    ${error ? "border-red-300 ring-2 ring-red-100" : "border-gray-200 focus:border-indigo-400 focus:ring-2 focus:ring-indigo-100"}`;
+}
+
+// ─── Tech tag picker ──────────────────────────────────────────────────────────
+function TechPicker({ selected, onChange }: { selected: TechTag[]; onChange: (tags: TechTag[]) => void }) {
+  const [search, setSearch] = useState("");
+  const selectedIds = new Set(selected.map((t) => t.id));
+
+  const toggle = (tech: TechTag) => {
+    if (selectedIds.has(tech.id)) onChange(selected.filter((t) => t.id !== tech.id));
+    else onChange([...selected, tech]);
+  };
+
+  const filtered = TECH_OPTIONS.filter((t) =>
+    t.label.toLowerCase().includes(search.toLowerCase())
+  );
+
+  return (
+    <div className="flex flex-col gap-2">
+      {/* Selected tags */}
+      {selected.length > 0 && (
+        <div className="flex flex-wrap gap-1.5">
+          {selected.map((tech) => (
+            <span key={tech.id}
+              className={`inline-flex items-center gap-1 text-xs font-semibold px-2 py-0.5 rounded-md ${tech.color}`}>
+              {tech.label}
+              <button onClick={() => toggle(tech)} className="ml-0.5 opacity-60 hover:opacity-100 font-bold">×</button>
+            </span>
+          ))}
+        </div>
+      )}
+
+      {/* Search */}
+      <input value={search} onChange={(e) => setSearch(e.target.value)}
+        placeholder="Search technologies…"
+        className="w-full text-xs border border-gray-200 rounded-lg px-3 py-2 outline-none focus:border-indigo-400 focus:ring-2 focus:ring-indigo-100 placeholder-gray-400 bg-gray-50 focus:bg-white transition" />
+
+      {/* Grid of options */}
+      <div className="flex flex-wrap gap-1.5 max-h-32 overflow-y-auto pr-1">
+        {filtered.map((tech) => {
+          const isSel = selectedIds.has(tech.id);
+          return (
+            <button key={tech.id} type="button" onClick={() => toggle(tech)}
+              className={`inline-flex items-center gap-1 text-xs font-semibold px-2 py-0.5 rounded-md transition-all border
+                ${isSel
+                  ? `${tech.color} border-transparent ring-2 ring-offset-1 ring-indigo-300`
+                  : "bg-white text-gray-600 border-gray-200 hover:border-gray-400"}`}>
+              {isSel && <span className="text-[10px]">✓</span>}
+              {tech.label}
+            </button>
+          );
+        })}
+        {filtered.length === 0 && <p className="text-xs text-gray-400 py-2">No match for "{search}"</p>}
+      </div>
+    </div>
+  );
+}
+
+// ─── Main form ────────────────────────────────────────────────────────────────
+export default function TaskForm({ mode, task }: Props) {
+  const navigate = useNavigate();
+  const [params] = useSearchParams();
+  const { data: events = [] } = useEvents();
+  const createTask = useCreateTask();
+  const updateTask = useUpdateTask();
+
+  const [eventId,        setEventId]        = useState(task?.eventId ?? params.get("eventId") ?? "");
+  const [title,          setTitle]          = useState(task?.title ?? "");
+  const [description,    setDescription]    = useState(task?.description ?? "");
+  const [assignedTo,     setAssignedTo]     = useState<string[]>(task?.assignedTo.map((m) => m.id) ?? []);
+  const [deadline,       setDeadline]       = useState(task?.deadline.slice(0, 16) ?? "");
+  const [priority,       setPriority]       = useState<TaskPriority>(task?.priority ?? "medium");
+  const [submissionType, setSubmissionType] = useState<SubmissionType>(task?.submissionType ?? "github");
+  const [isMandatory,    setIsMandatory]    = useState(task?.isMandatory ?? false);
+  const [points,         setPoints]         = useState<number | "">(task?.points ?? "");
+  const [allowLate,      setAllowLate]      = useState(task?.allowLateSubmission ?? false);
+  const [maxSubs,        setMaxSubs]        = useState<number | "">(task?.maxSubmissions ?? "");
+  const [technologies,   setTechnologies]   = useState<TechTag[]>(task?.technologies ?? []);
+  const [showAdvanced,   setShowAdvanced]   = useState(false);
+  const [errors,         setErrors]         = useState<Errors>({});
+  const [touched,        setTouched]        = useState(false);
+
+  useEffect(() => {
+    if (!touched) return;
+    setErrors(validate({ eventId, title, description, assignedTo, deadline, points: points === "" ? undefined : Number(points) }));
+  }, [touched, eventId, title, description, assignedTo, deadline, points]);
+
+  const handleSubmit = async () => {
+    setTouched(true);
+    const payload: CreateTaskPayload = {
+      eventId, title, description, assignedTo, deadline, priority, submissionType,
+      isMandatory, points: points === "" ? undefined : Number(points),
+      allowLateSubmission: allowLate, maxSubmissions: maxSubs === "" ? undefined : Number(maxSubs),
+      technologies,
+    };
+    const errs = validate(payload);
+    setErrors(errs);
+    if (Object.keys(errs).length > 0) return;
+
+    try {
+      if (mode === "create") {
+        await createTask.mutateAsync(payload);
+        navigate(`/org/tasks?eventId=${eventId}&created=1`);
+      } else if (task) {
+        await updateTask.mutateAsync({ id: task.id, payload });
+        navigate(`/org/tasks?eventId=${task.eventId}&updated=1`);
+      }
+    } catch {
+      setErrors({ title: "Server error. Please try again." });
+    }
+  };
+
+  const isLoading = createTask.isPending || updateTask.isPending;
+
+  const PRIORITY_OPTIONS: { value: TaskPriority; label: string; dot: string }[] = [
+    { value: "high",   label: "High",   dot: "bg-red-500"   },
+    { value: "medium", label: "Medium", dot: "bg-amber-400" },
+    { value: "low",    label: "Low",    dot: "bg-sky-400"   },
+  ];
+
+  const SUB_OPTIONS: { value: SubmissionType; icon: React.ReactNode; label: string }[] = [
+    { value: "github", icon: <Github size={14} />,  label: "GitHub"      },
+    { value: "file",   icon: <FileUp size={14} />,  label: "File Upload" },
+    { value: "both",   icon: <Layers size={14} />,  label: "Both"        },
+  ];
+
+  return (
+    <div className="flex flex-col gap-5 max-w-2xl w-full mx-auto p-6">
+      {/* Event */}
+      <Field label="Event" required error={errors.eventId}>
+        <select value={eventId} onChange={(e) => setEventId(e.target.value)} className={inputCls(errors.eventId)}>
+          <option value="">Select an event…</option>
+          {events.map((evt) => <option key={evt.id} value={evt.id}>{evt.name} · {evt.status}</option>)}
+        </select>
+      </Field>
+
+      {/* Title */}
+      <Field label="Task Title" required error={errors.title}>
+        <input type="text" value={title} onChange={(e) => setTitle(e.target.value)}
+          placeholder="e.g. Build landing page for AI showcase" className={inputCls(errors.title)} />
+      </Field>
+
+      {/* Description */}
+      <Field label="Description" required error={errors.description} hint="Explain deliverables and acceptance criteria.">
+        <textarea value={description} onChange={(e) => setDescription(e.target.value)} rows={4}
+          placeholder="Describe the task in detail…" className={`${inputCls(errors.description)} resize-none`} />
+      </Field>
+
+      {/* Technologies */}
+      <Field label="Technologies Used" hint="Select all relevant tech for this task.">
+        <div className="p-3 rounded-xl border border-gray-200 bg-gray-50">
+          <TechPicker selected={technologies} onChange={setTechnologies} />
+        </div>
+      </Field>
+
+      {/* Assign to */}
+      <Field label="Assign To" required error={errors.assignedTo}>
+        <div className="grid grid-cols-2 gap-2">
+          {mockMembers.map((m) => {
+            const sel = assignedTo.includes(m.id);
+            return (
+              <button key={m.id} type="button" onClick={() => {
+                setAssignedTo((prev) => prev.includes(m.id) ? prev.filter((x) => x !== m.id) : [...prev, m.id]);
+              }}
+                className={`flex items-center gap-2.5 p-3 rounded-xl border text-left transition-all
+                  ${sel ? "border-indigo-400 bg-indigo-50 ring-2 ring-indigo-100" : "border-gray-200 hover:border-gray-300 bg-white"}`}>
+                <Avatar name={m.name} src={m.avatar} size="md" showTooltip={false} ring ringColor="ring-indigo-200" />
+                <div className="flex-1 min-w-0">
+                  <p className={`text-xs font-semibold truncate ${sel ? "text-indigo-700" : "text-gray-900"}`}>{m.name}</p>
+                  <p className="text-[10px] text-gray-400 truncate">{m.role}</p>
+                </div>
+                {sel && <div className="w-4 h-4 rounded-full bg-indigo-600 flex items-center justify-center shrink-0"><span className="text-white text-[8px] font-bold">✓</span></div>}
+              </button>
+            );
+          })}
+        </div>
+        {assignedTo.length > 0 && (
+          <p className="text-[11px] text-indigo-600 font-medium flex items-center gap-1 mt-1">
+            <Users size={11} />{assignedTo.length} member{assignedTo.length !== 1 ? "s" : ""} selected
+          </p>
+        )}
+      </Field>
+
+      {/* Deadline + Priority */}
+      <div className="grid grid-cols-2 gap-4">
+        <Field label="Deadline" required error={errors.deadline}>
+          <div className="relative">
+            <Calendar size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none" />
+            <input type="datetime-local" value={deadline} onChange={(e) => setDeadline(e.target.value)}
+              className={`${inputCls(errors.deadline)} pl-8`} />
+          </div>
+        </Field>
+        <Field label="Priority">
+          <div className="flex gap-2">
+            {PRIORITY_OPTIONS.map((p) => (
+              <button key={p.value} type="button" onClick={() => setPriority(p.value)}
+                className={`flex-1 flex items-center justify-center gap-1.5 py-2.5 rounded-xl border text-xs font-bold transition-all
+                  ${priority === p.value ? "border-gray-800 bg-gray-800 text-white" : "border-gray-200 text-gray-600 hover:border-gray-300"}`}>
+                <span className={`w-2 h-2 rounded-full ${p.dot}`} />{p.label}
+              </button>
+            ))}
+          </div>
+        </Field>
+      </div>
+
+      {/* Submission type */}
+      <Field label="Submission Type">
+        <div className="flex gap-2">
+          {SUB_OPTIONS.map((o) => (
+            <button key={o.value} type="button" onClick={() => setSubmissionType(o.value)}
+              className={`flex-1 flex flex-col items-center gap-1.5 py-3 rounded-xl border text-xs font-semibold transition-all
+                ${submissionType === o.value ? "border-indigo-400 bg-indigo-50 text-indigo-700 ring-2 ring-indigo-100" : "border-gray-200 text-gray-600 hover:border-gray-300 bg-white"}`}>
+              {o.icon}{o.label}
+            </button>
+          ))}
+        </div>
+      </Field>
+
+      {/* Advanced */}
+      <div className="border border-gray-200 rounded-2xl overflow-hidden">
+        <button type="button" onClick={() => setShowAdvanced((v) => !v)}
+          className="w-full flex items-center justify-between px-4 py-3.5 text-sm font-bold text-gray-700 hover:bg-gray-50 transition-colors">
+          <span className="flex items-center gap-2"><Star size={14} className="text-amber-500" />Advanced Options</span>
+          {showAdvanced ? <ChevronUp size={16} className="text-gray-400" /> : <ChevronDown size={16} className="text-gray-400" />}
+        </button>
+
+        {showAdvanced && (
+          <div className="px-4 pb-4 flex flex-col gap-4 border-t bg-gray-50/50">
+            <div className="h-1" />
+
+            {[
+              { label: "Mandatory Task", desc: "Required for all assignees to complete.", val: isMandatory, set: setIsMandatory },
+              { label: "Allow Late Submission", desc: "Accept submissions after the deadline.", val: allowLate, set: setAllowLate },
+            ].map(({ label, desc, val, set }) => (
+              <div key={label} className="flex items-center justify-between">
+                <div><p className="text-sm font-semibold text-gray-800">{label}</p><p className="text-xs text-gray-400">{desc}</p></div>
+                <div onClick={() => set((v) => !v)}
+                  className={`relative w-10 h-6 rounded-full cursor-pointer transition-colors ${val ? "bg-indigo-500" : "bg-gray-200"}`}>
+                  <span className={`absolute top-1 w-4 h-4 bg-white rounded-full shadow transition-transform ${val ? "translate-x-5" : "translate-x-1"}`} />
+                </div>
+              </div>
+            ))}
+
+            <Field label="Points (Hackathon Score)" error={errors.points} hint="Leave empty to disable scoring.">
+              <div className="relative">
+                <Star size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-amber-400 pointer-events-none" />
+                <input type="number" min={0} max={1000} value={points}
+                  onChange={(e) => setPoints(e.target.value === "" ? "" : Number(e.target.value))}
+                  placeholder="e.g. 100" className={`${inputCls(errors.points)} pl-8`} />
+              </div>
+            </Field>
+
+            <Field label="Max Submissions Per Member" hint="Leave empty for unlimited.">
+              <input type="number" min={1} value={maxSubs}
+                onChange={(e) => setMaxSubs(e.target.value === "" ? "" : Number(e.target.value))}
+                placeholder="e.g. 3" className={inputCls()} />
+            </Field>
+          </div>
+        )}
+      </div>
+
+      {/* Submit row */}
+      <div className="flex items-center justify-between gap-3 pt-2 border-t">
+        <button type="button" onClick={() => navigate(-1)}
+          className="px-5 py-2.5 rounded-xl border border-gray-200 text-sm font-semibold text-gray-600 hover:bg-gray-50 transition">
+          Cancel
+        </button>
+        <button type="button" onClick={handleSubmit} disabled={isLoading}
+          className="flex items-center gap-2 px-6 py-2.5 bg-indigo-600 hover:bg-indigo-700 active:scale-95 disabled:opacity-60 text-white text-sm font-bold rounded-xl transition-all shadow-sm shadow-indigo-200">
+          {isLoading && <Loader2 size={14} className="animate-spin" />}
+          {mode === "create" ? "Create Task" : "Save Changes"}
+        </button>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/features/Tasks/v1/components/task/TaskHeader.tsx b/src/features/Tasks/v1/components/task/TaskHeader.tsx
new file mode 100644
index 0000000..030ba5d
--- /dev/null
+++ b/src/features/Tasks/v1/components/task/TaskHeader.tsx
@@ -0,0 +1,87 @@
+import { useNavigate } from "react-router-dom";
+import { Plus, ListTodo, Zap, CheckCircle2, Clock3 } from "lucide-react";
+import { useEvents } from "../../hooks/useEvents";
+import { EVENT_TYPE_CONFIG, EVENT_STATUS_CONFIG } from "../../constants/task.constants";
+import type { Task } from "../../Task.types";
+
+interface Props { selectedEventId: string | null; tasks: Task[]; }
+
+export default function TaskHeader({ selectedEventId, tasks }: Props) {
+  const navigate = useNavigate();
+  const { data: events = [] } = useEvents();
+  const event = events.find((e) => e.id === selectedEventId) ?? null;
+
+  const todo       = tasks.filter((t) => t.status === "todo").length;
+  const inProgress = tasks.filter((t) => t.status === "in-progress").length;
+  const completed  = tasks.filter((t) => t.status === "completed").length;
+  const typeCfg    = event ? EVENT_TYPE_CONFIG[event.type]   : null;
+  const statusCfg  = event ? EVENT_STATUS_CONFIG[event.status] : null;
+
+  return (
+    <div className="bg-white border-b">
+      {/* Top row */}
+      <div className="flex items-center justify-between px-4 pt-3 pb-2 gap-2">
+        <div className="flex items-center gap-2.5 min-w-0">
+          <div className="w-8 h-8 rounded-xl bg-indigo-600 flex items-center justify-center shrink-0">
+            <ListTodo size={16} className="text-white" />
+          </div>
+          <div className="min-w-0">
+            <h1 className="text-sm sm:text-base font-bold text-gray-900 leading-tight">Task Management</h1>
+            {event ? (
+              <p className="text-xs text-gray-400 truncate max-w-[180px] sm:max-w-none">
+                Tasks for <span className="font-semibold text-indigo-600">{event.name}</span>
+              </p>
+            ) : (
+              <p className="text-xs text-gray-400">Select an event to begin</p>
+            )}
+          </div>
+        </div>
+
+        <button
+          onClick={() => navigate(selectedEventId ? `/org/tasks/create?eventId=${selectedEventId}` : "/org/tasks/create")}
+          disabled={!selectedEventId}
+          className="flex items-center gap-1.5 px-3 sm:px-4 py-2 bg-indigo-600 hover:bg-indigo-700 active:scale-95 disabled:opacity-40 disabled:cursor-not-allowed text-white text-xs sm:text-sm font-semibold rounded-xl transition-all shadow-sm shadow-indigo-200 shrink-0"
+        >
+          <Plus size={15} />
+          <span className="hidden sm:inline">New Task</span>
+          <span className="inline sm:hidden">New</span>
+        </button>
+      </div>
+
+      {/* Event badges + stats — scrollable on mobile */}
+      {event && typeCfg && statusCfg && (
+        <div className="px-4 pb-2.5 flex items-center gap-2 overflow-x-auto scrollbar-hide">
+          <span className={`inline-flex items-center gap-1.5 text-[11px] font-semibold px-2.5 py-1 rounded-lg shrink-0 ${typeCfg.bg} ${typeCfg.text}`}>
+            <span className={`w-1.5 h-1.5 rounded-full ${typeCfg.dot}`} />{typeCfg.label}
+          </span>
+
+          <span className={`inline-flex items-center gap-1.5 text-[11px] font-semibold px-2.5 py-1 rounded-lg shrink-0 ${statusCfg.bg} ${statusCfg.text}`}>
+            {statusCfg.pulse ? (
+              <span className="relative flex h-1.5 w-1.5">
+                <span className={`animate-ping absolute inline-flex h-full w-full rounded-full opacity-75 ${statusCfg.dot}`} />
+                <span className={`relative inline-flex rounded-full h-1.5 w-1.5 ${statusCfg.dot}`} />
+              </span>
+            ) : <span className={`w-1.5 h-1.5 rounded-full ${statusCfg.dot}`} />}
+            {event.status}
+          </span>
+
+          <div className="w-px h-4 bg-gray-200 shrink-0" />
+
+          <Chip icon={<ListTodo size={11} />}     label="Total"       value={tasks.length}  color="text-gray-600"    bg="bg-gray-100"    />
+          <Chip icon={<Clock3 size={11} />}        label="Todo"        value={todo}           color="text-gray-500"    bg="bg-gray-50"     />
+          <Chip icon={<Zap size={11} />}           label="In Progress" value={inProgress}     color="text-indigo-600"  bg="bg-indigo-50"   />
+          <Chip icon={<CheckCircle2 size={11} />}  label="Done"        value={completed}      color="text-emerald-600" bg="bg-emerald-50"  />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function Chip({ icon, label, value, color, bg }: { icon: React.ReactNode; label: string; value: number; color: string; bg: string }) {
+  return (
+    <span className={`inline-flex items-center gap-1 px-2 py-1 rounded-lg text-[11px] font-semibold shrink-0 ${bg} ${color}`}>
+      {icon}<span className="font-bold">{value}</span>
+      <span className="font-medium opacity-75 hidden sm:inline">{label}</span>
+    </span>
+  );
+}
\ No newline at end of file
diff --git a/src/features/Tasks/v1/components/task/TaskRow.tsx b/src/features/Tasks/v1/components/task/TaskRow.tsx
new file mode 100644
index 0000000..a6bbe48
--- /dev/null
+++ b/src/features/Tasks/v1/components/task/TaskRow.tsx
@@ -0,0 +1,117 @@
+import { useNavigate } from "react-router-dom";
+import { Eye, Pencil, Trash2, Github, FileUp, Layers } from "lucide-react";
+import { formatDistanceToNow, isPast, parseISO, differenceInHours } from "date-fns";
+import StatusBadge from "../common/StatusBadge";
+import PriorityBadge from "../common/PriorityBadge";
+import { AvatarGroup } from "../common/Avatar";
+import { SUBMISSION_STATUS_CONFIG } from "../../constants/task.constants";
+import type { Task } from "../../Task.types";
+
+interface Props { task: Task; onDelete: (task: Task) => void; }
+
+const SUB_ICON: Record<string, React.ReactNode> = {
+  file: <FileUp size={11} />, github: <Github size={11} />, both: <Layers size={11} />,
+};
+const PRIORITY_BORDER: Record<string, string> = {
+  high: "border-l-red-500", medium: "border-l-amber-400", low: "border-l-sky-400",
+};
+
+export default function TaskRow({ task, onDelete }: Props) {
+  const navigate     = useNavigate();
+  const subStatusCfg = SUBMISSION_STATUS_CONFIG[task.submissionStatus];
+  const deadlineDt   = parseISO(task.deadline);
+  const isOverdue    = isPast(deadlineDt) && task.status !== "completed";
+  const isNear       = !isOverdue && differenceInHours(deadlineDt, new Date()) < 24;
+
+  return (
+    <tr onClick={() => navigate(`/org/tasks/${task.id}`)}
+      className={`group cursor-pointer border-b border-gray-100 border-l-4 ${PRIORITY_BORDER[task.priority]} hover:bg-indigo-50/40 transition-colors duration-100`}>
+
+      {/* Title */}
+      <td className="py-3 pr-4 pl-3 min-w-0 max-w-[280px]">
+        <div className="flex flex-col gap-0.5">
+          <span className="text-sm font-semibold text-gray-900 truncate group-hover:text-indigo-700 transition-colors">
+            {task.title}
+          </span>
+          <span className="text-xs text-gray-400 truncate">{task.description.slice(0, 60)}…</span>
+        </div>
+        {task.technologies && task.technologies.length > 0 && (
+          <div className="flex flex-wrap gap-1 mt-1.5">
+            {task.technologies.slice(0, 3).map(tech => (
+              <span key={tech.id} className={`inline-block text-[10px] font-semibold px-1.5 py-0.5 rounded-md ${tech.color}`}>
+                {tech.label}
+              </span>
+            ))}
+            {task.technologies.length > 3 && (
+              <span className="inline-block text-[10px] font-semibold px-1.5 py-0.5 rounded-md bg-gray-100 text-gray-500">
+                +{task.technologies.length - 3}
+              </span>
+            )}
+          </div>
+        )}
+        {task.isMandatory && (
+          <span className="mt-1 inline-block text-[10px] font-semibold text-purple-600 bg-purple-50 px-1.5 py-0.5 rounded-md">
+            Mandatory
+          </span>
+        )}
+      </td>
+
+      {/* Avatar group */}
+      <td className="py-3 pr-4">
+        <AvatarGroup
+          members={task.assignedTo}
+          max={3}
+          size="sm"
+        />
+      </td>
+
+      <td className="py-3 pr-4"><StatusBadge status={task.status} size="sm" /></td>
+      <td className="py-3 pr-4"><PriorityBadge priority={task.priority} size="sm" /></td>
+
+      {/* Deadline */}
+      <td className="py-3 pr-4">
+        <div className="flex flex-col gap-0.5">
+          <span className={`text-xs font-semibold ${isOverdue ? "text-red-500" : isNear ? "text-amber-500" : "text-gray-700"}`}>
+            {isOverdue ? `Overdue ${formatDistanceToNow(deadlineDt, { addSuffix: true })}` : formatDistanceToNow(deadlineDt, { addSuffix: true })}
+          </span>
+          <span className="text-[10px] text-gray-400">
+            {deadlineDt.toLocaleDateString("en-IN", { day: "2-digit", month: "short", year: "numeric" })}
+          </span>
+        </div>
+        {isOverdue && (
+          <span className="mt-0.5 inline-block text-[10px] font-bold text-red-500 bg-red-50 px-1.5 py-0.5 rounded-md animate-pulse">
+            OVERDUE
+          </span>
+        )}
+      </td>
+
+      {/* Submission */}
+      <td className="py-3 pr-4">
+        <div className="flex flex-col gap-1">
+          <span className={`inline-flex items-center gap-1 text-[10px] font-semibold px-2 py-0.5 rounded-full ${subStatusCfg.bg} ${subStatusCfg.text}`}>
+            {SUB_ICON[task.submissionType]}{subStatusCfg.label}
+          </span>
+          {task.points !== undefined && (
+            <span className="text-[10px] text-amber-600 font-semibold">★ {task.points} pts</span>
+          )}
+        </div>
+      </td>
+
+      {/* Actions */}
+      <td className="py-3 pr-3" onClick={e => e.stopPropagation()}>
+        <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-150">
+          <Btn icon={<Eye size={13}/>}    label="View"   onClick={() => navigate(`/org/tasks/${task.id}`)}       color="indigo" />
+          <Btn icon={<Pencil size={13}/>} label="Edit"   onClick={() => navigate(`/org/tasks/${task.id}/edit`)}  color="gray"   />
+          <Btn icon={<Trash2 size={13}/>} label="Delete" onClick={() => onDelete(task)}                          color="red"    />
+        </div>
+      </td>
+    </tr>
+  );
+}
+
+function Btn({ icon, label, onClick, color }: { icon: React.ReactNode; label: string; onClick: () => void; color: "indigo"|"gray"|"red" }) {
+  const cls = { indigo:"hover:bg-indigo-100 hover:text-indigo-700", gray:"hover:bg-gray-100 hover:text-gray-700", red:"hover:bg-red-100 hover:text-red-600" };
+  return (
+    <button title={label} onClick={onClick} className={`p-1.5 rounded-lg text-gray-400 transition-colors ${cls[color]}`}>{icon}</button>
+  );
+}
\ No newline at end of file
diff --git a/src/features/Tasks/v1/components/task/TaskTable.tsx b/src/features/Tasks/v1/components/task/TaskTable.tsx
new file mode 100644
index 0000000..fdf4546
--- /dev/null
+++ b/src/features/Tasks/v1/components/task/TaskTable.tsx
@@ -0,0 +1,130 @@
+import { useState } from "react";
+import { Plus, SearchX, ChevronLeft, ChevronRight } from "lucide-react";
+import TaskRow from "./TaskRow";
+import SkeletonLoader from "../common/SkeletonLoader";
+import EmptyState from "../common/EmptyState";
+import type { Task } from "../../Task.types";
+
+const PAGE_SIZE = 15;
+
+// No ghost th needed — border-l-4 on <tr> is part of the row, not a column
+const COLUMNS = [
+  { key: "title",      label: "Task",        width: "min-w-[220px]" },
+  { key: "assigned",   label: "Assigned To", width: "w-28"          },
+  { key: "status",     label: "Status",      width: "w-28"          },
+  { key: "priority",   label: "Priority",    width: "w-24"          },
+  { key: "deadline",   label: "Deadline",    width: "w-36"          },
+  { key: "submission", label: "Submission",  width: "w-36"          },
+  { key: "actions",    label: "Actions",     width: "w-24"          },
+];
+
+interface Props {
+  tasks: Task[];
+  isLoading: boolean;
+  onDelete: (task: Task) => void;
+  onCreateTask: () => void;
+  hasFilters: boolean;
+  onResetFilters: () => void;
+}
+
+export default function TaskTable({ tasks, isLoading, onDelete, onCreateTask, hasFilters, onResetFilters }: Props) {
+  const [page, setPage] = useState(1);
+  const totalPages = Math.ceil(tasks.length / PAGE_SIZE);
+  const paginated  = tasks.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);
+
+  if (isLoading) return <SkeletonLoader type="table" />;
+
+  if (tasks.length === 0) {
+    return hasFilters ? (
+      <EmptyState
+        variant="no-results"
+        title="No tasks match your filters"
+        description="Try adjusting your filters or search query."
+        action={
+          <button
+            onClick={onResetFilters}
+            className="flex items-center gap-1.5 px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-semibold rounded-xl transition"
+          >
+            <SearchX size={14} />
+            Clear Filters
+          </button>
+        }
+      />
+    ) : (
+      <EmptyState
+        variant="no-tasks"
+        title="No tasks yet"
+        description="Create the first task for this event."
+        action={
+          <button
+            onClick={onCreateTask}
+            className="flex items-center gap-1.5 px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 active:scale-95 text-white text-sm font-semibold rounded-xl transition-all shadow-sm shadow-indigo-200"
+          >
+            <Plus size={15} />
+            Create First Task
+          </button>
+        }
+      />
+    );
+  }
+
+  return (
+    <div className="w-full overflow-x-auto">
+      <table className="w-full border-collapse">
+        <thead className="sticky top-0 z-10 bg-gray-50 border-b border-gray-200">
+          <tr>
+            {COLUMNS.map((col) => (
+              <th
+                key={col.key}
+                className={`${col.width} px-3 py-2.5 text-left text-[10px] font-bold uppercase tracking-widest text-gray-400`}
+              >
+                {col.label}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {paginated.map((task) => (
+            <TaskRow key={task.id} task={task} onDelete={onDelete} />
+          ))}
+        </tbody>
+      </table>
+
+      <div className="border-t bg-gray-50 px-5 py-2.5 flex items-center justify-between">
+        <span className="text-xs text-gray-400">
+          {tasks.length} task{tasks.length !== 1 ? "s" : ""}
+        </span>
+
+        {totalPages > 1 && (
+          <div className="flex items-center gap-2">
+            <button
+              onClick={() => setPage((p) => Math.max(1, p - 1))}
+              disabled={page === 1}
+              className="p-1 rounded-lg border border-gray-200 text-gray-500 hover:bg-gray-100 disabled:opacity-40 disabled:cursor-not-allowed transition"
+            >
+              <ChevronLeft size={13} />
+            </button>
+            <span className="text-xs text-gray-500 font-medium">
+              {page} / {totalPages}
+            </span>
+            <button
+              onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
+              disabled={page === totalPages}
+              className="p-1 rounded-lg border border-gray-200 text-gray-500 hover:bg-gray-100 disabled:opacity-40 disabled:cursor-not-allowed transition"
+            >
+              <ChevronRight size={13} />
+            </button>
+          </div>
+        )}
+
+        <button
+          onClick={onCreateTask}
+          className="flex items-center gap-1 text-xs font-semibold text-indigo-600 hover:text-indigo-800 transition"
+        >
+          <Plus size={13} />
+          Add Task
+        </button>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/features/Tasks/v1/constants/task.constants.ts b/src/features/Tasks/v1/constants/task.constants.ts
new file mode 100644
index 0000000..663864e
--- /dev/null
+++ b/src/features/Tasks/v1/constants/task.constants.ts
@@ -0,0 +1,135 @@
+import type {
+  TaskFilters,
+  TaskPriority,
+  TaskStatus,
+  SubmissionStatus,
+  EventType,
+  ReviewDecision,
+} from "../Task.types";
+
+// ─── Storage ──────────────────────────────────────────────────────────────────
+export const SELECTED_EVENT_KEY = "commdesk_selected_event_id";
+
+// ─── Default filter state ─────────────────────────────────────────────────────
+export const DEFAULT_FILTERS: TaskFilters = {
+  status: "all",
+  priority: "all",
+  time: "all",
+  members: [],
+  search: "",
+};
+
+// ─── Priority ─────────────────────────────────────────────────────────────────
+export const PRIORITY_CONFIG: Record<
+  TaskPriority,
+  { label: string; borderClass: string; badgeBg: string; badgeText: string; dot: string }
+> = {
+  high: {
+    label: "High",
+    borderClass: "border-l-red-500",
+    badgeBg: "bg-red-50",
+    badgeText: "text-red-600",
+    dot: "bg-red-500",
+  },
+  medium: {
+    label: "Medium",
+    borderClass: "border-l-amber-400",
+    badgeBg: "bg-amber-50",
+    badgeText: "text-amber-600",
+    dot: "bg-amber-400",
+  },
+  low: {
+    label: "Low",
+    borderClass: "border-l-sky-400",
+    badgeBg: "bg-sky-50",
+    badgeText: "text-sky-600",
+    dot: "bg-sky-400",
+  },
+};
+
+// ─── Status ───────────────────────────────────────────────────────────────────
+export const STATUS_CONFIG: Record<
+  TaskStatus,
+  { label: string; bg: string; text: string; dot: string }
+> = {
+  todo: {
+    label: "Todo",
+    bg: "bg-gray-100",
+    text: "text-gray-600",
+    dot: "bg-gray-400",
+  },
+  "in-progress": {
+    label: "In Progress",
+    bg: "bg-indigo-50",
+    text: "text-indigo-600",
+    dot: "bg-indigo-500",
+  },
+  completed: {
+    label: "Completed",
+    bg: "bg-emerald-50",
+    text: "text-emerald-600",
+    dot: "bg-emerald-500",
+  },
+};
+
+// ─── Submission status ────────────────────────────────────────────────────────
+export const SUBMISSION_STATUS_CONFIG: Record<
+  SubmissionStatus,
+  { label: string; bg: string; text: string }
+> = {
+  "not-submitted": { label: "Not Submitted", bg: "bg-gray-100",    text: "text-gray-500" },
+  submitted:       { label: "Submitted",      bg: "bg-sky-50",      text: "text-sky-600"  },
+  reviewed:        { label: "Reviewed",       bg: "bg-emerald-50",  text: "text-emerald-600" },
+};
+
+// ─── Event type ───────────────────────────────────────────────────────────────
+export const EVENT_TYPE_CONFIG: Record<
+  EventType,
+  { label: string; bg: string; text: string; dot: string }
+> = {
+  hackathon: { label: "Hackathon", bg: "bg-rose-50",    text: "text-rose-600",    dot: "bg-rose-500"    },
+  workshop:  { label: "Workshop",  bg: "bg-violet-50",  text: "text-violet-600",  dot: "bg-violet-500"  },
+  internal:  { label: "Internal",  bg: "bg-sky-50",     text: "text-sky-600",     dot: "bg-sky-500"     },
+  community: { label: "Community", bg: "bg-emerald-50", text: "text-emerald-600", dot: "bg-emerald-500" },
+};
+
+// ─── Event status ─────────────────────────────────────────────────────────────
+export const EVENT_STATUS_CONFIG: Record<
+  "Live" | "Upcoming" | "Completed",
+  { bg: string; text: string; dot: string; pulse: boolean }
+> = {
+  Live:      { bg: "bg-emerald-50", text: "text-emerald-600", dot: "bg-emerald-500", pulse: true  },
+  Upcoming:  { bg: "bg-amber-50",   text: "text-amber-600",   dot: "bg-amber-400",   pulse: false },
+  Completed: { bg: "bg-gray-100",   text: "text-gray-500",    dot: "bg-gray-400",    pulse: false },
+};
+
+// ─── Review decision ──────────────────────────────────────────────────────────
+export const REVIEW_DECISION_CONFIG: Record<
+  ReviewDecision,
+  { label: string; bg: string; text: string; border: string }
+> = {
+  approved: { label: "Approved", bg: "bg-emerald-50", text: "text-emerald-700", border: "border-emerald-200" },
+  rejected: { label: "Rejected", bg: "bg-red-50",     text: "text-red-700",     border: "border-red-200"     },
+  pending:  { label: "Pending",  bg: "bg-amber-50",   text: "text-amber-700",   border: "border-amber-200"   },
+};
+
+// ─── Activity timeline ────────────────────────────────────────────────────────
+export const ACTIVITY_ICON: Record<string, string> = {
+  created:   "✦",
+  updated:   "↻",
+  submitted: "↑",
+  reviewed:  "✓",
+  commented: "◎",
+};
+
+export const ACTIVITY_COLOR: Record<string, string> = {
+  created:   "bg-indigo-100 text-indigo-600",
+  updated:   "bg-amber-100 text-amber-600",
+  submitted: "bg-sky-100 text-sky-600",
+  reviewed:  "bg-emerald-100 text-emerald-600",
+  commented: "bg-purple-100 text-purple-600",
+};
+
+// ─── Submission status colors (legacy alias) ──────────────────────────────────
+export const SUBMISSION_STATUS_COLORS = SUBMISSION_STATUS_CONFIG;
+export const ACTIVITY_ICONS = ACTIVITY_ICON;
\ No newline at end of file
diff --git a/src/features/Tasks/v1/constants/tech.constants.ts b/src/features/Tasks/v1/constants/tech.constants.ts
new file mode 100644
index 0000000..fdf5656
--- /dev/null
+++ b/src/features/Tasks/v1/constants/tech.constants.ts
@@ -0,0 +1,24 @@
+import type { TechTag } from "../Task.types";
+
+export const TECH_OPTIONS: TechTag[] = [
+  { id: "react",      label: "React",       color: "bg-sky-100 text-sky-700"         },
+  { id: "nextjs",     label: "Next.js",     color: "bg-gray-100 text-gray-700"       },
+  { id: "vue",        label: "Vue",         color: "bg-emerald-100 text-emerald-700" },
+  { id: "typescript", label: "TypeScript",  color: "bg-blue-100 text-blue-700"       },
+  { id: "nodejs",     label: "Node.js",     color: "bg-green-100 text-green-700"     },
+  { id: "python",     label: "Python",      color: "bg-yellow-100 text-yellow-700"   },
+  { id: "rust",       label: "Rust",        color: "bg-orange-100 text-orange-700"   },
+  { id: "go",         label: "Go",          color: "bg-cyan-100 text-cyan-700"       },
+  { id: "solidity",   label: "Solidity",    color: "bg-purple-100 text-purple-700"   },
+  { id: "tailwind",   label: "Tailwind",    color: "bg-teal-100 text-teal-700"       },
+  { id: "postgres",   label: "PostgreSQL",  color: "bg-indigo-100 text-indigo-700"   },
+  { id: "mongodb",    label: "MongoDB",     color: "bg-lime-100 text-lime-700"       },
+  { id: "docker",     label: "Docker",      color: "bg-blue-100 text-blue-800"       },
+  { id: "graphql",    label: "GraphQL",     color: "bg-pink-100 text-pink-700"       },
+  { id: "figma",      label: "Figma",       color: "bg-violet-100 text-violet-700"   },
+  { id: "github",     label: "GitHub",      color: "bg-gray-200 text-gray-800"       },
+  { id: "aws",        label: "AWS",         color: "bg-amber-100 text-amber-700"     },
+  { id: "flutter",    label: "Flutter",     color: "bg-sky-100 text-sky-800"         },
+  { id: "swift",      label: "Swift",       color: "bg-red-100 text-red-700"         },
+  { id: "kotlin",     label: "Kotlin",      color: "bg-purple-100 text-purple-800"   },
+];
\ No newline at end of file
diff --git a/src/features/Tasks/v1/hooks/useComments.ts b/src/features/Tasks/v1/hooks/useComments.ts
new file mode 100644
index 0000000..42a2719
--- /dev/null
+++ b/src/features/Tasks/v1/hooks/useComments.ts
@@ -0,0 +1,38 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { mockComments } from "../mock/taskMockData";
+import type { TaskComment } from "../Task.types";
+
+let store: Record<string, TaskComment[]> = { ...mockComments };
+
+export function useComments(taskId: string | undefined) {
+  return useQuery<TaskComment[]>({
+    queryKey: ["comments", taskId],
+    queryFn: async () => {
+      await new Promise((r) => setTimeout(r, 200));
+      return store[taskId ?? ""] ?? [];
+    },
+    enabled: !!taskId,
+  });
+}
+
+export function useAddComment() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: async ({ taskId, text }: { taskId: string; text: string }): Promise<TaskComment> => {
+      await new Promise((r) => setTimeout(r, 300));
+      const comment: TaskComment = {
+        id: `cmt-${Date.now()}`,
+        taskId,
+        author: "Organizer",
+        avatar: `https://ui-avatars.com/api/?name=Organizer&background=6366f1&color=fff&size=96&bold=true&rounded=true`,
+        text,
+        createdAt: new Date().toISOString(),
+      };
+      store = { ...store, [taskId]: [...(store[taskId] ?? []), comment] };
+      return comment;
+    },
+    onSuccess: (comment) => {
+      qc.invalidateQueries({ queryKey: ["comments", comment.taskId] });
+    },
+  });
+}
diff --git a/src/features/Tasks/v1/hooks/useEvents.ts b/src/features/Tasks/v1/hooks/useEvents.ts
new file mode 100644
index 0000000..c3de8ad
--- /dev/null
+++ b/src/features/Tasks/v1/hooks/useEvents.ts
@@ -0,0 +1,16 @@
+import { useQuery } from "@tanstack/react-query";
+import { mockEvents } from "../mock/taskMockData";
+import type { EventOption } from "../Task.types";
+
+const fetchEvents = async (): Promise<EventOption[]> => {
+  await new Promise((r) => setTimeout(r, 300));
+  return mockEvents;
+};
+
+export function useEvents() {
+  return useQuery<EventOption[]>({
+    queryKey: ["events"],
+    queryFn: fetchEvents,
+    staleTime: 5 * 60 * 1000,
+  });
+}
\ No newline at end of file
diff --git a/src/features/Tasks/v1/hooks/useSubmissions.ts b/src/features/Tasks/v1/hooks/useSubmissions.ts
new file mode 100644
index 0000000..308e82b
--- /dev/null
+++ b/src/features/Tasks/v1/hooks/useSubmissions.ts
@@ -0,0 +1,52 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { mockSubmissions } from "../mock/taskMockData";
+import type { Submission, ReviewSubmissionPayload } from "../Task.types";
+
+let store = [...mockSubmissions];
+
+export function useSubmissions(taskId: string | undefined) {
+  return useQuery<Submission[]>({
+    queryKey: ["submissions", taskId],
+    queryFn: async () => {
+      await new Promise((r) => setTimeout(r, 350));
+      return store.filter((s) => s.taskId === taskId);
+    },
+    enabled: !!taskId,
+  });
+}
+
+export function useReviewSubmission() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: async ({
+      submissionId,
+      payload,
+    }: {
+      submissionId: string;
+      payload: ReviewSubmissionPayload;
+    }): Promise<Submission> => {
+      await new Promise((r) => setTimeout(r, 600));
+      store = store.map((s) =>
+        s.id === submissionId
+          ? {
+              ...s,
+              review: {
+                decision: payload.decision,
+                score: payload.score,
+                feedback: payload.feedback,
+                reviewedBy: "Organizer",
+                reviewedAt: new Date().toISOString(),
+              },
+            }
+          : s
+      );
+      const updated = store.find((s) => s.id === submissionId);
+      if (!updated) throw new Error("Submission not found");
+      return updated;
+    },
+    onSuccess: (updated) => {
+      qc.invalidateQueries({ queryKey: ["submissions", updated.taskId] });
+      qc.invalidateQueries({ queryKey: ["task", updated.taskId] });
+    },
+  });
+}
\ No newline at end of file
diff --git a/src/features/Tasks/v1/hooks/useTaskDetail.ts b/src/features/Tasks/v1/hooks/useTaskDetail.ts
new file mode 100644
index 0000000..4069ea8
--- /dev/null
+++ b/src/features/Tasks/v1/hooks/useTaskDetail.ts
@@ -0,0 +1,30 @@
+import { useQuery } from "@tanstack/react-query";
+import { taskStore } from "../mock/taskStore";
+import { mockActivity } from "../mock/taskMockData";
+import type { Task, ActivityEvent } from "../Task.types";
+
+export function useTaskDetail(taskId: string | undefined) {
+  return useQuery<Task>({
+    queryKey: ["task", taskId],
+    queryFn: async () => {
+      await new Promise((r) => setTimeout(r, 300));
+      // Reads from shared store — sees tasks created in useTasks
+      const task = taskStore.getById(taskId ?? "");
+      if (!task) throw new Error("Task not found");
+      return task;
+    },
+    enabled: !!taskId,
+    retry: false,
+  });
+}
+
+export function useTaskActivity(taskId: string | undefined) {
+  return useQuery<ActivityEvent[]>({
+    queryKey: ["task-activity", taskId],
+    queryFn: async () => {
+      await new Promise((r) => setTimeout(r, 200));
+      return (mockActivity[taskId ?? ""] ?? []).slice().reverse();
+    },
+    enabled: !!taskId,
+  });
+}
\ No newline at end of file
diff --git a/src/features/Tasks/v1/hooks/useTasks.ts b/src/features/Tasks/v1/hooks/useTasks.ts
new file mode 100644
index 0000000..7b23019
--- /dev/null
+++ b/src/features/Tasks/v1/hooks/useTasks.ts
@@ -0,0 +1,124 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { isFuture, isPast, parseISO } from "date-fns";
+import { taskStore } from "../mock/taskStore";
+import { mockMembers } from "../mock/taskMockData";
+import type { Task, TaskFilters, CreateTaskPayload, UpdateTaskPayload } from "../Task.types";
+
+function matchesSearch(task: Task, q: string): boolean {
+  const query = q.toLowerCase().trim();
+  if (!query) return true;
+
+  // Search across: title, description, tech tags, member names, priority, status, submission type
+  const fields = [
+    task.title,
+    task.description,
+    task.priority,
+    task.status,
+    task.submissionType,
+    ...(task.technologies ?? []).map(t => t.label),
+    ...task.assignedTo.map(m => m.name),
+    ...task.assignedTo.map(m => m.role),
+    task.isMandatory ? "mandatory" : "",
+    task.points !== undefined ? `${task.points} pts` : "",
+  ];
+
+  return fields.some(f => f.toLowerCase().includes(query));
+}
+
+function applyFilters(tasks: Task[], filters: TaskFilters): Task[] {
+  return tasks.filter((t) => {
+    if (filters.status !== "all" && t.status !== filters.status) return false;
+    if (filters.priority !== "all" && t.priority !== filters.priority) return false;
+    if (filters.time === "upcoming"  && !isFuture(parseISO(t.deadline))) return false;
+    if (filters.time === "past"      && !isPast(parseISO(t.deadline)))   return false;
+    if (filters.time === "completed" && t.status !== "completed")        return false;
+    if (filters.members.length > 0) {
+      const ids = new Set(t.assignedTo.map((m) => m.id));
+      if (!filters.members.some((id) => ids.has(id))) return false;
+    }
+    if (!matchesSearch(t, filters.search)) return false;
+    return true;
+  });
+}
+
+export function useTasks(eventId: string | null, filters: TaskFilters) {
+  return useQuery<Task[]>({
+    queryKey: ["tasks", eventId, filters],
+    queryFn: async () => {
+      await new Promise((r) => setTimeout(r, 600));
+      if (!eventId) return [];
+      return applyFilters(taskStore.getAll().filter((t) => t.eventId === eventId), filters);
+    },
+    enabled: !!eventId,
+  });
+}
+
+export function useCreateTask() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: async (payload: CreateTaskPayload): Promise<Task> => {
+      await new Promise((r) => setTimeout(r, 500));
+      const resolvedMembers = payload.assignedTo
+        .map((id) => mockMembers.find((m) => m.id === id))
+        .filter(Boolean) as typeof mockMembers;
+
+      const newTask: Task = {
+        id: `task-${Date.now()}`,
+        title: payload.title,
+        description: payload.description,
+        eventId: payload.eventId,
+        status: "todo",
+        priority: payload.priority,
+        deadline: payload.deadline,
+        assignedTo: resolvedMembers,
+        submissionType: payload.submissionType,
+        submissionStatus: "not-submitted",
+        isMandatory: payload.isMandatory,
+        points: payload.points,
+        allowLateSubmission: payload.allowLateSubmission,
+        maxSubmissions: payload.maxSubmissions,
+        technologies: payload.technologies ?? [],
+        createdAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString(),
+        createdBy: "Organizer",
+      };
+      taskStore.add(newTask);
+      return newTask;
+    },
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["tasks"] }),
+  });
+}
+
+export function useUpdateTask() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: async ({ id, payload }: { id: string; payload: UpdateTaskPayload }): Promise<Task> => {
+      await new Promise((r) => setTimeout(r, 400));
+      const patch: Partial<Task> = { ...payload };
+      if (payload.assignedTo) {
+        patch.assignedTo = payload.assignedTo
+          .map((mid) => mockMembers.find((m) => m.id === mid))
+          .filter(Boolean) as typeof mockMembers;
+      }
+      taskStore.update(id, patch);
+      const updated = taskStore.getById(id);
+      if (!updated) throw new Error("Task not found");
+      return updated;
+    },
+    onSuccess: (_, { id }) => {
+      qc.invalidateQueries({ queryKey: ["tasks"] });
+      qc.invalidateQueries({ queryKey: ["task", id] });
+    },
+  });
+}
+
+export function useDeleteTask() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: async (id: string): Promise<void> => {
+      await new Promise((r) => setTimeout(r, 300));
+      taskStore.remove(id);
+    },
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["tasks"] }),
+  });
+}
\ No newline at end of file
diff --git a/src/features/Tasks/v1/index.ts b/src/features/Tasks/v1/index.ts
new file mode 100644
index 0000000..5555be1
--- /dev/null
+++ b/src/features/Tasks/v1/index.ts
@@ -0,0 +1,37 @@
+// ─── Pages ───────────────────────────────────────────────────────────────────
+export { default as TaskManagementPage } from "./pages/TaskManagementPage";
+export { default as TaskDetailPage }     from "./pages/TaskDetailPage";
+export { default as CreateTaskPage }     from "./pages/CreateTaskPage";
+export { default as EditTaskPage }       from "./pages/EditTaskPage";
+
+// ─── Hooks ───────────────────────────────────────────────────────────────────
+export { useTasks, useCreateTask, useUpdateTask, useDeleteTask } from "./hooks/useTasks";
+export { useTaskDetail, useTaskActivity }                        from "./hooks/useTaskDetail";
+export { useSubmissions, useReviewSubmission }                   from "./hooks/useSubmissions";
+export { useEvents }                                             from "./hooks/useEvents";
+
+// ─── Common components ────────────────────────────────────────────────────────
+export { default as StatusBadge }    from "./components/common/StatusBadge";
+export { default as PriorityBadge }  from "./components/common/PriorityBadge";
+export { default as EmptyState }     from "./components/common/EmptyState";
+export { default as SkeletonLoader } from "./components/common/SkeletonLoader";
+export { default as ConfirmModal }   from "./components/common/ConfirmModal";
+export { ToastContainer, useToast }  from "./components/common/ToastNotification";
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+export type {
+  Task, TaskStatus, TaskPriority, TaskFilters,
+  EventOption, EventType, MemberOption,
+  Submission, SubmissionReview, ReviewDecision,
+  ActivityEvent, CreateTaskPayload, UpdateTaskPayload,
+  ReviewSubmissionPayload,
+} from "./Task.types";
+
+// ─── Constants ────────────────────────────────────────────────────────────────
+export {
+  SELECTED_EVENT_KEY, DEFAULT_FILTERS,
+  PRIORITY_CONFIG, STATUS_CONFIG,
+  SUBMISSION_STATUS_CONFIG, EVENT_TYPE_CONFIG,
+  EVENT_STATUS_CONFIG, REVIEW_DECISION_CONFIG,
+  ACTIVITY_ICON, ACTIVITY_COLOR,
+} from "./constants/task.constants";
\ No newline at end of file
diff --git a/src/features/Tasks/v1/mock/taskMockData.ts b/src/features/Tasks/v1/mock/taskMockData.ts
new file mode 100644
index 0000000..3fab4b7
--- /dev/null
+++ b/src/features/Tasks/v1/mock/taskMockData.ts
@@ -0,0 +1,204 @@
+import type {
+  EventOption, MemberOption, Task, Submission, ActivityEvent, TaskComment,
+} from "../Task.types";
+
+// ─── Avatar helper — initials-based, always loads ────────────────────────────
+const av = (name: string, bg: string) =>
+  `https://ui-avatars.com/api/?name=${encodeURIComponent(name)}&background=${bg}&color=fff&size=96&bold=true&rounded=true`;
+
+// ─── Mock Events ──────────────────────────────────────────────────────────────
+export const mockEvents: EventOption[] = [
+  { id: "evt-001", name: "Summer AI Hackathon 2026", subtitle: "Sponsored by TechCorp",   type: "hackathon", status: "Live",      startDate: "2026-06-15", endDate: "2026-06-17" },
+  { id: "evt-002", name: "Web3 Builders Sprint",     subtitle: "Internal Team Event",     type: "internal",  status: "Upcoming",  startDate: "2026-07-01", endDate: "2026-07-03" },
+  { id: "evt-003", name: "Global Open Source Hack",  subtitle: "Public Event",            type: "hackathon", status: "Completed", startDate: "2026-05-10", endDate: "2026-05-12" },
+  { id: "evt-004", name: "Speed Code Blitz",         subtitle: "Internal Team Event",     type: "internal",  status: "Completed", startDate: "2026-04-22", endDate: "2026-04-22" },
+  { id: "evt-005", name: "Design Systems Workshop",  subtitle: "Design Department",       type: "workshop",  status: "Upcoming",  startDate: "2026-08-05", endDate: "2026-08-07" },
+  { id: "evt-006", name: "Community Growth Sprint",  subtitle: "Open to all members",     type: "community", status: "Live",      startDate: "2026-05-01", endDate: "2026-05-31" },
+];
+
+// ─── Mock Members ─────────────────────────────────────────────────────────────
+export const mockMembers: MemberOption[] = [
+  { id: "mem-001", name: "Arjun Mehta",   avatar: av("Arjun Mehta",   "6366f1"), role: "Frontend Developer",   email: "arjun@commdesk.io"  },
+  { id: "mem-002", name: "Priya Sharma",  avatar: av("Priya Sharma",  "ec4899"), role: "UI/UX Designer",       email: "priya@commdesk.io"  },
+  { id: "mem-003", name: "Rohit Verma",   avatar: av("Rohit Verma",   "f97316"), role: "Backend Developer",    email: "rohit@commdesk.io"  },
+  { id: "mem-004", name: "Sneha Patel",   avatar: av("Sneha Patel",   "10b981"), role: "Full Stack Developer", email: "sneha@commdesk.io"  },
+  { id: "mem-005", name: "Kiran Joshi",   avatar: av("Kiran Joshi",   "3b82f6"), role: "DevOps Engineer",      email: "kiran@commdesk.io"  },
+  { id: "mem-006", name: "Ananya Reddy",  avatar: av("Ananya Reddy",  "8b5cf6"), role: "Data Scientist",       email: "ananya@commdesk.io" },
+];
+
+// ─── Mock Tasks ───────────────────────────────────────────────────────────────
+export const mockTasks: Task[] = [
+  {
+    id: "task-001", eventId: "evt-001",
+    title: "Build Landing Page for AI Showcase",
+    description: "Create a responsive landing page that showcases the AI hackathon projects. Include hero section, project gallery, and registration CTA.",
+    status: "in-progress", priority: "high", deadline: "2026-06-10T23:59:00",
+    assignedTo: [mockMembers[0], mockMembers[1]],
+    submissionType: "github", submissionStatus: "submitted",
+    isMandatory: true, points: 100, allowLateSubmission: false,
+    technologies: [
+      { id: "react", label: "React", color: "bg-sky-100 text-sky-700" },
+      { id: "typescript", label: "TypeScript", color: "bg-blue-100 text-blue-700" },
+      { id: "tailwind", label: "Tailwind", color: "bg-teal-100 text-teal-700" },
+    ],
+    createdAt: "2026-05-01T10:00:00", updatedAt: "2026-05-07T14:30:00", createdBy: "Organizer",
+  },
+  {
+    id: "task-002", eventId: "evt-001",
+    title: "Design Brand Identity Kit",
+    description: "Create complete brand guidelines including logo variations, color palette, typography, and usage examples for the hackathon.",
+    status: "todo", priority: "medium", deadline: "2026-05-03T23:59:00",
+    assignedTo: [mockMembers[1]],
+    submissionType: "file", submissionStatus: "not-submitted",
+    isMandatory: true, points: 80, allowLateSubmission: true,
+    technologies: [
+      { id: "figma", label: "Figma", color: "bg-violet-100 text-violet-700" },
+    ],
+    createdAt: "2026-05-02T09:00:00", updatedAt: "2026-05-02T09:00:00", createdBy: "Organizer",
+  },
+  {
+    id: "task-003", eventId: "evt-001",
+    title: "Set Up CI/CD Pipeline",
+    description: "Configure GitHub Actions for automated testing and deployment. Include staging and production environments.",
+    status: "completed", priority: "high", deadline: "2026-05-28T23:59:00",
+    assignedTo: [mockMembers[2], mockMembers[4]],
+    submissionType: "github", submissionStatus: "reviewed",
+    isMandatory: true, points: 120, allowLateSubmission: false,
+    technologies: [
+      { id: "docker", label: "Docker", color: "bg-blue-100 text-blue-800" },
+      { id: "github", label: "GitHub", color: "bg-gray-200 text-gray-800" },
+      { id: "nodejs", label: "Node.js", color: "bg-green-100 text-green-700" },
+    ],
+    createdAt: "2026-04-28T11:00:00", updatedAt: "2026-05-27T16:00:00", createdBy: "Organizer",
+  },
+  {
+    id: "task-004", eventId: "evt-001",
+    title: "Participant Data Analytics Dashboard",
+    description: "Build a real-time analytics dashboard showing participant statistics, submission rates, and leaderboard.",
+    status: "todo", priority: "low", deadline: "2026-06-14T23:59:00",
+    assignedTo: [mockMembers[3], mockMembers[5]],
+    submissionType: "both", submissionStatus: "not-submitted",
+    isMandatory: false, points: 150, allowLateSubmission: true,
+    technologies: [
+      { id: "python", label: "Python", color: "bg-yellow-100 text-yellow-700" },
+      { id: "postgres", label: "PostgreSQL", color: "bg-indigo-100 text-indigo-700" },
+    ],
+    createdAt: "2026-05-05T13:00:00", updatedAt: "2026-05-05T13:00:00", createdBy: "Organizer",
+  },
+  {
+    id: "task-005", eventId: "evt-001",
+    title: "Write Technical Documentation",
+    description: "Document the API endpoints, system architecture, and developer setup guide for the hackathon platform.",
+    status: "in-progress", priority: "medium", deadline: "2026-05-05T23:59:00",
+    assignedTo: [mockMembers[0], mockMembers[2]],
+    submissionType: "file", submissionStatus: "not-submitted",
+    isMandatory: false, allowLateSubmission: true,
+    technologies: [],
+    createdAt: "2026-05-03T12:00:00", updatedAt: "2026-05-06T10:00:00", createdBy: "Organizer",
+  },
+  {
+    id: "task-006", eventId: "evt-002",
+    title: "Smart Contract Development",
+    description: "Build and deploy ERC-20 token contracts on test network.",
+    status: "todo", priority: "high", deadline: "2026-06-28T23:59:00",
+    assignedTo: [mockMembers[2]],
+    submissionType: "github", submissionStatus: "not-submitted",
+    isMandatory: true, points: 200, allowLateSubmission: false,
+    technologies: [{ id: "solidity", label: "Solidity", color: "bg-purple-100 text-purple-700" }],
+    createdAt: "2026-05-10T09:00:00", updatedAt: "2026-05-10T09:00:00", createdBy: "Organizer",
+  },
+  {
+    id: "task-007", eventId: "evt-002",
+    title: "DApp Frontend Integration",
+    description: "Connect React frontend with Metamask and smart contracts.",
+    status: "todo", priority: "high", deadline: "2026-06-30T23:59:00",
+    assignedTo: [mockMembers[0], mockMembers[3]],
+    submissionType: "both", submissionStatus: "not-submitted",
+    isMandatory: true, allowLateSubmission: false,
+    technologies: [
+      { id: "react", label: "React", color: "bg-sky-100 text-sky-700" },
+      { id: "solidity", label: "Solidity", color: "bg-purple-100 text-purple-700" },
+    ],
+    createdAt: "2026-05-10T10:00:00", updatedAt: "2026-05-10T10:00:00", createdBy: "Organizer",
+  },
+  {
+    id: "task-008", eventId: "evt-003",
+    title: "Open Source Contribution Report",
+    description: "Submit PRs to at least 3 open source repositories.",
+    status: "completed", priority: "medium", deadline: "2026-05-11T23:59:00",
+    assignedTo: [mockMembers[1], mockMembers[4]],
+    submissionType: "github", submissionStatus: "reviewed",
+    isMandatory: true, points: 100, allowLateSubmission: false,
+    technologies: [{ id: "github", label: "GitHub", color: "bg-gray-200 text-gray-800" }],
+    createdAt: "2026-04-30T08:00:00", updatedAt: "2026-05-12T14:00:00", createdBy: "Organizer",
+  },
+];
+
+// ─── Mock Submissions ─────────────────────────────────────────────────────────
+export const mockSubmissions: Submission[] = [
+  {
+    id: "sub-001", taskId: "task-001", submittedBy: mockMembers[0],
+    githubUrl: "https://github.com/arjun/ai-landing-page",
+    notes: "Completed responsive design with animations. Mobile tested.",
+    submittedAt: "2026-06-08T15:30:00",
+    review: { decision: "approved", score: 92, feedback: "Excellent work! Clean code and great animations.", reviewedBy: "Organizer", reviewedAt: "2026-06-09T10:00:00" },
+  },
+  {
+    id: "sub-002", taskId: "task-001", submittedBy: mockMembers[1],
+    githubUrl: "https://github.com/priya/ai-landing-page-designs",
+    notes: "Added Figma components and updated CSS variables.",
+    submittedAt: "2026-06-09T11:00:00",
+  },
+  {
+    id: "sub-003", taskId: "task-003", submittedBy: mockMembers[2],
+    githubUrl: "https://github.com/rohit/hackathon-cicd",
+    notes: "Set up GitHub Actions with matrix testing on Node 18 & 20.",
+    submittedAt: "2026-05-27T14:00:00",
+    review: { decision: "approved", score: 98, feedback: "Perfect pipeline setup.", reviewedBy: "Organizer", reviewedAt: "2026-05-28T09:00:00" },
+  },
+];
+
+// ─── Mock Activity ────────────────────────────────────────────────────────────
+export const mockActivity: Record<string, ActivityEvent[]> = {
+  "task-001": [
+    { id: "act-001", type: "created",   actor: "Organizer",   description: "Task created and assigned to Arjun & Priya",      timestamp: "2026-05-01T10:00:00" },
+    { id: "act-002", type: "updated",   actor: "Arjun Mehta", description: "Status changed from Todo → In Progress",          timestamp: "2026-05-15T09:30:00" },
+    { id: "act-003", type: "submitted", actor: "Arjun Mehta", description: "Submitted GitHub repository link",                timestamp: "2026-06-08T15:30:00" },
+    { id: "act-004", type: "reviewed",  actor: "Organizer",   description: "Submission approved · Score: 92/100",             timestamp: "2026-06-09T10:00:00" },
+    { id: "act-005", type: "submitted", actor: "Priya Sharma", description: "Submitted design assets",                       timestamp: "2026-06-09T11:00:00" },
+  ],
+  "task-003": [
+    { id: "act-006", type: "created",   actor: "Organizer",   description: "Task created and assigned to Rohit & Kiran",     timestamp: "2026-04-28T11:00:00" },
+    { id: "act-007", type: "submitted", actor: "Rohit Verma", description: "Submitted CI/CD pipeline implementation",        timestamp: "2026-05-27T14:00:00" },
+    { id: "act-008", type: "reviewed",  actor: "Organizer",   description: "Submission approved · Score: 98/100",            timestamp: "2026-05-28T09:00:00" },
+  ],
+};
+
+// ─── Mock Comments ────────────────────────────────────────────────────────────
+export const mockComments: Record<string, TaskComment[]> = {
+  "task-001": [
+    {
+      id: "cmt-001", taskId: "task-001",
+      author: "Organizer",
+      avatar: av("Organizer", "6366f1"),
+      text: "Please make sure the hero section is mobile-first.",
+      createdAt: "2026-05-02T10:00:00",
+    },
+    {
+      id: "cmt-002", taskId: "task-001",
+      author: "Arjun Mehta",
+      avatar: av("Arjun Mehta", "6366f1"),
+      text: "Got it! I'll start with the mobile layout and scale up.",
+      createdAt: "2026-05-02T11:30:00",
+    },
+  ],
+  "task-003": [
+    {
+      id: "cmt-003", taskId: "task-003",
+      author: "Organizer",
+      avatar: av("Organizer", "6366f1"),
+      text: "Make sure the pipeline covers both staging and production environments.",
+      createdAt: "2026-04-29T09:00:00",
+    },
+  ],
+};
\ No newline at end of file
diff --git a/src/features/Tasks/v1/mock/taskStore.ts b/src/features/Tasks/v1/mock/taskStore.ts
new file mode 100644
index 0000000..b574dfa
--- /dev/null
+++ b/src/features/Tasks/v1/mock/taskStore.ts
@@ -0,0 +1,20 @@
+// ─── Shared in-memory store ───────────────────────────────────────────────────
+// Both useTasks and useTaskDetail import from here so they always read/write
+// the same array. Without this, creating a task in useTasks is invisible to
+// useTaskDetail because they each had their own copy of the array.
+
+import { mockTasks } from "./taskMockData";
+import type { Task } from "../Task.types";
+
+let store: Task[] = [...mockTasks];
+
+export const taskStore = {
+  getAll: ()                  => store,
+  getById: (id: string)       => store.find((t) => t.id === id),
+  add: (task: Task)           => { store = [task, ...store]; },
+  update: (id: string, patch: Partial<Task>) => {
+    store = store.map((t) => t.id === id ? { ...t, ...patch, updatedAt: new Date().toISOString() } : t);
+  },
+  remove: (id: string)        => { store = store.filter((t) => t.id !== id); },
+  reset: ()                   => { store = [...mockTasks]; },
+};
\ No newline at end of file
diff --git a/src/features/Tasks/v1/pages/CreateTaskPage.tsx b/src/features/Tasks/v1/pages/CreateTaskPage.tsx
new file mode 100644
index 0000000..b90de9c
--- /dev/null
+++ b/src/features/Tasks/v1/pages/CreateTaskPage.tsx
@@ -0,0 +1,33 @@
+import { useNavigate } from "react-router-dom";
+import { ArrowLeft, Plus } from "lucide-react";
+import TaskForm from "../components/task/TaskForm";
+
+export default function CreateTaskPage() {
+  const navigate = useNavigate();
+
+  return (
+    <div className="w-full min-h-screen bg-[#F5F5F5] flex flex-col">
+      <div className="bg-white border-b px-6 py-4 flex items-center gap-3">
+        <button
+          onClick={() => navigate(-1)}
+          className="p-2 rounded-xl text-gray-400 hover:bg-gray-100 hover:text-gray-700 transition"
+          aria-label="Go back"
+        >
+          <ArrowLeft size={18} />
+        </button>
+        <div className="flex items-center gap-2.5">
+          <div className="w-8 h-8 rounded-xl bg-indigo-600 flex items-center justify-center">
+            <Plus size={16} className="text-white" />
+          </div>
+          <div>
+            <h1 className="text-base font-bold text-gray-900">Create Task</h1>
+            <p className="text-xs text-gray-400">Add a new task to an event</p>
+          </div>
+        </div>
+      </div>
+      <div className="flex-1 overflow-auto">
+        <TaskForm mode="create" />
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/features/Tasks/v1/pages/EditTaskPage.tsx b/src/features/Tasks/v1/pages/EditTaskPage.tsx
new file mode 100644
index 0000000..4cdfdc1
--- /dev/null
+++ b/src/features/Tasks/v1/pages/EditTaskPage.tsx
@@ -0,0 +1,55 @@
+import { useParams, useNavigate } from "react-router-dom";
+import { ArrowLeft, Pencil } from "lucide-react";
+import { useTaskDetail } from "../hooks/useTaskDetail";
+import TaskForm from "../components/task/TaskForm";
+import SkeletonLoader from "../components/common/SkeletonLoader";
+
+export default function EditTaskPage() {
+  const { taskId } = useParams<{ taskId: string }>();
+  const navigate   = useNavigate();
+  const { data: task, isLoading, isError } = useTaskDetail(taskId);
+
+  return (
+    <div className="w-full min-h-screen bg-[#F5F5F5] flex flex-col">
+      <div className="bg-white border-b px-6 py-4 flex items-center gap-3">
+        <button
+          onClick={() => navigate(-1)}
+          className="p-2 rounded-xl text-gray-400 hover:bg-gray-100 hover:text-gray-700 transition"
+        >
+          <ArrowLeft size={18} />
+        </button>
+        <div className="flex items-center gap-2.5">
+          <div className="w-8 h-8 rounded-xl bg-amber-500 flex items-center justify-center">
+            <Pencil size={15} className="text-white" />
+          </div>
+          <div>
+            <h1 className="text-base font-bold text-gray-900">Edit Task</h1>
+            <p className="text-xs text-gray-400 truncate max-w-[280px]">
+              {task?.title ?? "Loading…"}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-auto">
+        {isLoading ? (
+          <SkeletonLoader type="form" />
+        ) : isError || !task ? (
+          <div className="flex items-center justify-center py-20 text-center">
+            <div>
+              <p className="text-gray-500 font-semibold">Task not found.</p>
+              <button
+                onClick={() => navigate("/org/tasks")}
+                className="mt-4 px-5 py-2.5 bg-indigo-600 text-white rounded-xl text-sm font-semibold hover:bg-indigo-700 transition"
+              >
+                Back to Tasks
+              </button>
+            </div>
+          </div>
+        ) : (
+          <TaskForm mode="edit" task={task} />
+        )}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/features/Tasks/v1/pages/TaskDetailPage.tsx b/src/features/Tasks/v1/pages/TaskDetailPage.tsx
new file mode 100644
index 0000000..e8d8489
--- /dev/null
+++ b/src/features/Tasks/v1/pages/TaskDetailPage.tsx
@@ -0,0 +1,424 @@
+import { useState } from "react";
+import { useParams, useNavigate, Link } from "react-router-dom";
+import {
+  ArrowLeft, Pencil, Trash2, CalendarDays, Users, Flag,
+  UploadCloud, Star, Clock, Activity, ChevronRight,
+} from "lucide-react";
+import { formatDistanceToNow, format, isPast, parseISO } from "date-fns";
+import { useTaskDetail, useTaskActivity } from "../hooks/useTaskDetail";
+import { useSubmissions } from "../hooks/useSubmissions";
+import { useDeleteTask , useUpdateTask } from "../hooks/useTasks";
+import { useEvents } from "../hooks/useEvents";
+import SkeletonLoader from "../components/common/SkeletonLoader";
+import Avatar from "../components/common/Avatar";
+import StatusBadge from "../components/common/StatusBadge";
+import PriorityBadge from "../components/common/PriorityBadge";
+import SubmissionList from "../components/submission/SubmissionList";
+import ReviewPanel from "../components/submission/ReviewPanel";
+import ConfirmModal from "../components/common/ConfirmModal";
+import CommentsSection from "../components/common/CommentsSection";
+import { ToastContainer, useToast } from "../components/common/ToastNotification";
+import {
+  SUBMISSION_STATUS_CONFIG,
+  ACTIVITY_ICON,
+  ACTIVITY_COLOR,
+} from "../constants/task.constants";
+
+export default function TaskDetailPage() {
+  const { taskId } = useParams<{ taskId: string }>();
+  const navigate   = useNavigate();
+  const { toasts, addToast, dismiss } = useToast();
+
+  const { data: task, isLoading, isError } = useTaskDetail(taskId);
+  const { data: submissions = [], isLoading: subLoading } = useSubmissions(taskId);
+  const { data: activity = [] }  = useTaskActivity(taskId);
+  const { data: events = [] }    = useEvents();
+  const deleteTask               = useDeleteTask();
+  const updateTask               = useUpdateTask();
+  const [activeTab, setActiveTab]                     = useState<"submissions" | "activity" | "comments">("submissions");
+  const [reviewingSubmissionId, setReviewingSubmissionId] = useState<string | null>(null);
+  const [showDeleteModal, setShowDeleteModal]         = useState(false);
+
+  const eventName   = events.find((e) => e.id === task?.eventId)?.name;
+  const subCfg      = task ? SUBMISSION_STATUS_CONFIG[task.submissionStatus] : null;
+  const isDeadlinePast = task ? isPast(parseISO(task.deadline)) : false;
+
+  const handleDelete = async () => {
+    if (!task) return;
+    try {
+      await deleteTask.mutateAsync(task.id);
+      addToast("success", "Task deleted", `"${task.title}" was removed.`);
+      setTimeout(() => navigate(`/org/tasks?eventId=${task.eventId}`), 800);
+    } catch {
+      addToast("error", "Delete failed", "Please try again.");
+    } finally {
+      setShowDeleteModal(false);
+    }
+  };
+  const handleStatusChange = async (newStatus: "todo" | "in-progress" | "completed") => {
+    if (!task) return;
+    try {
+      await updateTask.mutateAsync({ id: task.id, payload: { status: newStatus } });
+      addToast("success", "Status updated!", `Task marked as ${newStatus}.`);
+    } catch {
+      addToast("error", "Update failed", "Please try again.");
+    }
+  };
+
+  // ── Error ──────────────────────────────────────────────────────────────────
+  if (isError) {
+    return (
+      <div className="w-full min-h-screen bg-[#F5F5F5] flex items-center justify-center">
+        <div className="text-center">
+          <p className="text-gray-500 text-lg font-semibold">Task not found</p>
+          <button
+            onClick={() => navigate("/org/tasks")}
+            className="mt-4 px-5 py-2.5 bg-indigo-600 text-white rounded-xl text-sm font-semibold hover:bg-indigo-700 transition"
+          >
+            Back to Tasks
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full min-h-screen bg-[#F5F5F5] flex flex-col">
+      {/* ── Top bar ───────────────────────────────────────────────────────────── */}
+      <div className="bg-white border-b px-6 py-3.5 flex items-center justify-between gap-4 flex-wrap">
+        <div className="flex items-center gap-3">
+          <button
+            onClick={() => navigate(-1)}
+            className="p-2 rounded-xl text-gray-400 hover:bg-gray-100 hover:text-gray-700 transition"
+            aria-label="Go back"
+          >
+            <ArrowLeft size={18} />
+          </button>
+          <nav className="flex items-center gap-1.5 text-xs text-gray-400" aria-label="Breadcrumb">
+            <Link to="/org/tasks" className="hover:text-indigo-600 transition">Tasks</Link>
+            <ChevronRight size={12} />
+            <span className="text-gray-700 font-semibold truncate max-w-[200px]">
+              {isLoading ? "Loading…" : task?.title}
+            </span>
+          </nav>
+        </div>
+
+        {task && (
+          <div className="flex items-center gap-2">
+            <Link
+              to={`/org/tasks/${task.id}/edit`}
+              className="flex items-center gap-1.5 px-3.5 py-2 rounded-xl border border-gray-200 text-xs font-bold text-gray-700 hover:bg-gray-50 transition"
+            >
+              <Pencil size={13} />
+              Edit
+            </Link>
+            <button
+              onClick={() => setShowDeleteModal(true)}
+              className="flex items-center gap-1.5 px-3.5 py-2 rounded-xl border border-red-200 text-xs font-bold text-red-500 hover:bg-red-50 transition"
+            >
+              <Trash2 size={13} />
+              Delete
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* ── Content ───────────────────────────────────────────────────────────── */}
+      {isLoading ? (
+        <SkeletonLoader type="detail" />
+      ) : task ? (
+        <div className="flex-1 flex flex-col lg:flex-row overflow-auto">
+
+          {/* ── LEFT panel: task info ─────────────────────────────────────────── */}
+          <div className="lg:w-[420px] xl:w-[460px] shrink-0 flex flex-col gap-5 p-5 border-r bg-white overflow-y-auto">
+
+            {/* Event link + title + description */}
+            <div className="flex flex-col gap-2">
+              <Link
+                to="/org/events"
+                className="inline-flex items-center gap-1.5 text-xs text-indigo-600 hover:underline font-semibold"
+              >
+                <CalendarDays size={12} />
+                {eventName ?? "Unknown Event"}
+              </Link>
+              <h1 className="text-xl font-extrabold text-gray-900 leading-snug">
+                {task.title}
+              </h1>
+              <p className="text-sm text-gray-500 leading-relaxed">{task.description}</p>
+            </div>
+
+            {/* Badges row */}
+            <div className="flex flex-wrap gap-2">
+              <StatusBadge status={task.status} />
+              <PriorityBadge priority={task.priority} />
+              {subCfg && (
+                <span className={`inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold ${subCfg.bg} ${subCfg.text}`}>
+                  {subCfg.label}
+                </span>
+              )}
+              {task.isMandatory && (
+                <span className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-semibold bg-purple-50 text-purple-700 border border-purple-100">
+                  <Flag size={10} />
+                  Mandatory
+                </span>
+              )}
+            </div>
+
+            {/* Change Status */}
+            <div className="flex flex-col gap-2">
+              <p className="text-[10px] font-bold text-gray-400 uppercase tracking-wider">Change Status</p>
+              <div className="flex gap-2">
+                {(["todo", "in-progress", "completed"] as const).map((s) => (
+                  <button
+                    key={s}
+                    onClick={() => void handleStatusChange(s)}
+                    disabled={task.status === s || updateTask.isPending}
+                    className={`px-3 py-1.5 rounded-lg text-xs font-semibold border transition-all disabled:opacity-40 disabled:cursor-not-allowed
+                      ${task.status === s
+                        ? "bg-indigo-600 text-white border-indigo-600"
+                        : "bg-white text-gray-600 border-gray-200 hover:border-indigo-400 hover:text-indigo-600"
+                      }`}
+                  >
+                    {s === "todo" ? "Todo" : s === "in-progress" ? "In Progress" : "Completed"}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {/* Meta grid */}
+            <div className="grid grid-cols-2 gap-3">
+              {/* Deadline */}
+              <div
+                className={`flex flex-col gap-1 p-4 rounded-2xl border ${
+                  isDeadlinePast && task.status !== "completed"
+                    ? "bg-red-50 border-red-200"
+                    : "bg-gray-50 border-gray-100"
+                }`}
+              >
+                <div className="flex items-center gap-1.5 text-[10px] font-bold text-gray-400 uppercase tracking-wider">
+                  <Clock size={11} />
+                  Deadline
+                </div>
+                <p className={`text-sm font-bold mt-0.5 ${
+                  isDeadlinePast && task.status !== "completed" ? "text-red-600" : "text-gray-900"
+                }`}>
+                  {format(parseISO(task.deadline), "MMM d, yyyy")}
+                </p>
+                <p className="text-xs text-gray-400">
+                  {formatDistanceToNow(parseISO(task.deadline), { addSuffix: true })}
+                </p>
+                {isDeadlinePast && task.status !== "completed" && (
+                  <span className="text-[10px] font-bold text-red-500 bg-red-100 px-1.5 py-0.5 rounded-md self-start animate-pulse">
+                    OVERDUE
+                  </span>
+                )}
+              </div>
+
+              {/* Points */}
+              {task.points !== undefined && (
+                <div className="flex flex-col gap-1 p-4 rounded-2xl bg-amber-50 border border-amber-100">
+                  <div className="flex items-center gap-1.5 text-[10px] font-bold text-amber-500 uppercase tracking-wider">
+                    <Star size={11} />
+                    Points
+                  </div>
+                  <p className="text-2xl font-extrabold text-amber-700 leading-none mt-0.5">
+                    {task.points}
+                  </p>
+                  <p className="text-xs text-amber-400">hackathon pts</p>
+                </div>
+              )}
+
+              {/* Submission type */}
+              <div className="flex flex-col gap-1 p-4 rounded-2xl bg-gray-50 border border-gray-100">
+                <div className="flex items-center gap-1.5 text-[10px] font-bold text-gray-400 uppercase tracking-wider">
+                  <UploadCloud size={11} />
+                  Submission
+                </div>
+                <p className="text-sm font-bold text-gray-900 mt-0.5 capitalize">
+                  {task.submissionType === "both" ? "File + GitHub" : task.submissionType}
+                </p>
+                <p className="text-xs text-gray-400">
+                  {task.allowLateSubmission ? "Late allowed" : "On-time only"}
+                </p>
+              </div>
+
+              {/* Last updated */}
+              <div className="flex flex-col gap-1 p-4 rounded-2xl bg-gray-50 border border-gray-100">
+                <div className="flex items-center gap-1.5 text-[10px] font-bold text-gray-400 uppercase tracking-wider">
+                  <Activity size={11} />
+                  Updated
+                </div>
+                <p className="text-sm font-bold text-gray-900 mt-0.5">
+                  {formatDistanceToNow(parseISO(task.updatedAt), { addSuffix: true })}
+                </p>
+                <p className="text-xs text-gray-400">by {task.createdBy}</p>
+              </div>
+            </div>
+
+            {/* Assignees */}
+            <div className="flex flex-col gap-3">
+              <div className="flex items-center gap-2 text-[10px] font-bold text-gray-400 uppercase tracking-wider">
+                <Users size={12} />
+                Assigned To ({task.assignedTo.length})
+              </div>
+              <div className="flex flex-col gap-2">
+                {task.assignedTo.map((m, idx) => (
+                  <div
+                    key={m.id}
+                    className="flex items-center gap-3 p-3 bg-gray-50 hover:bg-indigo-50 transition-colors rounded-xl border border-gray-100 hover:border-indigo-100 group"
+                  >
+                    <div className="relative shrink-0">
+                      <Avatar name={m.name} src={m.avatar} role={m.role} size="md" showTooltip={false} ring ringColor="ring-white" />
+                      {/* Online status dot — alternating for demo */}
+                      <span className={`absolute -bottom-0.5 -right-0.5 w-3 h-3 rounded-full border-2 border-white shadow-sm ${
+                        idx % 3 === 0 ? "bg-emerald-400" : idx % 3 === 1 ? "bg-amber-400" : "bg-gray-300"
+                      }`} />
+                    </div>
+                    <div className="min-w-0 flex-1">
+                      <p className="text-sm font-semibold text-gray-900 truncate group-hover:text-indigo-700 transition-colors">{m.name}</p>
+                      <p className="text-xs text-gray-400 truncate">{m.role}</p>
+                    </div>
+                    <div className="flex flex-col items-end gap-1 shrink-0">
+                      <span className="text-[10px] font-medium text-gray-400 bg-gray-100 group-hover:bg-indigo-100 group-hover:text-indigo-600 px-2 py-0.5 rounded-md transition-colors truncate max-w-[120px]">
+                        {m.email}
+                      </span>
+                      <span className={`text-[9px] font-bold px-1.5 py-0.5 rounded-full ${
+                        idx % 3 === 0 ? "bg-emerald-50 text-emerald-600" : idx % 3 === 1 ? "bg-amber-50 text-amber-600" : "bg-gray-100 text-gray-400"
+                      }`}>
+                        {idx % 3 === 0 ? "● Online" : idx % 3 === 1 ? "● Away" : "● Offline"}
+                      </span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          {/* ── RIGHT panel: submissions + activity ───────────────────────────── */}
+          <div className="flex-1 flex flex-col overflow-hidden min-h-0">
+            {/* Tab bar */}
+            <div className="bg-white border-b px-5 flex gap-0 shrink-0">
+              {(["submissions", "activity", "comments"] as const).map((tab) => (
+                <button
+                  key={tab}
+                  onClick={() => setActiveTab(tab)}
+                  className={`px-5 py-3.5 text-sm font-bold border-b-2 transition-colors capitalize ${
+                    activeTab === tab
+                      ? "border-indigo-600 text-indigo-600"
+                      : "border-transparent text-gray-400 hover:text-gray-700"
+                  }`}
+                >
+                  {tab}
+                  {tab === "submissions" && (
+                    <span className="ml-2 px-1.5 py-0.5 rounded-full bg-indigo-50 text-indigo-600 text-[10px] font-bold">
+                      {submissions.length}
+                    </span>
+                  )}
+                  {tab === "activity" && (
+                    <span className="ml-2 px-1.5 py-0.5 rounded-full bg-gray-100 text-gray-500 text-[10px] font-bold">
+                      {activity.length}
+                    </span>
+                  )}
+                  {tab === "comments" && (
+                    <span className="ml-2 px-1.5 py-0.5 rounded-full bg-gray-100 text-gray-500 text-[10px] font-bold">
+                      💬
+                    </span>
+                  )}
+                </button>
+              ))}
+            </div>
+
+            {/* Tab content */}
+            <div className="flex-1 overflow-auto p-5">
+              {activeTab === "submissions" ? (
+                <div className="flex flex-col gap-5">
+                  {reviewingSubmissionId && (
+                    <ReviewPanel
+                      submissionId={reviewingSubmissionId}
+                      taskId={task.id}
+                      currentTaskStatus={task.status}
+                      onSuccess={() => {
+                        setReviewingSubmissionId(null);
+                        addToast("success", "Review submitted!", "The submission has been reviewed.");
+                      }}
+                      onCancel={() => setReviewingSubmissionId(null)}
+                    />
+                  )}
+                  <SubmissionList
+                    submissions={submissions}
+                    isLoading={subLoading}
+                    onReview={setReviewingSubmissionId}
+                  />
+                </div>
+              ) : activeTab === "comments" ? (
+                <CommentsSection taskId={task.id} />
+              ) : (
+                /* Activity timeline */
+                <div className="flex flex-col gap-1">
+                  <h3 className="text-sm font-bold text-gray-900 mb-5">Activity Timeline</h3>
+
+                  {activity.length === 0 ? (
+                    <p className="text-sm text-gray-400 text-center py-10">
+                      No activity recorded yet.
+                    </p>
+                  ) : (
+                    <ol className="relative ml-4 border-l-2 border-gray-100">
+                      {activity.map((event) => {
+                        const iconCls  = ACTIVITY_COLOR[event.type] ?? "bg-gray-100 text-gray-500";
+                        const iconChar = ACTIVITY_ICON[event.type]  ?? "•";
+                        return (
+                          <li key={event.id} className="mb-5 ml-5">
+                            {/* Icon node */}
+                            <span
+                              className={`absolute -left-3.5 flex w-7 h-7 items-center justify-center rounded-full text-xs font-bold border-2 border-white shadow-sm ${iconCls}`}
+                            >
+                              {iconChar}
+                            </span>
+
+                            {/* Card */}
+                            <div className="ml-1 p-4 bg-white rounded-xl border border-gray-100 shadow-sm">
+                              <p className="text-sm font-semibold text-gray-900">
+                                {event.description}
+                              </p>
+                              <div className="flex items-center gap-2 mt-1.5 flex-wrap">
+                                <span className="text-xs font-medium text-gray-500">
+                                  {event.actor}
+                                </span>
+                                <span className="text-gray-300">·</span>
+                                <span className="text-xs text-gray-400">
+                                  {formatDistanceToNow(parseISO(event.timestamp), { addSuffix: true })}
+                                </span>
+                                <span className="text-gray-300">·</span>
+                                <span className="text-[10px] text-gray-400">
+                                  {format(parseISO(event.timestamp), "MMM d, h:mm a")}
+                                </span>
+                              </div>
+                            </div>
+                          </li>
+                        );
+                      })}
+                    </ol>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      ) : null}
+
+      {/* Delete modal */}
+      <ConfirmModal
+        isOpen={showDeleteModal}
+        title="Delete Task"
+        message={`Are you sure you want to delete "${task?.title}"? All submissions and reviews will be permanently lost.`}
+        confirmLabel="Yes, Delete"
+        onConfirm={() => void handleDelete()}
+        onCancel={() => setShowDeleteModal(false)}
+        isLoading={deleteTask.isPending}
+        danger
+      />
+
+      <ToastContainer toasts={toasts} onDismiss={dismiss} />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/features/Tasks/v1/pages/TaskManagementPage.tsx b/src/features/Tasks/v1/pages/TaskManagementPage.tsx
new file mode 100644
index 0000000..7781ccc
--- /dev/null
+++ b/src/features/Tasks/v1/pages/TaskManagementPage.tsx
@@ -0,0 +1,138 @@
+import { useState, useEffect } from "react";
+import { useEvents } from "../hooks/useEvents";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import { RefreshCw } from "lucide-react";
+import EventDropdown from "../components/event/EventDropdown";
+import TaskHeader from "../components/task/TaskHeader";
+import TaskFiltersBar from "../components/task/TaskFilters";
+import TaskTable from "../components/task/TaskTable";
+import TaskCardList from "../components/task/TaskCardList";
+import ConfirmModal from "../components/common/ConfirmModal";
+import { ToastContainer, useToast } from "../components/common/ToastNotification";
+import EmptyState from "../components/common/EmptyState";
+import { useTasks, useDeleteTask } from "../hooks/useTasks";
+import { SELECTED_EVENT_KEY, DEFAULT_FILTERS } from "../constants/task.constants";
+import type { Task, TaskFilters } from "../Task.types";
+
+export default function TaskManagementPage() {
+  const navigate = useNavigate();
+  const [params, setParams] = useSearchParams();
+  const { toasts, addToast, dismiss } = useToast();
+
+  const [selectedEventId, setSelectedEventId] = useState<string | null>(
+    () => localStorage.getItem(SELECTED_EVENT_KEY)
+  );
+  const [filters, setFilters] = useState<TaskFilters>(DEFAULT_FILTERS);
+
+  const { data: allTasks = [] } = useTasks(selectedEventId, DEFAULT_FILTERS);
+  const { data: tasks = [], isLoading, isError, refetch } = useTasks(selectedEventId, filters);
+
+  const deleteTask = useDeleteTask();
+  const [taskToDelete, setTaskToDelete] = useState<Task | null>(null);
+
+  useEffect(() => {
+    if (params.get("created") === "1") {
+      addToast("success", "Task created!", "Your new task is now live in the list.");
+      setParams((p) => { p.delete("created"); return p; }, { replace: true });
+    }
+    if (params.get("updated") === "1") {
+      addToast("success", "Task updated!", "Your changes have been saved.");
+      setParams((p) => { p.delete("updated"); return p; }, { replace: true });
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => { setFilters(DEFAULT_FILTERS); }, [selectedEventId]);
+
+  const handleDelete = async () => {
+    if (!taskToDelete) return;
+    try {
+      await deleteTask.mutateAsync(taskToDelete.id);
+      addToast("success", "Task deleted", `"${taskToDelete.title}" was removed.`);
+    } catch {
+      addToast("error", "Delete failed", "Something went wrong.");
+    } finally {
+      setTaskToDelete(null);
+    }
+  };
+
+  const hasActiveFilters =
+    filters.status !== "all" || filters.priority !== "all" ||
+    filters.time !== "all" || filters.members.length > 0 || filters.search !== "";
+
+  const resetFilters = () => setFilters(DEFAULT_FILTERS);
+  const handleCreate = () => navigate(`/org/tasks/create?eventId=${selectedEventId}`);
+
+  return (
+    <div className="w-full h-screen flex flex-col overflow-hidden bg-[#F5F5F5]">
+      <TaskHeader selectedEventId={selectedEventId} tasks={allTasks} />
+
+      {/* Event selector bar */}
+      <div className="bg-white border-b px-4 py-3 flex items-center gap-3 flex-wrap">
+        <span className="text-xs font-bold text-gray-500 uppercase tracking-wide shrink-0">Event</span>
+        <EventDropdown selectedEventId={selectedEventId} onSelect={setSelectedEventId} />
+        {selectedEventId && (
+          <button onClick={() => void refetch()} title="Refresh"
+            className="p-1.5 rounded-lg text-gray-400 hover:bg-gray-100 hover:text-gray-600 transition">
+            <RefreshCw size={14} />
+          </button>
+        )}
+      </div>
+
+      <div className="flex-1 overflow-hidden flex flex-col">
+        {!selectedEventId ? (
+          <div className="flex-1 flex items-center justify-center p-4">
+            {events.length === 0 ? (
+              <EmptyState
+                variant="no-event"
+                title="No events yet"
+                description="You haven't created any events. Create your first event to start managing tasks."
+                action={
+                  <button
+                    onClick={() => navigate("/org/create-event")}
+                    className="flex items-center gap-2 px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold rounded-xl transition shadow-sm"
+                  >
+                    Create First Event
+                  </button>
+                }
+              />
+            ) : (
+              <EmptyState variant="no-event" title="No event selected"
+                description="Select an event from the dropdown above to view and manage its tasks." />
+            )}
+          </div>
+        ) : isError ? (
+          <div className="flex-1 flex items-center justify-center p-4">
+            <EmptyState variant="error" title="Failed to load tasks" description="Something went wrong."
+              action={<button onClick={() => void refetch()}
+                className="flex items-center gap-2 px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold rounded-xl transition">
+                <RefreshCw size={14} /> Retry
+              </button>} />
+          </div>
+        ) : (
+          <div className="flex-1 overflow-hidden flex flex-col bg-white">
+            <TaskFiltersBar filters={filters} onChange={setFilters}
+              totalCount={allTasks.length} filteredCount={tasks.length} />
+            <div className="flex-1 overflow-auto">
+              {/* Desktop: table | Mobile: card list */}
+              <div className="hidden md:block h-full">
+                <TaskTable tasks={tasks} isLoading={isLoading} onDelete={setTaskToDelete}
+                  onCreateTask={handleCreate} hasFilters={hasActiveFilters} onResetFilters={resetFilters} />
+              </div>
+              <div className="block md:hidden h-full">
+                <TaskCardList tasks={tasks} isLoading={isLoading} onDelete={setTaskToDelete}
+                  onCreateTask={handleCreate} hasFilters={hasActiveFilters} onResetFilters={resetFilters} />
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      <ConfirmModal isOpen={!!taskToDelete} title="Delete Task"
+        message={`Are you sure you want to delete "${taskToDelete?.title}"? All submissions will be permanently lost.`}
+        confirmLabel="Yes, Delete" onConfirm={() => void handleDelete()}
+        onCancel={() => setTaskToDelete(null)} isLoading={deleteTask.isPending} danger />
+
+      <ToastContainer toasts={toasts} onDismiss={dismiss} />
+    </div>
+  );
+}
\ No newline at end of file

From 0921fb6021753306395d253bf457e9fea190bf71 Mon Sep 17 00:00:00 2001
From: itzzavdheshh <aavdhesh.dadhich@gmail.com>
Date: Sun, 10 May 2026 01:13:46 +0530
Subject: [PATCH 02/13] =?UTF-8?q?feat:=20Event-Based=20Task=20Management?=
 =?UTF-8?q?=20System=20=E2=80=94=20CommDesk?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/Tasks/v1/pages/TaskManagementPage.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/features/Tasks/v1/pages/TaskManagementPage.tsx b/src/features/Tasks/v1/pages/TaskManagementPage.tsx
index 7781ccc..19cefc1 100644
--- a/src/features/Tasks/v1/pages/TaskManagementPage.tsx
+++ b/src/features/Tasks/v1/pages/TaskManagementPage.tsx
@@ -19,6 +19,7 @@ export default function TaskManagementPage() {
   const [params, setParams] = useSearchParams();
   const { toasts, addToast, dismiss } = useToast();
 
+  const { data: events = [] } = useEvents();
   const [selectedEventId, setSelectedEventId] = useState<string | null>(
     () => localStorage.getItem(SELECTED_EVENT_KEY)
   );

From d523c503bb2e6e844461cd4b5894d7f2b7790241 Mon Sep 17 00:00:00 2001
From: itzzavdheshh <aavdhesh.dadhich@gmail.com>
Date: Sun, 10 May 2026 01:27:48 +0530
Subject: [PATCH 03/13] =?UTF-8?q?feat:=20Event-Based=20Task=20Management?=
 =?UTF-8?q?=20System=20=E2=80=94=20CommDesk?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pnpm-workspace.yaml                                 |  4 ++--
 src/features/Tasks/v1/components/common/Avatar.tsx  |  2 +-
 .../Tasks/v1/components/task/TaskFilters.tsx        | 13 ++++++++-----
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 04338cc..220bd0b 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,3 +1,3 @@
 allowBuilds:
-  esbuild: set this to true or false
-  msw: set this to true or false
+  esbuild: true
+  msw: true
diff --git a/src/features/Tasks/v1/components/common/Avatar.tsx b/src/features/Tasks/v1/components/common/Avatar.tsx
index 2902533..0dc48da 100644
--- a/src/features/Tasks/v1/components/common/Avatar.tsx
+++ b/src/features/Tasks/v1/components/common/Avatar.tsx
@@ -19,7 +19,7 @@ const BG_COLORS = [
 ];
 
 function getColor(name: string): string {
-  const code = name.charCodeAt(0) + (name.charCodeAt(1) ?? 0);
+  const code = name.charCodeAt(0) + (name.charCodeAt(1) || 0);
   return BG_COLORS[code % BG_COLORS.length];
 }
 
diff --git a/src/features/Tasks/v1/components/task/TaskFilters.tsx b/src/features/Tasks/v1/components/task/TaskFilters.tsx
index 550dc36..bcbe4ed 100644
--- a/src/features/Tasks/v1/components/task/TaskFilters.tsx
+++ b/src/features/Tasks/v1/components/task/TaskFilters.tsx
@@ -225,13 +225,16 @@ function SmartSearch({ value, onChange, filteredCount, totalCount, isFiltered }:
 // ─── Main ─────────────────────────────────────────────────────────────────────
 export default function TaskFiltersBar({ filters, onChange, totalCount, filteredCount }: Props) {
   const [localSearch, setLocalSearch] = useState(filters.search);
-  const debounceRef = useRef<ReturnType<typeof setTimeout>>();
+  const onChangeRef = useRef(onChange);
+  useEffect(() => { onChangeRef.current = onChange; });
 
   useEffect(() => {
-    clearTimeout(debounceRef.current);
-    debounceRef.current = setTimeout(() => onChange({ ...filters, search: localSearch }), 300);
-    return () => clearTimeout(debounceRef.current);
-  }, [localSearch]); // eslint-disable-line
+    if (localSearch === filters.search) return;
+    const timer = setTimeout(() => {
+      onChangeRef.current({ ...filters, search: localSearch });
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [localSearch, filters]);
 
   const hasActive = filters.status !== "all" || filters.priority !== "all" || filters.time !== "all" || filters.members.length > 0 || filters.search !== "";
   const resetAll  = () => { setLocalSearch(""); onChange({ status:"all", priority:"all", time:"all", members:[], search:"" }); };

From aa6570bb499c37e311d557e5b1ae9220d80b34ab Mon Sep 17 00:00:00 2001
From: itzzavdheshh <aavdhesh.dadhich@gmail.com>
Date: Sun, 10 May 2026 01:30:12 +0530
Subject: [PATCH 04/13] =?UTF-8?q?feat:=20Event-Based=20Task=20Management?=
 =?UTF-8?q?=20System=20=E2=80=94=20CommDesk?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SideBar/v1/Section/BotamNavBar.tsx        | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/features/SideBar/v1/Section/BotamNavBar.tsx b/src/features/SideBar/v1/Section/BotamNavBar.tsx
index 12fe6a1..eaac1ba 100644
--- a/src/features/SideBar/v1/Section/BotamNavBar.tsx
+++ b/src/features/SideBar/v1/Section/BotamNavBar.tsx
@@ -15,32 +15,32 @@ const navItems: NavItem[] = [
   {
     icon: MdDashboard,
     text: "Dashboard",
-    link: "/dashboard",
-    isActive: (pathname) => pathname === "/" || pathname.startsWith("/dashboard"),
+    link: "/org/dashboard",
+    isActive: (pathname) => pathname === "/org" || pathname.startsWith("/org/dashboard"),
   },
   {
     icon: MdGroup,
     text: "Teams",
-    link: "/member",
-    isActive: (pathname) => pathname.startsWith("/member") || pathname.startsWith("/add-member"),
+    link: "/org/member",
+    isActive: (pathname) => pathname.startsWith("/org/member") || pathname.startsWith("/org/add-member"),
   },
   {
     icon: MdEvent,
     text: "Events",
-    link: "/events",
-    isActive: (pathname) => pathname.startsWith("/events") || pathname.startsWith("/create-event"),
+    link: "/org/events",
+    isActive: (pathname) => pathname.startsWith("/org/events") || pathname.startsWith("/org/create-event"),
   },
   {
     icon: MdAssignment,
     text: "Tasks",
-    link: "/tasks",
-    isActive: (pathname) => pathname.startsWith("/tasks"),
+    link: "/org/tasks",
+    isActive: (pathname) => pathname.startsWith("/org/tasks"),
   },
   {
     icon: RiContactsBookFill,
     text: "Support",
-    link: "/contact",
-    isActive: (pathname) => pathname.startsWith("/contact"),
+    link: "/org/contact",
+    isActive: (pathname) => pathname.startsWith("/org/contact"),
   },
 ];
 

From 9c4ead89bac40cea5cfeacb133d58221bea72d1e Mon Sep 17 00:00:00 2001
From: itzzavdheshh <aavdhesh.dadhich@gmail.com>
Date: Sun, 10 May 2026 01:31:43 +0530
Subject: [PATCH 05/13] =?UTF-8?q?feat:=20Event-Based=20Task=20Management?=
 =?UTF-8?q?=20System=20=E2=80=94=20CommDesk?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SideBar/v1/Section/BotamNavBar.tsx        | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/features/SideBar/v1/Section/BotamNavBar.tsx b/src/features/SideBar/v1/Section/BotamNavBar.tsx
index eaac1ba..12fe6a1 100644
--- a/src/features/SideBar/v1/Section/BotamNavBar.tsx
+++ b/src/features/SideBar/v1/Section/BotamNavBar.tsx
@@ -15,32 +15,32 @@ const navItems: NavItem[] = [
   {
     icon: MdDashboard,
     text: "Dashboard",
-    link: "/org/dashboard",
-    isActive: (pathname) => pathname === "/org" || pathname.startsWith("/org/dashboard"),
+    link: "/dashboard",
+    isActive: (pathname) => pathname === "/" || pathname.startsWith("/dashboard"),
   },
   {
     icon: MdGroup,
     text: "Teams",
-    link: "/org/member",
-    isActive: (pathname) => pathname.startsWith("/org/member") || pathname.startsWith("/org/add-member"),
+    link: "/member",
+    isActive: (pathname) => pathname.startsWith("/member") || pathname.startsWith("/add-member"),
   },
   {
     icon: MdEvent,
     text: "Events",
-    link: "/org/events",
-    isActive: (pathname) => pathname.startsWith("/org/events") || pathname.startsWith("/org/create-event"),
+    link: "/events",
+    isActive: (pathname) => pathname.startsWith("/events") || pathname.startsWith("/create-event"),
   },
   {
     icon: MdAssignment,
     text: "Tasks",
-    link: "/org/tasks",
-    isActive: (pathname) => pathname.startsWith("/org/tasks"),
+    link: "/tasks",
+    isActive: (pathname) => pathname.startsWith("/tasks"),
   },
   {
     icon: RiContactsBookFill,
     text: "Support",
-    link: "/org/contact",
-    isActive: (pathname) => pathname.startsWith("/org/contact"),
+    link: "/contact",
+    isActive: (pathname) => pathname.startsWith("/contact"),
   },
 ];
 

From 7a2e869beb3b02f9c33fb961b0fb74775fedfc7e Mon Sep 17 00:00:00 2001
From: itzzavdheshh <aavdhesh.dadhich@gmail.com>
Date: Sun, 10 May 2026 15:25:10 +0530
Subject: [PATCH 06/13] fix

---
 package-lock.json                             | 224 ++++++++++--------
 package.json                                  |   4 +-
 src/App.tsx                                   |   4 +-
 .../Dashboard/components/AISuggestions.tsx    |   2 +-
 .../Dashboard/components/ActivityFeed.tsx     |   2 +-
 .../Dashboard/components/BudgetCard.tsx       |   2 +-
 .../Dashboard/components/CalendarWidget.tsx   |   2 +-
 .../Dashboard/components/CommunityStats.tsx   |   2 +-
 .../Dashboard/components/RecentTasks.tsx      |   2 +-
 .../Dashboard/components/SmartReminders.tsx   |   2 +-
 .../Dashboard/components/TaskOverview.tsx     |   2 +-
 src/features/Dashboard/components/TaskRow.tsx |   2 +-
 .../components/UpcomingUrgentTasks.tsx        |   2 +-
 13 files changed, 143 insertions(+), 109 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 62cb8a1..12fe99f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,9 @@
       "version": "0.1.0",
       "dependencies": {
         "@hookform/resolvers": "^5.2.2",
-        "@tanstack/react-query": "^5.100.8",
+        "@tanstack/react-query": "^5.100.9",
+        "@tauri-apps/api": "^2.11.0",
+        "@tauri-apps/plugin-opener": "^2.5.4",
         "@tauri-apps/plugin-process": "^2.3.1",
         "@tauri-apps/plugin-updater": "^2.10.1",
         "class-variance-authority": "^0.7.1",
@@ -17,23 +19,24 @@
         "date-fns": "^4.1.0",
         "lucide-react": "^0.577.0",
         "markdown-to-jsx": "^9.7.16",
+        "next-themes": "^0.4.6",
         "radix-ui": "^1.4.3",
-        "react": "^19.2.5",
+        "react": "19.2.6",
         "react-day-picker": "^9.14.0",
-        "react-dom": "^19.2.5",
-        "react-hook-form": "^7.73.1",
+        "react-dom": "19.2.6",
+        "react-hook-form": "^7.75.0",
         "react-icons": "^5.6.0",
-        "react-router": "^7.14.2",
-        "react-router-dom": "^7.14.2",
+        "react-router": "^7.15.0",
+        "react-router-dom": "^7.15.0",
         "recharts": "^3.8.1",
         "tailwind-merge": "^3.5.0",
-        "zod": "^4.3.6"
+        "zod": "^4.4.3"
       },
       "devDependencies": {
         "@eslint/js": "^9.39.4",
         "@tailwindcss/typography": "^0.5.19",
-        "@tailwindcss/vite": "^4.2.4",
-        "@tauri-apps/cli": "^2.10.1",
+        "@tailwindcss/vite": "^4.3.0",
+        "@tauri-apps/cli": "^2.11.1",
         "@types/markdown-to-jsx": "^7.0.1",
         "@types/react": "^19.2.14",
         "@types/react-dom": "^19.2.3",
@@ -42,14 +45,14 @@
         "eslint-config-prettier": "^10.1.8",
         "eslint-plugin-react-hooks": "^7.1.1",
         "eslint-plugin-react-refresh": "^0.5.2",
-        "globals": "^17.5.0",
+        "globals": "^17.6.0",
         "prettier": "^3.8.3",
         "shadcn": "^3.8.5",
-        "tailwindcss": "^4.2.4",
+        "tailwindcss": "^4.3.0",
         "tw-animate-css": "^1.4.0",
         "typescript": "~5.8.3",
-        "typescript-eslint": "^8.59.0",
-        "vite": "^7.3.2"
+        "typescript-eslint": "^8.59.2",
+        "vite": "^7.3.3"
       }
     },
     "node_modules/@antfu/ni": {
@@ -3720,49 +3723,49 @@
       }
     },
     "node_modules/@tailwindcss/node": {
-      "version": "4.2.4",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.2.4.tgz",
-      "integrity": "sha512-Ai7+yQPxz3ddrDQzFfBKdHEVBg0w3Zl83jnjuwxnZOsnH9pGn93QHQtpU0p/8rYWxvbFZHneni6p1BSLK4DkGA==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.3.0.tgz",
+      "integrity": "sha512-aFb4gUhFOgdh9AXo4IzBEOzBkkAxm9VigwDJnMIYv3lcfXCJVesNfbEaBl4BNgVRyid92AmdviqwBUBRKSeY3g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/remapping": "^2.3.5",
-        "enhanced-resolve": "^5.19.0",
+        "enhanced-resolve": "^5.21.0",
         "jiti": "^2.6.1",
         "lightningcss": "1.32.0",
         "magic-string": "^0.30.21",
         "source-map-js": "^1.2.1",
-        "tailwindcss": "4.2.4"
+        "tailwindcss": "4.3.0"
       }
     },
     "node_modules/@tailwindcss/oxide": {
-      "version": "4.2.4",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.2.4.tgz",
-      "integrity": "sha512-9El/iI069DKDSXwTvB9J4BwdO5JhRrOweGaK25taBAvBXyXqJAX+Jqdvs8r8gKpsI/1m0LeJLyQYTf/WLrBT1Q==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.3.0.tgz",
+      "integrity": "sha512-F7HZGBeN9I0/AuuJS5PwcD8xayx5ri5GhjYUDBEVYUkexyA/giwbDNjRVrxSezE3T250OU2K/wp/ltWx3UOefg==",
       "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 20"
       },
       "optionalDependencies": {
-        "@tailwindcss/oxide-android-arm64": "4.2.4",
-        "@tailwindcss/oxide-darwin-arm64": "4.2.4",
-        "@tailwindcss/oxide-darwin-x64": "4.2.4",
-        "@tailwindcss/oxide-freebsd-x64": "4.2.4",
-        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.2.4",
-        "@tailwindcss/oxide-linux-arm64-gnu": "4.2.4",
-        "@tailwindcss/oxide-linux-arm64-musl": "4.2.4",
-        "@tailwindcss/oxide-linux-x64-gnu": "4.2.4",
-        "@tailwindcss/oxide-linux-x64-musl": "4.2.4",
-        "@tailwindcss/oxide-wasm32-wasi": "4.2.4",
-        "@tailwindcss/oxide-win32-arm64-msvc": "4.2.4",
-        "@tailwindcss/oxide-win32-x64-msvc": "4.2.4"
+        "@tailwindcss/oxide-android-arm64": "4.3.0",
+        "@tailwindcss/oxide-darwin-arm64": "4.3.0",
+        "@tailwindcss/oxide-darwin-x64": "4.3.0",
+        "@tailwindcss/oxide-freebsd-x64": "4.3.0",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.3.0",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.3.0",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.3.0",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.3.0",
+        "@tailwindcss/oxide-linux-x64-musl": "4.3.0",
+        "@tailwindcss/oxide-wasm32-wasi": "4.3.0",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.3.0",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.3.0"
       }
     },
     "node_modules/@tailwindcss/oxide-android-arm64": {
-      "version": "4.2.4",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.2.4.tgz",
-      "integrity": "sha512-e7MOr1SAn9U8KlZzPi1ZXGZHeC5anY36qjNwmZv9pOJ8E4Q6jmD1vyEHkQFmNOIN7twGPEMXRHmitN4zCMN03g==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.3.0.tgz",
+      "integrity": "sha512-TJPiq67tKlLuObP6RkwvVGDoxCMBVtDgKkLfa/uyj7/FyxvQwHS+UOnVrXXgbEsfUaMgiVvC4KbJnRr26ho4Ng==",
       "cpu": [
         "arm64"
       ],
@@ -3777,9 +3780,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-darwin-arm64": {
-      "version": "4.2.4",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.2.4.tgz",
-      "integrity": "sha512-tSC/Kbqpz/5/o/C2sG7QvOxAKqyd10bq+ypZNf+9Fi2TvbVbv1zNpcEptcsU7DPROaSbVgUXmrzKhurFvo5eDg==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.3.0.tgz",
+      "integrity": "sha512-oMN/WZRb+SO37BmUElEgeEWuU8E/HXRkiODxJxLe1UTHVXLrdVSgfaJV7pSlhRGMSOiXLuxTIjfsF3wYvz8cgQ==",
       "cpu": [
         "arm64"
       ],
@@ -3794,9 +3797,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-darwin-x64": {
-      "version": "4.2.4",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.2.4.tgz",
-      "integrity": "sha512-yPyUXn3yO/ufR6+Kzv0t4fCg2qNr90jxXc5QqBpjlPNd0NqyDXcmQb/6weunH/MEDXW5dhyEi+agTDiqa3WsGg==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.3.0.tgz",
+      "integrity": "sha512-N6CUmu4a6bKVADfw77p+iw6Yd9Q3OBhe0veaDX+QazfuVYlQsHfDgxBrsjQ/IW+zywL8mTrNd0SdJT/zgtvMdA==",
       "cpu": [
         "x64"
       ],
@@ -3811,9 +3814,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-freebsd-x64": {
-      "version": "4.2.4",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.2.4.tgz",
-      "integrity": "sha512-BoMIB4vMQtZsXdGLVc2z+P9DbETkiopogfWZKbWwM8b/1Vinbs4YcUwo+kM/KeLkX3Ygrf4/PsRndKaYhS8Eiw==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.3.0.tgz",
+      "integrity": "sha512-zDL5hBkQdH5C6MpqbK3gQAgP80tsMwSI26vjOzjJtNCMUo0lFgOItzHKBIupOZNQxt3ouPH7RPhvNhiTfCe5CQ==",
       "cpu": [
         "x64"
       ],
@@ -3828,9 +3831,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
-      "version": "4.2.4",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.2.4.tgz",
-      "integrity": "sha512-7pIHBLTHYRAlS7V22JNuTh33yLH4VElwKtB3bwchK/UaKUPpQ0lPQiOWcbm4V3WP2I6fNIJ23vABIvoy2izdwA==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.3.0.tgz",
+      "integrity": "sha512-R06HdNi7A7OEoMsf6d4tjZ71RCWnZQPHj2mnotSFURjNLdBC+cIgXQ7l81CqeoiQftjf6OOblxXMInMgN2VzMA==",
       "cpu": [
         "arm"
       ],
@@ -3845,13 +3848,16 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
-      "version": "4.2.4",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.2.4.tgz",
-      "integrity": "sha512-+E4wxJ0ZGOzSH325reXTWB48l42i93kQqMvDyz5gqfRzRZ7faNhnmvlV4EPGJU3QJM/3Ab5jhJ5pCRUsKn6OQw==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.3.0.tgz",
+      "integrity": "sha512-qTJHELX8jetjhRQHCLilkVLmybpzNQAtaI/gaoVoidn/ufbNDbAo8KlK2J+yPoc8wQxvDxCmh/5lr8nC1+lTbg==",
       "cpu": [
         "arm64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3862,13 +3868,16 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
-      "version": "4.2.4",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.2.4.tgz",
-      "integrity": "sha512-bBADEGAbo4ASnppIziaQJelekCxdMaxisrk+fB7Thit72IBnALp9K6ffA2G4ruj90G9XRS2VQ6q2bCKbfFV82g==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.3.0.tgz",
+      "integrity": "sha512-Z6sukiQsngnWO+l39X4pPbiWT81IC+PLKF+PHxIlyZbGNb9MODfYlXEVlFvej5BOZInWX01kVyzeLvHsXhfczQ==",
       "cpu": [
         "arm64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3879,13 +3888,16 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
-      "version": "4.2.4",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.2.4.tgz",
-      "integrity": "sha512-7Mx25E4WTfnht0TVRTyC00j3i0M+EeFe7wguMDTlX4mRxafznw0CA8WJkFjWYH5BlgELd1kSjuU2JiPnNZbJDA==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.3.0.tgz",
+      "integrity": "sha512-DRNdQRpSGzRGfARVuVkxvM8Q12nh19l4BF/G7zGA1oe+9wcC6saFBHTISrpIcKzhiXtSrlSrluCfvMuledoCTQ==",
       "cpu": [
         "x64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3896,13 +3908,16 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-x64-musl": {
-      "version": "4.2.4",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.2.4.tgz",
-      "integrity": "sha512-2wwJRF7nyhOR0hhHoChc04xngV3iS+akccHTGtz965FwF0up4b2lOdo6kI1EbDaEXKgvcrFBYcYQQ/rrnWFVfA==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.3.0.tgz",
+      "integrity": "sha512-Z0IADbDo8bh6I7h2IQMx601AdXBLfFpEdUotft86evd/8ZPflZe9COPO8Q1vw+pfLWIUo9zN/JGZvwuAJqduqg==",
       "cpu": [
         "x64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3913,9 +3928,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-wasm32-wasi": {
-      "version": "4.2.4",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.2.4.tgz",
-      "integrity": "sha512-FQsqApeor8Fo6gUEklzmaa9994orJZZDBAlQpK2Mq+DslRKFJeD6AjHpBQ0kZFQohVr8o85PPh8eOy86VlSCmw==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.3.0.tgz",
+      "integrity": "sha512-HNZGOUxEmElksYR7S6sC5jTeNGpobAsy9u7Gu0AskJ8/20FR9GqebUyB+HBcU/ax6BHuiuJi+Oda4B+YX6H1yA==",
       "bundleDependencies": [
         "@napi-rs/wasm-runtime",
         "@emnapi/core",
@@ -3931,10 +3946,10 @@
       "license": "MIT",
       "optional": true,
       "dependencies": {
-        "@emnapi/core": "^1.8.1",
-        "@emnapi/runtime": "^1.8.1",
-        "@emnapi/wasi-threads": "^1.1.0",
-        "@napi-rs/wasm-runtime": "^1.1.1",
+        "@emnapi/core": "^1.10.0",
+        "@emnapi/runtime": "^1.10.0",
+        "@emnapi/wasi-threads": "^1.2.1",
+        "@napi-rs/wasm-runtime": "^1.1.4",
         "@tybys/wasm-util": "^0.10.1",
         "tslib": "^2.8.1"
       },
@@ -3943,9 +3958,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
-      "version": "4.2.4",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.2.4.tgz",
-      "integrity": "sha512-L9BXqxC4ToVgwMFqj3pmZRqyHEztulpUJzCxUtLjobMCzTPsGt1Fa9enKbOpY2iIyVtaHNeNvAK8ERP/64sqGQ==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.3.0.tgz",
+      "integrity": "sha512-Pe+RPVTi1T+qymuuRpcdvwSVZjnll/f7n8gBxMMh3xLTctMDKqpdfGimbMyioqtLhUYZxdJ9wGNhV7MKHvgZsQ==",
       "cpu": [
         "arm64"
       ],
@@ -3960,9 +3975,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
-      "version": "4.2.4",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.2.4.tgz",
-      "integrity": "sha512-ESlKG0EpVJQwRjXDDa9rLvhEAh0mhP1sF7sap9dNZT0yyl9SAG6T7gdP09EH0vIv0UNTlo6jPWyujD6559fZvw==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.3.0.tgz",
+      "integrity": "sha512-Mvrf2kXW/yeW/OTezZlCGOirXRcUuLIBx/5Y12BaPM7wJoryG6dfS/NJL8aBPqtTEx/Vm4T4vKzFUcKDT+TKUA==",
       "cpu": [
         "x64"
       ],
@@ -3990,15 +4005,15 @@
       }
     },
     "node_modules/@tailwindcss/vite": {
-      "version": "4.2.4",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.2.4.tgz",
-      "integrity": "sha512-pCvohwOCspk3ZFn6eJzrrX3g4n2JY73H6MmYC87XfGPyTty4YsCjYTMArRZm/zOI8dIt3+EcrLHAFPe5A4bgtw==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.3.0.tgz",
+      "integrity": "sha512-t6J3OrB5Fc0ExuhohouH0fWUGMYL6PTLhW+E7zIk/pdbnJARZDCwjBznFnkh5ynRnIRSI4YjtTH0t6USjJISrw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@tailwindcss/node": "4.2.4",
-        "@tailwindcss/oxide": "4.2.4",
-        "tailwindcss": "4.2.4"
+        "@tailwindcss/node": "4.3.0",
+        "@tailwindcss/oxide": "4.3.0",
+        "tailwindcss": "4.3.0"
       },
       "peerDependencies": {
         "vite": "^5.2.0 || ^6 || ^7 || ^8"
@@ -4257,6 +4272,15 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@tauri-apps/plugin-opener": {
+      "version": "2.5.4",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/plugin-opener/-/plugin-opener-2.5.4.tgz",
+      "integrity": "sha512-1HnPkb+AmgO29HBazm4uPLKB+r7zzcTBW1d0fyYp1uP+jwtpoiNDGKMMzz58SFp49nOIrxdE3aUJtT57lfO9CQ==",
+      "license": "MIT OR Apache-2.0",
+      "dependencies": {
+        "@tauri-apps/api": "^2.11.0"
+      }
+    },
     "node_modules/@tauri-apps/plugin-process": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/@tauri-apps/plugin-process/-/plugin-process-2.3.1.tgz",
@@ -5865,9 +5889,9 @@
       }
     },
     "node_modules/enhanced-resolve": {
-      "version": "5.21.0",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.21.0.tgz",
-      "integrity": "sha512-otxSQPw4lkOZWkHpB3zaEQs6gWYEsmX4xQF68ElXC/TWvGxGMSGOvoNbaLXm6/cS/fSfHtsEdw90y20PCd+sCA==",
+      "version": "5.21.2",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.21.2.tgz",
+      "integrity": "sha512-xe9vQb5kReirPUxgQrXA3ihgbCqssmTiM7cOZ+Gzu+VeGWgpV98lLZvp0dl4yriyAePcewxGUs9UpKD8PET9KQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -8095,6 +8119,16 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/next-themes": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
+      "integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/node-domexception": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
@@ -8772,9 +8806,9 @@
       }
     },
     "node_modules/react": {
-      "version": "19.2.5",
-      "resolved": "https://registry.npmjs.org/react/-/react-19.2.5.tgz",
-      "integrity": "sha512-llUJLzz1zTUBrskt2pwZgLq59AemifIftw4aB7JxOqf1HY2FDaGDxgwpAPVzHU1kdWabH7FauP4i1oEeer2WCA==",
+      "version": "19.2.6",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.6.tgz",
+      "integrity": "sha512-sfWGGfavi0xr8Pg0sVsyHMAOziVYKgPLNrS7ig+ivMNb3wbCBw3KxtflsGBAwD3gYQlE/AEZsTLgToRrSCjb0Q==",
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -8803,15 +8837,15 @@
       }
     },
     "node_modules/react-dom": {
-      "version": "19.2.5",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.5.tgz",
-      "integrity": "sha512-J5bAZz+DXMMwW/wV3xzKke59Af6CHY7G4uYLN1OvBcKEsWOs4pQExj86BBKamxl/Ik5bx9whOrvBlSDfWzgSag==",
+      "version": "19.2.6",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.6.tgz",
+      "integrity": "sha512-0prMI+hvBbPjsWnxDLxlCGyM8PN6UuWjEUCYmZhO67xIV9Xasa/r/vDnq+Xyq4Lo27g8QSbO5YzARu0D1Sps3g==",
       "license": "MIT",
       "dependencies": {
         "scheduler": "^0.27.0"
       },
       "peerDependencies": {
-        "react": "^19.2.5"
+        "react": "^19.2.6"
       }
     },
     "node_modules/react-hook-form": {
@@ -9680,9 +9714,9 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "4.2.4",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.4.tgz",
-      "integrity": "sha512-HhKppgO81FQof5m6TEnuBWCZGgfRAWbaeOaGT00KOy/Pf/j6oUihdvBpA7ltCeAvZpFhW3j0PTclkxsd4IXYDA==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.0.tgz",
+      "integrity": "sha512-y6nxMGB1nMW9R6k96e5gdIFzcfL/gTJRNaqGes1YvkLnPVXzWgbqFF2yLC0T8G774n24cx3Pe8XrKoniCOAH+Q==",
       "dev": true,
       "license": "MIT"
     },
@@ -10119,9 +10153,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "7.3.2",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.2.tgz",
-      "integrity": "sha512-Bby3NOsna2jsjfLVOHKes8sGwgl4TT0E6vvpYgnAYDIF/tie7MRaFthmKuHx1NSXjiTueXH3do80FMQgvEktRg==",
+      "version": "7.3.3",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.3.tgz",
+      "integrity": "sha512-/4XH147Ui7OGTjg3HbdWe5arnZQSbfuRzdr9Ec7TQi5I7R+ir0Rlc9GIvD4v0XZurELqA035KVXJXpR61xhiTA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
diff --git a/package.json b/package.json
index 02af832..aa0bdb4 100644
--- a/package.json
+++ b/package.json
@@ -29,9 +29,9 @@
     "markdown-to-jsx": "^9.7.16",
     "next-themes": "^0.4.6",
     "radix-ui": "^1.4.3",
-    "react": "^19.2.6",
+    "react": "19.2.6",
     "react-day-picker": "^9.14.0",
-    "react-dom": "^19.2.6",
+    "react-dom": "19.2.6",
     "react-hook-form": "^7.75.0",
     "react-icons": "^5.6.0",
     "react-router": "^7.15.0",
diff --git a/src/App.tsx b/src/App.tsx
index a06e4ed..4738fbf 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,7 +7,7 @@ import "./App.css";
 import { dashboardData } from "./features/Member/v1/mock/dashboardData";
 import { startAutoUpdater } from "./system/updater/autoUpdater";
 
-import { ThemeProvider } from "next-themes";
+import { ThemeProvider } from "./theme";
 import OrgRoute from "./routes/OrgRoute";
 import MemberRoutes from "./routes/MemberRoutes";
 
@@ -19,7 +19,7 @@ function App() {
   const user = dashboardData.user;
 
   return (
-    <ThemeProvider attribute="class" defaultTheme="light">
+    <ThemeProvider>
       <BrowserRouter>
 
        <OrgRoute />
diff --git a/src/features/Dashboard/components/AISuggestions.tsx b/src/features/Dashboard/components/AISuggestions.tsx
index 20fb459..56d2686 100644
--- a/src/features/Dashboard/components/AISuggestions.tsx
+++ b/src/features/Dashboard/components/AISuggestions.tsx
@@ -1,5 +1,5 @@
 import { Sparkles } from "lucide-react";
-import { Task } from "@/features/Dashboard/types/dashboard";
+import { Task } from "@/features/Dashboard/Member/v1/Type/dashboard";
 import { getAISuggestions } from "@/utils/aisuggestions";
 
 interface Props {
diff --git a/src/features/Dashboard/components/ActivityFeed.tsx b/src/features/Dashboard/components/ActivityFeed.tsx
index db5fa55..f9c9c54 100644
--- a/src/features/Dashboard/components/ActivityFeed.tsx
+++ b/src/features/Dashboard/components/ActivityFeed.tsx
@@ -1,5 +1,5 @@
 import { CheckCircle, MessageSquare, Bell } from "lucide-react";
-import { ActivityItem } from "@/features/Dashboard/types/dashboard";
+import { ActivityItem } from "@/features/Dashboard/Member/v1/Type/dashboard";
 import { useTheme } from "@/theme";
 
 interface Props {
diff --git a/src/features/Dashboard/components/BudgetCard.tsx b/src/features/Dashboard/components/BudgetCard.tsx
index ca1023e..2f86334 100644
--- a/src/features/Dashboard/components/BudgetCard.tsx
+++ b/src/features/Dashboard/components/BudgetCard.tsx
@@ -1,4 +1,4 @@
-import { Rewards } from "@/features/Dashboard/types/dashboard";
+import { Rewards } from "@/features/Dashboard/Member/v1/Type/dashboard";
 import { Gift, Star, Wallet } from "lucide-react";
 import { useTheme } from "@/theme";
 
diff --git a/src/features/Dashboard/components/CalendarWidget.tsx b/src/features/Dashboard/components/CalendarWidget.tsx
index 140d9aa..ff979ff 100644
--- a/src/features/Dashboard/components/CalendarWidget.tsx
+++ b/src/features/Dashboard/components/CalendarWidget.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 import { ChevronLeft, ChevronRight, CalendarDays } from "lucide-react";
-import { CalendarData } from "@/features/Dashboard/types/dashboard";
+import { CalendarData } from "@/features/Dashboard/Member/v1/Type/dashboard";
 
 interface Props {
   data: CalendarData;
diff --git a/src/features/Dashboard/components/CommunityStats.tsx b/src/features/Dashboard/components/CommunityStats.tsx
index a376cb3..d55f8e7 100644
--- a/src/features/Dashboard/components/CommunityStats.tsx
+++ b/src/features/Dashboard/components/CommunityStats.tsx
@@ -1,4 +1,4 @@
-import { CommunityStats } from "@/features/Dashboard/types/dashboard";
+import { CommunityStats } from "@/features/Dashboard/Member/v1/Type/dashboard";
 
 interface Props {
   data: CommunityStats;
diff --git a/src/features/Dashboard/components/RecentTasks.tsx b/src/features/Dashboard/components/RecentTasks.tsx
index c2048ff..d99719f 100644
--- a/src/features/Dashboard/components/RecentTasks.tsx
+++ b/src/features/Dashboard/components/RecentTasks.tsx
@@ -1,4 +1,4 @@
-import { Task } from "../types/dashboard";
+import { Task } from "@/features/Dashboard/Member/v1/Type/dashboard";
 import { Check, Eye } from "lucide-react";
 
 interface Props {
diff --git a/src/features/Dashboard/components/SmartReminders.tsx b/src/features/Dashboard/components/SmartReminders.tsx
index d3a1dca..bbc1db5 100644
--- a/src/features/Dashboard/components/SmartReminders.tsx
+++ b/src/features/Dashboard/components/SmartReminders.tsx
@@ -1,5 +1,5 @@
 import { AlertTriangle, Clock } from "lucide-react";
-import { Task } from "@/features/Dashboard/types/dashboard";
+import { Task } from "@/features/Dashboard/Member/v1/Type/dashboard";
 import { getSmartReminders } from "@/utils/reminders";
 
 interface Props {
diff --git a/src/features/Dashboard/components/TaskOverview.tsx b/src/features/Dashboard/components/TaskOverview.tsx
index 5400baf..5a9b9dd 100644
--- a/src/features/Dashboard/components/TaskOverview.tsx
+++ b/src/features/Dashboard/components/TaskOverview.tsx
@@ -1,5 +1,5 @@
 import { PieChart, Pie, Cell, ResponsiveContainer } from "recharts";
-import { Task } from "../types/dashboard";
+import { Task } from "@/features/Dashboard/Member/v1/Type/dashboard";
 
 interface Props {
   tasks: Task[];
diff --git a/src/features/Dashboard/components/TaskRow.tsx b/src/features/Dashboard/components/TaskRow.tsx
index c604e51..bfcd3f3 100644
--- a/src/features/Dashboard/components/TaskRow.tsx
+++ b/src/features/Dashboard/components/TaskRow.tsx
@@ -1,4 +1,4 @@
-import { Task } from "@/features/Dashboard/types/dashboard";
+import { Task } from "@/features/Dashboard/Member/v1/Type/dashboard";
 import { formatDueLabel } from "@/utils/task.utils";
 import { Check } from "lucide-react";
 
diff --git a/src/features/Dashboard/components/UpcomingUrgentTasks.tsx b/src/features/Dashboard/components/UpcomingUrgentTasks.tsx
index 5019b23..0130483 100644
--- a/src/features/Dashboard/components/UpcomingUrgentTasks.tsx
+++ b/src/features/Dashboard/components/UpcomingUrgentTasks.tsx
@@ -1,4 +1,4 @@
-import { Task } from "@/features/Dashboard/types/dashboard";
+import { Task } from "@/features/Dashboard/Member/v1/Type/dashboard";
 import { categorizeTasks } from "@/utils/task.utils";
 import TaskRow from "@/features/Dashboard/components/TaskRow";
 

From 7c8d4cb6f35e56499c42631866f3f5f4be8168fa Mon Sep 17 00:00:00 2001
From: Abhishek Kumar <abhishek.nexgen.dev@gmail.com>
Date: Sun, 10 May 2026 16:00:52 +0530
Subject: [PATCH 07/13] feat: Add comprehensive Linux packaging and deployment
 documentation for CommDesk

- Introduced FLATPAK_BUILD_GUIDE.md for Flatpak packaging instructions.
- Created FLATPAK_COMMANDS.sh for quick reference commands related to Flatpak.
- Developed PRODUCTION_DEPLOYMENT.md outlining production deployment strategies and CI/CD workflows.
- Established TESTING_AND_QA.md detailing testing architecture, QA workflows, and performance validation.
- Added latest.json for version management and release notes.
- Created org.commdesk.CommDesk.desktop for application integration.
- Included release.pub for update signing with Minisign public key.

Co-authored-by: Copilot <copilot@github.com>
---
 .flatpak-builder/ccache/disabled/ccache.conf |   1 -
 .github/workflows/release.yml                | 407 +++++++++
 .gitignore                                   |   9 +-
 docs/AUTO_UPDATE_SETUP_GUIDE.md              | 821 +++++++++++++++++++
 docs/FLATPAK_BUILD_GUIDE.md                  | 721 ++++++++++++++++
 docs/FLATPAK_COMMANDS.sh                     | 179 ++++
 docs/PRODUCTION_DEPLOYMENT.md                | 449 ++++++++++
 docs/TESTING_AND_QA.md                       | 652 +++++++++++++++
 latest.json                                  |  23 +
 org.commdesk.CommDesk.desktop                |   9 +
 org.commdesk.CommDesk.json                   |  20 +-
 release.pub                                  |   2 +
 src-tauri/tauri.conf.json                    |   2 +-
 13 files changed, 3287 insertions(+), 8 deletions(-)
 delete mode 100644 .flatpak-builder/ccache/disabled/ccache.conf
 create mode 100644 .github/workflows/release.yml
 create mode 100644 docs/AUTO_UPDATE_SETUP_GUIDE.md
 create mode 100644 docs/FLATPAK_BUILD_GUIDE.md
 create mode 100644 docs/FLATPAK_COMMANDS.sh
 create mode 100644 docs/PRODUCTION_DEPLOYMENT.md
 create mode 100644 docs/TESTING_AND_QA.md
 create mode 100644 latest.json
 create mode 100644 org.commdesk.CommDesk.desktop
 create mode 100644 release.pub

diff --git a/.flatpak-builder/ccache/disabled/ccache.conf b/.flatpak-builder/ccache/disabled/ccache.conf
deleted file mode 100644
index 4d6556c..0000000
--- a/.flatpak-builder/ccache/disabled/ccache.conf
+++ /dev/null
@@ -1 +0,0 @@
-disable = true
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
new file mode 100644
index 0000000..f55a586
--- /dev/null
+++ b/.github/workflows/release.yml
@@ -0,0 +1,407 @@
+name: Release - Build & Sign
+
+on:
+  push:
+    tags:
+      - 'v*'
+
+permissions:
+  contents: write
+  packages: write
+
+jobs:
+  build-tauri:
+    name: Build Tauri - ${{ matrix.platform }}
+    runs-on: ${{ matrix.os }}
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          # Linux
+          - os: ubuntu-latest
+            platform: linux
+            target: x86_64-unknown-linux-gnu
+            arch: x86_64
+
+          # macOS
+          - os: macos-latest
+            platform: macos
+            target: universal-apple-darwin
+            arch: universal
+
+          # Windows
+          - os: windows-latest
+            platform: windows
+            target: x86_64-pc-windows-msvc
+            arch: x86_64
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Rust
+        uses: dtolnay/rust-toolchain@stable
+        with:
+          targets: ${{ matrix.target }}
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install pnpm
+        run: npm install -g pnpm
+
+      - name: Install dependencies (Linux)
+        if: matrix.os == 'ubuntu-latest'
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y libssl-dev libgtk-3-dev libayatana-appindicator3-dev librsvg2-dev
+
+      - name: Install Rust dependencies (Linux)
+        if: matrix.os == 'ubuntu-latest'
+        run: |
+          rustup target add x86_64-unknown-linux-gnu
+
+      - name: Install frontend dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build frontend
+        run: pnpm run build
+
+      - name: Build Tauri (Linux)
+        if: matrix.platform == 'linux'
+        run: pnpm tauri build --target x86_64-unknown-linux-gnu
+
+      - name: Build Tauri (macOS)
+        if: matrix.platform == 'macos'
+        run: pnpm tauri build
+
+      - name: Build Tauri (Windows)
+        if: matrix.platform == 'windows'
+        run: pnpm tauri build
+
+      - name: Upload build artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: tauri-${{ matrix.platform }}
+          path: |
+            src-tauri/target/release/bundle/
+            !src-tauri/target/release/bundle/deps/
+          retention-days: 7
+
+  sign-and-release:
+    name: Sign Binaries & Create Release
+    runs-on: ubuntu-latest
+    needs: build-tauri
+    if: startsWith(github.ref, 'refs/tags/v')
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Install pnpm
+        run: npm install -g pnpm
+
+      - name: Install minisign
+        run: sudo apt-get install -y minisign
+
+      - name: Download all artifacts
+        uses: actions/download-artifact@v4
+        with:
+          path: artifacts/
+
+      - name: Prepare release files
+        run: |
+          mkdir -p release
+          
+          # Copy Linux artifacts
+          cp artifacts/tauri-linux/AppImage/CommDesk-*.AppImage.tar.gz* release/ 2>/dev/null || true
+          cp artifacts/tauri-linux/Rpm/commdesk-*.rpm* release/ 2>/dev/null || true
+          cp artifacts/tauri-linux/Deb/commdesk-*.deb* release/ 2>/dev/null || true
+          
+          # Copy macOS artifacts
+          cp artifacts/tauri-macos/Dmg/CommDesk-*.dmg* release/ 2>/dev/null || true
+          cp artifacts/tauri-macos/Macos/CommDesk-*.app.tar.gz* release/ 2>/dev/null || true
+          
+          # Copy Windows artifacts
+          cp artifacts/tauri-windows/Msi/CommDesk-*.msi.zip* release/ 2>/dev/null || true
+          cp artifacts/tauri-windows/Nsis/CommDesk-*-setup.exe* release/ 2>/dev/null || true
+
+      - name: Setup minisign key
+        env:
+          MINISIGN_PRIVATE_KEY: ${{ secrets.MINISIGN_PRIVATE_KEY }}
+        run: |
+          mkdir -p ~/.minisign
+          echo "$MINISIGN_PRIVATE_KEY" > ~/.minisign/key.txt
+          chmod 600 ~/.minisign/key.txt
+
+      - name: Sign binaries
+        run: |
+          cd release
+          
+          # Sign all binary files
+          for file in CommDesk-* commdesk-* *.exe *.dmg; do
+            if [ -f "$file" ] && [[ ! "$file" =~ \.sig$ ]]; then
+              echo "Signing: $file"
+              minisign -S -s ~/.minisign/key.txt \
+                -t "CommDesk ${{ github.ref_name }}" \
+                -x "${file}.sig" \
+                -m "$file"
+            fi
+          done
+          
+          ls -lah
+
+      - name: Generate latest.json
+        run: |
+          VERSION="${{ github.ref_name }}"
+          VERSION="${VERSION#v}"  # Remove 'v' prefix
+          
+          cat > latest.json << EOF
+          {
+            "version": "${VERSION}",
+            "notes": "CommDesk ${VERSION}",
+            "pub_date": "$(date -u +%Y-%m-%dT%H:%M:%SZ)",
+            "platforms": {
+              "linux-x86_64": {
+                "signature": "$(cat release/CommDesk-*-linux-x86_64.AppImage.tar.gz.sig 2>/dev/null | tail -1 || echo '')",
+                "url": "https://github.com/${{ github.repository }}/releases/download/${{ github.ref_name }}/CommDesk-${VERSION}-linux-x86_64.AppImage.tar.gz"
+              },
+              "darwin-aarch64": {
+                "signature": "$(cat release/CommDesk-*-macos-universal.tar.gz.sig 2>/dev/null | tail -1 || echo '')",
+                "url": "https://github.com/${{ github.repository }}/releases/download/${{ github.ref_name }}/CommDesk-${VERSION}-macos-universal.tar.gz"
+              },
+              "darwin-x86_64": {
+                "signature": "$(cat release/CommDesk-*-macos-x86_64.tar.gz.sig 2>/dev/null | tail -1 || echo '')",
+                "url": "https://github.com/${{ github.repository }}/releases/download/${{ github.ref_name }}/CommDesk-${VERSION}-macos-x86_64.tar.gz"
+              },
+              "windows-x86_64": {
+                "signature": "$(cat release/CommDesk-*-windows-x86_64.msi.zip.sig 2>/dev/null | tail -1 || echo '')",
+                "url": "https://github.com/${{ github.repository }}/releases/download/${{ github.ref_name }}/CommDesk-${VERSION}-windows-x86_64.msi.zip"
+              }
+            }
+          }
+          EOF
+          
+          cp latest.json release/latest.json
+          cat release/latest.json
+
+      - name: Create Release Notes
+        run: |
+          cat > release/RELEASE_NOTES.md << 'EOF'
+          # CommDesk ${{ github.ref_name }}
+          
+          ## Changelog
+          
+          $(git log $(git describe --tags --abbrev=0)..HEAD --oneline | sed 's/^/- /')
+          
+          ## Platform Support
+          
+          - **Linux**: AppImage, Snap, Flathub
+          - **macOS**: Universal (Intel + Apple Silicon)
+          - **Windows**: NSIS Installer, MSI
+          
+          ## Installation
+          
+          ### Linux (Snap)
+          ```bash
+          snap install commdesk
+          ```
+          
+          ### Linux (Flathub)
+          ```bash
+          flatpak install flathub org.commdesk.CommDesk
+          ```
+          
+          ### macOS
+          Download DMG and drag to Applications
+          
+          ### Windows
+          Run MSI installer
+          
+          ## Auto-Update
+          
+          All versions have automatic updates enabled. The app will check for updates on startup and periodically.
+          
+          For Snap: `snap refresh`
+          For Flathub: `flatpak update`
+          For other platforms: Auto-update from within app
+          
+          ## Signatures
+          
+          Binaries are signed with minisign. Verify with:
+          ```bash
+          minisign -Vm binary.tar.gz.sig -p release.pub
+          ```
+          
+          EOF
+
+      - name: Upload to GitHub Release
+        uses: softprops/action-gh-release@v2
+        with:
+          files: |
+            release/*
+            !release/latest.json
+            latest.json
+          draft: false
+          prerelease: false
+          generate_release_notes: false
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Verify release
+        run: |
+          echo "✅ Release created: ${{ github.ref_name }}"
+          echo "📦 Files:"
+          ls -lah release/
+          echo ""
+          echo "📋 Latest.json:"
+          cat release/latest.json | jq .
+
+  build-snap:
+    name: Build & Release Snap
+    runs-on: ubuntu-latest
+    if: startsWith(github.ref, 'refs/tags/v')
+    needs: build-tauri
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Install snapcraft
+        run: sudo apt-get install -y snapcraft
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Install pnpm
+        run: npm install -g pnpm
+
+      - name: Setup Rust
+        uses: dtolnay/rust-toolchain@stable
+
+      - name: Build snap
+        run: |
+          snapcraft --use-lxd
+        env:
+          SNAPCRAFT_STORE_CREDENTIALS: ${{ secrets.SNAPCRAFT_STORE_CREDENTIALS }}
+
+      - name: Upload snap to candidate channel
+        run: |
+          echo "Uploading to Snap Store (candidate channel)..."
+          snapcraft upload commdesk_*.snap --release=candidate
+        env:
+          SNAPCRAFT_STORE_CREDENTIALS: ${{ secrets.SNAPCRAFT_STORE_CREDENTIALS }}
+
+      - name: Publish to stable after testing
+        run: |
+          echo "📢 Snap uploaded to candidate channel"
+          echo "After testing, run: snapcraft release commdesk <REVISION> stable"
+
+  build-flatpak:
+    name: Test Flatpak Build
+    runs-on: ubuntu-latest
+    container:
+      image: ghcr.io/flathub/flatpak-github-actions:latest
+      options: --privileged
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Check manifest
+        run: |
+          if [ ! -f "org.commdesk.CommDesk.json" ]; then
+            echo "❌ Flatpak manifest not found"
+            exit 1
+          fi
+          echo "✅ Manifest found"
+
+      - name: Lint Flatpak manifest
+        uses: flathub/flatpak-github-actions/flatpak-builder-lint@v6
+        with:
+          manifest: org.commdesk.CommDesk.json
+          cache: false
+
+      - name: Build Flatpak
+        uses: flathub/flatpak-github-actions/flatpak-builder@v6
+        with:
+          bundle: commdesk.flatpak
+          manifest-path: org.commdesk.CommDesk.json
+          cache: false
+
+      - name: Upload test build
+        uses: actions/upload-artifact@v4
+        with:
+          name: flatpak-test-build
+          path: commdesk.flatpak
+          retention-days: 7
+
+  notification:
+    name: Send Notifications
+    runs-on: ubuntu-latest
+    needs: [sign-and-release, build-snap, build-flatpak]
+    if: always()
+
+    steps:
+      - name: Check release status
+        run: |
+          if [ "${{ needs.sign-and-release.result }}" == "success" ]; then
+            echo "✅ Tauri release successful"
+          else
+            echo "⚠️ Tauri release failed"
+          fi
+          
+          if [ "${{ needs.build-snap.result }}" == "success" ]; then
+            echo "✅ Snap build successful (uploaded to candidate)"
+          else
+            echo "⚠️ Snap build failed"
+          fi
+          
+          if [ "${{ needs.build-flatpak.result }}" == "success" ]; then
+            echo "✅ Flatpak build successful"
+          else
+            echo "⚠️ Flatpak build failed"
+          fi
+
+      - name: Print next steps
+        run: |
+          cat << 'EOF'
+          
+          📋 NEXT STEPS FOR RELEASE ${{ github.ref_name }}:
+          
+          1️⃣ TAURI (GitHub Releases)
+          ✅ Build complete and signed
+          ✅ Uploaded to https://github.com/${{ github.repository }}/releases
+          ✅ Latest.json created for auto-update
+          
+          2️⃣ SNAP
+          ⏭️  Build uploaded to candidate channel
+          📝 After testing (usually 24h):
+             snapcraft release commdesk <REVISION> stable
+          
+          3️⃣ FLATHUB
+          📝 Create PR to https://github.com/flathub/flathub
+             Update: org.commdesk.CommDesk/org.commdesk.CommDesk.json
+             Set source commit to: ${{ github.sha }}
+          
+          ✨ Once all channels publish:
+             - Linux users on Snap get update in ~24h
+             - Linux users on Flathub get update within hours
+             - macOS/Windows users get update notification in app
+          
+          EOF
+
+permissions:
+  contents: write
+  actions: read
+  packages: read
diff --git a/.gitignore b/.gitignore
index 99c9967..f5a32e4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,6 +12,11 @@ dist
 dist-ssr
 *.local
 
+
+release.key
+*.key
+*.sec
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
@@ -29,4 +34,6 @@ build-dir
 # Environment variables (local secrets)
 .env
 .env.*
-!.env.example
\ No newline at end of file
+!.env.example
+
+
diff --git a/docs/AUTO_UPDATE_SETUP_GUIDE.md b/docs/AUTO_UPDATE_SETUP_GUIDE.md
new file mode 100644
index 0000000..81e8ca2
--- /dev/null
+++ b/docs/AUTO_UPDATE_SETUP_GUIDE.md
@@ -0,0 +1,821 @@
+# 🚀 CommDesk Auto-Update System 
+
+# Enterprise-Grade Auto-Update Infrastructure for Tauri, Snap, Flathub, AppImage, Windows & macOS
+
+This document is the complete source of truth for implementing, deploying, securing, testing, monitoring, and maintaining the CommDesk auto-update ecosystem.
+
+It covers:
+
+* Tauri auto-updater
+* GitHub Releases integration
+* Snap auto-updates
+* Flathub auto-updates
+* Release signing
+* CI/CD automation
+* Rollback systems
+* Security verification
+* Production deployment
+* Monitoring & analytics
+* Enterprise release workflows
+
+Reference architecture and implementation details:
+
+
+---
+
+# 🧠 What Is Auto-Update?
+
+Auto-update allows CommDesk to:
+
+* Detect new releases automatically
+* Download updates securely
+* Verify signatures
+* Install updates safely
+* Restart into the latest version
+
+without requiring users to manually reinstall the app.
+
+---
+
+# 🏗 CommDesk Update Architecture
+
+```bash id="1j13c2"
+CommDesk Update Architecture
+
+Users
+│
+├── Linux (Flatpak)
+│   └── Flathub Updates
+│
+├── Linux (Snap)
+│   └── Snap Store Updates
+│
+├── Linux (AppImage)
+│   └── Tauri Updater
+│
+├── Windows (MSI/NSIS)
+│   └── Tauri Updater
+│
+└── macOS (DMG)
+    └── Tauri Updater
+```
+
+---
+
+# 📦 Update Systems Used
+
+| Platform | Update System  |
+| -------- | -------------- |
+| AppImage | Tauri Updater  |
+| Windows  | Tauri Updater  |
+| macOS    | Tauri Updater  |
+| Snap     | Snapd          |
+| Flatpak  | Flathub/Ostree |
+
+---
+
+# 🎯 Recommended Production Strategy
+
+## Official Strategy
+
+| Distribution  | Purpose                    |
+| ------------- | -------------------------- |
+| Flatpak       | Primary Linux Distribution |
+| Snap          | Ubuntu Ecosystem           |
+| AppImage      | Portable Distribution      |
+| Tauri Updater | Windows/macOS/AppImage     |
+
+---
+
+# 🔐 Security Architecture
+
+# Core Security Principles
+
+Every update must be:
+
+* Signed
+* Verified
+* Version validated
+* Integrity checked
+* Securely downloaded
+
+---
+
+# 🔑 Release Signing System
+
+CommDesk uses:
+
+```bash id="h0z3fg"
+Minisign
+```
+
+for cryptographic verification.
+
+---
+
+# 🛠 STEP 1 — Install Minisign
+
+# Ubuntu/Debian
+
+```bash id="8gwrb4"
+sudo apt install minisign
+```
+
+---
+
+# macOS
+
+```bash id="f4nd4z"
+brew install minisign
+```
+
+---
+
+# Fedora
+
+```bash id="jlwm2u"
+sudo dnf install minisign
+```
+
+---
+
+# 🔐 STEP 2 — Generate Signing Keys
+
+```bash id="jlwm3e"
+minisign -G -p release.pub -s release.key
+```
+
+Generated files:
+
+| File        | Purpose     |
+| ----------- | ----------- |
+| release.pub | Public key  |
+| release.key | Private key |
+
+---
+
+# 🚨 CRITICAL SECURITY RULE
+
+## NEVER COMMIT
+
+```bash id="xql5n4"
+release.key
+```
+
+to GitHub.
+
+---
+
+# Add To .gitignore
+
+```bash id="jlwm9e"
+release.key
+*.key
+*.sec
+```
+
+---
+
+# Move Private Key
+
+```bash id="ywqz9s"
+mkdir -p ~/.minisign
+mv release.key ~/.minisign/release.key
+chmod 600 ~/.minisign/release.key
+```
+
+---
+
+# 🟦 STEP 3 — Configure Tauri Updater
+
+# File
+
+```bash id="jlwm5h"
+src-tauri/tauri.conf.json
+```
+
+---
+
+# Add Updater Config
+
+```json id="jlwm7n"
+"plugins": {
+  "updater": {
+    "pubkey": "YOUR_PUBLIC_KEY",
+    "endpoints": [
+      "https://github.com/NexGenStudioDev/CommDesk/releases/latest/download/latest.json"
+    ],
+    "windows": {
+      "installMode": "passive"
+    }
+  }
+}
+```
+
+---
+
+# 📦 STEP 4 — Build Production Release
+
+```bash id="jlwm1m"
+pnpm tauri build
+```
+
+Generated output:
+
+```bash id="w6h4a4"
+src-tauri/target/release/bundle/
+```
+
+---
+
+# 🔏 STEP 5 — Sign Release Files
+
+```bash id="jlwm0m"
+minisign -S \
+-s ~/.minisign/release.key \
+-x file.sig \
+-m file
+```
+
+---
+
+# Example
+
+```bash id="jlwm7v"
+minisign -S \
+-s ~/.minisign/release.key \
+-x CommDesk.AppImage.sig \
+-m CommDesk.AppImage
+```
+
+---
+
+# 📄 STEP 6 — Create latest.json
+
+# Required For Tauri Updater
+
+Create:
+
+```bash id="jlwm4f"
+latest.json
+```
+
+This latest.json is responsible for telling the Tauri updater:
+
+* what version is available
+* what notes to show the user
+* when the release was published
+* which download URL to use for each platform
+* which signature file to verify before installation
+
+Before publishing latest.json, also create the matching signature file for each build artifact:
+
+```bash
+minisign -S \
+    -s ~/.minisign/release.key \
+    -x CommDesk.AppImage.sig \
+    -m CommDesk.AppImage
+```
+
+The resulting .sig file must be uploaded with the release and its signature content must be referenced inside latest.json.
+
+
+
+---
+
+# Example
+
+```json
+{
+  "version": "1.0.0",
+  "notes": "Performance improvements and bug fixes",
+  "pub_date": "2026-05-10T10:00:00Z",
+  "platforms": {
+    "linux-x86_64": {
+      "signature": "SIGNATURE_HERE",
+      "url": "https://github.com/NexGenStudioDev/CommDesk/releases/download/v1.0.0/CommDesk.AppImage"
+    }
+  }
+}
+```
+
+---
+
+# 📤 STEP 7 — Create GitHub Release
+
+# Install GitHub CLI
+
+```bash id="6y4wfg"
+gh auth login
+```
+
+---
+
+# Create Release
+
+```bash id="jlwm2f"
+gh release create v1.0.0 \
+CommDesk.AppImage \
+CommDesk.AppImage.sig \
+latest.json \
+--notes "CommDesk v1.0.0"
+```
+
+---
+
+# 🔄 How Tauri Auto-Update Works
+
+```bash id="b7v4cu"
+App Starts
+    ↓
+Check latest.json
+    ↓
+Compare versions
+    ↓
+Download update
+    ↓
+Verify signature
+    ↓
+Install update
+    ↓
+Restart app
+```
+
+---
+
+# 🖥 Frontend Update UI
+
+# React Example
+
+```tsx id="jlwm8g"
+const { shouldUpdate, manifest } =
+await checkForUpdates();
+
+if (shouldUpdate) {
+  await installUpdate();
+  await relaunch();
+}
+```
+
+---
+
+# Recommended Features
+
+* Update notification dialog
+* Release notes
+* Progress bar
+* Retry support
+* Restart button
+
+---
+
+# 📦 Snap Auto-Update
+
+# How Snap Updates Work
+
+Snapd automatically:
+
+* Checks every few hours
+* Downloads updates
+* Installs safely
+* Allows rollback
+
+---
+
+# Install Snapcraft
+
+```bash id="jlwm1b"
+sudo apt install snapcraft
+```
+
+---
+
+# Configure snapcraft.yaml
+
+```yaml id="jlwm5c"
+name: commdesk
+version: '1.0.0'
+
+grade: stable
+confinement: strict
+```
+
+---
+
+# Build Snap
+
+```bash id="jlwm2b"
+snapcraft
+```
+
+---
+
+# Login
+
+```bash id="jlwm0f"
+snapcraft login
+```
+
+---
+
+# Upload
+
+```bash id="9wz7p9"
+snapcraft upload commdesk.snap --release=candidate
+```
+
+---
+
+# Release To Stable
+
+```bash id="0q2xqt"
+snapcraft release commdesk 1 stable
+```
+
+---
+
+# Snap Update Flow
+
+```bash id="jlwm4v"
+Snap Store
+    ↓
+snapd checks updates
+    ↓
+Download update
+    ↓
+Install automatically
+```
+
+---
+
+# Snap Channels
+
+| Channel   | Purpose           |
+| --------- | ----------------- |
+| edge      | Experimental      |
+| beta      | Beta              |
+| candidate | Release candidate |
+| stable    | Production        |
+
+---
+
+# 🐧 Flathub Auto-Update
+
+# How Flathub Updates Work
+
+Flathub uses:
+
+```bash id="jlwm8k"
+Ostree
+```
+
+for secure transactional updates.
+
+---
+
+# Create Manifest
+
+```bash id="jlwm7k"
+org.commdesk.CommDesk.json
+```
+
+---
+
+# Example Config
+
+```json id="jlwm1y"
+{
+  "app-id": "org.commdesk.CommDesk",
+  "runtime": "org.freedesktop.Platform",
+  "runtime-version": "25.08"
+}
+```
+
+---
+
+# Build Flatpak
+
+```bash id="jlwm3n"
+flatpak-builder \
+--force-clean \
+--user \
+--install-deps-from=flathub \
+--repo=repo \
+builddir \
+org.commdesk.CommDesk.json
+```
+
+---
+
+# Submit To Flathub
+
+1. Fork Flathub repo
+2. Add manifest
+3. Create PR
+4. Pass CI checks
+5. Flathub publishes app
+
+---
+
+# Flathub Update Flow
+
+```bash id="jlwm7e"
+Flathub
+    ↓
+Detect new release
+    ↓
+Build package
+    ↓
+Publish update
+    ↓
+User receives update
+```
+
+---
+
+# ⚡ GitHub Actions Automation
+
+# Create Workflow
+
+```bash id="9thx0f"
+.github/workflows/release.yml
+```
+
+---
+
+# Responsibilities
+
+GitHub Actions should:
+
+* Build app
+* Sign binaries
+* Generate latest.json
+* Upload GitHub release
+* Upload Snap
+* Build Flatpak
+
+---
+
+# Example Pipeline
+
+```yaml id="jlwm5p"
+- pnpm install
+- pnpm build
+- pnpm tauri build
+- minisign signing
+- gh release upload
+```
+
+---
+
+# 🔄 Release Workflow
+
+# Production Workflow
+
+```bash id="jlwm8m"
+Update version
+    ↓
+Commit changes
+    ↓
+Create git tag
+    ↓
+Push tag
+    ↓
+GitHub Actions starts
+    ↓
+Build all platforms
+    ↓
+Sign releases
+    ↓
+Upload releases
+    ↓
+Users receive updates
+```
+
+---
+
+# Example Release Commands
+
+```bash id="jlwm2q"
+git tag v1.0.0
+git push origin v1.0.0
+```
+
+---
+
+# 🧪 Auto-Update Testing
+
+# Test Tauri Updates
+
+## Local Server
+
+```bash id="jlwm5u"
+python3 -m http.server 3000
+```
+
+---
+
+# Validate latest.json
+
+```bash id="jlwm8y"
+curl http://localhost:3000/latest.json
+```
+
+---
+
+# Test Signature
+
+```bash id="jlwm6g"
+minisign -Vm file.sig -p release.pub
+```
+
+---
+
+# Test Snap
+
+```bash id="jlwm4m"
+snap refresh commdesk
+```
+
+---
+
+# Test Flatpak
+
+```bash id="jlwm7m"
+flatpak update
+```
+
+---
+
+# 🧠 Rollback System
+
+# Snap Rollback
+
+```bash id="jlwm0v"
+snap revert commdesk
+```
+
+---
+
+# Flatpak Rollback
+
+```bash id="jlwm6v"
+flatpak repair
+```
+
+---
+
+# Manual Rollback
+
+Keep previous builds:
+
+```bash id="jlwm9b"
+CommDesk.old.AppImage
+```
+
+---
+
+# 📊 Monitoring & Analytics
+
+Track:
+
+* Update success rate
+* Failed installs
+* Download stats
+* Adoption rate
+* Crash reports
+
+---
+
+# Example Analytics Event
+
+```ts id="jlwm4y"
+trackUpdate("installed", {
+  version: "1.0.0"
+});
+```
+
+---
+
+# 📈 Recommended Enterprise Infrastructure
+
+| Component       | Recommended      |
+| --------------- | ---------------- |
+| Release Hosting | GitHub Releases  |
+| Linux Store     | Flathub          |
+| Ubuntu Store    | Snap Store       |
+| Signing         | Minisign         |
+| CI/CD           | GitHub Actions   |
+| Monitoring      | Custom analytics |
+
+---
+
+# 🔥 Production Best Practices
+
+# DO
+
+✅ Sign every binary
+✅ Test every release
+✅ Use stable channels
+✅ Monitor failures
+✅ Keep rollback support
+✅ Use semantic versioning
+✅ Keep release notes detailed
+
+---
+
+# DO NOT
+
+❌ Commit private keys
+❌ Disable signature verification
+❌ Ship untested releases
+❌ Force updates
+❌ Use unrestricted permissions
+❌ Skip rollback planning
+
+---
+
+# 📋 Production Release Checklist
+
+## Before Release
+
+* [ ] Version updated
+* [ ] CHANGELOG updated
+* [ ] Tests passing
+* [ ] Binaries signed
+* [ ] latest.json generated
+* [ ] GitHub release ready
+
+---
+
+## After Release
+
+* [ ] GitHub release verified
+* [ ] Snap uploaded
+* [ ] Flathub updated
+* [ ] Update notification tested
+* [ ] Metrics monitored
+
+---
+
+# 🚨 Common Problems
+
+# Tauri Update Failed
+
+## Causes
+
+* Invalid latest.json
+* Wrong signature
+* Incorrect version format
+* Broken URLs
+
+---
+
+# Snap Not Updating
+
+## Fix
+
+```bash id="jlwm8b"
+snap refresh commdesk
+```
+
+---
+
+# Flathub Build Failed
+
+## Fix
+
+```bash id="jlwm5b"
+flatpak-builder --verbose
+```
+
+---
+
+# Signature Verification Failed
+
+## Fix
+
+Re-sign using same private key.
+
+---
+
+# 🎯 Final Production Architecture
+
+```bash id="jlwm9m"
+GitHub Actions
+    ↓
+Build CommDesk
+    ↓
+Sign Releases
+    ↓
+Publish GitHub Release
+    ↓
+Publish Snap
+    ↓
+Publish Flathub
+    ↓
+Users Receive Secure Updates
+```
+
+---
+
diff --git a/docs/FLATPAK_BUILD_GUIDE.md b/docs/FLATPAK_BUILD_GUIDE.md
new file mode 100644
index 0000000..4121549
--- /dev/null
+++ b/docs/FLATPAK_BUILD_GUIDE.md
@@ -0,0 +1,721 @@
+# 🚀 CommDesk Linux Distribution Guide
+
+# Production-Ready Packaging for Flatpak, Snap, AppImage & Enterprise Linux Distribution
+
+CommDesk is designed as a modern large-scale desktop platform built using:
+
+* Tauri
+* Rust
+* React
+* TypeScript
+* Vite
+
+This guide explains how to package, test, optimize, and distribute CommDesk for Linux using:
+
+* Flatpak
+* Snap
+* AppImage
+* Native Linux bundles
+* Enterprise-grade release workflows
+
+---
+
+# 📦 Supported Linux Distribution Formats
+
+| Format   | Best For                     | Sandbox  | Auto Update | Store Support   |
+| -------- | ---------------------------- | -------- | ----------- | --------------- |
+| Flatpak  | Universal Linux Distribution | ✅ Strong | ✅           | Flathub         |
+| Snap     | Ubuntu Ecosystem             | ✅ Strong | ✅           | Snap Store      |
+| AppImage | Portable Distribution        | ❌        | ❌ Manual    | Direct Download |
+| DEB      | Debian/Ubuntu                | ❌        | Manual/APT  | Native          |
+| RPM      | Fedora/RHEL                  | ❌        | Manual/DNF  | Native          |
+
+---
+
+# 🏗 Recommended Production Distribution Strategy
+
+## Primary Distribution
+
+### ✅ Flatpak
+
+Best for:
+
+* Security
+* Sandboxing
+* Enterprise deployment
+* Cross-distro support
+* Flathub visibility
+
+---
+
+## Secondary Distribution
+
+### ✅ AppImage
+
+Best for:
+
+* Portable usage
+* No installation required
+* Quick testing
+* Offline environments
+
+---
+
+## Optional Distribution
+
+### ✅ Snap
+
+Best for:
+
+* Ubuntu ecosystem
+* Auto updates
+* Canonical Store distribution
+
+---
+
+# 🧱 System Requirements
+
+## Minimum
+
+| Resource | Requirement           |
+| -------- | --------------------- |
+| RAM      | 4GB                   |
+| CPU      | Dual Core             |
+| Storage  | 500MB                 |
+| GPU      | OpenGL/Vulkan Support |
+
+---
+
+## Recommended
+
+| Resource | Requirement           |
+| -------- | --------------------- |
+| RAM      | 8GB+                  |
+| CPU      | Quad Core             |
+| Storage  | SSD                   |
+| GPU      | Hardware acceleration |
+
+---
+
+# 🔧 Required Dependencies
+
+---
+
+# Ubuntu / Debian
+
+```bash
+sudo apt update
+
+sudo apt install -y \
+flatpak \
+flatpak-builder \
+curl \
+wget \
+fuse \
+libwebkit2gtk-4.1-dev \
+build-essential \
+pkg-config \
+libssl-dev \
+libgtk-3-dev \
+librsvg2-dev \
+patchelf
+```
+
+---
+
+# Fedora
+
+```bash
+sudo dnf install \
+flatpak \
+flatpak-builder \
+webkit2gtk4.1-devel \
+openssl-devel \
+gtk3-devel \
+librsvg2-devel \
+patchelf
+```
+
+---
+
+# Arch Linux
+
+```bash
+sudo pacman -S \
+flatpak \
+flatpak-builder \
+webkit2gtk \
+base-devel \
+openssl \
+gtk3 \
+librsvg \
+patchelf
+```
+
+---
+
+# 🦀 Rust Setup
+
+Install Rust:
+
+```bash
+curl https://sh.rustup.rs -sSf | sh
+```
+
+Verify:
+
+```bash
+rustc --version
+cargo --version
+```
+
+---
+
+# 🟦 Node.js Setup
+
+Recommended:
+
+* Node.js 20+
+* pnpm latest
+
+Install:
+
+```bash
+npm install -g pnpm
+```
+
+---
+
+# 📁 Project Structure
+
+```bash
+commdesk/
+├── src/
+├── src-tauri/
+├── flatpak/
+├── snap/
+├── scripts/
+├── dist/
+├── package.json
+├── pnpm-lock.yaml
+├── org.commdesk.CommDesk.json
+└── README.md
+```
+
+---
+
+# 🚀 Flatpak Packaging Guide
+
+# Why Flatpak?
+
+Flatpak provides:
+
+* Sandboxed execution
+* Cross-distribution support
+* Secure permissions
+* Runtime dependency isolation
+* Enterprise deployment compatibility
+
+---
+
+# Step 1 — Install Flathub
+
+```bash
+flatpak remote-add --if-not-exists \
+--user flathub \
+https://dl.flathub.org/repo/flathub.flatpakrepo
+```
+
+---
+
+# Step 2 — Install Required SDK Extensions
+
+```bash
+flatpak install flathub \
+org.freedesktop.Platform//25.08 \
+org.freedesktop.Sdk//25.08 \
+org.freedesktop.Sdk.Extension.rust-stable//25.08 \
+org.freedesktop.Sdk.Extension.node20//25.08
+```
+
+---
+
+# Step 3 — Flatpak Manifest
+
+Create:
+
+```bash
+org.commdesk.CommDesk.json
+```
+
+---
+
+# Example Manifest
+
+```json
+{
+  "app-id": "org.commdesk.CommDesk",
+  "runtime": "org.freedesktop.Platform",
+  "runtime-version": "25.08",
+  "sdk": "org.freedesktop.Sdk",
+  "command": "commdesk",
+  "finish-args": [
+    "--share=network",
+    "--share=ipc",
+    "--socket=x11",
+    "--socket=wayland",
+    "--device=dri",
+    "--filesystem=home"
+  ],
+  "modules": [
+    {
+      "name": "commdesk",
+      "buildsystem": "simple",
+      "build-commands": [
+        "pnpm install",
+        "pnpm build",
+        "cargo build --release"
+      ],
+      "sources": [
+        {
+          "type": "dir",
+          "path": "."
+        }
+      ]
+    }
+  ]
+}
+```
+
+---
+
+# Step 4 — Build Flatpak
+
+```bash
+flatpak-builder \
+--force-clean \
+--user \
+--install-deps-from=flathub \
+--repo=repo \
+builddir \
+org.commdesk.CommDesk.json
+```
+
+---
+
+# Step 5 — Install Local Build
+
+```bash
+flatpak install --user local org.commdesk.CommDesk
+```
+
+---
+
+# Step 6 — Run
+
+```bash
+flatpak run org.commdesk.CommDesk
+```
+
+---
+
+# 📦 Create Flatpak Bundle
+
+```bash
+flatpak build-bundle \
+repo \
+commdesk.flatpak \
+org.commdesk.CommDesk \
+--runtime-repo=https://flathub.org/repo/flathub.flatpakrepo
+```
+
+---
+
+# 🧪 Flatpak Production Testing
+
+---
+
+# Sandbox Testing
+
+```bash
+flatpak run --no-documents org.commdesk.CommDesk
+```
+
+---
+
+# Performance Testing
+
+```bash
+flatpak run \
+--command=bash \
+org.commdesk.CommDesk \
+-c "time /app/bin/commdesk"
+```
+
+---
+
+# Debug Logs
+
+```bash
+G_MESSAGES_DEBUG=all \
+flatpak run org.commdesk.CommDesk
+```
+
+---
+
+# 🔐 Flatpak Security Recommendations
+
+## Recommended Permissions
+
+| Permission  | Reason                |
+| ----------- | --------------------- |
+| network     | API communication     |
+| wayland/x11 | GUI rendering         |
+| dri         | GPU acceleration      |
+| home        | User workspace access |
+
+---
+
+## Avoid
+
+❌ Full filesystem access
+❌ Unnecessary DBus access
+❌ System device permissions
+
+---
+
+# 🚀 Snap Packaging Guide
+
+# Why Snap?
+
+Snap provides:
+
+* Automatic updates
+* Ubuntu ecosystem integration
+* Canonical Store support
+* Sandboxing
+* Rollback support
+
+---
+
+# Install Snapcraft
+
+## Ubuntu
+
+```bash
+sudo apt install snapcraft
+```
+
+---
+
+# Create Snap Directory
+
+```bash
+mkdir snap
+```
+
+---
+
+# Create snapcraft.yaml
+
+```yaml
+name: commdesk
+base: core24
+version: '1.0.0'
+summary: CommDesk Community Management Platform
+description: |
+  CommDesk is a modern community and event management platform.
+
+grade: stable
+confinement: strict
+
+apps:
+  commdesk:
+    command: bin/commdesk
+    plugs:
+      - network
+      - home
+      - desktop
+      - wayland
+      - x11
+      - opengl
+
+parts:
+  commdesk:
+    plugin: rust
+    source: .
+    build-packages:
+      - build-essential
+      - pkg-config
+      - libssl-dev
+      - libgtk-3-dev
+      - libwebkit2gtk-4.1-dev
+```
+
+---
+
+# Build Snap
+
+```bash
+snapcraft
+```
+
+---
+
+# Install Local Snap
+
+```bash
+sudo snap install commdesk_1.0.0_amd64.snap --dangerous
+```
+
+---
+
+# Run
+
+```bash
+snap run commdesk
+```
+
+---
+
+# 🟨 AppImage Packaging Guide
+
+# Why AppImage?
+
+Best for:
+
+* Portable distribution
+* No installation
+* Easy testing
+* Direct downloads
+
+---
+
+# Install Dependencies
+
+```bash
+sudo apt install appimagekit
+```
+
+---
+
+# Build Using Tauri
+
+```bash
+pnpm tauri build
+```
+
+Generated output:
+
+```bash
+src-tauri/target/release/bundle/appimage/
+```
+
+---
+
+# Make Executable
+
+```bash
+chmod +x CommDesk.AppImage
+```
+
+---
+
+# Run
+
+```bash
+./CommDesk.AppImage
+```
+
+---
+
+# 📦 Native Linux Packages
+
+# DEB Build
+
+```bash
+pnpm tauri build --bundles deb
+```
+
+---
+
+# RPM Build
+
+```bash
+pnpm tauri build --bundles rpm
+```
+
+---
+
+# 📈 Production Optimization
+
+# Release Build
+
+Always use:
+
+```bash
+cargo build --release
+```
+
+---
+
+# Rust Optimization
+
+## Cargo.toml
+
+```toml
+[profile.release]
+lto = true
+codegen-units = 1
+panic = "abort"
+strip = true
+opt-level = "z"
+```
+
+---
+
+# Frontend Optimization
+
+## vite.config.ts
+
+```ts
+build: {
+  sourcemap: false,
+  minify: "esbuild",
+}
+```
+
+---
+
+# 🧪 Enterprise QA Checklist
+
+# Build Validation
+
+* [ ] TypeScript passes
+* [ ] Rust build passes
+* [ ] Flatpak launches
+* [ ] Snap launches
+* [ ] AppImage launches
+* [ ] GPU acceleration works
+* [ ] Network APIs work
+* [ ] File system permissions work
+
+---
+
+# Security Validation
+
+* [ ] Sandbox tested
+* [ ] No unnecessary permissions
+* [ ] Production env variables secured
+* [ ] Secrets removed from frontend
+
+---
+
+# Performance Validation
+
+* [ ] Cold start benchmark
+* [ ] Memory profiling
+* [ ] CPU usage profiling
+* [ ] Large dataset rendering test
+
+---
+
+# 🔄 CI/CD Pipeline
+
+# GitHub Actions Example
+
+```yaml
+name: Linux Builds
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install Rust
+        uses: dtolnay/rust-toolchain@stable
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Type Check
+        run: pnpm tsc --noEmit
+
+      - name: Build Frontend
+        run: pnpm build
+
+      - name: Build Tauri
+        run: pnpm tauri build
+```
+
+---
+
+# 🚀 Flathub Submission Guide
+
+## Before Submission
+
+Ensure:
+
+* App icons added
+* Metadata complete
+* Screenshots prepared
+* License included
+* Permissions minimized
+* Stable builds verified
+
+---
+
+# Required Assets
+
+| Asset        | Required |
+| ------------ | -------- |
+| App Icon     | ✅        |
+| Screenshots  | ✅        |
+| AppData XML  | ✅        |
+| LICENSE      | ✅        |
+| Desktop File | ✅        |
+
+---
+
+# Submit To
+
+[Flathub Submission Docs](https://docs.flathub.org/docs/for-app-authors/submission/?utm_source=chatgpt.com)
+
+---
+
+# 📚 Useful Resources
+
+* [Flatpak Documentation](https://docs.flatpak.org/?utm_source=chatgpt.com)
+* [Snapcraft Docs](https://snapcraft.io/docs?utm_source=chatgpt.com)
+* [Tauri Distribution Guide](https://tauri.app/distribute/?utm_source=chatgpt.com)
+* [AppImage Docs](https://docs.appimage.org/?utm_source=chatgpt.com)
+* [Flathub](https://flathub.org/?utm_source=chatgpt.com)
+
+---
+
+# ✅ Recommended Final Production Stack
+
+## Best Combination For CommDesk
+
+| Distribution | Priority   |
+| ------------ | ---------- |
+| Flatpak      | Primary    |
+| AppImage     | Secondary  |
+| Snap         | Optional   |
+| DEB/RPM      | Enterprise |
+
+---
+
diff --git a/docs/FLATPAK_COMMANDS.sh b/docs/FLATPAK_COMMANDS.sh
new file mode 100644
index 0000000..e22da3e
--- /dev/null
+++ b/docs/FLATPAK_COMMANDS.sh
@@ -0,0 +1,179 @@
+#!/usr/bin/env bash
+# CommDesk Flatpak Quick Reference & Commands
+
+# ============================================================================
+# SETUP & INSTALLATION
+# ============================================================================
+
+# 1. Install flatpak tools (run once)
+# Ubuntu/Debian:
+sudo apt install flatpak flatpak-builder gnome-software-plugin-flatpak
+
+# Fedora:
+sudo dnf install flatpak flatpak-builder
+
+# Arch:
+sudo pacman -S flatpak flatpak-builder
+
+# 2. Add Flathub repository (run once)
+flatpak remote-add --if-not-exists --user flathub https://dl.flathub.org/repo/flathub.flatpakrepo
+
+
+# ============================================================================
+# BUILD & INSTALL
+# ============================================================================
+
+# Clean build (removes old artifacts)
+flatpak-builder --force-clean --user --install-deps-from=flathub --repo=repo builddir org.commdesk.CommDesk.json
+
+# Incremental build (keeps cached artifacts)
+flatpak-builder --user --install-deps-from=flathub --repo=repo builddir org.commdesk.CommDesk.json
+
+# Install after building
+flatpak install --user --from-file=repo/appstream/org.commdesk.CommDesk.flatpakref
+
+# One-liner: build and install
+flatpak-builder --force-clean --user --install-deps-from=flathub --repo=repo builddir org.commdesk.CommDesk.json && \
+  flatpak install --user --from-file=repo/appstream/org.commdesk.CommDesk.flatpakref
+
+
+# ============================================================================
+# RUNNING & TESTING
+# ============================================================================
+
+# Run the app
+flatpak run org.commdesk.CommDesk
+
+# Run with verbose logging
+G_MESSAGES_DEBUG=all flatpak run org.commdesk.CommDesk
+
+# Run with a bash shell (for debugging)
+flatpak run --command=bash org.commdesk.CommDesk
+
+# Test without document access
+flatpak run --no-documents org.commdesk.CommDesk
+
+# Run shell as app user
+flatpak run --command=sh org.commdesk.CommDesk
+
+
+# ============================================================================
+# DEBUGGING & INFO
+# ============================================================================
+
+# View installed version
+flatpak info org.commdesk.CommDesk
+
+# Check permissions
+flatpak info --show-permissions org.commdesk.CommDesk
+
+# List all installed flatpaks
+flatpak list --app
+
+# View app data location
+flatpak info --mode=user --show-location org.commdesk.CommDesk
+
+
+# ============================================================================
+# PACKAGE CREATION & DISTRIBUTION
+# ============================================================================
+
+# Create single-file bundle for distribution
+flatpak build-bundle repo commdesk.flatpak org.commdesk.CommDesk \
+  --runtime-repo=https://flathub.org/repo/flathub.flatpakrepo
+
+# Users can install the bundle with:
+# flatpak install --user commdesk.flatpak
+
+
+# ============================================================================
+# MAINTENANCE & UPDATES
+# ============================================================================
+
+# Update flatpak runtime
+flatpak update
+
+# Remove the app
+flatpak remove org.commdesk.CommDesk
+
+# Uninstall and remove data
+flatpak remove --delete-data org.commdesk.CommDesk
+
+# Clean up unused runtimes
+flatpak remove --unused
+
+
+# ============================================================================
+# BUILD ENVIRONMENT
+# ============================================================================
+
+# Enter the build sandbox to debug
+flatpak run --command=bash --develop-mode builddir
+
+# View build logs (while building)
+tail -f /tmp/flatpak-builder-*.log
+
+
+# ============================================================================
+# KEY FILES
+# ============================================================================
+
+# Manifest (main configuration)
+# org.commdesk.CommDesk.json
+
+# Desktop entry (app integration)
+# org.commdesk.CommDesk.desktop
+
+# Build documentation
+# docs/FLATPAK_BUILD_GUIDE.md
+# docs/FLATPAK_SETUP_SUMMARY.md
+
+# Application icon
+# public/logo.png
+
+
+# ============================================================================
+# USEFUL ENVIRONMENT VARIABLES
+# ============================================================================
+
+# Enable debug logging
+export G_MESSAGES_DEBUG=all
+
+# Show Flatpak internal operations
+export FLATPAK_DEBUG=1
+
+# Offline mode (for testing without dependencies)
+export CARGO_NET_OFFLINE=true
+
+
+# ============================================================================
+# COMMON ISSUES & SOLUTIONS
+# ============================================================================
+
+# Issue: Build fails with "No matching version"
+# Solution: Update runtime-version in org.commdesk.CommDesk.json
+
+# Issue: Permission denied errors
+# Solution: Add required permissions to finish-args in manifest
+
+# Issue: Rust compilation errors
+# Solution: Install Rust extension:
+flatpak install flathub org.freedesktop.Sdk.Extension.rust-stable//25.08
+
+# Issue: Node/pnpm not found
+# Solution: Install Node extension:
+flatpak install flathub org.freedesktop.Sdk.Extension.node20//25.08
+
+# Issue: App won't start
+# Solution: Check logs:
+G_MESSAGES_DEBUG=all flatpak run org.commdesk.CommDesk 2>&1
+
+
+# ============================================================================
+# RESOURCES
+# ============================================================================
+
+# Official Flatpak docs: https://docs.flatpak.org/
+# Manifest reference: https://docs.flatpak.org/en/latest/reference.html
+# Flathub submit: https://docs.flathub.org/docs/for-app-authors/submission/
+# Tauri Flatpak: https://tauri.app/develop/distributing-packages/#flatpak
diff --git a/docs/PRODUCTION_DEPLOYMENT.md b/docs/PRODUCTION_DEPLOYMENT.md
new file mode 100644
index 0000000..296437e
--- /dev/null
+++ b/docs/PRODUCTION_DEPLOYMENT.md
@@ -0,0 +1,449 @@
+# 🐧 CommDesk Linux Packaging & Production Deployment Documentation System
+
+## Overview
+
+
+The goal is to transform CommDesk into a fully production-ready desktop platform capable of large-scale Linux distribution through:
+
+* Flatpak
+* Snap
+* AppImage
+* DEB
+* RPM
+* GitHub Releases
+* Flathub
+* Snap Store
+
+Reference documentation: 
+
+---
+
+# 🚀 Objectives
+
+## Primary Goals
+
+* Add professional Linux distribution support
+* Introduce production deployment workflows
+* Add enterprise-grade release architecture
+* Standardize build systems
+* Implement secure auto-update infrastructure
+* Create scalable CI/CD pipelines
+* Add cross-platform packaging strategy
+* Improve release maintainability
+* Prepare CommDesk for public distribution
+
+---
+
+# 📦 Distribution Targets
+
+## Linux
+
+* Flatpak
+* Snap
+* AppImage
+* DEB
+* RPM
+
+## Windows
+
+* NSIS
+* MSI
+* Portable EXE
+
+## macOS
+
+* DMG
+* App Bundle
+
+---
+
+
+
+# 🟦 Flatpak Infrastructure
+
+## Add Flatpak Manifest
+
+Create:
+
+```bash
+org.commdesk.CommDesk.json
+```
+
+## Required Features
+
+* Sandboxed runtime
+* Flathub compatibility
+* GPU acceleration support
+* Network permissions
+* Wayland + X11 support
+* Rust SDK extensions
+* Node.js SDK extensions
+
+---
+
+## Required Build Commands
+
+```bash
+flatpak-builder \
+--force-clean \
+--user \
+--install-deps-from=flathub \
+--repo=repo \
+builddir \
+org.commdesk.CommDesk.json
+```
+
+---
+
+# 📦 Snap Infrastructure
+
+## Create Snap Support
+
+Create:
+
+```bash
+snap/snapcraft.yaml
+```
+
+## Required Features
+
+* Strict confinement
+* Network permissions
+* OpenGL support
+* Wayland/X11 support
+* Auto-update compatibility
+
+---
+
+# 🟨 AppImage Support
+
+## Add Portable Linux Distribution
+
+Support:
+
+```bash
+pnpm tauri build
+```
+
+Output:
+
+```bash
+src-tauri/target/release/bundle/appimage/
+```
+
+---
+
+# 🔄 Auto-Update Infrastructure
+
+## Required System
+
+Implement:
+
+* Tauri updater
+* GitHub Releases integration
+* Signed updates
+* Release manifests
+* Version verification
+* Secure update validation
+
+---
+
+## Required Files
+
+```bash
+src-tauri/tauri.conf.json
+latest.json
+release.pub
+```
+
+---
+
+## Required Features
+
+* Silent background downloads
+* Update notifications
+* Signature verification
+* Rollback safety
+* Cross-platform updates
+
+---
+
+# 🔐 Security & Signing
+
+## Required Security Features
+
+### Linux
+
+* Flatpak sandboxing
+* Snap confinement
+* Minimal filesystem access
+
+### Updates
+
+* Minisign signatures
+* Binary verification
+* Release integrity validation
+
+### Windows
+
+* Code signing support
+
+### macOS
+
+* Apple notarization preparation
+
+---
+
+# 📈 CI/CD Pipeline
+
+## Create GitHub Actions Workflows
+
+### Required Workflows
+
+```bash
+.github/workflows/
+├── ci.yml
+├── release.yml
+├── flatpak.yml
+├── snap.yml
+└── production-build.yml
+```
+
+---
+
+## CI Requirements
+
+### Validation
+
+* TypeScript checks
+* ESLint checks
+* Rust checks
+* Build verification
+* Packaging verification
+
+### Build Matrix
+
+* Ubuntu
+* Windows
+* macOS
+
+### Artifacts
+
+Upload:
+
+* AppImage
+* Flatpak bundle
+* Snap package
+* DEB
+* RPM
+* MSI
+* DMG
+
+---
+
+# 🏷 Version Management System
+
+## Standardize SemVer
+
+Format:
+
+```bash
+MAJOR.MINOR.PATCH
+```
+
+---
+
+## Synchronize Versions Across
+
+```bash
+package.json
+src-tauri/Cargo.toml
+src-tauri/tauri.conf.json
+snap/snapcraft.yaml
+```
+
+---
+
+## Create Automation Script
+
+```bash
+scripts/update-version.sh
+```
+
+Capabilities:
+
+* Update all version files
+* Validate consistency
+* Prevent release mismatch
+
+---
+
+# 🎨 Branding & Icon System
+
+## Standardize Icon Pipeline
+
+Required Sizes:
+
+* 32x32
+* 64x64
+* 128x128
+* 256x256
+* ICO
+* ICNS
+
+---
+
+## Required Directories
+
+```bash
+public/
+src-tauri/icons/
+```
+
+---
+
+## Add Documentation
+
+Include:
+
+* Logo generation workflow
+* Export best practices
+* Platform-specific icon requirements
+
+---
+
+# 🧪 Enterprise QA System
+
+## Required Testing Layers
+
+### Unit Testing
+
+```bash
+pnpm test
+```
+
+### E2E Testing
+
+```bash
+playwright
+```
+
+### Production Validation
+
+* Flatpak sandbox tests
+* AppImage runtime tests
+* Snap permission tests
+* Auto-update tests
+
+---
+
+# ⚡ Performance Optimization
+
+## Rust Optimization
+
+Add:
+
+```toml
+[profile.release]
+lto = true
+codegen-units = 1
+panic = "abort"
+strip = true
+opt-level = "z"
+```
+
+---
+
+## Frontend Optimization
+
+Add:
+
+* Code splitting
+* Lazy loading
+* Vendor chunking
+* Production minification
+
+---
+
+# 📊 Monitoring & Analytics
+
+## Add Optional Infrastructure
+
+### Crash Reporting
+
+* Rust panic reporting
+* Frontend error tracking
+
+### Update Analytics
+
+* Update adoption rate
+* Failed update tracking
+* Release stability metrics
+
+---
+
+# 📚 Documentation Requirements
+
+All deployment docs must include:
+
+* Prerequisites
+* Installation
+* Build commands
+* Release workflow
+* Security recommendations
+* Troubleshooting
+* CI/CD examples
+* Production best practices
+
+---
+
+# 🧠 Important Requirements
+
+## DO NOT
+
+* Hardcode secrets
+* Commit private signing keys
+* Disable security checks
+* Use unrestricted filesystem permissions
+* Skip binary verification
+
+---
+
+# ✅ Acceptance Criteria
+
+## Packaging
+
+* [ ] Flatpak builds successfully
+* [ ] Snap builds successfully
+* [ ] AppImage builds successfully
+* [ ] DEB builds successfully
+* [ ] RPM builds successfully
+
+---
+
+## Security
+
+* [ ] Auto-update signing works
+* [ ] Signature verification works
+* [ ] Sandboxing validated
+* [ ] Minimal permissions enforced
+
+---
+
+## CI/CD
+
+* [ ] Multi-platform builds work
+* [ ] Release workflows automated
+* [ ] Artifact uploads work
+* [ ] Release tagging works
+
+---
+
+## Documentation
+
+* [ ] Linux packaging docs completed
+* [ ] Production deployment docs completed
+* [ ] Auto-update docs completed
+* [ ] Troubleshooting docs completed
+* [ ] Release workflow documented
+
diff --git a/docs/TESTING_AND_QA.md b/docs/TESTING_AND_QA.md
new file mode 100644
index 0000000..7f25638
--- /dev/null
+++ b/docs/TESTING_AND_QA.md
@@ -0,0 +1,652 @@
+# 🧪 CommDesk Enterprise Testing & QA Guide
+
+# Production-Ready • Enterprise QA • Large Scale Testing Infrastructure
+
+This document defines the complete testing architecture, QA workflows, automation strategy, performance validation, security testing, and release validation system for CommDesk.
+
+Reference guide: 
+
+---
+
+# 🎯 Testing Goals
+
+CommDesk is a large-scale desktop application built using:
+
+* React
+* TypeScript
+* Tauri
+* Rust
+* Vite
+
+The testing system must guarantee:
+
+* Stability
+* Scalability
+* Security
+* Performance
+* Cross-platform reliability
+* Release confidence
+
+---
+
+# 🏗 Testing Architecture
+
+# Testing Pyramid
+
+```bash id="7b5r0h"
+        End-to-End Tests (5%)
+       Integration Tests (20%)
+      Unit Tests (75%)
+```
+
+---
+
+# 🧱 Testing Layers
+
+| Layer             | Purpose                                 |
+| ----------------- | --------------------------------------- |
+| Unit Tests        | Component and function validation       |
+| Integration Tests | Feature/system interaction validation   |
+| E2E Tests         | Real user workflow testing              |
+| Performance Tests | Benchmarking and optimization           |
+| Security Tests    | Vulnerability and permission validation |
+| Platform Tests    | OS-specific verification                |
+| Regression Tests  | Existing feature protection             |
+
+---
+
+# ⚙️ Unit Testing Setup
+
+## Install Dependencies
+
+```bash id="lnq6np"
+pnpm add -D \
+vitest \
+@testing-library/react \
+@testing-library/user-event \
+jsdom
+```
+
+---
+
+# Configure Vitest
+
+Create:
+
+```bash id="m5j3a7"
+vitest.config.ts
+```
+
+---
+
+# Example Configuration
+
+```ts id="7dx6yo"
+import { defineConfig } from "vitest/config";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: "jsdom",
+
+    coverage: {
+      provider: "v8",
+      reporter: ["text", "json", "html"],
+
+      lines: 80,
+      functions: 80,
+      branches: 75,
+      statements: 80,
+    },
+  },
+});
+```
+
+---
+
+# 🧪 Unit Test Example
+
+```tsx id="p20mfm"
+describe("EventCard", () => {
+  it("should render title", () => {
+    render(<EventCard event={mockEvent} />);
+
+    expect(
+      screen.getByText("Hackathon 2026")
+    ).toBeInTheDocument();
+  });
+});
+```
+
+---
+
+# Run Unit Tests
+
+```bash id="wjlwm9"
+pnpm test
+```
+
+---
+
+# Watch Mode
+
+```bash id="jlwmti"
+pnpm test --watch
+```
+
+---
+
+# Coverage Report
+
+```bash id="y2d4xk"
+pnpm test --coverage
+```
+
+---
+
+# 🔄 Integration Testing
+
+# Goals
+
+Validate:
+
+* API interaction
+* State management
+* React Query behavior
+* IPC communication
+* Feature coordination
+
+---
+
+# Example Integration Test
+
+```tsx id="q50ezn"
+describe("Dashboard Integration", () => {
+  it("should load events", async () => {
+    render(<Dashboard />);
+
+    await waitFor(() => {
+      expect(
+        screen.getByText("Event 1")
+      ).toBeInTheDocument();
+    });
+  });
+});
+```
+
+---
+
+# 🌐 End-to-End Testing
+
+# Framework
+
+Use:
+
+```bash id="jlwm7j"
+Playwright
+```
+
+---
+
+# Install
+
+```bash id="d6jtzg"
+pnpm add -D @playwright/test
+```
+
+---
+
+# Initialize Browsers
+
+```bash id="tjlwmm"
+pnpm exec playwright install
+```
+
+---
+
+# Configure Playwright
+
+Create:
+
+```bash id="xymu12"
+playwright.config.ts
+```
+
+---
+
+# Required Browser Targets
+
+* Chromium
+* Firefox
+* WebKit
+
+---
+
+# E2E Test Goals
+
+Validate:
+
+* Authentication
+* Navigation
+* Event creation
+* Community workflows
+* Dashboard interaction
+* Permissions
+* Error handling
+
+---
+
+# Example E2E Test
+
+```ts id="rf1s6m"
+test("should create event", async ({ page }) => {
+  await page.goto("/");
+
+  await page.click("[data-testid='btn-create-event']");
+
+  await page.fill(
+    "[data-testid='input-title']",
+    "Hackathon"
+  );
+
+  await page.click("[data-testid='btn-submit']");
+
+  await expect(
+    page.locator("text=Hackathon")
+  ).toBeVisible();
+});
+```
+
+---
+
+# Run E2E Tests
+
+```bash id="e4v3b9"
+pnpm exec playwright test
+```
+
+---
+
+# UI Mode
+
+```bash id="nhyw1z"
+pnpm exec playwright test --ui
+```
+
+---
+
+# Debug Mode
+
+```bash id="9f0wmt"
+pnpm exec playwright test --debug
+```
+
+---
+
+# 🐧 Linux Platform Testing
+
+# Flatpak Testing
+
+---
+
+# Build
+
+```bash id="31s31s"
+flatpak-builder \
+--force-clean \
+--user \
+--install-deps-from=flathub \
+--repo=repo \
+builddir \
+org.commdesk.CommDesk.json
+```
+
+---
+
+# Install
+
+```bash id="4s7v52"
+flatpak install \
+--user \
+--from-file=repo/appstream/org.commdesk.CommDesk.flatpakref
+```
+
+---
+
+# Validate Runtime
+
+```bash id="fsry1o"
+flatpak run org.commdesk.CommDesk
+```
+
+---
+
+# Permission Testing
+
+```bash id="r1fq4i"
+flatpak info --show-permissions org.commdesk.CommDesk
+```
+
+---
+
+# Sandbox Validation
+
+```bash id="1ysvbm"
+flatpak run --filesystem=none org.commdesk.CommDesk
+```
+
+---
+
+# Log Inspection
+
+```bash id="jlwm9w"
+journalctl --user \
+-u flatpak-org.commdesk.CommDesk \
+--lines=50
+```
+
+---
+
+# 🪟 Windows Testing
+
+# Required Validation
+
+* Installer works
+* Desktop shortcut created
+* Start menu integration works
+* Taskbar icon renders
+* Auto-update works
+* Uninstall works cleanly
+
+---
+
+# Build
+
+```bash id="sjmc67"
+pnpm tauri build --target x86_64-pc-windows-gnu
+```
+
+---
+
+# 🍎 macOS Testing
+
+# Required Validation
+
+* DMG mounts correctly
+* App bundle launches
+* Dock icon renders
+* Code signing valid
+* Notarization ready
+
+---
+
+# Verify Signature
+
+```bash id="d0bjlwm"
+codesign -v /Applications/CommDesk.app
+```
+
+---
+
+# Security Validation
+
+```bash id="wt0jlwm"
+spctl -a -v /Applications/CommDesk.app
+```
+
+---
+
+# ⚡ Performance Testing
+
+# Startup Benchmark
+
+Target:
+
+```bash id="x0rm4s"
+< 3 seconds
+```
+
+---
+
+# Measure Startup Time
+
+```bash id="jlwm6m"
+time flatpak run org.commdesk.CommDesk
+```
+
+---
+
+# CPU Profiling
+
+```bash id="wrv2mw"
+perf record flatpak run org.commdesk.CommDesk
+perf report
+```
+
+---
+
+# Memory Usage
+
+```bash id="jlwm91"
+/usr/bin/time -v flatpak run org.commdesk.CommDesk
+```
+
+---
+
+# Real-Time Monitoring
+
+```bash id="3g0lkh"
+watch -n 1 'ps aux | grep commdesk'
+```
+
+---
+
+# 🔥 Large Dataset Testing
+
+# Validate
+
+* 10,000+ tasks
+* 5,000+ events
+* Massive dashboards
+* Large activity feeds
+* Infinite scrolling
+* Search performance
+
+---
+
+# Example Benchmark
+
+```ts id="jlwm2s"
+bench("search 10000 events", () => {
+  searchEvents(events, "Hackathon");
+});
+```
+
+---
+
+# 🔐 Security Testing
+
+# Dependency Audit
+
+```bash id="9jlwmc"
+pnpm audit --prod
+```
+
+---
+
+# OWASP Validation
+
+```bash id="jlwm4u"
+npm audit --audit-level=moderate
+```
+
+---
+
+# Required Security Checks
+
+* Sandbox validation
+* Permission minimization
+* IPC validation
+* Unsafe eval prevention
+* CSP verification
+* Dependency vulnerabilities
+* Rust unsafe block review
+
+---
+
+# 🔄 Regression Testing
+
+Before every release validate:
+
+* Existing workflows still work
+* No UI regressions
+* No performance regressions
+* Database compatibility maintained
+* Auto-update compatibility maintained
+
+---
+
+# 📈 Coverage Goals
+
+| Type       | Minimum | Target |
+| ---------- | ------- | ------ |
+| Statements | 80%     | 90%    |
+| Branches   | 75%     | 85%    |
+| Functions  | 80%     | 90%    |
+| Lines      | 80%     | 90%    |
+
+---
+
+# 🚀 CI/CD Testing Pipeline
+
+Create:
+
+```bash id="jlwmj1"
+.github/workflows/test.yml
+```
+
+---
+
+# Required Pipeline Steps
+
+```yaml id="jlwm0q"
+- pnpm install
+- pnpm lint
+- pnpm test
+- pnpm test --coverage
+- playwright test
+- pnpm build
+- pnpm tauri build
+```
+
+---
+
+# Required CI Validation
+
+| Validation        | Required |
+| ----------------- | -------- |
+| TypeScript        | ✅        |
+| ESLint            | ✅        |
+| Unit Tests        | ✅        |
+| Integration Tests | ✅        |
+| E2E Tests         | ✅        |
+| Production Build  | ✅        |
+| Linux Packaging   | ✅        |
+
+---
+
+# 🧠 Testing Best Practices
+
+## Rules
+
+### DO
+
+✅ Test behavior
+✅ Test error states
+✅ Test edge cases
+✅ Test permissions
+✅ Test offline states
+✅ Test loading states
+✅ Test accessibility
+
+---
+
+### DO NOT
+
+❌ Test implementation details
+❌ Overuse mocks
+❌ Skip error testing
+❌ Ignore performance
+❌ Ignore accessibility
+
+---
+
+# ♿ Accessibility Testing
+
+Validate:
+
+* Keyboard navigation
+* Screen reader support
+* Focus management
+* ARIA labels
+* Contrast ratios
+* Reduced motion support
+
+---
+
+# 🧪 Release QA Checklist
+
+# Before Production Release
+
+## Core Validation
+
+* [ ] Unit tests pass
+* [ ] Integration tests pass
+* [ ] E2E tests pass
+* [ ] TypeScript passes
+* [ ] ESLint passes
+
+---
+
+## Platform Validation
+
+* [ ] Flatpak works
+* [ ] Snap works
+* [ ] AppImage works
+* [ ] Windows installer works
+* [ ] macOS DMG works
+
+---
+
+## Performance Validation
+
+* [ ] Startup < 3 sec
+* [ ] No memory leaks
+* [ ] No major CPU spikes
+* [ ] Large datasets render smoothly
+
+---
+
+## Security Validation
+
+* [ ] No high vulnerabilities
+* [ ] Sandboxing works
+* [ ] Auto-update signatures valid
+* [ ] No unsafe permissions
+
+---
+
+# 📚 Recommended Tooling
+
+| Tool            | Purpose                   |
+| --------------- | ------------------------- |
+| Vitest          | Unit testing              |
+| Testing Library | Component testing         |
+| Playwright      | E2E testing               |
+| Lighthouse      | Performance/accessibility |
+| Perf            | Linux profiling           |
+| Valgrind        | Memory validation         |
+| Codecov         | Coverage reporting        |
+
diff --git a/latest.json b/latest.json
new file mode 100644
index 0000000..e2e2f46
--- /dev/null
+++ b/latest.json
@@ -0,0 +1,23 @@
+{
+  "version": "0.1.0",
+  "notes": "Initial production release",
+  "pub_date": "2026-05-10T00:00:00Z",
+  "platforms": {
+    "linux-x86_64": {
+      "signature": "",
+      "url": ""
+    },
+    "darwin-aarch64": {
+      "signature": "",
+      "url": ""
+    },
+    "darwin-x86_64": {
+      "signature": "",
+      "url": ""
+    },
+    "windows-x86_64": {
+      "signature": "",
+      "url": ""
+    }
+  }
+}
\ No newline at end of file
diff --git a/org.commdesk.CommDesk.desktop b/org.commdesk.CommDesk.desktop
new file mode 100644
index 0000000..980b4f1
--- /dev/null
+++ b/org.commdesk.CommDesk.desktop
@@ -0,0 +1,9 @@
+[Desktop Entry]
+Type=Application
+Name=CommDesk
+Comment=Community communication desktop application
+Exec=commdesk
+Icon=org.commdesk.CommDesk
+Categories=Utility;
+Terminal=false
+StartupNotify=true
diff --git a/org.commdesk.CommDesk.json b/org.commdesk.CommDesk.json
index 367d553..6d6ca43 100644
--- a/org.commdesk.CommDesk.json
+++ b/org.commdesk.CommDesk.json
@@ -1,7 +1,7 @@
 {
   "app-id": "org.commdesk.CommDesk",
   "runtime": "org.freedesktop.Platform",
-  "runtime-version": "23.08",
+  "runtime-version": "25.08",
   "sdk": "org.freedesktop.Sdk",
   "sdk-extensions": [
     "org.freedesktop.Sdk.Extension.rust-stable",
@@ -13,7 +13,9 @@
     "--socket=x11",
     "--socket=wayland",
     "--share=ipc",
-    "--filesystem=home"
+    "--filesystem=home",
+    "--device=dri",
+    "--env=LIBVA_DRIVER_NAME=iHD"
   ],
   "build-options": {
     "append-path": "/usr/lib/sdk/rust-stable/bin:/usr/lib/sdk/node20/bin"
@@ -22,11 +24,19 @@
     {
       "name": "commdesk",
       "buildsystem": "simple",
+      "build-options": {
+        "env": {
+          "CARGO_NET_OFFLINE": "true"
+        }
+      },
       "build-commands": [
-        "npm install",
-        "npm run build",
+        "npm install -g pnpm",
+        "pnpm install --frozen-lockfile",
+        "pnpm run build",
         "cargo build --manifest-path src-tauri/Cargo.toml --release",
-        "install -Dm755 src-tauri/target/release/apex-circle-dasktop-application /app/bin/commdesk"
+        "install -Dm755 src-tauri/target/release/apex-circle-dasktop-application /app/bin/commdesk",
+        "install -Dm644 org.commdesk.CommDesk.desktop /app/share/applications/org.commdesk.CommDesk.desktop",
+        "install -Dm644 public/logo.png /app/share/icons/hicolor/256x256/apps/org.commdesk.CommDesk.png"
       ],
       "sources": [
         {
diff --git a/release.pub b/release.pub
new file mode 100644
index 0000000..196d4cb
--- /dev/null
+++ b/release.pub
@@ -0,0 +1,2 @@
+untrusted comment: minisign public key 7BCD4862EDE01123
+RWQjEeDtYkjNe7hdKeyXez1ugL2oioQymSO2IWLvoZ2aFUWyiWoOK18u
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 83cb428..3e25ebb 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -65,7 +65,7 @@
 
   "plugins": {
     "updater": {
-      "pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IDc3MjdGODk5Q0JBREJCMkMKUldRc3U2M0xtZmduZDh5QkVrdW8zd25wYllnN2tWR1RGalpLMFhtZ01vRVhtU0VPRVNxcHNqbWQK",
+      "pubkey": "7BCD4862EDE01123RWQjEeDtYkjNe7hdKeyXez1ugL2oioQymSO2IWLvoZ2aFUWyiWoOK18u",
 
       "endpoints": [
         "https://github.com/NexGenStudioDev/CommDesk/releases/latest/download/latest.json"

From 7f645a60c6eeb4a748772d7f7cca20030e06ba2c Mon Sep 17 00:00:00 2001
From: Jyotibrat <jyotibratb@gmail.com>
Date: Sun, 10 May 2026 14:54:06 +0530
Subject: [PATCH 08/13] feat[docs]: Adding Contributing.md

---
 Contributing.md | 181 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 181 insertions(+)
 create mode 100644 Contributing.md

diff --git a/Contributing.md b/Contributing.md
new file mode 100644
index 0000000..d2586cb
--- /dev/null
+++ b/Contributing.md
@@ -0,0 +1,181 @@
+# Contributing to CommDesk
+
+Thank you for your interest in contributing to CommDesk.
+
+***CommDesk*** is a desktop platform for *communities*, *clubs*, *organizations*, and *event teams*. Contributions that improve *usability*, *reliability*, *documentation*, *maintainability*, and *developer experience* are welcome.
+
+## Before You Start
+
+Before making changes, please review the **existing documentation** and **project structure** to understand the current scope of the repository.
+
+This repository includes:
+- A *React* + *TypeScript* **frontend**
+- A *Tauri* **desktop application** layer
+- A *Rust* backend under `src-tauri`
+- *Documentation* for project scope, implementation status, and release flow
+
+## Prerequisites
+
+To work on this project, you should have the following installed:
+
+- **Node.js 20** or later
+- **pnpm 10** or later
+- **Rust stable** (`rustup`, `cargo`)
+- The platform-specific dependencies required by **Tauri**
+
+For *Linux*, *macOS*, and *Windows*, please ensure the appropriate system dependencies are installed before building the project.
+
+## Getting Started
+
+1. Fork the repository.
+2. Clone your fork locally.
+3. Install dependencies.
+4. Start the development environment.
+5. Make your changes in a feature branch.
+6. Test thoroughly before opening a pull request.
+
+### Installation
+
+```git
+git clone https://github.com/NexGenStudioDev/CommDesk.git
+cd CommDesk
+pnpm install
+````
+
+### Run the Application
+
+For local development:
+
+```bash
+pnpm tauri dev
+```
+
+If you need to work on the frontend separately:
+
+```bash
+pnpm dev
+```
+
+## Branch Naming
+
+Use a *descriptive branch name* for your work.
+
+Recommended formats:
+
+* `feature/<short-description>`
+* `fix/<short-description>`
+* `docs/<short-description>`
+* `refactor/<short-description>`
+
+Examples:
+
+* `feature/member-search`
+* `fix/login-error`
+* `docs/update-readme`
+
+## Coding Standards
+
+Please follow the existing *code style* and *project conventions*.
+
+General expectations:
+
+* Keep changes focused and minimal
+* Write clear, readable, and maintainable code
+* Follow the current folder structure and architecture
+* Avoid introducing unnecessary dependencies
+* Prefer small, reusable components and functions
+* Keep frontend and backend changes consistent with the existing design
+
+Before submitting, format and lint your code where applicable.
+
+## Testing
+
+All contributions should be tested locally before submission.
+
+At minimum, verify:
+
+* The application starts successfully
+* The change works as intended
+* Existing functionality is not broken
+* The project passes linting and build checks where relevant
+
+Useful commands:
+
+```bash
+pnpm lint
+pnpm build
+pnpm tauri dev
+```
+
+If your contribution affects desktop packaging or Rust functionality, test the relevant Tauri or `src-tauri` workflow as well.
+
+## Reporting Issues
+
+Before opening a new issue:
+
+* Search existing issues to avoid duplicates
+* Use a clear and descriptive title
+* Include steps to reproduce the problem
+* Add screenshots, logs, or environment details when relevant
+
+A good bug report should explain:
+
+* What you expected to happen
+* What actually happened
+* How to reproduce the issue
+* Which platform and version you used
+
+## Pull Request Guidelines
+
+When opening a pull request, please ensure that:
+
+* The pull request has a clear title
+* The description explains what was changed and why
+* Related issues are linked when applicable
+* The changes are limited to a single purpose where possible
+* The branch is up to date with the target branch before submission
+
+A strong pull request should include:
+
+* A short summary of the change
+* Screenshots or recordings for UI updates
+* Testing notes
+* Any relevant context for reviewers
+
+## Commit Messages
+
+Use concise and meaningful commit messages.
+
+Recommended style:
+
+* `feat: add member search`
+* `fix: resolve updater issue`
+* `docs: improve contribution guide`
+* `refactor: simplify event module`
+
+## Security and Secrets
+
+Do not commit secrets, private keys, or environment-specific credentials.
+
+If your change requires configuration values, update the example environment file or documentation instead of exposing sensitive data.
+
+## Community Standards
+
+Please keep discussions respectful, constructive, and professional.
+
+Be considerate in:
+
+* Issues
+* Pull requests
+* Code reviews
+* Documentation discussions
+
+This project follows a code of conduct. All contributors are expected to follow it.
+
+## Maintainers
+
+Maintainers may request changes before merging a pull request. Please respond to review feedback promptly and keep discussions focused on the proposed change.
+
+## License
+
+**By contributing to CommDesk, you agree that your contributions will be made under the same [License](LICENSE) as the project.**
\ No newline at end of file

From ddc580c73d5edda78c754e91aee52ab8e26fdfdd Mon Sep 17 00:00:00 2001
From: BINDUPAUTRA JYOTIBRAT <jyotibratb@gmail.com>
Date: Sun, 10 May 2026 15:03:49 +0530
Subject: [PATCH 09/13] Update Contributing.md

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
---
 Contributing.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Contributing.md b/Contributing.md
index d2586cb..c6e38f5 100644
--- a/Contributing.md
+++ b/Contributing.md
@@ -170,7 +170,7 @@ Be considerate in:
 * Code reviews
 * Documentation discussions
 
-This project follows a code of conduct. All contributors are expected to follow it.
+This project follows a [code of conduct](CODE_OF_CONDUCT.md). All contributors are expected to follow it.
 
 ## Maintainers
 

From f6c0ff3f5814693320f3a5ad9b8538384e78f5e5 Mon Sep 17 00:00:00 2001
From: itzzavdheshh <aavdhesh.dadhich@gmail.com>
Date: Sun, 10 May 2026 18:31:50 +0530
Subject: [PATCH 10/13] Resolved merge conflicts

---
 .../Tasks/v1/components/task/TaskForm.tsx     | 32 ++++++++++++++++---
 1 file changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/features/Tasks/v1/components/task/TaskForm.tsx b/src/features/Tasks/v1/components/task/TaskForm.tsx
index 762b865..f41e175 100644
--- a/src/features/Tasks/v1/components/task/TaskForm.tsx
+++ b/src/features/Tasks/v1/components/task/TaskForm.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useRef, useState, useEffect } from "react";
 import { useNavigate, useSearchParams } from "react-router-dom";
 import {
   ChevronDown, ChevronUp, Calendar, Star, Loader2,
@@ -112,6 +112,7 @@ export default function TaskForm({ mode, task }: Props) {
   const { data: events = [] } = useEvents();
   const createTask = useCreateTask();
   const updateTask = useUpdateTask();
+  const deadlineInputRef = useRef<HTMLInputElement>(null);
 
   const [eventId,        setEventId]        = useState(task?.eventId ?? params.get("eventId") ?? "");
   const [title,          setTitle]          = useState(task?.title ?? "");
@@ -161,6 +162,14 @@ export default function TaskForm({ mode, task }: Props) {
 
   const isLoading = createTask.isPending || updateTask.isPending;
 
+  const openDeadlinePicker = () => {
+    const input = deadlineInputRef.current;
+    if (!input) return;
+
+    input.focus();
+    (input as HTMLInputElement & { showPicker?: () => void }).showPicker?.();
+  };
+
   const PRIORITY_OPTIONS: { value: TaskPriority; label: string; dot: string }[] = [
     { value: "high",   label: "High",   dot: "bg-red-500"   },
     { value: "medium", label: "Medium", dot: "bg-amber-400" },
@@ -234,9 +243,22 @@ export default function TaskForm({ mode, task }: Props) {
       <div className="grid grid-cols-2 gap-4">
         <Field label="Deadline" required error={errors.deadline}>
           <div className="relative">
-            <Calendar size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none" />
-            <input type="datetime-local" value={deadline} onChange={(e) => setDeadline(e.target.value)}
-              className={`${inputCls(errors.deadline)} pl-8`} />
+            <input
+              ref={deadlineInputRef}
+              type="datetime-local"
+              value={deadline}
+              onChange={(e) => setDeadline(e.target.value)}
+              className={`w-full text-sm rounded-xl border py-2.5 pl-3 pr-11 outline-none transition-all text-gray-900 bg-white ${errors.deadline ? "border-red-300 ring-2 ring-red-100" : "border-gray-200 focus:border-indigo-400 focus:ring-2 focus:ring-indigo-100"}`}
+            />
+            <button
+              type="button"
+              onClick={openDeadlinePicker}
+              title="Select deadline"
+              aria-label="Select deadline"
+              className="absolute right-2 top-1/2 flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-lg text-gray-400 transition hover:bg-gray-100 hover:text-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-100"
+            >
+              <Calendar size={16} />
+            </button>
           </div>
         </Field>
         <Field label="Priority">
@@ -322,4 +344,4 @@ export default function TaskForm({ mode, task }: Props) {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}

From 18eb1093f0e99a52f60a73ab29e5ae7459313a9d Mon Sep 17 00:00:00 2001
From: itzzavdheshh <aavdhesh.dadhich@gmail.com>
Date: Sun, 10 May 2026 18:37:40 +0530
Subject: [PATCH 11/13] Resolved merge conflicts

---
 src/features/SideBar/v1/Section/SideBar.tsx | 2 +-
 src/routes/OrgRoute.tsx                     | 9 +++++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/features/SideBar/v1/Section/SideBar.tsx b/src/features/SideBar/v1/Section/SideBar.tsx
index a04e90f..cd4ef5e 100644
--- a/src/features/SideBar/v1/Section/SideBar.tsx
+++ b/src/features/SideBar/v1/Section/SideBar.tsx
@@ -1,5 +1,5 @@
 import { RiContactsBookFill } from "react-icons/ri";
-import { MdDashboard, MdEvent, MdGroup, MdSettings, MdWork } from "react-icons/md";
+import { MdAssignment, MdDashboard, MdEvent, MdGroup, MdSettings, MdWork } from "react-icons/md";
 import { useTheme } from "@/theme";
 import { ThemeToggle } from "@/Component/ui/ThemeToggle";
 
diff --git a/src/routes/OrgRoute.tsx b/src/routes/OrgRoute.tsx
index 4ff29c2..e235e19 100644
--- a/src/routes/OrgRoute.tsx
+++ b/src/routes/OrgRoute.tsx
@@ -7,6 +7,10 @@ import ViewEvent from "@/features/Events/v1/Pages/ViewEvent";
 import MemberPage from "@/features/Member/v1/Pages/MemberPage";
 import ProjectsPage from "@/features/Projects/Pages/ProjectsPage";
 import Organisation_Template from "@/features/template/LoginUserTemplate";
+import CreateTaskPage from "@/features/Tasks/v1/pages/CreateTaskPage";
+import EditTaskPage from "@/features/Tasks/v1/pages/EditTaskPage";
+import TaskDetailPage from "@/features/Tasks/v1/pages/TaskDetailPage";
+import TaskManagementPage from "@/features/Tasks/v1/pages/TaskManagementPage";
 
 const OrgRoute = () => {
   return (
@@ -27,6 +31,11 @@ const OrgRoute = () => {
 
       <Route path="create-event" element={<CreateNewEvent />} />
 
+      <Route path="tasks" element={<TaskManagementPage />} />
+      <Route path="tasks/create" element={<CreateTaskPage />} />
+      <Route path="tasks/:taskId" element={<TaskDetailPage />} />
+      <Route path="tasks/:taskId/edit" element={<EditTaskPage />} />
+
       {/* Contact */}
       <Route path="contact" element={<Contact />} />
 

From d42abb052f82ab7aa3a5ecc73b8b16b5de79ad57 Mon Sep 17 00:00:00 2001
From: itzzavdheshh <aavdhesh.dadhich@gmail.com>
Date: Mon, 11 May 2026 00:29:19 +0530
Subject: [PATCH 12/13] Resolved merge conflicts

---
 src/App.css                                   |  22 +
 src/config/them.config.ts                     |   7 +-
 src/features/Tasks/v1/Task.types.ts           |   3 +-
 .../Tasks/v1/components/common/Avatar.tsx     |  25 +-
 .../v1/components/common/CommentsSection.tsx  |  48 +-
 .../v1/components/common/ConfirmModal.tsx     |  34 +-
 .../Tasks/v1/components/common/EmptyState.tsx |  16 +-
 .../v1/components/common/SkeletonLoader.tsx   |  35 +-
 .../Tasks/v1/components/common/TechBadge.tsx  |  15 +
 .../v1/components/event/EventDropdown.tsx     | 197 +++---
 .../v1/components/submission/ReviewPanel.tsx  | 105 +--
 .../components/submission/SubmissionCard.tsx  |  99 ++-
 .../components/submission/SubmissionList.tsx  |  39 +-
 .../Tasks/v1/components/task/TaskCardList.tsx | 207 ++++--
 .../Tasks/v1/components/task/TaskFilters.tsx  | 521 ++++++++++-----
 .../Tasks/v1/components/task/TaskForm.tsx     | 608 ++++++++++++------
 .../Tasks/v1/components/task/TaskHeader.tsx   | 224 +++++--
 .../Tasks/v1/components/task/TaskRow.tsx      |  83 ++-
 .../Tasks/v1/components/task/TaskTable.tsx    | 178 ++---
 .../Tasks/v1/constants/task.constants.ts      |  71 +-
 src/features/Tasks/v1/hooks/useTasks.ts       |  26 +-
 src/features/Tasks/v1/mock/taskMockData.ts    |   4 +-
 .../Tasks/v1/pages/CreateTaskPage.tsx         |  60 +-
 src/features/Tasks/v1/pages/EditTaskPage.tsx  |  23 +-
 .../Tasks/v1/pages/TaskDetailPage.tsx         | 440 +++++++++----
 .../Tasks/v1/pages/TaskManagementPage.tsx     | 180 ++++--
 src/features/Tasks/v1/utils/techBadgeStyle.ts |  18 +
 27 files changed, 2256 insertions(+), 1032 deletions(-)
 create mode 100644 src/features/Tasks/v1/components/common/TechBadge.tsx
 create mode 100644 src/features/Tasks/v1/utils/techBadgeStyle.ts

diff --git a/src/App.css b/src/App.css
index 8e3aa3b..2b4680a 100644
--- a/src/App.css
+++ b/src/App.css
@@ -91,7 +91,9 @@ body {
   --color-cd-primary-subtle: var(--cd-primary-subtle);
   --color-cd-primary-text: var(--cd-primary-text);
   --color-cd-secondary: var(--cd-secondary);
+  --color-cd-secondary-subtle: var(--cd-secondary-subtle);
   --color-cd-accent: var(--cd-accent);
+  --color-cd-accent-subtle: var(--cd-accent-subtle);
   --color-cd-success: var(--cd-success);
   --color-cd-success-subtle: var(--cd-success-subtle);
   --color-cd-warning: var(--cd-warning);
@@ -153,7 +155,9 @@ body {
   --cd-primary-subtle: #eff6ff;
   --cd-primary-text: #1d4ed8;
   --cd-secondary: #9333ea;
+  --cd-secondary-subtle: #f5f3ff;
   --cd-accent: #06b6d4;
+  --cd-accent-subtle: #ecfeff;
   --cd-success: #16a34a;
   --cd-success-subtle: #f0fdf4;
   --cd-warning: #ca8a04;
@@ -215,7 +219,9 @@ body {
   --cd-primary-subtle: rgba(59, 130, 246, 0.12);
   --cd-primary-text: #93c5fd;
   --cd-secondary: #a855f7;
+  --cd-secondary-subtle: rgba(168, 85, 247, 0.12);
   --cd-accent: #22d3ee;
+  --cd-accent-subtle: rgba(34, 211, 238, 0.12);
   --cd-success: #4ade80;
   --cd-success-subtle: rgba(74, 222, 128, 0.1);
   --cd-warning: #facc15;
@@ -559,3 +565,19 @@ html {
 ::-webkit-scrollbar-thumb:hover {
   background-color: var(--cd-text-muted);
 }
+
+/* ─── Custom Scrollbar Utility ───────────────────────────────────────────── */
+.custom-scrollbar::-webkit-scrollbar {
+  width: 5px;
+}
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background-color: var(--cd-border);
+  border-radius: 10px;
+  border: 1px solid transparent;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background-color: var(--cd-primary);
+}
diff --git a/src/config/them.config.ts b/src/config/them.config.ts
index 1299107..61ee864 100644
--- a/src/config/them.config.ts
+++ b/src/config/them.config.ts
@@ -3,8 +3,9 @@
 import { theme, type ThemeMode, type ThemeTokens } from "../theme/theme.config";
 
 export type { ThemeMode };
-export type Theme = ThemeTokens[ThemeMode];
+export type Theme = ThemeTokens;
 
-export function getTheme(mode: ThemeMode): Theme {
-  return theme[mode];
+/** Returns the single flat token object — CSS variables resolve per mode automatically. */
+export function getTheme(_mode?: ThemeMode): Theme {
+  return theme;
 }
diff --git a/src/features/Tasks/v1/Task.types.ts b/src/features/Tasks/v1/Task.types.ts
index 5c43155..59bfddc 100644
--- a/src/features/Tasks/v1/Task.types.ts
+++ b/src/features/Tasks/v1/Task.types.ts
@@ -1,6 +1,6 @@
 export type TaskStatus      = "todo" | "in-progress" | "completed";
 export type TaskPriority    = "low" | "medium" | "high";
-export type SubmissionType  = "file" | "github" | "both";
+export type SubmissionType  = "file" | "github" | "link" | "all";
 export type SubmissionStatus = "not-submitted" | "submitted" | "reviewed";
 export type ReviewDecision  = "approved" | "rejected" | "pending";
 export type EventType       = "hackathon" | "workshop" | "internal" | "community";
@@ -58,6 +58,7 @@ export interface Submission {
   submittedBy: MemberOption;
   fileUrl?: string;
   githubUrl?: string;
+  linkUrl?: string;
   notes?: string;
   submittedAt: string;
   review?: SubmissionReview;
diff --git a/src/features/Tasks/v1/components/common/Avatar.tsx b/src/features/Tasks/v1/components/common/Avatar.tsx
index 0dc48da..6656584 100644
--- a/src/features/Tasks/v1/components/common/Avatar.tsx
+++ b/src/features/Tasks/v1/components/common/Avatar.tsx
@@ -42,7 +42,7 @@ const STATUS_COLOR = {
 
 export default function Avatar({
   name, src, role, size = "sm",
-  showTooltip = true, status = null, ring = false, ringColor = "ring-white",
+  showTooltip = true, status = null, ring = false, ringColor = "ring-[var(--cd-surface)]",
 }: AvatarProps) {
   const [imgError, setImgError] = useState(false);
   const [hovered, setHovered]   = useState(false);
@@ -80,7 +80,10 @@ export default function Avatar({
 
       {/* Status dot */}
       {status && (
-        <span className={`absolute ${sz.dot} rounded-full border-2 border-white ${STATUS_COLOR[status]}`} />
+        <span
+          className={`absolute ${sz.dot} rounded-full border-2 ${STATUS_COLOR[status]}`}
+          style={{ borderColor: "var(--cd-surface)" }}
+        />
       )}
 
       {/* Tooltip */}
@@ -122,19 +125,21 @@ export function AvatarGroup({ members, max = 3, size = "sm" }: AvatarGroupProps)
           role={m.role}
           size={size}
           ring
-          ringColor="ring-white"
+          ringColor="ring-[var(--cd-surface)]"
           showTooltip
         />
       ))}
       {overflow > 0 && (
-        <div className={`
-          ${sz.outer} rounded-full bg-gray-100 border-2 border-white
-          flex items-center justify-center shadow-sm z-10
-          ring-2 ring-white
-        `}>
-          <span className={`${sz.text} font-bold text-gray-500`}>+{overflow}</span>
+        <div
+          className={`${sz.outer} rounded-full border-2 flex items-center justify-center shadow-sm z-10 ring-2 ring-[var(--cd-surface)]`}
+          style={{
+            backgroundColor: "var(--cd-surface-2)",
+            borderColor: "var(--cd-surface)",
+          }}
+        >
+          <span className={`${sz.text} font-bold`} style={{ color: "var(--cd-text-2)" }}>+{overflow}</span>
         </div>
       )}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/features/Tasks/v1/components/common/CommentsSection.tsx b/src/features/Tasks/v1/components/common/CommentsSection.tsx
index 398f3f5..b8f8d3e 100644
--- a/src/features/Tasks/v1/components/common/CommentsSection.tsx
+++ b/src/features/Tasks/v1/components/common/CommentsSection.tsx
@@ -19,34 +19,36 @@ export default function CommentsSection({ taskId }: Props) {
   };
 
   return (
-    <div className="flex flex-col gap-4">
+    <div className="flex flex-col gap-5">
       {/* Header */}
       <div className="flex items-center gap-2">
-        <MessageCircle size={15} className="text-gray-400" />
-        <h3 className="text-sm font-bold text-gray-900">Comments</h3>
-        <span className="px-2 py-0.5 rounded-full text-[11px] font-bold bg-gray-100 text-gray-500">
+        <MessageCircle size={16} className="text-[var(--cd-text-muted)]" />
+        <h3 className="text-sm font-black uppercase tracking-widest text-[var(--cd-text)]">Comments</h3>
+        <span className="px-2 py-0.5 rounded-full text-[11px] font-bold bg-[var(--cd-surface-3)] text-[var(--cd-text-muted)]">
           {comments.length}
         </span>
       </div>
 
       {/* Comment list */}
       {isLoading ? (
-        <p className="text-xs text-gray-400">Loading comments…</p>
+        <p className="text-xs text-[var(--cd-text-muted)]">Loading comments…</p>
       ) : comments.length === 0 ? (
-        <p className="text-xs text-gray-400 text-center py-6">No comments yet. Be the first!</p>
+        <div className="flex flex-col items-center justify-center py-10 px-4 rounded-2xl border border-dashed border-[var(--cd-border)] bg-[var(--cd-surface-2)]">
+          <p className="text-xs text-[var(--cd-text-muted)] text-center font-medium">No comments yet. Be the first to start the conversation!</p>
+        </div>
       ) : (
-        <div className="flex flex-col gap-3">
+        <div className="flex flex-col gap-4">
           {comments.map((c) => (
-            <div key={c.id} className="flex gap-3">
-              <img src={c.avatar} alt={c.author} className="w-8 h-8 rounded-full shrink-0 object-cover" />
-              <div className="flex-1 bg-gray-50 rounded-xl px-3 py-2.5 border border-gray-100">
-                <div className="flex items-center gap-2 mb-1">
-                  <span className="text-xs font-bold text-gray-900">{c.author}</span>
-                  <span className="text-[10px] text-gray-400">
+            <div key={c.id} className="flex gap-3 items-start">
+              <img src={c.avatar} alt={c.author} className="w-9 h-9 rounded-full shrink-0 object-cover border-2 border-[var(--cd-surface)] shadow-sm" />
+              <div className="flex-1 bg-[var(--cd-surface)] rounded-2xl px-4 py-3 border border-[var(--cd-border-subtle)] shadow-sm">
+                <div className="flex items-center justify-between gap-2 mb-1.5">
+                  <span className="text-xs font-bold text-[var(--cd-text)]">{c.author}</span>
+                  <span className="text-[10px] text-[var(--cd-text-muted)]">
                     {formatDistanceToNow(parseISO(c.createdAt), { addSuffix: true })}
                   </span>
                 </div>
-                <p className="text-xs text-gray-700 leading-relaxed">{c.text}</p>
+                <p className="text-xs text-[var(--cd-text-2)] leading-relaxed">{c.text}</p>
               </div>
             </div>
           ))}
@@ -54,8 +56,8 @@ export default function CommentsSection({ taskId }: Props) {
       )}
 
       {/* Add comment */}
-      <div className="flex flex-col gap-1.5">
-        <div className="flex gap-2">
+      <div className="flex flex-col gap-2.5 mt-2">
+        <div className="flex gap-3">
           <textarea
             value={text}
             onChange={(e) => { setText(e.target.value); if (error) setError(""); }}
@@ -63,21 +65,21 @@ export default function CommentsSection({ taskId }: Props) {
               if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); void handleSubmit(); }
             }}
             rows={2}
-            placeholder="Write a comment… (Enter to send, Shift+Enter for new line)"
-            className={`flex-1 text-sm rounded-xl border px-3 py-2.5 outline-none resize-none transition-all placeholder-gray-400 text-gray-800
-              ${error ? "border-red-300 ring-2 ring-red-100" : "border-gray-200 focus:border-indigo-400 focus:ring-2 focus:ring-indigo-100"}`}
+            placeholder="Write a comment… (Enter to send)"
+            className={`flex-1 text-sm rounded-2xl border px-4 py-3 outline-none resize-none transition-all bg-[var(--cd-surface)] text-[var(--cd-text)]
+              ${error ? "border-[var(--cd-danger)] ring-2 ring-[var(--cd-danger-subtle)]" : "border-[var(--cd-border)] focus:border-[var(--cd-primary)] focus:ring-2 focus:ring-[var(--cd-primary-subtle)]"}`}
           />
           <button
             onClick={() => void handleSubmit()}
             disabled={addComment.isPending || !text.trim()}
-            className="self-end flex items-center gap-1.5 px-4 py-2.5 bg-indigo-600 hover:bg-indigo-700 disabled:opacity-40 text-white text-xs font-bold rounded-xl transition"
+            className="self-end h-11 w-11 flex items-center justify-center bg-[var(--cd-primary)] hover:opacity-90 active:scale-95 disabled:opacity-40 text-white rounded-xl transition-all shadow-md shadow-[var(--cd-primary-subtle)]"
           >
-            {addComment.isPending ? <Loader2 size={13} className="animate-spin" /> : <Send size={13} />}
-            Send
+            {addComment.isPending ? <Loader2 size={16} className="animate-spin" /> : <Send size={16} />}
           </button>
         </div>
-        {error && <p className="text-xs text-red-500 font-medium">{error}</p>}
+        {error && <p className="text-[10px] text-[var(--cd-danger)] font-bold uppercase tracking-wider">{error}</p>}
       </div>
     </div>
+
   );
 }
diff --git a/src/features/Tasks/v1/components/common/ConfirmModal.tsx b/src/features/Tasks/v1/components/common/ConfirmModal.tsx
index 460e6de..25a0330 100644
--- a/src/features/Tasks/v1/components/common/ConfirmModal.tsx
+++ b/src/features/Tasks/v1/components/common/ConfirmModal.tsx
@@ -52,12 +52,15 @@ export default function ConfirmModal({
       />
 
       {/* Dialog */}
-      <div className="relative z-10 w-full max-w-md mx-4 bg-white rounded-2xl shadow-2xl border border-gray-100 overflow-hidden animate-in fade-in zoom-in-95 duration-150">
+      <div 
+        className="relative z-10 w-full max-w-md mx-4 rounded-2xl shadow-2xl border overflow-hidden animate-in fade-in zoom-in-95 duration-150"
+        style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border)" }}
+      >
         {/* Close */}
         <button
           onClick={onCancel}
           disabled={isLoading}
-          className="absolute top-4 right-4 p-1.5 rounded-lg text-gray-400 hover:bg-gray-100 hover:text-gray-600 transition disabled:opacity-40"
+          className="absolute top-4 right-4 p-1.5 rounded-lg text-[var(--cd-text-muted)] hover:bg-[var(--cd-hover)] hover:text-[var(--cd-text)] transition disabled:opacity-40"
           aria-label="Close"
         >
           <X size={16} />
@@ -67,46 +70,47 @@ export default function ConfirmModal({
           {/* Icon + Title */}
           <div className="flex items-start gap-4">
             <div
-              className={`shrink-0 w-10 h-10 rounded-xl flex items-center justify-center ${
-                danger ? "bg-red-50" : "bg-indigo-50"
+              className={`shrink-0 w-11 h-11 rounded-xl flex items-center justify-center ${
+                danger ? "bg-[var(--cd-danger-subtle)]" : "bg-[var(--cd-primary-subtle)]"
               }`}
             >
               <AlertTriangle
-                size={20}
-                className={danger ? "text-red-500" : "text-indigo-500"}
+                size={22}
+                className={danger ? "text-[var(--cd-danger)]" : "text-[var(--cd-primary)]"}
               />
             </div>
-            <div className="flex flex-col gap-1.5 min-w-0">
-              <h3 className="text-base font-bold text-gray-900">{title}</h3>
-              <p className="text-sm text-gray-500 leading-relaxed">{message}</p>
+            <div className="flex flex-col gap-2 min-w-0">
+              <h3 className="text-lg font-bold text-[var(--cd-text)] leading-tight">{title}</h3>
+              <p className="text-sm text-[var(--cd-text-2)] leading-relaxed">{message}</p>
             </div>
           </div>
 
           {/* Actions */}
-          <div className="flex items-center justify-end gap-2.5 mt-6">
+          <div className="flex items-center justify-end gap-3 mt-8">
             <button
               ref={cancelRef}
               onClick={onCancel}
               disabled={isLoading}
-              className="px-4 py-2.5 rounded-xl border border-gray-200 text-sm font-semibold text-gray-600 hover:bg-gray-50 transition disabled:opacity-40"
+              className="px-5 py-2.5 rounded-xl border border-[var(--cd-border)] text-sm font-bold text-[var(--cd-text-2)] hover:bg-[var(--cd-hover)] hover:text-[var(--cd-text)] transition-all active:scale-95 disabled:opacity-40"
             >
               {cancelLabel}
             </button>
             <button
               onClick={onConfirm}
               disabled={isLoading}
-              className={`flex items-center gap-2 px-4 py-2.5 rounded-xl text-sm font-semibold text-white transition disabled:opacity-60 ${
+              className={`flex items-center gap-2 px-5 py-2.5 rounded-xl text-sm font-bold text-white transition-all active:scale-95 shadow-sm disabled:opacity-60 ${
                 danger
-                  ? "bg-red-500 hover:bg-red-600"
-                  : "bg-indigo-600 hover:bg-indigo-700"
+                  ? "bg-[var(--cd-danger)] hover:opacity-90 shadow-[var(--cd-danger-subtle)]"
+                  : "bg-[var(--cd-primary)] hover:opacity-90 shadow-[var(--cd-primary-subtle)]"
               }`}
             >
-              {isLoading && <Loader2 size={14} className="animate-spin" />}
+              {isLoading && <Loader2 size={15} className="animate-spin" />}
               {confirmLabel}
             </button>
           </div>
         </div>
       </div>
+
     </div>
   );
 }
\ No newline at end of file
diff --git a/src/features/Tasks/v1/components/common/EmptyState.tsx b/src/features/Tasks/v1/components/common/EmptyState.tsx
index d19ba11..aee70b9 100644
--- a/src/features/Tasks/v1/components/common/EmptyState.tsx
+++ b/src/features/Tasks/v1/components/common/EmptyState.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import type { ReactNode } from "react";
 
 // ─── Inline SVG illustrations ─────────────────────────────────────────────────
@@ -66,7 +67,7 @@ interface EmptyStateProps {
   action?: ReactNode;
 }
 
-const illustrations: Record<string, () => JSX.Element> = {
+const illustrations: Record<string, () => React.JSX.Element> = {
   "no-event":   NoEventIllustration,
   "no-tasks":   NoTasksIllustration,
   "no-results": NoResultsIllustration,
@@ -85,15 +86,22 @@ export default function EmptyState({
   return (
     <div className="flex flex-col items-center justify-center text-center px-6 py-12 max-w-sm mx-auto">
       {icon ? (
-        <div className="w-14 h-14 rounded-2xl bg-gray-100 flex items-center justify-center text-gray-400 mb-4">
+        <div
+          className="w-14 h-14 rounded-2xl flex items-center justify-center mb-4"
+          style={{ backgroundColor: "var(--cd-surface-2)", color: "var(--cd-text-muted)" }}
+        >
           {icon}
         </div>
       ) : (
         <Illustration />
       )}
-      <p className="text-sm font-semibold text-gray-800 mt-3">{title}</p>
+      <p className="text-sm font-semibold mt-3" style={{ color: "var(--cd-text)" }}>
+        {title}
+      </p>
       {description && (
-        <p className="text-xs text-gray-400 mt-1.5 leading-relaxed">{description}</p>
+        <p className="text-xs mt-1.5 leading-relaxed" style={{ color: "var(--cd-text-muted)" }}>
+          {description}
+        </p>
       )}
       {action && <div className="mt-5">{action}</div>}
     </div>
diff --git a/src/features/Tasks/v1/components/common/SkeletonLoader.tsx b/src/features/Tasks/v1/components/common/SkeletonLoader.tsx
index 764d73c..dd2e415 100644
--- a/src/features/Tasks/v1/components/common/SkeletonLoader.tsx
+++ b/src/features/Tasks/v1/components/common/SkeletonLoader.tsx
@@ -2,9 +2,10 @@
 function Shimmer({ className }: { className: string }) {
   return (
     <div
-      className={`relative overflow-hidden bg-gray-100 rounded ${className}`}
+      className={`relative overflow-hidden rounded ${className}`}
+      style={{ backgroundColor: "var(--cd-surface-3)" }}
     >
-      <div className="absolute inset-0 -translate-x-full animate-[shimmer_1.4s_infinite] bg-gradient-to-r from-transparent via-white/60 to-transparent" />
+      <div className="absolute inset-0 -translate-x-full animate-[shimmer_1.4s_infinite] bg-gradient-to-r from-transparent via-white/10 to-transparent" />
     </div>
   );
 }
@@ -12,9 +13,22 @@ function Shimmer({ className }: { className: string }) {
 // ─── Table skeleton ───────────────────────────────────────────────────────────
 function TableSkeleton() {
   return (
-    <div className="w-full">
+    <div
+      className="w-full rounded-xl overflow-hidden"
+      style={{
+        backgroundColor: "var(--cd-surface)",
+        border: "1px solid var(--cd-border)",
+        boxShadow: "0 1px 3px var(--cd-shadow)",
+      }}
+    >
       {/* Header */}
-      <div className="flex items-center gap-4 px-4 py-3 border-b bg-gray-50">
+      <div
+        className="flex items-center gap-4 px-4 py-3 border-b"
+        style={{
+          backgroundColor: "var(--cd-surface-2)",
+          borderColor: "var(--cd-border)",
+        }}
+      >
         <Shimmer className="h-3 w-40" />
         <Shimmer className="h-3 w-24 ml-auto" />
         <Shimmer className="h-3 w-20" />
@@ -26,7 +40,11 @@ function TableSkeleton() {
       {Array.from({ length: 5 }).map((_, i) => (
         <div
           key={i}
-          className="flex items-center gap-4 px-4 py-4 border-b border-gray-50 border-l-4 border-l-gray-100"
+          className="flex items-center gap-4 px-4 py-4 border-b border-l-4"
+          style={{
+            borderBottomColor: "var(--cd-border-subtle)",
+            borderLeftColor: "var(--cd-border)",
+          }}
         >
           {/* Title */}
           <div className="flex-1 flex flex-col gap-1.5">
@@ -66,7 +84,10 @@ function DetailSkeleton() {
   return (
     <div className="flex flex-1 overflow-hidden">
       {/* Left panel */}
-      <div className="w-[420px] shrink-0 border-r bg-white p-6 flex flex-col gap-5">
+      <div 
+        className="w-[420px] shrink-0 border-r p-6 flex flex-col gap-5"
+        style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border)" }}
+      >
         <Shimmer className="h-3 w-28" />
         <Shimmer className="h-6 w-4/5" />
         <Shimmer className="h-3 w-full" />
@@ -133,4 +154,4 @@ export default function SkeletonLoader({ type = "table" }: { type?: SkeletonType
   if (type === "detail") return <DetailSkeleton />;
   if (type === "form")   return <FormSkeleton />;
   return <TableSkeleton />;
-}
\ No newline at end of file
+}
diff --git a/src/features/Tasks/v1/components/common/TechBadge.tsx b/src/features/Tasks/v1/components/common/TechBadge.tsx
new file mode 100644
index 0000000..4129c14
--- /dev/null
+++ b/src/features/Tasks/v1/components/common/TechBadge.tsx
@@ -0,0 +1,15 @@
+import type { TechTag } from "../../Task.types";
+import { techBadgeStyle } from "../../utils/techBadgeStyle";
+
+export default function TechBadge({ tech, size = "sm" }: { tech: TechTag; size?: "xs" | "sm" }) {
+  const cls = size === "xs" ? "text-[10px] px-1.5" : "text-[11px] px-2";
+
+  return (
+    <span
+      className={`inline-flex items-center rounded-md border py-0.5 font-semibold ${cls}`}
+      style={techBadgeStyle(tech.id)}
+    >
+      {tech.label}
+    </span>
+  );
+}
diff --git a/src/features/Tasks/v1/components/event/EventDropdown.tsx b/src/features/Tasks/v1/components/event/EventDropdown.tsx
index 7bb2e1e..34c27cd 100644
--- a/src/features/Tasks/v1/components/event/EventDropdown.tsx
+++ b/src/features/Tasks/v1/components/event/EventDropdown.tsx
@@ -19,21 +19,19 @@ export default function EventDropdown({ selectedEventId, onSelect }: Props) {
   const listRef = useRef<HTMLUListElement>(null);
 
   const { data: events = [], isLoading } = useEvents();
-
   const selectedEvent = events.find((e) => e.id === selectedEventId) ?? null;
 
-  // Filter events by query
-  const filtered = events.filter((e) =>
-    query.trim() === "" ||
-    e.name.toLowerCase().includes(query.toLowerCase()) ||
-    e.subtitle.toLowerCase().includes(query.toLowerCase())
+  const filtered = events.filter(
+    (event) =>
+      query.trim() === "" ||
+      event.name.toLowerCase().includes(query.toLowerCase()) ||
+      event.subtitle.toLowerCase().includes(query.toLowerCase())
   );
 
-  // Persist selection
   const handleSelect = useCallback(
-    (evt: EventOption) => {
-      localStorage.setItem(SELECTED_EVENT_KEY, evt.id);
-      onSelect(evt.id);
+    (event: EventOption) => {
+      localStorage.setItem(SELECTED_EVENT_KEY, event.id);
+      onSelect(event.id);
       setOpen(false);
       setQuery("");
       setHighlighted(0);
@@ -41,16 +39,15 @@ export default function EventDropdown({ selectedEventId, onSelect }: Props) {
     [onSelect]
   );
 
-  const handleClear = (e: React.MouseEvent) => {
-    e.stopPropagation();
+  const handleClear = (event: React.MouseEvent) => {
+    event.stopPropagation();
     localStorage.removeItem(SELECTED_EVENT_KEY);
     onSelect(null);
   };
 
-  // Close on outside click
   useEffect(() => {
-    const handler = (e: MouseEvent) => {
-      if (!containerRef.current?.contains(e.target as Node)) {
+    const handler = (event: MouseEvent) => {
+      if (!containerRef.current?.contains(event.target as Node)) {
         setOpen(false);
         setQuery("");
       }
@@ -59,66 +56,65 @@ export default function EventDropdown({ selectedEventId, onSelect }: Props) {
     return () => document.removeEventListener("mousedown", handler);
   }, []);
 
-  // Focus search on open
   useEffect(() => {
-    if (open) {
-      setTimeout(() => searchRef.current?.focus(), 80);
-      setHighlighted(0);
-    }
+    if (!open) return;
+    setTimeout(() => searchRef.current?.focus(), 80);
   }, [open]);
 
-  // Keyboard navigation
-  const handleKeyDown = (e: React.KeyboardEvent) => {
+  const handleKeyDown = (event: React.KeyboardEvent) => {
     if (!open) {
-      if (e.key === "Enter" || e.key === " ") setOpen(true);
+      if (event.key === "Enter" || event.key === " ") setOpen(true);
       return;
     }
-    if (e.key === "ArrowDown") {
-      e.preventDefault();
-      setHighlighted((h) => Math.min(h + 1, filtered.length - 1));
-    } else if (e.key === "ArrowUp") {
-      e.preventDefault();
-      setHighlighted((h) => Math.max(h - 1, 0));
-    } else if (e.key === "Enter") {
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      setHighlighted((value) => Math.min(value + 1, filtered.length - 1));
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      setHighlighted((value) => Math.max(value - 1, 0));
+    } else if (event.key === "Enter") {
       if (filtered[highlighted]) handleSelect(filtered[highlighted]);
-    } else if (e.key === "Escape") {
+    } else if (event.key === "Escape") {
       setOpen(false);
       setQuery("");
     }
   };
 
-  // Scroll highlighted item into view
   useEffect(() => {
     const el = listRef.current?.children[highlighted] as HTMLElement | undefined;
     el?.scrollIntoView({ block: "nearest" });
   }, [highlighted]);
 
   return (
-    <div ref={containerRef} className="relative w-72 shrink-0" onKeyDown={handleKeyDown}>
-      {/* Trigger button */}
+    <div ref={containerRef} className="relative w-full max-w-[432px] sm:w-[432px] shrink-0" onKeyDown={handleKeyDown}>
       <button
-        onClick={() => setOpen((o) => !o)}
-        className={`
-          w-full flex items-center gap-2.5 px-3.5 py-2.5 rounded-xl border text-sm font-medium transition-all
-          ${open
-            ? "border-indigo-400 ring-2 ring-indigo-100 bg-white"
-            : "border-gray-200 bg-white hover:border-gray-300"}
-        `}
+        onClick={() => {
+          setHighlighted(0);
+          setOpen((value) => !value);
+        }}
+        className="w-full flex items-center gap-2.5 px-3.5 py-2.5 rounded-xl border text-sm font-medium transition-all"
+        style={{
+          backgroundColor: "var(--cd-surface)",
+          borderColor: open ? "var(--cd-primary)" : "var(--cd-border)",
+          boxShadow: open ? "0 0 0 3px var(--cd-primary-subtle)" : "none",
+        }}
         aria-haspopup="listbox"
         aria-expanded={open}
       >
         {isLoading ? (
-          <Loader2 size={15} className="text-gray-400 animate-spin shrink-0" />
+          <Loader2 size={15} className="animate-spin shrink-0" style={{ color: "var(--cd-text-muted)" }} />
         ) : (
-          <CalendarDays size={15} className="text-indigo-500 shrink-0" />
+          <CalendarDays size={15} className="shrink-0" style={{ color: "var(--cd-primary)" }} />
         )}
 
         <span className="flex-1 text-left truncate">
           {isLoading ? (
-            <span className="text-gray-400">Loading events…</span>
+            <span style={{ color: "var(--cd-text-muted)" }}>Loading events...</span>
           ) : selectedEvent ? (
             <span className="flex items-center gap-2">
-              <span className="text-gray-900 font-semibold truncate">{selectedEvent.name}</span>
+              <span className="font-semibold truncate" style={{ color: "var(--cd-text)" }}>
+                {selectedEvent.name}
+              </span>
               {(() => {
                 const cfg = EVENT_TYPE_CONFIG[selectedEvent.type];
                 return (
@@ -129,7 +125,7 @@ export default function EventDropdown({ selectedEventId, onSelect }: Props) {
               })()}
             </span>
           ) : (
-            <span className="text-gray-400">Select an event…</span>
+            <span style={{ color: "var(--cd-text-muted)" }}>Select an event...</span>
           )}
         </span>
 
@@ -139,8 +135,9 @@ export default function EventDropdown({ selectedEventId, onSelect }: Props) {
               role="button"
               tabIndex={0}
               onClick={handleClear}
-              onKeyDown={(e) => e.key === "Enter" && handleClear(e as unknown as React.MouseEvent)}
-              className="p-0.5 rounded text-gray-300 hover:text-gray-500 transition"
+              onKeyDown={(event) => event.key === "Enter" && handleClear(event as unknown as React.MouseEvent)}
+              className="p-0.5 rounded transition"
+              style={{ color: "var(--cd-text-muted)" }}
               aria-label="Clear selection"
             >
               <X size={13} />
@@ -148,82 +145,101 @@ export default function EventDropdown({ selectedEventId, onSelect }: Props) {
           )}
           <ChevronDown
             size={15}
-            className={`text-gray-400 transition-transform duration-200 ${open ? "rotate-180" : ""}`}
+            className={`transition-transform duration-200 ${open ? "rotate-180" : ""}`}
+            style={{ color: "var(--cd-text-muted)" }}
           />
         </div>
       </button>
 
-      {/* Dropdown panel */}
       {open && (
-        <div className="absolute top-full left-0 mt-1.5 w-[340px] bg-white rounded-2xl border border-gray-200 shadow-xl shadow-gray-100/80 z-50 overflow-hidden">
-          {/* Search */}
-          <div className="flex items-center gap-2 px-3 py-2.5 border-b">
-            <Search size={14} className="text-gray-400 shrink-0" />
+        <div
+          className="absolute top-full left-0 mt-1.5 w-full sm:w-[420px] rounded-xl border shadow-xl z-50 overflow-hidden"
+          style={{
+            backgroundColor: "var(--cd-surface)",
+            borderColor: "var(--cd-border)",
+            boxShadow: "0 8px 24px var(--cd-shadow-md)",
+          }}
+        >
+          <div className="flex items-center gap-2 px-3 py-2.5 border-b" style={{ borderColor: "var(--cd-border)" }}>
+            <Search size={14} className="shrink-0" style={{ color: "var(--cd-text-muted)" }} />
             <input
               ref={searchRef}
               value={query}
-              onChange={(e) => { setQuery(e.target.value); setHighlighted(0); }}
-              placeholder="Search events…"
-              className="flex-1 text-sm outline-none placeholder-gray-400 text-gray-900 bg-transparent"
+              onChange={(event) => {
+                setQuery(event.target.value);
+                setHighlighted(0);
+              }}
+              placeholder="Search events..."
+              className="flex-1 text-sm outline-none bg-transparent"
+              style={{ color: "var(--cd-text)" }}
             />
             {query && (
-              <button onClick={() => setQuery("")} className="text-gray-400 hover:text-gray-600">
+              <button onClick={() => setQuery("")} style={{ color: "var(--cd-text-muted)" }}>
                 <X size={13} />
               </button>
             )}
           </div>
 
-          {/* List */}
           {filtered.length === 0 ? (
             <div className="py-8 text-center">
-              <p className="text-sm text-gray-400">No events match "{query}"</p>
+              <p className="text-sm" style={{ color: "var(--cd-text-muted)" }}>
+                No events match "{query}"
+              </p>
             </div>
           ) : (
             <ul ref={listRef} role="listbox" className="max-h-64 overflow-y-auto py-1.5">
-              {filtered.map((evt, i) => {
-                const typeCfg   = EVENT_TYPE_CONFIG[evt.type];
-                const statusCfg = EVENT_STATUS_CONFIG[evt.status];
-                const isActive  = evt.id === selectedEventId;
-                const isHl      = i === highlighted;
+              {filtered.map((event, index) => {
+                const typeCfg = EVENT_TYPE_CONFIG[event.type];
+                const statusCfg = EVENT_STATUS_CONFIG[event.status];
+                const isActive = event.id === selectedEventId;
+                const isHighlighted = index === highlighted;
 
                 return (
                   <li
-                    key={evt.id}
+                    key={event.id}
                     role="option"
                     aria-selected={isActive}
-                    onClick={() => handleSelect(evt)}
-                    onMouseEnter={() => setHighlighted(i)}
-                    className={`
-                      flex items-start gap-3 px-3 py-3 cursor-pointer transition-colors
-                      ${isHl ? "bg-indigo-50" : "hover:bg-gray-50"}
-                      ${isActive ? "bg-indigo-50/70" : ""}
-                    `}
+                    onClick={() => handleSelect(event)}
+                    onMouseEnter={(mouseEvent) => {
+                      setHighlighted(index);
+                      (mouseEvent.currentTarget as HTMLLIElement).style.backgroundColor = "var(--cd-primary-subtle)";
+                    }}
+                    onMouseLeave={(mouseEvent) => {
+                      (mouseEvent.currentTarget as HTMLLIElement).style.backgroundColor = isActive
+                        ? "var(--cd-primary-subtle)"
+                        : "transparent";
+                    }}
+                    className="flex items-start gap-3 px-3 py-3 cursor-pointer transition-colors"
+                    style={{
+                      backgroundColor: isActive || isHighlighted ? "var(--cd-primary-subtle)" : "transparent",
+                    }}
                   >
-                    {/* Type color bar */}
                     <div className={`w-1 self-stretch rounded-full mt-0.5 ${typeCfg.dot}`} />
 
                     <div className="flex-1 min-w-0">
-                      {/* Event name + type badge */}
                       <div className="flex items-center gap-2 flex-wrap">
-                        <span className={`text-sm font-semibold truncate ${isActive ? "text-indigo-700" : "text-gray-900"}`}>
-                          {evt.name}
+                        <span
+                          className="text-sm font-semibold truncate"
+                          style={{ color: isActive ? "var(--cd-primary-text)" : "var(--cd-text)" }}
+                        >
+                          {event.name}
                         </span>
                         <span className={`text-[10px] font-bold px-1.5 py-0.5 rounded-md ${typeCfg.bg} ${typeCfg.text}`}>
                           {typeCfg.label}
                         </span>
                       </div>
 
-                      {/* Subtitle + dates */}
                       <div className="flex items-center gap-2 mt-0.5 flex-wrap">
-                        <span className="text-xs text-gray-400 truncate">{evt.subtitle}</span>
-                        <span className="text-gray-200">·</span>
-                        <span className="text-[10px] text-gray-400 shrink-0">
-                          {format(parseISO(evt.startDate), "MMM d")} – {format(parseISO(evt.endDate), "MMM d, yyyy")}
+                        <span className="text-xs truncate" style={{ color: "var(--cd-text-muted)" }}>
+                          {event.subtitle}
+                        </span>
+                        <span style={{ color: "var(--cd-border)" }}>·</span>
+                        <span className="text-[10px] shrink-0" style={{ color: "var(--cd-text-muted)" }}>
+                          {format(parseISO(event.startDate), "MMM d")} - {format(parseISO(event.endDate), "MMM d, yyyy")}
                         </span>
                       </div>
                     </div>
 
-                    {/* Status chip */}
                     <span className={`shrink-0 flex items-center gap-1 text-[10px] font-semibold px-2 py-1 rounded-full ${statusCfg.bg} ${statusCfg.text}`}>
                       {statusCfg.pulse ? (
                         <span className="relative flex h-1.5 w-1.5">
@@ -233,7 +249,7 @@ export default function EventDropdown({ selectedEventId, onSelect }: Props) {
                       ) : (
                         <span className={`w-1.5 h-1.5 rounded-full ${statusCfg.dot}`} />
                       )}
-                      {evt.status}
+                      {event.status}
                     </span>
                   </li>
                 );
@@ -241,13 +257,16 @@ export default function EventDropdown({ selectedEventId, onSelect }: Props) {
             </ul>
           )}
 
-          {/* Footer */}
-          <div className="border-t px-3 py-2 flex items-center justify-between">
-            <span className="text-[10px] text-gray-400">{filtered.length} event{filtered.length !== 1 ? "s" : ""}</span>
-            <span className="text-[10px] text-gray-400">↑↓ navigate · Enter select · Esc close</span>
+          <div className="border-t px-3 py-2 flex items-center justify-between gap-3" style={{ borderColor: "var(--cd-border)" }}>
+            <span className="text-[10px]" style={{ color: "var(--cd-text-muted)" }}>
+              {filtered.length} event{filtered.length !== 1 ? "s" : ""}
+            </span>
+            <span className="text-[10px] hidden sm:inline" style={{ color: "var(--cd-text-muted)" }}>
+              Use arrows, Enter, Esc
+            </span>
           </div>
         </div>
       )}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/features/Tasks/v1/components/submission/ReviewPanel.tsx b/src/features/Tasks/v1/components/submission/ReviewPanel.tsx
index 69b51cb..66b43e6 100644
--- a/src/features/Tasks/v1/components/submission/ReviewPanel.tsx
+++ b/src/features/Tasks/v1/components/submission/ReviewPanel.tsx
@@ -1,4 +1,4 @@
-import { useState, useCallback } from "react";
+import { useState } from "react";
 import { CheckCircle2, XCircle, Star, X, Loader2, MessageSquare } from "lucide-react";
 import { useReviewSubmission } from "../../hooks/useSubmissions";
 import type { ReviewDecision } from "../../Task.types";
@@ -67,45 +67,52 @@ export default function ReviewPanel({ submissionId, onSuccess, onCancel }: Props
   };
 
   return (
-    <div className="rounded-2xl border-2 border-indigo-200 bg-white shadow-lg shadow-indigo-100/40 overflow-hidden">
+    <div className="rounded-2xl border-2 overflow-hidden transition-all duration-300"
+      style={{ 
+        backgroundColor: "var(--cd-surface)", 
+        borderColor: "var(--cd-primary-subtle)",
+        boxShadow: "0 10px 30px -10px var(--cd-primary-subtle)" 
+      }}>
       {/* Header */}
-      <div className="flex items-center justify-between px-4 py-3 bg-indigo-50 border-b border-indigo-100">
+      <div className="flex items-center justify-between px-4 py-3 border-b"
+        style={{ backgroundColor: "var(--cd-primary-subtle)", borderColor: "var(--cd-border)" }}>
         <div className="flex items-center gap-2">
-          <MessageSquare size={15} className="text-indigo-600" />
-          <span className="text-sm font-bold text-indigo-900">Submit Review</span>
+          <MessageSquare size={15} style={{ color: "var(--cd-primary)" }} />
+          <span className="text-sm font-bold" style={{ color: "var(--cd-primary-text)" }}>Submit Review</span>
         </div>
-        <button onClick={onCancel} className="p-1 rounded-lg text-indigo-400 hover:text-indigo-700 hover:bg-indigo-100 transition">
+        <button onClick={onCancel} className="p-1 rounded-lg transition-all hover:bg-[var(--cd-primary)] hover:text-white active:scale-95" style={{ color: "var(--cd-primary-text)" }}>
           <X size={15} />
         </button>
       </div>
 
-      <div className="p-4 flex flex-col gap-4">
+      <div className="p-5 flex flex-col gap-5">
         {/* Decision */}
-        <div className="flex flex-col gap-1.5">
-          <label className="text-xs font-bold text-gray-700 uppercase tracking-wide">Decision</label>
-          <div className="flex rounded-xl overflow-hidden border border-gray-200 p-1 gap-1 bg-gray-50">
+        <div className="flex flex-col gap-2">
+          <label className="text-[10px] font-black uppercase tracking-widest" style={{ color: "var(--cd-text-muted)" }}>Decision</label>
+          <div className="flex rounded-xl overflow-hidden border p-1 gap-1" style={{ backgroundColor: "var(--cd-surface-2)", borderColor: "var(--cd-border)" }}>
             <button onClick={() => setDecision("approved")}
-              className={`flex-1 flex items-center justify-center gap-2 py-2.5 rounded-lg text-sm font-bold transition-all
-                ${decision === "approved" ? "bg-emerald-500 text-white shadow-sm" : "text-gray-500 hover:bg-gray-100"}`}>
+              className={`flex-1 flex items-center justify-center gap-2 py-2.5 rounded-lg text-sm font-bold transition-all active:scale-95
+                ${decision === "approved" ? "bg-[var(--cd-success)] text-white shadow-md" : "text-[var(--cd-text-muted)] hover:bg-[var(--cd-hover)]"}`}>
               <CheckCircle2 size={14} /> Approve
             </button>
             <button onClick={() => setDecision("rejected")}
-              className={`flex-1 flex items-center justify-center gap-2 py-2.5 rounded-lg text-sm font-bold transition-all
-                ${decision === "rejected" ? "bg-red-500 text-white shadow-sm" : "text-gray-500 hover:bg-gray-100"}`}>
+              className={`flex-1 flex items-center justify-center gap-2 py-2.5 rounded-lg text-sm font-bold transition-all active:scale-95
+                ${decision === "rejected" ? "bg-[var(--cd-danger)] text-white shadow-md" : "text-[var(--cd-text-muted)] hover:bg-[var(--cd-hover)]"}`}>
               <XCircle size={14} /> Reject
             </button>
           </div>
         </div>
 
         {/* Score */}
-        <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-3">
           <div className="flex items-center justify-between">
-            <label className="text-xs font-bold text-gray-700 uppercase tracking-wide flex items-center gap-1.5">
-              <Star size={11} className="text-amber-500" /> Score (optional)
+            <label className="text-[10px] font-black uppercase tracking-widest flex items-center gap-1.5" style={{ color: "var(--cd-text-muted)" }}>
+              <Star size={11} style={{ color: "var(--cd-warning)" }} /> Score (optional)
             </label>
-            <label className="flex items-center gap-1.5 text-xs text-gray-500 cursor-pointer select-none">
+            <label className="flex items-center gap-1.5 text-xs font-bold cursor-pointer select-none" style={{ color: "var(--cd-text-muted)" }}>
               <div onClick={() => setUseScore((v) => !v)}
-                className={`relative w-8 h-4 rounded-full cursor-pointer transition-colors ${useScore ? "bg-indigo-500" : "bg-gray-200"}`}>
+                className="relative w-8 h-4 rounded-full cursor-pointer transition-colors"
+                style={{ backgroundColor: useScore ? "var(--cd-primary)" : "var(--cd-surface-3)" }}>
                 <span className={`absolute top-0.5 w-3 h-3 bg-white rounded-full shadow transition-transform ${useScore ? "translate-x-4" : "translate-x-0.5"}`} />
               </div>
               Enable
@@ -113,40 +120,46 @@ export default function ReviewPanel({ submissionId, onSuccess, onCancel }: Props
           </div>
 
           {useScore && (
-            <div className="flex flex-col gap-3">
+            <div className="flex flex-col gap-4">
               {/* Slider + manual input + badge row */}
-              <div className="flex items-center gap-3">
+              <div className="flex items-center gap-4">
                 {/* Slider */}
-                <div className="flex-1 flex flex-col gap-1">
+                <div className="flex-1 flex flex-col gap-2">
                   <input
                     type="range" min={0} max={100} step={1} value={score}
                     onChange={handleSlider}
-                    className="w-full h-3 rounded-full cursor-pointer accent-indigo-600"
+                    className="w-full h-2 rounded-full cursor-pointer accent-[var(--cd-primary)]"
+                    style={{ background: "var(--cd-surface-3)" }}
                   />
-                  <div className="flex justify-between text-[9px] text-gray-400 px-0.5">
+                  <div className="flex justify-between text-[9px] font-bold" style={{ color: "var(--cd-text-muted)" }}>
                     <span>0</span><span>25</span><span>50</span><span>75</span><span>100</span>
                   </div>
                 </div>
 
                 {/* Manual type input */}
                 <div className="flex flex-col items-center gap-0.5 shrink-0">
-                  <div className="flex items-center gap-1">
+                  <div className="flex items-center gap-1.5">
                     <input
                       type="number" min={0} max={100}
                       value={scoreInput}
                       onChange={handleManualInput}
                       onBlur={handleManualBlur}
-                      className="w-14 h-10 text-center text-xl font-extrabold text-amber-600 rounded-xl bg-amber-50 border-2 border-amber-200 outline-none focus:border-amber-400 focus:ring-2 focus:ring-amber-100 transition [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+                      className="w-16 h-12 text-center text-2xl font-black rounded-xl border-2 outline-none transition-all [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+                      style={{ 
+                        backgroundColor: "var(--cd-warning-subtle)", 
+                        color: "var(--cd-warning)",
+                        borderColor: "var(--cd-warning-subtle)"
+                      }}
                     />
-                    <span className="text-xs text-gray-400 font-semibold">/100</span>
+                    <span className="text-xs font-bold" style={{ color: "var(--cd-text-muted)" }}>/100</span>
                   </div>
-                  <span className={`text-[10px] font-bold ${info.color}`}>{info.text}</span>
+                  <span className={`text-[10px] font-black uppercase tracking-tighter ${info.color}`}>{info.text}</span>
                 </div>
               </div>
 
               {/* Color progress bar */}
-              <div className="w-full h-2 rounded-full bg-gray-100 overflow-hidden">
-                <div className={`h-full rounded-full transition-all duration-200 ${info.bar}`}
+              <div className="w-full h-2 rounded-full overflow-hidden" style={{ backgroundColor: "var(--cd-surface-3)" }}>
+                <div className={`h-full rounded-full transition-all duration-500 ${info.bar}`}
                   style={{ width: `${score}%` }} />
               </div>
             </div>
@@ -154,31 +167,39 @@ export default function ReviewPanel({ submissionId, onSuccess, onCancel }: Props
         </div>
 
         {/* Feedback */}
-        <div className="flex flex-col gap-1.5">
-          <label className="text-xs font-bold text-gray-700 uppercase tracking-wide">
-            Feedback <span className="text-red-400">*</span>
+        <div className="flex flex-col gap-2">
+          <label className="text-[10px] font-black uppercase tracking-widest" style={{ color: "var(--cd-text-muted)" }}>
+            Feedback <span style={{ color: "var(--cd-danger)" }}>*</span>
           </label>
           <textarea
             value={feedback}
             onChange={(e) => { setFeedback(e.target.value); if (error) setError(""); }}
             rows={4} placeholder={decision === "approved" ? "Great work! Explain what they did well…" : "Explain what needs to be improved…"}
-            className={`w-full text-sm rounded-xl border px-3 py-2.5 outline-none resize-none transition-all placeholder-gray-400 text-gray-800
-              ${error ? "border-red-300 ring-2 ring-red-100 bg-red-50" : "border-gray-200 focus:border-indigo-400 focus:ring-2 focus:ring-indigo-100 bg-white"}`}
+            className="w-full text-sm rounded-xl border px-4 py-3 outline-none resize-none transition-all shadow-inner"
+            style={{ 
+              backgroundColor: "var(--cd-surface-2)", 
+              color: "var(--cd-text)",
+              borderColor: error ? "var(--cd-danger)" : "var(--cd-border)",
+              boxShadow: error ? "0 0 0 2px var(--cd-danger-subtle)" : "none"
+            }}
           />
-          {error && <p className="text-xs text-red-500 font-medium">⚠ {error}</p>}
-          <p className="text-[10px] text-gray-400 text-right">{feedback.length}/500</p>
+          <div className="flex items-center justify-between">
+            {error && <p className="text-xs font-bold" style={{ color: "var(--cd-danger)" }}>⚠ {error}</p>}
+            <p className="text-[10px] font-bold ml-auto" style={{ color: "var(--cd-text-muted)" }}>{feedback.length}/500</p>
+          </div>
         </div>
 
         {/* Actions */}
-        <div className="flex items-center justify-end gap-2.5 pt-1 border-t">
+        <div className="flex items-center justify-end gap-3 pt-3 border-t" style={{ borderColor: "var(--cd-border)" }}>
           <button onClick={onCancel} disabled={isPending}
-            className="px-4 py-2 rounded-xl border border-gray-200 text-sm font-semibold text-gray-600 hover:bg-gray-50 transition disabled:opacity-40">
+            className="px-5 py-2.5 rounded-xl border text-sm font-bold transition-all hover:bg-[var(--cd-hover)] disabled:opacity-40"
+            style={{ color: "var(--cd-text-2)", borderColor: "var(--cd-border)" }}>
             Cancel
           </button>
           <button onClick={handleSubmit} disabled={isPending}
-            className={`flex items-center gap-2 px-5 py-2 rounded-xl text-sm font-bold text-white transition-all disabled:opacity-60 active:scale-95
-              ${decision === "approved" ? "bg-emerald-500 hover:bg-emerald-600 shadow-sm shadow-emerald-200" : "bg-red-500 hover:bg-red-600 shadow-sm shadow-red-200"}`}>
-            {isPending && <Loader2 size={13} className="animate-spin" />}
+            className={`flex items-center gap-2 px-6 py-2.5 rounded-xl text-sm font-black text-white transition-all disabled:opacity-60 active:scale-95 shadow-lg
+              ${decision === "approved" ? "bg-[var(--cd-success)] shadow-[var(--cd-success-subtle)]" : "bg-[var(--cd-danger)] shadow-[var(--cd-danger-subtle)]"}`}>
+            {isPending && <Loader2 size={14} className="animate-spin" />}
             {decision === "approved" ? "Approve" : "Reject"} Submission
           </button>
         </div>
diff --git a/src/features/Tasks/v1/components/submission/SubmissionCard.tsx b/src/features/Tasks/v1/components/submission/SubmissionCard.tsx
index c066c5a..b3c2743 100644
--- a/src/features/Tasks/v1/components/submission/SubmissionCard.tsx
+++ b/src/features/Tasks/v1/components/submission/SubmissionCard.tsx
@@ -1,7 +1,9 @@
+import { useState } from "react";
 import Avatar from "../common/Avatar";
 import { ExternalLink, Github, FileUp, Clock, CheckCircle2, XCircle, Star } from "lucide-react";
 import { formatDistanceToNow, parseISO } from "date-fns";
 import { REVIEW_DECISION_CONFIG } from "../../constants/task.constants";
+import ReviewPanel from "./ReviewPanel";
 import type { Submission } from "../../Task.types";
 
 interface Props {
@@ -10,45 +12,46 @@ interface Props {
 }
 
 export default function SubmissionCard({ submission, onReview }: Props) {
+  const [isReviewing, setIsReviewing] = useState(false);
   const { submittedBy: member, review } = submission;
   const reviewCfg = review ? REVIEW_DECISION_CONFIG[review.decision] : null;
 
   return (
     <div
       className={`
-        flex flex-col gap-3 p-4 rounded-xl border transition-all duration-200
+        flex flex-col gap-4 p-5 rounded-2xl border transition-all duration-300
         ${review?.decision === "approved"
-          ? "border-emerald-200 bg-emerald-50/40"
+          ? "border-[var(--cd-success)] bg-[var(--cd-success-subtle)]"
           : review?.decision === "rejected"
-          ? "border-red-200 bg-red-50/40"
-          : "border-gray-200 bg-white hover:border-indigo-200 hover:shadow-sm"}
+          ? "border-[var(--cd-danger)] bg-[var(--cd-danger-subtle)]"
+          : "bg-[var(--cd-surface)] border-[var(--cd-border)] hover:border-[var(--cd-primary)] hover:shadow-md"}
       `}
     >
       {/* ── Member row ───────────────────────────────────────────────────────── */}
       <div className="flex items-center justify-between gap-3">
-        <div className="flex items-center gap-2.5 min-w-0">
-          <Avatar name={member.name} src={member.avatar} role={member.role} size="md" showTooltip ring ringColor="ring-white" />
+        <div className="flex items-center gap-3 min-w-0">
+          <Avatar name={member.name} src={member.avatar} role={member.role} size="md" showTooltip ring ringColor="ring-[var(--cd-surface)]" />
           <div className="min-w-0">
-            <p className="text-sm font-semibold text-gray-900 truncate">{member.name}</p>
-            <p className="text-xs text-gray-400 truncate">{member.role}</p>
+            <p className="text-sm font-bold truncate" style={{ color: "var(--cd-text)" }}>{member.name}</p>
+            <p className="text-xs truncate" style={{ color: "var(--cd-text-muted)" }}>{member.role}</p>
           </div>
         </div>
 
         <div className="flex items-center gap-2 shrink-0">
           {/* Timestamp */}
-          <span className="flex items-center gap-1 text-[10px] text-gray-400">
+          <span className="flex items-center gap-1 text-[10px]" style={{ color: "var(--cd-text-muted)" }}>
             <Clock size={10} />
             {formatDistanceToNow(parseISO(submission.submittedAt), { addSuffix: true })}
           </span>
 
           {/* Review status chip */}
           {reviewCfg ? (
-            <span className={`flex items-center gap-1 text-[10px] font-bold px-2 py-0.5 rounded-full border ${reviewCfg.bg} ${reviewCfg.text} ${reviewCfg.border}`}>
+            <span className={`flex items-center gap-1 text-[10px] font-bold px-2.5 py-1 rounded-full border ${reviewCfg.bg} ${reviewCfg.text} ${reviewCfg.border}`}>
               {review!.decision === "approved" ? <CheckCircle2 size={10} /> : <XCircle size={10} />}
               {reviewCfg.label}
             </span>
           ) : (
-            <span className="text-[10px] font-bold px-2 py-0.5 rounded-full border bg-amber-50 text-amber-700 border-amber-200">
+            <span className="text-[10px] font-bold px-2.5 py-1 rounded-full border bg-[var(--cd-warning-subtle)] text-[var(--cd-warning)] border-[var(--cd-warning)]">
               Pending Review
             </span>
           )}
@@ -56,18 +59,19 @@ export default function SubmissionCard({ submission, onReview }: Props) {
       </div>
 
       {/* ── Links ────────────────────────────────────────────────────────────── */}
-      <div className="flex flex-col gap-1.5">
+      <div className="flex flex-col gap-2">
         {submission.githubUrl && (
           <a
             href={submission.githubUrl}
             target="_blank"
             rel="noopener noreferrer"
             onClick={(e) => e.stopPropagation()}
-            className="flex items-center gap-2 px-3 py-2 rounded-lg bg-gray-900 hover:bg-gray-800 text-white text-xs font-semibold transition-colors group/link"
+            className="flex items-center gap-2 px-3 py-2.5 rounded-xl bg-[var(--cd-surface-3)] hover:bg-[var(--cd-hover)] border border-[var(--cd-border-subtle)] text-xs font-bold transition-all group/link"
+            style={{ color: "var(--cd-text)" }}
           >
-            <Github size={13} />
+            <Github size={14} className="text-[var(--cd-text-muted)] group-hover/link:text-[var(--cd-primary)]" />
             <span className="flex-1 truncate">{submission.githubUrl.replace("https://", "")}</span>
-            <ExternalLink size={11} className="opacity-50 group-hover/link:opacity-100 transition" />
+            <ExternalLink size={11} className="opacity-40 group-hover/link:opacity-100 transition" />
           </a>
         )}
         {submission.fileUrl && (
@@ -76,47 +80,80 @@ export default function SubmissionCard({ submission, onReview }: Props) {
             target="_blank"
             rel="noopener noreferrer"
             onClick={(e) => e.stopPropagation()}
-            className="flex items-center gap-2 px-3 py-2 rounded-lg bg-indigo-50 hover:bg-indigo-100 text-indigo-700 text-xs font-semibold transition-colors group/link"
+            className="flex items-center gap-2 px-3 py-2.5 rounded-xl bg-[var(--cd-primary-subtle)] hover:opacity-80 border border-[var(--cd-primary-subtle)] text-xs font-bold transition-all group/link"
+            style={{ color: "var(--cd-primary-text)" }}
           >
-            <FileUp size={13} />
+            <FileUp size={14} />
             <span className="flex-1 truncate">{submission.fileUrl}</span>
-            <ExternalLink size={11} className="opacity-50 group-hover/link:opacity-100 transition" />
+            <ExternalLink size={11} className="opacity-60 group-hover/link:opacity-100 transition" />
+          </a>
+        )}
+        {submission.linkUrl && (
+          <a
+            href={submission.linkUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            onClick={(e) => e.stopPropagation()}
+            className="flex items-center gap-2 px-3 py-2.5 rounded-xl bg-[var(--cd-secondary-subtle)] hover:opacity-80 border border-[var(--cd-secondary-subtle)] text-xs font-bold transition-all group/link"
+            style={{ color: "var(--cd-secondary)" }}
+          >
+            <ExternalLink size={14} />
+            <span className="flex-1 truncate">{submission.linkUrl}</span>
+            <ExternalLink size={11} className="opacity-60 group-hover/link:opacity-100 transition" />
           </a>
         )}
       </div>
 
       {/* ── Notes ────────────────────────────────────────────────────────────── */}
       {submission.notes && (
-        <p className="text-xs text-gray-500 leading-relaxed bg-gray-50 rounded-lg px-3 py-2 border border-gray-100">
-          {submission.notes}
-        </p>
+        <div className="p-3 rounded-xl border border-[var(--cd-border-subtle)] bg-[var(--cd-surface-2)]">
+          <p className="text-xs leading-relaxed" style={{ color: "var(--cd-text-2)" }}>
+            {submission.notes}
+          </p>
+        </div>
       )}
 
-      {/* ── Review details ───────────────────────────────────────────────────── */}
-      {review && (
-        <div className={`rounded-xl p-3 border flex flex-col gap-2 ${reviewCfg!.bg} ${reviewCfg!.border}`}>
+      {/* ── Review details (Existing) ────────────────────────────────────────── */}
+      {review && !isReviewing && (
+        <div className={`rounded-xl p-4 border flex flex-col gap-2.5 ${reviewCfg!.bg} ${reviewCfg!.border}`}>
           <div className="flex items-center justify-between">
             <span className={`text-xs font-bold ${reviewCfg!.text}`}>
               {review.decision === "approved" ? "✓ Approved" : "✗ Rejected"} by {review.reviewedBy}
             </span>
             {review.score !== undefined && (
-              <span className="flex items-center gap-1 text-xs font-bold text-amber-600 bg-amber-50 px-2 py-0.5 rounded-full border border-amber-200">
-                <Star size={10} fill="currentColor" />
+              <span className="flex items-center gap-1 text-xs font-bold bg-[var(--cd-surface)] px-2 py-1 rounded-full border border-[var(--cd-warning)]" style={{ color: "var(--cd-warning)" }}>
+                <Star size={11} fill="currentColor" />
                 {review.score}/100
               </span>
             )}
           </div>
           {review.feedback && (
-            <p className="text-xs text-gray-600 leading-relaxed">{review.feedback}</p>
+            <p className="text-xs leading-relaxed opacity-90" style={{ color: "var(--cd-text)" }}>{review.feedback}</p>
           )}
         </div>
       )}
 
-      {/* ── Review action (if not yet reviewed) ──────────────────────────────── */}
-      {!review && (
+      {/* ── Inline Review Panel ──────────────────────────────────────────────── */}
+      {isReviewing && (
+        <div className="mt-2 animate-in fade-in slide-in-from-top-2 duration-300">
+          <ReviewPanel
+            submissionId={submission.id}
+            taskId={submission.taskId}
+            currentTaskStatus="todo" // Fallback status
+            onSuccess={() => {
+              setIsReviewing(false);
+              onReview(submission.id); // Trigger parent refresh
+            }}
+            onCancel={() => setIsReviewing(false)}
+          />
+        </div>
+      )}
+
+      {/* ── Review action (if not yet reviewed & not currently reviewing) ─────── */}
+      {!review && !isReviewing && (
         <button
-          onClick={() => onReview(submission.id)}
-          className="self-start flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-indigo-600 hover:bg-indigo-700 active:scale-95 text-white text-xs font-semibold transition-all"
+          onClick={() => setIsReviewing(true)}
+          className="cd-btn cd-btn-primary self-start text-xs font-bold py-2 shadow-sm shadow-[var(--cd-primary-subtle)] active:scale-95 transition-all"
         >
           Review Submission
         </button>
diff --git a/src/features/Tasks/v1/components/submission/SubmissionList.tsx b/src/features/Tasks/v1/components/submission/SubmissionList.tsx
index 89e5b41..35314e9 100644
--- a/src/features/Tasks/v1/components/submission/SubmissionList.tsx
+++ b/src/features/Tasks/v1/components/submission/SubmissionList.tsx
@@ -72,18 +72,18 @@ function SortDropdown({ sort, onChange }: { sort: SortKey; onChange: (v: SortKey
       </button>
 
       {open && createPortal(
-        <div ref={panelRef} style={style}
-          className="bg-white rounded-xl border border-gray-200 shadow-2xl shadow-gray-200/80 py-1 overflow-hidden min-w-[160px]">
+        <div ref={panelRef} style={{ ...style, backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border)" }}
+          className="rounded-xl border shadow-2xl py-1 overflow-hidden min-w-[160px]">
           {SORT_OPTIONS.map(opt => (
             <button
               key={opt.value}
               onMouseDown={(e) => { e.preventDefault(); onChange(opt.value); setOpen(false); }}
               className={`w-full flex items-center gap-2.5 px-3.5 py-2.5 text-xs font-semibold text-left transition-colors
-                ${opt.value === sort ? "bg-gray-50 text-gray-900" : "text-gray-600 hover:bg-gray-50 hover:text-gray-900"}`}
+                ${opt.value === sort ? "bg-[var(--cd-hover)] text-[var(--cd-primary)]" : "text-[var(--cd-text-muted)] hover:bg-[var(--cd-hover)] hover:text-[var(--cd-text)]"}`}
             >
               <span className={`w-2 h-2 rounded-full shrink-0 ${opt.dot}`} />
               <span className="flex-1">{opt.label}</span>
-              {opt.value === sort && <Check size={12} className="text-indigo-500 shrink-0" />}
+              {opt.value === sort && <Check size={12} className="text-[var(--cd-primary)] shrink-0" />}
             </button>
           ))}
         </div>,
@@ -99,11 +99,12 @@ function Toggle({ value, onChange, label }: { value: boolean; onChange: (v: bool
     <label className="flex items-center gap-2 cursor-pointer select-none group">
       <div
         onClick={() => onChange(!value)}
-        className={`relative w-9 h-5 rounded-full transition-colors duration-200 ${value ? "bg-indigo-500" : "bg-gray-200"}`}
+        className="relative w-9 h-5 rounded-full transition-colors duration-200"
+        style={{ backgroundColor: value ? "var(--cd-primary)" : "var(--cd-surface-3)" }}
       >
-        <span className={`absolute top-0.5 w-4 h-4 bg-white rounded-full shadow transition-transform duration-200 ${value ? "translate-x-4" : "translate-x-0.5"}`} />
+        <span className="absolute top-0.5 w-4 h-4 bg-white rounded-full shadow transition-transform duration-200" style={{ transform: value ? "translateX(16px)" : "translateX(2px)" }} />
       </div>
-      <span className={`text-xs font-semibold transition-colors ${value ? "text-indigo-600" : "text-gray-500"}`}>
+      <span className="text-xs font-semibold transition-colors" style={{ color: value ? "var(--cd-primary-text)" : "var(--cd-text-muted)" }}>
         {label}
       </span>
     </label>
@@ -131,13 +132,21 @@ export default function SubmissionList({ submissions, isLoading, onReview }: Pro
       <div className="flex items-center justify-between gap-3 flex-wrap">
         {/* Title + count */}
         <div className="flex items-center gap-2">
-          <h3 className="text-sm font-bold text-gray-900">Submissions</h3>
-          <span className={`px-2 py-0.5 rounded-full text-[11px] font-bold
-            ${submissions.length > 0 ? "bg-indigo-50 text-indigo-600" : "bg-gray-100 text-gray-400"}`}>
+          <h3 className="text-sm font-bold" style={{ color: "var(--cd-text)" }}>Submissions</h3>
+          <span className="px-2 py-0.5 rounded-full text-[11px] font-bold"
+            style={{ 
+              backgroundColor: submissions.length > 0 ? "var(--cd-primary-subtle)" : "var(--cd-surface-2)",
+              color: submissions.length > 0 ? "var(--cd-primary-text)" : "var(--cd-text-muted)"
+            }}>
             {submissions.length}
           </span>
           {submissions.filter(s => !s.review).length > 0 && (
-            <span className="px-2 py-0.5 rounded-full text-[11px] font-bold bg-amber-50 text-amber-600 border border-amber-100">
+            <span className="px-2 py-0.5 rounded-full text-[11px] font-bold border"
+              style={{
+                backgroundColor: "var(--cd-warning-subtle)",
+                color: "var(--cd-warning)",
+                borderColor: "var(--cd-warning-subtle)"
+              }}>
               {submissions.filter(s => !s.review).length} pending
             </span>
           )}
@@ -153,11 +162,11 @@ export default function SubmissionList({ submissions, isLoading, onReview }: Pro
       {/* ── List ────────────────────────────────────────────────────────────── */}
       {sorted.length === 0 ? (
         <div className="flex flex-col items-center justify-center py-14 text-center">
-          <div className="w-12 h-12 rounded-2xl bg-gray-100 flex items-center justify-center mb-3">
-            <Inbox size={20} className="text-gray-400" />
+          <div className="w-12 h-12 rounded-2xl flex items-center justify-center mb-3" style={{ backgroundColor: "var(--cd-surface-2)" }}>
+            <Inbox size={20} style={{ color: "var(--cd-text-muted)" }} />
           </div>
-          <p className="text-sm font-semibold text-gray-700">No submissions yet</p>
-          <p className="text-xs text-gray-400 mt-1 max-w-[200px]">
+          <p className="text-sm font-semibold" style={{ color: "var(--cd-text)" }}>No submissions yet</p>
+          <p className="text-xs mt-1 max-w-[200px]" style={{ color: "var(--cd-text-muted)" }}>
             {showReviewed
               ? "Assignees haven't submitted anything for this task."
               : "All submissions have been reviewed."}
diff --git a/src/features/Tasks/v1/components/task/TaskCardList.tsx b/src/features/Tasks/v1/components/task/TaskCardList.tsx
index 09d869b..17116b0 100644
--- a/src/features/Tasks/v1/components/task/TaskCardList.tsx
+++ b/src/features/Tasks/v1/components/task/TaskCardList.tsx
@@ -1,12 +1,15 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { Plus, Eye, Pencil, Trash2, SearchX, Github, FileUp, Layers, ChevronLeft, ChevronRight } from "lucide-react";
+import {
+  Plus, Eye, Pencil, Trash2, SearchX,
+  Github, FileUp, Layers, ChevronLeft, ChevronRight,
+} from "lucide-react";
 import { formatDistanceToNow, isPast, parseISO } from "date-fns";
 import { AvatarGroup } from "../common/Avatar";
 import StatusBadge from "../common/StatusBadge";
 import PriorityBadge from "../common/PriorityBadge";
-import SkeletonLoader from "../common/SkeletonLoader";
 import EmptyState from "../common/EmptyState";
+import TechBadge from "../common/TechBadge";
 import { SUBMISSION_STATUS_CONFIG, PRIORITY_CONFIG } from "../../constants/task.constants";
 import type { Task } from "../../Task.types";
 
@@ -20,15 +23,15 @@ interface Props {
 }
 
 const SUB_ICON: Record<string, React.ReactNode> = {
-  file: <FileUp size={11} />, github: <Github size={11} />, both: <Layers size={11} />,
+  file:   <FileUp size={11} />,
+  github: <Github size={11} />,
+  both:   <Layers size={11} />,
 };
 
-const PRIORITY_BORDER: Record<string, string> = {
-  high: "border-l-red-500", medium: "border-l-amber-400", low: "border-l-sky-400",
-};
-
-export default function TaskCardList({ tasks, isLoading, onDelete, onCreateTask, hasFilters, onResetFilters }: Props) {
-  const navigate = useNavigate();
+export default function TaskCardList({
+  tasks, isLoading, onDelete, onCreateTask, hasFilters, onResetFilters,
+}: Props) {
+  const navigate   = useNavigate();
   const [page, setPage] = useState(1);
   const PAGE_SIZE  = 10;
   const totalPages = Math.ceil(tasks.length / PAGE_SIZE);
@@ -37,98 +40,150 @@ export default function TaskCardList({ tasks, isLoading, onDelete, onCreateTask,
   if (isLoading) return (
     <div className="flex flex-col gap-3 p-4">
       {Array.from({ length: 4 }).map((_, i) => (
-        <div key={i} className="h-32 bg-gray-100 rounded-xl animate-pulse" />
+        <div
+          key={i}
+          className="h-40 rounded-xl animate-pulse"
+          style={{ backgroundColor: "var(--cd-surface-2)" }}
+        />
       ))}
     </div>
   );
 
   if (tasks.length === 0) {
     return hasFilters ? (
-      <EmptyState variant="no-results" title="No tasks match your filters"
+      <EmptyState
+        variant="no-results"
+        title="No tasks match your filters"
         description="Try adjusting your filters."
-        action={<button onClick={onResetFilters}
-          className="flex items-center gap-1.5 px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-semibold rounded-xl transition">
-          <SearchX size={14} /> Clear Filters
-        </button>} />
+        action={
+          <button
+            onClick={onResetFilters}
+            className="cd-btn cd-btn-secondary flex items-center gap-1.5"
+          >
+            <SearchX size={14} /> Clear Filters
+          </button>
+        }
+      />
     ) : (
-      <EmptyState variant="no-tasks" title="No tasks yet"
+      <EmptyState
+        variant="no-tasks"
+        title="No tasks yet"
         description="Create the first task for this event."
-        action={<button onClick={onCreateTask}
-          className="flex items-center gap-1.5 px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold rounded-xl transition shadow-sm">
-          <Plus size={15} /> Create First Task
-        </button>} />
+        action={
+          <button
+            onClick={onCreateTask}
+            className="cd-btn cd-btn-primary flex items-center gap-1.5"
+          >
+            <Plus size={15} /> Create First Task
+          </button>
+        }
+      />
     );
   }
 
   return (
     <div className="flex flex-col">
+      {/* ── Card list ────────────────────────────────────── */}
       <div className="flex flex-col gap-3 p-4">
         {paginated.map((task) => {
-          const subCfg    = SUBMISSION_STATUS_CONFIG[task.submissionStatus];
-          const priCfg    = PRIORITY_CONFIG[task.priority];
+          const subCfg     = SUBMISSION_STATUS_CONFIG[task.submissionStatus];
+          const priCfg     = PRIORITY_CONFIG[task.priority];
           const deadlineDt = parseISO(task.deadline);
-          const isOverdue = isPast(deadlineDt) && task.status !== "completed";
+          const isOverdue  = isPast(deadlineDt) && task.status !== "completed";
 
           return (
-            <div key={task.id}
+            <div
+              key={task.id}
               onClick={() => navigate(`/org/tasks/${task.id}`)}
-              className={`bg-white rounded-xl border border-gray-200 border-l-4 ${PRIORITY_BORDER[task.priority]} shadow-sm hover:shadow-md transition-shadow cursor-pointer p-4`}>
-
-              {/* Top row */}
+              className={`rounded-xl border-l-4 ${priCfg.borderClass} shadow-sm cursor-pointer transition-shadow hover:shadow-md`}
+              style={{
+                backgroundColor: "var(--cd-surface)",
+                border: "1px solid var(--cd-border)",
+                borderLeftWidth: "4px",
+                padding: "1rem",
+              }}
+            >
+              {/* Top row: title + actions */}
               <div className="flex items-start justify-between gap-2 mb-2">
-                <h3 className="text-sm font-bold text-gray-900 leading-snug flex-1">{task.title}</h3>
-                <div onClick={(e) => e.stopPropagation()} className="flex items-center gap-1 shrink-0">
-                  <button onClick={() => navigate(`/org/tasks/${task.id}`)}
-                    className="p-1.5 rounded-lg text-gray-400 hover:bg-indigo-100 hover:text-indigo-700 transition"><Eye size={13} /></button>
-                  <button onClick={() => navigate(`/org/tasks/${task.id}/edit`)}
-                    className="p-1.5 rounded-lg text-gray-400 hover:bg-gray-100 hover:text-gray-700 transition"><Pencil size={13} /></button>
-                  <button onClick={() => onDelete(task)}
-                    className="p-1.5 rounded-lg text-gray-400 hover:bg-red-100 hover:text-red-600 transition"><Trash2 size={13} /></button>
+                <h3 className="text-sm font-bold leading-snug flex-1" style={{ color: "var(--cd-text)" }}>
+                  {task.title}
+                </h3>
+                <div
+                  onClick={(e) => e.stopPropagation()}
+                  className="flex items-center gap-1 shrink-0"
+                >
+                  <ActionBtn
+                    icon={<Eye size={13} />}
+                    label="View"
+                    color="indigo"
+                    onClick={() => navigate(`/org/tasks/${task.id}`)}
+                  />
+                  <ActionBtn
+                    icon={<Pencil size={13} />}
+                    label="Edit"
+                    color="gray"
+                    onClick={() => navigate(`/org/tasks/${task.id}/edit`)}
+                  />
+                  <ActionBtn
+                    icon={<Trash2 size={13} />}
+                    label="Delete"
+                    color="red"
+                    onClick={() => onDelete(task)}
+                  />
                 </div>
               </div>
 
               {/* Description */}
-              <p className="text-xs text-gray-400 mb-3 line-clamp-2">{task.description}</p>
+              <p className="text-xs mb-3 line-clamp-2" style={{ color: "var(--cd-text-muted)" }}>
+                {task.description}
+              </p>
 
               {/* Tech tags */}
               {task.technologies && task.technologies.length > 0 && (
                 <div className="flex flex-wrap gap-1 mb-3">
                   {task.technologies.slice(0, 4).map((tech) => (
-                    <span key={tech.id} className={`text-[10px] font-semibold px-1.5 py-0.5 rounded-md ${tech.color}`}>
-                      {tech.label}
-                    </span>
+                    <TechBadge key={tech.id} tech={tech} size="xs" />
                   ))}
                   {task.technologies.length > 4 && (
-                    <span className="text-[10px] font-semibold px-1.5 py-0.5 rounded-md bg-gray-100 text-gray-500">
+                    <span
+                      className="text-[10px] font-semibold px-1.5 py-0.5 rounded-md"
+                      style={{ backgroundColor: "var(--cd-surface-2)", color: "var(--cd-text-muted)" }}
+                    >
                       +{task.technologies.length - 4}
                     </span>
                   )}
                 </div>
               )}
 
-              {/* Badges row */}
+              {/* Status badges row */}
               <div className="flex flex-wrap items-center gap-2 mb-3">
                 <StatusBadge status={task.status} size="sm" />
                 <PriorityBadge priority={task.priority} size="sm" />
-                <span className={`inline-flex items-center gap-1 text-[10px] font-semibold px-2 py-0.5 rounded-full ${subCfg.bg} ${subCfg.text}`}>
+                <span
+                  className={`inline-flex items-center gap-1 text-[10px] font-semibold px-2 py-0.5 rounded-full ${subCfg.bg} ${subCfg.text}`}
+                >
                   {SUB_ICON[task.submissionType]}{subCfg.label}
                 </span>
                 {task.isMandatory && (
-                  <span className="text-[10px] font-semibold text-purple-600 bg-purple-50 px-1.5 py-0.5 rounded-md">Mandatory</span>
+                  <span className="text-[10px] font-semibold text-purple-600 bg-purple-50 px-1.5 py-0.5 rounded-md">
+                    Mandatory
+                  </span>
                 )}
               </div>
 
-              {/* Bottom row: members + deadline + points */}
+              {/* Bottom: members + deadline + points */}
               <div className="flex items-center justify-between gap-2">
-                {/* Member avatars */}
                 <AvatarGroup members={task.assignedTo} max={4} size="xs" />
-
                 <div className="flex items-center gap-3">
                   {task.points !== undefined && (
                     <span className="text-[10px] text-amber-600 font-bold">★ {task.points} pts</span>
                   )}
-                  <span className={`text-[10px] font-semibold ${isOverdue ? "text-red-500" : "text-gray-500"}`}>
-                    {isOverdue ? "OVERDUE · " : ""}{formatDistanceToNow(deadlineDt, { addSuffix: true })}
+                  <span
+                    className={`text-[10px] font-semibold ${isOverdue ? "text-red-500" : ""}`}
+                    style={!isOverdue ? { color: "var(--cd-text-muted)" } : {}}
+                  >
+                    {isOverdue ? "OVERDUE · " : ""}
+                    {formatDistanceToNow(deadlineDt, { addSuffix: true })}
                   </span>
                 </div>
               </div>
@@ -137,35 +192,73 @@ export default function TaskCardList({ tasks, isLoading, onDelete, onCreateTask,
         })}
       </div>
 
-      {/* Footer */}
-      <div className="sticky bottom-0 bg-white border-t px-4 py-3 flex items-center justify-between">
-        <span className="text-xs text-gray-400">{tasks.length} task{tasks.length !== 1 ? "s" : ""}</span>
+      {/* ── Footer ───────────────────────────────────────── */}
+      <div
+        className="sticky bottom-0 border-t px-4 py-3 flex items-center justify-between"
+        style={{
+          backgroundColor: "var(--cd-surface)",
+          borderColor: "var(--cd-border)",
+        }}
+      >
+        <span className="text-xs" style={{ color: "var(--cd-text-muted)" }}>
+          {tasks.length} task{tasks.length !== 1 ? "s" : ""}
+        </span>
 
         {totalPages > 1 && (
           <div className="flex items-center gap-2">
             <button
               onClick={() => setPage((p) => Math.max(1, p - 1))}
               disabled={page === 1}
-              className="p-1 rounded-lg border border-gray-200 text-gray-500 hover:bg-gray-100 disabled:opacity-40 disabled:cursor-not-allowed transition"
+              className="cd-btn cd-btn-secondary p-1 disabled:opacity-40 disabled:cursor-not-allowed"
             >
               <ChevronLeft size={13} />
             </button>
-            <span className="text-xs text-gray-500 font-medium">{page} / {totalPages}</span>
+            <span className="text-xs font-medium" style={{ color: "var(--cd-text-2)" }}>
+              {page} / {totalPages}
+            </span>
             <button
               onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
               disabled={page === totalPages}
-              className="p-1 rounded-lg border border-gray-200 text-gray-500 hover:bg-gray-100 disabled:opacity-40 disabled:cursor-not-allowed transition"
+              className="cd-btn cd-btn-secondary p-1 disabled:opacity-40 disabled:cursor-not-allowed"
             >
               <ChevronRight size={13} />
             </button>
           </div>
         )}
 
-        <button onClick={onCreateTask}
-          className="flex items-center gap-1.5 px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-bold rounded-xl transition shadow-sm">
+        <button
+          onClick={onCreateTask}
+          className="cd-btn cd-btn-primary flex items-center gap-1.5 text-xs"
+        >
           <Plus size={13} /> Add Task
         </button>
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
+
+// ── Small action button ───────────────────────────────────────────────────────
+function ActionBtn({
+  icon, label, onClick, color,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  onClick: () => void;
+  color: "indigo" | "gray" | "red";
+}) {
+  const hover = {
+    indigo: "hover:bg-indigo-100 hover:text-indigo-700",
+    gray:   "hover:bg-gray-100 hover:text-gray-700",
+    red:    "hover:bg-red-100 hover:text-red-600",
+  };
+  return (
+    <button
+      title={label}
+      onClick={onClick}
+      className={`p-1.5 rounded-lg transition-colors ${hover[color]}`}
+      style={{ color: "var(--cd-text-muted)" }}
+    >
+      {icon}
+    </button>
+  );
+}
diff --git a/src/features/Tasks/v1/components/task/TaskFilters.tsx b/src/features/Tasks/v1/components/task/TaskFilters.tsx
index bcbe4ed..56b772e 100644
--- a/src/features/Tasks/v1/components/task/TaskFilters.tsx
+++ b/src/features/Tasks/v1/components/task/TaskFilters.tsx
@@ -1,22 +1,37 @@
 import { useEffect, useRef, useState, useLayoutEffect } from "react";
 import { createPortal } from "react-dom";
-import { Search, X, SlidersHorizontal, ChevronDown, Check, Sparkles } from "lucide-react";
+import { Search, X, SlidersHorizontal, ChevronDown, Check, Star } from "lucide-react";
 import { mockMembers } from "../../mock/taskMockData";
 import type { TaskFilters, TaskStatus, TaskPriority } from "../../Task.types";
 
 interface Props {
-  filters: TaskFilters; onChange: (f: TaskFilters) => void;
-  totalCount: number; filteredCount: number;
+  filters: TaskFilters;
+  onChange: (f: TaskFilters) => void;
+  totalCount: number;
+  filteredCount: number;
 }
 
-const STATUS_COLORS:   Record<string,string> = { all:"",todo:"bg-gray-600 text-white","in-progress":"bg-indigo-600 text-white",completed:"bg-emerald-500 text-white" };
-const TIME_COLORS:     Record<string,string> = { all:"",upcoming:"bg-sky-500 text-white",past:"bg-red-500 text-white",completed:"bg-emerald-500 text-white" };
-const PRIORITY_COLORS: Record<string,string> = { all:"",high:"bg-red-500 text-white",medium:"bg-amber-500 text-white",low:"bg-sky-400 text-white" };
-const STATUS_DOTS:     Record<string,string> = { all:"bg-gray-300",todo:"bg-gray-500","in-progress":"bg-indigo-500",completed:"bg-emerald-500" };
-const TIME_DOTS:       Record<string,string> = { all:"bg-gray-300",upcoming:"bg-sky-500",past:"bg-red-500",completed:"bg-emerald-500" };
-const PRIORITY_DOTS:   Record<string,string> = { all:"bg-gray-300",high:"bg-red-500",medium:"bg-amber-400",low:"bg-sky-400" };
+const STATUS_DOTS:   Record<string, string> = { all: "bg-gray-400", todo: "bg-gray-500", "in-progress": "bg-indigo-500", completed: "bg-emerald-500" };
+const TIME_DOTS:     Record<string, string> = { all: "bg-gray-400", upcoming: "bg-sky-500", past: "bg-red-500", completed: "bg-emerald-500" };
+const PRIORITY_DOTS: Record<string, string> = { all: "bg-gray-400", high: "bg-red-500", medium: "bg-amber-400", low: "bg-sky-400" };
 
-// ─── Shared dropdown hook ─────────────────────────────────────────────────────
+const STATUS_STYLES: Record<string, { bg: string; color: string; border: string }> = {
+  todo: { bg: "var(--cd-surface-3)", color: "var(--cd-text-2)", border: "var(--cd-border)" },
+  "in-progress": { bg: "rgba(97, 95, 255, 0.16)", color: "#A7C7FF", border: "rgba(97, 95, 255, 0.38)" },
+  completed: { bg: "var(--cd-success-subtle)", color: "var(--cd-success)", border: "var(--cd-success-subtle)" },
+};
+const TIME_STYLES: Record<string, { bg: string; color: string; border: string }> = {
+  upcoming: { bg: "var(--cd-primary-subtle)", color: "var(--cd-primary-text)", border: "var(--cd-primary-subtle)" },
+  past: { bg: "var(--cd-danger-subtle)", color: "var(--cd-danger)", border: "var(--cd-danger-subtle)" },
+  completed: { bg: "var(--cd-success-subtle)", color: "var(--cd-success)", border: "var(--cd-success-subtle)" },
+};
+const PRIORITY_STYLES: Record<string, { bg: string; color: string; border: string }> = {
+  high: { bg: "var(--cd-danger-subtle)", color: "var(--cd-danger)", border: "var(--cd-danger-subtle)" },
+  medium: { bg: "var(--cd-warning-subtle)", color: "var(--cd-warning)", border: "var(--cd-warning-subtle)" },
+  low: { bg: "var(--cd-primary-subtle)", color: "var(--cd-primary-text)", border: "var(--cd-primary-subtle)" },
+};
+
+// ─── Dropdown state hook ──────────────────────────────────────────────────────
 function useDropdown() {
   const [open, setOpen] = useState(false);
   const btnRef   = useRef<HTMLButtonElement>(null);
@@ -35,54 +50,96 @@ function useDropdown() {
 
 // ─── Portal panel ─────────────────────────────────────────────────────────────
 function DropdownPortal({ btnRef, panelRef, open, children }: {
-  btnRef: React.RefObject<HTMLButtonElement>; panelRef: React.RefObject<HTMLDivElement>;
-  open: boolean; children: React.ReactNode;
+  btnRef: React.RefObject<HTMLButtonElement | null>;
+  panelRef: React.RefObject<HTMLDivElement | null>;
+  open: boolean;
+  children: React.ReactNode;
 }) {
   const [style, setStyle] = useState<React.CSSProperties>({});
   useLayoutEffect(() => {
     if (!open || !btnRef.current) return;
-    const rect = btnRef.current.getBoundingClientRect();
+    const rect  = btnRef.current.getBoundingClientRect();
     const below = window.innerHeight - rect.bottom;
     if (below < 240 && rect.top > below)
-      setStyle({ position:"fixed", left:rect.left, bottom:window.innerHeight - rect.top + 6, zIndex:9999 });
+      setStyle({ position: "fixed", left: rect.left, bottom: window.innerHeight - rect.top + 6, zIndex: 9999 });
     else
-      setStyle({ position:"fixed", left:rect.left, top:rect.bottom + 6, zIndex:9999 });
+      setStyle({ position: "fixed", left: rect.left, top: rect.bottom + 6, zIndex: 9999 });
   }, [open, btnRef]);
   if (!open) return null;
   return createPortal(
-    <div ref={panelRef} style={style}
-      className="bg-white rounded-xl border border-gray-200 shadow-2xl shadow-gray-200/80 py-1 overflow-hidden min-w-[150px]">
+    <div
+      ref={panelRef}
+      style={{
+        ...style,
+        backgroundColor: "var(--cd-surface)",
+        border: "1px solid var(--cd-border)",
+        boxShadow: "0 8px 24px var(--cd-shadow-md)",
+      }}
+      className="rounded-xl py-1 overflow-hidden min-w-[150px]"
+    >
       {children}
     </div>,
     document.body
   );
 }
 
-// ─── Pill dropdown ────────────────────────────────────────────────────────────
-function PillDropdown<T extends string>({ value, options, onChange, colorMap, dotMap }: {
-  value:T; options:{value:T;label:string}[]; onChange:(v:T)=>void;
-  colorMap:Record<string,string>; dotMap:Record<string,string>;
+// ─── Generic pill dropdown ────────────────────────────────────────────────────
+function PillDropdown<T extends string>({ label: pillLabel, value, options, onChange, dotMap, styleMap }: {
+  label: string;
+  value: T;
+  options: { value: T; label: string }[];
+  onChange: (v: T) => void;
+  dotMap: Record<string, string>;
+  styleMap: Record<string, { bg: string; color: string; border: string }>;
 }) {
   const { open, setOpen, btnRef, panelRef } = useDropdown();
   const isActive = value !== options[0].value;
-  const label = options.find(o => o.value === value)?.label ?? options[0].label;
+  const current  = options.find((o) => o.value === value)?.label ?? pillLabel;
+  const activeStyle = styleMap[value] ?? { bg: "var(--cd-primary)", color: "#fff", border: "var(--cd-primary)" };
+
   return (
     <div className="relative shrink-0">
-      <button ref={btnRef} onClick={() => setOpen(o => !o)}
-        className={`flex items-center gap-1 px-3 py-1.5 rounded-full text-xs font-semibold border transition-all whitespace-nowrap select-none
-          ${isActive ? `${colorMap[value]} border-transparent shadow-sm` : "bg-white text-gray-600 border-gray-200 hover:border-gray-300"}`}>
-        {label}
-        <ChevronDown size={11} className={`transition-transform duration-200 ${open?"rotate-180":""} ${!isActive?"text-gray-400":"opacity-70"}`}/>
+      <button
+        ref={btnRef}
+        onClick={() => setOpen((o) => !o)}
+        className="flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-semibold border transition-all whitespace-nowrap select-none"
+        style={{
+          backgroundColor: isActive ? activeStyle.bg : "var(--cd-surface-2)",
+          color: isActive ? activeStyle.color : "var(--cd-text-2)",
+          borderColor: isActive ? activeStyle.border : "var(--cd-border)",
+        }}
+      >
+        {isActive && <span className={`w-1.5 h-1.5 rounded-full shrink-0 ${dotMap[value] ?? "bg-white"} opacity-80`} />}
+        {current}
+        <ChevronDown
+          size={11}
+          className={`transition-transform duration-200 ${open ? "rotate-180" : ""}`}
+          style={{ opacity: isActive ? 0.7 : 1 }}
+        />
       </button>
+
       <DropdownPortal btnRef={btnRef} panelRef={panelRef} open={open}>
-        {options.map(opt => (
-          <button key={opt.value}
+        {options.map((opt) => (
+          <button
+            key={opt.value}
             onMouseDown={(e) => { e.preventDefault(); onChange(opt.value); setOpen(false); }}
-            className={`w-full flex items-center gap-2.5 px-3.5 py-2 text-xs font-semibold text-left transition-colors
-              ${opt.value===value?"bg-gray-50 text-gray-900":"text-gray-600 hover:bg-gray-50 hover:text-gray-900"}`}>
-            <span className={`w-2 h-2 rounded-full shrink-0 ${dotMap[opt.value]??"bg-gray-300"}`}/>
+            className="w-full flex items-center gap-2.5 px-3.5 py-2 text-xs font-semibold text-left transition-colors"
+            style={{
+              backgroundColor: opt.value === value ? "var(--cd-surface-2)" : "transparent",
+              color: opt.value === value ? "var(--cd-text)" : "var(--cd-text-2)",
+            }}
+            onMouseEnter={(e) => {
+              if (opt.value !== value)
+                (e.currentTarget as HTMLElement).style.backgroundColor = "var(--cd-hover)";
+            }}
+            onMouseLeave={(e) => {
+              if (opt.value !== value)
+                (e.currentTarget as HTMLElement).style.backgroundColor = "transparent";
+            }}
+          >
+            <span className={`w-2 h-2 rounded-full shrink-0 ${dotMap[opt.value] ?? "bg-gray-300"}`} />
             <span className="flex-1">{opt.label}</span>
-            {opt.value===value && <Check size={12} className="text-indigo-500 shrink-0"/>}
+            {opt.value === value && <Check size={12} style={{ color: "var(--cd-primary)" }} className="shrink-0" />}
           </button>
         ))}
       </DropdownPortal>
@@ -90,140 +147,244 @@ function PillDropdown<T extends string>({ value, options, onChange, colorMap, do
   );
 }
 
-// ─── Member filter ────────────────────────────────────────────────────────────
-function MemberFilter({ selected, onChange }: { selected:string[]; onChange:(ids:string[])=>void }) {
+// ─── Member multi-select ──────────────────────────────────────────────────────
+function MemberFilter({ selected, onChange }: { selected: string[]; onChange: (ids: string[]) => void }) {
   const { open, setOpen, btnRef, panelRef } = useDropdown();
   const isActive = selected.length > 0;
-  const toggle = (id:string) => onChange(selected.includes(id) ? selected.filter(x=>x!==id) : [...selected,id]);
+  const toggle = (id: string) =>
+    onChange(selected.includes(id) ? selected.filter((x) => x !== id) : [...selected, id]);
+
   return (
     <div className="relative shrink-0">
-      <button ref={btnRef} onClick={() => setOpen(o => !o)}
-        className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-semibold border transition-all select-none
-          ${isActive ? "bg-violet-600 text-white border-transparent shadow-sm" : "bg-white text-gray-600 border-gray-200 hover:border-gray-300"}`}>
+      <button
+        ref={btnRef}
+        onClick={() => setOpen((o) => !o)}
+        className="flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-semibold border transition-all select-none"
+        style={{
+          backgroundColor: isActive ? "var(--cd-secondary)" : "var(--cd-surface-2)",
+          color: isActive ? "#fff" : "var(--cd-text-2)",
+          borderColor: isActive ? "var(--cd-secondary)" : "var(--cd-border)",
+        }}
+      >
         {isActive && (
           <span className="flex -space-x-1.5">
-            {selected.slice(0,2).map(id => { const m=mockMembers.find(x=>x.id===id);
-              return m ? <img key={id} src={m.avatar} alt={m.name} className="w-4 h-4 rounded-full border border-violet-400 object-cover"/> : null; })}
+            {selected.slice(0, 2).map((id) => {
+              const m = mockMembers.find((x) => x.id === id);
+              return m ? (
+                <img key={id} src={m.avatar} alt={m.name} className="w-4 h-4 rounded-full border border-white object-cover" />
+              ) : null;
+            })}
           </span>
         )}
-        {isActive ? `${selected.length} Member${selected.length>1?"s":""}` : "Members"}
-        <ChevronDown size={11} className={`transition-transform duration-200 ${open?"rotate-180":""} ${!isActive?"text-gray-400":""}`}/>
+        {isActive ? `${selected.length} Member${selected.length > 1 ? "s" : ""}` : "Members"}
+        <ChevronDown size={11} className={`transition-transform duration-200 ${open ? "rotate-180" : ""}`} />
       </button>
+
       <DropdownPortal btnRef={btnRef} panelRef={panelRef} open={open}>
-        {mockMembers.map(m => { const isSel=selected.includes(m.id); return (
-          <button key={m.id} onMouseDown={(e)=>{e.preventDefault();toggle(m.id);}}
-            className={`w-full flex items-center gap-2.5 px-3 py-2 text-left transition-colors hover:bg-gray-50 ${isSel?"bg-violet-50":""}`}>
-            <img src={m.avatar} alt={m.name} className="w-6 h-6 rounded-full object-cover shrink-0"/>
-            <div className="flex-1 min-w-0">
-              <p className={`text-xs font-semibold truncate ${isSel?"text-violet-700":"text-gray-900"}`}>{m.name}</p>
-              <p className="text-[10px] text-gray-400 truncate">{m.role}</p>
-            </div>
-            {isSel && <div className="w-4 h-4 rounded-full bg-violet-600 flex items-center justify-center shrink-0"><Check size={9} className="text-white"/></div>}
-          </button>
-        );})}
-        {isActive && (<><div className="border-t my-1"/>
-          <button onMouseDown={(e)=>{e.preventDefault();onChange([]);}} className="w-full px-3 py-1.5 text-xs text-red-500 font-semibold text-left hover:bg-red-50">Clear all</button></>)}
+        {mockMembers.map((m) => {
+          const isSel = selected.includes(m.id);
+          return (
+            <button
+              key={m.id}
+              onMouseDown={(e) => { e.preventDefault(); toggle(m.id); }}
+              className="w-full flex items-center gap-2.5 px-3 py-2 text-left transition-colors"
+              style={{ backgroundColor: isSel ? "var(--cd-primary-subtle)" : "transparent" }}
+              onMouseEnter={(e) =>
+                ((e.currentTarget as HTMLElement).style.backgroundColor = isSel ? "var(--cd-primary-subtle)" : "var(--cd-hover)")
+              }
+              onMouseLeave={(e) =>
+                ((e.currentTarget as HTMLElement).style.backgroundColor = isSel ? "var(--cd-primary-subtle)" : "transparent")
+              }
+            >
+              <img src={m.avatar} alt={m.name} className="w-6 h-6 rounded-full object-cover shrink-0" />
+              <div className="flex-1 min-w-0">
+                <p className="text-xs font-semibold truncate" style={{ color: isSel ? "var(--cd-primary-text)" : "var(--cd-text)" }}>
+                  {m.name}
+                </p>
+                <p className="text-[10px] truncate" style={{ color: "var(--cd-text-muted)" }}>{m.role}</p>
+              </div>
+              {isSel && (
+                <div className="w-4 h-4 rounded-full flex items-center justify-center shrink-0" style={{ backgroundColor: "var(--cd-primary)" }}>
+                  <Check size={9} className="text-white" />
+                </div>
+              )}
+            </button>
+          );
+        })}
+        {isActive && (
+          <>
+            <div className="border-t my-1" style={{ borderColor: "var(--cd-border)" }} />
+            <button
+              onMouseDown={(e) => { e.preventDefault(); onChange([]); }}
+              className="w-full px-3 py-1.5 text-xs font-semibold text-left"
+              style={{ color: "var(--cd-danger)" }}
+              onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = "var(--cd-danger-subtle)")}
+              onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = "transparent")}
+            >
+              Clear all
+            </button>
+          </>
+        )}
       </DropdownPortal>
     </div>
   );
 }
 
-// ─── Smart search input ───────────────────────────────────────────────────────
-function SmartSearch({ value, onChange, filteredCount, totalCount, isFiltered }: {
-  value: string; onChange: (v:string) => void;
-  filteredCount: number; totalCount: number; isFiltered: boolean;
+// ─── Smart search with suggestions ───────────────────────────────────────────
+function SmartSearch({ value, onChange, filteredCount, tasks }: {
+  value: string;
+  onChange: (v: string) => void;
+  filteredCount: number;
+  totalCount: number;
+  isFiltered: boolean;
+  tasks: Task[];
 }) {
   const [focused, setFocused] = useState(false);
-  const [showHint, setShowHint] = useState(false);
-  const inputRef = useRef<HTMLInputElement>(null);
+  const { open, setOpen, btnRef, panelRef } = useDropdown();
+  const hasResults = !value || filteredCount > 0;
 
-  // Show hint popup briefly on focus when empty
-  useEffect(() => {
-    if (focused && !value) {
-      setShowHint(true);
-      const t = setTimeout(() => setShowHint(false), 3000);
-      return () => clearTimeout(t);
-    } else {
-      setShowHint(false);
+  // Suggestions logic
+  const suggestions = (() => {
+    const q = value.toLowerCase().trim();
+    const items: { id: string; label: string; type: "title" | "tech" | "member" | "status" | "recent" }[] = [];
+
+    if (q === "") {
+      // 0. Quick/Popular Suggestions when empty
+      // Popular tech
+      const popularTech = ["React", "TypeScript", "Tailwind", "Python", "Figma"];
+      popularTech.forEach(t => items.push({ id: `pop-${t}`, label: t, type: "tech" }));
+      
+      // Common statuses
+      items.push({ id: "status-todo", label: "Todo", type: "status" });
+      items.push({ id: "status-ip", label: "In Progress", type: "status" });
+      
+      return items;
     }
-  }, [focused, value]);
 
-  const hasResults = !value || filteredCount > 0;
+    // 1. Task Titles
+    tasks.forEach(t => {
+      if (t.title.toLowerCase().includes(q)) {
+        items.push({ id: `t-${t.id}`, label: t.title, type: "title" });
+      }
+    });
 
-  return (
-    <div className="relative shrink-0">
-      <div className={`flex items-center gap-1.5 pl-2.5 pr-2 py-1.5 rounded-full border transition-all
-        ${focused
-          ? "border-indigo-400 ring-2 ring-indigo-100 bg-white w-52 sm:w-64"
-          : value
-          ? "border-indigo-300 bg-indigo-50 w-44 sm:w-52"
-          : "border-gray-200 bg-gray-50 hover:border-gray-300 w-36 sm:w-44"}`}>
+    // 2. Tech Tags (Unique)
+    const techSet = new Set<string>();
+    tasks.forEach(t => {
+      t.technologies?.forEach(tech => {
+        if (tech.label.toLowerCase().includes(q) && !techSet.has(tech.id)) {
+          techSet.add(tech.id);
+          items.push({ id: `tech-${tech.id}`, label: tech.label, type: "tech" });
+        }
+      });
+    });
+
+    // 3. Members (Unique)
+    const memSet = new Set<string>();
+    tasks.forEach(t => {
+      t.assignedTo.forEach(m => {
+        if (m.name.toLowerCase().includes(q) && !memSet.has(m.id)) {
+          memSet.add(m.id);
+          items.push({ id: `m-${m.id}`, label: m.name, type: "member" });
+        }
+      });
+    });
+
+    return items.slice(0, 10);
+  })();
 
-        <Search size={13} className={`shrink-0 transition-colors ${focused || value ? "text-indigo-500" : "text-gray-400"}`}/>
+  const showSuggestions = open && suggestions.length > 0;
+
+  return (
+    <div className="relative shrink-0" ref={panelRef as any}>
+      <div
+        className={`flex items-center gap-1.5 pl-2.5 pr-2 py-1.5 rounded-full border transition-all ${
+          focused || open ? "w-64 sm:w-80" : value ? "w-48 sm:w-64" : "w-44 sm:w-64"
+        }`}
+        style={{
+          backgroundColor: focused || open ? "var(--cd-surface)" : "var(--cd-surface-2)",
+          borderColor: focused || open ? "var(--cd-primary)" : value ? "var(--cd-primary)" : "var(--cd-border)",
+          boxShadow: focused || open ? "0 0 0 3px var(--cd-primary-subtle)" : "none",
+        }}
+      >
+        <Search size={13} className="shrink-0 transition-colors" style={{ color: focused || open || value ? "var(--cd-primary)" : "var(--cd-text-muted)" }} />
 
         <input
-          ref={inputRef}
           value={value}
-          onChange={e => onChange(e.target.value)}
-          onFocus={() => setFocused(true)}
+          onChange={(e) => {
+            onChange(e.target.value);
+            setOpen(true);
+          }}
+          onFocus={() => {
+            setFocused(true);
+            setOpen(true);
+          }}
           onBlur={() => setFocused(false)}
-          placeholder="Search tasks…"
-          className="flex-1 text-xs bg-transparent outline-none placeholder-gray-400 text-gray-800 min-w-0"
+          placeholder="Search task, tech, members..."
+          className="flex-1 text-xs bg-transparent outline-none min-w-0 truncate"
+          style={{ color: "var(--cd-text)", caretColor: "var(--cd-primary)" }}
         />
 
-        {/* Result count badge while typing */}
         {value && (
-          <span className={`shrink-0 text-[10px] font-bold px-1.5 py-0.5 rounded-full transition-colors
-            ${hasResults ? "bg-indigo-100 text-indigo-600" : "bg-red-100 text-red-500"}`}>
+          <span
+            className="shrink-0 text-[10px] font-bold px-1.5 py-0.5 rounded-full transition-colors"
+            style={{
+              backgroundColor: hasResults ? "var(--cd-primary-subtle)" : "var(--cd-danger-subtle)",
+              color: hasResults ? "var(--cd-primary-text)" : "var(--cd-danger)",
+            }}
+          >
             {filteredCount}
           </span>
         )}
 
         {value && (
-          <button onClick={() => onChange("")} className="shrink-0 text-gray-400 hover:text-gray-600 transition-colors">
-            <X size={12}/>
+          <button onClick={() => { onChange(""); setOpen(false); }} className="shrink-0 transition-colors hover:text-[var(--cd-text)]" style={{ color: "var(--cd-text-muted)" }}>
+            <X size={12} />
           </button>
         )}
       </div>
 
-      {/* Hint tooltip — opens BELOW the search input via portal */}
-      {showHint && inputRef.current && (() => {
-        const rect = inputRef.current.getBoundingClientRect();
-        return createPortal(
-          <div style={{ position:"fixed", left: rect.left, top: rect.bottom + 8, zIndex:9999, width:288 }}
-            className="bg-gray-900 text-white rounded-xl p-3 shadow-2xl">
-            <div className="flex items-center gap-1.5 mb-2">
-              <Sparkles size={12} className="text-indigo-400"/>
-              <span className="text-[11px] font-bold text-indigo-300">Smart Search</span>
-            </div>
-            <div className="grid grid-cols-2 gap-x-3 gap-y-1">
-              {[
-                ["React","technology"],["Arjun","member name"],
-                ["high","priority"],["completed","status"],
-                ["mandatory","flag"],["github","submit type"],
-              ].map(([ex, desc]) => (
-                <button key={ex} onMouseDown={(e) => { e.preventDefault(); onChange(ex); setShowHint(false); }}
-                  className="flex items-center gap-1.5 text-left hover:bg-white/10 rounded-lg px-1.5 py-1 transition-colors group">
-                  <span className="text-[10px] font-bold text-amber-300 bg-amber-300/10 px-1.5 py-0.5 rounded-md group-hover:bg-amber-300/20">
-                    {ex}
-                  </span>
-                  <span className="text-[10px] text-gray-400">{desc}</span>
-                </button>
-              ))}
-            </div>
-            <p className="text-[10px] text-gray-500 mt-2">Click any example to try it</p>
-          {/* Arrow pointing UP toward the search box */}
-          <div className="absolute -top-1.5 left-5 w-3 h-3 bg-gray-900 rotate-45 rounded-sm"/>
-          </div>,
-          document.body
-        );
-      })()}
+      {showSuggestions && (
+        <div 
+          className="absolute z-50 top-full left-0 right-0 mt-2 p-2 rounded-2xl border shadow-2xl overflow-hidden"
+          style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border)" }}
+        >
+          <div className="flex items-center justify-between px-2.5 py-1.5 mb-1">
+            <p className="text-[9px] font-black uppercase tracking-widest" style={{ color: "var(--cd-text-muted)" }}>
+              {value ? "Search Results" : "Quick Discovery"}
+            </p>
+            {!value && <Star size={10} className="text-[var(--cd-warning)]" />}
+          </div>
+          <div 
+            className="flex flex-col gap-0.5 max-h-[160px] overflow-y-auto pr-1 custom-scrollbar"
+            style={{ overscrollBehaviorY: "contain" }}
+          >
+            {suggestions.map((s) => (
+              <button
+                key={s.id}
+                onClick={() => { onChange(s.label); setOpen(false); }}
+                className="w-full flex items-center justify-between gap-3 p-1.5 rounded-xl transition-all hover:bg-[var(--cd-hover)] hover:translate-x-1 text-left group"
+              >
+                <div className="flex items-center gap-2.5 flex-1 min-w-0">
+                  <div className="w-1.5 h-1.5 rounded-full opacity-40 group-hover:opacity-100 transition-opacity" style={{ backgroundColor: "var(--cd-primary)" }} />
+                  <span className="text-[11px] font-semibold truncate" style={{ color: "var(--cd-text)" }}>{s.label}</span>
+                </div>
+                <span className="px-1.5 py-0.5 rounded-md text-[8px] font-black uppercase tracking-tighter bg-[var(--cd-surface-3)] text-[var(--cd-text-muted)] group-hover:bg-[var(--cd-primary-subtle)] group-hover:text-[var(--cd-primary-text)] transition-colors">{s.type}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
     </div>
   );
 }
 
-// ─── Main ─────────────────────────────────────────────────────────────────────
-export default function TaskFiltersBar({ filters, onChange, totalCount, filteredCount }: Props) {
+// ─── Main filters bar ─────────────────────────────────────────────────────────
+interface TaskFiltersBarProps extends Props {
+  tasks: Task[];
+}
+
+export default function TaskFiltersBar({ filters, onChange, totalCount, filteredCount, tasks }: TaskFiltersBarProps) {
   const [localSearch, setLocalSearch] = useState(filters.search);
   const onChangeRef = useRef(onChange);
   useEffect(() => { onChangeRef.current = onChange; });
@@ -236,29 +397,63 @@ export default function TaskFiltersBar({ filters, onChange, totalCount, filtered
     return () => clearTimeout(timer);
   }, [localSearch, filters]);
 
-  const hasActive = filters.status !== "all" || filters.priority !== "all" || filters.time !== "all" || filters.members.length > 0 || filters.search !== "";
-  const resetAll  = () => { setLocalSearch(""); onChange({ status:"all", priority:"all", time:"all", members:[], search:"" }); };
+  const hasActive =
+    filters.status !== "all" || filters.priority !== "all" ||
+    filters.time !== "all" || filters.members.length > 0 || filters.search !== "";
+  const resetAll = () => {
+    setLocalSearch("");
+    onChange({ status: "all", priority: "all", time: "all", members: [], search: "" });
+  };
 
   return (
-    <div className="border-b bg-white">
-      <div className="flex items-center gap-2 px-4 py-2.5 overflow-x-auto scrollbar-hide">
-        <SlidersHorizontal size={14} className="text-gray-400 shrink-0"/>
-
-        <PillDropdown<TaskStatus|"all"> value={filters.status} colorMap={STATUS_COLORS} dotMap={STATUS_DOTS}
-          onChange={v => onChange({...filters,status:v})}
-          options={[{value:"all",label:"Status"},{value:"todo",label:"Todo"},{value:"in-progress",label:"In Progress"},{value:"completed",label:"Completed"}]}/>
+    <div className="border-b" style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border)" }}>
+      {/* Filter pills row */}
+      <div className="flex items-center gap-3 px-6 sm:px-10 py-4 flex-wrap">
+        <SlidersHorizontal size={14} className="shrink-0" style={{ color: "var(--cd-text-muted)" }} />
 
-        <PillDropdown<"all"|"upcoming"|"past"|"completed"> value={filters.time} colorMap={TIME_COLORS} dotMap={TIME_DOTS}
-          onChange={v => onChange({...filters,time:v})}
-          options={[{value:"all",label:"Time"},{value:"upcoming",label:"Upcoming"},{value:"past",label:"Past"},{value:"completed",label:"Completed"}]}/>
+        <PillDropdown<TaskStatus | "all">
+          label="Status"
+          value={filters.status}
+          dotMap={STATUS_DOTS}
+          styleMap={STATUS_STYLES}
+          onChange={(v) => onChange({ ...filters, status: v })}
+          options={[
+            { value: "all",         label: "Status"      },
+            { value: "todo",        label: "Todo"        },
+            { value: "in-progress", label: "In Progress" },
+            { value: "completed",   label: "Completed"   },
+          ]}
+        />
 
-        <PillDropdown<TaskPriority|"all"> value={filters.priority} colorMap={PRIORITY_COLORS} dotMap={PRIORITY_DOTS}
-          onChange={v => onChange({...filters,priority:v as TaskPriority|"all"})}
-          options={[{value:"all",label:"Priority"},{value:"high",label:"High"},{value:"medium",label:"Medium"},{value:"low",label:"Low"}]}/>
+        <PillDropdown<"all" | "upcoming" | "past" | "completed">
+          label="Time"
+          value={filters.time}
+          dotMap={TIME_DOTS}
+          styleMap={TIME_STYLES}
+          onChange={(v) => onChange({ ...filters, time: v })}
+          options={[
+            { value: "all",       label: "Time"      },
+            { value: "upcoming",  label: "Upcoming"  },
+            { value: "past",      label: "Past"      },
+            { value: "completed", label: "Completed" },
+          ]}
+        />
 
-        <MemberFilter selected={filters.members} onChange={ids => onChange({...filters,members:ids})}/>
+        <PillDropdown<TaskPriority | "all">
+          label="Priority"
+          value={filters.priority}
+          dotMap={PRIORITY_DOTS}
+          styleMap={PRIORITY_STYLES}
+          onChange={(v) => onChange({ ...filters, priority: v as TaskPriority | "all" })}
+          options={[
+            { value: "all",    label: "Priority" },
+            { value: "high",   label: "High"     },
+            { value: "medium", label: "Medium"   },
+            { value: "low",    label: "Low"      },
+          ]}
+        />
 
-        <div className="w-3 shrink-0"/>
+        <MemberFilter selected={filters.members} onChange={(ids) => onChange({ ...filters, members: ids })} />
 
         <SmartSearch
           value={localSearch}
@@ -266,35 +461,51 @@ export default function TaskFiltersBar({ filters, onChange, totalCount, filtered
           filteredCount={filteredCount}
           totalCount={totalCount}
           isFiltered={hasActive}
+          tasks={tasks}
         />
 
         {hasActive && (
-          <button onClick={resetAll}
-            className="flex items-center gap-1 px-3 py-1.5 rounded-full text-xs font-semibold text-red-500 bg-red-50 hover:bg-red-100 border border-red-100 transition shrink-0">
-            <X size={11}/> Reset
+          <button
+            onClick={resetAll}
+            className="flex items-center gap-1 px-3 py-1.5 rounded-full text-xs font-semibold shrink-0 transition border"
+            style={{
+              color: "var(--cd-danger)",
+              backgroundColor: "var(--cd-danger-subtle)",
+              borderColor: "var(--cd-danger-subtle)",
+            }}
+          >
+            <X size={11} /> Reset
           </button>
         )}
       </div>
 
-      {/* Count + search context */}
-      <div className="px-4 pb-2 flex items-center gap-2 flex-wrap">
-        <span className="text-[11px] text-gray-400">
-          Showing <span className="font-semibold text-gray-700">{filteredCount}</span>
-          {filteredCount !== totalCount && <> of <span className="font-semibold text-gray-700">{totalCount}</span></>}{" "}
+      {/* Count context row */}
+      <div className="px-6 sm:px-10 pb-4 flex items-center gap-2 flex-wrap">
+        <span className="text-[11px]" style={{ color: "var(--cd-text-muted)" }}>
+          Showing{" "}
+          <span className="font-semibold" style={{ color: "var(--cd-text)" }}>{filteredCount}</span>
+          {filteredCount !== totalCount && (
+            <>
+              {" "}of{" "}
+              <span className="font-semibold" style={{ color: "var(--cd-text)" }}>{totalCount}</span>
+            </>
+          )}{" "}
           task{filteredCount !== 1 ? "s" : ""}
-          {hasActive && <span className="text-indigo-500 font-semibold"> · filtered</span>}
+          {hasActive && (
+            <span style={{ color: "var(--cd-primary)" }} className="font-semibold"> · filtered</span>
+          )}
         </span>
         {localSearch && filteredCount === 0 && (
-          <span className="text-[11px] text-red-500 font-medium">
+          <span className="text-[11px] font-medium" style={{ color: "var(--cd-danger)" }}>
             No results for "{localSearch}" — try technology name, member, or status
           </span>
         )}
         {localSearch && filteredCount > 0 && (
-          <span className="text-[11px] text-indigo-500 font-medium">
-            Searching across title, description, tech tags, members & more
+          <span className="text-[11px] font-medium" style={{ color: "var(--cd-primary)" }}>
+            Searching across title, description, tech tags, members &amp; more
           </span>
         )}
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/features/Tasks/v1/components/task/TaskForm.tsx b/src/features/Tasks/v1/components/task/TaskForm.tsx
index f41e175..ff53fa8 100644
--- a/src/features/Tasks/v1/components/task/TaskForm.tsx
+++ b/src/features/Tasks/v1/components/task/TaskForm.tsx
@@ -2,13 +2,15 @@ import { useRef, useState, useEffect } from "react";
 import { useNavigate, useSearchParams } from "react-router-dom";
 import {
   ChevronDown, ChevronUp, Calendar, Star, Loader2,
-  AlertCircle, Github, FileUp, Layers, Users, Code2,
+  AlertCircle, Github, FileUp, Layers, Users, Link, X, Check
 } from "lucide-react";
 import Avatar from "../common/Avatar";
+import TechBadge from "../common/TechBadge";
 import { useEvents } from "../../hooks/useEvents";
 import { useCreateTask, useUpdateTask } from "../../hooks/useTasks";
 import { mockMembers } from "../../mock/taskMockData";
 import { TECH_OPTIONS } from "../../constants/tech.constants";
+import { techBadgeStyle } from "../../utils/techBadgeStyle";
 import type { Task, TaskPriority, SubmissionType, TechTag, CreateTaskPayload } from "../../Task.types";
 
 interface Props { mode: "create" | "edit"; task?: Task; }
@@ -34,20 +36,36 @@ function Field({ label, required, error, children, hint }: {
   label: string; required?: boolean; error?: string; children: React.ReactNode; hint?: string;
 }) {
   return (
-    <div className="flex flex-col gap-1.5">
-      <label className="text-xs font-bold text-gray-700 uppercase tracking-wide">
-        {label} {required && <span className="text-red-400">*</span>}
-      </label>
-      {children}
-      {hint && !error && <p className="text-[11px] text-gray-400">{hint}</p>}
-      {error && <p className="flex items-center gap-1 text-xs text-red-500 font-medium"><AlertCircle size={12} />{error}</p>}
+    <div className="flex flex-col gap-2 group/field">
+      <div className="flex items-center justify-between">
+        <label className="text-[10px] font-black uppercase tracking-widest transition-colors group-focus-within/field:text-[var(--cd-primary)]" style={{ color: "var(--cd-text-muted)" }}>
+          {label} {required && <span className="text-[var(--cd-danger)] ml-0.5">*</span>}
+        </label>
+      </div>
+      <div className="relative">{children}</div>
+      {hint && !error && <p className="text-[11px] font-medium opacity-60 px-1" style={{ color: "var(--cd-text-muted)" }}>{hint}</p>}
+      {error && <p className="flex items-center gap-1.5 text-[11px] font-bold px-1 mt-0.5" style={{ color: "var(--cd-danger)" }}><AlertCircle size={12} />{error}</p>}
+    </div>
+  );
+}
+
+function Section({ title, icon: Icon, children }: { title: string; icon: any; children: React.ReactNode }) {
+  return (
+    <div className="flex flex-col gap-6 p-6 rounded-2xl border bg-[var(--cd-surface)] border-[var(--cd-border)] shadow-sm hover:shadow-md transition-shadow">
+      <div className="flex items-center gap-3 pb-4 border-b border-[var(--cd-border)]">
+        <div className="w-8 h-8 rounded-lg flex items-center justify-center bg-[var(--cd-primary-subtle)] text-[var(--cd-primary)]">
+          <Icon size={18} />
+        </div>
+        <h2 className="text-sm font-bold tracking-tight" style={{ color: "var(--cd-text)" }}>{title}</h2>
+      </div>
+      <div className="grid grid-cols-1 gap-6">{children}</div>
     </div>
   );
 }
 
 function inputCls(error?: string) {
-  return `w-full text-sm rounded-xl border px-3.5 py-2.5 outline-none transition-all placeholder-gray-400 text-gray-900 bg-white
-    ${error ? "border-red-300 ring-2 ring-red-100" : "border-gray-200 focus:border-indigo-400 focus:ring-2 focus:ring-indigo-100"}`;
+  return `w-full text-sm rounded-xl border px-3.5 py-2.5 outline-none transition-all bg-[var(--cd-surface)] text-[var(--cd-text)] placeholder:text-[var(--cd-text-muted)]
+    ${error ? "border-[var(--cd-danger)] ring-2 ring-[var(--cd-danger-subtle)]" : "border-[var(--cd-border)] focus:border-[var(--cd-primary)] focus:ring-2 focus:ring-[var(--cd-primary-subtle)]"}`;
 }
 
 // ─── Tech tag picker ──────────────────────────────────────────────────────────
@@ -57,50 +75,274 @@ function TechPicker({ selected, onChange }: { selected: TechTag[]; onChange: (ta
 
   const toggle = (tech: TechTag) => {
     if (selectedIds.has(tech.id)) onChange(selected.filter((t) => t.id !== tech.id));
-    else onChange([...selected, tech]);
+    else {
+      onChange([...selected, tech]);
+      setSearch(""); // Clear search after selection
+    }
   };
 
-  const filtered = TECH_OPTIONS.filter((t) =>
-    t.label.toLowerCase().includes(search.toLowerCase())
-  );
+  const filtered = search.trim() === "" 
+    ? [] 
+    : TECH_OPTIONS.filter((t) =>
+        t.label.toLowerCase().includes(search.toLowerCase()) && !selectedIds.has(t.id)
+      );
 
   return (
-    <div className="flex flex-col gap-2">
-      {/* Selected tags */}
+    <div className="flex flex-col gap-3">
+      {/* Search Input */}
+      <div className="relative">
+        <input 
+          value={search} 
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="Type to add technologies (e.g. React, Python)..."
+          className="w-full text-sm border rounded-xl px-4 py-2.5 outline-none transition-all bg-[var(--cd-surface)] text-[var(--cd-text)] placeholder:text-[var(--cd-text-muted)] border-[var(--cd-border)] focus:border-[var(--cd-primary)] focus:ring-2 focus:ring-[var(--cd-primary-subtle)]" 
+        />
+        
+        {/* Suggestions Overlay */}
+        {filtered.length > 0 && (
+          <div 
+            className="absolute z-10 top-full left-0 right-0 mt-1.5 p-2 rounded-xl border shadow-xl flex flex-wrap gap-1.5 max-h-40 overflow-y-auto"
+            style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border)" }}
+          >
+            {filtered.map((tech) => (
+              <button 
+                key={tech.id} 
+                type="button" 
+                onClick={() => toggle(tech)}
+                className="inline-flex items-center gap-1.5 text-xs font-bold px-3 py-1.5 rounded-lg transition-all border hover:scale-105 active:scale-95"
+                style={{
+                  backgroundColor: "var(--cd-surface-2)",
+                  color: "var(--cd-text-2)",
+                  borderColor: "var(--cd-border)",
+                }}
+              >
+                <span className="text-[10px] opacity-50">+</span>
+                {tech.label}
+              </button>
+            ))}
+          </div>
+        )}
+
+        {search.trim() !== "" && filtered.length === 0 && (
+          <div 
+            className="absolute z-10 top-full left-0 right-0 mt-1.5 p-3 rounded-xl border shadow-lg text-xs"
+            style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border)", color: "var(--cd-text-muted)" }}
+          >
+            No matching technologies found for "{search}"
+          </div>
+        )}
+      </div>
+
+      {/* Selected tags (Visible below input) */}
       {selected.length > 0 && (
-        <div className="flex flex-wrap gap-1.5">
+        <div className="flex flex-wrap gap-2 pt-1">
           {selected.map((tech) => (
-            <span key={tech.id}
-              className={`inline-flex items-center gap-1 text-xs font-semibold px-2 py-0.5 rounded-md ${tech.color}`}>
-              {tech.label}
-              <button onClick={() => toggle(tech)} className="ml-0.5 opacity-60 hover:opacity-100 font-bold">×</button>
+            <span 
+              key={tech.id} 
+              className="inline-flex items-center gap-1 group/tag transition-all hover:scale-105"
+            >
+              <TechBadge tech={tech} />
+              <button
+                type="button"
+                onClick={() => toggle(tech)}
+                className="cd-btn-icon -ml-1 h-5 w-5 rounded-full bg-[var(--cd-surface-3)] text-[var(--cd-text-muted)] hover:bg-[var(--cd-danger-subtle)] hover:text-[var(--cd-danger)] flex items-center justify-center transition-colors"
+                title={`Remove ${tech.label}`}
+              >
+                <X size={10} />
+              </button>
             </span>
           ))}
         </div>
       )}
+    </div>
+  );
+}
 
-      {/* Search */}
-      <input value={search} onChange={(e) => setSearch(e.target.value)}
-        placeholder="Search technologies…"
-        className="w-full text-xs border border-gray-200 rounded-lg px-3 py-2 outline-none focus:border-indigo-400 focus:ring-2 focus:ring-indigo-100 placeholder-gray-400 bg-gray-50 focus:bg-white transition" />
-
-      {/* Grid of options */}
-      <div className="flex flex-wrap gap-1.5 max-h-32 overflow-y-auto pr-1">
-        {filtered.map((tech) => {
-          const isSel = selectedIds.has(tech.id);
-          return (
-            <button key={tech.id} type="button" onClick={() => toggle(tech)}
-              className={`inline-flex items-center gap-1 text-xs font-semibold px-2 py-0.5 rounded-md transition-all border
-                ${isSel
-                  ? `${tech.color} border-transparent ring-2 ring-offset-1 ring-indigo-300`
-                  : "bg-white text-gray-600 border-gray-200 hover:border-gray-400"}`}>
-              {isSel && <span className="text-[10px]">✓</span>}
-              {tech.label}
-            </button>
-          );
-        })}
-        {filtered.length === 0 && <p className="text-xs text-gray-400 py-2">No match for "{search}"</p>}
+function EventPicker({ value, onChange, events, error }: { value: string; onChange: (id: string) => void; events: EventOption[]; error?: string }) {
+  const [search, setSearch] = useState("");
+  const [open, setOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const selectedEvent = events.find(e => e.id === value);
+
+  const filtered = events.filter(e => 
+    e.name.toLowerCase().includes(search.toLowerCase()) || 
+    e.status.toLowerCase().includes(search.toLowerCase())
+  );
+
+  useEffect(() => {
+    const h = (e: MouseEvent) => {
+      if (!containerRef.current?.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener("mousedown", h);
+    return () => document.removeEventListener("mousedown", h);
+  }, []);
+
+  return (
+    <div className="relative" ref={containerRef}>
+      <div 
+        onClick={() => setOpen(!open)}
+        className={`w-full flex items-center justify-between gap-2 px-4 py-2.5 rounded-xl border cursor-pointer transition-all bg-[var(--cd-surface)] ${error ? "border-[var(--cd-danger)] ring-2 ring-[var(--cd-danger-subtle)]" : "border-[var(--cd-border)] hover:border-[var(--cd-primary)]"}`}
+      >
+        <div className="flex-1 min-w-0">
+          {selectedEvent ? (
+            <div className="flex items-center gap-2">
+              <span className="text-sm font-bold truncate" style={{ color: "var(--cd-text)" }}>{selectedEvent.name}</span>
+              <span className="px-1.5 py-0.5 rounded-md text-[9px] font-black uppercase tracking-tighter bg-[var(--cd-surface-3)] text-[var(--cd-text-muted)]">{selectedEvent.status}</span>
+            </div>
+          ) : (
+            <span className="text-sm text-[var(--cd-text-muted)]">Select an event…</span>
+          )}
+        </div>
+        <ChevronDown size={16} className={`text-[var(--cd-text-muted)] transition-transform duration-200 ${open ? "rotate-180" : ""}`} />
       </div>
+
+      {open && (
+        <div 
+          className="absolute z-30 top-full left-0 right-0 mt-1.5 p-2 rounded-xl border shadow-2xl flex flex-col gap-1 max-h-72 overflow-hidden"
+          style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border)" }}
+        >
+          <div className="relative mb-1">
+            <input
+              autoFocus
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              placeholder="Search events..."
+              className="w-full text-xs border rounded-lg px-3 py-2 outline-none bg-[var(--cd-surface-2)] text-[var(--cd-text)] border-[var(--cd-border)] focus:border-[var(--cd-primary)]"
+            />
+          </div>
+
+          <div className="overflow-y-auto flex flex-col gap-0.5">
+            {filtered.map((evt) => (
+              <button
+                key={evt.id}
+                type="button"
+                onClick={() => { onChange(evt.id); setOpen(false); setSearch(""); }}
+                className={`w-full flex flex-col gap-0.5 p-2.5 rounded-lg text-left transition-colors ${evt.id === value ? "bg-[var(--cd-primary-subtle)]" : "hover:bg-[var(--cd-hover)]"}`}
+              >
+                <div className="flex items-center justify-between gap-2">
+                  <span className="text-sm font-bold truncate" style={{ color: evt.id === value ? "var(--cd-primary-text)" : "var(--cd-text)" }}>{evt.name}</span>
+                  <span className={`px-1.5 py-0.5 rounded-md text-[9px] font-black uppercase tracking-tighter ${evt.id === value ? "bg-[var(--cd-primary)] text-white" : "bg-[var(--cd-surface-3)] text-[var(--cd-text-muted)]"}`}>{evt.status}</span>
+                </div>
+                <p className="text-[10px] truncate" style={{ color: evt.id === value ? "var(--cd-primary-text)" : "var(--cd-text-muted)", opacity: 0.8 }}>{evt.subtitle}</p>
+              </button>
+            ))}
+            {filtered.length === 0 && (
+              <p className="text-xs text-center py-4" style={{ color: "var(--cd-text-muted)" }}>No events found for "{search}"</p>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function MemberPicker({ selected, onChange }: { selected: string[]; onChange: (ids: string[]) => void }) {
+  const [search, setSearch] = useState("");
+  const [open, setOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const toggle = (id: string) => {
+    if (selected.includes(id)) onChange(selected.filter((x) => x !== id));
+    else {
+      onChange([...selected, id]);
+      setSearch("");
+    }
+  };
+
+  const filtered = mockMembers.filter(m => 
+    (m.name.toLowerCase().includes(search.toLowerCase()) || 
+     m.role.toLowerCase().includes(search.toLowerCase()))
+  );
+
+  useEffect(() => {
+    const h = (e: MouseEvent) => {
+      if (!containerRef.current?.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener("mousedown", h);
+    return () => document.removeEventListener("mousedown", h);
+  }, []);
+
+  return (
+    <div className="relative" ref={containerRef}>
+      {/* Trigger */}
+      <div 
+        onClick={() => setOpen(!open)}
+        className="w-full flex items-center justify-between gap-2 px-4 py-2.5 rounded-xl border cursor-pointer transition-all bg-[var(--cd-surface)] border-[var(--cd-border)] hover:border-[var(--cd-primary)]"
+      >
+        <div className="flex-1 flex items-center gap-2 min-w-0">
+          {selected.length > 0 ? (
+            <div className="flex -space-x-2 overflow-hidden shrink-0">
+              {selected.slice(0, 3).map((id) => {
+                const m = mockMembers.find(x => x.id === id);
+                return (
+                  <div key={id} className="inline-block h-6 w-6 rounded-full ring-2 ring-[var(--cd-surface)]">
+                    <Avatar name={m?.name || ""} src={m?.avatar} size="xs" showTooltip={false} />
+                  </div>
+                );
+              })}
+            </div>
+          ) : (
+            <Users size={16} className="text-[var(--cd-text-muted)]" />
+          )}
+          <span className="text-sm font-bold truncate" style={{ color: selected.length > 0 ? "var(--cd-text)" : "var(--cd-text-muted)" }}>
+            {selected.length > 0 
+              ? `${selected.length} member${selected.length !== 1 ? "s" : ""} assigned` 
+              : "Select members..."}
+          </span>
+        </div>
+        <ChevronDown size={16} className={`text-[var(--cd-text-muted)] transition-transform duration-200 ${open ? "rotate-180" : ""}`} />
+      </div>
+
+      {/* Dropdown */}
+      {open && (
+        <div 
+          className="absolute z-30 top-full left-0 right-0 mt-1.5 p-2 rounded-xl border shadow-2xl flex flex-col gap-1 max-h-80 overflow-hidden"
+          style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border)" }}
+        >
+          {/* Search inside */}
+          <div className="relative mb-1">
+            <input
+              autoFocus
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              placeholder="Search members..."
+              className="w-full text-xs border rounded-lg px-3 py-2 outline-none bg-[var(--cd-surface-2)] text-[var(--cd-text)] border-[var(--cd-border)] focus:border-[var(--cd-primary)]"
+            />
+          </div>
+
+          <div className="overflow-y-auto flex flex-col gap-0.5 pr-1">
+            {filtered.map((m) => {
+              const isSel = selected.includes(m.id);
+              return (
+                <button
+                  key={m.id}
+                  type="button"
+                  onClick={() => toggle(m.id)}
+                  className={`w-full flex items-center gap-3 p-2 rounded-lg transition-colors ${isSel ? "bg-[var(--cd-primary-subtle)]" : "hover:bg-[var(--cd-hover)]"}`}
+                >
+                  <Avatar name={m.name} src={m.avatar} size="sm" showTooltip={false} />
+                  <div className="flex-1 text-left min-w-0">
+                    <p className="text-xs font-bold truncate" style={{ color: isSel ? "var(--cd-primary-text)" : "var(--cd-text)" }}>{m.name}</p>
+                    <p className="text-[10px] truncate" style={{ color: isSel ? "var(--cd-primary-text)" : "var(--cd-text-muted)", opacity: 0.8 }}>{m.role}</p>
+                  </div>
+                  {isSel ? (
+                    <div className="w-5 h-5 rounded-full flex items-center justify-center bg-[var(--cd-primary)] text-white shadow-sm">
+                      <Check size={10} strokeWidth={4} />
+                    </div>
+                  ) : (
+                    <div className="w-5 h-5 rounded-full border border-[var(--cd-border)] flex items-center justify-center text-[var(--cd-text-muted)]">
+                      <span className="text-[10px]">+</span>
+                    </div>
+                  )}
+                </button>
+              );
+            })}
+            {filtered.length === 0 && (
+              <p className="text-xs text-center py-4" style={{ color: "var(--cd-text-muted)" }}>No members found</p>
+            )}
+          </div>
+        </div>
+      )}
     </div>
   );
 }
@@ -132,7 +374,10 @@ export default function TaskForm({ mode, task }: Props) {
 
   useEffect(() => {
     if (!touched) return;
-    setErrors(validate({ eventId, title, description, assignedTo, deadline, points: points === "" ? undefined : Number(points) }));
+    const timer = setTimeout(() => {
+      setErrors(validate({ eventId, title, description, assignedTo, deadline, points: points === "" ? undefined : Number(points) }));
+    }, 0);
+    return () => clearTimeout(timer);
   }, [touched, eventId, title, description, assignedTo, deadline, points]);
 
   const handleSubmit = async () => {
@@ -179,168 +424,149 @@ export default function TaskForm({ mode, task }: Props) {
   const SUB_OPTIONS: { value: SubmissionType; icon: React.ReactNode; label: string }[] = [
     { value: "github", icon: <Github size={14} />,  label: "GitHub"      },
     { value: "file",   icon: <FileUp size={14} />,  label: "File Upload" },
-    { value: "both",   icon: <Layers size={14} />,  label: "Both"        },
+    { value: "link",   icon: <Link size={14} />,    label: "External Link" },
+    { value: "all",    icon: <Layers size={14} />,  label: "Any / All"    },
   ];
 
   return (
-    <div className="flex flex-col gap-5 max-w-2xl w-full mx-auto p-6">
-      {/* Event */}
-      <Field label="Event" required error={errors.eventId}>
-        <select value={eventId} onChange={(e) => setEventId(e.target.value)} className={inputCls(errors.eventId)}>
-          <option value="">Select an event…</option>
-          {events.map((evt) => <option key={evt.id} value={evt.id}>{evt.name} · {evt.status}</option>)}
-        </select>
-      </Field>
-
-      {/* Title */}
-      <Field label="Task Title" required error={errors.title}>
-        <input type="text" value={title} onChange={(e) => setTitle(e.target.value)}
-          placeholder="e.g. Build landing page for AI showcase" className={inputCls(errors.title)} />
-      </Field>
-
-      {/* Description */}
-      <Field label="Description" required error={errors.description} hint="Explain deliverables and acceptance criteria.">
-        <textarea value={description} onChange={(e) => setDescription(e.target.value)} rows={4}
-          placeholder="Describe the task in detail…" className={`${inputCls(errors.description)} resize-none`} />
-      </Field>
-
-      {/* Technologies */}
-      <Field label="Technologies Used" hint="Select all relevant tech for this task.">
-        <div className="p-3 rounded-xl border border-gray-200 bg-gray-50">
-          <TechPicker selected={technologies} onChange={setTechnologies} />
-        </div>
-      </Field>
-
-      {/* Assign to */}
-      <Field label="Assign To" required error={errors.assignedTo}>
-        <div className="grid grid-cols-2 gap-2">
-          {mockMembers.map((m) => {
-            const sel = assignedTo.includes(m.id);
-            return (
-              <button key={m.id} type="button" onClick={() => {
-                setAssignedTo((prev) => prev.includes(m.id) ? prev.filter((x) => x !== m.id) : [...prev, m.id]);
-              }}
-                className={`flex items-center gap-2.5 p-3 rounded-xl border text-left transition-all
-                  ${sel ? "border-indigo-400 bg-indigo-50 ring-2 ring-indigo-100" : "border-gray-200 hover:border-gray-300 bg-white"}`}>
-                <Avatar name={m.name} src={m.avatar} size="md" showTooltip={false} ring ringColor="ring-indigo-200" />
-                <div className="flex-1 min-w-0">
-                  <p className={`text-xs font-semibold truncate ${sel ? "text-indigo-700" : "text-gray-900"}`}>{m.name}</p>
-                  <p className="text-[10px] text-gray-400 truncate">{m.role}</p>
-                </div>
-                {sel && <div className="w-4 h-4 rounded-full bg-indigo-600 flex items-center justify-center shrink-0"><span className="text-white text-[8px] font-bold">✓</span></div>}
-              </button>
-            );
-          })}
-        </div>
-        {assignedTo.length > 0 && (
-          <p className="text-[11px] text-indigo-600 font-medium flex items-center gap-1 mt-1">
-            <Users size={11} />{assignedTo.length} member{assignedTo.length !== 1 ? "s" : ""} selected
-          </p>
-        )}
-      </Field>
+    <div className="relative pb-32">
+      <div className="flex flex-col gap-8 max-w-3xl mx-auto p-6">
+        {/* Section 1: General Info */}
+        <Section title="General Information" icon={Layers}>
+          <Field label="Event Context" required error={errors.eventId} hint="Select the event this task belongs to.">
+            <EventPicker value={eventId} onChange={setEventId} events={events} error={errors.eventId} />
+          </Field>
+
+          <Field label="Task Title" required error={errors.title}>
+            <input type="text" value={title} onChange={(e) => setTitle(e.target.value)}
+              placeholder="e.g. Build landing page for AI showcase" className={inputCls(errors.title)} />
+          </Field>
+
+          <Field label="Description" required error={errors.description} hint="Explain deliverables and acceptance criteria clearly.">
+            <textarea value={description} onChange={(e) => setDescription(e.target.value)} rows={5}
+              placeholder="Describe the task in detail…" className={`${inputCls(errors.description)} resize-none`} />
+          </Field>
+
+          <Field label="Core Technologies" hint="Add all tech stacks required for this task.">
+            <div className="p-4 rounded-xl border bg-[var(--cd-surface-2)] border-[var(--cd-border)]">
+              <TechPicker selected={technologies} onChange={setTechnologies} />
+            </div>
+          </Field>
+        </Section>
+
+        {/* Section 2: Assignment & Logistics */}
+        <Section title="Assignment & Logistics" icon={Users}>
+          <Field label="Assigned Members" required error={errors.assignedTo} hint="Who should complete this task?">
+            <MemberPicker selected={assignedTo} onChange={setAssignedTo} />
+          </Field>
+
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-2">
+            <Field label="Deadline" required error={errors.deadline}>
+              <div className="relative group">
+                <input 
+                  ref={deadlineInputRef}
+                  type="datetime-local" 
+                  value={deadline} 
+                  onChange={(e) => setDeadline(e.target.value)} 
+                  className={inputCls(errors.deadline)} 
+                />
+                <button 
+                  type="button" 
+                  onClick={openDeadlinePicker}
+                  className="absolute right-4 top-1/2 -translate-y-1/2 text-[var(--cd-text-muted)] hover:text-[var(--cd-primary)] transition-colors"
+                >
+                  <Calendar size={16} />
+                </button>
+              </div>
+            </Field>
 
-      {/* Deadline + Priority */}
-      <div className="grid grid-cols-2 gap-4">
-        <Field label="Deadline" required error={errors.deadline}>
-          <div className="relative">
-            <input
-              ref={deadlineInputRef}
-              type="datetime-local"
-              value={deadline}
-              onChange={(e) => setDeadline(e.target.value)}
-              className={`w-full text-sm rounded-xl border py-2.5 pl-3 pr-11 outline-none transition-all text-gray-900 bg-white ${errors.deadline ? "border-red-300 ring-2 ring-red-100" : "border-gray-200 focus:border-indigo-400 focus:ring-2 focus:ring-indigo-100"}`}
-            />
-            <button
-              type="button"
-              onClick={openDeadlinePicker}
-              title="Select deadline"
-              aria-label="Select deadline"
-              className="absolute right-2 top-1/2 flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-lg text-gray-400 transition hover:bg-gray-100 hover:text-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-100"
-            >
-              <Calendar size={16} />
-            </button>
-          </div>
-        </Field>
-        <Field label="Priority">
-          <div className="flex gap-2">
-            {PRIORITY_OPTIONS.map((p) => (
-              <button key={p.value} type="button" onClick={() => setPriority(p.value)}
-                className={`flex-1 flex items-center justify-center gap-1.5 py-2.5 rounded-xl border text-xs font-bold transition-all
-                  ${priority === p.value ? "border-gray-800 bg-gray-800 text-white" : "border-gray-200 text-gray-600 hover:border-gray-300"}`}>
-                <span className={`w-2 h-2 rounded-full ${p.dot}`} />{p.label}
-              </button>
-            ))}
+            <Field label="Task Priority">
+              <div className="flex p-1 rounded-xl bg-[var(--cd-surface-2)] border border-[var(--cd-border)]">
+                {PRIORITY_OPTIONS.map((opt) => (
+                  <button key={opt.value} type="button" onClick={() => setPriority(opt.value)}
+                    className={`flex-1 flex items-center justify-center gap-2 py-2.5 rounded-lg text-xs font-bold transition-all ${priority === opt.value ? "bg-[var(--cd-surface)] shadow-sm scale-[1.02] text-[var(--cd-text)]" : "text-[var(--cd-text-muted)] hover:text-[var(--cd-text)]"}`}>
+                    <div className={`w-1.5 h-1.5 rounded-full ${opt.dot}`} />
+                    {opt.label}
+                  </button>
+                ))}
+              </div>
+            </Field>
           </div>
-        </Field>
-      </div>
-
-      {/* Submission type */}
-      <Field label="Submission Type">
-        <div className="flex gap-2">
-          {SUB_OPTIONS.map((o) => (
-            <button key={o.value} type="button" onClick={() => setSubmissionType(o.value)}
-              className={`flex-1 flex flex-col items-center gap-1.5 py-3 rounded-xl border text-xs font-semibold transition-all
-                ${submissionType === o.value ? "border-indigo-400 bg-indigo-50 text-indigo-700 ring-2 ring-indigo-100" : "border-gray-200 text-gray-600 hover:border-gray-300 bg-white"}`}>
-              {o.icon}{o.label}
-            </button>
-          ))}
-        </div>
-      </Field>
-
-      {/* Advanced */}
-      <div className="border border-gray-200 rounded-2xl overflow-hidden">
-        <button type="button" onClick={() => setShowAdvanced((v) => !v)}
-          className="w-full flex items-center justify-between px-4 py-3.5 text-sm font-bold text-gray-700 hover:bg-gray-50 transition-colors">
-          <span className="flex items-center gap-2"><Star size={14} className="text-amber-500" />Advanced Options</span>
-          {showAdvanced ? <ChevronUp size={16} className="text-gray-400" /> : <ChevronDown size={16} className="text-gray-400" />}
-        </button>
-
-        {showAdvanced && (
-          <div className="px-4 pb-4 flex flex-col gap-4 border-t bg-gray-50/50">
-            <div className="h-1" />
-
-            {[
-              { label: "Mandatory Task", desc: "Required for all assignees to complete.", val: isMandatory, set: setIsMandatory },
-              { label: "Allow Late Submission", desc: "Accept submissions after the deadline.", val: allowLate, set: setAllowLate },
-            ].map(({ label, desc, val, set }) => (
-              <div key={label} className="flex items-center justify-between">
-                <div><p className="text-sm font-semibold text-gray-800">{label}</p><p className="text-xs text-gray-400">{desc}</p></div>
-                <div onClick={() => set((v) => !v)}
-                  className={`relative w-10 h-6 rounded-full cursor-pointer transition-colors ${val ? "bg-indigo-500" : "bg-gray-200"}`}>
-                  <span className={`absolute top-1 w-4 h-4 bg-white rounded-full shadow transition-transform ${val ? "translate-x-5" : "translate-x-1"}`} />
-                </div>
+        </Section>
+
+        {/* Section 3: Rewards & Submission */}
+        <Section title="Rewards & Submission" icon={Star}>
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
+            <Field label="Submission Type" hint="Format for user submission.">
+              <div className="grid grid-cols-2 gap-2">
+                {SUB_OPTIONS.map((opt) => (
+                  <button key={opt.value} type="button" onClick={() => setSubmissionType(opt.value)}
+                    className={`flex items-center gap-2 px-3 py-2.5 rounded-xl border transition-all text-[11px] font-bold ${submissionType === opt.value ? "bg-[var(--cd-primary-subtle)] border-[var(--cd-primary)] text-[var(--cd-primary-text)] shadow-sm" : "bg-[var(--cd-surface)] border-[var(--cd-border)] text-[var(--cd-text-muted)] hover:border-[var(--cd-text-muted)]"}`}>
+                    {opt.icon}
+                    {opt.label}
+                  </button>
+                ))}
               </div>
-            ))}
+            </Field>
 
-            <Field label="Points (Hackathon Score)" error={errors.points} hint="Leave empty to disable scoring.">
+            <Field label="Reward Points" error={errors.points} hint="Points awarded upon completion.">
               <div className="relative">
-                <Star size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-amber-400 pointer-events-none" />
-                <input type="number" min={0} max={1000} value={points}
-                  onChange={(e) => setPoints(e.target.value === "" ? "" : Number(e.target.value))}
-                  placeholder="e.g. 100" className={`${inputCls(errors.points)} pl-8`} />
+                <input type="number" value={points} onChange={(e) => setPoints(e.target.value)}
+                  placeholder="e.g. 100" className={inputCls(errors.points)} />
+                <Star size={16} className="absolute right-4 top-1/2 -translate-y-1/2 text-[var(--cd-warning)] opacity-50" />
               </div>
             </Field>
+          </div>
 
-            <Field label="Max Submissions Per Member" hint="Leave empty for unlimited.">
-              <input type="number" min={1} value={maxSubs}
-                onChange={(e) => setMaxSubs(e.target.value === "" ? "" : Number(e.target.value))}
-                placeholder="e.g. 3" className={inputCls()} />
-            </Field>
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-8 pt-4">
+            <div className="flex items-center justify-between p-4 rounded-xl border bg-[var(--cd-surface-2)] border-[var(--cd-border)]">
+              <div>
+                <p className="text-xs font-bold" style={{ color: "var(--cd-text)" }}>Mandatory Task</p>
+                <p className="text-[10px]" style={{ color: "var(--cd-text-muted)" }}>Required to finish event.</p>
+              </div>
+              <button type="button" onClick={() => setIsMandatory(!isMandatory)}
+                className={`w-10 h-6 rounded-full relative transition-colors ${isMandatory ? "bg-[var(--cd-primary)]" : "bg-[var(--cd-surface-3)]"}`}>
+                <div className={`absolute top-1 w-4 h-4 rounded-full bg-white shadow transition-transform ${isMandatory ? "translate-x-5" : "translate-x-1"}`} />
+              </button>
+            </div>
+
+            <div className="flex items-center justify-between p-4 rounded-xl border bg-[var(--cd-surface-2)] border-[var(--cd-border)]">
+              <div>
+                <p className="text-xs font-bold" style={{ color: "var(--cd-text)" }}>Late Submissions</p>
+                <p className="text-[10px]" style={{ color: "var(--cd-text-muted)" }}>Accept after deadline.</p>
+              </div>
+              <button type="button" onClick={() => setAllowLate(!allowLate)}
+                className={`w-10 h-6 rounded-full relative transition-colors ${allowLate ? "bg-[var(--cd-primary)]" : "bg-[var(--cd-surface-3)]"}`}>
+                <div className={`absolute top-1 w-4 h-4 rounded-full bg-white shadow transition-transform ${allowLate ? "translate-x-5" : "translate-x-1"}`} />
+              </button>
+            </div>
           </div>
-        )}
+
+          <Field label="Max Submissions" hint="Leave empty for unlimited.">
+            <input type="number" value={maxSubs} onChange={(e) => setMaxSubs(e.target.value)}
+              placeholder="Unlimited" className={inputCls()} />
+          </Field>
+        </Section>
       </div>
 
-      {/* Submit row */}
-      <div className="flex items-center justify-between gap-3 pt-2 border-t">
-        <button type="button" onClick={() => navigate(-1)}
-          className="px-5 py-2.5 rounded-xl border border-gray-200 text-sm font-semibold text-gray-600 hover:bg-gray-50 transition">
-          Cancel
-        </button>
-        <button type="button" onClick={handleSubmit} disabled={isLoading}
-          className="flex items-center gap-2 px-6 py-2.5 bg-indigo-600 hover:bg-indigo-700 active:scale-95 disabled:opacity-60 text-white text-sm font-bold rounded-xl transition-all shadow-sm shadow-indigo-200">
-          {isLoading && <Loader2 size={14} className="animate-spin" />}
-          {mode === "create" ? "Create Task" : "Save Changes"}
-        </button>
+      {/* Floating Action Bar */}
+      <div className="fixed bottom-0 left-0 right-0 p-4 sm:p-6 z-40 bg-gradient-to-t from-[var(--cd-bg)] via-[var(--cd-bg)] to-transparent pointer-events-none lg:pl-85 transition-all">
+        <div className="max-w-3xl mx-auto flex items-center justify-between p-4 rounded-2xl border shadow-2xl pointer-events-auto backdrop-blur-md bg-[var(--cd-surface)]/90 border-[var(--cd-border)]">
+          <div className="hidden sm:block">
+            <p className="text-xs font-bold" style={{ color: "var(--cd-text)" }}>{mode === "create" ? "New Task" : "Edit Mode"}</p>
+            <p className="text-[10px] truncate max-w-[200px]" style={{ color: "var(--cd-text-muted)" }}>{title || "Untitled Task"}</p>
+          </div>
+          <div className="flex items-center gap-3 w-full sm:w-auto">
+            <button type="button" onClick={() => navigate(-1)}
+              className="flex-1 sm:flex-none px-6 py-2.5 rounded-xl text-sm font-bold border transition-all bg-[var(--cd-surface)] border-[var(--cd-border)] text-[var(--cd-text-2)] hover:bg-[var(--cd-hover)]">
+              Cancel
+            </button>
+            <button type="button" onClick={handleSubmit} disabled={isLoading}
+              className="flex-1 sm:flex-none px-8 py-2.5 rounded-xl text-sm font-bold text-white shadow-lg transition-all active:scale-95 disabled:opacity-50 flex items-center justify-center gap-2 bg-[var(--cd-primary)] hover:brightness-110">
+              {isLoading ? <Loader2 size={16} className="animate-spin" /> : (mode === "create" ? "Create Task" : "Save Changes")}
+            </button>
+          </div>
+        </div>
       </div>
     </div>
   );
diff --git a/src/features/Tasks/v1/components/task/TaskHeader.tsx b/src/features/Tasks/v1/components/task/TaskHeader.tsx
index 030ba5d..515b837 100644
--- a/src/features/Tasks/v1/components/task/TaskHeader.tsx
+++ b/src/features/Tasks/v1/components/task/TaskHeader.tsx
@@ -4,84 +4,190 @@ import { useEvents } from "../../hooks/useEvents";
 import { EVENT_TYPE_CONFIG, EVENT_STATUS_CONFIG } from "../../constants/task.constants";
 import type { Task } from "../../Task.types";
 
-interface Props { selectedEventId: string | null; tasks: Task[]; }
+interface Props {
+  selectedEventId: string | null;
+  tasks: Task[];
+  activeTab: string;
+  onTabChange: (tab: string) => void;
+}
+
+const TABS = [
+  { key: "all",         label: "All Tasks" },
+  { key: "todo",        label: "To Do" },
+  { key: "in-progress", label: "In Progress" },
+  { key: "completed",   label: "Completed" },
+];
 
-export default function TaskHeader({ selectedEventId, tasks }: Props) {
+export default function TaskHeader({ selectedEventId, tasks, activeTab, onTabChange }: Props) {
   const navigate = useNavigate();
   const { data: events = [] } = useEvents();
-  const event = events.find((e) => e.id === selectedEventId) ?? null;
+  const event     = events.find((e) => e.id === selectedEventId) ?? null;
+
+  const todo        = tasks.filter((t) => t.status === "todo").length;
+  const inProgress  = tasks.filter((t) => t.status === "in-progress").length;
+  const completed   = tasks.filter((t) => t.status === "completed").length;
+  const typeCfg     = event ? EVENT_TYPE_CONFIG[event.type]    : null;
+  const statusCfg   = event ? EVENT_STATUS_CONFIG[event.status] : null;
 
-  const todo       = tasks.filter((t) => t.status === "todo").length;
-  const inProgress = tasks.filter((t) => t.status === "in-progress").length;
-  const completed  = tasks.filter((t) => t.status === "completed").length;
-  const typeCfg    = event ? EVENT_TYPE_CONFIG[event.type]   : null;
-  const statusCfg  = event ? EVENT_STATUS_CONFIG[event.status] : null;
+  const tabCount: Record<string, number> = {
+    all: tasks.length,
+    todo,
+    "in-progress": inProgress,
+    completed,
+  };
 
   return (
-    <div className="bg-white border-b">
-      {/* Top row */}
-      <div className="flex items-center justify-between px-4 pt-3 pb-2 gap-2">
-        <div className="flex items-center gap-2.5 min-w-0">
-          <div className="w-8 h-8 rounded-xl bg-indigo-600 flex items-center justify-center shrink-0">
-            <ListTodo size={16} className="text-white" />
+    <div
+      className="border-b flex flex-col font-bold justify-between"
+      style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border)" }}
+    >
+      {/* ── Top row ─────────────────────────────────────────── */}
+      <div className="pt-8 sm:pt-10 flex w-full justify-between items-start px-6 sm:px-10">
+        {/* Left: title + subtitle */}
+        <div className="flex flex-col gap-1">
+          <div className="flex items-center gap-2.5">
+            <div
+              className="w-8 h-8 rounded-xl flex items-center justify-center shrink-0"
+              style={{ backgroundColor: "var(--cd-primary)", color: "#fff" }}
+            >
+              <ListTodo size={16} />
+            </div>
+            <h1
+              className="text-lg sm:text-2xl font-bold"
+              style={{ color: "var(--cd-text)" }}
+            >
+              Task Management
+            </h1>
           </div>
-          <div className="min-w-0">
-            <h1 className="text-sm sm:text-base font-bold text-gray-900 leading-tight">Task Management</h1>
-            {event ? (
-              <p className="text-xs text-gray-400 truncate max-w-[180px] sm:max-w-none">
-                Tasks for <span className="font-semibold text-indigo-600">{event.name}</span>
+
+          {event ? (
+            <div className="flex items-center gap-2 mt-1 ml-0.5 flex-wrap">
+              <p className="text-sm font-normal" style={{ color: "var(--cd-text-2)" }}>
+                Tasks for{" "}
+                <span className="font-semibold" style={{ color: "var(--cd-primary)" }}>
+                  {event.name}
+                </span>
               </p>
-            ) : (
-              <p className="text-xs text-gray-400">Select an event to begin</p>
-            )}
-          </div>
+              {typeCfg && (
+                <span
+                  className={`inline-flex items-center gap-1 text-[11px] font-semibold px-2 py-0.5 rounded-full ${typeCfg.bg} ${typeCfg.text}`}
+                >
+                  <span className={`w-1.5 h-1.5 rounded-full ${typeCfg.dot}`} />
+                  {typeCfg.label}
+                </span>
+              )}
+              {statusCfg && (
+                <span
+                  className={`inline-flex items-center gap-1 text-[11px] font-semibold px-2 py-0.5 rounded-full ${statusCfg.bg} ${statusCfg.text}`}
+                >
+                  {statusCfg.pulse ? (
+                    <span className="relative flex h-1.5 w-1.5">
+                      <span className={`animate-ping absolute inline-flex h-full w-full rounded-full opacity-75 ${statusCfg.dot}`} />
+                      <span className={`relative inline-flex rounded-full h-1.5 w-1.5 ${statusCfg.dot}`} />
+                    </span>
+                  ) : (
+                    <span className={`w-1.5 h-1.5 rounded-full ${statusCfg.dot}`} />
+                  )}
+                  {event.status}
+                </span>
+              )}
+            </div>
+          ) : (
+            <p className="text-sm font-normal mt-1" style={{ color: "var(--cd-text-2)" }}>
+              Manage all tasks for your events in one place.
+            </p>
+          )}
         </div>
 
-        <button
-          onClick={() => navigate(selectedEventId ? `/org/tasks/create?eventId=${selectedEventId}` : "/org/tasks/create")}
-          disabled={!selectedEventId}
-          className="flex items-center gap-1.5 px-3 sm:px-4 py-2 bg-indigo-600 hover:bg-indigo-700 active:scale-95 disabled:opacity-40 disabled:cursor-not-allowed text-white text-xs sm:text-sm font-semibold rounded-xl transition-all shadow-sm shadow-indigo-200 shrink-0"
-        >
-          <Plus size={15} />
-          <span className="hidden sm:inline">New Task</span>
-          <span className="inline sm:hidden">New</span>
-        </button>
+        {/* Right: New Task button */}
+        <div className="flex items-center">
+          <button
+            onClick={() =>
+              navigate(
+                selectedEventId
+                  ? `/org/tasks/create?eventId=${selectedEventId}`
+                  : "/org/tasks/create"
+              )
+            }
+            disabled={!selectedEventId}
+            className="cd-btn cd-btn-primary flex items-center gap-2 disabled:opacity-40 disabled:cursor-not-allowed"
+          >
+            <Plus size={16} />
+            <span className="hidden sm:inline font-semibold text-sm">New Task</span>
+          </button>
+        </div>
       </div>
 
-      {/* Event badges + stats — scrollable on mobile */}
-      {event && typeCfg && statusCfg && (
-        <div className="px-4 pb-2.5 flex items-center gap-2 overflow-x-auto scrollbar-hide">
-          <span className={`inline-flex items-center gap-1.5 text-[11px] font-semibold px-2.5 py-1 rounded-lg shrink-0 ${typeCfg.bg} ${typeCfg.text}`}>
-            <span className={`w-1.5 h-1.5 rounded-full ${typeCfg.dot}`} />{typeCfg.label}
-          </span>
-
-          <span className={`inline-flex items-center gap-1.5 text-[11px] font-semibold px-2.5 py-1 rounded-lg shrink-0 ${statusCfg.bg} ${statusCfg.text}`}>
-            {statusCfg.pulse ? (
-              <span className="relative flex h-1.5 w-1.5">
-                <span className={`animate-ping absolute inline-flex h-full w-full rounded-full opacity-75 ${statusCfg.dot}`} />
-                <span className={`relative inline-flex rounded-full h-1.5 w-1.5 ${statusCfg.dot}`} />
-              </span>
-            ) : <span className={`w-1.5 h-1.5 rounded-full ${statusCfg.dot}`} />}
-            {event.status}
-          </span>
-
-          <div className="w-px h-4 bg-gray-200 shrink-0" />
-
-          <Chip icon={<ListTodo size={11} />}     label="Total"       value={tasks.length}  color="text-gray-600"    bg="bg-gray-100"    />
-          <Chip icon={<Clock3 size={11} />}        label="Todo"        value={todo}           color="text-gray-500"    bg="bg-gray-50"     />
-          <Chip icon={<Zap size={11} />}           label="In Progress" value={inProgress}     color="text-indigo-600"  bg="bg-indigo-50"   />
-          <Chip icon={<CheckCircle2 size={11} />}  label="Done"        value={completed}      color="text-emerald-600" bg="bg-emerald-50"  />
+      {/* ── Stats row ───────────────────────────────────────── */}
+      {event && (
+        <div className="flex items-center gap-3 px-6 sm:px-10 mt-5 overflow-x-auto scrollbar-hide">
+          <StatChip icon={<ListTodo size={12} />}    label="Total"       value={tasks.length} />
+          <StatChip icon={<Clock3 size={12} />}      label="Todo"        value={todo}         accent="amber"   />
+          <StatChip icon={<Zap size={12} />}         label="In Progress" value={inProgress}   accent="indigo"  />
+          <StatChip icon={<CheckCircle2 size={12} />} label="Done"       value={completed}    accent="emerald" />
         </div>
       )}
+
+      {/* ── Tab navigation (like Events page) ───────────────── */}
+      <div className="flex space-x-1 mt-6 sm:mt-10 px-6 sm:px-10">
+        {TABS.map((tab) => {
+          const isActive = activeTab === tab.key;
+          return (
+            <button
+              key={tab.key}
+              onClick={() => onTabChange(tab.key)}
+              className="flex items-center gap-1.5 px-4 py-2 border-b-2 text-sm font-medium transition-all duration-200 whitespace-nowrap"
+              style={{
+                color: isActive ? "var(--cd-primary)" : "var(--cd-text-2)",
+                borderColor: isActive ? "var(--cd-primary)" : "transparent",
+              }}
+            >
+              {tab.label}
+              {event && (
+                <span
+                  className="text-[10px] font-bold px-1.5 py-0.5 rounded-full"
+                  style={{
+                    backgroundColor: isActive ? "var(--cd-primary-subtle)" : "var(--cd-surface-2)",
+                    color: isActive ? "var(--cd-primary-text)" : "var(--cd-text-muted)",
+                  }}
+                >
+                  {tabCount[tab.key]}
+                </span>
+              )}
+            </button>
+          );
+        })}
+      </div>
     </div>
   );
 }
 
-function Chip({ icon, label, value, color, bg }: { icon: React.ReactNode; label: string; value: number; color: string; bg: string }) {
+// ── Small stat chip ───────────────────────────────────────────────────────────
+function StatChip({
+  icon,
+  label,
+  value,
+  accent,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  value: number;
+  accent?: "indigo" | "emerald" | "amber";
+}) {
+  const accentMap = {
+    indigo:  { bg: "var(--cd-primary-subtle)",  color: "var(--cd-primary-text)" },
+    emerald: { bg: "rgba(74,222,128,0.12)",      color: "var(--cd-success)"     },
+    amber:   { bg: "rgba(250,204,21,0.12)",      color: "var(--cd-warning)"     },
+  };
+  const style = accent ? accentMap[accent] : { bg: "var(--cd-surface-2)", color: "var(--cd-text-2)" };
   return (
-    <span className={`inline-flex items-center gap-1 px-2 py-1 rounded-lg text-[11px] font-semibold shrink-0 ${bg} ${color}`}>
-      {icon}<span className="font-bold">{value}</span>
-      <span className="font-medium opacity-75 hidden sm:inline">{label}</span>
+    <span
+      className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-[11px] font-semibold shrink-0"
+      style={{ backgroundColor: style.bg, color: style.color }}
+    >
+      {icon}
+      <span className="font-bold">{value}</span>
+      <span className="font-medium opacity-80 hidden sm:inline">{label}</span>
     </span>
   );
 }
\ No newline at end of file
diff --git a/src/features/Tasks/v1/components/task/TaskRow.tsx b/src/features/Tasks/v1/components/task/TaskRow.tsx
index a6bbe48..ce75ad9 100644
--- a/src/features/Tasks/v1/components/task/TaskRow.tsx
+++ b/src/features/Tasks/v1/components/task/TaskRow.tsx
@@ -1,17 +1,22 @@
 import { useNavigate } from "react-router-dom";
-import { Eye, Pencil, Trash2, Github, FileUp, Layers } from "lucide-react";
+import { Eye, Pencil, Trash2, Github, FileUp, Layers, Link } from "lucide-react";
 import { formatDistanceToNow, isPast, parseISO, differenceInHours } from "date-fns";
 import StatusBadge from "../common/StatusBadge";
 import PriorityBadge from "../common/PriorityBadge";
 import { AvatarGroup } from "../common/Avatar";
+import TechBadge from "../common/TechBadge";
 import { SUBMISSION_STATUS_CONFIG } from "../../constants/task.constants";
 import type { Task } from "../../Task.types";
 
 interface Props { task: Task; onDelete: (task: Task) => void; }
 
 const SUB_ICON: Record<string, React.ReactNode> = {
-  file: <FileUp size={11} />, github: <Github size={11} />, both: <Layers size={11} />,
+  file: <FileUp size={11} />, 
+  github: <Github size={11} />, 
+  link: <Link size={11} />,
+  all: <Layers size={11} />,
 };
+
 const PRIORITY_BORDER: Record<string, string> = {
   high: "border-l-red-500", medium: "border-l-amber-400", low: "border-l-sky-400",
 };
@@ -25,32 +30,39 @@ export default function TaskRow({ task, onDelete }: Props) {
 
   return (
     <tr onClick={() => navigate(`/org/tasks/${task.id}`)}
-      className={`group cursor-pointer border-b border-gray-100 border-l-4 ${PRIORITY_BORDER[task.priority]} hover:bg-indigo-50/40 transition-colors duration-100`}>
-
+      className={`group cursor-pointer border-l-4 ${PRIORITY_BORDER[task.priority]} transition-all duration-200 hover:bg-[var(--cd-hover)] border-b border-[var(--cd-border-subtle)]`}
+    >
       {/* Title */}
-      <td className="py-3 pr-4 pl-3 min-w-0 max-w-[280px]">
-        <div className="flex flex-col gap-0.5">
-          <span className="text-sm font-semibold text-gray-900 truncate group-hover:text-indigo-700 transition-colors">
+      <td className="py-3 pr-4 pl-3 min-w-0">
+        <div className="flex max-w-[360px] flex-col items-start gap-1.5">
+          <StatusBadge status={task.status} size="sm" />
+          <span className="w-full truncate text-sm font-semibold group-hover:text-[var(--cd-primary)] transition-colors" style={{ color: "var(--cd-text)" }}>
             {task.title}
           </span>
-          <span className="text-xs text-gray-400 truncate">{task.description.slice(0, 60)}…</span>
+          <span className="w-full overflow-hidden text-ellipsis whitespace-nowrap text-xs" style={{ color: "var(--cd-text-muted)" }}>
+            {task.description}
+          </span>
         </div>
         {task.technologies && task.technologies.length > 0 && (
           <div className="flex flex-wrap gap-1 mt-1.5">
-            {task.technologies.slice(0, 3).map(tech => (
-              <span key={tech.id} className={`inline-block text-[10px] font-semibold px-1.5 py-0.5 rounded-md ${tech.color}`}>
-                {tech.label}
-              </span>
+            {task.technologies.slice(0, 3).map((tech) => (
+              <TechBadge key={tech.id} tech={tech} size="xs" />
             ))}
             {task.technologies.length > 3 && (
-              <span className="inline-block text-[10px] font-semibold px-1.5 py-0.5 rounded-md bg-gray-100 text-gray-500">
+              <span
+                className="inline-block text-[10px] font-semibold px-1.5 py-0.5 rounded-md"
+                style={{ backgroundColor: "var(--cd-surface-2)", color: "var(--cd-text-2)" }}
+              >
                 +{task.technologies.length - 3}
               </span>
             )}
           </div>
         )}
         {task.isMandatory && (
-          <span className="mt-1 inline-block text-[10px] font-semibold text-purple-600 bg-purple-50 px-1.5 py-0.5 rounded-md">
+          <span
+            className="mt-1 inline-block text-[10px] font-semibold px-1.5 py-0.5 rounded-md"
+            style={{ backgroundColor: "var(--cd-primary-subtle)", color: "var(--cd-primary-text)" }}
+          >
             Mandatory
           </span>
         )}
@@ -65,21 +77,30 @@ export default function TaskRow({ task, onDelete }: Props) {
         />
       </td>
 
-      <td className="py-3 pr-4"><StatusBadge status={task.status} size="sm" /></td>
       <td className="py-3 pr-4"><PriorityBadge priority={task.priority} size="sm" /></td>
 
       {/* Deadline */}
       <td className="py-3 pr-4">
         <div className="flex flex-col gap-0.5">
-          <span className={`text-xs font-semibold ${isOverdue ? "text-red-500" : isNear ? "text-amber-500" : "text-gray-700"}`}>
-            {isOverdue ? `Overdue ${formatDistanceToNow(deadlineDt, { addSuffix: true })}` : formatDistanceToNow(deadlineDt, { addSuffix: true })}
+          <span
+            className="text-xs font-semibold"
+            style={{
+              color: isOverdue ? "var(--cd-danger)" : isNear ? "var(--cd-warning)" : "var(--cd-text-2)",
+            }}
+          >
+            {isOverdue
+              ? `Overdue ${formatDistanceToNow(deadlineDt, { addSuffix: true })}`
+              : formatDistanceToNow(deadlineDt, { addSuffix: true })}
           </span>
-          <span className="text-[10px] text-gray-400">
+          <span className="text-[10px]" style={{ color: "var(--cd-text-muted)" }}>
             {deadlineDt.toLocaleDateString("en-IN", { day: "2-digit", month: "short", year: "numeric" })}
           </span>
         </div>
         {isOverdue && (
-          <span className="mt-0.5 inline-block text-[10px] font-bold text-red-500 bg-red-50 px-1.5 py-0.5 rounded-md animate-pulse">
+          <span
+            className="mt-0.5 inline-block text-[10px] font-bold px-1.5 py-0.5 rounded-md animate-pulse"
+            style={{ color: "var(--cd-danger)", backgroundColor: "var(--cd-danger-subtle)" }}
+          >
             OVERDUE
           </span>
         )}
@@ -92,14 +113,16 @@ export default function TaskRow({ task, onDelete }: Props) {
             {SUB_ICON[task.submissionType]}{subStatusCfg.label}
           </span>
           {task.points !== undefined && (
-            <span className="text-[10px] text-amber-600 font-semibold">★ {task.points} pts</span>
+            <span className="text-[10px] font-semibold" style={{ color: "var(--cd-warning)" }}>
+              {task.points} pts
+            </span>
           )}
         </div>
       </td>
 
       {/* Actions */}
       <td className="py-3 pr-3" onClick={e => e.stopPropagation()}>
-        <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-150">
+        <div className="flex items-center justify-end gap-0.5 opacity-100 lg:opacity-0 lg:group-hover:opacity-100 transition-opacity duration-150">
           <Btn icon={<Eye size={13}/>}    label="View"   onClick={() => navigate(`/org/tasks/${task.id}`)}       color="indigo" />
           <Btn icon={<Pencil size={13}/>} label="Edit"   onClick={() => navigate(`/org/tasks/${task.id}/edit`)}  color="gray"   />
           <Btn icon={<Trash2 size={13}/>} label="Delete" onClick={() => onDelete(task)}                          color="red"    />
@@ -110,8 +133,20 @@ export default function TaskRow({ task, onDelete }: Props) {
 }
 
 function Btn({ icon, label, onClick, color }: { icon: React.ReactNode; label: string; onClick: () => void; color: "indigo"|"gray"|"red" }) {
-  const cls = { indigo:"hover:bg-indigo-100 hover:text-indigo-700", gray:"hover:bg-gray-100 hover:text-gray-700", red:"hover:bg-red-100 hover:text-red-600" };
+  const styles = {
+    indigo: "text-[var(--cd-primary-text)] hover:bg-[var(--cd-primary-subtle)]",
+    gray: "text-[var(--cd-text-2)] hover:bg-[var(--cd-surface-2)]",
+    red: "text-[var(--cd-danger)] hover:bg-[var(--cd-danger-subtle)]",
+  }[color];
+  
   return (
-    <button title={label} onClick={onClick} className={`p-1.5 rounded-lg text-gray-400 transition-colors ${cls[color]}`}>{icon}</button>
+    <button
+      title={label}
+      onClick={onClick}
+      className={`p-1.5 rounded-lg transition-colors ${styles}`}
+    >
+      {icon}
+    </button>
   );
-}
\ No newline at end of file
+}
+
diff --git a/src/features/Tasks/v1/components/task/TaskTable.tsx b/src/features/Tasks/v1/components/task/TaskTable.tsx
index fdf4546..b5364f6 100644
--- a/src/features/Tasks/v1/components/task/TaskTable.tsx
+++ b/src/features/Tasks/v1/components/task/TaskTable.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Plus, SearchX, ChevronLeft, ChevronRight } from "lucide-react";
+import { Plus, SearchX } from "lucide-react";
 import TaskRow from "./TaskRow";
 import SkeletonLoader from "../common/SkeletonLoader";
 import EmptyState from "../common/EmptyState";
@@ -7,15 +7,13 @@ import type { Task } from "../../Task.types";
 
 const PAGE_SIZE = 15;
 
-// No ghost th needed — border-l-4 on <tr> is part of the row, not a column
 const COLUMNS = [
-  { key: "title",      label: "Task",        width: "min-w-[220px]" },
-  { key: "assigned",   label: "Assigned To", width: "w-28"          },
-  { key: "status",     label: "Status",      width: "w-28"          },
-  { key: "priority",   label: "Priority",    width: "w-24"          },
+  { key: "title",      label: "Task",        width: "min-w-[320px]" },
+  { key: "assigned",   label: "Assigned To", width: "w-32"          },
+  { key: "priority",   label: "Priority",    width: "w-28"          },
   { key: "deadline",   label: "Deadline",    width: "w-36"          },
   { key: "submission", label: "Submission",  width: "w-36"          },
-  { key: "actions",    label: "Actions",     width: "w-24"          },
+  { key: "actions",    label: "Actions",     width: "w-24 text-right" },
 ];
 
 interface Props {
@@ -27,7 +25,14 @@ interface Props {
   onResetFilters: () => void;
 }
 
-export default function TaskTable({ tasks, isLoading, onDelete, onCreateTask, hasFilters, onResetFilters }: Props) {
+export default function TaskTable({
+  tasks,
+  isLoading,
+  onDelete,
+  onCreateTask,
+  hasFilters,
+  onResetFilters,
+}: Props) {
   const [page, setPage] = useState(1);
   const totalPages = Math.ceil(tasks.length / PAGE_SIZE);
   const paginated  = tasks.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);
@@ -35,49 +40,64 @@ export default function TaskTable({ tasks, isLoading, onDelete, onCreateTask, ha
   if (isLoading) return <SkeletonLoader type="table" />;
 
   if (tasks.length === 0) {
-    return hasFilters ? (
-      <EmptyState
-        variant="no-results"
-        title="No tasks match your filters"
-        description="Try adjusting your filters or search query."
-        action={
-          <button
-            onClick={onResetFilters}
-            className="flex items-center gap-1.5 px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-semibold rounded-xl transition"
-          >
-            <SearchX size={14} />
-            Clear Filters
-          </button>
-        }
-      />
-    ) : (
-      <EmptyState
-        variant="no-tasks"
-        title="No tasks yet"
-        description="Create the first task for this event."
-        action={
-          <button
-            onClick={onCreateTask}
-            className="flex items-center gap-1.5 px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 active:scale-95 text-white text-sm font-semibold rounded-xl transition-all shadow-sm shadow-indigo-200"
-          >
-            <Plus size={15} />
-            Create First Task
-          </button>
-        }
-      />
+    return (
+      <div
+        className="rounded-xl overflow-hidden flex items-center justify-center min-h-[40vh]"
+        style={{
+          backgroundColor: "var(--cd-surface)",
+          border: "1px solid var(--cd-border)",
+          boxShadow: "0 1px 3px var(--cd-shadow)",
+        }}
+      >
+        {hasFilters ? (
+          <EmptyState
+            variant="no-results"
+            title="No tasks match your filters"
+            description="Try adjusting your filters or search query."
+            action={
+              <button
+                onClick={onResetFilters}
+                className="cd-btn cd-btn-secondary flex items-center gap-1.5"
+              >
+                <SearchX size={14} />
+                Clear Filters
+              </button>
+            }
+          />
+        ) : (
+          <EmptyState
+            variant="no-tasks"
+            title="No tasks yet"
+            description="Create the first task for this event."
+            action={
+              <button
+                onClick={onCreateTask}
+                className="cd-btn cd-btn-primary flex items-center gap-1.5"
+              >
+                <Plus size={15} />
+                Create First Task
+              </button>
+            }
+          />
+        )}
+      </div>
     );
   }
 
   return (
-    <div className="w-full overflow-x-auto">
-      <table className="w-full border-collapse">
-        <thead className="sticky top-0 z-10 bg-gray-50 border-b border-gray-200">
+    <div
+      className="rounded-xl overflow-hidden relative"
+      style={{
+        backgroundColor: "var(--cd-surface)",
+        border: "1px solid var(--cd-border)",
+        boxShadow: "0 1px 3px var(--cd-shadow)",
+      }}
+    >
+      <table className="cd-table table-fixed">
+        <thead>
           <tr>
             {COLUMNS.map((col) => (
-              <th
-                key={col.key}
-                className={`${col.width} px-3 py-2.5 text-left text-[10px] font-bold uppercase tracking-widest text-gray-400`}
-              >
+              <th key={col.key} className={col.width}>
                 {col.label}
               </th>
             ))}
@@ -90,41 +110,41 @@ export default function TaskTable({ tasks, isLoading, onDelete, onCreateTask, ha
         </tbody>
       </table>
 
-      <div className="border-t bg-gray-50 px-5 py-2.5 flex items-center justify-between">
-        <span className="text-xs text-gray-400">
-          {tasks.length} task{tasks.length !== 1 ? "s" : ""}
-        </span>
-
-        {totalPages > 1 && (
-          <div className="flex items-center gap-2">
-            <button
-              onClick={() => setPage((p) => Math.max(1, p - 1))}
-              disabled={page === 1}
-              className="p-1 rounded-lg border border-gray-200 text-gray-500 hover:bg-gray-100 disabled:opacity-40 disabled:cursor-not-allowed transition"
-            >
-              <ChevronLeft size={13} />
-            </button>
-            <span className="text-xs text-gray-500 font-medium">
-              {page} / {totalPages}
-            </span>
-            <button
-              onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
-              disabled={page === totalPages}
-              className="p-1 rounded-lg border border-gray-200 text-gray-500 hover:bg-gray-100 disabled:opacity-40 disabled:cursor-not-allowed transition"
-            >
-              <ChevronRight size={13} />
-            </button>
-          </div>
-        )}
+      {/* ── Footer ──────────────────────────────────────────── */}
+      <div
+        className="flex justify-between items-center gap-3 px-6 py-3 text-sm border-t"
+        style={{
+          backgroundColor: "var(--cd-surface)",
+          borderColor: "var(--cd-border)",
+          color: "var(--cd-text-2)",
+        }}
+      >
+        <p style={{ color: "var(--cd-text-2)" }}>
+          Showing{" "}
+          <span style={{ color: "var(--cd-text)", fontWeight: 600 }}>
+            {(page - 1) * PAGE_SIZE + 1}–{Math.min(page * PAGE_SIZE, tasks.length)}
+          </span>{" "}
+          of{" "}
+          <span style={{ color: "var(--cd-text)", fontWeight: 600 }}>{tasks.length}</span>
+        </p>
 
-        <button
-          onClick={onCreateTask}
-          className="flex items-center gap-1 text-xs font-semibold text-indigo-600 hover:text-indigo-800 transition"
-        >
-          <Plus size={13} />
-          Add Task
-        </button>
+        <div className="flex gap-2">
+          <button
+            onClick={() => setPage((p) => Math.max(1, p - 1))}
+            disabled={page === 1}
+            className="cd-btn cd-btn-secondary px-3 py-1 text-xs disabled:opacity-40"
+          >
+            Previous
+          </button>
+          <button
+            onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
+            disabled={page === totalPages}
+            className="cd-btn cd-btn-secondary px-3 py-1 text-xs disabled:opacity-40"
+          >
+            Next
+          </button>
+        </div>
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/features/Tasks/v1/constants/task.constants.ts b/src/features/Tasks/v1/constants/task.constants.ts
index 663864e..9439c6b 100644
--- a/src/features/Tasks/v1/constants/task.constants.ts
+++ b/src/features/Tasks/v1/constants/task.constants.ts
@@ -27,22 +27,22 @@ export const PRIORITY_CONFIG: Record<
   high: {
     label: "High",
     borderClass: "border-l-red-500",
-    badgeBg: "bg-red-50",
-    badgeText: "text-red-600",
+    badgeBg: "bg-[var(--cd-danger-subtle)]",
+    badgeText: "text-[var(--cd-danger)]",
     dot: "bg-red-500",
   },
   medium: {
     label: "Medium",
     borderClass: "border-l-amber-400",
-    badgeBg: "bg-amber-50",
-    badgeText: "text-amber-600",
+    badgeBg: "bg-[var(--cd-warning-subtle)]",
+    badgeText: "text-[var(--cd-warning)]",
     dot: "bg-amber-400",
   },
   low: {
     label: "Low",
     borderClass: "border-l-sky-400",
-    badgeBg: "bg-sky-50",
-    badgeText: "text-sky-600",
+    badgeBg: "bg-[var(--cd-primary-subtle)]",
+    badgeText: "text-[var(--cd-primary-text)]",
     dot: "bg-sky-400",
   },
 };
@@ -54,20 +54,20 @@ export const STATUS_CONFIG: Record<
 > = {
   todo: {
     label: "Todo",
-    bg: "bg-gray-100",
-    text: "text-gray-600",
+    bg: "bg-[var(--cd-surface-2)]",
+    text: "text-[var(--cd-text-2)]",
     dot: "bg-gray-400",
   },
   "in-progress": {
     label: "In Progress",
-    bg: "bg-indigo-50",
-    text: "text-indigo-600",
+    bg: "bg-[var(--cd-primary-subtle)]",
+    text: "text-[var(--cd-primary-text)]",
     dot: "bg-indigo-500",
   },
   completed: {
     label: "Completed",
-    bg: "bg-emerald-50",
-    text: "text-emerald-600",
+    bg: "bg-[var(--cd-success-subtle)]",
+    text: "text-[var(--cd-success)]",
     dot: "bg-emerald-500",
   },
 };
@@ -77,9 +77,9 @@ export const SUBMISSION_STATUS_CONFIG: Record<
   SubmissionStatus,
   { label: string; bg: string; text: string }
 > = {
-  "not-submitted": { label: "Not Submitted", bg: "bg-gray-100",    text: "text-gray-500" },
-  submitted:       { label: "Submitted",      bg: "bg-sky-50",      text: "text-sky-600"  },
-  reviewed:        { label: "Reviewed",       bg: "bg-emerald-50",  text: "text-emerald-600" },
+  "not-submitted": { label: "Not Submitted", bg: "bg-[var(--cd-surface-2)]",       text: "text-[var(--cd-text-2)]" },
+  submitted:       { label: "Submitted",     bg: "bg-[var(--cd-primary-subtle)]",  text: "text-[var(--cd-primary-text)]" },
+  reviewed:        { label: "Reviewed",      bg: "bg-[var(--cd-success-subtle)]",  text: "text-[var(--cd-success)]" },
 };
 
 // ─── Event type ───────────────────────────────────────────────────────────────
@@ -87,10 +87,10 @@ export const EVENT_TYPE_CONFIG: Record<
   EventType,
   { label: string; bg: string; text: string; dot: string }
 > = {
-  hackathon: { label: "Hackathon", bg: "bg-rose-50",    text: "text-rose-600",    dot: "bg-rose-500"    },
-  workshop:  { label: "Workshop",  bg: "bg-violet-50",  text: "text-violet-600",  dot: "bg-violet-500"  },
-  internal:  { label: "Internal",  bg: "bg-sky-50",     text: "text-sky-600",     dot: "bg-sky-500"     },
-  community: { label: "Community", bg: "bg-emerald-50", text: "text-emerald-600", dot: "bg-emerald-500" },
+  hackathon: { label: "Hackathon", bg: "bg-[var(--cd-danger-subtle)]",  text: "text-[var(--cd-danger)]",       dot: "bg-rose-500"    },
+  workshop:  { label: "Workshop",  bg: "bg-[var(--cd-primary-subtle)]", text: "text-[var(--cd-secondary)]",    dot: "bg-violet-500"  },
+  internal:  { label: "Internal",  bg: "bg-[var(--cd-primary-subtle)]", text: "text-[var(--cd-primary-text)]", dot: "bg-sky-500"     },
+  community: { label: "Community", bg: "bg-[var(--cd-success-subtle)]", text: "text-[var(--cd-success)]",      dot: "bg-emerald-500" },
 };
 
 // ─── Event status ─────────────────────────────────────────────────────────────
@@ -98,9 +98,9 @@ export const EVENT_STATUS_CONFIG: Record<
   "Live" | "Upcoming" | "Completed",
   { bg: string; text: string; dot: string; pulse: boolean }
 > = {
-  Live:      { bg: "bg-emerald-50", text: "text-emerald-600", dot: "bg-emerald-500", pulse: true  },
-  Upcoming:  { bg: "bg-amber-50",   text: "text-amber-600",   dot: "bg-amber-400",   pulse: false },
-  Completed: { bg: "bg-gray-100",   text: "text-gray-500",    dot: "bg-gray-400",    pulse: false },
+  Live:      { bg: "bg-[var(--cd-success-subtle)]", text: "text-[var(--cd-success)]", dot: "bg-emerald-500", pulse: true  },
+  Upcoming:  { bg: "bg-[var(--cd-warning-subtle)]", text: "text-[var(--cd-warning)]", dot: "bg-amber-400",   pulse: false },
+  Completed: { bg: "bg-[var(--cd-surface-2)]",      text: "text-[var(--cd-text-2)]",  dot: "bg-gray-400",    pulse: false },
 };
 
 // ─── Review decision ──────────────────────────────────────────────────────────
@@ -108,9 +108,9 @@ export const REVIEW_DECISION_CONFIG: Record<
   ReviewDecision,
   { label: string; bg: string; text: string; border: string }
 > = {
-  approved: { label: "Approved", bg: "bg-emerald-50", text: "text-emerald-700", border: "border-emerald-200" },
-  rejected: { label: "Rejected", bg: "bg-red-50",     text: "text-red-700",     border: "border-red-200"     },
-  pending:  { label: "Pending",  bg: "bg-amber-50",   text: "text-amber-700",   border: "border-amber-200"   },
+  approved: { label: "Approved", bg: "bg-[var(--cd-success-subtle)]", text: "text-[var(--cd-success)]", border: "border-[var(--cd-success)]" },
+  rejected: { label: "Rejected", bg: "bg-[var(--cd-danger-subtle)]",  text: "text-[var(--cd-danger)]",  border: "border-[var(--cd-danger)]"  },
+  pending:  { label: "Pending",  bg: "bg-[var(--cd-warning-subtle)]", text: "text-[var(--cd-warning)]", border: "border-[var(--cd-warning)]" },
 };
 
 // ─── Activity timeline ────────────────────────────────────────────────────────
@@ -123,13 +123,22 @@ export const ACTIVITY_ICON: Record<string, string> = {
 };
 
 export const ACTIVITY_COLOR: Record<string, string> = {
-  created:   "bg-indigo-100 text-indigo-600",
-  updated:   "bg-amber-100 text-amber-600",
-  submitted: "bg-sky-100 text-sky-600",
-  reviewed:  "bg-emerald-100 text-emerald-600",
-  commented: "bg-purple-100 text-purple-600",
+  created:   "bg-[var(--cd-primary-subtle)] text-[var(--cd-primary)]",
+  updated:   "bg-[var(--cd-warning-subtle)] text-[var(--cd-warning)]",
+  submitted: "bg-[var(--cd-secondary-subtle)] text-[var(--cd-secondary)]",
+  reviewed:  "bg-[var(--cd-success-subtle)] text-[var(--cd-success)]",
+  commented: "bg-[var(--cd-surface-3)] text-[var(--cd-text-2)]",
 };
 
+
 // ─── Submission status colors (legacy alias) ──────────────────────────────────
 export const SUBMISSION_STATUS_COLORS = SUBMISSION_STATUS_CONFIG;
-export const ACTIVITY_ICONS = ACTIVITY_ICON;
\ No newline at end of file
+export const ACTIVITY_ICONS = ACTIVITY_ICON;
+
+// ─── Submission type ──────────────────────────────────────────────────────────
+export const SUBMISSION_TYPE_CONFIG = {
+  file:   { label: "File Upload", icon: "FileUp" },
+  github: { label: "GitHub Repository", icon: "Github" },
+  link:   { label: "External Link", icon: "Link" },
+  all:    { label: "Any Submission", icon: "Layers" },
+};
diff --git a/src/features/Tasks/v1/hooks/useTasks.ts b/src/features/Tasks/v1/hooks/useTasks.ts
index 7b23019..c81e6d5 100644
--- a/src/features/Tasks/v1/hooks/useTasks.ts
+++ b/src/features/Tasks/v1/hooks/useTasks.ts
@@ -7,22 +7,38 @@ import type { Task, TaskFilters, CreateTaskPayload, UpdateTaskPayload } from "..
 function matchesSearch(task: Task, q: string): boolean {
   const query = q.toLowerCase().trim();
   if (!query) return true;
+  const deadline = parseISO(task.deadline);
+  const isOverdue = isPast(deadline) && task.status !== "completed";
+  const isUpcoming = isFuture(deadline);
 
-  // Search across: title, description, tech tags, member names, priority, status, submission type
   const fields = [
     task.title,
     task.description,
     task.priority,
     task.status,
     task.submissionType,
+    task.submissionStatus,
     ...(task.technologies ?? []).map(t => t.label),
+    ...(task.technologies ?? []).map(t => t.id),
     ...task.assignedTo.map(m => m.name),
     ...task.assignedTo.map(m => m.role),
     task.isMandatory ? "mandatory" : "",
     task.points !== undefined ? `${task.points} pts` : "",
+    isOverdue ? "overdue past late" : "",
+    isUpcoming ? "upcoming future" : "",
+    task.status === "completed" ? "done complete completed" : "",
+    task.status === "in-progress" ? "progress inprogress active working" : "",
+    task.status === "todo" ? "todo to do open pending" : "",
+    task.submissionStatus === "not-submitted" ? "not submitted missing" : "",
   ];
+  const haystack = fields.join(" ").toLowerCase();
+  const normalized = query
+    .replaceAll("in progress", "in-progress")
+    .replaceAll("not submitted", "not-submitted")
+    .replaceAll("to do", "todo");
+  const terms = normalized.split(/\s+/).filter(Boolean);
 
-  return fields.some(f => f.toLowerCase().includes(query));
+  return terms.every((term) => haystack.includes(term));
 }
 
 function applyFilters(tasks: Task[], filters: TaskFilters): Task[] {
@@ -94,7 +110,9 @@ export function useUpdateTask() {
   return useMutation({
     mutationFn: async ({ id, payload }: { id: string; payload: UpdateTaskPayload }): Promise<Task> => {
       await new Promise((r) => setTimeout(r, 400));
-      const patch: Partial<Task> = { ...payload };
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const { assignedTo: _ids, ...rest } = payload;
+      const patch: Partial<Task> = { ...rest };
       if (payload.assignedTo) {
         patch.assignedTo = payload.assignedTo
           .map((mid) => mockMembers.find((m) => m.id === mid))
@@ -121,4 +139,4 @@ export function useDeleteTask() {
     },
     onSuccess: () => qc.invalidateQueries({ queryKey: ["tasks"] }),
   });
-}
\ No newline at end of file
+}
diff --git a/src/features/Tasks/v1/mock/taskMockData.ts b/src/features/Tasks/v1/mock/taskMockData.ts
index 3fab4b7..457d992 100644
--- a/src/features/Tasks/v1/mock/taskMockData.ts
+++ b/src/features/Tasks/v1/mock/taskMockData.ts
@@ -77,7 +77,7 @@ export const mockTasks: Task[] = [
     description: "Build a real-time analytics dashboard showing participant statistics, submission rates, and leaderboard.",
     status: "todo", priority: "low", deadline: "2026-06-14T23:59:00",
     assignedTo: [mockMembers[3], mockMembers[5]],
-    submissionType: "both", submissionStatus: "not-submitted",
+    submissionType: "all", submissionStatus: "not-submitted",
     isMandatory: false, points: 150, allowLateSubmission: true,
     technologies: [
       { id: "python", label: "Python", color: "bg-yellow-100 text-yellow-700" },
@@ -113,7 +113,7 @@ export const mockTasks: Task[] = [
     description: "Connect React frontend with Metamask and smart contracts.",
     status: "todo", priority: "high", deadline: "2026-06-30T23:59:00",
     assignedTo: [mockMembers[0], mockMembers[3]],
-    submissionType: "both", submissionStatus: "not-submitted",
+    submissionType: "all", submissionStatus: "not-submitted",
     isMandatory: true, allowLateSubmission: false,
     technologies: [
       { id: "react", label: "React", color: "bg-sky-100 text-sky-700" },
diff --git a/src/features/Tasks/v1/pages/CreateTaskPage.tsx b/src/features/Tasks/v1/pages/CreateTaskPage.tsx
index b90de9c..0009f40 100644
--- a/src/features/Tasks/v1/pages/CreateTaskPage.tsx
+++ b/src/features/Tasks/v1/pages/CreateTaskPage.tsx
@@ -1,31 +1,55 @@
 import { useNavigate } from "react-router-dom";
 import { ArrowLeft, Plus } from "lucide-react";
+import Button from "../../../../Component/ui/Button";
 import TaskForm from "../components/task/TaskForm";
 
 export default function CreateTaskPage() {
   const navigate = useNavigate();
 
   return (
-    <div className="w-full min-h-screen bg-[#F5F5F5] flex flex-col">
-      <div className="bg-white border-b px-6 py-4 flex items-center gap-3">
-        <button
-          onClick={() => navigate(-1)}
-          className="p-2 rounded-xl text-gray-400 hover:bg-gray-100 hover:text-gray-700 transition"
-          aria-label="Go back"
-        >
-          <ArrowLeft size={18} />
-        </button>
-        <div className="flex items-center gap-2.5">
-          <div className="w-8 h-8 rounded-xl bg-indigo-600 flex items-center justify-center">
-            <Plus size={16} className="text-white" />
-          </div>
-          <div>
-            <h1 className="text-base font-bold text-gray-900">Create Task</h1>
-            <p className="text-xs text-gray-400">Add a new task to an event</p>
-          </div>
+    <div className="w-full h-full flex flex-col cd-page">
+      {/* Header - Matches Event_Header style */}
+      <div
+        className="py-[3vh] border-b flex text-xl font-bold justify-between"
+        style={{
+          backgroundColor: "var(--cd-surface)",
+          borderColor: "var(--cd-border)",
+        }}
+      >
+        <div className="w-1/3 h-full flex items-center">
+          <h1
+            className="text-lg sm:text-[2.5vw] lg:text-2xl font-bold ml-5 mt-2 flex items-center gap-3"
+            style={{ color: "var(--cd-text)" }}
+          >
+            <button
+              onClick={() => navigate(-1)}
+              className="p-2 rounded-xl transition-colors hover:opacity-80"
+              style={{ color: "var(--cd-text-muted)" }}
+              aria-label="Go back"
+            >
+              <ArrowLeft size={20} />
+            </button>
+            <div
+              className="w-8 h-8 rounded-xl flex items-center justify-center"
+              style={{ backgroundColor: "var(--cd-primary)" }}
+            >
+              <Plus size={16} className="text-white" />
+            </div>
+            Create Task
+          </h1>
+        </div>
+
+        <div className="w-1/2 xl:w-fit h-full mr-[3vw] flex justify-end gap-3">
+          <Button
+            text="Cancel"
+            variant="secondary"
+            onClick={() => navigate(-1)}
+          />
         </div>
       </div>
-      <div className="flex-1 overflow-auto">
+
+      {/* Form content */}
+      <div className="flex-1 overflow-auto p-[2vw]">
         <TaskForm mode="create" />
       </div>
     </div>
diff --git a/src/features/Tasks/v1/pages/EditTaskPage.tsx b/src/features/Tasks/v1/pages/EditTaskPage.tsx
index 4cdfdc1..1a72fea 100644
--- a/src/features/Tasks/v1/pages/EditTaskPage.tsx
+++ b/src/features/Tasks/v1/pages/EditTaskPage.tsx
@@ -10,21 +10,25 @@ export default function EditTaskPage() {
   const { data: task, isLoading, isError } = useTaskDetail(taskId);
 
   return (
-    <div className="w-full min-h-screen bg-[#F5F5F5] flex flex-col">
-      <div className="bg-white border-b px-6 py-4 flex items-center gap-3">
+    <div className="w-full min-h-screen flex flex-col" style={{ backgroundColor: "var(--cd-bg)" }}>
+      <div
+        className="border-b px-6 py-4 flex items-center gap-3"
+        style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border)" }}
+      >
         <button
           onClick={() => navigate(-1)}
-          className="p-2 rounded-xl text-gray-400 hover:bg-gray-100 hover:text-gray-700 transition"
+          className="p-2 rounded-xl transition"
+          style={{ color: "var(--cd-text-muted)" }}
         >
           <ArrowLeft size={18} />
         </button>
         <div className="flex items-center gap-2.5">
-          <div className="w-8 h-8 rounded-xl bg-amber-500 flex items-center justify-center">
+          <div className="w-8 h-8 rounded-xl flex items-center justify-center" style={{ backgroundColor: "var(--cd-warning)" }}>
             <Pencil size={15} className="text-white" />
           </div>
           <div>
-            <h1 className="text-base font-bold text-gray-900">Edit Task</h1>
-            <p className="text-xs text-gray-400 truncate max-w-[280px]">
+            <h1 className="text-base font-bold" style={{ color: "var(--cd-text)" }}>Edit Task</h1>
+            <p className="text-xs truncate max-w-[280px]" style={{ color: "var(--cd-text-muted)" }}>
               {task?.title ?? "Loading…"}
             </p>
           </div>
@@ -37,10 +41,11 @@ export default function EditTaskPage() {
         ) : isError || !task ? (
           <div className="flex items-center justify-center py-20 text-center">
             <div>
-              <p className="text-gray-500 font-semibold">Task not found.</p>
+              <p className="font-semibold" style={{ color: "var(--cd-text-2)" }}>Task not found.</p>
               <button
                 onClick={() => navigate("/org/tasks")}
-                className="mt-4 px-5 py-2.5 bg-indigo-600 text-white rounded-xl text-sm font-semibold hover:bg-indigo-700 transition"
+                className="mt-4 px-5 py-2.5 text-white rounded-xl text-sm font-semibold transition"
+                style={{ backgroundColor: "var(--cd-primary)" }}
               >
                 Back to Tasks
               </button>
@@ -52,4 +57,4 @@ export default function EditTaskPage() {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/features/Tasks/v1/pages/TaskDetailPage.tsx b/src/features/Tasks/v1/pages/TaskDetailPage.tsx
index e8d8489..f62ca83 100644
--- a/src/features/Tasks/v1/pages/TaskDetailPage.tsx
+++ b/src/features/Tasks/v1/pages/TaskDetailPage.tsx
@@ -3,16 +3,18 @@ import { useParams, useNavigate, Link } from "react-router-dom";
 import {
   ArrowLeft, Pencil, Trash2, CalendarDays, Users, Flag,
   UploadCloud, Star, Clock, Activity, ChevronRight,
+  CheckCircle2, Circle, Zap,
 } from "lucide-react";
 import { formatDistanceToNow, format, isPast, parseISO } from "date-fns";
 import { useTaskDetail, useTaskActivity } from "../hooks/useTaskDetail";
 import { useSubmissions } from "../hooks/useSubmissions";
-import { useDeleteTask , useUpdateTask } from "../hooks/useTasks";
+import { useDeleteTask, useUpdateTask } from "../hooks/useTasks";
 import { useEvents } from "../hooks/useEvents";
 import SkeletonLoader from "../components/common/SkeletonLoader";
 import Avatar from "../components/common/Avatar";
 import StatusBadge from "../components/common/StatusBadge";
 import PriorityBadge from "../components/common/PriorityBadge";
+import TechBadge from "../components/common/TechBadge";
 import SubmissionList from "../components/submission/SubmissionList";
 import ReviewPanel from "../components/submission/ReviewPanel";
 import ConfirmModal from "../components/common/ConfirmModal";
@@ -20,6 +22,7 @@ import CommentsSection from "../components/common/CommentsSection";
 import { ToastContainer, useToast } from "../components/common/ToastNotification";
 import {
   SUBMISSION_STATUS_CONFIG,
+  SUBMISSION_TYPE_CONFIG,
   ACTIVITY_ICON,
   ACTIVITY_COLOR,
 } from "../constants/task.constants";
@@ -55,6 +58,7 @@ export default function TaskDetailPage() {
       setShowDeleteModal(false);
     }
   };
+
   const handleStatusChange = async (newStatus: "todo" | "in-progress" | "completed") => {
     if (!task) return;
     try {
@@ -68,12 +72,17 @@ export default function TaskDetailPage() {
   // ── Error ──────────────────────────────────────────────────────────────────
   if (isError) {
     return (
-      <div className="w-full min-h-screen bg-[#F5F5F5] flex items-center justify-center">
-        <div className="text-center">
-          <p className="text-gray-500 text-lg font-semibold">Task not found</p>
+      <div
+        className="w-full min-h-screen flex items-center justify-center"
+        style={{ backgroundColor: "var(--cd-bg)" }}
+      >
+        <div className="text-center flex flex-col items-center gap-4">
+          <p className="text-lg font-semibold" style={{ color: "var(--cd-text)" }}>
+            Task not found
+          </p>
           <button
             onClick={() => navigate("/org/tasks")}
-            className="mt-4 px-5 py-2.5 bg-indigo-600 text-white rounded-xl text-sm font-semibold hover:bg-indigo-700 transition"
+            className="cd-btn cd-btn-primary"
           >
             Back to Tasks
           </button>
@@ -83,21 +92,42 @@ export default function TaskDetailPage() {
   }
 
   return (
-    <div className="w-full min-h-screen bg-[#F5F5F5] flex flex-col">
-      {/* ── Top bar ───────────────────────────────────────────────────────────── */}
-      <div className="bg-white border-b px-6 py-3.5 flex items-center justify-between gap-4 flex-wrap">
+    <div
+      className="w-full h-screen flex flex-col overflow-hidden"
+      style={{ backgroundColor: "var(--cd-bg)" }}
+    >
+      {/* ── Top bar (Events-style header) ─────────────────────────────────────── */}
+      <div
+        className="border-b px-5 sm:px-[3vw] py-3.5 flex items-center justify-between gap-4 flex-wrap shrink-0"
+        style={{
+          backgroundColor: "var(--cd-surface)",
+          borderColor: "var(--cd-border)",
+        }}
+      >
         <div className="flex items-center gap-3">
           <button
             onClick={() => navigate(-1)}
-            className="p-2 rounded-xl text-gray-400 hover:bg-gray-100 hover:text-gray-700 transition"
+            className="p-2 rounded-xl transition-all hover:bg-[var(--cd-hover)] text-[var(--cd-text-muted)] hover:text-[var(--cd-text)] active:scale-95"
             aria-label="Go back"
           >
             <ArrowLeft size={18} />
           </button>
-          <nav className="flex items-center gap-1.5 text-xs text-gray-400" aria-label="Breadcrumb">
-            <Link to="/org/tasks" className="hover:text-indigo-600 transition">Tasks</Link>
-            <ChevronRight size={12} />
-            <span className="text-gray-700 font-semibold truncate max-w-[200px]">
+
+          {/* Breadcrumb */}
+          <nav
+            className="flex items-center gap-2 text-xs text-[var(--cd-text-muted)]"
+            aria-label="Breadcrumb"
+          >
+            <Link
+              to="/org/tasks"
+              className="font-medium hover:text-[var(--cd-primary)] transition-colors"
+            >
+              Tasks
+            </Link>
+            <ChevronRight size={12} className="opacity-50" />
+            <span
+              className="font-bold truncate max-w-[200px] text-[var(--cd-text)]"
+            >
               {isLoading ? "Loading…" : task?.title}
             </span>
           </nav>
@@ -107,44 +137,53 @@ export default function TaskDetailPage() {
           <div className="flex items-center gap-2">
             <Link
               to={`/org/tasks/${task.id}/edit`}
-              className="flex items-center gap-1.5 px-3.5 py-2 rounded-xl border border-gray-200 text-xs font-bold text-gray-700 hover:bg-gray-50 transition"
+              className="flex items-center gap-1.5 px-4 py-2 rounded-xl border border-[var(--cd-border)] text-[var(--cd-text-2)] hover:text-[var(--cd-text)] hover:bg-[var(--cd-hover)] text-xs font-bold transition-all active:scale-95"
             >
-              <Pencil size={13} />
-              Edit
+              <Pencil size={13} /> Edit
             </Link>
             <button
               onClick={() => setShowDeleteModal(true)}
-              className="flex items-center gap-1.5 px-3.5 py-2 rounded-xl border border-red-200 text-xs font-bold text-red-500 hover:bg-red-50 transition"
+              className="flex items-center gap-1.5 px-4 py-2 rounded-xl border border-[var(--cd-danger-subtle)] text-[var(--cd-danger)] hover:bg-[var(--cd-danger-subtle)] text-xs font-bold transition-all active:scale-95"
             >
-              <Trash2 size={13} />
-              Delete
+              <Trash2 size={13} /> Delete
             </button>
           </div>
         )}
       </div>
 
-      {/* ── Content ───────────────────────────────────────────────────────────── */}
+      {/* ── Content ─────────────────────────────────────────────────────────────── */}
       {isLoading ? (
         <SkeletonLoader type="detail" />
       ) : task ? (
-        <div className="flex-1 flex flex-col lg:flex-row overflow-auto">
-
-          {/* ── LEFT panel: task info ─────────────────────────────────────────── */}
-          <div className="lg:w-[420px] xl:w-[460px] shrink-0 flex flex-col gap-5 p-5 border-r bg-white overflow-y-auto">
+        <div className="flex-1 flex flex-col lg:flex-row overflow-hidden min-h-0">
 
+          {/* ── LEFT panel: task info ──────────────────────────────────────────── */}
+          <div
+            className="lg:w-[420px] xl:w-[460px] shrink-0 flex flex-col gap-5 p-5 border-r overflow-y-auto"
+            style={{
+              backgroundColor: "var(--cd-surface)",
+              borderColor: "var(--cd-border)",
+            }}
+          >
             {/* Event link + title + description */}
-            <div className="flex flex-col gap-2">
+            <div className="flex flex-col gap-3">
               <Link
                 to="/org/events"
-                className="inline-flex items-center gap-1.5 text-xs text-indigo-600 hover:underline font-semibold"
+                className="inline-flex items-center gap-1.5 text-xs font-bold text-[var(--cd-primary)] hover:opacity-75 transition-opacity"
               >
                 <CalendarDays size={12} />
                 {eventName ?? "Unknown Event"}
               </Link>
-              <h1 className="text-xl font-extrabold text-gray-900 leading-snug">
+              <h1
+                className="text-2xl font-black leading-tight text-[var(--cd-text)]"
+              >
                 {task.title}
               </h1>
-              <p className="text-sm text-gray-500 leading-relaxed">{task.description}</p>
+              <p
+                className="text-sm leading-relaxed text-[var(--cd-text-2)]"
+              >
+                {task.description}
+              </p>
             </div>
 
             {/* Badges row */}
@@ -152,36 +191,58 @@ export default function TaskDetailPage() {
               <StatusBadge status={task.status} />
               <PriorityBadge priority={task.priority} />
               {subCfg && (
-                <span className={`inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold ${subCfg.bg} ${subCfg.text}`}>
+                <span
+                  className={`inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold ${subCfg.bg} ${subCfg.text}`}
+                >
                   {subCfg.label}
                 </span>
               )}
               {task.isMandatory && (
-                <span className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-semibold bg-purple-50 text-purple-700 border border-purple-100">
-                  <Flag size={10} />
-                  Mandatory
+                <span
+                  className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-semibold"
+                  style={{
+                    backgroundColor: "var(--cd-primary-subtle)",
+                    color: "var(--cd-primary-text)",
+                  }}
+                >
+                  <Flag size={10} /> Mandatory
                 </span>
               )}
             </div>
 
             {/* Change Status */}
-            <div className="flex flex-col gap-2">
-              <p className="text-[10px] font-bold text-gray-400 uppercase tracking-wider">Change Status</p>
-              <div className="flex gap-2">
-                {(["todo", "in-progress", "completed"] as const).map((s) => (
-                  <button
-                    key={s}
-                    onClick={() => void handleStatusChange(s)}
-                    disabled={task.status === s || updateTask.isPending}
-                    className={`px-3 py-1.5 rounded-lg text-xs font-semibold border transition-all disabled:opacity-40 disabled:cursor-not-allowed
-                      ${task.status === s
-                        ? "bg-indigo-600 text-white border-indigo-600"
-                        : "bg-white text-gray-600 border-gray-200 hover:border-indigo-400 hover:text-indigo-600"
-                      }`}
-                  >
-                    {s === "todo" ? "Todo" : s === "in-progress" ? "In Progress" : "Completed"}
-                  </button>
-                ))}
+            <div className="flex flex-col gap-3">
+              <p
+                className="text-[10px] font-bold uppercase tracking-widest text-[var(--cd-text-muted)]"
+              >
+                Change Status
+              </p>
+              <div className="flex gap-2 p-1.5 rounded-2xl bg-[var(--cd-surface-2)] border border-[var(--cd-border-subtle)]">
+                {(["todo", "in-progress", "completed"] as const).map((s) => {
+                  const isActive = task.status === s;
+                  const icons = {
+                    "todo":        <Circle size={12} />,
+                    "in-progress": <Zap size={12} />,
+                    "completed":   <CheckCircle2 size={12} />,
+                  };
+                  return (
+                    <button
+                      key={s}
+                      onClick={() => void handleStatusChange(s)}
+                      disabled={isActive || updateTask.isPending}
+                      className={`
+                        flex-1 flex items-center justify-center gap-1.5 py-2 rounded-xl text-xs font-bold transition-all
+                        ${isActive 
+                          ? "bg-[var(--cd-surface)] text-[var(--cd-primary)] shadow-sm border border-[var(--cd-border)]" 
+                          : "text-[var(--cd-text-2)] hover:text-[var(--cd-text)] hover:bg-[var(--cd-hover)] border border-transparent"}
+                        disabled:opacity-40 disabled:cursor-not-allowed
+                      `}
+                    >
+                      {icons[s]}
+                      {s === "todo" ? "Todo" : s === "in-progress" ? "Working" : "Done"}
+                    </button>
+                  );
+                })}
               </div>
             </div>
 
@@ -189,26 +250,46 @@ export default function TaskDetailPage() {
             <div className="grid grid-cols-2 gap-3">
               {/* Deadline */}
               <div
-                className={`flex flex-col gap-1 p-4 rounded-2xl border ${
-                  isDeadlinePast && task.status !== "completed"
-                    ? "bg-red-50 border-red-200"
-                    : "bg-gray-50 border-gray-100"
-                }`}
+                className="flex flex-col gap-1 p-4 rounded-2xl border"
+                style={{
+                  backgroundColor:
+                    isDeadlinePast && task.status !== "completed"
+                      ? "var(--cd-danger-subtle)"
+                      : "var(--cd-surface-2)",
+                  borderColor:
+                    isDeadlinePast && task.status !== "completed"
+                      ? "var(--cd-danger)"
+                      : "var(--cd-border)",
+                }}
               >
-                <div className="flex items-center gap-1.5 text-[10px] font-bold text-gray-400 uppercase tracking-wider">
-                  <Clock size={11} />
-                  Deadline
+                <div
+                  className="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-wider"
+                  style={{ color: "var(--cd-text-muted)" }}
+                >
+                  <Clock size={11} /> Deadline
                 </div>
-                <p className={`text-sm font-bold mt-0.5 ${
-                  isDeadlinePast && task.status !== "completed" ? "text-red-600" : "text-gray-900"
-                }`}>
+                <p
+                  className="text-sm font-bold mt-0.5"
+                  style={{
+                    color:
+                      isDeadlinePast && task.status !== "completed"
+                        ? "var(--cd-danger)"
+                        : "var(--cd-text)",
+                  }}
+                >
                   {format(parseISO(task.deadline), "MMM d, yyyy")}
                 </p>
-                <p className="text-xs text-gray-400">
+                <p className="text-xs" style={{ color: "var(--cd-text-muted)" }}>
                   {formatDistanceToNow(parseISO(task.deadline), { addSuffix: true })}
                 </p>
                 {isDeadlinePast && task.status !== "completed" && (
-                  <span className="text-[10px] font-bold text-red-500 bg-red-100 px-1.5 py-0.5 rounded-md self-start animate-pulse">
+                  <span
+                    className="text-[10px] font-bold px-1.5 py-0.5 rounded-md self-start animate-pulse"
+                    style={{
+                      color: "var(--cd-danger)",
+                      backgroundColor: "var(--cd-danger-subtle)",
+                    }}
+                  >
                     OVERDUE
                   </span>
                 )}
@@ -216,76 +297,144 @@ export default function TaskDetailPage() {
 
               {/* Points */}
               {task.points !== undefined && (
-                <div className="flex flex-col gap-1 p-4 rounded-2xl bg-amber-50 border border-amber-100">
-                  <div className="flex items-center gap-1.5 text-[10px] font-bold text-amber-500 uppercase tracking-wider">
-                    <Star size={11} />
-                    Points
+                <div
+                  className="flex flex-col gap-1 p-4 rounded-2xl border"
+                  style={{
+                    backgroundColor: "rgba(251,191,36,0.08)",
+                    borderColor: "rgba(251,191,36,0.25)",
+                  }}
+                >
+                  <div
+                    className="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-wider"
+                    style={{ color: "var(--cd-warning)" }}
+                  >
+                    <Star size={11} /> Points
                   </div>
-                  <p className="text-2xl font-extrabold text-amber-700 leading-none mt-0.5">
+                  <p className="text-2xl font-extrabold leading-none mt-0.5" style={{ color: "var(--cd-warning)" }}>
                     {task.points}
                   </p>
-                  <p className="text-xs text-amber-400">hackathon pts</p>
+                  <p className="text-xs" style={{ color: "var(--cd-text-muted)" }}>
+                    hackathon pts
+                  </p>
                 </div>
               )}
 
               {/* Submission type */}
-              <div className="flex flex-col gap-1 p-4 rounded-2xl bg-gray-50 border border-gray-100">
-                <div className="flex items-center gap-1.5 text-[10px] font-bold text-gray-400 uppercase tracking-wider">
-                  <UploadCloud size={11} />
-                  Submission
+              <div
+                className="flex flex-col gap-1 p-4 rounded-2xl border"
+                style={{
+                  backgroundColor: "var(--cd-surface-2)",
+                  borderColor: "var(--cd-border)",
+                }}
+              >
+                <div
+                  className="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-wider"
+                  style={{ color: "var(--cd-text-muted)" }}
+                >
+                  <UploadCloud size={11} /> Submission
                 </div>
-                <p className="text-sm font-bold text-gray-900 mt-0.5 capitalize">
-                  {task.submissionType === "both" ? "File + GitHub" : task.submissionType}
+                <p className="text-sm font-bold mt-0.5" style={{ color: "var(--cd-text)" }}>
+                  {SUBMISSION_TYPE_CONFIG[task.submissionType]?.label ?? task.submissionType}
                 </p>
-                <p className="text-xs text-gray-400">
+                <p className="text-xs" style={{ color: "var(--cd-text-muted)" }}>
                   {task.allowLateSubmission ? "Late allowed" : "On-time only"}
                 </p>
               </div>
 
               {/* Last updated */}
-              <div className="flex flex-col gap-1 p-4 rounded-2xl bg-gray-50 border border-gray-100">
-                <div className="flex items-center gap-1.5 text-[10px] font-bold text-gray-400 uppercase tracking-wider">
-                  <Activity size={11} />
-                  Updated
+              <div
+                className="flex flex-col gap-1 p-4 rounded-2xl border"
+                style={{
+                  backgroundColor: "var(--cd-surface-2)",
+                  borderColor: "var(--cd-border)",
+                }}
+              >
+                <div
+                  className="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-wider"
+                  style={{ color: "var(--cd-text-muted)" }}
+                >
+                  <Activity size={11} /> Updated
                 </div>
-                <p className="text-sm font-bold text-gray-900 mt-0.5">
+                <p className="text-sm font-bold mt-0.5" style={{ color: "var(--cd-text)" }}>
                   {formatDistanceToNow(parseISO(task.updatedAt), { addSuffix: true })}
                 </p>
-                <p className="text-xs text-gray-400">by {task.createdBy}</p>
+                <p className="text-xs" style={{ color: "var(--cd-text-muted)" }}>
+                  by {task.createdBy}
+                </p>
               </div>
             </div>
 
+            {/* Technologies */}
+            {task.technologies && task.technologies.length > 0 && (
+              <div className="flex flex-col gap-2">
+                <p
+                  className="text-[10px] font-bold uppercase tracking-wider"
+                  style={{ color: "var(--cd-text-muted)" }}
+                >
+                  Technologies
+                </p>
+                <div className="flex flex-wrap gap-1.5">
+                  {task.technologies.map((tech) => (
+                    <TechBadge key={tech.id} tech={tech} />
+                  ))}
+                </div>
+              </div>
+            )}
+
             {/* Assignees */}
             <div className="flex flex-col gap-3">
-              <div className="flex items-center gap-2 text-[10px] font-bold text-gray-400 uppercase tracking-wider">
+              <div
+                className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-widest text-[var(--cd-text-muted)]"
+              >
                 <Users size={12} />
                 Assigned To ({task.assignedTo.length})
               </div>
-              <div className="flex flex-col gap-2">
+              <div className="flex flex-col gap-2.5">
                 {task.assignedTo.map((m, idx) => (
                   <div
                     key={m.id}
-                    className="flex items-center gap-3 p-3 bg-gray-50 hover:bg-indigo-50 transition-colors rounded-xl border border-gray-100 hover:border-indigo-100 group"
+                    className="flex items-center gap-3 p-3.5 rounded-2xl border border-[var(--cd-border)] bg-[var(--cd-surface-2)] hover:border-[var(--cd-primary)] hover:bg-[var(--cd-primary-subtle)] transition-all duration-200 group cursor-default"
                   >
                     <div className="relative shrink-0">
-                      <Avatar name={m.name} src={m.avatar} role={m.role} size="md" showTooltip={false} ring ringColor="ring-white" />
-                      {/* Online status dot — alternating for demo */}
-                      <span className={`absolute -bottom-0.5 -right-0.5 w-3 h-3 rounded-full border-2 border-white shadow-sm ${
-                        idx % 3 === 0 ? "bg-emerald-400" : idx % 3 === 1 ? "bg-amber-400" : "bg-gray-300"
-                      }`} />
+                      <Avatar
+                        name={m.name}
+                        src={m.avatar}
+                        role={m.role}
+                        size="md"
+                        showTooltip={false}
+                        ring
+                        ringColor="ring-[var(--cd-surface)]"
+                      />
+                      <span
+                        className={`absolute -bottom-0.5 -right-0.5 w-3 h-3 rounded-full border-2 border-[var(--cd-surface)] shadow-sm ${
+                          idx % 3 === 0 ? "bg-emerald-400" : idx % 3 === 1 ? "bg-amber-400" : "bg-gray-300"
+                        }`}
+                      />
                     </div>
                     <div className="min-w-0 flex-1">
-                      <p className="text-sm font-semibold text-gray-900 truncate group-hover:text-indigo-700 transition-colors">{m.name}</p>
-                      <p className="text-xs text-gray-400 truncate">{m.role}</p>
+                      <p className="text-sm font-bold truncate text-[var(--cd-text)]">
+                        {m.name}
+                      </p>
+                      <p className="text-xs truncate text-[var(--cd-text-muted)]">
+                        {m.role}
+                      </p>
                     </div>
-                    <div className="flex flex-col items-end gap-1 shrink-0">
-                      <span className="text-[10px] font-medium text-gray-400 bg-gray-100 group-hover:bg-indigo-100 group-hover:text-indigo-600 px-2 py-0.5 rounded-md transition-colors truncate max-w-[120px]">
+                    <div className="flex flex-col items-end gap-1.5 shrink-0">
+                      <span
+                        className="text-[10px] font-bold px-2 py-1 rounded-lg bg-[var(--cd-surface)] text-[var(--cd-text-muted)] transition-colors truncate max-w-[120px] border border-[var(--cd-border-subtle)]"
+                      >
                         {m.email}
                       </span>
-                      <span className={`text-[9px] font-bold px-1.5 py-0.5 rounded-full ${
-                        idx % 3 === 0 ? "bg-emerald-50 text-emerald-600" : idx % 3 === 1 ? "bg-amber-50 text-amber-600" : "bg-gray-100 text-gray-400"
-                      }`}>
-                        {idx % 3 === 0 ? "● Online" : idx % 3 === 1 ? "● Away" : "● Offline"}
+                      <span
+                        className={`text-[9px] font-black px-2 py-0.5 rounded-full uppercase tracking-tighter ${
+                          idx % 3 === 0
+                            ? "bg-[var(--cd-success-subtle)] text-[var(--cd-success)]"
+                            : idx % 3 === 1
+                            ? "bg-[var(--cd-warning-subtle)] text-[var(--cd-warning)]"
+                            : "bg-[var(--cd-surface-3)] text-[var(--cd-text-muted)]"
+                        }`}
+                      >
+                        {idx % 3 === 0 ? "Online" : idx % 3 === 1 ? "Away" : "Offline"}
                       </span>
                     </div>
                   </div>
@@ -294,33 +443,60 @@ export default function TaskDetailPage() {
             </div>
           </div>
 
-          {/* ── RIGHT panel: submissions + activity ───────────────────────────── */}
-          <div className="flex-1 flex flex-col overflow-hidden min-h-0">
-            {/* Tab bar */}
-            <div className="bg-white border-b px-5 flex gap-0 shrink-0">
+          {/* ── RIGHT panel: submissions + activity ────────────────────────────── */}
+          <div
+            className="flex-1 flex flex-col overflow-hidden min-h-0"
+            style={{ backgroundColor: "var(--cd-bg)" }}
+          >
+            {/* Tab bar (Events-style) */}
+            <div
+              className="border-b px-5 flex gap-0 shrink-0"
+              style={{
+                backgroundColor: "var(--cd-surface)",
+                borderColor: "var(--cd-border)",
+              }}
+            >
               {(["submissions", "activity", "comments"] as const).map((tab) => (
                 <button
                   key={tab}
                   onClick={() => setActiveTab(tab)}
-                  className={`px-5 py-3.5 text-sm font-bold border-b-2 transition-colors capitalize ${
-                    activeTab === tab
-                      ? "border-indigo-600 text-indigo-600"
-                      : "border-transparent text-gray-400 hover:text-gray-700"
-                  }`}
+                  className="flex items-center gap-1.5 px-5 py-3.5 text-sm font-bold border-b-2 transition-colors capitalize whitespace-nowrap"
+                  style={{
+                    color: activeTab === tab ? "var(--cd-primary)" : "var(--cd-text-2)",
+                    borderColor: activeTab === tab ? "var(--cd-primary)" : "transparent",
+                  }}
                 >
                   {tab}
                   {tab === "submissions" && (
-                    <span className="ml-2 px-1.5 py-0.5 rounded-full bg-indigo-50 text-indigo-600 text-[10px] font-bold">
+                    <span
+                      className="px-2 py-0.5 rounded-full text-[10px] font-bold transition-colors"
+                      style={{
+                        backgroundColor: activeTab === tab ? "var(--cd-primary-subtle)" : "var(--cd-surface-3)",
+                        color: activeTab === tab ? "var(--cd-primary-text)" : "var(--cd-text-muted)",
+                      }}
+                    >
                       {submissions.length}
                     </span>
                   )}
                   {tab === "activity" && (
-                    <span className="ml-2 px-1.5 py-0.5 rounded-full bg-gray-100 text-gray-500 text-[10px] font-bold">
+                    <span
+                      className="px-2 py-0.5 rounded-full text-[10px] font-bold transition-colors"
+                      style={{
+                        backgroundColor: activeTab === tab ? "var(--cd-primary-subtle)" : "var(--cd-surface-3)",
+                        color: activeTab === tab ? "var(--cd-primary-text)" : "var(--cd-text-muted)",
+                      }}
+                    >
                       {activity.length}
                     </span>
                   )}
                   {tab === "comments" && (
-                    <span className="ml-2 px-1.5 py-0.5 rounded-full bg-gray-100 text-gray-500 text-[10px] font-bold">
+                    <span
+                      className="px-2 py-0.5 rounded-full text-[10px] font-bold transition-colors"
+                      style={{
+                        backgroundColor: activeTab === tab ? "var(--cd-primary-subtle)" : "var(--cd-surface-3)",
+                        color: activeTab === tab ? "var(--cd-primary-text)" : "var(--cd-text-muted)",
+                      }}
+                    >
                       💬
                     </span>
                   )}
@@ -355,14 +531,22 @@ export default function TaskDetailPage() {
               ) : (
                 /* Activity timeline */
                 <div className="flex flex-col gap-1">
-                  <h3 className="text-sm font-bold text-gray-900 mb-5">Activity Timeline</h3>
+                  <h3 className="text-sm font-bold mb-5" style={{ color: "var(--cd-text)" }}>
+                    Activity Timeline
+                  </h3>
 
                   {activity.length === 0 ? (
-                    <p className="text-sm text-gray-400 text-center py-10">
+                    <p
+                      className="text-sm text-center py-10"
+                      style={{ color: "var(--cd-text-muted)" }}
+                    >
                       No activity recorded yet.
                     </p>
                   ) : (
-                    <ol className="relative ml-4 border-l-2 border-gray-100">
+                    <ol
+                      className="relative ml-4 border-l-2"
+                      style={{ borderColor: "var(--cd-border)" }}
+                    >
                       {activity.map((event) => {
                         const iconCls  = ACTIVITY_COLOR[event.type] ?? "bg-gray-100 text-gray-500";
                         const iconChar = ACTIVITY_ICON[event.type]  ?? "•";
@@ -370,26 +554,34 @@ export default function TaskDetailPage() {
                           <li key={event.id} className="mb-5 ml-5">
                             {/* Icon node */}
                             <span
-                              className={`absolute -left-3.5 flex w-7 h-7 items-center justify-center rounded-full text-xs font-bold border-2 border-white shadow-sm ${iconCls}`}
+                              className={`absolute -left-3.5 flex w-7 h-7 items-center justify-center rounded-full text-xs font-bold border-2 shadow-sm ${iconCls}`}
+                              style={{ borderColor: "var(--cd-surface)" }}
                             >
                               {iconChar}
                             </span>
 
                             {/* Card */}
-                            <div className="ml-1 p-4 bg-white rounded-xl border border-gray-100 shadow-sm">
-                              <p className="text-sm font-semibold text-gray-900">
+                            <div
+                              className="ml-1 p-4 rounded-xl border shadow-sm"
+                              style={{
+                                backgroundColor: "var(--cd-surface)",
+                                borderColor: "var(--cd-border)",
+                              }}
+                            >
+                              <p className="text-sm font-semibold" style={{ color: "var(--cd-text)" }}>
                                 {event.description}
                               </p>
-                              <div className="flex items-center gap-2 mt-1.5 flex-wrap">
-                                <span className="text-xs font-medium text-gray-500">
-                                  {event.actor}
-                                </span>
-                                <span className="text-gray-300">·</span>
-                                <span className="text-xs text-gray-400">
+                              <div
+                                className="flex items-center gap-2 mt-1.5 flex-wrap"
+                                style={{ color: "var(--cd-text-muted)" }}
+                              >
+                                <span className="text-xs font-medium">{event.actor}</span>
+                                <span>·</span>
+                                <span className="text-xs">
                                   {formatDistanceToNow(parseISO(event.timestamp), { addSuffix: true })}
                                 </span>
-                                <span className="text-gray-300">·</span>
-                                <span className="text-[10px] text-gray-400">
+                                <span>·</span>
+                                <span className="text-[10px]">
                                   {format(parseISO(event.timestamp), "MMM d, h:mm a")}
                                 </span>
                               </div>
@@ -421,4 +613,4 @@ export default function TaskDetailPage() {
       <ToastContainer toasts={toasts} onDismiss={dismiss} />
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/features/Tasks/v1/pages/TaskManagementPage.tsx b/src/features/Tasks/v1/pages/TaskManagementPage.tsx
index 19cefc1..d8b4e4d 100644
--- a/src/features/Tasks/v1/pages/TaskManagementPage.tsx
+++ b/src/features/Tasks/v1/pages/TaskManagementPage.tsx
@@ -14,23 +14,57 @@ import { useTasks, useDeleteTask } from "../hooks/useTasks";
 import { SELECTED_EVENT_KEY, DEFAULT_FILTERS } from "../constants/task.constants";
 import type { Task, TaskFilters } from "../Task.types";
 
+const TAB_STATUS_MAP: Record<string, string> = {
+  all:          "all",
+  todo:         "todo",
+  "in-progress": "in-progress",
+  completed:    "completed",
+};
+
 export default function TaskManagementPage() {
-  const navigate = useNavigate();
-  const [params, setParams] = useSearchParams();
+  const navigate                = useNavigate();
+  const [params, setParams]     = useSearchParams();
   const { toasts, addToast, dismiss } = useToast();
 
   const { data: events = [] } = useEvents();
   const [selectedEventId, setSelectedEventId] = useState<string | null>(
     () => localStorage.getItem(SELECTED_EVENT_KEY)
   );
+
+  // Active header tab (all / todo / in-progress / completed)
+  const [activeTab, setActiveTab] = useState("all");
+
+  // Filters — tab selection drives the status filter
   const [filters, setFilters] = useState<TaskFilters>(DEFAULT_FILTERS);
 
+  // Sync tab → status filter
+  const handleTabChange = (tab: string) => {
+    setActiveTab(tab);
+    setFilters((prev) => ({
+      ...prev,
+      status: TAB_STATUS_MAP[tab] as TaskFilters["status"],
+    }));
+  };
+
+  // Sync status filter change back to tab
+  const handleFiltersChange = (f: TaskFilters) => {
+    setFilters(f);
+    const reverseMap: Record<string, string> = {
+      all:          "all",
+      todo:         "todo",
+      "in-progress": "in-progress",
+      completed:    "completed",
+    };
+    setActiveTab(reverseMap[f.status] ?? "all");
+  };
+
   const { data: allTasks = [] } = useTasks(selectedEventId, DEFAULT_FILTERS);
   const { data: tasks = [], isLoading, isError, refetch } = useTasks(selectedEventId, filters);
 
   const deleteTask = useDeleteTask();
   const [taskToDelete, setTaskToDelete] = useState<Task | null>(null);
 
+  // Toast on create/update query params
   useEffect(() => {
     if (params.get("created") === "1") {
       addToast("success", "Task created!", "Your new task is now live in the list.");
@@ -42,7 +76,11 @@ export default function TaskManagementPage() {
     }
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
-  useEffect(() => { setFilters(DEFAULT_FILTERS); }, [selectedEventId]);
+  const handleEventSelect = (eventId: string | null) => {
+    setSelectedEventId(eventId);
+    setFilters(DEFAULT_FILTERS);
+    setActiveTab("all");
+  };
 
   const handleDelete = async () => {
     if (!taskToDelete) return;
@@ -60,28 +98,54 @@ export default function TaskManagementPage() {
     filters.status !== "all" || filters.priority !== "all" ||
     filters.time !== "all" || filters.members.length > 0 || filters.search !== "";
 
-  const resetFilters = () => setFilters(DEFAULT_FILTERS);
+  const resetFilters = () => {
+    setFilters(DEFAULT_FILTERS);
+    setActiveTab("all");
+  };
+
   const handleCreate = () => navigate(`/org/tasks/create?eventId=${selectedEventId}`);
 
   return (
-    <div className="w-full h-screen flex flex-col overflow-hidden bg-[#F5F5F5]">
-      <TaskHeader selectedEventId={selectedEventId} tasks={allTasks} />
+    <div
+      className="w-full min-h-screen flex flex-col"
+      style={{ backgroundColor: "var(--cd-bg)" }}
+    >
+      {/* ── Page header (Events-style) ──────────────────────────── */}
+      <TaskHeader
+        selectedEventId={selectedEventId}
+        tasks={allTasks}
+        activeTab={activeTab}
+        onTabChange={handleTabChange}
+      />
 
-      {/* Event selector bar */}
-      <div className="bg-white border-b px-4 py-3 flex items-center gap-3 flex-wrap">
-        <span className="text-xs font-bold text-gray-500 uppercase tracking-wide shrink-0">Event</span>
-        <EventDropdown selectedEventId={selectedEventId} onSelect={setSelectedEventId} />
+      {/* ── Event selector bar ──────────────────────────────────── */}
+      <div
+        className="border-b px-6 sm:px-10 py-4 flex items-center gap-4 flex-wrap sticky top-0 z-30"
+        style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border)", backdropFilter: "blur(12px)" }}
+      >
+        <span
+          className="text-[10px] font-black uppercase tracking-widest shrink-0"
+          style={{ color: "var(--cd-text-muted)" }}
+        >
+          Selected Event
+        </span>
+        <EventDropdown selectedEventId={selectedEventId} onSelect={handleEventSelect} />
         {selectedEventId && (
-          <button onClick={() => void refetch()} title="Refresh"
-            className="p-1.5 rounded-lg text-gray-400 hover:bg-gray-100 hover:text-gray-600 transition">
-            <RefreshCw size={14} />
+          <button
+            onClick={() => void refetch()}
+            title="Refresh tasks"
+            className="p-2 rounded-xl transition-all hover:bg-[var(--cd-hover)] text-[var(--cd-text-muted)] hover:text-[var(--cd-text)] active:scale-95"
+          >
+            <RefreshCw size={15} />
           </button>
         )}
       </div>
 
-      <div className="flex-1 overflow-hidden flex flex-col">
+      {/* ── Main content area ───────────────────────────────────── */}
+      <div className="flex-1 flex flex-col" style={{ backgroundColor: "var(--cd-bg)" }}>
         {!selectedEventId ? (
-          <div className="flex-1 flex items-center justify-center p-4">
+          /* No event selected */
+          <div className="min-h-[60vh] flex items-center justify-center p-4">
             {events.length === 0 ? (
               <EmptyState
                 variant="no-event"
@@ -90,50 +154,88 @@ export default function TaskManagementPage() {
                 action={
                   <button
                     onClick={() => navigate("/org/create-event")}
-                    className="flex items-center gap-2 px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold rounded-xl transition shadow-sm"
+                    className="cd-btn cd-btn-primary"
                   >
                     Create First Event
                   </button>
                 }
               />
             ) : (
-              <EmptyState variant="no-event" title="No event selected"
-                description="Select an event from the dropdown above to view and manage its tasks." />
+              <EmptyState
+                variant="no-event"
+                title="No event selected"
+                description="Select an event from the dropdown above to view and manage its tasks."
+              />
             )}
           </div>
         ) : isError ? (
-          <div className="flex-1 flex items-center justify-center p-4">
-            <EmptyState variant="error" title="Failed to load tasks" description="Something went wrong."
-              action={<button onClick={() => void refetch()}
-                className="flex items-center gap-2 px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold rounded-xl transition">
-                <RefreshCw size={14} /> Retry
-              </button>} />
+          /* Error state */
+          <div className="min-h-[60vh] flex items-center justify-center p-4">
+            <EmptyState
+              variant="error"
+              title="Failed to load tasks"
+              description="Something went wrong while fetching tasks."
+              action={
+                <button
+                  onClick={() => void refetch()}
+                  className="cd-btn cd-btn-secondary flex items-center gap-2"
+                >
+                  <RefreshCw size={14} /> Retry
+                </button>
+              }
+            />
           </div>
         ) : (
-          <div className="flex-1 overflow-hidden flex flex-col bg-white">
-            <TaskFiltersBar filters={filters} onChange={setFilters}
-              totalCount={allTasks.length} filteredCount={tasks.length} />
-            <div className="flex-1 overflow-auto">
-              {/* Desktop: table | Mobile: card list */}
-              <div className="hidden md:block h-full">
-                <TaskTable tasks={tasks} isLoading={isLoading} onDelete={setTaskToDelete}
-                  onCreateTask={handleCreate} hasFilters={hasActiveFilters} onResetFilters={resetFilters} />
+          /* Task list */
+          <div className="flex flex-col">
+            <TaskFiltersBar
+              filters={filters}
+              onChange={handleFiltersChange}
+              totalCount={allTasks.length}
+              filteredCount={tasks.length}
+              tasks={allTasks}
+            />
+            <div className="p-6 sm:p-10" style={{ backgroundColor: "var(--cd-bg)" }}>
+              {/* Desktop: table */}
+              <div className="hidden md:block">
+                <TaskTable
+                  tasks={tasks}
+                  isLoading={isLoading}
+                  onDelete={setTaskToDelete}
+                  onCreateTask={handleCreate}
+                  hasFilters={hasActiveFilters}
+                  onResetFilters={resetFilters}
+                />
               </div>
-              <div className="block md:hidden h-full">
-                <TaskCardList tasks={tasks} isLoading={isLoading} onDelete={setTaskToDelete}
-                  onCreateTask={handleCreate} hasFilters={hasActiveFilters} onResetFilters={resetFilters} />
+              {/* Mobile: card list */}
+              <div className="block md:hidden pb-10">
+                <TaskCardList
+                  tasks={tasks}
+                  isLoading={isLoading}
+                  onDelete={setTaskToDelete}
+                  onCreateTask={handleCreate}
+                  hasFilters={hasActiveFilters}
+                  onResetFilters={resetFilters}
+                />
               </div>
             </div>
           </div>
         )}
       </div>
 
-      <ConfirmModal isOpen={!!taskToDelete} title="Delete Task"
+      {/* ── Confirm delete modal ────────────────────────────────── */}
+      <ConfirmModal
+        isOpen={!!taskToDelete}
+        title="Delete Task"
         message={`Are you sure you want to delete "${taskToDelete?.title}"? All submissions will be permanently lost.`}
-        confirmLabel="Yes, Delete" onConfirm={() => void handleDelete()}
-        onCancel={() => setTaskToDelete(null)} isLoading={deleteTask.isPending} danger />
+        confirmLabel="Yes, Delete"
+        onConfirm={() => void handleDelete()}
+        onCancel={() => setTaskToDelete(null)}
+        isLoading={deleteTask.isPending}
+        danger
+      />
 
       <ToastContainer toasts={toasts} onDismiss={dismiss} />
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/features/Tasks/v1/utils/techBadgeStyle.ts b/src/features/Tasks/v1/utils/techBadgeStyle.ts
new file mode 100644
index 0000000..cda3b46
--- /dev/null
+++ b/src/features/Tasks/v1/utils/techBadgeStyle.ts
@@ -0,0 +1,18 @@
+import type { CSSProperties } from "react";
+
+const ACCENTS = ["#0284c7", "#4f46e5", "#0f766e", "#7c3aed", "#b45309", "#be123c"];
+
+function accentFor(id: string) {
+  const code = id.split("").reduce((sum, char) => sum + char.charCodeAt(0), 0);
+  return ACCENTS[code % ACCENTS.length];
+}
+
+export function techBadgeStyle(id: string): CSSProperties {
+  const accent = accentFor(id);
+
+  return {
+    backgroundColor: `color-mix(in srgb, ${accent} 14%, var(--cd-surface))`,
+    borderColor: `color-mix(in srgb, ${accent} 28%, var(--cd-border))`,
+    color: `color-mix(in srgb, ${accent} 72%, var(--cd-text))`,
+  };
+}

From 88e320514573c19b92c53c02f3f997a341895772 Mon Sep 17 00:00:00 2001
From: itzzavdheshh <aavdhesh.dadhich@gmail.com>
Date: Tue, 12 May 2026 10:11:35 +0530
Subject: [PATCH 13/13] Updated implementation

---
 src/App.css                                   |  67 +-
 src/features/Tasks/v1/Task.types.ts           |  10 +-
 .../v1/components/common/CommentsSection.tsx  |  21 +-
 .../Tasks/v1/components/common/EmptyState.tsx |  10 +-
 .../v1/components/common/PriorityBadge.tsx    |   8 +-
 .../v1/components/common/StatusBadge.tsx      |   8 +-
 .../Tasks/v1/components/common/TechBadge.tsx  |   2 +-
 .../v1/components/event/EventDropdown.tsx     |  17 +-
 .../v1/components/submission/ReviewPanel.tsx  |  72 +-
 .../components/submission/SubmissionCard.tsx  |  42 +-
 .../components/submission/SubmissionList.tsx  |  42 +-
 .../Tasks/v1/components/task/TaskCardList.tsx |  52 +-
 .../Tasks/v1/components/task/TaskFilters.tsx  | 207 ++---
 .../Tasks/v1/components/task/TaskForm.tsx     | 179 ++--
 .../Tasks/v1/components/task/TaskHeader.tsx   | 230 ++---
 .../Tasks/v1/components/task/TaskRow.tsx      | 104 +--
 .../Tasks/v1/components/task/TaskTable.tsx    |  52 +-
 src/features/Tasks/v1/hooks/useTasks.ts       |   8 +-
 src/features/Tasks/v1/mock/taskMockData.ts    |  52 +-
 .../Tasks/v1/pages/CreateTaskPage.tsx         |  18 +-
 src/features/Tasks/v1/pages/EditTaskPage.tsx  |  12 +-
 .../Tasks/v1/pages/TaskDetailPage.tsx         | 844 ++++++++----------
 .../Tasks/v1/pages/TaskManagementPage.tsx     |  80 +-
 src/features/Tasks/v1/utils/techBadgeStyle.ts |   6 +-
 24 files changed, 1038 insertions(+), 1105 deletions(-)

diff --git a/src/App.css b/src/App.css
index 2b4680a..6610d51 100644
--- a/src/App.css
+++ b/src/App.css
@@ -11,6 +11,7 @@
 html {
   color-scheme: light;
 }
+
 html.dark {
   color-scheme: dark;
 }
@@ -145,11 +146,11 @@ body {
   --cd-surface: #ffffff;
   --cd-surface-2: #f1f5f9;
   --cd-surface-3: #eef2f7;
-  --cd-border: #e2e8f0;
-  --cd-border-subtle: #f1f5f9;
+  --cd-border: #d8e1ee;
+  --cd-border-subtle: #e9eef6;
   --cd-text: #1e293b;
-  --cd-text-2: #64748b;
-  --cd-text-muted: #94a3b8;
+  --cd-text-2: #53657d;
+  --cd-text-muted: #8392a8;
   --cd-primary: #2563eb;
   --cd-primary-hover: #1d4ed8;
   --cd-primary-subtle: #eff6ff;
@@ -205,12 +206,12 @@ body {
   --sidebar-ring: #3b82f6;
 
   /* CommDesk design tokens – dark */
-  --cd-bg: #0f1320;
-  --cd-surface: #1a1f2e;
-  --cd-surface-2: #151929;
-  --cd-surface-3: #1e293b;
-  --cd-border: rgba(255, 255, 255, 0.08);
-  --cd-border-subtle: rgba(255, 255, 255, 0.04);
+  --cd-bg: #0b0d12;
+  --cd-surface: #11151d;
+  --cd-surface-2: #171c25;
+  --cd-surface-3: #202632;
+  --cd-border: rgba(255, 255, 255, 0.1);
+  --cd-border-subtle: rgba(255, 255, 255, 0.065);
   --cd-text: #f8fafc;
   --cd-text-2: #94a3b8;
   --cd-text-muted: #64748b;
@@ -228,7 +229,7 @@ body {
   --cd-warning-subtle: rgba(250, 204, 21, 0.1);
   --cd-danger: #f87171;
   --cd-danger-subtle: rgba(248, 113, 113, 0.1);
-  --cd-hover: rgba(255, 255, 255, 0.05);
+  --cd-hover: rgba(255, 255, 255, 0.045);
   --cd-shadow: rgba(0, 0, 0, 0.3);
   --cd-shadow-md: rgba(0, 0, 0, 0.4);
 }
@@ -242,6 +243,7 @@ body {
       border-color 0.2s ease,
       color 0.15s ease;
   }
+
   body {
     @apply bg-background text-foreground;
   }
@@ -249,6 +251,7 @@ body {
 
 /* ─── CommDesk utility classes ───────────────────────────────────────────── */
 @layer utilities {
+
   /* Cards */
   .cd-card {
     background-color: var(--cd-surface);
@@ -260,9 +263,11 @@ body {
       box-shadow 0.2s ease,
       transform 0.2s ease;
   }
+
   .cd-card:hover {
     box-shadow: 0 4px 12px var(--cd-shadow-md);
   }
+
   .cd-card-hover:hover {
     transform: translateY(-2px);
   }
@@ -291,22 +296,27 @@ body {
     font-weight: 500;
     line-height: 1.4;
   }
+
   .cd-badge-success {
     background-color: var(--cd-success-subtle);
     color: var(--cd-success);
   }
+
   .cd-badge-warning {
     background-color: var(--cd-warning-subtle);
     color: var(--cd-warning);
   }
+
   .cd-badge-danger {
     background-color: var(--cd-danger-subtle);
     color: var(--cd-danger);
   }
+
   .cd-badge-primary {
     background-color: var(--cd-primary-subtle);
     color: var(--cd-primary-text);
   }
+
   .cd-badge-neutral {
     background-color: var(--cd-surface-2);
     color: var(--cd-text-2);
@@ -326,41 +336,50 @@ body {
     transition: all 0.15s ease;
     border: 1px solid transparent;
   }
+
   .cd-btn:disabled {
     opacity: 0.5;
     cursor: not-allowed;
   }
+
   .cd-btn-primary {
     background-color: var(--cd-primary);
     color: #ffffff;
     border-color: var(--cd-primary);
   }
+
   .cd-btn-primary:hover:not(:disabled) {
     background-color: var(--cd-primary-hover);
     border-color: var(--cd-primary-hover);
   }
+
   .cd-btn-secondary {
     background-color: var(--cd-surface-2);
     color: var(--cd-text);
     border-color: var(--cd-border);
   }
+
   .cd-btn-secondary:hover:not(:disabled) {
     background-color: var(--cd-hover);
   }
+
   .cd-btn-ghost {
     background-color: transparent;
     color: var(--cd-text-2);
     border-color: transparent;
   }
+
   .cd-btn-ghost:hover:not(:disabled) {
     background-color: var(--cd-hover);
     color: var(--cd-text);
   }
+
   .cd-btn-danger {
     background-color: var(--cd-danger-subtle);
     color: var(--cd-danger);
     border-color: var(--cd-danger-subtle);
   }
+
   .cd-btn-danger:hover:not(:disabled) {
     background-color: var(--cd-danger);
     color: #ffffff;
@@ -380,13 +399,16 @@ body {
       border-color 0.15s ease,
       box-shadow 0.15s ease;
   }
+
   .cd-input::placeholder {
     color: var(--cd-text-muted);
   }
+
   .cd-input:focus {
     border-color: var(--cd-primary);
     box-shadow: 0 0 0 3px var(--cd-primary-subtle);
   }
+
   .cd-input:disabled {
     opacity: 0.5;
     cursor: not-allowed;
@@ -397,9 +419,11 @@ body {
     width: 100%;
     border-collapse: collapse;
   }
+
   .cd-table thead {
     background-color: var(--cd-surface-2);
   }
+
   .cd-table th {
     padding: 0.75rem 1.25rem;
     text-align: left;
@@ -410,15 +434,18 @@ body {
     letter-spacing: 0.05em;
     border-bottom: 1px solid var(--cd-border);
   }
+
   .cd-table td {
     padding: 0.875rem 1.25rem;
     font-size: 0.875rem;
     color: var(--cd-text);
     border-bottom: 1px solid var(--cd-border-subtle);
   }
+
   .cd-table tbody tr:hover {
     background-color: var(--cd-hover);
   }
+
   .cd-table tbody tr:last-child td {
     border-bottom: none;
   }
@@ -442,10 +469,12 @@ body {
     transition: all 0.15s ease;
     text-decoration: none;
   }
+
   .cd-nav-link:hover {
     background-color: var(--cd-hover);
     color: var(--cd-text);
   }
+
   .cd-nav-link.active {
     background-color: var(--cd-primary-subtle);
     color: var(--cd-primary-text);
@@ -484,16 +513,19 @@ body {
       box-shadow 0.2s ease,
       transform 0.2s ease;
   }
+
   .section-title {
     font-size: 1rem;
     font-weight: 600;
     color: var(--cd-text);
     margin-bottom: 1rem;
   }
+
   .text-muted {
     font-size: 0.875rem;
     color: var(--cd-text-2);
   }
+
   .badge-success {
     display: inline-flex;
     align-items: center;
@@ -505,6 +537,7 @@ body {
     background-color: var(--cd-success-subtle);
     color: var(--cd-success);
   }
+
   .badge-warning {
     display: inline-flex;
     align-items: center;
@@ -516,6 +549,7 @@ body {
     background-color: var(--cd-warning-subtle);
     color: var(--cd-warning);
   }
+
   .badge-default {
     display: inline-flex;
     align-items: center;
@@ -527,12 +561,13 @@ body {
     background-color: var(--cd-surface-2);
     color: var(--cd-text-2);
   }
-  
+
   @keyframes shimmer {
     100% {
       transform: translateX(100%);
     }
   }
+
   .animate-\[shimmer_1\.4s_infinite\] {
     animation: shimmer 1.4s infinite;
   }
@@ -555,13 +590,16 @@ html {
   width: 6px;
   height: 6px;
 }
+
 ::-webkit-scrollbar-track {
   background: transparent;
 }
+
 ::-webkit-scrollbar-thumb {
   background-color: var(--cd-border);
   border-radius: 9999px;
 }
+
 ::-webkit-scrollbar-thumb:hover {
   background-color: var(--cd-text-muted);
 }
@@ -570,14 +608,17 @@ html {
 .custom-scrollbar::-webkit-scrollbar {
   width: 5px;
 }
+
 .custom-scrollbar::-webkit-scrollbar-track {
   background: transparent;
 }
+
 .custom-scrollbar::-webkit-scrollbar-thumb {
   background-color: var(--cd-border);
   border-radius: 10px;
   border: 1px solid transparent;
 }
+
 .custom-scrollbar::-webkit-scrollbar-thumb:hover {
   background-color: var(--cd-primary);
-}
+}
\ No newline at end of file
diff --git a/src/features/Tasks/v1/Task.types.ts b/src/features/Tasks/v1/Task.types.ts
index 59bfddc..4b0ee5f 100644
--- a/src/features/Tasks/v1/Task.types.ts
+++ b/src/features/Tasks/v1/Task.types.ts
@@ -1,9 +1,9 @@
-export type TaskStatus      = "todo" | "in-progress" | "completed";
-export type TaskPriority    = "low" | "medium" | "high";
-export type SubmissionType  = "file" | "github" | "link" | "all";
+export type TaskStatus = "todo" | "in-progress" | "completed";
+export type TaskPriority = "low" | "medium" | "high";
+export type SubmissionType = "file" | "github" | "link" | "all";
 export type SubmissionStatus = "not-submitted" | "submitted" | "reviewed";
-export type ReviewDecision  = "approved" | "rejected" | "pending";
-export type EventType       = "hackathon" | "workshop" | "internal" | "community";
+export type ReviewDecision = "approved" | "rejected" | "pending";
+export type EventType = "hackathon" | "workshop" | "internal" | "community";
 
 // ─── Technology tag ───────────────────────────────────────────────────────────
 export interface TechTag {
diff --git a/src/features/Tasks/v1/components/common/CommentsSection.tsx b/src/features/Tasks/v1/components/common/CommentsSection.tsx
index b8f8d3e..5df2bb0 100644
--- a/src/features/Tasks/v1/components/common/CommentsSection.tsx
+++ b/src/features/Tasks/v1/components/common/CommentsSection.tsx
@@ -23,8 +23,8 @@ export default function CommentsSection({ taskId }: Props) {
       {/* Header */}
       <div className="flex items-center gap-2">
         <MessageCircle size={16} className="text-[var(--cd-text-muted)]" />
-        <h3 className="text-sm font-black uppercase tracking-widest text-[var(--cd-text)]">Comments</h3>
-        <span className="px-2 py-0.5 rounded-full text-[11px] font-bold bg-[var(--cd-surface-3)] text-[var(--cd-text-muted)]">
+        <h3 className="text-sm font-semibold text-[var(--cd-text)]">Comments</h3>
+        <span className="rounded-md px-1.5 py-0.5 text-[11px] font-medium bg-[var(--cd-surface-3)] text-[var(--cd-text-muted)]">
           {comments.length}
         </span>
       </div>
@@ -33,17 +33,17 @@ export default function CommentsSection({ taskId }: Props) {
       {isLoading ? (
         <p className="text-xs text-[var(--cd-text-muted)]">Loading comments…</p>
       ) : comments.length === 0 ? (
-        <div className="flex flex-col items-center justify-center py-10 px-4 rounded-2xl border border-dashed border-[var(--cd-border)] bg-[var(--cd-surface-2)]">
+        <div className="flex flex-col items-center justify-center rounded-xl border border-dashed border-[var(--cd-border-subtle)] bg-[var(--cd-surface-2)] px-4 py-10">
           <p className="text-xs text-[var(--cd-text-muted)] text-center font-medium">No comments yet. Be the first to start the conversation!</p>
         </div>
       ) : (
         <div className="flex flex-col gap-4">
           {comments.map((c) => (
             <div key={c.id} className="flex gap-3 items-start">
-              <img src={c.avatar} alt={c.author} className="w-9 h-9 rounded-full shrink-0 object-cover border-2 border-[var(--cd-surface)] shadow-sm" />
-              <div className="flex-1 bg-[var(--cd-surface)] rounded-2xl px-4 py-3 border border-[var(--cd-border-subtle)] shadow-sm">
+              <img src={c.avatar} alt={c.author} className="h-9 w-9 shrink-0 rounded-full border border-[var(--cd-border-subtle)] object-cover" />
+              <div className="flex-1 rounded-xl border border-[var(--cd-border-subtle)] bg-[var(--cd-surface)] px-4 py-3">
                 <div className="flex items-center justify-between gap-2 mb-1.5">
-                  <span className="text-xs font-bold text-[var(--cd-text)]">{c.author}</span>
+                  <span className="text-xs font-semibold text-[var(--cd-text)]">{c.author}</span>
                   <span className="text-[10px] text-[var(--cd-text-muted)]">
                     {formatDistanceToNow(parseISO(c.createdAt), { addSuffix: true })}
                   </span>
@@ -66,20 +66,21 @@ export default function CommentsSection({ taskId }: Props) {
             }}
             rows={2}
             placeholder="Write a comment… (Enter to send)"
-            className={`flex-1 text-sm rounded-2xl border px-4 py-3 outline-none resize-none transition-all bg-[var(--cd-surface)] text-[var(--cd-text)]
+            className={`flex-1 resize-none rounded-xl border bg-[var(--cd-surface)] px-4 py-3 text-sm text-[var(--cd-text)] outline-none transition-colors
               ${error ? "border-[var(--cd-danger)] ring-2 ring-[var(--cd-danger-subtle)]" : "border-[var(--cd-border)] focus:border-[var(--cd-primary)] focus:ring-2 focus:ring-[var(--cd-primary-subtle)]"}`}
           />
           <button
             onClick={() => void handleSubmit()}
             disabled={addComment.isPending || !text.trim()}
-            className="self-end h-11 w-11 flex items-center justify-center bg-[var(--cd-primary)] hover:opacity-90 active:scale-95 disabled:opacity-40 text-white rounded-xl transition-all shadow-md shadow-[var(--cd-primary-subtle)]"
+            className="flex h-11 w-11 items-center justify-center self-end rounded-lg bg-[var(--cd-primary)] text-white transition-colors hover:opacity-90 disabled:opacity-40"
           >
             {addComment.isPending ? <Loader2 size={16} className="animate-spin" /> : <Send size={16} />}
           </button>
         </div>
-        {error && <p className="text-[10px] text-[var(--cd-danger)] font-bold uppercase tracking-wider">{error}</p>}
+        {error && <p className="text-[11px] font-medium text-[var(--cd-danger)]">{error}</p>}
       </div>
     </div>
-
   );
 }
+
+
diff --git a/src/features/Tasks/v1/components/common/EmptyState.tsx b/src/features/Tasks/v1/components/common/EmptyState.tsx
index aee70b9..95a75c7 100644
--- a/src/features/Tasks/v1/components/common/EmptyState.tsx
+++ b/src/features/Tasks/v1/components/common/EmptyState.tsx
@@ -84,10 +84,10 @@ export default function EmptyState({
   const Illustration = illustrations[variant];
 
   return (
-    <div className="flex flex-col items-center justify-center text-center px-6 py-12 max-w-sm mx-auto">
+    <div className="mx-auto flex max-w-sm flex-col items-center justify-center px-6 py-10 text-center">
       {icon ? (
         <div
-          className="w-14 h-14 rounded-2xl flex items-center justify-center mb-4"
+          className="mb-4 flex h-12 w-12 items-center justify-center rounded-xl"
           style={{ backgroundColor: "var(--cd-surface-2)", color: "var(--cd-text-muted)" }}
         >
           {icon}
@@ -95,15 +95,15 @@ export default function EmptyState({
       ) : (
         <Illustration />
       )}
-      <p className="text-sm font-semibold mt-3" style={{ color: "var(--cd-text)" }}>
+      <p className="mt-3 text-sm font-semibold" style={{ color: "var(--cd-text)" }}>
         {title}
       </p>
       {description && (
-        <p className="text-xs mt-1.5 leading-relaxed" style={{ color: "var(--cd-text-muted)" }}>
+        <p className="mt-1.5 text-xs leading-relaxed" style={{ color: "var(--cd-text-muted)" }}>
           {description}
         </p>
       )}
       {action && <div className="mt-5">{action}</div>}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/features/Tasks/v1/components/common/PriorityBadge.tsx b/src/features/Tasks/v1/components/common/PriorityBadge.tsx
index 8e92fe2..617d0b5 100644
--- a/src/features/Tasks/v1/components/common/PriorityBadge.tsx
+++ b/src/features/Tasks/v1/components/common/PriorityBadge.tsx
@@ -9,14 +9,14 @@ interface Props {
 export default function PriorityBadge({ priority, size = "md" }: Props) {
   const cfg = PRIORITY_CONFIG[priority];
   const cls = size === "sm"
-    ? "px-2 py-0.5 text-[10px] gap-1"
-    : "px-2.5 py-1 text-xs gap-1.5";
+    ? "px-1.5 py-0.5 text-[10px] gap-1"
+    : "px-2 py-1 text-xs gap-1.5";
   return (
     <span
-      className={`inline-flex items-center font-semibold rounded-full ${cls} ${cfg.badgeBg} ${cfg.badgeText}`}
+      className={`inline-flex items-center rounded-md font-medium ${cls} ${cfg.badgeBg} ${cfg.badgeText}`}
     >
       <span className={`w-1.5 h-1.5 rounded-full shrink-0 ${cfg.dot}`} />
       {cfg.label}
     </span>
   );
-}
\ No newline at end of file
+}
diff --git a/src/features/Tasks/v1/components/common/StatusBadge.tsx b/src/features/Tasks/v1/components/common/StatusBadge.tsx
index cab36f1..1cf2afe 100644
--- a/src/features/Tasks/v1/components/common/StatusBadge.tsx
+++ b/src/features/Tasks/v1/components/common/StatusBadge.tsx
@@ -9,14 +9,14 @@ interface Props {
 export default function StatusBadge({ status, size = "md" }: Props) {
   const cfg = STATUS_CONFIG[status];
   const cls = size === "sm"
-    ? "px-2 py-0.5 text-[10px] gap-1"
-    : "px-2.5 py-1 text-xs gap-1.5";
+    ? "px-1.5 py-0.5 text-[10px] gap-1"
+    : "px-2 py-1 text-xs gap-1.5";
   return (
     <span
-      className={`inline-flex items-center font-semibold rounded-full ${cls} ${cfg.bg} ${cfg.text}`}
+      className={`inline-flex items-center rounded-md font-medium ${cls} ${cfg.bg} ${cfg.text}`}
     >
       <span className={`w-1.5 h-1.5 rounded-full shrink-0 ${cfg.dot}`} />
       {cfg.label}
     </span>
   );
-}
\ No newline at end of file
+}
diff --git a/src/features/Tasks/v1/components/common/TechBadge.tsx b/src/features/Tasks/v1/components/common/TechBadge.tsx
index 4129c14..e64e469 100644
--- a/src/features/Tasks/v1/components/common/TechBadge.tsx
+++ b/src/features/Tasks/v1/components/common/TechBadge.tsx
@@ -6,7 +6,7 @@ export default function TechBadge({ tech, size = "sm" }: { tech: TechTag; size?:
 
   return (
     <span
-      className={`inline-flex items-center rounded-md border py-0.5 font-semibold ${cls}`}
+      className={`inline-flex items-center rounded-md border py-0.5 font-medium ${cls}`}
       style={techBadgeStyle(tech.id)}
     >
       {tech.label}
diff --git a/src/features/Tasks/v1/components/event/EventDropdown.tsx b/src/features/Tasks/v1/components/event/EventDropdown.tsx
index 34c27cd..fe07c83 100644
--- a/src/features/Tasks/v1/components/event/EventDropdown.tsx
+++ b/src/features/Tasks/v1/components/event/EventDropdown.tsx
@@ -1,6 +1,7 @@
 import { useState, useRef, useEffect, useCallback } from "react";
 import { ChevronDown, Search, CalendarDays, Loader2, X } from "lucide-react";
 import { format, parseISO } from "date-fns";
+import { FaRocket, FaCode, FaGlobe, FaBolt, FaPalette, FaUsers } from "react-icons/fa";
 import { useEvents } from "../../hooks/useEvents";
 import { EVENT_TYPE_CONFIG, EVENT_STATUS_CONFIG, SELECTED_EVENT_KEY } from "../../constants/task.constants";
 import type { EventOption } from "../../Task.types";
@@ -214,7 +215,21 @@ export default function EventDropdown({ selectedEventId, onSelect }: Props) {
                       backgroundColor: isActive || isHighlighted ? "var(--cd-primary-subtle)" : "transparent",
                     }}
                   >
-                    <div className={`w-1 self-stretch rounded-full mt-0.5 ${typeCfg.dot}`} />
+                    {/* Event Icon */}
+                    <div
+                      className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-lg transition-colors ${isActive ? "bg-[var(--cd-primary)] text-white" : "bg-[var(--cd-surface-3)] text-[var(--cd-primary)]"}`}
+                    >
+                      {(() => {
+                        const name = event.name.toLowerCase();
+                        if (name.includes("ai hackathon") || name.includes("ai challenge")) return <FaRocket size={16} />;
+                        if (name.includes("web3")) return <FaCode size={16} />;
+                        if (name.includes("open source")) return <FaGlobe size={18} />;
+                        if (name.includes("speed code")) return <FaBolt size={16} />;
+                        if (name.includes("design")) return <FaPalette size={16} />;
+                        if (name.includes("community")) return <FaUsers size={16} />;
+                        return <CalendarDays size={16} />;
+                      })()}
+                    </div>
 
                     <div className="flex-1 min-w-0">
                       <div className="flex items-center gap-2 flex-wrap">
diff --git a/src/features/Tasks/v1/components/submission/ReviewPanel.tsx b/src/features/Tasks/v1/components/submission/ReviewPanel.tsx
index 66b43e6..2874686 100644
--- a/src/features/Tasks/v1/components/submission/ReviewPanel.tsx
+++ b/src/features/Tasks/v1/components/submission/ReviewPanel.tsx
@@ -12,19 +12,19 @@ interface Props {
 }
 
 function getScoreInfo(score: number) {
-  if (score >= 90) return { text: "Excellent",  color: "text-emerald-600", bar: "bg-emerald-500" };
-  if (score >= 75) return { text: "Good",        color: "text-sky-600",     bar: "bg-sky-500"     };
-  if (score >= 50) return { text: "Average",     color: "text-amber-600",   bar: "bg-amber-400"   };
-  return               { text: "Needs Work",  color: "text-red-500",     bar: "bg-red-400"     };
+  if (score >= 90) return { text: "Excellent", color: "text-emerald-600", bar: "bg-emerald-500" };
+  if (score >= 75) return { text: "Good", color: "text-sky-600", bar: "bg-sky-500" };
+  if (score >= 50) return { text: "Average", color: "text-amber-600", bar: "bg-amber-400" };
+  return { text: "Needs Work", color: "text-red-500", bar: "bg-red-400" };
 }
 
 export default function ReviewPanel({ submissionId, onSuccess, onCancel }: Props) {
   const [decision, setDecision] = useState<ReviewDecision>("approved");
-  const [score,    setScore]    = useState<number>(80);
+  const [score, setScore] = useState<number>(80);
   const [scoreInput, setScoreInput] = useState<string>("80"); // separate string for manual input
   const [useScore, setUseScore] = useState(true);
   const [feedback, setFeedback] = useState("");
-  const [error,    setError]    = useState("");
+  const [error, setError] = useState("");
 
   const { mutateAsync, isPending } = useReviewSubmission();
   const info = getScoreInfo(score);
@@ -67,37 +67,37 @@ export default function ReviewPanel({ submissionId, onSuccess, onCancel }: Props
   };
 
   return (
-    <div className="rounded-2xl border-2 overflow-hidden transition-all duration-300"
-      style={{ 
-        backgroundColor: "var(--cd-surface)", 
-        borderColor: "var(--cd-primary-subtle)",
-        boxShadow: "0 10px 30px -10px var(--cd-primary-subtle)" 
+    <div className="overflow-hidden rounded-xl border transition-colors duration-200"
+      style={{
+        backgroundColor: "var(--cd-surface)",
+        borderColor: "var(--cd-border-subtle)",
+        boxShadow: "none"
       }}>
       {/* Header */}
-      <div className="flex items-center justify-between px-4 py-3 border-b"
-        style={{ backgroundColor: "var(--cd-primary-subtle)", borderColor: "var(--cd-border)" }}>
+      <div className="flex items-center justify-between border-b px-4 py-3"
+        style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border-subtle)" }}>
         <div className="flex items-center gap-2">
           <MessageSquare size={15} style={{ color: "var(--cd-primary)" }} />
-          <span className="text-sm font-bold" style={{ color: "var(--cd-primary-text)" }}>Submit Review</span>
+          <span className="text-sm font-semibold" style={{ color: "var(--cd-text)" }}>Submit Review</span>
         </div>
-        <button onClick={onCancel} className="p-1 rounded-lg transition-all hover:bg-[var(--cd-primary)] hover:text-white active:scale-95" style={{ color: "var(--cd-primary-text)" }}>
+        <button onClick={onCancel} className="rounded-lg p-1 transition-colors hover:bg-[var(--cd-hover)]" style={{ color: "var(--cd-text-muted)" }}>
           <X size={15} />
         </button>
       </div>
 
-      <div className="p-5 flex flex-col gap-5">
+      <div className="flex flex-col gap-5 p-5">
         {/* Decision */}
         <div className="flex flex-col gap-2">
-          <label className="text-[10px] font-black uppercase tracking-widest" style={{ color: "var(--cd-text-muted)" }}>Decision</label>
-          <div className="flex rounded-xl overflow-hidden border p-1 gap-1" style={{ backgroundColor: "var(--cd-surface-2)", borderColor: "var(--cd-border)" }}>
+          <label className="text-[11px] font-semibold uppercase tracking-wider" style={{ color: "var(--cd-text-muted)" }}>Decision</label>
+          <div className="flex overflow-hidden rounded-lg border p-1 gap-1" style={{ backgroundColor: "var(--cd-surface-2)", borderColor: "var(--cd-border-subtle)" }}>
             <button onClick={() => setDecision("approved")}
-              className={`flex-1 flex items-center justify-center gap-2 py-2.5 rounded-lg text-sm font-bold transition-all active:scale-95
-                ${decision === "approved" ? "bg-[var(--cd-success)] text-white shadow-md" : "text-[var(--cd-text-muted)] hover:bg-[var(--cd-hover)]"}`}>
+              className={`flex-1 flex items-center justify-center gap-2 rounded-md py-2.5 text-sm font-medium transition-colors
+                ${decision === "approved" ? "bg-[var(--cd-success)] text-white" : "text-[var(--cd-text-muted)] hover:bg-[var(--cd-hover)]"}`}>
               <CheckCircle2 size={14} /> Approve
             </button>
             <button onClick={() => setDecision("rejected")}
-              className={`flex-1 flex items-center justify-center gap-2 py-2.5 rounded-lg text-sm font-bold transition-all active:scale-95
-                ${decision === "rejected" ? "bg-[var(--cd-danger)] text-white shadow-md" : "text-[var(--cd-text-muted)] hover:bg-[var(--cd-hover)]"}`}>
+              className={`flex-1 flex items-center justify-center gap-2 rounded-md py-2.5 text-sm font-medium transition-colors
+                ${decision === "rejected" ? "bg-[var(--cd-danger)] text-white" : "text-[var(--cd-text-muted)] hover:bg-[var(--cd-hover)]"}`}>
               <XCircle size={14} /> Reject
             </button>
           </div>
@@ -106,10 +106,10 @@ export default function ReviewPanel({ submissionId, onSuccess, onCancel }: Props
         {/* Score */}
         <div className="flex flex-col gap-3">
           <div className="flex items-center justify-between">
-            <label className="text-[10px] font-black uppercase tracking-widest flex items-center gap-1.5" style={{ color: "var(--cd-text-muted)" }}>
+            <label className="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider" style={{ color: "var(--cd-text-muted)" }}>
               <Star size={11} style={{ color: "var(--cd-warning)" }} /> Score (optional)
             </label>
-            <label className="flex items-center gap-1.5 text-xs font-bold cursor-pointer select-none" style={{ color: "var(--cd-text-muted)" }}>
+            <label className="flex cursor-pointer select-none items-center gap-1.5 text-xs font-medium" style={{ color: "var(--cd-text-muted)" }}>
               <div onClick={() => setUseScore((v) => !v)}
                 className="relative w-8 h-4 rounded-full cursor-pointer transition-colors"
                 style={{ backgroundColor: useScore ? "var(--cd-primary)" : "var(--cd-surface-3)" }}>
@@ -144,9 +144,9 @@ export default function ReviewPanel({ submissionId, onSuccess, onCancel }: Props
                       value={scoreInput}
                       onChange={handleManualInput}
                       onBlur={handleManualBlur}
-                      className="w-16 h-12 text-center text-2xl font-black rounded-xl border-2 outline-none transition-all [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
-                      style={{ 
-                        backgroundColor: "var(--cd-warning-subtle)", 
+                      className="h-11 w-16 rounded-lg border text-center text-xl font-semibold outline-none transition-colors [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+                      style={{
+                        backgroundColor: "var(--cd-warning-subtle)",
                         color: "var(--cd-warning)",
                         borderColor: "var(--cd-warning-subtle)"
                       }}
@@ -168,16 +168,16 @@ export default function ReviewPanel({ submissionId, onSuccess, onCancel }: Props
 
         {/* Feedback */}
         <div className="flex flex-col gap-2">
-          <label className="text-[10px] font-black uppercase tracking-widest" style={{ color: "var(--cd-text-muted)" }}>
+          <label className="text-[11px] font-semibold uppercase tracking-wider" style={{ color: "var(--cd-text-muted)" }}>
             Feedback <span style={{ color: "var(--cd-danger)" }}>*</span>
           </label>
           <textarea
             value={feedback}
             onChange={(e) => { setFeedback(e.target.value); if (error) setError(""); }}
             rows={4} placeholder={decision === "approved" ? "Great work! Explain what they did well…" : "Explain what needs to be improved…"}
-            className="w-full text-sm rounded-xl border px-4 py-3 outline-none resize-none transition-all shadow-inner"
-            style={{ 
-              backgroundColor: "var(--cd-surface-2)", 
+            className="w-full resize-none rounded-lg border px-4 py-3 text-sm outline-none transition-colors"
+            style={{
+              backgroundColor: "var(--cd-surface-2)",
               color: "var(--cd-text)",
               borderColor: error ? "var(--cd-danger)" : "var(--cd-border)",
               boxShadow: error ? "0 0 0 2px var(--cd-danger-subtle)" : "none"
@@ -190,15 +190,15 @@ export default function ReviewPanel({ submissionId, onSuccess, onCancel }: Props
         </div>
 
         {/* Actions */}
-        <div className="flex items-center justify-end gap-3 pt-3 border-t" style={{ borderColor: "var(--cd-border)" }}>
+        <div className="flex items-center justify-end gap-3 border-t pt-3" style={{ borderColor: "var(--cd-border-subtle)" }}>
           <button onClick={onCancel} disabled={isPending}
-            className="px-5 py-2.5 rounded-xl border text-sm font-bold transition-all hover:bg-[var(--cd-hover)] disabled:opacity-40"
+            className="h-9 rounded-lg border px-4 text-sm font-medium transition-colors hover:bg-[var(--cd-hover)] disabled:opacity-40"
             style={{ color: "var(--cd-text-2)", borderColor: "var(--cd-border)" }}>
             Cancel
           </button>
           <button onClick={handleSubmit} disabled={isPending}
-            className={`flex items-center gap-2 px-6 py-2.5 rounded-xl text-sm font-black text-white transition-all disabled:opacity-60 active:scale-95 shadow-lg
-              ${decision === "approved" ? "bg-[var(--cd-success)] shadow-[var(--cd-success-subtle)]" : "bg-[var(--cd-danger)] shadow-[var(--cd-danger-subtle)]"}`}>
+            className={`flex h-9 items-center gap-2 rounded-lg px-5 text-sm font-semibold text-white transition-colors disabled:opacity-60
+              ${decision === "approved" ? "bg-[var(--cd-success)]" : "bg-[var(--cd-danger)]"}`}>
             {isPending && <Loader2 size={14} className="animate-spin" />}
             {decision === "approved" ? "Approve" : "Reject"} Submission
           </button>
@@ -206,4 +206,4 @@ export default function ReviewPanel({ submissionId, onSuccess, onCancel }: Props
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/features/Tasks/v1/components/submission/SubmissionCard.tsx b/src/features/Tasks/v1/components/submission/SubmissionCard.tsx
index b3c2743..a8305c6 100644
--- a/src/features/Tasks/v1/components/submission/SubmissionCard.tsx
+++ b/src/features/Tasks/v1/components/submission/SubmissionCard.tsx
@@ -19,39 +19,39 @@ export default function SubmissionCard({ submission, onReview }: Props) {
   return (
     <div
       className={`
-        flex flex-col gap-4 p-5 rounded-2xl border transition-all duration-300
+        flex flex-col gap-4 rounded-xl border p-4 transition-colors duration-200 sm:p-5
         ${review?.decision === "approved"
-          ? "border-[var(--cd-success)] bg-[var(--cd-success-subtle)]"
+          ? "border-[var(--cd-success-subtle)] bg-[var(--cd-success-subtle)]"
           : review?.decision === "rejected"
-          ? "border-[var(--cd-danger)] bg-[var(--cd-danger-subtle)]"
-          : "bg-[var(--cd-surface)] border-[var(--cd-border)] hover:border-[var(--cd-primary)] hover:shadow-md"}
+          ? "border-[var(--cd-danger-subtle)] bg-[var(--cd-danger-subtle)]"
+          : "bg-[var(--cd-surface)] border-[var(--cd-border-subtle)] hover:bg-[var(--cd-hover)]"}
       `}
     >
       {/* ── Member row ───────────────────────────────────────────────────────── */}
       <div className="flex items-center justify-between gap-3">
         <div className="flex items-center gap-3 min-w-0">
-          <Avatar name={member.name} src={member.avatar} role={member.role} size="md" showTooltip ring ringColor="ring-[var(--cd-surface)]" />
+          <Avatar name={member.name} src={member.avatar} role={member.role} size="md" showTooltip={false} />
           <div className="min-w-0">
-            <p className="text-sm font-bold truncate" style={{ color: "var(--cd-text)" }}>{member.name}</p>
+            <p className="truncate text-sm font-semibold" style={{ color: "var(--cd-text)" }}>{member.name}</p>
             <p className="text-xs truncate" style={{ color: "var(--cd-text-muted)" }}>{member.role}</p>
           </div>
         </div>
 
         <div className="flex items-center gap-2 shrink-0">
           {/* Timestamp */}
-          <span className="flex items-center gap-1 text-[10px]" style={{ color: "var(--cd-text-muted)" }}>
+          <span className="flex items-center gap-1 text-xs" style={{ color: "var(--cd-text-muted)" }}>
             <Clock size={10} />
             {formatDistanceToNow(parseISO(submission.submittedAt), { addSuffix: true })}
           </span>
 
           {/* Review status chip */}
           {reviewCfg ? (
-            <span className={`flex items-center gap-1 text-[10px] font-bold px-2.5 py-1 rounded-full border ${reviewCfg.bg} ${reviewCfg.text} ${reviewCfg.border}`}>
+            <span className={`flex items-center gap-1 rounded-md border px-2 py-1 text-[11px] font-medium ${reviewCfg.bg} ${reviewCfg.text} ${reviewCfg.border}`}>
               {review!.decision === "approved" ? <CheckCircle2 size={10} /> : <XCircle size={10} />}
               {reviewCfg.label}
             </span>
           ) : (
-            <span className="text-[10px] font-bold px-2.5 py-1 rounded-full border bg-[var(--cd-warning-subtle)] text-[var(--cd-warning)] border-[var(--cd-warning)]">
+            <span className="rounded-md border px-2 py-1 text-[11px] font-medium bg-[var(--cd-warning-subtle)] text-[var(--cd-warning)] border-[var(--cd-warning-subtle)]">
               Pending Review
             </span>
           )}
@@ -66,7 +66,7 @@ export default function SubmissionCard({ submission, onReview }: Props) {
             target="_blank"
             rel="noopener noreferrer"
             onClick={(e) => e.stopPropagation()}
-            className="flex items-center gap-2 px-3 py-2.5 rounded-xl bg-[var(--cd-surface-3)] hover:bg-[var(--cd-hover)] border border-[var(--cd-border-subtle)] text-xs font-bold transition-all group/link"
+            className="group/link flex items-center gap-2 rounded-lg border border-[var(--cd-border-subtle)] bg-[var(--cd-surface-2)] px-3 py-2.5 text-sm font-medium transition-colors hover:bg-[var(--cd-hover)]"
             style={{ color: "var(--cd-text)" }}
           >
             <Github size={14} className="text-[var(--cd-text-muted)] group-hover/link:text-[var(--cd-primary)]" />
@@ -80,7 +80,7 @@ export default function SubmissionCard({ submission, onReview }: Props) {
             target="_blank"
             rel="noopener noreferrer"
             onClick={(e) => e.stopPropagation()}
-            className="flex items-center gap-2 px-3 py-2.5 rounded-xl bg-[var(--cd-primary-subtle)] hover:opacity-80 border border-[var(--cd-primary-subtle)] text-xs font-bold transition-all group/link"
+            className="group/link flex items-center gap-2 rounded-lg border border-[var(--cd-primary-subtle)] bg-[var(--cd-primary-subtle)] px-3 py-2.5 text-sm font-medium transition-colors hover:opacity-80"
             style={{ color: "var(--cd-primary-text)" }}
           >
             <FileUp size={14} />
@@ -94,7 +94,7 @@ export default function SubmissionCard({ submission, onReview }: Props) {
             target="_blank"
             rel="noopener noreferrer"
             onClick={(e) => e.stopPropagation()}
-            className="flex items-center gap-2 px-3 py-2.5 rounded-xl bg-[var(--cd-secondary-subtle)] hover:opacity-80 border border-[var(--cd-secondary-subtle)] text-xs font-bold transition-all group/link"
+            className="group/link flex items-center gap-2 rounded-lg border border-[var(--cd-secondary-subtle)] bg-[var(--cd-secondary-subtle)] px-3 py-2.5 text-sm font-medium transition-colors hover:opacity-80"
             style={{ color: "var(--cd-secondary)" }}
           >
             <ExternalLink size={14} />
@@ -106,8 +106,8 @@ export default function SubmissionCard({ submission, onReview }: Props) {
 
       {/* ── Notes ────────────────────────────────────────────────────────────── */}
       {submission.notes && (
-        <div className="p-3 rounded-xl border border-[var(--cd-border-subtle)] bg-[var(--cd-surface-2)]">
-          <p className="text-xs leading-relaxed" style={{ color: "var(--cd-text-2)" }}>
+        <div className="rounded-lg border border-[var(--cd-border-subtle)] bg-[var(--cd-surface-2)] p-3">
+          <p className="text-sm leading-relaxed" style={{ color: "var(--cd-text-2)" }}>
             {submission.notes}
           </p>
         </div>
@@ -115,20 +115,20 @@ export default function SubmissionCard({ submission, onReview }: Props) {
 
       {/* ── Review details (Existing) ────────────────────────────────────────── */}
       {review && !isReviewing && (
-        <div className={`rounded-xl p-4 border flex flex-col gap-2.5 ${reviewCfg!.bg} ${reviewCfg!.border}`}>
+        <div className={`flex flex-col gap-2.5 rounded-lg border p-4 ${reviewCfg!.bg} ${reviewCfg!.border}`}>
           <div className="flex items-center justify-between">
-            <span className={`text-xs font-bold ${reviewCfg!.text}`}>
-              {review.decision === "approved" ? "✓ Approved" : "✗ Rejected"} by {review.reviewedBy}
+            <span className={`text-sm font-semibold ${reviewCfg!.text}`}>
+              {review.decision === "approved" ? "Approved" : "Rejected"} by {review.reviewedBy}
             </span>
             {review.score !== undefined && (
-              <span className="flex items-center gap-1 text-xs font-bold bg-[var(--cd-surface)] px-2 py-1 rounded-full border border-[var(--cd-warning)]" style={{ color: "var(--cd-warning)" }}>
+              <span className="flex items-center gap-1 rounded-md border border-[var(--cd-warning-subtle)] bg-[var(--cd-surface)] px-2 py-1 text-xs font-medium" style={{ color: "var(--cd-warning)" }}>
                 <Star size={11} fill="currentColor" />
                 {review.score}/100
               </span>
             )}
           </div>
           {review.feedback && (
-            <p className="text-xs leading-relaxed opacity-90" style={{ color: "var(--cd-text)" }}>{review.feedback}</p>
+            <p className="text-sm leading-relaxed opacity-90" style={{ color: "var(--cd-text)" }}>{review.feedback}</p>
           )}
         </div>
       )}
@@ -153,11 +153,11 @@ export default function SubmissionCard({ submission, onReview }: Props) {
       {!review && !isReviewing && (
         <button
           onClick={() => setIsReviewing(true)}
-          className="cd-btn cd-btn-primary self-start text-xs font-bold py-2 shadow-sm shadow-[var(--cd-primary-subtle)] active:scale-95 transition-all"
+          className="cd-btn cd-btn-primary h-9 self-start rounded-lg px-4 text-sm font-medium shadow-none"
         >
           Review Submission
         </button>
       )}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/features/Tasks/v1/components/submission/SubmissionList.tsx b/src/features/Tasks/v1/components/submission/SubmissionList.tsx
index 35314e9..0cd5a46 100644
--- a/src/features/Tasks/v1/components/submission/SubmissionList.tsx
+++ b/src/features/Tasks/v1/components/submission/SubmissionList.tsx
@@ -19,12 +19,6 @@ const SORT_OPTIONS: { value: SortKey; label: string; dot: string }[] = [
   { value: "pending", label: "Pending first", dot: "bg-amber-400"   },
 ];
 
-const SORT_ACTIVE_COLOR: Record<SortKey, string> = {
-  newest:  "bg-indigo-600 text-white",
-  oldest:  "bg-gray-600 text-white",
-  pending: "bg-amber-500 text-white",
-};
-
 // ─── Reusable portal dropdown (same pattern as TaskFilters) ───────────────────
 function SortDropdown({ sort, onChange }: { sort: SortKey; onChange: (v: SortKey) => void }) {
   const [open, setOpen] = useState(false);
@@ -63,8 +57,12 @@ function SortDropdown({ sort, onChange }: { sort: SortKey; onChange: (v: SortKey
       <button
         ref={btnRef}
         onClick={() => setOpen(o => !o)}
-        className={`flex items-center gap-1.5 pl-3 pr-2.5 py-1.5 rounded-full text-xs font-semibold border transition-all select-none
-          ${SORT_ACTIVE_COLOR[sort]} border-transparent shadow-sm`}
+        className="flex h-8 items-center gap-1.5 rounded-lg border px-2.5 text-xs font-medium transition-colors select-none hover:bg-[var(--cd-hover)]"
+        style={{
+          backgroundColor: "var(--cd-surface-2)",
+          borderColor: "var(--cd-border)",
+          color: "var(--cd-text-2)",
+        }}
       >
         <ArrowUpDown size={11} className="opacity-80" />
         {current.label}
@@ -72,14 +70,22 @@ function SortDropdown({ sort, onChange }: { sort: SortKey; onChange: (v: SortKey
       </button>
 
       {open && createPortal(
-        <div ref={panelRef} style={{ ...style, backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border)" }}
-          className="rounded-xl border shadow-2xl py-1 overflow-hidden min-w-[160px]">
+        <div
+          ref={panelRef}
+          style={{
+            ...style,
+            backgroundColor: "var(--cd-surface)",
+            borderColor: "var(--cd-border)",
+            boxShadow: "0 18px 48px -24px var(--cd-shadow-md)",
+          }}
+          className="min-w-[160px] overflow-hidden rounded-lg border py-1"
+        >
           {SORT_OPTIONS.map(opt => (
             <button
               key={opt.value}
               onMouseDown={(e) => { e.preventDefault(); onChange(opt.value); setOpen(false); }}
               className={`w-full flex items-center gap-2.5 px-3.5 py-2.5 text-xs font-semibold text-left transition-colors
-                ${opt.value === sort ? "bg-[var(--cd-hover)] text-[var(--cd-primary)]" : "text-[var(--cd-text-muted)] hover:bg-[var(--cd-hover)] hover:text-[var(--cd-text)]"}`}
+                ${opt.value === sort ? "bg-[var(--cd-hover)] text-[var(--cd-primary-text)]" : "text-[var(--cd-text-muted)] hover:bg-[var(--cd-hover)] hover:text-[var(--cd-text)]"}`}
             >
               <span className={`w-2 h-2 rounded-full shrink-0 ${opt.dot}`} />
               <span className="flex-1">{opt.label}</span>
@@ -99,10 +105,10 @@ function Toggle({ value, onChange, label }: { value: boolean; onChange: (v: bool
     <label className="flex items-center gap-2 cursor-pointer select-none group">
       <div
         onClick={() => onChange(!value)}
-        className="relative w-9 h-5 rounded-full transition-colors duration-200"
+        className="relative h-5 w-9 rounded-full transition-colors duration-200"
         style={{ backgroundColor: value ? "var(--cd-primary)" : "var(--cd-surface-3)" }}
       >
-        <span className="absolute top-0.5 w-4 h-4 bg-white rounded-full shadow transition-transform duration-200" style={{ transform: value ? "translateX(16px)" : "translateX(2px)" }} />
+        <span className="absolute top-0.5 h-4 w-4 rounded-full bg-white shadow transition-transform duration-200" style={{ transform: value ? "translateX(16px)" : "translateX(2px)" }} />
       </div>
       <span className="text-xs font-semibold transition-colors" style={{ color: value ? "var(--cd-primary-text)" : "var(--cd-text-muted)" }}>
         {label}
@@ -129,11 +135,11 @@ export default function SubmissionList({ submissions, isLoading, onReview }: Pro
   return (
     <div className="flex flex-col gap-4">
       {/* ── Header bar ──────────────────────────────────────────────────────── */}
-      <div className="flex items-center justify-between gap-3 flex-wrap">
+      <div className="flex flex-wrap items-center justify-between gap-3">
         {/* Title + count */}
         <div className="flex items-center gap-2">
-          <h3 className="text-sm font-bold" style={{ color: "var(--cd-text)" }}>Submissions</h3>
-          <span className="px-2 py-0.5 rounded-full text-[11px] font-bold"
+          <h3 className="text-sm font-semibold" style={{ color: "var(--cd-text)" }}>Submissions</h3>
+          <span className="rounded-md px-1.5 py-0.5 text-[11px] font-medium"
             style={{ 
               backgroundColor: submissions.length > 0 ? "var(--cd-primary-subtle)" : "var(--cd-surface-2)",
               color: submissions.length > 0 ? "var(--cd-primary-text)" : "var(--cd-text-muted)"
@@ -141,7 +147,7 @@ export default function SubmissionList({ submissions, isLoading, onReview }: Pro
             {submissions.length}
           </span>
           {submissions.filter(s => !s.review).length > 0 && (
-            <span className="px-2 py-0.5 rounded-full text-[11px] font-bold border"
+            <span className="rounded-md border px-1.5 py-0.5 text-[11px] font-medium"
               style={{
                 backgroundColor: "var(--cd-warning-subtle)",
                 color: "var(--cd-warning)",
@@ -181,4 +187,4 @@ export default function SubmissionList({ submissions, isLoading, onReview }: Pro
       )}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/features/Tasks/v1/components/task/TaskCardList.tsx b/src/features/Tasks/v1/components/task/TaskCardList.tsx
index 17116b0..e41926c 100644
--- a/src/features/Tasks/v1/components/task/TaskCardList.tsx
+++ b/src/features/Tasks/v1/components/task/TaskCardList.tsx
@@ -2,7 +2,7 @@ import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import {
   Plus, Eye, Pencil, Trash2, SearchX,
-  Github, FileUp, Layers, ChevronLeft, ChevronRight,
+  Github, FileUp, Layers, Link, ChevronLeft, ChevronRight,
 } from "lucide-react";
 import { formatDistanceToNow, isPast, parseISO } from "date-fns";
 import { AvatarGroup } from "../common/Avatar";
@@ -25,6 +25,8 @@ interface Props {
 const SUB_ICON: Record<string, React.ReactNode> = {
   file:   <FileUp size={11} />,
   github: <Github size={11} />,
+  link:   <Link size={11} />,
+  all:    <Layers size={11} />,
   both:   <Layers size={11} />,
 };
 
@@ -84,7 +86,7 @@ export default function TaskCardList({
   return (
     <div className="flex flex-col">
       {/* ── Card list ────────────────────────────────────── */}
-      <div className="flex flex-col gap-3 p-4">
+      <div className="flex flex-col gap-3">
         {paginated.map((task) => {
           const subCfg     = SUBMISSION_STATUS_CONFIG[task.submissionStatus];
           const priCfg     = PRIORITY_CONFIG[task.priority];
@@ -95,17 +97,17 @@ export default function TaskCardList({
             <div
               key={task.id}
               onClick={() => navigate(`/org/tasks/${task.id}`)}
-              className={`rounded-xl border-l-4 ${priCfg.borderClass} shadow-sm cursor-pointer transition-shadow hover:shadow-md`}
+              className={`cursor-pointer rounded-xl border-l-2 ${priCfg.borderClass} transition-colors hover:bg-[var(--cd-hover)]`}
               style={{
                 backgroundColor: "var(--cd-surface)",
-                border: "1px solid var(--cd-border)",
-                borderLeftWidth: "4px",
+                border: "1px solid var(--cd-border-subtle)",
+                borderLeftWidth: "2px",
                 padding: "1rem",
               }}
             >
               {/* Top row: title + actions */}
-              <div className="flex items-start justify-between gap-2 mb-2">
-                <h3 className="text-sm font-bold leading-snug flex-1" style={{ color: "var(--cd-text)" }}>
+              <div className="mb-3 flex items-start justify-between gap-3">
+                <h3 className="min-w-0 flex-1 text-sm font-semibold leading-5" style={{ color: "var(--cd-text)" }}>
                   {task.title}
                 </h3>
                 <div
@@ -134,19 +136,19 @@ export default function TaskCardList({
               </div>
 
               {/* Description */}
-              <p className="text-xs mb-3 line-clamp-2" style={{ color: "var(--cd-text-muted)" }}>
+              <p className="mb-3 line-clamp-2 text-xs leading-5" style={{ color: "var(--cd-text-muted)" }}>
                 {task.description}
               </p>
 
               {/* Tech tags */}
               {task.technologies && task.technologies.length > 0 && (
-                <div className="flex flex-wrap gap-1 mb-3">
+                <div className="mb-3 flex flex-wrap gap-1.5">
                   {task.technologies.slice(0, 4).map((tech) => (
                     <TechBadge key={tech.id} tech={tech} size="xs" />
                   ))}
                   {task.technologies.length > 4 && (
                     <span
-                      className="text-[10px] font-semibold px-1.5 py-0.5 rounded-md"
+                      className="rounded-md px-1.5 py-0.5 text-[10px] font-medium"
                       style={{ backgroundColor: "var(--cd-surface-2)", color: "var(--cd-text-muted)" }}
                     >
                       +{task.technologies.length - 4}
@@ -156,27 +158,27 @@ export default function TaskCardList({
               )}
 
               {/* Status badges row */}
-              <div className="flex flex-wrap items-center gap-2 mb-3">
+              <div className="mb-4 flex flex-wrap items-center gap-2">
                 <StatusBadge status={task.status} size="sm" />
                 <PriorityBadge priority={task.priority} size="sm" />
                 <span
-                  className={`inline-flex items-center gap-1 text-[10px] font-semibold px-2 py-0.5 rounded-full ${subCfg.bg} ${subCfg.text}`}
+                  className={`inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-[10px] font-medium ${subCfg.bg} ${subCfg.text}`}
                 >
                   {SUB_ICON[task.submissionType]}{subCfg.label}
                 </span>
                 {task.isMandatory && (
-                  <span className="text-[10px] font-semibold text-purple-600 bg-purple-50 px-1.5 py-0.5 rounded-md">
-                    Mandatory
+                  <span className="rounded-md bg-[var(--cd-surface-2)] px-1.5 py-0.5 text-[10px] font-medium text-[var(--cd-text-2)]">
+                    Required
                   </span>
                 )}
               </div>
 
               {/* Bottom: members + deadline + points */}
-              <div className="flex items-center justify-between gap-2">
+              <div className="flex items-center justify-between gap-3 border-t pt-3" style={{ borderColor: "var(--cd-border-subtle)" }}>
                 <AvatarGroup members={task.assignedTo} max={4} size="xs" />
                 <div className="flex items-center gap-3">
                   {task.points !== undefined && (
-                    <span className="text-[10px] text-amber-600 font-bold">★ {task.points} pts</span>
+                    <span className="text-[10px] font-medium" style={{ color: "var(--cd-text-muted)" }}>{task.points} pts</span>
                   )}
                   <span
                     className={`text-[10px] font-semibold ${isOverdue ? "text-red-500" : ""}`}
@@ -194,10 +196,10 @@ export default function TaskCardList({
 
       {/* ── Footer ───────────────────────────────────────── */}
       <div
-        className="sticky bottom-0 border-t px-4 py-3 flex items-center justify-between"
+        className="sticky bottom-0 mt-4 flex items-center justify-between border-t px-1 py-3"
         style={{
-          backgroundColor: "var(--cd-surface)",
-          borderColor: "var(--cd-border)",
+          backgroundColor: "var(--cd-bg)",
+          borderColor: "var(--cd-border-subtle)",
         }}
       >
         <span className="text-xs" style={{ color: "var(--cd-text-muted)" }}>
@@ -209,7 +211,7 @@ export default function TaskCardList({
             <button
               onClick={() => setPage((p) => Math.max(1, p - 1))}
               disabled={page === 1}
-              className="cd-btn cd-btn-secondary p-1 disabled:opacity-40 disabled:cursor-not-allowed"
+              className="cd-btn cd-btn-secondary h-8 w-8 rounded-lg p-0 disabled:opacity-40 disabled:cursor-not-allowed"
             >
               <ChevronLeft size={13} />
             </button>
@@ -219,7 +221,7 @@ export default function TaskCardList({
             <button
               onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
               disabled={page === totalPages}
-              className="cd-btn cd-btn-secondary p-1 disabled:opacity-40 disabled:cursor-not-allowed"
+              className="cd-btn cd-btn-secondary h-8 w-8 rounded-lg p-0 disabled:opacity-40 disabled:cursor-not-allowed"
             >
               <ChevronRight size={13} />
             </button>
@@ -228,7 +230,7 @@ export default function TaskCardList({
 
         <button
           onClick={onCreateTask}
-          className="cd-btn cd-btn-primary flex items-center gap-1.5 text-xs"
+          className="cd-btn cd-btn-primary h-8 rounded-lg px-3 text-xs"
         >
           <Plus size={13} /> Add Task
         </button>
@@ -247,9 +249,9 @@ function ActionBtn({
   color: "indigo" | "gray" | "red";
 }) {
   const hover = {
-    indigo: "hover:bg-indigo-100 hover:text-indigo-700",
-    gray:   "hover:bg-gray-100 hover:text-gray-700",
-    red:    "hover:bg-red-100 hover:text-red-600",
+    indigo: "hover:bg-[var(--cd-primary-subtle)] hover:text-[var(--cd-primary-text)]",
+    gray:   "hover:bg-[var(--cd-hover)] hover:text-[var(--cd-text)]",
+    red:    "hover:bg-[var(--cd-danger-subtle)] hover:text-[var(--cd-danger)]",
   };
   return (
     <button
diff --git a/src/features/Tasks/v1/components/task/TaskFilters.tsx b/src/features/Tasks/v1/components/task/TaskFilters.tsx
index 56b772e..2f89713 100644
--- a/src/features/Tasks/v1/components/task/TaskFilters.tsx
+++ b/src/features/Tasks/v1/components/task/TaskFilters.tsx
@@ -2,7 +2,7 @@ import { useEffect, useRef, useState, useLayoutEffect } from "react";
 import { createPortal } from "react-dom";
 import { Search, X, SlidersHorizontal, ChevronDown, Check, Star } from "lucide-react";
 import { mockMembers } from "../../mock/taskMockData";
-import type { TaskFilters, TaskStatus, TaskPriority } from "../../Task.types";
+import type { Task, TaskFilters, TaskStatus, TaskPriority } from "../../Task.types";
 
 interface Props {
   filters: TaskFilters;
@@ -11,8 +11,8 @@ interface Props {
   filteredCount: number;
 }
 
-const STATUS_DOTS:   Record<string, string> = { all: "bg-gray-400", todo: "bg-gray-500", "in-progress": "bg-indigo-500", completed: "bg-emerald-500" };
-const TIME_DOTS:     Record<string, string> = { all: "bg-gray-400", upcoming: "bg-sky-500", past: "bg-red-500", completed: "bg-emerald-500" };
+const STATUS_DOTS: Record<string, string> = { all: "bg-gray-400", todo: "bg-gray-500", "in-progress": "bg-indigo-500", completed: "bg-emerald-500" };
+const TIME_DOTS: Record<string, string> = { all: "bg-gray-400", upcoming: "bg-sky-500", past: "bg-red-500", completed: "bg-emerald-500" };
 const PRIORITY_DOTS: Record<string, string> = { all: "bg-gray-400", high: "bg-red-500", medium: "bg-amber-400", low: "bg-sky-400" };
 
 const STATUS_STYLES: Record<string, { bg: string; color: string; border: string }> = {
@@ -34,7 +34,7 @@ const PRIORITY_STYLES: Record<string, { bg: string; color: string; border: strin
 // ─── Dropdown state hook ──────────────────────────────────────────────────────
 function useDropdown() {
   const [open, setOpen] = useState(false);
-  const btnRef   = useRef<HTMLButtonElement>(null);
+  const btnRef = useRef<HTMLButtonElement>(null);
   const panelRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
     if (!open) return;
@@ -58,7 +58,7 @@ function DropdownPortal({ btnRef, panelRef, open, children }: {
   const [style, setStyle] = useState<React.CSSProperties>({});
   useLayoutEffect(() => {
     if (!open || !btnRef.current) return;
-    const rect  = btnRef.current.getBoundingClientRect();
+    const rect = btnRef.current.getBoundingClientRect();
     const below = window.innerHeight - rect.bottom;
     if (below < 240 && rect.top > below)
       setStyle({ position: "fixed", left: rect.left, bottom: window.innerHeight - rect.top + 6, zIndex: 9999 });
@@ -73,9 +73,9 @@ function DropdownPortal({ btnRef, panelRef, open, children }: {
         ...style,
         backgroundColor: "var(--cd-surface)",
         border: "1px solid var(--cd-border)",
-        boxShadow: "0 8px 24px var(--cd-shadow-md)",
+        boxShadow: "0 18px 48px -24px var(--cd-shadow-md)",
       }}
-      className="rounded-xl py-1 overflow-hidden min-w-[150px]"
+      className="rounded-lg py-1 overflow-hidden min-w-[150px]"
     >
       {children}
     </div>,
@@ -94,7 +94,7 @@ function PillDropdown<T extends string>({ label: pillLabel, value, options, onCh
 }) {
   const { open, setOpen, btnRef, panelRef } = useDropdown();
   const isActive = value !== options[0].value;
-  const current  = options.find((o) => o.value === value)?.label ?? pillLabel;
+  const current = options.find((o) => o.value === value)?.label ?? pillLabel;
   const activeStyle = styleMap[value] ?? { bg: "var(--cd-primary)", color: "#fff", border: "var(--cd-primary)" };
 
   return (
@@ -102,7 +102,7 @@ function PillDropdown<T extends string>({ label: pillLabel, value, options, onCh
       <button
         ref={btnRef}
         onClick={() => setOpen((o) => !o)}
-        className="flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-semibold border transition-all whitespace-nowrap select-none"
+        className="flex h-8 items-center gap-1.5 rounded-lg border px-2.5 text-xs font-medium transition-all whitespace-nowrap select-none hover:bg-[var(--cd-hover)]"
         style={{
           backgroundColor: isActive ? activeStyle.bg : "var(--cd-surface-2)",
           color: isActive ? activeStyle.color : "var(--cd-text-2)",
@@ -159,7 +159,7 @@ function MemberFilter({ selected, onChange }: { selected: string[]; onChange: (i
       <button
         ref={btnRef}
         onClick={() => setOpen((o) => !o)}
-        className="flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-semibold border transition-all select-none"
+        className="flex h-8 items-center gap-1.5 rounded-lg border px-2.5 text-xs font-medium transition-all select-none hover:bg-[var(--cd-hover)]"
         style={{
           backgroundColor: isActive ? "var(--cd-secondary)" : "var(--cd-surface-2)",
           color: isActive ? "#fff" : "var(--cd-text-2)",
@@ -240,7 +240,7 @@ function SmartSearch({ value, onChange, filteredCount, tasks }: {
   tasks: Task[];
 }) {
   const [focused, setFocused] = useState(false);
-  const { open, setOpen, btnRef, panelRef } = useDropdown();
+  const { open, setOpen, panelRef } = useDropdown();
   const hasResults = !value || filteredCount > 0;
 
   // Suggestions logic
@@ -253,11 +253,11 @@ function SmartSearch({ value, onChange, filteredCount, tasks }: {
       // Popular tech
       const popularTech = ["React", "TypeScript", "Tailwind", "Python", "Figma"];
       popularTech.forEach(t => items.push({ id: `pop-${t}`, label: t, type: "tech" }));
-      
+
       // Common statuses
       items.push({ id: "status-todo", label: "Todo", type: "status" });
       items.push({ id: "status-ip", label: "In Progress", type: "status" });
-      
+
       return items;
     }
 
@@ -296,11 +296,9 @@ function SmartSearch({ value, onChange, filteredCount, tasks }: {
   const showSuggestions = open && suggestions.length > 0;
 
   return (
-    <div className="relative shrink-0" ref={panelRef as any}>
+    <div className="relative shrink-0" ref={panelRef}>
       <div
-        className={`flex items-center gap-1.5 pl-2.5 pr-2 py-1.5 rounded-full border transition-all ${
-          focused || open ? "w-64 sm:w-80" : value ? "w-48 sm:w-64" : "w-44 sm:w-64"
-        }`}
+        className="flex h-9 w-full min-w-[220px] items-center gap-2 rounded-lg border pl-3 pr-2 transition-all sm:min-w-[280px]"
         style={{
           backgroundColor: focused || open ? "var(--cd-surface)" : "var(--cd-surface-2)",
           borderColor: focused || open ? "var(--cd-primary)" : value ? "var(--cd-primary)" : "var(--cd-border)",
@@ -345,8 +343,8 @@ function SmartSearch({ value, onChange, filteredCount, tasks }: {
       </div>
 
       {showSuggestions && (
-        <div 
-          className="absolute z-50 top-full left-0 right-0 mt-2 p-2 rounded-2xl border shadow-2xl overflow-hidden"
+        <div
+          className="absolute z-50 top-full left-0 right-0 mt-2 p-2 rounded-xl border shadow-2xl overflow-hidden"
           style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border)" }}
         >
           <div className="flex items-center justify-between px-2.5 py-1.5 mb-1">
@@ -355,7 +353,7 @@ function SmartSearch({ value, onChange, filteredCount, tasks }: {
             </p>
             {!value && <Star size={10} className="text-[var(--cd-warning)]" />}
           </div>
-          <div 
+          <div
             className="flex flex-col gap-0.5 max-h-[160px] overflow-y-auto pr-1 custom-scrollbar"
             style={{ overscrollBehaviorY: "contain" }}
           >
@@ -363,7 +361,7 @@ function SmartSearch({ value, onChange, filteredCount, tasks }: {
               <button
                 key={s.id}
                 onClick={() => { onChange(s.label); setOpen(false); }}
-                className="w-full flex items-center justify-between gap-3 p-1.5 rounded-xl transition-all hover:bg-[var(--cd-hover)] hover:translate-x-1 text-left group"
+                className="w-full flex items-center justify-between gap-3 rounded-lg p-1.5 text-left transition-colors hover:bg-[var(--cd-hover)] group"
               >
                 <div className="flex items-center gap-2.5 flex-1 min-w-0">
                   <div className="w-1.5 h-1.5 rounded-full opacity-40 group-hover:opacity-100 transition-opacity" style={{ backgroundColor: "var(--cd-primary)" }} />
@@ -406,105 +404,96 @@ export default function TaskFiltersBar({ filters, onChange, totalCount, filtered
   };
 
   return (
-    <div className="border-b" style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border)" }}>
-      {/* Filter pills row */}
-      <div className="flex items-center gap-3 px-6 sm:px-10 py-4 flex-wrap">
-        <SlidersHorizontal size={14} className="shrink-0" style={{ color: "var(--cd-text-muted)" }} />
-
-        <PillDropdown<TaskStatus | "all">
-          label="Status"
-          value={filters.status}
-          dotMap={STATUS_DOTS}
-          styleMap={STATUS_STYLES}
-          onChange={(v) => onChange({ ...filters, status: v })}
-          options={[
-            { value: "all",         label: "Status"      },
-            { value: "todo",        label: "Todo"        },
-            { value: "in-progress", label: "In Progress" },
-            { value: "completed",   label: "Completed"   },
-          ]}
-        />
-
-        <PillDropdown<"all" | "upcoming" | "past" | "completed">
-          label="Time"
-          value={filters.time}
-          dotMap={TIME_DOTS}
-          styleMap={TIME_STYLES}
-          onChange={(v) => onChange({ ...filters, time: v })}
-          options={[
-            { value: "all",       label: "Time"      },
-            { value: "upcoming",  label: "Upcoming"  },
-            { value: "past",      label: "Past"      },
-            { value: "completed", label: "Completed" },
-          ]}
-        />
-
-        <PillDropdown<TaskPriority | "all">
-          label="Priority"
-          value={filters.priority}
-          dotMap={PRIORITY_DOTS}
-          styleMap={PRIORITY_STYLES}
-          onChange={(v) => onChange({ ...filters, priority: v as TaskPriority | "all" })}
-          options={[
-            { value: "all",    label: "Priority" },
-            { value: "high",   label: "High"     },
-            { value: "medium", label: "Medium"   },
-            { value: "low",    label: "Low"      },
-          ]}
-        />
-
-        <MemberFilter selected={filters.members} onChange={(ids) => onChange({ ...filters, members: ids })} />
+    <div
+      className="border-b transition-all duration-300"
+      style={{
+        backgroundColor: "var(--cd-bg)",
+        borderColor: "var(--cd-border-subtle)",
+      }}
+    >
+      <div className="mx-auto flex w-full max-w-[1440px] flex-wrap items-center gap-3 px-5 py-4 sm:px-8 lg:px-10">
+        {/* Simple Icon */}
+        <SlidersHorizontal size={14} style={{ color: "var(--cd-text-muted)" }} className="shrink-0 mr-1" />
+
+        <div className="flex items-center gap-2 flex-wrap">
+          <PillDropdown<TaskStatus | "all">
+            label="Status"
+            value={filters.status}
+            dotMap={STATUS_DOTS}
+            styleMap={STATUS_STYLES}
+            onChange={(v) => onChange({ ...filters, status: v })}
+            options={[
+              { value: "all", label: "Status" },
+              { value: "todo", label: "Todo" },
+              { value: "in-progress", label: "In Progress" },
+              { value: "completed", label: "Completed" },
+            ]}
+          />
+
+          <PillDropdown<"all" | "upcoming" | "past" | "completed">
+            label="Time"
+            value={filters.time}
+            dotMap={TIME_DOTS}
+            styleMap={TIME_STYLES}
+            onChange={(v) => onChange({ ...filters, time: v })}
+            options={[
+              { value: "all", label: "Time" },
+              { value: "upcoming", label: "Upcoming" },
+              { value: "past", label: "Past" },
+              { value: "completed", label: "Completed" },
+            ]}
+          />
+
+          <PillDropdown<TaskPriority | "all">
+            label="Priority"
+            value={filters.priority}
+            dotMap={PRIORITY_DOTS}
+            styleMap={PRIORITY_STYLES}
+            onChange={(v) => onChange({ ...filters, priority: v as TaskPriority | "all" })}
+            options={[
+              { value: "all", label: "Priority" },
+              { value: "high", label: "High" },
+              { value: "medium", label: "Medium" },
+              { value: "low", label: "Low" },
+            ]}
+          />
+
+          <MemberFilter selected={filters.members} onChange={(ids) => onChange({ ...filters, members: ids })} />
+        </div>
 
-        <SmartSearch
-          value={localSearch}
-          onChange={setLocalSearch}
-          filteredCount={filteredCount}
-          totalCount={totalCount}
-          isFiltered={hasActive}
-          tasks={tasks}
-        />
+        <div className="min-w-[220px] flex-1">
+          <SmartSearch
+            value={localSearch}
+            onChange={setLocalSearch}
+            filteredCount={filteredCount}
+            totalCount={totalCount}
+            isFiltered={hasActive}
+            tasks={tasks}
+          />
+        </div>
 
         {hasActive && (
           <button
             onClick={resetAll}
-            className="flex items-center gap-1 px-3 py-1.5 rounded-full text-xs font-semibold shrink-0 transition border"
-            style={{
-              color: "var(--cd-danger)",
-              backgroundColor: "var(--cd-danger-subtle)",
-              borderColor: "var(--cd-danger-subtle)",
-            }}
+            className="flex h-8 items-center gap-1.5 rounded-lg border border-[var(--cd-border)] bg-transparent px-2.5 text-xs font-medium text-[var(--cd-text-2)] shrink-0 transition-colors hover:bg-[var(--cd-hover)] hover:text-[var(--cd-text)]"
           >
-            <X size={11} /> Reset
+            <X size={12} /> Clear
           </button>
         )}
       </div>
 
-      {/* Count context row */}
-      <div className="px-6 sm:px-10 pb-4 flex items-center gap-2 flex-wrap">
-        <span className="text-[11px]" style={{ color: "var(--cd-text-muted)" }}>
-          Showing{" "}
-          <span className="font-semibold" style={{ color: "var(--cd-text)" }}>{filteredCount}</span>
-          {filteredCount !== totalCount && (
-            <>
-              {" "}of{" "}
-              <span className="font-semibold" style={{ color: "var(--cd-text)" }}>{totalCount}</span>
-            </>
-          )}{" "}
-          task{filteredCount !== 1 ? "s" : ""}
-          {hasActive && (
-            <span style={{ color: "var(--cd-primary)" }} className="font-semibold"> · filtered</span>
+      {/* Subtle count info */}
+      <div className="mx-auto w-full max-w-[1440px] px-5 pb-4 sm:px-8 lg:px-10">
+        <p className="text-xs font-medium" style={{ color: "var(--cd-text-muted)" }}>
+          {hasActive ? (
+            <span className="flex items-center gap-1">
+              <span className="w-1 h-1 rounded-full bg-[var(--cd-primary)]" />
+              Showing <span className="text-[var(--cd-text)] font-bold">{filteredCount}</span> filtered results from {totalCount} total tasks
+            </span>
+          ) : (
+            `Total tasks: ${totalCount}`
           )}
-        </span>
-        {localSearch && filteredCount === 0 && (
-          <span className="text-[11px] font-medium" style={{ color: "var(--cd-danger)" }}>
-            No results for "{localSearch}" — try technology name, member, or status
-          </span>
-        )}
-        {localSearch && filteredCount > 0 && (
-          <span className="text-[11px] font-medium" style={{ color: "var(--cd-primary)" }}>
-            Searching across title, description, tech tags, members &amp; more
-          </span>
-        )}
+        </p>
       </div>
     </div>
   );
diff --git a/src/features/Tasks/v1/components/task/TaskForm.tsx b/src/features/Tasks/v1/components/task/TaskForm.tsx
index ff53fa8..4627b08 100644
--- a/src/features/Tasks/v1/components/task/TaskForm.tsx
+++ b/src/features/Tasks/v1/components/task/TaskForm.tsx
@@ -1,7 +1,7 @@
 import { useRef, useState, useEffect } from "react";
 import { useNavigate, useSearchParams } from "react-router-dom";
 import {
-  ChevronDown, ChevronUp, Calendar, Star, Loader2,
+  ChevronDown, Calendar, Star, Loader2,
   AlertCircle, Github, FileUp, Layers, Users, Link, X, Check
 } from "lucide-react";
 import Avatar from "../common/Avatar";
@@ -10,8 +10,7 @@ import { useEvents } from "../../hooks/useEvents";
 import { useCreateTask, useUpdateTask } from "../../hooks/useTasks";
 import { mockMembers } from "../../mock/taskMockData";
 import { TECH_OPTIONS } from "../../constants/tech.constants";
-import { techBadgeStyle } from "../../utils/techBadgeStyle";
-import type { Task, TaskPriority, SubmissionType, TechTag, CreateTaskPayload } from "../../Task.types";
+import type { Task, TaskPriority, SubmissionType, TechTag, CreateTaskPayload, EventOption } from "../../Task.types";
 
 interface Props { mode: "create" | "edit"; task?: Task; }
 
@@ -22,12 +21,12 @@ interface Errors {
 
 function validate(form: Partial<CreateTaskPayload>): Errors {
   const e: Errors = {};
-  if (!form.eventId)             e.eventId     = "Please select an event.";
-  if (!form.title?.trim())       e.title       = "Task title is required.";
+  if (!form.eventId) e.eventId = "Please select an event.";
+  if (!form.title?.trim()) e.title = "Task title is required.";
   else if (form.title.trim().length < 5) e.title = "Title must be at least 5 characters.";
   if (!form.description?.trim()) e.description = "Description is required.";
-  if (!form.assignedTo?.length)  e.assignedTo  = "Assign to at least one member.";
-  if (!form.deadline)            e.deadline    = "Deadline is required.";
+  if (!form.assignedTo?.length) e.assignedTo = "Assign to at least one member.";
+  if (!form.deadline) e.deadline = "Deadline is required.";
   if (form.points !== undefined && form.points < 0) e.points = "Points must be ≥ 0.";
   return e;
 }
@@ -49,22 +48,22 @@ function Field({ label, required, error, children, hint }: {
   );
 }
 
-function Section({ title, icon: Icon, children }: { title: string; icon: any; children: React.ReactNode }) {
+function Section({ title, icon: Icon, children }: { title: string; icon: React.ElementType; children: React.ReactNode }) {
   return (
-    <div className="flex flex-col gap-6 p-6 rounded-2xl border bg-[var(--cd-surface)] border-[var(--cd-border)] shadow-sm hover:shadow-md transition-shadow">
-      <div className="flex items-center gap-3 pb-4 border-b border-[var(--cd-border)]">
-        <div className="w-8 h-8 rounded-lg flex items-center justify-center bg-[var(--cd-primary-subtle)] text-[var(--cd-primary)]">
-          <Icon size={18} />
+    <div className="flex flex-col gap-5 rounded-xl border bg-[var(--cd-surface)] p-5 transition-colors sm:p-6" style={{ borderColor: "var(--cd-border-subtle)" }}>
+      <div className="flex items-center gap-3 border-b pb-4" style={{ borderColor: "var(--cd-border-subtle)" }}>
+        <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-[var(--cd-primary-subtle)] text-[var(--cd-primary)]">
+          <Icon size={17} />
         </div>
-        <h2 className="text-sm font-bold tracking-tight" style={{ color: "var(--cd-text)" }}>{title}</h2>
+        <h2 className="text-sm font-semibold tracking-tight" style={{ color: "var(--cd-text)" }}>{title}</h2>
       </div>
-      <div className="grid grid-cols-1 gap-6">{children}</div>
+      <div className="grid grid-cols-1 gap-5">{children}</div>
     </div>
   );
 }
 
 function inputCls(error?: string) {
-  return `w-full text-sm rounded-xl border px-3.5 py-2.5 outline-none transition-all bg-[var(--cd-surface)] text-[var(--cd-text)] placeholder:text-[var(--cd-text-muted)]
+  return `w-full rounded-lg border bg-[var(--cd-surface)] px-3.5 py-2.5 text-sm text-[var(--cd-text)] outline-none transition-colors placeholder:text-[var(--cd-text-muted)]
     ${error ? "border-[var(--cd-danger)] ring-2 ring-[var(--cd-danger-subtle)]" : "border-[var(--cd-border)] focus:border-[var(--cd-primary)] focus:ring-2 focus:ring-[var(--cd-primary-subtle)]"}`;
 }
 
@@ -81,35 +80,35 @@ function TechPicker({ selected, onChange }: { selected: TechTag[]; onChange: (ta
     }
   };
 
-  const filtered = search.trim() === "" 
-    ? [] 
+  const filtered = search.trim() === ""
+    ? []
     : TECH_OPTIONS.filter((t) =>
-        t.label.toLowerCase().includes(search.toLowerCase()) && !selectedIds.has(t.id)
-      );
+      t.label.toLowerCase().includes(search.toLowerCase()) && !selectedIds.has(t.id)
+    );
 
   return (
     <div className="flex flex-col gap-3">
       {/* Search Input */}
       <div className="relative">
-        <input 
-          value={search} 
+        <input
+          value={search}
           onChange={(e) => setSearch(e.target.value)}
           placeholder="Type to add technologies (e.g. React, Python)..."
-          className="w-full text-sm border rounded-xl px-4 py-2.5 outline-none transition-all bg-[var(--cd-surface)] text-[var(--cd-text)] placeholder:text-[var(--cd-text-muted)] border-[var(--cd-border)] focus:border-[var(--cd-primary)] focus:ring-2 focus:ring-[var(--cd-primary-subtle)]" 
+          className="w-full rounded-lg border border-[var(--cd-border)] bg-[var(--cd-surface)] px-4 py-2.5 text-sm text-[var(--cd-text)] outline-none transition-colors placeholder:text-[var(--cd-text-muted)] focus:border-[var(--cd-primary)] focus:ring-2 focus:ring-[var(--cd-primary-subtle)]"
         />
-        
+
         {/* Suggestions Overlay */}
         {filtered.length > 0 && (
-          <div 
+          <div
             className="absolute z-10 top-full left-0 right-0 mt-1.5 p-2 rounded-xl border shadow-xl flex flex-wrap gap-1.5 max-h-40 overflow-y-auto"
             style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border)" }}
           >
             {filtered.map((tech) => (
-              <button 
-                key={tech.id} 
-                type="button" 
+              <button
+                key={tech.id}
+                type="button"
                 onClick={() => toggle(tech)}
-                className="inline-flex items-center gap-1.5 text-xs font-bold px-3 py-1.5 rounded-lg transition-all border hover:scale-105 active:scale-95"
+                className="inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors hover:bg-[var(--cd-hover)]"
                 style={{
                   backgroundColor: "var(--cd-surface-2)",
                   color: "var(--cd-text-2)",
@@ -124,7 +123,7 @@ function TechPicker({ selected, onChange }: { selected: TechTag[]; onChange: (ta
         )}
 
         {search.trim() !== "" && filtered.length === 0 && (
-          <div 
+          <div
             className="absolute z-10 top-full left-0 right-0 mt-1.5 p-3 rounded-xl border shadow-lg text-xs"
             style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border)", color: "var(--cd-text-muted)" }}
           >
@@ -137,9 +136,9 @@ function TechPicker({ selected, onChange }: { selected: TechTag[]; onChange: (ta
       {selected.length > 0 && (
         <div className="flex flex-wrap gap-2 pt-1">
           {selected.map((tech) => (
-            <span 
-              key={tech.id} 
-              className="inline-flex items-center gap-1 group/tag transition-all hover:scale-105"
+            <span
+              key={tech.id}
+              className="group/tag inline-flex items-center gap-1 transition-colors"
             >
               <TechBadge tech={tech} />
               <button
@@ -164,8 +163,8 @@ function EventPicker({ value, onChange, events, error }: { value: string; onChan
   const containerRef = useRef<HTMLDivElement>(null);
   const selectedEvent = events.find(e => e.id === value);
 
-  const filtered = events.filter(e => 
-    e.name.toLowerCase().includes(search.toLowerCase()) || 
+  const filtered = events.filter(e =>
+    e.name.toLowerCase().includes(search.toLowerCase()) ||
     e.status.toLowerCase().includes(search.toLowerCase())
   );
 
@@ -179,9 +178,9 @@ function EventPicker({ value, onChange, events, error }: { value: string; onChan
 
   return (
     <div className="relative" ref={containerRef}>
-      <div 
+      <div
         onClick={() => setOpen(!open)}
-        className={`w-full flex items-center justify-between gap-2 px-4 py-2.5 rounded-xl border cursor-pointer transition-all bg-[var(--cd-surface)] ${error ? "border-[var(--cd-danger)] ring-2 ring-[var(--cd-danger-subtle)]" : "border-[var(--cd-border)] hover:border-[var(--cd-primary)]"}`}
+        className={`flex w-full cursor-pointer items-center justify-between gap-2 rounded-lg border bg-[var(--cd-surface)] px-4 py-2.5 transition-colors ${error ? "border-[var(--cd-danger)] ring-2 ring-[var(--cd-danger-subtle)]" : "border-[var(--cd-border)] hover:border-[var(--cd-primary)]"}`}
       >
         <div className="flex-1 min-w-0">
           {selectedEvent ? (
@@ -197,7 +196,7 @@ function EventPicker({ value, onChange, events, error }: { value: string; onChan
       </div>
 
       {open && (
-        <div 
+        <div
           className="absolute z-30 top-full left-0 right-0 mt-1.5 p-2 rounded-xl border shadow-2xl flex flex-col gap-1 max-h-72 overflow-hidden"
           style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border)" }}
         >
@@ -249,9 +248,9 @@ function MemberPicker({ selected, onChange }: { selected: string[]; onChange: (i
     }
   };
 
-  const filtered = mockMembers.filter(m => 
-    (m.name.toLowerCase().includes(search.toLowerCase()) || 
-     m.role.toLowerCase().includes(search.toLowerCase()))
+  const filtered = mockMembers.filter(m =>
+  (m.name.toLowerCase().includes(search.toLowerCase()) ||
+    m.role.toLowerCase().includes(search.toLowerCase()))
   );
 
   useEffect(() => {
@@ -265,9 +264,9 @@ function MemberPicker({ selected, onChange }: { selected: string[]; onChange: (i
   return (
     <div className="relative" ref={containerRef}>
       {/* Trigger */}
-      <div 
+      <div
         onClick={() => setOpen(!open)}
-        className="w-full flex items-center justify-between gap-2 px-4 py-2.5 rounded-xl border cursor-pointer transition-all bg-[var(--cd-surface)] border-[var(--cd-border)] hover:border-[var(--cd-primary)]"
+        className="flex w-full cursor-pointer items-center justify-between gap-2 rounded-lg border border-[var(--cd-border)] bg-[var(--cd-surface)] px-4 py-2.5 transition-colors hover:border-[var(--cd-primary)]"
       >
         <div className="flex-1 flex items-center gap-2 min-w-0">
           {selected.length > 0 ? (
@@ -276,7 +275,7 @@ function MemberPicker({ selected, onChange }: { selected: string[]; onChange: (i
                 const m = mockMembers.find(x => x.id === id);
                 return (
                   <div key={id} className="inline-block h-6 w-6 rounded-full ring-2 ring-[var(--cd-surface)]">
-                    <Avatar name={m?.name || ""} src={m?.avatar} size="xs" showTooltip={false} />
+                    <Avatar name={m?.name || ""} src={m?.avatar ?? ""} size="xs" showTooltip={false} />
                   </div>
                 );
               })}
@@ -285,8 +284,8 @@ function MemberPicker({ selected, onChange }: { selected: string[]; onChange: (i
             <Users size={16} className="text-[var(--cd-text-muted)]" />
           )}
           <span className="text-sm font-bold truncate" style={{ color: selected.length > 0 ? "var(--cd-text)" : "var(--cd-text-muted)" }}>
-            {selected.length > 0 
-              ? `${selected.length} member${selected.length !== 1 ? "s" : ""} assigned` 
+            {selected.length > 0
+              ? `${selected.length} member${selected.length !== 1 ? "s" : ""} assigned`
               : "Select members..."}
           </span>
         </div>
@@ -295,7 +294,7 @@ function MemberPicker({ selected, onChange }: { selected: string[]; onChange: (i
 
       {/* Dropdown */}
       {open && (
-        <div 
+        <div
           className="absolute z-30 top-full left-0 right-0 mt-1.5 p-2 rounded-xl border shadow-2xl flex flex-col gap-1 max-h-80 overflow-hidden"
           style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border)" }}
         >
@@ -356,21 +355,20 @@ export default function TaskForm({ mode, task }: Props) {
   const updateTask = useUpdateTask();
   const deadlineInputRef = useRef<HTMLInputElement>(null);
 
-  const [eventId,        setEventId]        = useState(task?.eventId ?? params.get("eventId") ?? "");
-  const [title,          setTitle]          = useState(task?.title ?? "");
-  const [description,    setDescription]    = useState(task?.description ?? "");
-  const [assignedTo,     setAssignedTo]     = useState<string[]>(task?.assignedTo.map((m) => m.id) ?? []);
-  const [deadline,       setDeadline]       = useState(task?.deadline.slice(0, 16) ?? "");
-  const [priority,       setPriority]       = useState<TaskPriority>(task?.priority ?? "medium");
+  const [eventId, setEventId] = useState(task?.eventId ?? params.get("eventId") ?? "");
+  const [title, setTitle] = useState(task?.title ?? "");
+  const [description, setDescription] = useState(task?.description ?? "");
+  const [assignedTo, setAssignedTo] = useState<string[]>(task?.assignedTo.map((m) => m.id) ?? []);
+  const [deadline, setDeadline] = useState(task?.deadline.slice(0, 16) ?? "");
+  const [priority, setPriority] = useState<TaskPriority>(task?.priority ?? "medium");
   const [submissionType, setSubmissionType] = useState<SubmissionType>(task?.submissionType ?? "github");
-  const [isMandatory,    setIsMandatory]    = useState(task?.isMandatory ?? false);
-  const [points,         setPoints]         = useState<number | "">(task?.points ?? "");
-  const [allowLate,      setAllowLate]      = useState(task?.allowLateSubmission ?? false);
-  const [maxSubs,        setMaxSubs]        = useState<number | "">(task?.maxSubmissions ?? "");
-  const [technologies,   setTechnologies]   = useState<TechTag[]>(task?.technologies ?? []);
-  const [showAdvanced,   setShowAdvanced]   = useState(false);
-  const [errors,         setErrors]         = useState<Errors>({});
-  const [touched,        setTouched]        = useState(false);
+  const [isMandatory, setIsMandatory] = useState(task?.isMandatory ?? false);
+  const [points, setPoints] = useState<number | "">(task?.points ?? "");
+  const [allowLate, setAllowLate] = useState(task?.allowLateSubmission ?? false);
+  const [maxSubs, setMaxSubs] = useState<number | "">(task?.maxSubmissions ?? "");
+  const [technologies, setTechnologies] = useState<TechTag[]>(task?.technologies ?? []);
+  const [errors, setErrors] = useState<Errors>({});
+  const [touched, setTouched] = useState(false);
 
   useEffect(() => {
     if (!touched) return;
@@ -416,21 +414,21 @@ export default function TaskForm({ mode, task }: Props) {
   };
 
   const PRIORITY_OPTIONS: { value: TaskPriority; label: string; dot: string }[] = [
-    { value: "high",   label: "High",   dot: "bg-red-500"   },
+    { value: "high", label: "High", dot: "bg-red-500" },
     { value: "medium", label: "Medium", dot: "bg-amber-400" },
-    { value: "low",    label: "Low",    dot: "bg-sky-400"   },
+    { value: "low", label: "Low", dot: "bg-sky-400" },
   ];
 
   const SUB_OPTIONS: { value: SubmissionType; icon: React.ReactNode; label: string }[] = [
-    { value: "github", icon: <Github size={14} />,  label: "GitHub"      },
-    { value: "file",   icon: <FileUp size={14} />,  label: "File Upload" },
-    { value: "link",   icon: <Link size={14} />,    label: "External Link" },
-    { value: "all",    icon: <Layers size={14} />,  label: "Any / All"    },
+    { value: "github", icon: <Github size={14} />, label: "GitHub" },
+    { value: "file", icon: <FileUp size={14} />, label: "File Upload" },
+    { value: "link", icon: <Link size={14} />, label: "External Link" },
+    { value: "all", icon: <Layers size={14} />, label: "Any / All" },
   ];
 
   return (
-    <div className="relative pb-32">
-      <div className="flex flex-col gap-8 max-w-3xl mx-auto p-6">
+    <div className="relative pb-36">
+      <div className="mx-auto flex max-w-3xl flex-col gap-6 p-5 sm:p-6">
         {/* Section 1: General Info */}
         <Section title="General Information" icon={Layers}>
           <Field label="Event Context" required error={errors.eventId} hint="Select the event this task belongs to.">
@@ -448,7 +446,7 @@ export default function TaskForm({ mode, task }: Props) {
           </Field>
 
           <Field label="Core Technologies" hint="Add all tech stacks required for this task.">
-            <div className="p-4 rounded-xl border bg-[var(--cd-surface-2)] border-[var(--cd-border)]">
+            <div className="rounded-lg border bg-[var(--cd-surface-2)] p-4" style={{ borderColor: "var(--cd-border-subtle)" }}>
               <TechPicker selected={technologies} onChange={setTechnologies} />
             </div>
           </Field>
@@ -460,18 +458,18 @@ export default function TaskForm({ mode, task }: Props) {
             <MemberPicker selected={assignedTo} onChange={setAssignedTo} />
           </Field>
 
-          <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-2">
+          <div className="mt-2 grid grid-cols-1 gap-5 sm:grid-cols-2">
             <Field label="Deadline" required error={errors.deadline}>
               <div className="relative group">
-                <input 
+                <input
                   ref={deadlineInputRef}
-                  type="datetime-local" 
-                  value={deadline} 
-                  onChange={(e) => setDeadline(e.target.value)} 
-                  className={inputCls(errors.deadline)} 
+                  type="datetime-local"
+                  value={deadline}
+                  onChange={(e) => setDeadline(e.target.value)}
+                  className={inputCls(errors.deadline)}
                 />
-                <button 
-                  type="button" 
+                <button
+                  type="button"
                   onClick={openDeadlinePicker}
                   className="absolute right-4 top-1/2 -translate-y-1/2 text-[var(--cd-text-muted)] hover:text-[var(--cd-primary)] transition-colors"
                 >
@@ -481,10 +479,10 @@ export default function TaskForm({ mode, task }: Props) {
             </Field>
 
             <Field label="Task Priority">
-              <div className="flex p-1 rounded-xl bg-[var(--cd-surface-2)] border border-[var(--cd-border)]">
+              <div className="flex rounded-lg border bg-[var(--cd-surface-2)] p-1" style={{ borderColor: "var(--cd-border-subtle)" }}>
                 {PRIORITY_OPTIONS.map((opt) => (
                   <button key={opt.value} type="button" onClick={() => setPriority(opt.value)}
-                    className={`flex-1 flex items-center justify-center gap-2 py-2.5 rounded-lg text-xs font-bold transition-all ${priority === opt.value ? "bg-[var(--cd-surface)] shadow-sm scale-[1.02] text-[var(--cd-text)]" : "text-[var(--cd-text-muted)] hover:text-[var(--cd-text)]"}`}>
+                    className={`flex-1 flex items-center justify-center gap-2 rounded-md py-2.5 text-xs font-medium transition-colors ${priority === opt.value ? "bg-[var(--cd-surface)] shadow-sm text-[var(--cd-text)]" : "text-[var(--cd-text-muted)] hover:text-[var(--cd-text)]"}`}>
                     <div className={`w-1.5 h-1.5 rounded-full ${opt.dot}`} />
                     {opt.label}
                   </button>
@@ -496,12 +494,12 @@ export default function TaskForm({ mode, task }: Props) {
 
         {/* Section 3: Rewards & Submission */}
         <Section title="Rewards & Submission" icon={Star}>
-          <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
+          <div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
             <Field label="Submission Type" hint="Format for user submission.">
               <div className="grid grid-cols-2 gap-2">
                 {SUB_OPTIONS.map((opt) => (
                   <button key={opt.value} type="button" onClick={() => setSubmissionType(opt.value)}
-                    className={`flex items-center gap-2 px-3 py-2.5 rounded-xl border transition-all text-[11px] font-bold ${submissionType === opt.value ? "bg-[var(--cd-primary-subtle)] border-[var(--cd-primary)] text-[var(--cd-primary-text)] shadow-sm" : "bg-[var(--cd-surface)] border-[var(--cd-border)] text-[var(--cd-text-muted)] hover:border-[var(--cd-text-muted)]"}`}>
+                    className={`flex items-center gap-2 rounded-lg border px-3 py-2.5 text-[11px] font-medium transition-colors ${submissionType === opt.value ? "bg-[var(--cd-primary-subtle)] border-[var(--cd-primary)] text-[var(--cd-primary-text)]" : "bg-[var(--cd-surface)] border-[var(--cd-border)] text-[var(--cd-text-muted)] hover:border-[var(--cd-text-muted)]"}`}>
                     {opt.icon}
                     {opt.label}
                   </button>
@@ -511,15 +509,15 @@ export default function TaskForm({ mode, task }: Props) {
 
             <Field label="Reward Points" error={errors.points} hint="Points awarded upon completion.">
               <div className="relative">
-                <input type="number" value={points} onChange={(e) => setPoints(e.target.value)}
+                <input type="number" value={points} onChange={(e) => setPoints(e.target.value === "" ? "" : Number(e.target.value))}
                   placeholder="e.g. 100" className={inputCls(errors.points)} />
                 <Star size={16} className="absolute right-4 top-1/2 -translate-y-1/2 text-[var(--cd-warning)] opacity-50" />
               </div>
             </Field>
           </div>
 
-          <div className="grid grid-cols-1 sm:grid-cols-2 gap-8 pt-4">
-            <div className="flex items-center justify-between p-4 rounded-xl border bg-[var(--cd-surface-2)] border-[var(--cd-border)]">
+          <div className="grid grid-cols-1 gap-5 pt-3 sm:grid-cols-2">
+            <div className="flex items-center justify-between rounded-lg border bg-[var(--cd-surface-2)] p-4" style={{ borderColor: "var(--cd-border-subtle)" }}>
               <div>
                 <p className="text-xs font-bold" style={{ color: "var(--cd-text)" }}>Mandatory Task</p>
                 <p className="text-[10px]" style={{ color: "var(--cd-text-muted)" }}>Required to finish event.</p>
@@ -530,7 +528,7 @@ export default function TaskForm({ mode, task }: Props) {
               </button>
             </div>
 
-            <div className="flex items-center justify-between p-4 rounded-xl border bg-[var(--cd-surface-2)] border-[var(--cd-border)]">
+            <div className="flex items-center justify-between rounded-lg border bg-[var(--cd-surface-2)] p-4" style={{ borderColor: "var(--cd-border-subtle)" }}>
               <div>
                 <p className="text-xs font-bold" style={{ color: "var(--cd-text)" }}>Late Submissions</p>
                 <p className="text-[10px]" style={{ color: "var(--cd-text-muted)" }}>Accept after deadline.</p>
@@ -543,26 +541,27 @@ export default function TaskForm({ mode, task }: Props) {
           </div>
 
           <Field label="Max Submissions" hint="Leave empty for unlimited.">
-            <input type="number" value={maxSubs} onChange={(e) => setMaxSubs(e.target.value)}
+            <input type="number" value={maxSubs} onChange={(e) => setMaxSubs(e.target.value === "" ? "" : Number(e.target.value))}
               placeholder="Unlimited" className={inputCls()} />
           </Field>
         </Section>
       </div>
 
       {/* Floating Action Bar */}
-      <div className="fixed bottom-0 left-0 right-0 p-4 sm:p-6 z-40 bg-gradient-to-t from-[var(--cd-bg)] via-[var(--cd-bg)] to-transparent pointer-events-none lg:pl-85 transition-all">
-        <div className="max-w-3xl mx-auto flex items-center justify-between p-4 rounded-2xl border shadow-2xl pointer-events-auto backdrop-blur-md bg-[var(--cd-surface)]/90 border-[var(--cd-border)]">
+      <div className="pointer-events-none fixed bottom-0 left-0 right-0 z-40 bg-gradient-to-t from-[var(--cd-bg)] via-[var(--cd-bg)] to-transparent p-4 transition-all sm:p-6 lg:pl-85">
+        <div className="pointer-events-auto mx-auto flex max-w-3xl items-center justify-between rounded-xl border bg-[var(--cd-surface)]/95 p-3 shadow-2xl backdrop-blur-md" style={{ borderColor: "var(--cd-border-subtle)" }}>
           <div className="hidden sm:block">
             <p className="text-xs font-bold" style={{ color: "var(--cd-text)" }}>{mode === "create" ? "New Task" : "Edit Mode"}</p>
             <p className="text-[10px] truncate max-w-[200px]" style={{ color: "var(--cd-text-muted)" }}>{title || "Untitled Task"}</p>
           </div>
           <div className="flex items-center gap-3 w-full sm:w-auto">
             <button type="button" onClick={() => navigate(-1)}
-              className="flex-1 sm:flex-none px-6 py-2.5 rounded-xl text-sm font-bold border transition-all bg-[var(--cd-surface)] border-[var(--cd-border)] text-[var(--cd-text-2)] hover:bg-[var(--cd-hover)]">
+              className="h-10 flex-1 rounded-lg border bg-[var(--cd-surface)] px-5 text-sm font-medium text-[var(--cd-text-2)] transition-colors hover:bg-[var(--cd-hover)] sm:flex-none"
+              style={{ borderColor: "var(--cd-border)" }}>
               Cancel
             </button>
             <button type="button" onClick={handleSubmit} disabled={isLoading}
-              className="flex-1 sm:flex-none px-8 py-2.5 rounded-xl text-sm font-bold text-white shadow-lg transition-all active:scale-95 disabled:opacity-50 flex items-center justify-center gap-2 bg-[var(--cd-primary)] hover:brightness-110">
+              className="flex h-10 flex-1 items-center justify-center gap-2 rounded-lg bg-[var(--cd-primary)] px-7 text-sm font-semibold text-white transition-colors hover:brightness-110 disabled:opacity-50 sm:flex-none">
               {isLoading ? <Loader2 size={16} className="animate-spin" /> : (mode === "create" ? "Create Task" : "Save Changes")}
             </button>
           </div>
diff --git a/src/features/Tasks/v1/components/task/TaskHeader.tsx b/src/features/Tasks/v1/components/task/TaskHeader.tsx
index 515b837..3a01bed 100644
--- a/src/features/Tasks/v1/components/task/TaskHeader.tsx
+++ b/src/features/Tasks/v1/components/task/TaskHeader.tsx
@@ -1,7 +1,6 @@
 import { useNavigate } from "react-router-dom";
-import { Plus, ListTodo, Zap, CheckCircle2, Clock3 } from "lucide-react";
+import { Plus, ListTodo } from "lucide-react";
 import { useEvents } from "../../hooks/useEvents";
-import { EVENT_TYPE_CONFIG, EVENT_STATUS_CONFIG } from "../../constants/task.constants";
 import type { Task } from "../../Task.types";
 
 interface Props {
@@ -12,23 +11,20 @@ interface Props {
 }
 
 const TABS = [
-  { key: "all",         label: "All Tasks" },
-  { key: "todo",        label: "To Do" },
+  { key: "all", label: "All Tasks" },
+  { key: "todo", label: "To Do" },
   { key: "in-progress", label: "In Progress" },
-  { key: "completed",   label: "Completed" },
+  { key: "completed", label: "Completed" },
 ];
 
 export default function TaskHeader({ selectedEventId, tasks, activeTab, onTabChange }: Props) {
   const navigate = useNavigate();
   const { data: events = [] } = useEvents();
-  const event     = events.find((e) => e.id === selectedEventId) ?? null;
-
-  const todo        = tasks.filter((t) => t.status === "todo").length;
-  const inProgress  = tasks.filter((t) => t.status === "in-progress").length;
-  const completed   = tasks.filter((t) => t.status === "completed").length;
-  const typeCfg     = event ? EVENT_TYPE_CONFIG[event.type]    : null;
-  const statusCfg   = event ? EVENT_STATUS_CONFIG[event.status] : null;
+  const event = events.find((e) => e.id === selectedEventId) ?? null;
 
+  const todo = tasks.filter((t) => t.status === "todo").length;
+  const inProgress = tasks.filter((t) => t.status === "in-progress").length;
+  const completed = tasks.filter((t) => t.status === "completed").length;
   const tabCount: Record<string, number> = {
     all: tasks.length,
     todo,
@@ -38,156 +34,90 @@ export default function TaskHeader({ selectedEventId, tasks, activeTab, onTabCha
 
   return (
     <div
-      className="border-b flex flex-col font-bold justify-between"
-      style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border)" }}
+      className="border-b flex flex-col justify-between transition-all duration-300"
+      style={{
+        backgroundColor: "var(--cd-surface)",
+        borderColor: "var(--cd-border-subtle)",
+      }}
     >
       {/* ── Top row ─────────────────────────────────────────── */}
-      <div className="pt-8 sm:pt-10 flex w-full justify-between items-start px-6 sm:px-10">
-        {/* Left: title + subtitle */}
-        <div className="flex flex-col gap-1">
-          <div className="flex items-center gap-2.5">
-            <div
-              className="w-8 h-8 rounded-xl flex items-center justify-center shrink-0"
-              style={{ backgroundColor: "var(--cd-primary)", color: "#fff" }}
-            >
-              <ListTodo size={16} />
-            </div>
-            <h1
-              className="text-lg sm:text-2xl font-bold"
-              style={{ color: "var(--cd-text)" }}
-            >
+      <div className="mx-auto flex w-full max-w-[1440px] items-center justify-between gap-4 px-5 py-5 sm:px-8 lg:px-10">
+        <div className="flex min-w-0 items-center gap-3">
+          <div
+            className="w-9 h-9 rounded-lg flex items-center justify-center shrink-0"
+            style={{
+              backgroundColor: "var(--cd-primary-subtle)",
+              color: "var(--cd-primary-text)"
+            }}
+          >
+            <ListTodo size={18} strokeWidth={2.25} />
+          </div>
+          <div className="min-w-0">
+            <h1 className="truncate text-xl font-semibold leading-tight tracking-tight" style={{ color: "var(--cd-text)" }}>
               Task Management
             </h1>
-          </div>
-
-          {event ? (
-            <div className="flex items-center gap-2 mt-1 ml-0.5 flex-wrap">
-              <p className="text-sm font-normal" style={{ color: "var(--cd-text-2)" }}>
-                Tasks for{" "}
-                <span className="font-semibold" style={{ color: "var(--cd-primary)" }}>
-                  {event.name}
-                </span>
-              </p>
-              {typeCfg && (
-                <span
-                  className={`inline-flex items-center gap-1 text-[11px] font-semibold px-2 py-0.5 rounded-full ${typeCfg.bg} ${typeCfg.text}`}
-                >
-                  <span className={`w-1.5 h-1.5 rounded-full ${typeCfg.dot}`} />
-                  {typeCfg.label}
-                </span>
-              )}
-              {statusCfg && (
-                <span
-                  className={`inline-flex items-center gap-1 text-[11px] font-semibold px-2 py-0.5 rounded-full ${statusCfg.bg} ${statusCfg.text}`}
-                >
-                  {statusCfg.pulse ? (
-                    <span className="relative flex h-1.5 w-1.5">
-                      <span className={`animate-ping absolute inline-flex h-full w-full rounded-full opacity-75 ${statusCfg.dot}`} />
-                      <span className={`relative inline-flex rounded-full h-1.5 w-1.5 ${statusCfg.dot}`} />
-                    </span>
-                  ) : (
-                    <span className={`w-1.5 h-1.5 rounded-full ${statusCfg.dot}`} />
-                  )}
-                  {event.status}
-                </span>
-              )}
-            </div>
-          ) : (
-            <p className="text-sm font-normal mt-1" style={{ color: "var(--cd-text-2)" }}>
-              Manage all tasks for your events in one place.
+            <p className="mt-1 truncate text-sm" style={{ color: "var(--cd-text-2)" }}>
+              {event ? `Managing tasks for ${event.name}` : "Centralized control for all event tasks"}
             </p>
-          )}
+          </div>
         </div>
 
         {/* Right: New Task button */}
-        <div className="flex items-center">
-          <button
-            onClick={() =>
-              navigate(
-                selectedEventId
-                  ? `/org/tasks/create?eventId=${selectedEventId}`
-                  : "/org/tasks/create"
-              )
-            }
-            disabled={!selectedEventId}
-            className="cd-btn cd-btn-primary flex items-center gap-2 disabled:opacity-40 disabled:cursor-not-allowed"
-          >
-            <Plus size={16} />
-            <span className="hidden sm:inline font-semibold text-sm">New Task</span>
-          </button>
-        </div>
+        <button
+          onClick={() =>
+            navigate(
+              selectedEventId
+                ? `/org/tasks/create?eventId=${selectedEventId}`
+                : "/org/tasks/create"
+            )
+          }
+          disabled={!selectedEventId}
+          className="cd-btn cd-btn-primary h-9 rounded-lg px-3.5 text-sm shadow-none transition-all disabled:opacity-40 sm:px-4"
+        >
+          <Plus size={15} strokeWidth={2.5} />
+          <span className="hidden font-medium sm:inline">New Task</span>
+        </button>
       </div>
 
-      {/* ── Stats row ───────────────────────────────────────── */}
-      {event && (
-        <div className="flex items-center gap-3 px-6 sm:px-10 mt-5 overflow-x-auto scrollbar-hide">
-          <StatChip icon={<ListTodo size={12} />}    label="Total"       value={tasks.length} />
-          <StatChip icon={<Clock3 size={12} />}      label="Todo"        value={todo}         accent="amber"   />
-          <StatChip icon={<Zap size={12} />}         label="In Progress" value={inProgress}   accent="indigo"  />
-          <StatChip icon={<CheckCircle2 size={12} />} label="Done"       value={completed}    accent="emerald" />
+      {/* ── Tabs Row ─────────────────────────────────── */}
+      <div className="border-t" style={{ borderColor: "var(--cd-border-subtle)" }}>
+        <div className="mx-auto flex w-full max-w-[1440px] items-center overflow-x-auto px-5 sm:px-8 lg:px-10">
+          {TABS.map((tab) => {
+            const isActive = activeTab === tab.key;
+            return (
+              <button
+                key={tab.key}
+                onClick={() => onTabChange(tab.key)}
+                className="group relative flex items-center gap-2 px-3.5 py-3 text-sm font-medium transition-all duration-200 whitespace-nowrap"
+                style={{
+                  color: isActive ? "var(--cd-text)" : "var(--cd-text-muted)",
+                }}
+              >
+                {tab.label}
+                {event && (
+                  <span
+                    className="min-w-5 rounded-md px-1.5 py-0.5 text-center text-[11px] font-medium transition-all duration-200"
+                    style={{
+                      backgroundColor: isActive ? "var(--cd-primary-subtle)" : "var(--cd-surface-2)",
+                      color: isActive ? "var(--cd-primary-text)" : "var(--cd-text-muted)",
+                    }}
+                  >
+                    {tabCount[tab.key]}
+                  </span>
+                )}
+                {/* Active indicator */}
+                <div
+                  className={`absolute bottom-0 left-0 right-0 h-0.5 rounded-t-full transition-all duration-300 ${isActive ? "opacity-100 scale-x-100" : "opacity-0 scale-x-0"}`}
+                  style={{ backgroundColor: "var(--cd-primary)" }}
+                />
+              </button>
+            );
+          })}
         </div>
-      )}
-
-      {/* ── Tab navigation (like Events page) ───────────────── */}
-      <div className="flex space-x-1 mt-6 sm:mt-10 px-6 sm:px-10">
-        {TABS.map((tab) => {
-          const isActive = activeTab === tab.key;
-          return (
-            <button
-              key={tab.key}
-              onClick={() => onTabChange(tab.key)}
-              className="flex items-center gap-1.5 px-4 py-2 border-b-2 text-sm font-medium transition-all duration-200 whitespace-nowrap"
-              style={{
-                color: isActive ? "var(--cd-primary)" : "var(--cd-text-2)",
-                borderColor: isActive ? "var(--cd-primary)" : "transparent",
-              }}
-            >
-              {tab.label}
-              {event && (
-                <span
-                  className="text-[10px] font-bold px-1.5 py-0.5 rounded-full"
-                  style={{
-                    backgroundColor: isActive ? "var(--cd-primary-subtle)" : "var(--cd-surface-2)",
-                    color: isActive ? "var(--cd-primary-text)" : "var(--cd-text-muted)",
-                  }}
-                >
-                  {tabCount[tab.key]}
-                </span>
-              )}
-            </button>
-          );
-        })}
       </div>
+
     </div>
-  );
-}
 
-// ── Small stat chip ───────────────────────────────────────────────────────────
-function StatChip({
-  icon,
-  label,
-  value,
-  accent,
-}: {
-  icon: React.ReactNode;
-  label: string;
-  value: number;
-  accent?: "indigo" | "emerald" | "amber";
-}) {
-  const accentMap = {
-    indigo:  { bg: "var(--cd-primary-subtle)",  color: "var(--cd-primary-text)" },
-    emerald: { bg: "rgba(74,222,128,0.12)",      color: "var(--cd-success)"     },
-    amber:   { bg: "rgba(250,204,21,0.12)",      color: "var(--cd-warning)"     },
-  };
-  const style = accent ? accentMap[accent] : { bg: "var(--cd-surface-2)", color: "var(--cd-text-2)" };
-  return (
-    <span
-      className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-[11px] font-semibold shrink-0"
-      style={{ backgroundColor: style.bg, color: style.color }}
-    >
-      {icon}
-      <span className="font-bold">{value}</span>
-      <span className="font-medium opacity-80 hidden sm:inline">{label}</span>
-    </span>
+
   );
-}
\ No newline at end of file
+}
diff --git a/src/features/Tasks/v1/components/task/TaskRow.tsx b/src/features/Tasks/v1/components/task/TaskRow.tsx
index ce75ad9..a69a377 100644
--- a/src/features/Tasks/v1/components/task/TaskRow.tsx
+++ b/src/features/Tasks/v1/components/task/TaskRow.tsx
@@ -11,46 +11,57 @@ import type { Task } from "../../Task.types";
 interface Props { task: Task; onDelete: (task: Task) => void; }
 
 const SUB_ICON: Record<string, React.ReactNode> = {
-  file: <FileUp size={11} />, 
-  github: <Github size={11} />, 
+  file: <FileUp size={11} />,
+  github: <Github size={11} />,
   link: <Link size={11} />,
   all: <Layers size={11} />,
 };
 
-const PRIORITY_BORDER: Record<string, string> = {
-  high: "border-l-red-500", medium: "border-l-amber-400", low: "border-l-sky-400",
-};
+
 
 export default function TaskRow({ task, onDelete }: Props) {
-  const navigate     = useNavigate();
+  const navigate = useNavigate();
   const subStatusCfg = SUBMISSION_STATUS_CONFIG[task.submissionStatus];
-  const deadlineDt   = parseISO(task.deadline);
-  const isOverdue    = isPast(deadlineDt) && task.status !== "completed";
-  const isNear       = !isOverdue && differenceInHours(deadlineDt, new Date()) < 24;
+  const deadlineDt = parseISO(task.deadline);
+  const isOverdue = isPast(deadlineDt) && task.status !== "completed";
+  const isNear = !isOverdue && differenceInHours(deadlineDt, new Date()) < 24;
 
   return (
-    <tr onClick={() => navigate(`/org/tasks/${task.id}`)}
-      className={`group cursor-pointer border-l-4 ${PRIORITY_BORDER[task.priority]} transition-all duration-200 hover:bg-[var(--cd-hover)] border-b border-[var(--cd-border-subtle)]`}
+    <tr
+      onClick={() => navigate(`/org/tasks/${task.id}`)}
+      className="group cursor-pointer border-b border-[var(--cd-border-subtle)] transition-colors duration-150 hover:bg-[var(--cd-hover)]"
     >
       {/* Title */}
-      <td className="py-3 pr-4 pl-3 min-w-0">
-        <div className="flex max-w-[360px] flex-col items-start gap-1.5">
-          <StatusBadge status={task.status} size="sm" />
-          <span className="w-full truncate text-sm font-semibold group-hover:text-[var(--cd-primary)] transition-colors" style={{ color: "var(--cd-text)" }}>
-            {task.title}
-          </span>
-          <span className="w-full overflow-hidden text-ellipsis whitespace-nowrap text-xs" style={{ color: "var(--cd-text-muted)" }}>
-            {task.description}
-          </span>
+      <td className="min-w-0 py-3.5 pl-5 pr-5">
+        <div className="flex max-w-[520px] flex-col gap-2">
+          <div className="flex min-w-0 items-center gap-2">
+            <StatusBadge status={task.status} size="sm" />
+            {task.isMandatory && (
+              <span
+                className="rounded-md px-1.5 py-0.5 text-[10px] font-medium"
+                style={{ backgroundColor: "transparent", color: "var(--cd-text-muted)" }}
+              >
+                Required
+              </span>
+            )}
+          </div>
+          <div className="min-w-0">
+            <span className="block w-full truncate text-sm font-semibold transition-colors group-hover:text-[var(--cd-primary)]" style={{ color: "var(--cd-text)" }}>
+              {task.title}
+            </span>
+            <span className="mt-1 block w-full overflow-hidden text-ellipsis whitespace-nowrap text-xs leading-5" style={{ color: "var(--cd-text-muted)" }}>
+              {task.description}
+            </span>
+          </div>
         </div>
         {task.technologies && task.technologies.length > 0 && (
-          <div className="flex flex-wrap gap-1 mt-1.5">
+          <div className="mt-2 flex flex-wrap gap-1.5">
             {task.technologies.slice(0, 3).map((tech) => (
               <TechBadge key={tech.id} tech={tech} size="xs" />
             ))}
             {task.technologies.length > 3 && (
               <span
-                className="inline-block text-[10px] font-semibold px-1.5 py-0.5 rounded-md"
+                className="inline-block rounded-md px-1.5 py-0.5 text-[10px] font-medium"
                 style={{ backgroundColor: "var(--cd-surface-2)", color: "var(--cd-text-2)" }}
               >
                 +{task.technologies.length - 3}
@@ -58,18 +69,10 @@ export default function TaskRow({ task, onDelete }: Props) {
             )}
           </div>
         )}
-        {task.isMandatory && (
-          <span
-            className="mt-1 inline-block text-[10px] font-semibold px-1.5 py-0.5 rounded-md"
-            style={{ backgroundColor: "var(--cd-primary-subtle)", color: "var(--cd-primary-text)" }}
-          >
-            Mandatory
-          </span>
-        )}
       </td>
 
       {/* Avatar group */}
-      <td className="py-3 pr-4">
+      <td className="py-3.5 pr-5">
         <AvatarGroup
           members={task.assignedTo}
           max={3}
@@ -77,13 +80,13 @@ export default function TaskRow({ task, onDelete }: Props) {
         />
       </td>
 
-      <td className="py-3 pr-4"><PriorityBadge priority={task.priority} size="sm" /></td>
+      <td className="py-3.5 pr-5"><PriorityBadge priority={task.priority} size="sm" /></td>
 
       {/* Deadline */}
-      <td className="py-3 pr-4">
+      <td className="py-3.5 pr-5">
         <div className="flex flex-col gap-0.5">
           <span
-            className="text-xs font-semibold"
+            className="text-xs font-medium"
             style={{
               color: isOverdue ? "var(--cd-danger)" : isNear ? "var(--cd-warning)" : "var(--cd-text-2)",
             }}
@@ -96,24 +99,16 @@ export default function TaskRow({ task, onDelete }: Props) {
             {deadlineDt.toLocaleDateString("en-IN", { day: "2-digit", month: "short", year: "numeric" })}
           </span>
         </div>
-        {isOverdue && (
-          <span
-            className="mt-0.5 inline-block text-[10px] font-bold px-1.5 py-0.5 rounded-md animate-pulse"
-            style={{ color: "var(--cd-danger)", backgroundColor: "var(--cd-danger-subtle)" }}
-          >
-            OVERDUE
-          </span>
-        )}
       </td>
 
       {/* Submission */}
-      <td className="py-3 pr-4">
-        <div className="flex flex-col gap-1">
-          <span className={`inline-flex items-center gap-1 text-[10px] font-semibold px-2 py-0.5 rounded-full ${subStatusCfg.bg} ${subStatusCfg.text}`}>
+      <td className="py-3.5 pr-5">
+        <div className="flex flex-col gap-1.5">
+          <span className={`inline-flex w-fit items-center gap-1 rounded-md px-2 py-1 text-[10px] font-medium ${subStatusCfg.bg} ${subStatusCfg.text}`}>
             {SUB_ICON[task.submissionType]}{subStatusCfg.label}
           </span>
           {task.points !== undefined && (
-            <span className="text-[10px] font-semibold" style={{ color: "var(--cd-warning)" }}>
+            <span className="text-[10px] font-medium" style={{ color: "var(--cd-text-muted)" }}>
               {task.points} pts
             </span>
           )}
@@ -121,32 +116,31 @@ export default function TaskRow({ task, onDelete }: Props) {
       </td>
 
       {/* Actions */}
-      <td className="py-3 pr-3" onClick={e => e.stopPropagation()}>
-        <div className="flex items-center justify-end gap-0.5 opacity-100 lg:opacity-0 lg:group-hover:opacity-100 transition-opacity duration-150">
-          <Btn icon={<Eye size={13}/>}    label="View"   onClick={() => navigate(`/org/tasks/${task.id}`)}       color="indigo" />
-          <Btn icon={<Pencil size={13}/>} label="Edit"   onClick={() => navigate(`/org/tasks/${task.id}/edit`)}  color="gray"   />
-          <Btn icon={<Trash2 size={13}/>} label="Delete" onClick={() => onDelete(task)}                          color="red"    />
+      <td className="py-3.5 pr-5" onClick={e => e.stopPropagation()}>
+        <div className="flex items-center justify-end gap-1 opacity-100 transition-opacity duration-150 lg:opacity-0 lg:group-hover:opacity-100">
+          <Btn icon={<Eye size={13} />} label="View" onClick={() => navigate(`/org/tasks/${task.id}`)} color="indigo" />
+          <Btn icon={<Pencil size={13} />} label="Edit" onClick={() => navigate(`/org/tasks/${task.id}/edit`)} color="gray" />
+          <Btn icon={<Trash2 size={13} />} label="Delete" onClick={() => onDelete(task)} color="red" />
         </div>
       </td>
     </tr>
   );
 }
 
-function Btn({ icon, label, onClick, color }: { icon: React.ReactNode; label: string; onClick: () => void; color: "indigo"|"gray"|"red" }) {
+function Btn({ icon, label, onClick, color }: { icon: React.ReactNode; label: string; onClick: () => void; color: "indigo" | "gray" | "red" }) {
   const styles = {
     indigo: "text-[var(--cd-primary-text)] hover:bg-[var(--cd-primary-subtle)]",
     gray: "text-[var(--cd-text-2)] hover:bg-[var(--cd-surface-2)]",
     red: "text-[var(--cd-danger)] hover:bg-[var(--cd-danger-subtle)]",
   }[color];
-  
+
   return (
     <button
       title={label}
       onClick={onClick}
-      className={`p-1.5 rounded-lg transition-colors ${styles}`}
+      className={`rounded-lg p-1.5 transition-colors ${styles}`}
     >
       {icon}
     </button>
   );
 }
-
diff --git a/src/features/Tasks/v1/components/task/TaskTable.tsx b/src/features/Tasks/v1/components/task/TaskTable.tsx
index b5364f6..0425158 100644
--- a/src/features/Tasks/v1/components/task/TaskTable.tsx
+++ b/src/features/Tasks/v1/components/task/TaskTable.tsx
@@ -8,12 +8,12 @@ import type { Task } from "../../Task.types";
 const PAGE_SIZE = 15;
 
 const COLUMNS = [
-  { key: "title",      label: "Task",        width: "min-w-[320px]" },
-  { key: "assigned",   label: "Assigned To", width: "w-32"          },
-  { key: "priority",   label: "Priority",    width: "w-28"          },
-  { key: "deadline",   label: "Deadline",    width: "w-36"          },
-  { key: "submission", label: "Submission",  width: "w-36"          },
-  { key: "actions",    label: "Actions",     width: "w-24 text-right" },
+  { key: "title", label: "Task", width: "min-w-[360px]" },
+  { key: "assigned", label: "Assignees", width: "w-32" },
+  { key: "priority", label: "Priority", width: "w-24" },
+  { key: "deadline", label: "Due", width: "w-36" },
+  { key: "submission", label: "Submission", width: "w-36" },
+  { key: "actions", label: "", width: "w-24 text-right" },
 ];
 
 interface Props {
@@ -35,18 +35,18 @@ export default function TaskTable({
 }: Props) {
   const [page, setPage] = useState(1);
   const totalPages = Math.ceil(tasks.length / PAGE_SIZE);
-  const paginated  = tasks.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);
+  const paginated = tasks.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);
 
   if (isLoading) return <SkeletonLoader type="table" />;
 
   if (tasks.length === 0) {
     return (
       <div
-        className="rounded-xl overflow-hidden flex items-center justify-center min-h-[40vh]"
+        className="flex min-h-[320px] items-center justify-center overflow-hidden rounded-xl"
         style={{
           backgroundColor: "var(--cd-surface)",
-          border: "1px solid var(--cd-border)",
-          boxShadow: "0 1px 3px var(--cd-shadow)",
+          border: "0",
+          boxShadow: "none",
         }}
       >
         {hasFilters ? (
@@ -57,7 +57,7 @@ export default function TaskTable({
             action={
               <button
                 onClick={onResetFilters}
-                className="cd-btn cd-btn-secondary flex items-center gap-1.5"
+                className="cd-btn cd-btn-secondary h-9 rounded-lg px-4 text-sm"
               >
                 <SearchX size={14} />
                 Clear Filters
@@ -72,7 +72,7 @@ export default function TaskTable({
             action={
               <button
                 onClick={onCreateTask}
-                className="cd-btn cd-btn-primary flex items-center gap-1.5"
+                className="cd-btn cd-btn-primary h-9 rounded-lg px-4 text-sm"
               >
                 <Plus size={15} />
                 Create First Task
@@ -85,24 +85,22 @@ export default function TaskTable({
   }
 
   return (
-    <div
-      className="rounded-xl overflow-hidden relative"
-      style={{
-        backgroundColor: "var(--cd-surface)",
-        border: "1px solid var(--cd-border)",
-        boxShadow: "0 1px 3px var(--cd-shadow)",
-      }}
-    >
-      <table className="cd-table table-fixed">
+    <div className="overflow-hidden relative">
+      <table className="cd-table table-fixed w-full">
         <thead>
-          <tr>
+          <tr style={{ backgroundColor: "var(--cd-surface)" }}>
             {COLUMNS.map((col) => (
-              <th key={col.key} className={col.width}>
+              <th
+                key={col.key}
+                className={`${col.width} px-5 py-3 text-[11px] font-semibold uppercase tracking-wider transition-colors`}
+                style={{ color: "var(--cd-text-muted)", borderBottom: "1px solid var(--cd-border-subtle)" }}
+              >
                 {col.label}
               </th>
             ))}
           </tr>
         </thead>
+
         <tbody>
           {paginated.map((task) => (
             <TaskRow key={task.id} task={task} onDelete={onDelete} />
@@ -112,10 +110,10 @@ export default function TaskTable({
 
       {/* ── Footer ──────────────────────────────────────────── */}
       <div
-        className="flex justify-between items-center gap-3 px-6 py-3 text-sm border-t"
+        className="flex justify-between items-center gap-3 border-t px-5 py-3 text-sm"
         style={{
           backgroundColor: "var(--cd-surface)",
-          borderColor: "var(--cd-border)",
+          borderColor: "var(--cd-border-subtle)",
           color: "var(--cd-text-2)",
         }}
       >
@@ -132,14 +130,14 @@ export default function TaskTable({
           <button
             onClick={() => setPage((p) => Math.max(1, p - 1))}
             disabled={page === 1}
-            className="cd-btn cd-btn-secondary px-3 py-1 text-xs disabled:opacity-40"
+            className="cd-btn cd-btn-secondary h-8 rounded-lg px-3 text-xs disabled:opacity-40"
           >
             Previous
           </button>
           <button
             onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
             disabled={page === totalPages}
-            className="cd-btn cd-btn-secondary px-3 py-1 text-xs disabled:opacity-40"
+            className="cd-btn cd-btn-secondary h-8 rounded-lg px-3 text-xs disabled:opacity-40"
           >
             Next
           </button>
diff --git a/src/features/Tasks/v1/hooks/useTasks.ts b/src/features/Tasks/v1/hooks/useTasks.ts
index c81e6d5..2dc24d7 100644
--- a/src/features/Tasks/v1/hooks/useTasks.ts
+++ b/src/features/Tasks/v1/hooks/useTasks.ts
@@ -33,12 +33,12 @@ function matchesSearch(task: Task, q: string): boolean {
   ];
   const haystack = fields.join(" ").toLowerCase();
   const normalized = query
-    .replaceAll("in progress", "in-progress")
-    .replaceAll("not submitted", "not-submitted")
-    .replaceAll("to do", "todo");
+    .replace(/in progress/g, "in-progress")
+    .replace(/not submitted/g, "not-submitted")
+    .replace(/to do/g, "todo");
   const terms = normalized.split(/\s+/).filter(Boolean);
 
-  return terms.every((term) => haystack.includes(term));
+  return terms.every((term: string) => haystack.includes(term));
 }
 
 function applyFilters(tasks: Task[], filters: TaskFilters): Task[] {
diff --git a/src/features/Tasks/v1/mock/taskMockData.ts b/src/features/Tasks/v1/mock/taskMockData.ts
index 457d992..db4393c 100644
--- a/src/features/Tasks/v1/mock/taskMockData.ts
+++ b/src/features/Tasks/v1/mock/taskMockData.ts
@@ -8,22 +8,22 @@ const av = (name: string, bg: string) =>
 
 // ─── Mock Events ──────────────────────────────────────────────────────────────
 export const mockEvents: EventOption[] = [
-  { id: "evt-001", name: "Summer AI Hackathon 2026", subtitle: "Sponsored by TechCorp",   type: "hackathon", status: "Live",      startDate: "2026-06-15", endDate: "2026-06-17" },
-  { id: "evt-002", name: "Web3 Builders Sprint",     subtitle: "Internal Team Event",     type: "internal",  status: "Upcoming",  startDate: "2026-07-01", endDate: "2026-07-03" },
-  { id: "evt-003", name: "Global Open Source Hack",  subtitle: "Public Event",            type: "hackathon", status: "Completed", startDate: "2026-05-10", endDate: "2026-05-12" },
-  { id: "evt-004", name: "Speed Code Blitz",         subtitle: "Internal Team Event",     type: "internal",  status: "Completed", startDate: "2026-04-22", endDate: "2026-04-22" },
-  { id: "evt-005", name: "Design Systems Workshop",  subtitle: "Design Department",       type: "workshop",  status: "Upcoming",  startDate: "2026-08-05", endDate: "2026-08-07" },
-  { id: "evt-006", name: "Community Growth Sprint",  subtitle: "Open to all members",     type: "community", status: "Live",      startDate: "2026-05-01", endDate: "2026-05-31" },
+  { id: "evt-001", name: "Summer AI Hackathon 2026", subtitle: "Sponsored by TechCorp", type: "hackathon", status: "Live", startDate: "2026-06-15", endDate: "2026-06-17" },
+  { id: "evt-002", name: "Web3 Builders Sprint", subtitle: "Internal Team Event", type: "internal", status: "Upcoming", startDate: "2026-07-01", endDate: "2026-07-03" },
+  { id: "evt-003", name: "Global Open Source Hack", subtitle: "Public Event", type: "hackathon", status: "Completed", startDate: "2026-05-10", endDate: "2026-05-12" },
+  { id: "evt-004", name: "Speed Code Blitz", subtitle: "Internal Team Event", type: "internal", status: "Completed", startDate: "2026-04-22", endDate: "2026-04-22" },
+  { id: "evt-005", name: "Design Systems Workshop", subtitle: "Design Department", type: "workshop", status: "Upcoming", startDate: "2026-08-05", endDate: "2026-08-07" },
+  { id: "evt-006", name: "Community Growth Sprint", subtitle: "Open to all members", type: "community", status: "Live", startDate: "2026-05-01", endDate: "2026-05-31" },
 ];
 
 // ─── Mock Members ─────────────────────────────────────────────────────────────
 export const mockMembers: MemberOption[] = [
-  { id: "mem-001", name: "Arjun Mehta",   avatar: av("Arjun Mehta",   "6366f1"), role: "Frontend Developer",   email: "arjun@commdesk.io"  },
-  { id: "mem-002", name: "Priya Sharma",  avatar: av("Priya Sharma",  "ec4899"), role: "UI/UX Designer",       email: "priya@commdesk.io"  },
-  { id: "mem-003", name: "Rohit Verma",   avatar: av("Rohit Verma",   "f97316"), role: "Backend Developer",    email: "rohit@commdesk.io"  },
-  { id: "mem-004", name: "Sneha Patel",   avatar: av("Sneha Patel",   "10b981"), role: "Full Stack Developer", email: "sneha@commdesk.io"  },
-  { id: "mem-005", name: "Kiran Joshi",   avatar: av("Kiran Joshi",   "3b82f6"), role: "DevOps Engineer",      email: "kiran@commdesk.io"  },
-  { id: "mem-006", name: "Ananya Reddy",  avatar: av("Ananya Reddy",  "8b5cf6"), role: "Data Scientist",       email: "ananya@commdesk.io" },
+  { id: "mem-001", name: "John Doe", avatar: "https://randomuser.me/api/portraits/men/1.jpg", role: "Mentor", email: "john@commdesk.io" },
+  { id: "mem-002", name: "Jane Smith", avatar: "https://randomuser.me/api/portraits/women/2.jpg", role: "Mentee", email: "jane@commdesk.io" },
+  { id: "mem-003", name: "Alice Johnson", avatar: "https://randomuser.me/api/portraits/women/3.jpg", role: "Lean Developer", email: "alice@commdesk.io" },
+  { id: "mem-004", name: "Bob Brown", avatar: "https://randomuser.me/api/portraits/men/4.jpg", role: "Observer", email: "bob@commdesk.io" },
+  { id: "mem-005", name: "Sarah Wilson", avatar: "https://randomuser.me/api/portraits/women/5.jpg", role: "Lead Designer", email: "sarah@commdesk.io" },
+  { id: "mem-006", name: "Mike Ross", avatar: "https://randomuser.me/api/portraits/men/6.jpg", role: "Software Engineer", email: "mike@commdesk.io" },
 ];
 
 // ─── Mock Tasks ───────────────────────────────────────────────────────────────
@@ -138,20 +138,20 @@ export const mockTasks: Task[] = [
 export const mockSubmissions: Submission[] = [
   {
     id: "sub-001", taskId: "task-001", submittedBy: mockMembers[0],
-    githubUrl: "https://github.com/arjun/ai-landing-page",
+    githubUrl: "https://github.com/johndoe/ai-landing-page",
     notes: "Completed responsive design with animations. Mobile tested.",
     submittedAt: "2026-06-08T15:30:00",
     review: { decision: "approved", score: 92, feedback: "Excellent work! Clean code and great animations.", reviewedBy: "Organizer", reviewedAt: "2026-06-09T10:00:00" },
   },
   {
     id: "sub-002", taskId: "task-001", submittedBy: mockMembers[1],
-    githubUrl: "https://github.com/priya/ai-landing-page-designs",
+    githubUrl: "https://github.com/janesmith/ai-landing-page-designs",
     notes: "Added Figma components and updated CSS variables.",
     submittedAt: "2026-06-09T11:00:00",
   },
   {
     id: "sub-003", taskId: "task-003", submittedBy: mockMembers[2],
-    githubUrl: "https://github.com/rohit/hackathon-cicd",
+    githubUrl: "https://github.com/alicej/hackathon-cicd",
     notes: "Set up GitHub Actions with matrix testing on Node 18 & 20.",
     submittedAt: "2026-05-27T14:00:00",
     review: { decision: "approved", score: 98, feedback: "Perfect pipeline setup.", reviewedBy: "Organizer", reviewedAt: "2026-05-28T09:00:00" },
@@ -161,16 +161,16 @@ export const mockSubmissions: Submission[] = [
 // ─── Mock Activity ────────────────────────────────────────────────────────────
 export const mockActivity: Record<string, ActivityEvent[]> = {
   "task-001": [
-    { id: "act-001", type: "created",   actor: "Organizer",   description: "Task created and assigned to Arjun & Priya",      timestamp: "2026-05-01T10:00:00" },
-    { id: "act-002", type: "updated",   actor: "Arjun Mehta", description: "Status changed from Todo → In Progress",          timestamp: "2026-05-15T09:30:00" },
-    { id: "act-003", type: "submitted", actor: "Arjun Mehta", description: "Submitted GitHub repository link",                timestamp: "2026-06-08T15:30:00" },
-    { id: "act-004", type: "reviewed",  actor: "Organizer",   description: "Submission approved · Score: 92/100",             timestamp: "2026-06-09T10:00:00" },
-    { id: "act-005", type: "submitted", actor: "Priya Sharma", description: "Submitted design assets",                       timestamp: "2026-06-09T11:00:00" },
+    { id: "act-001", type: "created", actor: "Organizer", description: "Task created and assigned to John & Jane", timestamp: "2026-05-01T10:00:00" },
+    { id: "act-002", type: "updated", actor: "John Doe", description: "Status changed from Todo → In Progress", timestamp: "2026-05-15T09:30:00" },
+    { id: "act-003", type: "submitted", actor: "John Doe", description: "Submitted GitHub repository link", timestamp: "2026-06-08T15:30:00" },
+    { id: "act-004", type: "reviewed", actor: "Organizer", description: "Submission approved · Score: 92/100", timestamp: "2026-06-09T10:00:00" },
+    { id: "act-005", type: "submitted", actor: "Jane Smith", description: "Submitted design assets", timestamp: "2026-06-09T11:00:00" },
   ],
   "task-003": [
-    { id: "act-006", type: "created",   actor: "Organizer",   description: "Task created and assigned to Rohit & Kiran",     timestamp: "2026-04-28T11:00:00" },
-    { id: "act-007", type: "submitted", actor: "Rohit Verma", description: "Submitted CI/CD pipeline implementation",        timestamp: "2026-05-27T14:00:00" },
-    { id: "act-008", type: "reviewed",  actor: "Organizer",   description: "Submission approved · Score: 98/100",            timestamp: "2026-05-28T09:00:00" },
+    { id: "act-006", type: "created", actor: "Organizer", description: "Task created and assigned to Alice & Bob", timestamp: "2026-04-28T11:00:00" },
+    { id: "act-007", type: "submitted", actor: "Alice Johnson", description: "Submitted CI/CD pipeline implementation", timestamp: "2026-05-27T14:00:00" },
+    { id: "act-008", type: "reviewed", actor: "Organizer", description: "Submission approved · Score: 98/100", timestamp: "2026-05-28T09:00:00" },
   ],
 };
 
@@ -186,8 +186,8 @@ export const mockComments: Record<string, TaskComment[]> = {
     },
     {
       id: "cmt-002", taskId: "task-001",
-      author: "Arjun Mehta",
-      avatar: av("Arjun Mehta", "6366f1"),
+      author: "John Doe",
+      avatar: "https://randomuser.me/api/portraits/men/1.jpg",
       text: "Got it! I'll start with the mobile layout and scale up.",
       createdAt: "2026-05-02T11:30:00",
     },
@@ -201,4 +201,4 @@ export const mockComments: Record<string, TaskComment[]> = {
       createdAt: "2026-04-29T09:00:00",
     },
   ],
-};
\ No newline at end of file
+};
diff --git a/src/features/Tasks/v1/pages/CreateTaskPage.tsx b/src/features/Tasks/v1/pages/CreateTaskPage.tsx
index 0009f40..07a3b82 100644
--- a/src/features/Tasks/v1/pages/CreateTaskPage.tsx
+++ b/src/features/Tasks/v1/pages/CreateTaskPage.tsx
@@ -7,30 +7,30 @@ export default function CreateTaskPage() {
   const navigate = useNavigate();
 
   return (
-    <div className="w-full h-full flex flex-col cd-page">
+    <div className="flex h-full w-full flex-col cd-page">
       {/* Header - Matches Event_Header style */}
       <div
-        className="py-[3vh] border-b flex text-xl font-bold justify-between"
+        className="flex justify-between border-b px-5 py-4 text-xl font-bold sm:px-8 lg:px-10"
         style={{
           backgroundColor: "var(--cd-surface)",
           borderColor: "var(--cd-border)",
         }}
       >
-        <div className="w-1/3 h-full flex items-center">
+        <div className="flex h-full min-w-0 items-center">
           <h1
-            className="text-lg sm:text-[2.5vw] lg:text-2xl font-bold ml-5 mt-2 flex items-center gap-3"
+            className="flex min-w-0 items-center gap-3 text-lg font-semibold lg:text-xl"
             style={{ color: "var(--cd-text)" }}
           >
             <button
               onClick={() => navigate(-1)}
-              className="p-2 rounded-xl transition-colors hover:opacity-80"
+              className="rounded-lg p-2 transition-colors hover:bg-[var(--cd-hover)]"
               style={{ color: "var(--cd-text-muted)" }}
               aria-label="Go back"
             >
               <ArrowLeft size={20} />
             </button>
             <div
-              className="w-8 h-8 rounded-xl flex items-center justify-center"
+              className="flex h-8 w-8 items-center justify-center rounded-lg"
               style={{ backgroundColor: "var(--cd-primary)" }}
             >
               <Plus size={16} className="text-white" />
@@ -39,7 +39,7 @@ export default function CreateTaskPage() {
           </h1>
         </div>
 
-        <div className="w-1/2 xl:w-fit h-full mr-[3vw] flex justify-end gap-3">
+        <div className="flex h-full justify-end gap-3">
           <Button
             text="Cancel"
             variant="secondary"
@@ -49,9 +49,9 @@ export default function CreateTaskPage() {
       </div>
 
       {/* Form content */}
-      <div className="flex-1 overflow-auto p-[2vw]">
+      <div className="flex-1 overflow-auto">
         <TaskForm mode="create" />
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/features/Tasks/v1/pages/EditTaskPage.tsx b/src/features/Tasks/v1/pages/EditTaskPage.tsx
index 1a72fea..86bfe99 100644
--- a/src/features/Tasks/v1/pages/EditTaskPage.tsx
+++ b/src/features/Tasks/v1/pages/EditTaskPage.tsx
@@ -10,24 +10,24 @@ export default function EditTaskPage() {
   const { data: task, isLoading, isError } = useTaskDetail(taskId);
 
   return (
-    <div className="w-full min-h-screen flex flex-col" style={{ backgroundColor: "var(--cd-bg)" }}>
+    <div className="flex min-h-screen w-full flex-col" style={{ backgroundColor: "var(--cd-bg)" }}>
       <div
-        className="border-b px-6 py-4 flex items-center gap-3"
-        style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border)" }}
+        className="flex items-center gap-3 border-b px-5 py-4 sm:px-8 lg:px-10"
+        style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border-subtle)" }}
       >
         <button
           onClick={() => navigate(-1)}
-          className="p-2 rounded-xl transition"
+          className="rounded-lg p-2 transition-colors hover:bg-[var(--cd-hover)]"
           style={{ color: "var(--cd-text-muted)" }}
         >
           <ArrowLeft size={18} />
         </button>
         <div className="flex items-center gap-2.5">
-          <div className="w-8 h-8 rounded-xl flex items-center justify-center" style={{ backgroundColor: "var(--cd-warning)" }}>
+          <div className="flex h-8 w-8 items-center justify-center rounded-lg" style={{ backgroundColor: "var(--cd-warning)" }}>
             <Pencil size={15} className="text-white" />
           </div>
           <div>
-            <h1 className="text-base font-bold" style={{ color: "var(--cd-text)" }}>Edit Task</h1>
+            <h1 className="text-base font-semibold" style={{ color: "var(--cd-text)" }}>Edit Task</h1>
             <p className="text-xs truncate max-w-[280px]" style={{ color: "var(--cd-text-muted)" }}>
               {task?.title ?? "Loading…"}
             </p>
diff --git a/src/features/Tasks/v1/pages/TaskDetailPage.tsx b/src/features/Tasks/v1/pages/TaskDetailPage.tsx
index f62ca83..bdaa71a 100644
--- a/src/features/Tasks/v1/pages/TaskDetailPage.tsx
+++ b/src/features/Tasks/v1/pages/TaskDetailPage.tsx
@@ -1,9 +1,19 @@
 import { useState } from "react";
 import { useParams, useNavigate, Link } from "react-router-dom";
 import {
-  ArrowLeft, Pencil, Trash2, CalendarDays, Users, Flag,
-  UploadCloud, Star, Clock, Activity, ChevronRight,
-  CheckCircle2, Circle, Zap,
+  Activity,
+  ArrowLeft,
+  CalendarDays,
+  CheckCircle2,
+  ChevronRight,
+  Circle,
+  Clock,
+  Pencil,
+  Star,
+  Trash2,
+  UploadCloud,
+  Users,
+  Zap,
 } from "lucide-react";
 import { formatDistanceToNow, format, isPast, parseISO } from "date-fns";
 import { useTaskDetail, useTaskActivity } from "../hooks/useTaskDetail";
@@ -29,22 +39,24 @@ import {
 
 export default function TaskDetailPage() {
   const { taskId } = useParams<{ taskId: string }>();
-  const navigate   = useNavigate();
+  const navigate = useNavigate();
   const { toasts, addToast, dismiss } = useToast();
 
   const { data: task, isLoading, isError } = useTaskDetail(taskId);
   const { data: submissions = [], isLoading: subLoading } = useSubmissions(taskId);
-  const { data: activity = [] }  = useTaskActivity(taskId);
-  const { data: events = [] }    = useEvents();
-  const deleteTask               = useDeleteTask();
-  const updateTask               = useUpdateTask();
-  const [activeTab, setActiveTab]                     = useState<"submissions" | "activity" | "comments">("submissions");
+  const { data: activity = [] } = useTaskActivity(taskId);
+  const { data: events = [] } = useEvents();
+  const deleteTask = useDeleteTask();
+  const updateTask = useUpdateTask();
+
+  const [activeTab, setActiveTab] = useState<"submissions" | "activity" | "comments">("submissions");
   const [reviewingSubmissionId, setReviewingSubmissionId] = useState<string | null>(null);
-  const [showDeleteModal, setShowDeleteModal]         = useState(false);
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
 
-  const eventName   = events.find((e) => e.id === task?.eventId)?.name;
-  const subCfg      = task ? SUBMISSION_STATUS_CONFIG[task.submissionStatus] : null;
+  const eventName = events.find((e) => e.id === task?.eventId)?.name;
+  const subCfg = task ? SUBMISSION_STATUS_CONFIG[task.submissionStatus] : null;
   const isDeadlinePast = task ? isPast(parseISO(task.deadline)) : false;
+  const isOverdue = Boolean(isDeadlinePast && task?.status !== "completed");
 
   const handleDelete = async () => {
     if (!task) return;
@@ -69,21 +81,17 @@ export default function TaskDetailPage() {
     }
   };
 
-  // ── Error ──────────────────────────────────────────────────────────────────
   if (isError) {
     return (
       <div
-        className="w-full min-h-screen flex items-center justify-center"
+        className="flex min-h-screen w-full items-center justify-center"
         style={{ backgroundColor: "var(--cd-bg)" }}
       >
-        <div className="text-center flex flex-col items-center gap-4">
+        <div className="flex flex-col items-center gap-4 text-center">
           <p className="text-lg font-semibold" style={{ color: "var(--cd-text)" }}>
             Task not found
           </p>
-          <button
-            onClick={() => navigate("/org/tasks")}
-            className="cd-btn cd-btn-primary"
-          >
+          <button onClick={() => navigate("/org/tasks")} className="cd-btn cd-btn-primary">
             Back to Tasks
           </button>
         </div>
@@ -93,512 +101,337 @@ export default function TaskDetailPage() {
 
   return (
     <div
-      className="w-full h-screen flex flex-col overflow-hidden"
+      className="flex min-h-screen w-full flex-col"
       style={{ backgroundColor: "var(--cd-bg)" }}
     >
-      {/* ── Top bar (Events-style header) ─────────────────────────────────────── */}
-      <div
-        className="border-b px-5 sm:px-[3vw] py-3.5 flex items-center justify-between gap-4 flex-wrap shrink-0"
+      <header
+        className="border-b px-5 py-4 sm:px-8 lg:px-10"
         style={{
           backgroundColor: "var(--cd-surface)",
-          borderColor: "var(--cd-border)",
+          borderColor: "var(--cd-border-subtle)",
         }}
       >
-        <div className="flex items-center gap-3">
-          <button
-            onClick={() => navigate(-1)}
-            className="p-2 rounded-xl transition-all hover:bg-[var(--cd-hover)] text-[var(--cd-text-muted)] hover:text-[var(--cd-text)] active:scale-95"
-            aria-label="Go back"
-          >
-            <ArrowLeft size={18} />
-          </button>
-
-          {/* Breadcrumb */}
-          <nav
-            className="flex items-center gap-2 text-xs text-[var(--cd-text-muted)]"
-            aria-label="Breadcrumb"
-          >
-            <Link
-              to="/org/tasks"
-              className="font-medium hover:text-[var(--cd-primary)] transition-colors"
-            >
-              Tasks
-            </Link>
-            <ChevronRight size={12} className="opacity-50" />
-            <span
-              className="font-bold truncate max-w-[200px] text-[var(--cd-text)]"
-            >
-              {isLoading ? "Loading…" : task?.title}
-            </span>
-          </nav>
-        </div>
-
-        {task && (
-          <div className="flex items-center gap-2">
-            <Link
-              to={`/org/tasks/${task.id}/edit`}
-              className="flex items-center gap-1.5 px-4 py-2 rounded-xl border border-[var(--cd-border)] text-[var(--cd-text-2)] hover:text-[var(--cd-text)] hover:bg-[var(--cd-hover)] text-xs font-bold transition-all active:scale-95"
-            >
-              <Pencil size={13} /> Edit
-            </Link>
+        <div className="mx-auto flex w-full max-w-[1180px] items-center justify-between gap-4">
+          <div className="flex min-w-0 items-center gap-3">
             <button
-              onClick={() => setShowDeleteModal(true)}
-              className="flex items-center gap-1.5 px-4 py-2 rounded-xl border border-[var(--cd-danger-subtle)] text-[var(--cd-danger)] hover:bg-[var(--cd-danger-subtle)] text-xs font-bold transition-all active:scale-95"
+              onClick={() => navigate(-1)}
+              className="inline-flex h-9 w-9 items-center justify-center rounded-lg text-[var(--cd-text-muted)] transition-colors hover:bg-[var(--cd-hover)] hover:text-[var(--cd-text)]"
+              aria-label="Go back"
             >
-              <Trash2 size={13} /> Delete
+              <ArrowLeft size={18} />
             </button>
+
+            <div className="min-w-0">
+              <nav
+                className="mb-1 flex items-center gap-2 text-xs"
+                style={{ color: "var(--cd-text-muted)" }}
+                aria-label="Breadcrumb"
+              >
+                <Link to="/org/tasks" className="font-medium transition-colors hover:text-[var(--cd-primary)]">
+                  Tasks
+                </Link>
+                <ChevronRight size={12} className="opacity-50" />
+                <span className="truncate">{eventName ?? "Task detail"}</span>
+              </nav>
+              <h1
+                className="truncate text-base font-semibold leading-tight sm:text-lg"
+                style={{ color: "var(--cd-text)" }}
+              >
+                {isLoading ? "Loading..." : task?.title}
+              </h1>
+            </div>
           </div>
-        )}
-      </div>
 
-      {/* ── Content ─────────────────────────────────────────────────────────────── */}
+          {task && (
+            <div className="flex shrink-0 items-center gap-2">
+              <Link
+                to={`/org/tasks/${task.id}/edit`}
+                className="inline-flex h-9 items-center gap-2 rounded-lg border px-3 text-sm font-medium text-[var(--cd-text-2)] transition-colors hover:bg-[var(--cd-hover)] hover:text-[var(--cd-text)]"
+                style={{ borderColor: "var(--cd-border)" }}
+              >
+                <Pencil size={14} /> Edit
+              </Link>
+              <button
+                onClick={() => setShowDeleteModal(true)}
+                className="inline-flex h-9 items-center gap-2 rounded-lg border px-3 text-sm font-medium text-[var(--cd-danger)] transition-colors hover:bg-[var(--cd-danger-subtle)]"
+                style={{ borderColor: "var(--cd-danger-subtle)" }}
+              >
+                <Trash2 size={14} /> Delete
+              </button>
+            </div>
+          )}
+        </div>
+      </header>
+
       {isLoading ? (
         <SkeletonLoader type="detail" />
       ) : task ? (
-        <div className="flex-1 flex flex-col lg:flex-row overflow-hidden min-h-0">
-
-          {/* ── LEFT panel: task info ──────────────────────────────────────────── */}
-          <div
-            className="lg:w-[420px] xl:w-[460px] shrink-0 flex flex-col gap-5 p-5 border-r overflow-y-auto"
-            style={{
-              backgroundColor: "var(--cd-surface)",
-              borderColor: "var(--cd-border)",
-            }}
-          >
-            {/* Event link + title + description */}
-            <div className="flex flex-col gap-3">
+        <main className="flex-1 overflow-auto px-5 py-6 sm:px-8 lg:px-10">
+          <div className="mx-auto flex w-full max-w-[1180px] flex-col gap-5">
+            <section
+              className="rounded-xl border p-5 sm:p-6"
+              style={{
+                backgroundColor: "var(--cd-surface)",
+                borderColor: "var(--cd-border-subtle)",
+              }}
+            >
               <Link
                 to="/org/events"
-                className="inline-flex items-center gap-1.5 text-xs font-bold text-[var(--cd-primary)] hover:opacity-75 transition-opacity"
+                className="mb-3 inline-flex items-center gap-1.5 text-sm font-medium text-[var(--cd-primary-text)] transition-colors hover:text-[var(--cd-primary)]"
               >
-                <CalendarDays size={12} />
+                <CalendarDays size={14} />
                 {eventName ?? "Unknown Event"}
               </Link>
-              <h1
-                className="text-2xl font-black leading-tight text-[var(--cd-text)]"
+
+              <h2
+                className="max-w-4xl text-2xl font-semibold leading-tight tracking-tight sm:text-3xl"
+                style={{ color: "var(--cd-text)" }}
               >
                 {task.title}
-              </h1>
-              <p
-                className="text-sm leading-relaxed text-[var(--cd-text-2)]"
-              >
+              </h2>
+              <p className="mt-3 max-w-3xl text-sm leading-6" style={{ color: "var(--cd-text-2)" }}>
                 {task.description}
               </p>
-            </div>
 
-            {/* Badges row */}
-            <div className="flex flex-wrap gap-2">
-              <StatusBadge status={task.status} />
-              <PriorityBadge priority={task.priority} />
-              {subCfg && (
-                <span
-                  className={`inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold ${subCfg.bg} ${subCfg.text}`}
-                >
-                  {subCfg.label}
-                </span>
-              )}
-              {task.isMandatory && (
-                <span
-                  className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-semibold"
-                  style={{
-                    backgroundColor: "var(--cd-primary-subtle)",
-                    color: "var(--cd-primary-text)",
-                  }}
-                >
-                  <Flag size={10} /> Mandatory
-                </span>
-              )}
-            </div>
+              <div className="mt-5 flex flex-wrap items-center gap-2">
+                <StatusBadge status={task.status} />
+                <PriorityBadge priority={task.priority} />
+                {subCfg && (
+                  <span
+                    className={`inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ${subCfg.bg} ${subCfg.text}`}
+                  >
+                    {subCfg.label}
+                  </span>
+                )}
+                {task.isMandatory && (
+                  <span
+                    className="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium"
+                    style={{
+                      backgroundColor: "var(--cd-surface-2)",
+                      color: "var(--cd-text-2)",
+                    }}
+                  >
+                    Required
+                  </span>
+                )}
+              </div>
+            </section>
 
-            {/* Change Status */}
-            <div className="flex flex-col gap-3">
+            <section
+              className="rounded-xl border p-4 sm:p-5"
+              style={{
+                backgroundColor: "var(--cd-surface)",
+                borderColor: "var(--cd-border-subtle)",
+              }}
+            >
               <p
-                className="text-[10px] font-bold uppercase tracking-widest text-[var(--cd-text-muted)]"
+                className="mb-3 text-[11px] font-semibold uppercase tracking-wider"
+                style={{ color: "var(--cd-text-muted)" }}
               >
                 Change Status
               </p>
-              <div className="flex gap-2 p-1.5 rounded-2xl bg-[var(--cd-surface-2)] border border-[var(--cd-border-subtle)]">
-                {(["todo", "in-progress", "completed"] as const).map((s) => {
-                  const isActive = task.status === s;
+              <div className="grid gap-2 rounded-2xl border p-1.5 sm:grid-cols-3" style={{ backgroundColor: "var(--cd-surface-2)", borderColor: "rgba(255,255,255,0.05)" }}>
+                {(["todo", "in-progress", "completed"] as const).map((status) => {
+                  const isActive = task.status === status;
+                  const iconClass = isActive ? "!text-[#3B82F6] drop-shadow-[0_0_6px_rgba(59,130,246,0.45)]"
+                  : "text-current";
                   const icons = {
-                    "todo":        <Circle size={12} />,
-                    "in-progress": <Zap size={12} />,
-                    "completed":   <CheckCircle2 size={12} />,
+                    todo: <Circle size={14} className={iconClass} />,
+                    "in-progress": <Zap size={14} className={iconClass} />,
+                    completed: <CheckCircle2 size={14} className={iconClass} />,
                   };
                   return (
                     <button
-                      key={s}
-                      onClick={() => void handleStatusChange(s)}
+                      key={status}
+                      onClick={() => void handleStatusChange(status)}
                       disabled={isActive || updateTask.isPending}
-                      className={`
-                        flex-1 flex items-center justify-center gap-1.5 py-2 rounded-xl text-xs font-bold transition-all
-                        ${isActive 
-                          ? "bg-[var(--cd-surface)] text-[var(--cd-primary)] shadow-sm border border-[var(--cd-border)]" 
-                          : "text-[var(--cd-text-2)] hover:text-[var(--cd-text)] hover:bg-[var(--cd-hover)] border border-transparent"}
-                        disabled:opacity-40 disabled:cursor-not-allowed
-                      `}
+                      className={`flex items-center justify-center gap-2.5 rounded-xl px-3 py-2.5 text-sm transition-all duration-200 disabled:cursor-not-allowed ${
+                        isActive
+                          ? "bg-[var(--cd-surface-3)] text-[var(--cd-primary)] font-bold shadow-lg shadow-[var(--cd-primary-subtle)] border border-[var(--cd-border-subtle)]"
+                          : "text-[var(--cd-text-2)] font-medium hover:bg-[var(--cd-hover)] hover:text-[var(--cd-text)]"
+                      }`}
                     >
-                      {icons[s]}
-                      {s === "todo" ? "Todo" : s === "in-progress" ? "Working" : "Done"}
+                      {icons[status]}
+                      {status === "todo" ? "Todo" : status === "in-progress" ? "Working" : "Done"}
                     </button>
                   );
                 })}
               </div>
-            </div>
+            </section>
+
+            <section className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+              <MetaCard
+                icon={<Clock size={12} />}
+                label="Deadline"
+                value={format(parseISO(task.deadline), "MMM d, yyyy")}
+                detail={formatDistanceToNow(parseISO(task.deadline), { addSuffix: true })}
+                danger={isOverdue}
+              />
+
+              {task.points !== undefined && (
+                <MetaCard
+                  icon={<Star size={12} />}
+                  label="Points"
+                  value={String(task.points)}
+                  detail="hackathon pts"
+                />
+              )}
 
-            {/* Meta grid */}
-            <div className="grid grid-cols-2 gap-3">
-              {/* Deadline */}
+              <MetaCard
+                icon={<UploadCloud size={12} />}
+                label="Submission"
+                value={SUBMISSION_TYPE_CONFIG[task.submissionType]?.label ?? task.submissionType}
+                detail={task.allowLateSubmission ? "Late allowed" : "On-time only"}
+              />
+
+              <MetaCard
+                icon={<Activity size={12} />}
+                label="Updated"
+                value={formatDistanceToNow(parseISO(task.updatedAt), { addSuffix: true })}
+                detail={`by ${task.createdBy}`}
+              />
+            </section>
+
+            <section className="grid gap-5 lg:grid-cols-[minmax(0,1fr)_360px]">
               <div
-                className="flex flex-col gap-1 p-4 rounded-2xl border"
+                className="rounded-xl border p-5"
                 style={{
-                  backgroundColor:
-                    isDeadlinePast && task.status !== "completed"
-                      ? "var(--cd-danger-subtle)"
-                      : "var(--cd-surface-2)",
-                  borderColor:
-                    isDeadlinePast && task.status !== "completed"
-                      ? "var(--cd-danger)"
-                      : "var(--cd-border)",
+                  backgroundColor: "var(--cd-surface)",
+                  borderColor: "var(--cd-border-subtle)",
                 }}
               >
                 <div
-                  className="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-wider"
+                  className="mb-4 flex items-center gap-2 text-[11px] font-semibold uppercase tracking-wider"
                   style={{ color: "var(--cd-text-muted)" }}
                 >
-                  <Clock size={11} /> Deadline
+                  <Users size={13} />
+                  Assigned To ({task.assignedTo.length})
+                </div>
+                <div className="grid gap-2 sm:grid-cols-2">
+                  {task.assignedTo.map((member) => (
+                    <div
+                      key={member.id}
+                      className="flex items-center gap-3 rounded-lg border p-3"
+                      style={{
+                        backgroundColor: "var(--cd-surface-2)",
+                        borderColor: "var(--cd-border-subtle)",
+                      }}
+                    >
+                      <Avatar
+                        name={member.name}
+                        src={member.avatar}
+                        role={member.role}
+                        size="md"
+                        showTooltip={false}
+                      />
+                      <div className="min-w-0">
+                        <p className="truncate text-sm font-medium" style={{ color: "var(--cd-text)" }}>
+                          {member.name}
+                        </p>
+                        <p className="truncate text-xs" style={{ color: "var(--cd-text-muted)" }}>
+                          {member.role}
+                        </p>
+                      </div>
+                    </div>
+                  ))}
                 </div>
-                <p
-                  className="text-sm font-bold mt-0.5"
-                  style={{
-                    color:
-                      isDeadlinePast && task.status !== "completed"
-                        ? "var(--cd-danger)"
-                        : "var(--cd-text)",
-                  }}
-                >
-                  {format(parseISO(task.deadline), "MMM d, yyyy")}
-                </p>
-                <p className="text-xs" style={{ color: "var(--cd-text-muted)" }}>
-                  {formatDistanceToNow(parseISO(task.deadline), { addSuffix: true })}
-                </p>
-                {isDeadlinePast && task.status !== "completed" && (
-                  <span
-                    className="text-[10px] font-bold px-1.5 py-0.5 rounded-md self-start animate-pulse"
-                    style={{
-                      color: "var(--cd-danger)",
-                      backgroundColor: "var(--cd-danger-subtle)",
-                    }}
-                  >
-                    OVERDUE
-                  </span>
-                )}
               </div>
 
-              {/* Points */}
-              {task.points !== undefined && (
+              {task.technologies && task.technologies.length > 0 && (
                 <div
-                  className="flex flex-col gap-1 p-4 rounded-2xl border"
+                  className="rounded-xl border p-5"
                   style={{
-                    backgroundColor: "rgba(251,191,36,0.08)",
-                    borderColor: "rgba(251,191,36,0.25)",
+                    backgroundColor: "var(--cd-surface)",
+                    borderColor: "var(--cd-border-subtle)",
                   }}
                 >
-                  <div
-                    className="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-wider"
-                    style={{ color: "var(--cd-warning)" }}
+                  <p
+                    className="mb-4 text-[11px] font-semibold uppercase tracking-wider"
+                    style={{ color: "var(--cd-text-muted)" }}
                   >
-                    <Star size={11} /> Points
-                  </div>
-                  <p className="text-2xl font-extrabold leading-none mt-0.5" style={{ color: "var(--cd-warning)" }}>
-                    {task.points}
-                  </p>
-                  <p className="text-xs" style={{ color: "var(--cd-text-muted)" }}>
-                    hackathon pts
+                    Technologies
                   </p>
+                  <div className="flex flex-wrap gap-1.5">
+                    {task.technologies.map((tech) => (
+                      <TechBadge key={tech.id} tech={tech} />
+                    ))}
+                  </div>
                 </div>
               )}
+            </section>
 
-              {/* Submission type */}
-              <div
-                className="flex flex-col gap-1 p-4 rounded-2xl border"
-                style={{
-                  backgroundColor: "var(--cd-surface-2)",
-                  borderColor: "var(--cd-border)",
-                }}
-              >
-                <div
-                  className="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-wider"
-                  style={{ color: "var(--cd-text-muted)" }}
-                >
-                  <UploadCloud size={11} /> Submission
-                </div>
-                <p className="text-sm font-bold mt-0.5" style={{ color: "var(--cd-text)" }}>
-                  {SUBMISSION_TYPE_CONFIG[task.submissionType]?.label ?? task.submissionType}
-                </p>
-                <p className="text-xs" style={{ color: "var(--cd-text-muted)" }}>
-                  {task.allowLateSubmission ? "Late allowed" : "On-time only"}
-                </p>
-              </div>
-
-              {/* Last updated */}
-              <div
-                className="flex flex-col gap-1 p-4 rounded-2xl border"
-                style={{
-                  backgroundColor: "var(--cd-surface-2)",
-                  borderColor: "var(--cd-border)",
-                }}
-              >
-                <div
-                  className="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-wider"
-                  style={{ color: "var(--cd-text-muted)" }}
-                >
-                  <Activity size={11} /> Updated
-                </div>
-                <p className="text-sm font-bold mt-0.5" style={{ color: "var(--cd-text)" }}>
-                  {formatDistanceToNow(parseISO(task.updatedAt), { addSuffix: true })}
-                </p>
-                <p className="text-xs" style={{ color: "var(--cd-text-muted)" }}>
-                  by {task.createdBy}
-                </p>
-              </div>
-            </div>
-
-            {/* Technologies */}
-            {task.technologies && task.technologies.length > 0 && (
-              <div className="flex flex-col gap-2">
-                <p
-                  className="text-[10px] font-bold uppercase tracking-wider"
-                  style={{ color: "var(--cd-text-muted)" }}
-                >
-                  Technologies
-                </p>
-                <div className="flex flex-wrap gap-1.5">
-                  {task.technologies.map((tech) => (
-                    <TechBadge key={tech.id} tech={tech} />
-                  ))}
-                </div>
-              </div>
-            )}
-
-            {/* Assignees */}
-            <div className="flex flex-col gap-3">
+            <section
+              className="overflow-hidden rounded-xl border"
+              style={{
+                backgroundColor: "var(--cd-surface)",
+                borderColor: "var(--cd-border-subtle)",
+              }}
+            >
               <div
-                className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-widest text-[var(--cd-text-muted)]"
+                className="flex gap-1 overflow-x-auto border-b px-3"
+                style={{ borderColor: "var(--cd-border-subtle)" }}
               >
-                <Users size={12} />
-                Assigned To ({task.assignedTo.length})
-              </div>
-              <div className="flex flex-col gap-2.5">
-                {task.assignedTo.map((m, idx) => (
-                  <div
-                    key={m.id}
-                    className="flex items-center gap-3 p-3.5 rounded-2xl border border-[var(--cd-border)] bg-[var(--cd-surface-2)] hover:border-[var(--cd-primary)] hover:bg-[var(--cd-primary-subtle)] transition-all duration-200 group cursor-default"
+                {(["submissions", "activity", "comments"] as const).map((tab) => (
+                  <button
+                    key={tab}
+                    onClick={() => setActiveTab(tab)}
+                    className="relative flex items-center gap-2 px-3 py-3 text-sm font-medium capitalize whitespace-nowrap transition-colors"
+                    style={{ color: activeTab === tab ? "var(--cd-text)" : "var(--cd-text-2)" }}
                   >
-                    <div className="relative shrink-0">
-                      <Avatar
-                        name={m.name}
-                        src={m.avatar}
-                        role={m.role}
-                        size="md"
-                        showTooltip={false}
-                        ring
-                        ringColor="ring-[var(--cd-surface)]"
-                      />
-                      <span
-                        className={`absolute -bottom-0.5 -right-0.5 w-3 h-3 rounded-full border-2 border-[var(--cd-surface)] shadow-sm ${
-                          idx % 3 === 0 ? "bg-emerald-400" : idx % 3 === 1 ? "bg-amber-400" : "bg-gray-300"
-                        }`}
-                      />
-                    </div>
-                    <div className="min-w-0 flex-1">
-                      <p className="text-sm font-bold truncate text-[var(--cd-text)]">
-                        {m.name}
-                      </p>
-                      <p className="text-xs truncate text-[var(--cd-text-muted)]">
-                        {m.role}
-                      </p>
-                    </div>
-                    <div className="flex flex-col items-end gap-1.5 shrink-0">
+                    {tab}
+                    {tab !== "comments" && (
                       <span
-                        className="text-[10px] font-bold px-2 py-1 rounded-lg bg-[var(--cd-surface)] text-[var(--cd-text-muted)] transition-colors truncate max-w-[120px] border border-[var(--cd-border-subtle)]"
+                        className="rounded-md px-1.5 py-0.5 text-[11px] font-medium"
+                        style={{
+                          backgroundColor: activeTab === tab ? "var(--cd-primary-subtle)" : "var(--cd-surface-2)",
+                          color: activeTab === tab ? "var(--cd-primary-text)" : "var(--cd-text-muted)",
+                        }}
                       >
-                        {m.email}
+                        {tab === "submissions" ? submissions.length : activity.length}
                       </span>
+                    )}
+                    {activeTab === tab && (
                       <span
-                        className={`text-[9px] font-black px-2 py-0.5 rounded-full uppercase tracking-tighter ${
-                          idx % 3 === 0
-                            ? "bg-[var(--cd-success-subtle)] text-[var(--cd-success)]"
-                            : idx % 3 === 1
-                            ? "bg-[var(--cd-warning-subtle)] text-[var(--cd-warning)]"
-                            : "bg-[var(--cd-surface-3)] text-[var(--cd-text-muted)]"
-                        }`}
-                      >
-                        {idx % 3 === 0 ? "Online" : idx % 3 === 1 ? "Away" : "Offline"}
-                      </span>
-                    </div>
-                  </div>
+                        className="absolute inset-x-3 bottom-0 h-0.5 rounded-full"
+                        style={{ backgroundColor: "var(--cd-primary)" }}
+                      />
+                    )}
+                  </button>
                 ))}
               </div>
-            </div>
-          </div>
-
-          {/* ── RIGHT panel: submissions + activity ────────────────────────────── */}
-          <div
-            className="flex-1 flex flex-col overflow-hidden min-h-0"
-            style={{ backgroundColor: "var(--cd-bg)" }}
-          >
-            {/* Tab bar (Events-style) */}
-            <div
-              className="border-b px-5 flex gap-0 shrink-0"
-              style={{
-                backgroundColor: "var(--cd-surface)",
-                borderColor: "var(--cd-border)",
-              }}
-            >
-              {(["submissions", "activity", "comments"] as const).map((tab) => (
-                <button
-                  key={tab}
-                  onClick={() => setActiveTab(tab)}
-                  className="flex items-center gap-1.5 px-5 py-3.5 text-sm font-bold border-b-2 transition-colors capitalize whitespace-nowrap"
-                  style={{
-                    color: activeTab === tab ? "var(--cd-primary)" : "var(--cd-text-2)",
-                    borderColor: activeTab === tab ? "var(--cd-primary)" : "transparent",
-                  }}
-                >
-                  {tab}
-                  {tab === "submissions" && (
-                    <span
-                      className="px-2 py-0.5 rounded-full text-[10px] font-bold transition-colors"
-                      style={{
-                        backgroundColor: activeTab === tab ? "var(--cd-primary-subtle)" : "var(--cd-surface-3)",
-                        color: activeTab === tab ? "var(--cd-primary-text)" : "var(--cd-text-muted)",
-                      }}
-                    >
-                      {submissions.length}
-                    </span>
-                  )}
-                  {tab === "activity" && (
-                    <span
-                      className="px-2 py-0.5 rounded-full text-[10px] font-bold transition-colors"
-                      style={{
-                        backgroundColor: activeTab === tab ? "var(--cd-primary-subtle)" : "var(--cd-surface-3)",
-                        color: activeTab === tab ? "var(--cd-primary-text)" : "var(--cd-text-muted)",
-                      }}
-                    >
-                      {activity.length}
-                    </span>
-                  )}
-                  {tab === "comments" && (
-                    <span
-                      className="px-2 py-0.5 rounded-full text-[10px] font-bold transition-colors"
-                      style={{
-                        backgroundColor: activeTab === tab ? "var(--cd-primary-subtle)" : "var(--cd-surface-3)",
-                        color: activeTab === tab ? "var(--cd-primary-text)" : "var(--cd-text-muted)",
-                      }}
-                    >
-                      💬
-                    </span>
-                  )}
-                </button>
-              ))}
-            </div>
 
-            {/* Tab content */}
-            <div className="flex-1 overflow-auto p-5">
-              {activeTab === "submissions" ? (
-                <div className="flex flex-col gap-5">
-                  {reviewingSubmissionId && (
-                    <ReviewPanel
-                      submissionId={reviewingSubmissionId}
-                      taskId={task.id}
-                      currentTaskStatus={task.status}
-                      onSuccess={() => {
-                        setReviewingSubmissionId(null);
-                        addToast("success", "Review submitted!", "The submission has been reviewed.");
-                      }}
-                      onCancel={() => setReviewingSubmissionId(null)}
+              <div className="p-4 sm:p-5">
+                {activeTab === "submissions" ? (
+                  <div className="flex flex-col gap-5">
+                    {reviewingSubmissionId && (
+                      <ReviewPanel
+                        submissionId={reviewingSubmissionId}
+                        taskId={task.id}
+                        currentTaskStatus={task.status}
+                        onSuccess={() => {
+                          setReviewingSubmissionId(null);
+                          addToast("success", "Review submitted!", "The submission has been reviewed.");
+                        }}
+                        onCancel={() => setReviewingSubmissionId(null)}
+                      />
+                    )}
+                    <SubmissionList
+                      submissions={submissions}
+                      isLoading={subLoading}
+                      onReview={setReviewingSubmissionId}
                     />
-                  )}
-                  <SubmissionList
-                    submissions={submissions}
-                    isLoading={subLoading}
-                    onReview={setReviewingSubmissionId}
-                  />
-                </div>
-              ) : activeTab === "comments" ? (
-                <CommentsSection taskId={task.id} />
-              ) : (
-                /* Activity timeline */
-                <div className="flex flex-col gap-1">
-                  <h3 className="text-sm font-bold mb-5" style={{ color: "var(--cd-text)" }}>
-                    Activity Timeline
-                  </h3>
-
-                  {activity.length === 0 ? (
-                    <p
-                      className="text-sm text-center py-10"
-                      style={{ color: "var(--cd-text-muted)" }}
-                    >
-                      No activity recorded yet.
-                    </p>
-                  ) : (
-                    <ol
-                      className="relative ml-4 border-l-2"
-                      style={{ borderColor: "var(--cd-border)" }}
-                    >
-                      {activity.map((event) => {
-                        const iconCls  = ACTIVITY_COLOR[event.type] ?? "bg-gray-100 text-gray-500";
-                        const iconChar = ACTIVITY_ICON[event.type]  ?? "•";
-                        return (
-                          <li key={event.id} className="mb-5 ml-5">
-                            {/* Icon node */}
-                            <span
-                              className={`absolute -left-3.5 flex w-7 h-7 items-center justify-center rounded-full text-xs font-bold border-2 shadow-sm ${iconCls}`}
-                              style={{ borderColor: "var(--cd-surface)" }}
-                            >
-                              {iconChar}
-                            </span>
-
-                            {/* Card */}
-                            <div
-                              className="ml-1 p-4 rounded-xl border shadow-sm"
-                              style={{
-                                backgroundColor: "var(--cd-surface)",
-                                borderColor: "var(--cd-border)",
-                              }}
-                            >
-                              <p className="text-sm font-semibold" style={{ color: "var(--cd-text)" }}>
-                                {event.description}
-                              </p>
-                              <div
-                                className="flex items-center gap-2 mt-1.5 flex-wrap"
-                                style={{ color: "var(--cd-text-muted)" }}
-                              >
-                                <span className="text-xs font-medium">{event.actor}</span>
-                                <span>·</span>
-                                <span className="text-xs">
-                                  {formatDistanceToNow(parseISO(event.timestamp), { addSuffix: true })}
-                                </span>
-                                <span>·</span>
-                                <span className="text-[10px]">
-                                  {format(parseISO(event.timestamp), "MMM d, h:mm a")}
-                                </span>
-                              </div>
-                            </div>
-                          </li>
-                        );
-                      })}
-                    </ol>
-                  )}
-                </div>
-              )}
-            </div>
+                  </div>
+                ) : activeTab === "comments" ? (
+                  <CommentsSection taskId={task.id} />
+                ) : (
+                  <ActivityTimeline activity={activity} />
+                )}
+              </div>
+            </section>
           </div>
-        </div>
+        </main>
       ) : null}
 
-      {/* Delete modal */}
       <ConfirmModal
         isOpen={showDeleteModal}
         title="Delete Task"
@@ -614,3 +447,110 @@ export default function TaskDetailPage() {
     </div>
   );
 }
+
+function MetaCard({
+  icon,
+  label,
+  value,
+  detail,
+  danger = false,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  value: string;
+  detail: string;
+  danger?: boolean;
+}) {
+  return (
+    <div
+      className="flex min-h-28 flex-col rounded-xl border p-4"
+      style={{
+        backgroundColor: danger ? "var(--cd-danger-subtle)" : "var(--cd-surface)",
+        borderColor: danger ? "var(--cd-danger-subtle)" : "var(--cd-border-subtle)",
+      }}
+    >
+      <div
+        className="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider"
+        style={{ color: danger ? "var(--cd-danger)" : "var(--cd-text-muted)" }}
+      >
+        {icon}
+        {label}
+      </div>
+      <p
+        className="mt-2 text-base font-semibold"
+        style={{ color: danger ? "var(--cd-danger)" : "var(--cd-text)" }}
+      >
+        {value}
+      </p>
+      <p className="mt-1 text-xs" style={{ color: "var(--cd-text-muted)" }}>
+        {detail}
+      </p>
+      {danger && (
+        <span
+          className="mt-2 w-fit rounded-md px-1.5 py-0.5 text-[10px] font-semibold"
+          style={{
+            backgroundColor: "var(--cd-danger-subtle)",
+            color: "var(--cd-danger)",
+          }}
+        >
+          OVERDUE
+        </span>
+      )}
+    </div>
+  );
+}
+
+function ActivityTimeline({
+  activity,
+}: {
+  activity: ReturnType<typeof useTaskActivity>["data"];
+}) {
+  if (!activity || activity.length === 0) {
+    return (
+      <p className="py-10 text-center text-sm" style={{ color: "var(--cd-text-muted)" }}>
+        No activity recorded yet.
+      </p>
+    );
+  }
+
+  return (
+    <ol className="relative ml-3 border-l" style={{ borderColor: "var(--cd-border-subtle)" }}>
+      {activity.map((event) => {
+        const iconCls = ACTIVITY_COLOR[event.type] ?? "bg-gray-100 text-gray-500";
+        const iconChar = ACTIVITY_ICON[event.type] ?? "*";
+        return (
+          <li key={event.id} className="mb-4 ml-5">
+            <span
+              className={`absolute -left-3 flex h-6 w-6 items-center justify-center rounded-full border text-xs font-semibold ${iconCls}`}
+              style={{ borderColor: "var(--cd-surface)" }}
+            >
+              {iconChar}
+            </span>
+
+            <div
+              className="rounded-lg border p-3"
+              style={{
+                backgroundColor: "var(--cd-surface-2)",
+                borderColor: "var(--cd-border-subtle)",
+              }}
+            >
+              <p className="text-sm font-medium" style={{ color: "var(--cd-text)" }}>
+                {event.description}
+              </p>
+              <div
+                className="mt-1.5 flex flex-wrap items-center gap-2 text-xs"
+                style={{ color: "var(--cd-text-muted)" }}
+              >
+                <span>{event.actor}</span>
+                <span>·</span>
+                <span>{formatDistanceToNow(parseISO(event.timestamp), { addSuffix: true })}</span>
+                <span>·</span>
+                <span>{format(parseISO(event.timestamp), "MMM d, h:mm a")}</span>
+              </div>
+            </div>
+          </li>
+        );
+      })}
+    </ol>
+  );
+}
diff --git a/src/features/Tasks/v1/pages/TaskManagementPage.tsx b/src/features/Tasks/v1/pages/TaskManagementPage.tsx
index d8b4e4d..db53d88 100644
--- a/src/features/Tasks/v1/pages/TaskManagementPage.tsx
+++ b/src/features/Tasks/v1/pages/TaskManagementPage.tsx
@@ -120,32 +120,38 @@ export default function TaskManagementPage() {
 
       {/* ── Event selector bar ──────────────────────────────────── */}
       <div
-        className="border-b px-6 sm:px-10 py-4 flex items-center gap-4 flex-wrap sticky top-0 z-30"
-        style={{ backgroundColor: "var(--cd-surface)", borderColor: "var(--cd-border)", backdropFilter: "blur(12px)" }}
+        className="sticky top-0 z-30 border-b px-5 py-3 sm:px-8 lg:px-10"
+        style={{
+          backgroundColor: "color-mix(in srgb, var(--cd-surface) 92%, transparent)",
+          borderColor: "var(--cd-border-subtle)",
+          backdropFilter: "blur(16px)",
+        }}
       >
-        <span
-          className="text-[10px] font-black uppercase tracking-widest shrink-0"
-          style={{ color: "var(--cd-text-muted)" }}
-        >
-          Selected Event
-        </span>
-        <EventDropdown selectedEventId={selectedEventId} onSelect={handleEventSelect} />
-        {selectedEventId && (
-          <button
-            onClick={() => void refetch()}
-            title="Refresh tasks"
-            className="p-2 rounded-xl transition-all hover:bg-[var(--cd-hover)] text-[var(--cd-text-muted)] hover:text-[var(--cd-text)] active:scale-95"
+        <div className="mx-auto flex w-full max-w-[1440px] flex-wrap items-center gap-3">
+          <span
+            className="text-[10px] font-semibold uppercase tracking-wider shrink-0"
+            style={{ color: "var(--cd-text-muted)" }}
           >
-            <RefreshCw size={15} />
-          </button>
-        )}
+            Event
+          </span>
+          <EventDropdown selectedEventId={selectedEventId} onSelect={handleEventSelect} />
+          {selectedEventId && (
+            <button
+              onClick={() => void refetch()}
+              title="Refresh tasks"
+              className="inline-flex h-8 w-8 items-center justify-center rounded-lg transition-colors text-[var(--cd-text-muted)] hover:bg-[var(--cd-hover)] hover:text-[var(--cd-text)] active:scale-95"
+            >
+              <RefreshCw size={14} />
+            </button>
+          )}
+        </div>
       </div>
 
       {/* ── Main content area ───────────────────────────────────── */}
       <div className="flex-1 flex flex-col" style={{ backgroundColor: "var(--cd-bg)" }}>
         {!selectedEventId ? (
           /* No event selected */
-          <div className="min-h-[60vh] flex items-center justify-center p-4">
+          <div className="min-h-[70vh] flex items-center justify-center p-6">
             {events.length === 0 ? (
               <EmptyState
                 variant="no-event"
@@ -154,7 +160,7 @@ export default function TaskManagementPage() {
                 action={
                   <button
                     onClick={() => navigate("/org/create-event")}
-                    className="cd-btn cd-btn-primary"
+                    className="cd-btn cd-btn-primary px-8 py-3 rounded-2xl shadow-xl shadow-[var(--cd-primary-subtle)] hover:scale-105 transition-all"
                   >
                     Create First Event
                   </button>
@@ -170,7 +176,7 @@ export default function TaskManagementPage() {
           </div>
         ) : isError ? (
           /* Error state */
-          <div className="min-h-[60vh] flex items-center justify-center p-4">
+          <div className="min-h-[70vh] flex items-center justify-center p-6">
             <EmptyState
               variant="error"
               title="Failed to load tasks"
@@ -178,7 +184,7 @@ export default function TaskManagementPage() {
               action={
                 <button
                   onClick={() => void refetch()}
-                  className="cd-btn cd-btn-secondary flex items-center gap-2"
+                  className="cd-btn cd-btn-secondary flex items-center gap-2 px-6 py-2.5 rounded-xl border border-[var(--cd-border)] hover:bg-[var(--cd-hover)]"
                 >
                   <RefreshCw size={14} /> Retry
                 </button>
@@ -195,18 +201,29 @@ export default function TaskManagementPage() {
               filteredCount={tasks.length}
               tasks={allTasks}
             />
-            <div className="p-6 sm:p-10" style={{ backgroundColor: "var(--cd-bg)" }}>
+            
+            <main className="mx-auto w-full max-w-[1440px] px-4 py-5 sm:px-8 sm:py-8 lg:px-10">
               {/* Desktop: table */}
               <div className="hidden md:block">
-                <TaskTable
-                  tasks={tasks}
-                  isLoading={isLoading}
-                  onDelete={setTaskToDelete}
-                  onCreateTask={handleCreate}
-                  hasFilters={hasActiveFilters}
-                  onResetFilters={resetFilters}
-                />
+                <div 
+                  className="overflow-hidden rounded-xl border transition-all duration-300" 
+                  style={{ 
+                    backgroundColor: "var(--cd-surface)", 
+                    borderColor: "var(--cd-border-subtle)",
+                    boxShadow: "0 18px 60px -36px var(--cd-shadow-md)"
+                  }}
+                >
+                  <TaskTable
+                    tasks={tasks}
+                    isLoading={isLoading}
+                    onDelete={setTaskToDelete}
+                    onCreateTask={handleCreate}
+                    hasFilters={hasActiveFilters}
+                    onResetFilters={resetFilters}
+                  />
+                </div>
               </div>
+              
               {/* Mobile: card list */}
               <div className="block md:hidden pb-10">
                 <TaskCardList
@@ -218,11 +235,12 @@ export default function TaskManagementPage() {
                   onResetFilters={resetFilters}
                 />
               </div>
-            </div>
+            </main>
           </div>
         )}
       </div>
 
+
       {/* ── Confirm delete modal ────────────────────────────────── */}
       <ConfirmModal
         isOpen={!!taskToDelete}
diff --git a/src/features/Tasks/v1/utils/techBadgeStyle.ts b/src/features/Tasks/v1/utils/techBadgeStyle.ts
index cda3b46..179ffb6 100644
--- a/src/features/Tasks/v1/utils/techBadgeStyle.ts
+++ b/src/features/Tasks/v1/utils/techBadgeStyle.ts
@@ -11,8 +11,8 @@ export function techBadgeStyle(id: string): CSSProperties {
   const accent = accentFor(id);
 
   return {
-    backgroundColor: `color-mix(in srgb, ${accent} 14%, var(--cd-surface))`,
-    borderColor: `color-mix(in srgb, ${accent} 28%, var(--cd-border))`,
-    color: `color-mix(in srgb, ${accent} 72%, var(--cd-text))`,
+    backgroundColor: `color-mix(in srgb, ${accent} 8%, var(--cd-surface))`,
+    borderColor: `color-mix(in srgb, ${accent} 18%, var(--cd-border-subtle))`,
+    color: `color-mix(in srgb, ${accent} 62%, var(--cd-text))`,
   };
 }