diff --git a/public/assets/home/hero.png b/public/assets/home/hero.png
deleted file mode 100644
index 1dd130732..000000000
Binary files a/public/assets/home/hero.png and /dev/null differ
diff --git a/public/assets/home/hero.webp b/public/assets/home/hero.webp
new file mode 100644
index 000000000..57837a8c0
Binary files /dev/null and b/public/assets/home/hero.webp differ
diff --git a/public/assets/navbar/onepiece.png b/public/assets/navbar/onepiece.png
deleted file mode 100644
index dd6e7f255..000000000
Binary files a/public/assets/navbar/onepiece.png and /dev/null differ
diff --git a/public/assets/navbar/onepiece.webp b/public/assets/navbar/onepiece.webp
new file mode 100644
index 000000000..19b1cb27f
Binary files /dev/null and b/public/assets/navbar/onepiece.webp differ
diff --git a/src/Components/Navbar/Desktop.jsx b/src/Components/Navbar/Desktop.jsx
index 45c7b3aae..3106b9c74 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-mublue text-white  px-6 py-2 rounded-md">
+        <button className="bg-muorange 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-mublue text-mublue px-6 py-2 rounded-md">
+        <button className="border-2 border-muorange text-muorange px-6 py-2 rounded-md">
           Magazine
         </button>
       </a>
diff --git a/src/Components/Navbar/Navbar.jsx b/src/Components/Navbar/Navbar.jsx
index 8c395d823..45bcb0145 100644
--- a/src/Components/Navbar/Navbar.jsx
+++ b/src/Components/Navbar/Navbar.jsx
@@ -50,9 +50,9 @@ const Logo = () => {
   return (
     <Link to="/">
       <img
-        src="/assets/navbar/onepiece.png"
+        src="/assets/navbar/µLearn.webp"
         alt="logo"
-        className="lg:cursor-pointer h-16 z-0 mt-[-.5rem]"
+        className="lg:cursor-pointer h-8 z-0 mt-[-.5rem]"
       />
     </Link>
   )
diff --git a/src/Pages/Home/Home.jsx b/src/Pages/Home/Home.jsx
index 3ef5f9ed3..a1f20a5ec 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://themaze.mulearn.org"
               >
                 <button className={styles.secondary}>Join The Maze</button>
-              </a>
+              </a> */}
             </div>
           </div>
           <img
             className={styles.fv_image}
-            src="/assets/home/hero.png"
+            src="/assets/home/illustration.webp"
             alt="illustration"
           />
         </div>
diff --git a/src/Pages/Home/Home.module.css b/src/Pages/Home/Home.module.css
index 4c9c21812..dea5faad1 100644
--- a/src/Pages/Home/Home.module.css
+++ b/src/Pages/Home/Home.module.css
@@ -53,8 +53,8 @@ a {
 
 .fv_heading span {
   font-weight: 600;
-  /* color: #f78c40; */
-  color: #5C9AE5;
+  color: #f78c40;
+  /* color: #5C9AE5; */
 }
 
 .fv_tagline {
@@ -73,8 +73,8 @@ a {
 
 .primary,
 .secondary {
-  /* background-color: #f78c40; */
-  background-color: #5C9AE5;
+  background-color: #f78c40;
+  /* background-color: #5C9AE5; */
   padding: 0.7rem 2.75rem;
   border: none;
   margin-top: 1rem;
@@ -86,11 +86,11 @@ a {
 
 .secondary {
   background-color: #ffffff;
-  /* color: #f78c40; */
-  color: #5C9AE5;
+  color: #f78c40;
+  /* color: #5C9AE5; */
   padding: 0.6rem 2rem;
-  /* border: 2px solid #f59d5e; */
-  border: 2px solid #5C9AE5;
+  border: 2px solid #f59d5e;
+  /* border: 2px solid #5C9AE5; */
 }
 
 @media only screen and (min-width: 1000px) {