diff --git a/.gitignore b/.gitignore
index 45e876d..d8f62f1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,6 @@
 node_modules/
 client/node_modules/
 server/node_modules/
+__pycache__/
+*.pyc
+*.pyo
\ No newline at end of file
diff --git a/client/src/components/Navbar.jsx b/client/src/components/Navbar.jsx
index 22f00d3..d9a4bcf 100644
--- a/client/src/components/Navbar.jsx
+++ b/client/src/components/Navbar.jsx
@@ -1,31 +1,17 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from "react-router-dom";
 
 export default function Navbar() {
   return (
-    <nav
-      style={{
-        padding: '1rem',
-        backgroundColor: '#f8f9fa',
-        display: 'flex',
-        justifyContent: 'flex-start',
-        alignItems: 'center',
-        gap: '20px',       // space between links
-        boxShadow: '0 2px 5px rgba(0,0,0,0.1)',
-        fontWeight: 'bold',
-      }}
-    >
-      <Link to="/" style={{ textDecoration: 'none', color: '#333' }}>
+    <nav className="navbar">
+      <Link to="/" className="navbar-link">
         Home
       </Link>
-      <Link to="/courses" style={{ textDecoration: 'none', color: '#333' }}>
+      <Link to="/courses" className="navbar-link">
         Courses
       </Link>
-      <Link to="/quiz" style={{ textDecoration: 'none', color: '#333' }}>
+      <Link to="/quiz" className="navbar-link">
         Quiz
       </Link>
     </nav>
   );
 }
-
-
diff --git a/client/src/index.css b/client/src/index.css
index 6959f2a..c23d724 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -1,5 +1,5 @@
- /* client/src/index.css */
- 
+/* client/src/index.css */
+
 /* src/index.css */
 .red-bordered-heading {
   border: 2px solid red;
@@ -8,6 +8,37 @@
 body {
   margin: 0;
   font-family: Arial, sans-serif;
-  
 }
- 
\ No newline at end of file
+
+/* Navbar */
+.navbar {
+  padding: 1rem;
+  background-color: #f8f9fa;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 20px;
+  gap: 20px; /* space between links */
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  font-weight: bold;
+}
+
+.navbar-link {
+  text-decoration: none;
+  color: #333;
+}
+
+/* Mobile & tablet — links spread across full width */
+@media (max-width: 768px) {
+  .navbar {
+    justify-content: space-around;
+    gap: 0;
+    padding: 0.75rem 0;
+  }
+
+  .navbar-link {
+    flex: 1;
+    text-align: center;
+    padding: 0.5rem 0;
+  }
+}