diff --git a/src/components/Recipe/CommentItem/CommentItem.stories.tsx b/src/components/Recipe/CommentItem/CommentItem.stories.tsx
new file mode 100644
index 00000000..70bf1f9a
--- /dev/null
+++ b/src/components/Recipe/CommentItem/CommentItem.stories.tsx
@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import CommentItem from './CommentItem';
+
+import comments from '@/mocks/data/comments.json';
+
+const meta: Meta<typeof CommentItem> = {
+  title: 'recipe/CommentItem',
+  component: CommentItem,
+  args: {
+    recipeComment: comments.comments[0],
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
diff --git a/src/components/Recipe/CommentList/CommentList.stories.tsx b/src/components/Recipe/CommentList/CommentList.stories.tsx
new file mode 100644
index 00000000..2f62a5d4
--- /dev/null
+++ b/src/components/Recipe/CommentList/CommentList.stories.tsx
@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import CommentList from './CommentList';
+
+const meta: Meta<typeof CommentList> = {
+  title: 'recipe/CommentList',
+  component: CommentList,
+  args: {
+    recipeId: 1,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};