diff --git a/css/main.css b/css/main.css
index 142ca33..0a6dd99 100644
--- a/css/main.css
+++ b/css/main.css
@@ -73,6 +73,10 @@ body {
     margin-right: auto;
 }
 
+#toggle-btn{
+  text-align: center;
+}
+
 #icon-up-arrow{
   width: 1%;
   height: 1%;
diff --git a/index.html b/index.html
index 38840cf..d6a0945 100644
--- a/index.html
+++ b/index.html
@@ -60,7 +60,7 @@
               <div class="handle"></div>
             </div>
           </div>
-        
+
         </div> <!-- card-body -->
       </div> <!-- card -->
 
@@ -68,16 +68,13 @@
 
       <!-- Diagram card -->
       <div class="card" id="diagram-card">
-        <div class="card-header">
-          Diagramm
-          <button type="button" class="btn btn-info btn-block" data-toggle="collapse" data-target="#selection-box">
-            <svg id="icon-up-arrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 8 8" xml:space="preserve">
-              <rect x="0.016" y="1.68" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 6.2428 2.2389)" width="5.283" height="1.466"/>
-              <rect x="3.161" y="1.604" width="1.683" height="6.375"/>
-              <rect x="2.709" y="1.674" transform="matrix(0.7073 0.7069 -0.7069 0.7073 3.2674 -3.0786)" width="5.284" height="1.465"/>
+        <div class="card-header" style="padding:0;">
+          <div id="toggle-btn">
+            <svg id="icon-up-arrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 120 120" xml:space="preserve" transform="rotate(-90)">
+              <polygon fill="#010101" points="102.296,59.957 42.264,119.99 25.605,103.34 85.639,43.299 "/>
+              <polygon fill="#010101" points="85.74,76.71 25.715,16.653 42.373,0.011 102.391,60.067 "/>
             </svg>
-            Collapse
-          </button>
+          </div>
         </div>
         <div class="card-body">
 
diff --git a/js/main.js b/js/main.js
index 4336640..2c6f790 100644
--- a/js/main.js
+++ b/js/main.js
@@ -31,8 +31,8 @@ var slyelement = {
 };
 
 
-preprocessor.load(function(data) {    
-    slyelement.obj = new Sly($(slyelement.el), slyelement.options);  
+preprocessor.load(function(data) {
+    slyelement.obj = new Sly($(slyelement.el), slyelement.options);
     slyelement.obj.init();
 
   // Some sample code for a year selector - TODO: Improve a lot and move somewhere else
@@ -41,7 +41,7 @@ preprocessor.load(function(data) {
   var seasons = processor.getSeasonsWithLapData();
 
   for(var season in seasons){ yearSelector.append("<option>" + seasons[season].year + "</option>"); }
-  
+
   // Someone chose a year
   yearSelector.change(function(event) {
     var selectedYear = $(event.target).val();
@@ -62,7 +62,7 @@ preprocessor.load(function(data) {
 	    $("#lineGraphBox").empty();
   	    createLineGraph("#lineGraphBox", rdata);
 	});
-        slyelement.obj.reload();   
+        slyelement.obj.reload();
     }
     slyelement.obj.reload();
 
@@ -82,6 +82,30 @@ preprocessor.load(function(data) {
     slyelement.obj.reload();
   });
 
+  $( "#toggle-btn" ).click(function() {
+    if ( $( "#selector-card .card-body" ).is( ":hidden" ) ) {
+      $( "#selector-card .card-body" ).slideDown();
+      $('#icon-up-arrow').animate({  borderSpacing: 0 - 90 }, {
+         step: function(now,fx) {
+           $(this).css('-webkit-transform','rotate('+now+'deg)');
+           $(this).css('-moz-transform','rotate('+now+'deg)');
+           $(this).css('transform','rotate('+now+'deg)');
+         },
+         duration: 150
+      },'linear');
+    } else {
+      $( "#selector-card .card-body" ).slideUp();
+      $('#icon-up-arrow').animate({  borderSpacing: 180 - 90 }, {
+         step: function(now,fx) {
+           $(this).css('-webkit-transform','rotate('+now+'deg)');
+           $(this).css('-moz-transform','rotate('+now+'deg)');
+           $(this).css('transform','rotate('+now+'deg)');
+         },
+         duration: 150
+      },'linear');
+    }
+  });
+
   $("#seasonByYearSelector").trigger("change");
 
 });