diff --git a/eumd-common/overlay/etc/mirror-mdq/template/css/style.css b/eumd-common/overlay/etc/mirror-mdq/template/css/style.css
new file mode 100644
index 00000000..e09966ff
--- /dev/null
+++ b/eumd-common/overlay/etc/mirror-mdq/template/css/style.css
@@ -0,0 +1,323 @@
+h1 {
+  margin: 0;
+  font-size: 35px;
+  line-height: 40px;
+  font-weight: 700;
+}
+
+h2,
+h3,
+h4 {
+  margin: 0;
+  line-height: 25px;
+  font-weight: 700;
+}
+
+h2 {
+  margin-bottom: 6px;
+  font-size: 24px;
+}
+
+h3 {
+  font-size: 20px;
+}
+
+h4 {
+  font-size: 16px;
+}
+
+li p { 
+  padding: 0;
+  margin: 0;
+}
+
+p {
+  margin: 0 0 35px;
+  line-height: 25px;
+}
+p.excerpt {
+  margin-top: 37px;
+  font-size: 20px;
+  line-height: 25px;
+}
+p.image-text {
+  font-size: 14px;
+  font-style: italic;
+  line-height: 25px;
+  margin-top: 6px;
+}
+
+nav.navbar {
+  padding: 25px 20px;
+  background-color: #fff;
+  -webkit-box-shadow: 0px 1px 21px -7px rgba(0, 0, 0, 0.75);
+  -moz-box-shadow: 0px 1px 21px -7px rgba(0, 0, 0, 0.75);
+  box-shadow: 0px 1px 21px -7px rgba(0, 0, 0, 0.75);
+}
+nav.navbar a {
+  color: #000;
+  font-size: 18px;
+  line-height: 24px;
+}
+nav.navbar a:hover {
+  opacity: 0.5;
+}
+nav.navbar li.active a {
+  font-weight: 700;
+}
+nav.navbar.navbar-light .navbar-nav .nav-link {
+  color: #000;
+}
+
+.logo-link {
+  padding: 0;
+}
+
+.logo {
+  height: 50px;
+}
+
+.sidebar {
+  border-top: 3px solid #E1DFDF;
+  margin-top: 40px;
+  padding-top: 40px;
+}
+@media (min-width: 768px) {
+  .sidebar {
+    margin-top: 30px;
+    margin-left: 50px;
+    padding-left: 75px;
+    border-left: 3px solid #E1DFDF;
+    padding-top: 0;
+    margin-top: 0;
+    border-top: 0;
+  }
+}
+.sidebar > ul {
+  padding: 15px 0 57px;
+  list-style: none;
+  margin: 0;
+}
+.sidebar > ul li:last-child {
+  margin-bottom: 0;
+}
+.sidebar > ul li a {
+  font-size: 18px;
+  line-height: 35px;
+  letter-spacing: 0.51px;
+  color: #515151;
+}
+.sidebar > ul li > ul {
+  list-style: none;
+  padding: 0 0 0 15px;
+}
+.sidebar > ul li > ul > li a {
+  font-size: 14px;
+  line-height: 35px;
+}
+.sidebar a.active {
+  color: #238961;
+}
+.sidebar ul.downloads a {
+  padding-left: 35px;
+  color: #298C65;
+  display: block;
+  line-height: 1.5;
+  background-image: url("../../assets/img/download-icon.svg");
+  background-repeat: no-repeat;
+  background-size: 26px 26px;
+  background-position-y: 1px;
+}
+.sidebar ul.downloads li {
+  margin-bottom: 5px;
+}
+
+h1.article-header {
+  margin-top: 70px;
+}
+
+article img {
+  max-width: 100%;
+  height: auto;
+}
+article ul {
+  margin: 0 0 35px;
+  padding-left: 30px;
+}
+article ul li {
+  margin-top: 10px;
+}
+article ul li:first-of-type {
+  margin-top: 0;
+}
+article .info-box {
+  margin-bottom: 35px;
+  padding: 22px 30px 26px;
+  background-color: #DDF3EA;
+}
+article .info-box p:last-child {
+  margin-bottom: 0;
+}
+article .article-info {
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  line-height: 25px;
+}
+@media (min-width: 1200px) {
+  article .article-info {
+    display: inline-block;
+  }
+}
+@media (min-width: 1200px) {
+  article .article-info div {
+    display: inline-block;
+  }
+  article .article-info div:before {
+    margin-left: 15px;
+    content: "|";
+    margin-right: 15px;
+  }
+}
+article .code {
+  padding: 18px 25px;
+  margin-bottom: 30px;
+  background-color: #F5F5F5;
+  border: 1px solid #979797;
+  border-radius: 8px;
+}
+article .code pre {
+  margin: 0;
+}
+
+.footer-container {
+  background-color: #383838;
+  margin-top: 100px;
+}
+.footer-container footer {
+  padding-top: 55px;
+  padding-bottom: 55px;
+}
+.footer-container footer ul {
+  list-style: none;
+  padding: 0;
+}
+.footer-container footer ul li {
+  margin-top: 8px;
+  color: #FFF;
+  font-size: 14px;
+  line-height: 17px;
+  letter-spacing: 0.88px;
+  max-width: 418px;
+}
+.footer-container footer ul li.heading {
+  font-size: 18px;
+  line-height: 22px;
+  font-weight: 700;
+}
+.footer-container footer ul li a {
+  color: #FFF;
+  text-decoration: underline;
+}
+
+html,
+body {
+  font-family: "Tahoma", sans-serif;
+}
+
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Main content */
+.content-push {
+  height: 110px;
+}
+
+.full-block {
+  padding: 40px 0;
+  background-color: #FAFAFA;
+}
+@media (min-width: 768px) {
+  .full-block {
+    padding: 70px 0;
+  }
+}
+.full-block h1 {
+  font-size: 35px;
+  line-height: 45px;
+  font-weight: 700;
+  margin: 0;
+}
+@media (min-width: 768px) {
+  .full-block h1 {
+    font-size: 60px;
+    line-height: 75px;
+  }
+}
+.full-block a,
+.full-block button {
+  margin-top: 20px;
+  color: #000;
+}
+@media (min-width: 768px) {
+  .full-block a,
+.full-block button {
+    margin-top: 42px;
+  }
+}
+
+.half {
+  margin-top: 40px;
+}
+@media (min-width: 768px) {
+  .half {
+    margin-top: 78px;
+  }
+}
+.half h2 {
+  border-top: 3px solid #E1DFDF;
+  padding-top: 15px;
+  margin: 0;
+  font-size: 30px;
+  line-height: 35px;
+  letter-spacing: 0.86px;
+  font-weight: 700;
+}
+@media (min-width: 768px) {
+  .half h2 {
+    padding-top: 30px;
+  }
+}
+.half p {
+  margin: 20px 0 0;
+  line-height: 25px;
+}
+
+.modal-content {
+  padding: 35px;
+}
+
+.element-section {
+  padding: 30px 0;
+}
+
+.btn {
+  padding: 8px 20px 11px;
+  font-size: 14px;
+  line-height: 17px;
+  font-weight: 700;
+}
+.btn.btn-green {
+  border: 3px solid #1C855C;
+}
+.btn.btn-invert {
+  border: 3px solid #FFF;
+  color: #FFF;
+  background-color: transparent;
+}
+
+/* Helpers */
+.margin-top-sm {
+  margin-top: 10px;
+}
diff --git a/eumd-common/overlay/etc/mirror-mdq/template/index.html b/eumd-common/overlay/etc/mirror-mdq/template/index.html
index f1dcc3b7..62428012 100644
--- a/eumd-common/overlay/etc/mirror-mdq/template/index.html
+++ b/eumd-common/overlay/etc/mirror-mdq/template/index.html
@@ -1,31 +1,43 @@
 <!DOCTYPE html>
 <html>
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <link rel="stylesheet" href="/css/bootstrap.min.css">
+
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
+    <link rel="stylesheet" type="text/css" href="/css/style.css">
     <title>eIDAS Aggregate Metadata</title>
-</head>
-<body>
-<div class="container-fluid">
-   <div class="header clearfix">
-     <nav class="navbar navbar-light bg-faded">
-        <a href="https://swedenconnect.se/" class="navbar navbar-brand"><img width="300" height="46" class="img-fluid" src="/img/sweden-connect-color-yellow-on-blue.svg"/></a>
-        <span class="text-muted">eIDAS Aggregate Metadata</span>
-     </nav>
-   </div>
+  </head>
+  <body>
+    <nav class="navbar navbar-expand-lg fixed-top navbar-light">
+      <img class="logo" src="/img/sweden-connect-color-yellow-on-blue.svg" alt="sc_logo">
 
-   <div class="jumbotron">
-     <h1 class="display-3">eIDAS Aggregate Metadata</h1>
-   </div>
+      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
 
-   <div class="alert alert-info" role="info">
-     This is an aggregate view of eIDAS SAML metadata based on the Metadata Service List linked below.
-   </div>
-
-   <div class="row">
-     <div class="col-md-6">
-       <h2>Signing Certificate</h2>
-         <pre>
+      <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        <ul class="navbar-nav ml-auto">
+          <li class="nav-item">
+            <a class="nav-link" href="https://swedenconnect.se">Sweden Connect</a>
+          </li>
+        </ul>
+      </div>
+    </nav>
+    <div class="content-push"></div>
+    <div class="container">
+      <div class="row">
+        <div class="col-12">
+          <div class="row no-gutters">
+            <div class="col-sm-12 col-md-7">
+              <h1 class="article-header">eIDAS Aggregate Metadata</h1>
+            </div>
+          </div>
+        </div>
+        <div class="col-sm-12 col-md-7">
+         <br/>
+         <h2>Signeringscertifikat</h2>
+         <div class="code"><pre>
 -----BEGIN CERTIFICATE-----
 MIIGFTCCA/2gAwIBAgIJAMRMtpYesnyPMA0GCSqGSIb3DQEBCwUAMIGgMQswCQYD
 VQQGEwJTRTESMBAGA1UECAwJU3RvY2tob2xtMRIwEAYDVQQHDAlTdG9ja2hvbG0x
@@ -61,27 +73,64 @@ BOoxiQw0f7/UPW8uznHU3DR3JUkTTlUfKHrfB7RZvkqw15bLkH8DpgINkjW+PFzI
 OkY6KYbZj/wwCYBw3rxMb4oY3Lv0S6cLmLvxmkG8eizY9ymwNlr/YAwPeyzuLPRf
 j6+cBKFT97et/lUMyfKVwbmuJNgtABRRcw==
 -----END CERTIFICATE-----
-       </pre>
-     </div>
-     <div class="col-md-6">
-       <h2>SAML Metadata URLs</h2>
-       <dl>
-         <dt>All Entities</dt>
-         <dd><a href="/entities/">https://md.eidas.swedenconnect.se/entities</a></dd>
-         <dt>Only IdPs</dt>
-         <dd><a href="/role/idp.xml">https://md.eidas.swedenconnect.se/role/idp.xml</a></dd>
-         <dt>Only SPs</dt>
-         <dd><a href="/role/sp.xml">https://md.eidas.swedenconnect.se/role/sp.xml</a></dd>
-       </dl>
-       <h2>Metadata Service Lists</h2>
-       <dl>
-         <dt>All eIDAS test service endpoints</dt>
-         <dd><a href="/mdservicelist-aggregate.xml">https://md.eidas.swedenconnect.se/mdservicelist-aggregate.xml</a></dd>
-         <dt>Only SE</dt>
-         <dd><a href="/mdservicelist-se.xml">https://md.eidas.swedenconnect.se/mdservicelist-se.xml</a></dd>
-       </dl>
-     </div>
-   </div>
-</div>
-</body>
+       </pre></div>
+        </div> 
+        <div class="col-sm-12 col-md-5">
+          <div class="sidebar">
+            <h2>SAML Metadata URLs</h2>
+            <dl>
+               <dt>All Entities</dt>
+               <dd><a href="/entities/">https://md.eidas.swedenconnect.se/entities</a></dd>
+               <dt>Only IdPs</dt>
+               <dd><a href="/role/idp.xml">https://md.eidas.swedenconnect.se/role/idp.xml</a></dd>
+               <dt>Only SPs</dt>
+               <dd><a href="/role/sp.xml">https://md.eidas.swedenconnect.se/role/sp.xml</a></dd>
+            </dl>
+            <h2>Metadata Service Lists</h2>
+            <dl>
+               <dt>All eIDAS service endpoints</dt>
+               <dd><a href="/mdservicelist-aggregate.xml">https://md.eidas.swedenconnect.se/mdservicelist-aggregate.xml</a></dd>
+               <dt>Only SE</dt>
+               <dd><a href="/mdservicelist-se.xml">https://md.eidas.swedenconnect.se/mdservicelist-se.xml</a></dd>
+            </dl>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="container-fluid footer-container">
+      <footer class="container">
+        <div class="row">
+          <div class="col-sm-12 col-md">
+            <ul>
+              <li class="heading">Externa länkar</li>
+              <li><a href="https://digg.se/">DIGG – Myndigheten för Digital Förvaltning</a></li>
+              <li><a href="http://e-legitimation.se">e-legitimation.se – en webbplats om e-legitimation för privatpersoner</a></li>
+            </ul>
+          </div>
+
+          <div class="col-md-1"></div>
+
+          <div class="col-sm-12 col-md">
+            <div class="row no-gutters">
+              <div class="col-sm-12 col-md-6">
+                <ul class="contact">
+                  <li class="heading">Kontakt</li>
+                  <li>DIGG</li>
+                  <li>Box 14</li>
+		  <li>851 02 Sundsvall</li>
+                  <li>Telefon: 0771-11 44 00</li>
+                  <li>Twitter: @elegnamnden, #DIGG_se</li>
+                  <li><a href="/support.html">Kontakta support</a></li>
+                  <li><a href="/incident.html">Incidenthantering</a></li>
+                </ul>
+              </div>
+              <div class="col-sm-12 col-md-6">
+                <button id="footer-button" class="btn btn-invert float-right">Tillbaka till toppen</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </footer>
+    </div>
+  </body>
 </html>
diff --git a/natmd-common/overlay/etc/mirror-mdq/template/css/style.css b/natmd-common/overlay/etc/mirror-mdq/template/css/style.css
new file mode 100644
index 00000000..e09966ff
--- /dev/null
+++ b/natmd-common/overlay/etc/mirror-mdq/template/css/style.css
@@ -0,0 +1,323 @@
+h1 {
+  margin: 0;
+  font-size: 35px;
+  line-height: 40px;
+  font-weight: 700;
+}
+
+h2,
+h3,
+h4 {
+  margin: 0;
+  line-height: 25px;
+  font-weight: 700;
+}
+
+h2 {
+  margin-bottom: 6px;
+  font-size: 24px;
+}
+
+h3 {
+  font-size: 20px;
+}
+
+h4 {
+  font-size: 16px;
+}
+
+li p { 
+  padding: 0;
+  margin: 0;
+}
+
+p {
+  margin: 0 0 35px;
+  line-height: 25px;
+}
+p.excerpt {
+  margin-top: 37px;
+  font-size: 20px;
+  line-height: 25px;
+}
+p.image-text {
+  font-size: 14px;
+  font-style: italic;
+  line-height: 25px;
+  margin-top: 6px;
+}
+
+nav.navbar {
+  padding: 25px 20px;
+  background-color: #fff;
+  -webkit-box-shadow: 0px 1px 21px -7px rgba(0, 0, 0, 0.75);
+  -moz-box-shadow: 0px 1px 21px -7px rgba(0, 0, 0, 0.75);
+  box-shadow: 0px 1px 21px -7px rgba(0, 0, 0, 0.75);
+}
+nav.navbar a {
+  color: #000;
+  font-size: 18px;
+  line-height: 24px;
+}
+nav.navbar a:hover {
+  opacity: 0.5;
+}
+nav.navbar li.active a {
+  font-weight: 700;
+}
+nav.navbar.navbar-light .navbar-nav .nav-link {
+  color: #000;
+}
+
+.logo-link {
+  padding: 0;
+}
+
+.logo {
+  height: 50px;
+}
+
+.sidebar {
+  border-top: 3px solid #E1DFDF;
+  margin-top: 40px;
+  padding-top: 40px;
+}
+@media (min-width: 768px) {
+  .sidebar {
+    margin-top: 30px;
+    margin-left: 50px;
+    padding-left: 75px;
+    border-left: 3px solid #E1DFDF;
+    padding-top: 0;
+    margin-top: 0;
+    border-top: 0;
+  }
+}
+.sidebar > ul {
+  padding: 15px 0 57px;
+  list-style: none;
+  margin: 0;
+}
+.sidebar > ul li:last-child {
+  margin-bottom: 0;
+}
+.sidebar > ul li a {
+  font-size: 18px;
+  line-height: 35px;
+  letter-spacing: 0.51px;
+  color: #515151;
+}
+.sidebar > ul li > ul {
+  list-style: none;
+  padding: 0 0 0 15px;
+}
+.sidebar > ul li > ul > li a {
+  font-size: 14px;
+  line-height: 35px;
+}
+.sidebar a.active {
+  color: #238961;
+}
+.sidebar ul.downloads a {
+  padding-left: 35px;
+  color: #298C65;
+  display: block;
+  line-height: 1.5;
+  background-image: url("../../assets/img/download-icon.svg");
+  background-repeat: no-repeat;
+  background-size: 26px 26px;
+  background-position-y: 1px;
+}
+.sidebar ul.downloads li {
+  margin-bottom: 5px;
+}
+
+h1.article-header {
+  margin-top: 70px;
+}
+
+article img {
+  max-width: 100%;
+  height: auto;
+}
+article ul {
+  margin: 0 0 35px;
+  padding-left: 30px;
+}
+article ul li {
+  margin-top: 10px;
+}
+article ul li:first-of-type {
+  margin-top: 0;
+}
+article .info-box {
+  margin-bottom: 35px;
+  padding: 22px 30px 26px;
+  background-color: #DDF3EA;
+}
+article .info-box p:last-child {
+  margin-bottom: 0;
+}
+article .article-info {
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  line-height: 25px;
+}
+@media (min-width: 1200px) {
+  article .article-info {
+    display: inline-block;
+  }
+}
+@media (min-width: 1200px) {
+  article .article-info div {
+    display: inline-block;
+  }
+  article .article-info div:before {
+    margin-left: 15px;
+    content: "|";
+    margin-right: 15px;
+  }
+}
+article .code {
+  padding: 18px 25px;
+  margin-bottom: 30px;
+  background-color: #F5F5F5;
+  border: 1px solid #979797;
+  border-radius: 8px;
+}
+article .code pre {
+  margin: 0;
+}
+
+.footer-container {
+  background-color: #383838;
+  margin-top: 100px;
+}
+.footer-container footer {
+  padding-top: 55px;
+  padding-bottom: 55px;
+}
+.footer-container footer ul {
+  list-style: none;
+  padding: 0;
+}
+.footer-container footer ul li {
+  margin-top: 8px;
+  color: #FFF;
+  font-size: 14px;
+  line-height: 17px;
+  letter-spacing: 0.88px;
+  max-width: 418px;
+}
+.footer-container footer ul li.heading {
+  font-size: 18px;
+  line-height: 22px;
+  font-weight: 700;
+}
+.footer-container footer ul li a {
+  color: #FFF;
+  text-decoration: underline;
+}
+
+html,
+body {
+  font-family: "Tahoma", sans-serif;
+}
+
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Main content */
+.content-push {
+  height: 110px;
+}
+
+.full-block {
+  padding: 40px 0;
+  background-color: #FAFAFA;
+}
+@media (min-width: 768px) {
+  .full-block {
+    padding: 70px 0;
+  }
+}
+.full-block h1 {
+  font-size: 35px;
+  line-height: 45px;
+  font-weight: 700;
+  margin: 0;
+}
+@media (min-width: 768px) {
+  .full-block h1 {
+    font-size: 60px;
+    line-height: 75px;
+  }
+}
+.full-block a,
+.full-block button {
+  margin-top: 20px;
+  color: #000;
+}
+@media (min-width: 768px) {
+  .full-block a,
+.full-block button {
+    margin-top: 42px;
+  }
+}
+
+.half {
+  margin-top: 40px;
+}
+@media (min-width: 768px) {
+  .half {
+    margin-top: 78px;
+  }
+}
+.half h2 {
+  border-top: 3px solid #E1DFDF;
+  padding-top: 15px;
+  margin: 0;
+  font-size: 30px;
+  line-height: 35px;
+  letter-spacing: 0.86px;
+  font-weight: 700;
+}
+@media (min-width: 768px) {
+  .half h2 {
+    padding-top: 30px;
+  }
+}
+.half p {
+  margin: 20px 0 0;
+  line-height: 25px;
+}
+
+.modal-content {
+  padding: 35px;
+}
+
+.element-section {
+  padding: 30px 0;
+}
+
+.btn {
+  padding: 8px 20px 11px;
+  font-size: 14px;
+  line-height: 17px;
+  font-weight: 700;
+}
+.btn.btn-green {
+  border: 3px solid #1C855C;
+}
+.btn.btn-invert {
+  border: 3px solid #FFF;
+  color: #FFF;
+  background-color: transparent;
+}
+
+/* Helpers */
+.margin-top-sm {
+  margin-top: 10px;
+}
diff --git a/natmd-common/overlay/etc/mirror-mdq/template/index.html b/natmd-common/overlay/etc/mirror-mdq/template/index.html
index 6b24523f..01318f5a 100644
--- a/natmd-common/overlay/etc/mirror-mdq/template/index.html
+++ b/natmd-common/overlay/etc/mirror-mdq/template/index.html
@@ -1,27 +1,43 @@
 <!DOCTYPE html>
 <html>
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <link rel="stylesheet" href="/css/bootstrap.min.css">
+
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
+    <link rel="stylesheet" type="text/css" href="/css/style.css">
     <title>Sweden Connect Metadata</title>
-</head>
-<body>
-<div class="container-fluid">
-   <div class="header clearfix">
-     <nav class="navbar navbar-light bg-faded">
-        <a href="https://swedenconnect.se/" class="navbar navbar-brand"><img width="300" height="46" class="img-fluid" src="/img/sweden-connect-color-yellow-on-blue.svg"/></a>
-        <span class="text-muted">Sweden Connect Metadata (QA)</span>
-     </nav>
-   </div>
+  </head>
+  <body>
+    <nav class="navbar navbar-expand-lg fixed-top navbar-light">
+      <img class="logo" src="/img/sweden-connect-color-yellow-on-blue.svg" alt="sc_logo">
 
-   <div class="jumbotron">
-     <h1 class="display-3">Sweden Connect Metadata</h1>
-   </div>
-
-   <div class="row">
-     <div class="col-md-6">
-       <h2>Signeringscertifikat</h2>
-         <pre>
+      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+   
+      <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        <ul class="navbar-nav ml-auto">
+          <li class="nav-item">
+            <a class="nav-link" href="https://swedenconnect.se">Sweden Connect</a>
+          </li>
+        </ul>
+      </div>
+    </nav>
+    <div class="content-push"></div>
+    <div class="container">
+      <div class="row">
+        <div class="col-12">
+          <div class="row no-gutters">
+            <div class="col-sm-12 col-md-7">
+              <h1 class="article-header">Sweden Connect Metadata</h1>
+            </div>
+          </div>
+        </div>
+        <div class="col-sm-12 col-md-7">
+         <br/>
+         <h2>Signeringscertifikat</h2>
+         <div class="code"><pre>
 -----BEGIN CERTIFICATE-----
 MIIGFTCCA/2gAwIBAgIJAMRMtpYesnyPMA0GCSqGSIb3DQEBCwUAMIGgMQswCQYD
 VQQGEwJTRTESMBAGA1UECAwJU3RvY2tob2xtMRIwEAYDVQQHDAlTdG9ja2hvbG0x
@@ -57,20 +73,57 @@ BOoxiQw0f7/UPW8uznHU3DR3JUkTTlUfKHrfB7RZvkqw15bLkH8DpgINkjW+PFzI
 OkY6KYbZj/wwCYBw3rxMb4oY3Lv0S6cLmLvxmkG8eizY9ymwNlr/YAwPeyzuLPRf
 j6+cBKFT97et/lUMyfKVwbmuJNgtABRRcw==
 -----END CERTIFICATE-----
-       </pre>
-     </div>
-     <div class="col-md-6">
-       <h2>Metadata URLer</h2>
-       <dl>
-         <dt>Full metadata - samtliga objekt</dt>
-         <dd><a href="/entities/">https://md.swedenconnect.se/entities</a></dd>
-         <dt>Endast IdP:er</dt>
-         <dd><a href="/role/idp.xml">https://md.swedenconnect.se/role/idp.xml</a></dd>
-         <dt>Endast SP:er</dt>
-         <dd><a href="/role/sp.xml">https://md.swedenconnect.se/role/sp.xml</a></dd>
-       </dl>
-     </div>
-   </div>
-</div>
-</body>
+       </pre></div>
+        </div> 
+        <div class="col-sm-12 col-md-5">
+          <div class="sidebar">
+             <h2>Metadata URLer</h2>
+             <dl>
+                <dt>Full metadata - samtliga objekt</dt>
+                <dd><a href="/entities/">https://md.swedenconnect.se/entities</a></dd>
+                <dt>Endast IdP:er</dt>
+                <dd><a href="/role/idp.xml">https://md.swedenconnect.se/role/idp.xml</a></dd>
+                <dt>Endast SP:er</dt>
+                <dd><a href="/role/sp.xml">https://md.swedenconnect.se/role/sp.xml</a></dd>
+             </dl>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="container-fluid footer-container">
+      <footer class="container">
+        <div class="row">
+          <div class="col-sm-12 col-md">
+            <ul>
+              <li class="heading">Externa länkar</li>
+              <li><a href="https://digg.se/">DIGG – Myndigheten för Digital Förvaltning</a></li>
+              <li><a href="http://e-legitimation.se">e-legitimation.se – en webbplats om e-legitimation för privatpersoner</a></li>
+            </ul>
+          </div>
+
+          <div class="col-md-1"></div>
+
+          <div class="col-sm-12 col-md">
+            <div class="row no-gutters">
+              <div class="col-sm-12 col-md-6">
+                <ul class="contact">
+                  <li class="heading">Kontakt</li>
+                  <li>DIGG</li>
+                  <li>Box 14</li>
+		  <li>851 02 Sundsvall</li>
+                  <li>Telefon: 0771-11 44 00</li>
+                  <li>Twitter: @elegnamnden, #DIGG_se</li>
+                  <li><a href="/support.html">Kontakta support</a></li>
+                  <li><a href="/incident.html">Incidenthantering</a></li>
+                </ul>
+              </div>
+              <div class="col-sm-12 col-md-6">
+                <button id="footer-button" class="btn btn-invert float-right">Tillbaka till toppen</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </footer>
+    </div>
+  </body>
 </html>