From 48043934ab045b3920e70684fa3d8a6940666cd6 Mon Sep 17 00:00:00 2001
From: manideepyelugam <yelugammanideep@gmail.com>
Date: Mon, 18 May 2026 21:46:50 +0530
Subject: [PATCH 1/2] fixed organization ui, setting ui

---
 .../[workspaceId]/organization/client.tsx     | 1308 +++++++++--------
 .../spaces/[spaceId]/settings/client.tsx      |   35 +-
 src/components/breadcrumb.tsx                 |    6 +-
 src/components/sidebar.tsx                    |    4 +-
 .../components/organization-audit-logs.tsx    |  265 ++--
 .../organization-billing-settings.tsx         |  780 ++++------
 .../components/organization-rewards.tsx       |  142 +-
 .../components/edit-workspace-form.tsx        |   14 +-
 8 files changed, 1273 insertions(+), 1281 deletions(-)

diff --git a/src/app/(dashboard)/workspaces/[workspaceId]/organization/client.tsx b/src/app/(dashboard)/workspaces/[workspaceId]/organization/client.tsx
index 884eef8e..06520b26 100644
--- a/src/app/(dashboard)/workspaces/[workspaceId]/organization/client.tsx
+++ b/src/app/(dashboard)/workspaces/[workspaceId]/organization/client.tsx
@@ -8,10 +8,9 @@ import { format } from "date-fns";
 import { toast } from "sonner";
 import {
     Building2, Users, Settings2, Shield, Trash2, Crown,
-    CreditCard, AlertTriangle, FileText, Loader2, Clock, Hash, UserPlus, Mail, BarChart3, ImageIcon,
+    CreditCard, AlertTriangle, FileText, Loader2, UserPlus, Mail, BarChart3, ImageIcon,
     Gift, Eye
 } from "lucide-react";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
@@ -386,7 +385,7 @@ export const OrganizationSettingsClient = () => {
     return (
         <div className="flex flex-col gap-6 w-full">
             {/* Header */}
-            <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
+            <div className="flex flex-col  sm:flex-row sm:items-start sm:justify-between gap-4">
                 <div className="flex items-center gap-3">
                     <div>
                         {isLoadingOrg ? (
@@ -423,540 +422,695 @@ export const OrganizationSettingsClient = () => {
 
             {/* Tabs */}
             <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
-                <TabsList className="w-full justify-start border-b rounded-none h-auto p-0 bg-transparent">
-                    <TabsTrigger
-                        value="general"
-                        className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none px-4 py-2.5"
-                    >
-                        <Settings2 className="size-4 mr-2" />
-                        General
-                    </TabsTrigger>
-                    {hasPermission(OrgPermissionKey.MEMBERS_VIEW) && (
-                        <TabsTrigger
-                            value="members"
-                            className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none px-4 py-2.5"
-                        >
-                            <Users className="size-4 mr-2" />
-                            Members
-                            <Badge variant="secondary" className="ml-2 h-5 px-1.5 text-xs">
-                                {members.length}
-                            </Badge>
-                        </TabsTrigger>
-                    )}
-                    {hasPermission(OrgPermissionKey.SECURITY_VIEW) && (
-                        <TabsTrigger
-                            value="security"
-                            className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none px-4 py-2.5"
-                        >
-                            <Shield className="size-4 mr-2" />
-                            Security
-                        </TabsTrigger>
-                    )}
-                    {hasPermission(OrgPermissionKey.DEPARTMENTS_MANAGE) && (
-                        <TabsTrigger
-                            value="departments"
-                            className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none px-4 py-2.5"
-                        >
-                            <Building2 className="size-4 mr-2" />
-                            Departments
-                        </TabsTrigger>
-                    )}
-                    {hasPermission(OrgPermissionKey.BILLING_VIEW) && (
-                        <TabsTrigger
-                            value="billing"
-                            className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none px-4 py-2.5"
-                        >
-                            <CreditCard className="size-4 mr-2" />
-                            Billing
-                        </TabsTrigger>
-                    )}
-                    {hasPermission(OrgPermissionKey.AUDIT_VIEW) && (
+  <TabsList className="relative flex w-fit gap-1 rounded-xl border border-border bg-muted/20 p-1 h-auto">
                         <TabsTrigger
-                            value="audit"
-                            className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none px-4 py-2.5"
-                        >
-                            <FileText className="size-4 mr-2" />
-                            Audit
-                        </TabsTrigger>
-                    )}
-                    <TabsTrigger
-                        value="rewards"
-                        className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none px-4 py-2.5"
-                    >
-                        <Gift className="size-4 mr-2" />
-                        Rewards
-                    </TabsTrigger>
+      value="general"
+      className="
+        relative rounded-lg px-4 py-1 text-sm
+        transition-all duration-200
+        data-[state=active]:bg-blue-500/10
+        data-[state=active]:text-blue-700
+        data-[state=active]:shadow-none
+        hover:bg-blue-500/10
+        hover:text-blue-700
+      "
+    >
+      <Settings2 className="size-4 mr-2" />
+      General
+    </TabsTrigger>
+                        {hasPermission(OrgPermissionKey.MEMBERS_VIEW) && (
+      <TabsTrigger
+        value="members"
+        className="
+          relative rounded-lg px-4 py-1 text-sm
+          transition-all duration-200
+          data-[state=active]:bg-blue-500/10
+          data-[state=active]:text-blue-700
+          data-[state=active]:shadow-none
+        hover:bg-blue-500/10
+          hover:text-blue-700
+        "
+      >
+        <Users className="size-4 mr-2" />
+        Members
+
+        <Badge
+          variant="secondary"
+          className="ml-2 h-5 px-1.5 text-xs"
+        >
+          {members.length}
+        </Badge>
+      </TabsTrigger>
+    )}
+ {hasPermission(OrgPermissionKey.SECURITY_VIEW) && (
+      <TabsTrigger
+        value="security"
+        className="
+          relative rounded-lg px-4 py-1 text-sm
+          transition-all duration-200
+          data-[state=active]:bg-red-500/10
+          data-[state=active]:text-red-600
+          data-[state=active]:shadow-none
+          hover:bg-red-500/5
+          hover:text-red-500
+        "
+      >
+        <Shield className="size-4 mr-2" />
+        Security
+      </TabsTrigger>
+    )}
+    {hasPermission(OrgPermissionKey.DEPARTMENTS_MANAGE) && (
+      <TabsTrigger
+        value="departments"
+        className="
+          relative rounded-lg px-4 py-1 text-sm
+          transition-all duration-200
+          data-[state=active]:bg-blue-500/10
+          data-[state=active]:text-blue-700
+          data-[state=active]:shadow-none
+        hover:bg-blue-500/10
+          hover:text-blue-700
+        "
+      >
+        <Building2 className="size-4 mr-2" />
+        Departments
+      </TabsTrigger>
+    )}
+    {hasPermission(OrgPermissionKey.BILLING_VIEW) && (
+      <TabsTrigger
+        value="billing"
+        className="
+          relative rounded-lg px-4 py-1 text-sm
+          transition-all duration-200
+          data-[state=active]:bg-emerald-500/10
+          data-[state=active]:text-emerald-700
+          data-[state=active]:shadow-none
+          hover:bg-emerald-500/5
+          hover:text-emerald-600
+        "
+      >
+        <CreditCard className="size-4 mr-2" />
+        Billing
+      </TabsTrigger>
+    )}
+
+    {hasPermission(OrgPermissionKey.AUDIT_VIEW) && (
+      <TabsTrigger
+        value="audit"
+        className="
+          relative rounded-lg px-4 py-1 text-sm
+          transition-all duration-200
+          data-[state=active]:bg-orange-500/10
+          data-[state=active]:text-orange-700
+          data-[state=active]:shadow-none
+          hover:bg-orange-500/5
+          hover:text-orange-600
+        "
+      >
+        <FileText className="size-4 mr-2" />
+        Audit
+      </TabsTrigger>
+    )}
+                   <TabsTrigger
+      value="rewards"
+      className="
+        relative rounded-lg px-4 py-1 text-sm
+        transition-all duration-200
+        data-[state=active]:bg-pink-500/10
+        data-[state=active]:text-pink-700
+        data-[state=active]:shadow-none
+        hover:bg-pink-500/5
+        hover:text-pink-600
+      "
+    >
+      <Gift className="size-4 mr-2" />
+      Rewards
+    </TabsTrigger>
                 </TabsList>
 
                 {/* ==================== GENERAL TAB ==================== */}
-                <TabsContent value="general" className="space-y-4 mt-6">
-                    <Card className="border shadow-sm">
-                        <CardHeader className="pb-4">
-                            <CardTitle className="text-base font-semibold flex items-center gap-2">
-                                <Settings2 className="size-4" />
-                                Organization Details
-                            </CardTitle>
-                            <CardDescription className="text-xs">
-                                {canEditSettings
-                                    ? "Update your organization information"
-                                    : "View your organization information"}
-                            </CardDescription>
-                        </CardHeader>
-                        <CardContent className="space-y-5">
-                            {isLoading ? (
-                                <div className="space-y-4">
-                                    <Skeleton className="h-10 w-full" />
-                                    <Skeleton className="h-10 w-full" />
-                                </div>
-                            ) : (
-                                <>
-                                    {/* Organization Logo */}
-                                    <div className="space-y-3">
-                                        <Label className="text-xs font-medium">Organization Logo</Label>
-                                        <div className="flex items-center gap-4">
-                                            <div className="relative group">
-                                                <Avatar className="h-20 w-20 border-2 border-muted">
-                                                    {currentLogoUrl ? (
-                                                        <AvatarImage src={currentLogoUrl} alt={organization?.name} />
-                                                    ) : null}
-                                                    <AvatarFallback className="bg-primary/10 text-primary text-2xl font-semibold">
-                                                        {orgInitial}
-                                                    </AvatarFallback>
-                                                </Avatar>
-                                                {canEditSettings && (
-                                                    <label className="absolute inset-0 flex items-center justify-center bg-black/50 rounded-full opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer">
-                                                        <ImageIcon className="size-6 text-white" />
+                <TabsContent value="general" className="mt-6">
+                    <section className="flex flex-col px-4">
+                        <h2 className="text-[18px] font-semibold mb-1">General</h2>
+                        <p className="text-xs text-muted-foreground mb-6">
+                            {canEditSettings ? "Update your organization information" : "View your organization information"}
+                        </p>
+                        {isLoading ? (
+                            <div className="space-y-4">
+                                <Skeleton className="h-10 w-full" />
+                                <Skeleton className="h-10 w-full" />
+                            </div>
+                        ) : (
+                            <div className="divide-y divide-border">
+                                <div className="flex py-4 gap-4 items-center">
+                                    
+                                    <div className="flex items-center gap-4">
+                                        <div className="relative group">
+                                            <Avatar className="h-20 w-20 border-2 border-muted">
+                                                {currentLogoUrl ? (
+                                                    <AvatarImage src={currentLogoUrl} alt={organization?.name} />
+                                                ) : null}
+                                                <AvatarFallback className="bg-primary/10 text-primary text-2xl font-semibold">
+                                                    {orgInitial}
+                                                </AvatarFallback>
+                                            </Avatar>
+                                            {canEditSettings && (
+                                                <label className="absolute inset-0 flex items-center justify-center bg-black/50 rounded-full opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer">
+                                                    <ImageIcon className="size-6 text-white" />
+                                                    <input
+                                                        type="file"
+                                                        accept="image/*"
+                                                        onChange={handleLogoChange}
+                                                        className="sr-only"
+                                                    />
+                                                </label>
+                                            )}
+                                        </div>
+                                        {/* {canEditSettings && (
+                                            <label>
+                                                <Button variant="outline" size="sm" className="gap-1.5" asChild>
+                                                    <span>
+                                                        <ImageIcon className="size-3.5" />
+                                                        {currentLogoUrl ? "Change Logo" : "Upload Logo"}
                                                         <input
                                                             type="file"
                                                             accept="image/*"
                                                             onChange={handleLogoChange}
                                                             className="sr-only"
                                                         />
-                                                    </label>
-                                                )}
-                                            </div>
-                                            <div className="space-y-1">
-                                                {canEditSettings && (
-                                                    <>
-                                                        <label>
-                                                            <Button variant="outline" size="sm" className="gap-1.5" asChild>
-                                                                <span>
-                                                                    <ImageIcon className="size-3.5" />
-                                                                    {currentLogoUrl ? "Change Logo" : "Upload Logo"}
-                                                                    <input
-                                                                        type="file"
-                                                                        accept="image/*"
-                                                                        onChange={handleLogoChange}
-                                                                        className="sr-only"
-                                                                    />
-                                                                </span>
-                                                            </Button>
-                                                        </label>
-                                                        <p className="text-xs text-muted-foreground">
-                                                            PNG, JPG or GIF. Max 5MB.
-                                                        </p>
-                                                    </>
-                                                )}
-                                                {!canEditSettings && !currentLogoUrl && (
-                                                    <p className="text-xs text-muted-foreground">
-                                                        No logo set
-                                                    </p>
-                                                )}
-                                            </div>
-                                        </div>
+                                                    </span>
+                                                </Button>
+                                            </label>
+                                        )} */}
+                                        {!canEditSettings && !currentLogoUrl && (
+                                            <p className="text-xs text-muted-foreground">No logo set</p>
+                                        )}
                                     </div>
 
-                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                                        <div className="space-y-2">
-                                            <Label htmlFor="orgName" className="text-xs font-medium">Organization Name</Label>
-                                            <Input
-                                                id="orgName"
-                                                value={orgName}
-                                                onChange={(e) => setOrgName(e.target.value)}
-                                                placeholder="Organization name"
-                                                disabled={!canEditSettings}
-                                                className="h-9"
-                                            />
-                                        </div>
-                                        <div className="space-y-2">
-                                            <Label htmlFor="orgId" className="text-xs font-medium flex items-center gap-1.5">
-                                                <Hash className="size-3" />
-                                                Organization ID
-                                            </Label>
-                                            <Input
-                                                id="orgId"
-                                                value={primaryOrganizationId || ""}
-                                                disabled
-                                                className="font-mono text-xs h-9 bg-muted/50"
-                                            />
-                                        </div>
+                                    <div className="shrink-0 py-8">
+                                        <p className="text-sm font-medium">Organization Logo</p>
+                                        <p className="text-xs text-muted-foreground mt-0.5">PNG, JPG or GIF. Max 5MB.</p>
                                     </div>
-                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                                        <div className="space-y-2">
-                                            <Label className="text-xs font-medium flex items-center gap-1.5">
-                                                <Clock className="size-3" />
-                                                Created
-                                            </Label>
-                                            <Input
-                                                value={organization?.$createdAt
-                                                    ? format(new Date(organization.$createdAt), "MMMM d, yyyy")
-                                                    : "-"
-                                                }
-                                                disabled
-                                                className="h-9 bg-muted/50"
-                                            />
-                                        </div>
+                                </div>
+
+                                <div className="flex flex-col py-8 gap-4">
+                                    <div className="shrink-0">
+                                        <p className="text-sm font-medium">Organization Name</p>
+                                        <p className="text-xs text-muted-foreground mt-0.5">The display name for your organization.</p>
                                     </div>
-                                    {canEditSettings && (
-                                        <div className="pt-2">
-                                            <Button
-                                                onClick={handleSaveOrg}
-                                                disabled={!hasChanges || isUpdating}
-                                                size="sm"
-                                            >
-                                                {isUpdating && <Loader2 className="size-3.5 mr-2 animate-spin" />}
-                                                Save Changes
-                                            </Button>
-                                        </div>
-                                    )}
-                                </>
-                            )}
-                        </CardContent>
-                    </Card>
-                </TabsContent>
+                                    <Input
+                                        id="orgName"
+                                        value={orgName}
+                                        onChange={(e) => setOrgName(e.target.value)}
+                                        placeholder="Organization name"
+                                        disabled={!canEditSettings}
+                                        className="w-6/12 h-8 text-sm rounded-md border border-border bg-transparent px-2 shadow-none focus-visible:ring-0 focus-visible:border-primary"
+                                    />
+                                </div>
 
-                {/* ==================== MEMBERS TAB ==================== */}
-                <TabsContent value="members" className="space-y-4 mt-6">
-                    <Card className="border shadow-sm">
-                        <CardHeader className="pb-4">
-                            <div className="flex items-center justify-between">
-                                <div>
-                                    <CardTitle className="text-base font-semibold flex items-center gap-2">
-                                        <Users className="size-4" />
-                                        Organization Members
-                                    </CardTitle>
-                                    <CardDescription className="text-xs mt-0.5">
-                                        {members.length} member{members.length !== 1 ? "s" : ""} in your organization
-                                    </CardDescription>
+                                <div className="flex flex-col py-8  gap-4">
+                                    <div className="shrink-0">
+                                        <p className="text-sm font-medium">Organization ID</p>
+                                        <p className="text-xs text-muted-foreground mt-0.5">Your unique organization identifier.</p>
+                                    </div>
+                                    <Input
+                                        id="orgId"
+                                        value={primaryOrganizationId || ""}
+                                        disabled
+                                        className="w-6/12 font-mono text-xs h-8 bg-muted/50"
+                                    />
                                 </div>
-                                {canManageMembers && primaryOrganizationId && (
-                                    <div className="flex items-center gap-2">
-                                        <Suspense fallback={<Skeleton className="h-9 w-24" />}>
-                                            <BulkMemberUpload organizationId={primaryOrganizationId} />
-                                        </Suspense>
-                                        <Dialog open={addMemberOpen} onOpenChange={setAddMemberOpen}>
-                                            <DialogTrigger asChild>
-                                                <Button size="sm" className="gap-1.5">
-                                                    <UserPlus className="size-4" />
-                                                    Add Member
-                                                </Button>
-                                            </DialogTrigger>
-                                            <DialogContent>
-                                                <DialogHeader>
-                                                    <DialogTitle className="flex items-center gap-2">
-                                                        <UserPlus className="size-5" />
-                                                        Add Organization Member
-                                                    </DialogTitle>
-                                                    <DialogDescription>
-                                                        Create a new user account and add them to your organization.
-                                                        They will receive login credentials via email.
-                                                    </DialogDescription>
-                                                </DialogHeader>
-                                                <div className="space-y-4 py-4">
-                                                    <div className="space-y-2">
-                                                        <Label htmlFor="memberName">Full Name</Label>
-                                                        <Input
-                                                            id="memberName"
-                                                            placeholder="John Doe"
-                                                            value={newMemberName}
-                                                            onChange={(e) => setNewMemberName(e.target.value)}
-                                                        />
-                                                    </div>
-                                                    <div className="space-y-2">
-                                                        <Label htmlFor="memberEmail">Email</Label>
-                                                        <Input
-                                                            id="memberEmail"
-                                                            type="email"
-                                                            placeholder="john@example.com"
-                                                            value={newMemberEmail}
-                                                            onChange={(e) => setNewMemberEmail(e.target.value)}
-                                                        />
-                                                    </div>
-                                                    <div className="space-y-2">
-                                                        <Label htmlFor="memberRole">Role</Label>
-                                                        <Select
-                                                            value={newMemberRole}
-                                                            onValueChange={(v) => setNewMemberRole(v as OrganizationRole)}
-                                                        >
-                                                            <SelectTrigger>
-                                                                <SelectValue />
-                                                            </SelectTrigger>
-                                                            <SelectContent>
-                                                                <SelectItem value={OrganizationRole.MEMBER}>Member</SelectItem>
-                                                                <SelectItem value={OrganizationRole.MODERATOR}>Moderator</SelectItem>
-                                                                <SelectItem value={OrganizationRole.ADMIN}>Admin</SelectItem>
-                                                            </SelectContent>
-                                                        </Select>
-                                                    </div>
-                                                </div>
-                                                <DialogFooter>
-                                                    <DialogClose asChild>
-                                                        <Button variant="outline">Cancel</Button>
-                                                    </DialogClose>
-                                                    <Button
-                                                        onClick={handleCreateMember}
-                                                        disabled={isCreatingMember || !newMemberName.trim() || !newMemberEmail.trim()}
-                                                    >
-                                                        {isCreatingMember ? (
-                                                            <>
-                                                                <Loader2 className="size-4 animate-spin mr-2" />
-                                                                Creating...
-                                                            </>
-                                                        ) : (
-                                                            "Create Member"
-                                                        )}
-                                                    </Button>
-                                                </DialogFooter>
-                                            </DialogContent>
-                                        </Dialog>
+
+                                <div className="flex flex-col py-8 gap-4">
+                                    <div className="shrink-0">
+                                        <p className="text-sm font-medium">Created</p>
+                                        <p className="text-xs text-muted-foreground mt-0.5">When this organization was created.</p>
                                     </div>
-                                )}
-                            </div>
-                        </CardHeader>
-                        <CardContent>
-                            {isLoadingMembers ? (
-                                <div className="space-y-2">
-                                    {[1, 2, 3].map((i) => (
-                                        <div key={i} className="flex items-center gap-3 p-3 border rounded-lg">
-                                            <Skeleton className="size-9 rounded-full" />
-                                            <div className="flex-1 space-y-1.5">
-                                                <Skeleton className="h-4 w-32" />
-                                                <Skeleton className="h-3 w-48" />
-                                            </div>
-                                            <Skeleton className="h-6 w-16" />
-                                        </div>
-                                    ))}
+                                    <Input
+                                        value={organization?.$createdAt
+                                            ? format(new Date(organization.$createdAt), "MMMM d, yyyy")
+                                            : "-"
+                                        }
+                                        disabled
+                                        className="w-6/12 h-8 bg-muted/50"
+                                    />
                                 </div>
-                            ) : (
-                                <div className="space-y-2">
-                                    {/* Select All Header (only for admins) */}
-                                    {canManageMembers && members.length > 0 && (
-                                        <div className="flex items-center gap-3 px-3 py-2 border-b mb-2">
-                                            <Checkbox
-                                                checked={allSelected ? true : someSelected ? "indeterminate" : false}
-                                                onCheckedChange={handleSelectAll}
-                                                aria-label="Select all members"
-                                            />
-                                            <span className="text-xs text-muted-foreground">
-                                                {selectedMemberIds.size > 0 
-                                                    ? `${selectedMemberIds.size} selected`
-                                                    : "Select all"
-                                                }
-                                            </span>
-                                            {selectedMemberIds.size > 0 && (
-                                                <Button
-                                                    variant="ghost"
-                                                    size="sm"
-                                                    className="h-6 px-2 text-xs"
-                                                    onClick={handleClearSelection}
-                                                >
-                                                    Clear
-                                                </Button>
-                                            )}
-                                        </div>
-                                    )}
-                                    {members.map((member: OrgMember) => (
-                                        <div
-                                            key={member.$id}
-                                            className={`flex items-center justify-between p-3 rounded-lg border hover:border-primary/30 hover:bg-accent/30 transition-all ${
-                                                selectedMemberIds.has(member.userId) ? "border-primary/50 bg-primary/5" : ""
-                                            }`}
-                                        >
-                                            <div className="flex items-center gap-3">
-                                                {/* Selection Checkbox (only for admins) */}
-                                                {canManageMembers && (
-                                                    <Checkbox
-                                                        checked={selectedMemberIds.has(member.userId)}
-                                                        onCheckedChange={() => handleToggleMember(member.userId)}
-                                                        aria-label={`Select ${member.name || member.email}`}
+                            </div>
+                        )}
+                        {canEditSettings && !isLoading && (
+                            <div className="w-full flex justify-end pt-4">
+                                <Button
+                                    onClick={handleSaveOrg}
+                                    disabled={!hasChanges || isUpdating}
+                                    size="xs"
+                                >
+                                    {isUpdating && <Loader2 className="size-3.5 mr-2 animate-spin" />}
+                                    Save Changes
+                                </Button>
+                            </div>
+                        )}
+                    </section>
+                </TabsContent>
+
+                {/* ==================== MEMBERS TAB ==================== */}
+                <TabsContent value="members" className="mt-6">
+                    <section className="px-4">
+                        <div className="flex items-center justify-between mb-6">
+                            <div>
+                                <h2 className="text-[18px] font-semibold">Members</h2>
+                                <p className="text-xs text-muted-foreground mt-0.5">
+                                    {members.length} member{members.length !== 1 ? "s" : ""} in your organization
+                                </p>
+                            </div>
+                            {canManageMembers && primaryOrganizationId && (
+                                <div className="flex items-center gap-2">
+                                    <Suspense fallback={<Skeleton className="h-9 w-24" />}>
+<div className="scale-90 origin-right">
+    <BulkMemberUpload organizationId={primaryOrganizationId} />
+</div>                               </Suspense>
+                                    <Dialog open={addMemberOpen} onOpenChange={setAddMemberOpen}>
+                                        <DialogTrigger asChild>
+                                            <Button size="xs" className="gap-1.5">
+                                                <UserPlus className="size-4" />
+                                                Add Member
+                                            </Button>
+                                        </DialogTrigger>
+                                        <DialogContent>
+                                            <DialogHeader>
+                                                <DialogTitle className="flex items-center gap-2">
+                                                    <UserPlus className="size-5" />
+                                                    Add Organization Member
+                                                </DialogTitle>
+                                                <DialogDescription>
+                                                    Create a new user account and add them to your organization.
+                                                    They will receive login credentials via email.
+                                                </DialogDescription>
+                                            </DialogHeader>
+                                            <div className="space-y-4 py-4">
+                                                <div className="space-y-2">
+                                                    <Label htmlFor="memberName">Full Name</Label>
+                                                    <Input
+                                                        id="memberName"
+                                                        placeholder="John Doe"
+                                                        value={newMemberName}
+                                                        onChange={(e) => setNewMemberName(e.target.value)}
                                                     />
-                                                )}
-                                                <div className="relative">
-                                                    <Avatar className="size-9">
-                                                        <AvatarImage src={member.profileImageUrl || undefined} />
-                                                        <AvatarFallback className="text-xs font-medium">
-                                                            {(member.name || member.email || "?")
-                                                                .split(" ")
-                                                                .map(n => n[0])
-                                                                .join("")
-                                                                .toUpperCase()
-                                                                .slice(0, 2)}
-                                                        </AvatarFallback>
-                                                    </Avatar>
-                                                    {member.role === "OWNER" && (
-                                                        <div className="absolute -bottom-0.5 -right-0.5 p-0.5 rounded-full bg-amber-500 border-2 border-background">
-                                                            <Crown className="size-2.5 text-white" />
-                                                        </div>
-                                                    )}
                                                 </div>
-                                                <div>
-                                                    <div className="flex items-center gap-2">
-                                                        <span className="text-sm font-medium">
-                                                            {member.name || member.email || "Unknown"}
-                                                        </span>
-                                                    </div>
-                                                    <span className="text-xs text-muted-foreground">
-                                                        {member.email || member.userId}
-                                                    </span>
+                                                <div className="space-y-2">
+                                                    <Label htmlFor="memberEmail">Email</Label>
+                                                    <Input
+                                                        id="memberEmail"
+                                                        type="email"
+                                                        placeholder="john@example.com"
+                                                        value={newMemberEmail}
+                                                        onChange={(e) => setNewMemberEmail(e.target.value)}
+                                                    />
                                                 </div>
-                                            </div>
-                                            <div className="flex items-center gap-2">
-                                                {/* View Profile Button */}
-                                                <Button
-                                                    variant="ghost"
-                                                    size="icon"
-                                                    className="size-8 text-muted-foreground hover:text-foreground"
-                                                    onClick={() => {
-                                                        const idx = members.findIndex((m: OrgMember) => m.userId === member.userId);
-                                                        setProfileViewIndex(idx >= 0 ? idx : 0);
-                                                        setSelectedMemberIds(new Set([member.userId]));
-                                                        setProfileDialogOpen(true);
-                                                    }}
-                                                >
-                                                    <Eye className="size-3.5" />
-                                                </Button>
-                                                {/* Pending activation badge + Resend button */}
-                                                {member.mustResetPassword && canManageMembers && primaryOrganizationId && (
-                                                    <>
-                                                        <Badge variant="secondary" className="text-xs bg-amber-100 text-amber-700 border-amber-200">
-                                                            Pending
-                                                        </Badge>
-                                                        <Button
-                                                            variant="ghost"
-                                                            size="sm"
-                                                            className="h-7 gap-1 text-xs"
-                                                            disabled={resendingUserId === member.userId}
-                                                            onClick={() => {
-                                                                setResendingUserId(member.userId);
-                                                                resendWelcome(
-                                                                    {
-                                                                        orgId: primaryOrganizationId,
-                                                                        userId: member.userId
-                                                                    },
-                                                                    {
-                                                                        onSettled: () => setResendingUserId(null)
-                                                                    }
-                                                                );
-                                                            }}
-                                                        >
-                                                            {resendingUserId === member.userId ? (
-                                                                <Loader2 className="size-3 animate-spin" />
-                                                            ) : (
-                                                                <Mail className="size-3" />
-                                                            )}
-                                                            Resend
-                                                        </Button>
-                                                    </>
-                                                )}
-                                                {/* Role selector (ADMIN+ can change roles) */}
-                                                {canManageMembers ? (
+                                                <div className="space-y-2">
+                                                    <Label htmlFor="memberRole">Role</Label>
                                                     <Select
-                                                        value={member.role}
-                                                        onValueChange={(value) =>
-                                                            handleUpdateRole(member.userId, value as OrganizationRole)
-                                                        }
-                                                        disabled={isUpdatingRole || (member.role === "OWNER" && ownerCount === 1)}
+                                                        value={newMemberRole}
+                                                        onValueChange={(v) => setNewMemberRole(v as OrganizationRole)}
                                                     >
-                                                        <SelectTrigger className="w-24 h-8 text-xs">
+                                                        <SelectTrigger>
                                                             <SelectValue />
                                                         </SelectTrigger>
                                                         <SelectContent>
-                                                            <SelectItem value="OWNER">Owner</SelectItem>
-                                                            <SelectItem value="ADMIN">Admin</SelectItem>
-                                                            <SelectItem value="MODERATOR">Moderator</SelectItem>
-                                                            <SelectItem value="MEMBER">Member</SelectItem>
+                                                            <SelectItem value={OrganizationRole.MEMBER}>Member</SelectItem>
+                                                            <SelectItem value={OrganizationRole.MODERATOR}>Moderator</SelectItem>
+                                                            <SelectItem value={OrganizationRole.ADMIN}>Admin</SelectItem>
                                                         </SelectContent>
                                                     </Select>
-                                                ) : (
-                                                    <Badge
-                                                        variant="outline"
-                                                        className={`text-xs ${member.role === "OWNER"
-                                                            ? "bg-amber-500/10 text-amber-700 border-amber-500/20"
-                                                            : member.role === "ADMIN"
-                                                                ? "bg-purple-500/10 text-purple-700 border-purple-500/20"
-                                                                : ""
-                                                            }`}
-                                                    >
-                                                        {member.role === "OWNER" && <Crown className="size-3 mr-1" />}
-                                                        {member.role === "ADMIN" && <Shield className="size-3 mr-1" />}
-                                                        {member.role}
-                                                    </Badge>
-                                                )}
-
-                                                {/* Remove member (ADMIN+ can remove, but not last OWNER) */}
-                                                {canManageMembers && member.role !== "OWNER" && (
-                                                    <AlertDialog>
-                                                        <AlertDialogTrigger asChild>
-                                                            <Button
-                                                                variant="ghost"
-                                                                size="icon"
-                                                                className="size-8 text-muted-foreground hover:text-destructive"
-                                                                disabled={isRemoving}
-                                                            >
-                                                                <Trash2 className="size-3.5" />
-                                                            </Button>
-                                                        </AlertDialogTrigger>
-                                                        <AlertDialogContent>
-                                                            <AlertDialogHeader>
-                                                                <AlertDialogTitle>Remove member?</AlertDialogTitle>
-                                                                <AlertDialogDescription>
-                                                                    This will remove {member.name || member.email} from the organization.
-                                                                    They will lose access to all organization resources.
-                                                                </AlertDialogDescription>
-                                                            </AlertDialogHeader>
-                                                            <AlertDialogFooter>
-                                                                <AlertDialogCancel>Cancel</AlertDialogCancel>
-                                                                <AlertDialogAction
-                                                                    onClick={() => handleRemoveMember(member.userId)}
-                                                                    className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-                                                                >
-                                                                    Remove
-                                                                </AlertDialogAction>
-                                                            </AlertDialogFooter>
-                                                        </AlertDialogContent>
-                                                    </AlertDialog>
-                                                )}
+                                                </div>
                                             </div>
+                                            <DialogFooter>
+                                                <DialogClose asChild>
+                                                    <Button variant="outline">Cancel</Button>
+                                                </DialogClose>
+                                                <Button
+                                                    onClick={handleCreateMember}
+                                                    disabled={isCreatingMember || !newMemberName.trim() || !newMemberEmail.trim()}
+                                                >
+                                                    {isCreatingMember ? (
+                                                        <>
+                                                            <Loader2 className="size-4 animate-spin mr-2" />
+                                                            Creating...
+                                                        </>
+                                                    ) : (
+                                                        "Create Member"
+                                                    )}
+                                                </Button>
+                                            </DialogFooter>
+                                        </DialogContent>
+                                    </Dialog>
+                                </div>
+                            )}
+                        </div>
+
+                        {isLoadingMembers ? (
+                            <div className="border rounded-lg overflow-hidden">
+                                <div className="flex items-center gap-4 px-4 py-2.5 bg-muted/30 border-b">
+                                    <Skeleton className="h-4 w-4" />
+                                    <Skeleton className="h-4 flex-1" />
+                                    <Skeleton className="h-4 w-24" />
+                                    <Skeleton className="h-4 w-20" />
+                                    <Skeleton className="h-4 w-20" />
+                                </div>
+                                {[1, 2, 3].map((i) => (
+                                    <div key={i} className="flex items-center gap-4 px-4 py-3 border-b">
+                                        <Skeleton className="size-4" />
+                                        <Skeleton className="size-8 rounded-full" />
+                                        <div className="flex-1 space-y-1">
+                                            <Skeleton className="h-4 w-32" />
+                                            <Skeleton className="h-3 w-48" />
+                                        </div>
+                                        <Skeleton className="h-6 w-24" />
+                                        <Skeleton className="h-6 w-16" />
+                                        <Skeleton className="h-6 w-20" />
+                                    </div>
+                                ))}
+                            </div>
+                        ) : (
+                            <>
+                            
+                             {canManageMembers && selectedMemberIds.size > 0 && (
+                                <div className="justify-end flex items-end">
+                                        <div className="flex py-1 px-2 items-center gap-1 text-primary text-xs">
+                                            {selectedMemberIds.size} Selected
+                                            <Button
+                                                variant="destructive"
+                                                size="sm"
+                                                className="ml-4 px-4 py-1 text-xs"
+                                                onClick={handleClearSelection}
+                                            >
+                                                Clear
+                                            </Button>
+                                        </div>
+                                </div>
+
+      
+                                    )}
+                                    
+                                    
+                            <div className="border rounded-lg overflow-hidden">
+                                {/* Table Header */}
+                                <div className="flex items-center gap-4 px-4 py-2.5 bg-muted/30 border-b text-xs font-medium text-muted-foreground">
+                                    {canManageMembers && (
+                                        <div className="w-4 shrink-0">
+                                            <Checkbox
+                                                checked={allSelected ? true : someSelected ? "indeterminate" : false}
+                                                onCheckedChange={handleSelectAll}
+                                                aria-label="Select all members"
+                                            />
                                         </div>
-                                    ))}
+                                    )}
+                                    <div className="flex-1">Member</div>
+                                    <div className="w-28">Role</div>
+                                    <div className="w-20">Status</div>
+                                   
+                                    <div className="w-20 text-right">Actions</div>
                                 </div>
+
+                                {/* Table Body */}
+                              {/* Table Body */}
+<div className="divide-y divide-border">
+    {members.map((member: OrgMember) => (
+        <div
+            key={member.$id}
+            onClick={() => {
+                if (canManageMembers) {
+                    handleToggleMember(member.userId);
+                }
+            }}
+            className={`flex items-center gap-4 px-4 py-3 hover:bg-muted/30 transition-colors cursor-pointer ${
+                selectedMemberIds.has(member.userId)
+                    ? "bg-primary/5"
+                    : ""
+            }`}
+        >
+            {/* Checkbox */}
+            {canManageMembers && (
+                <div
+                    className="w-4 shrink-0"
+                    onClick={(e) => e.stopPropagation()}
+                >
+                    <Checkbox
+                        checked={selectedMemberIds.has(member.userId)}
+                        onCheckedChange={() =>
+                            handleToggleMember(member.userId)
+                        }
+                        aria-label={`Select ${member.name || member.email}`}
+                    />
+                </div>
+            )}
+
+            {/* Member info */}
+            <div className="flex-1 flex items-center gap-3 min-w-0">
+                <div className="relative shrink-0">
+                    <Avatar className="size-8">
+                        <AvatarImage
+                            src={member.profileImageUrl || undefined}
+                        />
+                        <AvatarFallback className="text-xs font-medium">
+                            {(member.name || member.email || "?")
+                                .split(" ")
+                                .map((n: string) => n[0])
+                                .join("")
+                                .toUpperCase()
+                                .slice(0, 2)}
+                        </AvatarFallback>
+                    </Avatar>
+
+                    {member.role === "OWNER" && (
+                        <div className="absolute -bottom-0.5 -right-0.5 p-0.5 rounded-full bg-amber-500 border-2 border-background">
+                            <Crown className="size-2.5 text-white" />
+                        </div>
+                    )}
+                </div>
+
+                <div className="min-w-0">
+                    <p className="text-sm font-medium truncate">
+                        {member.name || member.email || "Unknown"}
+                    </p>
+
+                    <p className="text-xs text-muted-foreground truncate">
+                        {member.email || member.userId}
+                    </p>
+                </div>
+            </div>
+
+            {/* Role */}
+            <div
+                className="w-28 shrink-0"
+                onClick={(e) => e.stopPropagation()}
+            >
+                {canManageMembers ? (
+                    <Select
+                        value={member.role}
+                        onValueChange={(value) =>
+                            handleUpdateRole(
+                                member.userId,
+                                value as OrganizationRole
+                            )
+                        }
+                        disabled={
+                            isUpdatingRole ||
+                            (member.role === "OWNER" && ownerCount === 1)
+                        }
+                    >
+                        <SelectTrigger className="w-full h-7 text-xs">
+                            <SelectValue />
+                        </SelectTrigger>
+
+                        <SelectContent>
+                            <SelectItem value="OWNER">Owner</SelectItem>
+                            <SelectItem value="ADMIN">Admin</SelectItem>
+                            <SelectItem value="MODERATOR">
+                                Moderator
+                            </SelectItem>
+                            <SelectItem value="MEMBER">
+                                Member
+                            </SelectItem>
+                        </SelectContent>
+                    </Select>
+                ) : (
+                    <Badge
+                        variant="outline"
+                        className={`text-xs ${
+                            member.role === "OWNER"
+                                ? "bg-amber-500/10 text-amber-700 border-amber-500/20"
+                                : member.role === "ADMIN"
+                                ? "bg-purple-500/10 text-purple-700 border-purple-500/20"
+                                : ""
+                        }`}
+                    >
+                        {member.role === "OWNER" && (
+                            <Crown className="size-3 mr-1" />
+                        )}
+
+                        {member.role === "ADMIN" && (
+                            <Shield className="size-3 mr-1" />
+                        )}
+
+                        {member.role}
+                    </Badge>
+                )}
+            </div>
+
+            {/* Status */}
+            <div className="w-20 shrink-0">
+                {member.mustResetPassword ? (
+                    <Badge
+                        variant="secondary"
+                        className="text-xs bg-amber-100 text-amber-700 border-amber-200"
+                    >
+                        Pending
+                    </Badge>
+                ) : (
+                    <Badge
+                        variant="secondary"
+                        className="text-xs bg-emerald-100 text-emerald-700 border-emerald-200"
+                    >
+                        Active
+                    </Badge>
+                )}
+            </div>
+
+            {/* Actions */}
+            <div
+                className="w-20 shrink-0 flex items-center justify-end gap-1"
+                onClick={(e) => e.stopPropagation()}
+            >
+                <Button
+                    variant="ghost"
+                    size="icon"
+                    className="size-7 text-muted-foreground hover:text-foreground"
+                    onClick={() => {
+                        const idx = members.findIndex(
+                            (m: OrgMember) =>
+                                m.userId === member.userId
+                        );
+
+                        setProfileViewIndex(idx >= 0 ? idx : 0);
+                        setSelectedMemberIds(
+                            new Set([member.userId])
+                        );
+                        setProfileDialogOpen(true);
+                    }}
+                >
+                    <Eye className="size-3.5" />
+                </Button>
+
+                {member.mustResetPassword &&
+                    canManageMembers &&
+                    primaryOrganizationId && (
+                        <Button
+                            variant="ghost"
+                            size="icon"
+                            className="size-7 text-muted-foreground hover:text-foreground"
+                            title="Resend welcome email"
+                            disabled={
+                                resendingUserId === member.userId
+                            }
+                            onClick={() => {
+                                setResendingUserId(member.userId);
+
+                                resendWelcome(
+                                    {
+                                        orgId: primaryOrganizationId,
+                                        userId: member.userId,
+                                    },
+                                    {
+                                        onSettled: () =>
+                                            setResendingUserId(null),
+                                    }
+                                );
+                            }}
+                        >
+                            {resendingUserId === member.userId ? (
+                                <Loader2 className="size-3 animate-spin" />
+                            ) : (
+                                <Mail className="size-3" />
                             )}
-                        </CardContent>
-                    </Card>
+                        </Button>
+                    )}
+
+                {canManageMembers &&
+                    member.role !== "OWNER" && (
+                        <AlertDialog>
+                            <AlertDialogTrigger asChild>
+                                <Button
+                                    variant="ghost"
+                                    size="icon"
+                                    className="size-7 text-muted-foreground hover:text-destructive"
+                                    disabled={isRemoving}
+                                >
+                                    <Trash2 className="size-3.5" />
+                                </Button>
+                            </AlertDialogTrigger>
+
+                            <AlertDialogContent>
+                                <AlertDialogHeader>
+                                    <AlertDialogTitle>
+                                        Remove member?
+                                    </AlertDialogTitle>
+
+                                    <AlertDialogDescription>
+                                        This will remove{" "}
+                                        {member.name ||
+                                            member.email}{" "}
+                                        from the organization.
+                                        They will lose access to
+                                        all organization resources.
+                                    </AlertDialogDescription>
+                                </AlertDialogHeader>
+
+                                <AlertDialogFooter>
+                                    <AlertDialogCancel>
+                                        Cancel
+                                    </AlertDialogCancel>
+
+                                    <AlertDialogAction
+                                        onClick={() =>
+                                            handleRemoveMember(
+                                                member.userId
+                                            )
+                                        }
+                                        className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                                    >
+                                        Remove
+                                    </AlertDialogAction>
+                                </AlertDialogFooter>
+                            </AlertDialogContent>
+                        </AlertDialog>
+                    )}
+            </div>
+        </div>
+    ))}
+</div>
+                            </div>
+
+                            </>
+                        )}
+                    </section>
                 </TabsContent>
 
                 {/* ==================== SECURITY TAB (with Danger Zone) ==================== */}
-                <TabsContent value="security" className="space-y-4 mt-6">
-                    <Card className="border shadow-sm">
-                        <CardHeader className="pb-4">
-                            <CardTitle className="text-base font-semibold flex items-center gap-2">
-                                <Shield className="size-4" />
-                                Security Settings
-                            </CardTitle>
-                            <CardDescription className="text-xs">
-                                Organization security and access settings
-                            </CardDescription>
-                        </CardHeader>
-                        <CardContent className="space-y-3">
-                            <div className="flex items-center justify-between p-3 rounded-lg border hover:border-primary/30 transition-all">
-                                <div>
-                                    <div className="text-sm font-medium">Workspace Creation</div>
-                                    <div className="text-xs text-muted-foreground">
+                <TabsContent value="security" className="mt-6">
+                    <section className="px-4">
+                        <h2 className="text-[18px] font-semibold mb-1">Security</h2>
+                        <p className="text-xs text-muted-foreground mb-6">Organization security and access settings</p>
+
+                        <div className="divide-y divide-border">
+                            <div className="flex items-center justify-between py-8 gap-6">
+                                <div className="shrink-0">
+                                    <p className="text-sm font-medium">Workspace Creation</p>
+                                    <p className="text-xs text-muted-foreground mt-0.5">
                                         Who can create new workspaces in this organization
-                                    </div>
+                                    </p>
                                 </div>
                                 <Select defaultValue="admins" disabled={!canViewSecurity}>
-                                    <SelectTrigger className="w-36 h-8 text-xs">
+                                    <SelectTrigger className="w-40 h-8 text-xs">
                                         <SelectValue />
                                     </SelectTrigger>
                                     <SelectContent>
@@ -966,15 +1120,15 @@ export const OrganizationSettingsClient = () => {
                                     </SelectContent>
                                 </Select>
                             </div>
-                            <div className="flex items-center justify-between p-3 rounded-lg border hover:border-primary/30 transition-all">
-                                <div>
-                                    <div className="text-sm font-medium">Member Invitations</div>
-                                    <div className="text-xs text-muted-foreground">
+                            <div className="flex items-center justify-between py-8 gap-6">
+                                <div className="shrink-0">
+                                    <p className="text-sm font-medium">Member Invitations</p>
+                                    <p className="text-xs text-muted-foreground mt-0.5">
                                         Who can invite new members to the organization
-                                    </div>
+                                    </p>
                                 </div>
                                 <Select defaultValue="admins" disabled={!canViewSecurity}>
-                                    <SelectTrigger className="w-36 h-8 text-xs">
+                                    <SelectTrigger className="w-40 h-8 text-xs">
                                         <SelectValue />
                                     </SelectTrigger>
                                     <SelectContent>
@@ -983,85 +1137,81 @@ export const OrganizationSettingsClient = () => {
                                     </SelectContent>
                                 </Select>
                             </div>
-                        </CardContent>
-                    </Card>
-
-                    {/* Danger Zone - OWNER ONLY */}
-                    {isOwner && (
-                        <Card className="border border-red-600 shadow-sm bg-red-500/5">
-                            <CardHeader className="pb-4">
-                                <CardTitle className="text-base font-semibold text-red-500 flex items-center gap-2">
-                                    <AlertTriangle className="size-4" />
-                                    Danger Zone
-                                </CardTitle>
-                                <CardDescription className="text-xs">
-                                    Irreversible and destructive actions
-                                </CardDescription>
-                            </CardHeader>
-                            <CardContent>
-                                <div className="flex items-center justify-between p-4 rounded-lg border border-red-600 bg-red-500/10">
-                                    <div className="flex-1">
-                                        <div className="text-sm font-medium text-red-500">Delete Organization</div>
-                                        <div className="text-xs text-muted-foreground mt-0.5">
-                                            Data will be retained for 30 days before permanent deletion.
-                                            Billing will be frozen immediately.
+                        </div>
+
+                        {/* Danger Zone - OWNER ONLY */}
+                        {isOwner && (
+                            <div className="mt-10">
+                                <h2 className="text-sm font-semibold mb-0.5 text-destructive">Danger Zone</h2>
+                                <p className="text-xs text-muted-foreground mb-4">Irreversible and destructive actions</p>
+                                <div className="divide-y divide-border border rounded-lg">
+                                    <div className="flex items-center justify-between py-4 px-4 gap-6">
+                                        <div className="flex-1 min-w-0">
+                                            <p className="text-sm font-medium">Delete Organization</p>
+                                            <p className="text-xs text-muted-foreground mt-0.5">
+                                                Data will be retained for 30 days before permanent deletion. Billing will be frozen immediately.
+                                            </p>
                                         </div>
-                                    </div>
-                                    <Dialog>
-                                        <DialogTrigger asChild>
-                                            <Button size="sm" className="shrink-0 ml-4 bg-red-600 hover:bg-red-700 text-white border-0">
-                                                <Trash2 className="size-3.5 mr-1.5" />
-                                                Delete
-                                            </Button>
-                                        </DialogTrigger>
-                                        <DialogContent>
-                                            <DialogHeader>
-                                                <DialogTitle className="text-destructive flex items-center gap-2">
-                                                    <AlertTriangle className="size-5" />
-                                                    Delete Organization
-                                                </DialogTitle>
-                                                <DialogDescription>
-                                                    This action cannot be undone. This will permanently delete the
-                                                    organization and all associated data after 30 days.
-                                                </DialogDescription>
-                                            </DialogHeader>
-                                            <div className="space-y-4 py-4">
-                                                <div className="space-y-2">
-                                                    <Label className="text-sm">
-                                                        Type <span className="font-semibold">{organization?.name}</span> to confirm:
-                                                    </Label>
-                                                    <Input
-                                                        value={deleteConfirmName}
-                                                        onChange={(e) => setDeleteConfirmName(e.target.value)}
-                                                        placeholder="Organization name"
-                                                        className="h-9"
-                                                    />
-                                                </div>
-                                            </div>
-                                            <DialogFooter>
-                                                <DialogClose asChild>
-                                                    <Button variant="outline" size="sm">Cancel</Button>
-                                                </DialogClose>
+                                        <Dialog>
+                                            <DialogTrigger asChild>
                                                 <Button
-                                                    variant="destructive"
-                                                    size="sm"
-                                                    onClick={handleDeleteOrg}
-                                                    disabled={!canDeleteOrg || isDeleting}
+                                                    variant="ghost"
+                                                    size="xs"
+                                                    className="shrink-0  text-destructive hover:text-destructive hover:bg-destructive/10 bg-destructive/10"
                                                 >
-                                                    {isDeleting && <Loader2 className="size-3.5 mr-2 animate-spin" />}
-                                                    Delete Organization
+                                                    <Trash2 className="size-3.5 mr-1.5" />
+                                                    Delete
                                                 </Button>
-                                            </DialogFooter>
-                                        </DialogContent>
-                                    </Dialog>
+                                            </DialogTrigger>
+                                            <DialogContent>
+                                                <DialogHeader>
+                                                    <DialogTitle className="text-destructive flex items-center gap-2">
+                                                        <AlertTriangle className="size-5" />
+                                                        Delete Organization
+                                                    </DialogTitle>
+                                                    <DialogDescription>
+                                                        This action cannot be undone. This will permanently delete the
+                                                        organization and all associated data after 30 days.
+                                                    </DialogDescription>
+                                                </DialogHeader>
+                                                <div className="space-y-4 py-8 border-b ">
+                                                    <div className="space-y-2">
+                                                        <Label className="text-sm">
+                                                            Type <span className="font-semibold">{organization?.name}</span> to confirm:
+                                                        </Label>
+                                                        <Input
+                                                            value={deleteConfirmName}
+                                                            onChange={(e) => setDeleteConfirmName(e.target.value)}
+                                                            placeholder="Organization name"
+                                                            className="h-9"
+                                                        />
+                                                    </div>
+                                                </div>
+                                                <DialogFooter>
+                                                    <DialogClose asChild>
+                                                        <Button variant="outline" size="sm">Cancel</Button>
+                                                    </DialogClose>
+                                                    <Button
+                                                        variant="destructive"
+                                                        size="sm"
+                                                        onClick={handleDeleteOrg}
+                                                        disabled={!canDeleteOrg || isDeleting}
+                                                    >
+                                                        {isDeleting && <Loader2 className="size-3.5 mr-2 animate-spin" />}
+                                                        Delete Organization
+                                                    </Button>
+                                                </DialogFooter>
+                                            </DialogContent>
+                                        </Dialog>
+                                    </div>
                                 </div>
-                            </CardContent>
-                        </Card>
-                    )}
+                            </div>
+                        )}
+                    </section>
                 </TabsContent>
 
                 {/* ==================== BILLING TAB ==================== */}
-                <TabsContent value="billing" className="space-y-4 mt-6">
+                <TabsContent value="billing" className="space-y-4 mt-6 px-4">
                     <Suspense fallback={<Skeleton className="h-[400px] w-full" />}>
                         <OrganizationBillingSettings
                             organizationId={primaryOrganizationId || ""}
@@ -1071,14 +1221,14 @@ export const OrganizationSettingsClient = () => {
                 </TabsContent>
 
                 {/* ==================== AUDIT TAB (OWNER ONLY) ==================== */}
-                <TabsContent value="audit" className="space-y-4 mt-6">
+                <TabsContent value="audit" className="space-y-4 mt-6 px-4">
                     <Suspense fallback={<Skeleton className="h-[400px] w-full" />}>
                         <OrganizationAuditLogs organizationId={primaryOrganizationId || ""} />
                     </Suspense>
                 </TabsContent>
 
                 {/* ==================== DEPARTMENTS TAB ==================== */}
-                <TabsContent value="departments" className="space-y-4 mt-6">
+                <TabsContent value="departments" className="space-y-4 mt-6 px-4">
                     <Suspense fallback={<Skeleton className="h-[400px] w-full" />}>
                         <DepartmentsList
                             orgId={primaryOrganizationId || ""}
@@ -1088,7 +1238,7 @@ export const OrganizationSettingsClient = () => {
                 </TabsContent>
 
                 {/* ==================== REWARDS TAB ==================== */}
-                <TabsContent value="rewards" className="space-y-4 mt-6">
+                <TabsContent value="rewards" className="space-y-4 mt-6 px-4">
                     <Suspense fallback={<Skeleton className="h-[400px] w-full" />}>
                         <OrganizationRewards organizationId={primaryOrganizationId || ""} />
                     </Suspense>
diff --git a/src/app/(dashboard)/workspaces/[workspaceId]/spaces/[spaceId]/settings/client.tsx b/src/app/(dashboard)/workspaces/[workspaceId]/spaces/[spaceId]/settings/client.tsx
index c01e7e37..816e9d5a 100644
--- a/src/app/(dashboard)/workspaces/[workspaceId]/spaces/[spaceId]/settings/client.tsx
+++ b/src/app/(dashboard)/workspaces/[workspaceId]/spaces/[spaceId]/settings/client.tsx
@@ -9,6 +9,7 @@ import { PageLoader } from "@/components/page-loader";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
+
 import {
   Select,
   SelectContent,
@@ -140,7 +141,7 @@ export const SpaceSettingsClient = () => {
   const activeColor = color || space.color || "#6366f1";
 
   return (
-    <div className="w-full h-[83vh] px-2">
+    <div className="w-full h-full">
       <SpaceWorkflowsModal
         isOpen={isWorkflowsModalOpen}
         onClose={() => setIsWorkflowsModalOpen(false)}
@@ -151,18 +152,18 @@ export const SpaceSettingsClient = () => {
 
 
       {/* Settings Panel */}
-      <div className="bg-card rounded-2xl border h-full border-border shadow-sm overflow-hidden">
-        <div className="flex h-full">
+      <div className=" overflow-hidden">
+        <div className="flex flex-col h-full">
 
           {/* Left Navigation */}
-          <aside className="w-44 shrink-0 border-r border-border bg-muted/20 p-3 flex flex-col gap-0.5">
+          <aside className=" shrink-0 border w-fit border-border gap-2  bg-muted/20 p-1 rounded-lg flex">
             {NAV_ITEMS.map((item) => (
               <button
                 key={item.id}
                 type="button"
                 onClick={() => setActiveSection(item.id)}
                 className={[
-                  "w-full text-left px-3 py-2 rounded-lg text-sm transition-colors duration-100",
+                  " text-center py-1 px-3 rounded-lg text-sm transition-colors duration-100",
                   item.danger
                     ? activeSection === item.id
                       ? "bg-destructive/10 text-destructive font-medium"
@@ -177,8 +178,10 @@ export const SpaceSettingsClient = () => {
             ))}
           </aside>
 
+
+
           {/* Content Area */}
-          <main className="flex-1 p-7 min-w-0">
+          <main className="flex-1 mt-10 px-3 min-w-0">
 
             {/* ── General ── */}
          {activeSection === "general" && (
@@ -190,7 +193,7 @@ export const SpaceSettingsClient = () => {
         {/* Space Name */}
         <div className="flex flex-col py-4 gap-4">
           <div className="shrink-0">
-            <p className="text-sm font-regular">Space Name</p>
+            <p className="text-sm font-medium">Space Name</p>
             <p className="text-xs text-muted-foreground mt-0.5">
               The display name for this space.
             </p>
@@ -207,7 +210,7 @@ export const SpaceSettingsClient = () => {
         {/* Space Key */}
         <div className="flex flex-col py-4 gap-4">
           <div className="shrink-0">
-            <p className="text-sm font-regular">Space Key</p>
+            <p className="text-sm font-medium">Space Key</p>
             <p className="text-xs text-muted-foreground mt-0.5">
               Prefix for work items, e.g. ENG-001.
             </p>
@@ -225,7 +228,7 @@ export const SpaceSettingsClient = () => {
         {/* Description */}
         <div className="flex flex-col py-4 gap-4">
           <div className="shrink-0">
-            <p className="text-sm font-regular">Description</p>
+            <p className="text-sm font-medium">Description</p>
             <p className="text-xs text-muted-foreground mt-0.5">
               A short description of this space.
             </p>
@@ -265,7 +268,7 @@ export const SpaceSettingsClient = () => {
         {/* Theme Color */}
         <div className="flex flex-col py-4 gap-4">
           <div>
-            <p className="text-sm font-regular">Theme Color</p>
+            <p className="text-sm font-medium">Theme Color</p>
             <p className="text-xs text-muted-foreground mt-0.5">
               Choose a color that represents this space.
             </p>
@@ -293,7 +296,7 @@ export const SpaceSettingsClient = () => {
         {/* Preview */}
         <div className="flex flex-col py-4 gap-4">
           <div>
-            <p className="text-sm font-regular">Preview</p>
+            <p className="text-sm font-medium">Preview</p>
             <p className="text-xs text-muted-foreground mt-0.5">
               How your space icon will appear.
             </p>
@@ -333,7 +336,7 @@ export const SpaceSettingsClient = () => {
       <div className="divide-y divide-border">
         <div className="flex flex-col py-4 gap-4">
           <div>
-            <p className="text-sm font-regular">Visibility</p>
+            <p className="text-sm font-medium">Visibility</p>
             <p className="text-xs text-muted-foreground mt-0.5">
               {(visibility || space.visibility) === SpaceVisibility.PUBLIC
                 ? "All workspace members can see this space."
@@ -392,7 +395,7 @@ export const SpaceSettingsClient = () => {
         {/* Default Workflow */}
         <div className="flex flex-col py-4 gap-4">
           <div>
-            <p className="text-sm font-regular">Default Workflow</p>
+            <p className="text-sm font-medium">Default Workflow</p>
             <p className="text-xs text-muted-foreground mt-0.5">
               New projects will use this workflow by default.
             </p>
@@ -423,7 +426,7 @@ export const SpaceSettingsClient = () => {
         {/* Workflow Inheritance */}
         <div className="flex flex-col py-4 gap-4">
           <div>
-            <p className="text-sm font-regular">Workflow Inheritance</p>
+            <p className="text-sm font-medium">Workflow Inheritance</p>
             <p className="text-xs text-muted-foreground mt-0.5">
               How projects inherit the default workflow.
             </p>
@@ -462,7 +465,7 @@ export const SpaceSettingsClient = () => {
         {/* Manage Workflows */}
         <div className="flex flex-col py-4 gap-4">
           <div>
-            <p className="text-sm font-regular">Manage Workflows</p>
+            <p className="text-sm font-medium">Manage Workflows</p>
             <p className="text-xs text-muted-foreground mt-0.5">
               View and edit all workflows in this space.
             </p>
@@ -497,7 +500,7 @@ export const SpaceSettingsClient = () => {
             {/* ── Danger Zone ── */}
             {activeSection === "danger" && (
               <section>
-                <h2 className="text-sm font-semibold mb-0.5 text-destructive">Delete Space</h2>
+                <h2 className="text-sm font-medium mb-0.5 text-destructive">Delete Space</h2>
                 <p className="text-xs text-muted-foreground mb-5">Irreversible actions for this space.</p>
                 <div className="divide-y divide-border">
 
diff --git a/src/components/breadcrumb.tsx b/src/components/breadcrumb.tsx
index 99927268..fac41a6c 100644
--- a/src/components/breadcrumb.tsx
+++ b/src/components/breadcrumb.tsx
@@ -334,20 +334,20 @@ function renderBreadcrumbs(breadcrumbs: Array<{ label: string; href?: string; is
       {breadcrumbs.map((breadcrumb, index) => (
         <div key={index} className="flex items-center">
           {index > 0 && (
-            <ChevronRight className="h-3.5 w-3.5 mx-1.5 text-muted-foreground/60" />
+            <ChevronRight className="h-3.5 w-3.5 mx-1 text-muted-foreground/60" />
           )}
           {breadcrumb.href && breadcrumb.isClickable && index < breadcrumbs.length - 1 ? (
             <Link
               href={breadcrumb.href}
               className={cn(
-                "text-sm transition-colors truncate max-w-48",
+                "text-xs transition-colors truncate max-w-48",
                 "hover:text-foreground cursor-pointer"
               )}
             >
               {breadcrumb.label}
             </Link>
           ) : (
-            <span className="text-foreground text-sm font-medium truncate max-w-48">
+            <span className="text-foreground text-xs font-medium truncate max-w-48">
               {breadcrumb.label}
             </span>
           )}
diff --git a/src/components/sidebar.tsx b/src/components/sidebar.tsx
index 26ecae01..95368f61 100644
--- a/src/components/sidebar.tsx
+++ b/src/components/sidebar.tsx
@@ -89,8 +89,8 @@ export const Sidebar = () => {
   }
 
   return (
-    <aside id="sidebar" className="h-full bg-background w-full overflow-hidden border-r border-border flex flex-col">
-      <div className="flex items-center w-full h-[73px] px-6 border-b border-border flex-shrink-0">
+    <aside id="sidebar" className="h-full  bg-sidebar w-full overflow-hidden border-r border-border flex flex-col">
+      <div className="flex items-center w-full h-[73px] px-4 border-b border-border flex-shrink-0">
         <Link href={hasWorkspace ? "/" : "/welcome"} className="flex items-center">
           <Image src="/Logo.png" className="object-contain" alt="logo" width={80} height={90} />
         </Link>
diff --git a/src/features/organizations/components/organization-audit-logs.tsx b/src/features/organizations/components/organization-audit-logs.tsx
index a5011f32..a4bc3bc7 100644
--- a/src/features/organizations/components/organization-audit-logs.tsx
+++ b/src/features/organizations/components/organization-audit-logs.tsx
@@ -14,7 +14,6 @@ import {
     Filter,
 } from "lucide-react";
 
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Skeleton } from "@/components/ui/skeleton";
@@ -42,17 +41,6 @@ interface OrganizationAuditLogsProps {
     organizationId: string;
 }
 
-/**
- * Organization Audit Logs View
- * 
- * Read-only display of organization audit events.
- * Visible only to OWNER for compliance and debugging.
- * 
- * INVARIANTS:
- * - No editing, deleting, or exporting (read-only)
- * - Pagination for large datasets
- * - Filter by action type
- */
 export function OrganizationAuditLogs({ organizationId }: OrganizationAuditLogsProps) {
     const [offset, setOffset] = useState(0);
     const [actionFilter, setActionFilter] = useState<string>("all");
@@ -78,22 +66,30 @@ export function OrganizationAuditLogs({ organizationId }: OrganizationAuditLogsP
             case OrgAuditAction.ORGANIZATION_CREATED:
             case OrgAuditAction.ORGANIZATION_DELETED:
             case OrgAuditAction.ORGANIZATION_RESTORED:
-                return <Building2 className="h-4 w-4" />;
+                return <Building2 className="h-3.5 w-3.5" />;
             case OrgAuditAction.ACCOUNT_CONVERTED:
-                return <RefreshCcw className="h-4 w-4" />;
+                return <RefreshCcw className="h-3.5 w-3.5" />;
             case OrgAuditAction.MEMBER_ADDED:
-                return <UserPlus className="h-4 w-4" />;
+                return <UserPlus className="h-3.5 w-3.5" />;
             case OrgAuditAction.MEMBER_REMOVED:
-                return <UserMinus className="h-4 w-4" />;
+                return <UserMinus className="h-3.5 w-3.5" />;
             default:
-                return <FileText className="h-4 w-4" />;
+                return <FileText className="h-3.5 w-3.5" />;
         }
     };
 
-    const getActionBadgeVariant = (action: string): "default" | "secondary" | "destructive" | "outline" => {
-        if (action.includes("deleted") || action.includes("removed")) return "destructive";
-        if (action.includes("created") || action.includes("added")) return "default";
-        return "secondary";
+    const getActionColor = (action: string) => {
+        if (action.includes("deleted") || action.includes("removed")) return "text-red-600 bg-red-100";
+        if (action.includes("created") || action.includes("added")) return "text-emerald-600 bg-emerald-100";
+        return "text-blue-600 bg-blue-100";
+    };
+
+    const getBadgeClass = (action: string) => {
+        if (action.includes("deleted") || action.includes("removed"))
+            return "bg-red-100 text-red-700 border-red-200";
+        if (action.includes("created") || action.includes("added"))
+            return "bg-emerald-100 text-emerald-700 border-emerald-200";
+        return "bg-blue-100 text-blue-700 border-blue-200";
     };
 
     const formatAction = (action: string) => {
@@ -125,101 +121,114 @@ export function OrganizationAuditLogs({ organizationId }: OrganizationAuditLogsP
 
     if (isError) {
         return (
-            <Card>
-                <CardContent className="py-8">
-                    <div className="text-center text-muted-foreground">
-                        <FileText className="h-8 w-8 mx-auto mb-2 opacity-50" />
-                        <p>Failed to load audit logs</p>
-                        <Button variant="outline" size="sm" onClick={() => refetch()} className="mt-2">
-                            Try Again
-                        </Button>
-                    </div>
-                </CardContent>
-            </Card>
+            <div className="text-center py-12 text-muted-foreground">
+                <FileText className="h-8 w-8 mx-auto mb-2 opacity-50" />
+                <p className="text-sm">Failed to load audit logs</p>
+                <Button variant="outline" size="sm" onClick={() => refetch()} className="mt-3">
+                    Try Again
+                </Button>
+            </div>
         );
     }
 
     return (
-        <Card>
-            <CardHeader>
-                <div className="flex items-center justify-between">
-                    <div>
-                        <CardTitle className="flex items-center gap-2">
-                            <FileText className="h-5 w-5" />
-                            Audit Logs
-                        </CardTitle>
-                        <CardDescription>
-                            Read-only view of organization activity for compliance
-                        </CardDescription>
-                    </div>
-                    <div className="flex items-center gap-2">
-                        <Select value={actionFilter} onValueChange={(v) => { setActionFilter(v); setOffset(0); }}>
-                            <SelectTrigger className="w-[180px] h-8 text-xs">
-                                <Filter className="h-3 w-3 mr-1" />
-                                <SelectValue placeholder="Filter by action" />
-                            </SelectTrigger>
-                            <SelectContent>
-                                <SelectItem value="all">All Actions</SelectItem>
-                                <SelectItem value={OrgAuditAction.ORGANIZATION_CREATED}>Created</SelectItem>
-                                <SelectItem value={OrgAuditAction.ACCOUNT_CONVERTED}>Converted</SelectItem>
-                                <SelectItem value={OrgAuditAction.MEMBER_ADDED}>Member Added</SelectItem>
-                                <SelectItem value={OrgAuditAction.MEMBER_REMOVED}>Member Removed</SelectItem>
-                                <SelectItem value={OrgAuditAction.MEMBER_ROLE_CHANGED}>Role Changed</SelectItem>
-                                <SelectItem value={OrgAuditAction.ORGANIZATION_DELETED}>Deleted</SelectItem>
-                            </SelectContent>
-                        </Select>
-                        <Button variant="ghost" size="sm" onClick={() => refetch()} disabled={isRefetching}>
-                            <RefreshCcw className={`h-4 w-4 ${isRefetching ? "animate-spin" : ""}`} />
-                        </Button>
-                    </div>
+        <section>
+            <div className="flex items-center justify-between mb-6">
+                <div>
+                    <h2 className="text-[18px] font-semibold">Audit Logs</h2>
+                    <p className="text-xs text-muted-foreground mt-0.5">
+                        Read-only view of organization activity for compliance
+                    </p>
                 </div>
-            </CardHeader>
-            <CardContent>
-                {isLoading ? (
-                    <div className="space-y-3">
-                        {[...Array(5)].map((_, i) => (
-                            <div key={i} className="flex items-center gap-3 p-3 border rounded-lg">
-                                <Skeleton className="h-8 w-8 rounded-full" />
-                                <div className="flex-1 space-y-2">
-                                    <Skeleton className="h-4 w-1/3" />
-                                    <Skeleton className="h-3 w-2/3" />
-                                </div>
-                                <Skeleton className="h-4 w-20" />
-                            </div>
-                        ))}
-                    </div>
-                ) : logs.length === 0 ? (
-                    <div className="text-center py-8 text-muted-foreground">
-                        <FileText className="h-8 w-8 mx-auto mb-2 opacity-50" />
-                        <p>No audit logs found</p>
+                <div className="flex items-center gap-2">
+                    <Select value={actionFilter} onValueChange={(v) => { setActionFilter(v); setOffset(0); }}>
+                        <SelectTrigger className="w-[160px] h-8 text-xs">
+                            <Filter className="h-3 w-3 mr-1.5" />
+                            <SelectValue placeholder="Filter by action" />
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectItem value="all">All Actions</SelectItem>
+                            <SelectItem value={OrgAuditAction.ORGANIZATION_CREATED}>Created</SelectItem>
+                            <SelectItem value={OrgAuditAction.ACCOUNT_CONVERTED}>Converted</SelectItem>
+                            <SelectItem value={OrgAuditAction.MEMBER_ADDED}>Member Added</SelectItem>
+                            <SelectItem value={OrgAuditAction.MEMBER_REMOVED}>Member Removed</SelectItem>
+                            <SelectItem value={OrgAuditAction.MEMBER_ROLE_CHANGED}>Role Changed</SelectItem>
+                            <SelectItem value={OrgAuditAction.ORGANIZATION_DELETED}>Deleted</SelectItem>
+                        </SelectContent>
+                    </Select>
+                    <Button variant="ghost" size="sm" className="size-8 p-0" onClick={() => refetch()} disabled={isRefetching}>
+                        <RefreshCcw className={`h-3.5 w-3.5 ${isRefetching ? "animate-spin" : ""}`} />
+                    </Button>
+                </div>
+            </div>
+
+            {isLoading ? (
+                <div className="border rounded-lg overflow-hidden">
+                    <div className="flex items-center gap-4 px-4 py-2.5 bg-muted/30 border-b">
+                        <Skeleton className="h-4 w-8" />
+                        <Skeleton className="h-4 w-32" />
+                        <Skeleton className="h-4 flex-1" />
+                        <Skeleton className="h-4 w-24" />
+                        <Skeleton className="h-4 w-28" />
                     </div>
-                ) : (
-                    <>
-                        <div className="space-y-2">
+                    {[...Array(5)].map((_, i) => (
+                        <div key={i} className="flex items-center gap-4 px-4 py-3 border-b">
+                            <Skeleton className="h-7 w-7 rounded-full" />
+                            <Skeleton className="h-5 w-28" />
+                            <Skeleton className="h-4 flex-1" />
+                            <Skeleton className="h-4 w-24" />
+                            <Skeleton className="h-4 w-28" />
+                        </div>
+                    ))}
+                </div>
+            ) : logs.length === 0 ? (
+                <div className="text-center py-12 border rounded-lg border-dashed text-muted-foreground">
+                    <FileText className="h-8 w-8 mx-auto mb-2 opacity-50" />
+                    <p className="text-sm">No audit logs found</p>
+                </div>
+            ) : (
+                <>
+                    <div className="border rounded-lg overflow-hidden">
+                        {/* Table Header */}
+                        <div className="flex items-center gap-4 px-4 py-2.5 bg-muted/30 border-b text-xs font-medium text-muted-foreground">
+                            <div className="w-7 shrink-0" />
+                            <div className="w-36 shrink-0">Event</div>
+                            <div className="flex-1">Details</div>
+                            <div className="w-32 shrink-0">Actor</div>
+                            <div className="w-32 shrink-0 text-right">Date & Time</div>
+                        </div>
+
+                        {/* Table Body */}
+                        <div className="divide-y divide-border">
                             {logs.map((log) => (
                                 <div
                                     key={log.$id}
-                                    className="flex items-start gap-3 p-3 border rounded-lg hover:bg-muted/50 transition-colors"
+                                    className="flex items-center gap-4 px-4 py-3 hover:bg-muted/30 transition-colors"
                                 >
-                                    <div className="flex items-center justify-center h-8 w-8 rounded-full bg-muted">
-                                        {getActionIcon(log.actionType)}
+                                    <div className="w-7 shrink-0 flex items-center justify-center">
+                                        <div className={`size-7 rounded-full flex items-center justify-center ${getActionColor(log.actionType)}`}>
+                                            {getActionIcon(log.actionType)}
+                                        </div>
+                                    </div>
+                                    <div className="w-36 shrink-0">
+                                        <Badge
+                                            variant="outline"
+                                            className={`text-[10px] font-medium ${getBadgeClass(log.actionType)}`}
+                                        >
+                                            {formatAction(log.actionType)}
+                                        </Badge>
                                     </div>
                                     <div className="flex-1 min-w-0">
-                                        <div className="flex items-center gap-2 mb-1">
-                                            <Badge variant={getActionBadgeVariant(log.actionType)} className="text-xs">
-                                                {formatAction(log.actionType)}
-                                            </Badge>
-                                            <span className="text-xs text-muted-foreground flex items-center gap-1">
-                                                <User className="h-3 w-3" />
-                                                {log.actorUserId.slice(0, 8)}...
-                                            </span>
-                                        </div>
                                         <p className="text-xs text-muted-foreground truncate">
                                             {formatMetadata(log.metadata)}
                                         </p>
                                     </div>
-                                    <div className="text-right">
-                                        <p className="text-xs text-muted-foreground">
+                                    <div className="w-32 shrink-0 flex items-center gap-1.5 text-xs text-muted-foreground">
+                                        <User className="h-3 w-3 shrink-0" />
+                                        <span className="truncate font-mono">{log.actorUserId.slice(0, 10)}...</span>
+                                    </div>
+                                    <div className="w-32 shrink-0 text-right">
+                                        <p className="text-xs font-medium">
                                             {safeFormatDate(log.timestamp, "MMM d, yyyy")}
                                         </p>
                                         <p className="text-xs text-muted-foreground">
@@ -229,34 +238,36 @@ export function OrganizationAuditLogs({ organizationId }: OrganizationAuditLogsP
                                 </div>
                             ))}
                         </div>
+                    </div>
 
-                        {/* Pagination */}
-                        <div className="flex items-center justify-between mt-4 pt-4 border-t">
-                            <p className="text-xs text-muted-foreground">
-                                Showing {offset + 1}-{Math.min(offset + limit, total)} of {total}
-                            </p>
-                            <div className="flex items-center gap-1">
-                                <Button
-                                    variant="outline"
-                                    size="sm"
-                                    onClick={handlePrev}
-                                    disabled={!hasPrev}
-                                >
-                                    <ChevronLeft className="h-4 w-4" />
-                                </Button>
-                                <Button
-                                    variant="outline"
-                                    size="sm"
-                                    onClick={handleNext}
-                                    disabled={!hasNext}
-                                >
-                                    <ChevronRight className="h-4 w-4" />
-                                </Button>
-                            </div>
+                    {/* Pagination */}
+                    <div className="flex items-center justify-between mt-4 pt-2">
+                        <p className="text-xs text-muted-foreground">
+                            Showing {offset + 1}–{Math.min(offset + limit, total)} of {total}
+                        </p>
+                        <div className="flex items-center gap-1">
+                            <Button
+                                variant="outline"
+                                size="sm"
+                                className="h-7 w-7 p-0"
+                                onClick={handlePrev}
+                                disabled={!hasPrev}
+                            >
+                                <ChevronLeft className="h-3.5 w-3.5" />
+                            </Button>
+                            <Button
+                                variant="outline"
+                                size="sm"
+                                className="h-7 w-7 p-0"
+                                onClick={handleNext}
+                                disabled={!hasNext}
+                            >
+                                <ChevronRight className="h-3.5 w-3.5" />
+                            </Button>
                         </div>
-                    </>
-                )}
-            </CardContent>
-        </Card>
+                    </div>
+                </>
+            )}
+        </section>
     );
 }
diff --git a/src/features/organizations/components/organization-billing-settings.tsx b/src/features/organizations/components/organization-billing-settings.tsx
index 67a3e873..d3784ba0 100644
--- a/src/features/organizations/components/organization-billing-settings.tsx
+++ b/src/features/organizations/components/organization-billing-settings.tsx
@@ -3,11 +3,9 @@
 import { useState, useCallback, useEffect } from "react";
 import { useQueryClient } from "@tanstack/react-query";
 import { Wallet, DollarSign, FileText, ExternalLink, Calendar, Loader2, CheckCircle2, AlertTriangle, Info, Plus } from "lucide-react";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Separator } from "@/components/ui/separator";
 import { Badge } from "@/components/ui/badge";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { format } from "date-fns";
@@ -21,7 +19,6 @@ import { useGetOrgMembers } from "../api/use-get-org-members";
 import { useUpdateOrganization } from "../api/use-update-organization";
 import { useGetInvoices } from "@/features/usage/api";
 
-// Billing API hooks
 import {
     useGetBillingAccount,
     useGetBillingStatus,
@@ -53,11 +50,9 @@ export function OrganizationBillingSettings({
     });
     const { mutate: updateOrganization } = useUpdateOrganization();
 
-    // Permission check - BILLING_MANAGE required to edit
     const { hasPermission: hasOrgPermission } = useCurrentUserOrgPermissions({ orgId: organizationId });
     const canManageBilling = hasOrgPermission(OrgPermissionKey.BILLING_MANAGE);
 
-    // Billing hooks
     const { data: billingAccountData, isLoading: isBillingLoading } = useGetBillingAccount({
         organizationId,
         enabled: !!organizationId
@@ -75,7 +70,6 @@ export function OrganizationBillingSettings({
     const [isScriptLoaded, setIsScriptLoaded] = useState(false);
     const [topupAmount, setTopupAmount] = useState("");
 
-    // Sync state with organization data
     useEffect(() => {
         if (organization) {
             try {
@@ -83,164 +77,82 @@ export function OrganizationBillingSettings({
                 setBillingEmailValue(settings.primaryEmail || "");
                 setAlternativeEmailValue(settings.alternativeEmail || "");
             } catch {
-                // Failed to parse billing settings
+                // ignore
             }
         }
     }, [organization]);
 
-    // Find organization owner email
     const ownerEmail = membersDoc?.documents.find(m => m.role === "OWNER")?.email;
-
-    // Billing account data
     const billingAccount = billingAccountData?.data;
-
     const invoices = invoicesDoc?.documents || [];
     const isLoading = isOrgLoading || isBillingLoading;
-
-    // Wallet balance from billing account data
     const walletBalance = billingAccountData?.walletBalance ?? 0;
     const walletCurrency = billingAccountData?.walletCurrency ?? "USD";
 
-    // Handler for save billing settings - must be defined before any conditional returns
     const handleSaveBillingSettings = useCallback(async () => {
-        if (!organizationId) {
-            toast.error("Organization ID is required");
-            return;
-        }
+        if (!organizationId) { toast.error("Organization ID is required"); return; }
 
         const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-
         if (billingEmailValue && !emailRegex.test(billingEmailValue)) {
-            toast.error("Please enter a valid primary email address");
-            return;
+            toast.error("Please enter a valid primary email address"); return;
         }
-
         if (alternativeEmailValue && !emailRegex.test(alternativeEmailValue)) {
-            toast.error("Please enter a valid alternative email address");
-            return;
+            toast.error("Please enter a valid alternative email address"); return;
         }
 
         setIsSaving(true);
-
-        const settings = {
-            primaryEmail: billingEmailValue || ownerEmail,
-            alternativeEmail: alternativeEmailValue
-        };
-
-        updateOrganization({
-            organizationId,
-            billingSettings: JSON.stringify(settings)
-        }, {
-            onSuccess: () => {
-                toast.success("Billing settings updated successfully!");
-                setIsSaving(false);
-            },
-            onError: () => {
-                toast.error("Failed to save billing settings");
-                setIsSaving(false);
-            }
+        const settings = { primaryEmail: billingEmailValue || ownerEmail, alternativeEmail: alternativeEmailValue };
+        updateOrganization({ organizationId, billingSettings: JSON.stringify(settings) }, {
+            onSuccess: () => { toast.success("Billing settings updated successfully!"); setIsSaving(false); },
+            onError: () => { toast.error("Failed to save billing settings"); setIsSaving(false); }
         });
     }, [organizationId, billingEmailValue, alternativeEmailValue, ownerEmail, updateOrganization]);
 
-    // Handler for adding credits to wallet
     const handleAddCredits = useCallback(async () => {
-        if (!organizationId) {
-            toast.error("Organization ID is required");
-            return;
-        }
-
+        if (!organizationId) { toast.error("Organization ID is required"); return; }
         const amount = Number(topupAmount);
-        if (!amount || amount < 1) {
-            toast.error("Minimum top-up amount is $1");
-            return;
-        }
-
-        if (!isScriptLoaded) {
-            toast.error("Payment system not ready. Please refresh the page.");
-            return;
-        }
+        if (!amount || amount < 1) { toast.error("Minimum top-up amount is $1"); return; }
+        if (!isScriptLoaded) { toast.error("Payment system not ready. Please refresh the page."); return; }
 
         setIsAddingCredits(true);
-
         try {
-            // First ensure billing account exists
             if (!billingAccountData?.data) {
                 try {
-                    await setupBilling({
-                        json: {
-                            type: BillingAccountType.ORG,
-                            organizationId,
-                            billingEmail: billingEmailValue || organization?.email || ownerEmail || undefined,
-                            contactName: organization?.name || "Organization Admin",
-                        }
-                    });
+                    await setupBilling({ json: {
+                        type: BillingAccountType.ORG,
+                        organizationId,
+                        billingEmail: billingEmailValue || organization?.email || ownerEmail || undefined,
+                        contactName: organization?.name || "Organization Admin",
+                    }});
                 } catch {
                     toast.error("Failed to initialize billing account. Please contact support.");
-                    setIsAddingCredits(false);
-                    return;
+                    setIsAddingCredits(false); return;
                 }
             }
 
-            // Create a Cashfree order for wallet top-up
-            const orderResponse = await client.api.wallet["create-order"].$post({
-                json: {
-                    amount, // Amount in full dollar units (float) with 6-decimal support
-                    organizationId,
-                },
-            });
-
+            const orderResponse = await client.api.wallet["create-order"].$post({ json: { amount, organizationId } });
             if (!orderResponse.ok) {
                 const errorData = await orderResponse.json().catch(() => ({}));
                 throw new Error((errorData as { error?: string }).error || "Failed to create order");
             }
 
             const orderResult = await orderResponse.json() as {
-                data: {
-                    orderId: string;
-                    paymentSessionId: string;
-                    key: string;
-                    amount: number;
-                    currency: string;
-                    environment: "sandbox" | "production";
-                    walletId: string;
-                    originalUsdCents: number;
-                    exchangeRate: number;
-                }
+                data: { orderId: string; paymentSessionId: string; key: string; amount: number; currency: string; environment: "sandbox" | "production"; walletId: string; originalUsdCents: number; exchangeRate: number; }
             };
             const orderData = orderResult.data;
+            const cashfree = window.Cashfree({ mode: (orderData.environment || "sandbox") as "sandbox" | "production" });
+            const checkoutResult = await cashfree.checkout({ paymentSessionId: orderData.paymentSessionId, redirectTarget: "_modal" });
 
-            // Open Cashfree Checkout for one-time payment
-            const cashfree = window.Cashfree({ 
-                mode: (orderData.environment || "sandbox") as "sandbox" | "production" 
-            });
-
-            const checkoutResult = await cashfree.checkout({
-                paymentSessionId: orderData.paymentSessionId,
-                redirectTarget: "_modal",
-            });
-
-            // Cashfree SDK v3 modal returns { error, paymentDetails } — NOT orderStatus/transaction
             if (checkoutResult.error) {
-                // User closed modal or payment error
-                if (checkoutResult.error.message?.includes("user")) {
-                    // User dismissed — don't show error
-                } else {
+                if (!checkoutResult.error.message?.includes("user")) {
                     toast.error(`Payment error: ${checkoutResult.error.message || "Unknown error"}`);
                 }
             } else {
-                // Modal closed without error — verify payment server-side
-                // The backend fetches order status and payment details from Cashfree API directly
                 try {
-                    const verifyResponse = await client.api.wallet["verify-topup"].$post({
-                        json: {
-                            cashfreeOrderId: orderData.orderId,
-                        },
-                    });
-
+                    const verifyResponse = await client.api.wallet["verify-topup"].$post({ json: { cashfreeOrderId: orderData.orderId } });
                     if (!verifyResponse.ok) {
                         const errorData = await verifyResponse.json().catch(() => ({}));
                         const errorMsg = (errorData as { error?: string }).error || "Verification failed";
-                        // If order is still ACTIVE, payment might not be complete yet
                         if (errorMsg.includes("ACTIVE")) {
                             toast.info("Payment is being processed. Your wallet will be credited shortly via webhook.");
                         } else {
@@ -248,7 +160,6 @@ export function OrganizationBillingSettings({
                         }
                     } else {
                         toast.success(`$${amount} added to your wallet successfully!`);
-                        // Refresh billing data to get updated balance
                         queryClient.invalidateQueries({ queryKey: ["billing-account"] });
                         queryClient.invalidateQueries({ queryKey: ["billing-status"] });
                         setTopupAmount("");
@@ -267,7 +178,7 @@ export function OrganizationBillingSettings({
 
     if (isLoading) {
         return (
-            <div className="flex flex-col items-center justify-center p-12 space-y-4">
+            <div className="flex flex-col items-center justify-center p-12 gap-3">
                 <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
                 <p className="text-sm text-muted-foreground">Loading billing settings...</p>
             </div>
@@ -276,17 +187,13 @@ export function OrganizationBillingSettings({
 
     return (
         <>
-            {/* Load Cashfree SDK Script */}
             <Script
                 src="https://sdk.cashfree.com/js/v3/cashfree.js"
                 onLoad={() => setIsScriptLoaded(true)}
-                onError={() => {
-                    // Failed to load Cashfree script
-                }}
+                onError={() => { /* ignore */ }}
             />
 
-            <div className="space-y-6">
-                {/* Billing Warning Banner - shows during grace period */}
+            <div className="flex flex-col gap-10">
                 {billingStatus?.status === BillingStatus.DUE && (
                     <BillingWarningBanner
                         billingStatus={BillingStatus.DUE}
@@ -295,219 +202,171 @@ export function OrganizationBillingSettings({
                     />
                 )}
 
-                {/* Billing Overview */}
-                <Card>
-                    <CardHeader>
-                        <CardTitle className="flex items-center gap-2">
-                            <DollarSign className="h-5 w-5" />
-                            Billing Overview
-                        </CardTitle>
-                        <CardDescription>
-                            Organization-level billing information and settings
-                        </CardDescription>
-                    </CardHeader>
-                    <CardContent className="space-y-4">
-                        {/* Billing Status Alert */}
-                        {billingStatus?.status === BillingStatus.SUSPENDED && (
-                            <Alert variant="destructive">
-                                <AlertTriangle className="h-4 w-4" />
-                                <AlertDescription>
-                                    <strong>Account Suspended</strong> - Your organization has been suspended due to an unpaid invoice.
-                                    Please update your payment method below to restore access.
-                                </AlertDescription>
-                            </Alert>
-                        )}
-
-                        {/* Billing Timeline - Item 4.6 */}
-                        <div className="rounded-lg border border-border p-5 bg-muted/50 relative overflow-hidden">
-                            <div className="absolute top-0 right-0 p-3 opacity-10">
-                                <Calendar className="h-16 w-16" />
-                            </div>
-
-                            <h4 className="text-sm font-semibold flex items-center gap-2 mb-4 text-blue-700 dark:text-blue-400">
-                                <Calendar className="h-4 w-4" />
-                                Billing Lifecycle
-                            </h4>
-
-                            <div className="relative pl-6 space-y-6">
-                                {/* Vertical Line Connector */}
-                                <div className="absolute left-[7px] top-2 bottom-2 w-[2px] bg-primary/30" />
+                {/* ── Billing Overview ── */}
+                <section>
+                    <h2 className="text-[18px] font-semibold mb-1">Billing</h2>
+                    <p className="text-xs text-muted-foreground mb-6">Organization-level billing information and settings</p>
 
-                                {/* Personal Phase */}
-                                <div className="relative">
-                                    <div className="absolute -left-[23px] top-1.5 w-3.5 h-3.5 rounded-full border-2 border-white dark:border-background bg-muted-foreground/50 z-10" />
-                                    <div className="space-y-1">
+                    {billingStatus?.status === BillingStatus.SUSPENDED && (
+                        <Alert variant="destructive" className="mb-4">
+                            <AlertTriangle className="h-4 w-4" />
+                            <AlertDescription>
+                                <strong>Account Suspended</strong> — Your organization has been suspended due to an unpaid invoice.
+                                Please update your payment method below to restore access.
+                            </AlertDescription>
+                        </Alert>
+                    )}
+
+                    <div className="divide-y divide-border">
+                        {/* Billing Lifecycle */}
+                        <div className="flex flex-col pt-4 pb-8 gap-4">
+                            <div className="shrink-0">
+                                <p className="text-sm font-medium">Billing Lifecycle</p>
+                                <p className="text-xs text-muted-foreground mt-0.5">Timeline of your billing activity</p>
+                            </div>
+                            <div className="rounded-lg border border-border p-5 bg-muted/30 relative overflow-hidden w-full max-w-xl">
+                                <div className="relative pl-6 gap-5 flex flex-col">
+                                    <div className="absolute left-[7px]  top-2 bottom-2 w-[2px] bg-primary/20" />
+                                    <div className="relative">
+                                        <div className="absolute -left-[23px] top-1.5 w-3.5 h-3.5 rounded-full border-2 border-background bg-muted-foreground/40 z-10" />
                                         <div className="flex items-center justify-between">
-                                            <span className="font-medium text-foreground">Personal Account Usage</span>
-                                            <Badge variant="outline" className="text-[10px] h-4 px-1.5 uppercase tracking-wider font-bold bg-white/50 dark:bg-black/20">Historic</Badge>
+                                            <span className="text-sm font-medium text-muted-foreground">Personal Account Usage</span>
+                                            <Badge variant="outline" className="text-[10px] h-4 px-1.5 uppercase tracking-wider font-bold">Historic</Badge>
                                         </div>
-                                        <p className="text-xs text-muted-foreground leading-relaxed">
-                                            All activity prior to organization creation. Billed directly to your personal payment method.
-                                        </p>
+                                        <p className="text-xs text-muted-foreground mt-0.5">All activity prior to organization creation.</p>
                                     </div>
-                                </div>
-
-                                {/* Organization Phase */}
-                                <div className="relative">
-                                    <div className="absolute -left-[23px] top-1.5 w-3.5 h-3.5 rounded-full border-2 border-white dark:border-background bg-blue-600 z-10 shadow-[0_0_8px_rgba(37,99,235,0.4)]" />
-                                    <div className="space-y-1">
+                                    <div className="relative">
+                                        <div className="absolute -left-[23px] top-1.5 w-3.5 h-3.5 rounded-full border-2 border-background bg-blue-600 z-10 shadow-[0_0_8px_rgba(37,99,235,0.4)]" />
                                         <div className="flex items-center justify-between">
-                                            <span className="font-medium text-blue-700 dark:text-blue-400">Organization Managed Billing</span>
-                                            <Badge variant="secondary" className="text-[10px] h-4 px-1.5 uppercase tracking-wider font-bold bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300">Active</Badge>
-                                        </div>
-                                        <div className="flex items-center gap-2 text-xs text-blue-600/80 dark:text-blue-400/80 font-medium">
-                                            <span>Started on {organization?.billingStartAt ? format(new Date(organization.billingStartAt), "PPP") : "Creation"}</span>
+                                            <span className="text-sm font-medium text-blue-700 dark:text-blue-400">Organization Managed Billing</span>
+                                            <Badge variant="secondary" className="text-[10px] h-4 px-1.5 uppercase tracking-wider font-bold bg-blue-100 text-blue-700">Active</Badge>
                                         </div>
-                                        <p className="text-xs text-muted-foreground leading-relaxed">
-                                            All shared workspaces and team activity are consolidated into this organization&apos;s billing cycle.
+                                        <p className="text-xs text-muted-foreground mt-0.5">
+                                            Started {organization?.billingStartAt ? format(new Date(organization.billingStartAt), "PPP") : "on creation"}
                                         </p>
                                     </div>
                                 </div>
                             </div>
+                        </div>
 
-                            <div className="mt-4 pt-4 border-t border-border flex items-center justify-between">
-                                <p className="text-[11px] text-blue-600/70 dark:text-blue-400/70 italic">
-                                    * The transition occurred when your account was converted to an organization.
-                                </p>
-                                <Button variant="ghost" size="sm" asChild className="text-blue-600 dark:text-blue-400 font-semibold h-7 px-2 hover:bg-blue-100 dark:hover:bg-blue-900/40">
-                                    <Link href="/organization/usage">
-                                        View Detailed Usage
-                                        <ExternalLink className="ml-1.5 h-3 w-3" />
-                                    </Link>
-                                </Button>
+                        {/* Billing Entity */}
+                        <div className="flex flex-col py-8 gap-4">
+                            <div className="shrink-0">
+                                <p className="text-sm font-medium">Billing Entity</p>
+                                <p className="text-xs text-muted-foreground mt-0.5">All workspaces in this organization share billing</p>
+                            </div>
+                            <div className="flex items-center gap-2">
+                                <Input value={organization?.name || organizationName} disabled className="w-fit h-8 text-sm" />
+                                <Badge  variant="secondary">Organization</Badge>
                             </div>
                         </div>
 
-                        <Separator />
-
-                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                            <div className="space-y-2">
-                                <Label>Billing Entity</Label>
-                                <div className="flex items-center gap-2">
-                                    <Input value={organization?.name || organizationName} disabled className="flex-1" />
-                                    <Badge variant="default">Organization</Badge>
-                                </div>
-                                <p className="text-xs text-muted-foreground">
-                                    All workspaces in this organization share billing
-                                </p>
-                            </div>
-                            <div className="space-y-2">
-                                <Label>Billing Status</Label>
-                                <div className="flex items-center gap-2">
-                                    <Badge
-                                        variant={
-                                            billingStatus?.status === BillingStatus.ACTIVE ? "default" :
-                                                billingStatus?.status === BillingStatus.DUE ? "secondary" :
-                                                    "destructive"
-                                        }
-                                        className={cn(
-                                            billingStatus?.status === BillingStatus.ACTIVE && "bg-green-100 dark:bg-green-900/40 text-green-700 dark:text-green-400",
-                                            billingStatus?.status === BillingStatus.DUE && "bg-orange-100 dark:bg-orange-900/40 text-orange-700 dark:text-orange-400"
-                                        )}
-                                    >
-                                        {billingStatus?.status || "ACTIVE"}
-                                    </Badge>
-                                    {billingStatus?.status === BillingStatus.DUE && billingStatus.daysUntilSuspension !== undefined && (
-                                        <span className="text-xs text-orange-600">
-                                            ({billingStatus.daysUntilSuspension} days until suspension)
-                                        </span>
-                                    )}
-                                </div>
+                        {/* Status */}
+                        <div className="flex flex-col py-8 gap-4">
+                            <div className="shrink-0">
+                                <p className="text-sm font-medium">Billing Status</p>
                                 {billingAccount?.billingCycleEnd && (
-                                    <p className="text-xs text-muted-foreground">
+                                    <p className="text-xs text-muted-foreground mt-0.5">
                                         Next billing: {format(new Date(billingAccount.billingCycleEnd), "PPP")}
                                     </p>
                                 )}
                             </div>
-                        </div>
-
-                        <Separator />
-
-                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                            <div className="space-y-2">
-                                <Label htmlFor="billingEmail">Primary Billing Email</Label>
-                                <Input
-                                    id="billingEmail"
-                                    type="email"
-
-                                    value={billingEmailValue}
-                                    onChange={(e) => setBillingEmailValue(e.target.value)}
-                                    placeholder={ownerEmail || "owner@example.com"}
-                                    disabled={isSaving || !canManageBilling}
-                                />
-                                <div className="text-[11px] text-muted-foreground flex items-center gap-1">
-                                    {billingEmailValue ? (
-                                        <span>Custom billing email active</span>
-                                    ) : (
-                                        <>
-                                            <Badge variant="outline" className="text-[9px] h-3.5 px-1 uppercase font-bold">Default</Badge>
-                                            <span>Using owner: {ownerEmail || "loading..."}</span>
-                                        </>
+                            <div className="flex items-center gap-2">
+                                <Badge
+                                    variant={billingStatus?.status === BillingStatus.ACTIVE ? "default" : billingStatus?.status === BillingStatus.DUE ? "secondary" : "destructive"}
+                                    className={cn(
+                                        billingStatus?.status === BillingStatus.ACTIVE && "bg-green-100 text-green-700",
+                                        billingStatus?.status === BillingStatus.DUE && "bg-orange-100 text-orange-700"
                                     )}
-                                </div>
+                                >
+                                    {billingStatus?.status || "ACTIVE"}
+                                </Badge>
+                                {billingStatus?.status === BillingStatus.DUE && billingStatus.daysUntilSuspension !== undefined && (
+                                    <span className="text-xs text-orange-600">
+                                        ({billingStatus.daysUntilSuspension} days until suspension)
+                                    </span>
+                                )}
                             </div>
+                        </div>
 
-                            <div className="space-y-2">
-                                <Label htmlFor="alternativeEmail">Alternative Billing Email (Optional)</Label>
-                                <Input
-                                    id="alternativeEmail"
-                                    type="email"
-                                    value={alternativeEmailValue}
-                                    onChange={(e) => setAlternativeEmailValue(e.target.value)}
-                                    placeholder="finance@company.com"
-                                    disabled={isSaving || !canManageBilling}
-                                />
-                                <p className="text-[11px] text-muted-foreground">
-                                    Secondary contact for billing notifications
+                        {/* Primary Billing Email */}
+                        <div className="flex flex-col py-8 gap-4">
+                            <div className="shrink-0">
+                                <p className="text-sm font-medium">Primary Billing Email</p>
+                                <p className="text-xs text-muted-foreground mt-0.5">
+                                    {billingEmailValue ? "Custom billing email active" : `Default: ${ownerEmail || "owner email"}`}
                                 </p>
                             </div>
+                            <Input
+                                id="billingEmail"
+                                type="email"
+                                value={billingEmailValue}
+                                onChange={(e) => setBillingEmailValue(e.target.value)}
+                                placeholder={ownerEmail || "owner@example.com"}
+                                disabled={isSaving || !canManageBilling}
+                                className="w-6/12 h-8 text-sm rounded-md border border-border bg-transparent px-2 shadow-none focus-visible:ring-0 focus-visible:border-primary"
+                            />
                         </div>
 
-                        <Button onClick={handleSaveBillingSettings} disabled={isSaving || !canManageBilling}>
-                            {isSaving ? (
-                                <>
-                                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                                    Saving...
-                                </>
-                            ) : (
-                                "Save Billing Settings"
-                            )}
-                        </Button>
-                    </CardContent>
-                </Card>
-
-                {/* Wallet Balance & Add Credits */}
-                <Card>
-                    <CardHeader>
-                        <CardTitle className="flex items-center gap-2">
-                            <Wallet className="h-5 w-5" />
-                            Wallet Balance
-                        </CardTitle>
-                        <CardDescription>
-                            Manage your organization&apos;s Fairlx wallet for usage billing
-                        </CardDescription>
-                    </CardHeader>
-                    <CardContent className="space-y-4">
-                        {/* Wallet explanation */}
-                        <Alert>
-                            <Info className="h-4 w-4" />
-                            <AlertDescription>
-                                <strong>How wallet billing works:</strong> Usage costs are deducted from your wallet balance.
-                                Add credits anytime via UPI, Card, or Net Banking. No recurring mandates needed.
-                            </AlertDescription>
-                        </Alert>
+                        {/* Alternative Email */}
+                        <div className="flex flex-col py-8 gap-4">
+                            <div className="shrink-0">
+                                <p className="text-sm font-medium">Alternative Billing Email</p>
+                                <p className="text-xs text-muted-foreground mt-0.5">Optional secondary contact for billing notifications</p>
+                            </div>
+                            <Input
+                                id="alternativeEmail"
+                                type="email"
+                                value={alternativeEmailValue}
+                                onChange={(e) => setAlternativeEmailValue(e.target.value)}
+                                placeholder="finance@company.com"
+                                disabled={isSaving || !canManageBilling}
+                                className="w-6/12 h-8 text-sm rounded-md border border-border bg-transparent px-2 shadow-none focus-visible:ring-0 focus-visible:border-primary"
+                            />
+                        </div>
+                    </div>
 
-                        {/* Current Balance - PREMIUM ENHANCED SECTION */}
-                        <div className="relative overflow-hidden group border-none shadow-xl rounded-2xl bg-gradient-to-br from-blue-600 via-indigo-700 to-purple-800 p-8 text-white mb-6">
-                            {/* Animated shapes */}
-                            <div className="absolute top-0 right-0 -mr-20 -mt-20 w-64 h-64 bg-white/10 rounded-full blur-3xl" />
-                            <div className="absolute bottom-0 left-0 -ml-10 -mb-10 w-40 h-40 bg-blue-400/10 rounded-full blur-2xl" />
-
-                            <div className="relative z-10 flex flex-col md:flex-row md:items-end justify-between gap-6">
-                                <div className="space-y-1">
-                                    <span className="text-blue-200 text-xs uppercase tracking-widest font-bold">Total Available Balance</span>
-                                    <div className="flex items-baseline gap-2 mt-2">
-                                        <span className="text-6xl font-extrabold tracking-tighter">
+                    {canManageBilling && (
+                        <div className="w-full flex justify-end pt-4">
+                            <Button onClick={handleSaveBillingSettings} disabled={isSaving} size="xs">
+                                {isSaving && <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />}
+                                Save Billing Settings
+                            </Button>
+                        </div>
+                    )}
+                </section>
+
+                {/* ── Wallet ── */}
+                <section>
+                    <h2 className="text-[18px] font-semibold mb-1 flex items-center gap-2">
+                        <Wallet className="h-5 w-5" />
+                        Wallet
+                    </h2>
+                    <p className="text-xs text-muted-foreground mb-6">
+                        Manage your organization&apos;s Fairlx wallet for usage billing
+                    </p>
+
+                    <Alert className="mb-4">
+                        <Info className="h-4 w-4" />
+                        <AlertDescription>
+                            <strong>How wallet billing works:</strong> Usage costs are deducted from your wallet balance.
+                            Add credits anytime via UPI, Card, or Net Banking. No recurring mandates needed.
+                        </AlertDescription>
+                    </Alert>
+
+                    <div className="divide-y divide-border">
+                        {/* Balance display */}
+                        <div className="flex flex-col py-4 gap-4">
+                            <div className="shrink-0">
+                                <p className="text-sm font-medium">Available Balance</p>
+                                <p className="text-xs text-muted-foreground mt-0.5">Current wallet credit balance</p>
+                            </div>
+                            <div className="relative overflow-hidden rounded-xl border-none shadow-xl bg-gradient-to-br from-blue-600 via-indigo-700 to-purple-800 p-6 text-white w-full max-w-sm">
+                                <div className="absolute top-0 right-0 -mr-10 -mt-10 w-40 h-40 bg-white/10 rounded-full blur-3xl" />
+                                <div className="relative">
+                                    <span className="text-blue-200 text-xs uppercase tracking-widest font-bold">Total Balance</span>
+                                    <div className="flex items-baseline gap-2 mt-1">
+                                        <span className="text-4xl font-extrabold tracking-tighter">
                                             {new Intl.NumberFormat("en-US", {
                                                 style: "currency",
                                                 currency: walletCurrency,
@@ -515,62 +374,51 @@ export function OrganizationBillingSettings({
                                                 maximumFractionDigits: 6,
                                             }).format(walletBalance)}
                                         </span>
-                                        <span className="text-blue-200 font-medium text-lg uppercase">{walletCurrency}</span>
+                                        <span className="text-blue-200 font-medium uppercase">{walletCurrency}</span>
                                     </div>
-                                    <div className="flex items-center gap-2 mt-4 text-sm text-blue-100/80 bg-white/10 backdrop-blur-md w-fit px-3 py-1 rounded-full border border-white/10">
+                                    <div className="flex items-center gap-1.5 mt-3 text-xs text-blue-100/80 bg-white/10 w-fit px-2.5 py-1 rounded-full">
                                         {walletBalance > 0 ? (
-                                            <CheckCircle2 className="h-4 w-4 text-emerald-400" />
+                                            <CheckCircle2 className="h-3.5 w-3.5 text-emerald-400" />
                                         ) : (
-                                            <AlertTriangle className="h-4 w-4 text-orange-400" />
+                                            <AlertTriangle className="h-3.5 w-3.5 text-orange-400" />
                                         )}
-                                        {walletBalance > 0 ? "Account in Good Standing" : "Top-up Required"}
-                                    </div>
-                                </div>
-
-                                <div className="hidden md:block">
-                                    <div className="flex flex-col items-end gap-2 text-[11px] text-blue-200/60 italic">
-                                        <span>* Balance used for AI, storage, and traffic</span>
-                                        <span>* Minimum top-up amount $1</span>
+                                        {walletBalance > 0 ? "Good Standing" : "Top-up Required"}
                                     </div>
                                 </div>
                             </div>
+                            {walletBalance < 100 && (
+                                <Alert className="border-orange-200 bg-orange-50 max-w-sm">
+                                    <AlertTriangle className="h-4 w-4 text-orange-600" />
+                                    <AlertDescription className="text-orange-700 text-xs">
+                                        Wallet balance is low. Add credits to avoid service interruptions.
+                                    </AlertDescription>
+                                </Alert>
+                            )}
                         </div>
 
-                        {/* Low balance warning */}
-                        {walletBalance < 100 && (
-                            <Alert className="border-orange-200 dark:border-orange-800 bg-orange-50 dark:bg-orange-950/30">
-                                <AlertTriangle className="h-4 w-4 text-orange-600" />
-                                <AlertDescription className="text-orange-700 dark:text-orange-400">
-                                    Your wallet balance is low. Add credits to avoid service interruptions.
-                                </AlertDescription>
-                            </Alert>
-                        )}
-
-                        {/* Add Credits Section */}
-                        <div className="border rounded-2xl bg-muted/30 p-6">
-                            <div className="flex flex-col md:flex-row items-center gap-6">
-                                <div className="flex-1 w-full space-y-4">
-                                    <div className="space-y-2">
-                                        <Label htmlFor="topup-amount" className="text-sm font-semibold">
-                                            Top-up Amount ($)
-                                        </Label>
-                                        <div className="relative">
-                                            <DollarSign className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-                                            <Input
-                                                id="topup-amount"
-                                                type="number"
-                                                min="1"
-                                                className="pl-9 h-12 text-lg font-bold"
-                                                placeholder="100"
-                                                value={topupAmount}
-                                                onChange={(e) => setTopupAmount(e.target.value)}
-                                                disabled={isAddingCredits || !canManageBilling}
-                                            />
-                                        </div>
+                        {/* Add Credits */}
+                        <div className="flex flex-col py-8   gap-4">
+                            <div className="shrink-0">
+                                <p className="text-sm font-medium">Add Credits</p>
+                                <p className="text-xs text-muted-foreground mt-0.5">Top up your wallet via UPI, Card, or Net Banking</p>
+                            </div>
+                            <div className="flex items-end gap-4">
+                                <div className="space-y-2">
+                                    <Label htmlFor="topup-amount" className="text-xs font-medium">Amount (USD)</Label>
+                                    <div className="relative">
+                                        <DollarSign className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
+                                        <Input
+                                            id="topup-amount"
+                                            type="number"
+                                            min="1"
+                                            className="pl-7 h-8 w-32 text-sm"
+                                            placeholder="100"
+                                            value={topupAmount}
+                                            onChange={(e) => setTopupAmount(e.target.value)}
+                                            disabled={isAddingCredits || !canManageBilling}
+                                        />
                                     </div>
-
-                                    {/* Quick top-up amounts */}
-                                    <div className="flex flex-wrap gap-2">
+                                    <div className="flex flex-wrap gap-1.5">
                                         {[5, 10, 25, 50, 100].map((amt) => (
                                             <Button
                                                 key={amt}
@@ -579,8 +427,8 @@ export function OrganizationBillingSettings({
                                                 onClick={() => setTopupAmount(String(amt))}
                                                 disabled={isAddingCredits || !canManageBilling}
                                                 className={cn(
-                                                    "h-8 px-4 text-xs font-bold transition-all",
-                                                    topupAmount === String(amt) && "border-primary bg-primary/10 text-primary scale-105"
+                                                    "h-7 px-2.5 text-xs",
+                                                    topupAmount === String(amt) && "border-primary bg-primary/10 text-primary"
                                                 )}
                                             >
                                                 ${amt}
@@ -588,138 +436,124 @@ export function OrganizationBillingSettings({
                                         ))}
                                     </div>
                                 </div>
-
-                                <div className="w-full md:w-64 pt-4 md:pt-0">
-                                    <Button
-                                        onClick={handleAddCredits}
-                                        disabled={isAddingCredits || !topupAmount || Number(topupAmount) < 1 || !canManageBilling}
-                                        className="w-full h-24 flex-col gap-2 rounded-2xl shadow-lg hover:shadow-primary/20 transition-all"
-                                        size="lg"
-                                    >
-                                        {isAddingCredits ? (
-                                            <Loader2 className="h-6 w-6 animate-spin" />
-                                        ) : (
-                                            <Plus className="h-6 w-6" />
-                                        )}
-                                        <div className="flex flex-col items-center">
-                                            <span className="text-base font-bold">
-                                                {isAddingCredits ? "Processing..." : `Add $${topupAmount || '0'}`}
-                                            </span>
-                                            {!isAddingCredits && <span className="text-[10px] font-medium opacity-70">Credit Wallet Now</span>}
-                                        </div>
-                                    </Button>
-                                </div>
+                                <Button
+                                    onClick={handleAddCredits}
+                                    disabled={isAddingCredits || !topupAmount || Number(topupAmount) < 1 || !canManageBilling}
+                                    size="xs"
+                                    className="gap-1.5"
+                                >
+                                    {isAddingCredits ? (
+                                        <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                                    ) : (
+                                        <Plus className="h-3.5 w-3.5" />
+                                    )}
+                                    {isAddingCredits ? "Processing..." : `Add $${topupAmount || "0"}`}
+                                </Button>
                             </div>
-                            
-                            <p className="mt-4 text-[11px] text-muted-foreground text-center flex items-center justify-center gap-2">
+                            <p className="text-xs text-muted-foreground flex items-center gap-1.5">
                                 <Info className="h-3 w-3" />
-                                Payments processed securely by Cashfree. Minimum $1. Credits are valid for AI & resource costs.
+                                Payments processed securely by Cashfree. Minimum $1.
                             </p>
                         </div>
-                    </CardContent>
-                </Card>
-
-                {/* Invoice History */}
-                <Card>
-                    <CardHeader>
-                        <div className="flex items-center justify-between">
-                            <div>
-                                <CardTitle className="flex items-center gap-2">
-                                    <FileText className="h-5 w-5" />
-                                    Invoice History
-                                </CardTitle>
-                                <CardDescription>
-                                    View and download past invoices
-                                </CardDescription>
-                            </div>
-                            <Button variant="outline" size="sm" asChild>
-                                <Link href={`/organization/settings/billing?tab=invoices`}>
-                                    View All Invoices
-                                    <ExternalLink className="ml-2 h-3 w-3" />
-                                </Link>
-                            </Button>
+                    </div>
+                </section>
+
+                {/* ── Invoice History ── */}
+                <section>
+                    <div className="flex items-center justify-between mb-6">
+                        <div>
+                            <h2 className="text-[18px] font-semibold">Invoices</h2>
+                            <p className="text-xs text-muted-foreground mt-0.5">View and download past invoices</p>
                         </div>
-                    </CardHeader>
-                    <CardContent>
-                        <div className="space-y-2">
-                            {isInvoicesLoading ? (
-                                <div className="flex flex-col items-center justify-center py-10 space-y-2">
-                                    <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
-                                    <p className="text-xs text-muted-foreground">Loading invoices...</p>
-                                </div>
-                            ) : invoices.length === 0 ? (
-                                <div className="text-center py-10 border rounded-lg border-dashed">
-                                    <FileText className="h-8 w-8 text-muted-foreground mx-auto mb-2 opacity-50" />
-                                    <p className="text-sm text-muted-foreground">No invoices found for this organization yet.</p>
-                                    <p className="text-xs text-muted-foreground mt-1">Invoices are generated at the end of each billing cycle.</p>
+                        <Button variant="outline" size="sm" className="gap-1.5 text-xs" asChild>
+                            <Link href="/organization/settings/billing?tab=invoices">
+                                View All
+                                <ExternalLink className="h-3 w-3" />
+                            </Link>
+                        </Button>
+                    </div>
+
+                    {isInvoicesLoading ? (
+                        <div className="border rounded-lg overflow-hidden">
+                            {[1, 2, 3].map((i) => (
+                                <div key={i} className="flex items-center gap-4 px-4 py-3 border-b">
+                                    <div className="flex-1 space-y-1">
+                                        <div className="h-4 w-24 bg-muted animate-pulse rounded" />
+                                        <div className="h-3 w-32 bg-muted animate-pulse rounded" />
+                                    </div>
+                                    <div className="h-4 w-16 bg-muted animate-pulse rounded" />
+                                    <div className="h-6 w-12 bg-muted animate-pulse rounded" />
                                 </div>
-                            ) : (
-                                invoices.map((invoice) => (
-                                    <div
-                                        key={invoice.$id}
-                                        className="flex items-center justify-between p-3 rounded-lg border"
-                                    >
-                                        <div className="flex items-center gap-4">
-                                            <FileText className="h-4 w-4 text-muted-foreground" />
-                                            <div>
-                                                <div className="font-medium">{invoice.invoiceId}</div>
-                                                <div className="text-sm text-muted-foreground flex items-center gap-1">
-                                                    <Calendar className="h-3 w-3" />
-                                                    {format(new Date(invoice.createdAt), "PPP")}
-                                                </div>
-                                            </div>
+                            ))}
+                        </div>
+                    ) : invoices.length === 0 ? (
+                        <div className="text-center py-10 border rounded-lg border-dashed">
+                            <FileText className="h-8 w-8 text-muted-foreground mx-auto mb-2 opacity-50" />
+                            <p className="text-sm text-muted-foreground">No invoices yet</p>
+                            <p className="text-xs text-muted-foreground mt-1">Invoices are generated at the end of each billing cycle.</p>
+                        </div>
+                    ) : (
+                        <div className="border rounded-lg overflow-hidden">
+                            {/* Header */}
+                            <div className="flex items-center gap-4 px-4 py-2.5 bg-muted/30 border-b text-xs font-medium text-muted-foreground">
+                                <div className="flex-1">Invoice ID</div>
+                                <div className="w-32">Date</div>
+                                <div className="w-24 text-right">Amount</div>
+                                <div className="w-20">Status</div>
+                                <div className="w-20 text-right">Actions</div>
+                            </div>
+                            <div className="divide-y divide-border">
+                                {invoices.map((invoice) => (
+                                    <div key={invoice.$id} className="flex items-center gap-4 px-4 py-3 hover:bg-muted/30 transition-colors">
+                                        <div className="flex-1 flex items-center gap-2.5 min-w-0">
+                                            <FileText className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+                                            <span className="text-sm font-medium truncate">{invoice.invoiceId}</span>
+                                        </div>
+                                        <div className="w-32 shrink-0 text-xs text-muted-foreground flex items-center gap-1">
+                                            <Calendar className="h-3 w-3" />
+                                            {format(new Date(invoice.createdAt), "MMM d, yyyy")}
                                         </div>
-                                        <div className="flex items-center gap-3">
-                                            <div className="text-right">
-                                                <div className="font-semibold">
-                                                    {new Intl.NumberFormat("en-US", {
-                                                        style: "currency",
-                                                        currency: "USD",
-                                                        minimumFractionDigits: 2,
-                                                        maximumFractionDigits: 6,
-                                                    }).format(invoice.totalCost)}
-                                                </div>
-                                                <Badge
-                                                    variant={invoice.status === 'paid' ? 'default' : 'outline'}
-                                                    className={cn(
-                                                        "text-[10px] h-4 px-1.5 uppercase",
-                                                        invoice.status === 'paid' && "bg-green-100 dark:bg-green-900/40 text-green-700 dark:text-green-400 border-green-200 dark:border-green-800",
-                                                        invoice.status === 'draft' && "bg-muted text-muted-foreground border-border"
-                                                    )}
-                                                >
-                                                    {invoice.status}
-                                                </Badge>
-                                            </div>
-                                            <Button variant="ghost" size="sm">
+                                        <div className="w-24 shrink-0 text-sm font-semibold text-right">
+                                            {new Intl.NumberFormat("en-US", {
+                                                style: "currency",
+                                                currency: "USD",
+                                                minimumFractionDigits: 2,
+                                                maximumFractionDigits: 6,
+                                            }).format(invoice.totalCost)}
+                                        </div>
+                                        <div className="w-20 shrink-0">
+                                            <Badge
+                                                variant="outline"
+                                                className={cn(
+                                                    "text-[10px] h-5 px-1.5 uppercase",
+                                                    invoice.status === "paid" && "bg-emerald-100 text-emerald-700 border-emerald-200",
+                                                    invoice.status === "draft" && "bg-muted text-muted-foreground"
+                                                )}
+                                            >
+                                                {invoice.status}
+                                            </Badge>
+                                        </div>
+                                        <div className="w-20 shrink-0 flex justify-end">
+                                            <Button variant="ghost" size="sm" className="h-7 text-xs">
                                                 Download
                                             </Button>
                                         </div>
                                     </div>
-                                ))
-                            )}
-                        </div>
-                    </CardContent>
-                </Card>
-
-                {/* Usage Dashboard Link */}
-                <Card className="bg-card border-blue-600/20">
-                    <CardContent className="py-6">
-                        <div className="flex items-center justify-between">
-                            <div>
-                                <h3 className="font-semibold text-foreground">View Detailed Usage</h3>
-                                <p className="text-sm text-muted-foreground mt-1">
-                                    Monitor your organization&apos;s usage metrics and costs
-                                </p>
+                                ))}
                             </div>
-                            <Button asChild>
-                                <Link href="/organization/usage">
-                                    <DollarSign className="mr-2 h-4 w-4" />
-                                    Usage Dashboard
-                                </Link>
-                            </Button>
                         </div>
-                    </CardContent>
-                </Card>
+                    )}
+
+                    <div className="flex items-center justify-between mt-6 pt-4 border-t">
+                        <p className="text-sm font-medium">View Detailed Usage</p>
+                        <Button variant="outline" size="sm" className="gap-1.5 text-xs" asChild>
+                            <Link href="/organization/usage">
+                                <DollarSign className="h-3.5 w-3.5" />
+                                Usage Dashboard
+                            </Link>
+                        </Button>
+                    </div>
+                </section>
             </div>
         </>
     );
diff --git a/src/features/organizations/components/organization-rewards.tsx b/src/features/organizations/components/organization-rewards.tsx
index c7835fd0..0b8c3a69 100644
--- a/src/features/organizations/components/organization-rewards.tsx
+++ b/src/features/organizations/components/organization-rewards.tsx
@@ -1,9 +1,7 @@
 "use client";
 
-import { Gift, Star, ExternalLink } from "lucide-react";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Gift, Star, ExternalLink, Sparkles } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { Separator } from "@/components/ui/separator";
 import { Badge } from "@/components/ui/badge";
 import { RedeemCouponCard } from "@/features/github-rewards/components/RedeemCouponCard";
 
@@ -11,92 +9,88 @@ interface OrganizationRewardsProps {
     organizationId: string;
 }
 
+const STEPS = [
+    {
+        title: "Visit the Star Reward page",
+        description: "Go to our landing page and start the reward flow",
+    },
+    {
+        title: "Connect GitHub & star the repo",
+        description: "Authenticate with GitHub and star our repository",
+    },
+    {
+        title: "Get your coupon & redeem here",
+        description: "Receive a FAIRLX-XXXXXXXX code and paste it above",
+    },
+];
+
 export const OrganizationRewards = ({ organizationId }: OrganizationRewardsProps) => {
     return (
-        <div className="flex flex-col gap-6 max-w-3xl">
-            {/* Header */}
-            <div className="flex items-center justify-between">
-                <div>
-                    <h2 className="text-xl font-semibold">Organization Rewards</h2>
-                    <p className="text-sm text-muted-foreground">
-                        Redeem reward coupons for your organization wallet
-                    </p>
+        <div className="flex flex-col gap-8 w-full ">
+            {/* Hero banner */}
+            <div className="relative overflow-hidden rounded-xl border border-pink-500/20 bg-gradient-to-br from-pink-500/10 via-purple-500/5 to-transparent p-6">
+                <div className="absolute top-0 right-0 -mr-8 -mt-8 h-32 w-32 rounded-full bg-pink-500/10 blur-2xl" />
+                <div className="relative flex items-start gap-4">
+                    <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-pink-500/10">
+                        <Gift className="h-5 w-5 text-pink-600" />
+                    </div>
+                    <div className="flex-1">
+                        <div className="flex items-center gap-2 mb-1">
+                            <h2 className="text-[18px] font-semibold">Organization Rewards</h2>
+                            <Badge variant="secondary" className="gap-1 bg-pink-100 text-pink-700 border-pink-200 text-xs">
+                                <Sparkles className="h-2.5 w-2.5" />
+                                Earn Credits
+                            </Badge>
+                        </div>
+                        <p className="text-sm text-muted-foreground">
+                            Redeem reward coupons to add free credits to your organization wallet.
+                        </p>
+                    </div>
                 </div>
-                <Badge variant="secondary" className="gap-1.5">
-                    <Gift className="h-3 w-3" />
-                    Org Rewards
-                </Badge>
             </div>
-            <Separator />
 
             {/* Redeem Coupon Card */}
             <RedeemCouponCard
-                workspaceId="organization-scope" // Scoped to org
+                workspaceId="organization-scope"
                 organizationId={organizationId}
             />
 
-            {/* How to Get a Coupon */}
-            <Card className="border shadow-none bg-muted/30">
-                <CardHeader className="pb-3">
-                    <CardTitle className="text-sm font-semibold flex items-center gap-2">
-                        <Star className="h-4 w-4 text-yellow-500" />
-                        How to Get a Coupon
-                    </CardTitle>
-                    <CardDescription className="text-xs">
-                        Earn free credits by supporting Fairlx on GitHub
-                    </CardDescription>
-                </CardHeader>
-                <CardContent>
-                    <div className="space-y-4">
-                        <div className="flex items-start gap-3">
-                            <div className="flex items-center justify-center w-6 h-6 rounded-full bg-primary/10 text-primary text-[10px] font-bold shrink-0">
-                                1
-                            </div>
-                            <div>
-                                <p className="text-xs font-medium">Visit the Star Reward page</p>
-                                <p className="text-[10px] text-muted-foreground">
-                                    Go to our landing page and start the reward flow
-                                </p>
-                            </div>
-                        </div>
-                        <div className="flex items-start gap-3">
-                            <div className="flex items-center justify-center w-6 h-6 rounded-full bg-primary/10 text-primary text-[10px] font-bold shrink-0">
-                                2
-                            </div>
-                            <div>
-                                <p className="text-xs font-medium">Connect GitHub & star the repo</p>
-                                <p className="text-[10px] text-muted-foreground">
-                                    Authenticate with GitHub and star our repository
-                                </p>
-                            </div>
-                        </div>
-                        <div className="flex items-start gap-3">
-                            <div className="flex items-center justify-center w-6 h-6 rounded-full bg-primary/10 text-primary text-[10px] font-bold shrink-0">
-                                3
+            {/* How to earn */}
+            <div>
+                <h3 className="text-sm font-semibold mb-1 flex items-center gap-2">
+                    <Star className="h-4 w-4 text-yellow-500" />
+                    How to earn coupons
+                </h3>
+                <p className="text-xs text-muted-foreground mb-4">
+                    Earn free credits by supporting Fairlx on GitHub
+                </p>
+
+                <div className="divide-y divide-border">
+                    {STEPS.map((step, i) => (
+                        <div key={i} className="flex items-start gap-4 py-4">
+                            <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary text-xs font-bold mt-0.5">
+                                {i + 1}
                             </div>
                             <div>
-                                <p className="text-xs font-medium">Get your coupon & redeem here</p>
-                                <p className="text-[10px] text-muted-foreground">
-                                    Receive a FAIRLX-XXXXXXXX code and paste it above
-                                </p>
+                                <p className="text-sm font-medium">{step.title}</p>
+                                <p className="text-xs text-muted-foreground mt-0.5">{step.description}</p>
                             </div>
                         </div>
+                    ))}
+                </div>
 
-                        <a
-                            href="https://fairlx.com/star-reward"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="block"
-                        >
-                            <Button variant="outline" size="sm" className="w-full mt-2 gap-2 text-xs">
-                                <Star className="h-3.5 w-3.5" />
-                                Get Your Coupon
-                                <ExternalLink className="h-3 w-3" />
-                            </Button>
-                        </a>
-                    </div>
-                </CardContent>
-            </Card>
+                <a
+                    href="https://fairlx.com/star-reward"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                >
+                    <Button variant="outline" size="sm" className="mt-2 gap-2 text-xs">
+                        <Star className="h-3.5 w-3.5 text-yellow-500" />
+                        Get Your Coupon
+                        <ExternalLink className="h-3 w-3" />
+                    </Button>
+                </a>
+            </div>
         </div>
     );
 };
diff --git a/src/features/workspaces/components/edit-workspace-form.tsx b/src/features/workspaces/components/edit-workspace-form.tsx
index d1ce9f8d..3470488c 100644
--- a/src/features/workspaces/components/edit-workspace-form.tsx
+++ b/src/features/workspaces/components/edit-workspace-form.tsx
@@ -95,16 +95,16 @@ export const EditWorkspaceForm = ({
 
 
   return (
-    <div className="w-full max-w-3xl space-y-8">
+    <div className="w-full  space-y-8">
       <DeleteDialog />
 
       {/* Page Header */}
       <div className="flex items-center gap-3">
-        <div className="flex items-center justify-center size-10 rounded-lg bg-primary/10">
-          <Settings className="size-5 text-primary" />
+        <div className="flex items-center justify-center size-10 rounded-lg bg-blue-500/10">
+          <Settings className="size-5 text-blue-500 " />
         </div>
         <div>
-          <h1 className="text-2xl font-bold tracking-tight">Workspace Settings</h1>
+          <h1 className="text-2xl font-semibold">Workspace Settings</h1>
           <p className="text-sm text-muted-foreground">
             Manage your workspace identity and configuration
           </p>
@@ -241,7 +241,7 @@ export const EditWorkspaceForm = ({
                       variant="outline"
                       onClick={onCancel}
                       disabled={isPending}
-                      size="sm"
+                      size="xs"
                     >
                       Cancel
                     </Button>
@@ -249,7 +249,7 @@ export const EditWorkspaceForm = ({
                   <Button
                     type="submit"
                     disabled={isPending}
-                    size="sm"
+                    size="xs"
                   >
                     Save Changes
                   </Button>
@@ -280,7 +280,7 @@ export const EditWorkspaceForm = ({
               </p>
             </div>
             <Button
-              size="sm"
+              size="xs"
               variant="destructive"
               type="button"
               disabled={isPending || isDeletingWorkspace}

From 88c8871c4acb9bfc365e6123ca1f3ff3599bff87 Mon Sep 17 00:00:00 2001
From: manideepyelugam <yelugammanideep@gmail.com>
Date: Tue, 19 May 2026 23:18:08 +0530
Subject: [PATCH 2/2] Added report bug feature

---
 .env.example                                  |   5 +-
 .github/workflows/deploy.yml                  |   6 +
 .../collections/bug-reports.ts                |  40 ++
 .../database-initialization/setup-database.ts |  10 +
 .../database-initialization/setup-runner.ts   |   4 +
 .../storage/bug-reports-bucket.ts             |  25 +
 src/app/(dashboard)/bug-report/page.tsx       |   9 +
 src/app/api/[[...route]]/route.ts             |   6 +-
 src/components/breadcrumb.tsx                 |   7 +
 src/components/navbar.tsx                     |   2 +
 src/config.ts                                 |   6 +
 src/features/bug-reports/api/route.ts         | 101 ++++
 .../components/bug-report-form.tsx            | 433 ++++++++++++++++++
 .../components/bug-report-popover.tsx         | 329 +++++++++++++
 .../hooks/use-submit-bug-reports.ts           |  35 ++
 .../bug-reports/hooks/use-upload-bug-image.ts |  30 ++
 src/features/bug-reports/schemas.ts           |  30 ++
 src/features/bug-reports/types.ts             |  29 ++
 18 files changed, 1105 insertions(+), 2 deletions(-)
 create mode 100644 scripts/database-initialization/collections/bug-reports.ts
 create mode 100644 scripts/database-initialization/storage/bug-reports-bucket.ts
 create mode 100644 src/app/(dashboard)/bug-report/page.tsx
 create mode 100644 src/features/bug-reports/api/route.ts
 create mode 100644 src/features/bug-reports/components/bug-report-form.tsx
 create mode 100644 src/features/bug-reports/components/bug-report-popover.tsx
 create mode 100644 src/features/bug-reports/hooks/use-submit-bug-reports.ts
 create mode 100644 src/features/bug-reports/hooks/use-upload-bug-image.ts
 create mode 100644 src/features/bug-reports/schemas.ts
 create mode 100644 src/features/bug-reports/types.ts

diff --git a/.env.example b/.env.example
index 5b1ccefb..97467ff3 100644
--- a/.env.example
+++ b/.env.example
@@ -197,4 +197,7 @@ NEXT_PUBLIC_APPWRITE_BYOB_TENANTS_ID=byob_tenants
 # -- Storage Buckets --
 NEXT_PUBLIC_APPWRITE_IMAGES_BUCKET_ID=images
 NEXT_PUBLIC_APPWRITE_ATTACHMENTS_BUCKET_ID=attachments_bucket
-NEXT_PUBLIC_APPWRITE_PROJECT_DOCS_BUCKET_ID=project-docs
\ No newline at end of file
+NEXT_PUBLIC_APPWRITE_PROJECT_DOCS_BUCKET_ID=project-docs
+
+NEXT_PUBLIC_APPWRITE_BUG_REPORT=bug_report
+NEXT_PUBLIC_APPWRITE_BUG_REPORTS_BUCKET_ID=bug_reports_bucket
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index a4a1d91b..81013bdb 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -139,6 +139,10 @@ jobs:
           NEXT_PUBLIC_APPWRITE_PROJECT_WEBHOOK_DELIVERIES_ID: ${{ vars.NEXT_PUBLIC_APPWRITE_PROJECT_WEBHOOK_DELIVERIES_ID }}
           NEXT_PUBLIC_APPWRITE_BYOB_TENANTS_ID: ${{ vars.NEXT_PUBLIC_APPWRITE_BYOB_TENANTS_ID }}
 
+          # Bug Reports
+          NEXT_PUBLIC_APPWRITE_BUG_REPORTS_ID: ${{ vars.NEXT_PUBLIC_APPWRITE_BUG_REPORTS_ID }}
+          NEXT_PUBLIC_APPWRITE_BUG_REPORTS_BUCKET_ID: ${{ vars.NEXT_PUBLIC_APPWRITE_BUG_REPORTS_BUCKET_ID }}
+
           # Two-Factor Authentication (2FA)
           NEXT_PUBLIC_APPWRITE_USER_RECOVERY_CODES_ID: ${{ vars.NEXT_PUBLIC_APPWRITE_USER_RECOVERY_CODES_ID }}
           NEXT_PUBLIC_APPWRITE_EMAIL_OTP_CODES_ID: ${{ vars.NEXT_PUBLIC_APPWRITE_EMAIL_OTP_CODES_ID }}
@@ -290,6 +294,8 @@ jobs:
             NEXT_PUBLIC_APPWRITE_PROJECT_WEBHOOKS_ID=${{ vars.NEXT_PUBLIC_APPWRITE_PROJECT_WEBHOOKS_ID }}
             NEXT_PUBLIC_APPWRITE_PROJECT_WEBHOOK_DELIVERIES_ID=${{ vars.NEXT_PUBLIC_APPWRITE_PROJECT_WEBHOOK_DELIVERIES_ID }}
             NEXT_PUBLIC_APPWRITE_BYOB_TENANTS_ID=${{ vars.NEXT_PUBLIC_APPWRITE_BYOB_TENANTS_ID }}
+            NEXT_PUBLIC_APPWRITE_BUG_REPORTS_ID=${{ vars.NEXT_PUBLIC_APPWRITE_BUG_REPORTS_ID }}
+            NEXT_PUBLIC_APPWRITE_BUG_REPORTS_BUCKET_ID=${{ vars.NEXT_PUBLIC_APPWRITE_BUG_REPORTS_BUCKET_ID }}
             NEXT_PUBLIC_APPWRITE_USER_RECOVERY_CODES_ID=${{ vars.NEXT_PUBLIC_APPWRITE_USER_RECOVERY_CODES_ID }}
             NEXT_PUBLIC_APPWRITE_EMAIL_OTP_CODES_ID=${{ vars.NEXT_PUBLIC_APPWRITE_EMAIL_OTP_CODES_ID }}
             TWO_FACTOR_ENCRYPTION_SECRET=${{ secrets.TWO_FACTOR_ENCRYPTION_SECRET }}
diff --git a/scripts/database-initialization/collections/bug-reports.ts b/scripts/database-initialization/collections/bug-reports.ts
new file mode 100644
index 00000000..1deed653
--- /dev/null
+++ b/scripts/database-initialization/collections/bug-reports.ts
@@ -0,0 +1,40 @@
+import { Databases, IndexType, Permission, Role } from 'node-appwrite';
+import {
+    ensureCollection,
+    ensureStringAttribute,
+    ensureIndex,
+    sleep,
+} from '../lib/db-helpers';
+import { logger } from '../lib/logger';
+
+const COLLECTION_ID = process.env.NEXT_PUBLIC_APPWRITE_BUG_REPORTS_ID || 'bug_reports';
+const COLLECTION_NAME = 'Bug Reports';
+
+export async function setupBugReports(databases: Databases, databaseId: string): Promise<void> {
+    logger.collection(COLLECTION_NAME);
+
+    await ensureCollection(databases, databaseId, COLLECTION_ID, COLLECTION_NAME, [
+        Permission.read(Role.any()),
+    ]);
+
+    // Reporter identity
+    await ensureStringAttribute(databases, databaseId, COLLECTION_ID, 'userId', 256, true);
+    await ensureStringAttribute(databases, databaseId, COLLECTION_ID, 'email', 256, true);
+    await ensureStringAttribute(databases, databaseId, COLLECTION_ID, 'username', 256, true);
+
+    // Report content
+    await ensureStringAttribute(databases, databaseId, COLLECTION_ID, 'title', 200, true);
+    await ensureStringAttribute(databases, databaseId, COLLECTION_ID, 'description', 5000, true);
+
+    // Attached images (stored in R2 / Appwrite storage)
+    await ensureStringAttribute(databases, databaseId, COLLECTION_ID, 'imageFileIds', 512, false, undefined, true);
+    await ensureStringAttribute(databases, databaseId, COLLECTION_ID, 'imageUrls', 1024, false, undefined, true);
+
+    // Wait for attributes to register before creating indexes
+    await sleep(2000);
+
+    // Indexes
+    await ensureIndex(databases, databaseId, COLLECTION_ID, 'userId_idx', IndexType.Key, ['userId']);
+    await ensureIndex(databases, databaseId, COLLECTION_ID, 'email_idx', IndexType.Key, ['email']);
+    await ensureIndex(databases, databaseId, COLLECTION_ID, 'createdAt_idx', IndexType.Key, ['$createdAt']);
+}
diff --git a/scripts/database-initialization/setup-database.ts b/scripts/database-initialization/setup-database.ts
index b903b98d..5957d7e3 100644
--- a/scripts/database-initialization/setup-database.ts
+++ b/scripts/database-initialization/setup-database.ts
@@ -11,6 +11,7 @@ import { writeEnvVars } from './lib/env-writer';
 import { setupImagesBucket } from './storage/images-bucket';
 import { setupAttachmentsBucket } from './storage/attachments-bucket';
 import { setupProjectDocsBucket } from './storage/project-docs-bucket';
+import { setupBugReportsBucket } from './storage/bug-reports-bucket';
 
 // ─── Collection Setup Imports ────────────────────────────────
 import { setupWorkspaces } from './collections/workspaces';
@@ -75,6 +76,7 @@ import { setupUserRecoveryCodes } from './collections/user-recovery-codes';
 import { setupEmailOtpCodes } from './collections/email-otp-codes';
 import { setupBYOBTenants } from './collections/byob-tenants';
 import { setupAIModelPricing } from './collections/ai-model-pricing';
+import { setupBugReports } from './collections/bug-reports';
 
 // ─── Configuration ───────────────────────────────────────────
 const DATABASE_ID = process.env.NEXT_PUBLIC_APPWRITE_DATABASE_ID ?? 'fairlx';
@@ -180,6 +182,9 @@ const collectionSetups: Array<{
 
         // BYOB (Bring Your Own Backend)
         { name: 'BYOB Tenants', setup: setupBYOBTenants },
+
+        // Bug Reports
+        { name: 'Bug Reports', setup: setupBugReports },
     ];
 
 // ─── All Environment Variables ───────────────────────────────
@@ -302,10 +307,14 @@ function getAutoGeneratedVars(): Record<string, string> {
         NEXT_PUBLIC_APPWRITE_IMAGES_BUCKET_ID: process.env.NEXT_PUBLIC_APPWRITE_IMAGES_BUCKET_ID || 'images',
         NEXT_PUBLIC_APPWRITE_ATTACHMENTS_BUCKET_ID: process.env.NEXT_PUBLIC_APPWRITE_ATTACHMENTS_BUCKET_ID || 'attachments_bucket',
         NEXT_PUBLIC_APPWRITE_PROJECT_DOCS_BUCKET_ID: process.env.NEXT_PUBLIC_APPWRITE_PROJECT_DOCS_BUCKET_ID || 'project-docs',
+        NEXT_PUBLIC_APPWRITE_BUG_REPORTS_BUCKET_ID: process.env.NEXT_PUBLIC_APPWRITE_BUG_REPORTS_BUCKET_ID || 'bug_reports_bucket',
 
         // ── BYOB ──
         NEXT_PUBLIC_APPWRITE_BYOB_TENANTS_ID: process.env.NEXT_PUBLIC_APPWRITE_BYOB_TENANTS_ID || 'byob_tenants',
 
+        // ── Bug Reports ──
+        NEXT_PUBLIC_APPWRITE_BUG_REPORTS_ID: process.env.NEXT_PUBLIC_APPWRITE_BUG_REPORTS_ID || 'bug_reports',
+
         // ── Billing Defaults ──
         BILLING_GRACE_PERIOD_DAYS: process.env.BILLING_GRACE_PERIOD_DAYS || '7',
         BILLING_CURRENCY: process.env.BILLING_CURRENCY || 'INR',
@@ -483,6 +492,7 @@ export async function runBucketSetups(
         { name: 'Images', setup: setupImagesBucket },
         { name: 'Attachments', setup: setupAttachmentsBucket },
         { name: 'Project Documents', setup: setupProjectDocsBucket },
+        { name: 'Bug Reports', setup: setupBugReportsBucket },
     ];
 
     const succeeded: string[] = [];
diff --git a/scripts/database-initialization/setup-runner.ts b/scripts/database-initialization/setup-runner.ts
index ee9f5c95..ff50b4d8 100644
--- a/scripts/database-initialization/setup-runner.ts
+++ b/scripts/database-initialization/setup-runner.ts
@@ -71,11 +71,13 @@ import { setupProjectWebhookDeliveries } from './collections/project-webhook-del
 import { setupUserRecoveryCodes } from './collections/user-recovery-codes';
 import { setupEmailOtpCodes } from './collections/email-otp-codes';
 import { setupAIModelPricing } from './collections/ai-model-pricing';
+import { setupBugReports } from './collections/bug-reports';
 
 // ─── Storage Bucket Imports ──────────────────────────────────
 import { setupImagesBucket } from './storage/images-bucket';
 import { setupAttachmentsBucket } from './storage/attachments-bucket';
 import { setupProjectDocsBucket } from './storage/project-docs-bucket';
+import { setupBugReportsBucket } from './storage/bug-reports-bucket';
 
 // ─── Collection Setup List ───────────────────────────────────
 const collectionSetups: Array<{
@@ -143,6 +145,7 @@ const collectionSetups: Array<{
         { name: 'Project Webhook Deliveries', setup: setupProjectWebhookDeliveries },
         { name: 'User Recovery Codes', setup: setupUserRecoveryCodes },
         { name: 'Email OTP Codes', setup: setupEmailOtpCodes },
+        { name: 'Bug Reports', setup: setupBugReports },
     ];
 
 // ─── Exported Functions ──────────────────────────────────────
@@ -179,6 +182,7 @@ export async function runBucketSetups(
         { name: 'Images', setup: setupImagesBucket },
         { name: 'Attachments', setup: setupAttachmentsBucket },
         { name: 'Project Documents', setup: setupProjectDocsBucket },
+        { name: 'Bug Reports', setup: setupBugReportsBucket },
     ];
 
     const succeeded: string[] = [];
diff --git a/scripts/database-initialization/storage/bug-reports-bucket.ts b/scripts/database-initialization/storage/bug-reports-bucket.ts
new file mode 100644
index 00000000..faab0399
--- /dev/null
+++ b/scripts/database-initialization/storage/bug-reports-bucket.ts
@@ -0,0 +1,25 @@
+import { Storage, Permission, Role, Compression } from 'node-appwrite';
+import { ensureBucket } from '../lib/storage-helpers';
+import { logger } from '../lib/logger';
+
+const BUCKET_ID = process.env.NEXT_PUBLIC_APPWRITE_BUG_REPORTS_BUCKET_ID || 'bug_reports_bucket';
+const BUCKET_NAME = 'Bug Reports';
+
+export async function setupBugReportsBucket(storage: Storage): Promise<void> {
+    logger.collection(BUCKET_NAME);
+
+    await ensureBucket(storage, BUCKET_ID, BUCKET_NAME, {
+        permissions: [
+            Permission.read(Role.any()),
+            Permission.create(Role.users()),
+            Permission.update(Role.users()),
+            Permission.delete(Role.users()),
+        ],
+        fileSecurity: false,
+        maximumFileSize: 10 * 1024 * 1024, // 10MB
+        allowedFileExtensions: ['jpg', 'jpeg', 'png', 'gif', 'webp'],
+        compression: Compression.Gzip,
+        encryption: true,
+        antivirus: true,
+    });
+}
diff --git a/src/app/(dashboard)/bug-report/page.tsx b/src/app/(dashboard)/bug-report/page.tsx
new file mode 100644
index 00000000..3f2006c6
--- /dev/null
+++ b/src/app/(dashboard)/bug-report/page.tsx
@@ -0,0 +1,9 @@
+import { BugReportForm } from "@/features/bug-reports/components/bug-report-form";
+
+export default function BugReportPage() {
+  return (
+    <div className="py-8 px-6 max-w-3xl mx-auto w-full">
+      <BugReportForm />
+    </div>
+  );
+}
diff --git a/src/app/api/[[...route]]/route.ts b/src/app/api/[[...route]]/route.ts
index dde2b2dd..ee8c9d26 100644
--- a/src/app/api/[[...route]]/route.ts
+++ b/src/app/api/[[...route]]/route.ts
@@ -59,6 +59,8 @@ import githubRewards from "@/features/github-rewards/server/route";
 import mySpace from "@/features/my-space/server/route";
 // BYOB (Bring Your Own Backend)
 import byob from "@/features/byob/server/route";
+// Bug Reports
+import bugReports from "@/features/bug-reports/api/route";
 // Global Traffic Metering - NOW WITH BATCHING
 // Events are collected in memory and flushed every 60s (1 write instead of ~3600/hr)
 import { batchedTrafficMeteringMiddleware } from "@/lib/traffic-metering-batched";
@@ -127,7 +129,9 @@ const routes = app
   // My Space — cross-workspace personal dashboard
   .route("/my-space", mySpace)
   // BYOB (Bring Your Own Backend)
-  .route("/byob", byob);
+  .route("/byob", byob)
+  // Bug Reports
+  .route("/bug-reports", bugReports);
 
 export const GET = handle(app);
 export const POST = handle(app);
diff --git a/src/components/breadcrumb.tsx b/src/components/breadcrumb.tsx
index fac41a6c..0c1f4fd5 100644
--- a/src/components/breadcrumb.tsx
+++ b/src/components/breadcrumb.tsx
@@ -113,6 +113,13 @@ export const Breadcrumb = () => {
     programId: shouldFetchProgram ? (itemId ?? "") : "",
   });
 
+  // Handle bug-report route (top-level, not workspace-scoped)
+  if (pathSegments[0] === "bug-report") {
+    return renderBreadcrumbs([
+      { label: "Bug Report", href: "/bug-report", isClickable: false },
+    ]);
+  }
+
   // Handle profile routes
   if (isProfileRoute) {
     const profileSection = pathSegments[1];
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index eb899f0c..1f359584 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -2,6 +2,7 @@
 
 import { UserButton } from "@/features/auth/components/user-button";
 import { NotificationBell } from "@/features/notifications";
+import { BugReportPopover } from "@/features/bug-reports/components/bug-report-popover";
 
 import { usePathname } from "next/navigation";
 
@@ -49,6 +50,7 @@ export const Navbar = () => {
       <div id="navbar-actions" className="flex items-center gap-2">
         <MobileSidebar />
         <ModeToggle />
+        <BugReportPopover />
         <NotificationBell />
         <UserButton />
       </div>
diff --git a/src/config.ts b/src/config.ts
index 1d2e5267..ef185f50 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -185,6 +185,12 @@ export const TWO_FACTOR_ENCRYPTION_SECRET = process.env.TWO_FACTOR_ENCRYPTION_SE
 // ===============================
 export const BYOB_TENANTS_ID = process.env.NEXT_PUBLIC_APPWRITE_BYOB_TENANTS_ID || "byob_tenants";
 
+// ===============================
+// Bug Reports Collection
+// ===============================
+export const BUG_REPORTS_ID = process.env.NEXT_PUBLIC_APPWRITE_BUG_REPORTS_ID || "bug_reports";
+export const BUG_REPORTS_BUCKET_ID = process.env.NEXT_PUBLIC_APPWRITE_BUG_REPORTS_BUCKET_ID || "bug_reports_bucket";
+
 // ===============================
 // Landing Page Supabase (GitHub Star Rewards)
 // MOVED TO config.server.ts for security
diff --git a/src/features/bug-reports/api/route.ts b/src/features/bug-reports/api/route.ts
new file mode 100644
index 00000000..2646855a
--- /dev/null
+++ b/src/features/bug-reports/api/route.ts
@@ -0,0 +1,101 @@
+import { Hono } from "hono";
+import { zValidator } from "@hono/zod-validator";
+import { z } from "zod";
+import { ID } from "node-appwrite";
+
+import { sessionMiddleware } from "@/lib/session-middleware";
+import { DATABASE_ID, BUG_REPORTS_ID, BUG_REPORTS_BUCKET_ID } from "@/config";
+import { createAdminClient } from "@/lib/appwrite";
+import { AppwriteStorageProvider } from "@/lib/storage/appwrite-provider";
+import { MAX_IMAGE_SIZE, ALLOWED_IMAGE_TYPES } from "../schemas";
+
+const app = new Hono()
+  .post("/upload-image", sessionMiddleware, async (c) => {
+    try {
+      const body = await c.req.parseBody();
+      const file = body.file as File;
+
+      if (!file) {
+        return c.json({ error: "No file provided" }, 400);
+      }
+      if (file.size > MAX_IMAGE_SIZE) {
+        return c.json({ error: "Image size exceeds 10MB limit" }, 400);
+      }
+      if (!ALLOWED_IMAGE_TYPES.includes(file.type)) {
+        return c.json({ error: `File type not allowed: ${file.type}` }, 400);
+      }
+
+      const { storage } = await createAdminClient();
+      const provider = new AppwriteStorageProvider(storage);
+      const fileId = ID.unique();
+
+      await provider.uploadFile(BUG_REPORTS_BUCKET_ID, fileId, file);
+
+      // Appwrite generates a stable public URL for buckets with Role.any() read permission
+      const url = provider.getPublicUrl(BUG_REPORTS_BUCKET_ID, fileId) ??
+        `/api/bug-reports/images/${fileId}`;
+
+      return c.json({ data: { fileId, url } });
+    } catch (error) {
+      console.error("[BugReports] Image upload failed:", error);
+      return c.json({ error: "Failed to upload image" }, 500);
+    }
+  })
+  .post(
+    "/",
+    sessionMiddleware,
+    zValidator(
+      "json",
+      z.object({
+        bugs: z
+          .array(
+            z.object({
+              title: z.string().trim().min(3).max(200),
+              description: z.string().trim().min(10).max(5000),
+              imageFileIds: z.array(z.string()).optional().default([]),
+              imageUrls: z.array(z.string()).optional().default([]),
+            })
+          )
+          .min(1),
+      })
+    ),
+    async (c) => {
+      const user = c.get("user");
+      const { bugs } = c.req.valid("json");
+
+      const { databases } = await createAdminClient();
+
+      const created = await Promise.all(
+        bugs.map((bug) =>
+          databases.createDocument(DATABASE_ID, BUG_REPORTS_ID, ID.unique(), {
+            userId: user.$id,
+            email: user.email,
+            username: user.name,
+            title: bug.title,
+            description: bug.description,
+            imageFileIds: bug.imageFileIds ?? [],
+            imageUrls: bug.imageUrls ?? [],
+          })
+        )
+      );
+
+      return c.json({ data: created });
+    }
+  )
+  // Proxy endpoint for cases where Appwrite endpoint/project are not public
+  .get("/images/:fileId", sessionMiddleware, async (c) => {
+    const { fileId } = c.req.param();
+    try {
+      const { storage } = await createAdminClient();
+      const provider = new AppwriteStorageProvider(storage);
+      const file = await provider.getFileView(BUG_REPORTS_BUCKET_ID, fileId);
+
+      return new Response(new Uint8Array(file), {
+        headers: { "Content-Type": "image/jpeg" },
+      });
+    } catch {
+      return c.json({ error: "Image not found" }, 404);
+    }
+  });
+
+export default app;
diff --git a/src/features/bug-reports/components/bug-report-form.tsx b/src/features/bug-reports/components/bug-report-form.tsx
new file mode 100644
index 00000000..9a66c51e
--- /dev/null
+++ b/src/features/bug-reports/components/bug-report-form.tsx
@@ -0,0 +1,433 @@
+"use client";
+
+import { useState, useRef, useCallback } from "react";
+import { Plus, X, Upload, CheckCircle, ImageIcon, Loader2 } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+import { useUploadBugImage } from "../hooks/use-upload-bug-image";
+import { useSubmitBugReports } from "../hooks/use-submit-bug-reports";
+import { MAX_IMAGE_SIZE, ALLOWED_IMAGE_TYPES } from "../schemas";
+import type { BugEntry, UploadingImage } from "../types";
+
+interface FieldErrors {
+  title?: string;
+  description?: string;
+}
+
+const MAX_IMAGES_PER_BUG = 3;
+const MAX_BUGS_PER_SESSION = 5;
+
+function createEmptyBug(): BugEntry {
+  return {
+    id: crypto.randomUUID(),
+    title: "",
+    description: "",
+    imageFileIds: [],
+    imageUrls: [],
+    uploadingImages: [],
+  };
+}
+
+export const BugReportForm = () => {
+  const [bugs, setBugs] = useState<BugEntry[]>([createEmptyBug()]);
+  const [submitted, setSubmitted] = useState(false);
+  const [fieldErrors, setFieldErrors] = useState<Record<string, FieldErrors>>({});
+
+  const { mutateAsync: uploadImage } = useUploadBugImage();
+  const { mutate: submitBugReports, isPending: isSubmitting } = useSubmitBugReports();
+
+  const updateBug = useCallback((id: string, patch: Partial<BugEntry>) => {
+    setBugs((prev) => prev.map((b) => (b.id === id ? { ...b, ...patch } : b)));
+  }, []);
+
+  const handleAddBug = () => {
+    if (bugs.length >= MAX_BUGS_PER_SESSION) return;
+    setBugs((prev) => [...prev, createEmptyBug()]);
+  };
+
+  const handleRemoveBug = (id: string) =>
+    setBugs((prev) => prev.filter((b) => b.id !== id));
+
+  const handleImageSelect = async (bugId: string, files: FileList) => {
+    const bug = bugs.find((b) => b.id === bugId);
+    const currentCount = bug?.uploadingImages.length ?? 0;
+    const remaining = MAX_IMAGES_PER_BUG - currentCount;
+    if (remaining <= 0) return;
+
+    const valid = Array.from(files)
+      .filter((f) => ALLOWED_IMAGE_TYPES.includes(f.type) && f.size <= MAX_IMAGE_SIZE)
+      .slice(0, remaining);
+
+    const pending: UploadingImage[] = valid.map((f) => ({
+      localId: crypto.randomUUID(),
+      file: f,
+      previewUrl: URL.createObjectURL(f),
+      status: "uploading" as const,
+    }));
+
+    setBugs((prev) =>
+      prev.map((b) =>
+        b.id === bugId
+          ? { ...b, uploadingImages: [...b.uploadingImages, ...pending] }
+          : b
+      )
+    );
+
+    await Promise.all(
+      pending.map(async (img) => {
+        try {
+          const result = await uploadImage(img.file);
+          setBugs((prev) =>
+            prev.map((b) => {
+              if (b.id !== bugId) return b;
+              return {
+                ...b,
+                imageFileIds: [...b.imageFileIds, result.data.fileId],
+                imageUrls: [...b.imageUrls, result.data.url],
+                uploadingImages: b.uploadingImages.map((u) =>
+                  u.localId === img.localId
+                    ? { ...u, status: "done" as const, fileId: result.data.fileId, url: result.data.url }
+                    : u
+                ),
+              };
+            })
+          );
+        } catch {
+          setBugs((prev) =>
+            prev.map((b) => {
+              if (b.id !== bugId) return b;
+              return {
+                ...b,
+                uploadingImages: b.uploadingImages.map((u) =>
+                  u.localId === img.localId ? { ...u, status: "error" as const } : u
+                ),
+              };
+            })
+          );
+        }
+      })
+    );
+  };
+
+  const handleRemoveImage = (bugId: string, localId: string) => {
+    setBugs((prev) =>
+      prev.map((b) => {
+        if (b.id !== bugId) return b;
+        const removed = b.uploadingImages.find((u) => u.localId === localId);
+        return {
+          ...b,
+          imageFileIds: removed?.fileId
+            ? b.imageFileIds.filter((id) => id !== removed.fileId)
+            : b.imageFileIds,
+          imageUrls: removed?.url
+            ? b.imageUrls.filter((u) => u !== removed.url)
+            : b.imageUrls,
+          uploadingImages: b.uploadingImages.filter((u) => u.localId !== localId),
+        };
+      })
+    );
+  };
+
+  const validate = () => {
+    const errors: Record<string, FieldErrors> = {};
+    bugs.forEach((b) => {
+      const e: FieldErrors = {};
+      if (b.title.trim().length < 3) e.title = "Title must be at least 3 characters.";
+      if (b.description.trim().length < 10) e.description = "Description must be at least 10 characters.";
+      if (Object.keys(e).length) errors[b.id] = e;
+    });
+    setFieldErrors(errors);
+    return Object.keys(errors).length === 0;
+  };
+
+  const hasUploadingImages = bugs.some((b) =>
+    b.uploadingImages.some((u) => u.status === "uploading")
+  );
+
+  const handleSubmit = () => {
+    if (!validate()) return;
+    submitBugReports(
+      {
+        bugs: bugs.map((b) => ({
+          title: b.title,
+          description: b.description,
+          imageFileIds: b.imageFileIds,
+          imageUrls: b.imageUrls,
+        })),
+      },
+      { onSuccess: () => setSubmitted(true) }
+    );
+  };
+
+  const handleReset = () => {
+    setBugs([createEmptyBug()]);
+    setSubmitted(false);
+    setFieldErrors({});
+  };
+
+  if (submitted) {
+    return (
+      <div className="flex flex-col items-center justify-center py-20 gap-6 text-center">
+        <CheckCircle className="h-16 w-16 text-green-500" />
+        <div>
+          <h2 className="text-2xl font-semibold">Thank you for your report!</h2>
+          <p className="text-muted-foreground mt-2">
+            We&apos;ve received your bug report{bugs.length > 1 ? "s" : ""} and will look
+            into {bugs.length > 1 ? "them" : "it"} as soon as possible.
+          </p>
+        </div>
+        <Button onClick={handleReset} size="lg">
+          <Plus className="h-4 w-4 mr-2" />
+          Report More Bugs
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-2xl mx-auto w-full space-y-6">
+      <div>
+        <h1 className="text-2xl font-semibold">Report a Bug</h1>
+        <p className="text-muted-foreground mt-1 text-sm">
+          Describe what went wrong. You can report multiple bugs at once.
+        </p>
+      </div>
+
+      <div className="space-y-4">
+        {bugs.map((bug, index) => (
+          <BugEntryCard
+            key={bug.id}
+            bug={bug}
+            index={index}
+            showRemove={bugs.length > 1}
+            errors={fieldErrors[bug.id]}
+            imageCount={bug.uploadingImages.length}
+            onTitleChange={(val) => updateBug(bug.id, { title: val })}
+            onDescriptionChange={(val) => updateBug(bug.id, { description: val })}
+            onImageSelect={(files) => handleImageSelect(bug.id, files)}
+            onRemoveImage={(localId) => handleRemoveImage(bug.id, localId)}
+            onRemoveBug={() => handleRemoveBug(bug.id)}
+          />
+        ))}
+      </div>
+
+      <div className="flex flex-col sm:flex-row gap-3">
+        <Button
+          variant="outline"
+          onClick={handleAddBug}
+          disabled={bugs.length >= MAX_BUGS_PER_SESSION}
+          className="flex-1 sm:flex-none"
+          size={"xs"}
+        >
+          <Plus className="h-4 w-4 mr-2" />
+          Add Another Bug
+          {bugs.length >= MAX_BUGS_PER_SESSION && (
+            <span className="ml-1 text-xs text-muted-foreground">(max {MAX_BUGS_PER_SESSION})</span>
+          )}
+        </Button>
+
+        <Button
+          onClick={handleSubmit} size={"xs"}
+          disabled={isSubmitting || hasUploadingImages}
+          className="flex-1 sm:flex-none sm:ml-auto"
+        >
+          {isSubmitting ? (
+            <>
+              <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+              Submitting...
+            </>
+          ) : (
+            "Submit Bug Report"
+          )}
+        </Button>
+      </div>
+
+      {hasUploadingImages && (
+        <p className="text-xs text-muted-foreground text-center">
+          Please wait for all images to finish uploading before submitting.
+        </p>
+      )}
+    </div>
+  );
+};
+
+interface BugEntryCardProps {
+  bug: BugEntry;
+  index: number;
+  showRemove: boolean;
+  errors?: FieldErrors;
+  imageCount: number;
+  onTitleChange: (val: string) => void;
+  onDescriptionChange: (val: string) => void;
+  onImageSelect: (files: FileList) => void;
+  onRemoveImage: (localId: string) => void;
+  onRemoveBug: () => void;
+}
+
+const BugEntryCard = ({
+  bug,
+  index,
+  showRemove,
+  errors,
+  imageCount,
+  onTitleChange,
+  onDescriptionChange,
+  onImageSelect,
+  onRemoveImage,
+  onRemoveBug,
+}: BugEntryCardProps) => {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [dragActive, setDragActive] = useState(false);
+
+  const handleDrag = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragActive(e.type === "dragenter" || e.type === "dragover");
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragActive(false);
+    if (e.dataTransfer.files?.length) onImageSelect(e.dataTransfer.files);
+  };
+
+  return (
+    <Card className="relative">
+      <CardHeader className="pb-3">
+        <CardTitle className="text-sm font-medium flex items-center justify-between">
+          Bug #{index + 1}
+          {showRemove && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onRemoveBug}
+              className="h-7 w-7 p-0 text-muted-foreground hover:text-destructive"
+            >
+              <X className="h-4 w-4" />
+            </Button>
+          )}
+        </CardTitle>
+      </CardHeader>
+
+      <CardContent className="space-y-4">
+        {/* Title */}
+        <div>
+          <Input
+            placeholder="Bug title — e.g. &quot;Dashboard crashes on load&quot;"
+            value={bug.title}
+            onChange={(e) => onTitleChange(e.target.value)}
+            className={cn(errors?.title && "border-destructive focus-visible:ring-destructive")}
+          />
+          {errors?.title && (
+            <p className="text-xs text-destructive mt-1">{errors.title}</p>
+          )}
+        </div>
+
+        {/* Description */}
+        <div>
+          <Textarea
+            placeholder="Describe the bug in detail — what happened, what you expected, and how to reproduce it..."
+            value={bug.description}
+            onChange={(e) => onDescriptionChange(e.target.value)}
+            rows={4}
+            className={cn(errors?.description && "border-destructive focus-visible:ring-destructive")}
+          />
+          {errors?.description && (
+            <p className="text-xs text-destructive mt-1">{errors.description}</p>
+          )}
+        </div>
+
+        {/* Image upload drop zone */}
+        {imageCount < MAX_IMAGES_PER_BUG ? (
+          <div
+            className={cn(
+              "border-2 border-dashed rounded-lg p-4 text-center cursor-pointer transition-colors",
+              dragActive ? "border-primary bg-primary/5" : "border-border hover:border-primary/50"
+            )}
+            onDragEnter={handleDrag}
+            onDragLeave={handleDrag}
+            onDragOver={handleDrag}
+            onDrop={handleDrop}
+            onClick={() => fileInputRef.current?.click()}
+          >
+            <div className="flex flex-col items-center gap-2">
+              <Upload className="h-6 w-6 text-muted-foreground" />
+              <p className="text-sm text-muted-foreground">
+                Drop screenshots here or{" "}
+                <span className="text-primary font-medium">click to upload</span>
+              </p>
+              <p className="text-xs text-muted-foreground">
+                PNG, JPG, GIF, WebP — max 10MB each &middot; {imageCount}/{MAX_IMAGES_PER_BUG} uploaded
+              </p>
+            </div>
+            <input
+              ref={fileInputRef}
+              type="file"
+              multiple
+              accept={ALLOWED_IMAGE_TYPES.join(",")}
+              className="hidden"
+              onChange={(e) => e.target.files && onImageSelect(e.target.files)}
+            />
+          </div>
+        ) : (
+          <p className="text-xs text-muted-foreground text-center py-2">
+            Maximum {MAX_IMAGES_PER_BUG} images reached. Remove one to upload another.
+          </p>
+        )}
+
+        {/* Image thumbnails */}
+        {bug.uploadingImages.length > 0 && (
+          <div className="flex flex-wrap gap-2">
+            {bug.uploadingImages.map((img) => (
+              <ImageThumb
+                key={img.localId}
+                img={img}
+                onRemove={() => onRemoveImage(img.localId)}
+              />
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+};
+
+interface ImageThumbProps {
+  img: UploadingImage;
+  onRemove: () => void;
+}
+
+const ImageThumb = ({ img, onRemove }: ImageThumbProps) => (
+  <div className="relative h-20 w-20 rounded-md overflow-hidden border border-border bg-muted flex-shrink-0">
+    {/* eslint-disable-next-line @next/next/no-img-element */}
+    <img src={img.previewUrl} alt="Bug screenshot" className="h-full w-full object-cover" />
+
+    {img.status === "uploading" && (
+      <div className="absolute inset-0 flex items-center justify-center bg-black/40">
+        <Loader2 className="h-5 w-5 text-white animate-spin" />
+      </div>
+    )}
+
+    {img.status === "error" && (
+      <div className="absolute inset-0 flex items-center justify-center bg-destructive/60">
+        <ImageIcon className="h-5 w-5 text-white" />
+      </div>
+    )}
+
+    {img.status !== "uploading" && (
+      <button
+        type="button"
+        onClick={onRemove}
+        className="absolute top-1 left-1 h-5 w-5 rounded-full bg-black/70 flex items-center justify-center hover:bg-black/90 transition-colors"
+      >
+        <X className="h-3 w-3 text-white" />
+      </button>
+    )}
+  </div>
+);
diff --git a/src/features/bug-reports/components/bug-report-popover.tsx b/src/features/bug-reports/components/bug-report-popover.tsx
new file mode 100644
index 00000000..77749930
--- /dev/null
+++ b/src/features/bug-reports/components/bug-report-popover.tsx
@@ -0,0 +1,329 @@
+"use client";
+
+import { useState, useRef, useCallback } from "react";
+import { Bug, Plus, X, ImageIcon, Loader2, CheckCircle, ExternalLink } from "lucide-react";
+import Link from "next/link";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+
+import { useUploadBugImage } from "../hooks/use-upload-bug-image";
+import { useSubmitBugReports } from "../hooks/use-submit-bug-reports";
+import { MAX_IMAGE_SIZE, ALLOWED_IMAGE_TYPES } from "../schemas";
+import type { UploadingImage } from "../types";
+
+const MAX_IMAGES = 3;
+
+interface FormState {
+  title: string;
+  description: string;
+  imageFileIds: string[];
+  imageUrls: string[];
+  uploadingImages: UploadingImage[];
+}
+
+function emptyForm(): FormState {
+  return {
+    title: "",
+    description: "",
+    imageFileIds: [],
+    imageUrls: [],
+    uploadingImages: [],
+  };
+}
+
+export const BugReportPopover = () => {
+  const [open, setOpen] = useState(false);
+  const [form, setForm] = useState<FormState>(emptyForm());
+  const [errors, setErrors] = useState<{ title?: string; description?: string }>({});
+  const [submitted, setSubmitted] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const { mutateAsync: uploadImage } = useUploadBugImage();
+  const { mutate: submitBug, isPending: isSubmitting } = useSubmitBugReports();
+
+  const handleOpenChange = useCallback((next: boolean) => {
+    setOpen(next);
+    if (!next) {
+      // reset on close
+      setForm(emptyForm());
+      setErrors({});
+      setSubmitted(false);
+    }
+  }, []);
+
+  const handleImageSelect = async (files: FileList) => {
+    const remaining = MAX_IMAGES - form.uploadingImages.length;
+    if (remaining <= 0) return;
+
+    const valid = Array.from(files)
+      .filter((f) => ALLOWED_IMAGE_TYPES.includes(f.type) && f.size <= MAX_IMAGE_SIZE)
+      .slice(0, remaining);
+
+    const pending: UploadingImage[] = valid.map((f) => ({
+      localId: crypto.randomUUID(),
+      file: f,
+      previewUrl: URL.createObjectURL(f),
+      status: "uploading" as const,
+    }));
+
+    setForm((prev) => ({
+      ...prev,
+      uploadingImages: [...prev.uploadingImages, ...pending],
+    }));
+
+    await Promise.all(
+      pending.map(async (img) => {
+        try {
+          const result = await uploadImage(img.file);
+          setForm((prev) => ({
+            ...prev,
+            imageFileIds: [...prev.imageFileIds, result.data.fileId],
+            imageUrls: [...prev.imageUrls, result.data.url],
+            uploadingImages: prev.uploadingImages.map((u) =>
+              u.localId === img.localId
+                ? { ...u, status: "done" as const, fileId: result.data.fileId, url: result.data.url }
+                : u
+            ),
+          }));
+        } catch {
+          setForm((prev) => ({
+            ...prev,
+            uploadingImages: prev.uploadingImages.map((u) =>
+              u.localId === img.localId ? { ...u, status: "error" as const } : u
+            ),
+          }));
+        }
+      })
+    );
+  };
+
+  const handleRemoveImage = (localId: string) => {
+    setForm((prev) => {
+      const removed = prev.uploadingImages.find((u) => u.localId === localId);
+      return {
+        ...prev,
+        imageFileIds: removed?.fileId
+          ? prev.imageFileIds.filter((id) => id !== removed.fileId)
+          : prev.imageFileIds,
+        imageUrls: removed?.url
+          ? prev.imageUrls.filter((u) => u !== removed.url)
+          : prev.imageUrls,
+        uploadingImages: prev.uploadingImages.filter((u) => u.localId !== localId),
+      };
+    });
+  };
+
+  const hasUploading = form.uploadingImages.some((u) => u.status === "uploading");
+
+  const validate = () => {
+    const e: { title?: string; description?: string } = {};
+    if (form.title.trim().length < 3) e.title = "At least 3 characters";
+    if (form.description.trim().length < 10) e.description = "At least 10 characters";
+    setErrors(e);
+    return Object.keys(e).length === 0;
+  };
+
+  const handleSubmit = () => {
+    if (!validate()) return;
+    submitBug(
+      {
+        bugs: [
+          {
+            title: form.title,
+            description: form.description,
+            imageFileIds: form.imageFileIds,
+            imageUrls: form.imageUrls,
+          },
+        ],
+      },
+      { onSuccess: () => setSubmitted(true) }
+    );
+  };
+
+  return (
+    <Popover open={open} onOpenChange={handleOpenChange}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="gap-1.5 text-muted-foreground hover:text-foreground"
+          aria-label="Report a bug"
+        >
+          <Bug className="h-4 w-4" />
+          <span className="hidden sm:inline text-sm">Report Bug</span>
+        </Button>
+      </PopoverTrigger>
+
+      <PopoverContent align="end" className="w-[360px] p-0 rounded-xl shadow-lg border" sideOffset={8}>
+        {/* Header */}
+        <div className="flex items-center justify-between px-4 py-3 border-b">
+          <div className="flex items-center gap-2">
+            <Bug className="h-4 w-4 text-muted-foreground" />
+            <h3 className="font-semibold text-sm">Report a Bug</h3>
+          </div>
+          <Link
+            href="/bug-report"
+            onClick={() => setOpen(false)}
+            className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
+          >
+            <span>Report multiple</span>
+            <ExternalLink className="h-3 w-3" />
+          </Link>
+        </div>
+
+        {submitted ? (
+          /* Success state */
+          <div className="flex flex-col items-center gap-3 py-8 px-4 text-center">
+            <CheckCircle className="h-10 w-10 text-green-500" />
+            <div>
+              <p className="font-medium text-sm">Bug reported!</p>
+              <p className="text-xs text-muted-foreground mt-0.5">
+                Thanks for helping us improve.
+              </p>
+            </div>
+            <div className="flex gap-2 w-full">
+              <Button
+                size="sm"
+                variant="outline"
+                className="flex-1 text-xs"
+                onClick={() => {
+                  setForm(emptyForm());
+                  setErrors({});
+                  setSubmitted(false);
+                }}
+              >
+                <Plus className="h-3 w-3 mr-1" />
+                Report another
+              </Button>
+              <Button
+                size="sm"
+                className="flex-1 text-xs"
+                onClick={() => setOpen(false)}
+              >
+                Done
+              </Button>
+            </div>
+          </div>
+        ) : (
+          /* Form */
+          <div className="p-4 space-y-3">
+            {/* Title */}
+            <div>
+              <Input
+                placeholder="Bug title"
+                value={form.title}
+                onChange={(e) => setForm((p) => ({ ...p, title: e.target.value }))}
+                className={cn("text-sm h-8", errors.title && "border-destructive focus-visible:ring-destructive")}
+              />
+              {errors.title && (
+                <p className="text-xs text-destructive mt-0.5">{errors.title}</p>
+              )}
+            </div>
+
+            {/* Description */}
+            <div>
+              <Textarea
+                placeholder="What happened? How can we reproduce it?"
+                value={form.description}
+                onChange={(e) => setForm((p) => ({ ...p, description: e.target.value }))}
+                rows={3}
+                className={cn("text-sm resize-none", errors.description && "border-destructive focus-visible:ring-destructive")}
+              />
+              {errors.description && (
+                <p className="text-xs text-destructive mt-0.5">{errors.description}</p>
+              )}
+            </div>
+
+            {/* Images */}
+            <div className="space-y-2">
+              {form.uploadingImages.length > 0 && (
+                <div className="flex flex-wrap gap-1.5">
+                  {form.uploadingImages.map((img) => (
+                    <MiniImageThumb
+                      key={img.localId}
+                      img={img}
+                      onRemove={() => handleRemoveImage(img.localId)}
+                    />
+                  ))}
+                </div>
+              )}
+
+              {form.uploadingImages.length < MAX_IMAGES && (
+                <>
+                  <button
+                    type="button"
+                    onClick={() => fileInputRef.current?.click()}
+                    className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
+                  >
+                    <ImageIcon className="h-3.5 w-3.5" />
+                    Attach screenshot ({form.uploadingImages.length}/{MAX_IMAGES})
+                  </button>
+                  <input
+                    ref={fileInputRef}
+                    type="file"
+                    multiple
+                    accept={ALLOWED_IMAGE_TYPES.join(",")}
+                    className="hidden"
+                    onChange={(e) => e.target.files && handleImageSelect(e.target.files)}
+                  />
+                </>
+              )}
+            </div>
+
+            {/* Actions */}
+            <div className="flex gap-2 pt-1">
+              <Button
+                size="sm"
+                onClick={handleSubmit}
+                disabled={isSubmitting || hasUploading}
+                className="flex-1 text-xs h-8"
+              >
+                {isSubmitting ? (
+                  <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                ) : (
+                  "Submit Report"
+                )}
+              </Button>
+            </div>
+          </div>
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+interface MiniImageThumbProps {
+  img: UploadingImage;
+  onRemove: () => void;
+}
+
+const MiniImageThumb = ({ img, onRemove }: MiniImageThumbProps) => (
+  <div className="relative h-14 w-14 rounded-md overflow-hidden border border-border bg-muted flex-shrink-0">
+    {/* eslint-disable-next-line @next/next/no-img-element */}
+    <img src={img.previewUrl} alt="Screenshot" className="h-full w-full object-cover" />
+
+    {img.status === "uploading" && (
+      <div className="absolute inset-0 flex items-center justify-center bg-black/40">
+        <Loader2 className="h-4 w-4 text-white animate-spin" />
+      </div>
+    )}
+
+    {img.status !== "uploading" && (
+      <button
+        type="button"
+        onClick={onRemove}
+        className="absolute top-0.5 left-0.5 h-4 w-4 rounded-full bg-black/70 flex items-center justify-center hover:bg-black/90 transition-colors"
+      >
+        <X className="h-2.5 w-2.5 text-white" />
+      </button>
+    )}
+  </div>
+);
diff --git a/src/features/bug-reports/hooks/use-submit-bug-reports.ts b/src/features/bug-reports/hooks/use-submit-bug-reports.ts
new file mode 100644
index 00000000..7c65c0d3
--- /dev/null
+++ b/src/features/bug-reports/hooks/use-submit-bug-reports.ts
@@ -0,0 +1,35 @@
+import { useMutation } from "@tanstack/react-query";
+import { toast } from "sonner";
+
+interface BugPayload {
+  title: string;
+  description: string;
+  imageFileIds: string[];
+  imageUrls: string[];
+}
+
+interface SubmitBugReportsResponse {
+  data: { $id: string }[];
+}
+
+export const useSubmitBugReports = () => {
+  return useMutation<SubmitBugReportsResponse, Error, { bugs: BugPayload[] }>({
+    mutationFn: async (payload) => {
+      const response = await fetch("/api/bug-reports", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload),
+      });
+
+      if (!response.ok) {
+        const err = (await response.json()) as { error?: string };
+        throw new Error(err.error || "Failed to submit bug report");
+      }
+
+      return response.json() as Promise<SubmitBugReportsResponse>;
+    },
+    onError: (error) => {
+      toast.error(error.message || "Failed to submit bug report");
+    },
+  });
+};
diff --git a/src/features/bug-reports/hooks/use-upload-bug-image.ts b/src/features/bug-reports/hooks/use-upload-bug-image.ts
new file mode 100644
index 00000000..079ac8dd
--- /dev/null
+++ b/src/features/bug-reports/hooks/use-upload-bug-image.ts
@@ -0,0 +1,30 @@
+import { useMutation } from "@tanstack/react-query";
+import { toast } from "sonner";
+
+interface UploadImageResponse {
+  data: { fileId: string; url: string };
+}
+
+export const useUploadBugImage = () => {
+  return useMutation<UploadImageResponse, Error, File>({
+    mutationFn: async (file) => {
+      const formData = new FormData();
+      formData.append("file", file);
+
+      const response = await fetch("/api/bug-reports/upload-image", {
+        method: "POST",
+        body: formData,
+      });
+
+      if (!response.ok) {
+        const err = (await response.json()) as { error?: string };
+        throw new Error(err.error || "Failed to upload image");
+      }
+
+      return response.json() as Promise<UploadImageResponse>;
+    },
+    onError: (error) => {
+      toast.error(error.message || "Failed to upload image");
+    },
+  });
+};
diff --git a/src/features/bug-reports/schemas.ts b/src/features/bug-reports/schemas.ts
new file mode 100644
index 00000000..fcec58ab
--- /dev/null
+++ b/src/features/bug-reports/schemas.ts
@@ -0,0 +1,30 @@
+import { z } from "zod";
+
+export const MAX_IMAGE_SIZE = 10 * 1024 * 1024; // 10MB
+
+export const ALLOWED_IMAGE_TYPES = [
+  "image/jpeg",
+  "image/jpg",
+  "image/png",
+  "image/gif",
+  "image/webp",
+];
+
+export const singleBugSchema = z.object({
+  title: z
+    .string()
+    .trim()
+    .min(3, "Title must be at least 3 characters")
+    .max(200, "Title must be under 200 characters"),
+  description: z
+    .string()
+    .trim()
+    .min(10, "Description must be at least 10 characters")
+    .max(5000, "Description must be under 5000 characters"),
+  imageFileIds: z.array(z.string()).optional().default([]),
+  imageUrls: z.array(z.string()).optional().default([]),
+});
+
+export const submitBugReportsSchema = z.object({
+  bugs: z.array(singleBugSchema).min(1, "At least one bug report is required"),
+});
diff --git a/src/features/bug-reports/types.ts b/src/features/bug-reports/types.ts
new file mode 100644
index 00000000..63b39d5c
--- /dev/null
+++ b/src/features/bug-reports/types.ts
@@ -0,0 +1,29 @@
+export interface BugReport {
+  $id: string;
+  userId: string;
+  email: string;
+  username: string;
+  title: string;
+  description: string;
+  imageFileIds: string[];
+  imageUrls: string[];
+  $createdAt: string;
+}
+
+export interface BugEntry {
+  id: string;
+  title: string;
+  description: string;
+  imageFileIds: string[];
+  imageUrls: string[];
+  uploadingImages: UploadingImage[];
+}
+
+export interface UploadingImage {
+  localId: string;
+  file: File;
+  previewUrl: string;
+  status: "uploading" | "done" | "error";
+  fileId?: string;
+  url?: string;
+}