diff --git a/src/assets/props/logo_deadlock_black.png b/src/assets/props/logo_deadlock_black.png
new file mode 100644
index 0000000000000000000000000000000000000000..90a51f8a46ca481bfadc7685cf4212663d6c7ec0
Binary files /dev/null and b/src/assets/props/logo_deadlock_black.png differ
diff --git a/src/assets/props/logo_deadlock_black_s.png b/src/assets/props/logo_deadlock_black_s.png
new file mode 100644
index 0000000000000000000000000000000000000000..f1751e91167b9951d365e9322aa3b76a63c49a95
Binary files /dev/null and b/src/assets/props/logo_deadlock_black_s.png differ
diff --git a/src/js/components/TopLinks/TopLInks.js b/src/js/components/TopLinks/TopLInks.js
index 062c2d3ca479e5051f05a890ad51d3946ed70fd9..2e82188082ab788c302cd2fab7a8740c0a06ec2c 100644
--- a/src/js/components/TopLinks/TopLInks.js
+++ b/src/js/components/TopLinks/TopLInks.js
@@ -2,6 +2,8 @@ import styles from "./TopLinks.module.scss";
 
 import {primaryPink, white} from '../../../style/colors.module.scss';
 
+import logo from '../../../assets/props/logo_deadlock_black_s.png'
+
 const chosenSectionStyle = {
     textDecoration: "none",
     background: primaryPink,
@@ -16,7 +18,7 @@ const TopLinks = (props) => {
     return (
         <div className={styles.TopLinks}>
             <a href={"#LandingSection"} className={styles.Logo}>
-                <div className="logo">DEADLOCK</div>
+                <img src={logo} alt={"DEADLOCK"}/>
             </a>
             <div className={styles.Links}>
                 <div className={styles.Link}>
diff --git a/src/js/components/TopLinks/TopLinks.module.scss b/src/js/components/TopLinks/TopLinks.module.scss
index b84cdc251aeffd826815a5f9f8e00133e1f81ab5..c59043e5a886a6d1e8cc828ca103cb39542636b4 100644
--- a/src/js/components/TopLinks/TopLinks.module.scss
+++ b/src/js/components/TopLinks/TopLinks.module.scss
@@ -12,14 +12,12 @@
 
   .Logo {
     float: left;
-    font-size: 1vw;
-    color: $primary_black;
-    text-decoration: none;
-
-    //&:hover {
-    //  -webkit-text-stroke-width: 1px;
-    //  -webkit-text-stroke-color: $primary_black;
-    //}
+    
+    img {
+      max-width: 150px;
+      max-height: 30px;
+    }
+    
 
   }
 
@@ -53,9 +51,16 @@
 @media (max-width: 768px) {
   .TopLinks {
 
+    align-content: center;
+    align-items: center;
+    justify-content: center;
+
     .Logo {
-      font-size: 2vw;
-      float: left;
+
+      img {
+        max-width: 130px;
+        max-height: 25px;
+      }
     }
 
     .Links {