diff --git a/backend/templates/base.html b/backend/templates/base.html
index 66b687b..7583d05 100644
--- a/backend/templates/base.html
+++ b/backend/templates/base.html
@@ -11,47 +11,75 @@
   <meta name="author" content="">
 
   <!-- Bootstrap CSS -->
-  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css'>
+
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
+
+    body {
+      font-family: "Montserrat", sans-serif;
+    }
+  </style>
+  {% block links %}{% endblock links %}
+</head>
 
 <body>
   <div class="container-fluid">
+
+    <!-- HEADER -->
     <div class="row fixed-top sticky-top">
-      <nav class="navbar navbar-expand-sm bg-light">
-        <!-- Links -->
-        <ul class="navbar-nav">
-          <li class="nav-item">
-            <a class="nav-link" href="/">Home</a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="/about">About</a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="/contactus">Contact Us</a>
-          </li>
-          {% if logged_in %}
-          <li class="nav-item"><a class="nav-link" href="/logout">Logout</a></li>
-          <li class="nav-item"><a class="nav-link" href="/profile">{{ name }}</a></li>
-          {% else %}
-          <li class="nav-item"><a class="nav-link" href="/login">Login</a></li>
-          {% endif %}
-        </ul>
+      <nav class="navbar navbar-expand-lg bg-body-tertiary">
+        <div class="container-fluid">
+          <a class="navbar-brand" href="#">Jean-Marie Family</a>
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+              <li class="nav-item">
+                <a class="nav-link" href="/">Home</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="/about">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="/contactus">Contact Us</a>
+              </li>
+              {% if logged_in %}
+                <li class="nav-item"><a class="nav-link" href="/logout">Logout</a></li>
+                <li class="nav-item"><a class="nav-link" href="/profile">{{ name }}</a></li>
+              {% else %}
+                <li class="nav-item"><a class="nav-link" href="/login">Login</a></li>
+              {% endif %}
+            </ul>
+          </div>
+        </div>
       </nav>
     </div>
+
+    <!-- CONTENT -->
     <div class="row flex-grow-1">
       {% block content %}{% endblock content %}
     </div>
+
+    <!-- FOOTER -->
     <div class="row fixed-bottom sticky-bottom">
       <div class="container-fluid text-center bg-light">
-        <!-- FOOTER -->
         <footer>
           <p>© 2024 Jean-Marie family</p>
         </footer>
       </div><!-- /.container -->
     </div>
+
   </div>
 
   <!-- Bootstrap JS Bundle with Popper -->
-  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
+    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
+    crossorigin="anonymous"></script>
+  {% block scripts %}{% endblock scripts %}
 </body>
 
 </html>
\ No newline at end of file
