diff --git a/components/Button/index.scss b/components/Button/index.scss
index f3b9bfc0..585fb876 100644
--- a/components/Button/index.scss
+++ b/components/Button/index.scss
@@ -43,7 +43,7 @@
       stroke: #ff4d4d;
     }
 
-    &.Active.Save {
+    &.Save {
       color: #ff4d4d;
 
       .Accessory svg {
@@ -99,24 +99,27 @@
     }
   }
 
-  &.save:hover {
-    color: #ff4d4d;
-
+  &.Save {
     .Accessory svg {
-      fill: #ff4d4d;
-      stroke: #ff4d4d;
+      fill: none;
+      stroke: var(--button-text);
     }
-  }
 
-  &.save.Active {
-    color: #ff4d4d;
+    &.Saved {
+      color: #ff4d4d;
+
+      .Accessory svg {
+        fill: #ff4d4d;
+        stroke: none;
+      }
+    }
 
     &:hover {
-      color: darken(#ff4d4d, 30);
+      color: #ff4d4d;
 
-      .icon svg {
-        fill: darken(#ff4d4d, 30);
-        stroke: darken(#ff4d4d, 30);
+      .Accessory svg {
+        fill: none;
+        stroke: #ff4d4d;
       }
     }
   }
diff --git a/components/Button/index.tsx b/components/Button/index.tsx
index f75b9a48..8594c129 100644
--- a/components/Button/index.tsx
+++ b/components/Button/index.tsx
@@ -41,16 +41,12 @@ const Button = React.forwardRef<HTMLButtonElement, Props>(function button(
   },
   forwardedRef
 ) {
-  const classes = classNames(
-    {
-      Button: true,
-      Active: active,
-      Blended: blended,
-      Contained: contained,
-    },
-    buttonSize,
-    props.className
-  )
+  const classes = classNames(buttonSize, props.className, {
+    Button: true,
+    Active: active,
+    Blended: blended,
+    Contained: contained,
+  })
 
   const leftAccessoryClasses = classNames(leftAccessoryClassName, {
     Accessory: true,
diff --git a/components/Header/index.tsx b/components/Header/index.tsx
index 18cac289..55b49649 100644
--- a/components/Header/index.tsx
+++ b/components/Header/index.tsx
@@ -179,24 +179,18 @@ const Header = () => {
   }
 
   const saveButton = () => {
-    if (party.favorited)
-      return (
-        <Button
-          leftAccessoryIcon={<SaveIcon />}
-          blended={true}
-          text="Saved"
-          onClick={toggleFavorite}
-        />
-      )
-    else
-      return (
-        <Button
-          leftAccessoryIcon={<SaveIcon />}
-          blended={true}
-          text="Save"
-          onClick={toggleFavorite}
-        />
-      )
+    return (
+      <Button
+        leftAccessoryIcon={<SaveIcon />}
+        className={classNames({
+          Save: true,
+          Saved: party.favorited,
+        })}
+        blended={true}
+        text={party.favorited ? 'Saved' : 'Save'}
+        onClick={toggleFavorite}
+      />
+    )
   }
 
   const image = () => {