diff --git a/templates/base.html b/templates/base.html
index a1800eb..3abdbad 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -1,4 +1,4 @@
-<header>UniSquat</header>
+<div class="flex"><header>UniSquat</header></div>
 <style>
     :root {
         --bg: #191919;
@@ -8,25 +8,21 @@
         --hl: #8080ff;
     }
 
-    * {
+    body {
         background: var(--bg);
-        padding-left: 5px;
-        padding-right: 5px;
+		margin: 0px;
+		padding: 0px;
         font-family: "ubuntu", "sans";
         color: var(--fg);
     }
 
     header {
         background: var(--hl);
+		display: inline-block;
         font-size: 250%;
+		width: 100%;
         font-weight: lighter;
         text-align: center;
-        margin: 10px;
-        margin-left: calc(-50vw + 50%);
-        margin-right: calc(-50vw + 50%);
-        margin-top: calc(-50vw + 50%);
-        padding-top: 20px;
-        padding-bottom: 5px;
     }
 
     main {
@@ -97,18 +93,52 @@
         font-size: 80%;
     }
 
-    button, input {
+    input[type="submit"]{
         background: var(--bg-light);
         border-style: solid;
         border-width: 1px;
         border-color: var(--bg);
-        padding: 10px;
+        padding: 20px;
         border-radius: 10px;
+		transition: background 0.1s;
+    }
+    
+    input[type="submit"]:hover {
+        background: var(--bg-dark);
     }
 
-    input checkbox {
-        margin-bottom: 5px;
-    }
+	input[type="checkbox"] {
+		display: none;
+		width: 0px;
+		height: 0px;
+	}
+
+	.flex {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: center;
+	}
+
+	input[type="checkbox"]:hover + label {
+		background: var(--bg-dark);
+	}
+
+	input[type="checkbox"]:checked + label {
+		background: var(--hl);
+	}
+	
+	input[type="checkbox"] + label {
+		background: var(--bg-light);
+		transition: background 0.1s;
+		display: inline-block;
+		width: 200px;
+		height: 80px;
+		padding: 10px;
+		margin: 10px;
+		text-align: center;
+        border-radius: 15px;
+  		box-shadow: 5px 5px black;
+	}
 
     .done {
         background: var(--bg-dark);
@@ -128,4 +158,4 @@
 
     @media screen and (max-width: 769px) {
     }
-</style>
\ No newline at end of file
+</style>
diff --git a/templates/dept-select.html b/templates/dept-select.html
index 684ea39..f9624cd 100644
--- a/templates/dept-select.html
+++ b/templates/dept-select.html
@@ -9,16 +9,20 @@
   <body>
     {% include "base.html" %}
     <main>
-      Sélectionnez des départements dans la liste :
+		
+		<div class="flex"><p>Sélectionnez des départements dans la liste :</p></div>
       <form action="/app/free-rooms" method="get">
-        <input type="submit" value="Valider">
-        <br>
-        {% for d in dept_list : %}
-        <div>
-          <input type="checkbox" id="{{ d.ident }}" name="dept" value="{{ d.ident }}">
-            <label for="{{ d.ident }}">{{ d.name }}</label>
-        </div>
-        {% endfor %}
+		<div class="flex">
+        	<input type="submit" value="Valider">
+		</div>
+		<div class="flex">
+        	{% for d in dept_list : %}
+        		<div>
+          		<input type="checkbox" id="{{ d.ident }}" name="dept" value="{{ d.ident }}">
+            		<label for="{{ d.ident }}">{{ d.name }}</label>
+        		</div>
+			{% endfor %}
+		</div>
       </form>
     </main>
     <footer></footer>
