diff --git a/src/app/(dashboard)/chats/page.tsx b/src/app/(dashboard)/chats/page.tsx
index ae65747..ba7e575 100644
--- a/src/app/(dashboard)/chats/page.tsx
+++ b/src/app/(dashboard)/chats/page.tsx
@@ -15,7 +15,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 import {
-  Search, Send, Phone, Video, MoreHorizontal, Paperclip,
+  Search, Send, Phone, MoreHorizontal, Paperclip,
   Smile, Flag, Ban, Trash2, Image, FileIcon, X, Mic, Square, Play, Pause, Check, CheckCheck,
   CornerDownRight, Forward, Pencil, Download, Undo2, CalendarDays, Loader2, FolderOpen, Mail,
 } from "lucide-react"
@@ -923,9 +923,6 @@ const formatPreviewContent = (content: string) => {
               <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => setIsCallModalOpen(true)}>
                 <Phone className="h-4 w-4" />
               </Button>
-              <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => toast.info("Video calling coming soon")}>
-                <Video className="h-4 w-4" />
-              </Button>
               <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => setScheduleDialogOpen(true)}>
                 <CalendarDays className="h-4 w-4" />
               </Button>
diff --git a/src/app/api/dashboard/route.ts b/src/app/api/dashboard/route.ts
index b23ad1d..f1a2112 100644
--- a/src/app/api/dashboard/route.ts
+++ b/src/app/api/dashboard/route.ts
@@ -196,11 +196,11 @@ export async function GET(request: NextRequest) {
       trends,
       recentLeads: mappedLeads.slice(0, 10),
       statusDistribution: [
-        { name: "Open", value: currentCounts.open, color: "#FFFFFF" },
-        { name: "Contacted", value: currentCounts.contacted, color: "#dc2626" },
-        { name: "Pending", value: currentCounts.pending, color: "#1e3a8a" },
-        { name: "Closed", value: currentCounts.closed, color: "#60a5fa" },
-        { name: "Ignored", value: currentCounts.ignored, color: "#000000" },
+        { name: "Open", value: currentCounts.open, color: "#3b82f6" },
+        { name: "Contacted", value: currentCounts.contacted, color: "#f59e0b" },
+        { name: "Pending", value: currentCounts.pending, color: "#8b5cf6" },
+        { name: "Closed", value: currentCounts.closed, color: "#10b981" },
+        { name: "Ignored", value: currentCounts.ignored, color: "#6B7280" },
       ],
       periodLabel: periodLabels[period] ?? "Selected period",
     }
diff --git a/src/components/dashboard/lead-status-chart.tsx b/src/components/dashboard/lead-status-chart.tsx
index d40d7fa..bdb8f09 100644
--- a/src/components/dashboard/lead-status-chart.tsx
+++ b/src/components/dashboard/lead-status-chart.tsx
@@ -98,7 +98,7 @@ export function LeadStatusChart({ data }: LeadStatusChartProps) {
                     key={i}
                     d={arcPath(160, 160, oR, iR, s.start, s.end)}
                     fill={`url(#chart-grad-${i})`}
-                    stroke="#d4d4d4"
+                    stroke="#000000"
                     strokeWidth="1"
                     opacity={hov !== null && !isH ? 0.3 : 1}
                     style={{
diff --git a/src/components/dashboard/recent-leads-table.tsx b/src/components/dashboard/recent-leads-table.tsx
index 716b423..1b7d799 100644
--- a/src/components/dashboard/recent-leads-table.tsx
+++ b/src/components/dashboard/recent-leads-table.tsx
@@ -9,11 +9,11 @@ import { Lead } from "@/types"
 import { ArrowRight } from "lucide-react"
 
 const statusStyles: Record<string, string> = {
-  open: "bg-white/40 text-gray-700 dark:text-gray-300 border-gray-300/50 dark:border-gray-600/50",
-  contacted: "bg-red-500/10 text-red-600 dark:text-red-400 border-red-500/20",
-  pending: "bg-blue-900/10 text-blue-900 dark:text-blue-300 border-blue-900/20",
-  closed: "bg-blue-400/10 text-blue-600 dark:text-blue-300 border-blue-400/20",
-  ignored: "bg-black/10 text-black dark:text-gray-300 border-black/20 dark:border-black/40",
+  open: "bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/20",
+  contacted: "bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/20",
+  pending: "bg-purple-500/10 text-purple-600 dark:text-purple-400 border-purple-500/20",
+  closed: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20",
+  ignored: "bg-zinc-500/10 text-zinc-600 dark:text-zinc-400 border-zinc-500/20",
 }
 
 interface RecentLeadsTableProps {
diff --git a/src/components/layout/topbar.tsx b/src/components/layout/topbar.tsx
index f719421..fc2cde9 100644
--- a/src/components/layout/topbar.tsx
+++ b/src/components/layout/topbar.tsx
@@ -33,6 +33,7 @@ import {
   Trash2,
 } from "lucide-react";
 import { useWebsiteTheme } from "@/providers/website-theme-provider";
+import { CaptainAmericaShield } from "@/components/shared/captain-america-shield";
 
 interface TopbarProps {
   onMenuClick: () => void;
@@ -72,40 +73,11 @@ export function Topbar({ onMenuClick }: TopbarProps) {
     .toUpperCase();
 
   return (
-    <header className="sticky top-0 z-20 flex h-16 items-center gap-4 border-b bg-card dark:bg-[#141414] px-4 lg:px-6 relative overflow-hidden">
+    <header className="sticky top-0 z-20 flex h-16 items-center gap-4 border-b bg-card dark:bg-sidebar px-4 lg:px-6 relative overflow-hidden">
       {/* Logo */}
       <div className="flex items-center gap-2 mr-2 shrink-0">
-        {websiteTheme === "spidey" && (
-          <>
-            <svg width="28" height="28" viewBox="0 0 28 28" fill="none" className="dark:hidden shrink-0">
-              <circle cx="14" cy="14" r="14" fill="white"/>
-              <ellipse cx="14" cy="14" rx="4" ry="5" fill="#CC0000"/>
-              <ellipse cx="14" cy="14" rx="2" ry="2.5" fill="#CC0000"/>
-              <line x1="14" y1="9" x2="6" y2="5" stroke="#CC0000" strokeWidth="1.2"/>
-              <line x1="14" y1="9" x2="22" y2="5" stroke="#CC0000" strokeWidth="1.2"/>
-              <line x1="14" y1="12" x2="5" y2="11" stroke="#CC0000" strokeWidth="1.2"/>
-              <line x1="14" y1="12" x2="23" y2="11" stroke="#CC0000" strokeWidth="1.2"/>
-              <line x1="14" y1="19" x2="6" y2="23" stroke="#CC0000" strokeWidth="1.2"/>
-              <line x1="14" y1="19" x2="22" y2="23" stroke="#CC0000" strokeWidth="1.2"/>
-              <line x1="14" y1="16" x2="5" y2="17" stroke="#CC0000" strokeWidth="1.2"/>
-              <line x1="14" y1="16" x2="23" y2="17" stroke="#CC0000" strokeWidth="1.2"/>
-            </svg>
-            <svg width="28" height="28" viewBox="0 0 28 28" fill="none" className="hidden dark:block shrink-0">
-              <circle cx="14" cy="14" r="14" fill="#1A1A1A"/>
-              <ellipse cx="14" cy="14" rx="4" ry="5" fill="#FF1111"/>
-              <ellipse cx="14" cy="14" rx="2" ry="2.5" fill="#FF1111"/>
-              <line x1="14" y1="9" x2="6" y2="5" stroke="#FF1111" strokeWidth="1.2"/>
-              <line x1="14" y1="9" x2="22" y2="5" stroke="#FF1111" strokeWidth="1.2"/>
-              <line x1="14" y1="12" x2="5" y2="11" stroke="#FF1111" strokeWidth="1.2"/>
-              <line x1="14" y1="12" x2="23" y2="11" stroke="#FF1111" strokeWidth="1.2"/>
-              <line x1="14" y1="19" x2="6" y2="23" stroke="#FF1111" strokeWidth="1.2"/>
-              <line x1="14" y1="19" x2="22" y2="23" stroke="#FF1111" strokeWidth="1.2"/>
-              <line x1="14" y1="16" x2="5" y2="17" stroke="#FF1111" strokeWidth="1.2"/>
-              <line x1="14" y1="16" x2="23" y2="17" stroke="#FF1111" strokeWidth="1.2"/>
-            </svg>
-          </>
-        )}
-        <span className="text-[#CC0000] dark:text-[#FF1111] font-bold text-sm tracking-wide">
+        {websiteTheme === "spidey" && <CaptainAmericaShield />}
+        <span className="text-primary font-bold text-sm tracking-wide">
           CRM
         </span>
       </div>
diff --git a/src/components/leads/lead-status-badge.tsx b/src/components/leads/lead-status-badge.tsx
index ee423af..6675da5 100644
--- a/src/components/leads/lead-status-badge.tsx
+++ b/src/components/leads/lead-status-badge.tsx
@@ -7,23 +7,23 @@ import { cn } from "@/lib/utils"
 const statusConfig: Record<LeadStatus, { label: string; class: string }> = {
   open: {
     label: "Open",
-    class: "bg-white/40 text-gray-700 dark:text-gray-300 border-gray-300/50 dark:border-gray-600/50",
+    class: "bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/20",
   },
   contacted: {
     label: "Contacted",
-    class: "bg-red-500/10 text-red-600 dark:text-red-400 border-red-500/20",
+    class: "bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/20",
   },
   pending: {
     label: "Pending",
-    class: "bg-blue-900/10 text-blue-900 dark:text-blue-300 border-blue-900/20",
+    class: "bg-purple-500/10 text-purple-600 dark:text-purple-400 border-purple-500/20",
   },
   closed: {
     label: "Closed",
-    class: "bg-blue-400/10 text-blue-600 dark:text-blue-300 border-blue-400/20",
+    class: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20",
   },
   ignored: {
     label: "Ignored",
-    class: "bg-black/10 text-black dark:text-gray-300 border-black/20 dark:border-black/40",
+    class: "bg-zinc-500/10 text-zinc-600 dark:text-zinc-400 border-zinc-500/20",
   },
 }
 
@@ -37,11 +37,11 @@ export function LeadStatusBadge({ status, className }: LeadStatusBadgeProps) {
   return (
     <Badge variant="outline" className={cn(config.class, className)}>
       <span className={cn("mr-1.5 h-1.5 w-1.5 rounded-full", {
-        "bg-white border border-gray-300 dark:border-gray-500": status === "open",
-        "bg-red-500": status === "contacted",
-        "bg-blue-900": status === "pending",
-        "bg-blue-400": status === "closed",
-        "bg-black": status === "ignored",
+        "bg-blue-500": status === "open",
+        "bg-amber-500": status === "contacted",
+        "bg-purple-500": status === "pending",
+        "bg-emerald-500": status === "closed",
+        "bg-zinc-500": status === "ignored",
       })} />
       {config.label}
     </Badge>
diff --git a/src/components/shared/captain-america-shield.tsx b/src/components/shared/captain-america-shield.tsx
index 5776e67..342b8fc 100644
--- a/src/components/shared/captain-america-shield.tsx
+++ b/src/components/shared/captain-america-shield.tsx
@@ -8,24 +8,11 @@ export function CaptainAmericaShield() {
       viewBox="0 0 100 100"
       aria-hidden="true"
     >
-      <defs>
-        <clipPath id="shield-clip">
-          <polygon points="50,95 5,60 5,30 50,5 95,30 95,60" />
-        </clipPath>
-      </defs>
-      <g clipPath="url(#shield-clip)">
-        <circle cx="50" cy="45" r="45" fill="#c62828" />
-        <circle cx="50" cy="45" r="35" fill="#efefef" />
-        <circle cx="50" cy="45" r="25" fill="#c62828" />
-        <circle cx="50" cy="45" r="15" fill="#1565c0" />
-        <polygon points="50,32 56,47 72,48 60,58 64,75 50,64 36,75 40,58 28,48 44,47" fill="#efefef" />
-      </g>
-      <polygon
-        points="50,95 5,60 5,30 50,5 95,30 95,60"
-        fill="none"
-        stroke="#c62828"
-        strokeWidth="1.5"
-      />
+      <circle cx="50" cy="50" r="48" fill="#c62828" />
+      <circle cx="50" cy="50" r="36" fill="#efefef" />
+      <circle cx="50" cy="50" r="24" fill="#c62828" />
+      <circle cx="50" cy="50" r="14" fill="#1565c0" />
+      <polygon points="50,34 55,48 70,48 58,57 62,72 50,62 38,72 42,57 30,48 45,48" fill="#efefef" />
     </svg>
   )
 }
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index 80bc133..d4e4485 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -1,9 +1,9 @@
 export const LEAD_STATUSES = {
-  open: { label: "Open", color: "bg-white" },
-  contacted: { label: "Contacted", color: "bg-red-500" },
-  pending: { label: "Pending", color: "bg-blue-900" },
-  closed: { label: "Closed", color: "bg-blue-400" },
-  ignored: { label: "Ignored", color: "bg-black" },
+  open: { label: "Open", color: "bg-blue-500" },
+  contacted: { label: "Contacted", color: "bg-amber-500" },
+  pending: { label: "Pending", color: "bg-purple-500" },
+  closed: { label: "Closed", color: "bg-emerald-500" },
+  ignored: { label: "Ignored", color: "bg-zinc-500" },
 } as const
 
 export const LEAD_SOURCES = [