diff --git a/.github/workflows/build.yaml b/.github/workflows/build.yaml
deleted file mode 100644
index 3d6796ba7..000000000
--- a/.github/workflows/build.yaml
+++ /dev/null
@@ -1,52 +0,0 @@
-name: Build
-
-on:
-  push:
-    branches:
-      - main
-    tags-ignore:
-      - 'v*'
-
-concurrency: ${{ github.ref }}
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - name: 📥 Check out the code
-        uses: actions/checkout@v3
-
-      - name: 💿 Setup NodeJS 16
-        uses: actions/setup-node@v3
-        with:
-          node-version: 16
-
-      - name: ⏳ Setup Cache
-        uses: actions/cache@v3
-        with:
-          path: '**/node_modules'
-          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-modules-
-
-      - name: 🏭 Install packages
-        run: yarn install
-
-      - name: 🕵 Lint the code
-        run: yarn lint
-
-      - name: 💅 Run Prettier
-        run: yarn prettier
-
-      - name: 🔬 Run unit tests
-        run: yarn test:coverage
-
-      - name: 🧰 Build code
-        run: yarn build
-
-      - name: 📊 Upload coverage to Codecov
-        uses: codecov/codecov-action@v3
-        with:
-          fail_ci_if_error: false
-          files: coverage/coverage-final.json
-          verbose: false
diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yml
similarity index 100%
rename from .github/workflows/ci.yaml
rename to .github/workflows/ci.yml
diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml
index 7f2d72448..ed409ba48 100644
--- a/.github/workflows/codeql.yml
+++ b/.github/workflows/codeql.yml
@@ -1,4 +1,4 @@
-name: 'CodeQL'
+name: CodeQL
 
 on:
   push:
diff --git a/.github/workflows/storybook.yml b/.github/workflows/storybook.yml
new file mode 100644
index 000000000..b0ecd8483
--- /dev/null
+++ b/.github/workflows/storybook.yml
@@ -0,0 +1,21 @@
+name: Deploy Storybook
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: 📥 Checkout
+        uses: actions/checkout@v2.3.1
+
+      - name: 🚀 Merge main -> storybook
+        uses: devmasx/merge-branch@1.4.0
+        with:
+          type: now
+          from_branch: main
+          target_branch: storybook
+          github_token: ${{ github.token }}
diff --git a/.gitignore b/.gitignore
index c0103cef7..7a16915f1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,6 +6,7 @@ cypress/screenshots
 cypress/videos
 lib
 node_modules
+storybook-static
 .DS_Store
 npm-debug.log*
 tsconfig.tsbuildinfo
diff --git a/.storybook/inter.woff2 b/.storybook/inter.woff2
new file mode 100644
index 000000000..980853fec
Binary files /dev/null and b/.storybook/inter.woff2 differ
diff --git a/.storybook/style.css b/.storybook/style.css
index 4edc7d133..63b75a58b 100644
--- a/.storybook/style.css
+++ b/.storybook/style.css
@@ -5,8 +5,12 @@
 @layer base {
   @font-face {
     font-family: 'Inter';
-    src: url(/public/inter.woff2) format('woff2');
+    src: url(inter.woff2) format('woff2');
     font-weight: 100 200 300 400 500 600 700 800 900;
     font-display: swap;
   }
+
+  html {
+    font-family: 'Inter', sans-serif;
+  }
 }
diff --git a/app/components/navbar.tsx b/app/components/navbar.tsx
index 48fb5cf95..103c53291 100644
--- a/app/components/navbar.tsx
+++ b/app/components/navbar.tsx
@@ -1,6 +1,7 @@
 import Link from 'next/link';
 import type { FC } from 'react';
 import { BsGithub } from 'react-icons/bs';
+import { SiStorybook } from 'react-icons/si';
 import { Badge, DarkThemeToggle, Tooltip } from '~/src';
 import pkg from './../../package.json' assert { type: 'json' };
 
@@ -57,6 +58,14 @@ export const NavbarIcons: FC = () => {
   const version = pkg?.version ?? 'latest';
   return (
     <div className="flex items-center gap-1">
+      <a
+        href="https://flowbite-react-git-storybook-themesberg.vercel.app"
+        className="hidden rounded-lg p-2.5 text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:text-gray-300 dark:hover:bg-gray-700 dark:focus:ring-gray-700 lg:block"
+      >
+        <Tooltip animation={false} content="View Storybook">
+          <SiStorybook aria-hidden className="h-5 w-5" />
+        </Tooltip>
+      </a>
       <a
         href="https://github.com/themesberg/flowbite-react"
         className="hidden rounded-lg p-2.5 text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:text-gray-300 dark:hover:bg-gray-700 dark:focus:ring-gray-700 lg:block"