From 9d4d4aea212110d24b9d0f1e163b6e2a6e39ef35 Mon Sep 17 00:00:00 2001
From: crssstha <shresthacyrus85@gmail.com>
Date: Tue, 10 Feb 2026 16:18:46 +0545
Subject: [PATCH] feat(go-ui): Update storybook

Separete components into common groups
Uppdate stories to incorporate v2 changes
Add stories for new layout and view components
Updated stories for button component

feat(components): added Chip, Expandable Container and InputSection
---
 .../src/stories/BarChart.stories.tsx          |   2 +-
 .../src/stories/BlockView.stories.tsx         |  59 +++
 .../go-ui-storybook/src/stories/BlockView.tsx |  12 +
 .../src/stories/BooleanInput.stories.tsx      |   2 +-
 .../src/stories/BooleanOutput.stories.tsx     |   2 +-
 .../src/stories/Button.stories.ts             |  94 ----
 .../src/stories/Button.stories.tsx            | 458 ++++++++++++++++++
 .../src/stories/ButtonLayout.stories.ts       |  92 ++++
 .../src/stories/ButtonLayout.tsx              |  12 +
 .../src/stories/CheckBox.stories.tsx          |   2 +-
 .../src/stories/Checklist.stories.tsx         |   2 +-
 .../src/stories/Chip.stories.tsx              |  47 ++
 packages/go-ui-storybook/src/stories/Chip.tsx |  14 +
 .../src/stories/ConfirmButton.stories.tsx     |  11 +-
 .../src/stories/Container.stories.tsx         | 162 +++----
 .../src/stories/DateInput.stories.tsx         |   2 +-
 .../src/stories/DateRangeOutput.stories.tsx   |   2 +-
 .../stories/ExpandableContainer.stories.tsx   |  55 +++
 .../src/stories/ExpandableContainer.tsx       |  12 +
 .../src/stories/HtmlOutput.stories.tsx        |   2 +-
 .../src/stories/IconButton.stories.tsx        |   2 +-
 .../src/stories/Image.stories.tsx             |   2 +-
 .../src/stories/InlineView.stories.tsx        |  35 ++
 .../src/stories/InlineView.tsx                |  12 +
 .../src/stories/InputContainer.stories.tsx    |  16 +-
 .../src/stories/InputSection.tsx              |  13 +
 ....stories.tsx => KeyFigureView.stories.tsx} |  13 +-
 .../{KeyFigure.tsx => KeyFigureView.tsx}      |   6 +-
 .../src/stories/ListView.stories.tsx          | 105 ++++
 .../go-ui-storybook/src/stories/ListView.tsx  |  12 +
 .../src/stories/Modal.stories.tsx             |   4 +-
 .../src/stories/MultiSelectInput.stories.tsx  |   2 +-
 .../src/stories/NavigationTabList.stories.tsx |  16 +-
 .../src/stories/NumberInput.stories.tsx       |   2 +-
 .../src/stories/NumberOutput.stories.tsx      |   2 +-
 .../src/stories/PageContainer.stories.tsx     |   2 +-
 .../src/stories/Pager.stories.tsx             |   2 +-
 .../src/stories/PasswordInput.stories.tsx     |   2 +-
 .../src/stories/PieChart.stories.tsx          |   2 +-
 .../src/stories/Progressbar.stories.ts        |  34 +-
 .../src/stories/RadioInput.stories.tsx        |   4 +-
 .../src/stories/RawFileInput.stories.tsx      |  10 +-
 .../src/stories/RawList.stories.tsx           |   2 +-
 .../SearchMultiSelectInput.stories.tsx        |   2 +-
 .../src/stories/SearchSelectInput.stories.tsx |   2 +-
 .../src/stories/SegmentInput.stories.tsx      |   4 +-
 .../src/stories/SelectInput.stories.tsx       |   2 +-
 .../stories/StackedProgressBar.stories.tsx    |   2 +-
 .../src/stories/Switch.stories.tsx            |   2 +-
 .../src/stories/Tabs.stories.tsx              |  27 +-
 .../src/stories/TextArea.stories.tsx          |   2 +-
 .../src/stories/TextInput.stories.tsx         |   2 +-
 .../src/stories/TimeSeriesChart.stories.tsx   |   2 +-
 .../go-ui-storybook/src/stories/index.css     |  29 +-
 .../src/stories/inlineLayout.stories.tsx      |  38 ++
 .../src/stories/inlineLayout.tsx              |  12 +
 .../src/stories/inputSection.stories.tsx      | 120 +++++
 57 files changed, 1298 insertions(+), 292 deletions(-)
 create mode 100644 packages/go-ui-storybook/src/stories/BlockView.stories.tsx
 create mode 100644 packages/go-ui-storybook/src/stories/BlockView.tsx
 delete mode 100644 packages/go-ui-storybook/src/stories/Button.stories.ts
 create mode 100644 packages/go-ui-storybook/src/stories/Button.stories.tsx
 create mode 100644 packages/go-ui-storybook/src/stories/ButtonLayout.stories.ts
 create mode 100644 packages/go-ui-storybook/src/stories/ButtonLayout.tsx
 create mode 100644 packages/go-ui-storybook/src/stories/Chip.stories.tsx
 create mode 100644 packages/go-ui-storybook/src/stories/Chip.tsx
 create mode 100644 packages/go-ui-storybook/src/stories/ExpandableContainer.stories.tsx
 create mode 100644 packages/go-ui-storybook/src/stories/ExpandableContainer.tsx
 create mode 100644 packages/go-ui-storybook/src/stories/InlineView.stories.tsx
 create mode 100644 packages/go-ui-storybook/src/stories/InlineView.tsx
 create mode 100644 packages/go-ui-storybook/src/stories/InputSection.tsx
 rename packages/go-ui-storybook/src/stories/{KeyFigure.stories.tsx => KeyFigureView.stories.tsx} (79%)
 rename packages/go-ui-storybook/src/stories/{KeyFigure.tsx => KeyFigureView.tsx} (61%)
 create mode 100644 packages/go-ui-storybook/src/stories/ListView.stories.tsx
 create mode 100644 packages/go-ui-storybook/src/stories/ListView.tsx
 create mode 100644 packages/go-ui-storybook/src/stories/inlineLayout.stories.tsx
 create mode 100644 packages/go-ui-storybook/src/stories/inlineLayout.tsx
 create mode 100644 packages/go-ui-storybook/src/stories/inputSection.stories.tsx

diff --git a/packages/go-ui-storybook/src/stories/BarChart.stories.tsx b/packages/go-ui-storybook/src/stories/BarChart.stories.tsx
index e02522294f..ad5fef3406 100644
--- a/packages/go-ui-storybook/src/stories/BarChart.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/BarChart.stories.tsx
@@ -27,7 +27,7 @@ const maxValue = Math.max(...data.map(valueSelector));
 type BarChartSpecificProps = BarChartProps<Option>;
 type Story = StoryObj<BarChartSpecificProps>;
 const meta: Meta<BarChartSpecificProps> = {
-    title: 'Components/BarChart',
+    title: 'Visualization/BarChart',
     component: BarChart,
     parameters: {
         layout: 'centered',
diff --git a/packages/go-ui-storybook/src/stories/BlockView.stories.tsx b/packages/go-ui-storybook/src/stories/BlockView.stories.tsx
new file mode 100644
index 0000000000..2e759ff386
--- /dev/null
+++ b/packages/go-ui-storybook/src/stories/BlockView.stories.tsx
@@ -0,0 +1,59 @@
+import { BlockViewProps } from '@ifrc-go/ui';
+import type {
+    Meta,
+    StoryObj,
+} from '@storybook/react';
+
+import BlockView from './BlockView';
+
+type Story = StoryObj<BlockViewProps>;
+
+const meta: Meta<BlockViewProps> = {
+    title: 'Views/BlockView',
+    component: BlockView,
+    parameters: {
+        layout: 'centered',
+    },
+    args: {
+        spacing: 'md',
+        withPadding: true,
+        before: <div className="page-container-header"> Header</div>,
+        after: <div className="page-container-footer">Footer</div>,
+        children: (
+            <div className="page-container">
+                <div className="page-container-main">
+                    Content
+                </div>
+            </div>),
+    },
+    decorators: [
+        (Story) => (
+            <div className="dash-border">
+                <Story />
+            </div>
+        ),
+    ],
+};
+
+export default meta;
+
+export const Default: Story = {};
+
+export const WithSpacing: Story = {
+    args: {
+        spacing: 'xl',
+    },
+};
+
+export const WithoutPadding: Story = {
+    args: {
+        withPadding: false,
+    },
+};
+
+export const WithSeparators: Story = {
+    args: {
+        withBeforeSeparator: true,
+        withAfterSeparator: true,
+    },
+};
diff --git a/packages/go-ui-storybook/src/stories/BlockView.tsx b/packages/go-ui-storybook/src/stories/BlockView.tsx
new file mode 100644
index 0000000000..5fab41e90c
--- /dev/null
+++ b/packages/go-ui-storybook/src/stories/BlockView.tsx
@@ -0,0 +1,12 @@
+import {
+    BlockView as PureBlockView,
+    BlockViewProps,
+} from '@ifrc-go/ui';
+
+function BlockView(props: BlockViewProps) {
+    return (
+        <PureBlockView {...props} /> // eslint-disable-line react/jsx-props-no-spreading
+    );
+}
+
+export default BlockView;
diff --git a/packages/go-ui-storybook/src/stories/BooleanInput.stories.tsx b/packages/go-ui-storybook/src/stories/BooleanInput.stories.tsx
index f997a74e84..84c7731920 100644
--- a/packages/go-ui-storybook/src/stories/BooleanInput.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/BooleanInput.stories.tsx
@@ -11,7 +11,7 @@ import BooleanInput from './BooleanInput';
 type Story = StoryObj<typeof BooleanInput>;
 
 const meta: Meta<typeof BooleanInput> = {
-    title: 'Components/BooleanInput',
+    title: 'Inputs/BooleanInput',
     component: BooleanInput,
     parameters: {
         layout: 'centered',
diff --git a/packages/go-ui-storybook/src/stories/BooleanOutput.stories.tsx b/packages/go-ui-storybook/src/stories/BooleanOutput.stories.tsx
index e8639587ff..14d2a7a1cd 100644
--- a/packages/go-ui-storybook/src/stories/BooleanOutput.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/BooleanOutput.stories.tsx
@@ -9,7 +9,7 @@ import BooleanOutput from './BooleanOutput';
 type Story = StoryObj<BooleanOutputProps>;
 
 const meta: Meta<typeof BooleanOutput> = {
-    title: 'Components/BooleanOutput',
+    title: 'Outputs/BooleanOutput',
     component: BooleanOutput,
     parameters: {
         layout: 'centered',
diff --git a/packages/go-ui-storybook/src/stories/Button.stories.ts b/packages/go-ui-storybook/src/stories/Button.stories.ts
deleted file mode 100644
index 6cfac7a631..0000000000
--- a/packages/go-ui-storybook/src/stories/Button.stories.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import type {
-    Meta,
-    StoryObj,
-} from '@storybook/react';
-import { fn } from '@storybook/test';
-
-import Button from './Button';
-
-const meta = {
-    title: 'Components/Button',
-    component: Button,
-    parameters: {
-        layout: 'centered',
-        design: {
-            type: 'figma',
-            url: 'https://www.figma.com/proto/k9SOqgh5jk9PxzuBKdMKsA/IFRC-GO---UI-Library?type=design&node-id=11261-189642&t=T89pqHCZaIRUE5DW-1&scaling=contain&page-id=11126%3A176956&starting-point-node-id=11282%3A188000&mode=design',
-            allowFullscreen: true,
-        },
-    },
-    args: {
-        onClick: fn(),
-    },
-    tags: ['autodocs'],
-    argTypes: {},
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-    args: {
-        name: 'button',
-        variant: 'primary',
-        children: 'Primary Button',
-    },
-    parameters: {
-        design: {
-            type: 'figma',
-            url: 'https://www.figma.com/file/k9SOqgh5jk9PxzuBKdMKsA/IFRC-GO---UI-Library?type=design&node-id=11261-189962&mode=design&t=H77btqXhNDop8ZRl-4',
-            allowFullscreen: false,
-        },
-    },
-};
-
-export const Secondary: Story = {
-    args: {
-        name: 'button',
-        variant: 'secondary',
-        children: 'Secondary Button',
-    },
-    parameters: {
-        design: {
-            type: 'figma',
-            url: 'https://www.figma.com/file/k9SOqgh5jk9PxzuBKdMKsA/IFRC-GO---UI-Library?type=design&node-id=11261-189950&mode=design&t=H77btqXhNDop8ZRl-4',
-            allowFullscreen: false,
-        },
-    },
-};
-
-export const Tertiary: Story = {
-    args: {
-        name: 'button',
-        variant: 'tertiary',
-        children: 'Tertiary Button',
-    },
-    parameters: {
-        design: {
-            type: 'figma',
-            url: 'https://www.figma.com/file/k9SOqgh5jk9PxzuBKdMKsA/IFRC-GO---UI-Library?type=design&node-id=11261-189955&mode=design&t=H77btqXhNDop8ZRl-4',
-            allowFullscreen: false,
-        },
-    },
-};
-
-export const TertiaryOnDark: Story = {
-    args: {
-        name: 'button',
-        variant: 'tertiary-on-dark',
-        children: 'Tertiary on Dark Button',
-    },
-    parameters: {
-        backgrounds: {
-            default: 'dark',
-        },
-    },
-};
-
-export const DropdownItem: Story = {
-    args: {
-        name: 'button',
-        variant: 'dropdown-item',
-        children: 'Dropdown Item',
-    },
-};
diff --git a/packages/go-ui-storybook/src/stories/Button.stories.tsx b/packages/go-ui-storybook/src/stories/Button.stories.tsx
new file mode 100644
index 0000000000..2275128c12
--- /dev/null
+++ b/packages/go-ui-storybook/src/stories/Button.stories.tsx
@@ -0,0 +1,458 @@
+import {
+    Container,
+    ListView,
+} from '@ifrc-go/ui';
+import type {
+    Meta,
+    StoryObj,
+} from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import Button from './Button';
+
+const meta = {
+    title: 'Action/Button',
+    component: Button,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/proto/k9SOqgh5jk9PxzuBKdMKsA/IFRC-GO---UI-Library?type=design&node-id=11261-189642&t=T89pqHCZaIRUE5DW-1&scaling=contain&page-id=11126%3A176956&starting-point-node-id=11282%3A188000&mode=design',
+            allowFullscreen: true,
+        },
+    },
+    args: {
+        name: 'button',
+        onClick: fn(),
+    },
+    tags: ['autodocs'],
+    argTypes: {},
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function AllVariant() {
+    return (
+        <ListView layout="block">
+            <Container heading="Primary">
+                <ListView>
+                    <Button
+                        name="filled"
+                        styleVariant="filled"
+                        colorVariant="primary"
+                        textSize="md"
+                        onClick={fn()}
+                    >
+                        Filled
+                    </Button>
+                    <Button
+                        name="outline"
+                        styleVariant="outline"
+                        colorVariant="primary"
+                        textSize="md"
+                        onClick={fn()}
+                    >
+                        Outline
+                    </Button>
+                    <Button
+                        name="action"
+                        styleVariant="action"
+                        colorVariant="primary"
+                        textSize="md"
+                        onClick={fn()}
+                    >
+                        Action
+                    </Button>
+                    <Button
+                        name="translucent"
+                        styleVariant="translucent"
+                        colorVariant="primary"
+                        textSize="md"
+                        onClick={fn()}
+                    >
+                        Translucent
+                    </Button>
+                    <Button
+                        name="transparent"
+                        styleVariant="transparent"
+                        colorVariant="primary"
+                        textSize="md"
+                        onClick={fn()}
+                    >
+                        Transparent
+                    </Button>
+                </ListView>
+            </Container>
+            <Container heading="Secondary">
+                <ListView>
+                    <Button
+                        name="filled"
+                        styleVariant="filled"
+                        colorVariant="secondary"
+                        textSize="md"
+                        onClick={fn()}
+                    >
+                        Filled
+                    </Button>
+                    <Button
+                        name="outline"
+                        styleVariant="outline"
+                        colorVariant="secondary"
+                        textSize="md"
+                        onClick={fn()}
+                    >
+                        Outline
+                    </Button>
+                    <Button
+                        name="action"
+                        styleVariant="action"
+                        colorVariant="secondary"
+                        textSize="md"
+                        onClick={fn()}
+                    >
+                        Action
+                    </Button>
+                    <Button
+                        name="translucent"
+                        styleVariant="translucent"
+                        colorVariant="secondary"
+                        textSize="md"
+                        onClick={fn()}
+                    >
+                        Translucent
+                    </Button>
+                    <Button
+                        name="transparent"
+                        styleVariant="transparent"
+                        colorVariant="secondary"
+                        textSize="md"
+                        onClick={fn()}
+                    >
+                        Transparent
+                    </Button>
+                </ListView>
+            </Container>
+            <Container heading="Success">
+                <ListView>
+                    <Button
+                        name="filled"
+                        styleVariant="filled"
+                        colorVariant="success"
+                        textSize="md"
+                        onClick={fn()}
+                    >
+                        Filled
+                    </Button>
+                    <Button
+                        name="outline"
+                        styleVariant="outline"
+                        colorVariant="success"
+                        textSize="md"
+                        onClick={fn()}
+                    >
+                        Outline
+                    </Button>
+                    <Button
+                        name="action"
+                        styleVariant="action"
+                        colorVariant="success"
+                        textSize="md"
+                        onClick={fn()}
+                    >
+                        Action
+                    </Button>
+                    <Button
+                        name="translucent"
+                        styleVariant="translucent"
+                        colorVariant="success"
+                        textSize="md"
+                        onClick={fn()}
+                    >
+                        Translucent
+                    </Button>
+                    <Button
+                        name="transparent"
+                        styleVariant="transparent"
+                        colorVariant="success"
+                        textSize="md"
+                        onClick={fn()}
+                    >
+                        Transparent
+                    </Button>
+                </ListView>
+            </Container>
+            <Container heading="Danger">
+                <ListView>
+                    <Button
+                        name="filled"
+                        styleVariant="filled"
+                        colorVariant="danger"
+                        textSize="md"
+                        onClick={fn()}
+                    >
+                        Filled
+                    </Button>
+                    <Button
+                        name="outline"
+                        styleVariant="outline"
+                        colorVariant="danger"
+                        textSize="md"
+                        onClick={fn()}
+                    >
+                        Outline
+                    </Button>
+                    <Button
+                        name="action"
+                        styleVariant="action"
+                        colorVariant="danger"
+                        textSize="md"
+                        onClick={fn()}
+                    >
+                        Action
+                    </Button>
+                    <Button
+                        name="translucent"
+                        styleVariant="translucent"
+                        colorVariant="danger"
+                        textSize="md"
+                        onClick={fn()}
+                    >
+                        Translucent
+                    </Button>
+                    <Button
+                        name="transparent"
+                        styleVariant="transparent"
+                        colorVariant="danger"
+                        textSize="md"
+                        onClick={fn()}
+                    >
+                        Transparent
+                    </Button>
+                </ListView>
+            </Container>
+            <Container heading="Text">
+                <ListView>
+                    <Button
+                        name="filled"
+                        styleVariant="filled"
+                        colorVariant="text"
+                        textSize="md"
+                        onClick={fn()}
+                    >
+                        Filled
+                    </Button>
+                    <Button
+                        name="outline"
+                        styleVariant="outline"
+                        colorVariant="text"
+                        textSize="md"
+                        onClick={fn()}
+                    >
+                        Outline
+                    </Button>
+                    <Button
+                        name="action"
+                        styleVariant="action"
+                        colorVariant="text"
+                        textSize="md"
+                        onClick={fn()}
+                    >
+                        Action
+                    </Button>
+                    <Button
+                        name="translucent"
+                        styleVariant="translucent"
+                        colorVariant="text"
+                        textSize="md"
+                        onClick={fn()}
+                    >
+                        Translucent
+                    </Button>
+                    <Button
+                        name="transparent"
+                        styleVariant="transparent"
+                        colorVariant="text"
+                        textSize="md"
+                        onClick={fn()}
+                    >
+                        Transparent
+                    </Button>
+                </ListView>
+            </Container>
+            <Container heading="Disabled">
+                <ListView>
+                    <Button
+                        name="filled"
+                        styleVariant="filled"
+                        colorVariant="primary"
+                        textSize="md"
+                        onClick={fn()}
+                        disabled
+                    >
+                        Filled
+                    </Button>
+                    <Button
+                        name="outline"
+                        styleVariant="outline"
+                        colorVariant="primary"
+                        textSize="md"
+                        onClick={fn()}
+                        disabled
+                    >
+                        Outline
+                    </Button>
+                    <Button
+                        name="action"
+                        styleVariant="action"
+                        colorVariant="primary"
+                        textSize="md"
+                        onClick={fn()}
+                        disabled
+                    >
+                        Action
+                    </Button>
+                    <Button
+                        name="translucent"
+                        styleVariant="translucent"
+                        colorVariant="primary"
+                        textSize="md"
+                        onClick={fn()}
+                        disabled
+                    >
+                        Translucent
+                    </Button>
+                    <Button
+                        name="transparent"
+                        styleVariant="transparent"
+                        colorVariant="primary"
+                        textSize="md"
+                        disabled
+                        onClick={fn()}
+                    >
+                        Transparent
+                    </Button>
+                </ListView>
+            </Container>
+        </ListView>
+    );
+}
+
+function AllSpacing() {
+    return (
+        <ListView layout="block">
+            <Container heading="Spacing">
+                <ListView>
+                    <Button
+                        name="small"
+                        styleVariant="filled"
+                        colorVariant="primary"
+                        textSize="md"
+                        onClick={fn()}
+                        spacing="xs"
+                    >
+                        Extra Small
+                    </Button>
+                    <Button
+                        name="small"
+                        styleVariant="filled"
+                        colorVariant="primary"
+                        textSize="md"
+                        onClick={fn()}
+                        spacing="sm"
+                    >
+                        Small
+                    </Button>
+                    <Button
+                        name="medium"
+                        styleVariant="filled"
+                        colorVariant="primary"
+                        textSize="md"
+                        onClick={fn()}
+                        spacing="md"
+                    >
+                        Medium
+                    </Button>
+                    <Button
+                        name="large"
+                        styleVariant="filled"
+                        colorVariant="primary"
+                        textSize="md"
+                        onClick={fn()}
+                        spacing="lg"
+                    >
+                        Large
+                    </Button>
+                    <Button
+                        name="small"
+                        styleVariant="filled"
+                        colorVariant="primary"
+                        textSize="md"
+                        onClick={fn()}
+                        spacing="xl"
+                    >
+                        Extra Large
+                    </Button>
+                </ListView>
+            </Container>
+            <Container heading="Text Size">
+                <ListView>
+                    <Button
+                        name="small"
+                        styleVariant="filled"
+                        colorVariant="secondary"
+                        textSize="sm"
+                        onClick={fn()}
+                        spacing="sm"
+                    >
+                        Text Small
+                    </Button>
+                    <Button
+                        name="medium"
+                        styleVariant="filled"
+                        colorVariant="secondary"
+                        textSize="md"
+                        onClick={fn()}
+                        spacing="md"
+                    >
+                        Text Medium
+                    </Button>
+                    <Button
+                        name="large"
+                        styleVariant="filled"
+                        colorVariant="secondary"
+                        textSize="lg"
+                        onClick={fn()}
+                        spacing="lg"
+                    >
+                        Text Large
+                    </Button>
+                </ListView>
+            </Container>
+
+        </ListView>
+    );
+}
+
+export const Default: Story = {
+    args: {
+        name: 'default',
+        children: 'Default Button',
+
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/k9SOqgh5jk9PxzuBKdMKsA/IFRC-GO---UI-Library?type=design&node-id=11261-189962&mode=design&t=H77btqXhNDop8ZRl-4',
+            allowFullscreen: false,
+        },
+    },
+};
+
+export const Variants: Story = {
+    render: AllVariant,
+};
+
+export const Spacing: Story = {
+    render: AllSpacing,
+};
diff --git a/packages/go-ui-storybook/src/stories/ButtonLayout.stories.ts b/packages/go-ui-storybook/src/stories/ButtonLayout.stories.ts
new file mode 100644
index 0000000000..e67f0c325d
--- /dev/null
+++ b/packages/go-ui-storybook/src/stories/ButtonLayout.stories.ts
@@ -0,0 +1,92 @@
+import { ButtonLayoutProps } from '@ifrc-go/ui';
+import type {
+    Meta,
+    StoryObj,
+} from '@storybook/react';
+
+import ButtonLayout from './ButtonLayout';
+
+const meta: Meta<ButtonLayoutProps> = {
+    title: 'Layouts/ButtonLayout',
+    component: ButtonLayout,
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {},
+};
+
+export default meta;
+type Story = StoryObj<ButtonLayoutProps>;
+
+export const PrimaryFilled: Story = {
+    args: {
+        colorVariant: 'primary',
+        styleVariant: 'filled',
+        children: 'Primary Button',
+    },
+};
+
+export const Outline: Story = {
+    args: {
+        styleVariant: 'outline',
+        children: 'Outline Button',
+    },
+};
+
+export const Action: Story = {
+    args: {
+        styleVariant: 'action',
+        children: 'Action Button',
+    },
+};
+
+export const Success: Story = {
+    args: {
+        colorVariant: 'success',
+        styleVariant: 'filled',
+        children: 'Success',
+    },
+};
+
+export const Danger: Story = {
+    args: {
+        colorVariant: 'danger',
+        styleVariant: 'filled',
+        children: 'Danger',
+    },
+};
+
+export const Disabled: Story = {
+    args: {
+        disabled: true,
+        children: 'Disabled',
+    },
+};
+
+export const FullWidth: Story = {
+    args: {
+        withFullWidth: true,
+        children: 'Full Width Button',
+    },
+};
+
+export const WithoutPadding: Story = {
+    args: {
+        withoutPadding: true,
+        children: 'No Padding',
+    },
+};
+
+export const SmallText: Story = {
+    args: {
+        textSize: 'sm',
+        children: 'Small Text',
+    },
+};
+
+export const LargeText: Story = {
+    args: {
+        textSize: 'lg',
+        children: 'Large Text',
+    },
+};
diff --git a/packages/go-ui-storybook/src/stories/ButtonLayout.tsx b/packages/go-ui-storybook/src/stories/ButtonLayout.tsx
new file mode 100644
index 0000000000..5df7a0d506
--- /dev/null
+++ b/packages/go-ui-storybook/src/stories/ButtonLayout.tsx
@@ -0,0 +1,12 @@
+import {
+    ButtonLayout as PureButtonLayout,
+    ButtonLayoutProps,
+} from '@ifrc-go/ui';
+
+function ButtonLayout(props: ButtonLayoutProps) {
+    return (
+        <PureButtonLayout {...props} /> // eslint-disable-line react/jsx-props-no-spreading
+    );
+}
+
+export default ButtonLayout;
diff --git a/packages/go-ui-storybook/src/stories/CheckBox.stories.tsx b/packages/go-ui-storybook/src/stories/CheckBox.stories.tsx
index 3839f32123..e2b8378d8b 100644
--- a/packages/go-ui-storybook/src/stories/CheckBox.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/CheckBox.stories.tsx
@@ -17,7 +17,7 @@ type CheckboxSpecificProps = CheckboxProps<string>;
 type Story = StoryObj<CheckboxSpecificProps>;
 
 const meta: Meta<typeof CheckBox> = {
-    title: 'Components/CheckBox',
+    title: 'Inputs/CheckBox',
     component: CheckBox,
     parameters: {
         layout: 'centered',
diff --git a/packages/go-ui-storybook/src/stories/Checklist.stories.tsx b/packages/go-ui-storybook/src/stories/Checklist.stories.tsx
index 4bfccc187f..add92afc7b 100644
--- a/packages/go-ui-storybook/src/stories/Checklist.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/Checklist.stories.tsx
@@ -33,7 +33,7 @@ type ChecklistSpecificProps = ChecklistProps<ListKey, string, Option>;
 type Story = StoryObj<ChecklistSpecificProps>;
 
 const meta: Meta<typeof Checklist> = {
-    title: 'Components/Checklist',
+    title: 'Inputs/Checklist',
     component: Checklist,
     parameters: {
         layout: 'centered',
diff --git a/packages/go-ui-storybook/src/stories/Chip.stories.tsx b/packages/go-ui-storybook/src/stories/Chip.stories.tsx
new file mode 100644
index 0000000000..77cbb71bb8
--- /dev/null
+++ b/packages/go-ui-storybook/src/stories/Chip.stories.tsx
@@ -0,0 +1,47 @@
+import type {
+    Meta,
+    StoryObj,
+} from '@storybook/react';
+
+import Chip from './Chip';
+
+type Story = StoryObj<typeof Chip>;
+
+const meta: Meta<typeof Chip> = {
+    title: 'Components/Chip',
+    component: Chip,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/myeW85ibN5p2SlnXcEpxFD/IFRC-GO---UI-Current---1?type=design&node-id=0-4957&mode=design&t=KwxbuoUQxqcLyZbG-0',
+        },
+    },
+    args: {
+        label: 'Chip',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        onDelete: { action: 'deleted' },
+    },
+};
+
+export default meta;
+
+export const Primary: Story = {
+    args: {
+        variant: 'primary',
+    },
+};
+
+export const Secondary: Story = {
+    args: {
+        variant: 'secondary',
+    },
+};
+
+export const Translucent: Story = {
+    args: {
+        variant: 'tertiary',
+    },
+};
diff --git a/packages/go-ui-storybook/src/stories/Chip.tsx b/packages/go-ui-storybook/src/stories/Chip.tsx
new file mode 100644
index 0000000000..b25315e078
--- /dev/null
+++ b/packages/go-ui-storybook/src/stories/Chip.tsx
@@ -0,0 +1,14 @@
+import {
+    Chip as PureChip,
+    ChipProps as PureChipProps,
+} from '@ifrc-go/ui';
+
+type ChipProps<N> = PureChipProps<N>
+
+function Chip<const N>(props: ChipProps<N>) {
+    return (
+        <PureChip {...props} />// eslint-disable-line react/jsx-props-no-spreading
+    );
+}
+
+export default Chip;
diff --git a/packages/go-ui-storybook/src/stories/ConfirmButton.stories.tsx b/packages/go-ui-storybook/src/stories/ConfirmButton.stories.tsx
index bef54b6b1f..4923c746e4 100644
--- a/packages/go-ui-storybook/src/stories/ConfirmButton.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/ConfirmButton.stories.tsx
@@ -11,7 +11,7 @@ import ConfirmButton from './ConfirmButton';
 type Story = StoryObj<typeof ConfirmButton>;
 
 const meta: Meta<typeof ConfirmButton> = {
-    title: 'Components/ConfirmButton',
+    title: 'Action/ConfirmButton',
     component: ConfirmButton,
     parameters: {
         layout: 'centered',
@@ -56,19 +56,22 @@ function Template(args:Args) {
 
 export const Primary: Story = {
     render: Template,
+    args: {
+        styleVariant: 'filled',
+    },
 };
 
 export const Secondary: Story = {
     render: Template,
     args: {
-        variant: 'secondary',
+        styleVariant: 'outline',
     },
 };
 
-export const Tertiary: Story = {
+export const Translucent: Story = {
     render: Template,
     args: {
-        variant: 'tertiary',
+        styleVariant: 'translucent',
     },
 };
 
diff --git a/packages/go-ui-storybook/src/stories/Container.stories.tsx b/packages/go-ui-storybook/src/stories/Container.stories.tsx
index ccfb2a1e18..ac7aec6f04 100644
--- a/packages/go-ui-storybook/src/stories/Container.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/Container.stories.tsx
@@ -11,7 +11,7 @@ import type {
 import Container from './Container';
 
 const meta = {
-    title: 'Components/Container',
+    title: 'Container/Container',
     component: Container,
     parameters: {
         layout: 'centered',
@@ -30,31 +30,20 @@ export const Default: Story = {
     args: {
         heading: 'Container Heading',
         headerDescription: 'This is a description for the header',
-        footerContent: 'Footer content',
+        footer: 'Footer content',
         filters: 'Filter content',
         children: 'Container content',
     },
 };
 
-export const ContentViewType: Story = {
-    args: {
-        heading: 'Container Heading',
-        headerDescription: 'This is a description for the header',
-        footerContent: 'Footer content',
-        filters: 'Filter content',
-        children: 'Container content',
-        contentViewType: 'default',
-    },
-};
-
 export const EllipsizeHeading: Story = {
     args: {
-        heading: 'Container Heading',
+        heading: 'This extremely long container heading is intentionally written to test how the Container component behave',
         headerDescription: 'This is a description for the header',
-        footerContent: 'Footer content',
+        footer: 'Footer content',
         filters: 'Filter content',
         children: 'Container content',
-        ellipsizeHeading: true,
+        withEllipsizedHeading: true,
     },
 };
 
@@ -62,156 +51,113 @@ export const FooterAction: Story = {
     args: {
         heading: 'Container Heading',
         headerDescription: 'This is a description for the header',
-        footerContent: 'Footer content',
+        footer: 'Footer content',
         filters: 'Filter content',
         children: 'Container content',
-        footerActions: [
-            <Button
-                key="container-footer-action"
-                name={undefined}
-            >
-                save
-            </Button>,
-        ],
+        footerActions: (
+            <Button key="container-footer-action" name={undefined}>
+                Save
+            </Button>
+        ),
     },
 };
+
 export const WithFooterIcons: Story = {
     args: {
         heading: 'Container Heading',
         headerDescription: 'This is a description for the header',
-        footerContent: 'Footer content',
+        footer: 'Footer content',
         filters: 'Filter content',
         children: 'Container content',
         footerIcons: <WikiLineIcon />,
     },
 };
 
-export const WithGridViewAndPadding: Story = {
+export const WithHeadingLevel: Story = {
     args: {
         heading: 'Container Heading',
         headerDescription: 'This is a description for the header',
-        footerContent: 'Footer content',
+        footer: 'Footer content',
         filters: 'Filter content',
         children: 'Container content',
-        contentViewType: 'grid',
-        spacing: 'default',
-        numPreferredGridContentColumns: 2,
+        headingLevel: 1,
     },
 };
 
-export const ContainerElementRef: Story = {
+export const WithCenteredContent: Story = {
     args: {
         heading: 'Container Heading',
         headerDescription: 'This is a description for the header',
-        footerContent: 'Footer content',
+        footer: 'Footer content',
         filters: 'Filter content',
         children: 'Container content',
+        withCenteredContent: true,
     },
 };
 
-export const WithHeadingLevel: Story = {
+export const WithHeaderBorder: Story = {
     args: {
         heading: 'Container Heading',
         headerDescription: 'This is a description for the header',
-        footerContent: 'Footer content',
+        footer: 'Footer content',
         filters: 'Filter content',
         children: 'Container content',
-        contentViewType: 'default',
-        spacing: 'default',
-        headingLevel: 1,
-        numPreferredGridContentColumns: 2,
+        withHeaderBorder: true,
     },
 };
 
-export const WithIcons: Story = {
+export const WithBackground: Story = {
     args: {
-        heading: 'Container Heading',
-        headerDescription: 'This is a description for the header',
-        footerContent: 'Footer content',
-        filters: 'Filter content',
-        children: 'Container content',
-        contentViewType: 'default',
-        spacing: 'default',
-        icons: <WikiLineIcon />,
+        heading: 'Container with Background',
+        headerDescription: 'This container has a background',
+        children: 'Content goes here',
+        withBackground: true,
+        withPadding: true,
     },
 };
 
-export const NumPreferredGridContentColumns: Story = {
-    args: {
-        heading: 'Container Heading',
-        headerDescription: 'This is a description for the header',
-        footerContent: 'Footer content',
-        filters: 'Filter content',
-        children: 'Container content',
-        contentViewType: 'default',
-        spacing: 'default',
-        numPreferredGridContentColumns: 2,
-    },
-};
-export const WithSpacing: Story = {
+export const WithShadow: Story = {
     args: {
-        heading: 'Container Heading',
-        headerDescription: 'This is a description for the header',
-        footerContent: 'Footer content',
-        filters: 'Filter content',
-        children: 'Container content',
-        contentViewType: 'default',
-        spacing: 'none',
-        numPreferredGridContentColumns: 2,
+        heading: 'Container with Shadow',
+        children: 'Content with shadow',
+        withShadow: true,
+        withPadding: true,
     },
 };
 
-export const WithGridViewInFilter: Story = {
+export const WithPadding: Story = {
     args: {
-        heading: 'Container Heading',
-        headerDescription: 'This is a description for the header',
-        footerContent: 'Footer content',
-        filters: 'Filter content',
-        children: 'Container content',
-        contentViewType: 'default',
-        spacing: 'default',
-        numPreferredGridContentColumns: 2,
+        heading: 'Container with Padding',
+        children: 'Content with internal padding',
+        withPadding: true,
+        withBackground: true,
+
     },
 };
 
-export const WithHeaderBorder: Story = {
+export const PendingState: Story = {
     args: {
-        heading: 'Container Heading',
-        headerDescription: 'This is a description for the header',
-        footerContent: 'Footer content',
-        filters: 'Filter content',
-        children: 'Container content',
-        contentViewType: 'grid',
-        spacing: 'default',
-        numPreferredGridContentColumns: 2,
-        withHeaderBorder: true,
+        heading: 'Pending Container',
+        children: 'Waiting for data...',
+        pending: true,
+        pendingMessage: 'Loading data, please wait...',
     },
 };
 
-export const WithInternalPadding: Story = {
+export const ErrorState: Story = {
     args: {
-        heading: 'Container Heading',
-        headerDescription: 'This is a description for the header',
-        footerContent: 'Footer content',
-        filters: 'Filter content',
-        children: 'Container content',
-        contentViewType: 'grid',
-        spacing: 'default',
-        numPreferredGridContentColumns: 2,
-        withInternalPadding: true,
+        heading: 'Errored Container',
+        children: 'Data failed to load',
+        errored: true,
+        errorMessage: 'Something went wrong!',
     },
 };
 
-export const WithoutWrapInHeading: Story = {
+export const EmptyState: Story = {
     args: {
-        heading: 'Container Heading',
-        headerDescription: 'This is a description for the header',
-        footerContent: 'Footer content',
-        filters: 'Filter content',
-        children: 'Container content',
-        contentViewType: 'grid',
-        spacing: 'default',
-        numPreferredGridContentColumns: 2,
-        withoutWrapInHeading: true,
+        heading: 'Empty Container',
+        children: null,
+        empty: true,
+        emptyMessage: 'No content available.',
     },
 };
diff --git a/packages/go-ui-storybook/src/stories/DateInput.stories.tsx b/packages/go-ui-storybook/src/stories/DateInput.stories.tsx
index 8d3397ea97..df7d3e7f10 100644
--- a/packages/go-ui-storybook/src/stories/DateInput.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/DateInput.stories.tsx
@@ -14,7 +14,7 @@ type DateInputSpecificProps = DateInputProps<string>;
 type Story = StoryObj<DateInputSpecificProps>;
 
 const meta: Meta<typeof DateInput> = {
-    title: 'Components/DateInput',
+    title: 'Inputs/DateInput',
     component: DateInput,
     parameters: {
         layout: 'centered',
diff --git a/packages/go-ui-storybook/src/stories/DateRangeOutput.stories.tsx b/packages/go-ui-storybook/src/stories/DateRangeOutput.stories.tsx
index f7df880992..ad2f0e5b8c 100644
--- a/packages/go-ui-storybook/src/stories/DateRangeOutput.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/DateRangeOutput.stories.tsx
@@ -9,7 +9,7 @@ import DateRangeOutput from './DateRangeOutput';
 type Story = StoryObj<DateRangeOutputProps>;
 
 const meta: Meta<typeof DateRangeOutput> = {
-    title: 'Components/DateRangeOutput',
+    title: 'Outputs/DateRangeOutput',
     component: DateRangeOutput,
     parameters: {
         layout: 'centered',
diff --git a/packages/go-ui-storybook/src/stories/ExpandableContainer.stories.tsx b/packages/go-ui-storybook/src/stories/ExpandableContainer.stories.tsx
new file mode 100644
index 0000000000..9d61f142f3
--- /dev/null
+++ b/packages/go-ui-storybook/src/stories/ExpandableContainer.stories.tsx
@@ -0,0 +1,55 @@
+import {
+    Button,
+    ExpandableContainerProps,
+} from '@ifrc-go/ui';
+import type {
+    Meta,
+    StoryObj,
+} from '@storybook/react';
+
+import ExpandableContainer from './ExpandableContainer';
+
+const meta: Meta<typeof ExpandableContainer> = {
+    title: 'Container/ExpandableContainer',
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    args: {
+        heading: 'Container Heading',
+        headerDescription: 'This is a description for the header',
+        children: 'This is expandable content.',
+    },
+    component: ExpandableContainer,
+};
+
+export default meta;
+
+type Story = StoryObj<ExpandableContainerProps>;
+
+export const Default: Story = {};
+
+export const WithCustomLabels: Story = {
+    args: {
+        initiallyExpanded: false,
+        toggleButtonLabel: ['Show Content', 'Hide Content'],
+
+    },
+};
+
+export const ToggleInFooter: Story = {
+    args: {
+        initiallyExpanded: false,
+        withToggleButtonOnFooter: true,
+    },
+};
+
+export const WithFooterActions: Story = {
+    args: {
+        footerActions: (
+            <Button key="container-footer-action" name={undefined}>
+                Save
+            </Button>
+        ),
+    },
+};
diff --git a/packages/go-ui-storybook/src/stories/ExpandableContainer.tsx b/packages/go-ui-storybook/src/stories/ExpandableContainer.tsx
new file mode 100644
index 0000000000..365baca02b
--- /dev/null
+++ b/packages/go-ui-storybook/src/stories/ExpandableContainer.tsx
@@ -0,0 +1,12 @@
+import {
+    ExpandableContainer as PureExpandableContainer,
+    ExpandableContainerProps,
+} from '@ifrc-go/ui';
+
+function ExpandableContainer(props: ExpandableContainerProps) {
+    return (
+        <PureExpandableContainer {...props} /> // eslint-disable-line react/jsx-props-no-spreading
+    );
+}
+
+export default ExpandableContainer;
diff --git a/packages/go-ui-storybook/src/stories/HtmlOutput.stories.tsx b/packages/go-ui-storybook/src/stories/HtmlOutput.stories.tsx
index aaf720239d..738301d0f2 100644
--- a/packages/go-ui-storybook/src/stories/HtmlOutput.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/HtmlOutput.stories.tsx
@@ -8,7 +8,7 @@ import HtmlOutput from './HtmlOutput';
 type Story = StoryObj<typeof HtmlOutput>;
 
 const meta: Meta<typeof HtmlOutput> = {
-    title: 'Components/HtmlOutput',
+    title: 'Outputs/HtmlOutput',
     component: HtmlOutput,
     parameters: {
         layout: 'centered',
diff --git a/packages/go-ui-storybook/src/stories/IconButton.stories.tsx b/packages/go-ui-storybook/src/stories/IconButton.stories.tsx
index 3fc891131b..589c530134 100644
--- a/packages/go-ui-storybook/src/stories/IconButton.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/IconButton.stories.tsx
@@ -12,7 +12,7 @@ type IconButtonSpecificProps = IconButtonProps<string>;
 type Story = StoryObj<IconButtonSpecificProps>;
 
 const meta: Meta<typeof IconButton> = {
-    title: 'Components/IconButton',
+    title: 'Action/IconButton',
     component: IconButton,
     parameters: {
         layout: 'centered',
diff --git a/packages/go-ui-storybook/src/stories/Image.stories.tsx b/packages/go-ui-storybook/src/stories/Image.stories.tsx
index eb09c9a8bc..51789c90e6 100644
--- a/packages/go-ui-storybook/src/stories/Image.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/Image.stories.tsx
@@ -9,7 +9,7 @@ import Image from './Image';
 type Story = StoryObj<ImageProps>;
 
 const meta: Meta<typeof Image> = {
-    title: 'Components/Image',
+    title: 'Inputs/Image',
     component: Image,
     parameters: {
         layout: 'centered',
diff --git a/packages/go-ui-storybook/src/stories/InlineView.stories.tsx b/packages/go-ui-storybook/src/stories/InlineView.stories.tsx
new file mode 100644
index 0000000000..9418424ebc
--- /dev/null
+++ b/packages/go-ui-storybook/src/stories/InlineView.stories.tsx
@@ -0,0 +1,35 @@
+import { InlineViewProps } from '@ifrc-go/ui';
+import type {
+    Meta,
+    StoryObj,
+} from '@storybook/react';
+
+import InlineView from './InlineView';
+
+const meta: Meta<InlineViewProps> = {
+    title: 'Views/InlineView',
+    component: InlineView,
+    parameters: { layout: 'centered' },
+    decorators: [
+        (Story) => (
+            <div className="dash-border">
+                <Story />
+            </div>
+        ),
+    ],
+};
+
+export default meta;
+
+type Story = StoryObj<InlineViewProps>;
+
+export const Default: Story = {
+    args: {
+        wrapBreakpoint: 'none',
+        spacing: 'sm',
+        withPadding: true,
+        before: <div className="layout-content">Before Content</div>,
+        after: <div className="layout-content">After Content</div>,
+        children: <div className="layout-content">Content</div>,
+    },
+};
diff --git a/packages/go-ui-storybook/src/stories/InlineView.tsx b/packages/go-ui-storybook/src/stories/InlineView.tsx
new file mode 100644
index 0000000000..41e0c2e2ae
--- /dev/null
+++ b/packages/go-ui-storybook/src/stories/InlineView.tsx
@@ -0,0 +1,12 @@
+import {
+    InlineView as PureInlineView,
+    InlineViewProps,
+} from '@ifrc-go/ui';
+
+function InlineView(props: InlineViewProps) {
+    return (
+        <PureInlineView {...props} /> // eslint-disable-line react/jsx-props-no-spreading
+    );
+}
+
+export default InlineView;
diff --git a/packages/go-ui-storybook/src/stories/InputContainer.stories.tsx b/packages/go-ui-storybook/src/stories/InputContainer.stories.tsx
index e373ceb7b7..3accd05e17 100644
--- a/packages/go-ui-storybook/src/stories/InputContainer.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/InputContainer.stories.tsx
@@ -9,7 +9,7 @@ import InputContainer, { InputContainerProps } from './InputContainer';
 type Story = StoryObj<InputContainerProps>;
 
 const meta: Meta<InputContainerProps> = {
-    title: 'Components/InputContainer',
+    title: 'Container/InputContainer',
     component: InputContainer,
     parameters: {
         layout: 'centered',
@@ -39,14 +39,8 @@ export const Default: Story = {
         icons: undefined,
         disabled: false,
         error: undefined,
-        actionsContainerClassName: '',
-        errorContainerClassName: '',
-        hintContainerClassName: '',
-        iconsContainerClassName: '',
         errorOnTooltip: false,
         hint: '',
-        inputSectionClassName: '',
-        labelClassName: '',
         readOnly: false,
         required: false,
         variant: 'form',
@@ -119,3 +113,11 @@ export const WithIcon: Story = {
         icons: <CalendarLineIcon />,
     },
 };
+
+export const withPadding: Story = {
+    args: {
+        ...Default.args,
+        withPadding: true,
+        withBackground: true,
+    },
+};
diff --git a/packages/go-ui-storybook/src/stories/InputSection.tsx b/packages/go-ui-storybook/src/stories/InputSection.tsx
new file mode 100644
index 0000000000..c0f1158550
--- /dev/null
+++ b/packages/go-ui-storybook/src/stories/InputSection.tsx
@@ -0,0 +1,13 @@
+import {
+    InputSection as PureInputSection,
+    InputSectionProps as PureInputSectionProps,
+} from '@ifrc-go/ui';
+
+export type InputSectionProps = PureInputSectionProps;
+function InputSection(props: InputSectionProps) {
+    return (
+        <PureInputSection {...props} />// eslint-disable-line react/jsx-props-no-spreading
+    );
+}
+
+export default InputSection;
diff --git a/packages/go-ui-storybook/src/stories/KeyFigure.stories.tsx b/packages/go-ui-storybook/src/stories/KeyFigureView.stories.tsx
similarity index 79%
rename from packages/go-ui-storybook/src/stories/KeyFigure.stories.tsx
rename to packages/go-ui-storybook/src/stories/KeyFigureView.stories.tsx
index 925f2983ba..b20f32e16f 100644
--- a/packages/go-ui-storybook/src/stories/KeyFigure.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/KeyFigureView.stories.tsx
@@ -4,13 +4,13 @@ import type {
     StoryObj,
 } from '@storybook/react';
 
-import KeyFigure from './KeyFigure';
+import KeyFigureView from './KeyFigureView';
 
-type Story = StoryObj<typeof KeyFigure>
+type Story = StoryObj<typeof KeyFigureView>
 
 const meta = {
-    title: 'Components/KeyFigure',
-    component: KeyFigure,
+    title: 'Components/KeyFigureView',
+    component: KeyFigureView,
     parameters: {
         layout: 'centered',
         design: {
@@ -20,14 +20,14 @@ const meta = {
         },
     },
     tags: ['autodocs'],
-} satisfies Meta<typeof KeyFigure>;
+} satisfies Meta<typeof KeyFigureView>;
 
 export default meta;
 
 export const Default = {
     args: {
         value: 500,
-        description: 'Targeted population',
+        label: 'Targeted population',
     },
 } satisfies Story;
 
@@ -43,7 +43,6 @@ export const WithIconAndInfo = {
     args: {
         value: 800000,
         label: 'Targeted Population',
-        description: 'Funding Requirements',
         progress: 22,
         progressDescription: '22% received',
         icon: <HealthadviceIcon />,
diff --git a/packages/go-ui-storybook/src/stories/KeyFigure.tsx b/packages/go-ui-storybook/src/stories/KeyFigureView.tsx
similarity index 61%
rename from packages/go-ui-storybook/src/stories/KeyFigure.tsx
rename to packages/go-ui-storybook/src/stories/KeyFigureView.tsx
index 544a06f8f3..cd95f10333 100644
--- a/packages/go-ui-storybook/src/stories/KeyFigure.tsx
+++ b/packages/go-ui-storybook/src/stories/KeyFigureView.tsx
@@ -1,9 +1,9 @@
 import {
-    KeyFigure as PureKeyFigure,
-    KeyFigureProps,
+    KeyFigureView as PureKeyFigure,
+    KeyFigureViewProps,
 } from '@ifrc-go/ui';
 
-function KeyFigure(props: KeyFigureProps) {
+function KeyFigure(props: KeyFigureViewProps) {
     return (
         <PureKeyFigure {...props} /> // eslint-disable-line react/jsx-props-no-spreading
     );
diff --git a/packages/go-ui-storybook/src/stories/ListView.stories.tsx b/packages/go-ui-storybook/src/stories/ListView.stories.tsx
new file mode 100644
index 0000000000..c32b1b5620
--- /dev/null
+++ b/packages/go-ui-storybook/src/stories/ListView.stories.tsx
@@ -0,0 +1,105 @@
+import { ListViewProps } from '@ifrc-go/ui';
+import type {
+    Meta,
+    StoryObj,
+} from '@storybook/react';
+
+import ListView from './ListView';
+
+const meta: Meta<ListViewProps> = {
+    title: 'Views/ListView',
+    component: ListView,
+    tags: ['autodocs'],
+    decorators: [
+        (Story) => (
+            <div className="dash-border">
+                <Story />
+            </div>
+        ),
+    ],
+};
+
+export default meta;
+
+type Story = StoryObj<ListViewProps>;
+
+const SampleItems = (
+    <>
+        {Array.from({ length: 6 }, (_, i) => (
+            <div
+                key={i}
+                className="layout-content"
+            >
+                {`Item ${i + 1}`}
+            </div>
+        ))}
+    </>
+);
+
+export const InlineLayout: Story = {
+    args: {
+        layout: 'inline',
+        withWrap: true,
+        withSpaceBetweenContents: true,
+        withCenteredContents: false,
+        withPadding: true,
+        children: SampleItems,
+    },
+};
+
+export const BlockLayout: Story = {
+    args: {
+        layout: 'block',
+        withCenteredContents: true,
+        withPadding: true,
+        children: SampleItems,
+    },
+};
+
+export const GridLayout: Story = {
+    args: {
+        layout: 'grid',
+        numPreferredGridColumns: 3,
+        minGridColumnSize: '150px',
+        gridContentClassName: '',
+        withPadding: true,
+        children: SampleItems,
+    },
+};
+
+export const GridLayoutWithSidebar: Story = {
+    args: {
+        layout: 'grid',
+        withSidebar: true,
+        sidebarPosition: 'start',
+        withPadding: true,
+    },
+    render: (args: ListViewProps) => {
+        const children = args.sidebarPosition === 'end' ? (
+            <>
+                <ListView layout="block">
+                    {SampleItems}
+                </ListView>
+                <div className="list-view-sidebar">
+                    Sidebar
+                </div>
+            </>
+        ) : (
+            <>
+                <div className="list-view-sidebar">
+                    Sidebar
+                </div>
+                <ListView layout="block">
+                    {SampleItems}
+                </ListView>
+            </>
+        );
+
+        return (
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            <ListView {...args}>
+                {children}
+            </ListView>
+        );
+    },
+};
diff --git a/packages/go-ui-storybook/src/stories/ListView.tsx b/packages/go-ui-storybook/src/stories/ListView.tsx
new file mode 100644
index 0000000000..240e87a219
--- /dev/null
+++ b/packages/go-ui-storybook/src/stories/ListView.tsx
@@ -0,0 +1,12 @@
+import {
+    ListView as PureListView,
+    ListViewProps,
+} from '@ifrc-go/ui';
+
+function ListView(props: ListViewProps) {
+    return (
+        <PureListView {...props} /> // eslint-disable-line react/jsx-props-no-spreading
+    );
+}
+
+export default ListView;
diff --git a/packages/go-ui-storybook/src/stories/Modal.stories.tsx b/packages/go-ui-storybook/src/stories/Modal.stories.tsx
index 99e3fee06f..e7c5e95957 100644
--- a/packages/go-ui-storybook/src/stories/Modal.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/Modal.stories.tsx
@@ -69,6 +69,8 @@ function Template(args:Args) {
                     // eslint-disable-next-line react/jsx-props-no-spreading
                     {...args}
                     onClose={handleClose}
+                    // eslint-disable-next-line react/no-children-prop
+                    children={undefined}
                 />
             )}
         </>
@@ -113,6 +115,6 @@ export const Default: Story = {
         closeOnEscape: false,
         withoutCloseButton: false,
         closeOnClickOutside: true,
-        size: 'md',
+        size: 'sm',
     },
 };
diff --git a/packages/go-ui-storybook/src/stories/MultiSelectInput.stories.tsx b/packages/go-ui-storybook/src/stories/MultiSelectInput.stories.tsx
index d590920b52..f274ba691e 100644
--- a/packages/go-ui-storybook/src/stories/MultiSelectInput.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/MultiSelectInput.stories.tsx
@@ -44,7 +44,7 @@ type MultiSelectInputSpecificProps = MultiSelectInputProps<OptionKey, string[],
 type Story = StoryObj<MultiSelectInputSpecificProps>;
 
 const meta: Meta<typeof MultiSelectInput> = {
-    title: 'Components/MultiSelectInput',
+    title: 'Inputs/MultiSelectInput',
     component: MultiSelectInput,
     parameters: {
         layout: 'centered',
diff --git a/packages/go-ui-storybook/src/stories/NavigationTabList.stories.tsx b/packages/go-ui-storybook/src/stories/NavigationTabList.stories.tsx
index 1cfade0309..112433b91a 100644
--- a/packages/go-ui-storybook/src/stories/NavigationTabList.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/NavigationTabList.stories.tsx
@@ -33,41 +33,45 @@ export const Default: Story = {
             <div key="services">Services</div>,
             <div key="contacts">Contact</div>,
         ],
-        variant: 'primary',
+        styleVariant: 'nav',
+        colorVariant: 'primary',
+
     },
 };
 
 export const Primary: Story = {
     args: {
         ...Default.args,
-        variant: 'primary',
+        styleVariant: 'nav',
+        colorVariant: 'primary',
     },
 };
 
 export const Secondary: Story = {
     args: {
         ...Default.args,
-        variant: 'secondary',
+        styleVariant: 'nav',
+        colorVariant: 'secondary',
     },
 };
 
 export const Tertiary: Story = {
     args: {
         ...Default.args,
-        variant: 'tertiary',
+        styleVariant: 'pill',
     },
 };
 
 export const Step: Story = {
     args: {
         ...Default.args,
-        variant: 'step',
+        styleVariant: 'step',
     },
 };
 
 export const Vertical: Story = {
     args: {
         ...Default.args,
-        variant: 'vertical',
+        styleVariant: 'vertical',
     },
 };
diff --git a/packages/go-ui-storybook/src/stories/NumberInput.stories.tsx b/packages/go-ui-storybook/src/stories/NumberInput.stories.tsx
index 1fd7893206..87c4522630 100644
--- a/packages/go-ui-storybook/src/stories/NumberInput.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/NumberInput.stories.tsx
@@ -7,7 +7,7 @@ import { fn } from '@storybook/test';
 import NumberInput from './NumberInput';
 
 const meta: Meta<typeof NumberInput> = {
-    title: 'Components/NumberInput',
+    title: 'Inputs/NumberInput',
     component: NumberInput,
     parameters: {
         layout: 'centered',
diff --git a/packages/go-ui-storybook/src/stories/NumberOutput.stories.tsx b/packages/go-ui-storybook/src/stories/NumberOutput.stories.tsx
index f5424ad99c..e18432d3e7 100644
--- a/packages/go-ui-storybook/src/stories/NumberOutput.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/NumberOutput.stories.tsx
@@ -11,7 +11,7 @@ type NumberOutputSpecificProps = NumberOutputProps;
 type Story = StoryObj< NumberOutputSpecificProps>;
 
 const meta: Meta<typeof NumberOutput> = {
-    title: 'Components/ NumberOutput',
+    title: 'Outputs/ NumberOutput',
     component: NumberOutput,
     parameters: {
         layout: 'centered',
diff --git a/packages/go-ui-storybook/src/stories/PageContainer.stories.tsx b/packages/go-ui-storybook/src/stories/PageContainer.stories.tsx
index 566063fc1e..7b70c39f2f 100644
--- a/packages/go-ui-storybook/src/stories/PageContainer.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/PageContainer.stories.tsx
@@ -9,7 +9,7 @@ import PageContainer from './PageContainer';
 type Story = StoryObj<PageContainerProps>;
 
 const meta: Meta<typeof PageContainer> = {
-    title: 'Components/PageContainer',
+    title: 'Container/PageContainer',
     component: PageContainer,
     parameters: {
         layout: 'centered',
diff --git a/packages/go-ui-storybook/src/stories/Pager.stories.tsx b/packages/go-ui-storybook/src/stories/Pager.stories.tsx
index 958000b20e..610db47d4d 100644
--- a/packages/go-ui-storybook/src/stories/Pager.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/Pager.stories.tsx
@@ -13,7 +13,7 @@ import Pager from './Pager';
 type Story = StoryObj<PagerProps>;
 
 const meta = {
-    title: 'Components/Pager',
+    title: 'Inputs/Pager',
     component: Pager,
     parameters: {
         layout: 'centered',
diff --git a/packages/go-ui-storybook/src/stories/PasswordInput.stories.tsx b/packages/go-ui-storybook/src/stories/PasswordInput.stories.tsx
index 34c8dea082..44a88c03f0 100644
--- a/packages/go-ui-storybook/src/stories/PasswordInput.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/PasswordInput.stories.tsx
@@ -10,7 +10,7 @@ import PasswordInput from './PasswordInput';
 type Story = StoryObj<typeof PasswordInput>;
 
 const meta: Meta<typeof PasswordInput> = {
-    title: 'Components/PasswordInput',
+    title: 'Inputs/PasswordInput',
     component: PasswordInput,
     parameters: {
         layout: 'centered',
diff --git a/packages/go-ui-storybook/src/stories/PieChart.stories.tsx b/packages/go-ui-storybook/src/stories/PieChart.stories.tsx
index c1ef7bb2ec..e35631a6cb 100644
--- a/packages/go-ui-storybook/src/stories/PieChart.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/PieChart.stories.tsx
@@ -17,7 +17,7 @@ type PieChartSpecificProps = PieChartProps<Option>;
 type Story = StoryObj<PieChartSpecificProps>;
 
 const meta: Meta<typeof PieChart> = {
-    title: 'Components/PieChart',
+    title: 'Visualization/PieChart',
     component: PieChart,
     parameters: {
         layout: 'centered',
diff --git a/packages/go-ui-storybook/src/stories/Progressbar.stories.ts b/packages/go-ui-storybook/src/stories/Progressbar.stories.ts
index c150323002..6ea63b7169 100644
--- a/packages/go-ui-storybook/src/stories/Progressbar.stories.ts
+++ b/packages/go-ui-storybook/src/stories/Progressbar.stories.ts
@@ -7,7 +7,7 @@ import type {
 import ProgressBar from './ProgressBar';
 
 const meta = {
-    title: 'Components/ProgressBar',
+    title: 'Visualization/ProgressBar',
     component: ProgressBar,
     parameters: {
         layout: 'centered',
@@ -28,8 +28,9 @@ export const Default: Story = {
     args: {
         className: 'progress-bar',
         value: 75,
-        title: 'Total Projects Completed',
+        title: 'Total Projects Completed ',
         totalValue: 150,
+        colorVariant: 'primary',
     },
 };
 
@@ -46,3 +47,32 @@ export const WithDescription: Story = {
         description: 'Number of projects completed successfully this year.',
     },
 };
+
+export const Success: Story = {
+    args: {
+        value: 40,
+        totalValue: 100,
+        title: 'Successful Projects',
+        colorVariant: 'success',
+    },
+};
+
+export const Danger: Story = {
+    args: {
+        value: 20,
+        totalValue: 100,
+        title: 'Failed Projects',
+        colorVariant: 'danger',
+    },
+};
+
+export const CustomColor: Story = {
+    args: {
+        value: 50,
+        totalValue: 100,
+        title: 'Custom Color Progress',
+        colorVariant: 'custom',
+        color: '#FF5733',
+        showPercentageInTitle: true,
+    },
+};
diff --git a/packages/go-ui-storybook/src/stories/RadioInput.stories.tsx b/packages/go-ui-storybook/src/stories/RadioInput.stories.tsx
index 3defa882b0..ff15947d4d 100644
--- a/packages/go-ui-storybook/src/stories/RadioInput.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/RadioInput.stories.tsx
@@ -25,11 +25,11 @@ const options: Option[] = [
 const keySelector = (o: Option) => o.key;
 const labelSelector = (o: Option) => o.label;
 
-type RadioInputSpecificProps = RadioInputProps<string, Option, string, never, never>;
+type RadioInputSpecificProps = RadioInputProps<string, Option, string, never>;
 type Story = StoryObj<RadioInputSpecificProps>;
 
 const meta: Meta<typeof RadioInput> = {
-    title: 'Components/RadioInput',
+    title: 'Inputs/RadioInput',
     component: RadioInput,
     parameters: {
         layout: 'centered',
diff --git a/packages/go-ui-storybook/src/stories/RawFileInput.stories.tsx b/packages/go-ui-storybook/src/stories/RawFileInput.stories.tsx
index a2e12ef01c..0b7c6e8956 100644
--- a/packages/go-ui-storybook/src/stories/RawFileInput.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/RawFileInput.stories.tsx
@@ -12,7 +12,7 @@ type RawFileInputSpecificProps = RawFileInputProps<string>;
 type Story = StoryObj<RawFileInputSpecificProps>;
 
 const meta: Meta<typeof RawFileInput> = {
-    title: 'Components/RawFileInput',
+    title: 'Inputs/RawFileInput',
     component: RawFileInput,
     parameters: {
         layout: 'centered',
@@ -30,7 +30,6 @@ export const Default: Story = {
     args: {
         name: 'RawFileInput',
         children: 'Upload File',
-        multiple: false,
         onChange: fn(),
     },
 };
@@ -39,8 +38,8 @@ export const Multiple: Story = {
     args: {
         name: 'RawFileInput',
         children: 'Upload Files',
-        variant: 'secondary',
-        multiple: true,
+        styleVariant: 'outline',
+        colorVariant: 'primary',
         onChange: fn(),
     },
 };
@@ -50,7 +49,6 @@ export const WithAccept: Story = {
         name: 'RawFileInput',
         accept: 'image/png,image/jpeg',
         children: 'Upload Image',
-        multiple: false,
         onChange: fn(),
     },
 };
@@ -59,7 +57,6 @@ export const Disabled: Story = {
     args: {
         name: 'RawFileInput',
         children: 'Export',
-        multiple: false,
         onChange: fn(),
         disabled: true,
     },
@@ -70,7 +67,6 @@ export const ReadOnly: Story = {
         name: 'RawFileInput',
         children: 'Export',
         readOnly: true,
-        multiple: false,
         onChange: fn(),
     },
 };
diff --git a/packages/go-ui-storybook/src/stories/RawList.stories.tsx b/packages/go-ui-storybook/src/stories/RawList.stories.tsx
index 0109bf8d6d..296db570b2 100644
--- a/packages/go-ui-storybook/src/stories/RawList.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/RawList.stories.tsx
@@ -41,7 +41,7 @@ const keySelector = (d: Option) => d.label;
 const rendererParams = (_: string, datum: Option) => ({ label: datum.label });
 
 const meta: Meta<typeof RawList> = {
-    title: 'Components/RawList',
+    title: 'Inputs/RawList',
     component: RawList,
     parameters: {
         layout: 'centered',
diff --git a/packages/go-ui-storybook/src/stories/SearchMultiSelectInput.stories.tsx b/packages/go-ui-storybook/src/stories/SearchMultiSelectInput.stories.tsx
index 4b3fcf98e3..264c44e871 100644
--- a/packages/go-ui-storybook/src/stories/SearchMultiSelectInput.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/SearchMultiSelectInput.stories.tsx
@@ -48,7 +48,7 @@ SearchMultiSelectInputProps<OptionKey, string, Option, object, never>;
 type Story = StoryObj<SearchMultiSelectInputSpecificProps>;
 
 const meta: Meta<typeof SearchMultiSelectInput> = {
-    title: 'Components/SearchMultiSelectInput',
+    title: 'Inputs/SearchMultiSelectInput',
     component: SearchMultiSelectInput,
     parameters: {
         layout: 'centered',
diff --git a/packages/go-ui-storybook/src/stories/SearchSelectInput.stories.tsx b/packages/go-ui-storybook/src/stories/SearchSelectInput.stories.tsx
index a0217ac912..e1f30ff88c 100644
--- a/packages/go-ui-storybook/src/stories/SearchSelectInput.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/SearchSelectInput.stories.tsx
@@ -53,7 +53,7 @@ SearchSelectInputProps<OptionKey, string, Option, object, never>;
 type Story = StoryObj<SearchSelectInputSpecificProps>;
 
 const meta: Meta<typeof SearchSelectInput> = {
-    title: 'Components/SearchSelectInput',
+    title: 'Inputs/SearchSelectInput',
     component: SearchSelectInput,
     parameters: {
         layout: 'centered',
diff --git a/packages/go-ui-storybook/src/stories/SegmentInput.stories.tsx b/packages/go-ui-storybook/src/stories/SegmentInput.stories.tsx
index ae1fd0721c..355d6bf0f8 100644
--- a/packages/go-ui-storybook/src/stories/SegmentInput.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/SegmentInput.stories.tsx
@@ -24,11 +24,11 @@ const options: Option[] = [
 const keySelector = (o: Option) => o.key;
 const labelSelector = (o: Option) => o.label;
 
-type SegmentInputSpecificProps = SegmentInputProps<string, Option, string, never>;
+type SegmentInputSpecificProps = SegmentInputProps<string, Option, string>;
 type Story = StoryObj<SegmentInputSpecificProps>;
 
 const meta = {
-    title: 'Components/SegmentInput',
+    title: 'Inputs/SegmentInput',
     component: SegmentInput,
     parameters: {
         layout: 'centered',
diff --git a/packages/go-ui-storybook/src/stories/SelectInput.stories.tsx b/packages/go-ui-storybook/src/stories/SelectInput.stories.tsx
index 42344b499c..a72649d3ff 100644
--- a/packages/go-ui-storybook/src/stories/SelectInput.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/SelectInput.stories.tsx
@@ -47,7 +47,7 @@ type SelectInputSpecificProps = SelectInputProps<OptionKey, string, Option, obje
 type Story = StoryObj<SelectInputSpecificProps>;
 
 const meta: Meta<typeof SelectInput> = {
-    title: 'Components/SelectInput',
+    title: 'Inputs/SelectInput',
     component: SelectInput,
     parameters: {
         layout: 'centered',
diff --git a/packages/go-ui-storybook/src/stories/StackedProgressBar.stories.tsx b/packages/go-ui-storybook/src/stories/StackedProgressBar.stories.tsx
index 2629e7e7b8..490889722a 100644
--- a/packages/go-ui-storybook/src/stories/StackedProgressBar.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/StackedProgressBar.stories.tsx
@@ -40,7 +40,7 @@ type StackedProgressBarSpecificProps = StackedProgressBarProps<Category>;
 type Story = StoryObj<StackedProgressBarSpecificProps>;
 
 const meta: Meta<typeof StackedProgressBar> = {
-    title: 'Components/StackedProgressBar',
+    title: 'Visualization/StackedProgressBar',
     component: StackedProgressBar,
     parameters: {
         layout: 'centered',
diff --git a/packages/go-ui-storybook/src/stories/Switch.stories.tsx b/packages/go-ui-storybook/src/stories/Switch.stories.tsx
index 2c19430cd3..8119956e1c 100644
--- a/packages/go-ui-storybook/src/stories/Switch.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/Switch.stories.tsx
@@ -14,7 +14,7 @@ type SwitchSpecificProps = SwitchProps<string>;
 type Story = StoryObj<SwitchSpecificProps>;
 
 const meta: Meta<typeof Switch> = {
-    title: 'Components/ Switch',
+    title: 'Inputs/ Switch',
     component: Switch,
     parameters: {
         layout: 'centered',
diff --git a/packages/go-ui-storybook/src/stories/Tabs.stories.tsx b/packages/go-ui-storybook/src/stories/Tabs.stories.tsx
index 3bbaa2f324..e5fa882248 100644
--- a/packages/go-ui-storybook/src/stories/Tabs.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/Tabs.stories.tsx
@@ -80,47 +80,40 @@ function Template(args:Args) {
 
 export const Default: Story = {
     render: Template,
-};
-
-export const Primary: Story = {
-    render: Template,
-    args: {
-        variant: 'primary',
-    },
-};
-
-export const Secondary: Story = {
-    render: Template,
     args: {
-        variant: 'secondary',
+        styleVariant: 'tab',
     },
 };
 
-export const Tertiary: Story = {
+export const Pill: Story = {
     render: Template,
     args: {
-        variant: 'tertiary',
+        styleVariant: 'pill',
+        colorVariant: 'primary',
     },
 };
 
 export const Step: Story = {
     render: Template,
     args: {
-        variant: 'step',
+        styleVariant: 'step',
+        colorVariant: 'primary',
     },
 };
 
 export const Vertical: Story = {
     render: Template,
     args: {
-        variant: 'vertical',
+        styleVariant: 'vertical',
+        colorVariant: 'primary',
     },
 };
 
 export const VerticalCompact: Story = {
     render: Template,
     args: {
-        variant: 'vertical-compact',
+        styleVariant: 'vertical-compact',
+        colorVariant: 'primary',
     },
 };
 
diff --git a/packages/go-ui-storybook/src/stories/TextArea.stories.tsx b/packages/go-ui-storybook/src/stories/TextArea.stories.tsx
index 16fbaab289..1d73c1c224 100644
--- a/packages/go-ui-storybook/src/stories/TextArea.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/TextArea.stories.tsx
@@ -11,7 +11,7 @@ import TextArea from './TextArea';
 type Story = StoryObj<typeof meta>;
 
 const meta: Meta<typeof TextArea> = {
-    title: 'Components/TextArea',
+    title: 'Inputs/TextArea',
     component: TextArea,
     parameters: {
         layout: 'centered',
diff --git a/packages/go-ui-storybook/src/stories/TextInput.stories.tsx b/packages/go-ui-storybook/src/stories/TextInput.stories.tsx
index a4cc23bd9a..dace6c2eab 100644
--- a/packages/go-ui-storybook/src/stories/TextInput.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/TextInput.stories.tsx
@@ -14,7 +14,7 @@ type TextInputSpecificProps = TextInputProps<string>;
 type Story = StoryObj<TextInputSpecificProps>;
 
 const meta: Meta<typeof TextInput> = {
-    title: 'Components/TextInput',
+    title: 'Inputs/TextInput',
     component: TextInput,
     parameters: {
         layout: 'centered',
diff --git a/packages/go-ui-storybook/src/stories/TimeSeriesChart.stories.tsx b/packages/go-ui-storybook/src/stories/TimeSeriesChart.stories.tsx
index 5db4f80d22..1e13e86345 100644
--- a/packages/go-ui-storybook/src/stories/TimeSeriesChart.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/TimeSeriesChart.stories.tsx
@@ -59,7 +59,7 @@ const dataKeyToStyleMap: Record<
 const classNameSelector = (dataKey: DataKey) => dataKeyToStyleMap[dataKey];
 
 const meta: Meta<typeof TimeSeriesChart> = {
-    title: 'Components/TimeSeriesChart',
+    title: 'Visualization/TimeSeriesChart',
     component: TimeSeriesChart,
     parameters: {
         layout: 'centered',
diff --git a/packages/go-ui-storybook/src/stories/index.css b/packages/go-ui-storybook/src/stories/index.css
index 6a876bbf65..25c3ea3c2f 100644
--- a/packages/go-ui-storybook/src/stories/index.css
+++ b/packages/go-ui-storybook/src/stories/index.css
@@ -45,7 +45,7 @@
     margin-left: var(--go-ui-spacing-md);
 }
 
-.title > p {
+.title>p {
     font-size: var(--go-ui-font-size-4xl);
     padding-bottom: var(--go-ui-spacing-2xl);
     color: var(--go-ui-color-primary-red);
@@ -58,13 +58,13 @@
     padding-bottom: var(--go-ui-spacing-2xl);
 }
 
-.overview > p {
+.overview>p {
     padding-top: var(--go-ui-spacing-md);
     padding-bottom: var(--go-ui-spacing-md);
     font-size: var(--go-ui-font-size-3xl);
 }
 
-.text-body > p {
+.text-body>p {
     font-size: var(--go-ui-font-size-lg);
 }
 
@@ -72,8 +72,8 @@
     width: 30rem;
 }
 
-.progress-bar{
-    width:20rem;
+.progress-bar {
+    width: 20rem;
 }
 
 .header-children {
@@ -139,7 +139,7 @@
     flex-direction: column;
     width: 40rem;
     height: 30rem;
-     align-items: center;
+    align-items: center;
 }
 
 .page-container-header {
@@ -170,3 +170,20 @@
     padding-top: var(--go-ui-spacing-md);
     padding-bottom: var(--go-ui-spacing-md);
 }
+
+
+.layout-content {
+    background-color: var(--go-ui-color-gray-30);
+    padding: var(--go-ui-spacing-md);
+    margin-bottom: 1px;
+}
+
+.list-view-sidebar {
+    background-color: var(--go-ui-color-gray-40);
+    padding: var(--go-ui-spacing-md);
+}
+
+.dash-border {
+    border: var(--go-ui-spacing-5xs) dashed var(--go-ui-color-gray-40);
+    background-color: var(--go-ui-color-gray-10);
+}
\ No newline at end of file
diff --git a/packages/go-ui-storybook/src/stories/inlineLayout.stories.tsx b/packages/go-ui-storybook/src/stories/inlineLayout.stories.tsx
new file mode 100644
index 0000000000..29c7051ebe
--- /dev/null
+++ b/packages/go-ui-storybook/src/stories/inlineLayout.stories.tsx
@@ -0,0 +1,38 @@
+import { InlineLayoutProps } from '@ifrc-go/ui';
+import type {
+    Meta,
+    StoryObj,
+} from '@storybook/react';
+
+import InlineLayout from './inlineLayout';
+
+const meta: Meta<InlineLayoutProps> = {
+    title: 'Layouts/InlineLayout',
+    component: InlineLayout,
+    parameters: {
+        layout: 'centered',
+    },
+    args: {
+        before: <div className="layout-content">Before Content</div>,
+        after: <div className="layout-content">After Content</div>,
+        children: <div className="layout-content">Content</div>,
+    },
+    decorators: [
+        (Story) => (
+            <div className="dash-border">
+                <Story />
+            </div>
+        ),
+    ],
+};
+
+export default meta;
+
+type Story = StoryObj<InlineLayoutProps>;
+
+export const Default: Story = {
+    args: {
+        spacing: 'sm',
+        withPadding: true,
+    },
+};
diff --git a/packages/go-ui-storybook/src/stories/inlineLayout.tsx b/packages/go-ui-storybook/src/stories/inlineLayout.tsx
new file mode 100644
index 0000000000..04b15227ee
--- /dev/null
+++ b/packages/go-ui-storybook/src/stories/inlineLayout.tsx
@@ -0,0 +1,12 @@
+import {
+    InlineLayout as PureInlineLayout,
+    InlineLayoutProps,
+} from '@ifrc-go/ui';
+
+function InlineLayout(props: InlineLayoutProps) {
+    return (
+        <PureInlineLayout {...props} /> // eslint-disable-line react/jsx-props-no-spreading
+    );
+}
+
+export default InlineLayout;
diff --git a/packages/go-ui-storybook/src/stories/inputSection.stories.tsx b/packages/go-ui-storybook/src/stories/inputSection.stories.tsx
new file mode 100644
index 0000000000..84b76d05aa
--- /dev/null
+++ b/packages/go-ui-storybook/src/stories/inputSection.stories.tsx
@@ -0,0 +1,120 @@
+import { TextInput } from '@ifrc-go/ui';
+import type {
+    Meta,
+    StoryObj,
+} from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import InputSection, { InputSectionProps } from './InputSection';
+
+const meta: Meta<typeof InputSection> = {
+    title: 'Inputs/InputSection',
+    component: InputSection,
+};
+
+export default meta;
+
+type Story = StoryObj<InputSectionProps>;
+
+function Items(length: number) {
+    return (
+        <>
+            {Array.from({ length }, (_, i) => (
+                <TextInput
+                    name="undefined"
+                    onChange={fn}
+                    value={undefined}
+                    placeholder={`Item ${i + 1}`}
+                    key={i}
+                />
+
+            ))}
+        </>
+    );
+}
+
+export const Default: Story = {
+    args: {
+        title: 'Section Title',
+        description: 'This is a helpful description for the section.',
+        children: Items(1),
+    },
+};
+
+export const WithTooltip: Story = {
+    args: {
+        title: 'Section With Tooltip',
+        description: 'Hover the info icon to see details.',
+        tooltip: 'Additional contextual information goes here.',
+        children: Items(1),
+    },
+};
+
+export const RequiredSection: Story = {
+    args: {
+        title: 'Required Section',
+        description: 'Fields marked with * are mandatory.',
+        withAsteriskOnTitle: true,
+        children: Items(1),
+    },
+};
+
+export const TwoColumns: Story = {
+    args: {
+        title: 'Two Column Layout',
+        description: 'Children arranged in two columns.',
+        numPreferredColumns: 2,
+        children: Items(4),
+    },
+};
+
+export const FourColumns: Story = {
+    args: {
+        title: 'Four Column Layout',
+        numPreferredColumns: 4,
+        children: Items(8),
+    },
+};
+
+export const WithoutTitle: Story = {
+    args: {
+        withoutTitleSection: true,
+        children: Items(1),
+    },
+};
+
+export const FullWidthContent: Story = {
+    args: {
+        title: 'Full Width Content',
+        description: 'Content spans full width instead of sidebar layout.',
+        withFullWidthContent: true,
+        children: Items(1),
+    },
+};
+
+export const WithoutPadding: Story = {
+    args: {
+        title: 'No Padding',
+        description: 'Container padding removed.',
+        withoutPadding: true,
+        children: Items(1),
+    },
+};
+
+export const WithoutBackground: Story = {
+    args: {
+        title: 'No Background',
+        description: 'Background styling removed.',
+        withoutBackground: true,
+        children: Items(1),
+    },
+};
+
+export const WithShadow: Story = {
+    args: {
+        title: 'Shadowed Section',
+        description: 'Container shadow enabled.',
+        withShadow: true,
+        children: Items(1),
+    },
+};