diff --git a/docs/src/components/Demo/style.scss b/docs/src/components/Demo/style.scss
index 48890509..44789b77 100644
--- a/docs/src/components/Demo/style.scss
+++ b/docs/src/components/Demo/style.scss
@@ -18,33 +18,28 @@
   }
 
   &__tabs {
-    padding: 0 1.5rem;
-    border-bottom: 2px solid rgba($colorWhite, 0.1);
+    padding: 1rem 1.5rem 0 1.5rem;
   }
 
   &__tab {
+    display: inline-flex;
     position: relative;
-    color: rgba($colorWhite, 0.5);
-    font: inherit;
+    background-color: transparent;
+    color: rgba($colorWhite, 0.7);
+    padding: 0.1rem 0.5rem;
+    border-radius: 5px;
     font-weight: 500;
-    padding: 0.75rem 0;
-    background: none;
     border: none;
-    cursor: pointer;
-    margin-right: 1rem;
+    margin-right: 0.5rem;
 
-    &.is-active {
+    &:first-child {
+      margin-left: -0.5rem;
+    }
+
+    &.is-active,
+    &:hover {
       color: $colorWhite;
-
-      &::after {
-        content: '';
-        position: absolute;
-        bottom: -2px;
-        left: 0;
-        width: 100%;
-        height: 2px;
-        background-color: $colorWhite;
-      }
+      background-color: rgba($colorWhite, 0.1);
     } 
   }
   
diff --git a/docs/src/layouts/App/base.scss b/docs/src/layouts/App/base.scss
index b0f691ca..f018e0a0 100644
--- a/docs/src/layouts/App/base.scss
+++ b/docs/src/layouts/App/base.scss
@@ -60,6 +60,11 @@ ol {
   list-style: none;
 }
 
+button {
+  font: inherit;
+  cursor: pointer;
+}
+
 a {
   color: inherit;
   transition: color 0.2s $ease, background-color 0.2s $ease;