diff --git a/src/components/ColorStand.tsx b/src/components/ColorStand.tsx
index e6f0eef..947fa1c 100644
--- a/src/components/ColorStand.tsx
+++ b/src/components/ColorStand.tsx
@@ -5,8 +5,8 @@ import { useCopyToClipboard } from 'react-use';
 import NoColor from '../assets/NoColor.svg';
 import { useColorFunction } from '../ColorFunctionContext';
 import styles from './ColorStand.module.css';
+import { HSegmentedControl } from './HSegmentedControl';
 import { NotificationType, useNotification } from './Notifications';
-import { SegmentedControl } from './SegmentedControl';
 
 type ColorValueProps = {
   value: string | null;
@@ -102,7 +102,7 @@ export function ColorStand({ title, color }: ColorStandProps) {
         </div>
       </div>
       <div className={styles.color_describe}>
-        <SegmentedControl
+        <HSegmentedControl
           options={[
             { label: 'HEX', value: 'hex' },
             { label: 'RGB', value: 'rgb' },
diff --git a/src/components/SegmentedControl.module.css b/src/components/HSegmentedControl.module.css
similarity index 100%
rename from src/components/SegmentedControl.module.css
rename to src/components/HSegmentedControl.module.css
diff --git a/src/components/SegmentedControl.tsx b/src/components/HSegmentedControl.tsx
similarity index 92%
rename from src/components/SegmentedControl.tsx
rename to src/components/HSegmentedControl.tsx
index 65db4b8..93a8e47 100644
--- a/src/components/SegmentedControl.tsx
+++ b/src/components/HSegmentedControl.tsx
@@ -1,7 +1,7 @@
 import cx from 'clsx';
 import { isEqual, isNil } from 'lodash-es';
 import { useCallback, useRef, useState } from 'react';
-import styles from './SegmentedControl.module.css';
+import styles from './HSegmentedControl.module.css';
 
 type Option = {
   label: string;
@@ -14,7 +14,7 @@ type SegmentedConttrolProps = {
   onChange?: (value: Option['value']) => void;
 };
 
-export function SegmentedControl({ options = [], value, onChange }: SegmentedConttrolProps) {
+export function HSegmentedControl({ options = [], value, onChange }: SegmentedConttrolProps) {
   const [selected, setSelected] = useState(value ?? options[0].value ?? null);
   const [sliderPosition, setSliderPosition] = useState(0);
   const [sliderWidth, setSliderWidth] = useState(0);