diff --git a/src/App.tsx b/src/App.tsx
index a06e4ed..4cd5478 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,6 +2,20 @@ import { useEffect } from "react";
 
 import { BrowserRouter } from "react-router-dom";
 
+import DashboardPage from "./features/Dashboard/v1/Pages/DashboardPage";
+import MemberPage from "./features/Member/v1/Pages/MemberPage";
+import LoginUserTemplate from "./features/template/LoginUserTemplate";
+import AddMemberPage from "./features/AddMember/v1/Page/AddMemberPage";
+import CreateNewEvent from "./features/Events/v1/Pages/CreateNewEvent";
+import Contact from "./features/Contact_And_Support/v1/Pages/Contact";
+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 TaskListPage from "./features/MemberTask/pages/TaskListPage";
+import TaskDetailPage from "./features/MemberTask/pages/TaskDetailPage";
+import CreateTaskPage from "./features/MemberTask/pages/CreateTaskPage";
+import EditTaskPage from "./features/MemberTask/pages/EditTaskPage";
+import { PermissionProvider } from "./features/MemberTask/context/PermissionContext";
 import "./App.css";
 
 import { dashboardData } from "./features/Member/v1/mock/dashboardData";
@@ -19,9 +33,65 @@ function App() {
   const user = dashboardData.user;
 
   return (
+    <PermissionProvider>
     <ThemeProvider attribute="class" defaultTheme="light">
       <BrowserRouter>
 
+    <BrowserRouter>
+      <Routes>
+        {/* Public Routes */}
+        <Route path="/" element={<LoginPage />} />
+        <Route path="/signup" element={<SignUpPage />} />
+
+        {/* Protected / Org Layout */}
+        <Route path="/org" element={<LoginUserTemplate />}>
+          {/* Protected Dashboard */}
+          <Route
+            index
+            element={
+              <ProtectedRoute user={user} allowedRoles={["Member", "Admin"]}>
+                <DashboardPage />
+              </ProtectedRoute>
+            }
+            />
+
+          <Route
+            path="dashboard"
+            element={
+              <ProtectedRoute user={user} allowedRoles={["Member", "Admin"]}>
+                <DashboardPage />
+              </ProtectedRoute>
+            }
+            />
+
+          {/* Other routes (not restricted) */}
+          <Route path="member" element={<MemberPage />} />
+          <Route path="add-member" element={<AddMemberPage />} />
+          <Route path="events" element={<ViewEvent />} />
+          <Route path="create-event" element={<CreateNewEvent />} />
+          <Route path="contact" element={<Contact />} />
+
+          {/* Task System */}
+          <Route path="tasks" element={<TaskListPage />} />
+          <Route path="tasks/create" element={<CreateTaskPage />} />
+          <Route path="tasks/:taskId" element={<TaskDetailPage />} />
+          <Route path="tasks/:taskId/edit" element={<EditTaskPage />} />
+
+          <Route path="*" element={<div>404 Not Found</div>} />
+        </Route>
+
+        <Route
+          path="/unauthorized"
+          element={
+            <div className="flex items-center justify-center h-screen text-red-500 text-xl">
+              Unauthorized Access
+            </div>
+          }
+        />
+      </Routes>
+    </BrowserRouter>
+    </PermissionProvider>
+            </ThemeProvider>
        <OrgRoute />
 
        <MemberRoutes />
diff --git a/src/features/MemberTask/components/common/ConfirmModal.tsx b/src/features/MemberTask/components/common/ConfirmModal.tsx
new file mode 100644
index 0000000..78df90e
--- /dev/null
+++ b/src/features/MemberTask/components/common/ConfirmModal.tsx
@@ -0,0 +1,38 @@
+interface Props {
+  title: string;
+  message: string;
+  confirmLabel?: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export default function ConfirmModal({
+  title,
+  message,
+  confirmLabel = "Confirm",
+  onConfirm,
+  onCancel,
+}: Props) {
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
+      <div className="bg-white rounded-xl shadow-xl p-6 w-full max-w-sm mx-4">
+        <h3 className="text-base font-semibold text-gray-900 mb-2">{title}</h3>
+        <p className="text-sm text-gray-500 mb-6">{message}</p>
+        <div className="flex gap-3 justify-end">
+          <button
+            onClick={onCancel}
+            className="px-4 py-2 text-sm rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50 transition-colors"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={onConfirm}
+            className="px-4 py-2 text-sm rounded-lg bg-red-500 text-white hover:bg-red-600 transition-colors"
+          >
+            {confirmLabel}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/features/MemberTask/components/common/PriorityBadge.tsx b/src/features/MemberTask/components/common/PriorityBadge.tsx
new file mode 100644
index 0000000..d76599a
--- /dev/null
+++ b/src/features/MemberTask/components/common/PriorityBadge.tsx
@@ -0,0 +1,17 @@
+import type { TaskPriority } from "../../types/task.types";
+
+const config: Record<TaskPriority, { label: string; className: string }> = {
+  low: { label: "Low", className: "bg-gray-50 text-gray-500 border-gray-200" },
+  medium: { label: "Medium", className: "bg-orange-50 text-orange-500 border-orange-200" },
+  high: { label: "High", className: "bg-red-50 text-red-500 border-red-200" },
+  urgent: { label: "Urgent", className: "bg-red-100 text-red-700 border-red-300 font-semibold" },
+};
+
+export default function PriorityBadge({ priority }: { priority: TaskPriority }) {
+  const { label, className } = config[priority];
+  return (
+    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border ${className}`}>
+      {label}
+    </span>
+  );
+}
diff --git a/src/features/MemberTask/components/common/SkeletonLoader.tsx b/src/features/MemberTask/components/common/SkeletonLoader.tsx
new file mode 100644
index 0000000..f9515e9
--- /dev/null
+++ b/src/features/MemberTask/components/common/SkeletonLoader.tsx
@@ -0,0 +1,14 @@
+export default function SkeletonLoader({ rows = 5 }: { rows?: number }) {
+  return (
+    <div className="space-y-3 animate-pulse">
+      {Array.from({ length: rows }).map((_, i) => (
+        <div key={i} className="flex items-center gap-4 p-4 bg-white rounded-xl border border-gray-100">
+          <div className="h-4 bg-gray-200 rounded w-1/3" />
+          <div className="h-4 bg-gray-200 rounded w-1/6" />
+          <div className="h-4 bg-gray-200 rounded w-1/6" />
+          <div className="h-4 bg-gray-200 rounded w-1/6 ml-auto" />
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/src/features/MemberTask/components/common/StatusBadge.tsx b/src/features/MemberTask/components/common/StatusBadge.tsx
new file mode 100644
index 0000000..d24f7ec
--- /dev/null
+++ b/src/features/MemberTask/components/common/StatusBadge.tsx
@@ -0,0 +1,17 @@
+import type { TaskStatus } from "../../types/task.types";
+
+const config: Record<TaskStatus, { label: string; className: string }> = {
+  todo: { label: "To Do", className: "bg-gray-100 text-gray-600 border-gray-200" },
+  "in-progress": { label: "In Progress", className: "bg-blue-50 text-blue-600 border-blue-200" },
+  review: { label: "In Review", className: "bg-yellow-50 text-yellow-600 border-yellow-200" },
+  completed: { label: "Completed", className: "bg-green-50 text-green-600 border-green-200" },
+};
+
+export default function StatusBadge({ status }: { status: TaskStatus }) {
+  const { label, className } = config[status];
+  return (
+    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border ${className}`}>
+      {label}
+    </span>
+  );
+}
diff --git a/src/features/MemberTask/components/event/EventDropdown.tsx b/src/features/MemberTask/components/event/EventDropdown.tsx
new file mode 100644
index 0000000..0f62366
--- /dev/null
+++ b/src/features/MemberTask/components/event/EventDropdown.tsx
@@ -0,0 +1,38 @@
+import { MdEvent, MdExpandMore } from "react-icons/md";
+import type { Event } from "../../types/task.types";
+
+interface Props {
+  events: Event[];
+  selectedEventId: string | null;
+  onChange: (id: string) => void;
+}
+
+export default function EventDropdown({ events, selectedEventId, onChange }: Props) {
+  const selected = events.find((e) => e.id === selectedEventId);
+
+  return (
+    <div className="relative inline-flex items-center gap-2">
+      <MdEvent className="text-[#306ee8] text-lg shrink-0" />
+      <div className="relative">
+        <select
+          value={selectedEventId ?? ""}
+          onChange={(e) => onChange(e.target.value)}
+          className="appearance-none bg-white border border-gray-200 rounded-lg pl-3 pr-8 py-2 text-sm font-medium text-gray-700 cursor-pointer focus:outline-none focus:ring-2 focus:ring-[#306ee8]/30 focus:border-[#306ee8] transition-colors"
+        >
+          <option value="" disabled>
+            Select Event
+          </option>
+          {events.map((ev) => (
+            <option key={ev.id} value={ev.id}>
+              {ev.name}
+            </option>
+          ))}
+        </select>
+        <MdExpandMore className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-gray-400" />
+      </div>
+      {selected && (
+        <span className="text-xs text-gray-400 hidden sm:inline">— {selected.name}</span>
+      )}
+    </div>
+  );
+}
diff --git a/src/features/MemberTask/components/task/CommentSection.tsx b/src/features/MemberTask/components/task/CommentSection.tsx
new file mode 100644
index 0000000..72dc6b2
--- /dev/null
+++ b/src/features/MemberTask/components/task/CommentSection.tsx
@@ -0,0 +1,73 @@
+import { useState } from "react";
+import type { Comment } from "../../types/task.types";
+import { usePermissions } from "../../context/PermissionContext";
+
+interface Props {
+  comments: Comment[];
+  onAddComment: (content: string) => void;
+}
+
+export default function CommentSection({ comments, onAddComment }: Props) {
+  const { currentUserName } = usePermissions();
+  const [text, setText] = useState("");
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!text.trim()) return;
+    onAddComment(text.trim());
+    setText("");
+  };
+
+  return (
+    <div className="space-y-4">
+      <h3 className="text-sm font-semibold text-gray-700">Comments</h3>
+
+      <div className="space-y-3 max-h-64 overflow-y-auto pr-1">
+        {comments.length === 0 && (
+          <p className="text-sm text-gray-400">No comments yet.</p>
+        )}
+        {comments.map((c) => (
+          <div key={c.id} className="flex gap-3">
+            <div className="w-7 h-7 rounded-full bg-[#306ee8]/10 flex items-center justify-center text-xs font-bold text-[#306ee8] shrink-0">
+              {c.authorName[0]}
+            </div>
+            <div className="flex-1 bg-gray-50 rounded-lg px-3 py-2">
+              <div className="flex items-center gap-2 mb-1">
+                <span className="text-xs font-semibold text-gray-700">{c.authorName}</span>
+                <span className="text-xs text-gray-400">
+                  {new Date(c.createdAt).toLocaleDateString(undefined, {
+                    day: "numeric",
+                    month: "short",
+                  })}
+                </span>
+              </div>
+              <p className="text-sm text-gray-600">{c.content}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <form onSubmit={handleSubmit} className="flex gap-2">
+        <div className="w-7 h-7 rounded-full bg-[#306ee8]/10 flex items-center justify-center text-xs font-bold text-[#306ee8] shrink-0 mt-1">
+          {currentUserName[0]}
+        </div>
+        <div className="flex-1 flex gap-2">
+          <input
+            type="text"
+            value={text}
+            onChange={(e) => setText(e.target.value)}
+            placeholder="Add a comment..."
+            className="flex-1 text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-[#306ee8]/30 focus:border-[#306ee8]"
+          />
+          <button
+            type="submit"
+            disabled={!text.trim()}
+            className="px-4 py-2 text-sm font-medium bg-[#306ee8] text-white rounded-lg hover:bg-[#2558c9] disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+          >
+            Post
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}
diff --git a/src/features/MemberTask/components/task/SubmissionForm.tsx b/src/features/MemberTask/components/task/SubmissionForm.tsx
new file mode 100644
index 0000000..d5901f7
--- /dev/null
+++ b/src/features/MemberTask/components/task/SubmissionForm.tsx
@@ -0,0 +1,93 @@
+import { useState } from "react";
+import type { Submission } from "../../types/task.types";
+import { usePermissions } from "../../context/PermissionContext";
+import { MdCheckCircle, MdCancel, MdHourglassEmpty } from "react-icons/md";
+
+interface Props {
+  taskId: string;
+  deadline: string;
+  submissions: Submission[];
+  onSubmit: (content: string) => void;
+}
+
+const statusIcon = {
+  pending: <MdHourglassEmpty className="text-yellow-500" />,
+  approved: <MdCheckCircle className="text-green-500" />,
+  rejected: <MdCancel className="text-red-500" />,
+};
+
+export default function SubmissionForm({ deadline, submissions, onSubmit }: Props) {
+  const { hasPermission, currentUserId } = usePermissions();
+  const [content, setContent] = useState("");
+
+  const deadlinePassed = new Date() > new Date(deadline);
+  const mySubmissions = submissions.filter((s) => s.submittedBy === currentUserId);
+  const hasSubmitted = mySubmissions.length > 0;
+
+  const canSubmit =
+    (!hasSubmitted || hasPermission("MULTIPLE_SUBMISSION")) &&
+    (!deadlinePassed || hasPermission("LATE_SUBMISSION"));
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!content.trim() || !canSubmit) return;
+    onSubmit(content.trim());
+    setContent("");
+  };
+
+  return (
+    <div className="space-y-4">
+      <h3 className="text-sm font-semibold text-gray-700">Submissions</h3>
+
+      {/* Submission history */}
+      {mySubmissions.length > 0 && (
+        <div className="space-y-2">
+          {mySubmissions.map((sub) => (
+            <div key={sub.id} className="bg-gray-50 rounded-lg p-3 border border-gray-100">
+              <div className="flex items-center gap-2 mb-1">
+                {statusIcon[sub.status]}
+                <span className="text-xs font-medium text-gray-600 capitalize">{sub.status}</span>
+                <span className="text-xs text-gray-400 ml-auto">
+                  {new Date(sub.submittedAt).toLocaleDateString("en-IN", {
+                    day: "numeric",
+                    month: "short",
+                  })}
+                </span>
+              </div>
+              <p className="text-sm text-gray-700">{sub.content}</p>
+              {sub.reviewNote && (
+                <p className="text-xs text-gray-500 mt-1 italic">Review: {sub.reviewNote}</p>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Submit form */}
+      {canSubmit ? (
+        <form onSubmit={handleSubmit} className="space-y-2">
+          <textarea
+            value={content}
+            onChange={(e) => setContent(e.target.value)}
+            placeholder="Describe your submission or paste a link..."
+            rows={3}
+            className="w-full text-sm border border-gray-200 rounded-lg px-3 py-2 resize-none focus:outline-none focus:ring-2 focus:ring-[#306ee8]/30 focus:border-[#306ee8]"
+          />
+          <button
+            type="submit"
+            disabled={!content.trim()}
+            className="px-4 py-2 text-sm font-medium bg-[#306ee8] text-white rounded-lg hover:bg-[#2558c9] disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+          >
+            Submit Work
+          </button>
+        </form>
+      ) : (
+        <div className="text-sm text-gray-400 bg-gray-50 rounded-lg px-3 py-2 border border-gray-100">
+          {deadlinePassed && !hasPermission("LATE_SUBMISSION")
+            ? "Deadline has passed. Late submissions are not allowed."
+            : "You have already submitted. Multiple submissions are not allowed."}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/features/MemberTask/components/task/TaskDetail.tsx b/src/features/MemberTask/components/task/TaskDetail.tsx
new file mode 100644
index 0000000..28af87e
--- /dev/null
+++ b/src/features/MemberTask/components/task/TaskDetail.tsx
@@ -0,0 +1,254 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { MdArrowBack, MdEdit, MdDelete } from "react-icons/md";
+import type { Task, Submission, Comment, TaskStatus } from "../../types/task.types";
+import { usePermissions } from "../../context/PermissionContext";
+import StatusBadge from "../common/StatusBadge";
+import PriorityBadge from "../common/PriorityBadge";
+import ConfirmModal from "../common/ConfirmModal";
+import SubmissionForm from "./SubmissionForm";
+import CommentSection from "./CommentSection";
+
+interface Props {
+  task: Task;
+  submissions: Submission[];
+  comments: Comment[];
+  onDelete: (id: string) => void;
+  onStatusChange: (id: string, status: TaskStatus) => void;
+  onAddSubmission: (taskId: string, content: string) => void;
+  onAddComment: (taskId: string, content: string) => void;
+  onReview: (submissionId: string, status: "approved" | "rejected", note: string) => void;
+}
+
+const STATUS_OPTIONS: TaskStatus[] = ["todo", "in-progress", "review", "completed"];
+
+export default function TaskDetail({
+  task,
+  submissions,
+  comments,
+  onDelete,
+  onStatusChange,
+  onAddSubmission,
+  onAddComment,
+  onReview,
+}: Props) {
+  const navigate = useNavigate();
+  const { hasPermission } = usePermissions();
+  const [showDelete, setShowDelete] = useState(false);
+  const [reviewNote, setReviewNote] = useState("");
+  const [reviewTarget, setReviewTarget] = useState<string | null>(null);
+
+  const deadlinePassed = new Date() > new Date(task.deadline);
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-start gap-4">
+        <button
+          onClick={() => navigate("/org/tasks")}
+          className="p-2 rounded-lg border border-gray-200 text-gray-500 hover:bg-gray-50 transition-colors shrink-0"
+        >
+          <MdArrowBack />
+        </button>
+        <div className="flex-1 min-w-0">
+          <h1 className="text-xl font-semibold text-gray-900 truncate">{task.title}</h1>
+          <div className="flex flex-wrap items-center gap-2 mt-2">
+            <StatusBadge status={task.status} />
+            <PriorityBadge priority={task.priority} />
+            {deadlinePassed && (
+              <span className="text-xs text-red-500 font-medium">Deadline passed</span>
+            )}
+          </div>
+        </div>
+        <div className="flex gap-2 shrink-0">
+          {hasPermission("EDIT_TASK") && (
+            <button
+              onClick={() => navigate(`/org/tasks/${task.id}/edit`)}
+              className="flex items-center gap-1.5 px-3 py-2 text-sm border border-gray-200 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors"
+            >
+              <MdEdit className="text-base" /> Edit
+            </button>
+          )}
+          {hasPermission("DELETE_TASK") && (
+            <button
+              onClick={() => setShowDelete(true)}
+              className="flex items-center gap-1.5 px-3 py-2 text-sm border border-red-200 rounded-lg text-red-500 hover:bg-red-50 transition-colors"
+            >
+              <MdDelete className="text-base" /> Delete
+            </button>
+          )}
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* Left: Task info */}
+        <div className="lg:col-span-2 space-y-6">
+          {/* Description */}
+          <div className="bg-white rounded-xl border border-gray-100 p-5">
+            <h2 className="text-sm font-semibold text-gray-700 mb-3">Description</h2>
+            <p className="text-sm text-gray-600 leading-relaxed">{task.description}</p>
+            {task.tags && task.tags.length > 0 && (
+              <div className="flex gap-1.5 mt-4 flex-wrap">
+                {task.tags.map((tag) => (
+                  <span key={tag} className="text-xs bg-gray-100 text-gray-500 px-2 py-0.5 rounded-full">
+                    {tag}
+                  </span>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Submission */}
+          <div className="bg-white rounded-xl border border-gray-100 p-5">
+            <SubmissionForm
+              taskId={task.id}
+              deadline={task.deadline}
+              submissions={submissions}
+              onSubmit={(content) => onAddSubmission(task.id, content)}
+            />
+          </div>
+
+          {/* Review panel */}
+          {hasPermission("UPDATE_STATUS") && submissions.filter((s) => s.status === "pending").length > 0 && (
+            <div className="bg-white rounded-xl border border-gray-100 p-5">
+              <h3 className="text-sm font-semibold text-gray-700 mb-3">Review Submissions</h3>
+              <div className="space-y-3">
+                {submissions
+                  .filter((s) => s.status === "pending")
+                  .map((sub) => (
+                    <div key={sub.id} className="border border-gray-100 rounded-lg p-3 space-y-2">
+                      <div className="flex items-center justify-between">
+                        <span className="text-sm font-medium text-gray-700">{sub.submittedByName}</span>
+                        <span className="text-xs text-gray-400">
+                          {new Date(sub.submittedAt).toLocaleDateString("en-IN")}
+                        </span>
+                      </div>
+                      <p className="text-sm text-gray-600">{sub.content}</p>
+                      {reviewTarget === sub.id ? (
+                        <div className="space-y-2">
+                          <input
+                            type="text"
+                            value={reviewNote}
+                            onChange={(e) => setReviewNote(e.target.value)}
+                            placeholder="Review note (optional)"
+                            className="w-full text-sm border border-gray-200 rounded-lg px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-[#306ee8]/30"
+                          />
+                          <div className="flex gap-2">
+                            <button
+                              onClick={() => {
+                                onReview(sub.id, "approved", reviewNote);
+                                setReviewTarget(null);
+                                setReviewNote("");
+                              }}
+                              className="px-3 py-1.5 text-xs font-medium bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors"
+                            >
+                              Approve
+                            </button>
+                            <button
+                              onClick={() => {
+                                onReview(sub.id, "rejected", reviewNote);
+                                setReviewTarget(null);
+                                setReviewNote("");
+                              }}
+                              className="px-3 py-1.5 text-xs font-medium bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors"
+                            >
+                              Reject
+                            </button>
+                            <button
+                              onClick={() => setReviewTarget(null)}
+                              className="px-3 py-1.5 text-xs text-gray-500 hover:text-gray-700 transition-colors"
+                            >
+                              Cancel
+                            </button>
+                          </div>
+                        </div>
+                      ) : (
+                        <button
+                          onClick={() => setReviewTarget(sub.id)}
+                          className="text-xs text-[#306ee8] hover:underline"
+                        >
+                          Review
+                        </button>
+                      )}
+                    </div>
+                  ))}
+              </div>
+            </div>
+          )}
+
+          {/* Comments */}
+          <div className="bg-white rounded-xl border border-gray-100 p-5">
+            <CommentSection
+              comments={comments}
+              onAddComment={(content) => onAddComment(task.id, content)}
+            />
+          </div>
+        </div>
+
+        {/* Right: Meta */}
+        <div className="space-y-4">
+          <div className="bg-white rounded-xl border border-gray-100 p-5 space-y-4">
+            <h2 className="text-sm font-semibold text-gray-700">Details</h2>
+
+            <div className="space-y-3 text-sm">
+              <div className="flex justify-between">
+                <span className="text-gray-500">Assigned To</span>
+                <span className="font-medium text-gray-700">{task.assignedToName}</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-500">Deadline</span>
+                <span className={`font-medium ${deadlinePassed ? "text-red-500" : "text-gray-700"}`}>
+                  {new Date(task.deadline).toLocaleDateString("en-IN", {
+                    day: "numeric",
+                    month: "short",
+                    year: "numeric",
+                  })}
+                </span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-500">Created</span>
+                <span className="text-gray-700">
+                  {new Date(task.createdAt).toLocaleDateString("en-IN", {
+                    day: "numeric",
+                    month: "short",
+                  })}
+                </span>
+              </div>
+            </div>
+
+            {/* Status update */}
+            {hasPermission("UPDATE_STATUS") && (
+              <div className="pt-3 border-t border-gray-100">
+                <label className="block text-xs font-medium text-gray-600 mb-1.5">
+                  Update Status
+                </label>
+                <select
+                  value={task.status}
+                  onChange={(e) => onStatusChange(task.id, e.target.value as TaskStatus)}
+                  className="w-full text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-[#306ee8]/30 focus:border-[#306ee8]"
+                >
+                  {STATUS_OPTIONS.map((s) => (
+                    <option key={s} value={s} className="capitalize">{s}</option>
+                  ))}
+                </select>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {showDelete && (
+        <ConfirmModal
+          title="Delete Task"
+          message="This action cannot be undone. Are you sure?"
+          confirmLabel="Delete"
+          onConfirm={() => {
+            onDelete(task.id);
+            navigate("/org/tasks");
+          }}
+          onCancel={() => setShowDelete(false)}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/src/features/MemberTask/components/task/TaskForm.tsx b/src/features/MemberTask/components/task/TaskForm.tsx
new file mode 100644
index 0000000..8d57336
--- /dev/null
+++ b/src/features/MemberTask/components/task/TaskForm.tsx
@@ -0,0 +1,150 @@
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import type { Task, TaskFormData, TaskPriority } from "../../types/task.types";
+import { mockEvents, mockMembers } from "../../mock/taskMock";
+
+interface Props {
+  initial?: Task;
+  onSubmit: (data: TaskFormData) => void;
+  onCancel: () => void;
+  isSubmitting?: boolean;
+}
+
+export default function TaskForm({ initial, onSubmit, onCancel, isSubmitting }: Props) {
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm<TaskFormData>();
+
+  useEffect(() => {
+    if (initial) {
+      reset({
+        title: initial.title,
+        description: initial.description,
+        priority: initial.priority,
+        eventId: initial.eventId,
+        assignedTo: initial.assignedTo,
+        deadline: initial.deadline,
+        tags: initial.tags?.join(", ") ?? "",
+      });
+    }
+  }, [initial, reset]);
+
+  const priorities: TaskPriority[] = ["low", "medium", "high", "urgent"];
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+      <div>
+        <label className="block text-xs font-medium text-gray-600 mb-1">Title *</label>
+        <input
+          {...register("title", { required: "Title is required" })}
+          className="w-full text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-[#306ee8]/30 focus:border-[#306ee8]"
+          placeholder="Task title"
+        />
+        {errors.title && <p className="text-xs text-red-500 mt-1">{errors.title.message}</p>}
+      </div>
+
+      <div>
+        <label className="block text-xs font-medium text-gray-600 mb-1">Description *</label>
+        <textarea
+          {...register("description", { required: "Description is required" })}
+          rows={3}
+          className="w-full text-sm border border-gray-200 rounded-lg px-3 py-2 resize-none focus:outline-none focus:ring-2 focus:ring-[#306ee8]/30 focus:border-[#306ee8]"
+          placeholder="Describe the task..."
+        />
+        {errors.description && (
+          <p className="text-xs text-red-500 mt-1">{errors.description.message}</p>
+        )}
+      </div>
+
+      <div className="grid grid-cols-2 gap-4">
+        <div>
+          <label className="block text-xs font-medium text-gray-600 mb-1">Event *</label>
+          <select
+            {...register("eventId", { required: "Event is required" })}
+            className="w-full text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-[#306ee8]/30 focus:border-[#306ee8]"
+          >
+            <option value="">Select event</option>
+            {mockEvents.map((e) => (
+              <option key={e.id} value={e.id}>{e.name}</option>
+            ))}
+          </select>
+          {errors.eventId && <p className="text-xs text-red-500 mt-1">{errors.eventId.message}</p>}
+        </div>
+
+        <div>
+          <label className="block text-xs font-medium text-gray-600 mb-1">Priority *</label>
+          <select
+            {...register("priority", { required: true })}
+            className="w-full text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-[#306ee8]/30 focus:border-[#306ee8]"
+          >
+            <option value="">Select priority</option>
+            {priorities.map((p) => (
+              <option key={p} value={p} className="capitalize">{p}</option>
+            ))}
+          </select>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-2 gap-4">
+        <div>
+          <label className="block text-xs font-medium text-gray-600 mb-1">Assign To *</label>
+          <select
+            {...register("assignedTo", { required: "Assignee is required" })}
+            className="w-full text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-[#306ee8]/30 focus:border-[#306ee8]"
+          >
+            <option value="">Select member</option>
+            {mockMembers.map((m) => (
+              <option key={m.id} value={m.id}>{m.name}</option>
+            ))}
+          </select>
+          {errors.assignedTo && (
+            <p className="text-xs text-red-500 mt-1">{errors.assignedTo.message}</p>
+          )}
+        </div>
+
+        <div>
+          <label className="block text-xs font-medium text-gray-600 mb-1">Deadline *</label>
+          <input
+            type="date"
+            {...register("deadline", { required: "Deadline is required" })}
+            className="w-full text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-[#306ee8]/30 focus:border-[#306ee8]"
+          />
+          {errors.deadline && (
+            <p className="text-xs text-red-500 mt-1">{errors.deadline.message}</p>
+          )}
+        </div>
+      </div>
+
+      <div>
+        <label className="block text-xs font-medium text-gray-600 mb-1">
+          Tags <span className="text-gray-400">(comma separated)</span>
+        </label>
+        <input
+          {...register("tags")}
+          className="w-full text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-[#306ee8]/30 focus:border-[#306ee8]"
+          placeholder="frontend, design, api"
+        />
+      </div>
+
+      <div className="flex gap-3 pt-2">
+        <button
+          type="button"
+          onClick={onCancel}
+          className="flex-1 py-2 text-sm border border-gray-200 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors"
+        >
+          Cancel
+        </button>
+        <button
+          type="submit"
+          disabled={isSubmitting}
+          className="flex-1 py-2 text-sm font-medium bg-[#306ee8] text-white rounded-lg hover:bg-[#2558c9] disabled:opacity-50 transition-colors"
+        >
+          {isSubmitting ? "Saving..." : initial ? "Update Task" : "Create Task"}
+        </button>
+      </div>
+    </form>
+  );
+}
diff --git a/src/features/MemberTask/components/task/TaskTable.tsx b/src/features/MemberTask/components/task/TaskTable.tsx
new file mode 100644
index 0000000..daf8656
--- /dev/null
+++ b/src/features/MemberTask/components/task/TaskTable.tsx
@@ -0,0 +1,204 @@
+import { useState, useMemo } from "react";
+import { useNavigate } from "react-router-dom";
+import { MdSearch, MdAdd, MdEdit, MdDelete, MdVisibility } from "react-icons/md";
+import type { Task, TaskStatus, TaskPriority } from "../../types/task.types";
+import { usePermissions } from "../../context/PermissionContext";
+import StatusBadge from "../common/StatusBadge";
+import PriorityBadge from "../common/PriorityBadge";
+import ConfirmModal from "../common/ConfirmModal";
+import SkeletonLoader from "../common/SkeletonLoader";
+
+interface Props {
+  tasks: Task[];
+  isLoading?: boolean;
+  onDelete: (id: string) => void;
+}
+
+const STATUS_OPTIONS: { value: TaskStatus | "all"; label: string }[] = [
+  { value: "all", label: "All Status" },
+  { value: "todo", label: "To Do" },
+  { value: "in-progress", label: "In Progress" },
+  { value: "review", label: "In Review" },
+  { value: "completed", label: "Completed" },
+];
+
+const PRIORITY_OPTIONS: { value: TaskPriority | "all"; label: string }[] = [
+  { value: "all", label: "All Priority" },
+  { value: "urgent", label: "Urgent" },
+  { value: "high", label: "High" },
+  { value: "medium", label: "Medium" },
+  { value: "low", label: "Low" },
+];
+
+export default function TaskTable({ tasks, isLoading, onDelete }: Props) {
+  const navigate = useNavigate();
+  const { hasPermission } = usePermissions();
+
+  const [search, setSearch] = useState("");
+  const [statusFilter, setStatusFilter] = useState<TaskStatus | "all">("all");
+  const [priorityFilter, setPriorityFilter] = useState<TaskPriority | "all">("all");
+  const [deleteTarget, setDeleteTarget] = useState<string | null>(null);
+
+  const filtered = useMemo(() => {
+    return tasks.filter((t) => {
+      const matchSearch =
+        !search || t.title.toLowerCase().includes(search.toLowerCase());
+      const matchStatus = statusFilter === "all" || t.status === statusFilter;
+      const matchPriority = priorityFilter === "all" || t.priority === priorityFilter;
+      return matchSearch && matchStatus && matchPriority;
+    });
+  }, [tasks, search, statusFilter, priorityFilter]);
+
+  if (isLoading) return <SkeletonLoader rows={6} />;
+
+  return (
+    <div className="space-y-4">
+      {/* Toolbar */}
+      <div className="flex flex-wrap items-center gap-3">
+        <div className="relative flex-1 min-w-[180px]">
+          <MdSearch className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-lg" />
+          <input
+            type="text"
+            placeholder="Search tasks..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="w-full pl-9 pr-4 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#306ee8]/30 focus:border-[#306ee8]"
+          />
+        </div>
+
+        <select
+          value={statusFilter}
+          onChange={(e) => setStatusFilter(e.target.value as TaskStatus | "all")}
+          className="text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-[#306ee8]/30 focus:border-[#306ee8]"
+        >
+          {STATUS_OPTIONS.map((o) => (
+            <option key={o.value} value={o.value}>{o.label}</option>
+          ))}
+        </select>
+
+        <select
+          value={priorityFilter}
+          onChange={(e) => setPriorityFilter(e.target.value as TaskPriority | "all")}
+          className="text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-[#306ee8]/30 focus:border-[#306ee8]"
+        >
+          {PRIORITY_OPTIONS.map((o) => (
+            <option key={o.value} value={o.value}>{o.label}</option>
+          ))}
+        </select>
+
+        {hasPermission("CREATE_TASK") && (
+          <button
+            onClick={() => navigate("/org/tasks/create")}
+            className="flex items-center gap-1.5 px-4 py-2 text-sm font-medium bg-[#306ee8] text-white rounded-lg hover:bg-[#2558c9] transition-colors ml-auto"
+          >
+            <MdAdd className="text-base" />
+            New Task
+          </button>
+        )}
+      </div>
+
+      {/* Table */}
+      {filtered.length === 0 ? (
+        <div className="text-center py-16 text-gray-400 text-sm">
+          No tasks found.
+        </div>
+      ) : (
+        <div className="bg-white rounded-xl border border-gray-100 overflow-hidden">
+          <div className="overflow-x-auto">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="border-b border-gray-100 bg-gray-50/60">
+                  <th className="text-left px-4 py-3 font-medium text-gray-500">Task</th>
+                  <th className="text-left px-4 py-3 font-medium text-gray-500">Status</th>
+                  <th className="text-left px-4 py-3 font-medium text-gray-500">Priority</th>
+                  <th className="text-left px-4 py-3 font-medium text-gray-500">Assigned To</th>
+                  <th className="text-left px-4 py-3 font-medium text-gray-500">Deadline</th>
+                  <th className="text-right px-4 py-3 font-medium text-gray-500">Actions</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-gray-50">
+                {filtered.map((task) => (
+                  <tr
+                    key={task.id}
+                    className={`hover:bg-gray-50/50 transition-colors ${
+                      task.priority === "urgent" ? "border-l-2 border-l-red-400" : ""
+                    }`}
+                  >
+                    <td className="px-4 py-3">
+                      <div className="font-medium text-gray-800">{task.title}</div>
+                      {task.tags && task.tags.length > 0 && (
+                        <div className="flex gap-1 mt-1 flex-wrap">
+                          {task.tags.map((tag) => (
+                            <span key={tag} className="text-xs bg-gray-100 text-gray-500 px-1.5 py-0.5 rounded">
+                              {tag}
+                            </span>
+                          ))}
+                        </div>
+                      )}
+                    </td>
+                    <td className="px-4 py-3">
+                      <StatusBadge status={task.status} />
+                    </td>
+                    <td className="px-4 py-3">
+                      <PriorityBadge priority={task.priority} />
+                    </td>
+                    <td className="px-4 py-3 text-gray-600">{task.assignedToName}</td>
+                    <td className="px-4 py-3 text-gray-500">
+                      {new Date(task.deadline).toLocaleDateString("en-IN", {
+                        day: "numeric",
+                        month: "short",
+                        year: "numeric",
+                      })}
+                    </td>
+                    <td className="px-4 py-3">
+                      <div className="flex items-center gap-1 justify-end">
+                        <button
+                          onClick={() => navigate(`/org/tasks/${task.id}`)}
+                          className="p-1.5 rounded-lg text-gray-400 hover:text-[#306ee8] hover:bg-blue-50 transition-colors"
+                          title="View"
+                        >
+                          <MdVisibility />
+                        </button>
+                        {hasPermission("EDIT_TASK") && (
+                          <button
+                            onClick={() => navigate(`/org/tasks/${task.id}/edit`)}
+                            className="p-1.5 rounded-lg text-gray-400 hover:text-orange-500 hover:bg-orange-50 transition-colors"
+                            title="Edit"
+                          >
+                            <MdEdit />
+                          </button>
+                        )}
+                        {hasPermission("DELETE_TASK") && (
+                          <button
+                            onClick={() => setDeleteTarget(task.id)}
+                            className="p-1.5 rounded-lg text-gray-400 hover:text-red-500 hover:bg-red-50 transition-colors"
+                            title="Delete"
+                          >
+                            <MdDelete />
+                          </button>
+                        )}
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+
+      {deleteTarget && (
+        <ConfirmModal
+          title="Delete Task"
+          message="This action cannot be undone. Are you sure you want to delete this task?"
+          confirmLabel="Delete"
+          onConfirm={() => {
+            onDelete(deleteTarget);
+            setDeleteTarget(null);
+          }}
+          onCancel={() => setDeleteTarget(null)}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/src/features/MemberTask/context/PermissionContext.tsx b/src/features/MemberTask/context/PermissionContext.tsx
new file mode 100644
index 0000000..54db081
--- /dev/null
+++ b/src/features/MemberTask/context/PermissionContext.tsx
@@ -0,0 +1,58 @@
+import { createContext, useContext, useState } from "react";
+import type { Permission } from "../types/task.types";
+
+interface PermissionContextValue {
+  permissions: Permission[];
+  currentUserId: string;
+  currentUserName: string;
+  hasPermission: (p: Permission) => boolean;
+  grantPermission: (p: Permission) => void;
+  revokePermission: (p: Permission) => void;
+}
+
+const PermissionContext = createContext<PermissionContextValue | null>(null);
+
+// Default: member with organizer-level permissions for demo
+const DEFAULT_PERMISSIONS: Permission[] = [
+  "CREATE_TASK",
+  "ASSIGN_TASK",
+  "UPDATE_STATUS",
+  "EDIT_TASK",
+  "DELETE_TASK",
+  "MULTIPLE_SUBMISSION",
+  "LATE_SUBMISSION",
+  "VIEW_ALL_TASKS",
+];
+
+export function PermissionProvider({ children }: { children: React.ReactNode }) {
+  const [permissions, setPermissions] = useState<Permission[]>(DEFAULT_PERMISSIONS);
+
+  const hasPermission = (p: Permission) => permissions.includes(p);
+
+  const grantPermission = (p: Permission) =>
+    setPermissions((prev) => (prev.includes(p) ? prev : [...prev, p]));
+
+  const revokePermission = (p: Permission) =>
+    setPermissions((prev) => prev.filter((x) => x !== p));
+
+  return (
+    <PermissionContext.Provider
+      value={{
+        permissions,
+        currentUserId: "user-1",
+        currentUserName: "Arjun Mehta",
+        hasPermission,
+        grantPermission,
+        revokePermission,
+      }}
+    >
+      {children}
+    </PermissionContext.Provider>
+  );
+}
+
+export function usePermissions() {
+  const ctx = useContext(PermissionContext);
+  if (!ctx) throw new Error("usePermissions must be used within PermissionProvider");
+  return ctx;
+}
diff --git a/src/features/MemberTask/mock/taskMock.ts b/src/features/MemberTask/mock/taskMock.ts
new file mode 100644
index 0000000..1b3c257
--- /dev/null
+++ b/src/features/MemberTask/mock/taskMock.ts
@@ -0,0 +1,128 @@
+import type { Event, Task, Submission, Comment } from "../types/task.types";
+
+export const mockEvents: Event[] = [
+  { id: "evt-1", name: "HackFest 2026" },
+  { id: "evt-2", name: "Spring Bootcamp" },
+  { id: "evt-3", name: "Open Source Day" },
+];
+
+export const mockTasks: Task[] = [
+  {
+    id: "task-1",
+    title: "Build Landing Page",
+    description: "Design and implement the event landing page with responsive layout.",
+    status: "in-progress",
+    priority: "high",
+    eventId: "evt-1",
+    assignedTo: "user-1",
+    assignedToName: "Arjun Mehta",
+    createdBy: "user-2",
+    deadline: "2026-08-10",
+    createdAt: "2026-07-01",
+    tags: ["frontend", "design"],
+  },
+  {
+    id: "task-2",
+    title: "Fix Auth Bug",
+    description: "Resolve the JWT token expiry issue causing silent logouts.",
+    status: "todo",
+    priority: "urgent",
+    eventId: "evt-1",
+    assignedTo: "user-1",
+    assignedToName: "Arjun Mehta",
+    createdBy: "user-2",
+    deadline: "2026-08-05",
+    createdAt: "2026-07-02",
+    tags: ["backend", "auth"],
+  },
+  {
+    id: "task-3",
+    title: "Design System Setup",
+    description: "Establish component library and token system for the hackathon UI.",
+    status: "completed",
+    priority: "medium",
+    eventId: "evt-1",
+    assignedTo: "user-3",
+    assignedToName: "Priya Sharma",
+    createdBy: "user-1",
+    deadline: "2026-07-20",
+    createdAt: "2026-07-01",
+    tags: ["design"],
+  },
+  {
+    id: "task-4",
+    title: "API Integration",
+    description: "Connect frontend to backend REST APIs for participant data.",
+    status: "review",
+    priority: "high",
+    eventId: "evt-2",
+    assignedTo: "user-1",
+    assignedToName: "Arjun Mehta",
+    createdBy: "user-2",
+    deadline: "2026-08-15",
+    createdAt: "2026-07-05",
+    tags: ["backend", "api"],
+  },
+  {
+    id: "task-5",
+    title: "Write Documentation",
+    description: "Document all API endpoints and component usage.",
+    status: "todo",
+    priority: "low",
+    eventId: "evt-2",
+    assignedTo: "user-3",
+    assignedToName: "Priya Sharma",
+    createdBy: "user-1",
+    deadline: "2026-08-20",
+    createdAt: "2026-07-06",
+    tags: ["docs"],
+  },
+];
+
+export const mockSubmissions: Submission[] = [
+  {
+    id: "sub-1",
+    taskId: "task-1",
+    submittedBy: "user-1",
+    submittedByName: "Arjun Mehta",
+    content: "Completed the landing page. Deployed at staging URL.",
+    submittedAt: "2026-08-08T10:30:00Z",
+    status: "pending",
+  },
+  {
+    id: "sub-2",
+    taskId: "task-4",
+    submittedBy: "user-1",
+    submittedByName: "Arjun Mehta",
+    content: "All endpoints integrated. Tests passing.",
+    submittedAt: "2026-08-12T14:00:00Z",
+    status: "approved",
+    reviewNote: "Great work! Clean implementation.",
+  },
+];
+
+export const mockComments: Comment[] = [
+  {
+    id: "cmt-1",
+    taskId: "task-1",
+    authorId: "user-2",
+    authorName: "Rahul Verma",
+    content: "Please make sure the mobile breakpoints are tested.",
+    createdAt: "2026-08-07T09:00:00Z",
+  },
+  {
+    id: "cmt-2",
+    taskId: "task-1",
+    authorId: "user-1",
+    authorName: "Arjun Mehta",
+    content: "Done, tested on 375px and 768px.",
+    createdAt: "2026-08-07T11:00:00Z",
+  },
+];
+
+export const mockMembers = [
+  { id: "user-1", name: "Arjun Mehta" },
+  { id: "user-2", name: "Rahul Verma" },
+  { id: "user-3", name: "Priya Sharma" },
+  { id: "user-4", name: "Sneha Patel" },
+];
diff --git a/src/features/MemberTask/pages/CreateTaskPage.tsx b/src/features/MemberTask/pages/CreateTaskPage.tsx
new file mode 100644
index 0000000..5fba1c2
--- /dev/null
+++ b/src/features/MemberTask/pages/CreateTaskPage.tsx
@@ -0,0 +1,60 @@
+import { useState } from "react";
+import { useNavigate, Navigate } from "react-router-dom";
+import { MdAddTask } from "react-icons/md";
+import { usePermissions } from "../context/PermissionContext";
+import { mockMembers } from "../mock/taskMock";
+import TaskForm from "../components/task/TaskForm";
+import type { TaskFormData } from "../types/task.types";
+
+export default function CreateTaskPage() {
+  const navigate = useNavigate();
+  const { hasPermission, currentUserId } = usePermissions();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  if (!hasPermission("CREATE_TASK")) {
+    return <Navigate to="/org/tasks" replace />;
+  }
+
+  const handleSubmit = (data: TaskFormData) => {
+    setIsSubmitting(true);
+    // Simulate async save
+    setTimeout(() => {
+      console.log("New task:", {
+        ...data,
+        id: `task-${Date.now()}`,
+        status: "todo",
+        createdBy: currentUserId,
+        createdAt: new Date().toISOString().split("T")[0],
+        assignedToName:
+          mockMembers.find((m) => m.id === data.assignedTo)?.name ?? data.assignedTo,
+        tags: data.tags ? data.tags.split(",").map((t) => t.trim()).filter(Boolean) : [],
+      });
+      setIsSubmitting(false);
+      navigate("/org/tasks");
+    }, 600);
+  };
+
+  return (
+    <div className="flex-1 p-6 min-w-0">
+      <div className="max-w-2xl mx-auto">
+        <div className="flex items-center gap-3 mb-6">
+          <div className="w-9 h-9 rounded-xl bg-[#306ee8]/10 flex items-center justify-center">
+            <MdAddTask className="text-[#306ee8] text-xl" />
+          </div>
+          <div>
+            <h1 className="text-lg font-semibold text-gray-900">Create Task</h1>
+            <p className="text-xs text-gray-400">Add a new task to an event</p>
+          </div>
+        </div>
+
+        <div className="bg-white rounded-xl border border-gray-100 p-6">
+          <TaskForm
+            onSubmit={handleSubmit}
+            onCancel={() => navigate("/org/tasks")}
+            isSubmitting={isSubmitting}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/features/MemberTask/pages/EditTaskPage.tsx b/src/features/MemberTask/pages/EditTaskPage.tsx
new file mode 100644
index 0000000..c02b000
--- /dev/null
+++ b/src/features/MemberTask/pages/EditTaskPage.tsx
@@ -0,0 +1,61 @@
+import { useState } from "react";
+import { useNavigate, useParams, Navigate } from "react-router-dom";
+import { MdEdit } from "react-icons/md";
+import { usePermissions } from "../context/PermissionContext";
+import { mockTasks, mockMembers } from "../mock/taskMock";
+import TaskForm from "../components/task/TaskForm";
+import type { TaskFormData } from "../types/task.types";
+
+export default function EditTaskPage() {
+  const { taskId } = useParams<{ taskId: string }>();
+  const navigate = useNavigate();
+  const { hasPermission } = usePermissions();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  if (!hasPermission("EDIT_TASK")) {
+    return <Navigate to="/org/tasks" replace />;
+  }
+
+  const task = mockTasks.find((t) => t.id === taskId);
+  if (!task) return <Navigate to="/org/tasks" replace />;
+
+  const handleSubmit = (data: TaskFormData) => {
+    setIsSubmitting(true);
+    setTimeout(() => {
+      console.log("Updated task:", {
+        ...task,
+        ...data,
+        assignedToName:
+          mockMembers.find((m) => m.id === data.assignedTo)?.name ?? data.assignedTo,
+        tags: data.tags ? data.tags.split(",").map((t) => t.trim()).filter(Boolean) : [],
+      });
+      setIsSubmitting(false);
+      navigate(`/org/tasks/${taskId}`);
+    }, 600);
+  };
+
+  return (
+    <div className="flex-1 p-6 min-w-0">
+      <div className="max-w-2xl mx-auto">
+        <div className="flex items-center gap-3 mb-6">
+          <div className="w-9 h-9 rounded-xl bg-orange-50 flex items-center justify-center">
+            <MdEdit className="text-orange-500 text-xl" />
+          </div>
+          <div>
+            <h1 className="text-lg font-semibold text-gray-900">Edit Task</h1>
+            <p className="text-xs text-gray-400 truncate max-w-xs">{task.title}</p>
+          </div>
+        </div>
+
+        <div className="bg-white rounded-xl border border-gray-100 p-6">
+          <TaskForm
+            initial={task}
+            onSubmit={handleSubmit}
+            onCancel={() => navigate(`/org/tasks/${taskId}`)}
+            isSubmitting={isSubmitting}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/features/MemberTask/pages/TaskDetailPage.tsx b/src/features/MemberTask/pages/TaskDetailPage.tsx
new file mode 100644
index 0000000..5e9373e
--- /dev/null
+++ b/src/features/MemberTask/pages/TaskDetailPage.tsx
@@ -0,0 +1,81 @@
+import { useState } from "react";
+import { useParams, Navigate } from "react-router-dom";
+import { mockTasks, mockSubmissions, mockComments } from "../mock/taskMock";
+import { usePermissions } from "../context/PermissionContext";
+import TaskDetail from "../components/task/TaskDetail";
+import type { Task, Submission, Comment, TaskStatus } from "../types/task.types";
+
+export default function TaskDetailPage() {
+  const { taskId } = useParams<{ taskId: string }>();
+  const { currentUserId, currentUserName } = usePermissions();
+
+  const [tasks, setTasks] = useState<Task[]>(mockTasks);
+  const [submissions, setSubmissions] = useState<Submission[]>(mockSubmissions);
+  const [comments, setComments] = useState<Comment[]>(mockComments);
+
+  const task = tasks.find((t) => t.id === taskId);
+  if (!task) return <Navigate to="/org/tasks" replace />;
+
+  const taskSubmissions = submissions.filter((s) => s.taskId === taskId);
+  const taskComments = comments.filter((c) => c.taskId === taskId);
+
+  const handleDelete = (id: string) => {
+    setTasks((prev) => prev.filter((t) => t.id !== id));
+  };
+
+  const handleStatusChange = (id: string, status: TaskStatus) => {
+    setTasks((prev) => prev.map((t) => (t.id === id ? { ...t, status } : t)));
+  };
+
+  const handleAddSubmission = (_taskId: string, content: string) => {
+    const newSub: Submission = {
+      id: `sub-${Date.now()}`,
+      taskId: _taskId,
+      submittedBy: currentUserId,
+      submittedByName: currentUserName,
+      content,
+      submittedAt: new Date().toISOString(),
+      status: "pending",
+    };
+    setSubmissions((prev) => [...prev, newSub]);
+  };
+
+  const handleAddComment = (_taskId: string, content: string) => {
+    const newComment: Comment = {
+      id: `cmt-${Date.now()}`,
+      taskId: _taskId,
+      authorId: currentUserId,
+      authorName: currentUserName,
+      content,
+      createdAt: new Date().toISOString(),
+    };
+    setComments((prev) => [...prev, newComment]);
+  };
+
+  const handleReview = (
+    submissionId: string,
+    status: "approved" | "rejected",
+    note: string
+  ) => {
+    setSubmissions((prev) =>
+      prev.map((s) =>
+        s.id === submissionId ? { ...s, status, reviewNote: note } : s
+      )
+    );
+  };
+
+  return (
+    <div className="flex-1 p-6 min-w-0">
+      <TaskDetail
+        task={task}
+        submissions={taskSubmissions}
+        comments={taskComments}
+        onDelete={handleDelete}
+        onStatusChange={handleStatusChange}
+        onAddSubmission={handleAddSubmission}
+        onAddComment={handleAddComment}
+        onReview={handleReview}
+      />
+    </div>
+  );
+}
diff --git a/src/features/MemberTask/pages/TaskListPage.tsx b/src/features/MemberTask/pages/TaskListPage.tsx
new file mode 100644
index 0000000..cfbfd14
--- /dev/null
+++ b/src/features/MemberTask/pages/TaskListPage.tsx
@@ -0,0 +1,55 @@
+import { useState } from "react";
+import { MdAssignment } from "react-icons/md";
+import { usePermissions } from "../context/PermissionContext";
+import { mockEvents, mockTasks } from "../mock/taskMock";
+import EventDropdown from "../components/event/EventDropdown";
+import TaskTable from "../components/task/TaskTable";
+import type { Task } from "../types/task.types";
+
+export default function TaskListPage() {
+  const { hasPermission, currentUserId } = usePermissions();
+  const [selectedEventId, setSelectedEventId] = useState<string>(mockEvents[0].id);
+  const [tasks, setTasks] = useState<Task[]>(mockTasks);
+
+  const visibleTasks = tasks.filter((t) => {
+    const inEvent = t.eventId === selectedEventId;
+    if (!inEvent) return false;
+    return hasPermission("VIEW_ALL_TASKS") || t.assignedTo === currentUserId;
+  });
+
+  const handleDelete = (id: string) => {
+    setTasks((prev) => prev.filter((t) => t.id !== id));
+  };
+
+  return (
+    <div className="flex-1 p-6 space-y-6 min-w-0">
+      {/* Page header */}
+      <div className="flex flex-wrap items-center justify-between gap-4">
+        <div className="flex items-center gap-3">
+          <div className="w-9 h-9 rounded-xl bg-[#306ee8]/10 flex items-center justify-center">
+            <MdAssignment className="text-[#306ee8] text-xl" />
+          </div>
+          <div>
+            <h1 className="text-lg font-semibold text-gray-900">Tasks</h1>
+            <p className="text-xs text-gray-400">
+              {hasPermission("VIEW_ALL_TASKS") ? "All event tasks" : "Your assigned tasks"}
+            </p>
+          </div>
+        </div>
+        <EventDropdown
+          events={mockEvents}
+          selectedEventId={selectedEventId}
+          onChange={setSelectedEventId}
+        />
+      </div>
+
+      {!selectedEventId ? (
+        <div className="text-center py-20 text-gray-400 text-sm">
+          Select an event to view tasks.
+        </div>
+      ) : (
+        <TaskTable tasks={visibleTasks} onDelete={handleDelete} />
+      )}
+    </div>
+  );
+}
diff --git a/src/features/MemberTask/types/task.types.ts b/src/features/MemberTask/types/task.types.ts
new file mode 100644
index 0000000..425028f
--- /dev/null
+++ b/src/features/MemberTask/types/task.types.ts
@@ -0,0 +1,63 @@
+export type Permission =
+  | "CREATE_TASK"
+  | "ASSIGN_TASK"
+  | "UPDATE_STATUS"
+  | "EDIT_TASK"
+  | "DELETE_TASK"
+  | "MULTIPLE_SUBMISSION"
+  | "LATE_SUBMISSION"
+  | "VIEW_ALL_TASKS";
+
+export type TaskStatus = "todo" | "in-progress" | "completed" | "review";
+export type TaskPriority = "low" | "medium" | "high" | "urgent";
+
+export interface Task {
+  id: string;
+  title: string;
+  description: string;
+  status: TaskStatus;
+  priority: TaskPriority;
+  eventId: string;
+  assignedTo: string;
+  assignedToName: string;
+  createdBy: string;
+  deadline: string;
+  createdAt: string;
+  tags?: string[];
+}
+
+export interface Submission {
+  id: string;
+  taskId: string;
+  submittedBy: string;
+  submittedByName: string;
+  content: string;
+  fileUrl?: string;
+  submittedAt: string;
+  status: "pending" | "approved" | "rejected";
+  reviewNote?: string;
+}
+
+export interface Comment {
+  id: string;
+  taskId: string;
+  authorId: string;
+  authorName: string;
+  content: string;
+  createdAt: string;
+}
+
+export interface Event {
+  id: string;
+  name: string;
+}
+
+export interface TaskFormData {
+  title: string;
+  description: string;
+  priority: TaskPriority;
+  eventId: string;
+  assignedTo: string;
+  deadline: string;
+  tags?: string;
+}
diff --git a/src/features/SideBar/v1/Section/BotamNavBar.tsx b/src/features/SideBar/v1/Section/BotamNavBar.tsx
index 98a87f6..c94a805 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 { useTheme } from "@/theme";
 
@@ -30,6 +30,12 @@ const navItems: NavItem[] = [
     link: "/org/events",
     isActive: (p) => p.startsWith("/org/events") || p.startsWith("/org/create-event"),
   },
+  {
+    icon: MdAssignment,
+    text: "Tasks",
+    link: "/org/tasks",
+    isActive: (pathname) => pathname.startsWith("/org/tasks"),
+  },
   {
     icon: RiContactsBookFill,
     text: "Support",
diff --git a/src/features/SideBar/v1/Section/SideBar.tsx b/src/features/SideBar/v1/Section/SideBar.tsx
index fac37a1..ec765b9 100644
--- a/src/features/SideBar/v1/Section/SideBar.tsx
+++ b/src/features/SideBar/v1/Section/SideBar.tsx
@@ -1,4 +1,13 @@
 import { RiContactsBookFill } from "react-icons/ri";
+import { getTheme } from "../../../../config/them.config";
+import SideBarLink from "../Components/SideBarLink";
+import { MdDashboard, MdEvent, MdGroup, MdSettings, MdWork, MdAssignment, MdAddTask } from "react-icons/md";
+import { dashboardData } from "@/features/Dashboard/mock/dashboardData";
+import { usePermissions } from "@/features/MemberTask/context/PermissionContext";
+
+const SideBar = () => {
+  let theme = getTheme("light");
+  const { hasPermission } = usePermissions();
 import { MdDashboard, MdEvent, MdGroup, MdSettings, MdWork } from "react-icons/md";
 import { useTheme } from "@/theme";
 import { ThemeToggle } from "@/Component/ui/ThemeToggle";
@@ -48,6 +57,10 @@ const SideBar = () => {
         <SideBarLink icon={<MdWork />} text="Projects" link="/org/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" />
+        {hasPermission("CREATE_TASK") && (
+          <SideBarLink icon={<MdAddTask />} text="Create Task" link="/org/tasks/create" />
+        )}
         <SideBarLink icon={<RiContactsBookFill />} text="Contact Submissions" link="/org/contact" />
 
         {/* Footer */}