diff --git a/templates/chartjs.template b/templates/chartjs.template
index 466e3555b..ba7de3aa7 100644
--- a/templates/chartjs.template
+++ b/templates/chartjs.template
@@ -1,6 +1,7 @@
+        <div class="chart" id="s{{ xlabel }}{{ ylabel }}{{ label }}">
             <h3>{{xlabel}}/{{ylabel}}</h3>
             <div id="{{ xlabel }}{{ ylabel }}{{ label }}">
-            <canvas id="chart{{ xlabel }}{{ ylabel }}{{ label }}" width="800" height="600"></canvas>
+            <canvas id="chart{{ xlabel }}{{ ylabel }}{{ label }}" width="100%"></canvas>
             <script>
                 var ctx = document.getElementById("chart{{ xlabel }}{{ ylabel }}{{ label }}");
                 var chart = new Chart(ctx, {
@@ -25,7 +26,7 @@
                         {% endfor %}
                         ]},
                         options: {
-                            responsive: false,
+                            responsive: true,
                             title:{
                                 display:true,
                                 text: '{{ plot_label }}'
@@ -100,3 +101,5 @@
                     </pre>
                 </div>
             {% endif %}
+        </div>
+
diff --git a/templates/detail_page.html b/templates/detail_page.html
index 2188e157d..7eea86dc2 100644
--- a/templates/detail_page.html
+++ b/templates/detail_page.html
@@ -1,23 +1,17 @@
 {% extends "general.html" %}
+
 {% block content %}
-        <div class="container">
-        {% for item in plot_data.keys() %}
-            {% if item=="normal" %}
-                {% if batch %}
-                    <h2>Plots for {{title}} in batch mode</h2>
-                {% else %}
-                    <h2>Plots for {{title}}</h2>
-                {% endif %}
-            {% elif item=="scatter" and args.scatter %}
-                {% if batch %}
-                    <h2>Scatterplots for {{title}} in batch mode</h2>
-                {% else %}
-                    <h2>Scatterplots for {{title}}</h2>
-                {% endif %}
-            {% endif %}
-            {% for plot in plot_data[item] %}
+    <div class="container">
+        <h1>{{ title }} </h1>
+        <div class="dropdown">
+            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            Quick Links
+            </button>
+            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton"></div>
+        </div>
+        {% for plot in plot_data["normal"] %}
             {{ plot }}
-            {% endfor %}
-            <hr />
+            {{plot_data["scatter"][loop.index - 1]}}
         {% endfor %}
+
 {% endblock %}
diff --git a/templates/general.html b/templates/general.html
index 74ba2a6e1..8ae277f75 100644
--- a/templates/general.html
+++ b/templates/general.html
@@ -1,58 +1,71 @@
 <!DOCTYPE html>
-    <html lang="en">
-      <head>
-        <meta charset="utf-8">
-        <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
-        <title>{{ title }}</title>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
-        <!-- Include all compiled plugins (below), or include individual files as needed -->
-        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
-        <!-- Bootstrap -->
-        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
-        <style>
-            body { padding-top: 50px; }
-        </style>
-        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
-        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
-        <!--[if lt IE 9]>
-          <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
-          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
-        <![endif]-->
-      </head>
-         <body>
-
-            <nav class="navbar navbar-inverse navbar-fixed-top">
-              <div class="container">
-                <div class="navbar-header">
-                  <a class="navbar-brand" href="index.html">ANN Benchmarks</a>
-                </div>
-                <div id="navbar" class="collapse navbar-collapse">
-                  <ul class="nav navbar-nav">
-                    <li class="active"><a href="index.html">Home</a></li>
-                  </ul>
-                  <ul class="nav navbar-nav">
-                    <li class="active"><a href="index.html#datasets">Datasets</a></li>
-                  </ul>
-                  <ul class="nav navbar-nav">
-                    <li class="active"><a href="index.html#algorithms">Algorithms</a></li>
-                  </ul>
-                  <ul class="nav navbar-nav">
-                    <li class="active"><a href="index.html#contact">Contact</a></li>
-                  </ul>
-                </div><!--/.nav-collapse -->
-              </div>
-            </nav>
-
-            {% block content %} {% endblock %}
-
-            <div id="contact">
-            <h2>Contact</h2>
-            <p>ANN-Benchmarks has been developed by Martin Aumueller (maau@itu.dk), Erik Bernhardsson (mail@erikbern.com), and Alec Faitfull (alef@itu.dk). Please use
-            <a href="https://github.com/erikbern/ann-benchmarks/">Github</a> to submit your implementation or improvements.</p>
-            </div>
-        </div>
-    </body>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
+    <title>{{ title }}</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
+    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
+    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
+    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
+    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
+    <style>
+      body {
+        padding-top: 25px;
+      }
+    </style>
+  
+  </head>
+  <body>
+    {% block content %} {% endblock %}
+  </div>
+  </body>
+  <style>
+    .container {
+      width: 100%;
+      position: relative;
+      padding-top: 40px;
+    }
+    .chart {
+        margin: 16px;
+        width: 100%;
+    }
+    .dropdown {
+      position: absolute;
+      right: 10px;
+      top: 10px;
+    }
+    .card {
+      width: 28rem;
+      margin-bottom: 2rem;
+    }
+    .algorithm.card {
+      width: 18rem;
+      margin-right: 2rem;
+    }
+    .algorithmResult {
+      display: flex;
+    }
+  </style>
+  <script type="text/javascript">
+    window.addEventListener('load', () => {
+      let canvas = [...document.querySelectorAll('.chart')];
+      let originIds =  canvas.map(c => c.id.replace('s', ''));
+      canvas.forEach(c => {
+        c.id = c.id.replace(/\s/g, '')
+      });
+      let ids = canvas.map(c => c.id);
+      let menu = document.querySelector('.dropdown-menu');
+      ids.forEach((id, index) => {
+        const item = document.createElement('a');
+        item.className="dropdown-item";
+        item.href = `#${id}`;
+        item.innerHTML = originIds[index];
+        menu.appendChild(item);
+      })
+    });
+  </script>
 </html>
+
diff --git a/templates/summary.html b/templates/summary.html
index b07e670aa..c6eaa1296 100644
--- a/templates/summary.html
+++ b/templates/summary.html
@@ -1,6 +1,7 @@
 {% extends "general.html" %}
 {% block content %}
         <div class="container">
+            
             <h1>Info</h1>
             <p>ANN-Benchmarks is a benchmarking environment for approximate nearest neighbor algorithms search. This website contains the current benchmarking results. Please visit <a href="http://github.com/erikbern/ann-benchmarks/">http://github.com/erikbern/ann-benchmarks/</a> to get an overview over evaluated data sets and algorithms. Make a pull request on <a href="http://github.com/erikbern/ann-benchmarks/">Github</a> to add your own code or improvements to the
             benchmarking system.
@@ -18,43 +19,48 @@ <h2>Benchmarks for Batched Queries</h2>
                     {% else %}
                         <h2>Benchmarks for Single Queries</h2>
                     {% endif %}
-
-                    <h2 id ="datasets">Results by Dataset</h2>
-                    {% for distance_data in dataset_with_distances[type] %}
-                        <h3>Distance: {{ distance_data.name }} </h3>
-                        {% for entry in distance_data.entries %}
-                            <a href="./{{label_func(entry.name, type == 'batch')}}.html">
-                            <div class="row" id="{{entry.name}}">
-                                <div class = "col-md-4 bg-success">
-                                    <h4>{{entry.desc}}</h4>
+                    <div class="resultsContainer">
+                    <div class="datasetsContainer">
+                        <h2 id ="datasets">Results by Dataset</h2>
+                        {% for distance_data in dataset_with_distances[type] %}
+                            <h3>Distance: {{ distance_data.name }} </h3>
+                            {% for entry in distance_data.entries %}
+                            <div class="card">
+                                <div class="card-body">
+                                    <h5 class="card-title">{{entry.name}}</h5>
+                                    <a href="./{{label_func(entry.name, type == 'batch')}}.html">
+                                        <img class="card-img-top" src="{{label_func(entry.name, type == 'batch')}}.png" />
+                                    </a>
+                                <p class="card-text">{{entry.desc}}</p>
+                                <a href="./{{label_func(entry.name, type == 'batch')}}.html" class="btn btn-primary">Detail</a>
+                                </div>
                             </div>
-                            <div class = "col-md-8">
-                                <img class = "img-responsive" src="{{label_func(entry.name, type == 'batch')}}.png" />
+                            {% endfor %}
+                        {% endfor %}
+                    </div>
+                    <div class="algorithmsContainer">
+                        <h2 id="algorithms">Results by Algorithm</h2>
+                        <!-- <ul class="list-inline"><b>Algorithms:</b>
+                            {% for algo in algorithms[type].keys() %}
+                                <li><a href="#{{algo}}">{{algo}}</a></li>
+                            {% endfor %}
+                        </ul> -->
+                        <div class="algorithmResult">
+                        {% for algo in algorithms[type].keys()%}
+                        <div class="algorithm card" >
+                            <div class="card-body">
+                            <h5 class="card-title">{{algo}}</h5>
+                            <a href="./{{label_func(algo, type == 'batch')}}.html">
+                                <img class="card-img-top" src="{{label_func(algo, type == 'batch')}}.png" />
+                            </a>
+                            <a href="./{{label_func(algo, type == 'batch')}}.html" class="btn btn-primary">Detail</a>
                             </div>
                         </div>
-                        </a>
-                        <hr />
-                        {% endfor %}
-                    {% endfor %}
-                    <h2 id="algorithms">Results by Algorithm</h2>
-                    <ul class="list-inline"><b>Algorithms:</b>
-                        {% for algo in algorithms[type].keys() %}
-                            <li><a href="#{{algo}}">{{algo}}</a></li>
                         {% endfor %}
-                    </ul>
-                    {% for algo in algorithms[type].keys()%}
-                    <a href="./{{label_func(algo, type == 'batch')}}.html">
-                        <div class="row" id="{{algo}}">
-                            <div class = "col-md-4 bg-success">
-                                <h4>{{algo}}</h4>
-                        </div>
-                        <div class = "col-md-8">
-                            <img class = "img-responsive" src="{{label_func(algo, type == 'batch')}}.png" />
-                        </div>
                     </div>
-                    </a>
-                    <hr />
-                    {% endfor %}
+                    </div>
+                </div>
                 {% endif %}
             {% endfor %}
 {% endblock %}
+
