diff --git a/ui/components/SettingsDialog.tsx b/ui/components/SettingsDialog.tsx
index 4731331..8524aed 100644
--- a/ui/components/SettingsDialog.tsx
+++ b/ui/components/SettingsDialog.tsx
@@ -11,7 +11,7 @@ import React, {
 
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
 
-function Input({ className, ...restProps }: InputProps) {
+const Input = ({ className, ...restProps }: InputProps) => {
   return (
     <input
       {...restProps}
@@ -21,13 +21,13 @@ function Input({ className, ...restProps }: InputProps) {
       )}
     />
   );
-}
+};
 
 interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
   options: { value: string; label: string; disabled?: boolean }[];
 }
 
-function Select({ className, options, ...restProps }: SelectProps) {
+const Select = ({ className, options, ...restProps }: SelectProps) => {
   return (
     <select
       {...restProps}
@@ -45,7 +45,7 @@ function Select({ className, options, ...restProps }: SelectProps) {
       })}
     </select>
   );
-}
+};
 
 interface SettingsType {
   chatModelProviders: {
diff --git a/ui/components/Sidebar.tsx b/ui/components/Sidebar.tsx
index 1790658..bdbadae 100644
--- a/ui/components/Sidebar.tsx
+++ b/ui/components/Sidebar.tsx
@@ -10,11 +10,11 @@ import { Dialog, Transition } from '@headlessui/react';
 import SettingsDialog from './SettingsDialog';
 import { ThemeSwitcher } from './theme/Switcher';
 
-function VerticalIconContainer({ children }: { children: ReactNode }) {
+const VerticalIconContainer = ({ children }: { children: ReactNode }) => {
   return (
     <div className="flex flex-col items-center gap-y-3 w-full">{children}</div>
   );
-}
+};
 
 const Sidebar = ({ children }: { children: React.ReactNode }) => {
   const segments = useSelectedLayoutSegments();
diff --git a/ui/components/theme/Provider.tsx b/ui/components/theme/Provider.tsx
index 2e110f6..fdc94f5 100644
--- a/ui/components/theme/Provider.tsx
+++ b/ui/components/theme/Provider.tsx
@@ -1,14 +1,14 @@
 'use client';
 import { ThemeProvider } from 'next-themes';
 
-export function ThemeProviderComponent({
+export const ThemeProviderComponent = ({
   children,
 }: {
   children: React.ReactNode;
-}) {
+}) => {
   return (
     <ThemeProvider attribute="class" enableSystem={false} defaultTheme="dark">
       {children}
     </ThemeProvider>
   );
-}
+};
diff --git a/ui/components/theme/Switcher.tsx b/ui/components/theme/Switcher.tsx
index 91bfe10..8e59493 100644
--- a/ui/components/theme/Switcher.tsx
+++ b/ui/components/theme/Switcher.tsx
@@ -11,7 +11,7 @@ interface ThemeSwitcherProps {
   className?: string;
 }
 
-export function ThemeSwitcher({ size, className }: ThemeSwitcherProps) {
+export const ThemeSwitcher = ({ size, className }: ThemeSwitcherProps) => {
   const [mounted, setMounted] = useState(false);
 
   const { theme, setTheme } = useTheme();
@@ -69,4 +69,4 @@ export function ThemeSwitcher({ size, className }: ThemeSwitcherProps) {
       onClick={() => handleThemeSwitch('system')}
     />
   );
-}
+};