diff --git a/web/containers/Layout/BottomPanel/SystemMonitor/TableActiveModel/index.tsx b/web/containers/Layout/BottomPanel/SystemMonitor/TableActiveModel/index.tsx
index de9b52782..c9d86e5e8 100644
--- a/web/containers/Layout/BottomPanel/SystemMonitor/TableActiveModel/index.tsx
+++ b/web/containers/Layout/BottomPanel/SystemMonitor/TableActiveModel/index.tsx
@@ -1,5 +1,3 @@
-import { Fragment } from 'react'
-
 import { Tooltip, Button, Badge } from '@janhq/joi'
 
 import { useAtom } from 'jotai'
@@ -8,12 +6,15 @@ import { useActiveModel } from '@/hooks/useActiveModel'
 
 import { toGibibytes } from '@/utils/converter'
 
+import { localEngines } from '@/utils/modelEngine'
+
 import { serverEnabledAtom } from '@/helpers/atoms/LocalServer.atom'
 
 const Column = ['Model', 'Size', '']
 
 const TableActiveModel = () => {
   const { activeModel, stateModel, stopModel } = useActiveModel()
+
   const [serverEnabled, setServerEnabled] = useAtom(serverEnabledAtom)
 
   return (
@@ -34,47 +35,53 @@ const TableActiveModel = () => {
               })}
             </tr>
           </thead>
-          {activeModel && (
-            <Fragment>
-              <tbody>
-                <tr>
-                  <td
-                    className="max-w-[200px] px-4 py-2 font-bold"
-                    title={activeModel.name}
-                  >
-                    <p className="line-clamp-2">{activeModel.name}</p>
-                  </td>
-                  <td className="px-4 py-2">
-                    <Badge theme="secondary">
-                      {toGibibytes(activeModel.metadata.size)}
-                    </Badge>
-                  </td>
-                  <td className="px-4 py-2 text-center">
-                    <Tooltip
-                      trigger={
-                        <Button
-                          theme={
-                            stateModel.state === 'stop'
-                              ? 'destructive'
-                              : 'primary'
-                          }
-                          onClick={() => {
-                            stopModel()
-                            window.core?.api?.stopServer()
-                            setServerEnabled(false)
-                          }}
-                        >
-                          Stop
-                        </Button>
-                      }
-                      content="The API server is running, stop the model will
+          {activeModel && localEngines.includes(activeModel.engine) ? (
+            <tbody>
+              <tr>
+                <td
+                  className="max-w-[200px] px-4 py-2 font-bold"
+                  title={activeModel.name}
+                >
+                  <p className="line-clamp-2">{activeModel.name}</p>
+                </td>
+                <td className="px-4 py-2">
+                  <Badge theme="secondary">
+                    {activeModel.metadata.size
+                      ? toGibibytes(activeModel.metadata.size)
+                      : '-'}
+                  </Badge>
+                </td>
+                <td className="px-4 py-2 text-center">
+                  <Tooltip
+                    trigger={
+                      <Button
+                        theme={
+                          stateModel.state === 'stop'
+                            ? 'destructive'
+                            : 'primary'
+                        }
+                        onClick={() => {
+                          stopModel()
+                          window.core?.api?.stopServer()
+                          setServerEnabled(false)
+                        }}
+                      >
+                        Stop
+                      </Button>
+                    }
+                    content="The API server is running, stop the model will
                       also stop the server"
-                      disabled={!serverEnabled}
-                    />
-                  </td>
-                </tr>
-              </tbody>
-            </Fragment>
+                    disabled={!serverEnabled}
+                  />
+                </td>
+              </tr>
+            </tbody>
+          ) : (
+            <tbody>
+              <tr className="text-[hsla(var(--text-secondary))]">
+                <td className="p-4">No on-device model running</td>
+              </tr>
+            </tbody>
           )}
         </table>
       </div>
diff --git a/web/containers/Layout/BottomPanel/SystemMonitor/index.tsx b/web/containers/Layout/BottomPanel/SystemMonitor/index.tsx
index b513cc15c..7fb20b0a4 100644
--- a/web/containers/Layout/BottomPanel/SystemMonitor/index.tsx
+++ b/web/containers/Layout/BottomPanel/SystemMonitor/index.tsx
@@ -88,7 +88,7 @@ const SystemMonitor = () => {
         <div
           ref={setElementExpand}
           className={twMerge(
-            'fixed bottom-9 left-[49px] z-50 flex w-[calc(100%-48px-8px)] flex-shrink-0 flex-col border-t border-[hsla(var(--app-border))] bg-[hsla(var(--app-bg))]',
+            'fixed bottom-9 left-[49px] z-50 flex w-[calc(100%-48px)] flex-shrink-0 flex-col border-t border-[hsla(var(--app-border))] bg-[hsla(var(--app-bg))]',
             showFullScreen && 'h-[calc(100%-63px)]',
             reduceTransparent && 'w-[calc(100%-48px)] rounded-none'
           )}