diff --git a/public/logo-piggy.png b/public/logo-piggy.png
new file mode 100644
index 0000000..6348474
Binary files /dev/null and b/public/logo-piggy.png differ
diff --git a/src/components/layout/AppHeader.vue b/src/components/layout/AppHeader.vue
index 9e788c4..a8e7148 100644
--- a/src/components/layout/AppHeader.vue
+++ b/src/components/layout/AppHeader.vue
@@ -23,14 +23,7 @@ async function handleLogout() {
         </svg>
       </button>
       <RouterLink to="/" class="brand">
-        <svg class="brand-mark" viewBox="0 0 32 32" aria-hidden="true">
-          <rect width="32" height="32" rx="7" fill="#00bc7e" />
-          <g fill="#ffffff">
-            <rect x="7.5" y="17" width="3.4" height="8" rx="1.7" />
-            <rect x="14.3" y="12.5" width="3.4" height="12.5" rx="1.7" />
-            <rect x="21.1" y="8" width="3.4" height="17" rx="1.7" />
-          </g>
-        </svg>
+        <img class="brand-mark" src="/logo-piggy.png" alt="" aria-hidden="true" />
         <span class="brand-text">SlimBudget</span>
       </RouterLink>
     </div>
@@ -85,8 +78,10 @@ async function handleLogout() {
   background: transparent;
 }
 .brand-mark {
-  width: 26px;
-  height: 26px;
+  height: 28px;
+  width: auto;
+  max-width: 38px;
+  object-fit: contain;
   flex-shrink: 0;
 }
 .brand-text {