diff --git a/css/main.css b/css/main.css
index e65a2eb..8088542 100644
--- a/css/main.css
+++ b/css/main.css
@@ -12,7 +12,7 @@ body {
 }
 
 .chart-box {
-  border: 1px solid grey;
+  /*border: 1px solid grey;*/
 }
 
 /* This container will allow scaling svg, so we don't need to care about it in d3.js */
diff --git a/index.html b/index.html
index 5e87534..c38a617 100644
--- a/index.html
+++ b/index.html
@@ -34,35 +34,52 @@
       </div>
     </nav>
 
-
     <main role="main" class="container">
-      <div class="content-box">
-        <form>
-          <div class="form-group">
-            <label for="seasonByYearSelector">Wähle ein Jahr aus!</label>
-            <select class="form-control" id="seasonByYearSelector">
-              <!-- This is filled using JS. -->
-            </select>
-          </div>
-        </form>
-      </div>
-      <div class="content-box strecken-selector">
-        <div class="frame">
-	        <ul class="slidee" id="courseSelection">
-	        </ul>
-        </div>
-        <div class="scrollbar">
-	        <div class="handle"></div>
-        </div>
-      </div>
 
-      <div class="content-box chart-box">
-        <div id="lineGraphBox"></div>
-      </div>
+      <!-- Navigation card -->
+      <div class="card" id="selector-card">
+        <div class="card-header">Welches Rennen interessiert dich?</div>
+        <div class="card-body">
+          <!-- Year selector -->
+          <form>
+            <div class="form-group">
+              <label for="seasonByYearSelector">Wähle ein Jahr aus!</label>
+              <select class="form-control" id="seasonByYearSelector">
+                <!-- This is filled using JS. -->
+              </select>
+            </div>
+          </form>
+
+          <!-- Course selector -->
+          <div class="content-box strecken-selector">
+            <div class="frame">
+	      <ul class="slidee" id="courseSelection"><!-- This will be filled by JS. --></ul>
+            </div>
+            <div class="scrollbar">
+              <div class="handle"></div>
+            </div>
+          </div>
+        
+        </div> <!-- card-body -->
+      </div> <!-- card -->
+
+      <br>
+
+      <!-- Diagram card -->
+      <div class="card" id="diagram-card">
+        <div class="card-header">Diagramm</div>
+        <div class="card-body">
+
+          <div class="content-box chart-box">
+            <div id="lineGraphBox"></div>
+          </div>
+
+        </div> <!-- card-body -->
+      </div> <!-- card -->
 
     </main><!-- /.container -->
 
-
+    <!-- Other utility infrastructure -->
     <div id="loading-dialog" class="modal fade" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true" style="padding-top:15%; overflow-y:visible;">
       <div class="modal-dialog modal-m">
         <div class="modal-content">