diff --git a/templates/base.html b/templates/base.html
index 35d3cd6..fc879b2 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -6,17 +6,30 @@
     {% include 'base_layout.html' %}
 </head>
 
+
+
+<body class="bg-light">
+
+<div>
 {% block navbar %}
 {% include 'navbar.html' %}
 {% endblock %}
-
-<body class="bg-light">
+</div>
+<div>
 {% block header %}
 {% endblock %}
-<main role="main" class="container my-2">
-    <h1>{% block page_heading %}{% endblock %}</h1>
-    {% block content %}{% endblock %}
-</main>
+</div>
+
+<div class="row flex-row flex-nowrap">
+    <div class="col-auto">
+        {% block sidebar %}
+        {% endblock %}
+    </div>
+    <div class="container my-2 col-sm min-vh-100">
+        <h1>{% block page_heading %}{% endblock %}</h1>
+        {% block content %}{% endblock %}
+    </div>
+    </div></div>
 
 </body>
 </html>
\ No newline at end of file
diff --git a/templates/home.html b/templates/home.html
index 73cb965..5933e1f 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -1,23 +1,33 @@
 {% extends "base.html" %}{% load static %}
 
 {% block title %}Bench Coach Home{% endblock %}
+{% block sidebar %}
 
+    <div class="d-flex flex-column flex-shrink-0 p-3 text-white bg-dark min-vh-100 " style="width: 200px;">
+        <ul class="nav nav-pills flex-column mb-auto">
+            {% for page in pages %}
+                <li class="nav-item">
+                    <a class="nav-link text-white" style="text-transform:capitalize;" href="{% url page %}"
+                       aria-current="page">{{ page }} </a>
+                </li>
+            {% endfor %}
+        </ul>
+    </div>
+
+{% endblock %}
 {% block content %}
     <div class="text-center my-2">
-    <h1><img class="mx-auto" src="{% static 'benchcoach.svg' %}" style="width: 64px;" /><span class="text-nowrap"><strong>Welcome to Bench Coach</strong></span></h1>
+    <h1><img class="mx-auto" src="{% static 'benchcoach.svg' %}" style="width: 64px;" /><strong>Welcome to Bench Coach</strong></h1>
     <div class="col-lg-6 m-auto">
         <p class="lead mb-4 d-none">Quisque at curabitur mollis ornare, malesuada maecenas. Orci elit tristique, malesuada eu pharetra. Est praesent tortor porttitor aptent, amet quisque.</p>
 {#        <div class="d-grid gap-2 d-sm-flex justify-content-sm-center mx-1">#}
 {#            <button class="btn btn-primary" type="button">Login</button><button class="btn btn-outline-secondary" type="button">Sign Up</button>#}
 {#        </div>#}
     </div>
+
         <div class="container-sm">
-            <div class="list-group">
-                {% for page in pages %}
-                    <li class="list-group-item"><a style="text-transform:capitalize;"
-                                                   href="{% url page %}">{{ page }} </a></li>
-                {% endfor %}
-            </div>
+{#        <ul class="nav nav-pills flex-column mb-auto">#}
+
         </div>
 
 </div>
diff --git a/templates/navbar.html b/templates/navbar.html
index 913464e..14a952f 100644
--- a/templates/navbar.html
+++ b/templates/navbar.html
@@ -1,5 +1,5 @@
 {% load static %}
-<nav class="navbar navbar-dark navbar-expand-md bg-dark py-0">
+<nav class="navbar navbar-dark navbar-expand-md py-0" style="background: #323669;">
     <a class="navbar-brand d-flex text-uppercase fw-bold m-2 mx-4 text-dark" href="{% url 'home' %}">
         <img class="d-inline-block" width="32" height="32" src="{% static 'benchcoach.svg' %}" />
         <span class="d-none d-print-inline-block d-sm-inline-block d-md-inline-block d-lg-inline-block d-xl-inline-block d-xxl-inline-block mx-1 my-auto text-white">bench coach</span>
