diff --git a/app/components/KnowledgeQuests.tsx b/app/components/KnowledgeQuests.tsx
index d901ad6..66cc459 100644
--- a/app/components/KnowledgeQuests.tsx
+++ b/app/components/KnowledgeQuests.tsx
@@ -40,27 +40,22 @@ export default function KnowledgeQuests() {
       }
     return(
         <section className=''>
-            <div className=''>
-                <div className=''>
-                    <h2 className='text-[20px] font-[700] inline-flex p-6'>Knowledge Quests <img src="../../assets/right-arrow.svg" alt="" /></h2>   
-                    <div className='flex flex-col gap-6'>
-                        {knowledgeData.map(data => (
-                            <div key={data.id} className='flex flex-row justify-between px-6 place-items-center'>
-                                <div className='flex flex-row justify-between gap-6'>
-                                    <img src={data.img} alt="" />
-                                    <div className='flex flex-col space-y-3'>
-                                      <h2 className='text-[16px] font-[700] text-[#000]'>{data.title}</h2>
-                                      <p className='text-[14px] font-[600] text-[#525252]'>{data.challenge}</p>
-                                      <p className='text-[14px] font-[600] text-[#9D9D9D]'>{data.question}</p>
-                                  </div>
-                                </div>
-                                <button className='bg-[#000] text-[#FFF] rounded-[8px] px-16 py-3 h-fit text-[18px] font-[600]'>Start</button>
-                            </div>
-                        ))}
-                    </div>                             
-                </div>
-               
-            </div>
+          <h2 className='text-[20px] font-[700] inline-flex p-6'>Knowledge Quests <img src="/assets/right-arrow.svg" alt="" /></h2>   
+          <div className='flex flex-col gap-6'>
+              {knowledgeData.map(data => (
+                  <div key={data.id} className='flex flex-row justify-between px-6 place-items-center'>
+                      <div className='flex flex-row justify-between gap-6'>
+                          <img src={data.img} alt="" />
+                          <div className='flex flex-col space-y-3'>
+                            <h2 className='text-[16px] font-[700] text-[#000]'>{data.title}</h2>
+                            <p className='text-[14px] font-[600] text-[#525252]'>{data.challenge}</p>
+                            <p className='text-[14px] font-[600] text-[#9D9D9D]'>{data.question}</p>
+                        </div>
+                      </div>
+                      <button className='bg-[#000] text-[#FFF] rounded-[8px] px-16 py-3 h-fit text-[18px] font-[600]'>Start</button>
+                  </div>
+              ))}
+          </div>                             
         </section> 
     )
 }
diff --git a/app/components/LeftSideMenuItems.tsx b/app/components/LeftSideMenuItems.tsx
new file mode 100644
index 0000000..57d8f2d
--- /dev/null
+++ b/app/components/LeftSideMenuItems.tsx
@@ -0,0 +1,136 @@
+import React, {useState} from 'react';
+import {Layout, Menu, theme, Button, Modal, MenuProps, Breadcrumb, Dropdown, Space} from 'antd';
+import { SettingOutlined, QuestionCircleOutlined, LogoutOutlined, RightOutlined} from '@ant-design/icons';
+import '../../public/assets/left_side_nav.css';
+import AdministrationIcon from '~/components/customIcon/AdministrationIcon';
+import MyCoursesIcon from '~/components/customIcon/MyCoursesIcon';
+import ExaminationIcon from '~/components/customIcon/ExaminationIcon';
+import CommunityIcon from '~/components/customIcon/CommunityIcon';
+import NotificationIcon from '~/components/customIcon/NotificationIcon';
+
+
+
+const items2: MenuProps['items'] = [
+    {
+        key: 'subsd1',
+        icon: <AdministrationIcon />,
+        label: (<p className='py-2.5'>&nbsp; Administration</p>),
+        children: [
+            {
+            key: '1sd',
+            label: (<a href='#'>Class Schedules</a>),
+            },
+            {
+            key: '2sd',
+            label: (<a href='#'>Classmate Directory</a>),
+            },
+            {
+            key: '3sd',
+            label: (<a href='#'>Qualifications</a>),
+            },
+        ],
+    },
+    {
+        key: 'subsd2',
+        icon: <MyCoursesIcon />,
+        label: (<p className='py-2.5'>&nbsp; My Courses</p>),
+        children: [
+            {
+            key: '4sd',
+            label: (<a href='#'>Graduate Program</a>),
+            },
+            {
+            key: '5sd',
+            label: (<a href='#'>Post-Graduate Program</a>),
+            },
+        ],
+    },
+    {
+        key: 'subsd3',
+        icon: <ExaminationIcon />,
+        label: (<p className='py-2.5'>&nbsp; Examinations</p>),
+        children: [
+            {
+            key: '6sd',
+            label: (<a href='#'>Exam Scheduled</a>),
+            },
+            {
+            key: '7sd',
+            label: (<a href='#'>Upcoming Exam</a>),
+            },
+            {
+            key: '8sd',
+            label: (<a href='#'>Passed Exam</a>),
+            },
+        ],
+    },
+    {
+        key: 'subsd4',
+        icon: <CommunityIcon />,
+        label: (<p className='py-2.5'>&nbsp; Community</p>),
+        children: [
+        {
+            key: '9sd',
+            label: (<a href='#'>Exam Scheduled</a>),
+        },
+        {
+            key: '10sd',
+            label: (<a href='#'>Upcoming Exam</a>),
+        },
+        {
+            key: '11sd',
+            label: (<a href='#'>Passed Exam</a>),
+        },
+        ],
+    },
+    {
+        key: 'subsd5',
+        icon: <NotificationIcon />,
+        label: (<p className='py-2.5'>&nbsp; Notifications</p>),
+        children: [
+            {
+            key: '12sd',
+            label: (<a href='#'>Exam Scheduled</a>),
+            },
+            {
+            key: '13sd',
+            label: (<a href='#'>Upcoming Exam</a>),
+            },
+            {
+            key: '14sd',
+            label: (<a href='#'>Passed Exam</a>),
+            },
+        ],
+    },
+    // getItem('Files', '9', <FileOutlined />),
+    {
+        key: 'grp',
+        label: '',
+        type: 'group',
+        style: { marginTop: '100px' },
+        children: [
+        {   
+            key: '15sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, 
+            icon: React.createElement(SettingOutlined, { style: { color: '#000' } }), 
+            label: (<h2 className='text-[18px] font-[700] text-[#000]'>Settings</h2>)
+        },
+        {
+            key: '16sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'},
+            icon: React.createElement(QuestionCircleOutlined, { style: { color: '#000' } }),
+            label: (<h2 className='text-[18px] font-[700] text-[#000]'>Help & Support</h2>)
+        },
+        {
+            key: '17sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'},
+            icon: React.createElement(LogoutOutlined, { style: { color: '#000' } }),
+            label: (<h2 className='text-[18px] font-[700] text-[#000]'>Logout</h2>)
+        },     
+        ],
+    },
+];
+
+const LeftSideMenu: React.FC = () => {
+    return(
+        <Menu className='custom-menu' mode="inline"  style={{ height: '100%', borderRight: 0, paddingTop: 30, background: 'transparent'}} items={items2} />
+    )
+}
+export default LeftSideMenu;
\ No newline at end of file
diff --git a/app/components/StartCourse.tsx b/app/components/StartCourse.tsx
new file mode 100644
index 0000000..6eaab09
--- /dev/null
+++ b/app/components/StartCourse.tsx
@@ -0,0 +1,124 @@
+import React, { useState } from 'react';
+import { Timeline } from 'antd';
+interface MaterialItem {
+    id: number;
+    material: number;
+    title: string;
+    type: string;
+    time: string;
+    date: string;
+    source: string;
+}
+const materialData: MaterialItem[] = [
+  {
+    id: 1,
+    material: 1,
+    title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+    type: "Video",
+    time: "30 mins",
+    date: "28-01-2024",
+    source: "https://videos.pexels.com/video-files/3195394/3195394-uhd_2560_1440_25fps.mp4"
+  },
+  {
+    id: 2,
+    material: 1,
+    title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+    type: "Video",
+    time: "30 mins",
+    date: "28-01-2024",
+    source: "https://videos.pexels.com/video-files/3195394/3195394-uhd_2560_1440_25fps.mp4"
+  },
+  {
+    id: 3,
+    material: 1,
+    title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+    type: "Reading Material",
+    time: "8 mins",
+    date: "28-01-2024",
+    source: "https://pdfobject.com/pdf/sample.pdf"
+  },
+  {
+    id: 4,
+    material: 1,
+    title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+    type: "MCQ",
+    time: "5 mins",
+    date: "28-01-2024",
+    source: "https://videos.pexels.com/video-files/3195394/3195394-uhd_2560_1440_25fps.mp4"
+  },
+  {
+    id: 5,
+    material: 1,
+    title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+    type: "Video",
+    time: "30 mins",
+    date: "28-01-2024",
+    source: "https://videos.pexels.com/video-files/3195394/3195394-uhd_2560_1440_25fps.mp4"
+  },
+  {
+    id: 6,
+    material: 1,
+    title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+    type: "Video",
+    time: "30 mins",
+    date: "28-01-2024",
+    source: "https://videos.pexels.com/video-files/3195394/3195394-uhd_2560_1440_25fps.mp4"
+  }
+];
+
+const TimelineComponent = () => {
+  const [selectedItem, setSelectedItem] = useState(materialData[0]);
+
+  const handleItemClick = (item : MaterialItem) => {
+    setSelectedItem(item);
+  };
+
+  const timelineItems = materialData.map((item) => ({
+    children: (
+      <div className='p-2' onClick={() => handleItemClick(item)} style={{ cursor: 'pointer', backgroundColor: item.id === selectedItem.id ? '#FFF4EA' : '#FFF'}}>
+        <p className='text-[12px] font-[600] text-[#6E6E6E]'><span>Material {item.material} </span> | <span>{item.date} </span></p>
+        <h2 className='text-[18px] font-[700]'>{item.title}</h2>
+        <p className='text-[14px] font-[600] text-[#EF7A0C]'><span>{item.type}</span> | <span>{item.time}</span></p>
+      </div>
+    ),
+    color: item.id === selectedItem.id ? '#EF7A0C' : '#CFCFCF',
+    dot: item.id === selectedItem.id
+      ? <div className='relative inline-block'>
+            <span className='' style={{ border: '4px solid #EF7A0C', borderRadius: '50%', display: 'inline-block', width: 32, height: 32 }}></span>
+            <span className='absolute inset-0 m-auto mt-[10px] h-10 w-10' style={{ backgroundColor: '#EF7A0C', borderRadius: '50%', display: 'inline-block', width: 12, height: 12 }}></span> 
+        </div>
+      : null,
+  }));
+
+  return (
+    <div>
+        <section className='container mx-auto px-4'>
+            <div className='grid grid-cols-1 md:grid-cols-7'>
+                <div className='md:col-span-2 mt-4'>
+                    <Timeline items={timelineItems} />
+                </div>
+                <div className='md:col-span-5'>
+                    <div>
+                        {selectedItem.type === 'Video' && (
+                            <video autoPlay={true} controls src={selectedItem.source} width="100%" />
+                        )}
+                        {selectedItem.type === 'Reading Material' && (
+                            <iframe src={selectedItem.source} width="100%" height="500px" />
+                        )}
+                        {selectedItem.type === 'MCQ' && (
+                            <div>
+                            {/* Render MCQ content here */}
+                            </div>
+                        )}
+                        <p className='text-[12px] font-[600] text-[#6E6E6E]'><span>Material {selectedItem.material} </span> | <span>{selectedItem.date} </span></p>
+                        <h2 className='text-[18px] font-[700]'>{selectedItem.title}</h2>
+                        <p className='text-[14px] font-[600] text-[#EF7A0C]'><span>{selectedItem.type}</span> | <span>{selectedItem.time}</span></p>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </div>
+  );
+};
+
+export default TimelineComponent;
diff --git a/app/components/TheoryCourses.tsx b/app/components/TheoryCourses.tsx
new file mode 100644
index 0000000..af574b6
--- /dev/null
+++ b/app/components/TheoryCourses.tsx
@@ -0,0 +1,133 @@
+type TheoryData = {
+    id: number;
+    module: number;
+    status: number;
+    time: number;
+    access: number;
+    title: string;
+    description: string;
+    img: string;
+    total_marks: string;
+};
+
+let theoryData: TheoryData[] = [
+    {
+      id: 1,
+      module: 1,
+      status: 2,
+      time: 4,
+      access: 1,
+      title: "Life History of Dr. Maria Montessori",
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+      img: "/assets/image1.jpg",
+      total_marks: "50"
+    },
+    {
+      id: 2,
+      module: 2,
+      status: 1,
+      time: 4,
+      access: 1,
+      title: "Introduction to Montessori Methods",
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+      img: "/assets/image2.jpg",
+      total_marks: "50"
+    },
+    {
+      id: 3,
+      module: 3,
+      status: 0,
+      time: 4,
+      access: 0,
+      title: "Exercises in Practical Life",
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+      img: "/assets/image3.jpg",
+      total_marks: "50"
+    },
+    {
+      id: 1,
+      module: 1,
+      status: 0,
+      time: 4,
+      access: 0,
+      title: "Life History of Dr. Maria Montessori",
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+      img: "/assets/image1.jpg",
+      total_marks: "50"
+    },
+    {
+      id: 2,
+      module: 2,
+      status: 0,
+      time: 4,
+      access: 0,
+      title: "Introduction to Montessori Methods",
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+      img: "/assets/image2.jpg",
+      total_marks: "50"
+    },
+    {
+      id: 3,
+      module: 3,
+      status: 0,
+      time: 4,
+      access: 0,
+      title: "Exercises in Practical Life",
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+      img: "/assets/image3.jpg",
+      total_marks: "50"
+    }
+];
+
+export default function CourseTheory() {
+    const getStatusText = (status: number): string => {
+        if (status === 2) return "<p style='color: #218B32; font-weight: 600; font-size: 18px; display: inline-flex;'><img style='margin-right: 8px;' src='/assets/green-tick.svg' />Finished</p>";
+        if (status === 1) return "<p style='color: #EF7A0C; font-weight: 600; font-size: 18px' >40% Completed</p>";
+        if (status === 0) return " ";
+        return "";
+    }
+
+    return(
+        <div>
+            <section className="container mx-auto p-4 px-10">
+                <div className="flex flex-row justify-between place-items-center rounded-[10px]" style={{background: 'linear-gradient(90.65deg, #4377C6 0%, #3B70C0 100%)'}}>
+                    <div className="flex flex-row h-[107px] place-items-center p-4 space-x-6">
+                        <div className="relative inline-block">
+                            <img className="h-[81px] w-[137px] rounded-[10px]" src="/assets/image3.jpg" alt="" />
+                            <button className="absolute inset-0 m-auto h-10 w-10">
+                                <img  src="/assets/play.svg" alt="" />
+                            </button>
+                        </div>
+                        <div className="">
+                            <h2 className="tet-[18px] font-[700] text-[#FFF] w-[328px]">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
+                            <p className="text-[14px] font-[600] text-[#EF7A0C]">
+                                <span> Video</span> &nbsp;|&nbsp; 
+                                <span> 30 mins</span>
+                            </p>
+                        </div>
+                    </div>
+                    <div className="pr-4">
+                        <button className="bg-[#FFF] text-[#000] font-[600] px-6 py-2 text-[18px] rounded-[8px]">Continue Learning</button>
+                    </div>
+                </div>
+            </section>
+            <section className="container mx-auto px-4">
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 p-6 gap-10 ">
+                    {
+                        theoryData.map((data, index) => (
+                            <div key={index} className={`border-[1px] border-[#218B32] p-3 rounded-[10px] ${data.access === 0 ? 'contrast-[0.3]' : ''} `}>
+                                <img className="w-full rounded-[8px]" src={data.img} alt="" />
+                                <h2 className="text-[18px] font-[700]">{data.title}</h2>
+                                <p className="text-[14px] font-[700] text-[#EF7A0C] py-2"><span>{data.time} Hours</span> | <span>Net Total Marks {data.total_marks}</span></p>
+                                <p className="text-[14px] font-[500] text-[#6E6E6E] pb-6">{data.description}</p>
+                                <div className="flex flex-row justify-between place-items-center">
+                                <button disabled={data.access === 0} className={`text-[18px] font-[600] bg-[#000] rounded-[8px] px-[50px] py-2 text-[#fff] ${data.access == 0 ? 'cursor-not-allowed' : ''}`}>{data.access === 0 ? 'Locked' : 'View'}</button>                                    <div dangerouslySetInnerHTML={{ __html: getStatusText(data.status) }} />
+                                </div>
+                            </div>
+                        ))
+                    }
+                </div>
+            </section>
+        </div>
+    )
+}
diff --git a/app/routes/ai-quiz.tsx b/app/routes/ai-quiz.tsx
index 9bbd635..e5863f0 100644
--- a/app/routes/ai-quiz.tsx
+++ b/app/routes/ai-quiz.tsx
@@ -36,7 +36,7 @@ function toggleSection() {
 
 export default function Index() {
     const [percent, setPercent] = useState(0);
-    const [secondsLeft, setSecondsLeft] = useState(5);
+    const [secondsLeft, setSecondsLeft] = useState(10);
 
     useEffect(() => {
         const interval = setInterval(() => {
@@ -45,7 +45,7 @@ export default function Index() {
                     clearInterval(interval);
                     return 100;
                 }
-                return Math.round(prevPercent + (100 / 5)); // Round percentage
+                return Math.round(prevPercent + (100 / 10)); // Round percentage
             });
             setSecondsLeft((prevSeconds) => {
                 if (prevSeconds <= 1) {
@@ -76,13 +76,13 @@ export default function Index() {
                         <label className="text-[18px] font-[500] my-4" htmlFor="textToUse">Text to Use</label>
                         <p className="text-[16px] font-[500] text-[#9D9D9D]"><span id="letterLength"></span><span>/2000</span></p>
                     </div>
-                    <textarea onChange={letterCount} name="queryMessage" id="queryMessage" rows="6" maxLength="200" className="focus:outline-none border-[1px] border-[#CFCFCF] rounded-[8px] p-6" placeholder="Enter the topic you’d like to generate a quiz for."></textarea>
+                    <textarea onChange={letterCount} name="queryMessage" id="queryMessage" rows={6} maxLength={2000} className="focus:outline-none border-[1px] border-[#CFCFCF] rounded-[8px] p-6" placeholder="Enter the topic you’d like to generate a quiz for."></textarea>
                 </div>
                 <h2 className="text-[18px] font-[500] my-4">Trending</h2>
                 <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                     <div className="border-[1px] border-[#CFCFCF] rounded-[8px]">
                         <div className="bg-[#C5DCFF] rounded-t-[8px] flex justify-center place-items-center">
-                            <img className="p-6" src="../../assets/quiz-logo.svg" alt="" />
+                            <img className="p-6" src="/assets/quiz-logo.svg" alt="" />
                         </div>
                         <div className="flex flex-col justify-center px-3 py-2">
                             <h3 className="text-[14px] font-[500] ">Dr. Marie Montessori Life Journey</h3>
@@ -91,7 +91,7 @@ export default function Index() {
                     </div>
                     <div className="border-[1px] border-[#CFCFCF] rounded-[8px]">
                         <div className="bg-[#E2C5FF] rounded-t-[8px] flex justify-center place-items-center">
-                            <img className="p-6" src="../../assets/quiz-logo.svg" alt="" />
+                            <img className="p-6" src="/assets/quiz-logo.svg" alt="" />
                         </div>
                         <div className="flex flex-col justify-center px-3 py-2">
                             <h3 className="text-[14px] font-[500]">Montessori Methods</h3>
@@ -100,7 +100,7 @@ export default function Index() {
                     </div>
                     <div className="border-[1px] border-[#CFCFCF] rounded-[8px]">
                         <div className="bg-[#FFD0C5] rounded-t-[8px] flex justify-center place-items-center">
-                            <img className="p-6" src="../../assets/quiz-logo.svg" alt="" />
+                            <img className="p-6" src="/assets/quiz-logo.svg" alt="" />
                         </div>
                         <div className="flex flex-col justify-center px-3 py-2">
                             <h3 className="text-[14px] font-[500] ">Practical Methods</h3>
@@ -112,17 +112,17 @@ export default function Index() {
                 <div className="flex flex-col md:flex-row gap-[10px]">
                     <div className="drop-shadow-2xl"> 
                         <button className="inline-flex justify-center place-items-center border-[1px] border-[#CFCFCF] rounded-[8px] px-[20px] py-[12px] text-[16px] font-[500] text-[#525252]">
-                            <img src="../../assets/button-icon.svg" alt="" /> &nbsp; Simplify Questions 
+                            <img src="/assets/button-icon.svg" alt="" /> &nbsp; Simplify Questions 
                         </button>
                     </div>
                     <div className="drop-shadow-2xl"> 
                         <button className="inline-flex justify-center place-items-center border-[1px] border-[#CFCFCF] rounded-[8px] px-[20px] py-[12px] text-[16px] font-[500] text-[#525252]">
-                            <img src="../../assets/button-icon.svg" alt="" /> &nbsp; Similar Topics 
+                            <img src="/assets/button-icon.svg" alt="" /> &nbsp; Similar Topics 
                         </button>
                     </div>
                     <div className="drop-shadow-2xl"> 
                         <button className="inline-flex justify-center place-items-center border-[1px] border-[#CFCFCF] rounded-[8px] px-[20px] py-[12px] text-[16px] font-[500] text-[#525252]">
-                            <img src="../../assets/button-icon.svg" alt="" /> &nbsp; Make it fun & easy 
+                            <img src="/assets/button-icon.svg" alt="" /> &nbsp; Make it fun & easy 
                         </button>
                     </div>
                 </div>
@@ -138,9 +138,9 @@ export default function Index() {
                     <button onClick={toggleSection} className="px-[40px] py-[12px] text-[18px] font-[600] text-[#FFF] rounded-[10px] bg-[#000]">Generate Quiz</button>
                 </div>
             </section>
-            <section id="loadingSection" style={{display: 'none'}} className="container mx-auto max-w-[894px] shadow-xl rounded-xl px-10 py-8 my-8">
+            <section id="loadingSection" style={{display: 'none'}} className="container mx-auto max-w-[894px] shadow-xl rounded-xl px-10 py-8 my-8 mt-[200px]">
                 <div className="flex flex-col justify-center place-items-center my-auto ">
-                    <img src="../../assets/robot.png" alt="" />
+                    <img src="/assets/robot.png" alt="" />
                     <h2 className="text-[24px] font-[500] py-3">Generating Quiz</h2>
                     <p className="text-[14px] font-[400] text-[#525252]">This usually takes <span>{secondsLeft}</span> seconds</p>
                     <div className='w-full sm:w-1/2'>
diff --git a/app/routes/classmate-directory.tsx b/app/routes/classmate-directory.tsx
index d6e935c..24bd087 100644
--- a/app/routes/classmate-directory.tsx
+++ b/app/routes/classmate-directory.tsx
@@ -10,6 +10,7 @@ import TopPerformers from '~/components/TopPerformers';
 import ClassmateTutorSection from '~/components/ClassmateTutorSection';
 import {Layout, Menu, theme, Button, Modal, MenuProps, Breadcrumb, Dropdown, Space} from 'antd';
 import '../../public/assets/left_side_nav.css';
+import LeftSideMenu from '~/components/LeftSideMenuItems';
 
 
 const { Content, Sider } = Layout;
@@ -22,123 +23,7 @@ const items1: MenuProps['items'] = ['1', '2', '3'].map((key) => ({
 type MenuItem = Required<MenuProps>['items'][number];
 
 
-const items2: MenuProps['items'] = [
-    {
-        key: 'subsd1',
-        icon: <AdministrationIcon />,
-        label: (<p>&nbsp; Administration</p>),
-        children: [
-            {
-            key: '1sd',
-            label: (<a href='#'>Class Schedules</a>),
-            },
-            {
-            key: '2sd',
-            label: (<a href='#'>Classmate Directory</a>),
-            },
-            {
-            key: '3sd',
-            label: (<a href='#'>Qualifications</a>),
-            },
-        ],
-    },
-    {
-        key: 'subsd2',
-        icon: <MyCoursesIcon />,
-        label: (<p>&nbsp; My Courses</p>),
-        children: [
-            {
-            key: '4sd',
-            label: (<a href='#'>Graduate Program</a>),
-            },
-            {
-            key: '5sd',
-            label: (<a href='#'>Post-Graduate Program</a>),
-            },
-        ],
-    },
-    {
-        key: 'subsd3',
-        icon: <ExaminationIcon />,
-        label: (<p>&nbsp; Examinations</p>),
-        children: [
-            {
-            key: '6sd',
-            label: (<a href='#'>Exam Scheduled</a>),
-            },
-            {
-            key: '7sd',
-            label: (<a href='#'>Upcoming Exam</a>),
-            },
-            {
-            key: '8sd',
-            label: (<a href='#'>Passed Exam</a>),
-            },
-        ],
-    },
-    {
-        key: 'subsd4',
-        icon: <CommunityIcon />,
-        label: (<p>&nbsp; Community</p>),
-        children: [
-        {
-            key: '9sd',
-            label: (<a href='#'>Exam Scheduled</a>),
-        },
-        {
-            key: '10sd',
-            label: (<a href='#'>Upcoming Exam</a>),
-        },
-        {
-            key: '11sd',
-            label: (<a href='#'>Passed Exam</a>),
-        },
-        ],
-    },
-    {
-        key: 'subsd5',
-        icon: <NotificationIcon />,
-        label: (<p>&nbsp; Notifications</p>),
-        children: [
-            {
-            key: '12sd',
-            label: (<a href='#'>Exam Scheduled</a>),
-            },
-            {
-            key: '13sd',
-            label: (<a href='#'>Upcoming Exam</a>),
-            },
-            {
-            key: '14sd',
-            label: (<a href='#'>Passed Exam</a>),
-            },
-        ],
-    },
-    // getItem('Files', '9', <FileOutlined />),
-    {
-        key: 'grp',
-        label: '',
-        type: 'group',
-        style: { marginTop: '100px' },
-        children: [
-        {   
-            key: '15sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, 
-            icon: React.createElement(SettingOutlined, { style: { color: '#000' } }), 
-            label: (<h2 className='text-[18px] font-[700] text-[#000]'>Settings</h2>)
-        },
-        {
-            key: '16sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'},
-            icon: React.createElement(QuestionCircleOutlined, { style: { color: '#000' } }),
-            label: (<h2 className='text-[18px] font-[700] text-[#000]'>Help & Support</h2>)
-        },
-        {
-            key: '17sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'},
-            icon: React.createElement(LogoutOutlined, { style: { color: '#000' } }),
-            label: (<h2 className='text-[18px] font-[700] text-[#000]'>Logout</h2>)
-        },     
-        ],
-    },
-];
+
 const items: MenuProps['items'] = [
     {
       label: <a href="https://www.antgroup.com">1st menu item</a>,
@@ -164,7 +49,6 @@ const App: React.FC = () => {
     const [collapsed, setCollapsed] = useState(false);
     const [open, setOpen] = React.useState<boolean>(false);
     const [loading, setLoading] = React.useState<boolean>(true);
-
     const showLoading = () => {
         setOpen(true);
         setLoading(true);
@@ -186,10 +70,10 @@ const App: React.FC = () => {
                         <h1 className='text-[22px] font-[700] my-[37px] text-left text-[#000]'>IIMTT Logo</h1>    
                     </div>
                 </div>
-                <Menu className='custom-menu' mode="inline"  style={{ height: '100%', borderRight: 0, paddingTop: 30, background: 'transparent'}} items={items2} />
+                <LeftSideMenu />
             </Sider>
             </div>
-            <Layout style={{marginLeft: 366, background: '#FFF'}}>
+            <Layout style={{marginLeft: collapsed ?  80 : 366, background: '#FFF', transition: 'margin-left 0.2s ease'}}>
                 <Content style={{  overflow: 'initial',}}>
                     <div className='border-b-[1px] py-2 border-[#CFCFCF]'>
                         <div className='container mx-auto flex flex-row justify-between pr-8'>
diff --git a/app/routes/course._index.tsx b/app/routes/course._index.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/app/routes/course.theory.tsx b/app/routes/course.theory.tsx
new file mode 100644
index 0000000..7a0779a
--- /dev/null
+++ b/app/routes/course.theory.tsx
@@ -0,0 +1,112 @@
+import React, {useState} from 'react';
+import { RightOutlined} from '@ant-design/icons';
+import TheoroCourse from '~/components/TheoryCourses';
+import {Layout, theme, Button, MenuProps, Breadcrumb, Dropdown, Space} from 'antd';
+import '../../public/assets/left_side_nav.css';
+import LeftSideMenu from '~/components/LeftSideMenuItems';
+
+
+const { Content, Sider } = Layout;
+
+const items1: MenuProps['items'] = ['1', '2', '3'].map((key) => ({
+  key,
+  label: `navsd ${key}`,
+}));
+
+type MenuItem = Required<MenuProps>['items'][number];
+
+
+
+const items: MenuProps['items'] = [
+    {
+      label: <a href="https://www.antgroup.com">1st menu item</a>,
+      key: '01sd',
+    },
+    {
+      type: 'divider',
+    },
+    {
+      label: <a href="https://www.aliyun.com">2nd menu item</a>,
+      key: '02sd',
+    },
+    {
+      type: 'divider',
+    },
+    {
+      label: '3rd menu item',
+      key: '03sd',
+    },
+];
+
+const App: React.FC = () => {
+    const [collapsed, setCollapsed] = useState(false);
+    const [open, setOpen] = React.useState<boolean>(false);
+    const [loading, setLoading] = React.useState<boolean>(true);
+    const showLoading = () => {
+        setOpen(true);
+        setLoading(true);
+
+        // Simple loading mock. You should add cleanup logic in real world.
+        setTimeout(() => {
+        setLoading(false);
+        }, 100);
+    };
+    const { token: { colorBgContainer}, } = theme.useToken();
+
+  return (
+    <Layout>
+        <Layout>
+            <div >
+            <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)} width={366} style={{overflow: 'auto', height: '110vh', position: 'fixed', left: 0, top: 0, bottom: 0,  background: '#FFF', borderRight: '1px solid #CFCFCF', borderBottom: '2px solid #000'}}>
+                <div className='flex flex-col justify-center demo-logo-vertical'>
+                    <div className='px-4'>
+                        <h1 className='text-[22px] font-[700] my-[37px] text-left text-[#000]'>IIMTT Logo</h1>    
+                    </div>
+                </div>
+                <LeftSideMenu />
+            </Sider>
+            </div>
+            <Layout style={{marginLeft: collapsed ?  80 : 366, background: '#FFF', transition: 'margin-left 0.2s ease'}}>
+                <Content style={{  overflow: 'initial',}}>
+                    <div className='border-b-[1px] py-2 border-[#CFCFCF]'>
+                        <div className='container mx-auto flex flex-row justify-between pr-8'>
+                            <div className='inline-flex justify-center place-items-center'>
+                                <Breadcrumb separator=">" className='pl-6' style={{fontSize: '18px' , fontWeight: '700'}} items={[{title: <a href="">Course</a>,},{title: 'Theory',},]}/> 
+                            </div>
+                            <div>
+                                <Button className='border-none shadow-none bg-transparent hover:bg-transparent' onClick={showLoading}>
+                                    <div className='border-[1px] border[#525252] rounded-full p-2 w-[47px] h-[47px]'>
+                                        <img src="../../assets/notification-bell.svg" alt="" />
+                                    </div>
+                                </Button>
+                                <Dropdown menu={{ items }} trigger={['click']}>
+                                    <a onClick={(e) => e.preventDefault()}>
+                                    <Space>
+                                        <div className='flex flex-row border-[1px] border-[#BBBBBB] rounded-full p-1 gap-x-6'>
+                                            <img src="/assets/man.png" alt="" />
+                                            <div>
+                                                <p className='text-[12px] text-[#EF7A0C] font-[500]'>My Profile</p>
+                                                <p className='text-[16px] text-[#27549F] font-[700]'>Rayan Holiday</p>
+                                            </div>
+                                            <RightOutlined style={{ fontSize: '12px', paddingRight: '10px' }} />
+                                        </div>
+                                    </Space>
+                                    </a>
+                                </Dropdown>
+                            </div>
+                        </div>
+                    </div>
+                    <div className=''>
+                        <TheoroCourse />
+                    </div>
+                    {/* Place Content from here */}
+                    
+
+                </Content>
+            </Layout>
+        </Layout>
+    </Layout>
+  );
+};
+export default App;
+
diff --git a/app/routes/knowledge-quest.tsx b/app/routes/knowledge-quest.tsx
index 1e6f6d9..c5470d2 100644
--- a/app/routes/knowledge-quest.tsx
+++ b/app/routes/knowledge-quest.tsx
@@ -10,6 +10,7 @@ import TopPerformers from '~/components/TopPerformers';
 import {Layout, Menu, theme, Button, Modal, MenuProps} from 'antd';
 import { Dropdown, Space } from 'antd';
 import '../../public/assets/left_side_nav.css';
+import LeftSideMenu from '~/components/LeftSideMenuItems';
 
 
 const { Content, Sider } = Layout;
@@ -22,123 +23,6 @@ const items1: MenuProps['items'] = ['1', '2', '3'].map((key) => ({
 type MenuItem = Required<MenuProps>['items'][number];
 
 
-const items2: MenuProps['items'] = [
-    {
-        key: 'subsd1',
-        icon: <AdministrationIcon />,
-        label: (<p>&nbsp; Administration</p>),
-        children: [
-            {
-            key: '1sd',
-            label: (<a href='#'>Class Schedules</a>),
-            },
-            {
-            key: '2sd',
-            label: (<a href='/classmate-directory'>Classmate Directory</a>),
-            },
-            {
-            key: '3sd',
-            label: (<a href='#'>Qualifications</a>),
-            },
-        ],
-    },
-    {
-        key: 'subsd2',
-        icon: <MyCoursesIcon />,
-        label: (<p>&nbsp; My Courses</p>),
-        children: [
-            {
-            key: '4sd',
-            label: (<a href='#'>Graduate Program</a>),
-            },
-            {
-            key: '5sd',
-            label: (<a href='#'>Post-Graduate Program</a>),
-            },
-        ],
-    },
-    {
-        key: 'subsd3',
-        icon: <ExaminationIcon />,
-        label: (<p>&nbsp; Examinations</p>),
-        children: [
-            {
-            key: '6sd',
-            label: (<a href='#'>Exam Scheduled</a>),
-            },
-            {
-            key: '7sd',
-            label: (<a href='#'>Upcoming Exam</a>),
-            },
-            {
-            key: '8sd',
-            label: (<a href='#'>Passed Exam</a>),
-            },
-        ],
-    },
-    {
-        key: 'subsd4',
-        icon: <CommunityIcon />,
-        label: (<p>&nbsp; Community</p>),
-        children: [
-        {
-            key: '9sd',
-            label: (<a href='#'>Exam Scheduled</a>),
-        },
-        {
-            key: '10sd',
-            label: (<a href='#'>Upcoming Exam</a>),
-        },
-        {
-            key: '11sd',
-            label: (<a href='#'>Passed Exam</a>),
-        },
-        ],
-    },
-    {
-        key: 'subsd5',
-        icon: <NotificationIcon />,
-        label: (<p>&nbsp; Notifications</p>),
-        children: [
-            {
-            key: '12sd',
-            label: (<a href='#'>Exam Scheduled</a>),
-            },
-            {
-            key: '13sd',
-            label: (<a href='#'>Upcoming Exam</a>),
-            },
-            {
-            key: '14sd',
-            label: (<a href='#'>Passed Exam</a>),
-            },
-        ],
-    },
-    // getItem('Files', '9', <FileOutlined />),
-    {
-        key: 'grp',
-        label: '',
-        type: 'group',
-        style: { marginTop: '100px' },
-        children: [
-        {   
-            key: '15sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, 
-            icon: React.createElement(SettingOutlined, { style: { color: '#000' } }), 
-            label: (<h2 className='text-[18px] font-[700] text-[#000]'>Settings</h2>)
-        },
-        {
-            key: '16sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'},
-            icon: React.createElement(QuestionCircleOutlined, { style: { color: '#000' } }),
-            label: (<h2 className='text-[18px] font-[700] text-[#000]'>Help & Support</h2>)
-        },
-        {
-            key: '17sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'},
-            icon: React.createElement(LogoutOutlined, { style: { color: '#000' } }),
-            label: (<h2 className='text-[18px] font-[700] text-[#000]'>Logout</h2>)
-        },     
-        ],
-    },
-];
 const items: MenuProps['items'] = [
     {
       label: <a href="https://www.antgroup.com">1st menu item</a>,
@@ -186,7 +70,7 @@ const App: React.FC = () => {
                         <h1 className='text-[22px] font-[700] my-[37px] text-left text-[#000]'>IIMTT Logo</h1>    
                     </div>
                 </div>
-                <Menu className='custom-menu' mode="inline"  style={{ height: '100%', borderRight: 0, paddingTop: 30, background: 'transparent'}} items={items2} />
+                <LeftSideMenu />
             </Sider>
             </div>
             <Layout style={{marginLeft: 366, background: '#FFF'}}>
diff --git a/app/routes/progress-review.tsx b/app/routes/progress-review.tsx
index c373daf..3c25dd7 100644
--- a/app/routes/progress-review.tsx
+++ b/app/routes/progress-review.tsx
@@ -12,6 +12,7 @@ import QuizzesScore from '~/components/QuizzesScore'
 import YourCertificates from '~/components/YourCertificates'
 import { Dropdown, Space } from 'antd';
 import '../../public/assets/left_side_nav.css';
+import LeftSideMenu from '~/components/LeftSideMenuItems';
 
 
 const { Content, Sider } = Layout;
@@ -23,124 +24,6 @@ const items1: MenuProps['items'] = ['1', '2', '3'].map((key) => ({
 
 type MenuItem = Required<MenuProps>['items'][number];
 
-
-const items2: MenuProps['items'] = [
-    {
-        key: 'subsd1',
-        icon: <AdministrationIcon />,
-        label: (<p>&nbsp; Administration</p>),
-        children: [
-            {
-            key: '1sd',
-            label: (<a href='#'>Class Schedules</a>),
-            },
-            {
-            key: '2sd',
-            label: (<a href='#'>Classmate Directory</a>),
-            },
-            {
-            key: '3sd',
-            label: (<a href='#'>Qualifications</a>),
-            },
-        ],
-    },
-    {
-        key: 'subsd2',
-        icon: <MyCoursesIcon />,
-        label: (<p>&nbsp; My Courses</p>),
-        children: [
-            {
-            key: '4sd',
-            label: (<a href='#'>Graduate Program</a>),
-            },
-            {
-            key: '5sd',
-            label: (<a href='#'>Post-Graduate Program</a>),
-            },
-        ],
-    },
-    {
-        key: 'subsd3',
-        icon: <ExaminationIcon />,
-        label: (<p>&nbsp; Examinations</p>),
-        children: [
-            {
-            key: '6sd',
-            label: (<a href='#'>Exam Scheduled</a>),
-            },
-            {
-            key: '7sd',
-            label: (<a href='#'>Upcoming Exam</a>),
-            },
-            {
-            key: '8sd',
-            label: (<a href='#'>Passed Exam</a>),
-            },
-        ],
-    },
-    {
-        key: 'subsd4',
-        icon: <CommunityIcon />,
-        label: (<p>&nbsp; Community</p>),
-        children: [
-        {
-            key: '9sd',
-            label: (<a href='#'>Exam Scheduled</a>),
-        },
-        {
-            key: '10sd',
-            label: (<a href='#'>Upcoming Exam</a>),
-        },
-        {
-            key: '11sd',
-            label: (<a href='#'>Passed Exam</a>),
-        },
-        ],
-    },
-    {
-        key: 'subsd5',
-        icon: <NotificationIcon />,
-        label: (<p>&nbsp; Notifications</p>),
-        children: [
-            {
-            key: '12sd',
-            label: (<a href='#'>Exam Scheduled</a>),
-            },
-            {
-            key: '13sd',
-            label: (<a href='#'>Upcoming Exam</a>),
-            },
-            {
-            key: '14sd',
-            label: (<a href='#'>Passed Exam</a>),
-            },
-        ],
-    },
-    // getItem('Files', '9', <FileOutlined />),
-    {
-        key: 'grp',
-        label: '',
-        type: 'group',
-        style: { marginTop: '100px' },
-        children: [
-        {   
-            key: '15sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, 
-            icon: React.createElement(SettingOutlined, { style: { color: '#000' } }), 
-            label: (<h2 className='text-[18px] font-[700] text-[#000]'>Settings</h2>)
-        },
-        {
-            key: '16sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'},
-            icon: React.createElement(QuestionCircleOutlined, { style: { color: '#000' } }),
-            label: (<h2 className='text-[18px] font-[700] text-[#000]'>Help & Support</h2>)
-        },
-        {
-            key: '17sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'},
-            icon: React.createElement(LogoutOutlined, { style: { color: '#000' } }),
-            label: (<h2 className='text-[18px] font-[700] text-[#000]'>Logout</h2>)
-        },     
-        ],
-    },
-];
 const items: MenuProps['items'] = [
     {
       label: <a href="https://www.antgroup.com">1st menu item</a>,
@@ -188,7 +71,7 @@ const App: React.FC = () => {
                         <h1 className='text-[22px] font-[700] my-[37px] text-left text-[#000]'>IIMTT Logo</h1>    
                     </div>
                 </div>
-                <Menu className='custom-menu' mode="inline"  style={{ height: '100%', borderRight: 0, paddingTop: 30, background: 'transparent'}} items={items2} />
+                <LeftSideMenu />
             </Sider>
             </div>
             <Layout style={{marginLeft: 366, background: '#FFF'}}>
diff --git a/app/routes/start-course.tsx b/app/routes/start-course.tsx
new file mode 100644
index 0000000..ef53bca
--- /dev/null
+++ b/app/routes/start-course.tsx
@@ -0,0 +1,113 @@
+import React, {useState} from 'react';
+import { RightOutlined} from '@ant-design/icons';
+
+import StartCourse from '~/components/StartCourse';
+import {Layout, theme, Button, MenuProps, Breadcrumb, Dropdown, Space} from 'antd';
+import '../../public/assets/left_side_nav.css';
+import LeftSideMenu from '~/components/LeftSideMenuItems';
+
+
+const { Content, Sider } = Layout;
+
+const items1: MenuProps['items'] = ['1', '2', '3'].map((key) => ({
+  key,
+  label: `navsd ${key}`,
+}));
+
+type MenuItem = Required<MenuProps>['items'][number];
+
+
+
+const items: MenuProps['items'] = [
+    {
+      label: <a href="https://www.antgroup.com">1st menu item</a>,
+      key: '01sd',
+    },
+    {
+      type: 'divider',
+    },
+    {
+      label: <a href="https://www.aliyun.com">2nd menu item</a>,
+      key: '02sd',
+    },
+    {
+      type: 'divider',
+    },
+    {
+      label: '3rd menu item',
+      key: '03sd',
+    },
+];
+
+const Course: React.FC = () => {
+    const [collapsed, setCollapsed] = useState(false);
+    const [open, setOpen] = React.useState<boolean>(false);
+    const [loading, setLoading] = React.useState<boolean>(true);
+    const showLoading = () => {
+        setOpen(true);
+        setLoading(true);
+
+        // Simple loading mock. You should add cleanup logic in real world.
+        setTimeout(() => {
+        setLoading(false);
+        }, 100);
+    };
+    const { token: { colorBgContainer}, } = theme.useToken();
+
+  return (
+    <Layout>
+        <Layout>
+            <div >
+            <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)} width={366} style={{overflow: 'auto', height: '110vh', position: 'fixed', left: 0, top: 0, bottom: 0,  background: '#FFF', borderRight: '1px solid #CFCFCF', borderBottom: '2px solid #000'}}>
+                <div className='flex flex-col justify-center demo-logo-vertical'>
+                    <div className='px-4'>
+                        <h1 className='text-[22px] font-[700] my-[37px] text-left text-[#000]'>IIMTT Logo</h1>    
+                    </div>
+                </div>
+                <LeftSideMenu />
+            </Sider>
+            </div>
+            <Layout style={{marginLeft: collapsed ?  80 : 366, background: '#FFF', transition: 'margin-left 0.2s ease'}}>
+                <Content style={{  overflow: 'initial',}}>
+                    <div className='border-b-[1px] py-2 border-[#CFCFCF]'>
+                        <div className='container mx-auto flex flex-row justify-between pr-8'>
+                            <div className='inline-flex justify-center place-items-center'>
+                                <Breadcrumb separator=">" className='pl-6' style={{fontSize: '18px' , fontWeight: '700'}} items={[{title: <a href="">Course</a>,},{title: 'Theory',},]}/> 
+                            </div>
+                            <div>
+                                <Button className='border-none shadow-none bg-transparent hover:bg-transparent' onClick={showLoading}>
+                                    <div className='border-[1px] border[#525252] rounded-full p-2 w-[47px] h-[47px]'>
+                                        <img src="../../assets/notification-bell.svg" alt="" />
+                                    </div>
+                                </Button>
+                                <Dropdown menu={{ items }} trigger={['click']}>
+                                    <a onClick={(e) => e.preventDefault()}>
+                                    <Space>
+                                        <div className='flex flex-row border-[1px] border-[#BBBBBB] rounded-full p-1 gap-x-6'>
+                                            <img src="/assets/man.png" alt="" />
+                                            <div>
+                                                <p className='text-[12px] text-[#EF7A0C] font-[500]'>My Profile</p>
+                                                <p className='text-[16px] text-[#27549F] font-[700]'>Rayan Holiday</p>
+                                            </div>
+                                            <RightOutlined style={{ fontSize: '12px', paddingRight: '10px' }} />
+                                        </div>
+                                    </Space>
+                                    </a>
+                                </Dropdown>
+                            </div>
+                        </div>
+                    </div>
+                    <div className=''>
+                        <StartCourse />
+                    </div>
+                    {/* Place Content from here */}
+                    
+
+                </Content>
+            </Layout>
+        </Layout>
+    </Layout>
+  );
+};
+export default Course;
+
diff --git a/app/routes/student-dashboard._index.tsx b/app/routes/student-dashboard._index.tsx
index 44b730d..1179477 100644
--- a/app/routes/student-dashboard._index.tsx
+++ b/app/routes/student-dashboard._index.tsx
@@ -11,6 +11,7 @@ import TopPerformers from '~/components/TopPerformers';
 import {Layout, Menu, theme, Button, Modal, MenuProps} from 'antd';
 import { Dropdown, Space } from 'antd';
 import '../../public/assets/left_side_nav.css';
+import LeftSideMenu from '~/components/LeftSideMenuItems';
 
 
 const { Content, Sider } = Layout;
@@ -22,124 +23,6 @@ const items1: MenuProps['items'] = ['1', '2', '3'].map((key) => ({
 
 type MenuItem = Required<MenuProps>['items'][number];
 
-
-const items2: MenuProps['items'] = [
-    {
-        key: 'subsd1',
-        icon: <AdministrationIcon />,
-        label: (<p>&nbsp; Administration</p>),
-        children: [
-            {
-            key: '1sd',
-            label: (<a href='#'>Class Schedules</a>),
-            },
-            {
-            key: '2sd',
-            label: (<a href='#'>Classmate Directory</a>),
-            },
-            {
-            key: '3sd',
-            label: (<a href='#'>Qualifications</a>),
-            },
-        ],
-    },
-    {
-        key: 'subsd2',
-        icon: <MyCoursesIcon />,
-        label: (<p>&nbsp; My Courses</p>),
-        children: [
-            {
-            key: '4sd',
-            label: (<a href='#'>Graduate Program</a>),
-            },
-            {
-            key: '5sd',
-            label: (<a href='#'>Post-Graduate Program</a>),
-            },
-        ],
-    },
-    {
-        key: 'subsd3',
-        icon: <ExaminationIcon />,
-        label: (<p>&nbsp; Examinations</p>),
-        children: [
-            {
-            key: '6sd',
-            label: (<a href='#'>Exam Scheduled</a>),
-            },
-            {
-            key: '7sd',
-            label: (<a href='#'>Upcoming Exam</a>),
-            },
-            {
-            key: '8sd',
-            label: (<a href='#'>Passed Exam</a>),
-            },
-        ],
-    },
-    {
-        key: 'subsd4',
-        icon: <CommunityIcon />,
-        label: (<p>&nbsp; Community</p>),
-        children: [
-        {
-            key: '9sd',
-            label: (<a href='#'>Exam Scheduled</a>),
-        },
-        {
-            key: '10sd',
-            label: (<a href='#'>Upcoming Exam</a>),
-        },
-        {
-            key: '11sd',
-            label: (<a href='#'>Passed Exam</a>),
-        },
-        ],
-    },
-    {
-        key: 'subsd5',
-        icon: <NotificationIcon />,
-        label: (<p>&nbsp; Notifications</p>),
-        children: [
-            {
-            key: '12sd',
-            label: (<a href='#'>Exam Scheduled</a>),
-            },
-            {
-            key: '13sd',
-            label: (<a href='#'>Upcoming Exam</a>),
-            },
-            {
-            key: '14sd',
-            label: (<a href='#'>Passed Exam</a>),
-            },
-        ],
-    },
-    // getItem('Files', '9', <FileOutlined />),
-    {
-        key: 'grp',
-        label: '',
-        type: 'group',
-        style: { marginTop: '100px' },
-        children: [
-        {   
-            key: '15sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, 
-            icon: React.createElement(SettingOutlined, { style: { color: '#000' } }), 
-            label: (<h2 className='text-[18px] font-[700] text-[#000]'>Settings</h2>)
-        },
-        {
-            key: '16sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'},
-            icon: React.createElement(QuestionCircleOutlined, { style: { color: '#000' } }),
-            label: (<h2 className='text-[18px] font-[700] text-[#000]'>Help & Support</h2>)
-        },
-        {
-            key: '17sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'},
-            icon: React.createElement(LogoutOutlined, { style: { color: '#000' } }),
-            label: (<h2 className='text-[18px] font-[700] text-[#000]'>Logout</h2>)
-        },     
-        ],
-    },
-];
 const items: MenuProps['items'] = [
     {
       label: <a href="https://www.antgroup.com">1st menu item</a>,
@@ -187,7 +70,7 @@ const App: React.FC = () => {
                         <h1 className='text-[22px] font-[700] my-[37px] text-left text-[#000]'>IIMTT Logo</h1>    
                     </div>
                 </div>
-                <Menu className='custom-menu' mode="inline"  style={{ height: '100%', borderRight: 0, paddingTop: 30, background: 'transparent'}} items={items2} />
+                <LeftSideMenu />
             </Sider>
             </div>
             <Layout style={{marginLeft: 366, background: '#FFF'}}>
@@ -195,13 +78,13 @@ const App: React.FC = () => {
                     <div className='border-b-[1px] py-2 border-[#CFCFCF]'>
                         <div className='container mx-auto flex flex-row justify-between pr-8'>
                             <div className='inline-flex justify-center place-items-center'>
-                                <img src="../../assets/student-dash.svg" alt=""/>
+                                <img src="/assets/student-dash.svg" alt=""/>
                                 <p className='pl-1 text-[18px] font-[700] whitespace-nowrap'>Student Dashboard</p>
                             </div>
                             <div>
                                 <Button className='border-none shadow-none bg-transparent hover:bg-transparent' onClick={showLoading}>
                                     <div className='border-[1px] border[#525252] rounded-full p-2 w-[47px] h-[47px]'>
-                                        <img src="../../assets/notification-bell.svg" alt="" />
+                                        <img src="/assets/notification-bell.svg" alt="" />
                                     </div>
                                 </Button>
                                 <Dropdown menu={{ items }} trigger={['click']}>
diff --git a/public/assets/image1.jpg b/public/assets/image1.jpg
new file mode 100644
index 0000000..ed8fa12
Binary files /dev/null and b/public/assets/image1.jpg differ
diff --git a/public/assets/image2.jpg b/public/assets/image2.jpg
new file mode 100644
index 0000000..e2ca92e
Binary files /dev/null and b/public/assets/image2.jpg differ
diff --git a/public/assets/image3.jpg b/public/assets/image3.jpg
new file mode 100644
index 0000000..35c4782
Binary files /dev/null and b/public/assets/image3.jpg differ
diff --git a/public/assets/play.svg b/public/assets/play.svg
new file mode 100644
index 0000000..ea0e5f7
--- /dev/null
+++ b/public/assets/play.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.80859 17.6077L16.9753 12.3577L8.80859 7.10771V17.6077ZM11.7253 24.0244C10.1114 24.0244 8.5947 23.7181 7.17526 23.1056C5.75582 22.4931 4.52109 21.6619 3.47109 20.6119C2.42109 19.5619 1.58984 18.3272 0.977344 16.9077C0.364844 15.4883 0.0585938 13.9716 0.0585938 12.3577C0.0585938 10.7438 0.364844 9.22715 0.977344 7.80771C1.58984 6.38826 2.42109 5.15354 3.47109 4.10354C4.52109 3.05354 5.75582 2.22229 7.17526 1.60979C8.5947 0.99729 10.1114 0.69104 11.7253 0.69104C13.3391 0.69104 14.8558 0.99729 16.2753 1.60979C17.6947 2.22229 18.9294 3.05354 19.9794 4.10354C21.0294 5.15354 21.8607 6.38826 22.4732 7.80771C23.0857 9.22715 23.3919 10.7438 23.3919 12.3577C23.3919 13.9716 23.0857 15.4883 22.4732 16.9077C21.8607 18.3272 21.0294 19.5619 19.9794 20.6119C18.9294 21.6619 17.6947 22.4931 16.2753 23.1056C14.8558 23.7181 13.3391 24.0244 11.7253 24.0244Z" fill="white"/>
+</svg>