diff --git a/app/coworking/page.tsx b/app/coworking/page.tsx
index 153a899..926006b 100644
--- a/app/coworking/page.tsx
+++ b/app/coworking/page.tsx
@@ -1,8 +1,10 @@
 import Itinerary from "components/Itinerary/Itinerary";
+import OfficeLightbox from "components/officeLightbox/OfficeLightbox";
+
 
 export default function Coworking () {
     return (
-        <Itinerary/>
+        <OfficeLightbox />
 
     )
 }
\ No newline at end of file
diff --git a/components/officeLightbox/OfficeLightbox.tsx b/components/officeLightbox/OfficeLightbox.tsx
new file mode 100644
index 0000000..3e45c04
--- /dev/null
+++ b/components/officeLightbox/OfficeLightbox.tsx
@@ -0,0 +1,58 @@
+'use client'
+import Image from 'next/image';
+import React, { useState } from 'react';
+
+const OfficeLightbox: React.FC = () => {
+  const [selectedImage, setSelectedImage] = useState<string | null>(null);
+
+  const images = [
+    '/office1.jpeg',
+    '/office5.jpeg',
+    '/office3.jpeg',
+    '/office2.jpeg',
+    '/office6.jpeg',
+    '/office8.jpeg'
+  ];
+  const openLightbox = (image: string) => {
+    setSelectedImage(image);
+  };
+  const closeLightbox = () => {
+    setSelectedImage(null);
+  };
+
+  return (
+    <div className='mx-auto p-16 relative sm:p-4'>
+      <div className="flex flex-wrap justify-center items-center gap-5">
+        {images.map((image, index) => (
+          <Image
+            key={index}
+            src={image}
+            alt={`Image ${index}`}
+            onClick={() => openLightbox(image)}
+            className="cursor-pointer"
+            width={600}
+            height={275}
+          />
+        ))}
+      </div>
+
+      {/* Render the lightbox when an image is selected */}
+      {selectedImage && (
+        <div
+          className="fixed top-0 left-0 w-full h-full flex items-center justify-center bg-black/80"
+          onClick={closeLightbox}
+        >
+          <div className="max-w-2xl max-h-2xl">
+            <Image
+            src={selectedImage} 
+            alt="Selected Image" 
+            fill={true}
+            className="object-contain p-2"/>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default OfficeLightbox;
diff --git a/public/office1.jpeg b/public/office1.jpeg
new file mode 100644
index 0000000..0435555
Binary files /dev/null and b/public/office1.jpeg differ
diff --git a/public/office2.jpeg b/public/office2.jpeg
new file mode 100644
index 0000000..7106ad4
Binary files /dev/null and b/public/office2.jpeg differ
diff --git a/public/office3.jpeg b/public/office3.jpeg
new file mode 100644
index 0000000..5ade26a
Binary files /dev/null and b/public/office3.jpeg differ
diff --git a/public/office4.jpeg b/public/office4.jpeg
new file mode 100644
index 0000000..3b819f6
Binary files /dev/null and b/public/office4.jpeg differ
diff --git a/public/office5.jpeg b/public/office5.jpeg
new file mode 100644
index 0000000..906374b
Binary files /dev/null and b/public/office5.jpeg differ
diff --git a/public/office6.jpeg b/public/office6.jpeg
new file mode 100644
index 0000000..b489307
Binary files /dev/null and b/public/office6.jpeg differ
diff --git a/public/office7.jpeg b/public/office7.jpeg
new file mode 100644
index 0000000..d402f98
Binary files /dev/null and b/public/office7.jpeg differ
diff --git a/public/office8.jpeg b/public/office8.jpeg
new file mode 100644
index 0000000..8226ef5
Binary files /dev/null and b/public/office8.jpeg differ