diff --git a/components/RadialProgressBar/RadialProgressBar.stories.tsx b/components/RadialProgressBar/RadialProgressBar.stories.tsx
index 3631ddb..efe5ed6 100644
--- a/components/RadialProgressBar/RadialProgressBar.stories.tsx
+++ b/components/RadialProgressBar/RadialProgressBar.stories.tsx
@@ -38,7 +38,7 @@ export const Full: Story = {
   },
 };
 
-export const Empy: Story = {
+export const Empty: Story = {
   args: {
     fillPercentage: 0,
   },
diff --git a/components/Spinner/Spinner.stories.tsx b/components/Spinner/Spinner.stories.tsx
new file mode 100644
index 0000000..6ce262d
--- /dev/null
+++ b/components/Spinner/Spinner.stories.tsx
@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Spinner from './Spinner';
+
+const meta: Meta<typeof Spinner> = {
+  title: 'Components/Spinner',
+  component: Spinner,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Spinner>;
+
+export const Default: Story = {
+  args: {},
+};
diff --git a/components/Spinner/Spinner.tsx b/components/Spinner/Spinner.tsx
new file mode 100644
index 0000000..bd00b8a
--- /dev/null
+++ b/components/Spinner/Spinner.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+type SpinnerProps = {};
+
+const Spinner = (props: SpinnerProps) => {
+  return (
+    <div
+      className={cn(
+        'h-16 w-16',
+        'border-[6px] border-solid border-gray-200 border-t-blue-400  rounded-full',
+        'animate-spin'
+      )}
+    />
+  );
+};
+
+export default Spinner;
diff --git a/components/Spinner/index.tsx b/components/Spinner/index.tsx
new file mode 100644
index 0000000..e69de29