diff --git a/src/features/settings/components/DeveloperSection.tsx b/src/features/settings/components/DeveloperSection.tsx
new file mode 100644
index 0000000..2cbc3a2
--- /dev/null
+++ b/src/features/settings/components/DeveloperSection.tsx
@@ -0,0 +1,106 @@
+
+import { Code2, Copy, Eye, EyeOff } from "lucide-react";
+import { useState } from "react";
+import {
+    Accordion,
+    AccordionContent,
+    AccordionItem,
+    AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { toast } from "sonner";
+
+export function DeveloperSection() {
+    const [showKey, setShowKey] = useState(false);
+
+    const handleCopy = (text: string) => {
+        navigator.clipboard.writeText(text);
+        toast.success("Copied to clipboard");
+    };
+
+    return (
+        <div className="neu-card p-0 overflow-hidden">
+            <Accordion type="single" collapsible className="w-full">
+                <AccordionItem value="developer-settings" className="border-none">
+                    <AccordionTrigger className="px-6 py-4 hover:no-underline hover:bg-secondary/20 transition-colors">
+                        <div className="flex items-center gap-3">
+                            <Code2 className="h-5 w-5 text-muted-foreground" />
+                            <div className="text-left">
+                                <span className="font-semibold text-foreground">Developer & Webhooks</span>
+                                <p className="text-xs text-muted-foreground font-normal mt-0.5">API access and integration settings</p>
+                            </div>
+                        </div>
+                    </AccordionTrigger>
+                    <AccordionContent className="px-6 pb-6 pt-2">
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 pt-4 border-t border-border/50">
+                            <div className="space-y-4">
+                                <div className="space-y-2">
+                                    <Label>Publishable API Key</Label>
+                                    <div className="relative">
+                                        <Input
+                                            value="pk_live_51Mxxxxxxxxxxxxxxxxxx"
+                                            readOnly
+                                            className="pr-10 bg-secondary/50 font-mono text-xs"
+                                        />
+                                        <Button
+                                            variant="ghost"
+                                            size="icon"
+                                            className="absolute right-0 top-0 h-10 w-10 text-muted-foreground hover:text-foreground"
+                                            onClick={() => handleCopy("pk_live_51Mxxxxxxxxxxxxxxxxxx")}
+                                        >
+                                            <Copy className="h-4 w-4" />
+                                        </Button>
+                                    </div>
+                                </div>
+                                <div className="space-y-2">
+                                    <div className="flex justify-between">
+                                        <Label>Secret Key</Label>
+                                        <button
+                                            type="button"
+                                            onClick={() => setShowKey(!showKey)}
+                                            className="text-xs text-accent hover:underline flex items-center gap-1"
+                                        >
+                                            {showKey ? <EyeOff className="h-3 w-3" /> : <Eye className="h-3 w-3" />}
+                                            {showKey ? "Hide" : "Reveal"}
+                                        </button>
+                                    </div>
+                                    <div className="relative">
+                                        <Input
+                                            type={showKey ? "text" : "password"}
+                                            value="sk_live_51Mxxxxxxxxxxxxxxxxxx"
+                                            readOnly
+                                            className="pr-10 bg-secondary/50 font-mono text-xs"
+                                        />
+                                        <Button
+                                            variant="ghost"
+                                            size="icon"
+                                            className="absolute right-0 top-0 h-10 w-10 text-muted-foreground hover:text-foreground"
+                                            onClick={() => handleCopy("sk_live_51Mxxxxxxxxxxxxxxxxxx")}
+                                        >
+                                            <Copy className="h-4 w-4" />
+                                        </Button>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div className="space-y-4">
+                                <div className="space-y-2">
+                                    <Label>Webhook URL</Label>
+                                    <Input placeholder="https://your-domain.com/api/webhooks" className="font-mono text-sm" />
+                                    <p className="text-xs text-muted-foreground">
+                                        We will send POST requests to this URL for platform events.
+                                    </p>
+                                </div>
+                                <div className="flex justify-end pt-2">
+                                    <Button variant="secondary" size="sm">Send Test Event</Button>
+                                </div>
+                            </div>
+                        </div>
+                    </AccordionContent>
+                </AccordionItem>
+            </Accordion>
+        </div>
+    );
+}
diff --git a/src/features/settings/components/OrganizationProfileCard.tsx b/src/features/settings/components/OrganizationProfileCard.tsx
new file mode 100644
index 0000000..3c6d412
--- /dev/null
+++ b/src/features/settings/components/OrganizationProfileCard.tsx
@@ -0,0 +1,91 @@
+
+import { Building2, Pencil } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+    Sheet,
+    SheetContent,
+    SheetDescription,
+    SheetHeader,
+    SheetTitle,
+    SheetTrigger
+} from "@/components/ui/sheet";
+
+export function OrganizationProfileCard() {
+    return (
+        <div className="neu-card p-6 h-full flex flex-col relative group">
+            <div className="absolute right-6 top-6">
+                <Sheet>
+                    <SheetTrigger asChild>
+                        <Button variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground hover:text-accent">
+                            <Pencil className="h-4 w-4" />
+                        </Button>
+                    </SheetTrigger>
+                    <SheetContent>
+                        <SheetHeader>
+                            <SheetTitle>Edit Organization Profile</SheetTitle>
+                            <SheetDescription>Update your public-facing business identity.</SheetDescription>
+                        </SheetHeader>
+                        <div className="space-y-4 mt-6">
+                            <div className="space-y-2">
+                                <Label>Business Name</Label>
+                                <Input defaultValue="Eventify India Pvt Ltd" />
+                            </div>
+                            <div className="space-y-2">
+                                <Label>Support Email</Label>
+                                <Input defaultValue="support@eventify.in" />
+                            </div>
+                            <div className="space-y-2">
+                                <Label>GSTIN / VAT</Label>
+                                <Input defaultValue="27AAAAA0000A1Z5" />
+                            </div>
+                            <div className="space-y-2">
+                                <Label>Logo URL</Label>
+                                <Input defaultValue="https://event.ify/logo.png" />
+                            </div>
+                            <Button className="w-full bg-primary mt-4">Save Changes</Button>
+                        </div>
+                    </SheetContent>
+                </Sheet>
+            </div>
+
+            <div className="flex items-center gap-4 mb-6">
+                <div className="h-12 w-12 rounded-xl bg-primary/10 flex items-center justify-center">
+                    <Building2 className="h-6 w-6 text-primary" />
+                </div>
+                <div>
+                    <h3 className="font-bold text-lg text-foreground">Organization Profile</h3>
+                    <p className="text-sm text-muted-foreground">Public-facing identity</p>
+                </div>
+            </div>
+
+            <div className="space-y-4 flex-1">
+                <div>
+                    <span className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Business Name</span>
+                    <p className="text-base font-medium text-foreground">Eventify India Pvt Ltd</p>
+                </div>
+                <div>
+                    <span className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Support Contact</span>
+                    <p className="text-base font-medium text-foreground">support@eventify.in</p>
+                </div>
+                <div>
+                    <span className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">GSTIN</span>
+                    <p className="text-base font-medium text-foreground font-mono">27AAAAA0000A1Z5</p>
+                </div>
+            </div>
+
+            <div className="mt-6 pt-6 border-t border-border/50">
+                <div className="flex items-center gap-4">
+                    <div className="h-10 w-10 rounded-lg bg-surface border border-border flex items-center justify-center overflow-hidden">
+                        <span className="text-xs font-bold text-muted-foreground">Logo</span>
+                    </div>
+                    <div>
+                        <p className="text-sm font-medium">Ticket Branding</p>
+                        <p className="text-xs text-muted-foreground">Used on PDF invoices & tickets</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/src/features/settings/components/PayoutBankingCard.tsx b/src/features/settings/components/PayoutBankingCard.tsx
new file mode 100644
index 0000000..67306fc
--- /dev/null
+++ b/src/features/settings/components/PayoutBankingCard.tsx
@@ -0,0 +1,63 @@
+
+import { Landmark, CheckCircle2, AlertTriangle, ExternalLink } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+
+export function PayoutBankingCard() {
+    return (
+        <div className="neu-card p-6 h-full flex flex-col">
+            <div className="flex items-center gap-4 mb-6">
+                <div className="h-12 w-12 rounded-xl bg-purple-500/10 flex items-center justify-center">
+                    <Landmark className="h-6 w-6 text-purple-600 dark:text-purple-400" />
+                </div>
+                <div>
+                    <h3 className="font-bold text-lg text-foreground">Payout & Banking</h3>
+                    <p className="text-sm text-muted-foreground">Revenue destination</p>
+                </div>
+                <div className="ml-auto">
+                    <Badge className="bg-success/15 text-success hover:bg-success/25 border-none gap-1">
+                        <CheckCircle2 className="h-3 w-3" />
+                        Verified
+                    </Badge>
+                </div>
+            </div>
+
+            <div className="flex-1 space-y-4">
+                <div className="rounded-xl border border-purple-500/20 bg-gradient-to-br from-purple-500/5 to-transparent p-4 relative overflow-hidden">
+                    {/* Stripe-like card styling */}
+                    <div className="relative z-10">
+                        <p className="text-sm font-medium text-muted-foreground mb-1">Connected Bank Account</p>
+                        <div className="flex items-center gap-3">
+                            <div className="h-8 w-12 bg-surface rounded border border-border flex items-center justify-center">
+                                <span className="text-[10px] font-bold">HDFC</span>
+                            </div>
+                            <p className="text-lg font-mono font-bold text-foreground">•••• 8821</p>
+                        </div>
+                        <div className="mt-4 flex items-center justify-between">
+                            <p className="text-xs text-muted-foreground">Settlements enabled</p>
+                            <span className="text-xs font-medium text-purple-600 dark:text-purple-400">Primary</span>
+                        </div>
+                    </div>
+                    <div className="absolute -right-4 -top-8 h-24 w-24 bg-purple-500/10 rounded-full blur-2xl" />
+                </div>
+
+                <div className="rounded-xl border border-border/50 bg-secondary/20 p-4">
+                    <div className="flex items-start gap-3">
+                        <AlertTriangle className="h-4 w-4 text-warning mt-0.5" />
+                        <div>
+                            <p className="text-sm font-medium text-foreground">Tax Information Updated</p>
+                            <p className="text-xs text-muted-foreground mt-1">Your PAN and GST details are verified. No actions required.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div className="mt-6 pt-6 border-t border-border/50">
+                <Button variant="outline" className="w-full justify-between group">
+                    Manage Payout Methods
+                    <ExternalLink className="h-4 w-4 group-hover:text-foreground text-muted-foreground" />
+                </Button>
+            </div>
+        </div>
+    );
+}
diff --git a/src/features/settings/components/TeamSecurityCard.tsx b/src/features/settings/components/TeamSecurityCard.tsx
new file mode 100644
index 0000000..5f36b31
--- /dev/null
+++ b/src/features/settings/components/TeamSecurityCard.tsx
@@ -0,0 +1,65 @@
+
+import { Shield, Smartphone, ArrowRight, Users } from "lucide-react";
+import { Switch } from "@/components/ui/switch";
+import { Label } from "@/components/ui/label";
+import { Button } from "@/components/ui/button";
+import { Link } from "react-router-dom";
+
+export function TeamSecurityCard() {
+    return (
+        <div className="neu-card p-6 h-full flex flex-col">
+            <div className="flex items-center gap-4 mb-6">
+                <div className="h-12 w-12 rounded-xl bg-blue-500/10 flex items-center justify-center">
+                    <Shield className="h-6 w-6 text-blue-600 dark:text-blue-400" />
+                </div>
+                <div>
+                    <h3 className="font-bold text-lg text-foreground">Team & Security</h3>
+                    <p className="text-sm text-muted-foreground">Access control</p>
+                </div>
+            </div>
+
+            <div className="flex-1 space-y-6">
+                <div className="flex items-center justify-between p-3 rounded-lg bg-secondary/30">
+                    <div className="space-y-0.5">
+                        <Label className="text-base font-medium">Two-Factor Auth</Label>
+                        <p className="text-xs text-muted-foreground">Secure your account with OTP</p>
+                    </div>
+                    <Switch checked={true} />
+                </div>
+
+                <div className="space-y-3">
+                    <h4 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Active Sessions</h4>
+                    <div className="space-y-2">
+                        <div className="flex items-center gap-3 text-sm p-2 rounded-md hover:bg-secondary/50 transition-colors">
+                            <Smartphone className="h-4 w-4 text-muted-foreground" />
+                            <div className="flex-1">
+                                <p className="font-medium">MacBook Pro (This Device)</p>
+                                <p className="text-xs text-muted-foreground">Mumbai, IN • Just now</p>
+                            </div>
+                            <div className="h-2 w-2 rounded-full bg-success animate-pulse" />
+                        </div>
+                        <div className="flex items-center gap-3 text-sm p-2 rounded-md hover:bg-secondary/50 transition-colors opacity-70">
+                            <Smartphone className="h-4 w-4 text-muted-foreground" />
+                            <div className="flex-1">
+                                <p className="font-medium">Chrome on Windows</p>
+                                <p className="text-xs text-muted-foreground">Delhi, IN • 2h ago</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div className="mt-6 pt-6 border-t border-border/50">
+                <Button variant="ghost" className="w-full justify-between group px-0 hover:bg-transparent hover:text-accent" asChild>
+                    <Link to="/users">
+                        <span className="flex items-center gap-2">
+                            <Users className="h-4 w-4" />
+                            Manage Team Roles
+                        </span>
+                        <ArrowRight className="h-4 w-4" />
+                    </Link>
+                </Button>
+            </div>
+        </div>
+    );
+}
diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
index a80f1ba..55814f8 100644
--- a/src/pages/Settings.tsx
+++ b/src/pages/Settings.tsx
@@ -1,111 +1,56 @@
-import { Settings as SettingsIcon, Bell, Shield, Palette, Globe, Database } from 'lucide-react';
 import { AppLayout } from '@/components/layout/AppLayout';
-import { cn } from '@/lib/utils';
-
-const settingsSections = [
-  {
-    icon: Bell,
-    title: 'Notifications',
-    description: 'Configure email and push notification preferences',
-    status: 'Enabled',
-  },
-  {
-    icon: Shield,
-    title: 'Security',
-    description: 'Two-factor authentication and session management',
-    status: '2FA Active',
-  },
-  {
-    icon: Palette,
-    title: 'Appearance',
-    description: 'Theme, colors, and display settings',
-    status: 'Light Mode',
-  },
-  {
-    icon: Globe,
-    title: 'Localization',
-    description: 'Language, timezone, and currency settings',
-    status: 'INR / IST',
-  },
-  {
-    icon: Database,
-    title: 'Data & Export',
-    description: 'Export data and manage backups',
-    status: 'Last backup: Today',
-  },
-];
+import { OrganizationProfileCard } from '@/features/settings/components/OrganizationProfileCard';
+import { PayoutBankingCard } from '@/features/settings/components/PayoutBankingCard';
+import { TeamSecurityCard } from '@/features/settings/components/TeamSecurityCard';
+import { DeveloperSection } from '@/features/settings/components/DeveloperSection';
 
 export default function Settings() {
   return (
-    <AppLayout 
-      title="Settings" 
-      description="Configure platform settings and preferences."
+    <AppLayout
+      title="Settings"
+      description="Manage platform configuration and critical operations."
     >
-      {/* Settings Header Card */}
-      <div className="neu-card p-6 mb-8">
-        <div className="flex items-center gap-4">
-          <div className="h-16 w-16 rounded-2xl bg-primary shadow-neu-inset flex items-center justify-center">
-            <SettingsIcon className="h-8 w-8 text-primary-foreground" />
-          </div>
-          <div>
-            <h2 className="text-xl font-bold text-foreground">Platform Configuration</h2>
-            <p className="text-muted-foreground">Manage your Eventify backoffice settings</p>
-          </div>
-        </div>
-      </div>
+      <div className="space-y-6 max-w-[1200px]">
+        {/* Top Grid */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 h-auto lg:h-[400px]">
+          {/* Box 1: Organization Identity (High Priority) */}
+          <OrganizationProfileCard />
 
-      {/* Settings Grid */}
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-        {settingsSections.map((section) => (
-          <button
-            key={section.title}
-            className="neu-card neu-card-hover p-6 text-left group"
-          >
-            <div className="flex items-start gap-4">
-              <div className="h-12 w-12 rounded-xl bg-secondary shadow-neu-inset-sm flex items-center justify-center group-hover:shadow-neu-inset transition-shadow">
-                <section.icon className="h-6 w-6 text-accent" />
-              </div>
-              <div className="flex-1">
-                <div className="flex items-center justify-between">
-                  <h3 className="font-semibold text-foreground">{section.title}</h3>
-                  <span className="text-xs font-medium px-2 py-1 rounded-full bg-success/10 text-success">
-                    {section.status}
-                  </span>
-                </div>
-                <p className="text-sm text-muted-foreground mt-1">{section.description}</p>
-              </div>
+          {/* Box 2: Financials & Banking (High Priority) */}
+          <PayoutBankingCard />
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          {/* Box 3: Security (Full Width on Mobile, 2/3 on Desktop if needed, but here simple 1/3 stack or full width row) */}
+          {/* Adjusting layout: Let's make Security taking full row or sidebar style. 
+                Based on requirements "2x2 Grid or Vertical Stack".
+                Let's stick to a clean layout where Security sits next to maybe a logs panel or just takes full width.
+                Actually, the requirements said "Layout: 2x2 Grid". 
+                Let's put Team & Security as the 3rd box, and maybe Developer as 4th?
+                But Developer is collapsible.
+            */}
+          <div className="lg:col-span-2">
+            <TeamSecurityCard />
+          </div>
+          <div className="lg:col-span-1">
+            {/* Placeholder or Tip card? Or maybe just make TeamSecurityCard full width if it has lists.
+                     The TeamSecurityCard design I made is card-like.
+                     Let's span it across 2 columns for better readability of the list.
+                  */}
+            <div className="neu-card p-6 h-full bg-gradient-to-br from-primary/5 to-transparent border-primary/20">
+              <h4 className="font-bold text-lg mb-2">Need Help?</h4>
+              <p className="text-sm text-muted-foreground mb-4">
+                Contact our dedicated support team for assistance with account configurations.
+              </p>
+              <button className="text-sm font-bold text-primary hover:underline">
+                Open Support Ticket &rarr;
+              </button>
             </div>
-          </button>
-        ))}
-      </div>
-
-      {/* API Settings */}
-      <div className="neu-card p-6 mt-8">
-        <h3 className="text-lg font-bold text-foreground mb-4">API Configuration</h3>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <div>
-            <label className="block text-sm font-medium text-muted-foreground mb-2">
-              API Base URL
-            </label>
-            <input
-              type="text"
-              value="https://api.eventify.in/v1"
-              readOnly
-              className="w-full h-10 px-4 rounded-xl text-sm bg-secondary shadow-neu-inset focus:outline-none text-foreground"
-            />
-          </div>
-          <div>
-            <label className="block text-sm font-medium text-muted-foreground mb-2">
-              Webhook URL
-            </label>
-            <input
-              type="text"
-              value="https://api.eventify.in/webhooks"
-              readOnly
-              className="w-full h-10 px-4 rounded-xl text-sm bg-secondary shadow-neu-inset focus:outline-none text-foreground"
-            />
           </div>
         </div>
+
+        {/* Collapsible Developer Section */}
+        <DeveloperSection />
       </div>
     </AppLayout>
   );