diff --git a/stories/GlobalStyles.ts b/stories/GlobalStyles.ts
index 2564369b..8f1e4374 100644
--- a/stories/GlobalStyles.ts
+++ b/stories/GlobalStyles.ts
@@ -13,7 +13,7 @@ export const ScrollContainer = styled.ScrollView`
 `;
 
 export const StoryTitle = styled.Text`
-  margin: 8px 0;
+  margin: 8px 0 24px;
   font-size: 18px;
   font-family: Pretendard-Bold;
   color: ${({theme}) => theme.text.basic};
diff --git a/stories/uis/AccordionStories/AccordionBasicStory.tsx b/stories/uis/AccordionStories/AccordionBasicStory.tsx
index 9fbcd98a..f4836728 100644
--- a/stories/uis/AccordionStories/AccordionBasicStory.tsx
+++ b/stories/uis/AccordionStories/AccordionBasicStory.tsx
@@ -10,12 +10,12 @@ const ScrollContainer = styled.ScrollView`
 
 function AccordionBasic(props: ComponentProps<typeof Accordion>): JSX.Element {
   return (
-    <ScrollContainer>
-      <StoryContainer>
-        <StoryTitle style={{fontSize: 18, marginBottom: 8}}>Basic</StoryTitle>
+    <StoryContainer>
+      <StoryTitle>Basic</StoryTitle>
+      <ScrollContainer>
         <Accordion {...props} />
-      </StoryContainer>
-    </ScrollContainer>
+      </ScrollContainer>
+    </StoryContainer>
   );
 }
 
diff --git a/stories/uis/AccordionStories/AccordionCustomStory.tsx b/stories/uis/AccordionStories/AccordionCustomStory.tsx
index 0d87adf8..43ffc3d1 100644
--- a/stories/uis/AccordionStories/AccordionCustomStory.tsx
+++ b/stories/uis/AccordionStories/AccordionCustomStory.tsx
@@ -23,11 +23,11 @@ function AccordionCustom(props): JSX.Element {
   const {theme} = useDooboo();
 
   return (
-    <ScrollContainer>
-      <StoryContainer>
-        <StoryTitle style={{fontSize: 18, marginBottom: 8}}>
-          Custom Style
-        </StoryTitle>
+    <StoryContainer>
+      <StoryTitle style={{fontSize: 18, marginBottom: 8}}>
+        Custom Style
+      </StoryTitle>
+      <ScrollContainer>
         <Accordion<AccordionTitle, AccordionItem>
           onPressItem={action('onPressItem')}
           renderItem={({text}) => {
@@ -111,8 +111,8 @@ function AccordionCustom(props): JSX.Element {
           toggleElementPosition="left"
           {...props}
         />
-      </StoryContainer>
-    </ScrollContainer>
+      </ScrollContainer>
+    </StoryContainer>
   );
 }
 
diff --git a/stories/uis/ButtonGroupStories/ButtonGroupBasicStory.tsx b/stories/uis/ButtonGroupStories/ButtonGroupBasicStory.tsx
index 42204c4a..de472619 100644
--- a/stories/uis/ButtonGroupStories/ButtonGroupBasicStory.tsx
+++ b/stories/uis/ButtonGroupStories/ButtonGroupBasicStory.tsx
@@ -8,12 +8,12 @@ function ButtonGroupBasic(
   props: ComponentProps<typeof ButtonGroup>,
 ): JSX.Element {
   return (
-    <ScrollView contentContainerStyle={{flexDirection: 'column'}}>
-      <StoryContainer>
-        <StoryTitle style={{fontSize: 18, marginBottom: 8}}>Basic</StoryTitle>
+    <StoryContainer>
+      <StoryTitle>Basic</StoryTitle>
+      <ScrollView contentContainerStyle={{flexDirection: 'column'}}>
         <ButtonGroup {...props} />
-      </StoryContainer>
-    </ScrollView>
+      </ScrollView>
+    </StoryContainer>
   );
 }
 
diff --git a/stories/uis/CheckboxStories/CheckboxBasicStory.tsx b/stories/uis/CheckboxStories/CheckboxBasicStory.tsx
index 75e37b1b..1a9661b0 100644
--- a/stories/uis/CheckboxStories/CheckboxBasicStory.tsx
+++ b/stories/uis/CheckboxStories/CheckboxBasicStory.tsx
@@ -66,17 +66,17 @@ function CheckboxBasicStory(): JSX.Element {
   const [checked, setChecked] = useState<boolean>(false);
 
   return (
-    <ScrollContainer
-      contentContainerStyle={{
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}
-    >
-      <StoryContainer>
-        <StoryTitle>Basic</StoryTitle>
+    <StoryContainer>
+      <StoryTitle>Basic</StoryTitle>
+      <ScrollContainer
+        contentContainerStyle={{
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
         <Checkboxes checked={checked} setChecked={setChecked} />
-      </StoryContainer>
-    </ScrollContainer>
+      </ScrollContainer>
+    </StoryContainer>
   );
 }
 
diff --git a/stories/uis/EditTextStories/EditTextBasicStory.tsx b/stories/uis/EditTextStories/EditTextBasicStory.tsx
index 356f4c64..bd7b6075 100644
--- a/stories/uis/EditTextStories/EditTextBasicStory.tsx
+++ b/stories/uis/EditTextStories/EditTextBasicStory.tsx
@@ -31,15 +31,15 @@ function EditTextBasicStory(): JSX.Element {
   };
 
   return (
-    <ScrollContainer
-      contentContainerStyle={{
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}
-      scrollIndicatorInsets={{right: 0}}
-    >
-      <StoryContainer>
-        <Typography.Heading1>EditText</Typography.Heading1>
+    <StoryContainer>
+      <Typography.Heading1>EditText</Typography.Heading1>
+      <ScrollContainer
+        contentContainerStyle={{
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+        scrollIndicatorInsets={{right: 0}}
+      >
         <EditText
           editable={boolean('editable', true)}
           onChangeText={(str) => onTextChanged(str)}
@@ -229,8 +229,8 @@ function EditTextBasicStory(): JSX.Element {
           style={{marginTop: 20, marginBottom: 80}}
           value={text}
         />
-      </StoryContainer>
-    </ScrollContainer>
+      </ScrollContainer>
+    </StoryContainer>
   );
 }
 
diff --git a/stories/uis/RadioGroupStories/RadioGroupBasicStory.tsx b/stories/uis/RadioGroupStories/RadioGroupBasicStory.tsx
index 74742090..afe9c97c 100644
--- a/stories/uis/RadioGroupStories/RadioGroupBasicStory.tsx
+++ b/stories/uis/RadioGroupStories/RadioGroupBasicStory.tsx
@@ -15,8 +15,8 @@ function RadioButtonBasicStory({
   const [selectedValue, setSelectedValue] = useState<string>(data?.[0]);
 
   return (
-    <ScrollContainer>
-      <StoryContainer>
+    <StoryContainer>
+      <ScrollContainer>
         <View style={{flexDirection: 'row', marginTop: 24}}>
           <RadioGroup
             data={data}
@@ -28,8 +28,8 @@ function RadioButtonBasicStory({
             type={type}
           />
         </View>
-      </StoryContainer>
-    </ScrollContainer>
+      </ScrollContainer>
+    </StoryContainer>
   );
 }
 
diff --git a/stories/uis/SwitchToggleStories/SwitchToggleBasicStory.tsx b/stories/uis/SwitchToggleStories/SwitchToggleBasicStory.tsx
index 22c867d3..ce4ce004 100644
--- a/stories/uis/SwitchToggleStories/SwitchToggleBasicStory.tsx
+++ b/stories/uis/SwitchToggleStories/SwitchToggleBasicStory.tsx
@@ -12,9 +12,9 @@ function SwitchToggleBasicStory(): JSX.Element {
   const {theme} = useTheme();
 
   return (
-    <ScrollContainer>
-      <StoryContainer>
-        <StoryTitle>Basic</StoryTitle>
+    <StoryContainer>
+      <StoryTitle>Basic</StoryTitle>
+      <ScrollContainer>
         <SwitchToggle isOn={on} onPress={() => off(!on)} />
 
         <View style={{height: 40}} />
@@ -50,8 +50,8 @@ function SwitchToggleBasicStory(): JSX.Element {
             },
           }}
         />
-      </StoryContainer>
-    </ScrollContainer>
+      </ScrollContainer>
+    </StoryContainer>
   );
 }
 
diff --git a/stories/uis/TypographyStories/TypographyBasicStory.tsx b/stories/uis/TypographyStories/TypographyBasicStory.tsx
index 52ad8c21..88d177b3 100644
--- a/stories/uis/TypographyStories/TypographyBasicStory.tsx
+++ b/stories/uis/TypographyStories/TypographyBasicStory.tsx
@@ -7,9 +7,9 @@ import {ScrollContainer, StoryContainer} from '../../GlobalStyles';
 
 function TypographyBasicStory(): JSX.Element {
   return (
-    <ScrollContainer>
-      <StoryContainer>
-        <Typography.Title>Title</Typography.Title>
+    <StoryContainer>
+      <Typography.Title>Title</Typography.Title>
+      <ScrollContainer>
         <View style={{height: 8}} />
         <Typography.Heading1>Heading1</Typography.Heading1>
         <View style={{height: 8}} />
@@ -28,8 +28,8 @@ function TypographyBasicStory(): JSX.Element {
         <Typography.Body3>Body3</Typography.Body3>
         <View style={{height: 8}} />
         <Typography.Body4>Body4</Typography.Body4>
-      </StoryContainer>
-    </ScrollContainer>
+      </ScrollContainer>
+    </StoryContainer>
   );
 }