diff --git a/components/Navbar/Navbar.html b/components/Navbar/Navbar.html
index e4ea1ce8..9b961235 100644
--- a/components/Navbar/Navbar.html
+++ b/components/Navbar/Navbar.html
@@ -24,8 +24,7 @@
       <nav id="navbar">
         <!-- Add an ID to the nav -->
         <a href="/index.html" class="logo"
-          ><img src="/images/logo.png" alt="PathSphere Logo" /> PathSphere</a
-        >
+          ><img src="/images/logo.png" alt="PathSphere Logo" /> PathSphere</a>
         <button class="hamburger">
           <span></span>
           <span></span>
@@ -35,10 +34,12 @@
           <ul id="tabs">
             <li class="tab"><a href="/index.html">Home</a></li>
             <li class="tab">
-              <a href="/pages/scholarships/scholarships.html">Scholarships</a>
+              <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/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>
           </ul>
diff --git a/index.html b/index.html
index 9f240752..ff2221da 100644
--- a/index.html
+++ b/index.html
@@ -22,7 +22,7 @@
         <h1>Welcome to PathSphere</h1>
         <p>Your gateway to educational and professional resources</p>
         <div class="search-container">
-          <a href="/pages/scholarships/scholarships.html" class="btn">
+          <a href="/pages/scholarship-feature/scholarships.html" class="btn">
             <i class="fa-solid fa-magnifying-glass"></i>
             Find Scholarships
           </a>
@@ -39,7 +39,7 @@ <h1>Welcome to PathSphere</h1>
         <img src="/images/sicon.png" alt="Scholarships Icon">
         <h2>Scholarships</h2>
         <p>Discover scholarships tailored to your needs and academic performance.</p>
-        <a href="/pages/scholarships/scholarships.html" class="btn">Explore</a>
+        <a href="/pages/scholarship-feature/scholarships.html" class="btn">Explore</a>
       </div>
       <div class="feature">
         <img src="/images/jicon.png" alt="Jobs Icon">
@@ -130,7 +130,7 @@ <h6 class="font-weight-bold my-3">Computer Science Student at IIT Delhi</h6>
                 </ul>
                 <p>
                   <i class="fas fa-quote-left pe-2"></i>
-                  PathSphere helped me secure a prestigious scholarship that covered my entire tuition at IIT Delhi. The platform's scholarship matching system and application guidance were invaluable. I'm especially grateful for the mentorship community that helped me prepare for my interviews.
+                  PathSphere helped me secure a prestigious that covered my entire tuition at IIT Delhi. The platform's scholarship matching system and application guidance were invaluable. I'm especially grateful for the mentorship community that helped me prepare for my interviews.
                 </p>
               </div>
             </div>
@@ -208,4 +208,4 @@ <h6 class="font-weight-bold my-3">EdTech Professional at Byju's</h6>
 
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/pages/scholarship-feature/buddy4study.xlsx b/pages/scholarship-feature/buddy4study.xlsx
new file mode 100644
index 00000000..abd1d2ab
Binary files /dev/null and b/pages/scholarship-feature/buddy4study.xlsx differ
diff --git a/pages/scholarship-feature/scholarships.css b/pages/scholarship-feature/scholarships.css
new file mode 100644
index 00000000..d703cf99
--- /dev/null
+++ b/pages/scholarship-feature/scholarships.css
@@ -0,0 +1,215 @@
+body {
+  font-family: Arial, sans-serif;
+  background-color: #f4f4f9;
+  margin: 0;
+  padding: 0;
+}
+
+h1 {
+  text-align: center;
+  color: #333;
+  margin-top: 0;
+}
+p {
+  text-align: center;
+}
+.scholarship-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  padding: 20px;
+}
+
+.card {
+  background-color: white;
+  border-radius: 15px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  margin: 15px;
+  width: 300px; /* Adjusted width for smaller card */
+  transition: transform 0.3s, box-shadow 0.3s;
+  background-color: var(--primary-color);
+  color: black;
+  font-family: "Arial", sans-serif;
+  border-radius: 10px;
+  overflow: hidden;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Hover effect on card */
+.card:hover {
+  transform: scale(1.05); /* Slightly increase size on hover */
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Add a shadow on hover */
+}
+
+.scholarship-image {
+  width: 100%;
+  height: 140px; /* Reduced height */
+  object-fit: cover;
+}
+
+.scholarship-content {
+  padding: 20px;
+}
+
+.scholarship-content h2 {
+  font-size: 18px; /* Reduced font size for scholarship name */
+  font-weight: bold;
+  margin-bottom: 15px;
+  color: #333;
+}
+
+.scholarship-content p {
+  font-size: 14px;
+  color: #555;
+  margin: 5px 0;
+}
+
+.scholarship-content p strong {
+  font-weight: bold;
+}
+
+.apply-btn {
+  margin-top: 10px;
+  padding: 10px 15px;
+  font-size: 14px;
+  border-radius: 5px;
+  width: 150px;
+}
+
+.scholarship-item .apply-btn {
+  display: inline-block;
+  background-color: #ff9800;
+  color: white;
+  padding: 10px 15px;
+  border-radius: 5px;
+  text-decoration: none;
+  font-weight: bold;
+  transition: background-color 0.3s, transform 0.3s;
+}
+
+.scholarship-item .apply-btn:hover {
+  background-color: #ffb74d;
+  transform: translateY(-3px);
+}
+
+.card img {
+  border-radius: 10px;
+  width: 100%; /* Keeping the width responsive */
+  height: 140px; /* Reduced height for smaller image */
+  object-fit: cover;
+}
+
+.card h2 {
+  font-size: 18px; /* Reduced font size for the scholarship name */
+  margin: 10px 0;
+}
+
+.card p {
+  color: #666;
+  font-size: 14px;
+  margin: 5px 0;
+}
+
+.card a,
+.card button {
+  display: inline-block;
+  margin-top: 10px;
+  padding: 10px 15px;
+  background-color: #248b6f;
+  color: white;
+  border-radius: 5px;
+  text-decoration: none;
+  border: none;
+  cursor: pointer;
+  font-size: 16px;
+  transition: background-color 0.2s ease;
+}
+
+.card a:hover,
+.card button:hover {
+  background-color: #1c6057;
+}
+
+.buttons {
+  margin-top: 15px;
+}
+
+.modal {
+  display: none;
+  position: fixed;
+  z-index: 1000;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  justify-content: center;
+  align-items: center;
+}
+
+.modal-content {
+  background-color: white;
+  padding: 20px;
+  border-radius: 10px;
+  max-width: 500px;
+  width: 90%;
+}
+
+.close-btn {
+  float: right;
+  cursor: pointer;
+  color: #aaa;
+  font-size: 24px;
+}
+
+.close-btn:hover {
+  color: #333;
+}
+
+.modal h2 {
+  margin-top: 0;
+}
+
+.modal p {
+  font-size: 16px;
+  color: #333;
+}
+
+.modal a {
+  display: inline-block;
+  margin-top: 10px;
+  padding: 10px 15px;
+  background-color: #248b6f;
+  color: white;
+  border-radius: 5px;
+  text-decoration: none;
+  transition: background-color 0.2s ease;
+}
+
+.modal a:hover {
+  background-color: #1c6057;
+}
+
+.search-bar {
+  display: flex;
+  align-items: center;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  overflow: hidden;
+  max-width: 400px;
+  margin: 20px auto;
+}
+
+.search-bar input {
+  border: none;
+  padding: 10px;
+  font-size: 16px;
+  flex: 1;
+}
+
+.search-bar input:focus {
+  outline: none;
+  border: 1px solid #007bff;
+}
diff --git a/pages/scholarship-feature/scholarships.html b/pages/scholarship-feature/scholarships.html
new file mode 100644
index 00000000..effec339
--- /dev/null
+++ b/pages/scholarship-feature/scholarships.html
@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Scholarships</title>
+    <!-- Added a favicon -->
+    <link
+      rel="icon"
+      type="image/x-icon"
+      href="/pathsphere/images/pathsphere.png"
+    />
+    <link rel="stylesheet" href="./scholarships.css" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.9/xlsx.full.min.js"></script>
+  </head>
+
+  <body>
+    <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 id="scholarship-modal" class="modal">
+        <div class="modal-content">
+          <span id="close-modal" class="close-btn">&times;</span>
+          <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");
+        let scholarships = []; // Global variable to store scholarship data
+
+        function displayScholarships(data) {
+          scholarships = data; // Stores the fetched scholarships
+          container.innerHTML = ""; // Clears the container
+
+          scholarships.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="${index}">Read More</button>
+                    </div>
+                `;
+
+            container.appendChild(card);
+          });
+
+          // Adds event listeners to Read More buttons
+          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 cards = container.getElementsByClassName("card");
+
+          Array.from(cards).forEach((card) => {
+            const title = card.querySelector("h2").textContent.toLowerCase();
+            card.style.display = title.includes(filter) ? "" : "none";
+          });
+        }
+
+        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";
+        }
+
+        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,
+              });
+
+              // Converts the extracted data to an array of objects
+              const 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)
+            );
+        }
+
+        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("Navbar", document.getElementById("navbar"));
+      prependComponent("Cursor");
+      prependComponent("ScrollToTop");
+      appendComponent("Footer");
+
+      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";
+        }
+      }
+    </script>
+  </body>
+</html>
diff --git a/scripts/componentLoader.js b/scripts/componentLoader.js
index 8692a4cf..6949e743 100644
--- a/scripts/componentLoader.js
+++ b/scripts/componentLoader.js
@@ -3,22 +3,25 @@ const fetchComponent = async (componentName) => {
     const res = await fetch(
       `/components/${componentName}/${componentName}.html`
     );
-    const html = await res.text();
-
-    const parser = new DOMParser();
 
-    const doc = parser.parseFromString(html, 'text/html');
+    // Check if the response is OK
+    if (!res.ok) {
+      throw new Error(`HTTP error! status: ${res.status}`);
+    }
 
-    const components = doc.body.querySelectorAll('body > :not(script)') || [];
+    const html = await res.text();
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(html, "text/html");
 
+    // Select components, styles, and scripts from the fetched HTML
+    const components = doc.body.querySelectorAll("body > :not(script)") || [];
     const styles = doc.querySelectorAll('link[rel="stylesheet"], style') || [];
-
-    const scripts = doc.querySelectorAll('script') || [];
+    const scripts = doc.querySelectorAll("script") || [];
 
     return [components, styles, scripts];
   } catch (e) {
     console.error(
-      'error while fetching component, please check if the given name is correct',
+      "Error while fetching component, please check if the given name is correct",
       e
     );
   }
@@ -39,7 +42,7 @@ const prependComponent = async (
   });
 
   scripts.forEach((script) => {
-    const scriptTag = document.createElement('script');
+    const scriptTag = document.createElement("script");
     scriptTag.src = script.src;
     document.body.appendChild(scriptTag);
   });
@@ -60,7 +63,7 @@ const appendComponent = async (
   });
 
   scripts.forEach((script) => {
-    const scriptTag = document.createElement('script');
+    const scriptTag = document.createElement("script");
     scriptTag.src = script.src;
     document.body.appendChild(scriptTag);
   });
@@ -81,7 +84,7 @@ const insertComponentBefore = async (
   });
 
   scripts.forEach((script) => {
-    const scriptTag = document.createElement('script');
+    const scriptTag = document.createElement("script");
     scriptTag.src = script.src;
     document.body.appendChild(scriptTag);
   });
@@ -102,8 +105,17 @@ const insertComponentAfter = async (
   });
 
   scripts.forEach((script) => {
-    const scriptTag = document.createElement('script');
+    const scriptTag = document.createElement("script");
     scriptTag.src = script.src;
     document.body.appendChild(scriptTag);
   });
 };
+
+// Optional: Export functions if you want to use them in other files
+// export {
+//   fetchComponent,
+//   prependComponent,
+//   appendComponent,
+//   insertComponentBefore,
+//   insertComponentAfter,
+// };