diff --git a/canopeum_frontend/src/App.tsx b/canopeum_frontend/src/App.tsx
index 4d5e2721b..0256407b1 100644
--- a/canopeum_frontend/src/App.tsx
+++ b/canopeum_frontend/src/App.tsx
@@ -1,31 +1,29 @@
 import './App.scss';
+import 'bootstrap/js/index.umd.js';
+
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
-import Home from './pages/Home';
+
+import Navbar from './components/Navbar';
 import Analytics from './pages/Analytics';
+import Home from './pages/Home';
+import Login from './pages/Login';
 import Map from './pages/Map';
 import UserManagement from './pages/UserManagement';
-import Login from './pages/Login';
-
-import Navbar from './components/Navbar';
 import Utilities from './pages/Utilities';
 
-import 'bootstrap/js/index.umd.js';
+const App = () => (
+  <BrowserRouter>
+    <Navbar />
+    <Routes>
+      <Route element={<Home />} path="/home" />
+      <Route element={<Home />} path="/" />
+      <Route element={<Analytics />} path="/analytics" />
+      <Route element={<Map />} path="/map" />
+      <Route element={<UserManagement />} path="/user-management" />
+      <Route element={<Login />} path="/login" />
+      <Route element={<Utilities />} path="/utilities" />
+    </Routes>
+  </BrowserRouter>
+);
 
-export default function App() {
-    return (
-        <>
-            <BrowserRouter>
-            <Navbar />
-                <Routes>
-                    <Route path="/home" element={<Home />} />
-                    <Route path="/" element={<Home />} />
-                    <Route path="/analytics" element={<Analytics />} />
-                    <Route path="/map" element={<Map />} />
-                    <Route path="/user-management" element={<UserManagement />} />
-                    <Route path="/login" element={<Login />} />
-                    <Route path="/utilities" element={<Utilities />} />
-                </Routes>
-            </BrowserRouter>
-        </>
-    );
-}
+export default App;
diff --git a/canopeum_frontend/src/components/Navbar.tsx b/canopeum_frontend/src/components/Navbar.tsx
index f0af7c110..e5ca079b2 100644
--- a/canopeum_frontend/src/components/Navbar.tsx
+++ b/canopeum_frontend/src/components/Navbar.tsx
@@ -1,57 +1,66 @@
 import { Link, useLocation } from 'react-router-dom';
 
+const Navbar = () => {
+  const location = useLocation();
 
-export default function Navbar() {
-
-    const location = useLocation();
-
-    return (
-        <nav className="navbar navbar-expand-lg bg-primary">
-            <div className="container">
-                <Link to="/home">
-                    <img className="navbar-logo" src="/Releaf_Logo.svg" alt="Logo" style={{ transition: 'all .5s' }} />
-                </Link>
-                <button
-                    className="navbar-toggler"
-                    type="button"
-                    data-toggle="collapse"
-                    data-target="#navbarNav"
-                    aria-controls="navbarNav"
-                    aria-expanded="false"
-                    aria-label="Toggle navigation"
-                >
-                    <span className="navbar-toggler-icon"></span>
-                </button>
-                <div className="collapse navbar-collapse" id="navbarNav">
-                    <ul className="navbar-nav d-flex w-100 ms-3 gap-3 fs-4">
-                        <li className={`nav-item ${location.pathname === '/home' ? 'active' : ''}`}>
-                            <Link className="nav-link" to="/home">
-                                <span className="material-symbols-outlined text-light">home</span>
-                            </Link>
-                        </li>
-                        <li className={`nav-item ${location.pathname === '/analytics' ? 'active' : ''}`}>
-                            <Link className="nav-link" to="/analytics">
-                                <span className="material-symbols-outlined text-light">donut_small</span>
-                            </Link>
-                        </li>
-                        <li className={`nav-item ${location.pathname === '/map' ? 'active' : ''}`}>
-                            <Link className="nav-link" to="/map">
-                                <span className="material-symbols-outlined text-light">pin_drop</span>
-                            </Link>
-                        </li>
-                        <li className={`nav-item ${location.pathname === '/utilities' ? 'active' : ''}`}>
-                            <Link className="nav-link" to="/utilities">
-                                <span className="material-symbols-outlined text-light">style</span>
-                            </Link>
-                        </li>
-                        <li className={`nav-item ms-auto ${location.pathname === '/user-management' ? 'active' : ''}`}>
-                            <Link className="nav-link" to="/user-management">
-                                <span className="material-symbols-outlined text-light">account_circle</span>
-                            </Link>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </nav>
-    );
-}
+  return (
+    <nav className="navbar navbar-expand-lg bg-primary">
+      <div className="container">
+        <Link to="/home">
+          <img alt="Logo" className="navbar-logo" src="/Releaf_Logo.svg" style={{ transition: 'all .5s' }} />
+        </Link>
+        <button
+          aria-controls="navbarNav"
+          aria-expanded="false"
+          aria-label="Toggle navigation"
+          className="navbar-toggler"
+          data-target="#navbarNav"
+          data-toggle="collapse"
+          type="button"
+        >
+          <span className="navbar-toggler-icon" />
+        </button>
+        <div className="collapse navbar-collapse" id="navbarNav">
+          <ul className="navbar-nav d-flex w-100 ms-3 gap-3 fs-4">
+            <li className={`nav-item ${location.pathname === '/home'
+? 'active'
+: ''}`}>
+              <Link className="nav-link" to="/home">
+                <span className="material-symbols-outlined text-light">home</span>
+              </Link>
+            </li>
+            <li className={`nav-item ${location.pathname === '/analytics'
+? 'active'
+: ''}`}>
+              <Link className="nav-link" to="/analytics">
+                <span className="material-symbols-outlined text-light">donut_small</span>
+              </Link>
+            </li>
+            <li className={`nav-item ${location.pathname === '/map'
+? 'active'
+: ''}`}>
+              <Link className="nav-link" to="/map">
+                <span className="material-symbols-outlined text-light">pin_drop</span>
+              </Link>
+            </li>
+            <li className={`nav-item ${location.pathname === '/utilities'
+? 'active'
+: ''}`}>
+              <Link className="nav-link" to="/utilities">
+                <span className="material-symbols-outlined text-light">style</span>
+              </Link>
+            </li>
+            <li className={`nav-item ms-auto ${location.pathname === '/user-management'
+? 'active'
+: ''}`}>
+              <Link className="nav-link" to="/user-management">
+                <span className="material-symbols-outlined text-light">account_circle</span>
+              </Link>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+  );
+};
+export default Navbar;
diff --git a/canopeum_frontend/src/pages/Home.tsx b/canopeum_frontend/src/pages/Home.tsx
index ef1d651ec..0a4fa897a 100644
--- a/canopeum_frontend/src/pages/Home.tsx
+++ b/canopeum_frontend/src/pages/Home.tsx
@@ -1,50 +1,56 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react';
 
-import type { BatchAnalytics } from '../services/api.ts'
-import api from '../services/apiInterface.ts'
-import { ensureError } from '../services/errors.ts'
+import type { BatchAnalytics } from '../services/api.ts';
+import api from '../services/apiInterface.ts';
+import { ensureError } from '../services/errors.ts';
 
 const Home = () => {
-  const [data, setData] = useState<BatchAnalytics[]>([])
-  const [isLoading, setIsLoading] = useState(false)
-  const [error, setError] = useState<Error | undefined>(undefined)
+  const [data, setData] = useState<BatchAnalytics[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<Error | undefined>(undefined);
 
   const fetchData = async () => {
-    setIsLoading(true)
+    setIsLoading(true);
     try {
-      const response = await api.batches.all()
-      setData(response)
+      const response = await api.batches.all();
+      setData(response);
     } catch (error_: unknown) {
-      setError(ensureError(error_))
+      setError(ensureError(error_));
     } finally {
-      setIsLoading(false)
+      setIsLoading(false);
     }
-  }
+  };
 
   useEffect((): void => {
-    void fetchData()
-  }, [])
+    void fetchData();
+  }, []);
 
   return (
     <div>
-      <div className='container mt-2 d-flex flex-column gap-2'>
-        <div className='bg-white rounded-2 px-3 py-2'>
+      <div className="container mt-2 d-flex flex-column gap-2">
+        <div className="bg-white rounded-2 px-3 py-2">
           <h1>Home</h1>
           {isLoading
-            ? <p>Loading...</p>
-            : error
-            ? <p>Error: {error.message}</p>
-            : (
-              <div>
-                <p>Exemple request from API:</p>
-                <ul>
-                  {(data).map(item => <li key={item.id}>{item.name}</li>)}
-                </ul>
-              </div>
-            )}
+? (
+            <p>Loading...</p>
+          )
+: error
+? (
+            <p>Error: {error.message}</p>
+          )
+: (
+            <div>
+              <p>Example request from API:</p>
+              <ul>
+                {data.map((item) => (
+                  <li key={item.id}>{item.name}</li>
+                ))}
+              </ul>
+            </div>
+          )}
         </div>
       </div>
     </div>
-  )
-}
-export default Home
+  );
+};
+export default Home;
diff --git a/canopeum_frontend/src/pages/UserManagement.tsx b/canopeum_frontend/src/pages/UserManagement.tsx
index da41e37c4..95772e6d2 100644
--- a/canopeum_frontend/src/pages/UserManagement.tsx
+++ b/canopeum_frontend/src/pages/UserManagement.tsx
@@ -1,11 +1,11 @@
-export default function UserManagement() {
-    return (
-        <div>
-             <div className="container mt-2 d-flex flex-column gap-2">
-                <div className="bg-white rounded-2 px-3 py-2">
-                    <h1>Setting</h1>
-                </div>
-            </div>
-        </div>
-    );
-}
+const UserManagement = () => (
+  <div>
+    <div className="container mt-2 d-flex flex-column gap-2">
+      <div className="bg-white rounded-2 px-3 py-2">
+        <h1>Setting</h1>
+      </div>
+    </div>
+  </div>
+);
+
+export default UserManagement;
diff --git a/canopeum_frontend/src/services/apiInterface.ts b/canopeum_frontend/src/services/apiInterface.ts
index 303cedbab..aa9ac6533 100644
--- a/canopeum_frontend/src/services/apiInterface.ts
+++ b/canopeum_frontend/src/services/apiInterface.ts
@@ -1,5 +1,6 @@
 import {
   AnnouncementClient,
+  AuthenticationClient,
   BatchClient,
   CommentClient,
   ContactClient,
@@ -8,8 +9,7 @@ import {
   SiteClient,
   UserClient,
   WidgetClient,
-  AuthenticationClient,
-} from "./api";
+} from './api';
 
 const API_URL = String(import.meta.env.VITE_API_URL);