diff --git a/src/actions/communities.ts b/src/actions/communities.ts
new file mode 100644
index 0000000..020ca97
--- /dev/null
+++ b/src/actions/communities.ts
@@ -0,0 +1,390 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { auth } from "@/auth";
+import { prisma } from "@/lib/prisma";
+import { Prisma, InviteStatus, NotificationType } from "@/generated/prisma/client";
+import { AddRuleSchema, CreateCommunitySchema, InviteUserSchema } from "@/lib/validations/community";
+
+type CommunityActionResult = {
+  error?: string;
+  success?: string;
+};
+
+// ─── Story 1: Create Community ───────────────────────────────────────────────
+
+export async function createCommunityAction(
+  formData: FormData
+): Promise<CommunityActionResult> {
+  const session = await auth();
+  if (!session?.user?.id) {
+    return { error: "Please log in before creating a community." };
+  }
+
+  const validated = CreateCommunitySchema.safeParse({
+    name: formData.get("name"),
+    description: formData.get("description"),
+    isNsfw: formData.get("isNsfw"),
+  });
+
+  if (!validated.success) {
+    return { error: validated.error.issues[0]?.message ?? "Community could not be created." };
+  }
+
+  const { name, description, isNsfw } = validated.data;
+  const userId = session.user.id;
+
+  try {
+    await prisma.$transaction(async (tx) => {
+      const community = await tx.community.create({
+        data: { name, description, isNsfw, ownerId: userId },
+        select: { id: true },
+      });
+
+      await tx.communityMember.create({
+        data: { userId, communityId: community.id },
+      });
+
+      await tx.communityModerator.create({
+        data: {
+          userId,
+          communityId: community.id,
+          canManageSettings: true,
+          canManagePosts: true,
+          canRestrictUsers: true,
+        },
+      });
+    });
+
+    revalidatePath("/communities");
+    return { success: name };
+  } catch (error) {
+    if (
+      error instanceof Prisma.PrismaClientKnownRequestError &&
+      error.code === "P2002"
+    ) {
+      return { error: "This community name is already taken." };
+    }
+    console.error("createCommunityAction failed", error);
+    return { error: "Something went wrong while creating the community." };
+  }
+}
+
+// ─── Story 3: Join Community ─────────────────────────────────────────────────
+
+export async function joinCommunityAction(
+  communityId: string,
+  communityName: string
+): Promise<CommunityActionResult> {
+  const session = await auth();
+  if (!session?.user?.id) {
+    return { error: "Please log in to join a community." };
+  }
+
+  try {
+    await prisma.communityMember.create({
+      data: { userId: session.user.id, communityId },
+    });
+
+    revalidatePath(`/communities/${communityName}`);
+    return { success: "You have joined the community." };
+  } catch (error) {
+    if (
+      error instanceof Prisma.PrismaClientKnownRequestError &&
+      error.code === "P2002"
+    ) {
+      return { error: "You are already a member of this community." };
+    }
+    console.error("joinCommunityAction failed", error);
+    return { error: "Something went wrong while joining the community." };
+  }
+}
+
+// ─── Story 3: Leave Community ────────────────────────────────────────────────
+
+export async function leaveCommunityAction(
+  communityId: string,
+  communityName: string
+): Promise<CommunityActionResult> {
+  const session = await auth();
+  if (!session?.user?.id) {
+    return { error: "Please log in to leave a community." };
+  }
+
+  const community = await prisma.community.findUnique({
+    where: { id: communityId },
+    select: { ownerId: true },
+  });
+
+  if (!community) {
+    return { error: "Community not found." };
+  }
+
+  if (community.ownerId === session.user.id) {
+    return {
+      error: "You cannot leave a community you own. Transfer ownership or delete it first.",
+    };
+  }
+
+  try {
+    await prisma.communityMember.delete({
+      where: {
+        userId_communityId: { userId: session.user.id, communityId },
+      },
+    });
+
+    revalidatePath(`/communities/${communityName}`);
+    return { success: "You have left the community." };
+  } catch (error) {
+    console.error("leaveCommunityAction failed", error);
+    return { error: "Something went wrong while leaving the community." };
+  }
+}
+
+// ─── Story 2: Add Community Rule ─────────────────────────────────────────────
+
+export async function addRuleAction(
+  formData: FormData
+): Promise<CommunityActionResult> {
+  const session = await auth();
+  if (!session?.user?.id) {
+    return { error: "Please log in to manage community rules." };
+  }
+
+  const validated = AddRuleSchema.safeParse({
+    communityId: formData.get("communityId"),
+    communityName: formData.get("communityName"),
+    title: formData.get("title"),
+    description: formData.get("description"),
+  });
+
+  if (!validated.success) {
+    return { error: validated.error.issues[0]?.message ?? "Rule could not be added." };
+  }
+
+  const { communityId, communityName, title, description } = validated.data;
+
+  const mod = await prisma.communityModerator.findUnique({
+    where: { userId_communityId: { userId: session.user.id, communityId } },
+    select: { canManageSettings: true },
+  });
+
+  if (!mod?.canManageSettings) {
+    return { error: "Unauthorized: you do not have permission to manage rules." };
+  }
+
+  const lastRule = await prisma.communityRule.findFirst({
+    where: { communityId },
+    orderBy: { displayOrder: "desc" },
+    select: { displayOrder: true },
+  });
+
+  const nextOrder = (lastRule?.displayOrder ?? -1) + 1;
+
+  try {
+    await prisma.communityRule.create({
+      data: { communityId, title, description, displayOrder: nextOrder },
+    });
+
+    revalidatePath(`/communities/${communityName}/settings`);
+    revalidatePath(`/communities/${communityName}`);
+    return { success: "Rule added." };
+  } catch (error) {
+    console.error("addRuleAction failed", error);
+    return { error: "Something went wrong while adding the rule." };
+  }
+}
+
+// ─── Story 2: Reorder Rules ───────────────────────────────────────────────────
+
+export async function reorderRulesAction(
+  orderedIds: string[],
+  communityId: string,
+  communityName: string
+): Promise<CommunityActionResult> {
+  const session = await auth();
+  if (!session?.user?.id) {
+    return { error: "Please log in to manage community rules." };
+  }
+
+  const mod = await prisma.communityModerator.findUnique({
+    where: { userId_communityId: { userId: session.user.id, communityId } },
+    select: { canManageSettings: true },
+  });
+
+  if (!mod?.canManageSettings) {
+    return { error: "Unauthorized: you do not have permission to manage rules." };
+  }
+
+  try {
+    await prisma.$transaction(
+      orderedIds.map((id, index) =>
+        prisma.communityRule.updateMany({
+          where: { id, communityId },
+          data: { displayOrder: index },
+        })
+      )
+    );
+
+    revalidatePath(`/communities/${communityName}/settings`);
+    revalidatePath(`/communities/${communityName}`);
+    return { success: "Rules reordered." };
+  } catch (error) {
+    console.error("reorderRulesAction failed", error);
+    return { error: "Something went wrong while reordering rules." };
+  }
+}
+
+// ─── Story 4: Send Community Invite ──────────────────────────────────────────
+
+export async function sendInviteAction(
+  formData: FormData
+): Promise<CommunityActionResult> {
+  const session = await auth();
+  if (!session?.user?.id) {
+    return { error: "Please log in to invite users." };
+  }
+
+  const validated = InviteUserSchema.safeParse({
+    communityId: formData.get("communityId"),
+    communityName: formData.get("communityName"),
+    inviteeUsername: formData.get("inviteeUsername"),
+  });
+
+  if (!validated.success) {
+    return { error: validated.error.issues[0]?.message ?? "Invite could not be sent." };
+  }
+
+  const { communityId, communityName, inviteeUsername } = validated.data;
+  const inviterId = session.user.id;
+
+  const invitee = await prisma.user.findUnique({
+    where: { username: inviteeUsername },
+    select: { id: true },
+  });
+
+  if (!invitee) {
+    return { error: "User not found." };
+  }
+
+  if (invitee.id === inviterId) {
+    return { error: "You cannot invite yourself." };
+  }
+
+  const isMember = await prisma.communityMember.findUnique({
+    where: { userId_communityId: { userId: inviterId, communityId } },
+    select: { userId: true },
+  });
+
+  if (!isMember) {
+    return { error: "You must be a member to invite others." };
+  }
+
+  const alreadyMember = await prisma.communityMember.findUnique({
+    where: { userId_communityId: { userId: invitee.id, communityId } },
+    select: { userId: true },
+  });
+
+  if (alreadyMember) {
+    return { error: "This user is already a member." };
+  }
+
+  const pendingInvite = await prisma.communityInvite.findFirst({
+    where: { communityId, inviteeId: invitee.id, status: InviteStatus.PENDING },
+    select: { id: true },
+  });
+
+  if (pendingInvite) {
+    return { error: "An invite is already pending for this user." };
+  }
+
+  try {
+    await prisma.$transaction(async (tx) => {
+      const invite = await tx.communityInvite.create({
+        data: {
+          communityId,
+          inviterId,
+          inviteeId: invitee.id,
+          status: InviteStatus.PENDING,
+        },
+        select: { id: true },
+      });
+
+      await tx.notification.create({
+        data: {
+          userId: invitee.id,
+          actorId: inviterId,
+          type: NotificationType.COMMUNITY_INVITE,
+          inviteId: invite.id,
+        },
+      });
+    });
+
+    revalidatePath(`/communities/${communityName}`);
+    return { success: `Invite sent to ${inviteeUsername}.` };
+  } catch (error) {
+    console.error("sendInviteAction failed", error);
+    return { error: "Something went wrong while sending the invite." };
+  }
+}
+
+// ─── Story 4: Respond to Invite ───────────────────────────────────────────────
+
+export async function respondToInviteAction(
+  inviteId: string,
+  accept: boolean
+): Promise<CommunityActionResult> {
+  const session = await auth();
+  if (!session?.user?.id) {
+    return { error: "Please log in to respond to invites." };
+  }
+
+  const invite = await prisma.communityInvite.findUnique({
+    where: { id: inviteId },
+    select: { inviteeId: true, communityId: true, status: true },
+  });
+
+  if (!invite) {
+    return { error: "Invite not found." };
+  }
+
+  if (invite.inviteeId !== session.user.id) {
+    return { error: "Unauthorized." };
+  }
+
+  if (invite.status !== InviteStatus.PENDING) {
+    return { error: "This invite has already been responded to." };
+  }
+
+  try {
+    if (accept) {
+      await prisma.$transaction([
+        prisma.communityInvite.update({
+          where: { id: inviteId },
+          data: { status: InviteStatus.ACCEPTED },
+        }),
+        prisma.communityMember.upsert({
+          where: {
+            userId_communityId: {
+              userId: session.user.id,
+              communityId: invite.communityId,
+            },
+          },
+          update: {},
+          create: { userId: session.user.id, communityId: invite.communityId },
+        }),
+      ]);
+    } else {
+      await prisma.communityInvite.update({
+        where: { id: inviteId },
+        data: { status: InviteStatus.REJECTED },
+      });
+    }
+
+    revalidatePath("/communities");
+    return { success: accept ? "You joined the community." : "Invite declined." };
+  } catch (error) {
+    console.error("respondToInviteAction failed", error);
+    return { error: "Something went wrong while responding to the invite." };
+  }
+}
diff --git a/src/app/(main)/communities/[name]/page.tsx b/src/app/(main)/communities/[name]/page.tsx
new file mode 100644
index 0000000..8bcaa77
--- /dev/null
+++ b/src/app/(main)/communities/[name]/page.tsx
@@ -0,0 +1,138 @@
+import { notFound } from "next/navigation";
+import { auth } from "@/auth";
+import { prisma } from "@/lib/prisma";
+import { PostStatus } from "@/generated/prisma/client";
+import { CommunityPageClient } from "@/components/communities/community-page-client";
+
+export const dynamic = "force-dynamic";
+
+type Params = Promise<{ name: string }>;
+type SearchParams = Promise<{ sort?: string }>;
+
+function getPostOrderBy(sort?: string) {
+  if (sort === "top") {
+    return [{ isPinned: "desc" as const }, { upvotes: "desc" as const }];
+  }
+  if (sort === "controversial") {
+    return [{ isPinned: "desc" as const }, { downvotes: "desc" as const }];
+  }
+  return [{ isPinned: "desc" as const }, { createdAt: "desc" as const }];
+}
+
+export default async function CommunityPage({
+  params,
+  searchParams,
+}: {
+  params: Params;
+  searchParams: SearchParams;
+}) {
+  const { name } = await params;
+  const { sort } = await searchParams;
+  const currentSort = ["top", "controversial"].includes(sort ?? "") ? sort! : "new";
+
+  const community = await prisma.community.findUnique({
+    where: { name },
+    include: {
+      rules: { orderBy: { displayOrder: "asc" } },
+      _count: { select: { members: true } },
+    },
+  });
+
+  if (!community) notFound();
+
+  const session = await auth();
+
+  let isMember = false;
+  let canManageSettings = false;
+
+  if (session?.user?.id) {
+    const [membership, modRecord] = await Promise.all([
+      prisma.communityMember.findUnique({
+        where: {
+          userId_communityId: {
+            userId: session.user.id,
+            communityId: community.id,
+          },
+        },
+        select: { userId: true },
+      }),
+      prisma.communityModerator.findUnique({
+        where: {
+          userId_communityId: {
+            userId: session.user.id,
+            communityId: community.id,
+          },
+        },
+        select: { canManageSettings: true },
+      }),
+    ]);
+
+    isMember = !!membership;
+    canManageSettings = modRecord?.canManageSettings ?? false;
+  }
+
+  const [posts, moderators] = await Promise.all([
+    prisma.post.findMany({
+      where: {
+        communityId: community.id,
+        status: PostStatus.PUBLISHED,
+        isDeleted: false,
+      },
+      orderBy: getPostOrderBy(currentSort),
+      include: {
+        user: { select: { username: true, name: true } },
+        flair: { select: { name: true, colorHex: true } },
+        _count: { select: { comments: true } },
+      },
+      take: 25,
+    }),
+    prisma.communityModerator.findMany({
+      where: { communityId: community.id },
+      include: {
+        user: { select: { id: true, username: true, name: true, image: true } },
+      },
+    }),
+  ]);
+
+  return (
+    <CommunityPageClient
+      community={{
+        id: community.id,
+        name: community.name,
+        description: community.description,
+        isNsfw: community.isNsfw,
+        ownerId: community.ownerId,
+        memberCount: community._count.members,
+        rules: community.rules.map((r) => ({
+          id: r.id,
+          title: r.title,
+          description: r.description,
+          displayOrder: r.displayOrder,
+        })),
+        createdAt: community.createdAt.toISOString(),
+      }}
+      posts={posts.map((p) => ({
+        id: p.id,
+        title: p.title,
+        body: p.body,
+        isPinned: p.isPinned,
+        upvotes: p.upvotes,
+        downvotes: p.downvotes,
+        commentCount: p._count.comments,
+        createdAt: p.createdAt.toISOString(),
+        authorHandle: p.user.username || p.user.name || "anonymous",
+        flair: p.flair
+          ? { name: p.flair.name, colorHex: p.flair.colorHex }
+          : null,
+      }))}
+      moderators={moderators.map((m) => ({
+        userId: m.userId,
+        handle: m.user.username || m.user.name || "moderator",
+        image: m.user.image,
+      }))}
+      isMember={isMember}
+      canManageSettings={canManageSettings}
+      currentSort={currentSort}
+    />
+  );
+}
diff --git a/src/app/(main)/communities/[name]/settings/page.tsx b/src/app/(main)/communities/[name]/settings/page.tsx
new file mode 100644
index 0000000..1021965
--- /dev/null
+++ b/src/app/(main)/communities/[name]/settings/page.tsx
@@ -0,0 +1,51 @@
+import { notFound, redirect } from "next/navigation";
+import { auth } from "@/auth";
+import { prisma } from "@/lib/prisma";
+import { RulesSettingsClient } from "@/components/communities/rules-settings-client";
+
+export const dynamic = "force-dynamic";
+
+type Params = Promise<{ name: string }>;
+
+export default async function CommunitySettingsPage({
+  params,
+}: {
+  params: Params;
+}) {
+  const { name } = await params;
+
+  const session = await auth();
+  if (!session?.user?.id) redirect("/login");
+
+  const community = await prisma.community.findUnique({
+    where: { name },
+    select: { id: true, name: true },
+  });
+
+  if (!community) notFound();
+
+  const mod = await prisma.communityModerator.findUnique({
+    where: {
+      userId_communityId: {
+        userId: session.user.id,
+        communityId: community.id,
+      },
+    },
+    select: { canManageSettings: true },
+  });
+
+  if (!mod?.canManageSettings) redirect(`/communities/${name}`);
+
+  const rules = await prisma.communityRule.findMany({
+    where: { communityId: community.id },
+    orderBy: { displayOrder: "asc" },
+    select: { id: true, title: true, description: true, displayOrder: true },
+  });
+
+  return (
+    <RulesSettingsClient
+      community={{ id: community.id, name: community.name }}
+      rules={rules}
+    />
+  );
+}
diff --git a/src/app/(main)/communities/page.tsx b/src/app/(main)/communities/page.tsx
new file mode 100644
index 0000000..344f01c
--- /dev/null
+++ b/src/app/(main)/communities/page.tsx
@@ -0,0 +1,26 @@
+import { prisma } from "@/lib/prisma";
+import { CommunitiesPageClient } from "@/components/communities/communities-page-client";
+
+export const dynamic = "force-dynamic";
+
+export default async function CommunitiesPage() {
+  const communities = await prisma.community.findMany({
+    where: { isUserProfile: false },
+    include: {
+      _count: { select: { members: true } },
+    },
+    orderBy: { createdAt: "desc" },
+    take: 50,
+  });
+
+  const serialized = communities.map((c) => ({
+    id: c.id,
+    name: c.name,
+    description: c.description,
+    isNsfw: c.isNsfw,
+    memberCount: c._count.members,
+    createdAt: c.createdAt.toISOString(),
+  }));
+
+  return <CommunitiesPageClient communities={serialized} />;
+}
diff --git a/src/app/(main)/layout.tsx b/src/app/(main)/layout.tsx
new file mode 100644
index 0000000..177674f
--- /dev/null
+++ b/src/app/(main)/layout.tsx
@@ -0,0 +1,28 @@
+import { auth } from "@/auth";
+import { prisma } from "@/lib/prisma";
+import { AppShell } from "@/components/app-shell";
+
+export default async function MainLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const session = await auth();
+
+  let userCommunities: { name: string }[] = [];
+
+  if (session?.user?.id) {
+    const memberships = await prisma.communityMember.findMany({
+      where: { userId: session.user.id },
+      include: { community: { select: { name: true } } },
+      orderBy: { joinedAt: "desc" },
+      take: 15,
+    });
+
+    userCommunities = memberships.map((m) => ({ name: m.community.name }));
+  }
+
+  return (
+    <AppShell userCommunities={userCommunities}>{children}</AppShell>
+  );
+}
diff --git a/src/app/page.tsx b/src/app/(main)/page.tsx
similarity index 82%
rename from src/app/page.tsx
rename to src/app/(main)/page.tsx
index b25d4d8..648be8f 100644
--- a/src/app/page.tsx
+++ b/src/app/(main)/page.tsx
@@ -2,6 +2,8 @@ import { PostStatus } from "@/generated/prisma/client";
 import { HomePageClient } from "@/components/home-page-client";
 import { prisma } from "@/lib/prisma";
 
+export const dynamic = "force-dynamic";
+
 export default async function HomePage() {
   const posts = await prisma.post.findMany({
     where: {
@@ -40,8 +42,10 @@ export default async function HomePage() {
     downvotes: post.downvotes,
     commentCount: post._count.comments,
     communityName: post.community.name,
-    authorName: post.user.name || post.user.username || post.user.email || "Anonymous",
-    authorHandle: post.user.username || post.user.email?.split("@")[0] || "anonymous",
+    authorName:
+      post.user.name || post.user.username || post.user.email || "Anonymous",
+    authorHandle:
+      post.user.username || post.user.email?.split("@")[0] || "anonymous",
     authorId: post.userId,
   }));
 
diff --git a/src/components/app-shell.tsx b/src/components/app-shell.tsx
new file mode 100644
index 0000000..01f19f5
--- /dev/null
+++ b/src/components/app-shell.tsx
@@ -0,0 +1,252 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { signOut, useSession } from "next-auth/react";
+import {
+  ArrowLeft,
+  Bell,
+  Hash,
+  Home,
+  Mail,
+  Menu,
+  Search,
+  User,
+  Users,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { ModeToggle } from "@/components/ui/mode-toggle";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { cn } from "@/lib/utils";
+
+const NAV_LINKS = [
+  { href: "/", icon: Home, label: "Home" },
+  { href: "/explore", icon: Hash, label: "Explore" },
+  { href: "/notifications", icon: Bell, label: "Notifications" },
+  { href: "/messages", icon: Mail, label: "Messages" },
+  { href: "/communities", icon: Users, label: "Communities" },
+];
+
+function SidebarContent({
+  userCommunities,
+}: {
+  userCommunities: { name: string }[];
+}) {
+  const pathname = usePathname();
+
+  return (
+    <nav className="flex flex-col gap-1 p-3">
+      {NAV_LINKS.map(({ href, icon: Icon, label }) => (
+        <Button
+          key={href}
+          variant={pathname === href ? "secondary" : "ghost"}
+          className="justify-start"
+          asChild
+        >
+          <Link href={href}>
+            <Icon className="mr-3 h-5 w-5" />
+            {label}
+          </Link>
+        </Button>
+      ))}
+
+      {userCommunities.length > 0 && (
+        <div className="mt-4 flex flex-col gap-1">
+          <p className="px-3 py-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+            My Communities
+          </p>
+          {userCommunities.map((c) => (
+            <Button
+              key={c.name}
+              variant={
+                pathname === `/communities/${c.name}` ? "secondary" : "ghost"
+              }
+              className="justify-start truncate"
+              asChild
+            >
+              <Link href={`/communities/${c.name}`}>c/{c.name}</Link>
+            </Button>
+          ))}
+        </div>
+      )}
+    </nav>
+  );
+}
+
+type AppShellProps = {
+  userCommunities: { name: string }[];
+  children: React.ReactNode;
+};
+
+export function AppShell({ userCommunities, children }: AppShellProps) {
+  const { data: session, status } = useSession();
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+  const [isMobileSearchActive, setIsMobileSearchActive] = useState(false);
+
+  return (
+    <div className="flex h-screen w-full flex-col overflow-hidden bg-background">
+      {/* ── Header ── */}
+      {isMobileSearchActive ? (
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4 md:hidden">
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => setIsMobileSearchActive(false)}
+          >
+            <ArrowLeft className="h-5 w-5" />
+          </Button>
+          <Input
+            autoFocus
+            type="search"
+            placeholder="Search posts or users…"
+            className="flex-1 border-none bg-muted/50 shadow-none focus-visible:ring-0"
+          />
+        </header>
+      ) : (
+        <header className="flex h-16 shrink-0 items-center justify-between border-b px-4 md:px-6">
+          {/* Left */}
+          <div className="flex items-center gap-3 md:w-1/3">
+            <Button
+              variant="ghost"
+              size="icon"
+              className="hidden md:flex"
+              onClick={() => setIsSidebarOpen((v) => !v)}
+              aria-label="Toggle sidebar"
+            >
+              <Menu className="h-6 w-6" />
+            </Button>
+
+            {/* Mobile sheet */}
+            <Sheet>
+              <SheetTrigger asChild>
+                <Button variant="ghost" size="icon" className="md:hidden">
+                  <Menu className="h-6 w-6" />
+                </Button>
+              </SheetTrigger>
+              <SheetContent side="left" className="w-[80%] p-0 sm:w-72">
+                <SheetHeader className="border-b p-4 text-left">
+                  <SheetTitle>ArelSocial</SheetTitle>
+                </SheetHeader>
+                <ScrollArea className="h-[calc(100vh-5rem)]">
+                  <SidebarContent userCommunities={userCommunities} />
+                </ScrollArea>
+              </SheetContent>
+            </Sheet>
+
+            <Link
+              href="/"
+              className="text-xl font-bold tracking-tight select-none"
+            >
+              ArelSocial
+            </Link>
+          </div>
+
+          {/* Center — search (desktop) */}
+          <div className="hidden md:flex w-1/3 justify-center">
+            <div className="relative w-full max-w-md">
+              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+              <Input
+                type="search"
+                placeholder="Search posts or users…"
+                className="w-full bg-muted/50 pl-9"
+              />
+            </div>
+          </div>
+
+          {/* Right — actions */}
+          <div className="flex items-center justify-end gap-2 md:w-1/3 md:gap-3">
+            <Button
+              variant="ghost"
+              size="icon"
+              className="md:hidden"
+              onClick={() => setIsMobileSearchActive(true)}
+            >
+              <Search className="h-5 w-5" />
+            </Button>
+
+            <ModeToggle />
+
+            {status === "loading" ? (
+              <div className="h-8 w-8 rounded-full bg-muted animate-pulse" />
+            ) : session?.user ? (
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="ghost" className="h-8 w-8 rounded-full p-0">
+                    <div className="flex h-full w-full items-center justify-center rounded-full bg-primary/20 text-sm font-semibold">
+                      {(
+                        session.user.username?.[0] ||
+                        session.user.email?.[0] ||
+                        session.user.name?.[0] ||
+                        "U"
+                      ).toUpperCase()}
+                    </div>
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent className="w-56" align="end" forceMount>
+                  <div className="flex flex-col gap-0.5 p-2">
+                    <p className="text-sm font-medium leading-none">
+                      {session.user.username || session.user.name || "User"}
+                    </p>
+                    <p className="text-xs text-muted-foreground">
+                      {session.user.email}
+                    </p>
+                  </div>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem
+                    className="cursor-pointer"
+                    onClick={() => signOut()}
+                  >
+                    Log out
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            ) : (
+              <Link href="/login">
+                <Button size="sm">
+                  <User className="mr-2 h-4 w-4 hidden md:block" />
+                  Login
+                </Button>
+              </Link>
+            )}
+          </div>
+        </header>
+      )}
+
+      {/* ── Body ── */}
+      <div className="flex flex-1 overflow-hidden">
+        {/* Desktop sidebar */}
+        <aside
+          className={cn(
+            "hidden border-r bg-muted/10 transition-[width] duration-300 ease-in-out md:block shrink-0 overflow-hidden",
+            isSidebarOpen ? "w-64" : "w-0 border-r-0"
+          )}
+        >
+          <ScrollArea className="h-full w-64">
+            <SidebarContent userCommunities={userCommunities} />
+          </ScrollArea>
+        </aside>
+
+        {/* Page content */}
+        <main className="flex-1 overflow-y-auto">
+          {children}
+        </main>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/communities/communities-page-client.tsx b/src/components/communities/communities-page-client.tsx
new file mode 100644
index 0000000..77c3b1e
--- /dev/null
+++ b/src/components/communities/communities-page-client.tsx
@@ -0,0 +1,104 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { Users, Plus, ShieldAlert } from "lucide-react";
+import { useSession } from "next-auth/react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+import { CreateCommunityForm } from "@/components/communities/create-community-form";
+
+type CommunityItem = {
+  id: string;
+  name: string;
+  description: string | null;
+  isNsfw: boolean;
+  memberCount: number;
+  createdAt: string;
+};
+
+type CommunitiesPageClientProps = {
+  communities: CommunityItem[];
+};
+
+export function CommunitiesPageClient({ communities }: CommunitiesPageClientProps) {
+  const { data: session } = useSession();
+  const [isSheetOpen, setIsSheetOpen] = useState(false);
+
+  return (
+    <div className="mx-auto max-w-3xl px-4 py-8">
+      {/* Header row */}
+      <div className="mb-6 flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-semibold">Communities</h1>
+          <p className="mt-1 text-sm text-muted-foreground">
+            Discover spaces to discuss what you care about.
+          </p>
+        </div>
+        {session?.user && (
+          <Sheet open={isSheetOpen} onOpenChange={setIsSheetOpen}>
+            <SheetTrigger asChild>
+              <Button size="sm">
+                <Plus className="mr-2 h-4 w-4" />
+                Create
+              </Button>
+            </SheetTrigger>
+            <SheetContent side="right" className="w-full sm:max-w-md">
+              <SheetHeader>
+                <SheetTitle>Create a Community</SheetTitle>
+              </SheetHeader>
+              <div className="mt-6 px-1">
+                <CreateCommunityForm onSuccess={() => setIsSheetOpen(false)} />
+              </div>
+            </SheetContent>
+          </Sheet>
+        )}
+      </div>
+
+      {/* List */}
+      {communities.length === 0 ? (
+        <div className="flex flex-col items-center justify-center py-24 text-center text-muted-foreground gap-3">
+          <Users className="h-10 w-10 opacity-40" />
+          <p className="text-sm">No communities yet. Be the first to create one!</p>
+        </div>
+      ) : (
+        <div className="flex flex-col gap-3">
+          {communities.map((community) => (
+            <Link key={community.id} href={`/communities/${community.name}`}>
+              <Card className="hover:bg-muted/50 transition-colors cursor-pointer">
+                <CardHeader className="pb-2">
+                  <CardTitle className="flex items-center gap-2 text-base font-semibold">
+                    c/{community.name}
+                    {community.isNsfw && (
+                      <span className="flex items-center gap-1 rounded border border-destructive/30 px-1.5 py-0.5 text-xs font-medium text-destructive">
+                        <ShieldAlert className="h-3 w-3" /> NSFW
+                      </span>
+                    )}
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="pt-0">
+                  {community.description && (
+                    <p className="mb-2 text-sm text-muted-foreground line-clamp-2">
+                      {community.description}
+                    </p>
+                  )}
+                  <p className="text-xs text-muted-foreground">
+                    {community.memberCount.toLocaleString()}{" "}
+                    {community.memberCount === 1 ? "member" : "members"}
+                  </p>
+                </CardContent>
+              </Card>
+            </Link>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/communities/community-page-client.tsx b/src/components/communities/community-page-client.tsx
new file mode 100644
index 0000000..40f875b
--- /dev/null
+++ b/src/components/communities/community-page-client.tsx
@@ -0,0 +1,485 @@
+"use client";
+
+import { useState, useTransition } from "react";
+import Link from "next/link";
+import { useRouter, usePathname } from "next/navigation";
+import { useSession } from "next-auth/react";
+import {
+  ChevronUp,
+  ChevronDown,
+  MessageSquare,
+  Pin,
+  Settings,
+  ShieldAlert,
+  Users,
+  Flame,
+  TrendingUp,
+  Clock,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { InviteUserForm } from "@/components/communities/invite-user-form";
+import { joinCommunityAction, leaveCommunityAction } from "@/actions/communities";
+import { cn } from "@/lib/utils";
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+type Rule = {
+  id: string;
+  title: string;
+  description: string | null;
+  displayOrder: number;
+};
+
+type CommunityPost = {
+  id: string;
+  title: string;
+  body: string | null;
+  isPinned: boolean;
+  upvotes: number;
+  downvotes: number;
+  commentCount: number;
+  createdAt: string;
+  authorHandle: string;
+  flair: { name: string; colorHex: string | null } | null;
+};
+
+type Moderator = {
+  userId: string;
+  handle: string;
+  image: string | null;
+};
+
+type CommunityPageClientProps = {
+  community: {
+    id: string;
+    name: string;
+    description: string | null;
+    isNsfw: boolean;
+    ownerId: string;
+    memberCount: number;
+    rules: Rule[];
+    createdAt: string;
+  };
+  posts: CommunityPost[];
+  moderators: Moderator[];
+  isMember: boolean;
+  canManageSettings: boolean;
+  currentSort: string;
+};
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function formatRelativeDate(dateString: string) {
+  const date = new Date(dateString);
+  const diffMs = Date.now() - date.getTime();
+  const diffMinutes = Math.max(1, Math.floor(diffMs / (1000 * 60)));
+  if (diffMinutes < 60) return `${diffMinutes}m ago`;
+  const diffHours = Math.floor(diffMinutes / 60);
+  if (diffHours < 24) return `${diffHours}h ago`;
+  const diffDays = Math.floor(diffHours / 24);
+  if (diffDays < 7) return `${diffDays}d ago`;
+  return new Intl.DateTimeFormat("en", {
+    day: "numeric",
+    month: "short",
+    year: "numeric",
+  }).format(date);
+}
+
+// ─── Sort tabs ────────────────────────────────────────────────────────────────
+
+const SORT_OPTIONS = [
+  { key: "new", label: "New", icon: Clock },
+  { key: "top", label: "Top", icon: TrendingUp },
+  { key: "controversial", label: "Controversial", icon: Flame },
+] as const;
+
+function SortTabs({
+  currentSort,
+  communityName,
+}: {
+  currentSort: string;
+  communityName: string;
+}) {
+  const router = useRouter();
+  const pathname = usePathname();
+
+  return (
+    <div className="flex items-center gap-1 rounded-xl border border-border bg-muted/30 p-1">
+      {SORT_OPTIONS.map(({ key, label, icon: Icon }) => (
+        <button
+          key={key}
+          onClick={() =>
+            router.push(`${pathname}?sort=${key}`, { scroll: false })
+          }
+          className={cn(
+            "flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium transition-colors",
+            currentSort === key
+              ? "bg-background shadow-sm text-foreground"
+              : "text-muted-foreground hover:text-foreground"
+          )}
+        >
+          <Icon className="h-3.5 w-3.5" />
+          {label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+// ─── Post card ────────────────────────────────────────────────────────────────
+
+function CommunityPostCard({ post }: { post: CommunityPost }) {
+  const score = post.upvotes - post.downvotes;
+
+  return (
+    <article
+      className={cn(
+        "group flex gap-0 overflow-hidden rounded-xl border border-border bg-card transition-colors hover:border-border/80 hover:bg-muted/20",
+        post.isPinned && "border-primary/25 bg-primary/[0.03]"
+      )}
+    >
+      {/* Vote column */}
+      <div className="flex w-10 shrink-0 flex-col items-center gap-0.5 bg-muted/30 py-3 px-1">
+        <button
+          className="rounded p-0.5 text-muted-foreground transition-colors hover:bg-primary/10 hover:text-primary"
+          aria-label="Upvote"
+        >
+          <ChevronUp className="h-4 w-4" />
+        </button>
+        <span
+          className={cn(
+            "text-xs font-semibold tabular-nums",
+            score > 0
+              ? "text-primary"
+              : score < 0
+              ? "text-destructive"
+              : "text-muted-foreground"
+          )}
+        >
+          {score}
+        </span>
+        <button
+          className="rounded p-0.5 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive"
+          aria-label="Downvote"
+        >
+          <ChevronDown className="h-4 w-4" />
+        </button>
+      </div>
+
+      {/* Content */}
+      <div className="flex flex-1 flex-col gap-1.5 p-3 min-w-0">
+        {/* Pinned badge */}
+        {post.isPinned && (
+          <div className="flex items-center gap-1 text-xs font-medium text-primary">
+            <Pin className="h-3 w-3" />
+            Pinned
+          </div>
+        )}
+
+        {/* Meta row */}
+        <div className="flex flex-wrap items-center gap-1.5 text-xs text-muted-foreground">
+          <span>u/{post.authorHandle}</span>
+          <span>·</span>
+          <span>{formatRelativeDate(post.createdAt)}</span>
+          {post.flair && (
+            <>
+              <span>·</span>
+              <span
+                className="rounded-full px-2 py-0.5 text-xs font-medium text-white"
+                style={{
+                  backgroundColor: post.flair.colorHex ?? "#64748b",
+                }}
+              >
+                {post.flair.name}
+              </span>
+            </>
+          )}
+        </div>
+
+        {/* Title */}
+        <h3 className="text-sm font-semibold leading-snug text-foreground">
+          {post.title}
+        </h3>
+
+        {/* Body preview */}
+        {post.body && (
+          <p className="text-xs text-muted-foreground line-clamp-2 leading-relaxed">
+            {post.body}
+          </p>
+        )}
+
+        {/* Footer */}
+        <div className="mt-1 flex items-center gap-3 text-xs text-muted-foreground">
+          <span className="flex items-center gap-1">
+            <MessageSquare className="h-3.5 w-3.5" />
+            {post.commentCount} {post.commentCount === 1 ? "comment" : "comments"}
+          </span>
+        </div>
+      </div>
+    </article>
+  );
+}
+
+// ─── Right info panel ─────────────────────────────────────────────────────────
+
+function InfoPanel({
+  community,
+  moderators,
+  canManageSettings,
+}: {
+  community: CommunityPageClientProps["community"];
+  moderators: Moderator[];
+  canManageSettings: boolean;
+}) {
+  const createdAt = new Intl.DateTimeFormat("en", {
+    month: "long",
+    year: "numeric",
+  }).format(new Date(community.createdAt));
+
+  return (
+    <div className="flex flex-col gap-4">
+      {/* About card */}
+      <div className="rounded-xl border border-border bg-card overflow-hidden">
+        <div className="border-b bg-muted/30 px-4 py-3">
+          <h2 className="text-sm font-semibold">About c/{community.name}</h2>
+        </div>
+        <div className="p-4 text-sm space-y-3">
+          {community.description && (
+            <p className="text-muted-foreground leading-relaxed">
+              {community.description}
+            </p>
+          )}
+          <div className="flex items-center gap-2 text-muted-foreground">
+            <Users className="h-4 w-4 shrink-0" />
+            <span>
+              <strong className="text-foreground font-semibold">
+                {community.memberCount.toLocaleString()}
+              </strong>{" "}
+              {community.memberCount === 1 ? "member" : "members"}
+            </span>
+          </div>
+          <p className="text-xs text-muted-foreground">Created {createdAt}</p>
+          {canManageSettings && (
+            <Button variant="outline" size="sm" className="w-full mt-1" asChild>
+              <Link href={`/communities/${community.name}/settings`}>
+                <Settings className="h-3.5 w-3.5 mr-2" />
+                Manage Community
+              </Link>
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {/* Rules card */}
+      {community.rules.length > 0 && (
+        <div className="rounded-xl border border-border bg-card overflow-hidden">
+          <div className="border-b bg-muted/30 px-4 py-3">
+            <h2 className="text-sm font-semibold">Community Rules</h2>
+          </div>
+          <div className="divide-y divide-border">
+            {community.rules.map((rule, index) => (
+              <div key={rule.id} className="px-4 py-3">
+                <p className="text-sm font-medium text-foreground">
+                  {index + 1}. {rule.title}
+                </p>
+                {rule.description && (
+                  <p className="mt-1 text-xs text-muted-foreground leading-relaxed">
+                    {rule.description}
+                  </p>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Moderators card */}
+      {moderators.length > 0 && (
+        <div className="rounded-xl border border-border bg-card overflow-hidden">
+          <div className="border-b bg-muted/30 px-4 py-3">
+            <h2 className="text-sm font-semibold">Moderators</h2>
+          </div>
+          <div className="divide-y divide-border">
+            {moderators.map((mod) => (
+              <div
+                key={mod.userId}
+                className="flex items-center gap-3 px-4 py-2.5"
+              >
+                <div className="h-7 w-7 shrink-0 rounded-full bg-primary/15 flex items-center justify-center text-xs font-semibold text-primary overflow-hidden">
+                  {mod.image ? (
+                    // eslint-disable-next-line @next/next/no-img-element
+                    <img
+                      src={mod.image}
+                      alt=""
+                      className="h-full w-full object-cover"
+                    />
+                  ) : (
+                    mod.handle[0]?.toUpperCase() ?? "M"
+                  )}
+                </div>
+                <span className="text-sm text-foreground">
+                  u/{mod.handle}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── Main component ───────────────────────────────────────────────────────────
+
+export function CommunityPageClient({
+  community,
+  posts,
+  moderators,
+  isMember,
+  canManageSettings,
+  currentSort,
+}: CommunityPageClientProps) {
+  const { data: session } = useSession();
+  const [memberState, setMemberState] = useState(isMember);
+  const [actionMessage, setActionMessage] = useState<string | null>(null);
+  const [isPending, startTransition] = useTransition();
+
+  const isOwner = session?.user?.id === community.ownerId;
+
+  function handleJoinLeave() {
+    const joining = !memberState;
+    setMemberState(joining);
+    setActionMessage(null);
+
+    startTransition(async () => {
+      const result = joining
+        ? await joinCommunityAction(community.id, community.name)
+        : await leaveCommunityAction(community.id, community.name);
+
+      if (result.error) {
+        setMemberState(!joining);
+        setActionMessage(result.error);
+      }
+    });
+  }
+
+  const pinnedPosts = posts.filter((p) => p.isPinned);
+  const regularPosts = posts.filter((p) => !p.isPinned);
+
+  return (
+    <div className="min-h-full">
+      {/* ── Community banner + header ── */}
+      <div className="h-24 bg-gradient-to-r from-primary/20 via-primary/10 to-transparent" />
+
+      <div className="border-b border-border bg-card/80 backdrop-blur-sm">
+        <div className="mx-auto max-w-screen-xl px-4 py-4 md:px-6">
+          <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+            {/* Community identity */}
+            <div className="flex flex-col gap-1">
+              <div className="flex items-center gap-2 flex-wrap">
+                <h1 className="text-2xl font-bold tracking-tight">
+                  c/{community.name}
+                </h1>
+                {community.isNsfw && (
+                  <span className="flex items-center gap-1 rounded border border-destructive/30 px-1.5 py-0.5 text-xs font-medium text-destructive">
+                    <ShieldAlert className="h-3 w-3" />
+                    NSFW
+                  </span>
+                )}
+              </div>
+              <div className="flex items-center gap-3 text-sm text-muted-foreground">
+                <span className="flex items-center gap-1">
+                  <Users className="h-3.5 w-3.5" />
+                  {community.memberCount.toLocaleString()}{" "}
+                  {community.memberCount === 1 ? "member" : "members"}
+                </span>
+              </div>
+              {community.description && (
+                <p className="mt-1 max-w-xl text-sm text-muted-foreground">
+                  {community.description}
+                </p>
+              )}
+              {actionMessage && (
+                <p className="text-sm text-destructive">{actionMessage}</p>
+              )}
+            </div>
+
+            {/* Join / Leave */}
+            {session?.user ? (
+              !isOwner && (
+                <Button
+                  variant={memberState ? "outline" : "default"}
+                  onClick={handleJoinLeave}
+                  disabled={isPending}
+                  className="shrink-0 self-start sm:self-auto"
+                >
+                  {memberState ? "Leave" : "Join"}
+                </Button>
+              )
+            ) : (
+              <Button asChild className="shrink-0 self-start sm:self-auto">
+                <Link href="/login">Join</Link>
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* ── Main content ── */}
+      <div className="mx-auto max-w-screen-xl px-4 py-6 md:px-6">
+        <div className="grid grid-cols-1 gap-6 lg:grid-cols-[1fr_320px]">
+          {/* ── Feed column ── */}
+          <div className="flex flex-col gap-4 min-w-0">
+            {/* Sort tabs */}
+            <SortTabs currentSort={currentSort} communityName={community.name} />
+
+            {/* Pinned posts */}
+            {pinnedPosts.map((post) => (
+              <CommunityPostCard key={post.id} post={post} />
+            ))}
+
+            {/* Regular posts */}
+            {regularPosts.length > 0 ? (
+              regularPosts.map((post) => (
+                <CommunityPostCard key={post.id} post={post} />
+              ))
+            ) : pinnedPosts.length === 0 ? (
+              <div className="flex flex-col items-center justify-center rounded-xl border border-dashed border-border py-16 text-center text-muted-foreground gap-2">
+                <MessageSquare className="h-8 w-8 opacity-30" />
+                <p className="text-sm">No posts yet — be the first to share something.</p>
+              </div>
+            ) : null}
+
+            {/* Invite form — members only */}
+            {session?.user && memberState && (
+              <InviteUserForm
+                communityId={community.id}
+                communityName={community.name}
+              />
+            )}
+          </div>
+
+          {/* ── Info panel ── */}
+          <aside className="hidden lg:block">
+            <div className="sticky top-6">
+              <InfoPanel
+                community={community}
+                moderators={moderators}
+                canManageSettings={canManageSettings}
+              />
+            </div>
+          </aside>
+
+          {/* Mobile info panel (below feed) */}
+          <div className="lg:hidden">
+            <InfoPanel
+              community={community}
+              moderators={moderators}
+              canManageSettings={canManageSettings}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/communities/create-community-form.tsx b/src/components/communities/create-community-form.tsx
new file mode 100644
index 0000000..1427ae6
--- /dev/null
+++ b/src/components/communities/create-community-form.tsx
@@ -0,0 +1,98 @@
+"use client";
+
+import { useTransition, useState } from "react";
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { createCommunityAction } from "@/actions/communities";
+
+export function CreateCommunityForm({ onSuccess }: { onSuccess?: () => void }) {
+  const router = useRouter();
+  const [isPending, startTransition] = useTransition();
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [isNsfw, setIsNsfw] = useState(false);
+  const [statusMessage, setStatusMessage] = useState<{ type: "error" | "success"; text: string } | null>(null);
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setStatusMessage(null);
+
+    const formData = new FormData();
+    formData.set("name", name);
+    formData.set("description", description);
+    if (isNsfw) formData.set("isNsfw", "on");
+
+    startTransition(async () => {
+      const result = await createCommunityAction(formData);
+      if (result.error) {
+        setStatusMessage({ type: "error", text: result.error });
+        return;
+      }
+      // success contains the community name
+      onSuccess?.();
+      router.push(`/communities/${result.success}`);
+    });
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="flex flex-col gap-5">
+      <div className="flex flex-col gap-1.5">
+        <div className="flex items-center justify-between">
+          <Label htmlFor="community-name">Name</Label>
+          <span className="text-xs text-muted-foreground">{name.length}/21</span>
+        </div>
+        <Input
+          id="community-name"
+          value={name}
+          onChange={(e) => setName(e.target.value.slice(0, 21))}
+          placeholder="community_name"
+          disabled={isPending}
+          required
+        />
+        <p className="text-xs text-muted-foreground">Letters, numbers, and underscores only.</p>
+      </div>
+
+      <div className="flex flex-col gap-1.5">
+        <div className="flex items-center justify-between">
+          <Label htmlFor="community-description">Description <span className="text-muted-foreground">(optional)</span></Label>
+          <span className="text-xs text-muted-foreground">{description.length}/500</span>
+        </div>
+        <textarea
+          id="community-description"
+          value={description}
+          onChange={(e) => setDescription(e.target.value.slice(0, 500))}
+          placeholder="What is this community about?"
+          disabled={isPending}
+          rows={3}
+          className="w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:opacity-50 resize-none"
+        />
+      </div>
+
+      <div className="flex items-center gap-3">
+        <input
+          id="community-nsfw"
+          type="checkbox"
+          checked={isNsfw}
+          onChange={(e) => setIsNsfw(e.target.checked)}
+          disabled={isPending}
+          className="h-4 w-4 rounded border-input accent-primary"
+        />
+        <Label htmlFor="community-nsfw" className="cursor-pointer">
+          Mark as NSFW
+        </Label>
+      </div>
+
+      {statusMessage && (
+        <p className={`text-sm ${statusMessage.type === "error" ? "text-destructive" : "text-green-600 dark:text-green-400"}`}>
+          {statusMessage.text}
+        </p>
+      )}
+
+      <Button type="submit" disabled={isPending || name.trim().length < 3}>
+        {isPending ? "Creating…" : "Create Community"}
+      </Button>
+    </form>
+  );
+}
diff --git a/src/components/communities/invite-user-form.tsx b/src/components/communities/invite-user-form.tsx
new file mode 100644
index 0000000..d97f8e7
--- /dev/null
+++ b/src/components/communities/invite-user-form.tsx
@@ -0,0 +1,60 @@
+"use client";
+
+import { useTransition, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { sendInviteAction } from "@/actions/communities";
+
+type InviteUserFormProps = {
+  communityId: string;
+  communityName: string;
+};
+
+export function InviteUserForm({ communityId, communityName }: InviteUserFormProps) {
+  const [isPending, startTransition] = useTransition();
+  const [inviteeUsername, setInviteeUsername] = useState("");
+  const [message, setMessage] = useState<{ type: "error" | "success"; text: string } | null>(null);
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setMessage(null);
+
+    const formData = new FormData();
+    formData.set("communityId", communityId);
+    formData.set("communityName", communityName);
+    formData.set("inviteeUsername", inviteeUsername);
+
+    startTransition(async () => {
+      const result = await sendInviteAction(formData);
+      if (result.error) {
+        setMessage({ type: "error", text: result.error });
+        return;
+      }
+      setMessage({ type: "success", text: result.success ?? "Invite sent." });
+      setInviteeUsername("");
+    });
+  }
+
+  return (
+    <div className="rounded-lg border border-border p-4">
+      <h3 className="text-sm font-semibold mb-3">Invite a User</h3>
+      <form onSubmit={handleSubmit} className="flex gap-2">
+        <Input
+          value={inviteeUsername}
+          onChange={(e) => setInviteeUsername(e.target.value)}
+          placeholder="Username"
+          disabled={isPending}
+          className="flex-1"
+        />
+        <Button type="submit" size="sm" disabled={isPending || !inviteeUsername.trim()}>
+          {isPending ? "Sending…" : "Invite"}
+        </Button>
+      </form>
+      {message && (
+        <p className={`mt-2 text-xs ${message.type === "error" ? "text-destructive" : "text-green-600 dark:text-green-400"}`}>
+          {message.text}
+        </p>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/communities/rules-settings-client.tsx b/src/components/communities/rules-settings-client.tsx
new file mode 100644
index 0000000..55f7d8a
--- /dev/null
+++ b/src/components/communities/rules-settings-client.tsx
@@ -0,0 +1,172 @@
+"use client";
+
+import { useTransition, useState } from "react";
+import { ChevronUp, ChevronDown } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { addRuleAction, reorderRulesAction } from "@/actions/communities";
+
+type Rule = {
+  id: string;
+  title: string;
+  description: string | null;
+  displayOrder: number;
+};
+
+type RulesSettingsClientProps = {
+  community: { id: string; name: string };
+  rules: Rule[];
+};
+
+export function RulesSettingsClient({ community, rules: initialRules }: RulesSettingsClientProps) {
+  const [rules, setRules] = useState<Rule[]>(initialRules);
+  const [newTitle, setNewTitle] = useState("");
+  const [newDescription, setNewDescription] = useState("");
+  const [addMessage, setAddMessage] = useState<{ type: "error" | "success"; text: string } | null>(null);
+  const [isAddPending, startAddTransition] = useTransition();
+  const [isReorderPending, startReorderTransition] = useTransition();
+
+  function handleAddRule(e: React.FormEvent) {
+    e.preventDefault();
+    setAddMessage(null);
+
+    const formData = new FormData();
+    formData.set("communityId", community.id);
+    formData.set("communityName", community.name);
+    formData.set("title", newTitle);
+    formData.set("description", newDescription);
+
+    startAddTransition(async () => {
+      const result = await addRuleAction(formData);
+      if (result.error) {
+        setAddMessage({ type: "error", text: result.error });
+        return;
+      }
+      setAddMessage({ type: "success", text: result.success ?? "Rule added." });
+      setNewTitle("");
+      setNewDescription("");
+    });
+  }
+
+  function moveRule(index: number, direction: "up" | "down") {
+    const swap = direction === "up" ? index - 1 : index + 1;
+    if (swap < 0 || swap >= rules.length) return;
+
+    const newRules = [...rules];
+    [newRules[index], newRules[swap]] = [newRules[swap], newRules[index]];
+    setRules(newRules);
+
+    startReorderTransition(async () => {
+      const result = await reorderRulesAction(
+        newRules.map((r) => r.id),
+        community.id,
+        community.name
+      );
+      if (result.error) {
+        // revert on failure
+        setRules(rules);
+      }
+    });
+  }
+
+  return (
+    <div className="mx-auto max-w-2xl px-4 py-8">
+        <h1 className="text-xl font-semibold mb-1">Manage Rules</h1>
+        <p className="text-sm text-muted-foreground mb-8">c/{community.name}</p>
+
+        {/* Add Rule form */}
+        <section className="mb-8">
+          <h2 className="text-sm font-semibold mb-4 uppercase tracking-wide text-muted-foreground">
+            Add a Rule
+          </h2>
+          <form onSubmit={handleAddRule} className="flex flex-col gap-4 rounded-xl border border-border p-5">
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor="rule-title">Title <span className="text-destructive">*</span></Label>
+              <Input
+                id="rule-title"
+                value={newTitle}
+                onChange={(e) => setNewTitle(e.target.value.slice(0, 100))}
+                placeholder="e.g. Be respectful"
+                disabled={isAddPending}
+                required
+              />
+            </div>
+
+            <div className="flex flex-col gap-1.5">
+              <div className="flex items-center justify-between">
+                <Label htmlFor="rule-description">
+                  Description <span className="text-muted-foreground">(optional)</span>
+                </Label>
+                <span className="text-xs text-muted-foreground">{newDescription.length}/500</span>
+              </div>
+              <textarea
+                id="rule-description"
+                value={newDescription}
+                onChange={(e) => setNewDescription(e.target.value.slice(0, 500))}
+                placeholder="Elaborate on the rule…"
+                disabled={isAddPending}
+                rows={2}
+                className="w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:opacity-50 resize-none"
+              />
+            </div>
+
+            {addMessage && (
+              <p className={`text-sm ${addMessage.type === "error" ? "text-destructive" : "text-green-600 dark:text-green-400"}`}>
+                {addMessage.text}
+              </p>
+            )}
+
+            <Button type="submit" disabled={isAddPending || !newTitle.trim()} className="self-start">
+              {isAddPending ? "Adding…" : "Add Rule"}
+            </Button>
+          </form>
+        </section>
+
+        {/* Existing rules */}
+        {rules.length > 0 && (
+          <section>
+            <h2 className="text-sm font-semibold mb-4 uppercase tracking-wide text-muted-foreground">
+              Current Rules
+            </h2>
+            <div className="rounded-xl border border-border divide-y divide-border">
+              {rules.map((rule, index) => (
+                <div key={rule.id} className="flex items-start gap-3 px-4 py-3">
+                  <div className="flex flex-col gap-1 shrink-0">
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-6 w-6"
+                      onClick={() => moveRule(index, "up")}
+                      disabled={index === 0 || isReorderPending}
+                      aria-label="Move rule up"
+                    >
+                      <ChevronUp className="h-4 w-4" />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-6 w-6"
+                      onClick={() => moveRule(index, "down")}
+                      disabled={index === rules.length - 1 || isReorderPending}
+                      aria-label="Move rule down"
+                    >
+                      <ChevronDown className="h-4 w-4" />
+                    </Button>
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm font-medium">
+                      {index + 1}. {rule.title}
+                    </p>
+                    {rule.description && (
+                      <p className="mt-0.5 text-xs text-muted-foreground">{rule.description}</p>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </section>
+        )}
+    </div>
+  );
+}
diff --git a/src/components/home-page-client.tsx b/src/components/home-page-client.tsx
index f9beccb..12560d4 100644
--- a/src/components/home-page-client.tsx
+++ b/src/components/home-page-client.tsx
@@ -1,20 +1,11 @@
 "use client";
 
 import { startTransition, useEffect, useRef, useState, useTransition } from "react";
-import Link from "next/link";
-import { signOut, useSession } from "next-auth/react";
+import { useSession } from "next-auth/react";
 import {
-  ArrowLeft,
-  Bell,
   ChevronDown,
   Ellipsis,
-  Hash,
-  Home,
-  Mail,
-  Menu,
   MessageSquare,
-  Search,
-  User,
   X,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
@@ -27,9 +18,6 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
-import { ModeToggle } from "@/components/ui/mode-toggle";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
 import {
   createPostAction,
   deletePostAction,
@@ -51,31 +39,6 @@ type FeedPost = {
   authorId: string;
 };
 
-const SidebarNavLinks = () => (
-  <nav className="flex flex-col space-y-2 p-4">
-    <Button variant="ghost" className="justify-start">
-      <Home className="mr-3 h-5 w-5" /> Home
-    </Button>
-    <Button variant="ghost" className="justify-start">
-      <Hash className="mr-3 h-5 w-5" /> Explore
-    </Button>
-    <Button variant="ghost" className="justify-start">
-      <Bell className="mr-3 h-5 w-5" /> Notifications
-    </Button>
-    <Button variant="ghost" className="justify-start">
-      <Mail className="mr-3 h-5 w-5" /> Messages
-    </Button>
-
-    <div className="mt-8 space-y-2">
-      <p className="px-4 text-xs font-semibold text-muted-foreground">DISCOVER</p>
-      <div className="space-y-2 px-4 text-sm text-muted-foreground">
-        <p>See what people are posting right now.</p>
-        <p>Scroll the feed and jump in when you want to share something.</p>
-      </div>
-    </div>
-  </nav>
-);
-
 function formatRelativeDate(dateString: string) {
   const date = new Date(dateString);
   const diffMs = Date.now() - date.getTime();
@@ -102,7 +65,10 @@ function PostComposer() {
   const [isExpanded, setIsExpanded] = useState(false);
   const [isMobileComposerOpen, setIsMobileComposerOpen] = useState(false);
   const [isMobileViewport, setIsMobileViewport] = useState(false);
-  const [statusMessage, setStatusMessage] = useState<{ type: "error" | "success"; text: string } | null>(null);
+  const [statusMessage, setStatusMessage] = useState<{
+    type: "error" | "success";
+    text: string;
+  } | null>(null);
   const [title, setTitle] = useState("");
   const [body, setBody] = useState("");
   const [isPending, startPostTransition] = useTransition();
@@ -113,23 +79,17 @@ function PostComposer() {
     const syncViewport = (event?: MediaQueryListEvent) => {
       const matches = event?.matches ?? mediaQuery.matches;
       setIsMobileViewport(matches);
-      if (matches) {
-        setIsExpanded(false);
-      } else {
-        setIsMobileComposerOpen(false);
-      }
+      if (matches) setIsExpanded(false);
+      else setIsMobileComposerOpen(false);
     };
 
     syncViewport();
     mediaQuery.addEventListener("change", syncViewport);
-
     return () => mediaQuery.removeEventListener("change", syncViewport);
   }, []);
 
   useEffect(() => {
-    if (!isExpanded || isMobileViewport) {
-      return;
-    }
+    if (!isExpanded || isMobileViewport) return;
 
     const handlePointerDown = (event: MouseEvent) => {
       if (!composerRef.current?.contains(event.target as Node)) {
@@ -138,7 +98,6 @@ function PostComposer() {
     };
 
     document.addEventListener("mousedown", handlePointerDown);
-
     return () => document.removeEventListener("mousedown", handlePointerDown);
   }, [isExpanded, isMobileViewport]);
 
@@ -159,13 +118,13 @@ function PostComposer() {
 
       setTitle("");
       setBody("");
-      setStatusMessage({ type: "success", text: result.success ?? "Post published." });
+      setStatusMessage({
+        type: "success",
+        text: result.success ?? "Post published.",
+      });
 
-      if (options?.closeMobileComposer) {
-        setIsMobileComposerOpen(false);
-      } else {
-        setIsExpanded(false);
-      }
+      if (options?.closeMobileComposer) setIsMobileComposerOpen(false);
+      else setIsExpanded(false);
     });
   }
 
@@ -173,14 +132,19 @@ function PostComposer() {
     "flex min-h-32 w-full rounded-xl border border-sky-200/70 bg-background/80 px-3 py-3 text-sm shadow-xs outline-none transition-colors placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/20 disabled:cursor-not-allowed disabled:opacity-50 dark:border-sky-900/60";
 
   const messageBlock = statusMessage ? (
-    <p className={cn("text-sm", statusMessage.type === "error" ? "text-destructive" : "text-emerald-600 dark:text-emerald-400")}>
+    <p
+      className={cn(
+        "text-sm",
+        statusMessage.type === "error"
+          ? "text-destructive"
+          : "text-emerald-600 dark:text-emerald-400"
+      )}
+    >
       {statusMessage.text}
     </p>
   ) : null;
 
-  if (!session?.user) {
-    return null;
-  }
+  if (!session?.user) return null;
 
   return (
     <>
@@ -189,7 +153,12 @@ function PostComposer() {
           <CardHeader className="border-b border-sky-200/70 dark:border-sky-900/60">
             <div className="flex items-center gap-3">
               <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-primary/15 text-sm font-semibold text-primary">
-                {(session.user.username?.[0] || session.user.email?.[0] || session.user.name?.[0] || "U").toUpperCase()}
+                {(
+                  session.user.username?.[0] ||
+                  session.user.email?.[0] ||
+                  session.user.name?.[0] ||
+                  "U"
+                ).toUpperCase()}
               </div>
               <div className="flex-1 space-y-1">
                 <CardTitle>Create a post</CardTitle>
@@ -197,9 +166,7 @@ function PostComposer() {
                   value={title}
                   onChange={(event) => {
                     setTitle(event.target.value);
-                    if (!isMobileViewport) {
-                      setIsExpanded(true);
-                    }
+                    if (!isMobileViewport) setIsExpanded(true);
                   }}
                   onFocus={() => {
                     setStatusMessage(null);
@@ -219,13 +186,15 @@ function PostComposer() {
           <div
             className={cn(
               "grid transition-all duration-200 ease-out",
-              isExpanded ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
+              isExpanded
+                ? "grid-rows-[1fr] opacity-100"
+                : "grid-rows-[0fr] opacity-0"
             )}
           >
             <div className="overflow-hidden">
               <form
-                onSubmit={(event) => {
-                  event.preventDefault();
+                onSubmit={(e) => {
+                  e.preventDefault();
                   void submitPost();
                 }}
               >
@@ -233,7 +202,7 @@ function PostComposer() {
                   <textarea
                     name="body"
                     value={body}
-                    onChange={(event) => setBody(event.target.value)}
+                    onChange={(e) => setBody(e.target.value)}
                     placeholder="Add some details if you want."
                     disabled={isPending}
                     maxLength={2000}
@@ -254,8 +223,11 @@ function PostComposer() {
                       <ChevronDown className="mr-2 h-4 w-4" />
                       Collapse
                     </Button>
-                    <Button type="submit" disabled={isPending || title.trim().length < 3}>
-                      {isPending ? "Posting..." : "Publish Post"}
+                    <Button
+                      type="submit"
+                      disabled={isPending || title.trim().length < 3}
+                    >
+                      {isPending ? "Posting…" : "Publish Post"}
                     </Button>
                   </div>
                   {messageBlock}
@@ -266,12 +238,14 @@ function PostComposer() {
         </Card>
       </div>
 
-      {isMobileComposerOpen ? (
+      {isMobileComposerOpen && (
         <div className="fixed inset-0 z-50 flex flex-col bg-background md:hidden">
           <div className="flex items-center justify-between border-b px-4 py-3">
             <div>
               <p className="font-heading text-lg font-semibold">Create a post</p>
-              <p className="text-sm text-muted-foreground">@{session.user.username || session.user.name || "user"}</p>
+              <p className="text-sm text-muted-foreground">
+                @{session.user.username || session.user.name || "user"}
+              </p>
             </div>
             <Button
               type="button"
@@ -284,8 +258,8 @@ function PostComposer() {
           </div>
           <form
             className="flex flex-1 flex-col p-4"
-            onSubmit={(event) => {
-              event.preventDefault();
+            onSubmit={(e) => {
+              e.preventDefault();
               void submitPost({ closeMobileComposer: true });
             }}
           >
@@ -293,7 +267,7 @@ function PostComposer() {
               <Input
                 name="title"
                 value={title}
-                onChange={(event) => setTitle(event.target.value)}
+                onChange={(e) => setTitle(e.target.value)}
                 placeholder="Post title"
                 disabled={isPending}
                 maxLength={120}
@@ -305,7 +279,7 @@ function PostComposer() {
               <textarea
                 name="body"
                 value={body}
-                onChange={(event) => setBody(event.target.value)}
+                onChange={(e) => setBody(e.target.value)}
                 placeholder="Add some details if you want."
                 disabled={isPending}
                 maxLength={2000}
@@ -315,13 +289,17 @@ function PostComposer() {
               {messageBlock}
             </div>
             <div className="mt-auto pt-4">
-              <Button type="submit" className="w-full" disabled={isPending || title.trim().length < 3}>
-                {isPending ? "Posting..." : "Publish Post"}
+              <Button
+                type="submit"
+                className="w-full"
+                disabled={isPending || title.trim().length < 3}
+              >
+                {isPending ? "Posting…" : "Publish Post"}
               </Button>
             </div>
           </form>
         </div>
-      ) : null}
+      )}
     </>
   );
 }
@@ -337,10 +315,10 @@ function FeedPostCard({ post }: { post: FeedPost }) {
   const [draftBody, setDraftBody] = useState(post.body ?? "");
 
   async function handleShare() {
-    const shareUrl = `${window.location.origin}/#post-${post.id}`;
-
     try {
-      await navigator.clipboard.writeText(shareUrl);
+      await navigator.clipboard.writeText(
+        `${window.location.origin}/#post-${post.id}`
+      );
       setActionError(null);
     } catch {
       setActionError("Link could not be copied.");
@@ -359,12 +337,10 @@ function FeedPostCard({ post }: { post: FeedPost }) {
     startTransition(async () => {
       const result = await updatePostAction(formData);
       setIsSaving(false);
-
       if (result.error) {
         setActionError(result.error);
         return;
       }
-
       setIsEditing(false);
     });
   }
@@ -379,15 +355,15 @@ function FeedPostCard({ post }: { post: FeedPost }) {
     startTransition(async () => {
       const result = await deletePostAction(formData);
       setIsDeleting(false);
-
-      if (result.error) {
-        setActionError(result.error);
-      }
+      if (result.error) setActionError(result.error);
     });
   }
 
   return (
-    <Card id={`post-${post.id}`} className="gap-0 overflow-hidden border-0 shadow-sm ring-1 ring-black/5">
+    <Card
+      id={`post-${post.id}`}
+      className="gap-0 overflow-hidden border-0 shadow-sm ring-1 ring-black/5"
+    >
       <CardHeader className="gap-3 border-b bg-gradient-to-r from-muted/40 via-card to-card">
         <div className="flex items-start justify-between gap-4">
           <div className="space-y-3">
@@ -402,13 +378,13 @@ function FeedPostCard({ post }: { post: FeedPost }) {
               <div className="space-y-3">
                 <Input
                   value={draftTitle}
-                  onChange={(event) => setDraftTitle(event.target.value)}
+                  onChange={(e) => setDraftTitle(e.target.value)}
                   maxLength={120}
                   className="h-11 bg-background"
                 />
                 <textarea
                   value={draftBody}
-                  onChange={(event) => setDraftBody(event.target.value)}
+                  onChange={(e) => setDraftBody(e.target.value)}
                   maxLength={2000}
                   rows={4}
                   className="flex min-h-28 w-full rounded-xl border bg-background px-3 py-3 text-sm shadow-xs outline-none transition-colors placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/20"
@@ -420,7 +396,7 @@ function FeedPostCard({ post }: { post: FeedPost }) {
                     onClick={handleEditSubmit}
                     disabled={isSaving || draftTitle.trim().length < 3}
                   >
-                    {isSaving ? "Saving..." : "Save"}
+                    {isSaving ? "Saving…" : "Save"}
                   </Button>
                   <Button
                     type="button"
@@ -441,21 +417,31 @@ function FeedPostCard({ post }: { post: FeedPost }) {
             ) : (
               <div className="space-y-2">
                 <CardTitle className="text-lg">{post.title}</CardTitle>
-                {post.body ? <p className="text-sm leading-6 text-muted-foreground">{post.body}</p> : null}
+                {post.body && (
+                  <p className="text-sm leading-6 text-muted-foreground">
+                    {post.body}
+                  </p>
+                )}
               </div>
             )}
-            {actionError ? <p className="text-sm text-destructive">{actionError}</p> : null}
+            {actionError && (
+              <p className="text-sm text-destructive">{actionError}</p>
+            )}
           </div>
           <div className="flex items-start gap-2">
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <Button variant="ghost" size="icon" className="h-9 w-9 rounded-full text-muted-foreground">
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-9 w-9 rounded-full text-muted-foreground"
+                >
                   <Ellipsis className="h-4 w-4" />
                 </Button>
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end">
                 <DropdownMenuItem onClick={handleShare}>Share</DropdownMenuItem>
-                {isOwner ? (
+                {isOwner && (
                   <>
                     <DropdownMenuSeparator />
                     <DropdownMenuItem
@@ -471,10 +457,10 @@ function FeedPostCard({ post }: { post: FeedPost }) {
                       disabled={isDeleting}
                       className="text-destructive focus:text-destructive"
                     >
-                      {isDeleting ? "Deleting..." : "Delete post"}
+                      {isDeleting ? "Deleting…" : "Delete post"}
                     </DropdownMenuItem>
                   </>
-                ) : null}
+                )}
               </DropdownMenuContent>
             </DropdownMenu>
             <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl bg-primary/10 text-sm font-semibold text-primary">
@@ -498,172 +484,30 @@ function FeedPostCard({ post }: { post: FeedPost }) {
 }
 
 export function HomePageClient({ posts }: { posts: FeedPost[] }) {
-  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
-  const [isMobileSearchActive, setIsMobileSearchActive] = useState(false);
-  const { data: session, status } = useSession();
-  const isLoading = status === "loading";
-
   return (
-    <div className="flex h-screen w-full flex-col overflow-hidden bg-background">
-      {isMobileSearchActive ? (
-        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4 md:hidden">
-          <Button variant="ghost" size="icon" onClick={() => setIsMobileSearchActive(false)}>
-            <ArrowLeft className="h-5 w-5" />
-          </Button>
-          <Input
-            autoFocus
-            type="search"
-            placeholder="Search posts or users..."
-            className="flex-1 border-none bg-muted/50 shadow-none focus-visible:ring-0"
-          />
-          <Button size="sm">Search</Button>
-        </header>
-      ) : (
-        <header className="flex h-16 shrink-0 items-center justify-between border-b px-4 md:px-6">
-          <div className="flex items-center gap-4 md:w-1/3">
-            <Button
-              variant="ghost"
-              size="icon"
-              className="hidden md:flex"
-              onClick={() => setIsSidebarOpen(!isSidebarOpen)}
-            >
-              <Menu className="h-6 w-6" />
-            </Button>
-
-            <Sheet>
-              <SheetTrigger asChild>
-                <Button variant="ghost" size="icon" className="md:hidden">
-                  <Menu className="h-6 w-6" />
-                </Button>
-              </SheetTrigger>
-              <SheetContent side="left" className="w-[80%] p-0 sm:w-80">
-                <SheetHeader className="border-b p-4 text-left">
-                  <SheetTitle>Menu</SheetTitle>
-                </SheetHeader>
-                <ScrollArea className="h-[calc(100vh-5rem)] w-full">
-                  <SidebarNavLinks />
-                </ScrollArea>
-              </SheetContent>
-            </Sheet>
-
-            <div className="space-y-0.5">
-              <span className="text-xl font-bold tracking-tight">ArelSocial</span>
-            </div>
-          </div>
-
-          <div className="hidden w-1/3 justify-center md:flex">
-            <div className="relative w-full max-w-md">
-              <Search className="absolute top-2.5 left-2.5 h-4 w-4 text-muted-foreground" />
-              <Input type="search" placeholder="Search posts or users..." className="w-full bg-muted/50 pl-9" />
-            </div>
-          </div>
-
-          <div className="flex items-center justify-end gap-2 md:w-1/3 md:gap-4">
-            <Button
-              variant="ghost"
-              size="icon"
-              className="md:hidden"
-              onClick={() => setIsMobileSearchActive(true)}
-            >
-              <Search className="h-5 w-5" />
-            </Button>
-
-            <ModeToggle />
-
-            {isLoading ? (
-              <Button size="sm" variant="ghost" disabled className="w-10 rounded-full">
-                ...
-              </Button>
-            ) : session?.user ? (
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <Button variant="ghost" className="relative h-8 w-8 rounded-full">
-                    <div className="flex h-full w-full items-center justify-center rounded-full bg-primary/20 text-sm font-semibold">
-                      {(session.user.username?.[0] || session.user.email?.[0] || session.user.name?.[0] || "U").toUpperCase()}
-                    </div>
-                  </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent className="w-56" align="end" forceMount>
-                  <div className="flex flex-col space-y-1 p-2">
-                    <p className="text-sm font-medium leading-none">
-                      {session.user.username || session.user.name || "User"}
-                    </p>
-                    <p className="text-xs leading-none text-muted-foreground">{session.user.email}</p>
-                  </div>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem className="cursor-pointer" onClick={() => signOut()}>
-                    Log out
-                  </DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            ) : (
-              <Link href="/login">
-                <Button size="sm" className="md:px-4 md:py-2">
-                  <User className="mr-2 hidden h-4 w-4 md:block" />
-                  Login
-                </Button>
-              </Link>
-            )}
-          </div>
-        </header>
-      )}
-
-      <div className="relative flex flex-1 overflow-hidden">
-        <div
-          className={cn(
-            "hidden border-r bg-muted/10 transition-all duration-300 ease-in-out md:block",
-            isSidebarOpen ? "w-64" : "w-0 border-r-0 opacity-0"
+    <div className="min-h-full bg-[radial-gradient(circle_at_top,_rgba(14,165,233,0.08),_transparent_28%),linear-gradient(to_bottom,_transparent,_rgba(148,163,184,0.06))]">
+      <div className="mx-auto max-w-2xl space-y-6 p-4 md:p-6">
+        <section className="space-y-3">
+          <h1 className="font-heading text-3xl font-semibold tracking-tight">
+            Home feed
+          </h1>
+          <PostComposer />
+        </section>
+
+        <section className="space-y-4">
+          {posts.length > 0 ? (
+            posts.map((post) => <FeedPostCard key={post.id} post={post} />)
+          ) : (
+            <Card className="border-dashed bg-card/80">
+              <CardContent className="space-y-2 pt-4 text-center">
+                <p className="text-base font-medium">No posts yet</p>
+                <p className="text-sm text-muted-foreground">
+                  Be the first to start the conversation.
+                </p>
+              </CardContent>
+            </Card>
           )}
-        >
-          <ScrollArea className="h-full w-64">
-            <SidebarNavLinks />
-          </ScrollArea>
-        </div>
-
-        <ScrollArea className="flex-1 bg-[radial-gradient(circle_at_top,_rgba(14,165,233,0.08),_transparent_28%),linear-gradient(to_bottom,_transparent,_rgba(148,163,184,0.06))]">
-          <main className="p-4 md:p-6">
-            <div className="mx-auto max-w-2xl space-y-6">
-              <section className="space-y-3">
-                <div className="space-y-1">
-                  <h1 className="font-heading text-3xl font-semibold tracking-tight">Home feed</h1>
-                </div>
-                <PostComposer />
-              </section>
-
-              <section className="space-y-4">
-                {posts.length > 0 ? (
-                  posts.map((post) => <FeedPostCard key={post.id} post={post} />)
-                ) : (
-                  <Card className="border-dashed bg-card/80">
-                    <CardContent className="space-y-2 pt-4 text-center">
-                      <p className="text-base font-medium">No posts yet</p>
-                      <p className="text-sm text-muted-foreground">Be the first to start the conversation.</p>
-                    </CardContent>
-                  </Card>
-                )}
-              </section>
-            </div>
-          </main>
-        </ScrollArea>
-
-        {isMobileSearchActive ? (
-          <div className="absolute inset-0 z-40 bg-background/95 p-4 backdrop-blur-sm md:hidden">
-            <div className="mx-auto max-w-md space-y-4">
-              <p className="text-sm font-semibold text-muted-foreground">Recent searches</p>
-              <div className="rounded-md border bg-card text-card-foreground shadow-sm">
-                <Button variant="ghost" className="w-full justify-start px-4 py-6 font-normal">
-                  <Search className="mr-2 h-4 w-4 text-muted-foreground" />
-                  Latest posts
-                </Button>
-                <div className="border-t" />
-                <Button variant="ghost" className="w-full justify-start px-4 py-6 font-normal">
-                  <Search className="mr-2 h-4 w-4 text-muted-foreground" />
-                  Active communities
-                </Button>
-              </div>
-            </div>
-          </div>
-        ) : null}
+        </section>
       </div>
     </div>
   );
diff --git a/src/lib/validations/community.ts b/src/lib/validations/community.ts
new file mode 100644
index 0000000..d9a8048
--- /dev/null
+++ b/src/lib/validations/community.ts
@@ -0,0 +1,27 @@
+import { z } from "zod";
+
+export const CreateCommunitySchema = z.object({
+  name: z
+    .string()
+    .trim()
+    .min(3, "Community name must be at least 3 characters.")
+    .max(21, "Community name must be 21 characters or fewer.")
+    .regex(/^[a-zA-Z0-9_]+$/, "Only letters, numbers, and underscores are allowed."),
+  description: z.string().trim().max(500, "Description is too long.").optional(),
+  isNsfw: z
+    .preprocess((val) => val === "on" || val === true, z.boolean())
+    .default(false),
+});
+
+export const AddRuleSchema = z.object({
+  communityId: z.string().uuid("Invalid community."),
+  communityName: z.string().trim().min(1),
+  title: z.string().trim().min(1, "Rule title is required.").max(100, "Title is too long."),
+  description: z.string().trim().max(500, "Description is too long.").optional(),
+});
+
+export const InviteUserSchema = z.object({
+  communityId: z.string().uuid("Invalid community."),
+  communityName: z.string().trim().min(1),
+  inviteeUsername: z.string().trim().min(1, "Username is required."),
+});