diff --git a/components/common/SelectGroup/index.module.scss b/components/common/SelectGroup/index.module.scss
index 11d4ee17..3962928e 100644
--- a/components/common/SelectGroup/index.module.scss
+++ b/components/common/SelectGroup/index.module.scss
@@ -1,5 +1,5 @@
-.SelectGroup {
-  .Label {
+.group {
+  .label {
     align-items: center;
     color: var(--text-tertiary);
     display: flex;
@@ -14,7 +14,7 @@
       padding-top: $unit-2x;
     }
 
-    .Separator {
+    .separator {
       background: var(--select-separator);
       border-radius: 1px;
       display: block;
diff --git a/components/common/SelectGroup/index.tsx b/components/common/SelectGroup/index.tsx
index a41667a5..63820208 100644
--- a/components/common/SelectGroup/index.tsx
+++ b/components/common/SelectGroup/index.tsx
@@ -17,10 +17,10 @@ const defaultProps = {
 const SelectGroup = (props: Props) => {
   return (
     <React.Fragment>
-      <RadixSelect.Group className="SelectGroup">
-        <RadixSelect.Label className="Label">
+      <RadixSelect.Group className={styles.group}>
+        <RadixSelect.Label className={styles.label}>
           {props.label}
-          <RadixSelect.Separator className="Separator" />
+          <RadixSelect.Separator className={styles.separator} />
         </RadixSelect.Label>
         {props.children}
       </RadixSelect.Group>