diff --git a/src/components/buttons/Button.tsx b/src/components/buttons/Button.tsx
index 1af532eb6..841e257da 100644
--- a/src/components/buttons/Button.tsx
+++ b/src/components/buttons/Button.tsx
@@ -19,62 +19,42 @@ interface IButton {
   ariaDisabled?: boolean;
 }
 
-// const sizeClassMap: { [key in ButtonSize]: string } = {
-//   large: styles.large,
-//   medium: styles.medium,
-//   small: styles.small,
-// };
-
-// const typeClassMap: { [key in ButtonType]: string } = {
-//   primary: styles.primary,
-//   secondary: styles.secondary,
-// };
-
-// const backgroundClassMap: { [key in ButtonBackground]: string } = {
-//   dark: styles.dark,
-//   light: styles.light,
-// };
+const sizeClassMap: { [key in ButtonSize]: string } = {
+  large: styles.large,
+  medium: styles.medium,
+  small: styles.small,
+};
 
-// const iconColorClassMap: { [key in ButtonBackground]: string } = {
-//   dark: styles.iconColorDark,
-//   light: styles.iconColorLight,
-// };
+const typeClassMap: { [key in ButtonType]: string } = {
+  primary: styles.primary,
+  secondary: styles.secondary,
+};
 
-// const iconSizeClassMap: { [key in ButtonSize]: string } = {
-//   large: styles.iconLarge,
-//   medium: styles.iconMedium,
-//   small: styles.iconSmall,
-// };
+const backgroundClassMap: { [key in ButtonBackground]: string } = {
+  dark: styles.dark,
+  light: styles.light,
+};
 
 const Button = ({
-  // size = "large",
-  // type = "primary",
+  size = "large",
+  type = "primary",
   onClick,
   children,
   disabled,
-  // loading,
+  loading,
   ariaDisabled,
-  // icon,
-  // background = "dark",
+  background = "dark",
 }: IButton) => {
-  // const className = `${styles.button} ${typeClassMap[type]} ${sizeClassMap[size]} ${backgroundClassMap[background]} ${loading ? styles.loading : ""}`;
-  // const iconColorClass = `${iconColorClassMap[background]} ${iconSizeClassMap[size]}`;
+  const className = `${styles.button} ${typeClassMap[type]} ${sizeClassMap[size]} ${backgroundClassMap[background]} ${loading ? styles.loading : ""}`;
 
   return (
     <button
-      className={styles.button}
+      className={className}
       onClick={onClick}
       disabled={disabled}
       aria-disabled={ariaDisabled}
     >
       {children}
-      {/* {icon === "iconLeft" && (
-        <span className={`${styles.iconLeft} ${iconColorClass}`}></span>
-      )}
-     
-      {icon === "iconRight" && (
-        <span className={`${styles.iconRight} ${iconColorClass}`}></span>
-      )} */}
     </button>
   );
 };
diff --git a/src/components/buttons/button.module.css b/src/components/buttons/button.module.css
index b119b448c..0c7625922 100644
--- a/src/components/buttons/button.module.css
+++ b/src/components/buttons/button.module.css
@@ -1,209 +1,3 @@
-:where(.button, .button-secondary) {
-  --_button-color-background: var(
-    --button-color-background,
-    var(--color-background-interactive-primary-default)
-  );
-  font-size: var(--button-font-size, var(--font-size-s));
-  font-weight: var(--button-font-weight, 600);
-  font-family: var(--button-font-family, inherit);
-  background: var(
-    --_button-color-background,
-    var(--color-background-interactive-primary-default, var(--background-color))
-  );
-  color: var(
-    --button-color-foreground,
-    var(--color-foreground-neutral-inverted, black)
-  );
-  border: var(--button-border-width, var(--border-width-base)) solid
-    var(--button-color-border, var(--_button-color-background));
-  border-radius: var(--radius-large, var(--radius-medium));
-
-  /* 
-    We're using padding to control the height of buttons.
-    Instead of padding top + padding bottom + text height = button height
-    We're setting a min-height to ensure the button is at least a certain height.
-    This height is also the same as the input height.
-  */
-  min-height: var(--button-height, var(--size-input-height-medium, 2rem));
-  /* 
-    The components in Figma does have padding on top and bottom, 
-    but if a user zooms and text wraps onto multiple lines, 
-    that padding will only make the buttons really awkward.
-  */
-  padding-block: 0;
-  padding-inline: var(--button-padding-inline, 0.75rem);
-  text-align: center;
-  line-height: 1;
-  outline-offset: var(--focus-ring-offset);
-  outline-width: var(--focus-ring-width);
-  outline-color: transparent;
-  outline-color: oklch(from var(--focus-ring-color, transparent) l c h / 0%);
-  outline-style: var(--focus-ring-style);
-
-  transition:
-    outline 145ms ease,
-    background-color 145ms ease,
-    transform 145ms ease;
-
-  &:focus-visible {
-    outline-color: var(--focus-ring-color);
-    z-index: 1;
-  }
-
-  &:where(:active) {
-    transform: scale(0.97);
-  }
-}
-
-:where(.button) {
-  --button-height: var(--size-input-height-medium);
-  --button-padding-inline: var(--spacing-m);
-  --button-font-size: var(--font-size-s);
-  --button-gap: var(--spacing-xs);
-}
-
-:where(.button-s) {
-  --button-height: var(--size-input-height-small);
-  --button-padding-inline: var(--spacing-m);
-  --button-font-size: var(--font-size-xs);
-  --button-gap: var(--spacing-2xs);
-}
-
-:where(.button-l) {
-  --button-height: var(--size-input-height-large);
-  --button-padding-inline: var(--spacing-l);
-  --button-font-size: var(--font-size-m);
-  --button-gap: var(--spacing-xs);
-}
-
-:where(.button),
-:where(.button-secondary) {
-  &:where(:not(:active)):focus-visible {
-    outline-offset: var(--focus-ring-offset);
-  }
-}
-
-:where(.button) {
-  --button-color-foreground: var(--color-foreground-neutral-inverted);
-  --button-color-background: var(
-    --color-background-interactive-primary-default
-  );
-  --button-color-border: var(
-    --button-color-border,
-    var(--_button-color-background)
-  );
-  &:where(:not(:active):hover) {
-    --button-color-background: var(
-      --color-background-interactive-primary-hover
-    );
-  }
-
-  &:where(:is(:active)) {
-    --button-color-background: var(
-      --color-background-interactive-primary-active
-    );
-  }
-}
-
-:where(.button-secondary) {
-  --button-color-foreground: var(--color-foreground-interactive-default);
-  --button-color-background: var(
-    --color-background-interactive-secondary-default
-  );
-  --button-color-border: var(--color-border-interactive-default);
-
-  &:where(:not(:active):hover) {
-    --button-color-background: var(
-      --color-background-interactive-secondary-hover
-    );
-    --button-color-foreground: var(--color-foreground-interactive-hover);
-    --button-color-border: var(--color-border-interactive-hover);
-  }
-
-  &:where(:is(:active)) {
-    --button-color-background: var(
-      --color-background-interactive-secondary-active
-    );
-    --button-color-foreground: var(--color-foreground-interactive-active);
-    --button-color-border: var(--color-border-interactive-active);
-  }
-}
-
-:where(.button) {
-  --button-height: var(--size-input-height-medium);
-  --button-padding-inline: var(--spacing-m);
-  --button-font-size: var(--font-size-s);
-  --button-gap: var(--spacing-xs);
-}
-
-:where(.button-s) {
-  --button-height: var(--size-input-height-small);
-  --button-padding-inline: var(--spacing-m);
-  --button-font-size: var(--font-size-xs);
-  --button-gap: var(--spacing-2xs);
-}
-
-:where(.button-l) {
-  --button-height: var(--size-input-height-large);
-  --button-padding-inline: var(--spacing-l);
-  --button-font-size: var(--font-size-m);
-  --button-gap: var(--spacing-xs);
-}
-
-:where(.button),
-:where(.button-secondary) {
-  &:where(:not(:active)):focus-visible {
-    outline-offset: var(--focus-ring-offset);
-  }
-}
-
-:where(.button) {
-  --button-color-foreground: var(--color-foreground-neutral-inverted);
-  --button-color-background: var(
-    --color-background-interactive-primary-default
-  );
-  --button-color-border: var(
-    --button-color-border,
-    var(--_button-color-background)
-  );
-  &:where(:not(:active):hover) {
-    --button-color-background: var(
-      --color-background-interactive-primary-hover
-    );
-  }
-
-  &:where(:is(:active)) {
-    --button-color-background: var(
-      --color-background-interactive-primary-active
-    );
-  }
-}
-
-:where(.button-secondary) {
-  --button-color-foreground: var(--color-foreground-interactive-default);
-  --button-color-background: var(
-    --color-background-interactive-secondary-default
-  );
-  --button-color-border: var(--color-border-interactive-default);
-
-  &:where(:not(:active):hover) {
-    --button-color-background: var(
-      --color-background-interactive-secondary-hover
-    );
-    --button-color-foreground: var(--color-foreground-interactive-hover);
-    --button-color-border: var(--color-border-interactive-hover);
-  }
-
-  &:where(:is(:active)) {
-    --button-color-background: var(
-      --color-background-interactive-secondary-active
-    );
-    --button-color-foreground: var(--color-foreground-interactive-active);
-    --button-color-border: var(--color-border-interactive-active);
-  }
-}
-
-/* Old code 
 .button {
   max-width: 320px;
   height: fit-content;
@@ -216,13 +10,13 @@
 }
 
 .dark {
-  background-color: var(--outline-dark);
+  background-color: var(--background-button-outline-dark);
   color: var(--text-primary-light);
 }
 
 .light {
-  background-color: var(--Gray-100);
-  color: var(--Gray-900);
+  background-color: var(--background-bg-light-primary);
+  color: var(--text-primary);
 }
 
 .large {
@@ -245,61 +39,27 @@
 }
 
 .secondary.large.dark {
-  border: 1px solid var(--light-500);
+  border: 1px solid var(--background-button-outline-light);
 }
 
 .secondary.large.light {
-  border: 1px solid var(--outline-dark);
+  border: 1px solid var(--background-button-outline-dark);
 }
 
 .secondary.medium.dark {
-  border: 1px solid var(--light-500);
+  border: 1px solid var(--background-button-outline-light);
 }
 
 .secondary.medium.light {
-  border: 1px solid var(--outline-dark);
+  border: 1px solid var(--background-button-outline-dark);
 }
 
 .secondary.small.dark {
-  border: 0.5px solid var(--light-500);
+  border: 0.5px solid var(--background-button-outline-light);
 }
 
 .secondary.small.light {
-  border: 0.5px solid var(--outline-dark);
-}
-
-.iconLeft {
-  display: inline-block;
-  -webkit-mask: url("/_assets/arrowLeft.svg") no-repeat 50% 50%;
-}
-
-.iconRight {
-  display: inline-block;
-  width: 0.42188rem;
-  -webkit-mask: url("/_assets/arrowRight.svg") no-repeat 50% 50%;
-}
-
-.iconColorDark {
-  color: var(--text-primary-light);
-}
-
-.iconColorLight {
-  background-color: var(--Gray-900);
-}
-
-.iconLarge {
-  width: 1.5rem;
-  height: 1.5rem;
-}
-
-.iconMedium {
-  width: 1.125rem;
-  height: 1.125rem;
-}
-
-.iconSmall {
-  width: 0.875rem;
-  height: 0.875rem;
+  border: 0.5px solid var(--background-button-outline-dark);
 }
 
 .loading {
@@ -325,4 +85,4 @@
   to {
     transform: rotate(360deg);
   }
-} */
+}
diff --git a/src/components/customerCases/customerCase/contactInformation/contactSelector/ContactSelector.tsx b/src/components/customerCases/customerCase/contactInformation/contactSelector/ContactSelector.tsx
index efd70bd2b..e086b10b2 100644
--- a/src/components/customerCases/customerCase/contactInformation/contactSelector/ContactSelector.tsx
+++ b/src/components/customerCases/customerCase/contactInformation/contactSelector/ContactSelector.tsx
@@ -42,13 +42,14 @@ export default function ContactSelector({
     <>
       <div className={styles.locationSection}>
         {locations.map((location) => (
+          //Todo: replace this with tag component
           <Button
             type={
               location._id === selectedOrDefaultLocationId
                 ? "primary"
                 : "secondary"
             }
-            size={"small"}
+            size={"medium"}
             background={
               location._id === selectedOrDefaultLocationId ? "dark" : "light"
             }
diff --git a/src/components/link/link.module.css b/src/components/link/link.module.css
index 0e37d7c2b..ca43e6f9f 100644
--- a/src/components/link/link.module.css
+++ b/src/components/link/link.module.css
@@ -52,7 +52,7 @@
     height: 24px;
     display: inline-block;
     -webkit-mask-size: cover;
-    background-color: var(--text-primary); 
+    background-color: var(--text-primary);
     -webkit-mask: url("/_assets/arrow.svg") no-repeat 50% 50%;
   }
 }
diff --git a/src/styles/global.css b/src/styles/global.css
index 7dc50a233..3ed1eb8d8 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -9,30 +9,6 @@ html {
 }
 
 :root {
-  /* --_button-color-background: var(--background-bg-dark);
-  --button-color-background: var(--surface-yellow);
-  --button-color-foreground: var(--Blue-200);
-  --button-color-border: var(--Blue-500); */
-
-  --color-background-interactive-primary-default: var(--Lila-200);
-  --color-background-interactive-primary-hover: var(--Lila-400);
-  --color-background-interactive-primary-active: var(--surface-yellow);
-
-  --color-background-interactive-secondary-default: var(--background-bg-blue);
-  --color-background-interactive-secondary-hover: var(--surface-blue);
-  --color-background-interactive-secondary-active: var(--surface-green);
-
-  --color-foreground-neutral-inverted: var(--surface-yellow);
-  --color-foreground-interactive-default: var(--surface-red);
-  --color-foreground-interactive-hover: var(--surface-yellow);
-  --color-foreground-interactive-active: var(--surface-yellow);
-
-  --color-border-interactive-default: var(--surface-yellow);
-  --color-border-interactive-hover: var(--surface-yellow);
-  --color-border-interactive-active: var(--surface-yellow);
-  --focus-ring-color: var(--surface-yellow);
-
-  /* ---------------- */
   --Blue-500: #3840ff;
   --Blue-700: #0014cd;
   --Blue-300: #c3c8f6;
@@ -50,7 +26,7 @@ html {
   --Green-300: #58bb5c;
   --Green-200: #8cd18f;
   --Green-100: #b2e0b3;
-  --Green-50: #e6f5e7; 
+  --Green-50: #e6f5e7;
 
   --Red-900: #46100a;
   --Red-700: #7c2318;