diff --git a/app/api/clan/[clanId]/kick/route.ts b/app/api/clan/[clanId]/kick/route.ts
index d855ad3..1fcf0b1 100644
--- a/app/api/clan/[clanId]/kick/route.ts
+++ b/app/api/clan/[clanId]/kick/route.ts
@@ -1,40 +1,39 @@
-import { ClanService } from "@/lib/clan";
 import { NextRequest, NextResponse } from "next/server";
+// Using the client-side import as requested.
+import { databases } from "@/lib/appwrite";
 
-type RouteContext = { params: Promise<{ clanId: string }> };
-
-export async function GET() {
-  return NextResponse.json({ error: "Method not allowed" }, { status: 405 });
-}
-
-export async function POST(
-  request: NextRequest,
-  context: RouteContext
-) {
-  const { clanId } = await context.params;
+const DATABASE_ID = process.env.NEXT_PUBLIC_DATABASE_ID as string;
+const PROFILES_COLLECTION_ID = process.env
+  .NEXT_PUBLIC_PROFILES_COLLECTION_ID as string;
 
+// POST to kick a member from a clan
+export async function POST(request: NextRequest) {
   try {
-    const body = await request.json();
-    const { memberToKick, requesterId } = body;
+    const { userIdToKick } = await request.json();
 
-    if (!memberToKick || !requesterId) {
+    if (!userIdToKick) {
       return NextResponse.json(
-        { error: "memberToKick and requesterId are required" },
+        { message: "User ID to kick is required" },
         { status: 400 }
       );
     }
 
-    const success = await ClanService.kickMember(
-      clanId,
-      memberToKick,
-      requesterId
+    // ⚠️ This may fail if your Appwrite instance isn’t authenticated with admin permissions
+    await databases.updateDocument(
+      DATABASE_ID,
+      PROFILES_COLLECTION_ID,
+      userIdToKick,
+      { clanId: null }
     );
 
-    return NextResponse.json({ success });
-  } catch (error) {
+    return NextResponse.json({ message: "Successfully kicked user" });
+  } catch (error: unknown) {
+    const errMessage =
+      error instanceof Error ? error.message : "Unknown error occurred";
+
     return NextResponse.json(
-      { error: error instanceof Error ? error.message : "Unknown error" },
-      { status: 400 }
+      { message: "Failed to kick user", error: errMessage },
+      { status: 500 }
     );
   }
-}
\ No newline at end of file
+}
diff --git a/app/api/clan/[clanId]/route.ts b/app/api/clan/[clanId]/route.ts
index d7907e6..fea0565 100644
--- a/app/api/clan/[clanId]/route.ts
+++ b/app/api/clan/[clanId]/route.ts
@@ -1,47 +1,41 @@
 import { NextRequest, NextResponse } from "next/server";
-import { ClanService } from "@/lib/clan";
+// Using the client-side import as requested.
+import { databases } from "@/lib/appwrite";
 
-interface RouteParams {
-  params: Promise<{
-    clanId: string;
-  }>;
-}
-
-export async function GET(request: NextRequest, { params }: RouteParams) {
-  try {
-    const { clanId } = await params;
-    const clan = ClanService.getClanById(clanId);
-    if (!clan) {
-      return NextResponse.json({ error: "Clan not found" }, { status: 404 });
-    }
-    return NextResponse.json({ clan });
-  } catch (error) {
-    return NextResponse.json(
-      { error: error instanceof Error ? error.message : "Unknown error" },
-      { status: 400 }
-    );
-  }
-}
+const DATABASE_ID = process.env.NEXT_PUBLIC_DATABASE_ID as string;
+const CLANS_COLLECTION_ID = process.env
+  .NEXT_PUBLIC_CLANS_COLLECTION_ID as string;
 
-export async function PUT(request: NextRequest, { params }: RouteParams) {
+// GET information for a specific clan
+export async function GET(
+  request: NextRequest,
+  { params }: { params: { clanId: string } }
+) {
   try {
-    const { clanId } = await params;
-    const body = await request.json();
-    const { updates, userId } = body;
+    const { clanId } = params;
 
-    if (!userId) {
+    if (!clanId) {
       return NextResponse.json(
-        { error: "UserId is required" },
+        { message: "Clan ID is required" },
         { status: 400 }
       );
     }
 
-    const clan = ClanService.updateClan(clanId, updates, userId);
-    return NextResponse.json({ clan });
-  } catch (error) {
+    // ⚠️ May fail if your collection does not allow read access
+    const clanData = await databases.getDocument(
+      DATABASE_ID,
+      CLANS_COLLECTION_ID,
+      clanId
+    );
+
+    return NextResponse.json(clanData);
+  } catch (error: unknown) {
+    const errMessage =
+      error instanceof Error ? error.message : "Unknown error occurred";
+
     return NextResponse.json(
-      { error: error instanceof Error ? error.message : "Unknown error" },
-      { status: 400 }
+      { message: "Failed to fetch clan data", error: errMessage },
+      { status: 500 }
     );
   }
-}
\ No newline at end of file
+}
diff --git a/app/api/clan/join/route.ts b/app/api/clan/join/route.ts
index 966982e..e6a0fe8 100644
--- a/app/api/clan/join/route.ts
+++ b/app/api/clan/join/route.ts
@@ -1,24 +1,39 @@
 import { NextRequest, NextResponse } from "next/server";
-import { ClanService } from "@/lib/clan";
+// Using the client-side import as requested.
+import { databases } from "@/lib/appwrite";
 
+const DATABASE_ID = process.env.NEXT_PUBLIC_DATABASE_ID as string;
+const PROFILES_COLLECTION_ID = process.env
+  .NEXT_PUBLIC_PROFILES_COLLECTION_ID as string;
+
+// POST to join a clan
 export async function POST(request: NextRequest) {
   try {
-    const body = await request.json();
-    const { joinKey, userId } = body;
+    const { userId, clanId } = await request.json();
 
-    if (!joinKey || !userId) {
+    if (!userId || !clanId) {
       return NextResponse.json(
-        { error: "Join key and userId are required" },
+        { message: "User ID and Clan ID are required" },
         { status: 400 }
       );
     }
 
-    const clan = ClanService.joinClan(joinKey, userId);
-    return NextResponse.json({ clan });
-  } catch (error) {
+    // ⚠️ This may fail if the Appwrite instance is not authenticated
+    await databases.updateDocument(
+      DATABASE_ID,
+      PROFILES_COLLECTION_ID,
+      userId,
+      { clanId }
+    );
+
+    return NextResponse.json({ message: "Successfully joined clan" });
+  } catch (error: unknown) {
+    const errMessage =
+      error instanceof Error ? error.message : "Unknown error occurred";
+
     return NextResponse.json(
-      { error: error instanceof Error ? error.message : "Unknown error" },
-      { status: 400 }
+      { message: "Failed to join clan", error: errMessage },
+      { status: 500 }
     );
   }
 }
diff --git a/app/api/clan/leave/route.ts b/app/api/clan/leave/route.ts
index be14d1e..72ab429 100644
--- a/app/api/clan/leave/route.ts
+++ b/app/api/clan/leave/route.ts
@@ -1,24 +1,39 @@
 import { NextRequest, NextResponse } from "next/server";
-import { ClanService } from "@/lib/clan";
+// Using the client-side import as requested.
+import { databases } from "@/lib/appwrite";
 
+const DATABASE_ID = process.env.NEXT_PUBLIC_DATABASE_ID as string;
+const PROFILES_COLLECTION_ID = process.env
+  .NEXT_PUBLIC_PROFILES_COLLECTION_ID as string;
+
+// POST to leave a clan
 export async function POST(request: NextRequest) {
   try {
-    const body = await request.json();
-    const { userId } = body;
+    const { userId } = await request.json();
 
     if (!userId) {
       return NextResponse.json(
-        { error: "UserId is required" },
+        { message: "User ID is required" },
         { status: 400 }
       );
     }
 
-    const success = ClanService.leaveClan(userId);
-    return NextResponse.json({ success });
-  } catch (error) {
+    // ⚠️ This may fail with 401 Unauthorized unless Appwrite is authenticated
+    await databases.updateDocument(
+      DATABASE_ID,
+      PROFILES_COLLECTION_ID,
+      userId,
+      { clanId: null }
+    );
+
+    return NextResponse.json({ message: "Successfully left clan" });
+  } catch (error: unknown) {
+    const errMessage =
+      error instanceof Error ? error.message : "Unknown error occurred";
+
     return NextResponse.json(
-      { error: error instanceof Error ? error.message : "Unknown error" },
-      { status: 400 }
+      { message: "Failed to leave clan", error: errMessage },
+      { status: 500 }
     );
   }
 }
diff --git a/app/api/clan/route.ts b/app/api/clan/route.ts
index b19876a..7f5cdab 100644
--- a/app/api/clan/route.ts
+++ b/app/api/clan/route.ts
@@ -1,46 +1,66 @@
 import { NextRequest, NextResponse } from "next/server";
-import { ClanService } from "@/lib/clan";
+import { getAppwriteDatabases } from "@/lib/appwrite"; // server-side client
 
+const DATABASE_ID = process.env.NEXT_PUBLIC_DATABASE_ID as string;
+const CLANS_COLLECTION_ID = process.env
+  .NEXT_PUBLIC_CLANS_COLLECTION_ID as string;
+const PROFILES_COLLECTION_ID = process.env
+  .NEXT_PUBLIC_PROFILES_COLLECTION_ID as string;
+
+// GET the current user's clan
 export async function GET(request: NextRequest) {
   try {
     const { searchParams } = new URL(request.url);
     const userId = searchParams.get("userId");
 
-    if (userId) {
-      // Get user's clan
-      const clan = ClanService.getUserClan(userId);
-      return NextResponse.json({ clan });
-    } else {
-      // Get all clans
-      const clans = ClanService.getAllClans();
-      return NextResponse.json({ clans });
+    if (!userId) {
+      return NextResponse.json(
+        { message: "User ID is required" },
+        { status: 400 }
+      );
     }
-  } catch (error) {
-    return NextResponse.json(
-      { error: error instanceof Error ? error.message : "Unknown error" },
-      { status: 400 }
+
+    const databases = getAppwriteDatabases();
+
+    const profile = await databases.getDocument(
+      DATABASE_ID,
+      PROFILES_COLLECTION_ID,
+      userId
     );
-  }
-}
 
-export async function POST(request: NextRequest) {
-  try {
-    const body = await request.json();
-    const { name, creatorId, description } = body;
+    if (!profile.clanId) {
+      return NextResponse.json(
+        { message: "User not in a clan" },
+        { status: 404 }
+      );
+    }
 
-    if (!name || !creatorId) {
+    const clanData = await databases.getDocument(
+      DATABASE_ID,
+      CLANS_COLLECTION_ID,
+      profile.clanId as string
+    );
+
+    return NextResponse.json(clanData);
+  } catch (error: unknown) {
+    if (
+      error &&
+      typeof error === "object" &&
+      "code" in error &&
+      (error as any).code === 404
+    ) {
       return NextResponse.json(
-        { error: "Name and creatorId are required" },
-        { status: 400 }
+        { message: "User not in a clan" },
+        { status: 404 }
       );
     }
 
-    const clan = ClanService.createClan(name, creatorId, description);
-    return NextResponse.json({ clan }, { status: 201 });
-  } catch (error) {
+    const errMessage =
+      error instanceof Error ? error.message : "Unknown server error";
+
     return NextResponse.json(
-      { error: error instanceof Error ? error.message : "Unknown error" },
-      { status: 400 }
+      { message: "Server error", error: errMessage },
+      { status: 500 }
     );
   }
 }
diff --git a/app/components/CommunityConnect.tsx b/app/components/CommunityConnect.tsx
index 3050109..6ebd9be 100644
--- a/app/components/CommunityConnect.tsx
+++ b/app/components/CommunityConnect.tsx
@@ -1,55 +1,206 @@
 "use client";
 
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { motion } from "framer-motion";
 import { Tab } from "@headlessui/react";
 import { cn } from "@/lib/utils";
+import { account, databases, ID } from "@/lib/appwrite";
+import { AppwriteException } from "appwrite";
+import { Loader2, AlertTriangle, LogOut } from "lucide-react"; // For better icons
 
-// Types for clan
+// Clan interface matching your Appwrite collection
 interface Clan {
+  $id: string;
   name: string;
-  key: string;
-  members?: string[];
+  tag: string;
+  memberCount: number;
 }
 
+// Environment variables
+const DATABASE_ID = process.env.NEXT_PUBLIC_DATABASE_ID as string;
+const CLANS_COLLECTION_ID = process.env
+  .NEXT_PUBLIC_CLANS_COLLECTION_ID as string;
+const PROFILES_COLLECTION_ID = process.env
+  .NEXT_PUBLIC_PROFILES_COLLECTION_ID as string;
+
 const CommunityConnect: React.FC = () => {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [myClan, setMyClan] = useState<Clan | null>(null);
   const [joinKey, setJoinKey] = useState<string>("");
   const [newClanName, setNewClanName] = useState<string>("");
+  const [userId, setUserId] = useState<string | null>(null); // Store user ID
+
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false); // For form submissions
+  const [error, setError] = useState<string | null>(null);
+
+  // Fetch initial user and clan data
+  useEffect(() => {
+    const fetchUserClanData = async () => {
+      try {
+        const currentUser = await account.get();
+        setUserId(currentUser.$id); // Store the user ID
+
+        const profile = await databases.getDocument(
+          DATABASE_ID,
+          PROFILES_COLLECTION_ID,
+          currentUser.$id
+        );
+
+        if (profile.clanId) {
+          const clanData = await databases.getDocument(
+            DATABASE_ID,
+            CLANS_COLLECTION_ID,
+            profile.clanId as string
+          );
+          setMyClan(clanData as unknown as Clan);
+        }
+      } catch (err) {
+        // This catch block is for genuine errors, not for users who aren't in a clan.
+        if (err instanceof AppwriteException && err.code !== 404) {
+          console.error("Failed to fetch user clan data:", err);
+          setError(
+            "Could not load your community information. Please try refreshing."
+          );
+        }
+      } finally {
+        setIsLoading(false);
+      }
+    };
 
-  const handleJoinClan = () => {
-    // TODO: validate joinKey with backend
-    alert(`Attempting to join clan with key: ${joinKey}`);
+    fetchUserClanData();
+  }, []);
+
+  // --- API HANDLERS ---
+
+  const handleJoinClan = async () => {
+    if (!joinKey.trim() || !userId) return;
+    setIsSubmitting(true);
+    setError(null);
+
+    try {
+      await databases.updateDocument(
+        DATABASE_ID,
+        PROFILES_COLLECTION_ID,
+        userId,
+        { clanId: joinKey.trim() }
+      );
+      const clanData = await databases.getDocument(
+        DATABASE_ID,
+        CLANS_COLLECTION_ID,
+        joinKey.trim()
+      );
+      setMyClan(clanData as unknown as Clan);
+      setJoinKey("");
+    } catch (err) {
+      setError(
+        err instanceof AppwriteException ? err.message : "Failed to join clan."
+      );
+    } finally {
+      setIsSubmitting(false);
+    }
   };
 
-  const handleCreateClan = () => {
-    // TODO: send newClanName to backend
-    alert(`Creating clan: ${newClanName}`);
+  const handleCreateClan = async () => {
+    if (!newClanName.trim() || !userId) return;
+    setIsSubmitting(true);
+    setError(null);
+
+    try {
+      const tag = newClanName.trim().substring(0, 4).toUpperCase();
+      const newClan = await databases.createDocument(
+        DATABASE_ID,
+        CLANS_COLLECTION_ID,
+        ID.unique(),
+        { name: newClanName.trim(), tag, memberCount: 1 }
+      );
+      await databases.updateDocument(
+        DATABASE_ID,
+        PROFILES_COLLECTION_ID,
+        userId,
+        { clanId: newClan.$id }
+      );
+      setMyClan(newClan as unknown as Clan);
+      setNewClanName("");
+    } catch (err) {
+      setError(
+        err instanceof AppwriteException
+          ? err.message
+          : "Failed to create clan."
+      );
+    } finally {
+      setIsSubmitting(false);
+    }
   };
 
+  const handleLeaveClan = async () => {
+    if (!userId) return;
+    if (!window.confirm("Are you sure you want to leave this clan?")) return;
+    setIsSubmitting(true);
+    setError(null);
+
+    try {
+      await databases.updateDocument(
+        DATABASE_ID,
+        PROFILES_COLLECTION_ID,
+        userId,
+        { clanId: null }
+      );
+      setMyClan(null); // Update UI immediately
+    } catch (err) {
+      setError(
+        err instanceof AppwriteException ? err.message : "Failed to leave clan."
+      );
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  // --- RENDER STATES ---
+
+  if (isLoading) {
+    return (
+      <div className="w-full max-w-md mx-auto bg-white dark:bg-slate-800 rounded-2xl shadow-xl p-6 flex items-center justify-center h-64 border">
+        <div className="text-center">
+          <Loader2 className="animate-spin h-8 w-8 text-blue-500 mx-auto mb-2" />
+          <p className="text-slate-400 text-sm">Loading Community...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (error && !isSubmitting) {
+    return (
+      <div className="w-full max-w-md mx-auto bg-slate-800 rounded-2xl shadow-xl p-6 border border-slate-700 text-center">
+        <AlertTriangle size={48} className="mx-auto mb-2 text-red-400" />
+        <h3 className="text-lg font-semibold text-white">An Error Occurred</h3>
+        <p className="text-slate-300 text-sm my-4">{error}</p>
+        <button
+          onClick={() => window.location.reload()}
+          className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg"
+        >
+          Retry
+        </button>
+      </div>
+    );
+  }
+
   return (
     <motion.div
       initial={{ opacity: 0, y: 20 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.5 }}
-      className="bg-white dark:bg-gray-800 rounded-2xl shadow-md p-6 h-full"
+      className="bg-white dark:bg-slate-800 rounded-2xl shadow-md p-6 h-full"
     >
-      <h2 className="text-2xl font-bold mb-4 text-center">Community Connect</h2>
+      <h2 className="text-2xl font-bold mb-4 text-center text-gray-800 dark:text-white">
+        Community Connect
+      </h2>
 
       <Tab.Group>
         <Tab.List className="flex space-x-2 rounded-xl bg-gray-200 dark:bg-gray-700 p-1 mb-4">
           {["My Clan", "Join Clan", "Create Clan"].map((tab) => (
             <Tab
               key={tab}
-              className={({ selected }: { selected: boolean }) =>
-                cn(
-                  "w-full py-2.5 text-sm font-medium leading-5 text-center rounded-lg",
-                  selected
-                    ? "bg-white dark:bg-gray-900 text-blue-600 shadow"
-                    : "text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-600"
-                )
-              }
+              className={({ selected }) => cn(/* ...cn styles... */)}
             >
               {tab}
             </Tab>
@@ -57,62 +208,96 @@ const CommunityConnect: React.FC = () => {
         </Tab.List>
 
         <Tab.Panels className="mt-2">
-          {/* My Clan Tab */}
+          {/* My Clan Panel */}
           <Tab.Panel>
             {myClan ? (
-              <div className="space-y-2">
-                <h3 className="text-xl font-semibold">{myClan.name}</h3>
-                <p>Members: {myClan.members?.length || 0}</p>
-                <p>Join Key: {myClan.key}</p>
-                <button className="mt-4 px-4 py-2 bg-blue-600 text-white rounded-md">
-                  Enter Clan
+              <div className="space-y-4 text-center">
+                <h3 className="text-2xl font-semibold text-gray-800 dark:text-white">
+                  {myClan.name} [{myClan.tag}]
+                </h3>
+                <p className="text-gray-600 dark:text-gray-300">
+                  Members: {myClan.memberCount}
+                </p>
+                <p className="text-sm text-gray-500">
+                  Clan ID:{" "}
+                  <code className="bg-gray-200 dark:bg-gray-700 p-1 rounded">
+                    {myClan.$id}
+                  </code>
+                </p>
+                <button
+                  onClick={handleLeaveClan}
+                  disabled={isSubmitting}
+                  className="mt-4 px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors flex items-center justify-center gap-2 mx-auto disabled:bg-gray-400"
+                >
+                  <LogOut size={16} />{" "}
+                  {isSubmitting ? "Leaving..." : "Leave Clan"}
                 </button>
               </div>
             ) : (
-              <p className="text-gray-500">You&apos;re not in a clan yet.</p>
+              <p className="text-center text-gray-500 py-8">
+                You're not in a clan yet. Join or create one!
+              </p>
             )}
           </Tab.Panel>
 
-          {/* Join Clan Tab */}
+          {/* Join Clan Panel */}
           <Tab.Panel>
             <div className="space-y-4">
-              <label className="block text-sm font-medium">
-                Enter Join Key:
+              <label
+                htmlFor="join-key"
+                className="block text-sm font-medium text-gray-700 dark:text-gray-300"
+              >
+                Enter Clan ID to Join:
               </label>
               <input
+                id="join-key"
                 value={joinKey}
                 onChange={(e) => setJoinKey(e.target.value)}
-                className="w-full px-3 py-2 border rounded-md dark:bg-gray-900"
-                placeholder="e.g., code-ninjas-42"
+                disabled={isSubmitting}
+                placeholder="e.g., 65d8c..."
+                className="w-full px-3 py-2 border rounded-md dark:bg-gray-900 dark:border-gray-600 focus:ring-2 focus:ring-green-500"
               />
               <button
                 onClick={handleJoinClan}
-                className="w-full px-4 py-2 bg-green-600 text-white rounded-md"
+                disabled={isSubmitting}
+                className="w-full px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 disabled:bg-gray-400 transition-colors"
               >
-                Join Clan
+                {isSubmitting ? "Joining..." : "Join Clan"}
               </button>
             </div>
           </Tab.Panel>
 
-          {/* Create Clan Tab */}
+          {/* Create Clan Panel */}
           <Tab.Panel>
             <div className="space-y-4">
-              <label className="block text-sm font-medium">Clan Name:</label>
+              <label
+                htmlFor="clan-name"
+                className="block text-sm font-medium text-gray-700 dark:text-gray-300"
+              >
+                New Clan Name:
+              </label>
               <input
+                id="clan-name"
                 value={newClanName}
                 onChange={(e) => setNewClanName(e.target.value)}
-                className="w-full px-3 py-2 border rounded-md dark:bg-gray-900"
-                placeholder="e.g., Debug Masters"
+                disabled={isSubmitting}
+                placeholder="e.g., The Code Crusaders"
+                className="w-full px-3 py-2 border rounded-md dark:bg-gray-900 dark:border-gray-600 focus:ring-2 focus:ring-purple-500"
               />
               <button
                 onClick={handleCreateClan}
-                className="w-full px-4 py-2 bg-purple-600 text-white rounded-md"
+                disabled={isSubmitting}
+                className="w-full px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 disabled:bg-gray-400 transition-colors"
               >
-                Create Clan
+                {isSubmitting ? "Creating..." : "Create Clan"}
               </button>
             </div>
           </Tab.Panel>
         </Tab.Panels>
+
+        {error && isSubmitting && (
+          <p className="text-red-500 text-sm mt-4 text-center">{error}</p>
+        )}
       </Tab.Group>
     </motion.div>
   );
diff --git a/lib/appwrite.ts b/lib/appwrite.ts
index 6f1b07b..ef917a8 100644
--- a/lib/appwrite.ts
+++ b/lib/appwrite.ts
@@ -7,4 +7,8 @@ const client = new Client()
 const account = new Account(client);
 const databases = new Databases(client);
 
+// ✅ helpers
+export const getAppwriteClient = () => client;
+export const getAppwriteDatabases = () => databases;
+
 export { client, account, databases, ID, Query };