diff --git a/components/Molecules/Button/Button.stories.js b/components/Molecules/Button/Button.stories.js
index 8c8755d..037f482 100644
--- a/components/Molecules/Button/Button.stories.js
+++ b/components/Molecules/Button/Button.stories.js
@@ -1,29 +1,35 @@
-import Button from './Button.twig';
+import Compact from './Classic.twig';
 
 export default {
   title: 'Design System/Molecules/Button'
 };
 
-export const base = {
-  render: (args) => Button(args),
+const types = ['primary', 'secondary', 'tertiary', 'destructive'];
+const icons = ['copy', 'eye', 'edit', 'close'];
+
+export const classic = {
+  render: (args) => Compact(args),
   args: {
-    text: 'Button',
-    level: 'primary',
-    href: '#',
-    target: '_self',
-    type: 'button',
-    tag: 'button'
+    customText: 'Button',
+    variant: 'primary',
+    icon_left: 'none',
+    icon_right: 'none'
   },
-
   argTypes: {
-    text: { control: 'text' },
-    level: {
-      control: 'select',
-      options: ['primary', 'secondary', 'link', 'small']
+    variant: {
+      options: types,
+      control: { type: 'radio' }
+    },
+    icon_left: {
+      options: ['none', ...icons],
+      control: { type: 'radio' }
+    },
+    icon_right: {
+      options: ['none', ...icons],
+      control: { type: 'radio' }
     },
-    href: { control: 'text' },
-    target: { control: 'select', options: ['_self', '_blank'] },
-    type: { control: 'select', options: ['button', 'submit', 'reset'] },
-    tag: { control: 'select', options: ['button', 'a'] }
+    href: {
+      control: { type: 'text' }
+    }
   }
 };
diff --git a/components/Molecules/Button/Button.twig b/components/Molecules/Button/Button.twig
index 74c57f6..2a9b0a2 100644
--- a/components/Molecules/Button/Button.twig
+++ b/components/Molecules/Button/Button.twig
@@ -1,19 +1,14 @@
-{% set tag = tag|default('a') %}
-{% set classes = 'Button' %}
+{% set classes = classes|default('') %}
+{% if variant %}{% set classes = classes ~ ' Button--' ~ variant %}{% endif %}
+{% set tag = 'button' %}
+{% if href %}{% set tag = 'a' %}{% endif %}
 
-{% if level is defined %}
-    {% set classes = classes ~ ' Button--' ~ level %}
-{% endif %}
-
-{% if class is defined %}
-    {% set classes = classes ~ ' ' ~ class %}
-{% endif %}
-
-<{{ tag }}
-  class="{{ classes }}"
-  {% if href is defined %}href="{{ href }}"{% endif %}
-  {% if target is defined %}target="{{ target }}"{% endif %}
-  {% if type is defined and type == 'submit' %}type="submit"{% endif %}
->
-  {{ text }}
+<{{ tag }} class='Button {{ classes }}' {% if disabled %}disabled{% endif %} {% if href %}href='{{ href }}'{% else %}type='{{ type|default('button') }}'{% endif %}>
+  {% if icon_left %}
+    <span class='icon icon-left'>{{ source("/icons/"~ icon_left ~".svg") }}</span>
+  {% endif %}
+  {{ text|striptags('<span>')|raw }}
+  {% if icon_right %}
+    <span class='icon icon-right'>{{ source("/icons/"~ icon_right ~".svg") }}</span>
+  {% endif %}
 </{{ tag }}>
diff --git a/components/Molecules/Button/Classic.twig b/components/Molecules/Button/Classic.twig
new file mode 100644
index 0000000..3a8ba7a
--- /dev/null
+++ b/components/Molecules/Button/Classic.twig
@@ -0,0 +1,34 @@
+{% set iconLeft =  icon_left == 'none' ? '' : icon_left %}
+{% set iconRight =  icon_right == 'none' ? '' : icon_right %}
+
+<div class="mb-8">
+  <div class='h4-desktop mb-5'>XL</div>
+  <div  class='flex gap-4'>
+    {% include './Button.twig' with {disabled: false, classes: 'Button--xl', variant: variant, text: customText, icon_left: iconLeft, icon_right: iconRight} %}
+    {% include './Button.twig' with {disabled: true, classes: 'Button--xl', variant: variant, text: customText, icon_left: iconLeft, icon_right: iconRight} %}
+  </div>
+</div>
+
+<div class="mb-8">
+  <div class='h4-desktop mb-5'>Large</div>
+  <div  class='flex gap-4'>
+    {% include './Button.twig' with {disabled: false, classes: 'Button--large', variant: variant, text: customText, icon_left: iconLeft, icon_right: iconRight} %}
+    {% include './Button.twig' with {disabled: true, classes: 'Button--large', variant: variant, text: customText, icon_left: iconLeft, icon_right: iconRight} %}
+  </div>
+</div>
+
+<div class="mb-8">
+  <div class='h4-desktop my-5'>Medium</div>
+  <div  class='flex gap-4'>
+    {% include './Button.twig' with {disabled: false, classes: 'Button--medium', variant: variant, text: customText, icon_left: iconLeft, icon_right: iconRight} %}
+    {% include './Button.twig' with {disabled: true, classes: 'Button--medium', text:customText, icon_left: iconLeft, icon_right: iconRight} %}
+  </div>
+</div>
+
+<div class="mb-8">
+  <div class='h4-desktop my-5'>Small</div>
+  <div  class='flex gap-4'>
+    {% include './Button.twig' with {disabled: false, classes: 'Button--small', variant: variant, text: customText, icon_left: iconLeft, icon_right: iconRight} %}
+    {% include './Button.twig' with {disabled: true, classes: 'Button--small', variant: variant, text: customText, icon_left: iconLeft, icon_right: iconRight} %}
+  </div>
+</div>
diff --git a/components/Molecules/Button/button.css b/components/Molecules/Button/button.css
index 5e99517..b407008 100644
--- a/components/Molecules/Button/button.css
+++ b/components/Molecules/Button/button.css
@@ -1,25 +1,125 @@
 .Button {
-  @apply font-medium;
+  display: inline-flex;
+  padding: rem-convert(12px) rem-convert(24px);
+  align-items: center;
+  justify-content: center;
+  border-radius: rem-convert(8px);
+  background: var(--black);
+  color: var(--white);
+  text-align: center;
+  text-transform: uppercase;
+  kerning: 5%;
+  font-size: var(--font-size-button-large);
+  font-family: var(--font-family-button-large);
+  font-weight: var(--font-weight-button-large);
+  line-height: var(--line-height-button-large);
+
+  cursor: pointer;
+  text-decoration: none;
+
+  & > span.icon {
+    @apply w-5 h-5;
+    &-left {
+      padding-right: rem-convert(6px);
+    }
+    &-right {
+      padding-left: rem-convert(6px);
+    }
+  }
+
+  &--xl {
+    width: 100%;
+  }
+
+  &--large,
+  &--xl {
+    padding: 16px 24px;
+  }
+
+  &--medium {
+    padding: 8px 16px;
+  }
+
+  &--small {
+    padding: 8px;
+    font-size: var(--font-size-button-small);
+    font-family: var(--font-family-button-small);
+    font-weight: var(--font-weight-button-small);
+    line-height: var(--line-height-button-small);
+  }
 
   &--primary {
-    @apply bg-vermillon-light hover:bg-vermillon-light text-gray-200 rounded-lg shadow-lg p-3;
+    background: var(--black);
+    color: var(--white);
+
+    &:hover {
+      background: var(--grey-dark);
+    }
+
+    &:disabled {
+      background: var(--grey-lighter);
+      color: var(--white);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--vermillon-medium);
+    }
   }
 
   &--secondary {
-    @apply bg-transparent hover:bg-vermillon-light border-vermillon-light border-2 text-gray-200 rounded-lg shadow-lg p-3;
+    background: var(--white);
+    color: var(--black);
+    border: 1px solid var(--black);
+
+    &:hover {
+      border-color: var(--grey-dark);
+      color: var(--grey-dark);
+    }
+
+    &:disabled {
+      border-color: var(--grey-lighter);
+      color: var(--grey-lighter);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--vermillon-medium);
+    }
   }
 
-  &--link {
-    @apply text-vermillon-light;
+  &--tertiary {
+    background: none;
+    color: var(--black);
+
+    &:hover {
+      color: var(--grey-dark);
+    }
+
+    &:disabled {
+      background: var(--white);
+      color: var(--grey-lighter);
+    }
+
+    &:focus-visible {
+      outline: none;
+      background: var(--vermillon-lightest);
+    }
   }
 
-  &--small {
-    &-primary {
-      @apply bg-vermillon-light hover:bg-vermillon-light p-4 flex items-center justify-center text-gray-200 rounded-full;
+  &--destructive {
+    background: var(--error);
+    color: var(--white);
+
+    &:hover {
+      background: var(--error-dark);
+    }
+
+    &:disabled {
+      background: var(--error-lightest);
+      color: var(--white);
     }
 
-    &-secondary {
-      @apply flex items-center justify-center w-10 h-10 p-4 font-medium rounded-full bg-grey-medium hover:bg-charcoal-medium hover:text-grey-medium text-charcoal-medium;
+    &:focus-visible {
+      outline: 2px solid var(--error-darkest);
     }
   }
 }
diff --git a/components/variables.css b/components/variables.css
index dc42378..1510c1e 100644
--- a/components/variables.css
+++ b/components/variables.css
@@ -104,13 +104,14 @@
   --font-family-paragraph-6: 'Roboto Condensed';
   --font-family-paragraph-7: 'Roboto Condensed';
 
-  --font-size-button-large: var(--font-size-sm);
-  --font-size-button-medium: var(--font-size-xs);
-  --font-size-button-small: var(--font-size-2xs);
+  --font-size-button-large: rem-convert(14px);
+  --font-size-button-small: rem-convert(12px);
 
-  --font-weight-button-large: 500;
-  --font-weight-button-medium: 500;
-  --font-weight-button-small: 400;
+  --line-height-button-large: rem-convert(19px);
+  --line-height-button-small: rem-convert(16px);
+
+  --font-weight-button-large: 600;
+  --font-weight-button-small: 600;
 
   --font-family-button-large: 'Poppins';
   --font-family-button-medium: 'Poppins';