diff --git a/dist/images/logo-white.jpeg b/dist/images/logo-white.jpeg
new file mode 100644
index 0000000..1b089ea
Binary files /dev/null and b/dist/images/logo-white.jpeg differ
diff --git a/dist/images/logo-white.png b/dist/images/logo-white.png
new file mode 100644
index 0000000..ca3efb2
Binary files /dev/null and b/dist/images/logo-white.png differ
diff --git a/dist/index.html b/dist/index.html
index 422149d..e82edce 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -18,7 +18,7 @@
   <header class="top-bar">
     <div class="top-bar-inner">
       <div class="top-bar-left">
-        <img src="/images/whs-logo.svg" alt="Wesley High School" class="top-bar-logo" />
+        <img src="/images/logo-white.png" alt="Wesley High School" class="top-bar-logo" />
       </div>
       <div class="top-bar-right">
         <div class="social-icons">
@@ -273,7 +273,7 @@
   <footer class="site-footer">
     <div class="footer-inner">
       <div class="footer-left">
-        <img src="/images/whs-logo.svg" alt="Wesley High School" class="footer-logo" />
+        <img src="/images/logo-white.png" alt="Wesley High School" class="footer-logo" />
       </div>
       <div class="footer-center">
         <h3>Sign up for updates from Wesley High School</h3>
diff --git a/index.html b/index.html
index 3e3b9b0..0a246df 100644
--- a/index.html
+++ b/index.html
@@ -16,7 +16,7 @@
   <header class="top-bar">
     <div class="top-bar-inner">
       <div class="top-bar-left">
-        <img src="/images/whs-logo.svg" alt="Wesley High School" class="top-bar-logo" />
+        <img src="/images/logo-white.png" alt="Wesley High School" class="top-bar-logo" />
       </div>
       <div class="top-bar-right">
         <div class="social-icons">
@@ -263,7 +263,7 @@
   <footer class="site-footer">
     <div class="footer-inner">
       <div class="footer-left">
-        <img src="/images/whs-logo.svg" alt="Wesley High School" class="footer-logo" />
+        <img src="/images/logo-white.png" alt="Wesley High School" class="footer-logo" />
       </div>
       <div class="footer-center">
         <h3>Sign up for updates from Wesley High School</h3>
diff --git a/public/images/logo-black.jpeg b/public/images/logo-black.jpeg
new file mode 100644
index 0000000..7e60d9c
Binary files /dev/null and b/public/images/logo-black.jpeg differ
diff --git a/public/images/logo-blue.jpeg b/public/images/logo-blue.jpeg
new file mode 100644
index 0000000..cc5ffac
Binary files /dev/null and b/public/images/logo-blue.jpeg differ
diff --git a/public/images/logo-blue.png b/public/images/logo-blue.png
new file mode 100644
index 0000000..fa76fea
Binary files /dev/null and b/public/images/logo-blue.png differ
diff --git a/public/images/logo-orange.jpeg b/public/images/logo-orange.jpeg
new file mode 100644
index 0000000..984dafe
Binary files /dev/null and b/public/images/logo-orange.jpeg differ
diff --git a/public/images/logo-white.jpeg b/public/images/logo-white.jpeg
new file mode 100644
index 0000000..1b089ea
Binary files /dev/null and b/public/images/logo-white.jpeg differ
diff --git a/public/images/logo-white.png b/public/images/logo-white.png
new file mode 100644
index 0000000..ca3efb2
Binary files /dev/null and b/public/images/logo-white.png differ
diff --git a/src/style.css b/src/style.css
index da15120..3dfc9df 100644
--- a/src/style.css
+++ b/src/style.css
@@ -123,7 +123,7 @@ img {
 .top-bar {
   background: var(--primary);
   color: var(--white);
-  padding: 0 20px;
+  padding: 10px 20px;
   position: sticky;
   top: 0;
   z-index: 100;
@@ -140,7 +140,7 @@ img {
 }
 
 .top-bar-logo {
-  height: 56px;
+  height: 80px;
   width: auto;
 }
 
@@ -1012,7 +1012,7 @@ img {
 }
 
 .footer-logo {
-  height: 80px;
+  height: 120px;
   width: auto;
 }
 
@@ -1243,7 +1243,7 @@ img {
   }
 
   .top-bar-logo {
-    height: 40px;
+    height: 56px;
   }
 
   .filmstrip-frame {