diff --git a/app/soapbox/features/public_layout/components/header.tsx b/app/soapbox/features/public_layout/components/header.tsx
index 79253194e..03b33b0c4 100644
--- a/app/soapbox/features/public_layout/components/header.tsx
+++ b/app/soapbox/features/public_layout/components/header.tsx
@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
@@ -27,10 +28,10 @@ const Header = () => {
   const dispatch = useDispatch();
   const intl = useIntl();
 
-  const { logo } = useSoapboxConfig();
+  const { logo, logoDarkMode } = useSoapboxConfig();
   const features = useFeatures();
   const instance = useAppSelector((state) => state.instance);
-  const isOpen   = instance.get('registrations', false) === true;
+  const isOpen = instance.get('registrations', false) === true;
   const pepeOpen = useAppSelector(state => state.verification.getIn(['instance', 'registrations'], false) === true);
 
   const [isLoading, setLoading] = React.useState(false);
@@ -76,7 +77,11 @@ const Header = () => {
               <Sonar />
             </div>
             <Link to='/' className='z-10'>
-              <img alt='Logo' src={logo} className='h-6 w-auto cursor-pointer' />
+              <img alt='Logo' src={logo} className={classNames('h-6 w-auto cursor-pointer', { 'dark:hidden': logoDarkMode })} />
+              {logoDarkMode && (
+                <img alt='Logo' src={logoDarkMode} className='h-6 w-auto cursor-pointer hidden dark:block' />
+              )}
+
               <span className='hidden'>{intl.formatMessage(messages.home)}</span>
             </Link>
           </div>
diff --git a/app/soapbox/features/public_layout/components/sonar.tsx b/app/soapbox/features/public_layout/components/sonar.tsx
index f6a8ce21e..10ae9f293 100644
--- a/app/soapbox/features/public_layout/components/sonar.tsx
+++ b/app/soapbox/features/public_layout/components/sonar.tsx
@@ -3,10 +3,10 @@ import React from 'react';
 const Sonar = () => (
   <div className='relative'>
     <div className='relative w-48 h-48'>
-      <div className='animate-sonar-scale-4 absolute top-0 left-0 w-full h-full rounded-full bg-primary-600/25 opacity-0 pointer-events-none' />
-      <div className='animate-sonar-scale-3 absolute top-0 left-0 w-full h-full rounded-full bg-primary-600/25 opacity-0 pointer-events-none' />
-      <div className='animate-sonar-scale-2 absolute top-0 left-0 w-full h-full rounded-full bg-primary-600/25 opacity-0 pointer-events-none' />
-      <div className='animate-sonar-scale-1 absolute top-0 left-0 w-full h-full rounded-full bg-primary-600/25 opacity-0 pointer-events-none' />
+      <div className='animate-sonar-scale-4 absolute top-0 left-0 w-full h-full rounded-full bg-primary-600/25 dark:bg-primary-400/25 opacity-0 pointer-events-none' />
+      <div className='animate-sonar-scale-3 absolute top-0 left-0 w-full h-full rounded-full bg-primary-600/25 dark:bg-primary-400/25 opacity-0 pointer-events-none' />
+      <div className='animate-sonar-scale-2 absolute top-0 left-0 w-full h-full rounded-full bg-primary-600/25 dark:bg-primary-400/25 opacity-0 pointer-events-none' />
+      <div className='animate-sonar-scale-1 absolute top-0 left-0 w-full h-full rounded-full bg-primary-600/25 dark:bg-primary-400/25 opacity-0 pointer-events-none' />
 
       <div className='absolute top-0 left-0 w-48 h-48 bg-white dark:bg-slate-900 rounded-full' />
     </div>