diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 00000000..7bf8f078
Binary files /dev/null and b/.DS_Store differ
diff --git a/docs/assets/img/screen02.png b/docs/assets/img/screen02.png
new file mode 100644
index 00000000..727b7472
Binary files /dev/null and b/docs/assets/img/screen02.png differ
diff --git a/docs/assets/img/screen04.jpeg b/docs/assets/img/screen04.jpeg
new file mode 100644
index 00000000..c0851d77
Binary files /dev/null and b/docs/assets/img/screen04.jpeg differ
diff --git a/docs/assets/img/screen05.jpeg b/docs/assets/img/screen05.jpeg
new file mode 100644
index 00000000..0cec8214
Binary files /dev/null and b/docs/assets/img/screen05.jpeg differ
diff --git a/docs/assets/js/Lightbox-Gallery.js b/docs/assets/js/Lightbox-Gallery.js
new file mode 100644
index 00000000..cce539fa
--- /dev/null
+++ b/docs/assets/js/Lightbox-Gallery.js
@@ -0,0 +1,3 @@
+if (document.querySelectorAll('[data-bss-baguettebox]').length > 0) {
+   baguetteBox.run('[data-bss-baguettebox]', { animation: 'slideIn' });
+}
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index 5842b171..8c18e45d 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -29,6 +29,7 @@
     <link rel="stylesheet" href="assets/css/Header-Blue.css">
     <link rel="stylesheet" href="assets/css/Highlight-Blue.css">
     <link rel="stylesheet" href="assets/css/Highlight-Clean.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.11.1/baguetteBox.min.css">
     <link rel="stylesheet" href="assets/css/Navigation-Clean.css">
     <link rel="stylesheet" href="assets/css/styles.css">
 </head>
@@ -58,7 +59,7 @@
                 <p class="text-center" style="font-size: 20px;color: rgb(218,218,218);">RetroDeck is an easy and fancy environment for managing and launching your retro games on Steam Deck without relying on custom firmware. </p>
             </div><!-- End: Intro -->
             <!-- Start: Buttons -->
-            <div class="buttons" style="margin-bottom: 0px;"><a class="btn btn-secondary" role="button" target="_blank" style="color: white;background: linear-gradient(-95deg, #1a9fff, #946beb);border-top-left-radius: 5px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;" href="https://github.com/XargonWan/RetroDECK/releases"><i class="fas fa-download"></i>&nbsp;Get retrodeck</a></div><!-- End: Buttons -->
+            <div class="buttons" style="margin-bottom: 0px;"><a class="btn btn-secondary" role="button" target="_blank" style="color: black;background: white;border-top-left-radius: 5px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;" href="https://github.com/XargonWan/RetroDECK/releases"><i class="fas fa-download"></i>&nbsp;Get retrodeck</a></div><!-- End: Buttons -->
         </div>
     </section><!-- End: Highlight Clean -->
     <!-- Start: Highlight Clean -->
@@ -115,6 +116,21 @@
             </div><!-- End: Features -->
         </div>
     </section><!-- End: Features Clean -->
+    <!-- Start: Lightbox Gallery -->
+    <section class="photo-gallery py-4 py-xl-5">
+        <div class="container">
+            <div class="row mb-5">
+                <div class="col-md-8 col-xl-6 text-center mx-auto">
+                    <h2 style="background: linear-gradient(-95deg, #1a9fff, #946beb);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">screenshots</h2>
+                </div>
+            </div><!-- Start: Photos -->
+            <div class="row gx-2 gy-2 row-cols-1 row-cols-md-2 row-cols-xl-3 photos" data-bss-baguettebox="">
+                <div class="col item"><a><img class="img-fluid" src="assets/img/screen02.png"></a></div>
+                <div class="col item"><a><img class="img-fluid" src="assets/img/screen04.jpeg"></a></div>
+                <div class="col item"><a><img class="img-fluid" src="assets/img/screen05.jpeg"></a></div>
+            </div><!-- End: Photos -->
+        </div>
+    </section><!-- End: Lightbox Gallery -->
     <!-- Start: Footer Basic -->
     <footer class="footer-basic">
         <!-- Start: Social Icons -->
@@ -123,6 +139,8 @@
         <p class="copyright">Made with&nbsp;<i class="fa fa-heart"></i>&nbsp;by gabeee_boii#5232</p><!-- End: Copyright -->
     </footer><!-- End: Footer Basic -->
     <script src="assets/bootstrap/js/bootstrap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.11.1/baguetteBox.min.js"></script>
+    <script src="assets/js/Lightbox-Gallery.js"></script>
     <script src="assets/js/scroll.js"></script>
 </body>