diff --git a/src/components/footer.tsx b/src/components/footer.tsx
index 706a125..5adce95 100644
--- a/src/components/footer.tsx
+++ b/src/components/footer.tsx
@@ -1,5 +1,12 @@
-import { FaPhoneAlt } from 'react-icons/fa';
 import { FaMapLocationDot } from 'react-icons/fa6';
+import {
+  FaPhoneAlt,
+  FaFacebook,
+  FaInstagram,
+  FaYoutube,
+  FaLinkedin,
+} from 'react-icons/fa';
+import Image from 'next/image';
 
 export function Footer() {
   return (
@@ -8,10 +15,12 @@ export function Footer() {
         {/* First Column: Logo and Description */}
         <div className='space-y-4'>
           <div className='flex items-center'>
-            <img
+            <Image
               src='/images/logo.png' // Update with your logo path
               alt='Mozimo Logo'
               className='h-10'
+              width={100}
+              height={100}
             />
           </div>
           <p className='text-sm'>
@@ -103,22 +112,22 @@ export function Footer() {
               href='https://facebook.com'
               className='text-brown-600 hover:text-brown-800'
             >
-              <img src='/icons/facebook.svg' />
+              <FaFacebook />
             </a>
             <a
               href='https://instagram.com'
               className='text-brown-600 hover:text-brown-800'
             >
-              <img src='/icons/instagram.svg' />
+              <FaInstagram />
             </a>
             <a
               href='https://youtube.com'
               className='text-brown-600 hover:text-brown-800'
             >
-              <img src='/icons/youtube.svg' />
+              <FaYoutube />
             </a>
             <a href='https://linkedin.com' className=''>
-              <img src='/icons/linkedin.svg' />
+              <FaLinkedin />
             </a>
           </div>
         </div>
diff --git a/src/components/navbar-old.tsx b/src/components/navbar-old.tsx
deleted file mode 100644
index ac60c82..0000000
--- a/src/components/navbar-old.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-// components/Navbar.tsx
-export function Navbar() {
-  return (
-    <nav className='navbar'>
-      <div className='left'>
-        <a href='#about-us'>About Us</a>
-        <a href='#shop'>Shop</a>
-      </div>
-      <div className='center'>
-        <a href='/' className='mx-0'>
-          <img src='/images/logo.png' alt='Logo' className='logo' />
-        </a>
-      </div>
-      <div className='right'>
-        <a href='#search'>
-          <span className='material-symbols-outlined'>search</span>
-        </a>
-        <a href='#shopping'>
-          <span className='material-symbols-outlined'>shopping_bag</span>
-        </a>
-        <a href='#profile'>
-          <span className='material-symbols-outlined'>person</span>
-        </a>
-      </div>
-    </nav>
-  );
-}
diff --git a/src/components/navbar.module-old.css b/src/components/navbar.module-old.css
index 636f62d..9a21e2d 100644
--- a/src/components/navbar.module-old.css
+++ b/src/components/navbar.module-old.css
@@ -1,4 +1,4 @@
-/* .navbar {
+.navbar {
     position: fixed;
     top: 1.5em;
     left: 2em;
@@ -78,4 +78,4 @@
   .fa-user {
     font-size: 1.4em;
   }
-   */
\ No newline at end of file
+  
\ No newline at end of file
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index 9154536..880dcec 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -4,6 +4,7 @@ import Link from 'next/link';
 import { FiSearch, FiUser } from 'react-icons/fi';
 import { HiShoppingBag } from 'react-icons/hi2';
 import styles from './navbar.module.css';
+import Image from 'next/image';
 
 // components/Navbar.tsx
 export function Navbar() {
@@ -46,7 +47,13 @@ export function Navbar() {
       {/* Middle */}
       <div className='flex-shrink-0'>
         <Link href='/' className='text-lg font-bold'>
-          <img src='/images/logo.png' alt='Logo' className='logo' />
+          <Image
+            src='/images/logo.png'
+            alt='Logo'
+            className='logo'
+            width={100}
+            height={100}
+          />
         </Link>
       </div>
       {/* Right side */}
diff --git a/src/components/swiper.tsx b/src/components/swiper.tsx
index ebf5e00..22f97ec 100644
--- a/src/components/swiper.tsx
+++ b/src/components/swiper.tsx
@@ -1,6 +1,7 @@
 'use client';
 // import Swiper core and required modules
 import { Autoplay, Pagination, Scrollbar } from 'swiper/modules';
+import Image from 'next/image';
 
 import { Swiper, SwiperSlide } from 'swiper/react';
 
@@ -10,6 +11,13 @@ import 'swiper/css/navigation';
 import 'swiper/css/pagination';
 import 'swiper/css/scrollbar';
 
+const slides = [
+  { name: 'Bars', image: '/images/slider/slider-01.jpg' },
+  { name: 'Barks', image: '/images/slider/slider-02.jpg' },
+  { name: 'Pralines', image: '/images/slider/slider-03.jpg' },
+  { name: 'Spreads', image: '/images/slider/slider-04.jpg' },
+];
+
 export function HeroSwiper() {
   return (
     <Swiper
@@ -24,18 +32,17 @@ export function HeroSwiper() {
       onSwiper={(swiper) => console.log(swiper)}
       onSlideChange={() => console.log('slide change')}
     >
-      <SwiperSlide>
-        <img src='/images/slider/slider-01.jpg' className='w-full' />
-      </SwiperSlide>
-      <SwiperSlide>
-        <img src='/images/slider/slider-02.jpg' className='w-full' />
-      </SwiperSlide>
-      <SwiperSlide>
-        <img src='/images/slider/slider-03.jpg' className='w-full' />
-      </SwiperSlide>
-      <SwiperSlide>
-        <img src='/images/slider/slider-04.jpg' className='w-full' />
-      </SwiperSlide>
+      {slides.map((slide) => (
+        <SwiperSlide key={slide.name}>
+          <Image
+            src={slide.image}
+            alt={slide.name}
+            width={1760}
+            height={1000}
+            className='w-full'
+          />
+        </SwiperSlide>
+      ))}
     </Swiper>
   );
 }