diff --git a/src/components/MainContainer.tsx b/src/components/MainContainer.tsx
index 402aff5..cdafd67 100644
--- a/src/components/MainContainer.tsx
+++ b/src/components/MainContainer.tsx
@@ -2,7 +2,7 @@ import PageContainer from './PageContainer';
 import Sidebar from './Sidebar';
 import { ToggleTheme } from './ToggleTheme';
 
-function MainContainer() {
+const MainContainer = () => {
   return (
     <div className="flex h-screen">
       <Sidebar />
@@ -12,6 +12,6 @@ function MainContainer() {
       </div>
     </div>
   );
-}
+};
 
 export default MainContainer;
diff --git a/src/components/PageContainer.tsx b/src/components/PageContainer.tsx
index 8d616a5..1bd7997 100644
--- a/src/components/PageContainer.tsx
+++ b/src/components/PageContainer.tsx
@@ -7,7 +7,7 @@ import Dashboard from './pages/Dashboard';
 import Todos from './pages/Todos';
 import NotFound from './pages/default/NotFound';
 
-function PageContainer() {
+const PageContainer = () => {
   return (
     <div className="flex flex-col flex-1">
       <Topbar />
@@ -19,6 +19,6 @@ function PageContainer() {
       </Switch>
     </div>
   );
-}
+};
 
 export default PageContainer;
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 154f73a..4fb7a75 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -15,7 +15,7 @@ export const items = [
   { name: 'Calendar', href: '/calendar', icon: IconCalendarWeekFilled },
 ];
 
-function Sidebar() {
+const Sidebar = () => {
   const [location] = useLocation();
   return (
     <nav className="flex flex-col min-w-[240px] max-w-[480px] bg-sidebar border">
@@ -37,6 +37,6 @@ function Sidebar() {
       </div>
     </nav>
   );
-}
+};
 
 export default Sidebar;
diff --git a/src/components/ToggleTheme.tsx b/src/components/ToggleTheme.tsx
index dfd8751..1dfde9e 100644
--- a/src/components/ToggleTheme.tsx
+++ b/src/components/ToggleTheme.tsx
@@ -5,7 +5,7 @@ import { Button } from '@/components/ui/button';
 import { useTheme } from '../hooks/useThemeHook';
 import { changeTheme } from '../lib/utils';
 
-export function ToggleTheme() {
+export const ToggleTheme = () => {
   const { theme, toggleTheme } = useTheme();
 
   useEffect(() => {
@@ -19,4 +19,4 @@ export function ToggleTheme() {
       <span className="sr-only">Toggle theme</span>
     </Button>
   );
-}
+};
diff --git a/src/components/Topbar.tsx b/src/components/Topbar.tsx
index f6901d5..525cea6 100644
--- a/src/components/Topbar.tsx
+++ b/src/components/Topbar.tsx
@@ -2,7 +2,7 @@ import { Button } from '@/components/ui/button';
 import { items } from './Sidebar';
 import { useLocation } from 'wouter';
 
-function Topbar() {
+const Topbar = () => {
   const [location] = useLocation();
   return (
     <div className="flex bg-sidebar p-2 gap-2 border-t border-r border-b border-l-0">
@@ -12,6 +12,6 @@ function Topbar() {
       </Button>
     </div>
   );
-}
+};
 
 export default Topbar;
diff --git a/src/components/pages/Dashboard.tsx b/src/components/pages/Dashboard.tsx
index 38b7203..e65ba24 100644
--- a/src/components/pages/Dashboard.tsx
+++ b/src/components/pages/Dashboard.tsx
@@ -1,9 +1,9 @@
-function Dashboard() {
+const Dashboard = () => {
   return (
     <div className="p-4">
       <h1 className="text-2xl font-bold">Dashboard</h1>
     </div>
   );
-}
+};
 
 export default Dashboard;
diff --git a/src/components/pages/Home.tsx b/src/components/pages/Home.tsx
index aaa526f..d869ecd 100644
--- a/src/components/pages/Home.tsx
+++ b/src/components/pages/Home.tsx
@@ -1,9 +1,9 @@
-function Home() {
+const Home = () => {
   return (
     <div className="p-4">
       <h1 className="text-2xl font-bold">Home</h1>
     </div>
   );
-}
+};
 
 export default Home;
diff --git a/src/components/pages/Todos.tsx b/src/components/pages/Todos.tsx
index 374a37a..d376556 100644
--- a/src/components/pages/Todos.tsx
+++ b/src/components/pages/Todos.tsx
@@ -1,9 +1,9 @@
-function Todos() {
+const Todos = () => {
   return (
     <div className="p-4">
       <h1 className="text-2xl font-bold">Todos</h1>
     </div>
   );
-}
+};
 
 export default Todos;
diff --git a/src/components/pages/default/NotFound.tsx b/src/components/pages/default/NotFound.tsx
index 1134774..0b113bc 100644
--- a/src/components/pages/default/NotFound.tsx
+++ b/src/components/pages/default/NotFound.tsx
@@ -1,9 +1,9 @@
-function NotFound() {
+const NotFound = () => {
   return (
     <div className="p-4">
       <h1 className="text-2xl font-bold">404 - Not Found!</h1>
     </div>
   );
-}
+};
 
 export default NotFound;