diff --git a/web/components/manifold-logo.tsx b/web/components/manifold-logo.tsx
index a36ae712..db37c918 100644
--- a/web/components/manifold-logo.tsx
+++ b/web/components/manifold-logo.tsx
@@ -2,12 +2,15 @@ import Link from 'next/link'
 import Image from 'next/image'
 import clsx from 'clsx'
 
-export function ManifoldLogo(props: { darkBackground?: boolean }) {
-  const { darkBackground } = props
+export function ManifoldLogo(props: {
+  className?: string
+  darkBackground?: boolean
+}) {
+  const { darkBackground, className } = props
 
   return (
     <Link href="/">
-      <a className="flex flex-row gap-4 flex-shrink-0">
+      <a className={clsx('flex flex-row gap-4 flex-shrink-0', className)}>
         <Image
           className="hover:rotate-12 transition-all"
           src={darkBackground ? '/logo-white.svg' : '/logo.svg'}
diff --git a/web/components/nav-bar.tsx b/web/components/nav-bar.tsx
index d4abd801..0b98506e 100644
--- a/web/components/nav-bar.tsx
+++ b/web/components/nav-bar.tsx
@@ -28,7 +28,7 @@ export function NavBar(props: {
           wide ? 'max-w-6xl' : 'max-w-4xl'
         )}
       >
-        <ManifoldLogo darkBackground={darkBackground} />
+        <ManifoldLogo className="my-1" darkBackground={darkBackground} />
 
         <Row className="items-center gap-6 sm:gap-8 ml-6">
           {(user || user === null) && (