diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2295ee8..78fb0a3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,18 @@
+## [2.38.1] - 2025-10-15
+
+### 🚀 Enhancements
+
+- _(sidebar)_ Add conversation search functionality (#223)
+
+### 🎨 Styling
+
+- _(chat)_ Update styling for main content and chat input (#224)
+
+### 🚜 Refactor
+
+- _(Input)_ Replace native input with custom Input component (#222)
+- _(icon)_ Migrate to direct icon component usage (#225)
+
 ## [2.38.0] - 2025-10-12
 
 ### 🚀 Enhancements
diff --git a/package-lock.json b/package-lock.json
index ab7e52e..192b0ba 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "llama.ui",
-  "version": "2.38.0",
+  "version": "2.38.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "llama.ui",
-      "version": "2.38.0",
+      "version": "2.38.1",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/react-collapsible": "^1.1.12",
diff --git a/package.json b/package.json
index f43189d..b5ffb68 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "private": true,
   "name": "llama.ui",
   "description": "A minimal Interface for AI Companion that runs entirely in your browser.",
-  "version": "2.38.0",
+  "version": "2.38.1",
   "homepage": "https://llama-ui.js.org/",
   "license": "MIT",
   "type": "module",
diff --git a/src/App.tsx b/src/App.tsx
index 324aaa3..043a9d6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -55,7 +55,7 @@ const AppLayout: FC = () => {
       <div className="drawer-content flex flex-col w-full h-screen px-1 md:px-2 bg-base-300">
         <Header />
         <main
-          className="grow flex flex-col overflow-auto bg-base-100 rounded-xl"
+          className="grow flex flex-col overflow-auto bg-base-100 rounded-xl border-1 border-base-content/20 border-input inset-shadow-sm"
           id="main-scroll"
         >
           <Outlet />
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 8b9f0ba..462efcf 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -2,7 +2,7 @@ import { cva, VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 import { cn } from '../utils';
 
-const variants = cva('btn', {
+const ButtonVariants = cva('btn', {
   variants: {
     variant: {
       default: '',
@@ -15,8 +15,9 @@ const variants = cva('btn', {
       default: '',
       small: 'btn-sm',
       icon: 'w-8 h-8 p-0',
-      'icon-rounded': 'w-8 h-8 p-0 rounded-full',
-      'icon-small': 'btn-sm w-4 h-4 p-0 rounded-full',
+      'icon-sm': 'btn-sm w-4 h-4 p-0 rounded-full',
+      'icon-md': 'btn-sm w-5 h-5 p-0 rounded-full',
+      'icon-xl': 'w-8 h-8 p-0 rounded-full',
     },
   },
   defaultVariants: {
@@ -26,13 +27,13 @@ const variants = cva('btn', {
 });
 
 export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
-  VariantProps<typeof variants>;
+  VariantProps<typeof ButtonVariants>;
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, ...props }, ref) => (
     <button
       type="button"
-      className={cn(variants({ variant, size, className }))}
+      className={cn(ButtonVariants({ variant, size, className }))}
       ref={ref}
       dir="auto"
       {...props}
diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx
index 66b485b..f94dade 100644
--- a/src/components/Dropdown.tsx
+++ b/src/components/Dropdown.tsx
@@ -1,5 +1,6 @@
 import { ReactNode, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { LuChevronDown } from 'react-icons/lu';
 import { isDev } from '../config';
 import { classNames } from '../utils';
 import { Button } from './Button';
@@ -114,7 +115,9 @@ export function Dropdown<T extends DropdownOption>({
           >
             {currentValue}
             {!hideChevron && (
-              <Icon icon="LuChevronDown" variant="rightside" size="md" />
+              <Icon variant="rightside" size="md">
+                <LuChevronDown />
+              </Icon>
             )}
           </summary>
 
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index a115798..3cfa0b0 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { LuCog, LuMenu, LuSquarePen } from 'react-icons/lu';
 import { useNavigate } from 'react-router';
 import { useAppContext } from '../store/app';
 import { useChatContext } from '../store/chat';
@@ -42,7 +43,9 @@ export default function Header() {
       <section className="flex flex-row items-center xl:hidden">
         {/* open sidebar button */}
         <Label variant="btn-ghost" size="icon" htmlFor="toggle-drawer">
-          <Icon icon="LuMenu" size="md" />
+          <Icon size="md">
+            <LuMenu />
+          </Icon>
         </Label>
 
         {/* spacer */}
@@ -63,12 +66,14 @@ export default function Header() {
         {/* new conversation button */}
         <Button
           variant="ghost"
-          size="icon-rounded"
+          size="icon-xl"
           onClick={() => navigate('/')}
           title={t('header.buttons.newConv')}
           aria-label={t('header.ariaLabels.newConv')}
         >
-          <Icon icon="LuSquarePen" size="md" />
+          <Icon size="md">
+            <LuSquarePen />
+          </Icon>
         </Button>
       </section>
 
@@ -122,14 +127,16 @@ export default function Header() {
           <div className="flex items-center">
             <Button
               variant="ghost"
-              size="icon-rounded"
+              size="icon-xl"
               className="max-xl:hidden"
               title={t('header.buttons.settings')}
               aria-label={t('header.ariaLabels.settings')}
               onClick={() => navigate('/settings')}
             >
               {/* settings button */}
-              <Icon icon="LuCog" size="md" />
+              <Icon size="md">
+                <LuCog />
+              </Icon>
             </Button>
           </div>
         </section>
diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx
index f769569..083d22e 100644
--- a/src/components/Icon.tsx
+++ b/src/components/Icon.tsx
@@ -1,11 +1,8 @@
 import { cva, VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 import { IconBaseProps } from 'react-icons';
-import * as LucideIcons from 'react-icons/lu';
 import { cn } from '../utils';
 
-type IconNames = keyof Omit<typeof LucideIcons, 'IconContext'>;
-
 const iconVariants = cva('', {
   variants: {
     library: {
@@ -26,6 +23,7 @@ const iconVariants = cva('', {
   },
   defaultVariants: {
     library: 'lucide',
+    size: 'sm',
   },
 });
 
@@ -33,36 +31,28 @@ type IconProps = Omit<IconBaseProps, 'size'> &
   VariantProps<typeof iconVariants> &
   React.SVGAttributes<SVGSVGElement> & {
     className?: string;
-    icon: IconNames;
+    children: React.ReactElement<IconBaseProps>;
   };
 
 const Icon = React.forwardRef<SVGSVGElement, IconProps>(
-  ({ className, library = 'lucide', variant, size, icon, ...props }, ref) => {
-    let SelectedIcon: React.ElementType;
-
-    switch (library) {
-      case 'lucide':
-        SelectedIcon = LucideIcons[icon];
-        break;
-      default:
-        throw new Error(`Library "${library}" not found in icons`);
+  ({ className, variant, size, children, ...props }, ref) => {
+    if (!children) {
+      throw new Error('Icon component requires a child icon element');
     }
 
-    if (!SelectedIcon) {
-      throw new Error(`Icon "${icon}" not found in Lucide icons`);
-    }
+    const iconElement = React.cloneElement(children, {
+      className: cn(
+        iconVariants({ variant, size, className }),
+        children.props.className
+      ),
+      ref,
+      ...props,
+    });
 
-    return (
-      <SelectedIcon
-        ref={ref}
-        className={cn(iconVariants({ library, variant, size, className }))}
-        {...props}
-      />
-    );
+    return iconElement;
   }
 );
 
 Icon.displayName = 'Icon';
 
-export default Icon;
 export { Icon };
diff --git a/src/components/Label.tsx b/src/components/Label.tsx
index 06a205b..012222d 100644
--- a/src/components/Label.tsx
+++ b/src/components/Label.tsx
@@ -2,7 +2,7 @@ import { cva, VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 import { cn } from '../utils';
 
-const variants = cva('', {
+const LabelVariants = cva('', {
   variants: {
     variant: {
       default: '',
@@ -10,15 +10,15 @@ const variants = cva('', {
       'fake-btn': 'text-center cursor-pointer',
       btn: 'btn',
       'btn-ghost': 'btn btn-ghost',
-      'form-control': 'form-control flex flex-col justify-center mb-3',
+      'form-control': 'form-control flex flex-col justify-center',
       'input-bordered':
-        'input input-bordered join-item grow flex items-center gap-2 mb-1',
+        'input input-bordered join-item grow flex items-center gap-2 focus-within:outline-1 focus-within:outline-offset-0 inset-shadow-xs',
     },
     size: {
       default: '',
       xs: 'text-xs',
       icon: 'w-8 h-8 p-0',
-      'icon-rounded': 'w-8 h-8 p-0 rounded-full',
+      'icon-xl': 'w-8 h-8 p-0 rounded-full',
     },
   },
   defaultVariants: {
@@ -28,12 +28,12 @@ const variants = cva('', {
 });
 
 export type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement> &
-  VariantProps<typeof variants>;
+  VariantProps<typeof LabelVariants>;
 
 const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
   ({ className, variant, size, ...props }, ref) => (
     <label
-      className={cn(variants({ variant, size, className }))}
+      className={cn(LabelVariants({ variant, size, className }))}
       ref={ref}
       {...props}
     />
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index dd6f1aa..040ffde 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -1,8 +1,18 @@
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import toast from 'react-hot-toast';
 import { Trans, useTranslation } from 'react-i18next';
+import {
+  LuDownload,
+  LuEllipsisVertical,
+  LuPencil,
+  LuSearch,
+  LuSquarePen,
+  LuTrash,
+  LuX,
+} from 'react-icons/lu';
 import { useNavigate } from 'react-router';
 import IndexedDB from '../database/indexedDB';
+import useFilter from '../hooks/useFilter';
 import { useChatContext } from '../store/chat';
 import { useModals } from '../store/modal';
 import { Conversation } from '../types';
@@ -10,6 +20,7 @@ import { classNames } from '../utils';
 import { downloadAsFile } from '../utils/downloadAsFile';
 import { Button } from './Button';
 import { Icon } from './Icon';
+import { Input } from './Input';
 import { Label } from './Label';
 
 export default function Sidebar() {
@@ -19,6 +30,14 @@ export default function Sidebar() {
 
   const [conversations, setConversations] = useState<Conversation[]>([]);
 
+  const {
+    filteredData: filteredConversations,
+    setFilter,
+    resetFilter,
+    searchTerm,
+    isFiltered,
+  } = useFilter(conversations);
+
   useEffect(() => {
     const handleConversationChange = async () => {
       setConversations(await IndexedDB.getAllConversations());
@@ -44,7 +63,7 @@ export default function Sidebar() {
 
   return (
     <>
-      <input
+      <Input
         id="toggle-drawer"
         type="checkbox"
         className="drawer-toggle"
@@ -58,21 +77,23 @@ export default function Sidebar() {
         aria-label="Sidebar"
         tabIndex={0}
       >
-        <div className="flex flex-col bg-base-300 h-full min-h-0 max-w-full xl:w-72 pb-4 px-4 xl:pl-2 xl:pr-0">
+        <div className="flex flex-col bg-base-300 h-full min-h-0 max-w-full w-96 xl:w-72 pb-4 px-4 xl:pl-2 xl:pr-0 shadow-xl/50">
           <div className="flex flex-row items-center justify-between xl:py-2">
             {/* close sidebar button */}
             <Label size="icon" className="max-xl:hidden" />
             <Label
               className="xl:hidden"
               variant="btn-ghost"
-              size="icon-rounded"
+              size="icon-xl"
               htmlFor="toggle-drawer"
               role="button"
               title={t('sidebar.buttons.closeSideBar')}
               aria-label={t('sidebar.buttons.closeSideBar')}
               tabIndex={0}
             >
-              <Icon icon="LuX" size="md" />
+              <Icon size="md">
+                <LuX />
+              </Icon>
             </Label>
 
             <Label
@@ -88,24 +109,77 @@ export default function Sidebar() {
             {/* new conversation button */}
             <Button
               variant="ghost"
-              size="icon-rounded"
+              size="icon-xl"
               onClick={() => navigate('/')}
               title={t('header.buttons.newConv')}
               aria-label={t('header.ariaLabels.newConv')}
             >
-              <Icon icon="LuSquarePen" size="md" />
+              <Icon size="md">
+                <LuSquarePen />
+              </Icon>
             </Button>
           </div>
 
+          {/* search conversation */}
+          <div className="flex max-xl:mt-2 xl:px-2">
+            <Label
+              variant="input-bordered"
+              className="h-8 inset-shadow-sm my-1.5 px-1.5"
+            >
+              <Icon size="md">
+                <LuSearch />
+              </Icon>
+              <Input
+                className="input-sm grow"
+                name="Search"
+                placeholder={t('sidebar.searchPlaceHolder')}
+                value={searchTerm}
+                onChange={(e) => setFilter(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.nativeEvent.isComposing || e.keyCode === 229) return;
+                  if (e.key === 'Escape' && !e.shiftKey) {
+                    e.preventDefault();
+                    resetFilter();
+                  }
+                }}
+                autoFocus
+              />
+              {isFiltered && (
+                <Button
+                  variant="ghost"
+                  size="icon-md"
+                  onClick={resetFilter}
+                  title={t('header.buttons.clear')}
+                  aria-label={t('header.ariaLabels.clear')}
+                >
+                  <Icon size="md">
+                    <LuX />
+                  </Icon>
+                </Button>
+              )}
+            </Label>
+          </div>
+
           {/* scrollable conversation list */}
           <div className="flex-1 overflow-y-auto overflow-x-hidden min-h-0">
-            {groupedConv.map((group) => (
-              <ConversationGroup
-                key={group.title}
-                group={group}
-                onItemSelect={handleSelect}
-              />
-            ))}
+            {!isFiltered &&
+              groupedConv.map((group, idx) => (
+                <ConversationGroup
+                  className={idx > 0 ? 'mt-6' : 'mt-3'}
+                  key={group.title}
+                  group={group}
+                  onItemSelect={handleSelect}
+                />
+              ))}
+
+            {isFiltered &&
+              filteredConversations.map((conv) => (
+                <ConversationItem
+                  key={conv.id}
+                  conv={conv}
+                  onSelect={handleSelect}
+                />
+              ))}
           </div>
 
           {/* Footer always at the bottom */}
@@ -120,20 +194,22 @@ export default function Sidebar() {
 
 const ConversationGroup = memo(
   ({
+    className,
     group,
     onItemSelect,
   }: {
+    className?: string;
     group: GroupedConversations;
     onItemSelect: () => void;
   }) => {
     const { t } = useTranslation();
 
     return (
-      <div role="group">
+      <div role="group" className={className}>
         {/* group name (by date) */}
         {/* we use btn class here to make sure that the padding/margin are aligned with the other items */}
         <Label
-          className="px-2 mb-0 mt-6 opacity-75"
+          className="px-2 opacity-75"
           variant="group-title"
           size="xs"
           role="note"
@@ -254,7 +330,9 @@ const ConversationItem = memo(
             title={t('sidebar.buttons.more')}
             aria-label={t('sidebar.ariaLabels.more')}
           >
-            <Icon icon="LuEllipsisVertical" size="md" />
+            <Icon size="md">
+              <LuEllipsisVertical />
+            </Icon>
           </Button>
           {/* dropdown menu */}
           <ul
@@ -270,7 +348,9 @@ const ConversationItem = memo(
                 title={t('sidebar.buttons.rename')}
                 aria-label={t('sidebar.ariaLabels.rename')}
               >
-                <Icon icon="LuPencil" size="sm" />
+                <Icon size="sm">
+                  <LuPencil />
+                </Icon>
                 <Trans i18nKey="sidebar.buttons.rename" />
               </Button>
             </li>
@@ -281,7 +361,9 @@ const ConversationItem = memo(
                 title={t('sidebar.buttons.download')}
                 aria-label={t('sidebar.ariaLabels.download')}
               >
-                <Icon icon="LuDownload" size="sm" />
+                <Icon size="sm">
+                  <LuDownload />
+                </Icon>
                 <Trans i18nKey="sidebar.buttons.download" />
               </Button>
             </li>
@@ -297,7 +379,9 @@ const ConversationItem = memo(
                 title={t('sidebar.buttons.delete')}
                 aria-label={t('sidebar.ariaLabels.delete')}
               >
-                <Icon icon="LuTrash" size="sm" />
+                <Icon size="sm">
+                  <LuTrash />
+                </Icon>
                 <Trans i18nKey="sidebar.buttons.delete" />
               </Button>
             </li>
diff --git a/src/components/Textarea.tsx b/src/components/Textarea.tsx
index a8b8d0b..947588d 100644
--- a/src/components/Textarea.tsx
+++ b/src/components/Textarea.tsx
@@ -15,7 +15,7 @@ import { cn, throttle } from '../utils';
 const variants = cva('textarea min-h-auto resize-none', {
   variants: {
     variant: {
-      default: 'focus:outline-1 focus:outline-offset-0',
+      bordered: 'focus:outline-1 focus:outline-offset-0 inset-shadow-xs',
       code: 'font-mono',
       transparent:
         'bg-transparent border-none outline-0 ring-0 focus:outline-0 focus:ring-0',
@@ -26,7 +26,7 @@ const variants = cva('textarea min-h-auto resize-none', {
     },
   },
   defaultVariants: {
-    variant: 'default',
+    variant: 'bordered',
     size: 'default',
   },
 });
diff --git a/src/hooks/useFilter.ts b/src/hooks/useFilter.ts
new file mode 100644
index 0000000..e9aa000
--- /dev/null
+++ b/src/hooks/useFilter.ts
@@ -0,0 +1,155 @@
+import { useEffect, useMemo, useState } from 'react';
+
+type FilterFunction<T> = (item: T) => boolean;
+
+interface UseFilterOptions<T> {
+  initialFilter?: FilterFunction<T>;
+  searchFields?: (keyof T)[];
+  defaultDebounceMs?: number;
+}
+
+interface UseFilterResult<T> {
+  filteredData: T[];
+  setFilter: (
+    filterFn: FilterFunction<T> | string,
+    options?: FilterOptions
+  ) => void;
+  resetFilter: () => void;
+  searchTerm: string;
+  isFiltered: boolean;
+}
+
+interface FilterOptions {
+  debounceMs?: number;
+}
+
+/**
+ * A React hook that provides filtering capabilities for arrays of data.
+ * Supports both custom filter functions and text-based filtering.
+ *
+ * @template T The type of items in the array being filtered
+ *
+ * @param data The array of data to filter
+ * @param initialFilter An optional initial filter function to apply
+ *
+ * @returns Object containing the filtered data and helper functions
+ *
+ * @example
+ * ```typescript
+ * // Basic usage
+ * const { filteredData, setFilter } = useFilter(items);
+ *
+ * // Filter with custom function
+ * setFilter(item => item.name.includes('John'));
+ *
+ * // Filter by text search
+ * setFilter('search term');
+ *
+ * // Reset filter
+ * resetFilter();
+ * ```
+ */
+function useFilter<T>(
+  data: T[],
+  options: UseFilterOptions<T> = {}
+): UseFilterResult<T> {
+  const { initialFilter, searchFields, defaultDebounceMs = 0 } = options;
+  const [filterFn, setFilterFn] = useState<FilterFunction<T> | null>(
+    initialFilter || null
+  );
+  const [searchTerm, setSearchTerm] = useState<string>('');
+  const [debounceTimer, setDebounceTimer] = useState<NodeJS.Timeout | null>(
+    null
+  );
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (debounceTimer) {
+        clearTimeout(debounceTimer);
+      }
+    };
+  }, [debounceTimer]);
+
+  const setFilter = (
+    filter: FilterFunction<T> | string,
+    options: FilterOptions = {}
+  ) => {
+    const { debounceMs = defaultDebounceMs } = options;
+
+    // Clear previous timer
+    if (debounceTimer) {
+      clearTimeout(debounceTimer);
+      setDebounceTimer(null);
+    }
+
+    if (typeof filter === 'string') {
+      // Handle text-based filtering
+      if (debounceMs > 0) {
+        const timer = setTimeout(() => {
+          setSearchTerm(filter);
+          setFilterFn(null);
+        }, debounceMs);
+        setDebounceTimer(timer);
+      } else {
+        setSearchTerm(filter);
+        setFilterFn(null);
+      }
+    } else if (typeof filter === 'function') {
+      setFilterFn(filter);
+      setSearchTerm('');
+    }
+  };
+
+  const resetFilter = () => {
+    setFilterFn(null);
+    setSearchTerm('');
+    if (debounceTimer) {
+      clearTimeout(debounceTimer);
+      setDebounceTimer(null);
+    }
+  };
+
+  const filteredData = useMemo(() => {
+    if (searchTerm) {
+      const lowerSearchTerm = searchTerm.toLowerCase().trim();
+      if (!lowerSearchTerm) return data;
+
+      return data.filter((item) => {
+        // Use specified search fields if provided
+        if (searchFields) {
+          return searchFields.some((field) =>
+            String(item[field]).toLowerCase().includes(lowerSearchTerm)
+          );
+        }
+
+        // Fallback to current behavior
+        if (typeof item === 'string' || typeof item === 'number') {
+          return String(item).toLowerCase().includes(lowerSearchTerm);
+        }
+
+        if (typeof item === 'object' && item !== null) {
+          return Object.values(item).some((value) =>
+            String(value).toLowerCase().includes(lowerSearchTerm)
+          );
+        }
+
+        return false;
+      });
+    }
+
+    return filterFn ? data.filter(filterFn) : data;
+  }, [data, searchTerm, filterFn, searchFields]);
+
+  const isFiltered = filterFn !== null || searchTerm !== '';
+
+  return {
+    filteredData,
+    setFilter,
+    resetFilter,
+    searchTerm,
+    isFiltered,
+  };
+}
+
+export default useFilter;
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 329e57b..3b0ebb0 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -33,7 +33,8 @@
       "more": "More",
       "rename": "Rename",
       "download": "Download",
-      "delete": "Delete"
+      "delete": "Delete",
+      "clear": "Clear"
     },
     "ariaLabels": {
       "dropdown": "More options",
@@ -41,7 +42,8 @@
       "more": "Show more options",
       "rename": "Rename conversation",
       "download": "Download conversation",
-      "delete": "Delete conversation"
+      "delete": "Delete conversation",
+      "clear": "Clear search"
     },
     "errors": {
       "renameOnGenerate": "Cannot rename conversation while generating.",
@@ -53,6 +55,7 @@
       "deleteConfirm": "Are you sure to delete this conversation?",
       "deleteSuccess": "Conversation deleted."
     },
+    "searchPlaceHolder": "Search",
     "storageNote": "Conversations are saved to browser's IndexedDB."
   },
   "chatScreen": {
diff --git a/src/pages/Chat/components/CanvasPyInterpreter.tsx b/src/pages/Chat/components/CanvasPyInterpreter.tsx
index 663b5e3..e33ba46 100644
--- a/src/pages/Chat/components/CanvasPyInterpreter.tsx
+++ b/src/pages/Chat/components/CanvasPyInterpreter.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { LuPlay, LuSquare, LuX } from 'react-icons/lu';
 import { Button, Icon, TextArea } from '../../../components';
 import LocalStorage from '../../../database/localStorage';
 import { useChatContext } from '../../../store/chat';
@@ -158,7 +159,9 @@ export default function CanvasPyInterpreter() {
             title={t('codeRunner.buttons.close')}
             onClick={() => setCanvasData(null)}
           >
-            <Icon icon="LuX" size="md" />
+            <Icon size="md">
+              <LuX />
+            </Icon>
           </Button>
         </div>
         <div className="grid grid-rows-3 gap-4 h-full">
@@ -176,7 +179,9 @@ export default function CanvasPyInterpreter() {
                 onClick={() => runCode(code)}
                 disabled={running}
               >
-                <Icon icon="LuPlay" variant="leftside" size="md" />
+                <Icon variant="leftside" size="md">
+                  <LuPlay />
+                </Icon>
                 {t('codeRunner.buttons.run')}
               </Button>
               {showStopBtn && (
@@ -186,7 +191,9 @@ export default function CanvasPyInterpreter() {
                   title={t('codeRunner.buttons.stop')}
                   onClick={() => interruptFn?.()}
                 >
-                  <Icon icon="LuSquare" variant="leftside" size="md" />
+                  <Icon variant="leftside" size="md">
+                    <LuSquare />
+                  </Icon>
                   {t('codeRunner.buttons.stop')}
                 </Button>
               )}
diff --git a/src/pages/Chat/components/ChatInput.tsx b/src/pages/Chat/components/ChatInput.tsx
index e0961fb..7f3b449 100644
--- a/src/pages/Chat/components/ChatInput.tsx
+++ b/src/pages/Chat/components/ChatInput.tsx
@@ -9,6 +9,13 @@ import {
 } from 'react';
 import toast from 'react-hot-toast';
 import { useTranslation } from 'react-i18next';
+import {
+  LuArrowUp,
+  LuCircleStop,
+  LuMic,
+  LuPaperclip,
+  LuSquare,
+} from 'react-icons/lu';
 import { TbAdjustmentsHorizontal } from 'react-icons/tb';
 import { useNavigate } from 'react-router';
 import { AutoSizingTextArea, Button, Icon, Label } from '../../../components';
@@ -102,7 +109,7 @@ export const ChatInput = memo(
           disabled={isPending}
         >
           <div
-            className="bg-base-200 flex flex-col lg:border-1 lg:border-base-content/30 outline-0 focus-within:outline-1 rounded-lg shadow-sm md:shadow-md p-2"
+            className="bg-base-200 flex flex-col outline-0 focus-within:outline-1 rounded-lg shadow-sm xl:shadow-md p-2"
             tabIndex={0}
           >
             <AutoSizingTextArea
@@ -131,19 +138,21 @@ export const ChatInput = memo(
                 <Label
                   className={isPending ? 'btn-disabled' : ''}
                   variant="btn-ghost"
-                  size="icon-rounded"
+                  size="icon-xl"
                   htmlFor="new-message-file-upload"
                   aria-label={t('chatInput.ariaLabels.uploadFile')}
                   tabIndex={0}
                   role="button"
                 >
-                  <Icon icon="LuPaperclip" size="md" />
+                  <Icon size="md">
+                    <LuPaperclip />
+                  </Icon>
                 </Label>
 
                 <Button
                   className="xl:hidden"
                   variant="ghost"
-                  size="icon-rounded"
+                  size="icon-xl"
                   title={t('header.title.settings')}
                   aria-label={t('header.ariaLabels.settings')}
                   onClick={() => navigate('/settings')}
@@ -161,24 +170,28 @@ export const ChatInput = memo(
                           <Button
                             className="mr-2"
                             variant="ghost"
-                            size="icon-rounded"
+                            size="icon-xl"
                             onClick={startRecording}
                             title="Record"
                             aria-label="Start Recording"
                           >
-                            <Icon icon="LuMic" size="md" />
+                            <Icon size="md">
+                              <LuMic />
+                            </Icon>
                           </Button>
                         )}
                         {isRecording && (
                           <Button
                             className="mr-2"
                             variant="ghost"
-                            size="icon-rounded"
+                            size="icon-xl"
                             onClick={stopRecording}
                             title="Stop"
                             aria-label="Stop Recording"
                           >
-                            <Icon icon="LuCircleStop" size="md" />
+                            <Icon size="md">
+                              <LuCircleStop />
+                            </Icon>
                           </Button>
                         )}
                       </>
@@ -187,23 +200,23 @@ export const ChatInput = memo(
                 )}
 
                 {isPending && (
-                  <Button
-                    variant="neutral"
-                    size="icon-rounded"
-                    onClick={handleStop}
-                  >
-                    <Icon icon="LuSquare" size="sm" variant="current" />
+                  <Button variant="neutral" size="icon-xl" onClick={handleStop}>
+                    <Icon size="sm" variant="current">
+                      <LuSquare />
+                    </Icon>
                   </Button>
                 )}
 
                 {!isPending && (
                   <Button
                     variant="neutral"
-                    size="icon-rounded"
+                    size="icon-xl"
                     onClick={sendNewMessage}
                     aria-label={t('chatInput.ariaLabels.send')}
                   >
-                    <Icon icon="LuArrowUp" size="md" />
+                    <Icon size="md">
+                      <LuArrowUp />
+                    </Icon>
                   </Button>
                 )}
               </div>
diff --git a/src/pages/Chat/components/ChatInputExtraContextItem.tsx b/src/pages/Chat/components/ChatInputExtraContextItem.tsx
index 72194ab..673e6be 100644
--- a/src/pages/Chat/components/ChatInputExtraContextItem.tsx
+++ b/src/pages/Chat/components/ChatInputExtraContextItem.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { LuFileText, LuVolume2, LuX } from 'react-icons/lu';
 import { Button, Icon } from '../../../components';
 import { MessageExtra } from '../../../types';
 import { classNames } from '../../../utils';
@@ -43,10 +44,12 @@ export default function ChatInputExtraContextItem({
               <Button
                 aria-label={t('chatInput.ariaLabels.removeButton')}
                 variant="neutral"
-                size="icon-small"
+                size="icon-sm"
                 onClick={() => removeItem(i)}
               >
-                <Icon icon="LuX" size="xs" />
+                <Icon size="xs">
+                  <LuX />
+                </Icon>
               </Button>
             </div>
           )}
@@ -72,17 +75,13 @@ export default function ChatInputExtraContextItem({
                   aria-description={t('chatInput.ariaLabels.documentIcon')}
                 >
                   {item.type === 'audioFile' ? (
-                    <Icon
-                      icon="LuVolume2"
-                      size="xl"
-                      className="text-gray-500"
-                    />
+                    <Icon size="xl" className="text-gray-500">
+                      <LuVolume2 />
+                    </Icon>
                   ) : (
-                    <Icon
-                      icon="LuFileText"
-                      size="xl"
-                      className="text-gray-500"
-                    />
+                    <Icon size="xl" className="text-gray-500">
+                      <LuFileText />
+                    </Icon>
                   )}
                 </div>
 
@@ -110,7 +109,9 @@ export default function ChatInputExtraContextItem({
                 size="small"
                 aria-label={t('chatInput.previewDialog.closeButton')}
               >
-                <Icon icon="LuX" size="md" onClick={() => setShow(-1)} />
+                <Icon size="md" onClick={() => setShow(-1)}>
+                  <LuX />
+                </Icon>
               </Button>
             </div>
             {showingItem.type === 'imageFile' ? (
diff --git a/src/pages/Chat/components/ChatMessage.tsx b/src/pages/Chat/components/ChatMessage.tsx
index eb77344..fe77e97 100644
--- a/src/pages/Chat/components/ChatMessage.tsx
+++ b/src/pages/Chat/components/ChatMessage.tsx
@@ -5,6 +5,22 @@ import {
 } from '@radix-ui/react-collapsible';
 import { memo, useMemo, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
+import {
+  LuAtom,
+  LuBrain,
+  LuChevronDown,
+  LuChevronLeft,
+  LuChevronRight,
+  LuCopy,
+  LuGauge,
+  LuGitMerge,
+  LuPaperclip,
+  LuRefreshCw,
+  LuSquarePen,
+  LuTrash2,
+  LuVolume2,
+  LuVolumeX,
+} from 'react-icons/lu';
 import { AutoSizingTextArea, Button, Icon, Label } from '../../../components';
 import IndexedDB from '../../../database/indexedDB';
 import { useFileUpload } from '../../../hooks/useFileUpload';
@@ -233,7 +249,9 @@ export default memo(function ChatMessage({
                 title={t('chatScreen.titles.previous')}
                 aria-label={t('chatScreen.ariaLabels.switchToPrevious')}
               >
-                <Icon icon="LuChevronLeft" size="sm" />
+                <Icon size="sm">
+                  <LuChevronLeft />
+                </Icon>
               </Button>
               <span>
                 {siblingCurrIdx + 1} / {siblingLeafNodeIds.length}
@@ -248,7 +266,9 @@ export default memo(function ChatMessage({
                 title={t('chatScreen.titles.next')}
                 aria-label={t('chatScreen.ariaLabels.switchToNext')}
               >
-                <Icon icon="LuChevronRight" size="sm" />
+                <Icon size="sm">
+                  <LuChevronRight />
+                </Icon>
               </Button>
             </div>
           )}
@@ -267,7 +287,9 @@ export default memo(function ChatMessage({
               title={t('chatScreen.titles.regenerate')}
               aria-label={t('chatScreen.ariaLabels.regenerateResponse')}
             >
-              <Icon icon="LuRefreshCw" size="sm" />
+              <Icon size="sm">
+                <LuRefreshCw />
+              </Icon>
             </Button>
           )}
 
@@ -280,7 +302,9 @@ export default memo(function ChatMessage({
               aria-label={t('chatScreen.ariaLabels.showPerformanceMetric')}
             >
               <div className="dropdown dropdown-hover dropdown-top">
-                <Icon icon="LuGauge" size="sm" />
+                <Icon size="sm">
+                  <LuGauge />
+                </Icon>
 
                 <div
                   tabIndex={0}
@@ -337,7 +361,9 @@ export default memo(function ChatMessage({
             title={t('chatScreen.titles.edit')}
             aria-label={t('chatScreen.ariaLabels.editMessage')}
           >
-            <Icon icon="LuSquarePen" size="sm" />
+            <Icon size="sm">
+              <LuSquarePen />
+            </Icon>
           </Button>
 
           {/* copy message */}
@@ -348,7 +374,9 @@ export default memo(function ChatMessage({
             title={t('chatScreen.titles.copy')}
             aria-label={t('chatScreen.ariaLabels.copyContent')}
           >
-            <Icon icon="LuCopy" size="sm" />
+            <Icon size="sm">
+              <LuCopy />
+            </Icon>
           </Button>
 
           {/* play message */}
@@ -370,7 +398,9 @@ export default memo(function ChatMessage({
             title={t('chatScreen.titles.delete')}
             aria-label={t('chatScreen.ariaLabels.deleteMessage')}
           >
-            <Icon icon="LuTrash2" size="sm" />
+            <Icon size="sm">
+              <LuTrash2 />
+            </Icon>
           </Button>
 
           {/* branch message */}
@@ -382,7 +412,9 @@ export default memo(function ChatMessage({
             title={t('chatScreen.titles.branchChat')}
             aria-label={t('chatScreen.ariaLabels.branchChatAfterMessage')}
           >
-            <Icon icon="LuGitMerge" size="sm" />
+            <Icon size="sm">
+              <LuGitMerge />
+            </Icon>
           </Button>
         </div>
       )}
@@ -427,13 +459,15 @@ function EditMessage({
           <>
             <Label
               variant="btn-ghost"
-              size="icon-rounded"
+              size="icon-xl"
               htmlFor={`file-upload-${msg.id}`}
               aria-label={t('chatScreen.ariaLabels.uploadFile')}
               tabIndex={0}
               role="button"
             >
-              <Icon icon="LuPaperclip" size="md" />
+              <Icon size="md">
+                <LuPaperclip />
+              </Icon>
             </Label>
             <div className="grow" />
           </>
@@ -504,23 +538,30 @@ const ThinkingSection = memo(function ThinkingSection({
       <CollapsibleTrigger className="btn border-0 rounded-xl my-2 p-2 px-4">
         {isThinking && (
           <>
-            <Icon
-              icon="LuAtom"
-              size="md"
-              variant="leftside"
-              className="animate-spin"
-            />
+            <Icon size="md" variant="leftside" className="animate-spin">
+              <LuAtom />
+            </Icon>
             <Trans i18nKey="chatScreen.labels.thinking" />
           </>
         )}
         {!isThinking && (
           <>
-            <Icon icon="LuBrain" size="md" variant="leftside" />
+            <Icon size="md" variant="leftside">
+              <LuBrain />
+            </Icon>
             <Trans i18nKey="chatScreen.labels.thoughts" />
           </>
         )}
-        {!open && <Icon icon="LuChevronRight" size="md" variant="rightside" />}
-        {open && <Icon icon="LuChevronDown" size="md" variant="rightside" />}
+        {!open && (
+          <Icon size="md" variant="rightside">
+            <LuChevronRight />
+          </Icon>
+        )}
+        {open && (
+          <Icon size="md" variant="rightside">
+            <LuChevronDown />
+          </Icon>
+        )}
       </CollapsibleTrigger>
 
       <CollapsibleContent
@@ -573,7 +614,9 @@ const PlayButton = memo(function PlayButton({
               title={t('chatScreen.titles.play')}
               aria-label={t('chatScreen.ariaLabels.playMessage')}
             >
-              <Icon icon="LuVolume2" size="sm" />
+              <Icon size="sm">
+                <LuVolume2 />
+              </Icon>
             </Button>
           )}
           {isPlaying && (
@@ -586,7 +629,9 @@ const PlayButton = memo(function PlayButton({
               title={t('chatScreen.titles.stop')}
               aria-label={t('chatScreen.ariaLabels.stopMessage')}
             >
-              <Icon icon="LuVolumeX" size="sm" />
+              <Icon size="sm">
+                <LuVolumeX />
+              </Icon>
             </Button>
           )}
         </>
diff --git a/src/pages/Chat/components/MarkdownDisplay.tsx b/src/pages/Chat/components/MarkdownDisplay.tsx
index 582b1d0..ca13041 100644
--- a/src/pages/Chat/components/MarkdownDisplay.tsx
+++ b/src/pages/Chat/components/MarkdownDisplay.tsx
@@ -2,6 +2,7 @@ import 'katex/dist/katex.min.css';
 import { all as languages } from 'lowlight';
 import React, { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { LuCopy, LuPlay } from 'react-icons/lu';
 import Markdown, { ExtraProps } from 'react-markdown';
 import rehypeHighlight from 'rehype-highlight';
 import rehypeKatex from 'rehype-katex';
@@ -136,7 +137,9 @@ function CodeBlockToolbar({
           aria-label={t('chatScreen.ariaLabels.runCode')}
           onClick={handleRun}
         >
-          <Icon icon="LuPlay" size="sm" />
+          <Icon size="sm">
+            <LuPlay />
+          </Icon>
         </Button>
       )}
       <Button
@@ -146,7 +149,9 @@ function CodeBlockToolbar({
         aria-label={t('chatScreen.ariaLabels.copyContent')}
         onClick={handleCopy}
       >
-        <Icon icon="LuCopy" size="sm" />
+        <Icon size="sm">
+          <LuCopy />
+        </Icon>
       </Button>
     </div>
   );
diff --git a/src/pages/Settings/components/ImportExportComponent.tsx b/src/pages/Settings/components/ImportExportComponent.tsx
index 5f7768f..7faca53 100644
--- a/src/pages/Settings/components/ImportExportComponent.tsx
+++ b/src/pages/Settings/components/ImportExportComponent.tsx
@@ -1,4 +1,5 @@
 import { useTranslation } from 'react-i18next';
+import { LuEye, LuMessageCircleMore } from 'react-icons/lu';
 import { TbDatabaseExport, TbDatabaseImport } from 'react-icons/tb';
 import { DelimeterComponent, SettingsSectionLabel } from '.';
 import { Button, Icon, Input, Label } from '../../../components';
@@ -37,7 +38,9 @@ export function ImportExportComponent({ onClose }: { onClose: () => void }) {
   return (
     <>
       <SettingsSectionLabel>
-        <Icon icon="LuMessageCircleMore" size="sm" variant="leftside" />
+        <Icon size="sm" variant="leftside">
+          <LuMessageCircleMore />
+        </Icon>
         {t('settings.importExport.chatsSectionTitle')}
       </SettingsSectionLabel>
 
@@ -69,7 +72,9 @@ export function ImportExportComponent({ onClose }: { onClose: () => void }) {
       <DelimeterComponent />
 
       <SettingsSectionLabel>
-        <Icon icon="LuEye" size="sm" variant="leftside" />
+        <Icon size="sm" variant="leftside">
+          <LuEye />
+        </Icon>
         {t('settings.importExport.technicalDemoSectionTitle')}
       </SettingsSectionLabel>
 
diff --git a/src/pages/Settings/components/PresetManager.tsx b/src/pages/Settings/components/PresetManager.tsx
index 872be2e..09670f4 100644
--- a/src/pages/Settings/components/PresetManager.tsx
+++ b/src/pages/Settings/components/PresetManager.tsx
@@ -1,4 +1,11 @@
 import { Trans, useTranslation } from 'react-i18next';
+import {
+  LuCirclePlay,
+  LuEllipsisVertical,
+  LuPencil,
+  LuSave,
+  LuTrash,
+} from 'react-icons/lu';
 import { SettingsSectionLabel } from '.';
 import { Button, Icon } from '../../../components';
 import { CONFIG_DEFAULT } from '../../../config';
@@ -96,7 +103,9 @@ export function PresetManager({
         title={t('settings.presetManager.buttons.save')}
         aria-label={t('settings.presetManager.ariaLabels.save')}
       >
-        <Icon icon="LuSave" size="md" />
+        <Icon size="md">
+          <LuSave />
+        </Icon>
         <Trans i18nKey="settings.presetManager.buttons.save" />
       </Button>
 
@@ -129,12 +138,14 @@ export function PresetManager({
                   <div className="min-w-18 grid grid-cols-2 gap-2">
                     <Button
                       variant="ghost"
-                      size="icon-rounded"
+                      size="icon-xl"
                       onClick={() => handleLoadPreset(preset)}
                       title={t('settings.presetManager.buttons.load')}
                       aria-label={t('settings.presetManager.ariaLabels.load')}
                     >
-                      <Icon icon="LuCirclePlay" size="md" />
+                      <Icon size="md">
+                        <LuCirclePlay />
+                      </Icon>
                     </Button>
 
                     {/* dropdown */}
@@ -145,7 +156,9 @@ export function PresetManager({
                         title={t('settings.presetManager.buttons.more')}
                         aria-label={t('settings.presetManager.ariaLabels.more')}
                       >
-                        <Icon icon="LuEllipsisVertical" size="md" />
+                        <Icon size="md">
+                          <LuEllipsisVertical />
+                        </Icon>
                       </Button>
 
                       {/* dropdown menu */}
@@ -164,11 +177,9 @@ export function PresetManager({
                               'settings.presetManager.ariaLabels.rename'
                             )}
                           >
-                            <Icon
-                              icon="LuPencil"
-                              size="sm"
-                              variant="leftside"
-                            />
+                            <Icon size="sm" variant="leftside">
+                              <LuPencil />
+                            </Icon>
                             {t('settings.presetManager.buttons.rename')}
                           </Button>
                         </li>
@@ -181,7 +192,9 @@ export function PresetManager({
                               'settings.presetManager.ariaLabels.delete'
                             )}
                           >
-                            <Icon icon="LuTrash" size="sm" variant="leftside" />
+                            <Icon size="sm" variant="leftside">
+                              <LuTrash />
+                            </Icon>
                             {t('settings.presetManager.buttons.delete')}
                           </Button>
                         </li>
diff --git a/src/pages/Settings/components/ThemeController.tsx b/src/pages/Settings/components/ThemeController.tsx
index b07bcef..1b1dcbf 100644
--- a/src/pages/Settings/components/ThemeController.tsx
+++ b/src/pages/Settings/components/ThemeController.tsx
@@ -57,7 +57,7 @@ export function ThemeController() {
         <div className="font-bold mb-1 md:hidden">
           <Trans i18nKey="settings.themeManager.dataTheme.label" />
         </div>
-        <Label variant="input-bordered">
+        <Label variant="input-bordered" className="mb-1">
           <div className="font-bold hidden md:block">
             <Trans i18nKey="settings.themeManager.dataTheme.label" />
           </div>
@@ -82,7 +82,7 @@ export function ThemeController() {
         <div className="font-bold mb-1 md:hidden">
           <Trans i18nKey="settings.themeManager.syntaxTheme.label" />
         </div>
-        <Label variant="input-bordered">
+        <Label variant="input-bordered" className="mb-1">
           <div className="font-bold hidden md:block">
             <Trans i18nKey="settings.themeManager.syntaxTheme.label" />
           </div>
diff --git a/src/pages/Settings/components/common.tsx b/src/pages/Settings/components/common.tsx
index 7f9d704..c5e89a5 100644
--- a/src/pages/Settings/components/common.tsx
+++ b/src/pages/Settings/components/common.tsx
@@ -46,7 +46,7 @@ export function SettingsModalLongInput({
   return (
     <LabeledField configKey={field.translateKey || field.key}>
       {({ label, note }) => (
-        <Label variant="form-control" className="max-w-80">
+        <Label variant="form-control" className="max-w-80 mb-3">
           <div className="text-sm opacity-60 mb-1">{label}</div>
           <TextArea
             size="default"
@@ -75,11 +75,11 @@ export function SettingsModalShortInput({
   return (
     <LabeledField configKey={field.translateKey || field.key}>
       {({ label, note }) => (
-        <Label variant="form-control">
+        <Label variant="form-control" className="mb-3">
           <div tabIndex={0} role="button" className="font-bold mb-1 md:hidden">
             {label}
           </div>
-          <Label variant="input-bordered">
+          <Label variant="input-bordered" className="mb-1">
             <div
               tabIndex={0}
               role="button"
@@ -133,11 +133,11 @@ export function SettingsModalRangeInput({
   return (
     <LabeledField configKey={field.translateKey || field.key}>
       {({ label, note }) => (
-        <Label variant="form-control">
+        <Label variant="form-control" className="mb-3">
           <div tabIndex={0} role="button" className="font-bold mb-1 md:hidden">
             {label}
           </div>
-          <Label variant="input-bordered">
+          <Label variant="input-bordered" className="mb-1">
             <div
               tabIndex={0}
               role="button"
@@ -183,7 +183,7 @@ export function SettingsModalCheckbox({
   return (
     <LabeledField configKey={field.translateKey || field.key}>
       {({ label, note }) => (
-        <Label variant="form-control">
+        <Label variant="form-control" className="mb-3">
           <div className="flex flex-row items-center mb-1">
             <Input
               variant="toggle"
diff --git a/src/pages/Settings/index.tsx b/src/pages/Settings/index.tsx
index 0b2f764..ae2eb73 100644
--- a/src/pages/Settings/index.tsx
+++ b/src/pages/Settings/index.tsx
@@ -6,6 +6,27 @@ import React, {
   useState,
 } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
+import {
+  LuAudioLines,
+  LuBookmark,
+  LuBrain,
+  LuCog,
+  LuCpu,
+  LuDatabase,
+  LuFilter,
+  LuFlaskConical,
+  LuGrid2X2Plus,
+  LuHand,
+  LuMessageCircleMore,
+  LuMessagesSquare,
+  LuMonitor,
+  LuRefreshCw,
+  LuRocket,
+  LuSettings,
+  LuSpeech,
+  LuVolume2,
+  LuVolumeX,
+} from 'react-icons/lu';
 import { useNavigate } from 'react-router';
 import { Button, Dropdown, Icon } from '../../components';
 import { CONFIG_DEFAULT, INFERENCE_PROVIDERS } from '../../config';
@@ -115,7 +136,9 @@ function getSettingTabsConfiguration(
     {
       title: (
         <>
-          <Icon icon="LuSettings" size="sm" variant="leftside" />
+          <Icon size="sm" variant="leftside">
+            <LuSettings />
+          </Icon>
           {t('settings.tabs.general')}
         </>
       ),
@@ -161,14 +184,18 @@ function getSettingTabsConfiguration(
     {
       title: (
         <>
-          <Icon icon="LuMonitor" size="sm" variant="leftside" />
+          <Icon size="sm" variant="leftside">
+            <LuMonitor />
+          </Icon>
           {t('settings.tabs.ui')}
         </>
       ),
       fields: [
         toSection(
           t('settings.sections.userInterface'),
-          <Icon icon="LuMonitor" size="sm" variant="leftside" />
+          <Icon size="sm" variant="leftside">
+            <LuMonitor />
+          </Icon>
         ),
         toInput(SettingInputType.SHORT_INPUT, 'initials'),
         {
@@ -190,7 +217,9 @@ function getSettingTabsConfiguration(
     {
       title: (
         <>
-          <Icon icon="LuAudioLines" size="sm" variant="leftside" />
+          <Icon size="sm" variant="leftside">
+            <LuAudioLines />
+          </Icon>
           {t('settings.tabs.voice')}
         </>
       ),
@@ -198,7 +227,9 @@ function getSettingTabsConfiguration(
         /* Text to Speech */
         toSection(
           t('settings.sections.textToSpeech'),
-          <Icon icon="LuSpeech" size="sm" variant="leftside" />
+          <Icon size="sm" variant="leftside">
+            <LuSpeech />
+          </Icon>
         ),
         toDropdown(
           'ttsVoice',
@@ -259,10 +290,14 @@ function getSettingTabsConfiguration(
                   aria-label="Play test message"
                 >
                   {!isPlaying && (
-                    <Icon icon="LuVolume2" size="sm" variant="leftside" />
+                    <Icon size="sm" variant="leftside">
+                      <LuVolume2 />
+                    </Icon>
                   )}
                   {isPlaying && (
-                    <Icon icon="LuVolumeX" size="sm" variant="leftside" />
+                    <Icon size="sm" variant="leftside">
+                      <LuVolumeX />
+                    </Icon>
                   )}
                   {t('settings.textToSpeech.check.label')}
                 </Button>
@@ -277,14 +312,18 @@ function getSettingTabsConfiguration(
     {
       title: (
         <>
-          <Icon icon="LuMessagesSquare" size="sm" variant="leftside" />
+          <Icon size="sm" variant="leftside">
+            <LuMessagesSquare />
+          </Icon>
           {t('settings.tabs.conversations')}
         </>
       ),
       fields: [
         toSection(
           t('settings.sections.chat'),
-          <Icon icon="LuMessageCircleMore" size="sm" variant="leftside" />
+          <Icon size="sm" variant="leftside">
+            <LuMessageCircleMore />
+          </Icon>
         ),
         toInput(SettingInputType.SHORT_INPUT, 'pasteLongTextToFileLen'),
         toInput(SettingInputType.CHECKBOX, 'pdfAsImage'),
@@ -293,7 +332,9 @@ function getSettingTabsConfiguration(
         DELIMITER,
         toSection(
           t('settings.sections.performance'),
-          <Icon icon="LuRocket" size="sm" variant="leftside" />
+          <Icon size="sm" variant="leftside">
+            <LuRocket />
+          </Icon>
         ),
         toInput(SettingInputType.CHECKBOX, 'showTokensPerSecond'),
 
@@ -301,7 +342,9 @@ function getSettingTabsConfiguration(
         DELIMITER,
         toSection(
           t('settings.sections.reasoning'),
-          <Icon icon="LuBrain" size="sm" variant="leftside" />
+          <Icon size="sm" variant="leftside">
+            <LuBrain />
+          </Icon>
         ),
         toInput(SettingInputType.CHECKBOX, 'showThoughtInProgress'),
         toInput(SettingInputType.CHECKBOX, 'excludeThoughtOnReq'),
@@ -312,7 +355,9 @@ function getSettingTabsConfiguration(
     {
       title: (
         <>
-          <Icon icon="LuBookmark" size="sm" variant="leftside" />
+          <Icon size="sm" variant="leftside">
+            <LuBookmark />
+          </Icon>
           {t('settings.tabs.presets')}
         </>
       ),
@@ -329,7 +374,9 @@ function getSettingTabsConfiguration(
     {
       title: (
         <>
-          <Icon icon="LuDatabase" size="sm" variant="leftside" />
+          <Icon size="sm" variant="leftside">
+            <LuDatabase />
+          </Icon>
           {t('settings.tabs.importExport')}
         </>
       ),
@@ -346,7 +393,9 @@ function getSettingTabsConfiguration(
     {
       title: (
         <>
-          <Icon icon="LuGrid2X2Plus" size="sm" variant="leftside" />
+          <Icon size="sm" variant="leftside">
+            <LuGrid2X2Plus />
+          </Icon>
           {t('settings.tabs.advanced')}
         </>
       ),
@@ -354,7 +403,9 @@ function getSettingTabsConfiguration(
         /* Generation */
         toSection(
           t('settings.sections.generation'),
-          <Icon icon="LuCog" size="sm" variant="leftside" />
+          <Icon size="sm" variant="leftside">
+            <LuCog />
+          </Icon>
         ),
         toInput(SettingInputType.CHECKBOX, 'overrideGenerationOptions'),
         ...['temperature', 'top_k', 'top_p', 'min_p', 'max_tokens'].map((key) =>
@@ -369,7 +420,9 @@ function getSettingTabsConfiguration(
         DELIMITER,
         toSection(
           t('settings.sections.samplers'),
-          <Icon icon="LuFilter" size="sm" variant="leftside" />
+          <Icon size="sm" variant="leftside">
+            <LuFilter />
+          </Icon>
         ),
         toInput(SettingInputType.CHECKBOX, 'overrideSamplersOptions'),
         ...[
@@ -391,7 +444,9 @@ function getSettingTabsConfiguration(
         DELIMITER,
         toSection(
           t('settings.sections.penalties'),
-          <Icon icon="LuHand" size="sm" variant="leftside" />
+          <Icon size="sm" variant="leftside">
+            <LuHand />
+          </Icon>
         ),
         toInput(SettingInputType.CHECKBOX, 'overridePenaltyOptions'),
         ...[
@@ -415,7 +470,9 @@ function getSettingTabsConfiguration(
         DELIMITER,
         toSection(
           t('settings.sections.custom'),
-          <Icon icon="LuCpu" size="sm" variant="leftside" />
+          <Icon size="sm" variant="leftside">
+            <LuCpu />
+          </Icon>
         ),
         toInput(SettingInputType.LONG_INPUT, 'custom'),
       ],
@@ -425,7 +482,9 @@ function getSettingTabsConfiguration(
     {
       title: (
         <>
-          <Icon icon="LuFlaskConical" size="sm" variant="leftside" />
+          <Icon size="sm" variant="leftside">
+            <LuFlaskConical />
+          </Icon>
           <Trans i18nKey="settings.sections.experimental" />
         </>
       ),
@@ -672,7 +731,9 @@ export default function Settings() {
                   )
                 }
               >
-                <Icon icon="LuRefreshCw" size="sm" variant="leftside" />
+                <Icon size="sm" variant="leftside">
+                  <LuRefreshCw />
+                </Icon>
                 <Trans i18nKey="settings.actionButtons.fetchModels" />
               </Button>
             );