diff --git a/public/images/footer-logo.png b/public/images/footer-logo.png
new file mode 100644
index 0000000..2dbaf06
Binary files /dev/null and b/public/images/footer-logo.png differ
diff --git a/public/images/logo.png b/public/images/logo.png
new file mode 100644
index 0000000..e24441f
Binary files /dev/null and b/public/images/logo.png differ
diff --git a/src/components/Footer.js b/src/components/Footer.js
index 629873b..d50ed6a 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -1,3 +1,4 @@
+import Image from 'next/image';
 import Link from 'next/link';
 import styles from './Footer.module.css';
 
@@ -9,8 +10,14 @@ export default function Footer() {
           {/* Column 1: Brand & Socials */}
           <div className={styles.brand}>
             <Link href="/" className={styles.logo}>
-              <span className={styles.logoLeaf}>🌿</span>
-              <span className={styles.logoText}>My Dosa Place</span>
+              <Image
+                src="/images/footer-logo.png"
+                alt="My Dosa Place logo"
+                width={40}
+                height={40}
+                className={styles.logoLeaf}
+              />
+              {/* <span className={styles.logoText}>My Dosa Place</span> */}
             </Link>
             <p className={styles.brandDesc}>
               Bringing the authentic taste of South India to Waterloo since 1980. 
diff --git a/src/components/Footer.module.css b/src/components/Footer.module.css
index 12f0532..44cbb8f 100644
--- a/src/components/Footer.module.css
+++ b/src/components/Footer.module.css
@@ -31,7 +31,17 @@
 }
 
 .logoLeaf {
-  font-size: 1.5rem;
+  display: inline-flex;
+  width: 250px;
+  height: 45px;
+  line-height: 0;
+}
+
+.logoLeaf img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
 }
 
 .logoText {
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index 50aad81..ea6cfab 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -2,6 +2,7 @@
 
 import { useState } from 'react';
 import Link from 'next/link';
+import Image from 'next/image';
 import styles from './Navbar.module.css';
 
 export default function Navbar() {
@@ -12,8 +13,14 @@ export default function Navbar() {
       <div className={styles.navInner}>
         {/* Logo */}
         <Link href="/" className={styles.logo}>
-          <span className={styles.logoLeaf}>🌿</span>
-          <span className={styles.logoText}>My Dosa Place</span>
+          <Image
+            src="/images/logo.png"
+            alt="My Dosa Place logo"
+            width={40}
+            height={40}
+            className={styles.logoLeaf}
+          />
+          {/* <span className={styles.logoText}>My Dosa Place</span> */}
         </Link>
 
         {/* Navigation Links */}
diff --git a/src/components/Navbar.module.css b/src/components/Navbar.module.css
index 75cab11..3885945 100644
--- a/src/components/Navbar.module.css
+++ b/src/components/Navbar.module.css
@@ -30,7 +30,17 @@
 }
 
 .logoLeaf {
-  font-size: 1.4rem;
+  display: inline-flex;
+  width: 250px;
+  height: 45px;
+  line-height: 0;
+}
+
+.logoLeaf img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
 }
 
 .logoText {