diff --git a/app/components/NavBar.tsx b/app/components/NavBar.tsx
index a4a8ee6..8aead0c 100644
--- a/app/components/NavBar.tsx
+++ b/app/components/NavBar.tsx
@@ -3,6 +3,7 @@
 import { useState, useEffect } from "react";
 import Link from "next/link";
 import { X, Menu } from "lucide-react";
+import Image from "next/image";
 
 /*
 function debounce<T extends (...args: unknown[]) => void>(
@@ -61,7 +62,19 @@ const NavBar = () => {
           className='flex justify-between items-center transition-all duration-300'
           style={{ height: `${height}px` }}>
           {/* Logo */}
-          <div className='flex-shrink-0'>
+          <div className='flex-shrink-0 flex items-center'>
+            <div
+              className='relative w-10 h-10 mr-3 transition-all duration-300'
+              style={{
+                transform: scroll ? "scale(0.8)" : "scale(1)",
+              }}>
+              <Image
+                src='img/logo-squarex80.png'
+                alt='Pools Dubai Logo'
+                layout='fill'
+                objectFit='cover'
+              />
+            </div>
             <Link
               href='/'
               className='font-bold transition-all duration-300'
diff --git a/app/layout.tsx b/app/layout.tsx
index d9652da..f76d42b 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -10,6 +10,7 @@ import {
 } from "lucide-react";
 import localFont from "next/font/local";
 import Link from "next/link";
+import Image from "next/image";
 
 const notio = localFont({
   src: [
@@ -58,6 +59,12 @@ export default function RootLayout({
                   Premium pool maintenance services in Dubai, ensuring your pool
                   stays pristine year-round.
                 </p>
+                <Image
+                  src={"img/latest/logo-squarex512.png"}
+                  width={150}
+                  height={150}
+                  alt={"pools Dubai Logo"}
+                />
               </div>
               <div>
                 <h3 className='text-xl font-bold mb-4'>Contact</h3>
diff --git a/app/page.tsx b/app/page.tsx
index df83f19..ffccbd8 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -5,6 +5,7 @@ import { CheckCircle, Star, ChevronRight } from "lucide-react";
 const images = [
   { src: "img/latest/burj-pools.jpg", alt: "Burj Pools" },
   { src: "img/latest/mozaic-tiling.jpg", alt: "Tiling Project" },
+  { src: "img/latest/logo-squarex512.png", alt: "Pools Dubai" },
   {
     src: "img/latest/pool-cleaning-service-dubai.jpg",
     alt: "Pool Cleaning Dubai",
diff --git a/public/img/latest/logo-squarex512.png b/public/img/latest/logo-squarex512.png
new file mode 100644
index 0000000..c5b64fb
Binary files /dev/null and b/public/img/latest/logo-squarex512.png differ
diff --git a/public/img/logo-square.png b/public/img/logo-square.png
new file mode 100644
index 0000000..1affe22
Binary files /dev/null and b/public/img/logo-square.png differ
diff --git a/public/img/logo-squarex80.png b/public/img/logo-squarex80.png
new file mode 100644
index 0000000..0615966
Binary files /dev/null and b/public/img/logo-squarex80.png differ