diff --git a/src/components/HSegmentedControl.tsx b/src/components/HSegmentedControl.tsx
index f45f169..e7d49fd 100644
--- a/src/components/HSegmentedControl.tsx
+++ b/src/components/HSegmentedControl.tsx
@@ -8,9 +8,15 @@ type HSegmentedControlProps = {
   options?: Option[];
   value?: Option['value'];
   onChange?: (value: Option['value']) => void;
+  extendClassName?: HTMLDivElement['className'];
 };
 
-export function HSegmentedControl({ options = [], value, onChange }: HSegmentedControlProps) {
+export function HSegmentedControl({
+  options = [],
+  value,
+  onChange,
+  extendClassName,
+}: HSegmentedControlProps) {
   const [selected, setSelected] = useState(value ?? options[0].value ?? null);
   const [sliderPosition, setSliderPosition] = useState(0);
   const [sliderWidth, setSliderWidth] = useState(0);
@@ -28,7 +34,7 @@ export function HSegmentedControl({ options = [], value, onChange }: HSegmentedC
   }, []);
 
   return (
-    <div className={styles.segmented_control}>
+    <div className={cx(styles.segmented_control, extendClassName)}>
       <div className={styles.options}>
         {options.map((option, index) => (
           <div
diff --git a/src/components/VSegmentedControl.tsx b/src/components/VSegmentedControl.tsx
index b358837..191e341 100644
--- a/src/components/VSegmentedControl.tsx
+++ b/src/components/VSegmentedControl.tsx
@@ -8,9 +8,15 @@ type VSegmentedControlProps = {
   options?: Option[];
   value?: Option['value'];
   onChange?: (value: Option['value']) => void;
+  extendClassName?: HTMLDivElement['className'];
 };
 
-export function VSegmentedControl({ options = [], value, onChange }: VSegmentedControlProps) {
+export function VSegmentedControl({
+  options = [],
+  value,
+  onChange,
+  extendClassName,
+}: VSegmentedControlProps) {
   const [selected, setSelected] = useState(value ?? options[0].value ?? null);
   const [sliderPosition, setSliderPosition] = useState(0);
   const [sliderHeight, setSliderHeight] = useState(0);
@@ -28,7 +34,7 @@ export function VSegmentedControl({ options = [], value, onChange }: VSegmentedC
   }, []);
 
   return (
-    <div className={styles.segmented_control}>
+    <div className={cx(styles.segmented_control, extendClassName)}>
       <div className={styles.options}>
         {options.map((option, index) => (
           <div