From af033b65624bbeec0518419540b7f2b5f055a92f Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sat, 18 Apr 2026 22:48:48 +0000
Subject: [PATCH] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 src/components/app-shell.tsx    |  8 ++++----
 src/components/justice-icon.tsx | 19 +++++++++++++++++++
 src/routes/login.tsx            |  9 +++++----
 src/routes/pay.$id.tsx          |  4 ++--
 src/routes/setup.tsx            |  5 +++--
 5 files changed, 33 insertions(+), 12 deletions(-)
 create mode 100644 src/components/justice-icon.tsx

diff --git a/src/components/app-shell.tsx b/src/components/app-shell.tsx
index 6477dac..e80f889 100644
--- a/src/components/app-shell.tsx
+++ b/src/components/app-shell.tsx
@@ -8,7 +8,6 @@ import {
   Receipt,
   ShieldCheck,
   LogOut,
-  Scale,
   LayoutDashboard,
   Calendar as CalendarIcon,
   CheckSquare,
@@ -30,6 +29,7 @@ import { HeaderTimer } from "@/components/timer/header-timer";
 import { QuickAddTime, QuickAddExpense } from "@/components/quick-add/quick-add";
 import { DateCalculator } from "@/components/date-calculator";
 import { NotificationBell } from "@/components/notifications/notification-bell";
+import { JusticeIcon } from "@/components/justice-icon";
 
 interface NavItem {
   to: string;
@@ -77,8 +77,8 @@ export function AppShell({ children }: { children: ReactNode }) {
       {/* Sidebar */}
       <aside className="hidden md:flex w-64 flex-col bg-sidebar text-sidebar-foreground border-r border-sidebar-border">
         <div className="px-6 py-5 border-b border-sidebar-border flex items-center gap-2.5">
-          <div className="h-9 w-9 rounded-md bg-sidebar-primary flex items-center justify-center">
-            <Scale className="h-5 w-5 text-sidebar-primary-foreground" />
+          <div className="h-9 w-9 rounded-md bg-sidebar-primary flex items-center justify-center p-1">
+            <JusticeIcon className="h-full w-full" invert />
           </div>
           <div className="leading-tight">
             <div className="font-serif text-lg">Stage Law Firm, PLLC</div>
@@ -128,7 +128,7 @@ export function AppShell({ children }: { children: ReactNode }) {
       {/* Mobile top bar */}
       <div className="md:hidden fixed top-0 inset-x-0 h-14 bg-sidebar text-sidebar-foreground border-b border-sidebar-border flex items-center justify-between px-4 z-30">
         <Link to="/" className="flex items-center gap-2">
-          <Scale className="h-5 w-5" />
+          <JusticeIcon className="h-5 w-5" invert />
           <span className="font-serif text-lg">Counsel</span>
         </Link>
         <Button variant="ghost" size="sm" onClick={handleSignOut} className="text-sidebar-foreground">
diff --git a/src/components/justice-icon.tsx b/src/components/justice-icon.tsx
new file mode 100644
index 0000000..79ac8d0
--- /dev/null
+++ b/src/components/justice-icon.tsx
@@ -0,0 +1,19 @@
+import justiceImg from "@/assets/justice-icon.png";
+import { cn } from "@/lib/utils";
+
+interface JusticeIconProps {
+  className?: string;
+  /** When true, inverts the image to render white (for dark backgrounds). */
+  invert?: boolean;
+  alt?: string;
+}
+
+export function JusticeIcon({ className, invert = false, alt = "Lady Justice" }: JusticeIconProps) {
+  return (
+    <img
+      src={justiceImg}
+      alt={alt}
+      className={cn("object-contain", invert && "invert", className)}
+    />
+  );
+}
diff --git a/src/routes/login.tsx b/src/routes/login.tsx
index a403a5d..4348d6b 100644
--- a/src/routes/login.tsx
+++ b/src/routes/login.tsx
@@ -5,8 +5,9 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Scale, Loader2, ShieldCheck } from "lucide-react";
+import { Loader2, ShieldCheck } from "lucide-react";
 import { toast } from "sonner";
+import { JusticeIcon } from "@/components/justice-icon";
 
 export const Route = createFileRoute("/login")({
   component: LoginPage,
@@ -40,8 +41,8 @@ function LoginPage() {
       {/* Brand panel */}
       <div className="hidden lg:flex flex-col justify-between p-12 bg-sidebar text-sidebar-foreground">
         <div className="flex items-center gap-3">
-          <div className="h-10 w-10 rounded-md bg-sidebar-primary flex items-center justify-center">
-            <Scale className="h-5 w-5 text-sidebar-primary-foreground" />
+          <div className="h-10 w-10 rounded-md bg-sidebar-primary flex items-center justify-center p-1">
+            <JusticeIcon className="h-full w-full" invert />
           </div>
           <div>
             <div className="font-serif text-xl">Stage Law Firm, PLLC</div>
@@ -70,7 +71,7 @@ function LoginPage() {
         <Card className="w-full max-w-md border-border/60 shadow-sm">
           <CardHeader className="space-y-2">
             <div className="lg:hidden flex items-center gap-2 mb-2">
-              <Scale className="h-5 w-5 text-primary" />
+              <JusticeIcon className="h-5 w-5" />
               <span className="font-serif text-lg">Stage Law Firm, PLLC</span>
             </div>
             <CardTitle className="font-serif text-2xl">Sign in</CardTitle>
diff --git a/src/routes/pay.$id.tsx b/src/routes/pay.$id.tsx
index 03a3068..032287e 100644
--- a/src/routes/pay.$id.tsx
+++ b/src/routes/pay.$id.tsx
@@ -6,7 +6,7 @@ import { Badge } from "@/components/ui/badge";
 import { CheckCircle2, CreditCard, XCircle } from "lucide-react";
 import { formatCurrency } from "@/lib/format";
 import { getPublicPaymentRequest } from "@/lib/payments.functions";
-import { Scale } from "lucide-react";
+import { JusticeIcon } from "@/components/justice-icon";
 
 export const Route = createFileRoute("/pay/$id")({
   validateSearch: (s: Record<string, unknown>) => ({
@@ -28,7 +28,7 @@ function Shell({ children }: { children: React.ReactNode }) {
     <div className="min-h-screen bg-muted/30 flex items-center justify-center p-6">
       <div className="w-full max-w-lg">
         <div className="flex items-center justify-center gap-2 mb-6">
-          <Scale className="h-6 w-6 text-primary" />
+          <JusticeIcon className="h-6 w-6" />
           <span className="font-serif text-xl">Stage Law Firm, PLLC</span>
         </div>
         <Card className="border-border/60">
diff --git a/src/routes/setup.tsx b/src/routes/setup.tsx
index 334a956..4262c90 100644
--- a/src/routes/setup.tsx
+++ b/src/routes/setup.tsx
@@ -6,8 +6,9 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Loader2, Scale } from "lucide-react";
+import { Loader2 } from "lucide-react";
 import { toast } from "sonner";
+import { JusticeIcon } from "@/components/justice-icon";
 
 export const Route = createFileRoute("/setup")({
   component: SetupPage,
@@ -92,7 +93,7 @@ function SetupPage() {
       <Card className="w-full max-w-md">
         <CardHeader>
           <div className="flex items-center gap-2 mb-2">
-            <Scale className="h-5 w-5 text-primary" />
+            <JusticeIcon className="h-5 w-5" />
             <span className="font-serif text-lg">Counsel</span>
           </div>
           <CardTitle className="font-serif text-2xl">Create founding admin</CardTitle>