diff --git a/frontend/index.html b/frontend/index.html
index 1e56c24..ec894fd 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -7,25 +7,230 @@
 
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
-    <link
-      rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
-    />
+    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
+    <style>
+      /* General Styles */
+      body {
+        font-family: 'Poppins', sans-serif;
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
 
-    <link rel="stylesheet" href="styles.css" />
+      /* Navigation Bar */
+      .navbar {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        background-color: #333;
+        padding: 15px;
+        color: white;
+      }
+
+      .navbar .logo img {
+        height: 50px;
+      }
+
+      .nav-links {
+        list-style: none;
+        display: flex;
+      }
+
+      .nav-links li {
+        margin: 0 15px;
+      }
+
+      .nav-links a {
+        color: white;
+        text-decoration: none;
+        transition: color 0.3s;
+      }
+
+      .nav-links a:hover {
+        color: #61dafb;
+      }
+
+      .btn {
+        padding: 10px 20px;
+        border: none;
+        background-color: #61dafb;
+        color: white;
+        cursor: pointer;
+        transition: background-color 0.3s;
+      }
+
+      .btn:hover {
+        background-color: #4db8e6;
+      }
+
+      /* Hero Section */
+      .hero-section {
+        text-align: center;
+        padding: 100px 20px;
+        background-color: #f4f4f4;
+      }
+
+      /* Course Recommendations Section */
+      .course-recommendations {
+        padding: 40px 20px;
+        text-align: center;
+      }
+
+      .recommended-courses {
+        display: flex;
+        justify-content: center;
+        flex-wrap: wrap;
+      }
+
+      .course-card {
+        border: 1px solid #ddd;
+        border-radius: 8px;
+        margin: 10px;
+        overflow: hidden;
+        width: 250px;
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+      }
+
+      .course-thumbnail {
+        width: 100%;
+        height: auto;
+      }
+
+      .course-info {
+        padding: 15px;
+      }
+
+      .btn-secondary {
+        background-color: #61dafb;
+        border: none;
+        padding: 10px;
+        cursor: pointer;
+        transition: background-color 0.3s;
+      }
+
+      .btn-secondary:hover {
+        background-color: #4db8e6;
+      }
+
+      /* Search Bar */
+      .search-container {
+        margin: 20px 0;
+        display: flex;
+        justify-content: center;
+      }
+
+      .search-container input {
+        padding: 10px;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        width: 300px;
+        margin-right: 10px;
+      }
+
+      .search-container button {
+        padding: 10px 15px;
+        border: none;
+        background-color: #61dafb;
+        color: white;
+        cursor: pointer;
+        transition: background-color 0.3s;
+      }
+
+      .search-container button:hover {
+        background-color: #4db8e6;
+      }
+
+      /* Footer */
+      .site-footer {
+        background-color: #282c34;
+        color: white;
+        padding: 40px 20px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+
+      .footer-container {
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+        max-width: 1200px;
+        margin: 0 auto;
+      }
+
+      .footer-section {
+        flex: 1;
+        margin: 0 20px;
+      }
+
+      .footer-section h3 {
+        margin-bottom: 20px;
+      }
+
+      .footer-section ul {
+        list-style: none;
+        padding: 0;
+      }
+
+      .footer-section ul li {
+        margin: 10px 0;
+      }
+
+      .footer-section ul li a {
+        color: #61dafb;
+        text-decoration: none;
+      }
+
+      .footer-section ul li a:hover {
+        text-decoration: underline;
+      }
+
+      .social-icons {
+        display: flex;
+        justify-content: flex-start;
+      }
+
+      .social-icon {
+        color: white;
+        margin-right: 15px;
+        font-size: 24px;
+      }
+
+      .footer-bottom {
+        text-align: center;
+        margin-top: 20px;
+      }
+
+      /* Responsive styles */
+      @media (max-width: 768px) {
+        .footer-container {
+          flex-direction: column;
+          align-items: center;
+        }
+
+        .footer-section {
+          margin: 10px 0;
+        }
+
+        .recommended-courses {
+          flex-direction: column;
+        }
+      }
+    </style>
   </head>
   <body>
     <!-- Navigation Bar -->
     <nav class="navbar">
       <div class="logo">
         <a href="index.html">
-          <img src="./Images/codex100-logo.png" alt="codeX100 logo">
+          <img src="./Images/codex100-logo.png" alt="codeX100 logo" />
         </a>
       </div>
       <div class="hamburger" id="hamburger">
         <i class="fas fa-bars"></i>
       </div>
-      <ul class="nav-links">  
+      <ul class="nav-links">
         <li><a href="#">Home</a></li>
         <li><a href="course.html">Courses</a></li>
         <li><a href="#">Notes</a></li>
@@ -43,35 +248,21 @@ <h2>Welcome to codeX100</h2>
       <a href="#" class="btn-primary">Explore Courses</a>
     </section>
 
-     <!-- Course Recommendations Section -->
-     <section class="course-recommendations">
+    <!-- Course Recommendations Section -->
+    <section class="course-recommendations">
       <h2>Your Courses</h2>
       <div class="course-list">
-        <!-- Placeholder for purchased courses -->
         <p>You haven't bought any courses yet.</p>
       </div>
-    
+
       <h3>Recommended Courses</h3>
+      <div class="search-container">
+        <input type="text" placeholder="Search Notes..." />
+        <button>Search</button>
+      </div>
       <div class="recommended-courses">
-        <!-- Example courses with thumbnails -->
-        <div class="course-card">
-          <img src="./Images/c++-thumbnail.jpg" alt="Basics of C++" class="course-thumbnail">
-          <div class="course-info">
-            <h4>Basics of C++</h4>
-            <p>Learn the fundamentals of C++ programming.</p>
-            <button class="btn-secondary">View Course</button>
-          </div>
-        </div>
         <div class="course-card">
-          <img src="./Images/java-thumbnail.jpg" alt="Data Structures in Java" class="course-thumbnail">
-          <div class="course-info">
-            <h4>Data Structures in Java</h4>
-            <p>Master DSA with Java from basics to advanced.</p>
-            <button class="btn-secondary">View Course</button>
-          </div>
-        </div>
-        <div class="course-card">
-          <img src="./Images/c++-thumbnail.jpg" alt="Basics of C++" class="course-thumbnail">
+          <img src="./Images/c++-thumbnail.jpg" alt="Basics of C++" class="course-thumbnail" />
           <div class="course-info">
             <h4>Basics of C++</h4>
             <p>Learn the fundamentals of C++ programming.</p>
@@ -79,7 +270,7 @@ <h4>Basics of C++</h4>
           </div>
         </div>
         <div class="course-card">
-          <img src="./Images/java-thumbnail.jpg" alt="Data Structures in Java" class="course-thumbnail">
+          <img src="./Images/java-thumbnail.jpg" alt="Data Structures in Java" class="course-thumbnail" />
           <div class="course-info">
             <h4>Data Structures in Java</h4>
             <p>Master DSA with Java from basics to advanced.</p>
@@ -88,6 +279,8 @@ <h4>Data Structures in Java</h4>
         </div>
       </div>
     </section>
+
+    <!-- Enhanced Footer -->
     <footer class="site-footer">
       <div class="footer-container">
         <div class="footer-section">
@@ -101,28 +294,13 @@ <h3>Important Links</h3>
         <div class="footer-section">
           <h3>Connect With Us</h3>
           <div class="social-icons">
-            <a
-              href="https://linkedin.com/"
-              target="_blank"
-              rel="noopener noreferrer"
-              class="social-icon linkedin"
-            >
+            <a href="https://linkedin.com/" target="_blank" rel="noopener noreferrer" class="social-icon linkedin">
               <i class="fab fa-linkedin"></i>
             </a>
-            <a
-              href="https://instagram.com/"
-              target="_blank"
-              rel="noopener noreferrer"
-              class="social-icon instagram"
-            >
+            <a href="https://instagram.com/" target="_blank" rel="noopener noreferrer" class="social-icon instagram">
               <i class="fab fa-instagram"></i>
             </a>
-            <a
-              href="https://youtube.com/"
-              target="_blank"
-              rel="noopener noreferrer"
-              class="social-icon youtube"
-            >
+            <a href="https://youtube.com/" target="_blank" rel="noopener noreferrer" class="social-icon youtube">
               <i class="fab fa-youtube"></i>
             </a>
           </div>
@@ -132,9 +310,5 @@ <h3>Connect With Us</h3>
         <p>&copy; 2024 codeX100. All rights reserved.</p>
       </div>
     </footer>
-
-    <script src="script.js"></script>
-  </body> 
-
+  </body>
 </html>
-