diff --git a/.github/workflows/jan-electron-linter-and-test.yml b/.github/workflows/jan-electron-linter-and-test.yml
index 69552f17e..90802baf7 100644
--- a/.github/workflows/jan-electron-linter-and-test.yml
+++ b/.github/workflows/jan-electron-linter-and-test.yml
@@ -4,29 +4,31 @@ on:
     branches:
       - main
     paths:
-      - 'electron/**'
+      - "electron/**"
       - .github/workflows/jan-electron-linter-and-test.yml
-      - 'web/**'
-      - 'package.json'
-      - 'node_modules/**'
-      - 'yarn.lock'
+      - "web/**"
+      - "uikit/**"
+      - "package.json"
+      - "node_modules/**"
+      - "yarn.lock"
 
   pull_request:
     branches:
       - main
     paths:
-      - 'electron/**'
+      - "electron/**"
       - .github/workflows/linter-and-test.yml
-      - 'web/**'
-      - 'package.json'
-      - 'node_modules/**'
-      - 'yarn.lock'
+      - "web/**"
+      - "uikit/**"
+      - "package.json"
+      - "node_modules/**"
+      - "yarn.lock"
 
 jobs:
   test-on-macos:
     runs-on: [self-hosted, macOS, macos-desktop]
     steps:
-      - name: 'Cleanup build folder'
+      - name: "Cleanup build folder"
         run: |
           ls -la ./
           rm -rf ./* || true
@@ -41,6 +43,12 @@ jobs:
         with:
           node-version: 20
 
+      - name: Build uikit
+        run: |
+          cd uikit
+          yarn install
+          yarn build
+
       - name: Linter and test
         run: |
           yarn config set network-timeout 300000
@@ -73,6 +81,12 @@ jobs:
         with:
           node-version: 20
 
+      - name: Build uikit
+        run: |
+          cd uikit
+          yarn install
+          yarn build
+
       - name: Linter and test
         run: |
           yarn config set network-timeout 300000
@@ -85,7 +99,7 @@ jobs:
   test-on-ubuntu:
     runs-on: [self-hosted, Linux, ubuntu-desktop]
     steps:
-      - name: 'Cleanup build folder'
+      - name: "Cleanup build folder"
         run: |
           ls -la ./
           rm -rf ./* || true
@@ -100,6 +114,12 @@ jobs:
         with:
           node-version: 20
 
+      - name: Build uikit
+        run: |
+          cd uikit
+          yarn install
+          yarn build
+
       - name: Linter and test
         run: |
           export DISPLAY=$(w -h | awk 'NR==1 {print $2}')
@@ -109,4 +129,4 @@ jobs:
           yarn install
           yarn build:plugins
           yarn build:test-linux
-          yarn test
\ No newline at end of file
+          yarn test
diff --git a/electron/main.ts b/electron/main.ts
index 8e175a62d..cecc90f42 100644
--- a/electron/main.ts
+++ b/electron/main.ts
@@ -53,11 +53,12 @@ app.on("quit", () => {
 function createMainWindow() {
   mainWindow = new BrowserWindow({
     width: 1200,
+    minWidth: 800,
     height: 800,
     show: false,
     trafficLightPosition: {
-      x: 16,
-      y: 10,
+      x: 10,
+      y: 15,
     },
     titleBarStyle: "hidden",
     vibrancy: "sidebar",
diff --git a/electron/tests/explore.e2e.spec.ts b/electron/tests/explore.e2e.spec.ts
index 6df823fc1..5a4412cb3 100644
--- a/electron/tests/explore.e2e.spec.ts
+++ b/electron/tests/explore.e2e.spec.ts
@@ -36,12 +36,6 @@ test.afterAll(async () => {
 
 test("explores models", async () => {
   await page.getByTestId("Explore Models").first().click();
-  const header = await page
-    .getByRole("heading")
-    .filter({ hasText: "Explore Models" })
-    .first()
-    .isDisabled();
-  expect(header).toBe(false);
-
+  await page.getByTestId("testid-explore-models").isVisible();
   //   More test cases here...
 });
diff --git a/electron/tests/my-models.e2e.spec.ts b/electron/tests/my-models.e2e.spec.ts
index 788b80fc0..a3355fb33 100644
--- a/electron/tests/my-models.e2e.spec.ts
+++ b/electron/tests/my-models.e2e.spec.ts
@@ -36,6 +36,6 @@ test.afterAll(async () => {
 
 test("shows my models", async () => {
   await page.getByTestId("My Models").first().click();
-  await page.getByTestId("testid-mymodels-header").isVisible();
+  await page.getByTestId("testid-my-models").isVisible();
   //   More test cases here...
 });
diff --git a/package.json b/package.json
index 2a489d9a0..7356a0fd5 100644
--- a/package.json
+++ b/package.json
@@ -3,11 +3,17 @@
   "private": true,
   "workspaces": {
     "packages": [
+      "uikit",
+      "core",
       "electron",
       "web",
       "server"
     ],
     "nohoist": [
+      "uikit",
+      "uikit/*",
+      "core",
+      "core/*",
       "electron",
       "electron/**",
       "web",
@@ -23,13 +29,15 @@
     "dev:web": "yarn workspace jan-web dev",
     "dev": "concurrently --kill-others \"yarn dev:web\" \"wait-on http://localhost:3000 && yarn dev:electron\"",
     "test-local": "yarn lint && yarn build:test && yarn test",
+    "dev:uikit": "yarn workspace @janhq/uikit install && yarn workspace @janhq/uikit dev",
+    "build:uikit": "yarn workspace @janhq/uikit install && yarn workspace @janhq/uikit build",
     "build:core": "cd core && yarn install && yarn run build",
     "build:web": "yarn workspace jan-web build && cpx \"web/out/**\" \"electron/renderer/\"",
     "build:electron": "yarn workspace jan build",
     "build:electron:test": "yarn workspace jan build:test",
     "build:pull-plugins": "rimraf ./electron/core/pre-install/*.tgz && cd ./electron/core/pre-install && npm pack @janhq/inference-plugin @janhq/monitoring-plugin",
-    "build:plugins": "rimraf ./electron/core/pre-install/*.tgz && concurrently --kill-others-on-fail \"cd ./plugins/conversational-plugin && npm install && npm run postinstall && npm run build:publish\" \"cd ./plugins/inference-plugin && npm install --ignore-scripts && npm run postinstall:dev && npm run build:publish\" \"cd ./plugins/model-plugin && npm install && npm run postinstall && npm run build:publish\" \"cd ./plugins/monitoring-plugin && npm install && npm run postinstall && npm run build:publish\"",
-    "build:plugins-web": "rimraf ./electron/core/pre-install/*.tgz && concurrently --kill-others-on-fail \"cd ./plugins/conversational-plugin && npm install && npm run build:deps && npm run postinstall\" \"cd ./plugins/inference-plugin && npm install && npm run postinstall\" \"cd ./plugins/model-plugin && npm install && npm run postinstall\" \"cd ./plugins/monitoring-plugin && npm install && npm run postinstall\" && concurrently --kill-others-on-fail \"cd ./plugins/conversational-plugin && npm run build:publish\" \"cd ./plugins/inference-plugin && npm run build:publish\" \"cd ./plugins/model-plugin && npm run build:publish\" \"cd ./plugins/monitoring-plugin && npm run build:publish\"",
+    "build:plugins": "rimraf ./electron/core/pre-install/*.tgz && concurrently --kill-others-on-fail \"cd ./plugins/conversational-json && npm install && npm run postinstall && npm run build:publish\" \"cd ./plugins/inference-plugin && npm install --ignore-scripts && npm run postinstall:dev && npm run build:publish\" \"cd ./plugins/model-plugin && npm install && npm run postinstall && npm run build:publish\" \"cd ./plugins/monitoring-plugin && npm install && npm run postinstall && npm run build:publish\"",
+    "build:plugins-web": "rimraf ./electron/core/pre-install/*.tgz && concurrently --kill-others-on-fail \"cd ./plugins/conversational-json && npm install && npm run build:deps && npm run postinstall\" \"cd ./plugins/inference-plugin && npm install && npm run postinstall\" \"cd ./plugins/model-plugin && npm install && npm run postinstall\" \"cd ./plugins/monitoring-plugin && npm install && npm run postinstall\" && concurrently --kill-others-on-fail \"cd ./plugins/conversational-json && npm run build:publish\" \"cd ./plugins/inference-plugin && npm run build:publish\" \"cd ./plugins/model-plugin && npm run build:publish\" \"cd ./plugins/monitoring-plugin && npm run build:publish\"",
     "build": "yarn build:web && yarn build:electron",
     "build:test": "yarn build:web && yarn build:electron:test",
     "build:test-darwin": "yarn build:web && yarn workspace jan build:test-darwin",
@@ -42,7 +50,7 @@
     "build:publish-darwin": "yarn build:web && yarn workspace jan build:publish-darwin",
     "build:publish-win32": "yarn build:web && yarn workspace jan build:publish-win32",
     "build:publish-linux": "yarn build:web && yarn workspace jan build:publish-linux",
-    "build:web-plugins": "yarn build:web && yarn build:plugins-web && mkdir -p \"./web/out/plugins/conversational-plugin\" && cp \"./plugins/conversational-plugin/dist/index.js\" \"./web/out/plugins/conversational-plugin\" && mkdir -p \"./web/out/plugins/inference-plugin\" &&  cp \"./plugins/inference-plugin/dist/index.js\" \"./web/out/plugins/inference-plugin\" && mkdir -p \"./web/out/plugins/model-plugin\" && cp \"./plugins/model-plugin/dist/index.js\" \"./web/out/plugins/model-plugin\" && mkdir -p \"./web/out/plugins/monitoring-plugin\" && cp \"./plugins/monitoring-plugin/dist/index.js\" \"./web/out/plugins/monitoring-plugin\"",
+    "build:web-plugins": "yarn build:web && yarn build:plugins-web && mkdir -p \"./web/out/plugins/conversational-json\" && cp \"./plugins/conversational-json/dist/index.js\" \"./web/out/plugins/conversational-json\" && mkdir -p \"./web/out/plugins/inference-plugin\" &&  cp \"./plugins/inference-plugin/dist/index.js\" \"./web/out/plugins/inference-plugin\" && mkdir -p \"./web/out/plugins/model-plugin\" && cp \"./plugins/model-plugin/dist/index.js\" \"./web/out/plugins/model-plugin\" && mkdir -p \"./web/out/plugins/monitoring-plugin\" && cp \"./plugins/monitoring-plugin/dist/index.js\" \"./web/out/plugins/monitoring-plugin\"",
     "server:prod": "yarn workspace server build && yarn build:web-plugins && cpx \"web/out/**\" \"server/build/renderer/\" && mkdir -p ./server/build/@janhq && cp -r ./plugins/* ./server/build/@janhq",
     "start:server": "yarn server:prod && node server/build/main.js"
   },
@@ -52,8 +60,5 @@
     "rimraf": "^3.0.2",
     "wait-on": "^7.0.1"
   },
-  "version": "0.0.0",
-  "dependencies": {
-    "@janhq/core": "file:core"
-  }
+  "version": "0.0.0"
 }
diff --git a/uikit/.prettierignore b/uikit/.prettierignore
new file mode 100644
index 000000000..02d9145c1
--- /dev/null
+++ b/uikit/.prettierignore
@@ -0,0 +1,5 @@
+.next/
+node_modules/
+dist/
+*.hbs
+*.mdx
\ No newline at end of file
diff --git a/uikit/.prettierrc b/uikit/.prettierrc
new file mode 100644
index 000000000..933d88d62
--- /dev/null
+++ b/uikit/.prettierrc
@@ -0,0 +1,8 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "quoteProps": "consistent",
+  "trailingComma": "es5",
+  "endOfLine": "lf",
+  "plugins": ["prettier-plugin-tailwindcss"]
+}
diff --git a/uikit/package.json b/uikit/package.json
new file mode 100644
index 000000000..dd67be599
--- /dev/null
+++ b/uikit/package.json
@@ -0,0 +1,53 @@
+{
+  "name": "@janhq/uikit",
+  "version": "0.1.0",
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/**"
+  ],
+  "scripts": {
+    "build:styles": "postcss src/main.scss -o dist/index.css --use postcss-import",
+    "build:react": "tsup src/index.{ts,tsx} --format cjs,esm --dts --external react react-dom --minify terser --splitting --sourcemap",
+    "dev:react": "tsup src/index.{ts,tsx} --format cjs,esm --watch --dts",
+    "dev:styles": "postcss src/main.scss -o dist/index.css -u postcss-import -w",
+    "build": "yarn build:styles && yarn build:react",
+    "dev": "concurrently --kill-others \"yarn dev:styles\" \"yarn dev:react\""
+  },
+  "dependencies": {
+    "@radix-ui/react-avatar": "^1.0.4",
+    "@radix-ui/react-context": "^1.0.1",
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-progress": "^1.0.3",
+    "@radix-ui/react-scroll-area": "^1.0.5",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-switch": "^1.0.3",
+    "@radix-ui/react-toast": "^1.1.5",
+    "@radix-ui/react-tooltip": "^1.0.7",
+    "autoprefixer": "^10.4.16",
+    "class-variance-authority": "^0.7.0",
+    "cmdk": "^0.2.0",
+    "lucide-react": "^0.292.0",
+    "postcss": "^8.4.31",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.47.0",
+    "scss": "^0.2.4",
+    "tailwindcss": "^3.3.5"
+  },
+  "devDependencies": {
+    "concurrently": "^8.2.2",
+    "postcss-cli": "^10.1.0",
+    "postcss-import": "^15.1.0",
+    "prejss-cli": "^0.3.3",
+    "prettier": "^3.0.3",
+    "prettier-plugin-tailwindcss": "^0.5.6",
+    "tailwind-merge": "^2.0.0",
+    "terser": "^5.24.0",
+    "tsup": "^7.2.0",
+    "typescript": "^5.2.2"
+  }
+}
diff --git a/uikit/postcss.config.js b/uikit/postcss.config.js
new file mode 100644
index 000000000..a65a35628
--- /dev/null
+++ b/uikit/postcss.config.js
@@ -0,0 +1,8 @@
+module.exports = {
+  plugins: {
+    "tailwindcss/nesting": {},
+    tailwindcss: {},
+    autoprefixer: {},
+    "postcss-import": {},
+  },
+};
diff --git a/uikit/src/avatar/index.tsx b/uikit/src/avatar/index.tsx
new file mode 100644
index 000000000..bdacbba4a
--- /dev/null
+++ b/uikit/src/avatar/index.tsx
@@ -0,0 +1,43 @@
+'use client'
+
+import { forwardRef, ElementRef, ComponentPropsWithoutRef } from 'react'
+import * as AvatarPrimitive from '@radix-ui/react-avatar'
+import { twMerge } from 'tailwind-merge'
+
+const Avatar = forwardRef<
+  ElementRef<typeof AvatarPrimitive.Root>,
+  ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={twMerge('avatar', className)}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = forwardRef<
+  ElementRef<typeof AvatarPrimitive.Image>,
+  ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={twMerge('avatar-image', className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = forwardRef<
+  ElementRef<typeof AvatarPrimitive.Fallback>,
+  ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={twMerge('avatar-fallback', className)}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }
diff --git a/uikit/src/avatar/styles.scss b/uikit/src/avatar/styles.scss
new file mode 100644
index 000000000..dacae26b5
--- /dev/null
+++ b/uikit/src/avatar/styles.scss
@@ -0,0 +1,11 @@
+.avatar {
+  @apply relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full;
+
+  &-image {
+    @apply aspect-square h-full w-full;
+  }
+
+  &-fallback {
+    @apply bg-muted flex h-full w-full items-center justify-center rounded-full font-bold uppercase;
+  }
+}
diff --git a/uikit/src/badge/index.tsx b/uikit/src/badge/index.tsx
new file mode 100644
index 000000000..a2eeaac2d
--- /dev/null
+++ b/uikit/src/badge/index.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { twMerge } from 'tailwind-merge'
+
+const badgeVariants = cva('badge', {
+  variants: {
+    themes: {
+      primary: 'badge-primary',
+      success: 'badge-success',
+      secondary: 'badge-secondary',
+      danger: 'badge-danger',
+      outline: 'badge-outline',
+    },
+  },
+  defaultVariants: {
+    themes: 'primary',
+  },
+})
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, themes, ...props }: BadgeProps) {
+  return (
+    <div className={twMerge(badgeVariants({ themes }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }
diff --git a/uikit/src/badge/styles.scss b/uikit/src/badge/styles.scss
new file mode 100644
index 000000000..e5a783d88
--- /dev/null
+++ b/uikit/src/badge/styles.scss
@@ -0,0 +1,23 @@
+.badge {
+  @apply focus:ring-ring border-border inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2;
+
+  &-primary {
+    @apply bg-primary text-primary-foreground hover:bg-primary/80 border-transparent;
+  }
+
+  &-success {
+    @apply border-transparent bg-green-500 text-green-900 hover:bg-green-500/80;
+  }
+
+  &-secondary {
+    @apply bg-secondary text-secondary-foreground hover:bg-secondary/80;
+  }
+
+  &-danger {
+    @apply bg-danger text-danger-foreground hover:bg-danger/80 border-transparent;
+  }
+
+  &-outline {
+    @apply text-foreground border-border border;
+  }
+}
diff --git a/uikit/src/button/index.tsx b/uikit/src/button/index.tsx
new file mode 100644
index 000000000..943e2bc34
--- /dev/null
+++ b/uikit/src/button/index.tsx
@@ -0,0 +1,98 @@
+'use client'
+
+import { forwardRef, ButtonHTMLAttributes } from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { twMerge } from 'tailwind-merge'
+
+const buttonVariants = cva('btn', {
+  variants: {
+    themes: {
+      primary: 'btn-primary',
+      danger: 'btn-danger',
+      outline: 'btn-outline',
+      secondary: 'btn-secondary',
+      ghost: 'btn-ghost',
+    },
+    size: {
+      sm: 'btn-sm',
+      md: 'btn-md',
+      lg: 'btn-lg',
+    },
+    block: {
+      true: 'w-full',
+    },
+    loading: {
+      true: 'btn-loading',
+    },
+  },
+  defaultVariants: {
+    themes: 'primary',
+    size: 'md',
+  },
+})
+
+export interface ButtonProps
+  extends ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      className,
+      themes,
+      size,
+      block,
+      loading,
+      asChild = false,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const Comp = asChild ? Slot : 'button'
+    return (
+      <Comp
+        className={twMerge(
+          buttonVariants({ themes, size, block, loading, className })
+        )}
+        ref={ref}
+        {...props}
+      >
+        {loading ? (
+          <>
+            <svg
+              aria-hidden="true"
+              role="status"
+              className="btn-loading-circle"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+            >
+              <circle
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                strokeWidth="4"
+              ></circle>
+              <path
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              ></path>
+            </svg>
+            {children}
+          </>
+        ) : (
+          children
+        )}
+      </Comp>
+    )
+  }
+)
+Button.displayName = 'Button'
+
+export { Button, buttonVariants }
diff --git a/uikit/src/button/styles.scss b/uikit/src/button/styles.scss
new file mode 100644
index 000000000..08b59537f
--- /dev/null
+++ b/uikit/src/button/styles.scss
@@ -0,0 +1,64 @@
+.btn {
+  @apply inline-flex items-center justify-center whitespace-nowrap rounded-md font-semibold transition-colors;
+  @apply focus-visible:ring-ring cursor-pointer focus-visible:outline-none focus-visible:ring-1;
+  @apply disabled:pointer-events-none disabled:opacity-50;
+
+  &-primary {
+    @apply bg-primary hover:bg-primary/90 text-white;
+  }
+
+  &-danger {
+    @apply bg-danger text-danger-foreground hover:bg-danger/90;
+  }
+
+  &-outline {
+    @apply border-input hover:bg-accent hover:text-accent-foreground border bg-transparent;
+  }
+
+  &-secondary {
+    @apply bg-secondary text-secondary-foreground hover:bg-secondary/80;
+  }
+
+  &-ghost {
+    @apply hover:bg-accent hover:text-accent-foreground;
+  }
+
+  &-sm {
+    @apply h-7 rounded-md px-3 text-xs;
+  }
+
+  &-md {
+    @apply h-9 px-4 py-2;
+  }
+
+  &-lg {
+    @apply h-10 rounded-md px-8;
+  }
+
+  &-loading {
+    @apply pointer-events-none opacity-50;
+    &-circle {
+      @apply mr-2 h-4 animate-spin opacity-50;
+      > circle {
+        opacity: 0.25;
+      }
+      > path {
+        opacity: 0.75;
+      }
+    }
+  }
+}
+
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  &.btn-primary {
+    @apply bg-primary hover:bg-primary/90;
+  }
+  &.btn-secondary {
+    @apply bg-secondary hover:bg-secondary/80;
+  }
+  &.btn-danger {
+    @apply bg-danger hover:bg-danger/90;
+  }
+}
diff --git a/uikit/src/command/index.tsx b/uikit/src/command/index.tsx
new file mode 100644
index 000000000..0d87d72c9
--- /dev/null
+++ b/uikit/src/command/index.tsx
@@ -0,0 +1,132 @@
+'use client'
+
+import * as React from 'react'
+import { DialogProps } from '@radix-ui/react-dialog'
+import { Command as CommandPrimitive } from 'cmdk'
+import { Search } from 'lucide-react'
+
+import { Modal, ModalContent } from '../modal'
+
+import { twMerge } from 'tailwind-merge'
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={twMerge('command', className)}
+    {...props}
+  />
+))
+Command.displayName = CommandPrimitive.displayName
+
+interface CommandModalProps extends DialogProps {}
+
+const CommandModal = ({ children, ...props }: CommandModalProps) => {
+  return (
+    <Modal {...props}>
+      <ModalContent className="command-modal-content">
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </ModalContent>
+    </Modal>
+  )
+}
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="command-input-wrapper" cmdk-input-wrapper="">
+    <Search className="command-search-icon" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={twMerge('command-input', className)}
+      {...props}
+    />
+  </div>
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={twMerge('command-list', className)}
+    {...props}
+  />
+))
+
+CommandList.displayName = CommandPrimitive.List.displayName
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty ref={ref} className="command-empty" {...props} />
+))
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={twMerge('command-group', className)}
+    {...props}
+  />
+))
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={twMerge('bg-border -mx-1 h-px', className)}
+    {...props}
+  />
+))
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={twMerge('command-list-item', className)}
+    {...props}
+  />
+))
+
+CommandItem.displayName = CommandPrimitive.Item.displayName
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return <span className={twMerge('command-sc', className)} {...props} />
+}
+CommandShortcut.displayName = 'CommandShortcut'
+
+export {
+  Command,
+  CommandModal,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}
diff --git a/uikit/src/command/styles.scss b/uikit/src/command/styles.scss
new file mode 100644
index 000000000..cbcbbf4d6
--- /dev/null
+++ b/uikit/src/command/styles.scss
@@ -0,0 +1,45 @@
+.command {
+  @apply bg-background/80 text-muted-foreground flex h-full w-full flex-col overflow-hidden rounded-md text-left;
+
+  &-modal-content {
+    @apply overflow-hidden p-0;
+    > .modal-close {
+      top: 12px;
+    }
+  }
+
+  &-input-wrapper {
+    @apply border-border flex items-center border-b px-3;
+  }
+
+  &-input {
+    @apply placeholder:text-muted-foreground flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50;
+  }
+
+  &-search-icon {
+    @apply mr-2 h-4 w-4 shrink-0 opacity-50;
+  }
+
+  &-list {
+    @apply max-h-[300px] overflow-y-auto overflow-x-hidden py-2;
+  }
+
+  &-list-item {
+    @apply text-foreground aria-selected:bg-accent relative flex cursor-pointer select-none items-center rounded-md px-2 py-2 text-sm outline-none;
+  }
+
+  &-empty {
+    @apply py-6 text-center text-sm;
+  }
+
+  &-group {
+    @apply text-muted-foreground overflow-hidden p-1 px-2 py-1.5 text-xs font-medium;
+    > [cmdk-group-heading] {
+      @apply mb-2 pl-2;
+    }
+  }
+
+  &-sc {
+    @apply text-muted-foreground ml-auto text-xs tracking-widest;
+  }
+}
diff --git a/uikit/src/form/index.tsx b/uikit/src/form/index.tsx
new file mode 100644
index 000000000..1a4abdb6d
--- /dev/null
+++ b/uikit/src/form/index.tsx
@@ -0,0 +1,175 @@
+import * as React from 'react'
+import * as LabelPrimitive from '@radix-ui/react-label'
+import { Slot } from '@radix-ui/react-slot'
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  FormProvider,
+  useFormContext,
+} from 'react-hook-form'
+import { twMerge } from 'tailwind-merge'
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState, formState } = useFormContext()
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error('useFormField should be used within <FormField>')
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={twMerge(className)} {...props} />
+    </FormItemContext.Provider>
+  )
+})
+FormItem.displayName = 'FormItem'
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <label
+      ref={ref}
+      className={twMerge('form-label', className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+})
+FormLabel.displayName = 'FormLabel'
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      className={error && 'form-input-error'}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+})
+FormControl.displayName = 'FormControl'
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={twMerge('form-description', className)}
+      {...props}
+    />
+  )
+})
+FormDescription.displayName = 'FormDescription'
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message) : children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={twMerge('form-message', className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+})
+FormMessage.displayName = 'FormMessage'
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}
diff --git a/uikit/src/form/styles.scss b/uikit/src/form/styles.scss
new file mode 100644
index 000000000..0e843f6b1
--- /dev/null
+++ b/uikit/src/form/styles.scss
@@ -0,0 +1,21 @@
+.form {
+  &-item {
+    @apply space-y-2;
+  }
+
+  &-input-error {
+    @apply border-danger;
+  }
+
+  &-label {
+    @apply mb-2 inline-block cursor-pointer font-medium;
+  }
+
+  &-description {
+    @apply text-muted-foreground text-xs;
+  }
+
+  &-message {
+    @apply text-danger mt-2 text-xs font-medium;
+  }
+}
diff --git a/uikit/src/index.ts b/uikit/src/index.ts
new file mode 100644
index 000000000..39f4e1352
--- /dev/null
+++ b/uikit/src/index.ts
@@ -0,0 +1,11 @@
+export * from './avatar'
+export * from './switch'
+export * from './button'
+export * from './scroll-area'
+export * from './form'
+export * from './input'
+export * from './progress'
+export * from './badge'
+export * from './tooltip'
+export * from './modal'
+export * from './command'
diff --git a/uikit/src/input/index.tsx b/uikit/src/input/index.tsx
new file mode 100644
index 000000000..8d90ab232
--- /dev/null
+++ b/uikit/src/input/index.tsx
@@ -0,0 +1,21 @@
+import { forwardRef } from 'react'
+import { twMerge } from 'tailwind-merge'
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={twMerge('input test', className)}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = 'Input'
+
+export { Input }
diff --git a/uikit/src/input/styles.scss b/uikit/src/input/styles.scss
new file mode 100644
index 000000000..76e6c0408
--- /dev/null
+++ b/uikit/src/input/styles.scss
@@ -0,0 +1,6 @@
+.input {
+  @apply border-border placeholder:text-muted-foreground flex h-9 w-full rounded-md border bg-transparent px-3 py-1 transition-colors;
+  @apply disabled:cursor-not-allowed disabled:opacity-50;
+  @apply focus-visible:ring-secondary focus-visible:outline-none focus-visible:ring-1;
+  @apply file:border-0 file:bg-transparent file:font-medium;
+}
diff --git a/uikit/src/main.scss b/uikit/src/main.scss
new file mode 100644
index 000000000..9fdca43e1
--- /dev/null
+++ b/uikit/src/main.scss
@@ -0,0 +1,116 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+
+@import './avatar/styles.scss';
+@import './switch/styles.scss';
+@import './button/styles.scss';
+@import './scroll-area/styles.scss';
+@import './form/styles.scss';
+@import './input/styles.scss';
+@import './progress/styles.scss';
+@import './badge/styles.scss';
+@import './tooltip/styles.scss';
+@import './modal/styles.scss';
+@import './command/styles.scss';
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+
+:root {
+  --background: 0 0% 100%;
+  --foreground: 20 14.3% 4.1%;
+
+  --muted: 60 4.8% 95.9%;
+  --muted-foreground: 240 3.8% 46.1%;
+
+  --accent: 60 4.8% 95.9%;
+  --accent-foreground: 24 9.8% 10%;
+
+  --danger: 346.8 77.2% 49.8%;
+  --danger-foreground: 355.7 100% 97.3%;
+
+  --border: 20 5.9% 90%;
+  --input: 20 5.9% 90%;
+  --ring: 20 14.3% 4.1%;
+
+  .primary-blue {
+    --primary: 221 83% 53%;
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 60 4.8% 95.9%;
+    --secondary-foreground: 24 9.8% 10%;
+  }
+
+  .primary-green {
+    --primary: 142.1 76.2% 36.3%;
+    --primary-foreground: 355.7 100% 97.3%;
+
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+  }
+
+  .primary-purple {
+    --primary: 262.1 83.3% 57.8%;
+    --primary-foreground: 210 20% 98%;
+
+    --secondary: 220 14.3% 95.9%;
+    --secondary-foreground: 220.9 39.3% 11%;
+  }
+}
+
+.dark {
+  --background: 20 14.3% 4.1%;
+  --foreground: 60 9.1% 97.8%;
+
+  --muted: 12 6.5% 15.1%;
+  --muted-foreground: 24 5.4% 63.9%;
+
+  --accent: 12 6.5% 15.1%;
+  --accent-foreground: 60 9.1% 97.8%;
+
+  --danger: 346.8 77.2% 49.8%;
+  --danger-foreground: 355.7 100% 97.3%;
+
+  --border: 12 6.5% 15.1%;
+  --input: 12 6.5% 15.1%;
+  --ring: 35.5 91.7% 32.9%;
+
+  .primary-blue {
+    --primary: 221 83% 53%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+
+    --secondary: 12 6.5% 15.1%;
+    --secondary-foreground: 60 9.1% 97.8%;
+  }
+
+  .primary-green {
+    --primary: 142.1 70.6% 45.3%;
+    --primary-foreground: 144.9 80.4% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+  }
+
+  .primary-purple {
+    --primary: 263.4 70% 50.4%;
+    --primary-foreground: 210 20% 98%;
+
+    --secondary: 215 27.9% 16.9%;
+    --secondary-foreground: 210 20% 98%;
+  }
+}
+
+:is(p) {
+  @apply text-muted-foreground;
+}
diff --git a/uikit/src/modal/index.tsx b/uikit/src/modal/index.tsx
new file mode 100644
index 000000000..c41909843
--- /dev/null
+++ b/uikit/src/modal/index.tsx
@@ -0,0 +1,99 @@
+'use client'
+
+import * as React from 'react'
+import * as ModalPrimitive from '@radix-ui/react-dialog'
+import { X } from 'lucide-react'
+import { twMerge } from 'tailwind-merge'
+
+const Modal = ModalPrimitive.Root
+
+const ModalTrigger = ModalPrimitive.Trigger
+
+const ModalPortal = ModalPrimitive.Portal
+
+const ModalClose = ModalPrimitive.Close
+
+const ModalOverlay = React.forwardRef<
+  React.ElementRef<typeof ModalPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof ModalPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <ModalPrimitive.Overlay
+    ref={ref}
+    className={twMerge(' modal-backdrop', className)}
+    {...props}
+  />
+))
+ModalOverlay.displayName = ModalPrimitive.Overlay.displayName
+
+const ModalContent = React.forwardRef<
+  React.ElementRef<typeof ModalPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof ModalPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <ModalPortal>
+    <ModalOverlay />
+    <ModalPrimitive.Content
+      ref={ref}
+      className={twMerge(' modal-content', className)}
+      {...props}
+    >
+      {children}
+      <ModalPrimitive.Close className="modal-close">
+        <X size={20} />
+      </ModalPrimitive.Close>
+    </ModalPrimitive.Content>
+  </ModalPortal>
+))
+ModalContent.displayName = ModalPrimitive.Content.displayName
+
+const ModalHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={twMerge('modal-header', className)} {...props} />
+)
+ModalHeader.displayName = 'ModalHeader'
+
+const ModalFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={twMerge('modal-footer', className)} {...props} />
+)
+ModalFooter.displayName = 'ModalFooter'
+
+const ModalTitle = React.forwardRef<
+  React.ElementRef<typeof ModalPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof ModalPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <ModalPrimitive.Title
+    ref={ref}
+    className={twMerge('modal-title', className)}
+    {...props}
+  />
+))
+ModalTitle.displayName = ModalPrimitive.Title.displayName
+
+const ModalDescription = React.forwardRef<
+  React.ElementRef<typeof ModalPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof ModalPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <ModalPrimitive.Description
+    ref={ref}
+    className={twMerge('modal-description', className)}
+    {...props}
+  />
+))
+ModalDescription.displayName = ModalPrimitive.Description.displayName
+
+export {
+  Modal,
+  ModalPortal,
+  ModalOverlay,
+  ModalClose,
+  ModalTrigger,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalTitle,
+  ModalDescription,
+}
diff --git a/uikit/src/modal/styles.scss b/uikit/src/modal/styles.scss
new file mode 100644
index 000000000..ee2699902
--- /dev/null
+++ b/uikit/src/modal/styles.scss
@@ -0,0 +1,32 @@
+.modal {
+  &-backdrop {
+    @apply bg-background/80 fixed inset-0 z-50 backdrop-blur-sm;
+  }
+
+  &-content {
+    @apply bg-background border-border fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-4 shadow-lg duration-200 sm:rounded-lg md:w-full;
+  }
+
+  &-close {
+    @apply absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none;
+    > svg {
+      @apply text-muted-foreground;
+    }
+  }
+
+  &-header {
+    @apply flex flex-col space-y-1.5 text-center sm:text-left;
+  }
+
+  &-footer {
+    @apply flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2;
+  }
+
+  &-title {
+    @apply text-lg font-semibold leading-none tracking-tight;
+  }
+
+  &-description {
+    @apply text-muted-foreground text-sm;
+  }
+}
diff --git a/uikit/src/progress/index.tsx b/uikit/src/progress/index.tsx
new file mode 100644
index 000000000..6ca6fc0b7
--- /dev/null
+++ b/uikit/src/progress/index.tsx
@@ -0,0 +1,24 @@
+'use client'
+
+import * as React from 'react'
+import * as ProgressPrimitive from '@radix-ui/react-progress'
+import { twMerge } from 'tailwind-merge'
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={twMerge('progress', className)}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="progress-indicator"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress }
diff --git a/uikit/src/progress/styles.scss b/uikit/src/progress/styles.scss
new file mode 100644
index 000000000..0b7078f48
--- /dev/null
+++ b/uikit/src/progress/styles.scss
@@ -0,0 +1,7 @@
+.progress {
+  @apply bg-secondary relative h-4 w-full overflow-hidden rounded-full;
+
+  &-indicator {
+    @apply bg-primary h-full w-full flex-1 transition-all;
+  }
+}
diff --git a/uikit/src/scroll-area/index.tsx b/uikit/src/scroll-area/index.tsx
new file mode 100644
index 000000000..739d6438a
--- /dev/null
+++ b/uikit/src/scroll-area/index.tsx
@@ -0,0 +1,51 @@
+'use client'
+
+import { forwardRef, ElementRef, ComponentPropsWithoutRef } from 'react'
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'
+
+import { twMerge } from 'tailwind-merge'
+
+const ScrollArea = forwardRef<
+  ElementRef<typeof ScrollAreaPrimitive.Root>,
+  ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={twMerge('scroll-area', className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="scroll-area-viewport">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = forwardRef<
+  ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = 'vertical', ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={twMerge(
+      'scroll-bar',
+      orientation === 'vertical' && 'scroll-bar-vertical',
+      orientation === 'horizontal' && 'scroll-bar-vertical ',
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb
+      className={twMerge(
+        'scroll-bar-thumb',
+        orientation === 'vertical' && 'flex-1'
+      )}
+    />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }
diff --git a/uikit/src/scroll-area/styles.scss b/uikit/src/scroll-area/styles.scss
new file mode 100644
index 000000000..a6e1caf3a
--- /dev/null
+++ b/uikit/src/scroll-area/styles.scss
@@ -0,0 +1,23 @@
+.scroll-area {
+  @apply relative overflow-hidden;
+
+  &-viewport {
+    @apply h-full w-full rounded-[inherit];
+  }
+}
+
+.scroll-bar {
+  @apply flex touch-none select-none transition-colors;
+
+  &-vertical {
+    @apply h-full w-2.5 border-l  border-l-transparent  p-[1px];
+  }
+
+  &-horizontal {
+    @apply h-2.5 flex-col border-t border-t-transparent p-[1px];
+  }
+
+  &-thumb {
+    @apply bg-border relative z-50 w-[10px] rounded-full;
+  }
+}
diff --git a/uikit/src/switch/index.tsx b/uikit/src/switch/index.tsx
new file mode 100644
index 000000000..f0f7c1eb8
--- /dev/null
+++ b/uikit/src/switch/index.tsx
@@ -0,0 +1,22 @@
+'use client'
+
+import * as SwitchPrimitives from '@radix-ui/react-switch'
+
+import { twMerge } from 'tailwind-merge'
+import { forwardRef, ElementRef, ComponentPropsWithoutRef } from 'react'
+
+const Switch = forwardRef<
+  ElementRef<typeof SwitchPrimitives.Root>,
+  ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={twMerge('switch peer', className)}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb className={twMerge('switch-toggle')} />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }
diff --git a/uikit/src/switch/styles.scss b/uikit/src/switch/styles.scss
new file mode 100644
index 000000000..c8a12cdf5
--- /dev/null
+++ b/uikit/src/switch/styles.scss
@@ -0,0 +1,10 @@
+.switch {
+  @apply inline-flex h-[20px] w-[36px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent;
+  @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2;
+  @apply data-[state=checked]:bg-primary data-[state=unchecked]:bg-input;
+  @apply disabled:cursor-not-allowed disabled:opacity-50;
+
+  &-toggle {
+    @apply bg-background pointer-events-none block h-4 w-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0;
+  }
+}
diff --git a/uikit/src/tooltip/index.tsx b/uikit/src/tooltip/index.tsx
new file mode 100644
index 000000000..73c0e1e0b
--- /dev/null
+++ b/uikit/src/tooltip/index.tsx
@@ -0,0 +1,40 @@
+'use client'
+
+import * as React from 'react'
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+import { twMerge } from 'tailwind-merge'
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={twMerge('tooltip', className)}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+const TooltipArrow = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className }, ref) => (
+  <TooltipPrimitive.Arrow className={twMerge('tooltip-arrow', className)} />
+))
+TooltipArrow.displayName = TooltipPrimitive.Arrow.displayName
+
+export {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipProvider,
+  TooltipArrow,
+}
diff --git a/uikit/src/tooltip/styles.scss b/uikit/src/tooltip/styles.scss
new file mode 100644
index 000000000..8ae645cee
--- /dev/null
+++ b/uikit/src/tooltip/styles.scss
@@ -0,0 +1,6 @@
+.tooltip {
+  @apply dark:bg-input dark:text-foreground z-50 overflow-hidden rounded-md bg-gray-950 px-2 py-1.5 text-xs font-medium text-gray-200 shadow-md;
+  &-arrow {
+    @apply dark:fill-input fill-gray-950;
+  }
+}
diff --git a/uikit/tailwind.config.js b/uikit/tailwind.config.js
new file mode 100644
index 000000000..ce54cb33a
--- /dev/null
+++ b/uikit/tailwind.config.js
@@ -0,0 +1,32 @@
+module.exports = {
+  content: ['./src/**/*.{js,jsx,ts,tsx,scss,css}'],
+  extend: {
+    colors: {
+      'background': 'hsl(var(--background))',
+      'foreground': 'hsl(var(--foreground))',
+
+      'card': 'hsl(var(--card))',
+      'card-foreground': 'hsl(var(--card-foreground))',
+
+      'primary': 'hsl(var(--primary))',
+      'primary-foreground': 'hsl(var(--primary-foreground))',
+
+      'secondary': 'hsl(var(--secondary))',
+      'secondary-foreground': 'hsl(var(--secondary-foreground))',
+
+      'muted': 'hsl(var(--muted))',
+      'muted-foreground': 'hsl(var(--muted-foreground))',
+
+      'accent': 'hsl(var(--accent))',
+      'accent-foreground': 'hsl(var(--accent-foreground))',
+
+      'danger': 'hsl(var(--danger))',
+      'danger-foreground': 'hsl(var(--danger-foreground))',
+
+      'border': 'hsl(var(--border))',
+      'input': 'hsl(var(--input))',
+      'ring': 'hsl(var(--ring))',
+    },
+  },
+  plugins: [],
+}
diff --git a/uikit/tsconfig.json b/uikit/tsconfig.json
new file mode 100644
index 000000000..03a7a83bc
--- /dev/null
+++ b/uikit/tsconfig.json
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "React Library",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "lib": ["dom", "ES2015"],
+    "module": "ESNext",
+    "target": "es6",
+    "composite": false,
+    "declaration": true,
+    "declarationMap": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "inlineSources": false,
+    "isolatedModules": true,
+    "moduleResolution": "node",
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "preserveWatchOutput": true,
+    "skipLibCheck": true,
+    "strict": true
+  },
+  "exclude": ["node_modules"]
+}
diff --git a/uikit/types/declaration.d.ts b/uikit/types/declaration.d.ts
new file mode 100644
index 000000000..85b1a7136
--- /dev/null
+++ b/uikit/types/declaration.d.ts
@@ -0,0 +1,4 @@
+declare module '*.scss' {
+  const content: Record<string, string>;
+  export default content;
+}
\ No newline at end of file
diff --git a/web/.eslintrc.js b/web/.eslintrc.js
new file mode 100644
index 000000000..79b32be07
--- /dev/null
+++ b/web/.eslintrc.js
@@ -0,0 +1,144 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint', 'react', 'react-hooks'],
+  ignorePatterns: [
+    'build',
+    'dist',
+    'node_modules',
+    'renderer',
+    '.next',
+    '_next',
+    '*.md',
+    'out',
+  ],
+  extends: [
+    'next/core-web-vitals',
+    'eslint:recommended',
+    'plugin:import/typescript',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react/recommended',
+    'prettier',
+    'plugin:prettier/recommended',
+    'eslint-config-next/core-web-vitals',
+  ],
+  globals: {
+    React: true,
+    JSX: true,
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  rules: {
+    '@next/next/no-server-import-in-page': 'off',
+
+    '@typescript-eslint/naming-convention': [
+      'error',
+      {
+        selector: 'default',
+        format: ['camelCase', 'PascalCase'],
+      },
+      {
+        selector: 'variableLike',
+        format: ['camelCase', 'PascalCase', 'UPPER_CASE'],
+        leadingUnderscore: 'allow',
+      },
+      {
+        selector: 'property',
+        format: ['camelCase', 'snake_case', 'PascalCase', 'UPPER_CASE'],
+      },
+      {
+        selector: 'memberLike',
+        format: ['camelCase', 'PascalCase'],
+      },
+      {
+        selector: 'typeLike',
+        format: ['PascalCase'],
+      },
+    ],
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@next/next/no-img-element': 'off',
+    '@next/next/no-html-link-for-pages': 'off',
+    'react/display-name': 'off',
+    'react-hooks/rules-of-hooks': 'error',
+    '@typescript-eslint/no-unused-vars': ['warn'],
+    'import/order': [
+      'error',
+      {
+        'alphabetize': { order: 'asc' },
+        'groups': ['builtin', 'external', 'parent', 'sibling', 'index'],
+        'pathGroups': [
+          {
+            pattern: 'react*',
+            group: 'external',
+            position: 'before',
+          },
+          {
+            pattern: 'next*',
+            group: 'external',
+            position: 'before',
+          },
+          {
+            pattern: 'next/*',
+            group: 'external',
+            position: 'before',
+          },
+          {
+            pattern: '@/assets/**',
+            group: 'parent',
+            position: 'before',
+          },
+          {
+            pattern: '@/components/**',
+            group: 'parent',
+            position: 'before',
+          },
+          {
+            pattern: '@/containers/**',
+            group: 'parent',
+            position: 'before',
+          },
+          {
+            pattern: '@/context/**',
+            group: 'parent',
+            position: 'before',
+          },
+          {
+            pattern: '@/constants/**',
+            group: 'parent',
+            position: 'before',
+          },
+          {
+            pattern: '@/hooks/**',
+            group: 'parent',
+            position: 'before',
+          },
+          {
+            pattern: '@/services/**',
+            group: 'parent',
+            position: 'before',
+          },
+          {
+            pattern: '@/screens/**',
+            group: 'parent',
+            position: 'before',
+          },
+          {
+            pattern: '@/utils/**',
+            group: 'parent',
+            position: 'before',
+          },
+          {
+            pattern: '@/styles/**',
+            group: 'parent',
+            position: 'before',
+          },
+        ],
+        'pathGroupsExcludedImportTypes': ['react'],
+        'newlines-between': 'always-and-inside-groups',
+      },
+    ],
+  },
+}
diff --git a/web/.eslintrc.json b/web/.eslintrc.json
deleted file mode 100644
index f0f3abee4..000000000
--- a/web/.eslintrc.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "extends": "next/core-web-vitals",
-  "rules": {
-    "@next/next/no-img-element": "off"
-  }
-}
diff --git a/web/.prettierrc b/web/.prettierrc
index 933d88d62..46f1abcb0 100644
--- a/web/.prettierrc
+++ b/web/.prettierrc
@@ -3,6 +3,6 @@
   "singleQuote": true,
   "quoteProps": "consistent",
   "trailingComma": "es5",
-  "endOfLine": "lf",
+  "endOfLine": "auto",
   "plugins": ["prettier-plugin-tailwindcss"]
 }
diff --git a/web/app/_components/ActiveModelTable/index.tsx b/web/app/_components/ActiveModelTable/index.tsx
deleted file mode 100644
index 1fa6c0bd5..000000000
--- a/web/app/_components/ActiveModelTable/index.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { useAtomValue } from 'jotai'
-import React from 'react'
-import ModelTable from '../ModelTable'
-import { activeModelAtom } from '@helpers/atoms/Model.atom'
-
-const ActiveModelTable: React.FC = () => {
-  const activeModel = useAtomValue(activeModelAtom)
-
-  if (!activeModel) return null
-
-  return (
-    <div className="pl-[63px] pr-[89px]">
-      <h3 className="mb-[13px] text-xl leading-[25px]">Active Model(s)</h3>
-      <ModelTable models={[activeModel]} />
-    </div>
-  )
-}
-
-export default ActiveModelTable
diff --git a/web/app/_components/AvailableModelCard/index.tsx b/web/app/_components/AvailableModelCard/index.tsx
deleted file mode 100644
index 792b712a0..000000000
--- a/web/app/_components/AvailableModelCard/index.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import DownloadModelContent from '../DownloadModelContent'
-import ModelDownloadButton from '../ModelDownloadButton'
-import ModelDownloadingButton from '../ModelDownloadingButton'
-import { useAtomValue } from 'jotai'
-import { modelDownloadStateAtom } from '@helpers/atoms/DownloadState.atom'
-import { Model } from '@janhq/core/lib/types'
-
-type Props = {
-  model: Model
-  isRecommend: boolean
-  required?: string
-  onDownloadClick?: (model: Model) => void
-}
-
-const AvailableModelCard: React.FC<Props> = ({
-  model,
-  isRecommend,
-  required,
-  onDownloadClick,
-}) => {
-  const downloadState = useAtomValue(modelDownloadStateAtom)
-
-  let isDownloading = false
-  let total = 0
-  let transferred = 0
-
-  if (model._id && downloadState[model._id]) {
-    isDownloading =
-      downloadState[model._id].error == null &&
-      downloadState[model._id].percent < 1
-
-    if (isDownloading) {
-      total = downloadState[model._id].size.total
-      transferred = downloadState[model._id].size.transferred
-    }
-  }
-
-  const downloadButton = isDownloading ? (
-    <div className="flex w-1/5 items-start justify-end">
-      <ModelDownloadingButton total={total} value={transferred} />
-    </div>
-  ) : (
-    <div className="flex w-1/5 items-center justify-end">
-      <ModelDownloadButton callback={() => onDownloadClick?.(model)} />
-    </div>
-  )
-
-  return (
-    <div className="rounded-lg border border-gray-200">
-      <div className="flex justify-between gap-2.5 px-3 py-4">
-        <DownloadModelContent
-          required={required}
-          author={model.author}
-          description={model.shortDescription}
-          isRecommend={isRecommend}
-          name={model.name}
-          type={'LLM'}
-        />
-        {downloadButton}
-      </div>
-      {/* <ViewModelDetailButton callback={handleViewDetails} /> */}
-    </div>
-  )
-}
-
-export default AvailableModelCard
diff --git a/web/app/_components/Avatar/index.tsx b/web/app/_components/Avatar/index.tsx
deleted file mode 100644
index 51e5e1d59..000000000
--- a/web/app/_components/Avatar/index.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react'
-import SecondaryButton from '../SecondaryButton'
-
-type Props = {
-  allowEdit?: boolean
-}
-
-const Avatar: React.FC<Props> = ({ allowEdit = false }) => (
-  <div className="mx-auto flex flex-col gap-5">
-    <span className="mx-auto inline-block h-10 w-10 overflow-hidden rounded-full bg-gray-100">
-      <svg
-        className="mx-auto h-full w-full text-gray-300"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-      >
-        <path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
-      </svg>
-    </span>
-    {allowEdit ?? <SecondaryButton title={'Edit picture'} />}
-  </div>
-)
-
-export default Avatar
diff --git a/web/app/_components/BasicPromptButton/index.tsx b/web/app/_components/BasicPromptButton/index.tsx
deleted file mode 100644
index 3e9bd0ec8..000000000
--- a/web/app/_components/BasicPromptButton/index.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react'
-import { useSetAtom } from 'jotai'
-import { ChevronLeftIcon } from '@heroicons/react/24/outline'
-import { showingAdvancedPromptAtom } from '@helpers/atoms/Modal.atom'
-
-const BasicPromptButton: React.FC = () => {
-  const setShowingAdvancedPrompt = useSetAtom(showingAdvancedPromptAtom)
-
-  return (
-    <button
-      onClick={() => setShowingAdvancedPrompt(false)}
-      className="mx-2 mb-[10px] mt-3 flex flex-none items-center gap-1 text-xs leading-[18px] text-[#6B7280]"
-    >
-      <ChevronLeftIcon width={20} height={20} />
-      <span className="text-xs font-semibold text-gray-500">BASIC PROMPT</span>
-    </button>
-  )
-}
-
-export default React.memo(BasicPromptButton)
diff --git a/web/app/_components/BotInfo/index.tsx b/web/app/_components/BotInfo/index.tsx
deleted file mode 100644
index 407e3cf7c..000000000
--- a/web/app/_components/BotInfo/index.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { activeBotAtom } from '@helpers/atoms/Bot.atom'
-import {
-  MainViewState,
-  setMainViewStateAtom,
-} from '@helpers/atoms/MainView.atom'
-import useCreateConversation from '@hooks/useCreateConversation'
-import useDeleteBot from '@hooks/useDeleteBot'
-import { useAtomValue, useSetAtom } from 'jotai'
-import React from 'react'
-import PrimaryButton from '../PrimaryButton'
-import ExpandableHeader from '../ExpandableHeader'
-
-const BotInfo: React.FC = () => {
-  const { deleteBot } = useDeleteBot()
-  const { createConvoByBot } = useCreateConversation()
-  const setMainView = useSetAtom(setMainViewStateAtom)
-  const botInfo = useAtomValue(activeBotAtom)
-  if (!botInfo) return null
-
-  const onNewChatClicked = () => {
-    if (!botInfo) {
-      alert('No bot selected')
-      return
-    }
-
-    createConvoByBot(botInfo)
-  }
-
-  const onDeleteBotClick = async () => {
-    // TODO: display confirmation diaglog
-    const result = await deleteBot(botInfo._id)
-    if (result === 'success') {
-      setMainView(MainViewState.Welcome)
-    }
-  }
-
-  return (
-    <div className="mx-1 my-1 flex flex-col gap-2">
-      <ExpandableHeader title="BOT INFO" />
-
-      <div className="flex flex-col">
-        <label className="mb-2">{botInfo.name}</label>
-        <span className="text-muted-foreground">{botInfo.description}</span>
-      </div>
-
-      <div className="flex w-full flex-col space-y-2">
-        <PrimaryButton onClick={onNewChatClicked} title="New chat" />
-        <PrimaryButton
-          title="Delete bot"
-          onClick={onDeleteBotClick}
-          className="bg-red-500 hover:bg-red-400"
-        />
-      </div>
-    </div>
-  )
-}
-
-export default BotInfo
diff --git a/web/app/_components/BotInfoContainer/index.tsx b/web/app/_components/BotInfoContainer/index.tsx
deleted file mode 100644
index d6a6784c7..000000000
--- a/web/app/_components/BotInfoContainer/index.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { activeBotAtom } from '@helpers/atoms/Bot.atom'
-import { useAtomValue, useSetAtom } from 'jotai'
-import React from 'react'
-import Avatar from '../Avatar'
-import PrimaryButton from '../PrimaryButton'
-import useCreateConversation from '@hooks/useCreateConversation'
-import useDeleteBot from '@hooks/useDeleteBot'
-import {
-  setMainViewStateAtom,
-  MainViewState,
-} from '@helpers/atoms/MainView.atom'
-
-const BotInfoContainer: React.FC = () => {
-  const activeBot = useAtomValue(activeBotAtom)
-  const setMainView = useSetAtom(setMainViewStateAtom)
-  const { deleteBot } = useDeleteBot()
-  const { createConvoByBot } = useCreateConversation()
-
-  const onNewChatClicked = () => {
-    if (!activeBot) {
-      alert('No bot selected')
-      return
-    }
-
-    createConvoByBot(activeBot)
-  }
-
-  const onDeleteBotClick = async () => {
-    if (!activeBot) {
-      alert('No bot selected')
-      return
-    }
-
-    // TODO: display confirmation diaglog
-    const result = await deleteBot(activeBot._id)
-    if (result === 'success') {
-      setMainView(MainViewState.Welcome)
-    }
-  }
-
-  if (!activeBot) return null
-
-  return (
-    <div className="flex h-full w-full pt-4">
-      <div className="mx-auto flex w-[672px] min-w-max flex-col gap-4">
-        <Avatar />
-        <h1 className="text-center text-2xl font-bold">{activeBot?.name}</h1>
-        <div className="flex gap-4">
-          <PrimaryButton
-            fullWidth
-            title="New chat"
-            onClick={onNewChatClicked}
-          />
-          <PrimaryButton
-            fullWidth
-            className="bg-red-500 hover:bg-red-400"
-            title="Delete bot"
-            onClick={onDeleteBotClick}
-          />
-        </div>
-        <p>{activeBot?.description}</p>
-        <p>System prompt</p>
-        <p>{activeBot?.systemPrompt}</p>
-      </div>
-    </div>
-  )
-}
-
-export default BotInfoContainer
diff --git a/web/app/_components/BotListContainer/index.tsx b/web/app/_components/BotListContainer/index.tsx
deleted file mode 100644
index c5e99aab0..000000000
--- a/web/app/_components/BotListContainer/index.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { activeBotAtom } from '@helpers/atoms/Bot.atom'
-import { showingBotListModalAtom } from '@helpers/atoms/Modal.atom'
-import useGetBots from '@hooks/useGetBots'
-import { useAtom, useSetAtom } from 'jotai'
-import { rightSideBarExpandStateAtom } from '@helpers/atoms/SideBarExpand.atom'
-import React, { useEffect, useState } from 'react'
-import Avatar from '../Avatar'
-import {
-  MainViewState,
-  setMainViewStateAtom,
-} from '@helpers/atoms/MainView.atom'
-
-const BotListContainer: React.FC = () => {
-  const [open, setOpen] = useAtom(showingBotListModalAtom)
-  const setMainView = useSetAtom(setMainViewStateAtom)
-  const [activeBot, setActiveBot] = useAtom(activeBotAtom)
-  const [bots, setBots] = useState<Bot[]>([])
-  const { getAllBots } = useGetBots()
-  const setRightSideBarVisibility = useSetAtom(rightSideBarExpandStateAtom)
-
-  useEffect(() => {
-    if (open) {
-      getAllBots().then((res) => {
-        setBots(res)
-      })
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open])
-
-  const onBotSelected = (bot: Bot) => {
-    if (bot._id !== activeBot?._id) {
-      setMainView(MainViewState.BotInfo)
-      setActiveBot(bot)
-      setRightSideBarVisibility(true)
-    }
-    setOpen(false)
-  }
-
-  return (
-    <div className="bg-background/50 border-border overflow-hidden border sm:rounded-md">
-      <ul role="list" className="divide-y divide-gray-200">
-        {bots.map((bot, i) => (
-          <li
-            role="button"
-            key={i}
-            className="flex items-center gap-4 p-4 hover:bg-hover-light sm:px-6"
-            onClick={() => onBotSelected(bot)}
-          >
-            <Avatar />
-            <div className="flex flex-1 flex-col">
-              <p className="line-clamp-1">{bot.name}</p>
-              <p className="text-muted-foreground mt-1 line-clamp-1 text-ellipsis">
-                {bot._id}
-              </p>
-            </div>
-          </li>
-        ))}
-      </ul>
-    </div>
-  )
-}
-
-export default BotListContainer
diff --git a/web/app/_components/BotListModal/index.tsx b/web/app/_components/BotListModal/index.tsx
deleted file mode 100644
index 6ece6090d..000000000
--- a/web/app/_components/BotListModal/index.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { showingBotListModalAtom } from '@helpers/atoms/Modal.atom'
-import { Dialog, Transition } from '@headlessui/react'
-import { useAtom } from 'jotai'
-import React, { Fragment } from 'react'
-import BotListContainer from '../BotListContainer'
-
-const BotListModal: React.FC = () => {
-  const [open, setOpen] = useAtom(showingBotListModalAtom)
-
-  return (
-    <Transition.Root show={open} as={Fragment}>
-      <Dialog as="div" className="relative z-10" onClose={setOpen}>
-        <Transition.Child
-          as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 z-40 h-full bg-gray-950/90 transition-opacity dark:backdrop-blur-sm" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-50 w-screen overflow-y-auto">
-          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="border-border bg-background/90 relative transform overflow-hidden rounded-lg border px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
-                <h1 className="mb-4 font-bold">Your bots</h1>
-                <BotListContainer />
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  )
-}
-
-export default BotListModal
diff --git a/web/app/_components/BotPreview/index.tsx b/web/app/_components/BotPreview/index.tsx
deleted file mode 100644
index deafad2ea..000000000
--- a/web/app/_components/BotPreview/index.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import Image from 'next/image'
-
-const BotPreview: React.FC = () => {
-  return (
-    <div className="flex min-h-[235px] flex-col gap-2 overflow-hidden rounded-lg border border-gray-400 pb-2">
-      <div className="flex items-center justify-center bg-gray-400 p-2">
-        <Image
-          className="rounded-md"
-          src={
-            'https://i.pinimg.com/564x/52/b1/6f/52b16f96f52221d48bea716795ccc89a.jpg'
-          }
-          width={32}
-          height={32}
-          alt=""
-        />
-      </div>
-      <div className="flex items-center gap-1 px-1 text-xs text-gray-400">
-        <div className="mx-1 flex-grow border-b border-gray-400"></div>
-        Context cleared
-        <div className="mx-1 flex-grow border-b border-gray-400"></div>
-      </div>
-    </div>
-  )
-}
-
-export default BotPreview
diff --git a/web/app/_components/BotSetting/index.tsx b/web/app/_components/BotSetting/index.tsx
deleted file mode 100644
index ca46521e0..000000000
--- a/web/app/_components/BotSetting/index.tsx
+++ /dev/null
@@ -1,169 +0,0 @@
-import { activeBotAtom } from '@helpers/atoms/Bot.atom'
-import { useAtomValue } from 'jotai'
-import React, { useState } from 'react'
-import ExpandableHeader from '../ExpandableHeader'
-import { useDebouncedCallback } from 'use-debounce'
-import useUpdateBot from '@hooks/useUpdateBot'
-import { formatTwoDigits } from '@utils/converter'
-
-const delayBeforeUpdateInMs = 1000
-
-const BotSetting: React.FC = () => {
-  const activeBot = useAtomValue(activeBotAtom)
-  const [temperature, setTemperature] = useState(
-    activeBot?.customTemperature ?? 0
-  )
-
-  const [maxTokens, setMaxTokens] = useState(activeBot?.maxTokens ?? 0)
-  const [frequencyPenalty, setFrequencyPenalty] = useState(
-    activeBot?.frequencyPenalty ?? 0
-  )
-  const [presencePenalty, setPresencePenalty] = useState(
-    activeBot?.presencePenalty ?? 0
-  )
-
-  const { updateBot } = useUpdateBot()
-
-  const debouncedTemperature = useDebouncedCallback((value) => {
-    if (!activeBot) return
-    if (activeBot.customTemperature === value) return
-    updateBot(activeBot, { customTemperature: value })
-  }, delayBeforeUpdateInMs)
-
-  const debouncedMaxToken = useDebouncedCallback((value) => {
-    if (!activeBot) return
-    if (activeBot.maxTokens === value) return
-    updateBot(activeBot, { maxTokens: value })
-  }, delayBeforeUpdateInMs)
-
-  const debouncedFreqPenalty = useDebouncedCallback((value) => {
-    if (!activeBot) return
-    if (activeBot.frequencyPenalty === value) return
-    updateBot(activeBot, { frequencyPenalty: value })
-  }, delayBeforeUpdateInMs)
-
-  const debouncedPresencePenalty = useDebouncedCallback((value) => {
-    if (!activeBot) return
-    if (activeBot.presencePenalty === value) return
-    updateBot(activeBot, { presencePenalty: value })
-  }, delayBeforeUpdateInMs)
-
-  const debouncedSystemPrompt = useDebouncedCallback((value) => {
-    if (!activeBot) return
-    if (activeBot.systemPrompt === value) return
-    updateBot(activeBot, { systemPrompt: value })
-  }, delayBeforeUpdateInMs)
-
-  if (!activeBot) return null
-
-  return (
-    <div className="my-3 flex flex-col">
-      <ExpandableHeader title="BOT SETTINGS" />
-      <div className="mx-2 mt-3 flex flex-shrink-0 flex-col gap-4">
-        {/* System prompt */}
-        <div>
-          <label htmlFor="comment" className="block">
-            System prompt
-          </label>
-          <div className="mt-1">
-            <textarea
-              rows={4}
-              name="comment"
-              id="comment"
-              className="bg-background/80 text-background-reverse ring-border placeholder:text-muted-foreground focus:ring-accent/50 block w-full resize-none rounded-md border-0 py-1.5 text-xs leading-relaxed shadow-sm ring-1 ring-inset focus:ring-2 focus:ring-inset"
-              defaultValue={activeBot.systemPrompt}
-              onChange={(e) => debouncedSystemPrompt(e.target.value)}
-            />
-          </div>
-        </div>
-
-        {/* TODO: clean up this code */}
-        {/* Max temp */}
-        <p>Max tokens</p>
-        <div className="mt-2 flex items-center gap-2">
-          <input
-            className="flex-1"
-            type="range"
-            defaultValue={activeBot.maxTokens ?? 0}
-            min={0}
-            max={4096}
-            step={1}
-            onChange={(e) => {
-              const value = Number(e.target.value)
-              setMaxTokens(value)
-              debouncedMaxToken(value)
-            }}
-          />
-          <span className="border-accent rounded-md border px-2 py-1">
-            {formatTwoDigits(maxTokens)}
-          </span>
-        </div>
-
-        <p>Frequency penalty</p>
-        <div className="mt-2 flex items-center gap-2">
-          <input
-            className="flex-1"
-            type="range"
-            defaultValue={activeBot.frequencyPenalty ?? 0}
-            min={0}
-            max={1}
-            step={0.01}
-            onChange={(e) => {
-              const value = Number(e.target.value)
-              setFrequencyPenalty(value)
-              debouncedFreqPenalty(value)
-            }}
-          />
-          <span className="border-accent rounded-md border px-2 py-1">
-            {formatTwoDigits(frequencyPenalty)}
-          </span>
-        </div>
-
-        <p>Presence penalty</p>
-        <div className="mt-2 flex items-center gap-2">
-          <input
-            className="flex-1"
-            type="range"
-            defaultValue={activeBot.maxTokens ?? 0}
-            min={0}
-            max={1}
-            step={0.01}
-            onChange={(e) => {
-              const value = Number(e.target.value)
-              setPresencePenalty(value)
-              debouncedPresencePenalty(value)
-            }}
-          />
-          <span className="border-accent rounded-md border px-2 py-1">
-            {formatTwoDigits(presencePenalty)}
-          </span>
-        </div>
-
-        {/* Custom temp */}
-        <p>Temperature</p>
-        <div className="mt-2 flex items-center gap-2">
-          <input
-            className="flex-1"
-            type="range"
-            id="volume"
-            name="volume"
-            defaultValue={activeBot.customTemperature ?? 0}
-            min="0"
-            max="1"
-            step="0.01"
-            onChange={(e) => {
-              const newTemp = Number(e.target.value)
-              setTemperature(newTemp)
-              debouncedTemperature(Number(e.target.value))
-            }}
-          />
-          <span className="border-accent rounded-md border px-2 py-1">
-            {formatTwoDigits(temperature)}
-          </span>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default BotSetting
diff --git a/web/app/_components/CenterContainer/index.tsx b/web/app/_components/CenterContainer/index.tsx
deleted file mode 100644
index 5c0280d6f..000000000
--- a/web/app/_components/CenterContainer/index.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react'
-import MainHeader from '../MainHeader'
-import MainView from '../MainView'
-
-const CenterContainer: React.FC = () => (
-  <div className="flex flex-1 flex-col dark:bg-gray-950/50">
-    <MainHeader />
-    <MainView />
-  </div>
-)
-
-export default React.memo(CenterContainer)
diff --git a/web/app/_components/ChatBody/renderChatMessage.tsx b/web/app/_components/ChatBody/renderChatMessage.tsx
deleted file mode 100644
index f493b72de..000000000
--- a/web/app/_components/ChatBody/renderChatMessage.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import SimpleControlNetMessage from '../SimpleControlNetMessage'
-import SimpleImageMessage from '../SimpleImageMessage'
-import SimpleTextMessage from '../SimpleTextMessage'
-import { ChatMessage, MessageType } from '@models/ChatMessage'
-
-
-export default function renderChatMessage({
-  id,
-  messageType,
-  messageSenderType,
-  senderAvatarUrl,
-  senderName,
-  createdAt,
-  imageUrls,
-  text,
-}: ChatMessage): React.ReactNode {
-  switch (messageType) {
-    case MessageType.ImageWithText:
-      return (
-        <SimpleControlNetMessage
-          key={id}
-          avatarUrl={senderAvatarUrl}
-          senderName={senderName}
-          createdAt={createdAt}
-          imageUrls={imageUrls ?? []}
-          text={text ?? ''}
-        />
-      )
-    case MessageType.Image:
-      return (
-        <SimpleImageMessage
-          key={id}
-          avatarUrl={senderAvatarUrl}
-          senderName={senderName}
-          createdAt={createdAt}
-          imageUrls={imageUrls ?? []}
-          text={text}
-        />
-      )
-    case MessageType.Text:
-      return (
-        <SimpleTextMessage
-          key={id}
-          avatarUrl={senderAvatarUrl}
-          senderName={senderName}
-          createdAt={createdAt}
-          senderType={messageSenderType}
-          text={text}
-        />
-      )
-    default:
-      return null
-  }
-}
diff --git a/web/app/_components/ChatItem/index.tsx b/web/app/_components/ChatItem/index.tsx
deleted file mode 100644
index 0b425a9f0..000000000
--- a/web/app/_components/ChatItem/index.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-/* eslint-disable react/display-name */
-import React, { forwardRef } from 'react'
-import renderChatMessage from '../ChatBody/renderChatMessage'
-
-type Props = {
-  message: ChatMessage
-}
-
-type Ref = HTMLDivElement
-
-const ChatItem = forwardRef<Ref, Props>(({ message }, ref) => {
-  const item = renderChatMessage(message)
-
-  const content = ref ? <div ref={ref}>{item}</div> : item
-
-  return content
-})
-
-export default ChatItem
diff --git a/web/app/_components/ConfirmDeleteModelModal/index.tsx b/web/app/_components/ConfirmDeleteModelModal/index.tsx
deleted file mode 100644
index 94b6980e0..000000000
--- a/web/app/_components/ConfirmDeleteModelModal/index.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import React, { Fragment } from 'react'
-import { Dialog, Transition } from '@headlessui/react'
-import { QuestionMarkCircleIcon } from '@heroicons/react/24/outline'
-import { useAtom } from 'jotai'
-import { showConfirmDeleteModalAtom } from '@helpers/atoms/Modal.atom'
-
-const ConfirmDeleteModelModal: React.FC = () => {
-  const [show, setShow] = useAtom(showConfirmDeleteModalAtom)
-
-  const onConfirmDelete = () => {}
-
-  return (
-    <Transition.Root show={show} as={Fragment}>
-      <Dialog as="div" className="relative z-10" onClose={setShow}>
-        <Transition.Child
-          as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-10 overflow-y-auto">
-          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
-                <div className="sm:flex sm:items-start">
-                  <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
-                    <QuestionMarkCircleIcon
-                      className="h-6 w-6 text-green-600"
-                      aria-hidden="true"
-                    />
-                  </div>
-                  <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
-                    <Dialog.Title
-                      as="h3"
-                      className="text-base font-semibold leading-6 text-gray-900"
-                    >
-                      Log out
-                    </Dialog.Title>
-                    <div className="mt-2">
-                      <p className="text-sm text-gray-500">
-                        Are you sure you want to delete this model?
-                      </p>
-                    </div>
-                  </div>
-                </div>
-                <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-                  <button
-                    type="button"
-                    className="inline-flex w-full justify-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 sm:ml-3 sm:w-auto"
-                    onClick={onConfirmDelete}
-                  >
-                    Log out
-                  </button>
-                  <button
-                    type="button"
-                    className="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
-                    onClick={() => setShow(false)}
-                  >
-                    Cancel
-                  </button>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  )
-}
-
-export default React.memo(ConfirmDeleteModelModal)
diff --git a/web/app/_components/ConfirmSignOutModal/index.tsx b/web/app/_components/ConfirmSignOutModal/index.tsx
deleted file mode 100644
index e62172b54..000000000
--- a/web/app/_components/ConfirmSignOutModal/index.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import React, { Fragment } from 'react'
-import { Dialog, Transition } from '@headlessui/react'
-import { QuestionMarkCircleIcon } from '@heroicons/react/24/outline'
-import { useAtom } from 'jotai'
-import useSignOut from '@hooks/useSignOut'
-import { showConfirmSignOutModalAtom } from '@helpers/atoms/Modal.atom'
-
-const ConfirmSignOutModal: React.FC = () => {
-  const [show, setShow] = useAtom(showConfirmSignOutModalAtom)
-  const { signOut } = useSignOut()
-
-  const onLogOutClick = () => {
-    signOut().then(() => setShow(false))
-  }
-
-  return (
-    <Transition.Root show={show} as={Fragment}>
-      <Dialog as="div" className="relative z-10" onClose={setShow}>
-        <Transition.Child
-          as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-10 overflow-y-auto">
-          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
-                <div className="sm:flex sm:items-start">
-                  <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
-                    <QuestionMarkCircleIcon
-                      className="h-6 w-6 text-green-600"
-                      aria-hidden="true"
-                    />
-                  </div>
-                  <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
-                    <Dialog.Title
-                      as="h3"
-                      className="text-base font-semibold leading-6 text-gray-900"
-                    >
-                      Log out
-                    </Dialog.Title>
-                    <div className="mt-2">
-                      <p className="text-sm text-gray-500">
-                        Are you want to logout?
-                      </p>
-                    </div>
-                  </div>
-                </div>
-                <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-                  <button
-                    type="button"
-                    className="inline-flex w-full justify-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 sm:ml-3 sm:w-auto"
-                    onClick={onLogOutClick}
-                  >
-                    Log out
-                  </button>
-                  <button
-                    type="button"
-                    className="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
-                    onClick={() => setShow(false)}
-                  >
-                    Cancel
-                  </button>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  )
-}
-
-export default React.memo(ConfirmSignOutModal)
diff --git a/web/app/_components/ConversationalCard/index.tsx b/web/app/_components/ConversationalCard/index.tsx
deleted file mode 100644
index 6f0360caf..000000000
--- a/web/app/_components/ConversationalCard/index.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react'
-import Image from 'next/image'
-import useCreateConversation from '@hooks/useCreateConversation'
-import { PlayIcon } from '@heroicons/react/24/outline'
-import { Model } from '@janhq/core/lib/types'
-
-type Props = {
-  model: Model
-}
-
-const ConversationalCard: React.FC<Props> = ({ model }) => {
-  const { requestCreateConvo } = useCreateConversation()
-
-  const { name, avatarUrl, shortDescription } = model
-
-  return (
-    <button
-      onClick={() => requestCreateConvo(model)}
-      className="flex w-52 flex-shrink-0 flex-col justify-between gap-3 rounded-lg bg-white p-4 text-left hover:opacity-20 dark:bg-gray-700"
-    >
-      <div className="box-border flex flex-col gap-2">
-        <Image
-          width={32}
-          height={32}
-          src={avatarUrl ?? ''}
-          className="rounded-full"
-          alt=""
-        />
-        <h2 className="mt-2 line-clamp-1 font-semibold text-gray-900 dark:text-white">
-          {name}
-        </h2>
-        <span className="mt-1 line-clamp-2 font-normal text-gray-600">
-          {shortDescription}
-        </span>
-      </div>
-      <span className="flex items-center gap-0.5 text-xs leading-5 text-gray-500">
-        <PlayIcon width={16} height={16} />
-        32.2k runs
-      </span>
-    </button>
-  )
-}
-
-export default React.memo(ConversationalCard)
diff --git a/web/app/_components/ConversationalList/index.tsx b/web/app/_components/ConversationalList/index.tsx
deleted file mode 100644
index 70ded146a..000000000
--- a/web/app/_components/ConversationalList/index.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Model } from '@janhq/core/lib/types'
-import ConversationalCard from '../ConversationalCard'
-import { ChatBubbleBottomCenterTextIcon } from '@heroicons/react/24/outline'
-
-type Props = {
-  models: Model[]
-}
-
-const ConversationalList: React.FC<Props> = ({ models }) => (
-  <>
-    <div className="mb-2 mt-8 flex items-center gap-3">
-      <ChatBubbleBottomCenterTextIcon width={24} height={24} className="ml-6" />
-      <span className="font-semibold text-gray-900 dark:text-white">
-        Conversational
-      </span>
-    </div>
-    <div className="scroll mt-2 flex w-full gap-2 overflow-hidden overflow-x-scroll pl-6">
-      {models?.map((item) => (
-        <ConversationalCard key={item._id} model={item} />
-      ))}
-    </div>
-  </>
-)
-
-export default ConversationalList
diff --git a/web/app/_components/CreateBotContainer/index.tsx b/web/app/_components/CreateBotContainer/index.tsx
deleted file mode 100644
index d4b36de89..000000000
--- a/web/app/_components/CreateBotContainer/index.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-import React from 'react'
-import TextInputWithTitle from '../TextInputWithTitle'
-import TextAreaWithTitle from '../TextAreaWithTitle'
-import DropdownBox from '../DropdownBox'
-import PrimaryButton from '../PrimaryButton'
-import ToggleSwitch from '../ToggleSwitch'
-import CreateBotPromptInput from '../CreateBotPromptInput'
-import { useGetDownloadedModels } from '@hooks/useGetDownloadedModels'
-import { SubmitHandler, useForm } from 'react-hook-form'
-import Avatar from '../Avatar'
-import { v4 as uuidv4 } from 'uuid'
-import DraggableProgressBar from '../DraggableProgressBar'
-import { useSetAtom } from 'jotai'
-import { activeBotAtom } from '@helpers/atoms/Bot.atom'
-import { rightSideBarExpandStateAtom } from '@helpers/atoms/SideBarExpand.atom'
-import {
-  MainViewState,
-  setMainViewStateAtom,
-} from '@helpers/atoms/MainView.atom'
-
-const CreateBotContainer: React.FC = () => {
-  const { downloadedModels } = useGetDownloadedModels()
-  const setActiveBot = useSetAtom(activeBotAtom)
-  const setMainViewState = useSetAtom(setMainViewStateAtom)
-  const setRightSideBarVisibility = useSetAtom(rightSideBarExpandStateAtom)
-
-  const createBot = async (bot: Bot) => {
-    try {
-      // await executeSerial(DataService.CreateBot, bot)
-    } catch (err) {
-      alert(err)
-      console.error(err)
-    } finally {
-      setMainViewState(MainViewState.BotInfo)
-      setActiveBot(bot)
-      setRightSideBarVisibility(true)
-    }
-  }
-
-  const { handleSubmit, control } = useForm<Bot>({
-    defaultValues: {
-      _id: uuidv4(),
-      name: '',
-      description: '',
-      visibleFromBotProfile: true,
-      systemPrompt: '',
-      welcomeMessage: '',
-      publiclyAccessible: true,
-      suggestReplies: false,
-      renderMarkdownContent: true,
-      customTemperature: 0.7,
-      enableCustomTemperature: false,
-      maxTokens: 2048,
-      frequencyPenalty: 0,
-      presencePenalty: 0,
-    },
-    mode: 'onChange',
-  })
-
-  const onSubmit: SubmitHandler<Bot> = (data) => {
-    console.log('bot', JSON.stringify(data, null, 2))
-    if (!data.modelId) {
-      alert('Please select a model')
-      return
-    }
-    const bot: Bot = {
-      ...data,
-      customTemperature: Number(data.customTemperature),
-      maxTokens: Number(data.maxTokens),
-      frequencyPenalty: Number(data.frequencyPenalty),
-      presencePenalty: Number(data.presencePenalty),
-    }
-    createBot(bot)
-  }
-
-  let models = downloadedModels.map((model: { _id: any }) => {
-    return model._id
-  })
-
-  models = ['Select a model', ...models]
-
-  return (
-    <form
-      className="flex h-full w-full flex-col"
-      onSubmit={handleSubmit(onSubmit)}
-    >
-      <div className="mx-6 mt-3 flex items-center justify-between gap-3">
-        <span className="text-lg font-bold">Create Bot</span>
-        <div className="flex gap-3">
-          <PrimaryButton isSubmit title="Create" />
-        </div>
-      </div>
-      <div className="scroll flex flex-1 flex-col overflow-y-auto pt-4">
-        <div className="mx-auto flex max-w-2xl flex-col gap-4">
-          <Avatar allowEdit />
-
-          <TextInputWithTitle
-            description="Bot name should be unique, 4-20 characters long, and may include alphanumeric characters, dashes or underscores."
-            title="Bot name"
-            id="name"
-            control={control}
-            required={true}
-          />
-
-          <TextAreaWithTitle
-            id="description"
-            title="Bot description"
-            placeholder="Optional"
-            control={control}
-          />
-
-          <div className="flex flex-col pb-2">
-            <DropdownBox
-              id="modelId"
-              title="Model"
-              data={models}
-              control={control}
-              required={true}
-            />
-          </div>
-
-          <CreateBotPromptInput id="systemPrompt" control={control} required />
-
-          <div className="flex flex-col gap-0.5">
-            <label className="block">Bot access</label>
-            <span className="mb-4 mt-1 text-muted-foreground">
-              If this setting is enabled, the bot will be added to your profile
-              and will be publicly accessible. Turning this off will make the
-              bot private.
-            </span>
-
-            <ToggleSwitch
-              id="publiclyAccessible"
-              title="Bot publicly accessible"
-              control={control}
-            />
-            <DraggableProgressBar
-              id="maxTokens"
-              control={control}
-              min={0}
-              max={4096}
-              step={1}
-            />
-            <p>Custom temperature</p>
-            <DraggableProgressBar
-              id="customTemperature"
-              control={control}
-              min={0}
-              max={1}
-              step={0.01}
-            />
-            <p>Frequency penalty</p>
-            <DraggableProgressBar
-              id="frequencyPenalty"
-              control={control}
-              min={0}
-              max={1}
-              step={0.01}
-            />
-            <p>Presence penalty</p>
-            <DraggableProgressBar
-              id="presencePenalty"
-              control={control}
-              min={0}
-              max={1}
-              step={0.01}
-            />
-          </div>
-        </div>
-      </div>
-    </form>
-  )
-}
-
-export default CreateBotContainer
diff --git a/web/app/_components/CreateBotInAdvance/index.tsx b/web/app/_components/CreateBotInAdvance/index.tsx
deleted file mode 100644
index 8229ea333..000000000
--- a/web/app/_components/CreateBotInAdvance/index.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import React, { Fragment, useState } from 'react'
-import ToggleSwitch from '../ToggleSwitch'
-import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline'
-import CutomBotTemperature from '../CustomBotTemperature'
-import DraggableProgressBar from '../DraggableProgressBar'
-
-type Props = {
-  control?: any
-}
-
-const CreateBotInAdvance: React.FC<Props> = ({ control }) => {
-  const [showAdvanced, setShowAdvanced] = useState(true)
-
-  const handleShowAdvanced = (e: React.MouseEvent<HTMLButtonElement>) => {
-    setShowAdvanced(!showAdvanced)
-  }
-
-  return (
-    <div className="flex flex-col gap-2">
-      <div className="flex items-start">
-        <button
-          className="mb-2 flex items-center justify-center font-bold"
-          onClick={handleShowAdvanced}
-        >
-          Advanced
-          {showAdvanced ? (
-            <ChevronDownIcon width={16} className="ml-2" />
-          ) : (
-            <ChevronUpIcon width={16} className="ml-2" />
-          )}
-        </button>
-      </div>
-
-      {showAdvanced && (
-        <>
-          <div>
-            <p className="text-bold">Max tokens</p>
-            <DraggableProgressBar
-              id="maxTokens"
-              control={control}
-              min={0}
-              max={4096}
-              step={1}
-            />
-          </div>
-          <div>
-            <p className="text-bold">Custom temperature</p>
-            <DraggableProgressBar
-              id="customTemperature"
-              control={control}
-              min={0}
-              max={1}
-              step={0.01}
-            />
-          </div>
-          <div>
-            <p className="text-bold">Frequency penalty</p>
-            <DraggableProgressBar
-              id="frequencyPenalty"
-              control={control}
-              min={0}
-              max={1}
-              step={0.01}
-            />
-          </div>
-          <div>
-            <p className="text-bold">Presence penalty</p>
-            <DraggableProgressBar
-              id="presencePenalty"
-              control={control}
-              min={0}
-              max={1}
-              step={0.01}
-            />
-          </div>
-        </>
-      )}
-
-      {/* {showAdvanced && (
-        <Fragment>
-          <ToggleSwitch
-            id="suggestReplies"
-            title="Suggest replies"
-            control={control}
-          />
-          <ToggleSwitch
-            id="renderMarkdownContent"
-            title="Render markdown content"
-            control={control}
-          />
-          <CutomBotTemperature control={control} />
-        </Fragment>
-      )} */}
-    </div>
-  )
-}
-
-export default CreateBotInAdvance
diff --git a/web/app/_components/CreateBotPromptInput/index.tsx b/web/app/_components/CreateBotPromptInput/index.tsx
deleted file mode 100644
index 2696faf91..000000000
--- a/web/app/_components/CreateBotPromptInput/index.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import React, { Fragment, use } from 'react'
-import ToggleSwitch from '../ToggleSwitch'
-import { useController } from 'react-hook-form'
-
-type Props = {
-  id: string
-  control?: any
-  required?: boolean
-}
-
-const CreateBotPromptInput: React.FC<Props> = ({ id, control, required }) => {
-  const { field } = useController({
-    name: id,
-    control: control,
-    rules: { required: required },
-  })
-
-  return (
-    <Fragment>
-      <div className="flex flex-col gap-2">
-        <label htmlFor="comment" className="block font-bold ">
-          Prompt
-        </label>
-        <p className="mt-1 font-normal text-gray-400">
-          All conversations with this bot will start with your prompt but it
-          will not be visible to the user in the chat. If you would like the
-          prompt message to be visible to the user, consider using an intro
-          message instead.
-        </p>
-        <ToggleSwitch
-          id="visibleFromBotProfile"
-          title={'Prompt visible from bot profile'}
-          control={control}
-        />
-        <textarea
-          rows={4}
-          className="block w-full resize-none rounded-md border-0 bg-background/80 py-1.5 text-xs leading-relaxed text-background-reverse shadow-sm ring-1 ring-inset ring-border placeholder:text-muted-foreground focus:ring-2 focus:ring-inset focus:ring-accent/50"
-          placeholder="Talk to me like a pirate"
-          {...field}
-        />
-      </div>
-    </Fragment>
-  )
-}
-
-export default CreateBotPromptInput
diff --git a/web/app/_components/CustomBotTemperature/index.tsx b/web/app/_components/CustomBotTemperature/index.tsx
deleted file mode 100644
index ebc901abe..000000000
--- a/web/app/_components/CustomBotTemperature/index.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import ToggleSwitch from '../ToggleSwitch'
-import DraggableProgressBar from '../DraggableProgressBar'
-import { Controller } from 'react-hook-form'
-
-type Props = {
-  control?: any
-}
-
-const CutomBotTemperature: React.FC<Props> = ({ control }) => (
-  <div className="flex flex-col gap-2">
-    <ToggleSwitch
-      id="enableCustomTemperature"
-      title="Custom temperature"
-      control={control}
-    />
-    <div className="mt-1 text-[0.8em] text-gray-500">
-      {`Controls the creativity of the bot's responses. Higher values produce more
-      varied but unpredictable replies, lower values generate more consistent
-      responses.`}
-    </div>
-    <span className="text-gray-900">default: 0.7</span>
-    <Controller
-      name="enableCustomTemperature"
-      control={control}
-      render={({ field: { value } }) => {
-        if (!value) return <div />
-        return (
-          <DraggableProgressBar
-            id="customTemperature"
-            control={control}
-            min={0}
-            max={1}
-            step={0.01}
-          />
-        )
-      }}
-    />
-  </div>
-)
-
-export default CutomBotTemperature
diff --git a/web/app/_components/DownloadModelContent/index.tsx b/web/app/_components/DownloadModelContent/index.tsx
deleted file mode 100644
index 18702dec5..000000000
--- a/web/app/_components/DownloadModelContent/index.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import DownloadModelTitle from '../DownloadModelTitle'
-
-type Props = {
-  author: string
-  description: string
-  isRecommend: boolean
-  name: string
-  type: string
-  required?: string
-}
-
-const DownloadModelContent: React.FC<Props> = ({
-  author,
-  description,
-  isRecommend,
-  name,
-  required,
-  type,
-}) => {
-  return (
-    <div className="flex w-4/5 flex-col gap-2.5">
-      <div className="flex items-center gap-1">
-        <h2 className="text-xl font-medium leading-[25px] tracking-[-0.4px] text-gray-900">
-          {name}
-        </h2>
-        <DownloadModelTitle title={type} />
-        <div className="rounded-md bg-purple-100 px-2.5 py-0.5 text-center">
-          <span className="text-xs font-semibold leading-[18px] text-purple-800">
-            {author}
-          </span>
-        </div>
-        {required && (
-          <div className="rounded-md bg-purple-100 px-2.5 py-0.5 text-center">
-            <span className="text-xs leading-[18px] text-[#11192899]">
-              Required{' '}
-            </span>
-            <span className="text-xs font-semibold leading-[18px] text-gray-900">
-              {required}
-            </span>
-          </div>
-        )}
-      </div>
-      <p className="text-xs leading-[18px] text-gray-500">{description}</p>
-      <div
-        className={`${
-          isRecommend ? 'flex' : 'hidden'
-        } w-fit items-center justify-center gap-2 rounded-full bg-green-50 px-2.5 py-0.5`}
-      >
-        <div className="h-3 w-3 rounded-full bg-green-400"></div>
-        <span className="leading-18px text-xs font-medium text-green-600">
-          Recommend
-        </span>
-      </div>
-    </div>
-  )
-}
-
-export default DownloadModelContent
diff --git a/web/app/_components/DownloadModelTitle/index.tsx b/web/app/_components/DownloadModelTitle/index.tsx
deleted file mode 100644
index a3efceec2..000000000
--- a/web/app/_components/DownloadModelTitle/index.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-type Props = {
-  title: string
-}
-
-export const DownloadModelTitle: React.FC<Props> = ({ title }) => (
-  <div className="rounded-md bg-purple-100 px-2.5 py-0.5 text-center">
-    <span className="text-xs font-medium leading-[18px] text-purple-800">
-      {title}
-    </span>
-  </div>
-)
-
-export default DownloadModelTitle
diff --git a/web/app/_components/DownloadedModelCard/index.tsx b/web/app/_components/DownloadedModelCard/index.tsx
deleted file mode 100644
index 08c9d4f26..000000000
--- a/web/app/_components/DownloadedModelCard/index.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Model } from '@janhq/core/lib/types'
-import DownloadModelContent from '../DownloadModelContent'
-
-type Props = {
-  model: Model
-  isRecommend: boolean
-  required?: string
-  transferred?: number
-  onDeleteClick?: (model: Model) => void
-}
-
-const DownloadedModelCard: React.FC<Props> = ({
-  model,
-  isRecommend,
-  required,
-  onDeleteClick,
-}) => (
-  <div className="rounded-lg border border-gray-200">
-    <div className="flex justify-between gap-2.5 px-3 py-4">
-      <DownloadModelContent
-        required={required}
-        author={model.author}
-        description={model.shortDescription}
-        isRecommend={isRecommend}
-        name={model.name}
-        type={'LLM'}
-      />
-      <div className="flex flex-col justify-center">
-        <button onClick={() => onDeleteClick?.(model)}>Delete</button>
-      </div>
-    </div>
-  </div>
-)
-
-export default DownloadedModelCard
diff --git a/web/app/_components/DownloadedModelTable/index.tsx b/web/app/_components/DownloadedModelTable/index.tsx
deleted file mode 100644
index bc9c35118..000000000
--- a/web/app/_components/DownloadedModelTable/index.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react'
-import ModelTable from '../ModelTable'
-import { useGetDownloadedModels } from '@hooks/useGetDownloadedModels'
-
-const DownloadedModelTable: React.FC = () => {
-  const { downloadedModels } = useGetDownloadedModels()
-
-  if (!downloadedModels || downloadedModels.length === 0) return null
-
-  return (
-    <div className="mt-5">
-      {/* <h3 className="mt-[50px] text-xl leading-[25px]">Downloaded Models</h3> */}
-      {/* <div className="w-[568px] py-5">
-        <SearchBar />
-      </div> */}
-      <ModelTable models={downloadedModels} />
-    </div>
-  )
-}
-
-export default DownloadedModelTable
diff --git a/web/app/_components/DownloadingModelTable/index.tsx b/web/app/_components/DownloadingModelTable/index.tsx
deleted file mode 100644
index 96a3fbd4f..000000000
--- a/web/app/_components/DownloadingModelTable/index.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React, { Fragment } from 'react'
-import { modelDownloadStateAtom } from '@helpers/atoms/DownloadState.atom'
-import { useAtomValue } from 'jotai'
-import ModelDownloadingTable from '../ModelDownloadingTable'
-
-const DownloadingModelTable: React.FC = () => {
-  const modelDownloadState = useAtomValue(modelDownloadStateAtom)
-
-  const isAnyModelDownloading = Object.values(modelDownloadState).length > 0
-
-  if (!isAnyModelDownloading) return null
-
-  const downloadStates: DownloadState[] = []
-  for (const [, value] of Object.entries(modelDownloadState)) {
-    downloadStates.push(value)
-  }
-
-  return (
-    <div className="pl-[63px] pr-[89px]">
-      <h3 className="mb-4 mt-[50px] text-xl leading-[25px]">
-        Downloading Models
-      </h3>
-      <ModelDownloadingTable downloadStates={downloadStates} />
-    </div>
-  )
-}
-
-export default DownloadingModelTable
diff --git a/web/app/_components/DraggableProgressBar/index.tsx b/web/app/_components/DraggableProgressBar/index.tsx
deleted file mode 100644
index 0b38b2c59..000000000
--- a/web/app/_components/DraggableProgressBar/index.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { formatTwoDigits } from '@utils/converter'
-import React from 'react'
-import { Controller, useController } from 'react-hook-form'
-
-type Props = {
-  id: string
-  control: any
-  min: number
-  max: number
-  step: number
-}
-
-const DraggableProgressBar: React.FC<Props> = ({
-  id,
-  control,
-  min,
-  max,
-  step,
-}) => {
-  const { field } = useController({
-    name: id,
-    control: control,
-  })
-
-  return (
-    <div className="flex items-center gap-2">
-      <input
-        {...field}
-        className="flex-1"
-        type="range"
-        min={min}
-        max={max}
-        step={step}
-      />
-      <Controller
-        name={id}
-        control={control}
-        render={({ field: { value } }) => (
-          <span className="rounded-md border border-border px-2 py-1 text-accent">
-            {formatTwoDigits(value)}
-          </span>
-        )}
-      />
-    </div>
-  )
-}
-
-export default DraggableProgressBar
diff --git a/web/app/_components/DropdownBox/index.tsx b/web/app/_components/DropdownBox/index.tsx
deleted file mode 100644
index c20006dc2..000000000
--- a/web/app/_components/DropdownBox/index.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React, { Fragment } from 'react'
-import { useController } from 'react-hook-form'
-
-type Props = {
-  id: string
-  title: string
-  data: string[]
-  control?: any
-  required?: boolean
-}
-
-const DropdownBox: React.FC<Props> = ({
-  id,
-  title,
-  data,
-  control,
-  required = false,
-}) => {
-  const { field } = useController({
-    name: id,
-    control: control,
-    rules: { required: required },
-  })
-
-  return (
-    <Fragment>
-      <label className="block font-bold">{title}</label>
-      <select
-        className="bg-background/80 ring-border focus:ring-accent/50 mt-1 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-xs ring-1 ring-inset focus:ring-2 sm:leading-6"
-        {...field}
-      >
-        {data.map((option) => (
-          <option key={option}>{option}</option>
-        ))}
-      </select>
-    </Fragment>
-  )
-}
-
-export default DropdownBox
diff --git a/web/app/_components/DropdownList/index.tsx b/web/app/_components/DropdownList/index.tsx
deleted file mode 100644
index ad405686c..000000000
--- a/web/app/_components/DropdownList/index.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { Fragment, useState } from 'react'
-import { Menu, Transition } from '@headlessui/react'
-import { ChevronDownIcon } from '@heroicons/react/24/outline'
-
-function classNames(...classes: any) {
-  return classes.filter(Boolean).join(' ')
-}
-
-type Props = {
-  title: string
-  data: string[]
-}
-
-export const DropdownsList: React.FC<Props> = ({ data, title }) => {
-  const [checked, setChecked] = useState(data[0])
-
-  return (
-    <Menu as="div" className="relative w-full text-left">
-      <div className="flex flex-col gap-2 pt-2">
-        <h2 className="text-sm text-[#111928]">{title}</h2>
-        <Menu.Button className="inline-flex w-full items-center justify-between gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
-          {checked}
-          <ChevronDownIcon width={12} height={12} />
-        </Menu.Button>
-      </div>
-
-      <Transition
-        as={Fragment}
-        enter="transition ease-out duration-100"
-        enterFrom="transform opacity-0 scale-95"
-        enterTo="transform opacity-100 scale-100"
-        leave="transition ease-in duration-75"
-        leaveFrom="transform opacity-100 scale-100"
-        leaveTo="transform opacity-0 scale-95"
-      >
-        <Menu.Items className="absolute right-0 z-10 mt-2 w-full origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-          <div className="py-1">
-            {data.map((item, index) => (
-              <Menu.Item key={index}>
-                {({ active }) => (
-                  <a
-                    onClick={() => setChecked(item)}
-                    href="#"
-                    className={classNames(
-                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
-                      'block px-4 py-2 text-sm'
-                    )}
-                  >
-                    {item}
-                  </a>
-                )}
-              </Menu.Item>
-            ))}
-          </div>
-        </Menu.Items>
-      </Transition>
-    </Menu>
-  )
-}
diff --git a/web/app/_components/EmptyChatContainer/index.tsx b/web/app/_components/EmptyChatContainer/index.tsx
deleted file mode 100644
index 619055911..000000000
--- a/web/app/_components/EmptyChatContainer/index.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react'
-import SelectModels from '../ModelSelector'
-import InputToolbar from '../InputToolbar'
-
-const EmptyChatContainer: React.FC = () => (
-  <div className="flex flex-1 flex-col h-full w-full">
-    <div className="flex flex-1 items-center justify-center">
-      <SelectModels />
-    </div>
-    <InputToolbar />
-  </div>
-)
-
-export default EmptyChatContainer
diff --git a/web/app/_components/ExpandableHeader/index.tsx b/web/app/_components/ExpandableHeader/index.tsx
deleted file mode 100644
index b5baf1770..000000000
--- a/web/app/_components/ExpandableHeader/index.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline'
-
-type Props = {
-  title: string
-}
-
-const ExpandableHeader: React.FC<Props> = ({ title }) => (
-  <button className="flex items-center justify-between">
-    <h2 className="text-muted-foreground pl-1 font-bold">{title}</h2>
-  </button>
-)
-
-export default ExpandableHeader
diff --git a/web/app/_components/ExploreModelContainer/index.tsx b/web/app/_components/ExploreModelContainer/index.tsx
deleted file mode 100644
index 1d4b2b4a3..000000000
--- a/web/app/_components/ExploreModelContainer/index.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import HeaderTitle from '../HeaderTitle'
-import ExploreModelList from '../../../screens/ExploreModels/ExploreModelList'
-import ExploreModelFilter from '../ExploreModelFilter'
-
-const ExploreModelContainer: React.FC = () => (
-  <div className="flex h-full w-full flex-1 flex-col px-16 pt-14">
-    <HeaderTitle title="Explore Models" />
-    {/* <SearchBar
-      type={SearchType.Model}
-      placeholder="Owner name like TheBloke, bhlim etc.."
-    /> */}
-    <div className="mt-9 flex flex-1 gap-x-10 overflow-hidden">
-      <ExploreModelFilter />
-      <ExploreModelList />
-    </div>
-  </div>
-)
-
-export default ExploreModelContainer
diff --git a/web/app/_components/ExploreModelFilter/index.tsx b/web/app/_components/ExploreModelFilter/index.tsx
deleted file mode 100644
index e5eb4f9d7..000000000
--- a/web/app/_components/ExploreModelFilter/index.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react'
-import SearchBar from '../SearchBar'
-import SimpleCheckbox from '../SimpleCheckbox'
-import SimpleTag from '../SimpleTag'
-import { TagType } from '../SimpleTag/TagType'
-
-const tags = [
-  'Roleplay',
-  'Llama',
-  'Story',
-  'Casual',
-  'Professional',
-  'CodeLlama',
-  'Coding',
-]
-const checkboxs = ['GGUF', 'TensorRT', 'Meow', 'JigglyPuff']
-
-const ExploreModelFilter: React.FC = () => {
-  const enabled = true
-  if (!enabled) return null
-
-  return (
-    <div className="w-64">
-      <h2 className="mb-[15px] text-xs font-semibold">Tags</h2>
-      <SearchBar placeholder="Filter by tags" />
-      <div className="mt-[14px] flex flex-wrap gap-[9px]">
-        {tags.map((item) => (
-          <SimpleTag key={item} title={item} type={item as TagType} />
-        ))}
-      </div>
-      <hr className="my-10" />
-      <fieldset>
-        {checkboxs.map((item) => (
-          <SimpleCheckbox key={item} name={item} />
-        ))}
-      </fieldset>
-    </div>
-  )
-}
-
-export default ExploreModelFilter
diff --git a/web/app/_components/ExploreModelItem/index.tsx b/web/app/_components/ExploreModelItem/index.tsx
deleted file mode 100644
index eb98a0eae..000000000
--- a/web/app/_components/ExploreModelItem/index.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-/* eslint-disable react/display-name */
-
-'use client'
-
-import ExploreModelItemHeader from '../ExploreModelItemHeader'
-import { Button } from '@uikit'
-import ModelVersionList from '../ModelVersionList'
-import { forwardRef, useEffect, useState } from 'react'
-import SimpleTag from '../SimpleTag'
-import {
-  MiscellanousTag,
-  NumOfBit,
-  QuantMethodTag,
-  RamRequired,
-  UsecaseTag,
-  VersionTag,
-} from '@/_components/SimpleTag/TagType'
-import { displayDate } from '@utils/datetime'
-import useGetMostSuitableModelVersion from '@hooks/useGetMostSuitableModelVersion'
-import { toGigabytes } from '@utils/converter'
-import { ModelCatalog } from '@janhq/core/lib/types'
-
-type Props = {
-  model: ModelCatalog
-}
-
-const ExploreModelItem = forwardRef<HTMLDivElement, Props>(({ model }, ref) => {
-  const [show, setShow] = useState(false)
-
-  const { availableVersions } = model
-  const { suitableModel, getMostSuitableModelVersion } =
-    useGetMostSuitableModelVersion()
-
-  useEffect(() => {
-    getMostSuitableModelVersion(availableVersions)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [availableVersions])
-
-  if (!suitableModel) {
-    return null
-  }
-
-  const { quantMethod, bits, maxRamRequired, usecase } = suitableModel
-
-  return (
-    <div
-      ref={ref}
-      className="border-border bg-background/60 mb-4 flex flex-col rounded-md border"
-    >
-      <ExploreModelItemHeader
-        suitableModel={suitableModel}
-        exploreModel={model}
-      />
-      <div className="flex flex-col p-4">
-        <div className="mb-4 flex flex-col gap-1">
-          <span className="font-semibold">About</span>
-          <span className="text-muted-foreground leading-relaxed">
-            {model.longDescription}
-          </span>
-        </div>
-
-        <div className="flex justify-between">
-          <div className="flex flex-1 flex-col gap-y-4">
-            <div className="flex flex-col gap-1">
-              <div className="font-semibold">Release Date</div>
-              <p className="text-muted-foreground mt-1">
-                {displayDate(model.releaseDate)}
-              </p>
-            </div>
-            <div className="flex flex-col gap-2">
-              <div className="font-semibold">Version</div>
-              <div className="flex gap-2">
-                <SimpleTag
-                  title={model.version}
-                  type={VersionTag.Version}
-                  clickable={false}
-                />
-                <SimpleTag
-                  title={quantMethod}
-                  type={QuantMethodTag.Default}
-                  clickable={false}
-                />
-                <SimpleTag
-                  title={`${bits} Bits`}
-                  type={NumOfBit.Default}
-                  clickable={false}
-                />
-              </div>
-            </div>
-          </div>
-
-          <div className="flex flex-1 flex-col gap-y-4">
-            <div>
-              <div className="font-semibold">Author</div>
-              <p className="text-muted-foreground mt-1">{model.author}</p>
-            </div>
-            <div className="flex flex-col gap-2">
-              <div className="font-semibold">Compatibility</div>
-              <div className="flex gap-2">
-                <SimpleTag
-                  title={usecase}
-                  type={UsecaseTag.UsecaseDefault}
-                  clickable={false}
-                />
-                <SimpleTag
-                  title={`${toGigabytes(maxRamRequired)} RAM required`}
-                  type={RamRequired.RamDefault}
-                  clickable={false}
-                />
-              </div>
-            </div>
-          </div>
-
-          <div className="flex flex-1 flex-col gap-y-4">
-            <div>
-              <div className="font-medium">Tags</div>
-              <div className="mt-1 flex flex-wrap gap-2">
-                {model.tags.map((tag) => (
-                  <SimpleTag
-                    key={tag}
-                    title={tag}
-                    type={MiscellanousTag.MiscellanousDefault}
-                    clickable={false}
-                  />
-                ))}
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {model.availableVersions?.length > 0 && (
-          <div className="border-border bg-background mt-5 w-full rounded-md border p-2">
-            <button onClick={() => setShow(!show)} className="w-full">
-              {!show
-                ? '+ Show Available Versions'
-                : '- Collapse Available Versions'}
-            </button>
-
-            {show && (
-              <ModelVersionList
-                model={model}
-                versions={model.availableVersions}
-                recommendedVersion={suitableModel?._id ?? ''}
-              />
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  )
-})
-
-export default ExploreModelItem
diff --git a/web/app/_components/ExploreModelItemHeader/index.tsx b/web/app/_components/ExploreModelItemHeader/index.tsx
deleted file mode 100644
index e8287db8d..000000000
--- a/web/app/_components/ExploreModelItemHeader/index.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import SimpleTag from '../SimpleTag'
-import { formatDownloadPercentage, toGigabytes } from '@utils/converter'
-import { useCallback, useEffect, useMemo } from 'react'
-import useGetPerformanceTag from '@hooks/useGetPerformanceTag'
-import useDownloadModel from '@hooks/useDownloadModel'
-import { useGetDownloadedModels } from '@hooks/useGetDownloadedModels'
-import { modelDownloadStateAtom } from '@helpers/atoms/DownloadState.atom'
-import { atom, useAtomValue, useSetAtom } from 'jotai'
-import { Button } from '@uikit'
-import {
-  MainViewState,
-  setMainViewStateAtom,
-} from '@helpers/atoms/MainView.atom'
-import ConfirmationModal from '../ConfirmationModal'
-import { showingCancelDownloadModalAtom } from '@helpers/atoms/Modal.atom'
-import { ModelCatalog, ModelVersion } from '@janhq/core/lib/types'
-
-type Props = {
-  suitableModel: ModelVersion
-  exploreModel: ModelCatalog
-}
-
-const ExploreModelItemHeader: React.FC<Props> = ({
-  suitableModel,
-  exploreModel,
-}) => {
-  const { downloadModel } = useDownloadModel()
-  const { downloadedModels } = useGetDownloadedModels()
-  const { performanceTag, title, getPerformanceForModel } =
-    useGetPerformanceTag()
-  const downloadAtom = useMemo(
-    () => atom((get) => get(modelDownloadStateAtom)[suitableModel._id]),
-    [suitableModel._id]
-  )
-  const downloadState = useAtomValue(downloadAtom)
-  const setMainViewState = useSetAtom(setMainViewStateAtom)
-  const setShowingCancelDownloadModal = useSetAtom(
-    showingCancelDownloadModalAtom
-  )
-
-  useEffect(() => {
-    getPerformanceForModel(suitableModel)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [suitableModel])
-
-  const onDownloadClick = useCallback(() => {
-    downloadModel(exploreModel, suitableModel)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [exploreModel, suitableModel])
-
-  const isDownloaded =
-    downloadedModels.find((model) => model._id === suitableModel._id) != null
-
-  let downloadButton = (
-    <Button themes="accent" onClick={() => onDownloadClick()}>
-      {suitableModel.size
-        ? `Download (${toGigabytes(suitableModel.size)})`
-        : 'Download'}
-    </Button>
-  )
-
-  if (isDownloaded) {
-    downloadButton = (
-      <Button
-        themes="accent"
-        onClick={() => {
-          setMainViewState(MainViewState.MyModel)
-        }}
-      >
-        View Downloaded Model
-      </Button>
-    )
-  }
-
-  if (downloadState != null) {
-    // downloading
-    downloadButton = (
-      <Button
-        themes="outline"
-        onClick={() => {
-          setShowingCancelDownloadModal(true)
-        }}
-      >
-        Cancel ({formatDownloadPercentage(downloadState.percent)})
-      </Button>
-    )
-  }
-
-  let cancelDownloadModal =
-    downloadState != null ? (
-      <ConfirmationModal
-        atom={showingCancelDownloadModalAtom}
-        title="Cancel Download"
-        description={`Are you sure you want to cancel the download of ${downloadState?.fileName}?`}
-        onConfirm={() => {
-          window.coreAPI?.abortDownload(downloadState?.fileName)
-        }}
-      />
-    ) : (
-      <></>
-    )
-
-  return (
-    <div className="flex items-center justify-between rounded-t-md border-b border-border bg-background/50 px-4 py-2">
-      <div className="flex items-center gap-2">
-        <span>{exploreModel.name}</span>
-        {performanceTag && (
-          <SimpleTag title={title} type={performanceTag} clickable={false} />
-        )}
-      </div>
-      {downloadButton}
-      {cancelDownloadModal}
-    </div>
-  )
-}
-
-export default ExploreModelItemHeader
diff --git a/web/app/_components/HamburgerButton/index.tsx b/web/app/_components/HamburgerButton/index.tsx
deleted file mode 100644
index 95a1f2e5f..000000000
--- a/web/app/_components/HamburgerButton/index.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-'use client'
-
-import { showingMobilePaneAtom } from '@helpers/atoms/Modal.atom'
-import { Bars3Icon } from '@heroicons/react/24/outline'
-import { useSetAtom } from 'jotai'
-import React from 'react'
-
-const HamburgerButton: React.FC = () => {
-  const setShowingMobilePane = useSetAtom(showingMobilePaneAtom)
-  return (
-    <button
-      type="button"
-      className="inline-flex items-center justify-center self-end rounded-md p-1 text-gray-700 lg:hidden"
-      onClick={() => setShowingMobilePane(true)}
-    >
-      <span className="sr-only">Open main menu</span>
-      <Bars3Icon className="h-6 w-6" aria-hidden="true" />
-    </button>
-  )
-}
-
-export default React.memo(HamburgerButton)
diff --git a/web/app/_components/Header/index.tsx b/web/app/_components/Header/index.tsx
deleted file mode 100644
index 3c9a90910..000000000
--- a/web/app/_components/Header/index.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react'
-import UserProfileDropDown from '../UserProfileDropDown'
-import LoginButton from '../LoginButton'
-import HamburgerButton from '../HamburgerButton'
-
-const Header: React.FC = () => {
-  return (
-    <header className="flex border-b-[1px] border-gray-200 p-3 dark:bg-gray-800">
-      <nav className="flex-1 justify-center">
-        <HamburgerButton />
-      </nav>
-      <div className="h-[30px]" />
-      <LoginButton />
-      <UserProfileDropDown />
-    </header>
-  )
-}
-
-export default Header
diff --git a/web/app/_components/HeaderBackButton/index.tsx b/web/app/_components/HeaderBackButton/index.tsx
deleted file mode 100644
index e2f920c4e..000000000
--- a/web/app/_components/HeaderBackButton/index.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react'
-import { ArrowLeftIcon } from '@heroicons/react/24/outline'
-
-const HeaderBackButton: React.FC = () => {
-  return (
-    <button className="flex items-center gap-1">
-      <ArrowLeftIcon width={24} height={24} />
-      <span className="text-sm">Back</span>
-    </button>
-  )
-}
-
-export default React.memo(HeaderBackButton)
diff --git a/web/app/_components/HeaderTitle/index.tsx b/web/app/_components/HeaderTitle/index.tsx
deleted file mode 100644
index 460769b9f..000000000
--- a/web/app/_components/HeaderTitle/index.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react'
-
-type Props = {
-  title: string
-  className?: string
-}
-
-const HeaderTitle: React.FC<Props> = ({ title, className }) => (
-  <h2
-    className={`my-5 text-[34px] font-semibold leading-[41px] tracking-[-0.4px] ${className}`}
-  >
-    {title}
-  </h2>
-)
-
-export default React.memo(HeaderTitle)
diff --git a/web/app/_components/LeftContainer/index.tsx b/web/app/_components/LeftContainer/index.tsx
deleted file mode 100644
index 0a826c4fe..000000000
--- a/web/app/_components/LeftContainer/index.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React, { Fragment } from 'react'
-import HistoryList from '../HistoryList'
-import LeftHeaderAction from '../LeftHeaderAction'
-import { leftSideBarExpandStateAtom } from '@helpers/atoms/SideBarExpand.atom'
-import { useAtomValue } from 'jotai'
-import { Variants, motion } from 'framer-motion'
-
-const leftSideBarVariants: Variants = {
-  show: {
-    x: 0,
-    width: 320,
-    opacity: 1,
-    transition: { duration: 0.3 },
-  },
-  hide: {
-    x: '-100%',
-    width: 0,
-    opacity: 0,
-    transition: { duration: 0.3 },
-  },
-}
-
-const LeftContainer: React.FC = () => {
-  const isVisible = useAtomValue(leftSideBarExpandStateAtom)
-
-  return (
-    <motion.div
-      initial={false}
-      animate={isVisible ? 'show' : 'hide'}
-      variants={leftSideBarVariants}
-      className="flex w-80 flex-shrink-0 flex-col dark:bg-gray-950/50"
-    >
-      {isVisible && (
-        <Fragment>
-          {/* <LeftHeaderAction /> */}
-          <HistoryList />
-        </Fragment>
-      )}
-    </motion.div>
-  )
-}
-
-export default React.memo(LeftContainer)
diff --git a/web/app/_components/LeftHeaderAction/index.tsx b/web/app/_components/LeftHeaderAction/index.tsx
deleted file mode 100644
index e0648e582..000000000
--- a/web/app/_components/LeftHeaderAction/index.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-'use client'
-
-import React, { useContext } from 'react'
-import SecondaryButton from '../SecondaryButton'
-import { useSetAtom, useAtomValue } from 'jotai'
-import {
-  MainViewState,
-  setMainViewStateAtom,
-} from '@helpers/atoms/MainView.atom'
-import { MagnifyingGlassIcon, PlusIcon } from '@heroicons/react/24/outline'
-import useCreateConversation from '@hooks/useCreateConversation'
-import { useGetDownloadedModels } from '@hooks/useGetDownloadedModels'
-import { Button } from '@uikit'
-import { activeModelAtom } from '@helpers/atoms/Model.atom'
-import { showingModalNoActiveModel } from '@helpers/atoms/Modal.atom'
-import {
-  FeatureToggleContext,
-} from '@helpers/FeatureToggleWrapper'
-
-const LeftHeaderAction: React.FC = () => {
-  const setMainView = useSetAtom(setMainViewStateAtom)
-  const { downloadedModels } = useGetDownloadedModels()
-  const activeModel = useAtomValue(activeModelAtom)
-  const { requestCreateConvo } = useCreateConversation()
-  const setShowModalNoActiveModel = useSetAtom(showingModalNoActiveModel)
-  const { experimentalFeatureEnabed } = useContext(FeatureToggleContext)
-
-  const onExploreClick = () => {
-    setMainView(MainViewState.ExploreModel)
-  }
-
-  const onNewConversationClick = () => {
-    if (activeModel) {
-      requestCreateConvo(activeModel)
-    } else {
-      setShowModalNoActiveModel(true)
-    }
-  }
-
-  const onCreateBotClicked = () => {
-    if (downloadedModels.length === 0) {
-      alert('You need to download at least one model to create a bot.')
-      return
-    }
-    setMainView(MainViewState.CreateBot)
-  }
-
-  return (
-    <div className="sticky top-0 mb-4 bg-background/90 p-4">
-      <div className="flex flex-row gap-2">
-        <SecondaryButton
-          title={'Explore'}
-          onClick={onExploreClick}
-          className="w-full flex-1"
-          icon={<MagnifyingGlassIcon width={16} height={16} />}
-        />
-        {experimentalFeatureEnabed && (
-          <SecondaryButton
-            title={'Create bot'}
-            onClick={onCreateBotClicked}
-            className="w-full flex-1"
-            icon={<PlusIcon width={16} height={16} />}
-          />
-        )}
-      </div>
-      <Button
-        onClick={onNewConversationClick}
-        className="mt-2 flex w-full items-center space-x-2"
-      >
-        <PlusIcon width={16} height={16} />
-        <span>New Conversation</span>
-      </Button>
-    </div>
-  )
-}
-
-export default React.memo(LeftHeaderAction)
diff --git a/web/app/_components/LeftRibbonNav/index.tsx b/web/app/_components/LeftRibbonNav/index.tsx
deleted file mode 100644
index c315d0682..000000000
--- a/web/app/_components/LeftRibbonNav/index.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import {
-  MainViewState,
-  getMainViewStateAtom,
-  setMainViewStateAtom,
-} from '@helpers/atoms/MainView.atom'
-
-import CompactLogo from '../../../containers/Logo/CompactLogo'
-import {
-  ChatBubbleOvalLeftEllipsisIcon,
-  Cog8ToothIcon,
-  CpuChipIcon,
-  CubeTransparentIcon,
-  Squares2X2Icon,
-} from '@heroicons/react/24/outline'
-import { useAtomValue, useSetAtom } from 'jotai'
-import { showingBotListModalAtom } from '@helpers/atoms/Modal.atom'
-import { useGetDownloadedModels } from '@hooks/useGetDownloadedModels'
-import useGetBots from '@hooks/useGetBots'
-
-import { Icons, Toggle } from '@uikit'
-
-const menu = [
-  // {
-  //   name: 'Explore Models',
-  //   icon: <CpuChipIcon />,
-  //   state: MainViewState.ExploreModel,
-  // },
-  {
-    name: 'My Models',
-    icon: <Icons name="layout-grid" />,
-    state: MainViewState.MyModel,
-  },
-  {
-    name: 'Settings',
-    icon: <Icons name="settings" />,
-    state: MainViewState.Setting,
-  },
-]
-
-const LeftRibbonNav: React.FC = () => {
-  const currentState = useAtomValue(getMainViewStateAtom)
-  const setMainViewState = useSetAtom(setMainViewStateAtom)
-  const setBotListModal = useSetAtom(showingBotListModalAtom)
-  const { downloadedModels } = useGetDownloadedModels()
-  const { getAllBots } = useGetBots()
-
-  const onMenuClick = (mainViewState: MainViewState) => {
-    if (currentState === mainViewState) return
-    setMainViewState(mainViewState)
-  }
-
-  const isConversationView = currentState === MainViewState.Conversation
-  const bgColor = isConversationView ? 'bg-gray-500' : ''
-
-  const onConversationClick = () => {
-    // if (currentState === MainViewState.Conversation) return
-    setMainViewState(MainViewState.Conversation)
-  }
-
-  const onBotListClick = async () => {
-    const bots = await getAllBots()
-    if (bots?.length === 0) {
-      alert('You have no bot')
-      return
-    }
-
-    if (downloadedModels.length === 0) {
-      alert('You have no model downloaded')
-      return
-    }
-
-    setBotListModal(true)
-  }
-
-  return (
-    <nav className="flex h-screen flex-shrink-0 flex-col items-center pt-10">
-      <CompactLogo />
-      <div className="flex w-full flex-1 flex-col items-center justify-between">
-        <div className="flex flex-col pt-4">
-          <button onClick={onConversationClick}>
-            <ChatBubbleOvalLeftEllipsisIcon
-              width={24}
-              height={24}
-              color="text-white"
-            />
-          </button>
-          <button onClick={onBotListClick}>
-            <CubeTransparentIcon />
-          </button>
-        </div>
-        <ul className="flex flex-col gap-3 py-8">
-          {menu.map((item) => {
-            const bgColor = currentState === item.state ? 'bg-gray-500' : ''
-            return (
-              <li
-                role="button"
-                key={item.name}
-                className="item-center flex gap-x-2"
-                onClick={() => onMenuClick(item.state)}
-              >
-                {item.icon}
-                <span className="text-xs">{item.name}</span>
-              </li>
-            )
-          })}
-        </ul>
-      </div>
-      {/* User avatar */}
-      {/* <div className="pb-5 flex items-center justify-center">
-        <Image src={"/icons/avatar.svg"} width={40} height={40} alt="" />
-      </div> */}
-    </nav>
-  )
-}
-
-export default LeftRibbonNav
diff --git a/web/app/_components/LoginButton/index.tsx b/web/app/_components/LoginButton/index.tsx
deleted file mode 100644
index 2865d45b9..000000000
--- a/web/app/_components/LoginButton/index.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-'use client'
-
-const LoginButton: React.FC = () => {
-  // const { signInWithKeyCloak } = useSignIn();
-  // const { user, loading } = useGetCurrentUser();
-
-  // if (loading || user) {
-  //   return <div />;
-  // }
-  // return (
-  //   <div className="hidden lg:block">
-  //     <button
-  //       onClick={signInWithKeyCloak}
-  //       type="button"
-  //       className="rounded-md bg-blue-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
-  //     >
-  //       Login
-  //     </button>
-  //   </div>
-  // );
-  return <div />
-}
-
-export default LoginButton
diff --git a/web/app/_components/MainChat/index.tsx b/web/app/_components/MainChat/index.tsx
deleted file mode 100644
index 063368218..000000000
--- a/web/app/_components/MainChat/index.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import ChatBody from '../ChatBody'
-import InputToolbar from '../InputToolbar'
-
-const MainChat: React.FC = () => (
-  <div className="flex h-full w-full flex-col">
-    <ChatBody />
-    <InputToolbar />
-  </div>
-)
-
-export default MainChat
diff --git a/web/app/_components/MainContainer/index.tsx b/web/app/_components/MainContainer/index.tsx
deleted file mode 100644
index 19bf18646..000000000
--- a/web/app/_components/MainContainer/index.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react'
-import LeftContainer from '../LeftContainer'
-import LeftRibbonNav from '../LeftRibbonNav'
-import MonitorBar from '../MonitorBar'
-import RightContainer from '../RightContainer'
-import CenterContainer from '../CenterContainer'
-
-const MainContainer: React.FC = () => (
-  <div className="flex h-screen">
-    <LeftRibbonNav />
-    <div className="flex flex-1 flex-col ">
-      <div className="flex flex-1 overflow-hidden">
-        <LeftContainer />
-        <CenterContainer />
-        <RightContainer />
-      </div>
-      <MonitorBar />
-    </div>
-  </div>
-)
-
-export default MainContainer
diff --git a/web/app/_components/MainView/index.tsx b/web/app/_components/MainView/index.tsx
deleted file mode 100644
index bcf70590b..000000000
--- a/web/app/_components/MainView/index.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-'use client'
-
-import { useAtomValue } from 'jotai'
-import Welcome from '../WelcomeContainer'
-import { Preferences } from '../Preferences'
-import MyModelContainer from '../MyModelContainer'
-import ExploreModelContainer from '../ExploreModelContainer'
-import {
-  MainViewState,
-  getMainViewStateAtom,
-} from '@helpers/atoms/MainView.atom'
-import EmptyChatContainer from '../EmptyChatContainer'
-import MainChat from '../MainChat'
-import CreateBotContainer from '../CreateBotContainer'
-
-const MainView: React.FC = () => {
-  const viewState = useAtomValue(getMainViewStateAtom)
-
-  let children = null
-  switch (viewState) {
-    case MainViewState.ConversationEmptyModel:
-      children = <EmptyChatContainer />
-      break
-    case MainViewState.ExploreModel:
-      children = <ExploreModelContainer />
-      break
-    case MainViewState.Setting:
-      children = <Preferences />
-      break
-    case MainViewState.ResourceMonitor:
-    case MainViewState.MyModel:
-      children = <MyModelContainer />
-      break
-    case MainViewState.CreateBot:
-      children = <CreateBotContainer />
-      break
-    case MainViewState.Welcome:
-      children = <Welcome />
-      break
-    default:
-      children = <MainChat />
-      break
-  }
-
-  return <div className="flex-1 overflow-hidden">{children}</div>
-}
-
-export default MainView
diff --git a/web/app/_components/MenuHeader/index.tsx b/web/app/_components/MenuHeader/index.tsx
deleted file mode 100644
index 07baf71a9..000000000
--- a/web/app/_components/MenuHeader/index.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import Link from 'next/link'
-import { Popover, Transition } from '@headlessui/react'
-import { Fragment } from 'react'
-// import useGetCurrentUser from "@/_hooks/useGetCurrentUser";
-import { useSetAtom } from 'jotai'
-import { showConfirmSignOutModalAtom } from '@helpers/atoms/Modal.atom'
-
-export const MenuHeader: React.FC = () => {
-  const setShowConfirmSignOutModal = useSetAtom(showConfirmSignOutModalAtom)
-  // const { user } = useGetCurrentUser();
-
-  return <div></div>
-
-  // return (
-  //   <Transition
-  //     as={Fragment}
-  //     enter="transition ease-out duration-200"
-  //     enterFrom="opacity-0 translate-y-1"
-  //     enterTo="opacity-100 translate-y-0"
-  //     leave="transition ease-in duration-150"
-  //     leaveFrom="opacity-100 translate-y-0"
-  //     leaveTo="opacity-0 translate-y-1"
-  //   >
-  //     <Popover.Panel className="absolute shadow-profile -right-2 top-full z-10 mt-3 w-[224px] overflow-hidden rounded-[6px] bg-white shadow-lg ring-1 ring-gray-200">
-  //       <div className="py-3 px-4 gap-2 flex flex-col">
-  //         <h2 className="text-[20px] leading-[25px] tracking-[-0.4px] font-bold text-[#111928]">
-  //           {user.displayName}
-  //         </h2>
-  //         <span className="text-[#6B7280] leading-[17.5px] text-sm">
-  //           {user.email}
-  //         </span>
-  //       </div>
-  //       <hr />
-  //       <button
-  //         onClick={() => setShowConfirmSignOutModal(true)}
-  //         className="px-4 py-3 text-sm w-full text-left text-gray-700"
-  //       >
-  //         Sign Out
-  //       </button>
-  //       <hr />
-  //       <div className="flex gap-2 px-4 py-2 justify-center items-center">
-  //         <Link href="/privacy">
-  //           <span className="text-[#6B7280] text-xs">Privacy</span>
-  //         </Link>
-  //         <div className="w-1 h-1 bg-[#D9D9D9] rounded-lg" />
-  //         <Link href="/support">
-  //           <span className="text-[#6B7280] text-xs">Support</span>
-  //         </Link>
-  //       </div>
-  //     </Popover.Panel>
-  //   </Transition>
-  // );
-}
diff --git a/web/app/_components/MobileMenuPane/index.tsx b/web/app/_components/MobileMenuPane/index.tsx
deleted file mode 100644
index b99f2d472..000000000
--- a/web/app/_components/MobileMenuPane/index.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import React, { useRef } from 'react'
-import { Dialog } from '@headlessui/react'
-import { XMarkIcon } from '@heroicons/react/24/outline'
-import Image from 'next/image'
-import { useAtom } from 'jotai'
-import { showingMobilePaneAtom } from '@helpers/atoms/Modal.atom'
-
-const MobileMenuPane: React.FC = () => {
-  const [show, setShow] = useAtom(showingMobilePaneAtom)
-  let loginRef = useRef(null)
-
-  return (
-    <Dialog
-      as="div"
-      open={show}
-      initialFocus={loginRef}
-      onClose={() => setShow(false)}
-    >
-      <div className="fixed inset-0 z-10" />
-      <Dialog.Panel className="fixed inset-y-0 right-0 z-10 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
-        <div className="flex items-center justify-between">
-          <a href="#" className="-m-1.5 p-1.5">
-            <span className="sr-only">Your Company</span>
-            <Image
-              className="h-8 w-auto"
-              width={32}
-              height={32}
-              src="icons/app_icon.svg"
-              alt=""
-            />
-          </a>
-          <button
-            type="button"
-            className="-m-2.5 rounded-md p-2.5 text-gray-700"
-            onClick={() => setShow(false)}
-          >
-            <span className="sr-only">Close menu</span>
-            <XMarkIcon className="h-6 w-6" aria-hidden="true" />
-          </button>
-        </div>
-        <div className="mt-6 flow-root">
-          <div className="-my-6 divide-y divide-gray-500/10">
-            <div className="space-y-2 py-6" />
-            <div className="py-6">
-              <a
-                ref={loginRef}
-                href="#"
-                className="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
-              >
-                Log in
-              </a>
-            </div>
-          </div>
-        </div>
-      </Dialog.Panel>
-    </Dialog>
-  )
-}
-
-export default MobileMenuPane
diff --git a/web/app/_components/ModelActionButton/index.tsx b/web/app/_components/ModelActionButton/index.tsx
deleted file mode 100644
index 346d0afc2..000000000
--- a/web/app/_components/ModelActionButton/index.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React from 'react'
-import { Button } from '@uikit'
-import ModelActionMenu from '../ModelActionMenu'
-
-export enum ModelActionType {
-  Start = 'Start',
-  Stop = 'Stop',
-}
-
-type ModelActionStyle = {
-  title: string
-}
-
-const modelActionMapper: Record<ModelActionType, ModelActionStyle> = {
-  [ModelActionType.Start]: {
-    title: 'Start',
-  },
-  [ModelActionType.Stop]: {
-    title: 'Stop',
-  },
-}
-
-type Props = {
-  disabled?: boolean
-  loading?: boolean
-  type: ModelActionType
-  onActionClick: (type: ModelActionType) => void
-  onDeleteClick: () => void
-}
-
-const ModelActionButton: React.FC<Props> = ({
-  disabled,
-  loading,
-  type,
-  onActionClick,
-  onDeleteClick,
-}) => {
-  const styles = modelActionMapper[type]
-
-  const onClick = () => {
-    onActionClick(type)
-  }
-  return (
-    <td className="whitespace-nowrap px-3 py-2 text-right">
-      <div className="flex items-center justify-end gap-x-4">
-        <ModelActionMenu onDeleteClick={onDeleteClick} />
-        <Button
-          disabled={disabled}
-          size="sm"
-          themes={styles.title === 'Start' ? 'accent' : 'default'}
-          onClick={() => onClick()}
-          loading={loading}
-        >
-          {styles.title} Model
-        </Button>
-      </div>
-    </td>
-  )
-}
-
-export default ModelActionButton
diff --git a/web/app/_components/ModelActionMenu/index.tsx b/web/app/_components/ModelActionMenu/index.tsx
deleted file mode 100644
index 67a8499cf..000000000
--- a/web/app/_components/ModelActionMenu/index.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Menu, Transition } from '@headlessui/react'
-import { EllipsisVerticalIcon } from '@heroicons/react/20/solid'
-import { Fragment } from 'react'
-
-type Props = {
-  onDeleteClick: () => void
-}
-
-const ModelActionMenu: React.FC<Props> = ({ onDeleteClick }) => (
-  <button className="text-muted-foreground text-xs" onClick={onDeleteClick}>
-    Delete
-  </button>
-)
-
-export default ModelActionMenu
diff --git a/web/app/_components/ModelDownloadButton/index.tsx b/web/app/_components/ModelDownloadButton/index.tsx
deleted file mode 100644
index 144369eaa..000000000
--- a/web/app/_components/ModelDownloadButton/index.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { ArrowDownTrayIcon } from '@heroicons/react/24/outline'
-
-type Props = {
-  callback: () => void
-}
-
-const ModelDownloadButton: React.FC<Props> = ({ callback }) => {
-  return (
-    <button
-      className="flex items-center gap-2 rounded-lg bg-[#1A56DB] px-3 py-2"
-      onClick={callback}
-    >
-      <ArrowDownTrayIcon width={16} height={16} color="#FFFFFF" />
-      <span className="text-xs font-medium leading-[18px] text-[#fff]">
-        Download
-      </span>
-    </button>
-  )
-}
-
-export default ModelDownloadButton
diff --git a/web/app/_components/ModelDownloadingButton/index.tsx b/web/app/_components/ModelDownloadingButton/index.tsx
deleted file mode 100644
index 2dbc0ac4e..000000000
--- a/web/app/_components/ModelDownloadingButton/index.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { toGigabytes } from '@utils/converter'
-
-type Props = {
-  total: number
-  value: number
-}
-
-const ModelDownloadingButton: React.FC<Props> = ({ total, value }) => {
-  return (
-    <div className="flex flex-col gap-1">
-      <button className="flex gap-2 rounded-lg border border-gray-200 px-3 py-2 text-xs leading-[18px]">
-        Downloading...
-      </button>
-      <div className="rounded bg-gray-200 px-2.5 py-0.5">
-        <span className="text-xs font-medium text-gray-800">
-          {toGigabytes(value)} / {toGigabytes(total)}
-        </span>
-      </div>
-    </div>
-  )
-}
-
-export default ModelDownloadingButton
diff --git a/web/app/_components/ModelDownloadingRow/index.tsx b/web/app/_components/ModelDownloadingRow/index.tsx
deleted file mode 100644
index affe399d7..000000000
--- a/web/app/_components/ModelDownloadingRow/index.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react'
-
-import {
-  formatDownloadPercentage,
-  formatDownloadSpeed,
-  toGigabytes,
-} from '@utils/converter'
-
-type Props = {
-  downloadState: DownloadState
-}
-
-const ModelDownloadingRow: React.FC<Props> = ({ downloadState }) => (
-  <tr
-    className="border-b border-gray-200 last:rounded-lg last:border-b-0"
-    key={downloadState.fileName}
-  >
-    <td className="flex flex-col whitespace-nowrap px-6 py-4 text-sm font-medium text-gray-900">
-      {downloadState.fileName}
-    </td>
-    <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-500">
-      {toGigabytes(downloadState.size.transferred)}
-    </td>
-    <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-500">
-      {toGigabytes(downloadState.size.total)}
-    </td>
-    <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-500">
-      {formatDownloadPercentage(downloadState.percent)}
-    </td>
-    <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-500">
-      {formatDownloadSpeed(downloadState.speed)}
-    </td>
-  </tr>
-)
-
-export default ModelDownloadingRow
diff --git a/web/app/_components/ModelDownloadingTable/index.tsx b/web/app/_components/ModelDownloadingTable/index.tsx
deleted file mode 100644
index 29f8b0084..000000000
--- a/web/app/_components/ModelDownloadingTable/index.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react'
-import ModelTableHeader from '../ModelTableHeader'
-import ModelDownloadingRow from '../ModelDownloadingRow'
-
-type Props = {
-  downloadStates: DownloadState[]
-}
-
-const tableHeaders = ['MODEL', 'TRANSFERRED', 'SIZE', 'PERCENTAGE', 'SPEED']
-
-const ModelDownloadingTable: React.FC<Props> = ({ downloadStates }) => (
-  <div className="flow-root min-w-full rounded-lg border border-gray-200 align-middle shadow-lg">
-    <table className="min-w-full">
-      <thead className="border-b border-gray-200 bg-gray-50">
-        <tr className="rounded-t-lg">
-          {tableHeaders.map((item) => (
-            <ModelTableHeader key={item} title={item} />
-          ))}
-          <th scope="col" className="relative w-fit px-6 py-3">
-            <span className="sr-only">Edit</span>
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        {downloadStates.map((state) => (
-          <ModelDownloadingRow key={state.fileName} downloadState={state} />
-        ))}
-      </tbody>
-    </table>
-  </div>
-)
-
-export default React.memo(ModelDownloadingTable)
diff --git a/web/app/_components/ModelInfoItem/index.tsx b/web/app/_components/ModelInfoItem/index.tsx
deleted file mode 100644
index 95c5acf27..000000000
--- a/web/app/_components/ModelInfoItem/index.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react'
-
-type Props = {
-  name: string
-  description: string
-}
-
-const ModelInfoItem: React.FC<Props> = ({ description, name }) => (
-  <div className="flex flex-1 flex-col">
-    <span className="text-sm font-normal text-gray-500">{name}</span>
-    <span className="text-sm font-normal">{description}</span>
-  </div>
-)
-
-export default React.memo(ModelInfoItem)
diff --git a/web/app/_components/ModelRow/index.tsx b/web/app/_components/ModelRow/index.tsx
deleted file mode 100644
index 371709e2f..000000000
--- a/web/app/_components/ModelRow/index.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import React, { useCallback } from 'react'
-import { ModelStatus, ModelStatusComponent } from '../ModelStatusComponent'
-import { useAtomValue } from 'jotai'
-import ModelActionButton, { ModelActionType } from '../ModelActionButton'
-import useStartStopModel from '@hooks/useStartStopModel'
-import useDeleteModel from '@hooks/useDeleteModel'
-import { activeModelAtom, stateModel } from '@helpers/atoms/Model.atom'
-import { toGigabytes } from '@utils/converter'
-import { Model } from '@janhq/core/lib/types'
-
-type Props = {
-  model: Model
-}
-
-const ModelRow: React.FC<Props> = ({ model }) => {
-  const { startModel, stopModel } = useStartStopModel()
-  const activeModel = useAtomValue(activeModelAtom)
-  const { deleteModel } = useDeleteModel()
-  const { loading, model: currentModelState } = useAtomValue(stateModel)
-
-  let status = ModelStatus.Installed
-  if (activeModel && activeModel._id === model._id) {
-    status = ModelStatus.Active
-  }
-
-  let actionButtonType = ModelActionType.Start
-  if (activeModel && activeModel._id === model._id) {
-    actionButtonType = ModelActionType.Stop
-  }
-
-  const onModelActionClick = (action: ModelActionType) => {
-    if (action === ModelActionType.Start) {
-      startModel(model._id)
-    } else {
-      stopModel(model._id)
-    }
-  }
-
-  const onDeleteClick = useCallback(() => {
-    deleteModel(model)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [model])
-
-  return (
-    <tr className="border-b border-border bg-background/50 last:rounded-lg last:border-b-0">
-      <td className="whitespace-nowrap px-3 font-semibold text-muted-foreground">
-        {model.name}
-        <span className="ml-2 font-semibold">v{model.version}</span>
-      </td>
-      <td className="whitespace-nowrap px-3 text-muted-foreground">
-        <div className="flex flex-col justify-start">
-          <span>GGUF</span>
-        </div>
-      </td>
-      <td className="whitespace-nowrap px-3 text-muted-foreground">
-        {toGigabytes(model.size)}
-      </td>
-      <td className="whitespace-nowrap px-3 text-muted-foreground">
-        <ModelStatusComponent status={status} />
-      </td>
-      <ModelActionButton
-        disabled={loading}
-        loading={currentModelState === model._id ? loading : false}
-        type={actionButtonType}
-        onActionClick={onModelActionClick}
-        onDeleteClick={onDeleteClick}
-      />
-    </tr>
-  )
-}
-
-export default ModelRow
diff --git a/web/app/_components/ModelSearchBar/index.tsx b/web/app/_components/ModelSearchBar/index.tsx
deleted file mode 100644
index 2d62d2b68..000000000
--- a/web/app/_components/ModelSearchBar/index.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-'use client'
-
-import { searchingModelText } from '@helpers/JotaiWrapper'
-import { MagnifyingGlassIcon } from '@heroicons/react/24/outline'
-import { useSetAtom } from 'jotai'
-import { useEffect, useState } from 'react'
-
-const ModelSearchBar: React.FC = () => {
-  const setSearchtext = useSetAtom(searchingModelText)
-  const [text, setText] = useState('')
-  useEffect(() => {
-    setSearchtext(text)
-  }, [text, setSearchtext])
-  return (
-    <div className="flex items-center justify-center py-[27px]">
-      <div className="flex h-[42px] w-[520px] items-center">
-        <input
-          className="h-full flex-1 rounded-bl-lg rounded-tl-lg border border-gray-300 bg-gray-300 px-4 py-3 text-sm leading-[17.5px] outline-none"
-          placeholder="Search model"
-          value={text}
-          onChange={(text) => setText(text.currentTarget.value)}
-        />
-        <button className="flex h-[42px] w-[42px] items-center justify-center rounded-br-lg rounded-tr-lg border border-gray-800 bg-gray-800 p-2">
-          <MagnifyingGlassIcon width={20} height={20} color="#FFFFFF" />
-        </button>
-      </div>
-    </div>
-  )
-}
-
-export default ModelSearchBar
diff --git a/web/app/_components/ModelSelector/index.tsx b/web/app/_components/ModelSelector/index.tsx
deleted file mode 100644
index 7c3f75d4e..000000000
--- a/web/app/_components/ModelSelector/index.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import { Fragment, useEffect } from 'react'
-import { Listbox, Transition } from '@headlessui/react'
-import { CheckIcon, ChevronUpDownIcon } from '@heroicons/react/20/solid'
-import { useAtom, useAtomValue } from 'jotai'
-import { selectedModelAtom } from '@helpers/atoms/Model.atom'
-import { downloadedModelAtom } from '@helpers/atoms/DownloadedModel.atom'
-import { Model } from '@janhq/core/lib/types'
-
-function classNames(...classes: any) {
-  return classes.filter(Boolean).join(' ')
-}
-
-const SelectModels: React.FC = () => {
-  const downloadedModels = useAtomValue(downloadedModelAtom)
-  const [selectedModel, setSelectedModel] = useAtom(selectedModelAtom)
-
-  useEffect(() => {
-    if (downloadedModels && downloadedModels.length > 0) {
-      onModelSelected(downloadedModels[0])
-    }
-  }, [downloadedModels])
-
-  const onModelSelected = (model: Model) => {
-    setSelectedModel(model)
-  }
-
-  if (!selectedModel) {
-    return <div>You have not downloaded any model!</div>
-  }
-
-  return (
-    <Listbox value={selectedModel} onChange={onModelSelected}>
-      {({ open }) => (
-        <div className="w-[461px]">
-          <Listbox.Label className="block text-sm font-medium leading-6 text-gray-900">
-            Select a Model:
-          </Listbox.Label>
-          <div className="relative mt-[19px]">
-            <Listbox.Button className="relative w-full cursor-default rounded-md bg-white py-1.5 pl-3 pr-10 text-left text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 sm:text-sm sm:leading-6">
-              <span className="flex items-center">
-                <img
-                  src={selectedModel.avatarUrl}
-                  alt=""
-                  className="h-5 w-5 flex-shrink-0 rounded-full"
-                />
-                <span className="ml-3 block truncate">
-                  {selectedModel.name}
-                </span>
-              </span>
-              <span className="pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2">
-                <ChevronUpDownIcon
-                  className="h-5 w-5 text-gray-400"
-                  aria-hidden="true"
-                />
-              </span>
-            </Listbox.Button>
-
-            <Transition
-              show={open}
-              as={Fragment}
-              leave="transition ease-in duration-100"
-              leaveFrom="opacity-100"
-              leaveTo="opacity-0"
-            >
-              <Listbox.Options className="absolute z-10 mt-1 max-h-[188px] w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
-                {downloadedModels.map((model) => (
-                  <Listbox.Option
-                    key={model._id}
-                    className={({ active }) =>
-                      classNames(
-                        active ? 'bg-blue-600 text-white' : 'text-gray-900',
-                        'relative cursor-default select-none py-2 pl-3 pr-9'
-                      )
-                    }
-                    value={model}
-                  >
-                    {({ selected, active }) => (
-                      <>
-                        <div className="flex items-center">
-                          <img
-                            src={model.avatarUrl}
-                            alt=""
-                            className="h-5 w-5 flex-shrink-0 rounded-full"
-                          />
-                          <span
-                            className={classNames(
-                              selected ? 'font-semibold' : 'font-normal',
-                              'ml-3 block truncate'
-                            )}
-                          >
-                            {model.name}
-                          </span>
-                        </div>
-
-                        {selected ? (
-                          <span
-                            className={classNames(
-                              active ? 'text-white' : 'text-blue-600',
-                              'absolute inset-y-0 right-0 flex items-center pr-4'
-                            )}
-                          >
-                            <CheckIcon className="h-5 w-5" aria-hidden="true" />
-                          </span>
-                        ) : null}
-                      </>
-                    )}
-                  </Listbox.Option>
-                ))}
-              </Listbox.Options>
-            </Transition>
-          </div>
-        </div>
-      )}
-    </Listbox>
-  )
-}
-
-export default SelectModels
diff --git a/web/app/_components/ModelStatusComponent/index.tsx b/web/app/_components/ModelStatusComponent/index.tsx
deleted file mode 100644
index 3dcb95c36..000000000
--- a/web/app/_components/ModelStatusComponent/index.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import React from 'react'
-
-export type ModelStatusType = {
-  title: string
-  textColor: string
-  backgroundColor: string
-}
-
-export enum ModelStatus {
-  Installed,
-  Active,
-  RunningInNitro,
-}
-
-export const ModelStatusMapper: Record<ModelStatus, ModelStatusType> = {
-  [ModelStatus.Installed]: {
-    title: 'Installed',
-    textColor: 'text-black',
-    backgroundColor: 'bg-gray-200 text-gray-600',
-  },
-  [ModelStatus.Active]: {
-    title: 'Active',
-    textColor: 'text-green-800',
-    backgroundColor: 'bg-green-100 dark:bg-green-300 text-green-700',
-  },
-  [ModelStatus.RunningInNitro]: {
-    title: 'Running in Nitro',
-    textColor: 'text-green-800',
-    backgroundColor: 'bg-green-100 dark:bg-green-300 text-green-700',
-  },
-}
-
-type Props = {
-  status: ModelStatus
-}
-
-export const ModelStatusComponent: React.FC<Props> = ({ status }) => {
-  const statusType = ModelStatusMapper[status]
-  return (
-    <div
-      className={`w-fit rounded-full px-2.5 py-0.5 text-xs font-medium ${statusType.backgroundColor}`}
-    >
-      {statusType.title}
-    </div>
-  )
-}
diff --git a/web/app/_components/ModelTable/index.tsx b/web/app/_components/ModelTable/index.tsx
deleted file mode 100644
index eb6d891b4..000000000
--- a/web/app/_components/ModelTable/index.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react'
-import ModelRow from '../ModelRow'
-import ModelTableHeader from '../ModelTableHeader'
-import { Model } from '@janhq/core/lib/types'
-
-type Props = {
-  models: Model[]
-}
-
-const tableHeaders = ['MODEL', 'FORMAT', 'SIZE', 'STATUS', 'ACTIONS']
-
-const ModelTable: React.FC<Props> = ({ models }) => (
-  <>
-    <div className="overflow-hidden rounded-lg border border-border align-middle shadow-lg">
-      <table className="min-w-full">
-        <thead className="bg-background">
-          <tr className="rounded-t-lg">
-            {tableHeaders.map((item) => (
-              <ModelTableHeader key={item} title={item} />
-            ))}
-          </tr>
-        </thead>
-        <tbody>
-          {models?.map((model) => (
-            <ModelRow key={model._id} model={model} />
-          ))}
-        </tbody>
-      </table>
-    </div>
-    <div className="relative"></div>
-  </>
-)
-
-export default React.memo(ModelTable)
diff --git a/web/app/_components/ModelTableHeader/index.tsx b/web/app/_components/ModelTableHeader/index.tsx
deleted file mode 100644
index df00882c6..000000000
--- a/web/app/_components/ModelTableHeader/index.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react'
-
-type Props = {
-  title: string
-}
-
-const ModelTableHeader: React.FC<Props> = ({ title }) => (
-  <th
-    scope="col"
-    className="text-muted-foreground border-border border-b p-3 text-left text-xs font-semibold uppercase first:rounded-tl-lg last:rounded-tr-lg last:text-right"
-  >
-    {title}
-  </th>
-)
-
-export default React.memo(ModelTableHeader)
diff --git a/web/app/_components/ModelVersionItem/index.tsx b/web/app/_components/ModelVersionItem/index.tsx
deleted file mode 100644
index 9a431eecd..000000000
--- a/web/app/_components/ModelVersionItem/index.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import React, { useMemo } from 'react'
-import { formatDownloadPercentage, toGigabytes } from '@utils/converter'
-import useDownloadModel from '@hooks/useDownloadModel'
-import { modelDownloadStateAtom } from '@helpers/atoms/DownloadState.atom'
-import { atom, useAtomValue } from 'jotai'
-import { useGetDownloadedModels } from '@hooks/useGetDownloadedModels'
-import SimpleTag from '../SimpleTag'
-import { RamRequired, UsecaseTag } from '../SimpleTag/TagType'
-import { ModelCatalog, ModelVersion } from '@janhq/core/lib/types'
-
-type Props = {
-  model: ModelCatalog
-  modelVersion: ModelVersion
-  isRecommended: boolean
-}
-
-const ModelVersionItem: React.FC<Props> = ({
-  model,
-  modelVersion,
-  isRecommended,
-}) => {
-  const { downloadModel } = useDownloadModel()
-  const { downloadedModels } = useGetDownloadedModels()
-  const isDownloaded =
-    downloadedModels.find((model) => model._id === modelVersion._id) != null
-
-  const downloadAtom = useMemo(
-    () => atom((get) => get(modelDownloadStateAtom)[modelVersion._id ?? '']),
-    [modelVersion._id]
-  )
-  const downloadState = useAtomValue(downloadAtom)
-
-  const onDownloadClick = () => {
-    downloadModel(model, modelVersion)
-  }
-
-  let downloadButton = (
-    <button
-      className="text-sm font-medium text-indigo-600"
-      onClick={onDownloadClick}
-    >
-      Download
-    </button>
-  )
-
-  if (downloadState) {
-    downloadButton = (
-      <div>{formatDownloadPercentage(downloadState.percent)}</div>
-    )
-  } else if (isDownloaded) {
-    downloadButton = <div>Downloaded</div>
-  }
-
-  const { maxRamRequired, usecase } = modelVersion
-
-  return (
-    <div className="border-border flex items-center justify-between gap-4 border-t pb-3 pl-3 pr-4 pt-3 first:border-t-0">
-      <div className="flex items-center gap-2">
-        <span className="font-sm text-muted-foreground mb-4 line-clamp-1 flex-1">
-          {modelVersion.name}
-        </span>
-      </div>
-      <div className="flex items-center gap-4">
-        <div className="flex justify-end gap-2">
-          <SimpleTag
-            title={usecase}
-            type={UsecaseTag.UsecaseDefault}
-            clickable={false}
-          />
-          <SimpleTag
-            title={`${toGigabytes(maxRamRequired)} RAM required`}
-            type={RamRequired.RamDefault}
-            clickable={false}
-          />
-          <div className="bg-background border-border rounded-full border px-2.5 py-0.5 font-medium">
-            {toGigabytes(modelVersion.size)}
-          </div>
-        </div>
-        {downloadButton}
-      </div>
-    </div>
-  )
-}
-
-export default ModelVersionItem
diff --git a/web/app/_components/MonitorBar/index.tsx b/web/app/_components/MonitorBar/index.tsx
deleted file mode 100644
index 6dc9d58a7..000000000
--- a/web/app/_components/MonitorBar/index.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import ProgressBar from '@/_components/ProgressBar'
-import SystemItem from '@containers/SystemItem'
-import { useAtomValue } from 'jotai'
-import { appDownloadProgress } from '@helpers/JotaiWrapper'
-import useGetAppVersion from '@hooks/useGetAppVersion'
-import useGetSystemResources from '@hooks/useGetSystemResources'
-import { modelDownloadStateAtom } from '@helpers/atoms/DownloadState.atom'
-import { formatDownloadPercentage } from '@utils/converter'
-import { activeModelAtom } from '@helpers/atoms/Model.atom'
-
-const MonitorBar: React.FC = () => {
-  const progress = useAtomValue(appDownloadProgress)
-  const activeModel = useAtomValue(activeModelAtom)
-  const { version } = useGetAppVersion()
-  const { ram, cpu } = useGetSystemResources()
-  const modelDownloadStates = useAtomValue(modelDownloadStateAtom)
-
-  const downloadStates: DownloadState[] = []
-  for (const [, value] of Object.entries(modelDownloadStates)) {
-    downloadStates.push(value)
-  }
-
-  return (
-    <div className="flex flex-row items-center justify-between">
-      {progress && progress >= 0 ? (
-        <ProgressBar total={100} used={progress} />
-      ) : null}
-      <div className="flex flex-1 items-center justify-end gap-8 px-2">
-        {downloadStates.length > 0 && (
-          <SystemItem
-            name="Downloading"
-            value={`${downloadStates[0].fileName}: ${formatDownloadPercentage(
-              downloadStates[0].percent
-            )}`}
-          />
-        )}
-        <SystemItem name="CPU" value={`${cpu}%`} />
-        <SystemItem name="Mem" value={`${ram}%`} />
-        {activeModel && (
-          <SystemItem name={`Active model: ${activeModel.name}`} value={''} />
-        )}
-        <span className="text-xs">v{version}</span>
-      </div>
-    </div>
-  )
-}
-
-export default MonitorBar
diff --git a/web/app/_components/MyModelContainer/index.tsx b/web/app/_components/MyModelContainer/index.tsx
deleted file mode 100644
index 1b6be685b..000000000
--- a/web/app/_components/MyModelContainer/index.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import HeaderTitle from '../HeaderTitle'
-import DownloadedModelTable from '../DownloadedModelTable'
-import ActiveModelTable from '../ActiveModelTable'
-import DownloadingModelTable from '../DownloadingModelTable'
-
-const MyModelContainer: React.FC = () => (
-  <div className="flex flex-1 flex-col pt-[60px]">
-    <HeaderTitle title="My Models" className="pl-[63px] pr-[89px]" />
-    <div className="scroll overflow-y-auto pb-6">
-      <ActiveModelTable />
-      <DownloadingModelTable />
-      <DownloadedModelTable />
-    </div>
-  </div>
-)
-
-export default MyModelContainer
diff --git a/web/app/_components/Preferences.tsx b/web/app/_components/Preferences.tsx
deleted file mode 100644
index 7cb326f21..000000000
--- a/web/app/_components/Preferences.tsx
+++ /dev/null
@@ -1,397 +0,0 @@
-'use client'
-import { useContext, useEffect, useRef, useState } from 'react'
-import {
-  ChartPieIcon,
-  CommandLineIcon,
-  PlayIcon,
-} from '@heroicons/react/24/outline'
-
-import { MagnifyingGlassIcon } from '@heroicons/react/20/solid'
-import classNames from 'classnames'
-import LoadingIndicator from './LoadingIndicator'
-import { FeatureToggleContext } from '@helpers/FeatureToggleWrapper'
-import { pluginManager } from '@plugin/PluginManager'
-
-export const Preferences = () => {
-  const [search, setSearch] = useState<string>('')
-  const [activePlugins, setActivePlugins] = useState<any[]>([])
-  const [preferenceItems, setPreferenceItems] = useState<any[]>([])
-  const [preferenceValues, setPreferenceValues] = useState<any[]>([])
-  const [isTestAvailable, setIsTestAvailable] = useState(false)
-  const [fileName, setFileName] = useState('')
-  const [pluginCatalog, setPluginCatalog] = useState<any[]>([])
-  const [isLoading, setIsLoading] = useState<boolean>(false)
-  const experimentRef = useRef(null)
-  const preferenceRef = useRef(null)
-  const { experimentalFeatureEnabed } = useContext(FeatureToggleContext)
-  /**
-   * Loads the plugin catalog module from a CDN and sets it as the plugin catalog state.
-   */
-  useEffect(() => {
-    if (!window.electronAPI) {
-      return
-    }
-
-    // Get plugin manifest
-    import(/* webpackIgnore: true */ PLUGIN_CATALOG + `?t=${Date.now()}`).then(
-      (data) => {
-        if (Array.isArray(data.default) && experimentalFeatureEnabed)
-          setPluginCatalog(data.default)
-      }
-    )
-  }, [])
-
-  /**
-   * Fetches the active plugins and their preferences from the `plugins` and `preferences` modules.
-   * If the `experimentComponent` extension point is available, it executes the extension point and
-   * appends the returned components to the `experimentRef` element.
-   * If the `PluginPreferences` extension point is available, it executes the extension point and
-   * fetches the preferences for each plugin using the `preferences.get` function.
-   */
-  useEffect(() => {
-    const getActivePlugins = async () => {
-      const plgs = await pluginManager.getActive()
-      setActivePlugins(plgs)
-    }
-    getActivePlugins()
-  }, [])
-
-  /**
-   * Installs a plugin by calling the `plugins.install` function with the plugin file path.
-   * If the installation is successful, the application is relaunched using the `coreAPI.relaunch` function.
-   * @param e - The event object.
-   */
-  const install = async (e: any) => {
-    e.preventDefault()
-    //@ts-ignore
-    const pluginFile = new FormData(e.target).get('plugin-file').path
-
-    // Send the filename of the to be installed plugin
-    // to the main process for installation
-    const installed = await pluginManager.install([pluginFile])
-    if (installed) window.coreAPI?.relaunch()
-  }
-
-  /**
-   * Uninstalls a plugin by calling the `plugins.uninstall` function with the plugin name.
-   * If the uninstallation is successful, the application is relaunched using the `coreAPI.relaunch` function.
-   * @param name - The name of the plugin to uninstall.
-   */
-  const uninstall = async (name: string) => {
-    // Send the filename of the to be uninstalled plugin
-    // to the main process for removal
-    const res = await pluginManager.uninstall([name])
-    if (res) window.coreAPI?.relaunch()
-  }
-
-  /**
-   * Updates a plugin by calling the `window.pluggableElectronIpc.update` function with the plugin name.
-   * If the update is successful, the application is relaunched using the `window.coreAPI.relaunch` function.
-   * TODO: should update using window.coreAPI rather than pluggableElectronIpc (Plugin Manager Facades)
-   * @param plugin - The name of the plugin to update.
-   */
-  const update = async (plugin: string) => {
-    if (typeof window !== 'undefined') {
-      // @ts-ignore
-      await window.pluggableElectronIpc.update([plugin], true)
-      window.coreAPI?.relaunch()
-    }
-  }
-
-  /**
-   * Downloads a remote plugin tarball and installs it using the `plugins.install` function.
-   * If the installation is successful, the application is relaunched using the `coreAPI.relaunch` function.
-   * @param pluginName - The name of the remote plugin to download and install.
-   */
-  const downloadTarball = async (pluginName: string) => {
-    setIsLoading(true)
-    const pluginPath = await window.coreAPI?.installRemotePlugin(pluginName)
-    const installed = await pluginManager.install([pluginPath])
-    setIsLoading(false)
-    if (installed) window.coreAPI.relaunch()
-  }
-  /**
-   * Notifies plugins of a preference update by executing the `PluginService.OnPreferencesUpdate` event.
-   * If a timeout is already set, it is cleared before setting a new timeout to execute the event.
-   */
-  let timeout: any | undefined = undefined
-  function notifyPreferenceUpdate() {
-    if (timeout) {
-      clearTimeout(timeout)
-    }
-  }
-
-  /**
-   * Handles the change event of the plugin file input element by setting the file name state.
-   * Its to be used to display the plugin file name of the selected file.
-   * @param event - The change event object.
-   */
-  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0]
-    if (file) {
-      setFileName(file.name)
-    } else {
-      setFileName('')
-    }
-  }
-
-  return (
-    <div className="h-screen w-full overflow-scroll">
-      <div className="sticky top-0 z-40 flex h-16 shrink-0 items-center gap-x-4 border-b border-gray-200 bg-white px-8 shadow-sm sm:gap-x-6 sm:px-6">
-        {/* Separator */}
-        <div className="hidden h-6 w-px bg-gray-900/10" aria-hidden="true" />
-
-        <div className="flex flex-1 gap-x-6 self-stretch">
-          <form className="relative flex flex-1" action="#" method="GET">
-            <label htmlFor="search-field" className="sr-only">
-              Search
-            </label>
-            <MagnifyingGlassIcon
-              className="pointer-events-none absolute inset-y-0 left-0 h-full w-5 text-gray-400"
-              aria-hidden="true"
-            />
-            <input
-              defaultValue={search}
-              onChange={(e) => setSearch(e.target.value)}
-              id="search-field"
-              className="block h-full w-full border-0 py-0 pl-8 pr-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm"
-              placeholder="Search..."
-              type="search"
-              name="search"
-            />
-          </form>
-        </div>
-      </div>
-
-      <main className="py-5">
-        <div className="px-8 sm:px-6">
-          {/* Content */}
-          <div className="my-4 flex flex-row items-center">
-            <ChartPieIcon width={30} />
-            Install Plugin
-          </div>
-          <form id="plugin-file" onSubmit={install}>
-            <div className="flex flex-row items-center space-x-10">
-              <div className="flex w-[300px] items-center justify-center">
-                <label className="dark:hover:bg-bray-800 flex h-[120px] w-full cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:hover:border-gray-500 dark:hover:bg-gray-600">
-                  {!fileName ? (
-                    <div className="flex flex-col items-center justify-center pb-6 pt-5">
-                      <p className="mb-2 text-sm text-gray-500 dark:text-gray-400">
-                        <span className="font-semibold">Click to upload</span>{' '}
-                        or drag and drop
-                      </p>
-                      <p className="text-xs text-gray-500 dark:text-gray-400">
-                        TGZ (MAX 50MB)
-                      </p>
-                    </div>
-                  ) : (
-                    <>{fileName}</>
-                  )}
-                  <input
-                    id="dropzone-file"
-                    name="plugin-file"
-                    type="file"
-                    className="hidden"
-                    onChange={handleFileChange}
-                    required
-                  />
-                </label>
-              </div>
-              <div className="flex flex-col space-y-2">
-                <button
-                  type="submit"
-                  className={classNames(
-                    'rounded-md px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600',
-                    fileName ? 'bg-blue-500 hover:bg-blue-300' : 'bg-gray-500'
-                  )}
-                >
-                  Install Plugin
-                </button>
-
-                <button
-                  className={classNames(
-                    'rounded-md bg-blue-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'
-                  )}
-                  onClick={() => {
-                    window.coreAPI?.reloadPlugins()
-                  }}
-                >
-                  Reload Plugins
-                </button>
-              </div>
-            </div>
-          </form>
-
-          <div className="my-4 flex flex-row items-center">
-            <CommandLineIcon width={30} />
-            Installed Plugins
-          </div>
-          <div className="grid grid-cols-2 items-stretch gap-4">
-            {activePlugins
-              .filter(
-                (e) =>
-                  search.trim() === '' ||
-                  e.name.toLowerCase().includes(search.toLowerCase())
-              )
-              .map((e) => (
-                <div
-                  key={e.name}
-                  data-testid="plugin-item"
-                  className="flex h-full flex-col rounded-sm border border-gray-200 bg-white p-6 dark:border-gray-300"
-                >
-                  <div className="flex flex-row items-center space-x-2">
-                    <span className="relative mt-1 inline-block">
-                      <img
-                        className="h-14 w-14 rounded-md"
-                        src={e.icon ?? 'icons/app_icon.svg'}
-                        alt=""
-                      />
-                    </span>
-                    <div className="flex flex-col">
-                      <p className="text-xl font-bold tracking-tight text-gray-900 dark:text-white">
-                        {e.name}
-                      </p>
-                      <p className="font-normal text-gray-700 dark:text-gray-400">
-                        Version: {e.version}
-                      </p>
-                    </div>
-                  </div>
-
-                  <p className="mt-2 w-full flex-1 text-sm font-normal text-gray-500 dark:text-gray-400">
-                    {e.description ?? "Jan's Plugin"}
-                  </p>
-                  <div className="flex flex-row space-x-5">
-                    <button
-                      type="submit"
-                      onClick={() => {
-                        uninstall(e.name)
-                      }}
-                      className="mt-5 rounded-md bg-red-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-red-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600"
-                    >
-                      Uninstall
-                    </button>
-                    <button
-                      type="submit"
-                      onClick={() => {
-                        update(e.name)
-                      }}
-                      className="mt-5 rounded-md bg-blue-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
-                    >
-                      Update
-                    </button>
-                  </div>
-                </div>
-              ))}
-          </div>
-
-          <div className="my-4 flex flex-row items-center">
-            <CommandLineIcon width={30} />
-            Explore Plugins
-          </div>
-          <div className="grid grid-cols-2 items-stretch gap-4">
-            {pluginCatalog
-              .filter(
-                (e: any) =>
-                  search.trim() === '' ||
-                  e.name.toLowerCase().includes(search.toLowerCase())
-              )
-              .map((e: any) => (
-                <div
-                  key={e.name}
-                  data-testid="plugin-item"
-                  className="flex h-full flex-col rounded-sm border border-gray-200 bg-white p-6 dark:border-gray-300"
-                >
-                  <div className="flex flex-row items-center space-x-2">
-                    <span className="relative mt-1 inline-block">
-                      <img
-                        className="h-14 w-14 rounded-md"
-                        src={e.icon ?? 'icons/app_icon.svg'}
-                        alt=""
-                      />
-                    </span>
-                    <div className="flex flex-col">
-                      <p className="text-xl font-bold tracking-tight text-gray-900 dark:text-white">
-                        {e.name}
-                      </p>
-                      <p className="font-normal text-gray-700 dark:text-gray-400">
-                        Version: {e.version}
-                      </p>
-                    </div>
-                  </div>
-
-                  <p className="mt-2 w-full flex-1 text-sm font-normal text-gray-500 dark:text-gray-400">
-                    {e.description ?? "Jan's Plugin"}
-                  </p>
-
-                  <div className="flex flex-row space-x-5">
-                    {e.version !==
-                      activePlugins.filter((p) => p.name === e.name)[0]
-                        ?.version && (
-                      <button
-                        type="submit"
-                        onClick={() => downloadTarball(e.name)}
-                        className={classNames(
-                          'mt-5 rounded-md px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600',
-                          activePlugins.some((p) => p.name === e.name)
-                            ? 'bg-blue-500 hover:bg-blue-600'
-                            : 'bg-red-500 hover:bg-red-600'
-                        )}
-                      >
-                        {activePlugins.some((p) => p.name === e.name)
-                          ? 'Update'
-                          : 'Install'}
-                      </button>
-                    )}
-                  </div>
-                </div>
-              ))}
-          </div>
-          {activePlugins.length > 0 && isTestAvailable && (
-            <div className="my-4 flex flex-row items-center">
-              <PlayIcon width={30} />
-              Test Plugins
-            </div>
-          )}
-          <div className="h-full w-full" ref={experimentRef}></div>
-
-          <div className="my-4 flex flex-row items-center">
-            <PlayIcon width={30} />
-            Preferences
-          </div>
-          <div className="flex h-full w-full flex-col" ref={preferenceRef}>
-            {preferenceItems?.map((e) => (
-              <div key={e.preferenceKey} className="mb-4 flex flex-col">
-                <div>
-                  <span className="text-[16px] text-gray-600">Setting:</span>{' '}
-                  <span className="text-[16px] text-gray-900">
-                    {e.preferenceName}
-                  </span>
-                </div>
-                <span className="text-[14px] text-gray-400">
-                  {e.preferenceDescription}
-                </span>
-                <div className="mt-2 flex flex-row items-center space-x-4">
-                  <input
-                    className="h-8 w-1/3 rounded-sm border-[1px] border-gray-300 text-gray-500"
-                    defaultValue={
-                      preferenceValues.filter(
-                        (v) => v.key === e.preferenceKey
-                      )[0]?.value
-                    }
-                    onChange={(event) => {}}
-                  ></input>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      </main>
-      {isLoading && (
-        <div className="absolute inset-0 z-50 flex items-center justify-center bg-gray-900/90 text-white">
-          <LoadingIndicator />
-          Installing...
-        </div>
-      )}
-    </div>
-  )
-}
diff --git a/web/app/_components/PrimaryButton/index.tsx b/web/app/_components/PrimaryButton/index.tsx
deleted file mode 100644
index 97a7325a7..000000000
--- a/web/app/_components/PrimaryButton/index.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react'
-
-type Props = {
-  title: string
-  onClick?: () => void
-  isSubmit?: boolean
-  fullWidth?: boolean
-  className?: string
-}
-
-const PrimaryButton: React.FC<Props> = ({
-  title,
-  onClick,
-  isSubmit = false,
-  fullWidth = false,
-  className,
-}) => (
-  <button
-    onClick={onClick}
-    type={isSubmit ? 'submit' : 'button'}
-    className={`line-clamp-1 flex-shrink-0 rounded-md bg-accent px-3 py-1 font-semibold text-white shadow-sm hover:bg-accent/80 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ${className} ${
-      fullWidth ? 'flex-1 ' : ''
-    }}`}
-  >
-    {title}
-  </button>
-)
-
-export default PrimaryButton
diff --git a/web/app/_components/ProgressSetting/index.tsx b/web/app/_components/ProgressSetting/index.tsx
deleted file mode 100644
index 71cdc6b53..000000000
--- a/web/app/_components/ProgressSetting/index.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { formatTwoDigits } from '@utils/converter'
-import React from 'react'
-
-type Props = {
-  title: string
-  value: number
-  min: number
-  max: number
-  step: number
-  onValueChanged: (value: number) => void
-}
-
-const ProgressSetting: React.FC<Props> = ({
-  title,
-  value,
-  min,
-  max,
-  step,
-  onValueChanged,
-}) => (
-  <div className="flex w-full flex-col">
-    <p>{title}</p>
-    <div className="mt-2 flex items-center gap-2">
-      <input
-        className="flex-1"
-        type="range"
-        value={value}
-        min={min}
-        max={max}
-        step={step}
-        onChange={(e) => {
-          onValueChanged(Number(e.target.value))
-        }}
-      />
-      <span className="rounded-md border border-[#737d7d] px-2 py-1 text-gray-900">
-        {formatTwoDigits(value)}
-      </span>
-    </div>
-  </div>
-)
-
-export default ProgressSetting
diff --git a/web/app/_components/RightContainer/index.tsx b/web/app/_components/RightContainer/index.tsx
deleted file mode 100644
index 401164eda..000000000
--- a/web/app/_components/RightContainer/index.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { rightSideBarExpandStateAtom } from '@helpers/atoms/SideBarExpand.atom'
-import { Variants, motion } from 'framer-motion'
-import { useAtomValue } from 'jotai'
-import { Fragment } from 'react'
-import BotSetting from '../BotSetting'
-import BotInfo from '../BotInfo'
-
-const variants: Variants = {
-  show: {
-    x: 0,
-    width: 320,
-    opacity: 1,
-    transition: { duration: 0.3 },
-  },
-  hide: {
-    x: '100%',
-    width: 0,
-    opacity: 0,
-    transition: { duration: 0.3 },
-  },
-}
-
-const RightContainer = () => {
-  const isVisible = useAtomValue(rightSideBarExpandStateAtom)
-
-  return (
-    <motion.div
-      initial={false}
-      animate={isVisible ? 'show' : 'hide'}
-      variants={variants}
-      className="scroll flex w-80 flex-shrink-0 flex-col overflow-y-auto border-l border-gray-200 py-3"
-    >
-      {isVisible && (
-        <Fragment>
-          <BotInfo />
-
-          {/* Divider */}
-          <div className="relative">
-            <div
-              className="absolute inset-0 flex items-center"
-              aria-hidden="true"
-            >
-              <div className="w-full border-t border-gray-300" />
-            </div>
-          </div>
-
-          <BotSetting />
-        </Fragment>
-      )}
-    </motion.div>
-  )
-}
-
-export default RightContainer
diff --git a/web/app/_components/SearchBar/index.tsx b/web/app/_components/SearchBar/index.tsx
deleted file mode 100644
index 91b813fb1..000000000
--- a/web/app/_components/SearchBar/index.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { modelSearchAtom } from '@helpers/JotaiWrapper'
-import { MagnifyingGlassIcon } from '@heroicons/react/24/outline'
-import { useSetAtom } from 'jotai'
-import { useDebouncedCallback } from 'use-debounce'
-
-export enum SearchType {
-  Model = 'model',
-}
-
-type Props = {
-  type?: SearchType
-  placeholder?: string
-}
-
-const SearchBar: React.FC<Props> = ({ type, placeholder }) => {
-  const setModelSearch = useSetAtom(modelSearchAtom)
-  let placeholderText = placeholder ? placeholder : 'Search (⌘K)'
-
-  const debounced = useDebouncedCallback((value) => {
-    setModelSearch(value)
-  }, 300)
-
-  return (
-    <div className="relative mt-3 flex items-center">
-      <div className="absolute left-2 top-0 flex h-full items-center">
-        <MagnifyingGlassIcon
-          width={16}
-          height={16}
-          color="#3C3C43"
-          opacity={0.6}
-        />
-      </div>
-      <input
-        type="text"
-        name="search"
-        id="search"
-        placeholder={placeholderText}
-        onChange={(e) => debounced(e.target.value)}
-        className="block w-full rounded-md border-0 py-1.5 pl-8 pr-14 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-      />
-    </div>
-  )
-}
-
-export default SearchBar
diff --git a/web/app/_components/SecondaryButton/index.tsx b/web/app/_components/SecondaryButton/index.tsx
deleted file mode 100644
index be1d85146..000000000
--- a/web/app/_components/SecondaryButton/index.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react'
-import { Button } from '@uikit'
-
-type Props = {
-  title: string
-  onClick?: () => void
-  disabled?: boolean
-  className?: string
-  icon?: React.ReactNode
-}
-
-const SecondaryButton: React.FC<Props> = ({
-  title,
-  onClick,
-  disabled,
-  className,
-  icon,
-}) => (
-  <Button
-    size="sm"
-    disabled={disabled}
-    type="button"
-    onClick={onClick}
-    className={className}
-  >
-    {icon}&nbsp;
-    {title}
-  </Button>
-)
-
-export default React.memo(SecondaryButton)
diff --git a/web/app/_components/SessionProviderWrapper.tsx b/web/app/_components/SessionProviderWrapper.tsx
deleted file mode 100644
index fcea94d3c..000000000
--- a/web/app/_components/SessionProviderWrapper.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-'use client'
-import React, { ReactNode } from 'react'
-import { SessionProvider } from 'next-auth/react'
-
-const SessionProviderWrapper: React.FC<{ children: ReactNode }> = ({
-  children,
-}) => {
-  return <SessionProvider>{children}</SessionProvider>
-}
-
-export default SessionProviderWrapper
diff --git a/web/app/_components/SidebarFooter/index.tsx b/web/app/_components/SidebarFooter/index.tsx
deleted file mode 100644
index 1b2430a5f..000000000
--- a/web/app/_components/SidebarFooter/index.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react'
-import SecondaryButton from '../SecondaryButton'
-
-const SidebarFooter: React.FC = () => (
-  <div className="mx-3 flex items-center justify-between gap-2">
-    <SecondaryButton
-      title={'Discord'}
-      onClick={() =>
-        window.coreAPI?.openExternalUrl('https://discord.gg/AsJ8krTT3N')
-      }
-      className="flex-1"
-    />
-    <SecondaryButton
-      title={'Twitter'}
-      onClick={() =>
-        window.coreAPI?.openExternalUrl('https://twitter.com/janhq_')
-      }
-      className="flex-1"
-    />
-  </div>
-)
-
-export default React.memo(SidebarFooter)
diff --git a/web/app/_components/SidebarHeader/index.tsx b/web/app/_components/SidebarHeader/index.tsx
deleted file mode 100644
index 4fc1b4aaa..000000000
--- a/web/app/_components/SidebarHeader/index.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react'
-import Image from 'next/image'
-
-const SidebarHeader: React.FC = () => (
-  <div className="flex flex-col gap-2.5 px-3">
-    <Image src={'icons/Jan_AppIcon.svg'} width={68} height={28} alt="" />
-  </div>
-)
-
-export default React.memo(SidebarHeader)
diff --git a/web/app/_components/SidebarMenuItem/index.tsx b/web/app/_components/SidebarMenuItem/index.tsx
deleted file mode 100644
index de4eadaa7..000000000
--- a/web/app/_components/SidebarMenuItem/index.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react'
-import { useAtomValue, useSetAtom } from 'jotai'
-import Image from 'next/image'
-import {
-  MainViewState,
-  getMainViewStateAtom,
-  setMainViewStateAtom,
-} from '@helpers/atoms/MainView.atom'
-
-type Props = {
-  title: string
-  viewState: MainViewState
-  iconName: string
-}
-
-const SidebarMenuItem: React.FC<Props> = ({ title, viewState, iconName }) => {
-  const currentState = useAtomValue(getMainViewStateAtom)
-  const setMainViewState = useSetAtom(setMainViewStateAtom)
-
-  let className =
-    'text-gray-600 hover:text-indigo-600 hover:bg-gray-50 group flex gap-x-3 rounded-md text-base py-2 px-3 w-full'
-  if (currentState == viewState) {
-    className =
-      'bg-gray-100 text-indigo-600 group flex gap-x-3 rounded-md text-base py-2 px-3 w-full'
-  }
-
-  const onClick = () => {
-    setMainViewState(viewState)
-  }
-
-  return (
-    <li key={title}>
-      <button onClick={onClick} className={className}>
-        <Image src={`icons/${iconName}.svg`} width={24} height={24} alt="" />
-        <span className="truncate">{title}</span>
-      </button>
-    </li>
-  )
-}
-
-export default SidebarMenuItem
diff --git a/web/app/_components/SimpleCheckbox/index.tsx b/web/app/_components/SimpleCheckbox/index.tsx
deleted file mode 100644
index e0ba58717..000000000
--- a/web/app/_components/SimpleCheckbox/index.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-type Props = {
-  name: string
-}
-
-const SimpleCheckbox: React.FC<Props> = ({ name }) => (
-  <div className="relative flex items-center gap-[11px]">
-    <div className="flex h-6 items-center">
-      <input
-        id="offers"
-        aria-describedby="offers-description"
-        name="offers"
-        type="checkbox"
-        className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
-      />
-    </div>
-    <div className="text-xs">
-      <label htmlFor="offers">{name}</label>
-    </div>
-  </div>
-)
-
-export default SimpleCheckbox
diff --git a/web/app/_components/SimpleControlNetMessage.tsx b/web/app/_components/SimpleControlNetMessage.tsx
deleted file mode 100644
index 759c6ac94..000000000
--- a/web/app/_components/SimpleControlNetMessage.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { displayDate } from '../../utils/datetime'
-import Link from 'next/link'
-import React from 'react'
-import JanImage from '../../containers/JanImage'
-import Image from 'next/image'
-import { ArrowDownTrayIcon } from '@heroicons/react/24/outline'
-
-type Props = {
-  avatarUrl?: string
-  senderName: string
-  text: string
-  createdAt: number
-  imageUrls: string[]
-}
-
-const SimpleControlNetMessage: React.FC<Props> = ({
-  avatarUrl = '',
-  senderName,
-  imageUrls,
-  text,
-  createdAt,
-}) => {
-  return (
-    <div className="flex items-start gap-2">
-      <img
-        className="rounded-full"
-        src={avatarUrl}
-        width={32}
-        height={32}
-        alt=""
-      />
-      <div className="flex flex-col gap-1">
-        <div className="flex items-baseline justify-start gap-1">
-          <div className="text-sm font-extrabold leading-[15.2px] text-[#1B1B1B]">
-            {senderName}
-          </div>
-          <div className="ml-2 text-xs font-medium leading-[13.2px] text-gray-400">
-            {displayDate(createdAt)}
-          </div>
-        </div>
-        <div className="flex flex-col gap-3">
-          <p className="whitespace-break-spaces text-sm font-normal leading-[20px] dark:text-[#d1d5db]">
-            {text}
-          </p>
-          <JanImage
-            imageUrl={imageUrls[0]}
-            className="aspect-square w-72 rounded-lg"
-          />
-          <div className="flex w-full flex-row items-start justify-start gap-2">
-            <Link
-              href={imageUrls[0] || '#'}
-              target="_blank_"
-              className="flex items-center gap-1 rounded-xl bg-[#F3F4F6] px-2 py-1"
-            >
-              <ArrowDownTrayIcon width={16} height={16} />
-              <span className="text-[14px] leading-[20px] text-[#111928]">
-                Download
-              </span>
-            </Link>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default SimpleControlNetMessage
diff --git a/web/app/_components/SimpleImageMessage/index.tsx b/web/app/_components/SimpleImageMessage/index.tsx
deleted file mode 100644
index 68f1adeea..000000000
--- a/web/app/_components/SimpleImageMessage/index.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import Image from 'next/image'
-import JanImage from '../../../containers/JanImage'
-import { displayDate } from '@utils/datetime'
-import Link from 'next/link'
-
-type Props = {
-  avatarUrl?: string
-  senderName: string
-  text?: string
-  createdAt: number
-  imageUrls: string[]
-}
-
-const SimpleImageMessage: React.FC<Props> = ({
-  avatarUrl = '',
-  senderName,
-  imageUrls,
-  text,
-  createdAt,
-}) => {
-  // TODO handle regenerate image case
-  return (
-    <div className="flex items-start gap-2">
-      <img
-        className="rounded-full"
-        src={avatarUrl}
-        width={32}
-        height={32}
-        alt=""
-      />
-      <div className="flex flex-col gap-1">
-        <div className="flex items-baseline justify-start gap-1">
-          <div className="text-sm font-extrabold leading-[15.2px] text-[#1B1B1B]">
-            {senderName}
-          </div>
-          <div className="ml-2 text-xs font-medium leading-[13.2px] text-gray-400">
-            {displayDate(createdAt)}
-          </div>
-        </div>
-        <div className="flex flex-col items-center gap-3">
-          <JanImage
-            imageUrl={imageUrls[0]}
-            className="aspect-square w-72 rounded-lg"
-          />
-          <div className="flex w-full flex-row items-start justify-start gap-2">
-            <Link
-              href={imageUrls[0] || '#'}
-              target="_blank_"
-              className="flex items-center gap-1 rounded-xl bg-[#F3F4F6] px-2 py-1"
-            >
-              <Image src="icons/download.svg" width={16} height={16} alt="" />
-              <span className="text-sm leading-[20px] text-[#111928]">
-                Download
-              </span>
-            </Link>
-            <button
-              className="flex items-center gap-1 rounded-xl bg-[#F3F4F6] px-2 py-1"
-              // onClick={() => sendChatMessage()}
-            >
-              <Image src="icons/refresh.svg" width={16} height={16} alt="" />
-              <span className="text-sm leading-[20px] text-[#111928]">
-                Re-generate
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default SimpleImageMessage
diff --git a/web/app/_components/SimpleTag/TagStyleMapper.ts b/web/app/_components/SimpleTag/TagStyleMapper.ts
deleted file mode 100644
index 51be9327f..000000000
--- a/web/app/_components/SimpleTag/TagStyleMapper.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { TagType } from './TagType'
-
-export const tagStyleMapper: Record<TagType, string> = {
-  GGUF: 'bg-yellow-100 dark:bg-yellow-200 text-yellow-800',
-  PerformancePositive:
-    'text-green-700 ring-1 ring-inset ring-green-600/20 bg-green-50 dark:bg-green-200',
-  PerformanceNeutral:
-    'bg-yellow-50 dark:bg-yellow-200 text-yellow-800 ring-1 ring-inset ring-yellow-600/20',
-  PerformanceNegative:
-    'bg-red-50 dark:bg-red-200 ext-red-700 ring-1 ring-inset ring-red-600/10',
-  HardwareCompatible:
-    'bg-red-50 dark:bg-red-200 ext-red-700 ring-1 ring-inset ring-red-600/10',
-  HardwareIncompatible:
-    'bg-red-50 dark:bg-red-200 text-red-700 ring-1 ring-inset ring-red-600/10',
-  FreeStyle: 'bg-gray-100 dark:bg-gray-200 text-gray-800',
-  ExpectPerformanceMedium: 'bg-yellow-100 dark:bg-yellow-200 text-yellow-800',
-  Version: 'bg-red-100 dark:bg-red-200 text-yellow-800',
-  Default: 'bg-blue-100 dark:bg-blue-200 text-blue-800',
-  RamDefault: 'bg-green-50 dark:bg-green-200 text-green-700',
-  UsecaseDefault: 'bg-orange-100 dark:bg-orange-200 text-yellow-800',
-  MiscellanousDefault: 'bg-blue-100 dark:bg-blue-200 text-blue-800',
-}
diff --git a/web/app/_components/SimpleTag/index.tsx b/web/app/_components/SimpleTag/index.tsx
deleted file mode 100644
index 3864552d5..000000000
--- a/web/app/_components/SimpleTag/index.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react'
-import { TagType } from './TagType'
-import { tagStyleMapper } from './TagStyleMapper'
-
-type Props = {
-  title: string
-  type: TagType
-  clickable?: boolean
-  onClick?: () => void
-}
-
-const SimpleTag: React.FC<Props> = ({
-  onClick,
-  clickable = true,
-  title,
-  type,
-}) => {
-  if (!title || title.length === 0) return null
-  if (!clickable) {
-    return (
-      <div
-        className={`line-clamp-1 max-w-[70%] items-center rounded-full px-2 py-0.5 text-xs dark:bg-opacity-10 ${tagStyleMapper[type]}`}
-      >
-        {title}
-      </div>
-    )
-  }
-
-  return (
-    <button
-      onClick={onClick}
-      className={`line-clamp-1 max-w-[70%] items-center rounded-full px-2 py-0.5 text-xs dark:bg-opacity-10 ${tagStyleMapper[type]}`}
-    >
-      {title} x
-    </button>
-  )
-}
-
-export default React.memo(SimpleTag)
diff --git a/web/app/_components/SimpleTextMessage/index.tsx b/web/app/_components/SimpleTextMessage/index.tsx
deleted file mode 100644
index d38a507c4..000000000
--- a/web/app/_components/SimpleTextMessage/index.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import React from 'react'
-import { displayDate } from '@utils/datetime'
-import Image from 'next/image'
-
-import LoadingIndicator from '../LoadingIndicator'
-import { Marked } from 'marked'
-import { markedHighlight } from 'marked-highlight'
-import hljs from 'highlight.js'
-import { MessageSenderType } from '@models/ChatMessage'
-
-type Props = {
-  avatarUrl: string
-  senderName: string
-  createdAt: number
-  senderType: MessageSenderType
-  text?: string
-}
-
-const marked = new Marked(
-  markedHighlight({
-    langPrefix: 'hljs',
-    highlight(code, lang) {
-      if (lang === undefined || lang === '') {
-        return hljs.highlightAuto(code).value
-      }
-      return hljs.highlight(code, { language: lang }).value
-    },
-  }),
-  {
-    renderer: {
-      code(code, lang, escaped) {
-        return `<pre class="hljs"><code class="language-${escape(
-          lang ?? ''
-        )}">${escaped ? code : escape(code)}</code></pre>`
-      },
-    },
-  }
-)
-
-const SimpleTextMessage: React.FC<Props> = ({
-  senderName,
-  createdAt,
-  senderType,
-  avatarUrl = '',
-  text = '',
-}) => {
-  const backgroundColor =
-    senderType === MessageSenderType.User ? '' : 'bg-gray-100'
-
-  const parsedText = marked.parse(text)
-
-  return (
-    <div
-      className={`flex items-start gap-x-4 gap-y-2 border-b border-border/50 px-4 py-5`}
-    >
-      <Image
-        className="rounded-full"
-        src={avatarUrl}
-        width={32}
-        height={32}
-        alt=""
-      />
-      <div className="flex w-full flex-col gap-1">
-        <div className="flex items-baseline justify-start gap-1">
-          <div className="text-sm font-extrabold leading-[15.2px] ">
-            {senderName}
-          </div>
-          <div className="text-xs font-medium leading-[13.2px]">
-            {displayDate(createdAt)}
-          </div>
-        </div>
-        {text === '' ? (
-          <LoadingIndicator />
-        ) : (
-          <span
-            className="message text-xs font-normal leading-loose text-muted-foreground"
-            dangerouslySetInnerHTML={{ __html: parsedText }}
-          />
-        )}
-      </div>
-    </div>
-  )
-}
-
-export default React.memo(SimpleTextMessage)
diff --git a/web/app/_components/TextInputWithTitle/index.tsx b/web/app/_components/TextInputWithTitle/index.tsx
deleted file mode 100644
index 45c7a658f..000000000
--- a/web/app/_components/TextInputWithTitle/index.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react'
-import { useController } from 'react-hook-form'
-
-type Props = {
-  id: string
-  title: string
-  description: string
-  placeholder?: string
-  control?: any
-  required?: boolean
-}
-
-const TextInputWithTitle: React.FC<Props> = ({
-  id,
-  title,
-  description,
-  placeholder,
-  control,
-  required = false,
-}) => {
-  const { field } = useController({
-    name: id,
-    control: control,
-    rules: { required: required },
-  })
-
-  return (
-    <div className="flex flex-col gap-2">
-      <div className="font-bold">{title}</div>
-      <div className="pb-2 text-muted-foreground">{description}</div>
-      <input
-        className="block w-full rounded-md border-0 bg-background/80 py-1.5 text-xs shadow-sm ring-1 ring-inset ring-border placeholder:text-muted-foreground focus:ring-2 focus:ring-inset focus:ring-accent/50 sm:leading-6"
-        placeholder={placeholder}
-        {...field}
-      />
-    </div>
-  )
-}
-
-export default TextInputWithTitle
diff --git a/web/app/_components/ToggleSwitch/index.tsx b/web/app/_components/ToggleSwitch/index.tsx
deleted file mode 100644
index 05d12030a..000000000
--- a/web/app/_components/ToggleSwitch/index.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from 'react'
-import { Switch } from '@headlessui/react'
-import { Controller } from 'react-hook-form'
-
-function classNames(...classes: any) {
-  return classes.filter(Boolean).join(' ')
-}
-
-type Props = {
-  id: string
-  title: string
-  control: any
-  required?: boolean
-}
-
-const ToggleSwitch: React.FC<Props> = ({
-  id,
-  title,
-  control,
-  required = false,
-}) => (
-  <div className="flex items-center justify-between">
-    <div className="text-bold">{title}</div>
-    <Controller
-      name={id}
-      control={control}
-      rules={{ required }}
-      render={({ field: { value, onChange } }) => (
-        <Switch
-          checked={value}
-          onChange={onChange}
-          className={classNames(
-            value ? 'bg-accent' : 'bg-gray-200',
-            'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2'
-          )}
-        >
-          <span className="sr-only">Use setting</span>
-          <span
-            aria-hidden="true"
-            className={classNames(
-              value ? 'translate-x-5' : 'translate-x-0',
-              'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out'
-            )}
-          />
-        </Switch>
-      )}
-    />
-  </div>
-)
-
-export default ToggleSwitch
diff --git a/web/app/_components/UserProfileDropDown/index.tsx b/web/app/_components/UserProfileDropDown/index.tsx
deleted file mode 100644
index ad7cc0dcb..000000000
--- a/web/app/_components/UserProfileDropDown/index.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-'use client'
-
-import React from 'react'
-import { Popover } from '@headlessui/react'
-import { MenuHeader } from '../MenuHeader'
-// import useGetCurrentUser from "@/_hooks/useGetCurrentUser";
-
-const UserProfileDropDown: React.FC = () => {
-  // const { loading, user } = useGetCurrentUser();
-  return <div></div>
-  // if (loading || !user) {
-  //   return <div></div>;
-  // }
-
-  // return (
-  //   <Popover.Group className="hidden lg:flex lg:gap-x-12">
-  //     <Popover className="relative">
-  //       <Popover.Button className="flex items-center gap-2 outline-none">
-  //         <img
-  //           className="rounded-sm w-8 aspect-square"
-  //           src={user.avatarUrl ?? "icons/app_icon.svg"}
-  //           alt=""
-  //         />
-  //         <div className="flex flex-col justify-start">
-  //           <h2 className="text-sm leading-5 text-[#111928] dark:text-gray-400">
-  //             {user.displayName}
-  //           </h2>
-  //         </div>
-  //       </Popover.Button>
-  //       <MenuHeader />
-  //     </Popover>
-  //   </Popover.Group>
-  // );
-}
-
-export default UserProfileDropDown
diff --git a/web/app/_components/ViewModelDetailButton/index.tsx b/web/app/_components/ViewModelDetailButton/index.tsx
deleted file mode 100644
index 1a7a7e565..000000000
--- a/web/app/_components/ViewModelDetailButton/index.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { ChevronDownIcon } from '@heroicons/react/24/outline'
-
-type Props = {
-  callback: () => void
-}
-
-const ViewModelDetailButton: React.FC<Props> = ({ callback }) => {
-  return (
-    <div className="px-4 pb-4">
-      <button
-        onClick={callback}
-        className="flex w-full items-center justify-center gap-1 rounded-lg bg-gray-100 px-2.5 py-1"
-      >
-        <span className="text-xs leading-[18px]">View Details</span>
-        <ChevronDownIcon width={18} height={18} />
-      </button>
-    </div>
-  )
-}
-
-export default ViewModelDetailButton
diff --git a/web/app/_components/WelcomeContainer/index.tsx b/web/app/_components/WelcomeContainer/index.tsx
deleted file mode 100644
index 60af2ff26..000000000
--- a/web/app/_components/WelcomeContainer/index.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import Image from 'next/image'
-import { useSetAtom } from 'jotai'
-import {
-  setMainViewStateAtom,
-  MainViewState,
-} from '@helpers/atoms/MainView.atom'
-import SecondaryButton from '../SecondaryButton'
-
-import { Button, Icons } from '@uikit'
-
-const Welcome: React.FC = () => {
-  const setMainViewState = useSetAtom(setMainViewStateAtom)
-
-  return (
-    <div className="flex h-full flex-col">
-      <div className="flex flex-1 flex-col items-start justify-center gap-5 px-[200px]">
-        <Image src={'icons/Jan_AppIcon.svg'} width={44} height={45} alt="" />
-        <span className="text-5xl font-semibold text-gray-500">
-          Welcome,
-          <br />
-          let’s download your first model
-        </span>
-        <Button>Button component</Button>
-        <Icons name="panel-left" />
-        <SecondaryButton
-          title={'Explore models'}
-          onClick={() => setMainViewState(MainViewState.ExploreModel)}
-        />
-      </div>
-    </div>
-  )
-}
-
-export default Welcome
diff --git a/web/app/layout.tsx b/web/app/layout.tsx
index 3b519cbc8..fd100975f 100644
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@@ -1,27 +1,29 @@
-import { Metadata } from 'next'
-import '../styles/main.scss'
 import { PropsWithChildren } from 'react'
 
-import Providers from '@containers/Providers'
+import { Metadata } from 'next'
+
+// import { Inter } from 'next/font/google'
+
+import Providers from '@/containers/Providers'
+
+import '@/styles/main.scss'
+
+// const inter = Inter({
+//   subsets: ['latin'],
+//   display: 'swap',
+//   variable: '--font-inter',
+// })
 
 export const metadata: Metadata = {
   title: 'Jan',
   description:
     'Self-hosted, local, AI Inference Platform that scales from personal use to production deployments for a team.',
-  metadataBase: new URL(
-    process.env.NEXT_PUBLIC_WEB_URL ?? 'https://cloud.jan.ai'
-  ),
-  openGraph: {
-    images: 'images/preview.jpg',
-  },
 }
 
-type Props = PropsWithChildren
-
-export default function RootLayout({ children }: Props) {
+export default function RootLayout({ children }: PropsWithChildren) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body className="bg-background/40 text-xs antialiased">
+      <body className="bg-background/50 font-sans text-sm antialiased">
         <div className="title-bar" />
         <Providers>{children}</Providers>
       </body>
diff --git a/web/app/page.tsx b/web/app/page.tsx
index 2d23fc8e5..20abda6f9 100644
--- a/web/app/page.tsx
+++ b/web/app/page.tsx
@@ -1,49 +1,31 @@
 'use client'
 
-import { useAtomValue } from 'jotai'
-import WelcomeScreen from '@screens/Welcome'
-import BotScreen from '@screens/Bot'
-import ChatScreen from '@screens/Chat'
-import ExploreModelsScreen from '@screens/ExploreModels'
-import MyModelsScreen from '@screens/MyModels'
-import SettingsScreen from '@screens/Settings'
-import EmptyChatScreen from '@screens/Chat/EmptyChatScreen'
+import BaseLayout from '@/containers/Layout'
 
-import {
-  MainViewState,
-  getMainViewStateAtom,
-} from '@helpers/atoms/MainView.atom'
+import { MainViewState } from '@/constants/screens'
 
-import React from 'react'
+import { useMainViewState } from '@/hooks/useMainViewState'
 
-import BaseLayout from '@containers/Layout'
+import ChatScreen from '@/screens/Chat'
+import ExploreModelsScreen from '@/screens/ExploreModels'
+import MyModelsScreen from '@/screens/MyModels'
+import SettingsScreen from '@/screens/Settings'
+import WelcomeScreen from '@/screens/Welcome'
 
-import { ToastContainer } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
-
-const Page: React.FC = () => {
-  const viewState = useAtomValue(getMainViewStateAtom)
+export default function Page() {
+  const { mainViewState } = useMainViewState()
 
   let children = null
-  switch (viewState) {
-    case MainViewState.ConversationEmptyModel:
-      children = <EmptyChatScreen />
-      break
-
+  switch (mainViewState) {
     case MainViewState.Welcome:
       children = <WelcomeScreen />
       break
 
-    case MainViewState.CreateBot:
-      children = <BotScreen />
-      break
-
-    case MainViewState.ExploreModel:
+    case MainViewState.ExploreModels:
       children = <ExploreModelsScreen />
       break
 
-    case MainViewState.ResourceMonitor:
-    case MainViewState.MyModel:
+    case MainViewState.MyModels:
       children = <MyModelsScreen />
       break
 
@@ -56,10 +38,5 @@ const Page: React.FC = () => {
       break
   }
 
-  return <BaseLayout>
-  {children}
-  <div><ToastContainer /></div>
-  </BaseLayout>
+  return <BaseLayout>{children}</BaseLayout>
 }
-
-export default Page
diff --git a/web/app/privacy/page.tsx b/web/app/privacy/page.tsx
index 4f2e012a8..77253511e 100644
--- a/web/app/privacy/page.tsx
+++ b/web/app/privacy/page.tsx
@@ -1,7 +1,7 @@
 import { Metadata } from 'next'
+
 import Image from 'next/image'
 import Link from 'next/link'
-import React from 'react'
 
 export const metadata: Metadata = {
   title: 'Privacy - Jan.ai',
@@ -19,7 +19,7 @@ const Page: React.FC = () => {
           </div>
         </Link>
       </div>
-      <article className="prose my-20 w-full lg:prose-xl">
+      <article className="prose lg:prose-xl my-20 w-full">
         <h1>Privacy Policy </h1>
         <p>
           Jan is committed to protecting your privacy and ensuring that your
diff --git a/web/app/support/page.tsx b/web/app/support/page.tsx
index bb03459fb..f8127370d 100644
--- a/web/app/support/page.tsx
+++ b/web/app/support/page.tsx
@@ -1,7 +1,7 @@
 import { Metadata } from 'next'
+
 import Image from 'next/image'
 import Link from 'next/link'
-import React from 'react'
 
 export const metadata: Metadata = {
   title: 'Support - Jan.ai',
@@ -19,7 +19,7 @@ const Page: React.FC = () => {
           </div>
         </Link>
       </div>
-      <article className="prose my-20  lg:prose-xl">
+      <article className="prose lg:prose-xl  my-20">
         <h1>Support </h1>
         <h3>Get fast support in our Discord channel</h3>
         <Link
diff --git a/web/app/_components/BasicPromptAccessories/index.tsx b/web/components/BasicPromptAccessories/index.tsx
similarity index 73%
rename from web/app/_components/BasicPromptAccessories/index.tsx
rename to web/components/BasicPromptAccessories/index.tsx
index 00c852472..2f082ef44 100644
--- a/web/app/_components/BasicPromptAccessories/index.tsx
+++ b/web/components/BasicPromptAccessories/index.tsx
@@ -1,15 +1,8 @@
 'use client'
 
-import { useSetAtom } from 'jotai'
-import { InformationCircleIcon } from '@heroicons/react/24/outline'
 import SendButton from '../SendButton'
-import { showingAdvancedPromptAtom } from '@helpers/atoms/Modal.atom'
 
 const BasicPromptAccessories: React.FC = () => {
-  const setShowingAdvancedPrompt = useSetAtom(showingAdvancedPromptAtom)
-
-  const shouldShowAdvancedPrompt = false
-
   return (
     <div className="absolute inset-x-0 bottom-0 flex justify-between p-3">
       {/* Add future accessories here, e.g upload a file */}
diff --git a/web/app/_components/BasicPromptInput/index.tsx b/web/components/BasicPromptInput/index.tsx
similarity index 86%
rename from web/app/_components/BasicPromptInput/index.tsx
rename to web/components/BasicPromptInput/index.tsx
index b73c16570..df03e45d1 100644
--- a/web/app/_components/BasicPromptInput/index.tsx
+++ b/web/components/BasicPromptInput/index.tsx
@@ -1,13 +1,18 @@
 'use client'
 
-import { currentPromptAtom } from '@helpers/JotaiWrapper'
-import { getActiveConvoIdAtom } from '@helpers/atoms/Conversation.atom'
-import { selectedModelAtom } from '@helpers/atoms/Model.atom'
-import useCreateConversation from '@hooks/useCreateConversation'
-import useSendChatMessage from '@hooks/useSendChatMessage'
-import { useAtom, useAtomValue } from 'jotai'
 import { ChangeEvent, useEffect, useRef } from 'react'
 
+import { useAtom, useAtomValue } from 'jotai'
+
+import { currentPromptAtom } from '@/containers/Providers/Jotai'
+
+import { useCreateConversation } from '@/hooks/useCreateConversation'
+
+import useSendChatMessage from '@/hooks/useSendChatMessage'
+
+import { getActiveConvoIdAtom } from '@/helpers/atoms/Conversation.atom'
+import { selectedModelAtom } from '@/helpers/atoms/Model.atom'
+
 const BasicPromptInput: React.FC = () => {
   const activeConversationId = useAtomValue(getActiveConvoIdAtom)
   const selectedModel = useAtomValue(selectedModelAtom)
@@ -30,7 +35,6 @@ const BasicPromptInput: React.FC = () => {
             console.log('No model selected')
             return
           }
-
           await requestCreateConvo(selectedModel)
           sendChatMessage()
         }
@@ -64,7 +68,7 @@ const BasicPromptInput: React.FC = () => {
   }
 
   return (
-    <div className=" border-border rounded-lg border shadow-sm">
+    <div className=" rounded-lg border border-border shadow-sm">
       <textarea
         ref={textareaRef}
         onKeyDown={handleKeyDown}
diff --git a/web/app/_components/ConfirmDeleteConversationModal/index.tsx b/web/components/ConfirmDeleteConversationModal/index.tsx
similarity index 96%
rename from web/app/_components/ConfirmDeleteConversationModal/index.tsx
rename to web/components/ConfirmDeleteConversationModal/index.tsx
index 68d3a78c0..b33a95906 100644
--- a/web/app/_components/ConfirmDeleteConversationModal/index.tsx
+++ b/web/components/ConfirmDeleteConversationModal/index.tsx
@@ -1,9 +1,13 @@
-import { showConfirmDeleteConversationModalAtom } from '@helpers/atoms/Modal.atom'
-import useDeleteConversation from '@hooks/useDeleteConversation'
+import React, { Fragment, useRef } from 'react'
+
 import { Dialog, Transition } from '@headlessui/react'
 import { ExclamationTriangleIcon } from '@heroicons/react/24/outline'
+
 import { useAtom } from 'jotai'
-import React, { Fragment, useRef } from 'react'
+
+import useDeleteConversation from '@/hooks/useDeleteConversation'
+
+import { showConfirmDeleteConversationModalAtom } from '@/helpers/atoms/Modal.atom'
 
 const ConfirmDeleteConversationModal: React.FC = () => {
   const [show, setShow] = useAtom(showConfirmDeleteConversationModalAtom)
diff --git a/web/app/_components/ConfirmationModal/index.tsx b/web/components/ConfirmationModal/index.tsx
similarity index 97%
rename from web/app/_components/ConfirmationModal/index.tsx
rename to web/components/ConfirmationModal/index.tsx
index baac7840d..ffd88765e 100644
--- a/web/app/_components/ConfirmationModal/index.tsx
+++ b/web/components/ConfirmationModal/index.tsx
@@ -1,4 +1,5 @@
 import React, { Fragment } from 'react'
+
 import { Dialog, Transition } from '@headlessui/react'
 import { QuestionMarkCircleIcon } from '@heroicons/react/24/outline'
 import { PrimitiveAtom, useAtom } from 'jotai'
@@ -10,7 +11,12 @@ interface Props {
   onConfirm: () => void
 }
 
-const ConfirmationModal: React.FC<Props> = ({ atom, title, description, onConfirm }) => {
+const ConfirmationModal: React.FC<Props> = ({
+  atom,
+  title,
+  description,
+  onConfirm,
+}) => {
   const [show, setShow] = useAtom(atom)
 
   return (
diff --git a/web/app/_components/HistoryItem/index.tsx b/web/components/HistoryItem/index.tsx
similarity index 71%
rename from web/app/_components/HistoryItem/index.tsx
rename to web/components/HistoryItem/index.tsx
index 59edf796e..1de795dc8 100644
--- a/web/app/_components/HistoryItem/index.tsx
+++ b/web/components/HistoryItem/index.tsx
@@ -1,18 +1,23 @@
-import React from 'react'
+import { Model } from '@janhq/core/lib/types'
 import { useAtomValue, useSetAtom } from 'jotai'
+
+import { twMerge } from 'tailwind-merge'
+
+import { MainViewState } from '@/constants/screens'
+
+import { useActiveModel } from '@/hooks/useActiveModel'
+
+import { useGetDownloadedModels } from '@/hooks/useGetDownloadedModels'
+import { useMainViewState } from '@/hooks/useMainViewState'
+
+import { displayDate } from '@/utils/datetime'
+
 import {
   getActiveConvoIdAtom,
   setActiveConvoIdAtom,
-} from '@helpers/atoms/Conversation.atom'
-import {
-  setMainViewStateAtom,
-  MainViewState,
-} from '@helpers/atoms/MainView.atom'
-import { displayDate } from '@utils/datetime'
-import { twMerge } from 'tailwind-merge'
-import { activeModelAtom } from '@helpers/atoms/Model.atom'
-import useStartStopModel from '@hooks/useStartStopModel'
-import { downloadedModelAtom } from '@helpers/atoms/DownloadedModel.atom'
+} from '@/helpers/atoms/Conversation.atom'
+
+import { activeAssistantModelAtom } from '@/helpers/atoms/Model.atom'
 
 type Props = {
   conversation: Conversation
@@ -29,12 +34,11 @@ const HistoryItem: React.FC<Props> = ({
 }) => {
   const activeConvoId = useAtomValue(getActiveConvoIdAtom)
   const isSelected = activeConvoId === conversation._id
-  const activeModel = useAtomValue(activeModelAtom)
-  const { startModel } = useStartStopModel()
-
-  const setMainViewState = useSetAtom(setMainViewStateAtom)
+  const activeModel = useAtomValue(activeAssistantModelAtom)
+  const { startModel } = useActiveModel()
+  const { setMainViewState } = useMainViewState()
   const setActiveConvoId = useSetAtom(setActiveConvoIdAtom)
-  const models = useAtomValue(downloadedModelAtom)
+  const { downloadedModels } = useGetDownloadedModels()
 
   const onClick = async () => {
     if (conversation.modelId == null) {
@@ -42,7 +46,9 @@ const HistoryItem: React.FC<Props> = ({
       return
     }
 
-    const model = models.find((e) => e._id === conversation.modelId)
+    const model = downloadedModels.find(
+      (e: Model) => e._id === conversation.modelId
+    )
     if (model != null) {
       if (activeModel == null) {
         // if there's no active model, we simply load conversation's model
@@ -57,7 +63,7 @@ const HistoryItem: React.FC<Props> = ({
     }
 
     if (activeConvoId !== conversation._id) {
-      setMainViewState(MainViewState.Conversation)
+      setMainViewState(MainViewState.Chat)
       setActiveConvoId(conversation._id)
     }
   }
diff --git a/web/app/_components/HistoryList/index.tsx b/web/components/HistoryList/index.tsx
similarity index 81%
rename from web/app/_components/HistoryList/index.tsx
rename to web/components/HistoryList/index.tsx
index 880521597..6eceddd3f 100644
--- a/web/app/_components/HistoryList/index.tsx
+++ b/web/components/HistoryList/index.tsx
@@ -1,13 +1,19 @@
-import HistoryItem from '../HistoryItem'
 import { useEffect } from 'react'
-import ExpandableHeader from '../ExpandableHeader'
+
 import { useAtomValue } from 'jotai'
-import { searchAtom } from '@helpers/JotaiWrapper'
-import useGetUserConversations from '@hooks/useGetUserConversations'
-import SidebarEmptyHistory from '../SidebarEmptyHistory'
-import { userConversationsAtom } from '@helpers/atoms/Conversation.atom'
+
 import { twMerge } from 'tailwind-merge'
 
+import { searchAtom } from '@/containers/Providers/Jotai'
+
+import useGetUserConversations from '@/hooks/useGetUserConversations'
+
+import HistoryItem from '../HistoryItem'
+
+import SidebarEmptyHistory from '../SidebarEmptyHistory'
+
+import { userConversationsAtom } from '@/helpers/atoms/Conversation.atom'
+
 const HistoryList: React.FC = () => {
   const conversations = useAtomValue(userConversationsAtom)
   const searchText = useAtomValue(searchAtom)
@@ -20,7 +26,6 @@ const HistoryList: React.FC = () => {
 
   return (
     <div className="flex flex-grow flex-col gap-2 px-4 pb-4">
-      <ExpandableHeader title="CHAT HISTORY" />
       {conversations.length > 0 ? (
         <ul className={twMerge('mt-1 flex flex-col gap-y-3 overflow-y-auto')}>
           {conversations
diff --git a/web/app/_components/InputToolbar/index.tsx b/web/components/InputToolbar/index.tsx
similarity index 68%
rename from web/app/_components/InputToolbar/index.tsx
rename to web/components/InputToolbar/index.tsx
index b6607b1bc..6e823e2e1 100644
--- a/web/app/_components/InputToolbar/index.tsx
+++ b/web/components/InputToolbar/index.tsx
@@ -1,40 +1,46 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 'use client'
 
-import BasicPromptInput from '../BasicPromptInput'
+import { useAtomValue } from 'jotai'
+
+// import { useCreateConversation } from '@/hooks/useCreateConversation'
+
+import { useActiveModel } from '@/hooks/useActiveModel'
+import useGetInputState from '@/hooks/useGetInputState'
+
 import BasicPromptAccessories from '../BasicPromptAccessories'
-import { useAtomValue, useSetAtom } from 'jotai'
-import SecondaryButton from '../SecondaryButton'
-import { PlusIcon } from '@heroicons/react/24/outline'
-import useCreateConversation from '@hooks/useCreateConversation'
-import { activeModelAtom, stateModel } from '@helpers/atoms/Model.atom'
+import BasicPromptInput from '../BasicPromptInput'
+
 import {
   currentConvoStateAtom,
   getActiveConvoIdAtom,
-} from '@helpers/atoms/Conversation.atom'
-import useGetInputState from '@hooks/useGetInputState'
-import useStartStopModel from '@hooks/useStartStopModel'
-import { userConversationsAtom } from '@helpers/atoms/Conversation.atom'
-import { showingModalNoActiveModel } from '@helpers/atoms/Modal.atom'
+} from '@/helpers/atoms/Conversation.atom'
+
+import { userConversationsAtom } from '@/helpers/atoms/Conversation.atom'
+// import { showingModalNoActiveModel } from '@/helpers/atoms/Modal.atom'
+// import {
+//   activeAssistantModelAtom,
+//   stateModel,
+// } from '@/helpers/atoms/Model.atom'
 
 const InputToolbar: React.FC = () => {
-  const activeModel = useAtomValue(activeModelAtom)
+  // const activeModel = useAtomValue(activeAssistantModelAtom)
   const currentConvoState = useAtomValue(currentConvoStateAtom)
   const { inputState, currentConvo } = useGetInputState()
-  const { requestCreateConvo } = useCreateConversation()
-  const { startModel } = useStartStopModel()
-  const { loading } = useAtomValue(stateModel)
+  // const { requestCreateConvo } = useCreateConversation()
+  const { startModel } = useActiveModel()
+  // const { loading } = useAtomValue(stateModel)
   const conversations = useAtomValue(userConversationsAtom)
   const activeConvoId = useAtomValue(getActiveConvoIdAtom)
-  const setShowModalNoActiveModel = useSetAtom(showingModalNoActiveModel)
+  // const setShowModalNoActiveModel = useSetAtom(showingModalNoActiveModel)
 
-  const onNewConversationClick = () => {
-    if (activeModel) {
-      requestCreateConvo(activeModel)
-    } else {
-      setShowModalNoActiveModel(true)
-    }
-  }
+  // const onNewConversationClick = () => {
+  //   if (activeModel) {
+  //     requestCreateConvo(activeModel)
+  //   } else {
+  //     setShowModalNoActiveModel(true)
+  //   }
+  // }
 
   const onStartModelClick = () => {
     const modelId = currentConvo?.modelId
@@ -56,10 +62,9 @@ const InputToolbar: React.FC = () => {
           {/* <p className="mx-auto my-5 line-clamp-2 text-ellipsis text-center italic text-gray-600">
             {message}
           </p> */}
-          <SecondaryButton
-            onClick={onStartModelClick}
-            title={`Start model ${currentConvo?.modelId}`}
-          />
+          <button onClick={onStartModelClick}>
+            `Start model ${currentConvo?.modelId}`
+          </button>
         </div>
       </div>
     )
diff --git a/web/app/_components/LoadingIndicator.tsx b/web/components/LoadingIndicator.tsx
similarity index 100%
rename from web/app/_components/LoadingIndicator.tsx
rename to web/components/LoadingIndicator.tsx
diff --git a/web/app/_components/MainHeader/index.tsx b/web/components/MainHeader/index.tsx
similarity index 60%
rename from web/app/_components/MainHeader/index.tsx
rename to web/components/MainHeader/index.tsx
index 6f58121d1..3ae8937f9 100644
--- a/web/app/_components/MainHeader/index.tsx
+++ b/web/components/MainHeader/index.tsx
@@ -1,24 +1,18 @@
-import { currentConversationAtom } from '@helpers/atoms/Conversation.atom'
-import {
-  leftSideBarExpandStateAtom,
-  rightSideBarExpandStateAtom,
-} from '@helpers/atoms/SideBarExpand.atom'
-import { showConfirmDeleteConversationModalAtom } from '@helpers/atoms/Modal.atom'
-import { ChartPieIcon, TrashIcon } from '@heroicons/react/24/outline'
 import { useAtomValue, useSetAtom } from 'jotai'
-import React from 'react'
+
 import { Trash2 } from 'lucide-react'
 
+import { currentConversationAtom } from '@/helpers/atoms/Conversation.atom'
+import { showConfirmDeleteConversationModalAtom } from '@/helpers/atoms/Modal.atom'
+
 const MainHeader: React.FC = () => {
-  const setLeftSideBarVisibility = useSetAtom(leftSideBarExpandStateAtom)
-  const setRightSideBarVisibility = useSetAtom(rightSideBarExpandStateAtom)
   const setShowConfirmDeleteConversationModal = useSetAtom(
     showConfirmDeleteConversationModalAtom
   )
   const activeConversation = useAtomValue(currentConversationAtom)
 
   const currentConvo = useAtomValue(currentConversationAtom)
-  let title = currentConvo?.name ?? ''
+  const title = currentConvo?.name ?? ''
 
   if (!activeConversation) return null
 
diff --git a/web/app/_components/ModalNoActiveModel/index.tsx b/web/components/ModalNoActiveModel/index.tsx
similarity index 89%
rename from web/app/_components/ModalNoActiveModel/index.tsx
rename to web/components/ModalNoActiveModel/index.tsx
index 4af0a44a9..c78910083 100644
--- a/web/app/_components/ModalNoActiveModel/index.tsx
+++ b/web/components/ModalNoActiveModel/index.tsx
@@ -1,15 +1,17 @@
 import React, { Fragment } from 'react'
+
 import { Dialog, Transition } from '@headlessui/react'
-import { useAtom, useSetAtom } from 'jotai'
-import { showingModalNoActiveModel } from '@helpers/atoms/Modal.atom'
-import {
-  MainViewState,
-  setMainViewStateAtom,
-} from '@helpers/atoms/MainView.atom'
+import { useAtom } from 'jotai'
+
+import { MainViewState } from '@/constants/screens'
+
+import { useMainViewState } from '@/hooks/useMainViewState'
+
+import { showingModalNoActiveModel } from '@/helpers/atoms/Modal.atom'
 
 const ModalNoActiveModel: React.FC = () => {
   const [show, setShow] = useAtom(showingModalNoActiveModel)
-  const setMainView = useSetAtom(setMainViewStateAtom)
+  const { setMainViewState } = useMainViewState()
 
   return (
     <Transition.Root show={show} as={Fragment}>
@@ -47,7 +49,7 @@ const ModalNoActiveModel: React.FC = () => {
                     type="button"
                     className="inline-flex w-full justify-center rounded-md bg-accent px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-accent/80 sm:ml-3 sm:w-auto"
                     onClick={() => {
-                      setMainView(MainViewState.MyModel)
+                      setMainViewState(MainViewState.MyModels)
                       setShow(false)
                     }}
                   >
diff --git a/web/app/_components/ProgressBar/index.tsx b/web/components/ProgressBar/index.tsx
similarity index 100%
rename from web/app/_components/ProgressBar/index.tsx
rename to web/components/ProgressBar/index.tsx
diff --git a/web/app/_components/SendButton/index.tsx b/web/components/SendButton/index.tsx
similarity index 56%
rename from web/app/_components/SendButton/index.tsx
rename to web/components/SendButton/index.tsx
index 77da5d5b2..0a21b351f 100644
--- a/web/app/_components/SendButton/index.tsx
+++ b/web/components/SendButton/index.tsx
@@ -1,8 +1,10 @@
-import { currentPromptAtom } from '@helpers/JotaiWrapper'
-import { currentConvoStateAtom } from '@helpers/atoms/Conversation.atom'
-import useSendChatMessage from '@hooks/useSendChatMessage'
 import { useAtom, useAtomValue } from 'jotai'
-import { Button } from '@uikit'
+
+import { currentPromptAtom } from '@/containers/Providers/Jotai'
+
+import useSendChatMessage from '@/hooks/useSendChatMessage'
+
+import { currentConvoStateAtom } from '@/helpers/atoms/Conversation.atom'
 
 const SendButton: React.FC = () => {
   const [currentPrompt] = useAtom(currentPromptAtom)
@@ -13,14 +15,9 @@ const SendButton: React.FC = () => {
   const disabled = currentPrompt.trim().length === 0 || isWaitingForResponse
 
   return (
-    <Button
-      themes="accent"
-      onClick={sendChatMessage}
-      disabled={disabled}
-      type="submit"
-    >
+    <button onClick={sendChatMessage} disabled={disabled} type="submit">
       Send
-    </Button>
+    </button>
   )
 }
 
diff --git a/web/app/_components/SidebarEmptyHistory/index.tsx b/web/components/SidebarEmptyHistory/index.tsx
similarity index 68%
rename from web/app/_components/SidebarEmptyHistory/index.tsx
rename to web/components/SidebarEmptyHistory/index.tsx
index ae688b2f5..4363823b3 100644
--- a/web/app/_components/SidebarEmptyHistory/index.tsx
+++ b/web/components/SidebarEmptyHistory/index.tsx
@@ -1,15 +1,17 @@
-import useCreateConversation from '@hooks/useCreateConversation'
-import { useAtomValue, useSetAtom } from 'jotai'
 import { useEffect, useState } from 'react'
-import {
-  MainViewState,
-  setMainViewStateAtom,
-} from '@helpers/atoms/MainView.atom'
-import { activeModelAtom } from '@helpers/atoms/Model.atom'
-import { useGetDownloadedModels } from '@hooks/useGetDownloadedModels'
-import { Button } from '@uikit'
+
+import { useAtomValue, useSetAtom } from 'jotai'
+
 import { MessageCircle } from 'lucide-react'
-import { showingModalNoActiveModel } from '@helpers/atoms/Modal.atom'
+
+import { MainViewState } from '@/constants/screens'
+
+import { useCreateConversation } from '@/hooks/useCreateConversation'
+import { useGetDownloadedModels } from '@/hooks/useGetDownloadedModels'
+import { useMainViewState } from '@/hooks/useMainViewState'
+
+import { showingModalNoActiveModel } from '@/helpers/atoms/Modal.atom'
+import { activeAssistantModelAtom } from '@/helpers/atoms/Model.atom'
 
 enum ActionButton {
   DownloadModel = 'Download a Model',
@@ -18,8 +20,7 @@ enum ActionButton {
 
 const SidebarEmptyHistory: React.FC = () => {
   const { downloadedModels } = useGetDownloadedModels()
-  const activeModel = useAtomValue(activeModelAtom)
-  const setMainView = useSetAtom(setMainViewStateAtom)
+  const { setMainViewState } = useMainViewState()
   const { requestCreateConvo } = useCreateConversation()
   const [action, setAction] = useState(ActionButton.DownloadModel)
   const modalNoActiveModel = useSetAtom(showingModalNoActiveModel)
@@ -32,9 +33,10 @@ const SidebarEmptyHistory: React.FC = () => {
     }
   }, [downloadedModels])
 
+  const activeModel = useAtomValue(activeAssistantModelAtom)
   const onClick = async () => {
     if (action === ActionButton.DownloadModel) {
-      setMainView(MainViewState.ExploreModel)
+      setMainViewState(MainViewState.ExploreModels)
     } else {
       if (!activeModel) {
         modalNoActiveModel(true)
@@ -52,9 +54,7 @@ const SidebarEmptyHistory: React.FC = () => {
         <p className="mb-6 mt-1 text-center text-muted-foreground">
           Get started by creating a new chat.
         </p>
-        <Button onClick={onClick} themes="accent">
-          {action}
-        </Button>
+        <button onClick={onClick}>{action}</button>
       </div>
     </div>
   )
diff --git a/web/app/_components/SwitchingModelConfirmationModal/index.tsx b/web/components/SwitchingModelConfirmationModal/index.tsx
similarity index 94%
rename from web/app/_components/SwitchingModelConfirmationModal/index.tsx
rename to web/components/SwitchingModelConfirmationModal/index.tsx
index b75b19b4a..0658c2a20 100644
--- a/web/app/_components/SwitchingModelConfirmationModal/index.tsx
+++ b/web/components/SwitchingModelConfirmationModal/index.tsx
@@ -1,11 +1,16 @@
 import React, { Fragment } from 'react'
+
 import { Dialog, Transition } from '@headlessui/react'
 import { ExclamationTriangleIcon, XMarkIcon } from '@heroicons/react/24/outline'
-import { switchingModelConfirmationModalPropsAtom } from '@helpers/atoms/Modal.atom'
-import { useAtom, useAtomValue } from 'jotai'
-import { activeModelAtom } from '@helpers/atoms/Model.atom'
-import useStartStopModel from '@hooks/useStartStopModel'
+
 import { Model } from '@janhq/core/lib/types'
+import { useAtom, useAtomValue } from 'jotai'
+
+import { useActiveModel } from '@/hooks/useActiveModel'
+
+import { switchingModelConfirmationModalPropsAtom } from '@/helpers/atoms/Modal.atom'
+
+import { activeAssistantModelAtom } from '@/helpers/atoms/Model.atom'
 
 export type SwitchingModelConfirmationModalProps = {
   replacingModel: Model
@@ -13,8 +18,8 @@ export type SwitchingModelConfirmationModalProps = {
 
 const SwitchingModelConfirmationModal: React.FC = () => {
   const [props, setProps] = useAtom(switchingModelConfirmationModalPropsAtom)
-  const activeModel = useAtomValue(activeModelAtom)
-  const { startModel } = useStartStopModel()
+  const activeModel = useAtomValue(activeAssistantModelAtom)
+  const { startModel } = useActiveModel()
 
   const onConfirmSwitchModelClick = () => {
     const modelId = props?.replacingModel._id
diff --git a/web/app/_components/TextAreaWithTitle/index.tsx b/web/components/TextAreaWithTitle/index.tsx
similarity index 78%
rename from web/app/_components/TextAreaWithTitle/index.tsx
rename to web/components/TextAreaWithTitle/index.tsx
index 0b205be59..983134b4e 100644
--- a/web/app/_components/TextAreaWithTitle/index.tsx
+++ b/web/components/TextAreaWithTitle/index.tsx
@@ -1,4 +1,5 @@
-import React from 'react'
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
 import { useController } from 'react-hook-form'
 
 type Props = {
@@ -34,7 +35,7 @@ const TextAreaWithTitle: React.FC<Props> = ({
       )}
       <textarea
         rows={4}
-        className="block w-full resize-none rounded-md border-0 bg-background/80 py-1.5 text-xs leading-relaxed text-background-reverse shadow-sm ring-1 ring-inset ring-border placeholder:text-muted-foreground focus:ring-2 focus:ring-inset focus:ring-accent/50"
+        className="text-background-reverse block w-full resize-none rounded-md border-0 bg-background/80 py-1.5 text-xs leading-relaxed shadow-sm ring-1 ring-inset ring-border placeholder:text-muted-foreground focus:ring-2 focus:ring-inset focus:ring-accent/50"
         placeholder={placeholder}
         {...field}
       />
diff --git a/web/constants/screens.ts b/web/constants/screens.ts
new file mode 100644
index 000000000..76ad6fab5
--- /dev/null
+++ b/web/constants/screens.ts
@@ -0,0 +1,7 @@
+export enum MainViewState {
+  Welcome,
+  ExploreModels,
+  MyModels,
+  Setting,
+  Chat,
+}
diff --git a/web/app/_components/SimpleTag/TagType.ts b/web/constants/tagType.ts
similarity index 100%
rename from web/app/_components/SimpleTag/TagType.ts
rename to web/constants/tagType.ts
diff --git a/web/containers/BottomBar/index.tsx b/web/containers/BottomBar/index.tsx
deleted file mode 100644
index 622c5a5a3..000000000
--- a/web/containers/BottomBar/index.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import React from 'react'
-import SystemItem from '@containers/SystemItem'
-import useGetSystemResources from '@hooks/useGetSystemResources'
-import { useAtomValue } from 'jotai'
-import { modelDownloadStateAtom } from '@helpers/atoms/DownloadState.atom'
-import { formatDownloadPercentage } from '@utils/converter'
-import { activeModelAtom, stateModel } from '@helpers/atoms/Model.atom'
-import useGetAppVersion from '@hooks/useGetAppVersion'
-import ProgressBar from '@/_components/ProgressBar'
-import { appDownloadProgress } from '@helpers/JotaiWrapper'
-
-const BottomBar = () => {
-  const activeModel = useAtomValue(activeModelAtom)
-  const stateModelStartStop = useAtomValue(stateModel)
-  const { ram, cpu } = useGetSystemResources()
-  const modelDownloadStates = useAtomValue(modelDownloadStateAtom)
-  const appVersion = useGetAppVersion()
-  const progress = useAtomValue(appDownloadProgress)
-
-  const downloadStates: DownloadState[] = []
-  for (const [, value] of Object.entries(modelDownloadStates)) {
-    downloadStates.push(value)
-  }
-
-  return (
-    <div className="fixed bottom-0 left-0 z-20 flex h-8 w-full items-center justify-between border-t border-border bg-background/50 px-4">
-      <div className="flex items-center gap-x-2">
-        <div className="flex items-center space-x-2">
-          {progress && progress >= 0 ? (
-            <ProgressBar total={100} used={progress} />
-          ) : null}
-          {downloadStates.length > 0 && (
-            <SystemItem
-              name="Downloading"
-              value={`${downloadStates[0]
-                ?.fileName}: ${formatDownloadPercentage(
-                downloadStates[0]?.percent
-              )}`}
-            />
-          )}
-        </div>
-
-        {stateModelStartStop.state === 'start' &&
-          stateModelStartStop.loading && (
-            <SystemItem
-              name="Starting:"
-              value={stateModelStartStop.model || '-'}
-            />
-          )}
-        {stateModelStartStop.state === 'stop' &&
-          stateModelStartStop.loading && (
-            <SystemItem
-              name="Stopping:"
-              value={stateModelStartStop.model || '-'}
-            />
-          )}
-        {!stateModelStartStop.loading && (
-          <SystemItem name="Active model:" value={activeModel?.name || '-'} />
-        )}
-      </div>
-      <div className="flex gap-x-2">
-        <SystemItem name="CPU:" value={`${cpu}%`} />
-        <SystemItem name="Mem:" value={`${ram}%`} />
-        <p className="text-xs font-semibold">
-          Jan v{appVersion?.version ?? ''}
-        </p>
-      </div>
-    </div>
-  )
-}
-
-export default BottomBar
diff --git a/web/containers/Brand/Logo/Mark.tsx b/web/containers/Brand/Logo/Mark.tsx
new file mode 100644
index 000000000..f26b9ee2a
--- /dev/null
+++ b/web/containers/Brand/Logo/Mark.tsx
@@ -0,0 +1,20 @@
+import Image from 'next/image'
+
+type Props = {
+  width?: number
+  height?: number
+  className?: string
+}
+
+export default function LogoMark(props: Props) {
+  const { width = 24, height = 24, className } = props
+  return (
+    <Image
+      width={width}
+      height={height}
+      className={className}
+      src="icons/app_icon.svg"
+      alt="Jan - Logo"
+    />
+  )
+}
diff --git a/web/containers/Layout/BottomBar/DownloadingState/index.tsx b/web/containers/Layout/BottomBar/DownloadingState/index.tsx
new file mode 100644
index 000000000..9ee8359db
--- /dev/null
+++ b/web/containers/Layout/BottomBar/DownloadingState/index.tsx
@@ -0,0 +1,87 @@
+import { Fragment } from 'react'
+
+import {
+  Progress,
+  Modal,
+  ModalContent,
+  Button,
+  ModalHeader,
+  ModalTitle,
+  ModalTrigger,
+} from '@janhq/uikit'
+
+import { useDownloadState } from '@/hooks/useDownloadState'
+
+import { formatDownloadPercentage } from '@/utils/converter'
+
+export default function DownloadingState() {
+  const { downloadStates } = useDownloadState()
+
+  const totalCurrentProgress = downloadStates
+    .map((a) => a.size.transferred + a.size.transferred)
+    .reduce((partialSum, a) => partialSum + a, 0)
+
+  const totalSize = downloadStates
+    .map((a) => a.size.total + a.size.total)
+    .reduce((partialSum, a) => partialSum + a, 0)
+
+  const totalPercentage = ((totalCurrentProgress / totalSize) * 100).toFixed(2)
+
+  return (
+    <Fragment>
+      {downloadStates?.length > 0 && (
+        <Modal>
+          <ModalTrigger asChild>
+            <div className="relative block">
+              <Button size="sm" themes="outline">
+                <span>{downloadStates.length} Downloading model</span>
+              </Button>
+              <span
+                className="absolute left-0 h-full rounded-md rounded-l-md bg-primary/20"
+                style={{
+                  width: `${totalPercentage}%`,
+                }}
+              />
+            </div>
+          </ModalTrigger>
+          <ModalContent>
+            <ModalHeader>
+              <ModalTitle>Downloading model</ModalTitle>
+            </ModalHeader>
+            {downloadStates.map((item, i) => {
+              return (
+                <div className="pt-2" key={i}>
+                  <Progress
+                    className="mb-2 h-2"
+                    value={
+                      formatDownloadPercentage(item?.percent, {
+                        hidePercentage: true,
+                      }) as number
+                    }
+                  />
+                  <div className="flex items-center justify-between">
+                    <div className="flex gap-x-2">
+                      <p>{item?.fileName}</p>
+                      <span>{formatDownloadPercentage(item?.percent)}</span>
+                    </div>
+                    <Button
+                      themes="outline"
+                      size="sm"
+                      onClick={() =>
+                        window.coreAPI?.abortDownload(
+                          `models/${item?.fileName}`
+                        )
+                      }
+                    >
+                      Cancel
+                    </Button>
+                  </div>
+                </div>
+              )
+            })}
+          </ModalContent>
+        </Modal>
+      )}
+    </Fragment>
+  )
+}
diff --git a/web/containers/Layout/BottomBar/SystemItem/index.tsx b/web/containers/Layout/BottomBar/SystemItem/index.tsx
new file mode 100644
index 000000000..bab545547
--- /dev/null
+++ b/web/containers/Layout/BottomBar/SystemItem/index.tsx
@@ -0,0 +1,15 @@
+import { ReactNode } from 'react'
+
+type Props = {
+  name?: string
+  value: string | ReactNode
+}
+
+export default function SystemItem({ name, value }: Props) {
+  return (
+    <div className="flex items-center gap-x-1">
+      <p className="text-xs">{name}</p>
+      <span className="text-xs">{value}</span>
+    </div>
+  )
+}
diff --git a/web/containers/Layout/BottomBar/index.tsx b/web/containers/Layout/BottomBar/index.tsx
new file mode 100644
index 000000000..aa9715454
--- /dev/null
+++ b/web/containers/Layout/BottomBar/index.tsx
@@ -0,0 +1,81 @@
+import { Badge, Button } from '@janhq/uikit'
+import { useAtomValue } from 'jotai'
+
+import ProgressBar from '@/components/ProgressBar'
+
+import DownloadingState from '@/containers/Layout/BottomBar/DownloadingState'
+
+import SystemItem from '@/containers/Layout/BottomBar/SystemItem'
+
+import { appDownloadProgress } from '@/containers/Providers/Jotai'
+
+import { MainViewState } from '@/constants/screens'
+
+import { useActiveModel } from '@/hooks/useActiveModel'
+
+import { useDownloadState } from '@/hooks/useDownloadState'
+import { useGetAppVersion } from '@/hooks/useGetAppVersion'
+import { useGetDownloadedModels } from '@/hooks/useGetDownloadedModels'
+import useGetSystemResources from '@/hooks/useGetSystemResources'
+import { useMainViewState } from '@/hooks/useMainViewState'
+
+const BottomBar = () => {
+  const { activeModel, stateModel } = useActiveModel()
+  const { ram, cpu } = useGetSystemResources()
+  const progress = useAtomValue(appDownloadProgress)
+  const appVersion = useGetAppVersion()
+  const { downloadedModels } = useGetDownloadedModels()
+  const { setMainViewState } = useMainViewState()
+  const { downloadStates } = useDownloadState()
+
+  return (
+    <div className="fixed bottom-0 left-16 z-20 flex h-12 w-[calc(100%-64px)] items-center justify-between border-t border-border bg-background/50 px-3">
+      <div className="flex flex-shrink-0 items-center gap-x-2">
+        <div className="flex items-center space-x-2">
+          {!progress && progress === 0 ? (
+            <ProgressBar total={100} used={progress} />
+          ) : null}
+        </div>
+
+        {stateModel.state === 'start' && stateModel.loading && (
+          <SystemItem name="Starting:" value={stateModel.model || '-'} />
+        )}
+        {stateModel.state === 'stop' && stateModel.loading && (
+          <SystemItem name="Stopping:" value={stateModel.model || '-'} />
+        )}
+        {!stateModel.loading && downloadedModels.length !== 0 && (
+          <SystemItem
+            name="Active model:"
+            value={
+              activeModel?._id || (
+                <Badge themes="secondary">⌘e to show your model</Badge>
+              )
+            }
+          />
+        )}
+        {downloadedModels.length === 0 &&
+          !stateModel.loading &&
+          downloadStates.length === 0 && (
+            <Button
+              size="sm"
+              themes="outline"
+              onClick={() => setMainViewState(MainViewState.ExploreModels)}
+            >
+              Download your first model
+            </Button>
+          )}
+
+        <DownloadingState />
+      </div>
+      <div className="flex gap-x-2">
+        <SystemItem name="CPU:" value={`${cpu}%`} />
+        <SystemItem name="Mem:" value={`${ram}%`} />
+        <span className="text-xs font-semibold ">
+          Jan v{appVersion?.version ?? ''}
+        </span>
+      </div>
+    </div>
+  )
+}
+
+export default BottomBar
diff --git a/web/containers/Layout/Ribbon/index.tsx b/web/containers/Layout/Ribbon/index.tsx
new file mode 100644
index 000000000..09f29ced7
--- /dev/null
+++ b/web/containers/Layout/Ribbon/index.tsx
@@ -0,0 +1,152 @@
+import { useContext } from 'react'
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  TooltipArrow,
+} from '@janhq/uikit'
+import { motion as m } from 'framer-motion'
+
+import {
+  MessageCircleIcon,
+  SettingsIcon,
+  DatabaseIcon,
+  CpuIcon,
+  BookOpenIcon,
+} from 'lucide-react'
+
+import { twMerge } from 'tailwind-merge'
+
+import LogoMark from '@/containers/Brand/Logo/Mark'
+
+import { FeatureToggleContext } from '@/context/FeatureToggle'
+
+import { MainViewState } from '@/constants/screens'
+
+import { useMainViewState } from '@/hooks/useMainViewState'
+
+export default function RibbonNav() {
+  const { mainViewState, setMainViewState } = useMainViewState()
+  const { experimentalFeatureEnabed } = useContext(FeatureToggleContext)
+
+  const onMenuClick = (state: MainViewState) => {
+    if (mainViewState === state) return
+    setMainViewState(state)
+  }
+
+  const primaryMenus = [
+    {
+      name: 'Getting Started',
+      icon: <BookOpenIcon size={20} className="flex-shrink-0" />,
+      state: MainViewState.Welcome,
+    },
+    {
+      name: 'Chat',
+      icon: <MessageCircleIcon size={20} className="flex-shrink-0" />,
+      state: MainViewState.Chat,
+    },
+  ]
+
+  const secondaryMenus = [
+    // Add menu if experimental feature
+    ...(experimentalFeatureEnabed ? [] : []),
+    {
+      name: 'Explore Models',
+      icon: <CpuIcon size={20} className="flex-shrink-0" />,
+      state: MainViewState.ExploreModels,
+    },
+    {
+      name: 'My Models',
+      icon: <DatabaseIcon size={20} className="flex-shrink-0" />,
+      state: MainViewState.MyModels,
+    },
+    {
+      name: 'Settings',
+      icon: <SettingsIcon size={20} className="flex-shrink-0" />,
+      state: MainViewState.Setting,
+    },
+  ]
+  return (
+    <div className="relative top-12 flex h-[calc(100%-48px)] w-16 flex-shrink-0 flex-col border-r border-border py-4">
+      <div className="mt-2 flex h-full w-full flex-col items-center justify-between">
+        <div className="flex h-full w-full flex-col items-center justify-between">
+          <div>
+            <div className="unselect mb-4">
+              <LogoMark width={28} height={28} className="mx-auto" />
+            </div>
+            {primaryMenus
+              .filter((primary) => !!primary)
+              .map((primary, i) => {
+                const isActive = mainViewState === primary.state
+                return (
+                  <div className="relative flex p-2" key={i}>
+                    <Tooltip>
+                      <TooltipTrigger>
+                        <div
+                          data-testid={primary.name}
+                          className={twMerge(
+                            'relative flex w-full flex-shrink-0 cursor-pointer items-center justify-center',
+                            isActive && 'z-10'
+                          )}
+                          onClick={() => onMenuClick(primary.state)}
+                        >
+                          {primary.icon}
+                        </div>
+                        {isActive && (
+                          <m.div
+                            className="absolute inset-0 left-0 h-full w-full rounded-md bg-primary/50"
+                            layoutId="active-state-primary"
+                          />
+                        )}
+                      </TooltipTrigger>
+                      <TooltipContent side="right" sideOffset={10}>
+                        <span>{primary.name}</span>
+                        <TooltipArrow />
+                      </TooltipContent>
+                    </Tooltip>
+                  </div>
+                )
+              })}
+          </div>
+
+          <div>
+            {secondaryMenus
+              .filter((secondary) => !!secondary)
+              .map((secondary, i) => {
+                const isActive = mainViewState === secondary.state
+                return (
+                  <div className="relative flex p-2" key={i}>
+                    <Tooltip>
+                      <TooltipTrigger>
+                        <div
+                          data-testid={secondary.name}
+                          className={twMerge(
+                            'relative flex w-full flex-shrink-0 cursor-pointer items-center justify-center',
+                            isActive && 'z-10'
+                          )}
+                          onClick={() => onMenuClick(secondary.state)}
+                        >
+                          {secondary.icon}
+                        </div>
+                        {isActive && (
+                          <m.div
+                            className="absolute inset-0 left-0 h-full w-full rounded-md bg-primary/50"
+                            layoutId="active-state-secondary"
+                          />
+                        )}
+                      </TooltipTrigger>
+                      <TooltipContent side="right" sideOffset={10}>
+                        <span>{secondary.name}</span>
+                        <TooltipArrow />
+                      </TooltipContent>
+                    </Tooltip>
+                  </div>
+                )
+              })}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/web/containers/Layout/TopBar/CommandListDownloadedModel/index.tsx b/web/containers/Layout/TopBar/CommandListDownloadedModel/index.tsx
new file mode 100644
index 000000000..fb135c6f1
--- /dev/null
+++ b/web/containers/Layout/TopBar/CommandListDownloadedModel/index.tsx
@@ -0,0 +1,99 @@
+import { Fragment, useState, useEffect } from 'react'
+
+import {
+  CommandModal,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  Badge,
+} from '@janhq/uikit'
+
+import { DatabaseIcon, CpuIcon } from 'lucide-react'
+
+import { MainViewState } from '@/constants/screens'
+
+import { useActiveModel } from '@/hooks/useActiveModel'
+import { useGetDownloadedModels } from '@/hooks/useGetDownloadedModels'
+import { useMainViewState } from '@/hooks/useMainViewState'
+
+export default function CommandListDownloadedModel() {
+  const { setMainViewState } = useMainViewState()
+  const { downloadedModels } = useGetDownloadedModels()
+  const { activeModel, startModel, stopModel } = useActiveModel()
+
+  const onModelActionClick = (modelId: string) => {
+    if (activeModel && activeModel._id === modelId) {
+      stopModel(modelId)
+    } else {
+      startModel(modelId)
+    }
+  }
+
+  const [open, setOpen] = useState(false)
+
+  useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === 'e' && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault()
+        setOpen((open) => !open)
+      }
+    }
+    document.addEventListener('keydown', down)
+    return () => document.removeEventListener('keydown', down)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const isNotDownloadedModel = downloadedModels.length === 0
+
+  if (isNotDownloadedModel) return null
+
+  return (
+    <Fragment>
+      <CommandModal open={open} onOpenChange={setOpen}>
+        <CommandInput placeholder="Search your model..." />
+        <CommandList>
+          <CommandEmpty>No Model found.</CommandEmpty>
+          {!isNotDownloadedModel && (
+            <CommandGroup heading="Your Model">
+              {downloadedModels.map((model, i) => {
+                return (
+                  <CommandItem
+                    key={i}
+                    onSelect={() => {
+                      onModelActionClick(model._id)
+                      setOpen(false)
+                    }}
+                  >
+                    <DatabaseIcon
+                      size={16}
+                      className="mr-3 text-muted-foreground"
+                    />
+                    <div className="flex w-full items-center justify-between">
+                      <span>{model.name}</span>
+                      {activeModel && activeModel._id === model._id && (
+                        <Badge>Active</Badge>
+                      )}
+                    </div>
+                  </CommandItem>
+                )
+              })}
+            </CommandGroup>
+          )}
+          <CommandGroup heading="Find another model">
+            <CommandItem
+              onSelect={() => {
+                setMainViewState(MainViewState.ExploreModels)
+                setOpen(false)
+              }}
+            >
+              <CpuIcon size={16} className="mr-3 text-muted-foreground" />
+              <span>Explore Models</span>
+            </CommandItem>
+          </CommandGroup>
+        </CommandList>
+      </CommandModal>
+    </Fragment>
+  )
+}
diff --git a/web/containers/Layout/TopBar/CommandSearch/index.tsx b/web/containers/Layout/TopBar/CommandSearch/index.tsx
new file mode 100644
index 000000000..568c0dae4
--- /dev/null
+++ b/web/containers/Layout/TopBar/CommandSearch/index.tsx
@@ -0,0 +1,124 @@
+import { Fragment, useState, useEffect, useContext } from 'react'
+
+import {
+  Button,
+  CommandModal,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandShortcut,
+  CommandList,
+} from '@janhq/uikit'
+
+import {
+  MessageCircleIcon,
+  SettingsIcon,
+  DatabaseIcon,
+  CpuIcon,
+  BookOpenIcon,
+} from 'lucide-react'
+
+import { FeatureToggleContext } from '@/context/FeatureToggle'
+
+import { MainViewState } from '@/constants/screens'
+
+import { useMainViewState } from '@/hooks/useMainViewState'
+
+export default function CommandSearch() {
+  const { experimentalFeatureEnabed } = useContext(FeatureToggleContext)
+
+  const { setMainViewState } = useMainViewState()
+
+  const [open, setOpen] = useState(false)
+  const menus = [
+    {
+      name: 'Getting Started',
+      icon: <BookOpenIcon size={16} className="mr-3 text-muted-foreground" />,
+      state: MainViewState.Welcome,
+    },
+    {
+      name: 'Chat',
+      icon: (
+        <MessageCircleIcon size={16} className="mr-3 text-muted-foreground" />
+      ),
+      state: MainViewState.Chat,
+    },
+    // Added experimental feature here
+    ...(experimentalFeatureEnabed ? [] : []),
+    {
+      name: 'Explore Models',
+      icon: <CpuIcon size={16} className="mr-3 text-muted-foreground" />,
+      state: MainViewState.ExploreModels,
+    },
+    {
+      name: 'My Models',
+      icon: <DatabaseIcon size={16} className="mr-3 text-muted-foreground" />,
+      state: MainViewState.MyModels,
+    },
+    {
+      name: 'Settings',
+      icon: <SettingsIcon size={16} className="mr-3 text-muted-foreground" />,
+      state: MainViewState.Setting,
+      shortcut: '⌘,',
+    },
+  ]
+
+  useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === 'j' && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault()
+        setOpen((open) => !open)
+      }
+      if (e.key === ',' && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault()
+        setMainViewState(MainViewState.Setting)
+      }
+    }
+    document.addEventListener('keydown', down)
+    return () => document.removeEventListener('keydown', down)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return (
+    <Fragment>
+      <div className="relative">
+        <Button
+          themes="outline"
+          className="unset-drag h-8 w-[300px] justify-start text-left text-xs font-normal text-muted-foreground focus:ring-0"
+          onClick={() => setOpen((open) => !open)}
+        >
+          Search menus...
+        </Button>
+        <div className="absolute right-2 top-1/2 -translate-y-1/2 rounded-md bg-secondary px-1 py-0.5 text-xs font-bold text-muted-foreground">
+          ⌘ j
+        </div>
+      </div>
+      <CommandModal open={open} onOpenChange={setOpen}>
+        <CommandInput placeholder="Type a command or search..." />
+        <CommandList>
+          <CommandEmpty>No results found.</CommandEmpty>
+          <CommandGroup heading="Suggestions">
+            {menus.map((menu, i) => {
+              return (
+                <CommandItem
+                  key={i}
+                  onSelect={() => {
+                    setMainViewState(menu.state)
+                    setOpen(false)
+                  }}
+                >
+                  {menu.icon}
+                  <span>{menu.name}</span>
+                  {menu.shortcut && (
+                    <CommandShortcut>{menu.shortcut}</CommandShortcut>
+                  )}
+                </CommandItem>
+              )
+            })}
+          </CommandGroup>
+        </CommandList>
+      </CommandModal>
+    </Fragment>
+  )
+}
diff --git a/web/containers/Layout/TopBar/index.tsx b/web/containers/Layout/TopBar/index.tsx
new file mode 100644
index 000000000..e5429297e
--- /dev/null
+++ b/web/containers/Layout/TopBar/index.tsx
@@ -0,0 +1,23 @@
+import CommandListDownloadedModel from '@/containers/Layout/TopBar/CommandListDownloadedModel'
+import CommandSearch from '@/containers/Layout/TopBar/CommandSearch'
+
+import { useMainViewState } from '@/hooks/useMainViewState'
+
+const TopBar = () => {
+  const { viewStateName } = useMainViewState()
+
+  return (
+    <div className="fixed left-0 top-0 z-50 flex h-12 w-full border-b border-border bg-background/50">
+      <div className="relative left-16 flex w-[calc(100%-64px)] items-center justify-between space-x-4 pl-6 pr-2">
+        <div>
+          <span className="font-medium">{viewStateName}</span>
+        </div>
+        <CommandSearch />
+        {/* Command without trigger interface */}
+        <CommandListDownloadedModel />
+      </div>
+    </div>
+  )
+}
+
+export default TopBar
diff --git a/web/containers/Layout/index.tsx b/web/containers/Layout/index.tsx
index 9788062c9..12f119250 100644
--- a/web/containers/Layout/index.tsx
+++ b/web/containers/Layout/index.tsx
@@ -1,20 +1,19 @@
 import React, { PropsWithChildren, useEffect } from 'react'
-import { useAtomValue, useSetAtom } from 'jotai'
+
 import { useTheme } from 'next-themes'
-import { SidebarLeft, SidebarRight } from '@containers/Sidebar'
-import { twMerge } from 'tailwind-merge'
-import { rightSideBarExpandStateAtom } from '@helpers/atoms/SideBarExpand.atom'
-import Topbar from '@containers/Topbar'
-import BottomBar from '@containers/BottomBar'
+
 import { motion as m } from 'framer-motion'
-import { getMainViewStateAtom } from '@helpers/atoms/MainView.atom'
-import { MainViewState } from '@helpers/atoms/MainView.atom'
+
+import BottomBar from '@/containers/Layout/BottomBar'
+import RibbonNav from '@/containers/Layout/Ribbon'
+
+import TopBar from '@/containers/Layout/TopBar'
+
+import { useMainViewState } from '@/hooks/useMainViewState'
 
 const BaseLayout = (props: PropsWithChildren) => {
   const { children } = props
-
-  const isRightSidebarVisible = useAtomValue(rightSideBarExpandStateAtom)
-  const viewState = useAtomValue(getMainViewStateAtom)
+  const { mainViewState } = useMainViewState()
 
   const { theme } = useTheme()
 
@@ -35,19 +34,12 @@ const BaseLayout = (props: PropsWithChildren) => {
 
   return (
     <div className="flex h-screen w-screen flex-1 overflow-hidden">
-      <SidebarLeft />
-      <div
-        className={twMerge(
-          'border-border bg-background/50 relative top-8 flex h-[calc(100vh-72px)] w-full overflow-hidden rounded-lg border',
-          viewState === MainViewState.BotInfo && isRightSidebarVisible
-            ? 'mr-0'
-            : 'mr-4'
-        )}
-      >
+      <RibbonNav />
+      <div className=" relative top-12 flex h-[calc(100vh-96px)] w-full overflow-hidden bg-background/50">
         <div className="w-full">
-          <Topbar />
+          <TopBar />
           <m.div
-            key={viewState}
+            key={mainViewState}
             initial={{ opacity: 0, y: -8 }}
             className="h-full"
             animate={{
@@ -63,9 +55,6 @@ const BaseLayout = (props: PropsWithChildren) => {
           <BottomBar />
         </div>
       </div>
-      {viewState === MainViewState.BotInfo && isRightSidebarVisible && (
-        <SidebarRight />
-      )}
     </div>
   )
 }
diff --git a/web/containers/Loader/index.tsx b/web/containers/Loader/index.tsx
index e9db411d6..dcf1bec65 100644
--- a/web/containers/Loader/index.tsx
+++ b/web/containers/Loader/index.tsx
@@ -1,18 +1,22 @@
-import React from 'react'
-
-const Loader = () => {
+type Props = {
+  description: string
+}
+export default function Loader({ description }: Props) {
   return (
-    <div className="loader">
-      <div className="loader-inner">
-        <label className="h-2 w-2 rounded-full bg-gray-500 dark:bg-white" />
-        <label className="h-2 w-2 rounded-full bg-gray-500 dark:bg-white" />
-        <label className="h-2 w-2 rounded-full bg-gray-500 dark:bg-white" />
-        <label className="h-2 w-2 rounded-full bg-gray-500 dark:bg-white" />
-        <label className="h-2 w-2 rounded-full bg-gray-500 dark:bg-white" />
-        <label className="h-2 w-2 rounded-full bg-gray-500 dark:bg-white" />
+    <div className="fixed inset-0 z-50 flex h-full items-center justify-center gap-y-4 rounded-lg bg-background/90 backdrop-blur-sm">
+      <div className="space-y-16">
+        <div className="loader">
+          <div className="loader-inner">
+            <label className="h-2 w-2 rounded-full bg-primary" />
+            <label className="h-2 w-2 rounded-full bg-primary" />
+            <label className="h-2 w-2 rounded-full bg-primary" />
+            <label className="h-2 w-2 rounded-full bg-primary" />
+            <label className="h-2 w-2 rounded-full bg-primary" />
+            <label className="h-2 w-2 rounded-full bg-primary" />
+          </div>
+        </div>
+        <p className="font-medium text-muted-foreground">{description}</p>
       </div>
     </div>
   )
 }
-
-export default Loader
diff --git a/web/containers/Logo/CompactLogo/index.tsx b/web/containers/Logo/CompactLogo/index.tsx
deleted file mode 100644
index fb7a883e3..000000000
--- a/web/containers/Logo/CompactLogo/index.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react'
-import JanImage from '@containers/JanImage'
-import { useSetAtom } from 'jotai'
-import { setActiveConvoIdAtom } from '@helpers/atoms/Conversation.atom'
-
-type Props = {
-  width?: number
-  height?: number
-}
-
-const CompactLogo = (props: Props) => {
-  const { width = 24, height = 24 } = props
-  const setActiveConvoId = useSetAtom(setActiveConvoIdAtom)
-
-  return (
-    <button onClick={() => setActiveConvoId(undefined)}>
-      <JanImage imageUrl="icons/app_icon.svg" width={width} height={height} />
-    </button>
-  )
-}
-
-export default React.memo(CompactLogo)
diff --git a/web/containers/ModalCancelDownload/index.tsx b/web/containers/ModalCancelDownload/index.tsx
new file mode 100644
index 000000000..2f753d705
--- /dev/null
+++ b/web/containers/ModalCancelDownload/index.tsx
@@ -0,0 +1,85 @@
+import { useMemo } from 'react'
+
+import { ModelVersion } from '@janhq/core/lib/types'
+
+import {
+  Modal,
+  ModalTrigger,
+  ModalClose,
+  ModalFooter,
+  ModalContent,
+  ModalHeader,
+  Button,
+  ModalTitle,
+} from '@janhq/uikit'
+
+import { atom, useAtomValue } from 'jotai'
+
+import { useDownloadState } from '@/hooks/useDownloadState'
+import useGetPerformanceTag from '@/hooks/useGetPerformanceTag'
+
+import { formatDownloadPercentage } from '@/utils/converter'
+
+type Props = {
+  suitableModel: ModelVersion
+  isFromList?: boolean
+}
+
+export default function ModalCancelDownload({
+  suitableModel,
+  isFromList,
+}: Props) {
+  const { modelDownloadStateAtom } = useDownloadState()
+  useGetPerformanceTag()
+  const downloadAtom = useMemo(
+    () => atom((get) => get(modelDownloadStateAtom)[suitableModel._id]),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [suitableModel._id]
+  )
+  const downloadState = useAtomValue(downloadAtom)
+
+  return (
+    <Modal>
+      <ModalTrigger asChild>
+        {isFromList ? (
+          <Button themes="outline" size="sm">
+            Cancel ({formatDownloadPercentage(downloadState.percent)})
+          </Button>
+        ) : (
+          <Button>
+            Cancel ({formatDownloadPercentage(downloadState.percent)})
+          </Button>
+        )}
+      </ModalTrigger>
+      <ModalContent>
+        <ModalHeader>
+          <ModalTitle>Cancel Download</ModalTitle>
+        </ModalHeader>
+        <p>
+          Are you sure you want to cancel the download of&nbsp;
+          {downloadState?.fileName}?
+        </p>
+        <ModalFooter>
+          <div className="flex gap-x-2">
+            <ModalClose asChild>
+              <Button themes="ghost">No</Button>
+            </ModalClose>
+            <ModalClose asChild>
+              <Button
+                themes="danger"
+                onClick={() => {
+                  if (downloadState?.fileName)
+                    window.coreAPI?.abortDownload(
+                      `models/${downloadState?.fileName}`
+                    )
+                }}
+              >
+                Yes
+              </Button>
+            </ModalClose>
+          </div>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}
diff --git a/web/helpers/EventHandler.tsx b/web/containers/Providers/EventHandler.tsx
similarity index 80%
rename from web/helpers/EventHandler.tsx
rename to web/containers/Providers/EventHandler.tsx
index 2316f6407..7b4f5b607 100644
--- a/web/helpers/EventHandler.tsx
+++ b/web/containers/Providers/EventHandler.tsx
@@ -1,28 +1,29 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { ReactNode, useEffect, useRef } from 'react'
+
+import { events, EventName, NewMessageResponse, PluginType } from '@janhq/core'
+
+import { ConversationalPlugin, ModelPlugin } from '@janhq/core/lib/plugins'
+import { Message } from '@janhq/core/lib/types'
+import { useAtomValue, useSetAtom } from 'jotai'
+
+import { useDownloadState } from '@/hooks/useDownloadState'
+import { useGetDownloadedModels } from '@/hooks/useGetDownloadedModels'
+
 import {
   addNewMessageAtom,
   chatMessages,
   updateMessageAtom,
-} from './atoms/ChatMessage.atom'
-import { toChatMessage } from '@models/ChatMessage'
-import { events, EventName, NewMessageResponse, PluginType } from '@janhq/core'
-import { useAtomValue, useSetAtom } from 'jotai'
-import { ReactNode, useEffect, useRef } from 'react'
-import useGetBots from '@hooks/useGetBots'
+} from '@/helpers/atoms/ChatMessage.atom'
 import {
   updateConversationAtom,
   updateConversationWaitingForResponseAtom,
   userConversationsAtom,
-} from './atoms/Conversation.atom'
-import {
-  setDownloadStateAtom,
-  setDownloadStateSuccessAtom,
-} from './atoms/DownloadState.atom'
-import { downloadedModelAtom } from './atoms/DownloadedModel.atom'
-import { getDownloadedModels } from '../hooks/useGetDownloadedModels'
-import { pluginManager } from '../plugin/PluginManager'
-import { Message } from '@janhq/core/lib/types'
-import { ConversationalPlugin, ModelPlugin } from '@janhq/core/lib/plugins'
-import { downloadingModelsAtom } from './atoms/Model.atom'
+} from '@/helpers/atoms/Conversation.atom'
+
+import { downloadingModelsAtom } from '@/helpers/atoms/Model.atom'
+import { toChatMessage } from '@/models/ChatMessage'
+import { pluginManager } from '@/plugin'
 
 let currentConversation: Conversation | undefined = undefined
 
@@ -30,12 +31,11 @@ export default function EventHandler({ children }: { children: ReactNode }) {
   const addNewMessage = useSetAtom(addNewMessageAtom)
   const updateMessage = useSetAtom(updateMessageAtom)
   const updateConversation = useSetAtom(updateConversationAtom)
-  const { getBotById } = useGetBots()
+
+  const { setDownloadState, setDownloadStateSuccess } = useDownloadState()
+  const { downloadedModels, setDownloadedModels } = useGetDownloadedModels()
 
   const updateConvWaiting = useSetAtom(updateConversationWaitingForResponseAtom)
-  const setDownloadState = useSetAtom(setDownloadStateAtom)
-  const setDownloadStateSuccess = useSetAtom(setDownloadStateSuccessAtom)
-  const setDownloadedModels = useSetAtom(downloadedModelAtom)
   const models = useAtomValue(downloadingModelsAtom)
   const messages = useAtomValue(chatMessages)
   const conversations = useAtomValue(userConversationsAtom)
@@ -53,15 +53,8 @@ export default function EventHandler({ children }: { children: ReactNode }) {
         (e) => e._id == message.conversationId
       )
       if (!convo) return
-      const botId = convo?.botId
-      if (botId) {
-        const bot = await getBotById(botId)
-        const newResponse = toChatMessage(message, bot)
-        addNewMessage(newResponse)
-      } else {
-        const newResponse = toChatMessage(message)
-        addNewMessage(newResponse)
-      }
+      const newResponse = toChatMessage(message)
+      addNewMessage(newResponse)
     }
   }
   async function handleMessageResponseUpdate(
@@ -114,6 +107,7 @@ export default function EventHandler({ children }: { children: ReactNode }) {
       const messagesData = (messagesRef.current ?? [])[convo._id].map<Message>(
         (e: ChatMessage) => {
           return {
+            // eslint-disable-next-line @typescript-eslint/naming-convention
             _id: e.id,
             message: e.text,
             user: e.senderUid,
@@ -126,8 +120,10 @@ export default function EventHandler({ children }: { children: ReactNode }) {
         .get<ConversationalPlugin>(PluginType.Conversational)
         ?.saveConversation({
           ...convo,
+          // eslint-disable-next-line @typescript-eslint/naming-convention
           _id: convo._id ?? '',
           name: convo.name ?? '',
+          message: convo.lastMessage ?? '',
           messages: messagesData,
         })
     }
@@ -140,6 +136,7 @@ export default function EventHandler({ children }: { children: ReactNode }) {
 
   function handleDownloadSuccess(state: any) {
     if (state && state.fileName && state.success === true) {
+      state.fileName = state.fileName.replace('models/', '')
       setDownloadStateSuccess(state.fileName)
       const model = models.find((e) => e._id === state.fileName)
       if (model)
@@ -147,9 +144,7 @@ export default function EventHandler({ children }: { children: ReactNode }) {
           .get<ModelPlugin>(PluginType.Model)
           ?.saveModel(model)
           .then(() => {
-            getDownloadedModels().then((models) => {
-              setDownloadedModels(models)
-            })
+            setDownloadedModels([...downloadedModels, model])
           })
     }
   }
@@ -165,6 +160,7 @@ export default function EventHandler({ children }: { children: ReactNode }) {
       events.on(EventName.OnDownloadUpdate, handleDownloadUpdate)
       events.on(EventName.OnDownloadSuccess, handleDownloadSuccess)
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   useEffect(() => {
@@ -178,6 +174,7 @@ export default function EventHandler({ children }: { children: ReactNode }) {
       events.off(EventName.OnDownloadUpdate, handleDownloadUpdate)
       events.off(EventName.OnDownloadSuccess, handleDownloadSuccess)
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
   return <>{children}</>
 }
diff --git a/web/helpers/EventListenerWrapper.tsx b/web/containers/Providers/EventListener.tsx
similarity index 65%
rename from web/helpers/EventListenerWrapper.tsx
rename to web/containers/Providers/EventListener.tsx
index 2bb7ed31f..528cd254b 100644
--- a/web/helpers/EventListenerWrapper.tsx
+++ b/web/containers/Providers/EventListener.tsx
@@ -1,34 +1,32 @@
-'use client'
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { PropsWithChildren, useEffect, useRef } from 'react'
+
+import { PluginType } from '@janhq/core'
+import { ModelPlugin } from '@janhq/core/lib/plugins'
 
 import { useAtomValue, useSetAtom } from 'jotai'
-import { ReactNode, useEffect, useRef } from 'react'
-import { appDownloadProgress } from './JotaiWrapper'
-import { PluginType } from '@janhq/core'
-import {
-  setDownloadStateAtom,
-  setDownloadStateSuccessAtom,
-} from './atoms/DownloadState.atom'
-import { getDownloadedModels } from '../hooks/useGetDownloadedModels'
-import { downloadedModelAtom } from './atoms/DownloadedModel.atom'
+
+import { useDownloadState } from '@/hooks/useDownloadState'
+import { useGetDownloadedModels } from '@/hooks/useGetDownloadedModels'
+
 import EventHandler from './EventHandler'
-import { pluginManager } from '@plugin/PluginManager'
-import { ModelPlugin } from '@janhq/core/lib/plugins'
-import { downloadingModelsAtom } from './atoms/Model.atom'
 
-type Props = {
-  children: ReactNode
-}
+import { appDownloadProgress } from './Jotai'
 
-export default function EventListenerWrapper({ children }: Props) {
-  const setDownloadState = useSetAtom(setDownloadStateAtom)
-  const setDownloadStateSuccess = useSetAtom(setDownloadStateSuccessAtom)
+import { downloadingModelsAtom } from '@/helpers/atoms/Model.atom'
+import { pluginManager } from '@/plugin/PluginManager'
+
+export default function EventListenerWrapper({ children }: PropsWithChildren) {
   const setProgress = useSetAtom(appDownloadProgress)
-  const setDownloadedModels = useSetAtom(downloadedModelAtom)
   const models = useAtomValue(downloadingModelsAtom)
   const modelsRef = useRef(models)
   useEffect(() => {
     modelsRef.current = models
   }, [models])
+  const { setDownloadedModels, downloadedModels } = useGetDownloadedModels()
+  const { setDownloadState, setDownloadStateSuccess, setDownloadStateFailed } =
+    useDownloadState()
 
   useEffect(() => {
     if (window && window.electronAPI) {
@@ -42,7 +40,8 @@ export default function EventListenerWrapper({ children }: Props) {
       window.electronAPI.onFileDownloadError(
         (_event: string, callback: any) => {
           console.log('Download error', callback)
-          setDownloadStateSuccess(callback.fileName)
+          const fileName = callback.fileName.replace('models/', '')
+          setDownloadStateFailed(fileName)
         }
       )
 
@@ -58,9 +57,7 @@ export default function EventListenerWrapper({ children }: Props) {
                 .get<ModelPlugin>(PluginType.Model)
                 ?.saveModel(model)
                 .then(() => {
-                  getDownloadedModels().then((models) => {
-                    setDownloadedModels(models)
-                  })
+                  setDownloadedModels([...downloadedModels, model])
                 })
           }
         }
@@ -80,12 +77,11 @@ export default function EventListenerWrapper({ children }: Props) {
         }
       )
 
-      window.electronAPI.onAppUpdateDownloadSuccess(
-        (_event: string, callback: any) => {
-          setProgress(-1)
-        }
-      )
+      window.electronAPI.onAppUpdateDownloadSuccess(() => {
+        setProgress(-1)
+      })
     }
+    return () => {}
   }, [])
 
   return (
diff --git a/web/helpers/JotaiWrapper.tsx b/web/containers/Providers/Jotai.tsx
similarity index 55%
rename from web/helpers/JotaiWrapper.tsx
rename to web/containers/Providers/Jotai.tsx
index b9aa467bf..2554ce38d 100644
--- a/web/helpers/JotaiWrapper.tsx
+++ b/web/containers/Providers/Jotai.tsx
@@ -1,24 +1,17 @@
 'use client'
 
-import { Provider, atom } from 'jotai'
 import { ReactNode } from 'react'
-import { atomWithStorage } from 'jotai/utils'
+
+import { Provider, atom } from 'jotai'
 
 type Props = {
   children: ReactNode
 }
 
+export const currentPromptAtom = atom<string>('')
+export const appDownloadProgress = atom<number>(-1)
+export const searchAtom = atom<string>('')
+
 export default function JotaiWrapper({ children }: Props) {
   return <Provider>{children}</Provider>
 }
-
-export const currentPromptAtom = atom<string>('')
-export const appDownloadProgress = atom<number>(-1)
-export const searchingModelText = atom<string>('')
-export const searchAtom = atom<string>('')
-export const modelSearchAtom = atom<string>('')
-export const userConfigs = atomWithStorage<UserConfig>('config', {
-  gettingStartedShow: false,
-  sidebarLeftExpand: false,
-  accent: 'accent-blue',
-})
diff --git a/web/helpers/ThemeWrapper.tsx b/web/containers/Providers/Theme.tsx
similarity index 64%
rename from web/helpers/ThemeWrapper.tsx
rename to web/containers/Providers/Theme.tsx
index 473706d4e..bc37c72cc 100644
--- a/web/helpers/ThemeWrapper.tsx
+++ b/web/containers/Providers/Theme.tsx
@@ -1,21 +1,23 @@
 'use client'
 
-import { useUserConfigs } from '@hooks/useUserConfigs'
+import { PropsWithChildren } from 'react'
+
 import { ThemeProvider } from 'next-themes'
-import { ReactNode } from 'react'
+
 import { motion as m } from 'framer-motion'
 
-type Props = {
-  children: ReactNode
-}
+import { useBodyClass } from '@/hooks/useBodyClass'
 
-export const ThemeWrapper: React.FC<Props> = ({ children }) => {
+import { useUserConfigs } from '@/hooks/useUserConfigs'
+
+export default function ThemeWrapper({ children }: PropsWithChildren) {
   const [config] = useUserConfigs()
 
+  useBodyClass(config.primaryColor || 'primary-yellow')
+
   return (
     <ThemeProvider attribute="class" enableSystem>
       <m.div
-        className={config.accent}
         initial={{ opacity: 0, y: -10 }}
         animate={{
           opacity: 1,
diff --git a/web/containers/Providers/index.tsx b/web/containers/Providers/index.tsx
index 5c608b978..bd156425a 100644
--- a/web/containers/Providers/index.tsx
+++ b/web/containers/Providers/index.tsx
@@ -1,19 +1,25 @@
 'use client'
 
-import { PropsWithChildren } from 'react'
-import { ThemeWrapper } from '@helpers/ThemeWrapper'
-import JotaiWrapper from '@helpers/JotaiWrapper'
-import { ModalWrapper } from '@helpers/ModalWrapper'
-import { useEffect, useState } from 'react'
-import CompactLogo from '@containers/Logo/CompactLogo'
-import EventListenerWrapper from '@helpers/EventListenerWrapper'
-import { setupCoreServices } from '@services/coreService'
+import { PropsWithChildren, useEffect, useState } from 'react'
+
+import { Toaster } from 'react-hot-toast'
+
+import { TooltipProvider } from '@janhq/uikit'
+
+import EventListenerWrapper from '@/containers/Providers/EventListener'
+import JotaiWrapper from '@/containers/Providers/Jotai'
+import ThemeWrapper from '@/containers/Providers/Theme'
+
+import FeatureToggleWrapper from '@/context/FeatureToggle'
+
+import { setupCoreServices } from '@/services/coreService'
 import {
   isCorePluginInstalled,
   setupBasePlugins,
-} from '@services/pluginService'
-import { FeatureToggleWrapper } from '@helpers/FeatureToggleWrapper'
-import { pluginManager } from '../../plugin/PluginManager'
+} from '@/services/pluginService'
+
+import { ModalWrapper } from '@/helpers/ModalWrapper'
+import { pluginManager } from '@/plugin'
 
 const Providers = (props: PropsWithChildren) => {
   const [setupCore, setSetupCore] = useState(false)
@@ -59,21 +65,18 @@ const Providers = (props: PropsWithChildren) => {
 
   return (
     <JotaiWrapper>
-      {setupCore && (
-        <ThemeWrapper>
-          {activated ? (
-            <FeatureToggleWrapper>
-              <EventListenerWrapper>
+      <ThemeWrapper>
+        {setupCore && activated && (
+          <FeatureToggleWrapper>
+            <EventListenerWrapper>
+              <TooltipProvider>
                 <ModalWrapper>{children}</ModalWrapper>
-              </EventListenerWrapper>
-            </FeatureToggleWrapper>
-          ) : (
-            <div className="flex h-screen w-screen items-center justify-center bg-background">
-              <CompactLogo width={56} height={56} />
-            </div>
-          )}
-        </ThemeWrapper>
-      )}
+              </TooltipProvider>
+            </EventListenerWrapper>
+            <Toaster position="top-right" />
+          </FeatureToggleWrapper>
+        )}
+      </ThemeWrapper>
     </JotaiWrapper>
   )
 }
diff --git a/web/containers/Sidebar/Left.tsx b/web/containers/Sidebar/Left.tsx
deleted file mode 100644
index 62b298543..000000000
--- a/web/containers/Sidebar/Left.tsx
+++ /dev/null
@@ -1,201 +0,0 @@
-import React, { useContext } from 'react'
-import { useAtomValue, useSetAtom } from 'jotai'
-import {
-  MainViewState,
-  getMainViewStateAtom,
-  setMainViewStateAtom,
-} from '@helpers/atoms/MainView.atom'
-import CompactLogo from '@containers/Logo/CompactLogo'
-import {
-  MessageCircle,
-  Settings,
-  Bot,
-  LayoutGrid,
-  CpuIcon,
-  BookOpen,
-} from 'lucide-react'
-import { motion as m, Variants } from 'framer-motion'
-import { useGetDownloadedModels } from '@hooks/useGetDownloadedModels'
-import { twMerge } from 'tailwind-merge'
-import { showingBotListModalAtom } from '@helpers/atoms/Modal.atom'
-import useGetBots from '@hooks/useGetBots'
-import { useUserConfigs } from '@hooks/useUserConfigs'
-import {
-  FeatureToggleContext,
-} from '@helpers/FeatureToggleWrapper'
-
-export const SidebarLeft = () => {
-  const [config] = useUserConfigs()
-  const currentState = useAtomValue(getMainViewStateAtom)
-  const setMainViewState = useSetAtom(setMainViewStateAtom)
-  const setBotListModal = useSetAtom(showingBotListModalAtom)
-  const { downloadedModels } = useGetDownloadedModels()
-  const { getAllBots } = useGetBots()
-  const { experimentalFeatureEnabed } = useContext(FeatureToggleContext)
-
-  const onMenuClick = (mainViewState: MainViewState) => {
-    if (currentState === mainViewState) return
-    setMainViewState(mainViewState)
-  }
-
-  const onBotListClick = async () => {
-    const bots = await getAllBots()
-    if (!bots || bots?.length === 0) {
-      alert('You have not created any bot')
-      return
-    }
-
-    if (downloadedModels.length === 0) {
-      alert('You have no model downloaded')
-      return
-    }
-
-    setBotListModal(true)
-  }
-
-  const variant: Variants = {
-    hide: {
-      opacity: 0,
-      display: 'none',
-      transition: {
-        delay: 0,
-      },
-    },
-    show: {
-      opacity: 1,
-      display: 'inline-block',
-      transition: {
-        duration: 0.5,
-        delay: 0.4,
-      },
-    },
-  }
-
-  const menus = [
-    {
-      name: 'Getting Started',
-      icon: <BookOpen size={20} className="flex-shrink-0" />,
-      state: MainViewState.Welcome,
-    },
-    {
-      name: 'Chat',
-      icon: <MessageCircle size={20} className="flex-shrink-0" />,
-      state: MainViewState.Conversation,
-    },
-    {
-      name: 'Explore Models',
-      icon: <CpuIcon size={20} className="flex-shrink-0" />,
-      state: MainViewState.ExploreModel,
-    },
-    {
-      name: 'My Models',
-      icon: <LayoutGrid size={20} className="flex-shrink-0" />,
-      state: MainViewState.MyModel,
-    },
-    ...(experimentalFeatureEnabed
-      ? [
-          {
-            name: 'Bot',
-            icon: <Bot size={20} className="flex-shrink-0" />,
-            state: MainViewState.CreateBot,
-          },
-        ]
-      : []),
-    {
-      name: 'Settings',
-      icon: <Settings size={20} className="flex-shrink-0" />,
-      state: MainViewState.Setting,
-    },
-  ]
-  return (
-    <m.div
-      initial={false}
-      animate={{
-        width: config.sidebarLeftExpand ? 180 : 60,
-        transition: {
-          duration: 0.5,
-          type: 'spring',
-          stiffness: 100,
-          damping: 15,
-        },
-      }}
-      className="flex flex-shrink-0 flex-col pb-6 pt-14"
-    >
-      <div className="flex-shrink-0 px-4">
-        <CompactLogo width={32} height={32} />
-      </div>
-      <div className="mt-2 flex h-full w-full flex-col justify-between pb-4">
-        <div
-          className={twMerge(
-            'flex w-full flex-col',
-            config.sidebarLeftExpand ? 'items-start' : 'items-center'
-          )}
-        >
-          {menus
-            .filter((menu) => !!menu)
-            .map((menu, i) => {
-              const isActive = currentState === menu.state
-              const isBotMenu = menu.name === 'Bot'
-              return (
-                <div className="relative w-full px-4 py-2" key={i}>
-                  <button
-                    data-testid={menu.name}
-                    className={twMerge(
-                      'flex w-full flex-shrink-0 items-center gap-x-2',
-                      config.sidebarLeftExpand
-                        ? 'justify-start'
-                        : 'justify-center'
-                    )}
-                    onClick={() =>
-                      isBotMenu ? onBotListClick() : onMenuClick(menu.state)
-                    }
-                  >
-                    {menu.icon}
-                    <m.span
-                      initial={false}
-                      variants={variant}
-                      animate={config.sidebarLeftExpand ? 'show' : 'hide'}
-                      className="text-xs font-semibold text-muted-foreground"
-                    >
-                      {menu.name}
-                    </m.span>
-                  </button>
-                  {isActive ? (
-                    <m.div
-                      className="absolute inset-0 left-2 -z-10 h-full w-[calc(100%-16px)] rounded-md bg-accent/20 p-2 backdrop-blur-lg"
-                      layoutId="active-state"
-                    />
-                  ) : null}
-                </div>
-              )
-            })}
-        </div>
-        <m.div
-          initial={false}
-          variants={variant}
-          animate={config.sidebarLeftExpand ? 'show' : 'hide'}
-          className="flex flex-col space-y-2 px-3"
-        >
-          <div className="space-y-2 rounded-lg border border-border bg-background/50 p-3">
-            <button
-              onClick={() =>
-                window.coreAPI?.openExternalUrl('https://discord.gg/AsJ8krTT3N')
-              }
-              className="block text-xs font-semibold text-muted-foreground"
-            >
-              Discord
-            </button>
-            <button
-              onClick={() =>
-                window.coreAPI?.openExternalUrl('https://twitter.com/janhq_')
-              }
-              className="block text-xs font-semibold text-muted-foreground"
-            >
-              Twitter
-            </button>
-          </div>
-        </m.div>
-      </div>
-    </m.div>
-  )
-}
diff --git a/web/containers/Sidebar/Right.tsx b/web/containers/Sidebar/Right.tsx
deleted file mode 100644
index 1a70bb0b8..000000000
--- a/web/containers/Sidebar/Right.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react'
-import BotSetting from '@/_components/BotSetting'
-import BotInfo from '@/_components/BotInfo'
-
-export const SidebarRight = () => {
-  return (
-    <div className="flex w-60 flex-shrink-0 flex-col px-4 py-6">
-      <BotInfo />
-      <BotSetting />
-    </div>
-  )
-}
diff --git a/web/containers/Sidebar/index.tsx b/web/containers/Sidebar/index.tsx
deleted file mode 100644
index 43b3d8d28..000000000
--- a/web/containers/Sidebar/index.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './Left'
-export * from './Right'
diff --git a/web/containers/SystemItem/index.tsx b/web/containers/SystemItem/index.tsx
deleted file mode 100644
index 96794f8fa..000000000
--- a/web/containers/SystemItem/index.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-type Props = {
-  name: string
-  value: string
-}
-
-const SystemItem: React.FC<Props> = ({ name, value }) => (
-  <div className="flex items-center gap-x-1">
-    <p className="font-semibold dark:text-gray-400">{name}</p>
-    <p className="dark:text-gray-200">{value}</p>
-  </div>
-)
-
-export default SystemItem
diff --git a/web/containers/Toast/index.tsx b/web/containers/Toast/index.tsx
new file mode 100644
index 000000000..50f1f0f29
--- /dev/null
+++ b/web/containers/Toast/index.tsx
@@ -0,0 +1,52 @@
+import toast from 'react-hot-toast'
+
+import { XIcon } from 'lucide-react'
+import { twMerge } from 'tailwind-merge'
+
+type Props = {
+  title?: string
+  description?: string
+  type?: 'default' | 'error' | 'success'
+}
+
+export function toaster(props: Props) {
+  const { title, description, type = 'default' } = props
+  return toast.custom(
+    (t) => {
+      return (
+        <div
+          className={twMerge(
+            'pointer-events-auto relative flex min-w-[200px] max-w-[350px] gap-x-4 rounded-lg border border-border bg-background px-4 py-3',
+            t.visible ? 'animate-enter' : 'animate-leave',
+            type === 'success' && 'bg-primary text-primary-foreground'
+          )}
+        >
+          <div>
+            <h1
+              className={twMerge(
+                'font-medium',
+                type === 'success' && 'font-medium text-primary-foreground'
+              )}
+            >
+              {title}
+            </h1>
+            <p
+              className={twMerge(
+                'mt-1 text-muted-foreground',
+                type === 'success' && 'text-primary-foreground/80'
+              )}
+            >
+              {description}
+            </p>
+          </div>
+          <XIcon
+            size={24}
+            className="absolute right-2 top-2 w-4 cursor-pointer text-muted-foreground"
+            onClick={() => toast.dismiss(t.id)}
+          />
+        </div>
+      )
+    },
+    { id: 'toast', duration: 3000 }
+  )
+}
diff --git a/web/containers/Topbar/index.tsx b/web/containers/Topbar/index.tsx
deleted file mode 100644
index 5ce19d07a..000000000
--- a/web/containers/Topbar/index.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from 'react'
-import { useAtomValue, useSetAtom } from 'jotai'
-import { useUserConfigs } from '@hooks/useUserConfigs'
-import { getMainViewStateAtom } from '@helpers/atoms/MainView.atom'
-import { MainViewState } from '@helpers/atoms/MainView.atom'
-import { rightSideBarExpandStateAtom } from '@helpers/atoms/SideBarExpand.atom'
-
-import { PanelLeftClose, PanelLeftOpen, PanelRightOpen } from 'lucide-react'
-import { twMerge } from 'tailwind-merge'
-
-const Topbar = () => {
-  const [config, setConfig] = useUserConfigs()
-  const viewState = useAtomValue(getMainViewStateAtom)
-  const setRightSideBarVisibility = useSetAtom(rightSideBarExpandStateAtom)
-
-  return (
-    <div className="fixed left-0 top-0 z-50 flex h-8 w-full justify-between">
-      <div
-        className={twMerge(
-          'unset-drag fixed top-2 block',
-          config.sidebarLeftExpand ? 'left-[180px]' : 'left-20'
-        )}
-      >
-        {config.sidebarLeftExpand ? (
-          <PanelLeftClose
-            size={18}
-            onClick={() => setConfig({ ...config, sidebarLeftExpand: false })}
-            className="dark:text-gray-400"
-          />
-        ) : (
-          <PanelLeftOpen
-            size={18}
-            onClick={() => setConfig({ ...config, sidebarLeftExpand: true })}
-            className="dark:text-gray-400"
-          />
-        )}
-      </div>
-      {viewState === MainViewState.BotInfo && (
-        <div className="unset-drag fixed right-4 top-2 block">
-          <PanelRightOpen
-            size={18}
-            onClick={() => setRightSideBarVisibility((prev) => !prev)}
-            className="dark:text-gray-400"
-          />
-        </div>
-      )}
-    </div>
-  )
-}
-
-export default Topbar
diff --git a/web/helpers/FeatureToggleWrapper.tsx b/web/context/FeatureToggle.tsx
similarity index 76%
rename from web/helpers/FeatureToggleWrapper.tsx
rename to web/context/FeatureToggle.tsx
index f8c330d86..b93cc40c4 100644
--- a/web/helpers/FeatureToggleWrapper.tsx
+++ b/web/context/FeatureToggle.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, useEffect, useState } from 'react'
+import { createContext, ReactNode, useEffect, useState } from 'react'
 
 interface FeatureToggleContextType {
   experimentalFeatureEnabed: boolean
@@ -7,13 +7,17 @@ interface FeatureToggleContextType {
 
 const initialContext: FeatureToggleContextType = {
   experimentalFeatureEnabed: false,
-  setExperimentalFeatureEnabled: (boolean) => {},
+  setExperimentalFeatureEnabled: () => {},
 }
 
 export const FeatureToggleContext =
-  React.createContext<FeatureToggleContextType>(initialContext)
+  createContext<FeatureToggleContextType>(initialContext)
 
-export function FeatureToggleWrapper({ children }: { children: ReactNode }) {
+export default function FeatureToggleWrapper({
+  children,
+}: {
+  children: ReactNode
+}) {
   const EXPERIMENTAL_FEATURE_ENABLED = 'expermientalFeatureEnabled'
   const [experimentalEnabed, setExperimentalEnabled] = useState<boolean>(false)
 
@@ -21,6 +25,7 @@ export function FeatureToggleWrapper({ children }: { children: ReactNode }) {
     // Global experimental feature is disabled
     let globalFeatureEnabled = false
     if (localStorage.getItem(EXPERIMENTAL_FEATURE_ENABLED) !== 'true') {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       globalFeatureEnabled = true
     }
   }, [])
diff --git a/web/helpers/ModalWrapper.tsx b/web/helpers/ModalWrapper.tsx
index d5cb05971..860e5c617 100644
--- a/web/helpers/ModalWrapper.tsx
+++ b/web/helpers/ModalWrapper.tsx
@@ -1,25 +1,19 @@
 'use client'
 
-import BotListModal from '@/_components/BotListModal'
-import ConfirmDeleteConversationModal from '@/_components/ConfirmDeleteConversationModal'
-import ConfirmDeleteModelModal from '@/_components/ConfirmDeleteModelModal'
-import ConfirmSignOutModal from '@/_components/ConfirmSignOutModal'
-import MobileMenuPane from '@/_components/MobileMenuPane'
-import SwitchingModelConfirmationModal from '@/_components/SwitchingModelConfirmationModal'
-import ModalNoActiveModel from '@/_components/ModalNoActiveModel'
 import { ReactNode } from 'react'
 
+import ConfirmDeleteConversationModal from '@/components/ConfirmDeleteConversationModal'
+
+import ModalNoActiveModel from '@/components/ModalNoActiveModel'
+import SwitchingModelConfirmationModal from '@/components/SwitchingModelConfirmationModal'
+
 type Props = {
   children: ReactNode
 }
 
 export const ModalWrapper: React.FC<Props> = ({ children }) => (
   <>
-    <MobileMenuPane />
     <ConfirmDeleteConversationModal />
-    <ConfirmSignOutModal />
-    <ConfirmDeleteModelModal />
-    <BotListModal />
     <SwitchingModelConfirmationModal />
     <ModalNoActiveModel />
     {children}
diff --git a/web/helpers/atoms/Bot.atom.ts b/web/helpers/atoms/Bot.atom.ts
deleted file mode 100644
index 11e432513..000000000
--- a/web/helpers/atoms/Bot.atom.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { atom } from 'jotai'
-
-export const activeBotAtom = atom<Bot | undefined>(undefined)
diff --git a/web/helpers/atoms/ChatMessage.atom.ts b/web/helpers/atoms/ChatMessage.atom.ts
index 92ce0ab31..e463bc96a 100644
--- a/web/helpers/atoms/ChatMessage.atom.ts
+++ b/web/helpers/atoms/ChatMessage.atom.ts
@@ -1,4 +1,5 @@
 import { atom } from 'jotai'
+
 import { getActiveConvoIdAtom } from './Conversation.atom'
 
 /**
diff --git a/web/helpers/atoms/Conversation.atom.ts b/web/helpers/atoms/Conversation.atom.ts
index a46d093e2..81f8d7b07 100644
--- a/web/helpers/atoms/Conversation.atom.ts
+++ b/web/helpers/atoms/Conversation.atom.ts
@@ -1,6 +1,6 @@
 import { atom } from 'jotai'
-import { MainViewState, setMainViewStateAtom } from './MainView.atom'
-import { activeBotAtom } from './Bot.atom'
+
+// import { MainViewState, setMainViewStateAtom } from './MainView.atom'
 
 /**
  * Stores the current active conversation id.
@@ -12,11 +12,11 @@ export const getActiveConvoIdAtom = atom((get) => get(activeConversationIdAtom))
 export const setActiveConvoIdAtom = atom(
   null,
   (_get, set, convoId: string | undefined) => {
-    if (convoId) {
-      console.debug(`Set active conversation id: ${convoId}`)
-      set(setMainViewStateAtom, MainViewState.Conversation)
-    }
-    set(activeBotAtom, undefined)
+    // if (convoId) {
+    //   console.debug(`Set active conversation id: ${convoId}`)
+    //   set(setMainViewStateAtom, MainViewState.Chat)
+    // }
+
     set(activeConversationIdAtom, convoId)
   }
 )
diff --git a/web/helpers/atoms/DownloadState.atom.ts b/web/helpers/atoms/DownloadState.atom.ts
deleted file mode 100644
index d61f13f59..000000000
--- a/web/helpers/atoms/DownloadState.atom.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { atom } from 'jotai'
-
-// download states
-export const modelDownloadStateAtom = atom<Record<string, DownloadState>>({})
-
-export const setDownloadStateAtom = atom(
-  null,
-  (get, set, state: DownloadState) => {
-    const currentState = { ...get(modelDownloadStateAtom) }
-    console.debug(
-      `current download state for ${state.fileName} is ${JSON.stringify(state)}`
-    )
-    state.fileName = state.fileName.replace('models/', '')
-    // TODO: Need somehow to not depend on filename
-    currentState[state.fileName] = state
-    set(modelDownloadStateAtom, currentState)
-  }
-)
-
-export const setDownloadStateSuccessAtom = atom(
-  null,
-  (get, set, fileName: string) => {
-    const currentState = { ...get(modelDownloadStateAtom) }
-    fileName = fileName.replace('models/', '')
-    const state = currentState[fileName]
-    if (!state) {
-      console.error(`Cannot find download state for ${fileName}`)
-      return
-    }
-
-    delete currentState[fileName]
-    set(modelDownloadStateAtom, currentState)
-  }
-)
diff --git a/web/helpers/atoms/DownloadedModel.atom.ts b/web/helpers/atoms/DownloadedModel.atom.ts
deleted file mode 100644
index bf36a103c..000000000
--- a/web/helpers/atoms/DownloadedModel.atom.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Model } from '@janhq/core/lib/types'
-import { atom } from 'jotai'
-
-/**
- * @description: This atom is used to store the downloaded models
- */
-export const downloadedModelAtom = atom<Model[]>([])
diff --git a/web/helpers/atoms/ExploreModelLoading.atom.ts b/web/helpers/atoms/ExploreModelLoading.atom.ts
deleted file mode 100644
index db3ecbb03..000000000
--- a/web/helpers/atoms/ExploreModelLoading.atom.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { atom } from 'jotai'
-
-export const modelLoadMoreAtom = atom<boolean>(false)
diff --git a/web/helpers/atoms/MainView.atom.ts b/web/helpers/atoms/MainView.atom.ts
deleted file mode 100644
index 92bab3418..000000000
--- a/web/helpers/atoms/MainView.atom.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { atom } from 'jotai'
-import { setActiveConvoIdAtom } from './Conversation.atom'
-import { systemBarVisibilityAtom } from './SystemBar.atom'
-
-export enum MainViewState {
-  Welcome,
-  CreateBot,
-  ExploreModel,
-  MyModel,
-  ResourceMonitor,
-  Setting,
-  Conversation,
-
-  /**
-   * When user wants to create new conversation but haven't selected a model yet.
-   */
-  ConversationEmptyModel,
-
-  BotInfo,
-}
-
-/**
- * Stores the current main view state. Default is Welcome.
- */
-const currentMainViewStateAtom = atom<MainViewState>(MainViewState.Welcome)
-
-/**
- * Getter for current main view state.
- */
-export const getMainViewStateAtom = atom((get) => get(currentMainViewStateAtom))
-
-/**
- * Setter for current main view state.
- */
-export const setMainViewStateAtom = atom(
-  null,
-  (get, set, state: MainViewState) => {
-    // return if the state is already set
-    if (get(getMainViewStateAtom) === state) return
-
-    if (state !== MainViewState.Conversation) {
-      // clear active conversation id if main view state is not Conversation
-      set(setActiveConvoIdAtom, undefined)
-    }
-
-    const showSystemBar =
-      state !== MainViewState.Conversation &&
-      state !== MainViewState.ConversationEmptyModel
-
-    // show system bar if state is not Conversation nor ConversationEmptyModel
-    set(systemBarVisibilityAtom, showSystemBar)
-
-    set(currentMainViewStateAtom, state)
-  }
-)
diff --git a/web/helpers/atoms/Modal.atom.ts b/web/helpers/atoms/Modal.atom.ts
index 87bfb80cb..c7559eec4 100644
--- a/web/helpers/atoms/Modal.atom.ts
+++ b/web/helpers/atoms/Modal.atom.ts
@@ -1,6 +1,7 @@
-import { SwitchingModelConfirmationModalProps } from '@/_components/SwitchingModelConfirmationModal'
 import { atom } from 'jotai'
 
+import { SwitchingModelConfirmationModalProps } from '@/components/SwitchingModelConfirmationModal'
+
 export const showConfirmDeleteConversationModalAtom = atom(false)
 export const showConfirmSignOutModalAtom = atom(false)
 export const showConfirmDeleteModalAtom = atom(false)
diff --git a/web/helpers/atoms/Model.atom.ts b/web/helpers/atoms/Model.atom.ts
index 75d4be972..0f1c7de4c 100644
--- a/web/helpers/atoms/Model.atom.ts
+++ b/web/helpers/atoms/Model.atom.ts
@@ -3,7 +3,5 @@ import { atom } from 'jotai'
 
 export const stateModel = atom({ state: 'start', loading: false, model: '' })
 export const selectedModelAtom = atom<Model | undefined>(undefined)
-export const activeModelAtom = atom<Model | undefined>(
-  undefined
-)
-export const downloadingModelsAtom = atom<Model[]>([])
\ No newline at end of file
+export const activeAssistantModelAtom = atom<Model | undefined>(undefined)
+export const downloadingModelsAtom = atom<Model[]>([])
diff --git a/web/helpers/atoms/SideBarExpand.atom.ts b/web/helpers/atoms/SideBarExpand.atom.ts
deleted file mode 100644
index 54bcd67a0..000000000
--- a/web/helpers/atoms/SideBarExpand.atom.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { atom } from 'jotai'
-
-/**
- * Stores expand state of conversation container. Default is true.
- */
-export const leftSideBarExpandStateAtom = atom<boolean>(true)
-
-export const rightSideBarExpandStateAtom = atom<boolean>(true)
diff --git a/web/helpers/atoms/SystemBar.atom.ts b/web/helpers/atoms/SystemBar.atom.ts
index e1854a164..9b44c2e92 100644
--- a/web/helpers/atoms/SystemBar.atom.ts
+++ b/web/helpers/atoms/SystemBar.atom.ts
@@ -1,9 +1,3 @@
 import { atom } from 'jotai'
 
-export const systemBarVisibilityAtom = atom<boolean>(true)
-
-export const getSystemBarVisibilityAtom = atom((get) =>
-  get(systemBarVisibilityAtom)
-)
-
 export const totalRamAtom = atom<number>(0)
diff --git a/web/helpers/withAnalytics.tsx b/web/helpers/withAnalytics.tsx
deleted file mode 100644
index c37f24bab..000000000
--- a/web/helpers/withAnalytics.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-'use client'
-import React, { useEffect } from 'react'
-
-export function withAnalytics<P extends Record<string, any>>(
-  Component: React.ComponentType<P>
-): React.FC<P> {
-  const WrappedComponent: React.FC<P> = (props) => {
-    useEffect(() => {}, [])
-
-    return <Component {...props} />
-  }
-  return WrappedComponent
-}
diff --git a/web/hooks/useActiveModel.ts b/web/hooks/useActiveModel.ts
new file mode 100644
index 000000000..5d317bff5
--- /dev/null
+++ b/web/hooks/useActiveModel.ts
@@ -0,0 +1,96 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { PluginType } from '@janhq/core'
+import { InferencePlugin } from '@janhq/core/lib/plugins'
+import { Model } from '@janhq/core/lib/types'
+
+import { atom, useAtom } from 'jotai'
+
+import { toaster } from '@/containers/Toast'
+
+import { useGetDownloadedModels } from './useGetDownloadedModels'
+
+import { pluginManager } from '@/plugin'
+
+const activeAssistantModelAtom = atom<Model | undefined>(undefined)
+
+const stateModelAtom = atom({ state: 'start', loading: false, model: '' })
+
+export function useActiveModel() {
+  const [activeModel, setActiveModel] = useAtom(activeAssistantModelAtom)
+  const [stateModel, setStateModel] = useAtom(stateModelAtom)
+  const { downloadedModels } = useGetDownloadedModels()
+
+  const startModel = async (modelId: string) => {
+    if (activeModel && activeModel._id === modelId) {
+      console.debug(`Model ${modelId} is already init. Ignore..`)
+      return
+    }
+
+    setStateModel({ state: 'start', loading: true, model: modelId })
+
+    const model = await downloadedModels.find((e) => e._id === modelId)
+
+    if (!modelId) {
+      alert(`Model ${modelId} not found! Please re-download the model first.`)
+      setStateModel(() => ({
+        state: 'start',
+        loading: false,
+        model: '',
+      }))
+      return
+    }
+
+    const currentTime = Date.now()
+    console.debug('Init model: ', modelId)
+
+    const res = await initModel(`models/${modelId}`)
+    if (res?.error) {
+      const errorMessage = `Failed to init model: ${res.error}`
+      console.error(errorMessage)
+      alert(errorMessage)
+      setStateModel(() => ({
+        state: 'start',
+        loading: false,
+        model: modelId,
+      }))
+    } else {
+      console.debug(
+        `Init model ${modelId} successfully!, take ${
+          Date.now() - currentTime
+        }ms`
+      )
+      setActiveModel(model)
+      toaster({
+        title: 'Success start a Model',
+        description: `Model ${modelId} has been started.`,
+      })
+      setStateModel(() => ({
+        state: 'stop',
+        loading: false,
+        model: modelId,
+      }))
+    }
+  }
+
+  const stopModel = async (modelId: string) => {
+    setStateModel({ state: 'stop', loading: true, model: modelId })
+    setTimeout(async () => {
+      pluginManager.get<InferencePlugin>(PluginType.Inference)?.stopModel()
+
+      setActiveModel(undefined)
+      setStateModel({ state: 'start', loading: false, model: '' })
+      toaster({
+        title: 'Success stop a Model',
+        description: `Model ${modelId} has been stopped.`,
+      })
+    }, 500)
+  }
+
+  return { activeModel, startModel, stopModel, stateModel }
+}
+
+const initModel = async (modelId: string): Promise<any> => {
+  return pluginManager
+    .get<InferencePlugin>(PluginType.Inference)
+    ?.initModel(modelId)
+}
diff --git a/web/hooks/useBodyClass.ts b/web/hooks/useBodyClass.ts
new file mode 100644
index 000000000..e0a484469
--- /dev/null
+++ b/web/hooks/useBodyClass.ts
@@ -0,0 +1,22 @@
+import { useEffect } from 'react'
+
+const addBodyClass = (className: string) =>
+  document.body.classList.add(className)
+const removeBodyClass = (className: string) =>
+  document.body.classList.remove(className)
+
+export function useBodyClass(className: unknown) {
+  useEffect(() => {
+    // Set up
+    className instanceof Array
+      ? className.map(addBodyClass)
+      : addBodyClass(className as string)
+
+    // Clean up
+    return () => {
+      className instanceof Array
+        ? className.map(removeBodyClass)
+        : removeBodyClass(className as string)
+    }
+  }, [className])
+}
diff --git a/web/hooks/useCreateBot.ts b/web/hooks/useCreateBot.ts
deleted file mode 100644
index 16cf1bb6e..000000000
--- a/web/hooks/useCreateBot.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export default function useCreateBot() {
-  const createBot = async (bot: Bot) => {
-    try {
-      // await executeSerial(DataService.CreateBot, bot)
-    } catch (err) {
-      alert(err)
-      console.error(err)
-    }
-  }
-
-  return { createBot }
-}
diff --git a/web/hooks/useCreateConversation.ts b/web/hooks/useCreateConversation.ts
index f4c342fcb..0bb03582c 100644
--- a/web/hooks/useCreateConversation.ts
+++ b/web/hooks/useCreateConversation.ts
@@ -1,57 +1,53 @@
-import { useAtom, useAtomValue, useSetAtom } from 'jotai'
+import { PluginType } from '@janhq/core'
+import { ConversationalPlugin } from '@janhq/core/lib/plugins'
+import { Model } from '@janhq/core/lib/types'
+
+import { useAtom, useSetAtom } from 'jotai'
+
+import { generateConversationId } from '@/utils/conversation'
+
 import {
   userConversationsAtom,
   setActiveConvoIdAtom,
   addNewConversationStateAtom,
-} from '@helpers/atoms/Conversation.atom'
-import { Model } from '@janhq/core/lib/types'
-import { downloadedModelAtom } from '@helpers/atoms/DownloadedModel.atom'
-import { generateConversationId } from '@utils/conversation'
+} from '@/helpers/atoms/Conversation.atom'
+import { pluginManager } from '@/plugin'
 
-const useCreateConversation = () => {
+export const useCreateConversation = () => {
   const [userConversations, setUserConversations] = useAtom(
     userConversationsAtom
   )
   const setActiveConvoId = useSetAtom(setActiveConvoIdAtom)
   const addNewConvoState = useSetAtom(addNewConversationStateAtom)
-  const models = useAtomValue(downloadedModelAtom)
 
-  const createConvoByBot = async (bot: Bot) => {
-    const model = models.find((e) => e._id === bot.modelId)
-
-    if (!model) {
-      alert(
-        `Model ${bot.modelId} not found! Please re-download the model first.`
-      )
-      return
-    }
-
-    return requestCreateConvo(model, bot)
-  }
-
-  const requestCreateConvo = async (model: Model, bot?: Bot) => {
+  const requestCreateConvo = async (model: Model) => {
     const conversationName = model.name
     const mappedConvo: Conversation = {
+      // eslint-disable-next-line @typescript-eslint/naming-convention
       _id: generateConversationId(),
       modelId: model._id,
       name: conversationName,
       createdAt: new Date().toISOString(),
       updatedAt: new Date().toISOString(),
-      botId: bot?._id ?? undefined,
     }
 
     addNewConvoState(mappedConvo._id, {
       hasMore: true,
       waitingForResponse: false,
     })
+
+    pluginManager
+      .get<ConversationalPlugin>(PluginType.Conversational)
+      ?.saveConversation({
+        ...mappedConvo,
+        name: mappedConvo.name ?? '',
+        messages: [],
+      })
     setUserConversations([mappedConvo, ...userConversations])
     setActiveConvoId(mappedConvo._id)
   }
 
   return {
-    createConvoByBot,
     requestCreateConvo,
   }
 }
-
-export default useCreateConversation
diff --git a/web/hooks/useDeleteBot.ts b/web/hooks/useDeleteBot.ts
deleted file mode 100644
index 4fcf4ac26..000000000
--- a/web/hooks/useDeleteBot.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { useSetAtom } from 'jotai'
-import { activeBotAtom } from '@helpers/atoms/Bot.atom'
-import { rightSideBarExpandStateAtom } from '@helpers/atoms/SideBarExpand.atom'
-
-export default function useDeleteBot() {
-  const setActiveBot = useSetAtom(activeBotAtom)
-  const setRightPanelVisibility = useSetAtom(rightSideBarExpandStateAtom)
-
-  const deleteBot = async (botId: string): Promise<'success' | 'failed'> => {
-    try {
-      // await executeSerial(DataService.DeleteBot, botId)
-      setRightPanelVisibility(false)
-      setActiveBot(undefined)
-      return 'success'
-    } catch (err) {
-      alert(`Failed to delete bot ${botId}: ${err}`)
-      console.error(err)
-      return 'failed'
-    }
-  }
-
-  return { deleteBot }
-}
diff --git a/web/hooks/useDeleteConversation.ts b/web/hooks/useDeleteConversation.ts
index 98cb73b7a..c8125408f 100644
--- a/web/hooks/useDeleteConversation.ts
+++ b/web/hooks/useDeleteConversation.ts
@@ -1,24 +1,28 @@
-import { currentPromptAtom } from '@helpers/JotaiWrapper'
-import { useAtom, useAtomValue, useSetAtom } from 'jotai'
 import { PluginType } from '@janhq/core'
-import { deleteConversationMessage } from '@helpers/atoms/ChatMessage.atom'
+import { ConversationalPlugin } from '@janhq/core/lib/plugins'
+import { useAtom, useAtomValue, useSetAtom } from 'jotai'
+
+import { currentPromptAtom } from '@/containers/Providers/Jotai'
+
+import { toaster } from '@/containers/Toast'
+
+import { pluginManager } from '../plugin/PluginManager'
+
+import { useActiveModel } from './useActiveModel'
+
+import { deleteConversationMessage } from '@/helpers/atoms/ChatMessage.atom'
 import {
   userConversationsAtom,
   getActiveConvoIdAtom,
   setActiveConvoIdAtom,
-} from '@helpers/atoms/Conversation.atom'
+} from '@/helpers/atoms/Conversation.atom'
 import {
   showingProductDetailAtom,
   showingAdvancedPromptAtom,
-} from '@helpers/atoms/Modal.atom'
-import {
-  MainViewState,
-  setMainViewStateAtom,
-} from '@helpers/atoms/MainView.atom'
-import { pluginManager } from '../plugin/PluginManager'
-import { ConversationalPlugin } from '@janhq/core/lib/plugins'
+} from '@/helpers/atoms/Modal.atom'
 
 export default function useDeleteConversation() {
+  const { activeModel } = useActiveModel()
   const [userConversations, setUserConversations] = useAtom(
     userConversationsAtom
   )
@@ -29,7 +33,6 @@ export default function useDeleteConversation() {
 
   const setActiveConvoId = useSetAtom(setActiveConvoIdAtom)
   const deleteMessages = useSetAtom(deleteConversationMessage)
-  const setMainViewState = useSetAtom(setMainViewStateAtom)
 
   const deleteConvo = async () => {
     if (activeConvoId) {
@@ -42,11 +45,13 @@ export default function useDeleteConversation() {
         )
         setUserConversations(currentConversations)
         deleteMessages(activeConvoId)
-
+        toaster({
+          title: 'Succes delete a chat',
+          description: `Delete chat with ${activeModel} has been completed`,
+        })
         if (currentConversations.length > 0) {
           setActiveConvoId(currentConversations[0]._id)
         } else {
-          setMainViewState(MainViewState.Welcome)
           setActiveConvoId(undefined)
         }
         setCurrentPrompt('')
diff --git a/web/hooks/useDeleteModel.ts b/web/hooks/useDeleteModel.ts
index 6623be06f..1980e4514 100644
--- a/web/hooks/useDeleteModel.ts
+++ b/web/hooks/useDeleteModel.ts
@@ -1,13 +1,15 @@
 import { PluginType } from '@janhq/core'
-import { useSetAtom } from 'jotai'
-import { downloadedModelAtom } from '@helpers/atoms/DownloadedModel.atom'
-import { getDownloadedModels } from './useGetDownloadedModels'
-import { pluginManager } from '@plugin/PluginManager'
 import { ModelPlugin } from '@janhq/core/lib/plugins'
 import { Model } from '@janhq/core/lib/types'
 
+import { toaster } from '@/containers/Toast'
+
+import { useGetDownloadedModels } from '@/hooks/useGetDownloadedModels'
+
+import { pluginManager } from '@/plugin/PluginManager'
+
 export default function useDeleteModel() {
-  const setDownloadedModels = useSetAtom(downloadedModelAtom)
+  const { setDownloadedModels, downloadedModels } = useGetDownloadedModels()
 
   const deleteModel = async (model: Model) => {
     await pluginManager
@@ -15,8 +17,11 @@ export default function useDeleteModel() {
       ?.deleteModel(model._id)
 
     // reload models
-    const downloadedModels = await getDownloadedModels()
-    setDownloadedModels(downloadedModels)
+    setDownloadedModels(downloadedModels.filter((e) => e._id !== model._id))
+    toaster({
+      title: 'Delete a Model',
+      description: `Model ${model._id} has been deleted.`,
+    })
   }
 
   return { deleteModel }
diff --git a/web/hooks/useDownloadModel.ts b/web/hooks/useDownloadModel.ts
index ee071dc8b..29a41333b 100644
--- a/web/hooks/useDownloadModel.ts
+++ b/web/hooks/useDownloadModel.ts
@@ -1,20 +1,26 @@
 import { PluginType } from '@janhq/core'
-import { useAtom, useSetAtom } from 'jotai'
-import { setDownloadStateAtom } from '@helpers/atoms/DownloadState.atom'
-import { Model, ModelCatalog, ModelVersion } from '@janhq/core/lib/types'
-import { pluginManager } from '@plugin/PluginManager'
 import { ModelPlugin } from '@janhq/core/lib/plugins'
-import { downloadingModelsAtom } from '@helpers/atoms/Model.atom'
+import { Model, ModelCatalog, ModelVersion } from '@janhq/core/lib/types'
+
+import { useAtom } from 'jotai'
+
+import { useDownloadState } from './useDownloadState'
+
+import { downloadingModelsAtom } from '@/helpers/atoms/Model.atom'
+import { pluginManager } from '@/plugin/PluginManager'
 
 export default function useDownloadModel() {
-  const setDownloadState = useSetAtom(setDownloadStateAtom)
-  const [models, setModelsAtom] = useAtom(downloadingModelsAtom)
+  const { setDownloadState } = useDownloadState()
+  const [downloadingModels, setDownloadingModels] = useAtom(
+    downloadingModelsAtom
+  )
 
   const assistanModel = (
     model: ModelCatalog,
     modelVersion: ModelVersion
   ): Model => {
     return {
+      // eslint-disable-next-line @typescript-eslint/naming-convention
       _id: modelVersion._id,
       name: modelVersion.name,
       quantMethod: modelVersion.quantMethod,
@@ -63,7 +69,9 @@ export default function useDownloadModel() {
 
     modelVersion.startDownloadAt = Date.now()
     const assistantModel = assistanModel(model, modelVersion)
-    setModelsAtom([...models, assistantModel])
+
+    setDownloadingModels([...downloadingModels, assistantModel])
+
     await pluginManager
       .get<ModelPlugin>(PluginType.Model)
       ?.downloadModel(assistantModel)
diff --git a/web/hooks/useDownloadState.ts b/web/hooks/useDownloadState.ts
new file mode 100644
index 000000000..3af336dd8
--- /dev/null
+++ b/web/hooks/useDownloadState.ts
@@ -0,0 +1,67 @@
+import { atom, useSetAtom, useAtomValue } from 'jotai'
+
+import { toaster } from '@/containers/Toast'
+
+// download states
+const modelDownloadStateAtom = atom<Record<string, DownloadState>>({})
+
+const setDownloadStateAtom = atom(null, (get, set, state: DownloadState) => {
+  const currentState = { ...get(modelDownloadStateAtom) }
+  console.debug(
+    `current download state for ${state.fileName} is ${JSON.stringify(state)}`
+  )
+  state.fileName = state.fileName.replace('models/', '')
+  currentState[state.fileName] = state
+  set(modelDownloadStateAtom, currentState)
+})
+
+const setDownloadStateSuccessAtom = atom(null, (get, set, fileName: string) => {
+  const currentState = { ...get(modelDownloadStateAtom) }
+  const state = currentState[fileName]
+  if (!state) {
+    console.error(`Cannot find download state for ${fileName}`)
+    return
+  }
+  delete currentState[fileName]
+  set(modelDownloadStateAtom, currentState)
+  toaster({
+    title: 'Download Completed',
+    description: `Download ${fileName} completed`,
+  })
+})
+
+const setDownloadStateFailedAtom = atom(null, (get, set, fileName: string) => {
+  const currentState = { ...get(modelDownloadStateAtom) }
+  const state = currentState[fileName]
+  if (!state) {
+    console.error(`Cannot find download state for ${fileName}`)
+    toaster({
+      title: 'Cancel Download',
+      description: `Model ${fileName} cancel download`,
+    })
+    return
+  }
+  delete currentState[fileName]
+  set(modelDownloadStateAtom, currentState)
+})
+
+export function useDownloadState() {
+  const modelDownloadState = useAtomValue(modelDownloadStateAtom)
+  const setDownloadState = useSetAtom(setDownloadStateAtom)
+  const setDownloadStateSuccess = useSetAtom(setDownloadStateSuccessAtom)
+  const setDownloadStateFailed = useSetAtom(setDownloadStateFailedAtom)
+
+  const downloadStates: DownloadState[] = []
+  for (const [, value] of Object.entries(modelDownloadState)) {
+    downloadStates.push(value)
+  }
+
+  return {
+    modelDownloadStateAtom,
+    modelDownloadState,
+    setDownloadState,
+    setDownloadStateSuccess,
+    setDownloadStateFailed,
+    downloadStates,
+  }
+}
diff --git a/web/hooks/useGetAppVersion.ts b/web/hooks/useGetAppVersion.ts
index cdcd12e3e..e7bc6dc43 100644
--- a/web/hooks/useGetAppVersion.ts
+++ b/web/hooks/useGetAppVersion.ts
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 
-export default function useGetAppVersion() {
+export function useGetAppVersion() {
   const [version, setVersion] = useState<string>('')
 
   useEffect(() => {
diff --git a/web/hooks/useGetBots.ts b/web/hooks/useGetBots.ts
deleted file mode 100644
index ccf54f7b3..000000000
--- a/web/hooks/useGetBots.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-export default function useGetBots() {
-  const getAllBots = async (): Promise<Bot[]> => {
-    try {
-      // const bots = await executeSerial(DataService.GetBots)
-      return []
-    } catch (err) {
-      alert(`Failed to get bots: ${err}`)
-      console.error(err)
-      return []
-    }
-  }
-
-  const getBotById = async (botId: string): Promise<Bot | undefined> => {
-    try {
-      // const bot: Bot = await executeSerial(DataService.GetBotById, botId)
-      return undefined
-    } catch (err) {
-      alert(`Failed to get bot ${botId}: ${err}`)
-      console.error(err)
-      return undefined
-    }
-  }
-
-  return { getBotById, getAllBots }
-}
diff --git a/web/hooks/useGetConfiguredModels.ts b/web/hooks/useGetConfiguredModels.ts
index 17094f946..84ed5cc63 100644
--- a/web/hooks/useGetConfiguredModels.ts
+++ b/web/hooks/useGetConfiguredModels.ts
@@ -1,11 +1,21 @@
 import { useEffect, useState } from 'react'
-import { ModelCatalog } from '@janhq/core/lib/types'
-import { pluginManager } from '@plugin/PluginManager'
-import { ModelPlugin } from '@janhq/core/lib/plugins'
-import { PluginType } from '@janhq/core'
-import { dummyModel } from '@utils/dummy'
 
-export default function useGetConfiguredModels() {
+import { PluginType } from '@janhq/core'
+import { ModelPlugin } from '@janhq/core/lib/plugins'
+import { ModelCatalog } from '@janhq/core/lib/types'
+
+import { dummyModel } from '@/utils/dummy'
+
+import { pluginManager } from '@/plugin/PluginManager'
+
+export async function getConfiguredModels(): Promise<ModelCatalog[]> {
+  return (
+    pluginManager.get<ModelPlugin>(PluginType.Model)?.getConfiguredModels() ??
+    []
+  )
+}
+
+export function useGetConfiguredModels() {
   const [loading, setLoading] = useState<boolean>(false)
   const [models, setModels] = useState<ModelCatalog[]>([])
 
diff --git a/web/hooks/useGetCurrentUser.ts b/web/hooks/useGetCurrentUser.ts
deleted file mode 100644
index c0a284953..000000000
--- a/web/hooks/useGetCurrentUser.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-// @ts-nocheck
-import { useSession } from 'next-auth/react'
-import { useEffect, useState } from 'react'
-import useSignOut from './useSignOut'
-import { DefaultUser, User } from '@models/User'
-
-export default function useGetCurrentUser() {
-  const { data: session, status } = useSession()
-  const { signOut } = useSignOut()
-  const [loading, setLoading] = useState(status === 'loading')
-  const [user, setUser] = useState<User>()
-
-  useEffect(() => {
-    if (
-      status !== 'loading' &&
-      session &&
-      session?.error === 'RefreshAccessTokenError'
-    ) {
-      signOut()
-    }
-  }, [session, signOut, status])
-
-  useEffect(() => {
-    if (status === 'loading') {
-      setUser(undefined)
-      setLoading(true)
-      return
-    }
-    if (status === 'unauthenticated') {
-      setUser(undefined)
-      setLoading(false)
-      return
-    }
-
-    const tmp = {
-      id: session?.user?.user_id ?? DefaultUser.id,
-      displayName: session?.user?.name ?? DefaultUser.displayName,
-      avatarUrl: session?.user?.image ?? DefaultUser.avatarUrl,
-      email: session?.user?.email ?? DefaultUser.email,
-    }
-
-    setUser(tmp)
-    setLoading(false)
-  }, [
-    session?.user?.email,
-    session?.user?.image,
-    session?.user?.name,
-    session?.user?.user_id,
-    status,
-  ])
-
-  return { user, loading }
-}
diff --git a/web/hooks/useGetDownloadedModels.ts b/web/hooks/useGetDownloadedModels.ts
index 9d5b80b3e..42a695d58 100644
--- a/web/hooks/useGetDownloadedModels.ts
+++ b/web/hooks/useGetDownloadedModels.ts
@@ -1,27 +1,29 @@
 import { useEffect } from 'react'
+
+const downloadedModelAtom = atom<Model[]>([])
 import { PluginType } from '@janhq/core'
-import { useAtom } from 'jotai'
-import { downloadedModelAtom } from '@helpers/atoms/DownloadedModel.atom'
-import { pluginManager } from '@plugin/PluginManager'
 import { ModelPlugin } from '@janhq/core/lib/plugins'
 import { Model } from '@janhq/core/lib/types'
+import { atom, useAtom } from 'jotai'
+
+import { pluginManager } from '@/plugin/PluginManager'
 
 export function useGetDownloadedModels() {
   const [downloadedModels, setDownloadedModels] = useAtom(downloadedModelAtom)
 
+  async function getDownloadedModels(): Promise<Model[]> {
+    const models =
+      ((await pluginManager
+        .get<ModelPlugin>(PluginType.Model)
+        ?.getDownloadedModels()) as Model[]) ?? []
+    return models
+  }
+
   useEffect(() => {
     getDownloadedModels().then((downloadedModels) => {
       setDownloadedModels(downloadedModels)
     })
   }, [setDownloadedModels])
 
-  return { downloadedModels }
-}
-
-export async function getDownloadedModels(): Promise<Model[]> {
-  const models =
-    ((await pluginManager
-      .get<ModelPlugin>(PluginType.Model)
-      ?.getDownloadedModels()) as Model[]) ?? []
-  return models
+  return { downloadedModels, setDownloadedModels }
 }
diff --git a/web/hooks/useGetHuggingFaceModel.ts b/web/hooks/useGetHuggingFaceModel.ts
deleted file mode 100644
index 498fb9b28..000000000
--- a/web/hooks/useGetHuggingFaceModel.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { useState } from 'react'
-import { useSetAtom } from 'jotai'
-import { modelLoadMoreAtom } from '@helpers/atoms/ExploreModelLoading.atom'
-import { ModelCatalog } from '@janhq/core/lib/types'
-
-export default function useGetHuggingFaceModel() {
-  const setLoadMoreInProgress = useSetAtom(modelLoadMoreAtom)
-  const [modelList, setModelList] = useState<ModelCatalog[]>([])
-  const [currentOwner, setCurrentOwner] = useState<string | undefined>(
-    undefined
-  )
-
-  const getHuggingFaceModel = async (owner?: string) => {
-    if (!owner) {
-      setModelList([])
-      return
-    }
-
-    const searchParams: SearchModelParamHf = {
-      search: { owner },
-      limit: 5,
-    }
-    // const result = await searchModels(searchParams);
-    // console.debug("result", JSON.stringify(result));
-    // if (owner !== currentOwner) {
-    //   setModelList(result.data);
-    //   setCurrentOwner(owner);
-    // } else {
-    //   setModelList([...modelList, ...result.data]);
-    // }
-    setLoadMoreInProgress(false)
-  }
-
-  return { modelList, getHuggingFaceModel }
-}
diff --git a/web/hooks/useGetInputState.ts b/web/hooks/useGetInputState.ts
index 05506e0c8..e2b654e8c 100644
--- a/web/hooks/useGetInputState.ts
+++ b/web/hooks/useGetInputState.ts
@@ -1,20 +1,22 @@
-import { currentConversationAtom } from '@helpers/atoms/Conversation.atom'
-import { activeModelAtom } from '@helpers/atoms/Model.atom'
-import { useAtomValue } from 'jotai'
 import { useEffect, useState } from 'react'
-import { useGetDownloadedModels } from './useGetDownloadedModels'
+
 import { Model } from '@janhq/core/lib/types'
+import { useAtomValue } from 'jotai'
+
+import { useActiveModel } from './useActiveModel'
+import { useGetDownloadedModels } from './useGetDownloadedModels'
+
+import { currentConversationAtom } from '@/helpers/atoms/Conversation.atom'
 
 export default function useGetInputState() {
   const [inputState, setInputState] = useState<InputType>('loading')
   const currentConvo = useAtomValue(currentConversationAtom)
-  const activeModel = useAtomValue(activeModelAtom)
+  const { activeModel } = useActiveModel()
   const { downloadedModels } = useGetDownloadedModels()
 
   const handleInputState = (
     convo: Conversation | undefined,
-    currentModel: Model | undefined,
-    models: Model[]
+    currentModel: Model | undefined
   ) => {
     if (convo == null) return
     if (currentModel == null) {
@@ -44,8 +46,9 @@ export default function useGetInputState() {
   }
 
   useEffect(() => {
-    handleInputState(currentConvo, activeModel, downloadedModels)
-  }, [currentConvo, activeModel, downloadedModels])
+    handleInputState(currentConvo, activeModel)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
 
   return { inputState, currentConvo }
 }
diff --git a/web/hooks/useGetMostSuitableModelVersion.ts b/web/hooks/useGetMostSuitableModelVersion.ts
index be99401db..1e053f1a4 100644
--- a/web/hooks/useGetMostSuitableModelVersion.ts
+++ b/web/hooks/useGetMostSuitableModelVersion.ts
@@ -1,7 +1,9 @@
 import { useState } from 'react'
-import { useAtomValue } from 'jotai'
-import { totalRamAtom } from '@helpers/atoms/SystemBar.atom'
+
 import { ModelVersion } from '@janhq/core/lib/types'
+import { useAtomValue } from 'jotai'
+
+import { totalRamAtom } from '@/helpers/atoms/SystemBar.atom'
 
 export default function useGetMostSuitableModelVersion() {
   const [suitableModel, setSuitableModel] = useState<ModelVersion | undefined>()
diff --git a/web/hooks/useGetPerformanceTag.ts b/web/hooks/useGetPerformanceTag.ts
index 6d0cbe3b0..4c9934778 100644
--- a/web/hooks/useGetPerformanceTag.ts
+++ b/web/hooks/useGetPerformanceTag.ts
@@ -1,9 +1,11 @@
 import { useState } from 'react'
 
-import { ModelPerformance, TagType } from '@/_components/SimpleTag/TagType'
-import { useAtomValue } from 'jotai'
-import { totalRamAtom } from '@helpers/atoms/SystemBar.atom'
 import { ModelVersion } from '@janhq/core/lib/types'
+import { useAtomValue } from 'jotai'
+
+import { ModelPerformance, TagType } from '@/constants/tagType'
+
+import { totalRamAtom } from '@/helpers/atoms/SystemBar.atom'
 
 // Recommendation:
 // `Recommended (green)`: "Max RAM required" is 80% of users max  RAM.
diff --git a/web/hooks/useGetSystemResources.ts b/web/hooks/useGetSystemResources.ts
index 94ceb5687..d7bae79c7 100644
--- a/web/hooks/useGetSystemResources.ts
+++ b/web/hooks/useGetSystemResources.ts
@@ -1,9 +1,13 @@
 import { useEffect, useState } from 'react'
+
 import { PluginType } from '@janhq/core'
-import { useSetAtom } from 'jotai'
-import { totalRamAtom } from '@helpers/atoms/SystemBar.atom'
-import { pluginManager } from '@plugin/PluginManager'
 import { MonitoringPlugin } from '@janhq/core/lib/plugins'
+
+import { useSetAtom } from 'jotai'
+
+import { totalRamAtom } from '@/helpers/atoms/SystemBar.atom'
+import { pluginManager } from '@/plugin/PluginManager'
+
 export default function useGetSystemResources() {
   const [ram, setRam] = useState<number>(0)
   const [cpu, setCPU] = useState<number>(0)
@@ -41,6 +45,7 @@ export default function useGetSystemResources() {
   }, [])
 
   return {
+    totalRamAtom,
     ram,
     cpu,
   }
diff --git a/web/hooks/useGetUserConversations.ts b/web/hooks/useGetUserConversations.ts
index 65dc04d24..579b9ca5e 100644
--- a/web/hooks/useGetUserConversations.ts
+++ b/web/hooks/useGetUserConversations.ts
@@ -1,14 +1,15 @@
+import { PluginType } from '@janhq/core'
+import { ConversationalPlugin } from '@janhq/core/lib/plugins'
+import { Conversation } from '@janhq/core/lib/types'
 import { useSetAtom } from 'jotai'
+
+import { setConvoMessagesAtom } from '@/helpers/atoms/ChatMessage.atom'
 import {
   conversationStatesAtom,
   userConversationsAtom,
-} from '@helpers/atoms/Conversation.atom'
-import { pluginManager } from '../plugin/PluginManager'
-import { PluginType } from '@janhq/core'
-import { setConvoMessagesAtom } from '@helpers/atoms/ChatMessage.atom'
-import { toChatMessage } from '@models/ChatMessage'
-import { ConversationalPlugin } from '@janhq/core/lib/plugins'
-import { Conversation } from "@janhq/core/lib/types"
+} from '@/helpers/atoms/Conversation.atom'
+import { toChatMessage } from '@/models/ChatMessage'
+import { pluginManager } from '@/plugin/PluginManager'
 
 const useGetUserConversations = () => {
   const setConversationStates = useSetAtom(conversationStatesAtom)
@@ -33,8 +34,8 @@ const useGetUserConversations = () => {
       })
       setConversationStates(convoStates)
       setConversations(convos ?? [])
-    } catch (ex) {
-      console.log(ex)
+    } catch (error) {
+      console.log(error)
     }
   }
 
diff --git a/web/hooks/useMainViewState.ts b/web/hooks/useMainViewState.ts
new file mode 100644
index 000000000..3dccbb704
--- /dev/null
+++ b/web/hooks/useMainViewState.ts
@@ -0,0 +1,11 @@
+import { atom, useAtom } from 'jotai'
+
+import { MainViewState } from '@/constants/screens'
+
+const currentMainViewState = atom<MainViewState>(MainViewState.Welcome)
+
+export function useMainViewState() {
+  const [mainViewState, setMainViewState] = useAtom(currentMainViewState)
+  const viewStateName = MainViewState[mainViewState]
+  return { mainViewState, setMainViewState, viewStateName }
+}
diff --git a/web/hooks/useSendChatMessage.ts b/web/hooks/useSendChatMessage.ts
index 5f328abd0..a06c67b4c 100644
--- a/web/hooks/useSendChatMessage.ts
+++ b/web/hooks/useSendChatMessage.ts
@@ -1,5 +1,3 @@
-import { currentPromptAtom } from '@helpers/JotaiWrapper'
-import { useAtom, useAtomValue, useSetAtom } from 'jotai'
 import {
   EventName,
   MessageHistory,
@@ -7,19 +5,28 @@ import {
   PluginType,
   events,
 } from '@janhq/core'
-import { toChatMessage } from '@models/ChatMessage'
+
+import { ConversationalPlugin, InferencePlugin } from '@janhq/core/lib/plugins'
+
+import { Message } from '@janhq/core/lib/types'
+import { useAtom, useAtomValue, useSetAtom } from 'jotai'
+
+import { currentPromptAtom } from '@/containers/Providers/Jotai'
+
+import { generateMessageId } from '@/utils/message'
+
 import {
   addNewMessageAtom,
   getCurrentChatMessagesAtom,
-} from '@helpers/atoms/ChatMessage.atom'
+} from '@/helpers/atoms/ChatMessage.atom'
 import {
   currentConversationAtom,
   updateConversationAtom,
   updateConversationWaitingForResponseAtom,
-} from '@helpers/atoms/Conversation.atom'
-import { pluginManager } from '@plugin/PluginManager'
-import { InferencePlugin } from '@janhq/core/lib/plugins'
-import { generateMessageId } from '@utils/message'
+} from '@/helpers/atoms/Conversation.atom'
+import { toChatMessage } from '@/models/ChatMessage'
+
+import { pluginManager } from '@/plugin/PluginManager'
 
 export default function useSendChatMessage() {
   const currentConvo = useAtomValue(currentConversationAtom)
@@ -29,9 +36,9 @@ export default function useSendChatMessage() {
   const [currentPrompt, setCurrentPrompt] = useAtom(currentPromptAtom)
   const currentMessages = useAtomValue(getCurrentChatMessagesAtom)
 
-  let timeout: any | undefined = undefined
+  let timeout: NodeJS.Timeout | undefined = undefined
 
-  function updateConvSummary(newMessage: any) {
+  function updateConvSummary(newMessage: NewMessageRequest) {
     if (timeout) {
       clearTimeout(timeout)
     }
@@ -60,6 +67,23 @@ export default function useSendChatMessage() {
               summary: result.message,
             }
             updateConversation(updatedConv)
+            pluginManager
+              .get<ConversationalPlugin>(PluginType.Conversational)
+              ?.saveConversation({
+                ...updatedConv,
+                name: updatedConv.name ?? '',
+                message: updatedConv.lastMessage ?? '',
+                messages: currentMessages.map<Message>((e: ChatMessage) => {
+                  return {
+                    // eslint-disable-next-line @typescript-eslint/naming-convention
+                    _id: e.id,
+                    message: e.text,
+                    user: e.senderUid,
+                    updatedAt: new Date(e.createdAt).toISOString(),
+                    createdAt: new Date(e.createdAt).toISOString(),
+                  }
+                }),
+              })
           }
         }, 1000)
       }
@@ -67,9 +91,8 @@ export default function useSendChatMessage() {
   }
 
   const sendChatMessage = async () => {
-    const convoId = currentConvo?._id
+    const convoId = currentConvo?._id as string
 
-    if (!convoId) return
     setCurrentPrompt('')
     updateConvWaiting(convoId, true)
 
@@ -89,6 +112,7 @@ export default function useSendChatMessage() {
         } as MessageHistory,
       ])
     const newMessage: NewMessageRequest = {
+      // eslint-disable-next-line @typescript-eslint/naming-convention
       _id: generateMessageId(),
       conversationId: convoId,
       message: prompt,
@@ -101,7 +125,6 @@ export default function useSendChatMessage() {
     addNewMessage(newChatMessage)
 
     events.emit(EventName.OnNewMessageRequest, newMessage)
-
     if (!currentConvo?.summary && currentConvo) {
       const updatedConv: Conversation = {
         ...currentConvo,
@@ -110,7 +133,7 @@ export default function useSendChatMessage() {
       }
 
       updateConversation(updatedConv)
-    } else {
+    } else if (currentConvo) {
       const updatedConv: Conversation = {
         ...currentConvo,
         lastMessage: prompt,
diff --git a/web/hooks/useSignIn.ts b/web/hooks/useSignIn.ts
deleted file mode 100644
index 7fa47ceec..000000000
--- a/web/hooks/useSignIn.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { signIn } from 'next-auth/react'
-
-export default function useSignIn() {
-  const signInWithKeyCloak = () => {
-    return signIn('keycloak')
-  }
-
-  return { signInWithKeyCloak }
-}
diff --git a/web/hooks/useSignOut.ts b/web/hooks/useSignOut.ts
deleted file mode 100644
index 86f8fa92a..000000000
--- a/web/hooks/useSignOut.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { signOut as signOutNextAuth } from 'next-auth/react'
-
-export default function useSignOut() {
-  const signOut = async () => {
-    try {
-      await fetch(`api/auth/logout`, { method: 'GET' })
-      await signOutNextAuth({ callbackUrl: '/' })
-    } catch (e) {
-      console.error(e)
-    }
-  }
-
-  return { signOut }
-}
diff --git a/web/hooks/useStartStopModel.ts b/web/hooks/useStartStopModel.ts
deleted file mode 100644
index dd9451aac..000000000
--- a/web/hooks/useStartStopModel.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import { PluginType } from '@janhq/core'
-import { InferencePlugin } from '@janhq/core/lib/plugins'
-import { useAtom, useAtomValue, useSetAtom } from 'jotai'
-import { activeModelAtom, stateModel } from '@helpers/atoms/Model.atom'
-import { pluginManager } from '@plugin/PluginManager'
-import { downloadedModelAtom } from '@helpers/atoms/DownloadedModel.atom'
-
-export default function useStartStopModel() {
-  const [activeModel, setActiveModel] = useAtom(activeModelAtom)
-  const setStateModel = useSetAtom(stateModel)
-  const models = useAtomValue(downloadedModelAtom)
-
-  const startModel = async (modelId: string) => {
-    if (activeModel && activeModel._id === modelId) {
-      console.debug(`Model ${modelId} is already init. Ignore..`)
-      return
-    }
-
-    setStateModel({ state: 'start', loading: true, model: modelId })
-
-    const model = await models.find((model) => model._id == modelId)
-
-    if (!model) {
-      alert(`Model ${modelId} not found! Please re-download the model first.`)
-      setStateModel((prev) => ({ ...prev, loading: false }))
-      return
-    }
-
-    const currentTime = Date.now()
-    console.debug('Init model: ', model._id)
-
-    const res = await initModel(`models/${model._id}`)
-    if (res?.error) {
-      const errorMessage = `Failed to init model: ${res.error}`
-      console.error(errorMessage)
-      alert(errorMessage)
-    } else {
-      console.debug(
-        `Init model ${modelId} successfully!, take ${
-          Date.now() - currentTime
-        }ms`
-      )
-      setActiveModel(model)
-    }
-    setStateModel((prev) => ({ ...prev, loading: false }))
-  }
-
-  const stopModel = async (modelId: string) => {
-    setStateModel({ state: 'stop', loading: true, model: modelId })
-    setTimeout(async () => {
-      await pluginManager
-        .get<InferencePlugin>(PluginType.Inference)
-        ?.stopModel()
-      setActiveModel(undefined)
-      setStateModel({ state: 'stop', loading: false, model: modelId })
-    }, 500)
-  }
-
-  return { startModel, stopModel }
-}
-
-const initModel = async (modelId: string): Promise<any> => {
-  await pluginManager
-    .get<InferencePlugin>(PluginType.Inference)
-    ?.initModel(modelId)
-}
diff --git a/web/hooks/useUpdateBot.ts b/web/hooks/useUpdateBot.ts
deleted file mode 100644
index c2dbc9104..000000000
--- a/web/hooks/useUpdateBot.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-export default function useUpdateBot() {
-  const updateBot = async (
-    bot: Bot,
-    updatableField: UpdatableField
-  ): Promise<void> => {
-    try {
-      // TODO: if bot does not changed, no need to update
-
-      for (const [key, value] of Object.entries(updatableField)) {
-        if (value !== undefined) {
-          //@ts-ignore
-          bot[key] = value
-        }
-      }
-
-      // await executeSerial(DataService.UpdateBot, bot)
-      console.debug('Bot updated', JSON.stringify(bot, null, 2))
-    } catch (err) {
-      alert(`Update bot error: ${err}`)
-      console.error(err)
-      return
-    }
-  }
-
-  return { updateBot }
-}
-
-export type UpdatableField = {
-  presencePenalty?: number
-  frequencyPenalty?: number
-  maxTokens?: number
-  customTemperature?: number
-  systemPrompt?: number
-}
diff --git a/web/hooks/useUserConfigs.ts b/web/hooks/useUserConfigs.ts
index 8b09128e8..250d20a80 100644
--- a/web/hooks/useUserConfigs.ts
+++ b/web/hooks/useUserConfigs.ts
@@ -1,5 +1,10 @@
 import { useAtom } from 'jotai'
-import { userConfigs } from '@helpers/JotaiWrapper'
+import { atomWithStorage } from 'jotai/utils'
+
+export const userConfigs = atomWithStorage<UserConfig>('config', {
+  gettingStartedShow: true,
+  primaryColor: 'primary-blue',
+})
 
 export function useUserConfigs() {
   return useAtom(userConfigs)
diff --git a/web/models/ChatMessage.ts b/web/models/ChatMessage.ts
index 9d3f0f4dd..9f74b5b96 100644
--- a/web/models/ChatMessage.ts
+++ b/web/models/ChatMessage.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/naming-convention */
 import { NewMessageResponse } from '@janhq/core'
 import { Message } from '@janhq/core/lib/types'
 export enum MessageType {
@@ -43,7 +44,7 @@ export interface RawMessage {
 
 export const toChatMessage = (
   m: RawMessage | Message | NewMessageResponse,
-  bot?: Bot,
+
   conversationId?: string
 ): ChatMessage => {
   const createdAt = new Date(m.createdAt ?? '').getTime()
@@ -59,10 +60,7 @@ export const toChatMessage = (
 
   const content = m.message ?? ''
 
-  let senderName = m.user === 'user' ? 'You' : 'Assistant'
-  if (senderName === 'Assistant' && bot) {
-    senderName = bot.name
-  }
+  const senderName = m.user === 'user' ? 'You' : 'Assistant'
 
   return {
     id: (m._id ?? 0).toString(),
diff --git a/web/models/User.ts b/web/models/User.ts
deleted file mode 100644
index 8c69a0505..000000000
--- a/web/models/User.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export const DefaultUser = {
-  id: '0',
-  displayName: 'Anonymous',
-  avatarUrl: 'icons/app_icon.svg',
-  email: '',
-}
diff --git a/web/next.config.js b/web/next.config.js
index 75052d319..fd860aa5c 100644
--- a/web/next.config.js
+++ b/web/next.config.js
@@ -1,15 +1,13 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 /** @type {import('next').NextConfig} */
-const { version } = require('os')
+
 const webpack = require('webpack')
+
 const packageJson = require('./package.json')
 
 const nextConfig = {
   output: 'export',
   assetPrefix: '.',
-  transpilePackages: ['lucide-react'],
-  experimental: {
-    serverActions: false,
-  },
   images: {
     unoptimized: true,
     remotePatterns: [
@@ -19,7 +17,7 @@ const nextConfig = {
       },
     ],
   },
-  webpack: (config, env) => {
+  webpack: (config) => {
     // do some stuff here
     config.optimization.minimize = false
     config.optimization.minimizer = []
@@ -29,7 +27,7 @@ const nextConfig = {
         PLUGIN_CATALOG: JSON.stringify(
           'https://cdn.jsdelivr.net/npm/@janhq/plugin-catalog@latest/dist/index.js'
         ),
-        VERSION: JSON.stringify(packageJson.version)
+        VERSION: JSON.stringify(packageJson.version),
       }),
     ]
     return config
diff --git a/web/package.json b/web/package.json
index 9f3de3217..6d0347646 100644
--- a/web/package.json
+++ b/web/package.json
@@ -14,49 +14,54 @@
   "dependencies": {
     "@headlessui/react": "^1.7.15",
     "@heroicons/react": "^2.0.18",
-    "@janhq/core": "file:../core",
-    "@radix-ui/react-slot": "^1.0.2",
-    "@radix-ui/react-switch": "^1.0.3",
-    "@radix-ui/react-toggle": "^1.0.3",
-    "@tailwindcss/typography": "^0.5.9",
-    "@types/react": "18.2.15",
-    "@types/react-dom": "18.2.7",
-    "autoprefixer": "10.4.14",
+    "@hookform/resolvers": "^3.3.2",
+    "@janhq/core": "./core",
+    "@janhq/uikit": "./uikit",
+    "autoprefixer": "10.4.16",
     "class-variance-authority": "^0.7.0",
-    "classnames": "^2.3.2",
-    "eslint": "8.45.0",
-    "eslint-config-next": "13.4.10",
     "framer-motion": "^10.16.4",
     "highlight.js": "^11.9.0",
     "jotai": "^2.4.0",
-    "jotai-optics": "^0.3.1",
-    "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",
-    "lucide-react": "^0.288.0",
+    "lucide-react": "^0.291.0",
     "marked": "^9.1.2",
     "marked-highlight": "^2.0.6",
-    "next": "13.4.10",
-    "next-auth": "^4.23.1",
+    "next": "14.0.1",
     "next-themes": "^0.2.1",
-    "postcss": "8.4.26",
+    "postcss": "8.4.31",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-hook-form": "^7.45.4",
-    "react-intersection-observer": "^9.5.2",
+    "react-hook-form": "^7.47.0",
+    "react-hot-toast": "^2.4.1",
     "react-toastify": "^9.1.3",
     "sass": "^1.69.4",
-    "tailwind-merge": "^1.14.0",
-    "tailwindcss": "3.3.3",
-    "typescript": "5.1.6",
-    "uuid": "^9.0.1"
+    "tailwind-merge": "^2.0.0",
+    "tailwindcss": "3.3.5",
+    "typescript": "5.2.2",
+    "uuid": "^9.0.1",
+    "zod": "^3.22.4"
   },
   "devDependencies": {
-    "@tailwindcss/forms": "^0.5.4",
+    "@next/eslint-plugin-next": "^14.0.1",
     "@types/lodash": "^4.14.200",
-    "@types/node": "20.6.5",
+    "@types/node": "20.8.10",
+    "@types/react": "18.2.34",
+    "@types/react-dom": "18.2.14",
     "@types/uuid": "^9.0.6",
+    "@typescript-eslint/eslint-plugin": "^6.8.0",
+    "@typescript-eslint/parser": "^6.8.0",
     "encoding": "^0.1.13",
+    "eslint": "8.52.0",
+    "eslint-config-next": "14.0.1",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-config-turbo": "^1.10.15",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "prettier": "^3.0.3",
-    "prettier-plugin-tailwindcss": "^0.5.6"
+    "prettier-plugin-tailwindcss": "^0.5.6",
+    "rimraf": "^5.0.5"
   }
 }
diff --git a/web/plugin/Plugin.ts b/web/plugin/Plugin.ts
index fc97b0162..b074c81b1 100644
--- a/web/plugin/Plugin.ts
+++ b/web/plugin/Plugin.ts
@@ -8,9 +8,6 @@ class Plugin {
   /** @type {string}  The electron url where this plugin is located. */
   url
 
-  /** @type {Array<string>} List of activation points. */
-  activationPoints
-
   /** @type {boolean} Whether this plugin should be activated when its activation points are triggered. */
   active
 
@@ -26,7 +23,6 @@ class Plugin {
   constructor(
     name?: string,
     url?: string,
-    activationPoints?: any[],
     active?: boolean,
     description?: string,
     version?: string,
@@ -34,7 +30,6 @@ class Plugin {
   ) {
     this.name = name
     this.url = url
-    this.activationPoints = activationPoints
     this.active = active
     this.description = description
     this.version = version
diff --git a/web/plugin/PluginManager.ts b/web/plugin/PluginManager.ts
index 5f1b69b99..e3cb45fde 100644
--- a/web/plugin/PluginManager.ts
+++ b/web/plugin/PluginManager.ts
@@ -1,4 +1,6 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { JanPlugin, PluginType } from '@janhq/core'
+
 import Plugin from './Plugin'
 
 /**
@@ -57,12 +59,11 @@ export class PluginManager {
    */
   async getActive(): Promise<Plugin[]> {
     const plgList = await window.pluggableElectronIpc?.getActive()
-    let plugins: Plugin[] = plgList.map(
+    const plugins: Plugin[] = plgList.map(
       (plugin: any) =>
         new Plugin(
           plugin.name,
           plugin.url,
-          plugin.activationPoints,
           plugin.active,
           plugin.description,
           plugin.version,
@@ -118,12 +119,7 @@ export class PluginManager {
     const plgList = await window.pluggableElectronIpc?.install(plugins)
     if (plgList.cancelled) return false
     return plgList.map(async (plg: any) => {
-      const plugin = new Plugin(
-        plg.name,
-        plg.url,
-        plg.activationPoints,
-        plg.active
-      )
+      const plugin = new Plugin(plg.name, plg.url, plg.active)
       await this.activatePlugin(plugin)
       return plugin
     })
diff --git a/web/plugin/index.ts b/web/plugin/index.ts
new file mode 100644
index 000000000..4889e3596
--- /dev/null
+++ b/web/plugin/index.ts
@@ -0,0 +1 @@
+export { pluginManager } from './PluginManager'
diff --git a/web/screens/Bot/index.tsx b/web/screens/Bot/index.tsx
deleted file mode 100644
index ce68e1650..000000000
--- a/web/screens/Bot/index.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react'
-
-import CreateBotContainer from '@/_components/CreateBotContainer'
-
-const BotScreen = () => {
-  return (
-    <div className="flex h-full items-center justify-center px-4 pb-4">
-      <CreateBotContainer />
-    </div>
-  )
-}
-
-export default BotScreen
diff --git a/web/app/_components/ChatBody/index.tsx b/web/screens/Chat/ChatBody/index.tsx
similarity index 59%
rename from web/app/_components/ChatBody/index.tsx
rename to web/screens/Chat/ChatBody/index.tsx
index 78ec7341e..755e3d6b7 100644
--- a/web/app/_components/ChatBody/index.tsx
+++ b/web/screens/Chat/ChatBody/index.tsx
@@ -1,15 +1,14 @@
-'use client'
-
-import React from 'react'
-import ChatItem from '../ChatItem'
 import { useAtomValue } from 'jotai'
-import { getCurrentChatMessagesAtom } from '@helpers/atoms/ChatMessage.atom'
+
+import ChatItem from '../ChatItem'
+
+import { getCurrentChatMessagesAtom } from '@/helpers/atoms/ChatMessage.atom'
 
 const ChatBody: React.FC = () => {
   const messages = useAtomValue(getCurrentChatMessagesAtom)
 
   return (
-    <div className="flex h-full flex-1 flex-col-reverse overflow-y-auto [&>*:nth-child(odd)]:bg-background">
+    <div className="flex h-full w-full flex-col-reverse overflow-y-auto">
       {messages.map((message) => (
         <ChatItem message={message} key={message.id} />
       ))}
diff --git a/web/screens/Chat/ChatItem/index.tsx b/web/screens/Chat/ChatItem/index.tsx
new file mode 100644
index 000000000..fa18acd54
--- /dev/null
+++ b/web/screens/Chat/ChatItem/index.tsx
@@ -0,0 +1,26 @@
+import React, { forwardRef } from 'react'
+
+import SimpleTextMessage from '../SimpleTextMessage'
+
+type Props = {
+  message: ChatMessage
+}
+
+type Ref = HTMLDivElement
+
+const ChatItem = forwardRef<Ref, Props>(({ message }, ref) => {
+  return (
+    <div ref={ref} className="py-4 even:bg-secondary dark:even:bg-secondary/20">
+      <SimpleTextMessage
+        key={message.id}
+        avatarUrl={message.senderAvatarUrl}
+        senderName={message.senderName}
+        createdAt={message.createdAt}
+        senderType={message.messageSenderType}
+        text={message.text}
+      />
+    </div>
+  )
+})
+
+export default ChatItem
diff --git a/web/screens/Chat/EmptyChatScreen.tsx b/web/screens/Chat/EmptyChatScreen.tsx
deleted file mode 100644
index ab579a6e6..000000000
--- a/web/screens/Chat/EmptyChatScreen.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react'
-import SelectModels from '@/_components/ModelSelector'
-import InputToolbar from '@/_components/InputToolbar'
-import HistoryList from '@/_components/HistoryList'
-
-const EmptyChatScreen: React.FC = () => (
-  <div className="flex h-full">
-    <div className="border-gray-20 border-border flex h-full w-80 flex-shrink-0 flex-col overflow-y-auto border-r">
-      <div className="p-6">
-        <HistoryList />
-      </div>
-    </div>
-    <div className="bg-background/50 relative w-full overflow-y-auto p-5">
-      <div className="flex flex-1 items-center justify-center">
-        <SelectModels />
-      </div>
-      <InputToolbar />
-    </div>
-  </div>
-)
-
-export default EmptyChatScreen
diff --git a/web/screens/Chat/HistoryList/index.tsx b/web/screens/Chat/HistoryList/index.tsx
new file mode 100644
index 000000000..f5e5f2e7a
--- /dev/null
+++ b/web/screens/Chat/HistoryList/index.tsx
@@ -0,0 +1,117 @@
+import { useEffect } from 'react'
+
+import { Conversation, Model } from '@janhq/core/lib/types'
+import { Button } from '@janhq/uikit'
+import { motion as m } from 'framer-motion'
+import { useAtomValue, useSetAtom } from 'jotai'
+
+import { GalleryHorizontalEndIcon } from 'lucide-react'
+
+import { twMerge } from 'tailwind-merge'
+
+import { useActiveModel } from '@/hooks/useActiveModel'
+import { useCreateConversation } from '@/hooks/useCreateConversation'
+import { useGetDownloadedModels } from '@/hooks/useGetDownloadedModels'
+import useGetUserConversations from '@/hooks/useGetUserConversations'
+
+import { displayDate } from '@/utils/datetime'
+
+import {
+  getActiveConvoIdAtom,
+  setActiveConvoIdAtom,
+  userConversationsAtom,
+} from '@/helpers/atoms/Conversation.atom'
+
+export default function HistoryList() {
+  const conversations = useAtomValue(userConversationsAtom)
+  const { getUserConversations } = useGetUserConversations()
+  const { activeModel, startModel } = useActiveModel()
+  const { requestCreateConvo } = useCreateConversation()
+  const activeConvoId = useAtomValue(getActiveConvoIdAtom)
+  const setActiveConvoId = useSetAtom(setActiveConvoIdAtom)
+  const { downloadedModels } = useGetDownloadedModels()
+
+  useEffect(() => {
+    getUserConversations()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const handleClickConversation = () => {
+    if (activeModel) requestCreateConvo(activeModel as Model)
+    return
+  }
+
+  const handleActiveModel = async (convo: Conversation) => {
+    if (convo.modelId == null) {
+      console.debug('modelId is undefined')
+      return
+    }
+    const model = downloadedModels.find((e) => e._id === convo.modelId)
+    if (convo == null) {
+      console.debug('modelId is undefined')
+      return
+    }
+    if (model != null) {
+      startModel(model._id)
+    }
+    if (activeConvoId !== convo._id) {
+      setActiveConvoId(convo._id)
+    }
+  }
+
+  return (
+    <div>
+      <div className="sticky top-0 z-20 flex flex-col border-b border-border bg-background px-4 py-3">
+        <Button
+          size="sm"
+          themes="outline"
+          onClick={handleClickConversation}
+          disabled={!activeModel}
+        >
+          Create New Chat
+        </Button>
+      </div>
+
+      {conversations.length === 0 ? (
+        <div className="px-4 py-8 text-center">
+          <GalleryHorizontalEndIcon
+            size={26}
+            className="mx-auto mb-3 text-muted-foreground"
+          />
+          <h2 className="font-semibold">No Chat History</h2>
+          <p className="mt-1 text-xs">Get started by creating a new chat</p>
+        </div>
+      ) : (
+        conversations.map((convo, i) => {
+          return (
+            <div
+              key={i}
+              className={twMerge(
+                'relative flex cursor-pointer flex-col border-b border-border px-4 py-2 hover:bg-secondary/20',
+                activeConvoId === convo._id && 'bg-secondary-10'
+              )}
+              onClick={() => handleActiveModel(convo as Conversation)}
+            >
+              <p className="mb-1 line-clamp-1 text-xs leading-5">
+                {convo.updatedAt &&
+                  displayDate(new Date(convo.updatedAt).getTime())}
+              </p>
+              <span className="line-clamp-1">
+                {convo.summary ?? convo.name}
+              </span>
+              <p className="mt-1 line-clamp-2 text-xs">
+                {convo?.lastMessage ?? 'No new message'}
+              </p>
+              {activeModel && activeConvoId === convo._id && (
+                <m.div
+                  className="absolute right-0 top-0 h-full w-1 bg-primary/50"
+                  layoutId="active-convo"
+                />
+              )}
+            </div>
+          )
+        })
+      )}
+    </div>
+  )
+}
diff --git a/web/screens/Chat/SimpleTextMessage/index.tsx b/web/screens/Chat/SimpleTextMessage/index.tsx
new file mode 100644
index 000000000..ff29b6845
--- /dev/null
+++ b/web/screens/Chat/SimpleTextMessage/index.tsx
@@ -0,0 +1,93 @@
+import React, { Fragment } from 'react'
+
+import hljs from 'highlight.js'
+import { Marked } from 'marked'
+
+import { markedHighlight } from 'marked-highlight'
+
+import { twMerge } from 'tailwind-merge'
+
+import LogoMark from '@/containers/Brand/Logo/Mark'
+
+import { displayDate } from '@/utils/datetime'
+
+import LoadingIndicator from '../../../components/LoadingIndicator'
+
+import { MessageSenderType } from '@/models/ChatMessage'
+
+type Props = {
+  avatarUrl: string
+  senderName: string
+  createdAt: number
+  senderType: MessageSenderType
+  text?: string
+}
+
+const marked = new Marked(
+  // markedHighlight({
+  //   langPrefix: 'hljs',
+  //   highlight(code, lang) {
+  //     if (lang === undefined || lang === '') {
+  //       return hljs.highlightAuto(code).value
+  //     }
+  //     return hljs.highlight(code, { language: lang }).value
+  //   },
+  // }),
+  markedHighlight({
+    langPrefix: 'hljs language-',
+    highlight(code, lang) {
+      const language = hljs.getLanguage(lang) ? lang : 'plaintext'
+      return hljs.highlight(code, { language }).value
+    },
+  }),
+  {
+    renderer: {
+      code(code, lang, escaped) {
+        return `<pre class="hljs"><code class="language-${encodeURIComponent(
+          lang ?? ''
+        )}">${escaped ? code : encodeURIComponent(code)}</code></pre>`
+      },
+    },
+  }
+)
+
+const SimpleTextMessage: React.FC<Props> = ({
+  senderName,
+  senderType,
+  createdAt,
+  text = '',
+}) => {
+  const parsedText = marked.parse(text)
+  const isUser = senderType === 'user'
+
+  return (
+    <div className="mx-auto flex w-full flex-col items-start gap-1 rounded-xl px-4 lg:w-3/4">
+      <div
+        className={twMerge(
+          'mb-1 flex items-center justify-start gap-2',
+          !isUser && 'mt-2'
+        )}
+      >
+        {!isUser && <LogoMark width={20} />}
+        <div className="text-sm font-extrabold ">{senderName}</div>
+        <p className="text-xs font-medium">{displayDate(createdAt)}</p>
+      </div>
+
+      <div className="w-full">
+        {text === '' ? (
+          <LoadingIndicator />
+        ) : (
+          <>
+            <span
+              className="message text-[15px] font-normal leading-relaxed"
+              // eslint-disable-next-line @typescript-eslint/naming-convention
+              dangerouslySetInnerHTML={{ __html: parsedText }}
+            />
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default React.memo(SimpleTextMessage)
diff --git a/web/screens/Chat/index.tsx b/web/screens/Chat/index.tsx
index 5472ce067..02235e41c 100644
--- a/web/screens/Chat/index.tsx
+++ b/web/screens/Chat/index.tsx
@@ -1,22 +1,150 @@
-import React from 'react'
+import { Fragment } from 'react'
 
-import ChatBody from '@/_components/ChatBody'
-import InputToolbar from '@/_components/InputToolbar'
-import HistoryList from '@/_components/HistoryList'
-import MainHeader from '@/_components/MainHeader'
-import LeftHeaderAction from '@/_components/LeftHeaderAction'
+import { Model } from '@janhq/core/lib/types'
+import { ScrollArea, Input, Button, Badge } from '@janhq/uikit'
+
+import { useAtom, useAtomValue } from 'jotai'
+import { Trash2Icon } from 'lucide-react'
+
+import { currentPromptAtom } from '@/containers/Providers/Jotai'
+
+import { MainViewState } from '@/constants/screens'
+
+import { useActiveModel } from '@/hooks/useActiveModel'
+
+import { useCreateConversation } from '@/hooks/useCreateConversation'
+import useDeleteConversation from '@/hooks/useDeleteConversation'
+
+import { useGetDownloadedModels } from '@/hooks/useGetDownloadedModels'
+
+import { useMainViewState } from '@/hooks/useMainViewState'
+
+import useSendChatMessage from '@/hooks/useSendChatMessage'
+
+import ChatBody from '@/screens/Chat/ChatBody'
+
+import HistoryList from '@/screens/Chat/HistoryList'
+
+import {
+  currentConversationAtom,
+  getActiveConvoIdAtom,
+} from '@/helpers/atoms/Conversation.atom'
+
+import { currentConvoStateAtom } from '@/helpers/atoms/Conversation.atom'
 
 const ChatScreen = () => {
+  const currentConvo = useAtomValue(currentConversationAtom)
+  const { downloadedModels } = useGetDownloadedModels()
+  const { deleteConvo } = useDeleteConversation()
+  const { activeModel, stateModel } = useActiveModel()
+  const { setMainViewState } = useMainViewState()
+
+  const isEnableChat = currentConvo && activeModel
+  const [currentPrompt, setCurrentPrompt] = useAtom(currentPromptAtom)
+  const currentConvoState = useAtomValue(currentConvoStateAtom)
+  const { sendChatMessage } = useSendChatMessage()
+  const isWaitingForResponse = currentConvoState?.waitingForResponse ?? false
+  const disabled = currentPrompt.trim().length === 0 || isWaitingForResponse
+  const activeConversationId = useAtomValue(getActiveConvoIdAtom)
+  const { requestCreateConvo } = useCreateConversation()
+
+  const handleMessageChange = (value: string) => {
+    setCurrentPrompt(value)
+  }
+
+  const handleSendMessage = async () => {
+    if (activeConversationId) {
+      sendChatMessage()
+    } else {
+      await requestCreateConvo(activeModel as Model)
+      sendChatMessage()
+    }
+  }
+
+  const handleKeyDown = async (
+    event: React.KeyboardEvent<HTMLInputElement>
+  ) => {
+    if (event.key === 'Enter') {
+      if (!event.shiftKey) {
+        event.preventDefault()
+        handleSendMessage()
+      }
+    }
+  }
+
   return (
     <div className="flex h-full">
-      <div className="flex h-full w-64 flex-shrink-0 flex-col overflow-y-auto border-r border-border ">
-        <LeftHeaderAction />
-        <HistoryList />
+      <div className="flex h-full w-64 flex-shrink-0 flex-col border-r border-border">
+        <ScrollArea className="h-full w-full">
+          <HistoryList />
+        </ScrollArea>
       </div>
-      <div className="relative flex h-full w-full flex-col bg-background/50">
-        <MainHeader />
-        <ChatBody />
-        <InputToolbar />
+      <div className="relative flex h-full w-full flex-col bg-muted/10">
+        <div className="flex h-full w-full flex-col justify-between">
+          {isEnableChat && (
+            <div className="h-[53px] flex-shrink-0 border-b border-border p-4">
+              <div className="flex items-center justify-between">
+                <span>{currentConvo?.name ?? ''}</span>
+                <Trash2Icon
+                  size={16}
+                  className="cursor-pointer text-muted-foreground"
+                  onClick={() => deleteConvo()}
+                />
+              </div>
+            </div>
+          )}
+
+          {isEnableChat ? (
+            <div className="flex h-full w-full overflow-x-auto">
+              <ChatBody />
+            </div>
+          ) : (
+            <div className="mx-auto mt-8 flex h-full w-3/4 flex-col items-center justify-center text-center">
+              {downloadedModels.length === 0 && (
+                <Fragment>
+                  <h1 className="text-lg font-medium">{`Ups, you don't have a Model`}</h1>
+                  <p className="mt-1">{`let’s download your first model.`}</p>
+                  <Button
+                    className="mt-4"
+                    onClick={() =>
+                      setMainViewState(MainViewState.ExploreModels)
+                    }
+                  >
+                    Explore Models
+                  </Button>
+                </Fragment>
+              )}
+              {!activeModel && downloadedModels.length > 0 && (
+                <Fragment>
+                  <h1 className="text-lg font-medium">{`You don’t have any actively running models`}</h1>
+                  <p className="mt-1">{`Please start a downloaded model in My Models page to use this feature.`}</p>
+                  <Badge className="mt-4" themes="secondary">
+                    ⌘e to show your model
+                  </Badge>
+                </Fragment>
+              )}
+            </div>
+          )}
+          <div className="flex w-full flex-shrink-0 items-center justify-center space-x-4 p-4">
+            <Input
+              type="text"
+              className="h-10"
+              onKeyDown={(e) => handleKeyDown(e)}
+              placeholder="Type your message ..."
+              disabled={!activeModel || stateModel.loading}
+              value={currentPrompt}
+              onChange={(e) => handleMessageChange(e.target.value)}
+            />
+            <Button
+              size="lg"
+              disabled={!activeModel || disabled || stateModel.loading}
+              themes={!activeModel ? 'secondary' : 'primary'}
+              onClick={handleSendMessage}
+            >
+              Send
+            </Button>
+          </div>
+        </div>
       </div>
     </div>
   )
diff --git a/web/screens/ExploreModels/ExploreModelItem/index.tsx b/web/screens/ExploreModels/ExploreModelItem/index.tsx
new file mode 100644
index 000000000..b13816d39
--- /dev/null
+++ b/web/screens/ExploreModels/ExploreModelItem/index.tsx
@@ -0,0 +1,118 @@
+/* eslint-disable react/display-name */
+
+import { forwardRef, useEffect, useState } from 'react'
+
+import { ModelCatalog } from '@janhq/core/lib/types'
+import { Badge } from '@janhq/uikit'
+
+import useGetMostSuitableModelVersion from '@/hooks/useGetMostSuitableModelVersion'
+
+import ExploreModelItemHeader from '@/screens/ExploreModels/ExploreModelItemHeader'
+import ModelVersionList from '@/screens/ExploreModels/ModelVersionList'
+
+import { toGigabytes } from '@/utils/converter'
+import { displayDate } from '@/utils/datetime'
+
+type Props = {
+  model: ModelCatalog
+}
+
+const ExploreModelItem = forwardRef<HTMLDivElement, Props>(({ model }, ref) => {
+  const [show, setShow] = useState(false)
+
+  const { availableVersions } = model
+  const { suitableModel, getMostSuitableModelVersion } =
+    useGetMostSuitableModelVersion()
+
+  useEffect(() => {
+    getMostSuitableModelVersion(availableVersions)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [availableVersions])
+
+  if (!suitableModel) {
+    return null
+  }
+
+  const { quantMethod, bits, maxRamRequired, usecase } = suitableModel
+
+  return (
+    <div
+      ref={ref}
+      className="mb-4 flex flex-col rounded-md border border-border bg-background/60"
+    >
+      <ExploreModelItemHeader
+        suitableModel={suitableModel}
+        exploreModel={model}
+      />
+      <div className="flex flex-col p-4">
+        <div className="mb-4 flex flex-col gap-1">
+          <span className="font-semibold">About</span>
+          <p>{model.longDescription}</p>
+        </div>
+
+        <div className="mb-4 flex space-x-6 border-b border-border pb-4">
+          <div>
+            <span className="font-semibold">Author</span>
+            <p className="mt-1 font-medium">{model.author}</p>
+          </div>
+          <div>
+            <span className="mb-1 font-semibold">Compatibility</span>
+            <div className="mt-1 flex gap-2">
+              <Badge themes="secondary" className="line-clamp-1 max-w-[400px]">
+                {usecase}
+              </Badge>
+              <Badge themes="secondary" className="line-clamp-1">
+                {toGigabytes(maxRamRequired)} RAM required
+              </Badge>
+            </div>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-3 items-center gap-4">
+          <div>
+            <span className="font-semibold">Version</span>
+            <div className="mt-2 flex space-x-2">
+              <Badge themes="outline">v{model.version}</Badge>
+              {quantMethod && <Badge themes="outline">{quantMethod}</Badge>}
+              <Badge themes="outline">{`${bits} Bits`}</Badge>
+            </div>
+          </div>
+          <div>
+            <span className="font-semibold">Release Date</span>
+            <p className="mt-1 ">{displayDate(model.releaseDate)}</p>
+          </div>
+          <div>
+            <span className="font-semibold">Tags</span>
+            <div className="mt-2 flex space-x-2">
+              {model.tags.map((tag, i) => (
+                <Badge key={i} themes="outline">
+                  {tag}
+                </Badge>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {model.availableVersions?.length > 0 && (
+          <div className="mt-5 w-full rounded-md border border-border bg-background p-2">
+            <button onClick={() => setShow(!show)} className="w-full">
+              {!show
+                ? '+ Show Available Versions'
+                : '- Collapse Available Versions'}
+            </button>
+
+            {show && (
+              <ModelVersionList
+                model={model}
+                versions={model.availableVersions}
+                recommendedVersion={suitableModel?._id ?? ''}
+              />
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+})
+
+export default ExploreModelItem
diff --git a/web/screens/ExploreModels/ExploreModelItemHeader/index.tsx b/web/screens/ExploreModels/ExploreModelItemHeader/index.tsx
new file mode 100644
index 000000000..fd4babfd3
--- /dev/null
+++ b/web/screens/ExploreModels/ExploreModelItemHeader/index.tsx
@@ -0,0 +1,108 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useCallback, useEffect, useMemo } from 'react'
+
+import { ModelCatalog, ModelVersion } from '@janhq/core/lib/types'
+import { Badge, Button } from '@janhq/uikit'
+
+import { atom, useAtomValue } from 'jotai'
+
+import ModalCancelDownload from '@/containers/ModalCancelDownload'
+
+import { MainViewState } from '@/constants/screens'
+
+import { ModelPerformance, TagType } from '@/constants/tagType'
+
+import useDownloadModel from '@/hooks/useDownloadModel'
+import { useDownloadState } from '@/hooks/useDownloadState'
+import { useGetDownloadedModels } from '@/hooks/useGetDownloadedModels'
+import useGetPerformanceTag from '@/hooks/useGetPerformanceTag'
+import { useMainViewState } from '@/hooks/useMainViewState'
+
+import { toGigabytes } from '@/utils/converter'
+
+type Props = {
+  suitableModel: ModelVersion
+  exploreModel: ModelCatalog
+}
+
+const ExploreModelItemHeader: React.FC<Props> = ({
+  suitableModel,
+  exploreModel,
+}) => {
+  const { downloadModel } = useDownloadModel()
+  const { downloadedModels } = useGetDownloadedModels()
+  const { modelDownloadStateAtom, downloadStates } = useDownloadState()
+  const { performanceTag, title, getPerformanceForModel } =
+    useGetPerformanceTag()
+  const downloadAtom = useMemo(
+    () => atom((get) => get(modelDownloadStateAtom)[suitableModel._id]),
+    [suitableModel._id]
+  )
+  const downloadState = useAtomValue(downloadAtom)
+  const { setMainViewState } = useMainViewState()
+
+  useEffect(() => {
+    getPerformanceForModel(suitableModel)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [suitableModel])
+
+  const onDownloadClick = useCallback(() => {
+    downloadModel(exploreModel, suitableModel)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [exploreModel, suitableModel])
+
+  const isDownloaded =
+    downloadedModels.find((model) => model._id === suitableModel._id) != null
+
+  let downloadButton = (
+    <Button onClick={() => onDownloadClick()}>
+      {suitableModel.size
+        ? `Download (${toGigabytes(suitableModel.size)})`
+        : 'Download'}
+    </Button>
+  )
+
+  if (isDownloaded) {
+    downloadButton = (
+      <Button
+        onClick={() => {
+          setMainViewState(MainViewState.MyModels)
+        }}
+      >
+        View Downloaded Model
+      </Button>
+    )
+  }
+
+  if (downloadState != null && downloadStates.length > 0) {
+    downloadButton = <ModalCancelDownload suitableModel={suitableModel} />
+  }
+
+  const renderBadge = (performance: TagType) => {
+    switch (performance) {
+      case ModelPerformance.PerformancePositive:
+        return <Badge themes="success">{title}</Badge>
+
+      case ModelPerformance.PerformanceNeutral:
+        return <Badge themes="secondary">{title}</Badge>
+
+      case ModelPerformance.PerformanceNegative:
+        return <Badge themes="danger">{title}</Badge>
+
+      default:
+        break
+    }
+  }
+
+  return (
+    <div className="flex items-center justify-between rounded-t-md border-b border-border bg-background/50 px-4 py-2">
+      <div className="flex items-center gap-2">
+        <span className="font-medium">{exploreModel.name}</span>
+        {performanceTag && renderBadge(performanceTag)}
+      </div>
+      {downloadButton}
+    </div>
+  )
+}
+
+export default ExploreModelItemHeader
diff --git a/web/screens/ExploreModels/ExploreModelList/index.tsx b/web/screens/ExploreModels/ExploreModelList/index.tsx
index 95d084df9..f17f62171 100644
--- a/web/screens/ExploreModels/ExploreModelList/index.tsx
+++ b/web/screens/ExploreModels/ExploreModelList/index.tsx
@@ -1,15 +1,16 @@
-import React, { useEffect } from 'react'
-import ExploreModelItem from '@/_components/ExploreModelItem'
-import useGetConfiguredModels from '@hooks/useGetConfiguredModels'
+import { ModelCatalog } from '@janhq/core/lib/types'
 
-const ExploreModelList: React.FC = () => {
-  const { models } = useGetConfiguredModels()
+import ExploreModelItem from '@/screens/ExploreModels/ExploreModelItem'
 
+type Props = {
+  models: ModelCatalog[]
+}
+
+export default function ExploreModelList(props: Props) {
+  const { models } = props
   return (
     <div className="relative h-full w-full flex-shrink-0">
       {models?.map((item) => <ExploreModelItem key={item._id} model={item} />)}
     </div>
   )
 }
-
-export default ExploreModelList
diff --git a/web/screens/ExploreModels/ModelVersionItem/index.tsx b/web/screens/ExploreModels/ModelVersionItem/index.tsx
new file mode 100644
index 000000000..35c9429e7
--- /dev/null
+++ b/web/screens/ExploreModels/ModelVersionItem/index.tsx
@@ -0,0 +1,96 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { useMemo } from 'react'
+
+import { ModelCatalog, ModelVersion } from '@janhq/core/lib/types'
+import { Button } from '@janhq/uikit'
+import { Badge } from '@janhq/uikit'
+import { atom, useAtomValue } from 'jotai'
+
+import ModalCancelDownload from '@/containers/ModalCancelDownload'
+
+import { MainViewState } from '@/constants/screens'
+
+import useDownloadModel from '@/hooks/useDownloadModel'
+
+import { useDownloadState } from '@/hooks/useDownloadState'
+import { useGetDownloadedModels } from '@/hooks/useGetDownloadedModels'
+
+import { useMainViewState } from '@/hooks/useMainViewState'
+
+import { toGigabytes } from '@/utils/converter'
+
+type Props = {
+  model: ModelCatalog
+  modelVersion: ModelVersion
+  isRecommended: boolean
+}
+
+const ModelVersionItem: React.FC<Props> = ({ model, modelVersion }) => {
+  const { downloadModel } = useDownloadModel()
+  const { downloadedModels } = useGetDownloadedModels()
+  const { setMainViewState } = useMainViewState()
+  const isDownloaded =
+    downloadedModels.find((model) => model._id === modelVersion._id) != null
+
+  const { modelDownloadStateAtom, downloadStates } = useDownloadState()
+
+  const downloadAtom = useMemo(
+    () => atom((get) => get(modelDownloadStateAtom)[modelVersion._id ?? '']),
+    [modelVersion._id]
+  )
+  const downloadState = useAtomValue(downloadAtom)
+
+  const onDownloadClick = () => {
+    downloadModel(model, modelVersion)
+  }
+
+  let downloadButton = (
+    <Button themes="outline" size="sm" onClick={() => onDownloadClick()}>
+      Download
+    </Button>
+  )
+
+  if (isDownloaded) {
+    downloadButton = (
+      <Button
+        themes="outline"
+        size="sm"
+        onClick={() => {
+          setMainViewState(MainViewState.MyModels)
+        }}
+      >
+        View Downloaded Model
+      </Button>
+    )
+  }
+
+  if (downloadState != null && downloadStates.length > 0) {
+    downloadButton = (
+      <ModalCancelDownload suitableModel={modelVersion} isFromList />
+    )
+  }
+
+  const { maxRamRequired, usecase } = modelVersion
+
+  return (
+    <div className="flex items-center justify-between gap-4 border-t border-border pb-3 pl-3 pr-4 pt-3 first:border-t-0">
+      <div className="flex items-center gap-2">
+        <span className="mb-4 line-clamp-1 flex-1">{modelVersion.name}</span>
+      </div>
+      <div className="flex items-center gap-4">
+        <div className="flex justify-end gap-2">
+          <Badge themes="secondary" className="line-clamp-1 max-w-[240px]">
+            {usecase}
+          </Badge>
+          <Badge themes="secondary" className="line-clamp-1 ">{`${toGigabytes(
+            maxRamRequired
+          )} RAM required`}</Badge>
+          <Badge themes="secondary">{toGigabytes(modelVersion.size)}</Badge>
+        </div>
+        {downloadButton}
+      </div>
+    </div>
+  )
+}
+
+export default ModelVersionItem
diff --git a/web/app/_components/ModelVersionList/index.tsx b/web/screens/ExploreModels/ModelVersionList/index.tsx
similarity index 82%
rename from web/app/_components/ModelVersionList/index.tsx
rename to web/screens/ExploreModels/ModelVersionList/index.tsx
index 8364cd088..0050bee91 100644
--- a/web/app/_components/ModelVersionList/index.tsx
+++ b/web/screens/ExploreModels/ModelVersionList/index.tsx
@@ -1,18 +1,18 @@
-import React from 'react'
-import ModelVersionItem from '../ModelVersionItem'
 import { ModelCatalog, ModelVersion } from '@janhq/core/lib/types'
 
+import ModelVersionItem from '../ModelVersionItem'
+
 type Props = {
   model: ModelCatalog
   versions: ModelVersion[]
   recommendedVersion: string
 }
 
-const ModelVersionList: React.FC<Props> = ({
+export default function ModelVersionList({
   model,
   versions,
   recommendedVersion,
-}) => {
+}: Props) {
   return (
     <div className="pt-4">
       {versions.map((item) => (
@@ -26,5 +26,3 @@ const ModelVersionList: React.FC<Props> = ({
     </div>
   )
 }
-
-export default ModelVersionList
diff --git a/web/screens/ExploreModels/index.tsx b/web/screens/ExploreModels/index.tsx
index 634cc6378..c019d0664 100644
--- a/web/screens/ExploreModels/index.tsx
+++ b/web/screens/ExploreModels/index.tsx
@@ -1,24 +1,23 @@
-import React, { Fragment, useEffect } from 'react'
-import ExploreModelList from '@screens/ExploreModels/ExploreModelList'
-import useGetConfiguredModels from '@hooks/useGetConfiguredModels'
-import Loader from '@containers/Loader'
+import { ScrollArea } from '@janhq/uikit'
+
+import Loader from '@/containers/Loader'
+
+import { useGetConfiguredModels } from '@/hooks/useGetConfiguredModels'
+
+import ExploreModelList from './ExploreModelList'
 
 const ExploreModelsScreen = () => {
-  const { loading } = useGetConfiguredModels()
+  const { loading, models } = useGetConfiguredModels()
+  if (loading) return <Loader description="loading ..." />
 
   return (
     <div className="flex h-full w-full overflow-y-auto">
-      <div className="h-full w-full p-5">
-        {loading ? (
-          <Loader />
-        ) : (
-          <Fragment>
-            <h1 className="text-lg font-semibold">Explore Models</h1>
-            <div className="mt-5 h-full">
-              <ExploreModelList />
-            </div>
-          </Fragment>
-        )}
+      <div className="h-full w-full p-4">
+        <div className="h-full" data-test-id="testid-explore-models">
+          <ScrollArea>
+            <ExploreModelList models={models} />
+          </ScrollArea>
+        </div>
       </div>
     </div>
   )
diff --git a/web/screens/MyModels/BlankState/index.tsx b/web/screens/MyModels/BlankState/index.tsx
new file mode 100644
index 000000000..331be39db
--- /dev/null
+++ b/web/screens/MyModels/BlankState/index.tsx
@@ -0,0 +1,77 @@
+import { Button } from '@janhq/uikit'
+import {
+  Modal,
+  ModalTrigger,
+  ModalContent,
+  ModalHeader,
+  ModalTitle,
+  Progress,
+} from '@janhq/uikit'
+import { DatabaseIcon } from 'lucide-react'
+
+import { MainViewState } from '@/constants/screens'
+
+import { useDownloadState } from '@/hooks/useDownloadState'
+import { useMainViewState } from '@/hooks/useMainViewState'
+
+import { formatDownloadPercentage } from '@/utils/converter'
+
+export default function BlankStateMyModel() {
+  const { setMainViewState } = useMainViewState()
+  const { downloadStates } = useDownloadState()
+
+  return (
+    <div className="flex h-full items-center justify-center px-4">
+      <div className="text-center">
+        <DatabaseIcon size={32} className="mx-auto text-muted-foreground" />
+        <div className="mt-4">
+          <h1 className="text-xl font-bold leading-snug">{`Ups, You don't have a model.`}</h1>
+          <p className="mt-1 text-base">
+            {downloadStates.length > 0
+              ? `Downloading model ... `
+              : `let’s download your first model`}
+          </p>
+          {downloadStates?.length > 0 && (
+            <Modal>
+              <ModalTrigger asChild>
+                <Button themes="outline" className="mr-2 mt-6">
+                  <span>{downloadStates.length} Downloading model</span>
+                </Button>
+              </ModalTrigger>
+              <ModalContent>
+                <ModalHeader>
+                  <ModalTitle>Downloading model</ModalTitle>
+                </ModalHeader>
+
+                {downloadStates.map((item, i) => {
+                  return (
+                    <div className="pt-2" key={i}>
+                      <Progress
+                        className="mb-2 h-2"
+                        value={
+                          formatDownloadPercentage(item?.percent, {
+                            hidePercentage: true,
+                          }) as number
+                        }
+                      />
+                      <div className="flex items-center justify-between">
+                        <p>{item?.fileName}</p>
+                        <span>{formatDownloadPercentage(item?.percent)}</span>
+                      </div>
+                    </div>
+                  )
+                })}
+              </ModalContent>
+            </Modal>
+          )}
+          <Button
+            className="mt-6"
+            onClick={() => setMainViewState(MainViewState.ExploreModels)}
+          >
+            Explore Models
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/web/screens/MyModels/index.tsx b/web/screens/MyModels/index.tsx
index 984f14987..3f667b675 100644
--- a/web/screens/MyModels/index.tsx
+++ b/web/screens/MyModels/index.tsx
@@ -1,83 +1,180 @@
-import React, { Fragment } from 'react'
-import { useSetAtom } from 'jotai'
-import { Button } from '@uikit'
-import { modelDownloadStateAtom } from '@helpers/atoms/DownloadState.atom'
-import DownloadedModelTable from '@/_components/DownloadedModelTable'
-import { useAtomValue } from 'jotai'
-import { useGetDownloadedModels } from '@hooks/useGetDownloadedModels'
-import { formatDownloadPercentage } from '@utils/converter'
-import { LayoutGrid } from 'lucide-react'
+import { Fragment } from 'react'
+
 import {
-  setMainViewStateAtom,
-  MainViewState,
-} from '@helpers/atoms/MainView.atom'
+  Badge,
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Button,
+  Modal,
+  ModalTrigger,
+  ScrollArea,
+  ModalClose,
+  ModalFooter,
+  ModalContent,
+  ModalHeader,
+  ModalTitle,
+} from '@janhq/uikit'
+
+import { MainViewState } from '@/constants/screens'
+
+import { useActiveModel } from '@/hooks/useActiveModel'
+import useDeleteModel from '@/hooks/useDeleteModel'
+import { useDownloadState } from '@/hooks/useDownloadState'
+import { useGetDownloadedModels } from '@/hooks/useGetDownloadedModels'
+
+import { useMainViewState } from '@/hooks/useMainViewState'
+
+import BlankStateMyModel from '@/screens/MyModels/BlankState'
+
+import { toGigabytes } from '@/utils/converter'
 
 const MyModelsScreen = () => {
   const { downloadedModels } = useGetDownloadedModels()
-  const setMainViewState = useSetAtom(setMainViewStateAtom)
-  const modelDownloadStates = useAtomValue(modelDownloadStateAtom)
+  const { downloadStates } = useDownloadState()
+  const { setMainViewState } = useMainViewState()
+  const { deleteModel } = useDeleteModel()
 
-  const downloadStates: DownloadState[] = []
-  for (const [, value] of Object.entries(modelDownloadStates)) {
-    downloadStates.push(value)
+  const { activeModel, startModel, stopModel, stateModel } = useActiveModel()
+
+  if (downloadedModels.length === 0) return <BlankStateMyModel />
+
+  const onModelActionClick = (modelId: string) => {
+    if (activeModel && activeModel._id === modelId) {
+      stopModel(modelId)
+    } else {
+      startModel(modelId)
+    }
   }
 
-  const isDownloadingFirstModel = downloadStates.length > 0
+  return (
+    <div className="flex h-full w-full">
+      <ScrollArea className="h-full w-full">
+        <div className="p-4" data-test-id="testid-my-models">
+          <div className="grid grid-cols-2 gap-4 lg:grid-cols-3">
+            {downloadedModels.map((model, i) => {
+              const isActiveModel = stateModel.model === model._id
+              return (
+                <div
+                  key={i}
+                  className="rounded-lg border border-border bg-background p-4"
+                >
+                  <Fragment>
+                    <div className="flex items-start gap-x-4">
+                      <div className="inline-flex rounded-full border border-border p-1">
+                        <Avatar className="h-8 w-8">
+                          <AvatarImage
+                            src={model.avatarUrl}
+                            alt={model.author}
+                          />
+                          <AvatarFallback>
+                            {model.author.charAt(0)}
+                          </AvatarFallback>
+                        </Avatar>
+                      </div>
+                      <div>
+                        <h2 className="mb-1 font-medium capitalize">
+                          {model.author}
+                        </h2>
+                        <p className="line-clamp-1">{model.productName}</p>
+                        <div className="mt-2 flex items-center gap-2">
+                          <Badge themes="secondary">v{model.version}</Badge>
+                          <Badge themes="outline">GGUF</Badge>
+                          <Badge themes="outline">
+                            {toGigabytes(model.size)}
+                          </Badge>
+                        </div>
+                        <p className="mt-2 line-clamp-2 break-all">
+                          {model.longDescription}
+                        </p>
+                      </div>
+                    </div>
+                    <div className="mt-4 flex items-center justify-center gap-x-2 gap-y-4 border-t border-border pt-4">
+                      <Modal>
+                        <ModalTrigger asChild>
+                          <Button themes="ghost" block>
+                            Delete
+                          </Button>
+                        </ModalTrigger>
+                        <ModalContent>
+                          <ModalHeader>
+                            <ModalTitle>Are you sure?</ModalTitle>
+                          </ModalHeader>
+                          <p className="leading-relaxed">
+                            Delete model {model.productName}, v{model.version},{' '}
+                            {toGigabytes(model.size)}.
+                          </p>
+                          <ModalFooter>
+                            <div className="flex gap-x-2">
+                              <ModalClose asChild>
+                                <Button themes="ghost">No</Button>
+                              </ModalClose>
+                              <ModalClose asChild>
+                                <Button
+                                  themes="danger"
+                                  onClick={() =>
+                                    setTimeout(() => {
+                                      deleteModel(model)
+                                    }, 500)
+                                  }
+                                >
+                                  Yes
+                                </Button>
+                              </ModalClose>
+                            </div>
+                          </ModalFooter>
+                        </ModalContent>
+                      </Modal>
+                      <Button
+                        block
+                        themes={
+                          isActiveModel && stateModel.state === 'stop'
+                            ? 'danger'
+                            : 'primary'
+                        }
+                        className="capitalize"
+                        loading={isActiveModel ? stateModel.loading : false}
+                        onClick={() => onModelActionClick(model._id)}
+                      >
+                        {isActiveModel ? stateModel.state : 'Start'}
+                        &nbsp;Model
+                      </Button>
+                    </div>
+                  </Fragment>
+                </div>
+              )
+            })}
 
-  if (!downloadedModels || downloadedModels.length === 0)
-    return (
-      <div className="flex h-full items-center justify-center px-4">
-        <div className="text-center">
-          <LayoutGrid size={32} className="mx-auto text-accent/50" />
-          <div className="mt-4">
-            {isDownloadingFirstModel ? (
-              <div className="relative">
-                <div className="mt-4">
-                  <h1 className="text-2xl font-bold leading-snug">
-                    Donwloading your first model
-                  </h1>
-                  <p className="mt-1 text-muted-foreground">
-                    {downloadStates[0].fileName} -{' '}
-                    {formatDownloadPercentage(downloadStates[0].percent)}
+            <div className="rounded-lg border border-border bg-background p-4 hover:border-primary/60">
+              <div className="flex h-full flex-col justify-between">
+                <div>
+                  <h2 className="text-lg font-medium">Download more model?</h2>
+                  <p className="mt-2 leading-relaxed">
+                    You have <span>{downloadedModels.length}</span> model(s)
+                    downloaded.&nbsp;
+                    {downloadStates.length > 0 && (
+                      <span>
+                        And {downloadStates.length} downloading progress.
+                      </span>
+                    )}
                   </p>
                 </div>
+                <div className="mt-4 flex items-end justify-center gap-4 border-t border-border pt-4">
+                  <Button
+                    themes="secondary"
+                    block
+                    onClick={() =>
+                      setMainViewState(MainViewState.ExploreModels)
+                    }
+                  >
+                    Explore Models
+                  </Button>
+                </div>
               </div>
-            ) : (
-              <Fragment>
-                <h1 className="text-2xl font-bold leading-snug">{`Ups, You don't have a model.`}</h1>
-                <p className="mt-1 text-base text-muted-foreground">{`let’s download your first model`}</p>
-                <Button
-                  className="mt-4"
-                  themes="accent"
-                  onClick={() => setMainViewState(MainViewState.ExploreModel)}
-                >
-                  Explore Models
-                </Button>
-              </Fragment>
-            )}
+            </div>
           </div>
         </div>
-      </div>
-    )
-
-  return (
-    <div className="flex h-full w-full overflow-y-auto">
-      <div className="w-full p-5">
-        <h1
-          data-testid="testid-mymodels-header"
-          className="text-lg font-semibold"
-        >
-          My Models
-        </h1>
-        <p className="mt-2 text-gray-600 dark:text-gray-400">
-          You have <span>{downloadedModels.length}</span> models downloaded
-        </p>
-        <div>
-          {/* <ActiveModelTable /> */}
-          {/* <DownloadingModelTable /> */}
-          <DownloadedModelTable />
-        </div>
-      </div>
+      </ScrollArea>
     </div>
   )
 }
diff --git a/web/screens/Settings/Advanced/index.tsx b/web/screens/Settings/Advanced/index.tsx
index 77fbf8c58..67de2630e 100644
--- a/web/screens/Settings/Advanced/index.tsx
+++ b/web/screens/Settings/Advanced/index.tsx
@@ -1,23 +1,25 @@
 'use client'
 
-import React, { useContext, useRef } from 'react'
-import { Button, Switch } from '@uikit'
-import { FeatureToggleContext } from '@helpers/FeatureToggleWrapper'
+import { useContext } from 'react'
+
+import { Switch, Button } from '@janhq/uikit'
+
+import { FeatureToggleContext } from '@/context/FeatureToggle'
 
 const Advanced = () => {
   const { experimentalFeatureEnabed, setExperimentalFeatureEnabled } =
     useContext(FeatureToggleContext)
-  const fileInputRef = useRef<HTMLInputElement | null>(null)
+
   return (
     <div className="block w-full">
-      <div className="flex w-full items-start justify-between border-b border-gray-200 py-4 first:pt-0 last:border-none dark:border-gray-800">
+      <div className="flex w-full items-start justify-between border-b border-border py-4 first:pt-0 last:border-none">
         <div className="w-4/5 flex-shrink-0 space-y-1.5">
           <div className="flex gap-x-2">
             <h6 className="text-sm font-semibold capitalize">
               Experimental Mode
             </h6>
           </div>
-          <p className="whitespace-pre-wrap leading-relaxed text-gray-600 dark:text-gray-400">
+          <p className="whitespace-pre-wrap leading-relaxed">
             Enable experimental features that may be unstable or not fully
             tested.
           </p>
@@ -34,26 +36,24 @@ const Advanced = () => {
         />
       </div>
       {window.electronAPI && (
-        <div className="flex w-full items-start justify-between border-b border-gray-200 py-4 first:pt-0 last:border-none dark:border-gray-800">
+        <div className="flex w-full items-start justify-between border-b border-border py-4 first:pt-0 last:border-none">
           <div className="w-4/5 flex-shrink-0 space-y-1.5">
             <div className="flex gap-x-2">
               <h6 className="text-sm font-semibold capitalize">
                 Open App Directory
               </h6>
             </div>
-            <p className="whitespace-pre-wrap leading-relaxed text-gray-600 dark:text-gray-400">
+            <p className="whitespace-pre-wrap leading-relaxed">
               Open the directory where the app data is located.
             </p>
           </div>
-          <div>
-            <Button
-              size="sm"
-              themes="outline"
-              onClick={() => window.electronAPI.openAppDirectory()}
-            >
-              Open
-            </Button>
-          </div>
+          <Button
+            size="sm"
+            themes="secondary"
+            onClick={() => window.electronAPI.openAppDirectory()}
+          >
+            Open
+          </Button>
         </div>
       )}
     </div>
diff --git a/web/screens/Settings/Appearance/toggleAccent.tsx b/web/screens/Settings/Appearance/TogglePrimary.tsx
similarity index 50%
rename from web/screens/Settings/Appearance/toggleAccent.tsx
rename to web/screens/Settings/Appearance/TogglePrimary.tsx
index 5b5fb0de7..d75117269 100644
--- a/web/screens/Settings/Appearance/toggleAccent.tsx
+++ b/web/screens/Settings/Appearance/TogglePrimary.tsx
@@ -1,43 +1,39 @@
-import React from 'react'
-import { useUserConfigs } from '@hooks/useUserConfigs'
 import { motion as m } from 'framer-motion'
 import { twMerge } from 'tailwind-merge'
 
-type AccentOption = {
-  value: Accent
+import { useUserConfigs } from '@/hooks/useUserConfigs'
+
+type PrimaryColorOption = {
+  value: PrimaryColor
   class: string
 }
 
-const accentOptions: AccentOption[] = [
+const primaryColorOptions: PrimaryColorOption[] = [
   {
-    value: 'accent-blue',
+    value: 'primary-blue',
     class: 'bg-blue-500',
   },
   {
-    value: 'accent-red',
-    class: 'bg-red-500',
+    value: 'primary-purple',
+    class: 'bg-purple-500',
   },
   {
-    value: 'accent-green',
+    value: 'primary-green',
     class: 'bg-green-500',
   },
-  {
-    value: 'accent-orange',
-    class: 'bg-orange-500',
-  },
 ]
 
-const ToggleAccent = () => {
+export default function TogglePrimary() {
   const [config, setUserConfig] = useUserConfigs()
 
-  const handleChangeAccent = (accent: Accent) => {
-    setUserConfig({ ...config, accent })
+  const handleChangeAccent = (primaryColor: PrimaryColor) => {
+    setUserConfig({ ...config, primaryColor })
   }
 
   return (
     <div className="flex items-center">
-      {accentOptions.map((option, i) => {
-        const isActive = config.accent === option.value
+      {primaryColorOptions.map((option, i) => {
+        const isActive = config.primaryColor === option.value
         return (
           <div
             className="relative flex h-6 w-6 items-center justify-center"
@@ -49,8 +45,8 @@ const ToggleAccent = () => {
             />
             {isActive ? (
               <m.div
-                className="border-accent/50 bg-accent/20 absolute inset-0 h-full w-full rounded-full border"
-                layoutId="active-accent-menu"
+                className="absolute inset-0 h-full w-full rounded-full border border-primary/50 bg-primary/20"
+                layoutId="active-primary-menu"
               />
             ) : null}
           </div>
@@ -59,5 +55,3 @@ const ToggleAccent = () => {
     </div>
   )
 }
-
-export default ToggleAccent
diff --git a/web/screens/Settings/Appearance/toggleTheme.tsx b/web/screens/Settings/Appearance/ToggleTheme.tsx
similarity index 80%
rename from web/screens/Settings/Appearance/toggleTheme.tsx
rename to web/screens/Settings/Appearance/ToggleTheme.tsx
index 864b191c2..ff1c1c7ac 100644
--- a/web/screens/Settings/Appearance/toggleTheme.tsx
+++ b/web/screens/Settings/Appearance/ToggleTheme.tsx
@@ -1,24 +1,11 @@
-'use client'
-
-import * as React from 'react'
 import { useTheme } from 'next-themes'
-import { twMerge } from 'tailwind-merge'
 
 import { motion as m } from 'framer-motion'
+import { twMerge } from 'tailwind-merge'
 
-const themeMenus = [
-  {
-    name: 'light',
-  },
-  {
-    name: 'dark',
-  },
-  {
-    name: 'system',
-  },
-]
+const themeMenus = [{ name: 'light' }, { name: 'dark' }, { name: 'system' }]
 
-const ToggleTheme = () => {
+export default function ToggleTheme() {
   const { theme: currentTheme, setTheme } = useTheme()
 
   const handeleNativeTheme = async (val: string) => {
@@ -52,7 +39,7 @@ const ToggleTheme = () => {
             </button>
             {isActive ? (
               <m.div
-                className="border-accent/50 bg-accent/20 absolute inset-0 h-full w-full rounded-md border"
+                className="absolute inset-0 h-full w-full rounded-md border border-primary/50 bg-primary/20"
                 layoutId="active-theme-menu"
               />
             ) : null}
@@ -62,5 +49,3 @@ const ToggleTheme = () => {
     </div>
   )
 }
-
-export default ToggleTheme
diff --git a/web/screens/Settings/Appearance/index.tsx b/web/screens/Settings/Appearance/index.tsx
index 709a5eb5e..6a5619359 100644
--- a/web/screens/Settings/Appearance/index.tsx
+++ b/web/screens/Settings/Appearance/index.tsx
@@ -1,33 +1,23 @@
-'use client'
+import ToggleAccent from '@/screens/Settings/Appearance/TogglePrimary'
+import ToggleTheme from '@/screens/Settings/Appearance/ToggleTheme'
 
-import React from 'react'
-
-import ToggleTheme from './toggleTheme'
-import ToggleAccent from './toggleAccent'
-
-const AppearanceOptions = () => {
+export default function AppearanceOptions() {
   return (
     <div className="block w-full">
-      <div className="border-border flex w-full items-center justify-between border-b py-3 first:pt-0 last:border-none">
+      <div className="flex w-full items-center justify-between border-b border-border py-3 first:pt-0 last:border-none">
         <div className="flex-shrink-0 space-y-1">
           <h6 className="text-sm font-semibold capitalize">Themes</h6>
-          <p className="leading-relaxed text-gray-600 dark:text-gray-400">
-            Choose your default theme.
-          </p>
+          <p className="leading-relaxed ">Choose your default theme.</p>
         </div>
         <ToggleTheme />
       </div>
-      <div className="border-border flex w-full items-center justify-between border-b py-3 first:pt-0 last:border-none">
+      <div className="flex w-full items-center justify-between border-b border-border py-3 first:pt-0 last:border-none">
         <div className="flex-shrink-0 space-y-1">
-          <h6 className="text-sm font-semibold capitalize">Accent color</h6>
-          <p className="leading-relaxed text-gray-600 dark:text-gray-400">
-            Choose your accent color.
-          </p>
+          <h6 className="text-sm font-semibold capitalize">Primary color</h6>
+          <p className="leading-relaxed ">Choose your primary color.</p>
         </div>
         <ToggleAccent />
       </div>
     </div>
   )
 }
-
-export default AppearanceOptions
diff --git a/web/screens/Settings/CorePlugins/PluginsCatalog.tsx b/web/screens/Settings/CorePlugins/PluginsCatalog/index.tsx
similarity index 78%
rename from web/screens/Settings/CorePlugins/PluginsCatalog.tsx
rename to web/screens/Settings/CorePlugins/PluginsCatalog/index.tsx
index b566c3f6a..8b107c2d6 100644
--- a/web/screens/Settings/CorePlugins/PluginsCatalog.tsx
+++ b/web/screens/Settings/CorePlugins/PluginsCatalog/index.tsx
@@ -1,19 +1,24 @@
-'use client'
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 
 import React, { useState, useEffect, useRef, useContext } from 'react'
-import { Button, Switch } from '@uikit'
-import Loader from '@containers/Loader'
-import { formatPluginsName } from '@utils/converter'
 
-import useGetAppVersion from '@hooks/useGetAppVersion'
-import { FeatureToggleContext } from '@helpers/FeatureToggleWrapper'
-import { pluginManager } from '@plugin/PluginManager'
+import { Switch, Button } from '@janhq/uikit'
+
+import Loader from '@/containers/Loader'
+
+import { FeatureToggleContext } from '@/context/FeatureToggle'
+
+import { useGetAppVersion } from '@/hooks/useGetAppVersion'
+
+import { formatPluginsName } from '@/utils/converter'
+
+import { pluginManager } from '@/plugin'
 
 const PluginCatalog = () => {
   const [activePlugins, setActivePlugins] = useState<any[]>([])
   const [pluginCatalog, setPluginCatalog] = useState<any[]>([])
   const [isLoading, setIsLoading] = useState<boolean>(false)
-  const experimentRef = useRef(null)
   const fileInputRef = useRef<HTMLInputElement | null>(null)
   const { version } = useGetAppVersion()
   const { experimentalFeatureEnabed } = useContext(FeatureToggleContext)
@@ -33,7 +38,7 @@ const PluginCatalog = () => {
           setPluginCatalog(data.default)
       }
     )
-  }, [version])
+  }, [experimentalFeatureEnabed, version])
 
   /**
    * Fetches the active plugins and their preferences from the `plugins` and `preferences` modules.
@@ -70,6 +75,7 @@ const PluginCatalog = () => {
    * If the uninstallation is successful, the application is relaunched using the `coreAPI.relaunch` function.
    * @param name - The name of the plugin to uninstall.
    */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const uninstall = async (name: string) => {
     // Send the filename of the to be uninstalled plugin
     // to the main process for removal
@@ -102,6 +108,8 @@ const PluginCatalog = () => {
     }
   }
 
+  if (isLoading) return <Loader description="Installing ..." />
+
   return (
     <div className="block w-full">
       {pluginCatalog
@@ -125,36 +133,38 @@ const PluginCatalog = () => {
           return (
             <div
               key={i}
-              className="flex w-full items-start justify-between border-b border-gray-200 py-4 first:pt-0 last:border-none dark:border-gray-800"
+              className="flex w-full items-start justify-between border-b border-border py-4 first:pt-0 last:border-none"
             >
               <div className="w-4/5 flex-shrink-0 space-y-1.5">
                 <div className="flex gap-x-2">
                   <h6 className="text-sm font-semibold capitalize">
                     {formatPluginsName(item.name)}
                   </h6>
-                  <p className="whitespace-pre-wrap font-semibold leading-relaxed text-gray-600 dark:text-gray-400">
+                  <p className="whitespace-pre-wrap font-semibold leading-relaxed ">
                     v{item.version}
                   </p>
                 </div>
-                <p className="whitespace-pre-wrap leading-relaxed text-gray-600 dark:text-gray-400">
+                <p className="whitespace-pre-wrap leading-relaxed ">
                   {item.description}
                 </p>
                 {isActivePlugin && (
-                  <p className="whitespace-pre-wrap leading-relaxed text-gray-600 dark:text-gray-400">
-                    Installed{' '}
-                    {hasUpdateVersionPlugins
-                      ? `v${installedPlugin.version}`
-                      : 'the latest version'}
-                  </p>
-                )}
-                {isActivePlugin && hasUpdateVersionPlugins && (
-                  <Button
-                    size="sm"
-                    themes="outline"
-                    onClick={() => downloadTarball(item.name)}
-                  >
-                    Update
-                  </Button>
+                  <div className="flex items-center gap-x-2">
+                    <p className="whitespace-pre-wrap leading-relaxed ">
+                      Installed{' '}
+                      {hasUpdateVersionPlugins
+                        ? `v${installedPlugin.version}`
+                        : 'the latest version'}
+                    </p>
+                    {hasUpdateVersionPlugins && (
+                      <Button
+                        size="sm"
+                        themes="secondary"
+                        onClick={() => downloadTarball(item.name)}
+                      >
+                        Update
+                      </Button>
+                    )}
+                  </div>
                 )}
               </div>
               {experimentalFeatureEnabed && (
@@ -173,14 +183,14 @@ const PluginCatalog = () => {
           )
         })}
       {/* Manual Installation */}
-      <div className="flex w-full items-start justify-between border-b border-gray-200 py-4 first:pt-0 last:border-none dark:border-gray-800">
+      <div className="flex w-full items-start justify-between border-b border-border py-4 first:pt-0 last:border-none">
         <div className="w-4/5 flex-shrink-0 space-y-1.5">
           <div className="flex gap-x-2">
             <h6 className="text-sm font-semibold capitalize">
               Manual Installation
             </h6>
           </div>
-          <p className="whitespace-pre-wrap leading-relaxed text-gray-600 dark:text-gray-400">
+          <p className="whitespace-pre-wrap leading-relaxed ">
             Select a plugin file to install (.tgz)
           </p>
         </div>
@@ -192,22 +202,14 @@ const PluginCatalog = () => {
             onChange={handleFileChange}
           />
           <Button
+            themes="secondary"
             size="sm"
-            themes="outline"
             onClick={() => fileInputRef.current?.click()}
           >
             Select
           </Button>
         </div>
       </div>
-      {isLoading && (
-        <div className="fixed inset-0 z-50 flex h-full items-center justify-center gap-y-4 rounded-lg bg-gray-950/90 text-gray-400 dark:backdrop-blur-sm">
-          <div className="space-y-16">
-            <Loader />
-            <p>Installing...</p>
-          </div>
-        </div>
-      )}
     </div>
   )
 }
diff --git a/web/screens/Settings/CorePlugins/PreferencePlugins/index.tsx b/web/screens/Settings/CorePlugins/PreferencePlugins/index.tsx
index 446b32988..a0d979998 100644
--- a/web/screens/Settings/CorePlugins/PreferencePlugins/index.tsx
+++ b/web/screens/Settings/CorePlugins/PreferencePlugins/index.tsx
@@ -1,46 +1,99 @@
-import React from 'react'
-
+/* eslint-disable @typescript-eslint/no-explicit-any */
 type Props = {
   pluginName: string
   preferenceValues: any
   preferenceItems: any
 }
 
-import { formatPluginsName } from '@utils/converter'
+import { useForm } from 'react-hook-form'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  Input,
+  FormLabel,
+  FormMessage,
+  Button,
+} from '@janhq/uikit'
+
+import * as z from 'zod'
+
+import { toaster } from '@/containers/Toast'
+
+import { formatPluginsName } from '@/utils/converter'
 
 const PreferencePlugins = (props: Props) => {
   const { pluginName, preferenceValues, preferenceItems } = props
 
+  const FormSchema = z.record(
+    z
+      .string({ required_error: 'Field is Required' })
+      .min(1, { message: 'Field is Required' })
+  )
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: preferenceValues.reduce(
+      (obj: any, item: { key: any; value: any }) =>
+        Object.assign(obj, { [item.key]: item.value }),
+      {}
+    ),
+  })
+
+  const onSubmit = async (values: z.infer<typeof FormSchema>) => {
+    for (const [key, value] of Object.entries(values)) {
+      // await preferences.set(pluginName, key, value)
+      // await execute(PluginService.OnPreferencesUpdate, {})
+    }
+    toaster({
+      title: formatPluginsName(pluginName),
+      description: 'Success update preferences',
+    })
+  }
+
   return (
-    <div>
-      <h6 className="mb-6 text-sm font-semibold capitalize">
+    <div className="mx-auto w-full lg:mt-10 lg:w-1/2">
+      <h6 className="mb-6 text-lg font-semibold capitalize">
         {formatPluginsName(pluginName)}
       </h6>
-
-      {preferenceItems
-        .filter((x: any) => x.pluginName === pluginName)
-        ?.map((e: any) => (
-          <div key={e.preferenceKey} className="mb-4 flex flex-col">
-            <div className="space-y-2">
-              <span className="">Setting:</span>
-              <span className="">{e.preferenceName}</span>
-            </div>
-            <span className="mt-1 text-muted-foreground">
-              {e.preferenceDescription}
-            </span>
-            <div className="mt-2 flex flex-row items-center space-x-4">
-              <input
-                className="block w-full rounded-md border-0 bg-background/80 py-1.5 text-xs shadow-sm ring-1 ring-inset ring-border placeholder:text-muted-foreground focus:ring-2 focus:ring-inset focus:ring-accent/50 sm:leading-6"
-                defaultValue={
-                  preferenceValues.filter(
-                    (v: any) => v.key === e.preferenceKey
-                  )[0]?.value
-                }
-                onChange={(event) => {}}
-              ></input>
-            </div>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+          {preferenceItems
+            .filter((x: any) => x.pluginName === pluginName)
+            ?.map((e: any) => (
+              <FormField
+                key={e.preferenceKey}
+                control={form.control}
+                name={e.preferenceKey}
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{e.preferenceName}</FormLabel>
+                    <FormDescription className="mb-2">
+                      {e.preferenceDescription}
+                    </FormDescription>
+                    <FormControl>
+                      <Input
+                        placeholder={`Enter your ${e.preferenceName}`}
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            ))}
+          <div className="pt-4">
+            <Button type="submit" block>
+              Submit
+            </Button>
           </div>
-        ))}
+        </form>
+      </Form>
     </div>
   )
 }
diff --git a/web/screens/Settings/index.tsx b/web/screens/Settings/index.tsx
index cc852a6a5..900ddef9b 100644
--- a/web/screens/Settings/index.tsx
+++ b/web/screens/Settings/index.tsx
@@ -1,24 +1,24 @@
-'use client'
-import React from 'react'
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
 import { useEffect, useState } from 'react'
 
+import { ScrollArea } from '@janhq/uikit'
 import { motion as m } from 'framer-motion'
 
-import AppearanceOptions from './Appearance'
-import PluginCatalog from './CorePlugins/PluginsCatalog'
-import PreferencePlugins from './CorePlugins/PreferencePlugins'
-
 import { twMerge } from 'tailwind-merge'
 
-import { formatPluginsName } from '@utils/converter'
+import Advanced from '@/screens/Settings/Advanced'
+import AppearanceOptions from '@/screens/Settings/Appearance'
+import PluginCatalog from '@/screens/Settings/CorePlugins/PluginsCatalog'
+import PreferencePlugins from '@/screens/Settings/CorePlugins/PreferencePlugins'
 
-import Advanced from './Advanced'
+import { formatPluginsName } from '@/utils/converter'
 
 const SettingsScreen = () => {
   const [activeStaticMenu, setActiveStaticMenu] = useState('Appearance')
+  const [menus, setMenus] = useState<any[]>([])
   const [preferenceItems, setPreferenceItems] = useState<any[]>([])
   const [preferenceValues, setPreferenceValues] = useState<any[]>([])
-  const [menus, setMenus] = useState<any[]>([])
 
   useEffect(() => {
     const menu = ['Appearance']
@@ -57,12 +57,10 @@ const SettingsScreen = () => {
   const preferencePlugins = preferenceItems
     .map((x) => x.pluginName)
     .filter((x, i) => {
-      return preferenceItems.map((x) => x.pluginName).indexOf(x) === i
+      //     return prefere/nceItems.map((x) => x.pluginName).indexOf(x) === i
     })
 
-  const [activePreferencePlugin, setActivePreferencePlugin] = useState(
-    preferencePlugins[0]
-  )
+  const [activePreferencePlugin, setActivePreferencePlugin] = useState('')
 
   const handleShowOptions = (menu: string) => {
     switch (menu) {
@@ -88,90 +86,89 @@ const SettingsScreen = () => {
 
   return (
     <div className="flex h-full">
-      <div className="flex h-full w-80 flex-shrink-0 flex-col overflow-y-auto border-r border-border">
-        <div className="p-5">
-          <h1 className="text-lg font-bold">Settings</h1>
-          <p
-            data-testid="testid-setting-description"
-            className="mt-2 text-gray-600 text-muted-foreground"
-          >
-            Manage your account settings
-          </p>
-          <div className="mt-5 flex-shrink-0">
-            <label className="font-bold uppercase text-muted-foreground">
-              Options
-            </label>
-            <div className="mt-1 font-semibold">
-              {menus.map((menu, i) => {
-                const isActive = activeStaticMenu === menu
-                return (
-                  <div key={i} className="relative block py-2">
-                    <button
-                      onClick={() => {
-                        setActiveStaticMenu(menu)
-                        setActivePreferencePlugin('')
-                      }}
-                      className="block w-full text-left"
-                    >
-                      <p className={twMerge(isActive && 'relative z-10')}>
-                        {menu}
-                      </p>
-                    </button>
-                    {isActive ? (
-                      <m.div
-                        className="absolute inset-0 -left-4 h-full w-[calc(100%+32px)] rounded-md bg-accent/20 p-2"
-                        layoutId="active-static-menu"
-                      />
-                    ) : null}
-                  </div>
-                )
-              })}
-            </div>
-          </div>
-
-          <div className="mt-5 flex-shrink-0">
-            {preferencePlugins.length > 0 && (
-              <label className="font-bold uppercase text-gray-500">
-                Core plugins
+      <div className="flex h-full w-64 flex-shrink-0 flex-col overflow-y-auto border-r border-border">
+        <ScrollArea className="h-full w-full">
+          <div className="p-4">
+            <div className="flex-shrink-0">
+              <label className="font-bold uppercase text-muted-foreground">
+                Options
               </label>
-            )}
-            <div className="mt-1 font-semibold">
-              {preferencePlugins.map((menu, i) => {
-                const isActive = activePreferencePlugin === menu
-                return (
-                  <div key={i} className="relative block py-2">
-                    <button
-                      onClick={() => {
-                        setActivePreferencePlugin(menu)
-                        setActiveStaticMenu('')
-                      }}
-                      className="block w-full text-left"
-                    >
-                      <p
-                        className={twMerge(
-                          'capitalize',
-                          isActive && 'relative z-10'
-                        )}
+              <div className="mt-2 font-medium">
+                {menus.map((menu, i) => {
+                  const isActive = activeStaticMenu === menu
+                  return (
+                    <div key={i} className="relative my-0.5 block py-1.5">
+                      <div
+                        onClick={() => {
+                          setActiveStaticMenu(menu)
+                          setActivePreferencePlugin('')
+                        }}
+                        className="block w-full cursor-pointer"
                       >
-                        {formatPluginsName(String(menu))}
-                      </p>
-                    </button>
-                    {isActive ? (
-                      <m.div
-                        className="absolute inset-0 -left-4 h-full w-[calc(100%+32px)] rounded-md  bg-accent/20 p-2"
-                        layoutId="active-static-menu"
-                      />
-                    ) : null}
-                  </div>
-                )
-              })}
+                        <span className={twMerge(isActive && 'relative z-10')}>
+                          {menu}
+                        </span>
+                      </div>
+                      {isActive && (
+                        <m.div
+                          className="absolute inset-0 -left-3 h-full w-[calc(100%+24px)] rounded-md bg-primary/50"
+                          layoutId="active-static-menu"
+                        />
+                      )}
+                    </div>
+                  )
+                })}
+              </div>
+            </div>
+
+            <div className="mt-5 flex-shrink-0">
+              {preferencePlugins.length > 0 && (
+                <label className="font-bold uppercase text-muted-foreground">
+                  Core plugins
+                </label>
+              )}
+              <div className="mt-2 font-medium">
+                {preferencePlugins.map((menu, i) => {
+                  const isActive = activePreferencePlugin === menu
+                  return (
+                    <div key={i} className="relative my-0.5 block py-1.5">
+                      <div
+                        onClick={() => {
+                          setActivePreferencePlugin(menu)
+                          setActiveStaticMenu('')
+                        }}
+                        className="block w-full cursor-pointer"
+                      >
+                        <span
+                          className={twMerge(
+                            'capitalize',
+                            isActive && 'relative z-10'
+                          )}
+                        >
+                          {formatPluginsName(String(menu))}
+                        </span>
+                      </div>
+                      {isActive ? (
+                        <m.div
+                          className="absolute inset-0 -left-3 h-full w-[calc(100%+24px)] rounded-md bg-primary/50"
+                          layoutId="active-static-menu"
+                        />
+                      ) : null}
+                    </div>
+                  )
+                })}
+              </div>
             </div>
           </div>
-        </div>
+        </ScrollArea>
       </div>
 
-      <div className="w-full overflow-y-auto bg-background/50 p-5">
-        {handleShowOptions(activeStaticMenu || activePreferencePlugin)}
+      <div className="h-full w-full bg-background/50">
+        <ScrollArea className="h-full w-full">
+          <div className="p-4">
+            {handleShowOptions(activeStaticMenu || activePreferencePlugin)}
+          </div>
+        </ScrollArea>
       </div>
     </div>
   )
diff --git a/web/screens/Welcome/index.tsx b/web/screens/Welcome/index.tsx
index cba1d8873..3a0a2a65c 100644
--- a/web/screens/Welcome/index.tsx
+++ b/web/screens/Welcome/index.tsx
@@ -1,35 +1,18 @@
-import React from 'react'
-import CompactLogo from '@containers/Logo/CompactLogo'
-import { useSetAtom } from 'jotai'
-import {
-  setMainViewStateAtom,
-  MainViewState,
-} from '@helpers/atoms/MainView.atom'
-
-import { Button } from '@uikit'
+import LogoMark from '@/containers/Brand/Logo/Mark'
 
 const WelcomeScreen = () => {
-  const setMainViewState = useSetAtom(setMainViewStateAtom)
-
   return (
     <div className="flex h-full items-center justify-center px-4">
       <div className="text-center">
-        <CompactLogo width={40} height={40} />
-        <h1
-          data-testid="testid-welcome-title"
-          className="text-2xl font-bold leading-snug"
-        >
+        <LogoMark
+          className="mx-auto mb-4 animate-wave"
+          width={56}
+          height={56}
+        />
+        <h1 data-testid="testid-welcome-title" className="text-2xl font-bold">
           Welcome to Jan
         </h1>
-        <p className="text-base tracking-wide text-gray-600 dark:text-gray-400">{`let’s download your first model`}</p>
-        <div className="mt-4">
-          <Button
-            themes="accent"
-            onClick={() => setMainViewState(MainViewState.ExploreModel)}
-          >
-            Explore Models
-          </Button>
-        </div>
+        <p className="">{`let’s download your first model`}</p>
       </div>
     </div>
   )
diff --git a/web/services/cloudNativeService.ts b/web/services/cloudNativeService.ts
index 777acf93b..40cd05c1f 100644
--- a/web/services/cloudNativeService.ts
+++ b/web/services/cloudNativeService.ts
@@ -1,54 +1,77 @@
-import { toast } from 'react-toastify';
-const API_BASE_PATH: string = "/api/v1";
+/* eslint-disable @typescript-eslint/naming-convention */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { toast } from 'react-toastify'
+const API_BASE_PATH: string = '/api/v1'
 
 export function openExternalUrl(url: string) {
-  window?.open(url, '_blank');
+  window?.open(url, '_blank')
 }
 
 export async function appVersion() {
-  return Promise.resolve(VERSION);
+  return Promise.resolve(VERSION)
 }
 
-export function invokePluginFunc(modulePath: string, pluginFunc: string, ...args: any): Promise<any> {
-  return fetchApi(modulePath, pluginFunc, args).catch((err: Error) => { throw err });
-};
+export function invokePluginFunc(
+  modulePath: string,
+  pluginFunc: string,
+  ...args: any
+): Promise<any> {
+  return fetchApi(modulePath, pluginFunc, args).catch((err: Error) => {
+    throw err
+  })
+}
 
 export async function downloadFile(downloadUrl: string, fileName: string) {
-  return fetchApi("", "downloadFile", { downloadUrl: downloadUrl, fileName: fileName }).catch((err: Error) => { throw err });
+  return fetchApi('', 'downloadFile', {
+    downloadUrl: downloadUrl,
+    fileName: fileName,
+  }).catch((err: Error) => {
+    throw err
+  })
 }
 
 export async function deleteFile(fileName: string) {
-  return fetchApi("", "deleteFile", fileName).catch((err: Error) => { throw err });
+  return fetchApi('', 'deleteFile', fileName).catch((err: Error) => {
+    throw err
+  })
 }
 
-export async function fetchApi(modulePath: string, pluginFunc: string, args: any): Promise<any> {
-  const response = await fetch(API_BASE_PATH + "/invokeFunction", {
+export async function fetchApi(
+  modulePath: string,
+  pluginFunc: string,
+  args: any
+): Promise<any> {
+  const response = await fetch(API_BASE_PATH + '/invokeFunction', {
     method: 'POST',
-    body: JSON.stringify({ "modulePath": modulePath, "method": pluginFunc, "args": args }),
-    headers: { 'Content-Type': 'application/json', 'Authorization': '' }
-  });
+    body: JSON.stringify({
+      modulePath: modulePath,
+      method: pluginFunc,
+      args: args,
+    }),
+    headers: { 'Content-Type': 'application/json', 'Authorization': '' },
+  })
 
   if (!response.ok) {
-    const json = await response.json();
+    const json = await response.json()
     if (json && json.error) {
       toast.error(json.error, {
-        position: "bottom-left",
+        position: 'bottom-left',
         autoClose: 5000,
         hideProgressBar: false,
         closeOnClick: true,
         pauseOnHover: true,
         draggable: true,
         progress: undefined,
-        theme: "light",
-      });
+        theme: 'light',
+      })
     }
-    return null;
+    return null
   }
-  const text = await response.text();
+  const text = await response.text()
   try {
     const json = JSON.parse(text)
-    return Promise.resolve(json);
+    return Promise.resolve(json)
   } catch (err) {
-    return Promise.resolve(text);
+    return Promise.resolve(text)
   }
-}
\ No newline at end of file
+}
diff --git a/web/services/coreService.ts b/web/services/coreService.ts
index 90b2d5183..f49346de6 100644
--- a/web/services/coreService.ts
+++ b/web/services/coreService.ts
@@ -1,5 +1,5 @@
-import { EventEmitter } from './eventsService'
 import * as cn from './cloudNativeService'
+import { EventEmitter } from './eventsService'
 export const setupCoreServices = () => {
   if (typeof window === 'undefined') {
     console.log('undefine', window)
diff --git a/web/services/eventsService.ts b/web/services/eventsService.ts
index cea4966bd..c43f4497e 100644
--- a/web/services/eventsService.ts
+++ b/web/services/eventsService.ts
@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/ban-types */
 export class EventEmitter {
   private handlers: Map<string, Function[]>
 
diff --git a/web/services/pluginService.ts b/web/services/pluginService.ts
index 06e3c9db7..53e5c0777 100644
--- a/web/services/pluginService.ts
+++ b/web/services/pluginService.ts
@@ -1,6 +1,8 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 'use client'
 import { PluginType } from '@janhq/core'
-import { pluginManager } from '@plugin/PluginManager'
+
+import { pluginManager } from '@/plugin/PluginManager'
 
 export const isCorePluginInstalled = () => {
   if (!pluginManager.get(PluginType.Conversational)) {
diff --git a/web/styles/global.scss b/web/styles/base/global.scss
similarity index 58%
rename from web/styles/global.scss
rename to web/styles/base/global.scss
index d7c651c3b..178501296 100644
--- a/web/styles/global.scss
+++ b/web/styles/base/global.scss
@@ -12,14 +12,23 @@
     left: 0px;
     top: 0px;
     width: 100%;
-    height: 32px;
-    -webkit-user-select: none;
+    height: 48px;
+    user-select: none;
     -webkit-app-region: drag;
-    // @apply bg-white;
-    // @apply dark:bg-gray-950/50;
   }
 
   .unset-drag {
     -webkit-app-region: no-drag;
   }
+
+  .unselect {
+    user-select: none;
+  }
+
+  button,
+  [type='button'],
+  [type='reset'],
+  [type='submit'] {
+    background-color: inherit;
+  }
 }
diff --git a/web/styles/code-block.scss b/web/styles/components/code-block.scss
similarity index 98%
rename from web/styles/code-block.scss
rename to web/styles/components/code-block.scss
index 0bcdc0db7..a4d77526f 100644
--- a/web/styles/code-block.scss
+++ b/web/styles/components/code-block.scss
@@ -58,6 +58,7 @@
   background: #2b2b2b;
   color: #f8f8f2;
   padding: 0.5em;
+  font-size: 14px;
   border-radius: 0.4rem;
   margin-top: 1rem;
   margin-bottom: 1rem;
diff --git a/web/styles/components/loader.scss b/web/styles/components/loader.scss
new file mode 100644
index 000000000..1d77f72d7
--- /dev/null
+++ b/web/styles/components/loader.scss
@@ -0,0 +1,72 @@
+.loader {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.loader-inner {
+  transform: translateY(-50%);
+  top: 50%;
+  position: absolute;
+  width: 100%;
+  color: white;
+  padding: 0 100px;
+  text-align: center;
+}
+
+.loader-inner label {
+  opacity: 0;
+  display: inline-block;
+  margin: 0 4px;
+}
+
+@keyframes loaderDot {
+  0% {
+    opacity: 0;
+    transform: translateX(-300px);
+  }
+  33% {
+    opacity: 1;
+    transform: translateX(0px);
+  }
+  66% {
+    opacity: 1;
+    transform: translateX(0px);
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(300px);
+  }
+}
+
+.loader-inner label:nth-child(6) {
+  -webkit-animation: loaderDot 3s infinite ease-in-out;
+  animation: loaderDot 3s infinite ease-in-out;
+}
+
+.loader-inner label:nth-child(5) {
+  -webkit-animation: loaderDot 3s 100ms infinite ease-in-out;
+  animation: loaderDot 3s 100ms infinite ease-in-out;
+}
+
+.loader-inner label:nth-child(4) {
+  -webkit-animation: loaderDot 3s 200ms infinite ease-in-out;
+  animation: loaderDot 3s 200ms infinite ease-in-out;
+}
+
+.loader-inner label:nth-child(3) {
+  -webkit-animation: loaderDot 3s 300ms infinite ease-in-out;
+  animation: loaderDot 3s 300ms infinite ease-in-out;
+}
+
+.loader-inner label:nth-child(2) {
+  -webkit-animation: loaderDot 3s 400ms infinite ease-in-out;
+  animation: loaderDot 3s 400ms infinite ease-in-out;
+}
+
+.loader-inner label:nth-child(1) {
+  -webkit-animation: loaderDot 3s 500ms infinite ease-in-out;
+  animation: loaderDot 3s 500ms infinite ease-in-out;
+}
diff --git a/web/styles/message.scss b/web/styles/components/message.scss
similarity index 70%
rename from web/styles/message.scss
rename to web/styles/components/message.scss
index d98734284..2f7ab6aba 100644
--- a/web/styles/message.scss
+++ b/web/styles/components/message.scss
@@ -4,4 +4,5 @@
     list-style: auto;
     padding-left: 24px;
   }
+  @apply text-muted-foreground;
 }
diff --git a/web/styles/loader.scss b/web/styles/loader.scss
deleted file mode 100644
index 2b92b557f..000000000
--- a/web/styles/loader.scss
+++ /dev/null
@@ -1,91 +0,0 @@
-.loader {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-}
-
-.loader-inner {
-  transform: translateY(-50%);
-  top: 50%;
-  position: absolute;
-  width: 100%;
-  color: #fff;
-  padding: 0 100px;
-  text-align: center;
-}
-
-.loader-inner label {
-  opacity: 0;
-  display: inline-block;
-  margin: 0 4px;
-}
-
-@keyframes lol {
-  0% {
-    opacity: 0;
-    transform: translateX(-300px);
-  }
-  33% {
-    opacity: 1;
-    transform: translateX(0px);
-  }
-  66% {
-    opacity: 1;
-    transform: translateX(0px);
-  }
-  100% {
-    opacity: 0;
-    transform: translateX(300px);
-  }
-}
-
-@-webkit-keyframes lol {
-  0% {
-    opacity: 0;
-    -webkit-transform: translateX(-300px);
-  }
-  33% {
-    opacity: 1;
-    -webkit-transform: translateX(0px);
-  }
-  66% {
-    opacity: 1;
-    -webkit-transform: translateX(0px);
-  }
-  100% {
-    opacity: 0;
-    -webkit-transform: translateX(300px);
-  }
-}
-
-.loader-inner label:nth-child(6) {
-  -webkit-animation: lol 3s infinite ease-in-out;
-  animation: lol 3s infinite ease-in-out;
-}
-
-.loader-inner label:nth-child(5) {
-  -webkit-animation: lol 3s 100ms infinite ease-in-out;
-  animation: lol 3s 100ms infinite ease-in-out;
-}
-
-.loader-inner label:nth-child(4) {
-  -webkit-animation: lol 3s 200ms infinite ease-in-out;
-  animation: lol 3s 200ms infinite ease-in-out;
-}
-
-.loader-inner label:nth-child(3) {
-  -webkit-animation: lol 3s 300ms infinite ease-in-out;
-  animation: lol 3s 300ms infinite ease-in-out;
-}
-
-.loader-inner label:nth-child(2) {
-  -webkit-animation: lol 3s 400ms infinite ease-in-out;
-  animation: lol 3s 400ms infinite ease-in-out;
-}
-
-.loader-inner label:nth-child(1) {
-  -webkit-animation: lol 3s 500ms infinite ease-in-out;
-  animation: lol 3s 500ms infinite ease-in-out;
-}
diff --git a/web/styles/main.scss b/web/styles/main.scss
index f79fa6e7b..ac0e1d966 100644
--- a/web/styles/main.scss
+++ b/web/styles/main.scss
@@ -1,10 +1,13 @@
 // Tailwind
+
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
 
-@import './variables.scss';
-@import './global.scss';
-@import './code-block.scss';
-@import './loader.scss';
-@import './message.scss';
+@import '../../node_modules/@janhq/uikit/dist/index.css';
+
+@import './base/global.scss';
+
+@import './components/loader.scss';
+@import './components/code-block.scss';
+@import './components/message.scss';
diff --git a/web/styles/variables.scss b/web/styles/variables.scss
deleted file mode 100644
index 6f765ddc6..000000000
--- a/web/styles/variables.scss
+++ /dev/null
@@ -1,72 +0,0 @@
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --background-reverse: 240 10% 3.9%;
-    --border: 240 5.9% 90%;
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-    // --foreground: 240 10% 3.9%;
-    // --card: 0 0% 100%;
-    // --card-foreground: 240 10% 3.9%;
-    // --popover: 0 0% 100%;
-    // --popover-foreground: 240 10% 3.9%;
-    // --primary: 240 5.9% 10%;
-    // --primary-foreground: 0 0% 98%;
-    // --secondary: 240 4.8% 95.9%;
-    // --secondary-foreground: 240 5.9% 10%;
-    --accent: 217.2 91.2% 59.8%;
-    // --accent-foreground: 240 5.9% 10%;
-    // --destructive: 0 84.2% 60.2%;
-    // --destructive-foreground: 0 0% 98%;
-    // --input: 240 5.9% 90%;
-    // --ring: 240 5% 64.9%;
-    // --radius: 0.5rem;
-
-    .accent-green {
-      --accent: 142 71% 45%;
-    }
-
-    .accent-red {
-      --accent: 346.8 77.2% 49.8%;
-    }
-
-    .accent-orange {
-      --accent: 20.5 90.2% 48.2%;
-    }
-  }
-
-  .dark {
-    --background: 240 10% 3.9%;
-    --background-reverse: 0 0% 100%;
-    --border: 240 3.7% 15.9%;
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
-    // --foreground: 0 0% 98%;
-    // --card: 240 10% 3.9%;
-    // --card-foreground: 0 0% 98%;
-    // --popover: 240 10% 3.9%;
-    // --popover-foreground: 0 0% 98%;
-    // --primary: 0 0% 98%;
-    // --primary-foreground: 240 5.9% 10%;
-    // --secondary: 240 3.7% 15.9%;
-    // --secondary-foreground: 0 0% 98%;
-    --accent: 217.2 91.2% 59.8%;
-    // --accent-foreground: 0 0% 98%;
-    // --destructive: 0 62.8% 30.6%;
-    // --destructive-foreground: 0 85.7% 97.3%;
-    // --input: 240 3.7% 15.9%;
-    // --ring: 240 4.9% 83.9%;
-
-    .accent-green {
-      --accent: 142 71% 45%;
-    }
-
-    .accent-red {
-      --accent: 346.8 77.2% 49.8%;
-    }
-
-    .accent-orange {
-      --accent: 20.5 90.2% 48.2%;
-    }
-  }
-}
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index aad9f3b7c..40f2fd186 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -1,62 +1,86 @@
-const { reverse } = require('dns')
+/* eslint-disable @typescript-eslint/naming-convention */
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const defaultTheme = require('tailwindcss/defaultTheme')
 
 /** @type {import('tailwindcss').Config} */
+
 module.exports = {
   darkMode: 'class',
   content: [
     './app/**/*.{js,ts,jsx,tsx,mdx}',
     './containers/**/*.{js,ts,jsx,tsx,mdx}',
     './screens/**/*.{js,ts,jsx,tsx,mdx}',
-    './uikit/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   theme: {
+    animation: {
+      'wave': 'wave 2.5s linear infinite',
+      'enter': 'enter 200ms ease-out',
+      'slide-in': 'slide-in 1.2s cubic-bezier(.41,.73,.51,1.02)',
+      'leave': 'leave 150ms ease-in forwards',
+      'bounce-right': 'bounce-right 3s infinite',
+    },
+    keyframes: {
+      'wave': {
+        '0%': { transform: 'rotate( 0.0deg)' },
+        '10%': { transform: 'rotate(14.0deg)' },
+        '20%': { transform: 'rotate(-8.0deg)' },
+        '30%': { transform: 'rotate(14.0deg)' },
+        '40%': { transform: 'rotate(-4.0deg)' },
+        '50%': { transform: 'rotate(10.0deg)' },
+        '60%': { transform: 'rotate( 0.0deg)' },
+        '100%': { transform: 'rotate( 0.0deg)' },
+      },
+      'enter': {
+        '0%': { transform: 'scale(0.8)', opacity: '0' },
+        '100%': { transform: 'scale(1)', opacity: '1' },
+      },
+      'leave': {
+        '0%': { transform: 'scale(1)', opacity: '1' },
+        '100%': { transform: 'scale(0.8)', opacity: '0' },
+      },
+      'slide-in': {
+        '0%': { transform: 'translateY(-100%)' },
+        '100%': { transform: 'translateY(0)' },
+      },
+      'bounce-right': {
+        '0%,20%, 50%,80%,100%': { transform: 'translateX(0)' },
+        '40%': { transform: 'translateX(-8px)' },
+        '60%': { transform: 'translateX(-4px)' },
+      },
+    },
     extend: {
+      fontFamily: {
+        fontFamily: {
+          sans: ['Inter var', ...defaultTheme.fontFamily.sans],
+        },
+      },
       colors: {
         'background': 'hsl(var(--background))',
-        'background-reverse': 'hsl(var(--background-reverse))',
         'foreground': 'hsl(var(--foreground))',
-        'border': 'hsl(var(--border))',
-        'accent': {
-          DEFAULT: 'hsl(var(--accent))',
-        },
-        'muted': {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))',
-        },
-        // input: 'hsl(var(--input))',
-        // ring: 'hsl(var(--ring))',
-        // primary: {
-        //   DEFAULT: 'hsl(var(--primary))',
-        //   foreground: 'hsl(var(--primary-foreground))',
-        // },
-        // secondary: {
-        //   DEFAULT: 'hsl(var(--secondary))',
-        //   foreground: 'hsl(var(--secondary-foreground))',
-        // },
-        // destructive: {
-        //   DEFAULT: 'hsl(var(--destructive) / <alpha-value>)',
-        //   foreground: 'hsl(var(--destructive-foreground) / <alpha-value>)',
-        // },
-        // popover: {
-        //   DEFAULT: 'hsl(var(--popover))',
-        //   foreground: 'hsl(var(--popover-foreground))',
-        // },
-        // card: {
-        //   DEFAULT: 'hsl(var(--card))',
-        //   foreground: 'hsl(var(--card-foreground))',
-        // },
-      },
 
-      backgroundImage: {
-        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic':
-          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
-      },
-      animation: {
-        bounce200: 'bounce 1s infinite 200ms',
-        bounce400: 'bounce 1s infinite 400ms',
+        'card': 'hsl(var(--card))',
+        'card-foreground': 'hsl(var(--card-foreground))',
+
+        'primary': 'hsl(var(--primary))',
+        'primary-foreground': 'hsl(var(--primary-foreground))',
+
+        'secondary': 'hsl(var(--secondary))',
+        'secondary-foreground': 'hsl(var(--secondary-foreground))',
+
+        'muted': 'hsl(var(--muted))',
+        'muted-foreground': 'hsl(var(--muted-foreground))',
+
+        'accent': 'hsl(var(--accent))',
+        'accent-foreground': 'hsl(var(--accent-foreground))',
+
+        'danger': 'hsl(var(--danger))',
+        'danger-foreground': 'hsl(var(--danger-foreground))',
+
+        'border': 'hsl(var(--border))',
+        'input': 'hsl(var(--input))',
+        'ring': 'hsl(var(--ring))',
       },
     },
   },
-  plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
+  plugins: [],
 }
diff --git a/web/tsconfig.json b/web/tsconfig.json
index bd8b3acc1..3529c3531 100644
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@@ -21,17 +21,7 @@
       }
     ],
     "paths": {
-      "@/*": ["./app/*"],
-      "@uikit": ["./uikit"],
-      "@services/*": ["./services/*"],
-      "@helpers/*": ["./helpers/*"],
-      "@utils/*": ["./utils/*"],
-      "@models/*": ["./models/*"],
-      "@hooks/*": ["./hooks/*"],
-      "@containers/*": ["./containers/*"],
-      "@screens/*": ["./screens/*"],
-      "@plugin/*": ["./plugin/*"],
-      "@plugin": ["./plugin"]
+      "@/*": ["./*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
diff --git a/web/types/appearance.d.ts b/web/types/appearance.d.ts
index 06d9ad187..14e0c14c2 100644
--- a/web/types/appearance.d.ts
+++ b/web/types/appearance.d.ts
@@ -1,7 +1,6 @@
-type Accent = 'accent-blue' | 'accent-green' | 'accent-red' | 'accent-orange'
+type PrimaryColor = 'primary-blue' | 'primary-green' | 'primary-purple'
 
 type UserConfig = {
   gettingStartedShow?: boolean
-  accent?: Accent
-  sidebarLeftExpand?: boolean
+  primaryColor?: PrimaryColor
 }
diff --git a/web/types/bot.d.ts b/web/types/bot.d.ts
deleted file mode 100644
index 1f0d3ad66..000000000
--- a/web/types/bot.d.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-type Bot = {
-  _id: string
-  name: string
-  description: string
-  visibleFromBotProfile: boolean
-  systemPrompt: string
-  welcomeMessage: string
-  publiclyAccessible: boolean
-  suggestReplies: boolean
-  renderMarkdownContent: boolean
-
-  /**
-   * If true, the bot will use the custom temperature value instead of the
-   * default temperature value.
-   */
-  enableCustomTemperature: boolean
-
-  /**
-   * Default is 0.7.
-   */
-  customTemperature: number
-
-  maxTokens: number
-
-  frequencyPenalty: number
-
-  presencePenalty: number
-
-  modelId: string
-  createdAt?: number
-  updatedAt?: number
-}
diff --git a/web/types/chatMessage.d.ts b/web/types/chatMessage.d.ts
index b1796aef5..70764a211 100644
--- a/web/types/chatMessage.d.ts
+++ b/web/types/chatMessage.d.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/naming-convention */
 enum MessageType {
   Text = 'Text',
   Image = 'Image',
diff --git a/web/types/index.d.ts b/web/types/index.d.ts
index 52c22a49a..98fceb094 100644
--- a/web/types/index.d.ts
+++ b/web/types/index.d.ts
@@ -1,12 +1,13 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 export {}
 
 declare global {
   declare const PLUGIN_CATALOG: string
   declare const VERSION: string
   interface Window {
-    electronAPI?: any | undefined;
-    corePlugin?: any | undefined;
-    coreAPI?: any | undefined;
-    pluggableElectronIpc?: any | undefined;
+    electronAPI?: any | undefined
+    corePlugin?: any | undefined
+    coreAPI?: any | undefined
+    pluggableElectronIpc?: any | undefined
   }
 }
diff --git a/web/types/users.ts b/web/types/users.d.ts
similarity index 78%
rename from web/types/users.ts
rename to web/types/users.d.ts
index 108b4e2b0..cc181a46a 100644
--- a/web/types/users.ts
+++ b/web/types/users.d.ts
@@ -1,9 +1,9 @@
-enum Role {
+export enum Role {
   User = 'user',
   Assistant = 'assistant',
 }
 
-interface User {
+type User = {
   id: string
   displayName: string
   avatarUrl: string
diff --git a/web/uikit/button/index.tsx b/web/uikit/button/index.tsx
deleted file mode 100644
index 8035b2e1b..000000000
--- a/web/uikit/button/index.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import * as React from 'react'
-import { Slot } from '@radix-ui/react-slot'
-import { cva, type VariantProps } from 'class-variance-authority'
-
-import { twMerge } from 'tailwind-merge'
-
-const buttonVariants = cva(
-  'cursor-pointer inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:bg-background-reverse disabled:text-background/50 disabled:pointer-events-none disabled:opacity-50',
-  {
-    variants: {
-      themes: {
-        default:
-          'hover:bg-background-reverse/90 bg-background-reverse text-background',
-        accent: 'hover:bg-accent/90 bg-accent text-white',
-        outline: 'border border-border bg-background/50  hover:bg-accent/20',
-      },
-      size: {
-        sm: 'h-6 px-2 text-xs rounded-md',
-        default: 'h-8 px-3',
-      },
-      loading: {
-        true: 'pointer-events-none opacity-70',
-      },
-    },
-    defaultVariants: {
-      themes: 'default',
-      size: 'default',
-      loading: false,
-    },
-  }
-)
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    { className, themes, size, loading, asChild = false, children, ...props },
-    ref
-  ) => {
-    const Comp = asChild ? Slot : 'button'
-    return (
-      <Comp
-        className={twMerge(
-          buttonVariants({ themes, size, loading, className })
-        )}
-        ref={ref}
-        {...props}
-      >
-        {loading ? (
-          <>
-            <svg
-              aria-hidden="true"
-              role="status"
-              className="mr-2 h-4 animate-spin"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-            >
-              <circle
-                className="opacity-25"
-                cx="12"
-                cy="12"
-                r="10"
-                stroke="currentColor"
-                strokeWidth="4"
-              ></circle>
-              <path
-                className="opacity-75"
-                fill="currentColor"
-                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-              ></path>
-            </svg>
-            {children}
-          </>
-        ) : (
-          children
-        )}
-      </Comp>
-    )
-  }
-)
-Button.displayName = 'Button'
-
-export { Button, buttonVariants }
diff --git a/web/uikit/icons/index.tsx b/web/uikit/icons/index.tsx
deleted file mode 100644
index c49affe23..000000000
--- a/web/uikit/icons/index.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import dynamic from 'next/dynamic'
-import { LucideProps } from 'lucide-react'
-import dynamicIconImports from 'lucide-react/dynamicIconImports'
-
-interface IconProps extends LucideProps {
-  name: keyof typeof dynamicIconImports
-}
-
-export const Icons = ({ name, ...props }: IconProps) => {
-  const LucideIcon = dynamic(dynamicIconImports[name])
-
-  return <LucideIcon {...props} />
-}
diff --git a/web/uikit/index.tsx b/web/uikit/index.tsx
deleted file mode 100644
index 566021ce5..000000000
--- a/web/uikit/index.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './button'
-export * from './icons'
-export * from './toggle'
-export * from './switch'
diff --git a/web/uikit/switch/index.tsx b/web/uikit/switch/index.tsx
deleted file mode 100644
index d8984b1eb..000000000
--- a/web/uikit/switch/index.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import * as SwitchPrimitives from '@radix-ui/react-switch'
-
-import { twMerge } from 'tailwind-merge'
-
-const Switch = React.forwardRef<
-  React.ElementRef<typeof SwitchPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
->(({ className, ...props }, ref) => (
-  <SwitchPrimitives.Root
-    className={twMerge(
-      'focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-accent data-[state=unchecked]:bg-background-reverse/20 peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
-      className
-    )}
-    {...props}
-    ref={ref}
-  >
-    <SwitchPrimitives.Thumb
-      className={twMerge(
-        'bg-background pointer-events-none block h-5 w-5 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 '
-      )}
-    />
-  </SwitchPrimitives.Root>
-))
-Switch.displayName = SwitchPrimitives.Root.displayName
-
-export { Switch }
diff --git a/web/uikit/toggle/index.tsx b/web/uikit/toggle/index.tsx
deleted file mode 100644
index a93a4df4e..000000000
--- a/web/uikit/toggle/index.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import * as TogglePrimitive from '@radix-ui/react-toggle'
-import { cva, type VariantProps } from 'class-variance-authority'
-
-import { twMerge } from 'tailwind-merge'
-
-const toggleVariants = cva(
-  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-red-100 hover:text-blue-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-red-200 data-[state=on]:text-red-200',
-  {
-    variants: {
-      variant: {
-        default: 'bg-transparent',
-        outline:
-          'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',
-      },
-      size: {
-        default: 'h-10 px-3',
-        sm: 'h-9 px-2.5',
-        lg: 'h-11 px-5',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  }
-)
-
-const Toggle = React.forwardRef<
-  React.ElementRef<typeof TogglePrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
-    VariantProps<typeof toggleVariants>
->(({ className, variant, size, ...props }, ref) => (
-  <TogglePrimitive.Root
-    ref={ref}
-    className={twMerge(toggleVariants({ variant, size, className }))}
-    {...props}
-  />
-))
-
-Toggle.displayName = TogglePrimitive.Root.displayName
-
-export { Toggle, toggleVariants }
diff --git a/web/utils/const.ts b/web/utils/const.ts
deleted file mode 100644
index 5ad27b886..000000000
--- a/web/utils/const.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const MESSAGE_PER_PAGE = 10
diff --git a/web/utils/converter.ts b/web/utils/converter.ts
index bcd511a62..5c69bdf09 100644
--- a/web/utils/converter.ts
+++ b/web/utils/converter.ts
@@ -10,7 +10,11 @@ export const toGigabytes = (input: number) => {
   }
 }
 
-export const formatDownloadPercentage = (input: number) => {
+export const formatDownloadPercentage = (
+  input: number,
+  options?: { hidePercentage?: boolean }
+) => {
+  if (options?.hidePercentage) return input * 100
   return (input * 100).toFixed(2) + '%'
 }
 
@@ -20,7 +24,6 @@ export const formatDownloadSpeed = (input: number | undefined) => {
 }
 
 export const formatTwoDigits = (input: number) => {
-  // convert input from string to number
   input = Number(input)
 
   return input.toFixed(2)
diff --git a/web/utils/dummy.ts b/web/utils/dummy.ts
index de0e2eb44..11fc7c6fc 100644
--- a/web/utils/dummy.ts
+++ b/web/utils/dummy.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/naming-convention */
 import { ModelCatalog, ModelVersion } from '@janhq/core/lib/types'
 
 export const dummyModel: ModelCatalog = {
diff --git a/web/utils/message.ts b/web/utils/message.ts
index 717cbc63c..d19d52ff3 100644
--- a/web/utils/message.ts
+++ b/web/utils/message.ts
@@ -1,4 +1,4 @@
-import { ChatMessage } from '@models/ChatMessage'
+import { ChatMessage } from '@/models/ChatMessage'
 
 /**
  * Util function to merge two array of messages and remove duplicates.