diff --git a/view/next-project/src/components/sponsorstyles/DeleteModal.tsx b/view/next-project/src/components/sponsorstyles/DeleteModal.tsx
index 74e8f3ad8..ea31bf875 100644
--- a/view/next-project/src/components/sponsorstyles/DeleteModal.tsx
+++ b/view/next-project/src/components/sponsorstyles/DeleteModal.tsx
@@ -1,6 +1,5 @@
 import { useRouter } from 'next/router';
 import React, { Dispatch, FC, SetStateAction } from 'react';
-
 import { del } from '@api/api_methods';
 import { Modal, CloseButton, OutlinePrimaryButton, PrimaryButton } from '@components/common';
 
diff --git a/view/next-project/src/components/sponsorstyles/OpenDeleteModalButton.tsx b/view/next-project/src/components/sponsorstyles/OpenDeleteModalButton.tsx
index 0692d269e..c39d4198e 100644
--- a/view/next-project/src/components/sponsorstyles/OpenDeleteModalButton.tsx
+++ b/view/next-project/src/components/sponsorstyles/OpenDeleteModalButton.tsx
@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import DeleteModal from './DeleteModal';
 import { DeleteButton } from '@components/common';
 
-interface Props {
+export interface Props {
   children?: React.ReactNode;
   id: number;
 }
diff --git a/view/next-project/src/components/sponsorstyles/OpenEditModalButton.tsx b/view/next-project/src/components/sponsorstyles/OpenEditModalButton.tsx
index bf8919db7..3deddfaa9 100644
--- a/view/next-project/src/components/sponsorstyles/OpenEditModalButton.tsx
+++ b/view/next-project/src/components/sponsorstyles/OpenEditModalButton.tsx
@@ -5,7 +5,7 @@ import { EditButton } from '@components/common';
 import EditModal from '@components/sponsorstyles/EditModal';
 import { SponsorStyle } from '@type/common';
 
-interface Props {
+export interface Props {
   children?: React.ReactNode;
   id: number;
   sponsorStyle: SponsorStyle;
diff --git a/view/next-project/src/components/sponsorstyles/index.ts b/view/next-project/src/components/sponsorstyles/index.ts
new file mode 100644
index 000000000..c00d4221a
--- /dev/null
+++ b/view/next-project/src/components/sponsorstyles/index.ts
@@ -0,0 +1,6 @@
+export { default as DeleteModal } from './DeleteModal';
+export { default as EditModal } from './EditModal';
+export { default as OpenAddModalButton } from './OpenAddModalButton';
+export { default as OpenDeleteModalButton } from './OpenDeleteModalButton';
+export { default as OpenEditModalButton } from './OpenEditModalButton';
+export { default as SponsorStyleAddModal } from './SponsorStyleAddModal';
diff --git a/view/next-project/src/stories/sponsorstyles/DeleteModal.stories.tsx b/view/next-project/src/stories/sponsorstyles/DeleteModal.stories.tsx
new file mode 100644
index 000000000..e16e11b09
--- /dev/null
+++ b/view/next-project/src/stories/sponsorstyles/DeleteModal.stories.tsx
@@ -0,0 +1,18 @@
+import { Meta } from '@storybook/react';
+import { DeleteModal } from '@components/sponsorstyles';
+
+const meta: Meta<typeof DeleteModal> = {
+  title: 'FinanSu/sponsorstyles/DeleteModal',
+  component: DeleteModal,
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+export default meta;
+
+export const Primary = {
+  args: {
+    className: 'm-10',
+    children: <h1>children</h1>,
+  },
+};
diff --git a/view/next-project/src/stories/sponsorstyles/EditModal.stories.tsx b/view/next-project/src/stories/sponsorstyles/EditModal.stories.tsx
new file mode 100644
index 000000000..fb7299f4e
--- /dev/null
+++ b/view/next-project/src/stories/sponsorstyles/EditModal.stories.tsx
@@ -0,0 +1,31 @@
+import { Meta, StoryFn } from '@storybook/react';
+import React, { useState } from 'react';
+import EditModal from '@components/sponsorstyles/EditModal';
+import { SponsorStyle } from '@type/common'; // SponsorStyle 型のインポートを確認してください
+
+const meta: Meta<typeof EditModal> = {
+  title: 'FinanSu/sponsorstyles/EditModal',
+  component: EditModal,
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+export default meta;
+
+const Template: StoryFn<typeof EditModal> = (args) => {
+  const [isOpen, setIsOpen] = useState(true);
+  return <EditModal {...args} setIsOpen={setIsOpen} />;
+};
+
+const sampleSponsorStyle: SponsorStyle = {
+  id: 1,
+  style: 'Premium',
+  feature: 'Featured on homepage',
+  price: 20000,
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+  sponsorStyleId: 123,
+  sponsorStyle: sampleSponsorStyle,
+};
diff --git a/view/next-project/src/stories/sponsorstyles/OpenAddModalButton.stories.tsx b/view/next-project/src/stories/sponsorstyles/OpenAddModalButton.stories.tsx
new file mode 100644
index 000000000..ccdf0feb7
--- /dev/null
+++ b/view/next-project/src/stories/sponsorstyles/OpenAddModalButton.stories.tsx
@@ -0,0 +1,18 @@
+import { Meta } from '@storybook/react';
+import { OpenAddModalButton } from '@components/sponsorstyles';
+
+const meta: Meta<typeof OpenAddModalButton> = {
+  title: 'FinanSu/sponsorstyles/OpenAddModalButton',
+  component: OpenAddModalButton,
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+export default meta;
+
+export const Primary = {
+  args: {
+    className: 'm-10',
+    children: <h1>children</h1>,
+  },
+};
diff --git a/view/next-project/src/stories/sponsorstyles/OpenDeleteModalButton.stories.tsx b/view/next-project/src/stories/sponsorstyles/OpenDeleteModalButton.stories.tsx
new file mode 100644
index 000000000..353e12c45
--- /dev/null
+++ b/view/next-project/src/stories/sponsorstyles/OpenDeleteModalButton.stories.tsx
@@ -0,0 +1,21 @@
+import { Meta, StoryFn } from '@storybook/react';
+import { OpenDeleteModalButton } from '@components/sponsorstyles';
+import { Props } from '@components/sponsorstyles/OpenDeleteModalButton';
+
+const meta: Meta<typeof OpenDeleteModalButton> = {
+  title: 'FinanSu/sponsorstyles/OpenDeleteModalButton',
+  component: OpenDeleteModalButton,
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+export default meta;
+
+const Template: StoryFn<Props> = (args) => <OpenDeleteModalButton {...args} />;
+
+export const Primary = {
+  args: {
+    className: 'm-10',
+    children: <h1>children</h1>,
+  },
+};
diff --git a/view/next-project/src/stories/sponsorstyles/OpenEditModalButton.stories.tsx b/view/next-project/src/stories/sponsorstyles/OpenEditModalButton.stories.tsx
new file mode 100644
index 000000000..7a5ba8168
--- /dev/null
+++ b/view/next-project/src/stories/sponsorstyles/OpenEditModalButton.stories.tsx
@@ -0,0 +1,31 @@
+import { Meta, StoryFn } from '@storybook/react';
+import { OpenEditModalButton } from '@components/sponsorstyles';
+import { Props } from '@components/sponsorstyles/OpenEditModalButton';
+import { SponsorStyle } from '@type/common';
+
+// メタデータ定義
+const meta: Meta<typeof OpenEditModalButton> = {
+  title: 'FinanSu/sponsorstyles/OpenEditModalButton',
+  component: OpenEditModalButton,
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+export default meta;
+
+// 仮のSponsorStyleデータ
+const sampleSponsorStyle: SponsorStyle = {
+  id: 1,
+  style: 'Sample Style',
+  feature: 'Sample Feature',
+  price: 1000,
+};
+
+const Template: StoryFn<Props> = (args) => <OpenEditModalButton {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+  id: 1,
+  sponsorStyle: sampleSponsorStyle,
+  children: <h1>Sample Child</h1>,
+};
diff --git a/view/next-project/src/stories/sponsorstyles/SponsorStyleAddModal.stories.tsx b/view/next-project/src/stories/sponsorstyles/SponsorStyleAddModal.stories.tsx
new file mode 100644
index 000000000..7b108b647
--- /dev/null
+++ b/view/next-project/src/stories/sponsorstyles/SponsorStyleAddModal.stories.tsx
@@ -0,0 +1,17 @@
+import { Meta, StoryFn } from '@storybook/react';
+import React from 'react';
+import { SponsorStyleAddModal } from '@components/sponsorstyles';
+
+const meta: Meta = {
+  title: 'FinanSu/sponsorstyles/SponsorStyleAddModal',
+  component: SponsorStyleAddModal,
+  argTypes: {},
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+const Template: StoryFn<typeof SponsorStyleAddModal> = (args) => <SponsorStyleAddModal {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {};