diff --git a/screenshot.png b/screenshot.png
index 0fa664a..5f27ba8 100644
Binary files a/screenshot.png and b/screenshot.png differ
diff --git a/static/css/style.css b/static/css/style.css
index 7f81d0b..a1b27ad 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1,94 +1,94 @@
 :root,
 :root.light {
-    --bgColor: #EEEEEE;
-    --fgColor: #41474E;
-    --metaColor: #D26878;
-    --headColor: #;
-    --linkColor: #5690AF;
-    --hovColor: #22453F;
-    --bgSelect: #FFFAE1;
-    --bgUrl: url(https://i.ibb.co/Qpkrw4V/tile-Light.webp) repeat;
-    --red: #D26878;
-    --dimRed: #623039;
-    --orange: #e08f67;
-    --dimOrange: #926048;
-    --yellow: #FFFAE1;
-    --dimYellow: #D5C5A1;
-    --green: #56AFA0;
-    --dimGreen: #22453F;
-    --blue: #5690AF;
-    --dimBlue: #223844;
-    --purple: #9271D6;
-    --dimPurple: #47356C;
-    --grey: #CBCDCD;
-    --dimGrey: #646868
+  --bgColor: #EEEEEE;
+  --fgColor: #41474E;
+  --metaColor: #D26878;
+  --headColor: #;
+  --linkColor: #5690AF;
+  --hovColor: #22453F;
+  --bgSelect: #FFFAE1;
+  --bgUrl: url(https://i.ibb.co/Qpkrw4V/tile-Light.webp) repeat;
+  --red: #D26878;
+  --dimRed: #623039;
+  --orange: #e08f67;
+  --dimOrange: #926048;
+  --yellow: #FFFAE1;
+  --dimYellow: #D5C5A1;
+  --green: #56AFA0;
+  --dimGreen: #22453F;
+  --blue: #5690AF;
+  --dimBlue: #223844;
+  --purple: #9271D6;
+  --dimPurple: #47356C;
+  --grey: #CBCDCD;
+  --dimGrey: #646868
 }
 
 :root.dark {
-    --bgColor: #222529;
-    --fgColor: #D6D6D6;
-    --metaColor: #78B6AD;
-    --headColor: #;
-    --linkColor: #DBD5BC;
-    --hovColor: #E2AEA2;
-    --bgSelect: #464949;
-    --bgUrl: url(https://i.ibb.co/LzrFBFJ/tileDark.webp) repeat;
-    --red: #CD909B;
-    --dimRed: #684249;
-    --orange: #E2AEA2;
-    --dimOrange: #704941;
-    --yellow: #DBD5BC;
-    --dimYellow: #6F6847;
-    --green: #78B6AD;
-    --dimGreen: #3E615C;
-    --blue: #87C9E5;
-    --dimBlue: #38494F;
-    --purple: #CEA7DE;
-    --dimPurple: #5E406A;
-    --grey: #CBCDCD;
-    --dimGrey: #464949
+  --bgColor: #222529;
+  --fgColor: #D6D6D6;
+  --metaColor: #78B6AD;
+  --headColor: #;
+  --linkColor: #DBD5BC;
+  --hovColor: #E2AEA2;
+  --bgSelect: #464949;
+  --bgUrl: url(https://i.ibb.co/LzrFBFJ/tileDark.webp) repeat;
+  --red: #CD909B;
+  --dimRed: #684249;
+  --orange: #E2AEA2;
+  --dimOrange: #704941;
+  --yellow: #DBD5BC;
+  --dimYellow: #6F6847;
+  --green: #78B6AD;
+  --dimGreen: #3E615C;
+  --blue: #87C9E5;
+  --dimBlue: #38494F;
+  --purple: #CEA7DE;
+  --dimPurple: #5E406A;
+  --grey: #CBCDCD;
+  --dimGrey: #464949
 }
 
 ::-moz-selection {
-    color: var(--bgColor);
-    background: var(--metaColor)
+  color: var(--bgColor);
+  background: var(--metaColor)
 }
 
 ::selection {
-    color: var(--bgColor);
-    background: var(--metaColor)
+  color: var(--bgColor);
+  background: var(--metaColor)
 }
 
 html {
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    font-size: 62.5%
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  font-size: 62.5%;
+  scrollbar-color: var(--metaColor) var(--bgColor);
+  scrollbar-width: thin;
 }
 
 body {
-    font-family: monospace;
-    font-size: 1.6rem;
-    line-height: 1.35;
-    max-width: 64rem;
-    margin: auto;
-    padding: 1rem;
-    overflow-wrap: break-word;
-    background: var(--bgColor);
-    color: var(--fgColor);
+  font-family: monospace;
+  font-size: 1.6rem;
+  line-height: 1.35;
+  max-width: 64rem;
+  margin: auto;
+  overflow-wrap: break-word;
+  background: var(--bgColor);
+  color: var(--fgColor);
 }
 
 h1 {
-    font-size: 2.4rem;
-    margin: 1rem 1rem 1.5rem 0;
-    color: var(--bgColor);
-    background-color: var(--metaColor);
-    text-align: center;
-    text-wrap: balance;
+  font-size: 2.4rem;
+  color: var(--bgColor);
+  background-color: var(--metaColor);
+  text-align: center;
+  text-wrap: balance;
 }
 
 h1::before {
-    color: var(--bgColor);
-    content: '# '
+  color: var(--bgColor);
+  content: '# '
 }
 
 h2::before,
@@ -96,230 +96,250 @@ h3::before,
 h4::before,
 h5::before,
 h6::before {
-    color: var(--metaColor);
-    content: '# '
+  color: var(--metaColor);
+  content: '# '
 }
 
 a {
-    color: var(--linkColor);
+  text-decoration: none;
+  padding: 0 .2rem 0 .2rem;
+  border-radius: .3rem;
+  color: var(--linkColor);
 }
 
 a:focus,
 a:hover {
-    background-color: var(--linkColor);
-    color: var(--bgColor)
+  background-color: var(--linkColor);
+  color: var(--bgColor)
 }
 
 ul {
-    list-style: none;
-    margin-top: .5rem;
-    margin-bottom: .5rem;
-    line-height: 1.45;
+  list-style: none;
+  margin-top: .5rem;
+  margin-bottom: .5rem;
+  line-height: 1.45;
 }
 
 ul li::marker {
-    content: '» ';
-    color: var(--metaColor)
+  content: '» ';
+  color: var(--metaColor)
 }
 
 ul li:hover::marker {
-    content: '# ';
-    font-weight: 700;
-    color: var(--linkColor)
-}
-
-li:hover {
-    transform: scale(1.02);
-    -webkit-transition: .1s ease-in;
-    -moz-transition: .1s ease-in;
-    -o-transition: .1s ease-in;
+  content: '# ';
+  font-weight: 700;
+  color: var(--linkColor)
 }
 
 blockquote {
-    border-left: 5px solid var(--metaColor);
-    margin: 1rem;
-    padding: 0 0 0 1rem
+  border-left: 5px solid var(--metaColor);
+  margin: 1rem;
+  padding: 0 0 0 1rem
 }
 
 textarea {
-    border: 2px dotted;
-    outline: 0;
-    resize: none;
-    overflow: auto;
-    background-color: var(--bgColor)
+  border: 2px dotted;
+  outline: 0;
+  resize: none;
+  overflow: auto;
+  background-color: var(--bgColor)
 }
 
 hr {
-    border: 1px dashed
+  border: 1px dashed
 }
 
 img {
-    max-width: 90%;
-    height: auto;
-    margin: .2rem;
-    padding: .2rem;
-    border: dashed 2px var(--metaColor);
-    border-radius: 15px
+  max-width: 90%;
+  height: auto;
+  margin: .2rem;
+  padding: .2rem;
+  border: dashed 2px var(--metaColor);
+  border-radius: 15px
 }
 
 pre {
-    border: 1px solid var(--metaColor);
-    padding: 1rem;
-    overflow-x: auto;
-    font-style: monospace;
+  border: 1px solid var(--metaColor);
+  padding: 1rem;
+  overflow-x: auto;
+  font-style: monospace;
 }
 
 p code,
 li code,
 div code {
-    color: var(--bgColor);
-    background-color: var(--fgColor);
+  padding: 0 .2rem 0 .2rem;
+  border-radius: .3rem;
+  color: var(--bgColor);
+  background-color: var(--fgColor);
 }
 
 pre code {
-    color: inherit;
-    background-color: inherit;
+  padding: 0;
+  border-radius: 0;
+  color: inherit;
+  background-color: inherit;
 }
 
 iframe {
-    max-width: 90%;
+  max-width: 90%;
 }
 
 table {
-    table-layout: fixed;
-    width: 100%;
-    border-collapse: collapse;
-    border: none;
-    margin-left: auto;
-    margin-right: auto;
-    margin-bottom: 1rem;
-    line-height: 1.1
+  table-layout: fixed;
+  width: 100%;
+  border-collapse: collapse;
+  border: none;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 1rem;
+  line-height: 1.1
 }
 
 thead th:first-child {
-    width: 20%
+  width: 20%
 }
 
 th {
-    font-weight: 400
+  font-weight: 400
 }
 
 td,
 th {
-    padding: .5rem;
-    border: dashed 1px var(--metaColor)
+  padding: .5rem;
+  border: dashed 1px var(--metaColor)
 }
 
 footer {
-    font-size: 1.4rem;
-    clear: both;
-    color: var(--footColor)
+  font-size: 1.4rem;
+  clear: both;
+  color: var(--footColor)
 }
 
 footer,
 td,
 th {
-    text-align: left
+  text-align: left
 }
 
 .metaData,
 .themeButton,
 hr,
 textarea {
-    color: var(--metaColor)
+  color: var(--metaColor)
+}
+
+/* Site Specific Styling */
+.wrapper {
+  min-height: 100vh;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  gap: 2rem;
+}
+
+/* Icons settings */
+.icons {
+  width: 2.0rem;
+  height: 2.0rem;
+  aspect-ratio: 1/1;
+  top: .3rem;
+  position: relative;
+  color: var(--fgColor);
+  fill: var(--fgColor);
+  background-color: transparent;
+}
+
+.icons__background:hover {
+  background-color: transparent;
+  color: var(--metaColor);
 }
 
 .navBar {
-    margin: .5rem;
-    margin-bottom: 2rem;
-    display: flex;
-    flex-direction: row;
-    gap: .4rem;
-    flex-wrap: wrap;
-    justify-content: flex-end;
-    align-items: center;
-    align-content: flex-end
+  padding: 1rem 0 0 0;
+  display: flex;
+  flex-direction: row;
+  gap: .4rem;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: center;
+  align-content: flex-end
 }
 
 .themeButton {
-    cursor: pointer;
-    border: none;
-    font-size: 1.8rem;
-    background-color: transparent
+  cursor: pointer;
+  border: none;
+  font-size: 1.8rem;
+  background-color: transparent
 }
 
 .dark .themeButton.dark,
 .themeButton.light {
-    display: none
+  display: none
 }
 
 .dark .themeButton.light {
-    display: block
+  display: block
 }
 
 .tagsData {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    justify-content: flex-end;
-    align-items: flex-start;
-    align-content: flex-end
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: flex-start;
+  align-content: flex-end
 }
 
 .titleList {
-    line-height: 1.8;
+  line-height: 1.8;
 }
 
 .footnote-definition {
-    margin: 0 0 0 2rem;
-}
-.footnote-definition-label {
-    color: var(--metaColor);
-}
-.footnote-definition p {
-    display: inline;
-    padding: 0 0 0 1rem;
+  margin: 0 0 0 2rem;
 }
 
-.footContainer,
-.footRight {
-    display: flex;
-    align-content: center
+.footnote-definition-label {
+  color: var(--metaColor);
+}
+
+.footnote-definition p {
+  display: inline;
+  padding: 0 0 0 1rem;
 }
 
 .footContainer {
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    align-items: flex-start
-}
-
-.footRight {
-    flex-direction: column;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: center
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
 }
 
 .noStyle {
-    padding: 0;
-    margin: 0;
-    border: none;
-    border-radius: 0
+  padding: 0;
+  margin: 0;
+  border: none;
+  border-radius: 0
 }
 
 .textCenter {
-    text-align: center;
+  text-align: center;
 }
 
 .floatRight {
-    float: right
+  float: right
 }
 
 .floatLeft {
-    float: left
+  float: left
 }
 
 .webring {
-    margin: 0.5rem;
+  margin: 0.5rem;
+}
+
+/* Add Padding */
+@media (max-width: 650px) {
+  .wrapper {
+    margin: 1rem;
+  }
 }
\ No newline at end of file
diff --git a/static/icons.svg b/static/icons.svg
new file mode 100644
index 0000000..bdf5772
--- /dev/null
+++ b/static/icons.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="rss" viewBox="0 0 24 24"><rect x="0" y="0" fill="none" stroke="none" />
+    <path fill="currentColor" d="M6.18 15.64a2.18 2.18 0 0 1 2.18 2.18C8.36 19 7.38 20 6.18 20C5 20 4 19 4 17.82a2.18 2.18 0 0 1 2.18-2.18M4 4.44A15.56 15.56 0 0 1 19.56 20h-2.83A12.73 12.73 0 0 0 4 7.27V4.44m0 5.66a9.9 9.9 0 0 1 9.9 9.9h-2.83A7.07 7.07 0 0 0 4 12.93V10.1Z"/>
+  </symbol>
+
+  <symbol id="darkMode" viewBox="0 0 24 24"><rect x="0" y="0" fill="none" stroke="none" />
+    <path fill="currentColor" d="M12 21q-3.75 0-6.375-2.625T3 12q0-3.75 2.625-6.375T12 3q.35 0 .688.025t.662.075q-1.025.725-1.638 1.888T11.1 7.5q0 2.25 1.575 3.825T16.5 12.9q1.375 0 2.525-.613T20.9 10.65q.05.325.075.662T21 12q0 3.75-2.625 6.375T12 21Z"/>
+  </symbol>
+
+  <symbol id="lightMode" viewBox="0 0 24 24"><rect x="0" y="0" fill="none" stroke="none" />
+    <path fill="currentColor" d="M12 17q-2.075 0-3.538-1.463T7 12q0-2.075 1.463-3.538T12 7q2.075 0 3.538 1.463T17 12q0 2.075-1.463 3.538T12 17ZM2 13q-.425 0-.713-.288T1 12q0-.425.288-.713T2 11h2q.425 0 .713.288T5 12q0 .425-.288.713T4 13H2Zm18 0q-.425 0-.713-.288T19 12q0-.425.288-.713T20 11h2q.425 0 .713.288T23 12q0 .425-.288.713T22 13h-2Zm-8-8q-.425 0-.713-.288T11 4V2q0-.425.288-.713T12 1q.425 0 .713.288T13 2v2q0 .425-.288.713T12 5Zm0 18q-.425 0-.713-.288T11 22v-2q0-.425.288-.713T12 19q.425 0 .713.288T13 20v2q0 .425-.288.713T12 23ZM5.65 7.05L4.575 6q-.3-.275-.288-.7t.288-.725q.3-.3.725-.3t.7.3L7.05 5.65q.275.3.275.7t-.275.7q-.275.3-.687.288T5.65 7.05ZM18 19.425l-1.05-1.075q-.275-.3-.275-.713t.275-.687q.275-.3.688-.287t.712.287L19.425 18q.3.275.288.7t-.288.725q-.3.3-.725.3t-.7-.3ZM16.95 7.05q-.3-.275-.288-.687t.288-.713L18 4.575q.275-.3.7-.288t.725.288q.3.3.3.725t-.3.7L18.35 7.05q-.3.275-.7.275t-.7-.275ZM4.575 19.425q-.3-.3-.3-.725t.3-.7l1.075-1.05q.3-.275.712-.275t.688.275q.3.275.288.688t-.288.712L6 19.425q-.275.3-.7.288t-.725-.288Z"/>
+  </symbol>
+
+  <symbol id="chevronLeft" viewBox="0 0 24 24"><rect x="0" y="0" fill="none" stroke="none" />
+    <path fill="currentColor" d="M15.41 16.58L10.83 12l4.58-4.59L14 6l-6 6l6 6l1.41-1.42Z"/>
+  </symbol>
+
+  <symbol id="chevronRight" viewBox="0 0 24 24"><rect x="0" y="0" fill="none" stroke="none" />
+    <path fill="currentColor" d="M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6l-1.41-1.42Z"/>
+  </symbol>
+</svg>
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
index e381b57..f408544 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -1,148 +1,18 @@
 <!doctype html>
 <html lang="{{ lang }}">
   <head>
-    <meta charset="UTF-8">
-    <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
-    <meta content="text/html; charset=UTF-8" http-equiv="content-type"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
-    <meta name="robots" content="index, follow">
-    {% if page.title %}
-    {% set title = page.title %}
-    {% elif section.title %}
-    {% set title = section.title %}
-    {% elif config.title %}
-    {% set title = config.title %}
-    {% endif %}
-    {% if page.extra.author %}
-    {% set author = page.extra.author %}
-    {% elif section.extra.author %}
-    {% set author = section.extra.author %}
-    {% elif config.extra.author %}
-    {% set author = config.extra.author %}
-    {% endif %}
-    {% if page.description %}
-    {% set description = page.description | truncate(length=150) %}
-    {% elif section.description %}
-    {% set description = section.description | truncate(length=150) %}
-    {% elif config.description %}
-    {% set description = config.description | truncate(length=150) %}
-    {% endif %}
-    {% if page.extra.image %}
-    {% set image = get_url(path=page.extra.image, trailing_slash=false) %}
-    {% elif section.extra.image %}
-    {% set image = get_url(path=section.extra.image, trailing_slash=false) %}
-    {% elif config.extra.favicon %}
-    {% set image = get_url(path=config.extra.favicon, trailing_slash=false) %}
-    {% endif %}
-    {% if page.permalink %}
-    {% set url = page.permalink %}
-    {% elif section.permalink %}
-    {% set url = section.permalink %}
-    {% elif config.base_url %}
-    {% set url = config.base_url %}
-    {% endif %}
-    {% if title %}
-    <title>{{ title }}</title>
-    {% endif %}
-    {% block metatags %}
-    {% if title %}
-    <meta name="title" content="{{ title }}">
-    {% endif %}
-    {% if author %}
-    <meta name="author" content="{{ author }}">
-    {% endif %}
-    {% if description %}
-    <meta name="description" content="{{ description }}">
-    {% endif %}
-    <meta property="og:type" content="website">
-    <meta property="og:url" content="{{ url | safe }}">
-    {% if title %}
-    <meta property="og:site_name" content="{{ config.title }}">
-    {% endif %}
-    {% if title %}
-    <meta property="og:title" content="{{ title }}">
-    {% endif %}
-    {% if description %}
-    <meta property="og:description" content="{{ description }}">
-    {% endif %}
-    {% if image %}
-    <meta property="og:image" content="{{ image }}">
-    {% endif %}
-    {% set twitter_card = config.extra.twitter_card | default(value=true) %}
-    {% if twitter_card != false %}
-    <meta property="twitter:card" content="summary_large_image">
-    <meta property="twitter:url" content="{{ url | safe }}">
-    {% if title %}
-    <meta property="twitter:title" content="{{ title }}">
-    {% endif %}
-    {% if description %}
-    <meta property="twitter:description" content="{{ description }}">
-    {% endif %}
-    {% if image %}
-    <meta property="twitter:image" content="{{ image }}">
-    {% endif %}
-    {% endif %}
-    <link rel="canonical" href="{{ url | safe }}">
-    {% if image %}
-    <link rel="shortcut icon" type="image/x-icon" href="{{ get_url(path=config.extra.favicon, trailing_slash=false) }}">
-    {% endif %}
-    {% endblock metatags %}
-    {% if config.generate_feed %}
-    {% block feed %}
-    <link rel="alternate" type="application/atom+xml" title="RSS" href="{{ get_url(path="atom.xml", trailing_slash=false) }}">
-    {% endblock feed %}
-    {% endif %}
-    {% block css %}
-    <link rel="stylesheet" href="{{ get_url(path='css/style.css', trailing_slash=false) | safe }}"/>
-    {% endblock css %}
+    {% include "head.html" %}
   </head>
   <body>
     <div class="wrapper">
       <header>
-        {% if config.extra.header_nav %}
-        <nav class="navBar">
-          {% for nav_item in config.extra.header_nav %}
-          {% set current_nav_item = nav_item[lang] %}
-          {% if current_nav_item and current_nav_item.name %}
-          <a href="{{ get_url(path=current_nav_item.url) }}" {% if current_nav_item.new_tab %}target="_blank" rel="noreferrer noopener"{% endif %}>{{ current_nav_item.name }}</a>
-          {% endif %}
-          {% endfor %}
-          <div class="themeSwitch">
-            <button class="themeButton light" onclick="setTheme('light')" title="Light mode">◐</button>
-            <button class="themeButton dark" onclick="setTheme('dark')" title="Dark mode">◑</button>
-          </div>
-        </nav>
-        {% endif %}
-        <script>
-          const setTheme = (theme) => {
-              document.documentElement.className = theme;
-              localStorage.setItem('theme', theme);
-          }
-          const getTheme = () => {
-              const theme = localStorage.getItem('theme');
-              theme && setTheme(theme);
-          }
-          getTheme()
-        </script>
+        {% include "header.html" %}
       </header>
       <main>
         {% block content %}{% endblock content %}
       </main>
       <footer>
-        {% block footer %}{% endblock footer %}
-        <hr>
-        <div class=footContainer>
-          <div class="footLeft">
-            <p>Licensed under <a target="_blank" rel="noopener noreferrer" href="https://fr.wikipedia.org/wiki/Licence_MIT">MIT</a><br>
-              Built with <a target="_blank" rel="noopener noreferrer" href="https://www.getzola.org">Zola</a> using <a target="_blank" rel="noopener noreferrer" href="https://github.com/Speyll/anemone">anemone</a> theme &amp; <a target="_blank" rel="noopener noreferrer" href="https://github.com/Speyll/veqev">veqev</a> colors.<br>
-            </p>
-          </div>
-          <div class="footRight">
-            <!-- Size 46x46 -->
-            <img class="footGif noStyle" loading="lazy" src="https://i.ibb.co/XYDpfcs/foot.gif" alt="footGif">
-            <a class="metaData" target="_blank" rel="noopener noreferrer" href="{{ get_url(path="atom.xml", trailing_slash=false) }}" title="Subscribe via RSS for updates.">RSS</a>
-          </div>
-        </div>
+        {% include "footer.html" %}
       </footer>
     </div>
   </body>
diff --git a/templates/blog-page.html b/templates/blog-page.html
index 0b5744b..4ab5611 100644
--- a/templates/blog-page.html
+++ b/templates/blog-page.html
@@ -1,12 +1,9 @@
 {% extends "base.html" %}
 
-{% block header %}
+{% block content %}
 <div><a href="..">..</a>/<span class="metaData">{{ page.slug }}</span></div>
 <time datetime="{{ page.date }}">Published on: <span class="metaData">{{ page.date }}</span></time>
 <h1>{{ page.title }}</h1>
-{% endblock header %}
-
-{% block content %}
 
 {% if page.toc and page.extra.toc %}
 <h2>Table of contents</h2>
@@ -35,11 +32,8 @@
 </ul>
 {% endif %}
 
-
 {{ page.content | safe }}
-{% endblock content %}
 
-{% block footer %}
 <p class="tagsData">
 {% if page.taxonomies.tags %}
 {% for tag in page.taxonomies.tags %}
@@ -47,4 +41,4 @@
 {% endfor %}
 {% endif %}
 </p>
-{% endblock footer %}
\ No newline at end of file
+{% endblock content %}
\ No newline at end of file
diff --git a/templates/footer.html b/templates/footer.html
new file mode 100644
index 0000000..2db79ef
--- /dev/null
+++ b/templates/footer.html
@@ -0,0 +1,11 @@
+<hr>
+<div class=footContainer>
+  <div class="footLeft">
+    <p>Licensed under <a target="_blank" rel="noopener noreferrer" href="https://fr.wikipedia.org/wiki/Licence_MIT">MIT</a><br>
+      Built with <a target="_blank" rel="noopener noreferrer" href="https://www.getzola.org">Zola</a> using <a target="_blank" rel="noopener noreferrer" href="https://github.com/Speyll/anemone">anemone</a> theme &amp; <a target="_blank" rel="noopener noreferrer" href="https://github.com/Speyll/veqev">veqev</a> colors.<br>
+    </p>
+  </div>
+  <div class="footRight">
+    <a class="icons__background" target="_blank" rel="noopener noreferrer" href="{{ get_url(path="atom.xml", trailing_slash=false) }}" title="Subscribe via RSS for updates."><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#rss', trailing_slash=false) | safe }}"></use></svg></a>
+  </div>
+</div>
\ No newline at end of file
diff --git a/templates/head.html b/templates/head.html
new file mode 100644
index 0000000..4055b7f
--- /dev/null
+++ b/templates/head.html
@@ -0,0 +1,94 @@
+<meta charset="UTF-8">
+<meta content="IE=edge" http-equiv="X-UA-Compatible"/>
+<meta content="text/html; charset=UTF-8" http-equiv="content-type"/>
+<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
+<meta name="robots" content="index, follow">
+{% if page.title %}
+{% set title = page.title %}
+{% elif section.title %}
+{% set title = section.title %}
+{% elif config.title %}
+{% set title = config.title %}
+{% endif %}
+{% if page.extra.author %}
+{% set author = page.extra.author %}
+{% elif section.extra.author %}
+{% set author = section.extra.author %}
+{% elif config.extra.author %}
+{% set author = config.extra.author %}
+{% endif %}
+{% if page.description %}
+{% set description = page.description | truncate(length=150) %}
+{% elif section.description %}
+{% set description = section.description | truncate(length=150) %}
+{% elif config.description %}
+{% set description = config.description | truncate(length=150) %}
+{% endif %}
+{% if page.extra.image %}
+{% set image = get_url(path=page.extra.image, trailing_slash=false) %}
+{% elif section.extra.image %}
+{% set image = get_url(path=section.extra.image, trailing_slash=false) %}
+{% elif config.extra.favicon %}
+{% set image = get_url(path=config.extra.favicon, trailing_slash=false) %}
+{% endif %}
+{% if page.permalink %}
+{% set url = page.permalink %}
+{% elif section.permalink %}
+{% set url = section.permalink %}
+{% elif config.base_url %}
+{% set url = config.base_url %}
+{% endif %}
+{% if title %}
+<title>{{ title }}</title>
+{% endif %}
+{% block metatags %}
+{% if title %}
+<meta name="title" content="{{ title }}">
+{% endif %}
+{% if author %}
+<meta name="author" content="{{ author }}">
+{% endif %}
+{% if description %}
+<meta name="description" content="{{ description }}">
+{% endif %}
+<meta property="og:type" content="website">
+<meta property="og:url" content="{{ url | safe }}">
+{% if title %}
+<meta property="og:site_name" content="{{ config.title }}">
+{% endif %}
+{% if title %}
+<meta property="og:title" content="{{ title }}">
+{% endif %}
+{% if description %}
+<meta property="og:description" content="{{ description }}">
+{% endif %}
+{% if image %}
+<meta property="og:image" content="{{ image }}">
+{% endif %}
+{% set twitter_card = config.extra.twitter_card | default(value=true) %}
+{% if twitter_card != false %}
+<meta property="twitter:card" content="summary_large_image">
+<meta property="twitter:url" content="{{ url | safe }}">
+{% if title %}
+<meta property="twitter:title" content="{{ title }}">
+{% endif %}
+{% if description %}
+<meta property="twitter:description" content="{{ description }}">
+{% endif %}
+{% if image %}
+<meta property="twitter:image" content="{{ image }}">
+{% endif %}
+{% endif %}
+<link rel="canonical" href="{{ url | safe }}">
+{% if image %}
+<link rel="shortcut icon" type="image/x-icon" href="{{ get_url(path=config.extra.favicon, trailing_slash=false) }}">
+{% endif %}
+{% endblock metatags %}
+{% if config.generate_feed %}
+{% block feed %}
+<link rel="alternate" type="application/atom+xml" title="RSS" href="{{ get_url(path="atom.xml", trailing_slash=false) }}"> 
+{% endblock feed %}
+{% endif %}
+{% block css %}
+<link rel="stylesheet" href="{{ get_url(path='css/style.css', trailing_slash=false) | safe }}"/>
+{% endblock css %}
\ No newline at end of file
diff --git a/templates/header.html b/templates/header.html
new file mode 100644
index 0000000..a92f728
--- /dev/null
+++ b/templates/header.html
@@ -0,0 +1,25 @@
+{% if config.extra.header_nav %}
+<nav class="navBar">
+  {% for nav_item in config.extra.header_nav %}
+  {% set current_nav_item = nav_item[lang] %}
+  {% if current_nav_item and current_nav_item.name %}
+  <a href="{{ get_url(path=current_nav_item.url) }}" {% if current_nav_item.new_tab %}target="_blank" rel="noreferrer noopener"{% endif %}>{{ current_nav_item.name }}</a>
+  {% endif %}
+  {% endfor %}
+  <div class="themeSwitch">
+    <button class="themeButton light" onclick="setTheme('light')" title="Light mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#lightMode', trailing_slash=false) | safe }}"></use></svg></button>
+    <button class="themeButton dark" onclick="setTheme('dark')" title="Dark mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#darkMode', trailing_slash=false) | safe }}"></use></svg></button>
+  </div>
+</nav>
+{% endif %}
+<script>
+  const setTheme = (theme) => {
+      document.documentElement.className = theme;
+      localStorage.setItem('theme', theme);
+  }
+  const getTheme = () => {
+      const theme = localStorage.getItem('theme');
+      theme && setTheme(theme);
+  }
+  getTheme()
+</script>
\ No newline at end of file
diff --git a/templates/page.html b/templates/page.html
index 47da2a2..a823465 100644
--- a/templates/page.html
+++ b/templates/page.html
@@ -1,10 +1,7 @@
 {% extends "base.html" %}
 
-{% block header %}
-<h1>{{ page.title }}</h1>
-{% endblock header %}
-
 {% block content %}
+<h1>{{ page.title }}</h1>
 
 {% if page.toc and page.extra.toc %}
 <h2>Table of contents</h2>
@@ -34,9 +31,7 @@
 {% endif %}
 
 {{ page.content | safe }}
-{% endblock content %}
 
-{% block footer %}
 <p class="tagsData">
 {% if page.taxonomies.tags %}
 {% for tag in page.taxonomies.tags %}
@@ -44,4 +39,4 @@
 {% endfor %}
 {% endif %}
 </p>
-{% endblock footer %}
\ No newline at end of file
+{% endblock content %}
\ No newline at end of file
diff --git a/templates/section.html b/templates/section.html
index f2e52eb..e7ceb77 100644
--- a/templates/section.html
+++ b/templates/section.html
@@ -1,10 +1,8 @@
 {% extends "base.html" %}
 
-{% block header %}
-<h1>{{ section.title }}</h1>
-{% endblock header %}
-
 {% block content %}
+<h1>{{ section.title }}</h1>
+
 {{ section.content | safe }}
 
 {% if paginator %}
diff --git a/templates/shortcodes/webring.html b/templates/shortcodes/webring.html
index f5e94d3..a9a65f2 100644
--- a/templates/shortcodes/webring.html
+++ b/templates/shortcodes/webring.html
@@ -1,4 +1,4 @@
 <span class="webring">
-<a href={{prev}}>⇱</a> 
+<a class="icons__background" href={{prev}}><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#chevronLeft', trailing_slash=false) | safe }}"></use></svg></a> 
 <a href={{webring}}>{{webringName}}</a> 
-<a href={{next}}>⇲</a></span>
\ No newline at end of file
+<a class="icons__background" href={{next}}><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#chevronRight', trailing_slash=false) | safe }}"></use></svg></a></span>
\ No newline at end of file
diff --git a/templates/tags/list.html b/templates/tags/list.html
index 5d0dc78..662769e 100644
--- a/templates/tags/list.html
+++ b/templates/tags/list.html
@@ -1,10 +1,7 @@
 {% extends "base.html" %}
 
-{% block header %}
-<h1>{{ taxonomy.name }}</h1>
-{% endblock header %}
-
 {% block content %}
+<h1>{{ taxonomy.name }}</h1>
 <p>
 {% for term in terms %}
 <a href="{{ term.permalink | safe }}">#{{ term.name }}</a>[{{ term.pages | length }}]
diff --git a/templates/tags/single.html b/templates/tags/single.html
index 5e0e437..e143303 100644
--- a/templates/tags/single.html
+++ b/templates/tags/single.html
@@ -1,10 +1,7 @@
 {% extends "base.html" %}
 
-{% block header %}
-<h1>{{ term.name }}</h1>
-{% endblock header %}
-
 {% block content %}
+<h1>{{ term.name }}</h1>
 {% if paginator %}
 {% set pages = paginator.pages %}
 {% else %}