diff --git a/frontend/src/assets/logo.png b/frontend/src/assets/logo.png
new file mode 100644
index 0000000..d02f1d6
Binary files /dev/null and b/frontend/src/assets/logo.png differ
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index 4d06c24..cce4bca 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -4,6 +4,7 @@ import { shortenNpub } from '../lib/format';
 import { Avatar } from './Avatar';
 import { CopyButton } from './CopyButton';
 import { Icon, type IconName } from './Icon';
+import logoUrl from '../assets/logo.png';
 
 const NAV_ITEMS: { id: Screen; label: string; icon: IconName }[] = [
   { id: 'home', label: 'Home', icon: 'home' },
@@ -29,7 +30,7 @@ export function Sidebar({ screen, onNavigate }: SidebarProps) {
     <aside className="sidebar">
       <div className="sidebar-brand">
         <span className="sidebar-logo" aria-hidden="true">
-          <Icon name="shield" size={22} />
+          <img src={logoUrl} alt="" draggable={false} />
         </span>
         <div>
           <strong>Keynectr</strong>
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index d8541ee..06e610c 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -299,8 +299,21 @@ a {
   border-radius: 11px;
   display: grid;
   place-items: center;
-  background: var(--primary);
-  color: var(--on-primary);
+  background: #fff;
+  overflow: hidden;
+}
+
+.sidebar-logo img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+/* The artwork is black-on-white; flip it in dark themes so it stays black
+   bird on dark tile instead of a glaring white square. */
+html[data-theme='dark'] .sidebar-logo img {
+  filter: invert(1);
 }
 
 .sidebar-brand strong {
diff --git a/frontend/src/vite-env.d.ts b/frontend/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/frontend/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />