diff --git a/apps/app/src/components/layout/sidebar.tsx b/apps/app/src/components/layout/sidebar.tsx
index 5f69a49e..16d41211 100644
--- a/apps/app/src/components/layout/sidebar.tsx
+++ b/apps/app/src/components/layout/sidebar.tsx
@@ -1240,11 +1240,29 @@ export function Sidebar() {
           >
             {!sidebarOpen ? (
               <div className="relative flex items-center justify-center rounded-lg">
-                <img
-                  src="/automaker.svg"
-                  alt="Automaker Logo"
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 256 256"
+                  role="img"
+                  aria-label="Automaker Logo"
                   className="size-8 group-hover:rotate-12 transition-transform duration-300 ease-out"
-                />
+                >
+                  <defs>
+                    <linearGradient id="bg-collapsed" x1="0" y1="0" x2="256" y2="256" gradientUnits="userSpaceOnUse">
+                      <stop offset="0%" style={{ stopColor: 'var(--brand-400)' }} />
+                      <stop offset="100%" style={{ stopColor: 'var(--brand-600)' }} />
+                    </linearGradient>
+                    <filter id="iconShadow-collapsed" x="-20%" y="-20%" width="140%" height="140%">
+                      <feDropShadow dx="0" dy="4" stdDeviation="4" floodColor="#000000" floodOpacity="0.25" />
+                    </filter>
+                  </defs>
+                  <rect x="16" y="16" width="224" height="224" rx="56" fill="url(#bg-collapsed)" />
+                  <g fill="none" stroke="#FFFFFF" strokeWidth="20" strokeLinecap="round" strokeLinejoin="round" filter="url(#iconShadow-collapsed)">
+                    <path d="M92 92 L52 128 L92 164" />
+                    <path d="M144 72 L116 184" />
+                    <path d="M164 92 L204 128 L164 164" />
+                  </g>
+                </svg>
               </div>
             ) : (
               <div
@@ -1253,12 +1271,30 @@ export function Sidebar() {
                   "hidden lg:flex"
                 )}
               >
-                <img
-                  src="/automaker.svg"
-                  alt="automaker"
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 256 256"
+                  role="img"
+                  aria-label="automaker"
                   className="h-[36.8px] w-[36.8px] group-hover:rotate-12 transition-transform duration-300 ease-out"
-                />
-                <span className="font-bold text-white text-[1.7rem] tracking-tight leading-none translate-y-[-2px]">
+                >
+                  <defs>
+                    <linearGradient id="bg-expanded" x1="0" y1="0" x2="256" y2="256" gradientUnits="userSpaceOnUse">
+                      <stop offset="0%" style={{ stopColor: 'var(--brand-400)' }} />
+                      <stop offset="100%" style={{ stopColor: 'var(--brand-600)' }} />
+                    </linearGradient>
+                    <filter id="iconShadow-expanded" x="-20%" y="-20%" width="140%" height="140%">
+                      <feDropShadow dx="0" dy="4" stdDeviation="4" floodColor="#000000" floodOpacity="0.25" />
+                    </filter>
+                  </defs>
+                  <rect x="16" y="16" width="224" height="224" rx="56" fill="url(#bg-expanded)" />
+                  <g fill="none" stroke="#FFFFFF" strokeWidth="20" strokeLinecap="round" strokeLinejoin="round" filter="url(#iconShadow-expanded)">
+                    <path d="M92 92 L52 128 L92 164" />
+                    <path d="M144 72 L116 184" />
+                    <path d="M164 92 L204 128 L164 164" />
+                  </g>
+                </svg>
+                <span className="font-bold text-foreground text-[1.7rem] tracking-tight leading-none translate-y-[-2px]">
                   automaker<span className="text-brand-500">.</span>
                 </span>
               </div>