diff --git a/client/src/scripts/home.js b/client/src/scripts/home.js
index 3839f23..0c31fd8 100644
--- a/client/src/scripts/home.js
+++ b/client/src/scripts/home.js
@@ -4,6 +4,13 @@ import { Confirmation } from '../modules/front_end_components/Confirmation.js';
 
 const home = () => {
     injectNavbar();
+    const logo = new Image();
+    logo.alt = 'Werewolf App Logo'
+    logo.onload = () => {
+        document.querySelector('#new-logo-placeholder')?.remove();
+        document.getElementById('home-page-top-section').prepend(logo);
+    }
+    logo.src = '../images/new-logo.png';
     const urlParams = new URLSearchParams(window.location.search);
     const message = urlParams.get('message');
     if (message && message.length > 0) {
diff --git a/client/src/styles/home.css b/client/src/styles/home.css
index c06a4d5..d1572dc 100644
--- a/client/src/styles/home.css
+++ b/client/src/styles/home.css
@@ -105,11 +105,12 @@ h3 {
     font-family: 'signika-negative', sans-serif;
 }
 
-img[src='../images/new-logo.png'] {
+img[src='../images/new-logo.png'], #new-logo-placeholder {
     max-width: 250px;
     width: 25vw;
     min-width: 180px;
     margin: 1em 0 1em 0;
+    aspect-ratio: 500 / 641;
 }
 
 form > div {
diff --git a/client/src/views/home.html b/client/src/views/home.html
index 7f8d5ab..00dc43c 100644
--- a/client/src/views/home.html
+++ b/client/src/views/home.html
@@ -25,7 +25,7 @@
     <div id="mobile-menu-background-overlay"></div>
     <div id="navbar"></div>
     <div id="home-page-top-section">
-        <img alt="Werewolf App Logo" src="../images/new-logo.png"/>
+        <div id="new-logo-placeholder"></div>
         <h3>A tool to run the social deception game Werewolf (aka Mafia) smoothly in a real or virtual social setting.</h3>
         <div id="create-join">
             <a href="/create">