diff --git a/.github/workflows/deploy-netlify-ui.yml b/.github/workflows/deploy-netlify-ui.yml
new file mode 100644
index 000000000..67ed1315b
--- /dev/null
+++ b/.github/workflows/deploy-netlify-ui.yml
@@ -0,0 +1,41 @@
+name: Deploy to Netlify (ui)
+
+on:
+  push:
+    branches: [main]
+    # run this workflow only if an update is made to the ui package
+    paths:
+      - "packages/hoppscotch-ui/**"
+
+jobs:
+  deploy:
+    name: Deploy
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup environment
+        run: mv .env.example .env
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2.2.4
+        with:
+          version: 7
+          run_install: true
+
+      - name: Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node }}
+          cache: pnpm
+
+      - name: Build site
+        run: pnpm run generate-ui
+
+      # Deploy the ui site with netlify-cli
+      - name: Deploy to Netlify (ui)
+        run: npx netlify-cli deploy --dir=packages/hoppscotch-ui/.histoire/dist --prod
+        env:
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_UI_SITE_ID }}
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
diff --git a/package.json b/package.json
index 1a2b18bfb..92110d465 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,8 @@
     "typecheck": "pnpm -r do-typecheck",
     "lintfix": "pnpm -r do-lintfix",
     "pre-commit": "pnpm -r do-lint && pnpm -r do-typecheck",
-    "test": "pnpm -r do-test"
+    "test": "pnpm -r do-test",
+    "generate-ui": "pnpm -r do-build-ui"
   },
   "workspaces": [
     "./packages/*"
diff --git a/packages/hoppscotch-ui/histoire.config.ts b/packages/hoppscotch-ui/histoire.config.ts
index 3ce600279..88fb23b11 100644
--- a/packages/hoppscotch-ui/histoire.config.ts
+++ b/packages/hoppscotch-ui/histoire.config.ts
@@ -2,6 +2,16 @@ import { HstVue } from "@histoire/plugin-vue"
 import { defineConfig } from "histoire"
 
 export default defineConfig({
+  theme: {
+    title: "Hoppscotch • UI",
+    logo: {
+      square: "/logo.png",
+      light: "/logo.png",
+      dark: "/logo.png",
+    },
+    // logoHref: "https://ui.hoppscotch.io",
+    favicon: 'favicon.ico',
+  },
   setupFile: "histoire.setup.ts",
   plugins: [HstVue()],
 })
diff --git a/packages/hoppscotch-ui/package.json b/packages/hoppscotch-ui/package.json
index cd8ae1b56..46953b1e7 100644
--- a/packages/hoppscotch-ui/package.json
+++ b/packages/hoppscotch-ui/package.json
@@ -6,7 +6,8 @@
     "build": "vite build",
     "story:dev": "histoire dev",
     "story:build": "histoire build",
-    "story:preview": "histoire preview"
+    "story:preview": "histoire preview",
+    "do-build-ui": "pnpm run story:build"
   },
   "dependencies": {
     "@hoppscotch/vue-toasted": "^0.1.0",
diff --git a/packages/hoppscotch-ui/public/favicon.ico b/packages/hoppscotch-ui/public/favicon.ico
new file mode 100644
index 000000000..f8cd232e7
Binary files /dev/null and b/packages/hoppscotch-ui/public/favicon.ico differ
diff --git a/packages/hoppscotch-ui/public/logo.png b/packages/hoppscotch-ui/public/logo.png
new file mode 100644
index 000000000..5919c5185
Binary files /dev/null and b/packages/hoppscotch-ui/public/logo.png differ
diff --git a/packages/hoppscotch-ui/src/components.d.ts b/packages/hoppscotch-ui/src/components.d.ts
new file mode 100644
index 000000000..e52ba9d2d
--- /dev/null
+++ b/packages/hoppscotch-ui/src/components.d.ts
@@ -0,0 +1,37 @@
+// generated by unplugin-vue-components
+// We suggest you to commit this file into source control
+// Read more: https://github.com/vuejs/core/pull/3399
+import '@vue/runtime-core'
+
+export {}
+
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    ButtonPrimary: typeof import('./components/button/Primary.vue')['default']
+    ButtonSecondary: typeof import('./components/button/Secondary.vue')['default']
+    IconLucideLoader: typeof import('~icons/lucide/loader')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    SmartAnchor: typeof import('./components/smart/Anchor.vue')['default']
+    SmartAutoComplete: typeof import('./components/smart/AutoComplete.vue')['default']
+    SmartCheckbox: typeof import('./components/smart/Checkbox.vue')['default']
+    SmartConfirmModal: typeof import('./components/smart/ConfirmModal.vue')['default']
+    SmartExpand: typeof import('./components/smart/Expand.vue')['default']
+    SmartFileChip: typeof import('./components/smart/FileChip.vue')['default']
+    SmartIntersection: typeof import('./components/smart/Intersection.vue')['default']
+    SmartItem: typeof import('./components/smart/Item.vue')['default']
+    SmartLink: typeof import('./components/smart/Link.vue')['default']
+    SmartModal: typeof import('./components/smart/Modal.vue')['default']
+    SmartProgressRing: typeof import('./components/smart/ProgressRing.vue')['default']
+    SmartRadio: typeof import('./components/smart/Radio.vue')['default']
+    SmartRadioGroup: typeof import('./components/smart/RadioGroup.vue')['default']
+    SmartSlideOver: typeof import('./components/smart/SlideOver.vue')['default']
+    SmartSpinner: typeof import('./components/smart/Spinner.vue')['default']
+    SmartTab: typeof import('./components/smart/Tab.vue')['default']
+    SmartTabs: typeof import('./components/smart/Tabs.vue')['default']
+    SmartToggle: typeof import('./components/smart/Toggle.vue')['default']
+    SmartWindow: typeof import('./components/smart/Window.vue')['default']
+    SmartWindows: typeof import('./components/smart/Windows.vue')['default']
+  }
+
+}