diff --git a/app/routes.py b/app/routes.py
index a227d50..00a9c8e 100644
--- a/app/routes.py
+++ b/app/routes.py
@@ -25,11 +25,8 @@ def to_json_array(collection):
 
 @app.route("/")
 def index():
-    # get all elections that have this status. pending
-    status = Status.query.get(1)
-    elections = Election.query.with_parent(
-        status).all()  # all elections in the system
-    return render_template("index.html", title="Home Page", elections=elections)
+
+    return render_template("index.html", title="Home Page")
 
 
 @app.route("/login-complete")
@@ -58,11 +55,15 @@ def login_complete():
     return redirect(url_for('dashboard'))
 
 
-@app.route("/dashboard")
+@app.route("/home")
 @login_required
 def dashboard():
-    elections = current_user.elections.all()  # all user elections
-    return render_template("dashboard.html", title="User Dashboard", elections=elections)
+    # get all elections that have this status. pending
+    status = Status.query.get(1)
+    elections = Election.query.with_parent(
+        status).all()  # all elections in the system
+    user_elections = current_user.elections.all()  # all user elections
+    return render_template("dashboard.html", title="User Home", elections=elections, user_elections=user_elections)
 
 
 @app.route("/elections/new", methods=['GET', 'POST'])
diff --git a/app/static/css/styles.css b/app/static/css/styles.css
new file mode 100644
index 0000000..e2ab167
--- /dev/null
+++ b/app/static/css/styles.css
@@ -0,0 +1,9 @@
+body {
+  /* color: grey; */
+  background-color: #e1e1e1;
+}
+
+header {
+  background-color: #5792cf !important;
+  color: white;
+}
diff --git a/app/templates/dashboard.html b/app/templates/dashboard.html
index 9c45421..1ff6d45 100644
--- a/app/templates/dashboard.html
+++ b/app/templates/dashboard.html
@@ -2,20 +2,41 @@
 
 {% block content %}
 <div>
-    <h2>Hello, {{ current_user.get_name()[0].capitalize() }} </h2>
-    <ul>
-        <li><a href="{{ url_for('new_election') }}"><button>New Election</button></a></li>
+    <div class="d-flex justify-content-between mt-3">
+        <div>
+            You have {{ user_elections.count('') }} elections
+        </div>
 
-    </ul>
+        <div>
+            <a href="{{ url_for('new_election') }}"><button class="btn btn-success">New Election + </button></a></li>
+        </div>
+    </div>
 
-    <h3>Your elections</h3>
-
-    {% if elections %}
-    <table style="border: 2px solid lightblue;background-color: khaki;">
+    <h4>Your elections</h4>
+    {% if user_elections %}
+    <table class="table table-striped table-hover" style="border: 2px solid lightblue;background-color: khaki;">
         <thead>
             <th>
-                Id
+                Name
+            </th>
+            <th>
+                Status
             </th>
+            <th>
+                Actions
+            </th>
+        </thead>
+        {% for election in user_elections %}
+        {% include "partials/election_record.html" %}
+        {% endfor %}
+    </table>
+    {% endif %}
+
+    <h4>Upcoming elections</h4>
+
+    <table class="table table-striped table-hover" style="border: 1px solid gold">
+        <thead>
+
             <th>
                 Name
             </th>
@@ -23,13 +44,12 @@ <h3>Your elections</h3>
                 Status
             </th>
             <th>
-                Actions
+                Action
             </th>
         </thead>
         {% for election in elections %}
         {% include "partials/election_record.html" %}
         {% endfor %}
     </table>
-    {% endif %}
 </div>
 {% endblock %}
\ No newline at end of file
diff --git a/app/templates/index.html b/app/templates/index.html
index cf6868c..5cbc644 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -1,31 +1,22 @@
 {% extends "layouts/base.html" %}
 
 {% block content %}
-<div>
-    <h4>This is the home page!</h4>
+<div class="container text-center py-4">
+    <h2>EVoting</h2>
 
-    {% if current_user.is_authenticated and elections %}
-    <h3>Upcoming elections</h3>
+    <p>
+        Yarnnsss
+    </p>
 
-    <table style="border: 1px solid gold">
-        <thead>
-            <th>
-                Id
-            </th>
-            <th>
-                Name
-            </th>
-            <th>
-                Status
-            </th>
-            <th>
-                Action
-            </th>
-        </thead>
-        {% for election in elections %}
-        {% include "partials/election_record.html" %}
-        {% endfor %}
-    </table>
-    {% endif %}
+    <div class="d-flex align-items-center">
+        {% if current_user.is_authenticated %}
+        <a class=" mx-auto" href="{{ url_for('dashboard') }}">
+            <button class="btn btn-info">Go to Dashboard</button>
+        </a>
+        {% else %}
+        <button class="btn btn-info mx-auto" onclick="login()">Login</button>
+        {% endif %}
+
+    </div>
 </div>
 {% endblock %}
\ No newline at end of file
diff --git a/app/templates/layouts/base.html b/app/templates/layouts/base.html
index 8060369..d6faf68 100644
--- a/app/templates/layouts/base.html
+++ b/app/templates/layouts/base.html
@@ -11,6 +11,12 @@
     <title>Welcome to E-Voting</title>
     {% endif %}
 
+    <!-- styles -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous" />
+        <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}" />
+    <!-- styles -->
+
     <!-- External Scripts -->
     <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
     <script src="https://unpkg.com/htmx.org@1.2.1"
@@ -20,27 +26,13 @@
 </head>
 
 <body class="{{ styles }}">
-    <div>
-      Evoting: <a href="{{ url_for('index') }}">Home</a>, {% if current_user.is_authenticated %}
-        <a href="{{ url_for('dashboard') }}">Dashboard</a>
-        {% endif %}
-        {% if current_user.is_anonymous %}
-        <div>
-            <button onclick="login()">Login</button>
-        </div>
-        {% else %}
-        <div>
-            <button onclick="logout()">Logout</button>
-        </div>
-        {% endif %}
 
-        {% if current_user.is_authenticated %}
-        <div>
-            Hello, {{ current_user.get_name()[0].capitalize() }}
-        </div>
-        {% endif %}
-    </div>
-    <hr>
+    {% if request.endpoint != 'index' %}
+      <!-- Header Partial -->
+      {% include "partials/header.html" %}
+      <!-- Header -->
+    {% endif %}
+
     {% with messages = get_flashed_messages(with_categories=true) %}
     {% if messages%}
     {% for category, message in messages %}
@@ -50,7 +42,9 @@
     {% endfor %}
     {% endif %}
     {% endwith %}
-    {% block content %}{% endblock %}
+    <div class="container">
+        {% block content %}{% endblock %}
+    </div>
 
     <script src="https://auther.mybubbl.me/js/auth.js?v=0.2.0"></script>
     <script>
@@ -114,7 +108,10 @@
      
     </script>
     {% endif %}
-
+    <!-- Boostrap JS -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
+    integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
+    crossorigin="anonymous"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/app/templates/partials/election_record.html b/app/templates/partials/election_record.html
index 4150535..e122262 100644
--- a/app/templates/partials/election_record.html
+++ b/app/templates/partials/election_record.html
@@ -1,18 +1,29 @@
 <tr>
     <td>
-        {{ election.id }}
+        <a class="link" href="{{ url_for('election', link=election.link)  }}">
+            {{ election.name }}
+        </a>
+    </td>
+    <td>
+        <span class="badge rounded-pill bg-info">
+            {{ election.status.name }}
+        </span>
     </td>
-    <td>{{ election.name }}</td>
-    <td>{{ election.status.name }}</td>
     <td>
         {%if election.owner.id == current_user.id %}
-        <a href="{{ url_for('update_election', link=election.link)  }}">Edit</a>
+        <a href="{{ url_for('update_election', link=election.link)  }}">
+            <span class="badge bg-secondary">
+                edit
+            </span>
+        </a>
         {% endif %}
 
-        <a href="{{ url_for('election', link=election.link) }}">View</a>
-
         {% if election.status.name == 'started' %}
-        <a href="{{ url_for('voting_pass_link', link=election.link) }}">Vote</a>
+        <a href="{{ url_for('voting_pass_link', link=election.link) }}">
+            <button class="btn btn-primary shadow-sm">
+                Vote!
+            </button>
+        </a>
         {% endif %}
     </td>
 </tr>
\ No newline at end of file
diff --git a/app/templates/partials/header.html b/app/templates/partials/header.html
new file mode 100644
index 0000000..1a633b6
--- /dev/null
+++ b/app/templates/partials/header.html
@@ -0,0 +1,38 @@
+<header>
+    <div class="container">
+        {% if current_user.is_authenticated %}
+
+        <div class="d-flex justify-content-between pt-5">
+            <h1 id="name_tag">
+                Hi, {{ current_user.get_name()[0].capitalize() }}
+            </h1>
+
+            <div>
+                {% if current_user.is_anonymous %}
+                <div>
+                    <button class="btn btn-outline-danger btn-sm" onclick="login()">Login</button>
+                </div>
+                {% else %}
+                <div>
+                    <button class="btn btn-outline-danger btn-sm" onclick="logout()">Logout</button>
+                </div>
+                {% endif %}
+            </div>
+        </div>
+        {% endif %}
+
+        <ul class="nav">
+            <li class="nav-item">
+                <a class="nav-link ps-0 text-white" aria-current="page" href="{{ url_for('index') }}">Home</a>
+            </li>
+            {% if current_user.is_authenticated %}
+            <li class="nav-item">
+                <a class="nav-link text-white" href="{{ url_for('dashboard') }}">Dashboard</a>
+            </li>
+            {% endif %}
+        </ul>
+        <!-- nav -->
+    </div>
+
+    <hr class="my-1">
+</header>
\ No newline at end of file