diff --git a/web/components/PageLogo.tsx b/web/components/PageLogo.tsx
deleted file mode 100644
index 4535a579b..000000000
--- a/web/components/PageLogo.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function PageLogo() {
-  return <div>Pimary logo component goes here</div>;
-}
diff --git a/web/components/ui/Logo/Logo.tsx b/web/components/ui/Logo/Logo.tsx
index c42aaccda..1949c13e1 100644
--- a/web/components/ui/Logo/Logo.tsx
+++ b/web/components/ui/Logo/Logo.tsx
@@ -1,3 +1,4 @@
+import { Image } from 'antd';
 import s from './Logo.module.scss';
 
 interface Props {
@@ -8,7 +9,7 @@ export default function Logo({ src }: Props) {
   return (
     <div className={s.root}>
       <div className={s.container}>
-        <div className={s.image} style={{ backgroundImage: `url(${src})` }} />
+        <Image src={src} alt="Logo" className={s.image} rootClassName={s.image} />
       </div>
     </div>
   );
diff --git a/web/stories/PageLogo.stories.tsx b/web/stories/PageLogo.stories.tsx
index 9166c6ad3..acb743f32 100644
--- a/web/stories/PageLogo.stories.tsx
+++ b/web/stories/PageLogo.stories.tsx
@@ -21,3 +21,8 @@ export const DemoServer = Template.bind({});
 DemoServer.args = {
   src: 'https://watch.owncast.online/logo',
 };
+
+export const NotSquare = Template.bind({});
+NotSquare.args = {
+  src: 'https://via.placeholder.com/150x325/FF0000/FFFFFF?text=Rectangle',
+};