diff --git a/src/Router/all_routes.jsx b/src/Router/all_routes.jsx
index 3e075b9..dd88647 100644
--- a/src/Router/all_routes.jsx
+++ b/src/Router/all_routes.jsx
@@ -86,6 +86,7 @@ export const all_routes = {
   email: "/email",
   callhistory: "/call-history",
   todo: "/todo",
+  projecttracker: "/project-tracker",
   wizard: "/form-wizard",
   expiredproduct: "/expired-products",
   lowstock: "/low-stocks",
diff --git a/src/Router/router.link.jsx b/src/Router/router.link.jsx
index a09544a..ab49cad 100644
--- a/src/Router/router.link.jsx
+++ b/src/Router/router.link.jsx
@@ -194,6 +194,8 @@ import CurrencySettings from "../feature-module/settings/financialsettings/curre
 import WareHouses from "../core/modals/peoples/warehouses";
 import Coupons from "../feature-module/coupons/coupons";
 import ApiTest from "../components/ApiTest";
+import TodoList from "../feature-module/todo/todolist";
+import ProjectTracker from "../feature-module/projects/projecttracker";
 import { all_routes } from "./all_routes";
 export const publicRoutes = [
   {
@@ -1397,13 +1399,27 @@ export const publicRoutes = [
   },
   {
     id: 116,
+    path: routes.todo,
+    name: "todo",
+    element: <TodoList />,
+    route: Route,
+  },
+  {
+    id: 117,
+    path: routes.projecttracker,
+    name: "projecttracker",
+    element: <ProjectTracker />,
+    route: Route,
+  },
+  {
+    id: 118,
     path: "/",
     name: "Root",
     element: <Navigate to="/" />,
     route: Route,
   },
   {
-    id: 117,
+    id: 119,
     path: "*",
     name: "NotFound",
     element: <Navigate to="/" />,
diff --git a/src/core/json/siderbar_data.jsx b/src/core/json/siderbar_data.jsx
index 10f464f..3715142 100644
--- a/src/core/json/siderbar_data.jsx
+++ b/src/core/json/siderbar_data.jsx
@@ -3,7 +3,7 @@ import React from 'react';
 import * as Icon from 'react-feather';
 
 export const SidebarData = [
-          
+
     {
         label: "Main",
         submenuOpen: true,
@@ -44,7 +44,7 @@ export const SidebarData = [
             },
               { label: "To Do", link: "/todo",showSubRoute: false,
             },
-               { label: "Việc làm", link: "/",showSubRoute: false,
+              { label: "Project Tracker", link: "/project-tracker",showSubRoute: false,
             },
               { label: "Notes", link: "/notes",showSubRoute: false,
             },
@@ -59,7 +59,7 @@ export const SidebarData = [
         submenuOpen: true,
         showSubRoute: false,
         submenuHdr: "Inventory",
-      
+
         submenuItems: [
           { label: "Sản phẩm", link: "/product-list", icon:<Icon.Box />,showSubRoute: false,submenu: false },
           { label: "Create Product", link: "/add-product", icon:  <Icon.PlusSquare />,showSubRoute: false, submenu: false },
@@ -121,8 +121,8 @@ export const SidebarData = [
           { label: "Purchase Return", link: "/purchase-returns", icon:  <Icon.RefreshCw />,showSubRoute: false,submenu: false }
         ]
       },
-    
-    
+
+
 
     {
         label: "Finance & Accounts",
@@ -148,16 +148,16 @@ export const SidebarData = [
         submenuOpen: true,
         showSubRoute: false,
         submenuHdr: "People",
-      
+
         submenuItems: [
           { label: "Customers", link: "/customers", icon:<Icon.User />,showSubRoute: false,submenu: false },
           { label: "Suppliers", link: "/suppliers", icon:  <Icon.Users />,showSubRoute: false, submenu: false },
           { label: "Stores", link: "/store-list", icon:  <Icon.Home  />,showSubRoute: false,submenu: false },
           { label: "Warehouses", link: "/warehouse", icon: <Icon.Archive />,showSubRoute: false,submenu: false },
-     
+
         ]
       },
-      
+
       {
         label: "HRM",
         submenuOpen: true,
@@ -170,7 +170,7 @@ export const SidebarData = [
           { label: "Shifts", link: "/shift", icon: <Icon.Shuffle />,showSubRoute: false },
 
           { label: "Attendance", link: "#", icon: <Icon.Clock />,showSubRoute: false, submenu: true,
-          
+
           submenuItems: [
             { label: "Employee", link: "/attendance-employee" },
             { label: "Admin", link: "/attendance-admin" },
@@ -188,7 +188,7 @@ export const SidebarData = [
             // { label: "Employee Salary", link: "payroll-list" },
             { label: "Payslip", link: "/payslip" },
           ] },
-          
+
         ],
       },
       {
@@ -330,8 +330,8 @@ export const SidebarData = [
         showSubRoute: false,
         submenuHdr: "Settings",
         submenuItems: [
-          { label: "General Settings", 
-          submenu: true, 
+          { label: "General Settings",
+          submenu: true,
           showSubRoute: false,
           icon: <Icon.Settings/>,
           submenuItems: [
@@ -340,7 +340,7 @@ export const SidebarData = [
             { label: "Notifications", link: "/notification" },
             { label: "Connected Apps", link: "/connected-apps" }
           ]},
-          { label: "Website Settings", submenu: true, 
+          { label: "Website Settings", submenu: true,
           showSubRoute: false,
           icon: <Icon.Globe/>,
           submenuItems: [
@@ -353,7 +353,7 @@ export const SidebarData = [
             { label: "Social Authentication", link: "/social-authentication",showSubRoute: false },
             { label: "Language", link: "/language-settings" ,showSubRoute: false}
           ]},
-          { label: "App Settings", submenu: true, 
+          { label: "App Settings", submenu: true,
 
           showSubRoute: false,
           icon: <Icon.Smartphone/>,
@@ -363,7 +363,7 @@ export const SidebarData = [
             { label: "POS", link: "/pos-settings",showSubRoute: false },
             { label: "Custom Fields", link: "/custom-fields",showSubRoute: false }
           ]},
-          { label: "System Settings", submenu: true, 
+          { label: "System Settings", submenu: true,
           showSubRoute: false,
           icon: <Icon.Monitor/>,
           submenuItems: [
@@ -372,7 +372,7 @@ export const SidebarData = [
             { label: "OTP", link: "/otp-settings",showSubRoute: false },
             { label: "GDPR Cookies", link: "/gdpr-settings",showSubRoute: false }
           ]},
-          { label: "Financial Settings", submenu: true, 
+          { label: "Financial Settings", submenu: true,
           showSubRoute: false,
           icon: <Icon.DollarSign/>,
           submenuItems: [
@@ -381,7 +381,7 @@ export const SidebarData = [
             { label: "Tax Rates", link: "/tax-rates",showSubRoute: false },
             { label: "Currencies", link: "/currency-settings",showSubRoute: false }
           ]},
-          { label: "Other Settings", submenu: true, 
+          { label: "Other Settings", submenu: true,
           showSubRoute: false,
           icon: <Icon.Hexagon/>,
           submenuItems: [
@@ -391,7 +391,7 @@ export const SidebarData = [
           { label: "Logout", link: "/signin", icon:  <Icon.LogOut />,showSubRoute: false }
         ]
       },
-      
+
 
       {
         label: 'UI Interface',
@@ -566,7 +566,7 @@ export const SidebarData = [
           }
         ]
       }
-      
+
 
 
 ]
diff --git a/src/feature-module/projects/projecttracker.jsx b/src/feature-module/projects/projecttracker.jsx
new file mode 100644
index 0000000..78b6029
--- /dev/null
+++ b/src/feature-module/projects/projecttracker.jsx
@@ -0,0 +1,451 @@
+import React, { useState } from 'react';
+import { Table, Progress, Tag, Avatar, Button, DatePicker, Select } from 'antd';
+import {
+  Star,
+  Edit,
+  Trash2,
+  Plus
+} from 'feather-icons-react';
+
+const { Option } = Select;
+const { RangePicker } = DatePicker;
+
+const ProjectTracker = () => {
+  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+  const [filterStatus, setFilterStatus] = useState('All Status');
+  const [filterManager, setFilterManager] = useState('All Managers');
+  const [filterPriority, setFilterPriority] = useState('All Priority');
+  const [sortBy, setSortBy] = useState('Last 7 Days');
+
+  // Sample project data
+  const projectData = [
+    {
+      key: '1',
+      id: 1,
+      projectName: 'E-commerce Website Development',
+      category: ['Web Development'],
+      categoryColor: 'blue',
+      manager: [
+        { name: 'John Smith', avatar: 'assets/img/profiles/avatar-01.jpg' },
+        { name: 'Sarah Johnson', avatar: 'assets/img/profiles/avatar-02.jpg' }
+      ],
+      startDate: '01 Jan 2024',
+      progress: 85,
+      deadline: '15 Mar 2024',
+      status: 'In Progress',
+      statusColor: 'warning',
+      priority: 'high',
+      starred: true,
+      budget: '$45,000',
+      client: 'TechCorp Inc.'
+    },
+    {
+      key: '2',
+      id: 2,
+      projectName: 'Mobile App UI/UX Design',
+      category: ['Design'],
+      categoryColor: 'purple',
+      manager: [
+        { name: 'Mike Wilson', avatar: 'assets/img/profiles/avatar-03.jpg' },
+        { name: 'Lisa Chen', avatar: 'assets/img/profiles/avatar-04.jpg' }
+      ],
+      startDate: '15 Feb 2024',
+      progress: 60,
+      deadline: '30 Apr 2024',
+      status: 'In Progress',
+      statusColor: 'warning',
+      priority: 'medium',
+      starred: false,
+      budget: '$28,000',
+      client: 'StartupXYZ'
+    },
+    {
+      key: '3',
+      id: 3,
+      projectName: 'Database Migration Project',
+      category: ['Backend'],
+      categoryColor: 'green',
+      manager: [
+        { name: 'David Brown', avatar: 'assets/img/profiles/avatar-05.jpg' },
+        { name: 'Emma Davis', avatar: 'assets/img/profiles/avatar-06.jpg' }
+      ],
+      startDate: '10 Mar 2024',
+      progress: 100,
+      deadline: '25 Mar 2024',
+      status: 'Completed',
+      statusColor: 'success',
+      priority: 'high',
+      starred: true,
+      budget: '$35,000',
+      client: 'DataFlow Ltd.'
+    },
+    {
+      key: '4',
+      id: 4,
+      projectName: 'Marketing Campaign Platform',
+      category: ['Marketing'],
+      categoryColor: 'orange',
+      manager: [
+        { name: 'Tom Anderson', avatar: 'assets/img/profiles/avatar-07.jpg' },
+        { name: 'Jessica White', avatar: 'assets/img/profiles/avatar-08.jpg' }
+      ],
+      startDate: '20 Mar 2024',
+      progress: 40,
+      deadline: '15 Jun 2024',
+      status: 'In Progress',
+      statusColor: 'warning',
+      priority: 'medium',
+      starred: false,
+      budget: '$52,000',
+      client: 'MarketPro Agency'
+    },
+    {
+      key: '5',
+      id: 5,
+      projectName: 'Cloud Infrastructure Setup',
+      category: ['DevOps'],
+      categoryColor: 'cyan',
+      manager: [
+        { name: 'Alex Rodriguez', avatar: 'assets/img/profiles/avatar-09.jpg' },
+        { name: 'Maria Garcia', avatar: 'assets/img/profiles/avatar-10.jpg' }
+      ],
+      startDate: '05 Apr 2024',
+      progress: 75,
+      deadline: '20 May 2024',
+      status: 'In Progress',
+      statusColor: 'warning',
+      priority: 'high',
+      starred: true,
+      budget: '$38,000',
+      client: 'CloudTech Solutions'
+    },
+    {
+      key: '6',
+      id: 6,
+      projectName: 'AI Chatbot Development',
+      category: ['AI/ML'],
+      categoryColor: 'red',
+      manager: [
+        { name: 'Robert Lee', avatar: 'assets/img/profiles/avatar-11.jpg' },
+        { name: 'Sophie Turner', avatar: 'assets/img/profiles/avatar-12.jpg' }
+      ],
+      startDate: '12 Apr 2024',
+      progress: 30,
+      deadline: '30 Jul 2024',
+      status: 'Planning',
+      statusColor: 'default',
+      priority: 'low',
+      starred: false,
+      budget: '$65,000',
+      client: 'AI Innovations'
+    },
+    {
+      key: '7',
+      id: 7,
+      projectName: 'Security Audit & Compliance',
+      category: ['Security'],
+      categoryColor: 'red',
+      manager: [
+        { name: 'Michael Brown', avatar: 'assets/img/profiles/avatar-13.jpg' },
+        { name: 'Rachel Davis', avatar: 'assets/img/profiles/avatar-14.jpg' }
+      ],
+      startDate: '25 Apr 2024',
+      progress: 90,
+      deadline: '10 May 2024',
+      status: 'Review',
+      statusColor: 'processing',
+      priority: 'high',
+      starred: true,
+      budget: '$42,000',
+      client: 'SecureBank Corp'
+    },
+    {
+      key: '8',
+      id: 8,
+      projectName: 'Content Management System',
+      category: ['Web Development'],
+      categoryColor: 'blue',
+      manager: [
+        { name: 'Daniel Wilson', avatar: 'assets/img/profiles/avatar-15.jpg' },
+        { name: 'Amanda Johnson', avatar: 'assets/img/profiles/avatar-16.jpg' }
+      ],
+      startDate: '01 May 2024',
+      progress: 55,
+      deadline: '15 Aug 2024',
+      status: 'In Progress',
+      statusColor: 'warning',
+      priority: 'medium',
+      starred: false,
+      budget: '$48,000',
+      client: 'ContentHub Media'
+    }
+  ];
+
+  // Table columns configuration
+  const columns = [
+    {
+      title: '',
+      dataIndex: 'starred',
+      width: 50,
+      render: (starred) => (
+        <Star
+          size={16}
+          fill={starred ? '#ffc107' : 'none'}
+          color={starred ? '#ffc107' : '#6c757d'}
+          style={{ cursor: 'pointer' }}
+        />
+      )
+    },
+    {
+      title: '',
+      dataIndex: 'priority',
+      width: 20,
+      render: (priority) => (
+        <div
+          style={{
+            width: '4px',
+            height: '40px',
+            backgroundColor: priority === 'high' ? '#dc3545' : priority === 'medium' ? '#ffc107' : '#28a745',
+            borderRadius: '2px'
+          }}
+        />
+      )
+    },
+    {
+      title: 'Project Name',
+      dataIndex: 'projectName',
+      key: 'projectName',
+      render: (text) => (
+        <span style={{ fontSize: '14px', fontWeight: '500' }}>{text}</span>
+      )
+    },
+    {
+      title: 'Category',
+      dataIndex: 'category',
+      key: 'category',
+      render: (category, record) => (
+        <Tag color={record.categoryColor} style={{ borderRadius: '12px', fontSize: '12px' }}>
+          {category[0]}
+        </Tag>
+      )
+    },
+    {
+      title: 'Project Manager',
+      dataIndex: 'manager',
+      key: 'manager',
+      render: (managers) => (
+        <Avatar.Group maxCount={2} size="small">
+          {managers.map((manager, index) => (
+            <Avatar
+              key={index}
+              size={24}
+              src={manager.avatar}
+              alt={manager.name}
+            />
+          ))}
+        </Avatar.Group>
+      )
+    },
+    {
+      title: 'Start Date',
+      dataIndex: 'startDate',
+      key: 'startDate',
+      render: (date) => (
+        <span style={{ fontSize: '13px' }}>{date}</span>
+      )
+    },
+    {
+      title: 'Progress',
+      dataIndex: 'progress',
+      key: 'progress',
+      render: (progress) => (
+        <div style={{ width: '120px' }}>
+          <Progress
+            percent={progress}
+            size="small"
+            strokeColor={progress === 100 ? '#28a745' : progress > 70 ? '#17a2b8' : progress > 40 ? '#ffc107' : '#dc3545'}
+            showInfo={false}
+          />
+          <span style={{ fontSize: '12px', marginLeft: '8px' }}>
+            Progress: {progress}%
+          </span>
+        </div>
+      )
+    },
+    {
+      title: 'Deadline',
+      dataIndex: 'deadline',
+      key: 'deadline',
+      render: (date) => (
+        <span style={{ fontSize: '13px' }}>{date}</span>
+      )
+    },
+    {
+      title: 'Status',
+      dataIndex: 'status',
+      key: 'status',
+      render: (status, record) => (
+        <Tag
+          color={record.statusColor}
+          style={{
+            borderRadius: '12px',
+            fontSize: '12px',
+            border: 'none',
+            padding: '4px 12px'
+          }}
+        >
+          {status}
+        </Tag>
+      )
+    },
+    {
+      title: 'Budget',
+      dataIndex: 'budget',
+      key: 'budget',
+      render: (budget) => (
+        <span style={{ color: '#28a745', fontSize: '13px', fontWeight: '500' }}>{budget}</span>
+      )
+    },
+    {
+      title: '',
+      key: 'actions',
+      width: 100,
+      render: () => (
+        <div className="action-table-data">
+          <div className="edit-delete-action">
+            <Edit size={16} style={{ cursor: 'pointer' }} />
+            <Trash2 size={16} style={{ cursor: 'pointer' }} />
+          </div>
+        </div>
+      )
+    }
+  ];
+
+  // Row selection configuration
+  const rowSelection = {
+    selectedRowKeys,
+    onChange: (selectedKeys) => {
+      setSelectedRowKeys(selectedKeys);
+    },
+    getCheckboxProps: (record) => ({
+      name: record.projectName,
+    }),
+  };
+
+  return (
+    <div className="page-wrapper">
+      <div className="content">
+        {/* Header */}
+        <div className="page-header">
+          <div className="add-item d-flex">
+            <div className="page-title">
+              <h4>Project Tracker</h4>
+              <h6>Manage Your Projects</h6>
+            </div>
+          </div>
+          <div className="page-btn">
+            <Button
+              type="primary"
+              icon={<Plus size={16} />}
+              className="btn btn-added"
+            >
+              Create New Project
+            </Button>
+          </div>
+        </div>
+
+        {/* Project Lists */}
+        <div className="card table-list-card">
+          <div className="card-body pb-0">
+            <div className="table-top">
+              <div className="search-set">
+                <div className="search-input">
+                  <span style={{ fontSize: '16px', fontWeight: '500' }}>
+                    Project Lists
+                  </span>
+                  <span className="badge badge-primary ms-2">Active Projects</span>
+                </div>
+              </div>
+              <div className="search-path">
+                <div className="d-flex align-items-center">
+                  <RangePicker
+                    placeholder={['Start Date', 'End Date']}
+                    className="form-control"
+                  />
+
+                  <Select
+                    value={filterPriority}
+                    onChange={setFilterPriority}
+                    className="form-control"
+                    style={{ width: 120 }}
+                  >
+                    <Option value="All Priority">Priority</Option>
+                    <Option value="High">High</Option>
+                    <Option value="Medium">Medium</Option>
+                    <Option value="Low">Low</Option>
+                  </Select>
+
+                  <Select
+                    value={filterManager}
+                    onChange={setFilterManager}
+                    className="form-control"
+                    style={{ width: 140 }}
+                  >
+                    <Option value="All Managers">Manager</Option>
+                    <Option value="John Smith">John Smith</Option>
+                    <Option value="Sarah Johnson">Sarah Johnson</Option>
+                    <Option value="Mike Wilson">Mike Wilson</Option>
+                  </Select>
+
+                  <Select
+                    value={filterStatus}
+                    onChange={setFilterStatus}
+                    className="form-control"
+                    style={{ width: 140 }}
+                  >
+                    <Option value="All Status">Select Status</Option>
+                    <Option value="Planning">Planning</Option>
+                    <Option value="In Progress">In Progress</Option>
+                    <Option value="Review">Review</Option>
+                    <Option value="Completed">Completed</Option>
+                  </Select>
+
+                  <Select
+                    value={sortBy}
+                    onChange={setSortBy}
+                    className="form-control"
+                    style={{ width: 140 }}
+                  >
+                    <Option value="Last 7 Days">Sort By: Last 7 Days</Option>
+                    <Option value="Last 30 Days">Last 30 Days</Option>
+                    <Option value="This Month">This Month</Option>
+                    <Option value="Deadline">By Deadline</Option>
+                  </Select>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="table-responsive">
+            <Table
+              rowSelection={rowSelection}
+              columns={columns}
+              dataSource={projectData}
+              pagination={{
+                pageSize: 10,
+                showSizeChanger: true,
+                showQuickJumper: true,
+                showTotal: (total, range) =>
+                  `Row Per Page: ${range[1] - range[0] + 1} Entries | Showing ${range[0]} to ${range[1]} of ${total} entries`
+              }}
+            />
+          </div>
+        </div>
+      </div>
+
+
+    </div>
+  );
+};
+
+export default ProjectTracker;
diff --git a/src/feature-module/todo/todolist.jsx b/src/feature-module/todo/todolist.jsx
new file mode 100644
index 0000000..0538be9
--- /dev/null
+++ b/src/feature-module/todo/todolist.jsx
@@ -0,0 +1,541 @@
+import React, { useState } from 'react';
+import { Table, Progress, Tag, Avatar, Button, DatePicker, Select } from 'antd';
+import {
+  Star,
+  Edit,
+  Trash2,
+  Plus
+} from 'feather-icons-react';
+
+const { Option } = Select;
+const { RangePicker } = DatePicker;
+
+const TodoList = () => {
+  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+  const [filterStatus, setFilterStatus] = useState('All Status');
+  const [filterAssignee, setFilterAssignee] = useState('All Assignees');
+  const [filterTags, setFilterTags] = useState('All Tags');
+  const [sortBy, setSortBy] = useState('Last 7 Days');
+
+  // Sample todo data
+  const todoData = [
+    {
+      key: '1',
+      id: 1,
+      companyName: 'Respond to any pending messages',
+      tags: ['Social'],
+      tagColor: 'blue',
+      assignee: [
+        { name: 'John Doe', avatar: 'assets/img/profiles/avatar-01.jpg' },
+        { name: 'Jane Smith', avatar: 'assets/img/profiles/avatar-02.jpg' }
+      ],
+      createdOn: '14 Jan 2024',
+      progress: 100,
+      dueDate: '14 Jan 2024',
+      status: 'Completed',
+      statusColor: 'success',
+      priority: 'high',
+      starred: true
+    },
+    {
+      key: '2',
+      id: 2,
+      companyName: 'Update calendar and schedule',
+      tags: ['Meeting'],
+      tagColor: 'purple',
+      assignee: [
+        { name: 'Mike Johnson', avatar: 'assets/img/profiles/avatar-03.jpg' },
+        { name: 'Sarah Wilson', avatar: 'assets/img/profiles/avatar-04.jpg' }
+      ],
+      createdOn: '21 Jan 2024',
+      progress: 15,
+      dueDate: '21 Jan 2024',
+      status: 'In Progress',
+      statusColor: 'warning',
+      priority: 'medium',
+      starred: true
+    },
+    {
+      key: '3',
+      id: 3,
+      companyName: 'Respond to any pending messages',
+      tags: ['Research'],
+      tagColor: 'pink',
+      assignee: [
+        { name: 'David Brown', avatar: 'assets/img/profiles/avatar-05.jpg' },
+        { name: 'Lisa Davis', avatar: 'assets/img/profiles/avatar-06.jpg' }
+      ],
+      createdOn: '20 Feb 2024',
+      progress: 45,
+      dueDate: '20 Feb 2024',
+      status: 'In Progress',
+      statusColor: 'warning',
+      priority: 'low',
+      starred: false
+    },
+    {
+      key: '4',
+      id: 4,
+      companyName: 'Attend team meeting at 10:00 AM',
+      tags: ['Work Details'],
+      tagColor: 'cyan',
+      assignee: [
+        { name: 'Tom Wilson', avatar: 'assets/img/profiles/avatar-07.jpg' },
+        { name: 'Emma Johnson', avatar: 'assets/img/profiles/avatar-08.jpg' }
+      ],
+      createdOn: '15 Mar 2024',
+      progress: 45,
+      dueDate: '15 Mar 2024',
+      status: 'In Progress',
+      statusColor: 'warning',
+      priority: 'high',
+      starred: true
+    },
+    {
+      key: '5',
+      id: 5,
+      companyName: 'Check and respond to emails',
+      tags: ['Reminder'],
+      tagColor: 'blue',
+      assignee: [
+        { name: 'Alex Chen', avatar: 'assets/img/profiles/avatar-09.jpg' },
+        { name: 'Maria Garcia', avatar: 'assets/img/profiles/avatar-10.jpg' }
+      ],
+      createdOn: '12 Apr 2024',
+      progress: 65,
+      dueDate: '12 Apr 2024',
+      status: 'In Progress',
+      statusColor: 'warning',
+      priority: 'medium',
+      starred: false
+    },
+    {
+      key: '6',
+      id: 6,
+      companyName: 'Coordinate with department head',
+      tags: ['Internal'],
+      tagColor: 'red',
+      assignee: [
+        { name: 'Robert Lee', avatar: 'assets/img/profiles/avatar-11.jpg' },
+        { name: 'Sophie Turner', avatar: 'assets/img/profiles/avatar-12.jpg' }
+      ],
+      createdOn: '20 Apr 2024',
+      progress: 85,
+      dueDate: '20 Apr 2024',
+      status: 'Ongoing',
+      statusColor: 'warning',
+      priority: 'high',
+      starred: false
+    },
+    {
+      key: '7',
+      id: 7,
+      companyName: 'Plan tasks for the next day',
+      tags: ['Social'],
+      tagColor: 'blue',
+      assignee: [
+        { name: 'Michael Brown', avatar: 'assets/img/profiles/avatar-13.jpg' },
+        { name: 'Jessica Davis', avatar: 'assets/img/profiles/avatar-14.jpg' }
+      ],
+      createdOn: '06 Jul 2024',
+      progress: 100,
+      dueDate: '06 Jul 2024',
+      status: 'Completed',
+      statusColor: 'success',
+      priority: 'low',
+      starred: true
+    },
+    {
+      key: '8',
+      id: 8,
+      companyName: 'Finalize project proposal',
+      tags: ['Projects'],
+      tagColor: 'green',
+      assignee: [
+        { name: 'Daniel Wilson', avatar: 'assets/img/profiles/avatar-15.jpg' },
+        { name: 'Amanda Johnson', avatar: 'assets/img/profiles/avatar-16.jpg' }
+      ],
+      createdOn: '02 Sep 2024',
+      progress: 65,
+      dueDate: '02 Sep 2024',
+      status: 'Ongoing',
+      statusColor: 'warning',
+      priority: 'high',
+      starred: false
+    },
+    {
+      key: '9',
+      id: 9,
+      companyName: 'Submit to supervisor by EOD',
+      tags: ['Reminder'],
+      tagColor: 'blue',
+      assignee: [
+        { name: 'Christopher Lee', avatar: 'assets/img/profiles/avatar-17.jpg' },
+        { name: 'Michelle Garcia', avatar: 'assets/img/profiles/avatar-18.jpg' }
+      ],
+      createdOn: '15 Nov 2024',
+      progress: 75,
+      dueDate: '15 Nov 2024',
+      status: 'In Progress',
+      statusColor: 'warning',
+      priority: 'medium',
+      starred: true
+    },
+    {
+      key: '10',
+      id: 10,
+      companyName: 'Prepare presentation slides',
+      tags: ['Research'],
+      tagColor: 'pink',
+      assignee: [
+        { name: 'Kevin Martinez', avatar: 'assets/img/profiles/avatar-19.jpg' },
+        { name: 'Rachel Thompson', avatar: 'assets/img/profiles/avatar-20.jpg' }
+      ],
+      createdOn: '10 Dec 2024',
+      progress: 50,
+      dueDate: '10 Dec 2024',
+      status: 'In Progress',
+      statusColor: 'warning',
+      priority: 'medium',
+      starred: false
+    }
+  ];
+
+  // Table columns configuration
+  const columns = [
+    {
+      title: '',
+      dataIndex: 'starred',
+      width: 50,
+      render: (starred) => (
+        <Star
+          size={16}
+          fill={starred ? '#ffc107' : 'none'}
+          color={starred ? '#ffc107' : '#6c757d'}
+          style={{ cursor: 'pointer' }}
+        />
+      )
+    },
+    {
+      title: '',
+      dataIndex: 'priority',
+      width: 20,
+      render: (priority) => (
+        <div
+          style={{
+            width: '4px',
+            height: '40px',
+            backgroundColor: priority === 'high' ? '#dc3545' : priority === 'medium' ? '#ffc107' : '#28a745',
+            borderRadius: '2px'
+          }}
+        />
+      )
+    },
+    {
+      title: 'Company Name',
+      dataIndex: 'companyName',
+      key: 'companyName',
+      render: (text) => (
+        <span style={{ color: '#ffffff', fontSize: '14px' }}>{text}</span>
+      )
+    },
+    {
+      title: 'Tags',
+      dataIndex: 'tags',
+      key: 'tags',
+      render: (tags, record) => (
+        <Tag color={record.tagColor} style={{ borderRadius: '12px', fontSize: '12px' }}>
+          {tags[0]}
+        </Tag>
+      )
+    },
+    {
+      title: 'Assignee',
+      dataIndex: 'assignee',
+      key: 'assignee',
+      render: (assignees) => (
+        <Avatar.Group maxCount={2} size="small">
+          {assignees.map((assignee, index) => (
+            <Avatar
+              key={index}
+              size={24}
+              src={assignee.avatar}
+              alt={assignee.name}
+            />
+          ))}
+        </Avatar.Group>
+      )
+    },
+    {
+      title: 'Created On',
+      dataIndex: 'createdOn',
+      key: 'createdOn',
+      render: (date) => (
+        <span style={{ color: '#6c757d', fontSize: '13px' }}>{date}</span>
+      )
+    },
+    {
+      title: 'Progress',
+      dataIndex: 'progress',
+      key: 'progress',
+      render: (progress) => (
+        <div style={{ width: '120px' }}>
+          <Progress
+            percent={progress}
+            size="small"
+            strokeColor={progress === 100 ? '#28a745' : progress > 50 ? '#17a2b8' : '#ffc107'}
+            showInfo={false}
+          />
+          <span style={{ color: '#6c757d', fontSize: '12px', marginLeft: '8px' }}>
+            Progress: {progress}%
+          </span>
+        </div>
+      )
+    },
+    {
+      title: 'Due Date',
+      dataIndex: 'dueDate',
+      key: 'dueDate',
+      render: (date) => (
+        <span style={{ color: '#6c757d', fontSize: '13px' }}>{date}</span>
+      )
+    },
+    {
+      title: 'Status',
+      dataIndex: 'status',
+      key: 'status',
+      render: (status, record) => (
+        <Tag
+          color={record.statusColor}
+          style={{
+            borderRadius: '12px',
+            fontSize: '12px',
+            border: 'none',
+            padding: '4px 12px'
+          }}
+        >
+          {status}
+        </Tag>
+      )
+    },
+    {
+      title: '',
+      key: 'actions',
+      width: 100,
+      render: () => (
+        <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+          <Edit size={16} color="#6c757d" style={{ cursor: 'pointer' }} />
+          <Trash2 size={16} color="#6c757d" style={{ cursor: 'pointer' }} />
+        </div>
+      )
+    }
+  ];
+
+  // Row selection configuration
+  const rowSelection = {
+    selectedRowKeys,
+    onChange: (selectedKeys) => {
+      setSelectedRowKeys(selectedKeys);
+    },
+    getCheckboxProps: (record) => ({
+      name: record.companyName,
+    }),
+  };
+
+  return (
+    <div className="page-wrapper">
+      <div className="content">
+        {/* Header */}
+        <div className="page-header" style={{ marginBottom: '24px' }}>
+          <div className="add-item d-flex">
+            <div className="page-title">
+              <h4 style={{ color: '#ffffff', margin: 0 }}>Todo</h4>
+              <h6 style={{ color: '#6c757d', margin: '4px 0 0 0' }}>Manage Your Todo</h6>
+            </div>
+          </div>
+          <div className="page-btn">
+            <Button
+              type="primary"
+              icon={<Plus size={16} />}
+              style={{
+                background: 'linear-gradient(45deg, #ff6b35, #f7931e)',
+                border: 'none',
+                borderRadius: '6px',
+                height: '40px',
+                display: 'flex',
+                alignItems: 'center',
+                gap: '8px'
+              }}
+            >
+              Create New
+            </Button>
+          </div>
+        </div>
+
+        {/* Todo Lists Header */}
+        <div style={{
+          background: '#2d2d2d',
+          padding: '16px 24px',
+          borderRadius: '8px 8px 0 0',
+          borderBottom: '1px solid #404040'
+        }}>
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+              <span style={{ color: '#ffffff', fontSize: '16px', fontWeight: '500' }}>
+                Todo Lists
+              </span>
+              <Tag
+                style={{
+                  background: '#ff6b35',
+                  color: '#ffffff',
+                  border: 'none',
+                  borderRadius: '12px',
+                  fontSize: '12px'
+                }}
+              >
+                My Todo List
+              </Tag>
+            </div>
+
+            {/* Filters */}
+            <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+              <RangePicker
+                style={{
+                  background: '#404040',
+                  border: '1px solid #555',
+                  borderRadius: '6px'
+                }}
+                placeholder={['05/23/2025', '05/29/2025']}
+              />
+
+              <Select
+                value={filterTags}
+                onChange={setFilterTags}
+                style={{ width: 120, background: '#404040' }}
+                dropdownStyle={{ background: '#2d2d2d' }}
+              >
+                <Option value="All Tags">Tags</Option>
+                <Option value="Social">Social</Option>
+                <Option value="Meeting">Meeting</Option>
+                <Option value="Research">Research</Option>
+              </Select>
+
+              <Select
+                value={filterAssignee}
+                onChange={setFilterAssignee}
+                style={{ width: 120, background: '#404040' }}
+                dropdownStyle={{ background: '#2d2d2d' }}
+              >
+                <Option value="All Assignees">Assignee</Option>
+                <Option value="John Doe">John Doe</Option>
+                <Option value="Jane Smith">Jane Smith</Option>
+              </Select>
+
+              <Select
+                value={filterStatus}
+                onChange={setFilterStatus}
+                style={{ width: 140, background: '#404040' }}
+                dropdownStyle={{ background: '#2d2d2d' }}
+              >
+                <Option value="All Status">Select Status</Option>
+                <Option value="Completed">Completed</Option>
+                <Option value="In Progress">In Progress</Option>
+                <Option value="Pending">Pending</Option>
+              </Select>
+
+              <Select
+                value={sortBy}
+                onChange={setSortBy}
+                style={{ width: 140, background: '#404040' }}
+                dropdownStyle={{ background: '#2d2d2d' }}
+              >
+                <Option value="Last 7 Days">Sort By: Last 7 Days</Option>
+                <Option value="Last 30 Days">Last 30 Days</Option>
+                <Option value="This Month">This Month</Option>
+              </Select>
+            </div>
+          </div>
+        </div>
+
+        {/* Table */}
+        <div style={{
+          background: '#2d2d2d',
+          borderRadius: '0 0 8px 8px',
+          overflow: 'hidden'
+        }}>
+          <Table
+            rowSelection={rowSelection}
+            columns={columns}
+            dataSource={todoData}
+            pagination={{
+              pageSize: 10,
+              showSizeChanger: true,
+              showQuickJumper: true,
+              showTotal: (total, range) =>
+                `Row Per Page: ${range[1] - range[0] + 1} Entries | Showing ${range[0]} to ${range[1]} of ${total} entries`,
+              style: {
+                background: '#2d2d2d',
+                padding: '16px 24px'
+              }
+            }}
+            style={{
+              background: '#2d2d2d'
+            }}
+            className="todo-table"
+          />
+        </div>
+      </div>
+
+      <style>{`
+        .todo-table .ant-table {
+          background: #2d2d2d !important;
+        }
+        .todo-table .ant-table-thead > tr > th {
+          background: #404040 !important;
+          border-bottom: 1px solid #555 !important;
+          color: #ffffff !important;
+          font-weight: 500 !important;
+        }
+        .todo-table .ant-table-tbody > tr > td {
+          background: #2d2d2d !important;
+          border-bottom: 1px solid #404040 !important;
+          color: #ffffff !important;
+        }
+        .todo-table .ant-table-tbody > tr:hover > td {
+          background: #404040 !important;
+        }
+        .todo-table .ant-pagination {
+          background: #2d2d2d !important;
+        }
+        .todo-table .ant-pagination .ant-pagination-item {
+          background: #404040 !important;
+          border: 1px solid #555 !important;
+        }
+        .todo-table .ant-pagination .ant-pagination-item a {
+          color: #ffffff !important;
+        }
+        .todo-table .ant-pagination .ant-pagination-item-active {
+          background: #ff6b35 !important;
+          border-color: #ff6b35 !important;
+        }
+        .todo-table .ant-pagination .ant-pagination-item-active a {
+          color: #ffffff !important;
+        }
+        .ant-select-dropdown {
+          background: #2d2d2d !important;
+        }
+        .ant-select-item {
+          color: #ffffff !important;
+        }
+        .ant-select-item:hover {
+          background: #404040 !important;
+        }
+        .ant-picker-dropdown {
+          background: #2d2d2d !important;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default TodoList;