diff --git a/web/components/ui/Header/Header.module.scss b/web/components/ui/Header/Header.module.scss
index 74f49de15..645e5ee14 100644
--- a/web/components/ui/Header/Header.module.scss
+++ b/web/components/ui/Header/Header.module.scss
@@ -69,3 +69,8 @@
   cursor: default;
   color: var(--theme-color-components-text-on-light);
 }
+
+.avatar {
+  background-color: white;
+  padding: 0.2rem;
+}
diff --git a/web/components/ui/Header/Header.tsx b/web/components/ui/Header/Header.tsx
index f9ae6ab77..8b3c0c404 100644
--- a/web/components/ui/Header/Header.tsx
+++ b/web/components/ui/Header/Header.tsx
@@ -1,9 +1,8 @@
-import { Tag, Tooltip } from 'antd';
+import { Tag, Tooltip, Avatar } from 'antd';
 import { FC } from 'react';
 import cn from 'classnames';
 import dynamic from 'next/dynamic';
 import Link from 'next/link';
-import { OwncastLogo } from '../../common/OwncastLogo/OwncastLogo';
 import styles from './Header.module.scss';
 
 // Lazy loaded components
@@ -41,7 +40,7 @@ export const Header: FC<HeaderComponentProps> = ({ name, chatAvailable, chatDisa
     </Link>
     <div className={styles.logo}>
       <div id="header-logo" className={styles.logoImage}>
-        <OwncastLogo variant="contrast" />
+        <Avatar src="/logo" size="large" shape="circle" className={styles.avatar} />
       </div>
       <h1 className={styles.title} id="global-header-text">
         {name}