diff --git a/output/construction.html b/output/construction.html
index 73f7d29..8c731ca 100644
--- a/output/construction.html
+++ b/output/construction.html
@@ -33,7 +33,7 @@
 
     <!-- Slides used for slideshow -->
     <div id="slide-container">
-        <div id="close-modal" onclick="closeModal()">X</div>
+        <div id="close-modal" onclick="closeModal()"><a href="#">X</a></div>
         <div id="slides" class="modal">
                 <img class="slide" id="img-1" alt="" src="/images/Construction/Construction-1.jpg">
                 <img class="slide" id="img-2" alt="" src="/images/Construction/Construction-2.jpg">
diff --git a/output/courtyard.html b/output/courtyard.html
index 6335da5..395e967 100644
--- a/output/courtyard.html
+++ b/output/courtyard.html
@@ -47,7 +47,7 @@ He can hear neighbors laughing out loud, as they always had in peaceful sunny sp
 
     <!-- Slides used for slideshow -->
     <div id="slide-container">
-        <div id="close-modal" onclick="closeModal()">X</div>
+        <div id="close-modal" onclick="closeModal()"><a href="#">X</a></div>
         <div id="slides" class="modal">
                 <img class="slide" id="img-1" alt="" src="/images/Courtyard/Courtyard-1.jpg">
                 <img class="slide" id="img-2" alt="" src="/images/Courtyard/Courtyard-2.jpg">
diff --git a/output/sunday.html b/output/sunday.html
index da41b6b..f3d8908 100644
--- a/output/sunday.html
+++ b/output/sunday.html
@@ -33,7 +33,7 @@
 
     <!-- Slides used for slideshow -->
     <div id="slide-container">
-        <div id="close-modal" onclick="closeModal()">X</div>
+        <div id="close-modal" onclick="closeModal()"><a href="#">X</a></div>
         <div id="slides" class="modal">
                 <img class="slide" id="img-1" alt="" src="/images/Sunday/Sunday-1.jpg">
                 <img class="slide" id="img-2" alt="" src="/images/Sunday/Sunday-2.jpg">
diff --git a/output/theme/css/main-v2.css b/output/theme/css/main-v2.css
index 3c2f7c5..04b0f04 100755
--- a/output/theme/css/main-v2.css
+++ b/output/theme/css/main-v2.css
@@ -207,7 +207,7 @@ p a {
 #slide-container {
     display: none;
     width: 100%;
-    height: 300%;
+    min-height: 100%;
     position: absolute;
     left: 0;
     top: 0;
@@ -215,6 +215,7 @@ p a {
     background-color: #000000;
     text-align: center;
     padding-top: 100px;
+    padding-bottom: 200px;
 }
 
 .slide {
@@ -226,7 +227,7 @@ p a {
     max-width: 80%;
     max-height: 80%;
     width: auto;
-    height: auto; 
+    height: auto;
     background-color: black;
 }
 
@@ -234,12 +235,15 @@ p a {
     position: fixed;
     font-family: Arial, Helvetica, sans-serif;
     font-weight: bold;
-    color: white;
     width: 20px;
     height:20px; 
     margin-left: 95%;
 }
 
+#close-modal a{
+    color: white; 
+}
+
 #close-modal:hover {
     font-size: larger;
 }
\ No newline at end of file
diff --git a/output/theme/js/slideshow.js b/output/theme/js/slideshow.js
index 359484f..a0ec4e3 100644
--- a/output/theme/js/slideshow.js
+++ b/output/theme/js/slideshow.js
@@ -16,13 +16,19 @@ function closeModal() {
         elems[i].style.display = "none"
     }
     document.getElementsByTagName("header")[0].style.opacity = 1
+    document.getElementById("about").style.opacity = 1
+    document.getElementById("download").style.opacity = 1
 }
 
 function showSlide(id){
+    closeModal()
     isOpen = true
     document.getElementById('slide-container').style.display = "block"
     document.getElementById(id).style.display = "block"
+    // change persistent elements' opacity
     document.getElementsByTagName("header")[0].style.opacity = 0.2
+    document.getElementById("about").style.opacity = 0.2
+    document.getElementById("download").style.opacity = 0.2
     goToTop()
 }
 
diff --git a/themes/felicie/static/css/main-v2.css b/themes/felicie/static/css/main-v2.css
index 3c2f7c5..04b0f04 100755
--- a/themes/felicie/static/css/main-v2.css
+++ b/themes/felicie/static/css/main-v2.css
@@ -207,7 +207,7 @@ p a {
 #slide-container {
     display: none;
     width: 100%;
-    height: 300%;
+    min-height: 100%;
     position: absolute;
     left: 0;
     top: 0;
@@ -215,6 +215,7 @@ p a {
     background-color: #000000;
     text-align: center;
     padding-top: 100px;
+    padding-bottom: 200px;
 }
 
 .slide {
@@ -226,7 +227,7 @@ p a {
     max-width: 80%;
     max-height: 80%;
     width: auto;
-    height: auto; 
+    height: auto;
     background-color: black;
 }
 
@@ -234,12 +235,15 @@ p a {
     position: fixed;
     font-family: Arial, Helvetica, sans-serif;
     font-weight: bold;
-    color: white;
     width: 20px;
     height:20px; 
     margin-left: 95%;
 }
 
+#close-modal a{
+    color: white; 
+}
+
 #close-modal:hover {
     font-size: larger;
 }
\ No newline at end of file
diff --git a/themes/felicie/static/js/slideshow.js b/themes/felicie/static/js/slideshow.js
index 359484f..a0ec4e3 100644
--- a/themes/felicie/static/js/slideshow.js
+++ b/themes/felicie/static/js/slideshow.js
@@ -16,13 +16,19 @@ function closeModal() {
         elems[i].style.display = "none"
     }
     document.getElementsByTagName("header")[0].style.opacity = 1
+    document.getElementById("about").style.opacity = 1
+    document.getElementById("download").style.opacity = 1
 }
 
 function showSlide(id){
+    closeModal()
     isOpen = true
     document.getElementById('slide-container').style.display = "block"
     document.getElementById(id).style.display = "block"
+    // change persistent elements' opacity
     document.getElementsByTagName("header")[0].style.opacity = 0.2
+    document.getElementById("about").style.opacity = 0.2
+    document.getElementById("download").style.opacity = 0.2
     goToTop()
 }
 
diff --git a/themes/felicie/templates/article.html b/themes/felicie/templates/article.html
index 5d76b0b..93da6e7 100755
--- a/themes/felicie/templates/article.html
+++ b/themes/felicie/templates/article.html
@@ -30,7 +30,7 @@
 
     <!-- Slides used for slideshow -->
     <div id="slide-container">
-        <div id="close-modal" onclick="closeModal()">X</div>
+        <div id="close-modal" onclick="closeModal()"><a href="#">X</a></div>
         <div id="slides" class="modal">
             {% for i in [1, 2, 3, 4, 5] %}
                 <img class="slide" id="img-{{ i }}" alt="" src="{{ SITE_URL }}/images/{{article.title}}/{{ article.title }}-{{ i }}.jpg">