diff --git a/README.md b/README.md
index e9ef85b5..f31211de 100644
--- a/README.md
+++ b/README.md
@@ -48,7 +48,12 @@ The significant keys in the YAML frontmatter are:
 
 <div>&nbsp;</div>
 
-## Join the Layer5 community!
+### Uploading Images to the site
+To display images in a pop-up modal, use the following syntax: `![alt text](/path/to/image.svg)`. 
+
+**Note-> For images to show correctly on subpages, always provide the complete image path**
+
+<hr/>
 
 <a name="contributing"></a><a name="community"></a>
 Our projects are community-built and welcome collaboration. 👍 Be sure to see the <a href="https://docs.google.com/document/d/17OPtDE_rdnPQxmk2Kauhm3GwXF1R5dZ3Cj8qZLKdo5E/edit">Layer5 Community Welcome Guide</a> for a tour of resources available to you and jump into our <a href="http://slack.layer5.io">Slack</a>!
diff --git a/assets/scss/_elements_project.scss b/assets/scss/_elements_project.scss
index ee370129..cfb59d16 100644
--- a/assets/scss/_elements_project.scss
+++ b/assets/scss/_elements_project.scss
@@ -76,6 +76,9 @@ div.tip {
     padding-bottom: 10px;
     padding-top: 10px;
   }
+  .image-center-no-shadow{
+    width: 100%;
+  }
 
   .align-right {
     display: block;
diff --git a/assets/scss/_image-modal_project.scss b/assets/scss/_image-modal_project.scss
index 965b8033..0c8f72ff 100644
--- a/assets/scss/_image-modal_project.scss
+++ b/assets/scss/_image-modal_project.scss
@@ -7,20 +7,19 @@
 .modal {
   display: none;
   position: fixed;
-  z-index: 1;
+  z-index: 9999999;
   padding-top: 4em;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   overflow: auto;
-  background-color: black;
+  background: rgba(0,0,0,0.85);
 }
 
 /* Modal Content */
-.modal-content {
+.modal-cont {
   position: relative;
-  background-color: black;
   margin: auto;
   padding: 0;
   width: 90%;
@@ -40,16 +39,16 @@
   color: white;
   background-color: black;
   position: absolute;
-  top: .5em;
-  right: .5em;
-  font-size: 2em;
-  font-weight: bold;
+  top: 5px;
+  right: 5px;
+  font-size: 2.5em;
   height: 1em;
   width: 1em;
   text-indent: 10em;
   overflow: hidden;
   border: 0;
-}
+  z-index: 99;
+} 
 
 .modal-close::after {
   position: absolute;
diff --git a/content/en/cloud/_index.md b/content/en/cloud/_index.md
index 0474ab74..60bcd45e 100755
--- a/content/en/cloud/_index.md
+++ b/content/en/cloud/_index.md
@@ -6,7 +6,7 @@ menu: {main: {weight: 2}}
 cascade: 
     type: docs
 ---
-{{< figure src="layer5-cloud-provider.svg"  class="image-center-shadow" >}}
+![layer5-cloud-provider](layer5-cloud-provider.svg "image-center-shadow")
 {{% pageinfo %}}
 
 ## Understanding the Meshery Ecosystem
diff --git a/content/en/cloud/concepts/_index.md b/content/en/cloud/concepts/_index.md
index 75765b5f..f4ef416a 100644
--- a/content/en/cloud/concepts/_index.md
+++ b/content/en/cloud/concepts/_index.md
@@ -5,7 +5,7 @@ description: >
   An overview of Layer5 Cloud concepts and their relationships to one another.
 ---
 
-{{< figure src="concepts-overview.svg"  class="image-center-shadow" >}}
+![concepts-overview](concepts-overview.svg "image-center-shadow")
 
 <!--
 {{% pageinfo %}}
diff --git a/content/en/cloud/security/_index.md b/content/en/cloud/security/_index.md
index 45d90211..bc662c1b 100755
--- a/content/en/cloud/security/_index.md
+++ b/content/en/cloud/security/_index.md
@@ -7,8 +7,10 @@ categories: [Security]
 tags: [permissions]
 ---
 
-{{< figure src="roles-overview.svg" >}}
-{{< figure src="images/role-provider-admin.svg" link="images/role-provider-admin.svg"  width="100%"  >}}
+![roles](roles-overview.svg "image-center-no-shadow")
+
+![provider](images/role-provider-admin.svg#float-left "image-center-no-shadow")
+
 
 
 <!-- Think about your project’s features and use cases. Use these to choose your core tasks. Each granular use case (enable x, configure y) should have a corresponding tasks page or tasks page section. Users should be able to quickly refer to your core tasks when they need to find out how to do one specific thing, rather than having to look for the instructions in a bigger tutorial or example. Think of your tasks pages as a cookbook with different procedures your users can combine to create something more substantial.
diff --git a/content/en/cloud/self-hosted/_index.md b/content/en/cloud/self-hosted/_index.md
index e039a57c..cb119e2c 100644
--- a/content/en/cloud/self-hosted/_index.md
+++ b/content/en/cloud/self-hosted/_index.md
@@ -5,8 +5,7 @@ description: >
   Keep your MeshMap designs internal to your workplace. Get remote support from Layer5 when you need it.
 ---
 
-{{< figure src="images/self-hosted.svg" link="images/self-hosted.svg" class="image-right-no-shadow" >}}
-
+![self-hosted](images/self-hosted.svg "image-right-no-shadow")
 
 ## On-premises Deployment of Layer5 Cloud
 
@@ -18,13 +17,12 @@ Whitelabeling is supported by Layer5 Cloud. The following diagram illustrates th
 
 ## Considerations of Self-Hosted Deployments
 
-{{< figure src="images/self-hosted-deployment.svg" link="images/self-hosted-deployment.svg" class="image-center-no-shadow" >}}
+![self-hosted-deployment](images/self-hosted-deployment.svg "image-center-no-shadow")
 
 ## Considerations of Peer-to-Peer Communication and Central Coordination
 
 
-{{< figure src="images/meshmap-collaboration-networking.svg" link="images/meshmap-collaboration-networking.svg" class="image-center-no-shadow" >}}
-
+![meshmap-collaboration-networking](images/meshmap-collaboration-networking.svg "image-center-no-shadow")
 
 
 ## Consideration for Air-Gapped Deployments
diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
index 82358647..4e63d744 100644
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@@ -5,8 +5,8 @@
 <!-- Id for the image on the page is set to a random 6 numbers, chosen from 1 to 500 -->
 <!-- Onclick opens the modal, and displays/overlays the the image that has the id for the 
   clicked image. -->
-<!-- from: https://gist.github.com/zjeaton/0cdd7e4bed9d292ab6f3d76b0369f16d -->
+<!-- attribution appreciated. github: zjeaton web: https://froglegs.co -->
 
 <div class="md__image">
-    <img id="{{ first 6 (shuffle (seq 1 500)) }}" src="{{ .Destination | safeURL }}" onclick="openModal(this.id)" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}"{{ end }} />
+  <img id="{{ first 6 (shuffle (seq 1 500)) }}" src="{{ .Destination | safeURL }}" onclick="openModal(this.id)" alt="{{ .Text }}" {{ with .Title}} class="{{ . }}" {{ end }} />
 </div>
\ No newline at end of file
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 99c2b22e..9636bab1 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -14,6 +14,6 @@
       {{ partial "footer.html" . }}
     </div>
     {{ partialCached "scripts.html" . }}
-    {{ partialCached "image-modal.html" . }}
+    {{ partial "image-modal.html" . }}
   </body>
 </html>
\ No newline at end of file
diff --git a/layouts/docs/baseof.html b/layouts/docs/baseof.html
index 210b6af5..dbc53fa2 100644
--- a/layouts/docs/baseof.html
+++ b/layouts/docs/baseof.html
@@ -28,5 +28,6 @@
       {{ partial "footer.html" . }}
     </div>
     {{ partial "scripts.html" . }}
+    {{ partial "image-modal.html" . }}
   </body>
 </html>
\ No newline at end of file
diff --git a/layouts/partials/image-modal.html b/layouts/partials/image-modal.html
index 2e87799e..03dc1a5a 100644
--- a/layouts/partials/image-modal.html
+++ b/layouts/partials/image-modal.html
@@ -5,32 +5,32 @@
 
 <!-- The Modal -->
 <div id="myModal" class="modal">
-    <button class="modal-close" onclick="closeModal()">close</button>
-    <div class="modal-content">
-      <img class="modal-pic" id="modalPic" onclick="closeModal()" style="max-width: 100%; max-height: 80vh; margin: auto;">
-    </div>
+  <button class="modal-close" onclick="closeModal()">close</button>
+  <div class="modal-cont">
+    <img class="modal-pic" id="modalPic" onclick="closeModal()" style="max-width: 100%; max-height: 80vh; margin: auto;">
   </div>
-  
-  <script>
-  // Open the Modal
-  function openModal(clicked_id) {
-    var src = document.getElementById(clicked_id).src;
-    if (src.includes("#")) {
-      src = src.substring(0, src.indexOf( "#" ));
-    };
-    document.getElementById("modalPic").src = src;
-    document.getElementById("myModal").style.display = "block";
-    // Ensures the site footer is not shown if front of the modal. Remove if this is not an issue or
-    // there is no footer. "site-footer" id can also be changed appropriately.
-    document.getElementById("site-footer").style.display = "hidden";
-  }
-  
-  // Close the Modal
-  function closeModal() { 
-    // prevents flashing last modal image while new id is loading on open
-    document.getElementById("modalPic").src = "";
-    document.getElementById("myModal").style.display = "none";
-    // See note above regarding the footer 
-    document.getElementById("site-footer").style.display = "block";
-  }
-  </script>
\ No newline at end of file
+</div>
+
+<script>
+// Open the Modal
+function openModal(clicked_id) {
+  var src = document.getElementById(clicked_id).src;
+  if (src.includes("#")) {
+    src = src.substring(0, src.indexOf( "#" ));
+  };
+  document.getElementById("modalPic").src = src;
+  document.getElementById("myModal").style.display = "block";
+  // Ensures the site footer is not shown if front of the modal. Remove if this is not an issue or
+  // there is no footer. "site-footer" id can also be changed appropriately.
+  document.getElementById("site-footer").style.display = "hidden";
+}
+
+// Close the Modal
+function closeModal() { 
+  // prevents flashing last modal image while new id is loading on open
+  document.getElementById("modalPic").src = "";
+  document.getElementById("myModal").style.display = "none";
+  // See note above regarding the footer 
+  document.getElementById("site-footer").style.display = "block";
+}
+</script>
\ No newline at end of file