diff --git a/assets/css/src/_main.scss b/assets/css/src/_main.scss
index 9faffc9..a6d923e 100644
--- a/assets/css/src/_main.scss
+++ b/assets/css/src/_main.scss
@@ -2,7 +2,8 @@
 
 @font-face {
   font-family: "neue-haas-grotesk-display";
-  src: url("https://use.typekit.net/af/174ae3/00000000000000007735bb5a/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3")
+  src:
+    url("https://use.typekit.net/af/174ae3/00000000000000007735bb5a/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3")
       format("woff2"),
     url("https://use.typekit.net/af/174ae3/00000000000000007735bb5a/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3")
       format("woff"),
@@ -16,7 +17,8 @@
 
 @font-face {
   font-family: "neue-haas-grotesk-display";
-  src: url("https://use.typekit.net/af/db1ce7/00000000000000007735bb5e/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3")
+  src:
+    url("https://use.typekit.net/af/db1ce7/00000000000000007735bb5e/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3")
       format("woff2"),
     url("https://use.typekit.net/af/db1ce7/00000000000000007735bb5e/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3")
       format("woff"),
@@ -119,34 +121,35 @@ nav {
     a {
       text-decoration: none;
     }
-
-    button.active {
-      text-decoration: underline;
-    }
   }
 }
 
 /* PROJECT SLIDESHOW */
 
 .project-slideshow {
-  position: fixed;
-  right: 0;
-  top: 0;
-  /*! width: calc(50vw - var(--body-margin)); */
+  width: -moz-fit-content;
+  width: fit-content;
+  height: -moz-fit-content;
   height: fit-content;
-  z-index: 0;
-  overflow: hidden;
   box-sizing: border-box;
-  margin: var(--body-margin) var(--body-margin) var(--body-margin) 0;
-  left: calc(var(--index-width) + var(--body-margin));
-  text-align: right;
-
-  picture {
-    display: contents;
-  }
+  max-width: 100%;
+  right: 0;
+  position: absolute;
 }
 
-.mix-blend-bg {
+picture {
+  inset: 0;
+}
+
+picture img {
+  max-width: 100%;
+  max-height: calc(100vh - var(--body-margin) * 2);
+  vertical-align: bottom;
+  width: auto;
+  height: fit-content;
+}
+
+.project-slideshow-container {
   display: block;
   position: fixed;
   height: 100%;
@@ -155,7 +158,20 @@ nav {
   right: var(--body-margin);
   bottom: var(--body-margin);
   left: calc(var(--index-width) + var(--body-margin));
-  z-index: -1;
+}
+
+.project-slideshow-container .all-projects-closer {
+  background-color: red;
+  inset: 0;
+  display: block;
+  position: absolute;
+  width: auto;
+}
+
+.mix-blend-bg.all-projects-closer {
+  width: var(--index-width);
+  cursor: var(--close-cursor);
+  display: none;
 }
 
 button.prev {
@@ -182,13 +198,6 @@ button.next {
   padding: 0;
 }
 
-.project-slideshow img {
-  max-width: 100%;
-  max-height: calc(100vh - var(--body-margin) * 2);
-  /* text-align: inherit; */
-  vertical-align: bottom;
-}
-
 /* PROJECT TOGGLE */
 
 .fix {
@@ -285,8 +294,9 @@ button.next {
   display: grid;
   grid-template-columns:
     calc(3 / 6 * var(--index-width) - var(--body-margin))
-    calc(2 / 6 * var(--index-width) - var(--body-margin)) calc(1 / 6 *
-        var(--index-width) - var(--body-margin));
+    calc(2 / 6 * var(--index-width) - var(--body-margin)) calc(
+      1 / 6 * var(--index-width) - var(--body-margin)
+    );
   gap: var(--body-margin);
   pointer-events: all;
   padding-bottom: var(--line-height-S);
diff --git a/assets/css/style.css b/assets/css/style.css
index 0108dda..4eea204 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -118,30 +118,33 @@ nav.filter-menu {
 nav.filter-menu a {
   text-decoration: none;
 }
-nav.filter-menu button.active {
-  text-decoration: underline;
-}
 
 /* PROJECT SLIDESHOW */
 .project-slideshow {
-  position: fixed;
-  right: 0;
-  top: 0;
-  /*! width: calc(50vw - var(--body-margin)); */
+  width: -moz-fit-content;
+  width: fit-content;
   height: -moz-fit-content;
   height: fit-content;
-  z-index: 0;
-  overflow: hidden;
   box-sizing: border-box;
-  margin: var(--body-margin) var(--body-margin) var(--body-margin) 0;
-  left: calc(var(--index-width) + var(--body-margin));
-  text-align: right;
-}
-.project-slideshow picture {
-  display: contents;
+  max-width: 100%;
+  right: 0;
+  position: absolute;
 }
 
-.mix-blend-bg {
+picture {
+  inset: 0;
+}
+
+picture img {
+  max-width: 100%;
+  max-height: calc(100vh - var(--body-margin) * 2);
+  vertical-align: bottom;
+  width: auto;
+  height: -moz-fit-content;
+  height: fit-content;
+}
+
+.project-slideshow-container {
   display: block;
   position: fixed;
   height: 100%;
@@ -150,7 +153,20 @@ nav.filter-menu button.active {
   right: var(--body-margin);
   bottom: var(--body-margin);
   left: calc(var(--index-width) + var(--body-margin));
-  z-index: -1;
+}
+
+.project-slideshow-container .all-projects-closer {
+  background-color: red;
+  inset: 0;
+  display: block;
+  position: absolute;
+  width: auto;
+}
+
+.mix-blend-bg.all-projects-closer {
+  width: var(--index-width);
+  cursor: var(--close-cursor);
+  display: none;
 }
 
 button.prev {
@@ -177,13 +193,6 @@ button.next {
   padding: 0;
 }
 
-.project-slideshow img {
-  max-width: 100%;
-  max-height: calc(100vh - var(--body-margin) * 2);
-  /* text-align: inherit; */
-  vertical-align: bottom;
-}
-
 /* PROJECT TOGGLE */
 .fix {
   width: 100%;
diff --git a/assets/js/project-toggle.js b/assets/js/project-toggle.js
index 79a92b3..99fff7e 100644
--- a/assets/js/project-toggle.js
+++ b/assets/js/project-toggle.js
@@ -41,13 +41,15 @@ projectTogglers.forEach((button) => {
   });
 });
 
-const allProjectsCloser = document.querySelector(".all-projects-closer");
-
-allProjectsCloser.addEventListener("click", () => {
-  allProjects.forEach((p) => p.classList.remove("selected", "unselected"));
-  Router.setParam("project", null);
+const allProjectsCloser = document.querySelectorAll(".all-projects-closer");
+allProjectsCloser.forEach((projectCloser) => {
+  projectCloser.addEventListener("click", () => {
+    window.location = "/index";
+  });
 });
 
-window.addEventListener("routechange", () => selectProject(Router.getParam("project")));
+window.addEventListener("routechange", () =>
+  selectProject(Router.getParam("project")),
+);
 
 selectProject(Router.getParam("project"));
diff --git a/site/templates/index.php b/site/templates/index.php
index f735880..f8f5fa4 100644
--- a/site/templates/index.php
+++ b/site/templates/index.php
@@ -17,19 +17,21 @@
                 <span class="slide-number">slide number/total slides</span>
             </div>
             <section class="toggle">
-                <div class="project-slideshow">
-                    <button class="mix-blend-bg all-projects-closer"></button>
-                    <?php foreach ($project->images() as $image): ?>
-                        <?php snippet('picture', [
-                            'file'       => $image,
-                            'srcsetName' => 'project-slideshow',
-                            'sizes'      => '(min-width: 1000px) 50vw, 100vw',
-                            'lazy'       => $image->indexOf() !== 0,
-                            'class'      => $image->indexOf() === 0 ? 'active' : null,
-                        ]) ?>
-                    <?php endforeach; ?>
-                    <button class="prev"></button>
-                    <button class="next"></button>
+                <div class= "project-slideshow-container">
+                    <button class="all-projects-closer"></button>
+                    <div class="project-slideshow">
+                        <?php foreach ($project->images() as $image): ?>
+                            <?php snippet('picture', [
+                                'file'       => $image,
+                                'srcsetName' => 'project-slideshow',
+                                'sizes'      => '(min-width: 1000px) 50vw, 100vw',
+                                'lazy'       => $image->indexOf() !== 0,
+                                'class'      => $image->indexOf() === 0 ? 'active' : null,
+                            ]) ?>
+                        <?php endforeach; ?>
+                        <button class="prev"></button>
+                        <button class="next"></button>
+                    </div>
                 </div>
                 <div class="project-description"><?= $project->description() ?></div>
                 <button class="project-toggler closer"></button>