diff --git a/css/style.css b/css/style.css
index 7250bd4..291f754 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,144 +1,139 @@
-*{
-  margin: 0;
-  padding: 0;
+:root {
+    --color-black: #292B2E;
+    --color-blue-bright: #005AE1;
+    --color-blue-dark: #003E94;
+    --color-blue-light: #E6EDF4;
+    --color-grey-dark: #595D64;
+    --color-grey-light: #f7f8f8;
+    --color-grey-medium: #DCDEE0;
+    --color-white: #fff;
 }
+
+* {
+    margin: 0;
+    padding: 0;
+}
+
+html {
+    font-size: 10px;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+}
+
+body, table {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    font-size: 1.4rem;
+    font-weight: 400;
+    line-height: 1.4;
+}
+
 body {
-  font-family: Helvetica, Arial, sans-serif;
-  font-size: 14px;
-  color: #545353;
-  color: #005A92;
-  background: #B0BEC7;
-  padding: 20px;
-}
-#content {
-  margin: 0 auto;
-  max-width: 1200px;
-  background: #fff;
-  padding: 20px 30px;
-  -webkit-box-shadow:  2px 2px 5px 1px rgba(0, 0, 0, 0.2);
-  box-shadow:  2px 2px 5px 1px rgba(0, 0, 0, 0.2);
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
-}
-h1{
-  font-size: 20px;
-  line-height: 24px;
-  font-weight: bold;
-  color: #1556B2;
-  color: #005A92;
-/*  text-shadow: 1px 1px 1px rgba(0,0,0,0.7);
-  filter: dropshadow(color=#000, offx=2, offy=2);*/
-  padding-left: 31px;
-  background: url("../images/logo_small.png") transparent left top no-repeat scroll;
-  margin: 0 0 20px 0;
-  display: inline-block;
-}
-h1 a{
-  font: inherit;
-  color: inherit;
-  text-decoration: none;
-}
-h1 .ss_link{
-  visibility: hidden;
-  font-size: 9px;
-  display: block;
-  text-align: right;
-  margin-top: -5px;
-}
-h1:hover .ss_link{
-  visibility: visible;
-  text-decoration: underline;
-
-}
-.expl {
-  margin: 10px 3px;
-  line-height: 1.3em;
-}
-.expl a {
-  color: #1556B2;
-  font-weight: bold;
-  text-decoration: none;
-}
-.expl a:hover{
-  text-decoration: underline;
+    background: var(--color-white);
+    color: var(--color-grey-dark);
 }
 
-table.tablesorter {
-	background-color: #CDCDCD;
-	margin:20px 0pt 15px;
-	font-size: 8pt;
-	width: 100%;
-	text-align: left;
-  border: none;
-  border-collapse: collapse;
-  border-bottom: 1px solid #005A92;
-}
-table.tablesorter thead tr th, table.tablesorter tfoot tr th {
-	/*background-color: #e6EEEE;*/
-  background-color: #F5FAFA;
-	font-size: 8pt;
-	padding: 4px 20px 4px 10px;
-}
-table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
-  background-color: #B0BEC7;
-  background-color: #e6EEEE;
+table {
+    border-collapse: collapse;
+    color: var(--color-black);
+    text-align: left;
+    width: 100%;
 }
 
-table.tablesorter thead tr .header {
-	background-image: url("../images/bg.gif");
-	background-repeat: no-repeat;
-	background-position: center right;
-	cursor: pointer;
-  border-bottom: 1px solid #005A92;
-}
-table.tablesorter thead tr .headerSortUp {
-	background-image: url("../images/asc.gif");
-}
-table.tablesorter thead tr .headerSortDown {
-	background-image: url("../images/desc.gif");
+a {
+    color: inherit;
+    text-decoration: none;
 }
 
-table.tablesorter tbody td {
-	color: #005A92;
-	padding: 4px;
-	vertical-align: top;
-}
-table.tablesorter tbody tr{
-  background-color: #FFF;
-}
-table.tablesorter tbody tr.odd  {
-	background-color:#EFF2F3;
-}
- table.tablesorter tbody tr:hover {
-  background-color: #D8E1E8;
-}
-table.tablesorter tbody a{
-  color: #444;color: #005A92;
-  text-decoration: none;
-}
-table.tablesorter tbody a:hover{
-  text-decoration: underline;
-}
-table.tablesorter tbody tr:hover td,
-table.tablesorter tbody tr:hover a{
-  color: #000;
-}
-table.imagestable,
-table.imagestable a {
-    font-size: 8pt;
-}
-table.imagestable {
-    margin-top: 15px;
-}
-table.imagestable tr.odd {
-    background: transparent;
-}
-table.imagestable tr.even {
-    background: transparent;
+.content {
+    margin: 0 auto;
+    max-width: 122rem;
+    padding:  2rem;
 }
 
-#Footer{
-  margin: 50px 0 10px;
-  text-align: right;
-  font-size: 0.8em;
+.content__title {
+    align-items: center;
+    color: var(--color-black);
+    display: inline-flex;
+    font-size: 2rem;
+    font-weight: 600;
+    margin: 0 0 3rem;
+}
+
+.content__title::before {
+    content: "";
+    background: url("../images/cms_logo.svg") left center no-repeat;
+    border-right: 0.1rem solid var(--color-grey-medium);
+    display: inline-block;
+    height: 3.2rem;
+    margin-right: 1.5rem;
+    padding-right: 1.5rem;
+    width: 3.2rem;
+}
+
+.content__text {
+    margin: 1rem 0;
+}
+
+.content__text a {
+    color: var(--color-blue-bright);
+    text-decoration: underline;
+}
+
+.content__text a:hover {
+    color: var(--color-blue-dark);
+    text-decoration: none;
+}
+
+.table-wrapper {
+    border-top: 0.1rem solid var(--color-grey-medium);
+    margin: 3rem 0 5rem;
+    overflow-x: auto;
+}
+
+.table__cell {
+    padding: 1rem;
+}
+
+.table__cell--w-10 {
+    width: 10%;
+}
+
+.table__cell--w-15 {
+    width: 15%;
+}
+
+.table__cell--w-65 {
+    width: 65%;
+}
+
+.table__cell--w-85 {
+    width: 85%;
+}
+
+.table tbody tr:nth-child(odd) td {
+    background-color: var(--color-grey-light);
+}
+
+.table tbody tr:hover td {
+    background-color: var(--color-blue-light);
+}
+
+.table a:hover {
+    text-decoration: underline;
+}
+
+.image-table__cell {
+    padding: 1rem 1rem 0 0;
+}
+
+.image-table__cell--image {
+    width: 6rem;
+}
+
+.image-table__cell--text {
+    width: calc(100% - 6rem);
+}
+
+.image-table__title {
+    display: block;
 }
diff --git a/images/asc.gif b/images/asc.gif
deleted file mode 100644
index 7415786..0000000
Binary files a/images/asc.gif and /dev/null differ
diff --git a/images/bg.gif b/images/bg.gif
deleted file mode 100644
index fac668f..0000000
Binary files a/images/bg.gif and /dev/null differ
diff --git a/images/cms_logo.svg b/images/cms_logo.svg
new file mode 100644
index 0000000..8cafcb8
--- /dev/null
+++ b/images/cms_logo.svg
@@ -0,0 +1,4 @@
+<svg width="32" height="19" viewBox="0 0 32 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.832 1.85439L9.09495 6.56978C8.16307 7.22084 7.93658 8.50206 8.58764 9.43478C9.2387 10.3667 10.5199 10.5931 11.4526 9.94209L18.1897 5.2267C20.9787 3.27352 24.8307 3.95216 26.7772 6.74111C28.7304 9.53005 28.0518 13.3821 25.2628 15.3286L23.145 16.8087C24.8993 19.7899 28.8675 18.5354 30.6702 15.3353C32.5549 11.9905 32.4863 7.72146 30.1428 4.37673C26.8926 -0.263432 20.4714 -1.39422 15.832 1.85439Z" fill="#005AE1"/>
+<path d="M16.1671 16.6776L22.9042 11.9622C23.836 11.3112 24.0625 10.03 23.4115 9.09724C22.7604 8.16536 21.4792 7.93887 20.5465 8.58993L13.8094 13.3053C11.0204 15.2585 7.1684 14.5799 5.22191 11.7909C3.26873 9.00196 3.94737 5.14992 6.73631 3.20343L8.85414 1.72329C7.1007 -1.25705 3.1325 -0.00256691 1.32975 3.19758C-0.554895 6.54231 -0.486362 10.8114 1.85712 14.1561C5.10574 18.7955 11.5269 19.9338 16.1671 16.6785V16.6776Z" fill="#005AE1"/>
+</svg>
diff --git a/images/desc.gif b/images/desc.gif
deleted file mode 100644
index 3b30b3c..0000000
Binary files a/images/desc.gif and /dev/null differ
diff --git a/images/logo_small.png b/images/logo_small.png
deleted file mode 100644
index fdb589e..0000000
Binary files a/images/logo_small.png and /dev/null differ
diff --git a/templates/xml-sitemap.ss b/templates/xml-sitemap.ss
index 5147f0c..eccba74 100644
--- a/templates/xml-sitemap.ss
+++ b/templates/xml-sitemap.ss
@@ -9,82 +9,80 @@
         <link rel="stylesheet" href="$resourceURL(wilr/silverstripe-googlesitemaps:css/style.css)" />
       </head>
       <body>
-        <div id="content">
-          <h1>
-            <a href="http://silverstripe.org" target="_blank">XML Sitemap
-            <span class="ss_link">&#8594; silverstripe.org</span>
-            </a>
+        <div class="content">
+          <h1 class="content__title">
+            <a href="https://www.silverstripe.org" target="_blank" rel="noopener noreferrer">XML Sitemap</a>
           </h1>
-
-          <p class="expl">
+          <p class="content__text">
             This sitemap contains <xsl:value-of select="count(sitemap:urlset/sitemap:url)"/> URLs.
           </p>
-          <table id="sitemap" cellpadding="3" class="tablesorter">
-            <thead>
-              <tr>
-                <th width="76%">URL</th>
-                <th width="7%">Priority</th>
-                <th width="7%">Change Freq.</th>
-                <th width="10%">Last Change</th>
-              </tr>
-            </thead>
-            <tbody>
-              <xsl:variable name="lower" select="'abcdefghijklmnopqrstuvwxyz'"/>
-              <xsl:variable name="upper" select="'ABCDEFGHIJKLMNOPQRSTUVWXYZ'"/>
-              <xsl:for-each select="sitemap:urlset/sitemap:url">
+          <div class="table-wrapper">
+            <table id="sitemap" class="table">
+              <thead>
                 <tr>
-                  <td>
-                    <xsl:variable name="itemURL">
-                      <xsl:value-of select="sitemap:loc"/>
-                    </xsl:variable>
-                    <xsl:variable name="imagesCount" select="count(image:image)"/>
-                    <a href="{\$itemURL}">
-                      <xsl:value-of select="sitemap:loc"/>
-                    </a>
-
-
-                    <xsl:if test="\$imagesCount &gt; 0">
-                      <table class="imagestable" cellpadding="0" cellspacing="0">
-                        <tr>
-                          <th>Images</th>
-                        </tr>
-                        <xsl:for-each select="image:image">
-                          <xsl:variable name="imageURL">
-                            <xsl:value-of select="image:loc"/>
-                          </xsl:variable>
-                          <tr>
-                            <td>
-                              <img src="{\$imageURL}" width="40px"/>
-                            </td>
-                            <td>
-                              <xsl:value-of select="image:title"/><br/>
-                              <a href="{\$imageURL}">
-                                <xsl:value-of select="image:loc"/>
-                              </a>
-                            </td>
-                          </tr>
-                        </xsl:for-each>
-                      </table>
-                    </xsl:if>
-
-
-                  </td>
-                  <td>
-                    <xsl:value-of select="concat(sitemap:priority*100,'%')"/>
-                  </td>
-                  <td>
-                    <xsl:value-of select="concat(translate(substring(sitemap:changefreq, 1, 1),concat(\$lower, \$upper),concat(\$upper, \$lower)),substring(sitemap:changefreq, 2))"/>
-                  </td>
-                  <td>
-                    <xsl:value-of select="concat(substring(sitemap:lastmod,0,11),concat(' ', substring(sitemap:lastmod,12,5)))"/>
-                  </td>
+                  <th class="table__cell table__cell--w-65">URL</th>
+                  <th class="table__cell table__cell--w-10">Priority</th>
+                  <th class="table__cell table__cell--w-10">Change Freq.</th>
+                  <th class="table__cell table__cell--w-15">Last Change</th>
                 </tr>
-              </xsl:for-each>
-            </tbody>
-          </table>
-          <p id="Footer" class="expl">Generated by the SilverStripe
-            <a href="https://github.com/wilr/silverstripe-googlesitemaps" target="_blank" title="SilverStripe Google Sitemaps module on Github">Google Sitemaps Module</a>
-            <br />More information about XML sitemaps on <a href="http://sitemaps.org" target="_blank">sitemaps.org</a>.
+              </thead>
+              <tbody>
+                <xsl:variable name="lower" select="'abcdefghijklmnopqrstuvwxyz'"/>
+                <xsl:variable name="upper" select="'ABCDEFGHIJKLMNOPQRSTUVWXYZ'"/>
+                <xsl:for-each select="sitemap:urlset/sitemap:url">
+                  <tr>
+                    <td class="table__cell">
+                      <xsl:variable name="itemURL">
+                        <xsl:value-of select="sitemap:loc"/>
+                      </xsl:variable>
+                      <xsl:variable name="imagesCount" select="count(image:image)"/>
+                      <a href="{\$itemURL}">
+                        <xsl:value-of select="sitemap:loc"/>
+                      </a>
+                      <xsl:if test="\$imagesCount &gt; 0">
+                        <table class="image-table" cellpadding="0" cellspacing="0">
+                          <tr>
+                            <th class="image-table__cell">Images</th>
+                          </tr>
+                          <xsl:for-each select="image:image">
+                            <xsl:variable name="imageURL">
+                              <xsl:value-of select="image:loc"/>
+                            </xsl:variable>
+                            <tr>
+                              <td class="image-table__cell image-table__cell--image">
+                                <img src="{\$imageURL}" width="40px"/>
+                              </td>
+                              <td class="image-table__cell image-table__cell--text">
+                                <xsl:value-of select="image:title"/><br/>
+                                <a href="{\$imageURL}">
+                                  <xsl:value-of select="image:loc"/>
+                                </a>
+                              </td>
+                            </tr>
+                          </xsl:for-each>
+                        </table>
+                      </xsl:if>
+                    </td>
+                    <td class="table__cell">
+                      <xsl:value-of select="concat(sitemap:priority*100,'%')"/>
+                    </td>
+                    <td class="table__cell">
+                      <xsl:value-of select="concat(translate(substring(sitemap:changefreq, 1, 1),concat(\$lower, \$upper),concat(\$upper, \$lower)),substring(sitemap:changefreq, 2))"/>
+                    </td>
+                    <td class="table__cell">
+                      <xsl:value-of select="concat(substring(sitemap:lastmod,0,11),concat(' ', substring(sitemap:lastmod,12,5)))"/>
+                    </td>
+                  </tr>
+                </xsl:for-each>
+              </tbody>
+            </table>
+          </div>
+          <p class="content__text">
+            Generated by the Silverstripe CMS
+            <a href="https://github.com/wilr/silverstripe-googlesitemaps" target="_blank" rel="noopener noreferrer" title="Silverstripe CMS Google Sitemaps module on Github">Google Sitemaps Module</a>
+          </p>
+          <p class="content__text">
+            More information about XML sitemaps on <a href="https://sitemaps.org" target="_blank" rel="noopener noreferrer">sitemaps.org</a>
           </p>
         </div>
       </body>
diff --git a/templates/xml-sitemapindex.ss b/templates/xml-sitemapindex.ss
index 01acf07..e3b93dd 100644
--- a/templates/xml-sitemapindex.ss
+++ b/templates/xml-sitemapindex.ss
@@ -9,46 +9,48 @@
         <link rel="stylesheet" href="$resourceURL(wilr/silverstripe-googlesitemaps:css/style.css)" />
       </head>
       <body>
-        <div id="content">
-          <h1>
-            <a href="http://silverstripe.org" target="_blank">XML Sitemap
-            <span class="ss_link">&#8594; silverstripe.org</span>
-            </a>
+        <div class="content">
+          <h1 class="content__title">
+            <a href="https://www.silverstripe.org" target="_blank" rel="noopener noreferrer">XML Sitemap</a>
           </h1>
-
-          <p class="expl">
+          <p class="content__text">
             This sitemap consists of <xsl:value-of select="count(sitemap:sitemapindex/sitemap:sitemap)"/> part(s).
           </p>
-          <table id="sitemapindex" cellpadding="3" class="tablesorter">
-            <thead>
-              <tr>
-                <th width="90%">URL</th>
-                <th width="10%">Last Change</th>
-              </tr>
-            </thead>
-            <tbody>
-              <xsl:variable name="lower" select="'abcdefghijklmnopqrstuvwxyz'"/>
-              <xsl:variable name="upper" select="'ABCDEFGHIJKLMNOPQRSTUVWXYZ'"/>
-              <xsl:for-each select="sitemap:sitemapindex/sitemap:sitemap">
+          <div class="table-wrapper">
+            <table id="sitemapindex" class="table">
+              <thead>
                 <tr>
-                  <td>
-                    <xsl:variable name="itemURL">
-                      <xsl:value-of select="sitemap:loc"/>
-                    </xsl:variable>
-                    <a href="{\$itemURL}">
-                      <xsl:value-of select="sitemap:loc"/>
-                    </a>
-                  </td>
-                  <td>
-                    <xsl:value-of select="concat(substring(sitemap:lastmod,0,11),concat(' ', substring(sitemap:lastmod,12,5)))"/>
-                  </td>
+                  <th class="table__cell table__cell--w-85">URL</th>
+                  <th class="table__cell table__cell--w-15">Last Change</th>
                 </tr>
-              </xsl:for-each>
-            </tbody>
-          </table>
-          <p id="Footer" class="expl">Generated by the SilverStripe
-            <a href="https://github.com/wilr/silverstripe-googlesitemaps" target="_blank" title="SilverStripe Google Sitemaps module on Github">Google Sitemaps Module</a>
-            <br />More information about XML sitemaps on <a href="http://sitemaps.org" target="_blank">sitemaps.org</a>.
+              </thead>
+              <tbody>
+                <xsl:variable name="lower" select="'abcdefghijklmnopqrstuvwxyz'"/>
+                <xsl:variable name="upper" select="'ABCDEFGHIJKLMNOPQRSTUVWXYZ'"/>
+                <xsl:for-each select="sitemap:sitemapindex/sitemap:sitemap">
+                  <tr>
+                    <td class="table__cell">
+                      <xsl:variable name="itemURL">
+                        <xsl:value-of select="sitemap:loc"/>
+                      </xsl:variable>
+                      <a href="{\$itemURL}">
+                        <xsl:value-of select="sitemap:loc"/>
+                      </a>
+                    </td>
+                    <td class="table__cell">
+                      <xsl:value-of select="concat(substring(sitemap:lastmod,0,11),concat(' ', substring(sitemap:lastmod,12,5)))"/>
+                    </td>
+                  </tr>
+                </xsl:for-each>
+              </tbody>
+            </table>
+          </div>
+          <p class="content__text">
+            Generated by the Silverstripe CMS
+            <a href="https://github.com/wilr/silverstripe-googlesitemaps" target="_blank" rel="noopener noreferrer" title="SilverStripe Google Sitemaps module on Github">Google Sitemaps Module</a>
+          </p>
+          <p class="content__text">
+            More information about XML sitemaps on <a href="https://sitemaps.org" target="_blank" rel="noopener noreferrer">sitemaps.org</a>
           </p>
         </div>
       </body>