diff --git a/app/assets/resonate_app.png b/app/assets/resonate_app.png
deleted file mode 100644
index 53876b0..0000000
Binary files a/app/assets/resonate_app.png and /dev/null differ
diff --git a/app/assets/resonate_app.webp b/app/assets/resonate_app.webp
new file mode 100644
index 0000000..d014a7b
Binary files /dev/null and b/app/assets/resonate_app.webp differ
diff --git a/app/components/About/About.jsx b/app/components/About/About.jsx
index 32bac07..b7286c6 100644
--- a/app/components/About/About.jsx
+++ b/app/components/About/About.jsx
@@ -1,4 +1,5 @@
 import React from "react";
+import Image from "next/image";
 import "./About.css";
 import AossieLogo from "../../assets/aossie_logo.png";
 import { SiGitlab } from "react-icons/si";
@@ -10,7 +11,7 @@ const About = () => {
     <section className="about">
       <div className="about-container">
         <div className="about-logo">
-          <img src={AossieLogo.src} alt="AOSSIE Logo" draggable={false} />
+          <Image src={AossieLogo} alt="AOSSIE Logo" draggable={false} />
         </div>
         <div className="about-content">
           <h2>
diff --git a/app/components/DownloadApp/DownloadApp.jsx b/app/components/DownloadApp/DownloadApp.jsx
index b183fef..f2759be 100644
--- a/app/components/DownloadApp/DownloadApp.jsx
+++ b/app/components/DownloadApp/DownloadApp.jsx
@@ -1,9 +1,10 @@
 import React from 'react';
+import Image from 'next/image';
 import './DownloadApp.css';
 import StoreButton from './StoreButton';
 
 const DownloadApp = () => {
-  const playStoreUrl ='https://play.google.com/store/apps/details?id=com.resonate.resonate';
+  const playStoreUrl = 'https://play.google.com/store/apps/details?id=com.resonate.resonate';
 
   return (
     <section className="download-app-section">
@@ -18,10 +19,12 @@ const DownloadApp = () => {
 
             <div className="qr-code-wrapper">
               <div className="qr-glow-container">
-                <img
+                <Image
                   src="/qr_code.png"
                   alt="Scan to download"
                   className="qr-code-img"
+                  width={200}
+                  height={200}
                 />
               </div>
               <p className="qr-label">Scan to Download</p>
diff --git a/app/components/Features/Features.jsx b/app/components/Features/Features.jsx
index 3ad5bd0..403e8ba 100644
--- a/app/components/Features/Features.jsx
+++ b/app/components/Features/Features.jsx
@@ -1,4 +1,5 @@
 import React from "react";
+import Image from "next/image";
 import "./Features.css";
 import featureImage1 from "../../assets/roomscreen.png";
 import featureImage2 from "../../assets/createrooms.png";
@@ -40,17 +41,16 @@ const Features = () => {
       {featuresData.map((feature) => (
         <div
           key={feature.id}
-          className={`feature-item ${
-            feature.align === "right" ? "reverse" : ""
-          }`}
+          className={`feature-item ${feature.align === "right" ? "reverse" : ""
+            }`}
         >
           <div className="feature-image">
-            <img
-              src={feature.image.src}
+            <Image
+              src={feature.image}
               alt={`Feature ${feature.id}`}
-              width={400}
-              height={300}
+              sizes="(max-width: 768px) 80vw, 40vw"
               draggable={false}
+              style={{ width: "100%", height: "auto" }}
             />
           </div>
           <div className="feature-content">
diff --git a/app/components/Hero/Hero.jsx b/app/components/Hero/Hero.jsx
index 5aaa1c7..29996d7 100644
--- a/app/components/Hero/Hero.jsx
+++ b/app/components/Hero/Hero.jsx
@@ -1,7 +1,7 @@
 import React from "react";
 import "./Hero.css";
 import { FaGithub, FaArrowRight } from "react-icons/fa";
-import phoneImage from "../../assets/resonate_app.png";
+import phoneImage from "../../assets/resonate_app.webp";
 import Image from "next/image";
 
 const Hero = () => {
diff --git a/app/components/Layout/NavBar/Navbar.css b/app/components/Layout/NavBar/Navbar.css
index 46274a3..13147df 100644
--- a/app/components/Layout/NavBar/Navbar.css
+++ b/app/components/Layout/NavBar/Navbar.css
@@ -30,7 +30,6 @@
 }
 
 .logo-icon {
-  height: 24px;
   margin-right: 10px;
 }
 
@@ -146,11 +145,13 @@
     opacity: 0;
     transform: translateY(-10px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
   }
 }
+
 .hamburger:focus,
 .nav-link:focus,
 .download-btn:focus {
diff --git a/app/components/Layout/NavBar/index.jsx b/app/components/Layout/NavBar/index.jsx
index eaa1864..07bf1ef 100644
--- a/app/components/Layout/NavBar/index.jsx
+++ b/app/components/Layout/NavBar/index.jsx
@@ -1,8 +1,8 @@
 "use client";
 import React, { useState, useCallback } from "react";
+import Image from "next/image";
 import "./Navbar.css";
 import { FaGithub, FaExternalLinkAlt } from "react-icons/fa";
-const Logo = { src: "/resonate_logo_white.png" };
 
 const Navbar = () => {
   const [open, setOpen] = useState(false);
@@ -28,7 +28,7 @@ const Navbar = () => {
           onClick={scrollToTop}
           style={{ cursor: "pointer" }}
         >
-          <img src={Logo.src} alt="Resonate Logo" className="logo-icon" />
+          <Image src="/resonate_logo_white.png" alt="Resonate Logo" className="logo-icon" width={14} height={24}/>
           <span className="logo-text">Resonate</span>
         </div>
 
diff --git a/app/components/TechStack/TechStack.jsx b/app/components/TechStack/TechStack.jsx
index a2ddbaa..f8c3305 100644
--- a/app/components/TechStack/TechStack.jsx
+++ b/app/components/TechStack/TechStack.jsx
@@ -1,4 +1,5 @@
 import React from "react";
+import Image from "next/image";
 import "./TechStack.css";
 import flutterLogo from "../../assets/Flutter.png";
 import appwriteLogo from "../../assets/Appwrite.png";
@@ -10,10 +11,10 @@ const TechStack = () => {
         <h2>TECH STACK</h2>
         <div className="tech-logos">
           <div className="tech-logo">
-            <img src={flutterLogo.src} alt="Flutter"  draggable={false} />
+            <Image src={flutterLogo} alt="Flutter" draggable={false} />
           </div>
           <div className="tech-logo">
-            <img src={appwriteLogo.src} alt="Appwrite"  draggable={false} />
+            <Image src={appwriteLogo} alt="Appwrite" draggable={false} />
           </div>
         </div>
       </div>