diff --git a/main/uis/Button/index.tsx b/main/uis/Button/index.tsx
index f9d2d7be..7e1ce7e2 100644
--- a/main/uis/Button/index.tsx
+++ b/main/uis/Button/index.tsx
@@ -347,6 +347,7 @@ export function Button({
       style={[
         style,
         css`
+          flex-direction: row;
           border-radius: ${borderRadius + 'px'};
         `,
       ]}
diff --git a/main/uis/EditText/index.tsx b/main/uis/EditText/index.tsx
index 2c652f38..54226959 100644
--- a/main/uis/EditText/index.tsx
+++ b/main/uis/EditText/index.tsx
@@ -53,20 +53,17 @@ type CustomRenderType =
 export type EditTextProps = {
   testID?: TextInputProps['testID'];
   inputRef?: MutableRefObject<TextInput | undefined> | RefObject<TextInput>;
-  required?: boolean;
-
   style?: StyleProp<ViewStyle>;
   styles?: EditTextStyles;
 
   // Components
-  label?: string | RenderType;
-  error?: string | RenderType;
   startElement?: JSX.Element | CustomRenderType;
   endElement?: JSX.Element | CustomRenderType;
-
+  required?: boolean;
+  label?: string | RenderType;
+  error?: string | RenderType;
   direction?: 'row' | 'column';
   decoration?: 'underline' | 'boxed';
-
   value?: TextInputProps['value'];
   multiline?: TextInputProps['multiline'];
   onChange?: TextInputProps['onChange'];
diff --git a/main/uis/Icon/index.tsx b/main/uis/Icon/index.tsx
index 2df3c658..bb6a6d9b 100644
--- a/main/uis/Icon/index.tsx
+++ b/main/uis/Icon/index.tsx
@@ -3782,14 +3782,14 @@ export const doobooIconList = [
 export type IconNames = typeof doobooIconList;
 export type IconName = IconNames[number];
 
-type Props = {
+export type IconProps = {
   name: IconName;
   size?: number;
   color?: string;
   style?: ViewStyle;
 };
 
-const Ico: FC<Props> = createIconSetFromIcoMoon(
+const Ico: FC<IconProps> = createIconSetFromIcoMoon(
   collectingFontIconSelection,
   'doobooui',
   require('./doobooui.ttf'),
diff --git a/main/uis/LoadingIndicator/index.tsx b/main/uis/LoadingIndicator/index.tsx
index fe5f9416..0d5a6273 100644
--- a/main/uis/LoadingIndicator/index.tsx
+++ b/main/uis/LoadingIndicator/index.tsx
@@ -13,14 +13,14 @@ type Styles = {
   image?: ImageStyle;
 };
 
-type Props {
+type Props = {
   style?: StyleProp<ViewStyle>;
   styles?: Styles;
   color?: string;
   size?: ActivityIndicator['props']['size'];
   imgSource?: string | ImageSourcePropType;
   customElement?: JSX.Element | (() => JSX.Element);
-}
+};
 
 export function LoadingIndicator({
   customElement,
diff --git a/main/uis/NetworkImage/index.tsx b/main/uis/NetworkImage/index.tsx
index 4f99e3c7..982cb5b5 100644
--- a/main/uis/NetworkImage/index.tsx
+++ b/main/uis/NetworkImage/index.tsx
@@ -18,13 +18,13 @@ const Container = styled.View`
   align-items: center;
 `;
 
-interface Props {
+type Props = {
   style?: StyleProp<ViewStyle>;
   url: string | undefined;
   loadingSource?: ImageSourcePropType | JSX.Element;
   imageProps?: Partial<ImageProps>;
   shouldFixImageRatio?: boolean;
-}
+};
 
 function NetworkImage(props: Props): JSX.Element {
   const {themeType} = useTheme();
diff --git a/stories/modals/AlertDialogStories/AlertDialog.stories.tsx b/stories/modals/AlertDialogStories/AlertDialog.stories.tsx
index 1fbb4fab..3041d756 100644
--- a/stories/modals/AlertDialogStories/AlertDialog.stories.tsx
+++ b/stories/modals/AlertDialogStories/AlertDialog.stories.tsx
@@ -3,6 +3,7 @@ import type {Meta, StoryObj} from '@storybook/react';
 
 import {DoobooProvider} from '../../../main';
 import type AlertDialog from '../../../main/modals/AlertDialog';
+import {StoryContainer} from '../../GlobalStyles';
 
 import Component from './AlertDialogBasicStory';
 
@@ -13,7 +14,9 @@ const meta = {
   decorators: [
     (Story) => (
       <DoobooProvider>
-        <Story />
+        <StoryContainer>
+          <Story />
+        </StoryContainer>
       </DoobooProvider>
     ),
   ],
diff --git a/stories/modals/SnackbarStories/Snackbar.stories.tsx b/stories/modals/SnackbarStories/Snackbar.stories.tsx
index 36f79944..1497eb2e 100644
--- a/stories/modals/SnackbarStories/Snackbar.stories.tsx
+++ b/stories/modals/SnackbarStories/Snackbar.stories.tsx
@@ -3,6 +3,7 @@ import type {Meta, StoryObj} from '@storybook/react';
 
 import {DoobooProvider} from '../../../main';
 import type Snackbar from '../../../main/modals/Snackbar';
+import {StoryContainer} from '../../GlobalStyles';
 
 import Component from './SnackbarBasicStory';
 
@@ -13,7 +14,9 @@ const meta = {
   decorators: [
     (Story) => (
       <DoobooProvider>
-        <Story />
+        <StoryContainer>
+          <Story />
+        </StoryContainer>
       </DoobooProvider>
     ),
   ],
diff --git a/stories/packages/CalendarCarousel.stories.tsx b/stories/packages/CalendarCarousel.stories.tsx
new file mode 100644
index 00000000..d420f76b
--- /dev/null
+++ b/stories/packages/CalendarCarousel.stories.tsx
@@ -0,0 +1,60 @@
+import type {ComponentProps} from 'react';
+import type {Meta, StoryObj} from '@storybook/react';
+
+import {DoobooProvider} from '../../main';
+import CalendarCarousel from '../../packages/CalendarCarousel';
+import {StoryContainer} from '../GlobalStyles';
+
+const meta = {
+  title: 'CalendarCarousel',
+  component: (props) => (
+    <CalendarCarousel
+      initialSelectedDate={new Date(2024, 11, 4)}
+      showNextDates={true}
+      showPrevDates={true}
+      width={350}
+      {...props}
+      // headerIconLeft={
+      //   <Icon color={theme.text.basic} name="ArrowCircleLeft" size={18} />
+      // }
+      // headerIconRight={
+      //   <Icon color={theme.text.basic} name="ArrowCircleRight" size={18} />
+      // }
+      // locale={ko}
+      // style={css`
+      //   margin-top: 80px;
+      // `}
+    />
+  ),
+  argTypes: {
+    initialSelectedDate: {
+      control: 'date',
+    },
+    showNextDates: {
+      control: 'boolean',
+    },
+    showPrevDates: {
+      control: 'boolean',
+    },
+    width: {
+      control: 'number',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <DoobooProvider>
+        <StoryContainer>
+          <Story />
+        </StoryContainer>
+      </DoobooProvider>
+    ),
+  ],
+} satisfies Meta<ComponentProps<typeof CalendarCarousel>>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  args: {},
+};
diff --git a/stories/packages/CalendarCarouselStories/CalendarCarousel.stories.tsx b/stories/packages/CalendarCarouselStories/CalendarCarousel.stories.tsx
deleted file mode 100644
index c07b48c0..00000000
--- a/stories/packages/CalendarCarouselStories/CalendarCarousel.stories.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import type {ComponentProps} from 'react';
-import type {Meta, StoryObj} from '@storybook/react';
-
-import {DoobooProvider} from '../../../main';
-import type CalendarCarousel from '../../../packages/CalendarCarousel';
-
-import Component from './CalendarCarouselBasicStory';
-
-const meta = {
-  title: 'CalendarCarousel',
-  component: Component,
-  argTypes: {},
-  decorators: [
-    (Story) => (
-      <DoobooProvider>
-        <Story />
-      </DoobooProvider>
-    ),
-  ],
-} satisfies Meta<ComponentProps<typeof CalendarCarousel>>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Basic: Story = {
-  args: {},
-};
diff --git a/stories/packages/CalendarCarouselStories/CalendarCarouselBasicStory.tsx b/stories/packages/CalendarCarouselStories/CalendarCarouselBasicStory.tsx
deleted file mode 100644
index bc2cb650..00000000
--- a/stories/packages/CalendarCarouselStories/CalendarCarouselBasicStory.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-// Caveat: Expo web needs React to be imported
-import React from 'react';
-import {useTheme} from '@dooboo-ui/theme';
-import {css} from '@emotion/native';
-import {ko} from 'date-fns/locale';
-
-import {Icon} from '../../../main/uis/Icon';
-import CalendarCarousel from '../../../packages/CalendarCarousel';
-import {StoryWrapper} from '../../Common';
-
-function CalendarCarouselBasicStory(): JSX.Element {
-  const {theme} = useTheme();
-
-  //TODO: Add more detailed example for CalendarCarousel
-  // const [currentDate, setCurrentDate] = useState<Date>(date);
-  // const [selectedDate, setSelectedDate] = useState<Date>();
-  // const monthFormatter = new Intl.DateTimeFormat('default', {month: 'long'});
-  // const markedDayEvents = [
-  //   {
-  //     selectedEventDate: new Date(2020, 7, 7),
-  //     events: 'Walk Dog with Neighbor',
-  //   },
-  //   {
-  //     selectedEventDate: new Date(2020, 7, 17),
-  //     events: 'Birthday Party for Jessie',
-  //   },
-  //   {
-  //     selectedEventDate: new Date(2020, 7, 27),
-  //     events: 'Cooking for Mom',
-  //   },
-  // ];
-
-  return (
-    <StoryWrapper>
-      <CalendarCarousel
-        headerIconLeft={
-          <Icon color={theme.text.basic} name="ArrowCircleLeft" size={18} />
-        }
-        headerIconRight={
-          <Icon color={theme.text.basic} name="ArrowCircleRight" size={18} />
-        }
-        initialSelectedDate={new Date(2024, 11, 4)}
-        locale={ko}
-        showNextDates={true}
-        showPrevDates={true}
-        style={css`
-          margin-top: 80px;
-        `}
-        width={350}
-      />
-    </StoryWrapper>
-  );
-}
-
-export default CalendarCarouselBasicStory;
diff --git a/stories/packages/PinchZoomStories/PinchZoom.stories.tsx b/stories/packages/PinchZoom.stories.tsx
similarity index 60%
rename from stories/packages/PinchZoomStories/PinchZoom.stories.tsx
rename to stories/packages/PinchZoom.stories.tsx
index 2a99d48b..047b3957 100644
--- a/stories/packages/PinchZoomStories/PinchZoom.stories.tsx
+++ b/stories/packages/PinchZoom.stories.tsx
@@ -1,10 +1,11 @@
 import type {ComponentProps} from 'react';
 import type {Meta, StoryObj} from '@storybook/react';
 
-import {DoobooProvider} from '../../../main';
-import type {PinchZoom} from '../../../packages/PinchZoom';
+import {DoobooProvider} from '../../main';
+import type {PinchZoom} from '../../packages/PinchZoom/lib';
+import {StoryContainer} from '../GlobalStyles';
 
-import Component from './PinchZoomImageListStory';
+import Component from './PinchZoomStories/PinchZoomImageListStory';
 
 const meta = {
   title: 'PinchZoom',
@@ -14,7 +15,9 @@ const meta = {
   decorators: [
     (Story) => (
       <DoobooProvider>
-        <Story />
+        <StoryContainer>
+          <Story />
+        </StoryContainer>
       </DoobooProvider>
     ),
   ],
diff --git a/stories/uis/EditText.stories.tsx b/stories/uis/EditText.stories.tsx
new file mode 100644
index 00000000..2854486d
--- /dev/null
+++ b/stories/uis/EditText.stories.tsx
@@ -0,0 +1,55 @@
+import type {ComponentProps} from 'react';
+import {action} from '@storybook/addon-actions';
+import type {Meta, StoryObj} from '@storybook/react';
+
+import {DoobooProvider, EditText} from '../../main';
+import {StoryWrapper} from '../Common';
+
+const meta = {
+  title: 'EditText',
+  component: (props) => <EditText {...props} />,
+  argTypes: {
+    required: {type: 'boolean'},
+    label: {type: 'string'},
+    error: {type: 'string'},
+    value: {type: 'string'},
+    multiline: {type: 'boolean'},
+    placeholder: {type: 'string'},
+    placeholderColor: {type: 'string'},
+    editable: {type: 'boolean'},
+    secureTextEntry: {type: 'boolean'},
+    numberOfLines: {type: 'number'},
+    maxLength: {type: 'number'},
+    hideCounter: {type: 'boolean'},
+    direction: {
+      control: 'select',
+      options: ['row', 'column'],
+    },
+    decoration: {
+      control: 'select',
+      options: ['underline', 'boxed'],
+    },
+  },
+  decorators: [
+    (Story) => (
+      <DoobooProvider>
+        <StoryWrapper>
+          <Story />
+        </StoryWrapper>
+      </DoobooProvider>
+    ),
+  ],
+} satisfies Meta<ComponentProps<typeof EditText>>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  args: {
+    onChangeText: (text: string) => action(text),
+    direction: 'column',
+    decoration: 'boxed',
+    editable: true,
+  },
+};
diff --git a/stories/uis/EditTextStories/EditText.stories.tsx b/stories/uis/EditTextStories/EditText.stories.tsx
deleted file mode 100644
index 46f45d7f..00000000
--- a/stories/uis/EditTextStories/EditText.stories.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import type {ComponentProps} from 'react';
-import type {Meta, StoryObj} from '@storybook/react';
-
-import type {EditText} from '../../../main';
-import {DoobooProvider} from '../../../main';
-import {StoryWrapper} from '../../Common';
-
-import Component from './EditTextBasicStory';
-
-const meta = {
-  title: 'EditText',
-  component: Component,
-  argTypes: {},
-  decorators: [
-    (Story) => (
-      <DoobooProvider>
-        <StoryWrapper>
-          <Story />
-        </StoryWrapper>
-      </DoobooProvider>
-    ),
-  ],
-} satisfies Meta<ComponentProps<typeof EditText>>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Basic: Story = {
-  args: {},
-};
diff --git a/stories/uis/EditTextStories/EditTextBasicStory.tsx b/stories/uis/EditTextStories/EditTextBasicStory.tsx
deleted file mode 100644
index 7c547430..00000000
--- a/stories/uis/EditTextStories/EditTextBasicStory.tsx
+++ /dev/null
@@ -1,225 +0,0 @@
-// Caveat: Expo web needs React to be imported
-import React, {useState} from 'react';
-import {useTheme} from '@dooboo-ui/theme';
-import {css} from '@emotion/native';
-import {boolean} from '@storybook/addon-knobs';
-
-import {Button, Icon} from '../../../main';
-import type {EditTextStatus} from '../../../main/uis/EditText';
-import {EditText} from '../../../main/uis/EditText';
-import {Typography} from '../../../main/uis/Typography';
-
-export default function EditTextBasicStory(): JSX.Element {
-  const {theme} = useTheme();
-  const [text, setText] = useState<string>('');
-
-  const onTextChanged = (str: string): void => setText(str);
-
-  const renderCustomLabel = (status: EditTextStatus): JSX.Element => {
-    return (
-      <Typography.Body1
-        style={{
-          color: status === 'focused' ? theme.role.primary : theme.text.basic,
-          fontSize: 12,
-          fontWeight: 'bold',
-        }}
-      >
-        Custom label [{status}]
-      </Typography.Body1>
-    );
-  };
-
-  return (
-    <>
-      <EditText
-        editable={boolean('editable', true)}
-        onChangeText={(str) => onTextChanged(str)}
-        placeholder="Basic text input"
-        secureTextEntry={boolean('secureTextEntry', false)}
-        style={{marginTop: 20}}
-        value={text}
-      />
-
-      <EditText
-        editable={boolean('editable', true)}
-        onChangeText={(str) => onTextChanged(str)}
-        placeholder="Secure text input"
-        secureTextEntry={true}
-        style={{marginTop: 20}}
-        value={text}
-      />
-
-      <EditText
-        direction="column"
-        editable={boolean('editable', true)}
-        endElement={
-          text ? (
-            <Button
-              onPress={() => onTextChanged('')}
-              text={
-                <Icon color={theme.role.primary} name="XCircle" size={18} />
-              }
-              type="text"
-            />
-          ) : null
-        }
-        label="Column"
-        maxLength={240}
-        onChangeText={(str) => onTextChanged(str)}
-        placeholder="direction: column"
-        secureTextEntry={boolean('secureTextEntry', false)}
-        startElement={
-          <Button
-            onPress={() => onTextChanged('')}
-            text={<Icon color={theme.role.primary} name="MapPin" size={18} />}
-            type="text"
-          />
-        }
-        style={css`
-          margin-top: 20px;
-        `}
-        value={text}
-      />
-
-      <EditText
-        direction="row"
-        editable={boolean('editable', true)}
-        endElement={
-          text ? (
-            <Button
-              onPress={() => onTextChanged('')}
-              text={
-                <Icon color={theme.role.primary} name="XCircle" size={18} />
-              }
-              type="text"
-            />
-          ) : null
-        }
-        label="Row"
-        maxLength={240}
-        onChangeText={(str) => onTextChanged(str)}
-        placeholder="direction: row"
-        secureTextEntry={boolean('secureTextEntry', false)}
-        style={css`
-          margin-top: 20px;
-        `}
-        value={text}
-      />
-
-      <EditText
-        decoration="boxed"
-        direction="column"
-        editable={boolean('editable', true)}
-        endElement={
-          text ? (
-            <Button
-              onPress={() => onTextChanged('')}
-              text={
-                <Icon color={theme.role.primary} name="XCircle" size={18} />
-              }
-              type="text"
-            />
-          ) : null
-        }
-        maxLength={200}
-        onChangeText={(str) => onTextChanged(str)}
-        placeholder="decoration: boxed with max length"
-        secureTextEntry={boolean('secureTextEntry', false)}
-        startElement={
-          <Button
-            onPress={() => onTextChanged('')}
-            text={<Icon color={theme.role.primary} name="MapPin" size={18} />}
-            type="text"
-          />
-        }
-        style={css`
-          margin-top: 20px;
-        `}
-        value={text}
-      />
-
-      <EditText
-        decoration="boxed"
-        direction="column"
-        editable={boolean('editable', true)}
-        endElement={
-          text ? (
-            <Button
-              onPress={() => onTextChanged('')}
-              text={
-                <Icon color={theme.role.primary} name="XCircle" size={18} />
-              }
-              type="text"
-            />
-          ) : null
-        }
-        label="Boxed"
-        multiline
-        onChangeText={(str) => onTextChanged(str)}
-        placeholder="decoration: boxed"
-        required
-        secureTextEntry={boolean('secureTextEntry', false)}
-        style={css`
-          margin-top: 20px;
-        `}
-        value={text}
-      />
-
-      <EditText
-        direction="column"
-        editable={boolean('editable', true)}
-        label="multiline"
-        multiline={true}
-        onChangeText={(str) => onTextChanged(str)}
-        placeholder="multiline example"
-        secureTextEntry={boolean('secureTextEntry', false)}
-        style={{marginTop: 20}}
-        value={text}
-      />
-
-      <EditText
-        direction="row"
-        editable={boolean('editable', true)}
-        error="This is error message"
-        label="Email"
-        onChangeText={(str) => onTextChanged(str)}
-        placeholder="Error example"
-        secureTextEntry={boolean('secureTextEntry', false)}
-        style={{marginTop: 20}}
-        value={text}
-      />
-
-      <EditText
-        direction="row"
-        editable={false}
-        label="Email"
-        onChangeText={(str) => onTextChanged(str)}
-        placeholder="Disabled example"
-        secureTextEntry={boolean('secureTextEntry', false)}
-        style={{marginTop: 20}}
-        value={text}
-      />
-
-      <EditText
-        editable={boolean('editable', true)}
-        label={renderCustomLabel}
-        onChangeText={(str) => onTextChanged(str)}
-        placeholder="Custom label example"
-        secureTextEntry={boolean('secureTextEntry', false)}
-        style={{marginTop: 20}}
-        value={text}
-      />
-
-      <EditText
-        editable={boolean('editable', true)}
-        error="error text"
-        maxLength={10}
-        onChangeText={(str) => onTextChanged(str)}
-        placeholder="Please write text"
-        secureTextEntry={boolean('secureTextEntry', false)}
-        style={{marginTop: 20, marginBottom: 80}}
-        value={text}
-      />
-    </>
-  );
-}
diff --git a/stories/uis/Fab.stories.tsx b/stories/uis/Fab.stories.tsx
index a9fe8827..953f27e0 100644
--- a/stories/uis/Fab.stories.tsx
+++ b/stories/uis/Fab.stories.tsx
@@ -1,6 +1,6 @@
 import type {ComponentProps} from 'react';
 import {css} from '@emotion/native';
-import {action} from '@storybook/addon-actions/*';
+import {action} from '@storybook/addon-actions';
 import type {Meta, StoryObj} from '@storybook/react';
 
 import {DoobooProvider, Fab} from '../../main';
diff --git a/stories/uis/IconStories/Icon.stories.tsx b/stories/uis/Icon.stories.tsx
similarity index 53%
rename from stories/uis/IconStories/Icon.stories.tsx
rename to stories/uis/Icon.stories.tsx
index 5af0a99e..a9f2dc32 100644
--- a/stories/uis/IconStories/Icon.stories.tsx
+++ b/stories/uis/Icon.stories.tsx
@@ -1,15 +1,30 @@
 import type {ComponentProps} from 'react';
+import {View} from 'react-native';
+import {css} from '@emotion/native';
 import type {Meta, StoryObj} from '@storybook/react';
 
-import type {Icon} from '../../../main';
-import {doobooIconList, DoobooProvider} from '../../../main';
-import {StoryContainer} from '../../GlobalStyles';
-
-import Component from './IconBasicStory';
+import {doobooIconList, DoobooProvider, Icon, Typography} from '../../main';
+import {StoryContainer} from '../GlobalStyles';
 
 const meta = {
   title: 'Icon',
-  component: Component,
+  component: (props) => (
+    <View
+      style={css`
+        align-items: center;
+      `}
+    >
+      <Icon {...props} />
+      <Typography.Body2
+        style={css`
+          font-size: 12px;
+          text-align: center;
+        `}
+      >
+        {props?.name}
+      </Typography.Body2>
+    </View>
+  ),
   argTypes: {
     name: {
       control: 'select',
diff --git a/stories/uis/IconStories/IconBasicStory.tsx b/stories/uis/IconStories/IconBasicStory.tsx
deleted file mode 100644
index 5156f565..00000000
--- a/stories/uis/IconStories/IconBasicStory.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import type {ComponentProps} from 'react';
-import {View} from 'react-native';
-import styled, {css} from '@emotion/native';
-
-import {Icon, Typography} from '../../../main';
-
-const StyledIcon = styled(Icon)`
-  padding: 8px;
-`;
-
-export default function IconBasicStory({
-  name,
-}: ComponentProps<typeof Icon>): JSX.Element {
-  return (
-    <View
-      style={css`
-        align-items: center;
-      `}
-    >
-      <StyledIcon name={name} size={16} />
-      <Typography.Body2
-        style={css`
-          font-size: 12px;
-          text-align: center;
-        `}
-      >
-        {name}
-      </Typography.Body2>
-    </View>
-  );
-}
diff --git a/stories/uis/NetworkImageStories/NetworkImage.stories.tsx b/stories/uis/NetworkImage.stories.tsx
similarity index 63%
rename from stories/uis/NetworkImageStories/NetworkImage.stories.tsx
rename to stories/uis/NetworkImage.stories.tsx
index a9b73eb1..a1f1ed42 100644
--- a/stories/uis/NetworkImageStories/NetworkImage.stories.tsx
+++ b/stories/uis/NetworkImage.stories.tsx
@@ -1,15 +1,23 @@
 import type {ComponentProps} from 'react';
+import {css} from '@emotion/native';
 import type {Meta, StoryObj} from '@storybook/react';
 
-import type {NetworkImage} from '../../../main';
-import {DoobooProvider} from '../../../main';
-import {StoryContainer} from '../../GlobalStyles';
-
-import Component from './NetworkImageBasicStory';
+import {DoobooProvider, NetworkImage} from '../../main';
+import {StoryContainer} from '../GlobalStyles';
 
 const meta = {
   title: 'NetworkImage',
-  component: Component,
+  component: (props) => (
+    <NetworkImage
+      style={css`
+        width: 200px;
+        height: 200px;
+        margin: 20px;
+        align-self: center;
+      `}
+      url={props.url}
+    />
+  ),
   argTypes: {},
   decorators: [
     (Story) => (
diff --git a/stories/uis/NetworkImageStories/NetworkImageBasicStory.tsx b/stories/uis/NetworkImageStories/NetworkImageBasicStory.tsx
deleted file mode 100644
index 052f8ebb..00000000
--- a/stories/uis/NetworkImageStories/NetworkImageBasicStory.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-// Caveat: Expo web needs React to be imported
-import type {ComponentProps} from 'react';
-import React from 'react';
-import {View} from 'react-native';
-import {useTheme} from '@dooboo-ui/theme';
-
-import {NetworkImage, Typography} from '../../../main';
-
-export default function NetworkImageBasicStory({
-  url,
-}: ComponentProps<typeof NetworkImage>): JSX.Element {
-  const {theme} = useTheme();
-
-  return (
-    <>
-      <NetworkImage
-        style={{
-          width: 110,
-          height: 110,
-          margin: 20,
-          alignSelf: 'center',
-        }}
-        url={url}
-      />
-
-      <View style={{width: 300, height: 300, margin: 20}}>
-        <NetworkImage
-          style={{flex: 1, margin: 20, borderRadius: 45}}
-          url="https://reactnative.dev/img/tiny_logo.png"
-        />
-      </View>
-
-      <NetworkImage
-        loadingSource={<Typography.Title>Loading</Typography.Title>}
-        style={{
-          width: 300,
-          height: 300,
-          margin: 20,
-          alignSelf: 'center',
-          borderRadius: 45,
-        }}
-        url="https://reactnative.dev/img/tiny_logo.png"
-      />
-
-      <View style={{marginBottom: 80}}>
-        <NetworkImage
-          style={{
-            backgroundColor: theme.bg.paper,
-            width: 300,
-            height: 300,
-          }}
-          url="wrong link"
-        />
-      </View>
-    </>
-  );
-}
diff --git a/stories/uis/ProgressBarStories/ProgressBar.stories.tsx b/stories/uis/ProgressBar.stories.tsx
similarity index 69%
rename from stories/uis/ProgressBarStories/ProgressBar.stories.tsx
rename to stories/uis/ProgressBar.stories.tsx
index cf15ba30..ecded83f 100644
--- a/stories/uis/ProgressBarStories/ProgressBar.stories.tsx
+++ b/stories/uis/ProgressBar.stories.tsx
@@ -1,15 +1,12 @@
 import type {ComponentProps} from 'react';
 import type {Meta, StoryObj} from '@storybook/react';
 
-import type {ProgressBar} from '../../../main';
-import {DoobooProvider} from '../../../main';
-import {StoryContainer} from '../../GlobalStyles';
-
-import Component from './ProgressBarBasicStory';
+import {DoobooProvider, ProgressBar} from '../../main';
+import {StoryContainer} from '../GlobalStyles';
 
 const meta = {
   title: 'ProgressBar',
-  component: Component,
+  component: (props) => <ProgressBar {...props} />,
   argTypes: {},
   decorators: [
     (Story) => (
diff --git a/stories/uis/ProgressBarStories/ProgressBarBasicStory.tsx b/stories/uis/ProgressBarStories/ProgressBarBasicStory.tsx
deleted file mode 100644
index b2517fc1..00000000
--- a/stories/uis/ProgressBarStories/ProgressBarBasicStory.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import styled from '@emotion/native';
-
-import {ProgressBar} from '../../../main';
-import {StoryTitle} from '../../GlobalStyles';
-
-const Section = styled.View`
-  width: 90%;
-  margin-bottom: 40px;
-`;
-
-const SubTitle = styled.Text`
-  font-size: 14px;
-  text-align: center;
-  margin-top: 10px;
-  margin-bottom: 10px;
-  color: ${({theme}) => theme.role.primary};
-`;
-
-export default function ProgressBarBasicStory(): JSX.Element {
-  return (
-    <>
-      <StoryTitle>Basic</StoryTitle>
-      <Section>
-        <SubTitle>Info</SubTitle>
-        <ProgressBar value={25} />
-      </Section>
-      <Section>
-        <SubTitle>Warning</SubTitle>
-        <ProgressBar type="warning" value={50} />
-      </Section>
-      <Section>
-        <SubTitle>Danger</SubTitle>
-        <ProgressBar type="danger" value={75} />
-      </Section>
-      <Section>
-        <SubTitle>Success</SubTitle>
-        <ProgressBar type="success" value={100} />
-      </Section>
-    </>
-  );
-}
diff --git a/stories/uis/ProgressCircleStories/ProgressCircle.stories.tsx b/stories/uis/ProgressCircle.stories.tsx
similarity index 65%
rename from stories/uis/ProgressCircleStories/ProgressCircle.stories.tsx
rename to stories/uis/ProgressCircle.stories.tsx
index 32ec1d0a..00bbca97 100644
--- a/stories/uis/ProgressCircleStories/ProgressCircle.stories.tsx
+++ b/stories/uis/ProgressCircle.stories.tsx
@@ -1,15 +1,12 @@
 import type {ComponentProps} from 'react';
 import type {Meta, StoryObj} from '@storybook/react';
 
-import type {ProgressCircle} from '../../../main';
-import {DoobooProvider} from '../../../main';
-import {StoryContainer} from '../../GlobalStyles';
-
-import Component from './ProgressCircleBasicStory';
+import {DoobooProvider, ProgressCircle} from '../../main';
+import {StoryContainer} from '../GlobalStyles';
 
 const meta = {
   title: 'ProgressCircle',
-  component: Component,
+  component: (props) => <ProgressCircle {...props} />,
   decorators: [
     (Story) => (
       <DoobooProvider>
@@ -27,6 +24,6 @@ type Story = StoryObj<typeof meta>;
 
 export const Basic: Story = {
   args: {
-    progress: 50,
+    progress: 0.5,
   },
 };
diff --git a/stories/uis/ProgressCircleStories/ProgressCircleBasicStory.tsx b/stories/uis/ProgressCircleStories/ProgressCircleBasicStory.tsx
deleted file mode 100644
index 5c9a39e2..00000000
--- a/stories/uis/ProgressCircleStories/ProgressCircleBasicStory.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import {useEffect, useState} from 'react';
-import {
-  boolean as booleanInput,
-  number,
-  number as numberInput,
-  select as selectInput,
-} from '@storybook/addon-knobs';
-
-import type {ButtonColorType} from '../../../main';
-import {ProgressCircle} from '../../../main';
-
-export default function ProgressCircleBasicStory(): JSX.Element {
-  const progressInput = numberInput('progress', 0);
-  const autoPlay = booleanInput('auto play', true);
-
-  const color = selectInput<ButtonColorType>(
-    'type',
-    ['success', 'info', 'warning', 'danger', 'light', 'secondary'],
-    'info',
-  );
-
-  const baseStrokeWidth = number('baseStrokeWidth', 0.3);
-
-  const [progress, setProgress] = useState(0);
-
-  useEffect(() => {
-    setProgress(progressInput ?? 0);
-
-    if (!autoPlay) {
-      return;
-    }
-
-    let timeout;
-
-    const timeoutCallback = (): void => {
-      setProgress((prevProgress: number): number => {
-        const nextProgress = prevProgress + Math.random() * 0.2;
-
-        timeout = setTimeout(
-          timeoutCallback,
-          nextProgress >= 1 ? 1000 : Math.floor(Math.random() * 300 + 100),
-        );
-
-        if (prevProgress >= 1) {
-          return 0;
-        }
-
-        return nextProgress;
-      });
-    };
-
-    timeout = setTimeout(
-      timeoutCallback,
-      Math.floor(Math.random() * 500 + 100),
-    );
-
-    return () => clearTimeout(timeout);
-  }, [progressInput, autoPlay]);
-
-  return (
-    <ProgressCircle
-      baseStrokeWidth={baseStrokeWidth}
-      color={color}
-      progress={progress}
-    />
-  );
-}
diff --git a/stories/uis/RadioGroupStories/RadioGroup.stories.tsx b/stories/uis/RadioGroup.stories.tsx
similarity index 77%
rename from stories/uis/RadioGroupStories/RadioGroup.stories.tsx
rename to stories/uis/RadioGroup.stories.tsx
index 3a170475..458b79c1 100644
--- a/stories/uis/RadioGroupStories/RadioGroup.stories.tsx
+++ b/stories/uis/RadioGroup.stories.tsx
@@ -1,15 +1,13 @@
 import type {ComponentProps} from 'react';
 import type {Meta, StoryObj} from '@storybook/react';
 
-import type {RadioButtonType, RadioGroup} from '../../../main';
-import {DoobooProvider} from '../../../main';
-import {StoryContainer} from '../../GlobalStyles';
-
-import Component from './RadioGroupBasicStory';
+import type {RadioButtonType} from '../../main';
+import {DoobooProvider, RadioGroup} from '../../main';
+import {StoryContainer} from '../GlobalStyles';
 
 const meta = {
   title: 'RadioGroup',
-  component: Component,
+  component: (props) => <RadioGroup {...props} />,
   argTypes: {
     type: {
       control: 'select',
@@ -42,6 +40,7 @@ type Story = StoryObj<typeof meta>;
 export const Basic: Story = {
   args: {
     data: ['Person', 'Animal', 'Bird', 'Other'],
+    labels: ['Person', 'Animal', 'Bird', 'Other'],
     selectedValue: 'Person',
     title: 'RadioGroup',
     labelPosition: 'left',
diff --git a/stories/uis/RadioGroupStories/RadioGroupBasicStory.tsx b/stories/uis/RadioGroupStories/RadioGroupBasicStory.tsx
deleted file mode 100644
index c1cf15d7..00000000
--- a/stories/uis/RadioGroupStories/RadioGroupBasicStory.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-// Caveat: Expo web needs React to be imported
-import type {ComponentProps} from 'react';
-import React, {useState} from 'react';
-import {View} from 'react-native';
-
-import {RadioGroup} from '../../../main';
-
-export default function RadioButtonBasicStory({
-  type,
-  data = [],
-  title,
-}: ComponentProps<typeof RadioGroup>): JSX.Element {
-  // @ts-ignore
-  const [selectedValue, setSelectedValue] = useState<string>(data?.[0]);
-
-  return (
-    <View style={{flexDirection: 'row', marginTop: 24}}>
-      <RadioGroup
-        data={data}
-        selectValue={(value) => setSelectedValue(value as unknown as string)}
-        selectedValue={selectedValue}
-        title={title}
-        type={type}
-      />
-    </View>
-  );
-}
diff --git a/stories/uis/SwitchToggleStories/SwitchToggle.stories.tsx b/stories/uis/SwitchToggle.stories.tsx
similarity index 69%
rename from stories/uis/SwitchToggleStories/SwitchToggle.stories.tsx
rename to stories/uis/SwitchToggle.stories.tsx
index 34350e27..b492950c 100644
--- a/stories/uis/SwitchToggleStories/SwitchToggle.stories.tsx
+++ b/stories/uis/SwitchToggle.stories.tsx
@@ -1,15 +1,12 @@
 import type {ComponentProps} from 'react';
 import type {Meta, StoryObj} from '@storybook/react';
 
-import type {SwitchToggle} from '../../../main';
-import {DoobooProvider} from '../../../main';
-import {StoryContainer} from '../../GlobalStyles';
-
-import Component from './SwitchToggleBasicStory';
+import {DoobooProvider, SwitchToggle} from '../../main';
+import {StoryContainer} from '../GlobalStyles';
 
 const meta = {
   title: 'SwitchToggle',
-  component: Component,
+  component: (props) => <SwitchToggle {...props} />,
   argTypes: {},
   decorators: [
     (Story) => (
diff --git a/stories/uis/SwitchToggleStories/SwitchToggleBasicStory.tsx b/stories/uis/SwitchToggleStories/SwitchToggleBasicStory.tsx
deleted file mode 100644
index b981836b..00000000
--- a/stories/uis/SwitchToggleStories/SwitchToggleBasicStory.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-// Caveat: Expo web needs React to be imported
-import React, {useState} from 'react';
-import {View} from 'react-native';
-import {useTheme} from '@dooboo-ui/theme';
-import {number} from '@storybook/addon-knobs';
-
-import {SwitchToggle} from '../../../main';
-import {StoryWrapper} from '../../Common';
-import {StoryTitle} from '../../GlobalStyles';
-
-export default function SwitchToggleBasicStory(): JSX.Element {
-  const [on, off] = useState<boolean>(false);
-  const {theme} = useTheme();
-
-  return (
-    <StoryWrapper>
-      <SwitchToggle isOn={on} onPress={() => off(!on)} />
-      <View style={{height: 40}} />
-      <StoryTitle>Custom</StoryTitle>
-      <SwitchToggle
-        duration={number('duration', 500)}
-        isOn={on}
-        onPress={() => off(!on)}
-        styles={{
-          circleColorOff: theme.text.disabled,
-          circleColorOn: theme.text.basic,
-          backgroundColorOn: theme.bg.paper,
-          backgroundColorOff: theme.bg.disabled,
-        }}
-      />
-
-      <View style={{height: 40}} />
-      <StoryTitle>Size</StoryTitle>
-      <SwitchToggle
-        isOn={on}
-        onPress={() => off(!on)}
-        styles={{
-          container: {
-            width: 106,
-            height: 48,
-            borderRadius: 25,
-            padding: 5,
-          },
-          circle: {
-            width: 40,
-            height: 40,
-            borderRadius: 20,
-          },
-        }}
-      />
-    </StoryWrapper>
-  );
-}
diff --git a/stories/uis/Typography.stories.tsx b/stories/uis/Typography.stories.tsx
new file mode 100644
index 00000000..8ca08b6c
--- /dev/null
+++ b/stories/uis/Typography.stories.tsx
@@ -0,0 +1,46 @@
+import type {ComponentProps} from 'react';
+import {View} from 'react-native';
+import {css} from '@emotion/native';
+import type {Meta, StoryObj} from '@storybook/react';
+
+import {DoobooProvider, Typography} from '../../main';
+
+const meta = {
+  title: 'Typography',
+  component: (props) => (
+    <View
+      style={css`
+        padding: 24px;
+
+        gap: 8px;
+      `}
+    >
+      <Typography.Title {...props}>Title</Typography.Title>
+      <Typography.Heading1 {...props}>Heading1</Typography.Heading1>
+      <Typography.Heading2 {...props}>Heading2</Typography.Heading2>
+      <Typography.Heading3 {...props}>Heading3</Typography.Heading3>
+      <Typography.Heading4 {...props}>Heading4</Typography.Heading4>
+      <Typography.Heading5 {...props}>Heading5</Typography.Heading5>
+      <Typography.Body1 {...props}>Body1</Typography.Body1>
+      <Typography.Body2 {...props}>Body2</Typography.Body2>
+      <Typography.Body3 {...props}>Body3</Typography.Body3>
+      <Typography.Body4 {...props}>Body4</Typography.Body4>
+    </View>
+  ),
+  argTypes: {},
+  decorators: [
+    (Story) => (
+      <DoobooProvider>
+        <Story />
+      </DoobooProvider>
+    ),
+  ],
+} satisfies Meta<ComponentProps<typeof Typography.Body1>>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  args: {},
+};
diff --git a/stories/uis/TypographyStories/Typography.stories.tsx b/stories/uis/TypographyStories/Typography.stories.tsx
deleted file mode 100644
index 3e97107e..00000000
--- a/stories/uis/TypographyStories/Typography.stories.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import type {ComponentProps} from 'react';
-import type {Meta, StoryObj} from '@storybook/react';
-
-import type {Typography} from '../../../main';
-import {DoobooProvider} from '../../../main';
-
-import Component from './TypographyBasicStory';
-
-const meta = {
-  title: 'Typography',
-  component: Component,
-  argTypes: {},
-  decorators: [
-    (Story) => (
-      <DoobooProvider>
-        <Story />
-      </DoobooProvider>
-    ),
-  ],
-} satisfies Meta<ComponentProps<typeof Typography.Body1>>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Basic: Story = {
-  args: {},
-};
diff --git a/stories/uis/TypographyStories/TypographyBasicStory.tsx b/stories/uis/TypographyStories/TypographyBasicStory.tsx
deleted file mode 100644
index e33fc9ba..00000000
--- a/stories/uis/TypographyStories/TypographyBasicStory.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import {View} from 'react-native';
-
-import {Typography} from '../../../main';
-import {StoryWrapper} from '../../Common';
-
-export default function TypographyBasicStory(): JSX.Element {
-  return (
-    <StoryWrapper>
-      <Typography.Title>Title</Typography.Title>
-      <View style={{height: 8}} />
-      <Typography.Heading1>Heading1</Typography.Heading1>
-      <View style={{height: 8}} />
-      <Typography.Heading2>Heading2</Typography.Heading2>
-      <View style={{height: 8}} />
-      <Typography.Heading3>Heading3</Typography.Heading3>
-      <View style={{height: 8}} />
-      <Typography.Heading4>Heading4</Typography.Heading4>
-      <View style={{height: 8}} />
-      <Typography.Heading5>Heading5</Typography.Heading5>
-      <View style={{height: 8}} />
-      <Typography.Body1>Body1</Typography.Body1>
-      <View style={{height: 8}} />
-      <Typography.Body2>Body2</Typography.Body2>
-      <View style={{height: 8}} />
-      <Typography.Body3>Body3</Typography.Body3>
-      <View style={{height: 8}} />
-      <Typography.Body4>Body4</Typography.Body4>
-    </StoryWrapper>
-  );
-}