diff --git a/.storybook/main.ts b/.storybook/main.ts
index 4a46977..2c97486 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -1,6 +1,7 @@
 import type { StorybookConfig } from "@storybook/nextjs";
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  staticDirs: ['../public'],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 2b90eaa..2aeb70d 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -11,6 +11,11 @@ const preview: Preview = {
         date: /Date$/,
       },
     },
+    options: {
+      storySort: {
+        order: ["Atoms", "Molecules", "Organisms"],
+      }
+    }
   },
 };
 
diff --git a/.storybook/webpack.config.ts b/.storybook/webpack.config.ts
new file mode 100644
index 0000000..e587144
--- /dev/null
+++ b/.storybook/webpack.config.ts
@@ -0,0 +1,12 @@
+// .storybook/webpack.config.js
+const path = require('path');
+
+module.exports = ({ config }) => {
+  config.resolve.alias = {
+    ...config.resolve.alias,
+    // path to the src folder
+    '@': path.resolve(__dirname, '../src'),
+  };
+
+  return config;
+};