diff --git a/frontend/eslint.config.js b/frontend/eslint.config.js
index dba0190..e5c5bb2 100644
--- a/frontend/eslint.config.js
+++ b/frontend/eslint.config.js
@@ -6,7 +6,7 @@ import tseslint from "typescript-eslint";
 import { globalIgnores } from "eslint/config";
 
 export default tseslint.config([
-  globalIgnores(["dist"]),
+  globalIgnores(["dist", "dev-dist"]),
   {
     files: ["**/*.{ts,tsx}"],
     extends: [
diff --git a/frontend/index.html b/frontend/index.html
index b1436e4..7af3f2a 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -6,7 +6,7 @@
     <link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <title>Leggen</title>
-    
+
     <!-- PWA Meta Tags -->
     <meta name="description" content="Personal finance management application" />
     <meta name="application-name" content="Leggen" />
@@ -16,19 +16,19 @@
     <meta name="format-detection" content="telephone=no" />
     <meta name="mobile-web-app-capable" content="yes" />
     <meta name="msapplication-config" content="/browserconfig.xml" />
-    <meta name="msapplication-TileColor" content="#3B82F6" />
+    <meta name="msapplication-TileColor" content="#0b74de" />
     <meta name="msapplication-tap-highlight" content="no" />
-    
+
     <!-- Dynamic theme-color - will be updated by JavaScript -->
-    <meta name="theme-color" content="#ffffff" id="theme-color-meta" />
-    <meta name="msapplication-navbutton-color" content="#ffffff" id="ms-theme-color-meta" />
+    <meta name="theme-color" content="#0b74de" id="theme-color-meta" />
+    <meta name="msapplication-navbutton-color" content="#0b74de" id="ms-theme-color-meta" />
     <meta name="apple-mobile-web-app-status-bar-style" content="default" id="apple-status-bar-meta" />
-    
+
     <!-- Icons -->
     <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" />
-    <link rel="mask-icon" href="/favicon.svg" color="#3B82F6" />
+    <link rel="mask-icon" href="/favicon.svg" color="#0b74de" />
     <link rel="shortcut icon" href="/favicon.ico" />
-    
+
     <!-- Manifest -->
     <link rel="manifest" href="/manifest.webmanifest" />
   </head>
diff --git a/frontend/public/apple-touch-icon-180x180.png b/frontend/public/apple-touch-icon-180x180.png
index 703f71b..e120e92 100644
Binary files a/frontend/public/apple-touch-icon-180x180.png and b/frontend/public/apple-touch-icon-180x180.png differ
diff --git a/frontend/public/favicon.ico b/frontend/public/favicon.ico
index 96bb6bb..127c698 100644
Binary files a/frontend/public/favicon.ico and b/frontend/public/favicon.ico differ
diff --git a/frontend/public/favicon.svg b/frontend/public/favicon.svg
index f3d69ab..6ff3a2c 100644
--- a/frontend/public/favicon.svg
+++ b/frontend/public/favicon.svg
@@ -1,4 +1,27 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
-  <rect width="32" height="32" rx="6" fill="#3B82F6"/>
-  <path d="M8 24V8h6c2.2 0 4 1.8 4 4v4c0 2.2-1.8 4-4 4H12v4H8zm4-8h2c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1h-2v4z" fill="white"/>
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="32" height="32"
+     viewBox="0 0 32 32"
+     role="img" aria-labelledby="title desc">
+  <title id="title">leggen — stylized italic L</title>
+  <desc id="desc">Square gradient background with italic white L.</desc>
+
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#0b74de"/>
+      <stop offset="100%" stop-color="#06b6d4"/>
+    </linearGradient>
+  </defs>
+
+  <!-- Square background -->
+  <rect width="32" height="32" fill="url(#bg)" rx="4"/>
+
+  <!-- Italic L -->
+  <text x="11" y="22"
+        font-family="Inter, Roboto, Arial, sans-serif"
+        font-weight="700"
+        font-size="20"
+        font-style="italic"
+        fill="#fff">
+    L
+  </text>
 </svg>
diff --git a/frontend/public/maskable-icon-512x512.png b/frontend/public/maskable-icon-512x512.png
index 41a6f34..0e7dd5e 100644
Binary files a/frontend/public/maskable-icon-512x512.png and b/frontend/public/maskable-icon-512x512.png differ
diff --git a/frontend/public/pwa-192x192.png b/frontend/public/pwa-192x192.png
index 2bd1af7..9730424 100644
Binary files a/frontend/public/pwa-192x192.png and b/frontend/public/pwa-192x192.png differ
diff --git a/frontend/public/pwa-512x512.png b/frontend/public/pwa-512x512.png
index eaf17f0..eb91312 100644
Binary files a/frontend/public/pwa-512x512.png and b/frontend/public/pwa-512x512.png differ
diff --git a/frontend/public/pwa-64x64.png b/frontend/public/pwa-64x64.png
index de5c05e..808f677 100644
Binary files a/frontend/public/pwa-64x64.png and b/frontend/public/pwa-64x64.png differ
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index 9181721..055080e 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -1,6 +1,5 @@
 import { Link, useLocation } from "@tanstack/react-router";
 import {
-  CreditCard,
   Home,
   List,
   BarChart3,
@@ -8,6 +7,7 @@ import {
   TrendingUp,
   X,
 } from "lucide-react";
+import { Logo } from "./ui/logo";
 import { useQuery } from "@tanstack/react-query";
 import { apiClient } from "../lib/api";
 import { formatCurrency } from "../lib/utils";
@@ -53,7 +53,7 @@ export default function Sidebar({ sidebarOpen, setSidebarOpen }: SidebarProps) {
           onClick={() => setSidebarOpen(false)}
           className="flex items-center space-x-2 hover:opacity-80 transition-opacity"
         >
-          <CreditCard className="h-8 w-8 text-primary" />
+          <Logo size={32} />
           <h1 className="text-xl font-bold text-card-foreground">Leggen</h1>
         </Link>
         <button
diff --git a/frontend/src/components/ui/logo.tsx b/frontend/src/components/ui/logo.tsx
new file mode 100644
index 0000000..5312571
--- /dev/null
+++ b/frontend/src/components/ui/logo.tsx
@@ -0,0 +1,44 @@
+interface LogoProps {
+  className?: string;
+  size?: number;
+}
+
+export function Logo({ className = "", size = 32 }: LogoProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 32 32"
+      className={className}
+      role="img"
+      aria-labelledby="logo-title logo-desc"
+    >
+      <title id="logo-title">leggen — stylized italic L</title>
+      <desc id="logo-desc">Square gradient background with italic white L.</desc>
+
+      <defs>
+        <linearGradient id="logo-bg" x1="0" y1="0" x2="1" y2="1">
+          <stop offset="0%" stopColor="#0b74de" />
+          <stop offset="100%" stopColor="#06b6d4" />
+        </linearGradient>
+      </defs>
+
+      {/* Square background */}
+      <rect width="32" height="32" fill="url(#logo-bg)" rx="4" />
+
+      {/* Italic L */}
+      <text
+        x="11"
+        y="22"
+        fontFamily="Inter, Roboto, Arial, sans-serif"
+        fontWeight="700"
+        fontSize="20"
+        fontStyle="italic"
+        fill="#fff"
+      >
+        L
+      </text>
+    </svg>
+  );
+}
diff --git a/frontend/src/contexts/ThemeContext.tsx b/frontend/src/contexts/ThemeContext.tsx
index 7291e88..d4acd32 100644
--- a/frontend/src/contexts/ThemeContext.tsx
+++ b/frontend/src/contexts/ThemeContext.tsx
@@ -12,7 +12,7 @@ const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
 
 // Theme colors for different modes
 const THEME_COLORS = {
-  light: "#ffffff",
+  light: "#0b74de", // Primary brand color
   dark: "#0f0f23", // Dark background color that matches typical dark themes
 } as const;
 
@@ -49,7 +49,7 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
 
       // Update theme-color meta tags for PWA status bar
       const themeColor = THEME_COLORS[resolvedTheme];
-      
+
       // Update theme-color meta tag
       const themeColorMeta = document.getElementById("theme-color-meta") as HTMLMetaElement;
       if (themeColorMeta) {
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 3e69677..b524fa2 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -10,10 +10,10 @@
     --card-foreground: 222.2 84% 4.9%;
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 84% 4.9%;
-    --primary: 222.2 47.4% 11.2%;
+    --primary: 219 91% 46%;
     --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 189 94% 43%;
+    --secondary-foreground: 210 40% 98%;
     --muted: 210 40% 96.1%;
     --muted-foreground: 215.4 16.3% 46.9%;
     --accent: 210 40% 96.1%;
@@ -37,9 +37,9 @@
     --card-foreground: 210 40% 98%;
     --popover: 222.2 84% 4.9%;
     --popover-foreground: 210 40% 98%;
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-    --secondary: 217.2 32.6% 17.5%;
+    --primary: 219 91% 46%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 189 94% 43%;
     --secondary-foreground: 210 40% 98%;
     --muted: 217.2 32.6% 17.5%;
     --muted-foreground: 215 20.2% 65.1%;
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index c1e0e92..4df491e 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -15,7 +15,7 @@ export default defineConfig({
         name: "Leggen",
         short_name: "Leggen",
         description: "Personal finance management application",
-        theme_color: "#ffffff",
+        theme_color: "#0b74de",
         background_color: "#ffffff",
         display: "standalone",
         orientation: "portrait",