diff --git a/django/didgeridoo/webshop/templates/webshop/base.html b/django/didgeridoo/webshop/templates/webshop/base.html
index fa6b702..8cd2aa6 100644
--- a/django/didgeridoo/webshop/templates/webshop/base.html
+++ b/django/didgeridoo/webshop/templates/webshop/base.html
@@ -1,17 +1,62 @@
 <!DOCTYPE html>
-<head>
-    <link rel="stylesheet" href="{{ STATIC_URL }}/static/admin/css/base.css" />
-</head>
-<body>
-    <div id="content" class="flex">
-        <h1>{% block section_title %}Music Instrument Shop{% endblock %}</h1>
-        {% block content %}{% endblock %}
-    </div>
-</body>
-<footer>
-    {% block footer %}
-    <p><font size="1">This is a case study project of Ivan Hörler and Andreas Zweili.
-    It is a school project/excercise and has no commercial intent.</font></p>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+
+    <!-- Add additional CSS in static file -->
+    {% load static %}
+    <link rel="stylesheet" href="{{ STATIC_URL }}/static/webshop/css/base.css" />
+    {% block title %}
+      <title>
+        Casestudy 'Webshop' IBZ TIAE-5(2017/18)
+      </title>
     {% endblock %}
-</footer>
+  </head>
+  <body>
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col-sm-12">
+          <h1>
+            {% block shop_name %}Music Instruments Inc.{% endblock %}
+          </h1>
+        </div>
+      </div>
+    </div>
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col-sm-2">
+          {% block nav %}
+            <ul class="sidebar-nav">
+              <li><a href="{% url 'index' %}">Home</a></li>
+              <li><a href="/category/1/">Category 1</a></li>  <!--change href!!!-->
+              <li><a href="/category/2/">Category 2</a></li>  <!--change href!!!-->
+            </ul>
+          {% endblock %}
+        </div>
+        <div class="col-sm-10 ">
+            <h1>
+              {% block section_title %}{% endblock %}
+            </h1>
+        </div>
+        <div class="col-sm-10 ">
+          {% block content %}{% endblock %}
+        </div>
+      </div>
+    </div>
+    <footer>
+      <div class="container-fluid">
+        <div class="row">
+          <div class="col-sm-12">
+            {% block footer %}
+              This is a case study project of Ivan Hörler and Andreas Zweili. </br>
+              It is a school project/excercise and has no commercial intent.
+            {% endblock %}
+          </div>
+        </div>
+      </div>
+    </footer>
+  </body>
 </html>
