diff --git a/public/assets/home/hero.png b/public/assets/home/hero.png
new file mode 100644
index 000000000..1dd130732
Binary files /dev/null and b/public/assets/home/hero.png differ
diff --git a/public/assets/navbar/onepiece.png b/public/assets/navbar/onepiece.png
new file mode 100644
index 000000000..dd6e7f255
Binary files /dev/null and b/public/assets/navbar/onepiece.png differ
diff --git a/src/Components/Navbar/Desktop.jsx b/src/Components/Navbar/Desktop.jsx
index bfd6ceb46..45c7b3aae 100644
--- a/src/Components/Navbar/Desktop.jsx
+++ b/src/Components/Navbar/Desktop.jsx
@@ -37,7 +37,7 @@ export const Resources = ({ notificationOpen }) => {
         rel="noopener noreferrer"
         className="py-7 px-3 inline-block"
       >
-        <button className="bg-orange-400 text-white  px-6 py-2 rounded-md">
+        <button className="bg-mublue text-white  px-6 py-2 rounded-md">
           Join µLearn
         </button>
       </a>
@@ -47,7 +47,7 @@ export const Resources = ({ notificationOpen }) => {
         rel="noopener noreferrer"
         className="py-7 px-3 inline-block"
       >
-        <button className="border-2 border-orange-400 text-orange-400 px-6 py-2 rounded-md">
+        <button className="border-2 border-mublue text-mublue px-6 py-2 rounded-md">
           Magazine
         </button>
       </a>
diff --git a/src/Components/Navbar/Navbar.css b/src/Components/Navbar/Navbar.css
index 979489ff7..23ce424b3 100644
--- a/src/Components/Navbar/Navbar.css
+++ b/src/Components/Navbar/Navbar.css
@@ -1,10 +1,12 @@
-.dashes{
+.dashes {
   border-bottom: 3px solid rgba(0, 0, 0, 0);
-  
+
 }
-.dashes:hover{
+
+.dashes:hover {
   border-bottom: 3px solid black;
 }
+
 .special {
   font-family: Montserrat, Arial;
   line-height: 1.3em;
@@ -52,28 +54,31 @@
   background-color: white;
   justify-content: space-between;
 }
+
 @media screen and (max-width: 1024px) {
   .mobile-nav-bar {
     z-index: 100;
   }
 }
-  
+
 @media screen and (max-width: 1200px) {
-  .change-text{
+  .change-text {
     font-size: 14px;
   }
 }
+
 @media screen and (max-width: 1100px) {
-  .change-text{
+  .change-text {
     font-size: 12px;
   }
 }
 
-.setIndex{
+.setIndex {
   z-index: 90;
 
 }
-.searchBar{
+
+.searchBar {
   border-radius: 10px;
   background-color: rgba(0, 0, 0, 0.056);
   margin: 25px;
diff --git a/src/Components/Navbar/Navbar.jsx b/src/Components/Navbar/Navbar.jsx
index 222d5afc8..8c395d823 100644
--- a/src/Components/Navbar/Navbar.jsx
+++ b/src/Components/Navbar/Navbar.jsx
@@ -20,29 +20,28 @@ const Navbar = () => {
         <div className="flex items-center font-medium justify-around">
           <div className={`mobile-nav-bar lg:w-auto w-full ${open ? "absolute top-1" : ""}`}>
             <Logo />
-            <MobileTopBar 
-              setNotificationOpen={setNotificationOpen} 
-              notificationOpen={notificationOpen} 
-              handleScrolling={handleScrolling} 
-              setOpen={setOpen} 
-              open={open} 
+            <MobileTopBar
+              setNotificationOpen={setNotificationOpen}
+              notificationOpen={notificationOpen}
+              handleScrolling={handleScrolling}
+              setOpen={setOpen}
+              open={open}
             />
           </div>
-          <DesktopMenu 
-            notificationOpen={notificationOpen} 
-            open={open} 
+          <DesktopMenu
+            notificationOpen={notificationOpen}
+            open={open}
           />
           <Resources notificationOpen={notificationOpen} />
-          <MobileMenu 
-            setNotificationOpen={setNotificationOpen} 
-            setOpen={setOpen} 
-            handleScrolling={handleScrolling} 
-            open={open} 
+          <MobileMenu
+            setNotificationOpen={setNotificationOpen}
+            setOpen={setOpen}
+            handleScrolling={handleScrolling}
+            open={open}
             notificationOpen={notificationOpen}
           />
         </div>
       </nav>
-
     </>
   );
 };
@@ -51,9 +50,9 @@ const Logo = () => {
   return (
     <Link to="/">
       <img
-        src="/assets/navbar/µLearn.webp"
+        src="/assets/navbar/onepiece.png"
         alt="logo"
-        className="lg:cursor-pointer h-8 z-0"
+        className="lg:cursor-pointer h-16 z-0 mt-[-.5rem]"
       />
     </Link>
   )
diff --git a/src/Pages/Home/Home.jsx b/src/Pages/Home/Home.jsx
index 537242aad..3ef5f9ed3 100644
--- a/src/Pages/Home/Home.jsx
+++ b/src/Pages/Home/Home.jsx
@@ -35,18 +35,18 @@ const Home = () => {
               >
                 <button className={styles.primary}>Join Us</button>
               </a>
-              {/* <a
+              <a
                 target="_blank"
                 rel="noopener noreferrer"
-                href="https://mulearn.org/journey"
+                href="https://themaze.mulearn.org"
               >
-                <button className={styles.secondary}>Your Journey</button>
-              </a> */}
+                <button className={styles.secondary}>Join The Maze</button>
+              </a>
             </div>
           </div>
           <img
             className={styles.fv_image}
-            src="/assets/home/illustration.webp"
+            src="/assets/home/hero.png"
             alt="illustration"
           />
         </div>
diff --git a/src/Pages/Home/Home.module.css b/src/Pages/Home/Home.module.css
index f065170c1..4c9c21812 100644
--- a/src/Pages/Home/Home.module.css
+++ b/src/Pages/Home/Home.module.css
@@ -20,11 +20,9 @@ a {
   padding-top: 3rem;
   background-color: #f2f3f9;
   opacity: 1;
-  background-image: repeating-radial-gradient(
-      circle at 0 0,
+  background-image: repeating-radial-gradient(circle at 0 0,
       transparent 0,
-      #f2f3f9 15px
-    ),
+      #f2f3f9 15px),
     repeating-linear-gradient(#fdf1e755, #fdf1e7);
 }
 
@@ -55,7 +53,8 @@ a {
 
 .fv_heading span {
   font-weight: 600;
-  color: #f78c40;
+  /* color: #f78c40; */
+  color: #5C9AE5;
 }
 
 .fv_tagline {
@@ -63,7 +62,7 @@ a {
   font-family: "Poppins", sans-serif;
 }
 
-.buttons{
+.buttons {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
@@ -74,7 +73,8 @@ a {
 
 .primary,
 .secondary {
-  background-color: #f78c40;
+  /* background-color: #f78c40; */
+  background-color: #5C9AE5;
   padding: 0.7rem 2.75rem;
   border: none;
   margin-top: 1rem;
@@ -86,9 +86,11 @@ a {
 
 .secondary {
   background-color: #ffffff;
-  color: #f78c40;
-  padding: 0.6rem 2.75rem;
-  border: 2px solid #f59d5e;
+  /* color: #f78c40; */
+  color: #5C9AE5;
+  padding: 0.6rem 2rem;
+  /* border: 2px solid #f59d5e; */
+  border: 2px solid #5C9AE5;
 }
 
 @media only screen and (min-width: 1000px) {
@@ -754,9 +756,10 @@ a {
   .karma_img {
     max-width: 25rem;
   }
+
   .karma_img {
     display: block;
     margin: auto;
     margin-top: 2rem;
   }
-}
+}
\ No newline at end of file
diff --git a/src/Pages/Pathway/components/contact/Contact.jsx b/src/Pages/Pathway/components/contact/Contact.jsx
index 8b8bfdc7d..c0d9ee04a 100644
--- a/src/Pages/Pathway/components/contact/Contact.jsx
+++ b/src/Pages/Pathway/components/contact/Contact.jsx
@@ -19,7 +19,7 @@ export default function Contact() {
     <>
       <div className={styles.ContactUs}>
         <div className={styles.Contact}>
-          <img src={img4} />
+          <img src={img4} alt="logo" />
         </div>
         <div className={styles.ContactList}>
           {links.map((link) => {
diff --git a/src/Pages/Top100Coders/assets/favicon.png b/src/Pages/Top100Coders/assets/favicon.png
deleted file mode 100644
index 6e7c5b027..000000000
Binary files a/src/Pages/Top100Coders/assets/favicon.png and /dev/null differ
diff --git a/tailwind.config.js b/tailwind.config.js
index 4c263fafa..569a9f841 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -8,10 +8,12 @@ module.exports = {
     theme: {
       colors: {
         orange: "#f78c40",
+        blue: "#5C9AE5"
       },
     },
     colors: {
       'muorange': "#f78c40",
+      'mublue': "#5C9AE5"
     },
     extend: {
       fontFamily: {