apps/frontend/src/app/components/header/header.component.ts

@@ -18,6 +18,7 @@ import { ApiService } from '../../services/api.service';
     <header class="header">
       <nav class="navbar">
         <div class="nav-brand">
+          <img src="/assets/icons/icon-72x72.png" alt="Naomi's Library" class="brand-icon" />
           <h1><a routerLink="/">Naomi's Library</a></h1>
           @if (version()) {
             <span class="version">v{{ version() }}</span>
@@ -94,6 +95,27 @@ import { ApiService } from '../../services/api.service';
       margin: 0 auto;
     }
 
+    .nav-brand {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+    }
+
+    .brand-icon {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      object-fit: cover;
+      border: 2px solid var(--witch-purple);
+      box-shadow: 0 2px 8px rgba(157, 78, 221, 0.3);
+      transition: transform 0.2s, box-shadow 0.2s;
+    }
+
+    .brand-icon:hover {
+      transform: scale(1.05);
+      box-shadow: 0 4px 12px rgba(157, 78, 221, 0.5);
+    }
+
     .nav-brand h1 {
       margin: 0;
       font-size: 1.5rem;