diff --git a/view/next-project/src/stories/teacher/OpenAddModalButton.stories.tsx b/view/next-project/src/stories/teacher/OpenAddModalButton.stories.tsx
new file mode 100644
index 000000000..2f4d63de7
--- /dev/null
+++ b/view/next-project/src/stories/teacher/OpenAddModalButton.stories.tsx
@@ -0,0 +1,18 @@
+import { Meta } from '@storybook/react';
+import { OpenAddModalButton } from '@components/teacher';
+
+const meta: Meta<typeof OpenAddModalButton> = {
+  title: 'FinanSu/teacher/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/teacher/OpenDeleteModalButton.stories.tsx b/view/next-project/src/stories/teacher/OpenDeleteModalButton.stories.tsx
new file mode 100644
index 000000000..182be8ce1
--- /dev/null
+++ b/view/next-project/src/stories/teacher/OpenDeleteModalButton.stories.tsx
@@ -0,0 +1,18 @@
+import { Meta } from '@storybook/react';
+import { OpenDeleteModalButton } from '@components/teacher';
+
+const meta: Meta<typeof OpenDeleteModalButton> = {
+  title: 'FinanSu/teacher/OpenDeleteModalButton',
+  component: OpenDeleteModalButton,
+  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/teacher/OpenEditModalButton.stories.tsx b/view/next-project/src/stories/teacher/OpenEditModalButton.stories.tsx
new file mode 100644
index 000000000..27d3e831d
--- /dev/null
+++ b/view/next-project/src/stories/teacher/OpenEditModalButton.stories.tsx
@@ -0,0 +1,18 @@
+import { Meta } from '@storybook/react';
+import { OpenEditModalButton } from '@components/teacher';
+
+const meta: Meta<typeof OpenEditModalButton> = {
+  title: 'FinanSu/teacher/OpenEditModalButton',
+  component: OpenEditModalButton,
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+export default meta;
+
+export const Primary = {
+  args: {
+    className: 'm-10',
+    children: <h1>children</h1>,
+  },
+};