s1

2024-07-26 14:08:00 +05:30
parent 59c6326cf0
commit e155a1b997
11 changed files with 1254 additions and 331 deletions
--- a/app/components/KnowledgeQuest.tsx
+++ b/app/components/KnowledgeQuest.tsx
@@ -1,5 +1,5 @@
 import React, {useState} from 'react';
-import { SettingOutlined, QuestionCircleOutlined, LogoutOutlined, DownOutlined} from '@ant-design/icons';
+import { SettingOutlined, QuestionCircleOutlined, LogoutOutlined, RightOutlined} from '@ant-design/icons';
 import Icon from '@ant-design/icons';

 import AdministrationIcon from '~/components/customIcon/AdministrationIcon';
@@ -216,7 +216,7 @@ let performersData = [
        points: "999",
        rank: "1",
        program: "Graduate Program",
-        avatar: "../../assets/avatar1.png"
+        avatar: "avatar1.png"
    },
    {
        id: "2",
@@ -225,7 +225,7 @@ let performersData = [
        points: "997",
        rank: "2",
        program: "Graduate Program",
-        avatar: "../../assets/avatar2.png"
+        avatar: "avatar2.png"
    },
    {
        id: "3",
@@ -234,7 +234,7 @@ let performersData = [
        points: "994",
        rank: "3",
        program: "Graduate Program",
-        avatar: "../../assets/avatar3.png"
+        avatar: "avatar3.png"
    },
    {
        id: "4",
@@ -243,7 +243,7 @@ let performersData = [
        points: "990",
        rank: "4",
        program: "Graduate Program",
-        avatar: "../../assets/avatar4.png"
+        avatar: "avatar4.png"
    },
    {
        id: "5",
@@ -252,7 +252,7 @@ let performersData = [
        points: "987",
        rank: "5",
        program: "Graduate Program",
-        avatar: "../../assets/avatar5.png"
+        avatar: "avatar5.png"
    },
    {
        id: "6",
@@ -261,7 +261,7 @@ let performersData = [
        points: "982",
        rank: "6",
        program: "Graduate Program",
-        avatar: "../../assets/avatar6.png"
+        avatar: "avatar6.png"
    },
    {
        id: "7",
@@ -270,7 +270,7 @@ let performersData = [
        points: "980",
        rank: "7",
        program: "Graduate Program",
-        avatar: "../../assets/avatar1.png"
+        avatar: "avatar1.png"
    },
    {
        id: "8",
@@ -279,7 +279,7 @@ let performersData = [
        points: "978",
        rank: "8",
        program: "Graduate Program",
-        avatar: "../../assets/avatar2.png"
+        avatar: "avatar2.png"
    },
    {
        id: "9",
@@ -288,7 +288,7 @@ let performersData = [
        points: "975",
        rank: "9",
        program: "Graduate Program",
-        avatar: "../../assets/avatar3.png"
+        avatar: "avatar3.png"
    },
    {
        id: "10",
@@ -297,7 +297,7 @@ let performersData = [
        points: "972",
        rank: "10",
        program: "Graduate Program",
-        avatar: "../../assets/avatar4.png"
+        avatar: "avatar4.png"
    },
    {
        id: "11",
@@ -306,7 +306,7 @@ let performersData = [
        points: "970",
        rank: "11",
        program: "Graduate Program",
-        avatar: "../../assets/avatar5.png"
+        avatar: "avatar5.png"
    },
    {
        id: "12",
@@ -315,7 +315,7 @@ let performersData = [
        points: "968",
        rank: "12",
        program: "Graduate Program",
-        avatar: "../../assets/avatar6.png"
+        avatar: "avatar6.png"
    },
    {
        id: "13",
@@ -324,7 +324,7 @@ let performersData = [
        points: "965",
        rank: "13",
        program: "Graduate Program",
-        avatar: "../../assets/avatar1.png"
+        avatar: "avatar1.png"
    },
    {
        id: "14",
@@ -333,7 +333,7 @@ let performersData = [
        points: "962",
        rank: "14",
        program: "Graduate Program",
-        avatar: "../../assets/avatar2.png"
+        avatar: "avatar2.png"
    },
    {
        id: "15",
@@ -342,7 +342,7 @@ let performersData = [
        points: "960",
        rank: "15",
        program: "Graduate Program",
-        avatar: "../../assets/avatar3.png"
+        avatar: "avatar3.png"
    },
    {
        id: "16",
@@ -351,7 +351,7 @@ let performersData = [
        points: "957",
        rank: "16",
        program: "Graduate Program",
-        avatar: "../../assets/avatar4.png"
+        avatar: "avatar4.png"
    },
    {
        id: "17",
@@ -360,7 +360,7 @@ let performersData = [
        points: "955",
        rank: "17",
        program: "Graduate Program",
-        avatar: "../../assets/avatar5.png"
+        avatar: "avatar5.png"
    },
    {
        id: "18",
@@ -369,7 +369,7 @@ let performersData = [
        points: "953",
        rank: "18",
        program: "Graduate Program",
-        avatar: "../../assets/avatar6.png"
+        avatar: "avatar6.png"
    },
    {
        id: "19",
@@ -378,7 +378,7 @@ let performersData = [
        points: "950",
        rank: "19",
        program: "Graduate Program",
-        avatar: "../../assets/avatar1.png"
+        avatar: "avatar1.png"
    },
    {
        id: "20",
@@ -387,7 +387,7 @@ let performersData = [
        points: "947",
        rank: "20",
        program: "Graduate Program",
-        avatar: "../../assets/avatar2.png"
+        avatar: "avatar2.png"
    },
    {
        id: "21",
@@ -396,7 +396,7 @@ let performersData = [
        points: "945",
        rank: "21",
        program: "Graduate Program",
-        avatar: "../../assets/avatar3.png"
+        avatar: "avatar3.png"
    }
 ];
  
@@ -429,92 +429,92 @@ type MenuItem = Required<MenuProps>['items'][number];

 const items2: MenuProps['items'] = [
    {
-        key: 'subkq1',
+        key: 'subsd1',
        icon: <AdministrationIcon />,
-        label: 'Administration',
+        label: (<p>&nbsp; Administration</p>),
        children: [
            {
-            key: '1kq',
+            key: '1sd',
            label: (<a href='#'>Class Schedules</a>),
            },
            {
-            key: '2kq',
+            key: '2sd',
            label: (<a href='#'>Classmate Directory</a>),
            },
            {
-            key: '3kq',
+            key: '3sd',
            label: (<a href='#'>Qualifications</a>),
            },
        ],
    },
    {
-        key: 'subkq2',
+        key: 'subsd2',
        icon: <MyCoursesIcon />,
-        label: 'My Courses',
+        label: (<p>&nbsp; My Courses</p>),
        children: [
            {
-            key: '4kq',
+            key: '4sd',
            label: (<a href='#'>Graduate Program</a>),
            },
            {
-            key: '5kq',
+            key: '5sd',
            label: (<a href='#'>Post-Graduate Program</a>),
            },
        ],
    },
    {
-        key: 'subkq3',
+        key: 'subsd3',
        icon: <ExaminationIcon />,
-        label: 'Examinations',
+        label: (<p>&nbsp; Examinations</p>),
        children: [
            {
-            key: '6kq',
+            key: '6sd',
            label: (<a href='#'>Exam Scheduled</a>),
            },
            {
-            key: '7kq',
+            key: '7sd',
            label: (<a href='#'>Upcoming Exam</a>),
            },
            {
-            key: '8kq',
+            key: '8sd',
            label: (<a href='#'>Passed Exam</a>),
            },
        ],
    },
    {
-        key: 'subkq4',
+        key: 'subsd4',
        icon: <CommunityIcon />,
-        label: 'Community',
+        label: (<p>&nbsp; Community</p>),
        children: [
        {
-            key: '9kq',
+            key: '9sd',
            label: (<a href='#'>Exam Scheduled</a>),
        },
        {
-            key: '10kq',
+            key: '10sd',
            label: (<a href='#'>Upcoming Exam</a>),
        },
        {
-            key: '11kq',
+            key: '11sd',
            label: (<a href='#'>Passed Exam</a>),
        },
        ],
    },
    {
-        key: 'subkq5',
+        key: 'subsd5',
        icon: <NotificationIcon />,
-        label: 'Notifications',
+        label: (<p>&nbsp; Notifications</p>),
        children: [
            {
-            key: '12kq',
+            key: '12sd',
            label: (<a href='#'>Exam Scheduled</a>),
            },
            {
-            key: '13kq',
+            key: '13sd',
            label: (<a href='#'>Upcoming Exam</a>),
            },
            {
-            key: '14kq',
+            key: '14sd',
            label: (<a href='#'>Passed Exam</a>),
            },
        ],
@@ -527,17 +527,17 @@ const items2: MenuProps['items'] = [
        style: { marginTop: '100px' },
        children: [
        {   
-            key: '15kq', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, 
+            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: '16kq', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'},
+            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: '17kq', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'},
+            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>)
        },     
@@ -611,7 +611,7 @@ const App: React.FC = () => {
            <Layout style={{marginLeft: 366, background: '#FFF'}}>
                <Content style={{  overflow: 'initial',}}>
                    <div className='border-b-[1px] py-2 border-[#CFCFCF]'>
-                        <div className='container mx-auto flex flex-row justify-between'>
+                        <div className='container mx-auto flex flex-row justify-between pr-10'>
                            <div className='inline-flex justify-center place-items-center'>
                                {/* <img src="../../assets/student-dash.svg" alt=""/> */}
                                <p className='pl-1 text-[18px] font-[700] whitespace-nowrap'>Knowledge Quests</p>
@@ -637,7 +637,7 @@ const App: React.FC = () => {
                                                <p className='text-[12px] text-[#EF7A0C] font-[500]'>My Profile</p>
                                                <p className='text-[16px] text-[#27549F] font-[700]'>Rayan Holiday</p>
                                            </div>
-                                            <DownOutlined style={{ fontSize: '12px' }} />
+                                            <RightOutlined style={{ fontSize: '12px', paddingRight: '10px'}} />
                                        </div>
                                    </Space>
                                    </a>
--- a/app/components/StudentDashboard.tsx
+++ b/app/components/StudentDashboard.tsx
@@ -1,5 +1,5 @@
 import React, {useState} from 'react';
-import { SettingOutlined, QuestionCircleOutlined, LogoutOutlined, DownOutlined} from '@ant-design/icons';
+import { SettingOutlined, QuestionCircleOutlined, LogoutOutlined, RightOutlined} from '@ant-design/icons';
 import Icon from '@ant-design/icons';

 import AdministrationIcon from '~/components/customIcon/AdministrationIcon';
@@ -69,7 +69,7 @@ let performersData = [
      points: "999",
      rank: "1",
      program: "Graduate Program",
-      avatar: "../../assets/avatar1.png"
+      avatar: "avatar1.png"
    },
    {
      id: "2",
@@ -78,7 +78,7 @@ let performersData = [
      points: "997",
      rank: "2",
      program: "Graduate Program",
-      avatar: "../../assets/avatar2.png"
+      avatar: "avatar2.png"
    },
    {
      id: "3",
@@ -87,7 +87,7 @@ let performersData = [
      points: "994",
      rank: "3",
      program: "Graduate Program",
-      avatar: "../../assets/avatar3.png"
+      avatar: "avatar3.png"
    },
    {
      id: "4",
@@ -96,7 +96,7 @@ let performersData = [
      points: "990",
      rank: "4",
      program: "Graduate Program",
-      avatar: "../../assets/avatar4.png"
+      avatar: "avatar4.png"
    },
    {
      id: "5",
@@ -105,7 +105,7 @@ let performersData = [
      points: "987",
      rank: "5",
      program: "Graduate Program",
-      avatar: "../../assets/avatar5.png"
+      avatar: "avatar5.png"
    },
    {
      id: "6",
@@ -114,7 +114,7 @@ let performersData = [
      points: "982",
      rank: "6",
      program: "Graduate Program",
-      avatar: "../../assets/avatar6.png"
+      avatar: "avatar6.png"
    }
 ];  

@@ -148,7 +148,7 @@ const items2: MenuProps['items'] = [
    {
        key: 'subsd1',
        icon: <AdministrationIcon />,
-        label: 'Administration',
+        label: (<p>&nbsp; Administration</p>),
        children: [
            {
            key: '1sd',
@@ -167,7 +167,7 @@ const items2: MenuProps['items'] = [
    {
        key: 'subsd2',
        icon: <MyCoursesIcon />,
-        label: 'My Courses',
+        label: (<p>&nbsp; My Courses</p>),
        children: [
            {
            key: '4sd',
@@ -182,7 +182,7 @@ const items2: MenuProps['items'] = [
    {
        key: 'subsd3',
        icon: <ExaminationIcon />,
-        label: 'Examinations',
+        label: (<p>&nbsp; Examinations</p>),
        children: [
            {
            key: '6sd',
@@ -201,7 +201,7 @@ const items2: MenuProps['items'] = [
    {
        key: 'subsd4',
        icon: <CommunityIcon />,
-        label: 'Community',
+        label: (<p>&nbsp; Community</p>),
        children: [
        {
            key: '9sd',
@@ -220,7 +220,7 @@ const items2: MenuProps['items'] = [
    {
        key: 'subsd5',
        icon: <NotificationIcon />,
-        label: 'Notifications',
+        label: (<p>&nbsp; Notifications</p>),
        children: [
            {
            key: '12sd',
@@ -299,7 +299,6 @@ const App: React.FC = () => {
    const { token: { colorBgContainer}, } = theme.useToken();

  return (
-    
    <Layout>
        <>
            {/* <Button type="primary" onClick={showLoading}>Open Modal</Button> */}
@@ -319,14 +318,6 @@ const App: React.FC = () => {
                <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>    
-                        <a href="#" className='flex flex-row justify-between border-[1px] border-[#E9E9E9] rounded-[10px] p-2  place-items-center'>
-                            <img className='w-[46px] h-[46px]' src="/assets/man.png" alt="" />
-                            <div>
-                                <p className='text-[16px] font-[500] text-[#6E6E6E]'>My Profile</p>
-                                <p className='text-[22px] font-[700] text-[#000]'>Rayan Holiday</p>
-                            </div>
-                            <img className='' src="../../assets/right-arrow.svg" alt="" />
-                        </a>
                    </div>
                </div>
                <Menu className='custom-menu' mode="inline"  style={{ height: '100%', borderRight: 0, paddingTop: 30, background: 'transparent'}} items={items2} />
@@ -336,7 +327,7 @@ const App: React.FC = () => {
            <Layout style={{marginLeft: 366, background: '#FFF'}}>
                <Content style={{  overflow: 'initial',}}>
                    <div className='border-b-[1px] py-2 border-[#CFCFCF]'>
-                        <div className='container mx-auto flex flex-row justify-between'>
+                        <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=""/>
                                <p className='pl-1 text-[18px] font-[700] whitespace-nowrap'>Student Dashboard</p>
@@ -359,7 +350,7 @@ const App: React.FC = () => {
                                                <p className='text-[12px] text-[#EF7A0C] font-[500]'>My Profile</p>
                                                <p className='text-[16px] text-[#27549F] font-[700]'>Rayan Holiday</p>
                                            </div>
-                                            <DownOutlined style={{ fontSize: '12px' }} />
+                                            <RightOutlined style={{ fontSize: '12px', paddingRight: '10px' }} />
                                        </div>
                                    </Space>
                                    </a>
@@ -442,7 +433,7 @@ const App: React.FC = () => {
                                </div>
                                <div className='flex flex-col'>
                                    {sortedData.slice(3).map(data => (
-                                        <div className='flex flex-row justify-between place-items-center border-b-[1px] border-[#CFCFCF] p-2'>
+                                        <div key={data.id} className='flex flex-row justify-between place-items-center border-b-[1px] border-[#CFCFCF] p-2'>
                                            <p className='text-[11px] font-[700]'># {data.rank}</p>
                                            <img className='w-[35px] h-[35px]' src={data.avatar} alt="" />
                                            <div>
--- a/app/routes/ai-quiz.tsx
+++ b/app/routes/ai-quiz.tsx
@@ -34,7 +34,6 @@ function toggleSection() {
    }
 }

-
 export default function Index() {
    const [percent, setPercent] = useState(0);
    const [secondsLeft, setSecondsLeft] = useState(5);
@@ -75,7 +74,7 @@ export default function Index() {
                <div className="flex flex-col">
                    <div className="flex flex-row justify-between place-items-center">
                        <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>0<span>/2000</span></p>
+                        <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>
                </div>
--- a/app/routes/classmate-directory.tsx
+++ b/app/routes/classmate-directory.tsx
@@ -0,0 +1,403 @@
+import React, {useState} from 'react';
+import { SettingOutlined, QuestionCircleOutlined, LogoutOutlined, RightOutlined} from '@ant-design/icons';
+import Icon from '@ant-design/icons';
+
+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';
+import {Layout, Menu, theme, Button, Modal, MenuProps, Breadcrumb, Dropdown, Space} from 'antd';
+import '../../public/assets/student-dashboard.css';
+
+    let classmatesData = [
+        {
+            id: "1",
+            name: "Daniel Nguyen",
+            program: "Graduate Program",
+            type: "Student",
+            avatar: "avatar1.png"
+        },
+        {
+            id: "2",
+            name: "Sarah Anderson",
+            program: "Post-Graduate Program",
+            type: "Student",
+            avatar: "avatar2.png"
+        },
+        {
+            id: "3",
+            name: "John Smith",
+            program: "Undergraduate Program",
+            type: "Student",
+            avatar: "avatar3.png"
+        },
+        {
+            id: "4",
+            name: "Emily Davis",
+            program: "Graduate Program",
+            type: "Student",
+            avatar: "avatar4.png"
+        },
+        {
+            id: "5",
+            name: "Michael Johnson",
+            program: "Post-Graduate Program",
+            type: "Student",
+            avatar: "avatar5.png"
+        },
+        {
+            id: "6",
+            name: "Jessica Wilson",
+            program: "Undergraduate Program",
+            type: "Student",
+            avatar: "avatar6.png"
+        },
+        {
+            id: "7",
+            name: "David Brown",
+            program: "Graduate Program",
+            type: "Student",
+            avatar: "avatar1.png"
+        },
+        {
+            id: "8",
+            name: "Laura Lee",
+            program: "Post-Graduate Program",
+            type: "Student",
+            avatar: "avatar2.png"
+        },
+        {
+            id: "9",
+            name: "Chris Miller",
+            program: "Undergraduate Program",
+            type: "Student",
+            avatar: "avatar3.png"
+        },
+        {
+            id: "10",
+            name: "Sophia Taylor",
+            program: "Graduate Program",
+            type: "Student",
+            avatar: "avatar4.png"
+        },
+        {
+            id: "11",
+            name: "James Anderson",
+            program: "Post-Graduate Program",
+            type: "Student",
+            avatar: "avatar5.png"
+        },
+        {
+            id: "12",
+            name: "Olivia Thomas",
+            program: "Undergraduate Program",
+            type: "Student",
+            avatar: "avatar6.png"
+        },
+        {
+            id: "13",
+            name: "Ethan Martinez",
+            program: "Graduate Program",
+            type: "Student",
+            avatar: "avatar1.png"
+        },
+        {
+            id: "14",
+            name: "Ava Garcia",
+            program: "Post-Graduate Program",
+            type: "Student",
+            avatar: "avatar2.png"
+        },
+        {
+            id: "15",
+            name: "Noah Rodriguez",
+            program: "Undergraduate Program",
+            type: "Student",
+            avatar: "avatar3.png"
+        },
+        {
+            id: "16",
+            name: "Mia Martinez",
+            program: "Graduate Program",
+            type: "Student",
+            avatar: "avatar4.png"
+        },
+        {
+            id: "17",
+            name: "Lucas Wilson",
+            program: "Post-Graduate Program",
+            type: "Student",
+            avatar: "avatar5.png"
+        },
+        {
+            id: "18",
+            name: "Isabella Clark",
+            program: "Undergraduate Program",
+            type: "Student",
+            avatar: "avatar6.png"
+        },
+        {
+            id: "19",
+            name: "Liam Walker",
+            program: "Graduate Program",
+            type: "Student",
+            avatar: "avatar1.png"
+        },
+        {
+            id: "20",
+            name: "Charlotte Lewis",
+            program: "Post-Graduate Program",
+            type: "Student",
+            avatar: "avatar2.png"
+        }
+    ];
+
+    const { Header, Content, Sider } = Layout;
+
+    const items1: MenuProps['items'] = ['1', '2', '3'].map((key) => ({
+    key,
+    label: `navsd ${key}`,
+    }));
+
+    type MenuItem = Required<MenuProps>['items'][number];
+
+
+    const items2: MenuProps['items'] = [
+        {
+            key: 'subsd1',
+            icon: <AdministrationIcon />,
+            label: 'Administration',
+            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: 'My Courses',
+            children: [
+                {
+                key: '4sd',
+                label: (<a href='#'>Graduate Program</a>),
+                },
+                {
+                key: '5sd',
+                label: (<a href='#'>Post-Graduate Program</a>),
+                },
+            ],
+        },
+        {
+            key: 'subsd3',
+            icon: <ExaminationIcon />,
+            label: 'Examinations',
+            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: 'Community',
+            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: 'Notifications',
+            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>,
+        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>
+        <>
+            {/* <Button type="primary" onClick={showLoading}>Open Modal</Button> */}
+            <Modal style={{top: '20px', right: '0px'}} title={<p>Loading Modal</p>} footer={ <Button type="primary" onClick={showLoading}> Reload </Button>} loading={loading} open={open} onCancel={() => setOpen(false)} >
+                <p>Some contents...</p>
+                <p>Some contents...</p>
+                <p>Some contents...</p>
+            </Modal>
+        </>
+        {/* <Header style={{ display: 'flex', alignItems: 'center' }}>
+            <div className="demo-logo" />
+            <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']} items={items1} style={{ flex: 1, minWidth: 0 }} />
+        </Header> */}
+        <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>
+                <Menu className='custom-menu' mode="inline"  style={{ height: '100%', borderRight: 0, paddingTop: 30, background: 'transparent'}} items={items2} />
+            </Sider>
+            </div>
+            {/* defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']} */}
+            <Layout style={{marginLeft: 366, background: '#FFF'}}>
+                <Content style={{  overflow: 'initial',}}>
+                    <div className='py-2'>
+                        <div className='container mx-auto flex flex-row justify-between pr-10'>
+                            <div className='inline-flex justify-center place-items-center'>
+                                <Breadcrumb separator=">" items={[{title: <a href="">Administration</a>,},{title: 'Class Directory',},]}/>
+                            </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]'>
+                                        <svg  viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                            <path d="M5.06445 20.2658V18.2111H7.1191V11.0198C7.1191 9.59872 7.54715 8.33597 8.40325 7.2316C9.25935 6.12723 10.3723 5.40382 11.742 5.06138V4.34225C11.742 3.9142 11.8919 3.55036 12.1915 3.25072C12.4911 2.95109 12.855 2.80127 13.283 2.80127C13.7111 2.80127 14.0749 2.95109 14.3746 3.25072C14.6742 3.55036 14.824 3.9142 14.824 4.34225V5.06138C16.1938 5.40382 17.3067 6.12723 18.1628 7.2316C19.0189 8.33597 19.447 9.59872 19.447 11.0198V18.2111H21.5016V20.2658H5.06445ZM13.283 23.3477C12.718 23.3477 12.2343 23.1465 11.8319 22.7442C11.4296 22.3418 11.2284 21.8581 11.2284 21.2931H15.3377C15.3377 21.8581 15.1365 22.3418 14.7341 22.7442C14.3318 23.1465 13.8481 23.3477 13.283 23.3477ZM9.17374 18.2111H17.3923V11.0198C17.3923 9.88979 16.99 8.9224 16.1852 8.11766C15.3805 7.31293 14.4131 6.91056 13.283 6.91056C12.153 6.91056 11.1856 7.31293 10.3808 8.11766C9.57611 8.9224 9.17374 9.88979 9.17374 11.0198V18.2111Z" fill="black"/>
+                                            <circle cx="19.4462" cy="19.2384" r="4.23771" fill="#FF0000" stroke="#fff" strokeWidth="2.31148"/>
+                                        </svg>
+                                    </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>
+
+
+                    <section className='container mx-auto '>
+                        <div className='grid gridcols-1 md:grid-cols-7 border-[1px] border-[#CFCFCF]'>
+                            <div className='col-span-5 border-r-[1px] border-[#CFCFCF]'>
+                                <p className='text-[18px] font-[700] text-[#525252] border-b-[1px] border-[#CFCFCF] py-5 pl-5'><span>Your Classmates </span>| <span>Graduate Program</span></p>
+                                <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4'>
+                                    {classmatesData.map(data => (
+                                        <div key={data.id} className='w-60 h-60 bg-cover bg-center' style={{ backgroundImage: `url('../../assets/${data.avatar}')` }}>
+                                            <img className='w-[60px] h-[60px]' src={`../../assets/${data.avatar}`} alt="" />
+                                        </div>
+                                    ))}
+                                </div>
+                            </div>
+                            <div className='col-span-2'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur dignissimos nostrum fugit animi nobis. Explicabo nam accusamus harum doloremque praesentium officia, vel laborum nobis eveniet quibusdam ex rem asperiores alias!</div>
+                        </div>
+                    </section>                   
+                </Content>
+            </Layout>
+        </Layout>
+    </Layout>
+  );
+};
+export default App;
--- a/app/routes/quiz.tsx
+++ b/app/routes/quiz.tsx
@@ -3,204 +3,213 @@ import { useState, useEffect } from 'react';
 // Sample questions JSON data
 const questionsData = [
  {
-    "id": 1,
-    "question": "What is the capital of France?",
-    "options": ["Berlin", "Madrid", "Paris", "Rome"],
-    "answer": "Paris"
+    id: 1,
+    question: "What is the capital of France?",
+    options: ["Berlin", "Madrid", "Paris", "Rome"],
+    answer: "Paris",
  },
  {
-    "id": 2,
-    "question": "Which planet is known as the Red Planet?",
-    "options": ["Earth", "Mars", "Jupiter", "Saturn"],
-    "answer": "Mars"
+    id: 2,
+    question: "Which planet is known as the Red Planet?",
+    options: ["Earth", "Mars", "Jupiter", "Saturn"],
+    answer: "Mars",
  },
  {
-    "id": 3,
-    "question": "What is the chemical symbol for gold?",
-    "options": ["Au", "Ag", "Pb", "Fe"],
-    "answer": "Au"
+    id: 3,
+    question: "What is the chemical symbol for gold?",
+    options: ["Au", "Ag", "Pb", "Fe"],
+    answer: "Au",
  },
  {
-    "id": 4,
-    "question": "Who wrote 'To Kill a Mockingbird'?",
-    "options": ["Harper Lee", "Mark Twain", "Ernest Hemingway", "J.K. Rowling"],
-    "answer": "Harper Lee"
+    id: 4,
+    question: "Who wrote 'To Kill a Mockingbird'?",
+    options: ["Harper Lee", "Mark Twain", "Ernest Hemingway", "J.K. Rowling"],
+    answer: "Harper Lee",
  },
  {
-    "id": 5,
-    "question": "What is the largest ocean on Earth?",
-    "options": ["Atlantic Ocean", "Indian Ocean", "Arctic Ocean", "Pacific Ocean"],
-    "answer": "Pacific Ocean"
+    id: 5,
+    question: "What is the largest ocean on Earth?",
+    options: ["Atlantic Ocean", "Indian Ocean", "Arctic Ocean", "Pacific Ocean"],
+    answer: "Pacific Ocean",
  },
  {
-    "id": 6,
-    "question": "Which element has the atomic number 1?",
-    "options": ["Helium", "Hydrogen", "Oxygen", "Carbon"],
-    "answer": "Hydrogen"
+    id: 6,
+    question: "Which element has the atomic number 1?",
+    options: ["Helium", "Hydrogen", "Oxygen", "Carbon"],
+    answer: "Hydrogen",
  },
  {
-    "id": 7,
-    "question": "In which year did the Titanic sink?",
-    "options": ["1912", "1905", "1898", "1923"],
-    "answer": "1912"
+    id: 7,
+    question: "In which year did the Titanic sink?",
+    options: ["1912", "1905", "1898", "1923"],
+    answer: "1912",
  },
  {
-    "id": 8,
-    "question": "Who is the author of '1984'?",
-    "options": ["George Orwell", "Aldous Huxley", "Ray Bradbury", "J.D. Salinger"],
-    "answer": "George Orwell"
+    id: 8,
+    question: "Who is the author of '1984'?",
+    options: ["George Orwell", "Aldous Huxley", "Ray Bradbury", "J.D. Salinger"],
+    answer: "George Orwell",
  },
  {
-    "id": 9,
-    "question": "What is the hardest natural substance on Earth?",
-    "options": ["Gold", "Platinum", "Diamond", "Iron"],
-    "answer": "Diamond"
+    id: 9,
+    question: "What is the hardest natural substance on Earth?",
+    options: ["Gold", "Platinum", "Diamond", "Iron"],
+    answer: "Diamond",
  },
  {
-    "id": 10,
-    "question": "What is the largest planet in our solar system?",
-    "options": ["Earth", "Saturn", "Neptune", "Jupiter"],
-    "answer": "Jupiter"
+    id: 10,
+    question: "What is the largest planet in our solar system?",
+    options: ["Earth", "Saturn", "Neptune", "Jupiter"],
+    answer: "Jupiter",
  },
  {
-    "id": 11,
-    "question": "What is the main ingredient in guacamole?",
-    "options": ["Tomato", "Avocado", "Pepper", "Onion"],
-    "answer": "Avocado"
+    id: 11,
+    question: "What is the main ingredient in guacamole?",
+    options: ["Tomato", "Avocado", "Pepper", "Onion"],
+    answer: "Avocado",
  },
  {
-    "id": 12,
-    "question": "Which country is known as the Land of the Rising Sun?",
-    "options": ["China", "Japan", "Thailand", "South Korea"],
-    "answer": "Japan"
+    id: 12,
+    question: "Which country is known as the Land of the Rising Sun?",
+    options: ["China", "Japan", "Thailand", "South Korea"],
+    answer: "Japan",
  },
  {
-    "id": 13,
-    "question": "What is the smallest prime number?",
-    "options": ["1", "2", "3", "5"],
-    "answer": "2"
+    id: 13,
+    question: "What is the smallest prime number?",
+    options: ["1", "2", "3", "5"],
+    answer: "2",
  },
  {
-    "id": 14,
-    "question": "Who painted the Mona Lisa?",
-    "options": ["Vincent van Gogh", "Leonardo da Vinci", "Pablo Picasso", "Claude Monet"],
-    "answer": "Leonardo da Vinci"
+    id: 14,
+    question: "Who painted the Mona Lisa?",
+    options: ["Vincent van Gogh", "Leonardo da Vinci", "Pablo Picasso", "Claude Monet"],
+    answer: "Leonardo da Vinci",
  },
  {
-    "id": 15,
-    "question": "What is the capital city of Australia?",
-    "options": ["Sydney", "Melbourne", "Canberra", "Brisbane"],
-    "answer": "Canberra"
+    id: 15,
+    question: "What is the capital city of Australia?",
+    options: ["Sydney", "Melbourne", "Canberra", "Brisbane"],
+    answer: "Canberra",
  },
  {
-    "id": 16,
-    "question": "Which gas do plants primarily use for photosynthesis?",
-    "options": ["Oxygen", "Nitrogen", "Carbon Dioxide", "Hydrogen"],
-    "answer": "Carbon Dioxide"
+    id: 16,
+    question: "Which gas do plants primarily use for photosynthesis?",
+    options: ["Oxygen", "Nitrogen", "Carbon Dioxide", "Hydrogen"],
+    answer: "Carbon Dioxide",
  },
  {
-    "id": 17,
-    "question": "What is the boiling point of water in Celsius?",
-    "options": ["90°C", "100°C", "110°C", "120°C"],
-    "answer": "100°C"
+    id: 17,
+    question: "What is the boiling point of water in Celsius?",
+    options: ["90°C", "100°C", "110°C", "120°C"],
+    answer: "100°C",
  },
  {
-    "id": 18,
-    "question": "Which language is primarily spoken in Brazil?",
-    "options": ["Spanish", "Portuguese", "French", "English"],
-    "answer": "Portuguese"
+    id: 18,
+    question: "Which language is primarily spoken in Brazil?",
+    options: ["Spanish", "Portuguese", "French", "English"],
+    answer: "Portuguese",
  },
  {
-    "id": 19,
-    "question": "What is the smallest unit of life?",
-    "options": ["Tissue", "Organ", "Cell", "Organism"],
-    "answer": "Cell"
+    id: 19,
+    question: "What is the smallest unit of life?",
+    options: ["Tissue", "Organ", "Cell", "Organism"],
+    answer: "Cell",
  },
  {
-    "id": 20,
-    "question": "Who developed the theory of relativity?",
-    "options": ["Isaac Newton", "Galileo Galilei", "Albert Einstein", "Niels Bohr"],
-    "answer": "Albert Einstein"
+    id: 20,
+    question: "Who developed the theory of relativity?",
+    options: ["Isaac Newton", "Galileo Galilei", "Albert Einstein", "Niels Bohr"],
+    answer: "Albert Einstein",
  },
  {
-    "id": 21,
-    "question": "In what year did World War II end?",
-    "options": ["1945", "1944", "1946", "1943"],
-    "answer": "1945"
-  }
+    id: 21,
+    question: "In what year did World War II end?",
+    options: ["1945", "1944", "1946", "1943"],
+    answer: "1945",
+  },
 ];

-  
-
 export default function Index() {
-    const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
-    const [timeRemaining, setTimeRemaining] = useState(60); // 60 seconds countdown
-    const [intervalId, setIntervalId] = useState<NodeJS.Timeout | null>(null);
-  
-    useEffect(() => {
-      // Start the countdown timer
-      const id = setInterval(() => {
-        setTimeRemaining(prevTime => {
-          if (prevTime <= 1) {
-            clearInterval(id);
-            return 0;
-          }
-          return prevTime - 1;
-        });
-      }, 1000);
-  
-      setIntervalId(id);
-  
-      // Clear interval on component unmount
-      return () => {
-        if (intervalId) {
-          clearInterval(intervalId);
+  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
+  const [timeRemaining, setTimeRemaining] = useState(60); // 60 seconds countdown
+  const [selectedAnswers, setSelectedAnswers] = useState<{ [key: number]: string }>({});
+  const [answeredQuestions, setAnsweredQuestions] = useState<{ id: number; selectedOption: string }[]>([]);
+  useEffect(() => {
+    // Start the countdown timer
+    const id = setInterval(() => {
+      setTimeRemaining((prevTime) => {
+        if (prevTime <= 1) {
+          clearInterval(id);
+          return 0;
        }
-      };
-    }, [intervalId]);
-  
-    const handleNextQuestion = () => {
-      setCurrentQuestionIndex(prevIndex => (prevIndex + 1) % questionsData.length);
+        return prevTime - 1;
+      });
+    }, 1000);
+
+    // Clear interval on component unmount
+    return () => {
+      clearInterval(id);
    };
-  
-    const currentQuestion = questionsData[currentQuestionIndex];
-  
-    return (
-      <>
-        <section className='container-fluid bg-[#000] '>
-          <div className="flex flex-row justify-center gap-x-8 py-6">
+  }, []);
+
+  const handleNextQuestion = () => {
+    if (selectedAnswers[currentQuestion.id]) {
+      setAnsweredQuestions((prev) => [
+        ...prev,
+        { id: currentQuestion.id, selectedOption: selectedAnswers[currentQuestion.id] },
+      ]);
+    }
+    setCurrentQuestionIndex((prevIndex) => (prevIndex + 1) % questionsData.length);
+  };
+
+  const handleAnswerChange = (questionId: number, selectedOption: string) => {
+    setSelectedAnswers((prevAnswers) => ({
+      ...prevAnswers,
+      [questionId]: selectedOption,
+    }));
+  };
+
+  const currentQuestion = questionsData[currentQuestionIndex];
+  return (
+    <>
+        <section className="container-fluid bg-[#000] ">
+            <div className="flex flex-row justify-center gap-x-8 py-6">
            <p className="text-[42px] w-[42px] h-[31px]">✨</p>
            <div className="flex flex-col justify-center place-items-center">
-              <p className="text-[#FFF] text-[24px] font-[700]"> Take an AI Generative Quiz</p>
-              <p className="text-[#FFF] text-[16px] font-[400]">Convert any text into an interactive quiz session</p>
+                <p className="text-[#FFF] text-[24px] font-[700]"> Take an AI Generative Quiz</p>
+                <p className="text-[#FFF] text-[16px] font-[400]">Convert any text into an interactive quiz session</p>
+            </div>
            </div>
-          </div>
        </section>
-        <div className='mt-[100px]'>
-            {/* this div for margin top */}
+
+        <div className="mt-[100px]">{/* this div for margin top */}</div>
+
+        <div className="container mx-auto max-w-[890px]">
+            <p className="flex justify-end text-[20px] font-[600]">Time remaining: {timeRemaining} seconds</p>
        </div>
-        <div className='container mx-auto max-w-[890px]'>
-            <p className='flex justify-end text-[20px] font-[600]'>Time remaining: {timeRemaining} seconds</p>
-        </div>
-        
-        <section id="" className="container mx-auto max-w-[890px] shadow-xl rounded-xl px-10 py-8 mb-8 border-[1px] border-[#DCDCDC] rounded-[10px] bg-[#FCFCFC]" >
-          <div>
-            <h2 className="text-[32px] font-[700]">{`Q${currentQuestion.id}. ${currentQuestion.question}`}</h2>
-            <div className="flex flex-col space-y-4 mt-8">
-              {currentQuestion.options.map((option, index) => (
-                <div key={index} className='border-[1px] border-[#D3D3D3] rounded-[10px] p-3 bg-[#FFF]'>
-                  <label className='text-[18px] font-[600]' htmlFor={`question${currentQuestion.id}_${index}`}>
-                    <input type="radio" name={`question${currentQuestion.id}`} id={`question${currentQuestion.id}_${index}`} />
-                    &nbsp;&nbsp;{option}
-                  </label>
+        <section id="" className="container mx-auto max-w-[890px] shadow-xl rounded-xl px-10 py-8 mb-8 border-[1px] border-[#DCDCDC] rounded-[10px] bg-[#FCFCFC]">
+            <div>
+                <h2 className="text-[32px] font-[700]">{`Q${currentQuestion.id}. ${currentQuestion.question}`}</h2>
+                <div className="flex flex-col space-y-4 mt-8">
+                    {currentQuestion.options.map((option, index) => (
+                    <div key={index} className={`border-[1px] ${selectedAnswers[currentQuestion.id] === option ? 'border-[#000]' : 'border-[#D3D3D3]'} rounded-[10px] p-3 bg-[#FFF]`}>
+                        <label className="text-[18px] font-[600]" htmlFor={`question${currentQuestion.id}_${index}`}>
+                        <input type="radio" name={`question${currentQuestion.id}`} id={`question${currentQuestion.id}_${index}`} checked={selectedAnswers[currentQuestion.id] === option} onChange={() => handleAnswerChange(currentQuestion.id, option)}/>&nbsp;&nbsp;{option}</label>
+                    </div>
+                    ))}
+                </div>
+                <div className="flex justify-end">
+                    <button
+                    className="bg-[#000] text-[#FFF] text-[18px] font-[600] rounded-[8px] px-[100px] py-[15px] mt-[50px] "
+                    onClick={handleNextQuestion}
+                    >
+                    Next
+                    </button>
                </div>
-              ))}
            </div>
-            <div className='flex justify-end'>
-              <button className="bg-[#000] text-[#FFF] text-[18px] font-[600] rounded-[8px] px-[100px] py-[15px] mt-[50px] " onClick={handleNextQuestion}>Next Question</button>
-            </div>
-          </div>
        </section>
-      </>
-    );
-  }
+      {/* <pre>{JSON.stringify(answeredQuestions, null, 2)}</pre> */}
+    </>
+  );
+}
--- a/app/routes/result.tsx
+++ b/app/routes/result.tsx
@@ -0,0 +1,238 @@
+let performersData = [
+    {
+        id: "1",
+        name: "Eiden",
+        score: "48/50",
+        points: "999",
+        rank: "1",
+        program: "Graduate Program",
+        avatar: "avatar1.png"
+    },
+    {
+        id: "2",
+        name: "Jackson",
+        score: "45/50",
+        points: "997",
+        rank: "2",
+        program: "Graduate Program",
+        avatar: "avatar2.png"
+    },
+    {
+        id: "3",
+        name: "Emma Aria",
+        score: "43/50",
+        points: "994",
+        rank: "3",
+        program: "Graduate Program",
+        avatar: "avatar3.png"
+    },
+    {
+        id: "4",
+        name: "John Doe",
+        score: "40/50",
+        points: "990",
+        rank: "4",
+        program: "Graduate Program",
+        avatar: "avatar4.png"
+    },
+    {
+        id: "5",
+        name: "Jane Cooper",
+        score: "37/50",
+        points: "987",
+        rank: "5",
+        program: "Graduate Program",
+        avatar: "avatar5.png"
+    },
+    {
+        id: "6",
+        name: "John Doe",
+        score: "35/50",
+        points: "982",
+        rank: "6",
+        program: "Graduate Program",
+        avatar: "avatar6.png"
+    },
+    {
+        id: "7",
+        name: "Alice",
+        score: "33/50",
+        points: "980",
+        rank: "7",
+        program: "Graduate Program",
+        avatar: "avatar1.png"
+    },
+    {
+        id: "8",
+        name: "Bob",
+        score: "32/50",
+        points: "978",
+        rank: "8",
+        program: "Graduate Program",
+        avatar: "avatar2.png"
+    },
+    {
+        id: "9",
+        name: "Charlie",
+        score: "30/50",
+        points: "975",
+        rank: "9",
+        program: "Graduate Program",
+        avatar: "avatar3.png"
+    },
+    {
+        id: "10",
+        name: "Diana",
+        score: "28/50",
+        points: "972",
+        rank: "10",
+        program: "Graduate Program",
+        avatar: "avatar4.png"
+    },
+    {
+        id: "11",
+        name: "Edward",
+        score: "27/50",
+        points: "970",
+        rank: "11",
+        program: "Graduate Program",
+        avatar: "avatar5.png"
+    },
+    {
+        id: "12",
+        name: "Fiona",
+        score: "26/50",
+        points: "968",
+        rank: "12",
+        program: "Graduate Program",
+        avatar: "avatar6.png"
+    },
+    {
+        id: "13",
+        name: "George",
+        score: "25/50",
+        points: "965",
+        rank: "13",
+        program: "Graduate Program",
+        avatar: "avatar1.png"
+    },
+    {
+        id: "14",
+        name: "Hannah",
+        score: "23/50",
+        points: "962",
+        rank: "14",
+        program: "Graduate Program",
+        avatar: "avatar2.png"
+    },
+    {
+        id: "15",
+        name: "Ian",
+        score: "22/50",
+        points: "960",
+        rank: "15",
+        program: "Graduate Program",
+        avatar: "avatar3.png"
+    },
+    {
+        id: "16",
+        name: "Julia",
+        score: "20/50",
+        points: "957",
+        rank: "16",
+        program: "Graduate Program",
+        avatar: "avatar4.png"
+    },
+    {
+        id: "17",
+        name: "Kyle",
+        score: "19/50",
+        points: "955",
+        rank: "17",
+        program: "Graduate Program",
+        avatar: "avatar5.png"
+    },
+    {
+        id: "18",
+        name: "Laura",
+        score: "18/50",
+        points: "953",
+        rank: "18",
+        program: "Graduate Program",
+        avatar: "avatar6.png"
+    },
+    {
+        id: "19",
+        name: "Michael",
+        score: "17/50",
+        points: "950",
+        rank: "19",
+        program: "Graduate Program",
+        avatar: "avatar1.png"
+    },
+    {
+        id: "20",
+        name: "Nancy",
+        score: "16/50",
+        points: "947",
+        rank: "20",
+        program: "Graduate Program",
+        avatar: "avatar2.png"
+    },
+    {
+        id: "21",
+        name: "Oliver",
+        score: "15/50",
+        points: "945",
+        rank: "21",
+        program: "Graduate Program",
+        avatar: "avatar3.png"
+    }
+];
+
+
+export default function Index(){
+    return(
+        <>
+            <section className="container-fluid bg-[#000] ">
+                <div className="flex flex-row justify-center gap-x-8 py-6">
+                <p className="text-[42px] w-[42px] h-[31px]">✨</p>
+                <div className="flex flex-col justify-center place-items-center">
+                    <p className="text-[#FFF] text-[24px] font-[700]"> Take an AI Generative Quiz</p>
+                    <p className="text-[#FFF] text-[16px] font-[400]">Convert any text into an interactive quiz session</p>
+                </div>
+                </div>
+            </section>
+            <button className="float-right absolute right-0 2xl:right-80 top-32 bg-[#9D9D9D] w-[45px] h-[45px] font-[700] text-[#FFF] text-[20px] rounded-full">&#10005;</button>
+            <section id="" className="container mx-auto max-w-[890px] shadow-xl rounded-xl  py-8 mb-8 rounded-[10px] bg-[#FFF] mt-10">
+                <div className="flex flex-col justify-center place-items-center space-y-4 px-10">
+                    <img src="../../assets/celebration-icon.png" alt="" />
+                    <p className="text-[24px] font-[700]">You scored 9/10</p>
+                    <p className="text-[20px] font-[500] text-[#525252]">Congratulations on your achievement. </p>
+                    <button className="inline-flex place-items-center text-[20px] font-[600] text-[#FFF] bg-[#000] px-[40px] py-[15px] rounded-[10px]"><img src="../../assets/reload.svg" alt="" />&nbsp; Another Quiz</button>
+                </div>
+                <div className="mt-20">
+                    <p className="text-[20px] font-[700] px-[10px] py-3 border-y-[1px] border-[#CFCFCF] ">Top Performers of this Quiz</p>
+                    <div className="flex flex-col">
+                            {performersData.map((result =>
+                                <div key={result.id} className="flex flex-row justify-between place-items-center p-1.5 px-[10px] hover:bg-[#FDF2E7] duration-300">
+                                    <div className="flex flex-row space-x-[16px] place-items-center justify-center">
+                                        <p className="px-[10px] text-[14px] font-[700]"># {result.rank}</p>
+                                        <img className="w-[50px] h-[50px]" src={result.avatar} alt="" />
+                                        <div>
+                                            <p className="px-[10px] text-[16px] font-[700]">{result.name}</p>
+                                            <p className="px-[10px] text-[12px] font-[500] text-[#6E6E6E]">{result.program}</p>
+                                        </div>
+                                    </div>
+                                    <div className="flex flex-col place-items-center justify-center">
+                                        <img src="../../assets/batch-icon.svg" alt="" />
+                                        <p className="px-[10px] text-[14px] font-[700]">{result.score}</p>
+                                    </div>
+                                </div>
+                            ))}
+                    </div>
+                </div>
+            </section>
+        </>
+    )
+}
--- a/app/routes/start-quiz.tsx
+++ b/app/routes/start-quiz.tsx
@@ -12,7 +12,7 @@ export default function Index(){
            </section>
            <button className="float-right absolute right-0 2xl:right-80 top-32 bg-[#9D9D9D] w-[45px] h-[45px] font-[700] text-[#FFF] text-[20px] rounded-full">&#10005;</button>

-            <section id="generateQuiz" className="container mx-auto max-w-[894px] shadow-xl rounded-xl px-10 py-8 my-8" >
+            <section id="" className="container mx-auto max-w-[894px] shadow-xl rounded-xl px-10 py-8 my-8" >
                <div className="flex flex-col justify-center place-items-center space-y-3">
                    <img src="../../assets/image1.png" alt="" />
                    <p className="text-[32px] font-[600]">Are You Ready to take this Quiz?</p>
--- a/app/routes/test2.tsx
+++ b/app/routes/test2.tsx
@@ -1,5 +1,5 @@
 import React, {useState} from 'react';
-import { SettingOutlined, QuestionCircleOutlined, LogoutOutlined, DownOutlined} from '@ant-design/icons';
+import { SettingOutlined, QuestionCircleOutlined, LogoutOutlined, RightOutlined} from '@ant-design/icons';
 import Icon from '@ant-design/icons';

 import AdministrationIcon from '~/components/customIcon/AdministrationIcon';
@@ -38,87 +38,366 @@ let courseData = [
 ];
 let knowledgeData = [
    {
-      id: "1",
-      status: "1",
-      title: "Assessment on Special Education",
-      challenge: "Challenge yourself & climb the leaderboard.",
-      question: "Subjective Question",
-      img: "../../assets/knowledge1.jpg"
+        id: "1",
+        status: "1",
+        title: "Assessment on Special Education",
+        challenge: "Challenge yourself & climb the leaderboard.",
+        question: "Subjective Question",
+        img: "../../assets/knowledge1.jpg"
    },
    {
-      id: "2",
-      status: "1",
-      title: "Quiz on Children Psychology",
-      challenge: "Challenge yourself & climb the leaderboard.",
-      question: "MCQ",
-      img: "../../assets/knowledge2.jpg"
+        id: "2",
+        status: "1",
+        title: "Quiz on Children Psychology",
+        challenge: "Challenge yourself & climb the leaderboard.",
+        question: "MCQ",
+        img: "../../assets/knowledge2.jpg"
    },
    {
-      id: "3",
-      status: "1",
-      title: "Quiz on Montessori Methods",
-      challenge: "Challenge yourself & climb the leaderboard.",
-      question: "MCQ",
-      img: "../../assets/knowledge3.jpg"
+        id: "3",
+        status: "1",
+        title: "Quiz on Montessori Methods",
+        challenge: "Challenge yourself & climb the leaderboard.",
+        question: "MCQ",
+        img: "../../assets/knowledge3.jpg"
+    },
+    {
+        id: "4",
+        status: "1",
+        title: "Assessment on Special Education",
+        challenge: "Challenge yourself & climb the leaderboard.",
+        question: "Subjective Question",
+        img: "../../assets/knowledge1.jpg"
+    },
+    {
+        id: "5",
+        status: "1",
+        title: "Quiz on Children Psychology",
+        challenge: "Challenge yourself & climb the leaderboard.",
+        question: "MCQ",
+        img: "../../assets/knowledge2.jpg"
+    },
+    {
+        id: "6",
+        status: "1",
+        title: "Quiz on Montessori Methods",
+        challenge: "Challenge yourself & climb the leaderboard.",
+        question: "MCQ",
+        img: "../../assets/knowledge3.jpg"
+    },
+    {
+        id: "7",
+        status: "1",
+        title: "Workshop on Child Development",
+        challenge: "Expand your knowledge & earn badges.",
+        question: "Interactive Session",
+        img: "../../assets/knowledge1.jpg"
+    },
+    {
+        id: "8",
+        status: "1",
+        title: "Webinar on Educational Psychology",
+        challenge: "Join & enhance your skills.",
+        question: "Discussion",
+        img: "../../assets/knowledge2.jpg"
+    },
+    {
+        id: "9",
+        status: "1",
+        title: "Seminar on Inclusive Education",
+        challenge: "Participate & gain insights.",
+        question: "Lecture",
+        img: "../../assets/knowledge3.jpg"
+    },
+    {
+        id: "10",
+        status: "1",
+        title: "Course on Early Childhood Education",
+        challenge: "Complete the course & get certified.",
+        question: "Multiple Modules",
+        img: "../../assets/knowledge1.jpg"
+    },
+    {
+        id: "11",
+        status: "1",
+        title: "Training on Classroom Management",
+        challenge: "Improve your teaching strategies.",
+        question: "Practical Tasks",
+        img: "../../assets/knowledge2.jpg"
+    },
+    {
+        id: "12",
+        status: "1",
+        title: "Lecture on Cognitive Development",
+        challenge: "Expand your understanding & get certified.",
+        question: "Q&A Session",
+        img: "../../assets/knowledge3.jpg"
+    },
+    {
+        id: "13",
+        status: "1",
+        title: "Workshop on Behavioral Issues",
+        challenge: "Join & learn from experts.",
+        question: "Interactive Session",
+        img: "../../assets/knowledge1.jpg"
+    },
+    {
+        id: "14",
+        status: "1",
+        title: "Seminar on Learning Disabilities",
+        challenge: "Participate & enhance your knowledge.",
+        question: "Lecture",
+        img: "../../assets/knowledge2.jpg"
+    },
+    {
+        id: "15",
+        status: "1",
+        title: "Webinar on Child Psychology",
+        challenge: "Join & expand your skills.",
+        question: "Discussion",
+        img: "../../assets/knowledge3.jpg"
+    },
+    {
+        id: "16",
+        status: "1",
+        title: "Course on Special Education Needs",
+        challenge: "Complete the course & get certified.",
+        question: "Multiple Modules",
+        img: "../../assets/knowledge1.jpg"
+    },
+    {
+        id: "17",
+        status: "1",
+        title: "Training on Autism Spectrum Disorder",
+        challenge: "Improve your teaching strategies.",
+        question: "Practical Tasks",
+        img: "../../assets/knowledge2.jpg"
+    },
+    {
+        id: "18",
+        status: "1",
+        title: "Lecture on Emotional Development",
+        challenge: "Expand your understanding & get certified.",
+        question: "Q&A Session",
+        img: "../../assets/knowledge3.jpg"
+    },
+    {
+        id: "19",
+        status: "1",
+        title: "Workshop on ADHD",
+        challenge: "Join & learn from experts.",
+        question: "Interactive Session",
+        img: "../../assets/knowledge1.jpg"
+    },
+    {
+        id: "20",
+        status: "1",
+        title: "Seminar on Speech and Language Disorders",
+        challenge: "Participate & enhance your knowledge.",
+        question: "Lecture",
+        img: "../../assets/knowledge2.jpg"
+    },
+    {
+        id: "21",
+        status: "1",
+        title: "Webinar on Child Nutrition",
+        challenge: "Join & expand your skills.",
+        question: "Discussion",
+        img: "../../assets/knowledge3.jpg"
    }
 ];

 let performersData = [
    {
-      id: "1",
-      name: "Eiden",
-      score: "48/50",
-      points: "999",
-      rank: "1",
-      program: "Graduate Program",
-      avatar: "../../assets/avatar1.png"
+        id: "1",
+        name: "Eiden",
+        score: "48/50",
+        points: "999",
+        rank: "1",
+        program: "Graduate Program",
+        avatar: "avatar1.png"
    },
    {
-      id: "2",
-      name: "Jackson",
-      score: "45/50",
-      points: "997",
-      rank: "2",
-      program: "Graduate Program",
-      avatar: "../../assets/avatar2.png"
+        id: "2",
+        name: "Jackson",
+        score: "45/50",
+        points: "997",
+        rank: "2",
+        program: "Graduate Program",
+        avatar: "avatar2.png"
    },
    {
-      id: "3",
-      name: "Emma Aria",
-      score: "43/50",
-      points: "994",
-      rank: "3",
-      program: "Graduate Program",
-      avatar: "../../assets/avatar3.png"
+        id: "3",
+        name: "Emma Aria",
+        score: "43/50",
+        points: "994",
+        rank: "3",
+        program: "Graduate Program",
+        avatar: "avatar3.png"
    },
    {
-      id: "4",
-      name: "John Doe",
-      score: "40/50",
-      points: "990",
-      rank: "4",
-      program: "Graduate Program",
-      avatar: "../../assets/avatar4.png"
+        id: "4",
+        name: "John Doe",
+        score: "40/50",
+        points: "990",
+        rank: "4",
+        program: "Graduate Program",
+        avatar: "avatar4.png"
    },
    {
-      id: "5",
-      name: "Jane Cooper",
-      score: "37/50",
-      points: "987",
-      rank: "5",
-      program: "Graduate Program",
-      avatar: "../../assets/avatar5.png"
+        id: "5",
+        name: "Jane Cooper",
+        score: "37/50",
+        points: "987",
+        rank: "5",
+        program: "Graduate Program",
+        avatar: "avatar5.png"
    },
    {
-      id: "6",
-      name: "John Doe",
-      score: "35/50",
-      points: "982",
-      rank: "6",
-      program: "Graduate Program",
-      avatar: "../../assets/avatar6.png"
+        id: "6",
+        name: "John Doe",
+        score: "35/50",
+        points: "982",
+        rank: "6",
+        program: "Graduate Program",
+        avatar: "avatar6.png"
+    },
+    {
+        id: "7",
+        name: "Alice",
+        score: "33/50",
+        points: "980",
+        rank: "7",
+        program: "Graduate Program",
+        avatar: "avatar1.png"
+    },
+    {
+        id: "8",
+        name: "Bob",
+        score: "32/50",
+        points: "978",
+        rank: "8",
+        program: "Graduate Program",
+        avatar: "avatar2.png"
+    },
+    {
+        id: "9",
+        name: "Charlie",
+        score: "30/50",
+        points: "975",
+        rank: "9",
+        program: "Graduate Program",
+        avatar: "avatar3.png"
+    },
+    {
+        id: "10",
+        name: "Diana",
+        score: "28/50",
+        points: "972",
+        rank: "10",
+        program: "Graduate Program",
+        avatar: "avatar4.png"
+    },
+    {
+        id: "11",
+        name: "Edward",
+        score: "27/50",
+        points: "970",
+        rank: "11",
+        program: "Graduate Program",
+        avatar: "avatar5.png"
+    },
+    {
+        id: "12",
+        name: "Fiona",
+        score: "26/50",
+        points: "968",
+        rank: "12",
+        program: "Graduate Program",
+        avatar: "avatar6.png"
+    },
+    {
+        id: "13",
+        name: "George",
+        score: "25/50",
+        points: "965",
+        rank: "13",
+        program: "Graduate Program",
+        avatar: "avatar1.png"
+    },
+    {
+        id: "14",
+        name: "Hannah",
+        score: "23/50",
+        points: "962",
+        rank: "14",
+        program: "Graduate Program",
+        avatar: "avatar2.png"
+    },
+    {
+        id: "15",
+        name: "Ian",
+        score: "22/50",
+        points: "960",
+        rank: "15",
+        program: "Graduate Program",
+        avatar: "avatar3.png"
+    },
+    {
+        id: "16",
+        name: "Julia",
+        score: "20/50",
+        points: "957",
+        rank: "16",
+        program: "Graduate Program",
+        avatar: "avatar4.png"
+    },
+    {
+        id: "17",
+        name: "Kyle",
+        score: "19/50",
+        points: "955",
+        rank: "17",
+        program: "Graduate Program",
+        avatar: "avatar5.png"
+    },
+    {
+        id: "18",
+        name: "Laura",
+        score: "18/50",
+        points: "953",
+        rank: "18",
+        program: "Graduate Program",
+        avatar: "avatar6.png"
+    },
+    {
+        id: "19",
+        name: "Michael",
+        score: "17/50",
+        points: "950",
+        rank: "19",
+        program: "Graduate Program",
+        avatar: "avatar1.png"
+    },
+    {
+        id: "20",
+        name: "Nancy",
+        score: "16/50",
+        points: "947",
+        rank: "20",
+        program: "Graduate Program",
+        avatar: "avatar2.png"
+    },
+    {
+        id: "21",
+        name: "Oliver",
+        score: "15/50",
+        points: "945",
+        rank: "21",
+        program: "Graduate Program",
+        avatar: "avatar3.png"
    }
-];  
+];

 const sortedData = performersData.sort((a, b) => parseInt(a.rank) - parseInt(b.rank));

@@ -148,92 +427,92 @@ type MenuItem = Required<MenuProps>['items'][number];

 const items2: MenuProps['items'] = [
    {
-        key: 'subkq1',
+        key: 'subsd1',
        icon: <AdministrationIcon />,
-        label: 'Administration',
+        label: (<p>&nbsp; Administration</p>),
        children: [
            {
-            key: '1kq',
+            key: '1sd',
            label: (<a href='#'>Class Schedules</a>),
            },
            {
-            key: '2kq',
+            key: '2sd',
            label: (<a href='#'>Classmate Directory</a>),
            },
            {
-            key: '3kq',
+            key: '3sd',
            label: (<a href='#'>Qualifications</a>),
            },
        ],
    },
    {
-        key: 'subkq2',
+        key: 'subsd2',
        icon: <MyCoursesIcon />,
-        label: 'My Courses',
+        label: (<p>&nbsp; My Courses</p>),
        children: [
            {
-            key: '4kq',
+            key: '4sd',
            label: (<a href='#'>Graduate Program</a>),
            },
            {
-            key: '5kq',
+            key: '5sd',
            label: (<a href='#'>Post-Graduate Program</a>),
            },
        ],
    },
    {
-        key: 'subkq3',
+        key: 'subsd3',
        icon: <ExaminationIcon />,
-        label: 'Examinations',
+        label: (<p>&nbsp; Examinations</p>),
        children: [
            {
-            key: '6kq',
+            key: '6sd',
            label: (<a href='#'>Exam Scheduled</a>),
            },
            {
-            key: '7kq',
+            key: '7sd',
            label: (<a href='#'>Upcoming Exam</a>),
            },
            {
-            key: '8kq',
+            key: '8sd',
            label: (<a href='#'>Passed Exam</a>),
            },
        ],
    },
    {
-        key: 'subkq4',
+        key: 'subsd4',
        icon: <CommunityIcon />,
-        label: 'Community',
+        label: (<p>&nbsp; Community</p>),
        children: [
        {
-            key: '9kq',
+            key: '9sd',
            label: (<a href='#'>Exam Scheduled</a>),
        },
        {
-            key: '10kq',
+            key: '10sd',
            label: (<a href='#'>Upcoming Exam</a>),
        },
        {
-            key: '11kq',
+            key: '11sd',
            label: (<a href='#'>Passed Exam</a>),
        },
        ],
    },
    {
-        key: 'subkq5',
+        key: 'subsd5',
        icon: <NotificationIcon />,
-        label: 'Notifications',
+        label: (<p>&nbsp; Notifications</p>),
        children: [
            {
-            key: '12kq',
+            key: '12sd',
            label: (<a href='#'>Exam Scheduled</a>),
            },
            {
-            key: '13kq',
+            key: '13sd',
            label: (<a href='#'>Upcoming Exam</a>),
            },
            {
-            key: '14kq',
+            key: '14sd',
            label: (<a href='#'>Passed Exam</a>),
            },
        ],
@@ -246,17 +525,17 @@ const items2: MenuProps['items'] = [
        style: { marginTop: '100px' },
        children: [
        {   
-            key: '15kq', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, 
+            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: '16kq', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'},
+            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: '17kq', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'},
+            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>)
        },     
@@ -317,34 +596,23 @@ const App: React.FC = () => {
        </Header> */}
        <Layout>
            <div >
-            <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)} width={310} style={{overflow: 'auto', height: '110vh', position: 'fixed', left: 0, top: 0, bottom: 0,  background: '#FFF', borderRight: '1px solid #CFCFCF', borderBottom: '2px solid #000'}}>
+            <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>    
-                        <a href="#" className='flex flex-row justify-between border-[1px] border-[#E9E9E9] rounded-[10px] p-2  place-items-center'>
-                            <img className='w-[46px] h-[46px]' src="/assets/man.png" alt="" />
-                            <div>
-                                <p className='text-[16px] font-[500] text-[#6E6E6E]'>My Profile</p>
-                                <p className='text-[22px] font-[700] text-[#000]'>Rayan Holiday</p>
-                            </div>
-                            <img className='' src="../../assets/right-arrow.svg" alt="" />
-                        </a>
                    </div>
                </div>
                <Menu className='custom-menu' mode="inline"  style={{ height: '100%', borderRight: 0, paddingTop: 30, background: 'transparent'}} items={items2} />
            </Sider>
            </div>
            {/* defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']} */}
-            <Layout style={{marginLeft: 310, background: '#FFF'}}>
+            <Layout style={{marginLeft: 366, background: '#FFF'}}>
                <Content style={{  overflow: 'initial',}}>
                    <div className='border-b-[1px] py-2 border-[#CFCFCF]'>
-                        <div className='container mx-auto  flex flex-row justify-between'>
+                        <div className='container mx-auto  flex flex-row justify-between pr-10'>
                            <div className='inline-flex justify-center place-items-center'>
                                {/* <img src="../../assets/student-dash.svg" alt=""/> */}
                                <p className='pl-1 text-[18px] font-[700] whitespace-nowrap'>Knowledge Quests</p>
-                            </div>
-                            <div className='flex justify-end'>
-                            
                            </div>
                            <div className='flex justify-center place-items-center'>
                                <button className='bg-[#000]  py-2.5 rounded-[8px] text-[#FFF] tetx-[16px] font-[600] inline-flex justify-center place-items-center'>
@@ -367,7 +635,7 @@ const App: React.FC = () => {
                                                <p className='text-[12px] text-[#EF7A0C] font-[500]'>My Profile</p>
                                                <p className='text-[16px] text-[#27549F] font-[700]'>Rayan Holiday</p>
                                            </div>
-                                            <DownOutlined style={{ fontSize: '12px' }} />
+                                            <RightOutlined style={{ fontSize: '12px', paddingRight: '10px'}} />
                                        </div>
                                    </Space>
                                    </a>
@@ -409,7 +677,7 @@ const App: React.FC = () => {
                                                            <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>
+                                                        <button className='bg-[#000] text-[#FFF] rounded-[8px] px-16 py-3 h-fit text-[18px] font-[600]'>Review</button>
                                                    </div>
                                                ))}
                                            </div>