diff --git a/mycaldav/templates/reskreen.html b/mycaldav/templates/reskreen.html
index 86aa11b..f862d70 100644
--- a/mycaldav/templates/reskreen.html
+++ b/mycaldav/templates/reskreen.html
@@ -1,11 +1,39 @@
 
 <html>
 <style>
+    body span{
+        color:white;
+        font-family: 'Source Sans Pro', sans-serif;
+        font-size: 20px;
+        font-weight: bold;
+    }
     .div_container{
+        display: flex;
+        flex-wrap: wrap;
+         justify-content: space-between;
+        width: 100%
+        height: 100%;
+    }
+    .div_item{
         border: 1px solid #1e1e1e;
+        flex-grow: 1;
+        padding: 10px;
+        border: 2px ridge #FFFFFF;
+        border-radius: 28px;
+        margin: 5px;
+
+    }
+
+    .top_container{
+        display: flex;
+        height: 115px;
+        align-content: flex-start;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: space-between;
     }
     .main_div{
-        height: 430px;
+        height: 400px;
         padding: 10px;
         width: 30%;
     }
@@ -19,21 +47,31 @@
     }
 </style>
 <body style="background-color:black">
-    <div style="width: 100%;" class="div_container">
-        <div style="float:left; width:50%"><iframe src="https://www.zeitverschiebung.net/clock-widget-iframe-v2?language=fr&size=medium&timezone=Europe%2FZurich" width="100%" height="115" frameborder="0" scrolling="no" seamless ></iframe></div>
-        <div style="float:right; width:50%"><a class="weatherwidget-io" href="https://forecast7.com/fr/46d256d95/monthey/" data-label_1="MONTHEY" data-label_2="METEO" data-days="3" data-theme="dark" >MONTHEY METEO</a>
+    <div style="width: 100%;" class="top_container">
+        <div style="width: 300px; display: flex;flex-grow: 1;align-content: stretch;justify-content:flex-start;">
+            <div style="display: flex; align-items: center;justify-content: space-between;width: 250px;">
+                <img style="width:71px;" src="https://prod.resk-u.ch/logos/logo_clerc_200.png">
+                <span>Ambulance Clerc</span>
+            </div>
+            <div>
+                <iframe src="https://www.zeitverschiebung.net/clock-widget-iframe-v2?language=fr&size=medium&timezone=Europe%2FZurich" width="100%" height="115" frameborder="0" scrolling="no" seamless ></iframe>
+            </div>
+
+        </div>
+
+        <div style="width: 500px; height: 115px; "><a class="weatherwidget-io" href="https://forecast7.com/fr/46d256d95/monthey/" data-label_1="MONTHEY" data-label_2="METEO" data-days="3" data-theme="dark" >MONTHEY METEO</a>
             <script>
             !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');
             </script>
         </div>
-<div style="clear: both"></div>
+
     </div>
-    <div>
-        <div style="float:left;" class="div_container main_div">
+    <div class="div_container">
+        <div style="" class="div_item main_div">
             <p style="">Équipage</p>
             <iframe style="border:0;width:100%;height:100%;color:white" src="https://rh.ambulance-clerc.ch/caldav/team"></iframe>
         </div>
-        <div style="float:left;" class="div_container main_div">
+        <div style="" class="div_item main_div">
             <div style="height: 50%">
                 <p style="">Restrictions routières</p>
                 <iframe scrolling="no" style="border:0;width:100%;height:100%" src="https://rh.ambulance-clerc.ch/caldav/road"></iframe>
@@ -44,26 +82,25 @@
         </div>
 
         </div>
-        <div style="float:left;" class="div_container main_div">
+        <div style="" class="div_item main_div">
             <p style="">Agenda véhicules</p>
            <iframe style="border:0;width:100%;height:100%" src="https://rh.ambulance-clerc.ch/caldav/vhc"></iframe>
         </div>
-    </div>
-<div style="clear: both"></div>
- <div>
-        <div style="float:left;" class="div_container main_div">
+         <div style="" class="div_item main_div">
             <p style="">Accueil</p>
             <iframe scrolling="no" style="border:0;width:100%;height:100%" src="https://rh.ambulance-clerc.ch/caldav/rh"></iframe>
         </div>
-        <div style="float:left;" class="div_container main_div">
+        <div style="" class="div_item main_div">
             <p style="">Tâches à faire</p>
             <iframe scrolling="no" style="border:0;width:100%;height:100%" src="https://rh.ambulance-clerc.ch/caldav/task"></iframe>
         </div>
-        <div style="float:left;" class="div_container main_div">
-                <p style="">Communications importantes</p>
-                <iframe scrolling="no" style="border:0;width:100%;height:100%" src="https://rh.ambulance-clerc.ch/caldav/road"></iframe>
-            </div>
+        <div style="" class="div_item main_div">
+            <p style="">Communications importantes</p>
+            <iframe scrolling="no" style="border:0;width:100%;height:100%" src="https://rh.ambulance-clerc.ch/caldav/road"></iframe>
+        </div>
     </div>
-<div style="clear: both"></div>
+
+
+
 </body>
 </html>
