diff --git a/public/flitnext-logo.png b/public/flitnext-logo.png
new file mode 100644
index 0000000..9239382
Binary files /dev/null and b/public/flitnext-logo.png differ
diff --git a/src/components/desktopHeader.jsx b/src/components/desktopHeader.jsx
index 4f64b28..98cbdb6 100644
--- a/src/components/desktopHeader.jsx
+++ b/src/components/desktopHeader.jsx
@@ -1,10 +1,29 @@
-import Link from "next/link";
+import Link from 'next/link';
+import Image from 'next/image';
 
-export const DesktopHeader = () => <div className="hidden lg:block ">
-<nav
- className="w-full flex justify-center items-center gap-4 bg-[#C5C6C7] h-20"
- >
-    <Link href="/" className="text-2xl text-[#1F2833]">Home</Link>
-    <Link href="/movies" className="text-2xl text-[#1F2833]">Movies</Link>
-</nav>
-</div>
\ No newline at end of file
+export const DesktopHeader = () => (
+  <div className="hidden lg:block">
+    <nav className="w-full flex items-center bg-[#C5C6C7] h-20 px-10">
+      <div className="flex items-center justify-start">
+        <Image
+          src="/flitnext-logo.png"
+          alt="FlitNext Logo"
+          width={150}
+          height={150}
+        />
+      </div>
+      <div className="flex-grow flex items-center justify-center gap-5">
+        <Link href="/" className="text-2xl text-[#1F2833]">
+          Home
+        </Link>
+        <Link href="/movies" className="text-2xl text-[#1F2833]">
+          Movies
+        </Link>
+      </div>
+      <div
+        className="flex items-center justify-end"
+        style={{ width: 150 }}
+      ></div>
+    </nav>
+  </div>
+);
diff --git a/src/components/mobileHeader/header.jsx b/src/components/mobileHeader/header.jsx
index 735a89f..b39d02c 100644
--- a/src/components/mobileHeader/header.jsx
+++ b/src/components/mobileHeader/header.jsx
@@ -1,14 +1,29 @@
-'use client'
+'use client';
 
-import { useState } from "react"
-import { Overlay } from "./overlay";
-import { BurgerSvg } from "./burgerSvg";
+import { useState } from 'react';
+import { Overlay } from './overlay';
+import { BurgerSvg } from './burgerSvg';
+import Image from 'next/image';
 
 export const MobileHeader = () => {
-    const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
-    return <div className="block lg:hidden p-5">
-        <button onClick={() => setIsOpen(true)}><BurgerSvg /></button>
-        <Overlay setIsOpen={setIsOpen} isOpen={isOpen}/>
-    </div>
-}
\ No newline at end of file
+  return (
+    <>
+      <div className="lg:hidden p-5 flex justify-between items-center">
+        <button onClick={() => setIsOpen(true)}>
+          <BurgerSvg />
+        </button>
+        <div className="mt-3">
+          <Image
+            src="/flitnext-logo.png"
+            alt="FlitNext Logo"
+            width={120}
+            height={120}
+          />
+        </div>
+        <Overlay setIsOpen={setIsOpen} isOpen={isOpen} />
+      </div>
+    </>
+  );
+};
diff --git a/src/components/mobileHeader/overlay.jsx b/src/components/mobileHeader/overlay.jsx
index ec33571..12907f9 100644
--- a/src/components/mobileHeader/overlay.jsx
+++ b/src/components/mobileHeader/overlay.jsx
@@ -1,8 +1,16 @@
-import { BurgerSvg, XIconSvg } from "./xIconSvg";
+import { BurgerSvg, XIconSvg } from './xIconSvg';
 
-export const Overlay = ({ setIsOpen, isOpen }) => 
-<div className={`absolute left-0 top-0 h-full bg-[#C5C6C7] w-full ${isOpen ? "block" : "hidden"} z-10`}>
-    <button onClick={() => setIsOpen(false)}>
-        <XIconSvg />
+export const Overlay = ({ setIsOpen, isOpen }) => (
+  <div
+    className={`absolute left-0 top-0 h-full bg-[#C5C6C7] w-full z-10 transition-opacity duration-300 ${
+      isOpen ? 'opacity-100 visible' : 'opacity-0 invisible'
+    }`}
+  >
+    <button
+      onClick={() => setIsOpen(false)}
+      className="absolute top-0 left-0 mt-3"
+    >
+      <XIconSvg />
     </button>
-</div>
\ No newline at end of file
+  </div>
+);