diff --git a/packages/storybook/src/stories/Button.stories.tsx b/packages/storybook/src/stories/Button.stories.tsx
index e3a2654..7a4f6f5 100644
--- a/packages/storybook/src/stories/Button.stories.tsx
+++ b/packages/storybook/src/stories/Button.stories.tsx
@@ -3,6 +3,7 @@ import type { Meta, StoryObj } from "storybook-solidjs";
 import { Button } from "@codeui/kit";
 import { For } from "solid-js";
 import { ShareIcon } from "./components/ShareIcon.jsx";
+import { DocsItemsContainer, DocsMultipleItemsContainer } from "./components/Section.jsx";
 
 const buttonThemes = ["primary", "secondary", "tertiary", "negative", "caution"] as const;
 
@@ -137,10 +138,10 @@ export const Ghost: Story = {
 
 export const Loading: Story = {
 	render: () => (
-		<div class={"multipleItemsContainer"}>
+		<DocsMultipleItemsContainer>
 			<For each={buttonThemes}>
 				{theme => (
-					<div class={"itemsContainer"}>
+					<DocsItemsContainer>
 						<For each={buttonSizes}>
 							{size => (
 								<Button size={size} theme={theme} loading>
@@ -148,9 +149,9 @@ export const Loading: Story = {
 								</Button>
 							)}
 						</For>
-					</div>
+					</DocsItemsContainer>
 				)}
 			</For>
-		</div>
+		</DocsMultipleItemsContainer>
 	),
 };
diff --git a/packages/storybook/src/stories/Checkbox.stories.tsx b/packages/storybook/src/stories/Checkbox.stories.tsx
index daed96d..32aefff 100644
--- a/packages/storybook/src/stories/Checkbox.stories.tsx
+++ b/packages/storybook/src/stories/Checkbox.stories.tsx
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "storybook-solidjs";
 
 import { Checkbox, CheckBoxProps } from "@codeui/kit";
 import { For } from "solid-js";
+import { DocsMultipleItemsContainer } from "./components/Section.jsx";
 
 const checkboxSizes = ["xs", "sm", "md", "lg", "xl"] as const;
 
@@ -43,7 +44,7 @@ export const CheckboxDefault: Story = {
 
 export const Sizes: Story = {
 	render: props => (
-		<div class={"multipleItemsContainer"}>
+		<DocsMultipleItemsContainer>
 			<For each={checkboxSizes}>
 				{size => (
 					<Checkbox
@@ -54,13 +55,13 @@ export const Sizes: Story = {
 					/>
 				)}
 			</For>
-		</div>
+		</DocsMultipleItemsContainer>
 	),
 };
 
 export const Validation: Story = {
 	render: props => (
-		<div class={"multipleItemsContainer"}>
+		<DocsMultipleItemsContainer>
 			<For each={checkboxSizes}>
 				{size => (
 					<Checkbox
@@ -72,6 +73,6 @@ export const Validation: Story = {
 					/>
 				)}
 			</For>
-		</div>
+		</DocsMultipleItemsContainer>
 	),
 };
diff --git a/packages/storybook/src/stories/Dialog.stories.tsx b/packages/storybook/src/stories/Dialog.stories.tsx
index 28a883f..8461664 100644
--- a/packages/storybook/src/stories/Dialog.stories.tsx
+++ b/packages/storybook/src/stories/Dialog.stories.tsx
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "storybook-solidjs";
 
 import { Button, Dialog, DialogPanelContent, DialogPanelFooter } from "@codeui/kit";
 import { createSignal, For } from "solid-js";
+import { DocsItemsContainer } from "./components/Section.jsx";
 
 // More on how to set up stories at: https://storybook.js.org/docs/7.0/solid/writing-stories/introduction
 const meta = {
@@ -12,11 +13,12 @@ const meta = {
 } satisfies Meta<typeof Dialog>;
 
 export default meta;
+
 type Story = StoryObj<typeof meta>;
 
 export const Sizes: Story = {
 	render: () => (
-		<div class={"itemsContainer"}>
+		<DocsItemsContainer>
 			<For each={["xs", "sm", "md", "lg", "xl", "full"] as const}>
 				{size => {
 					const [open, setOpen] = createSignal(false);
@@ -42,7 +44,7 @@ export const Sizes: Story = {
 					);
 				}}
 			</For>
-		</div>
+		</DocsItemsContainer>
 	),
 };
 
@@ -50,7 +52,7 @@ export const OverflowContent: Story = {
 	render: () => {
 		const [open, setOpen] = createSignal(false);
 		return (
-			<div class={"itemsContainer"}>
+			<DocsItemsContainer>
 				<Button theme={"secondary"} onClick={() => setOpen(true)}>
 					Open Dialog
 				</Button>
@@ -94,7 +96,7 @@ export const OverflowContent: Story = {
 						<Button theme={"primary"}>Confirm</Button>
 					</DialogPanelFooter>
 				</Dialog>
-			</div>
+			</DocsItemsContainer>
 		);
 	},
 };
diff --git a/packages/storybook/src/stories/IconButton.stories.tsx b/packages/storybook/src/stories/IconButton.stories.tsx
index 23a8e04..8aac035 100644
--- a/packages/storybook/src/stories/IconButton.stories.tsx
+++ b/packages/storybook/src/stories/IconButton.stories.tsx
@@ -1,8 +1,9 @@
 import type { Meta, StoryObj } from "storybook-solidjs";
 
-import { Button, IconButton } from "@codeui/kit";
+import { IconButton } from "@codeui/kit";
 import { For } from "solid-js";
 import { ShareIcon } from "./components/ShareIcon.jsx";
+import { DocsItemsContainer, DocsMultipleItemsContainer } from "./components/Section.jsx";
 
 const buttonThemes = ["primary", "secondary", "tertiary", "negative", "caution"] as const;
 
@@ -12,7 +13,7 @@ const buttonSizes = ["xs", "sm", "md", "lg", "xl"] as const;
 const meta = {
 	title: "DesignSystem/IconButton",
 	component: props => (
-		<IconButton aria-label={"Icon"} {...props}>
+		<IconButton {...props}>
 			<ShareIcon />
 		</IconButton>
 	),
@@ -37,7 +38,7 @@ const meta = {
 	// argTypes: {
 	// 	backgroundColor: { control: "color" },
 	// },
-} satisfies Meta<typeof Button>;
+} satisfies Meta<typeof IconButton>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -122,10 +123,10 @@ export const Pill: Story = {
 
 export const Loading: Story = {
 	render: () => (
-		<div class={"multipleItemsContainer"}>
+		<DocsMultipleItemsContainer>
 			<For each={buttonThemes}>
 				{theme => (
-					<div class={"itemsContainer"}>
+					<DocsItemsContainer>
 						<For each={buttonSizes}>
 							{size => (
 								<IconButton aria-label={"Icon"} size={size} theme={theme} loading>
@@ -133,9 +134,9 @@ export const Loading: Story = {
 								</IconButton>
 							)}
 						</For>
-					</div>
+					</DocsItemsContainer>
 				)}
 			</For>
-		</div>
+		</DocsMultipleItemsContainer>
 	),
 };
diff --git a/packages/storybook/src/stories/RadioList.stories.tsx b/packages/storybook/src/stories/RadioList.stories.tsx
index 0940a81..c126bcc 100644
--- a/packages/storybook/src/stories/RadioList.stories.tsx
+++ b/packages/storybook/src/stories/RadioList.stories.tsx
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "storybook-solidjs";
 
 import { RadioList, RadioListItem, RadioListProps } from "@codeui/kit";
 import { For } from "solid-js";
+import { DocsMultipleItemsContainer } from "./components/Section.jsx";
 
 const radioSizes = ["xs", "sm", "md", "lg", "xl"] as const;
 
@@ -63,7 +64,7 @@ export const RadioListVertical: Story = {
 
 export const Sizes: Story = {
 	render: (props: RadioListProps) => (
-		<div class={"multipleItemsContainer"}>
+		<DocsMultipleItemsContainer>
 			<For each={radioSizes}>
 				{size => (
 					<meta.component
@@ -74,13 +75,13 @@ export const Sizes: Story = {
 					/>
 				)}
 			</For>
-		</div>
+		</DocsMultipleItemsContainer>
 	),
 };
 
 export const Validation: Story = {
 	render: (props: RadioListProps) => (
-		<div class={"multipleItemsContainer"}>
+		<DocsMultipleItemsContainer>
 			<For each={radioSizes}>
 				{size => (
 					<meta.component
@@ -92,6 +93,6 @@ export const Validation: Story = {
 					/>
 				)}
 			</For>
-		</div>
+		</DocsMultipleItemsContainer>
 	),
 };
diff --git a/packages/storybook/src/stories/SegmentedControl.stories.tsx b/packages/storybook/src/stories/SegmentedControl.stories.tsx
new file mode 100644
index 0000000..b0bdb02
--- /dev/null
+++ b/packages/storybook/src/stories/SegmentedControl.stories.tsx
@@ -0,0 +1,208 @@
+import type { Meta, StoryObj } from "storybook-solidjs";
+
+import { Button, SegmentedControl, SegmentedControlItem } from "@codeui/kit";
+import { createSignal, For } from "solid-js";
+import { DocsItemsContainer } from "./components/Section.jsx";
+
+const sizes = ["xs", "sm", "md", "lg", "xl"] as const;
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/solid/writing-stories/introduction
+const meta = {
+	title: "DesignSystem/SegmentedControl",
+	component: SegmentedControl,
+	tags: ["autodocs"],
+	argTypes: {
+		size: {
+			options: sizes,
+			control: { type: "select" },
+		},
+		variant: {
+			options: ["solid", "bordered"],
+			control: { type: "inline-radio" },
+		},
+		pill: {
+			type: "boolean",
+		},
+		theme: {
+			defaultValue: "neutral",
+			options: ["neutral", "primary"],
+			control: { type: "inline-radio" },
+		},
+	},
+} satisfies Meta<typeof SegmentedControl>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const SegmentedControlSizesTemplate: Story = {
+	render: props => {
+		return (
+			<DocsItemsContainer>
+				<For each={sizes}>
+					{size => (
+						<SegmentedControl size={size} {...props} defaultValue={"1"}>
+							<SegmentedControlItem value={"1"}>Left</SegmentedControlItem>
+							<SegmentedControlItem value={"2"}>Center</SegmentedControlItem>
+							<SegmentedControlItem value={"3"}>Right</SegmentedControlItem>
+						</SegmentedControl>
+					)}
+				</For>
+			</DocsItemsContainer>
+		);
+	},
+};
+
+export const SegmentedControlStory: Story = {
+	name: "SegmentedControl",
+	render: props => (
+		<SegmentedControl {...props} defaultValue={"1"}>
+			<SegmentedControlItem value={"1"}>Left</SegmentedControlItem>
+			<SegmentedControlItem value={"2"}>Center</SegmentedControlItem>
+			<SegmentedControlItem value={"3"}>Right</SegmentedControlItem>
+		</SegmentedControl>
+	),
+	args: {
+		variant: "solid",
+		size: "md",
+	},
+};
+
+export const SolidStyle: Story = {
+	...SegmentedControlSizesTemplate,
+	args: {
+		variant: "solid",
+	},
+};
+
+export const BorderedStyle: Story = {
+	...SegmentedControlSizesTemplate,
+	args: {
+		variant: "bordered",
+	},
+};
+
+export const PillStyleSolidVariant: Story = {
+	...SegmentedControlSizesTemplate,
+	name: "Pill - Solid Variant",
+	args: {
+		variant: "solid",
+		pill: true,
+	},
+};
+
+export const PillStyleBorderedVariant: Story = {
+	...SegmentedControlSizesTemplate,
+	name: "Pill - Bordered Variant",
+	args: {
+		variant: "bordered",
+		pill: true,
+	},
+};
+
+export const ThemePrimary: Story = {
+	name: "Theme Primary",
+	render: props => (
+		<SegmentedControl {...props} size={"md"} defaultValue={"1"}>
+			<SegmentedControlItem value={"1"}>Left</SegmentedControlItem>
+			<SegmentedControlItem value={"2"}>Center</SegmentedControlItem>
+			<SegmentedControlItem value={"3"}>Right</SegmentedControlItem>
+		</SegmentedControl>
+	),
+	args: {
+		theme: "primary",
+	},
+};
+
+export const DisabledSegmentedControl: Story = {
+	name: "Disabled Segmented Control",
+	render: props => (
+		<DocsItemsContainer>
+			<SegmentedControl {...props} size={"md"} defaultValue={"1"} disabled>
+				<SegmentedControlItem value={"1"}>Left</SegmentedControlItem>
+				<SegmentedControlItem value={"2"}>Center</SegmentedControlItem>
+				<SegmentedControlItem value={"3"}>Right</SegmentedControlItem>
+			</SegmentedControl>
+
+			<SegmentedControl
+				{...props}
+				size={"md"}
+				variant={"bordered"}
+				defaultValue={"1"}
+				disabled
+			>
+				<SegmentedControlItem value={"1"}>Left</SegmentedControlItem>
+				<SegmentedControlItem value={"2"}>Center</SegmentedControlItem>
+				<SegmentedControlItem value={"3"}>Right</SegmentedControlItem>
+			</SegmentedControl>
+		</DocsItemsContainer>
+	),
+};
+
+export const DisabledSegmentedItem: Story = {
+	name: "Disabled Segmented Item",
+	render: props => (
+		<DocsItemsContainer>
+			<SegmentedControl {...props} size={"md"} defaultValue={"1"}>
+				<SegmentedControlItem value={"1"}>Left</SegmentedControlItem>
+				<SegmentedControlItem value={"2"} disabled>
+					Center
+				</SegmentedControlItem>
+				<SegmentedControlItem value={"3"}>Right</SegmentedControlItem>
+			</SegmentedControl>
+			<SegmentedControl {...props} size={"md"} variant={"bordered"} defaultValue={"1"}>
+				<SegmentedControlItem value={"1"}>Left</SegmentedControlItem>
+				<SegmentedControlItem value={"2"} disabled>
+					Center
+				</SegmentedControlItem>
+				<SegmentedControlItem value={"3"}>Right</SegmentedControlItem>
+			</SegmentedControl>
+		</DocsItemsContainer>
+	),
+};
+
+export const FluidWidth: Story = {
+	name: "Adapt to container size",
+	render: props => {
+		const [toggled, setToggled] = createSignal(true);
+		const [width, setWidth] = createSignal(100);
+		const [height, setHeight] = createSignal(60);
+
+		function toggle() {
+			if (toggled()) {
+				setWidth(70);
+				setHeight(40);
+			} else {
+				setWidth(100);
+				setHeight(60);
+			}
+			setToggled(v => !v);
+		}
+
+		return (
+			<div>
+				<div style={{ display: "flex", gap: "1rem" }}>
+					<ul style={{ "margin-bottom": "1rem" }}>
+						<li>Width: {width()}%</li>
+						<li>Height: {height()}px</li>
+					</ul>
+					<div style={{ "margin-bottom": "1rem" }}>
+						<Button size={"xs"} theme={"secondary"} onClick={toggle}>
+							Change sizes
+						</Button>
+					</div>
+				</div>
+
+				<DocsItemsContainer style={{ width: `${width()}%`, height: `${height()}px` }}>
+					<SegmentedControl {...props} size={"md"} defaultValue={"1"} fluid autoWidth>
+						<SegmentedControlItem value={"1"}>Left</SegmentedControlItem>
+						<SegmentedControlItem value={"2"} disabled>
+							Center
+						</SegmentedControlItem>
+						<SegmentedControlItem value={"3"}>Right</SegmentedControlItem>
+					</SegmentedControl>
+				</DocsItemsContainer>
+			</div>
+		);
+	},
+};
diff --git a/packages/storybook/src/stories/components/Section.tsx b/packages/storybook/src/stories/components/Section.tsx
new file mode 100644
index 0000000..b9e65cf
--- /dev/null
+++ b/packages/storybook/src/stories/components/Section.tsx
@@ -0,0 +1,9 @@
+import { JSX } from "solid-js";
+
+export function DocsItemsContainer(props: JSX.IntrinsicElements["div"]) {
+	return <div class={"itemsContainer"} {...props} />;
+}
+
+export function DocsMultipleItemsContainer(props: JSX.IntrinsicElements["div"]) {
+	return <div class={"multipleItemsContainer"} {...props} />;
+}