diff --git a/web/containers/ToolCallApprovalModal/index.tsx b/web/containers/ToolCallApprovalModal/index.tsx
index 2097278ad..9981e439e 100644
--- a/web/containers/ToolCallApprovalModal/index.tsx
+++ b/web/containers/ToolCallApprovalModal/index.tsx
@@ -2,6 +2,7 @@ import { memo, useCallback, useState } from 'react'
 
 import { Button, Modal, ModalClose } from '@janhq/joi'
 import { useSetAtom } from 'jotai'
+
 import { approvedThreadToolsAtom } from '@/helpers/atoms/Thread.atom'
 
 export function useTollCallPromiseModal() {
@@ -50,8 +51,7 @@ export function useTollCallPromiseModal() {
         open={isOpen}
         onOpenChange={(open) => {
           setIsOpen(!isOpen)
-          if(!open)
-            handleCancel()
+          if (!open) handleCancel()
         }}
         content={
           <div>
@@ -63,7 +63,7 @@ export function useTollCallPromiseModal() {
             <div className="mt-4 flex justify-end gap-x-2">
               <ModalClose asChild>
                 <Button
-                  theme="primary"
+                  theme="ghost" variant="outline"
                   onClick={() => {
                     setApprovedToolsAtom((prev) => {
                       const newState = { ...prev }
@@ -87,12 +87,12 @@ export function useTollCallPromiseModal() {
                 </Button>
               </ModalClose>
               <ModalClose asChild>
-                <Button theme="primary" onClick={handleConfirm} autoFocus>
+                <Button theme="ghost" variant="outline" onClick={handleConfirm} autoFocus>
                   Allow once
                 </Button>
               </ModalClose>
               <ModalClose asChild onClick={handleCancel}>
-                <Button theme="ghost">Deny</Button>
+                <Button theme="destructive">Deny</Button>
               </ModalClose>
             </div>
           </div>
diff --git a/web/screens/Thread/ThreadCenterPanel/ChatInput/RichTextEditor.tsx b/web/screens/Thread/ThreadCenterPanel/ChatInput/RichTextEditor.tsx
index 4bf43c381..b7e28714c 100644
--- a/web/screens/Thread/ThreadCenterPanel/ChatInput/RichTextEditor.tsx
+++ b/web/screens/Thread/ThreadCenterPanel/ChatInput/RichTextEditor.tsx
@@ -1,5 +1,12 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { useCallback, useEffect, useMemo, useRef, ClipboardEvent, useContext } from 'react'
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  ClipboardEvent,
+  useContext,
+} from 'react'
 
 import { MessageStatus } from '@janhq/core'
 import { useAtom, useAtomValue } from 'jotai'
@@ -21,6 +28,8 @@ import { currentPromptAtom } from '@/containers/Providers/Jotai'
 import { useActiveModel } from '@/hooks/useActiveModel'
 import useSendChatMessage from '@/hooks/useSendChatMessage'
 
+import { ChatContext } from '../../ThreadCenterPanel'
+
 import { getCurrentChatMessagesAtom } from '@/helpers/atoms/ChatMessage.atom'
 
 import { selectedModelAtom } from '@/helpers/atoms/Model.atom'
@@ -28,7 +37,6 @@ import {
   getActiveThreadIdAtom,
   activeSettingInputBoxAtom,
 } from '@/helpers/atoms/Thread.atom'
-import { ChatContext } from '../../ThreadCenterPanel'
 
 type CustomElement = {
   type: 'paragraph' | 'code' | null
diff --git a/web/screens/Thread/ThreadCenterPanel/ChatInput/index.tsx b/web/screens/Thread/ThreadCenterPanel/ChatInput/index.tsx
index b276c1b90..5224f79b3 100644
--- a/web/screens/Thread/ThreadCenterPanel/ChatInput/index.tsx
+++ b/web/screens/Thread/ThreadCenterPanel/ChatInput/index.tsx
@@ -37,6 +37,7 @@ import useSendChatMessage from '@/hooks/useSendChatMessage'
 import { uploader } from '@/utils/file'
 import { isLocalEngine } from '@/utils/modelEngine'
 
+import { ChatContext } from '../../ThreadCenterPanel'
 import FileUploadPreview from '../FileUploadPreview'
 import ImageUploadPreview from '../ImageUploadPreview'
 
@@ -55,7 +56,6 @@ import {
 } from '@/helpers/atoms/Thread.atom'
 import { activeTabThreadRightPanelAtom } from '@/helpers/atoms/ThreadRightPanel.atom'
 import { ModelTool } from '@/types/model'
-import { ChatContext } from '../../ThreadCenterPanel'
 
 const ChatInput = () => {
   const activeThread = useAtomValue(activeThreadAtom)
diff --git a/web/screens/Thread/ThreadCenterPanel/EditChatInput/index.tsx b/web/screens/Thread/ThreadCenterPanel/EditChatInput/index.tsx
index 178551742..c34ab01d8 100644
--- a/web/screens/Thread/ThreadCenterPanel/EditChatInput/index.tsx
+++ b/web/screens/Thread/ThreadCenterPanel/EditChatInput/index.tsx
@@ -19,6 +19,8 @@ import { useActiveModel } from '@/hooks/useActiveModel'
 
 import useSendChatMessage from '@/hooks/useSendChatMessage'
 
+import { ChatContext } from '../../ThreadCenterPanel'
+
 import { extensionManager } from '@/extension'
 
 import {
@@ -31,7 +33,6 @@ import {
   activeThreadAtom,
   getActiveThreadIdAtom,
 } from '@/helpers/atoms/Thread.atom'
-import { ChatContext } from '../../ThreadCenterPanel'
 
 type Props = {
   message: ThreadMessage
diff --git a/web/screens/Thread/ThreadCenterPanel/MessageToolbar/index.tsx b/web/screens/Thread/ThreadCenterPanel/MessageToolbar/index.tsx
index 0e81996ea..31ce07112 100644
--- a/web/screens/Thread/ThreadCenterPanel/MessageToolbar/index.tsx
+++ b/web/screens/Thread/ThreadCenterPanel/MessageToolbar/index.tsx
@@ -22,6 +22,8 @@ import {
 import { useClipboard } from '@/hooks/useClipboard'
 import useSendChatMessage from '@/hooks/useSendChatMessage'
 
+import { ChatContext } from '../../ThreadCenterPanel'
+
 import { extensionManager } from '@/extension'
 import {
   deleteMessageAtom,
@@ -34,7 +36,6 @@ import {
   updateThreadAtom,
   updateThreadStateLastMessageAtom,
 } from '@/helpers/atoms/Thread.atom'
-import { ChatContext } from '../../ThreadCenterPanel'
 
 const MessageToolbar = ({ message }: { message: ThreadMessage }) => {
   const deleteMessage = useSetAtom(deleteMessageAtom)
diff --git a/web/screens/Thread/ThreadCenterPanel/index.tsx b/web/screens/Thread/ThreadCenterPanel/index.tsx
index d2ee3a4e6..9ac348e8d 100644
--- a/web/screens/Thread/ThreadCenterPanel/index.tsx
+++ b/web/screens/Thread/ThreadCenterPanel/index.tsx
@@ -17,6 +17,8 @@ import ModelStart from '@/containers/Loader/ModelStart'
 import { fileUploadAtom } from '@/containers/Providers/Jotai'
 import { snackbar } from '@/containers/Toast'
 
+import { useTollCallPromiseModal } from '@/containers/ToolCallApprovalModal'
+
 import { activeModelAtom } from '@/hooks/useActiveModel'
 import { reloadModelAtom } from '@/hooks/useSendChatMessage'
 
@@ -36,7 +38,6 @@ import {
   engineParamsUpdateAtom,
   isGeneratingResponseAtom,
 } from '@/helpers/atoms/Thread.atom'
-import { useTollCallPromiseModal } from '@/containers/ToolCallApprovalModal'
 
 const renderError = (code: string) => {
   switch (code) {