diff --git a/src/components/Common/Playground/WebSearch.tsx b/src/components/Common/Playground/WebSearch.tsx
index cd58cc0..b4c3180 100644
--- a/src/components/Common/Playground/WebSearch.tsx
+++ b/src/components/Common/Playground/WebSearch.tsx
@@ -1,25 +1,19 @@
 import { useWebSearch } from "~store/web"
+import {
+  Globe,
+  MousePointer,
+  Boxes
+} from "lucide-react"
+
 
 export const WebSearch = () => {
-  const {} = useWebSearch()
+  const { state, text } = useWebSearch()
   return (
     <div className="gradient-border mt-4 flex w-56 items-center gap-4 rounded-lg bg-neutral-100 p-1ccc text-slate-900 dark:bg-neutral-800 dark:text-slate-50">
       <div className="rounded p-1">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          strokeWidth={1.5}
-          stroke="currentColor"
-          className="w-6 h-6">
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418"
-          />
-        </svg>
+        
       </div>
-      <div className="text-sm font-semibold">Searching Web</div>
+      <div className="text-sm font-semibold">{text}</div>
     </div>
   )
 }
diff --git a/src/components/Option/Layout.tsx b/src/components/Option/Layout.tsx
index 344c30b..650fcd5 100644
--- a/src/components/Option/Layout.tsx
+++ b/src/components/Option/Layout.tsx
@@ -7,12 +7,8 @@ import { useQuery } from "@tanstack/react-query"
 import { fetchChatModels } from "~services/ollama"
 import { useMessageOption } from "~hooks/useMessageOption"
 import { Settings } from "./Settings"
-import { GithubIcon } from "~icons/GithubIcon"
-import { PanelLeftIcon } from "~icons/PanelLeftIcon"
-import { BrainCircuit } from "~icons/BrainCircuit"
-import { SquarePen } from "~icons/SquarePen"
-import { ChevronLeft } from "~icons/ChevronLeft"
-import { CogIcon } from "~icons/CogIcon"
+import { BrainCircuit, ChevronLeft, CogIcon, GithubIcon, PanelLeftIcon, SquarePen } from "lucide-react"
+
 
 export default function OptionLayout({
   children
diff --git a/src/components/Option/Models/index.tsx b/src/components/Option/Models/index.tsx
index 02e7c6b..b637d7f 100644
--- a/src/components/Option/Models/index.tsx
+++ b/src/components/Option/Models/index.tsx
@@ -6,9 +6,7 @@ import dayjs from "dayjs"
 import relativeTime from "dayjs/plugin/relativeTime"
 import { useState } from "react"
 import { useForm } from "@mantine/form"
-import { Download } from "~icons/Download"
-import { RotateCcw } from "~icons/RotateCcw"
-import { Trash } from "~icons/Trash"
+import { Download, RotateCcw, Trash2 } from "lucide-react"
 
 dayjs.extend(relativeTime)
 
@@ -134,7 +132,7 @@ export const ModelsBody = () => {
                           }
                         }}
                         className="text-red-500 dark:text-red-400">
-                        <Trash className="w-5 h-5" />
+                        <Trash2 className="w-5 h-5" />
                       </button>
                     </Tooltip>
                     <Tooltip title="Re-Pull Model">
diff --git a/src/components/Option/Playground/PlaygroundEmpty.tsx b/src/components/Option/Playground/PlaygroundEmpty.tsx
index c09da75..64485fd 100644
--- a/src/components/Option/Playground/PlaygroundEmpty.tsx
+++ b/src/components/Option/Playground/PlaygroundEmpty.tsx
@@ -1,6 +1,6 @@
 import { useQuery } from "@tanstack/react-query"
+import { RotateCcw } from "lucide-react"
 import { useEffect, useState } from "react"
-import { RotateCcw } from "~icons/RotateCcw"
 import {
   getOllamaURL,
   isOllamaRunning,
diff --git a/src/components/Option/Playground/PlaygroundNewChat.tsx b/src/components/Option/Playground/PlaygroundNewChat.tsx
index e118f6b..71d98b8 100644
--- a/src/components/Option/Playground/PlaygroundNewChat.tsx
+++ b/src/components/Option/Playground/PlaygroundNewChat.tsx
@@ -1,4 +1,4 @@
-import { PencilSquareIcon } from "~icons/PencilSquareIcon"
+import { PencilIcon } from "lucide-react"
 import { useMessage } from "../../../hooks/useMessage"
 
 export const PlaygroundNewChat = () => {
@@ -14,7 +14,7 @@ export const PlaygroundNewChat = () => {
     <button
       onClick={handleClick}
       className="flex w-full border bg-transparent hover:bg-gray-200 dark:hover:bg-gray-800 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:ring-offset-gray-100 rounded-md p-2 dark:border-gray-800">
-      <PencilSquareIcon className="mx-3 h-5 w-5" aria-hidden="true" />
+      <PencilIcon className="mx-3 h-5 w-5" aria-hidden="true" />
       <span className="inline-flex font-semibol text-white text-sm">
         New Chat
       </span>
diff --git a/src/components/Option/Settings/other.tsx b/src/components/Option/Settings/other.tsx
index 54ed6dc..344b6d0 100644
--- a/src/components/Option/Settings/other.tsx
+++ b/src/components/Option/Settings/other.tsx
@@ -4,8 +4,7 @@ import { useMessageOption } from "~hooks/useMessageOption"
 import { PageAssitDatabase } from "~libs/db"
 import { Select } from "antd"
 import { SUPPORTED_LANGUAGES } from "~utils/supporetd-languages"
-import { Sun } from "~icons/Sun"
-import { Moon } from "~icons/Moon"
+import { MoonIcon, SunIcon } from "lucide-react"
 
 export const SettingOther = () => {
   const { clearChat, speechToTextLanguage, setSpeechToTextLanguage } =
@@ -46,9 +45,9 @@ export const SettingOther = () => {
           onClick={toggleDarkMode}
           className={`inline-flex mt-4 items-center rounded-md border border-transparent bg-black px-2 py-2 text-sm font-medium leading-4 text-white shadow-sm  dark:bg-white dark:text-gray-800 disabled:opacity-50 `}>
           {mode === "dark" ? (
-            <Sun className="w-4 h-4 mr-2" />
+            <SunIcon className="w-4 h-4 mr-2" />
           ) : (
-            <Moon className="w-4 h-4 mr-2" />
+            <MoonIcon className="w-4 h-4 mr-2" />
           )}
           {mode === "dark" ? "Light" : "Dark"}
         </button>
diff --git a/src/components/Option/Sidebar.tsx b/src/components/Option/Sidebar.tsx
index cadd882..af9be51 100644
--- a/src/components/Option/Sidebar.tsx
+++ b/src/components/Option/Sidebar.tsx
@@ -6,13 +6,10 @@ import {
   deleteByHistoryId,
   updateHistory
 } from "~libs/db"
-import { Dropdown, Empty, Skeleton, Spin } from "antd"
+import { Empty, Skeleton } from "antd"
 import { useMessageOption } from "~hooks/useMessageOption"
-import { Trash } from "~icons/Trash"
-import { Fragment, useState } from "react"
-import { PencilIcon } from "~icons/PencilIcon"
-import { EllipsisHorizontalIcon } from "~icons/EllipsisHorizontalIcon"
-import { Menu, Transition } from "@headlessui/react"
+import { useState } from "react"
+import { PencilIcon, Trash2 } from "lucide-react"
 
 type Props = {}
 
@@ -117,7 +114,7 @@ export const Sidebar = ({}: Props) => {
                     setProcessingId(chat.id)
                   }}
                   className="text-red-500 dark:text-red-400 opacity-80">
-                  <Trash className=" w-4 h-4 " />
+                  <Trash2 className=" w-4 h-4 " />
                 </button>
               </div>
             </div>
diff --git a/src/components/Sidepanel/Chat/empty.tsx b/src/components/Sidepanel/Chat/empty.tsx
index d52e087..bb99c79 100644
--- a/src/components/Sidepanel/Chat/empty.tsx
+++ b/src/components/Sidepanel/Chat/empty.tsx
@@ -1,8 +1,8 @@
 import { useQuery } from "@tanstack/react-query"
 import { Select } from "antd"
+import { RotateCcw } from "lucide-react"
 import { useEffect, useState } from "react"
 import { useMessage } from "~hooks/useMessage"
-import { RotateCcw } from "~icons/RotateCcw"
 import {
   fetchChatModels,
   getOllamaURL,
diff --git a/src/components/Sidepanel/Chat/header.tsx b/src/components/Sidepanel/Chat/header.tsx
index 361ab6c..636a207 100644
--- a/src/components/Sidepanel/Chat/header.tsx
+++ b/src/components/Sidepanel/Chat/header.tsx
@@ -2,9 +2,7 @@ import logoImage from "data-base64:~assets/icon.png"
 import { useMessage } from "~hooks/useMessage"
 import { Link } from "react-router-dom"
 import { Tooltip } from "antd"
-import { CogIcon } from "~icons/CogIcon"
-import { BoxesIcon } from "~icons/BoxesIcon"
-import { ArrowPathIcon } from "~icons/ArrowPathIcon"
+import { BoxesIcon, CogIcon, RefreshCcw } from "lucide-react"
 export const SidepanelHeader = () => {
   const { clearChat, isEmbedding } = useMessage()
   return (
@@ -25,7 +23,7 @@ export const SidepanelHeader = () => {
             clearChat()
           }}
           className="flex items-center space-x-1 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-700">
-          <ArrowPathIcon className="h-5 w-5 text-gray-500 dark:text-gray-400" />
+          <RefreshCcw className="h-5 w-5 text-gray-500 dark:text-gray-400" />
         </button>
         <Link to="/settings">
           <CogIcon className="h-5 w-5 text-gray-500 dark:text-gray-400" />
diff --git a/src/components/Sidepanel/Settings/body.tsx b/src/components/Sidepanel/Settings/body.tsx
index eb71b3d..1928957 100644
--- a/src/components/Sidepanel/Settings/body.tsx
+++ b/src/components/Sidepanel/Settings/body.tsx
@@ -19,8 +19,7 @@ import { useDarkMode } from "~hooks/useDarkmode"
 import { SaveButton } from "~components/Common/SaveButton"
 import { SUPPORTED_LANGUAGES } from "~utils/supporetd-languages"
 import { useMessage } from "~hooks/useMessage"
-import { Sun } from "~icons/Sun"
-import { Moon } from "~icons/Moon"
+import { MoonIcon, SunIcon } from "lucide-react"
 
 export const SettingsBody = () => {
   const [ollamaURL, setOllamaURL] = React.useState<string>("")
@@ -281,14 +280,14 @@ export const SettingsBody = () => {
           <button
             onClick={toggleDarkMode}
             className="select-none inline-flex w-full rounded-lg border border-gray-900 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-gray-900 transition-all hover:opacity-75 focus:ring focus:ring-gray-300 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none dark:border-gray-100 dark:text-white dark:hover:opacity-75 dark:focus:ring-dark dark:active:opacity-75 dark:disabled:pointer-events-none dark:disabled:opacity-50 dark:disabled:shadow-none">
-            <Sun className="h-4 w-4 mr-2" />
+            <SunIcon className="h-4 w-4 mr-2" />
             Light
           </button>
         ) : (
           <button
             onClick={toggleDarkMode}
             className="select-none inline-flex w-full rounded-lg border border-gray-900 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-gray-900 transition-all hover:opacity-75 focus:ring focus:ring-gray-300 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none dark:border-gray-100 dark:text-white dark:hover:opacity-75 dark:focus:ring-dark dark:active:opacity-75 dark:disabled:pointer-events-none dark:disabled:opacity-50 dark:disabled:shadow-none">
-            <Moon className="h-4 w-4 mr-2" />
+            <MoonIcon className="h-4 w-4 mr-2" />
             Dark
           </button>
         )}
diff --git a/src/components/Sidepanel/Settings/header.tsx b/src/components/Sidepanel/Settings/header.tsx
index ca96585..95f3172 100644
--- a/src/components/Sidepanel/Settings/header.tsx
+++ b/src/components/Sidepanel/Settings/header.tsx
@@ -1,6 +1,6 @@
 import logoImage from "data-base64:~assets/icon.png"
+import { ChevronLeft } from "lucide-react"
 import { Link } from "react-router-dom"
-import { ChevronLeft } from "~icons/ChevronLeft"
 export const SidepanelSettingsHeader = () => {
   return (
     <div className="flex px-3 justify-start gap-3 bg-white dark:bg-[#171717] border-b border-gray-300 dark:border-gray-700  py-4 items-center">