diff --git a/components/common/Segment/index.module.scss b/components/common/Segment/index.module.scss
index cb0aa7e8..fd87b69d 100644
--- a/components/common/Segment/index.module.scss
+++ b/components/common/Segment/index.module.scss
@@ -1,4 +1,4 @@
-.Segment {
+.segment {
   color: $grey-55;
   cursor: pointer;
   flex-grow: 1;
@@ -40,3 +40,7 @@
     width: 100%;
   }
 }
+
+:global(.blended) .segment input:checked + label {
+  background: var(--card-bg);
+}
diff --git a/components/common/Segment/index.tsx b/components/common/Segment/index.tsx
index f975c3dd..69d3facc 100644
--- a/components/common/Segment/index.tsx
+++ b/components/common/Segment/index.tsx
@@ -21,7 +21,7 @@ const Segment: React.FC<Props> = (props: Props) => {
   }
 
   return (
-    <div className="Segment">
+    <div className={styles.segment}>
       <input
         name={props.groupName}
         id={props.name}
diff --git a/components/common/SegmentedControl/index.module.scss b/components/common/SegmentedControl/index.module.scss
index d6aa0078..33dbda4b 100644
--- a/components/common/SegmentedControl/index.module.scss
+++ b/components/common/SegmentedControl/index.module.scss
@@ -23,10 +23,6 @@
     &.blended {
       background: var(--input-bound-bg);
       border-radius: $full-corner;
-
-      .Segment input:checked + label {
-        background: var(--card-bg);
-      }
     }
 
     &.grow {
diff --git a/components/common/SegmentedControl/index.tsx b/components/common/SegmentedControl/index.tsx
index d45f02fc..c1e00c97 100644
--- a/components/common/SegmentedControl/index.tsx
+++ b/components/common/SegmentedControl/index.tsx
@@ -26,6 +26,7 @@ const SegmentedControl: React.FC<Props> = ({
       [styles.blended]: blended,
       [styles.grow]: grow,
       [styles.gap]: gap,
+      blended: blended,
     },
     className,
     elementClass