diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index 9debe86e2..97917b015 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -69,7 +69,7 @@ h3 {
   z-index: 10000;
 
   .tooltip-inner {
-    background: black;
+    background: #353535;
     color: white;
     border-radius: 16px;
     padding: 5px 10px 4px;
@@ -81,7 +81,7 @@ h3 {
     border-style: solid;
     position: absolute;
     margin: 5px;
-    border-color: black;
+    border-color: #353535;
     z-index: 1;
   }
 
@@ -150,10 +150,10 @@ h3 {
 
     .popover-inner {
       background: $color;
-      color: black;
+      color: #353535;
       padding: 24px;
       border-radius: 5px;
-      box-shadow: 0 5px 30px rgba(black, .1);
+      box-shadow: 0 5px 30px rgba(#353535, .1);
     }
 
     .popover-arrow {
diff --git a/pages/index.vue b/pages/index.vue
index 7581936ab..a7e32a1a3 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -144,6 +144,10 @@
           <i class="material-icons">import_export</i>
           <span>Import cURL</span>
         </button>
+        <button class="icon" id="goto-history" @click="gotoHistory()">
+          <i class="material-icons">history</i>
+          <span>History</span>
+        </button>
         <button class="icon" @click="clearContent">
           <i class="material-icons">clear_all</i>
           <span>Clear all</span>
@@ -855,6 +859,11 @@
           }
         }
       },
+      gotoHistory() {
+        this.$refs.historyComponent.$el.scrollIntoView({
+          behavior: 'smooth'
+        });
+      },
       getQueryStringFromPath() {
         let queryString,
             pathParsed = url.parse(this.path);