diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 9d9ea7d..1a1c380 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -24,7 +24,7 @@
     <section class="homepage__intro">
         <h1 class="title-huge">Houses</h1>
         <p class="text-medium">Houses Of is a project that showcases houses of character around the world.</p>
-        <Button text="Explore locations" url="#" tag="a">
+        <Button text="Explore locations" url="#">
             <img src="/images/icons/globe.svg" alt="explore globe">
         </Button>
     </section>
diff --git a/src/style/atoms/_button.scss b/src/style/atoms/_button.scss
index a1d80a6..2e7edba 100644
--- a/src/style/atoms/_button.scss
+++ b/src/style/atoms/_button.scss
@@ -1,14 +1,16 @@
 .button {
     display: inline-flex;
+    height: 48px;
     align-items: center;
     background: #fff;
-    border-radius: 100vh;
-    padding: 12px 24px;
-    text-decoration: none;
-    font-size: rem(18px);
+    padding: 0 24px;
     color: $color-text;
-    font-weight: 600;
+    font-size: rem(18px);
+    line-height: 1;
+    font-weight: 700;
+    border-radius: 100vh;
     border: none;
+    text-decoration: none;
 
     // Icon
     img {
@@ -16,6 +18,14 @@
         margin-right: 12px;
     }
 
+    // Size variants
+    // Small
+    &--small {
+        height: 40px;
+    }
+
+    // Color Variants
+    // Pink
     &--pink {
         background: $color-secondary-light;
     }