diff --git a/src/App.jsx b/src/App.jsx
index bdfe690..c7cd3db 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -2,11 +2,9 @@ import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 
 import { Home, Layout, List, ManageList } from './views';
 
-import { useAuth } from './api';
+import { useAuth, useShoppingListData, useShoppingLists } from '@api';
 
-import { useShoppingListData, useShoppingLists } from './api';
-
-import { useStateWithStorage } from './utils';
+import { useStateWithStorage } from '@utils';
 
 export function App() {
 	/**
diff --git a/src/api/firebase.js b/src/api/firebase.js
index 916a7db..ce3bff5 100644
--- a/src/api/firebase.js
+++ b/src/api/firebase.js
@@ -14,7 +14,7 @@ import {
 } from 'firebase/firestore';
 import { useEffect, useState } from 'react';
 import { db } from './config';
-import { getDaysBetweenDates, getFutureDate } from '../utils';
+import { getDaysBetweenDates, getFutureDate } from '@utils';
 import { calculateEstimate } from '@the-collab-lab/shopping-list-utils';
 
 /**
diff --git a/src/api/index.js b/src/api/index.js
index cfb8131..db155c4 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -1,2 +1,2 @@
 export * from './firebase';
-export { useAuth } from './useAuth';
+export * from './useAuth';
diff --git a/src/components/NavBar/NavBar.jsx b/src/components/NavBar/NavBar.jsx
index 120967d..614d344 100644
--- a/src/components/NavBar/NavBar.jsx
+++ b/src/components/NavBar/NavBar.jsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
-import NavBarContent from './NavBarContent';
+import { NavBarContent } from '@components';
 
-export function NavBar({ user, lists, listPath }) {
+const NavBar = ({ user, lists, listPath }) => {
 	const [isNavOpen, setIsNavOpen] = useState(false);
 
 	return (
@@ -78,4 +78,6 @@ export function NavBar({ user, lists, listPath }) {
 			</nav>
 		</>
 	);
-}
+};
+
+export default NavBar;
diff --git a/src/components/NavBar/NavBarContent.jsx b/src/components/NavBar/NavBarContent.jsx
index 6021077..473cfd7 100644
--- a/src/components/NavBar/NavBarContent.jsx
+++ b/src/components/NavBar/NavBarContent.jsx
@@ -1,10 +1,9 @@
 import { useTranslation } from 'react-i18next';
-import { SignOut } from '../../api/useAuth.jsx';
-import { NavigationLink } from './NavigationLink.jsx';
+import { SignOut } from '@api';
 import { useNavigate } from 'react-router-dom';
-import { ButtonWithIcon } from '../ButtonWithIcon.jsx';
+import { ButtonWithIcon, NavigationLink } from '@components';
 
-export default function NavLinks({ listPath, lists, setIsNavOpen }) {
+const NavBarContent = ({ listPath, lists, setIsNavOpen }) => {
 	const navigate = useNavigate();
 	const { t } = useTranslation();
 
@@ -60,4 +59,6 @@ export default function NavLinks({ listPath, lists, setIsNavOpen }) {
 			/>
 		</>
 	);
-}
+};
+
+export default NavBarContent;
diff --git a/src/components/NavBar/NavigationLink.jsx b/src/components/NavBar/NavigationLink.jsx
index 9f836c6..df5775a 100644
--- a/src/components/NavBar/NavigationLink.jsx
+++ b/src/components/NavBar/NavigationLink.jsx
@@ -1,6 +1,6 @@
 import { NavLink } from 'react-router-dom';
 
-export function NavigationLink({ text, destination, handleClick, icon }) {
+const NavigationLink = ({ text, destination, handleClick, icon }) => {
 	return (
 		<NavLink
 			onClick={handleClick}
@@ -16,4 +16,6 @@ export function NavigationLink({ text, destination, handleClick, icon }) {
 			{text}
 		</NavLink>
 	);
-}
+};
+
+export default NavigationLink;
diff --git a/src/components/NavBar/index.js b/src/components/NavBar/index.js
deleted file mode 100644
index 46466d5..0000000
--- a/src/components/NavBar/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './NavBar';
-export * from './NavigationLink';
-// export * from './ButtonWithIcon';
-export * from './NavLinks';
diff --git a/src/components/ButtonWithIcon.jsx b/src/components/custom-components/ButtonWithIcon.jsx
similarity index 65%
rename from src/components/ButtonWithIcon.jsx
rename to src/components/custom-components/ButtonWithIcon.jsx
index 50d78e7..0e294c7 100644
--- a/src/components/ButtonWithIcon.jsx
+++ b/src/components/custom-components/ButtonWithIcon.jsx
@@ -1,4 +1,4 @@
-export function ButtonWithIcon({ text, handleClick, icon }) {
+const ButtonWithIcon = ({ text, handleClick, icon }) => {
 	return (
 		<button
 			onClick={handleClick}
@@ -8,4 +8,6 @@ export function ButtonWithIcon({ text, handleClick, icon }) {
 			{text}
 		</button>
 	);
-}
+};
+
+export default ButtonWithIcon;
diff --git a/src/components/Confirm.jsx b/src/components/custom-components/Confirm.jsx
similarity index 97%
rename from src/components/Confirm.jsx
rename to src/components/custom-components/Confirm.jsx
index ea2189f..1269a31 100644
--- a/src/components/Confirm.jsx
+++ b/src/components/custom-components/Confirm.jsx
@@ -1,7 +1,6 @@
 import { useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-
-import Loading from './Loading';
+import { Loading } from '@components';
 
 const Confirm = ({ open, onClose, onConfirm, children, title, loading }) => {
 	const { t } = useTranslation();
diff --git a/src/components/ErrorMessage.jsx b/src/components/custom-components/ErrorMessage.jsx
similarity index 100%
rename from src/components/ErrorMessage.jsx
rename to src/components/custom-components/ErrorMessage.jsx
diff --git a/src/components/ListButtons.jsx b/src/components/custom-components/ListButtons.jsx
similarity index 100%
rename from src/components/ListButtons.jsx
rename to src/components/custom-components/ListButtons.jsx
diff --git a/src/components/Message.jsx b/src/components/custom-components/Message.jsx
similarity index 100%
rename from src/components/Message.jsx
rename to src/components/custom-components/Message.jsx
diff --git a/src/components/DeleteList.jsx b/src/components/home-components/DeleteList.jsx
similarity index 96%
rename from src/components/DeleteList.jsx
rename to src/components/home-components/DeleteList.jsx
index b67d107..683672b 100644
--- a/src/components/DeleteList.jsx
+++ b/src/components/home-components/DeleteList.jsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { useTranslation, Trans } from 'react-i18next';
-import { deleteList } from '../api/firebase';
-import Confirm from './Confirm';
+import { deleteList } from '@api';
+import { Confirm } from '@components';
 
 const DeleteList = ({ user, email, listPath, listName, setListPath }) => {
 	const { t } = useTranslation();
diff --git a/src/components/ListForm.jsx b/src/components/home-components/ListForm.jsx
similarity index 93%
rename from src/components/ListForm.jsx
rename to src/components/home-components/ListForm.jsx
index 19221c0..80e8050 100644
--- a/src/components/ListForm.jsx
+++ b/src/components/home-components/ListForm.jsx
@@ -1,9 +1,8 @@
 import { useState } from 'react';
-import { createList } from '../api';
+import { createList } from '@api';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { inputHasValue } from '../utils/inputValidation';
-import { stringsHaveSameValue } from '../utils/inputValidation';
+import { stringsHaveSameValue, inputHasValue } from '@utils';
 
 const ListForm = (props) => {
 	const { setMessage, setListPath, userId, userEmail, data } = props;
diff --git a/src/components/SingleList.jsx b/src/components/home-components/SingleList.jsx
similarity index 80%
rename from src/components/SingleList.jsx
rename to src/components/home-components/SingleList.jsx
index d459689..aee4cd2 100644
--- a/src/components/SingleList.jsx
+++ b/src/components/home-components/SingleList.jsx
@@ -1,7 +1,7 @@
 import { useNavigate } from 'react-router-dom';
-import DeleteList from './DeleteList';
+import { DeleteList } from '@components';
 
-export function SingleList({ userEmail, name, path, setListPath, userId }) {
+const SingleList = ({ userEmail, name, path, setListPath, userId }) => {
 	const navigate = useNavigate();
 	function handleClick() {
 		setListPath(path);
@@ -25,4 +25,6 @@ export function SingleList({ userEmail, name, path, setListPath, userId }) {
 			/>
 		</li>
 	);
-}
+};
+
+export default SingleList;
diff --git a/src/components/index.js b/src/components/index.js
index b4760a6..4c1764b 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,11 +1,20 @@
-export * from './ListItem';
-export * from './SingleList';
-export * from './ContainerItems';
-export * from './SearchList';
-export * from './Loading';
-export * from './ButtonWithIcon';
-export * from './ErrorMessage';
-export * from './Message';
-export * from './DeleteList';
-export * from './Confirm';
-export * from './DeleteItem';
+export { default as Loading } from './loading/Loading';
+
+export { default as ButtonWithIcon } from './custom-components/ButtonWithIcon';
+export { default as ErrorMessage } from './custom-components/ErrorMessage';
+export { default as Message } from './custom-components/Message';
+export { default as ListButtons } from './custom-components/ListButtons';
+export { default as Confirm } from './custom-components/Confirm';
+
+export { default as DeleteItem } from './list-components/DeleteItem';
+export { default as ContainerItems } from './list-components/ContainerItems';
+export { default as SearchList } from './list-components/SearchList';
+export { default as ListItem } from './list-components/ListItem';
+
+export { default as NavBar } from './navBar/NavBar';
+export { default as NavigationLink } from './navBar/NavigationLink';
+export { default as NavBarContent } from './navBar/NavBarContent';
+
+export { default as DeleteList } from './home-components/DeleteList';
+export { default as SingleList } from './home-components/SingleList';
+export { default as ListForm } from './home-components/ListForm';
diff --git a/src/components/ContainerItems.jsx b/src/components/list-components/ContainerItems.jsx
similarity index 87%
rename from src/components/ContainerItems.jsx
rename to src/components/list-components/ContainerItems.jsx
index e576507..431a3ff 100644
--- a/src/components/ContainerItems.jsx
+++ b/src/components/list-components/ContainerItems.jsx
@@ -1,8 +1,7 @@
-import { useEffect, useState } from 'react';
-import { ListItem } from './ListItem';
-import { Fragment } from 'react';
+import { useEffect, useState, Fragment } from 'react';
+import { ListItem } from '@components';
 
-export const ContainerItems = ({
+const ContainerItems = ({
 	category,
 	newList,
 	wasRecentlyPurchased,
@@ -48,3 +47,5 @@ export const ContainerItems = ({
 		<> </>
 	);
 };
+
+export default ContainerItems;
diff --git a/src/components/DeleteItem.jsx b/src/components/list-components/DeleteItem.jsx
similarity index 94%
rename from src/components/DeleteItem.jsx
rename to src/components/list-components/DeleteItem.jsx
index 48604b8..0390503 100644
--- a/src/components/DeleteItem.jsx
+++ b/src/components/list-components/DeleteItem.jsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { useTranslation, Trans } from 'react-i18next';
-import { deleteItem } from '../api/firebase';
-import Confirm from './Confirm';
+import { deleteItem } from '@api';
+import { Confirm } from '@components';
 
 const DeleteItem = ({ itemName, listPath, itemId }) => {
 	const { t } = useTranslation();
diff --git a/src/components/ListItem.jsx b/src/components/list-components/ListItem.jsx
similarity index 93%
rename from src/components/ListItem.jsx
rename to src/components/list-components/ListItem.jsx
index 579936f..ab0a95b 100644
--- a/src/components/ListItem.jsx
+++ b/src/components/list-components/ListItem.jsx
@@ -1,12 +1,12 @@
-import DeleteItem from './DeleteItem';
+import { DeleteItem } from '@components';
 
-export function ListItem({
+const ListItem = ({
 	isRecentlyPurchased,
 	itemId,
 	listPath,
 	name,
 	updatePurchaseDate,
-}) {
+}) => {
 	return (
 		<div
 			href="/"
@@ -51,4 +51,6 @@ export function ListItem({
 			</li>
 		</div>
 	);
-}
+};
+
+export default ListItem;
diff --git a/src/components/SearchList.jsx b/src/components/list-components/SearchList.jsx
similarity index 97%
rename from src/components/SearchList.jsx
rename to src/components/list-components/SearchList.jsx
index be95ffa..0feea64 100644
--- a/src/components/SearchList.jsx
+++ b/src/components/list-components/SearchList.jsx
@@ -47,4 +47,4 @@ export const SearchList = ({ data, setNewList }) => {
 	);
 };
 
-// export default SearchList;
+export default SearchList;
diff --git a/src/components/Loading.css b/src/components/loading/Loading.css
similarity index 100%
rename from src/components/Loading.css
rename to src/components/loading/Loading.css
diff --git a/src/components/Loading.jsx b/src/components/loading/Loading.jsx
similarity index 100%
rename from src/components/Loading.jsx
rename to src/components/loading/Loading.jsx
diff --git a/src/i18n.js b/src/i18n.js
index 9572d96..cec4c7f 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -177,7 +177,7 @@ const resources = {
 			ButtonDeleteList: 'Supprimer {{listNameUppercase}}',
 			ModalDeleteListTitle: 'Supprimer la liste {{listNameUppercase}}',
 			ModalDeleteListConfirmSuppression:
-				'Voulez-vous definitivement supprimer la liste {{listNameUppercase}} ?',
+				'Voulez-vous définitivement supprimer la liste {{listNameUppercase}} ?',
 			ModalDeleteListStopUsing:
 				"Voulez-vouz arrêter d'utiliser la liste {{listNameUppercase}} ?",
 		},
diff --git a/src/utils/index.js b/src/utils/index.js
index 363e519..013f876 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -1,2 +1,3 @@
 export * from './dates';
 export * from './hooks';
+export * from './inputValidation';
diff --git a/src/views/Home.jsx b/src/views/Home.jsx
index bc967c0..61d1737 100644
--- a/src/views/Home.jsx
+++ b/src/views/Home.jsx
@@ -1,8 +1,6 @@
-import { SingleList } from '../components';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import ListForm from '../components/ListForm';
-import ErrorMessage from '../components/ErrorMessage';
+import { ErrorMessage, ListForm, SingleList } from '@components';
 
 export function Home({ data, setListPath, userId, userEmail }) {
 	const { t } = useTranslation();
diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx
index 97e9e1b..cda2689 100644
--- a/src/views/Layout.jsx
+++ b/src/views/Layout.jsx
@@ -1,9 +1,8 @@
 import { Outlet } from 'react-router-dom';
 import { useTranslation, Trans } from 'react-i18next';
-import { SignIn } from '../api/useAuth.jsx';
-import { NavBar } from '../components/NavBar/NavBar.jsx';
+import { SignIn } from '@api';
+import { NavBar, Loading } from '@components';
 import Groceries from '../assets/groceries.png';
-import Loading from '../components/Loading.jsx';
 
 export function Layout({ lists, listPath, user, isLoadingUser }) {
 	const { t } = useTranslation();
diff --git a/src/views/List.jsx b/src/views/List.jsx
index 744c8a9..da1bd72 100644
--- a/src/views/List.jsx
+++ b/src/views/List.jsx
@@ -1,18 +1,14 @@
 import { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ContainerItems } from '../components';
-import { SearchList } from '../components';
-import { useParams, useNavigate } from 'react-router-dom';
-import { updateItem, comparePurchaseUrgency } from '../api/firebase';
-import { isMoreThanADayAgo } from '../utils';
-import Loading from '../components/Loading';
-import ListButtons from '../components/ListButtons';
+import { ContainerItems, SearchList, Loading, ListButtons } from '@components';
+import { useParams } from 'react-router-dom';
+import { updateItem, comparePurchaseUrgency } from '@api';
+import { isMoreThanADayAgo } from '@utils';
 
 export function List({ data, lists, listPath, isLoadingListData }) {
 	const [newList, setNewList] = useState([]);
 	const [sortedList, setSortedList] = useState([]);
 	const { path } = useParams();
-	const navigate = useNavigate();
 	const { t } = useTranslation();
 
 	const categoryArray = [
diff --git a/src/views/ManageList.jsx b/src/views/ManageList.jsx
index 00d16af..7dcc8dd 100644
--- a/src/views/ManageList.jsx
+++ b/src/views/ManageList.jsx
@@ -1,14 +1,12 @@
 import { useState } from 'react';
 import { useTranslation, Trans } from 'react-i18next';
-import { addItem } from '../api/firebase';
-import { shareList } from '../api/firebase';
-import ErrorMessage from '../components/ErrorMessage';
-import Message from '../components/Message';
+import { addItem, shareList } from '@api';
+import { ErrorMessage, Message } from '@components';
 import {
 	inputHasValue,
 	inputHasOnlyNUmbers,
 	stringsHaveSameValue,
-} from '../utils/inputValidation';
+} from '@utils';
 
 export function ManageList({ data, listPath, userId, userEmail }) {
 	const { t } = useTranslation();
diff --git a/vite.config.js b/vite.config.js
index 275e900..0ee8e72 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -3,6 +3,7 @@ import eslint from '@nabla/vite-plugin-eslint';
 import react from '@vitejs/plugin-react';
 import svgr from 'vite-plugin-svgr';
 import { VitePWA } from 'vite-plugin-pwa';
+import path from 'path';
 
 const PWAConfig = {
 	includeAssets: ['favicon.ico', 'robots.txt'],
@@ -57,6 +58,13 @@ export default defineConfig({
 			},
 		},
 	},
+	resolve: {
+		alias: {
+			'@components': path.resolve(__dirname, 'src/components'),
+			'@api': path.resolve(__dirname, 'src/api'),
+			'@utils': path.resolve(__dirname, 'src/utils'),
+		},
+	},
 	optimizeDeps: { disabled: false },
 	plugins: [
 		eslint({ cache: false, formatter: 'stylish' }),