diff --git a/hswaw/site/static/BUILD.bazel b/hswaw/site/static/BUILD.bazel
index 4da9c9e..8d3bcdc 100644
--- a/hswaw/site/static/BUILD.bazel
+++ b/hswaw/site/static/BUILD.bazel
@@ -1,20 +1,14 @@
-load("@io_bazel_rules_go//go:def.bzl", "go_library")
 load("@io_bazel_rules_go//extras:embed_data.bzl", "go_embed_data")
+load("@io_bazel_rules_go//go:def.bzl", "go_library")
 
 go_embed_data(
     name = "static",
-    srcs = [
-        "animations.js",
-        "fonts.css",
-        "frezarka.jpg",
-        "kuka.jpg",
-        "landing.css",
-        "led.js",
-        "neon-syrenka.svg",
-        "serwerownia.jpg",
-        "space.jpg",
-        "statut_warszawski_hackerspace-v1.3.pdf",
-        "tokarka.jpg",
+    srcs = glob(
+        [
+            "*",
+        ],
+        ["BUILD.bazel"],
+    ) + [
         "@com_gstatic_fonts_comfortaa_400//file:font.ttf",
         "@com_gstatic_fonts_inconsolata_400//file:font.ttf",
         "@com_gstatic_fonts_inconsolata_700//file:font.ttf",
diff --git a/hswaw/site/static/landing.css b/hswaw/site/static/landing.css
index cf13754..21cedb4 100644
--- a/hswaw/site/static/landing.css
+++ b/hswaw/site/static/landing.css
@@ -242,7 +242,7 @@
   object-fit: contain;
 }
 
-#gallery-nav {
+.gallery-nav {
   display: flex;
   flex-direction: row;
   padding: 0;
@@ -250,17 +250,17 @@
   justify-content: center;
   flex-wrap: wrap;
 }
-#gallery-nav > li {
+.gallery-nav > li {
   margin: 0;
   padding: 0;
 }
-#gallery-nav > li:hover {
+.gallery-nav > li:hover {
   background-color: var(--darkbgaccent);
 }
-#gallery-nav > li.active {
+.gallery-nav > li.active {
   background-color: var(--secondary);
 }
-#gallery-nav > li > a {
+.gallery-nav > li > a {
   display: block;
   text-decoration: none;
   padding: 0 15px;
@@ -276,6 +276,7 @@
 
 @media screen and (max-width: 1000px) {
   .bottom {
+    gap: 1em;
     padding: 2em 1em 0 1em;
   }
 }
@@ -290,7 +291,7 @@
   }
 }
 
-.bottom .about li + li {
+.bottom .about li + li:not('.gallery-nav') {
   margin-top: 0.5em;
 }
 
@@ -394,3 +395,12 @@
 .atlist li:last-child:after {
   content: ".";
 }
+
+
+@media (prefers-reduced-motion) {
+  ::view-transition-group(*),
+  ::view-transition-old(*),
+  ::view-transition-new(*) {
+    animation: none !important;
+  }
+}
diff --git a/hswaw/site/static/pit1.jpg b/hswaw/site/static/pit1.jpg
new file mode 100644
index 0000000..f877724
--- /dev/null
+++ b/hswaw/site/static/pit1.jpg
Binary files differ
diff --git a/hswaw/site/static/pit2.jpg b/hswaw/site/static/pit2.jpg
new file mode 100644
index 0000000..609c4eb
--- /dev/null
+++ b/hswaw/site/static/pit2.jpg
Binary files differ
diff --git a/hswaw/site/templates/index.html b/hswaw/site/templates/index.html
index 57b3df3..dbfcae2 100644
--- a/hswaw/site/templates/index.html
+++ b/hswaw/site/templates/index.html
@@ -38,6 +38,15 @@
         </ul>
     </nav>
     <div class="bottom">
+        <section class="gallery-wrapper" id="pit">
+            <div class="img-wrapper">
+                <img src="/static/site/pit1.jpg" />
+            </div>
+            <ul class="gallery-nav">
+                <li data-name="pit1" class="active"><a href="#">PIT</a></li>
+                <li data-name="pit2"><a href="#">Instrukcja</a></li>
+            </ul>
+        </section>
         <div class="about">
             <h2>Czym jest Warszawski Hackerspace?</h2>
             <p>
@@ -52,11 +61,11 @@
             <p>
               <b>Hackerspace nie zna barier.</b> Jeśli masz ciekawy pomysł i szukasz ludzi chętnych do współpracy, lub po prostu potrzebujesz miejsca i sprzętu - <a href="https://wiki.hackerspace.pl/jak-dolaczyc">zapraszamy</a>! Utrzymujemy się w całosci z wolontariatu naszych członków, <a href="https://wiki.hackerspace.pl/finanse">darowizn i składek</a> oraz drobnej aktywności komercyjnej.
             </p>
-            <section id="gallery">
+            <section class="gallery-wrapper">
                 <div class="img-wrapper">
                     <img src="/static/site/space.jpg" />
                 </div>
-                <ul id="gallery-nav">
+                <ul class="gallery-nav">
                     <li data-name="space" class="active"><a href="#">Spejs</a></li>
                     <li data-name="frezarka"><a href="#">Frezarka</a></li>
                     <li data-name="tokarka"><a href="#">Tokarka</a></li>
@@ -110,15 +119,28 @@
 
     L.marker([52.24158, 20.9848]).addTo(map);
 }
-document.querySelectorAll('#gallery-nav > li > a').forEach(link => {
-    link.onclick = e => {
-        e.preventDefault()
-        document.querySelector(`#gallery-nav > li.active`).classList.remove('active')
-        const li = e.currentTarget.parentNode
-        li.classList.add('active')
-        const name = li.dataset.name
-        document.querySelector('#gallery img').src = `/static/site/${name}.jpg`
-    }
+
+document.querySelectorAll('.gallery-wrapper').forEach(galleryWrapper => {
+    const img = galleryWrapper.querySelector('.img-wrapper img')
+    const links = galleryWrapper.querySelectorAll('.gallery-nav > li > a')
+    links.forEach(link => {
+        link.onclick = e => {
+            e.preventDefault()
+            links.forEach(x => x.parentNode.classList.remove('active'))
+            const li = e.currentTarget.parentNode
+            li.classList.add('active')
+            const name = li.dataset.name
+            if ('startViewTransition' in document) {
+                document.startViewTransition(() => {
+                    img.src = `/static/site/${ name }.jpg`
+
+                })
+            } else {
+                img.src = `/static/site/${ name }.jpg`
+            }
+        }
+
+    })
 })
 </script>
 <script src="/static/leaflet/leaflet.js" crossorigin="" onload="loadMap()"></script>