diff --git a/static/css/garbaye_custom.css b/static/css/garbaye_custom.css
new file mode 100644
index 0000000..fe1d4aa
--- /dev/null
+++ b/static/css/garbaye_custom.css
@@ -0,0 +1,61 @@
+:root {
+    --primary-color: #255a0e;
+    --primary-text-color: #060f02;
+    --primary-link-color: #3F9718;
+    --secondary-color: #f1f7ee;
+    --secondary-text-color: #060f02;
+    --secondary-title-color: #3F9718;
+    --toc-highlight-text-color: #3F9718;
+}
+.hero,header {
+    --primary-text-color: #d8ead0;
+    --primary-link-color: #a8baa0;
+}
+.hero a {
+    color: var(--primary-link-color)
+}
+.hero a:visited {
+    color: var(--primary-text-color);
+}
+.hero a:hover {
+    text-decoration: underline;
+    color: var(--primary-text-color);
+}
+header .nav-item:hover {
+    text-decoration: underline;
+    color: var(--primary-text-color);
+}
+.logo img {
+    width: 41px;
+}
+.hero .text-center .heading-text {
+    font-family: "Alfa Slab One", serif;
+}
+@font-face {
+  font-family: 'Fira Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(/fonts/va9E4kDNxMZdWfMOD5Vvl4jO.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Fira Sans';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url(/fonts/va9B4kDNxMZdWfMOD5VnZKveRhf_.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Fira Sans';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(/fonts/va9B4kDNxMZdWfMOD5VnSKzeRhf_.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Alfa Slab One';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(/fonts/6NUQ8FmMKwSEKjnm5-4v-4Jh2dJhfg.ttf) format('truetype');
+}
diff --git a/templates/_variables.html b/templates/_variables.html
index 8190c83..e69de29 100644
--- a/templates/_variables.html
+++ b/templates/_variables.html
@@ -1,63 +0,0 @@
-<style>
-  :root {
-      --primary-color: #255a0e;
-      --primary-text-color: #060f02;
-      --primary-link-color: #3F9718;
-      --secondary-color: #f1f7ee;
-      --secondary-text-color: #060f02;
-      --secondary-title-color: #3F9718;
-      --toc-highlight-text-color: #3F9718;
-  }
-  .hero,header {
-      --primary-text-color: #d8ead0;
-      --primary-link-color: #a8baa0;
-  }
-  .hero a {
-      color: var(--primary-link-color)
-  }
-  .hero a:visited {
-      color: var(--primary-text-color);
-  }
-  .hero a:hover {
-      text-decoration: underline;
-      color: var(--primary-text-color);
-  }
-  header .nav-item:hover {
-      text-decoration: underline;
-      color: var(--primary-text-color);
-  }
-  .logo img {
-      width: 41px;
-  }
-  .hero .text-center .heading-text {
-      font-family: "Alfa Slab One", serif;
-  }
-@font-face {
-  font-family: 'Fira Sans';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(/fonts/va9E4kDNxMZdWfMOD5Vvl4jO.ttf) format('truetype');
-}
-@font-face {
-  font-family: 'Fira Sans';
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url(/fonts/va9B4kDNxMZdWfMOD5VnZKveRhf_.ttf) format('truetype');
-}
-@font-face {
-  font-family: 'Fira Sans';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url(/fonts/va9B4kDNxMZdWfMOD5VnSKzeRhf_.ttf) format('truetype');
-}
-@font-face {
-  font-family: 'Alfa Slab One';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(/fonts/6NUQ8FmMKwSEKjnm5-4v-4Jh2dJhfg.ttf) format('truetype');
-}
-</style>
diff --git a/templates/index.html b/templates/index.html
index 20e44c5..ab85244 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -7,10 +7,11 @@
     <title>{% block title %}{{ config.title }}{% endblock title %}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     {% block favicon %}
-    <link rel="icon" type="image/png" href="/images/favicon.ico">
+    <link rel="icon" type="image/png" href="{{ get_url(path="/images/favicon.ico") }}">
     {% endblock favicon %}
-    <link rel="stylesheet" href="/normalize.css">
+    <link rel="stylesheet" href="{{ get_url(path="normalize.css") }}">
     <link rel="stylesheet" href="{{ get_url(path="juice.css") }}">
+    <link rel="stylesheet" href="{{ get_url(path="css/garbaye_custom.css") }}">
     {% include "_variables.html" %}
     {% block head %}
     {% endblock head %}
@@ -31,7 +32,7 @@
               Garbaye : Services numériques libres<br>
             </h1>
             <h3 class="title-text">Basé en Gironde, nous auto-hébergeons des services pour tous, dans un souci d'éthique et de décentralisation du web.</h3>
-	    <a href="https://www.chatons.org/"><img class="hero-image" style="width: 12%" src="images/logo_chatons_v3.1_512px.png"></a>
+	    <a href="https://www.chatons.org/"><img class="hero-image" style="width: 12%" src="{{ get_url(path="images/logo_chatons_v3.1_512px.png") }}"></a>
 
 	    <div class="text"><a href="mailto:contact [arobase] garbaye [point] fr">Courriel</a> - <a href="https://matrix.to/#/#garbaye:garbaye.fr">Matrix [m]</a> - <a href="https://framagit.org/garbaye/">Git</a></div>
         </section>