diff --git a/src/App.jsx b/src/App.jsx
index 104d3dd..4a883cd 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,13 +1,19 @@
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
-
-import { Home, Layout, List, ManageList, Err, Login } from './views';
-
-import { PublicRoute, PrivateRoute } from './components';
-
+import { lazy, Suspense } from 'react';
 import { useAuth, useSharedWithData } from './api';
-
 import { useShoppingListData, useShoppingLists } from './api';
 import { useStateWithStorage } from './utils';
+
+import Login from './views/Login';
+import PublicRoute from './components/PublicRoute';
+import { Spinner } from './components';
+
+const PrivateRoute = lazy(() => import('./components/PrivateRoute'));
+const Layout = lazy(() => import('./views/Layout'));
+const Home = lazy(() => import('./views/Home'));
+const List = lazy(() => import('./views/List'));
+const Err = lazy(() => import('./views/Err'));
+
 export function App() {
 	/**
 	 * This custom hook takes the path of a shopping list
@@ -22,7 +28,7 @@ export function App() {
 	 * This custom hook holds info about the current signed in user.
 	 * Check ./api/useAuth.jsx for its implementation.
 	 */
-	const { user } = useAuth();
+	const { user, isAuthenticating } = useAuth();
 	const userId = user?.uid;
 	const userEmail = user?.email;
 	/**
@@ -38,54 +44,85 @@ export function App() {
 	const { data, loading, setLoading } = useShoppingListData(listPath);
 
 	const { sharedWith } = useSharedWithData(listPath);
-
+	if (isAuthenticating) {
+		return <Spinner />;
+	}
 	return (
 		<Router>
 			<Routes>
-				<Route element={<PublicRoute />}>
-					<Route path="/login" element={<Login />} />
+				<Route
+					element={
+						<Suspense fallback={<Spinner />}>
+							<PublicRoute />
+						</Suspense>
+					}
+				>
+					<Route
+						path="/login"
+						element={
+							<Suspense fallback={<Spinner />}>
+								<Login />
+							</Suspense>
+						}
+					/>
 				</Route>
-				<Route element={<PrivateRoute />}>
+				<Route
+					element={
+						<Suspense fallback={<Spinner />}>
+							<PrivateRoute />
+						</Suspense>
+					}
+				>
 					<Route
 						path="/"
 						element={
-							<Layout
-								data={lists}
-								setListPath={setListPath}
-								setLoading={setLoading}
-							/>
+							<Suspense fallback={<Spinner />}>
+								<Layout
+									data={lists}
+									setListPath={setListPath}
+									listPath={listPath}
+									setLoading={setLoading}
+								/>
+							</Suspense>
 						}
 					>
 						<Route
 							index
 							element={
-								<Home
-									data={lists}
-									setListPath={setListPath}
-									setLoading={setLoading}
-								/>
+								<Suspense fallback={<Spinner />}>
+									<Home
+										data={lists}
+										setListPath={setListPath}
+										setLoading={setLoading}
+									/>
+								</Suspense>
 							}
 						/>
 						<Route
 							path="/list"
 							element={
-								<List
-									data={data}
-									listPath={listPath}
-									lists={lists}
-									sharedWith={sharedWith}
-									loading={loading}
-									setLoading={setLoading}
-								/>
+								<Suspense fallback={<Spinner />}>
+									<List
+										data={data}
+										listPath={listPath}
+										lists={lists}
+										sharedWith={sharedWith}
+										loading={loading}
+										setLoading={setLoading}
+									/>
+								</Suspense>
 							}
 						/>
-						<Route
-							path="/manage-list"
-							element={<ManageList listPath={listPath} data={data} />}
-						/>
 					</Route>
 				</Route>
-				<Route path="*" element={<Err />} />
+				<Route
+					path="*"
+					element={
+						<Suspense fallback={<Spinner />}>
+							<Err />
+						</Suspense>
+					}
+				/>
 			</Routes>
 		</Router>
 	);
diff --git a/src/api/useAuth.jsx b/src/api/useAuth.jsx
index 2a4ff71..a1c2795 100644
--- a/src/api/useAuth.jsx
+++ b/src/api/useAuth.jsx
@@ -96,15 +96,36 @@ export const SignOutButton = () => {
  */
 export const useAuth = () => {
 	const [user, setUser] = useState(null);
-  
+	const [isAuthenticating, setIsAuthenticating] = useState(true); // Add loading state
+
 	useEffect(() => {
 		auth.onAuthStateChanged((user) => {
+			setIsAuthenticating(false);
+			setUser(user);
+			if (user) {
+				addUserToDatabase(user);
+			}
+		});
+	}, []);
+
+	return { user, isAuthenticating };
+};
+
+export const useAuth2 = () => {
+	const [user, setUser] = useState(null);
+	const [isLoading, setIsLoading] = useState(true); // Add loading state
+
+	useEffect(() => {
+		const unsubscribe = auth.onAuthStateChanged((user) => {
 			setUser(user);
+			setIsLoading(false); // Set loading to false once authentication state is resolved
 			if (user) {
 				addUserToDatabase(user);
 			}
 		});
+
+		return () => unsubscribe(); // Unsubscribe when component unmounts
 	}, []);
-  
-	return { user };
-};
\ No newline at end of file
+
+	return { user, isLoading }; // Return loading state along with user object
+};
diff --git a/src/components/PrivateRoute.jsx b/src/components/PrivateRoute.jsx
index 6193e7a..b702810 100644
--- a/src/components/PrivateRoute.jsx
+++ b/src/components/PrivateRoute.jsx
@@ -1,8 +1,8 @@
 import { Outlet } from 'react-router-dom';
 import { useAuth } from '../api';
-import { Login } from '../views';
+import Login from '../views/Login';
 
-export function PrivateRoute() {
+export default function PrivateRoute() {
 	const { user } = useAuth();
 	return user ? <Outlet /> : <Login />;
 }
diff --git a/src/components/PublicRoute.jsx b/src/components/PublicRoute.jsx
index d0d63a1..54a8fd4 100644
--- a/src/components/PublicRoute.jsx
+++ b/src/components/PublicRoute.jsx
@@ -1,8 +1,8 @@
 import { Outlet } from 'react-router-dom';
 import { useAuth } from '../api';
-import { Login } from '../views';
+import Login from '../views/Login';
 
-export function PublicRoute() {
+export default function PublicRoute() {
 	const { user } = useAuth();
 	return !user ? <Login /> : <Outlet />;
 }
diff --git a/src/components/SingleList.jsx b/src/components/SingleList.jsx
index bfd3b13..8d455f8 100644
--- a/src/components/SingleList.jsx
+++ b/src/components/SingleList.jsx
@@ -61,4 +61,4 @@ export function SingleList({ name, path, setListPath, setLoading }) {
 			</button>
 		</li>
 	);
-}
\ No newline at end of file
+}
diff --git a/src/views/Err.jsx b/src/views/Err.jsx
index 4633a9a..f7e8bae 100644
--- a/src/views/Err.jsx
+++ b/src/views/Err.jsx
@@ -1,7 +1,7 @@
 import { NavLink } from 'react-router-dom';
 import Logo from '../assets/Logo.jsx';
 
-export function Err() {
+export default function Err() {
 	return (
 		<div className="flex my-auto h-screen bg-[url('assets/lightContrastGraph.png')] bg-cover xsm:p-4">
 			<div className="m-auto">
diff --git a/src/views/Home.jsx b/src/views/Home.jsx
index bdc496c..6c276b8 100644
--- a/src/views/Home.jsx
+++ b/src/views/Home.jsx
@@ -2,7 +2,7 @@ import { SingleList } from '../components/SingleList';
 import AddList from '../components/AddList.jsx';
 import { useAuth } from '../api/useAuth.jsx';
 
-export function Home({ data, setListPath, setLoading }) {
+export default function Home({ data, setListPath, setLoading }) {
 	const { user } = useAuth();
 	return (
 		<div>
diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx
index 5421555..555b815 100644
--- a/src/views/Layout.jsx
+++ b/src/views/Layout.jsx
@@ -1,13 +1,12 @@
 import { Outlet } from 'react-router-dom';
 import NavigationBar from '../components/NavigationBar.jsx';
 
-export function Layout({ data, setListPath, setLoading }) {
+export default function Layout({ data, setListPath, setLoading }) {
 	const mainContentMargin = 'xsm:ml-24 sm:ml-36 md:ml-48 lg:ml-64';
 
 	return (
 		<>
 			<div className={`flex xsm:text-sm sm:text-md md:text-lg`}>
-				{/* Sidebar just below-16*/}
 				<NavigationBar
 					data={data}
 					setListPath={setListPath}
@@ -18,7 +17,6 @@ export function Layout({ data, setListPath, setLoading }) {
 					className={`min-h-screen flex-grow bg-appBg p-2 ${mainContentMargin} md:p-6 pb-12`}
 				>
 					<Outlet />
-					{/* Modal for inviting friends */}
 				</main>
 			</div>
 		</>
diff --git a/src/views/List.jsx b/src/views/List.jsx
index 2cd7f07..df0a278 100644
--- a/src/views/List.jsx
+++ b/src/views/List.jsx
@@ -11,7 +11,7 @@ import { useAuth } from '../api';
 import { IoMailOutline } from 'react-icons/io5';
 import { FaRegCircleUser } from 'react-icons/fa6';
 
-export function List({ data, listPath, lists, loading }) {
+export default function List({ data, listPath, lists, loading }) {
 	const [search, setSearch] = useState('');
 	const [listName, setListName] = useState('');
 	const [toggleModal, setToggleModal] = useState(false);
diff --git a/src/views/Login.jsx b/src/views/Login.jsx
index 6ff0191..4fa3ee1 100644
--- a/src/views/Login.jsx
+++ b/src/views/Login.jsx
@@ -1,7 +1,7 @@
 import { SignInButton } from '../api/useAuth';
 import Logo from '../assets/Logo.jsx';
 
-export function Login() {
+export default function Login() {
 	return (
 		<div className="flex my-auto h-screen bg-[url('assets/lightestContrastGraph.png')] bg-cover xsm:p-4">
 			<div className="m-auto">