diff --git a/uikit/src/badge/styles.scss b/uikit/src/badge/styles.scss
index e5a783d88d..cf8e52c8be 100644
--- a/uikit/src/badge/styles.scss
+++ b/uikit/src/badge/styles.scss
@@ -6,7 +6,7 @@
   }
 
   &-success {
-    @apply border-transparent bg-green-500 text-green-900 hover:bg-green-500/80;
+    @apply border-transparent bg-green-100 text-green-600;
   }
 
   &-secondary {
diff --git a/web/app/page.tsx b/web/app/page.tsx
index b07ec6419e..cae3262a7c 100644
--- a/web/app/page.tsx
+++ b/web/app/page.tsx
@@ -21,7 +21,7 @@ export default function Page() {
       children = <ExploreModelsScreen />
       break
 
-    case MainViewState.Setting:
+    case MainViewState.Settings:
       children = <SettingsScreen />
       break
 
diff --git a/web/constants/screens.ts b/web/constants/screens.ts
index b62e4a0ffd..19f82aaac2 100644
--- a/web/constants/screens.ts
+++ b/web/constants/screens.ts
@@ -1,7 +1,7 @@
 export enum MainViewState {
   Hub,
   MyModels,
-  Setting,
+  Settings,
   Thread,
   SystemMonitor,
 }
diff --git a/web/containers/CardSidebar/index.tsx b/web/containers/CardSidebar/index.tsx
index 82455181c8..38264e457c 100644
--- a/web/containers/CardSidebar/index.tsx
+++ b/web/containers/CardSidebar/index.tsx
@@ -1,4 +1,4 @@
-import { ReactNode, useState } from 'react'
+import { ReactNode, useState, useRef } from 'react'
 
 import {
   ChevronDownIcon,
@@ -24,7 +24,10 @@ export default function CardSidebar({
 }: Props) {
   const [show, setShow] = useState(true)
   const [more, setMore] = useState(false)
-  const ref = useClickOutside(() => setMore(false))
+  const [menu, setMenu] = useState<HTMLDivElement | null>(null)
+  const [toggle, setToggle] = useState<HTMLDivElement | null>(null)
+
+  useClickOutside(() => setMore(false), null, [menu, toggle])
 
   return (
     <div
@@ -52,6 +55,7 @@ export default function CardSidebar({
           <span className="font-bold">{title}</span>
         </button>
         <div
+          ref={setToggle}
           className="cursor-pointer bg-zinc-200 p-2 dark:bg-zinc-600/10"
           onClick={() => setMore(!more)}
         >
@@ -60,7 +64,7 @@ export default function CardSidebar({
         {more && (
           <div
             className="absolute right-0 top-8 z-20 w-52 overflow-hidden rounded-lg border border-border bg-background shadow-lg"
-            ref={ref}
+            ref={setMenu}
           >
             <div
               className="flex cursor-pointer items-center space-x-2 px-4 py-2 hover:bg-secondary"
diff --git a/web/containers/Layout/Ribbon/index.tsx b/web/containers/Layout/Ribbon/index.tsx
index 0e8acd4f9b..fa6d531937 100644
--- a/web/containers/Layout/Ribbon/index.tsx
+++ b/web/containers/Layout/Ribbon/index.tsx
@@ -71,7 +71,7 @@ export default function RibbonNav() {
           className="flex-shrink-0 text-muted-foreground"
         />
       ),
-      state: MainViewState.Setting,
+      state: MainViewState.Settings,
     },
   ]
   return (
diff --git a/web/containers/Layout/TopBar/CommandSearch/index.tsx b/web/containers/Layout/TopBar/CommandSearch/index.tsx
index 814ffbcbd7..d83feb22e0 100644
--- a/web/containers/Layout/TopBar/CommandSearch/index.tsx
+++ b/web/containers/Layout/TopBar/CommandSearch/index.tsx
@@ -38,7 +38,7 @@ export default function CommandSearch() {
     {
       name: 'Settings',
       icon: <SettingsIcon size={16} className="mr-3 text-muted-foreground" />,
-      state: MainViewState.Setting,
+      state: MainViewState.Settings,
       shortcut: <ShortCut menu="," />,
     },
   ]
@@ -51,7 +51,7 @@ export default function CommandSearch() {
       }
       if (e.key === ',' && (e.metaKey || e.ctrlKey)) {
         e.preventDefault()
-        setMainViewState(MainViewState.Setting)
+        setMainViewState(MainViewState.Settings)
       }
     }
     document.addEventListener('keydown', down)
diff --git a/web/containers/Layout/TopBar/index.tsx b/web/containers/Layout/TopBar/index.tsx
index da3768c762..aa7912bd3d 100644
--- a/web/containers/Layout/TopBar/index.tsx
+++ b/web/containers/Layout/TopBar/index.tsx
@@ -27,7 +27,7 @@ const TopBar = () => {
         return activeThread ? activeThread?.title : 'New Thread'
 
       default:
-        return MainViewState[viewStateName].replace(/([A-Z])/g, ' $1').trim()
+        return MainViewState[viewStateName]?.replace(/([A-Z])/g, ' $1').trim()
     }
   }
 
diff --git a/web/containers/Toast/index.tsx b/web/containers/Toast/index.tsx
index 9833f99d95..c5e5f03da2 100644
--- a/web/containers/Toast/index.tsx
+++ b/web/containers/Toast/index.tsx
@@ -16,7 +16,7 @@ export function toaster(props: Props) {
       return (
         <div
           className={twMerge(
-            'relative flex min-w-[200px] max-w-[350px] gap-x-4 rounded-lg border border-border bg-background px-4 py-3',
+            'unset-drag relative flex min-w-[200px] max-w-[350px] gap-x-4 rounded-lg border border-border bg-background px-4 py-3',
             t.visible ? 'animate-enter' : 'animate-leave',
             type === 'success' && 'bg-primary text-primary-foreground'
           )}
diff --git a/web/screens/Settings/CoreExtensions/ExtensionsCatalog/index.tsx b/web/screens/Settings/CoreExtensions/ExtensionsCatalog/index.tsx
index 837fc1900d..3394c24b5a 100644
--- a/web/screens/Settings/CoreExtensions/ExtensionsCatalog/index.tsx
+++ b/web/screens/Settings/CoreExtensions/ExtensionsCatalog/index.tsx
@@ -3,7 +3,7 @@
 
 import React, { useState, useEffect, useRef, useContext } from 'react'
 
-import { Switch, Button } from '@janhq/uikit'
+import { Button } from '@janhq/uikit'
 
 import Loader from '@/containers/Loader'
 
diff --git a/web/screens/Settings/Models/Row.tsx b/web/screens/Settings/Models/Row.tsx
new file mode 100644
index 0000000000..774294ed5f
--- /dev/null
+++ b/web/screens/Settings/Models/Row.tsx
@@ -0,0 +1,137 @@
+import { useState } from 'react'
+
+import { Model } from '@janhq/core'
+import { Badge } from '@janhq/uikit'
+
+import {
+  MoreVerticalIcon,
+  Trash2Icon,
+  PlayIcon,
+  StopCircleIcon,
+} from 'lucide-react'
+
+import { useActiveModel } from '@/hooks/useActiveModel'
+import { useClickOutside } from '@/hooks/useClickOutside'
+
+import useDeleteModel from '@/hooks/useDeleteModel'
+
+import { toGigabytes } from '@/utils/converter'
+
+type RowModelProps = {
+  data: Model
+}
+
+export default function RowModel(props: RowModelProps) {
+  const [more, setMore] = useState(false)
+
+  const [menu, setMenu] = useState<HTMLDivElement | null>(null)
+  const [toggle, setToggle] = useState<HTMLDivElement | null>(null)
+  useClickOutside(() => setMore(false), null, [menu, toggle])
+
+  const { activeModel, startModel, stopModel, stateModel } = useActiveModel()
+  const { deleteModel } = useDeleteModel()
+
+  const isActiveModel = stateModel.model === props.data.id
+
+  const onModelActionClick = (modelId: string) => {
+    if (activeModel && activeModel.id === modelId) {
+      stopModel(modelId)
+    } else {
+      startModel(modelId)
+    }
+  }
+
+  return (
+    <tr className="relative border-b border-border last:border-none">
+      <td className="px-6 py-4 font-bold">{props.data.name}</td>
+      <td className="px-6 py-4 font-bold">{props.data.id}</td>
+      <td className="px-6 py-4">
+        <Badge themes="secondary">
+          {toGigabytes(props.data.metadata.size)}
+        </Badge>
+      </td>
+      <td className="px-6 py-4">
+        <Badge themes="secondary">v{props.data.version}</Badge>
+      </td>
+      <td className="px-6 py-4">
+        {stateModel.loading && stateModel.model === props.data.id ? (
+          <Badge
+            className="inline-flex items-center space-x-2"
+            themes="secondary"
+          >
+            <span className="h-2 w-2 rounded-full bg-gray-500" />
+            <span className="capitalize">
+              {stateModel.state === 'start' ? 'Starting...' : 'Stopping...'}
+            </span>
+          </Badge>
+        ) : activeModel && activeModel.id === props.data.id ? (
+          <Badge
+            themes="success"
+            className="inline-flex items-center space-x-2"
+          >
+            <span className="h-2 w-2 rounded-full bg-green-500" />
+            <span>Active</span>
+          </Badge>
+        ) : (
+          <Badge
+            themes="secondary"
+            className="inline-flex items-center space-x-2"
+          >
+            <span className="h-2 w-2 rounded-full bg-gray-500" />
+            <span>Inactive</span>
+          </Badge>
+        )}
+      </td>
+      <td className="px-6 py-4 text-center">
+        <div
+          className="cursor-pointer"
+          ref={setToggle}
+          onClick={() => {
+            setMore(!more)
+          }}
+        >
+          <MoreVerticalIcon className="h-5 w-5" />
+        </div>
+        {more && (
+          <div
+            className="absolute right-4 top-10 z-20 w-52 overflow-hidden rounded-lg border border-border bg-background py-2 shadow-lg"
+            ref={setMenu}
+          >
+            <div
+              className="flex cursor-pointer items-center space-x-2 px-4 py-2 hover:bg-secondary"
+              onClick={() => {
+                onModelActionClick(props.data.id)
+                setMore(false)
+              }}
+            >
+              {activeModel && activeModel.id === props.data.id ? (
+                <StopCircleIcon size={16} className="text-muted-foreground" />
+              ) : (
+                <PlayIcon size={16} className="text-muted-foreground" />
+              )}
+              <span className="text-bold capitalize text-black dark:text-muted-foreground">
+                {isActiveModel ? stateModel.state : 'Start'}
+                &nbsp;Model
+              </span>
+            </div>
+            <div
+              className="flex cursor-pointer items-center space-x-2 px-4 py-2 hover:bg-secondary"
+              onClick={() => {
+                setTimeout(async () => {
+                  await stopModel(props.data.id)
+                  deleteModel(props.data)
+                }, 500)
+                setMore(false)
+              }}
+            >
+              <Trash2Icon size={16} className="text-muted-foreground" />
+              <span className="text-bold text-black dark:text-muted-foreground">
+                Delete Model
+              </span>
+            </div>
+          </div>
+        )}
+      </td>
+    </tr>
+  )
+}
diff --git a/web/screens/Settings/Models/index.tsx b/web/screens/Settings/Models/index.tsx
new file mode 100644
index 0000000000..79859c2758
--- /dev/null
+++ b/web/screens/Settings/Models/index.tsx
@@ -0,0 +1,65 @@
+import { useState } from 'react'
+
+import { Input } from '@janhq/uikit'
+
+import { SearchIcon } from 'lucide-react'
+
+import { useGetDownloadedModels } from '@/hooks/useGetDownloadedModels'
+
+import RowModel from './Row'
+
+const Column = ['Name', 'Model ID', 'Size', 'Version', 'Status', '']
+
+export default function Models() {
+  const { downloadedModels } = useGetDownloadedModels()
+  const [searchValue, setsearchValue] = useState('')
+
+  const filteredDownloadedModels = downloadedModels.filter((x) => {
+    return x.name.toLowerCase().includes(searchValue.toLowerCase())
+  })
+
+  return (
+    <div className="rounded-xl border border-border shadow-sm">
+      <div className="px-6 py-5">
+        <div className="relative w-1/3">
+          <SearchIcon
+            size={20}
+            className="absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground"
+          />
+          <Input
+            placeholder="Search"
+            className="pl-8"
+            onChange={(e) => {
+              setsearchValue(e.target.value)
+            }}
+          />
+        </div>
+      </div>
+      <div className="relative">
+        <table className="w-full px-8">
+          <thead className="w-full border-b border-border bg-secondary">
+            <tr>
+              {Column.map((col, i) => {
+                return (
+                  <th
+                    key={i}
+                    className="px-6 py-2 text-left font-normal last:text-center"
+                  >
+                    {col}
+                  </th>
+                )
+              })}
+            </tr>
+          </thead>
+          <tbody>
+            {filteredDownloadedModels
+              ? filteredDownloadedModels.map((x, i) => {
+                  return <RowModel key={i} data={x} />
+                })
+              : null}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}
diff --git a/web/screens/Settings/index.tsx b/web/screens/Settings/index.tsx
index b14039f749..77e70d33b9 100644
--- a/web/screens/Settings/index.tsx
+++ b/web/screens/Settings/index.tsx
@@ -12,6 +12,8 @@ import AppearanceOptions from '@/screens/Settings/Appearance'
 import ExtensionCatalog from '@/screens/Settings/CoreExtensions/ExtensionsCatalog'
 import PreferenceExtensions from '@/screens/Settings/CoreExtensions/PreferenceExtensions'
 
+import Models from '@/screens/Settings/Models'
+
 import { formatExtensionsName } from '@/utils/converter'
 
 const SettingsScreen = () => {
@@ -24,7 +26,7 @@ const SettingsScreen = () => {
     const menu = ['Appearance']
 
     if (typeof window !== 'undefined' && window.electronAPI) {
-      menu.push('Core Extensions')
+      menu.push('Extensions')
     }
     menu.push('Advanced')
     setMenus(menu)
@@ -40,7 +42,7 @@ const SettingsScreen = () => {
 
   const handleShowOptions = (menu: string) => {
     switch (menu) {
-      case 'Core Extensions':
+      case 'Extensions':
         return <ExtensionCatalog />
 
       case 'Appearance':
@@ -49,6 +51,9 @@ const SettingsScreen = () => {
       case 'Advanced':
         return <Advanced />
 
+      case 'Models':
+        return <Models />
+
       default:
         return (
           <PreferenceExtensions
@@ -67,7 +72,7 @@ const SettingsScreen = () => {
           <div className="p-4">
             <div className="flex-shrink-0">
               <label className="font-bold uppercase text-muted-foreground">
-                Options
+                General
               </label>
               <div className="mt-2 font-medium">
                 {menus.map((menu, i) => {
@@ -135,6 +140,38 @@ const SettingsScreen = () => {
                 })}
               </div>
             </div>
+
+            <div className="flex-shrink-0">
+              <label className="font-bold uppercase text-muted-foreground">
+                Core extensions
+              </label>
+              <div className="mt-2 font-medium">
+                <div className="relative my-0.5 block py-1.5">
+                  <div
+                    onClick={() => {
+                      setActiveStaticMenu('Models')
+                      setActivePreferenceExtension('')
+                    }}
+                    className="block w-full cursor-pointer"
+                  >
+                    <span
+                      className={twMerge(
+                        activePreferenceExtension === 'Models' &&
+                          'relative z-10'
+                      )}
+                    >
+                      Models
+                    </span>
+                  </div>
+                  {activeStaticMenu === 'Models' && (
+                    <m.div
+                      className="absolute inset-0 -left-3 h-full w-[calc(100%+24px)] rounded-md bg-primary/50"
+                      layoutId="active-static-core-extentions"
+                    />
+                  )}
+                </div>
+              </div>
+            </div>
           </div>
         </ScrollArea>
       </div>
diff --git a/web/screens/SystemMonitor/index.tsx b/web/screens/SystemMonitor/index.tsx
index a1e511b86b..51547f2926 100644
--- a/web/screens/SystemMonitor/index.tsx
+++ b/web/screens/SystemMonitor/index.tsx
@@ -30,7 +30,7 @@ export default function SystemMonitorScreen() {
                 <h4 className="text-base font-bold uppercase">
                   ram ({Math.round((usedRam / totalRam) * 100)}%)
                 </h4>
-                <span className="text-muted-foreground">
+                <span className="text-xs text-muted-foreground">
                   {toGigabytes(usedRam)} GB of {toGigabytes(totalRam)} GB used
                 </span>
               </div>
@@ -46,7 +46,7 @@ export default function SystemMonitorScreen() {
                 <h4 className="text-base font-bold uppercase">
                   cpu ({cpuUsage}%)
                 </h4>
-                <span className="text-muted-foreground">
+                <span className="text-xs text-muted-foreground">
                   {cpuUsage}% of 100%
                 </span>
               </div>
@@ -79,15 +79,17 @@ export default function SystemMonitorScreen() {
                   </thead>
                   <tbody>
                     <tr>
-                      <td className="px-6 py-2">{activeModel.name}</td>
-                      <td className="px-6 py-2">{activeModel.id}</td>
+                      <td className="px-6 py-2 font-bold">
+                        {activeModel.name}
+                      </td>
+                      <td className="px-6 py-2 font-bold">{activeModel.id}</td>
                       <td className="px-6 py-2">
                         <Badge themes="secondary">
                           {toGigabytes(activeModel.metadata.size)}
                         </Badge>
                       </td>
                       <td className="px-6 py-2">
-                        <Badge themes="secondary">{activeModel.version}</Badge>
+                        <Badge themes="secondary">v{activeModel.version}</Badge>
                       </td>
                       <td className="px-6 py-2 text-center">
                         <Button