diff --git a/Website/assets/fluidicon.png b/Website/assets/fluidicon.png
new file mode 100644
index 000000000..468574c26
Binary files /dev/null and b/Website/assets/fluidicon.png differ
diff --git a/Website/assets/images.png b/Website/assets/images.png
new file mode 100644
index 000000000..9490ffc6d
Binary files /dev/null and b/Website/assets/images.png differ
diff --git a/Website/assets/recode-hive.png b/Website/assets/recode-hive.png
new file mode 100644
index 000000000..60a91d412
Binary files /dev/null and b/Website/assets/recode-hive.png differ
diff --git a/Website/index.html b/Website/index.html
index ff8867768..125e2291f 100644
--- a/Website/index.html
+++ b/Website/index.html
@@ -15,9 +15,9 @@
     </div>
     <header>
         <nav class="navbar">
-            <div class="logo-container">
-                <img src="logo-bg.png" alt="RecodeHive Logo" width="50" height="50"> <!-- Added logo to navbar -->
-                <span class="brand-name">RecodeHive</span>
+            <div class="logo-container" onclick="window.location.href=`index.html`">
+                <img src="assets/recode-hive.png" alt="Recode Hive Icon" class="logo-icon">
+                <span class="logo-text">Recode Hive</span>
             </div>
             <ul class="nav-links">
                 <li><a href="/">Home</a></li>
@@ -27,7 +27,7 @@
                 <li><a href="/contact">Contact</a></li>
                 <li>
                     <a href="https://github.com/recodehive/machine-learning-repos" target="_blank">
-                        <img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="GitHub" width="25" height="25"> <!-- GitHub Icon -->
+                        <img src="assets/images.png" alt="GitHub"> <!-- GitHub Icon -->
                     </a>
                 </li>
                 <li>
diff --git a/Website/logo.png b/Website/logo.png
deleted file mode 100644
index 668a6472b..000000000
Binary files a/Website/logo.png and /dev/null differ
diff --git a/Website/styles.css b/Website/styles.css
index 12b35db2b..845a7ce9e 100644
--- a/Website/styles.css
+++ b/Website/styles.css
@@ -25,12 +25,27 @@ header {
     align-items: center;
 }
 
-.logo-container {
+  .logo-container{
     display: flex;
+    cursor: pointer;
     align-items: center;
-    margin-right: 20px;
-    /* Adds space between logo and links */
-}
+  }
+
+  .logo-container img{
+    filter: brightness(1) invert(1);
+  }
+  
+  .logo-icon {
+    width: 30px;
+    height: 30px;
+    margin-right: 10px;
+  }
+  
+  .logo-text {
+    font-size: 18px;
+    font-weight: bold;
+    color: #f1f1f1;
+  }
 
 .brand-name {
     font-size: 1.5em;
@@ -60,6 +75,14 @@ header {
     /* Prevents wrapping of links */
 }
 
+.nav-links a img{
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    filter: brightness(0) invert(1);
+    margin-top: -5px;
+}
+
 .nav-links a:hover {
     text-decoration: underline;
 }