diff --git a/public/images/playbook/tolocar_map.jpg b/public/images/playbook/tolocar_map.jpg
new file mode 100644
index 00000000..817b4ed3
Binary files /dev/null and b/public/images/playbook/tolocar_map.jpg differ
diff --git a/src/components/Lightbox.astro b/src/components/Lightbox.astro
new file mode 100644
index 00000000..3530e04d
--- /dev/null
+++ b/src/components/Lightbox.astro
@@ -0,0 +1,24 @@
+---
+const { image, alt, path } = Astro.props;
+---
+
+<div class="">
+  <a href={path + "#lightbox"} id={"nolightbox"} class="scroll-mt-20">
+    <img
+      src={image}
+      class="aspect-square rounded-lg object-cover object-center"
+      {alt}
+    />
+  </a>
+  <a
+    href={path + "#nolightbox"}
+    class="hidden fixed z-50 inset-0 p-4 sm:p-24 bg-black/50 target:block items-center"
+    id={"lightbox"}
+  >
+    <img
+      src={image}
+      class="w-full h-full object-center object-contain"
+      {alt}
+    />
+  </a>
+</div>
diff --git a/src/pages/en/playbook.mdx b/src/pages/en/playbook.mdx
index 06ce285d..31f4ca10 100644
--- a/src/pages/en/playbook.mdx
+++ b/src/pages/en/playbook.mdx
@@ -14,7 +14,7 @@ import {
   InfoItem,
 } from "@components";
 import LinkNewTab from "@components/LinkNewTab.astro"
-
+import Lightbox from "@components/Lightbox.astro"
 
 <WideCard
   bg={3}
@@ -71,9 +71,9 @@ import LinkNewTab from "@components/LinkNewTab.astro"
 </div>
 
 <div class="bg-tolo-green w-full text-white">
-  <div class="container-width grid grid-cols-1 md:grid-cols-12 gap-x-16 gap-y-2 md:gap-y-24 py-8 md:py-24">
+  <div class="container-width grid grid-cols-1 md:grid-cols-12 gap-x-16 gap-y-4 md:gap-y-24 py-8 md:py-24">
     <div class="col-span-1 md:col-span-5 flex items-center justify-center">
-      <img src="images/award/submit-ideas.svg" className="col-span-12 w-full" />
+      <Lightbox image="images/playbook/tolocar_map.jpg" path="/en/playbook/" alt="Playbook Map" />
     </div>
     <div class="col-span-1 md:col-span-7 font-semibold font-aktiv text-2xl">
       <p class="mb-8">With a fleet of mobile makerspaces at its core, Tolocar
diff --git a/src/pages/ua/playbook.mdx b/src/pages/ua/playbook.mdx
index ac339adc..48d5a65d 100644
--- a/src/pages/ua/playbook.mdx
+++ b/src/pages/ua/playbook.mdx
@@ -14,6 +14,7 @@ import {
   InfoItem,
 } from "@components";
 import LinkNewTab from "@components/LinkNewTab.astro"
+import Lightbox from "@components/Lightbox.astro"
 
 
 <WideCard
@@ -70,9 +71,9 @@ import LinkNewTab from "@components/LinkNewTab.astro"
 </div>
 
 <div class="bg-tolo-green w-full text-white">
-  <div class="container-width grid grid-cols-1 md:grid-cols-12 gap-x-16 gap-y-2 md:gap-y-24 py-8 md:py-24">
+  <div class="container-width grid grid-cols-1 md:grid-cols-12 gap-x-16 gap-y-4 md:gap-y-24 py-8 md:py-24">
     <div class="col-span-1 md:col-span-5 flex items-center justify-center">
-      <img src="images/award/submit-ideas.svg" className="col-span-12 w-full" />
+      <Lightbox image="images/playbook/tolocar_map.jpg" path="/ua/playbook/" alt="Playbook Map" />
     </div>
     <div class="col-span-1 md:col-span-7 font-semibold font-aktiv text-2xl">
       <p class="mb-8">Проєкт «Tolocar» розгортається навколо парку мобільних майстерень — мейкерспейсів — та об’єднує фахівців у сфері мейкінгу, розподіленого виробництва та планування міського розвитку із організаціями грома-дянського суспільства України для:</p>