diff --git a/app/components/home/index.tsx b/app/components/home/index.tsx
index 3876b5f..8a14f62 100644
--- a/app/components/home/index.tsx
+++ b/app/components/home/index.tsx
@@ -79,6 +79,17 @@ export default function Home() {
     isLoading,
   });
 
+  // Error handling (after all hooks)
+  if (error)
+    return (
+      <Error
+        title="Impossible de charger les colles"
+        message={error?.toString()}
+        code={500}
+        description="Une erreur s'est produite lors du chargement de la liste des colles."
+      />
+    );
+
   // TODO: FAVORITES
   const useToggleStar = (auth: any) => {};
   // TODO: FILTERS
@@ -127,17 +138,6 @@ export default function Home() {
   //   setTimeout(restoreScrollPosition, 500);
   // }, [location]);
 
-  // Error handling (after all hooks)
-  if (error)
-    return (
-      <Error
-        title="Impossible de charger les colles"
-        message={error?.toString()}
-        code={500}
-        description="Une erreur s'est produite lors du chargement de la liste des colles."
-      />
-    );
-
   return (
     <div className="space-y-6 pb-20 md:pb-0">
       {/* Week Navigation */}
diff --git a/app/components/loader.tsx b/app/components/loader.tsx
new file mode 100644
index 0000000..31afb6e
--- /dev/null
+++ b/app/components/loader.tsx
@@ -0,0 +1,20 @@
+export default function Loader() {
+  return (
+    <div className="min-h-screen flex items-center justify-center">
+      <div className="flex flex-col items-center space-y-4">
+        <div className="flex space-x-2">
+          <div className="w-3 h-3 bg-primary rounded-full animate-bounce"></div>
+          <div
+            className="w-3 h-3 bg-primary rounded-full animate-bounce"
+            style={{ animationDelay: "0.1s" }}
+          ></div>
+          <div
+            className="w-3 h-3 bg-primary rounded-full animate-bounce"
+            style={{ animationDelay: "0.2s" }}
+          ></div>
+        </div>
+        <h2 className="text-primary text-sm">Chargement...</h2>
+      </div>
+    </div>
+  );
+}
diff --git a/app/lib/api.ts b/app/lib/api.ts
index 719e518..dd4507c 100644
--- a/app/lib/api.ts
+++ b/app/lib/api.ts
@@ -103,6 +103,8 @@ const defaultUser = {
 
 export type User = typeof defaultUser;
 
+export const AUTH_ERROR = "Unauthorized access"
+
 export const useUser = () => {
   const { data, ...props } = useQuery({
     queryKey: ["user"],
diff --git a/app/routes/colles.tsx b/app/routes/colles.tsx
index e0bef16..49319b3 100644
--- a/app/routes/colles.tsx
+++ b/app/routes/colles.tsx
@@ -37,7 +37,7 @@ import AttachmentItem from "~/components/details/attachment";
 // import { ScrollToTopOnMount } from "~/components/noscroll";
 import Error from "~/components/error";
 import { Badge } from "~/components/ui/badge";
-import { useColle, useUser } from "~/lib/api";
+import { AUTH_ERROR, useColle, useUser } from "~/lib/api";
 import { toast } from "sonner";
 import { formatDate, formatGrade, formatTime, goBack } from "~/lib/utils";
 
@@ -60,10 +60,14 @@ export default function ColleDetailPage() {
 
   const [isReloading, setIsReloading] = useState(false);
 
-  // TODO: Handle user loading state
+  if (isUserLoading) {
+    return <ColleDetailsSkeleton />
+  }
+  if (userError?.message === AUTH_ERROR) {
+    return <Navigate to="/login" replace />;
+  }
   if (userError) {
-    console.error(userError);
-    return <Navigate to="/login" />;
+    return <Error message={userError.message} />;
   }
 
   // TODO: Favorite toggle function
@@ -84,7 +88,6 @@ export default function ColleDetailPage() {
         description="Une erreur s'est produite lors du chargement de la colle."
       />
     );
-
   if (isLoading || !colle) return <ColleDetailsSkeleton />;
 
   const handleToggleFavorite = () => {};
diff --git a/app/routes/home.tsx b/app/routes/home.tsx
index 5b673a6..2ec6502 100644
--- a/app/routes/home.tsx
+++ b/app/routes/home.tsx
@@ -1,21 +1,30 @@
+import { Navigate } from "react-router";
+import Error from "~/components/error";
 import HomePage from "~/components/home";
+import Loader from "~/components/loader";
 import UserDropdown from "~/components/user-dropdown";
 import { MainLayout } from "~/layout";
-import { useUser } from "~/lib/api";
+import { AUTH_ERROR, useUser } from "~/lib/api";
 import { forceReload } from "~/lib/utils";
 
 export default function Home() {
   const { user, isLoading, error } = useUser();
-  if (error) {
-    console.error(error);
-    // TODO: handle error (redirect to login or show error message)
+  
+  if (isLoading) {
+    return <Loader />;
   }
+  if (error?.message === AUTH_ERROR) {
+    return <Navigate to="/login" replace />;
+  }
+  if (error) {
+    return <Error message={error.message} />;
+  }
+
   return (
     <MainLayout page={<HomePage />}>
       <h1 className="text-2xl font-bold" onClick={forceReload}>
         Khollis&eacute; - {user.className} ⚔️
       </h1>
-      {/* TODO: isLoading to display skeleton */}
       <UserDropdown user={user} />
     </MainLayout>
   );