diff --git a/.github/workflows/backend-release.yml b/.github/workflows/backend-release.yml
new file mode 100644
index 00000000..119f7eae
--- /dev/null
+++ b/.github/workflows/backend-release.yml
@@ -0,0 +1,73 @@
+name: Backend release
+
+on:
+  push:
+    branches: [main]
+    paths:
+      - 'application/version.py'
+  workflow_dispatch:
+
+permissions:
+  contents: write
+
+concurrency:
+  group: backend-release
+  cancel-in-progress: false
+
+jobs:
+  release:
+    if: github.repository == 'arc53/DocsGPT'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4.3.1
+        with:
+          persist-credentials: false
+
+      - name: Read version from application/version.py
+        id: ver
+        run: |
+          VERSION=$(python3 -c "g={}; exec(open('application/version.py').read(), g); print(g['__version__'])")
+          if [ -z "$VERSION" ]; then
+            echo "::error::Could not read __version__ from application/version.py"
+            exit 1
+          fi
+          echo "version=$VERSION" >> "$GITHUB_OUTPUT"
+          echo "Resolved version: $VERSION"
+
+      - name: Check if tag already exists
+        id: check
+        env:
+          VERSION: ${{ steps.ver.outputs.version }}
+        run: |
+          if git ls-remote --tags --exit-code origin "refs/tags/$VERSION" >/dev/null 2>&1; then
+            echo "exists=true" >> "$GITHUB_OUTPUT"
+            echo "Tag $VERSION already exists on origin — skipping."
+          else
+            echo "exists=false" >> "$GITHUB_OUTPUT"
+          fi
+
+      - name: Create and push tag
+        if: steps.check.outputs.exists == 'false'
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          VERSION: ${{ steps.ver.outputs.version }}
+        run: |
+          git config user.name  "github-actions[bot]"
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+          git tag "$VERSION"
+          # Authenticate this single push via a one-shot tokenized remote URL
+          # instead of leaving GITHUB_TOKEN persisted in .git/config (see
+          # persist-credentials: false on the checkout step above).
+          git push \
+            "https://x-access-token:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git" \
+            "$VERSION"
+
+      - name: Create GitHub release
+        if: steps.check.outputs.exists == 'false'
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          VERSION: ${{ steps.ver.outputs.version }}
+        run: |
+          gh release create "$VERSION" \
+            --title "v$VERSION" \
+            --generate-notes
diff --git a/AGENTS.md b/AGENTS.md
index f9a603b8..74f25a35 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -145,6 +145,27 @@ vale .
 - Avoid broad UI refactors unless the task explicitly asks for them.
 - Do not re-create components if we already have some in the app.
 
+#### Icons
+
+DocsGPT historically mixed three icon sources: `lucide-react`, inline SVG components, and
+`.svg` assets loaded via `<img src=…>`. For new code:
+
+1. **Prefer `lucide-react`** for standard UI affordances (close, chevron, search, trash,
+   plus, etc.). It tokenizes via `currentColor`, ships tree-shaken icons, and the codebase
+   already imports it in 30+ places. `<X className="size-4" />`, `<ChevronDown />`, etc.
+2. **Use `assets/<name>.svg?react`** when you need a brand-specific or domain illustration
+   that doesn't exist in lucide (the app logo, robot fallback, retry arrow, send arrow,
+   etc.). Always set `fill="currentColor"` / `stroke="currentColor"` in the SVG file so
+   consumers can theme via Tailwind text classes.
+3. **Avoid `<img src={Asset}>` for new icons.** It blocks `currentColor` theming and
+   forces dark-variant duplicates (the audit removed several orphan dark/purple/white
+   variants in this branch). The pattern is acceptable for existing call sites — don't
+   bulk-migrate without a reason.
+
+Three pre-existing dark-variant pairs (`documentation`, `no-files`, `science-spark`) are
+hand-tuned multi-color illustrations, not pure inverts; they keep their `-dark` companion
+files until a per-illustration refactor.
+
 ## PR readiness
 
 Before opening a PR:
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index db144f91..3ab57f4f 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,10 +8,13 @@
       "name": "frontend",
       "version": "0.0.0",
       "dependencies": {
+        "@radix-ui/react-accordion": "^1.2.12",
         "@radix-ui/react-dialog": "^1.1.15",
         "@radix-ui/react-popover": "^1.1.15",
         "@radix-ui/react-select": "^2.2.6",
         "@radix-ui/react-slot": "^1.2.4",
+        "@radix-ui/react-switch": "^1.2.6",
+        "@radix-ui/react-tabs": "^1.1.13",
         "@reduxjs/toolkit": "^2.10.1",
         "chart.js": "^4.4.4",
         "class-variance-authority": "^0.7.1",
diff --git a/frontend/package.json b/frontend/package.json
index a9056883..d10a9a3b 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -21,10 +21,13 @@
     ]
   },
   "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
     "@reduxjs/toolkit": "^2.10.1",
     "chart.js": "^4.4.4",
     "class-variance-authority": "^0.7.1",
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 382d6abb..cee2f8f5 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,7 +1,7 @@
 import './locale/i18n';
 
 import { useState } from 'react';
-import { Outlet, Route, Routes } from 'react-router-dom';
+import { Outlet, Route, Routes, useLocation } from 'react-router-dom';
 
 import Agents from './agents';
 import SharedAgentGate from './agents/SharedAgentGate';
@@ -45,7 +45,7 @@ function MainLayout() {
       <div
         className={`h-[calc(100dvh-64px)] overflow-auto transition-all duration-300 ease-in-out lg:h-screen ${
           !(isMobile || isTablet)
-            ? `${navOpen ? 'lg:ml-72' : 'lg:ml-0'}`
+            ? `${navOpen ? 'lg:ml-72' : 'lg:ml-14'}`
             : 'ml-0 lg:ml-16'
         }`}
       >
@@ -58,27 +58,36 @@ function MainLayout() {
 }
 export default function App() {
   const [, , componentMounted] = useDarkTheme();
+  const location = useLocation();
   const [showNotification, setShowNotification] = useState<boolean>(() => {
     const saved = localStorage.getItem('showNotification');
     return saved ? JSON.parse(saved) : true;
   });
   const notificationText = import.meta.env.VITE_NOTIFICATION_TEXT;
   const notificationLink = import.meta.env.VITE_NOTIFICATION_LINK;
+  // Hide the changelog banner on public share routes — those pages are
+  // embedded / shared externally and shouldn't carry product chrome.
+  const isPublicShareRoute =
+    location.pathname.startsWith('/share/') ||
+    location.pathname.startsWith('/shared/');
   if (!componentMounted) {
     return <div />;
   }
   return (
     <div className="relative h-full overflow-hidden">
-      {notificationLink && notificationText && showNotification && (
-        <Notification
-          notificationText={notificationText}
-          notificationLink={notificationLink}
-          handleCloseNotification={() => {
-            setShowNotification(false);
-            localStorage.setItem('showNotification', 'false');
-          }}
-        />
-      )}
+      {notificationLink &&
+        notificationText &&
+        showNotification &&
+        !isPublicShareRoute && (
+          <Notification
+            notificationText={notificationText}
+            notificationLink={notificationLink}
+            handleCloseNotification={() => {
+              setShowNotification(false);
+              localStorage.setItem('showNotification', 'false');
+            }}
+          />
+        )}
       <Routes>
         <Route
           element={
diff --git a/frontend/src/Hero.tsx b/frontend/src/Hero.tsx
index 11042365..3e07b02c 100644
--- a/frontend/src/Hero.tsx
+++ b/frontend/src/Hero.tsx
@@ -1,7 +1,117 @@
+import { useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
 
+import modelService from './api/services/modelService';
 import DocsGPT3 from './assets/cute_docsgpt3.svg';
-import DropdownModel from './components/DropdownModel';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from './components/ui/select';
+import {
+  selectAvailableModels,
+  selectSelectedModel,
+  selectToken,
+  setAvailableModels,
+  setModelsLoading,
+  setSelectedModel,
+} from './preferences/preferenceSlice';
+
+import type { Model } from './models/types';
+
+function HeroModelSelect() {
+  const dispatch = useDispatch();
+  const selectedModel = useSelector(selectSelectedModel);
+  const availableModels = useSelector(selectAvailableModels);
+  const token = useSelector(selectToken);
+  // Tracks which token the cached availableModels were loaded for.
+  // Without this, the early-return below pins the anonymous/built-in
+  // list forever once it's populated — login/logout never refetches
+  // and a user's BYOM models stay invisible.
+  const lastLoadedTokenRef = useRef<string | null | undefined>(undefined);
+
+  useEffect(() => {
+    const loadModels = async () => {
+      if (
+        (availableModels?.length ?? 0) > 0 &&
+        lastLoadedTokenRef.current === token
+      ) {
+        return;
+      }
+      dispatch(setModelsLoading(true));
+      try {
+        const response = await modelService.getModels(token);
+        if (!response.ok) {
+          throw new Error(`API error: ${response.status}`);
+        }
+        const data = await response.json();
+        const models = data.models || [];
+        const transformed = modelService.transformModels(models);
+
+        dispatch(setAvailableModels(transformed));
+        lastLoadedTokenRef.current = token;
+        if (!selectedModel && transformed.length > 0) {
+          const defaultModel =
+            transformed.find((m: Model) => m.id === data.default_model_id) ||
+            transformed[0];
+          dispatch(setSelectedModel(defaultModel));
+        } else if (selectedModel && transformed.length > 0) {
+          const isValid = transformed.find(
+            (m: Model) => m.id === selectedModel.id,
+          );
+          if (!isValid) {
+            const defaultModel =
+              transformed.find((m: Model) => m.id === data.default_model_id) ||
+              transformed[0];
+            dispatch(setSelectedModel(defaultModel));
+          }
+        }
+      } catch (error) {
+        console.error('Failed to load models:', error);
+      } finally {
+        dispatch(setModelsLoading(false));
+      }
+    };
+
+    loadModels();
+  }, [availableModels?.length, dispatch, selectedModel, token]);
+
+  const hasModels = availableModels && (availableModels?.length ?? 0) > 0;
+
+  return (
+    <Select
+      value={selectedModel?.id}
+      onValueChange={(value) => {
+        const model = availableModels?.find((m: Model) => m.id === value);
+        if (model) dispatch(setSelectedModel(model));
+      }}
+      disabled={!hasModels}
+    >
+      <SelectTrigger
+        className="bg-muted dark:bg-card text-foreground hover:bg-muted dark:hover:bg-card w-full justify-between rounded-4xl border-0 px-6 py-4 text-base shadow-none data-[state=open]:rounded-b-none"
+        size="lg"
+      >
+        <SelectValue placeholder="Select Model" />
+      </SelectTrigger>
+      <SelectContent className="bg-muted dark:bg-card rounded-t-none rounded-b-4xl border-0 shadow-md data-[side=bottom]:translate-y-0">
+        {hasModels ? (
+          availableModels?.map((model: Model) => (
+            <SelectItem key={model.id} value={model.id}>
+              {model.display_name}
+            </SelectItem>
+          ))
+        ) : (
+          <div className="text-muted-foreground px-3 py-2 text-sm">
+            No models available
+          </div>
+        )}
+      </SelectContent>
+    </Select>
+  );
+}
 
 export default function Hero({
   handleQuestion,
@@ -21,7 +131,7 @@ export default function Hero({
   }>;
 
   return (
-    <div className="text-black-1000 dark:text-foreground flex h-full w-full flex-col items-center justify-between">
+    <div className="text-foreground flex h-full w-full flex-col items-center justify-between">
       {/* Header Section */}
       <div className="flex grow flex-col items-center justify-center pt-8 md:pt-0">
         <div className="mb-px flex items-center">
@@ -30,7 +140,7 @@ export default function Hero({
         </div>
         {/* Model Selector */}
         <div className="relative w-72">
-          <DropdownModel />
+          <HeroModelSelect />
         </div>
       </div>
 
@@ -44,9 +154,9 @@ export default function Hero({
                 <button
                   key={key}
                   onClick={() => handleQuestion({ question: demo.query })}
-                  className={`border-border text-foreground hover:bg-muted dark:hover:bg-muted/50 bg-card w-full rounded-[66px] border px-6 py-3.5 text-left transition-colors dark:bg-transparent ${key >= 2 ? 'hidden md:block' : ''}`}
+                  className={`border-border text-foreground hover:bg-muted dark:hover:bg-muted/50 bg-card w-full rounded-full border px-6 py-3.5 text-left transition-colors dark:bg-transparent ${key >= 2 ? 'hidden md:block' : ''}`}
                 >
-                  <p className="text-black-1000 dark:text-foreground mb-2 font-semibold">
+                  <p className="text-foreground mb-2 font-semibold">
                     {demo.header}
                   </p>
                   <span className="line-clamp-2 text-gray-700 opacity-60 dark:text-gray-300">
diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx
index 66e053f3..1776e503 100644
--- a/frontend/src/Navigation.tsx
+++ b/frontend/src/Navigation.tsx
@@ -16,11 +16,11 @@ import Hamburger from './assets/hamburger.svg';
 import openNewChat from './assets/openNewChat.svg';
 import Pin from './assets/pin.svg';
 import SearchIcon from './assets/search.svg';
-import AgentImage from './components/AgentImage';
+import { Avatar } from './components/ui/avatar';
+import { Button } from './components/ui/button';
 import SettingGear from './assets/settingGear.svg';
 import Spark from './assets/spark.svg';
-import SpinnerDark from './assets/spinner-dark.svg';
-import Spinner from './assets/spinner.svg';
+import Spinner from './components/Spinner';
 import Twitter from './assets/TwitterX.svg';
 import UnPin from './assets/unpin.svg';
 import Help from './components/Help';
@@ -32,9 +32,9 @@ import {
   updateConversationId,
 } from './conversation/conversationSlice';
 import ConversationTile from './conversation/ConversationTile';
-import { useDarkTheme, useMediaQuery } from './hooks';
+import { useMediaQuery } from './hooks';
 import useTokenAuth from './hooks/useTokenAuth';
-import DeleteConvModal from './modals/DeleteConvModal';
+import ConfirmationModal from './modals/ConfirmationModal';
 import JWTModal from './modals/JWTModal';
 import SearchConversationsModal from './modals/SearchConversationsModal';
 import { ActiveState } from './models/misc';
@@ -77,7 +77,6 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
   const selectedAgent = useSelector(selectSelectedAgent);
 
   const { isMobile, isTablet } = useMediaQuery();
-  const [isDarkTheme] = useDarkTheme();
   const { showTokenModal, handleTokenSubmit } = useTokenAuth();
 
   const [isDeletingConversation, setIsDeletingConversation] = useState(false);
@@ -316,43 +315,79 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
         />
       )}
 
-      {
-        <div className="absolute top-3 left-3 z-20 hidden transition-all duration-300 ease-in-out lg:block">
-          <div className="flex items-center gap-3">
-            {!navOpen && (
-              <button
-                onClick={() => {
-                  setNavOpen(!navOpen);
-                }}
-                className="transition-transform duration-200 hover:scale-110"
-              >
-                <img
-                  src={PanelLeftOpen}
-                  alt="Open navigation menu"
-                  className="m-auto transition-all duration-300 ease-in-out"
-                />
-              </button>
-            )}
-            {queries?.length > 0 && (
-              <button
-                onClick={() => {
-                  newChat();
-                }}
-                className="transition-transform duration-200 hover:scale-110"
-              >
-                <img
-                  src={openNewChat}
-                  alt="Start new chat"
-                  className="cursor-pointer"
-                />
-              </button>
-            )}
-            <div className="text-muted-foreground text-[20px] font-medium">
-              DocsGPT
-            </div>
+      {/* Icon rail (desktop only, when sidebar collapsed) */}
+      {!navOpen && !isMobile && !isTablet && (
+        <div className="bg-sidebar border-border fixed top-0 left-0 z-10 hidden h-full w-14 flex-col items-center gap-2 border-r py-3 lg:flex">
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            onClick={() => setNavOpen(true)}
+            aria-label="Open navigation menu"
+          >
+            <img
+              src={PanelLeftOpen}
+              alt=""
+              className="transition-all duration-300 ease-in-out"
+            />
+          </Button>
+          {queries?.length > 0 && (
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              onClick={() => newChat()}
+              aria-label="Start new chat"
+            >
+              <img src={openNewChat} alt="" />
+            </Button>
+          )}
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            onClick={() => setSearchOpen(true)}
+            aria-label={t('modals.searchConversations.searchPlaceholder')}
+            title={t('modals.searchConversations.searchPlaceholder')}
+          >
+            <img
+              src={SearchIcon}
+              alt=""
+              className="h-5 w-5 filter dark:invert"
+            />
+          </Button>
+          <div className="mt-auto flex flex-col items-center gap-2">
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              onClick={() => {
+                dispatch(setSelectedAgent(null));
+                navigate('/agents');
+              }}
+              aria-label={t('manageAgents')}
+            >
+              <img src={Spark} alt="" className="h-5 w-5" />
+            </Button>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              onClick={() => {
+                resetConversation();
+                navigate('/settings');
+              }}
+              aria-label={t('settings.label')}
+            >
+              <img
+                src={SettingGear}
+                alt=""
+                className="h-5 w-5 filter dark:invert"
+              />
+            </Button>
           </div>
         </div>
-      }
+      )}
       <div
         ref={navRef}
         className={`${
@@ -375,18 +410,22 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
               <p className="my-auto text-2xl font-semibold">DocsGPT</p>
             </a>
           </div>
-          <button
-            className="float-right mr-5"
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            className="float-right mr-5 h-auto w-auto p-0 hover:bg-transparent"
             onClick={() => {
               setNavOpen(!navOpen);
             }}
+            aria-label={navOpen ? 'Collapse sidebar' : 'Expand sidebar'}
           >
             <img
               src={navOpen ? PanelLeftClose : PanelLeftOpen}
               alt={navOpen ? 'Collapse sidebar' : 'Expand sidebar'}
               className="m-auto transition-all duration-300 ease-in-out hover:scale-110"
             />
-          </button>
+          </Button>
         </div>
         <NavLink
           to={'/c/new'}
@@ -416,12 +455,12 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
           className="scrollbar-overlay mb-auto h-[78vh] overflow-x-hidden overflow-y-auto dark:text-white"
         >
           {conversations?.loading && !isDeletingConversation && (
-            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transform">
-              <img
-                src={isDarkTheme ? Spinner : SpinnerDark}
-                className="animate-spin cursor-pointer bg-transparent"
-                alt="Loading conversations"
-              />
+            <div
+              className="text-foreground absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transform dark:text-white"
+              role="status"
+              aria-label="Loading conversations"
+            >
+              <Spinner size="small" />
             </div>
           )}
           {recentAgents?.length > 0 ? (
@@ -445,10 +484,10 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                     >
                       <div className="flex items-center gap-2">
                         <div className="flex w-6 justify-center">
-                          <AgentImage
+                          <Avatar
                             src={agent.image}
                             alt="agent-logo"
-                            className="h-6 w-6 rounded-full object-contain"
+                            imgClassName="h-6 w-6 rounded-full object-contain"
                           />
                         </div>
                         <p className="text-foreground dark:text-foreground overflow-hidden text-sm leading-6 text-ellipsis whitespace-nowrap">
@@ -458,18 +497,24 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                       <div
                         className={`${isMobile || isTablet ? 'flex' : 'invisible flex group-hover:visible'} items-center px-3`}
                       >
-                        <button
-                          className="rounded-full hover:opacity-75"
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon-sm"
+                          className="h-auto w-auto rounded-full p-0 hover:bg-transparent hover:opacity-75"
                           onClick={(e) => {
                             e.stopPropagation();
                             handleTogglePin(agent);
                           }}
+                          aria-label={
+                            agent.pinned ? 'Unpin agent' : 'Pin agent'
+                          }
                         >
                           <img
                             src={agent.pinned ? UnPin : Pin}
                             className="h-4 w-4"
                           ></img>
-                        </button>
+                        </Button>
                       </div>
                     </div>
                   ))}
@@ -524,9 +569,12 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             <div className="mt-7">
               <div className="mx-4 my-auto mt-2 flex h-8 items-center justify-between gap-4 rounded-3xl">
                 <p className="mt-1 ml-4 text-sm font-semibold">{t('chats')}</p>
-                <button
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon-sm"
                   onClick={() => setSearchOpen(true)}
-                  className="hover:bg-sidebar-accent mr-2 flex h-7 w-7 items-center justify-center rounded-full"
+                  className="hover:bg-sidebar-accent mr-2 h-7 w-7 rounded-full"
                   aria-label={t('modals.searchConversations.searchPlaceholder')}
                   title={t('modals.searchConversations.searchPlaceholder')}
                 >
@@ -535,7 +583,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                     alt="search"
                     className="h-4 w-4 opacity-70"
                   />
-                </button>
+                </Button>
               </div>
               <div className="conversations-container">
                 {(conversations.data ?? []).map((conversation) => (
@@ -639,25 +687,32 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
       </div>
       <div className="dark:border-b-sidebar-border bg-sidebar sticky z-10 h-16 w-full border-b-2 lg:hidden">
         <div className="ml-6 flex h-full items-center gap-6">
-          <button
-            className="h-6 w-6 lg:hidden"
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon-sm"
+            className="h-6 w-6 p-0 hover:bg-transparent lg:hidden"
             onClick={() => setNavOpen(true)}
+            aria-label="Toggle mobile menu"
           >
             <img
               src={Hamburger}
               alt="Toggle mobile menu"
               className="w-7 filter dark:invert"
             />
-          </button>
-          <div className="text-muted-foreground text-[20px] font-medium">
+          </Button>
+          <div className="text-muted-foreground text-xl font-medium">
             DocsGPT
           </div>
         </div>
       </div>
-      <DeleteConvModal
+      <ConfirmationModal
+        message={t('modals.deleteConv.confirm')}
         modalState={modalStateDeleteConv}
-        setModalState={setModalStateDeleteConv}
-        handleDeleteAllConv={handleDeleteAllConversations}
+        setModalState={(state) => dispatch(setModalStateDeleteConv(state))}
+        submitLabel={t('modals.deleteConv.delete')}
+        handleSubmit={handleDeleteAllConversations}
+        variant="danger"
       />
       {uploadModalState === 'ACTIVE' && (
         <Upload
diff --git a/frontend/src/PageNotFound.tsx b/frontend/src/PageNotFound.tsx
index 81ab0cc1..06cf1cc7 100644
--- a/frontend/src/PageNotFound.tsx
+++ b/frontend/src/PageNotFound.tsx
@@ -9,9 +9,12 @@ export default function PageNotFound() {
       <p className="text-foreground dark:bg-card mx-auto my-auto mt-20 flex w-full max-w-6xl flex-col place-items-center gap-6 rounded-3xl bg-gray-100 p-6 lg:p-10 xl:p-16">
         <h1>{t('pageNotFound.title')}</h1>
         <p>{t('pageNotFound.message')}</p>
-        <button className="pointer-cursor bg-blue-1000 hover:bg-blue-3000 mr-4 flex cursor-pointer items-center justify-center rounded-full px-4 py-2 text-white transition-colors duration-100">
-          <Link to="/">{t('pageNotFound.goHome')}</Link>
-        </button>
+        <Link
+          to="/"
+          className="bg-primary hover:bg-primary/90 mr-4 inline-flex cursor-pointer items-center justify-center rounded-full px-4 py-2 text-white transition-colors duration-100"
+        >
+          {t('pageNotFound.goHome')}
+        </Link>
       </p>
     </div>
   );
diff --git a/frontend/src/agents/AgentCard.tsx b/frontend/src/agents/AgentCard.tsx
index fe6a01e7..42968fae 100644
--- a/frontend/src/agents/AgentCard.tsx
+++ b/frontend/src/agents/AgentCard.tsx
@@ -1,4 +1,4 @@
-import { SyntheticEvent, useRef, useState } from 'react';
+import { SyntheticEvent, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
@@ -13,11 +13,25 @@ import Pin from '../assets/pin.svg';
 import Trash from '../assets/red-trash.svg';
 import ThreeDots from '../assets/three-dots.svg';
 import UnPin from '../assets/unpin.svg';
-import AgentImage from '../components/AgentImage';
-import ContextMenu, { MenuOption } from '../components/ContextMenu';
+import { Avatar } from '../components/ui/avatar';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '../components/ui/dropdown-menu';
 import ConfirmationModal from '../modals/ConfirmationModal';
 import MoveToFolderModal from '../modals/MoveToFolderModal';
 import { ActiveState } from '../models/misc';
+
+type AgentMenuOption = {
+  icon: string;
+  label: string;
+  onClick: (event: SyntheticEvent) => void;
+  variant: 'default' | 'destructive';
+  iconWidth?: number;
+  iconHeight?: number;
+};
 import {
   selectAgents,
   selectToken,
@@ -45,14 +59,11 @@ export default function AgentCard({
   const token = useSelector(selectToken);
   const userAgents = useSelector(selectAgents);
 
-  const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false);
   const [deleteConfirmation, setDeleteConfirmation] =
     useState<ActiveState>('INACTIVE');
   const [moveModalState, setMoveModalState] = useState<ActiveState>('INACTIVE');
 
-  const menuRef = useRef<HTMLDivElement>(null);
-
-  const menuOptionsConfig: Record<string, MenuOption[]> = {
+  const menuOptionsConfig: Record<string, AgentMenuOption[]> = {
     template: [
       {
         icon: Duplicate,
@@ -61,7 +72,7 @@ export default function AgentCard({
           e.stopPropagation();
           handleDuplicate();
         },
-        variant: 'primary',
+        variant: 'default',
         iconWidth: 18,
         iconHeight: 18,
       },
@@ -74,7 +85,7 @@ export default function AgentCard({
           e.stopPropagation();
           navigate(`/agents/logs/${agent.id}`);
         },
-        variant: 'primary',
+        variant: 'default',
         iconWidth: 14,
         iconHeight: 14,
       },
@@ -89,7 +100,7 @@ export default function AgentCard({
             navigate(`/agents/edit/${agent.id}`);
           }
         },
-        variant: 'primary',
+        variant: 'default',
         iconWidth: 14,
         iconHeight: 14,
       },
@@ -102,7 +113,7 @@ export default function AgentCard({
                 e.stopPropagation();
                 togglePin();
               },
-              variant: 'primary' as const,
+              variant: 'default' as const,
               iconWidth: 18,
               iconHeight: 18,
             },
@@ -114,9 +125,8 @@ export default function AgentCard({
         onClick: (e: SyntheticEvent) => {
           e.stopPropagation();
           setMoveModalState('ACTIVE');
-          setIsMenuOpen(false);
         },
-        variant: 'primary',
+        variant: 'default',
         iconWidth: 16,
         iconHeight: 15,
       },
@@ -127,7 +137,7 @@ export default function AgentCard({
           e.stopPropagation();
           setDeleteConfirmation('ACTIVE');
         },
-        variant: 'danger',
+        variant: 'destructive',
         iconWidth: 13,
         iconHeight: 13,
       },
@@ -140,7 +150,7 @@ export default function AgentCard({
           e.stopPropagation();
           navigate(`/agents/shared/${agent.shared_token}`);
         },
-        variant: 'primary',
+        variant: 'default',
         iconWidth: 12,
         iconHeight: 12,
       },
@@ -151,7 +161,7 @@ export default function AgentCard({
           e.stopPropagation();
           togglePin();
         },
-        variant: 'primary',
+        variant: 'default',
         iconWidth: 18,
         iconHeight: 18,
       },
@@ -162,7 +172,7 @@ export default function AgentCard({
           e.stopPropagation();
           handleHideSharedAgent();
         },
-        variant: 'danger',
+        variant: 'destructive',
         iconWidth: 13,
         iconHeight: 13,
       },
@@ -251,36 +261,66 @@ export default function AgentCard({
   };
   return (
     <div
-      className={`bg-muted hover:bg-accent relative flex h-44 flex-col justify-between rounded-[1.2rem] px-4 py-5 sm:w-48 sm:px-6 ${agent.status === 'published' && 'cursor-pointer'}`}
+      role={agent.status === 'published' ? 'button' : undefined}
+      tabIndex={agent.status === 'published' ? 0 : undefined}
+      aria-label={agent.status === 'published' ? agent.name : undefined}
+      className={`bg-muted hover:bg-accent focus-visible:ring-ring/50 focus-visible:border-ring relative flex h-44 flex-col justify-between rounded-2xl px-4 py-5 outline-none focus-visible:ring-[3px] sm:w-48 sm:px-6 ${agent.status === 'published' && 'cursor-pointer'}`}
       onClick={(e) => {
         e.stopPropagation();
         handleClick();
       }}
+      onKeyDown={(e) => {
+        if (
+          agent.status === 'published' &&
+          (e.key === 'Enter' || e.key === ' ')
+        ) {
+          e.preventDefault();
+          handleClick();
+        }
+      }}
     >
-      <div
-        ref={menuRef}
-        onClick={(e) => {
-          e.stopPropagation();
-          setIsMenuOpen(true);
-        }}
-        className="absolute top-4 right-4 z-10 cursor-pointer"
-      >
-        <img src={ThreeDots} alt={'use-agent'} className="h-[19px] w-[19px]" />
-        <ContextMenu
-          isOpen={isMenuOpen}
-          setIsOpen={setIsMenuOpen}
-          options={menuOptions}
-          anchorRef={menuRef}
-          position="bottom-right"
-          offset={{ x: 0, y: 0 }}
-        />
-      </div>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <button
+            type="button"
+            onClick={(e) => e.stopPropagation()}
+            className="absolute top-4 right-4 z-10 cursor-pointer"
+            aria-label="agent-actions"
+          >
+            <img
+              src={ThreeDots}
+              alt={'use-agent'}
+              className="h-[19px] w-[19px]"
+            />
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="min-w-[144px]">
+          {menuOptions.map((option, index) => (
+            <DropdownMenuItem
+              key={index}
+              variant={option.variant}
+              onClick={(e) => e.stopPropagation()}
+              onSelect={(event) => {
+                option.onClick(event as unknown as SyntheticEvent);
+              }}
+            >
+              <img
+                src={option.icon}
+                alt=""
+                width={option.iconWidth ?? 16}
+                height={option.iconHeight ?? 16}
+              />
+              <span>{option.label}</span>
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
       <div className="w-full">
         <div className="flex w-full items-center gap-1 px-1">
-          <AgentImage
+          <Avatar
             src={agent.image}
             alt={`${agent.name}`}
-            className="h-7 w-7 rounded-full object-contain"
+            imgClassName="h-7 w-7 rounded-full object-contain"
           />
           {agent.status === 'draft' && (
             <p className="text-foreground text-xs opacity-50">{`(Draft)`}</p>
@@ -289,11 +329,11 @@ export default function AgentCard({
         <div className="mt-2">
           <p
             title={agent.name}
-            className="text-foreground truncate px-1 text-[13px] leading-relaxed font-semibold capitalize"
+            className="text-foreground truncate px-1 text-sm leading-relaxed font-semibold capitalize"
           >
             {agent.name}
           </p>
-          <p className="dark:text-muted-foreground text-muted-foreground mt-1 h-20 overflow-auto px-1 text-[12px] leading-relaxed">
+          <p className="dark:text-muted-foreground text-muted-foreground mt-1 h-20 overflow-auto px-1 text-xs leading-relaxed">
             {agent.description}
           </p>
         </div>
diff --git a/frontend/src/agents/AgentLogs.tsx b/frontend/src/agents/AgentLogs.tsx
index 04157412..ec9fc53e 100644
--- a/frontend/src/agents/AgentLogs.tsx
+++ b/frontend/src/agents/AgentLogs.tsx
@@ -43,7 +43,7 @@ export default function AgentLogs() {
       : `/agents/edit/${agentId}`;
 
   return (
-    <div className="p-4 md:p-12">
+    <div className="p-4 pt-4 md:p-12 md:pt-4">
       <AgentPageHeader
         agentId={agentId}
         agentName={agent?.name}
diff --git a/frontend/src/agents/AgentPageHeader.tsx b/frontend/src/agents/AgentPageHeader.tsx
index c4505074..38439801 100644
--- a/frontend/src/agents/AgentPageHeader.tsx
+++ b/frontend/src/agents/AgentPageHeader.tsx
@@ -74,9 +74,14 @@ export default function AgentPageHeader({
   const displayName = agentName?.trim() || t('agents.pageHeader.fallbackName');
 
   return (
-    <div className={cn('flex flex-col gap-3', className)}>
-      <Breadcrumb>
-        <BreadcrumbList>
+    <div
+      className={cn(
+        'flex flex-col gap-3 md:flex-row md:items-baseline md:gap-6',
+        className,
+      )}
+    >
+      <Breadcrumb className="shrink-0">
+        <BreadcrumbList className="flex-nowrap">
           <BreadcrumbItem>
             <BreadcrumbLink asChild>
               <Link to="/agents">{t('agents.pageHeader.crumbs.agents')}</Link>
@@ -110,7 +115,7 @@ export default function AgentPageHeader({
       <nav
         aria-label={t('agents.pageHeader.subnavAriaLabel')}
         className={cn(
-          'flex w-full items-center gap-6',
+          'flex items-center gap-6',
           // 1px baseline rule under the whole row; the active tab's 2px
           // primary underline sits on top of it for the GitHub-style look.
           !inline && 'border-border border-b',
@@ -121,7 +126,7 @@ export default function AgentPageHeader({
           // Always render a 2px bottom border so row height stays constant
           // between active/inactive; only the color changes.
           const baseClasses =
-            'whitespace-nowrap border-b-2 pb-2 text-sm font-medium transition-colors';
+            'whitespace-nowrap border-b-2 pb-1 text-sm font-medium transition-colors';
           if (isActive) {
             return (
               <span
diff --git a/frontend/src/agents/AgentPreview.tsx b/frontend/src/agents/AgentPreview.tsx
index b1c1cb46..408d6da0 100644
--- a/frontend/src/agents/AgentPreview.tsx
+++ b/frontend/src/agents/AgentPreview.tsx
@@ -1,3 +1,4 @@
+import { MessageSquare } from 'lucide-react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
@@ -113,13 +114,24 @@ export default function AgentPreview() {
   return (
     <div className="relative h-full w-full">
       <div className="scrollbar-overlay absolute inset-0 bottom-[180px] overflow-hidden px-4 pt-4 [&>div>div]:w-full! [&>div>div]:max-w-none!">
-        <ConversationMessages
-          handleQuestion={handleQuestion}
-          handleQuestionSubmission={handleQuestionSubmission}
-          queries={queries}
-          status={status}
-          showHeroOnEmpty={false}
-        />
+        {queries.length === 0 ? (
+          <section className="flex h-full flex-col items-center justify-center">
+            <div className="bg-muted mb-2 flex size-14 shrink-0 items-center justify-center rounded-xl">
+              <MessageSquare className="text-muted-foreground size-6" />
+            </div>
+            <p className="text-foreground text-sm font-medium">
+              Test your agent
+            </p>
+          </section>
+        ) : (
+          <ConversationMessages
+            handleQuestion={handleQuestion}
+            handleQuestionSubmission={handleQuestionSubmission}
+            queries={queries}
+            status={status}
+            showHeroOnEmpty={false}
+          />
+        )}
       </div>
       <div className="absolute right-0 bottom-0 left-0 flex w-full flex-col gap-4 pb-2">
         <div className="w-full px-4">
diff --git a/frontend/src/agents/AgentsList.tsx b/frontend/src/agents/AgentsList.tsx
index 7537f8d5..473e26eb 100644
--- a/frontend/src/agents/AgentsList.tsx
+++ b/frontend/src/agents/AgentsList.tsx
@@ -6,6 +6,8 @@ import { useNavigate, useSearchParams } from 'react-router-dom';
 import userService from '../api/services/userService';
 import Search from '../assets/search.svg';
 import Spinner from '../components/Spinner';
+import { Button } from '../components/ui/button';
+import { Input } from '../components/ui/input';
 import {
   setConversation,
   updateConversationId,
@@ -159,42 +161,43 @@ export default function AgentsList() {
 
   return (
     <div className="p-4 md:p-12">
-      <h1 className="text-foreground mb-0 text-[32px] font-bold lg:text-[40px]">
+      <h1 className="text-foreground mb-0 text-3xl font-bold lg:text-4xl">
         {t('agents.title')}
       </h1>
-      <p className="text-muted-foreground mt-5 text-[15px] leading-6">
+      <p className="text-muted-foreground mt-5 text-sm leading-6">
         {t('agents.description')}
       </p>
 
       <div className="mt-6 flex flex-col gap-4 pb-4">
-        <div className="relative w-full max-w-md">
-          <img
-            src={Search}
-            alt=""
-            className="absolute top-1/2 left-4 h-5 w-5 -translate-y-1/2 opacity-40"
-          />
-          <input
+        <div className="w-full max-w-md">
+          <Input
             type="text"
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
-            placeholder={t('agents.searchPlaceholder')}
-            className="border-border bg-card text-foreground placeholder:text-muted-foreground h-11 w-full rounded-full border py-2 pr-5 pl-11 text-sm shadow-[0_1px_4px_rgba(0,0,0,0.06)] transition-shadow outline-none focus:shadow-[0_2px_8px_rgba(0,0,0,0.1)] dark:shadow-none"
+            label={t('agents.searchPlaceholder')}
+            labelBgClassName="bg-background"
+            className="rounded-full"
+            leftIcon={
+              <img src={Search} alt="" className="h-4 w-4 opacity-40" />
+            }
           />
         </div>
 
         <div className="flex flex-wrap gap-2">
           {FILTER_TABS.map((tab) => (
-            <button
+            <Button
               key={tab.id}
+              type="button"
+              variant="ghost"
               onClick={() => setActiveFilter(tab.id)}
-              className={`rounded-full px-4 py-2 text-sm transition-colors ${
+              className={`rounded-full ${
                 activeFilter === tab.id
                   ? 'bg-border text-foreground dark:bg-accent dark:text-white'
-                  : 'dark:text-gray text-muted-foreground hover:bg-accent/50 bg-transparent'
+                  : 'dark:text-gray text-muted-foreground hover:bg-accent/50'
               }`}
             >
               {t(tab.labelKey)}
-            </button>
+            </Button>
           ))}
         </div>
       </div>
@@ -411,15 +414,16 @@ function AgentSection({
       <div className="text-muted-foreground mt-12 flex flex-col items-center justify-center gap-3">
         <p>{t(`agents.sections.${config.id}.emptyState`)}</p>
         {config.showNewAgentButton && (
-          <button
-            className="bg-primary hover:bg-primary/90 rounded-full px-4 py-2 text-sm text-white"
+          <Button
+            type="button"
+            className="rounded-full text-white"
             onClick={() => {
               setModalFolderId(null);
               setShowAgentTypeModal(true);
             }}
           >
             {t('agents.newAgent')}
-          </button>
+          </Button>
         )}
       </div>
     );
@@ -456,27 +460,31 @@ function AgentSection({
     <div className="mt-8 flex flex-col gap-4">
       <div className="flex w-full flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex flex-col gap-2">
-          <h2 className="text-foreground flex flex-wrap items-center gap-2 text-[18px] font-semibold">
+          <h2 className="text-foreground flex flex-wrap items-center gap-2 text-lg font-semibold">
             {config.id === 'user' && folderPath.length > 0 ? (
               <>
-                <button
+                <Button
+                  type="button"
+                  variant="link"
                   onClick={() => handleNavigateToPath(-1)}
-                  className="text-muted-foreground hover:text-foreground dark:hover:text-white"
+                  className="text-muted-foreground hover:text-foreground h-auto p-0 text-lg font-semibold no-underline hover:no-underline dark:hover:text-white"
                 >
                   {t(`agents.sections.${config.id}.title`)}
-                </button>
+                </Button>
                 {breadcrumbItems.map((item, index) => (
                   <span key={item.id} className="flex items-center gap-2">
                     <ChevronIcon />
                     {index === breadcrumbItems.length - 1 ? (
                       <span>{item.name}</span>
                     ) : (
-                      <button
+                      <Button
+                        type="button"
+                        variant="link"
                         onClick={() => handleNavigateToPath(index)}
-                        className="text-muted-foreground hover:text-foreground dark:hover:text-white"
+                        className="text-muted-foreground hover:text-foreground h-auto p-0 text-lg font-semibold no-underline hover:no-underline dark:hover:text-white"
                       >
                         {item.name}
-                      </button>
+                      </Button>
                     )}
                   </span>
                 ))}
@@ -485,14 +493,14 @@ function AgentSection({
               t(`agents.sections.${config.id}.title`)
             )}
           </h2>
-          <p className="text-muted-foreground text-[13px]">
+          <p className="text-muted-foreground text-sm">
             {t(`agents.sections.${config.id}.description`)}
           </p>
         </div>
         <div className="flex items-center gap-2">
           {config.id === 'user' &&
             (isCreatingFolder ? (
-              <input
+              <Input
                 ref={newFolderInputRef}
                 type="text"
                 value={newFolderName}
@@ -513,30 +521,33 @@ function AgentSection({
                   }
                 }}
                 placeholder={t('agents.folders.newFolder')}
-                className="border-border bg-card text-foreground placeholder:text-muted-foreground w-28 rounded-full border px-4 py-2 text-sm outline-none sm:w-auto"
+                className="w-28 sm:w-auto"
                 autoFocus
               />
             ) : (
-              <button
-                className="border-border bg-card text-foreground hover:bg-accent shrink-0 rounded-full border px-4 py-2 text-sm whitespace-nowrap"
+              <Button
+                type="button"
+                variant="outline"
+                className="bg-card shrink-0 rounded-full whitespace-nowrap"
                 onClick={() => {
                   setIsCreatingFolder(true);
                   setTimeout(() => newFolderInputRef.current?.focus(), 0);
                 }}
               >
                 {t('agents.folders.newFolder')}
-              </button>
+              </Button>
             ))}
           {config.showNewAgentButton && (
-            <button
-              className="bg-primary hover:bg-primary/90 shrink-0 rounded-full px-4 py-2 text-sm whitespace-nowrap text-white"
+            <Button
+              type="button"
+              className="shrink-0 rounded-full whitespace-nowrap text-white"
               onClick={() => {
                 setModalFolderId(currentFolderId);
                 setShowAgentTypeModal(true);
               }}
             >
               {t('agents.newAgent')}
-            </button>
+            </Button>
           )}
         </div>
       </div>
@@ -586,15 +597,16 @@ function AgentSection({
                     : t(`agents.sections.${config.id}.emptyState`)}
                 </p>
                 {config.showNewAgentButton && !currentFolderId && (
-                  <button
-                    className="bg-primary hover:bg-primary/90 ml-2 rounded-full px-4 py-2 text-sm text-white"
+                  <Button
+                    type="button"
+                    className="ml-2 rounded-full text-white"
                     onClick={() => {
                       setModalFolderId(currentFolderId);
                       setShowAgentTypeModal(true);
                     }}
                   >
                     {t('agents.newAgent')}
-                  </button>
+                  </Button>
                 )}
               </div>
             ) : null}
diff --git a/frontend/src/agents/FolderCard.tsx b/frontend/src/agents/FolderCard.tsx
index 79ce554d..5a5d6fe6 100644
--- a/frontend/src/agents/FolderCard.tsx
+++ b/frontend/src/agents/FolderCard.tsx
@@ -1,15 +1,29 @@
-import { SyntheticEvent, useRef, useState } from 'react';
+import { SyntheticEvent, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import Edit from '../assets/edit.svg';
 import Trash from '../assets/red-trash.svg';
 import ThreeDots from '../assets/three-dots.svg';
-import ContextMenu, { MenuOption } from '../components/ContextMenu';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '../components/ui/dropdown-menu';
 import ConfirmationModal from '../modals/ConfirmationModal';
 import FolderNameModal from '../modals/FolderManagementModal';
 import { ActiveState } from '../models/misc';
 import { AgentFolder } from './types';
 
+type FolderMenuOption = {
+  icon: string;
+  label: string;
+  onClick: (event: SyntheticEvent) => void;
+  variant: 'default' | 'destructive';
+  iconWidth?: number;
+  iconHeight?: number;
+};
+
 type FolderCardProps = {
   folder: AgentFolder;
   agentCount: number;
@@ -28,23 +42,20 @@ export default function FolderCard({
   onToggleExpand,
 }: FolderCardProps) {
   const { t } = useTranslation();
-  const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [deleteConfirmation, setDeleteConfirmation] =
     useState<ActiveState>('INACTIVE');
   const [renameModalState, setRenameModalState] =
     useState<ActiveState>('INACTIVE');
-  const menuRef = useRef<HTMLDivElement>(null);
 
-  const menuOptions: MenuOption[] = [
+  const menuOptions: FolderMenuOption[] = [
     {
       icon: Edit,
       label: t('agents.folders.rename'),
       onClick: (e: SyntheticEvent) => {
         e.stopPropagation();
         setRenameModalState('ACTIVE');
-        setIsMenuOpen(false);
       },
-      variant: 'primary',
+      variant: 'default',
       iconWidth: 14,
       iconHeight: 14,
     },
@@ -54,9 +65,8 @@ export default function FolderCard({
       onClick: (e: SyntheticEvent) => {
         e.stopPropagation();
         setDeleteConfirmation('ACTIVE');
-        setIsMenuOpen(false);
       },
-      variant: 'danger',
+      variant: 'destructive',
       iconWidth: 13,
       iconHeight: 13,
     },
@@ -69,10 +79,19 @@ export default function FolderCard({
   return (
     <>
       <div
-        className={`relative flex cursor-pointer items-center justify-between rounded-[1.2rem] px-4 py-3 sm:w-48 ${
+        role="button"
+        tabIndex={0}
+        aria-pressed={isExpanded}
+        className={`focus-visible:ring-ring/50 focus-visible:border-ring relative flex cursor-pointer items-center justify-between rounded-2xl px-4 py-3 outline-none focus-visible:ring-[3px] sm:w-48 ${
           isExpanded ? 'bg-accent' : 'bg-muted hover:bg-accent'
         }`}
         onClick={() => onToggleExpand(folder.id)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            onToggleExpand(folder.id);
+          }
+        }}
       >
         <div className="flex items-center gap-2 overflow-hidden">
           <span className="text-foreground truncate text-sm font-medium">
@@ -82,24 +101,42 @@ export default function FolderCard({
             ({agentCount})
           </span>
         </div>
-        <div
-          ref={menuRef}
-          onClick={(e) => {
-            e.stopPropagation();
-            setIsMenuOpen(true);
-          }}
-          className="ml-2 shrink-0 cursor-pointer"
-        >
-          <img src={ThreeDots} alt="menu" className="h-4 w-4" />
-          <ContextMenu
-            isOpen={isMenuOpen}
-            setIsOpen={setIsMenuOpen}
-            options={menuOptions}
-            anchorRef={menuRef}
-            position="bottom-right"
-            offset={{ x: 0, y: 0 }}
-          />
-        </div>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <button
+              type="button"
+              onClick={(e) => e.stopPropagation()}
+              onKeyDown={(e) => e.stopPropagation()}
+              className="ml-2 shrink-0 cursor-pointer"
+              aria-label={t('agents.folders.menuAriaLabel', {
+                folderName: folder.name,
+                defaultValue: 'Folder actions',
+              })}
+            >
+              <img src={ThreeDots} alt="" className="h-4 w-4" />
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="min-w-[144px]">
+            {menuOptions.map((option, index) => (
+              <DropdownMenuItem
+                key={index}
+                variant={option.variant}
+                onClick={(e) => e.stopPropagation()}
+                onSelect={(event) => {
+                  option.onClick(event as unknown as SyntheticEvent);
+                }}
+              >
+                <img
+                  src={option.icon}
+                  alt=""
+                  width={option.iconWidth ?? 16}
+                  height={option.iconHeight ?? 16}
+                />
+                <span>{option.label}</span>
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
       </div>
       <ConfirmationModal
         message={t('agents.folders.deleteConfirm')}
diff --git a/frontend/src/agents/NewAgent.tsx b/frontend/src/agents/NewAgent.tsx
index 96d9d6ce..21d692c6 100644
--- a/frontend/src/agents/NewAgent.tsx
+++ b/frontend/src/agents/NewAgent.tsx
@@ -12,13 +12,25 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
+import { Input } from '@/components/ui/input';
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Switch } from '@/components/ui/switch';
 
 import modelService from '../api/services/modelService';
 import userService from '../api/services/userService';
 import SourceIcon from '../assets/source.svg';
-import Dropdown from '../components/Dropdown';
 import { FileUpload } from '../components/FileUpload';
-import MultiSelectPopup, { OptionType } from '../components/MultiSelectPopup';
+import {
+  MultiSelectPopover,
+  type MultiSelectPopoverItem,
+} from '../components/MultiSelectPopover';
 import Spinner from '../components/Spinner';
 import AgentDetailsModal from '../modals/AgentDetailsModal';
 import ConfirmationModal from '../modals/ConfirmationModal';
@@ -87,14 +99,15 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
     default_model_id: '',
   });
   const [imageFile, setImageFile] = useState<File | null>(null);
-  const [userTools, setUserTools] = useState<OptionType[]>([]);
+  const [userTools, setUserTools] = useState<MultiSelectPopoverItem[]>([]);
+  const [rawUserTools, setRawUserTools] = useState<UserToolType[]>([]);
   const [availableModels, setAvailableModels] = useState<Model[]>([]);
   const [isSourcePopupOpen, setIsSourcePopupOpen] = useState(false);
   const [isToolsPopupOpen, setIsToolsPopupOpen] = useState(false);
   const [isModelsPopupOpen, setIsModelsPopupOpen] = useState(false);
-  const [selectedSourceIds, setSelectedSourceIds] = useState<
-    Set<string | number>
-  >(new Set());
+  const [selectedSourceIds, setSelectedSourceIds] = useState<Set<string>>(
+    new Set(),
+  );
   const [selectedTools, setSelectedTools] = useState<ToolSummary[]>([]);
   const [selectedModelIds, setSelectedModelIds] = useState<Set<string>>(
     new Set(),
@@ -446,19 +459,20 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
       if (!response.ok) throw new Error('Failed to fetch tools');
       const data = await response.json();
       // Group ordering: builtins -> defaults -> user tools (sorted via the
-      // MultiSelectPopup first-appearance grouping).
+      // MultiSelectPopover first-appearance grouping).
       const groupFor = (tool: UserToolType): string => {
         if (tool.builtin) return t('agents.form.toolsPopup.groupBuiltin');
         if (tool.default) return t('agents.form.toolsPopup.groupDefault');
         return t('agents.form.toolsPopup.groupCustom');
       };
-      const tools: OptionType[] = data.tools.map((tool: UserToolType) => ({
-        id: tool.id,
-        label: getToolDisplayName(tool),
-        icon: `/toolIcons/tool_${tool.name}.svg`,
-        name: tool.name,
-        group: groupFor(tool),
-      }));
+      const tools: MultiSelectPopoverItem[] = data.tools.map(
+        (tool: UserToolType) => ({
+          id: tool.id,
+          label: getToolDisplayName(tool),
+          icon: `/toolIcons/tool_${tool.name}.svg`,
+          group: groupFor(tool),
+        }),
+      );
       const groupOrder = [
         t('agents.form.toolsPopup.groupBuiltin'),
         t('agents.form.toolsPopup.groupDefault'),
@@ -469,6 +483,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
           groupOrder.indexOf(a.group || '') - groupOrder.indexOf(b.group || ''),
       );
       setUserTools(tools);
+      setRawUserTools(data.tools as UserToolType[]);
     };
     const getModels = async () => {
       const response = await modelService.getModels(token);
@@ -529,19 +544,10 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
   useEffect(() => {
     if (sourceDocs && sourceDocs.length > 0 && selectedSourceIds.size === 0) {
       const defaultSource = sourceDocs.find((s) => s.name === 'Default');
-      if (defaultSource) {
-        setSelectedSourceIds(
-          new Set([
-            defaultSource.id || defaultSource.retriever || defaultSource.name,
-          ]),
-        );
-      } else {
-        setSelectedSourceIds(
-          new Set([
-            sourceDocs[0].id || sourceDocs[0].retriever || sourceDocs[0].name,
-          ]),
-        );
-      }
+      const fallback = defaultSource || sourceDocs[0];
+      setSelectedSourceIds(
+        new Set([String(fallback.id || fallback.retriever || fallback.name)]),
+      );
     }
   }, [sourceDocs, selectedSourceIds.size]);
 
@@ -726,61 +732,66 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
   const showAgentNav = effectiveMode === 'edit' && Boolean(agent.id);
 
   return (
-    <div className="flex flex-col px-4 pt-4 pb-2 max-[1179px]:min-h-dvh min-[1180px]:h-dvh md:px-12 md:pt-12 md:pb-3">
-      {showAgentNav ? (
-        <AgentPageHeader
-          agentId={agent.id}
-          agentName={agent.name}
-          agentEditPath={`/agents/edit/${agent.id}`}
-          currentPage="overview"
-          className="px-4"
-        />
-      ) : null}
-      <div className="mt-5 flex w-full flex-wrap items-center justify-end gap-2 px-4">
-        {agent.agent_type === 'workflow' && (
-          <div className="mt-4 w-full">
-            <WorkflowBuilder />
-          </div>
+    <div className="flex flex-col px-4 pt-4 pb-2 max-[1179px]:min-h-dvh min-[1180px]:h-dvh md:px-12 md:pt-4 md:pb-3">
+      {agent.agent_type === 'workflow' && (
+        <div className="mt-4 w-full">
+          <WorkflowBuilder />
+        </div>
+      )}
+      <div className="flex w-full flex-wrap items-center justify-between gap-2 px-4">
+        {showAgentNav ? (
+          <AgentPageHeader
+            agentId={agent.id}
+            agentName={agent.name}
+            agentEditPath={`/agents/edit/${agent.id}`}
+            currentPage="overview"
+          />
+        ) : (
+          <span aria-hidden />
         )}
         <div className="flex flex-wrap items-center gap-2">
           {hasChanges && (
-            <button
-              className="text-primary dark:text-foreground rounded-3xl px-2 py-2 text-sm font-medium"
+            <Button
+              type="button"
+              variant="ghost"
               onClick={handleCancel}
+              className="text-primary dark:text-foreground rounded-3xl px-2 hover:bg-transparent"
             >
               {t('agents.form.buttons.cancel')}
-            </button>
+            </Button>
           )}
           {modeConfig[effectiveMode].showSaveDraft && (
-            <button
+            <Button
+              type="button"
               disabled={isJsonSchemaInvalid()}
-              className={`border-primary text-primary hover:bg-primary/90 flex min-w-28 items-center justify-center rounded-3xl border border-solid px-5 py-2 text-sm font-medium whitespace-nowrap transition-colors hover:text-white ${
-                isJsonSchemaInvalid() ? 'cursor-not-allowed opacity-30' : ''
-              }`}
               onClick={handleSaveDraft}
+              className={`border-primary text-primary hover:bg-primary/90 min-w-28 rounded-3xl border border-solid bg-transparent px-5 whitespace-nowrap hover:text-white ${
+                isJsonSchemaInvalid() ? 'disabled:opacity-30' : ''
+              }`}
             >
               <span className="flex items-center justify-center transition-all duration-200">
                 {draftLoading ? (
-                  <Spinner size="small" color="#976af3" />
+                  <Spinner size="small" />
                 ) : (
                   t('agents.form.buttons.saveDraft')
                 )}
               </span>
-            </button>
+            </Button>
           )}
-          <button
+          <Button
+            type="button"
             disabled={!isPublishable() || !hasChanges}
-            className={`${!isPublishable() || !hasChanges ? 'cursor-not-allowed opacity-30' : ''} bg-primary hover:bg-primary/90 flex min-w-28 items-center justify-center rounded-3xl px-5 py-2 text-sm font-medium whitespace-nowrap text-white`}
             onClick={handlePublish}
+            className={`${!isPublishable() || !hasChanges ? 'disabled:opacity-30' : ''} min-w-28 rounded-3xl px-5 whitespace-nowrap text-white`}
           >
             <span className="flex items-center justify-center transition-all duration-200">
               {publishLoading ? (
-                <Spinner size="small" color="white" />
+                <Spinner size="small" />
               ) : (
                 modeConfig[effectiveMode].buttonText
               )}
             </span>
-          </button>
+          </Button>
           {modeConfig[effectiveMode].showAccessDetails && (
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
@@ -803,21 +814,21 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
           )}
         </div>
       </div>
-      <div className="bg-muted dark:bg-background mt-3 flex w-full flex-1 grid-cols-5 flex-col gap-10 rounded-[30px] p-5 max-[1179px]:overflow-visible min-[1180px]:grid min-[1180px]:gap-5 min-[1180px]:overflow-hidden">
+      <div className="bg-muted dark:bg-background mt-3 flex w-full flex-1 grid-cols-5 flex-col gap-10 rounded-2xl p-5 max-[1179px]:overflow-visible min-[1180px]:grid min-[1180px]:gap-5 min-[1180px]:overflow-hidden">
         <div className="scrollbar-overlay col-span-2 flex flex-col gap-5 max-[1179px]:overflow-visible min-[1180px]:max-h-full min-[1180px]:overflow-y-auto min-[1180px]:pr-3">
-          <div className="bg-card rounded-[30px] px-6 py-3">
+          <div className="bg-card rounded-2xl px-6 py-3">
             <h2 className="text-lg font-semibold">
               {t('agents.form.sections.meta')}
             </h2>
-            <input
-              className="border-border text-foreground dark:text-foreground dark:placeholder:text-silver bg-card dark:border-border mt-3 w-full rounded-3xl border px-5 py-3 text-sm outline-hidden placeholder:text-gray-400"
+            <Input
+              className="bg-card mt-3 h-auto rounded-3xl px-5 py-3 text-sm placeholder:text-gray-400 md:text-sm"
               type="text"
               value={agent.name}
               placeholder={t('agents.form.placeholders.agentName')}
               onChange={(e) => setAgent({ ...agent, name: e.target.value })}
             />
             <textarea
-              className="border-border text-foreground dark:text-foreground dark:placeholder:text-silver bg-card dark:border-border mt-3 h-32 w-full rounded-xl border px-5 py-4 text-sm outline-hidden placeholder:text-gray-400"
+              className="border-border text-foreground dark:text-foreground dark:placeholder:text-muted-foreground bg-card dark:border-border focus-visible:ring-ring/50 focus-visible:border-ring mt-3 h-32 w-full rounded-xl border px-5 py-4 text-sm outline-hidden placeholder:text-gray-400 focus-visible:ring-[3px]"
               placeholder={t('agents.form.placeholders.describeAgent')}
               value={agent.description}
               onChange={(e) =>
@@ -833,7 +844,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
                 uploadText={[
                   {
                     text: t('agents.form.upload.clickToUpload'),
-                    colorClass: 'text-[#7D54D1]',
+                    colorClass: 'text-primary',
                   },
                   {
                     text: t('agents.form.upload.dragAndDrop'),
@@ -843,105 +854,110 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
               />
             </div>
           </div>
-          <div className="bg-card rounded-[30px] px-6 py-3">
+          <div className="bg-card rounded-2xl px-6 py-3">
             <h2 className="text-lg font-semibold">
               {t('agents.form.sections.source')}
             </h2>
             <div className="mt-3">
               <div className="flex flex-wrap items-center gap-1">
-                <button
-                  ref={sourceAnchorButtonRef}
-                  onClick={() => setIsSourcePopupOpen(!isSourcePopupOpen)}
-                  className={`border-border bg-card dark:border-border w-full truncate rounded-3xl border px-5 py-3 text-left text-sm ${
-                    selectedSourceIds.size > 0
-                      ? 'text-foreground dark:text-foreground'
-                      : 'dark:text-muted-foreground text-gray-400'
-                  }`}
-                >
-                  {selectedSourceIds.size > 0
-                    ? Array.from(selectedSourceIds)
-                        .map((id) => {
-                          const matchedDoc = sourceDocs?.find(
-                            (source) =>
-                              source.id === id ||
-                              source.name === id ||
-                              source.retriever === id,
-                          );
-                          return (
-                            matchedDoc?.name || t('agents.form.externalKb')
-                          );
-                        })
-                        .filter(Boolean)
-                        .join(', ')
-                    : t('agents.form.placeholders.selectSources')}
-                </button>
-                <MultiSelectPopup
-                  isOpen={isSourcePopupOpen}
-                  onClose={() => setIsSourcePopupOpen(false)}
-                  anchorRef={sourceAnchorButtonRef}
-                  options={
+                <MultiSelectPopover
+                  open={isSourcePopupOpen}
+                  onOpenChange={setIsSourcePopupOpen}
+                  title={t('agents.form.sourcePopup.title')}
+                  items={
                     sourceDocs?.map((doc: Doc) => ({
-                      id: doc.id || doc.retriever || doc.name,
+                      id: String(doc.id || doc.retriever || doc.name),
                       label: doc.name,
                       icon: <img src={SourceIcon} alt="" />,
                     })) || []
                   }
-                  selectedIds={selectedSourceIds}
-                  onSelectionChange={(newSelectedIds: Set<string | number>) => {
+                  selectedIds={Array.from(selectedSourceIds)}
+                  onToggle={(id) => {
+                    const next = new Set(selectedSourceIds);
+                    if (next.has(id)) next.delete(id);
+                    else next.add(id);
                     if (
-                      newSelectedIds.size === 0 &&
+                      next.size === 0 &&
                       sourceDocs &&
                       sourceDocs.length > 0
                     ) {
                       const defaultSource = sourceDocs.find(
                         (s) => s.name === 'Default',
                       );
-                      if (defaultSource) {
-                        setSelectedSourceIds(
-                          new Set([
-                            defaultSource.id ||
-                              defaultSource.retriever ||
-                              defaultSource.name,
-                          ]),
-                        );
-                      } else {
-                        setSelectedSourceIds(
-                          new Set([
-                            sourceDocs[0].id ||
-                              sourceDocs[0].retriever ||
-                              sourceDocs[0].name,
-                          ]),
-                        );
-                      }
+                      const fallback = defaultSource || sourceDocs[0];
+                      setSelectedSourceIds(
+                        new Set([
+                          String(
+                            fallback.id || fallback.retriever || fallback.name,
+                          ),
+                        ]),
+                      );
                     } else {
-                      setSelectedSourceIds(newSelectedIds);
+                      setSelectedSourceIds(next);
                     }
                   }}
-                  title={t('agents.form.sourcePopup.title')}
                   searchPlaceholder={t(
                     'agents.form.sourcePopup.searchPlaceholder',
                   )}
-                  noOptionsMessage={t(
-                    'agents.form.sourcePopup.noOptionsMessage',
-                  )}
+                  emptyMessage={t('agents.form.sourcePopup.noOptionsMessage')}
+                  trigger={
+                    <Button
+                      type="button"
+                      variant="outline"
+                      ref={sourceAnchorButtonRef}
+                      className={`bg-card h-auto w-full justify-start truncate rounded-3xl px-5 py-3 text-left text-sm font-normal ${
+                        selectedSourceIds.size > 0
+                          ? 'text-foreground dark:text-foreground'
+                          : 'dark:text-muted-foreground text-gray-400'
+                      }`}
+                    >
+                      {selectedSourceIds.size > 0
+                        ? Array.from(selectedSourceIds)
+                            .map((id) => {
+                              const matchedDoc = sourceDocs?.find(
+                                (source) =>
+                                  source.id === id ||
+                                  source.name === id ||
+                                  source.retriever === id,
+                              );
+                              return (
+                                matchedDoc?.name || t('agents.form.externalKb')
+                              );
+                            })
+                            .filter(Boolean)
+                            .join(', ')
+                        : t('agents.form.placeholders.selectSources')}
+                    </Button>
+                  }
                 />
               </div>
               <div className="mt-3">
-                <Dropdown
-                  options={chunks}
-                  selectedValue={agent.chunks ? agent.chunks : null}
-                  onSelect={(value: string) =>
+                <Select
+                  value={agent.chunks || undefined}
+                  onValueChange={(value) =>
                     setAgent({ ...agent, chunks: value })
                   }
-                  size="w-full"
-                  rounded="3xl"
-                  placeholder={t('agents.form.placeholders.chunksPerQuery')}
-                  contentSize="text-sm"
-                />
+                >
+                  <SelectTrigger
+                    className="w-full rounded-3xl px-5 py-3 text-sm"
+                    size="lg"
+                  >
+                    <SelectValue
+                      placeholder={t('agents.form.placeholders.chunksPerQuery')}
+                    />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {chunks.map((c) => (
+                      <SelectItem key={c} value={c}>
+                        {c}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
               </div>
             </div>
           </div>
-          <div className="bg-card rounded-[30px] px-6 py-3">
+          <div className="bg-card rounded-2xl px-6 py-3">
             <div className="flex flex-wrap items-end gap-1">
               <div className="min-w-20 grow basis-full sm:basis-0">
                 <Prompts
@@ -961,127 +977,120 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
                   title={t('agents.form.sections.prompt')}
                   titleClassName="text-lg font-semibold"
                   showAddButton={false}
-                  dropdownProps={{
-                    size: 'w-full',
-                    rounded: '3xl',
-                    contentSize: 'text-sm',
-                  }}
+                  dropdownProps={{ className: 'w-full' }}
                 />
               </div>
-              <button
-                className="border-primary text-primary hover:bg-primary/90 min-w-20 shrink-0 basis-full rounded-3xl border border-solid px-5 py-3 text-sm whitespace-nowrap transition-colors hover:text-white sm:basis-auto"
+              <Button
+                type="button"
                 onClick={() => setAddPromptModal('ACTIVE')}
+                className="border-primary text-primary hover:bg-primary/90 h-auto min-w-20 shrink-0 basis-full rounded-3xl border border-solid bg-transparent px-5 py-3 whitespace-nowrap hover:text-white sm:basis-auto"
               >
                 {t('agents.form.buttons.add')}
-              </button>
+              </Button>
             </div>
           </div>
-          <div className="bg-card rounded-[30px] px-6 py-3">
+          <div className="bg-card rounded-2xl px-6 py-3">
             <h2 className="text-lg font-semibold">
               {t('agents.form.sections.tools')}
             </h2>
             <div className="mt-3 flex flex-wrap items-center gap-1">
-              <button
-                ref={toolAnchorButtonRef}
-                onClick={() => setIsToolsPopupOpen(!isToolsPopupOpen)}
-                className={`border-border bg-card dark:border-border w-full truncate rounded-3xl border px-5 py-3 text-left text-sm ${
-                  selectedTools.length > 0
-                    ? 'text-foreground dark:text-foreground'
-                    : 'dark:text-muted-foreground text-gray-400'
-                }`}
-              >
-                {selectedTools.length > 0
-                  ? selectedTools
-                      .map((tool) => getToolDisplayName(tool))
-                      .filter(Boolean)
-                      .join(', ')
-                  : t('agents.form.placeholders.selectTools')}
-              </button>
-              <MultiSelectPopup
-                isOpen={isToolsPopupOpen}
-                onClose={() => setIsToolsPopupOpen(false)}
-                anchorRef={toolAnchorButtonRef}
-                options={userTools}
-                selectedIds={new Set(selectedTools.map((tool) => tool.id))}
-                onSelectionChange={(newSelectedIds: Set<string | number>) =>
-                  setSelectedTools(
-                    userTools
-                      .filter((tool) => newSelectedIds.has(tool.id))
-                      .map((tool) => ({
-                        id: String(tool.id),
-                        name:
-                          typeof tool.name === 'string'
-                            ? tool.name
-                            : tool.label,
-                        display_name: tool.label,
-                      })),
-                  )
-                }
+              <MultiSelectPopover
+                open={isToolsPopupOpen}
+                onOpenChange={setIsToolsPopupOpen}
                 title={t('agents.form.toolsPopup.title')}
+                items={userTools}
+                selectedIds={selectedTools.map((tool) => tool.id)}
+                onToggle={(id) => {
+                  const exists = selectedTools.find((t) => t.id === id);
+                  if (exists) {
+                    setSelectedTools(selectedTools.filter((t) => t.id !== id));
+                    return;
+                  }
+                  const item = userTools.find((t) => t.id === id);
+                  const raw = rawUserTools.find((t) => t.id === id);
+                  if (!item) return;
+                  setSelectedTools([
+                    ...selectedTools,
+                    {
+                      id: item.id,
+                      name: raw?.name || item.label,
+                      display_name: item.label,
+                    },
+                  ]);
+                }}
                 searchPlaceholder={t(
                   'agents.form.toolsPopup.searchPlaceholder',
                 )}
-                noOptionsMessage={t('agents.form.toolsPopup.noOptionsMessage')}
+                emptyMessage={t('agents.form.toolsPopup.noOptionsMessage')}
+                trigger={
+                  <Button
+                    type="button"
+                    variant="outline"
+                    ref={toolAnchorButtonRef}
+                    className={`bg-card h-auto w-full justify-start truncate rounded-3xl px-5 py-3 text-left text-sm font-normal ${
+                      selectedTools.length > 0
+                        ? 'text-foreground dark:text-foreground'
+                        : 'dark:text-muted-foreground text-gray-400'
+                    }`}
+                  >
+                    {selectedTools.length > 0
+                      ? selectedTools
+                          .map((tool) => getToolDisplayName(tool))
+                          .filter(Boolean)
+                          .join(', ')
+                      : t('agents.form.placeholders.selectTools')}
+                  </Button>
+                }
               />
             </div>
           </div>
-          <div className="bg-card rounded-[30px] px-6 py-3">
+          <div className="bg-card rounded-2xl px-6 py-3">
             <h2 className="text-lg font-semibold">
               {t('agents.form.sections.agentType')}
             </h2>
             <div className="mt-3">
-              <Dropdown
-                options={agentTypes}
-                selectedValue={
-                  agent.agent_type
-                    ? agentTypes.find((type) => type.value === agent.agent_type)
-                        ?.label || null
-                    : null
+              <Select
+                value={agent.agent_type || undefined}
+                onValueChange={(value) =>
+                  setAgent({ ...agent, agent_type: value })
                 }
-                onSelect={(option: { label: string; value: string }) =>
-                  setAgent({ ...agent, agent_type: option.value })
-                }
-                size="w-full"
-                rounded="3xl"
-                placeholder={t('agents.form.placeholders.selectType')}
-                contentSize="text-sm"
-              />
+              >
+                <SelectTrigger
+                  className="w-full rounded-3xl px-5 py-3 text-sm"
+                  size="lg"
+                >
+                  <SelectValue
+                    placeholder={t('agents.form.placeholders.selectType')}
+                  />
+                </SelectTrigger>
+                <SelectContent>
+                  {agentTypes.map((type) => (
+                    <SelectItem key={type.value} value={type.value}>
+                      {type.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
             </div>
           </div>
-          <div className="bg-card rounded-[30px] px-6 py-3">
+          <div className="bg-card rounded-2xl px-6 py-3">
             <h2 className="text-lg font-semibold">
               {t('agents.form.sections.models')}
             </h2>
             <div className="mt-3 flex flex-col gap-3">
-              <button
-                ref={modelAnchorButtonRef}
-                onClick={() => setIsModelsPopupOpen(!isModelsPopupOpen)}
-                className={`border-border bg-card dark:border-border w-full truncate rounded-3xl border px-5 py-3 text-left text-sm ${
-                  selectedModelIds.size > 0
-                    ? 'text-foreground dark:text-foreground'
-                    : 'dark:text-muted-foreground text-gray-400'
-                }`}
-              >
-                {selectedModelIds.size > 0
-                  ? availableModels
-                      .filter((m) => selectedModelIds.has(m.id))
-                      .map((m) => m.display_name)
-                      .join(', ')
-                  : t('agents.form.placeholders.selectModels')}
-              </button>
-              <MultiSelectPopup
-                isOpen={isModelsPopupOpen}
-                onClose={() => setIsModelsPopupOpen(false)}
-                anchorRef={modelAnchorButtonRef}
-                options={(() => {
+              <MultiSelectPopover
+                open={isModelsPopupOpen}
+                onOpenChange={setIsModelsPopupOpen}
+                title={t('agents.form.modelsPopup.title')}
+                items={(() => {
                   const builtinLabel = t(
                     'settings.customModels.modelsGroup.builtin',
                   );
                   const userLabel = t('settings.customModels.modelsGroup.user');
-                  const builtin: OptionType[] = [];
-                  const user: OptionType[] = [];
+                  const builtin: MultiSelectPopoverItem[] = [];
+                  const user: MultiSelectPopoverItem[] = [];
                   availableModels.forEach((model) => {
-                    const opt: OptionType = {
+                    const opt: MultiSelectPopoverItem = {
                       id: model.id,
                       label: model.display_name,
                       group: model.source === 'user' ? userLabel : builtinLabel,
@@ -1091,55 +1100,80 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
                   });
                   return [...builtin, ...user];
                 })()}
-                selectedIds={selectedModelIds}
-                onSelectionChange={(newSelectedIds: Set<string | number>) =>
-                  setSelectedModelIds(
-                    new Set(Array.from(newSelectedIds).map(String)),
-                  )
-                }
-                title={t('agents.form.modelsPopup.title')}
+                selectedIds={Array.from(selectedModelIds)}
+                onToggle={(id) => {
+                  const next = new Set(selectedModelIds);
+                  if (next.has(id)) next.delete(id);
+                  else next.add(id);
+                  setSelectedModelIds(next);
+                }}
                 searchPlaceholder={t(
                   'agents.form.modelsPopup.searchPlaceholder',
                 )}
-                noOptionsMessage={t('agents.form.modelsPopup.noOptionsMessage')}
+                emptyMessage={t('agents.form.modelsPopup.noOptionsMessage')}
+                trigger={
+                  <Button
+                    type="button"
+                    variant="outline"
+                    ref={modelAnchorButtonRef}
+                    className={`bg-card h-auto w-full justify-start truncate rounded-3xl px-5 py-3 text-left text-sm font-normal ${
+                      selectedModelIds.size > 0
+                        ? 'text-foreground dark:text-foreground'
+                        : 'dark:text-muted-foreground text-gray-400'
+                    }`}
+                  >
+                    {selectedModelIds.size > 0
+                      ? availableModels
+                          .filter((m) => selectedModelIds.has(m.id))
+                          .map((m) => m.display_name)
+                          .join(', ')
+                      : t('agents.form.placeholders.selectModels')}
+                  </Button>
+                }
               />
               {selectedModelIds.size > 0 && (
                 <div>
                   <label className="mb-2 block text-sm font-medium">
                     {t('agents.form.labels.defaultModel')}
                   </label>
-                  <Dropdown
-                    options={availableModels
-                      .filter((m) => selectedModelIds.has(m.id))
-                      .map((m) => ({
-                        label: m.display_name,
-                        value: m.id,
-                      }))}
-                    selectedValue={
-                      availableModels.find(
-                        (m) => m.id === agent.default_model_id,
-                      )?.display_name || null
+                  <Select
+                    value={agent.default_model_id || undefined}
+                    onValueChange={(value) =>
+                      setAgent({ ...agent, default_model_id: value })
                     }
-                    onSelect={(option: { label: string; value: string }) =>
-                      setAgent({ ...agent, default_model_id: option.value })
-                    }
-                    size="w-full"
-                    rounded="3xl"
-                    placeholder={t(
-                      'agents.form.placeholders.selectDefaultModel',
-                    )}
-                    contentSize="text-sm"
-                  />
+                  >
+                    <SelectTrigger
+                      className="w-full rounded-3xl px-5 py-3 text-sm"
+                      size="lg"
+                    >
+                      <SelectValue
+                        placeholder={t(
+                          'agents.form.placeholders.selectDefaultModel',
+                        )}
+                      />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {availableModels
+                        .filter((m) => selectedModelIds.has(m.id))
+                        .map((m) => (
+                          <SelectItem key={m.id} value={m.id}>
+                            {m.display_name}
+                          </SelectItem>
+                        ))}
+                    </SelectContent>
+                  </Select>
                 </div>
               )}
             </div>
           </div>
-          <div className="bg-card rounded-[30px] px-6 py-3">
-            <button
+          <div className="bg-card rounded-2xl px-6 py-3">
+            <Button
+              type="button"
+              variant="ghost"
               onClick={() =>
                 setIsAdvancedSectionExpanded(!isAdvancedSectionExpanded)
               }
-              className="flex w-full items-center justify-between text-left focus:outline-none"
+              className="h-auto w-full justify-between px-0 py-0 text-left hover:bg-transparent"
             >
               <div>
                 <h2 className="text-lg font-semibold">
@@ -1148,7 +1182,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
               </div>
               <div className="ml-4 flex items-center">
                 <svg
-                  className={`h-5 w-5 transform transition-transform duration-200 ${
+                  className={`size-5 transform transition-transform duration-200 ${
                     isAdvancedSectionExpanded ? 'rotate-180' : ''
                   }`}
                   fill="none"
@@ -1163,7 +1197,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
                   />
                 </svg>
               </div>
-            </button>
+            </Button>
             {isAdvancedSectionExpanded && (
               <div className="mt-3">
                 <div>
@@ -1187,7 +1221,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
   "additionalProperties": false
 }`}
                   rows={9}
-                  className={`border-border text-foreground dark:text-foreground bg-card dark:border-border mt-2 w-full rounded-2xl border px-4 py-3 font-mono text-sm outline-hidden`}
+                  className={`border-border text-foreground dark:text-foreground bg-card dark:border-border focus-visible:ring-ring/50 focus-visible:border-ring mt-2 w-full rounded-2xl border px-4 py-3 font-mono text-sm outline-hidden focus-visible:ring-[3px]`}
                 />
                 {jsonSchemaText.trim() !== '' && (
                   <div
@@ -1220,31 +1254,20 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
                         {t('agents.form.advanced.tokenLimitingDescription')}
                       </p>
                     </div>
-                    <button
-                      onClick={() => {
-                        const newTokenMode = !agent.limited_token_mode;
+                    <Switch
+                      checked={agent.limited_token_mode}
+                      onCheckedChange={(checked) => {
                         setAgent({
                           ...agent,
-                          limited_token_mode: newTokenMode,
-                          limited_request_mode: newTokenMode
+                          limited_token_mode: checked,
+                          limited_request_mode: checked
                             ? false
                             : agent.limited_request_mode,
                         });
                       }}
-                      className={`relative h-6 w-11 rounded-full transition-colors ${
-                        agent.limited_token_mode
-                          ? 'bg-primary'
-                          : 'bg-gray-300 dark:bg-gray-600'
-                      }`}
-                    >
-                      <span
-                        className={`absolute top-0.5 h-5 w-5 transform rounded-full bg-white transition-transform ${
-                          agent.limited_token_mode ? '' : '-translate-x-5'
-                        }`}
-                      />
-                    </button>
+                    />
                   </div>
-                  <input
+                  <Input
                     type="number"
                     min="0"
                     value={agent.token_limit || ''}
@@ -1258,7 +1281,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
                     }
                     disabled={!agent.limited_token_mode}
                     placeholder={t('agents.form.placeholders.enterTokenLimit')}
-                    className={`border-border text-foreground dark:text-foreground dark:placeholder:text-silver bg-card dark:border-border mt-2 w-full rounded-3xl border px-5 py-3 text-sm outline-hidden placeholder:text-gray-400 ${
+                    className={`bg-card mt-2 h-auto rounded-3xl px-5 py-3 text-sm placeholder:text-gray-400 md:text-sm ${
                       !agent.limited_token_mode
                         ? 'cursor-not-allowed opacity-50'
                         : ''
@@ -1276,31 +1299,20 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
                         {t('agents.form.advanced.requestLimitingDescription')}
                       </p>
                     </div>
-                    <button
-                      onClick={() => {
-                        const newRequestMode = !agent.limited_request_mode;
+                    <Switch
+                      checked={agent.limited_request_mode}
+                      onCheckedChange={(checked) => {
                         setAgent({
                           ...agent,
-                          limited_request_mode: newRequestMode,
-                          limited_token_mode: newRequestMode
+                          limited_request_mode: checked,
+                          limited_token_mode: checked
                             ? false
                             : agent.limited_token_mode,
                         });
                       }}
-                      className={`relative h-6 w-11 rounded-full transition-colors ${
-                        agent.limited_request_mode
-                          ? 'bg-primary'
-                          : 'bg-gray-300 dark:bg-gray-600'
-                      }`}
-                    >
-                      <span
-                        className={`absolute top-0.5 h-5 w-5 transform rounded-full bg-white transition-transform ${
-                          agent.limited_request_mode ? '' : '-translate-x-5'
-                        }`}
-                      />
-                    </button>
+                    />
                   </div>
-                  <input
+                  <Input
                     type="number"
                     min="0"
                     value={agent.request_limit || ''}
@@ -1316,7 +1328,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
                     placeholder={t(
                       'agents.form.placeholders.enterRequestLimit',
                     )}
-                    className={`border-border text-foreground dark:text-foreground dark:placeholder:text-silver bg-card dark:border-border mt-2 w-full rounded-3xl border px-5 py-3 text-sm outline-hidden placeholder:text-gray-400 ${
+                    className={`bg-card mt-2 h-auto rounded-3xl px-5 py-3 text-sm placeholder:text-gray-400 md:text-sm ${
                       !agent.limited_request_mode
                         ? 'cursor-not-allowed opacity-50'
                         : ''
@@ -1336,35 +1348,23 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
                         )}
                       </p>
                     </div>
-                    <button
-                      onClick={() =>
+                    <Switch
+                      className="shrink-0"
+                      checked={agent.allow_system_prompt_override}
+                      onCheckedChange={(checked) =>
                         setAgent({
                           ...agent,
-                          allow_system_prompt_override:
-                            !agent.allow_system_prompt_override,
+                          allow_system_prompt_override: checked,
                         })
                       }
-                      className={`relative h-6 w-11 shrink-0 rounded-full transition-colors ${
-                        agent.allow_system_prompt_override
-                          ? 'bg-primary'
-                          : 'bg-gray-300 dark:bg-gray-600'
-                      }`}
-                    >
-                      <span
-                        className={`absolute top-0.5 h-5 w-5 transform rounded-full bg-white transition-transform ${
-                          agent.allow_system_prompt_override
-                            ? ''
-                            : '-translate-x-5'
-                        }`}
-                      />
-                    </button>
+                    />
                   </div>
                 </div>
               </div>
             )}
           </div>
           {modeConfig[effectiveMode].showDelete && agent.id && (
-            <div className="border-destructive/40 bg-destructive/5 rounded-[30px] border px-6 py-4">
+            <div className="border-destructive/40 bg-destructive/5 rounded-2xl border px-6 py-4">
               <div className="flex flex-wrap items-start justify-between gap-3">
                 <div className="min-w-0 flex-1">
                   <h2 className="text-destructive text-lg font-semibold">
@@ -1376,10 +1376,10 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
                 </div>
                 <Button
                   type="button"
-                  variant="outline"
+                  variant="destructive-outline"
                   size="sm"
                   onClick={() => setDeleteConfirmation('ACTIVE')}
-                  className="text-destructive hover:bg-destructive/10 hover:text-destructive shrink-0"
+                  className="shrink-0"
                 >
                   {t('agents.form.dangerZone.deleteButton')}
                 </Button>
@@ -1388,9 +1388,6 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
           )}
         </div>
         <div className="col-span-3 flex flex-col gap-2 max-[1179px]:h-auto max-[1179px]:px-0 max-[1179px]:py-0 min-[1180px]:h-full min-[1180px]:py-2">
-          <h2 className="text-lg font-semibold">
-            {t('agents.form.sections.preview')}
-          </h2>
           <div className="flex-1 max-[1179px]:overflow-visible min-[1180px]:min-h-0 min-[1180px]:overflow-hidden">
             <AgentPreviewArea />
           </div>
@@ -1430,9 +1427,9 @@ function AgentPreviewArea() {
   const { t } = useTranslation();
   const selectedAgent = useSelector(selectSelectedAgent);
   return (
-    <div className="bg-card border-border w-full rounded-[30px] border max-[1179px]:h-[600px] min-[1180px]:h-full">
+    <div className="bg-card border-border w-full rounded-2xl border max-[1179px]:h-[600px] min-[1180px]:h-full">
       {selectedAgent?.status === 'published' ? (
-        <div className="flex h-full w-full flex-col overflow-hidden rounded-[30px]">
+        <div className="flex h-full w-full flex-col overflow-hidden rounded-2xl">
           <AgentPreview />
         </div>
       ) : (
diff --git a/frontend/src/agents/SharedAgent.tsx b/frontend/src/agents/SharedAgent.tsx
index 4553f32b..f4d57500 100644
--- a/frontend/src/agents/SharedAgent.tsx
+++ b/frontend/src/agents/SharedAgent.tsx
@@ -6,8 +6,8 @@ import { useParams } from 'react-router-dom';
 import userService from '../api/services/userService';
 import NoFilesDarkIcon from '../assets/no-files-dark.svg';
 import NoFilesIcon from '../assets/no-files.svg';
-import AgentImage from '../components/AgentImage';
 import MessageInput from '../components/MessageInput';
+import { Avatar } from '../components/ui/avatar';
 import Spinner from '../components/Spinner';
 import ConversationMessages from '../conversation/ConversationMessages';
 import { Query } from '../conversation/conversationModels';
@@ -152,10 +152,10 @@ export default function SharedAgent() {
   return (
     <div className="relative h-full w-full">
       <div className="absolute top-5 left-4 hidden items-center gap-3 sm:flex">
-        <AgentImage
+        <Avatar
           src={sharedAgent.image}
           alt="agent-logo"
-          className="h-6 w-6 rounded-full object-contain"
+          imgClassName="h-6 w-6 rounded-full object-contain"
         />
         <h2 className="text-foreground text-lg font-semibold">
           {sharedAgent.name}
diff --git a/frontend/src/agents/SharedAgentCard.tsx b/frontend/src/agents/SharedAgentCard.tsx
index a12fb52f..72f06ba0 100644
--- a/frontend/src/agents/SharedAgentCard.tsx
+++ b/frontend/src/agents/SharedAgentCard.tsx
@@ -1,7 +1,8 @@
 import { useTranslation } from 'react-i18next';
 
 import EditIcon from '../assets/edit.svg';
-import AgentImage from '../components/AgentImage';
+import { Avatar } from '../components/ui/avatar';
+import { Button } from '../components/ui/button';
 import { getToolDisplayName } from '../utils/toolUtils';
 import { Agent } from './types';
 
@@ -23,9 +24,9 @@ export default function SharedAgentCard({
     <div className="border-border dark:border-border flex w-full max-w-[720px] flex-col rounded-3xl border p-6 shadow-xs sm:w-fit sm:min-w-[480px]">
       <div className="flex items-start gap-3">
         <div className="flex h-12 w-12 items-center justify-center overflow-hidden rounded-full p-1">
-          <AgentImage
+          <Avatar
             src={agent.image}
-            className="h-full w-full rounded-full object-contain"
+            imgClassName="h-full w-full rounded-full object-contain"
           />
         </div>
         <div className="flex max-h-[92px] flex-1 flex-col gap-px">
@@ -37,15 +38,17 @@ export default function SharedAgentCard({
           </p>
         </div>
         {onEdit && (
-          <button
+          <Button
             type="button"
+            variant="outline"
+            size="sm"
             onClick={onEdit}
-            className="border-border hover:bg-accent text-foreground flex shrink-0 items-center gap-1.5 rounded-full border px-3 py-1.5 text-sm font-medium transition-colors"
+            className="shrink-0 gap-1.5 rounded-full"
             aria-label={t('agents.edit')}
           >
             <img src={EditIcon} alt="" className="h-3.5 w-3.5" />
             {t('agents.edit')}
-          </button>
+          </Button>
         )}
       </div>
       {hasSharedMetadata && (
diff --git a/frontend/src/agents/components/AgentTypeModal.tsx b/frontend/src/agents/components/AgentTypeModal.tsx
index 7cdf143f..1dc21699 100644
--- a/frontend/src/agents/components/AgentTypeModal.tsx
+++ b/frontend/src/agents/components/AgentTypeModal.tsx
@@ -1,6 +1,8 @@
-import { Bot, Workflow, X } from 'lucide-react';
+import { Bot, Workflow } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
 
+import { Modal } from '../../components/ui/modal';
+
 interface AgentTypeModalProps {
   isOpen: boolean;
   onClose: () => void;
@@ -14,8 +16,6 @@ export default function AgentTypeModal({
 }: AgentTypeModalProps) {
   const navigate = useNavigate();
 
-  if (!isOpen) return null;
-
   const handleSelect = (type: 'normal' | 'workflow') => {
     if (type === 'workflow') {
       navigate(
@@ -28,66 +28,52 @@ export default function AgentTypeModal({
   };
 
   return (
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4"
-      onClick={onClose}
+    <Modal
+      open={isOpen}
+      onOpenChange={(o) => !o && onClose()}
+      title="Create New Agent"
+      description="Choose the type of agent you want to create"
+      size="md"
     >
-      <div
-        className="bg-card relative w-full max-w-lg rounded-xl p-8 shadow-2xl"
-        onClick={(e) => e.stopPropagation()}
-      >
+      <div className="flex flex-col gap-4">
         <button
-          onClick={onClose}
-          className="absolute top-5 right-5 text-gray-400 transition-colors hover:text-gray-600 dark:hover:text-gray-200"
+          type="button"
+          onClick={() => handleSelect('normal')}
+          className="hover:border-primary hover:bg-primary/5 dark:hover:border-primary dark:hover:bg-primary/10 focus-visible:border-ring focus-visible:ring-ring/50 group dark:border-border flex items-start gap-5 rounded-xl border-2 border-gray-200 p-5 text-left transition-all outline-none focus-visible:ring-[3px]"
         >
-          <X size={20} />
+          <div className="dark:bg-primary/20 bg-primary/10 text-primary group-hover:bg-primary/90 flex h-14 w-14 shrink-0 items-center justify-center rounded-xl transition-colors group-hover:text-white dark:text-purple-300">
+            <Bot size={28} />
+          </div>
+          <div className="flex-1">
+            <h3 className="text-foreground dark:text-foreground mb-2 text-lg font-semibold">
+              Classic Agent
+            </h3>
+            <p className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
+              Create a standard AI agent with a single model, tools, and
+              knowledge sources
+            </p>
+          </div>
         </button>
 
-        <h2 className="text-foreground dark:text-foreground mb-3 text-2xl font-bold">
-          Create New Agent
-        </h2>
-        <p className="mb-8 text-sm text-gray-500 dark:text-gray-400">
-          Choose the type of agent you want to create
-        </p>
-
-        <div className="flex flex-col gap-4">
-          <button
-            onClick={() => handleSelect('normal')}
-            className="hover:border-primary hover:bg-primary/5 dark:hover:border-primary dark:hover:bg-primary/10 group dark:border-border flex items-start gap-5 rounded-xl border-2 border-gray-200 p-5 text-left transition-all"
-          >
-            <div className="dark:bg-primary/20 bg-primary/10 text-primary group-hover:bg-primary/90 flex h-14 w-14 shrink-0 items-center justify-center rounded-xl transition-colors group-hover:text-white dark:text-purple-300">
-              <Bot size={28} />
-            </div>
-            <div className="flex-1">
-              <h3 className="text-foreground dark:text-foreground mb-2 text-lg font-semibold">
-                Classic Agent
-              </h3>
-              <p className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
-                Create a standard AI agent with a single model, tools, and
-                knowledge sources
-              </p>
-            </div>
-          </button>
-
-          <button
-            onClick={() => handleSelect('workflow')}
-            className="hover:border-primary hover:bg-primary/5 dark:hover:border-primary dark:hover:bg-primary/10 group dark:border-border flex items-start gap-5 rounded-xl border-2 border-gray-200 p-5 text-left transition-all"
-          >
-            <div className="dark:bg-primary/20 bg-primary/10 text-primary group-hover:bg-primary flex h-14 w-14 shrink-0 items-center justify-center rounded-xl transition-colors group-hover:text-white dark:text-purple-300">
-              <Workflow size={28} />
-            </div>
-            <div className="flex-1">
-              <h3 className="text-foreground dark:text-foreground mb-2 text-lg font-semibold">
-                Workflow Agent
-              </h3>
-              <p className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
-                Design complex multi-step workflows with different models,
-                conditional logic, and state management
-              </p>
-            </div>
-          </button>
-        </div>
+        <button
+          type="button"
+          onClick={() => handleSelect('workflow')}
+          className="hover:border-primary hover:bg-primary/5 dark:hover:border-primary dark:hover:bg-primary/10 focus-visible:border-ring focus-visible:ring-ring/50 group dark:border-border flex items-start gap-5 rounded-xl border-2 border-gray-200 p-5 text-left transition-all outline-none focus-visible:ring-[3px]"
+        >
+          <div className="dark:bg-primary/20 bg-primary/10 text-primary group-hover:bg-primary flex h-14 w-14 shrink-0 items-center justify-center rounded-xl transition-colors group-hover:text-white dark:text-purple-300">
+            <Workflow size={28} />
+          </div>
+          <div className="flex-1">
+            <h3 className="text-foreground dark:text-foreground mb-2 text-lg font-semibold">
+              Workflow Agent
+            </h3>
+            <p className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
+              Design complex multi-step workflows with different models,
+              conditional logic, and state management
+            </p>
+          </div>
+        </button>
       </div>
-    </div>
+    </Modal>
   );
 }
diff --git a/frontend/src/agents/schedules/RunDetailDrawer.tsx b/frontend/src/agents/schedules/RunDetailDrawer.tsx
index 9c05de15..7cd85876 100644
--- a/frontend/src/agents/schedules/RunDetailDrawer.tsx
+++ b/frontend/src/agents/schedules/RunDetailDrawer.tsx
@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 
+import { Button } from '../../components/ui/button';
 import type { ScheduleRun } from '../types/schedule';
 import ScheduleStatusBadge from './StatusBadge';
 
@@ -44,13 +45,15 @@ export default function RunDetailDrawer({
       >
         <div className="mb-4 flex items-center justify-between">
           <h2 className="text-lg font-semibold">Run details</h2>
-          <button
+          <Button
             type="button"
+            variant="outline"
+            size="sm"
             onClick={onClose}
-            className="border-border text-muted-foreground rounded-md border px-3 py-1 text-sm"
+            className="text-muted-foreground"
           >
             Close
-          </button>
+          </Button>
         </div>
         <dl className="mb-4 grid grid-cols-2 gap-2 text-sm">
           <dt className="text-muted-foreground">Status</dt>
diff --git a/frontend/src/agents/schedules/RunLog.tsx b/frontend/src/agents/schedules/RunLog.tsx
index f375d06e..364237b0 100644
--- a/frontend/src/agents/schedules/RunLog.tsx
+++ b/frontend/src/agents/schedules/RunLog.tsx
@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
+import { Button } from '../../components/ui/button';
 import { selectToken } from '../../preferences/preferenceSlice';
 import type { AppDispatch, RootState } from '../../store';
 import type { ScheduleRun } from '../types/schedule';
@@ -69,13 +70,15 @@ export default function RunLog({ scheduleId, onSelect }: RunLogProps) {
             <td className="py-2">{run.trigger_source}</td>
             <td className="py-2">
               {onSelect && (
-                <button
+                <Button
                   type="button"
+                  variant="link"
+                  size="sm"
                   onClick={() => onSelect(run)}
-                  className="text-primary text-xs underline"
+                  className="h-auto p-0 text-xs underline"
                 >
                   Details
-                </button>
+                </Button>
               )}
             </td>
           </tr>
diff --git a/frontend/src/agents/schedules/ScheduleFormModal.tsx b/frontend/src/agents/schedules/ScheduleFormModal.tsx
index 5daf692b..ec73c853 100644
--- a/frontend/src/agents/schedules/ScheduleFormModal.tsx
+++ b/frontend/src/agents/schedules/ScheduleFormModal.tsx
@@ -19,7 +19,7 @@ import {
 import { TimePicker } from '@/components/ui/time-picker';
 import { cn } from '@/lib/utils';
 
-import WrapperModal from '../../modals/WrapperModal';
+import { Modal } from '../../components/ui/modal';
 import type { Schedule, ScheduleCreatePayload } from '../types/schedule';
 import {
   browserTimezone,
@@ -145,8 +145,6 @@ export default function ScheduleFormModal({
   }, [timezone]);
   const [error, setError] = useState<string | null>(null);
 
-  if (!open) return null;
-
   const setFrequency = (frequency: ScheduleFrequency) =>
     setValues((current) => ({ ...current, frequency }));
 
@@ -191,11 +189,18 @@ export default function ScheduleFormModal({
   const isEdit = Boolean(initial?.id);
 
   return (
-    <WrapperModal
+    <Modal
+      open={open}
+      onOpenChange={(o) => !o && onClose()}
+      hideTitle
+      title={
+        isEdit
+          ? t('agents.schedules.modal.save')
+          : t('agents.schedules.modal.create')
+      }
+      size="md"
       className="w-[min(560px,92vw)] sm:p-6"
       contentClassName="max-h-[80vh]"
-      close={onClose}
-      isPerformingTask={submitting}
     >
       <div className="flex flex-col gap-5">
         <div className="flex items-start gap-3 pr-6">
@@ -261,7 +266,7 @@ export default function ScheduleFormModal({
             onChange={(e) => setInstruction(e.target.value)}
             placeholder={t('agents.schedules.modal.instructionsPlaceholder')}
             rows={5}
-            className="border-border bg-background text-foreground placeholder:text-muted-foreground focus:border-ring focus:ring-ring/40 rounded-md border px-3 py-2 text-sm outline-none focus:ring-2"
+            className="border-border bg-background text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 rounded-md border px-3 py-2 text-sm outline-none focus-visible:ring-2"
           />
         </label>
 
@@ -272,7 +277,7 @@ export default function ScheduleFormModal({
             type="button"
             disabled={submitting}
             onClick={submit}
-            className="rounded-full px-5"
+            className="rounded-3xl px-5"
           >
             {submitting
               ? '…'
@@ -282,7 +287,7 @@ export default function ScheduleFormModal({
           </Button>
         </div>
       </div>
-    </WrapperModal>
+    </Modal>
   );
 }
 
@@ -298,20 +303,22 @@ function FrequencyTabs({ frequency, onChange, labels }: FrequencyTabsProps) {
       {FREQUENCIES.map((f) => {
         const active = f === frequency;
         return (
-          <button
+          <Button
             key={f}
             type="button"
+            variant="ghost"
+            size="sm"
             onClick={() => onChange(f)}
             className={cn(
-              'flex-1 rounded-full px-3 py-1.5 text-xs font-medium transition-colors',
+              'h-auto flex-1 rounded-full px-3 py-1.5 text-xs font-medium',
               active
-                ? 'bg-card text-foreground shadow-sm'
-                : 'text-muted-foreground hover:text-foreground',
+                ? 'bg-card text-foreground hover:bg-card shadow-sm'
+                : 'text-muted-foreground hover:text-foreground hover:bg-transparent',
             )}
             aria-pressed={active}
           >
             {labels[f]}
-          </button>
+          </Button>
         );
       })}
     </div>
@@ -473,7 +480,7 @@ function DatePicker({ value, onChange, placeholder }: DatePickerProps) {
           {value ? formatDateLabel(value) : placeholder}
         </Button>
       </PopoverTrigger>
-      {/* z-200 keeps the popover above WrapperModal (z-100); matches SelectContent. */}
+      {/* z-200 keeps the popover above Modal (z-50); matches SelectContent. */}
       <PopoverContent className="z-200 w-auto p-0" align="start">
         <Calendar
           mode="single"
diff --git a/frontend/src/agents/schedules/SchedulerToolCallCard.tsx b/frontend/src/agents/schedules/SchedulerToolCallCard.tsx
index 5d26b056..0597b1c6 100644
--- a/frontend/src/agents/schedules/SchedulerToolCallCard.tsx
+++ b/frontend/src/agents/schedules/SchedulerToolCallCard.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
+import { Button } from '../../components/ui/button';
 import { selectToken } from '../../preferences/preferenceSlice';
 import type { AppDispatch } from '../../store';
 import { deleteSchedule, loadSchedulesForAgent } from './schedulesSlice';
@@ -160,13 +161,15 @@ export default function SchedulerToolCallCard({
         </p>
       )}
       {taskId && !cancelled && (
-        <button
+        <Button
           type="button"
+          variant="outline"
+          size="sm"
           onClick={cancel}
-          className="text-destructive border-border mt-2 rounded-md border px-3 py-1 text-xs"
+          className="text-destructive mt-2 text-xs"
         >
           Cancel
-        </button>
+        </Button>
       )}
       {cancelled && (
         <p className="text-muted-foreground mt-2 text-xs">Cancelled.</p>
diff --git a/frontend/src/agents/schedules/SchedulesView.tsx b/frontend/src/agents/schedules/SchedulesView.tsx
index 9054ea3f..56d1b6fb 100644
--- a/frontend/src/agents/schedules/SchedulesView.tsx
+++ b/frontend/src/agents/schedules/SchedulesView.tsx
@@ -5,6 +5,7 @@ import { useParams } from 'react-router-dom';
 
 import userService from '../../api/services/userService';
 import Spinner from '../../components/Spinner';
+import { Button } from '../../components/ui/button';
 import ConfirmationModal from '../../modals/ConfirmationModal';
 import { ActiveState } from '../../models/misc';
 import { selectToken } from '../../preferences/preferenceSlice';
@@ -112,7 +113,6 @@ export default function SchedulesView() {
   };
 
   const closeModal = () => {
-    if (submitting) return;
     setModalOpen(false);
     setEditing(null);
   };
@@ -154,7 +154,7 @@ export default function SchedulesView() {
       : `/agents/edit/${agentId}`;
 
   return (
-    <div className="p-4 md:p-12">
+    <div className="p-4 pt-4 md:p-12 md:pt-4">
       <AgentPageHeader
         agentId={agentId}
         agentName={agent?.name}
@@ -187,13 +187,9 @@ export default function SchedulesView() {
               <h2 className="text-lg font-semibold">
                 {t('agents.schedules.heading')}
               </h2>
-              <button
-                type="button"
-                onClick={openCreate}
-                className="bg-primary text-primary-foreground hover:bg-primary/90 rounded-md px-3 py-1 text-sm"
-              >
+              <Button type="button" size="sm" onClick={openCreate}>
                 {t('agents.schedules.newRecurring')}
-              </button>
+              </Button>
             </header>
             <section>
               <h3 className="text-muted-foreground mb-2 text-sm font-semibold uppercase">
@@ -226,15 +222,17 @@ export default function SchedulesView() {
                           </p>
                         </div>
                         <div className="flex gap-2">
-                          <button
+                          <Button
                             type="button"
+                            size="sm"
                             onClick={() => openEdit(schedule)}
-                            className="border-primary text-primary hover:bg-primary/90 rounded-full border border-solid px-5 py-1 text-sm transition-colors hover:text-white"
+                            className="border-primary text-primary hover:bg-primary/90 rounded-full border border-solid bg-transparent px-5 hover:text-white"
                           >
                             {t('agents.schedules.edit')}
-                          </button>
-                          <button
+                          </Button>
+                          <Button
                             type="button"
+                            size="sm"
                             onClick={() =>
                               dispatch(
                                 setSchedulePaused({
@@ -247,45 +245,50 @@ export default function SchedulesView() {
                                 }),
                               )
                             }
-                            className="border-primary text-primary hover:bg-primary/90 rounded-full border border-solid px-5 py-1 text-sm transition-colors hover:text-white"
+                            className="border-primary text-primary hover:bg-primary/90 rounded-full border border-solid bg-transparent px-5 hover:text-white"
                           >
                             {schedule.status === 'active'
                               ? t('agents.schedules.pause')
                               : t('agents.schedules.resume')}
-                          </button>
-                          <button
+                          </Button>
+                          <Button
                             type="button"
+                            size="sm"
                             onClick={() =>
                               dispatch(
                                 runScheduleNow({ id: schedule.id, token }),
                               )
                             }
-                            className="border-primary text-primary hover:bg-primary/90 rounded-full border border-solid px-5 py-1 text-sm transition-colors hover:text-white"
+                            className="border-primary text-primary hover:bg-primary/90 rounded-full border border-solid bg-transparent px-5 hover:text-white"
                           >
                             {t('agents.schedules.runNow')}
-                          </button>
-                          <button
+                          </Button>
+                          <Button
                             type="button"
+                            variant="destructive-outline"
+                            size="sm"
                             onClick={() => requestDelete(schedule)}
-                            className="rounded-full border border-solid border-red-500 px-5 py-1 text-sm text-red-500 transition-colors hover:bg-red-500 hover:text-white"
+                            className="rounded-full px-5"
                           >
                             {t('agents.schedules.delete')}
-                          </button>
+                          </Button>
                         </div>
                       </div>
-                      <button
+                      <Button
                         type="button"
+                        variant="link"
+                        size="sm"
                         onClick={() =>
                           setExpanded(
                             expanded === schedule.id ? null : schedule.id,
                           )
                         }
-                        className="text-primary mt-2 text-xs underline"
+                        className="mt-2 h-auto p-0 text-xs underline"
                       >
                         {expanded === schedule.id
                           ? t('agents.schedules.hideRuns')
                           : t('agents.schedules.showRuns')}
-                      </button>
+                      </Button>
                       {expanded === schedule.id && (
                         <div className="mt-2">
                           <RunLog
@@ -329,22 +332,25 @@ export default function SchedulesView() {
                         </div>
                         <div className="flex gap-2">
                           {schedule.status === 'active' && (
-                            <button
+                            <Button
                               type="button"
+                              size="sm"
                               onClick={() => openEdit(schedule)}
-                              className="border-primary text-primary hover:bg-primary/90 rounded-full border border-solid px-5 py-1 text-sm transition-colors hover:text-white"
+                              className="border-primary text-primary hover:bg-primary/90 rounded-full border border-solid bg-transparent px-5 hover:text-white"
                             >
                               {t('agents.schedules.edit')}
-                            </button>
+                            </Button>
                           )}
                           {schedule.status === 'active' && (
-                            <button
+                            <Button
                               type="button"
+                              variant="destructive-outline"
+                              size="sm"
                               onClick={() => requestDelete(schedule)}
-                              className="rounded-full border border-solid border-red-500 px-5 py-1 text-sm text-red-500 transition-colors hover:bg-red-500 hover:text-white"
+                              className="rounded-full px-5"
                             >
                               {t('agents.schedules.cancel')}
-                            </button>
+                            </Button>
                           )}
                         </div>
                       </div>
diff --git a/frontend/src/agents/schedules/StatusBadge.tsx b/frontend/src/agents/schedules/StatusBadge.tsx
index 7696871d..c753411d 100644
--- a/frontend/src/agents/schedules/StatusBadge.tsx
+++ b/frontend/src/agents/schedules/StatusBadge.tsx
@@ -46,7 +46,7 @@ export default function ScheduleStatusBadge({
   return (
     <span
       className={cn(
-        'inline-flex items-center rounded-full px-2 py-0.5 text-[11px] leading-[16px] font-medium',
+        'inline-flex items-center rounded-full px-2 py-0.5 text-xs leading-[16px] font-medium',
         getStatusClasses(status),
         className,
       )}
diff --git a/frontend/src/agents/schedules/TimezoneCombobox.tsx b/frontend/src/agents/schedules/TimezoneCombobox.tsx
index 83ccd7fa..4950df11 100644
--- a/frontend/src/agents/schedules/TimezoneCombobox.tsx
+++ b/frontend/src/agents/schedules/TimezoneCombobox.tsx
@@ -149,7 +149,7 @@ export default function TimezoneCombobox({
           <ChevronsUpDown className="size-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
-      {/* z-200 keeps the popover above WrapperModal (z-100); matches DatePicker. */}
+      {/* z-200 keeps the popover above Modal (z-50); matches DatePicker. */}
       <PopoverContent
         className="z-200 w-[min(20rem,calc(100vw-2rem))] p-0"
         align="start"
diff --git a/frontend/src/agents/workflow/WorkflowBuilder.tsx b/frontend/src/agents/workflow/WorkflowBuilder.tsx
index dd1b1c75..caff5b00 100644
--- a/frontend/src/agents/workflow/WorkflowBuilder.tsx
+++ b/frontend/src/agents/workflow/WorkflowBuilder.tsx
@@ -11,7 +11,6 @@ import {
   Pencil,
   Play,
   Plus,
-  Settings2,
   StickyNote,
   Trash2,
   X,
@@ -37,6 +36,8 @@ import ReactFlow, {
 } from 'reactflow';
 
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
 import { MultiSelect } from '@/components/ui/multi-select';
 import {
   Select,
@@ -1381,15 +1382,17 @@ function WorkflowBuilderInner() {
                 inline
               />
             ) : (
-              <button
+              <Button
+                type="button"
+                variant="outline"
                 onClick={navigateBackToAgents}
-                className="border-border text-muted-foreground hover:bg-accent rounded-full border px-4 py-2 text-sm"
+                className="text-muted-foreground rounded-full px-4 py-2 text-sm font-normal shadow-none"
               >
                 {t('agents.backToAll')}
-              </button>
+              </Button>
             )}
-            <div className="group relative flex items-center gap-2">
-              <div>
+            {!canManageAgent && (
+              <div className="min-w-0">
                 <div
                   className="max-w-xs truncate text-xl font-bold text-gray-900 dark:text-white"
                   title={workflowName || 'New Workflow'}
@@ -1398,19 +1401,30 @@ function WorkflowBuilderInner() {
                 </div>
                 {workflowDescription && (
                   <div
-                    className="max-w-xs truncate text-xs text-gray-500 dark:text-gray-400"
+                    className="text-muted-foreground max-w-xs truncate text-xs"
                     title={workflowDescription}
                   >
                     {workflowDescription}
                   </div>
                 )}
               </div>
-              <button
+            )}
+            <div className="relative flex items-center">
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon-sm"
                 onClick={() => setShowWorkflowSettings(!showWorkflowSettings)}
-                className="text-gray-400 opacity-0 transition-opacity group-hover:opacity-100 hover:text-gray-600 dark:hover:text-gray-200"
+                className="text-muted-foreground hover:bg-accent hover:text-foreground size-auto p-1"
+                aria-label="Workflow settings"
+                title={
+                  workflowDescription
+                    ? `${workflowName || 'New Workflow'} — ${workflowDescription}`
+                    : 'Edit workflow details'
+                }
               >
                 <Pencil size={14} />
-              </button>
+              </Button>
               {showWorkflowSettings && (
                 <div
                   ref={workflowSettingsRef}
@@ -1420,11 +1434,11 @@ function WorkflowBuilderInner() {
                     <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
                       Workflow Name
                     </label>
-                    <input
+                    <Input
                       type="text"
                       value={workflowName}
                       onChange={(e) => setWorkflowName(e.target.value)}
-                      className="focus:ring-ring border-border bg-card w-full rounded-lg border px-3 py-2 text-sm outline-none focus:ring-2 dark:text-white"
+                      className="bg-card h-auto rounded-lg px-3 py-2 text-sm shadow-none"
                       placeholder="Enter workflow name"
                     />
                   </div>
@@ -1435,7 +1449,7 @@ function WorkflowBuilderInner() {
                     <textarea
                       value={workflowDescription}
                       onChange={(e) => setWorkflowDescription(e.target.value)}
-                      className="focus:ring-ring border-border bg-card w-full rounded-lg border px-3 py-2 text-sm outline-none focus:ring-2 dark:text-white"
+                      className="focus-visible:ring-ring/50 focus-visible:border-ring border-border bg-card w-full rounded-lg border px-3 py-2 text-sm outline-none focus-visible:ring-2 dark:text-white"
                       rows={3}
                       placeholder="Describe what this workflow does"
                     />
@@ -1474,7 +1488,7 @@ function WorkflowBuilderInner() {
                       ]}
                       className="border-border rounded-lg border-2 border-dashed p-3 text-center transition-colors"
                     />
-                    <p className="text-muted-foreground mt-1 text-[11px]">
+                    <p className="text-muted-foreground mt-1 text-xs">
                       Image updates are included the next time you save.
                     </p>
                   </div>
@@ -1484,7 +1498,7 @@ function WorkflowBuilderInner() {
                         <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
                           {t('agents.form.advanced.systemPromptOverride')}
                         </label>
-                        <p className="mt-0.5 text-[11px] text-gray-500 dark:text-gray-400">
+                        <p className="mt-0.5 text-xs text-gray-500 dark:text-gray-400">
                           {t(
                             'agents.form.advanced.systemPromptOverrideDescription',
                           )}
@@ -1514,45 +1528,45 @@ function WorkflowBuilderInner() {
                       </button>
                     </div>
                   </div>
-                  <button
+                  <Button
+                    type="button"
                     onClick={handleWorkflowSettingsDone}
                     disabled={isPublishing}
-                    className="bg-primary hover:bg-primary/90 w-full rounded-lg px-3 py-2 text-sm font-medium text-white disabled:cursor-not-allowed disabled:opacity-50"
+                    className="w-full rounded-lg text-white"
                   >
                     Done
-                  </button>
+                  </Button>
                 </div>
               )}
             </div>
           </div>
           <div className="flex items-center gap-2">
-            <button
-              onClick={() => setShowWorkflowSettings((prev) => !prev)}
-              className="border-border bg-card hover:bg-accent flex items-center gap-2 rounded-full border px-4 py-2 text-sm font-medium text-gray-700 transition-colors dark:text-gray-200"
-            >
-              <Settings2 size={16} />
-              Details
-            </button>
             {canManageAgent && (
-              <button
+              <Button
+                type="button"
+                variant="outline"
                 onClick={() => setAgentDetails('ACTIVE')}
-                className="border-border bg-card hover:bg-accent flex items-center gap-2 rounded-full border px-4 py-2 text-sm font-medium text-gray-700 transition-colors dark:text-gray-200"
+                className="rounded-full px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-200"
               >
                 <Link size={16} />
                 Access Details
-              </button>
+              </Button>
             )}
             {canManageAgent && (
-              <button
+              <Button
+                type="button"
+                variant="destructive-outline"
                 onClick={() => setDeleteConfirmation('ACTIVE')}
                 disabled={isDeletingAgent}
-                className="bg-card flex items-center gap-2 rounded-full border border-red-200 px-4 py-2 text-sm font-medium text-red-600 transition-colors hover:bg-red-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-red-900/30 dark:text-red-400 dark:hover:bg-red-900/10"
+                className="bg-card rounded-full border-red-200 px-4 py-2 text-sm font-medium text-red-600 hover:bg-red-50 hover:text-red-600 dark:border-red-900/30 dark:text-red-400 dark:hover:bg-red-900/10 dark:hover:text-red-400"
               >
                 <Trash2 size={16} />
                 {isDeletingAgent ? 'Deleting...' : 'Delete'}
-              </button>
+              </Button>
             )}
-            <button
+            <Button
+              type="button"
+              variant="outline"
               onClick={() => {
                 const validationErrors = validateWorkflow();
                 if (validationErrors.length > 0) {
@@ -1562,18 +1576,19 @@ function WorkflowBuilderInner() {
                 }
                 setShowPreview(true);
               }}
-              className="border-border bg-card hover:bg-accent flex items-center gap-2 rounded-full border px-4 py-2 text-sm font-medium text-gray-700 transition-colors dark:text-gray-200"
+              className="rounded-full px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-200"
             >
               <Play size={16} />
               Preview
-            </button>
-            <button
+            </Button>
+            <Button
+              type="button"
               onClick={handlePrimaryAction}
               disabled={isPrimaryActionDisabled}
-              className={`relative inline-flex items-center justify-center rounded-full px-6 py-2 text-sm font-medium shadow-sm transition-colors disabled:cursor-not-allowed ${
+              className={`relative rounded-full px-6 py-2 text-sm font-medium shadow-sm ${
                 canManageAgent && !hasSavableChanges
-                  ? 'dark:bg-accent bg-gray-200 text-gray-500 dark:text-gray-400'
-                  : 'bg-primary hover:bg-primary/90 text-white disabled:opacity-50'
+                  ? 'dark:bg-accent bg-gray-200 text-gray-500 hover:bg-gray-200 dark:text-gray-400'
+                  : 'text-white'
               }`}
             >
               <span
@@ -1586,7 +1601,7 @@ function WorkflowBuilderInner() {
               {showPrimaryActionSpinner ? (
                 <Loader2 size={16} className="absolute animate-spin" />
               ) : null}
-            </button>
+            </Button>
           </div>
         </div>
 
@@ -1611,12 +1626,15 @@ function WorkflowBuilderInner() {
                   ))}
                 </ul>
               </AlertDescription>
-              <button
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon-sm"
                 onClick={() => setPublishErrors([])}
-                className="absolute top-4 right-4 text-red-700 hover:text-red-900 dark:text-red-300 dark:hover:text-red-100"
+                className="absolute top-4 right-4 size-auto p-0 text-red-700 hover:bg-transparent hover:text-red-900 dark:text-red-300 dark:hover:bg-transparent dark:hover:text-red-100"
               >
                 <X size={16} />
-              </button>
+              </Button>
             </Alert>
           </div>
         )}
@@ -1633,7 +1651,7 @@ function WorkflowBuilderInner() {
                   draggable
                   onDragStart={(e) => handleNodeDragStart(e, 'agent')}
                 >
-                  <div className="text-primary group-hover:bg-primary flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-purple-100 transition-colors group-hover:text-white">
+                  <div className="text-primary group-hover:bg-primary flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-purple-100 transition-colors group-hover:text-white dark:bg-purple-900/40">
                     <Bot size={18} />
                   </div>
                   <span className="text-sm font-medium text-gray-700 dark:text-gray-200">
@@ -1645,7 +1663,7 @@ function WorkflowBuilderInner() {
                   draggable
                   onDragStart={(e) => handleNodeDragStart(e, 'end')}
                 >
-                  <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-green-100 text-green-600 transition-colors group-hover:bg-green-600 group-hover:text-white">
+                  <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-green-100 text-green-600 transition-colors group-hover:bg-green-600 group-hover:text-white dark:bg-green-900/40 dark:text-green-300">
                     <Flag size={18} />
                   </div>
                   <span className="text-sm font-medium text-gray-700 dark:text-gray-200">
@@ -1657,7 +1675,7 @@ function WorkflowBuilderInner() {
                   draggable
                   onDragStart={(e) => handleNodeDragStart(e, 'note')}
                 >
-                  <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-yellow-100 text-yellow-600 transition-colors group-hover:bg-yellow-500 group-hover:text-white">
+                  <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-yellow-100 text-yellow-600 transition-colors group-hover:bg-yellow-500 group-hover:text-white dark:bg-yellow-900/40 dark:text-yellow-300">
                     <StickyNote size={18} />
                   </div>
                   <span className="text-sm font-medium text-gray-700 dark:text-gray-200">
@@ -1677,14 +1695,14 @@ function WorkflowBuilderInner() {
                   draggable
                   onDragStart={(e) => handleNodeDragStart(e, 'state')}
                 >
-                  <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-blue-100 text-blue-600 transition-colors group-hover:bg-blue-600 group-hover:text-white">
+                  <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-blue-100 text-blue-600 transition-colors group-hover:bg-blue-600 group-hover:text-white dark:bg-blue-900/40 dark:text-blue-300">
                     <Database size={18} />
                   </div>
                   <div className="flex flex-col">
                     <span className="text-foreground text-sm font-medium">
                       Set State
                     </span>
-                    <span className="text-muted-foreground text-[10px]">
+                    <span className="text-muted-foreground text-xs">
                       Modify workflow variables
                     </span>
                   </div>
@@ -1694,14 +1712,14 @@ function WorkflowBuilderInner() {
                   draggable
                   onDragStart={(e) => handleNodeDragStart(e, 'condition')}
                 >
-                  <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-orange-100 text-orange-600 transition-colors group-hover:bg-orange-600 group-hover:text-white">
+                  <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-orange-100 text-orange-600 transition-colors group-hover:bg-orange-600 group-hover:text-white dark:bg-orange-900/40 dark:text-orange-300">
                     <GitBranch size={18} />
                   </div>
                   <div className="flex flex-col">
                     <span className="text-foreground text-sm font-medium">
                       If / Else
                     </span>
-                    <span className="text-muted-foreground text-[10px]">
+                    <span className="text-muted-foreground text-xs">
                       Conditional branching
                     </span>
                   </div>
@@ -1738,7 +1756,7 @@ function WorkflowBuilderInner() {
                   className="absolute inset-0 z-10"
                   onClick={handlePanelBackdropClick}
                 />
-                <div className="border-border bg-card absolute top-4 right-4 z-20 w-96 rounded-2xl border shadow-[0px_4px_40px_-3px_#0000001A]">
+                <div className="border-border bg-card shadow-modal absolute top-4 right-4 z-20 w-96 rounded-2xl border">
                   <div className="border-border flex items-center justify-between border-b p-4">
                     <h3 className="font-semibold text-gray-900 dark:text-white">
                       {selectedNode.type === 'start' && 'Start Node'}
@@ -1748,12 +1766,15 @@ function WorkflowBuilderInner() {
                       {selectedNode.type === 'state' && 'Set global variables'}
                       {selectedNode.type === 'condition' && 'If / Else'}
                     </h3>
-                    <button
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="icon-sm"
                       onClick={() => setShowNodeConfig(false)}
-                      className="text-gray-400 transition-colors hover:text-gray-600 dark:hover:text-gray-200"
+                      className="size-auto p-0 text-gray-400 hover:bg-transparent hover:text-gray-600 dark:hover:bg-transparent dark:hover:text-gray-200 [&_svg:not([class*='size-'])]:size-5"
                     >
                       <X size={20} />
-                    </button>
+                    </Button>
                   </div>
 
                   <div className="max-h-[calc(100vh-200px)] overflow-y-auto p-4">
@@ -1774,7 +1795,7 @@ function WorkflowBuilderInner() {
                               <label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
                                 Title
                               </label>
-                              <input
+                              <Input
                                 type="text"
                                 value={
                                   selectedNode.data.title ||
@@ -1787,7 +1808,7 @@ function WorkflowBuilderInner() {
                                     label: e.target.value,
                                   })
                                 }
-                                className="border-border focus:ring-ring bg-card w-full rounded-xl border px-3 py-2 text-sm transition-all outline-none focus:ring-2 dark:text-white"
+                                className="bg-card h-auto rounded-xl px-3 py-2 text-sm shadow-none"
                                 placeholder="Enter node title"
                               />
                             </div>
@@ -1923,7 +1944,7 @@ function WorkflowBuilderInner() {
                                         },
                                       })
                                     }
-                                    className="border-border focus:ring-ring bg-card w-full rounded-xl border px-3 py-2 text-sm transition-all outline-none focus:ring-2 dark:text-white"
+                                    className="border-border focus-visible:ring-ring/50 focus-visible:border-ring bg-card w-full rounded-xl border px-3 py-2 text-sm transition-all outline-none focus-visible:ring-2 dark:text-white"
                                     rows={3}
                                     placeholder="System prompt for the agent"
                                   />
@@ -1951,7 +1972,7 @@ function WorkflowBuilderInner() {
                                   <label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
                                     Output Variable
                                   </label>
-                                  <input
+                                  <Input
                                     type="text"
                                     value={
                                       selectedNode.data.config
@@ -1966,7 +1987,7 @@ function WorkflowBuilderInner() {
                                         },
                                       });
                                     }}
-                                    className="border-border focus:ring-ring bg-card w-full rounded-xl border px-3 py-2 text-sm transition-all outline-none focus:ring-2 dark:text-white"
+                                    className="bg-card h-auto rounded-xl px-3 py-2 text-sm shadow-none"
                                     placeholder="Variable name for output"
                                   />
                                 </div>
@@ -2059,7 +2080,7 @@ function WorkflowBuilderInner() {
                                         e.target.value,
                                       )
                                     }
-                                    className="border-border focus:ring-ring bg-card w-full rounded-xl border px-3 py-2 font-mono text-xs transition-all outline-none focus:ring-2 dark:text-white"
+                                    className="border-border focus-visible:ring-ring/50 focus-visible:border-ring bg-card w-full rounded-xl border px-3 py-2 font-mono text-xs transition-all outline-none focus-visible:ring-2 dark:text-white"
                                     rows={8}
                                     placeholder={`{
   "type": "object",
@@ -2099,7 +2120,7 @@ function WorkflowBuilderInner() {
                                       content: e.target.value,
                                     })
                                   }
-                                  className="border-border focus:ring-ring bg-card w-full rounded-xl border px-3 py-2 text-sm transition-all outline-none focus:ring-2 dark:text-white"
+                                  className="border-border focus-visible:ring-ring/50 focus-visible:border-ring bg-card w-full rounded-xl border px-3 py-2 text-sm transition-all outline-none focus-visible:ring-2 dark:text-white"
                                   rows={4}
                                   placeholder="Enter note content"
                                 />
@@ -2134,7 +2155,10 @@ function WorkflowBuilderInner() {
                                           selectedNode.data.config
                                             ?.operations || []
                                         ).length > 1 && (
-                                          <button
+                                          <Button
+                                            type="button"
+                                            variant="ghost"
+                                            size="icon-sm"
                                             onClick={() => {
                                               const ops = [
                                                 ...(selectedNode.data.config
@@ -2149,10 +2173,10 @@ function WorkflowBuilderInner() {
                                                 },
                                               });
                                             }}
-                                            className="text-gray-400 transition-colors hover:text-red-500"
+                                            className="size-auto p-0 text-gray-400 hover:bg-transparent hover:text-red-500 dark:hover:bg-transparent"
                                           >
                                             <Trash2 size={14} />
-                                          </button>
+                                          </Button>
                                         )}
                                       </div>
                                       <textarea
@@ -2174,11 +2198,11 @@ function WorkflowBuilderInner() {
                                             },
                                           });
                                         }}
-                                        className="border-border focus:ring-ring bg-card dark:bg-accent mb-1 w-full rounded-xl border px-3 py-2 text-sm transition-all outline-none focus:ring-2 dark:text-white"
+                                        className="border-border focus-visible:ring-ring/50 focus-visible:border-ring bg-card dark:bg-accent mb-1 w-full rounded-xl border px-3 py-2 text-sm transition-all outline-none focus-visible:ring-2 dark:text-white"
                                         rows={2}
                                         placeholder="input.foo + 1"
                                       />
-                                      <p className="text-muted-foreground mb-3 text-[10px]">
+                                      <p className="text-muted-foreground mb-3 text-xs">
                                         Use Common Expression Language to create
                                         a custom expression.{' '}
                                         <a
@@ -2194,7 +2218,7 @@ function WorkflowBuilderInner() {
                                         <span className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
                                           To variable
                                         </span>
-                                        <input
+                                        <Input
                                           type="text"
                                           value={op.target_variable}
                                           onChange={(e) => {
@@ -2214,14 +2238,17 @@ function WorkflowBuilderInner() {
                                               },
                                             });
                                           }}
-                                          className="border-border focus:ring-ring bg-card dark:bg-accent w-full rounded-xl border px-3 py-2 text-sm transition-all outline-none focus:ring-2 dark:text-white"
+                                          className="bg-card dark:bg-accent h-auto rounded-xl px-3 py-2 text-sm shadow-none"
                                           placeholder="variable_name"
                                         />
                                       </div>
                                     </div>
                                   ),
                                 )}
-                                <button
+                                <Button
+                                  type="button"
+                                  variant="ghost"
+                                  size="sm"
                                   onClick={() => {
                                     const ops = [
                                       ...(selectedNode.data.config
@@ -2235,11 +2262,11 @@ function WorkflowBuilderInner() {
                                       },
                                     });
                                   }}
-                                  className="hover:bg-accent flex items-center gap-1 rounded-lg px-3 py-1.5 text-sm font-medium text-gray-600 transition-colors dark:text-gray-400"
+                                  className="h-auto gap-1 self-start rounded-lg px-3 py-1.5 text-sm font-medium text-gray-600 dark:text-gray-400"
                                 >
                                   <Plus size={14} />
                                   Add
-                                </button>
+                                </Button>
                               </>
                             )}
 
@@ -2249,7 +2276,9 @@ function WorkflowBuilderInner() {
                                   Create conditions to branch your workflow
                                 </p>
                                 <div className="border-border flex overflow-hidden rounded-lg border">
-                                  <button
+                                  <Button
+                                    type="button"
+                                    variant="ghost"
                                     onClick={() =>
                                       handleUpdateNodeData({
                                         config: {
@@ -2258,16 +2287,18 @@ function WorkflowBuilderInner() {
                                         },
                                       })
                                     }
-                                    className={`flex-1 px-3 py-1.5 text-xs font-medium transition-colors ${
+                                    className={`h-auto flex-1 rounded-none px-3 py-1.5 text-xs font-medium ${
                                       (selectedNode.data.config?.mode ||
                                         'simple') === 'simple'
-                                        ? 'bg-primary text-white'
-                                        : 'hover:bg-accent text-gray-600 dark:text-gray-400'
+                                        ? 'bg-primary hover:bg-primary text-white hover:text-white'
+                                        : 'text-gray-600 dark:text-gray-400'
                                     }`}
                                   >
                                     Simple
-                                  </button>
-                                  <button
+                                  </Button>
+                                  <Button
+                                    type="button"
+                                    variant="ghost"
                                     onClick={() =>
                                       handleUpdateNodeData({
                                         config: {
@@ -2276,15 +2307,15 @@ function WorkflowBuilderInner() {
                                         },
                                       })
                                     }
-                                    className={`flex-1 px-3 py-1.5 text-xs font-medium transition-colors ${
+                                    className={`h-auto flex-1 rounded-none px-3 py-1.5 text-xs font-medium ${
                                       selectedNode.data.config?.mode ===
                                       'advanced'
-                                        ? 'bg-primary text-white'
-                                        : 'hover:bg-accent text-gray-600 dark:text-gray-400'
+                                        ? 'bg-primary hover:bg-primary text-white hover:text-white'
+                                        : 'text-gray-600 dark:text-gray-400'
                                     }`}
                                   >
                                     Advanced
-                                  </button>
+                                  </Button>
                                 </div>
 
                                 {(selectedNode.data.config?.cases || []).map(
@@ -2299,7 +2330,10 @@ function WorkflowBuilderInner() {
                                         </span>
                                         {(selectedNode.data.config?.cases || [])
                                           .length > 1 && (
-                                          <button
+                                          <Button
+                                            type="button"
+                                            variant="ghost"
+                                            size="icon-sm"
                                             onClick={() => {
                                               const cases =
                                                 normalizeConditionCases([
@@ -2330,13 +2364,13 @@ function WorkflowBuilderInner() {
                                                 );
                                               }
                                             }}
-                                            className="text-gray-400 transition-colors hover:text-red-500"
+                                            className="size-auto p-0 text-gray-400 hover:bg-transparent hover:text-red-500 dark:hover:bg-transparent"
                                           >
                                             <Trash2 size={14} />
-                                          </button>
+                                          </Button>
                                         )}
                                       </div>
-                                      <input
+                                      <Input
                                         type="text"
                                         value={c.name || ''}
                                         onChange={(e) => {
@@ -2356,13 +2390,13 @@ function WorkflowBuilderInner() {
                                             },
                                           });
                                         }}
-                                        className="border-border focus:ring-ring bg-card dark:bg-accent mb-2 w-full rounded-xl border px-3 py-2 text-sm transition-all outline-none focus:ring-2 dark:text-white"
+                                        className="bg-card dark:bg-accent mb-2 h-auto rounded-xl px-3 py-2 text-sm shadow-none"
                                         placeholder="Case name (optional)"
                                       />
                                       {(selectedNode.data.config?.mode ||
                                         'simple') === 'simple' ? (
                                         <div className="flex items-center gap-2">
-                                          <input
+                                          <Input
                                             type="text"
                                             value={
                                               parseSimpleCel(c.expression)
@@ -2392,7 +2426,7 @@ function WorkflowBuilderInner() {
                                                 },
                                               });
                                             }}
-                                            className="border-border focus:ring-ring bg-card dark:bg-accent w-full rounded-xl border px-3 py-2 text-sm outline-none focus:ring-2 dark:text-white"
+                                            className="bg-card dark:bg-accent h-auto rounded-xl px-3 py-2 text-sm shadow-none"
                                             placeholder="Variable"
                                           />
                                           <Select
@@ -2455,7 +2489,7 @@ function WorkflowBuilderInner() {
                                               </SelectItem>
                                             </SelectContent>
                                           </Select>
-                                          <input
+                                          <Input
                                             type="text"
                                             value={
                                               parseSimpleCel(c.expression).value
@@ -2484,7 +2518,7 @@ function WorkflowBuilderInner() {
                                                 },
                                               });
                                             }}
-                                            className="border-border focus:ring-ring bg-card dark:bg-accent w-full rounded-xl border px-3 py-2 text-sm outline-none focus:ring-2 dark:text-white"
+                                            className="bg-card dark:bg-accent h-auto rounded-xl px-3 py-2 text-sm shadow-none"
                                             placeholder="Value"
                                           />
                                         </div>
@@ -2509,11 +2543,11 @@ function WorkflowBuilderInner() {
                                                 },
                                               });
                                             }}
-                                            className="border-border focus:ring-ring bg-card dark:bg-accent w-full rounded-xl border px-3 py-2 text-sm transition-all outline-none focus:ring-2 dark:text-white"
+                                            className="border-border focus-visible:ring-ring/50 focus-visible:border-ring bg-card dark:bg-accent w-full rounded-xl border px-3 py-2 text-sm transition-all outline-none focus-visible:ring-2 dark:text-white"
                                             rows={2}
                                             placeholder="Enter condition, e.g. input == 5"
                                           />
-                                          <p className="text-muted-foreground mt-1 text-[10px]">
+                                          <p className="text-muted-foreground mt-1 text-xs">
                                             Use Common Expression Language to
                                             create a custom expression.{' '}
                                             <a
@@ -2531,7 +2565,10 @@ function WorkflowBuilderInner() {
                                   ),
                                 )}
 
-                                <button
+                                <Button
+                                  type="button"
+                                  variant="ghost"
+                                  size="sm"
                                   onClick={() => {
                                     const cases = normalizeConditionCases([
                                       ...(selectedNode.data.config?.cases ||
@@ -2551,27 +2588,29 @@ function WorkflowBuilderInner() {
                                       },
                                     });
                                   }}
-                                  className="hover:bg-accent flex items-center gap-1 rounded-lg px-3 py-1.5 text-sm font-medium text-gray-600 transition-colors dark:text-gray-400"
+                                  className="h-auto gap-1 self-start rounded-lg px-3 py-1.5 text-sm font-medium text-gray-600 dark:text-gray-400"
                                 >
                                   <Plus size={14} />
                                   Add
-                                </button>
+                                </Button>
                               </>
                             )}
                           </>
                         )}
                     </div>
 
-                    <button
+                    <Button
+                      type="button"
+                      variant="destructive-outline"
                       onClick={handleDeleteNode}
                       disabled={selectedNode?.type === 'start'}
-                      className="flex w-full items-center justify-center gap-2 rounded-full border border-red-200 px-4 py-2 text-sm font-medium text-red-600 transition-colors hover:bg-red-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-red-900/30 dark:text-red-400 dark:hover:bg-red-900/10"
+                      className="w-full rounded-full border-red-200 px-4 py-2 text-sm font-medium text-red-600 hover:bg-red-50 hover:text-red-600 dark:border-red-900/30 dark:text-red-400 dark:hover:bg-red-900/10 dark:hover:text-red-400"
                     >
                       <Trash2 size={16} />
                       {selectedNode?.type === 'start'
                         ? 'Cannot Delete Start Node'
                         : 'Delete Node'}
-                    </button>
+                    </Button>
                   </div>
                 </div>
               </>
diff --git a/frontend/src/agents/workflow/WorkflowPreview.tsx b/frontend/src/agents/workflow/WorkflowPreview.tsx
index e9ad45ac..7caf9f32 100644
--- a/frontend/src/agents/workflow/WorkflowPreview.tsx
+++ b/frontend/src/agents/workflow/WorkflowPreview.tsx
@@ -15,6 +15,7 @@ import {
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
+import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 
 import ChevronDownIcon from '../../assets/chevron-down.svg';
@@ -98,7 +99,12 @@ function ExecutionDetails({
         <div className="flex h-[26px] w-[30px] items-center justify-center">
           <Workflow className="h-5 w-5 text-gray-600 dark:text-gray-400" />
         </div>
-        <button className="flex flex-row items-center gap-2" onClick={onToggle}>
+        <Button
+          type="button"
+          variant="ghost"
+          onClick={onToggle}
+          className="h-auto gap-2 px-0 py-0 hover:bg-transparent"
+        >
           <p className="text-base font-semibold">
             Execution Details
             <span className="ml-1.5 text-sm font-normal text-gray-500 dark:text-gray-400">
@@ -114,7 +120,7 @@ function ExecutionDetails({
               isOpen ? 'rotate-180' : '',
             )}
           />
-        </button>
+        </Button>
       </div>
       <div
         className={cn(
@@ -318,13 +324,15 @@ function WorkflowMiniMap({
             <div className="absolute top-12 left-4 h-3 w-0.5 bg-gray-200 dark:bg-gray-700" />
           )}
 
-          <button
+          <Button
+            type="button"
+            variant="outline"
             onClick={() => hasStepData(node.id) && onNodeClick?.(node.id)}
             disabled={!hasStepData(node.id)}
             className={cn(
-              'flex h-12 w-full items-center gap-2 rounded-lg border px-3 text-xs transition-all',
+              'h-12 w-full justify-start gap-2 px-3 text-xs disabled:opacity-100',
               getStatusColor(node.id),
-              hasStepData(node.id) && 'cursor-pointer hover:opacity-80',
+              hasStepData(node.id) && 'hover:opacity-80',
             )}
           >
             <div
@@ -340,7 +348,7 @@ function WorkflowMiniMap({
                 {getNodeDisplayName(node)}
               </div>
               {getNodeSubtitle(node) && (
-                <div className="truncate text-[10px] text-gray-500 dark:text-gray-400">
+                <div className="truncate text-xs text-gray-500 dark:text-gray-400">
                   {getNodeSubtitle(node)}
                 </div>
               )}
@@ -356,7 +364,7 @@ function WorkflowMiniMap({
                 <XCircle className="h-3 w-3 text-red-500" />
               )}
             </div>
-          </button>
+          </Button>
         </div>
       ))}
     </div>
diff --git a/frontend/src/agents/workflow/components/PromptTextArea.tsx b/frontend/src/agents/workflow/components/PromptTextArea.tsx
index 07a772fa..b53383f4 100644
--- a/frontend/src/agents/workflow/components/PromptTextArea.tsx
+++ b/frontend/src/agents/workflow/components/PromptTextArea.tsx
@@ -2,6 +2,8 @@ import { Braces, Plus, Search } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Edge, Node } from 'reactflow';
 
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
 import {
   Popover,
   PopoverContent,
@@ -224,12 +226,12 @@ function VariableListWithSearch({
     <div className="flex w-full flex-col overflow-hidden">
       <div className="border-border flex items-center gap-2 border-b px-3 py-2">
         <Search className="text-muted-foreground h-3.5 w-3.5 shrink-0" />
-        <input
+        <Input
           type="text"
           value={search}
           onChange={(e) => setSearch(e.target.value)}
           placeholder="Search variables..."
-          className="placeholder:text-muted-foreground w-full bg-transparent text-sm text-gray-800 outline-none dark:text-gray-200"
+          className="h-auto rounded-none border-0 px-0 py-0 text-sm text-gray-800 shadow-none focus-visible:ring-0 md:text-sm dark:border-0 dark:text-gray-200"
         />
       </div>
 
@@ -241,24 +243,26 @@ function VariableListWithSearch({
         ) : (
           Array.from(grouped.entries()).map(([section, vars]) => (
             <div key={section}>
-              <div className="text-muted-foreground truncate px-3 pt-2.5 pb-1 text-[10px] font-semibold tracking-wider uppercase">
+              <div className="text-muted-foreground truncate px-3 pt-2.5 pb-1 text-xs font-semibold tracking-wider uppercase">
                 {section}
               </div>
               {vars.map((v) => (
-                <button
+                <Button
                   key={`${section}-${v.templatePath}`}
+                  type="button"
+                  variant="ghost"
                   onMouseDown={(e) => {
                     e.preventDefault();
                     e.stopPropagation();
                     onSelect(v.templatePath);
                   }}
-                  className="hover:bg-accent flex w-full cursor-pointer items-center gap-2 px-3 py-1.5 text-left text-sm transition-colors"
+                  className="h-auto w-full justify-start gap-2 rounded-none px-3 py-1.5 text-left text-sm font-normal"
                 >
                   <Braces className="text-primary h-3.5 w-3.5 shrink-0" />
                   <span className="truncate font-medium text-gray-800 dark:text-gray-200">
                     {v.label}
                   </span>
-                </button>
+                </Button>
               ))}
             </div>
           ))
@@ -448,7 +452,7 @@ export default function PromptTextArea({
               overlayRef.current.scrollTop = textareaRef.current.scrollTop;
             }
           }}
-          className="relative w-full rounded-xl bg-transparent px-3 pt-2 pb-8 text-sm caret-black outline-none dark:caret-white"
+          className="focus-visible:ring-ring/50 focus-visible:border-ring relative w-full rounded-xl bg-transparent px-3 pt-2 pb-8 text-sm caret-black outline-none focus-visible:ring-[3px] dark:caret-white"
           style={{
             color: 'transparent',
             WebkitTextFillColor: 'transparent',
@@ -461,13 +465,14 @@ export default function PromptTextArea({
         <div className="absolute right-4 bottom-1.5 z-10">
           <Popover open={contextOpen} onOpenChange={setContextOpen}>
             <PopoverTrigger asChild>
-              <button
+              <Button
                 type="button"
-                className="text-primary hover:bg-primary/10 flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium transition-colors"
+                variant="ghost"
+                className="text-primary hover:bg-primary/10 h-auto gap-1 px-2 py-1 text-xs font-medium"
               >
                 <Plus className="h-3 w-3" />
                 Add context
-              </button>
+              </Button>
             </PopoverTrigger>
             <PopoverContent
               align="end"
diff --git a/frontend/src/agents/workflow/nodes/ConditionNode.tsx b/frontend/src/agents/workflow/nodes/ConditionNode.tsx
index 0c833f8f..e49f33e7 100644
--- a/frontend/src/agents/workflow/nodes/ConditionNode.tsx
+++ b/frontend/src/agents/workflow/nodes/ConditionNode.tsx
@@ -61,7 +61,7 @@ const ConditionNode = ({ data, selected }: NodeProps<ConditionNodeData>) => {
           >
             {title}
           </div>
-          <div className="text-[10px] text-gray-500 uppercase">
+          <div className="text-xs text-gray-500 uppercase">
             {data.config?.mode || 'simple'}
           </div>
         </div>
diff --git a/frontend/src/agents/workflow/nodes/SetStateNode.tsx b/frontend/src/agents/workflow/nodes/SetStateNode.tsx
index 6555805d..e9514a92 100644
--- a/frontend/src/agents/workflow/nodes/SetStateNode.tsx
+++ b/frontend/src/agents/workflow/nodes/SetStateNode.tsx
@@ -31,7 +31,7 @@ const SetStateNode = ({ data, selected }: NodeProps<SetStateNodeData>) => {
       <div className="flex flex-col gap-1">
         {operations.length > 0 ? (
           <div
-            className="truncate text-[10px] text-gray-500"
+            className="truncate text-xs text-gray-500"
             title={`${operations.length} operation(s)`}
           >
             {operations.length} variable{operations.length !== 1 ? 's' : ''}
@@ -39,7 +39,7 @@ const SetStateNode = ({ data, selected }: NodeProps<SetStateNodeData>) => {
         ) : hasLegacy ? (
           <>
             <div
-              className="truncate text-[10px] text-gray-500 uppercase"
+              className="truncate text-xs text-gray-500 uppercase"
               title={`Variable: ${data.variable}`}
             >
               {data.variable}
diff --git a/frontend/src/agents/workflow/nodes/index.tsx b/frontend/src/agents/workflow/nodes/index.tsx
index cdbfb37c..7229fb17 100644
--- a/frontend/src/agents/workflow/nodes/index.tsx
+++ b/frontend/src/agents/workflow/nodes/index.tsx
@@ -69,7 +69,7 @@ export const AgentNode = memo(function AgentNode({
       <div className="flex flex-col gap-1">
         {config.agent_type && (
           <div
-            className="truncate text-[10px] text-gray-500 uppercase"
+            className="truncate text-xs text-gray-500 uppercase"
             title={config.agent_type}
           >
             {config.agent_type}
diff --git a/frontend/src/assets/Loading.svg b/frontend/src/assets/Loading.svg
deleted file mode 100644
index 84a604f9..00000000
--- a/frontend/src/assets/Loading.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9 3.66667V1M12.7778 5.22222L14.6889 3.31111M14.3333 9H17M12.7778 12.7778L14.6889 14.6889M9 14.3333V17M5.22222 12.7778L3.31111 14.6889M3.66667 9H1M5.22222 5.22222L3.31111 3.31111" stroke="#949494" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/frontend/src/assets/clock-purple.svg b/frontend/src/assets/clock-purple.svg
deleted file mode 100644
index 4291dbe5..00000000
--- a/frontend/src/assets/clock-purple.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 16.6944 7.30558 20.5 12 20.5C16.6944 20.5 20.5 16.6944 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5ZM12 5C15.866 5 19 8.134 19 12C19 15.866 15.866 19 12 19C8.134 19 5 15.866 5 12C5 8.134 8.134 5 12 5ZM11.25 7C11.0511 7 10.8603 7.07902 10.7197 7.21967C10.579 7.36032 10.5 7.55109 10.5 7.75V12C10.5 12.1989 10.579 12.3897 10.7197 12.5303L13.4697 15.2803C13.6103 15.421 13.8011 15.5 14 15.5C14.1989 15.5 14.3897 15.421 14.5303 15.2803C14.671 15.1397 14.75 14.9489 14.75 14.75C14.75 14.5511 14.671 14.3603 14.5303 14.2197L12 11.6893V7.75C12 7.55109 11.921 7.36032 11.7803 7.21967C11.6397 7.07902 11.4489 7 11.25 7Z" fill="#7D54D1" stroke="#7D54D1" stroke-width="0.3"/>
-</svg>
diff --git a/frontend/src/assets/clock-white.svg b/frontend/src/assets/clock-white.svg
deleted file mode 100644
index 85b63a74..00000000
--- a/frontend/src/assets/clock-white.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 16.6944 7.30558 20.5 12 20.5C16.6944 20.5 20.5 16.6944 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5ZM12 5C15.866 5 19 8.134 19 12C19 15.866 15.866 19 12 19C8.134 19 5 15.866 5 12C5 8.134 8.134 5 12 5ZM11.25 7C11.0511 7 10.8603 7.07902 10.7197 7.21967C10.579 7.36032 10.5 7.55109 10.5 7.75V12C10.5 12.1989 10.579 12.3897 10.7197 12.5303L13.4697 15.2803C13.6103 15.421 13.8011 15.5 14 15.5C14.1989 15.5 14.3897 15.421 14.5303 15.2803C14.671 15.1397 14.75 14.9489 14.75 14.75C14.75 14.5511 14.671 14.3603 14.5303 14.2197L12 11.6893V7.75C12 7.55109 11.921 7.36032 11.7803 7.21967C11.6397 7.07902 11.4489 7 11.25 7Z" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="0.3"/>
-</svg>
diff --git a/frontend/src/assets/exit.svg b/frontend/src/assets/exit.svg
deleted file mode 100644
index e27c3ee3..00000000
--- a/frontend/src/assets/exit.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg width="800" height="800" viewBox="0 0 800 800" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_202_7)">
-<path d="M750 50L50 750M750 750L50 50" stroke="black" stroke-opacity="0.54" stroke-width="100" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-<defs>
-<clipPath id="clip0_202_7">
-<rect width="800" height="800" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/frontend/src/assets/monitoring-purple.svg b/frontend/src/assets/monitoring-purple.svg
deleted file mode 100644
index ef849521..00000000
--- a/frontend/src/assets/monitoring-purple.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.50195 17.1494C3.68072 17.1503 3.83797 17.2119 3.96289 17.3359C4.08842 17.4607 4.15029 17.6188 4.15039 17.7988V18.5869C4.15039 18.7666 4.08775 18.9248 3.96191 19.0498C3.83677 19.1741 3.68038 19.2364 3.50098 19.2373H3.5C3.36498 19.2373 3.24235 19.2024 3.13672 19.1318L3.03613 19.0488C2.91173 18.9234 2.84961 18.7657 2.84961 18.5869V17.7988C2.84971 17.6193 2.91265 17.4614 3.03809 17.3359C3.16377 17.2104 3.32208 17.1486 3.50195 17.1494ZM7.50195 12.6494C7.68072 12.6503 7.83797 12.7119 7.96289 12.8359C8.08842 12.9607 8.15029 13.1188 8.15039 13.2988V18.5869C8.15039 18.7666 8.08775 18.9248 7.96191 19.0498C7.83656 19.1743 7.67907 19.2364 7.5 19.2373H7.49902C7.31988 19.2373 7.16245 19.175 7.03711 19.0498C6.91161 18.9243 6.84884 18.7663 6.84961 18.5869V13.2988C6.84971 13.1193 6.91265 12.9614 7.03809 12.8359C7.16377 12.7104 7.32208 12.6486 7.50195 12.6494ZM11.502 14.6494C11.6807 14.6503 11.838 14.7119 11.9629 14.8359C12.0884 14.9607 12.1503 15.1188 12.1504 15.2988V18.5869C12.1504 18.7666 12.0878 18.9248 11.9619 19.0498C11.8366 19.1743 11.6791 19.2364 11.5 19.2373H11.499C11.3193 19.2373 11.1611 19.1747 11.0361 19.0488C10.9117 18.9234 10.8496 18.7657 10.8496 18.5869V15.2988C10.8497 15.1193 10.9127 14.9614 11.0381 14.8359C11.1638 14.7104 11.3221 14.6486 11.502 14.6494ZM15.502 13.1494C15.6807 13.1503 15.838 13.2119 15.9629 13.3359C16.0884 13.4607 16.1503 13.6188 16.1504 13.7988V18.5869C16.1504 18.7666 16.0878 18.9248 15.9619 19.0498C15.8366 19.1743 15.6791 19.2364 15.5 19.2373H15.499C15.3199 19.2373 15.1625 19.175 15.0371 19.0498C14.9116 18.9243 14.8488 18.7663 14.8496 18.5869V13.7988C14.8497 13.6193 14.9127 13.4614 15.0381 13.3359C15.1638 13.2104 15.3221 13.1486 15.502 13.1494ZM19.502 9.14941C19.6807 9.15031 19.838 9.2119 19.9629 9.33594C20.0884 9.46066 20.1503 9.61875 20.1504 9.79883V18.5869C20.1504 18.7666 20.0878 18.9248 19.9619 19.0498C19.8366 19.1743 19.6791 19.2364 19.5 19.2373H19.499C19.3199 19.2373 19.1625 19.175 19.0371 19.0498C18.9116 18.9243 18.8488 18.7663 18.8496 18.5869V9.79883C18.8497 9.61927 18.9127 9.46137 19.0381 9.33594C19.1638 9.21036 19.3221 9.14857 19.502 9.14941ZM19.499 3.35156C19.6838 3.34567 19.8427 3.41642 19.9678 3.55469H19.9688C20.0596 3.64961 20.1156 3.761 20.1357 3.88477L20.1436 4.0127C20.1385 4.18363 20.079 4.33405 19.9609 4.45312H19.96L14.7422 9.6709C14.5779 9.83222 14.3846 9.95688 14.1641 10.0439C13.9451 10.1304 13.7235 10.1738 13.5 10.1738C13.3327 10.1738 13.1678 10.1497 13.0059 10.1006L12.8457 10.043C12.6325 9.95623 12.4382 9.83371 12.2637 9.67578L12.2578 9.6709L12.3643 9.56445L12.2578 9.66992L9.83594 7.24902C9.75169 7.16486 9.64381 7.12012 9.5 7.12012C9.39199 7.12012 9.30408 7.14514 9.23145 7.19336L9.16406 7.24902L3.95996 12.4531C3.83505 12.578 3.67971 12.6445 3.50195 12.6504H3.50098C3.31619 12.6556 3.1575 12.583 3.0332 12.4443V12.4453C2.91072 12.3194 2.85137 12.1633 2.85645 11.9873L2.87012 11.8623C2.89478 11.7425 2.95119 11.6357 3.04004 11.5469L8.25879 6.32812L8.39453 6.20703C8.53435 6.09371 8.68597 6.00535 8.84961 5.94434L9.00977 5.89258C9.17067 5.84784 9.33418 5.8252 9.5 5.8252C9.72114 5.8252 9.94159 5.86551 10.1602 5.94434C10.3843 6.02524 10.5789 6.15388 10.7422 6.3291L13.1641 8.75L13.2314 8.80566C13.3041 8.854 13.3919 8.87891 13.5 8.87891C13.6439 8.87891 13.7517 8.83427 13.8359 8.75L19.04 3.54688C19.165 3.42139 19.321 3.35565 19.499 3.35059V3.35156Z" fill="#7D54D1" stroke="#7D54D1" stroke-width="0.3"/>
-</svg>
diff --git a/frontend/src/assets/monitoring-white.svg b/frontend/src/assets/monitoring-white.svg
deleted file mode 100644
index b015eeee..00000000
--- a/frontend/src/assets/monitoring-white.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.50195 17.1494C3.68072 17.1503 3.83797 17.2119 3.96289 17.3359C4.08842 17.4607 4.15029 17.6188 4.15039 17.7988V18.5869C4.15039 18.7666 4.08775 18.9248 3.96191 19.0498C3.83677 19.1741 3.68038 19.2364 3.50098 19.2373H3.5C3.36498 19.2373 3.24235 19.2024 3.13672 19.1318L3.03613 19.0488C2.91173 18.9234 2.84961 18.7657 2.84961 18.5869V17.7988C2.84971 17.6193 2.91265 17.4614 3.03809 17.3359C3.16377 17.2104 3.32208 17.1486 3.50195 17.1494ZM7.50195 12.6494C7.68072 12.6503 7.83797 12.7119 7.96289 12.8359C8.08842 12.9607 8.15029 13.1188 8.15039 13.2988V18.5869C8.15039 18.7666 8.08775 18.9248 7.96191 19.0498C7.83656 19.1743 7.67907 19.2364 7.5 19.2373H7.49902C7.31988 19.2373 7.16245 19.175 7.03711 19.0498C6.91161 18.9243 6.84884 18.7663 6.84961 18.5869V13.2988C6.84971 13.1193 6.91265 12.9614 7.03809 12.8359C7.16377 12.7104 7.32208 12.6486 7.50195 12.6494ZM11.502 14.6494C11.6807 14.6503 11.838 14.7119 11.9629 14.8359C12.0884 14.9607 12.1503 15.1188 12.1504 15.2988V18.5869C12.1504 18.7666 12.0878 18.9248 11.9619 19.0498C11.8366 19.1743 11.6791 19.2364 11.5 19.2373H11.499C11.3193 19.2373 11.1611 19.1747 11.0361 19.0488C10.9117 18.9234 10.8496 18.7657 10.8496 18.5869V15.2988C10.8497 15.1193 10.9127 14.9614 11.0381 14.8359C11.1638 14.7104 11.3221 14.6486 11.502 14.6494ZM15.502 13.1494C15.6807 13.1503 15.838 13.2119 15.9629 13.3359C16.0884 13.4607 16.1503 13.6188 16.1504 13.7988V18.5869C16.1504 18.7666 16.0878 18.9248 15.9619 19.0498C15.8366 19.1743 15.6791 19.2364 15.5 19.2373H15.499C15.3199 19.2373 15.1625 19.175 15.0371 19.0498C14.9116 18.9243 14.8488 18.7663 14.8496 18.5869V13.7988C14.8497 13.6193 14.9127 13.4614 15.0381 13.3359C15.1638 13.2104 15.3221 13.1486 15.502 13.1494ZM19.502 9.14941C19.6807 9.15031 19.838 9.2119 19.9629 9.33594C20.0884 9.46066 20.1503 9.61875 20.1504 9.79883V18.5869C20.1504 18.7666 20.0878 18.9248 19.9619 19.0498C19.8366 19.1743 19.6791 19.2364 19.5 19.2373H19.499C19.3199 19.2373 19.1625 19.175 19.0371 19.0498C18.9116 18.9243 18.8488 18.7663 18.8496 18.5869V9.79883C18.8497 9.61927 18.9127 9.46137 19.0381 9.33594C19.1638 9.21036 19.3221 9.14857 19.502 9.14941ZM19.499 3.35156C19.6838 3.34567 19.8427 3.41642 19.9678 3.55469H19.9688C20.0596 3.64961 20.1156 3.761 20.1357 3.88477L20.1436 4.0127C20.1385 4.18363 20.079 4.33405 19.9609 4.45312H19.96L14.7422 9.6709C14.5779 9.83222 14.3846 9.95688 14.1641 10.0439C13.9451 10.1304 13.7235 10.1738 13.5 10.1738C13.3327 10.1738 13.1678 10.1497 13.0059 10.1006L12.8457 10.043C12.6325 9.95623 12.4382 9.83371 12.2637 9.67578L12.2578 9.6709L12.3643 9.56445L12.2578 9.66992L9.83594 7.24902C9.75169 7.16486 9.64381 7.12012 9.5 7.12012C9.39199 7.12012 9.30408 7.14514 9.23145 7.19336L9.16406 7.24902L3.95996 12.4531C3.83505 12.578 3.67971 12.6445 3.50195 12.6504H3.50098C3.31619 12.6556 3.1575 12.583 3.0332 12.4443V12.4453C2.91072 12.3194 2.85137 12.1633 2.85645 11.9873L2.87012 11.8623C2.89478 11.7425 2.95119 11.6357 3.04004 11.5469L8.25879 6.32812L8.39453 6.20703C8.53435 6.09371 8.68597 6.00535 8.84961 5.94434L9.00977 5.89258C9.17067 5.84784 9.33418 5.8252 9.5 5.8252C9.72114 5.8252 9.94159 5.86551 10.1602 5.94434C10.3843 6.02524 10.5789 6.15388 10.7422 6.3291L13.1641 8.75L13.2314 8.80566C13.3041 8.854 13.3919 8.87891 13.5 8.87891C13.6439 8.87891 13.7517 8.83427 13.8359 8.75L19.04 3.54688C19.165 3.42139 19.321 3.35565 19.499 3.35059V3.35156Z" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="0.3"/>
-</svg>
diff --git a/frontend/src/assets/retry.svg b/frontend/src/assets/retry.svg
new file mode 100644
index 00000000..6a47b545
--- /dev/null
+++ b/frontend/src/assets/retry.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 383.748 383.748" fill="currentColor" stroke="currentColor" stroke-width="10">
+<path d="M62.772 95.042C90.904 54.899 137.496 30 187.343 30c83.743 0 151.874 68.13 151.874 151.874h30C369.217 81.588 287.629 0 187.343 0c-35.038 0-69.061 9.989-98.391 28.888a182.423 182.423 0 0 0-47.731 44.705L2.081 34.641v113.365h113.91L62.772 95.042zM381.667 235.742h-113.91l53.219 52.965c-28.132 40.142-74.724 65.042-124.571 65.042-83.744 0-151.874-68.13-151.874-151.874h-30c0 100.286 81.588 181.874 181.874 181.874 35.038 0 69.062-9.989 98.391-28.888a182.443 182.443 0 0 0 47.731-44.706l39.139 38.952V235.742z"/>
+</svg>
diff --git a/frontend/src/assets/send.svg b/frontend/src/assets/send.svg
index f31b69b8..314bb856 100644
--- a/frontend/src/assets/send.svg
+++ b/frontend/src/assets/send.svg
@@ -1,3 +1,3 @@
-<svg width="21" height="18" viewBox="0 0 21 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.00999999 18L21 9L0.00999999 0L0 7L15 9L0 11L0.00999999 18Z" fill="black" fill-opacity="0.54"/>
+<svg width="11" height="14" viewBox="0 0 11 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.292786 6.20676C0.105315 6.01923 -3.59956e-07 5.76492 -3.71547e-07 5.49976C-3.83138e-07 5.23459 0.105315 4.98028 0.292786 4.79276L4.79279 0.292756C4.98031 0.105284 5.23462 -3.07464e-05 5.49979 -3.0758e-05C5.76495 -3.07696e-05 6.01926 0.105284 6.20679 0.292756L10.7068 4.79276C10.8889 4.98136 10.9897 5.23396 10.9875 5.49616C10.9852 5.75835 10.88 6.00917 10.6946 6.19457C10.5092 6.37998 10.2584 6.48515 9.99619 6.48743C9.73399 6.48971 9.48139 6.38891 9.29279 6.20676L6.49979 3.49976L6.49979 12.9998C6.49979 13.265 6.39443 13.5193 6.20689 13.7069C6.01936 13.8944 5.765 13.9998 5.49979 13.9998C5.23457 13.9998 4.98022 13.8944 4.79268 13.7069C4.60514 13.5193 4.49979 13.265 4.49979 12.9998L4.49979 3.49976L1.70679 6.20676C1.51926 6.39423 1.26495 6.49954 0.999786 6.49954C0.734622 6.49954 0.480314 6.39423 0.292786 6.20676Z" fill="currentColor"/>
 </svg>
diff --git a/frontend/src/assets/spinner-dark.svg b/frontend/src/assets/spinner-dark.svg
deleted file mode 100644
index d2423d8f..00000000
--- a/frontend/src/assets/spinner-dark.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="black" d="M10.72,19.9a8,8,0,0,1-6.5-9.79A7.77,7.77,0,0,1,10.4,4.16a8,8,0,0,1,9.49,6.52A1.54,1.54,0,0,0,21.38,12h.13a1.37,1.37,0,0,0,1.38-1.54,11,11,0,1,0-12.7,12.39A1.54,1.54,0,0,0,12,21.34h0A1.47,1.47,0,0,0,10.72,19.9Z"><animateTransform attributeName="transform" dur="0.75s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></svg>
\ No newline at end of file
diff --git a/frontend/src/assets/spinner.svg b/frontend/src/assets/spinner.svg
deleted file mode 100644
index b7f1eaed..00000000
--- a/frontend/src/assets/spinner.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="white" d="M10.72,19.9a8,8,0,0,1-6.5-9.79A7.77,7.77,0,0,1,10.4,4.16a8,8,0,0,1,9.49,6.52A1.54,1.54,0,0,0,21.38,12h.13a1.37,1.37,0,0,0,1.38-1.54,11,11,0,1,0-12.7,12.39A1.54,1.54,0,0,0,12,21.34h0A1.47,1.47,0,0,0,10.72,19.9Z"><animateTransform attributeName="transform" dur="0.75s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></svg>
\ No newline at end of file
diff --git a/frontend/src/assets/white-trash.svg b/frontend/src/assets/white-trash.svg
deleted file mode 100644
index 11eb3eb2..00000000
--- a/frontend/src/assets/white-trash.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="13" height="16" viewBox="0 0 13 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1.66574 13.7747C1.66574 14.2168 1.84635 14.6407 2.16784 14.9533C2.48933 15.2658 2.92537 15.4414 3.38002 15.4414H10.2372C10.6918 15.4414 11.1279 15.2658 11.4493 14.9533C11.7708 14.6407 11.9515 14.2168 11.9515 13.7747V3.77474H1.66574V13.7747ZM3.38002 5.44141H10.2372V13.7747H3.38002V5.44141ZM9.80859 1.27474L8.95145 0.441406H4.66574L3.80859 1.27474H0.808594V2.94141H12.8086V1.27474H9.80859Z" fill="#ffffff"/>
-</svg>
diff --git a/frontend/src/components/Accordion.tsx b/frontend/src/components/Accordion.tsx
deleted file mode 100644
index bb0da630..00000000
--- a/frontend/src/components/Accordion.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import React, { useRef, useState } from 'react';
-
-import ChevronDown from '../assets/chevron-down.svg';
-
-type AccordionProps = {
-  title: string;
-  children: React.ReactNode;
-  className?: string;
-  titleClassName?: string;
-  contentClassName?: string;
-  open?: boolean;
-};
-
-export default function Accordion({
-  title,
-  children,
-  className = '',
-  titleClassName = '',
-  contentClassName = '',
-  open: initialOpen = false,
-}: AccordionProps) {
-  const contentRef = useRef<HTMLDivElement>(null);
-  const [isOpen, setIsOpen] = useState(initialOpen);
-
-  const accordionContentStyle = {
-    height: isOpen ? 'auto' : '0px',
-    transition: 'height 0.3s ease-in-out, opacity 0.3s ease-in-out',
-    overflow: 'hidden',
-  } as React.CSSProperties;
-
-  const toggleAccordion = () => {
-    setIsOpen(!isOpen);
-  };
-  return (
-    <div className={`overflow-hidden shadow-xs ${className}`}>
-      <button
-        className={`flex w-full items-center justify-between focus:outline-hidden ${titleClassName}`}
-        onClick={toggleAccordion}
-      >
-        <p className="wrap-break-word">{title}</p>
-        <img
-          src={ChevronDown}
-          className={`h-5 w-5 transform transition-transform duration-200 dark:invert ${
-            isOpen ? 'rotate-180' : ''
-          }`}
-          aria-hidden="true"
-        />
-      </button>
-
-      <div
-        ref={contentRef}
-        style={accordionContentStyle}
-        className={`px-4 ${contentClassName} ${isOpen ? 'pb-3' : 'pb-0'}`}
-      >
-        {children}
-      </div>
-    </div>
-  );
-}
diff --git a/frontend/src/components/ActionButtons.tsx b/frontend/src/components/ActionButtons.tsx
index cefa6578..687d12d2 100644
--- a/frontend/src/components/ActionButtons.tsx
+++ b/frontend/src/components/ActionButtons.tsx
@@ -11,6 +11,7 @@ import {
   setConversation,
   updateConversationId,
 } from '../conversation/conversationSlice';
+import { Button } from './ui/button';
 
 interface ActionButtonsProps {
   className?: string;
@@ -50,10 +51,13 @@ export default function ActionButtons({
     >
       <div className={`flex items-center gap-2 sm:gap-4 ${className}`}>
         {showNewChat && (
-          <button
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
             title={t('actionButtons.openNewChat')}
             onClick={newChat}
-            className="hover:bg-accent dark:hover:bg-accent flex items-center gap-1 rounded-full p-2 lg:hidden"
+            className="rounded-full lg:hidden"
           >
             <img
               className="filter dark:invert"
@@ -62,15 +66,18 @@ export default function ActionButtons({
               height={21}
               src={newChatIcon}
             />
-          </button>
+          </Button>
         )}
 
         {showShare && conversationId && (
           <>
-            <button
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
               title={t('actionButtons.share')}
               onClick={() => setShareModalState(true)}
-              className="hover:bg-accent dark:hover:bg-accent rounded-full p-2"
+              className="rounded-full"
             >
               <img
                 className="filter dark:invert"
@@ -79,7 +86,7 @@ export default function ActionButtons({
                 height={16}
                 src={ShareIcon}
               />
-            </button>
+            </Button>
             {isShareModalOpen && (
               <ShareConversationModal
                 close={() => setShareModalState(false)}
diff --git a/frontend/src/components/AgentImage.tsx b/frontend/src/components/AgentImage.tsx
deleted file mode 100644
index 28109b49..00000000
--- a/frontend/src/components/AgentImage.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { useState, useEffect } from 'react';
-import Robot from '../assets/robot.svg';
-
-type AgentImageProps = {
-  src?: string | null;
-  alt?: string;
-  className?: string;
-  fallbackSrc?: string;
-};
-
-export default function AgentImage({
-  src,
-  alt = 'agent',
-  className = '',
-  fallbackSrc = Robot,
-}: AgentImageProps) {
-  const [currentSrc, setCurrentSrc] = useState(
-    src && src.trim() !== '' ? src : fallbackSrc,
-  );
-
-  useEffect(() => {
-    const newSrc = src && src.trim() !== '' ? src : fallbackSrc;
-    if (newSrc !== currentSrc) {
-      setCurrentSrc(newSrc);
-    }
-  }, [src, fallbackSrc]);
-
-  return (
-    <img
-      src={currentSrc}
-      alt={alt}
-      className={className}
-      referrerPolicy="no-referrer"
-      crossOrigin="anonymous"
-      onError={() => {
-        if (currentSrc !== fallbackSrc) setCurrentSrc(fallbackSrc);
-      }}
-    />
-  );
-}
diff --git a/frontend/src/components/ArtifactSidebar.tsx b/frontend/src/components/ArtifactSidebar.tsx
index 3c79ab3c..718831ed 100644
--- a/frontend/src/components/ArtifactSidebar.tsx
+++ b/frontend/src/components/ArtifactSidebar.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { X } from 'lucide-react';
 import ReactMarkdown from 'react-markdown';
 import { useSelector } from 'react-redux';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
@@ -9,11 +10,12 @@ import {
 import remarkGfm from 'remark-gfm';
 
 import userService from '../api/services/userService';
-import Exit from '../assets/exit.svg';
 import { useDarkTheme } from '../hooks';
 import { selectToken } from '../preferences/preferenceSlice';
 import CopyButton from './CopyButton';
 import Spinner from './Spinner';
+import { Button } from './ui/button';
+import { Sheet, SheetContent } from './ui/sheet';
 
 type TodoItem = {
   todo_id: number;
@@ -179,8 +181,8 @@ function NoteView({ data }: { data: NoteArtifactData }) {
                 const language = match ? match[1] : '';
 
                 return match ? (
-                  <div className="group border-border relative my-2 overflow-hidden rounded-[14px] border">
-                    <div className="bg-platinum flex items-center justify-between px-2 py-1">
+                  <div className="group border-border relative my-2 overflow-hidden rounded-xl border">
+                    <div className="bg-muted flex items-center justify-between px-2 py-1">
                       <span className="text-foreground dark:text-foreground text-xs font-medium">
                         {language}
                       </span>
@@ -204,7 +206,7 @@ function NoteView({ data }: { data: NoteArtifactData }) {
                   </div>
                 ) : (
                   <code
-                    className="dark:bg-accent dark:text-foreground rounded-[6px] bg-gray-200 px-2 py-1 text-xs font-normal"
+                    className="dark:bg-accent dark:text-foreground rounded-md bg-gray-200 px-2 py-1 text-xs font-normal"
                     {...rest}
                   >
                     {children}
@@ -276,7 +278,6 @@ export default function ArtifactSidebar({
   conversationId,
   variant = 'overlay',
 }: ArtifactSidebarProps) {
-  const sidebarRef = React.useRef<HTMLDivElement>(null);
   const lastSuccessfulTodoArtifactIdRef = React.useRef<string | null>(null);
   const currentFetchIdRef = React.useRef<string | null>(null);
   const token = useSelector(selectToken);
@@ -385,22 +386,6 @@ export default function ArtifactSidebar({
       });
   }, [isOpen, effectiveArtifactId, token, toolName, conversationId]);
 
-  const handleClickOutside = (event: MouseEvent) => {
-    if (
-      sidebarRef.current &&
-      !sidebarRef.current.contains(event.target as Node)
-    ) {
-      onClose();
-    }
-  };
-
-  useEffect(() => {
-    if (variant === 'overlay' && isOpen) {
-      document.addEventListener('mousedown', handleClickOutside);
-    }
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, [isOpen, variant]);
-
   const renderContent = () => {
     if (loading) {
       return (
@@ -453,16 +438,16 @@ export default function ArtifactSidebar({
             <span className="text-sm font-medium text-gray-600 dark:text-gray-300">
               {title}
             </span>
-            <button
-              className="hover:bg-accent dark:hover:bg-accent rounded-full p-1"
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon-sm"
+              className="rounded-full"
               onClick={onClose}
+              aria-label="Close"
             >
-              <img
-                className="h-3 w-3 filter dark:invert"
-                src={Exit}
-                alt="Close"
-              />
-            </button>
+              <X className="h-3 w-3" />
+            </Button>
           </div>
           <div className="flex-1 overflow-hidden p-4">{renderContent()}</div>
         </div>
@@ -471,29 +456,34 @@ export default function ArtifactSidebar({
   }
 
   return (
-    <div ref={sidebarRef} className="h-vh relative">
-      <div
-        className={`dark:bg-card bg-card fixed top-0 right-0 z-50 flex h-full w-80 transform flex-col shadow-xl transition-all duration-300 sm:w-96 ${
-          isOpen ? 'translate-x-0' : 'translate-x-full'
-        } border-l border-[#9ca3af]/10`}
+    <Sheet
+      open={isOpen}
+      onOpenChange={(open) => {
+        if (!open) onClose();
+      }}
+    >
+      <SheetContent
+        side="right"
+        showCloseButton={false}
+        className="dark:bg-card bg-card flex h-full w-80 flex-col gap-0 border-l border-[#9ca3af]/10 p-0 sm:w-96 sm:max-w-none"
       >
         <div className="flex w-full items-center justify-between border-b border-gray-200 px-4 py-3 dark:border-gray-700">
           <span className="text-sm font-medium text-gray-600 dark:text-gray-300">
             {title}
           </span>
-          <button
-            className="hover:bg-accent rounded-full p-2"
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            className="rounded-full"
             onClick={onClose}
+            aria-label="Close"
           >
-            <img
-              className="h-4 w-4 filter dark:invert"
-              src={Exit}
-              alt="Close"
-            />
-          </button>
+            <X className="h-4 w-4" />
+          </Button>
         </div>
         <div className="flex-1 overflow-hidden p-4">{renderContent()}</div>
-      </div>
-    </div>
+      </SheetContent>
+    </Sheet>
   );
 }
diff --git a/frontend/src/components/Avatar.tsx b/frontend/src/components/Avatar.tsx
deleted file mode 100644
index f8c58d1f..00000000
--- a/frontend/src/components/Avatar.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { ReactNode } from 'react';
-
-export default function Avatar({
-  avatar,
-  size,
-  className,
-}: {
-  avatar: ReactNode;
-  size?: 'SMALL' | 'MEDIUM' | 'LARGE';
-  className: string;
-}) {
-  return <div className={`${className} shrink-0`}>{avatar}</div>;
-}
diff --git a/frontend/src/components/Chunks.tsx b/frontend/src/components/Chunks.tsx
index 6f9adc86..9f969def 100644
--- a/frontend/src/components/Chunks.tsx
+++ b/frontend/src/components/Chunks.tsx
@@ -22,6 +22,8 @@ import { selectToken } from '../preferences/preferenceSlice';
 import { ChunkType } from '../settings/types';
 import Pagination from './DocumentPagination';
 import SkeletonLoader from './SkeletonLoader';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
 
 interface LineNumberedTextareaProps {
   value: string;
@@ -76,7 +78,7 @@ const LineNumberedTextarea: React.FC<LineNumberedTextareaProps> = ({
         ))}
       </div>
       <textarea
-        className={`text-foreground w-full resize-none overflow-hidden border-none bg-transparent pl-8 font-['Inter'] text-[13.68px] leading-[19.93px] outline-none lg:pl-12 dark:text-white ${isMobile ? 'min-h-[calc(100vh-200px)]' : 'min-h-[calc(100vh-300px)]'} ${!editable ? 'select-none' : ''}`}
+        className={`text-foreground focus-visible:ring-ring/50 focus-visible:border-ring w-full resize-none overflow-hidden border-none bg-transparent pl-8 font-['Inter'] text-[13.68px] leading-[19.93px] outline-none focus-visible:ring-[3px] lg:pl-12 dark:text-white ${isMobile ? 'min-h-[calc(100vh-200px)]' : 'min-h-[calc(100vh-300px)]'} ${!editable ? 'select-none' : ''}`}
         value={value}
         onChange={editable ? handleChange : undefined}
         onDoubleClick={onDoubleClick}
@@ -300,8 +302,11 @@ const Chunks: React.FC<ChunksProps> = ({
     return (
       <div className="mb-0 flex min-h-[38px] flex-col gap-2 text-base sm:flex-row sm:items-center sm:justify-between">
         <div className="flex w-full items-center sm:w-auto">
-          <button
-            className="mr-3 flex h-[29px] w-[29px] items-center justify-center rounded-full border p-2 text-sm font-medium text-gray-400 transition-all duration-200 dark:border-0 dark:text-gray-500"
+          <Button
+            type="button"
+            variant="outline"
+            size="icon-sm"
+            className="mr-3 h-[29px] w-[29px] rounded-full p-2 text-gray-400 dark:border-0 dark:text-gray-500"
             onClick={
               editingChunk
                 ? () => setEditingChunk(null)
@@ -311,11 +316,11 @@ const Chunks: React.FC<ChunksProps> = ({
             }
           >
             <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
-          </button>
+          </Button>
 
           <div className="flex flex-wrap items-center">
             {/* Removed the directory icon */}
-            <span className="font-semibold wrap-break-word text-[#7D54D1]">
+            <span className="text-primary font-semibold wrap-break-word">
               {documentName}
             </span>
 
@@ -327,7 +332,7 @@ const Chunks: React.FC<ChunksProps> = ({
                     <span
                       className={`wrap-break-word ${
                         index < pathParts.length - 1
-                          ? 'font-medium text-[#7D54D1]'
+                          ? 'text-primary font-medium'
                           : 'text-gray-700 dark:text-gray-300'
                       }`}
                     >
@@ -347,32 +352,38 @@ const Chunks: React.FC<ChunksProps> = ({
           {editingChunk ? (
             !isEditing ? (
               <>
-                <button
-                  className="bg-primary hover:bg-primary/90 flex h-[38px] min-w-[108px] items-center justify-center rounded-full px-4 text-[14px] font-medium whitespace-nowrap text-white"
+                <Button
+                  type="button"
+                  className="h-[38px] min-w-[108px] rounded-full px-4 text-sm font-medium whitespace-nowrap"
                   onClick={() => setIsEditing(true)}
                 >
                   {t('modals.chunk.edit')}
-                </button>
-                <button
-                  className="flex h-[38px] min-w-[108px] items-center justify-center rounded-full border border-solid border-red-500 px-4 py-1 text-[14px] font-medium text-nowrap text-red-500 hover:bg-red-500 hover:text-white"
+                </Button>
+                <Button
+                  type="button"
+                  variant="destructive-outline"
+                  className="h-[38px] min-w-[108px] rounded-full px-4 py-1 text-sm font-medium text-nowrap"
                   onClick={() => {
                     confirmDeleteChunk(editingChunk);
                   }}
                 >
                   {t('modals.chunk.delete')}
-                </button>
+                </Button>
               </>
             ) : (
               <>
-                <button
+                <Button
+                  type="button"
+                  variant="ghost"
                   onClick={() => {
                     setIsEditing(false);
                   }}
-                  className="dark:text-foreground hover:bg-accent dark:hover:bg-accent flex h-[38px] min-w-[108px] cursor-pointer items-center justify-center rounded-full px-4 py-1 text-sm font-medium text-nowrap"
+                  className="dark:text-foreground h-[38px] min-w-[108px] cursor-pointer rounded-full px-4 py-1 text-sm font-medium text-nowrap"
                 >
                   {t('modals.chunk.cancel')}
-                </button>
-                <button
+                </Button>
+                <Button
+                  type="button"
                   onClick={() => {
                     if (editingText.trim()) {
                       const hasChanges =
@@ -396,27 +407,30 @@ const Chunks: React.FC<ChunksProps> = ({
                     (editingTitle === (editingChunk?.metadata?.title || '') &&
                       editingText === (editingChunk?.text || ''))
                   }
-                  className={`flex h-[38px] min-w-[108px] items-center justify-center rounded-full px-4 py-1 text-[14px] font-medium text-nowrap text-white transition-all ${
+                  className={`h-[38px] min-w-[108px] rounded-full px-4 py-1 text-sm font-medium text-nowrap transition-all ${
                     editingText.trim() &&
                     (editingTitle !== (editingChunk?.metadata?.title || '') ||
                       editingText !== (editingChunk?.text || ''))
-                      ? 'bg-primary hover:bg-primary/90 cursor-pointer'
-                      : 'cursor-not-allowed bg-gray-400'
+                      ? 'cursor-pointer'
+                      : 'cursor-not-allowed bg-gray-400 text-white hover:bg-gray-400'
                   }`}
                 >
                   {t('modals.chunk.save')}
-                </button>
+                </Button>
               </>
             )
           ) : isAddingChunk ? (
             <>
-              <button
+              <Button
+                type="button"
+                variant="ghost"
                 onClick={() => setIsAddingChunk(false)}
-                className="dark:text-foreground hover:bg-accent dark:hover:bg-accent flex h-[38px] min-w-[108px] cursor-pointer items-center justify-center rounded-full px-4 py-1 text-sm font-medium text-nowrap"
+                className="dark:text-foreground h-[38px] min-w-[108px] cursor-pointer rounded-full px-4 py-1 text-sm font-medium text-nowrap"
               >
                 {t('modals.chunk.cancel')}
-              </button>
-              <button
+              </Button>
+              <Button
+                type="button"
                 onClick={() => {
                   if (editingText.trim()) {
                     handleAddChunk(editingTitle, editingText);
@@ -424,14 +438,14 @@ const Chunks: React.FC<ChunksProps> = ({
                   }
                 }}
                 disabled={!editingText.trim()}
-                className={`flex h-[38px] min-w-[108px] items-center justify-center rounded-full px-4 py-1 text-[14px] font-medium text-nowrap text-white transition-all ${
+                className={`h-[38px] min-w-[108px] rounded-full px-4 py-1 text-sm font-medium text-nowrap transition-all ${
                   editingText.trim()
-                    ? 'bg-primary hover:bg-primary/90 cursor-pointer'
-                    : 'cursor-not-allowed bg-gray-400'
+                    ? 'cursor-pointer'
+                    : 'cursor-not-allowed bg-gray-400 text-white hover:bg-gray-400'
                 }`}
               >
                 {t('modals.chunk.add')}
-              </button>
+              </Button>
             </>
           ) : null}
         </div>
@@ -481,19 +495,19 @@ const Chunks: React.FC<ChunksProps> = ({
           <div className="pointer-events-none absolute left-3">
             <img src={SearchIcon} alt="Search" className="h-4 w-4" />
           </div>
-          <input
+          <Input
             type="text"
             value={fileSearchQuery}
             onChange={(e) => handleFileSearchChange(e.target.value)}
             placeholder={t('settings.sources.searchFiles')}
-            className={`border-border dark:border-border h-[38px] w-full border py-2 pr-4 pl-10 ${
-              fileSearchQuery ? 'rounded-t-[6px]' : 'rounded-[6px]'
-            } bg-transparent transition-all duration-200 focus:outline-none`}
+            className={`h-[38px] py-2 pr-4 pl-10 ${
+              fileSearchQuery ? 'rounded-t-md' : 'rounded-md'
+            } transition-all duration-200`}
           />
         </div>
 
         {fileSearchQuery && (
-          <div className="border-border bg-card dark:border-border dark:bg-card absolute z-10 max-h-[calc(100vh-200px)] w-full overflow-hidden rounded-b-[6px] border border-t-0 shadow-lg">
+          <div className="border-border bg-card dark:border-border dark:bg-card absolute z-10 max-h-[calc(100vh-200px)] w-full overflow-hidden rounded-b-md border border-t-0 shadow-lg">
             <div className="max-h-[calc(100vh-200px)] overflow-x-hidden overflow-y-auto">
               {fileSearchResults.length === 0 ? (
                 <div className="py-2 text-center text-sm text-gray-500 dark:text-gray-400">
@@ -555,17 +569,18 @@ const Chunks: React.FC<ChunksProps> = ({
                   </div>
                   <div className="bg-border dark:bg-border h-full w-px"></div>
                   <div className="h-full flex-1">
-                    <input
+                    <Input
                       type="text"
                       placeholder={t('settings.sources.searchPlaceholder')}
                       value={searchTerm}
                       onChange={(e) => setSearchTerm(e.target.value)}
-                      className="h-full w-full border-none bg-transparent px-3 py-2 text-[13.56px] leading-[100%] font-normal outline-none"
+                      className="h-full rounded-none border-0 px-3 py-2 text-[13.56px] leading-[100%] font-normal shadow-none focus-visible:ring-0 md:text-[13.56px] dark:border-0"
                     />
                   </div>
                 </div>
-                <button
-                  className="bg-primary hover:bg-primary/90 flex h-[38px] w-full min-w-[108px] shrink-0 items-center justify-center rounded-full px-4 text-[14px] font-medium whitespace-normal text-white sm:w-auto"
+                <Button
+                  type="button"
+                  className="h-[38px] w-full min-w-[108px] shrink-0 rounded-full px-4 text-sm font-medium whitespace-normal sm:w-auto"
                   title={t('settings.sources.addChunk')}
                   onClick={() => {
                     setIsAddingChunk(true);
@@ -574,7 +589,7 @@ const Chunks: React.FC<ChunksProps> = ({
                   }}
                 >
                   {t('settings.sources.addChunk')}
-                </button>
+                </Button>
               </div>
               {loading ? (
                 <div className="grid w-full grid-cols-1 justify-items-start gap-4 sm:grid-cols-[repeat(auto-fit,minmax(400px,1fr))]">
@@ -595,7 +610,7 @@ const Chunks: React.FC<ChunksProps> = ({
                     filteredChunks.map((chunk, index) => (
                       <div
                         key={index}
-                        className="border-border dark:border-border relative flex h-[197px] w-full max-w-[487px] transform cursor-pointer flex-col justify-between overflow-hidden rounded-[5.86px] border transition-transform duration-200 hover:scale-105"
+                        className="border-border dark:border-border relative flex h-[197px] w-full max-w-[487px] transform cursor-pointer flex-col justify-between overflow-hidden rounded-md border transition-transform duration-200 hover:scale-105"
                         onClick={() => {
                           setEditingChunk(chunk);
                           setEditingTitle(chunk.metadata?.title || '');
@@ -637,7 +652,7 @@ const Chunks: React.FC<ChunksProps> = ({
           ) : (
             editingChunk && (
               <div className="w-full">
-                <div className="border-border dark:border-border relative flex w-full flex-col overflow-hidden rounded-[5.86px] border">
+                <div className="border-border dark:border-border relative flex w-full flex-col overflow-hidden rounded-md border">
                   <div className="border-border bg-muted dark:border-border dark:bg-card flex w-full items-center justify-between border-b px-4 py-3">
                     <div className="dark:text-muted-foreground text-sm text-[#59636E]">
                       {editingChunk.metadata.token_count
diff --git a/frontend/src/components/ConnectedStateSkeleton.tsx b/frontend/src/components/ConnectedStateSkeleton.tsx
deleted file mode 100644
index f871fc9b..00000000
--- a/frontend/src/components/ConnectedStateSkeleton.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-const ConnectedStateSkeleton = () => (
-  <div className="mb-4">
-    <div className="flex w-full animate-pulse items-center justify-between rounded-[10px] bg-gray-200 px-4 py-2 dark:bg-gray-700">
-      <div className="flex items-center gap-2">
-        <div className="h-4 w-4 rounded bg-gray-300 dark:bg-gray-600"></div>
-        <div className="h-4 w-32 rounded bg-gray-300 dark:bg-gray-600"></div>
-      </div>
-      <div className="h-4 w-16 rounded bg-gray-300 dark:bg-gray-600"></div>
-    </div>
-  </div>
-);
-
-export default ConnectedStateSkeleton;
diff --git a/frontend/src/components/ConnectorAuth.tsx b/frontend/src/components/ConnectorAuth.tsx
index 5787ba29..a530d545 100644
--- a/frontend/src/components/ConnectorAuth.tsx
+++ b/frontend/src/components/ConnectorAuth.tsx
@@ -5,6 +5,7 @@ import { useSelector } from 'react-redux';
 import userService from '../api/services/userService';
 import { useDarkTheme } from '../hooks';
 import { selectToken } from '../preferences/preferenceSlice';
+import { Button } from './ui/button';
 
 interface ConnectorAuthProps {
   provider: string;
@@ -193,7 +194,7 @@ const ConnectorAuth: React.FC<ConnectorAuthProps> = ({
 
       {isConnected ? (
         <div className="mb-4">
-          <div className="text-eerie-black flex w-full items-center justify-between rounded-[10px] bg-[#8FDD51] px-4 py-2 text-sm font-medium">
+          <div className="flex w-full items-center justify-between rounded-lg bg-[#8FDD51] px-4 py-2 text-sm font-medium text-black">
             <div className="flex max-w-[500px] items-center gap-2">
               <svg className="h-4 w-4" viewBox="0 0 24 24">
                 <path
@@ -208,19 +209,23 @@ const ConnectorAuth: React.FC<ConnectorAuthProps> = ({
               </span>
             </div>
             {onDisconnect && (
-              <button
+              <Button
+                type="button"
+                variant="link"
+                size="sm"
                 onClick={onDisconnect}
-                className="text-eerie-black text-xs font-medium underline hover:text-gray-700"
+                className="h-auto p-0 text-xs text-black underline hover:text-gray-700"
               >
                 {t('modals.uploadDoc.connectors.auth.disconnect')}
-              </button>
+              </Button>
             )}
           </div>
         </div>
       ) : (
-        <button
+        <Button
+          type="button"
           onClick={handleAuth}
-          className="flex w-full items-center justify-center gap-2 rounded-lg bg-blue-500 px-4 py-3 text-white transition-colors hover:bg-blue-600"
+          className="w-full rounded-lg bg-blue-500 px-4 py-3 text-white hover:bg-blue-600"
         >
           <svg className="h-5 w-5" viewBox="0 0 24 24">
             <path
@@ -229,7 +234,7 @@ const ConnectorAuth: React.FC<ConnectorAuthProps> = ({
             />
           </svg>
           {label}
-        </button>
+        </Button>
       )}
     </>
   );
diff --git a/frontend/src/components/ConnectorTree.tsx b/frontend/src/components/ConnectorTree.tsx
index f8354116..db8ff6db 100644
--- a/frontend/src/components/ConnectorTree.tsx
+++ b/frontend/src/components/ConnectorTree.tsx
@@ -1,45 +1,16 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useSelector, useStore } from 'react-redux';
+import { useSelector } from 'react-redux';
 
 import userService from '../api/services/userService';
-import ArrowLeft from '../assets/arrow-left.svg';
 import CheckmarkIcon from '../assets/checkMark2.svg';
-import EyeView from '../assets/eye-view.svg';
-import FileIcon from '../assets/file.svg';
-import FolderIcon from '../assets/folder.svg';
 import SyncIcon from '../assets/sync.svg';
-import ThreeDots from '../assets/three-dots.svg';
-import { useLoaderState, useOutsideAlerter } from '../hooks';
 import ConfirmationModal from '../modals/ConfirmationModal';
 import { ActiveState } from '../models/misc';
 import { selectToken } from '../preferences/preferenceSlice';
-import type { RootState } from '../store';
-import { formatBytes } from '../utils/stringUtils';
-import Chunks from './Chunks';
-import ContextMenu, { MenuOption } from './ContextMenu';
-import SkeletonLoader from './SkeletonLoader';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from './Table';
-
-interface FileNode {
-  type?: string;
-  token_count?: number;
-  size_bytes?: number;
-  display_name?: string;
-  [key: string]: any;
-}
-
-interface DirectoryStructure {
-  [key: string]: FileNode;
-}
+import TreeBrowser from './tree/TreeBrowser';
+import type { TreeBrowserController } from './tree/types';
+import { useReingestSseWaiter } from './tree/useReingestWait';
 
 interface ConnectorTreeProps {
   docId: string;
@@ -47,79 +18,23 @@ interface ConnectorTreeProps {
   onBackToDocuments: () => void;
 }
 
-interface SearchResult {
-  name: string;
-  path: string;
-  isFile: boolean;
-}
-
 const ConnectorTree: React.FC<ConnectorTreeProps> = ({
   docId,
   sourceName,
   onBackToDocuments,
 }) => {
   const { t } = useTranslation();
-  const [loading, setLoading] = useLoaderState(true, 500);
-  const [error, setError] = useState<string | null>(null);
-  const [directoryStructure, setDirectoryStructure] =
-    useState<DirectoryStructure | null>(null);
-  const [currentPath, setCurrentPath] = useState<string[]>([]);
   const token = useSelector(selectToken);
-  const store = useStore<RootState>();
-  const [activeMenuId, setActiveMenuId] = useState<string | null>(null);
-  const menuRefs = useRef<{
-    [key: string]: React.RefObject<HTMLDivElement | null>;
-  }>({});
-  const [selectedFile, setSelectedFile] = useState<{
-    id: string;
-    name: string;
-  } | null>(null);
-  const [searchQuery, setSearchQuery] = useState('');
-  const [searchResults, setSearchResults] = useState<SearchResult[]>([]);
-  const searchDropdownRef = useRef<HTMLDivElement>(null);
-  const [isSyncing, setIsSyncing] = useState<boolean>(false);
-  const [syncProgress, setSyncProgress] = useState<number>(0);
-  const [sourceProvider, setSourceProvider] = useState<string>('');
-  const [syncDone, setSyncDone] = useState<boolean>(false);
+
+  const [isSyncing, setIsSyncing] = useState(false);
+  const [syncProgress, setSyncProgress] = useState(0);
+  const [syncDone, setSyncDone] = useState(false);
+  const [sourceProvider, setSourceProvider] = useState('');
   const [syncConfirmationModal, setSyncConfirmationModal] =
     useState<ActiveState>('INACTIVE');
-  const mountedRef = useRef(true);
-  const syncUnsubscribeRef = useRef<(() => void) | null>(null);
-  // Holds the 5-minute SSE-wait timer so the unmount cleanup can clear
-  // it — otherwise the timer fires up to 5 min after unmount and
-  // resolves an abandoned Promise.
-  const syncTimerRef = useRef<number | null>(null);
 
-  useEffect(
-    () => () => {
-      mountedRef.current = false;
-      syncUnsubscribeRef.current?.();
-      syncUnsubscribeRef.current = null;
-      if (syncTimerRef.current !== null) {
-        window.clearTimeout(syncTimerRef.current);
-        syncTimerRef.current = null;
-      }
-    },
-    [],
-  );
-
-  useOutsideAlerter(
-    searchDropdownRef,
-    () => {
-      setSearchQuery('');
-      setSearchResults([]);
-    },
-    [],
-    false,
-  );
-
-  const handleFileClick = (fileName: string, displayName?: string) => {
-    const fullPath = [...currentPath, fileName].join('/');
-    setSelectedFile({
-      id: fullPath,
-      name: displayName ?? fileName,
-    });
-  };
+  const controllerRef = useRef<TreeBrowserController | null>(null);
+  const { waitForTerminal, mountedRef } = useReingestSseWaiter();
 
   const handleSync = async () => {
     if (isSyncing) return;
@@ -137,73 +52,12 @@ const ConnectorTree: React.FC<ConnectorTreeProps> = ({
         console.log('Sync started successfully:', data.task_id);
         setSyncProgress(10);
 
-        // The connector worker (``ingest_connector`` in
-        // ``application/worker.py``) publishes
-        // ``source.ingest.{queued,completed,failed}`` envelopes keyed on
-        // ``scope.id == docId`` (sync mode reuses the source uuid). Wait
-        // on the bounded ``notifications.recentEvents`` ring for a
-        // terminal envelope rather than polling ``/task_status``.
-        // Mirrors FileTree's slice-walking pattern, including the
-        // ``opStartedAt`` guard so a stale terminal event from a prior
-        // sync of this same source can't short-circuit the current op.
+        // Sync mode reuses the source uuid for ``scope.id``, so we wait
+        // on the same SSE channel FileTree uses for ingest terminals.
+        // ``opStartedAt`` guards against a stale terminal from a prior
+        // sync of this same source short-circuiting the current op.
         const opStartedAt = Date.now();
-
-        const terminalFromSse = (): 'completed' | 'failed' | null => {
-          const events = store.getState().notifications.recentEvents;
-          for (const event of events) {
-            if (event.scope?.id !== docId) continue;
-            const ts = event.ts ? Date.parse(event.ts) : NaN;
-            if (!Number.isFinite(ts) || ts < opStartedAt) continue;
-            if (event.type === 'source.ingest.completed') return 'completed';
-            if (event.type === 'source.ingest.failed') return 'failed';
-          }
-          return null;
-        };
-
-        const MAX_WAIT_MS = 5 * 60_000;
-        const terminal = await new Promise<
-          'completed' | 'failed' | 'timeout' | 'unmounted'
-        >((resolve) => {
-          // Cover the race where the event landed between the POST
-          // returning and the subscribe call.
-          const initial = terminalFromSse();
-          if (initial) {
-            resolve(initial);
-            return;
-          }
-          if (!mountedRef.current) {
-            resolve('unmounted');
-            return;
-          }
-          let settled = false;
-          const finish = (
-            value: 'completed' | 'failed' | 'timeout' | 'unmounted',
-          ) => {
-            if (settled) return;
-            settled = true;
-            if (syncTimerRef.current !== null) {
-              window.clearTimeout(syncTimerRef.current);
-              syncTimerRef.current = null;
-            }
-            if (syncUnsubscribeRef.current) {
-              syncUnsubscribeRef.current();
-              syncUnsubscribeRef.current = null;
-            }
-            resolve(value);
-          };
-          syncTimerRef.current = window.setTimeout(
-            () => finish('timeout'),
-            MAX_WAIT_MS,
-          );
-          syncUnsubscribeRef.current = store.subscribe(() => {
-            if (!mountedRef.current) {
-              finish('unmounted');
-              return;
-            }
-            const next = terminalFromSse();
-            if (next) finish(next);
-          });
-        });
+        const terminal = await waitForTerminal(docId, opStartedAt);
 
         if (terminal === 'timeout') {
           console.error('Sync timed out waiting for SSE terminal');
@@ -219,21 +73,16 @@ const ConnectorTree: React.FC<ConnectorTreeProps> = ({
           console.log('Sync completed successfully');
 
           try {
-            const refreshResponse = await userService.getDirectoryStructure(
-              docId,
-              token,
-            );
-            const refreshData = await refreshResponse.json();
-            if (refreshData && refreshData.directory_structure) {
-              setDirectoryStructure(refreshData.directory_structure);
-              setCurrentPath([]);
+            const refreshed = await controllerRef.current?.refreshDirectory();
+            if (refreshed) {
+              controllerRef.current?.resetPath();
             }
-            if (refreshData && refreshData.provider) {
-              setSourceProvider(refreshData.provider);
+            if (mountedRef.current) {
+              setSyncDone(true);
+              setTimeout(() => {
+                if (mountedRef.current) setSyncDone(false);
+              }, 5000);
             }
-
-            setSyncDone(true);
-            setTimeout(() => setSyncDone(false), 5000);
           } catch (err) {
             console.error('Error refreshing directory structure:', err);
           }
@@ -251,609 +100,63 @@ const ConnectorTree: React.FC<ConnectorTreeProps> = ({
     }
   };
 
-  useEffect(() => {
-    const fetchDirectoryStructure = async () => {
-      try {
-        setLoading(true);
-
-        const directoryResponse = await userService.getDirectoryStructure(
-          docId,
-          token,
-        );
-        const directoryData = await directoryResponse.json();
-
-        if (directoryData && directoryData.directory_structure) {
-          setDirectoryStructure(directoryData.directory_structure);
-        } else {
-          setError('Invalid response format');
-        }
-
-        if (directoryData && directoryData.provider) {
-          setSourceProvider(directoryData.provider);
-        }
-      } catch (err) {
-        setError('Failed to load source information');
-        console.error(err);
-      } finally {
-        setLoading(false);
+  const topRightAction = (
+    <button
+      onClick={() => setSyncConfirmationModal('ACTIVE')}
+      disabled={isSyncing}
+      className={`flex h-[38px] min-w-[108px] items-center justify-center rounded-full px-4 text-sm font-medium whitespace-nowrap transition-colors ${
+        isSyncing
+          ? 'dark:bg-muted dark:text-muted-foreground cursor-not-allowed bg-gray-300 text-gray-600'
+          : 'bg-primary hover:bg-primary/90 text-white'
+      }`}
+      title={
+        isSyncing
+          ? `${t('settings.sources.syncing')} ${syncProgress}%`
+          : syncDone
+            ? 'Done'
+            : t('settings.sources.sync')
       }
-    };
+    >
+      <img
+        src={syncDone ? CheckmarkIcon : SyncIcon}
+        alt={t('settings.sources.sync')}
+        className={`mr-2 h-4 w-4 brightness-0 invert filter ${isSyncing ? 'animate-spin' : ''}`}
+      />
+      {isSyncing
+        ? `${syncProgress}%`
+        : syncDone
+          ? 'Done'
+          : t('settings.sources.sync')}
+    </button>
+  );
 
-    if (docId) {
-      fetchDirectoryStructure();
-    }
-  }, [docId, token]);
-
-  const navigateToDirectory = (dirName: string) => {
-    setCurrentPath([...currentPath, dirName]);
-  };
-
-  const navigateUp = () => {
-    setCurrentPath(currentPath.slice(0, -1));
-  };
-
-  const getCurrentDirectory = (): DirectoryStructure => {
-    if (!directoryStructure) return {};
-
-    let current = directoryStructure;
-    for (const dir of currentPath) {
-      if (current[dir] && !current[dir].type) {
-        current = current[dir] as DirectoryStructure;
-      } else {
-        return {};
-      }
-    }
-    return current;
-  };
-
-  const getMenuRef = (id: string) => {
-    if (!menuRefs.current[id]) {
-      menuRefs.current[id] = React.createRef();
-    }
-    return menuRefs.current[id];
-  };
-
-  const handleMenuClick = (
-    e: React.MouseEvent<HTMLButtonElement>,
-    id: string,
-  ) => {
-    e.stopPropagation();
-    setActiveMenuId(activeMenuId === id ? null : id);
-  };
-
-  const getActionOptions = (
-    name: string,
-    isFile: boolean,
-    _itemId: string,
-    displayName?: string,
-  ): MenuOption[] => {
-    const options: MenuOption[] = [];
-
-    options.push({
-      icon: EyeView,
-      label: t('settings.sources.view'),
-      onClick: (event: React.SyntheticEvent) => {
-        event.stopPropagation();
-        if (isFile) {
-          handleFileClick(name, displayName);
-        } else {
-          navigateToDirectory(name);
-        }
-      },
-      iconWidth: 18,
-      iconHeight: 18,
-      variant: 'primary',
-    });
-
-    return options;
-  };
-
-  const calculateDirectoryStats = (
-    structure: DirectoryStructure,
-  ): { totalSize: number; totalTokens: number } => {
-    let totalSize = 0;
-    let totalTokens = 0;
-
-    Object.entries(structure).forEach(([_, node]) => {
-      if (node.type) {
-        // It's a file
-        totalSize += node.size_bytes || 0;
-        totalTokens += node.token_count || 0;
-      } else {
-        // It's a directory, recurse
-        const stats = calculateDirectoryStats(node);
-        totalSize += stats.totalSize;
-        totalTokens += stats.totalTokens;
-      }
-    });
-
-    return { totalSize, totalTokens };
-  };
-
-  const handleBackNavigation = () => {
-    if (selectedFile) {
-      setSelectedFile(null);
-    } else if (currentPath.length === 0) {
-      if (onBackToDocuments) {
-        onBackToDocuments();
-      }
-    } else {
-      navigateUp();
-    }
-  };
-
-  const renderPathNavigation = () => {
-    return (
-      <div className="mb-0 flex min-h-[38px] flex-col gap-2 text-base sm:flex-row sm:items-center sm:justify-between">
-        {/* Left side with path navigation */}
-        <div className="flex w-full items-center sm:w-auto">
-          <button
-            className="text-muted-foreground mr-3 flex h-[29px] w-[29px] items-center justify-center rounded-full border p-2 text-sm font-medium dark:border-0"
-            onClick={handleBackNavigation}
-          >
-            <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
-          </button>
-
-          <div className="flex flex-wrap items-center">
-            <span className="font-semibold wrap-break-word text-[#7D54D1]">
-              {sourceName}
-            </span>
-            {currentPath.length > 0 && (
-              <>
-                <span className="text-muted-foreground mx-1 shrink-0">/</span>
-                {currentPath.map((dir, index) => (
-                  <React.Fragment key={index}>
-                    <span className="dark:text-foreground wrap-break-word text-gray-700">
-                      {dir}
-                    </span>
-                    {index < currentPath.length - 1 && (
-                      <span className="text-muted-foreground mx-1 shrink-0">
-                        /
-                      </span>
-                    )}
-                  </React.Fragment>
-                ))}
-              </>
-            )}
-          </div>
-        </div>
-
-        <div className="relative mt-2 flex w-full flex-row flex-nowrap items-center justify-end gap-2 sm:mt-0 sm:w-auto">
-          {renderFileSearch()}
-
-          {/* Sync button */}
-          <button
-            onClick={() => setSyncConfirmationModal('ACTIVE')}
-            disabled={isSyncing}
-            className={`flex h-[38px] min-w-[108px] items-center justify-center rounded-full px-4 text-[14px] font-medium whitespace-nowrap transition-colors ${
-              isSyncing
-                ? 'dark:bg-muted dark:text-muted-foreground cursor-not-allowed bg-gray-300 text-gray-600'
-                : 'bg-primary hover:bg-primary/90 text-white'
-            }`}
-            title={
-              isSyncing
-                ? `${t('settings.sources.syncing')} ${syncProgress}%`
-                : syncDone
-                  ? 'Done'
-                  : t('settings.sources.sync')
-            }
-          >
-            <img
-              src={syncDone ? CheckmarkIcon : SyncIcon}
-              alt={t('settings.sources.sync')}
-              className={`mr-2 h-4 w-4 brightness-0 invert filter ${isSyncing ? 'animate-spin' : ''}`}
-            />
-            {isSyncing
-              ? `${syncProgress}%`
-              : syncDone
-                ? 'Done'
-                : t('settings.sources.sync')}
-          </button>
-        </div>
-      </div>
-    );
-  };
-
-  const renderFileTree = (directory: DirectoryStructure): React.ReactNode[] => {
-    // Create parent directory row
-    const parentRow =
-      currentPath.length > 0
-        ? [
-            <TableRow key="parent-dir" onClick={navigateUp}>
-              <TableCell width="40%" align="left">
-                <div className="flex items-center">
-                  <img
-                    src={FolderIcon}
-                    alt={t('settings.sources.parentFolderAlt')}
-                    className="mr-2 h-4 w-4 shrink-0"
-                  />
-                  <span className="truncate">..</span>
-                </div>
-              </TableCell>
-              <TableCell width="30%" align="left">
-                -
-              </TableCell>
-              <TableCell width="20%" align="left">
-                -
-              </TableCell>
-              <TableCell width="10%" align="right"></TableCell>
-            </TableRow>,
-          ]
-        : [];
-
-    // Sort entries: directories first, then files, both alphabetically
-    const sortedEntries = Object.entries(directory).sort(
-      ([nameA, nodeA], [nameB, nodeB]) => {
-        const isFileA = !!nodeA.type;
-        const isFileB = !!nodeB.type;
-
-        if (isFileA !== isFileB) {
-          return isFileA ? 1 : -1; // Directories first
-        }
-
-        return nameA.localeCompare(nameB); // Alphabetical within each group
-      },
-    );
-
-    // Process directories
-    const directoryRows = sortedEntries
-      .filter(([_, node]) => !node.type)
-      .map(([name, node]) => {
-        const itemId = `dir-${name}`;
-        const menuRef = getMenuRef(itemId);
-
-        // Calculate directory stats
-        const dirStats = calculateDirectoryStats(node as DirectoryStructure);
-
-        return (
-          <TableRow key={itemId} onClick={() => navigateToDirectory(name)}>
-            <TableCell width="40%" align="left">
-              <div className="flex min-w-0 items-center">
-                <img
-                  src={FolderIcon}
-                  alt={t('settings.sources.folderAlt')}
-                  className="mr-2 h-4 w-4 shrink-0"
-                />
-                <span className="truncate">{name}</span>
-              </div>
-            </TableCell>
-            <TableCell width="30%" align="left">
-              {dirStats.totalTokens > 0
-                ? dirStats.totalTokens.toLocaleString()
-                : '-'}
-            </TableCell>
-            <TableCell width="20%" align="left">
-              {dirStats.totalSize > 0 ? formatBytes(dirStats.totalSize) : '-'}
-            </TableCell>
-            <TableCell width="10%" align="right">
-              <div ref={menuRef} className="relative">
-                <button
-                  onClick={(e) => handleMenuClick(e, itemId)}
-                  className="dark:hover:bg-muted inline-flex h-[35px] w-6 shrink-0 items-center justify-center rounded-md font-medium transition-colors hover:bg-[#EBEBEB]"
-                  aria-label={t('settings.sources.menuAlt')}
-                >
-                  <img
-                    src={ThreeDots}
-                    alt={t('settings.sources.menuAlt')}
-                    className="opacity-60 hover:opacity-100"
-                  />
-                </button>
-                <ContextMenu
-                  isOpen={activeMenuId === itemId}
-                  setIsOpen={(isOpen) =>
-                    setActiveMenuId(isOpen ? itemId : null)
-                  }
-                  options={getActionOptions(name, false, itemId)}
-                  anchorRef={menuRef}
-                  position="bottom-left"
-                  offset={{ x: -4, y: 4 }}
-                />
-              </div>
-            </TableCell>
-          </TableRow>
-        );
-      });
-
-    // Process files
-    const fileRows = sortedEntries
-      .filter(([_, node]) => !!node.type)
-      .map(([name, node]) => {
-        const itemId = `file-${name}`;
-        const menuRef = getMenuRef(itemId);
-        const displayName =
-          typeof node.display_name === 'string' && node.display_name.trim()
-            ? node.display_name
-            : name;
-
-        return (
-          <TableRow
-            key={itemId}
-            onClick={() => handleFileClick(name, displayName)}
-          >
-            <TableCell width="40%" align="left">
-              <div className="flex min-w-0 items-center">
-                <img
-                  src={FileIcon}
-                  alt={t('settings.sources.fileAlt')}
-                  className="mr-2 h-4 w-4 shrink-0"
-                />
-                <span className="truncate">{displayName}</span>
-              </div>
-            </TableCell>
-            <TableCell width="30%" align="left">
-              {node.token_count?.toLocaleString() || '-'}
-            </TableCell>
-            <TableCell width="20%" align="left">
-              {node.size_bytes ? formatBytes(node.size_bytes) : '-'}
-            </TableCell>
-            <TableCell width="10%" align="right">
-              <div ref={menuRef} className="relative">
-                <button
-                  onClick={(e) => handleMenuClick(e, itemId)}
-                  className="dark:hover:bg-muted inline-flex h-[35px] w-6 shrink-0 items-center justify-center rounded-md font-medium transition-colors hover:bg-[#EBEBEB]"
-                  aria-label={t('settings.sources.menuAlt')}
-                >
-                  <img
-                    src={ThreeDots}
-                    alt={t('settings.sources.menuAlt')}
-                    className="opacity-60 hover:opacity-100"
-                  />
-                </button>
-                <ContextMenu
-                  isOpen={activeMenuId === itemId}
-                  setIsOpen={(isOpen) =>
-                    setActiveMenuId(isOpen ? itemId : null)
-                  }
-                  options={getActionOptions(name, true, itemId, displayName)}
-                  anchorRef={menuRef}
-                  position="bottom-left"
-                  offset={{ x: -4, y: 4 }}
-                />
-              </div>
-            </TableCell>
-          </TableRow>
-        );
-      });
-
-    return [...parentRow, ...directoryRows, ...fileRows];
-  };
-
-  const searchFiles = (
-    query: string,
-    structure: DirectoryStructure,
-    currentPath: string[] = [],
-  ): SearchResult[] => {
-    let results: SearchResult[] = [];
-
-    Object.entries(structure).forEach(([name, node]) => {
-      const fullPath = [...currentPath, name].join('/');
-      const displayName =
-        typeof node.display_name === 'string' && node.display_name.trim()
-          ? node.display_name
-          : '';
-      const queryLower = query.toLowerCase();
-      const matchTarget = displayName ? `${name} ${displayName}` : name;
-
-      if (matchTarget.toLowerCase().includes(queryLower)) {
-        results.push({
-          name: displayName || name,
-          path: fullPath,
-          isFile: !!node.type,
-        });
-      }
-
-      if (!node.type) {
-        // If it's a directory, search recursively
-        results = [
-          ...results,
-          ...searchFiles(query, node as DirectoryStructure, [
-            ...currentPath,
-            name,
-          ]),
-        ];
-      }
-    });
-
-    return results;
-  };
-
-  const handleSearchSelect = (result: SearchResult) => {
-    if (result.isFile) {
-      const pathParts = result.path.split('/');
-      const fileName = pathParts.pop() || '';
-      setCurrentPath(pathParts);
-
-      setSelectedFile({
-        id: result.path,
-        name: result.name || fileName,
-      });
-    } else {
-      setCurrentPath(result.path.split('/'));
-      setSelectedFile(null);
-    }
-    setSearchQuery('');
-    setSearchResults([]);
-  };
-
-  const renderFileSearch = () => {
-    return (
-      <div className="relative w-52" ref={searchDropdownRef}>
-        <input
-          type="text"
-          value={searchQuery}
-          onChange={(e) => {
-            setSearchQuery(e.target.value);
-            if (directoryStructure) {
-              setSearchResults(searchFiles(e.target.value, directoryStructure));
-            }
-          }}
-          placeholder={t('settings.sources.searchFiles')}
-          className={`border-border dark:border-border h-[38px] w-full border px-4 py-2 ${searchQuery ? 'rounded-t-[24px]' : 'rounded-[24px]'} bg-transparent focus:outline-none`}
-        />
-
-        {searchQuery && (
-          <div className="border-border bg-card dark:border-border dark:bg-card absolute top-full right-0 left-0 z-10 max-h-[calc(100vh-200px)] w-full overflow-hidden rounded-b-2xl border border-t-0 shadow-lg transition-all duration-200">
-            <div className="max-h-[calc(100vh-200px)] overflow-x-hidden overflow-y-auto overscroll-contain">
-              {searchResults.length === 0 ? (
-                <div className="text-muted-foreground py-2 text-center text-sm">
-                  {t('settings.sources.noResults')}
-                </div>
-              ) : (
-                searchResults.map((result, index) => (
-                  <div
-                    key={index}
-                    onClick={() => handleSearchSelect(result)}
-                    title={result.path}
-                    className={`hover:bg-muted dark:hover:bg-muted flex min-w-0 cursor-pointer items-center px-3 py-2 ${
-                      index !== searchResults.length - 1
-                        ? 'border-border dark:border-border border-b'
-                        : ''
-                    }`}
-                  >
-                    <img
-                      src={result.isFile ? FileIcon : FolderIcon}
-                      alt={
-                        result.isFile
-                          ? t('settings.sources.fileAlt')
-                          : t('settings.sources.folderAlt')
-                      }
-                      className="mr-2 h-4 w-4 shrink-0"
-                    />
-                    <span className="flex-1 truncate text-sm">
-                      {result.name}
-                    </span>
-                  </div>
-                ))
-              )}
-            </div>
-          </div>
-        )}
-      </div>
-    );
-  };
-
-  const handleFileSearch = (searchQuery: string) => {
-    if (directoryStructure) {
-      return searchFiles(searchQuery, directoryStructure);
-    }
-    return [];
-  };
-
-  const getDisplayNameForPath = (path: string) => {
-    if (!directoryStructure) {
-      return path.split('/').pop() || path;
-    }
-    let structure: any = directoryStructure;
-    if (typeof structure === 'string') {
-      try {
-        structure = JSON.parse(structure);
-      } catch (e) {
-        return path.split('/').pop() || path;
-      }
-    }
-    if (typeof structure !== 'object' || structure === null) {
-      return path.split('/').pop() || path;
-    }
-    const parts = path.split('/').filter(Boolean);
-    let current: any = structure;
-    for (const part of parts) {
-      if (!current || typeof current !== 'object') {
-        return parts[parts.length - 1] || path;
-      }
-      current = current[part];
-    }
-    if (
-      current &&
-      typeof current === 'object' &&
-      typeof current.display_name === 'string' &&
-      current.display_name.trim()
-    ) {
-      return current.display_name;
-    }
-    return parts[parts.length - 1] || path;
-  };
-
-  const handleFileSelect = (path: string) => {
-    const pathParts = path.split('/');
-    const fileName = pathParts.pop() || '';
-    setCurrentPath(pathParts);
-    setSelectedFile({
-      id: path,
-      name: getDisplayNameForPath(path) || fileName,
-    });
-  };
-
-  const currentDirectory = getCurrentDirectory();
-
-  const navigateToPath = (index: number) => {
-    setCurrentPath(currentPath.slice(0, index + 1));
-  };
+  const extraContent = (
+    <ConfirmationModal
+      message={t('settings.sources.syncConfirmation', { sourceName })}
+      modalState={syncConfirmationModal}
+      setModalState={setSyncConfirmationModal}
+      handleSubmit={handleSync}
+      submitLabel={t('settings.sources.sync')}
+      cancelLabel={t('cancel')}
+    />
+  );
 
   return (
-    <div>
-      {selectedFile ? (
-        <div className="flex">
-          <div className="flex-1">
-            <Chunks
-              documentId={docId}
-              documentName={sourceName}
-              handleGoBack={() => setSelectedFile(null)}
-              path={selectedFile.id}
-              displayPath={[...currentPath, selectedFile.name].join('/')}
-              onFileSearch={handleFileSearch}
-              onFileSelect={handleFileSelect}
-            />
-          </div>
-        </div>
-      ) : (
-        <div className="flex w-full max-w-full flex-col overflow-hidden">
-          <div className="mb-2">{renderPathNavigation()}</div>
-
-          <div className="w-full">
-            <TableContainer>
-              <Table>
-                <TableHead>
-                  <TableRow>
-                    <TableHeader width="40%" align="left">
-                      {t('settings.sources.fileName')}
-                    </TableHeader>
-                    <TableHeader width="30%" align="left">
-                      {t('settings.sources.tokens')}
-                    </TableHeader>
-                    <TableHeader width="20%" align="left">
-                      {t('settings.sources.size')}
-                    </TableHeader>
-                    <TableHeader width="10%" align="right">
-                      <span className="sr-only">
-                        {t('settings.sources.actions')}
-                      </span>
-                    </TableHeader>
-                  </TableRow>
-                </TableHead>
-                <TableBody>
-                  {loading ? (
-                    <SkeletonLoader component="fileTable" />
-                  ) : (
-                    renderFileTree(getCurrentDirectory())
-                  )}
-                </TableBody>
-              </Table>
-            </TableContainer>
-          </div>
-        </div>
-      )}
-
-      <ConfirmationModal
-        message={t('settings.sources.syncConfirmation', {
-          sourceName,
-        })}
-        modalState={syncConfirmationModal}
-        setModalState={setSyncConfirmationModal}
-        handleSubmit={handleSync}
-        submitLabel={t('settings.sources.sync')}
-        cancelLabel={t('cancel')}
-      />
-    </div>
+    <TreeBrowser
+      docId={docId}
+      sourceName={sourceName}
+      onBackToDocuments={onBackToDocuments}
+      columnOrder="tokens-first"
+      sortEntries
+      controllerRef={controllerRef}
+      topRightAction={topRightAction}
+      extraContent={extraContent}
+      onDirectoryDataLoaded={(data) => {
+        if (data && data.provider) {
+          setSourceProvider(data.provider);
+        }
+      }}
+    />
   );
 };
 
diff --git a/frontend/src/components/ContextMenu.tsx b/frontend/src/components/ContextMenu.tsx
deleted file mode 100644
index cc0de0db..00000000
--- a/frontend/src/components/ContextMenu.tsx
+++ /dev/null
@@ -1,177 +0,0 @@
-import { CSSProperties, SyntheticEvent, useEffect, useRef } from 'react';
-
-import type { LucideIcon } from 'lucide-react';
-
-export interface MenuOption {
-  icon?: string | LucideIcon;
-  label: string;
-  onClick: (event: SyntheticEvent) => void;
-  variant?: 'primary' | 'danger';
-  iconClassName?: string;
-  iconWidth?: number;
-  iconHeight?: number;
-}
-
-interface ContextMenuProps {
-  isOpen: boolean;
-  setIsOpen: (isOpen: boolean) => void;
-  options: MenuOption[];
-  anchorRef: React.RefObject<HTMLDivElement | null>;
-  position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
-  offset?: { x: number; y: number };
-  className?: string;
-}
-
-export default function ContextMenu({
-  isOpen,
-  setIsOpen,
-  options,
-  anchorRef,
-  className = '',
-  position = 'bottom-right',
-  offset = { x: 0, y: 8 },
-}: ContextMenuProps) {
-  const menuRef = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    if (isOpen && menuRef.current) {
-      const positionStyle = getMenuPosition();
-      if (menuRef.current) {
-        Object.assign(menuRef.current.style, {
-          top: positionStyle.top,
-          left: positionStyle.left,
-        });
-      }
-    }
-  }, [isOpen]);
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        menuRef.current &&
-        !menuRef.current.contains(event.target as Node) &&
-        !anchorRef.current?.contains(event.target as Node)
-      ) {
-        setIsOpen(false);
-      }
-    };
-
-    if (isOpen) {
-      document.addEventListener('mousedown', handleClickOutside);
-      return () =>
-        document.removeEventListener('mousedown', handleClickOutside);
-    }
-  }, [isOpen, setIsOpen]);
-
-  if (!isOpen) return null;
-
-  const getMenuPosition = (): CSSProperties => {
-    if (!anchorRef.current) return {};
-
-    const rect = anchorRef.current.getBoundingClientRect();
-    const scrollY = window.scrollY || document.documentElement.scrollTop;
-    const scrollX = window.scrollX || document.documentElement.scrollLeft;
-
-    let top = rect.bottom + scrollY + offset.y;
-    let left = rect.right + scrollX + offset.x;
-
-    // Get menu dimensions (need ref to be available)
-    const menuWidth = menuRef.current?.offsetWidth || 144; // Default min-width
-    const menuHeight = menuRef.current?.offsetHeight || 0;
-
-    // Get viewport dimensions
-    const viewportWidth = window.innerWidth;
-    const viewportHeight = window.innerHeight;
-
-    // Adjust position based on specified position
-    switch (position) {
-      case 'bottom-left':
-        left = rect.right + scrollX - menuWidth + offset.x;
-        break;
-      case 'top-right':
-        top = rect.top + scrollY - offset.y - menuHeight;
-        break;
-      case 'top-left':
-        top = rect.top + scrollY - offset.y - menuHeight;
-        left = rect.right + scrollX - menuWidth + offset.x;
-        break;
-      // bottom-right is default
-    }
-
-    if (left + menuWidth > viewportWidth) {
-      left = Math.max(5, viewportWidth - menuWidth - 5);
-    }
-
-    if (left < 5) {
-      left = 5;
-    }
-
-    if (top + menuHeight > viewportHeight + scrollY) {
-      top = rect.top + scrollY - menuHeight - offset.y;
-    }
-
-    if (top < scrollY + 5) {
-      top = rect.bottom + scrollY + offset.y;
-    }
-
-    return {
-      position: 'fixed',
-      top: `${top}px`,
-      left: `${left}px`,
-    };
-  };
-
-  return (
-    <div
-      ref={menuRef}
-      className={`fixed z-50 ${className}`}
-      style={{ ...getMenuPosition() }}
-      onClick={(e) => e.stopPropagation()}
-    >
-      <div
-        className="bg-background dark:bg-card flex flex-col rounded-xl text-sm shadow-xl"
-        style={{ minWidth: '144px' }}
-      >
-        {options.map((option, index) => (
-          <button
-            key={index}
-            onClick={(event) => {
-              event.preventDefault();
-              event.stopPropagation();
-              option.onClick(event);
-              setIsOpen(false);
-            }}
-            className={`flex items-center justify-start gap-4 p-3 transition-colors duration-200 ease-in-out ${index === 0 ? 'rounded-t-xl' : ''} ${index === options.length - 1 ? 'rounded-b-xl' : ''} ${
-              option.variant === 'danger'
-                ? 'text-destructive hover:bg-muted'
-                : 'text-foreground hover:bg-muted'
-            } `}
-          >
-            {option.icon && (
-              <div className="flex w-4 min-w-4 shrink-0 justify-center">
-                {typeof option.icon === 'string' ? (
-                  <img
-                    width={option.iconWidth || 16}
-                    height={option.iconHeight || 16}
-                    src={option.icon}
-                    alt={option.label}
-                    className={`cursor-pointer ${option.iconClassName || ''}`}
-                  />
-                ) : (
-                  <option.icon
-                    size={Math.max(
-                      option.iconWidth || 16,
-                      option.iconHeight || 16,
-                    )}
-                    strokeWidth={1.75}
-                    aria-hidden="true"
-                    className={`cursor-pointer ${option.iconClassName || ''}`}
-                  />
-                )}
-              </div>
-            )}
-            <span className="wrap-break-word hyphens-auto">{option.label}</span>
-          </button>
-        ))}
-      </div>
-    </div>
-  );
-}
diff --git a/frontend/src/components/CopyButton.tsx b/frontend/src/components/CopyButton.tsx
index 329de40f..2f1e5fd4 100644
--- a/frontend/src/components/CopyButton.tsx
+++ b/frontend/src/components/CopyButton.tsx
@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 
 import CheckMark from '../assets/checkmark.svg?react';
 import CopyIcon from '../assets/copy.svg?react';
+import { Button } from './ui/button';
 
 type CopyButtonProps = {
   textToCopy: string;
@@ -47,8 +48,7 @@ export default function CopyButton({
   );
 
   const rootButtonClasses = clsx(
-    'flex items-center gap-2 group',
-    'focus:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500 rounded-full',
+    'group h-auto rounded-full bg-transparent p-0 hover:bg-transparent disabled:opacity-100',
     className,
   );
 
@@ -103,8 +103,9 @@ export default function CopyButton({
     };
   }, []);
   return (
-    <button
+    <Button
       type="button"
+      variant="ghost"
       onClick={handleCopy}
       className={rootButtonClasses}
       title={buttonTitle}
@@ -118,6 +119,6 @@ export default function CopyButton({
       <span className="sr-only" aria-live="polite" aria-atomic="true">
         {isCopied ? t('conversation.copied', 'Copied to clipboard') : ''}
       </span>
-    </button>
+    </Button>
   );
 }
diff --git a/frontend/src/components/DocumentPagination.tsx b/frontend/src/components/DocumentPagination.tsx
index a4b0a8fb..94692bfe 100644
--- a/frontend/src/components/DocumentPagination.tsx
+++ b/frontend/src/components/DocumentPagination.tsx
@@ -4,6 +4,7 @@ import SingleArrowLeft from '../assets/single-left-arrow.svg';
 import SingleArrowRight from '../assets/single-right-arrow.svg';
 import DoubleArrowLeft from '../assets/double-arrow-left.svg';
 import DoubleArrowRight from '../assets/double-arrow-right.svg';
+import { Button } from './ui/button';
 
 interface PaginationProps {
   currentPage: number;
@@ -59,12 +60,15 @@ const Pagination: React.FC<PaginationProps> = ({
           {t('pagination.rowsPerPage')}:
         </span>
         <div className="relative">
-          <button
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
             onClick={toggleDropdown}
-            className="dark:bg-card dark:text-foreground hover:bg-accent dark:hover:bg-accent rounded border px-3 py-1"
+            className="dark:bg-card h-auto rounded px-3 py-1 shadow-none"
           >
             {rowsPerPage}
-          </button>
+          </Button>
           <div
             className={`ring-opacity-5 dark:bg-card bg-card absolute right-0 z-50 mt-1 w-28 transform shadow-lg ring-1 ring-black transition-all duration-200 ease-in-out ${
               isDropdownOpen
@@ -94,50 +98,62 @@ const Pagination: React.FC<PaginationProps> = ({
         {t('pagination.pageOf', { currentPage, totalPages })}
       </div>
       <div className="flex items-center gap-2 text-gray-900 dark:text-gray-50">
-        <button
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
           onClick={handleFirstPage}
           disabled={currentPage === 1}
-          className="rounded border px-2 py-1 disabled:opacity-50"
+          className="h-auto rounded px-2 py-1 shadow-none"
         >
           <img
             src={DoubleArrowLeft}
             alt={t('pagination.firstPage')}
             className="dark:brightness-200 dark:invert dark:sepia"
           />
-        </button>
-        <button
+        </Button>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
           onClick={handlePreviousPage}
           disabled={currentPage === 1}
-          className="rounded border px-2 py-1 disabled:opacity-50"
+          className="h-auto rounded px-2 py-1 shadow-none"
         >
           <img
             src={SingleArrowLeft}
             alt={t('pagination.previousPage')}
             className="dark:brightness-200 dark:invert dark:sepia"
           />
-        </button>
-        <button
+        </Button>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
           onClick={handleNextPage}
           disabled={currentPage === totalPages}
-          className="rounded border px-2 py-1 disabled:opacity-50"
+          className="h-auto rounded px-2 py-1 shadow-none"
         >
           <img
             src={SingleArrowRight}
             alt={t('pagination.nextPage')}
             className="dark:brightness-200 dark:invert dark:sepia"
           />
-        </button>
-        <button
+        </Button>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
           onClick={handleLastPage}
           disabled={currentPage === totalPages}
-          className="rounded border px-2 py-1 disabled:opacity-50"
+          className="h-auto rounded px-2 py-1 shadow-none"
         >
           <img
             src={DoubleArrowRight}
             alt={t('pagination.lastPage')}
             className="dark:brightness-200 dark:invert dark:sepia"
           />
-        </button>
+        </Button>
       </div>
     </div>
   );
diff --git a/frontend/src/components/Dropdown.tsx b/frontend/src/components/Dropdown.tsx
deleted file mode 100644
index 7dcaefc4..00000000
--- a/frontend/src/components/Dropdown.tsx
+++ /dev/null
@@ -1,245 +0,0 @@
-import { Check, ChevronDown, Pencil, Search, Trash2 } from 'lucide-react';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-
-type OptionBase = { id?: string; type?: string };
-type NameIdOption = { name: string; id: string } & OptionBase;
-type LabelValueOption = { label: string; value: string } & OptionBase;
-type ValueDescriptionOption = {
-  value: number;
-  description: string;
-} & OptionBase;
-
-export type DropdownOption =
-  | string
-  | NameIdOption
-  | LabelValueOption
-  | ValueDescriptionOption;
-
-export type { NameIdOption, LabelValueOption, ValueDescriptionOption };
-
-function getOptionText(option: DropdownOption): string {
-  if (typeof option === 'string') return option;
-  if ('name' in option) return option.name;
-  if ('label' in option) return option.label;
-  if ('description' in option)
-    return option.value < 1e9
-      ? `${option.value} (${option.description})`
-      : option.description;
-  return '';
-}
-
-function optionMatches(
-  option: DropdownOption,
-  selected: DropdownOption | null,
-): boolean {
-  if (!selected) return false;
-  if (typeof selected === 'string' && typeof option === 'string')
-    return selected === option;
-  if (typeof selected === 'string') return getOptionText(option) === selected;
-  if (typeof option === 'string') return getOptionText(selected) === option;
-  const a = option as Record<string, unknown>;
-  const b = selected as Record<string, unknown>;
-  if ('name' in a && 'name' in b) return a.name === b.name;
-  if ('label' in a && 'label' in b) return a.label === b.label;
-  if ('value' in a && 'value' in b) return a.value === b.value;
-  return false;
-}
-
-export interface DropdownProps<T extends DropdownOption = DropdownOption> {
-  options: T[];
-  selectedValue: DropdownOption | null;
-  onSelect: (value: T) => void;
-  size?: string;
-  rounded?: 'xl' | '3xl';
-  searchable?: boolean;
-  placeholder?: string;
-  contentSize?: string;
-  showEdit?: boolean;
-  onEdit?: (value: NameIdOption) => void;
-  showDelete?: boolean | ((option: T) => boolean);
-  onDelete?: (id: string) => void;
-}
-
-function Dropdown<T extends DropdownOption>({
-  options,
-  selectedValue,
-  onSelect,
-  size = 'w-full',
-  rounded = '3xl',
-  searchable = false,
-  placeholder = 'Select...',
-  contentSize = 'text-sm',
-  showEdit,
-  onEdit,
-  showDelete,
-  onDelete,
-}: DropdownProps<T>) {
-  const ref = useRef<HTMLDivElement>(null);
-  const searchRef = useRef<HTMLInputElement>(null);
-  const [open, setOpen] = useState(false);
-  const [query, setQuery] = useState('');
-  const [dropUp, setDropUp] = useState(false);
-
-  const radius = rounded === '3xl' ? 'rounded-3xl' : 'rounded-xl';
-  const radiusTop = rounded === '3xl' ? 'rounded-t-3xl' : 'rounded-t-xl';
-  const radiusBottom = rounded === '3xl' ? 'rounded-b-3xl' : 'rounded-b-xl';
-
-  useEffect(() => {
-    const handler = (e: MouseEvent) => {
-      if (ref.current && !ref.current.contains(e.target as Node)) {
-        setOpen(false);
-        setQuery('');
-      }
-    };
-    document.addEventListener('mousedown', handler, true);
-    return () => document.removeEventListener('mousedown', handler, true);
-  }, []);
-
-  useEffect(() => {
-    if (open && searchable && searchRef.current) searchRef.current.focus();
-  }, [open, searchable]);
-
-  const handleToggle = () => {
-    if (!open && ref.current) {
-      const rect = ref.current.getBoundingClientRect();
-      const spaceBelow = window.innerHeight - rect.bottom;
-      setDropUp(spaceBelow < 220);
-    }
-    setOpen((v) => !v);
-  };
-
-  const filtered = useMemo(() => {
-    if (!searchable || !query.trim()) return options;
-    const q = query.toLowerCase();
-    return options.filter((o) => getOptionText(o).toLowerCase().includes(q));
-  }, [options, query, searchable]);
-
-  const displayValue = selectedValue ? getOptionText(selectedValue) : null;
-
-  return (
-    <div className={`relative ${size}`} ref={ref}>
-      <button
-        type="button"
-        onClick={handleToggle}
-        className={`border-border bg-card text-foreground flex w-full cursor-pointer items-center justify-between border px-5 py-3 ${open ? (dropUp ? radiusBottom : radiusTop) : radius}`}
-      >
-        <span
-          className={`truncate ${contentSize} ${displayValue ? '' : 'text-muted-foreground'}`}
-        >
-          {displayValue ?? placeholder}
-        </span>
-        <ChevronDown
-          className={`text-muted-foreground ml-2 h-4 w-4 shrink-0 transition-transform ${open ? 'rotate-180' : ''}`}
-        />
-      </button>
-
-      {open && (
-        <div
-          className={`border-border bg-card absolute inset-x-0 z-20 overflow-hidden border shadow-lg ${
-            dropUp
-              ? `bottom-full -mt-px border-b-0 ${radiusTop}`
-              : `-mt-px border-t-0 ${radiusBottom}`
-          }`}
-        >
-          {searchable && (
-            <div className="flex items-center px-3 py-2">
-              <Search className="text-muted-foreground mr-2 h-4 w-4 shrink-0" />
-              <input
-                ref={searchRef}
-                type="text"
-                value={query}
-                onChange={(e) => setQuery(e.target.value)}
-                placeholder="Search..."
-                className="text-foreground placeholder:text-muted-foreground w-full bg-transparent text-sm focus:outline-none"
-                onClick={(e) => e.stopPropagation()}
-              />
-            </div>
-          )}
-
-          <div className="scrollbar-thin border-border max-h-48 overflow-y-auto border-t">
-            {filtered.length === 0 ? (
-              <div className="text-muted-foreground px-4 py-3 text-center text-sm">
-                No results found
-              </div>
-            ) : (
-              filtered.map((option, i) => {
-                const active = optionMatches(option, selectedValue);
-                const optObj =
-                  typeof option !== 'string'
-                    ? (option as Record<string, unknown>)
-                    : null;
-
-                return (
-                  <div
-                    key={i}
-                    className={`hover:bg-accent flex cursor-pointer items-center justify-between ${active ? 'bg-accent font-medium' : ''}`}
-                  >
-                    <span
-                      onClick={() => {
-                        onSelect(option);
-                        setOpen(false);
-                        setQuery('');
-                      }}
-                      className={`text-foreground flex-1 truncate px-4 py-2.5 ${contentSize}`}
-                    >
-                      {getOptionText(option)}
-                    </span>
-
-                    {active && !showEdit && !showDelete && (
-                      <Check className="text-primary mr-3 h-4 w-4 shrink-0" />
-                    )}
-
-                    {showEdit &&
-                      onEdit &&
-                      optObj &&
-                      optObj.type !== 'public' && (
-                        <button
-                          type="button"
-                          onClick={() => {
-                            onEdit({
-                              id: optObj.id as string,
-                              name: optObj.name as string,
-                              type: optObj.type as string,
-                            });
-                            setOpen(false);
-                            setQuery('');
-                          }}
-                          className="hover:bg-accent mr-1 rounded p-1"
-                        >
-                          <Pencil className="text-muted-foreground h-3.5 w-3.5" />
-                        </button>
-                      )}
-
-                    {showDelete && onDelete && (
-                      <button
-                        type="button"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          onDelete(
-                            typeof option === 'string'
-                              ? option
-                              : ((optObj?.id as string) ?? ''),
-                          );
-                        }}
-                        className={`hover:bg-accent mr-1 rounded p-1 ${
-                          typeof showDelete === 'function' &&
-                          !showDelete(option)
-                            ? 'hidden'
-                            : ''
-                        } ${optObj?.type === 'public' ? 'pointer-events-none opacity-30' : ''}`}
-                      >
-                        <Trash2 className="text-muted-foreground h-3.5 w-3.5" />
-                      </button>
-                    )}
-                  </div>
-                );
-              })
-            )}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default Dropdown;
diff --git a/frontend/src/components/DropdownMenu.tsx b/frontend/src/components/DropdownMenu.tsx
deleted file mode 100644
index a10e4f57..00000000
--- a/frontend/src/components/DropdownMenu.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-
-type DropdownMenuProps = {
-  name: string;
-  options: { label: string; value: string }[];
-  onSelect: (value: string) => void;
-  defaultValue?: string;
-  icon?: string;
-  isOpen: boolean;
-  onOpenChange: (isOpen: boolean) => void;
-  anchorRef: React.RefObject<HTMLElement | null>;
-  position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
-  offset?: { x: number; y: number };
-  className?: string;
-};
-
-export default function DropdownMenu({
-  name,
-  options,
-  onSelect,
-  defaultValue = 'none',
-  icon,
-  isOpen: controlledIsOpen,
-  onOpenChange,
-  anchorRef,
-  className = '',
-  position = 'bottom-right',
-  offset = { x: 0, y: 8 },
-}: DropdownMenuProps) {
-  const dropdownRef = React.useRef<HTMLDivElement>(null);
-  const [internalIsOpen, setInternalIsOpen] = React.useState(false);
-  const [selectedOption, setSelectedOption] = React.useState(
-    options.find((option) => option.value === defaultValue) || options[0],
-  );
-
-  const isOpen =
-    controlledIsOpen !== undefined ? controlledIsOpen : internalIsOpen;
-  const setIsOpen = onOpenChange || setInternalIsOpen;
-
-  const handleClickOutside = (event: MouseEvent) => {
-    if (
-      dropdownRef.current &&
-      !dropdownRef.current.contains(event.target as Node) &&
-      !anchorRef?.current?.contains(event.target as Node)
-    ) {
-      setIsOpen(false);
-    }
-  };
-
-  const handleClickOption = (optionId: number) => {
-    setIsOpen(false);
-    setSelectedOption(options[optionId]);
-    onSelect(options[optionId].value);
-  };
-
-  React.useEffect(() => {
-    if (isOpen) {
-      document.addEventListener('mousedown', handleClickOutside);
-      return () =>
-        document.removeEventListener('mousedown', handleClickOutside);
-    }
-  }, [isOpen]);
-
-  if (!isOpen) return null;
-
-  const getMenuPosition = (): React.CSSProperties => {
-    if (!anchorRef?.current) return {};
-
-    const rect = anchorRef.current.getBoundingClientRect();
-
-    const top = rect.bottom + offset.y;
-    const left = rect.right + offset.x;
-
-    return {
-      position: 'fixed',
-      top: `${top}px`,
-      left: `${left}px`,
-      zIndex: 9999,
-    };
-  };
-
-  // Use a portal to render the dropdown outside the table flow
-  return ReactDOM.createPortal(
-    <div
-      ref={dropdownRef}
-      style={{ ...getMenuPosition() }}
-      onClick={(e) => e.stopPropagation()}
-    >
-      <div
-        className={`border-border bg-card w-28 transform rounded-md border shadow-lg transition-all duration-200 ease-in-out ${className}`}
-      >
-        <div
-          role="menu"
-          className="overflow-hidden rounded-md"
-          aria-orientation="vertical"
-          aria-labelledby="options-menu"
-        >
-          {options.map((option, idx) => (
-            <div
-              id={`option-${idx}`}
-              className={`dark:text-foreground hover:bg-muted cursor-pointer px-4 py-2 text-xs ${
-                selectedOption.value === option.value ? 'bg-muted' : 'bg-card'
-              }`}
-              role="menuitem"
-              key={option.value}
-              onClick={() => handleClickOption(idx)}
-            >
-              {option.label}
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>,
-    document.body,
-  );
-}
diff --git a/frontend/src/components/DropdownModel.tsx b/frontend/src/components/DropdownModel.tsx
deleted file mode 100644
index f1f96667..00000000
--- a/frontend/src/components/DropdownModel.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-import React, { useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-
-import modelService from '../api/services/modelService';
-import Arrow2 from '../assets/dropdown-arrow.svg';
-import RoundedTick from '../assets/rounded-tick.svg';
-import {
-  selectAvailableModels,
-  selectSelectedModel,
-  selectToken,
-  setAvailableModels,
-  setModelsLoading,
-  setSelectedModel,
-} from '../preferences/preferenceSlice';
-
-import type { Model } from '../models/types';
-
-export default function DropdownModel() {
-  const dispatch = useDispatch();
-  const selectedModel = useSelector(selectSelectedModel);
-  const availableModels = useSelector(selectAvailableModels);
-  const token = useSelector(selectToken);
-  const dropdownRef = React.useRef<HTMLDivElement>(null);
-  // Tracks which token the cached availableModels were loaded for.
-  // Without this, the early-return below pins the anonymous/built-in
-  // list forever once it's populated — login/logout never refetches
-  // and a user's BYOM models stay invisible.
-  const lastLoadedTokenRef = React.useRef<string | null | undefined>(undefined);
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  useEffect(() => {
-    const loadModels = async () => {
-      if (
-        (availableModels?.length ?? 0) > 0 &&
-        lastLoadedTokenRef.current === token
-      ) {
-        return;
-      }
-      dispatch(setModelsLoading(true));
-      try {
-        const response = await modelService.getModels(token);
-        if (!response.ok) {
-          throw new Error(`API error: ${response.status}`);
-        }
-        const data = await response.json();
-        const models = data.models || [];
-        const transformed = modelService.transformModels(models);
-
-        dispatch(setAvailableModels(transformed));
-        lastLoadedTokenRef.current = token;
-        if (!selectedModel && transformed.length > 0) {
-          const defaultModel =
-            transformed.find((m) => m.id === data.default_model_id) ||
-            transformed[0];
-          dispatch(setSelectedModel(defaultModel));
-        } else if (selectedModel && transformed.length > 0) {
-          const isValid = transformed.find((m) => m.id === selectedModel.id);
-          if (!isValid) {
-            const defaultModel =
-              transformed.find((m) => m.id === data.default_model_id) ||
-              transformed[0];
-            dispatch(setSelectedModel(defaultModel));
-          }
-        }
-      } catch (error) {
-        console.error('Failed to load models:', error);
-      } finally {
-        dispatch(setModelsLoading(false));
-      }
-    };
-
-    loadModels();
-  }, [availableModels?.length, dispatch, selectedModel, token]);
-
-  const handleClickOutside = (event: MouseEvent) => {
-    if (
-      dropdownRef.current &&
-      !dropdownRef.current.contains(event.target as Node)
-    ) {
-      setIsOpen(false);
-    }
-  };
-
-  useEffect(() => {
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, []);
-
-  return (
-    <div ref={dropdownRef}>
-      <div
-        className={`text-foreground bg-muted dark:bg-card mx-auto flex w-full cursor-pointer items-center justify-between px-3 py-4 ${isOpen ? 'rounded-t-4xl' : 'rounded-4xl'}`}
-        onClick={() => setIsOpen(!isOpen)}
-      >
-        {selectedModel?.display_name ? (
-          <p className="ml-3 truncate overflow-hidden whitespace-nowrap">
-            {selectedModel.display_name}
-          </p>
-        ) : (
-          <p className="text-muted-foreground truncate overflow-hidden whitespace-nowrap">
-            Select Model
-          </p>
-        )}
-        <img
-          src={Arrow2}
-          alt="arrow"
-          className={`${
-            isOpen ? 'rotate-360' : 'rotate-270'
-          } mr-3 w-3 transition-all select-none`}
-        />
-      </div>
-      {isOpen && (
-        <div className="no-scrollbar bg-muted dark:bg-card absolute right-0 left-0 z-20 -mt-1 max-h-52 w-full overflow-y-auto rounded-b-3xl shadow-md">
-          {availableModels && (availableModels?.length ?? 0) > 0 ? (
-            availableModels.map((model: Model) => (
-              <div
-                key={model.id}
-                onClick={() => {
-                  dispatch(setSelectedModel(model));
-                  setIsOpen(false);
-                }}
-                className={`border-border/30 hover:bg-accent flex h-10 w-full cursor-pointer items-center justify-between border-t`}
-              >
-                <div className="flex w-full items-center justify-between">
-                  <p className="flex-1 truncate py-3 pr-2 pl-5">
-                    {model.display_name}
-                  </p>
-                  {model.id === selectedModel?.id ? (
-                    <img
-                      src={RoundedTick}
-                      alt="selected"
-                      className="mr-3.5 h-4 w-4"
-                    />
-                  ) : null}
-                </div>
-              </div>
-            ))
-          ) : (
-            <div className="border-border/30 flex h-10 w-full items-center border-t">
-              <p className="text-muted-foreground pl-5 text-sm">
-                No models available
-              </p>
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/frontend/src/components/FilePicker.tsx b/frontend/src/components/FilePicker.tsx
index 7b8e3892..5c3fd1a1 100644
--- a/frontend/src/components/FilePicker.tsx
+++ b/frontend/src/components/FilePicker.tsx
@@ -13,7 +13,8 @@ import FileIcon from '../assets/file.svg';
 import FolderIcon from '../assets/folder.svg';
 import CheckIcon from '../assets/checkmark.svg';
 import SearchIcon from '../assets/search.svg';
-import Input from './Input';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
 import {
   Table,
   TableContainer,
@@ -22,7 +23,7 @@ import {
   TableRow,
   TableHeader,
   TableCell,
-} from './Table';
+} from './ui/table';
 import { useDebouncedCallback } from '../hooks';
 
 interface CloudFile {
@@ -432,26 +433,30 @@ export const FilePicker: React.FC<CloudFilePickerProps> = ({
           <div className="border-border dark:border-border rounded-t-lg">
             {provider === 'share_point' && allowsSharedContent && (
               <div className="border-border dark:border-border flex border-b">
-                <button
+                <Button
+                  type="button"
+                  variant="ghost"
                   onClick={() => handleTabChange('my_files')}
-                  className={`px-4 py-2 text-sm font-medium ${
+                  className={`h-auto rounded-none px-4 py-2 text-sm font-medium ${
                     activeTab === 'my_files'
-                      ? 'border-b-2 border-[#A076F6] text-[#A076F6]'
+                      ? 'border-b-2 border-[#A076F6] text-[#A076F6] hover:bg-transparent hover:text-[#A076F6]'
                       : 'text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200'
                   }`}
                 >
                   {t('filePicker.myFiles')}
-                </button>
-                <button
+                </Button>
+                <Button
+                  type="button"
+                  variant="ghost"
                   onClick={() => handleTabChange('shared')}
-                  className={`px-4 py-2 text-sm font-medium ${
+                  className={`h-auto rounded-none px-4 py-2 text-sm font-medium ${
                     activeTab === 'shared'
-                      ? 'border-b-2 border-[#A076F6] text-[#A076F6]'
+                      ? 'border-b-2 border-[#A076F6] text-[#A076F6] hover:bg-transparent hover:text-[#A076F6]'
                       : 'text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200'
                   }`}
                 >
                   {t('filePicker.sharedWithMe')}
-                </button>
+                </Button>
               </div>
             )}
             <div className="dark:bg-muted rounded-t-lg bg-[#EEE6FF78] px-4 pt-4">
@@ -462,13 +467,16 @@ export const FilePicker: React.FC<CloudFilePickerProps> = ({
                     className="flex items-center gap-1"
                   >
                     {index > 0 && <span className="text-gray-400">/</span>}
-                    <button
+                    <Button
+                      type="button"
+                      variant="link"
+                      size="sm"
                       onClick={() => navigateBack(index)}
-                      className="text-sm text-[#A076F6] hover:text-[#8A5FD4] hover:underline"
+                      className="h-auto p-0 text-sm text-[#A076F6] underline-offset-2 hover:text-[#8A5FD4]"
                       disabled={index === folderPath.length - 1}
                     >
                       {path.name}
-                    </button>
+                    </Button>
                   </div>
                 ))}
               </div>
@@ -480,11 +488,9 @@ export const FilePicker: React.FC<CloudFilePickerProps> = ({
               <div className="mb-3 max-w-md">
                 <Input
                   type="text"
-                  placeholder={t('filePicker.searchPlaceholder')}
+                  label={t('filePicker.searchPlaceholder')}
                   value={searchQuery}
                   onChange={(e) => handleSearchChange(e.target.value)}
-                  colorVariant="silver"
-                  borderVariant="thin"
                   labelBgClassName="bg-[#EEE6FF78] dark:bg-muted"
                   leftIcon={
                     <img src={SearchIcon} alt="Search" width={16} height={16} />
diff --git a/frontend/src/components/FileSelectionSkeleton.tsx b/frontend/src/components/FileSelectionSkeleton.tsx
deleted file mode 100644
index 7bdc3d01..00000000
--- a/frontend/src/components/FileSelectionSkeleton.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-const FilesSectionSkeleton = () => (
-  <div className="border-border dark:border-border rounded-lg border">
-    <div className="p-4">
-      <div className="mb-4 flex items-center justify-between">
-        <div className="h-5 w-24 animate-pulse rounded bg-gray-200 dark:bg-gray-700"></div>
-        <div className="h-8 w-24 animate-pulse rounded bg-gray-200 dark:bg-gray-700"></div>
-      </div>
-      <div className="h-4 w-40 animate-pulse rounded bg-gray-200 dark:bg-gray-700"></div>
-    </div>
-  </div>
-);
-
-export default FilesSectionSkeleton;
diff --git a/frontend/src/components/FileTree.tsx b/frontend/src/components/FileTree.tsx
index 04626051..e9e6fbf1 100644
--- a/frontend/src/components/FileTree.tsx
+++ b/frontend/src/components/FileTree.tsx
@@ -1,43 +1,26 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { SyntheticEvent, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useSelector, useStore } from 'react-redux';
-import { selectToken } from '../preferences/preferenceSlice';
-import type { RootState } from '../store';
-import { formatBytes } from '../utils/stringUtils';
-import Chunks from './Chunks';
-import ContextMenu, { MenuOption } from './ContextMenu';
-import SkeletonLoader from './SkeletonLoader';
+import { useSelector } from 'react-redux';
 import userService from '../api/services/userService';
-import FileIcon from '../assets/file.svg';
-import FolderIcon from '../assets/folder.svg';
-import ArrowLeft from '../assets/arrow-left.svg';
-import ThreeDots from '../assets/three-dots.svg';
-import EyeView from '../assets/eye-view.svg';
 import Trash from '../assets/red-trash.svg';
 import { SOURCE_FILE_TREE_ACCEPT_ATTR } from '../constants/fileUpload';
-import { useOutsideAlerter, useLoaderState } from '../hooks';
 import ConfirmationModal from '../modals/ConfirmationModal';
-import {
-  Table,
-  TableContainer,
-  TableHead,
-  TableBody,
-  TableRow,
-  TableHeader,
-  TableCell,
-} from './Table';
+import { selectToken } from '../preferences/preferenceSlice';
+import TreeBrowser from './tree/TreeBrowser';
+import type {
+  RowMenuContext,
+  TreeBrowserController,
+  TreeMenuOption,
+} from './tree/types';
+import { useReingestSseWaiter } from './tree/useReingestWait';
 
-interface FileNode {
-  type?: string;
-  token_count?: number;
-  size_bytes?: number;
-  display_name?: string;
-  [key: string]: any;
-}
-
-interface DirectoryStructure {
-  [key: string]: FileNode;
-}
+type QueuedOperation = {
+  operation: 'add' | 'remove' | 'remove_directory';
+  files?: File[];
+  filePath?: string;
+  directoryPath?: string;
+  parentDirPath?: string;
+};
 
 interface FileTreeProps {
   docId: string;
@@ -45,39 +28,16 @@ interface FileTreeProps {
   onBackToDocuments: () => void;
 }
 
-interface SearchResult {
-  name: string;
-  path: string;
-  isFile: boolean;
-}
-
 const FileTree: React.FC<FileTreeProps> = ({
   docId,
   sourceName,
   onBackToDocuments,
 }) => {
   const { t } = useTranslation();
-  const store = useStore<RootState>();
-  const [loading, setLoading] = useLoaderState(true, 500);
-  const [error, setError] = useState<string | null>(null);
-  const [directoryStructure, setDirectoryStructure] =
-    useState<DirectoryStructure | null>(null);
-  const [currentPath, setCurrentPath] = useState<string[]>([]);
   const token = useSelector(selectToken);
-  const [activeMenuId, setActiveMenuId] = useState<string | null>(null);
-  const menuRefs = useRef<{
-    [key: string]: React.RefObject<HTMLDivElement | null>;
-  }>({});
-  const [selectedFile, setSelectedFile] = useState<{
-    id: string;
-    name: string;
-  } | null>(null);
-  const [searchQuery, setSearchQuery] = useState('');
-  const [searchResults, setSearchResults] = useState<SearchResult[]>([]);
-  const searchDropdownRef = useRef<HTMLDivElement>(null);
-  const currentOpRef = useRef<null | 'add' | 'remove' | 'remove_directory'>(
-    null,
-  );
+
+  const controllerRef = useRef<TreeBrowserController | null>(null);
+  const currentPathRef = useRef<string[]>([]);
 
   const [deleteModalState, setDeleteModalState] = useState<
     'ACTIVE' | 'INACTIVE'
@@ -87,209 +47,15 @@ const FileTree: React.FC<FileTreeProps> = ({
     isFile: boolean;
   } | null>(null);
 
-  type QueuedOperation = {
-    operation: 'add' | 'remove' | 'remove_directory';
-    files?: File[];
-    filePath?: string;
-    directoryPath?: string;
-    parentDirPath?: string;
-  };
+  const currentOpRef = useRef<null | 'add' | 'remove' | 'remove_directory'>(
+    null,
+  );
   const opQueueRef = useRef<QueuedOperation[]>([]);
   const processingRef = useRef(false);
-  const [queueLength, setQueueLength] = useState(0);
-  const mountedRef = useRef(true);
-  const waitUnsubscribeRef = useRef<(() => void) | null>(null);
-  // Holds the 5-minute SSE-wait timer so the unmount cleanup can clear
-  // it — otherwise the timer fires up to 5 min after unmount and
-  // resolves an abandoned Promise.
-  const waitTimerRef = useRef<number | null>(null);
+  const [, setQueueLength] = useState(0);
+  const [isProcessing, setIsProcessing] = useState(false);
 
-  useEffect(
-    () => () => {
-      mountedRef.current = false;
-      waitUnsubscribeRef.current?.();
-      waitUnsubscribeRef.current = null;
-      if (waitTimerRef.current !== null) {
-        window.clearTimeout(waitTimerRef.current);
-        waitTimerRef.current = null;
-      }
-    },
-    [],
-  );
-
-  useOutsideAlerter(
-    searchDropdownRef,
-    () => {
-      setSearchQuery('');
-      setSearchResults([]);
-    },
-    [],
-    false,
-  );
-
-  const handleFileClick = (fileName: string, displayName?: string) => {
-    const fullPath = [...currentPath, fileName].join('/');
-    setSelectedFile({
-      id: fullPath,
-      name: displayName ?? fileName,
-    });
-  };
-
-  useEffect(() => {
-    const fetchDirectoryStructure = async () => {
-      try {
-        setLoading(true);
-        const response = await userService.getDirectoryStructure(docId, token);
-        const data = await response.json();
-
-        if (data && data.directory_structure) {
-          setDirectoryStructure(data.directory_structure);
-        } else {
-          setError('Invalid response format');
-        }
-      } catch (err) {
-        setError('Failed to load directory structure');
-        console.error(err);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    if (docId) {
-      fetchDirectoryStructure();
-    }
-  }, [docId, token]);
-
-  const navigateToDirectory = (dirName: string) => {
-    setCurrentPath((prev) => [...prev, dirName]);
-  };
-
-  const navigateUp = () => {
-    setCurrentPath((prev) => prev.slice(0, -1));
-  };
-
-  const getCurrentDirectory = (): DirectoryStructure => {
-    if (!directoryStructure) return {};
-
-    let structure = directoryStructure;
-    if (typeof structure === 'string') {
-      try {
-        structure = JSON.parse(structure);
-      } catch (e) {
-        console.error(
-          'Error parsing directory structure in getCurrentDirectory:',
-          e,
-        );
-        return {};
-      }
-    }
-
-    if (typeof structure !== 'object' || structure === null) {
-      return {};
-    }
-
-    let current: any = structure;
-    for (const dir of currentPath) {
-      if (
-        current[dir] &&
-        typeof current[dir] === 'object' &&
-        !current[dir].type
-      ) {
-        current = current[dir];
-      } else {
-        return {};
-      }
-    }
-    return current;
-  };
-
-  const handleBackNavigation = () => {
-    if (selectedFile) {
-      setSelectedFile(null);
-    } else if (currentPath.length === 0) {
-      if (onBackToDocuments) {
-        onBackToDocuments();
-      }
-    } else {
-      navigateUp();
-    }
-  };
-
-  const getMenuRef = (itemId: string) => {
-    if (!menuRefs.current[itemId]) {
-      menuRefs.current[itemId] = React.createRef<HTMLDivElement>();
-    }
-    return menuRefs.current[itemId];
-  };
-
-  const handleMenuClick = (e: React.MouseEvent, itemId: string) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    if (activeMenuId === itemId) {
-      setActiveMenuId(null);
-      return;
-    }
-    setActiveMenuId(itemId);
-  };
-
-  const getActionOptions = (
-    name: string,
-    isFile: boolean,
-    _itemId: string,
-    displayName?: string,
-  ): MenuOption[] => {
-    const options: MenuOption[] = [];
-
-    options.push({
-      icon: EyeView,
-      label: t('settings.sources.view'),
-      onClick: (event: React.SyntheticEvent) => {
-        event.stopPropagation();
-        if (isFile) {
-          handleFileClick(name, displayName);
-        } else {
-          navigateToDirectory(name);
-        }
-      },
-      iconWidth: 18,
-      iconHeight: 18,
-      variant: 'primary',
-    });
-
-    options.push({
-      icon: Trash,
-      label: t('convTile.delete'),
-      onClick: (event: React.SyntheticEvent) => {
-        event.stopPropagation();
-        confirmDeleteItem(name, isFile);
-      },
-      iconWidth: 18,
-      iconHeight: 18,
-      variant: 'danger',
-    });
-
-    return options;
-  };
-
-  const confirmDeleteItem = (name: string, isFile: boolean) => {
-    setItemToDelete({ name, isFile });
-    setDeleteModalState('ACTIVE');
-    setActiveMenuId(null);
-  };
-
-  const handleConfirmedDelete = async () => {
-    if (itemToDelete) {
-      await handleDeleteFile(itemToDelete.name, itemToDelete.isFile);
-      setDeleteModalState('INACTIVE');
-      setItemToDelete(null);
-    }
-  };
-
-  const handleCancelDelete = () => {
-    setDeleteModalState('INACTIVE');
-    setItemToDelete(null);
-  };
+  const { waitForTerminal, mountedRef } = useReingestSseWaiter();
 
   const manageSource = async (
     operation: 'add' | 'remove' | 'remove_directory',
@@ -306,8 +72,10 @@ const FileTree: React.FC<FileTreeProps> = ({
       formData.append('operation', operation);
 
       if (operation === 'add' && files && files.length) {
-        formData.append('parent_dir', parentDirPath ?? currentPath.join('/'));
-
+        formData.append(
+          'parent_dir',
+          parentDirPath ?? currentPathRef.current.join('/'),
+        );
         for (let i = 0; i < files.length; i++) {
           formData.append('file', files[i]);
         }
@@ -322,109 +90,17 @@ const FileTree: React.FC<FileTreeProps> = ({
       const result = await response.json();
 
       if (result.success && result.reingest_task_id) {
-        if (operation === 'add') {
-          console.log('Files uploaded successfully:', result.added_files);
-        } else if (operation === 'remove') {
-          console.log('Files deleted successfully:', result.removed_files);
-        } else if (operation === 'remove_directory') {
-          console.log(
-            'Directory deleted successfully:',
-            result.removed_directory,
-          );
-        }
-        console.log('Reingest task started:', result.reingest_task_id);
-
-        // SSE is the sole driver here. The backend's
-        // ``reingest_source_worker`` publishes ``source.ingest.*``
-        // keyed on the resolved ``source_id`` (the
-        // ``manage_source_files`` route returns it explicitly so we
-        // can match without consulting any slice). Subscribe to the
-        // store and resolve when a terminal event tagged with our
-        // source lands in ``notifications.recentEvents``. Re-checking
-        // on every dispatch (rather than polling on a timer) avoids
-        // races where a terminal could roll off the bounded ring
-        // before the next tick observes it in chatty sessions.
         const reingestSourceId: string | undefined = result.source_id;
-        // Cutoff so we don't pick up terminal events from a *previous*
-        // reingest of the same source — the backend's
-        // ``source.ingest.*`` payload doesn't carry a Celery task id,
-        // so source_id alone is ambiguous when ops repeat.
         const opStartedAt = Date.now();
-        const MAX_WAIT_MS = 5 * 60_000;
-
-        const terminalFromSse = (): 'completed' | 'failed' | null => {
-          if (!reingestSourceId) return null;
-          const events = store.getState().notifications.recentEvents;
-          for (const event of events) {
-            if (event.scope?.id !== reingestSourceId) continue;
-            const ts = event.ts ? Date.parse(event.ts) : NaN;
-            if (!Number.isFinite(ts) || ts < opStartedAt) continue;
-            if (event.type === 'source.ingest.completed') return 'completed';
-            if (event.type === 'source.ingest.failed') return 'failed';
-          }
-          return null;
-        };
-
-        const refreshStructure = async (): Promise<boolean> => {
-          const structureResponse = await userService.getDirectoryStructure(
-            docId,
-            token,
-          );
-          const structureData = await structureResponse.json();
-          if (!mountedRef.current) return false;
-          if (structureData && structureData.directory_structure) {
-            setDirectoryStructure(structureData.directory_structure);
-            currentOpRef.current = null;
-            return true;
-          }
-          return false;
-        };
-
-        const terminal = await new Promise<
-          'completed' | 'failed' | 'timeout' | 'unmounted'
-        >((resolve) => {
-          if (!mountedRef.current) {
-            resolve('unmounted');
-            return;
-          }
-          // Cover the race where the terminal event landed between
-          // the POST returning and the subscribe call.
-          const initial = terminalFromSse();
-          if (initial) {
-            resolve(initial);
-            return;
-          }
-          const timer = window.setTimeout(() => {
-            waitUnsubscribeRef.current?.();
-            waitUnsubscribeRef.current = null;
-            waitTimerRef.current = null;
-            resolve('timeout');
-          }, MAX_WAIT_MS);
-          waitTimerRef.current = timer;
-          waitUnsubscribeRef.current = store.subscribe(() => {
-            if (!mountedRef.current) {
-              window.clearTimeout(timer);
-              waitTimerRef.current = null;
-              waitUnsubscribeRef.current?.();
-              waitUnsubscribeRef.current = null;
-              resolve('unmounted');
-              return;
-            }
-            const next = terminalFromSse();
-            if (next) {
-              window.clearTimeout(timer);
-              waitTimerRef.current = null;
-              waitUnsubscribeRef.current?.();
-              waitUnsubscribeRef.current = null;
-              resolve(next);
-            }
-          });
-        });
 
+        const terminal = await waitForTerminal(reingestSourceId, opStartedAt);
         if (!mountedRef.current) return false;
 
         if (terminal === 'completed') {
-          if (await refreshStructure()) return true;
+          if (await controllerRef.current?.refreshDirectory()) {
+            currentOpRef.current = null;
+            return true;
+          }
         } else if (terminal === 'failed') {
           console.error('Reingest task failed (per SSE)');
         } else if (terminal === 'unmounted') {
@@ -444,14 +120,7 @@ const FileTree: React.FC<FileTreeProps> = ({
           : operation === 'remove_directory'
             ? 'deleting directory'
             : 'deleting file(s)';
-      const errorText =
-        operation === 'add'
-          ? 'upload'
-          : operation === 'remove_directory'
-            ? 'delete directory'
-            : 'delete file(s)';
       console.error(`Error ${actionText}:`, error);
-      if (mountedRef.current) setError(`Failed to ${errorText}`);
     } finally {
       currentOpRef.current = null;
     }
@@ -462,6 +131,7 @@ const FileTree: React.FC<FileTreeProps> = ({
   const processQueue = async () => {
     if (processingRef.current) return;
     processingRef.current = true;
+    setIsProcessing(true);
     try {
       while (opQueueRef.current.length > 0) {
         const nextOp = opQueueRef.current.shift()!;
@@ -476,6 +146,7 @@ const FileTree: React.FC<FileTreeProps> = ({
       }
     } finally {
       processingRef.current = false;
+      setIsProcessing(false);
     }
   };
 
@@ -493,508 +164,117 @@ const FileTree: React.FC<FileTreeProps> = ({
     fileInput.multiple = true;
     fileInput.accept = SOURCE_FILE_TREE_ACCEPT_ATTR;
 
-    fileInput.onchange = async (event) => {
+    fileInput.onchange = (event) => {
       const fileList = (event.target as HTMLInputElement).files;
       if (!fileList || fileList.length === 0) return;
       const files = Array.from(fileList);
       enqueueOperation({
         operation: 'add',
         files,
-        parentDirPath: currentPath.join('/'),
+        parentDirPath: currentPathRef.current.join('/'),
       });
     };
 
     fileInput.click();
   };
 
-  const handleDeleteFile = async (name: string, isFile: boolean) => {
-    // Construct the full path to the file or directory
-    const itemPath = [...currentPath, name].join('/');
-
-    if (isFile) {
-      enqueueOperation({ operation: 'remove', filePath: itemPath });
-    } else {
-      enqueueOperation({
-        operation: 'remove_directory',
-        directoryPath: itemPath,
-      });
-    }
+  const confirmDeleteItem = (name: string, isFile: boolean) => {
+    setItemToDelete({ name, isFile });
+    setDeleteModalState('ACTIVE');
   };
 
-  const renderPathNavigation = () => {
-    return (
-      <div className="mb-0 flex min-h-[38px] flex-col gap-2 text-base sm:flex-row sm:items-center sm:justify-between">
-        {/* Left side with path navigation */}
-        <div className="flex w-full items-center sm:w-auto">
-          <button
-            className="mr-3 flex h-[29px] w-[29px] items-center justify-center rounded-full border p-2 text-sm font-medium text-gray-400 dark:border-0 dark:text-gray-500"
-            onClick={handleBackNavigation}
-          >
-            <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
-          </button>
-
-          <div className="flex flex-wrap items-center">
-            <span className="font-semibold break-words text-[#7D54D1]">
-              {sourceName}
-            </span>
-            {currentPath.length > 0 && (
-              <>
-                <span className="mx-1 flex-shrink-0 text-gray-500">/</span>
-                {currentPath.map((dir, index) => (
-                  <React.Fragment key={index}>
-                    <span className="break-words text-gray-700 dark:text-gray-300">
-                      {dir}
-                    </span>
-                    {index < currentPath.length - 1 && (
-                      <span className="mx-1 flex-shrink-0 text-gray-500">
-                        /
-                      </span>
-                    )}
-                  </React.Fragment>
-                ))}
-              </>
-            )}
-            {selectedFile && (
-              <>
-                <span className="mx-1 flex-shrink-0 text-gray-500">/</span>
-                <span className="break-words text-gray-700 dark:text-gray-300">
-                  {selectedFile.name}
-                </span>
-              </>
-            )}
-          </div>
-        </div>
-
-        <div className="relative mt-2 flex w-full flex-row flex-nowrap items-center justify-end gap-2 sm:mt-0 sm:w-auto">
-          {processingRef.current && (
-            <div className="text-sm text-gray-500">
-              {currentOpRef.current === 'add'
-                ? t('settings.sources.uploadingFilesTitle')
-                : t('settings.sources.deletingTitle')}
-            </div>
-          )}
-
-          {renderFileSearch()}
-
-          {/* Add file button */}
-          {!processingRef.current && (
-            <button
-              onClick={handleAddFile}
-              className="bg-primary hover:bg-primary/90 flex h-[38px] min-w-[108px] items-center justify-center rounded-full px-4 text-[14px] font-medium whitespace-nowrap text-white"
-              title={t('settings.sources.addFile')}
-            >
-              {t('settings.sources.addFile')}
-            </button>
-          )}
-        </div>
-      </div>
-    );
-  };
-  const calculateDirectoryStats = (
-    structure: DirectoryStructure,
-  ): { totalSize: number; totalTokens: number } => {
-    let totalSize = 0;
-    let totalTokens = 0;
-
-    Object.entries(structure).forEach(([_, node]) => {
-      if (node.type) {
-        // It's a file
-        totalSize += node.size_bytes || 0;
-        totalTokens += node.token_count || 0;
+  const handleConfirmedDelete = async () => {
+    if (itemToDelete) {
+      const itemPath = [...currentPathRef.current, itemToDelete.name].join('/');
+      if (itemToDelete.isFile) {
+        enqueueOperation({ operation: 'remove', filePath: itemPath });
       } else {
-        // It's a directory, recurse
-        const stats = calculateDirectoryStats(node);
-        totalSize += stats.totalSize;
-        totalTokens += stats.totalTokens;
-      }
-    });
-
-    return { totalSize, totalTokens };
-  };
-
-  const renderFileTree = (structure: DirectoryStructure): React.ReactNode[] => {
-    // Separate directories and files
-    const entries = Object.entries(structure);
-    const directories = entries.filter(([_, node]) => !node.type);
-    const files = entries.filter(([_, node]) => node.type);
-
-    // Create parent directory row
-    const parentRow =
-      currentPath.length > 0
-        ? [
-            <TableRow key="parent-dir" onClick={navigateUp}>
-              <TableCell width="40%" align="left">
-                <div className="flex items-center">
-                  <img
-                    src={FolderIcon}
-                    alt={t('settings.sources.parentFolderAlt')}
-                    className="mr-2 h-4 w-4 flex-shrink-0"
-                  />
-                  <span className="truncate">..</span>
-                </div>
-              </TableCell>
-              <TableCell width="30%" align="left">
-                -
-              </TableCell>
-              <TableCell width="20%" align="right">
-                -
-              </TableCell>
-              <TableCell width="10%" align="right"></TableCell>
-            </TableRow>,
-          ]
-        : [];
-
-    // Render directories first, then files
-    return [
-      ...parentRow,
-      ...directories.map(([name, node]) => {
-        const itemId = `dir-${name}`;
-        const menuRef = getMenuRef(itemId);
-        const dirStats = calculateDirectoryStats(node as DirectoryStructure);
-
-        return (
-          <TableRow key={itemId} onClick={() => navigateToDirectory(name)}>
-            <TableCell width="40%" align="left">
-              <div className="flex min-w-0 items-center">
-                <img
-                  src={FolderIcon}
-                  alt={t('settings.sources.folderAlt')}
-                  className="mr-2 h-4 w-4 flex-shrink-0"
-                />
-                <span className="truncate">{name}</span>
-              </div>
-            </TableCell>
-            <TableCell width="30%" align="left">
-              {dirStats.totalSize > 0 ? formatBytes(dirStats.totalSize) : '-'}
-            </TableCell>
-            <TableCell width="20%" align="right">
-              {dirStats.totalTokens > 0
-                ? dirStats.totalTokens.toLocaleString()
-                : '-'}
-            </TableCell>
-            <TableCell width="10%" align="right">
-              <div ref={menuRef} className="relative">
-                <button
-                  onClick={(e) => handleMenuClick(e, itemId)}
-                  className="dark:hover:bg-muted inline-flex h-[35px] w-[24px] shrink-0 items-center justify-center rounded-md font-medium transition-colors hover:bg-[#EBEBEB]"
-                  aria-label={t('settings.sources.menuAlt')}
-                >
-                  <img
-                    src={ThreeDots}
-                    alt={t('settings.sources.menuAlt')}
-                    className="opacity-60 hover:opacity-100"
-                  />
-                </button>
-                <ContextMenu
-                  isOpen={activeMenuId === itemId}
-                  setIsOpen={(isOpen) =>
-                    setActiveMenuId(isOpen ? itemId : null)
-                  }
-                  options={getActionOptions(name, false, itemId)}
-                  anchorRef={menuRef}
-                  position="bottom-left"
-                  offset={{ x: -4, y: 4 }}
-                />
-              </div>
-            </TableCell>
-          </TableRow>
-        );
-      }),
-      ...files.map(([name, node]) => {
-        const itemId = `file-${name}`;
-        const menuRef = getMenuRef(itemId);
-        const displayName =
-          typeof node.display_name === 'string' && node.display_name.trim()
-            ? node.display_name
-            : name;
-
-        return (
-          <TableRow
-            key={itemId}
-            onClick={() => handleFileClick(name, displayName)}
-          >
-            <TableCell width="40%" align="left">
-              <div className="flex min-w-0 items-center">
-                <img
-                  src={FileIcon}
-                  alt={t('settings.sources.fileAlt')}
-                  className="mr-2 h-4 w-4 flex-shrink-0"
-                />
-                <span className="truncate">{displayName}</span>
-              </div>
-            </TableCell>
-            <TableCell width="30%" align="left">
-              {node.size_bytes ? formatBytes(node.size_bytes) : '-'}
-            </TableCell>
-            <TableCell width="20%" align="right">
-              {node.token_count?.toLocaleString() || '-'}
-            </TableCell>
-            <TableCell width="10%" align="right">
-              <div ref={menuRef} className="relative">
-                <button
-                  onClick={(e) => handleMenuClick(e, itemId)}
-                  className="dark:hover:bg-muted inline-flex h-[35px] w-[24px] shrink-0 items-center justify-center rounded-md font-medium transition-colors hover:bg-[#EBEBEB]"
-                  aria-label={t('settings.sources.menuAlt')}
-                >
-                  <img
-                    src={ThreeDots}
-                    alt={t('settings.sources.menuAlt')}
-                    className="opacity-60 hover:opacity-100"
-                  />
-                </button>
-                <ContextMenu
-                  isOpen={activeMenuId === itemId}
-                  setIsOpen={(isOpen) =>
-                    setActiveMenuId(isOpen ? itemId : null)
-                  }
-                  options={getActionOptions(name, true, itemId, displayName)}
-                  anchorRef={menuRef}
-                  position="bottom-left"
-                  offset={{ x: -4, y: 4 }}
-                />
-              </div>
-            </TableCell>
-          </TableRow>
-        );
-      }),
-    ];
-  };
-  const currentDirectory = getCurrentDirectory();
-
-  const searchFiles = (
-    query: string,
-    structure: DirectoryStructure,
-    currentPath: string[] = [],
-  ): SearchResult[] => {
-    let results: SearchResult[] = [];
-
-    Object.entries(structure).forEach(([name, node]) => {
-      const fullPath = [...currentPath, name].join('/');
-      const displayName =
-        typeof node.display_name === 'string' && node.display_name.trim()
-          ? node.display_name
-          : '';
-      const queryLower = query.toLowerCase();
-      const matchTarget = displayName ? `${name} ${displayName}` : name;
-
-      if (matchTarget.toLowerCase().includes(queryLower)) {
-        results.push({
-          name: displayName || name,
-          path: fullPath,
-          isFile: !!node.type,
+        enqueueOperation({
+          operation: 'remove_directory',
+          directoryPath: itemPath,
         });
       }
+      setDeleteModalState('INACTIVE');
+      setItemToDelete(null);
+    }
+  };
 
-      if (!node.type) {
-        // If it's a directory, search recursively
-        results = [
-          ...results,
-          ...searchFiles(query, node as DirectoryStructure, [
-            ...currentPath,
-            name,
-          ]),
-        ];
+  const handleCancelDelete = () => {
+    setDeleteModalState('INACTIVE');
+    setItemToDelete(null);
+  };
+
+  const getRowMenuOptions = ({
+    name,
+    isFile,
+    defaultViewOption,
+  }: RowMenuContext): TreeMenuOption[] => {
+    return [
+      defaultViewOption,
+      {
+        icon: Trash,
+        label: t('convTile.delete'),
+        onClick: (event: SyntheticEvent) => {
+          event.stopPropagation();
+          confirmDeleteItem(name, isFile);
+        },
+        iconWidth: 18,
+        iconHeight: 18,
+        variant: 'destructive',
+      },
+    ];
+  };
+
+  const statusLabel = isProcessing
+    ? currentOpRef.current === 'add'
+      ? t('settings.sources.uploadingFilesTitle')
+      : t('settings.sources.deletingTitle')
+    : null;
+
+  const topRightAction = !isProcessing ? (
+    <button
+      onClick={handleAddFile}
+      className="bg-primary hover:bg-primary/90 flex h-[38px] min-w-[108px] items-center justify-center rounded-full px-4 text-sm font-medium whitespace-nowrap text-white"
+      title={t('settings.sources.addFile')}
+    >
+      {t('settings.sources.addFile')}
+    </button>
+  ) : null;
+
+  const extraContent = (
+    <ConfirmationModal
+      message={
+        itemToDelete?.isFile
+          ? t('settings.sources.confirmDelete')
+          : t('settings.sources.deleteDirectoryWarning', {
+              name: itemToDelete?.name,
+            })
       }
-    });
-
-    return results;
-  };
-
-  const handleSearchSelect = (result: SearchResult) => {
-    if (result.isFile) {
-      const pathParts = result.path.split('/');
-      const fileName = pathParts.pop() || '';
-      setCurrentPath(pathParts);
-
-      setSelectedFile({
-        id: result.path,
-        name: result.name || fileName,
-      });
-    } else {
-      setCurrentPath(result.path.split('/'));
-      setSelectedFile(null);
-    }
-    setSearchQuery('');
-    setSearchResults([]);
-  };
-
-  const renderFileSearch = () => {
-    return (
-      <div className="relative w-52" ref={searchDropdownRef}>
-        <input
-          type="text"
-          value={searchQuery}
-          onChange={(e) => {
-            setSearchQuery(e.target.value);
-            if (directoryStructure) {
-              setSearchResults(searchFiles(e.target.value, directoryStructure));
-            }
-          }}
-          placeholder={t('settings.sources.searchFiles')}
-          className={`border-border dark:border-border h-[38px] w-full border px-4 py-2 ${searchQuery ? 'rounded-t-[24px]' : 'rounded-[24px]'} bg-transparent focus:outline-none`}
-        />
-
-        {searchQuery && (
-          <div className="border-border bg-card dark:border-border dark:bg-card absolute top-full right-0 left-0 z-10 max-h-[calc(100vh-200px)] w-full overflow-hidden rounded-b-[12px] border border-t-0 shadow-lg transition-all duration-200">
-            <div className="max-h-[calc(100vh-200px)] overflow-x-hidden overflow-y-auto overscroll-contain">
-              {searchResults.length === 0 ? (
-                <div className="py-2 text-center text-sm text-gray-500 dark:text-gray-400">
-                  {t('settings.sources.noResults')}
-                </div>
-              ) : (
-                searchResults.map((result, index) => (
-                  <div
-                    key={index}
-                    onClick={() => handleSearchSelect(result)}
-                    title={result.path}
-                    className={`hover:bg-muted dark:hover:bg-muted flex min-w-0 cursor-pointer items-center px-3 py-2 ${
-                      index !== searchResults.length - 1
-                        ? 'border-border dark:border-border border-b'
-                        : ''
-                    }`}
-                  >
-                    <img
-                      src={result.isFile ? FileIcon : FolderIcon}
-                      alt={
-                        result.isFile
-                          ? t('settings.sources.fileAlt')
-                          : t('settings.sources.folderAlt')
-                      }
-                      className="mr-2 h-4 w-4 flex-shrink-0"
-                    />
-                    <span className="flex-1 truncate text-sm">
-                      {result.name}
-                    </span>
-                  </div>
-                ))
-              )}
-            </div>
-          </div>
-        )}
-      </div>
-    );
-  };
-
-  const handleFileSearch = (searchQuery: string) => {
-    if (directoryStructure) {
-      return searchFiles(searchQuery, directoryStructure);
-    }
-    return [];
-  };
-
-  const getDisplayNameForPath = (path: string) => {
-    if (!directoryStructure) {
-      return path.split('/').pop() || path;
-    }
-    let structure: any = directoryStructure;
-    if (typeof structure === 'string') {
-      try {
-        structure = JSON.parse(structure);
-      } catch (e) {
-        return path.split('/').pop() || path;
-      }
-    }
-    if (typeof structure !== 'object' || structure === null) {
-      return path.split('/').pop() || path;
-    }
-    const parts = path.split('/').filter(Boolean);
-    let current: any = structure;
-    for (const part of parts) {
-      if (!current || typeof current !== 'object') {
-        return parts[parts.length - 1] || path;
-      }
-      current = current[part];
-    }
-    if (
-      current &&
-      typeof current === 'object' &&
-      typeof current.display_name === 'string' &&
-      current.display_name.trim()
-    ) {
-      return current.display_name;
-    }
-    return parts[parts.length - 1] || path;
-  };
-
-  const handleFileSelect = (path: string) => {
-    const pathParts = path.split('/');
-    const fileName = pathParts.pop() || '';
-    setCurrentPath(pathParts);
-    setSelectedFile({
-      id: path,
-      name: getDisplayNameForPath(path) || fileName,
-    });
-  };
+      modalState={deleteModalState}
+      setModalState={setDeleteModalState}
+      handleSubmit={handleConfirmedDelete}
+      handleCancel={handleCancelDelete}
+      submitLabel={t('convTile.delete')}
+      variant="danger"
+    />
+  );
 
   return (
-    <div>
-      {selectedFile ? (
-        <div className="flex">
-          <div className="flex-1">
-            <Chunks
-              documentId={docId}
-              documentName={sourceName}
-              handleGoBack={() => setSelectedFile(null)}
-              path={selectedFile.id}
-              displayPath={[...currentPath, selectedFile.name].join('/')}
-              onFileSearch={handleFileSearch}
-              onFileSelect={handleFileSelect}
-            />
-          </div>
-        </div>
-      ) : (
-        <div className="flex w-full max-w-full flex-col overflow-hidden">
-          <div className="mb-2">{renderPathNavigation()}</div>
-
-          <div className="w-full">
-            <TableContainer>
-              <Table>
-                <TableHead>
-                  <TableRow>
-                    <TableHeader width="40%" align="left">
-                      {t('settings.sources.fileName')}
-                    </TableHeader>
-                    <TableHeader width="30%" align="left">
-                      {t('settings.sources.size')}
-                    </TableHeader>
-                    <TableHeader width="20%" align="right">
-                      {t('settings.sources.tokens')}
-                    </TableHeader>
-                    <TableHeader width="10%" align="right">
-                      <span className="sr-only">
-                        {t('settings.sources.actions')}
-                      </span>
-                    </TableHeader>
-                  </TableRow>
-                </TableHead>
-                <TableBody>
-                  {loading ? (
-                    <SkeletonLoader component="fileTable" />
-                  ) : (
-                    renderFileTree(currentDirectory)
-                  )}
-                </TableBody>
-              </Table>
-            </TableContainer>
-          </div>
-        </div>
-      )}
-      <ConfirmationModal
-        message={
-          itemToDelete?.isFile
-            ? t('settings.sources.confirmDelete')
-            : t('settings.sources.deleteDirectoryWarning', {
-                name: itemToDelete?.name,
-              })
-        }
-        modalState={deleteModalState}
-        setModalState={setDeleteModalState}
-        handleSubmit={handleConfirmedDelete}
-        handleCancel={handleCancelDelete}
-        submitLabel={t('convTile.delete')}
-        variant="danger"
-      />
-    </div>
+    <TreeBrowser
+      docId={docId}
+      sourceName={sourceName}
+      onBackToDocuments={onBackToDocuments}
+      columnOrder="size-first"
+      sortEntries={false}
+      controllerRef={controllerRef}
+      topRightAction={topRightAction}
+      statusLabel={statusLabel}
+      getRowMenuOptions={getRowMenuOptions}
+      extraContent={extraContent}
+      onCurrentPathChange={(path) => {
+        currentPathRef.current = path;
+      }}
+    />
   );
 };
 
diff --git a/frontend/src/components/FileUpload.tsx b/frontend/src/components/FileUpload.tsx
index fb4ad9b6..73aafa73 100644
--- a/frontend/src/components/FileUpload.tsx
+++ b/frontend/src/components/FileUpload.tsx
@@ -163,7 +163,7 @@ export const FileUpload = ({
           e.stopPropagation();
           handleRemove();
         }}
-        className="absolute -top-2 -right-2 rounded-full bg-[#7D54D1] p-1 transition-colors hover:bg-[#714cbc]"
+        className="bg-primary hover:bg-primary/90 absolute -top-2 -right-2 rounded-full p-1 transition-colors"
       >
         <img src={Cross} alt="remove" className="h-3 w-3" />
       </button>
diff --git a/frontend/src/components/GoogleDrivePicker.tsx b/frontend/src/components/GoogleDrivePicker.tsx
index 2b463de0..0b278915 100644
--- a/frontend/src/components/GoogleDrivePicker.tsx
+++ b/frontend/src/components/GoogleDrivePicker.tsx
@@ -10,8 +10,8 @@ import {
   removeSessionToken,
   validateProviderSession,
 } from '../utils/providerUtils';
-import ConnectedStateSkeleton from './ConnectedStateSkeleton';
-import FilesSectionSkeleton from './FileSelectionSkeleton';
+import SkeletonLoader from './SkeletonLoader';
+import { Button } from './ui/button';
 
 interface PickerFile {
   id: string;
@@ -224,8 +224,8 @@ const GoogleDrivePicker: React.FC<GoogleDrivePickerProps> = ({
     <div>
       {isValidating ? (
         <>
-          <ConnectedStateSkeleton />
-          <FilesSectionSkeleton />
+          <SkeletonLoader component="connectedState" />
+          <SkeletonLoader component="filesSection" />
         </>
       ) : (
         <>
@@ -262,9 +262,11 @@ const GoogleDrivePicker: React.FC<GoogleDrivePickerProps> = ({
                   <h3 className="text-sm font-medium">
                     {t('modals.uploadDoc.connectors.googleDrive.selectedFiles')}
                   </h3>
-                  <button
+                  <Button
+                    type="button"
+                    size="sm"
                     onClick={() => handleOpenPicker()}
-                    className="rounded-md bg-[#A076F6] px-3 py-1 text-sm text-white hover:bg-[#8A5FD4]"
+                    className="bg-[#A076F6] hover:bg-[#8A5FD4]"
                     disabled={isLoading}
                   >
                     {isLoading
@@ -272,7 +274,7 @@ const GoogleDrivePicker: React.FC<GoogleDrivePickerProps> = ({
                       : t(
                           'modals.uploadDoc.connectors.googleDrive.selectFiles',
                         )}
-                  </button>
+                  </Button>
                 </div>
 
                 {selectedFiles.length === 0 && selectedFolders.length === 0 ? (
@@ -303,7 +305,10 @@ const GoogleDrivePicker: React.FC<GoogleDrivePickerProps> = ({
                             <span className="flex-1 truncate text-sm">
                               {folder.name}
                             </span>
-                            <button
+                            <Button
+                              type="button"
+                              variant="link"
+                              size="sm"
                               onClick={() => {
                                 const newSelectedFolders =
                                   selectedFolders.filter(
@@ -315,12 +320,12 @@ const GoogleDrivePicker: React.FC<GoogleDrivePickerProps> = ({
                                   newSelectedFolders.map((f) => f.id),
                                 );
                               }}
-                              className="ml-2 text-sm text-red-500 hover:text-red-700"
+                              className="ml-2 h-auto p-0 text-sm text-red-500 hover:text-red-700 hover:no-underline"
                             >
                               {t(
                                 'modals.uploadDoc.connectors.googleDrive.remove',
                               )}
-                            </button>
+                            </Button>
                           </div>
                         ))}
                       </div>
@@ -346,7 +351,10 @@ const GoogleDrivePicker: React.FC<GoogleDrivePickerProps> = ({
                             <span className="flex-1 truncate text-sm">
                               {file.name}
                             </span>
-                            <button
+                            <Button
+                              type="button"
+                              variant="link"
+                              size="sm"
                               onClick={() => {
                                 const newSelectedFiles = selectedFiles.filter(
                                   (f) => f.id !== file.id,
@@ -357,12 +365,12 @@ const GoogleDrivePicker: React.FC<GoogleDrivePickerProps> = ({
                                   selectedFolders.map((f) => f.id),
                                 );
                               }}
-                              className="ml-2 text-sm text-red-500 hover:text-red-700"
+                              className="ml-2 h-auto p-0 text-sm text-red-500 hover:text-red-700 hover:no-underline"
                             >
                               {t(
                                 'modals.uploadDoc.connectors.googleDrive.remove',
                               )}
-                            </button>
+                            </Button>
                           </div>
                         ))}
                       </div>
diff --git a/frontend/src/components/Help.tsx b/frontend/src/components/Help.tsx
index c1596205..aafc64ed 100644
--- a/frontend/src/components/Help.tsx
+++ b/frontend/src/components/Help.tsx
@@ -3,6 +3,7 @@ import Info from '../assets/info.svg';
 import PageIcon from '../assets/documentation.svg';
 import EmailIcon from '../assets/envelope.svg';
 import { useTranslation } from 'react-i18next';
+import { Button } from './ui/button';
 const Help = () => {
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement | null>(null);
@@ -33,14 +34,16 @@ const Help = () => {
 
   return (
     <div className="relative inline-block text-sm" ref={dropdownRef}>
-      <button
+      <Button
+        type="button"
+        variant="ghost"
         ref={buttonRef}
         onClick={toggleDropdown}
-        className="hover:bg-sidebar-accent mx-4 my-auto flex h-9 w-full items-center gap-4 rounded-3xl"
+        className="hover:bg-sidebar-accent mx-4 my-auto w-full justify-start gap-4 rounded-3xl px-0"
       >
         <img src={Info} alt="info" className="ml-2 w-5 filter dark:invert" />
         {t('help')}
-      </button>
+      </Button>
       {isOpen && (
         <div
           className={`dark:bg-card bg-card absolute z-10 w-48 translate-x-4 -translate-y-28 rounded-xl shadow-lg`}
diff --git a/frontend/src/components/Input.tsx b/frontend/src/components/Input.tsx
deleted file mode 100644
index 5087f06d..00000000
--- a/frontend/src/components/Input.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import { InputProps } from './types';
-import { useRef } from 'react';
-
-const Input = ({
-  id,
-  name,
-  type,
-  value,
-  isAutoFocused = false,
-  placeholder,
-  required = false,
-  maxLength,
-  className = '',
-  colorVariant = 'silver',
-  borderVariant = 'thick',
-  textSize = 'medium',
-  children,
-  labelBgClassName = 'bg-card',
-  leftIcon,
-  onChange,
-  onPaste,
-  onKeyDown,
-  edgeRoundness = 'rounded-full',
-  'data-testid': dataTestId,
-}: InputProps) => {
-  const colorStyles = {
-    silver: 'border-border dark:border-border',
-    jet: 'border-jet',
-    gray: 'border-gray-5000 dark:text-muted-foreground',
-  };
-  const borderStyles = {
-    thin: 'border',
-    thick: 'border-2',
-  };
-  const textSizeStyles = {
-    small: 'text-sm',
-    medium: 'text-base',
-  };
-
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const hasValue = value !== undefined && value !== null && value !== '';
-
-  return (
-    <div className={`relative ${className}`}>
-      <input
-        ref={inputRef}
-        className={`peer text-foreground dark:text-foreground h-[42px] w-full ${edgeRoundness} bg-transparent ${leftIcon ? 'pl-10' : 'px-3'} py-1 placeholder-transparent outline-hidden ${colorStyles[colorVariant]} ${borderStyles[borderVariant]} ${textSizeStyles[textSize]} [&:-webkit-autofill]:appearance-none [&:-webkit-autofill]:bg-transparent [&:-webkit-autofill_selected]:bg-transparent`}
-        type={type}
-        id={id}
-        name={name}
-        autoFocus={isAutoFocused}
-        placeholder={placeholder || ''}
-        maxLength={maxLength}
-        value={value}
-        onChange={onChange}
-        onPaste={onPaste}
-        onKeyDown={onKeyDown}
-        required={required}
-        data-testid={dataTestId}
-      >
-        {children}
-      </input>
-      {leftIcon && (
-        <div className="absolute top-1/2 left-3 flex -translate-y-1/2 transform items-center justify-center">
-          {leftIcon}
-        </div>
-      )}
-      {placeholder && (
-        <label
-          htmlFor={id}
-          className={`absolute select-none ${
-            hasValue ? '-top-2.5 left-3 text-xs' : ''
-          } px-2 transition-all peer-placeholder-shown:top-2.5 ${
-            leftIcon
-              ? 'peer-placeholder-shown:left-7'
-              : 'peer-placeholder-shown:left-3'
-          } peer-placeholder-shown:${
-            textSizeStyles[textSize]
-          } text-muted-foreground pointer-events-none cursor-none peer-focus:-top-2.5 peer-focus:left-3 peer-focus:text-xs ${labelBgClassName} max-w-[calc(100%-24px)] overflow-hidden text-ellipsis whitespace-nowrap`}
-        >
-          {placeholder}
-          {required && (
-            <span className="ml-0.5 text-[#D30000] dark:text-red-500">*</span>
-          )}
-        </label>
-      )}
-    </div>
-  );
-};
-
-export default Input;
diff --git a/frontend/src/components/MermaidRenderer.tsx b/frontend/src/components/MermaidRenderer.tsx
index 95c004c7..6a9a1ef8 100644
--- a/frontend/src/components/MermaidRenderer.tsx
+++ b/frontend/src/components/MermaidRenderer.tsx
@@ -11,6 +11,7 @@ import {
 import { selectStatus } from '../conversation/conversationSlice';
 import { useDarkTheme } from '../hooks';
 import CopyButton from './CopyButton';
+import { Button } from './ui/button';
 import { MermaidRendererProps } from './types';
 
 const MermaidRenderer: React.FC<MermaidRendererProps> = ({
@@ -263,8 +264,8 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
   const errorRender = !isCurrentlyLoading && error;
 
   return (
-    <div className="w-inherit group border-border bg-card relative overflow-hidden rounded-[14px] border">
-      <div className="bg-platinum dark:bg-muted flex items-center justify-between px-2 py-1">
+    <div className="w-inherit group border-border bg-card relative overflow-hidden rounded-xl border">
+      <div className="bg-muted flex items-center justify-between px-2 py-1">
         <span className="text-foreground dark:text-foreground text-xs font-medium">
           mermaid
         </span>
@@ -273,27 +274,32 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
 
           {showDiagramOptions && (
             <div className="relative" ref={downloadMenuRef}>
-              <button
+              <Button
+                type="button"
+                variant="secondary"
+                size="sm"
                 onClick={() => setShowDownloadMenu(!showDownloadMenu)}
-                className="flex h-full items-center rounded-sm bg-gray-100 px-2 py-1 text-xs dark:bg-gray-700"
+                className="h-auto gap-1 rounded-sm bg-gray-100 px-2 py-1 text-xs dark:bg-gray-700"
                 title={t('mermaid.downloadOptions')}
               >
                 Download <span className="ml-1">▼</span>
-              </button>
+              </Button>
               {showDownloadMenu && (
                 <div className="border-border bg-card absolute right-0 z-10 mt-1 w-40 rounded-sm border shadow-lg">
                   <ul>
                     {downloadOptions.map((option, index) => (
                       <li key={index}>
-                        <button
+                        <Button
+                          type="button"
+                          variant="ghost"
                           onClick={() => {
                             option.action();
                             setShowDownloadMenu(false);
                           }}
-                          className="hover:bg-muted w-full px-4 py-2 text-left text-xs"
+                          className="h-auto w-full justify-start rounded-none px-4 py-2 text-left text-xs font-normal"
                         >
                           {option.label}
-                        </button>
+                        </Button>
                       </li>
                     ))}
                   </ul>
@@ -303,17 +309,20 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
           )}
 
           {showDiagramOptions && (
-            <button
+            <Button
+              type="button"
+              variant="secondary"
+              size="sm"
               onClick={() => setShowCode(!showCode)}
-              className={`flex h-full items-center rounded px-2 py-1 text-xs ${
+              className={`h-auto rounded px-2 py-1 text-xs ${
                 showCode
-                  ? 'bg-blue-200 dark:bg-blue-800'
-                  : 'bg-gray-100 dark:bg-gray-700'
+                  ? 'bg-blue-200 hover:bg-blue-200/90 dark:bg-blue-800 dark:hover:bg-blue-800/90'
+                  : 'bg-gray-100 hover:bg-gray-100/90 dark:bg-gray-700 dark:hover:bg-gray-700/90'
               }`}
               title={t('mermaid.viewCode')}
             >
               Code
-            </button>
+            </Button>
           )}
         </div>
       </div>
@@ -351,15 +360,17 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
             {isHovering && (
               <>
                 <div className="absolute top-2 right-2 z-10 flex items-center gap-2 rounded-sm bg-black/70 px-2 py-1 text-xs text-white">
-                  <button
+                  <Button
+                    type="button"
+                    variant="ghost"
                     onClick={() =>
                       setZoomFactor((prev) => Math.max(1, prev - 0.5))
                     }
-                    className="rounded px-1 hover:bg-gray-600"
+                    className="h-auto px-1 py-0 text-white hover:bg-gray-600 hover:text-white"
                     title={t('mermaid.decreaseZoom')}
                   >
                     -
-                  </button>
+                  </Button>
                   <span
                     className="cursor-pointer hover:underline"
                     onClick={() => {
@@ -369,15 +380,17 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
                   >
                     {zoomFactor.toFixed(1)}x
                   </span>
-                  <button
+                  <Button
+                    type="button"
+                    variant="ghost"
                     onClick={() =>
                       setZoomFactor((prev) => Math.min(6, prev + 0.5))
                     }
-                    className="rounded px-1 hover:bg-gray-600"
+                    className="h-auto px-1 py-0 text-white hover:bg-gray-600 hover:text-white"
                     title={t('mermaid.increaseZoom')}
                   >
                     +
-                  </button>
+                  </Button>
                 </div>
               </>
             )}
@@ -401,7 +414,7 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
 
           {showCode && (
             <div className="border-border border-t">
-              <div className="bg-platinum dark:bg-muted p-2">
+              <div className="bg-muted p-2">
                 <span className="text-foreground dark:text-foreground text-xs font-medium">
                   Mermaid Code
                 </span>
diff --git a/frontend/src/components/MessageInput.tsx b/frontend/src/components/MessageInput.tsx
index 212c71d9..d595ce98 100644
--- a/frontend/src/components/MessageInput.tsx
+++ b/frontend/src/components/MessageInput.tsx
@@ -1,20 +1,14 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { LoaderCircle, Mic, Square } from 'lucide-react';
 import { useDropzone } from 'react-dropzone';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector, useStore } from 'react-redux';
 
 import endpoints from '../api/endpoints';
 import userService from '../api/services/userService';
-import AlertIcon from '../assets/alert.svg';
-import ClipIcon from '../assets/clip.svg';
 import DragFileUpload from '../assets/DragFileUpload.svg';
-import ExitIcon from '../assets/exit.svg';
-import SendArrowIcon from './SendArrowIcon';
+import SendArrow from '../assets/send.svg?react';
 import SourceIcon from '../assets/source.svg';
-import DocumentationDark from '../assets/documentation-dark.svg';
-import ToolIcon from '../assets/tool.svg';
 import {
   addAttachment,
   removeAttachment,
@@ -26,25 +20,34 @@ import {
 import { ActiveState, Doc } from '../models/misc';
 import {
   selectSelectedDocs,
+  selectSourceDocs,
   selectToken,
+  setSelectedDocs,
 } from '../preferences/preferenceSlice';
 import type { RootState } from '../store';
 import Upload from '../upload/Upload';
 import { isTouchDevice } from '../utils/browserUtils';
-import SourcesPopup from './SourcesPopup';
-import ToolsPopup from './ToolsPopup';
+import { Button } from './ui/button';
+import { type MultiSelectPopoverItem } from './MultiSelectPopover';
+import {
+  AttachFileButton,
+  AttachmentChipList,
+  MicButton,
+  type RecordingState,
+  SourcesTrigger,
+  ToolsTrigger,
+} from './message-input';
 import { handleAbort } from '../conversation/conversationSlice';
 import {
   AUDIO_FILE_ACCEPT_ATTR,
   FILE_UPLOAD_ACCEPT,
-  FILE_UPLOAD_ACCEPT_ATTR,
 } from '../constants/fileUpload';
+import { UserToolType } from '../settings/types';
+import { isChatToolVisible } from '../utils/toolUtils';
 
 const generateId = (): string =>
   `${Date.now()}-${Math.random().toString(36).substring(2)}`;
 
-type RecordingState = 'idle' | 'recording' | 'transcribing' | 'error';
-
 const LIVE_TRANSCRIPTION_TIMESLICE_MS = 1000;
 const LIVE_CAPTURE_SAMPLE_RATE = 16000;
 const LIVE_CAPTURE_MAX_BUFFER_SECONDS = 20;
@@ -302,10 +305,10 @@ export default function MessageInput({
   const [value, setValue] = useState('');
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const voiceFileInputRef = useRef<HTMLInputElement>(null);
-  const sourceButtonRef = useRef<HTMLButtonElement>(null);
-  const toolButtonRef = useRef<HTMLButtonElement>(null);
   const [isSourcesPopupOpen, setIsSourcesPopupOpen] = useState(false);
   const [isToolsPopupOpen, setIsToolsPopupOpen] = useState(false);
+  const [userTools, setUserTools] = useState<UserToolType[]>([]);
+  const [toolsLoading, setToolsLoading] = useState(false);
   const [uploadModalState, setUploadModalState] =
     useState<ActiveState>('INACTIVE');
   const [handleDragActive, setHandleDragActive] = useState<boolean>(false);
@@ -313,6 +316,7 @@ export default function MessageInput({
   const [voiceError, setVoiceError] = useState<string | null>(null);
 
   const selectedDocs = useSelector(selectSelectedDocs);
+  const sourceDocs = useSelector(selectSourceDocs);
   const token = useSelector(selectToken);
   const attachments = useSelector(selectAttachments);
 
@@ -1377,10 +1381,91 @@ export default function MessageInput({
   };
 
   const handlePostDocumentSelect = (_docs: Doc[] | null) => {
-    // SourcesPopup updates Redux selection directly; this preserves the prop contract.
+    // Hook point for downstream side-effects after a source is toggled.
     void _docs;
   };
 
+  // Stable id for matching selected sources: prefer ``id``, fall back to ``date``.
+  const sourceItemId = (doc: Doc): string => doc.id || doc.date;
+
+  const sourceItems: MultiSelectPopoverItem[] = (sourceDocs || []).map(
+    (doc) => ({
+      id: sourceItemId(doc),
+      label: doc.name,
+      icon: SourceIcon,
+    }),
+  );
+
+  const selectedSourceIds = (
+    selectedDocs && Array.isArray(selectedDocs) ? selectedDocs : []
+  ).map((doc) => sourceItemId(doc));
+
+  const handleToggleSource = (id: string) => {
+    if (!sourceDocs) return;
+    const current = Array.isArray(selectedDocs) ? selectedDocs : [];
+    const matched = current.find((doc) => sourceItemId(doc) === id);
+    let updated: Doc[];
+    if (matched) {
+      updated = current.filter((doc) => sourceItemId(doc) !== id);
+    } else {
+      const incoming = sourceDocs.find((doc) => sourceItemId(doc) === id);
+      if (!incoming) return;
+      updated = [...current, incoming];
+    }
+    dispatch(setSelectedDocs(updated.length > 0 ? updated : []));
+    handlePostDocumentSelect(updated.length > 0 ? updated : null);
+  };
+
+  const fetchUserTools = useCallback(() => {
+    setToolsLoading(true);
+    userService
+      .getUserTools(token)
+      .then((res) => res.json())
+      .then((data) => {
+        const filtered = (data.tools || []).filter(isChatToolVisible);
+        setUserTools(filtered);
+      })
+      .catch((error) => {
+        console.error('Error fetching tools:', error);
+      })
+      .finally(() => setToolsLoading(false));
+  }, [token]);
+
+  useEffect(() => {
+    if (isToolsPopupOpen) fetchUserTools();
+  }, [isToolsPopupOpen, fetchUserTools]);
+
+  const toolItems: MultiSelectPopoverItem[] = userTools.map((tool) => ({
+    id: tool.id,
+    label: tool.customName || tool.displayName,
+    icon: `/toolIcons/tool_${tool.name}.svg`,
+  }));
+
+  const selectedToolIds = userTools
+    .filter((tool) => tool.status)
+    .map((tool) => tool.id);
+
+  const handleToggleTool = (id: string) => {
+    const tool = userTools.find((t) => t.id === id);
+    if (!tool) return;
+    const newStatus = !tool.status;
+    userService
+      .updateToolStatus({ id, status: newStatus }, token)
+      .then(() => {
+        setUserTools((prev) =>
+          prev.map((t) => (t.id === id ? { ...t, status: newStatus } : t)),
+        );
+      })
+      .catch((error) => {
+        console.error('Failed to update tool status:', error);
+      });
+  };
+
+  const handleUploadClick = () => {
+    setUploadModalState('ACTIVE');
+    setIsSourcesPopupOpen(false);
+  };
+
   const handleSubmit = () => {
     if (
       value.trim() &&
@@ -1439,19 +1524,6 @@ export default function MessageInput({
     setDraggingId(null);
   };
 
-  const voiceButtonLabel =
-    recordingState === 'recording'
-      ? 'Stop recording'
-      : recordingState === 'transcribing'
-        ? 'Transcribing audio'
-        : 'Voice input';
-  const voiceButtonText =
-    recordingState === 'recording'
-      ? 'Stop'
-      : recordingState === 'transcribing'
-        ? 'Transcribing'
-        : 'Voice';
-
   return (
     <div {...getRootProps()} className="flex w-full flex-col">
       {/* react-dropzone input (for drag/drop) */}
@@ -1465,97 +1537,15 @@ export default function MessageInput({
         onChange={handleVoiceFileAttachment}
       />
 
-      <div className="border-border bg-card relative flex w-full flex-col rounded-[23px] border dark:bg-transparent">
-        <div className="flex flex-wrap gap-1.5 px-2 py-2 sm:gap-2 sm:px-3">
-          {attachments.map((attachment) => {
-            return (
-              <div
-                key={attachment.id}
-                draggable={true}
-                onDragStart={(e) => handleDragStart(e, attachment.id)}
-                onDragOver={handleDragOver}
-                onDrop={(e) => handleDropOn(e, attachment.id)}
-                className={`group dark:text-foreground bg-muted text-muted-foreground dark:bg-accent relative flex items-center rounded-xl px-2 py-1 text-[12px] sm:px-3 sm:py-1.5 sm:text-[14px] ${
-                  attachment.status !== 'completed'
-                    ? 'opacity-70'
-                    : 'opacity-100'
-                } ${
-                  draggingId === attachment.id
-                    ? 'ring-dashed opacity-60 ring-2 ring-purple-200'
-                    : ''
-                }`}
-                title={attachment.fileName}
-              >
-                <div className="bg-primary mr-2 flex h-8 w-8 items-center justify-center rounded-md p-1">
-                  {attachment.status === 'completed' && (
-                    <img
-                      src={DocumentationDark}
-                      alt="Attachment"
-                      className="h-[15px] w-[15px] object-fill"
-                    />
-                  )}
-
-                  {attachment.status === 'failed' && (
-                    <img
-                      src={AlertIcon}
-                      alt="Failed"
-                      className="h-[15px] w-[15px] object-fill"
-                    />
-                  )}
-
-                  {(attachment.status === 'uploading' ||
-                    attachment.status === 'processing') && (
-                    <div className="flex h-[15px] w-[15px] items-center justify-center">
-                      <svg className="h-[15px] w-[15px]" viewBox="0 0 24 24">
-                        <circle
-                          className="opacity-0"
-                          cx="12"
-                          cy="12"
-                          r="10"
-                          stroke="transparent"
-                          strokeWidth="4"
-                          fill="none"
-                        />
-                        <circle
-                          className="text-[#ECECF1]"
-                          cx="12"
-                          cy="12"
-                          r="10"
-                          stroke="currentColor"
-                          strokeWidth="4"
-                          fill="none"
-                          strokeDasharray="62.83"
-                          strokeDashoffset={
-                            62.83 * (1 - attachment.progress / 100)
-                          }
-                          transform="rotate(-90 12 12)"
-                        />
-                      </svg>
-                    </div>
-                  )}
-                </div>
-
-                <span className="max-w-[120px] truncate font-medium sm:max-w-[150px]">
-                  {attachment.fileName}
-                </span>
-
-                <button
-                  className="ml-1.5 flex items-center justify-center rounded-full p-1"
-                  onClick={() => {
-                    dispatch(removeAttachment(attachment.id));
-                  }}
-                  aria-label={t('conversation.attachments.remove')}
-                >
-                  <img
-                    src={ExitIcon}
-                    alt={t('conversation.attachments.remove')}
-                    className="h-2.5 w-2.5 filter dark:invert"
-                  />
-                </button>
-              </div>
-            );
-          })}
-        </div>
+      <div className="border-border bg-card relative flex w-full flex-col rounded-3xl border dark:bg-transparent">
+        <AttachmentChipList
+          attachments={attachments}
+          draggingId={draggingId}
+          onRemove={(id) => dispatch(removeAttachment(id))}
+          onDragStart={handleDragStart}
+          onDragOver={handleDragOver}
+          onDropOn={handleDropOn}
+        />
 
         {voiceError && (
           <div className="px-2 pb-1 text-xs text-[#B42318] sm:px-3">
@@ -1579,7 +1569,7 @@ export default function MessageInput({
             }
             tabIndex={1}
             placeholder={t('inputPlaceholder')}
-            className="inputbox-style no-scrollbar dark:text-foreground dark:placeholder:text-muted-foreground/50 w-full overflow-x-hidden overflow-y-auto rounded-t-[23px] bg-transparent px-2 text-base leading-tight whitespace-pre-wrap opacity-100 placeholder:text-gray-500 focus:outline-hidden sm:px-3"
+            className="inputbox-style no-scrollbar dark:text-foreground dark:placeholder:text-muted-foreground/50 w-full overflow-x-hidden overflow-y-auto rounded-t-3xl bg-transparent px-2 text-base leading-tight whitespace-pre-wrap opacity-100 placeholder:text-gray-500 focus:outline-hidden sm:px-3"
             onInput={handleInput}
             onKeyDown={handleKeyDown}
             onPaste={handlePaste}
@@ -1590,118 +1580,60 @@ export default function MessageInput({
         <div className="flex items-center px-2 pb-1.5 sm:px-3 sm:pb-2">
           <div className="flex grow flex-wrap gap-1 sm:gap-2">
             {showSourceButton && (
-              <button
-                ref={sourceButtonRef}
-                className="xs:px-3 xs:py-1.5 dark:border-border border-border hover:bg-accent dark:hover:bg-muted flex max-w-[130px] items-center rounded-[32px] border px-2 py-1 transition-colors sm:max-w-[150px]"
-                onClick={() => setIsSourcesPopupOpen(!isSourcesPopupOpen)}
-                title={
-                  selectedDocs && selectedDocs.length > 0
-                    ? selectedDocs.map((doc) => doc.name).join(', ')
-                    : t('conversation.sources.title')
-                }
-              >
-                <img
-                  src={SourceIcon}
-                  alt="Sources"
-                  className="mr-1 h-3.5 w-3.5 shrink-0 sm:mr-1.5 sm:h-4"
-                />
-                <span className="xs:text-[12px] dark:text-foreground text-muted-foreground truncate overflow-hidden text-[10px] font-medium sm:text-[14px]">
-                  {selectedDocs && selectedDocs.length > 0
-                    ? selectedDocs.length === 1
-                      ? selectedDocs[0].name
-                      : `${selectedDocs.length} sources selected`
-                    : t('conversation.sources.title')}
-                </span>
-              </button>
+              <SourcesTrigger
+                open={isSourcesPopupOpen}
+                onOpenChange={setIsSourcesPopupOpen}
+                items={sourceItems}
+                selectedIds={selectedSourceIds}
+                onToggle={handleToggleSource}
+                selectedDocs={selectedDocs}
+                onUploadClick={handleUploadClick}
+              />
             )}
 
             {showToolButton && (
-              <button
-                ref={toolButtonRef}
-                className="xs:px-3 xs:py-1.5 xs:max-w-[150px] dark:border-border border-border hover:bg-muted dark:hover:bg-muted flex max-w-[130px] items-center rounded-[32px] border px-2 py-1 transition-colors"
-                onClick={() => setIsToolsPopupOpen(!isToolsPopupOpen)}
-              >
-                <img
-                  src={ToolIcon}
-                  alt="Tools"
-                  className="mr-1 h-3.5 w-3.5 shrink-0 sm:mr-1.5 sm:h-4 sm:w-4"
-                />
-                <span className="xs:text-[12px] dark:text-foreground text-muted-foreground truncate overflow-hidden text-[10px] font-medium sm:text-[14px]">
-                  {t('settings.tools.label')}
-                </span>
-              </button>
+              <ToolsTrigger
+                open={isToolsPopupOpen}
+                onOpenChange={setIsToolsPopupOpen}
+                items={toolItems}
+                selectedIds={selectedToolIds}
+                onToggle={handleToggleTool}
+                loading={toolsLoading}
+              />
             )}
             {ENABLE_VOICE_INPUT && (
-              <button
-                type="button"
+              <MicButton
+                recordingState={recordingState}
+                loading={loading}
                 onClick={() => {
                   void handleVoiceInput();
                 }}
-                aria-label={voiceButtonLabel}
-                title={voiceButtonLabel}
-                disabled={loading || recordingState === 'transcribing'}
-                className={`xs:px-3 xs:py-1.5 dark:border-border flex items-center rounded-[32px] border px-2 py-1 transition-colors ${
-                  recordingState === 'recording'
-                    ? 'border-[#B42318] bg-[#FEE4E2] text-[#B42318] dark:bg-[#4A2323]'
-                    : 'border-border dark:hover:bg-accent hover:bg-gray-100'
-                } ${
-                  loading || recordingState === 'transcribing'
-                    ? 'cursor-not-allowed opacity-60'
-                    : ''
-                }`}
-              >
-                {recordingState === 'transcribing' ? (
-                  <LoaderCircle className="mr-1 h-3.5 w-3.5 animate-spin sm:mr-1.5 sm:h-4 sm:w-4" />
-                ) : recordingState === 'recording' ? (
-                  <Square className="mr-1 h-3.5 w-3.5 fill-current sm:mr-1.5 sm:h-4 sm:w-4" />
-                ) : (
-                  <Mic className="mr-1 h-3.5 w-3.5 sm:mr-1.5 sm:h-4 sm:w-4" />
-                )}
-                <span
-                  className={`xs:text-[12px] dark:text-foreground text-[10px] font-medium sm:text-[14px] ${
-                    recordingState === 'recording'
-                      ? 'text-[#B42318]'
-                      : 'text-muted-foreground'
-                  }`}
-                >
-                  {voiceButtonText}
-                </span>
-              </button>
+              />
             )}
-            <label className="xs:px-3 xs:py-1.5 dark:border-border border-border hover:bg-muted dark:hover:bg-muted flex cursor-pointer items-center rounded-[32px] border px-2 py-1 transition-colors">
-              <img
-                src={ClipIcon}
-                alt="Attach"
-                className="mr-1 h-3.5 w-3.5 sm:mr-1.5 sm:h-4 sm:w-4"
-              />
-              <span className="xs:text-[12px] dark:text-foreground text-muted-foreground text-[10px] font-medium sm:text-[14px]">
-                {t('conversation.attachments.attach')}
-              </span>
-              <input
-                type="file"
-                className="hidden"
-                multiple
-                accept={FILE_UPLOAD_ACCEPT_ATTR}
-                onChange={handleFileAttachment}
-              />
-            </label>
+            <AttachFileButton onChange={handleFileAttachment} />
             {/* Additional badges can be added here in the future */}
           </div>
 
           {loading ? (
-            <button
+            <Button
+              type="button"
+              variant="default"
+              size="icon"
               onClick={handleCancel}
               aria-label={t('cancel')}
-              className={`bg-primary ml-auto flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-white sm:h-9 sm:w-9`}
+              className="bg-primary ml-auto h-7 w-7 shrink-0 rounded-full text-white sm:h-9 sm:w-9"
               disabled={!loading}
             >
-              <div className="flex h-3 w-3 items-center justify-center rounded-[3px] bg-white sm:h-3.5 sm:w-3.5" />
-            </button>
+              <div className="flex h-3 w-3 items-center justify-center rounded-sm bg-white sm:h-3.5 sm:w-3.5" />
+            </Button>
           ) : (
-            <button
+            <Button
+              type="button"
+              variant="default"
+              size="icon"
               onClick={handleSubmit}
               aria-label={t('send')}
-              className={`ml-auto flex h-7 w-7 shrink-0 items-center justify-center rounded-full transition-colors duration-300 ease-in-out sm:h-9 sm:w-9 ${
+              className={`ml-auto h-7 w-7 shrink-0 rounded-full transition-colors duration-300 ease-in-out sm:h-9 sm:w-9 ${
                 value.trim() &&
                 !loading &&
                 recordingState !== 'recording' &&
@@ -1716,30 +1648,16 @@ export default function MessageInput({
                 recordingState === 'transcribing'
               }
             >
-              <SendArrowIcon
+              <SendArrow
                 className="mx-auto my-auto block h-3.5 w-3.5 sm:h-4 sm:w-4"
                 aria-label={t('send')}
                 role="img"
               />
-            </button>
+            </Button>
           )}
         </div>
       </div>
 
-      <SourcesPopup
-        isOpen={isSourcesPopupOpen}
-        onClose={() => setIsSourcesPopupOpen(false)}
-        anchorRef={sourceButtonRef}
-        handlePostDocumentSelect={handlePostDocumentSelect}
-        setUploadModalState={setUploadModalState}
-      />
-
-      <ToolsPopup
-        isOpen={isToolsPopupOpen}
-        onClose={() => setIsToolsPopupOpen(false)}
-        anchorRef={toolButtonRef}
-      />
-
       {uploadModalState === 'ACTIVE' && (
         <Upload
           receivedFile={[]}
diff --git a/frontend/src/components/MultiSelectPopover.tsx b/frontend/src/components/MultiSelectPopover.tsx
new file mode 100644
index 00000000..68fc7665
--- /dev/null
+++ b/frontend/src/components/MultiSelectPopover.tsx
@@ -0,0 +1,250 @@
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import CheckmarkIcon from '../assets/checkmark.svg';
+import NoFilesDarkIcon from '../assets/no-files-dark.svg';
+import NoFilesIcon from '../assets/no-files.svg';
+import { useDarkTheme } from '../hooks';
+import { cn } from '@/lib/utils';
+import Spinner from './Spinner';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from './ui/command';
+import { Popover, PopoverContent, PopoverTrigger } from './ui/popover';
+
+export type MultiSelectPopoverItem = {
+  id: string;
+  label: string;
+  description?: string;
+  icon?: React.ReactNode | string;
+  group?: string;
+  disabled?: boolean;
+};
+
+export type MultiSelectPopoverProps = {
+  trigger: React.ReactNode;
+  items: MultiSelectPopoverItem[];
+  selectedIds: string[];
+  onToggle: (id: string) => void;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  searchable?: boolean;
+  searchPlaceholder?: string;
+  loading?: boolean;
+  footer?: React.ReactNode;
+  align?: 'start' | 'center' | 'end';
+  side?: 'top' | 'right' | 'bottom' | 'left';
+  contentClassName?: string;
+  emptyMessage?: string;
+  selectedFirst?: boolean;
+  title?: string;
+};
+
+function renderIcon(icon: MultiSelectPopoverItem['icon']) {
+  if (!icon) return null;
+  if (typeof icon === 'string') {
+    return (
+      <img
+        src={icon}
+        alt=""
+        aria-hidden="true"
+        className="mr-3 h-5 w-5 shrink-0"
+      />
+    );
+  }
+  return (
+    <span className="mr-3 flex h-5 w-5 shrink-0 items-center justify-center">
+      {icon}
+    </span>
+  );
+}
+
+export function MultiSelectPopover({
+  trigger,
+  items,
+  selectedIds,
+  onToggle,
+  open,
+  onOpenChange,
+  searchable = true,
+  searchPlaceholder,
+  loading = false,
+  footer,
+  align = 'start',
+  side = 'bottom',
+  contentClassName,
+  emptyMessage,
+  selectedFirst = false,
+  title,
+}: MultiSelectPopoverProps) {
+  const { t } = useTranslation();
+  const [isDarkTheme] = useDarkTheme();
+  const selectedSet = React.useMemo(() => new Set(selectedIds), [selectedIds]);
+
+  const orderedItems = React.useMemo(() => {
+    if (!selectedFirst) return items;
+    const selected: MultiSelectPopoverItem[] = [];
+    const unselected: MultiSelectPopoverItem[] = [];
+    for (const item of items) {
+      (selectedSet.has(item.id) ? selected : unselected).push(item);
+    }
+    return [...selected, ...unselected];
+  }, [items, selectedSet, selectedFirst]);
+
+  const grouped = React.useMemo(() => {
+    const groupOrder: string[] = [];
+    const map = new Map<string, MultiSelectPopoverItem[]>();
+    orderedItems.forEach((item) => {
+      const key = item.group ?? '';
+      if (!map.has(key)) {
+        groupOrder.push(key);
+        map.set(key, []);
+      }
+      map.get(key)!.push(item);
+    });
+    return { groupOrder, map };
+  }, [orderedItems]);
+
+  const hasGroups = grouped.groupOrder.some((g) => g !== '');
+  const effectivePlaceholder =
+    searchPlaceholder || t('settings.tools.searchPlaceholder', 'Search...');
+
+  const renderItem = (item: MultiSelectPopoverItem) => {
+    const isSelected = selectedSet.has(item.id);
+    return (
+      <CommandItem
+        key={item.id}
+        value={`${item.label} ${item.id}`}
+        disabled={item.disabled}
+        onSelect={() => {
+          if (!item.disabled) onToggle(item.id);
+        }}
+        className="dark:border-border data-[selected=true]:bg-accent flex cursor-pointer items-center justify-between gap-2 rounded-none border-b border-[#D9D9D9] px-3 py-3 last:border-b-0"
+        aria-selected={isSelected}
+      >
+        <div className="mr-3 flex grow items-center overflow-hidden">
+          {renderIcon(item.icon)}
+          <div className="overflow-hidden">
+            <p
+              className="overflow-hidden text-sm font-medium text-ellipsis whitespace-nowrap text-gray-900 dark:text-white"
+              title={item.label}
+            >
+              {item.label}
+            </p>
+            {item.description && (
+              <p className="text-muted-foreground overflow-hidden text-xs text-ellipsis whitespace-nowrap">
+                {item.description}
+              </p>
+            )}
+          </div>
+        </div>
+        <div
+          className="border-border bg-card flex h-4 w-4 shrink-0 items-center justify-center rounded-xs border-2 p-[0.5px]"
+          aria-hidden="true"
+        >
+          {isSelected && (
+            <img
+              src={CheckmarkIcon}
+              alt=""
+              width={10}
+              height={10}
+              aria-hidden="true"
+            />
+          )}
+        </div>
+      </CommandItem>
+    );
+  };
+
+  const renderEmptyState = () => (
+    <div className="flex flex-col items-center justify-center px-4 py-8 text-center">
+      <img
+        src={isDarkTheme ? NoFilesDarkIcon : NoFilesIcon}
+        alt=""
+        aria-hidden="true"
+        className="mb-3 h-16 w-16"
+      />
+      <p className="text-sm text-gray-500 dark:text-gray-400">
+        {emptyMessage || t('settings.tools.noToolsFound', 'No results found')}
+      </p>
+    </div>
+  );
+
+  return (
+    <Popover open={open} onOpenChange={onOpenChange}>
+      <PopoverTrigger asChild>{trigger}</PopoverTrigger>
+      <PopoverContent
+        align={align}
+        side={side}
+        className={cn(
+          'border-border bg-background dark:border-border dark:bg-card flex max-h-[min(600px,80vh)] w-[min(462px,calc(100vw-20px))] flex-col overflow-hidden rounded-lg p-0 shadow-md',
+          contentClassName,
+        )}
+      >
+        <Command shouldFilter={searchable} className="bg-transparent">
+          {title && (
+            <div className="shrink-0 px-4 pt-4">
+              <h3 className="text-lg font-medium text-gray-900 dark:text-white">
+                {title}
+              </h3>
+            </div>
+          )}
+          {searchable && (
+            <div className="shrink-0 px-4 pt-4">
+              <CommandInput
+                placeholder={effectivePlaceholder}
+                className="h-10"
+              />
+            </div>
+          )}
+
+          {loading ? (
+            <div className="text-foreground flex items-center justify-center py-8 dark:text-white">
+              <Spinner size="small" />
+            </div>
+          ) : (
+            <div className="dark:border-border mx-4 my-4 grow overflow-hidden rounded-md border border-[#D9D9D9]">
+              <CommandList className="max-h-none">
+                <CommandEmpty>{renderEmptyState()}</CommandEmpty>
+                {items.length === 0 ? (
+                  renderEmptyState()
+                ) : hasGroups ? (
+                  grouped.groupOrder.map((groupKey) => {
+                    const groupItems = grouped.map.get(groupKey) || [];
+                    if (groupItems.length === 0) return null;
+                    return (
+                      <CommandGroup
+                        key={`group-${groupKey || 'ungrouped'}`}
+                        heading={groupKey || undefined}
+                        className="[&_[cmdk-group-heading]]:bg-muted/50 [&_[cmdk-group-heading]]:dark:bg-card [&_[cmdk-group-heading]]:text-muted-foreground p-0 [&_[cmdk-group-heading]]:sticky [&_[cmdk-group-heading]]:top-0 [&_[cmdk-group-heading]]:z-10 [&_[cmdk-group-heading]]:border-b [&_[cmdk-group-heading]]:border-[#D9D9D9] [&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:dark:border-[#2E2E2E]"
+                      >
+                        {groupItems.map(renderItem)}
+                      </CommandGroup>
+                    );
+                  })
+                ) : (
+                  <CommandGroup className="p-0">
+                    {orderedItems.map(renderItem)}
+                  </CommandGroup>
+                )}
+              </CommandList>
+            </div>
+          )}
+
+          {footer && (
+            <div className="border-border dark:border-border shrink-0 border-t px-4 py-4">
+              {footer}
+            </div>
+          )}
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+export default MultiSelectPopover;
diff --git a/frontend/src/components/MultiSelectPopup.tsx b/frontend/src/components/MultiSelectPopup.tsx
deleted file mode 100644
index 08ac4640..00000000
--- a/frontend/src/components/MultiSelectPopup.tsx
+++ /dev/null
@@ -1,311 +0,0 @@
-import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import CheckmarkIcon from '../assets/checkmark.svg';
-import NoFilesDarkIcon from '../assets/no-files-dark.svg';
-import NoFilesIcon from '../assets/no-files.svg';
-import { useDarkTheme } from '../hooks';
-import Input from './Input';
-
-export type OptionType = {
-  id: string | number;
-  label: string;
-  icon?: string | React.ReactNode;
-  group?: string;
-  [key: string]: any;
-};
-
-type MultiSelectPopupProps = {
-  isOpen: boolean;
-  onClose: () => void;
-  anchorRef: React.RefObject<HTMLElement | null>;
-  options: OptionType[];
-  selectedIds: Set<string | number>;
-  onSelectionChange: (newSelectedIds: Set<string | number>) => void;
-  title?: string;
-  searchPlaceholder?: string;
-  noOptionsMessage?: string;
-  loading?: boolean;
-  footerContent?: React.ReactNode;
-  showSearch?: boolean;
-  singleSelect?: boolean;
-};
-
-export default function MultiSelectPopup({
-  isOpen,
-  onClose,
-  anchorRef,
-  options,
-  selectedIds,
-  onSelectionChange,
-  title,
-  searchPlaceholder,
-  noOptionsMessage,
-  loading = false,
-  footerContent,
-  showSearch = true,
-  singleSelect = false,
-}: MultiSelectPopupProps) {
-  const { t } = useTranslation();
-  const [isDarkTheme] = useDarkTheme();
-
-  const popupRef = useRef<HTMLDivElement>(null);
-
-  const [searchTerm, setSearchTerm] = useState('');
-  const [popupPosition, setPopupPosition] = useState({
-    top: 0,
-    left: 0,
-    maxHeight: 0,
-    showAbove: false,
-  });
-
-  const filteredOptions = options.filter((option) =>
-    option.label.toLowerCase().includes(searchTerm.toLowerCase()),
-  );
-
-  const handleOptionClick = (optionId: string | number) => {
-    let newSelectedIds: Set<string | number>;
-    if (singleSelect) newSelectedIds = new Set<string | number>();
-    else newSelectedIds = new Set(selectedIds);
-    if (newSelectedIds.has(optionId)) {
-      newSelectedIds.delete(optionId);
-    } else newSelectedIds.add(optionId);
-    onSelectionChange(newSelectedIds);
-  };
-
-  const renderIcon = (icon: string | React.ReactNode) => {
-    if (typeof icon === 'string') {
-      if (icon.startsWith('/') || icon.startsWith('http')) {
-        return (
-          <img
-            src={icon}
-            alt=""
-            className="mr-3 h-5 w-5 shrink-0"
-            aria-hidden="true"
-          />
-        );
-      }
-      return (
-        <span className="mr-3 h-5 w-5 shrink-0" aria-hidden="true">
-          {icon}
-        </span>
-      );
-    }
-    return <span className="mr-3 shrink-0">{icon}</span>;
-  };
-
-  useLayoutEffect(() => {
-    if (!isOpen || !anchorRef.current) return;
-
-    const updatePosition = () => {
-      if (!anchorRef.current) return;
-
-      const rect = anchorRef.current.getBoundingClientRect();
-      const viewportHeight = window.innerHeight;
-      const viewportWidth = window.innerWidth;
-      const popupPadding = 16;
-      const popupMinWidth = 300;
-      const popupMaxWidth = 462;
-      const popupDefaultHeight = 300;
-
-      const spaceAbove = rect.top;
-      const spaceBelow = viewportHeight - rect.bottom;
-      const showAbove =
-        spaceBelow < popupDefaultHeight && spaceAbove >= popupDefaultHeight;
-
-      const maxHeight = Math.max(
-        150,
-        showAbove ? spaceAbove - popupPadding : spaceBelow - popupPadding,
-      );
-
-      const availableWidth = viewportWidth - 20;
-      const calculatedWidth = Math.min(popupMaxWidth, availableWidth);
-
-      let left = rect.left;
-      if (left + calculatedWidth > viewportWidth - 10) {
-        left = viewportWidth - calculatedWidth - 10;
-      }
-      left = Math.max(10, left);
-
-      setPopupPosition({
-        top: showAbove ? rect.top - 8 : rect.bottom + 8,
-        left: left,
-        maxHeight: Math.min(600, maxHeight),
-        showAbove,
-      });
-    };
-
-    updatePosition();
-    window.addEventListener('resize', updatePosition);
-    window.addEventListener('scroll', updatePosition, true);
-
-    return () => {
-      window.removeEventListener('resize', updatePosition);
-      window.removeEventListener('scroll', updatePosition, true);
-    };
-  }, [isOpen, anchorRef]);
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        popupRef.current &&
-        !popupRef.current.contains(event.target as Node) &&
-        anchorRef.current &&
-        !anchorRef.current.contains(event.target as Node)
-      )
-        onClose();
-    };
-    if (isOpen) document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [onClose, anchorRef, isOpen]);
-
-  useEffect(() => {
-    if (!isOpen) setSearchTerm('');
-  }, [isOpen]);
-
-  if (!isOpen) return null;
-  return (
-    <div
-      ref={popupRef}
-      className="border-border bg-background dark:border-border dark:bg-card fixed z-9999 flex flex-col rounded-lg border shadow-[0px_9px_46px_8px_#0000001F,0px_24px_38px_3px_#00000024,0px_11px_15px_-7px_#00000033]"
-      style={{
-        top: popupPosition.showAbove ? undefined : popupPosition.top,
-        bottom: popupPosition.showAbove
-          ? window.innerHeight - popupPosition.top + 8
-          : undefined,
-        left: popupPosition.left,
-        maxWidth: `${Math.min(462, window.innerWidth - 20)}px`,
-        width: '100%',
-        maxHeight: `${popupPosition.maxHeight}px`,
-      }}
-    >
-      {(title || showSearch) && (
-        <div className="shrink-0 p-4">
-          {title && (
-            <h3 className="mb-4 text-lg font-medium text-gray-900 dark:text-white">
-              {title}
-            </h3>
-          )}
-          {showSearch && (
-            <Input
-              id="multi-select-search"
-              name="multi-select-search"
-              type="text"
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              placeholder={
-                searchPlaceholder ||
-                t('settings.tools.searchPlaceholder', 'Search...')
-              }
-              labelBgClassName="bg-background dark:bg-card"
-              borderVariant="thin"
-              className="mb-4"
-              textSize="small"
-            />
-          )}
-        </div>
-      )}
-      <div className="dark:border-border mx-4 mb-4 grow overflow-auto rounded-md border border-[#D9D9D9]">
-        {loading ? (
-          <div className="flex h-full items-center justify-center py-4">
-            <div className="h-6 w-6 animate-spin rounded-full border-b-2 border-gray-900 dark:border-white"></div>
-          </div>
-        ) : (
-          <div className="scrollbar-overlay h-full overflow-y-auto">
-            {filteredOptions.length === 0 ? (
-              <div className="flex h-full flex-col items-center justify-center px-4 py-8 text-center">
-                <img
-                  src={isDarkTheme ? NoFilesDarkIcon : NoFilesIcon}
-                  alt="No options found"
-                  className="mx-auto mb-3 h-16 w-16"
-                />
-                <p className="text-sm text-gray-500 dark:text-gray-400">
-                  {searchTerm
-                    ? 'No results found'
-                    : noOptionsMessage || 'No options available'}
-                </p>
-              </div>
-            ) : (
-              (() => {
-                const hasGroups = filteredOptions.some((o) => !!o.group);
-                const renderOption = (option: OptionType) => {
-                  const isSelected = selectedIds.has(option.id);
-                  return (
-                    <div
-                      key={option.id}
-                      onClick={() => handleOptionClick(option.id)}
-                      className="dark:border-border dark:hover:bg-accent hover:bg-accent flex cursor-pointer items-center justify-between border-b border-[#D9D9D9] p-3 last:border-b-0"
-                      role="option"
-                      aria-selected={isSelected}
-                    >
-                      <div className="mr-3 flex grow items-center overflow-hidden">
-                        {option.icon && renderIcon(option.icon)}
-                        <p
-                          className="overflow-hidden text-sm font-medium text-ellipsis whitespace-nowrap text-gray-900 dark:text-white"
-                          title={option.label}
-                        >
-                          {option.label}
-                        </p>
-                      </div>
-                      <div className="shrink-0">
-                        <div
-                          className={`border-border bg-card flex h-4 w-4 items-center justify-center rounded-xs border-2`}
-                          aria-hidden="true"
-                        >
-                          {isSelected && (
-                            <img
-                              src={CheckmarkIcon}
-                              alt="checkmark"
-                              width={10}
-                              height={10}
-                            />
-                          )}
-                        </div>
-                      </div>
-                    </div>
-                  );
-                };
-
-                if (!hasGroups) {
-                  return filteredOptions.map(renderOption);
-                }
-
-                const groupOrder: string[] = [];
-                const groupMap = new Map<string, OptionType[]>();
-                filteredOptions.forEach((opt) => {
-                  const key = opt.group || '';
-                  if (!groupMap.has(key)) {
-                    groupOrder.push(key);
-                    groupMap.set(key, []);
-                  }
-                  groupMap.get(key)!.push(opt);
-                });
-
-                return groupOrder.map((groupKey) => (
-                  <div key={`group-${groupKey || 'ungrouped'}`}>
-                    {groupKey && (
-                      <div
-                        className="bg-muted/50 dark:bg-card text-muted-foreground sticky top-0 z-10 border-b border-[#D9D9D9] px-3 py-1.5 text-xs font-semibold uppercase dark:border-[#2E2E2E]"
-                        role="presentation"
-                      >
-                        {groupKey}
-                      </div>
-                    )}
-                    {(groupMap.get(groupKey) || []).map(renderOption)}
-                  </div>
-                ));
-              })()
-            )}
-          </div>
-        )}
-      </div>
-      {footerContent && (
-        <div className="border-border dark:border-border shrink-0 border-t p-4">
-          {footerContent}
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/frontend/src/components/Notification.tsx b/frontend/src/components/Notification.tsx
index bda2bed7..def9f580 100644
--- a/frontend/src/components/Notification.tsx
+++ b/frontend/src/components/Notification.tsx
@@ -1,5 +1,6 @@
 import { useTranslation } from 'react-i18next';
 import close from '../assets/cross.svg';
+import { Button } from './ui/button';
 
 interface NotificationProps {
   notificationText: string;
@@ -43,7 +44,7 @@ export default function Notification({
         }
       `}</style>
       <a
-        className="group absolute right-2 bottom-6 z-20 flex w-3/4 items-center justify-center gap-2 overflow-hidden rounded-lg px-2 py-4 sm:right-4 md:w-2/5 lg:w-1/3 xl:w-1/4 2xl:w-1/5"
+        className="group absolute right-2 bottom-24 z-20 flex w-3/4 items-center justify-center gap-2 overflow-hidden rounded-lg px-2 py-4 sm:right-4 sm:bottom-6 md:w-2/5 lg:w-1/3 xl:w-1/4 2xl:w-1/5"
         style={{
           background:
             'linear-gradient(90deg, #390086 0%, #6222B7 100%), linear-gradient(90deg, rgba(57, 0, 134, 0) 0%, #6222B7 53.02%, rgba(57, 0, 134, 0) 100%)',
@@ -118,8 +119,10 @@ export default function Notification({
           </svg>
         </span>
 
-        <button
-          className="absolute top-2 right-2 z-30 h-4 w-4 hover:opacity-70"
+        <Button
+          type="button"
+          variant="ghost"
+          className="absolute top-2 right-2 z-30 h-4 w-4 rounded-none bg-transparent p-0 hover:bg-transparent hover:opacity-70"
           aria-label={t('notification.closeAriaLabel')}
           onClick={(e) => {
             e.stopPropagation();
@@ -128,7 +131,7 @@ export default function Notification({
           }}
         >
           <img className="w-full" src={close} alt="Close notification" />
-        </button>
+        </Button>
       </a>
     </>
   );
diff --git a/frontend/src/components/RetryIcon.tsx b/frontend/src/components/RetryIcon.tsx
deleted file mode 100644
index 8cecbd2f..00000000
--- a/frontend/src/components/RetryIcon.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import * as React from 'react';
-import { SVGProps } from 'react';
-const RetryIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    xmlSpace="preserve"
-    width={props.width ? props.width : 16}
-    height={props.height ? props.height : 16}
-    fill={props.fill}
-    stroke={props.stroke ? props.stroke : 'none'}
-    strokeWidth={props.strokeWidth ? props.strokeWidth : 10}
-    viewBox="0 0 383.748 383.748"
-    {...props}
-  >
-    <path d="M62.772 95.042C90.904 54.899 137.496 30 187.343 30c83.743 0 151.874 68.13 151.874 151.874h30C369.217 81.588 287.629 0 187.343 0c-35.038 0-69.061 9.989-98.391 28.888a182.423 182.423 0 0 0-47.731 44.705L2.081 34.641v113.365h113.91L62.772 95.042zM381.667 235.742h-113.91l53.219 52.965c-28.132 40.142-74.724 65.042-124.571 65.042-83.744 0-151.874-68.13-151.874-151.874h-30c0 100.286 81.588 181.874 181.874 181.874 35.038 0 69.062-9.989 98.391-28.888a182.443 182.443 0 0 0 47.731-44.706l39.139 38.952V235.742z" />
-  </svg>
-);
-export default RetryIcon;
diff --git a/frontend/src/components/SendArrowIcon.tsx b/frontend/src/components/SendArrowIcon.tsx
deleted file mode 100644
index f88dde3d..00000000
--- a/frontend/src/components/SendArrowIcon.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { SVGProps } from 'react';
-const SendArrowIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    width="11"
-    height="14"
-    viewBox="0 0 11 14"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path
-      d="M0.292786 6.20676C0.105315 6.01923 -3.59956e-07 5.76492 -3.71547e-07 5.49976C-3.83138e-07 5.23459 0.105315 4.98028 0.292786 4.79276L4.79279 0.292756C4.98031 0.105284 5.23462 -3.07464e-05 5.49979 -3.0758e-05C5.76495 -3.07696e-05 6.01926 0.105284 6.20679 0.292756L10.7068 4.79276C10.8889 4.98136 10.9897 5.23396 10.9875 5.49616C10.9852 5.75835 10.88 6.00917 10.6946 6.19457C10.5092 6.37998 10.2584 6.48515 9.99619 6.48743C9.73399 6.48971 9.48139 6.38891 9.29279 6.20676L6.49979 3.49976L6.49979 12.9998C6.49979 13.265 6.39443 13.5193 6.20689 13.7069C6.01936 13.8944 5.765 13.9998 5.49979 13.9998C5.23457 13.9998 4.98022 13.8944 4.79268 13.7069C4.60514 13.5193 4.49979 13.265 4.49979 12.9998L4.49979 3.49976L1.70679 6.20676C1.51926 6.39423 1.26495 6.49954 0.999786 6.49954C0.734622 6.49954 0.480314 6.39423 0.292786 6.20676Z"
-      fill="currentColor"
-    />
-  </svg>
-);
-export default SendArrowIcon;
diff --git a/frontend/src/components/SettingsBar.tsx b/frontend/src/components/SettingsBar.tsx
deleted file mode 100644
index 123333f0..00000000
--- a/frontend/src/components/SettingsBar.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import React, { useCallback, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import ArrowLeft from '../assets/arrow-left.svg';
-import ArrowRight from '../assets/arrow-right.svg';
-
-type HiddenGradientType = 'left' | 'right' | undefined;
-
-const useTabs = () => {
-  const { t } = useTranslation();
-  const tabs = [
-    t('settings.general.label'),
-    t('settings.sources.label'),
-    t('settings.analytics.label'),
-    t('settings.logs.label'),
-    t('settings.tools.label'),
-    t('settings.customModels.label'),
-  ];
-  return tabs;
-};
-
-interface SettingsBarProps {
-  setActiveTab: React.Dispatch<React.SetStateAction<string>>;
-  activeTab: string;
-}
-
-const SettingsBar = ({ setActiveTab, activeTab }: SettingsBarProps) => {
-  const { t } = useTranslation();
-  const [hiddenGradient, setHiddenGradient] =
-    useState<HiddenGradientType>('left');
-  const containerRef = useRef<null | HTMLDivElement>(null);
-  const tabs = useTabs();
-  const scrollTabs = useCallback(
-    (direction: number) => {
-      if (containerRef.current) {
-        const container = containerRef.current;
-        container.scrollLeft += direction * 100; // Adjust the scroll amount as needed
-        if (container.scrollLeft === 0) {
-          setHiddenGradient('left');
-        } else if (
-          container.scrollLeft + container.offsetWidth ===
-          container.scrollWidth
-        ) {
-          setHiddenGradient('right');
-        } else {
-          setHiddenGradient(undefined);
-        }
-      }
-    },
-    [containerRef.current],
-  );
-  return (
-    <div className="relative mt-6 flex flex-row items-center space-x-1 overflow-auto md:space-x-0">
-      <div
-        className={`${hiddenGradient === 'left' ? 'hidden' : ''} dark:from-background pointer-events-none absolute inset-y-0 left-6 w-14 bg-linear-to-r from-white md:hidden`}
-      ></div>
-      <div
-        className={`${hiddenGradient === 'right' ? 'hidden' : ''} dark:from-background pointer-events-none absolute inset-y-0 right-6 w-14 bg-linear-to-l from-white md:hidden`}
-      ></div>
-
-      <div className="z-10 md:hidden">
-        <button
-          onClick={() => scrollTabs(-1)}
-          className="hover:bg-muted dark:hover:bg-accent flex h-6 w-6 items-center justify-center rounded-full transition-all"
-          aria-label={t('settings.scrollTabsLeft')}
-        >
-          <img src={ArrowLeft} alt="left-arrow" className="h-3" />
-        </button>
-      </div>
-      <div
-        ref={containerRef}
-        className="no-scrollbar flex snap-x flex-nowrap overflow-x-auto scroll-smooth md:space-x-4"
-        role="tablist"
-        aria-label={t('settings.tabsAriaLabel')}
-      >
-        {tabs.map((tab, index) => (
-          <button
-            key={index}
-            onClick={() => setActiveTab(tab)}
-            className={`h-9 snap-start rounded-3xl px-4 font-bold transition-colors ${
-              activeTab === tab
-                ? 'bg-muted text-foreground dark:bg-accent dark:text-white'
-                : 'text-muted-foreground hover:text-foreground dark:text-neutral-400 dark:hover:text-white'
-            }`}
-            role="tab"
-            aria-selected={activeTab === tab}
-            aria-controls={`${tab.toLowerCase()}-panel`}
-            id={`${tab.toLowerCase()}-tab`}
-          >
-            {tab}
-          </button>
-        ))}
-      </div>
-      <div className="z-10 md:hidden">
-        <button
-          onClick={() => scrollTabs(1)}
-          className="hover:bg-muted dark:hover:bg-accent flex h-6 w-6 items-center justify-center rounded-full"
-          aria-label={t('settings.scrollTabsRight')}
-        >
-          <img src={ArrowRight} alt="right-arrow" className="h-3" />
-        </button>
-      </div>
-    </div>
-  );
-};
-
-export default SettingsBar;
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
deleted file mode 100644
index 9db032a5..00000000
--- a/frontend/src/components/Sidebar.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from 'react';
-
-import Exit from '../assets/exit.svg';
-
-type SidebarProps = {
-  isOpen: boolean;
-  toggleState: (arg0: boolean) => void;
-  children: React.ReactNode;
-};
-
-export default function Sidebar({
-  isOpen,
-  toggleState,
-  children,
-}: SidebarProps) {
-  const sidebarRef = React.useRef<HTMLDivElement>(null);
-
-  const handleClickOutside = (event: MouseEvent) => {
-    if (
-      sidebarRef.current &&
-      !sidebarRef.current.contains(event.target as Node)
-    ) {
-      toggleState(false);
-    }
-  };
-
-  React.useEffect(() => {
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, []);
-  return (
-    <div ref={sidebarRef} className="h-vh relative">
-      <div
-        className={`bg-card fixed top-0 right-0 z-50 h-full w-64 transform shadow-xl transition-all duration-300 sm:w-80 ${
-          isOpen ? 'translate-x-[10px]' : 'translate-x-full'
-        } border-l border-[#9ca3af]/10`}
-      >
-        <div className="flex w-full flex-row items-end justify-end px-4 pt-3">
-          <button
-            className="hover:bg-accent w-7 rounded-full p-2"
-            onClick={() => toggleState(!isOpen)}
-          >
-            <img className="filter dark:invert" src={Exit} />
-          </button>
-        </div>
-        <div className="flex h-full flex-col items-center gap-2 px-6 py-4 text-center">
-          {children}
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/frontend/src/components/SkeletonLoader.tsx b/frontend/src/components/SkeletonLoader.tsx
index 0510f892..00f23249 100644
--- a/frontend/src/components/SkeletonLoader.tsx
+++ b/frontend/src/components/SkeletonLoader.tsx
@@ -12,7 +12,9 @@ interface SkeletonLoaderProps {
     | 'chunkCards'
     | 'sourceCards'
     | 'toolCards'
-    | 'addToolCards';
+    | 'addToolCards'
+    | 'connectedState'
+    | 'filesSection';
 }
 
 const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
@@ -47,16 +49,16 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
       {[...Array(4)].map((_, idx) => (
         <tr key={idx} className="animate-pulse">
           <td className="w-[40%] px-4 py-4">
-            <div className="h-4 w-full rounded-sm bg-gray-300 dark:bg-gray-600"></div>
+            <div className="bg-muted h-4 w-full rounded-sm"></div>
           </td>
           <td className="w-[30%] px-4 py-4">
-            <div className="h-4 w-full rounded-sm bg-gray-300 dark:bg-gray-600"></div>
+            <div className="bg-muted h-4 w-full rounded-sm"></div>
           </td>
           <td className="w-[20%] px-4 py-4">
-            <div className="h-4 w-full rounded-sm bg-gray-300 dark:bg-gray-600"></div>
+            <div className="bg-muted h-4 w-full rounded-sm"></div>
           </td>
           <td className="w-[10%] px-4 py-4">
-            <div className="h-4 w-full rounded-sm bg-gray-300 dark:bg-gray-600"></div>
+            <div className="bg-muted h-4 w-full rounded-sm"></div>
           </td>
         </tr>
       ))}
@@ -68,16 +70,16 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
       {[...Array(4)].map((_, idx) => (
         <tr key={idx} className="animate-pulse">
           <td className="p-2">
-            <div className="mx-auto h-4 w-3/4 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
+            <div className="bg-muted mx-auto h-4 w-3/4 rounded-sm"></div>
           </td>
           <td className="p-2">
-            <div className="mx-auto h-4 w-full rounded-sm bg-gray-300 dark:bg-gray-600"></div>
+            <div className="bg-muted mx-auto h-4 w-full rounded-sm"></div>
           </td>
           <td className="p-2">
-            <div className="mx-auto h-4 w-full rounded-sm bg-gray-300 dark:bg-gray-600"></div>
+            <div className="bg-muted mx-auto h-4 w-full rounded-sm"></div>
           </td>
           <td className="p-2">
-            <div className="mx-auto h-4 w-8 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
+            <div className="bg-muted mx-auto h-4 w-8 rounded-sm"></div>
           </td>
         </tr>
       ))}
@@ -86,10 +88,10 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
 
   const renderDropdown = () => (
     <div className="animate-pulse">
-      <div className="mb-2 h-4 w-24 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
-      <div className="flex h-14 w-[360px] items-center justify-between rounded-3xl bg-gray-300 px-4 dark:bg-gray-600">
-        <div className="h-3 w-24 rounded-sm bg-gray-400 dark:bg-gray-700"></div>
-        <div className="h-3 w-3 rounded-sm bg-gray-400 dark:bg-gray-700"></div>
+      <div className="bg-muted mb-2 h-4 w-24 rounded-sm"></div>
+      <div className="bg-muted flex h-14 w-[360px] items-center justify-between rounded-3xl px-4">
+        <div className="bg-muted-foreground/20 h-3 w-24 rounded-sm"></div>
+        <div className="bg-muted-foreground/20 h-3 w-3 rounded-sm"></div>
       </div>
     </div>
   );
@@ -102,11 +104,11 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
           className="dark:hover:bg-accent hover:bg-muted flex w-full items-start p-2"
         >
           <div className="flex w-full items-center gap-2">
-            <div className="h-3 w-3 rounded-lg bg-gray-300 dark:bg-gray-600"></div>
+            <div className="bg-muted h-3 w-3 rounded-lg"></div>
             <div className="flex w-full flex-row items-center gap-2">
-              <div className="h-3 w-[30%] rounded-lg bg-gray-300 lg:w-52 dark:bg-gray-600"></div>
-              <div className="h-3 w-[16%] rounded-lg bg-gray-300 lg:w-28 dark:bg-gray-600"></div>
-              <div className="h-3 w-[40%] rounded-lg bg-gray-300 lg:w-64 dark:bg-gray-600"></div>
+              <div className="bg-muted h-3 w-[30%] rounded-lg lg:w-52"></div>
+              <div className="bg-muted h-3 w-[16%] rounded-lg lg:w-28"></div>
+              <div className="bg-muted h-3 w-[40%] rounded-lg lg:w-64"></div>
             </div>
           </div>
         </div>
@@ -125,28 +127,28 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
         >
           <div className="space-y-4">
             <div>
-              <div className="mb-2 h-4 w-3/4 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
-              <div className="mb-2 h-4 w-5/6 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
-              <div className="mb-2 h-4 w-1/2 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
-              <div className="mb-2 h-4 w-3/4 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
-              <div className="mb-2 h-4 w-full rounded-sm bg-gray-300 dark:bg-gray-600"></div>
+              <div className="bg-muted mb-2 h-4 w-3/4 rounded-sm"></div>
+              <div className="bg-muted mb-2 h-4 w-5/6 rounded-sm"></div>
+              <div className="bg-muted mb-2 h-4 w-1/2 rounded-sm"></div>
+              <div className="bg-muted mb-2 h-4 w-3/4 rounded-sm"></div>
+              <div className="bg-muted mb-2 h-4 w-full rounded-sm"></div>
             </div>
-            <div className="my-4 border-t border-gray-400 dark:border-gray-700"></div>
+            <div className="border-border my-4 border-t"></div>
             <div>
-              <div className="mb-2 h-4 w-2/3 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
-              <div className="mb-2 h-4 w-1/4 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
-              <div className="mb-2 h-4 w-full rounded-sm bg-gray-300 dark:bg-gray-600"></div>
+              <div className="bg-muted mb-2 h-4 w-2/3 rounded-sm"></div>
+              <div className="bg-muted mb-2 h-4 w-1/4 rounded-sm"></div>
+              <div className="bg-muted mb-2 h-4 w-full rounded-sm"></div>
             </div>
-            <div className="my-4 border-t border-gray-400 dark:border-gray-700"></div>
+            <div className="border-border my-4 border-t"></div>
             <div>
-              <div className="mb-2 h-4 w-5/6 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
-              <div className="mb-2 h-4 w-1/3 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
-              <div className="mb-2 h-4 w-2/3 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
-              <div className="mb-2 h-4 w-full rounded-sm bg-gray-300 dark:bg-gray-600"></div>
+              <div className="bg-muted mb-2 h-4 w-5/6 rounded-sm"></div>
+              <div className="bg-muted mb-2 h-4 w-1/3 rounded-sm"></div>
+              <div className="bg-muted mb-2 h-4 w-2/3 rounded-sm"></div>
+              <div className="bg-muted mb-2 h-4 w-full rounded-sm"></div>
             </div>
-            <div className="my-4 border-t border-gray-400 dark:border-gray-700"></div>
-            <div className="mb-2 h-4 w-3/4 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
-            <div className="mb-2 h-4 w-5/6 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
+            <div className="border-border my-4 border-t"></div>
+            <div className="bg-muted mb-2 h-4 w-3/4 rounded-sm"></div>
+            <div className="bg-muted mb-2 h-4 w-5/6 rounded-sm"></div>
           </div>
         </div>
       ))}
@@ -159,23 +161,23 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
         <div key={idx} className="bg-card w-full animate-pulse rounded-3xl p-6">
           <div className="space-y-6">
             <div className="space-y-2">
-              <div className="mb-4 h-4 w-1/3 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
+              <div className="bg-muted mb-4 h-4 w-1/3 rounded-sm"></div>
               <div className="grid grid-cols-6 items-end gap-2">
-                <div className="h-32 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
-                <div className="h-24 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
-                <div className="h-40 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
-                <div className="h-28 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
-                <div className="h-36 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
-                <div className="h-20 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
+                <div className="bg-muted h-32 rounded-sm"></div>
+                <div className="bg-muted h-24 rounded-sm"></div>
+                <div className="bg-muted h-40 rounded-sm"></div>
+                <div className="bg-muted h-28 rounded-sm"></div>
+                <div className="bg-muted h-36 rounded-sm"></div>
+                <div className="bg-muted h-20 rounded-sm"></div>
               </div>
             </div>
             <div className="space-y-2">
-              <div className="mb-4 h-4 w-1/4 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
-              <div className="h-32 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
+              <div className="bg-muted mb-4 h-4 w-1/4 rounded-sm"></div>
+              <div className="bg-muted h-32 rounded-sm"></div>
             </div>
             <div className="grid grid-cols-2 gap-4">
-              <div className="h-4 w-full rounded-sm bg-gray-300 dark:bg-gray-600"></div>
-              <div className="h-4 w-full rounded-sm bg-gray-300 dark:bg-gray-600"></div>
+              <div className="bg-muted h-4 w-full rounded-sm"></div>
+              <div className="bg-muted h-4 w-full rounded-sm"></div>
             </div>
           </div>
         </div>
@@ -188,19 +190,19 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
       {Array.from({ length: count }).map((_, index) => (
         <div
           key={`chunk-skel-${index}`}
-          className="border-border dark:border-border relative flex h-[197px] w-full max-w-[487px] animate-pulse flex-col overflow-hidden rounded-[5.86px] border"
+          className="border-border dark:border-border relative flex h-[197px] w-full max-w-[487px] animate-pulse flex-col overflow-hidden rounded-md border"
         >
           <div className="w-full">
             <div className="border-border bg-muted dark:border-border dark:bg-card flex w-full items-center justify-between border-b px-4 py-3">
-              <div className="h-4 w-20 rounded bg-gray-300 dark:bg-gray-600"></div>
+              <div className="bg-muted-foreground/20 h-4 w-20 rounded"></div>
             </div>
             <div className="space-y-3 px-4 pt-4 pb-6">
-              <div className="h-3 w-full rounded bg-gray-200 dark:bg-gray-700"></div>
-              <div className="h-3 w-11/12 rounded bg-gray-200 dark:bg-gray-700"></div>
-              <div className="h-3 w-5/6 rounded bg-gray-200 dark:bg-gray-700"></div>
-              <div className="h-3 w-4/5 rounded bg-gray-200 dark:bg-gray-700"></div>
-              <div className="h-3 w-3/4 rounded bg-gray-200 dark:bg-gray-700"></div>
-              <div className="h-3 w-2/3 rounded bg-gray-200 dark:bg-gray-700"></div>
+              <div className="bg-muted h-3 w-full rounded"></div>
+              <div className="bg-muted h-3 w-11/12 rounded"></div>
+              <div className="bg-muted h-3 w-5/6 rounded"></div>
+              <div className="bg-muted h-3 w-4/5 rounded"></div>
+              <div className="bg-muted h-3 w-3/4 rounded"></div>
+              <div className="bg-muted h-3 w-2/3 rounded"></div>
             </div>
           </div>
         </div>
@@ -218,20 +220,20 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
           <div className="w-full flex-1">
             <div className="flex w-full items-center justify-between gap-2">
               <div className="flex-1">
-                <div className="h-[13px] w-full rounded bg-gray-200 dark:bg-gray-700"></div>
+                <div className="bg-muted-foreground/20 h-[13px] w-full rounded"></div>
               </div>
-              <div className="h-6 w-6 rounded bg-gray-200 dark:bg-gray-700"></div>
+              <div className="bg-muted-foreground/20 h-6 w-6 rounded"></div>
             </div>
           </div>
 
           <div className="flex flex-col items-start justify-start gap-1 pt-3">
             <div className="mb-1 flex items-center gap-2">
-              <div className="h-3 w-3 rounded bg-gray-200 dark:bg-gray-700"></div>
-              <div className="h-[12px] w-20 rounded bg-gray-200 dark:bg-gray-700"></div>
+              <div className="bg-muted-foreground/20 h-3 w-3 rounded"></div>
+              <div className="bg-muted-foreground/20 h-[12px] w-20 rounded"></div>
             </div>
             <div className="flex items-center gap-2">
-              <div className="h-3 w-3 rounded bg-gray-200 dark:bg-gray-700"></div>
-              <div className="h-[12px] w-16 rounded bg-gray-200 dark:bg-gray-700"></div>
+              <div className="bg-muted-foreground/20 h-3 w-3 rounded"></div>
+              <div className="bg-muted-foreground/20 h-[12px] w-16 rounded"></div>
             </div>
           </div>
         </div>
@@ -244,17 +246,17 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
       {Array.from({ length: count }).map((_, idx) => (
         <div
           key={`add-tool-skel-${idx}`}
-          className="border-light-gainsboro dark:border-arsenic flex h-52 w-full animate-pulse flex-col justify-between rounded-2xl border p-6"
+          className="border-border flex h-52 w-full animate-pulse flex-col justify-between rounded-2xl border p-6"
         >
           <div className="w-full">
             <div className="flex w-full items-center justify-between px-1">
-              <div className="h-6 w-6 rounded bg-gray-300 dark:bg-gray-600"></div>
+              <div className="bg-muted h-6 w-6 rounded"></div>
             </div>
             <div className="mt-[9px] space-y-2 px-1">
-              <div className="h-4 w-2/3 rounded bg-gray-300 dark:bg-gray-600"></div>
-              <div className="h-3 w-full rounded bg-gray-200 dark:bg-gray-700"></div>
-              <div className="h-3 w-5/6 rounded bg-gray-200 dark:bg-gray-700"></div>
-              <div className="h-3 w-3/4 rounded bg-gray-200 dark:bg-gray-700"></div>
+              <div className="bg-muted h-4 w-2/3 rounded"></div>
+              <div className="bg-muted h-3 w-full rounded"></div>
+              <div className="bg-muted h-3 w-5/6 rounded"></div>
+              <div className="bg-muted h-3 w-3/4 rounded"></div>
             </div>
           </div>
         </div>
@@ -271,23 +273,47 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
         >
           <div className="w-full">
             <div className="flex items-center gap-2 px-1">
-              <div className="h-6 w-6 rounded bg-gray-300 dark:bg-gray-600"></div>
+              <div className="bg-muted-foreground/20 h-6 w-6 rounded"></div>
             </div>
             <div className="mt-[9px] space-y-2 px-1">
-              <div className="h-4 w-2/3 rounded bg-gray-300 dark:bg-gray-600"></div>
-              <div className="h-3 w-full rounded bg-gray-200 dark:bg-gray-700"></div>
-              <div className="h-3 w-5/6 rounded bg-gray-200 dark:bg-gray-700"></div>
-              <div className="h-3 w-3/4 rounded bg-gray-200 dark:bg-gray-700"></div>
+              <div className="bg-muted-foreground/20 h-4 w-2/3 rounded"></div>
+              <div className="bg-muted-foreground/20 h-3 w-full rounded"></div>
+              <div className="bg-muted-foreground/20 h-3 w-5/6 rounded"></div>
+              <div className="bg-muted-foreground/20 h-3 w-3/4 rounded"></div>
             </div>
           </div>
           <div className="flex justify-end">
-            <div className="h-5 w-9 rounded-full bg-gray-300 dark:bg-gray-600"></div>
+            <div className="bg-muted-foreground/20 h-5 w-9 rounded-full"></div>
           </div>
         </div>
       ))}
     </>
   );
 
+  const renderConnectedState = () => (
+    <div className="mb-4">
+      <div className="bg-muted flex w-full animate-pulse items-center justify-between rounded-lg px-4 py-2">
+        <div className="flex items-center gap-2">
+          <div className="bg-muted-foreground/20 h-4 w-4 rounded"></div>
+          <div className="bg-muted-foreground/20 h-4 w-32 rounded"></div>
+        </div>
+        <div className="bg-muted-foreground/20 h-4 w-16 rounded"></div>
+      </div>
+    </div>
+  );
+
+  const renderFilesSection = () => (
+    <div className="border-border dark:border-border rounded-lg border">
+      <div className="p-4">
+        <div className="mb-4 flex items-center justify-between">
+          <div className="bg-muted h-5 w-24 animate-pulse rounded"></div>
+          <div className="bg-muted h-8 w-24 animate-pulse rounded"></div>
+        </div>
+        <div className="bg-muted h-4 w-40 animate-pulse rounded"></div>
+      </div>
+    </div>
+  );
+
   const componentMap = {
     fileTable: renderTable,
     chatbot: renderChatbot,
@@ -299,6 +325,8 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
     sourceCards: renderSourceCards,
     toolCards: renderToolCards,
     addToolCards: renderAddToolCards,
+    connectedState: renderConnectedState,
+    filesSection: renderFilesSection,
   };
 
   const render = componentMap[component] || componentMap.default;
diff --git a/frontend/src/components/SourcesPopup.tsx b/frontend/src/components/SourcesPopup.tsx
deleted file mode 100644
index 34a27aa5..00000000
--- a/frontend/src/components/SourcesPopup.tsx
+++ /dev/null
@@ -1,238 +0,0 @@
-import React, { useRef, useEffect, useState, useLayoutEffect } from 'react';
-import { createPortal } from 'react-dom';
-import { useTranslation } from 'react-i18next';
-import { useDispatch, useSelector } from 'react-redux';
-import { Doc } from '../models/misc';
-import SourceIcon from '../assets/source.svg';
-import CheckIcon from '../assets/checkmark.svg';
-import RedirectIcon from '../assets/redirect.svg';
-import Input from './Input';
-import {
-  selectSourceDocs,
-  selectSelectedDocs,
-  setSelectedDocs,
-} from '../preferences/preferenceSlice';
-import { ActiveState } from '../models/misc';
-
-type SourcesPopupProps = {
-  isOpen: boolean;
-  onClose: () => void;
-  anchorRef: React.RefObject<HTMLButtonElement | null>;
-  handlePostDocumentSelect: (doc: Doc[] | null) => void;
-  setUploadModalState: React.Dispatch<React.SetStateAction<ActiveState>>;
-};
-
-export default function SourcesPopup({
-  isOpen,
-  onClose,
-  anchorRef,
-  handlePostDocumentSelect,
-  setUploadModalState,
-}: SourcesPopupProps) {
-  const dispatch = useDispatch();
-  const { t } = useTranslation();
-  const popupRef = useRef<HTMLDivElement>(null);
-  const [searchTerm, setSearchTerm] = useState('');
-  const [popupPosition, setPopupPosition] = useState({
-    top: 0,
-    left: 0,
-    maxHeight: 0,
-    showAbove: false,
-  });
-
-  const options = useSelector(selectSourceDocs);
-  const selectedDocs = useSelector(selectSelectedDocs);
-
-  const filteredOptions = options?.filter((option) =>
-    option.name.toLowerCase().includes(searchTerm.toLowerCase()),
-  );
-
-  useLayoutEffect(() => {
-    if (!isOpen || !anchorRef.current) return;
-
-    const updatePosition = () => {
-      if (!anchorRef.current) return;
-
-      const rect = anchorRef.current.getBoundingClientRect();
-      const viewportHeight = window.innerHeight;
-      const viewportWidth = window.innerWidth;
-      const spaceAbove = rect.top;
-      const spaceBelow = viewportHeight - rect.bottom;
-      const showAbove = spaceAbove > spaceBelow && spaceAbove >= 300;
-      const maxHeight = showAbove ? spaceAbove - 16 : spaceBelow - 16;
-      const left = Math.min(
-        rect.left,
-        viewportWidth - Math.min(480, viewportWidth * 0.95) - 10,
-      );
-
-      setPopupPosition({
-        top: showAbove ? rect.top - 8 : rect.bottom + 8,
-        left,
-        maxHeight: Math.min(600, maxHeight),
-        showAbove,
-      });
-    };
-
-    updatePosition();
-    window.addEventListener('resize', updatePosition);
-    return () => window.removeEventListener('resize', updatePosition);
-  }, [isOpen, anchorRef]);
-
-  const handleClickOutside = (event: MouseEvent) => {
-    if (
-      popupRef.current &&
-      !popupRef.current.contains(event.target as Node) &&
-      !anchorRef.current?.contains(event.target as Node)
-    ) {
-      onClose();
-    }
-  };
-
-  useEffect(() => {
-    if (isOpen) {
-      document.addEventListener('mousedown', handleClickOutside);
-    }
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [isOpen]);
-
-  if (!isOpen) return null;
-
-  const handleUploadClick = () => {
-    setUploadModalState('ACTIVE');
-    onClose();
-  };
-
-  const popupContent = (
-    <div
-      ref={popupRef}
-      className="bg-background dark:bg-card fixed z-50 flex flex-col rounded-xl shadow-[0px_9px_46px_8px_#0000001F,0px_24px_38px_3px_#00000024,0px_11px_15px_-7px_#00000033]"
-      style={{
-        top: popupPosition.showAbove ? popupPosition.top : undefined,
-        bottom: popupPosition.showAbove
-          ? undefined
-          : window.innerHeight - popupPosition.top,
-        left: popupPosition.left,
-        maxWidth: Math.min(480, window.innerWidth * 0.95),
-        width: '100%',
-        height: popupPosition.maxHeight,
-        transform: popupPosition.showAbove ? 'translateY(-100%)' : 'none',
-      }}
-    >
-      <div className="flex h-full flex-col">
-        <div className="shrink-0 px-4 py-4 md:px-6">
-          <h2 className="dark:text-foreground mb-4 text-lg font-bold text-[#141414] dark:text-[20px]">
-            {t('conversation.sources.text')}
-          </h2>
-
-          <Input
-            id="source-search"
-            name="source-search"
-            type="text"
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-            placeholder={t('settings.sources.searchPlaceholder')}
-            borderVariant="thin"
-            className="mb-4"
-            labelBgClassName="bg-background dark:bg-card"
-          />
-        </div>
-
-        <div className="dark:border-border scrollbar-overlay mx-4 grow overflow-y-auto rounded-md border border-[#D9D9D9]">
-          {options ? (
-            <>
-              {filteredOptions?.map((option: any, index: number) => {
-                const isSelected =
-                  selectedDocs &&
-                  Array.isArray(selectedDocs) &&
-                  selectedDocs.length > 0 &&
-                  selectedDocs.some((doc) =>
-                    option.id ? doc.id === option.id : doc.date === option.date,
-                  );
-
-                return (
-                  <div
-                    key={index}
-                    className="border-opacity-80 dark:border-border hover:bg-muted flex cursor-pointer items-center border-b border-[#D9D9D9] p-3 transition-colors dark:text-[14px]"
-                    onClick={() => {
-                      if (isSelected) {
-                        const updatedDocs =
-                          selectedDocs && Array.isArray(selectedDocs)
-                            ? selectedDocs.filter((doc) =>
-                                option.id
-                                  ? doc.id !== option.id
-                                  : doc.date !== option.date,
-                              )
-                            : [];
-                        dispatch(setSelectedDocs(updatedDocs));
-                        handlePostDocumentSelect(
-                          updatedDocs.length > 0 ? updatedDocs : null,
-                        );
-                      } else {
-                        const updatedDocs =
-                          selectedDocs && Array.isArray(selectedDocs)
-                            ? [...selectedDocs, option]
-                            : [option];
-                        dispatch(setSelectedDocs(updatedDocs));
-                        handlePostDocumentSelect(updatedDocs);
-                      }
-                    }}
-                  >
-                    <img
-                      src={SourceIcon}
-                      alt="Source"
-                      width={14}
-                      height={14}
-                      className="mr-3 shrink-0"
-                    />
-                    <span className="dark:text-foreground text-muted-foreground mr-3 grow overflow-hidden font-medium text-ellipsis whitespace-nowrap">
-                      {option.name}
-                    </span>
-                    <div
-                      className={`dark:border-border flex h-4 w-4 shrink-0 items-center justify-center rounded-xs border-2 border-[#C6C6C6] p-[0.5px]`}
-                    >
-                      {isSelected && (
-                        <img
-                          src={CheckIcon}
-                          alt="Selected"
-                          className="h-3 w-3"
-                        />
-                      )}
-                    </div>
-                  </div>
-                );
-              })}
-            </>
-          ) : (
-            <div className="dark:text-foreground p-4 text-center text-gray-500 dark:text-[14px]">
-              {t('conversation.sources.noSourcesAvailable')}
-            </div>
-          )}
-        </div>
-
-        <div className="shrink-0 px-4 py-4 opacity-75 transition-opacity duration-200 hover:opacity-100 md:px-6">
-          <a
-            href="/settings/sources"
-            className="text-primary inline-flex items-center gap-2 text-base font-medium"
-            onClick={onClose}
-          >
-            {t('settings.sources.goToSources')}
-            <img src={RedirectIcon} alt="Redirect" className="h-3 w-3" />
-          </a>
-        </div>
-
-        <div className="flex shrink-0 justify-start px-4 py-3 md:px-6">
-          <button
-            onClick={handleUploadClick}
-            className="border-primary text-primary hover:bg-primary/90 w-auto rounded-full border px-4 py-2 text-[14px] font-medium transition-colors duration-200 hover:text-white"
-          >
-            {t('settings.sources.uploadNew')}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-
-  return createPortal(popupContent, document.body);
-}
diff --git a/frontend/src/components/Spinner.tsx b/frontend/src/components/Spinner.tsx
index d34a5665..dda8b8c3 100644
--- a/frontend/src/components/Spinner.tsx
+++ b/frontend/src/components/Spinner.tsx
@@ -2,42 +2,32 @@ import React from 'react';
 
 type SpinnerProps = {
   size?: 'small' | 'medium' | 'large';
-  color?: string;
 };
 
-export default function Spinner({
-  size = 'medium',
-  color = 'grey',
-}: SpinnerProps) {
-  const sizeMap = {
-    small: '20px',
-    medium: '30px',
-    large: '40px',
-  };
-  const spinnerSize = sizeMap[size];
+const SIZE_MAP: Record<NonNullable<SpinnerProps['size']>, string> = {
+  small: '20px',
+  medium: '30px',
+  large: '40px',
+};
 
-  const spinnerStyle = {
+export default function Spinner({ size = 'medium' }: SpinnerProps) {
+  const spinnerSize = SIZE_MAP[size];
+
+  const spinnerStyle: React.CSSProperties = {
     width: spinnerSize,
     height: spinnerSize,
     aspectRatio: '1',
     borderRadius: '50%',
     background: `
-      radial-gradient(farthest-side, ${color} 94%, #0000) top/8px 8px no-repeat,
-      conic-gradient(#0000 30%, ${color})
+      radial-gradient(farthest-side, currentColor 94%, transparent) top/8px 8px no-repeat,
+      conic-gradient(transparent 30%, currentColor)
     `,
     WebkitMask:
-      'radial-gradient(farthest-side, #0000 calc(100% - 8px), #000 0)',
-    animation: 'l13 1s infinite linear',
-  } as React.CSSProperties;
+      'radial-gradient(farthest-side, transparent calc(100% - 8px), #000 0)',
+    mask: 'radial-gradient(farthest-side, transparent calc(100% - 8px), #000 0)',
+    animation: 'spinner-rotate 1s infinite linear',
+    color: 'currentColor',
+  };
 
-  const keyframesStyle = `@keyframes l13 {
-    100% { transform: rotate(1turn) }
-  }`;
-
-  return (
-    <>
-      <style>{keyframesStyle}</style>
-      <div className="loader" style={spinnerStyle} />
-    </>
-  );
+  return <div className="loader" role="status" style={spinnerStyle} />;
 }
diff --git a/frontend/src/components/TextToSpeechButton.tsx b/frontend/src/components/TextToSpeechButton.tsx
index 4a640a4f..028a4bed 100644
--- a/frontend/src/components/TextToSpeechButton.tsx
+++ b/frontend/src/components/TextToSpeechButton.tsx
@@ -1,8 +1,9 @@
 import { useState, useRef, useEffect } from 'react';
 import Speaker from '../assets/speaker.svg?react';
 import Stopspeech from '../assets/stopspeech.svg?react';
-import LoadingIcon from '../assets/Loading.svg?react'; // Add a loading icon SVG here
 import userService from '../api/services/userService';
+import { Button } from './ui/button';
+import Spinner from './Spinner';
 
 let currentlyPlayingAudio: {
   audio: HTMLAudioElement;
@@ -171,10 +172,12 @@ export default function SpeakButton({ text }: { text: string }) {
   };
 
   return (
-    <button
+    <Button
       type="button"
-      className={`flex cursor-pointer items-center justify-center rounded-full p-2 ${
-        isSpeaking || isLoading ? 'bg-accent' : 'hover:bg-accent bg-transparent'
+      variant="ghost"
+      size="icon"
+      className={`cursor-pointer rounded-full ${
+        isSpeaking || isLoading ? 'bg-accent' : ''
       }`}
       onClick={handleSpeakClick}
       aria-label={
@@ -187,12 +190,12 @@ export default function SpeakButton({ text }: { text: string }) {
       disabled={isLoading}
     >
       {isLoading ? (
-        <LoadingIcon className="animate-spin" />
+        <Spinner size="small" />
       ) : isSpeaking ? (
         <Stopspeech className="fill-none" />
       ) : (
         <Speaker className="fill-none" />
       )}
-    </button>
+    </Button>
   );
 }
diff --git a/frontend/src/components/ToggleSwitch.tsx b/frontend/src/components/ToggleSwitch.tsx
deleted file mode 100644
index ef0356e6..00000000
--- a/frontend/src/components/ToggleSwitch.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import React from 'react';
-
-type ToggleSwitchProps = {
-  checked: boolean;
-  onChange: (checked: boolean) => void;
-  className?: string;
-  label?: string;
-  disabled?: boolean;
-  size?: 'small' | 'medium' | 'large';
-  labelPosition?: 'left' | 'right';
-  id?: string;
-  ariaLabel?: string;
-};
-
-const ToggleSwitch: React.FC<ToggleSwitchProps> = ({
-  checked,
-  onChange,
-  className = '',
-  label,
-  disabled = false,
-  size = 'medium',
-  labelPosition = 'left',
-  id,
-  ariaLabel,
-}) => {
-  // Size configurations
-  const sizeConfig = {
-    small: {
-      box: 'h-5 w-9',
-      toggle: 'h-4 w-4 left-0.5 top-0.5',
-      translate: 'translate-x-full',
-    },
-    medium: {
-      box: 'h-8 w-14',
-      toggle: 'h-6 w-6 left-1 top-1',
-      translate: 'translate-x-full',
-    },
-    large: {
-      box: 'h-10 w-16',
-      toggle: 'h-8 w-8 left-1 top-1',
-      translate: 'translate-x-full',
-    },
-  };
-
-  const { box, toggle, translate } = sizeConfig[size];
-
-  return (
-    <label
-      className={`flex cursor-pointer flex-row items-center select-none ${
-        labelPosition === 'right' ? 'flex-row-reverse' : ''
-      } ${disabled ? 'cursor-not-allowed opacity-50' : ''} ${className}`}
-    >
-      {label && (
-        <span
-          className={`text-foreground dark:text-white ${
-            labelPosition === 'left' ? 'mr-3' : 'ml-3'
-          }`}
-        >
-          {label}
-        </span>
-      )}
-      <div className="relative">
-        <input
-          type="checkbox"
-          id={id}
-          checked={checked}
-          onChange={(e) => onChange(e.target.checked)}
-          className="sr-only"
-          disabled={disabled}
-          aria-label={ariaLabel}
-        />
-        <div
-          className={`block ${box} rounded-full ${
-            checked ? 'bg-north-texas-green' : 'bg-silver dark:bg-charcoal-grey'
-          }`}
-        ></div>
-        <div
-          className={`absolute ${toggle} flex items-center justify-center rounded-full bg-white transition ${
-            checked ? `${translate} bg-silver` : ''
-          }`}
-        ></div>
-      </div>
-    </label>
-  );
-};
-
-export default ToggleSwitch;
diff --git a/frontend/src/components/ToolsPopup.tsx b/frontend/src/components/ToolsPopup.tsx
deleted file mode 100644
index 2e0e5621..00000000
--- a/frontend/src/components/ToolsPopup.tsx
+++ /dev/null
@@ -1,258 +0,0 @@
-import React, { useEffect, useRef, useState, useLayoutEffect } from 'react';
-import { createPortal } from 'react-dom';
-import { useTranslation } from 'react-i18next';
-import { useSelector } from 'react-redux';
-import { selectToken } from '../preferences/preferenceSlice';
-import userService from '../api/services/userService';
-import { UserToolType } from '../settings/types';
-import Input from './Input';
-import RedirectIcon from '../assets/redirect.svg';
-import NoFilesIcon from '../assets/no-files.svg';
-import NoFilesDarkIcon from '../assets/no-files-dark.svg';
-import CheckmarkIcon from '../assets/checkmark.svg';
-import { useDarkTheme } from '../hooks';
-
-// Chat-popup visibility rule: show defaults (so users can toggle the
-// agentless chat tools on/off) plus any non-builtin user_tools row. Hide
-// pure builtins (agent-only). Dual-registered tools like ``scheduler``
-// carry BOTH flags and stay visible via the ``default`` branch.
-export const isChatToolVisible = (tool: {
-  default?: boolean;
-  builtin?: boolean;
-}): boolean => Boolean(tool.default) || !tool.builtin;
-
-interface ToolsPopupProps {
-  isOpen: boolean;
-  onClose: () => void;
-  anchorRef: React.RefObject<HTMLButtonElement | null>;
-}
-
-export default function ToolsPopup({
-  isOpen,
-  onClose,
-  anchorRef,
-}: ToolsPopupProps) {
-  const { t } = useTranslation();
-  const token = useSelector(selectToken);
-  const [userTools, setUserTools] = React.useState<UserToolType[]>([]);
-  const [loading, setLoading] = React.useState(false);
-  const [searchTerm, setSearchTerm] = useState('');
-  const [isDarkTheme] = useDarkTheme();
-  const popupRef = useRef<HTMLDivElement>(null);
-  const [popupPosition, setPopupPosition] = useState({
-    top: 0,
-    left: 0,
-    maxHeight: 0,
-    showAbove: false,
-  });
-
-  useLayoutEffect(() => {
-    if (!isOpen || !anchorRef.current) return;
-
-    const updatePosition = () => {
-      if (!anchorRef.current) return;
-
-      const rect = anchorRef.current.getBoundingClientRect();
-      const viewportHeight = window.innerHeight;
-      const viewportWidth = window.innerWidth;
-
-      const spaceAbove = rect.top;
-      const spaceBelow = viewportHeight - rect.bottom;
-      const showAbove = spaceAbove > spaceBelow && spaceAbove >= 300;
-      const maxHeight = showAbove ? spaceAbove - 16 : spaceBelow - 16;
-
-      const left = Math.min(
-        rect.left,
-        viewportWidth - Math.min(462, viewportWidth * 0.95) - 10,
-      );
-
-      setPopupPosition({
-        top: showAbove ? rect.top - 8 : rect.bottom + 8,
-        left,
-        maxHeight: Math.min(600, maxHeight),
-        showAbove,
-      });
-    };
-
-    updatePosition();
-    window.addEventListener('resize', updatePosition);
-    return () => window.removeEventListener('resize', updatePosition);
-  }, [isOpen, anchorRef]);
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        popupRef.current &&
-        !popupRef.current.contains(event.target as Node) &&
-        anchorRef.current &&
-        !anchorRef.current.contains(event.target as Node)
-      ) {
-        onClose();
-      }
-    };
-
-    if (isOpen) {
-      document.addEventListener('mousedown', handleClickOutside);
-    }
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [onClose, anchorRef, isOpen]);
-
-  useEffect(() => {
-    if (isOpen) {
-      getUserTools();
-    }
-  }, [isOpen, token]);
-
-  const getUserTools = () => {
-    setLoading(true);
-    userService
-      .getUserTools(token)
-      .then((res) => {
-        return res.json();
-      })
-      .then((data) => {
-        const filtered = (data.tools || []).filter(isChatToolVisible);
-        setUserTools(filtered);
-        setLoading(false);
-      })
-      .catch((error) => {
-        console.error('Error fetching tools:', error);
-        setLoading(false);
-      });
-  };
-
-  const updateToolStatus = (toolId: string, newStatus: boolean) => {
-    userService
-      .updateToolStatus({ id: toolId, status: newStatus }, token)
-      .then(() => {
-        setUserTools((prevTools) =>
-          prevTools.map((tool) =>
-            tool.id === toolId ? { ...tool, status: newStatus } : tool,
-          ),
-        );
-      })
-      .catch((error) => {
-        console.error('Failed to update tool status:', error);
-      });
-  };
-
-  if (!isOpen) return null;
-
-  const filteredTools = userTools.filter((tool) =>
-    tool.displayName.toLowerCase().includes(searchTerm.toLowerCase()),
-  );
-
-  const popupContent = (
-    <div
-      ref={popupRef}
-      className="border-border bg-background dark:border-border dark:bg-card fixed z-50 rounded-lg border shadow-[0px_9px_46px_8px_#0000001F,0px_24px_38px_3px_#00000024,0px_11px_15px_-7px_#00000033]"
-      style={{
-        top: popupPosition.showAbove ? popupPosition.top : undefined,
-        bottom: popupPosition.showAbove
-          ? undefined
-          : window.innerHeight - popupPosition.top,
-        left: popupPosition.left,
-        maxWidth: Math.min(462, window.innerWidth * 0.95),
-        width: '100%',
-        height: popupPosition.maxHeight,
-        transform: popupPosition.showAbove ? 'translateY(-100%)' : 'none',
-      }}
-    >
-      <div className="flex h-full flex-col">
-        <div className="shrink-0 p-4">
-          <h3 className="mb-4 text-lg font-medium text-gray-900 dark:text-white">
-            {t('settings.tools.label')}
-          </h3>
-
-          <Input
-            id="tool-search"
-            name="tool-search"
-            type="text"
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-            placeholder={t('settings.tools.searchPlaceholder')}
-            labelBgClassName="bg-background dark:bg-card"
-            borderVariant="thin"
-            className="mb-4"
-          />
-        </div>
-
-        {loading ? (
-          <div className="flex grow justify-center py-4">
-            <div className="h-6 w-6 animate-spin rounded-full border-b-2 border-gray-900 dark:border-white"></div>
-          </div>
-        ) : (
-          <div className="dark:border-border mx-4 grow overflow-hidden rounded-md border border-[#D9D9D9]">
-            <div className="scrollbar-overlay h-full overflow-y-auto">
-              {filteredTools.length === 0 ? (
-                <div className="flex h-full flex-col items-center justify-center py-8">
-                  <img
-                    src={isDarkTheme ? NoFilesDarkIcon : NoFilesIcon}
-                    alt="No tools found"
-                    className="mx-auto mb-4 h-24 w-24"
-                  />
-                  <p className="text-center text-gray-500 dark:text-gray-400">
-                    {t('settings.tools.noToolsFound')}
-                  </p>
-                </div>
-              ) : (
-                filteredTools.map((tool) => (
-                  <div
-                    key={tool.id}
-                    onClick={() => updateToolStatus(tool.id, !tool.status)}
-                    className="dark:border-border dark:hover:bg-accent hover:bg-accent flex items-center justify-between border-b border-[#D9D9D9] p-3"
-                  >
-                    <div className="mr-3 flex grow items-center">
-                      <img
-                        src={`/toolIcons/tool_${tool.name}.svg`}
-                        alt={`${tool.displayName} icon`}
-                        className="mr-4 h-5 w-5 shrink-0"
-                      />
-                      <div className="overflow-hidden">
-                        <p className="overflow-hidden text-xs font-medium text-ellipsis whitespace-nowrap text-gray-900 dark:text-white">
-                          {tool.customName || tool.displayName}
-                        </p>
-                      </div>
-                    </div>
-                    <div className="flex shrink-0 items-center">
-                      <div
-                        className={`dark:border-border flex h-4 w-4 items-center justify-center rounded-xs border-2 border-[#C6C6C6] p-[0.5px]`}
-                      >
-                        {tool.status && (
-                          <img
-                            src={CheckmarkIcon}
-                            alt="Tool enabled"
-                            width={12}
-                            height={12}
-                          />
-                        )}
-                      </div>
-                    </div>
-                  </div>
-                ))
-              )}
-            </div>
-          </div>
-        )}
-
-        <div className="shrink-0 p-4 opacity-75 transition-opacity duration-200 hover:opacity-100">
-          <a
-            href="/settings/tools"
-            className="text-primary inline-flex items-center text-base font-medium"
-          >
-            {t('settings.tools.manageTools')}
-            <img
-              src={RedirectIcon}
-              alt="Go to tools"
-              className="ml-2 h-[11px] w-[11px]"
-            />
-          </a>
-        </div>
-      </div>
-    </div>
-  );
-
-  return createPortal(popupContent, document.body);
-}
diff --git a/frontend/src/components/UploadToast.tsx b/frontend/src/components/UploadToast.tsx
index 1549fe57..0803c661 100644
--- a/frontend/src/components/UploadToast.tsx
+++ b/frontend/src/components/UploadToast.tsx
@@ -1,3 +1,4 @@
+import { X } from 'lucide-react';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
@@ -10,6 +11,7 @@ import {
   selectUploadTasks,
   type UploadTask,
 } from '../upload/uploadSlice';
+import { Button } from './ui/button';
 
 const PROGRESS_RADIUS = 10;
 const PROGRESS_CIRCUMFERENCE = 2 * Math.PI * PROGRESS_RADIUS;
@@ -65,7 +67,7 @@ export default function UploadToast() {
       aria-atomic="false"
     >
       <div
-        className={`border-border bg-card w-[271px] overflow-hidden rounded-2xl border shadow-[0px_24px_48px_0px_#00000029] transition-all duration-300`}
+        className={`border-border bg-card shadow-toast w-[271px] overflow-hidden rounded-2xl border transition-all duration-300`}
       >
         <div
           className={`flex items-center justify-between px-4 py-3 ${
@@ -74,19 +76,21 @@ export default function UploadToast() {
               : 'bg-destructive/10 dark:bg-destructive/10'
           }`}
         >
-          <h3 className="font-inter dark:text-foreground text-[14px] leading-[16.5px] font-medium text-black">
+          <h3 className="dark:text-foreground text-sm leading-[16.5px] font-medium text-black">
             {headerLabel}
           </h3>
           <div className="flex items-center gap-1">
-            <button
+            <Button
               type="button"
+              variant="ghost"
+              size="icon-sm"
               onClick={() => setCollapsed((prev) => !prev)}
               aria-label={
                 collapsed
                   ? t('modals.uploadDoc.progress.expandDetails')
                   : t('modals.uploadDoc.progress.collapseDetails')
               }
-              className="flex h-8 items-center justify-center p-0 text-black opacity-70 transition-opacity hover:opacity-100 dark:text-white"
+              className="text-black opacity-70 hover:bg-transparent hover:opacity-100 dark:text-white dark:hover:bg-transparent"
             >
               <img
                 src={ChevronDown}
@@ -95,37 +99,17 @@ export default function UploadToast() {
                   collapsed ? 'rotate-180' : ''
                 }`}
               />
-            </button>
-            <button
+            </Button>
+            <Button
               type="button"
+              variant="ghost"
+              size="icon-sm"
               onClick={dismissAll}
-              className="flex h-8 items-center justify-center p-0 text-black opacity-70 transition-opacity hover:opacity-100 dark:text-white"
+              className="text-black opacity-70 hover:bg-transparent hover:opacity-100 dark:text-white dark:hover:bg-transparent"
               aria-label={t('modals.uploadDoc.progress.dismiss')}
             >
-              <svg
-                width="16"
-                height="16"
-                viewBox="0 0 24 24"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-                className="h-4 w-4"
-              >
-                <path
-                  d="M18 6L6 18"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                />
-                <path
-                  d="M6 6L18 18"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                />
-              </svg>
-            </button>
+              <X className="h-4 w-4" />
+            </Button>
           </div>
         </div>
 
@@ -167,13 +151,13 @@ function UploadRow({
       <div className="flex items-center justify-between px-5 py-3">
         <div className="flex min-w-0 flex-col">
           <p
-            className="font-inter dark:text-muted-foreground max-w-[200px] truncate text-[13px] leading-[16.5px] font-normal text-black"
+            className="dark:text-muted-foreground max-w-[200px] truncate text-sm leading-[16.5px] font-normal text-black"
             title={task.fileName}
           >
             {task.fileName}
           </p>
           {task.status === 'training' && task.stage && (
-            <span className="font-inter text-muted-foreground mt-0.5 text-[11px] leading-[14px]">
+            <span className="text-muted-foreground mt-0.5 text-xs leading-[14px]">
               {t(`modals.uploadDoc.progress.${task.stage}`)}
             </span>
           )}
@@ -185,7 +169,7 @@ function UploadRow({
               width="24"
               height="24"
               viewBox="0 0 24 24"
-              className="h-6 w-6 shrink-0 text-[#7D54D1]"
+              className="text-primary h-6 w-6 shrink-0"
               role="progressbar"
               aria-valuemin={0}
               aria-valuemax={100}
@@ -204,7 +188,7 @@ function UploadRow({
                 fill="none"
               />
               <circle
-                className="text-[#7D54D1]"
+                className="text-primary"
                 stroke="currentColor"
                 strokeWidth="2"
                 strokeLinecap="round"
diff --git a/frontend/src/components/message-input/AttachFileButton.tsx b/frontend/src/components/message-input/AttachFileButton.tsx
new file mode 100644
index 00000000..d4f1f77b
--- /dev/null
+++ b/frontend/src/components/message-input/AttachFileButton.tsx
@@ -0,0 +1,32 @@
+import { useTranslation } from 'react-i18next';
+
+import ClipIcon from '../../assets/clip.svg';
+import { FILE_UPLOAD_ACCEPT_ATTR } from '../../constants/fileUpload';
+
+type AttachFileButtonProps = {
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+};
+
+export default function AttachFileButton({ onChange }: AttachFileButtonProps) {
+  const { t } = useTranslation();
+
+  return (
+    <label className="xs:px-3 xs:py-1.5 dark:border-border border-border hover:bg-muted dark:hover:bg-muted flex cursor-pointer items-center rounded-full border px-2 py-1 transition-colors">
+      <img
+        src={ClipIcon}
+        alt="Attach"
+        className="mr-1 h-3.5 w-3.5 sm:mr-1.5 sm:h-4 sm:w-4"
+      />
+      <span className="xs:text-xs dark:text-foreground text-muted-foreground text-xs font-medium sm:text-sm">
+        {t('conversation.attachments.attach')}
+      </span>
+      <input
+        type="file"
+        className="hidden"
+        multiple
+        accept={FILE_UPLOAD_ACCEPT_ATTR}
+        onChange={onChange}
+      />
+    </label>
+  );
+}
diff --git a/frontend/src/components/message-input/AttachmentChipList.tsx b/frontend/src/components/message-input/AttachmentChipList.tsx
new file mode 100644
index 00000000..5ce8c592
--- /dev/null
+++ b/frontend/src/components/message-input/AttachmentChipList.tsx
@@ -0,0 +1,118 @@
+import { X } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+import AlertIcon from '../../assets/alert.svg';
+import DocumentationDark from '../../assets/documentation-dark.svg';
+import type { Attachment } from '../../upload/uploadSlice';
+import { Button } from '../ui/button';
+
+type AttachmentChipListProps = {
+  attachments: Attachment[];
+  draggingId: string | null;
+  onRemove: (id: string) => void;
+  onDragStart: (e: React.DragEvent, id: string) => void;
+  onDragOver: (e: React.DragEvent) => void;
+  onDropOn: (e: React.DragEvent, targetId: string) => void;
+};
+
+export default function AttachmentChipList({
+  attachments,
+  draggingId,
+  onRemove,
+  onDragStart,
+  onDragOver,
+  onDropOn,
+}: AttachmentChipListProps) {
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex flex-wrap gap-1.5 px-2 py-2 sm:gap-2 sm:px-3">
+      {attachments.map((attachment) => {
+        return (
+          <div
+            key={attachment.id}
+            draggable={true}
+            onDragStart={(e) => onDragStart(e, attachment.id)}
+            onDragOver={onDragOver}
+            onDrop={(e) => onDropOn(e, attachment.id)}
+            className={`group dark:text-foreground bg-muted text-muted-foreground dark:bg-accent relative flex items-center rounded-xl px-2 py-1 text-xs sm:px-3 sm:py-1.5 sm:text-sm ${
+              attachment.status !== 'completed' ? 'opacity-70' : 'opacity-100'
+            } ${
+              draggingId === attachment.id
+                ? 'ring-dashed opacity-60 ring-2 ring-purple-200'
+                : ''
+            }`}
+            title={attachment.fileName}
+          >
+            <div className="bg-primary mr-2 flex h-8 w-8 items-center justify-center rounded-md p-1">
+              {attachment.status === 'completed' && (
+                <img
+                  src={DocumentationDark}
+                  alt="Attachment"
+                  className="h-[15px] w-[15px] object-fill"
+                />
+              )}
+
+              {attachment.status === 'failed' && (
+                <img
+                  src={AlertIcon}
+                  alt="Failed"
+                  className="h-[15px] w-[15px] object-fill"
+                />
+              )}
+
+              {(attachment.status === 'uploading' ||
+                attachment.status === 'processing') && (
+                <div className="flex h-[15px] w-[15px] items-center justify-center">
+                  <svg className="h-[15px] w-[15px]" viewBox="0 0 24 24">
+                    <circle
+                      className="opacity-0"
+                      cx="12"
+                      cy="12"
+                      r="10"
+                      stroke="transparent"
+                      strokeWidth="4"
+                      fill="none"
+                    />
+                    <circle
+                      className="text-[#ECECF1]"
+                      cx="12"
+                      cy="12"
+                      r="10"
+                      stroke="currentColor"
+                      strokeWidth="4"
+                      fill="none"
+                      strokeDasharray="62.83"
+                      strokeDashoffset={62.83 * (1 - attachment.progress / 100)}
+                      transform="rotate(-90 12 12)"
+                    />
+                  </svg>
+                </div>
+              )}
+            </div>
+
+            <span className="max-w-[120px] truncate font-medium sm:max-w-[150px]">
+              {attachment.fileName}
+            </span>
+
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon-sm"
+              className="ml-1.5 h-auto w-auto rounded-full p-1"
+              onClick={() => {
+                onRemove(attachment.id);
+              }}
+              aria-label={t('conversation.attachments.remove')}
+            >
+              <X
+                aria-label={t('conversation.attachments.remove')}
+                className="h-2.5 w-2.5"
+              />
+            </Button>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/frontend/src/components/message-input/MicButton.tsx b/frontend/src/components/message-input/MicButton.tsx
new file mode 100644
index 00000000..23dc1590
--- /dev/null
+++ b/frontend/src/components/message-input/MicButton.tsx
@@ -0,0 +1,70 @@
+import { LoaderCircle, Mic, Square } from 'lucide-react';
+
+import { Button } from '../ui/button';
+
+export type RecordingState = 'idle' | 'recording' | 'transcribing' | 'error';
+
+type MicButtonProps = {
+  recordingState: RecordingState;
+  loading: boolean;
+  onClick: () => void;
+};
+
+const getVoiceButtonLabel = (recordingState: RecordingState): string => {
+  if (recordingState === 'recording') return 'Stop recording';
+  if (recordingState === 'transcribing') return 'Transcribing audio';
+  return 'Voice input';
+};
+
+const getVoiceButtonText = (recordingState: RecordingState): string => {
+  if (recordingState === 'recording') return 'Stop';
+  if (recordingState === 'transcribing') return 'Transcribing';
+  return 'Voice';
+};
+
+export default function MicButton({
+  recordingState,
+  loading,
+  onClick,
+}: MicButtonProps) {
+  const voiceButtonLabel = getVoiceButtonLabel(recordingState);
+  const voiceButtonText = getVoiceButtonText(recordingState);
+
+  return (
+    <Button
+      type="button"
+      variant="outline"
+      size="sm"
+      onClick={onClick}
+      aria-label={voiceButtonLabel}
+      title={voiceButtonLabel}
+      disabled={loading || recordingState === 'transcribing'}
+      className={`xs:px-3 xs:py-1.5 dark:border-border flex h-auto items-center justify-start rounded-full border bg-transparent px-2 py-1 shadow-none transition-colors ${
+        recordingState === 'recording'
+          ? 'border-[#B42318] bg-[#FEE4E2] text-[#B42318] dark:bg-[#4A2323]'
+          : 'border-border dark:hover:bg-accent hover:bg-gray-100'
+      } ${
+        loading || recordingState === 'transcribing'
+          ? 'cursor-not-allowed opacity-60'
+          : ''
+      }`}
+    >
+      {recordingState === 'transcribing' ? (
+        <LoaderCircle className="mr-1 h-3.5 w-3.5 animate-spin sm:mr-1.5 sm:h-4 sm:w-4" />
+      ) : recordingState === 'recording' ? (
+        <Square className="mr-1 h-3.5 w-3.5 fill-current sm:mr-1.5 sm:h-4 sm:w-4" />
+      ) : (
+        <Mic className="mr-1 h-3.5 w-3.5 sm:mr-1.5 sm:h-4 sm:w-4" />
+      )}
+      <span
+        className={`xs:text-xs dark:text-foreground text-xs font-medium sm:text-sm ${
+          recordingState === 'recording'
+            ? 'text-[#B42318]'
+            : 'text-muted-foreground'
+        }`}
+      >
+        {voiceButtonText}
+      </span>
+    </Button>
+  );
+}
diff --git a/frontend/src/components/message-input/SourcesTrigger.tsx b/frontend/src/components/message-input/SourcesTrigger.tsx
new file mode 100644
index 00000000..2e527f59
--- /dev/null
+++ b/frontend/src/components/message-input/SourcesTrigger.tsx
@@ -0,0 +1,96 @@
+import { useTranslation } from 'react-i18next';
+
+import RedirectIcon from '../../assets/redirect.svg';
+import SourceIcon from '../../assets/source.svg';
+import type { Doc } from '../../models/misc';
+import {
+  MultiSelectPopover,
+  type MultiSelectPopoverItem,
+} from '../MultiSelectPopover';
+import { Button } from '../ui/button';
+
+type SourcesTriggerProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  items: MultiSelectPopoverItem[];
+  selectedIds: string[];
+  onToggle: (id: string) => void;
+  selectedDocs: Doc[] | null | undefined;
+  onUploadClick: () => void;
+};
+
+export default function SourcesTrigger({
+  open,
+  onOpenChange,
+  items,
+  selectedIds,
+  onToggle,
+  selectedDocs,
+  onUploadClick,
+}: SourcesTriggerProps) {
+  const { t } = useTranslation();
+
+  return (
+    <MultiSelectPopover
+      open={open}
+      onOpenChange={onOpenChange}
+      title={t('conversation.sources.text')}
+      items={items}
+      selectedIds={selectedIds}
+      onToggle={onToggle}
+      searchPlaceholder={t('settings.sources.searchPlaceholder')}
+      emptyMessage={t('conversation.sources.noSourcesAvailable')}
+      footer={
+        <div className="flex flex-col gap-3">
+          <a
+            href="/settings/sources"
+            className="text-primary inline-flex items-center gap-2 text-base font-medium"
+            onClick={() => onOpenChange(false)}
+          >
+            {t('settings.sources.goToSources')}
+            <img
+              src={RedirectIcon}
+              alt=""
+              aria-hidden="true"
+              className="h-3 w-3"
+            />
+          </a>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={onUploadClick}
+            className="border-primary text-primary hover:bg-primary/90 h-auto w-auto self-start rounded-full border bg-transparent px-4 py-2 text-sm font-medium shadow-none transition-colors duration-200 hover:text-white"
+          >
+            {t('settings.sources.uploadNew')}
+          </Button>
+        </div>
+      }
+      trigger={
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          className="xs:px-3 xs:py-1.5 dark:border-border border-border hover:bg-accent dark:hover:bg-muted flex h-auto max-w-[130px] items-center justify-start rounded-full border bg-transparent px-2 py-1 shadow-none transition-colors sm:max-w-[150px]"
+          title={
+            selectedDocs && selectedDocs.length > 0
+              ? selectedDocs.map((doc) => doc.name).join(', ')
+              : t('conversation.sources.title')
+          }
+        >
+          <img
+            src={SourceIcon}
+            alt="Sources"
+            className="mr-1 h-3.5 w-3.5 shrink-0 sm:mr-1.5 sm:h-4"
+          />
+          <span className="xs:text-xs dark:text-foreground text-muted-foreground truncate overflow-hidden text-xs font-medium sm:text-sm">
+            {selectedDocs && selectedDocs.length > 0
+              ? selectedDocs.length === 1
+                ? selectedDocs[0].name
+                : `${selectedDocs.length} sources selected`
+              : t('conversation.sources.title')}
+          </span>
+        </Button>
+      }
+    />
+  );
+}
diff --git a/frontend/src/components/message-input/ToolsTrigger.tsx b/frontend/src/components/message-input/ToolsTrigger.tsx
new file mode 100644
index 00000000..e9f16c69
--- /dev/null
+++ b/frontend/src/components/message-input/ToolsTrigger.tsx
@@ -0,0 +1,74 @@
+import { useTranslation } from 'react-i18next';
+
+import RedirectIcon from '../../assets/redirect.svg';
+import ToolIcon from '../../assets/tool.svg';
+import {
+  MultiSelectPopover,
+  type MultiSelectPopoverItem,
+} from '../MultiSelectPopover';
+import { Button } from '../ui/button';
+
+type ToolsTriggerProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  items: MultiSelectPopoverItem[];
+  selectedIds: string[];
+  onToggle: (id: string) => void;
+  loading: boolean;
+};
+
+export default function ToolsTrigger({
+  open,
+  onOpenChange,
+  items,
+  selectedIds,
+  onToggle,
+  loading,
+}: ToolsTriggerProps) {
+  const { t } = useTranslation();
+
+  return (
+    <MultiSelectPopover
+      open={open}
+      onOpenChange={onOpenChange}
+      title={t('settings.tools.label')}
+      items={items}
+      selectedIds={selectedIds}
+      onToggle={onToggle}
+      searchPlaceholder={t('settings.tools.searchPlaceholder')}
+      emptyMessage={t('settings.tools.noToolsFound')}
+      loading={loading}
+      footer={
+        <a
+          href="/settings/tools"
+          className="text-primary inline-flex items-center text-base font-medium"
+        >
+          {t('settings.tools.manageTools')}
+          <img
+            src={RedirectIcon}
+            alt=""
+            aria-hidden="true"
+            className="ml-2 h-[11px] w-[11px]"
+          />
+        </a>
+      }
+      trigger={
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          className="xs:px-3 xs:py-1.5 xs:max-w-[150px] dark:border-border border-border hover:bg-muted dark:hover:bg-muted flex h-auto max-w-[130px] items-center justify-start rounded-full border bg-transparent px-2 py-1 shadow-none transition-colors"
+        >
+          <img
+            src={ToolIcon}
+            alt="Tools"
+            className="mr-1 h-3.5 w-3.5 shrink-0 sm:mr-1.5 sm:h-4 sm:w-4"
+          />
+          <span className="xs:text-xs dark:text-foreground text-muted-foreground truncate overflow-hidden text-xs font-medium sm:text-sm">
+            {t('settings.tools.label')}
+          </span>
+        </Button>
+      }
+    />
+  );
+}
diff --git a/frontend/src/components/message-input/index.ts b/frontend/src/components/message-input/index.ts
new file mode 100644
index 00000000..6ee1b546
--- /dev/null
+++ b/frontend/src/components/message-input/index.ts
@@ -0,0 +1,6 @@
+export { default as AttachFileButton } from './AttachFileButton';
+export { default as AttachmentChipList } from './AttachmentChipList';
+export { default as MicButton } from './MicButton';
+export { default as SourcesTrigger } from './SourcesTrigger';
+export { default as ToolsTrigger } from './ToolsTrigger';
+export type { RecordingState } from './MicButton';
diff --git a/frontend/src/components/tree/TreeBrowser.tsx b/frontend/src/components/tree/TreeBrowser.tsx
new file mode 100644
index 00000000..4bb87ef5
--- /dev/null
+++ b/frontend/src/components/tree/TreeBrowser.tsx
@@ -0,0 +1,801 @@
+import React, {
+  SyntheticEvent,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
+import { selectToken } from '../../preferences/preferenceSlice';
+import { formatBytes } from '../../utils/stringUtils';
+import userService from '../../api/services/userService';
+import ArrowLeft from '../../assets/arrow-left.svg';
+import EyeView from '../../assets/eye-view.svg';
+import FileIcon from '../../assets/file.svg';
+import FolderIcon from '../../assets/folder.svg';
+import ThreeDots from '../../assets/three-dots.svg';
+import { useLoaderState, useOutsideAlerter } from '../../hooks';
+import Chunks from '../Chunks';
+import SkeletonLoader from '../SkeletonLoader';
+import { Button } from '../ui/button';
+import { Input } from '../ui/input';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '../ui/table';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '../ui/dropdown-menu';
+import type {
+  DirectoryStructure,
+  FileNode,
+  RowMenuContext,
+  SearchResult,
+  TreeBrowserController,
+  TreeMenuOption,
+} from './types';
+
+/** Column ordering for the size/tokens pair. */
+export type ColumnOrder = 'size-first' | 'tokens-first';
+
+export interface TreeBrowserProps {
+  docId: string;
+  sourceName: string;
+  onBackToDocuments: () => void;
+  /**
+   * "size-first" = file name | size | tokens | actions (FileTree).
+   * "tokens-first" = file name | tokens | size | actions (ConnectorTree).
+   */
+  columnOrder: ColumnOrder;
+  /** When true, directory entries are sorted alphabetically within group. */
+  sortEntries?: boolean;
+  /** Top-right action area (e.g. Add File button, Sync button). */
+  topRightAction: React.ReactNode;
+  /**
+   * Optional status text shown to the left of the search field while a
+   * mutation is in progress (e.g. "Uploading files...").
+   */
+  statusLabel?: string | null;
+  /**
+   * Builds the row action menu. Defaults to a single "View" option.
+   * Wrappers can extend this with Delete, etc.
+   */
+  getRowMenuOptions?: (ctx: RowMenuContext) => TreeMenuOption[];
+  /** Modals / overlays the wrapper wants rendered alongside the tree. */
+  extraContent?: React.ReactNode;
+  /**
+   * Called after a directory structure response is parsed. Useful for
+   * connectors that need the provider field exposed on the response.
+   */
+  onDirectoryDataLoaded?: (data: any) => void;
+  /**
+   * Imperative handle so wrappers can trigger a refresh after a
+   * successful mutation.
+   */
+  controllerRef?: React.MutableRefObject<TreeBrowserController | null>;
+  /**
+   * Mirrors the current breadcrumb path back to the wrapper so it can
+   * construct paths for upload / delete mutations without owning the
+   * navigation state.
+   */
+  onCurrentPathChange?: (path: string[]) => void;
+}
+
+function calculateDirectoryStats(structure: DirectoryStructure): {
+  totalSize: number;
+  totalTokens: number;
+} {
+  let totalSize = 0;
+  let totalTokens = 0;
+
+  Object.entries(structure).forEach(([, node]) => {
+    if (node.type) {
+      totalSize += node.size_bytes || 0;
+      totalTokens += node.token_count || 0;
+    } else {
+      const stats = calculateDirectoryStats(node);
+      totalSize += stats.totalSize;
+      totalTokens += stats.totalTokens;
+    }
+  });
+
+  return { totalSize, totalTokens };
+}
+
+function searchFiles(
+  query: string,
+  structure: DirectoryStructure,
+  currentPath: string[] = [],
+): SearchResult[] {
+  let results: SearchResult[] = [];
+
+  Object.entries(structure).forEach(([name, node]) => {
+    const fullPath = [...currentPath, name].join('/');
+    const displayName =
+      typeof node.display_name === 'string' && node.display_name.trim()
+        ? node.display_name
+        : '';
+    const queryLower = query.toLowerCase();
+    const matchTarget = displayName ? `${name} ${displayName}` : name;
+
+    if (matchTarget.toLowerCase().includes(queryLower)) {
+      results.push({
+        name: displayName || name,
+        path: fullPath,
+        isFile: !!node.type,
+      });
+    }
+
+    if (!node.type) {
+      results = [
+        ...results,
+        ...searchFiles(query, node as DirectoryStructure, [
+          ...currentPath,
+          name,
+        ]),
+      ];
+    }
+  });
+
+  return results;
+}
+
+function resolveDisplayName(
+  directoryStructure: DirectoryStructure | null,
+  path: string,
+): string {
+  if (!directoryStructure) {
+    return path.split('/').pop() || path;
+  }
+  let structure: any = directoryStructure;
+  if (typeof structure === 'string') {
+    try {
+      structure = JSON.parse(structure);
+    } catch (e) {
+      return path.split('/').pop() || path;
+    }
+  }
+  if (typeof structure !== 'object' || structure === null) {
+    return path.split('/').pop() || path;
+  }
+  const parts = path.split('/').filter(Boolean);
+  let current: any = structure;
+  for (const part of parts) {
+    if (!current || typeof current !== 'object') {
+      return parts[parts.length - 1] || path;
+    }
+    current = current[part];
+  }
+  if (
+    current &&
+    typeof current === 'object' &&
+    typeof current.display_name === 'string' &&
+    current.display_name.trim()
+  ) {
+    return current.display_name;
+  }
+  return parts[parts.length - 1] || path;
+}
+
+const TreeBrowser: React.FC<TreeBrowserProps> = ({
+  docId,
+  sourceName,
+  onBackToDocuments,
+  columnOrder,
+  sortEntries = false,
+  topRightAction,
+  statusLabel,
+  getRowMenuOptions,
+  extraContent,
+  onDirectoryDataLoaded,
+  controllerRef,
+  onCurrentPathChange,
+}) => {
+  const { t } = useTranslation();
+  const [loading, setLoading] = useLoaderState(true, 500);
+  const [, setError] = useState<string | null>(null);
+  const [directoryStructure, setDirectoryStructure] =
+    useState<DirectoryStructure | null>(null);
+  const [currentPath, setCurrentPath] = useState<string[]>([]);
+  const token = useSelector(selectToken);
+  const [selectedFile, setSelectedFile] = useState<{
+    id: string;
+    name: string;
+  } | null>(null);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchResults, setSearchResults] = useState<SearchResult[]>([]);
+  const searchDropdownRef = useRef<HTMLDivElement>(null);
+  const mountedRef = useRef(true);
+
+  useEffect(
+    () => () => {
+      mountedRef.current = false;
+    },
+    [],
+  );
+
+  const onCurrentPathChangeRef = useRef(onCurrentPathChange);
+  const onDirectoryDataLoadedRef = useRef(onDirectoryDataLoaded);
+  useEffect(() => {
+    onCurrentPathChangeRef.current = onCurrentPathChange;
+    onDirectoryDataLoadedRef.current = onDirectoryDataLoaded;
+  });
+  useEffect(() => {
+    onCurrentPathChangeRef.current?.(currentPath);
+  }, [currentPath]);
+
+  useOutsideAlerter(
+    searchDropdownRef,
+    () => {
+      setSearchQuery('');
+      setSearchResults([]);
+    },
+    [],
+    false,
+  );
+
+  const handleFileClick = useCallback(
+    (fileName: string, displayName?: string) => {
+      const fullPath = [...currentPath, fileName].join('/');
+      setSelectedFile({ id: fullPath, name: displayName ?? fileName });
+    },
+    [currentPath],
+  );
+
+  const navigateToDirectory = useCallback((dirName: string) => {
+    setCurrentPath((prev) => [...prev, dirName]);
+  }, []);
+
+  const navigateUp = useCallback(() => {
+    setCurrentPath((prev) => prev.slice(0, -1));
+  }, []);
+
+  const refreshDirectory = useCallback(async () => {
+    try {
+      const response = await userService.getDirectoryStructure(docId, token);
+      const data = await response.json();
+      if (!mountedRef.current) return false;
+      if (data && data.directory_structure) {
+        setDirectoryStructure(data.directory_structure);
+        onDirectoryDataLoadedRef.current?.(data);
+        return true;
+      }
+      return false;
+    } catch (err) {
+      console.error('Error refreshing directory structure:', err);
+      return false;
+    }
+  }, [docId, token]);
+
+  const resetPath = useCallback(() => {
+    setCurrentPath([]);
+  }, []);
+
+  useImperativeHandle(
+    controllerRef as React.MutableRefObject<TreeBrowserController | null>,
+    () => ({ refreshDirectory, resetPath }),
+    [refreshDirectory, resetPath],
+  );
+
+  useEffect(() => {
+    const fetchDirectoryStructure = async () => {
+      try {
+        setLoading(true);
+        const response = await userService.getDirectoryStructure(docId, token);
+        const data = await response.json();
+
+        if (data && data.directory_structure) {
+          setDirectoryStructure(data.directory_structure);
+          onDirectoryDataLoadedRef.current?.(data);
+        } else {
+          setError('Invalid response format');
+        }
+      } catch (err) {
+        setError('Failed to load directory structure');
+        console.error(err);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (docId) {
+      fetchDirectoryStructure();
+    }
+  }, [docId, token]);
+
+  const getCurrentDirectory = useCallback((): DirectoryStructure => {
+    if (!directoryStructure) return {};
+
+    let structure: any = directoryStructure;
+    if (typeof structure === 'string') {
+      try {
+        structure = JSON.parse(structure);
+      } catch (e) {
+        console.error(
+          'Error parsing directory structure in getCurrentDirectory:',
+          e,
+        );
+        return {};
+      }
+    }
+
+    if (typeof structure !== 'object' || structure === null) {
+      return {};
+    }
+
+    let current: any = structure;
+    for (const dir of currentPath) {
+      if (
+        current[dir] &&
+        typeof current[dir] === 'object' &&
+        !current[dir].type
+      ) {
+        current = current[dir];
+      } else {
+        return {};
+      }
+    }
+    return current;
+  }, [directoryStructure, currentPath]);
+
+  const handleBackNavigation = () => {
+    if (selectedFile) {
+      setSelectedFile(null);
+    } else if (currentPath.length === 0) {
+      onBackToDocuments?.();
+    } else {
+      navigateUp();
+    }
+  };
+
+  const handleSearchSelect = (result: SearchResult) => {
+    if (result.isFile) {
+      const pathParts = result.path.split('/');
+      const fileName = pathParts.pop() || '';
+      setCurrentPath(pathParts);
+
+      setSelectedFile({
+        id: result.path,
+        name: result.name || fileName,
+      });
+    } else {
+      setCurrentPath(result.path.split('/'));
+      setSelectedFile(null);
+    }
+    setSearchQuery('');
+    setSearchResults([]);
+  };
+
+  const handleFileSearch = (q: string): SearchResult[] => {
+    if (directoryStructure) {
+      return searchFiles(q, directoryStructure);
+    }
+    return [];
+  };
+
+  const handleFileSelect = (path: string) => {
+    const pathParts = path.split('/');
+    const fileName = pathParts.pop() || '';
+    setCurrentPath(pathParts);
+    setSelectedFile({
+      id: path,
+      name: resolveDisplayName(directoryStructure, path) || fileName,
+    });
+  };
+
+  const buildDefaultViewOption = (
+    name: string,
+    isFile: boolean,
+    displayName?: string,
+  ): TreeMenuOption => ({
+    icon: EyeView,
+    label: t('settings.sources.view'),
+    onClick: (event: SyntheticEvent) => {
+      event.stopPropagation();
+      if (isFile) {
+        handleFileClick(name, displayName);
+      } else {
+        navigateToDirectory(name);
+      }
+    },
+    iconWidth: 18,
+    iconHeight: 18,
+    variant: 'default',
+  });
+
+  const resolveRowMenuOptions = (
+    name: string,
+    isFile: boolean,
+    itemId: string,
+    displayName?: string,
+  ): TreeMenuOption[] => {
+    const defaultViewOption = buildDefaultViewOption(name, isFile, displayName);
+    if (getRowMenuOptions) {
+      return getRowMenuOptions({
+        name,
+        isFile,
+        itemId,
+        displayName,
+        defaultViewOption,
+      });
+    }
+    return [defaultViewOption];
+  };
+
+  const renderRowActionsCell = (
+    name: string,
+    isFile: boolean,
+    itemId: string,
+    displayName?: string,
+  ) => (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          type="button"
+          variant="ghost"
+          onClick={(e) => e.stopPropagation()}
+          className="dark:hover:bg-muted h-[35px] w-6 shrink-0 p-0 hover:bg-[#EBEBEB]"
+          aria-label={t('settings.sources.menuAlt')}
+        >
+          <img
+            src={ThreeDots}
+            alt={t('settings.sources.menuAlt')}
+            className="opacity-60 hover:opacity-100"
+          />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="min-w-[144px]">
+        {resolveRowMenuOptions(name, isFile, itemId, displayName).map(
+          (option, idx) => (
+            <DropdownMenuItem
+              key={idx}
+              variant={option.variant}
+              onSelect={(event) => {
+                option.onClick(event as unknown as SyntheticEvent);
+              }}
+            >
+              <img
+                src={option.icon}
+                alt=""
+                width={option.iconWidth ?? 16}
+                height={option.iconHeight ?? 16}
+              />
+              <span>{option.label}</span>
+            </DropdownMenuItem>
+          ),
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+
+  /**
+   * Renders the size + tokens column pair in the right order for the
+   * configured columnOrder. Sizes/tokens of 0 (or undefined) render as
+   * "-" — matches the pre-refactor behavior of both trees.
+   */
+  const renderColumnPair = (sizeBytes: number, tokens: number) => {
+    const sizeDisplay = sizeBytes > 0 ? formatBytes(sizeBytes) : '-';
+    const tokensDisplay = tokens > 0 ? tokens.toLocaleString() : '-';
+
+    if (columnOrder === 'size-first') {
+      return (
+        <>
+          <TableCell width="30%" align="left">
+            {sizeDisplay}
+          </TableCell>
+          <TableCell width="20%" align="right">
+            {tokensDisplay}
+          </TableCell>
+        </>
+      );
+    }
+    return (
+      <>
+        <TableCell width="30%" align="left">
+          {tokensDisplay}
+        </TableCell>
+        <TableCell width="20%" align="left">
+          {sizeDisplay}
+        </TableCell>
+      </>
+    );
+  };
+
+  const renderFileTree = (structure: DirectoryStructure): React.ReactNode[] => {
+    const entries = Object.entries(structure);
+
+    const sortedEntries = sortEntries
+      ? entries.sort(([nameA, nodeA], [nameB, nodeB]) => {
+          const isFileA = !!nodeA.type;
+          const isFileB = !!nodeB.type;
+          if (isFileA !== isFileB) {
+            return isFileA ? 1 : -1; // Directories first
+          }
+          return nameA.localeCompare(nameB);
+        })
+      : entries;
+
+    const directories = sortedEntries.filter(([, node]) => !node.type);
+    const files = sortedEntries.filter(([, node]) => node.type);
+
+    const parentRow =
+      currentPath.length > 0
+        ? [
+            <TableRow key="parent-dir" onClick={navigateUp}>
+              <TableCell width="40%" align="left">
+                <div className="flex items-center">
+                  <img
+                    src={FolderIcon}
+                    alt={t('settings.sources.parentFolderAlt')}
+                    className="mr-2 h-4 w-4 shrink-0"
+                  />
+                  <span className="truncate">..</span>
+                </div>
+              </TableCell>
+              <TableCell width="30%" align="left">
+                -
+              </TableCell>
+              <TableCell
+                width="20%"
+                align={columnOrder === 'size-first' ? 'right' : 'left'}
+              >
+                -
+              </TableCell>
+              <TableCell width="10%" align="right"></TableCell>
+            </TableRow>,
+          ]
+        : [];
+
+    const directoryRows = directories.map(([name, node]) => {
+      const itemId = `dir-${name}`;
+      const dirStats = calculateDirectoryStats(node as DirectoryStructure);
+
+      return (
+        <TableRow key={itemId} onClick={() => navigateToDirectory(name)}>
+          <TableCell width="40%" align="left">
+            <div className="flex min-w-0 items-center">
+              <img
+                src={FolderIcon}
+                alt={t('settings.sources.folderAlt')}
+                className="mr-2 h-4 w-4 shrink-0"
+              />
+              <span className="truncate">{name}</span>
+            </div>
+          </TableCell>
+          {renderColumnPair(dirStats.totalSize, dirStats.totalTokens)}
+          <TableCell width="10%" align="right">
+            {renderRowActionsCell(name, false, itemId)}
+          </TableCell>
+        </TableRow>
+      );
+    });
+
+    const fileRows = files.map(([name, node]) => {
+      const itemId = `file-${name}`;
+      const displayName =
+        typeof node.display_name === 'string' && node.display_name.trim()
+          ? node.display_name
+          : name;
+      const fileNode = node as FileNode;
+
+      return (
+        <TableRow
+          key={itemId}
+          onClick={() => handleFileClick(name, displayName)}
+        >
+          <TableCell width="40%" align="left">
+            <div className="flex min-w-0 items-center">
+              <img
+                src={FileIcon}
+                alt={t('settings.sources.fileAlt')}
+                className="mr-2 h-4 w-4 shrink-0"
+              />
+              <span className="truncate">{displayName}</span>
+            </div>
+          </TableCell>
+          {renderColumnPair(
+            fileNode.size_bytes || 0,
+            fileNode.token_count || 0,
+          )}
+          <TableCell width="10%" align="right">
+            {renderRowActionsCell(name, true, itemId, displayName)}
+          </TableCell>
+        </TableRow>
+      );
+    });
+
+    return [...parentRow, ...directoryRows, ...fileRows];
+  };
+
+  const renderFileSearch = () => (
+    <div className="relative w-52" ref={searchDropdownRef}>
+      <Input
+        type="text"
+        value={searchQuery}
+        onChange={(e) => {
+          setSearchQuery(e.target.value);
+          if (directoryStructure) {
+            setSearchResults(searchFiles(e.target.value, directoryStructure));
+          }
+        }}
+        placeholder={t('settings.sources.searchFiles')}
+        className={`h-[38px] px-4 py-2 ${searchQuery ? 'rounded-t-3xl' : 'rounded-3xl'}`}
+      />
+
+      {searchQuery && (
+        <div className="border-border bg-card dark:border-border dark:bg-card absolute top-full right-0 left-0 z-10 max-h-[calc(100vh-200px)] w-full overflow-hidden rounded-b-xl border border-t-0 shadow-lg transition-all duration-200">
+          <div className="max-h-[calc(100vh-200px)] overflow-x-hidden overflow-y-auto overscroll-contain">
+            {searchResults.length === 0 ? (
+              <div className="text-muted-foreground py-2 text-center text-sm">
+                {t('settings.sources.noResults')}
+              </div>
+            ) : (
+              searchResults.map((result, index) => (
+                <div
+                  key={index}
+                  onClick={() => handleSearchSelect(result)}
+                  title={result.path}
+                  className={`hover:bg-muted dark:hover:bg-muted flex min-w-0 cursor-pointer items-center px-3 py-2 ${
+                    index !== searchResults.length - 1
+                      ? 'border-border dark:border-border border-b'
+                      : ''
+                  }`}
+                >
+                  <img
+                    src={result.isFile ? FileIcon : FolderIcon}
+                    alt={
+                      result.isFile
+                        ? t('settings.sources.fileAlt')
+                        : t('settings.sources.folderAlt')
+                    }
+                    className="mr-2 h-4 w-4 shrink-0"
+                  />
+                  <span className="flex-1 truncate text-sm">{result.name}</span>
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+
+  const renderPathNavigation = () => (
+    <div className="mb-0 flex min-h-[38px] flex-col gap-2 text-base sm:flex-row sm:items-center sm:justify-between">
+      <div className="flex w-full items-center sm:w-auto">
+        <Button
+          type="button"
+          variant="outline"
+          size="icon-sm"
+          className="text-muted-foreground mr-3 h-[29px] w-[29px] rounded-full p-2 dark:border-0"
+          onClick={handleBackNavigation}
+        >
+          <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
+        </Button>
+
+        <div className="flex flex-wrap items-center">
+          <span className="text-primary font-semibold wrap-break-word">
+            {sourceName}
+          </span>
+          {currentPath.length > 0 && (
+            <>
+              <span className="text-muted-foreground mx-1 shrink-0">/</span>
+              {currentPath.map((dir, index) => (
+                <React.Fragment key={index}>
+                  <span className="dark:text-foreground wrap-break-word text-gray-700">
+                    {dir}
+                  </span>
+                  {index < currentPath.length - 1 && (
+                    <span className="text-muted-foreground mx-1 shrink-0">
+                      /
+                    </span>
+                  )}
+                </React.Fragment>
+              ))}
+            </>
+          )}
+          {selectedFile && (
+            <>
+              <span className="text-muted-foreground mx-1 shrink-0">/</span>
+              <span className="dark:text-foreground wrap-break-word text-gray-700">
+                {selectedFile.name}
+              </span>
+            </>
+          )}
+        </div>
+      </div>
+
+      <div className="relative mt-2 flex w-full flex-row flex-nowrap items-center justify-end gap-2 sm:mt-0 sm:w-auto">
+        {statusLabel && (
+          <div className="text-muted-foreground text-sm">{statusLabel}</div>
+        )}
+        {renderFileSearch()}
+        {topRightAction}
+      </div>
+    </div>
+  );
+
+  const currentDirectory = getCurrentDirectory();
+
+  return (
+    <div>
+      {selectedFile ? (
+        <div className="flex">
+          <div className="flex-1">
+            <Chunks
+              documentId={docId}
+              documentName={sourceName}
+              handleGoBack={() => setSelectedFile(null)}
+              path={selectedFile.id}
+              displayPath={[...currentPath, selectedFile.name].join('/')}
+              onFileSearch={handleFileSearch}
+              onFileSelect={handleFileSelect}
+            />
+          </div>
+        </div>
+      ) : (
+        <div className="flex w-full max-w-full flex-col overflow-hidden">
+          <div className="mb-2">{renderPathNavigation()}</div>
+
+          <div className="w-full">
+            <TableContainer>
+              <Table>
+                <TableHead>
+                  <TableRow>
+                    <TableHeader width="40%" align="left">
+                      {t('settings.sources.fileName')}
+                    </TableHeader>
+                    {columnOrder === 'size-first' ? (
+                      <>
+                        <TableHeader width="30%" align="left">
+                          {t('settings.sources.size')}
+                        </TableHeader>
+                        <TableHeader width="20%" align="right">
+                          {t('settings.sources.tokens')}
+                        </TableHeader>
+                      </>
+                    ) : (
+                      <>
+                        <TableHeader width="30%" align="left">
+                          {t('settings.sources.tokens')}
+                        </TableHeader>
+                        <TableHeader width="20%" align="left">
+                          {t('settings.sources.size')}
+                        </TableHeader>
+                      </>
+                    )}
+                    <TableHeader width="10%" align="right">
+                      <span className="sr-only">
+                        {t('settings.sources.actions')}
+                      </span>
+                    </TableHeader>
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {loading ? (
+                    <SkeletonLoader component="fileTable" />
+                  ) : (
+                    renderFileTree(currentDirectory)
+                  )}
+                </TableBody>
+              </Table>
+            </TableContainer>
+          </div>
+        </div>
+      )}
+      {extraContent}
+    </div>
+  );
+};
+
+export default TreeBrowser;
diff --git a/frontend/src/components/tree/types.ts b/frontend/src/components/tree/types.ts
new file mode 100644
index 00000000..e0f67014
--- /dev/null
+++ b/frontend/src/components/tree/types.ts
@@ -0,0 +1,52 @@
+import { SyntheticEvent } from 'react';
+
+export interface FileNode {
+  type?: string;
+  token_count?: number;
+  size_bytes?: number;
+  display_name?: string;
+  [key: string]: any;
+}
+
+export interface DirectoryStructure {
+  [key: string]: FileNode;
+}
+
+export interface SearchResult {
+  name: string;
+  path: string;
+  isFile: boolean;
+}
+
+export type TreeMenuOption = {
+  icon: string;
+  label: string;
+  onClick: (event: SyntheticEvent) => void;
+  variant: 'default' | 'destructive';
+  iconWidth?: number;
+  iconHeight?: number;
+};
+
+/**
+ * Row context passed to consumers' getRowMenuOptions callbacks so they
+ * can build per-row menus (e.g. add a Delete option for upload trees).
+ */
+export interface RowMenuContext {
+  name: string;
+  isFile: boolean;
+  itemId: string;
+  displayName?: string;
+  /** Default "View" option already provided by TreeBrowser. */
+  defaultViewOption: TreeMenuOption;
+}
+
+/**
+ * Controller exposed to wrappers via the controllerRef prop so they can
+ * trigger a refresh of the directory structure after a successful
+ * mutation (upload, delete, sync, etc.).
+ */
+export interface TreeBrowserController {
+  refreshDirectory: () => Promise<boolean>;
+  /** Resets the breadcrumb path back to the root. */
+  resetPath: () => void;
+}
diff --git a/frontend/src/components/tree/useReingestWait.ts b/frontend/src/components/tree/useReingestWait.ts
new file mode 100644
index 00000000..a27dae34
--- /dev/null
+++ b/frontend/src/components/tree/useReingestWait.ts
@@ -0,0 +1,100 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { useStore } from 'react-redux';
+import type { RootState } from '../../store';
+
+const MAX_WAIT_MS = 5 * 60_000;
+
+export type ReingestTerminal = 'completed' | 'failed' | 'timeout' | 'unmounted';
+
+/**
+ * Waits for a terminal source.ingest.{completed,failed} event tagged with
+ * sourceId in the bounded notifications.recentEvents ring. Resolves on
+ * the first terminal whose timestamp is >= opStartedAt (so a stale
+ * terminal from a prior op on the same source can't short-circuit the
+ * current wait).
+ *
+ * Returns a function `waitForTerminal(sourceId, opStartedAt)` that callers
+ * invoke after kicking off the backend mutation. Cleans up its subscribe
+ * and timer on unmount.
+ */
+export function useReingestSseWaiter() {
+  const store = useStore<RootState>();
+  const mountedRef = useRef(true);
+  const unsubscribeRef = useRef<(() => void) | null>(null);
+  const timerRef = useRef<number | null>(null);
+
+  useEffect(
+    () => () => {
+      mountedRef.current = false;
+      unsubscribeRef.current?.();
+      unsubscribeRef.current = null;
+      if (timerRef.current !== null) {
+        window.clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    },
+    [],
+  );
+
+  const waitForTerminal = useCallback(
+    (sourceId: string | undefined, opStartedAt: number) =>
+      new Promise<ReingestTerminal>((resolve) => {
+        if (!mountedRef.current) {
+          resolve('unmounted');
+          return;
+        }
+
+        const terminalFromSse = (): 'completed' | 'failed' | null => {
+          if (!sourceId) return null;
+          const events = store.getState().notifications.recentEvents;
+          for (const event of events) {
+            if (event.scope?.id !== sourceId) continue;
+            const ts = event.ts ? Date.parse(event.ts) : NaN;
+            if (!Number.isFinite(ts) || ts < opStartedAt) continue;
+            if (event.type === 'source.ingest.completed') return 'completed';
+            if (event.type === 'source.ingest.failed') return 'failed';
+          }
+          return null;
+        };
+
+        // Cover the race where the event landed between the POST
+        // returning and the subscribe call.
+        const initial = terminalFromSse();
+        if (initial) {
+          resolve(initial);
+          return;
+        }
+
+        let settled = false;
+        const finish = (value: ReingestTerminal) => {
+          if (settled) return;
+          settled = true;
+          if (timerRef.current !== null) {
+            window.clearTimeout(timerRef.current);
+            timerRef.current = null;
+          }
+          if (unsubscribeRef.current) {
+            unsubscribeRef.current();
+            unsubscribeRef.current = null;
+          }
+          resolve(value);
+        };
+
+        timerRef.current = window.setTimeout(
+          () => finish('timeout'),
+          MAX_WAIT_MS,
+        );
+        unsubscribeRef.current = store.subscribe(() => {
+          if (!mountedRef.current) {
+            finish('unmounted');
+            return;
+          }
+          const next = terminalFromSse();
+          if (next) finish(next);
+        });
+      }),
+    [store],
+  );
+
+  return { waitForTerminal, mountedRef };
+}
diff --git a/frontend/src/components/types/index.ts b/frontend/src/components/types/index.ts
index 983dbefd..60d9c20c 100644
--- a/frontend/src/components/types/index.ts
+++ b/frontend/src/components/types/index.ts
@@ -1,32 +1,3 @@
-export type InputProps = {
-  type: 'text' | 'number';
-  value: string | string[] | number;
-  colorVariant?: 'silver' | 'jet' | 'gray';
-  borderVariant?: 'thin' | 'thick';
-  textSize?: 'small' | 'medium';
-  isAutoFocused?: boolean;
-  id?: string;
-  maxLength?: number;
-  name?: string;
-  placeholder?: string;
-  required?: boolean;
-  className?: string;
-  children?: React.ReactElement;
-  labelBgClassName?: string;
-  onChange: (
-    e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,
-  ) => void;
-  onPaste?: (
-    e: React.ClipboardEvent<HTMLTextAreaElement | HTMLInputElement>,
-  ) => void;
-  onKeyDown?: (
-    e: React.KeyboardEvent<HTMLTextAreaElement | HTMLInputElement>,
-  ) => void;
-  leftIcon?: React.ReactNode;
-  edgeRoundness?: string;
-  'data-testid'?: string;
-};
-
 export type MermaidRendererProps = {
   code: string;
   isLoading?: boolean;
diff --git a/frontend/src/components/ui/accordion.tsx b/frontend/src/components/ui/accordion.tsx
new file mode 100644
index 00000000..85d9a075
--- /dev/null
+++ b/frontend/src/components/ui/accordion.tsx
@@ -0,0 +1,67 @@
+import { ChevronDownIcon } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn('overflow-hidden shadow-xs', className)}
+      {...props}
+    />
+  );
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          'focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 text-left transition-all outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon
+          className="text-muted-foreground h-5 w-5 shrink-0 transition-transform duration-200 dark:invert"
+          aria-hidden="true"
+        />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden"
+      {...props}
+    >
+      <div className={cn('px-4 pb-3', className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  );
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
diff --git a/frontend/src/components/ui/avatar.tsx b/frontend/src/components/ui/avatar.tsx
new file mode 100644
index 00000000..fcf22994
--- /dev/null
+++ b/frontend/src/components/ui/avatar.tsx
@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+
+import Robot from '../../assets/robot.svg';
+import { cn } from '@/lib/utils';
+
+type AvatarProps = {
+  src?: string | null;
+  alt?: string;
+  fallbackSrc?: string;
+  className?: string;
+  imgClassName?: string;
+  children?: React.ReactNode;
+};
+
+function Avatar({
+  src,
+  alt = 'agent',
+  fallbackSrc = Robot,
+  className,
+  imgClassName,
+  children,
+}: AvatarProps) {
+  const resolvedSrc = src && src.trim() !== '' ? src : fallbackSrc;
+  const [currentSrc, setCurrentSrc] = useState(resolvedSrc);
+
+  useEffect(() => {
+    const newSrc = src && src.trim() !== '' ? src : fallbackSrc;
+    if (newSrc !== currentSrc) {
+      setCurrentSrc(newSrc);
+    }
+  }, [src, fallbackSrc]);
+
+  return (
+    <div data-slot="avatar" className={cn('shrink-0', className)}>
+      {children ?? (
+        <img
+          src={currentSrc}
+          alt={alt}
+          className={imgClassName}
+          referrerPolicy="no-referrer"
+          crossOrigin="anonymous"
+          onError={() => {
+            if (currentSrc !== fallbackSrc) setCurrentSrc(fallbackSrc);
+          }}
+        />
+      )}
+    </div>
+  );
+}
+
+export { Avatar };
diff --git a/frontend/src/components/ui/button.tsx b/frontend/src/components/ui/button.tsx
index 6a1e8863..6bac0ae2 100644
--- a/frontend/src/components/ui/button.tsx
+++ b/frontend/src/components/ui/button.tsx
@@ -12,6 +12,8 @@ const buttonVariants = cva(
         default: 'bg-primary text-primary-foreground hover:bg-primary/90',
         destructive:
           'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        'destructive-outline':
+          'border border-destructive text-destructive bg-transparent hover:bg-destructive hover:text-white focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',
         outline:
           'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
         secondary:
diff --git a/frontend/src/components/ui/command.tsx b/frontend/src/components/ui/command.tsx
index 63a31751..6bff16e4 100644
--- a/frontend/src/components/ui/command.tsx
+++ b/frontend/src/components/ui/command.tsx
@@ -19,7 +19,7 @@ function Command({
     <CommandPrimitive
       data-slot="command"
       className={cn(
-        'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
+        'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-xl',
         className,
       )}
       {...props}
diff --git a/frontend/src/components/ui/dropdown-menu.tsx b/frontend/src/components/ui/dropdown-menu.tsx
index 2d2aaf04..083d9963 100644
--- a/frontend/src/components/ui/dropdown-menu.tsx
+++ b/frontend/src/components/ui/dropdown-menu.tsx
@@ -40,7 +40,7 @@ function DropdownMenuContent({
         data-slot="dropdown-menu-content"
         sideOffset={sideOffset}
         className={cn(
-          'bg-popover text-popover-foreground data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+          'bg-popover text-popover-foreground data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-xl border p-1 shadow-md',
           className,
         )}
         {...props}
diff --git a/frontend/src/components/ui/input.tsx b/frontend/src/components/ui/input.tsx
index 84284a0b..58d4a4ac 100644
--- a/frontend/src/components/ui/input.tsx
+++ b/frontend/src/components/ui/input.tsx
@@ -2,22 +2,88 @@ import * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
-function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
+type InputProps = React.ComponentProps<'input'> & {
+  label?: React.ReactNode;
+  leftIcon?: React.ReactNode;
+  labelBgClassName?: string;
+};
+
+const baseInputClasses =
+  'text-foreground file:text-foreground placeholder:text-muted-foreground border-border h-[42px] w-full min-w-0 rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm';
+
+const themeInputClasses =
+  'dark:border-border dark:text-white dark:placeholder:text-gray-400 selection:bg-primary selection:text-primary-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive';
+
+function Input({
+  className,
+  type,
+  label,
+  leftIcon,
+  labelBgClassName = 'bg-card',
+  id,
+  placeholder,
+  required,
+  ...props
+}: InputProps) {
+  const generatedId = React.useId();
+  const inputId = id ?? (label ? generatedId : undefined);
+
+  if (!label) {
+    return (
+      <input
+        type={type}
+        id={id}
+        placeholder={placeholder}
+        required={required}
+        data-slot="input"
+        className={cn(baseInputClasses, themeInputClasses, className)}
+        {...props}
+      />
+    );
+  }
+
   return (
-    <input
-      type={type}
-      data-slot="input"
-      className={cn(
-        'text-foreground file:text-foreground placeholder:text-muted-foreground border-border h-[42px] w-full min-w-0 rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-        'dark:border-border dark:text-white dark:placeholder:text-gray-400',
-        'selection:bg-primary selection:text-primary-foreground',
-        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
-        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
-        className,
-      )}
-      {...props}
-    />
+    <div className="relative">
+      <input
+        type={type}
+        id={inputId}
+        data-slot="input"
+        // Use a single-space placeholder so :placeholder-shown drives the
+        // floating-label peer-trick even when the caller didn't pass one.
+        placeholder={placeholder ?? ' '}
+        required={required}
+        className={cn(
+          baseInputClasses,
+          themeInputClasses,
+          'peer placeholder:text-transparent dark:placeholder:text-transparent',
+          leftIcon && 'pl-10',
+          className,
+        )}
+        {...props}
+      />
+      {leftIcon ? (
+        <div className="pointer-events-none absolute top-1/2 left-3 flex -translate-y-1/2 items-center justify-center">
+          {leftIcon}
+        </div>
+      ) : null}
+      <label
+        htmlFor={inputId}
+        className={cn(
+          'text-muted-foreground pointer-events-none absolute -top-2.5 left-3 max-w-[calc(100%-24px)] cursor-none overflow-hidden px-2 text-xs text-ellipsis whitespace-nowrap transition-all select-none',
+          'peer-placeholder-shown:top-2.5 peer-placeholder-shown:text-base',
+          leftIcon
+            ? 'peer-placeholder-shown:left-7'
+            : 'peer-placeholder-shown:left-3',
+          'peer-focus:-top-2.5 peer-focus:left-3 peer-focus:text-xs',
+          labelBgClassName,
+        )}
+      >
+        {label}
+        {required ? <span className="text-destructive ml-0.5">*</span> : null}
+      </label>
+    </div>
   );
 }
 
 export { Input };
+export type { InputProps };
diff --git a/frontend/src/components/ui/modal.tsx b/frontend/src/components/ui/modal.tsx
new file mode 100644
index 00000000..41e89b47
--- /dev/null
+++ b/frontend/src/components/ui/modal.tsx
@@ -0,0 +1,139 @@
+'use client';
+
+import { XIcon } from 'lucide-react';
+import { VisuallyHidden } from 'radix-ui';
+import * as React from 'react';
+
+import {
+  Dialog,
+  DialogClose,
+  DialogDescription,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { cn } from '@/lib/utils';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+
+type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+
+const SIZE_CLASSES: Record<ModalSize, string> = {
+  sm: 'sm:max-w-sm',
+  md: 'sm:max-w-lg',
+  lg: 'sm:max-w-2xl',
+  xl: 'sm:max-w-4xl',
+  full: 'sm:max-w-[calc(100vw-2rem)]',
+};
+
+export type ModalProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  hideTitle?: boolean;
+  children: React.ReactNode;
+  footer?: React.ReactNode;
+  className?: string;
+  contentClassName?: string;
+  showCloseButton?: boolean;
+  isPerformingTask?: boolean;
+  size?: ModalSize;
+};
+
+const Modal = React.forwardRef<HTMLDivElement, ModalProps>(function Modal(
+  {
+    open,
+    onOpenChange,
+    title,
+    description,
+    hideTitle = false,
+    children,
+    footer,
+    className,
+    contentClassName,
+    showCloseButton = true,
+    isPerformingTask = false,
+    size = 'md',
+  },
+  ref,
+) {
+  const shouldShowCloseButton = showCloseButton && !isPerformingTask;
+
+  // When a task is performing, block click-outside / pointer-outside to
+  // mirror the legacy WrapperModal lock. Esc remains enabled (Radix default).
+  const blockOutsideInteractions = isPerformingTask
+    ? (event: Event) => event.preventDefault()
+    : undefined;
+
+  // Radix requires a DialogTitle in the a11y tree. If the consumer wants the
+  // title hidden visually, wrap it in VisuallyHidden so screen readers still
+  // announce it. If no title was supplied at all, provide a sensible default
+  // ("Dialog") behind VisuallyHidden so Radix never warns.
+  const resolvedTitle = title ?? 'Dialog';
+  const titleNode =
+    hideTitle || !title ? (
+      <VisuallyHidden.Root>
+        <DialogTitle>{resolvedTitle}</DialogTitle>
+      </VisuallyHidden.Root>
+    ) : (
+      <DialogTitle>{title}</DialogTitle>
+    );
+
+  const descriptionNode = description ? (
+    <DialogDescription>{description}</DialogDescription>
+  ) : (
+    <VisuallyHidden.Root>
+      <DialogDescription>{resolvedTitle}</DialogDescription>
+    </VisuallyHidden.Root>
+  );
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogPortal>
+        <DialogOverlay className="bg-black/25 backdrop-blur-xs dark:bg-black/50" />
+        <DialogPrimitive.Content
+          ref={ref}
+          data-slot="modal-content"
+          onPointerDownOutside={blockOutsideInteractions}
+          onInteractOutside={blockOutsideInteractions}
+          // Radix portals this to <body> in the DOM, but React still bubbles
+          // synthetic events through the JSX tree. Stop the bubble at the
+          // modal boundary so consumers mounted inside clickable cards (e.g.
+          // MoveToFolderModal inside AgentCard) don't trigger the card's
+          // onClick when the user interacts inside the modal.
+          onClick={(event) => event.stopPropagation()}
+          className={cn(
+            'bg-card text-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 shadow-modal fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-2xl p-8 duration-200 outline-none',
+            SIZE_CLASSES[size],
+            className,
+          )}
+        >
+          {titleNode}
+          {descriptionNode}
+          <div
+            className={cn(
+              'no-scrollbar text-foreground overflow-y-auto',
+              contentClassName,
+            )}
+          >
+            {children}
+          </div>
+          {footer ? (
+            <div className="flex justify-end gap-2">{footer}</div>
+          ) : null}
+          {shouldShowCloseButton && (
+            <DialogClose
+              className="ring-offset-background focus:ring-ring absolute top-3 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none"
+              aria-label="Close"
+            >
+              <XIcon className="size-4" />
+              <span className="sr-only">Close</span>
+            </DialogClose>
+          )}
+        </DialogPrimitive.Content>
+      </DialogPortal>
+    </Dialog>
+  );
+});
+
+export { Modal };
diff --git a/frontend/src/components/ui/popover.tsx b/frontend/src/components/ui/popover.tsx
index 1b2e13bd..54200ccb 100644
--- a/frontend/src/components/ui/popover.tsx
+++ b/frontend/src/components/ui/popover.tsx
@@ -28,7 +28,7 @@ function PopoverContent({
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-xl border p-4 shadow-md outline-hidden',
           className,
         )}
         {...props}
diff --git a/frontend/src/components/ui/select.tsx b/frontend/src/components/ui/select.tsx
index 7bae378f..99ae017c 100644
--- a/frontend/src/components/ui/select.tsx
+++ b/frontend/src/components/ui/select.tsx
@@ -37,7 +37,7 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex w-fit items-center justify-between gap-2 rounded-md border px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=lg]:h-[42px] data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-gray-600 dark:[&_svg:not([class*='text-'])]:text-gray-400",
+        "group aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex w-fit items-center justify-between gap-2 rounded-md border px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=lg]:h-[42px] data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-gray-600 dark:[&_svg:not([class*='text-'])]:text-gray-400",
         variant === 'default' &&
           'border-border bg-card focus-visible:ring-ring/50 hover:bg-accent data-placeholder:text-muted-foreground',
         variant === 'ghost' &&
@@ -48,7 +48,7 @@ function SelectTrigger({
     >
       {children}
       <SelectPrimitive.Icon asChild>
-        <ChevronDownIcon className="size-4 opacity-50" />
+        <ChevronDownIcon className="size-4 opacity-50 transition-transform duration-200 group-data-[state=open]:rotate-180" />
       </SelectPrimitive.Icon>
     </SelectPrimitive.Trigger>
   );
@@ -57,7 +57,7 @@ function SelectTrigger({
 function SelectContent({
   className,
   children,
-  position = 'item-aligned',
+  position = 'popper',
   align = 'center',
   ...props
 }: React.ComponentProps<typeof SelectPrimitive.Content>) {
@@ -66,7 +66,7 @@ function SelectContent({
       <SelectPrimitive.Content
         data-slot="select-content"
         className={cn(
-          'border-border bg-card data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-200 max-h-(--radix-select-content-available-height) min-w-32 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border text-gray-900 shadow-md dark:text-white',
+          'border-border bg-card data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-200 max-h-(--radix-select-content-available-height) w-(--radix-select-trigger-width) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-xl border text-gray-900 shadow-md dark:text-white',
           position === 'popper' &&
             'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
           className,
diff --git a/frontend/src/components/ui/switch.tsx b/frontend/src/components/ui/switch.tsx
new file mode 100644
index 00000000..0c3c9320
--- /dev/null
+++ b/frontend/src/components/ui/switch.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+
+function Switch({
+  className,
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        'peer focus-visible:ring-ring/50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-muted dark:data-[state=unchecked]:bg-muted inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-colors outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          'pointer-events-none block h-5 w-5 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
+        )}
+      />
+    </SwitchPrimitive.Root>
+  );
+}
+
+export { Switch };
diff --git a/frontend/src/components/Table.tsx b/frontend/src/components/ui/table.tsx
similarity index 59%
rename from frontend/src/components/Table.tsx
rename to frontend/src/components/ui/table.tsx
index 5406c68a..4f3b7c7f 100644
--- a/frontend/src/components/Table.tsx
+++ b/frontend/src/components/ui/table.tsx
@@ -1,4 +1,6 @@
-import React from 'react';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
 
 interface TableProps {
   children: React.ReactNode;
@@ -43,10 +45,16 @@ const TableContainer = React.forwardRef<HTMLDivElement, TableContainerProps>(
     ref: React.ForwardedRef<HTMLDivElement>,
   ) {
     return (
-      <div className={`relative rounded-[6px] ${className}`}>
+      <div
+        data-slot="table-container"
+        className={cn('relative rounded-md', className)}
+      >
         <div
           ref={ref}
-          className={`w-full overflow-x-auto rounded-[6px] bg-transparent ${bordered ? 'border-border dark:border-border border' : ''}`}
+          className={cn(
+            'w-full overflow-x-auto rounded-md bg-transparent',
+            bordered && 'border-border border',
+          )}
           style={{
             maxHeight: height === 'auto' ? undefined : height,
             overflowY: height === 'auto' ? 'hidden' : 'auto',
@@ -66,16 +74,23 @@ const Table: React.FC<TableProps> = ({
 }) => {
   return (
     <table
-      className={`w-full table-auto border-collapse bg-transparent ${minWidth} ${className}`}
+      data-slot="table"
+      className={cn(
+        'w-full table-auto border-collapse bg-transparent',
+        minWidth,
+        className,
+      )}
     >
       {children}
     </table>
   );
 };
+
 const TableHead: React.FC<TableHeadProps> = ({ children, className = '' }) => {
   return (
     <thead
-      className={`dark:bg-card sticky top-0 z-10 bg-gray-100 ${className} `}
+      data-slot="table-head"
+      className={cn('bg-muted sticky top-0 z-10', className)}
     >
       {children}
     </thead>
@@ -84,7 +99,10 @@ const TableHead: React.FC<TableHeadProps> = ({ children, className = '' }) => {
 
 const TableBody: React.FC<TableHeadProps> = ({ children, className = '' }) => {
   return (
-    <tbody className={`[&>tr:last-child]:border-b-0 ${className}`}>
+    <tbody
+      data-slot="table-body"
+      className={cn('[&>tr:last-child]:border-b-0', className)}
+    >
       {children}
     </tbody>
   );
@@ -95,13 +113,14 @@ const TableRow: React.FC<TableRowProps> = ({
   className = '',
   onClick,
 }) => {
-  const baseClasses =
-    'border-b border-border hover:bg-muted dark:border-border dark:hover:bg-muted';
-  const cursorClass = onClick ? 'cursor-pointer' : '';
-
   return (
     <tr
-      className={`${baseClasses} ${cursorClass} ${className}`}
+      data-slot="table-row"
+      className={cn(
+        'border-border hover:bg-muted border-b',
+        onClick && 'cursor-pointer',
+        className,
+      )}
       onClick={onClick}
     >
       {children}
@@ -116,23 +135,22 @@ const TableHeader: React.FC<TableCellProps> = ({
   width,
   align = 'left',
 }) => {
-  const getAlignmentClass = () => {
-    switch (align) {
-      case 'right':
-        return 'text-right';
-      case 'center':
-        return 'text-center';
-      default:
-        return 'text-left';
-    }
-  };
-
-  const baseClasses = `px-2 py-3 text-sm font-medium text-gray-700 lg:px-3 dark:text-muted-foreground border-b border-border dark:border-border relative box-border ${getAlignmentClass()}`;
-  const widthClasses = minWidth ? minWidth : '';
+  const alignmentClass =
+    align === 'right'
+      ? 'text-right'
+      : align === 'center'
+        ? 'text-center'
+        : 'text-left';
 
   return (
     <th
-      className={`${baseClasses} ${widthClasses} ${className}`}
+      data-slot="table-header"
+      className={cn(
+        'border-border text-muted-foreground relative box-border border-b px-2 py-3 text-sm font-medium lg:px-3',
+        alignmentClass,
+        minWidth,
+        className,
+      )}
       style={width ? { width, minWidth: width, maxWidth: width } : {}}
     >
       {children}
@@ -147,23 +165,22 @@ const TableCell: React.FC<TableCellProps> = ({
   width,
   align = 'left',
 }) => {
-  const getAlignmentClass = () => {
-    switch (align) {
-      case 'right':
-        return 'text-right';
-      case 'center':
-        return 'text-center';
-      default:
-        return 'text-left';
-    }
-  };
-
-  const baseClasses = `px-2 py-2 text-sm lg:px-3 box-border ${getAlignmentClass()}`;
-  const widthClasses = minWidth ? minWidth : '';
+  const alignmentClass =
+    align === 'right'
+      ? 'text-right'
+      : align === 'center'
+        ? 'text-center'
+        : 'text-left';
 
   return (
     <td
-      className={`${baseClasses} ${widthClasses} ${className}`}
+      data-slot="table-cell"
+      className={cn(
+        'box-border px-2 py-2 text-sm lg:px-3',
+        alignmentClass,
+        minWidth,
+        className,
+      )}
       style={width ? { width, minWidth: width, maxWidth: width } : {}}
     >
       {children}
diff --git a/frontend/src/components/ui/tabs.tsx b/frontend/src/components/ui/tabs.tsx
new file mode 100644
index 00000000..f72d0b1a
--- /dev/null
+++ b/frontend/src/components/ui/tabs.tsx
@@ -0,0 +1,64 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+
+function Tabs({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn('flex flex-col gap-2', className)}
+      {...props}
+    />
+  );
+}
+
+function TabsList({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        'no-scrollbar flex snap-x flex-nowrap overflow-x-auto scroll-smooth md:space-x-4',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        'focus-visible:ring-ring/50 data-[state=active]:bg-muted data-[state=active]:text-foreground dark:data-[state=active]:bg-accent text-muted-foreground hover:text-foreground snap-start rounded-3xl px-4 py-2 text-sm font-bold whitespace-nowrap transition-colors outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 dark:text-neutral-400 dark:hover:text-white dark:data-[state=active]:text-white',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn('flex-1 outline-none', className)}
+      {...props}
+    />
+  );
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };
diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index 26c96fc8..a00da721 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -364,7 +364,7 @@ export default function Conversation() {
               : 'max-w-[1300px] md:w-9/12 lg:w-8/12 xl:w-8/12 2xl:w-6/12'
           }`}
         >
-          <div className="flex w-full items-center rounded-[40px] px-2">
+          <div className="flex w-full items-center rounded-full px-2">
             <MessageInput
               key={conversationId || 'new'}
               onSubmit={(text) => {
diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index ad66bbfb..29030434 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -25,12 +25,19 @@ import Like from '../assets/like.svg?react';
 import Link from '../assets/link.svg';
 import Sources from '../assets/sources.svg';
 import UserIcon from '../assets/user.svg';
-import Accordion from '../components/Accordion';
-import Avatar from '../components/Avatar';
 import CopyButton from '../components/CopyButton';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '../components/ui/accordion';
+import { Avatar } from '../components/ui/avatar';
+import { Button } from '../components/ui/button';
+import { Input } from '../components/ui/input';
 import MermaidRenderer from '../components/MermaidRenderer';
-import Sidebar from '../components/Sidebar';
 import Spinner from '../components/Spinner';
+import { Sheet, SheetContent } from '../components/ui/sheet';
 import SpeakButton from '../components/TextToSpeechButton';
 import { useDarkTheme, useOutsideAlerter } from '../hooks';
 import {
@@ -152,7 +159,7 @@ const ConversationBubble = forwardRef<
                 <div
                   key={index}
                   title={file.fileName}
-                  className="dark:text-foreground dark:bg-accent text-muted-foreground bg-muted flex items-center rounded-xl p-2 text-[14px]"
+                  className="dark:text-foreground dark:bg-accent text-muted-foreground bg-muted flex items-center rounded-xl p-2 text-sm"
                 >
                   <div className="bg-primary mr-2 items-center justify-center rounded-lg p-[5.5px]">
                     <img
@@ -172,17 +179,13 @@ const ConversationBubble = forwardRef<
             ref={ref}
             className={`flex flex-row-reverse justify-items-start`}
           >
-            <Avatar
-              size="SMALL"
-              className="mt-2 shrink-0 text-2xl"
-              avatar={
-                <img className="mr-1 rounded-full" width={30} src={UserIcon} />
-              }
-            />
+            <Avatar className="mt-2 shrink-0 text-2xl">
+              <img className="mr-1 rounded-full" width={30} src={UserIcon} />
+            </Avatar>
             {!isEditClicked && (
               <>
                 <div className="relative mr-2 flex w-full flex-col">
-                  <div className="from-medium-purple to-slate-blue mr-2 ml-2 flex max-w-full items-start gap-2 rounded-[28px] bg-linear-to-b px-5 py-4 text-sm leading-normal wrap-break-word whitespace-pre-wrap text-white sm:text-base">
+                  <div className="mr-2 ml-2 flex max-w-full items-start gap-2 rounded-3xl bg-linear-to-b from-violet-500 to-violet-600 px-5 py-4 text-sm leading-normal wrap-break-word whitespace-pre-wrap text-white sm:text-base">
                     <div
                       ref={messageRef}
                       className={`${isQuestionCollapsed ? 'line-clamp-4' : ''} w-full`}
@@ -190,12 +193,15 @@ const ConversationBubble = forwardRef<
                       {message}
                     </div>
                     {shouldShowToggle && (
-                      <button
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon-sm"
                         onClick={(e) => {
                           e.stopPropagation();
                           setIsQuestionCollapsed(!isQuestionCollapsed);
                         }}
-                        className="ml-1 rounded-full p-2 hover:bg-[#D9D9D933]"
+                        className="ml-1 h-auto w-auto rounded-full bg-transparent p-2 hover:bg-[#D9D9D933]"
                       >
                         <img
                           src={ChevronDown}
@@ -204,19 +210,22 @@ const ConversationBubble = forwardRef<
                           height={24}
                           className={`transform invert transition-transform duration-200 ${isQuestionCollapsed ? '' : 'rotate-180'}`}
                         />
-                      </button>
+                      </Button>
                     )}
                   </div>
                 </div>
-                <button
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon-sm"
                   onClick={() => {
                     setIsEditClicked(true);
                     setEditInputBox(message ?? '');
                   }}
-                  className={`hover:bg-accent dark:hover:bg-accent mt-3 flex h-fit shrink-0 cursor-pointer items-center rounded-full p-2 pt-1.5 pl-1.5 ${isEditClicked ? 'visible' : 'invisible group-hover:visible'}`}
+                  className="invisible mt-3 h-fit w-auto shrink-0 cursor-pointer rounded-full p-2 pt-1.5 pl-1.5 group-hover:visible"
                 >
                   <img src={Edit} alt="Edit" className="cursor-pointer" />
-                </button>
+                </Button>
               </>
             )}
           </div>
@@ -238,17 +247,20 @@ const ConversationBubble = forwardRef<
                 }}
                 rows={5}
                 value={editInputBox}
-                className="border-border text-carbon dark:border-philippine-grey dark:text-foreground w-full resize-none rounded-3xl border px-4 py-3 text-base leading-relaxed focus:outline-hidden"
+                className="border-border text-foreground dark:border-border dark:text-foreground focus-visible:ring-ring/50 focus-visible:border-ring w-full resize-none rounded-3xl border px-4 py-3 text-base leading-relaxed focus:outline-hidden focus-visible:ring-[3px]"
               />
               <div className="flex items-center justify-end gap-2">
-                <button
-                  className="text-primary hover:bg-muted hover:text-foreground dark:hover:bg-accent dark:hover:text-foreground rounded-full px-4 py-2 text-sm font-semibold transition-colors"
+                <Button
+                  type="button"
+                  variant="ghost"
+                  className="text-primary hover:bg-muted hover:text-foreground dark:hover:bg-accent dark:hover:text-foreground h-auto rounded-full px-4 py-2 text-sm font-semibold"
                   onClick={() => setIsEditClicked(false)}
                 >
                   {t('conversation.edit.cancel')}
-                </button>
-                <button
-                  className="bg-primary not-disabled:hover:bg-primary/90 not-disabled:dark:hover:bg-primary/90 disabled:bg-primary/30 rounded-full px-4 py-2 text-sm font-medium text-white transition-colors disabled:cursor-not-allowed"
+                </Button>
+                <Button
+                  type="button"
+                  className="bg-primary not-disabled:hover:bg-primary/90 not-disabled:dark:hover:bg-primary/90 disabled:bg-primary/30 h-auto rounded-full px-4 py-2 text-sm font-medium text-white disabled:cursor-not-allowed disabled:opacity-100"
                   onClick={handleEditClick}
                   disabled={
                     !editInputBox.trim() ||
@@ -256,7 +268,7 @@ const ConversationBubble = forwardRef<
                   }
                 >
                   {t('conversation.edit.update')}
-                </button>
+                </Button>
               </div>
             </div>
           )}
@@ -332,14 +344,10 @@ const ConversationBubble = forwardRef<
               <div className="mb-4 flex flex-col flex-wrap items-start self-start lg:flex-nowrap">
                 <div className="my-2 flex flex-row items-center justify-center gap-3">
                   <Avatar
+                    src={Sources}
+                    alt={t('conversation.sources.title')}
                     className="h-6.5 w-7.5 text-xl"
-                    avatar={
-                      <img
-                        src={Sources}
-                        alt={t('conversation.sources.title')}
-                        className="h-full w-full object-fill"
-                      />
-                    }
+                    imgClassName="h-full w-full object-fill"
                   />
                   <p className="text-base font-semibold">
                     {t('conversation.sources.title')}
@@ -435,7 +443,7 @@ const ConversationBubble = forwardRef<
         )}
         {!message && primaryArtifactCall?.artifact_id && onOpenArtifact && (
           <div className="my-2 ml-2 flex justify-start">
-            <button
+            <Button
               type="button"
               onClick={() =>
                 onOpenArtifact({
@@ -443,7 +451,7 @@ const ConversationBubble = forwardRef<
                   toolName: primaryArtifactCall.tool_name,
                 })
               }
-              className="flex items-center gap-2 rounded-full bg-purple-100 px-3 py-2 text-sm font-medium text-purple-700 transition-colors hover:bg-purple-200 dark:bg-purple-900/30 dark:text-purple-300 dark:hover:bg-purple-900/50"
+              className="h-auto rounded-full bg-purple-100 px-3 py-2 text-sm font-medium text-purple-700 hover:bg-purple-200 dark:bg-purple-900/30 dark:text-purple-300 dark:hover:bg-purple-900/50"
             >
               <svg
                 className="h-4 w-4"
@@ -469,7 +477,7 @@ const ConversationBubble = forwardRef<
                 : artifactCount > 1
                   ? `View artifacts (${artifactCount})`
                   : 'View artifact'}
-            </button>
+            </Button>
           </div>
         )}
         {thought && (
@@ -479,21 +487,17 @@ const ConversationBubble = forwardRef<
           <div className="flex max-w-full flex-col flex-wrap items-start self-start lg:flex-nowrap">
             <div className="my-2 flex flex-row items-center justify-center gap-3">
               <Avatar
+                src={DocsGPT3}
+                alt={t('conversation.answer')}
                 className="h-8.5 w-8.5 text-2xl"
-                avatar={
-                  <img
-                    src={DocsGPT3}
-                    alt={t('conversation.answer')}
-                    className="h-full w-full object-cover"
-                  />
-                }
+                imgClassName="h-full w-full object-cover"
               />
               <p className="text-base font-semibold">
                 {t('conversation.answer')}
               </p>
             </div>
             <div
-              className={`fade-in-bubble bg-answer-bubble mr-5 flex max-w-full rounded-[18px] px-6 py-4.5 ${
+              className={`fade-in-bubble bg-answer-bubble mr-5 flex max-w-full rounded-2xl px-6 py-4.5 ${
                 type === 'ERROR'
                   ? 'text-destructive/80 dark:border-destructive dark:bg-destructive/15 relative flex-row items-center rounded-full border border-transparent bg-[#FFE7E7] p-2 py-5 text-sm font-normal dark:text-white'
                   : 'flex-col rounded-3xl'
@@ -516,7 +520,7 @@ const ConversationBubble = forwardRef<
                                   const num = href.replace('#cite-', '');
                                   const sourceIdx = parseInt(num, 10) - 1;
                                   return (
-                                    <button
+                                    <Button
                                       type="button"
                                       onClick={() => {
                                         const el = document.getElementById(
@@ -541,11 +545,11 @@ const ConversationBubble = forwardRef<
                                           );
                                         }
                                       }}
-                                      className="mx-0.5 inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-purple-100 px-1.5 text-xs font-semibold text-purple-700 transition-colors hover:bg-purple-200 dark:bg-purple-900/40 dark:text-purple-300 dark:hover:bg-purple-900/60"
+                                      className="mx-0.5 h-5 min-w-5 rounded-full bg-purple-100 px-1.5 text-xs font-semibold text-purple-700 hover:bg-purple-200 dark:bg-purple-900/40 dark:text-purple-300 dark:hover:bg-purple-900/60"
                                       title={`Jump to source ${num}`}
                                     >
                                       {num}
-                                    </button>
+                                    </Button>
                                   );
                                 }
                                 return (
@@ -572,8 +576,8 @@ const ConversationBubble = forwardRef<
                                 const language = match ? match[1] : '';
 
                                 return match ? (
-                                  <div className="group border-border relative overflow-hidden rounded-[14px] border">
-                                    <div className="bg-platinum dark:bg-muted flex items-center justify-between px-2 py-1">
+                                  <div className="group border-border relative overflow-hidden rounded-xl border">
+                                    <div className="bg-muted flex items-center justify-between px-2 py-1">
                                       <span className="text-foreground dark:text-foreground text-xs font-medium">
                                         {language}
                                       </span>
@@ -601,7 +605,7 @@ const ConversationBubble = forwardRef<
                                     </SyntaxHighlighter>
                                   </div>
                                 ) : (
-                                  <code className="dark:bg-accent dark:text-foreground rounded-[6px] bg-gray-200 px-2 py-1 text-xs font-normal whitespace-pre-line">
+                                  <code className="dark:bg-accent dark:text-foreground rounded-md bg-gray-200 px-2 py-1 text-xs font-normal whitespace-pre-line">
                                     {children}
                                   </code>
                                 );
@@ -690,7 +694,7 @@ const ConversationBubble = forwardRef<
               <>
                 {primaryArtifactCall?.artifact_id && onOpenArtifact && (
                   <div className="relative mr-2 flex items-center justify-center">
-                    <button
+                    <Button
                       type="button"
                       onClick={() =>
                         onOpenArtifact({
@@ -698,7 +702,7 @@ const ConversationBubble = forwardRef<
                           toolName: primaryArtifactCall.tool_name,
                         })
                       }
-                      className="flex items-center gap-2 rounded-full bg-purple-100 px-3 py-2 text-sm font-medium text-purple-700 transition-colors hover:bg-purple-200 dark:bg-purple-900/30 dark:text-purple-300 dark:hover:bg-purple-900/50"
+                      className="h-auto rounded-full bg-purple-100 px-3 py-2 text-sm font-medium text-purple-700 hover:bg-purple-200 dark:bg-purple-900/30 dark:text-purple-300 dark:hover:bg-purple-900/50"
                       aria-label="View artifacts"
                     >
                       <svg
@@ -725,7 +729,7 @@ const ConversationBubble = forwardRef<
                         : artifactCount > 1
                           ? `Artifacts (${artifactCount})`
                           : 'Artifact'}
-                    </button>
+                    </Button>
                   </div>
                 )}
                 {!isStreaming && (
@@ -735,8 +739,10 @@ const ConversationBubble = forwardRef<
                     </div>
                     {research && message && (
                       <div className="relative mr-2 block items-center justify-center">
-                        <button
+                        <Button
                           type="button"
+                          variant="ghost"
+                          size="icon-sm"
                           onClick={() => {
                             const blob = new Blob([message], {
                               type: 'text/markdown',
@@ -748,7 +754,7 @@ const ConversationBubble = forwardRef<
                             link.click();
                             URL.revokeObjectURL(url);
                           }}
-                          className="bg-card dark:hover:bg-accent hover:bg-muted flex cursor-pointer items-center justify-center rounded-full p-2 dark:bg-transparent"
+                          className="bg-card hover:bg-muted dark:hover:bg-accent h-auto w-auto cursor-pointer rounded-full p-2 dark:bg-transparent"
                           aria-label="Export as Markdown"
                           title="Export as Markdown"
                         >
@@ -764,7 +770,7 @@ const ConversationBubble = forwardRef<
                               d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"
                             />
                           </svg>
-                        </button>
+                        </Button>
                       </div>
                     )}
                     <div className="relative mr-2 block items-center justify-center">
@@ -773,9 +779,11 @@ const ConversationBubble = forwardRef<
                     {handleFeedback && (
                       <>
                         <div className="relative mr-2 flex items-center justify-center">
-                          <button
+                          <Button
                             type="button"
-                            className="hover:bg-accent flex cursor-pointer items-center justify-center rounded-full bg-transparent p-2"
+                            variant="ghost"
+                            size="icon-sm"
+                            className="h-auto w-auto cursor-pointer rounded-full bg-transparent p-2"
                             onClick={() => {
                               if (feedback === 'LIKE') {
                                 handleFeedback?.(null);
@@ -790,13 +798,15 @@ const ConversationBubble = forwardRef<
                             <Like
                               className={`${feedback === 'LIKE' ? 'stroke-primary fill-white dark:fill-transparent' : 'stroke-muted-foreground fill-none'}`}
                             ></Like>
-                          </button>
+                          </Button>
                         </div>
 
                         <div className="relative mr-2 flex items-center justify-center">
-                          <button
+                          <Button
                             type="button"
-                            className="hover:bg-accent flex cursor-pointer items-center justify-center rounded-full bg-transparent p-2"
+                            variant="ghost"
+                            size="icon-sm"
+                            className="h-auto w-auto cursor-pointer rounded-full bg-transparent p-2"
                             onClick={() => {
                               if (feedback === 'DISLIKE') {
                                 handleFeedback?.(null);
@@ -813,7 +823,7 @@ const ConversationBubble = forwardRef<
                             <Dislike
                               className={`${feedback === 'DISLIKE' ? 'stroke-destructive fill-white dark:fill-transparent' : 'stroke-muted-foreground fill-none'}`}
                             ></Dislike>
-                          </button>
+                          </Button>
                         </div>
                       </>
                     )}
@@ -824,14 +834,16 @@ const ConversationBubble = forwardRef<
           </div>
         )}
         {sources && (
-          <Sidebar
-            isOpen={isSidebarOpen}
-            toggleState={(state: boolean) => {
-              setIsSidebarOpen(state);
-            }}
-          >
-            <AllSources sources={sources} />
-          </Sidebar>
+          <Sheet open={isSidebarOpen} onOpenChange={setIsSidebarOpen}>
+            <SheetContent
+              side="right"
+              className="bg-card w-64 border-l border-[#9ca3af]/10 sm:w-80 sm:max-w-none"
+            >
+              <div className="flex h-full flex-col items-center gap-2 px-6 py-4 text-center">
+                <AllSources sources={sources} />
+              </div>
+            </SheetContent>
+          </Sheet>
         )}
       </div>
     );
@@ -874,9 +886,7 @@ function AllSources(sources: AllSourcesProps) {
               <p
                 title={source.title}
                 className={`ellipsis-text text-left text-sm font-semibold wrap-break-word ${
-                  isExternalSource
-                    ? 'group-hover/card:text-primary dark:group-hover/card:text-[#8C67D7]'
-                    : ''
+                  isExternalSource ? 'group-hover/card:text-primary' : ''
                 }`}
               >
                 {`${index + 1}. ${source.title}`}
@@ -941,10 +951,11 @@ function ToolCallApprovalBar({
           </span>
         </div>
         <div className="flex items-center gap-2">
-          <button
-            className={`rounded-full px-4 py-1 text-xs font-medium transition-colors ${
+          <Button
+            type="button"
+            className={`h-auto rounded-full px-4 py-1 text-xs font-medium ${
               comment
-                ? 'bg-muted text-muted-foreground cursor-default opacity-50'
+                ? 'bg-muted text-muted-foreground hover:bg-muted cursor-default opacity-50'
                 : 'bg-primary hover:bg-primary/90 text-white'
             }`}
             onClick={() => {
@@ -952,12 +963,14 @@ function ToolCallApprovalBar({
             }}
           >
             Approve
-          </button>
-          <button
-            className={`rounded-full border px-4 py-1 text-xs font-medium transition-colors ${
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            className={`h-auto rounded-full border bg-transparent px-4 py-1 text-xs font-medium shadow-none ${
               comment
-                ? 'border-destructive bg-destructive/10 text-destructive font-semibold'
-                : 'hover:bg-accent text-muted-foreground'
+                ? 'border-destructive bg-destructive/10 text-destructive hover:bg-destructive/10 font-semibold'
+                : 'hover:bg-accent text-muted-foreground dark:bg-transparent'
             }`}
             onClick={() => {
               if (expanded && comment) {
@@ -970,9 +983,12 @@ function ToolCallApprovalBar({
             }}
           >
             Deny
-          </button>
-          <button
-            className="text-muted-foreground hover:text-foreground flex h-6 w-6 items-center justify-center rounded-full transition-colors"
+          </Button>
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon-sm"
+            className="text-muted-foreground hover:text-foreground h-6 w-6 rounded-full"
             onClick={() => setExpanded(!expanded)}
             title="Details"
           >
@@ -981,7 +997,7 @@ function ToolCallApprovalBar({
               alt="expand"
               className={`h-3.5 w-3.5 transition-transform duration-200 dark:invert ${expanded ? 'rotate-180' : ''}`}
             />
-          </button>
+          </Button>
         </div>
       </div>
       {expanded && (
@@ -992,10 +1008,10 @@ function ToolCallApprovalBar({
           <pre className="bg-background dark:bg-background/50 mb-2 max-h-40 overflow-auto rounded-lg p-2 font-mono text-xs">
             {JSON.stringify(toolCall.arguments, null, 2)}
           </pre>
-          <input
+          <Input
             type="text"
             placeholder="Optional reason for denying..."
-            className="border-border bg-background w-full rounded-lg border px-3 py-1.5 text-sm"
+            className="bg-background h-8 rounded-lg px-3 py-1.5 text-sm md:text-sm"
             value={comment}
             onChange={(e) => setComment(e.target.value)}
             onKeyDown={(e) => {
@@ -1052,17 +1068,16 @@ function ToolCalls({
         <>
           <div className="my-2 flex flex-row items-center justify-center gap-3">
             <Avatar
+              src={Sources}
+              alt={'ToolCalls'}
               className="h-6.5 w-7.5 text-xl"
-              avatar={
-                <img
-                  src={Sources}
-                  alt={'ToolCalls'}
-                  className="h-full w-full object-fill"
-                />
-              }
+              imgClassName="h-full w-full object-fill"
             />
-            <button
-              className="flex flex-row items-center gap-2"
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="h-auto bg-transparent px-0 py-0 font-normal hover:bg-transparent"
               onClick={() => setIsToolCallsOpen(!isToolCallsOpen)}
             >
               <p className="text-base font-semibold">Tool Calls</p>
@@ -1071,7 +1086,7 @@ function ToolCalls({
                 alt="ChevronDown"
                 className={`h-4 w-4 transform transition-transform duration-200 dark:invert ${isToolCallsOpen ? 'rotate-180' : ''}`}
               />
-            </button>
+            </Button>
           </div>
           {isToolCallsOpen && (
             <div className="fade-in mr-5 ml-3 w-[90vw] md:w-[70vw] lg:w-full">
@@ -1091,83 +1106,74 @@ function ToolCalls({
                   return (
                     <Accordion
                       key={`tool-call-${index}`}
-                      title={`${toolCall.tool_name}  -  ${toolCall.action_name.substring(0, toolCall.action_name.lastIndexOf('_'))}`}
+                      type="single"
+                      collapsible
                       className="bg-muted dark:bg-answer-bubble w-full rounded-4xl"
-                      titleClassName="px-6 py-2 text-sm font-semibold"
                     >
-                      <div className="flex flex-col gap-1">
-                        <div className="border-border flex flex-col rounded-2xl border">
-                          <p className="dark:bg-background flex flex-row items-center justify-between rounded-t-2xl bg-black/10 px-2 py-1 text-sm font-semibold wrap-break-word">
-                            <span style={{ fontFamily: 'IBMPlexMono-Medium' }}>
-                              Arguments
-                            </span>{' '}
-                            <CopyButton
-                              textToCopy={JSON.stringify(
-                                toolCall.arguments,
-                                null,
-                                2,
+                      <AccordionItem value="tool-call">
+                        <AccordionTrigger className="px-6 py-2 text-sm font-semibold">
+                          {`${toolCall.tool_name}  -  ${toolCall.action_name.substring(0, toolCall.action_name.lastIndexOf('_'))}`}
+                        </AccordionTrigger>
+                        <AccordionContent>
+                          <div className="flex flex-col gap-1">
+                            <div className="border-border flex flex-col rounded-2xl border">
+                              <p className="dark:bg-background flex flex-row items-center justify-between rounded-t-2xl bg-black/10 px-2 py-1 font-mono text-sm font-semibold wrap-break-word">
+                                <span>Arguments</span>{' '}
+                                <CopyButton
+                                  textToCopy={JSON.stringify(
+                                    toolCall.arguments,
+                                    null,
+                                    2,
+                                  )}
+                                />
+                              </p>
+                              <p className="dark:bg-card rounded-b-2xl p-2 font-mono text-sm wrap-break-word">
+                                <span className="dark:text-muted-foreground leading-5.75 text-black">
+                                  {JSON.stringify(toolCall.arguments, null, 2)}
+                                </span>
+                              </p>
+                            </div>
+                            <div className="border-border flex flex-col rounded-2xl border">
+                              <p className="dark:bg-background flex flex-row items-center justify-between rounded-t-2xl bg-black/10 px-2 py-1 font-mono text-sm font-semibold wrap-break-word">
+                                <span>Response</span>{' '}
+                                <CopyButton
+                                  textToCopy={
+                                    toolCall.status === 'error'
+                                      ? toolCall.error || 'Unknown error'
+                                      : JSON.stringify(toolCall.result, null, 2)
+                                  }
+                                />
+                              </p>
+                              {toolCall.status === 'pending' && (
+                                <span className="dark:bg-card flex w-full items-center justify-center rounded-b-2xl p-2">
+                                  <Spinner size="small" />
+                                </span>
                               )}
-                            />
-                          </p>
-                          <p className="dark:bg-card rounded-b-2xl p-2 font-mono text-sm wrap-break-word">
-                            <span
-                              className="dark:text-muted-foreground leading-5.75 text-black"
-                              style={{ fontFamily: 'IBMPlexMono-Medium' }}
-                            >
-                              {JSON.stringify(toolCall.arguments, null, 2)}
-                            </span>
-                          </p>
-                        </div>
-                        <div className="border-border flex flex-col rounded-2xl border">
-                          <p className="dark:bg-background flex flex-row items-center justify-between rounded-t-2xl bg-black/10 px-2 py-1 text-sm font-semibold wrap-break-word">
-                            <span style={{ fontFamily: 'IBMPlexMono-Medium' }}>
-                              Response
-                            </span>{' '}
-                            <CopyButton
-                              textToCopy={
-                                toolCall.status === 'error'
-                                  ? toolCall.error || 'Unknown error'
-                                  : JSON.stringify(toolCall.result, null, 2)
-                              }
-                            />
-                          </p>
-                          {toolCall.status === 'pending' && (
-                            <span className="dark:bg-card flex w-full items-center justify-center rounded-b-2xl p-2">
-                              <Spinner size="small" />
-                            </span>
-                          )}
-                          {toolCall.status === 'completed' && (
-                            <p className="dark:bg-card rounded-b-2xl p-2 font-mono text-sm wrap-break-word">
-                              <span
-                                className="dark:text-muted-foreground leading-5.75 text-black"
-                                style={{ fontFamily: 'IBMPlexMono-Medium' }}
-                              >
-                                {JSON.stringify(toolCall.result, null, 2)}
-                              </span>
-                            </p>
-                          )}
-                          {toolCall.status === 'error' && (
-                            <p className="dark:bg-card rounded-b-2xl p-2 font-mono text-sm wrap-break-word">
-                              <span
-                                className="text-destructive leading-5.75"
-                                style={{ fontFamily: 'IBMPlexMono-Medium' }}
-                              >
-                                {toolCall.error}
-                              </span>
-                            </p>
-                          )}
-                          {toolCall.status === 'denied' && (
-                            <p className="dark:bg-card rounded-b-2xl p-2 font-mono text-sm wrap-break-word">
-                              <span
-                                className="text-muted-foreground leading-5.75"
-                                style={{ fontFamily: 'IBMPlexMono-Medium' }}
-                              >
-                                Denied by user
-                              </span>
-                            </p>
-                          )}
-                        </div>
-                      </div>
+                              {toolCall.status === 'completed' && (
+                                <p className="dark:bg-card rounded-b-2xl p-2 font-mono text-sm wrap-break-word">
+                                  <span className="dark:text-muted-foreground leading-5.75 text-black">
+                                    {JSON.stringify(toolCall.result, null, 2)}
+                                  </span>
+                                </p>
+                              )}
+                              {toolCall.status === 'error' && (
+                                <p className="dark:bg-card rounded-b-2xl p-2 font-mono text-sm wrap-break-word">
+                                  <span className="text-destructive leading-5.75">
+                                    {toolCall.error}
+                                  </span>
+                                </p>
+                              )}
+                              {toolCall.status === 'denied' && (
+                                <p className="dark:bg-card rounded-b-2xl p-2 font-mono text-sm wrap-break-word">
+                                  <span className="text-muted-foreground leading-5.75">
+                                    Denied by user
+                                  </span>
+                                </p>
+                              )}
+                            </div>
+                          </div>
+                        </AccordionContent>
+                      </AccordionItem>
                     </Accordion>
                   );
                 })}
@@ -1195,17 +1201,16 @@ function Thought({
     <div className="mb-4 flex w-full flex-col flex-wrap items-start self-start lg:flex-nowrap">
       <div className="my-2 flex flex-row items-center justify-center gap-3">
         <Avatar
+          src={Cloud}
+          alt={'Thought'}
           className="h-6.5 w-7.5 text-xl"
-          avatar={
-            <img
-              src={Cloud}
-              alt={'Thought'}
-              className="h-full w-full object-fill"
-            />
-          }
+          imgClassName="h-full w-full object-fill"
         />
-        <button
-          className="flex flex-row items-center gap-2"
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          className="h-auto bg-transparent px-0 py-0 font-normal hover:bg-transparent dark:hover:bg-transparent"
           onClick={() => setIsThoughtOpen(!isThoughtOpen)}
         >
           <p className="text-base font-semibold">
@@ -1216,11 +1221,11 @@ function Thought({
             alt="ChevronDown"
             className={`h-4 w-4 transform transition-transform duration-200 dark:invert ${isThoughtOpen ? 'rotate-180' : ''}`}
           />
-        </button>
+        </Button>
       </div>
       {isThoughtOpen && (
         <div className="fade-in mr-5 ml-2 max-w-[90vw] md:max-w-[70vw] lg:max-w-[50vw]">
-          <div className="bg-muted dark:bg-answer-bubble rounded-[28px] px-7 py-4.5">
+          <div className="bg-muted dark:bg-answer-bubble rounded-3xl px-7 py-4.5">
             <ReactMarkdown
               className="fade-in leading-normal wrap-break-word whitespace-pre-wrap"
               remarkPlugins={[remarkGfm, remarkMath]}
@@ -1232,8 +1237,8 @@ function Thought({
                   const language = match ? match[1] : '';
 
                   return match ? (
-                    <div className="group border-border relative overflow-hidden rounded-[14px] border">
-                      <div className="bg-platinum dark:bg-muted flex items-center justify-between px-2 py-1">
+                    <div className="group border-border relative overflow-hidden rounded-xl border">
+                      <div className="bg-muted flex items-center justify-between px-2 py-1">
                         <span className="text-foreground dark:text-foreground text-xs font-medium">
                           {language}
                         </span>
@@ -1256,7 +1261,7 @@ function Thought({
                       </SyntaxHighlighter>
                     </div>
                   ) : (
-                    <code className="dark:bg-accent dark:text-foreground rounded-[6px] bg-gray-200 px-2 py-1 text-xs font-normal whitespace-pre-line">
+                    <code className="dark:bg-accent dark:text-foreground rounded-md bg-gray-200 px-2 py-1 text-xs font-normal whitespace-pre-line">
                       {children}
                     </code>
                   );
diff --git a/frontend/src/conversation/ConversationMessages.tsx b/frontend/src/conversation/ConversationMessages.tsx
index 953d88cb..66eaf064 100644
--- a/frontend/src/conversation/ConversationMessages.tsx
+++ b/frontend/src/conversation/ConversationMessages.tsx
@@ -10,9 +10,9 @@ import { useTranslation } from 'react-i18next';
 
 import ArrowDown from '../assets/arrow-down.svg';
 import DocsGPT3 from '../assets/cute_docsgpt3.svg';
-import RetryIcon from '../components/RetryIcon';
+import Retry from '../assets/retry.svg?react';
+import { Button } from '../components/ui/button';
 import Hero from '../Hero';
-import { useDarkTheme } from '../hooks';
 import ConversationBubble from './ConversationBubble';
 import { FEEDBACK, Query, Status } from './conversationModels';
 
@@ -61,7 +61,6 @@ export default function ConversationMessages({
   isSplitView = false,
   agentId,
 }: ConversationMessagesProps) {
-  const [isDarkTheme] = useDarkTheme();
   const { t } = useTranslation();
 
   const conversationRef = useRef<HTMLDivElement>(null);
@@ -237,14 +236,6 @@ export default function ConversationMessages({
     };
   }, [handleScroll]);
 
-  const retryIconProps = {
-    width: 12,
-    height: 12,
-    fill: isDarkTheme ? 'rgb(236 236 241)' : 'rgb(107 114 120)',
-    stroke: isDarkTheme ? 'rgb(236 236 241)' : 'rgb(107 114 120)',
-    strokeWidth: 10,
-  };
-
   const renderResponseView = (query: Query, index: number) => {
     const isLastMessage = index === queries.length - 1;
     const bubbleMargin = isLastMessage
@@ -255,8 +246,10 @@ export default function ConversationMessages({
     // tool_calls and would otherwise fall into the answer branch.
     if (query.error) {
       const retryButton = (
-        <button
-          className="dark:text-foreground flex items-center justify-center gap-3 self-center rounded-full px-5 py-3 text-lg text-gray-500 transition-colors delay-100 hover:border-gray-500 disabled:cursor-not-allowed"
+        <Button
+          type="button"
+          variant="ghost"
+          className="dark:text-foreground h-auto self-center rounded-full px-5 py-3 text-lg text-gray-500 delay-100 hover:border-gray-500"
           disabled={status === 'loading'}
           onClick={() => {
             const questionToRetry = queries[index].prompt;
@@ -268,8 +261,12 @@ export default function ConversationMessages({
           }}
           aria-label={t('Retry') || 'Retry'}
         >
-          <RetryIcon {...retryIconProps} />
-        </button>
+          <Retry
+            width={12}
+            height={12}
+            className="text-gray-500 dark:text-[#ECECF1]"
+          />
+        </Button>
       );
       return (
         <ConversationBubble
@@ -333,7 +330,7 @@ export default function ConversationMessages({
                 {t('conversation.answer')}
               </p>
             </div>
-            <div className="bg-gray-1000 dark:bg-gun-metal mr-5 flex rounded-3xl px-6 py-5">
+            <div className="bg-muted mr-5 flex rounded-3xl px-6 py-5">
               <div className="thinking-dots">
                 <span></span>
                 <span></span>
@@ -357,14 +354,17 @@ export default function ConversationMessages({
       className="flex h-full w-full justify-center overflow-y-auto will-change-scroll sm:pt-6 lg:pt-12"
     >
       {queries.length > 0 && (
-        <button
+        <Button
+          type="button"
+          variant="outline"
+          size="icon"
           onClick={() => {
             userInterruptedRef.current = false;
             setInterrupted(false);
             scrollConversationToBottom();
           }}
           aria-label={t('Scroll to bottom') || 'Scroll to bottom'}
-          className={`border-border bg-card fixed bottom-40 left-1/2 z-10 flex h-7 w-7 -translate-x-1/2 items-center justify-center rounded-full border transition-all duration-300 ease-in-out md:right-14 md:left-auto md:h-9 md:w-9 md:translate-x-0 ${
+          className={`bg-card fixed bottom-40 left-1/2 z-10 h-7 w-7 -translate-x-1/2 rounded-full transition-all duration-300 ease-in-out md:right-14 md:left-auto md:h-9 md:w-9 md:translate-x-0 ${
             scrollButtonVisible
               ? 'pointer-events-auto scale-100 opacity-100'
               : 'pointer-events-none scale-75 opacity-0'
@@ -375,7 +375,7 @@ export default function ConversationMessages({
             alt="arrow down"
             className="h-4 w-4 opacity-50 filter md:h-5 md:w-5 dark:invert"
           />
-        </button>
+        </Button>
       )}
 
       <div
diff --git a/frontend/src/conversation/ConversationTile.tsx b/frontend/src/conversation/ConversationTile.tsx
index 6b9c9a1f..230d0b6f 100644
--- a/frontend/src/conversation/ConversationTile.tsx
+++ b/frontend/src/conversation/ConversationTile.tsx
@@ -1,13 +1,13 @@
+import { X } from 'lucide-react';
 import {
   SyntheticEvent,
+  useCallback,
   useEffect,
   useRef,
   useState,
-  useCallback,
 } from 'react';
 import { useSelector } from 'react-redux';
 import Edit from '../assets/edit.svg';
-import Exit from '../assets/exit.svg';
 import { useDarkTheme } from '../hooks';
 import ConfirmationModal from '../modals/ConfirmationModal';
 import CheckMark2 from '../assets/checkMark2.svg';
@@ -18,8 +18,14 @@ import { selectConversationId } from '../preferences/preferenceSlice';
 import { ActiveState } from '../models/misc';
 import { ShareConversationModal } from '../modals/ShareConversationModal';
 import { useTranslation } from 'react-i18next';
-import ContextMenu from '../components/ContextMenu';
-import { MenuOption } from '../components/ContextMenu';
+import { Button } from '../components/ui/button';
+import { Input } from '../components/ui/input';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '../components/ui/dropdown-menu';
 import { useOutsideAlerter } from '../hooks';
 
 interface ConversationProps {
@@ -51,7 +57,6 @@ export default function ConversationTile({
   const [isHovered, setIsHovered] = useState(false);
   const [deleteModalState, setDeleteModalState] =
     useState<ActiveState>('INACTIVE');
-  const menuRef = useRef<HTMLDivElement>(null);
   const { t } = useTranslation();
   useEffect(() => {
     setConversationsName(conversation.name);
@@ -75,19 +80,6 @@ export default function ConversationTile({
     }
   }
 
-  const handleClickOutside = (event: MouseEvent) => {
-    if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
-      setOpen(false);
-    }
-  };
-
-  useEffect(() => {
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, []);
-
   const preventScroll = useCallback((event: WheelEvent | TouchEvent) => {
     event.preventDefault();
   }, []);
@@ -134,7 +126,16 @@ export default function ConversationTile({
     }
   };
 
-  const menuOptions: MenuOption[] = [
+  type ConversationMenuOption = {
+    icon: string;
+    label: string;
+    onClick: (event: SyntheticEvent) => void;
+    variant: 'default' | 'destructive';
+    iconWidth?: number;
+    iconHeight?: number;
+  };
+
+  const menuOptions: ConversationMenuOption[] = [
     {
       icon: Share,
       label: t('convTile.share'),
@@ -143,7 +144,7 @@ export default function ConversationTile({
         setShareModalState(true);
         setOpen(false);
       },
-      variant: 'primary',
+      variant: 'default',
       iconWidth: 14,
       iconHeight: 14,
     },
@@ -151,7 +152,7 @@ export default function ConversationTile({
       icon: Edit,
       label: t('convTile.rename'),
       onClick: handleEditConversation,
-      variant: 'primary',
+      variant: 'default',
     },
     {
       icon: Trash,
@@ -163,7 +164,7 @@ export default function ConversationTile({
       },
       iconWidth: 18,
       iconHeight: 18,
-      variant: 'danger',
+      variant: 'destructive',
     },
   ];
 
@@ -203,10 +204,10 @@ export default function ConversationTile({
       >
         <div className={`flex w-10/12 gap-4`}>
           {isEdit ? (
-            <input
+            <Input
               autoFocus
               type="text"
-              className="h-6 w-full rounded-2xl bg-transparent px-1 text-sm leading-6 font-normal outline-none"
+              className="h-6 w-full rounded-2xl border-0 px-1 text-sm leading-6 font-normal shadow-none focus-visible:ring-0 md:text-sm dark:border-0"
               value={conversationName}
               onChange={(e) => setConversationsName(e.target.value)}
               onKeyDown={handleRenameKeyDown}
@@ -218,10 +219,7 @@ export default function ConversationTile({
           )}
         </div>
         {(conversationId === conversation.id || isHovered || isOpen) && (
-          <div
-            className="dark:text-muted-foreground flex text-white"
-            ref={menuRef}
-          >
+          <div className="dark:text-muted-foreground flex text-white">
             {isEdit ? (
               <div className="flex gap-1">
                 <img
@@ -237,36 +235,57 @@ export default function ConversationTile({
                     });
                   }}
                 />
-                <img
-                  src={Exit}
-                  alt="Exit"
-                  className={`mt-px mr-4 h-3 w-3 cursor-pointer filter hover:opacity-50 dark:invert`}
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon-sm"
+                  aria-label="Exit"
                   id={`img-${conversation.id}`}
+                  className="mt-px mr-4 h-auto w-auto bg-transparent p-0 hover:bg-transparent hover:opacity-50"
                   onClick={(event: SyntheticEvent) => {
                     event.stopPropagation();
                     onClear();
                   }}
-                />
+                >
+                  <X className="h-3 w-3" />
+                </Button>
               </div>
             ) : (
-              <button
-                onClick={(event: SyntheticEvent) => {
-                  event.stopPropagation();
-                  setOpen(!isOpen);
-                }}
-                className="hover:bg-accent dark:hover:bg-accent mr-2 flex h-6 w-6 items-center justify-center rounded-full transition-colors duration-200"
-              >
-                <img src={threeDots} width={8} alt="menu" />
-              </button>
+              <DropdownMenu open={isOpen} onOpenChange={setOpen}>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon-sm"
+                    onClick={(event: SyntheticEvent) => {
+                      event.stopPropagation();
+                    }}
+                    className="mr-2 h-6 w-6 rounded-full"
+                  >
+                    <img src={threeDots} width={8} alt="menu" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" className="min-w-[144px]">
+                  {menuOptions.map((option, index) => (
+                    <DropdownMenuItem
+                      key={index}
+                      variant={option.variant}
+                      onSelect={(event) => {
+                        option.onClick(event as unknown as SyntheticEvent);
+                      }}
+                    >
+                      <img
+                        src={option.icon}
+                        alt=""
+                        width={option.iconWidth ?? 16}
+                        height={option.iconHeight ?? 16}
+                      />
+                      <span>{option.label}</span>
+                    </DropdownMenuItem>
+                  ))}
+                </DropdownMenuContent>
+              </DropdownMenu>
             )}
-            <ContextMenu
-              isOpen={isOpen}
-              setIsOpen={setOpen}
-              options={menuOptions}
-              anchorRef={tileRef}
-              position="bottom-right"
-              offset={{ x: 1, y: 8 }}
-            />
           </div>
         )}
       </div>
diff --git a/frontend/src/conversation/ResearchProgress.tsx b/frontend/src/conversation/ResearchProgress.tsx
index a73594bd..1d86832d 100644
--- a/frontend/src/conversation/ResearchProgress.tsx
+++ b/frontend/src/conversation/ResearchProgress.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import ResearchIcon from '../assets/research.svg';
-import Avatar from '../components/Avatar';
+import { Avatar } from '../components/ui/avatar';
+import { Button } from '../components/ui/button';
 import { ResearchState } from './conversationModels';
 
 const SmallCheck = () => (
@@ -100,17 +101,16 @@ export default function ResearchProgress({
       {/* Header row — matches Reasoning / Sources pattern */}
       <div className="my-2 flex flex-row items-center gap-3">
         <Avatar
+          src={ResearchIcon}
+          alt="Research"
           className="h-[26px] w-[30px] text-xl"
-          avatar={
-            <img
-              src={ResearchIcon}
-              alt="Research"
-              className="h-full w-full object-fill"
-            />
-          }
+          imgClassName="h-full w-full object-fill"
         />
-        <button
-          className="flex flex-row items-center gap-2"
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          className="h-auto bg-transparent px-0 py-0 font-normal hover:bg-transparent dark:hover:bg-transparent"
           onClick={() => setIsExpanded(!isExpanded)}
         >
           <p className="text-sm font-semibold">
@@ -129,7 +129,7 @@ export default function ResearchProgress({
               d="M19 9l-7 7-7-7"
             />
           </svg>
-        </button>
+        </Button>
         {status && <StatusText status={status} elapsed={elapsed_seconds} />}
       </div>
 
diff --git a/frontend/src/conversation/SharedConversation.tsx b/frontend/src/conversation/SharedConversation.tsx
index 556f18f7..133c51ea 100644
--- a/frontend/src/conversation/SharedConversation.tsx
+++ b/frontend/src/conversation/SharedConversation.tsx
@@ -5,6 +5,7 @@ import { useNavigate, useParams } from 'react-router-dom';
 
 import conversationService from '../api/services/conversationService';
 import MessageInput from '../components/MessageInput';
+import { Button } from '../components/ui/button';
 import { selectToken } from '../preferences/preferenceSlice';
 import { AppDispatch } from '../store';
 import { formatDate } from '../utils/dateTimeUtils';
@@ -139,17 +140,17 @@ export const SharedConversation = () => {
         twitterDescription="Shared conversations with DocsGPT"
       />
       <div className="bg-background flex h-full flex-col items-center justify-between gap-2 overflow-y-hidden">
-        <div className="dark:border-b-silver w-full max-w-[1200px] border-b p-2 md:w-9/12 lg:w-8/12 xl:w-8/12 2xl:w-6/12">
-          <h1 className="font-semi-bold text-foreground dark:text-foreground text-4xl">
+        <div className="border-b-border w-full max-w-[1200px] border-b p-2 md:w-9/12 lg:w-8/12 xl:w-8/12 2xl:w-6/12">
+          <h1 className="text-foreground dark:text-foreground text-4xl font-semibold">
             {title}
           </h1>
-          <h2 className="font-semi-bold text-foreground dark:text-foreground text-base">
+          <h2 className="text-foreground dark:text-foreground text-base font-semibold">
             {t('sharedConv.subtitle')}{' '}
             <a href="/" className="text-[#007DFF]">
               DocsGPT
             </a>
           </h2>
-          <h2 className="font-semi-bold text-foreground dark:text-foreground text-base">
+          <h2 className="text-foreground dark:text-foreground text-base font-semibold">
             {date}
           </h2>
         </div>
@@ -172,12 +173,13 @@ export const SharedConversation = () => {
               />
             </div>
           ) : (
-            <button
+            <Button
+              type="button"
               onClick={() => navigate('/')}
-              className="bg-primary hover:bg-primary/90 mb-14 w-fit rounded-full px-5 py-3 text-white shadow-xl transition-colors duration-200 sm:mb-0"
+              className="mb-14 h-auto w-fit rounded-full px-5 py-3 text-white shadow-xl sm:mb-0"
             >
               {t('sharedConv.button')}
-            </button>
+            </Button>
           )}
 
           <p className="text-muted-foreground hidden w-screen self-center bg-transparent py-2 text-center text-xs md:inline md:w-full">
diff --git a/frontend/src/index.css b/frontend/src/index.css
index a2b64818..6228d11f 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -9,68 +9,11 @@ layer(base);
 
 @theme {
   --font-roboto: Roboto, sans-serif;
-
-  --color-eerie-black: #212121;
-  --color-black-1000: #343541;
-  --color-jet: #343541;
-  --color-gray-alpha: rgba(0, 0, 0, 0.64);
-  --color-gray-1000: #f6f6f6;
-  --color-gray-2000: rgba(0, 0, 0, 0.5);
-  --color-gray-3000: rgba(243, 243, 243, 1);
-  --color-gray-5000: #bbbbbb;
-  --color-gray-6000: #757575;
-  --color-red-1000: rgb(254, 202, 202);
-  --color-blue-1000: #7d54d1;
-  --color-blue-2000: #002b49;
-  --color-blue-3000: #4b02e2;
-  --color-purple-30: #7d54d1;
-  --color-purple-3000: rgb(230, 222, 247);
-  --color-blue-4000: rgba(0, 125, 255, 0.36);
-  --color-blue-5000: rgba(0, 125, 255);
-  --color-green-2000: #0fff50;
-  --color-light-gray: #edeef0;
-  --color-just-black: #00000;
-  --color-purple-taupe: #464152;
-  --color-dove-gray: #6c6c6c;
-  --color-silver: #c4c4c4;
-  --color-rainy-gray: #a4a4a4;
-  --color-raisin-black: #222327;
-  --color-chinese-black: #161616;
-  --color-chinese-silver: #cdcdcd;
-  --color-dark-charcoal: #2f3036;
-  --color-bright-gray: #ebebeb;
-  --color-outer-space: #444654;
-  --color-gun-metal: #2e303e;
-  --color-sonic-silver: #747474;
-  --color-soap: #d8ccf1;
-  --color-independence: #54546d;
-  --color-philippine-yellow: #ffc700;
-  --color-chinese-white: #e0e0e0;
-  --color-dark-gray: #aaaaaa;
-  --color-dim-gray: #6a6a6a;
-  --color-cultured: #f4f4f4;
-  --color-charleston-green: #2b2c31;
-  --color-charleston-green-2: #26272e;
-  --color-charleston-green-3: #26272a;
-  --color-grey: #7e7e7e;
-  --color-platinum: #e6e6e6;
-  --color-eerie-black-2: #191919;
-  --color-light-silver: #d9d9d9;
-  --color-carbon: #2e2e2e;
-  --color-onyx: #35363b;
-  --color-royal-purple: #6c4ab0;
-  --color-chinese-black-2: #0f1419;
-  --color-gainsboro: #d9dcde;
-  --color-onyx-2: #35383c;
-  --color-philippine-grey: #929292;
-  --color-charcoal-grey: #53545d;
-  --color-north-texas-green: #0c9d35;
-  --color-medium-purple: #8d66dd;
-  --color-slate-blue: #6f5fca;
-  --color-light-gainsboro: #d7d7d7;
-  --color-raisin-black-light: #18181b;
-  --color-sonic-silver-light: #7f7f82;
-  --color-violets-are-blue: #976af3;
+  --font-mono:
+    'IBMPlexMono-Medium', ui-monospace, SFMono-Regular, Menlo, Consolas,
+    monospace;
+  --shadow-modal: 0px 4px 40px -3px #0000001a;
+  --shadow-toast: 0px 24px 48px 0px #00000029;
 }
 
 /*
@@ -745,7 +688,7 @@ Avoid over-scrolling in mobile browsers
   }
 
   .logs-table {
-    font-family: 'IBMPlexMono-Medium', system-ui;
+    font-family: var(--font-mono);
   }
 
   .fade-in {
@@ -814,6 +757,12 @@ Avoid over-scrolling in mobile browsers
       transform: translateY(0);
     }
   }
+
+  @keyframes spinner-rotate {
+    100% {
+      transform: rotate(1turn);
+    }
+  }
 }
 
 /*
diff --git a/frontend/src/modals/AddActionModal.tsx b/frontend/src/modals/AddActionModal.tsx
index b6cfbeb9..4f19191b 100644
--- a/frontend/src/modals/AddActionModal.tsx
+++ b/frontend/src/modals/AddActionModal.tsx
@@ -1,9 +1,10 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import Input from '../components/Input';
+import { Button } from '../components/ui/button';
+import { Input } from '../components/ui/input';
+import { Modal } from '../components/ui/modal';
 import { ActiveState } from '../models/misc';
-import WrapperModal from './WrapperModal';
 
 type AddActionModalProps = {
   modalState: ActiveState;
@@ -36,56 +37,62 @@ export default function AddActionModal({
     setModalState('INACTIVE');
   };
 
-  if (modalState !== 'ACTIVE') return null;
+  const handleCancel = () => {
+    setFunctionNameError(false);
+    setModalState('INACTIVE');
+    setActionName('');
+  };
+
   return (
-    <WrapperModal close={() => setModalState('INACTIVE')} className="sm:w-lg">
-      <div>
-        <h2 className="text-foreground dark:text-foreground px-3 text-xl font-semibold">
-          {t('modals.addAction.title')}
-        </h2>
-        <div className="relative mt-6 px-3">
-          <Input
-            type="text"
-            value={actionName}
-            onChange={(e) => {
-              const value = e.target.value;
-              setActionName(value);
-              setFunctionNameError(!isValidFunctionName(value));
-            }}
-            borderVariant="thin"
-            labelBgClassName="bg-card"
-            placeholder={t('modals.addAction.actionNamePlaceholder')}
-            required={true}
-          />
-          <p
-            className={`mt-2 ml-1 text-xs italic ${
-              functionNameError ? 'text-red-500' : 'text-muted-foreground'
-            }`}
-          >
-            {functionNameError
-              ? t('modals.addAction.invalidFormat')
-              : t('modals.addAction.formatHelp')}
-          </p>
-        </div>
-        <div className="mt-3 flex flex-row-reverse gap-1 px-3">
-          <button
-            onClick={handleAddAction}
-            className="bg-primary hover:bg-primary/90 rounded-3xl px-5 py-2 text-sm text-white transition-all"
-          >
-            {t('modals.addAction.addButton')}
-          </button>
-          <button
-            onClick={() => {
-              setFunctionNameError(false);
-              setModalState('INACTIVE');
-              setActionName('');
-            }}
-            className="dark:text-foreground hover:bg-accent dark:hover:bg-accent cursor-pointer rounded-3xl px-5 py-2 text-sm font-medium"
+    <Modal
+      open={modalState === 'ACTIVE'}
+      onOpenChange={(open) => {
+        if (!open) handleCancel();
+      }}
+      title={t('modals.addAction.title')}
+      footer={
+        <>
+          <Button
+            type="button"
+            variant="ghost"
+            onClick={handleCancel}
+            className="rounded-3xl px-5"
           >
             {t('modals.configTool.closeButton')}
-          </button>
-        </div>
+          </Button>
+          <Button
+            type="button"
+            onClick={handleAddAction}
+            className="rounded-3xl px-5"
+          >
+            {t('modals.addAction.addButton')}
+          </Button>
+        </>
+      }
+    >
+      <div className="relative">
+        <Input
+          type="text"
+          value={actionName}
+          onChange={(e) => {
+            const value = e.target.value;
+            setActionName(value);
+            setFunctionNameError(!isValidFunctionName(value));
+          }}
+          labelBgClassName="bg-card"
+          label={t('modals.addAction.actionNamePlaceholder')}
+          required={true}
+        />
+        <p
+          className={`mt-2 ml-1 text-xs italic ${
+            functionNameError ? 'text-red-500' : 'text-muted-foreground'
+          }`}
+        >
+          {functionNameError
+            ? t('modals.addAction.invalidFormat')
+            : t('modals.addAction.formatHelp')}
+        </p>
       </div>
-    </WrapperModal>
+    </Modal>
   );
 }
diff --git a/frontend/src/modals/AddToolModal.tsx b/frontend/src/modals/AddToolModal.tsx
index 6389b4d2..fa340694 100644
--- a/frontend/src/modals/AddToolModal.tsx
+++ b/frontend/src/modals/AddToolModal.tsx
@@ -1,16 +1,16 @@
-import React, { useRef } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
 import userService from '../api/services/userService';
 import SkeletonLoader from '../components/SkeletonLoader';
-import { useLoaderState, useOutsideAlerter } from '../hooks';
+import { Modal } from '../components/ui/modal';
+import { useLoaderState } from '../hooks';
 import { ActiveState } from '../models/misc';
 import { selectToken } from '../preferences/preferenceSlice';
 import ConfigToolModal from './ConfigToolModal';
 import MCPServerModal from './MCPServerModal';
 import { AvailableToolType } from './types';
-import WrapperComponent from './WrapperModal';
 
 export default function AddToolModal({
   message,
@@ -27,7 +27,6 @@ export default function AddToolModal({
 }) {
   const { t } = useTranslation();
   const token = useSelector(selectToken);
-  const modalRef = useRef<HTMLDivElement>(null);
   const [availableTools, setAvailableTools] = React.useState<
     AvailableToolType[]
   >([]);
@@ -39,12 +38,6 @@ export default function AddToolModal({
     React.useState<ActiveState>('INACTIVE');
   const [loading, setLoading] = useLoaderState(false);
 
-  useOutsideAlerter(modalRef, () => {
-    if (modalState === 'ACTIVE') {
-      setModalState('INACTIVE');
-    }
-  }, [modalState]);
-
   const getAvailableTools = () => {
     setLoading(true);
     userService
@@ -109,69 +102,67 @@ export default function AddToolModal({
 
   return (
     <>
-      {modalState === 'ACTIVE' && (
-        <WrapperComponent
-          close={() => setModalState('INACTIVE')}
-          className="h-[85vh] w-[90vw] max-w-[950px] md:w-[85vw] lg:w-[75vw]"
-        >
-          <div className="flex h-full flex-col">
-            <div>
-              <h2 className="text-foreground dark:text-foreground px-3 text-xl font-semibold">
-                {t('settings.tools.selectToolSetup')}
-              </h2>
-              <div className="mt-5 h-[73vh] overflow-auto px-3 py-px">
-                {loading ? (
-                  <div className="grid auto-rows-fr grid-cols-1 gap-4 pb-2 sm:grid-cols-2 lg:grid-cols-3">
-                    <SkeletonLoader component="addToolCards" count={6} />
-                  </div>
-                ) : (
-                  <div className="grid auto-rows-fr grid-cols-1 gap-4 pb-2 sm:grid-cols-2 lg:grid-cols-3">
-                    {availableTools.map((tool, index) => (
-                      <div
-                        role="button"
-                        tabIndex={0}
-                        key={index}
-                        className="border-border bg-card hover:bg-accent hover:border-border/80 flex h-52 w-full cursor-pointer flex-col justify-between rounded-2xl border p-6"
-                        onClick={() => {
+      <Modal
+        open={modalState === 'ACTIVE'}
+        onOpenChange={(o) => !o && setModalState('INACTIVE')}
+        title={t('settings.tools.selectToolSetup')}
+        size="xl"
+        className="h-[85vh] w-[90vw] sm:max-w-[950px] md:w-[85vw] lg:w-[75vw]"
+      >
+        <div className="flex h-full flex-col">
+          <div>
+            <div className="mt-5 h-[73vh] overflow-auto px-3 py-px">
+              {loading ? (
+                <div className="grid auto-rows-fr grid-cols-1 gap-4 pb-2 sm:grid-cols-2 lg:grid-cols-3">
+                  <SkeletonLoader component="addToolCards" count={6} />
+                </div>
+              ) : (
+                <div className="grid auto-rows-fr grid-cols-1 gap-4 pb-2 sm:grid-cols-2 lg:grid-cols-3">
+                  {availableTools.map((tool, index) => (
+                    <div
+                      role="button"
+                      tabIndex={0}
+                      key={index}
+                      className="border-border bg-card hover:bg-accent hover:border-border/80 flex h-52 w-full cursor-pointer flex-col justify-between rounded-2xl border p-6"
+                      onClick={() => {
+                        setSelectedTool(tool);
+                        handleAddTool(tool);
+                      }}
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter' || e.key === ' ') {
                           setSelectedTool(tool);
                           handleAddTool(tool);
-                        }}
-                        onKeyDown={(e) => {
-                          if (e.key === 'Enter' || e.key === ' ') {
-                            setSelectedTool(tool);
-                            handleAddTool(tool);
-                          }
-                        }}
-                      >
-                        <div className="w-full">
-                          <div className="flex w-full items-center justify-between px-1">
-                            <img
-                              src={`/toolIcons/tool_${tool.name}.svg`}
-                              className="h-6 w-6"
-                              alt={`${tool.name} icon`}
-                            />
-                          </div>
-                          <div className="mt-[9px]">
-                            <p
-                              title={tool.displayName}
-                              className="text-foreground dark:text-foreground truncate px-1 text-[13px] leading-relaxed font-semibold capitalize"
-                            >
-                              {tool.displayName}
-                            </p>
-                            <p className="text-muted-foreground mt-1 h-24 overflow-auto px-1 text-[12px] leading-relaxed">
-                              {tool.description}
-                            </p>
-                          </div>
+                        }
+                      }}
+                    >
+                      <div className="w-full">
+                        <div className="flex w-full items-center justify-between px-1">
+                          <img
+                            src={`/toolIcons/tool_${tool.name}.svg`}
+                            className="h-6 w-6"
+                            alt={`${tool.name} icon`}
+                          />
+                        </div>
+                        <div className="mt-[9px]">
+                          <p
+                            title={tool.displayName}
+                            className="text-foreground dark:text-foreground truncate px-1 text-sm leading-relaxed font-semibold capitalize"
+                          >
+                            {tool.displayName}
+                          </p>
+                          <p className="text-muted-foreground mt-1 h-24 overflow-auto px-1 text-xs leading-relaxed">
+                            {tool.description}
+                          </p>
                         </div>
                       </div>
-                    ))}
-                  </div>
-                )}
-              </div>
+                    </div>
+                  ))}
+                </div>
+              )}
             </div>
           </div>
-        </WrapperComponent>
-      )}
+        </div>
+      </Modal>
       <ConfigToolModal
         modalState={configModalState}
         setModalState={setConfigModalState}
diff --git a/frontend/src/modals/AgentDetailsModal.tsx b/frontend/src/modals/AgentDetailsModal.tsx
index 0eeeda36..5b95c950 100644
--- a/frontend/src/modals/AgentDetailsModal.tsx
+++ b/frontend/src/modals/AgentDetailsModal.tsx
@@ -7,9 +7,10 @@ import userService from '../api/services/userService';
 import ExternalLinkIcon from '../assets/external-link.svg';
 import CopyButton from '../components/CopyButton';
 import Spinner from '../components/Spinner';
+import { Button } from '../components/ui/button';
+import { Modal } from '../components/ui/modal';
 import { ActiveState } from '../models/misc';
 import { selectToken } from '../preferences/preferenceSlice';
-import WrapperModal from './WrapperModal';
 
 const baseURL = import.meta.env.VITE_BASE_URL;
 
@@ -79,18 +80,14 @@ export default function AgentDetailsModal({
     setApiKey(agent.key ?? null);
   }, [agent]);
 
-  if (modalState !== 'ACTIVE') return null;
   return (
-    <WrapperModal
-      className="sm:w-lg"
-      close={() => {
-        setModalState('INACTIVE');
-      }}
+    <Modal
+      open={modalState === 'ACTIVE'}
+      onOpenChange={(o) => !o && setModalState('INACTIVE')}
+      title={t('modals.agentDetails.title')}
+      size="md"
     >
       <div>
-        <h2 className="text-foreground dark:text-foreground text-xl font-semibold">
-          {t('modals.agentDetails.title')}
-        </h2>
         <div className="mt-8 flex flex-col gap-6">
           <div className="flex flex-col gap-3">
             <div className="flex items-center gap-2">
@@ -100,7 +97,7 @@ export default function AgentDetailsModal({
             </div>
             {sharedToken ? (
               <div className="flex flex-col gap-2">
-                <p className="font-roboto dark:text-foreground inline text-[14px] leading-normal font-medium break-all text-gray-700">
+                <p className="font-roboto dark:text-foreground inline text-sm leading-normal font-medium break-all text-gray-700">
                   <a
                     href={`${baseURL}/shared/agent/${sharedToken}`}
                     target="_blank"
@@ -131,16 +128,18 @@ export default function AgentDetailsModal({
                 </a>
               </div>
             ) : (
-              <button
-                className="border-primary text-primary hover:bg-primary/90 flex w-28 items-center justify-center rounded-3xl border border-solid px-5 py-2 text-sm font-medium transition-colors hover:text-white"
+              <Button
+                type="button"
+                variant="outline"
                 onClick={handleGeneratePublicLink}
+                className="border-primary text-primary hover:bg-primary/90 w-28 rounded-3xl border-solid px-5 hover:text-white"
               >
                 {loadingStates.publicLink ? (
-                  <Spinner size="small" color="#976af3" />
+                  <Spinner size="small" />
                 ) : (
                   t('modals.agentDetails.generate')
                 )}
-              </button>
+              </Button>
             )}
           </div>
           <div className="flex flex-col gap-3">
@@ -150,7 +149,7 @@ export default function AgentDetailsModal({
             {apiKey ? (
               <div className="flex flex-col gap-2">
                 <div className="flex items-center gap-2">
-                  <div className="font-roboto dark:text-foreground text-[14px] leading-normal font-medium break-all text-gray-700">
+                  <div className="font-roboto dark:text-foreground text-sm leading-normal font-medium break-all text-gray-700">
                     {apiKey}
                     {!apiKey.includes('...') && (
                       <CopyButton
@@ -163,7 +162,7 @@ export default function AgentDetailsModal({
                   {!apiKey.includes('...') && (
                     <a
                       href={`https://widget.docsgpt.cloud/?api-key=${apiKey}`}
-                      className="group border-primary text-primary hover:bg-primary/90 ml-8 flex w-[101px] items-center justify-center gap-1 rounded-[62px] border py-1.5 text-sm font-medium transition-colors hover:text-white"
+                      className="group border-primary text-primary hover:bg-primary/90 ml-8 flex w-[101px] items-center justify-center gap-1 rounded-full border py-1.5 text-sm font-medium transition-colors hover:text-white"
                       target="_blank"
                       rel="noopener noreferrer"
                     >
@@ -178,9 +177,13 @@ export default function AgentDetailsModal({
                 </div>
               </div>
             ) : (
-              <button className="border-primary text-primary hover:bg-primary/90 w-28 rounded-3xl border border-solid px-5 py-2 text-sm font-medium transition-colors hover:text-white">
+              <Button
+                type="button"
+                variant="outline"
+                className="border-primary text-primary hover:bg-primary/90 w-28 rounded-3xl border-solid px-5 hover:text-white"
+              >
                 {t('modals.agentDetails.generate')}
-              </button>
+              </Button>
             )}
           </div>
           <div className="flex flex-col gap-3">
@@ -191,7 +194,7 @@ export default function AgentDetailsModal({
             </div>
             {webhookUrl ? (
               <div className="flex flex-col gap-2">
-                <p className="font-roboto dark:text-foreground text-[14px] leading-normal font-medium break-all text-gray-700">
+                <p className="font-roboto dark:text-foreground text-sm leading-normal font-medium break-all text-gray-700">
                   <a href={webhookUrl} target="_blank" rel="noreferrer">
                     {webhookUrl}
                   </a>
@@ -218,20 +221,22 @@ export default function AgentDetailsModal({
                 </a>
               </div>
             ) : (
-              <button
-                className="border-primary text-primary hover:bg-primary/90 flex w-28 items-center justify-center rounded-3xl border border-solid px-5 py-2 text-sm font-medium transition-colors hover:text-white"
+              <Button
+                type="button"
+                variant="outline"
                 onClick={handleGenerateWebhook}
+                className="border-primary text-primary hover:bg-primary/90 w-28 rounded-3xl border-solid px-5 hover:text-white"
               >
                 {loadingStates.webhook ? (
-                  <Spinner size="small" color="#976af3" />
+                  <Spinner size="small" />
                 ) : (
                   t('modals.agentDetails.generate')
                 )}
-              </button>
+              </Button>
             )}
           </div>
         </div>
       </div>
-    </WrapperModal>
+    </Modal>
   );
 }
diff --git a/frontend/src/modals/ConfigToolModal.tsx b/frontend/src/modals/ConfigToolModal.tsx
index 4097047c..7f657a07 100644
--- a/frontend/src/modals/ConfigToolModal.tsx
+++ b/frontend/src/modals/ConfigToolModal.tsx
@@ -4,12 +4,13 @@ import { useSelector } from 'react-redux';
 
 import userService from '../api/services/userService';
 import ConfigFields from '../components/ConfigFields';
+import { Button } from '../components/ui/button';
 import { Input } from '../components/ui/input';
 import { Label } from '../components/ui/label';
+import { Modal } from '../components/ui/modal';
 import { ActiveState } from '../models/misc';
 import { selectToken } from '../preferences/preferenceSlice';
 import { AvailableToolType } from './types';
-import WrapperModal from './WrapperModal';
 
 interface ConfigToolModalProps {
   modalState: ActiveState;
@@ -110,14 +111,38 @@ export default function ConfigToolModal({
       .finally(() => setSaving(false));
   };
 
-  if (modalState !== 'ACTIVE' || !tool) return null;
+  if (!tool) return null;
 
   return (
-    <WrapperModal close={handleClose}>
-      <div className="w-[400px] max-w-[90vw]">
-        <h2 className="text-foreground dark:text-foreground text-xl font-semibold">
-          {t('modals.configTool.title')}
-        </h2>
+    <Modal
+      open={modalState === 'ACTIVE'}
+      onOpenChange={(o) => !o && handleClose()}
+      title={t('modals.configTool.title')}
+      size="lg"
+      footer={
+        <>
+          <Button
+            type="button"
+            variant="ghost"
+            onClick={handleClose}
+            className="rounded-3xl px-5"
+          >
+            {t('modals.configTool.closeButton')}
+          </Button>
+          <Button
+            type="button"
+            onClick={handleAddTool}
+            disabled={saving}
+            className="rounded-3xl px-5"
+          >
+            {saving
+              ? t('modals.configTool.addButton') + '…'
+              : t('modals.configTool.addButton')}
+          </Button>
+        </>
+      }
+    >
+      <div>
         <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
           {t('modals.configTool.type')}:{' '}
           <span className="font-medium text-gray-700 dark:text-gray-200">
@@ -149,25 +174,7 @@ export default function ConfigToolModal({
             />
           )}
         </div>
-
-        <div className="mt-8 flex flex-row-reverse gap-2">
-          <button
-            onClick={handleAddTool}
-            disabled={saving}
-            className="bg-primary hover:bg-primary/90 rounded-full px-5 py-2 text-sm font-medium text-white transition-colors disabled:opacity-60"
-          >
-            {saving
-              ? t('modals.configTool.addButton') + '…'
-              : t('modals.configTool.addButton')}
-          </button>
-          <button
-            onClick={handleClose}
-            className="dark:text-foreground hover:bg-accent dark:hover:bg-accent cursor-pointer rounded-full px-5 py-2 text-sm font-medium"
-          >
-            {t('modals.configTool.closeButton')}
-          </button>
-        </div>
       </div>
-    </WrapperModal>
+    </Modal>
   );
 }
diff --git a/frontend/src/modals/ConfirmationModal.tsx b/frontend/src/modals/ConfirmationModal.tsx
index 9883b446..9c035166 100644
--- a/frontend/src/modals/ConfirmationModal.tsx
+++ b/frontend/src/modals/ConfirmationModal.tsx
@@ -1,7 +1,8 @@
 import { useTranslation } from 'react-i18next';
 
+import { Button } from '../components/ui/button';
+import { Modal } from '../components/ui/modal';
 import { ActiveState } from '../models/misc';
-import WrapperModal from './WrapperModal';
 
 export default function ConfirmationModal({
   message,
@@ -24,11 +25,6 @@ export default function ConfirmationModal({
 }) {
   const { t } = useTranslation();
 
-  const submitButtonClasses =
-    variant === 'danger'
-      ? 'rounded-3xl bg-destructive px-5 py-2 text-sm text-white transition-all hover:bg-destructive/90 hover:font-bold tracking-[0.019em] hover:tracking-normal'
-      : 'rounded-3xl bg-primary px-5 py-2 text-sm text-white transition-all hover:bg-primary/90';
-
   const handleSubmitClick = (e: React.MouseEvent) => {
     e.preventDefault();
     e.stopPropagation();
@@ -44,34 +40,34 @@ export default function ConfirmationModal({
   };
 
   return (
-    <>
-      {modalState === 'ACTIVE' && (
-        <WrapperModal close={() => setModalState('INACTIVE')}>
-          <div className="relative">
-            <div>
-              <p className="font-base text-foreground dark:text-foreground mb-1 w-[90%] text-lg wrap-break-word">
-                {message}
-              </p>
-              <div>
-                <div className="mt-6 flex flex-row-reverse gap-1">
-                  <button
-                    onClick={handleSubmitClick}
-                    className={submitButtonClasses}
-                  >
-                    {submitLabel}
-                  </button>
-                  <button
-                    onClick={handleCancelClick}
-                    className="dark:text-foreground hover:bg-accent dark:hover:bg-accent cursor-pointer rounded-3xl px-5 py-2 text-sm font-medium"
-                  >
-                    {cancelLabel ? cancelLabel : t('cancel')}
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </WrapperModal>
-      )}
-    </>
+    <Modal
+      open={modalState === 'ACTIVE'}
+      onOpenChange={(open) => {
+        if (!open) setModalState('INACTIVE');
+      }}
+      title={message}
+      footer={
+        <>
+          <Button
+            type="button"
+            variant="ghost"
+            onClick={handleCancelClick}
+            className="rounded-3xl px-5"
+          >
+            {cancelLabel ? cancelLabel : t('cancel')}
+          </Button>
+          <Button
+            type="button"
+            variant={variant === 'danger' ? 'destructive' : 'default'}
+            onClick={handleSubmitClick}
+            className="rounded-3xl px-5"
+          >
+            {submitLabel}
+          </Button>
+        </>
+      }
+    >
+      {null}
+    </Modal>
   );
 }
diff --git a/frontend/src/modals/CustomModelModal.tsx b/frontend/src/modals/CustomModelModal.tsx
index 61e7b2e6..311b022f 100644
--- a/frontend/src/modals/CustomModelModal.tsx
+++ b/frontend/src/modals/CustomModelModal.tsx
@@ -5,11 +5,12 @@ import { useSelector } from 'react-redux';
 
 import customModelsService from '../api/services/customModelsService';
 import Spinner from '../components/Spinner';
+import { Button } from '../components/ui/button';
 import { Input } from '../components/ui/input';
 import { Label } from '../components/ui/label';
 import { ActiveState } from '../models/misc';
 import { selectToken } from '../preferences/preferenceSlice';
-import WrapperComponent from './WrapperModal';
+import { Modal } from '../components/ui/modal';
 
 import type { CreateCustomModelPayload, CustomModel } from '../models/types';
 
@@ -285,12 +286,17 @@ export default function CustomModelModal({
     }
   };
 
-  if (modalState !== 'ACTIVE') return null;
-
   return (
-    <WrapperComponent
-      close={closeModal}
-      isPerformingTask={saving}
+    <Modal
+      open={modalState === 'ACTIVE'}
+      onOpenChange={(o) => !o && closeModal()}
+      hideTitle
+      title={
+        isEditMode
+          ? t('settings.customModels.editTitle')
+          : t('settings.customModels.addTitle')
+      }
+      size="lg"
       className="max-w-[600px] md:w-[80vw] lg:w-[60vw]"
     >
       <div className="flex h-full flex-col">
@@ -365,6 +371,10 @@ export default function CustomModelModal({
                 <Input
                   id="cm-base-url"
                   type="url"
+                  autoComplete="off"
+                  autoCorrect="off"
+                  autoCapitalize="off"
+                  spellCheck={false}
                   value={formData.base_url}
                   onChange={(e) => handleChange('base_url', e.target.value)}
                   placeholder={t('settings.customModels.placeholders.baseUrl')}
@@ -390,8 +400,11 @@ export default function CustomModelModal({
                 </Label>
                 <Input
                   id="cm-api-key"
-                  type="password"
-                  autoComplete="new-password"
+                  type="text"
+                  autoComplete="off"
+                  autoCorrect="off"
+                  autoCapitalize="off"
+                  spellCheck={false}
                   value={formData.api_key}
                   onChange={(e) => handleChange('api_key', e.target.value)}
                   placeholder={
@@ -519,12 +532,13 @@ export default function CustomModelModal({
 
         <div className="px-2 py-4">
           <div className="flex flex-col gap-3 sm:flex-row sm:justify-between">
-            <button
+            <Button
               type="button"
+              variant="outline"
               onClick={handleTest}
               disabled={!canTest || testing || saving}
               title={testDisabledHint}
-              className="border-border dark:border-border dark:text-foreground hover:bg-accent dark:hover:bg-muted/50 w-full rounded-3xl border px-6 py-2 text-sm font-medium transition-all disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto"
+              className="w-full rounded-3xl px-6 disabled:cursor-not-allowed sm:w-auto"
             >
               {testing ? (
                 <div className="flex items-center justify-center">
@@ -536,21 +550,22 @@ export default function CustomModelModal({
               ) : (
                 t('settings.customModels.testConnection')
               )}
-            </button>
+            </Button>
             <div className="flex flex-col-reverse gap-3 sm:flex-row sm:gap-3">
-              <button
+              <Button
                 type="button"
+                variant="ghost"
                 onClick={closeModal}
                 disabled={saving}
-                className="dark:text-foreground hover:bg-accent dark:hover:bg-muted/50 w-full cursor-pointer rounded-3xl px-6 py-2 text-sm font-medium disabled:opacity-50 sm:w-auto"
+                className="w-full rounded-3xl px-6 sm:w-auto"
               >
                 {t('cancel')}
-              </button>
-              <button
+              </Button>
+              <Button
                 type="button"
                 onClick={handleSave}
                 disabled={saving}
-                className="bg-primary hover:bg-primary/90 w-full rounded-3xl px-6 py-2 text-sm font-medium text-white transition-all disabled:opacity-50 sm:w-auto"
+                className="w-full rounded-3xl px-6 sm:w-auto"
               >
                 {saving ? (
                   <div className="flex items-center justify-center">
@@ -562,12 +577,12 @@ export default function CustomModelModal({
                 ) : (
                   t('settings.customModels.save')
                 )}
-              </button>
+              </Button>
             </div>
           </div>
         </div>
       </div>
-    </WrapperComponent>
+    </Modal>
   );
 }
 
@@ -579,19 +594,20 @@ interface CapabilityChipProps {
 
 function CapabilityChip({ label, active, onClick }: CapabilityChipProps) {
   return (
-    <button
+    <Button
       type="button"
+      variant="outline"
       role="switch"
       aria-checked={active}
       onClick={onClick}
-      className={`inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-sm transition-colors ${
+      className={`h-auto rounded-full border px-3 py-1.5 shadow-none ${
         active
-          ? 'border-emerald-500/50 bg-emerald-500/10 text-emerald-700 dark:border-emerald-400/40 dark:bg-emerald-400/10 dark:text-emerald-300'
-          : 'border-border text-muted-foreground hover:bg-accent dark:hover:bg-muted/40'
+          ? 'border-emerald-500/50 bg-emerald-500/10 text-emerald-700 hover:bg-emerald-500/10 hover:text-emerald-700 dark:border-emerald-400/40 dark:bg-emerald-400/10 dark:text-emerald-300 dark:hover:bg-emerald-400/10 dark:hover:text-emerald-300'
+          : 'text-muted-foreground'
       }`}
     >
       {active && <Check size={14} strokeWidth={2.5} />}
       {label}
-    </button>
+    </Button>
   );
 }
diff --git a/frontend/src/modals/DeleteConvModal.tsx b/frontend/src/modals/DeleteConvModal.tsx
deleted file mode 100644
index 5d08301f..00000000
--- a/frontend/src/modals/DeleteConvModal.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import React from 'react';
-import { useDispatch } from 'react-redux';
-import { ActiveState } from '../models/misc';
-import { useMediaQuery, useOutsideAlerter } from '../hooks';
-import ConfirmationModal from './ConfirmationModal';
-import { useTranslation } from 'react-i18next';
-import { Action } from '@reduxjs/toolkit';
-
-export default function DeleteConvModal({
-  modalState,
-  setModalState,
-  handleDeleteAllConv,
-}: {
-  modalState: ActiveState;
-  setModalState: (val: ActiveState) => Action;
-  handleDeleteAllConv: () => void;
-}) {
-  const modalRef = React.useRef(null);
-  const dispatch = useDispatch();
-  const { isMobile } = useMediaQuery();
-  const { t } = useTranslation();
-  useOutsideAlerter(modalRef, () => {
-    if (isMobile && modalState === 'ACTIVE') {
-      dispatch(setModalState('INACTIVE'));
-    }
-  }, [modalState]);
-
-  function handleSubmit() {
-    handleDeleteAllConv();
-    dispatch(setModalState('INACTIVE'));
-  }
-
-  function handleCancel() {
-    dispatch(setModalState('INACTIVE'));
-  }
-
-  return (
-    <ConfirmationModal
-      message={t('modals.deleteConv.confirm')}
-      modalState={modalState}
-      setModalState={(state) => dispatch(setModalState(state))}
-      submitLabel={t('modals.deleteConv.delete')}
-      handleSubmit={handleSubmit}
-      handleCancel={handleCancel}
-      variant="danger"
-    />
-  );
-}
diff --git a/frontend/src/modals/FolderManagementModal.tsx b/frontend/src/modals/FolderManagementModal.tsx
index a942ccd1..e09cca65 100644
--- a/frontend/src/modals/FolderManagementModal.tsx
+++ b/frontend/src/modals/FolderManagementModal.tsx
@@ -1,8 +1,10 @@
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { Button } from '../components/ui/button';
+import { Input } from '../components/ui/input';
+import { Modal } from '../components/ui/modal';
 import { ActiveState } from '../models/misc';
-import WrapperModal from './WrapperModal';
 
 type FolderNameModalProps = {
   modalState: ActiveState;
@@ -42,46 +44,54 @@ export default function FolderNameModal({
     }
   };
 
-  if (modalState !== 'ACTIVE') return null;
+  const handleCancel = () => {
+    setModalState('INACTIVE');
+    setName('');
+  };
 
   return (
-    <WrapperModal close={() => setModalState('INACTIVE')}>
-      <div className="w-72">
-        <h2 className="text-foreground dark:text-foreground mb-4 text-lg font-semibold">
-          {mode === 'create'
-            ? t('agents.folders.newFolder')
-            : t('agents.folders.rename')}
-        </h2>
-        <input
-          type="text"
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-          onKeyDown={handleKeyDown}
-          placeholder={t('agents.folders.folderName')}
-          autoFocus
-          className="border-border bg-card w-full rounded-lg border px-3 py-2 text-sm outline-none dark:text-white"
-        />
-        <div className="mt-6 flex justify-end gap-2">
-          <button
-            onClick={() => {
-              setModalState('INACTIVE');
-              setName('');
-            }}
-            className="dark:text-foreground hover:bg-accent dark:hover:bg-accent cursor-pointer rounded-3xl px-5 py-2 text-sm font-medium"
+    <Modal
+      open={modalState === 'ACTIVE'}
+      onOpenChange={(open) => {
+        if (!open) handleCancel();
+      }}
+      size="sm"
+      title={
+        mode === 'create'
+          ? t('agents.folders.newFolder')
+          : t('agents.folders.rename')
+      }
+      footer={
+        <>
+          <Button
+            type="button"
+            variant="ghost"
+            onClick={handleCancel}
+            className="rounded-3xl px-5"
           >
             {t('cancel')}
-          </button>
-          <button
+          </Button>
+          <Button
+            type="button"
             onClick={handleSubmit}
             disabled={!name.trim()}
-            className="bg-primary hover:bg-primary/90 rounded-3xl px-5 py-2 text-sm text-white disabled:opacity-50"
+            className="rounded-3xl px-5"
           >
             {mode === 'create'
               ? t('agents.folders.createFolder')
               : t('agents.folders.rename')}
-          </button>
-        </div>
-      </div>
-    </WrapperModal>
+          </Button>
+        </>
+      }
+    >
+      <Input
+        type="text"
+        value={name}
+        onChange={(e) => setName(e.target.value)}
+        onKeyDown={handleKeyDown}
+        placeholder={t('agents.folders.folderName')}
+        autoFocus
+      />
+    </Modal>
   );
 }
diff --git a/frontend/src/modals/ImportSpecModal.tsx b/frontend/src/modals/ImportSpecModal.tsx
index 645ed283..69cf382d 100644
--- a/frontend/src/modals/ImportSpecModal.tsx
+++ b/frontend/src/modals/ImportSpecModal.tsx
@@ -5,10 +5,13 @@ import { useSelector } from 'react-redux';
 import userService from '../api/services/userService';
 import Upload from '../assets/upload.svg';
 import Spinner from '../components/Spinner';
+import { Button } from '../components/ui/button';
+import { Input } from '../components/ui/input';
+import { Modal } from '../components/ui/modal';
 import { ActiveState } from '../models/misc';
 import { selectToken } from '../preferences/preferenceSlice';
 import { APIActionType } from '../settings/types';
-import WrapperModal from './WrapperModal';
+import { getMethodColorClass } from '../utils/httpMethodColors';
 
 interface ImportSpecModalProps {
   modalState: ActiveState;
@@ -26,18 +29,6 @@ interface ParsedResult {
   actions: APIActionType[];
 }
 
-const METHOD_COLORS: Record<string, string> = {
-  GET: 'bg-[#D1FAE5] text-[#065F46] dark:bg-[#064E3B]/60 dark:text-[#6EE7B7]',
-  POST: 'bg-[#DBEAFE] text-[#1E40AF] dark:bg-[#1E3A8A]/60 dark:text-[#93C5FD]',
-  PUT: 'bg-[#FEF3C7] text-[#92400E] dark:bg-[#78350F]/60 dark:text-[#FCD34D]',
-  DELETE:
-    'bg-[#FEE2E2] text-[#991B1B] dark:bg-[#7F1D1D]/60 dark:text-[#FCA5A5]',
-  PATCH: 'bg-[#EDE9FE] text-[#5B21B6] dark:bg-[#4C1D95]/60 dark:text-[#C4B5FD]',
-  HEAD: 'bg-[#F3F4F6] text-[#374151] dark:bg-[#374151]/60 dark:text-[#D1D5DB]',
-  OPTIONS:
-    'bg-[#F3F4F6] text-[#374151] dark:bg-[#374151]/60 dark:text-[#D1D5DB]',
-};
-
 export default function ImportSpecModal({
   modalState,
   setModalState,
@@ -157,19 +148,47 @@ export default function ImportSpecModal({
     handleClose();
   };
 
-  if (modalState !== 'ACTIVE') return null;
-
   return (
-    <WrapperModal
-      close={handleClose}
-      className="w-full max-w-2xl"
+    <Modal
+      open={modalState === 'ACTIVE'}
+      onOpenChange={(o) => !o && handleClose()}
+      title={t('modals.importSpec.title')}
+      size="lg"
       contentClassName="max-h-[70vh]"
+      footer={
+        <>
+          <Button
+            type="button"
+            variant="ghost"
+            onClick={handleClose}
+            className="rounded-3xl px-5"
+          >
+            {t('modals.importSpec.cancel')}
+          </Button>
+          {!parsedResult ? (
+            <Button
+              type="button"
+              onClick={handleParse}
+              disabled={!file || loading}
+              className="w-20 rounded-3xl px-5 disabled:cursor-not-allowed"
+            >
+              {loading && <Spinner size="small" />}
+              {!loading && t('modals.importSpec.parse')}
+            </Button>
+          ) : (
+            <Button
+              type="button"
+              onClick={handleImport}
+              disabled={selectedActions.size === 0}
+              className="rounded-3xl px-5 disabled:cursor-not-allowed"
+            >
+              {t('modals.importSpec.import', { count: selectedActions.size })}
+            </Button>
+          )}
+        </>
+      }
     >
       <div className="flex flex-col gap-4">
-        <h2 className="text-foreground dark:text-foreground text-xl font-semibold">
-          {t('modals.importSpec.title')}
-        </h2>
-
         {!parsedResult ? (
           <div className="flex flex-col gap-4">
             <p className="text-sm text-gray-600 dark:text-gray-400">
@@ -223,11 +242,11 @@ export default function ImportSpecModal({
                 <label className="mb-1 block text-xs font-medium text-gray-700 dark:text-gray-300">
                   {t('modals.importSpec.baseUrl')}
                 </label>
-                <input
+                <Input
                   type="text"
                   value={baseUrl}
                   onChange={(e) => setBaseUrl(e.target.value)}
-                  className="border-border dark:border-border text-foreground dark:text-foreground bg-card w-full rounded-lg border px-3 py-2 text-sm outline-hidden"
+                  className="bg-card h-auto rounded-lg px-3 py-2 text-sm md:text-sm"
                   placeholder={
                     parsedResult.metadata.base_url || 'https://api.example.com'
                   }
@@ -241,14 +260,17 @@ export default function ImportSpecModal({
                   count: parsedResult.actions.length,
                 })}
               </p>
-              <button
+              <Button
+                type="button"
+                variant="link"
+                size="sm"
                 onClick={toggleAll}
-                className="text-primary hover:text-primary text-sm"
+                className="h-auto p-0"
               >
                 {selectedActions.size === parsedResult.actions.length
                   ? t('modals.importSpec.deselectAll')
                   : t('modals.importSpec.selectAll')}
-              </button>
+              </Button>
             </div>
 
             <div className="max-h-72 space-y-2 overflow-y-auto px-1">
@@ -266,7 +288,7 @@ export default function ImportSpecModal({
                   <div className="min-w-0 flex-1">
                     <div className="flex items-center gap-2">
                       <span
-                        className={`rounded px-2 py-0.5 text-xs font-medium ${METHOD_COLORS[action.method.toUpperCase()] || METHOD_COLORS.GET}`}
+                        className={`rounded px-2 py-0.5 text-xs font-medium ${getMethodColorClass(action.method)}`}
                       >
                         {action.method.toUpperCase()}
                       </span>
@@ -288,34 +310,7 @@ export default function ImportSpecModal({
             </div>
           </div>
         )}
-
-        <div className="mt-2 flex flex-row-reverse gap-2">
-          {!parsedResult ? (
-            <button
-              onClick={handleParse}
-              disabled={!file || loading}
-              className="bg-primary hover:bg-primary/90 flex w-20 items-center justify-center gap-2 rounded-3xl px-5 py-2 text-sm text-white transition-all disabled:cursor-not-allowed disabled:opacity-50"
-            >
-              {loading && <Spinner size="small" color="white" />}
-              {!loading && t('modals.importSpec.parse')}
-            </button>
-          ) : (
-            <button
-              onClick={handleImport}
-              disabled={selectedActions.size === 0}
-              className="bg-primary hover:bg-primary/90 rounded-3xl px-5 py-2 text-sm text-white transition-all disabled:cursor-not-allowed disabled:opacity-50"
-            >
-              {t('modals.importSpec.import', { count: selectedActions.size })}
-            </button>
-          )}
-          <button
-            onClick={handleClose}
-            className="dark:text-foreground hover:bg-accent dark:hover:bg-accent cursor-pointer rounded-3xl px-5 py-2 text-sm font-medium"
-          >
-            {t('modals.importSpec.cancel')}
-          </button>
-        </div>
       </div>
-    </WrapperModal>
+    </Modal>
   );
 }
diff --git a/frontend/src/modals/JWTModal.tsx b/frontend/src/modals/JWTModal.tsx
index 800181fd..9734089d 100644
--- a/frontend/src/modals/JWTModal.tsx
+++ b/frontend/src/modals/JWTModal.tsx
@@ -1,8 +1,9 @@
 import React, { useState } from 'react';
 
-import Input from '../components/Input';
+import { Button } from '../components/ui/button';
+import { Input } from '../components/ui/input';
+import { Modal } from '../components/ui/modal';
 import { ActiveState } from '../models/misc';
-import WrapperModal from './WrapperModal';
 
 type JWTModalProps = {
   modalState: ActiveState;
@@ -15,20 +16,16 @@ export default function JWTModal({
 }: JWTModalProps) {
   const [jwtToken, setJwtToken] = useState<string>('');
 
-  if (modalState !== 'ACTIVE') return null;
-
   return (
-    <WrapperModal
-      className="p-4"
+    <Modal
+      open={modalState === 'ACTIVE'}
+      onOpenChange={() => {
+        /* uncloseable by design; P1.7 revisits */
+      }}
       isPerformingTask={true}
-      close={() => undefined}
+      title="Add JWT Token"
     >
       <div data-testid="jwt-modal">
-        <div className="mb-6">
-          <span className="text-foreground dark:text-foreground text-lg">
-            Add JWT Token
-          </span>
-        </div>
         <div className="relative mt-5 mb-4">
           <Input
             name="JWT Token"
@@ -36,19 +33,19 @@ export default function JWTModal({
             className="rounded-md"
             value={jwtToken}
             onChange={(e) => setJwtToken(e.target.value)}
-            borderVariant="thin"
             data-testid="jwt-token-input"
           />
         </div>
-        <button
+        <Button
+          type="button"
           disabled={jwtToken.length === 0}
           onClick={handleTokenSubmit.bind(null, jwtToken)}
-          className="bg-primary float-right mt-4 rounded-full px-5 py-2 text-sm text-white hover:bg-[#6F3FD1] disabled:opacity-50"
+          className="float-right mt-4 rounded-3xl px-5"
           data-testid="jwt-token-submit"
         >
           Save Token
-        </button>
+        </Button>
       </div>
-    </WrapperModal>
+    </Modal>
   );
 }
diff --git a/frontend/src/modals/MCPServerModal.tsx b/frontend/src/modals/MCPServerModal.tsx
index 44b47625..c568b0fb 100644
--- a/frontend/src/modals/MCPServerModal.tsx
+++ b/frontend/src/modals/MCPServerModal.tsx
@@ -5,6 +5,7 @@ import { useSelector } from 'react-redux';
 import { baseURL } from '../api/client';
 import userService from '../api/services/userService';
 import Spinner from '../components/Spinner';
+import { Button } from '../components/ui/button';
 import { Input } from '../components/ui/input';
 import { Label } from '../components/ui/label';
 import {
@@ -17,7 +18,7 @@ import {
 import { ActiveState } from '../models/misc';
 import { selectRecentEvents } from '../notifications/notificationsSlice';
 import { selectToken } from '../preferences/preferenceSlice';
-import WrapperComponent from './WrapperModal';
+import { Modal } from '../components/ui/modal';
 
 interface MCPServerModalProps {
   modalState: ActiveState;
@@ -576,255 +577,256 @@ export default function MCPServerModal({
   };
 
   return (
-    modalState === 'ACTIVE' && (
-      <WrapperComponent
-        close={() => {
+    <Modal
+      open={modalState === 'ACTIVE'}
+      onOpenChange={(o) => {
+        if (!o) {
           setModalState('INACTIVE');
           resetForm();
-        }}
-        className="max-w-[600px] md:w-[80vw] lg:w-[60vw]"
-      >
-        <div className="flex h-full flex-col">
-          <div className="px-6 py-4">
-            <h2 className="text-foreground dark:text-foreground text-xl font-semibold">
-              {server
-                ? t('settings.tools.mcp.reconnectServer', {
-                    defaultValue: 'Reconnect Server',
-                  })
-                : t('settings.tools.mcp.addServer')}
-            </h2>
-          </div>
-          <div className="flex-1 px-6">
-            <div className="flex flex-col gap-4 px-0.5 py-4">
-              {server?.has_encrypted_credentials &&
-                formData.auth_type !== 'oauth' && (
-                  <div className="rounded-xl bg-amber-50 p-3 text-sm text-amber-700 dark:bg-amber-900/30 dark:text-amber-300">
-                    {t('settings.tools.mcp.reenterCredentials', {
-                      defaultValue:
-                        'Re-enter your credentials to test and update the connection.',
-                    })}
-                  </div>
-                )}
-              <div className="flex flex-col gap-1.5">
-                <Label htmlFor="mcp-name">
-                  {t('settings.tools.mcp.serverName')}
-                  <span className="text-red-500">*</span>
-                </Label>
-                <Input
-                  id="mcp-name"
-                  type="text"
-                  value={formData.name}
-                  onChange={(e) => handleInputChange('name', e.target.value)}
-                  placeholder={t('settings.tools.mcp.serverName')}
-                  aria-invalid={!!errors.name || undefined}
-                  className="rounded-xl"
-                />
-                {errors.name && (
-                  <p className="text-destructive text-xs">{errors.name}</p>
-                )}
-              </div>
-
-              <div className="flex flex-col gap-1.5">
-                <Label htmlFor="mcp-url">
-                  {t('settings.tools.mcp.serverUrl')}
-                  <span className="text-red-500">*</span>
-                </Label>
-                <Input
-                  id="mcp-url"
-                  type="text"
-                  value={formData.server_url}
-                  onChange={(e) =>
-                    handleInputChange('server_url', e.target.value)
-                  }
-                  placeholder="https://example.com/mcp"
-                  aria-invalid={!!errors.server_url || undefined}
-                  className="rounded-xl"
-                />
-                {errors.server_url && (
-                  <p className="text-destructive text-xs">
-                    {errors.server_url}
-                  </p>
-                )}
-              </div>
-
-              <div className="flex flex-col gap-1.5">
-                <Label>{t('settings.tools.mcp.authType')}</Label>
-                <Select
-                  value={formData.auth_type}
-                  onValueChange={(v) => handleInputChange('auth_type', v)}
-                >
-                  <SelectTrigger
-                    variant="ghost"
-                    size="lg"
-                    className="w-full rounded-xl"
-                  >
-                    <SelectValue
-                      placeholder={t('settings.tools.mcp.authType')}
-                    />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {authTypes.map((type) => (
-                      <SelectItem key={type.value} value={type.value}>
-                        {type.label}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-
-              {renderAuthFields()}
-
-              <div className="flex flex-col gap-1.5">
-                <Label htmlFor="mcp-timeout">
-                  {t('settings.tools.mcp.timeout')}
-                </Label>
-                <Input
-                  id="mcp-timeout"
-                  type="number"
-                  value={formData.timeout}
-                  onChange={(e) => {
-                    const value = e.target.value;
-                    if (value === '') {
-                      handleInputChange('timeout', '');
-                    } else {
-                      const numValue = parseInt(value);
-                      if (!isNaN(numValue) && numValue >= 1) {
-                        handleInputChange('timeout', numValue);
-                      }
-                    }
-                  }}
-                  placeholder="30"
-                  min={1}
-                  max={300}
-                  aria-invalid={!!errors.timeout || undefined}
-                  className="rounded-xl"
-                />
-                {errors.timeout && (
-                  <p className="text-destructive text-xs">{errors.timeout}</p>
-                )}
-              </div>
-
-              {testResult && (
-                <div
-                  className={`rounded-xl p-4 text-sm ${
-                    testResult.success
-                      ? 'bg-green-50 text-green-700 dark:bg-green-900/40 dark:text-green-300'
-                      : 'bg-red-50 text-red-700 dark:bg-red-900/40 dark:text-red-300'
-                  }`}
-                >
-                  <p>{testResult.message}</p>
-                  {testResult.authorization_url && (
-                    <a
-                      href={testResult.authorization_url}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      onClick={(e) => {
-                        e.preventDefault();
-                        const popup = window.open(
-                          testResult.authorization_url,
-                          'oauthPopup',
-                          'width=600,height=700',
-                        );
-                        if (popup) oauthPopupRef.current = popup;
-                      }}
-                      className="mt-1.5 inline-block font-medium underline"
-                    >
-                      {t('settings.tools.mcp.openAuthPage', {
-                        defaultValue: 'Open authorization page',
-                      })}
-                    </a>
-                  )}
+        }
+      }}
+      title={
+        server
+          ? t('settings.tools.mcp.reconnectServer', {
+              defaultValue: 'Reconnect Server',
+            })
+          : t('settings.tools.mcp.addServer')
+      }
+      size="lg"
+      className="max-w-[600px] md:w-[80vw] lg:w-[60vw]"
+    >
+      <div className="flex h-full flex-col">
+        <div className="flex-1 px-6">
+          <div className="flex flex-col gap-4 px-0.5 py-4">
+            {server?.has_encrypted_credentials &&
+              formData.auth_type !== 'oauth' && (
+                <div className="rounded-xl bg-amber-50 p-3 text-sm text-amber-700 dark:bg-amber-900/30 dark:text-amber-300">
+                  {t('settings.tools.mcp.reenterCredentials', {
+                    defaultValue:
+                      'Re-enter your credentials to test and update the connection.',
+                  })}
                 </div>
               )}
-
-              {discoveredTools.length > 0 && testResult?.success && (
-                <div className="border-border dark:border-border rounded-xl border p-4">
-                  <h4 className="mb-2 text-sm font-medium text-gray-900 dark:text-white">
-                    {t('settings.tools.mcp.discoveredTools', {
-                      count: discoveredTools.length,
-                      defaultValue: `Discovered Actions (${discoveredTools.length})`,
-                    })}
-                  </h4>
-                  <ul className="flex max-h-40 flex-col gap-1.5 overflow-y-auto">
-                    {discoveredTools.map((tool) => (
-                      <li
-                        key={tool.name}
-                        className="flex items-start gap-2 rounded-lg bg-gray-50 px-3 py-2 text-sm dark:bg-white/5"
-                      >
-                        <span className="text-primary mt-0.5">&#9679;</span>
-                        <div className="min-w-0">
-                          <span className="font-medium text-gray-900 dark:text-white">
-                            {tool.name}
-                          </span>
-                          {tool.description && (
-                            <p className="truncate text-xs text-gray-500 dark:text-gray-400">
-                              {tool.description}
-                            </p>
-                          )}
-                        </div>
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-              )}
-              {errors.general && (
-                <div className="rounded-xl bg-red-50 p-4 text-sm text-red-700 dark:bg-red-900/40 dark:text-red-300">
-                  {errors.general}
-                </div>
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor="mcp-name">
+                {t('settings.tools.mcp.serverName')}
+                <span className="text-red-500">*</span>
+              </Label>
+              <Input
+                id="mcp-name"
+                type="text"
+                value={formData.name}
+                onChange={(e) => handleInputChange('name', e.target.value)}
+                placeholder={t('settings.tools.mcp.serverName')}
+                aria-invalid={!!errors.name || undefined}
+                className="rounded-xl"
+              />
+              {errors.name && (
+                <p className="text-destructive text-xs">{errors.name}</p>
               )}
             </div>
-          </div>
 
-          <div className="px-6 py-4">
-            <div className="flex flex-col gap-3 sm:flex-row sm:justify-between">
-              <button
-                onClick={testConnection}
-                disabled={testing}
-                className="border-border dark:border-border dark:text-foreground hover:bg-accent dark:hover:bg-muted/50 w-full rounded-3xl border px-6 py-2 text-sm font-medium transition-all disabled:opacity-50 sm:w-auto"
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor="mcp-url">
+                {t('settings.tools.mcp.serverUrl')}
+                <span className="text-red-500">*</span>
+              </Label>
+              <Input
+                id="mcp-url"
+                type="text"
+                value={formData.server_url}
+                onChange={(e) =>
+                  handleInputChange('server_url', e.target.value)
+                }
+                placeholder="https://example.com/mcp"
+                aria-invalid={!!errors.server_url || undefined}
+                className="rounded-xl"
+              />
+              {errors.server_url && (
+                <p className="text-destructive text-xs">{errors.server_url}</p>
+              )}
+            </div>
+
+            <div className="flex flex-col gap-1.5">
+              <Label>{t('settings.tools.mcp.authType')}</Label>
+              <Select
+                value={formData.auth_type}
+                onValueChange={(v) => handleInputChange('auth_type', v)}
               >
-                {testing ? (
+                <SelectTrigger
+                  variant="ghost"
+                  size="lg"
+                  className="w-full rounded-xl"
+                >
+                  <SelectValue placeholder={t('settings.tools.mcp.authType')} />
+                </SelectTrigger>
+                <SelectContent>
+                  {authTypes.map((type) => (
+                    <SelectItem key={type.value} value={type.value}>
+                      {type.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {renderAuthFields()}
+
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor="mcp-timeout">
+                {t('settings.tools.mcp.timeout')}
+              </Label>
+              <Input
+                id="mcp-timeout"
+                type="number"
+                value={formData.timeout}
+                onChange={(e) => {
+                  const value = e.target.value;
+                  if (value === '') {
+                    handleInputChange('timeout', '');
+                  } else {
+                    const numValue = parseInt(value);
+                    if (!isNaN(numValue) && numValue >= 1) {
+                      handleInputChange('timeout', numValue);
+                    }
+                  }
+                }}
+                placeholder="30"
+                min={1}
+                max={300}
+                aria-invalid={!!errors.timeout || undefined}
+                className="rounded-xl"
+              />
+              {errors.timeout && (
+                <p className="text-destructive text-xs">{errors.timeout}</p>
+              )}
+            </div>
+
+            {testResult && (
+              <div
+                className={`rounded-xl p-4 text-sm ${
+                  testResult.success
+                    ? 'bg-green-50 text-green-700 dark:bg-green-900/40 dark:text-green-300'
+                    : 'bg-red-50 text-red-700 dark:bg-red-900/40 dark:text-red-300'
+                }`}
+              >
+                <p>{testResult.message}</p>
+                {testResult.authorization_url && (
+                  <a
+                    href={testResult.authorization_url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      const popup = window.open(
+                        testResult.authorization_url,
+                        'oauthPopup',
+                        'width=600,height=700',
+                      );
+                      if (popup) oauthPopupRef.current = popup;
+                    }}
+                    className="mt-1.5 inline-block font-medium underline"
+                  >
+                    {t('settings.tools.mcp.openAuthPage', {
+                      defaultValue: 'Open authorization page',
+                    })}
+                  </a>
+                )}
+              </div>
+            )}
+
+            {discoveredTools.length > 0 && testResult?.success && (
+              <div className="border-border dark:border-border rounded-xl border p-4">
+                <h4 className="mb-2 text-sm font-medium text-gray-900 dark:text-white">
+                  {t('settings.tools.mcp.discoveredTools', {
+                    count: discoveredTools.length,
+                    defaultValue: `Discovered Actions (${discoveredTools.length})`,
+                  })}
+                </h4>
+                <ul className="flex max-h-40 flex-col gap-1.5 overflow-y-auto">
+                  {discoveredTools.map((tool) => (
+                    <li
+                      key={tool.name}
+                      className="flex items-start gap-2 rounded-lg bg-gray-50 px-3 py-2 text-sm dark:bg-white/5"
+                    >
+                      <span className="text-primary mt-0.5">&#9679;</span>
+                      <div className="min-w-0">
+                        <span className="font-medium text-gray-900 dark:text-white">
+                          {tool.name}
+                        </span>
+                        {tool.description && (
+                          <p className="truncate text-xs text-gray-500 dark:text-gray-400">
+                            {tool.description}
+                          </p>
+                        )}
+                      </div>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
+            {errors.general && (
+              <div className="rounded-xl bg-red-50 p-4 text-sm text-red-700 dark:bg-red-900/40 dark:text-red-300">
+                {errors.general}
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className="px-6 py-4">
+          <div className="flex flex-col gap-3 sm:flex-row sm:justify-between">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={testConnection}
+              disabled={testing}
+              className="w-full rounded-3xl px-6 sm:w-auto"
+            >
+              {testing ? (
+                <div className="flex items-center justify-center">
+                  <Spinner size="small" />
+                  <span className="ml-2">
+                    {t('settings.tools.mcp.testing')}
+                  </span>
+                </div>
+              ) : (
+                t('settings.tools.mcp.testConnection')
+              )}
+            </Button>
+
+            <div className="flex flex-col-reverse gap-3 sm:flex-row sm:gap-3">
+              <Button
+                type="button"
+                variant="ghost"
+                onClick={() => {
+                  setModalState('INACTIVE');
+                  resetForm();
+                }}
+                className="w-full rounded-3xl px-6 sm:w-auto"
+              >
+                {t('settings.tools.mcp.cancel')}
+              </Button>
+              <Button
+                type="button"
+                onClick={handleSave}
+                disabled={loading || !saveActive}
+                className="w-full rounded-3xl px-6 sm:w-auto"
+              >
+                {loading ? (
                   <div className="flex items-center justify-center">
                     <Spinner size="small" />
                     <span className="ml-2">
-                      {t('settings.tools.mcp.testing')}
+                      {t('settings.tools.mcp.saving')}
                     </span>
                   </div>
                 ) : (
-                  t('settings.tools.mcp.testConnection')
+                  t('settings.tools.mcp.save')
                 )}
-              </button>
-
-              <div className="flex flex-col-reverse gap-3 sm:flex-row sm:gap-3">
-                <button
-                  onClick={() => {
-                    setModalState('INACTIVE');
-                    resetForm();
-                  }}
-                  className="dark:text-foreground hover:bg-accent dark:hover:bg-muted/50 w-full cursor-pointer rounded-3xl px-6 py-2 text-sm font-medium sm:w-auto"
-                >
-                  {t('settings.tools.mcp.cancel')}
-                </button>
-                <button
-                  onClick={handleSave}
-                  disabled={loading || !saveActive}
-                  className="bg-primary hover:bg-primary/90 w-full rounded-3xl px-6 py-2 text-sm font-medium text-white transition-all disabled:opacity-50 sm:w-auto"
-                >
-                  {loading ? (
-                    <div className="flex items-center justify-center">
-                      <Spinner size="small" />
-                      <span className="ml-2">
-                        {t('settings.tools.mcp.saving')}
-                      </span>
-                    </div>
-                  ) : (
-                    t('settings.tools.mcp.save')
-                  )}
-                </button>
-              </div>
+              </Button>
             </div>
           </div>
         </div>
-      </WrapperComponent>
-    )
+      </div>
+    </Modal>
   );
 }
diff --git a/frontend/src/modals/MoveToFolderModal.tsx b/frontend/src/modals/MoveToFolderModal.tsx
index bbe4f1e1..8e2420d0 100644
--- a/frontend/src/modals/MoveToFolderModal.tsx
+++ b/frontend/src/modals/MoveToFolderModal.tsx
@@ -6,9 +6,11 @@ import { AgentFolder } from '../agents/types';
 import userService from '../api/services/userService';
 import ChevronRight from '../assets/chevron-right.svg';
 import FolderIcon from '../assets/folder.svg';
+import { Button } from '../components/ui/button';
+import { Input } from '../components/ui/input';
+import { Modal } from '../components/ui/modal';
 import { ActiveState } from '../models/misc';
 import { selectToken, setAgentFolders } from '../preferences/preferenceSlice';
-import WrapperModal from './WrapperModal';
 
 type MoveToFolderModalProps = {
   modalState: ActiveState;
@@ -132,34 +134,31 @@ export default function MoveToFolderModal({
     }
   };
 
-  if (modalState !== 'ACTIVE') return null;
-
   return (
-    <WrapperModal close={() => setModalState('INACTIVE')} className="p-0!">
-      <div className="w-[800px] max-w-[90vw]">
+    <Modal
+      open={modalState === 'ACTIVE'}
+      onOpenChange={(o) => !o && setModalState('INACTIVE')}
+      size="md"
+      className="w-[800px] max-w-[90vw] p-0! sm:max-w-[90vw]"
+      contentClassName="overflow-visible"
+      hideTitle
+      title={`${t('agents.folders.move')} "${agentName}" to`}
+    >
+      <div>
         <div className="px-6 pt-4">
-          <h2
-            className="text-foreground dark:text-foreground mb-2 font-semibold"
-            style={{
-              fontFamily: 'Inter, sans-serif',
-              fontSize: '22px',
-              lineHeight: '28px',
-              letterSpacing: '0.15px',
-            }}
-          >
+          <h2 className="text-foreground dark:text-foreground mb-2 text-2xl leading-7 font-semibold tracking-[0.15px]">
             {t('agents.folders.move')} &quot;{agentName}&quot; to
           </h2>
         </div>
-        <div
-          className="bg-muted dark:bg-muted flex items-center gap-1 px-8 py-2 text-xs font-semibold text-[#59636E] dark:text-gray-400"
-          style={{ fontFamily: "'Segoe UI', sans-serif" }}
-        >
-          <button
+        <div className="bg-muted dark:bg-muted text-muted-foreground flex items-center gap-1 px-8 py-2 text-xs font-semibold">
+          <Button
+            type="button"
+            variant="ghost"
             onClick={() => handleNavigateToPath(-1)}
-            className={`hover:text-foreground dark:hover:text-white ${folderPath.length > 0 ? 'opacity-70' : ''}`}
+            className={`hover:text-foreground h-auto px-0 py-0 text-xs font-semibold hover:bg-transparent dark:hover:text-white ${folderPath.length > 0 ? 'opacity-70' : ''}`}
           >
             {t('agents.filters.byMe')}
-          </button>
+          </Button>
           {breadcrumbItems.map((item, index) => (
             <span key={item.id} className="flex items-center gap-1">
               <svg
@@ -178,12 +177,14 @@ export default function MoveToFolderModal({
               {index === breadcrumbItems.length - 1 ? (
                 <span>{item.name}</span>
               ) : (
-                <button
+                <Button
+                  type="button"
+                  variant="ghost"
                   onClick={() => handleNavigateToPath(index)}
-                  className="hover:text-foreground opacity-70 dark:hover:text-white"
+                  className="hover:text-foreground h-auto px-0 py-0 text-xs font-semibold opacity-70 hover:bg-transparent dark:hover:text-white"
                 >
                   {item.name}
-                </button>
+                </Button>
               )}
             </span>
           ))}
@@ -191,7 +192,7 @@ export default function MoveToFolderModal({
         <div className="dark:border-border max-h-60 min-h-[200px] overflow-y-auto border-t border-gray-200">
           {isLoading ? (
             <div className="flex h-[200px] items-center justify-center">
-              <span className="text-muted-foreground text-[14px]">
+              <span className="text-muted-foreground text-sm">
                 {t('loading')}...
               </span>
             </div>
@@ -199,14 +200,16 @@ export default function MoveToFolderModal({
             <div className="flex w-full flex-col">
               {/* Option to move to root (no folder) - only show at root level */}
               {currentFolderId && folderPath.length === 0 && (
-                <button
+                <Button
+                  type="button"
+                  variant="ghost"
                   onClick={(e) => {
                     e.stopPropagation();
                     setSelectedFolderId(null);
                   }}
-                  className={`dark:border-border flex w-full items-center gap-2 border-b border-gray-200 px-8 py-2 text-left text-[14px] ${
+                  className={`dark:border-border h-auto w-full justify-start gap-2 rounded-none border-b border-gray-200 px-8 py-2 text-left text-sm ${
                     selectedFolderId === null
-                      ? 'bg-[#7D54D1] text-white'
+                      ? 'bg-primary hover:bg-primary text-white hover:text-white'
                       : 'bg-muted hover:bg-accent dark:bg-muted'
                   }`}
                 >
@@ -219,16 +222,18 @@ export default function MoveToFolderModal({
                   >
                     {t('agents.folders.noFolder')}
                   </span>
-                </button>
+                </Button>
               )}
 
               {currentLevelFolders.map((folder) => (
-                <button
+                <Button
                   key={folder.id}
+                  type="button"
+                  variant="ghost"
                   onClick={() => setSelectedFolderId(folder.id)}
-                  className={`dark:border-border flex w-full cursor-pointer items-center justify-between border-b border-gray-200 px-8 py-2 text-left text-[14px] ${
+                  className={`dark:border-border h-auto w-full justify-between rounded-none border-b border-gray-200 px-8 py-2 text-left text-sm ${
                     selectedFolderId === folder.id
-                      ? 'bg-[#7D54D1] text-white'
+                      ? 'bg-primary hover:bg-primary text-white hover:text-white'
                       : 'bg-muted hover:bg-accent dark:bg-muted'
                   }`}
                 >
@@ -259,7 +264,7 @@ export default function MoveToFolderModal({
                           handleNavigateIntoFolder(folder.id);
                         }
                       }}
-                      className="ml-2 flex h-6 w-6 items-center justify-center rounded-full hover:bg-[#FFFFFF2B]"
+                      className="hover:bg-accent ml-2 flex h-6 w-6 items-center justify-center rounded-full"
                     >
                       <img
                         src={ChevronRight}
@@ -268,7 +273,7 @@ export default function MoveToFolderModal({
                       />
                     </span>
                   )}
-                </button>
+                </Button>
               ))}
               {currentLevelFolders.length === 0 && folderPath.length > 0 && (
                 <div className="text-muted-foreground flex h-[200px] items-center justify-center text-sm">
@@ -288,7 +293,7 @@ export default function MoveToFolderModal({
 
         <div className="dark:border-border flex items-center justify-between border-t border-gray-200 px-8 py-4">
           {isCreatingFolder ? (
-            <input
+            <Input
               ref={newFolderInputRef}
               type="text"
               value={newFolderName}
@@ -309,24 +314,28 @@ export default function MoveToFolderModal({
                 }
               }}
               placeholder={t('agents.folders.newFolder')}
-              className="dark:text-primary rounded-full border border-[#7D54D1] bg-transparent px-6 py-2 text-sm font-medium text-[#7D54D1] outline-none placeholder:text-[#7D54D1]/60 dark:placeholder:text-[#B794F4]/60"
+              className="border-primary text-primary placeholder:text-primary/60 dark:placeholder:text-primary/60 dark:text-primary dark:border-primary h-auto rounded-full px-6 py-2 text-sm font-medium"
               autoFocus
             />
           ) : (
-            <button
+            <Button
+              type="button"
+              variant="outline"
               onClick={(e) => {
                 e.stopPropagation();
                 setIsCreatingFolder(true);
                 setTimeout(() => newFolderInputRef.current?.focus(), 0);
               }}
-              className="rounded-full border border-[#7D54D1] bg-transparent px-6 py-2 text-sm font-medium text-[#7D54D1] hover:bg-[#E5DDF6]"
+              className="border-primary text-primary hover:bg-primary/10 hover:text-primary h-auto rounded-full bg-transparent px-6 py-2 text-sm font-medium"
             >
               {t('agents.folders.newFolder')}
-            </button>
+            </Button>
           )}
 
           <div className="flex gap-2">
-            <button
+            <Button
+              type="button"
+              variant="ghost"
               onClick={(e) => {
                 e.stopPropagation();
                 if (isCreatingFolder) {
@@ -336,12 +345,13 @@ export default function MoveToFolderModal({
                   setModalState('INACTIVE');
                 }
               }}
-              className="dark:text-foreground hover:bg-accent dark:hover:bg-accent cursor-pointer rounded-3xl px-5 py-2 text-sm font-medium"
+              className="dark:text-foreground h-auto rounded-3xl px-5 py-2 text-sm font-medium"
             >
               {t('cancel')}
-            </button>
+            </Button>
             {isCreatingFolder ? (
-              <button
+              <Button
+                type="button"
                 onClick={(e) => {
                   e.stopPropagation();
                   if (newFolderName.trim()) {
@@ -351,24 +361,25 @@ export default function MoveToFolderModal({
                   }
                 }}
                 disabled={!newFolderName.trim()}
-                className="bg-primary hover:bg-primary/90 rounded-3xl px-5 py-2 text-sm text-white disabled:opacity-50"
+                className="h-auto rounded-3xl px-5 py-2 text-sm text-white"
               >
                 {t('agents.folders.createFolder')}
-              </button>
+              </Button>
             ) : (
-              <button
+              <Button
+                type="button"
                 onClick={(e) => {
                   e.stopPropagation();
                   handleMove();
                 }}
-                className="bg-primary hover:bg-primary/90 rounded-3xl px-5 py-2 text-sm text-white disabled:opacity-50"
+                className="h-auto rounded-3xl px-5 py-2 text-sm text-white"
               >
                 {t('agents.folders.move')}
-              </button>
+              </Button>
             )}
           </div>
         </div>
       </div>
-    </WrapperModal>
+    </Modal>
   );
 }
diff --git a/frontend/src/modals/SearchConversationsModal.tsx b/frontend/src/modals/SearchConversationsModal.tsx
index 72071155..830b4b6d 100644
--- a/frontend/src/modals/SearchConversationsModal.tsx
+++ b/frontend/src/modals/SearchConversationsModal.tsx
@@ -8,8 +8,10 @@ import {
 import { useTranslation } from 'react-i18next';
 
 import SearchIcon from '../assets/search.svg';
+import { Button } from '../components/ui/button';
+import { Input } from '../components/ui/input';
+import { Modal } from '../components/ui/modal';
 import { searchConversations } from '../preferences/preferenceApi';
-import WrapperModal from './WrapperModal';
 
 type ConversationListItem = {
   id: string;
@@ -38,10 +40,7 @@ function HighlightedText({ text, query }: { text: string; query: string }) {
     <>
       {parts.map((part, idx) =>
         part.toLowerCase() === trimmed.toLowerCase() ? (
-          <mark
-            key={idx}
-            className="text-purple-30 bg-transparent font-semibold"
-          >
+          <mark key={idx} className="text-primary bg-transparent font-semibold">
             {part}
           </mark>
         ) : (
@@ -150,22 +149,28 @@ export default function SearchConversationsModal({
     !!query.trim() && !isSearching && visibleConversations.length === 0;
 
   return (
-    <WrapperModal
-      close={close}
-      className="w-[92vw] max-w-xl p-0"
+    <Modal
+      open={true}
+      onOpenChange={(open) => {
+        if (!open) close();
+      }}
+      hideTitle
+      title={t('modals.searchConversations.searchPlaceholder')}
+      showCloseButton={false}
+      className="w-[92vw] !max-w-xl !p-0"
       contentClassName="max-h-[70vh]"
     >
       <div className="flex flex-col">
         <div className="border-sidebar-border flex items-center gap-2 border-b px-5 py-4">
           <img src={SearchIcon} alt="search" className="h-4 w-4 opacity-60" />
-          <input
+          <Input
             ref={inputRef}
             type="text"
             value={query}
             onChange={(e) => setQuery(e.target.value)}
             onKeyDown={handleInputKeyDown}
             placeholder={t('modals.searchConversations.searchPlaceholder')}
-            className="text-foreground placeholder:text-muted-foreground w-full bg-transparent text-sm outline-none"
+            className="h-auto rounded-none border-none px-0 py-0 text-sm shadow-none focus-visible:ring-0"
           />
         </div>
 
@@ -190,9 +195,10 @@ export default function SearchConversationsModal({
               const isActive = index === activeIndex;
 
               return (
-                <button
+                <Button
                   key={conversation.id}
                   type="button"
+                  variant="ghost"
                   ref={(element) => {
                     resultRefs.current[index] = element;
                   }}
@@ -200,7 +206,7 @@ export default function SearchConversationsModal({
                   onMouseEnter={() => setActiveIndex(index)}
                   role="option"
                   aria-selected={isActive}
-                  className={`text-foreground flex w-full flex-col items-start gap-0.5 px-5 py-2.5 text-left text-sm ${
+                  className={`text-foreground flex h-auto w-full flex-col items-start gap-0.5 rounded-none px-5 py-2.5 text-left ${
                     isActive ? 'bg-sidebar-accent' : 'hover:bg-sidebar-accent'
                   }`}
                 >
@@ -222,11 +228,11 @@ export default function SearchConversationsModal({
                       />
                     </span>
                   )}
-                </button>
+                </Button>
               );
             })}
         </div>
       </div>
-    </WrapperModal>
+    </Modal>
   );
 }
diff --git a/frontend/src/modals/ShareConversationModal.tsx b/frontend/src/modals/ShareConversationModal.tsx
index d9a065d4..b6242a4d 100644
--- a/frontend/src/modals/ShareConversationModal.tsx
+++ b/frontend/src/modals/ShareConversationModal.tsx
@@ -3,9 +3,17 @@ import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
 import conversationService from '../api/services/conversationService';
-import Spinner from '../assets/spinner.svg';
-import Dropdown from '../components/Dropdown';
-import ToggleSwitch from '../components/ToggleSwitch';
+import Spinner from '../components/Spinner';
+import { Button } from '../components/ui/button';
+import { Modal } from '../components/ui/modal';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../components/ui/select';
+import { Switch } from '../components/ui/switch';
 import { Doc } from '../models/misc';
 import {
   selectChunks,
@@ -14,7 +22,6 @@ import {
   selectSourceDocs,
   selectToken,
 } from '../preferences/preferenceSlice';
-import WrapperModal from './WrapperModal';
 
 type StatusType = 'loading' | 'idle' | 'fetched' | 'failed';
 
@@ -96,36 +103,48 @@ export const ShareConversationModal = ({
   };
 
   return (
-    <WrapperModal close={close} contentClassName="!overflow-visible">
-      <div className="flex w-[600px] max-w-[80vw] flex-col gap-2">
-        <h2 className="text-foreground dark:text-foreground text-xl font-medium">
-          {t('modals.shareConv.label')}
-        </h2>
-        <p className="text-foreground dark:text-muted-foreground/60 text-sm leading-relaxed">
-          {t('modals.shareConv.note')}
-        </p>
+    <Modal
+      open={true}
+      onOpenChange={(open) => {
+        if (!open) close();
+      }}
+      size="xl"
+      title={t('modals.shareConv.label')}
+      description={t('modals.shareConv.note')}
+      contentClassName="!overflow-visible"
+    >
+      <div className="flex flex-col gap-2">
         <div className="flex items-center justify-between">
           <span className="text-foreground text-lg dark:text-white">
             {t('modals.shareConv.option')}
           </span>
-          <ToggleSwitch
+          <Switch
             checked={allowPrompt}
-            onChange={togglePromptPermission}
-            size="medium"
+            onCheckedChange={togglePromptPermission}
           />
         </div>
         {allowPrompt && (
           <div className="my-4">
-            <Dropdown
-              placeholder={t('modals.createAPIKey.sourceDoc')}
-              selectedValue={sourcePath}
-              onSelect={(selection: { label: string; value: string }) =>
-                setSourcePath(selection)
-              }
-              options={extractDocPaths(sourceDocs ?? [])}
-              size="w-full"
-              rounded="xl"
-            />
+            <Select
+              value={sourcePath?.value}
+              onValueChange={(value) => {
+                const opt = extractDocPaths(sourceDocs ?? []).find(
+                  (o) => o.value === value,
+                );
+                if (opt) setSourcePath(opt);
+              }}
+            >
+              <SelectTrigger className="w-full rounded-xl px-5 py-3" size="lg">
+                <SelectValue placeholder={t('modals.createAPIKey.sourceDoc')} />
+              </SelectTrigger>
+              <SelectContent>
+                {extractDocPaths(sourceDocs ?? []).map((opt) => (
+                  <SelectItem key={opt.value} value={opt.value}>
+                    {opt.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           </div>
         )}
         <div className="flex items-baseline justify-between gap-2">
@@ -133,30 +152,29 @@ export const ShareConversationModal = ({
             {`${domain}/share/${identifier ?? '....'}`}
           </span>
           {status === 'fetched' ? (
-            <button
-              className="bg-primary hover:bg-primary/90 my-1 h-10 w-28 rounded-full p-2 text-sm text-white"
+            <Button
+              type="button"
+              size="lg"
+              className="my-1 w-28 rounded-3xl"
               onClick={() => handleCopyKey(`${domain}/share/${identifier}`)}
             >
               {isCopied ? t('modals.saveKey.copied') : t('modals.saveKey.copy')}
-            </button>
+            </Button>
           ) : (
-            <button
-              className="bg-primary hover:bg-primary/90 my-1 flex h-10 w-28 items-center justify-evenly rounded-full p-2 text-center text-sm font-normal text-white"
+            <Button
+              type="button"
+              size="lg"
+              className="my-1 w-28 justify-evenly rounded-3xl text-center"
               onClick={() => {
                 shareCoversationPublicly(allowPrompt);
               }}
             >
               {t('modals.shareConv.create')}
-              {status === 'loading' && (
-                <img
-                  src={Spinner}
-                  className="inline animate-spin cursor-pointer bg-transparent filter dark:invert"
-                ></img>
-              )}
-            </button>
+              {status === 'loading' && <Spinner size="small" />}
+            </Button>
           )}
         </div>
       </div>
-    </WrapperModal>
+    </Modal>
   );
 };
diff --git a/frontend/src/modals/WrapperModal.tsx b/frontend/src/modals/WrapperModal.tsx
deleted file mode 100644
index a1708821..00000000
--- a/frontend/src/modals/WrapperModal.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import { createPortal } from 'react-dom';
-
-import Exit from '../assets/exit.svg';
-
-type WrapperModalPropsType = {
-  children: React.ReactNode;
-  close: () => void;
-  isPerformingTask?: boolean;
-  className?: string;
-  contentClassName?: string;
-};
-
-export default function WrapperModal({
-  children,
-  close,
-  isPerformingTask = false,
-  className = '',
-  contentClassName = '',
-}: WrapperModalPropsType) {
-  const modalRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (isPerformingTask) return;
-
-    const handleClickOutside = (event: MouseEvent) => {
-      const target = event.target as Node;
-      if (
-        (target as Element)?.closest?.(
-          '[data-radix-popper-content-wrapper], [data-radix-select-viewport], [role="listbox"]',
-        )
-      )
-        return;
-      if (document.querySelector('[data-radix-select-content]')) return;
-      if (modalRef.current && !modalRef.current.contains(target)) close();
-    };
-
-    const handleEscapePress = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') close();
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-    document.addEventListener('keydown', handleEscapePress);
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-      document.removeEventListener('keydown', handleEscapePress);
-    };
-  }, [close, isPerformingTask]);
-
-  const modalContent = (
-    <div
-      className="fixed top-0 left-0 z-100 flex h-screen w-screen items-center justify-center"
-      onClick={(e: React.MouseEvent) => e.stopPropagation()}
-      onMouseDown={(e: React.MouseEvent) => e.stopPropagation()}
-    >
-      <div
-        className="absolute inset-0 bg-black/25 backdrop-blur-xs dark:bg-black/50"
-        onClick={isPerformingTask ? undefined : close}
-      />
-      <div
-        ref={modalRef}
-        className={`bg-card dark:bg-card relative rounded-2xl p-8 shadow-[0px_4px_40px_-3px_#0000001A] ${className}`}
-      >
-        {!isPerformingTask && (
-          <button
-            className="absolute top-3 right-4 z-50 m-2 w-3"
-            onClick={close}
-          >
-            <img className="filter dark:invert" src={Exit} alt="Close" />
-          </button>
-        )}
-        <div
-          className={`no-scrollbar text-foreground dark:text-foreground overflow-y-auto ${contentClassName}`}
-        >
-          {children}
-        </div>
-      </div>
-    </div>
-  );
-
-  return createPortal(modalContent, document.body);
-}
diff --git a/frontend/src/modals/types/index.ts b/frontend/src/modals/types/index.ts
index 3eac4701..2922c00c 100644
--- a/frontend/src/modals/types/index.ts
+++ b/frontend/src/modals/types/index.ts
@@ -25,10 +25,3 @@ export type AvailableToolType = {
     parameters: object;
   }[];
 };
-
-export type WrapperModalPropsType = {
-  children?: React.ReactNode;
-  isPerformingTask?: boolean;
-  close: () => void;
-  className?: string;
-};
diff --git a/frontend/src/notifications/ToolApprovalToast.tsx b/frontend/src/notifications/ToolApprovalToast.tsx
index 60653682..4e369f83 100644
--- a/frontend/src/notifications/ToolApprovalToast.tsx
+++ b/frontend/src/notifications/ToolApprovalToast.tsx
@@ -1,7 +1,9 @@
+import { X } from 'lucide-react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useMatch, useNavigate } from 'react-router-dom';
 
 import WarnIcon from '../assets/warn.svg';
+import { Button } from '../components/ui/button';
 import type { RootState } from '../store';
 
 import {
@@ -103,42 +105,22 @@ export default function ToolApprovalToast() {
         ({ eventId, conversationId }) => (
           <div
             key={eventId}
-            className="border-border bg-card w-[271px] overflow-hidden rounded-2xl border shadow-[0px_24px_48px_0px_#00000029]"
+            className="border-border bg-card shadow-toast w-[271px] overflow-hidden rounded-2xl border"
           >
             <div className="bg-accent/50 dark:bg-muted flex items-center justify-between px-4 py-3">
-              <h3 className="font-inter dark:text-foreground text-[14px] leading-[16.5px] font-medium text-black">
+              <h3 className="dark:text-foreground text-sm leading-[16.5px] font-medium text-black">
                 Tool approval needed
               </h3>
-              <button
+              <Button
                 type="button"
+                variant="ghost"
+                size="icon-sm"
                 onClick={() => dispatch(dismissToolApproval(eventId))}
-                className="flex h-8 items-center justify-center p-0 text-black opacity-70 transition-opacity hover:opacity-100 dark:text-white"
+                className="h-8 w-8 p-0 text-black opacity-70 transition-opacity hover:bg-transparent hover:opacity-100 dark:text-white"
                 aria-label="Dismiss"
               >
-                <svg
-                  width="16"
-                  height="16"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="h-4 w-4"
-                >
-                  <path
-                    d="M18 6L6 18"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                  <path
-                    d="M6 6L18 18"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                </svg>
-              </button>
+                <X className="h-4 w-4" />
+              </Button>
             </div>
             <div className="flex items-center justify-between gap-3 px-5 py-3">
               <div className="flex min-w-0 items-center gap-2">
@@ -149,22 +131,23 @@ export default function ToolApprovalToast() {
                   aria-hidden="true"
                 />
                 <p
-                  className="font-inter dark:text-muted-foreground max-w-[140px] truncate text-[13px] leading-[16.5px] font-normal text-black"
+                  className="dark:text-muted-foreground max-w-[140px] truncate text-sm leading-[16.5px] font-normal text-black"
                   title={conversationName(conversationId)}
                 >
                   {conversationName(conversationId)}
                 </p>
               </div>
-              <button
+              <Button
                 type="button"
+                size="sm"
                 onClick={() => {
                   dispatch(dismissToolApproval(eventId));
                   navigate(`/c/${conversationId}`);
                 }}
-                className="rounded-full bg-[#7D54D1] px-3 py-1 text-[12px] font-medium text-white shadow-sm hover:bg-[#6a45b8]"
+                className="h-auto rounded-full px-3 py-1 text-xs font-medium text-white shadow-sm"
               >
                 Review
-              </button>
+              </Button>
             </div>
           </div>
         ),
diff --git a/frontend/src/preferences/PromptsModal.tsx b/frontend/src/preferences/PromptsModal.tsx
index 552e6f48..ec1ec7ed 100644
--- a/frontend/src/preferences/PromptsModal.tsx
+++ b/frontend/src/preferences/PromptsModal.tsx
@@ -1,12 +1,19 @@
+import { ChevronDown } from 'lucide-react';
 import { ActiveState } from '../models/misc';
-import Input from '../components/Input';
+import { Input } from '../components/ui/input';
 import { Link } from 'react-router-dom';
 
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
-import WrapperModal from '../modals/WrapperModal';
-import Dropdown from '../components/Dropdown';
+import { Modal } from '../components/ui/modal';
+import { Button } from '../components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '../components/ui/dropdown-menu';
 import BookIcon from '../assets/book.svg';
 import userService from '../api/services/userService';
 import { selectToken } from '../preferences/preferenceSlice';
@@ -90,6 +97,79 @@ const buildSystemVariableOptions = (translate: (key: string) => string) =>
     label: translate(labelKey),
   }));
 
+type VariableMenuProps = {
+  options: { label: string; value: string }[];
+  label: string;
+  textareaId: string;
+  content: string;
+  setContent: (content: string) => void;
+  triggerClassName?: string;
+  contentClassName?: string;
+};
+
+function VariableMenu({
+  options,
+  label,
+  textareaId,
+  content,
+  setContent,
+  triggerClassName,
+  contentClassName,
+}: VariableMenuProps) {
+  const handleSelect = (value: string) => {
+    const textarea = document.getElementById(textareaId) as HTMLTextAreaElement;
+    if (!textarea) return;
+    const cursorPosition = textarea.selectionStart;
+    const textBefore = content.slice(0, cursorPosition);
+    const textAfter = content.slice(cursorPosition);
+
+    // Add leading space if needed
+    const needsSpace =
+      cursorPosition > 0 && content.charAt(cursorPosition - 1) !== ' ';
+
+    const newText =
+      textBefore + (needsSpace ? ' ' : '') + `{{ ${value} }}` + textAfter;
+    setContent(newText);
+
+    setTimeout(() => {
+      textarea.focus();
+      const insertedLen = value.length + 6 + (needsSpace ? 1 : 0);
+      textarea.setSelectionRange(
+        cursorPosition + insertedLen,
+        cursorPosition + insertedLen,
+      );
+    }, 0);
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          type="button"
+          variant="outline"
+          className={`border-border bg-card text-foreground hover:bg-accent h-auto justify-between rounded-3xl px-5 py-3 text-xs sm:text-sm ${triggerClassName ?? ''}`}
+        >
+          <span className="truncate">{label}</span>
+          <ChevronDown className="text-muted-foreground ml-2 h-4 w-4 shrink-0" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align="start"
+        className={`max-h-72 overflow-y-auto ${contentClassName ?? ''}`}
+      >
+        {options.map((opt) => (
+          <DropdownMenuItem
+            key={opt.value}
+            onSelect={() => handleSelect(opt.value)}
+          >
+            {opt.label}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
 type PromptTextareaProps = {
   id: string;
   value: string;
@@ -134,7 +214,7 @@ function PromptTextarea({
       </div>
       <textarea
         id={id}
-        className="peer border-border dark:border-border relative z-10 h-48 w-full resize-none rounded border-2 bg-transparent px-3 py-2 text-base text-gray-800 outline-none md:h-64 lg:h-80 dark:text-white"
+        className="peer border-border dark:border-border focus-visible:ring-ring/50 focus-visible:border-ring relative z-10 h-48 w-full resize-none rounded border-2 bg-transparent px-3 py-2 text-base text-gray-800 outline-none focus-visible:ring-[3px] md:h-64 lg:h-80 dark:text-white"
         value={value}
         onChange={onChange}
         onScroll={handleScroll}
@@ -244,15 +324,12 @@ function AddPrompt({
       </p>
       <div>
         <Input
-          placeholder={t('modals.prompts.promptName')}
+          label={t('modals.prompts.promptName')}
           type="text"
           className="mb-5"
-          edgeRoundness="rounded"
-          textSize="medium"
           value={newPromptName}
           onChange={(e) => setNewPromptName(e.target.value)}
           labelBgClassName="bg-card"
-          borderVariant="thick"
         />
 
         <div className="relative w-full">
@@ -278,109 +355,38 @@ function AddPrompt({
           <span className="font-bold">
             {t('modals.prompts.variablesLabel')}
           </span>
-          <span className="text-muted-foreground text-xs text-[10px] font-medium">
+          <span className="text-muted-foreground text-xs font-medium">
             {t('modals.prompts.variablesDescription')}
           </span>
         </p>
 
         <div className="flex flex-wrap items-center gap-2 sm:gap-3">
-          <Dropdown
+          <VariableMenu
             options={systemVariableOptions}
-            selectedValue={t('modals.prompts.systemVariablesDropdownLabel')}
-            onSelect={(option) => {
-              const textarea = document.getElementById(
-                'new-prompt-content',
-              ) as HTMLTextAreaElement;
-              if (textarea) {
-                const cursorPosition = textarea.selectionStart;
-                const textBefore = newPromptContent.slice(0, cursorPosition);
-                const textAfter = newPromptContent.slice(cursorPosition);
-
-                // Add leading space if needed
-                const needsSpace =
-                  cursorPosition > 0 &&
-                  newPromptContent.charAt(cursorPosition - 1) !== ' ';
-
-                const newText =
-                  textBefore +
-                  (needsSpace ? ' ' : '') +
-                  `{{ ${option.value} }}` +
-                  textAfter;
-                setNewPromptContent(newText);
-
-                setTimeout(() => {
-                  textarea.focus();
-                  textarea.setSelectionRange(
-                    cursorPosition +
-                      option.value.length +
-                      6 +
-                      (needsSpace ? 1 : 0),
-                    cursorPosition +
-                      option.value.length +
-                      6 +
-                      (needsSpace ? 1 : 0),
-                  );
-                }, 0);
-              }
-            }}
-            placeholder={t('modals.prompts.systemVariablesDropdownLabel')}
-            size="w-[140px] sm:w-[185px]"
-            rounded="3xl"
-            contentSize="text-[12px] sm:text-[14px]"
+            label={t('modals.prompts.systemVariablesDropdownLabel')}
+            textareaId="new-prompt-content"
+            content={newPromptContent}
+            setContent={setNewPromptContent}
+            triggerClassName="w-[140px] sm:w-[185px]"
           />
 
-          <Dropdown
+          <VariableMenu
             options={toolVariables}
-            selectedValue={'Tool Variables'}
-            onSelect={(option) => {
-              const textarea = document.getElementById(
-                'new-prompt-content',
-              ) as HTMLTextAreaElement;
-              if (textarea) {
-                const cursorPosition = textarea.selectionStart;
-                const textBefore = newPromptContent.slice(0, cursorPosition);
-                const textAfter = newPromptContent.slice(cursorPosition);
-
-                // Add leading space if needed
-                const needsSpace =
-                  cursorPosition > 0 &&
-                  newPromptContent.charAt(cursorPosition - 1) !== ' ';
-
-                const newText =
-                  textBefore +
-                  (needsSpace ? ' ' : '') +
-                  `{{ ${option.value} }}` +
-                  textAfter;
-                setNewPromptContent(newText);
-                setTimeout(() => {
-                  textarea.focus();
-                  textarea.setSelectionRange(
-                    cursorPosition +
-                      option.value.length +
-                      6 +
-                      (needsSpace ? 1 : 0),
-                    cursorPosition +
-                      option.value.length +
-                      6 +
-                      (needsSpace ? 1 : 0),
-                  );
-                }, 0);
-              }
-            }}
-            placeholder="Tool Variables"
-            size="w-[140px] sm:w-[171px]"
-            rounded="3xl"
-            contentSize="text-[12px] sm:text-[14px]"
+            label="Tool Variables"
+            textareaId="new-prompt-content"
+            content={newPromptContent}
+            setContent={setNewPromptContent}
+            triggerClassName="w-[140px] sm:w-[171px]"
           />
         </div>
       </div>
-      <div className="mt-4 flex flex-col justify-between gap-4 text-[14px] sm:flex-row sm:gap-0">
+      <div className="mt-4 flex flex-col justify-between gap-4 text-sm sm:flex-row sm:gap-0">
         <div className="flex justify-start">
           <Link
             to="https://docs.docsgpt.cloud/Guides/Customising-prompts"
             target="_blank"
             rel="noopener noreferrer"
-            className="flex items-center gap-2 text-sm font-medium text-[#6A4DF4] hover:underline"
+            className="text-primary flex items-center gap-2 text-sm font-medium hover:underline"
           >
             <img
               src={BookIcon}
@@ -388,27 +394,30 @@ function AddPrompt({
               className="flex h-4 w-3 shrink-0 items-center justify-center"
               aria-hidden="true"
             />
-            <span className="text-[14px] font-bold">
+            <span className="text-sm font-bold">
               {t('modals.prompts.learnAboutPrompts')}
             </span>
           </Link>
         </div>
 
         <div className="flex justify-end gap-2 sm:gap-4">
-          <button
+          <Button
+            type="button"
+            variant="destructive-outline"
             onClick={() => setModalState('INACTIVE')}
-            className="rounded-3xl border border-[#D9534F] px-5 py-2 text-sm font-medium text-[#D9534F] transition-all hover:bg-[#D9534F] hover:text-white"
+            className="h-auto rounded-3xl px-5 py-2 text-sm font-medium"
           >
             {t('modals.prompts.cancel')}
-          </button>
+          </Button>
 
-          <button
+          <Button
+            type="button"
             onClick={handleAddPrompt}
-            className="rounded-3xl bg-[#6A4DF4] px-6 py-2 text-sm font-medium text-white transition-all hover:bg-[#563DD1] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-[#6A4DF4]"
+            className="h-auto rounded-3xl px-6 py-2 text-sm font-medium text-white"
             disabled={disableSave}
           >
             {t('modals.prompts.save')}
-          </button>
+          </Button>
         </div>
       </div>
     </div>
@@ -451,15 +460,12 @@ function EditPrompt({
       </p>
       <div>
         <Input
-          placeholder={t('modals.prompts.promptName')}
+          label={t('modals.prompts.promptName')}
           type="text"
           className="mb-5"
-          edgeRoundness="rounded"
-          textSize="medium"
           value={editPromptName}
           onChange={(e) => setEditPromptName(e.target.value)}
           labelBgClassName="bg-card"
-          borderVariant="thick"
         />
 
         <div className="relative w-full">
@@ -485,109 +491,38 @@ function EditPrompt({
           <span className="font-bold">
             {t('modals.prompts.variablesLabel')}
           </span>
-          <span className="text-muted-foreground text-xs text-[10px] font-medium">
+          <span className="text-muted-foreground text-xs font-medium">
             {t('modals.prompts.variablesDescription')}
           </span>
         </p>
 
         <div className="flex flex-wrap items-center gap-2 sm:gap-3">
-          <Dropdown
+          <VariableMenu
             options={systemVariableOptions}
-            selectedValue={t('modals.prompts.systemVariablesDropdownLabel')}
-            onSelect={(option) => {
-              const textarea = document.getElementById(
-                'edit-prompt-content',
-              ) as HTMLTextAreaElement;
-              if (textarea) {
-                const cursorPosition = textarea.selectionStart;
-                const textBefore = editPromptContent.slice(0, cursorPosition);
-                const textAfter = editPromptContent.slice(cursorPosition);
-
-                // Add leading space if needed
-                const needsSpace =
-                  cursorPosition > 0 &&
-                  editPromptContent.charAt(cursorPosition - 1) !== ' ';
-
-                const newText =
-                  textBefore +
-                  (needsSpace ? ' ' : '') +
-                  `{{ ${option.value} }}` +
-                  textAfter;
-                setEditPromptContent(newText);
-
-                setTimeout(() => {
-                  textarea.focus();
-                  textarea.setSelectionRange(
-                    cursorPosition +
-                      option.value.length +
-                      6 +
-                      (needsSpace ? 1 : 0),
-                    cursorPosition +
-                      option.value.length +
-                      6 +
-                      (needsSpace ? 1 : 0),
-                  );
-                }, 0);
-              }
-            }}
-            placeholder={t('modals.prompts.systemVariablesDropdownLabel')}
-            size="w-[140px] sm:w-[185px]"
-            rounded="3xl"
-            contentSize="text-[12px] sm:text-[14px]"
+            label={t('modals.prompts.systemVariablesDropdownLabel')}
+            textareaId="edit-prompt-content"
+            content={editPromptContent}
+            setContent={setEditPromptContent}
+            triggerClassName="w-[140px] sm:w-[185px]"
           />
 
-          <Dropdown
+          <VariableMenu
             options={toolVariables}
-            selectedValue={'Tool Variables'}
-            onSelect={(option) => {
-              const textarea = document.getElementById(
-                'edit-prompt-content',
-              ) as HTMLTextAreaElement;
-              if (textarea) {
-                const cursorPosition = textarea.selectionStart;
-                const textBefore = editPromptContent.slice(0, cursorPosition);
-                const textAfter = editPromptContent.slice(cursorPosition);
-
-                // Add leading space if needed
-                const needsSpace =
-                  cursorPosition > 0 &&
-                  editPromptContent.charAt(cursorPosition - 1) !== ' ';
-
-                const newText =
-                  textBefore +
-                  (needsSpace ? ' ' : '') +
-                  `{{ ${option.value} }}` +
-                  textAfter;
-                setEditPromptContent(newText);
-                setTimeout(() => {
-                  textarea.focus();
-                  textarea.setSelectionRange(
-                    cursorPosition +
-                      option.value.length +
-                      6 +
-                      (needsSpace ? 1 : 0),
-                    cursorPosition +
-                      option.value.length +
-                      6 +
-                      (needsSpace ? 1 : 0),
-                  );
-                }, 0);
-              }
-            }}
-            placeholder="Tool Variables"
-            size="w-[140px] sm:w-[171px]"
-            rounded="3xl"
-            contentSize="text-[12px] sm:text-[14px]"
+            label="Tool Variables"
+            textareaId="edit-prompt-content"
+            content={editPromptContent}
+            setContent={setEditPromptContent}
+            triggerClassName="w-[140px] sm:w-[171px]"
           />
         </div>
       </div>
-      <div className="mt-4 flex flex-col justify-between gap-4 text-[14px] sm:flex-row sm:gap-0">
+      <div className="mt-4 flex flex-col justify-between gap-4 text-sm sm:flex-row sm:gap-0">
         <div className="flex justify-start">
           <Link
             to="https://docs.docsgpt.cloud/Guides/Customising-prompts"
             target="_blank"
             rel="noopener noreferrer"
-            className="flex items-center gap-2 text-sm font-medium text-[#6A4DF4] hover:underline"
+            className="text-primary flex items-center gap-2 text-sm font-medium hover:underline"
           >
             <img
               src={BookIcon}
@@ -595,26 +530,29 @@ function EditPrompt({
               className="flex h-4 w-3 shrink-0 items-center justify-center"
               aria-hidden="true"
             />
-            <span className="text-[14px] font-bold">
+            <span className="text-sm font-bold">
               {t('modals.prompts.learnAboutPrompts')}
             </span>
           </Link>
         </div>
 
         <div className="flex justify-end gap-2 sm:gap-4">
-          <button
+          <Button
+            type="button"
+            variant="destructive-outline"
             onClick={() => setModalState('INACTIVE')}
-            className="rounded-3xl border border-[#D9534F] px-5 py-2 text-sm font-medium text-[#D9534F] transition-all hover:bg-[#D9534F] hover:text-white"
+            className="h-auto rounded-3xl px-5 py-2 text-sm font-medium"
           >
             {t('modals.prompts.cancel')}
-          </button>
+          </Button>
 
-          <button
+          <Button
+            type="button"
             onClick={() => {
               handleEditPrompt &&
                 handleEditPrompt(currentPromptEdit.id, currentPromptEdit.type);
             }}
-            className="rounded-3xl bg-[#6A4DF4] px-6 py-2 text-sm font-medium text-white transition-all hover:bg-[#563DD1] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-[#6A4DF4]"
+            className="h-auto rounded-3xl px-6 py-2 text-sm font-medium text-white"
             disabled={
               currentPromptEdit.type === 'public' ||
               disableSave ||
@@ -627,7 +565,7 @@ function EditPrompt({
             }
           >
             {t('modals.prompts.save')}
-          </button>
+          </Button>
         </div>
       </div>
     </div>
@@ -750,19 +688,25 @@ export default function PromptsModal({
     view = <></>;
   }
 
-  return modalState === 'ACTIVE' ? (
-    <WrapperModal
-      close={() => {
-        setModalState('INACTIVE');
-        if (type === 'ADD') {
-          setNewPromptName('');
-          setNewPromptContent('');
+  return (
+    <Modal
+      open={modalState === 'ACTIVE'}
+      onOpenChange={(o) => {
+        if (!o) {
+          setModalState('INACTIVE');
+          if (type === 'ADD') {
+            setNewPromptName('');
+            setNewPromptContent('');
+          }
         }
       }}
+      hideTitle
+      title={type === 'ADD' ? 'Add Prompt' : 'Edit Prompt'}
+      size="lg"
       className="bg-card dark:bg-card mx-4 mt-16 w-[95vw] max-w-[650px] rounded-2xl px-4 py-4 sm:px-6 sm:py-6 md:max-w-[860px] md:px-8 md:py-6 lg:max-w-[980px]"
       contentClassName="!overflow-visible"
     >
       {view}
-    </WrapperModal>
-  ) : null;
+    </Modal>
+  );
 }
diff --git a/frontend/src/settings/Analytics.tsx b/frontend/src/settings/Analytics.tsx
index 6f7e92a4..db1d4ac4 100644
--- a/frontend/src/settings/Analytics.tsx
+++ b/frontend/src/settings/Analytics.tsx
@@ -7,19 +7,40 @@ import {
   Title,
   Tooltip,
 } from 'chart.js';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { Bar } from 'react-chartjs-2';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
 import userService from '../api/services/userService';
-import Dropdown from '../components/Dropdown';
 import SkeletonLoader from '../components/SkeletonLoader';
-import { useLoaderState } from '../hooks';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../components/ui/select';
+import { useDarkTheme, useLoaderState } from '../hooks';
 import { selectToken } from '../preferences/preferenceSlice';
 import { htmlLegendPlugin } from '../utils/chartUtils';
 import { formatDate } from '../utils/dateTimeUtils';
 
+/**
+ * Resolve a CSS custom property on `:root` to a concrete color string.
+ *
+ * Chart.js renders to a canvas, so it can't consume Tailwind classes or CSS
+ * variables directly. Read the resolved value at render time and pass that
+ * concrete string. Falls back when running outside a browser (SSR / tests).
+ */
+function readCssVar(name: string, fallback: string): string {
+  if (typeof window === 'undefined') return fallback;
+  // The `.dark` class lives on document.body (see useDarkTheme), so query
+  // body — querying documentElement would always resolve the :root value.
+  const value = getComputedStyle(document.body).getPropertyValue(name).trim();
+  return value || fallback;
+}
+
 import type { ChartData } from 'chart.js';
 ChartJS.register(
   CategoryScale,
@@ -95,6 +116,13 @@ export default function Analytics({ agentId }: AnalyticsProps) {
   const [loadingMessages, setLoadingMessages] = useLoaderState(true);
   const [loadingTokens, setLoadingTokens] = useLoaderState(true);
   const [loadingFeedback, setLoadingFeedback] = useLoaderState(true);
+  const [isDarkTheme] = useDarkTheme();
+  const primaryColor = useMemo(
+    () => readCssVar('--primary', '#7d54d1'),
+    // isDarkTheme drives the `.dark` class on document.body and changes the
+    // resolved value of `--primary`; re-read whenever it flips.
+    [isDarkTheme],
+  );
 
   const fetchMessagesData = async (agent_id?: string, filter?: string) => {
     setLoadingMessages(true);
@@ -175,7 +203,7 @@ export default function Analytics({ agentId }: AnalyticsProps) {
   }, [agentId, feedbackFilter]);
   return (
     <div className="mt-8">
-      <p className="text-muted-foreground mb-5 text-[15px] leading-6">
+      <p className="text-muted-foreground mb-5 text-sm leading-6">
         {t('settings.analytics.subtitle')}
       </p>
       {/* Messages Analytics */}
@@ -185,17 +213,29 @@ export default function Analytics({ agentId }: AnalyticsProps) {
             <p className="text-foreground dark:text-foreground font-bold">
               {t('settings.analytics.messages')}
             </p>
-            <Dropdown
-              size="w-[125px]"
-              options={filterOptions}
-              placeholder={t('settings.analytics.filterPlaceholder')}
-              onSelect={(selectedOption: { label: string; value: string }) => {
-                setMessagesFilter(selectedOption);
+            <Select
+              value={messagesFilter?.value}
+              onValueChange={(value) => {
+                const opt = filterOptions.find((o) => o.value === value);
+                if (opt) setMessagesFilter(opt);
               }}
-              selectedValue={messagesFilter ?? null}
-              rounded="3xl"
-              contentSize="text-sm"
-            />
+            >
+              <SelectTrigger
+                className="w-[125px] rounded-3xl px-5 py-3 text-sm"
+                size="lg"
+              >
+                <SelectValue
+                  placeholder={t('settings.analytics.filterPlaceholder')}
+                />
+              </SelectTrigger>
+              <SelectContent>
+                {filterOptions.map((o) => (
+                  <SelectItem key={o.value} value={o.value}>
+                    {o.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           </div>
           <div className="relative mt-px h-[245px] w-full">
             <div
@@ -214,7 +254,7 @@ export default function Analytics({ agentId }: AnalyticsProps) {
                     {
                       label: t('settings.analytics.messages'),
                       data: Object.values(messagesData || {}),
-                      backgroundColor: '#7D54D1',
+                      backgroundColor: primaryColor,
                     },
                   ],
                 }}
@@ -232,17 +272,29 @@ export default function Analytics({ agentId }: AnalyticsProps) {
             <p className="text-foreground dark:text-foreground font-bold">
               {t('settings.analytics.tokenUsage')}
             </p>
-            <Dropdown
-              size="w-[125px]"
-              options={filterOptions}
-              placeholder={t('settings.analytics.filterPlaceholder')}
-              onSelect={(selectedOption: { label: string; value: string }) => {
-                setTokenUsageFilter(selectedOption);
+            <Select
+              value={tokenUsageFilter?.value}
+              onValueChange={(value) => {
+                const opt = filterOptions.find((o) => o.value === value);
+                if (opt) setTokenUsageFilter(opt);
               }}
-              selectedValue={tokenUsageFilter ?? null}
-              rounded="3xl"
-              contentSize="text-sm"
-            />
+            >
+              <SelectTrigger
+                className="w-[125px] rounded-3xl px-5 py-3 text-sm"
+                size="lg"
+              >
+                <SelectValue
+                  placeholder={t('settings.analytics.filterPlaceholder')}
+                />
+              </SelectTrigger>
+              <SelectContent>
+                {filterOptions.map((o) => (
+                  <SelectItem key={o.value} value={o.value}>
+                    {o.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           </div>
           <div className="relative mt-px h-[245px] w-full">
             <div
@@ -261,7 +313,7 @@ export default function Analytics({ agentId }: AnalyticsProps) {
                     {
                       label: t('settings.analytics.tokenUsage'),
                       data: Object.values(tokenUsageData || {}),
-                      backgroundColor: '#7D54D1',
+                      backgroundColor: primaryColor,
                     },
                   ],
                 }}
@@ -281,17 +333,29 @@ export default function Analytics({ agentId }: AnalyticsProps) {
             <p className="text-foreground dark:text-foreground font-bold">
               {t('settings.analytics.userFeedback')}
             </p>
-            <Dropdown
-              size="w-[125px]"
-              options={filterOptions}
-              placeholder={t('settings.analytics.filterPlaceholder')}
-              onSelect={(selectedOption: { label: string; value: string }) => {
-                setFeedbackFilter(selectedOption);
+            <Select
+              value={feedbackFilter?.value}
+              onValueChange={(value) => {
+                const opt = filterOptions.find((o) => o.value === value);
+                if (opt) setFeedbackFilter(opt);
               }}
-              selectedValue={feedbackFilter ?? null}
-              rounded="3xl"
-              contentSize="text-sm"
-            />
+            >
+              <SelectTrigger
+                className="w-[125px] rounded-3xl px-5 py-3 text-sm"
+                size="lg"
+              >
+                <SelectValue
+                  placeholder={t('settings.analytics.filterPlaceholder')}
+                />
+              </SelectTrigger>
+              <SelectContent>
+                {filterOptions.map((o) => (
+                  <SelectItem key={o.value} value={o.value}>
+                    {o.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           </div>
           <div className="relative mt-px h-[245px] w-full">
             <div
@@ -312,7 +376,7 @@ export default function Analytics({ agentId }: AnalyticsProps) {
                       data: Object.values(feedbackData || {}).map(
                         (item) => item.positive,
                       ),
-                      backgroundColor: '#7D54D1',
+                      backgroundColor: primaryColor,
                     },
                     {
                       label: t('settings.analytics.negativeFeedback'),
diff --git a/frontend/src/settings/CustomModels.tsx b/frontend/src/settings/CustomModels.tsx
index 0bee8794..335c283b 100644
--- a/frontend/src/settings/CustomModels.tsx
+++ b/frontend/src/settings/CustomModels.tsx
@@ -1,4 +1,5 @@
 import { Globe, Tag, Trash } from 'lucide-react';
+import type { LucideIcon } from 'lucide-react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
@@ -10,8 +11,15 @@ import NoFilesDarkIcon from '../assets/no-files-dark.svg';
 import NoFilesIcon from '../assets/no-files.svg';
 import SearchIcon from '../assets/search.svg';
 import ThreeDotsIcon from '../assets/three-dots.svg';
-import ContextMenu, { MenuOption } from '../components/ContextMenu';
 import SkeletonLoader from '../components/SkeletonLoader';
+import { Button } from '../components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '../components/ui/dropdown-menu';
+import { Input } from '../components/ui/input';
 import { useDarkTheme, useLoaderState } from '../hooks';
 import ConfirmationModal from '../modals/ConfirmationModal';
 import CustomModelModal from '../modals/CustomModelModal';
@@ -23,6 +31,15 @@ import {
 
 import type { CustomModel } from '../models/types';
 
+type CustomModelMenuOption = {
+  icon: string | LucideIcon;
+  label: string;
+  onClick: () => void;
+  variant: 'default' | 'destructive';
+  iconWidth?: number;
+  iconHeight?: number;
+};
+
 const formatBaseUrlHost = (baseUrl: string): string => {
   if (!baseUrl) return '';
   try {
@@ -48,10 +65,6 @@ export default function CustomModels() {
   const [editingModel, setEditingModel] = React.useState<CustomModel | null>(
     null,
   );
-  const [activeMenuId, setActiveMenuId] = React.useState<string | null>(null);
-  const menuRefs = React.useRef<{
-    [key: string]: React.RefObject<HTMLDivElement | null>;
-  }>({});
   const [deleteState, setDeleteState] = React.useState<ActiveState>('INACTIVE');
   const [modelToDelete, setModelToDelete] = React.useState<CustomModel | null>(
     null,
@@ -77,14 +90,6 @@ export default function CustomModels() {
     fetchModelsRef.current();
   }, [token]);
 
-  React.useEffect(() => {
-    models.forEach((model) => {
-      if (!menuRefs.current[model.id]) {
-        menuRefs.current[model.id] = React.createRef<HTMLDivElement>();
-      }
-    });
-  }, [models]);
-
   const openAddModal = () => {
     setEditingModel(null);
     setModalState('ACTIVE');
@@ -139,12 +144,12 @@ export default function CustomModels() {
     }
   };
 
-  const getMenuOptions = (model: CustomModel): MenuOption[] => [
+  const getMenuOptions = (model: CustomModel): CustomModelMenuOption[] => [
     {
       icon: Edit,
       label: t('settings.customModels.actions.edit'),
       onClick: () => openEditModal(model),
-      variant: 'primary',
+      variant: 'default',
       iconWidth: 14,
       iconHeight: 14,
     },
@@ -152,7 +157,7 @@ export default function CustomModels() {
       icon: Trash,
       label: t('settings.customModels.actions.delete'),
       onClick: () => requestDelete(model),
-      variant: 'danger',
+      variant: 'destructive',
       iconWidth: 16,
       iconHeight: 16,
     },
@@ -182,33 +187,33 @@ export default function CustomModels() {
   return (
     <div className="mt-8">
       <div className="relative flex flex-col">
-        <p className="text-muted-foreground mb-5 text-[15px] leading-6">
+        <p className="text-muted-foreground mb-5 text-sm leading-6">
           {t('settings.customModels.subtitle')}
         </p>
         <div className="my-3 flex flex-col items-start gap-3 sm:flex-row sm:items-center sm:justify-between">
-          <div className="relative w-full max-w-md">
-            <img
-              src={SearchIcon}
-              alt=""
-              className="absolute top-1/2 left-4 h-5 w-5 -translate-y-1/2 opacity-40"
-            />
-            <input
+          <div className="w-full max-w-md">
+            <Input
               maxLength={256}
-              placeholder={t('settings.customModels.searchPlaceholder')}
+              label={t('settings.customModels.searchPlaceholder')}
               name="custom-models-search-input"
               type="text"
               id="custom-models-search-input"
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
-              className="border-border bg-card text-foreground placeholder:text-muted-foreground h-11 w-full rounded-full border py-2 pr-5 pl-11 text-sm shadow-[0_1px_4px_rgba(0,0,0,0.06)] transition-shadow outline-none focus:shadow-[0_2px_8px_rgba(0,0,0,0.1)] dark:shadow-none"
+              labelBgClassName="bg-background"
+              className="rounded-full"
+              leftIcon={
+                <img src={SearchIcon} alt="" className="h-4 w-4 opacity-40" />
+              }
             />
           </div>
-          <button
-            className="bg-primary hover:bg-primary/90 flex h-11 min-w-[108px] items-center justify-center rounded-full px-4 text-sm whitespace-normal text-white"
+          <Button
+            type="button"
+            className="h-11 min-w-[108px] rounded-full whitespace-normal text-white"
             onClick={openAddModal}
           >
             {t('settings.customModels.addModel')}
-          </button>
+          </Button>
         </div>
         <div className="border-border dark:border-border mt-5 mb-8 border-b" />
         {loading ? (
@@ -224,44 +229,76 @@ export default function CustomModels() {
                     key={model.id}
                     className="bg-muted hover:bg-accent relative flex w-[300px] flex-col overflow-hidden rounded-2xl p-5"
                   >
-                    <div
-                      ref={menuRefs.current[model.id]}
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        setActiveMenuId(
-                          activeMenuId === model.id ? null : model.id,
-                        );
-                      }}
-                      className="absolute top-3 right-3 z-10 cursor-pointer"
-                    >
-                      <img
-                        src={ThreeDotsIcon}
-                        alt={t('settings.customModels.actionsMenuAria', {
-                          modelName: model.display_name,
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <button
+                          type="button"
+                          onClick={(e) => e.stopPropagation()}
+                          className="absolute top-3 right-3 z-10 cursor-pointer"
+                          aria-label={t(
+                            'settings.customModels.actionsMenuAria',
+                            { modelName: model.display_name },
+                          )}
+                        >
+                          <img
+                            src={ThreeDotsIcon}
+                            alt={t('settings.customModels.actionsMenuAria', {
+                              modelName: model.display_name,
+                            })}
+                            className="h-[19px] w-[19px]"
+                          />
+                        </button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent
+                        align="end"
+                        className="min-w-[144px]"
+                      >
+                        {getMenuOptions(model).map((option, index) => {
+                          const IconCmp =
+                            typeof option.icon !== 'string'
+                              ? option.icon
+                              : null;
+                          return (
+                            <DropdownMenuItem
+                              key={index}
+                              variant={option.variant}
+                              onSelect={() => option.onClick()}
+                            >
+                              {typeof option.icon === 'string' ? (
+                                <img
+                                  src={option.icon}
+                                  alt=""
+                                  width={option.iconWidth ?? 16}
+                                  height={option.iconHeight ?? 16}
+                                />
+                              ) : (
+                                IconCmp && (
+                                  <IconCmp
+                                    size={Math.max(
+                                      option.iconWidth ?? 16,
+                                      option.iconHeight ?? 16,
+                                    )}
+                                    strokeWidth={1.75}
+                                    aria-hidden="true"
+                                  />
+                                )
+                              )}
+                              <span>{option.label}</span>
+                            </DropdownMenuItem>
+                          );
                         })}
-                        className="h-[19px] w-[19px]"
-                      />
-                      <ContextMenu
-                        isOpen={activeMenuId === model.id}
-                        setIsOpen={(isOpen) => {
-                          setActiveMenuId(isOpen ? model.id : null);
-                        }}
-                        options={getMenuOptions(model)}
-                        anchorRef={menuRefs.current[model.id]}
-                        position="bottom-right"
-                        offset={{ x: 0, y: 0 }}
-                      />
-                    </div>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
                     <div className="w-full pr-7">
                       <div className="flex items-center gap-2">
                         <p
                           title={model.display_name}
-                          className="text-foreground dark:text-foreground truncate text-[15px] leading-snug font-semibold"
+                          className="text-foreground dark:text-foreground truncate text-sm leading-snug font-semibold"
                         >
                           {model.display_name}
                         </p>
                         {!model.enabled && (
-                          <span className="bg-muted-foreground/15 text-muted-foreground shrink-0 rounded-full px-2 py-0.5 text-[10px] leading-none font-medium">
+                          <span className="bg-muted-foreground/15 text-muted-foreground shrink-0 rounded-full px-2 py-0.5 text-xs leading-none font-medium">
                             {t('settings.customModels.disabledBadge')}
                           </span>
                         )}
diff --git a/frontend/src/settings/General.tsx b/frontend/src/settings/General.tsx
index 4572167a..a77c8ee2 100644
--- a/frontend/src/settings/General.tsx
+++ b/frontend/src/settings/General.tsx
@@ -2,7 +2,14 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 
-import Dropdown from '../components/Dropdown';
+import { Button } from '../components/ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../components/ui/select';
 import { useDarkTheme } from '../hooks';
 import {
   selectChunks,
@@ -64,64 +71,85 @@ export default function General() {
             dispatch(setPrompt({ name: name, id: id, type: type }))
           }
           setPrompts={(newPrompts) => dispatch(setPrompts(newPrompts))}
-          dropdownProps={{ size: 'w-56', rounded: '3xl' }}
         />
       </div>
       <div className="flex flex-col gap-4">
         <label className="text-foreground dark:text-foreground text-base font-medium">
           {t('settings.general.chunks')}
         </label>
-        <Dropdown
-          options={chunks}
-          selectedValue={selectedChunks}
-          onSelect={(value: string) => dispatch(setChunks(value))}
-          size="w-56"
-          rounded="3xl"
-        />
+        <Select
+          value={selectedChunks}
+          onValueChange={(value) => dispatch(setChunks(value))}
+        >
+          <SelectTrigger className="w-56 rounded-3xl px-5 py-3" size="lg">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {chunks.map((c) => (
+              <SelectItem key={c} value={c}>
+                {c}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
       </div>
       <div className="flex flex-col gap-4">
         <label className="text-foreground dark:text-foreground text-base font-medium">
           {t('settings.general.selectTheme')}
         </label>
-        <Dropdown
-          options={themes}
-          selectedValue={
-            themes.find((theme) => theme.value === selectedTheme) || null
-          }
-          onSelect={(option: { value: string; label: string }) => {
-            setSelectedTheme(option.value);
-            option.value !== selectedTheme && toggleTheme();
+        <Select
+          value={selectedTheme}
+          onValueChange={(value) => {
+            setSelectedTheme(value);
+            value !== selectedTheme && toggleTheme();
           }}
-          size="w-56"
-          rounded="3xl"
-        />
+        >
+          <SelectTrigger className="w-56 rounded-3xl px-5 py-3" size="lg">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {themes.map((theme) => (
+              <SelectItem key={theme.value} value={theme.value}>
+                {theme.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
       </div>
       <div className="flex flex-col gap-4">
         <label className="text-foreground dark:text-foreground text-base font-medium">
           {t('settings.general.selectLanguage')}
         </label>
-        <Dropdown
-          options={languageOptions.filter(
-            (languageOption) =>
-              languageOption.value !== selectedLanguage?.value,
-          )}
-          selectedValue={selectedLanguage ?? languageOptions[0]}
-          onSelect={(selectedOption: { label: string; value: string }) => {
-            setSelectedLanguage(selectedOption);
+        <Select
+          value={selectedLanguage?.value}
+          onValueChange={(value) => {
+            const opt = languageOptions.find((o) => o.value === value);
+            if (opt) setSelectedLanguage(opt);
           }}
-          size="w-56"
-          rounded="3xl"
-        />
+        >
+          <SelectTrigger className="w-56 rounded-3xl px-5 py-3" size="lg">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {languageOptions.map((opt) => (
+              <SelectItem key={opt.value} value={opt.value}>
+                {opt.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
       </div>
       <hr className="border-border dark:border-border my-4 w-[calc(min(665px,100%))] border-t" />
       <div className="flex flex-col gap-2">
-        <button
+        <Button
+          type="button"
+          variant="destructive-outline"
           title={t('settings.general.deleteAllLabel')}
-          className="border-destructive text-destructive hover:bg-destructive flex w-fit cursor-pointer items-center justify-between rounded-3xl border border-solid bg-transparent px-5 py-3 text-sm font-medium tracking-[0.015em] transition-colors hover:font-bold hover:tracking-normal hover:text-white"
+          className="w-fit rounded-3xl px-5 py-3 tracking-[0.015em] hover:font-bold hover:tracking-normal"
           onClick={() => dispatch(setModalStateDeleteConv('ACTIVE'))}
         >
           {t('settings.general.deleteAllBtn')}
-        </button>
+        </Button>
       </div>
     </div>
   );
diff --git a/frontend/src/settings/Logs.tsx b/frontend/src/settings/Logs.tsx
index 02b27dc0..06cd9340 100644
--- a/frontend/src/settings/Logs.tsx
+++ b/frontend/src/settings/Logs.tsx
@@ -58,7 +58,7 @@ export default function Logs({ agentId, tableHeader }: LogsProps) {
   }, [page, agentId]);
   return (
     <div className="mt-8">
-      <p className="text-muted-foreground mb-5 text-[15px] leading-6">
+      <p className="text-muted-foreground mb-5 text-sm leading-6">
         {t('settings.logs.subtitle')}
       </p>
       <div>
diff --git a/frontend/src/settings/Prompts.tsx b/frontend/src/settings/Prompts.tsx
index 35b546a0..55c14066 100644
--- a/frontend/src/settings/Prompts.tsx
+++ b/frontend/src/settings/Prompts.tsx
@@ -1,18 +1,37 @@
+import { ChevronDown, Pencil, Trash2 } from 'lucide-react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
 import userService from '../api/services/userService';
-import Dropdown, { DropdownProps } from '../components/Dropdown';
+import {
+  Command,
+  CommandEmpty,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '../components/ui/command';
+import { Button } from '../components/ui/button';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '../components/ui/popover';
 import ConfirmationModal from '../modals/ConfirmationModal';
 import { ActiveState, PromptProps } from '../models/misc';
 import { selectToken } from '../preferences/preferenceSlice';
 import PromptsModal from '../preferences/PromptsModal';
+import { cn } from '@/lib/utils';
+
+type PromptsDropdownProps = {
+  className?: string;
+  contentClassName?: string;
+};
 
 type ExtendedPromptProps = PromptProps & {
   title?: string;
   titleClassName?: string;
-  dropdownProps?: Partial<DropdownProps>;
+  dropdownProps?: PromptsDropdownProps;
   showAddButton?: boolean;
 };
 
@@ -26,20 +45,8 @@ export default function Prompts({
   dropdownProps = {},
   showAddButton = true,
 }: ExtendedPromptProps) {
-  const handleSelectPrompt = ({
-    name,
-    id,
-    type,
-  }: {
-    name: string;
-    id: string;
-    type: string;
-  }) => {
-    setEditPromptName(name);
-    onSelectPrompt(name, id, type);
-  };
-
   const token = useSelector(selectToken);
+  const { t } = useTranslation();
   const [newPromptName, setNewPromptName] = React.useState('');
   const [newPromptContent, setNewPromptContent] = React.useState('');
   const [editPromptName, setEditPromptName] = React.useState('');
@@ -51,13 +58,23 @@ export default function Prompts({
   });
   const [modalType, setModalType] = React.useState<'ADD' | 'EDIT'>('ADD');
   const [modalState, setModalState] = React.useState<ActiveState>('INACTIVE');
-  const { t } = useTranslation();
+  const [open, setOpen] = React.useState(false);
 
   const [promptToDelete, setPromptToDelete] = React.useState<{
     id: string;
     name: string;
   } | null>(null);
 
+  const handleSelectPrompt = (prompt: {
+    name: string;
+    id: string;
+    type: string;
+  }) => {
+    setEditPromptName(prompt.name);
+    onSelectPrompt(prompt.name, prompt.id, prompt.type);
+    setOpen(false);
+  };
+
   const handleAddPrompt = async () => {
     try {
       const response = await userService.createPrompt(
@@ -178,6 +195,12 @@ export default function Prompts({
         console.error(error);
       });
   };
+
+  const triggerClassName = cn(
+    'border-border bg-card text-foreground hover:bg-accent flex w-56 items-center justify-between rounded-3xl border px-5 py-3 text-sm',
+    dropdownProps.className,
+  );
+
   return (
     <>
       <div>
@@ -186,46 +209,113 @@ export default function Prompts({
             {title ? title : t('settings.general.prompt')}
           </p>
           <div className="flex flex-row flex-wrap items-end justify-start gap-6">
-            <Dropdown
-              searchable
-              options={prompts.map((prompt: any) =>
-                typeof prompt === 'string'
-                  ? { name: prompt, id: prompt, type: '' }
-                  : prompt,
-              )}
-              selectedValue={selectedPrompt ? selectedPrompt.name : ''}
-              onSelect={handleSelectPrompt}
-              showEdit
-              showDelete={(prompt) => prompt.type !== 'public'}
-              onEdit={({
-                id,
-                name,
-                type,
-              }: {
-                id: string;
-                name: string;
-                type?: string;
-              }) => {
-                setModalType('EDIT');
-                setEditPromptName(name);
-                handleFetchPromptContent(id);
-                setCurrentPromptEdit({ id: id, name: name, type: type ?? '' });
-                setModalState('ACTIVE');
-              }}
-              onDelete={handleDeletePrompt}
-              placeholder={'Select a prompt'}
-              {...dropdownProps}
-            />
+            <Popover open={open} onOpenChange={setOpen}>
+              <PopoverTrigger asChild>
+                <Button
+                  type="button"
+                  variant="outline"
+                  className={cn('h-auto justify-between', triggerClassName)}
+                >
+                  <span
+                    className={cn(
+                      'truncate',
+                      !selectedPrompt?.name && 'text-muted-foreground',
+                    )}
+                  >
+                    {selectedPrompt?.name || 'Select a prompt'}
+                  </span>
+                  <ChevronDown
+                    className={cn(
+                      'text-muted-foreground ml-2 h-4 w-4 shrink-0 transition-transform',
+                      open && 'rotate-180',
+                    )}
+                  />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent
+                align="start"
+                className={cn(
+                  'w-(--radix-popover-trigger-width) p-0',
+                  dropdownProps.contentClassName,
+                )}
+              >
+                <Command>
+                  <CommandInput placeholder="Search..." className="h-9" />
+                  <CommandList>
+                    <CommandEmpty>No results found</CommandEmpty>
+                    {prompts.map((prompt) => {
+                      const isActive = selectedPrompt?.id === prompt.id;
+                      const canDelete = prompt.type !== 'public';
+                      return (
+                        <CommandItem
+                          key={prompt.id}
+                          value={prompt.name}
+                          onSelect={() => handleSelectPrompt(prompt)}
+                          className={cn(
+                            'flex items-center justify-between gap-2',
+                            isActive && 'bg-accent font-medium',
+                          )}
+                        >
+                          <span className="truncate">{prompt.name}</span>
+                          <div className="flex shrink-0 items-center gap-1">
+                            {prompt.type !== 'public' && (
+                              <Button
+                                type="button"
+                                variant="ghost"
+                                size="icon-sm"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  setModalType('EDIT');
+                                  setEditPromptName(prompt.name);
+                                  handleFetchPromptContent(prompt.id);
+                                  setCurrentPromptEdit({
+                                    id: prompt.id,
+                                    name: prompt.name,
+                                    type: prompt.type,
+                                  });
+                                  setModalState('ACTIVE');
+                                  setOpen(false);
+                                }}
+                                className="h-auto w-auto rounded p-1"
+                                aria-label="Edit prompt"
+                              >
+                                <Pencil className="text-muted-foreground h-3.5 w-3.5" />
+                              </Button>
+                            )}
+                            {canDelete && (
+                              <Button
+                                type="button"
+                                variant="ghost"
+                                size="icon-sm"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  handleDeletePrompt(prompt.id);
+                                }}
+                                className="h-auto w-auto rounded p-1"
+                                aria-label="Delete prompt"
+                              >
+                                <Trash2 className="text-muted-foreground h-3.5 w-3.5" />
+                              </Button>
+                            )}
+                          </div>
+                        </CommandItem>
+                      );
+                    })}
+                  </CommandList>
+                </Command>
+              </PopoverContent>
+            </Popover>
             {showAddButton && (
-              <button
-                className="border-primary text-primary hover:bg-primary/90 w-20 rounded-3xl border border-solid py-3 text-sm transition-colors hover:text-white"
+              <Button
+                type="button"
+                className="h-auto w-20 rounded-3xl border border-transparent py-3"
                 onClick={() => {
                   setModalType('ADD');
                   setModalState('ACTIVE');
                 }}
               >
                 {t('settings.general.add')}
-              </button>
+              </Button>
             )}
           </div>
         </div>
diff --git a/frontend/src/settings/Sources.tsx b/frontend/src/settings/Sources.tsx
index 35c66815..219f2354 100644
--- a/frontend/src/settings/Sources.tsx
+++ b/frontend/src/settings/Sources.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 
@@ -13,10 +13,16 @@ import SyncIcon from '../assets/sync.svg';
 import ThreeDots from '../assets/three-dots.svg';
 import CalendarIcon from '../assets/calendar.svg';
 import DiscIcon from '../assets/disc.svg';
-import ContextMenu, { MenuOption } from '../components/ContextMenu';
 import Pagination from '../components/DocumentPagination';
-import DropdownMenu from '../components/DropdownMenu';
 import SkeletonLoader from '../components/SkeletonLoader';
+import { Button } from '../components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '../components/ui/dropdown-menu';
+import { Input } from '../components/ui/input';
 import { useDarkTheme, useDebouncedValue, useLoaderState } from '../hooks';
 import ConfirmationModal from '../modals/ConfirmationModal';
 import { ActiveState, Doc, DocumentsProps } from '../models/misc';
@@ -38,6 +44,15 @@ import FileTree from '../components/FileTree';
 import ConnectorTree from '../components/ConnectorTree';
 import Chunks from '../components/Chunks';
 
+type SourceMenuOption = {
+  icon: string;
+  label: string;
+  onClick: () => void;
+  variant: 'default' | 'destructive';
+  iconWidth?: number;
+  iconHeight?: number;
+};
+
 const formatTokens = (tokens: number): string => {
   const roundToTwoDecimals = (num: number): string => {
     return (Math.round((num + Number.EPSILON) * 100) / 100).toString();
@@ -76,34 +91,7 @@ export default function Sources({
   const [rowsPerPage, setRowsPerPage] = useState<number>(10);
   const [totalPages, setTotalPages] = useState<number>(1);
 
-  const [activeMenuId, setActiveMenuId] = useState<string | null>(null);
-  const menuRefs = useRef<{
-    [key: string]: React.RefObject<HTMLDivElement | null>;
-  }>({});
-
-  // Create or get a ref for each document wrapper div (not the td)
-  const getMenuRef = (docId: string) => {
-    if (!menuRefs.current[docId]) {
-      menuRefs.current[docId] = React.createRef<HTMLDivElement>();
-    }
-    return menuRefs.current[docId];
-  };
-
-  const handleMenuClick = (e: React.MouseEvent, docId: string) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    const isAnyMenuOpen =
-      (syncMenuState.isOpen && syncMenuState.docId === docId) ||
-      activeMenuId === docId;
-
-    if (isAnyMenuOpen) {
-      setSyncMenuState((prev) => ({ ...prev, isOpen: false, docId: null }));
-      setActiveMenuId(null);
-      return;
-    }
-    setActiveMenuId(docId);
-  };
+  const [actionMenuDocId, setActionMenuDocId] = useState<string | null>(null);
 
   const currentDocuments = paginatedDocuments ?? [];
   const syncOptions = [
@@ -113,7 +101,6 @@ export default function Sources({
     { label: t('settings.sources.syncFrequency.monthly'), value: 'monthly' },
   ];
   const [documentToView, setDocumentToView] = useState<Doc>();
-  const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [syncMenuState, setSyncMenuState] = useState<{
     isOpen: boolean;
     docId: string | null;
@@ -327,8 +314,11 @@ export default function Sources({
     }
   };
 
-  const getActionOptions = (index: number, document: Doc): MenuOption[] => {
-    const actions: MenuOption[] = [
+  const getActionOptions = (
+    index: number,
+    document: Doc,
+  ): SourceMenuOption[] => {
+    const actions: SourceMenuOption[] = [
       {
         icon: EyeView,
         label: t('settings.sources.view'),
@@ -337,7 +327,7 @@ export default function Sources({
         },
         iconWidth: 18,
         iconHeight: 18,
-        variant: 'primary',
+        variant: 'default',
       },
     ];
 
@@ -350,7 +340,7 @@ export default function Sources({
         },
         iconWidth: 14,
         iconHeight: 14,
-        variant: 'primary',
+        variant: 'default',
       });
     }
 
@@ -367,7 +357,7 @@ export default function Sources({
         },
         iconWidth: 14,
         iconHeight: 14,
-        variant: 'primary',
+        variant: 'default',
       });
       actions.push({
         icon: SyncIcon,
@@ -377,7 +367,7 @@ export default function Sources({
         },
         iconWidth: 14,
         iconHeight: 14,
-        variant: 'primary',
+        variant: 'default',
       });
     }
 
@@ -389,7 +379,7 @@ export default function Sources({
       },
       iconWidth: 18,
       iconHeight: 18,
-      variant: 'danger',
+      variant: 'destructive',
     });
 
     return actions;
@@ -423,39 +413,34 @@ export default function Sources({
       )}
     </div>
   ) : (
-    <div className="mt-8 flex w-full max-w-full flex-col overflow-hidden">
+    <div className="mt-8 flex w-full max-w-full flex-col">
       <div className="relative flex grow flex-col">
-        <p className="text-muted-foreground mb-5 text-[15px] leading-6">
+        <p className="text-muted-foreground mb-5 text-sm leading-6">
           {t('settings.sources.subtitle')}
         </p>
         <div className="mb-6 flex flex-col items-start justify-between gap-3 sm:flex-row sm:items-center">
-          <div className="w-full sm:w-auto">
-            <label htmlFor="document-search-input" className="sr-only">
-              {t('settings.sources.searchPlaceholder')}
-            </label>
-            <div className="relative w-full max-w-md">
-              <img
-                src={SearchIcon}
-                alt=""
-                className="absolute top-1/2 left-4 h-5 w-5 -translate-y-1/2 opacity-40"
-              />
-              <input
-                maxLength={256}
-                placeholder={t('settings.sources.searchPlaceholder')}
-                name="Document-search-input"
-                type="text"
-                id="document-search-input"
-                value={searchTerm}
-                onChange={(e) => {
-                  setSearchTerm(e.target.value);
-                  setCurrentPage(1);
-                }}
-                className="border-border bg-card text-foreground placeholder:text-muted-foreground h-11 w-full rounded-full border py-2 pr-5 pl-11 text-sm shadow-[0_1px_4px_rgba(0,0,0,0.06)] transition-shadow outline-none focus:shadow-[0_2px_8px_rgba(0,0,0,0.1)] dark:shadow-none"
-              />
-            </div>
+          <div className="w-full max-w-md sm:w-auto">
+            <Input
+              maxLength={256}
+              label={t('settings.sources.searchPlaceholder')}
+              name="Document-search-input"
+              type="text"
+              id="document-search-input"
+              value={searchTerm}
+              onChange={(e) => {
+                setSearchTerm(e.target.value);
+                setCurrentPage(1);
+              }}
+              labelBgClassName="bg-background"
+              className="rounded-full"
+              leftIcon={
+                <img src={SearchIcon} alt="" className="h-4 w-4 opacity-40" />
+              }
+            />
           </div>
-          <button
-            className="bg-primary hover:bg-primary/90 flex h-11 min-w-[108px] items-center justify-center rounded-full px-4 text-sm whitespace-normal text-white"
+          <Button
+            type="button"
+            className="h-11 min-w-[108px] rounded-full whitespace-normal text-white"
             title={t('settings.sources.addSource')}
             onClick={() => {
               setIsOnboarding(false);
@@ -463,7 +448,7 @@ export default function Sources({
             }}
           >
             {t('settings.sources.addSource')}
-          </button>
+          </Button>
         </div>
         <div className="relative w-full">
           {loading ? (
@@ -489,8 +474,9 @@ export default function Sources({
                 return (
                   <div key={docId} className="relative">
                     <div
-                      className={`bg-muted dark:bg-accent flex h-[130px] w-full flex-col rounded-2xl p-3 transition-all duration-200 ${
-                        activeMenuId === docId || syncMenuState.docId === docId
+                      className={`bg-muted dark:bg-accent flex h-[130px] w-full flex-col rounded-2xl p-5 transition-all duration-200 ${
+                        actionMenuDocId === docId ||
+                        syncMenuState.docId === docId
                           ? 'scale-[1.05]'
                           : 'hover:scale-[1.05]'
                       }`}
@@ -498,25 +484,15 @@ export default function Sources({
                       <div className="w-full flex-1">
                         <div className="flex w-full items-center justify-between gap-2">
                           <h3
-                            className="font-inter dark:text-foreground text-foreground line-clamp-3 text-[13px] leading-[18px] font-semibold wrap-break-word"
+                            className="dark:text-foreground text-foreground line-clamp-3 text-sm leading-[18px] font-semibold wrap-break-word"
                             title={document.name}
                           >
                             {document.name}
                           </h3>
-                          <div
-                            ref={getMenuRef(docId)}
-                            className="relative flex items-center justify-end"
-                          >
+                          <div className="relative flex items-center justify-end">
                             {document.syncFrequency && (
                               <DropdownMenu
-                                name={t('settings.sources.sync')}
-                                options={syncOptions}
-                                onSelect={(value: string) => {
-                                  handleManageSync(document, value);
-                                }}
-                                defaultValue={document.syncFrequency}
-                                icon={SyncIcon}
-                                isOpen={
+                                open={
                                   syncMenuState.docId === docId &&
                                   syncMenuState.isOpen
                                 }
@@ -528,39 +504,88 @@ export default function Sources({
                                     document: isOpen ? document : null,
                                   }));
                                 }}
-                                anchorRef={getMenuRef(docId)}
-                                position="bottom-left"
-                                offset={{ x: -8, y: 8 }}
-                                className="min-w-[120px]"
-                              />
+                              >
+                                <DropdownMenuTrigger asChild>
+                                  <span
+                                    aria-hidden
+                                    className="pointer-events-none absolute inset-0 opacity-0"
+                                  />
+                                </DropdownMenuTrigger>
+                                <DropdownMenuContent
+                                  align="end"
+                                  className="min-w-[120px]"
+                                >
+                                  {syncOptions.map((opt) => (
+                                    <DropdownMenuItem
+                                      key={opt.value}
+                                      onSelect={() =>
+                                        handleManageSync(document, opt.value)
+                                      }
+                                    >
+                                      {opt.label}
+                                    </DropdownMenuItem>
+                                  ))}
+                                </DropdownMenuContent>
+                              </DropdownMenu>
                             )}
-                            <button
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                handleMenuClick(e, docId);
-                              }}
-                              className="dark:hover:bg-muted inline-flex h-[35px] w-6 shrink-0 items-center justify-center rounded-md transition-colors hover:bg-[#EBEBEB]"
-                              aria-label={t('settings.sources.menuAlt')}
-                              data-testid={`menu-button-${docId}`}
+                            <DropdownMenu
+                              open={actionMenuDocId === docId}
+                              onOpenChange={(open) =>
+                                setActionMenuDocId(open ? docId : null)
+                              }
                             >
-                              <img
-                                src={ThreeDots}
-                                alt={t('settings.sources.menuAlt')}
-                                className="opacity-60 hover:opacity-100"
-                              />
-                            </button>
+                              <DropdownMenuTrigger asChild>
+                                <Button
+                                  type="button"
+                                  variant="ghost"
+                                  size="icon"
+                                  onClick={(e) => e.stopPropagation()}
+                                  className="h-[35px] w-6"
+                                  aria-label={t('settings.sources.menuAlt')}
+                                  data-testid={`menu-button-${docId}`}
+                                >
+                                  <img
+                                    src={ThreeDots}
+                                    alt={t('settings.sources.menuAlt')}
+                                    className="opacity-60 hover:opacity-100"
+                                  />
+                                </Button>
+                              </DropdownMenuTrigger>
+                              <DropdownMenuContent
+                                align="end"
+                                className="min-w-[144px]"
+                              >
+                                {getActionOptions(index, document).map(
+                                  (option, idx) => (
+                                    <DropdownMenuItem
+                                      key={idx}
+                                      variant={option.variant}
+                                      onSelect={() => option.onClick()}
+                                    >
+                                      <img
+                                        src={option.icon}
+                                        alt=""
+                                        width={option.iconWidth ?? 16}
+                                        height={option.iconHeight ?? 16}
+                                      />
+                                      <span>{option.label}</span>
+                                    </DropdownMenuItem>
+                                  ),
+                                )}
+                              </DropdownMenuContent>
+                            </DropdownMenu>
                           </div>
                         </div>
                       </div>
 
                       <div className="flex flex-col items-start justify-start gap-1">
                         {document.ingestStatus === 'failed' && (
-                          <span className="rounded-full bg-red-100 px-2 py-0.5 text-[11px] leading-[16px] font-medium text-red-700 dark:bg-red-900/30 dark:text-red-400">
+                          <span className="rounded-full bg-red-100 px-2 py-0.5 text-xs leading-[16px] font-medium text-red-700 dark:bg-red-900/30 dark:text-red-400">
                             {t('settings.sources.ingestFailed')}
                           </span>
                         )}
                         {document.ingestStatus === 'processing' && (
-                          <span className="bg-muted-foreground/10 text-muted-foreground rounded-full px-2 py-0.5 text-[11px] leading-[16px] font-medium">
+                          <span className="bg-muted-foreground/10 text-muted-foreground rounded-full px-2 py-0.5 text-xs leading-[16px] font-medium">
                             {t('settings.sources.ingestProcessing')}
                           </span>
                         )}
@@ -570,13 +595,13 @@ export default function Sources({
                             alt=""
                             className="h-3.5 w-3.5"
                           />
-                          <span className="font-inter text-muted-foreground text-[12px] leading-[18px] font-medium">
+                          <span className="text-muted-foreground text-xs leading-[18px] font-medium">
                             {document.date ? formatDate(document.date) : ''}
                           </span>
                         </div>
                         <div className="flex items-center gap-2">
                           <img src={DiscIcon} alt="" className="h-3.5 w-3.5" />
-                          <span className="font-inter text-muted-foreground text-[12px] leading-[18px] font-medium">
+                          <span className="text-muted-foreground text-xs leading-[18px] font-medium">
                             {document.tokens
                               ? formatTokens(+document.tokens)
                               : ''}
@@ -584,17 +609,6 @@ export default function Sources({
                         </div>
                       </div>
                     </div>
-                    <ContextMenu
-                      isOpen={activeMenuId === docId}
-                      setIsOpen={(isOpen) => {
-                        setActiveMenuId(isOpen ? docId : null);
-                      }}
-                      options={getActionOptions(index, document)}
-                      anchorRef={getMenuRef(docId)}
-                      position="bottom-left"
-                      offset={{ x: -8, y: 8 }}
-                      className="z-50"
-                    />
                   </div>
                 );
               })}
diff --git a/frontend/src/settings/ToolConfig.tsx b/frontend/src/settings/ToolConfig.tsx
index 5ae2a208..c6fc4947 100644
--- a/frontend/src/settings/ToolConfig.tsx
+++ b/frontend/src/settings/ToolConfig.tsx
@@ -11,30 +11,31 @@ import NoFilesDarkIcon from '../assets/no-files-dark.svg';
 import NoFilesIcon from '../assets/no-files.svg';
 import Trash from '../assets/trash.svg';
 import ConfigFields from '../components/ConfigFields';
-import Dropdown from '../components/Dropdown';
-import Input from '../components/Input';
-import ToggleSwitch from '../components/ToggleSwitch';
-import { Input as ShadInput } from '../components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../components/ui/select';
+import { Button } from '../components/ui/button';
+import { Input } from '../components/ui/input';
+import { Switch } from '../components/ui/switch';
 import { useDarkTheme } from '../hooks';
 import AddActionModal from '../modals/AddActionModal';
 import ConfirmationModal from '../modals/ConfirmationModal';
 import ImportSpecModal from '../modals/ImportSpecModal';
 import { ActiveState } from '../models/misc';
 import { selectToken } from '../preferences/preferenceSlice';
+import { getMethodColorClass } from '../utils/httpMethodColors';
 import { areObjectsEqual } from '../utils/objectUtils';
 import { APIActionType, APIToolType, UserToolType } from './types';
 
-const METHOD_COLORS: Record<string, string> = {
-  GET: 'bg-[#D1FAE5] text-[#065F46] dark:bg-[#064E3B]/60 dark:text-[#6EE7B7]',
-  POST: 'bg-[#DBEAFE] text-[#1E40AF] dark:bg-[#1E3A8A]/60 dark:text-[#93C5FD]',
-  PUT: 'bg-[#FEF3C7] text-[#92400E] dark:bg-[#78350F]/60 dark:text-[#FCD34D]',
-  DELETE:
-    'bg-[#FEE2E2] text-[#991B1B] dark:bg-[#7F1D1D]/60 dark:text-[#FCA5A5]',
-  PATCH: 'bg-[#EDE9FE] text-[#5B21B6] dark:bg-[#4C1D95]/60 dark:text-[#C4B5FD]',
-  HEAD: 'bg-[#F3F4F6] text-[#374151] dark:bg-[#374151]/60 dark:text-[#D1D5DB]',
-  OPTIONS:
-    'bg-[#F3F4F6] text-[#374151] dark:bg-[#374151]/60 dark:text-[#D1D5DB]',
-};
+// The `!` suffix is required because the surrounding `@utility table-default`
+// rules in index.css (min-w 150px, max-w 320px, p-4 / px-4 py-2) out-specify
+// plain Tailwind utility classes. Inline style={{...}} used to win on
+// specificity; the `!` keeps that behaviour without resorting to inline styles.
+const NARROW_CELL = 'w-[50px]! min-w-[50px]! max-w-[50px]! p-0!';
 
 export default function ToolConfig({
   tool,
@@ -331,21 +332,25 @@ export default function ToolConfig({
     <div className="scrollbar-overlay mt-8 flex flex-col gap-4">
       <div className="mb-4 flex items-center justify-between">
         <div className="text-foreground dark:text-foreground flex items-center gap-3 text-sm">
-          <button
-            className="border-border text-muted-foreground hover:bg-accent rounded-full border p-3 text-sm"
+          <Button
+            type="button"
+            variant="outline"
+            size="icon"
+            className="text-muted-foreground rounded-full p-3"
             onClick={handleBackClick}
           >
             <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
-          </button>
+          </Button>
           <p className="mt-px">{t('settings.tools.backToAllTools')}</p>
         </div>
-        <button
-          className="bg-primary hover:bg-primary/90 rounded-full px-3 py-2 text-xs text-nowrap text-white transition-colors disabled:cursor-not-allowed disabled:opacity-50 sm:px-4 sm:py-2"
+        <Button
+          type="button"
+          className="rounded-full px-3 py-2 text-xs text-nowrap text-white sm:px-4 sm:py-2"
           onClick={handleSaveChanges}
           disabled={!hasUnsavedChanges || saving}
         >
           {saving ? t('settings.tools.saving') : t('settings.tools.save')}
-        </button>
+        </Button>
       </div>
       {saveError && (
         <div className="mb-2 rounded-lg bg-red-50 px-4 py-2 text-sm text-red-600 dark:bg-red-900/20 dark:text-red-400">
@@ -357,7 +362,7 @@ export default function ToolConfig({
           {t('settings.tools.customName')}
         </p>
         <div className="relative mt-4 w-full max-w-96">
-          <ShadInput
+          <Input
             type="text"
             value={customName}
             onChange={(e) => setCustomName(e.target.value)}
@@ -396,18 +401,22 @@ export default function ToolConfig({
           </p>
           {tool.name === 'api_tool' && (
             <div className="flex gap-2">
-              <button
+              <Button
+                type="button"
+                variant="outline"
                 onClick={() => setImportModalState('ACTIVE')}
-                className="border-primary text-primary hover:bg-primary/90 rounded-full border border-solid px-5 py-1 text-sm transition-colors hover:text-white"
+                className="border-primary text-primary hover:bg-primary hover:text-primary-foreground rounded-full px-5 py-1"
               >
                 {t('settings.tools.importSpec')}
-              </button>
-              <button
+              </Button>
+              <Button
+                type="button"
+                variant="outline"
                 onClick={() => setActionModalState('ACTIVE')}
-                className="border-primary text-primary hover:bg-primary/90 rounded-full border border-solid px-5 py-1 text-sm transition-colors hover:text-white"
+                className="border-primary text-primary hover:bg-primary hover:text-primary-foreground rounded-full px-5 py-1"
               >
                 {t('settings.tools.addAction')}
-              </button>
+              </Button>
             </div>
           )}
         </div>
@@ -445,12 +454,12 @@ export default function ToolConfig({
                     <circle cx="11" cy="11" r="8" />
                     <path strokeLinecap="round" d="m21 21-4.35-4.35" />
                   </svg>
-                  <input
+                  <Input
                     type="text"
                     value={userActionsSearch}
                     onChange={(e) => setUserActionsSearch(e.target.value)}
                     placeholder={t('settings.tools.searchActions')}
-                    className="border-border text-foreground placeholder:text-muted-foreground h-10 w-full rounded-full border bg-transparent pr-4 pl-10 text-sm outline-none"
+                    className="h-10 rounded-full pr-4 pl-10 text-sm md:text-sm"
                   />
                 </div>
 
@@ -494,9 +503,9 @@ export default function ToolConfig({
                             <span className="text-xs text-gray-500 dark:text-gray-400">
                               {t('settings.tools.requireApproval', 'Approval')}
                             </span>
-                            <ToggleSwitch
+                            <Switch
                               checked={action.require_approval ?? false}
-                              onChange={(checked) => {
+                              onCheckedChange={(checked) => {
                                 setTool({
                                   ...tool,
                                   actions: tool.actions.map((act, index) => {
@@ -510,13 +519,12 @@ export default function ToolConfig({
                                   }),
                                 });
                               }}
-                              size="small"
                               id={`approvalToggle-${originalIndex}`}
                             />
                           </div>
-                          <ToggleSwitch
+                          <Switch
                             checked={action.active}
-                            onChange={(checked) => {
+                            onCheckedChange={(checked) => {
                               setTool({
                                 ...tool,
                                 actions: tool.actions.map((act, index) => {
@@ -527,7 +535,6 @@ export default function ToolConfig({
                                 }),
                               });
                             }}
-                            size="small"
                             id={`actionToggle-${originalIndex}`}
                           />
                         </div>
@@ -538,9 +545,7 @@ export default function ToolConfig({
                             <Input
                               type="text"
                               className="w-full"
-                              placeholder={t(
-                                'settings.tools.descriptionPlaceholder',
-                              )}
+                              label={t('settings.tools.descriptionPlaceholder')}
                               value={action.description}
                               onChange={(e) => {
                                 setTool({
@@ -556,7 +561,6 @@ export default function ToolConfig({
                                   }),
                                 });
                               }}
-                              borderVariant="thin"
                             />
                           </div>
                           <div className="px-5 py-4">
@@ -607,10 +611,10 @@ export default function ToolConfig({
                                         </label>
                                       </td>
                                       <td className="w-10">
-                                        <input
+                                        <Input
                                           key={uniqueKey}
                                           value={param[1].description}
-                                          className="border-border dark:border-border rounded-lg border bg-transparent px-2 py-1 text-sm outline-hidden"
+                                          className="h-auto rounded-lg px-2 py-1 text-sm shadow-none md:text-sm"
                                           onChange={(e) => {
                                             setTool({
                                               ...tool,
@@ -641,14 +645,14 @@ export default function ToolConfig({
                                               ),
                                             });
                                           }}
-                                        ></input>
+                                        />
                                       </td>
                                       <td>
-                                        <input
+                                        <Input
                                           value={param[1].value}
                                           key={uniqueKey}
                                           disabled={param[1].filled_by_llm}
-                                          className={`border-border dark:border-border rounded-lg border bg-transparent px-2 py-1 text-sm outline-hidden ${param[1].filled_by_llm ? 'opacity-50' : ''}`}
+                                          className={`h-auto rounded-lg px-2 py-1 text-sm shadow-none md:text-sm ${param[1].filled_by_llm ? 'opacity-50' : ''}`}
                                           onChange={(e) => {
                                             setTool({
                                               ...tool,
@@ -679,7 +683,7 @@ export default function ToolConfig({
                                               ),
                                             });
                                           }}
-                                        ></input>
+                                        />
                                       </td>
                                     </tr>
                                   );
@@ -870,10 +874,6 @@ function APIToolConfig({
     setTool(apiTool);
   }, [apiTool]);
 
-  const getMethodColor = (method: string) => {
-    return METHOD_COLORS[method.toUpperCase()] || METHOD_COLORS.GET;
-  };
-
   return (
     <div className="scrollbar-overlay flex flex-col gap-4">
       <div className="relative">
@@ -888,12 +888,12 @@ function APIToolConfig({
           <circle cx="11" cy="11" r="8" />
           <path strokeLinecap="round" d="m21 21-4.35-4.35" />
         </svg>
-        <input
+        <Input
           type="text"
           value={searchQuery}
           onChange={(e) => setSearchQuery(e.target.value)}
           placeholder={t('settings.tools.searchActions')}
-          className="border-border text-foreground placeholder:text-muted-foreground h-10 w-full rounded-full border bg-transparent pr-4 pl-10 text-sm outline-none"
+          className="h-10 rounded-full pr-4 pl-10 text-sm md:text-sm"
         />
       </div>
 
@@ -922,7 +922,7 @@ function APIToolConfig({
                     className={`h-4 w-4 opacity-60 transition-transform duration-200 ${isExpanded ? 'rotate-90' : ''}`}
                   />
                   <span
-                    className={`rounded px-2 py-0.5 text-xs font-medium ${getMethodColor(action.method)}`}
+                    className={`rounded px-2 py-0.5 text-xs font-medium ${getMethodColorClass(action.method)}`}
                   >
                     {action.method}
                   </span>
@@ -939,9 +939,12 @@ function APIToolConfig({
                   className="flex items-center gap-2"
                   onClick={(e) => e.stopPropagation()}
                 >
-                  <button
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon-sm"
                     onClick={() => handleDeleteActionClick(actionName)}
-                    className="mr-2 flex h-6 w-6 items-center justify-center rounded-full"
+                    className="mr-2 h-6 w-6 rounded-full"
                     title={t('convTile.delete')}
                   >
                     <img
@@ -949,14 +952,14 @@ function APIToolConfig({
                       alt="delete"
                       className="h-4 w-4 opacity-40 transition-opacity hover:opacity-100"
                     />
-                  </button>
+                  </Button>
                   <div className="flex items-center gap-1">
                     <span className="text-xs text-gray-500 dark:text-gray-400">
                       {t('settings.tools.requireApproval', 'Approval')}
                     </span>
-                    <ToggleSwitch
+                    <Switch
                       checked={action.require_approval ?? false}
-                      onChange={() => {
+                      onCheckedChange={() => {
                         setApiTool((prevApiTool) => {
                           const updatedActions = {
                             ...prevApiTool.config.actions,
@@ -975,14 +978,12 @@ function APIToolConfig({
                           };
                         });
                       }}
-                      size="small"
                       id={`approvalToggle-${actionIndex}`}
                     />
                   </div>
-                  <ToggleSwitch
+                  <Switch
                     checked={action.active}
-                    onChange={() => handleActionToggle(actionName)}
-                    size="small"
+                    onCheckedChange={() => handleActionToggle(actionName)}
                     id={`actionToggle-${actionIndex}`}
                   />
                 </div>
@@ -1012,8 +1013,7 @@ function APIToolConfig({
                           };
                         });
                       }}
-                      borderVariant="thin"
-                      placeholder={t('settings.tools.urlPlaceholder')}
+                      label={t('settings.tools.urlPlaceholder')}
                     />
                   </div>
                   <div className="mt-4 px-5 py-2">
@@ -1021,18 +1021,9 @@ function APIToolConfig({
                       <span className="text-muted-foreground bg-card absolute -top-2 left-5 z-10 px-2 text-xs">
                         {t('settings.tools.method')}
                       </span>
-                      <Dropdown
-                        options={[
-                          'GET',
-                          'POST',
-                          'PUT',
-                          'DELETE',
-                          'PATCH',
-                          'HEAD',
-                          'OPTIONS',
-                        ]}
-                        selectedValue={action.method}
-                        onSelect={(value: string) => {
+                      <Select
+                        value={action.method}
+                        onValueChange={(value) => {
                           setApiTool((prevApiTool) => {
                             const updatedActions = {
                               ...prevApiTool.config.actions,
@@ -1058,9 +1049,29 @@ function APIToolConfig({
                             };
                           });
                         }}
-                        size="w-56"
-                        rounded="3xl"
-                      />
+                      >
+                        <SelectTrigger
+                          className="w-56 rounded-3xl px-5 py-3"
+                          size="lg"
+                        >
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {[
+                            'GET',
+                            'POST',
+                            'PUT',
+                            'DELETE',
+                            'PATCH',
+                            'HEAD',
+                            'OPTIONS',
+                          ].map((m) => (
+                            <SelectItem key={m} value={m}>
+                              {m}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
                     </div>
                   </div>
                   <div className="mt-4 px-5 py-2">
@@ -1086,8 +1097,7 @@ function APIToolConfig({
                           };
                         });
                       }}
-                      borderVariant="thin"
-                      placeholder={t('settings.tools.descriptionPlaceholder')}
+                      label={t('settings.tools.descriptionPlaceholder')}
                     />
                   </div>
                   {(action.method === 'POST' ||
@@ -1100,19 +1110,9 @@ function APIToolConfig({
                         <span className="text-muted-foreground bg-card absolute -top-2 left-5 z-10 px-2 text-xs">
                           {t('settings.tools.bodyContentType')}
                         </span>
-                        <Dropdown
-                          options={[
-                            'application/json',
-                            'application/x-www-form-urlencoded',
-                            'multipart/form-data',
-                            'text/plain',
-                            'application/xml',
-                            'application/octet-stream',
-                          ]}
-                          selectedValue={
-                            action.body_content_type || 'application/json'
-                          }
-                          onSelect={(value: string) => {
+                        <Select
+                          value={action.body_content_type || 'application/json'}
+                          onValueChange={(value) => {
                             setApiTool((prevApiTool) => {
                               const updatedActions = {
                                 ...prevApiTool.config.actions,
@@ -1137,9 +1137,28 @@ function APIToolConfig({
                               };
                             });
                           }}
-                          size="w-56"
-                          rounded="3xl"
-                        />
+                        >
+                          <SelectTrigger
+                            className="w-56 rounded-3xl px-5 py-3"
+                            size="lg"
+                          >
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {[
+                              'application/json',
+                              'application/x-www-form-urlencoded',
+                              'multipart/form-data',
+                              'text/plain',
+                              'application/xml',
+                              'application/octet-stream',
+                            ].map((ct) => (
+                              <SelectItem key={ct} value={ct}>
+                                {ct}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
                       </div>
                       <p className="text-foreground dark:text-foreground mt-2 text-xs opacity-60">
                         {action.body_content_type === 'multipart/form-data' &&
@@ -1391,9 +1410,9 @@ function APIActionTable({
                 {editingPropertyKey.section === section &&
                 editingPropertyKey.oldKey === key ? (
                   <div className="flex flex-row items-center justify-between gap-2">
-                    <input
+                    <Input
                       value={newPropertyKey}
-                      className="border-border dark:border-border flex w-full min-w-[130.5px] items-start rounded-lg border bg-transparent px-2 py-1 text-sm outline-hidden"
+                      className="h-auto min-w-[130.5px] rounded-lg px-2 py-1 text-sm shadow-none md:text-sm"
                       onChange={(e) => setNewPropertyKey(e.target.value)}
                       onKeyDown={(e) => {
                         if (e.key === 'Enter') {
@@ -1402,7 +1421,10 @@ function APIActionTable({
                       }}
                     />
                     <div className="mt-1">
-                      <button
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon-sm"
                         onClick={handleRenameProperty}
                         className="mr-1 h-5 w-5"
                       >
@@ -1411,19 +1433,22 @@ function APIActionTable({
                           alt="check"
                           className="h-5 w-5"
                         />
-                      </button>
-                      <button
+                      </Button>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon-sm"
                         onClick={handleRenamePropertyCancel}
                         className="h-5 w-5"
                       >
                         <img src={CircleX} alt="cancel" className="h-5 w-5" />
-                      </button>
+                      </Button>
                     </div>
                   </div>
                 ) : (
-                  <input
+                  <Input
                     value={key}
-                    className="border-border dark:border-border flex w-full min-w-[175.5px] items-start rounded-lg border bg-transparent px-2 py-1 text-sm outline-hidden"
+                    className="h-auto min-w-[175.5px] rounded-lg px-2 py-1 text-sm shadow-none md:text-sm"
                     onFocus={() => handleRenamePropertyStart(section, key)}
                     readOnly
                   />
@@ -1439,7 +1464,7 @@ function APIActionTable({
                       e.target.value as 'string' | 'integer',
                     )
                   }
-                  className="border-border dark:border-border rounded-lg border bg-transparent px-2 py-1 text-sm outline-hidden"
+                  className="border-border dark:border-border focus-visible:ring-ring/50 rounded-lg border bg-transparent px-2 py-1 text-sm outline-hidden focus-visible:ring-2"
                 >
                   <option value="string">string</option>
                   <option value="integer">integer</option>
@@ -1465,9 +1490,9 @@ function APIActionTable({
                 </label>
               </td>
               <td className="w-10">
-                <input
+                <Input
                   value={param.description}
-                  className="border-border dark:border-border rounded-lg border bg-transparent px-2 py-1 text-sm outline-hidden"
+                  className="h-auto rounded-lg px-2 py-1 text-sm shadow-none md:text-sm"
                   onChange={(e) =>
                     handlePropertyChange(
                       section,
@@ -1476,33 +1501,30 @@ function APIActionTable({
                       e.target.value,
                     )
                   }
-                ></input>
+                />
               </td>
               <td>
-                <input
+                <Input
                   value={param.value}
                   disabled={param.filled_by_llm}
                   onChange={(e) =>
                     handlePropertyChange(section, key, 'value', e.target.value)
                   }
-                  className={`border-border dark:border-border rounded-lg border bg-transparent px-2 py-1 text-sm outline-hidden ${param.filled_by_llm ? 'opacity-50' : ''}`}
-                ></input>
+                  className={`h-auto rounded-lg px-2 py-1 text-sm shadow-none md:text-sm ${param.filled_by_llm ? 'opacity-50' : ''}`}
+                />
               </td>
               <td
-                style={{
-                  width: '50px',
-                  minWidth: '50px',
-                  maxWidth: '50px',
-                  padding: '0',
-                }}
-                className="border-border dark:border-border border-b"
+                className={`border-border dark:border-border border-b ${NARROW_CELL}`}
               >
-                <button
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon-sm"
                   onClick={() => handlePorpertyDelete(section, key)}
                   className="h-4 w-4 opacity-60 hover:opacity-100"
                 >
                   <img src={Trash} alt="delete" className="h-4 w-4"></img>
-                </button>
+                </Button>
               </td>
             </tr>
           ),
@@ -1510,7 +1532,7 @@ function APIActionTable({
         {addingPropertySection === section ? (
           <tr>
             <td>
-              <input
+              <Input
                 value={newPropertyKey}
                 onChange={(e) => setNewPropertyKey(e.target.value)}
                 onKeyDown={(e) => {
@@ -1519,7 +1541,7 @@ function APIActionTable({
                   }
                 }}
                 placeholder={t('settings.tools.propertyName')}
-                className="border-border dark:border-border flex w-full min-w-[130.5px] items-start rounded-lg border bg-transparent px-2 py-1 text-sm outline-hidden"
+                className="h-auto min-w-[130.5px] rounded-lg px-2 py-1 text-sm shadow-none md:text-sm"
               />
             </td>
             <td>
@@ -1528,53 +1550,48 @@ function APIActionTable({
                 onChange={(e) =>
                   setNewPropertyType(e.target.value as 'string' | 'integer')
                 }
-                className="border-border dark:border-border rounded-lg border bg-transparent px-2 py-1 text-sm outline-hidden"
+                className="border-border dark:border-border focus-visible:ring-ring/50 rounded-lg border bg-transparent px-2 py-1 text-sm outline-hidden focus-visible:ring-2"
               >
                 <option value="string">string</option>
                 <option value="integer">integer</option>
               </select>
             </td>
             <td colSpan={3} className="text-right">
-              <button
+              <Button
+                type="button"
+                variant="default"
+                size="sm"
                 onClick={handleAddProperty}
-                className="bg-primary hover:bg-primary/90 mr-1 rounded-full px-5 py-1 text-sm text-white"
+                className="mr-1 rounded-full px-5 text-white"
               >
                 {t('settings.tools.add')}
-              </button>
-              <button
+              </Button>
+              <Button
+                type="button"
+                variant="destructive-outline"
+                size="sm"
                 onClick={handleAddPropertyCancel}
-                className="rounded-full border border-solid border-red-500 px-5 py-1 text-sm text-red-500 hover:bg-red-500 hover:text-white"
+                className="rounded-full px-5"
               >
                 {t('settings.tools.cancel')}
-              </button>
+              </Button>
             </td>
-            <td
-              style={{
-                width: '50px',
-                minWidth: '50px',
-                maxWidth: '50px',
-                padding: '0',
-              }}
-            ></td>
+            <td className={NARROW_CELL}></td>
           </tr>
         ) : (
           <tr>
             <td colSpan={5}>
-              <button
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
                 onClick={() => handleAddPropertyStart(section)}
-                className="border-primary text-primary hover:bg-primary/90 flex items-start rounded-full border border-solid px-5 py-1 text-sm text-nowrap transition-colors hover:text-white"
+                className="border-primary text-primary hover:bg-primary/90 rounded-full px-5 text-nowrap hover:text-white"
               >
                 {t('settings.tools.addNew')}
-              </button>
+              </Button>
             </td>
-            <td
-              style={{
-                width: '50px',
-                minWidth: '50px',
-                maxWidth: '50px',
-                padding: '0',
-              }}
-            ></td>
+            <td className={NARROW_CELL}></td>
           </tr>
         )}
       </>
@@ -1591,9 +1608,9 @@ function APIActionTable({
                 {editingPropertyKey.section === 'headers' &&
                 editingPropertyKey.oldKey === key ? (
                   <div className="flex flex-row items-center justify-between gap-2">
-                    <input
+                    <Input
                       value={newPropertyKey}
-                      className="border-border dark:border-border flex w-full min-w-[130.5px] items-start rounded-lg border bg-transparent px-2 py-1 text-sm outline-hidden"
+                      className="h-auto min-w-[130.5px] rounded-lg px-2 py-1 text-sm shadow-none md:text-sm"
                       onChange={(e) => setNewPropertyKey(e.target.value)}
                       onKeyDown={(e) => {
                         if (e.key === 'Enter') {
@@ -1602,7 +1619,10 @@ function APIActionTable({
                       }}
                     />
                     <div className="mt-1">
-                      <button
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon-sm"
                         onClick={handleRenameProperty}
                         className="mr-1 h-5 w-5"
                       >
@@ -1611,26 +1631,29 @@ function APIActionTable({
                           alt="check"
                           className="h-5 w-5"
                         />
-                      </button>
-                      <button
+                      </Button>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon-sm"
                         onClick={handleRenamePropertyCancel}
                         className="h-5 w-5"
                       >
                         <img src={CircleX} alt="cancel" className="h-5 w-5" />
-                      </button>
+                      </Button>
                     </div>
                   </div>
                 ) : (
-                  <input
+                  <Input
                     value={key}
-                    className="border-border dark:border-border flex w-full min-w-[175.5px] items-start rounded-lg border bg-transparent px-2 py-1 text-sm outline-hidden"
+                    className="h-auto min-w-[175.5px] rounded-lg px-2 py-1 text-sm shadow-none md:text-sm"
                     onFocus={() => handleRenamePropertyStart('headers', key)}
                     readOnly
                   />
                 )}
               </td>
               <td>
-                <input
+                <Input
                   value={param.value}
                   onChange={(e) =>
                     handlePropertyChange(
@@ -1641,13 +1664,13 @@ function APIActionTable({
                     )
                   }
                   placeholder="e.g., application/json"
-                  className="border-border dark:border-border w-full rounded-lg border bg-transparent px-2 py-1 text-sm outline-hidden"
+                  className="h-auto rounded-lg px-2 py-1 text-sm shadow-none md:text-sm"
                 />
               </td>
               <td>
-                <input
+                <Input
                   value={param.description}
-                  className="border-border dark:border-border rounded-lg border bg-transparent px-2 py-1 text-sm outline-hidden"
+                  className="h-auto rounded-lg px-2 py-1 text-sm shadow-none md:text-sm"
                   onChange={(e) =>
                     handlePropertyChange(
                       'headers',
@@ -1659,20 +1682,17 @@ function APIActionTable({
                 />
               </td>
               <td
-                style={{
-                  width: '50px',
-                  minWidth: '50px',
-                  maxWidth: '50px',
-                  padding: '0',
-                }}
-                className="border-border dark:border-border border-b"
+                className={`border-border dark:border-border border-b ${NARROW_CELL}`}
               >
-                <button
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon-sm"
                   onClick={() => handlePorpertyDelete('headers', key)}
                   className="h-4 w-4 opacity-60 hover:opacity-100"
                 >
                   <img src={Trash} alt="delete" className="h-4 w-4"></img>
-                </button>
+                </Button>
               </td>
             </tr>
           ),
@@ -1680,7 +1700,7 @@ function APIActionTable({
         {addingPropertySection === 'headers' ? (
           <tr>
             <td>
-              <input
+              <Input
                 value={newPropertyKey}
                 onChange={(e) => setNewPropertyKey(e.target.value)}
                 onKeyDown={(e) => {
@@ -1689,50 +1709,45 @@ function APIActionTable({
                   }
                 }}
                 placeholder={t('settings.tools.propertyName')}
-                className="border-border dark:border-border flex w-full min-w-[130.5px] items-start rounded-lg border bg-transparent px-2 py-1 text-sm outline-hidden"
+                className="h-auto min-w-[130.5px] rounded-lg px-2 py-1 text-sm shadow-none md:text-sm"
               />
             </td>
             <td colSpan={2} className="text-right">
-              <button
+              <Button
+                type="button"
+                variant="default"
+                size="sm"
                 onClick={handleAddProperty}
-                className="bg-primary hover:bg-primary/90 mr-1 rounded-full px-5 py-1 text-sm text-white"
+                className="mr-1 rounded-full px-5 text-white"
               >
                 {t('settings.tools.add')}
-              </button>
-              <button
+              </Button>
+              <Button
+                type="button"
+                variant="destructive-outline"
+                size="sm"
                 onClick={handleAddPropertyCancel}
-                className="rounded-full border border-solid border-red-500 px-5 py-1 text-sm text-red-500 hover:bg-red-500 hover:text-white"
+                className="rounded-full px-5"
               >
                 {t('settings.tools.cancel')}
-              </button>
+              </Button>
             </td>
-            <td
-              style={{
-                width: '50px',
-                minWidth: '50px',
-                maxWidth: '50px',
-                padding: '0',
-              }}
-            ></td>
+            <td className={NARROW_CELL}></td>
           </tr>
         ) : (
           <tr>
             <td colSpan={3}>
-              <button
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
                 onClick={() => handleAddPropertyStart('headers')}
-                className="border-primary text-primary hover:bg-primary/90 flex items-start rounded-full border border-solid px-5 py-1 text-sm text-nowrap transition-colors hover:text-white"
+                className="border-primary text-primary hover:bg-primary/90 rounded-full px-5 text-nowrap hover:text-white"
               >
                 {t('settings.tools.addNew')}
-              </button>
+              </Button>
             </td>
-            <td
-              style={{
-                width: '50px',
-                minWidth: '50px',
-                maxWidth: '50px',
-                padding: '0',
-              }}
-            ></td>
+            <td className={NARROW_CELL}></td>
           </tr>
         )}
       </>
@@ -1757,14 +1772,7 @@ function APIActionTable({
               <th className="text-foreground dark:text-foreground px-2 py-1 text-left text-sm font-normal">
                 {t('settings.tools.description')}
               </th>
-              <th
-                style={{
-                  width: '50px',
-                  minWidth: '50px',
-                  maxWidth: '50px',
-                  padding: '0',
-                }}
-              ></th>
+              <th className={NARROW_CELL}></th>
             </tr>
           </thead>
           <tbody>{renderHeadersTable()}</tbody>
@@ -1792,14 +1800,7 @@ function APIActionTable({
               <th className="text-foreground dark:text-foreground px-2 py-1 text-left text-sm font-normal">
                 {t('settings.tools.value')}
               </th>
-              <th
-                style={{
-                  width: '50px',
-                  minWidth: '50px',
-                  maxWidth: '50px',
-                  padding: '0',
-                }}
-              ></th>
+              <th className={NARROW_CELL}></th>
             </tr>
           </thead>
           <tbody>{renderPropertiesTable('query_params')}</tbody>
@@ -1827,14 +1828,7 @@ function APIActionTable({
               <th className="text-foreground dark:text-foreground px-2 py-1 text-left text-sm font-normal">
                 {t('settings.tools.value')}
               </th>
-              <th
-                style={{
-                  width: '50px',
-                  minWidth: '50px',
-                  maxWidth: '50px',
-                  padding: '0',
-                }}
-              ></th>
+              <th className={NARROW_CELL}></th>
             </tr>
           </thead>
           <tbody>{renderPropertiesTable('body')}</tbody>
diff --git a/frontend/src/settings/Tools.tsx b/frontend/src/settings/Tools.tsx
index 5876af4b..5515869a 100644
--- a/frontend/src/settings/Tools.tsx
+++ b/frontend/src/settings/Tools.tsx
@@ -1,4 +1,5 @@
 import { RefreshCcw, Trash } from 'lucide-react';
+import type { LucideIcon } from 'lucide-react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
@@ -9,9 +10,16 @@ import NoFilesDarkIcon from '../assets/no-files-dark.svg';
 import NoFilesIcon from '../assets/no-files.svg';
 import SearchIcon from '../assets/search.svg';
 import ThreeDotsIcon from '../assets/three-dots.svg';
-import ContextMenu, { MenuOption } from '../components/ContextMenu';
 import SkeletonLoader from '../components/SkeletonLoader';
-import ToggleSwitch from '../components/ToggleSwitch';
+import { Button } from '../components/ui/button';
+import { Switch } from '../components/ui/switch';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '../components/ui/dropdown-menu';
+import { Input } from '../components/ui/input';
 import { useDarkTheme, useLoaderState } from '../hooks';
 import AddToolModal from '../modals/AddToolModal';
 import ConfirmationModal from '../modals/ConfirmationModal';
@@ -21,6 +29,16 @@ import { selectToken } from '../preferences/preferenceSlice';
 import ToolConfig from './ToolConfig';
 import { APIToolType, UserToolType } from './types';
 
+type ToolsMenuOption = {
+  icon: string | LucideIcon;
+  label: string;
+  onClick: () => void;
+  variant: 'default' | 'destructive';
+  iconWidth?: number;
+  iconHeight?: number;
+  iconClassName?: string;
+};
+
 export default function Tools() {
   const { t } = useTranslation();
   const token = useSelector(selectToken);
@@ -34,10 +52,6 @@ export default function Tools() {
     UserToolType | APIToolType | null
   >(null);
   const [loading, setLoading] = useLoaderState(false);
-  const [activeMenuId, setActiveMenuId] = React.useState<string | null>(null);
-  const menuRefs = React.useRef<{
-    [key: string]: React.RefObject<HTMLDivElement | null>;
-  }>({});
   const [deleteModalState, setDeleteModalState] =
     React.useState<ActiveState>('INACTIVE');
   const [toolToDelete, setToolToDelete] = React.useState<UserToolType | null>(
@@ -50,14 +64,6 @@ export default function Tools() {
     [toolId: string]: string;
   }>({});
 
-  React.useEffect(() => {
-    userTools.forEach((tool) => {
-      if (!menuRefs.current[tool.id]) {
-        menuRefs.current[tool.id] = React.createRef<HTMLDivElement>();
-      }
-    });
-  }, [userTools]);
-
   const handleDeleteTool = (tool: UserToolType) => {
     setToolToDelete(tool);
     setDeleteModalState('ACTIVE');
@@ -91,13 +97,13 @@ export default function Tools() {
     setReconnectModalState('ACTIVE');
   };
 
-  const getMenuOptions = (tool: UserToolType): MenuOption[] => {
-    const options: MenuOption[] = [
+  const getMenuOptions = (tool: UserToolType): ToolsMenuOption[] => {
+    const options: ToolsMenuOption[] = [
       {
         icon: Edit,
         label: t('settings.tools.edit'),
         onClick: () => handleSettingsClick(tool),
-        variant: 'primary',
+        variant: 'default',
         iconWidth: 14,
         iconHeight: 14,
       },
@@ -105,7 +111,7 @@ export default function Tools() {
         icon: Trash,
         label: t('settings.tools.delete'),
         onClick: () => handleDeleteTool(tool),
-        variant: 'danger',
+        variant: 'destructive',
         iconWidth: 16,
         iconHeight: 16,
       },
@@ -115,7 +121,7 @@ export default function Tools() {
         icon: RefreshCcw,
         label: t('settings.tools.reconnect'),
         onClick: () => handleReconnect(tool),
-        variant: 'primary',
+        variant: 'default',
         iconWidth: 16,
         iconHeight: 16,
         iconClassName: 'text-[#747474]',
@@ -218,35 +224,39 @@ export default function Tools() {
       ) : (
         <div className="mt-8">
           <div className="relative flex flex-col">
-            <p className="text-muted-foreground mb-5 text-[15px] leading-6">
+            <p className="text-muted-foreground mb-5 text-sm leading-6">
               {t('settings.tools.subtitle')}
             </p>
             <div className="my-3 flex flex-col items-start gap-3 sm:flex-row sm:items-center sm:justify-between">
-              <div className="relative w-full max-w-md">
-                <img
-                  src={SearchIcon}
-                  alt=""
-                  className="absolute top-1/2 left-4 h-5 w-5 -translate-y-1/2 opacity-40"
-                />
-                <input
+              <div className="w-full max-w-md">
+                <Input
                   maxLength={256}
-                  placeholder={t('settings.tools.searchPlaceholder')}
+                  label={t('settings.tools.searchPlaceholder')}
                   name="Document-search-input"
                   type="text"
                   id="tool-search-input"
                   value={searchTerm}
                   onChange={(e) => setSearchTerm(e.target.value)}
-                  className="border-border bg-card text-foreground placeholder:text-muted-foreground h-11 w-full rounded-full border py-2 pr-5 pl-11 text-sm shadow-[0_1px_4px_rgba(0,0,0,0.06)] transition-shadow outline-none focus:shadow-[0_2px_8px_rgba(0,0,0,0.1)] dark:shadow-none"
+                  labelBgClassName="bg-background"
+                  className="rounded-full"
+                  leftIcon={
+                    <img
+                      src={SearchIcon}
+                      alt=""
+                      className="h-4 w-4 opacity-40"
+                    />
+                  }
                 />
               </div>
-              <button
-                className="bg-primary hover:bg-primary/90 flex h-11 min-w-[108px] items-center justify-center rounded-full px-4 text-sm whitespace-normal text-white"
+              <Button
+                type="button"
+                className="h-11 min-w-[108px] rounded-full whitespace-normal text-white"
                 onClick={() => {
                   setAddToolModalState('ACTIVE');
                 }}
               >
                 {t('settings.tools.addTool')}
-              </button>
+              </Button>
             </div>
             <div className="border-border dark:border-border mt-5 mb-8 border-b" />
             {loading ? (
@@ -288,35 +298,68 @@ export default function Tools() {
                       filtered.map((tool, index) => (
                         <div
                           key={index}
-                          className="bg-muted hover:bg-accent relative flex h-52 w-[300px] flex-col justify-between overflow-hidden rounded-2xl p-6"
+                          className="bg-muted hover:bg-accent relative flex h-52 w-[300px] flex-col justify-between overflow-hidden rounded-2xl p-5"
                         >
                           {!tool.default && (
-                            <div
-                              ref={menuRefs.current[tool.id]}
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                setActiveMenuId(
-                                  activeMenuId === tool.id ? null : tool.id,
-                                );
-                              }}
-                              className="absolute top-4 right-4 z-10 cursor-pointer"
-                            >
-                              <img
-                                src={ThreeDotsIcon}
-                                alt={t('settings.tools.settingsIconAlt')}
-                                className="h-[19px] w-[19px]"
-                              />
-                              <ContextMenu
-                                isOpen={activeMenuId === tool.id}
-                                setIsOpen={(isOpen) => {
-                                  setActiveMenuId(isOpen ? tool.id : null);
-                                }}
-                                options={getMenuOptions(tool)}
-                                anchorRef={menuRefs.current[tool.id]}
-                                position="bottom-right"
-                                offset={{ x: 0, y: 0 }}
-                              />
-                            </div>
+                            <DropdownMenu>
+                              <DropdownMenuTrigger asChild>
+                                <button
+                                  type="button"
+                                  onClick={(e) => e.stopPropagation()}
+                                  className="absolute top-4 right-4 z-10 cursor-pointer"
+                                  aria-label={t(
+                                    'settings.tools.settingsIconAlt',
+                                  )}
+                                >
+                                  <img
+                                    src={ThreeDotsIcon}
+                                    alt={t('settings.tools.settingsIconAlt')}
+                                    className="h-[19px] w-[19px]"
+                                  />
+                                </button>
+                              </DropdownMenuTrigger>
+                              <DropdownMenuContent
+                                align="end"
+                                className="min-w-[144px]"
+                              >
+                                {getMenuOptions(tool).map((option, idx) => {
+                                  const IconCmp =
+                                    typeof option.icon !== 'string'
+                                      ? option.icon
+                                      : null;
+                                  return (
+                                    <DropdownMenuItem
+                                      key={idx}
+                                      variant={option.variant}
+                                      onSelect={() => option.onClick()}
+                                    >
+                                      {typeof option.icon === 'string' ? (
+                                        <img
+                                          src={option.icon}
+                                          alt=""
+                                          width={option.iconWidth ?? 16}
+                                          height={option.iconHeight ?? 16}
+                                          className={option.iconClassName}
+                                        />
+                                      ) : (
+                                        IconCmp && (
+                                          <IconCmp
+                                            size={Math.max(
+                                              option.iconWidth ?? 16,
+                                              option.iconHeight ?? 16,
+                                            )}
+                                            strokeWidth={1.75}
+                                            aria-hidden="true"
+                                            className={option.iconClassName}
+                                          />
+                                        )
+                                      )}
+                                      <span>{option.label}</span>
+                                    </DropdownMenuItem>
+                                  );
+                                })}
+                              </DropdownMenuContent>
+                            </DropdownMenu>
                           )}
                           <div className="w-full">
                             <div className="flex w-full items-center gap-2 px-1">
@@ -326,14 +369,14 @@ export default function Tools() {
                                 className="h-6 w-6"
                               />
                               {tool.default && (
-                                <span className="inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-[10px] leading-none font-medium text-gray-600 dark:bg-gray-700/40 dark:text-gray-300">
+                                <span className="inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs leading-none font-medium text-gray-600 dark:bg-gray-700/40 dark:text-gray-300">
                                   {t('settings.tools.builtIn')}
                                 </span>
                               )}
                               {tool.name === 'mcp_tool' &&
                                 mcpStatuses[tool.id] && (
                                   <span
-                                    className={`inline-flex items-center rounded-full px-2 py-0.5 text-[10px] leading-none font-medium ${
+                                    className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs leading-none font-medium ${
                                       mcpStatuses[tool.id] === 'connected'
                                         ? 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300'
                                         : mcpStatuses[tool.id] === 'needs_auth'
@@ -356,12 +399,12 @@ export default function Tools() {
                             <div className="mt-[9px]">
                               <p
                                 title={tool.customName || tool.displayName}
-                                className="text-foreground dark:text-foreground truncate px-1 text-[13px] leading-relaxed font-semibold capitalize"
+                                className="text-foreground dark:text-foreground truncate px-1 text-sm leading-relaxed font-semibold capitalize"
                               >
                                 {tool.customName || tool.displayName}
                               </p>
                               <p
-                                className="text-muted-foreground mt-1 line-clamp-4 max-h-24 overflow-hidden px-1 text-[12px] leading-relaxed break-all"
+                                className="text-muted-foreground mt-1 line-clamp-4 max-h-24 overflow-hidden px-1 text-xs leading-relaxed break-all"
                                 title={tool.description}
                               >
                                 {tool.description}
@@ -369,14 +412,13 @@ export default function Tools() {
                             </div>
                           </div>
                           <div className="absolute right-4 bottom-4">
-                            <ToggleSwitch
+                            <Switch
                               checked={tool.status}
-                              onChange={(checked) =>
+                              onCheckedChange={(checked) =>
                                 updateToolStatus(tool.id, checked)
                               }
-                              size="small"
                               id={`toolToggle-${index}`}
-                              ariaLabel={t('settings.tools.toggleToolAria', {
+                              aria-label={t('settings.tools.toggleToolAria', {
                                 toolName: tool.customName || tool.displayName,
                               })}
                             />
diff --git a/frontend/src/settings/index.tsx b/frontend/src/settings/index.tsx
index 4be7da1f..70b896d0 100644
--- a/frontend/src/settings/index.tsx
+++ b/frontend/src/settings/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import {
@@ -10,7 +10,10 @@ import {
 } from 'react-router-dom';
 
 import userService from '../api/services/userService';
-import SettingsBar from '../components/SettingsBar';
+import ArrowLeft from '../assets/arrow-left.svg';
+import ArrowRight from '../assets/arrow-right.svg';
+import { Button } from '../components/ui/button';
+import { Tabs, TabsList, TabsTrigger } from '../components/ui/tabs';
 import i18n from '../locale/i18n';
 import { Doc } from '../models/misc';
 import {
@@ -27,6 +30,8 @@ import General from './General';
 import Logs from './Logs';
 import Tools from './Tools';
 
+type HiddenGradientType = 'left' | 'right' | undefined;
+
 export default function Settings() {
   const dispatch = useDispatch();
   const { t } = useTranslation();
@@ -46,6 +51,37 @@ export default function Settings() {
   };
 
   const [activeTab, setActiveTab] = React.useState(getActiveTabFromPath());
+  const tabsList = [
+    t('settings.general.label'),
+    t('settings.sources.label'),
+    t('settings.analytics.label'),
+    t('settings.logs.label'),
+    t('settings.tools.label'),
+    t('settings.customModels.label'),
+  ];
+  const [hiddenGradient, setHiddenGradient] =
+    useState<HiddenGradientType>('left');
+  const containerRef = useRef<null | HTMLDivElement>(null);
+
+  const scrollTabs = useCallback(
+    (direction: number) => {
+      if (containerRef.current) {
+        const container = containerRef.current;
+        container.scrollLeft += direction * 100;
+        if (container.scrollLeft === 0) {
+          setHiddenGradient('left');
+        } else if (
+          container.scrollLeft + container.offsetWidth ===
+          container.scrollWidth
+        ) {
+          setHiddenGradient('right');
+        } else {
+          setHiddenGradient(undefined);
+        }
+      }
+    },
+    [containerRef],
+  );
 
   const handleTabChange = (tab: string) => {
     setActiveTab(tab);
@@ -100,10 +136,49 @@ export default function Settings() {
       <p className="text-foreground dark:text-foreground text-2xl font-bold">
         {t('settings.label')}
       </p>
-      <SettingsBar
-        activeTab={activeTab}
-        setActiveTab={(tab) => handleTabChange(tab as string)}
-      />
+      <Tabs
+        value={activeTab}
+        onValueChange={(tab) => handleTabChange(tab)}
+        className="relative mt-6 flex flex-row items-center space-x-1 overflow-auto md:space-x-0"
+      >
+        <div
+          className={`${hiddenGradient === 'left' ? 'hidden' : ''} dark:from-background pointer-events-none absolute inset-y-0 left-6 w-14 bg-linear-to-r from-white md:hidden`}
+        ></div>
+        <div
+          className={`${hiddenGradient === 'right' ? 'hidden' : ''} dark:from-background pointer-events-none absolute inset-y-0 right-6 w-14 bg-linear-to-l from-white md:hidden`}
+        ></div>
+        <div className="z-10 md:hidden">
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon-sm"
+            onClick={() => scrollTabs(-1)}
+            className="hover:bg-muted dark:hover:bg-accent h-6 w-6 rounded-full"
+            aria-label={t('settings.scrollTabsLeft')}
+          >
+            <img src={ArrowLeft} alt="left-arrow" className="h-3" />
+          </Button>
+        </div>
+        <TabsList ref={containerRef} aria-label={t('settings.tabsAriaLabel')}>
+          {tabsList.map((tab) => (
+            <TabsTrigger key={tab} value={tab}>
+              {tab}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+        <div className="z-10 md:hidden">
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon-sm"
+            onClick={() => scrollTabs(1)}
+            className="hover:bg-muted dark:hover:bg-accent h-6 w-6 rounded-full"
+            aria-label={t('settings.scrollTabsRight')}
+          >
+            <img src={ArrowRight} alt="right-arrow" className="h-3" />
+          </Button>
+        </div>
+      </Tabs>
       <Routes>
         <Route index element={<General />} />
         <Route
diff --git a/frontend/src/upload/Upload.tsx b/frontend/src/upload/Upload.tsx
index 0e618248..8f388a70 100644
--- a/frontend/src/upload/Upload.tsx
+++ b/frontend/src/upload/Upload.tsx
@@ -6,10 +6,18 @@ import { useDispatch, useSelector, useStore } from 'react-redux';
 
 import type { RootState } from '../store';
 import { getSessionToken } from '../utils/providerUtils';
-import Dropdown from '../components/Dropdown';
-import Input from '../components/Input';
-import ToggleSwitch from '../components/ToggleSwitch';
-import WrapperModal from '../modals/WrapperModal';
+import { Button } from '../components/ui/button';
+import { Input } from '../components/ui/input';
+import { Label } from '../components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../components/ui/select';
+import { Switch } from '../components/ui/switch';
+import { Modal } from '../components/ui/modal';
 import { ActiveState, Doc } from '../models/misc';
 
 import { getDocs } from '../preferences/preferenceApi';
@@ -104,7 +112,7 @@ function Upload({
         return (
           <Input
             key={field.name}
-            placeholder={field.label}
+            label={field.label}
             type="text"
             name={field.name}
             value={String(
@@ -116,9 +124,7 @@ function Upload({
                 e.target.value,
               )
             }
-            borderVariant="thin"
             required={isRequired}
-            colorVariant="silver"
             labelBgClassName="bg-card"
           />
         );
@@ -126,7 +132,7 @@ function Upload({
         return (
           <Input
             key={field.name}
-            placeholder={field.label}
+            label={field.label}
             type="number"
             name={field.name}
             value={String(
@@ -138,53 +144,63 @@ function Upload({
                 Number(e.target.value),
               )
             }
-            borderVariant="thin"
             required={isRequired}
-            colorVariant="silver"
             labelBgClassName="bg-card"
           />
         );
-      case 'enum':
+      case 'enum': {
+        const currentValue = String(
+          ingestor.config[field.name as keyof typeof ingestor.config] ?? '',
+        );
         return (
-          <Dropdown
+          <Select
             key={field.name}
-            options={field.options || []}
-            selectedValue={
-              field.options?.find(
-                (opt) =>
-                  opt.value ===
-                  ingestor.config[field.name as keyof typeof ingestor.config],
-              ) || null
-            }
-            onSelect={(selected: { label: string; value: string }) => {
+            value={currentValue || undefined}
+            onValueChange={(value) => {
               handleIngestorChange(
                 field.name as keyof IngestorConfig['config'],
-                selected.value,
+                value,
               );
             }}
-            size="w-full"
-            rounded="3xl"
-            placeholder={field.label}
-            contentSize="text-sm"
-          />
+          >
+            <SelectTrigger
+              className="w-full rounded-3xl px-5 py-3 text-sm"
+              size="lg"
+            >
+              <SelectValue placeholder={field.label} />
+            </SelectTrigger>
+            <SelectContent>
+              {(field.options || []).map((opt) => (
+                <SelectItem key={opt.value} value={opt.value}>
+                  {opt.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
         );
+      }
       case 'boolean':
         return (
-          <ToggleSwitch
+          <div
             key={field.name}
-            label={field.label}
-            checked={Boolean(
-              ingestor.config[field.name as keyof typeof ingestor.config],
-            )}
-            onChange={(checked: boolean) => {
-              handleIngestorChange(
-                field.name as keyof IngestorConfig['config'],
-                checked,
-              );
-            }}
-            size="small"
-            className={`mt-2 text-base`}
-          />
+            className="mt-2 flex flex-row items-center gap-3 text-base"
+          >
+            <Label htmlFor={`field-${field.name}`} className="text-foreground">
+              {field.label}
+            </Label>
+            <Switch
+              id={`field-${field.name}`}
+              checked={Boolean(
+                ingestor.config[field.name as keyof typeof ingestor.config],
+              )}
+              onCheckedChange={(checked: boolean) => {
+                handleIngestorChange(
+                  field.name as keyof IngestorConfig['config'],
+                  checked,
+                );
+              }}
+            />
+          </div>
         );
       case 'local_file_picker':
         return (
@@ -196,7 +212,7 @@ function Upload({
               </span>
             </div>
             <div className="mt-4 max-w-full">
-              <p className="text-foreground dark:text-foreground mb-3.5 text-[14px] font-medium">
+              <p className="text-foreground dark:text-foreground mb-3.5 text-sm font-medium">
                 {t('modals.uploadDoc.selectedFiles')}
               </p>
               <div className="max-w-full overflow-hidden">
@@ -210,7 +226,7 @@ function Upload({
                   </p>
                 ))}
                 {files.length === 0 && (
-                  <p className="text-muted-foreground text-[14px]">
+                  <p className="text-muted-foreground text-sm">
                     {t('modals.uploadDoc.noFilesSelected')}
                   </p>
                 )}
@@ -850,7 +866,7 @@ function Upload({
             key={option.value}
             className={`relative mx-auto flex h-[91.2px] w-full cursor-pointer flex-col justify-between gap-2 rounded-2xl border border-solid pt-[21.1px] pr-[21px] pb-[15px] pl-[21px] transition-colors duration-300 ease-out ${
               ingestor.type === option.value
-                ? 'border-[#7D54D1] bg-[#7D54D1] text-white'
+                ? 'border-primary bg-primary text-white'
                 : 'border-border hover:bg-accent/30 dark:border-border/30 bg-transparent transition-shadow duration-300 hover:shadow-[0_0_15px_0_#00000026]'
             }`}
             onClick={() =>
@@ -865,7 +881,7 @@ function Upload({
                   className={`${ingestor.type === option.value ? 'invert filter' : ''} dark:invert dark:filter`}
                 />
               </div>
-              <p className="font-inter self-start text-[13px] leading-[18px] font-semibold">
+              <p className="self-start text-sm leading-[18px] font-semibold">
                 {t(`modals.uploadDoc.ingestors.${option.value}.label`)}
               </p>
             </div>
@@ -875,14 +891,18 @@ function Upload({
     );
   };
   return (
-    <WrapperModal
-      close={handleClose}
+    <Modal
+      open={true}
+      onOpenChange={(o) => !o && handleClose()}
+      hideTitle
+      title={t('modals.uploadDoc.label')}
+      size="lg"
       className="max-h-[90vh] w-11/12 sm:max-h-none sm:w-auto sm:min-w-[600px] md:min-w-[700px]"
       contentClassName="max-h-[80vh] sm:max-h-none"
     >
       <div className="flex w-full flex-col gap-6">
         {!ingestor.type && (
-          <p className="font-inter text-foreground dark:text-foreground text-left text-[20px] leading-7 font-semibold tracking-[0.15px]">
+          <p className="text-foreground dark:text-foreground text-left text-xl leading-7 font-semibold tracking-[0.15px]">
             {t('modals.uploadDoc.selectSource')}
           </p>
         )}
@@ -892,9 +912,11 @@ function Upload({
             {!ingestor.type && renderIngestorSelection()}
             {ingestor.type && (
               <div className="flex flex-col gap-4">
-                <button
+                <Button
+                  type="button"
+                  variant="ghost"
                   onClick={() => handleIngestorTypeChange(null)}
-                  className="flex w-fit items-center gap-2 text-[#777777] hover:text-[#555555]"
+                  className="h-auto w-fit gap-2 px-0 py-0 text-[#777777] hover:bg-transparent hover:text-[#555555]"
                 >
                   <img
                     src={ChevronRight}
@@ -902,16 +924,15 @@ function Upload({
                     className="h-3 w-3 rotate-180 transform"
                   />
                   <span>{t('modals.uploadDoc.back')}</span>
-                </button>
+                </Button>
 
-                <h2 className="font-inter text-foreground text-[22px] leading-7 font-semibold tracking-[0.15px]">
+                <h2 className="text-foreground text-2xl leading-7 font-semibold tracking-[0.15px]">
                   {ingestor.type &&
                     t(`modals.uploadDoc.ingestors.${ingestor.type}.heading`)}
                 </h2>
 
                 <Input
                   type="text"
-                  colorVariant="silver"
                   value={ingestor.name}
                   onChange={(e) => {
                     setNameTouched(true);
@@ -920,8 +941,7 @@ function Upload({
                       name: e.target.value,
                     }));
                   }}
-                  borderVariant="thin"
-                  placeholder={t('modals.uploadDoc.name')}
+                  label={t('modals.uploadDoc.name')}
                   required={true}
                   labelBgClassName="bg-card"
                   className="w-full"
@@ -934,34 +954,37 @@ function Upload({
               getIngestorSchema(ingestor.type as IngestorType)?.fields.some(
                 (field: FormField) => field.advanced,
               ) && (
-                <button
+                <Button
+                  type="button"
+                  variant="link"
                   onClick={() => setShowAdvancedOptions(!showAdvancedOptions)}
-                  className="text-primary bg-transparent py-2 pl-0 text-left text-sm font-normal hover:cursor-pointer"
+                  className="h-auto w-fit justify-start px-0 py-2 text-sm font-normal hover:no-underline"
                 >
                   {showAdvancedOptions
                     ? t('modals.uploadDoc.hideAdvanced')
                     : t('modals.uploadDoc.showAdvanced')}
-                </button>
+                </Button>
               )}
           </>
         )}
         <div className="flex justify-end gap-4">
           {activeTab && ingestor.type && (
-            <button
+            <Button
+              type="button"
               onClick={handleUpload}
               disabled={isUploadDisabled()}
-              className={`rounded-3xl px-4 py-2 text-[14px] font-medium ${
+              className={`h-auto rounded-3xl px-4 py-2 text-sm font-medium ${
                 isUploadDisabled()
-                  ? 'dark:bg-muted dark:text-muted-foreground cursor-not-allowed bg-gray-300 text-gray-500'
-                  : 'bg-primary hover:bg-primary/90 cursor-pointer text-white'
+                  ? 'dark:bg-muted dark:text-muted-foreground bg-gray-300 text-gray-500'
+                  : ''
               }`}
             >
               {t('modals.uploadDoc.train')}
-            </button>
+            </Button>
           )}
         </div>
       </div>
-    </WrapperModal>
+    </Modal>
   );
 }
 
diff --git a/frontend/src/utils/httpMethodColors.ts b/frontend/src/utils/httpMethodColors.ts
new file mode 100644
index 00000000..424b3074
--- /dev/null
+++ b/frontend/src/utils/httpMethodColors.ts
@@ -0,0 +1,15 @@
+const METHOD_COLORS: Record<string, string> = {
+  GET: 'bg-[#D1FAE5] text-[#065F46] dark:bg-[#064E3B]/60 dark:text-[#6EE7B7]',
+  POST: 'bg-[#DBEAFE] text-[#1E40AF] dark:bg-[#1E3A8A]/60 dark:text-[#93C5FD]',
+  PUT: 'bg-[#FEF3C7] text-[#92400E] dark:bg-[#78350F]/60 dark:text-[#FCD34D]',
+  DELETE:
+    'bg-[#FEE2E2] text-[#991B1B] dark:bg-[#7F1D1D]/60 dark:text-[#FCA5A5]',
+  PATCH: 'bg-[#EDE9FE] text-[#5B21B6] dark:bg-[#4C1D95]/60 dark:text-[#C4B5FD]',
+  HEAD: 'bg-[#F3F4F6] text-[#374151] dark:bg-[#374151]/60 dark:text-[#D1D5DB]',
+  OPTIONS:
+    'bg-[#F3F4F6] text-[#374151] dark:bg-[#374151]/60 dark:text-[#D1D5DB]',
+};
+
+export function getMethodColorClass(method: string): string {
+  return METHOD_COLORS[method.toUpperCase()] ?? METHOD_COLORS.GET;
+}
diff --git a/frontend/src/components/ToolsPopup.test.ts b/frontend/src/utils/toolUtils.test.ts
similarity index 95%
rename from frontend/src/components/ToolsPopup.test.ts
rename to frontend/src/utils/toolUtils.test.ts
index d62b4e8f..759e92cd 100644
--- a/frontend/src/components/ToolsPopup.test.ts
+++ b/frontend/src/utils/toolUtils.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
-import { isChatToolVisible } from './ToolsPopup';
+import { isChatToolVisible } from './toolUtils';
 
 // Regression for the filter drift introduced when ``scheduler`` was
 // dual-registered (both ``default: true`` and ``builtin: true``). The
diff --git a/frontend/src/utils/toolUtils.ts b/frontend/src/utils/toolUtils.ts
index e97b3429..2838c043 100644
--- a/frontend/src/utils/toolUtils.ts
+++ b/frontend/src/utils/toolUtils.ts
@@ -15,3 +15,12 @@ export function getToolDisplayName(tool: ToolLabelSource): string {
   if (isNonEmptyString(tool.name)) return tool.name.trim();
   return '';
 }
+
+// Chat-popup visibility rule: show defaults (so users can toggle the
+// agentless chat tools on/off) plus any non-builtin user_tools row. Hide
+// pure builtins (agent-only). Dual-registered tools like ``scheduler``
+// carry BOTH flags and stay visible via the ``default`` branch.
+export const isChatToolVisible = (tool: {
+  default?: boolean;
+  builtin?: boolean;
+}): boolean => Boolean(tool.default) || !tool.builtin;