diff --git a/.storybook/main.ts b/.storybook/main.ts
index dcfe0d1..d0516b8 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -1,4 +1,4 @@
-import type { StorybookConfig } from "@storybook/nextjs-vite";
+import type { StorybookConfig } from '@storybook/nextjs-vite';
 
 const config: StorybookConfig = {
   "stories": [
@@ -7,15 +7,12 @@ const config: StorybookConfig = {
   ],
   "addons": [
     "@chromatic-com/storybook",
-    "@storybook/addon-docs",
-    "@storybook/addon-onboarding",
+    "@storybook/addon-vitest",
     "@storybook/addon-a11y",
-    "@storybook/addon-vitest"
+    "@storybook/addon-docs",
+    "@storybook/addon-onboarding"
   ],
-  "framework": {
-    "name": "@storybook/nextjs-vite",
-    "options": {}
-  },
+  "framework": "@storybook/nextjs-vite",
   "staticDirs": [
     "../public"
   ]
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
new file mode 100644
index 0000000..86bb744
--- /dev/null
+++ b/.storybook/preview-head.html
@@ -0,0 +1,19 @@
+<style>
+  /* Ensure proper font loading and base styles */
+  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
+  
+  :root {
+    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  }
+  
+  body {
+    font-family: var(--font-sans);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  
+  /* Add any global styles here */
+  #root {
+    padding: 2rem;
+  }
+</style>
diff --git a/package-lock.json b/package-lock.json
index d91695c..d2de67a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -73,6 +73,7 @@
         "tailwindcss": "^4",
         "tw-animate-css": "^1.4.0",
         "typescript": "^5",
+        "vite": "^7.2.4",
         "vitest": "^4.0.12",
         "vitest-fetch-mock": "^0.4.5"
       }
@@ -15384,6 +15385,7 @@
       "resolved": "https://registry.npmjs.org/eciesjs/-/eciesjs-0.4.16.tgz",
       "integrity": "sha512-dS5cbA9rA2VR4Ybuvhg6jvdmp46ubLn3E+px8cG/35aEDNclrqoCjg6mt0HYZ/M+OoESS3jSkCrqk1kWAEhWAw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@ecies/ciphers": "^0.2.4",
         "@noble/ciphers": "^1.3.0",
@@ -16099,6 +16101,7 @@
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -23852,6 +23855,7 @@
       "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.8.1.tgz",
       "integrity": "sha512-hJVXfu3E28NmzGk8o1sHhN3om52tRvwYeidbj7xKy2eIIse5IoKX3USlS6Tqt3BHAtflLIkCQBkzVrEEfWUyYQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@socket.io/component-emitter": "~3.1.0",
         "debug": "~4.3.2",
diff --git a/package.json b/package.json
index d6ffc96..c4458b9 100644
--- a/package.json
+++ b/package.json
@@ -86,7 +86,8 @@
     "tw-animate-css": "^1.4.0",
     "typescript": "^5",
     "vitest": "^4.0.12",
-    "vitest-fetch-mock": "^0.4.5"
+    "vitest-fetch-mock": "^0.4.5",
+    "vite": "^7.2.4"
   },
   "lint-staged": {
     "*.{ts,tsx}": [
diff --git a/src/components/wallet/WalletConnectModal.stories.tsx b/src/components/wallet/WalletConnectModal.stories.tsx
new file mode 100644
index 0000000..967f699
--- /dev/null
+++ b/src/components/wallet/WalletConnectModal.stories.tsx
@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import WalletConnectModal from './WalletConnectModal';
+
+const meta: Meta<typeof WalletConnectModal> = {
+  title: 'Components/WalletConnectModal',
+  component: WalletConnectModal,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    isOpen: { control: 'boolean' },
+    onClose: { action: 'closed' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof WalletConnectModal>;
+
+export const Default: Story = {
+  args: {
+    isOpen: true,
+  },
+};
+
+export const Closed: Story = {
+  args: {
+    isOpen: false,
+  },
+};
diff --git a/vitest.config.ts b/vitest.config.ts
index a8bf302..3990425 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -5,11 +5,11 @@ import react from '@vitejs/plugin-react';
 import { configDefaults } from 'vitest/config';
 import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
 // No need to import defineBrowser, using direct configuration
-
-const dirname = typeof __dirname !== 'undefined' 
-  ? __dirname 
-  : path.dirname(fileURLToPath(import.meta.url));
-
+import { playwright } from '@vitest/browser-playwright';
+const dirname =
+  typeof __dirname !== 'undefined'
+    ? __dirname
+    : path.dirname(fileURLToPath(import.meta.url));
 const setupFile = path.join(dirname, 'vitest.setup.ts');
 const coverageDir = path.join(dirname, 'coverage');
 
@@ -91,7 +91,6 @@ const storybookTestConfig = {
   },
   setupFiles: [path.join(dirname, '.storybook/vitest.setup.ts')],
 };
-
 export default defineConfig({
   plugins: [react()],
   test: {
@@ -100,6 +99,32 @@ export default defineConfig({
     globals: true,
     setupFiles: [setupFile],
     coverage: commonTestConfig.coverage,
+    projects: [
+      {
+        extends: true,
+        plugins: [
+          // The plugin will run tests for the stories defined in your Storybook config
+          // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+          storybookTest({
+            configDir: path.join(dirname, '.storybook'),
+          }),
+        ],
+        test: {
+          name: 'storybook',
+          browser: {
+            enabled: true,
+            headless: true,
+            provider: playwright({}),
+            instances: [
+              {
+                browser: 'chromium',
+              },
+            ],
+          },
+          setupFiles: ['.storybook/vitest.setup.ts'],
+        },
+      },
+    ],
   },
   resolve: {
     alias: {