diff --git a/src/components/atoms/Button.svelte b/src/components/atoms/Button.svelte
index 468b2aa..27658f8 100644
--- a/src/components/atoms/Button.svelte
+++ b/src/components/atoms/Button.svelte
@@ -2,15 +2,20 @@
     export let text: string
     export let tag: string = 'a'
     export let url: string = undefined
+
+    const classes = [
+        'button',
+        $$props.class
+    ].join(' ')
 </script>
 
 {#if tag === 'button'}
-    <button class="button {$$props.class}">
+    <button class={classes}>
         <slot />
         {text}
     </button>
 {:else if tag === 'a'}
-    <a href={url} class="button {$$props.class}">
+    <a href={url} class={classes}>
         <slot />
         <span>{text}</span>
     </a>
diff --git a/src/style/atoms/_button.scss b/src/style/atoms/_button.scss
index 2e7edba..3a0bee7 100644
--- a/src/style/atoms/_button.scss
+++ b/src/style/atoms/_button.scss
@@ -1,13 +1,11 @@
 .button {
     display: inline-flex;
-    height: 48px;
     align-items: center;
-    background: #fff;
+    height: 48px;
     padding: 0 24px;
+    background: #fff;
+    font: 900 #{rem(18px)}/1 $font-sans;
     color: $color-text;
-    font-size: rem(18px);
-    line-height: 1;
-    font-weight: 700;
     border-radius: 100vh;
     border: none;
     text-decoration: none;
@@ -22,6 +20,7 @@
     // Small
     &--small {
         height: 40px;
+        padding: 0 16px;
     }
 
     // Color Variants