diff --git a/components/DividerWithText/DividerWithText.stories.tsx b/components/DividerWithText/DividerWithText.stories.tsx
new file mode 100644
index 0000000..71f3456
--- /dev/null
+++ b/components/DividerWithText/DividerWithText.stories.tsx
@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import DividerWithText from './DividerWithText';
+
+const meta: Meta<typeof DividerWithText> = {
+  title: 'Components/DividerWithText',
+  component: DividerWithText,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  decorators: [
+    Story => (
+      <div
+        style={{
+          width: '500px',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof DividerWithText>;
+
+export const Default: Story = {
+  args: {
+    text: 'Divider Text',
+  },
+};
diff --git a/components/DividerWithText/DividerWithText.tsx b/components/DividerWithText/DividerWithText.tsx
new file mode 100644
index 0000000..e182d6b
--- /dev/null
+++ b/components/DividerWithText/DividerWithText.tsx
@@ -0,0 +1,23 @@
+import { cn } from '@/lib/utils';
+import React from 'react';
+
+interface DividerProps extends React.ComponentPropsWithoutRef<'div'> {
+  /**
+   * text content of bet the divider
+   */
+  text: string;
+}
+
+const dividerClass = cn(
+  'mx-auto  flex w-full items-center justify-evenly ',
+  'before:mr-4 before:block before:h-px before:flex-grow before:bg-gray-400 ',
+  'after:ml-4 after:block after:h-px after:flex-grow after:bg-gray-400 '
+);
+
+const DividerWithText = (props: DividerProps) => {
+  const { text } = props;
+
+  return <div className={dividerClass}>{text}</div>;
+};
+
+export default DividerWithText;
diff --git a/components/DividerWithText/index.ts b/components/DividerWithText/index.ts
new file mode 100644
index 0000000..6365a74
--- /dev/null
+++ b/components/DividerWithText/index.ts
@@ -0,0 +1 @@
+export { default } from './DividerWithText';