diff --git a/app/components/ClassmateTutorSection.tsx b/app/components/ClassmateTutorSection.tsx
index c69f456..df3dbc0 100644
--- a/app/components/ClassmateTutorSection.tsx
+++ b/app/components/ClassmateTutorSection.tsx
@@ -1,20 +1,18 @@
 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>
+            <div className='absolute top-0 left-0 w-full h-2/5' 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-3/5' 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" />
+            <img className='w-[115px] h-[115px] border-[5px] border-[#3362AF] 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 className="z-10 border-b-[1px] border-[#B8B8B8] w-full my-3"></div>
+            <p className="z-10 text-[12px] font-[600] text-[#fff] text-center">Early Childhood Educator | 3 YRS of Experience</p>
         </div>
     );
-}
-
-
+}
\ No newline at end of file
diff --git a/app/components/TopPerformers.tsx b/app/components/TopPerformers.tsx
index c5ca1d7..244c2c0 100644
--- a/app/components/TopPerformers.tsx
+++ b/app/components/TopPerformers.tsx
@@ -1,59 +1,194 @@
 let performersData = [
     {
-      id: "1",
-      name: "Eiden",
-      score: "48/50",
-      points: "999",
-      rank: "1",
-      program: "Graduate Program",
-      avatar: "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: "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: "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: "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: "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: "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));
 
diff --git a/app/routes/classmate-directory.tsx b/app/routes/classmate-directory.tsx
index 8ee198a..d6e935c 100644
--- a/app/routes/classmate-directory.tsx
+++ b/app/routes/classmate-directory.tsx
@@ -194,7 +194,7 @@ const App: React.FC = () => {
                     <div className='border-b-[1px] py-2 border-[#CFCFCF]'>
                         <div className='container mx-auto flex flex-row justify-between pr-8'>
                             <div className='inline-flex justify-center place-items-center'>
-                                <Breadcrumb separator=">" items={[{title: <a href="">Administration</a>,},{title: 'Class Directory',},]}/> 
+                                <Breadcrumb separator=">" className='pl-6' style={{fontSize: '18px' , fontWeight: '700'}} items={[{title: <a href="">Administration</a>,},{title: 'Class Directory',},]}/> 
                             </div>
                             <div>
                                 <Button className='border-none shadow-none bg-transparent hover:bg-transparent' onClick={showLoading}>
@@ -221,16 +221,18 @@ const App: React.FC = () => {
                     </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]'>
+                    <section className='container mx-auto'>
+                        <div className='grid grid-cols-1 xl:grid-cols-7'>
+                            <div className='xl:col-span-5 border-r-[1px] border-r-[#CFCFCF]'>
                                 <ClassMates />
                             </div>
-                            <div className='md:col-span-2 p-4'>
+                            <div className='xl:col-span-2 p-4'>
                                 <div>
                                     <ClassmateTutorSection />
                                 </div>
-                                <TopPerformers />
+                                <div className='border-[1px] border-r-[#CFCFCF] mt-6'>
+                                    <TopPerformers />
+                                </div>
                             </div>
                         </div>
                     </section>