diff --git a/about/index.html b/about/index.html
index 2783e4f..0765646 100644
--- a/about/index.html
+++ b/about/index.html
@@ -28,14 +28,28 @@
 <link rel="preload" href="assets/sslogo.png" as="image">
 <link rel="preload" href="assets/steamhover.png" as="image">
 <link rel="preload" href="assets/oculushover.png" as="image">
-<!--
+
 <script type="text/javascript">
-  // preload
-  (() => ['grid.jpg', 'sslogo.png', 'steamhover.png', 'oculushover.png'].forEach((i) => new Image().src = 'assets/'+i))() 
-</script> -->
+var lb;
+function setupLb(){
+  lb = document.getElementById('lightbox');
+  var sshots = document.querySelectorAll('.screenshots>img');
+  for (var i = 0; i < sshots.length; i++){
+    sshots[i].addEventListener('click', showImg);
+  }
+}
+function showImg(ev){
+  lb.querySelector('img').src = ev.target.src;
+  lb.classList.add('opened');
+}
+function closeLb(){
+  lb.classList.remove('opened')
+}
+</script>
 </head>
-<body>
+<body onload="setupLb()">
 <div class="laser"></div>
+<div id="lightbox" onclick="closeLb()"><img src=""></div>
 <div id="all">
   <img src="assets/supermedium-logo.png" class="imgfill headerglow">  
   <img src="assets/sslogo.png" class="imgfill">  
@@ -58,9 +72,9 @@
       <img src="assets/sslogosmall.png">is a lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc efficitur et libero id interdum. Aenean id mauris cursus, fermentum lorem nec, congue nisi. Suspendisse semper vitae nisi a interdum. In finibus magna mi. Pellentesque sit amet diam dolor. Sed in venenatis magna. 
     </p>
     <div class="screenshots">
-      <a href="javascript:;"><img src="assets/sshot1.jpg"></a>
-      <a href="javascript:;"><img src="assets/sshot2.jpg"></a>
-      <a href="javascript:;"><img src="assets/sshot3.jpg"></a>
+      <img src="assets/sshot1.jpg">
+      <img src="assets/sshot2.jpg">
+      <img src="assets/sshot3.jpg">
     </div>
   </section>
 
@@ -81,9 +95,9 @@
       </div>
     </div>
     <div class="screenshots">
-      <a href="javascript:;"><img src="assets/sshot4.jpg"></a>
-      <a href="javascript:;"><img src="assets/sshot5.jpg"></a>
-      <a href="javascript:;"><img src="assets/sshot6.jpg"></a>
+      <img src="assets/sshot4.jpg">
+      <img src="assets/sshot5.jpg">
+      <img src="assets/sshot6.jpg">
     </div>
   </section>
 
diff --git a/about/style.css b/about/style.css
index dd0f437..b6ad8d5 100644
--- a/about/style.css
+++ b/about/style.css
@@ -18,7 +18,31 @@ body{
   background-size: contain;
   z-index: -1;
 }
-
+#lightbox{
+  cursor: pointer;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.8);
+  z-index: 999999;
+  opacity: 0;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  transition: opacity 3s;
+}
+#lightbox.opened{
+  display: flex;
+  opacity: 1;
+}
+#lightbox img{
+  width: 100%;
+  max-width: 1000px;
+  border: 1px solid #005a83;
+  box-shadow: 0 0 25px rgba(144, 226, 222, 0.6);
+}
 #all{
   width: 95%;
   min-width: 360px;
@@ -191,6 +215,9 @@ footer{
   width: 100%;
   transition: box-shadow 120ms, border-color 120ms, transform 120ms;
 }
+.screenshots>img{
+  width: 30%;
+}
 .screenshots img:hover{
   box-shadow: 0 0 30px rgba(144, 226, 222, 0.8);
   border-color: white;
@@ -245,7 +272,7 @@ h1 span{
   h3{
     margin-bottom: 3%;
   }
-  .screenshots a{
+  .screenshots>img, .screenshots>a{
     display: block;
     width: 100%;
     margin: 5% 0;
