diff --git a/README.md b/README.md
index c52067d..6ecd92d 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,5 @@
 <p align="center">
-  <img width="300" src="/client/src/images/logo.gif"/>
+  <img width="200" src="/client/src/images/new-logo.png"/>
 </p>
 
 [![Node.js CI](https://github.com/AlecM33/Werewolf/actions/workflows/node.js.yml/badge.svg)](https://github.com/AlecM33/Werewolf/actions/workflows/node.js.yml)
diff --git a/client/src/images/new-logo-small.png b/client/src/images/new-logo-small.png
new file mode 100644
index 0000000..1d1d386
Binary files /dev/null and b/client/src/images/new-logo-small.png differ
diff --git a/client/src/images/new-logo.png b/client/src/images/new-logo.png
new file mode 100644
index 0000000..11ddc45
Binary files /dev/null and b/client/src/images/new-logo.png differ
diff --git a/client/src/modules/front_end_components/Navbar.js b/client/src/modules/front_end_components/Navbar.js
index c6adb36..d9f4039 100644
--- a/client/src/modules/front_end_components/Navbar.js
+++ b/client/src/modules/front_end_components/Navbar.js
@@ -38,7 +38,7 @@ function flipHamburger () {
 function getNavbarLinks (page = null, device) {
     const linkClass = device === 'mobile' ? 'mobile-link' : 'desktop-link';
     return '<a href="/" class="logo ' + linkClass + '">' +
-    '<img alt="logo" src="../../images/Werewolf_Small.png"/>' +
+    '<img alt="logo" src="../../images/new-logo-small.png"/>' +
     '</a>' +
     '<a class="' + linkClass + '" href="/">Home</a>' +
     '<a class="' + linkClass + '" href="/create">Create</a>' +
diff --git a/client/src/styles/GLOBAL.css b/client/src/styles/GLOBAL.css
index 74bbd85..fbad936 100644
--- a/client/src/styles/GLOBAL.css
+++ b/client/src/styles/GLOBAL.css
@@ -356,7 +356,7 @@ input {
 #navbar {
     display: flex;
     align-items: center;
-    padding: 5px 0;
+    padding: 8px 0;
     width: 100%;
     background-color: #16141e;
     height: 45px;
diff --git a/client/src/styles/home.css b/client/src/styles/home.css
index 369d068..033e390 100644
--- a/client/src/styles/home.css
+++ b/client/src/styles/home.css
@@ -105,10 +105,10 @@ h3 {
     font-family: 'signika-negative', sans-serif;
 }
 
-img[src='../images/logo_cropped.gif'] {
-    max-width: 360px;
-    width: 50vw;
-    min-width: 250px;
+img[src='../images/new-logo.png'] {
+    max-width: 250px;
+    width: 25vw;
+    min-width: 180px;
     margin: 1em 0 1em 0;
 }
 
diff --git a/client/src/views/home.html b/client/src/views/home.html
index fa2099e..7f8d5ab 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/logo_cropped.gif"/>
+        <img alt="Werewolf App Logo" src="../images/new-logo.png"/>
         <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">