diff --git a/app/components/ClassMates.tsx b/app/components/ClassMates.tsx
new file mode 100644
index 0000000..d157775
--- /dev/null
+++ b/app/components/ClassMates.tsx
@@ -0,0 +1,171 @@
+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"
+    }
+];
+export default function Index() {
+    return (
+        <div className=''>
+            <p className='text-[18px] font-[700] text-[#525252] border-b-[1px] border-b-[#CFCFCF] py-5 pl-5 container-fluid'>
+                <span>Your Classmates </span>&nbsp; | &nbsp;<span>Graduate Program</span>
+            </p>
+            <div className='container mx-auto grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 gap-6 place-items-center p-6'>
+                {classmatesData.map(data => (
+                    <div key={data.id} className='relative flex flex-col justify-center items-center shadow-lg w-full rounded-[10px] py-8 overflow-hidden' style={{ background: 'transparent' }}>
+                        <div className='absolute top-0 left-0 w-full h-1/2' style={{ backgroundImage: `url('../../assets/${data.avatar}')`, backgroundRepeat: 'no-repeat', backgroundSize: 'cover', backgroundPosition: 'center', filter: 'blur(8px)'}}></div>
+                        <div className='absolute bottom-0 left-0 w-full h-1/2 bg-[#FFF] '></div><br /><br />
+                        <img className='w-[60px] h-[60px] border-[4px] border-[#FFF] rounded-full z-10' src={`../../assets/${data.avatar}`} alt="" />
+                        <p className='z-10 text-[16px] font-[700] text-[]'>{data.name}</p>
+                        <p className='z-10 text-[12px] font-[500] text-[#6E6E6E]'>
+                            <span>{data.program}</span> | <span>{data.type}</span>
+                        </p>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+}
+
+
+
+{/* <div className="h-[90px] bg-cover bg-center w-full" style={{ backgroundImage: `url('../../assets/${data.avatar}')` }}>
+    <img className='w-[60px] h-[60px]' src={`../../assets/${data.avatar}`} alt="" />
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis quasi nisi eligendi consectetur sequi nemo doloribus, obcaecati corrupti dolorum dolores omnis magni similique. Debitis unde nam, magnam maxime magni repudiandae.</p>
+</div> */}
\ No newline at end of file
diff --git a/app/components/ClassmateTutorSection.tsx b/app/components/ClassmateTutorSection.tsx
new file mode 100644
index 0000000..c69f456
--- /dev/null
+++ b/app/components/ClassmateTutorSection.tsx
@@ -0,0 +1,20 @@
+export default function Index() {
+    return (
+        <div className='relative flex flex-col justify-center items-center shadow-lg w-full rounded-[10px] py-8 overflow-hidden' style={{ background: 'transparent' }}>
+            <div className='absolute top-0 left-0 w-full h-1/2' style={{ backgroundImage: `url('../../assets/tutor.png')`, backgroundRepeat: 'no-repeat', backgroundSize: 'cover', backgroundPosition: 'center', filter: 'blur(8px)' }}></div>
+            <div className='absolute bottom-0 left-0 w-full h-1/2' style={{background: 'linear-gradient(101.74deg, #4276C5 0.01%, #26529D 100.18%)'}}></div>
+            <br /><br />
+            <img className='w-[60px] h-[60px] border-[4px] border-[#FFF] rounded-full z-10' src={`../../assets/tutor.png`} alt="Tutor" />
+            <p className='z-10 text-[30px] font-[700] text-[#FFF]'>Sarah Anderson</p>
+            <p className='z-10 '>
+                <span className="text-[14px] font-[700] text-[#EF7A0C]">TUTOR </span>
+                <span className="text-[#FFF]"> | </span>
+                <span className="text-[14px] font-[600] text-[#FFF]">Graduate Program</span>
+            </p>
+            <hr className="z-10" />
+            {/* <p className="z-10">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id a cum maxime iste dicta minus vitae harum saepe, assumenda esse sit autem qui quis deserunt adipisci omnis veniam incidunt? Placeat.</p> */}
+        </div>
+    );
+}
+
+
diff --git a/app/components/KnowledgeQuests.tsx b/app/components/KnowledgeQuests.tsx
index 990141f..a191567 100644
--- a/app/components/KnowledgeQuests.tsx
+++ b/app/components/KnowledgeQuests.tsx
@@ -25,145 +25,30 @@ let knowledgeData = [
     }
 ];
 
-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"
-    }
-];  
-
-const sortedData = performersData.sort((a, b) => parseInt(a.rank) - parseInt(b.rank));
-
-const highestRank = sortedData[0];
-const secondHighestRank = sortedData[1];
-const thirdHighestRank = sortedData[2];
-
-console.log('The highest rank is:', highestRank);
-console.log('The second highest rank is:', secondHighestRank);
-console.log('The Third highest rank is:', thirdHighestRank);
-
-
-
 export default function(){
     return(
-        <section className='container mx-auto my-16'>
-                        <div className='grid grid-cols-1 xl:grid-cols-7 gap-y-6 border-[1px] border-[#CFCFCF]'>
-                            <div className='xl:col-span-5 border-r-[1px] border-[#CFCFCF]'>
-                                <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 className='xl:col-span-2'>
-                                <h2 className='text-[20px] font-[700] inline-flex px-4 pt-4'>Top Performers <img src="../../assets/right-arrow.svg" alt="" /></h2>
-                                <p className='text-[16px] font-[700] text-[#6E6E6E] px-4 pb-4 mb-28'>Knowledge Quest</p>
-                                <div className='flex flex-row justify-between place-items-center space-x-2 border-b-[1px] border-[#CFCFCF]'>
-                                    <div className='w-full mx-auto h-[88px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
-                                        <div className='-mt-10 relative flex flex-col justify-center place-items-center'>
-                                            <img className='mx-auto h-[52px] w-[60px] ' src={`../../assets/${secondHighestRank.avatar}`} alt="" />
-                                            <img className='absolute mt-12' src="../../assets/bacth2.svg" alt="" />
-                                        </div>
-                                        <p className='text-[12px] font-[700] text-center mt-4'>{secondHighestRank.name}</p>
-                                        <p className='text-[12px] font-[700] text-center'>{secondHighestRank.score}</p>
-                                    </div>
-                                    <div className='w-full mx-auto h-[130px] -mt-[42px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
-                                        <div className='-mt-10 relative flex flex-col justify-center place-items-center'>
-                                            <img className='-mt-10' src="../../assets/crown.png" alt="" />
-                                            <img className='mx-auto h-[52px] w-[60px]' src={`../../assets/${highestRank.avatar}`} alt="" />
-                                            <img className='absolute mt-12' src="../../assets/bacth1.svg" alt="" />
-                                        </div>
-                                        <p className='text-[12px] font-[700] text-center mt-4'>{highestRank.name}</p>
-                                        <p className='text-[12px] font-[700] text-center'>{highestRank.score}</p>
-                                    </div>
-                                    <div className='w-full mx-auto h-[88px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
-                                        <div className='-mt-10 relative flex flex-col justify-center place-items-center'>
-                                            <img className='mx-auto h-[52px] w-[60px]' src={`../../assets/${thirdHighestRank.avatar}`} alt="" />
-                                            <img className='absolute mt-12' src="../../assets/bacth3.svg" alt="" />
-                                        </div>
-                                        <p className='text-[12px] font-[700] text-center mt-4'>{thirdHighestRank.name}</p>
-                                        <p className='text-[12px] font-[700] text-center'>{thirdHighestRank.score}</p>
-                                    </div>
+        <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 className='flex flex-col'>
-                                    {sortedData.slice(3).map(data => (
-                                        <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={`../../assets/${data.avatar}`} alt="" />
-                                            <div>
-                                                <p className='text-[14px] font-[700]'>{data.name}</p>
-                                                <p className='text-[10px] font-[700] text-[#6E6E6E]'>{data.program}</p>
-                                            </div>
-                                            <div className='flex flex-col justify-center place-items-center'>
-                                                <img src="../../assets/points-icon.svg" alt="" />
-                                                <p className='text-[10px] font-[700]'>{data.points} Points</p>
-                                            </div>
-                                        </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> 
+                        ))}
+                    </div>                             
+                </div>
+               
+            </div>
+        </section> 
     )
 }
\ No newline at end of file
diff --git a/app/components/ProgressReview.tsx b/app/components/ProgressReview.tsx
index 56fcc61..3fae61e 100644
--- a/app/components/ProgressReview.tsx
+++ b/app/components/ProgressReview.tsx
@@ -489,7 +489,6 @@ export default function Index() {
                       <p className="text-[20px] font-[500]">{questionData.correctAnswer}</p>
                       <div className='inline-flex place-items-center space-x-4 w-full border-[1px] border-[#218B32] rounded-[10px] p-3'>
                           <p className='text-[14px] font-[700] text-[#218B32] inline-flex place-items-center'><img src="../../assets/green-tick.svg" alt="" /> &nbsp;Correct</p>
-                          
                           <p className='text-[14px] font-[400]'> {questionData.correctAnswer}</p>
                       </div>
                   <ul>
diff --git a/app/components/TopPerformers.tsx b/app/components/TopPerformers.tsx
new file mode 100644
index 0000000..c5ca1d7
--- /dev/null
+++ b/app/components/TopPerformers.tsx
@@ -0,0 +1,119 @@
+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"
+    }
+];  
+
+const sortedData = performersData.sort((a, b) => parseInt(a.rank) - parseInt(b.rank));
+
+const highestRank = sortedData[0];
+const secondHighestRank = sortedData[1];
+const thirdHighestRank = sortedData[2];
+
+// console.log('The highest rank is:', highestRank);
+// console.log('The second highest rank is:', secondHighestRank);
+// console.log('The Third highest rank is:', thirdHighestRank);
+
+
+export default function(){
+    return(
+        <div className=''>
+            <h2 className='text-[20px] font-[700] inline-flex px-4 pt-4'>Top Performers <img src="../../assets/right-arrow.svg" alt="" /></h2>
+            <p className='text-[16px] font-[700] text-[#6E6E6E] px-4 pb-4 mb-28'>Knowledge Quest</p>
+            <div className='flex flex-row justify-between place-items-center space-x-2 border-b-[1px] border-[#CFCFCF]'>
+                <div className='w-full mx-auto h-[88px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
+                    <div className='-mt-10 relative flex flex-col justify-center place-items-center'>
+                        <img className='mx-auto h-[52px] w-[60px] ' src={`../../assets/${secondHighestRank.avatar}`} alt="" />
+                        <img className='absolute mt-12' src="../../assets/bacth2.svg" alt="" />
+                    </div>
+                    <p className='text-[12px] font-[700] text-center mt-4'>{secondHighestRank.name}</p>
+                    <p className='text-[12px] font-[700] text-center'>{secondHighestRank.score}</p>
+                </div>
+                <div className='w-full mx-auto h-[130px] -mt-[42px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
+                    <div className='-mt-10 relative flex flex-col justify-center place-items-center'>
+                        <img className='-mt-10' src="../../assets/crown.png" alt="" />
+                        <img className='mx-auto h-[52px] w-[60px]' src={`../../assets/${highestRank.avatar}`} alt="" />
+                        <img className='absolute mt-12' src="../../assets/bacth1.svg" alt="" />
+                    </div>
+                    <p className='text-[12px] font-[700] text-center mt-4'>{highestRank.name}</p>
+                    <p className='text-[12px] font-[700] text-center'>{highestRank.score}</p>
+                </div>
+                <div className='w-full mx-auto h-[88px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
+                    <div className='-mt-10 relative flex flex-col justify-center place-items-center'>
+                        <img className='mx-auto h-[52px] w-[60px]' src={`../../assets/${thirdHighestRank.avatar}`} alt="" />
+                        <img className='absolute mt-12' src="../../assets/bacth3.svg" alt="" />
+                    </div>
+                    <p className='text-[12px] font-[700] text-center mt-4'>{thirdHighestRank.name}</p>
+                    <p className='text-[12px] font-[700] text-center'>{thirdHighestRank.score}</p>
+                </div>
+            </div>
+            <div className='flex flex-col'>
+                {sortedData.slice(3).map(data => (
+                    <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={`../../assets/${data.avatar}`} alt="" />
+                        <div>
+                            <p className='text-[14px] font-[700]'>{data.name}</p>
+                            <p className='text-[10px] font-[700] text-[#6E6E6E]'>{data.program}</p>
+                        </div>
+                        <div className='flex flex-col justify-center place-items-center'>
+                            <img src="../../assets/points-icon.svg" alt="" />
+                            <p className='text-[10px] font-[700]'>{data.points} Points</p>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/app/routes/classmate-directory.tsx b/app/routes/classmate-directory.tsx
index acc859b..8ee198a 100644
--- a/app/routes/classmate-directory.tsx
+++ b/app/routes/classmate-directory.tsx
@@ -1,304 +1,163 @@
 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 ClassMates from '~/components/ClassMates';
+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';
 
-    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 { Content, Sider } = Layout;
 
-    const items1: MenuProps['items'] = ['1', '2', '3'].map((key) => ({
-    key,
-    label: `navsd ${key}`,
-    }));
+const items1: MenuProps['items'] = ['1', '2', '3'].map((key) => ({
+  key,
+  label: `navsd ${key}`,
+}));
 
-    type MenuItem = Required<MenuProps>['items'][number];
+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: [
+const items2: MenuProps['items'] = [
+    {
+        key: 'subsd1',
+        icon: <AdministrationIcon />,
+        label: (<p>&nbsp; Administration</p>),
+        children: [
             {
-                key: '9sd',
-                label: (<a href='#'>Exam Scheduled</a>),
+            key: '1sd',
+            label: (<a href='#'>Class Schedules</a>),
             },
             {
-                key: '10sd',
-                label: (<a href='#'>Upcoming Exam</a>),
+            key: '2sd',
+            label: (<a href='#'>Classmate Directory</a>),
             },
             {
-                key: '11sd',
-                label: (<a href='#'>Passed Exam</a>),
+            key: '3sd',
+            label: (<a href='#'>Qualifications</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: 'subsd2',
+        icon: <MyCoursesIcon />,
+        label: (<p>&nbsp; My Courses</p>),
+        children: [
+            {
+            key: '4sd',
+            label: (<a href='#'>Graduate Program</a>),
             },
             {
-                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: '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: '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'] = [
+            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: [
         {
-        label: <a href="https://www.antgroup.com">1st menu item</a>,
-        key: '01sd',
+            key: '9sd',
+            label: (<a href='#'>Exam Scheduled</a>),
         },
         {
-        type: 'divider',
+            key: '10sd',
+            label: (<a href='#'>Upcoming Exam</a>),
         },
         {
-        label: <a href="https://www.aliyun.com">2nd menu item</a>,
-        key: '02sd',
+            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>)
         },
         {
-        type: 'divider',
+            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>)
         },
         {
-        label: '3rd menu item',
-        key: '03sd',
-        },
+            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 = () => {
@@ -318,20 +177,7 @@ const App: React.FC = () => {
     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'}}>
@@ -343,61 +189,57 @@ const App: React.FC = () => {
                 <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='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=">" items={[{title: <a href="">Administration</a>,},{title: 'Class Directory',},]}/>
+                                <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>
+                                        <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' }} />
+                                    <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>
-                                        </Space>
+                                            <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>
+                    {/* Place Content from here */}
+                    <section className=''>
+                        <div className='grid grid-cols-1 md:grid-cols-7'>
+                            <div className='md:col-span-5 border-r-[1px] border-r-[#CFCFCF]'>
+                                <ClassMates />
+                            </div>
+                            <div className='md:col-span-2 p-4'>
+                                <div>
+                                    <ClassmateTutorSection />
+                                </div>
+                                <TopPerformers />
                             </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>                   
+                    </section>
+
                 </Content>
             </Layout>
         </Layout>
     </Layout>
   );
 };
-export default App;
\ No newline at end of file
+export default App;
+
diff --git a/app/routes/student-dashboard._index.tsx b/app/routes/student-dashboard._index.tsx
index 55418a6..44b730d 100644
--- a/app/routes/student-dashboard._index.tsx
+++ b/app/routes/student-dashboard._index.tsx
@@ -6,7 +6,8 @@ import ExaminationIcon from '~/components/customIcon/ExaminationIcon';
 import CommunityIcon from '~/components/customIcon/CommunityIcon';
 import NotificationIcon from '~/components/customIcon/NotificationIcon';
 import ContunueLearning from '~/components/ContinueLearning';
-import KnowledgeQuests from '~/components/KnowledgeQuests'
+import KnowledgeQuests from '~/components/KnowledgeQuests';
+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';
@@ -221,12 +222,21 @@ const App: React.FC = () => {
                         </div>
                     </div>
                     {/* Place content from here */}
+                    
+                    
                     <div>
                       <ContunueLearning />
                     </div>
-                    <div>
-                        <KnowledgeQuests />
-                    </div>
+                    <section className='container mx-auto my-16'>
+                        <div className='grid grid-cols-1 xl:grid-cols-7 gap-y-6 border-[1px] border-[#CFCFCF]'>
+                            <div className='xl:col-span-5 border-r-[1px] border-[#CFCFCF]'>
+                                <KnowledgeQuests />
+                            </div>
+                            <div className='xl:col-span-2'>
+                                <TopPerformers />
+                            </div>
+                        </div>
+                    </section>
                 </Content>
             </Layout>
         </Layout>
diff --git a/public/assets/tutor.png b/public/assets/tutor.png
new file mode 100644
index 0000000..481cb1f
Binary files /dev/null and b/public/assets/tutor.png differ