diff --git a/frontend/modify-openapi-operationids.js b/frontend/modify-openapi-operationids.js
index fa222ba6cc..b22fd17f9e 100644
--- a/frontend/modify-openapi-operationids.js
+++ b/frontend/modify-openapi-operationids.js
@@ -1,4 +1,4 @@
-import * as fs from 'fs'
+import * as fs from "node:fs"
 
 async function modifyOpenAPIFile(filePath) {
   try {
@@ -26,11 +26,11 @@ async function modifyOpenAPIFile(filePath) {
       filePath,
       JSON.stringify(openapiContent, null, 2),
     )
-    console.log('File successfully modified')
+    console.log("File successfully modified")
   } catch (err) {
-    console.error('Error:', err)
+    console.error("Error:", err)
   }
 }
 
-const filePath = './openapi.json'
+const filePath = "./openapi.json"
 modifyOpenAPIFile(filePath)
diff --git a/frontend/src/components/Admin/AddUser.tsx b/frontend/src/components/Admin/AddUser.tsx
index 207dc5ed08..2fa91d513a 100644
--- a/frontend/src/components/Admin/AddUser.tsx
+++ b/frontend/src/components/Admin/AddUser.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import {
   Button,
   Checkbox,
@@ -14,13 +13,14 @@ import {
   ModalFooter,
   ModalHeader,
   ModalOverlay,
-} from '@chakra-ui/react'
-import { SubmitHandler, useForm } from 'react-hook-form'
-import { useMutation, useQueryClient } from 'react-query'
+} from "@chakra-ui/react"
+import type React from "react"
+import { type SubmitHandler, useForm } from "react-hook-form"
+import { useMutation, useQueryClient } from "react-query"
 
-import { UserCreate, UsersService } from '../../client'
-import { ApiError } from '../../client/core/ApiError'
-import useCustomToast from '../../hooks/useCustomToast'
+import { type UserCreate, UsersService } from "../../client"
+import type { ApiError } from "../../client/core/ApiError"
+import useCustomToast from "../../hooks/useCustomToast"
 
 interface AddUserProps {
   isOpen: boolean
@@ -41,13 +41,13 @@ const AddUser: React.FC<AddUserProps> = ({ isOpen, onClose }) => {
     getValues,
     formState: { errors, isSubmitting },
   } = useForm<UserCreateForm>({
-    mode: 'onBlur',
-    criteriaMode: 'all',
+    mode: "onBlur",
+    criteriaMode: "all",
     defaultValues: {
-      email: '',
-      full_name: '',
-      password: '',
-      confirm_password: '',
+      email: "",
+      full_name: "",
+      password: "",
+      confirm_password: "",
       is_superuser: false,
       is_active: false,
     },
@@ -59,16 +59,16 @@ const AddUser: React.FC<AddUserProps> = ({ isOpen, onClose }) => {
 
   const mutation = useMutation(addUser, {
     onSuccess: () => {
-      showToast('Success!', 'User created successfully.', 'success')
+      showToast("Success!", "User created successfully.", "success")
       reset()
       onClose()
     },
     onError: (err: ApiError) => {
       const errDetail = err.body?.detail
-      showToast('Something went wrong.', `${errDetail}`, 'error')
+      showToast("Something went wrong.", `${errDetail}`, "error")
     },
     onSettled: () => {
-      queryClient.invalidateQueries('users')
+      queryClient.invalidateQueries("users")
     },
   })
 
@@ -81,7 +81,7 @@ const AddUser: React.FC<AddUserProps> = ({ isOpen, onClose }) => {
       <Modal
         isOpen={isOpen}
         onClose={onClose}
-        size={{ base: 'sm', md: 'md' }}
+        size={{ base: "sm", md: "md" }}
         isCentered
       >
         <ModalOverlay />
@@ -93,11 +93,11 @@ const AddUser: React.FC<AddUserProps> = ({ isOpen, onClose }) => {
               <FormLabel htmlFor="email">Email</FormLabel>
               <Input
                 id="email"
-                {...register('email', {
-                  required: 'Email is required',
+                {...register("email", {
+                  required: "Email is required",
                   pattern: {
                     value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
-                    message: 'Invalid email address',
+                    message: "Invalid email address",
                   },
                 })}
                 placeholder="Email"
@@ -111,7 +111,7 @@ const AddUser: React.FC<AddUserProps> = ({ isOpen, onClose }) => {
               <FormLabel htmlFor="name">Full name</FormLabel>
               <Input
                 id="name"
-                {...register('full_name')}
+                {...register("full_name")}
                 placeholder="Full name"
                 type="text"
               />
@@ -123,11 +123,11 @@ const AddUser: React.FC<AddUserProps> = ({ isOpen, onClose }) => {
               <FormLabel htmlFor="password">Set Password</FormLabel>
               <Input
                 id="password"
-                {...register('password', {
-                  required: 'Password is required',
+                {...register("password", {
+                  required: "Password is required",
                   minLength: {
                     value: 8,
-                    message: 'Password must be at least 8 characters',
+                    message: "Password must be at least 8 characters",
                   },
                 })}
                 placeholder="Password"
@@ -145,11 +145,11 @@ const AddUser: React.FC<AddUserProps> = ({ isOpen, onClose }) => {
               <FormLabel htmlFor="confirm_password">Confirm Password</FormLabel>
               <Input
                 id="confirm_password"
-                {...register('confirm_password', {
-                  required: 'Please confirm your password',
+                {...register("confirm_password", {
+                  required: "Please confirm your password",
                   validate: (value) =>
                     value === getValues().password ||
-                    'The passwords do not match',
+                    "The passwords do not match",
                 })}
                 placeholder="Password"
                 type="password"
@@ -162,12 +162,12 @@ const AddUser: React.FC<AddUserProps> = ({ isOpen, onClose }) => {
             </FormControl>
             <Flex mt={4}>
               <FormControl>
-                <Checkbox {...register('is_superuser')} colorScheme="teal">
+                <Checkbox {...register("is_superuser")} colorScheme="teal">
                   Is superuser?
                 </Checkbox>
               </FormControl>
               <FormControl>
-                <Checkbox {...register('is_active')} colorScheme="teal">
+                <Checkbox {...register("is_active")} colorScheme="teal">
                   Is active?
                 </Checkbox>
               </FormControl>
diff --git a/frontend/src/components/Admin/EditUser.tsx b/frontend/src/components/Admin/EditUser.tsx
index dd52241857..f852972d44 100644
--- a/frontend/src/components/Admin/EditUser.tsx
+++ b/frontend/src/components/Admin/EditUser.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import {
   Button,
   Checkbox,
@@ -14,12 +13,18 @@ import {
   ModalFooter,
   ModalHeader,
   ModalOverlay,
-} from '@chakra-ui/react'
-import { SubmitHandler, useForm } from 'react-hook-form'
-import { useMutation, useQueryClient } from 'react-query'
+} from "@chakra-ui/react"
+import type React from "react"
+import { type SubmitHandler, useForm } from "react-hook-form"
+import { useMutation, useQueryClient } from "react-query"
 
-import { ApiError, UserOut, UserUpdate, UsersService } from '../../client'
-import useCustomToast from '../../hooks/useCustomToast'
+import {
+  type ApiError,
+  type UserOut,
+  type UserUpdate,
+  UsersService,
+} from "../../client"
+import useCustomToast from "../../hooks/useCustomToast"
 
 interface EditUserProps {
   user: UserOut
@@ -42,8 +47,8 @@ const EditUser: React.FC<EditUserProps> = ({ user, isOpen, onClose }) => {
     getValues,
     formState: { errors, isSubmitting, isDirty },
   } = useForm<UserUpdateForm>({
-    mode: 'onBlur',
-    criteriaMode: 'all',
+    mode: "onBlur",
+    criteriaMode: "all",
     defaultValues: user,
   })
 
@@ -53,20 +58,20 @@ const EditUser: React.FC<EditUserProps> = ({ user, isOpen, onClose }) => {
 
   const mutation = useMutation(updateUser, {
     onSuccess: () => {
-      showToast('Success!', 'User updated successfully.', 'success')
+      showToast("Success!", "User updated successfully.", "success")
       onClose()
     },
     onError: (err: ApiError) => {
       const errDetail = err.body?.detail
-      showToast('Something went wrong.', `${errDetail}`, 'error')
+      showToast("Something went wrong.", `${errDetail}`, "error")
     },
     onSettled: () => {
-      queryClient.invalidateQueries('users')
+      queryClient.invalidateQueries("users")
     },
   })
 
   const onSubmit: SubmitHandler<UserUpdateForm> = async (data) => {
-    if (data.password === '') {
+    if (data.password === "") {
       data.password = undefined
     }
     mutation.mutate(data)
@@ -82,7 +87,7 @@ const EditUser: React.FC<EditUserProps> = ({ user, isOpen, onClose }) => {
       <Modal
         isOpen={isOpen}
         onClose={onClose}
-        size={{ base: 'sm', md: 'md' }}
+        size={{ base: "sm", md: "md" }}
         isCentered
       >
         <ModalOverlay />
@@ -94,11 +99,11 @@ const EditUser: React.FC<EditUserProps> = ({ user, isOpen, onClose }) => {
               <FormLabel htmlFor="email">Email</FormLabel>
               <Input
                 id="email"
-                {...register('email', {
-                  required: 'Email is required',
+                {...register("email", {
+                  required: "Email is required",
                   pattern: {
                     value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
-                    message: 'Invalid email address',
+                    message: "Invalid email address",
                   },
                 })}
                 placeholder="Email"
@@ -110,16 +115,16 @@ const EditUser: React.FC<EditUserProps> = ({ user, isOpen, onClose }) => {
             </FormControl>
             <FormControl mt={4}>
               <FormLabel htmlFor="name">Full name</FormLabel>
-              <Input id="name" {...register('full_name')} type="text" />
+              <Input id="name" {...register("full_name")} type="text" />
             </FormControl>
             <FormControl mt={4} isInvalid={!!errors.password}>
               <FormLabel htmlFor="password">Set Password</FormLabel>
               <Input
                 id="password"
-                {...register('password', {
+                {...register("password", {
                   minLength: {
                     value: 8,
-                    message: 'Password must be at least 8 characters',
+                    message: "Password must be at least 8 characters",
                   },
                 })}
                 placeholder="Password"
@@ -133,10 +138,10 @@ const EditUser: React.FC<EditUserProps> = ({ user, isOpen, onClose }) => {
               <FormLabel htmlFor="confirm_password">Confirm Password</FormLabel>
               <Input
                 id="confirm_password"
-                {...register('confirm_password', {
+                {...register("confirm_password", {
                   validate: (value) =>
                     value === getValues().password ||
-                    'The passwords do not match',
+                    "The passwords do not match",
                 })}
                 placeholder="Password"
                 type="password"
@@ -149,12 +154,12 @@ const EditUser: React.FC<EditUserProps> = ({ user, isOpen, onClose }) => {
             </FormControl>
             <Flex>
               <FormControl mt={4}>
-                <Checkbox {...register('is_superuser')} colorScheme="teal">
+                <Checkbox {...register("is_superuser")} colorScheme="teal">
                   Is superuser?
                 </Checkbox>
               </FormControl>
               <FormControl mt={4}>
-                <Checkbox {...register('is_active')} colorScheme="teal">
+                <Checkbox {...register("is_active")} colorScheme="teal">
                   Is active?
                 </Checkbox>
               </FormControl>
diff --git a/frontend/src/components/Common/ActionsMenu.tsx b/frontend/src/components/Common/ActionsMenu.tsx
index 94ec8c1843..359ce9d09d 100644
--- a/frontend/src/components/Common/ActionsMenu.tsx
+++ b/frontend/src/components/Common/ActionsMenu.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import {
   Button,
   Menu,
@@ -6,14 +5,15 @@ import {
   MenuItem,
   MenuList,
   useDisclosure,
-} from '@chakra-ui/react'
-import { BsThreeDotsVertical } from 'react-icons/bs'
-import { FiEdit, FiTrash } from 'react-icons/fi'
+} from "@chakra-ui/react"
+import type React from "react"
+import { BsThreeDotsVertical } from "react-icons/bs"
+import { FiEdit, FiTrash } from "react-icons/fi"
 
-import EditUser from '../Admin/EditUser'
-import EditItem from '../Items/EditItem'
-import Delete from './DeleteAlert'
-import { ItemOut, UserOut } from '../../client'
+import type { ItemOut, UserOut } from "../../client"
+import EditUser from "../Admin/EditUser"
+import EditItem from "../Items/EditItem"
+import Delete from "./DeleteAlert"
 
 interface ActionsMenuProps {
   type: string
@@ -49,7 +49,7 @@ const ActionsMenu: React.FC<ActionsMenuProps> = ({ type, value, disabled }) => {
             Delete {type}
           </MenuItem>
         </MenuList>
-        {type === 'User' ? (
+        {type === "User" ? (
           <EditUser
             user={value as UserOut}
             isOpen={editUserModal.isOpen}
diff --git a/frontend/src/components/Common/DeleteAlert.tsx b/frontend/src/components/Common/DeleteAlert.tsx
index 67eaaf7e5d..656c0dd63d 100644
--- a/frontend/src/components/Common/DeleteAlert.tsx
+++ b/frontend/src/components/Common/DeleteAlert.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import {
   AlertDialog,
   AlertDialogBody,
@@ -7,12 +6,13 @@ import {
   AlertDialogHeader,
   AlertDialogOverlay,
   Button,
-} from '@chakra-ui/react'
-import { useForm } from 'react-hook-form'
-import { useMutation, useQueryClient } from 'react-query'
+} from "@chakra-ui/react"
+import React from "react"
+import { useForm } from "react-hook-form"
+import { useMutation, useQueryClient } from "react-query"
 
-import { ItemsService, UsersService } from '../../client'
-import useCustomToast from '../../hooks/useCustomToast'
+import { ItemsService, UsersService } from "../../client"
+import useCustomToast from "../../hooks/useCustomToast"
 
 interface DeleteProps {
   type: string
@@ -31,9 +31,9 @@ const Delete: React.FC<DeleteProps> = ({ type, id, isOpen, onClose }) => {
   } = useForm()
 
   const deleteEntity = async (id: number) => {
-    if (type === 'Item') {
+    if (type === "Item") {
       await ItemsService.deleteItem({ id: id })
-    } else if (type === 'User') {
+    } else if (type === "User") {
       await UsersService.deleteUser({ userId: id })
     } else {
       throw new Error(`Unexpected type: ${type}`)
@@ -43,21 +43,21 @@ const Delete: React.FC<DeleteProps> = ({ type, id, isOpen, onClose }) => {
   const mutation = useMutation(deleteEntity, {
     onSuccess: () => {
       showToast(
-        'Success',
+        "Success",
         `The ${type.toLowerCase()} was deleted successfully.`,
-        'success',
+        "success",
       )
       onClose()
     },
     onError: () => {
       showToast(
-        'An error occurred.',
+        "An error occurred.",
         `An error occurred while deleting the ${type.toLowerCase()}.`,
-        'error',
+        "error",
       )
     },
     onSettled: () => {
-      queryClient.invalidateQueries(type === 'Item' ? 'items' : 'users')
+      queryClient.invalidateQueries(type === "Item" ? "items" : "users")
     },
   })
 
@@ -71,7 +71,7 @@ const Delete: React.FC<DeleteProps> = ({ type, id, isOpen, onClose }) => {
         isOpen={isOpen}
         onClose={onClose}
         leastDestructiveRef={cancelRef}
-        size={{ base: 'sm', md: 'md' }}
+        size={{ base: "sm", md: "md" }}
         isCentered
       >
         <AlertDialogOverlay>
@@ -79,9 +79,9 @@ const Delete: React.FC<DeleteProps> = ({ type, id, isOpen, onClose }) => {
             <AlertDialogHeader>Delete {type}</AlertDialogHeader>
 
             <AlertDialogBody>
-              {type === 'User' && (
+              {type === "User" && (
                 <span>
-                  All items associated with this user will also be{' '}
+                  All items associated with this user will also be{" "}
                   <strong>permantly deleted. </strong>
                 </span>
               )}
diff --git a/frontend/src/components/Common/Navbar.tsx b/frontend/src/components/Common/Navbar.tsx
index 3cecb48e2a..b0593509ce 100644
--- a/frontend/src/components/Common/Navbar.tsx
+++ b/frontend/src/components/Common/Navbar.tsx
@@ -1,9 +1,9 @@
-import React from 'react'
-import { Button, Flex, Icon, useDisclosure } from '@chakra-ui/react'
-import { FaPlus } from 'react-icons/fa'
+import { Button, Flex, Icon, useDisclosure } from "@chakra-ui/react"
+import type React from "react"
+import { FaPlus } from "react-icons/fa"
 
-import AddUser from '../Admin/AddUser'
-import AddItem from '../Items/AddItem'
+import AddUser from "../Admin/AddUser"
+import AddItem from "../Items/AddItem"
 
 interface NavbarProps {
   type: string
@@ -26,8 +26,8 @@ const Navbar: React.FC<NavbarProps> = ({ type }) => {
         <Button
           variant="primary"
           gap={1}
-          fontSize={{ base: 'sm', md: 'inherit' }}
-          onClick={type === 'User' ? addUserModal.onOpen : addItemModal.onOpen}
+          fontSize={{ base: "sm", md: "inherit" }}
+          onClick={type === "User" ? addUserModal.onOpen : addItemModal.onOpen}
         >
           <Icon as={FaPlus} /> Add {type}
         </Button>
diff --git a/frontend/src/components/Common/NotFound.tsx b/frontend/src/components/Common/NotFound.tsx
index e3ce2bc4c3..1c6019c1b7 100644
--- a/frontend/src/components/Common/NotFound.tsx
+++ b/frontend/src/components/Common/NotFound.tsx
@@ -1,6 +1,6 @@
-import React from 'react'
-import { Button, Container, Text } from '@chakra-ui/react'
-import { Link } from '@tanstack/react-router'
+import { Button, Container, Text } from "@chakra-ui/react"
+import { Link } from "@tanstack/react-router"
+import type React from "react"
 
 const NotFound: React.FC = () => {
   return (
diff --git a/frontend/src/components/Common/Sidebar.tsx b/frontend/src/components/Common/Sidebar.tsx
index 65d0fc5349..4f92714065 100644
--- a/frontend/src/components/Common/Sidebar.tsx
+++ b/frontend/src/components/Common/Sidebar.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import {
   Box,
   Drawer,
@@ -12,21 +11,22 @@ import {
   Text,
   useColorModeValue,
   useDisclosure,
-} from '@chakra-ui/react'
-import { FiLogOut, FiMenu } from 'react-icons/fi'
-import { useQueryClient } from 'react-query'
+} from "@chakra-ui/react"
+import type React from "react"
+import { FiLogOut, FiMenu } from "react-icons/fi"
+import { useQueryClient } from "react-query"
 
-import Logo from '../../assets/images/fastapi-logo.svg'
-import { UserOut } from '../../client'
-import useAuth from '../../hooks/useAuth'
-import SidebarItems from './SidebarItems'
+import Logo from "../../assets/images/fastapi-logo.svg"
+import type { UserOut } from "../../client"
+import useAuth from "../../hooks/useAuth"
+import SidebarItems from "./SidebarItems"
 
 const Sidebar: React.FC = () => {
   const queryClient = useQueryClient()
-  const bgColor = useColorModeValue('ui.white', 'ui.dark')
-  const textColor = useColorModeValue('ui.dark', 'ui.white')
-  const secBgColor = useColorModeValue('ui.secondary', 'ui.darkSlate')
-  const currentUser = queryClient.getQueryData<UserOut>('currentUser')
+  const bgColor = useColorModeValue("ui.white", "ui.dark")
+  const textColor = useColorModeValue("ui.dark", "ui.white")
+  const secBgColor = useColorModeValue("ui.secondary", "ui.darkSlate")
+  const currentUser = queryClient.getQueryData<UserOut>("currentUser")
   const { isOpen, onOpen, onClose } = useDisclosure()
   const { logout } = useAuth()
 
@@ -39,7 +39,7 @@ const Sidebar: React.FC = () => {
       {/* Mobile */}
       <IconButton
         onClick={onOpen}
-        display={{ base: 'flex', md: 'none' }}
+        display={{ base: "flex", md: "none" }}
         aria-label="Open Menu"
         position="absolute"
         fontSize="20px"
@@ -84,7 +84,7 @@ const Sidebar: React.FC = () => {
         h="100vh"
         position="sticky"
         top="0"
-        display={{ base: 'none', md: 'flex' }}
+        display={{ base: "none", md: "flex" }}
       >
         <Flex
           flexDir="column"
diff --git a/frontend/src/components/Common/SidebarItems.tsx b/frontend/src/components/Common/SidebarItems.tsx
index 9457d03b05..1fd6909383 100644
--- a/frontend/src/components/Common/SidebarItems.tsx
+++ b/frontend/src/components/Common/SidebarItems.tsx
@@ -1,15 +1,15 @@
-import React from 'react'
-import { Box, Flex, Icon, Text, useColorModeValue } from '@chakra-ui/react'
-import { FiBriefcase, FiHome, FiSettings, FiUsers } from 'react-icons/fi'
-import { Link } from '@tanstack/react-router'
-import { useQueryClient } from 'react-query'
+import { Box, Flex, Icon, Text, useColorModeValue } from "@chakra-ui/react"
+import { Link } from "@tanstack/react-router"
+import type React from "react"
+import { FiBriefcase, FiHome, FiSettings, FiUsers } from "react-icons/fi"
+import { useQueryClient } from "react-query"
 
-import { UserOut } from '../../client'
+import type { UserOut } from "../../client"
 
 const items = [
-  { icon: FiHome, title: 'Dashboard', path: '/' },
-  { icon: FiBriefcase, title: 'Items', path: '/items' },
-  { icon: FiSettings, title: 'User Settings', path: '/settings' },
+  { icon: FiHome, title: "Dashboard", path: "/" },
+  { icon: FiBriefcase, title: "Items", path: "/items" },
+  { icon: FiSettings, title: "User Settings", path: "/settings" },
 ]
 
 interface SidebarItemsProps {
@@ -18,12 +18,12 @@ interface SidebarItemsProps {
 
 const SidebarItems: React.FC<SidebarItemsProps> = ({ onClose }) => {
   const queryClient = useQueryClient()
-  const textColor = useColorModeValue('ui.main', 'ui.white')
-  const bgActive = useColorModeValue('#E2E8F0', '#4A5568')
-  const currentUser = queryClient.getQueryData<UserOut>('currentUser')
+  const textColor = useColorModeValue("ui.main", "ui.white")
+  const bgActive = useColorModeValue("#E2E8F0", "#4A5568")
+  const currentUser = queryClient.getQueryData<UserOut>("currentUser")
 
   const finalItems = currentUser?.is_superuser
-    ? [...items, { icon: FiUsers, title: 'Admin', path: '/admin' }]
+    ? [...items, { icon: FiUsers, title: "Admin", path: "/admin" }]
     : items
 
   const listItems = finalItems.map((item) => (
@@ -36,7 +36,7 @@ const SidebarItems: React.FC<SidebarItemsProps> = ({ onClose }) => {
       activeProps={{
         style: {
           background: bgActive,
-          borderRadius: '12px',
+          borderRadius: "12px",
         },
       }}
       color={textColor}
diff --git a/frontend/src/components/Common/UserMenu.tsx b/frontend/src/components/Common/UserMenu.tsx
index 1b2020a245..add861b081 100644
--- a/frontend/src/components/Common/UserMenu.tsx
+++ b/frontend/src/components/Common/UserMenu.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import {
   Box,
   IconButton,
@@ -6,12 +5,13 @@ import {
   MenuButton,
   MenuItem,
   MenuList,
-} from '@chakra-ui/react'
-import { FaUserAstronaut } from 'react-icons/fa'
-import { FiLogOut, FiUser } from 'react-icons/fi'
+} from "@chakra-ui/react"
+import type React from "react"
+import { FaUserAstronaut } from "react-icons/fa"
+import { FiLogOut, FiUser } from "react-icons/fi"
 
-import useAuth from '../../hooks/useAuth'
-import { Link } from '@tanstack/react-router'
+import { Link } from "@tanstack/react-router"
+import useAuth from "../../hooks/useAuth"
 
 const UserMenu: React.FC = () => {
   const { logout } = useAuth()
@@ -24,7 +24,7 @@ const UserMenu: React.FC = () => {
     <>
       {/* Desktop */}
       <Box
-        display={{ base: 'none', md: 'block' }}
+        display={{ base: "none", md: "block" }}
         position="fixed"
         top={4}
         right={4}
diff --git a/frontend/src/components/Items/AddItem.tsx b/frontend/src/components/Items/AddItem.tsx
index 8b7e80506e..0ea3ab5ffd 100644
--- a/frontend/src/components/Items/AddItem.tsx
+++ b/frontend/src/components/Items/AddItem.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import {
   Button,
   FormControl,
@@ -12,12 +11,13 @@ import {
   ModalFooter,
   ModalHeader,
   ModalOverlay,
-} from '@chakra-ui/react'
-import { SubmitHandler, useForm } from 'react-hook-form'
-import { useMutation, useQueryClient } from 'react-query'
+} from "@chakra-ui/react"
+import type React from "react"
+import { type SubmitHandler, useForm } from "react-hook-form"
+import { useMutation, useQueryClient } from "react-query"
 
-import { ApiError, ItemCreate, ItemsService } from '../../client'
-import useCustomToast from '../../hooks/useCustomToast'
+import { type ApiError, type ItemCreate, ItemsService } from "../../client"
+import useCustomToast from "../../hooks/useCustomToast"
 
 interface AddItemProps {
   isOpen: boolean
@@ -33,11 +33,11 @@ const AddItem: React.FC<AddItemProps> = ({ isOpen, onClose }) => {
     reset,
     formState: { errors, isSubmitting },
   } = useForm<ItemCreate>({
-    mode: 'onBlur',
-    criteriaMode: 'all',
+    mode: "onBlur",
+    criteriaMode: "all",
     defaultValues: {
-      title: '',
-      description: '',
+      title: "",
+      description: "",
     },
   })
 
@@ -47,16 +47,16 @@ const AddItem: React.FC<AddItemProps> = ({ isOpen, onClose }) => {
 
   const mutation = useMutation(addItem, {
     onSuccess: () => {
-      showToast('Success!', 'Item created successfully.', 'success')
+      showToast("Success!", "Item created successfully.", "success")
       reset()
       onClose()
     },
     onError: (err: ApiError) => {
       const errDetail = err.body?.detail
-      showToast('Something went wrong.', `${errDetail}`, 'error')
+      showToast("Something went wrong.", `${errDetail}`, "error")
     },
     onSettled: () => {
-      queryClient.invalidateQueries('items')
+      queryClient.invalidateQueries("items")
     },
   })
 
@@ -69,7 +69,7 @@ const AddItem: React.FC<AddItemProps> = ({ isOpen, onClose }) => {
       <Modal
         isOpen={isOpen}
         onClose={onClose}
-        size={{ base: 'sm', md: 'md' }}
+        size={{ base: "sm", md: "md" }}
         isCentered
       >
         <ModalOverlay />
@@ -81,8 +81,8 @@ const AddItem: React.FC<AddItemProps> = ({ isOpen, onClose }) => {
               <FormLabel htmlFor="title">Title</FormLabel>
               <Input
                 id="title"
-                {...register('title', {
-                  required: 'Title is required.',
+                {...register("title", {
+                  required: "Title is required.",
                 })}
                 placeholder="Title"
                 type="text"
@@ -95,7 +95,7 @@ const AddItem: React.FC<AddItemProps> = ({ isOpen, onClose }) => {
               <FormLabel htmlFor="description">Description</FormLabel>
               <Input
                 id="description"
-                {...register('description')}
+                {...register("description")}
                 placeholder="Description"
                 type="text"
               />
diff --git a/frontend/src/components/Items/EditItem.tsx b/frontend/src/components/Items/EditItem.tsx
index 03a0b7b2be..b1dca38ec9 100644
--- a/frontend/src/components/Items/EditItem.tsx
+++ b/frontend/src/components/Items/EditItem.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import {
   Button,
   FormControl,
@@ -12,12 +11,18 @@ import {
   ModalFooter,
   ModalHeader,
   ModalOverlay,
-} from '@chakra-ui/react'
-import { SubmitHandler, useForm } from 'react-hook-form'
+} from "@chakra-ui/react"
+import type React from "react"
+import { type SubmitHandler, useForm } from "react-hook-form"
 
-import { useMutation, useQueryClient } from 'react-query'
-import { ApiError, ItemOut, ItemUpdate, ItemsService } from '../../client'
-import useCustomToast from '../../hooks/useCustomToast'
+import { useMutation, useQueryClient } from "react-query"
+import {
+  type ApiError,
+  type ItemOut,
+  type ItemUpdate,
+  ItemsService,
+} from "../../client"
+import useCustomToast from "../../hooks/useCustomToast"
 
 interface EditItemProps {
   item: ItemOut
@@ -34,8 +39,8 @@ const EditItem: React.FC<EditItemProps> = ({ item, isOpen, onClose }) => {
     reset,
     formState: { isSubmitting, errors, isDirty },
   } = useForm<ItemUpdate>({
-    mode: 'onBlur',
-    criteriaMode: 'all',
+    mode: "onBlur",
+    criteriaMode: "all",
     defaultValues: item,
   })
 
@@ -45,15 +50,15 @@ const EditItem: React.FC<EditItemProps> = ({ item, isOpen, onClose }) => {
 
   const mutation = useMutation(updateItem, {
     onSuccess: () => {
-      showToast('Success!', 'Item updated successfully.', 'success')
+      showToast("Success!", "Item updated successfully.", "success")
       onClose()
     },
     onError: (err: ApiError) => {
       const errDetail = err.body?.detail
-      showToast('Something went wrong.', `${errDetail}`, 'error')
+      showToast("Something went wrong.", `${errDetail}`, "error")
     },
     onSettled: () => {
-      queryClient.invalidateQueries('items')
+      queryClient.invalidateQueries("items")
     },
   })
 
@@ -71,7 +76,7 @@ const EditItem: React.FC<EditItemProps> = ({ item, isOpen, onClose }) => {
       <Modal
         isOpen={isOpen}
         onClose={onClose}
-        size={{ base: 'sm', md: 'md' }}
+        size={{ base: "sm", md: "md" }}
         isCentered
       >
         <ModalOverlay />
@@ -83,8 +88,8 @@ const EditItem: React.FC<EditItemProps> = ({ item, isOpen, onClose }) => {
               <FormLabel htmlFor="title">Title</FormLabel>
               <Input
                 id="title"
-                {...register('title', {
-                  required: 'Title is required',
+                {...register("title", {
+                  required: "Title is required",
                 })}
                 type="text"
               />
@@ -96,7 +101,7 @@ const EditItem: React.FC<EditItemProps> = ({ item, isOpen, onClose }) => {
               <FormLabel htmlFor="description">Description</FormLabel>
               <Input
                 id="description"
-                {...register('description')}
+                {...register("description")}
                 placeholder="Description"
                 type="text"
               />
diff --git a/frontend/src/components/UserSettings/Appearance.tsx b/frontend/src/components/UserSettings/Appearance.tsx
index 100426c6c1..aa690c792f 100644
--- a/frontend/src/components/UserSettings/Appearance.tsx
+++ b/frontend/src/components/UserSettings/Appearance.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import {
   Badge,
   Container,
@@ -7,7 +6,8 @@ import {
   RadioGroup,
   Stack,
   useColorMode,
-} from '@chakra-ui/react'
+} from "@chakra-ui/react"
+import type React from "react"
 
 const Appearance: React.FC = () => {
   const { colorMode, toggleColorMode } = useColorMode()
diff --git a/frontend/src/components/UserSettings/ChangePassword.tsx b/frontend/src/components/UserSettings/ChangePassword.tsx
index 8fc9613ac6..5b28b0984d 100644
--- a/frontend/src/components/UserSettings/ChangePassword.tsx
+++ b/frontend/src/components/UserSettings/ChangePassword.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import {
   Box,
   Button,
@@ -9,19 +8,20 @@ import {
   Heading,
   Input,
   useColorModeValue,
-} from '@chakra-ui/react'
-import { SubmitHandler, useForm } from 'react-hook-form'
-import { useMutation } from 'react-query'
+} from "@chakra-ui/react"
+import type React from "react"
+import { type SubmitHandler, useForm } from "react-hook-form"
+import { useMutation } from "react-query"
 
-import { ApiError, UpdatePassword, UsersService } from '../../client'
-import useCustomToast from '../../hooks/useCustomToast'
+import { type ApiError, type UpdatePassword, UsersService } from "../../client"
+import useCustomToast from "../../hooks/useCustomToast"
 
 interface UpdatePasswordForm extends UpdatePassword {
   confirm_password: string
 }
 
 const ChangePassword: React.FC = () => {
-  const color = useColorModeValue('inherit', 'ui.white')
+  const color = useColorModeValue("inherit", "ui.white")
   const showToast = useCustomToast()
   const {
     register,
@@ -30,8 +30,8 @@ const ChangePassword: React.FC = () => {
     getValues,
     formState: { errors, isSubmitting },
   } = useForm<UpdatePasswordForm>({
-    mode: 'onBlur',
-    criteriaMode: 'all',
+    mode: "onBlur",
+    criteriaMode: "all",
   })
 
   const UpdatePassword = async (data: UpdatePassword) => {
@@ -40,12 +40,12 @@ const ChangePassword: React.FC = () => {
 
   const mutation = useMutation(UpdatePassword, {
     onSuccess: () => {
-      showToast('Success!', 'Password updated.', 'success')
+      showToast("Success!", "Password updated.", "success")
       reset()
     },
     onError: (err: ApiError) => {
       const errDetail = err.body?.detail
-      showToast('Something went wrong.', `${errDetail}`, 'error')
+      showToast("Something went wrong.", `${errDetail}`, "error")
     },
   })
 
@@ -59,14 +59,14 @@ const ChangePassword: React.FC = () => {
         <Heading size="sm" py={4}>
           Change Password
         </Heading>
-        <Box w={{ sm: 'full', md: '50%' }}>
+        <Box w={{ sm: "full", md: "50%" }}>
           <FormControl isRequired isInvalid={!!errors.current_password}>
             <FormLabel color={color} htmlFor="current_password">
               Current password
             </FormLabel>
             <Input
               id="current_password"
-              {...register('current_password')}
+              {...register("current_password")}
               placeholder="Password"
               type="password"
             />
@@ -80,11 +80,11 @@ const ChangePassword: React.FC = () => {
             <FormLabel htmlFor="password">Set Password</FormLabel>
             <Input
               id="password"
-              {...register('new_password', {
-                required: 'Password is required',
+              {...register("new_password", {
+                required: "Password is required",
                 minLength: {
                   value: 8,
-                  message: 'Password must be at least 8 characters',
+                  message: "Password must be at least 8 characters",
                 },
               })}
               placeholder="Password"
@@ -98,11 +98,11 @@ const ChangePassword: React.FC = () => {
             <FormLabel htmlFor="confirm_password">Confirm Password</FormLabel>
             <Input
               id="confirm_password"
-              {...register('confirm_password', {
-                required: 'Please confirm your password',
+              {...register("confirm_password", {
+                required: "Please confirm your password",
                 validate: (value) =>
                   value === getValues().new_password ||
-                  'The passwords do not match',
+                  "The passwords do not match",
               })}
               placeholder="Password"
               type="password"
diff --git a/frontend/src/components/UserSettings/DeleteAccount.tsx b/frontend/src/components/UserSettings/DeleteAccount.tsx
index 257b99dfb5..d048c7e94b 100644
--- a/frontend/src/components/UserSettings/DeleteAccount.tsx
+++ b/frontend/src/components/UserSettings/DeleteAccount.tsx
@@ -1,13 +1,13 @@
-import React from 'react'
 import {
   Button,
   Container,
   Heading,
   Text,
   useDisclosure,
-} from '@chakra-ui/react'
+} from "@chakra-ui/react"
+import type React from "react"
 
-import DeleteConfirmation from './DeleteConfirmation'
+import DeleteConfirmation from "./DeleteConfirmation"
 
 const DeleteAccount: React.FC = () => {
   const confirmationModal = useDisclosure()
diff --git a/frontend/src/components/UserSettings/DeleteConfirmation.tsx b/frontend/src/components/UserSettings/DeleteConfirmation.tsx
index ab401a3e51..1a781113a4 100644
--- a/frontend/src/components/UserSettings/DeleteConfirmation.tsx
+++ b/frontend/src/components/UserSettings/DeleteConfirmation.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import {
   AlertDialog,
   AlertDialogBody,
@@ -7,13 +6,14 @@ import {
   AlertDialogHeader,
   AlertDialogOverlay,
   Button,
-} from '@chakra-ui/react'
-import { useForm } from 'react-hook-form'
-import { useMutation, useQueryClient } from 'react-query'
+} from "@chakra-ui/react"
+import React from "react"
+import { useForm } from "react-hook-form"
+import { useMutation, useQueryClient } from "react-query"
 
-import { ApiError, UserOut, UsersService } from '../../client'
-import useAuth from '../../hooks/useAuth'
-import useCustomToast from '../../hooks/useCustomToast'
+import { type ApiError, type UserOut, UsersService } from "../../client"
+import useAuth from "../../hooks/useAuth"
+import useCustomToast from "../../hooks/useCustomToast"
 
 interface DeleteProps {
   isOpen: boolean
@@ -28,7 +28,7 @@ const DeleteConfirmation: React.FC<DeleteProps> = ({ isOpen, onClose }) => {
     handleSubmit,
     formState: { isSubmitting },
   } = useForm()
-  const currentUser = queryClient.getQueryData<UserOut>('currentUser')
+  const currentUser = queryClient.getQueryData<UserOut>("currentUser")
   const { logout } = useAuth()
 
   const deleteCurrentUser = async (id: number) => {
@@ -38,19 +38,19 @@ const DeleteConfirmation: React.FC<DeleteProps> = ({ isOpen, onClose }) => {
   const mutation = useMutation(deleteCurrentUser, {
     onSuccess: () => {
       showToast(
-        'Success',
-        'Your account has been successfully deleted.',
-        'success',
+        "Success",
+        "Your account has been successfully deleted.",
+        "success",
       )
       logout()
       onClose()
     },
     onError: (err: ApiError) => {
       const errDetail = err.body?.detail
-      showToast('Something went wrong.', `${errDetail}`, 'error')
+      showToast("Something went wrong.", `${errDetail}`, "error")
     },
     onSettled: () => {
-      queryClient.invalidateQueries('currentUser')
+      queryClient.invalidateQueries("currentUser")
     },
   })
 
@@ -64,7 +64,7 @@ const DeleteConfirmation: React.FC<DeleteProps> = ({ isOpen, onClose }) => {
         isOpen={isOpen}
         onClose={onClose}
         leastDestructiveRef={cancelRef}
-        size={{ base: 'sm', md: 'md' }}
+        size={{ base: "sm", md: "md" }}
         isCentered
       >
         <AlertDialogOverlay>
@@ -72,7 +72,7 @@ const DeleteConfirmation: React.FC<DeleteProps> = ({ isOpen, onClose }) => {
             <AlertDialogHeader>Confirmation Required</AlertDialogHeader>
 
             <AlertDialogBody>
-              All your account data will be{' '}
+              All your account data will be{" "}
               <strong>permanently deleted.</strong> If you are sure, please
               click <strong>"Confirm"</strong> to proceed. This action cannot be
               undone.
diff --git a/frontend/src/components/UserSettings/UserInformation.tsx b/frontend/src/components/UserSettings/UserInformation.tsx
index af30ba67d4..6be3b0515d 100644
--- a/frontend/src/components/UserSettings/UserInformation.tsx
+++ b/frontend/src/components/UserSettings/UserInformation.tsx
@@ -1,4 +1,3 @@
-import React, { useState } from 'react'
 import {
   Box,
   Button,
@@ -11,17 +10,24 @@ import {
   Input,
   Text,
   useColorModeValue,
-} from '@chakra-ui/react'
-import { SubmitHandler, useForm } from 'react-hook-form'
-import { useMutation, useQueryClient } from 'react-query'
+} from "@chakra-ui/react"
+import type React from "react"
+import { useState } from "react"
+import { type SubmitHandler, useForm } from "react-hook-form"
+import { useMutation, useQueryClient } from "react-query"
 
-import { ApiError, UserOut, UserUpdateMe, UsersService } from '../../client'
-import useAuth from '../../hooks/useAuth'
-import useCustomToast from '../../hooks/useCustomToast'
+import {
+  type ApiError,
+  type UserOut,
+  type UserUpdateMe,
+  UsersService,
+} from "../../client"
+import useAuth from "../../hooks/useAuth"
+import useCustomToast from "../../hooks/useCustomToast"
 
 const UserInformation: React.FC = () => {
   const queryClient = useQueryClient()
-  const color = useColorModeValue('inherit', 'ui.white')
+  const color = useColorModeValue("inherit", "ui.white")
   const showToast = useCustomToast()
   const [editMode, setEditMode] = useState(false)
   const { user: currentUser } = useAuth()
@@ -32,8 +38,8 @@ const UserInformation: React.FC = () => {
     getValues,
     formState: { isSubmitting, errors, isDirty },
   } = useForm<UserOut>({
-    mode: 'onBlur',
-    criteriaMode: 'all',
+    mode: "onBlur",
+    criteriaMode: "all",
     defaultValues: {
       full_name: currentUser?.full_name,
       email: currentUser?.email,
@@ -50,15 +56,15 @@ const UserInformation: React.FC = () => {
 
   const mutation = useMutation(updateInfo, {
     onSuccess: () => {
-      showToast('Success!', 'User updated successfully.', 'success')
+      showToast("Success!", "User updated successfully.", "success")
     },
     onError: (err: ApiError) => {
       const errDetail = err.body?.detail
-      showToast('Something went wrong.', `${errDetail}`, 'error')
+      showToast("Something went wrong.", `${errDetail}`, "error")
     },
     onSettled: () => {
-      queryClient.invalidateQueries('users')
-      queryClient.invalidateQueries('currentUser')
+      queryClient.invalidateQueries("users")
+      queryClient.invalidateQueries("currentUser")
     },
   })
 
@@ -77,7 +83,7 @@ const UserInformation: React.FC = () => {
         <Heading size="sm" py={4}>
           User Information
         </Heading>
-        <Box w={{ sm: 'full', md: '50%' }}>
+        <Box w={{ sm: "full", md: "50%" }}>
           <FormControl>
             <FormLabel color={color} htmlFor="name">
               Full name
@@ -85,7 +91,7 @@ const UserInformation: React.FC = () => {
             {editMode ? (
               <Input
                 id="name"
-                {...register('full_name', { maxLength: 30 })}
+                {...register("full_name", { maxLength: 30 })}
                 type="text"
                 size="md"
               />
@@ -93,9 +99,9 @@ const UserInformation: React.FC = () => {
               <Text
                 size="md"
                 py={2}
-                color={!currentUser?.full_name ? 'gray.400' : 'inherit'}
+                color={!currentUser?.full_name ? "gray.400" : "inherit"}
               >
-                {currentUser?.full_name || 'N/A'}
+                {currentUser?.full_name || "N/A"}
               </Text>
             )}
           </FormControl>
@@ -106,11 +112,11 @@ const UserInformation: React.FC = () => {
             {editMode ? (
               <Input
                 id="email"
-                {...register('email', {
-                  required: 'Email is required',
+                {...register("email", {
+                  required: "Email is required",
                   pattern: {
                     value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
-                    message: 'Invalid email address',
+                    message: "Invalid email address",
                   },
                 })}
                 type="email"
@@ -129,11 +135,11 @@ const UserInformation: React.FC = () => {
             <Button
               variant="primary"
               onClick={toggleEditMode}
-              type={editMode ? 'button' : 'submit'}
+              type={editMode ? "button" : "submit"}
               isLoading={editMode ? isSubmitting : false}
-              isDisabled={editMode ? !isDirty || !getValues('email') : false}
+              isDisabled={editMode ? !isDirty || !getValues("email") : false}
             >
-              {editMode ? 'Save' : 'Edit'}
+              {editMode ? "Save" : "Edit"}
             </Button>
             {editMode && (
               <Button onClick={onCancel} isDisabled={isSubmitting}>
diff --git a/frontend/src/hooks/useAuth.ts b/frontend/src/hooks/useAuth.ts
index a2b344499e..309a0abb5e 100644
--- a/frontend/src/hooks/useAuth.ts
+++ b/frontend/src/hooks/useAuth.ts
@@ -1,21 +1,21 @@
-import { useQuery } from 'react-query'
-import { useNavigate } from '@tanstack/react-router'
+import { useNavigate } from "@tanstack/react-router"
+import { useQuery } from "react-query"
 
 import {
-  Body_login_login_access_token as AccessToken,
+  type Body_login_login_access_token as AccessToken,
   LoginService,
-  UserOut,
+  type UserOut,
   UsersService,
-} from '../client'
+} from "../client"
 
 const isLoggedIn = () => {
-  return localStorage.getItem('access_token') !== null
+  return localStorage.getItem("access_token") !== null
 }
 
 const useAuth = () => {
   const navigate = useNavigate()
   const { data: user, isLoading } = useQuery<UserOut | null, Error>(
-    'currentUser',
+    "currentUser",
     UsersService.readUserMe,
     {
       enabled: isLoggedIn(),
@@ -26,13 +26,13 @@ const useAuth = () => {
     const response = await LoginService.loginAccessToken({
       formData: data,
     })
-    localStorage.setItem('access_token', response.access_token)
-    navigate({ to: '/' })
+    localStorage.setItem("access_token", response.access_token)
+    navigate({ to: "/" })
   }
 
   const logout = () => {
-    localStorage.removeItem('access_token')
-    navigate({ to: '/login' })
+    localStorage.removeItem("access_token")
+    navigate({ to: "/login" })
   }
 
   return { login, logout, user, isLoading }
diff --git a/frontend/src/hooks/useCustomToast.ts b/frontend/src/hooks/useCustomToast.ts
index d9f7f61ff4..06bc8a6ab8 100644
--- a/frontend/src/hooks/useCustomToast.ts
+++ b/frontend/src/hooks/useCustomToast.ts
@@ -1,17 +1,17 @@
-import { useCallback } from 'react'
-import { useToast } from '@chakra-ui/react'
+import { useToast } from "@chakra-ui/react"
+import { useCallback } from "react"
 
 const useCustomToast = () => {
   const toast = useToast()
 
   const showToast = useCallback(
-    (title: string, description: string, status: 'success' | 'error') => {
+    (title: string, description: string, status: "success" | "error") => {
       toast({
         title,
         description,
         status,
         isClosable: true,
-        position: 'bottom-right',
+        position: "bottom-right",
       })
     },
     [toast],
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 4c80602c8f..ff4ff148ca 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -1,28 +1,28 @@
-import ReactDOM from 'react-dom/client'
-import { ChakraProvider } from '@chakra-ui/react'
-import { QueryClient, QueryClientProvider } from 'react-query'
-import { RouterProvider, createRouter } from '@tanstack/react-router'
-import { routeTree } from './routeTree.gen'
+import { ChakraProvider } from "@chakra-ui/react"
+import { RouterProvider, createRouter } from "@tanstack/react-router"
+import ReactDOM from "react-dom/client"
+import { QueryClient, QueryClientProvider } from "react-query"
+import { routeTree } from "./routeTree.gen"
 
-import { OpenAPI } from './client'
-import theme from './theme'
-import { StrictMode } from 'react'
+import { StrictMode } from "react"
+import { OpenAPI } from "./client"
+import theme from "./theme"
 
 OpenAPI.BASE = import.meta.env.VITE_API_URL
 OpenAPI.TOKEN = async () => {
-  return localStorage.getItem('access_token') || ''
+  return localStorage.getItem("access_token") || ""
 }
 
 const queryClient = new QueryClient()
 
 const router = createRouter({ routeTree })
-declare module '@tanstack/react-router' {
+declare module "@tanstack/react-router" {
   interface Register {
     router: typeof router
   }
 }
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
+ReactDOM.createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <ChakraProvider theme={theme}>
       <QueryClientProvider client={queryClient}>
diff --git a/frontend/src/routes/__root.tsx b/frontend/src/routes/__root.tsx
index a9c87d39de..d0e250f4e2 100644
--- a/frontend/src/routes/__root.tsx
+++ b/frontend/src/routes/__root.tsx
@@ -1,13 +1,13 @@
-import React, { Suspense } from 'react'
-import { createRootRoute, Outlet } from '@tanstack/react-router'
+import { Outlet, createRootRoute } from "@tanstack/react-router"
+import React, { Suspense } from "react"
 
-import NotFound from '../components/Common/NotFound'
+import NotFound from "../components/Common/NotFound"
 
 const TanStackRouterDevtools =
-  process.env.NODE_ENV === 'production'
+  process.env.NODE_ENV === "production"
     ? () => null
     : React.lazy(() =>
-        import('@tanstack/router-devtools').then((res) => ({
+        import("@tanstack/router-devtools").then((res) => ({
           default: res.TanStackRouterDevtools,
         })),
       )
diff --git a/frontend/src/routes/_layout.tsx b/frontend/src/routes/_layout.tsx
index b6f85a1144..816822ebb1 100644
--- a/frontend/src/routes/_layout.tsx
+++ b/frontend/src/routes/_layout.tsx
@@ -1,16 +1,16 @@
-import { Flex, Spinner } from '@chakra-ui/react'
-import { Outlet, createFileRoute, redirect } from '@tanstack/react-router'
+import { Flex, Spinner } from "@chakra-ui/react"
+import { Outlet, createFileRoute, redirect } from "@tanstack/react-router"
 
-import Sidebar from '../components/Common/Sidebar'
-import UserMenu from '../components/Common/UserMenu'
-import useAuth, { isLoggedIn } from '../hooks/useAuth'
+import Sidebar from "../components/Common/Sidebar"
+import UserMenu from "../components/Common/UserMenu"
+import useAuth, { isLoggedIn } from "../hooks/useAuth"
 
-export const Route = createFileRoute('/_layout')({
+export const Route = createFileRoute("/_layout")({
   component: Layout,
   beforeLoad: async () => {
     if (!isLoggedIn()) {
       throw redirect({
-        to: '/login',
+        to: "/login",
       })
     }
   },
diff --git a/frontend/src/routes/_layout/admin.tsx b/frontend/src/routes/_layout/admin.tsx
index 4ed1a79f63..2841bd65ab 100644
--- a/frontend/src/routes/_layout/admin.tsx
+++ b/frontend/src/routes/_layout/admin.tsx
@@ -12,33 +12,33 @@ import {
   Th,
   Thead,
   Tr,
-} from '@chakra-ui/react'
-import { createFileRoute } from '@tanstack/react-router'
-import { useQuery, useQueryClient } from 'react-query'
+} from "@chakra-ui/react"
+import { createFileRoute } from "@tanstack/react-router"
+import { useQuery, useQueryClient } from "react-query"
 
-import { ApiError, UserOut, UsersService } from '../../client'
-import ActionsMenu from '../../components/Common/ActionsMenu'
-import Navbar from '../../components/Common/Navbar'
-import useCustomToast from '../../hooks/useCustomToast'
+import { type ApiError, type UserOut, UsersService } from "../../client"
+import ActionsMenu from "../../components/Common/ActionsMenu"
+import Navbar from "../../components/Common/Navbar"
+import useCustomToast from "../../hooks/useCustomToast"
 
-export const Route = createFileRoute('/_layout/admin')({
+export const Route = createFileRoute("/_layout/admin")({
   component: Admin,
 })
 
 function Admin() {
   const queryClient = useQueryClient()
   const showToast = useCustomToast()
-  const currentUser = queryClient.getQueryData<UserOut>('currentUser')
+  const currentUser = queryClient.getQueryData<UserOut>("currentUser")
   const {
     data: users,
     isLoading,
     isError,
     error,
-  } = useQuery('users', () => UsersService.readUsers({}))
+  } = useQuery("users", () => UsersService.readUsers({}))
 
   if (isError) {
     const errDetail = (error as ApiError).body?.detail
-    showToast('Something went wrong.', `${errDetail}`, 'error')
+    showToast("Something went wrong.", `${errDetail}`, "error")
   }
 
   return (
@@ -53,14 +53,14 @@ function Admin() {
           <Container maxW="full">
             <Heading
               size="lg"
-              textAlign={{ base: 'center', md: 'left' }}
+              textAlign={{ base: "center", md: "left" }}
               pt={12}
             >
               User Management
             </Heading>
-            <Navbar type={'User'} />
+            <Navbar type={"User"} />
             <TableContainer>
-              <Table fontSize="md" size={{ base: 'sm', md: 'md' }}>
+              <Table fontSize="md" size={{ base: "sm", md: "md" }}>
                 <Thead>
                   <Tr>
                     <Th>Full name</Th>
@@ -73,8 +73,8 @@ function Admin() {
                 <Tbody>
                   {users.data.map((user) => (
                     <Tr key={user.id}>
-                      <Td color={!user.full_name ? 'gray.400' : 'inherit'}>
-                        {user.full_name || 'N/A'}
+                      <Td color={!user.full_name ? "gray.400" : "inherit"}>
+                        {user.full_name || "N/A"}
                         {currentUser?.id === user.id && (
                           <Badge ml="1" colorScheme="teal">
                             You
@@ -82,17 +82,17 @@ function Admin() {
                         )}
                       </Td>
                       <Td>{user.email}</Td>
-                      <Td>{user.is_superuser ? 'Superuser' : 'User'}</Td>
+                      <Td>{user.is_superuser ? "Superuser" : "User"}</Td>
                       <Td>
                         <Flex gap={2}>
                           <Box
                             w="2"
                             h="2"
                             borderRadius="50%"
-                            bg={user.is_active ? 'ui.success' : 'ui.danger'}
+                            bg={user.is_active ? "ui.success" : "ui.danger"}
                             alignSelf="center"
                           />
-                          {user.is_active ? 'Active' : 'Inactive'}
+                          {user.is_active ? "Active" : "Inactive"}
                         </Flex>
                       </Td>
                       <Td>
diff --git a/frontend/src/routes/_layout/index.tsx b/frontend/src/routes/_layout/index.tsx
index 0de60cb94e..56644f0d2d 100644
--- a/frontend/src/routes/_layout/index.tsx
+++ b/frontend/src/routes/_layout/index.tsx
@@ -1,17 +1,17 @@
-import { Box, Container, Text } from '@chakra-ui/react'
-import { useQueryClient } from 'react-query'
-import { createFileRoute } from '@tanstack/react-router'
+import { Box, Container, Text } from "@chakra-ui/react"
+import { createFileRoute } from "@tanstack/react-router"
+import { useQueryClient } from "react-query"
 
-import { UserOut } from '../../client'
+import type { UserOut } from "../../client"
 
-export const Route = createFileRoute('/_layout/')({
+export const Route = createFileRoute("/_layout/")({
   component: Dashboard,
 })
 
 function Dashboard() {
   const queryClient = useQueryClient()
 
-  const currentUser = queryClient.getQueryData<UserOut>('currentUser')
+  const currentUser = queryClient.getQueryData<UserOut>("currentUser")
 
   return (
     <>
diff --git a/frontend/src/routes/_layout/items.tsx b/frontend/src/routes/_layout/items.tsx
index 95a5e35d8f..33263215ba 100644
--- a/frontend/src/routes/_layout/items.tsx
+++ b/frontend/src/routes/_layout/items.tsx
@@ -10,16 +10,16 @@ import {
   Th,
   Thead,
   Tr,
-} from '@chakra-ui/react'
-import { createFileRoute } from '@tanstack/react-router'
-import { useQuery } from 'react-query'
+} from "@chakra-ui/react"
+import { createFileRoute } from "@tanstack/react-router"
+import { useQuery } from "react-query"
 
-import { ApiError, ItemsService } from '../../client'
-import ActionsMenu from '../../components/Common/ActionsMenu'
-import Navbar from '../../components/Common/Navbar'
-import useCustomToast from '../../hooks/useCustomToast'
+import { type ApiError, ItemsService } from "../../client"
+import ActionsMenu from "../../components/Common/ActionsMenu"
+import Navbar from "../../components/Common/Navbar"
+import useCustomToast from "../../hooks/useCustomToast"
 
-export const Route = createFileRoute('/_layout/items')({
+export const Route = createFileRoute("/_layout/items")({
   component: Items,
 })
 
@@ -30,11 +30,11 @@ function Items() {
     isLoading,
     isError,
     error,
-  } = useQuery('items', () => ItemsService.readItems({}))
+  } = useQuery("items", () => ItemsService.readItems({}))
 
   if (isError) {
     const errDetail = (error as ApiError).body?.detail
-    showToast('Something went wrong.', `${errDetail}`, 'error')
+    showToast("Something went wrong.", `${errDetail}`, "error")
   }
 
   return (
@@ -49,14 +49,14 @@ function Items() {
           <Container maxW="full">
             <Heading
               size="lg"
-              textAlign={{ base: 'center', md: 'left' }}
+              textAlign={{ base: "center", md: "left" }}
               pt={12}
             >
               Items Management
             </Heading>
-            <Navbar type={'Item'} />
+            <Navbar type={"Item"} />
             <TableContainer>
-              <Table size={{ base: 'sm', md: 'md' }}>
+              <Table size={{ base: "sm", md: "md" }}>
                 <Thead>
                   <Tr>
                     <Th>ID</Th>
@@ -70,11 +70,11 @@ function Items() {
                     <Tr key={item.id}>
                       <Td>{item.id}</Td>
                       <Td>{item.title}</Td>
-                      <Td color={!item.description ? 'gray.400' : 'inherit'}>
-                        {item.description || 'N/A'}
+                      <Td color={!item.description ? "gray.400" : "inherit"}>
+                        {item.description || "N/A"}
                       </Td>
                       <Td>
-                        <ActionsMenu type={'Item'} value={item} />
+                        <ActionsMenu type={"Item"} value={item} />
                       </Td>
                     </Tr>
                   ))}
diff --git a/frontend/src/routes/_layout/settings.tsx b/frontend/src/routes/_layout/settings.tsx
index fc392a9ac4..67eee8f41a 100644
--- a/frontend/src/routes/_layout/settings.tsx
+++ b/frontend/src/routes/_layout/settings.tsx
@@ -6,37 +6,37 @@ import {
   TabPanel,
   TabPanels,
   Tabs,
-} from '@chakra-ui/react'
-import { createFileRoute } from '@tanstack/react-router'
-import { useQueryClient } from 'react-query'
+} from "@chakra-ui/react"
+import { createFileRoute } from "@tanstack/react-router"
+import { useQueryClient } from "react-query"
 
-import { UserOut } from '../../client'
-import Appearance from '../../components/UserSettings/Appearance'
-import ChangePassword from '../../components/UserSettings/ChangePassword'
-import DeleteAccount from '../../components/UserSettings/DeleteAccount'
-import UserInformation from '../../components/UserSettings/UserInformation'
+import type { UserOut } from "../../client"
+import Appearance from "../../components/UserSettings/Appearance"
+import ChangePassword from "../../components/UserSettings/ChangePassword"
+import DeleteAccount from "../../components/UserSettings/DeleteAccount"
+import UserInformation from "../../components/UserSettings/UserInformation"
 
 const tabsConfig = [
-  { title: 'My profile', component: UserInformation },
-  { title: 'Password', component: ChangePassword },
-  { title: 'Appearance', component: Appearance },
-  { title: 'Danger zone', component: DeleteAccount },
+  { title: "My profile", component: UserInformation },
+  { title: "Password", component: ChangePassword },
+  { title: "Appearance", component: Appearance },
+  { title: "Danger zone", component: DeleteAccount },
 ]
 
-export const Route = createFileRoute('/_layout/settings')({
+export const Route = createFileRoute("/_layout/settings")({
   component: UserSettings,
 })
 
 function UserSettings() {
   const queryClient = useQueryClient()
-  const currentUser = queryClient.getQueryData<UserOut>('currentUser')
+  const currentUser = queryClient.getQueryData<UserOut>("currentUser")
   const finalTabs = currentUser?.is_superuser
     ? tabsConfig.slice(0, 3)
     : tabsConfig
 
   return (
     <Container maxW="full">
-      <Heading size="lg" textAlign={{ base: 'center', md: 'left' }} py={12}>
+      <Heading size="lg" textAlign={{ base: "center", md: "left" }} py={12}>
         User Settings
       </Heading>
       <Tabs variant="enclosed">
diff --git a/frontend/src/routes/login.tsx b/frontend/src/routes/login.tsx
index 59e7ca54da..ca8d295c2b 100644
--- a/frontend/src/routes/login.tsx
+++ b/frontend/src/routes/login.tsx
@@ -1,5 +1,4 @@
-import React from 'react'
-import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons'
+import { ViewIcon, ViewOffIcon } from "@chakra-ui/icons"
 import {
   Button,
   Center,
@@ -13,25 +12,26 @@ import {
   InputRightElement,
   Link,
   useBoolean,
-} from '@chakra-ui/react'
+} from "@chakra-ui/react"
 import {
   Link as RouterLink,
   createFileRoute,
   redirect,
-} from '@tanstack/react-router'
-import { SubmitHandler, useForm } from 'react-hook-form'
+} from "@tanstack/react-router"
+import React from "react"
+import { type SubmitHandler, useForm } from "react-hook-form"
 
-import Logo from '../assets/images/fastapi-logo.svg'
-import { ApiError } from '../client'
-import { Body_login_login_access_token as AccessToken } from '../client/models/Body_login_login_access_token'
-import useAuth, { isLoggedIn } from '../hooks/useAuth'
+import Logo from "../assets/images/fastapi-logo.svg"
+import type { ApiError } from "../client"
+import type { Body_login_login_access_token as AccessToken } from "../client/models/Body_login_login_access_token"
+import useAuth, { isLoggedIn } from "../hooks/useAuth"
 
-export const Route = createFileRoute('/login')({
+export const Route = createFileRoute("/login")({
   component: Login,
   beforeLoad: async () => {
     if (isLoggedIn()) {
       throw redirect({
-        to: '/',
+        to: "/",
       })
     }
   },
@@ -46,11 +46,11 @@ function Login() {
     handleSubmit,
     formState: { errors, isSubmitting },
   } = useForm<AccessToken>({
-    mode: 'onBlur',
-    criteriaMode: 'all',
+    mode: "onBlur",
+    criteriaMode: "all",
     defaultValues: {
-      username: '',
-      password: '',
+      username: "",
+      password: "",
     },
   })
 
@@ -86,10 +86,10 @@ function Login() {
         <FormControl id="username" isInvalid={!!errors.username || !!error}>
           <Input
             id="username"
-            {...register('username', {
+            {...register("username", {
               pattern: {
                 value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
-                message: 'Invalid email address',
+                message: "Invalid email address",
               },
             })}
             placeholder="Email"
@@ -102,19 +102,19 @@ function Login() {
         <FormControl id="password" isInvalid={!!error}>
           <InputGroup>
             <Input
-              {...register('password')}
-              type={show ? 'text' : 'password'}
+              {...register("password")}
+              type={show ? "text" : "password"}
               placeholder="Password"
             />
             <InputRightElement
               color="gray.400"
               _hover={{
-                cursor: 'pointer',
+                cursor: "pointer",
               }}
             >
               <Icon
                 onClick={setShow.toggle}
-                aria-label={show ? 'Hide password' : 'Show password'}
+                aria-label={show ? "Hide password" : "Show password"}
               >
                 {show ? <ViewOffIcon /> : <ViewIcon />}
               </Icon>
diff --git a/frontend/src/routes/recover-password.tsx b/frontend/src/routes/recover-password.tsx
index 661c180eed..71456b6578 100644
--- a/frontend/src/routes/recover-password.tsx
+++ b/frontend/src/routes/recover-password.tsx
@@ -6,24 +6,24 @@ import {
   Heading,
   Input,
   Text,
-} from '@chakra-ui/react'
-import { createFileRoute, redirect } from '@tanstack/react-router'
-import { SubmitHandler, useForm } from 'react-hook-form'
+} from "@chakra-ui/react"
+import { createFileRoute, redirect } from "@tanstack/react-router"
+import { type SubmitHandler, useForm } from "react-hook-form"
 
-import { LoginService } from '../client'
-import useCustomToast from '../hooks/useCustomToast'
-import { isLoggedIn } from '../hooks/useAuth'
+import { LoginService } from "../client"
+import { isLoggedIn } from "../hooks/useAuth"
+import useCustomToast from "../hooks/useCustomToast"
 
 interface FormData {
   email: string
 }
 
-export const Route = createFileRoute('/recover-password')({
+export const Route = createFileRoute("/recover-password")({
   component: RecoverPassword,
   beforeLoad: async () => {
     if (isLoggedIn()) {
       throw redirect({
-        to: '/',
+        to: "/",
       })
     }
   },
@@ -42,9 +42,9 @@ function RecoverPassword() {
       email: data.email,
     })
     showToast(
-      'Email sent.',
-      'We sent an email with a link to get back into your account.',
-      'success',
+      "Email sent.",
+      "We sent an email with a link to get back into your account.",
+      "success",
     )
   }
 
@@ -68,11 +68,11 @@ function RecoverPassword() {
       <FormControl isInvalid={!!errors.email}>
         <Input
           id="email"
-          {...register('email', {
-            required: 'Email is required',
+          {...register("email", {
+            required: "Email is required",
             pattern: {
               value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
-              message: 'Invalid email address',
+              message: "Invalid email address",
             },
           })}
           placeholder="Email"
diff --git a/frontend/src/routes/reset-password.tsx b/frontend/src/routes/reset-password.tsx
index 9e6e51dcae..eda21116cc 100644
--- a/frontend/src/routes/reset-password.tsx
+++ b/frontend/src/routes/reset-password.tsx
@@ -7,25 +7,25 @@ import {
   Heading,
   Input,
   Text,
-} from '@chakra-ui/react'
-import { createFileRoute, redirect, useNavigate } from '@tanstack/react-router'
-import { SubmitHandler, useForm } from 'react-hook-form'
-import { useMutation } from 'react-query'
+} from "@chakra-ui/react"
+import { createFileRoute, redirect, useNavigate } from "@tanstack/react-router"
+import { type SubmitHandler, useForm } from "react-hook-form"
+import { useMutation } from "react-query"
 
-import { ApiError, LoginService, NewPassword } from '../client'
-import { isLoggedIn } from '../hooks/useAuth'
-import useCustomToast from '../hooks/useCustomToast'
+import { type ApiError, LoginService, type NewPassword } from "../client"
+import { isLoggedIn } from "../hooks/useAuth"
+import useCustomToast from "../hooks/useCustomToast"
 
 interface NewPasswordForm extends NewPassword {
   confirm_password: string
 }
 
-export const Route = createFileRoute('/reset-password')({
+export const Route = createFileRoute("/reset-password")({
   component: ResetPassword,
   beforeLoad: async () => {
     if (isLoggedIn()) {
       throw redirect({
-        to: '/',
+        to: "/",
       })
     }
   },
@@ -39,17 +39,17 @@ function ResetPassword() {
     reset,
     formState: { errors },
   } = useForm<NewPasswordForm>({
-    mode: 'onBlur',
-    criteriaMode: 'all',
+    mode: "onBlur",
+    criteriaMode: "all",
     defaultValues: {
-      new_password: '',
+      new_password: "",
     },
   })
   const showToast = useCustomToast()
   const navigate = useNavigate()
 
   const resetPassword = async (data: NewPassword) => {
-    const token = new URLSearchParams(window.location.search).get('token')
+    const token = new URLSearchParams(window.location.search).get("token")
     if (!token) return
     await LoginService.resetPassword({
       requestBody: { new_password: data.new_password, token: token },
@@ -58,13 +58,13 @@ function ResetPassword() {
 
   const mutation = useMutation(resetPassword, {
     onSuccess: () => {
-      showToast('Success!', 'Password updated.', 'success')
+      showToast("Success!", "Password updated.", "success")
       reset()
-      navigate({ to: '/login' })
+      navigate({ to: "/login" })
     },
     onError: (err: ApiError) => {
       const errDetail = err.body?.detail
-      showToast('Something went wrong.', `${errDetail}`, 'error')
+      showToast("Something went wrong.", `${errDetail}`, "error")
     },
   })
 
@@ -93,11 +93,11 @@ function ResetPassword() {
         <FormLabel htmlFor="password">Set Password</FormLabel>
         <Input
           id="password"
-          {...register('new_password', {
-            required: 'Password is required',
+          {...register("new_password", {
+            required: "Password is required",
             minLength: {
               value: 8,
-              message: 'Password must be at least 8 characters',
+              message: "Password must be at least 8 characters",
             },
           })}
           placeholder="Password"
@@ -111,11 +111,11 @@ function ResetPassword() {
         <FormLabel htmlFor="confirm_password">Confirm Password</FormLabel>
         <Input
           id="confirm_password"
-          {...register('confirm_password', {
-            required: 'Please confirm your password',
+          {...register("confirm_password", {
+            required: "Please confirm your password",
             validate: (value) =>
               value === getValues().new_password ||
-              'The passwords do not match',
+              "The passwords do not match",
           })}
           placeholder="Password"
           type="password"
diff --git a/frontend/src/theme.tsx b/frontend/src/theme.tsx
index 293ebb0515..8132e3c96b 100644
--- a/frontend/src/theme.tsx
+++ b/frontend/src/theme.tsx
@@ -1,31 +1,31 @@
-import { extendTheme } from '@chakra-ui/react'
+import { extendTheme } from "@chakra-ui/react"
 
 const disabledStyles = {
   _disabled: {
-    backgroundColor: 'ui.main',
+    backgroundColor: "ui.main",
   },
 }
 
 const theme = extendTheme({
   colors: {
     ui: {
-      main: '#009688',
-      secondary: '#EDF2F7',
-      success: '#48BB78',
-      danger: '#E53E3E',
-      white: '#FFFFFF',
-      dark: '#1A202C',
-      darkSlate: '#252D3D',
+      main: "#009688",
+      secondary: "#EDF2F7",
+      success: "#48BB78",
+      danger: "#E53E3E",
+      white: "#FFFFFF",
+      dark: "#1A202C",
+      darkSlate: "#252D3D",
     },
   },
   components: {
     Button: {
       variants: {
         primary: {
-          backgroundColor: 'ui.main',
-          color: 'ui.white',
+          backgroundColor: "ui.main",
+          color: "ui.white",
           _hover: {
-            backgroundColor: '#00766C',
+            backgroundColor: "#00766C",
           },
           _disabled: {
             ...disabledStyles,
@@ -35,10 +35,10 @@ const theme = extendTheme({
           },
         },
         danger: {
-          backgroundColor: 'ui.danger',
-          color: 'ui.white',
+          backgroundColor: "ui.danger",
+          color: "ui.white",
           _hover: {
-            backgroundColor: '#E32727',
+            backgroundColor: "#E32727",
           },
         },
       },
@@ -48,7 +48,7 @@ const theme = extendTheme({
         enclosed: {
           tab: {
             _selected: {
-              color: 'ui.main',
+              color: "ui.main",
             },
           },
         },
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index c2fbe94324..572745b8cf 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -1,6 +1,6 @@
-import react from '@vitejs/plugin-react-swc'
-import { TanStackRouterVite } from '@tanstack/router-vite-plugin'
-import { defineConfig } from 'vite'
+import { TanStackRouterVite } from "@tanstack/router-vite-plugin"
+import react from "@vitejs/plugin-react-swc"
+import { defineConfig } from "vite"
 
 // https://vitejs.dev/config/
 export default defineConfig({