diff --git a/public/images/brand-logo.png b/public/images/brand-logo.png
new file mode 100644
index 0000000..b6037d5
Binary files /dev/null and b/public/images/brand-logo.png differ
diff --git a/public/images/brand-wide-dark.png b/public/images/brand-wide-dark.png
new file mode 100644
index 0000000..b58ca36
Binary files /dev/null and b/public/images/brand-wide-dark.png differ
diff --git a/public/images/brand-wide-light.png b/public/images/brand-wide-light.png
new file mode 100644
index 0000000..14ceede
Binary files /dev/null and b/public/images/brand-wide-light.png differ
diff --git a/src/app/favicon.png b/src/app/favicon.png
new file mode 100644
index 0000000..b6037d5
Binary files /dev/null and b/src/app/favicon.png differ
diff --git a/src/app/icon.png b/src/app/icon.png
new file mode 100644
index 0000000..b6037d5
Binary files /dev/null and b/src/app/icon.png differ
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index f2bb9a4..fe00186 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -52,7 +52,7 @@ export default function Footer() {
           {/* Brand Section */}
           <div>
             <Link href="/" className="flex items-center transition-opacity hover:opacity-80 mb-4">
-              <Image src="/images/logo-dark.jpg" alt="DashCaddy" width={36} height={36} className="rounded" />
+              <Image src="/images/brand-logo.png" alt="DashCaddy" width={36} height={36} className="rounded" />
             </Link>
             <p className="text-surface-400 text-sm leading-relaxed mb-4">
               Self-hosted Docker dashboard with automatic SSL, DNS, and reverse proxy. Making self-hosting beautiful and effortless.
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index b71db84..37f5b46 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -20,7 +20,7 @@ export default function Navbar() {
         <div className="flex h-16 items-center justify-between">
           {/* Logo */}
           <Link href="/" className="flex items-center transition-opacity hover:opacity-80">
-            <Image src="/images/logo-dark.jpg" alt="DashCaddy" width={40} height={40} className="rounded-lg" priority />
+            <Image src="/images/brand-logo.png" alt="DashCaddy" width={40} height={40} className="rounded-lg" priority />
           </Link>
 
           {/* Desktop Navigation */}