diff --git a/site/src/App.tsx b/site/src/App.tsx
index 960d78f..35e1ed0 100644
--- a/site/src/App.tsx
+++ b/site/src/App.tsx
@@ -1,3 +1,4 @@
+import logoImg from "./assets/logo.png";
 import { useState, useEffect, useRef, useCallback, useMemo } from "react";
 import { motion, AnimatePresence, useMotionValue, useTransform, useReducedMotion } from "motion/react";
 import inboxImg from "./assets/screenshots/01-inbox.jpg";
@@ -389,7 +390,7 @@ export default function App() {
         <div className="hero-bg" />
         <motion.nav className="topbar" {...fade(reduced, 0)}>
           <div className="brand">
-            <div className="brand-mark">M</div>
+            <img src={logoImg} alt="Multi-Casual" className="brand-mark" />
             <span>{t.nav.brand}</span>
           </div>
           <div className="nav-links">
diff --git a/site/src/assets/logo.png b/site/src/assets/logo.png
new file mode 100644
index 0000000..8fa30f0
Binary files /dev/null and b/site/src/assets/logo.png differ
diff --git a/site/src/styles.css b/site/src/styles.css
index ff5c089..752f67e 100644
--- a/site/src/styles.css
+++ b/site/src/styles.css
@@ -77,12 +77,9 @@ a { color: inherit; text-decoration: none; }
 .brand-mark {
   width: 34px;
   height: 34px;
-  border-radius: 12px;
-  display: grid;
-  place-items: center;
-  color: white;
-  background: var(--blue);
-  box-shadow: 0 8px 18px rgba(22, 71, 255, 0.32);
+  border-radius: 10px;
+  object-fit: cover;
+  display: block;
 }
 
 .nav-links a {