diff --git a/src/Spinner.js b/src/Spinner.js
deleted file mode 100644
index b3da8ea..0000000
--- a/src/Spinner.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { mapToCssModules, tagPropType } from './utils';
-
-const propTypes = {
-  /** Set a custom element for this component */
-  tag: tagPropType,
-  /** Change animation of spinner */
-  type: PropTypes.oneOf(['border', 'grow']),
-  /** Change size of spinner */
-  size: PropTypes.oneOf(['sm']),
-  /** Change color of spinner */
-  color: PropTypes.oneOf([
-    'primary',
-    'secondary',
-    'success',
-    'danger',
-    'warning',
-    'info',
-    'light',
-    'dark',
-  ]),
-  /** Add custom class */
-  className: PropTypes.string,
-  /** Change existing className with a new className */
-  cssModule: PropTypes.object,
-  /** Pass children so this component can wrap the child elements */
-  children: PropTypes.string,
-};
-
-function Spinner(props) {
-  const {
-    className,
-    cssModule,
-    type = 'border',
-    size,
-    color,
-    children = 'Loading...',
-    tag: Tag = 'div',
-    ...attributes
-  } = props;
-
-  const classes = mapToCssModules(
-    classNames(
-      className,
-      size ? `spinner-${type}-${size}` : false,
-      `spinner-${type}`,
-      color ? `text-${color}` : false,
-    ),
-    cssModule,
-  );
-
-  return (
-    <Tag role="status" {...attributes} className={classes}>
-      {children && (
-        <span className={mapToCssModules('visually-hidden', cssModule)}>
-          {children}
-        </span>
-      )}
-    </Tag>
-  );
-}
-
-Spinner.propTypes = propTypes;
-
-export default Spinner;
diff --git a/src/Spinner/Overview.mdx b/src/Spinner/Overview.mdx
new file mode 100644
index 0000000..5d8ed38
--- /dev/null
+++ b/src/Spinner/Overview.mdx
@@ -0,0 +1,16 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+ 
+import * as Stories from './Spinner.stories.jsx';
+ 
+<Meta of={Stories} />
+ 
+# Spinner
+ 
+Renders a loading spinner. You can specify the `size` prop to change the size of the spinner. Use `sm` for 
+loading in buttons, `md` and `lg` for loading content panels like modals.
+ 
+<Canvas of={Stories.Example} />
+
+## Props
+
+<Controls />
\ No newline at end of file
diff --git a/src/Spinner/Spinner.js b/src/Spinner/Spinner.js
new file mode 100644
index 0000000..d244b82
--- /dev/null
+++ b/src/Spinner/Spinner.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import classes from './Spinner.module.css';
+
+const sizeMap = {
+  sm: 16,
+  md: 32,
+  lg: 64,
+}
+
+const Spinner = ({
+  size: sizeKey = 'md',
+  ...props
+}) => {
+
+  const size = sizeMap[sizeKey];
+
+  return (
+    /* inline-flex removes the extra line height */
+    <span style={{ display: 'inline-flex' }}>
+      <svg
+        className={classes.Spinner}
+        height={size}
+        width={size}
+        viewBox="0 0 16 16"
+        fill="none"
+        aria-hidden
+        {...props}
+      >
+        <circle
+          cx="8"
+          cy="8"
+          r="7"
+          stroke="currentColor"
+          strokeOpacity="0.25"
+          strokeWidth="2"
+          vectorEffect="non-scaling-stroke"
+        />
+        <path
+          d="M15 8a7.002 7.002 0 00-7-7"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          vectorEffect="non-scaling-stroke"
+        />
+      </svg>
+    </span>
+  )
+}
+
+export default Spinner;
diff --git a/src/Spinner/Spinner.module.css b/src/Spinner/Spinner.module.css
new file mode 100644
index 0000000..c54e476
--- /dev/null
+++ b/src/Spinner/Spinner.module.css
@@ -0,0 +1,9 @@
+.Spinner {
+  animation: rotate-keyframes 1s linear infinite;
+}
+
+@keyframes rotate-keyframes {
+  100% {
+    transform: rotate(360deg);
+  }
+}
\ No newline at end of file
diff --git a/src/Spinner/Spinner.stories.jsx b/src/Spinner/Spinner.stories.jsx
new file mode 100644
index 0000000..42c8cd3
--- /dev/null
+++ b/src/Spinner/Spinner.stories.jsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import Spinner from '@harvest-profit/npk/Spinner';
+
+export default {
+  title: 'Components/Spinner',
+  component: Spinner,
+  argTypes: {
+    size: {
+      control: {
+        type: 'radio',
+      },
+      options: ['sm', 'md', 'lg'],
+      table: { defaultValue: { summary: "md" } }
+    },
+  }
+}
+
+export const Playground = ({ ...props }) => (<div>
+  <Spinner {...props} />
+</div>);
+
+export const Example = () => (<div>
+  <div>Small <Spinner size="sm" /></div>
+  <div>Medium <Spinner /></div>
+  <div>Large <Spinner size="lg" /></div>
+</div>);
\ No newline at end of file
diff --git a/src/Spinner/index.js b/src/Spinner/index.js
new file mode 100644
index 0000000..70a001c
--- /dev/null
+++ b/src/Spinner/index.js
@@ -0,0 +1 @@
+export { default } from './Spinner';
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 75512b3..20746da 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,7 @@
 import ApplicationAlert from './ApplicationAlert';
 import Button from './Button';
 import Placeholder from './Placeholder';
+import Spinner from './Spinner';
 import Tooltip from './Tooltip';
 import ThemeContext, { ThemeContextProvider } from './ThemeContext';
 
@@ -11,5 +12,6 @@ export {
   ApplicationAlert,
   Button,
   Placeholder,
+  Spinner,
   Tooltip
 }
\ No newline at end of file