diff --git a/src/components/HomePage/BottomSheet/BottomSheetContent.stories.tsx b/src/components/HomePage/BottomSheet/BottomSheetContent.stories.tsx
new file mode 100644
index 00000000..5642a4a9
--- /dev/null
+++ b/src/components/HomePage/BottomSheet/BottomSheetContent.stories.tsx
@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { BottomSheetContent } from './BottomSheetContent';
+
+const meta: Meta<typeof BottomSheetContent> = {
+    component: BottomSheetContent,
+    title: 'organisms/BottomSheetContent',
+    tags: ['autodocs'],
+    argTypes: {}
+};
+export default meta;
+
+type Story = StoryObj<typeof BottomSheetContent>;
+
+export const Default: Story = {
+    args: {
+        nickname: '홍길동123'
+    }
+};
diff --git a/src/components/HomePage/BottomSheet/BottomSheetContent.tsx b/src/components/HomePage/BottomSheet/BottomSheetContent.tsx
new file mode 100644
index 00000000..6ee56798
--- /dev/null
+++ b/src/components/HomePage/BottomSheet/BottomSheetContent.tsx
@@ -0,0 +1,116 @@
+import { useHomeSheetStore, useSelectedKeywordStore } from '@/stores/index';
+import { Margin } from '@/components/Common/Margin/Margin';
+import { KeywordContainer } from './KeywordContainer';
+
+type BottomSheetContentProps = {
+    nickname: string;
+};
+
+export const BottomSheetContent = ({ nickname }: BottomSheetContentProps) => {
+    const { setOpen } = useHomeSheetStore();
+    const { selectedKeywords } = useSelectedKeywordStore();
+
+    const categories = [
+        {
+            category: '나를 나타내는',
+            keywords: [
+                '일에 치인',
+                '쉬고싶은',
+                '배고픈',
+                '꿈꾸는',
+                '행복한',
+                '그리워하는',
+                '수다스러운',
+                '현실적인',
+                '행운의',
+                '반짝반짝한',
+                '술을 좋아하는',
+                '음악 없이 못사는',
+                '위로받고 싶은'
+            ]
+        },
+        {
+            category: '시간과 공간',
+            keywords: [
+                '입김이 나오는 날',
+                '파란 하늘을 보며',
+                '벚꽃 흩날림',
+                '크리스마스',
+                '첫눈',
+                '별빛 아래',
+                '비 오는 날',
+                '밤 산책 하며',
+                '도로 위 막히는 차 안에서'
+            ]
+        },
+        {
+            category: '일상',
+            keywords: ['추억', '여행', '이별', '운동', '꿈']
+        },
+        {
+            category: '누구에게',
+            keywords: [
+                '친구에게',
+                '연인에게',
+                '나에게',
+                '소중한 사람에게',
+                '가족에게',
+                '최애에게'
+            ]
+        }
+    ];
+
+    return (
+        <div className="flex flex-col gap-5 p-5">
+            {/* 그라데이션 */}
+            <div className="absolute bottom-[76px] left-0 w-full h-[120px] bg-gradient-to-t from-white to-transparent pointer-events-none"></div>
+
+            <div>
+                <p className="text-title3 text-sample-black">
+                    {nickname}님이 선택하신{' '}
+                    <span className="text-sample-blue">키워드</span>
+                    입니다.
+                </p>
+                <p className="text-body2 text-sample-textgray">
+                    설정하신 키워드로 편지를 추천해드릴게요.
+                </p>
+                <KeywordContainer keywords={selectedKeywords} />
+            </div>
+
+            <div>
+                <p className="text-title3 text-sample-black">
+                    누구와 마음을 나누고 싶나요?
+                </p>
+
+                <p className="text-body2 text-sample-textgray">
+                    설정하신 키워드로 편지를 추천해드릴게요.
+                </p>
+
+                {categories.map((category, index) => {
+                    return (
+                        <div key={index}>
+                            <Margin top={20} />
+
+                            <p className="text-body2 text-sample-blue">
+                                {category.category}
+                            </p>
+
+                            <KeywordContainer keywords={category.keywords} />
+                        </div>
+                    );
+                })}
+            </div>
+
+            <button
+                onClick={() => {
+                    setOpen(false);
+                }}
+                className="fixed left-[20px] right-[20px] bottom-[90px] h-[49px] text-white flex-center rounded-full bg-sample-blue"
+            >
+                완료
+            </button>
+
+            <Margin bottom={150} />
+        </div>
+    );
+};
diff --git a/src/components/HomePage/BottomSheet/KeywordContainer.tsx b/src/components/HomePage/BottomSheet/KeywordContainer.tsx
new file mode 100644
index 00000000..9aa11670
--- /dev/null
+++ b/src/components/HomePage/BottomSheet/KeywordContainer.tsx
@@ -0,0 +1,41 @@
+import { KeywordToggleButton } from '@/components/Common/KeywordToggleButton/KeywordToggleButton';
+import { useSelectedKeywordStore } from '@/stores/index';
+
+type KeywordContainerProps = {
+    keywords: Array<string>;
+};
+
+export const KeywordContainer = ({ keywords }: KeywordContainerProps) => {
+    const { selectedKeywords, setSelectedKeywords } = useSelectedKeywordStore();
+
+    const toggleKeywordButton = (keyword: string) => {
+        if (selectedKeywords.includes(keyword)) {
+            const keywords = [...selectedKeywords].filter(
+                (item) => item !== keyword
+            );
+
+            setSelectedKeywords(keywords);
+        } else {
+            const keywords = [...selectedKeywords, keyword];
+
+            setSelectedKeywords(keywords);
+        }
+    };
+
+    return (
+        <div className="mt-3 flex flex-wrap gap-2">
+            {keywords.map((keyword, i) => {
+                return (
+                    <KeywordToggleButton
+                        key={i}
+                        keyword={keyword}
+                        isActive={selectedKeywords.includes(keyword)}
+                        onClick={() => {
+                            toggleKeywordButton(keyword);
+                        }}
+                    ></KeywordToggleButton>
+                );
+            })}
+        </div>
+    );
+};
diff --git a/src/components/HomePage/BottomSheetContent/BottomSheetContent.tsx b/src/components/HomePage/BottomSheetContent/BottomSheetContent.tsx
deleted file mode 100644
index fe279f65..00000000
--- a/src/components/HomePage/BottomSheetContent/BottomSheetContent.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import { useHomeSheetStore, useSelectedKeywordStore } from '@/stores/index';
-import { KeywordToggleButton } from '@/components/Common/KeywordToggleButton/KeywordToggleButton';
-import { Margin } from '@/components/Common/Margin/Margin';
-
-type BottomSheetContentProps = {
-    nickname: string;
-};
-
-export const BottomSheetContent = ({ nickname }: BottomSheetContentProps) => {
-    const { setOpen } = useHomeSheetStore();
-    const { selectedKeywords, setSelectedKeywords } = useSelectedKeywordStore();
-
-    const allKeywords = [
-        '키워드1',
-        '키워드2',
-        '키워드3',
-        '키워드4',
-        '키워드5',
-        '키워드6',
-        '키워드7',
-        '키워드8',
-        '키워드9',
-        '키워드10',
-        '키워드11',
-        '키워드12',
-        '키워드13',
-        '키워드14'
-    ];
-
-    const toggleKeywordButton = (keyword: string) => {
-        if (selectedKeywords.includes(keyword)) {
-            const keywords = [...selectedKeywords].filter(
-                (item) => item !== keyword
-            );
-
-            setSelectedKeywords(keywords);
-        } else {
-            const keywords = [...selectedKeywords, keyword];
-
-            setSelectedKeywords(keywords);
-        }
-    };
-
-    return (
-        <div className="flex flex-col gap-5 p-5">
-            <div>
-                <p className="text-title3 text-sample-black">
-                    {nickname}님이 선택하신{' '}
-                    <span className="text-sample-blue">키워드</span>
-                    입니다.
-                </p>
-                <p className="text-body2 text-sample-textgray">
-                    설정하신 키워드로 편지를 추천해드릴게요.
-                </p>
-                <div className="mt-3 flex flex-wrap gap-1">
-                    {selectedKeywords.map((keyword, i) => {
-                        return (
-                            <KeywordToggleButton
-                                key={i}
-                                keyword={keyword}
-                                isActive
-                                onClick={() => {
-                                    toggleKeywordButton(keyword);
-                                }}
-                            ></KeywordToggleButton>
-                        );
-                    })}
-                </div>
-            </div>
-
-            <Margin top={10} />
-
-            <div>
-                <p className="text-title3 text-sample-black">
-                    누구와 마음을 나누고 싶나요?
-                </p>
-                <p className="text-body2 text-sample-textgray">
-                    설정하신 키워드로 편지를 추천해드릴게요.
-                </p>
-                <div className="mt-3 flex flex-wrap gap-1">
-                    {allKeywords.map((keyword, i) => {
-                        return (
-                            <KeywordToggleButton
-                                key={i}
-                                keyword={keyword}
-                                isActive={selectedKeywords.includes(keyword)}
-                                onClick={() => {
-                                    toggleKeywordButton(keyword);
-                                }}
-                            ></KeywordToggleButton>
-                        );
-                    })}
-                </div>
-            </div>
-            <button
-                onClick={() => {
-                    setOpen(false);
-                }}
-                className="w-full h-[49px] text-white flex-center rounded-full bg-[#22B8EF]"
-            >
-                완료
-            </button>
-        </div>
-    );
-};
diff --git a/src/pages/Home/HomePage.tsx b/src/pages/Home/HomePage.tsx
index 37661010..ec31386c 100644
--- a/src/pages/Home/HomePage.tsx
+++ b/src/pages/Home/HomePage.tsx
@@ -1,7 +1,7 @@
 import { BannerContainer } from '@/components/Common/BannerContainer/BannerContainer';
 import { SliderMenuContainer } from '@/components/Common/SliderMenuContainer/SliderMenuContainer';
 import { Toggle } from '@/components/Common/Toggle/Toggle';
-import { BottomSheetContent } from '@/components/HomePage/BottomSheetContent/BottomSheetContent';
+import { BottomSheetContent } from '@/components/HomePage/BottomSheet/BottomSheetContent';
 import { LetterContainer } from '@/components/HomePage/LetterContainer/LetterContainer';
 import { TopButtonContainer } from '@/components/HomePage/TopButtonContainer/TopButtonContainer';
 import { WelcomeMessageContainer } from '@/components/HomePage/WelcomeMessageContainer/WelcomeMessageContainer';