diff --git a/api/src/tablo.ts b/api/src/tablo.ts
index 351c5dc..496aa14 100644
--- a/api/src/tablo.ts
+++ b/api/src/tablo.ts
@@ -451,8 +451,12 @@ tabloRouter.post("/join", async (c) => {
 
   await supabase.from("tablo_invites").delete().eq("id", invite_id);
 
-  const channel = streamServerClient.channel("messaging", tablo_id);
-  await channel.addMembers([joiner.id]);
+  try {
+    const channel = streamServerClient.channel("messaging", tablo_id);
+    await channel.addMembers([joiner.id]);
+  } catch (error) {
+    console.error("error adding member to channel", error);
+  }
 
   return c.json({ message: "Tablo joined successfully" });
 });
diff --git a/ui/src/pages/join.tsx b/ui/src/pages/join.tsx
index 3439062..02970bf 100644
--- a/ui/src/pages/join.tsx
+++ b/ui/src/pages/join.tsx
@@ -1,6 +1,9 @@
+import { Button } from "@ui/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@ui/components/ui/card";
 import { useJoinTablo } from "@ui/hooks/invite";
 import { toast } from "@ui/lib/toast";
 import { useUser } from "@ui/providers/UserStoreProvider";
+import { CheckCircle2Icon, XCircleIcon } from "lucide-react";
 import { useNavigate, useParams, useSearchParams } from "react-router-dom";
 
 export const JoinPage = () => {
@@ -12,39 +15,35 @@ export const JoinPage = () => {
   const [searchParams] = useSearchParams();
   const token = searchParams.get("token");
 
-  if (!tablo_name || !token) {
-    toast.add(
-      {
-        title: "Invitation invalide",
-        description: "Veuillez vérifier le lien d'invitation",
-        type: "error",
-      },
-      {
-        timeout: 2000,
-      }
-    );
-    navigate("/");
-  }
-
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50">
+    <div className="min-h-screen flex items-center justify-center bg-background p-4">
       <div className="max-w-md w-full">
         <div className="text-center mb-8">
-          <h1 className="text-3xl font-bold text-gray-900">
+          <h1 className="text-3xl font-bold text-foreground">
             Rejoindre le tablo &quot;{tablo_name}&quot;
           </h1>
         </div>
 
-        <div className="bg-white p-8 rounded-lg shadow-lg">
-          <div className="text-center mb-6">
-            <h2 className="text-2xl font-semibold text-gray-900 mb-2">{tablo_name}</h2>
-            <p className="text-gray-600">Vous avez été invité(e) à rejoindre ce tablo</p>
-          </div>
+        <Card className="transition-shadow hover:shadow-lg">
+          <CardHeader className="text-center">
+            <CardTitle className="text-2xl">{tablo_name}</CardTitle>
+            <CardDescription>Vous avez été invité(e) à rejoindre ce tablo</CardDescription>
+          </CardHeader>
 
-          <div className="space-y-4">
-            <button
+          <CardContent className="space-y-4">
+            <Button
               onClick={() => {
-                if (!user || !token) return;
+                if (!user || !token) {
+                  toast.add(
+                    {
+                      title: "Erreur",
+                      description: "Vous n'avez pas les permissions requises",
+                      type: "error",
+                    },
+                    { timeout: 2000 }
+                  );
+                  return;
+                }
                 joinTablo(
                   { token },
                   {
@@ -52,24 +51,31 @@ export const JoinPage = () => {
                       navigate("/");
                     },
                     onError: (error) => {
-                      alert(error.message);
+                      toast.add(
+                        {
+                          title: "Erreur",
+                          description: error.message,
+                          type: "error",
+                        },
+                        { timeout: 2000 }
+                      );
                     },
                   }
                 );
               }}
-              className="w-full bg-blue-600 text-white py-3 px-4 rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
+              className="w-full"
+              size="lg"
             >
+              <CheckCircle2Icon className="w-5 h-5 mr-2" />
               Accepter l&apos;invitation
-            </button>
+            </Button>
 
-            <button
-              onClick={() => navigate("/")}
-              className="w-full bg-gray-200 text-gray-800 py-3 px-4 rounded-lg hover:bg-gray-300"
-            >
+            <Button onClick={() => navigate("/")} variant="outline" className="w-full" size="lg">
+              <XCircleIcon className="w-5 h-5 mr-2" />
               Refuser
-            </button>
-          </div>
-        </div>
+            </Button>
+          </CardContent>
+        </Card>
       </div>
     </div>
   );