diff --git a/src/components/desktopHeader.jsx b/src/components/desktopHeader.jsx
index 4f64b28..6ec9b22 100644
--- a/src/components/desktopHeader.jsx
+++ b/src/components/desktopHeader.jsx
@@ -1,10 +1,6 @@
-import Link from "next/link";
+import { DesktopNavbar } from "./desktopNavbar";
+import { Links } from "./links";
 
 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>
+  <DesktopNavbar links={Links}/>
 </div>
\ No newline at end of file
diff --git a/src/components/desktopNavbar.jsx b/src/components/desktopNavbar.jsx
new file mode 100644
index 0000000..f0d2f16
--- /dev/null
+++ b/src/components/desktopNavbar.jsx
@@ -0,0 +1,8 @@
+import Link from "next/link";
+
+export const DesktopNavbar = ({ links }) => (
+  <nav className="w-full flex justify-center items-center gap-4 bg-[#C5C6C7] h-20">
+    {links.map((link, index) => 
+        ( <Link key={index} href={link.route} className="text-2xl text-[#1F2833]">{link.name}</Link> ))}
+    </nav>
+);
\ No newline at end of file
diff --git a/src/components/links.js b/src/components/links.js
new file mode 100644
index 0000000..76e8073
--- /dev/null
+++ b/src/components/links.js
@@ -0,0 +1,4 @@
+export const Links = [
+    { route: "/", name: "Home" },
+    { route: "/movies", name: "Movies" },
+];
\ No newline at end of file
diff --git a/src/components/mobileHeader/links.jsx b/src/components/mobileHeader/links.jsx
deleted file mode 100644
index 32b3699..0000000
--- a/src/components/mobileHeader/links.jsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import Link from "next/link";
-export const Links = () => <div className="flex items-center flex-col gap-5">
-    <Link href="/" className="w-1/2 bg-slate-900 text-center h-12 flex items-center justify-center" onClick={() => setIsOpen(false)}>Home</Link>
-    <Link href="/movies" className="w-1/2 bg-slate-900 text-center  h-12 flex items-center justify-center" onClick={() => setIsOpen(false)}>Movies</Link>
-</div>
\ No newline at end of file
diff --git a/src/components/mobileHeader/navbar.jsx b/src/components/mobileHeader/navbar.jsx
new file mode 100644
index 0000000..0ce03c6
--- /dev/null
+++ b/src/components/mobileHeader/navbar.jsx
@@ -0,0 +1,8 @@
+import Link from "next/link";
+
+export const Navbar = ({ links }) => (
+    <nav className="flex items-center flex-col gap-5">
+        {links.map((link, index) => 
+            ( <Link key={index} href={link.route} className="w-1/2 bg-slate-900 text-center h-12 flex items-center justify-center" onClick={() => setIsOpen(false)}>{link.name}</Link> ))}
+    </nav>
+);
\ No newline at end of file
diff --git a/src/components/mobileHeader/overlay.jsx b/src/components/mobileHeader/overlay.jsx
index ec33571..c2f85cc 100644
--- a/src/components/mobileHeader/overlay.jsx
+++ b/src/components/mobileHeader/overlay.jsx
@@ -1,8 +1,11 @@
-import { BurgerSvg, XIconSvg } from "./xIconSvg";
+import { XIconSvg } from "./xIconSvg";
+import { Navbar } from "./navbar";
+import { Links } from "../links";
 
 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 />
+        <XIconSvg/>
     </button>
+    <Navbar links = { Links }/>
 </div>
\ No newline at end of file