diff --git a/lib/.storybook/main.ts b/lib/.storybook/main.ts
index 16e7dcc..1d2c4ae 100644
--- a/lib/.storybook/main.ts
+++ b/lib/.storybook/main.ts
@@ -2,7 +2,7 @@ import type { StorybookConfig } from '@storybook/react-webpack5';
 
 const config: StorybookConfig = {
   stories: ['../__stories__/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: ['@storybook/addon-webpack5-compiler-swc'],
+  addons: ['@storybook/addon-webpack5-compiler-swc', '@storybook/addon-controls'],
   framework: {
     name: '@storybook/react-webpack5',
     options: {},
diff --git a/lib/__stories__/CryptoIcon.stories.tsx b/lib/__stories__/CryptoIcon.stories.tsx
index 26a0fd4..de617e0 100644
--- a/lib/__stories__/CryptoIcon.stories.tsx
+++ b/lib/__stories__/CryptoIcon.stories.tsx
@@ -6,15 +6,31 @@ import CryptoIcon from '../src/components/CryptoIcon';
 const meta = {
   title: 'CryptoIcon',
   component: CryptoIcon,
+  argTypes: {
+    theme: {
+      control: {
+        type: 'radio',
+      },
+      options: ['dark', 'light'],
+      table: {
+        type: {
+          summary: 'radio',
+        },
+        defaultValue: {
+          summary: 'light',
+        },
+      },
+    },
+  },
 } satisfies Meta<typeof CryptoIcon>;
 
 export default meta;
 
-const Template: StoryFn = () => (
-  <div>
+const Template: StoryFn = ({ theme = 'light' }) => (
+  <div style={{ padding: '0.5rem', backgroundColor: theme === 'light' ? '#FFFFFF' : '#1C1D1F' }}>
     {Object.entries(iconsObj).map(([key, value]) => (
       <div key={key}>
-        <p>{key}</p>
+        <p style={{ color: theme === 'light' ? '#1C1D1F' : '#FFFFFF' }}>{key}</p>
         <div
           style={{
             marginBottom: '20px',
@@ -28,12 +44,12 @@ const Template: StoryFn = () => (
               marginBottom: '10px',
             }}
           >
-            <CryptoIcon ledgerId={key} ticker={value.icon} size="56px" />
-            <CryptoIcon ledgerId={key} ticker={value.icon} size="48px" />
-            <CryptoIcon ledgerId={key} ticker={value.icon} size="40px" />
-            <CryptoIcon ledgerId={key} ticker={value.icon} size="32px" />
-            <CryptoIcon ledgerId={key} ticker={value.icon} size="24px" />
-            <CryptoIcon ledgerId={key} ticker={value.icon} />
+            <CryptoIcon ledgerId={key} ticker={value.icon} size="56px" theme={theme} />
+            <CryptoIcon ledgerId={key} ticker={value.icon} size="48px" theme={theme} />
+            <CryptoIcon ledgerId={key} ticker={value.icon} size="40px" theme={theme} />
+            <CryptoIcon ledgerId={key} ticker={value.icon} size="32px" theme={theme} />
+            <CryptoIcon ledgerId={key} ticker={value.icon} size="24px" theme={theme} />
+            <CryptoIcon ledgerId={key} ticker={value.icon} theme={theme} />
           </div>
           <div
             style={{
@@ -43,12 +59,12 @@ const Template: StoryFn = () => (
               marginBottom: '10px',
             }}
           >
-            <CryptoIcon ledgerId={'none'} ticker={value.icon} size="56px" />
-            <CryptoIcon ledgerId={'none'} ticker={value.icon} size="48px" />
-            <CryptoIcon ledgerId={'none'} ticker={value.icon} size="40px" />
-            <CryptoIcon ledgerId={'none'} ticker={value.icon} size="32px" />
-            <CryptoIcon ledgerId={'none'} ticker={value.icon} size="24px" />
-            <CryptoIcon ledgerId={'none'} ticker={value.icon} />
+            <CryptoIcon ledgerId={'none'} ticker={value.icon} size="56px" theme={theme} />
+            <CryptoIcon ledgerId={'none'} ticker={value.icon} size="48px" theme={theme} />
+            <CryptoIcon ledgerId={'none'} ticker={value.icon} size="40px" theme={theme} />
+            <CryptoIcon ledgerId={'none'} ticker={value.icon} size="32px" theme={theme} />
+            <CryptoIcon ledgerId={'none'} ticker={value.icon} size="24px" theme={theme} />
+            <CryptoIcon ledgerId={'none'} ticker={value.icon} theme={theme} />
           </div>
         </div>
       </div>
diff --git a/lib/package.json b/lib/package.json
index 10f04c8..53dce95 100644
--- a/lib/package.json
+++ b/lib/package.json
@@ -28,6 +28,7 @@
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-url": "^8.0.2",
+    "@storybook/addon-controls": "8.2.6",
     "@storybook/addon-webpack5-compiler-swc": "^1.0.4",
     "@storybook/react": "^8.2.6",
     "@storybook/react-webpack5": "^8.2.6",
diff --git a/lib/pnpm-lock.yaml b/lib/pnpm-lock.yaml
index b4dab15..87456f8 100644
--- a/lib/pnpm-lock.yaml
+++ b/lib/pnpm-lock.yaml
@@ -27,6 +27,9 @@ importers:
       '@rollup/plugin-url':
         specifier: ^8.0.2
         version: 8.0.2(rollup@4.19.0)
+      '@storybook/addon-controls':
+        specifier: 8.2.6
+        version: 8.2.6(storybook@8.2.6(@babel/preset-env@7.24.8(@babel/core@7.24.9)))
       '@storybook/addon-webpack5-compiler-swc':
         specifier: ^1.0.4
         version: 1.0.4(webpack@5.93.0(@swc/core@1.5.7)(esbuild@0.21.5))
@@ -1242,6 +1245,11 @@ packages:
   '@sinonjs/fake-timers@10.3.0':
     resolution: {integrity: sha512-V4BG07kuYSUkTCSBHG8G8TNhM+F19jXFWnQtzj+we8DrkpSBCee9Z3Ms8yiGer/dlmhe35/Xdgyo3/0rQKg7YA==}
 
+  '@storybook/addon-controls@8.2.6':
+    resolution: {integrity: sha512-EHUwHy+oZZv3pXzN7fuXWrS/meHFjqcELY3RBvOyEkGf21agl6co6R1tnf6d5N5QoYAGfIbDO7dkauSL2RfNAw==}
+    peerDependencies:
+      storybook: ^8.2.6
+
   '@storybook/addon-webpack5-compiler-swc@1.0.4':
     resolution: {integrity: sha512-S/ypdAK9oqwUAt3ZOn44qi3RWdH5uBLbBgtfHSXckqTpQRu7F7A9bRzjK+H5ti4xVADRhxu/xzIBwxWgcCeIXA==}
     engines: {node: '>=18'}
@@ -6251,6 +6259,13 @@ snapshots:
     dependencies:
       '@sinonjs/commons': 3.0.1
 
+  '@storybook/addon-controls@8.2.6(storybook@8.2.6(@babel/preset-env@7.24.8(@babel/core@7.24.9)))':
+    dependencies:
+      dequal: 2.0.3
+      lodash: 4.17.21
+      storybook: 8.2.6(@babel/preset-env@7.24.8(@babel/core@7.24.9))
+      ts-dedent: 2.2.0
+
   '@storybook/addon-webpack5-compiler-swc@1.0.4(webpack@5.93.0(@swc/core@1.5.7)(esbuild@0.21.5))':
     dependencies:
       '@swc/core': 1.5.7