diff --git a/server/src/main/assets/css/partials/_main.scss b/server/src/main/assets/css/partials/_main.scss
index f9f82e988..b788f679c 100755
--- a/server/src/main/assets/css/partials/_main.scss
+++ b/server/src/main/assets/css/partials/_main.scss
@@ -647,55 +647,6 @@ main {
               padding: 6px 12px;
             }
         }
-        .overlay {
-            position: fixed;
-            z-index: 10;
-            top: 0;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0, 0, 0, 0.7);
-            transition: opacity 500ms;
-            visibility: hidden;
-            opacity: 0;
-        }
-        .overlay:target {
-            visibility: visible;
-            opacity: 1;
-        }
-
-        .popup {
-            margin: 70px auto;
-            padding: 20px;
-            background: #fff;
-            border-radius: 5px;
-            width: 60%;
-            position: relative;
-            transition: all 5s ease-in-out;
-        }
-
-        .popup h2 {
-            margin-top: 0;
-            color: #333;
-            font-family: Tahoma, Arial, sans-serif;
-        }
-        .popup .close {
-            position: absolute;
-            top: 20px;
-            right: 30px;
-            transition: all 200ms;
-            font-size: 30px;
-            font-weight: bold;
-            text-decoration: none;
-            color: #333;
-        }
-        .popup .close:hover {
-            color: #06D85F;
-        }
-        .popup .content {
-            max-height: 30%;
-            overflow: auto;
-        }
     }
     .artifact-project {
         margin-top: 10px;
@@ -729,6 +680,58 @@ main {
     }
 }
 
+.badge-showcase {
+    .overlay {
+        position: fixed;
+        z-index: 10;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background: rgba(0, 0, 0, 0.7);
+        transition: opacity 500ms;
+        visibility: hidden;
+        opacity: 0;
+    }
+    .overlay:target {
+        visibility: visible;
+        opacity: 1;
+    }
+
+    .popup {
+        margin: 70px auto;
+        padding: 20px;
+        background: #fff;
+        border-radius: 5px;
+        width: 60%;
+        position: relative;
+        transition: all 5s ease-in-out;
+    }
+
+    .popup h2 {
+        margin-top: 0;
+        color: #333;
+        font-family: Tahoma, Arial, sans-serif;
+    }
+    .popup .close {
+        position: absolute;
+        top: 20px;
+        right: 30px;
+        transition: all 200ms;
+        font-size: 30px;
+        font-weight: bold;
+        text-decoration: none;
+        color: #333;
+    }
+    .popup .close:hover {
+        color: #06D85F;
+    }
+    .popup .content {
+        max-height: 30%;
+        overflow: auto;
+    }
+}
+
 .documentation-link {
     ul {
         padding-left: 0;
diff --git a/template/src/main/twirl/ch.epfl.scala.index.views/project/badges.scala.html b/template/src/main/twirl/ch.epfl.scala.index.views/project/badges.scala.html
new file mode 100644
index 000000000..4c15884f4
--- /dev/null
+++ b/template/src/main/twirl/ch.epfl.scala.index.views/project/badges.scala.html
@@ -0,0 +1,30 @@
+@import ch.epfl.scala.index.model.Release
+@(release: Release)
+<div class="box badge-showcase">
+  <h4>Markdown Badge</h4>
+  <div style="overflow: hidden">
+  <a href="#badge-markdown">
+    <img src="@release.reference.badgeUrl" />
+  </a>
+  </div>
+  <div id="badge-markdown" class="overlay">
+    <div class="popup">
+      <h2>Create badge</h2>
+      <a class="close" href="#">&times;</a>
+
+      <div class="content">
+        <img src="@release.reference.badgeUrl" />
+        <div>
+          <h5>Markdown:</h5>
+          <pre
+          aria-label="Badge markdown"
+          id="copy-badge-markdown"
+          class="copyable-incantation"
+          >[![@release.reference.artifact Scala version support](@release.reference.badgeUrl)](@release.reference.artifactFullHttpUrl)</pre>
+          <button class="btn-copy btn btn-primary pull-right" data-clipboard-target="copy-badge-markdown">Copy Markdown</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</div>
\ No newline at end of file
diff --git a/template/src/main/twirl/ch.epfl.scala.index.views/project/headproject.scala.html b/template/src/main/twirl/ch.epfl.scala.index.views/project/headproject.scala.html
index 365416237..6c33e9b5e 100644
--- a/template/src/main/twirl/ch.epfl.scala.index.views/project/headproject.scala.html
+++ b/template/src/main/twirl/ch.epfl.scala.index.views/project/headproject.scala.html
@@ -52,28 +52,7 @@ <h1>
                 GitHub <i class="fa fa-github fa-lg"></i>
               </a>
             }
-            <a href="#badge-markdown">
-              <img src="@release.reference.badgeUrl" />
-            </a>
-            <div id="badge-markdown" class="overlay">
-              <div class="popup">
-                <h2>Create badge</h2>
-                <a class="close" href="#">&times;</a>
-
-                <div class="content">
-                  <img src="@release.reference.badgeUrl" />
-                  <div>
-                    <h5>Markdown:</h5>
-                    <pre
-                      aria-label="Badge markdown"
-                      id="copy-badge-markdown"
-                      class="copyable-incantation"
-                    >[![@release.reference.artifact Scala version support](@release.reference.badgeUrl)](@release.reference.artifactFullHttpUrl)</pre>
-                    <button class="btn-copy btn btn-primary pull-right" data-clipboard-target="copy-badge-markdown">Copy Markdown</button>
-                  </div>
-                </div>
-              </div>
-            </div>
+
           </div>
           @for(github <- project.github) {
             @if(!github.topics.isEmpty) {
diff --git a/template/src/main/twirl/ch.epfl.scala.index.views/project/project.scala.html b/template/src/main/twirl/ch.epfl.scala.index.views/project/project.scala.html
index 6f7410cd6..858dcd6c8 100644
--- a/template/src/main/twirl/ch.epfl.scala.index.views/project/project.scala.html
+++ b/template/src/main/twirl/ch.epfl.scala.index.views/project/project.scala.html
@@ -31,6 +31,7 @@ <h1>[DEPRECATED]</h1>
             </div>
             }
             @documentation(release, project)
+            @badges(release)
             @install(release, project.cliArtifacts)
             @release.scastieURL.map(url => scastie(url))
             @project.github.map(gh => statistic(gh, project.githubRepo, project.releaseCount, allDeps.reverseDependencies.size))