diff --git a/apps/client/.babelrc.json b/apps/client/.babelrc.json
new file mode 100644
index 00000000..84cbe157
--- /dev/null
+++ b/apps/client/.babelrc.json
@@ -0,0 +1,4 @@
+{
+    "presets": ["next/babel"],
+    "plugins": []
+}
diff --git a/apps/client/.storybook/main.js b/apps/client/.storybook/main.js
new file mode 100644
index 00000000..2484425c
--- /dev/null
+++ b/apps/client/.storybook/main.js
@@ -0,0 +1,18 @@
+const rootMain = require('../../../.storybook/main')
+
+module.exports = {
+    ...rootMain,
+    core: { ...rootMain.core, builder: 'webpack5' },
+    stories: ['../**/*.stories.@(js|jsx|ts|tsx)'],
+    addons: [...rootMain.addons, '@nrwl/react/plugins/storybook'],
+    webpackFinal: async (config, { configType }) => {
+        // apply any global webpack configs that might have been specified in .storybook/main.js
+        if (rootMain.webpackFinal) {
+            config = await rootMain.webpackFinal(config, { configType })
+        }
+
+        // add your own webpack tweaks if needed
+
+        return config
+    },
+}
diff --git a/apps/client/.storybook/tsconfig.json b/apps/client/.storybook/tsconfig.json
new file mode 100644
index 00000000..003887ff
--- /dev/null
+++ b/apps/client/.storybook/tsconfig.json
@@ -0,0 +1,7 @@
+{
+    "extends": "../tsconfig.json",
+    "compilerOptions": {
+        "allowImportingTsExtensions": true
+    },
+    "include": ["**/*.ts", "**/*.tsx", "**/**/*.ts", "**/**/*.tsx"]
+}
diff --git a/apps/client/components/Maintenance.stories.tsx b/apps/client/components/Maintenance.stories.tsx
new file mode 100644
index 00000000..468d8d2a
--- /dev/null
+++ b/apps/client/components/Maintenance.stories.tsx
@@ -0,0 +1,18 @@
+import type { Story, Meta } from '@storybook/react'
+import Maintenance from './Maintenance.tsx'
+import React from 'react'
+
+export default {
+    title: 'components/Maintenance.tsx',
+    component: Maintenance,
+} as Meta
+
+const Template: Story = () => {
+    return (
+        <>
+            <Maintenance />
+        </>
+    )
+}
+
+export const Base = Template.bind({})
diff --git a/libs/client/shared/src/components/generic/TrendBadge.tsx b/libs/client/shared/src/components/generic/TrendBadge.tsx
index 097ff252..d5b4d3bc 100644
--- a/libs/client/shared/src/components/generic/TrendBadge.tsx
+++ b/libs/client/shared/src/components/generic/TrendBadge.tsx
@@ -1,4 +1,4 @@
-import { Badge, BadgeVariant } from '@maybe-finance/design-system'
+import { Badge, type BadgeVariant as BadgeVariantType } from '@maybe-finance/design-system'
 import type { SharedType } from '@maybe-finance/shared'
 import { NumberUtil } from '@maybe-finance/shared'
 import cn from 'classnames'
@@ -12,7 +12,9 @@ type TrendBadgeProps = {
     displayAmount?: boolean
 }
 
-const BadgeVariant = (negative: boolean): Record<SharedType.Trend['direction'], BadgeVariant> => ({
+const BadgeVariant = (
+    negative: boolean
+): Record<SharedType.Trend['direction'], BadgeVariantType> => ({
     down: negative ? 'teal' : 'red',
     up: negative ? 'red' : 'teal',
     flat: 'gray',
diff --git a/workspace.json b/workspace.json
index ef681dc4..64b2eb15 100644
--- a/workspace.json
+++ b/workspace.json
@@ -66,6 +66,33 @@
                     "options": {
                         "command": "node tools/scripts/triggerClientDeploy.js"
                     }
+                },
+                "storybook": {
+                    "executor": "@nrwl/storybook:storybook",
+                    "options": {
+                        "uiFramework": "@storybook/react",
+                        "port": 4400,
+                        "configDir": "apps/client/.storybook"
+                    },
+                    "configurations": {
+                        "ci": {
+                            "quiet": true
+                        }
+                    }
+                },
+                "build-storybook": {
+                    "executor": "@nrwl/storybook:build",
+                    "outputs": ["{options.outputDir}"],
+                    "options": {
+                        "uiFramework": "@storybook/react",
+                        "outputDir": "dist/storybook/client",
+                        "configDir": "apps/client/.storybook"
+                    },
+                    "configurations": {
+                        "ci": {
+                            "quiet": true
+                        }
+                    }
                 }
             },
             "tags": ["scope:app"]
diff --git a/yarn.lock b/yarn.lock
index be6dd4ec..06e3d78f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -20432,4 +20432,4 @@ zod@^3.19.1:
 zwitch@^1.0.0:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-1.0.5.tgz#d11d7381ffed16b742f6af7b3f223d5cd9fe9920"
-  integrity sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw==
\ No newline at end of file
+  integrity sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw==