diff --git a/README.md b/README.md
index 746690b..1f3bf3c 100644
--- a/README.md
+++ b/README.md
@@ -1,64 +1,108 @@
-# Course Management API
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>codeX100 - Learn Programming</title>
+
+    <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:wght@300;400;600&display=swap" rel="stylesheet" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
+</head>
+<body style="font-family: 'Poppins', sans-serif; background-color: #f8f9fa; color: #333; margin: 0;">
+
+    <!-- Navigation Bar -->
+    <nav style="display: flex; justify-content: space-between; align-items: center; background-color: #343a40; padding: 15px 30px;">
+        <div class="logo">
+            <a href="index.html">
+                <img src="./Images/codex100-logo.png" alt="codeX100 logo" style="height: 40px;" />
+            </a>
+        </div>
+        <div class="hamburger" id="hamburger" style="display: none; font-size: 24px; color: #ffffff;">
+            <i class="fas fa-bars"></i>
+        </div>
+        <ul style="list-style: none; display: flex; margin: 0; padding: 0;">
+            <li><a href="#" style="color: #ffffff; text-decoration: none; margin: 0 15px;">Home</a></li>
+            <li><a href="course.html" style="color: #ffffff; text-decoration: none; margin: 0 15px;">Courses</a></li>
+            <li><a href="#" style="color: #ffffff; text-decoration: none; margin: 0 15px;">Notes</a></li>
+            <li><a href="IDE.html" style="color: #ffffff; text-decoration: none; margin: 0 15px;">IDE</a></li>
+            <li><a href="contact.html" style="color: #ffffff; text-decoration: none; margin: 0 15px;">Contact Us</a></li>
+            <li><a href="#" style="background-color: #f1c40f; color: #343a40; padding: 10px 15px; border-radius: 5px; text-decoration: none; font-weight: bold;">Sign Up</a></li>
+            <li><a href="login.html" style="background-color: #f1c40f; color: #343a40; padding: 10px 15px; border-radius: 5px; text-decoration: none; font-weight: bold;">Login</a></li>
+        </ul>
+    </nav>
+
+    <!-- Main Section -->
+    <section style="background: linear-gradient(to right, #007bff, #6610f2); color: #ffffff; padding: 80px 20px; text-align: center;">
+        <h2 style="font-size: 2.5rem; margin: 0;">Welcome to codeX100</h2>
+        <p style="font-size: 1.25rem;">Master programming with live classes and curated content</p>
+        <a href="#" style="background-color: #f1c40f; color: #343a40; padding: 15px 30px; border-radius: 5px; text-decoration: none; font-weight: bold;">Explore Courses</a>
+    </section>
+
+    <!-- Course Recommendations Section -->
+    <section style="padding: 40px 20px; text-align: center;">
+        <h2>Your Courses</h2>
+        <div class="course-list">
+            <p>You haven't bought any courses yet.</p>
+        </div>
+
+        <h3 style="margin-top: 40px;">Recommended Courses</h3>
+        <div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 20px;">
+            <!-- Example courses with thumbnails -->
+            <div style="background: #ffffff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px; width: 250px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); transition: transform 0.2s;">
+                <img src="./Images/c++-thumbnail.jpg" alt="Basics of C++" style="width: 100%; border-radius: 8px;" />
+                <div style="text-align: left; margin-top: 10px;">
+                    <h4 style="font-size: 1.5rem;">Basics of C++</h4>
+                    <p>Learn the fundamentals of C++ programming.</p>
+                    <button style="background-color: #007bff; color: white; border: none; padding: 10px; border-radius: 5px; cursor: pointer;">View Course</button>
+                </div>
+            </div>
+            <div style="background: #ffffff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px; width: 250px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); transition: transform 0.2s;">
+                <img src="./Images/java-thumbnail.jpg" alt="Data Structures in Java" style="width: 100%; border-radius: 8px;" />
+                <div style="text-align: left; margin-top: 10px;">
+                    <h4 style="font-size: 1.5rem;">Data Structures in Java</h4>
+                    <p>Master DSA with Java from basics to advanced.</p>
+                    <button style="background-color: #007bff; color: white; border: none; padding: 10px; border-radius: 5px; cursor: pointer;">View Course</button>
+                </div>
+            </div>
+            <!-- Additional Course Cards -->
+        </div>
+    </section>
+
+    <!-- Contact Us Section -->
+    <section style="background-color: #ffffff; padding: 40px 20px; text-align: center;">
+        <h2>Contact Us</h2>
+        <p>If you have any questions or need further assistance, feel free to reach out to us.</p>
+        <form style="max-width: 500px; margin: 0 auto;">
+            <input type="text" placeholder="Your Name" required style="width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ccc; border-radius: 5px;" />
+            <input type="email" placeholder="Your Email" required style="width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ccc; border-radius: 5px;" />
+            <textarea placeholder="Your Message" required style="width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ccc; border-radius: 5px;"></textarea>
+            <button type="submit" style="background-color: #007bff; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer;">Send Message</button>
+        </form>
+    </section>
+
+    <footer style="background-color: #343a40; color: #ffffff; padding: 20px 0; text-align: center;">
+        <div style="display: flex; justify-content: space-around; padding: 20px;">
+            <div>
+                <h3>Important Links</h3>
+                <ul style="list-style: none; padding: 0;">
+                    <li><a href="/about" style="color: #ffffff; text-decoration: none;">About Us</a></li>
+                    <li><a href="/privacy" style="color: #ffffff; text-decoration: none;">Privacy Policy</a></li>
+                    <li><a href="/terms" style="color: #ffffff; text-decoration: none;">Terms of Service</a></li>
+                </ul>
+            </div>
+            <div>
+                <h3>Connect With Us</h3>
+                <div style="display: flex; justify-content: center;">
+                    <a href="https://linkedin.com/" target="_blank" rel="noopener noreferrer" style="margin: 0 10px; color: #ffffff;">
+                        <i class="fab fa-linkedin"></i>
+                    </a>
+                    <a href="https://instagram.com/" target="_blank" rel="noopener noreferrer" style="margin: 0 10px; color: #ffffff;">
+                        <i class="fab fa-instagram"></i>
+                    </a>
+                    <a href="https://youtube
 
-This API provides a robust solution for managing courses, enabling users to create, read, update, and delete course information. 
 
-## Installation
 
-### With Docker
-
-<details>
-<summary>
-Click Me
-</summary>
-
-1. Clone the repository
-2. Use docker-compose to run the server
-
-```bash
-git clone https://github.com/arshadpatel/codeX100.git
-cd codeX100
-docker-compose up -d
-```
-
-</details>
-
-### Without Docker
-
-<details>
-<summary>
-Click Me
-</summary>
-
-1. Clone the repository
-2. Install the dependencies
-3. Run the server
-
-```bash
-git clone https://github.com/arshadpatel/codeX100.git
-cd codeX100
-cd backend
-pnpm install
-pnpm dev
-```
-
-</details>
-
-
-### NOTE: Setup environment variable in .env from .env.example
-
-## Usage
-To use the API, you can make HTTP requests to the endpoints provided.
-
-## Endpoints:
-- **POST /courses**: Add a new course (requires name, price, and description).
-- **GET /courses**: Retrieve a list of available courses.
-- **GET /courses/:id**: Retrieve details of a specific course.
-- **PUT /courses/:id**: Update an existing course's details.
-- **DELETE /courses/:id**: Remove a course from the system.
-
-## Validation:
-All endpoints ensure proper validation using zod for course data, including name, price, and description, to maintain data integrity. 
-
-## Contributing
-If you would like to contribute, please read our [Contributing Guide](CONTRIBUTING.md).
 
diff --git a/frontend/login.html b/frontend/login.html
index 239f20c..39517c8 100644
--- a/frontend/login.html
+++ b/frontend/login.html
@@ -1,141 +1,108 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Login Form</title>
-    <style>
-        body {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 100vh;
-            background-color: #f1f1f1;
-        }
-        .login-container {
-            background-color: white;
-            padding: 20px;
-            border-radius: 10px;
-            box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
-            max-width: 400px;
-            width: 100%;
-            text-align: center;
-        }
-        .login-container h2 {
-            margin-bottom: 20px;
-            font-weight: 700;
-            font-size: 34px;
-        }
-        .login-container input {
-            width: 94%;
-            padding: 10px;
-            margin: 10px 0;
-            border-radius: 5px;
-            border: 1px solid #ccc;
-        }
-        .login-container button {
-            width: 100%;
-            padding: 10px;
-            background-color: #007bff;
-            color: white;
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
-        }
-        .login-container button:hover {
-            background-color: hsl(211, 31%, 51%);
-        }
-        .social-login {
-            margin: 10px 0;
-            padding: 10px;
-            border-radius: 5px;
-            border: 1px solid #ccc;
-            cursor: pointer;
-        }
-        .social-login.google {
-            background-color: white;
-            border: 2px solid black;
-            font-weight: 600;
-            font-size: 20px;
-            color: black;
-        }
-        .social-login.github {
-            background-color: white;
-            border: 2px solid black;
-            font-weight: 600;
-            font-size: 20px;
-            color: black;
-        }
-        .login-container p {
-            margin-top: 10px;
-        }
-        .error-message {
-            color: red;
-            font-size: 14px;
-            margin: 5px 0;
-        }
-        #submit, #password, #email{
-            font-weight: 600;
-            font-size: 20px;
-        }
-       
-    </style>
-</head>
-<body>
-
-    <div class="login-container">
-        <h2>Login</h2>
-        <form id="loginForm">
-            <input type="email" id="email" placeholder="Email">
-            <div id="emailError" class="error-message"></div>
-            
-            <input type="password" id="password" placeholder="Password">
-            <div id="passwordError" class="error-message"></div>
-            
-            <button type="submit" id="submit">Login</button>
-        </form>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>codeX100 - Learn Programming</title>
 
-        <button class="social-login google">Sign In with Google</button>
-        <button class="social-login github">Sign In with GitHub</button>
-
-        <p>don't have an account yet? <a href="#">Sign Up</a></p>
-    </div>
-
-    <script >
-        document.getElementById("loginForm").addEventListener("submit", function(event) {
-    event.preventDefault(); // Prevent the form from submitting by default
+    <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:wght@300;400;600&display=swap" rel="stylesheet" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
+</head>
+<body style="font-family: 'Poppins', sans-serif; background-color: #f8f9fa; color: #333; margin: 0;">
 
-    const email = document.getElementById("email").value;
-    const password = document.getElementById("password").value;
-    const emailError = document.getElementById("emailError");
-    const passwordError = document.getElementById("passwordError");
+    <!-- Navigation Bar -->
+    <nav style="display: flex; justify-content: space-between; align-items: center; background-color: #343a40; padding: 15px 30px;">
+        <div class="logo">
+            <a href="index.html">
+                <img src="./Images/codex100-logo.png" alt="codeX100 logo" style="height: 40px;" />
+            </a>
+        </div>
+        <div class="hamburger" id="hamburger" style="display: none; font-size: 24px; color: #ffffff;">
+            <i class="fas fa-bars"></i>
+        </div>
+        <ul style="list-style: none; display: flex; margin: 0; padding: 0;">
+            <li><a href="#" style="color: #ffffff; text-decoration: none; margin: 0 15px;">Home</a></li>
+            <li><a href="course.html" style="color: #ffffff; text-decoration: none; margin: 0 15px;">Courses</a></li>
+            <li><a href="#" style="color: #ffffff; text-decoration: none; margin: 0 15px;">Notes</a></li>
+            <li><a href="IDE.html" style="color: #ffffff; text-decoration: none; margin: 0 15px;">IDE</a></li>
+            <li><a href="contact.html" style="color: #ffffff; text-decoration: none; margin: 0 15px;">Contact Us</a></li>
+            <li><a href="#" style="background-color: #f1c40f; color: #343a40; padding: 10px 15px; border-radius: 5px; text-decoration: none; font-weight: bold;">Sign Up</a></li>
+            <li><a href="login.html" style="background-color: #f1c40f; color: #343a40; padding: 10px 15px; border-radius: 5px; text-decoration: none; font-weight: bold;">Login</a></li>
+        </ul>
+    </nav>
 
-   
-    emailError.textContent = "";
-    passwordError.textContent = "";
+    <!-- Main Section -->
+    <section style="background: linear-gradient(to right, #007bff, #6610f2); color: #ffffff; padding: 80px 20px; text-align: center;">
+        <h2 style="font-size: 2.5rem; margin: 0;">Welcome to codeX100</h2>
+        <p style="font-size: 1.25rem;">Master programming with live classes and curated content</p>
+        <a href="#" style="background-color: #f1c40f; color: #343a40; padding: 15px 30px; border-radius: 5px; text-decoration: none; font-weight: bold;">Explore Courses</a>
+    </section>
 
-    let valid = true;
+    <!-- Course Recommendations Section -->
+    <section style="padding: 40px 20px; text-align: center;">
+        <h2>Your Courses</h2>
+        <div class="course-list">
+            <p>You haven't bought any courses yet.</p>
+        </div>
 
-    // Email validation
-    const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
-    if (!emailPattern.test(email)) {
-        emailError.textContent = "Please enter a valid email address.";
-        valid = false;
-    }
+        <h3 style="margin-top: 40px;">Recommended Courses</h3>
+        <div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 20px;">
+            <!-- Example courses with thumbnails -->
+            <div style="background: #ffffff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px; width: 250px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); transition: transform 0.2s;">
+                <img src="./Images/c++-thumbnail.jpg" alt="Basics of C++" style="width: 100%; border-radius: 8px;" />
+                <div style="text-align: left; margin-top: 10px;">
+                    <h4 style="font-size: 1.5rem;">Basics of C++</h4>
+                    <p>Learn the fundamentals of C++ programming.</p>
+                    <button style="background-color: #007bff; color: white; border: none; padding: 10px; border-radius: 5px; cursor: pointer;">View Course</button>
+                </div>
+            </div>
+            <div style="background: #ffffff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px; width: 250px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); transition: transform 0.2s;">
+                <img src="./Images/java-thumbnail.jpg" alt="Data Structures in Java" style="width: 100%; border-radius: 8px;" />
+                <div style="text-align: left; margin-top: 10px;">
+                    <h4 style="font-size: 1.5rem;">Data Structures in Java</h4>
+                    <p>Master DSA with Java from basics to advanced.</p>
+                    <button style="background-color: #007bff; color: white; border: none; padding: 10px; border-radius: 5px; cursor: pointer;">View Course</button>
+                </div>
+            </div>
+            <!-- Additional Course Cards -->
+        </div>
+    </section>
 
-    // Password validation (minimum 8 characters)
-    if (password.length < 8) {
-        passwordError.textContent = "Password must be at least 8 characters long.";
-        valid = false;
-    }
+    <!-- Contact Us Section -->
+    <section style="background-color: #ffffff; padding: 40px 20px; text-align: center;">
+        <h2>Contact Us</h2>
+        <p>If you have any questions or need further assistance, feel free to reach out to us.</p>
+        <form style="max-width: 500px; margin: 0 auto;">
+            <input type="text" placeholder="Your Name" required style="width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ccc; border-radius: 5px;" />
+            <input type="email" placeholder="Your Email" required style="width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ccc; border-radius: 5px;" />
+            <textarea placeholder="Your Message" required style="width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ccc; border-radius: 5px;"></textarea>
+            <button type="submit" style="background-color: #007bff; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer;">Send Message</button>
+        </form>
+    </section>
 
-   
-    if (valid) {
-        alert("Login successful!");
-        
-    }
-});
+    <footer style="background-color: #343a40; color: #ffffff; padding: 20px 0; text-align: center;">
+        <div style="display: flex; justify-content: space-around; padding: 20px;">
+            <div>
+                <h3>Important Links</h3>
+                <ul style="list-style: none; padding: 0;">
+                    <li><a href="/about" style="color: #ffffff; text-decoration: none;">About Us</a></li>
+                    <li><a href="/privacy" style="color: #ffffff; text-decoration: none;">Privacy Policy</a></li>
+                    <li><a href="/terms" style="color: #ffffff; text-decoration: none;">Terms of Service</a></li>
+                </ul>
+            </div>
+            <div>
+                <h3>Connect With Us</h3>
+                <div style="display: flex; justify-content: center;">
+                    <a href="https://linkedin.com/" target="_blank" rel="noopener noreferrer" style="margin: 0 10px; color: #ffffff;">
+                        <i class="fab fa-linkedin"></i>
+                    </a>
+                    <a href="https://instagram.com/" target="_blank" rel="noopener noreferrer" style="margin: 0 10px; color: #ffffff;">
+                        <i class="fab fa-instagram"></i>
+                    </a>
+                    <a href="https://youtube
 
-    </script>
-</body>
-</html>
+             
+            
+         
