diff --git a/components/Footer/Footer.html b/components/Footer/Footer.html
index 4f3659f7..a51be64c 100644
--- a/components/Footer/Footer.html
+++ b/components/Footer/Footer.html
@@ -4,7 +4,7 @@
     <!-- <base href="/Pathsphere/"> -->
     <!-- uncomment above line if deploying to github pages -->
     <meta charset="UTF-8" />
-    <link rel="stylesheet" href="/styles/styles.css" />
+    <link rel="stylesheet" href="./styles/styles.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link
       rel="stylesheet"
@@ -38,18 +38,18 @@ <h3>PathSphere</h3>
       <div class="footer-list">
         <h3>Quick links</h3>
         <ul>
-          <li><a href="/index.html">Home</a></li>
-          <li><a href="/pages/about/about.html">About us</a></li>
+          <li><a href="./index.html">Home</a></li>
+          <li><a href="./pages/about/about.html">About us</a></li>
           <li><a href="/pages/contact/contact.html">Contact Us</a></li>
           <li>
-            <a href="/pages/scholarships/scholarships.html">Scholarships</a>
+            <a href="./pages/scholarships/scholarships.html">Scholarships</a>
           </li>
-          <li><a href="/pages/jobs/jobs.html">Jobs</a></li>
-          <li><a href="/pages/forum/forum.html">Forum</a></li>
-          <li><a href="/pages/contributor/index.html">Contributor</a></li>
-          <li><a href="/pages/terms/index.html">Terms Of Services</a></li>
+          <li><a href="./pages/jobs/jobs.html">Jobs</a></li>
+          <li><a href="./pages/forum/forum.html">Forum</a></li>
+          <li><a href="./pages/contributor/index.html">Contributor</a></li>
+          <li><a href="./pages/terms/index.html">Terms Of Services</a></li>
           <li>
-            <a href="/pages/privacypolicy/privacypolicy.html">Privacy Policy</a>
+            <a href="./pages/privacypolicy/privacypolicy.html">Privacy Policy</a>
           </li>
         </ul>
       </div>
diff --git a/components/GlobalScripts/GlobalScripts.html b/components/GlobalScripts/GlobalScripts.html
index 84802005..304f1c77 100644
--- a/components/GlobalScripts/GlobalScripts.html
+++ b/components/GlobalScripts/GlobalScripts.html
@@ -12,6 +12,6 @@
       crossorigin="anonymous"
       referrerpolicy="no-referrer"
     ></script>
-    <script src="/scripts/script.js"></script>
+    <script src="./scripts/script.js"></script>
   </body>
 </html>
diff --git a/components/LoadingScreen/LoadingScreen.html b/components/LoadingScreen/LoadingScreen.html
index a788741a..8251bf73 100644
--- a/components/LoadingScreen/LoadingScreen.html
+++ b/components/LoadingScreen/LoadingScreen.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Document</title>
-    <link rel="stylesheet" href="/components/LoadingScreen/LoadingScreen.css" />
+    <link rel="stylesheet" href="./components/LoadingScreen/LoadingScreen.css" />
   </head>
   <body>
     <div id="LoadingScreen">
diff --git a/components/Navbar/Navbar.html b/components/Navbar/Navbar.html
index c67362ee..7293f3e3 100644
--- a/components/Navbar/Navbar.html
+++ b/components/Navbar/Navbar.html
@@ -11,8 +11,8 @@
     <header>
         <nav id="navbar">
             
-            <a href="/index.html" class="logo">
-                <img src="/images/logo.png" alt="PathSphere Logo" />
+            <a href="./index.html" class="logo">
+                <img src="./images/logo.png" alt="PathSphere Logo" />
                 PathSphere</a>
             <button class="hamburger">
                 <span></span>
@@ -21,22 +21,22 @@
             </button>
             <div class="menu">
                 <ul id="tabs">
-                    <li class="tab"><a href="/index.html">Home</a></li>
-                    <li class="tab"><a href="/pages/scholarship-feature/scholarships.html">Scholarships</a></li>
-                    <li class="tab"><a href="/pages/jobs/jobs.html">Jobs</a></li>
-                    <li class="tab"><a href="/pages/forum/forum.html">Forum</a></li>
-                    <li class="tab"><a href="/pages/faqs/faqs.html">FAQs</a></li>
-                    <li class="tab"><a href="/pages/blog/blog.html">Blog</a></li>
+                    <li class="tab"><a href="./index.html">Home</a></li>
+                    <li class="tab"><a href="./pages/scholarship-feature/scholarships.html">Scholarships</a></li>
+                    <li class="tab"><a href="./pages/jobs/jobs.html">Jobs</a></li>
+                    <li class="tab"><a href="./pages/forum/forum.html">Forum</a></li>
+                    <li class="tab"><a href="./pages/faqs/faqs.html">FAQs</a></li>
+                    <li class="tab"><a href=./pages/blog/blog.html">Blog</a></li>
                     <li class="tab">
-                        <a href="/pages/login-signup/login-signup.html">
+                        <a href="./pages/login-signup/login-signup.html">
                             <i class="fa-solid fa-sign-in-alt"></i> Login
                         </a>
                     </li>
                 </ul>
             </div>
-            <img src="/images/dark.png" id="icon" alt="Dark mode toggle" />
+            <img src="./images/dark.png" id="icon" alt="Dark mode toggle" />
         </nav>
     </header>
-    <script src="/components/Navbar/Navbar.js"></script>
+    <script src="./components/Navbar/Navbar.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/components/Navbar/Navbar.js b/components/Navbar/Navbar.js
index 70c95d17..84ac19ad 100644
--- a/components/Navbar/Navbar.js
+++ b/components/Navbar/Navbar.js
@@ -11,20 +11,20 @@ window.onload = function () {
   let theme = localStorage.getItem("theme");
   if (theme === "dark") {
     document.body.classList.add("darkmode");
-    icon.src = "/images/light.png";
+    icon.src = "./images/light.png";
   } else {
     document.body.classList.remove("darkmode");
-    icon.src = "/images/dark.png";
+    icon.src = "./images/dark.png";
   }
 };
 
 icon.onclick = function () {
   document.body.classList.toggle("darkmode");
   if (document.body.classList.contains("darkmode")) {
-    icon.src = "/images/image.png";
+    icon.src = "./images/image.png";
     localStorage.setItem("theme", "dark");
   } else {
-    icon.src = "/images/dark.png";
+    icon.src = "./images/dark.png";
     localStorage.setItem("theme", "light");
   }
 };
diff --git a/components/ScrollToTop/ScrollToTop.html b/components/ScrollToTop/ScrollToTop.html
index 77259896..b207a071 100644
--- a/components/ScrollToTop/ScrollToTop.html
+++ b/components/ScrollToTop/ScrollToTop.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Document</title>
-    <link rel="stylesheet" href="/components/ScrollToTop/ScrollToTop.css" />
+    <link rel="stylesheet" href="./components/ScrollToTop/ScrollToTop.css" />
   </head>
   <body>
     <a class="scroll-top" href="#">
diff --git a/index.html b/index.html
index 6625a319..6c76b9d8 100644
--- a/index.html
+++ b/index.html
@@ -2,11 +2,11 @@
 <html lang="en">
 
 <head>
-  <link rel="stylesheet" href="/styles/styles.css">
+  <link rel="stylesheet" href="./styles/styles.css">
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Home</title>
-  <link rel="icon" type="image/x-icon" href="/images/pathsphere.png">
+  <link rel="icon" type="image/x-icon" href="./images/pathsphere.png">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
 </head>
 
@@ -31,15 +31,15 @@
         <h1>Welcome to PathSphere</h1>
         <p>Your gateway to educational and professional resources</p>
         <div class="search-container">
-          <a href="/pages/scholarship-feature/scholarships.html" class="btn">
+          <a href="./pages/scholarship-feature/scholarships.html" class="btn">
             <i class="fa-solid fa-magnifying-glass"></i>
             Find Scholarships
           </a>
-          <a href="/pages/jobs/jobs.html" class="btn">
+          <a href="./pages/jobs/jobs.html" class="btn">
             <i class="fa-solid fa-magnifying-glass"></i>
             Find Jobs
           </a>
-          <a href="/pages/login-signup/login-signup.html" class="btn">
+          <a href="./pages/login-signup/login-signup.html" class="btn">
             <i class="fa-solid fa-user-plus"></i>
             Register
           </a>
@@ -48,37 +48,37 @@ <h1>Welcome to PathSphere</h1>
     </section>
     <section class="features">
       <div class="feature">
-        <img src="/images/sicon.png" class="feature-img" alt="Scholarships Icon">
+        <img src="./images/sicon.png" class="feature-img" alt="Scholarships Icon">
         <div class="card-details">
           <h2>Scholarships</h2>
           <p>Discover scholarships tailored to your needs and academic performance.</p>
-          <a href="/pages/scholarship-feature/scholarships.html" class="btn">Explore</a>
+          <a href="./pages/scholarship-feature/scholarships.html" class="btn">Explore</a>
         </div>
       </div>
       <div class="feature">
-        <img src="/images/jicon.png" class="feature-img" alt="Jobs Icon">
+        <img src="./images/jicon.png" class="feature-img" alt="Jobs Icon">
         <h2>Jobs</h2>
         <p>Find job
            opportunities for educators and professionals.</p>
-        <a href="/pages/jobs/jobs.html" class="btn">Browse Jobs</a>
+        <a href="./pages/jobs/jobs.html" class="btn">Browse Jobs</a>
       </div>
       <div class="feature">
-        <img src="/images/ficon.png" class="feature-img" alt="testimonial Icon">
+        <img src="./images/ficon.png" class="feature-img" alt="testimonial Icon">
         <h2>Forum</h2>
         <p>Join discussions, ask questions, and connect with others.</p>
-        <a href="/pages/forum/forum.html" class="btn">Join the Forum</a>
+        <a href="./pages/forum/forum.html" class="btn">Join the Forum</a>
       </div>
       <div class="feature">
-        <img src="/images/feedback-testimonial-icon.png" class="feature-img" alt="Forum Icon">
+        <img src="./images/feedback-testimonial-icon.png" class="feature-img" alt="Forum Icon">
         <h2>Testimonials</h2>
         <p>Here are the testimonials and reviews.</p>
-        <a href="/pages/testimonials/testimonials.html" class="btn">Explore</a>
+        <a href="./pages/testimonials/testimonials.html" class="btn">Explore</a>
       </div>
       <div class="feature">
-        <img src="/images/account.png" class="feature-img" alt="Account Icon">
+        <img src="./images/account.png" class="feature-img" alt="Account Icon">
         <h2>Login</h2>
         <p>Access your account to manage your applications and profile.</p>
-        <a href="/pages/login-signup/login-signup.html" class="btn">
+        <a href="./pages/login-signup/login-signup.html" class="btn">
           <i class="fa-solid fa-sign-in-alt"></i>
           Login
         </a>
@@ -206,7 +206,7 @@ <h6 class="font-weight-bold my-3">EdTech Professional at Byju's</h6>
   
 
   </main>
-  <script src="/scripts/componentLoader.js">
+  <script src="./scripts/componentLoader.js">
   </script>
 
   <script>
diff --git a/pages/blog/blog.html b/pages/blog/blog.html
index 4b05c9a5..eae1eb21 100644
--- a/pages/blog/blog.html
+++ b/pages/blog/blog.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <link rel="stylesheet" href="/styles/styles.css" />
+    <link rel="stylesheet" href="./styles/styles.css" />
     <!-- <base href="/Pathsphere/"> -->
     <!-- uncomment above line if deploying to github pages -->
     <meta charset="UTF-8" />
@@ -32,9 +32,9 @@
     }
   </style>
     <!-- Added a favicon -->
-    <link rel="icon" type="image/x-icon" href="/images/pathsphere.png" />
+    <link rel="icon" type="image/x-icon" href="./images/pathsphere.png" />
     <link rel="stylesheet" href="./blog.css" />
-    <link rel="stylesheet" href="/styles/essential.css" />
+    <link rel="stylesheet" href="./styles/essential.css" />
     
   </head>
 
@@ -72,7 +72,7 @@ <h1 class="heading">Scholarship <span>Blogs</span></h1>
             onclick="redirectToBlog('https://example.com/blog1')"
           >
             <div class="blog-image">
-              <img src="/images/sc1.jpg" alt="Scholarship Blog 1" />
+              <img src="./images/sc1.jpg" alt="Scholarship Blog 1" />
             </div>
             <div class="blog-content">
               <h3>Kishore Vaigyanik Protsahan Yojana (KVPY):</h3>
@@ -94,7 +94,7 @@ <h3>Kishore Vaigyanik Protsahan Yojana (KVPY):</h3>
             onclick="redirectToBlog('https://example.com/blog2')"
           >
             <div class="blog-image">
-              <img src="/images/sc2.webp" alt="Scholarship Blog 2" />
+              <img src="./images/sc2.webp" alt="Scholarship Blog 2" />
             </div>
             <div class="blog-content">
               <h3>National Means Cum Merit Scholarship (NMMS)</h3>
@@ -116,7 +116,7 @@ <h3>National Means Cum Merit Scholarship (NMMS)</h3>
             onclick="redirectToBlog('https://example.com/blog2')"
           >
             <div class="blog-image">
-              <img src="/images/sc3.jpeg" alt="Scholarship Blog 2" />
+              <img src="./images/sc3.jpeg" alt="Scholarship Blog 2" />
             </div>
             <div class="blog-content">
               <h3>Prime Minister's Scholarship Scheme (PMSS)</h3>
@@ -137,7 +137,7 @@ <h3>Prime Minister's Scholarship Scheme (PMSS)</h3>
             onclick="redirectToBlog('https://example.com/blog2')"
           >
             <div class="blog-image">
-              <img src="/images/sc4.jpg" alt="Scholarship Blog 2" />
+              <img src="./images/sc4.jpg" alt="Scholarship Blog 2" />
             </div>
             <div class="blog-content">
               <h3>
@@ -162,7 +162,7 @@ <h3>
             onclick="redirectToBlog('https://example.com/blog2')"
           >
             <div class="blog-image">
-              <img src="/images/sc5.jpg" alt="Scholarship Blog 2" />
+              <img src="./images/sc5.jpg" alt="Scholarship Blog 2" />
             </div>
             <div class="blog-content">
               <h3>AICTE Pragati Scholarship for Girls</h3>
@@ -185,7 +185,7 @@ <h3>AICTE Pragati Scholarship for Girls</h3>
             onclick="redirectToBlog('https://example.com/blog2')"
           >
             <div class="blog-image">
-              <img src="/images/sc6.jpg" alt="Scholarship Blog 2" />
+              <img src="./images/sc6.jpg" alt="Scholarship Blog 2" />
             </div>
             <div class="blog-content">
               <h3>Inspire Scholarship</h3>
@@ -223,7 +223,7 @@ <h1>Sign Up for Newsletters</h1>
       <div id="toast-container" class="toast-container"></div>
     </main>
 
-    <script src="/scripts/componentLoader.js"></script>
+    <script src="./scripts/componentLoader.js"></script>
     <script>
       prependComponent('Navbar');
       prependComponent('ScrollToTop');
diff --git a/pages/contributor/index.html b/pages/contributor/index.html
index 4acdbfb5..d73a61ae 100644
--- a/pages/contributor/index.html
+++ b/pages/contributor/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <link rel="stylesheet" href="/styles/styles.css" />
+    <link rel="stylesheet" href="./styles/styles.css" />
     <meta charset="UTF-8" />
     <link rel="icon" type="image/x-icon" href="../../images/pathsphere.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -72,7 +72,7 @@ <h2>Ready to Make an Impact?</h2>
       </div>
     </section>
 
-    <script src="/scripts/componentLoader.js"></script>
+    <script src="./scripts/componentLoader.js"></script>
     <script>
       prependComponent('Navbar');
       prependComponent('Cursor');
diff --git a/pages/faqs/faqs.html b/pages/faqs/faqs.html
index 387778f6..113333e5 100644
--- a/pages/faqs/faqs.html
+++ b/pages/faqs/faqs.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <link rel="stylesheet" href="/styles/styles.css" />
+    <link rel="stylesheet" href=".styles/styles.css" />
 
     <!-- <base href="/Pathsphere/"> -->
     <!-- uncomment above line if deploying to github pages -->
@@ -9,10 +9,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>PathSphere | FAQs</title>
     <!-- Added a favicon -->
-    <link rel="icon" type="image/x-icon" href="/images/pathsphere.png" />
+    <link rel="icon" type="image/x-icon" href="./images/pathsphere.png" />
 
     <link rel="stylesheet" href="faqs.css" />
-    <link rel="stylesheet" href="/styles/essential.css" />
+    <link rel="stylesheet" href="./styles/essential.css" />
   </head>
   <body>
     <main>
@@ -204,7 +204,7 @@ <h2 class="process__title title">FAQs</h2>
       
     </main>
 
-    <script src="/scripts/componentLoader.js"></script>
+    <script src="./scripts/componentLoader.js"></script>
     <script>
       prependComponent("Navbar");
       prependComponent('Cursor');
diff --git a/pages/jobs/jobs.html b/pages/jobs/jobs.html
index e34c69ac..23063eab 100644
--- a/pages/jobs/jobs.html
+++ b/pages/jobs/jobs.html
@@ -425,7 +425,7 @@ <h3 class="job-name">Cloud Engineer</h3>
                       <div class="company d-flex flex-row justify-content-start">
 
                         <h4 class="company-name">Samyak it sol</h4>
-                        <img class="comp-logo" src="/pages/jobs/job_images/data_science.jpeg">
+                        <img class="comp-logo" src="./pages/jobs/job_images/data_science.jpeg">
 
                       </div>
 
@@ -500,7 +500,7 @@ <h3 class="job-name">Sofware developer</h3>
                       <div class="company d-flex flex-row justify-content-start">
 
                         <h4 class="company-name">Design Studio</h4>
-                        <img class="comp-logo" src="/pages/jobs/job_images/design.jpg">
+                        <img class="comp-logo" src="./pages/jobs/job_images/design.jpg">
 
                       </div>
 
@@ -580,7 +580,7 @@ <h3 class="job-name">UI UX developer</h3>
                     <div class="company d-flex flex-row justify-content-start">
 
                       <h4 class="company-name">BB Tech Services</h4>
-                      <img class="comp-logo" src="/pages/jobs/job_images/download (2).png">
+                      <img class="comp-logo" src="./pages/jobs/job_images/download (2).png">
 
                     </div>
 
@@ -655,7 +655,7 @@ <h3 class="job-name">Blockchain developer</h3>
                     <div class="company d-flex flex-row justify-content-start">
 
                       <h4 class="company-name">Dev World Tech</h4>
-                      <img class="comp-logo" src="/pages/jobs/job_images/download.png">
+                      <img class="comp-logo" src="./pages/jobs/job_images/download.png">
 
                     </div>
 
@@ -735,7 +735,7 @@ <h3 class="job-name">Cloud Engineer</h3>
                   <div class="company d-flex flex-row justify-content-start">
 
                     <h4 class="company-name">Web consultancy Services</h4>
-                    <img class="comp-logo" src="/pages/jobs/job_images/fullstack.jpeg">
+                    <img class="comp-logo" src="./pages/jobs/job_images/fullstack.jpeg">
 
                   </div>
 
@@ -810,7 +810,7 @@ <h3 class="job-name">Backend developer</h3>
                   <div class="company d-flex flex-row justify-content-start">
 
                     <h4 class="company-name">Infotech Bytes</h4>
-                    <img class="comp-logo" src="/pages/jobs/job_images/innovation.png">
+                    <img class="comp-logo" src="./pages/jobs/job_images/innovation.png">
 
                   </div>
 
@@ -892,7 +892,7 @@ <h3 class="job-name">Sofware developer</h3>
     </div>
   
 
-    <script src="/scripts/componentLoader.js"></script>
+    <script src="./scripts/componentLoader.js"></script>
     <script>
       prependComponent('Navbar');
       prependComponent('Cursor');
diff --git a/pages/scholarship-feature/scholarships.css b/pages/scholarship-feature/scholarships.css
index 8f73845a..c4df5d18 100644
--- a/pages/scholarship-feature/scholarships.css
+++ b/pages/scholarship-feature/scholarships.css
@@ -1,5 +1,4 @@
 /* General body and typography settings */
-
 body {
     font-family: Arial, sans-serif;
     background-color: #f4f4f9;
@@ -17,6 +16,7 @@ p {
     text-align: center;
 }
 
+/* Scholarship container */
 .scholarship-container {
     display: flex;
     flex-wrap: wrap;
@@ -24,61 +24,54 @@ p {
     padding: 20px;
 }
 
- 
 /* Card styling */
 .card {
-    background: linear-gradient(145deg, #bc45c0, #09cff3); /* Blue and green gradient background */
+    background: linear-gradient(145deg, #f8f7f8, #f1f5f5); /* Blue and green gradient background */
     border-radius: 15px;
     box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25); 
     margin: 15px; /* Reduced margin */
     width: 270px; /* Slightly smaller width */
     padding: 15px; /* Reduced padding */
     transition: transform 0.4s ease, box-shadow 0.4s ease, background 0.3s ease;
-    color: #fff;
-    font-family: "Arial", sans-serif;
+    color: #0c0c0c;
     text-align: center;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
 }
 
-/* Card hover effect - turns pink on hover */
-
+/* Card hover effect */
 .card:hover {
-    transform: scale(1.08) rotateZ(2deg); 
+   
     box-shadow: 6px 6px 25px rgba(0, 0, 0, 0.5);
 }
 
 /* Card image styling */
-
 .card img {
     background-size: cover;
     background-repeat: no-repeat;
     border-radius: 10px;
     width: 100%;
-    height: 150px; /* Smaller image to reduce height */
+    height: 150px; /* Maintain smaller height */
     object-fit: cover;
     margin-bottom: 10px; /* Reduced margin below the image */
 }
 
 /* Card heading */
-
 .card h2 {
     font-size: 18px; /* Slightly smaller font */
-    color: #f9f9f9;
+    color: #1b1a1a;
 }
 
 /* Card paragraph */
-
 .card p {
-    color: #ccc;
+    color: #111111;
     font-size: 14px; /* Reduced font size */
     margin: 8px 0; /* Smaller margin */
     line-height: 1.4; /* Slightly tighter line spacing */
 }
 
 /* Button styling inside card */
-
 .card a,
 .card button {
     display: inline-block;
@@ -94,27 +87,14 @@ p {
 }
 
 /* Hover effect for buttons */
-
 .card a:hover,
 .card button:hover {
-    background-color:#8a2be2;
+    background-color: #8a2be2; /* Change hover color */
     transform: translateY(-6px); 
     box-shadow: 0 8px 18px rgba(0, 0, 0, 0.6);
 }
 
-/* Card transition effects */
-
-.card {
-    perspective: 1000px;
-}
-
-.card:hover {
-    transform: rotateY(3deg) scale(1.05);
-    transition: transform 0.5s ease;
-}
-
-/* Input focus effect - turns background purple */
-
+/* Input focus effect */
 input:focus {
     background-color: #8a2be2; /* Purple background on focus */
     outline: none; /* Removes default outline */
@@ -122,12 +102,7 @@ input:focus {
     transition: background-color 0.3s ease; /* Smooth transition to purple */
 }
 
-
-
-
-
 /* Modal styling */
-
 .modal {
     display: none;
     position: fixed;
@@ -141,9 +116,7 @@ input:focus {
     align-items: center;
 }
 
-
 /* Modal content box */
-
 .modal-content {
     background-color: white;
     padding: 20px;
@@ -152,9 +125,7 @@ input:focus {
     width: 90%;
 }
 
-
 /* Close button for modal */
-
 .close-btn {
     float: right;
     cursor: pointer;
@@ -170,17 +141,13 @@ input:focus {
     margin-top: 0;
 }
 
-
 /* Modal text */
-
 .modal p {
     font-size: 16px;
     color: #333;
 }
 
-
 /* Modal apply button */
-
 .modal a {
     display: inline-block;
     margin-top: 10px;
@@ -196,9 +163,7 @@ input:focus {
     background-color: #1c6057;
 }
 
-
 /* Search bar styling */
-
 .search-bar {
     display: flex;
     align-items: center;
@@ -221,6 +186,7 @@ input:focus {
     border: 1px solid #1c6057;
 }
 
+/* Pagination */
 .pagination {
     display: flex;
     justify-content: center;
@@ -253,4 +219,4 @@ input:focus {
     margin: 0 15px;
     font-size: 1.1em;
     font-weight: bold;
-}
\ No newline at end of file
+}
diff --git a/pages/scholarship-feature/scholarships.html b/pages/scholarship-feature/scholarships.html
index f4e47e20..50298914 100644
--- a/pages/scholarship-feature/scholarships.html
+++ b/pages/scholarship-feature/scholarships.html
@@ -1,66 +1,275 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
-    <link rel="stylesheet" href="/styles/styles.css" />
+    <link rel="stylesheet" href="./styles/styles.css" />
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Scholarships</title>
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
     <link rel="stylesheet" href="./scholarships.css" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.9/xlsx.full.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/js/all.min.js"></script>
 </head>
 
 <body>
-
+    <!-- <style>
+        /* Body and Main Structure */
+/* Body and Main Structure
+body {
+    margin: 0;
+    padding: 0;
+    font-family: 'Times New Roman', serif;
+    background-color: #f0eae3; /* Light cream background */
+    color: #3e3e3e; /* Darker text color for better readability */
+}
+
+main {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 40px;
+}
+
+/* Hero Section */
+.hero {
+    background-color: #4a6e91; /* Soft blue */
+    color: white;
+    text-align: center;
+    padding: 60px;
+    border-radius: 10px;
+    margin-bottom: 30px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Subtle shadow */
+}
+
+.hero h1 {
+    font-size: 3.5rem;
+    margin-bottom: 15px;
+}
+
+.hero p {
+    font-size: 1.2rem;
+}
+
+/* Search Bar */
+.search-bar {
+    text-align: center;
+    margin: 30px 0;
+}
+
+#searchInput {
+    width: 70%;
+    padding: 15px;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    font-size: 1rem;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Soft shadow */
+}
+
+/* Scholarship Cards */
+.scholarship-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 30px;
+    margin-top: 30px;
+}
+
+.card {
+    background-color: #fefefe; /* Off-white background for cards */
+    border: 1px solid #dcdcdc;
+    border-radius: 10px;
+    padding: 25px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    transition: transform 0.3s, box-shadow 0.3s;
+}
+
+.card:hover {
+    transform: translateY(-3px); /* Slight lift effect on hover */
+    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
+}
+
+.card img {
+    width: 100%; /* Ensure image takes full width */
+    height: auto; /* Maintain aspect ratio */
+    border-radius: 8px;
+    margin-bottom: 15px;
+    object-fit: cover; /* Ensures the image covers the area */
+}
+
+.card h2 {
+    font-size: 1.8rem;
+    margin: 10px 0;
+    color: #dde7f2; /* Classic blue for headings */
+}
+
+.buttons {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 15px;
+}
+
+a {
+    text-decoration: none;
+    color: white;
+    background-color: #dae0e6; /* Soft blue */
+    padding: 10px 15px;
+    border-radius: 5px;
+    transition: background-color 0.3s;
+}
+
+a:hover {
+    background-color: #bbc1c7; /* Darker shade on hover */
+}
+
+.read-more {
+    background-color: #f7f9f5; /* Soft green */
+    color: white;
+    border: none;
+    padding: 10px 15px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+.read-more:hover {
+    background-color: #fafcf9; /* Darker shade on hover */
+}
+
+/* Pagination */
+.pagination {
+    text-align: center;
+    margin-top: 30px;
+}
+
+.pagination button {
+    background-color: #f3f6f8; /* Soft blue */
+    color: white;
+    border: none;
+    padding: 12px 20px;
+    margin: 0 5px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+.pagination button:disabled {
+    background-color: #ccc; /* Greyed out color */
+}
+
+.pagination button:hover:not(:disabled) {
+    background-color: #eaebed; /* Darker shade on hover */
+}
+
+/* Modal Styling */
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.7);
+    justify-content: center;
+    align-items: center;
+}
+
+.modal-content {
+    background-color: white;
+    padding: 40px;
+    border-radius: 10px;
+    max-width: 600px;
+    width: 90%;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.close-btn {
+    background-color: #faf4f4;
+    border: none;
+    color: white;
+    padding: 10px 15px;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+/* Like and Comment Section */
+.interaction {
+    margin-top: 20px;
+}
+
+.like-btn {
+    background-color: #080808;
+    color: white;
+    border: none;
+    padding: 10px 15px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+.like-btn:hover {
+    background-color: #060606; /* Darker blue on hover */
+}
+
+/* Comments Section */
+.comments-section {
+    margin-top: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start; /* Align to the left */
+}
+
+.comment-input-container {
+    width: 100%;
+    margin: 10px 0;
+}
+
+textarea.comment-input {
+    width: 100%;
+    height: 80px; /* Adjust height as needed */
+    margin: 10px 0;
+    padding: 12px;
+    border-radius: 5px;
+    border: 1px solid #ddd;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    resize: none; /* Prevent resizing */
+}
+
+/* Miscellaneous */
+.circle-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin-top: 40px;
+}
+
+.circle {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    background-color: #4a6e91; /* Soft blue */
+    margin: 5px;
+} */
+
+
+    </style> -->
     <div class="gtranslate_wrapper"></div>
     <script>
-    window.gtranslateSettings = {
-      "default_language":"en",
-      "detect_browser_language":true,
-      "wrapper_selector":".gtranslate_wrapper"
-    }
+        window.gtranslateSettings = {
+            "default_language": "en",
+            "detect_browser_language": true,
+            "wrapper_selector": ".gtranslate_wrapper"
+        };
     </script>
-    <script 
-      src="https://cdn.gtranslate.net/widgets/latest/float.js"
-      defer
-    ></script>
-<main>
-    <section class="hero">
-        <h1>Scholarships</h1>
-        <p class="subtext">
-            Find scholarships that match your academic profile and needs.
-        </p>
-    </section>
-
-    <div class="search-bar">
-        <input type="text" id="searchInput" placeholder="Search for scholarships..." aria-label="Search Scholarships" onkeyup="filterScholarships()" />
-    </div>
-
-    <div id="scholarship-container" class="scholarship-container"></div>
-
-    <div class="pagination">
-        <button id="prev-btn" onclick="changePage(-1)">Previous</button>
-        <span id="page-info"></span>
-        <button id="next-btn" onclick="changePage(1)">Next</button>
-    </div>
-
-    <div id="scholarship-modal" class="modal">
-        <div class="modal-content">
-            <span id="close-modal" class="close-btn">&times;</span>
-            <div id="modal-info"></div>
+    <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
 
     <main>
         <section class="hero">
             <h1>Scholarships</h1>
-            <p class="subtext">
-                Find scholarships that match your academic profile and needs.
-            </p>
+            <p class="subtext">Find scholarships that match your academic profile and needs.</p>
         </section>
 
         <div class="search-bar">
-            <input type="text" id="searchInput" placeholder="Search for scholarships..." aria-label="Search Scholarships" onkeyup="filterScholarships()" />
-
+            <input type="text" id="searchInput" placeholder="Search for scholarships..." 
+                   aria-label="Search Scholarships" onkeyup="filterScholarships()" />
         </div>
 
         <div id="scholarship-container" class="scholarship-container"></div>
@@ -77,203 +286,138 @@ <h1>Scholarships</h1>
                 <div id="modal-info"></div>
             </div>
         </div>
-        
-        <script>
-            const container = document.getElementById('scholarship-container');
-            const modal = document.getElementById('scholarship-modal');
-            const closeModal = document.getElementById('close-modal');
-            const modalInfo = document.getElementById('modal-info');
-            const pageInfo = document.getElementById('page-info');
-            const prevBtn = document.getElementById('prev-btn');
-            const nextBtn = document.getElementById('next-btn');
-            let scholarships = [];
-            let currentPage = 1;
-            const scholarshipsPerPage = 9;
-
-            function displayScholarships(data) {
-                scholarships = data;
-                container.innerHTML = '';
-                const totalPages = Math.ceil(scholarships.length / scholarshipsPerPage);
-
-                if (currentPage > totalPages) {
-                    currentPage = totalPages;
-                }
-
-                const startIndex = (currentPage - 1) * scholarshipsPerPage;
-                const endIndex = startIndex + scholarshipsPerPage;
-
-                const scholarshipsToDisplay = scholarships.slice(startIndex, endIndex);
-
-                scholarshipsToDisplay.forEach((scholarship, index) => {
-                    const card = document.createElement('div');
-                    card.classList.add('card');
-
-                    card.innerHTML = `
+    </main>
+
+    <script>
+        const container = document.getElementById('scholarship-container');
+        const modal = document.getElementById('scholarship-modal');
+        const closeModal = document.getElementById('close-modal');
+        const modalInfo = document.getElementById('modal-info');
+        const pageInfo = document.getElementById('page-info');
+        const prevBtn = document.getElementById('prev-btn');
+        const nextBtn = document.getElementById('next-btn');
+
+        let scholarships = [];
+        let currentPage = 1;
+        const scholarshipsPerPage = 9;
+
+        function displayScholarships(data) {
+            scholarships = data;
+            container.innerHTML = '';
+            const totalPages = Math.ceil(scholarships.length / scholarshipsPerPage);
+
+            if (currentPage > totalPages) currentPage = totalPages;
+
+            const startIndex = (currentPage - 1) * scholarshipsPerPage;
+            const endIndex = startIndex + scholarshipsPerPage;
+            const scholarshipsToDisplay = scholarships.slice(startIndex, endIndex);
+
+            scholarshipsToDisplay.forEach((scholarship, index) => {
+                const card = document.createElement('div');
+                card.classList.add('card');
+                card.innerHTML = `
                     <img src="${scholarship.image}" alt="${scholarship.scholarship_name}">
                     <h2>${scholarship.scholarship_name}</h2>
                     <p>${scholarship.listing_awards}</p>
                     <div class="buttons">
                         <a href="${scholarship.apply_now}" target="_blank">Apply Now</a>
                         <button class="read-more" data-index="${startIndex + index}">Read More</button>
+                    </div>
+                    <div class="interaction">
+                        <button class="like-btn" onclick="increaseLikes(this)">
+                            <i class="fa fa-thumbs-up"></i> Like <span class="like-count">0</span>
+                        </button>
+                        <div class="comments-section">
+                            <h4>Comments:</h4>
+                            <ul class="comments-list"></ul>
+                            <textarea class="comment-input" placeholder="Add a comment..."></textarea>
+                            <button class="submit-comment" onclick="submitComment(this)">Post</button>
                         </div>
-                    <!-- Likes and Comments functionality -->
-    <div class="interaction">
-        <!-- Likes Button -->
-        <button class="like-btn" onclick="increaseLikes(this)">
-            <i class="fa fa-thumbs-up"></i> Like <span class="like-count">0</span>
-        </button>
-
-        <!-- Comments Section -->
-        <div class="comments-section">
-            <h4>Comments:</h4>
-            <ul class="comments-list">
-                <!-- Comments will be appended here -->
-            </ul>
-            <textarea placeholder="Add a comment..." class="comment-input"></textarea>
-            <button class="submit-comment" onclick="submitComment(this)">Post</button>
-        </div>
                     </div>
                 `;
+                container.appendChild(card);
+            });
 
-                    container.appendChild(card);
-                });
-
-                pageInfo.textContent = `Page ${currentPage} of ${totalPages}`;
-                prevBtn.disabled = currentPage === 1;
-                nextBtn.disabled = currentPage === totalPages;
+            pageInfo.textContent = `Page ${currentPage} of ${totalPages}`;
+            prevBtn.disabled = currentPage === 1;
+            nextBtn.disabled = currentPage === totalPages;
 
-                document.querySelectorAll('.read-more').forEach((button) => {
-                    button.addEventListener('click', (e) => {
-                        const index = e.target.getAttribute('data-index');
-                        showDetails(scholarships[index]);
-                    });
+            document.querySelectorAll('.read-more').forEach(button => {
+                button.addEventListener('click', (e) => {
+                    const index = e.target.getAttribute('data-index');
+                    showDetails(scholarships[index]);
                 });
-            }
-
-            function filterScholarships() {
-                const input = document.getElementById('searchInput');
-                const filter = input.value.toLowerCase();
-                const filteredScholarships = scholarships.filter(scholarship =>
-                    scholarship.scholarship_name.toLowerCase().includes(filter)
-                );
+            });
+        }
 
-                currentPage = 1;
-                displayScholarships(filteredScholarships);
-            }
+        function filterScholarships() {
+            const input = document.getElementById('searchInput').value.toLowerCase();
+            const filtered = scholarships.filter(s => 
+                s.scholarship_name.toLowerCase().includes(input)
+            );
+            currentPage = 1;
+            displayScholarships(filtered);
+        }
 
-            function showDetails(scholarship) {
-                modalInfo.innerHTML = `
+        function showDetails(scholarship) {
+            modalInfo.innerHTML = `
                 <h2>${scholarship.scholarship_name}</h2>
                 <p><strong>Award:</strong> ${scholarship.listing_awards}</p>
                 <p><strong>Eligibility:</strong> ${scholarship.eligibility}</p>
                 <p><strong>Start Date:</strong> ${scholarship.start_date}</p>
                 <p><strong>Deadline:</strong> ${scholarship.deadline}</p>
-                <p><strong>Last Date:</strong> ${scholarship.last_date}</p>
                 <a href="${scholarship.apply_now}" target="_blank">Apply Now</a>
             `;
+            modal.style.display = 'flex';
+        }
 
-                modal.style.display = 'flex';
-            }
-
-            function fetchAndProcessExcel() {
-                const fileUrl = 'buddy4study.xlsx';
-
-                fetch(fileUrl)
-                    .then((response) => response.arrayBuffer())
-                    .then((data) => {
-                        const workbook = XLSX.read(data, {
-                            type: 'array'
-                        });
-
-                        const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
-                        const jsonData = XLSX.utils.sheet_to_json(firstSheet, {
-                            header: 1,
-                        });
-
-                        scholarships = jsonData.slice(1).map((row) => ({
-                            apply_now: row[0],
-                            image: row[1],
-                            scholarship_name: row[2],
-                            listing_awards: row[3],
-                            eligibility: row[4],
-                            start_date: row[5],
-                            deadline: row[6],
-                            last_date: row[7],
-                        }));
-
-                        console.log('Loaded Scholarships:', scholarships);
-                        displayScholarships(scholarships);
-                    })
-                    .catch((error) =>
-                        console.error('Error loading the Excel file:', error)
-                    );
-            }
+        function changePage(direction) {
+            currentPage += direction;
+            displayScholarships(scholarships);
+        }
 
-            function changePage(direction) {
-                const totalPages = Math.ceil(scholarships.length / scholarshipsPerPage);
-                currentPage += direction;
+        closeModal.addEventListener('click', () => {
+            modal.style.display = 'none';
+        });
 
-                if (currentPage < 1) currentPage = 1;
-                if (currentPage > totalPages) currentPage = totalPages;
+        function increaseLikes(button) {
+            const likeCount = button.querySelector('.like-count');
+            likeCount.textContent = parseInt(likeCount.textContent) + 1;
+        }
 
-                displayScholarships(scholarships);
+        function submitComment(button) {
+            const input = button.previousElementSibling;
+            const comment = input.value.trim();
+            if (comment) {
+                const list = button.closest('.comments-section').querySelector('.comments-list');
+                const listItem = document.createElement('li');
+                listItem.textContent = comment;
+                list.appendChild(listItem);
+                input.value = '';
             }
+        }
 
-            closeModal.addEventListener('click', () => {
-                modal.style.display = 'none';
-            });
-
-            window.addEventListener('click', (e) => {
-                if (e.target === modal) {
-                    modal.style.display = 'none';
-                }
-            });
-
-            document.addEventListener('DOMContentLoaded', fetchAndProcessExcel);
-        </script>
-        
-    </main>
-
-    <script src="/scripts/componentLoader.js"></script>
-    <script>
-        prependComponent('Navbar');
-        prependComponent('Cursor');
-        prependComponent('ScrollToTop');
-        appendComponent('Footer');
-        appendComponent('ChatBot');
-        waitTillComponentsLoaded();
-
-        function toggleDetails(button) {
-            const details = button.previousElementSibling;
-            if (details.style.display === 'none') {
-                details.style.display = 'block';
-                button.textContent = 'Read Less';
-            } else {
-                details.style.display = 'none';
-                button.textContent = 'Read More';
-            }
+        function fetchAndProcessExcel() {
+            fetch('buddy4study.xlsx')
+                .then(response => response.arrayBuffer())
+                .then(data => {
+                    const workbook = XLSX.read(data, { type: 'array' });
+                    const sheet = workbook.Sheets[workbook.SheetNames[0]];
+                    const jsonData = XLSX.utils.sheet_to_json(sheet, { header: 1 });
+                    scholarships = jsonData.slice(1).map(row => ({
+                        apply_now: row[0],
+                        image: row[1],
+                        scholarship_name: row[2],
+                        listing_awards: row[3],
+                        eligibility: row[4],
+                        start_date: row[5],
+                        deadline: row[6]
+                    }));
+                    displayScholarships(scholarships);
+                });
         }
+
+        fetchAndProcessExcel();
     </script>
-    <div class="circle-container">
-        <div class="circle"></div>
-        <div class="circle"></div>
-        <div class="circle"></div>
-        <div class="circle"></div>
-        <div class="circle"></div>
-        <div class="circle"></div>
-        <div class="circle"></div>
-        <div class="circle"></div>
-        <div class="circle"></div>
-        <div class="circle"></div>
-        <div class="circle"></div>
-        <div class="circle"></div>
-        <div class="circle"></div>
-        <div class="circle"></div>
-        <div class="circle"></div>
-        <div class="circle"></div>
-        <div class="circle"></div>
-        <div class="circle"></div>
-    </div>
 </body>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/pages/scholarships/scholarships.html b/pages/scholarships/scholarships.html
index 549259d4..b7d75dd3 100644
--- a/pages/scholarships/scholarships.html
+++ b/pages/scholarships/scholarships.html
@@ -29,7 +29,7 @@
       <section class="hero">
         <h1>Scholarships</h1>
 
-        <p>Find scholarships that match your academic profile and needs.</p>
+        <p>Find scholarships that match your academic profile and needss.</p>
       </section>
 
       <div class="search-bar">
diff --git a/scripts/componentLoader.js b/scripts/componentLoader.js
index fe96d738..c3c03bc9 100644
--- a/scripts/componentLoader.js
+++ b/scripts/componentLoader.js
@@ -6,7 +6,7 @@ const fetchComponent = async (componentName) => {
   try {
     // fetch content from server
     const res = await fetch(
-      `/components/${componentName}/${componentName}.html`
+      `./components/${componentName}/${componentName}.html`
     );
 
     // Check if the response is OK