diff --git a/src/thsf/static/css/colors.css b/src/thsf/static/css/colors.css
new file mode 100644
index 0000000..47b860c
--- /dev/null
+++ b/src/thsf/static/css/colors.css
@@ -0,0 +1,49 @@
+@font-face {
+  font-family: pfdintextcomppromedium;
+  src: url(../fonts/PFDinTextCompPro-Medium.ttf);
+}
+
+@font-face {
+  font-family: pfdintextcompprothin;
+  src: url(../fonts/PFDinTextCompPro-Thin.ttf);
+}
+
+:root {
+  --main-bg-color: #e6007e;
+  --alt-bg-color: #E59730;
+  --alt2-bg-color: #9EBF43;
+  --alt3-bg-color: #3096E5;
+  --main-color: #ffffff;
+  --alt-main-color: #1A000D;
+}
+
+.white {
+  color: var(--main-color);
+}
+
+.black {
+  color: var(--alt-main-color);
+}
+
+.thin {
+  font-family: pfdintextcompprothin;
+}
+
+.bold {
+  font-family: pfdintextcomppromedium;
+}
+
+.bg1 {
+  background-color: var(--alt-bg-color);
+  border-color: var(--alt-bg-color);
+}
+
+.bg2 {
+  background-color: var(--alt2-bg-color);
+  border-color: var(--alt2-bg-color);
+}
+
+.bg3 {
+  background-color: var(--alt3-bg-color);
+  border-color: var(--alt3-bg-color);
+}
diff --git a/src/thsf/static/css/custom.css b/src/thsf/static/css/custom.css
new file mode 100644
index 0000000..f997125
--- /dev/null
+++ b/src/thsf/static/css/custom.css
@@ -0,0 +1,59 @@
+.logo {
+  width: inherit;
+}
+
+.header {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  gap: 0;
+  text-align: center;
+  font-size: 9.75em;
+  font-weight: bold;
+  padding: 0;
+}
+
+.header > span {
+  margin: 0;
+}
+
+.subheader {
+  margin: -1em 0 0 0;
+  font-size: 3.47em;
+}
+
+.place {
+  margin: 0;
+  font-size: 2.145em;
+}
+
+.important {
+  font-family: pfdintextcomppromedium;
+}
+
+.left {
+  float: left;
+  margin-right: 0.5em;
+}
+
+.right {
+  float: right;
+  margin-left: 0.5em;
+}
+
+.logo_partner {
+  max-width: 250px;
+  max-height: 250px;
+  margin: 1em;
+}
+
+.button {
+  font-size: 2.5em;
+  transition-property: color;
+  transition-duration: 1s;
+}
+
+.button:hover {
+  color: var(--main-color);
+  cursor: pointer;
+}
diff --git a/src/thsf/static/css/elements.css b/src/thsf/static/css/elements.css
new file mode 100644
index 0000000..b5a7f2e
--- /dev/null
+++ b/src/thsf/static/css/elements.css
@@ -0,0 +1,18 @@
+a {
+  font-family: pfdintextcomppromedium;
+  font-weight: 250;
+  color: var(--alt-main-color);
+  transition-property: color;
+  transition-duration: 1s;
+  text-decoration: wavy;
+}
+
+a:hover {
+  color: var(--main-color);
+  cursor: pointer;
+}
+
+.content > p,
+.content > h2 {
+  margin-top: 0.5em;
+}
diff --git a/src/thsf/static/css/planning.css b/src/thsf/static/css/planning.css
index c755133..561bdaa 100644
--- a/src/thsf/static/css/planning.css
+++ b/src/thsf/static/css/planning.css
@@ -1,12 +1,3 @@
-#schedule {
-  margin: 2em 0 2em;
-  font-size: 2em;
-  font-family: pfdintextcompprothin;
-  color: var(--main-color);
-  width: 20em;
-  text-align:justify;
-  text-justify:inter-word;
-}
 
 .slot {
   display: flex;
@@ -15,7 +6,6 @@
   text-align: center;
   flex-direction: row;
   margin: 0.3em 0;
-  width: 20em;
 }
 
 .slot_info,
diff --git a/src/thsf/static/css/style.css b/src/thsf/static/css/style.css
index 12a2649..354e6f5 100644
--- a/src/thsf/static/css/style.css
+++ b/src/thsf/static/css/style.css
@@ -1,22 +1,3 @@
-@font-face {
-  font-family: pfdintextcomppromedium;
-  src: url(../fonts/PFDinTextCompPro-Medium.ttf);
-}
-
-@font-face {
-  font-family: pfdintextcompprothin;
-  src: url(../fonts/PFDinTextCompPro-Thin.ttf);
-}
-
-:root {
-  --main-bg-color: #e6007e;
-  --alt-bg-color: #E59730;
-  --alt2-bg-color: #9EBF43;
-  --alt3-bg-color: #3096E5;
-  --main-color: #ffffff;
-  --alt-main-color: #1A000D;
-}
-
 * {
   box-sizing: border-box;
 }
@@ -24,158 +5,10 @@
 body {
   background-color: var(--main-bg-color);
   font-family: pfdintextcomppromedium;
-  text-align: center;
-}
-
-.white {
-  color: var(--main-color);
-}
-
-.black {
-  color: var(--alt-main-color);
-}
-
-.thin {
-  font-family: pfdintextcompprothin;
-}
-
-.bold {
-  font-family: pfdintextcomppromedium;
-}
-
-.button {
-  font-size: 2.5em;
-  transition-property: color;
-  transition-duration: 1s;
-}
-
-.button:hover {
-  color: var(--main-color);
-  cursor: pointer;
-}
-
-.logo {
-  width: inherit;
-}
-
-.bg1 {
-  background-color: var(--alt-bg-color);
-  border-color: var(--alt-bg-color);
-}
-
-.bg2 {
-  background-color: var(--alt2-bg-color);
-  border-color: var(--alt2-bg-color);
-}
-
-.bg3 {
-  background-color: var(--alt3-bg-color);
-  border-color: var(--alt3-bg-color);
-}
-
-a {
-  font-family: pfdintextcomppromedium;
-  font-weight: 250;
-  color: var(--alt-main-color);
-  transition-property: color;
-  transition-duration: 1s;
-  text-decoration: wavy;
-}
-
-a:hover {
-  color: var(--main-color);
-  cursor: pointer;
-}
-
-#main_wrapper {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   align-content: center;
-  margin-bottom: 5em;
-}
-
-#center_wrapper, #header_wrapper {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-#header {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  gap: 0;
   text-align: center;
-  font-size: 9.75em;
-  font-weight: bold;
-  padding: 0;
-}
-
-#header > span {
-  margin: 0;
-}
-
-#subheader {
-  margin: -1em 0 0 0;
-  font-size: 3.47em;
-}
-
-#place {
-  margin: 0;
-  font-size: 2.145em;
-}
-
-#logo_wrapper {
-  margin-top: 1em;
-  width: 40em;
-}
-
-#navbar_wrapper {
-  position: fixed;
-  bottom: 0;
-  padding: 1em 0;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  gap: 2em;
-  background-color: var(--main-bg-color);
-  width: 100vw;
-}
-
-#blah {
-  margin: 2em 0 2em;
-  font-size: 2em;
-  font-family: pfdintextcompprothin;
-  color: var(--main-color);
-  width: 20em;
-  text-align:justify;
-  text-justify:inter-word;
-}
-
-#blah > p, #blah.h2 {
-  margin-top: 0.5em;
-}
-
-.important {
-  font-family: pfdintextcomppromedium;
-}
-
-.left {
-  float: left;
-  margin-right: 0.5em;
-}
-
-.right {
-  float: right;
-  margin-left: 0.5em;
-}
-
-.logo_partner {
-  max-width: 250px;
-  max-height: 250px;
-  margin: 1em;
 }
diff --git a/src/thsf/static/css/wrappers.css b/src/thsf/static/css/wrappers.css
new file mode 100644
index 0000000..74c459b
--- /dev/null
+++ b/src/thsf/static/css/wrappers.css
@@ -0,0 +1,45 @@
+.page_wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  align-content: center;
+  text-align: center;
+  padding-bottom: 5em;
+}
+
+.center_wrapper,
+.header_wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.logo_wrapper {
+  margin-top: 1em;
+  width: 40em;
+}
+
+.navbar_wrapper {
+  position: fixed;
+  bottom: 0;
+  padding: 1em 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 2em;
+  background-color: var(--main-bg-color);
+  width: 100vw;
+}
+
+.content {
+  font-size: 2em;
+  font-family: pfdintextcompprothin;
+  color: var(--main-color);
+  width: 20em;
+  text-align:justify;
+  text-justify: inter-word;
+}
diff --git a/src/thsf/templates/base.html b/src/thsf/templates/base.html
index 0d099bf..3b2096d 100644
--- a/src/thsf/templates/base.html
+++ b/src/thsf/templates/base.html
@@ -4,6 +4,14 @@
   <title>THSF 2023: S/Extraire</title>
   <meta name="viewport" content="initial-scale=1.0">
   <meta http-equiv="content-type" content="text/html; charset=utf-8">
+  <link rel="stylesheet"
+        href="{{ url_for('static', filename='css/colors.css') }}">
+  <link rel="stylesheet"
+        href="{{ url_for('static', filename='css/wrappers.css') }}">
+  <link rel="stylesheet"
+        href="{{ url_for('static', filename='css/custom.css') }}">
+  <link rel="stylesheet"
+        href="{{ url_for('static', filename='css/elements.css') }}">
   <link rel="stylesheet"
         href="{{ url_for('static', filename='css/style.css') }}">
   <link rel="stylesheet"
@@ -20,24 +28,24 @@
 </head>
 
 <body>
-  <div id="main_wrapper">
-    <div id="center_wrapper">
-      <div id="header_wrapper">
-        <div id="header">
+  <div class="page_wrapper">
+    <div class="center_wrapper">
+      <div class="header_wrapper">
+        <div class="header">
             <span class="black bold">THSF</span>
             <span class="white thin">2023</span>
         </div>
-        <div id="subheader">
+        <div class="subheader">
           <span class="white thin">Toulouse Hacker Space Factory</span>
         </div>
-        <div id="place">
+        <div class="place">
           <span class="black thin">26 28 mai 2023 - </span>
           <span class="white bold">CINÉMA UTOPIA BORDEROUGE</span>
         </div>
       </div>
       {% block content %}
       {% endblock %}
-      <div id="#partners">
+      <div class="partners">
         <a href="https://www.tetalab.org/">
           <img src="{{ url_for('static', filename='images/tetalab.png')}}"
                alt="Tetalab"
@@ -65,9 +73,9 @@
         </a>
       </div>
     </div>
+    {% block navbar %}
+    {% include "navbar.html" %}
+    {% endblock %}
   </div>
-{% block navbar %}
-{% include "navbar.html" %}
-{% endblock %}
 </body>
 </html>
diff --git a/src/thsf/templates/goodies.html b/src/thsf/templates/goodies.html
index 3468e97..69a4bcc 100644
--- a/src/thsf/templates/goodies.html
+++ b/src/thsf/templates/goodies.html
@@ -1,12 +1,12 @@
 {% extends "base.html" %}
 {% block content %}
-      <div id="logo_wrapper">
+      <div class="logo_wrapper">
         <img class="logo"
             src="{{ url_for('static', filename='images/logo.svg') }}"
             alt="THSF 2023 - S/Extraire"
             title="THSF 2023 - S/Extraire">
       </div>
-      <div id="blah" class="goodies">
+      <div class="content" class="goodies">
         <h2>Nous avons besoin de votre soutien</h2>
         <p>
           Nous avons besoin de <a href="https://www.leetchi.com/c/thsf23">votre soutien financier</a> pour faire du <strong>Toulouse Hacker Space Factory</strong> un événement toujours différent des autres festivals. Ainsi, comme chaque année, nous faisons venir des artistes, des associations, des conférenciers, mais cela nécessite des frais importants pour leur transport et leur hébergement. C'est pourquoi nous sollicitons votre aide pour couvrir ces coûts et garantir le succès du <strong>THSF</strong>.
diff --git a/src/thsf/templates/index.html b/src/thsf/templates/index.html
index 2bd6c35..21fe55d 100644
--- a/src/thsf/templates/index.html
+++ b/src/thsf/templates/index.html
@@ -1,12 +1,12 @@
 {% extends "base.html" %}
 {% block content %}
-      <div id="logo_wrapper">
+      <div class="logo_wrapper">
         <img class="logo"
             src="{{ url_for('static', filename='images/logo.svg') }}"
             alt="THSF 2023 - S/Extraire"
             title="THSF 2023 - S/Extraire">
       </div>
-      <div id="blah">
+      <div class="content">
         <h2>Le T.H.S.F est enfin de retour !</h2>
         <p>Nous vous invitons à passer un week-end de 3 jours à <a href="https://www.cinemas-utopia.org/toulouse/">Utopia Borderouge Toulouse</a> pour partager avec vous nos projets, nos réflexions, nos performances, nos poésies et nos doutes sur la technologie.</p>
 
diff --git a/src/thsf/templates/navbar.html b/src/thsf/templates/navbar.html
index 34e8826..d0fb762 100644
--- a/src/thsf/templates/navbar.html
+++ b/src/thsf/templates/navbar.html
@@ -1,4 +1,4 @@
-  <div id="navbar_wrapper">
+  <div class="navbar_wrapper">
   {% for item in navbar %}
     <i class="button tooltip black {{ item.classes }}"
       onclick="document.location='{{item.url}}'">
diff --git a/src/thsf/templates/planning.html b/src/thsf/templates/planning.html
index ad5335c..9fa9c5b 100644
--- a/src/thsf/templates/planning.html
+++ b/src/thsf/templates/planning.html
@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 {% block content %}
-      <div id="schedule">
+      <div class="content">
         {% for slot in slots %}
           {% if filter %}
             {% if slot.submission_type.en | lower in filter %}