diff --git a/electron/main.ts b/electron/main.ts
index 9a4daacc6..22a5278b7 100644
--- a/electron/main.ts
+++ b/electron/main.ts
@@ -1,4 +1,11 @@
-import { app, BrowserWindow, ipcMain, dialog, shell } from "electron";
+import {
+  app,
+  BrowserWindow,
+  ipcMain,
+  dialog,
+  shell,
+  nativeTheme,
+} from "electron";
 import { readdirSync, writeFileSync } from "fs";
 import { resolve, join, extname } from "path";
 import { rmdir, unlink, createWriteStream } from "fs";
@@ -36,12 +43,30 @@ app.on("window-all-closed", () => {
   app.quit();
 });
 
+ipcMain.handle("setNativeThemeLight", () => {
+  nativeTheme.themeSource = "light";
+});
+
+ipcMain.handle("setNativeThemeDark", () => {
+  nativeTheme.themeSource = "dark";
+});
+
+ipcMain.handle("setNativeThemeSystem", () => {
+  nativeTheme.themeSource = "system";
+});
+
 function createMainWindow() {
   mainWindow = new BrowserWindow({
     width: 1200,
     height: 800,
+    frame: false,
     show: false,
-    backgroundColor: "white",
+    trafficLightPosition: {
+      x: 16,
+      y: 10,
+    },
+    titleBarStyle: "hidden",
+    vibrancy: "sidebar",
     webPreferences: {
       nodeIntegration: true,
       preload: join(__dirname, "preload.js"),
@@ -118,11 +143,13 @@ function handleIPCs() {
   ipcMain.handle(
     "invokePluginFunc",
     async (_event, modulePath, method, ...args) => {
-      const module = require(/* webpackIgnore: true */ join(
-        app.getPath("userData"),
-        "plugins",
-        modulePath
-      ));
+      const module = require(
+        /* webpackIgnore: true */ join(
+          app.getPath("userData"),
+          "plugins",
+          modulePath
+        )
+      );
       requiredModules[modulePath] = module;
 
       if (typeof module[method] === "function") {
diff --git a/electron/preload.ts b/electron/preload.ts
index a52a76c81..dac5aef6f 100644
--- a/electron/preload.ts
+++ b/electron/preload.ts
@@ -9,6 +9,12 @@ contextBridge.exposeInMainWorld("electronAPI", {
   invokePluginFunc: (plugin: any, method: any, ...args: any[]) =>
     ipcRenderer.invoke("invokePluginFunc", plugin, method, ...args),
 
+  setNativeThemeLight: () => ipcRenderer.invoke("setNativeThemeLight"),
+
+  setNativeThemeDark: () => ipcRenderer.invoke("setNativeThemeDark"),
+
+  setNativeThemeSystem: () => ipcRenderer.invoke("setNativeThemeSystem"),
+
   basePlugins: () => ipcRenderer.invoke("basePlugins"),
 
   pluginPath: () => ipcRenderer.invoke("pluginPath"),
@@ -23,19 +29,27 @@ contextBridge.exposeInMainWorld("electronAPI", {
 
   deleteFile: (filePath: string) => ipcRenderer.invoke("deleteFile", filePath),
 
-  installRemotePlugin: (pluginName: string) => ipcRenderer.invoke("installRemotePlugin", pluginName),
+  installRemotePlugin: (pluginName: string) =>
+    ipcRenderer.invoke("installRemotePlugin", pluginName),
 
-  downloadFile: (url: string, path: string) => ipcRenderer.invoke("downloadFile", url, path),
+  downloadFile: (url: string, path: string) =>
+    ipcRenderer.invoke("downloadFile", url, path),
 
-  onFileDownloadUpdate: (callback: any) => ipcRenderer.on("FILE_DOWNLOAD_UPDATE", callback),
+  onFileDownloadUpdate: (callback: any) =>
+    ipcRenderer.on("FILE_DOWNLOAD_UPDATE", callback),
 
-  onFileDownloadError: (callback: any) => ipcRenderer.on("FILE_DOWNLOAD_ERROR", callback),
+  onFileDownloadError: (callback: any) =>
+    ipcRenderer.on("FILE_DOWNLOAD_ERROR", callback),
 
-  onFileDownloadSuccess: (callback: any) => ipcRenderer.on("FILE_DOWNLOAD_COMPLETE", callback),
+  onFileDownloadSuccess: (callback: any) =>
+    ipcRenderer.on("FILE_DOWNLOAD_COMPLETE", callback),
 
-  onAppUpdateDownloadUpdate: (callback: any) => ipcRenderer.on("APP_UPDATE_PROGRESS", callback),
+  onAppUpdateDownloadUpdate: (callback: any) =>
+    ipcRenderer.on("APP_UPDATE_PROGRESS", callback),
 
-  onAppUpdateDownloadError: (callback: any) => ipcRenderer.on("APP_UPDATE_ERROR", callback),
+  onAppUpdateDownloadError: (callback: any) =>
+    ipcRenderer.on("APP_UPDATE_ERROR", callback),
 
-  onAppUpdateDownloadSuccess: (callback: any) => ipcRenderer.on("APP_UPDATE_COMPLETE", callback),
+  onAppUpdateDownloadSuccess: (callback: any) =>
+    ipcRenderer.on("APP_UPDATE_COMPLETE", callback),
 });
diff --git a/electron/tests/main.e2e.spec.ts b/electron/tests/main.e2e.spec.ts
index 85c3d5c7a..d6df31ca4 100644
--- a/electron/tests/main.e2e.spec.ts
+++ b/electron/tests/main.e2e.spec.ts
@@ -48,10 +48,8 @@ test("renders the home page", async () => {
 
   // Welcome text is available
   const welcomeText = await page
-    .locator(".text-5xl", {
-      hasText: "Welcome,let’s download your first model",
-    })
+    .getByTestId("testid-welcome-title")
     .first()
-    .isDisabled();
+    .isVisible();
   expect(welcomeText).toBe(false);
 });
diff --git a/electron/tests/my-models.e2e.spec.ts b/electron/tests/my-models.e2e.spec.ts
index c52f1a0aa..627612ea8 100644
--- a/electron/tests/my-models.e2e.spec.ts
+++ b/electron/tests/my-models.e2e.spec.ts
@@ -40,7 +40,7 @@ test("shows my models", async () => {
     .getByRole("heading")
     .filter({ hasText: "My Models" })
     .first()
-    .isDisabled();
+    .isVisible();
   expect(header).toBe(false);
   //   More test cases here...
 });
diff --git a/electron/tests/navigation.e2e.spec.ts b/electron/tests/navigation.e2e.spec.ts
index 554a7b4d7..90220d5db 100644
--- a/electron/tests/navigation.e2e.spec.ts
+++ b/electron/tests/navigation.e2e.spec.ts
@@ -35,37 +35,13 @@ test.afterAll(async () => {
 });
 
 test("renders left navigation panel", async () => {
-  // Chat History section is available
-  const chatSection = await page
-    .getByRole("heading")
-    .filter({ hasText: "CHAT HISTORY" })
-    .first()
-    .isDisabled();
+  // Chat section should be there
+  const chatSection = await page.getByTestId("Chat").first().isVisible();
   expect(chatSection).toBe(false);
 
   // Home actions
-  const createBotBtn = await page
-    .getByRole("button", { name: "Create bot" })
-    .first()
-    .isEnabled();
-  const exploreBtn = await page
-    .getByRole("button", { name: "Explore Models" })
-    .first()
-    .isEnabled();
-  const myModelsBtn = await page
-    .getByTestId("My Models")
-    .first()
-    .isEnabled();
-  const settingsBtn = await page
-    .getByTestId("Settings")
-    .first()
-    .isEnabled();
-  expect(
-    [
-      createBotBtn,
-      exploreBtn,
-      myModelsBtn,
-      settingsBtn,
-    ].filter((e) => !e).length
-  ).toBe(0);
+  const botBtn = await page.getByTestId("Bot").first().isEnabled();
+  const myModelsBtn = await page.getByTestId("My Models").first().isEnabled();
+  const settingsBtn = await page.getByTestId("Settings").first().isEnabled();
+  expect([botBtn, myModelsBtn, settingsBtn].filter((e) => !e).length).toBe(0);
 });
diff --git a/electron/tests/settings.e2e.spec.ts b/electron/tests/settings.e2e.spec.ts
index dacefd380..2f8d6465b 100644
--- a/electron/tests/settings.e2e.spec.ts
+++ b/electron/tests/settings.e2e.spec.ts
@@ -36,7 +36,5 @@ test.afterAll(async () => {
 
 test("shows settings", async () => {
   await page.getByTestId("Settings").first().click();
-
-  const pluginList = await page.getByTestId("plugin-item").count();
-  expect(pluginList).toBe(4);
+  await page.getByTestId("testid-setting-description").isVisible();
 });
diff --git a/plugins/data-plugin/package.json b/plugins/data-plugin/package.json
index df62a56ba..5ada2f7ed 100644
--- a/plugins/data-plugin/package.json
+++ b/plugins/data-plugin/package.json
@@ -43,9 +43,5 @@
     "@janhq/core": "^0.1.6",
     "pouchdb-find": "^8.0.1",
     "pouchdb-node": "^8.0.1"
-  },
-  "bundleDependencies": [
-    "pouchdb-node",
-    "pouchdb-find"
-  ]
+  }
 }
diff --git a/plugins/inference-plugin/index.ts b/plugins/inference-plugin/index.ts
index d8f73a218..04ed4b0f0 100644
--- a/plugins/inference-plugin/index.ts
+++ b/plugins/inference-plugin/index.ts
@@ -9,13 +9,17 @@ import {
 } from "@janhq/core";
 import { Observable } from "rxjs";
 
-const initModel = async (product) => invokePluginFunc(MODULE_PATH, "initModel", product);
+const initModel = async (product) =>
+  invokePluginFunc(MODULE_PATH, "initModel", product);
 
 const stopModel = () => {
   invokePluginFunc(MODULE_PATH, "killSubprocess");
 };
 
-function requestInference(recentMessages: any[], bot?: any): Observable<string> {
+function requestInference(
+  recentMessages: any[],
+  bot?: any
+): Observable<string> {
   return new Observable((subscriber) => {
     const requestBody = JSON.stringify({
       messages: recentMessages,
@@ -69,10 +73,15 @@ function requestInference(recentMessages: any[], bot?: any): Observable<string>
 
 async function retrieveLastTenMessages(conversationId: string, bot?: any) {
   // TODO: Common collections should be able to access via core functions instead of store
-  const messageHistory = (await store.findMany("messages", { conversationId }, [{ createdAt: "asc" }])) ?? [];
+  const messageHistory =
+    (await store.findMany("messages", { conversationId }, [
+      { createdAt: "asc" },
+    ])) ?? [];
 
   let recentMessages = messageHistory
-    .filter((e) => e.message !== "" && (e.user === "user" || e.user === "assistant"))
+    .filter(
+      (e) => e.message !== "" && (e.user === "user" || e.user === "assistant")
+    )
     .slice(-9)
     .map((message) => ({
       content: message.message.trim(),
@@ -81,10 +90,13 @@ async function retrieveLastTenMessages(conversationId: string, bot?: any) {
 
   if (bot && bot.systemPrompt) {
     // append bot's system prompt
-    recentMessages = [{
-      content: `[INST] ${bot.systemPrompt}`,
-      role: 'system'
-    },...recentMessages];
+    recentMessages = [
+      {
+        content: `[INST] ${bot.systemPrompt}`,
+        role: "system",
+      },
+      ...recentMessages,
+    ];
   }
 
   console.debug(`Last 10 messages: ${JSON.stringify(recentMessages, null, 2)}`);
@@ -93,13 +105,19 @@ async function retrieveLastTenMessages(conversationId: string, bot?: any) {
 }
 
 async function handleMessageRequest(data: NewMessageRequest) {
-  const conversation = await store.findOne("conversations", data.conversationId);
+  const conversation = await store.findOne(
+    "conversations",
+    data.conversationId
+  );
   let bot = undefined;
   if (conversation.botId != null) {
     bot = await store.findOne("bots", conversation.botId);
   }
-  
-  const recentMessages = await retrieveLastTenMessages(data.conversationId, bot);
+
+  const recentMessages = await retrieveLastTenMessages(
+    data.conversationId,
+    bot
+  );
   const message = {
     ...data,
     message: "",
@@ -124,7 +142,8 @@ async function handleMessageRequest(data: NewMessageRequest) {
       await store.updateOne("messages", message._id, message);
     },
     error: async (err) => {
-      message.message = message.message.trim() + "\n" + "Error occurred: " + err;
+      message.message =
+        message.message.trim() + "\n" + "Error occurred: " + err;
       // TODO: Common collections should be able to access via core functions instead of store
       await store.updateOne("messages", message._id, message);
     },
@@ -140,7 +159,10 @@ async function inferenceRequest(data: NewMessageRequest): Promise<any> {
   };
   return new Promise(async (resolve, reject) => {
     const recentMessages = await retrieveLastTenMessages(data.conversationId);
-    requestInference([...recentMessages, { role: "user", content: data.message }]).subscribe({
+    requestInference([
+      ...recentMessages,
+      { role: "user", content: data.message },
+    ]).subscribe({
       next: (content) => {
         message.message = content;
       },
@@ -166,5 +188,9 @@ export function init({ register }) {
   register(PluginService.OnStart, PLUGIN_NAME, onStart);
   register(InferenceService.InitModel, initModel.name, initModel);
   register(InferenceService.StopModel, stopModel.name, stopModel);
-  register(InferenceService.InferenceRequest, inferenceRequest.name, inferenceRequest);
+  register(
+    InferenceService.InferenceRequest,
+    inferenceRequest.name,
+    inferenceRequest
+  );
 }
diff --git a/web/app/_components/ActiveModelTable/index.tsx b/web/app/_components/ActiveModelTable/index.tsx
index eae2ed565..3a477ba5c 100644
--- a/web/app/_components/ActiveModelTable/index.tsx
+++ b/web/app/_components/ActiveModelTable/index.tsx
@@ -1,7 +1,7 @@
 import { useAtomValue } from 'jotai'
 import React from 'react'
 import ModelTable from '../ModelTable'
-import { activeAssistantModelAtom } from '@/_helpers/atoms/Model.atom'
+import { activeAssistantModelAtom } from '@helpers/atoms/Model.atom'
 
 const ActiveModelTable: React.FC = () => {
   const activeModel = useAtomValue(activeAssistantModelAtom)
diff --git a/web/app/_components/AvailableModelCard/index.tsx b/web/app/_components/AvailableModelCard/index.tsx
index 8d69b2880..9773dfb85 100644
--- a/web/app/_components/AvailableModelCard/index.tsx
+++ b/web/app/_components/AvailableModelCard/index.tsx
@@ -2,8 +2,7 @@ import DownloadModelContent from '../DownloadModelContent'
 import ModelDownloadButton from '../ModelDownloadButton'
 import ModelDownloadingButton from '../ModelDownloadingButton'
 import { useAtomValue } from 'jotai'
-import { modelDownloadStateAtom } from '@/_helpers/atoms/DownloadState.atom'
-import { AssistantModel } from '@/_models/AssistantModel'
+import { modelDownloadStateAtom } from '@helpers/atoms/DownloadState.atom'
 
 type Props = {
   model: AssistantModel
diff --git a/web/app/_components/Avatar/index.tsx b/web/app/_components/Avatar/index.tsx
index 4b7259e3e..51e5e1d59 100644
--- a/web/app/_components/Avatar/index.tsx
+++ b/web/app/_components/Avatar/index.tsx
@@ -7,7 +7,7 @@ type Props = {
 
 const Avatar: React.FC<Props> = ({ allowEdit = false }) => (
   <div className="mx-auto flex flex-col gap-5">
-    <span className="mx-auto inline-block h-14 w-14 overflow-hidden rounded-full bg-gray-100">
+    <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"
diff --git a/web/app/_components/BasicPromptAccessories/index.tsx b/web/app/_components/BasicPromptAccessories/index.tsx
index bb68cdcc1..00c852472 100644
--- a/web/app/_components/BasicPromptAccessories/index.tsx
+++ b/web/app/_components/BasicPromptAccessories/index.tsx
@@ -3,7 +3,7 @@
 import { useSetAtom } from 'jotai'
 import { InformationCircleIcon } from '@heroicons/react/24/outline'
 import SendButton from '../SendButton'
-import { showingAdvancedPromptAtom } from '@/_helpers/atoms/Modal.atom'
+import { showingAdvancedPromptAtom } from '@helpers/atoms/Modal.atom'
 
 const BasicPromptAccessories: React.FC = () => {
   const setShowingAdvancedPrompt = useSetAtom(showingAdvancedPromptAtom)
@@ -11,7 +11,7 @@ const BasicPromptAccessories: React.FC = () => {
   const shouldShowAdvancedPrompt = false
 
   return (
-    <div className="absolute inset-x-0 bottom-0 flex justify-between py-2 pl-3 pr-2">
+    <div className="absolute inset-x-0 bottom-0 flex justify-between p-3">
       {/* Add future accessories here, e.g upload a file */}
       <div className="flex items-center space-x-5">
         <div className="flex items-center">
diff --git a/web/app/_components/BasicPromptButton/index.tsx b/web/app/_components/BasicPromptButton/index.tsx
index 58bc6abc4..3e9bd0ec8 100644
--- a/web/app/_components/BasicPromptButton/index.tsx
+++ b/web/app/_components/BasicPromptButton/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { useSetAtom } from 'jotai'
 import { ChevronLeftIcon } from '@heroicons/react/24/outline'
-import { showingAdvancedPromptAtom } from '@/_helpers/atoms/Modal.atom'
+import { showingAdvancedPromptAtom } from '@helpers/atoms/Modal.atom'
 
 const BasicPromptButton: React.FC = () => {
   const setShowingAdvancedPrompt = useSetAtom(showingAdvancedPromptAtom)
diff --git a/web/app/_components/BasicPromptInput/index.tsx b/web/app/_components/BasicPromptInput/index.tsx
index d6e2f2d83..bb2eeb8e0 100644
--- a/web/app/_components/BasicPromptInput/index.tsx
+++ b/web/app/_components/BasicPromptInput/index.tsx
@@ -1,11 +1,11 @@
 '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 useInitModel from '@/_hooks/useInitModel'
-import useSendChatMessage from '@/_hooks/useSendChatMessage'
+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 useInitModel from '@hooks/useInitModel'
+import useSendChatMessage from '@hooks/useSendChatMessage'
 import { useAtom, useAtomValue } from 'jotai'
 import { ChangeEvent, useEffect, useRef } from 'react'
 
@@ -68,7 +68,7 @@ const BasicPromptInput: React.FC = () => {
   }
 
   return (
-    <div className="overflow-hidden rounded-lg shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-indigo-600">
+    <div className=" border-border rounded-lg border shadow-sm">
       <textarea
         ref={textareaRef}
         onKeyDown={handleKeyDown}
@@ -76,7 +76,7 @@ const BasicPromptInput: React.FC = () => {
         onChange={handleMessageChange}
         name="comment"
         id="comment"
-        className="block w-full resize-none border-0 bg-transparent py-1.5 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6"
+        className="text-background-reverse block w-full resize-none border-0 bg-transparent py-1.5 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6"
         placeholder="Message ..."
         rows={1}
         style={{ overflow: 'auto' }}
diff --git a/web/app/_components/BotInfo/index.tsx b/web/app/_components/BotInfo/index.tsx
index 9085536c0..407e3cf7c 100644
--- a/web/app/_components/BotInfo/index.tsx
+++ b/web/app/_components/BotInfo/index.tsx
@@ -1,56 +1,58 @@
-import { activeBotAtom } from "@/_helpers/atoms/Bot.atom";
+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";
+} 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 { 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;
+      alert('No bot selected')
+      return
     }
 
-    createConvoByBot(botInfo);
-  };
+    createConvoByBot(botInfo)
+  }
 
   const onDeleteBotClick = async () => {
     // TODO: display confirmation diaglog
-    const result = await deleteBot(botInfo._id);
-    if (result === "success") {
-      setMainView(MainViewState.Welcome);
+    const result = await deleteBot(botInfo._id)
+    if (result === 'success') {
+      setMainView(MainViewState.Welcome)
     }
-  };
+  }
 
   return (
-    <div className="flex flex-col gap-2 mx-1 my-1">
-      <ExpandableHeader title="BOT INFO" expanded={true} onClick={() => {}} />
+    <div className="mx-1 my-1 flex flex-col gap-2">
+      <ExpandableHeader title="BOT INFO" />
 
       <div className="flex flex-col">
-        <label>{botInfo.name}</label>
-        <PrimaryButton onClick={onNewChatClicked} title="New chat" />
-        <span>{botInfo.description}</span>
+        <label className="mb-2">{botInfo.name}</label>
+        <span className="text-muted-foreground">{botInfo.description}</span>
       </div>
 
-      <PrimaryButton
-        title="Delete bot"
-        onClick={onDeleteBotClick}
-        className="bg-red-500 hover:bg-red-400"
-      />
+      <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;
+export default BotInfo
diff --git a/web/app/_components/BotInfoContainer/index.tsx b/web/app/_components/BotInfoContainer/index.tsx
index df8e05e2c..d6a6784c7 100644
--- a/web/app/_components/BotInfoContainer/index.tsx
+++ b/web/app/_components/BotInfoContainer/index.tsx
@@ -1,14 +1,14 @@
-import { activeBotAtom } from '@/_helpers/atoms/Bot.atom'
+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 useCreateConversation from '@hooks/useCreateConversation'
+import useDeleteBot from '@hooks/useDeleteBot'
 import {
   setMainViewStateAtom,
   MainViewState,
-} from '@/_helpers/atoms/MainView.atom'
+} from '@helpers/atoms/MainView.atom'
 
 const BotInfoContainer: React.FC = () => {
   const activeBot = useAtomValue(activeBotAtom)
@@ -44,9 +44,7 @@ const BotInfoContainer: React.FC = () => {
     <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>
+        <h1 className="text-center text-2xl font-bold">{activeBot?.name}</h1>
         <div className="flex gap-4">
           <PrimaryButton
             fullWidth
@@ -55,7 +53,7 @@ const BotInfoContainer: React.FC = () => {
           />
           <PrimaryButton
             fullWidth
-            className='bg-red-500 hover:bg-red-400'
+            className="bg-red-500 hover:bg-red-400"
             title="Delete bot"
             onClick={onDeleteBotClick}
           />
diff --git a/web/app/_components/BotListContainer/index.tsx b/web/app/_components/BotListContainer/index.tsx
index 93a96f06b..c5e99aab0 100644
--- a/web/app/_components/BotListContainer/index.tsx
+++ b/web/app/_components/BotListContainer/index.tsx
@@ -1,14 +1,14 @@
-import { activeBotAtom } from '@/_helpers/atoms/Bot.atom'
-import { showingBotListModalAtom } from '@/_helpers/atoms/Modal.atom'
-import useGetBots from '@/_hooks/useGetBots'
-import { Bot } from '@/_models/Bot'
+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'
+} from '@helpers/atoms/MainView.atom'
 
 const BotListContainer: React.FC = () => {
   const [open, setOpen] = useAtom(showingBotListModalAtom)
@@ -16,6 +16,7 @@ const BotListContainer: React.FC = () => {
   const [activeBot, setActiveBot] = useAtom(activeBotAtom)
   const [bots, setBots] = useState<Bot[]>([])
   const { getAllBots } = useGetBots()
+  const setRightSideBarVisibility = useSetAtom(rightSideBarExpandStateAtom)
 
   useEffect(() => {
     if (open) {
@@ -23,31 +24,34 @@ const BotListContainer: React.FC = () => {
         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="overflow-hidden bg-white shadow sm:rounded-md">
+    <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) => (
+        {bots.map((bot, i) => (
           <li
             role="button"
-            key={bot._id}
-            className="flex gap-4 p-4 hover:bg-hover-light sm:px-6"
+            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="line-clamp-1 text-ellipsis">{bot._id}</p>
+              <p className="text-muted-foreground mt-1 line-clamp-1 text-ellipsis">
+                {bot._id}
+              </p>
             </div>
           </li>
         ))}
diff --git a/web/app/_components/BotListModal/index.tsx b/web/app/_components/BotListModal/index.tsx
index 213986fd9..6ece6090d 100644
--- a/web/app/_components/BotListModal/index.tsx
+++ b/web/app/_components/BotListModal/index.tsx
@@ -1,4 +1,4 @@
-import { showingBotListModalAtom } from '@/_helpers/atoms/Modal.atom'
+import { showingBotListModalAtom } from '@helpers/atoms/Modal.atom'
 import { Dialog, Transition } from '@headlessui/react'
 import { useAtom } from 'jotai'
 import React, { Fragment } from 'react'
@@ -19,10 +19,10 @@ const BotListModal: React.FC = () => {
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+          <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-10 w-screen overflow-y-auto">
+        <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}
@@ -33,8 +33,8 @@ const BotListModal: React.FC = () => {
               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-sm sm:p-6">
-                <h1 className="mb-4 text-lg text-black font-bold">Your bots</h1>
+              <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>
diff --git a/web/app/_components/BotPreview/index.tsx b/web/app/_components/BotPreview/index.tsx
index 00695724d..deafad2ea 100644
--- a/web/app/_components/BotPreview/index.tsx
+++ b/web/app/_components/BotPreview/index.tsx
@@ -1,26 +1,26 @@
-import Image from "next/image";
+import Image from 'next/image'
 
 const BotPreview: React.FC = () => {
   return (
-    <div className="flex pb-2 flex-col border border-gray-400 min-h-[235px] gap-2 overflow-hidden rounded-lg">
-      <div className="flex items-center justify-center p-2 bg-gray-400">
+    <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"
+            'https://i.pinimg.com/564x/52/b1/6f/52b16f96f52221d48bea716795ccc89a.jpg'
           }
           width={32}
           height={32}
           alt=""
         />
       </div>
-      <div className="flex items-center text-xs text-gray-400 gap-1 px-1">
-        <div className="flex-grow mx-1 border-b border-gray-400"></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="flex-grow mx-1 border-b border-gray-400"></div>
+        <div className="mx-1 flex-grow border-b border-gray-400"></div>
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default BotPreview;
+export default BotPreview
diff --git a/web/app/_components/BotSetting/index.tsx b/web/app/_components/BotSetting/index.tsx
index faf364a9e..ca46521e0 100644
--- a/web/app/_components/BotSetting/index.tsx
+++ b/web/app/_components/BotSetting/index.tsx
@@ -1,28 +1,26 @@
-import { activeBotAtom } from '@/_helpers/atoms/Bot.atom'
+import { activeBotAtom } from '@helpers/atoms/Bot.atom'
 import { useAtomValue } from 'jotai'
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
 import ExpandableHeader from '../ExpandableHeader'
 import { useDebouncedCallback } from 'use-debounce'
-import useUpdateBot from '@/_hooks/useUpdateBot'
-import ProgressSetting from '../ProgressSetting'
-import { set } from 'react-hook-form'
+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(0)
-  const [maxTokens, setMaxTokens] = useState(0)
-  const [frequencyPenalty, setFrequencyPenalty] = useState(0)
-  const [presencePenalty, setPresencePenalty] = useState(0)
+  const [temperature, setTemperature] = useState(
+    activeBot?.customTemperature ?? 0
+  )
 
-  useEffect(() => {
-    if (!activeBot) return
-    setMaxTokens(activeBot.maxTokens ?? 0)
-    setTemperature(activeBot.customTemperature ?? 0)
-    setFrequencyPenalty(activeBot.frequencyPenalty ?? 0)
-    setPresencePenalty(activeBot.presencePenalty ?? 0)
-  }, [activeBot?._id])
+  const [maxTokens, setMaxTokens] = useState(activeBot?.maxTokens ?? 0)
+  const [frequencyPenalty, setFrequencyPenalty] = useState(
+    activeBot?.frequencyPenalty ?? 0
+  )
+  const [presencePenalty, setPresencePenalty] = useState(
+    activeBot?.presencePenalty ?? 0
+  )
 
   const { updateBot } = useUpdateBot()
 
@@ -60,71 +58,109 @@ const BotSetting: React.FC = () => {
 
   return (
     <div className="my-3 flex flex-col">
-      <ExpandableHeader
-        title="BOT SETTINGS"
-        expanded={true}
-        onClick={() => {}}
-      />
-
+      <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 text-sm font-medium leading-6 text-gray-900"
-          >
+          <label htmlFor="comment" className="block">
             System prompt
           </label>
-          <div className="mt-2">
+          <div className="mt-1">
             <textarea
               rows={4}
               name="comment"
               id="comment"
-              className="block w-full rounded-md border-0 py-1.5 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"
+              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>
 
-        <ProgressSetting
-          title="Max tokens"
-          min={0}
-          max={4096}
-          step={1}
-          value={maxTokens}
-          onValueChanged={(value) => debouncedMaxToken(value)}
-        />
+        {/* 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>
 
-        <ProgressSetting
-          min={0}
-          max={1}
-          step={0.01}
-          title="Temperature"
-          value={temperature}
-          onValueChanged={(value) => debouncedTemperature(value)}
-        />
+        <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>
 
-        <ProgressSetting
-          title="Frequency penalty"
-          value={frequencyPenalty}
-          min={0}
-          max={1}
-          step={0.01}
-          onValueChanged={(value) => debouncedFreqPenalty(value)}
-        />
+        <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>
 
-        <ProgressSetting
-          min={0}
-          max={1}
-          step={0.01}
-          title="Presence penalty"
-          value={presencePenalty}
-          onValueChanged={(value) => {
-            setPresencePenalty(value)
-            debouncedPresencePenalty(value)
-          }}
-        />
+        {/* 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>
   )
diff --git a/web/app/_components/CenterContainer/index.tsx b/web/app/_components/CenterContainer/index.tsx
index 376b08f66..5c0280d6f 100644
--- a/web/app/_components/CenterContainer/index.tsx
+++ b/web/app/_components/CenterContainer/index.tsx
@@ -1,12 +1,12 @@
-import React from "react";
-import MainHeader from "../MainHeader";
-import MainView from "../MainView";
+import React from 'react'
+import MainHeader from '../MainHeader'
+import MainView from '../MainView'
 
 const CenterContainer: React.FC = () => (
-  <div className="flex-1 flex flex-col">
+  <div className="flex flex-1 flex-col dark:bg-gray-950/50">
     <MainHeader />
     <MainView />
   </div>
-);
+)
 
-export default React.memo(CenterContainer);
+export default React.memo(CenterContainer)
diff --git a/web/app/_components/ChatBody/index.tsx b/web/app/_components/ChatBody/index.tsx
index 0a4d96bdd..523c0d4c7 100644
--- a/web/app/_components/ChatBody/index.tsx
+++ b/web/app/_components/ChatBody/index.tsx
@@ -2,12 +2,11 @@
 
 import React, { useCallback, useRef, useState, useEffect } from 'react'
 import ChatItem from '../ChatItem'
-import { ChatMessage } from '@/_models/ChatMessage'
-import useChatMessages from '@/_hooks/useChatMessages'
+import useChatMessages from '@hooks/useChatMessages'
 import { useAtomValue } from 'jotai'
 import { selectAtom } from 'jotai/utils'
-import { getActiveConvoIdAtom } from '@/_helpers/atoms/Conversation.atom'
-import { chatMessages } from '@/_helpers/atoms/ChatMessage.atom'
+import { getActiveConvoIdAtom } from '@helpers/atoms/Conversation.atom'
+import { chatMessages } from '@helpers/atoms/ChatMessage.atom'
 
 const ChatBody: React.FC = () => {
   const activeConversationId = useAtomValue(getActiveConvoIdAtom) ?? ''
@@ -54,7 +53,7 @@ const ChatBody: React.FC = () => {
   }, [messageList, lastPostRef])
 
   return (
-    <div className="scroll flex flex-1 flex-col-reverse overflow-y-auto py-4">
+    <div className="[&>*:nth-child(odd)]:bg-background flex h-full flex-1 flex-col-reverse overflow-y-auto">
       {content}
     </div>
   )
diff --git a/web/app/_components/ChatBody/renderChatMessage.tsx b/web/app/_components/ChatBody/renderChatMessage.tsx
index c423d5a76..f493b72de 100644
--- a/web/app/_components/ChatBody/renderChatMessage.tsx
+++ b/web/app/_components/ChatBody/renderChatMessage.tsx
@@ -1,7 +1,8 @@
 import SimpleControlNetMessage from '../SimpleControlNetMessage'
 import SimpleImageMessage from '../SimpleImageMessage'
 import SimpleTextMessage from '../SimpleTextMessage'
-import { ChatMessage, MessageType } from '@/_models/ChatMessage'
+import { ChatMessage, MessageType } from '@models/ChatMessage'
+
 
 export default function renderChatMessage({
   id,
diff --git a/web/app/_components/ChatItem/index.tsx b/web/app/_components/ChatItem/index.tsx
index 00a0bbd52..0b425a9f0 100644
--- a/web/app/_components/ChatItem/index.tsx
+++ b/web/app/_components/ChatItem/index.tsx
@@ -1,7 +1,6 @@
 /* eslint-disable react/display-name */
 import React, { forwardRef } from 'react'
 import renderChatMessage from '../ChatBody/renderChatMessage'
-import { ChatMessage } from '@/_models/ChatMessage'
 
 type Props = {
   message: ChatMessage
diff --git a/web/app/_components/CompactLogo/index.tsx b/web/app/_components/CompactLogo/index.tsx
deleted file mode 100644
index 6eb8f0718..000000000
--- a/web/app/_components/CompactLogo/index.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react'
-import JanImage from '../JanImage'
-import { useSetAtom } from 'jotai'
-import { setActiveConvoIdAtom } from '@/_helpers/atoms/Conversation.atom'
-
-const CompactLogo: React.FC = () => {
-  const setActiveConvoId = useSetAtom(setActiveConvoIdAtom)
-
-  return (
-    <button onClick={() => setActiveConvoId(undefined)}>
-      <JanImage imageUrl="icons/app_icon.svg" width={28} height={28} />
-    </button>
-  )
-}
-
-export default React.memo(CompactLogo)
diff --git a/web/app/_components/ConfirmDeleteConversationModal/index.tsx b/web/app/_components/ConfirmDeleteConversationModal/index.tsx
index b287c2170..68d3a78c0 100644
--- a/web/app/_components/ConfirmDeleteConversationModal/index.tsx
+++ b/web/app/_components/ConfirmDeleteConversationModal/index.tsx
@@ -1,5 +1,5 @@
-import { showConfirmDeleteConversationModalAtom } from '@/_helpers/atoms/Modal.atom'
-import useDeleteConversation from '@/_hooks/useDeleteConversation'
+import { showConfirmDeleteConversationModalAtom } from '@helpers/atoms/Modal.atom'
+import useDeleteConversation from '@hooks/useDeleteConversation'
 import { Dialog, Transition } from '@headlessui/react'
 import { ExclamationTriangleIcon } from '@heroicons/react/24/outline'
 import { useAtom } from 'jotai'
@@ -31,10 +31,10 @@ const ConfirmDeleteConversationModal: React.FC = () => {
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+          <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-10 overflow-y-auto">
+        <div className="fixed inset-0 z-50 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}
@@ -45,7 +45,7 @@ const ConfirmDeleteConversationModal: React.FC = () => {
               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">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-border bg-background/90 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">
                     <ExclamationTriangleIcon
@@ -54,14 +54,11 @@ const ConfirmDeleteConversationModal: React.FC = () => {
                     />
                   </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"
-                    >
+                    <Dialog.Title as="h3" className="font-semibold leading-6">
                       Delete Conversation
                     </Dialog.Title>
                     <div className="mt-2">
-                      <p className="text-sm text-gray-500">
+                      <p className="text-muted-foreground">
                         Are you sure you want to delete this conversation? All
                         of messages will be permanently removed. This action
                         cannot be undone.
@@ -72,14 +69,14 @@ const ConfirmDeleteConversationModal: React.FC = () => {
                 <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"
+                    className="inline-flex w-full justify-center rounded-md bg-red-600 px-3 py-2 text-xs font-semibold text-white shadow-sm hover:bg-red-500 sm:ml-3 sm:w-auto"
                     onClick={() => onConfirmDelete()}
                   >
                     Delete
                   </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"
+                    className="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-xs 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)}
                     ref={cancelButtonRef}
                   >
diff --git a/web/app/_components/ConfirmDeleteModelModal/index.tsx b/web/app/_components/ConfirmDeleteModelModal/index.tsx
index 75bccbfb5..94b6980e0 100644
--- a/web/app/_components/ConfirmDeleteModelModal/index.tsx
+++ b/web/app/_components/ConfirmDeleteModelModal/index.tsx
@@ -2,7 +2,7 @@ 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'
+import { showConfirmDeleteModalAtom } from '@helpers/atoms/Modal.atom'
 
 const ConfirmDeleteModelModal: React.FC = () => {
   const [show, setShow] = useAtom(showConfirmDeleteModalAtom)
diff --git a/web/app/_components/ConfirmSignOutModal/index.tsx b/web/app/_components/ConfirmSignOutModal/index.tsx
index 973642ccb..e62172b54 100644
--- a/web/app/_components/ConfirmSignOutModal/index.tsx
+++ b/web/app/_components/ConfirmSignOutModal/index.tsx
@@ -2,8 +2,8 @@ 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'
+import useSignOut from '@hooks/useSignOut'
+import { showConfirmSignOutModalAtom } from '@helpers/atoms/Modal.atom'
 
 const ConfirmSignOutModal: React.FC = () => {
   const [show, setShow] = useAtom(showConfirmSignOutModalAtom)
diff --git a/web/app/_components/ConversationalCard/index.tsx b/web/app/_components/ConversationalCard/index.tsx
index fa1d57782..9cc550acc 100644
--- a/web/app/_components/ConversationalCard/index.tsx
+++ b/web/app/_components/ConversationalCard/index.tsx
@@ -1,8 +1,7 @@
 import React from 'react'
 import Image from 'next/image'
-import useCreateConversation from '@/_hooks/useCreateConversation'
-import { AssistantModel } from '@/_models/AssistantModel'
-import { PlayIcon } from "@heroicons/react/24/outline"
+import useCreateConversation from '@hooks/useCreateConversation'
+import { PlayIcon } from '@heroicons/react/24/outline'
 
 type Props = {
   model: AssistantModel
diff --git a/web/app/_components/ConversationalList/index.tsx b/web/app/_components/ConversationalList/index.tsx
index 7d43a1616..6a49318fb 100644
--- a/web/app/_components/ConversationalList/index.tsx
+++ b/web/app/_components/ConversationalList/index.tsx
@@ -1,4 +1,3 @@
-import { AssistantModel } from '@/_models/AssistantModel'
 import ConversationalCard from '../ConversationalCard'
 import { ChatBubbleBottomCenterTextIcon } from '@heroicons/react/24/outline'
 
diff --git a/web/app/_components/CreateBotContainer/index.tsx b/web/app/_components/CreateBotContainer/index.tsx
index 60fa92854..52111e21f 100644
--- a/web/app/_components/CreateBotContainer/index.tsx
+++ b/web/app/_components/CreateBotContainer/index.tsx
@@ -5,18 +5,21 @@ import DropdownBox from '../DropdownBox'
 import PrimaryButton from '../PrimaryButton'
 import ToggleSwitch from '../ToggleSwitch'
 import CreateBotPromptInput from '../CreateBotPromptInput'
-import { useGetDownloadedModels } from '@/_hooks/useGetDownloadedModels'
-import { Bot } from '@/_models/Bot'
+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 { activeBotAtom } from '@helpers/atoms/Bot.atom'
+import {
+  leftSideBarExpandStateAtom,
+  rightSideBarExpandStateAtom,
+} from '@helpers/atoms/SideBarExpand.atom'
 import {
   MainViewState,
   setMainViewStateAtom,
-} from '@/_helpers/atoms/MainView.atom'
+} from '@helpers/atoms/MainView.atom'
 import { executeSerial } from '../../../../electron/core/plugin-manager/execution/extension-manager'
 import { DataService } from '@janhq/core'
 
@@ -24,16 +27,18 @@ 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).then(async () => {
-        setActiveBot(bot)
-        setMainViewState(MainViewState.BotInfo)
-      })
+      await executeSerial(DataService.CreateBot, bot)
     } catch (err) {
       alert(err)
       console.error(err)
+    } finally {
+      setMainViewState(MainViewState.BotInfo)
+      setActiveBot(bot)
+      setRightSideBarVisibility(true)
     }
   }
 
@@ -73,9 +78,10 @@ const CreateBotContainer: React.FC = () => {
     createBot(bot)
   }
 
-  let models = downloadedModels.map((model) => {
+  let models = downloadedModels.map((model: { _id: any }) => {
     return model._id
   })
+
   models = ['Select a model', ...models]
 
   return (
@@ -84,7 +90,7 @@ const CreateBotContainer: React.FC = () => {
       onSubmit={handleSubmit(onSubmit)}
     >
       <div className="mx-6 mt-3 flex items-center justify-between gap-3">
-        <span className="text-3xl font-bold text-gray-900">Create Bot</span>
+        <span className="text-lg font-bold">Create Bot</span>
         <div className="flex gap-3">
           <PrimaryButton isSubmit title="Create" />
         </div>
@@ -108,7 +114,7 @@ const CreateBotContainer: React.FC = () => {
             control={control}
           />
 
-          <div className="flex flex-col gap-4 pb-2">
+          <div className="flex flex-col pb-2">
             <DropdownBox
               id="modelId"
               title="Model"
@@ -116,30 +122,23 @@ const CreateBotContainer: React.FC = () => {
               control={control}
               required={true}
             />
+          </div>
 
-            <CreateBotPromptInput
-              id="systemPrompt"
+          <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}
-              required
             />
-
-            <div className="flex flex-col gap-0.5">
-              <label className="block text-base font-bold text-gray-900">
-                Bot access
-              </label>
-              <span className="pb-2 text-sm text-[#737d7d]">
-                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}
-              />
-            </div>
-
-            <p>Max tokens</p>
             <DraggableProgressBar
               id="maxTokens"
               control={control}
diff --git a/web/app/_components/CreateBotInAdvance/index.tsx b/web/app/_components/CreateBotInAdvance/index.tsx
new file mode 100644
index 000000000..8229ea333
--- /dev/null
+++ b/web/app/_components/CreateBotInAdvance/index.tsx
@@ -0,0 +1,98 @@
+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
index 33255f43d..2696faf91 100644
--- a/web/app/_components/CreateBotPromptInput/index.tsx
+++ b/web/app/_components/CreateBotPromptInput/index.tsx
@@ -1,30 +1,27 @@
-import React, { Fragment, use } from "react";
-import ToggleSwitch from "../ToggleSwitch";
-import { useController } from "react-hook-form";
+import React, { Fragment, use } from 'react'
+import ToggleSwitch from '../ToggleSwitch'
+import { useController } from 'react-hook-form'
 
 type Props = {
-  id: string;
-  control?: any;
-  required?: boolean;
-};
+  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 text-base text-gray-900 font-bold"
-        >
+        <label htmlFor="comment" className="block font-bold ">
           Prompt
         </label>
-        <p className="text-sm text-gray-400 font-normal">
+        <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
@@ -32,18 +29,18 @@ const CreateBotPromptInput: React.FC<Props> = ({ id, control, required }) => {
         </p>
         <ToggleSwitch
           id="visibleFromBotProfile"
-          title={"Prompt visible from bot profile"}
+          title={'Prompt visible from bot profile'}
           control={control}
         />
         <textarea
           rows={4}
-          className="block w-full resize-none rounded-md border-0 py-1.5 bg-transparent shadow-sm ring-1 ring-inset text-gray-900 ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+          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;
+export default CreateBotPromptInput
diff --git a/web/app/_components/CustomBotTemperature/index.tsx b/web/app/_components/CustomBotTemperature/index.tsx
index 92369cac0..ebc901abe 100644
--- a/web/app/_components/CustomBotTemperature/index.tsx
+++ b/web/app/_components/CustomBotTemperature/index.tsx
@@ -1,10 +1,10 @@
-import ToggleSwitch from "../ToggleSwitch";
-import DraggableProgressBar from "../DraggableProgressBar";
-import { Controller } from "react-hook-form";
+import ToggleSwitch from '../ToggleSwitch'
+import DraggableProgressBar from '../DraggableProgressBar'
+import { Controller } from 'react-hook-form'
 
 type Props = {
-  control?: any;
-};
+  control?: any
+}
 
 const CutomBotTemperature: React.FC<Props> = ({ control }) => (
   <div className="flex flex-col gap-2">
@@ -13,23 +13,29 @@ const CutomBotTemperature: React.FC<Props> = ({ control }) => (
       title="Custom temperature"
       control={control}
     />
-    <div className="text-gray-500 mt-1 text-[0.8em]">
-      Controls the creativity of the bot&apos;s responses. Higher values produce more
+    <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.
+      responses.`}
     </div>
     <span className="text-gray-900">default: 0.7</span>
     <Controller
       name="enableCustomTemperature"
       control={control}
       render={({ field: { value } }) => {
-        if (!value) return <div />;
+        if (!value) return <div />
         return (
-          <DraggableProgressBar id="customTemperature" control={control} min={0} max={1} step={0.01} />
-        );
+          <DraggableProgressBar
+            id="customTemperature"
+            control={control}
+            min={0}
+            max={1}
+            step={0.01}
+          />
+        )
       }}
     />
   </div>
-);
+)
 
-export default CutomBotTemperature;
+export default CutomBotTemperature
diff --git a/web/app/_components/DownloadedModelCard/index.tsx b/web/app/_components/DownloadedModelCard/index.tsx
index 21cb5a5e9..2a0a86ebe 100644
--- a/web/app/_components/DownloadedModelCard/index.tsx
+++ b/web/app/_components/DownloadedModelCard/index.tsx
@@ -1,4 +1,3 @@
-import { AssistantModel } from '@/_models/AssistantModel'
 import DownloadModelContent from '../DownloadModelContent'
 
 type Props = {
diff --git a/web/app/_components/DownloadedModelTable/index.tsx b/web/app/_components/DownloadedModelTable/index.tsx
index 781cf7805..c9c2f0ad6 100644
--- a/web/app/_components/DownloadedModelTable/index.tsx
+++ b/web/app/_components/DownloadedModelTable/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import SearchBar from '../SearchBar'
 import ModelTable from '../ModelTable'
-import { useGetDownloadedModels } from '@/_hooks/useGetDownloadedModels'
+import { useGetDownloadedModels } from '@hooks/useGetDownloadedModels'
 
 const DownloadedModelTable: React.FC = () => {
   const { downloadedModels } = useGetDownloadedModels()
@@ -9,11 +9,11 @@ const DownloadedModelTable: React.FC = () => {
   if (!downloadedModels || downloadedModels.length === 0) return null
 
   return (
-    <div className="pl-[63px] pr-[89px]">
-      <h3 className="mt-[50px] text-xl leading-[25px]">Downloaded Models</h3>
-      <div className="w-[568px] py-5">
+    <div className="mt-5">
+      {/* <h3 className="mt-[50px] text-xl leading-[25px]">Downloaded Models</h3> */}
+      {/* <div className="w-[568px] py-5">
         <SearchBar />
-      </div>
+      </div> */}
       <ModelTable models={downloadedModels} />
     </div>
   )
diff --git a/web/app/_components/DownloadingModelTable/index.tsx b/web/app/_components/DownloadingModelTable/index.tsx
index 654740215..96a3fbd4f 100644
--- a/web/app/_components/DownloadingModelTable/index.tsx
+++ b/web/app/_components/DownloadingModelTable/index.tsx
@@ -1,8 +1,7 @@
 import React, { Fragment } from 'react'
-import { modelDownloadStateAtom } from '@/_helpers/atoms/DownloadState.atom'
+import { modelDownloadStateAtom } from '@helpers/atoms/DownloadState.atom'
 import { useAtomValue } from 'jotai'
 import ModelDownloadingTable from '../ModelDownloadingTable'
-import { DownloadState } from '@/_models/DownloadState'
 
 const DownloadingModelTable: React.FC = () => {
   const modelDownloadState = useAtomValue(modelDownloadStateAtom)
diff --git a/web/app/_components/DraggableProgressBar/index.tsx b/web/app/_components/DraggableProgressBar/index.tsx
index 1c9edf191..0b38b2c59 100644
--- a/web/app/_components/DraggableProgressBar/index.tsx
+++ b/web/app/_components/DraggableProgressBar/index.tsx
@@ -1,23 +1,29 @@
-import { formatTwoDigits } from "@/_utils/converter";
-import React from "react";
-import { Controller, useController } from "react-hook-form";
+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;
-};
+  id: string
+  control: any
+  min: number
+  max: number
+  step: number
+}
 
-const DraggableProgressBar: React.FC<Props> = ({ id, control, min, max, step }) => {
+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 mt-2">
+    <div className="flex items-center gap-2">
       <input
         {...field}
         className="flex-1"
@@ -30,13 +36,13 @@ const DraggableProgressBar: React.FC<Props> = ({ id, control, min, max, step })
         name={id}
         control={control}
         render={({ field: { value } }) => (
-          <span className="border border-[#737d7d] rounded-md py-1 px-2 text-gray-900">
+          <span className="rounded-md border border-border px-2 py-1 text-accent">
             {formatTwoDigits(value)}
           </span>
         )}
       />
     </div>
-  );
-};
+  )
+}
 
-export default DraggableProgressBar;
+export default DraggableProgressBar
diff --git a/web/app/_components/DropdownBox/index.tsx b/web/app/_components/DropdownBox/index.tsx
index 43f36a990..c20006dc2 100644
--- a/web/app/_components/DropdownBox/index.tsx
+++ b/web/app/_components/DropdownBox/index.tsx
@@ -24,9 +24,9 @@ const DropdownBox: React.FC<Props> = ({
 
   return (
     <Fragment>
-      <label className="block text-base font-bold text-gray-900">{title}</label>
+      <label className="block font-bold">{title}</label>
       <select
-        className="mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6"
+        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) => (
diff --git a/web/app/_components/ExpandableHeader/index.tsx b/web/app/_components/ExpandableHeader/index.tsx
index 11d4851c2..b5baf1770 100644
--- a/web/app/_components/ExpandableHeader/index.tsx
+++ b/web/app/_components/ExpandableHeader/index.tsx
@@ -2,22 +2,11 @@ import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline'
 
 type Props = {
   title: string
-  expanded: boolean
-  onClick: () => void
 }
 
-const ExpandableHeader: React.FC<Props> = ({ title, expanded, onClick }) => (
-  <button onClick={onClick} className="flex items-center justify-between px-2">
-    <h2 className="pl-1 text-xs font-bold leading-[12px] text-gray-400">
-      {title}
-    </h2>
-    <div className="mr-2">
-      {expanded ? (
-        <ChevronDownIcon width={12} height={12} color="#6B7280" />
-      ) : (
-        <ChevronUpIcon width={12} height={12} color="#6B7280" />
-      )}
-    </div>
+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>
 )
 
diff --git a/web/app/_components/ExploreModelContainer/index.tsx b/web/app/_components/ExploreModelContainer/index.tsx
index cee6f1255..1d4b2b4a3 100644
--- a/web/app/_components/ExploreModelContainer/index.tsx
+++ b/web/app/_components/ExploreModelContainer/index.tsx
@@ -1,5 +1,5 @@
 import HeaderTitle from '../HeaderTitle'
-import ExploreModelList from '../ExploreModelList'
+import ExploreModelList from '../../../screens/ExploreModels/ExploreModelList'
 import ExploreModelFilter from '../ExploreModelFilter'
 
 const ExploreModelContainer: React.FC = () => (
diff --git a/web/app/_components/ExploreModelFilter/index.tsx b/web/app/_components/ExploreModelFilter/index.tsx
index d22a9cdf9..e5eb4f9d7 100644
--- a/web/app/_components/ExploreModelFilter/index.tsx
+++ b/web/app/_components/ExploreModelFilter/index.tsx
@@ -16,7 +16,7 @@ const tags = [
 const checkboxs = ['GGUF', 'TensorRT', 'Meow', 'JigglyPuff']
 
 const ExploreModelFilter: React.FC = () => {
-  const enabled = false
+  const enabled = true
   if (!enabled) return null
 
   return (
diff --git a/web/app/_components/ExploreModelItem/index.tsx b/web/app/_components/ExploreModelItem/index.tsx
index fe856aef2..fa4558a20 100644
--- a/web/app/_components/ExploreModelItem/index.tsx
+++ b/web/app/_components/ExploreModelItem/index.tsx
@@ -3,6 +3,7 @@
 'use client'
 
 import ExploreModelItemHeader from '../ExploreModelItemHeader'
+import { Button } from '@uikit'
 import ModelVersionList from '../ModelVersionList'
 import { Fragment, forwardRef, useEffect, useState } from 'react'
 import SimpleTag from '../SimpleTag'
@@ -14,10 +15,9 @@ import {
   UsecaseTag,
   VersionTag,
 } from '@/_components/SimpleTag/TagType'
-import { displayDate } from '@/_utils/datetime'
-import { Product } from '@/_models/Product'
-import useGetMostSuitableModelVersion from '@/_hooks/useGetMostSuitableModelVersion'
-import { toGigabytes } from '@/_utils/converter'
+import { displayDate } from '@utils/datetime'
+import useGetMostSuitableModelVersion from '@hooks/useGetMostSuitableModelVersion'
+import { toGigabytes } from '@utils/converter'
 
 type Props = {
   model: Product
@@ -32,6 +32,7 @@ const ExploreModelItem = forwardRef<HTMLDivElement, Props>(({ model }, ref) => {
 
   useEffect(() => {
     getMostSuitableModelVersion(availableVersions)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [availableVersions])
 
   if (!suitableModel) {
@@ -43,25 +44,30 @@ const ExploreModelItem = forwardRef<HTMLDivElement, Props>(({ model }, ref) => {
   return (
     <div
       ref={ref}
-      className="mb-4 flex flex-col rounded-md border border-gray-200"
+      className="border-border bg-background/60 mb-4 flex flex-col rounded-md border"
     >
       <ExploreModelItemHeader
         suitableModel={suitableModel}
         exploreModel={model}
       />
-      <div className="flex flex-col px-[26px] py-[22px]">
+      <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-8">
+          <div className="flex flex-1 flex-col gap-y-4">
             <div className="flex flex-col gap-1">
-              <div className="text-sm font-medium text-gray-500">
-                Release Date
-              </div>
-              <div className="text-sm font-normal text-gray-900">
+              <div className="font-semibold">Release Date</div>
+              <p className="text-muted-foreground mt-1">
                 {displayDate(model.releaseDate)}
-              </div>
+              </p>
             </div>
             <div className="flex flex-col gap-2">
-              <div className="text-sm font-medium text-gray-500">Version</div>
+              <div className="font-semibold">Version</div>
               <div className="flex gap-2">
                 <SimpleTag
                   title={model.version}
@@ -81,17 +87,14 @@ const ExploreModelItem = forwardRef<HTMLDivElement, Props>(({ model }, ref) => {
               </div>
             </div>
           </div>
-          <div className="flex flex-1 flex-col gap-8">
+
+          <div className="flex flex-1 flex-col gap-y-4">
             <div>
-              <div className="text-sm font-medium text-gray-500">Author</div>
-              <div className="text-sm font-normal text-gray-900">
-                {model.author}
-              </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="text-sm font-medium text-gray-500">
-                Compatibility
-              </div>
+              <div className="font-semibold">Compatibility</div>
               <div className="flex gap-2">
                 <SimpleTag
                   title={usecase}
@@ -106,44 +109,42 @@ const ExploreModelItem = forwardRef<HTMLDivElement, Props>(({ model }, ref) => {
               </div>
             </div>
           </div>
-        </div>
-        <div className="mt-[26px] flex flex-col gap-1">
-          <span className="text-sm font-medium text-gray-500">About</span>
-          <span className="text-sm font-normal text-gray-500">
-            {model.longDescription}
-          </span>
-        </div>
-        <div className="mt-5 flex flex-col gap-2">
-          <span className="text-sm font-medium text-gray-500">Tags</span>
-          <div className="flex flex-wrap gap-2">
-            {model.tags.map((tag) => (
-              <SimpleTag
-                key={tag}
-                title={tag}
-                type={MiscellanousTag.MiscellanousDefault}
-                clickable={false}
-              />
-            ))}
+
+          <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>
-      {model.availableVersions?.length > 0 && (
-        <Fragment>
-          {show && (
-            <ModelVersionList
-              model={model}
-              versions={model.availableVersions}
-              recommendedVersion={suitableModel?._id ?? ''}
-            />
-          )}
-          <button
-            onClick={() => setShow(!show)}
-            className="border-t border-gray-200 bg-[#FBFBFB] px-4 py-2 text-left text-sm text-gray-500"
-          >
-            {!show ? '+ Show Available Versions' : '- Collapse'}
-          </button>
-        </Fragment>
-      )}
     </div>
   )
 })
diff --git a/web/app/_components/ExploreModelItemHeader/index.tsx b/web/app/_components/ExploreModelItemHeader/index.tsx
index a2b3c953a..5d668770c 100644
--- a/web/app/_components/ExploreModelItemHeader/index.tsx
+++ b/web/app/_components/ExploreModelItemHeader/index.tsx
@@ -1,19 +1,18 @@
 import SimpleTag from '../SimpleTag'
 import PrimaryButton from '../PrimaryButton'
-import { formatDownloadPercentage, toGigabytes } from '@/_utils/converter'
+import { formatDownloadPercentage, toGigabytes } from '@utils/converter'
 import SecondaryButton from '../SecondaryButton'
-import { Product } from '@/_models/Product'
 import { useCallback, useEffect, useMemo } from 'react'
-import { ModelVersion } from '@/_models/ModelVersion'
-import useGetPerformanceTag from '@/_hooks/useGetPerformanceTag'
-import useDownloadModel from '@/_hooks/useDownloadModel'
-import { useGetDownloadedModels } from '@/_hooks/useGetDownloadedModels'
-import { modelDownloadStateAtom } from '@/_helpers/atoms/DownloadState.atom'
+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'
+} from '@helpers/atoms/MainView.atom'
 
 type Props = {
   suitableModel: ModelVersion
@@ -37,35 +36,36 @@ const ExploreModelItemHeader: React.FC<Props> = ({
 
   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 = (
-    <PrimaryButton
-      title={
-        suitableModel.size
-          ? `Download (${toGigabytes(suitableModel.size)})`
-          : 'Download'
-      }
-      onClick={() => onDownloadClick()}
-    />
+    <Button themes="accent" onClick={() => onDownloadClick()}>
+      {suitableModel.size
+        ? `Download (${toGigabytes(suitableModel.size)})`
+        : 'Download'}
+    </Button>
   )
 
   if (isDownloaded) {
     downloadButton = (
-      <PrimaryButton
-        title="View Downloaded Model"
+      <Button
+        size="sm"
+        themes="accent"
         onClick={() => {
           setMainViewState(MainViewState.MyModel)
         }}
-        className="bg-green-500 hover:bg-green-400"
-      />
+      >
+        View Downloaded Model
+      </Button>
     )
   }
 
@@ -82,7 +82,7 @@ const ExploreModelItemHeader: React.FC<Props> = ({
   }
 
   return (
-    <div className="flex items-center justify-between border-b border-gray-200 p-4">
+    <div className="border-border bg-background/50 flex items-center justify-between rounded-t-md border-b px-4 py-2">
       <div className="flex items-center gap-2">
         <span>{exploreModel.name}</span>
         {performanceTag && (
diff --git a/web/app/_components/ExploreModelList/index.tsx b/web/app/_components/ExploreModelList/index.tsx
deleted file mode 100644
index 7c9ec8f9d..000000000
--- a/web/app/_components/ExploreModelList/index.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React, { useEffect } from 'react'
-import ExploreModelItem from '../ExploreModelItem'
-import { getConfiguredModels } from '@/_hooks/useGetDownloadedModels'
-import useGetConfiguredModels from '@/_hooks/useGetConfiguredModels'
-import { Waveform } from '@uiball/loaders'
-
-const ExploreModelList: React.FC = () => {
-  const { loading, models } = useGetConfiguredModels()
-
-  useEffect(() => {
-    getConfiguredModels()
-  }, [])
-
-  return (
-    <div className="scroll flex flex-1 flex-col overflow-y-auto">
-      {loading && (
-        <div className="mx-auto">
-          <Waveform size={24} color="#CBD5E0" />
-        </div>
-      )}
-      {models.map((item) => (
-        <ExploreModelItem key={item._id} model={item} />
-      ))}
-    </div>
-  )
-}
-
-export default ExploreModelList
diff --git a/web/app/_components/Footer/index.tsx b/web/app/_components/Footer/index.tsx
deleted file mode 100644
index e424752cd..000000000
--- a/web/app/_components/Footer/index.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import Image from 'next/image'
-import Link from 'next/link'
-
-// DEPRECATED
-export default function Footer() {
-  return (
-    <div className="container m-auto flex items-center justify-between">
-      <div className="flex items-center gap-3">
-        <Image src={'icons/app_icon.svg'} width={32} height={32} alt="" />
-        <span>Jan</span>
-      </div>
-      <div className="my-6 flex gap-4">
-        <Link href="/privacy" className="cursor-pointer">
-          Privacy
-        </Link>
-        <span>&#8226;</span>
-        <Link href="/support" className="cursor-pointer">
-          Support
-        </Link>
-      </div>
-    </div>
-  )
-}
diff --git a/web/app/_components/HamburgerButton/index.tsx b/web/app/_components/HamburgerButton/index.tsx
index ba41679c6..95a1f2e5f 100644
--- a/web/app/_components/HamburgerButton/index.tsx
+++ b/web/app/_components/HamburgerButton/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { showingMobilePaneAtom } from '@/_helpers/atoms/Modal.atom'
+import { showingMobilePaneAtom } from '@helpers/atoms/Modal.atom'
 import { Bars3Icon } from '@heroicons/react/24/outline'
 import { useSetAtom } from 'jotai'
 import React from 'react'
diff --git a/web/app/_components/HistoryItem/index.tsx b/web/app/_components/HistoryItem/index.tsx
index 70c03cb4f..9f084f2bc 100644
--- a/web/app/_components/HistoryItem/index.tsx
+++ b/web/app/_components/HistoryItem/index.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import { useAtomValue, useSetAtom } from 'jotai'
 import Image from 'next/image'
-import { Conversation } from '@/_models/Conversation'
 import { ModelManagementService } from '@janhq/core'
 import { executeSerial } from '../../../../electron/core/plugin-manager/execution/extension-manager'
 import {
@@ -9,13 +8,14 @@ import {
   setActiveConvoIdAtom,
   updateConversationErrorAtom,
   updateConversationWaitingForResponseAtom,
-} from '@/_helpers/atoms/Conversation.atom'
+} from '@helpers/atoms/Conversation.atom'
 import {
   setMainViewStateAtom,
   MainViewState,
-} from '@/_helpers/atoms/MainView.atom'
-import useInitModel from '@/_hooks/useInitModel'
-import { displayDate } from '@/_utils/datetime'
+} from '@helpers/atoms/MainView.atom'
+import useInitModel from '@hooks/useInitModel'
+import { displayDate } from '@utils/datetime'
+import { twMerge } from 'tailwind-merge'
 
 type Props = {
   conversation: Conversation
@@ -35,9 +35,7 @@ const HistoryItem: React.FC<Props> = ({
   const setMainViewState = useSetAtom(setMainViewStateAtom)
   const activeConvoId = useAtomValue(getActiveConvoIdAtom)
   const setActiveConvoId = useSetAtom(setActiveConvoIdAtom)
-  const updateConvWaiting = useSetAtom(
-    updateConversationWaitingForResponseAtom
-  )
+  const updateConvWaiting = useSetAtom(updateConversationWaitingForResponseAtom)
   const updateConvError = useSetAtom(updateConversationErrorAtom)
   const isSelected = activeConvoId === conversation._id
 
@@ -62,43 +60,33 @@ const HistoryItem: React.FC<Props> = ({
       setMainViewState(MainViewState.Conversation)
       setActiveConvoId(conversation._id)
     }
-  };
+  }
 
-  const backgroundColor = isSelected
-    ? "bg-gray-100 dark:bg-gray-700"
-    : "bg-white dark:bg-gray-500"
-
-  const description = conversation?.lastMessage ?? "No new message"
+  const backgroundColor = isSelected ? 'bg-background/80' : 'bg-background/20'
+  const description = conversation?.lastMessage ?? 'No new message'
 
   return (
     <li
       role="button"
-      className={`ml-3 mr-2 flex flex-row rounded p-3 ${backgroundColor} hover:bg-hover-light`}
+      className={twMerge(
+        'flex flex-row rounded-md border border-border p-3',
+        backgroundColor
+      )}
       onClick={onClick}
     >
-      <div className="h-8 w-8">
-        <Image
-          width={32}
-          height={32}
-          src={avatarUrl ?? 'icons/app_icon.svg'}
-          className="aspect-square rounded-full"
-          alt=""
-        />
-      </div>
-
-      <div className="ml-2 flex flex-1 flex-col">
+      <div className="flex flex-1 flex-col">
         {/* title */}
-        <div className="flex">
-          <span className="line-clamp-1 flex-1 text-gray-900">
-            {summary ?? name}
-          </span>
-          <span className="line-clamp-1 text-xs leading-5 text-gray-500">
-            {updatedAt && displayDate(new Date(updatedAt).getTime())}
-          </span>
-        </div>
+
+        <span className="mb-1 line-clamp-1 leading-5 text-muted-foreground">
+          {updatedAt && displayDate(new Date(updatedAt).getTime())}
+        </span>
+
+        <span className="line-clamp-1">{summary ?? name}</span>
 
         {/* description */}
-        <span className="mt-1 line-clamp-2 text-gray-400">{description}</span>
+        <span className="mt-1 line-clamp-2 text-muted-foreground">
+          {description}
+        </span>
       </div>
     </li>
   )
diff --git a/web/app/_components/HistoryList/index.tsx b/web/app/_components/HistoryList/index.tsx
index c598d970a..91847b03a 100644
--- a/web/app/_components/HistoryList/index.tsx
+++ b/web/app/_components/HistoryList/index.tsx
@@ -2,15 +2,15 @@ import HistoryItem from '../HistoryItem'
 import { useEffect, useState } from 'react'
 import ExpandableHeader from '../ExpandableHeader'
 import { useAtomValue } from 'jotai'
-import { searchAtom } from '@/_helpers/JotaiWrapper'
-import useGetUserConversations from '@/_hooks/useGetUserConversations'
+import { searchAtom } from '@helpers/JotaiWrapper'
+import useGetUserConversations from '@hooks/useGetUserConversations'
 import SidebarEmptyHistory from '../SidebarEmptyHistory'
-import { userConversationsAtom } from '@/_helpers/atoms/Conversation.atom'
+import { userConversationsAtom } from '@helpers/atoms/Conversation.atom'
+import { twMerge } from 'tailwind-merge'
 
 const HistoryList: React.FC = () => {
   const conversations = useAtomValue(userConversationsAtom)
   const searchText = useAtomValue(searchAtom)
-  const [expand, setExpand] = useState<boolean>(true)
   const { getUserConversations } = useGetUserConversations()
 
   useEffect(() => {
@@ -18,17 +18,9 @@ const HistoryList: React.FC = () => {
   }, [])
 
   return (
-    <div className="flex flex-grow flex-col gap-2 overflow-hidden pt-3">
-      <ExpandableHeader
-        title="CHAT HISTORY"
-        expanded={expand}
-        onClick={() => setExpand(!expand)}
-      />
-      <ul
-        className={`scroll mt-1 flex flex-col gap-1 overflow-y-auto ${
-          !expand ? 'hidden ' : 'block'
-        }`}
-      >
+    <div className="flex flex-grow flex-col gap-2">
+      <ExpandableHeader title="CHAT HISTORY" />
+      <ul className={twMerge('mt-1 flex flex-col gap-y-3 overflow-y-auto')}>
         {conversations.length > 0 ? (
           conversations
             .filter(
diff --git a/web/app/_components/InputToolbar/index.tsx b/web/app/_components/InputToolbar/index.tsx
index 863813aee..ebb644bf5 100644
--- a/web/app/_components/InputToolbar/index.tsx
+++ b/web/app/_components/InputToolbar/index.tsx
@@ -1,21 +1,22 @@
+/* eslint-disable react-hooks/rules-of-hooks */
 'use client'
 
 import BasicPromptInput from '../BasicPromptInput'
 import BasicPromptAccessories from '../BasicPromptAccessories'
 import { useAtomValue, useSetAtom } from 'jotai'
-import { showingAdvancedPromptAtom } from '@/_helpers/atoms/Modal.atom'
+import { showingAdvancedPromptAtom } from '@helpers/atoms/Modal.atom'
 import SecondaryButton from '../SecondaryButton'
 import { Fragment, useEffect, useState } from 'react'
 import { PlusIcon } from '@heroicons/react/24/outline'
-import useCreateConversation from '@/_hooks/useCreateConversation'
-import { activeAssistantModelAtom } from '@/_helpers/atoms/Model.atom'
+import useCreateConversation from '@hooks/useCreateConversation'
+import { activeAssistantModelAtom } from '@helpers/atoms/Model.atom'
 import {
   currentConversationAtom,
   currentConvoStateAtom,
-} from '@/_helpers/atoms/Conversation.atom'
-import useGetBots from '@/_hooks/useGetBots'
-import { activeBotAtom } from '@/_helpers/atoms/Bot.atom'
-import { useGetDownloadedModels } from '@/_hooks/useGetDownloadedModels'
+} from '@helpers/atoms/Conversation.atom'
+import useGetBots from '@hooks/useGetBots'
+import { activeBotAtom } from '@helpers/atoms/Bot.atom'
+import { useGetDownloadedModels } from '@hooks/useGetDownloadedModels'
 
 const InputToolbar: React.FC = () => {
   const showingAdvancedPrompt = useAtomValue(showingAdvancedPromptAtom)
@@ -62,6 +63,7 @@ const InputToolbar: React.FC = () => {
       }
     }
     getReplyState()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentConvo])
 
   const onNewConversationClick = () => {
@@ -70,26 +72,19 @@ const InputToolbar: React.FC = () => {
     }
   }
 
-  if (showingAdvancedPrompt) {
-    return <div />
-  }
-
-  if (inputState === 'loading') {
-    return <div>Loading..</div>
-  }
-
-  if (inputState === 'disabled') {
-    // text italic
+  if (inputState === 'loading') return <div>Loading..</div>
 
+  if (inputState === 'disabled')
     return (
-      <p className="mx-auto my-5 line-clamp-2 text-ellipsis text-center text-sm italic text-gray-600">
-        {error}
-      </p>
+      <div className="bg-background/90 sticky bottom-0 flex items-center justify-center">
+        <p className="mx-auto my-5 line-clamp-2 text-ellipsis text-center italic text-gray-600">
+          {error}
+        </p>
+      </div>
     )
-  }
 
   return (
-    <Fragment>
+    <div className="bg-background/90 sticky bottom-0 w-full px-5 py-0">
       {currentConvoState?.error && (
         <div className="flex flex-row justify-center">
           <span className="mx-5 my-2 text-sm text-red-500">
@@ -105,13 +100,13 @@ const InputToolbar: React.FC = () => {
         />
       </div>
       {/* My text input */}
-      <div className="mx-12 mb-5 flex items-start space-x-4 md:mx-32 2xl:mx-64">
+      <div className="mb-5 flex items-start space-x-4">
         <div className="relative min-w-0 flex-1">
           <BasicPromptInput />
           <BasicPromptAccessories />
         </div>
       </div>
-    </Fragment>
+    </div>
   )
 }
 
diff --git a/web/app/_components/LeftContainer/index.tsx b/web/app/_components/LeftContainer/index.tsx
index 3485cc038..0a826c4fe 100644
--- a/web/app/_components/LeftContainer/index.tsx
+++ b/web/app/_components/LeftContainer/index.tsx
@@ -1,9 +1,9 @@
-import React, { Fragment } from "react"
-import HistoryList from "../HistoryList"
-import LeftHeaderAction from "../LeftHeaderAction"
-import { leftSideBarExpandStateAtom } from "@/_helpers/atoms/LeftSideBarExpand.atom"
-import { useAtomValue } from "jotai"
-import { Variants, motion } from "framer-motion"
+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: {
@@ -13,7 +13,7 @@ const leftSideBarVariants: Variants = {
     transition: { duration: 0.3 },
   },
   hide: {
-    x: "-100%",
+    x: '-100%',
     width: 0,
     opacity: 0,
     transition: { duration: 0.3 },
@@ -26,13 +26,13 @@ const LeftContainer: React.FC = () => {
   return (
     <motion.div
       initial={false}
-      animate={isVisible ? "show" : "hide"}
+      animate={isVisible ? 'show' : 'hide'}
       variants={leftSideBarVariants}
-      className="flex flex-col w-80 flex-shrink-0 border-r border-gray-200"
+      className="flex w-80 flex-shrink-0 flex-col dark:bg-gray-950/50"
     >
       {isVisible && (
         <Fragment>
-          <LeftHeaderAction />
+          {/* <LeftHeaderAction /> */}
           <HistoryList />
         </Fragment>
       )}
diff --git a/web/app/_components/LeftHeaderAction/index.tsx b/web/app/_components/LeftHeaderAction/index.tsx
index f5560219d..c506cb139 100644
--- a/web/app/_components/LeftHeaderAction/index.tsx
+++ b/web/app/_components/LeftHeaderAction/index.tsx
@@ -1,47 +1,47 @@
-"use client";
+'use client'
 
-import React from "react";
-import SecondaryButton from "../SecondaryButton";
-import { useSetAtom } from "jotai";
+import React from 'react'
+import SecondaryButton from '../SecondaryButton'
+import { useSetAtom } from 'jotai'
 import {
   MainViewState,
   setMainViewStateAtom,
-} from "@/_helpers/atoms/MainView.atom";
-import { MagnifyingGlassIcon, PlusIcon } from "@heroicons/react/24/outline";
-import { useGetDownloadedModels } from "@/_hooks/useGetDownloadedModels";
+} from '@helpers/atoms/MainView.atom'
+import { MagnifyingGlassIcon, PlusIcon } from '@heroicons/react/24/outline'
+import { useGetDownloadedModels } from '@hooks/useGetDownloadedModels'
 
 const LeftHeaderAction: React.FC = () => {
-  const setMainView = useSetAtom(setMainViewStateAtom);
-  const { downloadedModels } = useGetDownloadedModels();
+  const setMainView = useSetAtom(setMainViewStateAtom)
+  const { downloadedModels } = useGetDownloadedModels()
 
   const onExploreClick = () => {
-    setMainView(MainViewState.ExploreModel);
-  };
+    setMainView(MainViewState.ExploreModel)
+  }
 
   const onCreateBotClicked = () => {
     if (downloadedModels.length === 0) {
-      alert("You need to download at least one model to create a bot.");
-      return;
+      alert('You need to download at least one model to create a bot.')
+      return
     }
-    setMainView(MainViewState.CreateBot);
-  };
+    setMainView(MainViewState.CreateBot)
+  }
 
   return (
-    <div className="flex flex-row gap-2 mx-3 my-3">
+    <div className="sticky top-0 mb-4 flex flex-row gap-2">
       <SecondaryButton
-        title={"Explore"}
+        title={'Explore'}
         onClick={onExploreClick}
         className="flex-1"
         icon={<MagnifyingGlassIcon width={16} height={16} />}
       />
       <SecondaryButton
-        title={"Create bot"}
+        title={'Create bot'}
         onClick={onCreateBotClicked}
         className="flex-1"
         icon={<PlusIcon width={16} height={16} />}
       />
     </div>
-  );
-};
+  )
+}
 
-export default React.memo(LeftHeaderAction);
+export default React.memo(LeftHeaderAction)
diff --git a/web/app/_components/LeftRibbonNav/index.tsx b/web/app/_components/LeftRibbonNav/index.tsx
index 101f4f9aa..327cd730e 100644
--- a/web/app/_components/LeftRibbonNav/index.tsx
+++ b/web/app/_components/LeftRibbonNav/index.tsx
@@ -2,9 +2,9 @@ import {
   MainViewState,
   getMainViewStateAtom,
   setMainViewStateAtom,
-} from '@/_helpers/atoms/MainView.atom'
-import Image from 'next/image'
-import CompactLogo from '../CompactLogo'
+} from '@helpers/atoms/MainView.atom'
+
+import CompactLogo from '../../../containers/Logo/CompactLogo'
 import {
   ChatBubbleOvalLeftEllipsisIcon,
   Cog8ToothIcon,
@@ -13,24 +13,26 @@ import {
   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 { 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',
-    iconComponent: <CpuChipIcon width={24} height={24} color="#C7D2FE" />,
-    state: MainViewState.ExploreModel,
-  },
+  // {
+  //   name: 'Explore Models',
+  //   icon: <CpuChipIcon />,
+  //   state: MainViewState.ExploreModel,
+  // },
   {
     name: 'My Models',
-    iconComponent: <Squares2X2Icon width={24} height={24} color="#C7D2FE" />,
+    icon: <Icons name="layout-grid" />,
     state: MainViewState.MyModel,
   },
   {
     name: 'Settings',
-    iconComponent: <Cog8ToothIcon width={24} height={24} color="#C7D2FE" />,
+    icon: <Icons name="settings" />,
     state: MainViewState.Setting,
   },
 ]
@@ -51,7 +53,7 @@ const LeftRibbonNav: React.FC = () => {
   const bgColor = isConversationView ? 'bg-gray-500' : ''
 
   const onConversationClick = () => {
-    if (currentState === MainViewState.Conversation) return
+    // if (currentState === MainViewState.Conversation) return
     setMainViewState(MainViewState.Conversation)
   }
 
@@ -71,52 +73,42 @@ const LeftRibbonNav: React.FC = () => {
   }
 
   return (
-    <nav className="flex h-screen w-20 flex-col bg-gray-900">
-      <div className='mx-auto mt-4'>
+    <nav className="flex h-screen flex-shrink-0 flex-col items-center pt-10">
       <CompactLogo />
-      </div>
-
-      <div className="flex w-full flex-1 flex-col items-center justify-between px-3 py-6">
-        <div className="flex flex-1 flex-col gap-2">
-          <button
-            onClick={onConversationClick}
-            className={`rounded-lg p-4 ${bgColor} hover:bg-gray-400`}
-          >
+      <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="#C7D2FE"
+              color="text-white"
             />
           </button>
-          <button
-            onClick={onBotListClick}
-            className={`rounded-lg p-4 hover:bg-gray-400`}
-          >
-            <CubeTransparentIcon width={24} height={24} color="#C7D2FE" />
+          <button onClick={onBotListClick}>
+            <CubeTransparentIcon />
           </button>
         </div>
-        <ul className="flex flex-col gap-3">
+        <ul className="flex flex-col gap-3 py-8">
           {menu.map((item) => {
             const bgColor = currentState === item.state ? 'bg-gray-500' : ''
             return (
               <li
                 role="button"
-                data-testid={item.name}
                 key={item.name}
-                className={`rounded-lg p-4 ${bgColor} hover:bg-gray-400`}
+                className="item-center flex gap-x-2"
                 onClick={() => onMenuClick(item.state)}
               >
-                {item.iconComponent}
+                {item.icon}
+                <span className="text-xs">{item.name}</span>
               </li>
             )
           })}
         </ul>
       </div>
-
       {/* User avatar */}
-      <div className="flex items-center justify-center pb-5">
-        <Image src={'/icons/avatar.svg'} width={40} height={40} alt="" />
-      </div>
+      {/* <div className="pb-5 flex items-center justify-center">
+        <Image src={"/icons/avatar.svg"} width={40} height={40} alt="" />
+      </div> */}
     </nav>
   )
 }
diff --git a/web/app/_components/MainChat/index.tsx b/web/app/_components/MainChat/index.tsx
index 52dadeacd..063368218 100644
--- a/web/app/_components/MainChat/index.tsx
+++ b/web/app/_components/MainChat/index.tsx
@@ -1,5 +1,5 @@
-import ChatBody from "../ChatBody";
-import InputToolbar from "../InputToolbar";
+import ChatBody from '../ChatBody'
+import InputToolbar from '../InputToolbar'
 
 const MainChat: React.FC = () => (
   <div className="flex h-full w-full flex-col">
diff --git a/web/app/_components/MainContainer/index.tsx b/web/app/_components/MainContainer/index.tsx
index 987a93e88..19bf18646 100644
--- a/web/app/_components/MainContainer/index.tsx
+++ b/web/app/_components/MainContainer/index.tsx
@@ -1,21 +1,19 @@
-import React from "react"
-import LeftContainer from "../LeftContainer"
-import LeftRibbonNav from "../LeftRibbonNav"
-import MonitorBar from "../MonitorBar"
-import RightContainer from "../RightContainer"
-import CenterContainer from "../CenterContainer"
+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 h-full">
+    <div className="flex flex-1 flex-col ">
       <div className="flex flex-1 overflow-hidden">
         <LeftContainer />
         <CenterContainer />
         <RightContainer />
       </div>
-
       <MonitorBar />
     </div>
   </div>
diff --git a/web/app/_components/MainHeader/index.tsx b/web/app/_components/MainHeader/index.tsx
index 589cdaa9c..6f58121d1 100644
--- a/web/app/_components/MainHeader/index.tsx
+++ b/web/app/_components/MainHeader/index.tsx
@@ -1,19 +1,17 @@
-import { currentConversationAtom } from '@/_helpers/atoms/Conversation.atom'
+import { currentConversationAtom } from '@helpers/atoms/Conversation.atom'
 import {
   leftSideBarExpandStateAtom,
   rightSideBarExpandStateAtom,
-  showRightSideBarToggleAtom,
-} from '@/_helpers/atoms/LeftSideBarExpand.atom'
-import { TrashIcon } from '@heroicons/react/24/outline'
-import { showConfirmDeleteConversationModalAtom } from '@/_helpers/atoms/Modal.atom'
+} 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 Image from 'next/image'
+import { Trash2 } from 'lucide-react'
 
 const MainHeader: React.FC = () => {
   const setLeftSideBarVisibility = useSetAtom(leftSideBarExpandStateAtom)
   const setRightSideBarVisibility = useSetAtom(rightSideBarExpandStateAtom)
-  const showRightSideBarToggle = useAtomValue(showRightSideBarToggleAtom)
   const setShowConfirmDeleteConversationModal = useSetAtom(
     showConfirmDeleteConversationModalAtom
   )
@@ -22,43 +20,19 @@ const MainHeader: React.FC = () => {
   const currentConvo = useAtomValue(currentConversationAtom)
   let title = currentConvo?.name ?? ''
 
-  return (
-    <div className="flex justify-between bg-gray-200 px-2 py-3">
-      <Image
-        role="button"
-        alt=""
-        src="icons/ic_sidebar_off.svg"
-        width={24}
-        onClick={() => setLeftSideBarVisibility((prev) => !prev)}
-        height={24}
-      />
+  if (!activeConversation) return null
 
-      <span className="flex gap-0.5 text-base font-semibold leading-6">
-        {title}
-      </span>
+  return (
+    <div className="sticky top-0 border-b border-border bg-background/90 px-4 py-2">
+      <span className="font-semibold text-muted-foreground">{title}</span>
 
       {/* right most */}
-      <div className="flex gap-4">
-        {activeConversation != null && (
-          <TrashIcon
-            role="button"
-            width={24}
-            height={24}
-            color="#9CA3AF"
-            onClick={() => setShowConfirmDeleteConversationModal(true)}
-          />
-        )}
-
-        {showRightSideBarToggle && (
-          <Image
-            role="button"
-            alt=""
-            src="icons/ic_sidebar_off.svg"
-            width={24}
-            onClick={() => setRightSideBarVisibility((prev) => !prev)}
-            height={24}
-          />
-        )}
+      <div className="absolute right-4 top-2">
+        <Trash2
+          role="button"
+          size={16}
+          onClick={() => setShowConfirmDeleteConversationModal(true)}
+        />
       </div>
     </div>
   )
diff --git a/web/app/_components/MainView/index.tsx b/web/app/_components/MainView/index.tsx
index 4ed4347cd..bcf70590b 100644
--- a/web/app/_components/MainView/index.tsx
+++ b/web/app/_components/MainView/index.tsx
@@ -8,11 +8,10 @@ import ExploreModelContainer from '../ExploreModelContainer'
 import {
   MainViewState,
   getMainViewStateAtom,
-} from '@/_helpers/atoms/MainView.atom'
+} from '@helpers/atoms/MainView.atom'
 import EmptyChatContainer from '../EmptyChatContainer'
 import MainChat from '../MainChat'
 import CreateBotContainer from '../CreateBotContainer'
-import BotInfoContainer from '../BotInfoContainer'
 
 const MainView: React.FC = () => {
   const viewState = useAtomValue(getMainViewStateAtom)
@@ -38,9 +37,6 @@ const MainView: React.FC = () => {
     case MainViewState.Welcome:
       children = <Welcome />
       break
-    case MainViewState.BotInfo:
-      children = <BotInfoContainer />
-      break
     default:
       children = <MainChat />
       break
diff --git a/web/app/_components/MenuHeader/index.tsx b/web/app/_components/MenuHeader/index.tsx
index 0dc51ef97..07baf71a9 100644
--- a/web/app/_components/MenuHeader/index.tsx
+++ b/web/app/_components/MenuHeader/index.tsx
@@ -3,7 +3,7 @@ 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'
+import { showConfirmSignOutModalAtom } from '@helpers/atoms/Modal.atom'
 
 export const MenuHeader: React.FC = () => {
   const setShowConfirmSignOutModal = useSetAtom(showConfirmSignOutModalAtom)
diff --git a/web/app/_components/MobileMenuPane/index.tsx b/web/app/_components/MobileMenuPane/index.tsx
index d8b73196c..b99f2d472 100644
--- a/web/app/_components/MobileMenuPane/index.tsx
+++ b/web/app/_components/MobileMenuPane/index.tsx
@@ -3,7 +3,7 @@ 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'
+import { showingMobilePaneAtom } from '@helpers/atoms/Modal.atom'
 
 const MobileMenuPane: React.FC = () => {
   const [show, setShow] = useAtom(showingMobilePaneAtom)
diff --git a/web/app/_components/ModelActionButton/index.tsx b/web/app/_components/ModelActionButton/index.tsx
index afa7deaea..9bf0147bc 100644
--- a/web/app/_components/ModelActionButton/index.tsx
+++ b/web/app/_components/ModelActionButton/index.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
-import PrimaryButton from '../PrimaryButton'
+import { Button } from '@uikit'
+import ModelActionMenu from '../ModelActionMenu'
 
 export enum ModelActionType {
   Start = 'Start',
@@ -8,41 +9,45 @@ export enum ModelActionType {
 
 type ModelActionStyle = {
   title: string
-  backgroundColor: string
-  textColor: string
 }
 
 const modelActionMapper: Record<ModelActionType, ModelActionStyle> = {
   [ModelActionType.Start]: {
     title: 'Start',
-    backgroundColor: 'bg-blue-500 hover:bg-blue-600',
-    textColor: 'text-white',
   },
   [ModelActionType.Stop]: {
     title: 'Stop',
-    backgroundColor: 'bg-red-500 hover:bg-red-600',
-    textColor: 'text-white',
   },
 }
 
 type Props = {
   type: ModelActionType
   onActionClick: (type: ModelActionType) => void
+  onDeleteClick: () => void
 }
 
-const ModelActionButton: React.FC<Props> = ({ type, onActionClick }) => {
+const ModelActionButton: React.FC<Props> = ({
+  type,
+  onActionClick,
+  onDeleteClick,
+}) => {
   const styles = modelActionMapper[type]
   const onClick = () => {
     onActionClick(type)
   }
 
   return (
-    <td className="whitespace-nowrap px-6 py-4 text-sm">
-      <PrimaryButton
-        title={styles.title}
-        onClick={onClick}
-        className={styles.backgroundColor}
-      />
+    <td className="whitespace-nowrap px-3 py-2 text-right">
+      <div className="flex items-center justify-end gap-x-4">
+        <ModelActionMenu onDeleteClick={onDeleteClick} />
+        <Button
+          size="sm"
+          themes={styles.title === 'Start' ? 'accent' : 'default'}
+          onClick={onClick}
+        >
+          {styles.title} Model
+        </Button>
+      </div>
     </td>
   )
 }
diff --git a/web/app/_components/ModelActionMenu/index.tsx b/web/app/_components/ModelActionMenu/index.tsx
index 58c97585a..67a8499cf 100644
--- a/web/app/_components/ModelActionMenu/index.tsx
+++ b/web/app/_components/ModelActionMenu/index.tsx
@@ -7,36 +7,9 @@ type Props = {
 }
 
 const ModelActionMenu: React.FC<Props> = ({ onDeleteClick }) => (
-  <Menu as="div" className="relative flex-none">
-    <Menu.Button className="block text-gray-500 hover:text-gray-900">
-      <span className="sr-only">Open options</span>
-      <EllipsisVerticalIcon className="h-5 w-5" aria-hidden="true" />
-    </Menu.Button>
-    <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-50 mt-2 w-32 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-gray-900/5 focus:outline-none">
-        <Menu.Item>
-          {({ active }) => (
-            <button
-              className={`${
-                active ? 'bg-violet-500 text-white' : 'text-gray-900'
-              } group flex w-full items-center rounded-md px-2 py-2 text-sm`}
-              onClick={onDeleteClick}
-            >
-              Delete
-            </button>
-          )}
-        </Menu.Item>
-      </Menu.Items>
-    </Transition>
-  </Menu>
+  <button className="text-muted-foreground text-xs" onClick={onDeleteClick}>
+    Delete
+  </button>
 )
 
 export default ModelActionMenu
diff --git a/web/app/_components/ModelDownloadingButton/index.tsx b/web/app/_components/ModelDownloadingButton/index.tsx
index cebb2d661..2dbc0ac4e 100644
--- a/web/app/_components/ModelDownloadingButton/index.tsx
+++ b/web/app/_components/ModelDownloadingButton/index.tsx
@@ -1,4 +1,4 @@
-import { toGigabytes } from '@/_utils/converter'
+import { toGigabytes } from '@utils/converter'
 
 type Props = {
   total: number
diff --git a/web/app/_components/ModelDownloadingRow/index.tsx b/web/app/_components/ModelDownloadingRow/index.tsx
index d507d0615..affe399d7 100644
--- a/web/app/_components/ModelDownloadingRow/index.tsx
+++ b/web/app/_components/ModelDownloadingRow/index.tsx
@@ -1,10 +1,10 @@
 import React from 'react'
-import { DownloadState } from '@/_models/DownloadState'
+
 import {
   formatDownloadPercentage,
   formatDownloadSpeed,
   toGigabytes,
-} from '@/_utils/converter'
+} from '@utils/converter'
 
 type Props = {
   downloadState: DownloadState
diff --git a/web/app/_components/ModelDownloadingTable/index.tsx b/web/app/_components/ModelDownloadingTable/index.tsx
index bc5e35e12..29f8b0084 100644
--- a/web/app/_components/ModelDownloadingTable/index.tsx
+++ b/web/app/_components/ModelDownloadingTable/index.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import ModelTableHeader from '../ModelTableHeader'
-import { DownloadState } from '@/_models/DownloadState'
 import ModelDownloadingRow from '../ModelDownloadingRow'
 
 type Props = {
diff --git a/web/app/_components/ModelRow/index.tsx b/web/app/_components/ModelRow/index.tsx
index 6d9e01496..ae972747b 100644
--- a/web/app/_components/ModelRow/index.tsx
+++ b/web/app/_components/ModelRow/index.tsx
@@ -1,13 +1,11 @@
 import React, { useCallback } from 'react'
 import { ModelStatus, ModelStatusComponent } from '../ModelStatusComponent'
-import ModelActionMenu from '../ModelActionMenu'
 import { useAtomValue } from 'jotai'
 import ModelActionButton, { ModelActionType } from '../ModelActionButton'
-import useStartStopModel from '@/_hooks/useStartStopModel'
-import useDeleteModel from '@/_hooks/useDeleteModel'
-import { AssistantModel } from '@/_models/AssistantModel'
-import { activeAssistantModelAtom } from '@/_helpers/atoms/Model.atom'
-import { toGigabytes } from '@/_utils/converter'
+import useStartStopModel from '@hooks/useStartStopModel'
+import useDeleteModel from '@hooks/useDeleteModel'
+import { activeAssistantModelAtom } from '@helpers/atoms/Model.atom'
+import { toGigabytes } from '@utils/converter'
 
 type Props = {
   model: AssistantModel
@@ -38,32 +36,31 @@ const ModelRow: React.FC<Props> = ({ model }) => {
 
   const onDeleteClick = useCallback(() => {
     deleteModel(model)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [model])
 
   return (
-    <tr className="border-b border-gray-200 last:rounded-lg last:border-b-0">
-      <td className="flex flex-col whitespace-nowrap px-6 py-4 text-sm font-medium text-gray-900">
+    <tr className="bg-background/50 border-border border-b last:rounded-lg last:border-b-0">
+      <td className="text-muted-foreground whitespace-nowrap px-3 font-semibold">
         {model.name}
-        <span className="font-normal text-gray-500">{model.version}</span>
+        <span className="ml-2 font-semibold">v{model.version}</span>
       </td>
-      <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-500">
+      <td className="text-muted-foreground whitespace-nowrap px-3">
         <div className="flex flex-col justify-start">
           <span>GGUF</span>
         </div>
       </td>
-      <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-500">
+      <td className="text-muted-foreground whitespace-nowrap px-3">
         {toGigabytes(model.size)}
       </td>
-      <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-500">
+      <td className="text-muted-foreground whitespace-nowrap px-3">
         <ModelStatusComponent status={status} />
       </td>
       <ModelActionButton
         type={actionButtonType}
         onActionClick={onModelActionClick}
+        onDeleteClick={onDeleteClick}
       />
-      <td className="relative w-fit whitespace-nowrap px-6 py-4 text-right text-sm font-medium">
-        <ModelActionMenu onDeleteClick={onDeleteClick} />
-      </td>
     </tr>
   )
 }
diff --git a/web/app/_components/ModelSearchBar/index.tsx b/web/app/_components/ModelSearchBar/index.tsx
index 04ff6f726..2d62d2b68 100644
--- a/web/app/_components/ModelSearchBar/index.tsx
+++ b/web/app/_components/ModelSearchBar/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { searchingModelText } from '@/_helpers/JotaiWrapper'
+import { searchingModelText } from '@helpers/JotaiWrapper'
 import { MagnifyingGlassIcon } from '@heroicons/react/24/outline'
 import { useSetAtom } from 'jotai'
 import { useEffect, useState } from 'react'
diff --git a/web/app/_components/ModelSelector/index.tsx b/web/app/_components/ModelSelector/index.tsx
index bc6032783..b3864d238 100644
--- a/web/app/_components/ModelSelector/index.tsx
+++ b/web/app/_components/ModelSelector/index.tsx
@@ -2,9 +2,8 @@ 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 { AssistantModel } from '@/_models/AssistantModel'
+import { selectedModelAtom } from '@helpers/atoms/Model.atom'
+import { downloadedModelAtom } from '@helpers/atoms/DownloadedModel.atom'
 
 function classNames(...classes: any) {
   return classes.filter(Boolean).join(' ')
diff --git a/web/app/_components/ModelStatusComponent/index.tsx b/web/app/_components/ModelStatusComponent/index.tsx
index 08d4bb59f..871ee62b5 100644
--- a/web/app/_components/ModelStatusComponent/index.tsx
+++ b/web/app/_components/ModelStatusComponent/index.tsx
@@ -16,17 +16,17 @@ export const ModelStatusMapper: Record<ModelStatus, ModelStatusType> = {
   [ModelStatus.Installed]: {
     title: 'Installed',
     textColor: 'text-black',
-    backgroundColor: 'bg-gray-100',
+    backgroundColor: 'bg-gray-200 text-gray-600',
   },
   [ModelStatus.Active]: {
     title: 'Active',
-    textColor: 'text-black',
-    backgroundColor: 'bg-green-100',
+    textColor: 'text-green-800',
+    backgroundColor: 'bg-green-100 dark:bg-green-300',
   },
   [ModelStatus.RunningInNitro]: {
     title: 'Running in Nitro',
-    textColor: 'text-black',
-    backgroundColor: 'bg-green-100',
+    textColor: 'text-green-800',
+    backgroundColor: 'bg-green-100 dark:bg-green-300',
   },
 }
 
@@ -38,7 +38,7 @@ export const ModelStatusComponent: React.FC<Props> = ({ status }) => {
   const statusType = ModelStatusMapper[status]
   return (
     <div
-      className={`w-fit rounded-[10px] px-2.5 py-0.5 text-xs font-medium ${statusType.backgroundColor}`}
+      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
index 41bf49799..eaa6273f2 100644
--- a/web/app/_components/ModelTable/index.tsx
+++ b/web/app/_components/ModelTable/index.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import ModelRow from '../ModelRow'
 import ModelTableHeader from '../ModelTableHeader'
-import { AssistantModel } from '@/_models/AssistantModel'
 
 type Props = {
   models: AssistantModel[]
@@ -10,25 +9,25 @@ type Props = {
 const tableHeaders = ['MODEL', 'FORMAT', 'SIZE', 'STATUS', 'ACTIONS']
 
 const ModelTable: React.FC<Props> = ({ models }) => (
-  <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} />
+  <>
+    <div className="border-border overflow-hidden rounded-lg 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} />
           ))}
-          <th scope="col" className="relative w-fit px-6 py-3">
-            <span className="sr-only">Edit</span>
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        {models.map((model) => (
-          <ModelRow key={model._id} model={model} />
-        ))}
-      </tbody>
-    </table>
-  </div>
+        </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
index 0ac18d3dc..df00882c6 100644
--- a/web/app/_components/ModelTableHeader/index.tsx
+++ b/web/app/_components/ModelTableHeader/index.tsx
@@ -7,7 +7,7 @@ type Props = {
 const ModelTableHeader: React.FC<Props> = ({ title }) => (
   <th
     scope="col"
-    className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wide text-gray-500 first:rounded-tl-lg last:rounded-tr-lg"
+    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>
diff --git a/web/app/_components/ModelVersionItem/index.tsx b/web/app/_components/ModelVersionItem/index.tsx
index d0eb4c7ad..788c48b39 100644
--- a/web/app/_components/ModelVersionItem/index.tsx
+++ b/web/app/_components/ModelVersionItem/index.tsx
@@ -1,12 +1,10 @@
 import React, { useMemo } from 'react'
-import { formatDownloadPercentage, toGigabytes } from '@/_utils/converter'
+import { formatDownloadPercentage, toGigabytes } from '@utils/converter'
 import Image from 'next/image'
-import { Product } from '@/_models/Product'
-import useDownloadModel from '@/_hooks/useDownloadModel'
-import { modelDownloadStateAtom } from '@/_helpers/atoms/DownloadState.atom'
+import useDownloadModel from '@hooks/useDownloadModel'
+import { modelDownloadStateAtom } from '@helpers/atoms/DownloadState.atom'
 import { atom, useAtomValue } from 'jotai'
-import { ModelVersion } from '@/_models/ModelVersion'
-import { useGetDownloadedModels } from '@/_hooks/useGetDownloadedModels'
+import { useGetDownloadedModels } from '@hooks/useGetDownloadedModels'
 import SimpleTag from '../SimpleTag'
 import { RamRequired, UsecaseTag } from '../SimpleTag/TagType'
 
@@ -56,10 +54,9 @@ const ModelVersionItem: React.FC<Props> = ({
   const { maxRamRequired, usecase } = modelVersion
 
   return (
-    <div className="flex items-center justify-between gap-4 border-t border-gray-200 pb-3 pl-3 pr-4 pt-3 first:border-t-0">
+    <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">
-        <Image src={'/icons/app_icon.svg'} width={14} height={20} alt="" />
-        <span className="font-sm flex-1 text-gray-900">
+        <span className="font-sm text-muted-foreground mb-4 line-clamp-1 flex-1">
           {modelVersion.name}
         </span>
       </div>
@@ -75,9 +72,9 @@ const ModelVersionItem: React.FC<Props> = ({
             type={RamRequired.RamDefault}
             clickable={false}
           />
-        </div>
-        <div className="rounded bg-gray-200 px-2.5 py-0.5 text-xs font-medium">
-          {toGigabytes(modelVersion.size)}
+          <div className="bg-background border-border rounded-full border px-2.5 py-0.5 font-medium">
+            {toGigabytes(modelVersion.size)}
+          </div>
         </div>
         {downloadButton}
       </div>
diff --git a/web/app/_components/ModelVersionList/index.tsx b/web/app/_components/ModelVersionList/index.tsx
index 5ddf280fc..133f69409 100644
--- a/web/app/_components/ModelVersionList/index.tsx
+++ b/web/app/_components/ModelVersionList/index.tsx
@@ -1,7 +1,5 @@
 import React from 'react'
 import ModelVersionItem from '../ModelVersionItem'
-import { Product } from '@/_models/Product'
-import { ModelVersion } from '@/_models/ModelVersion'
 
 type Props = {
   model: Product
@@ -15,20 +13,15 @@ const ModelVersionList: React.FC<Props> = ({
   recommendedVersion,
 }) => {
   return (
-    <div className="border-t border-gray-200 px-4 py-5">
-      <div className="text-sm font-medium text-gray-500">
-        Available Versions
-      </div>
-      <div className="overflow-hidden rounded-lg border border-gray-200">
-        {versions.map((item) => (
-          <ModelVersionItem
-            key={item._id}
-            model={model}
-            modelVersion={item}
-            isRecommended={item._id === recommendedVersion}
-          />
-        ))}
-      </div>
+    <div className="pt-4">
+      {versions.map((item) => (
+        <ModelVersionItem
+          key={item._id}
+          model={model}
+          modelVersion={item}
+          isRecommended={item._id === recommendedVersion}
+        />
+      ))}
     </div>
   )
 }
diff --git a/web/app/_components/MonitorBar/index.tsx b/web/app/_components/MonitorBar/index.tsx
index 6d6b48503..e0302cc36 100644
--- a/web/app/_components/MonitorBar/index.tsx
+++ b/web/app/_components/MonitorBar/index.tsx
@@ -1,13 +1,12 @@
-import ProgressBar from '../ProgressBar'
-import SystemItem from '../SystemItem'
+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 { DownloadState } from '@/_models/DownloadState'
-import { formatDownloadPercentage } from '@/_utils/converter'
-import { activeAssistantModelAtom } from '@/_helpers/atoms/Model.atom'
+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 { activeAssistantModelAtom } from '@helpers/atoms/Model.atom'
 
 const MonitorBar: React.FC = () => {
   const progress = useAtomValue(appDownloadProgress)
@@ -22,7 +21,7 @@ const MonitorBar: React.FC = () => {
   }
 
   return (
-    <div className="flex flex-row items-center justify-between border-t border-gray-200">
+    <div className="flex flex-row items-center justify-between">
       {progress && progress >= 0 ? (
         <ProgressBar total={100} used={progress} />
       ) : null}
@@ -40,7 +39,7 @@ const MonitorBar: React.FC = () => {
         {activeModel && (
           <SystemItem name={`Active model: ${activeModel.name}`} value={''} />
         )}
-        <span className="text-sm text-gray-900">v{version}</span>
+        <span className="text-xs">v{version}</span>
       </div>
     </div>
   )
diff --git a/web/app/_components/Preferences.tsx b/web/app/_components/Preferences.tsx
index 18f864ac1..a9b2c1548 100644
--- a/web/app/_components/Preferences.tsx
+++ b/web/app/_components/Preferences.tsx
@@ -35,7 +35,6 @@ export const Preferences = () => {
   useEffect(() => {
     // @ts-ignore
     import(/* webpackIgnore: true */ PLUGIN_CATALOGS).then((module) => {
-      console.log(module)
       setPluginCatalog(module.default)
     })
   }, [])
@@ -149,8 +148,11 @@ export const Preferences = () => {
     if (timeout) {
       clearTimeout(timeout)
     }
-    if(extensionPoints.get(PluginService.OnPreferencesUpdate))
-    timeout = setTimeout(() => execute(PluginService.OnPreferencesUpdate), 100)
+    if (extensionPoints.get(PluginService.OnPreferencesUpdate))
+      timeout = setTimeout(
+        () => execute(PluginService.OnPreferencesUpdate),
+        100
+      )
   }
 
   /**
diff --git a/web/app/_components/PrimaryButton/index.tsx b/web/app/_components/PrimaryButton/index.tsx
index 1432fddce..97a7325a7 100644
--- a/web/app/_components/PrimaryButton/index.tsx
+++ b/web/app/_components/PrimaryButton/index.tsx
@@ -16,9 +16,9 @@ const PrimaryButton: React.FC<Props> = ({
   className,
 }) => (
   <button
-    onClick={() => onClick?.()}
-    type={isSubmit ? "submit" : "button"}
-    className={`line-clamp-1 flex-shrink-0 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-indigo-50 ${className} ${
+    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 ' : ''
     }}`}
   >
diff --git a/web/app/_components/ProgressSetting/index.tsx b/web/app/_components/ProgressSetting/index.tsx
index 306731a68..71cdc6b53 100644
--- a/web/app/_components/ProgressSetting/index.tsx
+++ b/web/app/_components/ProgressSetting/index.tsx
@@ -1,4 +1,4 @@
-import { formatTwoDigits } from '@/_utils/converter'
+import { formatTwoDigits } from '@utils/converter'
 import React from 'react'
 
 type Props = {
diff --git a/web/app/_components/RightContainer/index.tsx b/web/app/_components/RightContainer/index.tsx
index 93c51a537..401164eda 100644
--- a/web/app/_components/RightContainer/index.tsx
+++ b/web/app/_components/RightContainer/index.tsx
@@ -1,9 +1,9 @@
-import { rightSideBarExpandStateAtom } from "@/_helpers/atoms/LeftSideBarExpand.atom"
-import { Variants, motion } from "framer-motion"
-import { useAtomValue } from "jotai"
-import { Fragment } from "react"
-import BotSetting from "../BotSetting"
-import BotInfo from "../BotInfo"
+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: {
@@ -13,7 +13,7 @@ const variants: Variants = {
     transition: { duration: 0.3 },
   },
   hide: {
-    x: "100%",
+    x: '100%',
     width: 0,
     opacity: 0,
     transition: { duration: 0.3 },
@@ -26,9 +26,9 @@ const RightContainer = () => {
   return (
     <motion.div
       initial={false}
-      animate={isVisible ? "show" : "hide"}
+      animate={isVisible ? 'show' : 'hide'}
       variants={variants}
-      className="flex flex-col w-80 flex-shrink-0 py-3 border-l border-gray-200 overflow-y-auto scroll"
+      className="scroll flex w-80 flex-shrink-0 flex-col overflow-y-auto border-l border-gray-200 py-3"
     >
       {isVisible && (
         <Fragment>
diff --git a/web/app/_components/SearchBar/index.tsx b/web/app/_components/SearchBar/index.tsx
index 1743622f0..91b813fb1 100644
--- a/web/app/_components/SearchBar/index.tsx
+++ b/web/app/_components/SearchBar/index.tsx
@@ -1,4 +1,4 @@
-import { modelSearchAtom } from '@/_helpers/JotaiWrapper'
+import { modelSearchAtom } from '@helpers/JotaiWrapper'
 import { MagnifyingGlassIcon } from '@heroicons/react/24/outline'
 import { useSetAtom } from 'jotai'
 import { useDebouncedCallback } from 'use-debounce'
diff --git a/web/app/_components/SecondaryButton/index.tsx b/web/app/_components/SecondaryButton/index.tsx
index 295c0f8db..2491edeba 100644
--- a/web/app/_components/SecondaryButton/index.tsx
+++ b/web/app/_components/SecondaryButton/index.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import { Button } from '@uikit'
 
 type Props = {
   title: string
@@ -15,15 +16,10 @@ const SecondaryButton: React.FC<Props> = ({
   className,
   icon,
 }) => (
-  <button
-    disabled={disabled}
-    type="button"
-    onClick={onClick}
-    className={`flex items-center justify-center gap-1 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 ${className} line-clamp-1 flex-shrink-0`}
-  >
-    {icon}
+  <Button size="sm" disabled={disabled} type="button" onClick={onClick}>
+    {icon}&nbsp;
     {title}
-  </button>
+  </Button>
 )
 
 export default React.memo(SecondaryButton)
diff --git a/web/app/_components/SendButton/index.tsx b/web/app/_components/SendButton/index.tsx
index 172b1d897..77da5d5b2 100644
--- a/web/app/_components/SendButton/index.tsx
+++ b/web/app/_components/SendButton/index.tsx
@@ -1,7 +1,8 @@
-import { currentPromptAtom } from '@/_helpers/JotaiWrapper'
-import { currentConvoStateAtom } from '@/_helpers/atoms/Conversation.atom'
-import useSendChatMessage from '@/_hooks/useSendChatMessage'
+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'
 
 const SendButton: React.FC = () => {
   const [currentPrompt] = useAtom(currentPromptAtom)
@@ -11,19 +12,15 @@ const SendButton: React.FC = () => {
   const isWaitingForResponse = currentConvoState?.waitingForResponse ?? false
   const disabled = currentPrompt.trim().length === 0 || isWaitingForResponse
 
-  const disabledStyle = {
-    backgroundColor: '#F3F4F6',
-  }
-
   return (
-    <button
+    <Button
+      themes="accent"
       onClick={sendChatMessage}
-      style={disabled ? disabledStyle : {}}
+      disabled={disabled}
       type="submit"
-      className="inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
     >
       Send
-    </button>
+    </Button>
   )
 }
 
diff --git a/web/app/_components/SidebarEmptyHistory/index.tsx b/web/app/_components/SidebarEmptyHistory/index.tsx
index 9e6624597..9a8471567 100644
--- a/web/app/_components/SidebarEmptyHistory/index.tsx
+++ b/web/app/_components/SidebarEmptyHistory/index.tsx
@@ -1,16 +1,17 @@
-import useCreateConversation from '@/_hooks/useCreateConversation'
+import useCreateConversation from '@hooks/useCreateConversation'
 import PrimaryButton from '../PrimaryButton'
 import { useAtomValue, useSetAtom } from 'jotai'
 import { useEffect, useState } from 'react'
 import {
   MainViewState,
   setMainViewStateAtom,
-} from '@/_helpers/atoms/MainView.atom'
-import { activeAssistantModelAtom } from '@/_helpers/atoms/Model.atom'
-import useInitModel from '@/_hooks/useInitModel'
-import { useGetDownloadedModels } from '@/_hooks/useGetDownloadedModels'
-import { AssistantModel } from '@/_models/AssistantModel'
-import { ChatBubbleOvalLeftEllipsisIcon } from "@heroicons/react/24/outline"
+} from '@helpers/atoms/MainView.atom'
+import { activeAssistantModelAtom } from '@helpers/atoms/Model.atom'
+import useInitModel from '@hooks/useInitModel'
+import { useGetDownloadedModels } from '@hooks/useGetDownloadedModels'
+import { Button } from '@uikit'
+
+import {MessageCircle} from "lucide-react"
 
 enum ActionButton {
   DownloadModel = 'Download a Model',
@@ -53,13 +54,15 @@ const SidebarEmptyHistory: React.FC = () => {
 
   return (
     <div className="flex flex-col items-center gap-3 py-10">
-      <ChatBubbleOvalLeftEllipsisIcon width={32} height={32} />
-      <div className="flex flex-col items-center gap-6">
-        <div className="text-center text-sm text-gray-900">No Chat History</div>
-        <div className="text-center text-sm text-gray-500">
+      <MessageCircle size={32} />
+      <div className="flex flex-col items-center gap-y-2">
+        <h6 className="text-center text-base">No Chat History</h6>
+        <p className="text-center text-muted-foreground mb-6">
           Get started by creating a new chat.
-        </div>
-        <PrimaryButton title={action} onClick={onClick} />
+        </p>
+        <Button onClick={onClick} themes="accent" >
+          {action}
+        </Button>
       </div>
     </div>
   )
diff --git a/web/app/_components/SidebarMenuItem/index.tsx b/web/app/_components/SidebarMenuItem/index.tsx
index f3352e30b..de4eadaa7 100644
--- a/web/app/_components/SidebarMenuItem/index.tsx
+++ b/web/app/_components/SidebarMenuItem/index.tsx
@@ -5,7 +5,7 @@ import {
   MainViewState,
   getMainViewStateAtom,
   setMainViewStateAtom,
-} from '@/_helpers/atoms/MainView.atom'
+} from '@helpers/atoms/MainView.atom'
 
 type Props = {
   title: string
diff --git a/web/app/_components/SimpleControlNetMessage.tsx b/web/app/_components/SimpleControlNetMessage.tsx
index 1d0a45d37..759c6ac94 100644
--- a/web/app/_components/SimpleControlNetMessage.tsx
+++ b/web/app/_components/SimpleControlNetMessage.tsx
@@ -1,9 +1,9 @@
-import { displayDate } from '@/_utils/datetime'
+import { displayDate } from '../../utils/datetime'
 import Link from 'next/link'
 import React from 'react'
-import JanImage from './JanImage'
+import JanImage from '../../containers/JanImage'
 import Image from 'next/image'
-import { ArrowDownTrayIcon } from "@heroicons/react/24/outline"
+import { ArrowDownTrayIcon } from '@heroicons/react/24/outline'
 
 type Props = {
   avatarUrl?: string
diff --git a/web/app/_components/SimpleImageMessage/index.tsx b/web/app/_components/SimpleImageMessage/index.tsx
index 9fef50aa3..68f1adeea 100644
--- a/web/app/_components/SimpleImageMessage/index.tsx
+++ b/web/app/_components/SimpleImageMessage/index.tsx
@@ -1,6 +1,6 @@
 import Image from 'next/image'
-import JanImage from '../JanImage'
-import { displayDate } from '@/_utils/datetime'
+import JanImage from '../../../containers/JanImage'
+import { displayDate } from '@utils/datetime'
 import Link from 'next/link'
 
 type Props = {
diff --git a/web/app/_components/SimpleTag/TagStyleMapper.ts b/web/app/_components/SimpleTag/TagStyleMapper.ts
index 34bef5ffd..51be9327f 100644
--- a/web/app/_components/SimpleTag/TagStyleMapper.ts
+++ b/web/app/_components/SimpleTag/TagStyleMapper.ts
@@ -1,21 +1,22 @@
 import { TagType } from './TagType'
 
 export const tagStyleMapper: Record<TagType, string> = {
-  GGUF: 'bg-yellow-100 text-yellow-800',
+  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',
+    'text-green-700 ring-1 ring-inset ring-green-600/20 bg-green-50 dark:bg-green-200',
   PerformanceNeutral:
-    'bg-yellow-50 text-yellow-800 ring-1 ring-inset ring-yellow-600/20',
+    'bg-yellow-50 dark:bg-yellow-200 text-yellow-800 ring-1 ring-inset ring-yellow-600/20',
   PerformanceNegative:
-    'bg-red-50 ext-red-700 ring-1 ring-inset ring-red-600/10',
-  HardwareCompatible: 'bg-red-50 ext-red-700 ring-1 ring-inset ring-red-600/10',
+    '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 ext-red-700 ring-1 ring-inset ring-red-600/10',
-  FreeStyle: 'bg-gray-100 text-gray-800',
-  ExpectPerformanceMedium: 'bg-yellow-100 text-yellow-800',
-  Version: 'bg-red-100 text-yellow-800',
-  Default: 'bg-blue-100 text-blue-800',
-  RamDefault: 'bg-green-50 text-green-700',
-  UsecaseDefault: 'bg-orange-100 text-yellow-800',
-  MiscellanousDefault: 'bg-blue-100 text-blue-800',
+    '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
index 01bd5d71f..3864552d5 100644
--- a/web/app/_components/SimpleTag/index.tsx
+++ b/web/app/_components/SimpleTag/index.tsx
@@ -19,7 +19,7 @@ const SimpleTag: React.FC<Props> = ({
   if (!clickable) {
     return (
       <div
-        className={`line-clamp-1 max-w-[40%] items-center rounded px-2.5 py-0.5 text-xs font-medium ${tagStyleMapper[type]}`}
+        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>
@@ -29,7 +29,7 @@ const SimpleTag: React.FC<Props> = ({
   return (
     <button
       onClick={onClick}
-      className={`line-clamp-1 max-w-[40%] items-center rounded px-2.5 py-0.5 text-xs font-medium ${tagStyleMapper[type]}`}
+      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>
diff --git a/web/app/_components/SimpleTextMessage/index.tsx b/web/app/_components/SimpleTextMessage/index.tsx
index 72ab5f484..339768d03 100644
--- a/web/app/_components/SimpleTextMessage/index.tsx
+++ b/web/app/_components/SimpleTextMessage/index.tsx
@@ -1,11 +1,12 @@
 import React from 'react'
-import { displayDate } from '@/_utils/datetime'
+import { displayDate } from '@utils/datetime'
 import Image from 'next/image'
-import { MessageSenderType } from '@/_models/ChatMessage'
+
 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
@@ -50,7 +51,7 @@ const SimpleTextMessage: React.FC<Props> = ({
 
   return (
     <div
-      className={`flex items-start gap-2 px-12 md:px-32 2xl:px-64 ${backgroundColor} py-5`}
+      className={`border-border/50 flex items-start gap-x-4 gap-y-2 border-b px-4 py-5 last:border-none`}
     >
       <Image
         className="rounded-full"
@@ -61,10 +62,10 @@ const SimpleTextMessage: React.FC<Props> = ({
       />
       <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] text-[#1B1B1B] dark:text-[#d1d5db]">
+          <div className="text-sm font-extrabold leading-[15.2px] ">
             {senderName}
           </div>
-          <div className="text-xs font-medium leading-[13.2px] text-gray-400">
+          <div className="text-xs font-medium leading-[13.2px]">
             {displayDate(createdAt)}
           </div>
         </div>
@@ -72,7 +73,7 @@ const SimpleTextMessage: React.FC<Props> = ({
           <LoadingIndicator />
         ) : (
           <span
-            className="text-sm font-normal leading-loose"
+            className="text-muted-foreground text-xs font-normal leading-loose"
             dangerouslySetInnerHTML={{ __html: parsedText }}
           />
         )}
diff --git a/web/app/_components/SystemItem/index.tsx b/web/app/_components/SystemItem/index.tsx
deleted file mode 100644
index c9005e934..000000000
--- a/web/app/_components/SystemItem/index.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-type Props = {
-  name: string
-  value: string
-}
-
-const SystemItem: React.FC<Props> = ({ name, value }) => (
-  <div className="my-1 flex gap-2 pl-4">
-    <div className="flex w-max gap-2.5 text-sm font-bold text-gray-900">
-      {name}
-    </div>
-    <span className="text-sm text-gray-900">{value}</span>
-  </div>
-)
-
-export default SystemItem
diff --git a/web/app/_components/TextAreaWithTitle/index.tsx b/web/app/_components/TextAreaWithTitle/index.tsx
index d7502c585..0b205be59 100644
--- a/web/app/_components/TextAreaWithTitle/index.tsx
+++ b/web/app/_components/TextAreaWithTitle/index.tsx
@@ -1,14 +1,14 @@
-import React from "react";
-import { useController } from "react-hook-form";
+import React from 'react'
+import { useController } from 'react-hook-form'
 
 type Props = {
-  id: string;
-  title: string;
-  placeholder: string;
-  description?: string;
-  control?: any;
-  required?: boolean;
-};
+  id: string
+  title: string
+  placeholder: string
+  description?: string
+  control?: any
+  required?: boolean
+}
 
 const TextAreaWithTitle: React.FC<Props> = ({
   id,
@@ -22,27 +22,24 @@ const TextAreaWithTitle: React.FC<Props> = ({
     name: id,
     control: control,
     rules: { required: required },
-  });
+  })
 
   return (
     <div className="flex flex-col gap-2">
-      <label
-        htmlFor="comment"
-        className="block text-base text-gray-900 font-bold"
-      >
+      <label htmlFor="comment" className="block font-bold">
         {title}
       </label>
       {description && (
-        <p className="text-sm text-gray-400 font-normal">{description}</p>
+        <p className="mt-1 font-normal text-muted-foreground">{description}</p>
       )}
       <textarea
         rows={4}
-        className="block w-full resize-none rounded-md border-0 py-1.5 bg-transparent shadow-sm ring-1 ring-inset text-gray-900 ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+        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={placeholder}
         {...field}
       />
     </div>
-  );
-};
+  )
+}
 
-export default TextAreaWithTitle;
+export default TextAreaWithTitle
diff --git a/web/app/_components/TextInputWithTitle/index.tsx b/web/app/_components/TextInputWithTitle/index.tsx
index 8927b9408..45c7a658f 100644
--- a/web/app/_components/TextInputWithTitle/index.tsx
+++ b/web/app/_components/TextInputWithTitle/index.tsx
@@ -1,14 +1,14 @@
-import React from "react";
-import { useController } from "react-hook-form";
+import React from 'react'
+import { useController } from 'react-hook-form'
 
 type Props = {
-  id: string;
-  title: string;
-  description: string;
-  placeholder?: string;
-  control?: any;
-  required?: boolean;
-};
+  id: string
+  title: string
+  description: string
+  placeholder?: string
+  control?: any
+  required?: boolean
+}
 
 const TextInputWithTitle: React.FC<Props> = ({
   id,
@@ -22,19 +22,19 @@ const TextInputWithTitle: React.FC<Props> = ({
     name: id,
     control: control,
     rules: { required: required },
-  });
+  })
 
   return (
     <div className="flex flex-col gap-2">
-      <div className="text-gray-900 font-bold">{title}</div>
-      <div className="text-sm pb-2 text-[#737d7d]">{description}</div>
+      <div className="font-bold">{title}</div>
+      <div className="pb-2 text-muted-foreground">{description}</div>
       <input
-        className="block w-full rounded-md border-0 py-1.5 bg-transparent shadow-sm ring-1 ring-inset text-gray-900 ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+        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;
+export default TextInputWithTitle
diff --git a/web/app/_components/ToggleSwitch/index.tsx b/web/app/_components/ToggleSwitch/index.tsx
index 3f83889b2..05d12030a 100644
--- a/web/app/_components/ToggleSwitch/index.tsx
+++ b/web/app/_components/ToggleSwitch/index.tsx
@@ -1,17 +1,17 @@
-import React from "react";
-import { Switch } from "@headlessui/react";
-import { Controller } from "react-hook-form";
+import React from 'react'
+import { Switch } from '@headlessui/react'
+import { Controller } from 'react-hook-form'
 
 function classNames(...classes: any) {
-  return classes.filter(Boolean).join(" ");
+  return classes.filter(Boolean).join(' ')
 }
 
 type Props = {
-  id: string;
-  title: string;
-  control: any;
-  required?: boolean;
-};
+  id: string
+  title: string
+  control: any
+  required?: boolean
+}
 
 const ToggleSwitch: React.FC<Props> = ({
   id,
@@ -20,7 +20,7 @@ const ToggleSwitch: React.FC<Props> = ({
   required = false,
 }) => (
   <div className="flex items-center justify-between">
-    <div className="text-gray-900 text-base">{title}</div>
+    <div className="text-bold">{title}</div>
     <Controller
       name={id}
       control={control}
@@ -30,22 +30,22 @@ const ToggleSwitch: React.FC<Props> = ({
           checked={value}
           onChange={onChange}
           className={classNames(
-            value ? "bg-indigo-600" : "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"
+            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"
+              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;
+export default ToggleSwitch
diff --git a/web/app/_components/WelcomeContainer/index.tsx b/web/app/_components/WelcomeContainer/index.tsx
index 598edd9ec..60af2ff26 100644
--- a/web/app/_components/WelcomeContainer/index.tsx
+++ b/web/app/_components/WelcomeContainer/index.tsx
@@ -3,9 +3,11 @@ import { useSetAtom } from 'jotai'
 import {
   setMainViewStateAtom,
   MainViewState,
-} from '@/_helpers/atoms/MainView.atom'
+} from '@helpers/atoms/MainView.atom'
 import SecondaryButton from '../SecondaryButton'
 
+import { Button, Icons } from '@uikit'
+
 const Welcome: React.FC = () => {
   const setMainViewState = useSetAtom(setMainViewStateAtom)
 
@@ -18,6 +20,8 @@ const Welcome: React.FC = () => {
           <br />
           let’s download your first model
         </span>
+        <Button>Button component</Button>
+        <Icons name="panel-left" />
         <SecondaryButton
           title={'Explore models'}
           onClick={() => setMainViewState(MainViewState.ExploreModel)}
diff --git a/web/app/_helpers/ModalWrapper.tsx b/web/app/_helpers/ModalWrapper.tsx
deleted file mode 100644
index f9ad36197..000000000
--- a/web/app/_helpers/ModalWrapper.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-'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 { ReactNode } from "react"
-
-type Props = {
-  children: ReactNode
-}
-
-export const ModalWrapper: React.FC<Props> = ({ children }) => (
-  <>
-    <MobileMenuPane />
-    <ConfirmDeleteConversationModal />
-    <ConfirmSignOutModal />
-    <ConfirmDeleteModelModal />
-    <BotListModal />
-    {children}
-  </>
-)
diff --git a/web/app/_helpers/ThemeWrapper.tsx b/web/app/_helpers/ThemeWrapper.tsx
deleted file mode 100644
index 76b22e782..000000000
--- a/web/app/_helpers/ThemeWrapper.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-'use client'
-
-import { ThemeProvider } from 'next-themes'
-import { ReactNode } from 'react'
-
-type Props = {
-  children: ReactNode
-}
-
-// consider to use next-themes or not. This caused the error Warning: Extra attributes from the server: class,style at html after hydration
-export const ThemeWrapper: React.FC<Props> = ({ children }) => (
-  <ThemeProvider enableSystem={false} attribute="class">
-    {children}
-  </ThemeProvider>
-)
diff --git a/web/app/_helpers/atoms/Bot.atom.ts b/web/app/_helpers/atoms/Bot.atom.ts
deleted file mode 100644
index 985fb5731..000000000
--- a/web/app/_helpers/atoms/Bot.atom.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { Bot } from "@/_models/Bot";
-import { atom } from "jotai";
-
-export const activeBotAtom = atom<Bot | undefined>(undefined);
diff --git a/web/app/_hooks/useCreateBot.ts b/web/app/_hooks/useCreateBot.ts
index cd055c5a2..927cb7bb0 100644
--- a/web/app/_hooks/useCreateBot.ts
+++ b/web/app/_hooks/useCreateBot.ts
@@ -1,22 +1,9 @@
-import { Bot } from '@/_models/Bot'
 import { executeSerial } from '../../../electron/core/plugin-manager/execution/extension-manager'
-import { DataService } from '@janhq/core'
-import {
-  MainViewState,
-  setMainViewStateAtom,
-} from '@/_helpers/atoms/MainView.atom'
-import { useSetAtom } from 'jotai'
-import { activeBotAtom } from '@/_helpers/atoms/Bot.atom'
 
 export default function useCreateBot() {
-  const setActiveBot = useSetAtom(activeBotAtom)
-  const setMainViewState = useSetAtom(setMainViewStateAtom)
-
   const createBot = async (bot: Bot) => {
     try {
-      await executeSerial(DataService.CreateBot, bot)
-      setActiveBot(bot)
-      setMainViewState(MainViewState.BotInfo)
+      await executeSerial('createBot', bot)
     } catch (err) {
       alert(err)
       console.error(err)
diff --git a/web/app/_hooks/useDeleteBot.ts b/web/app/_hooks/useDeleteBot.ts
index 079bfd941..43e12ecc7 100644
--- a/web/app/_hooks/useDeleteBot.ts
+++ b/web/app/_hooks/useDeleteBot.ts
@@ -1,25 +1,24 @@
-import { useSetAtom } from "jotai";
-import { executeSerial } from "../../../electron/core/plugin-manager/execution/extension-manager";
-import { activeBotAtom } from "@/_helpers/atoms/Bot.atom";
-import { rightSideBarExpandStateAtom } from "@/_helpers/atoms/LeftSideBarExpand.atom";
-import { DataService } from "@janhq/core";
+import { useSetAtom } from 'jotai'
+import { executeSerial } from '../../../electron/core/plugin-manager/execution/extension-manager'
+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 setActiveBot = useSetAtom(activeBotAtom)
+  const setRightPanelVisibility = useSetAtom(rightSideBarExpandStateAtom)
 
-  const deleteBot = async (botId: string): Promise<"success" | "failed"> => {
+  const deleteBot = async (botId: string): Promise<'success' | 'failed'> => {
     try {
-      await executeSerial(DataService.DeleteBot, botId);
-      setRightPanelVisibility(false);
-      setActiveBot(undefined);
-      return "success";
+      await executeSerial('deleteBot', botId)
+      setRightPanelVisibility(false)
+      setActiveBot(undefined)
+      return 'success'
     } catch (err) {
-      alert(`Failed to delete bot ${botId}: ${err}`);
-      console.error(err);
-      return "failed";
+      alert(`Failed to delete bot ${botId}: ${err}`)
+      console.error(err)
+      return 'failed'
     }
-  };
+  }
 
-  return { deleteBot };
+  return { deleteBot }
 }
diff --git a/web/app/_hooks/useGetBots.ts b/web/app/_hooks/useGetBots.ts
index 94a17c641..ad1497160 100644
--- a/web/app/_hooks/useGetBots.ts
+++ b/web/app/_hooks/useGetBots.ts
@@ -1,29 +1,27 @@
-import { Bot } from "@/_models/Bot";
-import { executeSerial } from "../../../electron/core/plugin-manager/execution/extension-manager";
-import { DataService } from "@janhq/core";
+import { executeSerial } from '../../../electron/core/plugin-manager/execution/extension-manager'
 
 export default function useGetBots() {
   const getAllBots = async (): Promise<Bot[]> => {
     try {
-      const bots = await executeSerial(DataService.GetBots);
-      return bots;
+      const bots = await executeSerial('getBots')
+      return bots
     } catch (err) {
-      alert(`Failed to get bots: ${err}`);
-      console.error(err);
-      return [];
+      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 bot;
+      const bot: Bot = await executeSerial('getBotById', botId)
+      return bot
     } catch (err) {
-      alert(`Failed to get bot ${botId}: ${err}`);
-      console.error(err);
-      return undefined;
+      alert(`Failed to get bot ${botId}: ${err}`)
+      console.error(err)
+      return undefined
     }
-  };
+  }
 
-  return { getBotById, getAllBots };
+  return { getBotById, getAllBots }
 }
diff --git a/web/app/_hooks/useUpdateBot.ts b/web/app/_hooks/useUpdateBot.ts
index 988b61981..1144ba32b 100644
--- a/web/app/_hooks/useUpdateBot.ts
+++ b/web/app/_hooks/useUpdateBot.ts
@@ -1,6 +1,4 @@
-import { Bot } from "@/_models/Bot";
-import { executeSerial } from "../../../electron/core/plugin-manager/execution/extension-manager";
-import { DataService } from "@janhq/core";
+import { executeSerial } from '../../../electron/core/plugin-manager/execution/extension-manager'
 
 export default function useUpdateBot() {
   const updateBot = async (
@@ -13,26 +11,26 @@ export default function useUpdateBot() {
       for (const [key, value] of Object.entries(updatableField)) {
         if (value !== undefined) {
           //@ts-ignore
-          bot[key] = value;
+          bot[key] = value
         }
       }
 
-      await executeSerial(DataService.UpdateBot, bot);
-      console.debug("Bot updated", JSON.stringify(bot, null, 2));
+      await executeSerial('updateBot', bot)
+      console.debug('Bot updated', JSON.stringify(bot, null, 2))
     } catch (err) {
-      alert(`Update bot error: ${err}`);
-      console.error(err);
-      return;
+      alert(`Update bot error: ${err}`)
+      console.error(err)
+      return
     }
-  };
+  }
 
-  return { updateBot };
+  return { updateBot }
 }
 
 export type UpdatableField = {
-  presencePenalty?: number;
-  frequencyPenalty?: number;
-  maxTokens?: number;
-  customTemperature?: number;
-  systemPrompt?: number;
-};
+  presencePenalty?: number
+  frequencyPenalty?: number
+  maxTokens?: number
+  customTemperature?: number
+  systemPrompt?: number
+}
diff --git a/web/app/_models/Bot.ts b/web/app/_models/Bot.ts
index 6d5f46cdc..33a35f85b 100644
--- a/web/app/_models/Bot.ts
+++ b/web/app/_models/Bot.ts
@@ -1,32 +1,32 @@
 export type Bot = {
-  _id: string;
-  name: string;
-  description: string;
-  visibleFromBotProfile: boolean;
-  systemPrompt: string;
-  welcomeMessage: string;
-  publiclyAccessible: boolean;
-  suggestReplies: boolean;
-  renderMarkdownContent: boolean;
+  _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;
+  enableCustomTemperature: boolean
 
   /**
    * Default is 0.7.
    */
-  customTemperature: number;
+  customTemperature: number
 
-  maxTokens: number;
+  maxTokens: number
 
-  frequencyPenalty: number;
+  frequencyPenalty: number
 
-  presencePenalty: number;
+  presencePenalty: number
 
-  modelId: string;
-  createdAt?: number;
-  updatedAt?: number;
-};
+  modelId: string
+  createdAt?: number
+  updatedAt?: number
+}
diff --git a/web/app/_models/Conversation.ts b/web/app/_models/Conversation.ts
deleted file mode 100644
index 8a10d3e21..000000000
--- a/web/app/_models/Conversation.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-export interface Conversation {
-  _id?: string
-  modelId?: string
-  name?: string
-  image?: string
-  message?: string
-  lastMessage?: string
-  summary?: string
-  createdAt?: string
-  updatedAt?: string
-  botId?: string
-}
-
-/**
- * Store the state of conversation like fetching, waiting for response, etc.
- */
-export type ConversationState = {
-  hasMore: boolean
-  waitingForResponse: boolean
-  error?: Error
-}
diff --git a/web/app/_models/ModelVersion.ts b/web/app/_models/ModelVersion.ts
deleted file mode 100644
index e23b9ce2f..000000000
--- a/web/app/_models/ModelVersion.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Model type which will be stored in the database
- */
-export type ModelVersion = {
-  /**
-   * Combination of owner and model name.
-   * Being used as file name. Should be unique.
-   */
-  _id: string
-  name: string
-  quantMethod: string
-  bits: number
-  size: number
-  maxRamRequired: number
-  usecase: string
-  downloadLink: string
-  productId: string
-  /**
-   * For tracking download state
-   */
-  startDownloadAt?: number
-  finishDownloadAt?: number
-}
diff --git a/web/app/_models/Product.ts b/web/app/_models/Product.ts
deleted file mode 100644
index c2bd6384a..000000000
--- a/web/app/_models/Product.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { ModelVersion } from './ModelVersion'
-import { ProductInput } from './ProductInput'
-import { ProductOutput } from './ProductOutput'
-
-export enum ProductType {
-  LLM = 'LLM',
-  GenerativeArt = 'GenerativeArt',
-  ControlNet = 'ControlNet',
-}
-
-export interface Product {
-  _id: string
-  name: string
-  shortDescription: string
-  avatarUrl: string
-  longDescription: string
-  author: string
-  version: string
-  modelUrl: string
-  nsfw: boolean
-  greeting: string
-  type: ProductType
-  inputs?: ProductInput
-  outputs?: ProductOutput
-  createdAt: number
-  updatedAt?: number
-  status: string
-  releaseDate: number
-  tags: string[]
-  availableVersions: ModelVersion[]
-}
diff --git a/web/app/_models/ProductInput.ts b/web/app/_models/ProductInput.ts
deleted file mode 100644
index 9873e88c2..000000000
--- a/web/app/_models/ProductInput.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-export interface ProductInput {
-  body: ItemProperties[]
-  slug: string
-  headers: ProductHeader
-}
-
-export type ProductHeader = {
-  accept: string
-  contentType: string
-}
-
-export type ItemProperties = {
-  name: string
-  type: string
-  items?: ProductBodyItem[]
-  example?: unknown
-  description?: string
-}
-
-export type ProductBodyItem = {
-  type: string
-  properties: ItemProperties[]
-}
diff --git a/web/app/_models/ProductOutput.ts b/web/app/_models/ProductOutput.ts
deleted file mode 100644
index b89b9722a..000000000
--- a/web/app/_models/ProductOutput.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { ItemProperties } from './ProductInput'
-
-export interface ProductOutput {
-  slug: string
-  type: string
-  properties: ItemProperties[]
-  description: string
-}
diff --git a/web/app/_models/User.ts b/web/app/_models/User.ts
deleted file mode 100644
index 81de924eb..000000000
--- a/web/app/_models/User.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-export interface User {
-  id: string
-  displayName: string
-  avatarUrl: string
-  email?: string
-}
-
-export const DefaultUser = {
-  id: '0',
-  displayName: 'Anonymous',
-  avatarUrl: 'icons/app_icon.svg',
-  email: '',
-}
-
-export enum Role {
-  User = 'user',
-  Assistant = 'assistant',
-}
diff --git a/web/app/globals.css b/web/app/globals.css
deleted file mode 100644
index 0489a42e8..000000000
--- a/web/app/globals.css
+++ /dev/null
@@ -1,429 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
-@import "./code-block.css";
-
-:root {
-  /* Your default theme */
-  --background: white;
-  --foreground: black;
-  --gray-50: #f7f7f8;
-  --gray-100: #ececf1;
-  --gray-300: #c5c5d2;
-  --gray-500: #8e8ea0;
-}
-
-[data-theme="dark"] {
-  --background: rgb(55 65 81);
-  --foreground: white;
-  --text-primary: var(--gray-100);
-  --text-secondary: var(--gray-300);
-  --text-tertiary: var(--gray-500);
-}
-
-@layer base {
-  body {
-    @apply dark:bg-gray-900 dark:text-white;
-  }
-}
-
-body {
-  font-family: "Inter", sans-serif;
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-  overflow: hidden;
-  height: 100vh;
-}
-
-.hidden-text {
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.hidden-text-model {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.scroll::-webkit-scrollbar {
-  width: 4px;
-  height: 4px;
-  background: transparent !;
-}
-.scroll:hover::-webkit-scrollbar-thumb {
-  background-color: #d1d5db;
-}
-.scroll::-webkit-scrollbar-thumb {
-  border-radius: 10px;
-}
-.scroll::-webkit-scrollbar-track {
-  background-color: transparent;
-  border-radius: 10px;
-}
-.scroll {
-  scrollbar-gutter: stable;
-}
-.embla {
-  --slide-spacing: 1rem;
-  --slide-size: 100%;
-  --slide-height: 19rem;
-}
-.embla__viewport {
-  overflow: hidden;
-}
-.embla__container {
-  backface-visibility: hidden;
-  display: flex;
-  touch-action: pan-y;
-}
-.embla__slide {
-  flex: 0 0 var(--slide-size);
-  min-width: 0;
-  position: relative;
-}
-.embla__slide__img {
-  display: block;
-  height: var(--slide-height);
-  width: 100%;
-  object-fit: cover;
-}
-.embla__slide__number {
-  width: 4.6rem;
-  height: 4.6rem;
-  z-index: 1;
-  position: absolute;
-  top: 0.6rem;
-  right: 0.6rem;
-  border-radius: 50%;
-  background-color: rgba(var(--background-site-rgb-value), 0.85);
-  line-height: 4.6rem;
-  font-weight: 900;
-  text-align: center;
-  pointer-events: none;
-}
-.embla__slide__number > span {
-  color: var(--brand-primary);
-  background-image: linear-gradient(
-    45deg,
-    var(--brand-primary),
-    var(--brand-secondary)
-  );
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  font-size: 1.6rem;
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-.embla__button {
-  -webkit-appearance: none;
-  background-color: transparent;
-  touch-action: manipulation;
-  display: inline-flex;
-  text-decoration: none;
-  cursor: pointer;
-  border: 0;
-  padding: 0;
-  margin: 0;
-}
-.embla__buttons {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  padding: 27.44px;
-  left: 0;
-  width: 100%;
-}
-.embla__button {
-  z-index: 1;
-  color: var(--background-site);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  padding: 10px;
-  border-radius: 12px;
-  gap: 10px;
-  background-color: white;
-}
-.embla__button:disabled {
-  opacity: 0;
-}
-.embla__button__svg {
-  width: 65%;
-  height: 65%;
-}
-
-/* TODO: Move to a separated css later */
-/* Typography Utilities */
-@layer utilities {
-  /* Regular */
-  .text-xs-regular {
-    /* text-xs/leading-4/font-normal */
-    font-family: Inter;
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 16px; /* 133.333% */
-  }
-  .text-sm-regular {
-    /* text-sm/leading-5/font-normal */
-    font-family: Inter;
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 20px; /* 142.857% */
-  }
-  .text-base-regular {
-    /* text-base/leading-6/font-normal */
-    font-family: Inter;
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 24px; /* 150% */
-  }
-  .text-lg-regular {
-    /* text-lg/leading-7/font-normal */
-    font-family: Inter;
-    font-size: 18px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 28px; /* 155.556% */
-  }
-  .text-xl-regular {
-    /* text-xl/leading-7/font-normal */
-    font-family: Inter;
-    font-size: 20px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 28px; /* 140% */
-  }
-  .text-2xl-regular {
-    /* text-2xl/leading-8/font-normal */
-    font-family: Inter;
-    font-size: 24px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 32px; /* 133.333% */
-  }
-  .text-3xl-regular {
-    /* text-3xl/leading-9/font-normal */
-    font-family: Inter;
-    font-size: 30px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 36px; /* 120% */
-  }
-  .text-4xl-regular {
-    /* text-4xl/leading-10/font-normal */
-    font-family: Inter;
-    font-size: 36px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 40px; /* 111.111% */
-  }
-  /* Medium */
-  .text-xs-medium {
-    /* text-xs/leading-4/font-normal */
-    font-family: Inter;
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 16px; /* 133.333% */
-  }
-  .text-sm-medium {
-    /* text-sm/leading-5/font-normal */
-    font-family: Inter;
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 20px; /* 142.857% */
-  }
-  .text-base-medium {
-    /* text-base/leading-6/font-normal */
-    font-family: Inter;
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 24px; /* 150% */
-  }
-  .text-lg-medium {
-    /* text-lg/leading-7/font-normal */
-    font-family: Inter;
-    font-size: 18px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 28px; /* 155.556% */
-  }
-  .text-xl-medium {
-    /* text-xl/leading-7/font-normal */
-    font-family: Inter;
-    font-size: 20px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 28px; /* 140% */
-  }
-  .text-2xl-medium {
-    /* text-2xl/leading-8/font-normal */
-    font-family: Inter;
-    font-size: 24px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 32px; /* 133.333% */
-  }
-  .text-3xl-medium {
-    /* text-3xl/leading-9/font-normal */
-    font-family: Inter;
-    font-size: 30px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 36px; /* 120% */
-  }
-  .text-4xl-medium {
-    /* text-4xl/leading-10/font-normal */
-    font-family: Inter;
-    font-size: 36px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 40px; /* 111.111% */
-  }
-
-  /* Semibold */
-  .text-xs-semibold {
-    /* text-xs/leading-4/font-normal */
-    font-family: Inter;
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 16px; /* 133.333% */
-  }
-  .text-sm-semibold {
-    /* text-sm/leading-5/font-normal */
-    font-family: Inter;
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 20px; /* 142.857% */
-  }
-  .text-base-semibold {
-    /* text-base/leading-6/font-normal */
-    font-family: Inter;
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 24px; /* 150% */
-  }
-  .text-lg-semibold {
-    /* text-lg/leading-7/font-normal */
-    font-family: Inter;
-    font-size: 18px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 28px; /* 155.556% */
-  }
-  .text-xl-semibold {
-    /* text-xl/leading-7/font-normal */
-    font-family: Inter;
-    font-size: 20px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 28px; /* 140% */
-  }
-  .text-2xl-semibold {
-    /* text-2xl/leading-8/font-normal */
-    font-family: Inter;
-    font-size: 24px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 32px; /* 133.333% */
-  }
-  .text-3xl-semibold {
-    /* text-3xl/leading-9/font-normal */
-    font-family: Inter;
-    font-size: 30px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 36px; /* 120% */
-  }
-  .text-4xl-semibold {
-    /* text-4xl/leading-10/font-normal */
-    font-family: Inter;
-    font-size: 36px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 40px; /* 111.111% */
-  }
-}
-
-/* Typing indicator */
-.typingIndicatorContainer {
-  display: flex;
-  flex: none;
-  align-items: flex-end;
-  margin: 4 0;
-}
-
-.typingIndicatorBubble {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 52px;
-  height: 28px;
-  margin: 0px 8px;
-  background-color: #f0f1f1;
-  border-radius: 12px;
-}
-
-.typingIndicatorBubbleDot {
-  width: 4px;
-  height: 4px;
-  margin-right: 4px;
-  background-color: #57585a;
-  border-radius: 50%;
-  animation-name: bounce;
-  animation-duration: 1.3s;
-  animation-timing-function: linear;
-  animation-iteration-count: infinite;
-}
-
-.typingIndicatorBubbleDot:first-of-type {
-  margin: 0px 4px;
-}
-
-.typingIndicatorBubbleDot:nth-of-type(2) {
-  animation-delay: 0.15s;
-}
-
-.typingIndicatorBubbleDot:nth-of-type(3) {
-  animation-delay: 0.3s;
-}
-
-@keyframes bounce {
-  0%,
-  60%,
-  100% {
-    transform: translateY(0);
-  }
-  30% {
-    transform: translateY(-4px);
-  }
-}
diff --git a/web/app/layout.tsx b/web/app/layout.tsx
index 9b94c5a88..3b519cbc8 100644
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@@ -1,5 +1,8 @@
-import './globals.css'
 import { Metadata } from 'next'
+import '../styles/main.scss'
+import { PropsWithChildren } from 'react'
+
+import Providers from '@containers/Providers'
 
 export const metadata: Metadata = {
   title: 'Jan',
@@ -13,14 +16,15 @@ export const metadata: Metadata = {
   },
 }
 
-type Props = {
-  children: React.ReactNode
-}
+type Props = PropsWithChildren
 
 export default function RootLayout({ children }: Props) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body>{children}</body>
+      <body className="bg-background/40 text-xs antialiased">
+        <div className="title-bar" />
+        <Providers>{children}</Providers>
+      </body>
     </html>
   )
 }
diff --git a/web/app/page.tsx b/web/app/page.tsx
index f362d8b9b..d7bfca79b 100644
--- a/web/app/page.tsx
+++ b/web/app/page.tsx
@@ -1,96 +1,59 @@
-"use client"
-import { PluginService } from "@janhq/core"
-import { ThemeWrapper } from "./_helpers/ThemeWrapper"
-import JotaiWrapper from "./_helpers/JotaiWrapper"
-import { ModalWrapper } from "./_helpers/ModalWrapper"
-import { useEffect, useState } from "react"
-import Image from "next/image"
+'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 {
-  setup,
-  plugins,
-  activationPoints,
-  extensionPoints,
-} from '../../electron/core/plugin-manager/execution/index'
-import {
-  isCorePluginInstalled,
-  setupBasePlugins,
-} from './_services/pluginService'
-import EventListenerWrapper from './_helpers/EventListenerWrapper'
-import { setupCoreServices } from './_services/coreService'
-import MainContainer from './_components/MainContainer'
-import { executeSerial } from '../../electron/core/plugin-manager/execution/extension-manager'
+  MainViewState,
+  getMainViewStateAtom,
+} from '@helpers/atoms/MainView.atom'
+
+import React from 'react'
+
+import BaseLayout from '@containers/Layout'
 
 const Page: React.FC = () => {
-  const [setupCore, setSetupCore] = useState(false)
-  const [activated, setActivated] = useState(false)
+  const viewState = useAtomValue(getMainViewStateAtom)
 
-  async function setupPE() {
-    // Enable activation point management
-    setup({
-      importer: (plugin: string) =>
-        import(/* webpackIgnore: true */ plugin).catch((err) => {
-          console.log(err)
-        }),
-    })
+  let children = null
+  switch (viewState) {
+    case MainViewState.ConversationEmptyModel:
+      children = <EmptyChatScreen />
+      break
 
-    // Register all active plugins with their activation points
-    await plugins.registerActive()
-    setTimeout(async () => {
-      // Trigger activation points
-      await activationPoints.trigger('init')
-      if (!isCorePluginInstalled()) {
-        setupBasePlugins()
-        return
-      }
-      if (extensionPoints.get(PluginService.OnStart)) {
-        await executeSerial(PluginService.OnStart)
-      }
-      setActivated(true)
-    }, 500)
+    case MainViewState.Welcome:
+      children = <WelcomeScreen />
+      break
+
+    case MainViewState.CreateBot:
+      children = <BotScreen />
+      break
+
+    case MainViewState.ExploreModel:
+      children = <ExploreModelsScreen />
+      break
+
+    case MainViewState.ResourceMonitor:
+    case MainViewState.MyModel:
+      children = <MyModelsScreen />
+      break
+
+    case MainViewState.Setting:
+      children = <SettingsScreen />
+      break
+
+    default:
+      children = <ChatScreen />
+      break
   }
 
-  // Services Setup
-  useEffect(() => {
-    setupCoreServices()
-    setSetupCore(true)
-  }, [])
-
-  useEffect(() => {
-    if (setupCore) {
-      // Electron
-      if (window && window.electronAPI) {
-        setupPE()
-      } else {
-        // Host
-        setActivated(true)
-      }
-    }
-  }, [setupCore])
-
-  return (
-    <JotaiWrapper>
-      {setupCore && (
-        <EventListenerWrapper>
-          <ThemeWrapper>
-            {activated ? (
-              <ModalWrapper>
-                <MainContainer />
-              </ModalWrapper>
-            ) : (
-              <div className="flex h-screen w-screen items-center justify-center bg-white">
-                <Image
-                  width={50}
-                  height={50}
-                  src="icons/app_icon.svg"
-                  alt=""
-                />
-              </div>
-            )}
-          </ThemeWrapper>
-        </EventListenerWrapper>
-      )}
-    </JotaiWrapper>
-  )
+  return <BaseLayout>{children}</BaseLayout>
 }
 
 export default Page
diff --git a/web/app/privacy/page.tsx b/web/app/privacy/page.tsx
index 54fcb1bd7..4f2e012a8 100644
--- a/web/app/privacy/page.tsx
+++ b/web/app/privacy/page.tsx
@@ -10,7 +10,7 @@ export const metadata: Metadata = {
 
 const Page: React.FC = () => {
   return (
-    <div className="scroll relative flex h-screen flex-col items-center overflow-y-scroll pt-2 text-black">
+    <div className="scroll relative flex h-screen flex-col items-center overflow-y-auto pt-2 text-black">
       <div className="absolute left-5 top-3">
         <Link href="/" className="flex flex-row gap-2">
           <div className="flex items-center gap-0.5">
diff --git a/web/app/settings/page.tsx b/web/app/settings/page.tsx
deleted file mode 100644
index ddb8e3529..000000000
--- a/web/app/settings/page.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Preferences } from '@/_components/Preferences'
-
-const Settings = () => {
-  return (
-    <div className="flex">
-      <Preferences />
-    </div>
-  )
-}
-
-export default Settings
diff --git a/web/app/support/page.tsx b/web/app/support/page.tsx
index bb23a8e84..bb03459fb 100644
--- a/web/app/support/page.tsx
+++ b/web/app/support/page.tsx
@@ -10,7 +10,7 @@ export const metadata: Metadata = {
 
 const Page: React.FC = () => {
   return (
-    <div className="scroll flex h-screen flex-col items-center overflow-y-scroll pt-2 text-black">
+    <div className="scroll flex h-screen flex-col items-center overflow-y-auto pt-2 text-black">
       <div className="absolute left-5 top-3">
         <Link href="/" className="flex flex-row gap-2">
           <div className="flex items-center gap-0.5">
diff --git a/web/containers/BottomBar/index.tsx b/web/containers/BottomBar/index.tsx
new file mode 100644
index 000000000..bb668f452
--- /dev/null
+++ b/web/containers/BottomBar/index.tsx
@@ -0,0 +1,46 @@
+import React from 'react'
+import SystemItem from '@containers/SystemItem'
+import { useAtomValue } from 'jotai'
+import useGetAppVersion from '@hooks/useGetAppVersion'
+import useGetSystemResources from '@hooks/useGetSystemResources'
+import { modelDownloadStateAtom } from '@helpers/atoms/DownloadState.atom'
+import { formatDownloadPercentage } from '@utils/converter'
+import { activeAssistantModelAtom } from '@helpers/atoms/Model.atom'
+
+const BottomBar = () => {
+  const activeModel = useAtomValue(activeAssistantModelAtom)
+  const { version } = useGetAppVersion()
+  const { ram, cpu } = useGetSystemResources()
+  const modelDownloadStates = useAtomValue(modelDownloadStateAtom)
+  const getCurrentYear = new Date().getFullYear()
+
+  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 gap-x-2">
+        <SystemItem name="Active model:" value={activeModel?.name || '-'} />
+        {downloadStates.length > 0 && (
+          <SystemItem
+            name="Downloading:"
+            value={`${downloadStates[0].fileName} - ${formatDownloadPercentage(
+              downloadStates[0].percent
+            )}`}
+          />
+        )}
+      </div>
+      <div className="flex gap-x-2">
+        <SystemItem name="CPU:" value={`${cpu}%`} />
+        <SystemItem name="Mem:" value={`${ram}%`} />
+        <p className="text-xs text-muted-foreground">
+          &copy;{getCurrentYear}&nbsp;Jan AI Pte Ltd. v{version}
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export default BottomBar
diff --git a/web/app/_components/JanImage/index.tsx b/web/containers/JanImage/index.tsx
similarity index 100%
rename from web/app/_components/JanImage/index.tsx
rename to web/containers/JanImage/index.tsx
diff --git a/web/containers/Layout/index.tsx b/web/containers/Layout/index.tsx
new file mode 100644
index 000000000..9788062c9
--- /dev/null
+++ b/web/containers/Layout/index.tsx
@@ -0,0 +1,73 @@
+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'
+
+const BaseLayout = (props: PropsWithChildren) => {
+  const { children } = props
+
+  const isRightSidebarVisible = useAtomValue(rightSideBarExpandStateAtom)
+  const viewState = useAtomValue(getMainViewStateAtom)
+
+  const { theme } = useTheme()
+
+  // Force set theme native
+  useEffect(() => {
+    async function setTheme() {
+      switch (theme) {
+        case 'light':
+          return await window?.electronAPI.setNativeThemeLight()
+        case 'dark':
+          return await window?.electronAPI.setNativeThemeDark()
+        default:
+          return await window?.electronAPI.setNativeThemeSystem()
+      }
+    }
+    setTheme()
+  }, [theme])
+
+  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'
+        )}
+      >
+        <div className="w-full">
+          <Topbar />
+          <m.div
+            key={viewState}
+            initial={{ opacity: 0, y: -8 }}
+            className="h-full"
+            animate={{
+              opacity: 1,
+              y: 0,
+              transition: {
+                duration: 0.5,
+              },
+            }}
+          >
+            {children}
+          </m.div>
+          <BottomBar />
+        </div>
+      </div>
+      {viewState === MainViewState.BotInfo && isRightSidebarVisible && (
+        <SidebarRight />
+      )}
+    </div>
+  )
+}
+
+export default BaseLayout
diff --git a/web/containers/Loader/index.tsx b/web/containers/Loader/index.tsx
new file mode 100644
index 000000000..e9db411d6
--- /dev/null
+++ b/web/containers/Loader/index.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+
+const Loader = () => {
+  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>
+    </div>
+  )
+}
+
+export default Loader
diff --git a/web/containers/Logo/CompactLogo/index.tsx b/web/containers/Logo/CompactLogo/index.tsx
new file mode 100644
index 000000000..fb7a883e3
--- /dev/null
+++ b/web/containers/Logo/CompactLogo/index.tsx
@@ -0,0 +1,22 @@
+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/Providers/index.tsx b/web/containers/Providers/index.tsx
new file mode 100644
index 000000000..72a24b9e1
--- /dev/null
+++ b/web/containers/Providers/index.tsx
@@ -0,0 +1,92 @@
+'use client'
+
+import { PropsWithChildren } from 'react'
+import { PluginService } from '@janhq/core'
+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 {
+  setup,
+  plugins,
+  activationPoints,
+  extensionPoints,
+} from '../../../electron/core/plugin-manager/execution/index'
+import {
+  isCorePluginInstalled,
+  setupBasePlugins,
+} from '@services/pluginService'
+import EventListenerWrapper from '@helpers/EventListenerWrapper'
+import { setupCoreServices } from '@services/coreService'
+import { executeSerial } from '../../../electron/core/plugin-manager/execution/extension-manager'
+
+const Providers = (props: PropsWithChildren) => {
+  const [setupCore, setSetupCore] = useState(false)
+  const [activated, setActivated] = useState(false)
+
+  const { children } = props
+
+  async function setupPE() {
+    // Enable activation point management
+    setup({
+      importer: (plugin: string) =>
+        import(/* webpackIgnore: true */ plugin).catch((err) => {
+          console.log(err)
+        }),
+    })
+
+    // Register all active plugins with their activation points
+    await plugins.registerActive()
+    setTimeout(async () => {
+      // Trigger activation points
+      await activationPoints.trigger('init')
+      if (!isCorePluginInstalled()) {
+        setupBasePlugins()
+        return
+      }
+      if (extensionPoints.get(PluginService.OnStart)) {
+        await executeSerial(PluginService.OnStart)
+      }
+      setActivated(true)
+    }, 500)
+  }
+
+  // Services Setup
+  useEffect(() => {
+    setupCoreServices()
+    setSetupCore(true)
+  }, [])
+
+  useEffect(() => {
+    if (setupCore) {
+      // Electron
+      if (window && window.electronAPI) {
+        setupPE()
+      } else {
+        // Host
+        setActivated(true)
+      }
+    }
+  }, [setupCore])
+
+  return (
+    <JotaiWrapper>
+      {setupCore && (
+        <EventListenerWrapper>
+          <ThemeWrapper>
+            {activated ? (
+              <ModalWrapper>{children}</ModalWrapper>
+            ) : (
+              <div className="bg-background flex h-screen w-screen items-center justify-center">
+                <CompactLogo width={56} height={56} />
+              </div>
+            )}
+          </ThemeWrapper>
+        </EventListenerWrapper>
+      )}
+    </JotaiWrapper>
+  )
+}
+
+export default Providers
diff --git a/web/containers/Sidebar/Left.tsx b/web/containers/Sidebar/Left.tsx
new file mode 100644
index 000000000..be2d9c0b9
--- /dev/null
+++ b/web/containers/Sidebar/Left.tsx
@@ -0,0 +1,196 @@
+import React 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'
+
+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 onMenuClick = (mainViewState: MainViewState) => {
+    if (currentState === mainViewState) return
+    setMainViewState(mainViewState)
+  }
+
+  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)
+  }
+
+  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,
+    },
+    {
+      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.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.electronAPI?.openExternalUrl(
+                  'https://discord.gg/AsJ8krTT3N'
+                )
+              }
+              className="block text-xs font-semibold text-muted-foreground"
+            >
+              Discord
+            </button>
+            <button
+              onClick={() =>
+                window.electronAPI?.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
new file mode 100644
index 000000000..1a70bb0b8
--- /dev/null
+++ b/web/containers/Sidebar/Right.tsx
@@ -0,0 +1,12 @@
+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
new file mode 100644
index 000000000..43b3d8d28
--- /dev/null
+++ b/web/containers/Sidebar/index.tsx
@@ -0,0 +1,2 @@
+export * from './Left'
+export * from './Right'
diff --git a/web/containers/SystemItem/index.tsx b/web/containers/SystemItem/index.tsx
new file mode 100644
index 000000000..96794f8fa
--- /dev/null
+++ b/web/containers/SystemItem/index.tsx
@@ -0,0 +1,13 @@
+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/Topbar/index.tsx b/web/containers/Topbar/index.tsx
new file mode 100644
index 000000000..5ce19d07a
--- /dev/null
+++ b/web/containers/Topbar/index.tsx
@@ -0,0 +1,51 @@
+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/app/_helpers/EventHandler.tsx b/web/helpers/EventHandler.tsx
similarity index 89%
rename from web/app/_helpers/EventHandler.tsx
rename to web/helpers/EventHandler.tsx
index 7fe936db2..50a1be598 100644
--- a/web/app/_helpers/EventHandler.tsx
+++ b/web/helpers/EventHandler.tsx
@@ -1,8 +1,5 @@
-import {
-  addNewMessageAtom,
-  updateMessageAtom,
-} from '@/_helpers/atoms/ChatMessage.atom'
-import { toChatMessage } from '@/_models/ChatMessage'
+import { addNewMessageAtom, updateMessageAtom } from './atoms/ChatMessage.atom'
+import { toChatMessage } from '@models/ChatMessage'
 import { events, EventName, NewMessageResponse } from '@janhq/core'
 import { useSetAtom } from 'jotai'
 import { ReactNode, useEffect } from 'react'
diff --git a/web/app/_helpers/EventListenerWrapper.tsx b/web/helpers/EventListenerWrapper.tsx
similarity index 91%
rename from web/app/_helpers/EventListenerWrapper.tsx
rename to web/helpers/EventListenerWrapper.tsx
index 0b0e86dd5..d15c95d13 100644
--- a/web/app/_helpers/EventListenerWrapper.tsx
+++ b/web/helpers/EventListenerWrapper.tsx
@@ -3,14 +3,13 @@
 import { useSetAtom } from 'jotai'
 import { ReactNode, useEffect } from 'react'
 import { appDownloadProgress } from './JotaiWrapper'
-import { DownloadState } from '@/_models/DownloadState'
-import { executeSerial } from '../../../electron/core/plugin-manager/execution/extension-manager'
+import { executeSerial } from '../../electron/core/plugin-manager/execution/extension-manager'
 import { ModelManagementService } from '@janhq/core'
 import {
   setDownloadStateAtom,
   setDownloadStateSuccessAtom,
 } from './atoms/DownloadState.atom'
-import { getDownloadedModels } from '@/_hooks/useGetDownloadedModels'
+import { getDownloadedModels } from '../hooks/useGetDownloadedModels'
 import { downloadedModelAtom } from './atoms/DownloadedModel.atom'
 import EventHandler from './EventHandler'
 
diff --git a/web/app/_helpers/JotaiWrapper.tsx b/web/helpers/JotaiWrapper.tsx
similarity index 70%
rename from web/app/_helpers/JotaiWrapper.tsx
rename to web/helpers/JotaiWrapper.tsx
index adba80f46..b9aa467bf 100644
--- a/web/app/_helpers/JotaiWrapper.tsx
+++ b/web/helpers/JotaiWrapper.tsx
@@ -2,6 +2,7 @@
 
 import { Provider, atom } from 'jotai'
 import { ReactNode } from 'react'
+import { atomWithStorage } from 'jotai/utils'
 
 type Props = {
   children: ReactNode
@@ -12,10 +13,12 @@ export default function JotaiWrapper({ children }: Props) {
 }
 
 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/ModalWrapper.tsx b/web/helpers/ModalWrapper.tsx
new file mode 100644
index 000000000..5e7846c05
--- /dev/null
+++ b/web/helpers/ModalWrapper.tsx
@@ -0,0 +1,23 @@
+'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 { ReactNode } from 'react'
+
+type Props = {
+  children: ReactNode
+}
+
+export const ModalWrapper: React.FC<Props> = ({ children }) => (
+  <>
+    <MobileMenuPane />
+    <ConfirmDeleteConversationModal />
+    <ConfirmSignOutModal />
+    <ConfirmDeleteModelModal />
+    <BotListModal />
+    {children}
+  </>
+)
diff --git a/web/helpers/ThemeWrapper.tsx b/web/helpers/ThemeWrapper.tsx
new file mode 100644
index 000000000..473706d4e
--- /dev/null
+++ b/web/helpers/ThemeWrapper.tsx
@@ -0,0 +1,34 @@
+'use client'
+
+import { useUserConfigs } from '@hooks/useUserConfigs'
+import { ThemeProvider } from 'next-themes'
+import { ReactNode } from 'react'
+import { motion as m } from 'framer-motion'
+
+type Props = {
+  children: ReactNode
+}
+
+export const ThemeWrapper: React.FC<Props> = ({ children }) => {
+  const [config] = useUserConfigs()
+
+  return (
+    <ThemeProvider attribute="class" enableSystem>
+      <m.div
+        className={config.accent}
+        initial={{ opacity: 0, y: -10 }}
+        animate={{
+          opacity: 1,
+          y: 0,
+          transition: {
+            duration: 0.5,
+            type: 'spring',
+            stiffness: 200,
+          },
+        }}
+      >
+        {children}
+      </m.div>
+    </ThemeProvider>
+  )
+}
diff --git a/web/helpers/atoms/Bot.atom.ts b/web/helpers/atoms/Bot.atom.ts
new file mode 100644
index 000000000..11e432513
--- /dev/null
+++ b/web/helpers/atoms/Bot.atom.ts
@@ -0,0 +1,3 @@
+import { atom } from 'jotai'
+
+export const activeBotAtom = atom<Bot | undefined>(undefined)
diff --git a/web/app/_helpers/atoms/ChatMessage.atom.ts b/web/helpers/atoms/ChatMessage.atom.ts
similarity index 97%
rename from web/app/_helpers/atoms/ChatMessage.atom.ts
rename to web/helpers/atoms/ChatMessage.atom.ts
index ae7540bde..2230ccca4 100644
--- a/web/app/_helpers/atoms/ChatMessage.atom.ts
+++ b/web/helpers/atoms/ChatMessage.atom.ts
@@ -1,4 +1,3 @@
-import { ChatMessage, MessageStatus } from '@/_models/ChatMessage'
 import { atom } from 'jotai'
 import { getActiveConvoIdAtom } from './Conversation.atom'
 
diff --git a/web/app/_helpers/atoms/Conversation.atom.ts b/web/helpers/atoms/Conversation.atom.ts
similarity index 94%
rename from web/app/_helpers/atoms/Conversation.atom.ts
rename to web/helpers/atoms/Conversation.atom.ts
index 8ee0ddf88..a46d093e2 100644
--- a/web/app/_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 { Conversation, ConversationState } from "@/_models/Conversation"
+import { atom } from 'jotai'
+import { MainViewState, setMainViewStateAtom } from './MainView.atom'
+import { activeBotAtom } from './Bot.atom'
 
 /**
  * Stores the current active conversation id.
@@ -16,6 +16,7 @@ export const setActiveConvoIdAtom = atom(
       console.debug(`Set active conversation id: ${convoId}`)
       set(setMainViewStateAtom, MainViewState.Conversation)
     }
+    set(activeBotAtom, undefined)
     set(activeConversationIdAtom, convoId)
   }
 )
diff --git a/web/app/_helpers/atoms/DownloadState.atom.ts b/web/helpers/atoms/DownloadState.atom.ts
similarity index 93%
rename from web/app/_helpers/atoms/DownloadState.atom.ts
rename to web/helpers/atoms/DownloadState.atom.ts
index 09d0d34e4..66c10e7a4 100644
--- a/web/app/_helpers/atoms/DownloadState.atom.ts
+++ b/web/helpers/atoms/DownloadState.atom.ts
@@ -1,4 +1,3 @@
-import { DownloadState } from '@/_models/DownloadState'
 import { atom } from 'jotai'
 
 // download states
diff --git a/web/app/_helpers/atoms/DownloadedModel.atom.ts b/web/helpers/atoms/DownloadedModel.atom.ts
similarity index 74%
rename from web/app/_helpers/atoms/DownloadedModel.atom.ts
rename to web/helpers/atoms/DownloadedModel.atom.ts
index 3e9e6de8c..c7e4aaf31 100644
--- a/web/app/_helpers/atoms/DownloadedModel.atom.ts
+++ b/web/helpers/atoms/DownloadedModel.atom.ts
@@ -1,4 +1,3 @@
-import { AssistantModel } from '@/_models/AssistantModel'
 import { atom } from 'jotai'
 
 /**
diff --git a/web/app/_helpers/atoms/ExploreModelLoading.atom.ts b/web/helpers/atoms/ExploreModelLoading.atom.ts
similarity index 100%
rename from web/app/_helpers/atoms/ExploreModelLoading.atom.ts
rename to web/helpers/atoms/ExploreModelLoading.atom.ts
diff --git a/web/app/_helpers/atoms/MainView.atom.ts b/web/helpers/atoms/MainView.atom.ts
similarity index 80%
rename from web/app/_helpers/atoms/MainView.atom.ts
rename to web/helpers/atoms/MainView.atom.ts
index 5bb703069..92bab3418 100644
--- a/web/app/_helpers/atoms/MainView.atom.ts
+++ b/web/helpers/atoms/MainView.atom.ts
@@ -1,10 +1,6 @@
 import { atom } from 'jotai'
 import { setActiveConvoIdAtom } from './Conversation.atom'
 import { systemBarVisibilityAtom } from './SystemBar.atom'
-import {
-  rightSideBarExpandStateAtom,
-  showRightSideBarToggleAtom,
-} from './LeftSideBarExpand.atom'
 
 export enum MainViewState {
   Welcome,
@@ -47,13 +43,6 @@ export const setMainViewStateAtom = atom(
       set(setActiveConvoIdAtom, undefined)
     }
 
-    if (state in [MainViewState.Welcome, MainViewState.CreateBot]) {
-      set(showRightSideBarToggleAtom, false)
-      set(rightSideBarExpandStateAtom, false)
-    } else {
-      set(showRightSideBarToggleAtom, true)
-    }
-
     const showSystemBar =
       state !== MainViewState.Conversation &&
       state !== MainViewState.ConversationEmptyModel
diff --git a/web/app/_helpers/atoms/Modal.atom.ts b/web/helpers/atoms/Modal.atom.ts
similarity index 100%
rename from web/app/_helpers/atoms/Modal.atom.ts
rename to web/helpers/atoms/Modal.atom.ts
diff --git a/web/app/_helpers/atoms/Model.atom.ts b/web/helpers/atoms/Model.atom.ts
similarity index 77%
rename from web/app/_helpers/atoms/Model.atom.ts
rename to web/helpers/atoms/Model.atom.ts
index b3d0750de..fe9eca635 100644
--- a/web/app/_helpers/atoms/Model.atom.ts
+++ b/web/helpers/atoms/Model.atom.ts
@@ -1,4 +1,3 @@
-import { AssistantModel } from '@/_models/AssistantModel'
 import { atom } from 'jotai'
 
 export const selectedModelAtom = atom<AssistantModel | undefined>(undefined)
diff --git a/web/app/_helpers/atoms/LeftSideBarExpand.atom.ts b/web/helpers/atoms/SideBarExpand.atom.ts
similarity index 56%
rename from web/app/_helpers/atoms/LeftSideBarExpand.atom.ts
rename to web/helpers/atoms/SideBarExpand.atom.ts
index 884b48349..54bcd67a0 100644
--- a/web/app/_helpers/atoms/LeftSideBarExpand.atom.ts
+++ b/web/helpers/atoms/SideBarExpand.atom.ts
@@ -5,6 +5,4 @@ import { atom } from 'jotai'
  */
 export const leftSideBarExpandStateAtom = atom<boolean>(true)
 
-export const rightSideBarExpandStateAtom = atom<boolean>(false)
-
-export const showRightSideBarToggleAtom = atom<boolean>(true)
+export const rightSideBarExpandStateAtom = atom<boolean>(true)
diff --git a/web/app/_helpers/atoms/SystemBar.atom.ts b/web/helpers/atoms/SystemBar.atom.ts
similarity index 100%
rename from web/app/_helpers/atoms/SystemBar.atom.ts
rename to web/helpers/atoms/SystemBar.atom.ts
diff --git a/web/app/_helpers/withAnalytics.tsx b/web/helpers/withAnalytics.tsx
similarity index 82%
rename from web/app/_helpers/withAnalytics.tsx
rename to web/helpers/withAnalytics.tsx
index 2271c3464..c37f24bab 100644
--- a/web/app/_helpers/withAnalytics.tsx
+++ b/web/helpers/withAnalytics.tsx
@@ -5,9 +5,7 @@ export function withAnalytics<P extends Record<string, any>>(
   Component: React.ComponentType<P>
 ): React.FC<P> {
   const WrappedComponent: React.FC<P> = (props) => {
-    useEffect(() => {
-      // Initialize analytics
-    }, [])
+    useEffect(() => {}, [])
 
     return <Component {...props} />
   }
diff --git a/web/app/_hooks/useChatMessages.ts b/web/hooks/useChatMessages.ts
similarity index 86%
rename from web/app/_hooks/useChatMessages.ts
rename to web/hooks/useChatMessages.ts
index 7c7f22d80..e8ab48945 100644
--- a/web/app/_hooks/useChatMessages.ts
+++ b/web/hooks/useChatMessages.ts
@@ -1,14 +1,14 @@
-import { ChatMessage, RawMessage, toChatMessage } from '@/_models/ChatMessage'
-import { executeSerial } from '@/_services/pluginService'
+import { toChatMessage } from '@models/ChatMessage'
+import { executeSerial } from '@services/pluginService'
 import { useAtomValue, useSetAtom } from 'jotai'
 import { useEffect, useState } from 'react'
 import { DataService } from '@janhq/core'
-import { addOldMessagesAtom } from '@/_helpers/atoms/ChatMessage.atom'
+import { addOldMessagesAtom } from '@helpers/atoms/ChatMessage.atom'
 import {
   currentConversationAtom,
   conversationStatesAtom,
   updateConversationHasMoreAtom,
-} from '@/_helpers/atoms/Conversation.atom'
+} from '@helpers/atoms/Conversation.atom'
 
 /**
  * Custom hooks to get chat messages for current(active) conversation
@@ -46,10 +46,10 @@ const useChatMessages = (offset = 0) => {
     getMessages()
   }, [
     offset,
-    currentConvo?._id,
     convoStates,
     addOldChatMessages,
     updateConvoHasMore,
+    currentConvo,
   ])
 
   return {
diff --git a/web/hooks/useCreateBot.ts b/web/hooks/useCreateBot.ts
new file mode 100644
index 000000000..c54db71fe
--- /dev/null
+++ b/web/hooks/useCreateBot.ts
@@ -0,0 +1,14 @@
+import { executeSerial } from '../../electron/core/plugin-manager/execution/extension-manager'
+
+export default function useCreateBot() {
+  const createBot = async (bot: Bot) => {
+    try {
+      await executeSerial('createBot', bot)
+    } catch (err) {
+      alert(err)
+      console.error(err)
+    }
+  }
+
+  return { createBot }
+}
diff --git a/web/app/_hooks/useCreateConversation.ts b/web/hooks/useCreateConversation.ts
similarity index 85%
rename from web/app/_hooks/useCreateConversation.ts
rename to web/hooks/useCreateConversation.ts
index 97acb3234..4c1e810d9 100644
--- a/web/app/_hooks/useCreateConversation.ts
+++ b/web/hooks/useCreateConversation.ts
@@ -1,17 +1,15 @@
-import { useAtom, useSetAtom } from "jotai"
-import { Conversation } from "@/_models/Conversation"
-import { executeSerial } from "@/_services/pluginService"
-import { DataService, ModelManagementService } from "@janhq/core"
+import { useAtom, useSetAtom } from 'jotai'
+
+import { executeSerial } from '@services/pluginService'
+import { DataService, ModelManagementService } from '@janhq/core'
 import {
   userConversationsAtom,
   setActiveConvoIdAtom,
   addNewConversationStateAtom,
   updateConversationWaitingForResponseAtom,
   updateConversationErrorAtom,
-} from '@/_helpers/atoms/Conversation.atom'
+} from '@helpers/atoms/Conversation.atom'
 import useInitModel from './useInitModel'
-import { AssistantModel } from '@/_models/AssistantModel'
-import { Bot } from "@/_models/Bot"
 
 const useCreateConversation = () => {
   const { initModel } = useInitModel()
diff --git a/web/hooks/useDeleteBot.ts b/web/hooks/useDeleteBot.ts
new file mode 100644
index 000000000..e253970da
--- /dev/null
+++ b/web/hooks/useDeleteBot.ts
@@ -0,0 +1,24 @@
+import { useSetAtom } from 'jotai'
+import { executeSerial } from '../../electron/core/plugin-manager/execution/extension-manager'
+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('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/app/_hooks/useDeleteConversation.ts b/web/hooks/useDeleteConversation.ts
similarity index 84%
rename from web/app/_hooks/useDeleteConversation.ts
rename to web/hooks/useDeleteConversation.ts
index cd2dde4d8..a3876b03b 100644
--- a/web/app/_hooks/useDeleteConversation.ts
+++ b/web/hooks/useDeleteConversation.ts
@@ -1,21 +1,21 @@
-import { currentPromptAtom } from '@/_helpers/JotaiWrapper'
-import { execute } from '@/_services/pluginService'
+import { currentPromptAtom } from '@helpers/JotaiWrapper'
+import { execute } from '@services/pluginService'
 import { useAtom, useAtomValue, useSetAtom } from 'jotai'
 import { DataService } from '@janhq/core'
-import { deleteConversationMessage } from '@/_helpers/atoms/ChatMessage.atom'
+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'
+} from '@helpers/atoms/Modal.atom'
 import {
   MainViewState,
   setMainViewStateAtom,
-} from '@/_helpers/atoms/MainView.atom'
+} from '@helpers/atoms/MainView.atom'
 
 export default function useDeleteConversation() {
   const [userConversations, setUserConversations] = useAtom(
diff --git a/web/app/_hooks/useDeleteModel.ts b/web/hooks/useDeleteModel.ts
similarity index 75%
rename from web/app/_hooks/useDeleteModel.ts
rename to web/hooks/useDeleteModel.ts
index b561a3779..295120fc8 100644
--- a/web/app/_hooks/useDeleteModel.ts
+++ b/web/hooks/useDeleteModel.ts
@@ -1,9 +1,8 @@
-import { execute, executeSerial } from '@/_services/pluginService'
+import { execute, executeSerial } from '@services/pluginService'
 import { ModelManagementService } from '@janhq/core'
 import { useSetAtom } from 'jotai'
-import { downloadedModelAtom } from '@/_helpers/atoms/DownloadedModel.atom'
+import { downloadedModelAtom } from '@helpers/atoms/DownloadedModel.atom'
 import { getDownloadedModels } from './useGetDownloadedModels'
-import { AssistantModel } from '@/_models/AssistantModel'
 
 export default function useDeleteModel() {
   const setDownloadedModels = useSetAtom(downloadedModelAtom)
diff --git a/web/app/_hooks/useDownloadModel.ts b/web/hooks/useDownloadModel.ts
similarity index 88%
rename from web/app/_hooks/useDownloadModel.ts
rename to web/hooks/useDownloadModel.ts
index e25fc2e52..07fe5ef0d 100644
--- a/web/app/_hooks/useDownloadModel.ts
+++ b/web/hooks/useDownloadModel.ts
@@ -1,8 +1,5 @@
-import { executeSerial } from '@/_services/pluginService'
+import { executeSerial } from '@services/pluginService'
 import { DataService, ModelManagementService } from '@janhq/core'
-import { ModelVersion } from '@/_models/ModelVersion'
-import { Product } from '@/_models/Product'
-import { AssistantModel } from '@/_models/AssistantModel'
 
 export default function useDownloadModel() {
   const assistanModel = (
diff --git a/web/app/_hooks/useGetAppVersion.ts b/web/hooks/useGetAppVersion.ts
similarity index 100%
rename from web/app/_hooks/useGetAppVersion.ts
rename to web/hooks/useGetAppVersion.ts
diff --git a/web/hooks/useGetBots.ts b/web/hooks/useGetBots.ts
new file mode 100644
index 000000000..aa1c02fb4
--- /dev/null
+++ b/web/hooks/useGetBots.ts
@@ -0,0 +1,27 @@
+import { executeSerial } from '../../electron/core/plugin-manager/execution/extension-manager'
+
+export default function useGetBots() {
+  const getAllBots = async (): Promise<Bot[]> => {
+    try {
+      const bots = await executeSerial('getBots')
+      return bots
+    } 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('getBotById', botId)
+      return bot
+    } catch (err) {
+      alert(`Failed to get bot ${botId}: ${err}`)
+      console.error(err)
+      return undefined
+    }
+  }
+
+  return { getBotById, getAllBots }
+}
diff --git a/web/app/_hooks/useGetConfiguredModels.ts b/web/hooks/useGetConfiguredModels.ts
similarity index 92%
rename from web/app/_hooks/useGetConfiguredModels.ts
rename to web/hooks/useGetConfiguredModels.ts
index c866a6201..6046fdb10 100644
--- a/web/app/_hooks/useGetConfiguredModels.ts
+++ b/web/hooks/useGetConfiguredModels.ts
@@ -1,4 +1,3 @@
-import { Product } from '@/_models/Product'
 import { useEffect, useState } from 'react'
 import { getConfiguredModels } from './useGetDownloadedModels'
 
diff --git a/web/app/_hooks/useGetCurrentUser.ts b/web/hooks/useGetCurrentUser.ts
similarity index 83%
rename from web/app/_hooks/useGetCurrentUser.ts
rename to web/hooks/useGetCurrentUser.ts
index c31e581c9..c0a284953 100644
--- a/web/app/_hooks/useGetCurrentUser.ts
+++ b/web/hooks/useGetCurrentUser.ts
@@ -2,7 +2,7 @@
 import { useSession } from 'next-auth/react'
 import { useEffect, useState } from 'react'
 import useSignOut from './useSignOut'
-import { DefaultUser, User } from '@/_models/User'
+import { DefaultUser, User } from '@models/User'
 
 export default function useGetCurrentUser() {
   const { data: session, status } = useSession()
@@ -18,7 +18,7 @@ export default function useGetCurrentUser() {
     ) {
       signOut()
     }
-  }, [session, status])
+  }, [session, signOut, status])
 
   useEffect(() => {
     if (status === 'loading') {
@@ -41,7 +41,13 @@ export default function useGetCurrentUser() {
 
     setUser(tmp)
     setLoading(false)
-  }, [status])
+  }, [
+    session?.user?.email,
+    session?.user?.image,
+    session?.user?.name,
+    session?.user?.user_id,
+    status,
+  ])
 
   return { user, loading }
 }
diff --git a/web/app/_hooks/useGetDownloadedModels.ts b/web/hooks/useGetDownloadedModels.ts
similarity index 72%
rename from web/app/_hooks/useGetDownloadedModels.ts
rename to web/hooks/useGetDownloadedModels.ts
index 251027d57..d77ab810d 100644
--- a/web/app/_hooks/useGetDownloadedModels.ts
+++ b/web/hooks/useGetDownloadedModels.ts
@@ -1,10 +1,8 @@
-import { Product } from '@/_models/Product'
 import { useEffect } from 'react'
-import { executeSerial } from '../../../electron/core/plugin-manager/execution/extension-manager'
+import { executeSerial } from '../../electron/core/plugin-manager/execution/extension-manager'
 import { ModelManagementService } from '@janhq/core'
 import { useAtom } from 'jotai'
-import { downloadedModelAtom } from '@/_helpers/atoms/DownloadedModel.atom'
-import { AssistantModel } from '@/_models/AssistantModel'
+import { downloadedModelAtom } from '@helpers/atoms/DownloadedModel.atom'
 
 export function useGetDownloadedModels() {
   const [downloadedModels, setDownloadedModels] = useAtom(downloadedModelAtom)
@@ -13,7 +11,7 @@ export function useGetDownloadedModels() {
     getDownloadedModels().then((downloadedModels) => {
       setDownloadedModels(downloadedModels)
     })
-  }, [])
+  }, [setDownloadedModels])
 
   return { downloadedModels }
 }
diff --git a/web/app/_hooks/useGetHuggingFaceModel.ts b/web/hooks/useGetHuggingFaceModel.ts
similarity index 82%
rename from web/app/_hooks/useGetHuggingFaceModel.ts
rename to web/hooks/useGetHuggingFaceModel.ts
index 85a3636f8..9edd84192 100644
--- a/web/app/_hooks/useGetHuggingFaceModel.ts
+++ b/web/hooks/useGetHuggingFaceModel.ts
@@ -1,8 +1,6 @@
 import { useState } from 'react'
-import { SearchModelParamHf } from '@/_models/hf/SearchModelParam.hf'
-import { Product } from '@/_models/Product'
 import { useSetAtom } from 'jotai'
-import { modelLoadMoreAtom } from '@/_helpers/atoms/ExploreModelLoading.atom'
+import { modelLoadMoreAtom } from '@helpers/atoms/ExploreModelLoading.atom'
 
 export default function useGetHuggingFaceModel() {
   const setLoadMoreInProgress = useSetAtom(modelLoadMoreAtom)
diff --git a/web/app/_hooks/useGetMostSuitableModelVersion.ts b/web/hooks/useGetMostSuitableModelVersion.ts
similarity index 87%
rename from web/app/_hooks/useGetMostSuitableModelVersion.ts
rename to web/hooks/useGetMostSuitableModelVersion.ts
index 1ea0f66d1..5dd95d1e6 100644
--- a/web/app/_hooks/useGetMostSuitableModelVersion.ts
+++ b/web/hooks/useGetMostSuitableModelVersion.ts
@@ -1,7 +1,6 @@
-import { ModelVersion } from '@/_models/ModelVersion'
 import { useState } from 'react'
 import { useAtomValue } from 'jotai'
-import { totalRamAtom } from '@/_helpers/atoms/SystemBar.atom'
+import { totalRamAtom } from '@helpers/atoms/SystemBar.atom'
 
 export default function useGetMostSuitableModelVersion() {
   const [suitableModel, setSuitableModel] = useState<ModelVersion | undefined>()
diff --git a/web/app/_hooks/useGetPerformanceTag.ts b/web/hooks/useGetPerformanceTag.ts
similarity index 92%
rename from web/app/_hooks/useGetPerformanceTag.ts
rename to web/hooks/useGetPerformanceTag.ts
index 81380dc66..b5122fc69 100644
--- a/web/app/_hooks/useGetPerformanceTag.ts
+++ b/web/hooks/useGetPerformanceTag.ts
@@ -1,8 +1,8 @@
 import { useState } from 'react'
-import { ModelVersion } from '@/_models/ModelVersion'
+
 import { ModelPerformance, TagType } from '@/_components/SimpleTag/TagType'
 import { useAtomValue } from 'jotai'
-import { totalRamAtom } from '@/_helpers/atoms/SystemBar.atom'
+import { totalRamAtom } from '@helpers/atoms/SystemBar.atom'
 
 // Recommendation:
 // `Recommended (green)`: "Max RAM required" is 80% of users max  RAM.
diff --git a/web/app/_hooks/useGetSystemResources.ts b/web/hooks/useGetSystemResources.ts
similarity index 83%
rename from web/app/_hooks/useGetSystemResources.ts
rename to web/hooks/useGetSystemResources.ts
index 6453b3950..1062d1d6a 100644
--- a/web/app/_hooks/useGetSystemResources.ts
+++ b/web/hooks/useGetSystemResources.ts
@@ -1,8 +1,8 @@
 import { useEffect, useState } from 'react'
-import { executeSerial } from '../../../electron/core/plugin-manager/execution/extension-manager'
+import { executeSerial } from '../../electron/core/plugin-manager/execution/extension-manager'
 import { SystemMonitoringService } from '@janhq/core'
 import { useSetAtom } from 'jotai'
-import { totalRamAtom } from '@/_helpers/atoms/SystemBar.atom'
+import { totalRamAtom } from '@helpers/atoms/SystemBar.atom'
 export default function useGetSystemResources() {
   const [ram, setRam] = useState<number>(0)
   const [cpu, setCPU] = useState<number>(0)
@@ -33,6 +33,7 @@ export default function useGetSystemResources() {
 
     // clean up
     return () => clearInterval(intervalId)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   return {
diff --git a/web/app/_hooks/useGetUserConversations.ts b/web/hooks/useGetUserConversations.ts
similarity index 83%
rename from web/app/_hooks/useGetUserConversations.ts
rename to web/hooks/useGetUserConversations.ts
index c749f9f7f..88557cb6f 100644
--- a/web/app/_hooks/useGetUserConversations.ts
+++ b/web/hooks/useGetUserConversations.ts
@@ -1,11 +1,10 @@
-import { Conversation, ConversationState } from '@/_models/Conversation'
 import { useSetAtom } from 'jotai'
-import { executeSerial } from '@/_services/pluginService'
+import { executeSerial } from '@services/pluginService'
 import { DataService } from '@janhq/core'
 import {
   conversationStatesAtom,
   userConversationsAtom,
-} from '@/_helpers/atoms/Conversation.atom'
+} from '@helpers/atoms/Conversation.atom'
 
 const useGetUserConversations = () => {
   const setConversationStates = useSetAtom(conversationStatesAtom)
diff --git a/web/app/_hooks/useInitModel.ts b/web/hooks/useInitModel.ts
similarity index 81%
rename from web/app/_hooks/useInitModel.ts
rename to web/hooks/useInitModel.ts
index 84ef05ce2..33121845b 100644
--- a/web/app/_hooks/useInitModel.ts
+++ b/web/hooks/useInitModel.ts
@@ -1,8 +1,7 @@
-import { executeSerial } from '@/_services/pluginService'
+import { executeSerial } from '@services/pluginService'
 import { InferenceService } from '@janhq/core'
 import { useAtom } from 'jotai'
-import { activeAssistantModelAtom } from '@/_helpers/atoms/Model.atom'
-import { AssistantModel } from '@/_models/AssistantModel'
+import { activeAssistantModelAtom } from '@helpers/atoms/Model.atom'
 
 export default function useInitModel() {
   const [activeModel, setActiveModel] = useAtom(activeAssistantModelAtom)
diff --git a/web/app/_hooks/useSendChatMessage.ts b/web/hooks/useSendChatMessage.ts
similarity index 89%
rename from web/app/_hooks/useSendChatMessage.ts
rename to web/hooks/useSendChatMessage.ts
index 09355ed1e..8de79808e 100644
--- a/web/app/_hooks/useSendChatMessage.ts
+++ b/web/hooks/useSendChatMessage.ts
@@ -1,4 +1,4 @@
-import { currentPromptAtom } from '@/_helpers/JotaiWrapper'
+import { currentPromptAtom } from '@helpers/JotaiWrapper'
 import { useAtom, useAtomValue, useSetAtom } from 'jotai'
 import {
   DataService,
@@ -7,13 +7,13 @@ import {
   events,
   store,
 } from '@janhq/core'
-import { RawMessage, toChatMessage } from '@/_models/ChatMessage'
-import { executeSerial } from '@/_services/pluginService'
-import { addNewMessageAtom } from '@/_helpers/atoms/ChatMessage.atom'
+import { toChatMessage } from '@models/ChatMessage'
+import { executeSerial } from '@services/pluginService'
+import { addNewMessageAtom } from '@helpers/atoms/ChatMessage.atom'
 import {
   currentConversationAtom,
   updateConversationAtom,
-} from '@/_helpers/atoms/Conversation.atom'
+} from '@helpers/atoms/Conversation.atom'
 
 export default function useSendChatMessage() {
   const currentConvo = useAtomValue(currentConversationAtom)
diff --git a/web/app/_hooks/useSignIn.ts b/web/hooks/useSignIn.ts
similarity index 100%
rename from web/app/_hooks/useSignIn.ts
rename to web/hooks/useSignIn.ts
diff --git a/web/app/_hooks/useSignOut.ts b/web/hooks/useSignOut.ts
similarity index 100%
rename from web/app/_hooks/useSignOut.ts
rename to web/hooks/useSignOut.ts
diff --git a/web/app/_hooks/useStartStopModel.ts b/web/hooks/useStartStopModel.ts
similarity index 85%
rename from web/app/_hooks/useStartStopModel.ts
rename to web/hooks/useStartStopModel.ts
index a2deed011..a35a35e8a 100644
--- a/web/app/_hooks/useStartStopModel.ts
+++ b/web/hooks/useStartStopModel.ts
@@ -1,8 +1,8 @@
-import { executeSerial } from '@/_services/pluginService'
+import { executeSerial } from '@services/pluginService'
 import { ModelManagementService, InferenceService } from '@janhq/core'
 import useInitModel from './useInitModel'
 import { useSetAtom } from 'jotai'
-import { activeAssistantModelAtom } from '@/_helpers/atoms/Model.atom'
+import { activeAssistantModelAtom } from '@helpers/atoms/Model.atom'
 
 export default function useStartStopModel() {
   const { initModel } = useInitModel()
diff --git a/web/hooks/useUpdateBot.ts b/web/hooks/useUpdateBot.ts
new file mode 100644
index 000000000..5eff88e70
--- /dev/null
+++ b/web/hooks/useUpdateBot.ts
@@ -0,0 +1,36 @@
+import { executeSerial } from '../../electron/core/plugin-manager/execution/extension-manager'
+
+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('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
new file mode 100644
index 000000000..8b09128e8
--- /dev/null
+++ b/web/hooks/useUserConfigs.ts
@@ -0,0 +1,6 @@
+import { useAtom } from 'jotai'
+import { userConfigs } from '@helpers/JotaiWrapper'
+
+export function useUserConfigs() {
+  return useAtom(userConfigs)
+}
diff --git a/web/app/_models/ChatMessage.ts b/web/models/ChatMessage.ts
similarity index 100%
rename from web/app/_models/ChatMessage.ts
rename to web/models/ChatMessage.ts
diff --git a/web/models/User.ts b/web/models/User.ts
new file mode 100644
index 000000000..8c69a0505
--- /dev/null
+++ b/web/models/User.ts
@@ -0,0 +1,6 @@
+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 c276d3de4..d72a1ee86 100644
--- a/web/next.config.js
+++ b/web/next.config.js
@@ -4,6 +4,7 @@ const webpack = require('webpack')
 const nextConfig = {
   output: 'export',
   assetPrefix: '.',
+  transpilePackages: ['lucide-react'],
   experimental: {
     serverActions: false,
   },
diff --git a/web/package.json b/web/package.json
index f097109a9..8b33f67e7 100644
--- a/web/package.json
+++ b/web/package.json
@@ -15,10 +15,14 @@
     "@headlessui/react": "^1.7.15",
     "@heroicons/react": "^2.0.18",
     "@janhq/core": "^0.1.6",
+    "@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",
+    "class-variance-authority": "^0.7.0",
     "classnames": "^2.3.2",
     "embla-carousel": "^8.0.0-rc11",
     "embla-carousel-react": "^8.0.0-rc11",
@@ -29,6 +33,7 @@
     "jotai": "^2.4.0",
     "jotai-optics": "^0.3.1",
     "jwt-decode": "^3.1.2",
+    "lucide-react": "^0.288.0",
     "marked": "^9.1.2",
     "marked-highlight": "^2.0.6",
     "next": "13.4.10",
@@ -39,6 +44,8 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.45.4",
+    "sass": "^1.69.4",
+    "tailwind-merge": "^1.14.0",
     "tailwindcss": "3.3.3",
     "typescript": "5.1.6",
     "uuid": "^9.0.1"
@@ -46,9 +53,9 @@
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.4",
     "@types/node": "20.6.5",
+    "@types/uuid": "^9.0.6",
     "encoding": "^0.1.13",
     "prettier": "^3.0.3",
-    "prettier-plugin-tailwindcss": "^0.5.6",
-    "@types/uuid": "^9.0.6"
+    "prettier-plugin-tailwindcss": "^0.5.6"
   }
 }
diff --git a/web/screens/Bot/index.tsx b/web/screens/Bot/index.tsx
new file mode 100644
index 000000000..ce68e1650
--- /dev/null
+++ b/web/screens/Bot/index.tsx
@@ -0,0 +1,13 @@
+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/screens/Chat/EmptyChatScreen.tsx b/web/screens/Chat/EmptyChatScreen.tsx
new file mode 100644
index 000000000..ab579a6e6
--- /dev/null
+++ b/web/screens/Chat/EmptyChatScreen.tsx
@@ -0,0 +1,22 @@
+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/index.tsx b/web/screens/Chat/index.tsx
new file mode 100644
index 000000000..adc99c4ca
--- /dev/null
+++ b/web/screens/Chat/index.tsx
@@ -0,0 +1,27 @@
+import React 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'
+
+const ChatScreen = () => {
+  return (
+    <div className="flex h-full">
+      <div className="border-border flex h-full w-64 flex-shrink-0 flex-col overflow-y-auto border-r ">
+        <div className="px-4 py-6 pt-4">
+          <LeftHeaderAction />
+          <HistoryList />
+        </div>
+      </div>
+      <div className="bg-background/50 relative flex h-full w-full flex-col">
+        <MainHeader />
+        <ChatBody />
+        <InputToolbar />
+      </div>
+    </div>
+  )
+}
+
+export default ChatScreen
diff --git a/web/screens/ExploreModels/ExploreModelList/index.tsx b/web/screens/ExploreModels/ExploreModelList/index.tsx
new file mode 100644
index 000000000..6c3acee71
--- /dev/null
+++ b/web/screens/ExploreModels/ExploreModelList/index.tsx
@@ -0,0 +1,22 @@
+import React, { useEffect } from 'react'
+import ExploreModelItem from '@/_components/ExploreModelItem'
+import { getConfiguredModels } from '@hooks/useGetDownloadedModels'
+import useGetConfiguredModels from '@hooks/useGetConfiguredModels'
+
+const ExploreModelList: React.FC = () => {
+  const { loading, models } = useGetConfiguredModels()
+
+  useEffect(() => {
+    getConfiguredModels()
+  }, [])
+
+  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/index.tsx b/web/screens/ExploreModels/index.tsx
new file mode 100644
index 000000000..6b7f6286b
--- /dev/null
+++ b/web/screens/ExploreModels/index.tsx
@@ -0,0 +1,32 @@
+import React, { Fragment, useEffect } from 'react'
+import ExploreModelList from '@screens/ExploreModels/ExploreModelList'
+import useGetConfiguredModels from '@hooks/useGetConfiguredModels'
+import { getConfiguredModels } from '@hooks/useGetDownloadedModels'
+import Loader from '@containers/Loader'
+
+const ExploreModelsScreen = () => {
+  const { loading, models } = useGetConfiguredModels()
+
+  useEffect(() => {
+    getConfiguredModels()
+  }, [])
+
+  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>
+    </div>
+  )
+}
+
+export default ExploreModelsScreen
diff --git a/web/screens/MyModels/index.tsx b/web/screens/MyModels/index.tsx
new file mode 100644
index 000000000..22b6fe2d4
--- /dev/null
+++ b/web/screens/MyModels/index.tsx
@@ -0,0 +1,82 @@
+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 ActiveModelTable from '@/_components/ActiveModelTable'
+import DownloadingModelTable from '@/_components/DownloadingModelTable'
+import { useAtomValue } from 'jotai'
+import { useGetDownloadedModels } from '@hooks/useGetDownloadedModels'
+import { formatDownloadPercentage } from '@utils/converter'
+import { LayoutGrid } from 'lucide-react'
+import {
+  setMainViewStateAtom,
+  MainViewState,
+} from '@helpers/atoms/MainView.atom'
+
+const MyModelsScreen = () => {
+  const { downloadedModels } = useGetDownloadedModels()
+  const setMainViewState = useSetAtom(setMainViewStateAtom)
+  const modelDownloadStates = useAtomValue(modelDownloadStateAtom)
+
+  const downloadStates: DownloadState[] = []
+  for (const [, value] of Object.entries(modelDownloadStates)) {
+    downloadStates.push(value)
+  }
+
+  const isDownloadingFirstModel = downloadStates.length > 0
+
+  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="text-accent/50 mx-auto" />
+          <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="text-muted-foreground mt-1">
+                    {downloadStates[0].fileName} -{' '}
+                    {formatDownloadPercentage(downloadStates[0].percent)}
+                  </p>
+                </div>
+              </div>
+            ) : (
+              <Fragment>
+                <h1 className="text-2xl font-bold leading-snug">{`Ups, You don't have a model.`}</h1>
+                <p className="text-muted-foreground mt-1 text-base">{`let’s download your first model`}</p>
+                <Button
+                  className="mt-4"
+                  themes="accent"
+                  onClick={() => setMainViewState(MainViewState.ExploreModel)}
+                >
+                  Explore Models
+                </Button>
+              </Fragment>
+            )}
+          </div>
+        </div>
+      </div>
+    )
+
+  return (
+    <div className="flex h-full w-full overflow-y-auto">
+      <div className="w-full p-5">
+        <h1 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>
+    </div>
+  )
+}
+
+export default MyModelsScreen
diff --git a/web/screens/Settings/Appearance/index.tsx b/web/screens/Settings/Appearance/index.tsx
new file mode 100644
index 000000000..709a5eb5e
--- /dev/null
+++ b/web/screens/Settings/Appearance/index.tsx
@@ -0,0 +1,33 @@
+'use client'
+
+import React from 'react'
+
+import ToggleTheme from './toggleTheme'
+import ToggleAccent from './toggleAccent'
+
+const 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-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>
+        </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-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>
+        </div>
+        <ToggleAccent />
+      </div>
+    </div>
+  )
+}
+
+export default AppearanceOptions
diff --git a/web/screens/Settings/Appearance/toggleAccent.tsx b/web/screens/Settings/Appearance/toggleAccent.tsx
new file mode 100644
index 000000000..5b5fb0de7
--- /dev/null
+++ b/web/screens/Settings/Appearance/toggleAccent.tsx
@@ -0,0 +1,63 @@
+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
+  class: string
+}
+
+const accentOptions: AccentOption[] = [
+  {
+    value: 'accent-blue',
+    class: 'bg-blue-500',
+  },
+  {
+    value: 'accent-red',
+    class: 'bg-red-500',
+  },
+  {
+    value: 'accent-green',
+    class: 'bg-green-500',
+  },
+  {
+    value: 'accent-orange',
+    class: 'bg-orange-500',
+  },
+]
+
+const ToggleAccent = () => {
+  const [config, setUserConfig] = useUserConfigs()
+
+  const handleChangeAccent = (accent: Accent) => {
+    setUserConfig({ ...config, accent })
+  }
+
+  return (
+    <div className="flex items-center">
+      {accentOptions.map((option, i) => {
+        const isActive = config.accent === option.value
+        return (
+          <div
+            className="relative flex h-6 w-6 items-center justify-center"
+            key={i}
+          >
+            <button
+              className={twMerge('h-3.5 w-3.5 rounded-full', option.class)}
+              onClick={() => handleChangeAccent(option.value)}
+            />
+            {isActive ? (
+              <m.div
+                className="border-accent/50 bg-accent/20 absolute inset-0 h-full w-full rounded-full border"
+                layoutId="active-accent-menu"
+              />
+            ) : null}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+export default ToggleAccent
diff --git a/web/screens/Settings/Appearance/toggleTheme.tsx b/web/screens/Settings/Appearance/toggleTheme.tsx
new file mode 100644
index 000000000..864b191c2
--- /dev/null
+++ b/web/screens/Settings/Appearance/toggleTheme.tsx
@@ -0,0 +1,66 @@
+'use client'
+
+import * as React from 'react'
+import { useTheme } from 'next-themes'
+import { twMerge } from 'tailwind-merge'
+
+import { motion as m } from 'framer-motion'
+
+const themeMenus = [
+  {
+    name: 'light',
+  },
+  {
+    name: 'dark',
+  },
+  {
+    name: 'system',
+  },
+]
+
+const ToggleTheme = () => {
+  const { theme: currentTheme, setTheme } = useTheme()
+
+  const handeleNativeTheme = async (val: string) => {
+    switch (val) {
+      case 'light':
+        return await window?.electronAPI.setNativeThemeLight()
+      case 'dark':
+        return await window?.electronAPI.setNativeThemeDark()
+      default:
+        return await window?.electronAPI.setNativeThemeSystem()
+    }
+  }
+
+  return (
+    <div className="flex items-center space-x-1">
+      {themeMenus.map((theme, i) => {
+        const isActive = currentTheme === theme.name
+        return (
+          <div className="relative" key={i}>
+            <button
+              className={twMerge(
+                'px-2 py-1 font-semibold capitalize',
+                !isActive && 'opacity-50'
+              )}
+              onClick={async () => {
+                setTheme(theme.name)
+                handeleNativeTheme(theme.name)
+              }}
+            >
+              {theme.name}
+            </button>
+            {isActive ? (
+              <m.div
+                className="border-accent/50 bg-accent/20 absolute inset-0 h-full w-full rounded-md border"
+                layoutId="active-theme-menu"
+              />
+            ) : null}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+export default ToggleTheme
diff --git a/web/screens/Settings/CorePlugins/PluginsCatalog.tsx b/web/screens/Settings/CorePlugins/PluginsCatalog.tsx
new file mode 100644
index 000000000..13e46fe62
--- /dev/null
+++ b/web/screens/Settings/CorePlugins/PluginsCatalog.tsx
@@ -0,0 +1,190 @@
+'use client'
+
+import React, { useState, useEffect, useRef } from 'react'
+import { Button, Switch } from '@uikit'
+import Loader from '@containers/Loader'
+import { formatPluginsName } from '@utils/converter'
+
+import {
+  plugins,
+  extensionPoints,
+} from '@/../../electron/core/plugin-manager/execution/index'
+
+const PluginCatalog = () => {
+  // const [search, setSearch] = useState<string>('')
+  // const [fileName, setFileName] = useState('')
+  const [activePlugins, setActivePlugins] = useState<any[]>([])
+  const [pluginCatalog, setPluginCatalog] = useState<any[]>([])
+  const [isLoading, setIsLoading] = useState<boolean>(false)
+  const experimentRef = useRef(null)
+
+  /**
+   * Loads the plugin catalog module from a CDN and sets it as the plugin catalog state.
+   * The `webpackIgnore` comment is used to prevent Webpack from bundling the module.
+   */
+  useEffect(() => {
+    // @ts-ignore
+    import(/* webpackIgnore: true */ PLUGIN_CATALOGS).then((module) => {
+      setPluginCatalog(module.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 plugins.getActive()
+      setActivePlugins(plgs)
+
+      if (extensionPoints.get('experimentComponent')) {
+        const components = await Promise.all(
+          extensionPoints.execute('experimentComponent')
+        )
+        components.forEach((e) => {
+          if (experimentRef.current) {
+            // @ts-ignore
+            experimentRef.current.appendChild(e)
+          }
+        })
+      }
+    }
+    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 plugins.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 plugins.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 plugins.install([pluginPath])
+    setIsLoading(false)
+    if (installed) window.coreAPI.relaunch()
+  }
+
+  /**
+   * 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="block w-full">
+      {pluginCatalog.map((item, i) => {
+        const isActivePlugin = activePlugins.some((x) => x.name === item.name)
+        const updateVersionPlugins = Number(
+          activePlugins
+            .filter((p) => p.name === item.name)[0]
+            ?.version.replaceAll('.', '')
+        )
+        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"
+          >
+            <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">
+                  v{item.version}
+                </p>
+              </div>
+              <p className="whitespace-pre-wrap leading-relaxed text-gray-600 dark:text-gray-400">
+                {item.description}
+              </p>
+              {isActivePlugin &&
+                item.version.replaceAll('.', '') < updateVersionPlugins && (
+                  <Button
+                    size="sm"
+                    themes="outline"
+                    onClick={() => downloadTarball(item.name)}
+                  >
+                    Update
+                  </Button>
+                )}
+            </div>
+            <Switch
+              defaultChecked={isActivePlugin}
+              onCheckedChange={(e) => {
+                if (e === true) {
+                  downloadTarball(item.name)
+                } else {
+                  uninstall(item.name)
+                }
+              }}
+            />
+          </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>
+  )
+}
+
+export default PluginCatalog
diff --git a/web/screens/Settings/CorePlugins/PreferencePlugins/index.tsx b/web/screens/Settings/CorePlugins/PreferencePlugins/index.tsx
new file mode 100644
index 000000000..713ecc01b
--- /dev/null
+++ b/web/screens/Settings/CorePlugins/PreferencePlugins/index.tsx
@@ -0,0 +1,66 @@
+import React, { Children } from 'react'
+import { execute } from '../../../../../electron/core/plugin-manager/execution/extension-manager'
+
+type Props = {
+  pluginName: string
+  preferenceValues: any
+  preferenceItems: any
+}
+
+import { formatPluginsName } from '@utils/converter'
+import { PluginService, preferences } from '@janhq/core'
+
+const PreferencePlugins = (props: Props) => {
+  const { pluginName, preferenceValues, preferenceItems } = props
+
+  /**
+   * 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)
+    }
+    timeout = setTimeout(() => execute(PluginService.OnPreferencesUpdate), 100)
+  }
+
+  return (
+    <div>
+      <h6 className="mb-6 text-sm 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="text-muted-foreground mt-1">
+              {e.preferenceDescription}
+            </span>
+            <div className="mt-2 flex flex-row items-center space-x-4">
+              <input
+                className="bg-background/80 ring-border placeholder:text-muted-foreground focus:ring-accent/50 block w-full rounded-md border-0 py-1.5 text-xs shadow-sm ring-1 ring-inset focus:ring-2 focus:ring-inset sm:leading-6"
+                defaultValue={
+                  preferenceValues.filter(
+                    (v: any) => v.key === e.preferenceKey
+                  )[0]?.value
+                }
+                onChange={(event) => {
+                  preferences
+                    .set(e.pluginName, e.preferenceKey, event.target.value)
+                    .then(() => notifyPreferenceUpdate())
+                }}
+              ></input>
+            </div>
+          </div>
+        ))}
+    </div>
+  )
+}
+
+export default PreferencePlugins
diff --git a/web/screens/Settings/index.tsx b/web/screens/Settings/index.tsx
new file mode 100644
index 000000000..bc8b88634
--- /dev/null
+++ b/web/screens/Settings/index.tsx
@@ -0,0 +1,174 @@
+'use client'
+import React from 'react'
+import { useEffect, useState } from 'react'
+
+import { motion as m } from 'framer-motion'
+
+import AppearanceOptions from './Appearance'
+import PluginCatalog from './CorePlugins/PluginsCatalog'
+import PreferencePlugins from './CorePlugins/PreferencePlugins'
+
+import { preferences } from '@janhq/core'
+import { twMerge } from 'tailwind-merge'
+
+import { formatPluginsName } from '@utils/converter'
+
+import {
+  plugins,
+  extensionPoints,
+} from '@/../../electron/core/plugin-manager/execution/index'
+
+const staticMenu = ['Appearance', 'Core Plugins']
+
+const SettingsScreen = () => {
+  const [activeStaticMenu, setActiveStaticMenu] = useState('Appearance')
+  const [preferenceItems, setPreferenceItems] = useState<any[]>([])
+  const [preferenceValues, setPreferenceValues] = useState<any[]>([])
+
+  /**
+   * 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 getActivePluginPreferences = async () => {
+      if (extensionPoints.get('PluginPreferences')) {
+        const data = await Promise.all(
+          extensionPoints.execute('PluginPreferences')
+        )
+        setPreferenceItems(Array.isArray(data) ? data : [])
+        Promise.all(
+          (Array.isArray(data) ? data : []).map((e) =>
+            preferences
+              .get(e.pluginName, e.preferenceKey)
+              .then((k) => ({ key: e.preferenceKey, value: k }))
+          )
+        ).then((data) => {
+          setPreferenceValues(data)
+        })
+      }
+    }
+    getActivePluginPreferences()
+  }, [])
+
+  const preferencePlugins = preferenceItems
+    .map((x) => x.pluginName)
+    .filter((x, i) => {
+      return preferenceItems.map((x) => x.pluginName).indexOf(x) === i
+    })
+
+  const [activePreferencePlugin, setActivePreferencePlugin] = useState(
+    preferencePlugins[0]
+  )
+
+  const handleShowOptions = (menu: string) => {
+    switch (menu) {
+      case 'Core Plugins':
+        return <PluginCatalog />
+
+      case 'Appearance':
+        return <AppearanceOptions />
+
+      default:
+        return (
+          <PreferencePlugins
+            pluginName={menu}
+            preferenceItems={preferenceItems}
+            preferenceValues={preferenceValues}
+          />
+        )
+    }
+  }
+
+  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">
+              {staticMenu.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">
+            <label className="font-bold uppercase text-gray-500">
+              Core plugins
+            </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'
+                        )}
+                      >
+                        {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>
+                )
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="w-full overflow-y-auto bg-background/50 p-5">
+        {handleShowOptions(activeStaticMenu || activePreferencePlugin)}
+      </div>
+    </div>
+  )
+}
+
+export default SettingsScreen
diff --git a/web/screens/Welcome/index.tsx b/web/screens/Welcome/index.tsx
new file mode 100644
index 000000000..cba1d8873
--- /dev/null
+++ b/web/screens/Welcome/index.tsx
@@ -0,0 +1,38 @@
+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'
+
+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"
+        >
+          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>
+      </div>
+    </div>
+  )
+}
+
+export default WelcomeScreen
diff --git a/web/app/_services/coreService.ts b/web/services/coreService.ts
similarity index 100%
rename from web/app/_services/coreService.ts
rename to web/services/coreService.ts
diff --git a/web/app/_services/eventsService.ts b/web/services/eventsService.ts
similarity index 100%
rename from web/app/_services/eventsService.ts
rename to web/services/eventsService.ts
diff --git a/web/app/_services/pluginService.ts b/web/services/pluginService.ts
similarity index 95%
rename from web/app/_services/pluginService.ts
rename to web/services/pluginService.ts
index 31d325145..812bc3a79 100644
--- a/web/app/_services/pluginService.ts
+++ b/web/services/pluginService.ts
@@ -2,7 +2,7 @@
 import {
   extensionPoints,
   plugins,
-} from '../../../electron/core/plugin-manager/execution/index'
+} from '../../electron/core/plugin-manager/execution/index'
 import {
   CoreService,
   DataService,
diff --git a/web/app/_services/storeService.ts b/web/services/storeService.ts
similarity index 100%
rename from web/app/_services/storeService.ts
rename to web/services/storeService.ts
diff --git a/web/app/code-block.css b/web/styles/code-block.scss
similarity index 100%
rename from web/app/code-block.css
rename to web/styles/code-block.scss
diff --git a/web/styles/global.scss b/web/styles/global.scss
new file mode 100644
index 000000000..d7c651c3b
--- /dev/null
+++ b/web/styles/global.scss
@@ -0,0 +1,25 @@
+@layer base {
+  img {
+    pointer-events: none;
+  }
+
+  svg {
+    stroke-width: 1.5;
+  }
+
+  .title-bar {
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    width: 100%;
+    height: 32px;
+    -webkit-user-select: none;
+    -webkit-app-region: drag;
+    // @apply bg-white;
+    // @apply dark:bg-gray-950/50;
+  }
+
+  .unset-drag {
+    -webkit-app-region: no-drag;
+  }
+}
diff --git a/web/styles/loader.scss b/web/styles/loader.scss
new file mode 100644
index 000000000..2b92b557f
--- /dev/null
+++ b/web/styles/loader.scss
@@ -0,0 +1,91 @@
+.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
new file mode 100644
index 000000000..010695926
--- /dev/null
+++ b/web/styles/main.scss
@@ -0,0 +1,9 @@
+// Tailwind
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+
+@import './variables.scss';
+@import './global.scss';
+@import './code-block.scss';
+@import './loader.scss';
diff --git a/web/styles/variables.scss b/web/styles/variables.scss
new file mode 100644
index 000000000..6f765ddc6
--- /dev/null
+++ b/web/styles/variables.scss
@@ -0,0 +1,72 @@
+@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 7c40f46ff..aad9f3b7c 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -1,9 +1,52 @@
+const { reverse } = require('dns')
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   darkMode: 'class',
-  content: ['./app/**/*.{js,ts,jsx,tsx,mdx}'],
+  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: {
     extend: {
+      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':
@@ -13,9 +56,6 @@ module.exports = {
         bounce200: 'bounce 1s infinite 200ms',
         bounce400: 'bounce 1s infinite 400ms',
       },
-      colors: {
-        'hover-light': { DEFAULT: '#F9FAFB' },
-      },
     },
   },
   plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
diff --git a/web/tsconfig.json b/web/tsconfig.json
index 3cd0a5dc9..be06835f6 100644
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@@ -2,7 +2,7 @@
   "compilerOptions": {
     "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],
-    "typeRoots": ["node_modules/@types"],
+    "typeRoots": ["node_modules/@types", "./src/types"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -21,7 +21,15 @@
       }
     ],
     "paths": {
-      "@/*": ["./app/*"]
+      "@/*": ["./app/*"],
+      "@uikit": ["./uikit"],
+      "@services/*": ["./services/*"],
+      "@helpers/*": ["./helpers/*"],
+      "@utils/*": ["./utils/*"],
+      "@models/*": ["./models/*"],
+      "@hooks/*": ["./hooks/*"],
+      "@containers/*": ["./containers/*"],
+      "@screens/*": ["./screens/*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
diff --git a/web/types/appearance.d.ts b/web/types/appearance.d.ts
new file mode 100644
index 000000000..06d9ad187
--- /dev/null
+++ b/web/types/appearance.d.ts
@@ -0,0 +1,7 @@
+type Accent = 'accent-blue' | 'accent-green' | 'accent-red' | 'accent-orange'
+
+type UserConfig = {
+  gettingStartedShow?: boolean
+  accent?: Accent
+  sidebarLeftExpand?: boolean
+}
diff --git a/web/types/bot.d.ts b/web/types/bot.d.ts
new file mode 100644
index 000000000..1f0d3ad66
--- /dev/null
+++ b/web/types/bot.d.ts
@@ -0,0 +1,32 @@
+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
new file mode 100644
index 000000000..dff6f05d8
--- /dev/null
+++ b/web/types/chatMessage.d.ts
@@ -0,0 +1,62 @@
+enum MessageType {
+  Text = 'Text',
+  Image = 'Image',
+  ImageWithText = 'ImageWithText',
+  Error = 'Error',
+}
+
+enum MessageSenderType {
+  Ai = 'assistant',
+  User = 'user',
+}
+
+enum MessageStatus {
+  Ready = 'ready',
+  Pending = 'pending',
+}
+
+interface ChatMessage {
+  id: string
+  conversationId: string
+  messageType: MessageType
+  messageSenderType: MessageSenderType
+  senderUid: string
+  senderName: string
+  senderAvatarUrl: string
+  text: string | undefined
+  imageUrls?: string[] | undefined
+  createdAt: number
+  status: MessageStatus
+}
+
+interface RawMessage {
+  _id?: string
+  conversationId?: string
+  user?: string
+  avatar?: string
+  message?: string
+  createdAt?: string
+  updatedAt?: string
+}
+
+interface Conversation {
+  _id?: string
+  modelId?: string
+  name?: string
+  image?: string
+  message?: string
+  lastMessage?: string
+  summary?: string
+  createdAt?: string
+  updatedAt?: string
+  botId?: string
+}
+
+/**
+ * Store the state of conversation like fetching, waiting for response, etc.
+ */
+type ConversationState = {
+  hasMore: boolean
+  waitingForResponse: boolean
+  error?: Error
+}
diff --git a/web/app/_models/DownloadState.ts b/web/types/downloadState.d.ts
similarity index 61%
rename from web/app/_models/DownloadState.ts
rename to web/types/downloadState.d.ts
index 70a4fbd6d..cb154522d 100644
--- a/web/app/_models/DownloadState.ts
+++ b/web/types/downloadState.d.ts
@@ -1,7 +1,4 @@
-/**
- * Represent the state of a download
- */
-export type DownloadState = {
+type DownloadState = {
   modelId: string
   time: DownloadTime
   speed: number
@@ -11,12 +8,12 @@ export type DownloadState = {
   error?: string
 }
 
-export type DownloadTime = {
+type DownloadTime = {
   elapsed: number
   remaining: number
 }
 
-export type DownloadSize = {
+type DownloadSize = {
   total: number
   transferred: number
 }
diff --git a/web/app/_models/AssistantModel.ts b/web/types/models.d.ts
similarity index 59%
rename from web/app/_models/AssistantModel.ts
rename to web/types/models.d.ts
index 5263c81df..09df752ac 100644
--- a/web/app/_models/AssistantModel.ts
+++ b/web/types/models.d.ts
@@ -1,65 +1,59 @@
-import { ProductType } from './Product'
-
-/**
- * Represent a model
- */
-export type AssistantModel = {
+type AssistantModel = {
   /**
    * Combination of owner and model name.
    * Being used as file name. MUST be unique.
    */
   _id: string
-
   name: string
-
   quantMethod: string
-
   bits: number
-
   size: number
-
   maxRamRequired: number
-
   usecase: string
-
   downloadLink: string
-
   /**
    * For tracking download info
    */
   startDownloadAt?: number
-
   finishDownloadAt?: number
-
   productId: string
-
   productName: string
-
   shortDescription: string
-
   longDescription: string
-
   avatarUrl: string
-
   author: string
-
   version: string
-
   modelUrl: string
-
   nsfw: boolean
-
   greeting: string
-
   type: ProductType
-
   createdAt: number
-
   updatedAt?: number
-
   status: string
-
   releaseDate: number
-
   tags: string[]
 }
+
+/**
+ * Model type which will be stored in the database
+ */
+type ModelVersion = {
+  /**
+   * Combination of owner and model name.
+   * Being used as file name. Should be unique.
+   */
+  _id: string
+  name: string
+  quantMethod: string
+  bits: number
+  size: number
+  maxRamRequired: number
+  usecase: string
+  downloadLink: string
+  productId: string
+  /**
+   * For tracking download state
+   */
+  startDownloadAt?: number
+  finishDownloadAt?: number
+}
diff --git a/web/types/products.d.ts b/web/types/products.d.ts
new file mode 100644
index 000000000..31054821b
--- /dev/null
+++ b/web/types/products.d.ts
@@ -0,0 +1,58 @@
+type ItemProperties = {
+  name: string
+  type: string
+  items?: ProductBodyItem[]
+  example?: unknown
+  description?: string
+}
+
+type ProductInput = {
+  body: ItemProperties[]
+  slug: string
+  headers: ProductHeader
+}
+
+interface ProductOutput {
+  slug: string
+  type: string
+  properties: ItemProperties[]
+  description: string
+}
+
+type ProductHeader = {
+  accept: string
+  contentType: string
+}
+
+type ProductBodyItem = {
+  type: string
+  properties: ItemProperties[]
+}
+
+enum ProductType {
+  LLM = 'LLM',
+  GenerativeArt = 'GenerativeArt',
+  ControlNet = 'ControlNet',
+}
+
+interface Product {
+  _id: string
+  name: string
+  shortDescription: string
+  avatarUrl: string
+  longDescription: string
+  author: string
+  version: string
+  modelUrl: string
+  nsfw: boolean
+  greeting: string
+  type: ProductType
+  inputs?: ProductInput
+  outputs?: ProductOutput
+  createdAt: number
+  updatedAt?: number
+  status: string
+  releaseDate: number
+  tags: string[]
+  availableVersions: ModelVersion[]
+}
diff --git a/web/app/_models/hf/SearchModelParam.hf.ts b/web/types/searchModelParam.hf.d.ts
similarity index 95%
rename from web/app/_models/hf/SearchModelParam.hf.ts
rename to web/types/searchModelParam.hf.d.ts
index 6944d31ab..d59e38b9a 100644
--- a/web/app/_models/hf/SearchModelParam.hf.ts
+++ b/web/types/searchModelParam.hf.d.ts
@@ -1,15 +1,4 @@
-export type SearchModelParamHf = {
-  search?: {
-    owner?: string
-    task?: Task
-  }
-  credentials?: {
-    accessToken: string
-  }
-  limit: number
-}
-
-export type Task =
+type Task =
   | 'text-classification'
   | 'token-classification'
   | 'table-question-answering'
@@ -51,3 +40,14 @@ export type Task =
   | 'zero-shot-image-classification'
   | 'graph-ml'
   | 'other'
+
+type SearchModelParamHf = {
+  search?: {
+    owner?: string
+    task?: Task
+  }
+  credentials?: {
+    accessToken: string
+  }
+  limit: number
+}
diff --git a/web/types/users.ts b/web/types/users.ts
new file mode 100644
index 000000000..108b4e2b0
--- /dev/null
+++ b/web/types/users.ts
@@ -0,0 +1,11 @@
+enum Role {
+  User = 'user',
+  Assistant = 'assistant',
+}
+
+interface User {
+  id: string
+  displayName: string
+  avatarUrl: string
+  email?: string
+}
diff --git a/web/uikit/button/index.tsx b/web/uikit/button/index.tsx
new file mode 100644
index 000000000..6cbf41af2
--- /dev/null
+++ b/web/uikit/button/index.tsx
@@ -0,0 +1,49 @@
+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',
+      },
+    },
+    defaultVariants: {
+      themes: 'default',
+      size: 'default',
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, themes, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button'
+    return (
+      <Comp
+        className={twMerge(buttonVariants({ themes, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = 'Button'
+
+export { Button, buttonVariants }
diff --git a/web/uikit/icons/index.tsx b/web/uikit/icons/index.tsx
new file mode 100644
index 000000000..c49affe23
--- /dev/null
+++ b/web/uikit/icons/index.tsx
@@ -0,0 +1,13 @@
+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
new file mode 100644
index 000000000..566021ce5
--- /dev/null
+++ b/web/uikit/index.tsx
@@ -0,0 +1,4 @@
+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
new file mode 100644
index 000000000..d8984b1eb
--- /dev/null
+++ b/web/uikit/switch/index.tsx
@@ -0,0 +1,29 @@
+'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
new file mode 100644
index 000000000..a93a4df4e
--- /dev/null
+++ b/web/uikit/toggle/index.tsx
@@ -0,0 +1,45 @@
+'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/app/_utils/const.ts b/web/utils/const.ts
similarity index 100%
rename from web/app/_utils/const.ts
rename to web/utils/const.ts
diff --git a/web/app/_utils/converter.ts b/web/utils/converter.ts
similarity index 86%
rename from web/app/_utils/converter.ts
rename to web/utils/converter.ts
index 01175a32e..bcd511a62 100644
--- a/web/app/_utils/converter.ts
+++ b/web/utils/converter.ts
@@ -19,14 +19,13 @@ export const formatDownloadSpeed = (input: number | undefined) => {
   return toGigabytes(input) + '/s'
 }
 
-export const formatAsFixed = (input: number) => {
-  input = Number(input)
-  return input.toFixed(0)
-}
-
 export const formatTwoDigits = (input: number) => {
   // convert input from string to number
   input = Number(input)
 
   return input.toFixed(2)
 }
+
+export const formatPluginsName = (input: string) => {
+  return input.replace('@janhq/', '').replaceAll('-', ' ')
+}
diff --git a/web/app/_utils/datetime.ts b/web/utils/datetime.ts
similarity index 100%
rename from web/app/_utils/datetime.ts
rename to web/utils/datetime.ts
diff --git a/web/app/_utils/message.ts b/web/utils/message.ts
similarity index 92%
rename from web/app/_utils/message.ts
rename to web/utils/message.ts
index 335a1357a..e5e26660b 100644
--- a/web/app/_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.