diff --git a/assets/app.js b/assets/app.js
index 8725cc5..883dec4 100644
--- a/assets/app.js
+++ b/assets/app.js
@@ -5,6 +5,6 @@ import './bootstrap.js';
  * This file will be included onto the page via the importmap() Twig function,
  * which should already be in your base.html.twig.
  */
-import './styles/app.css';
+import './styles/css/app.css';
 
 console.log('This log comes from assets/app.js - welcome to AssetMapper! 🎉');
diff --git a/assets/styles/app.css b/assets/styles/css/app.css
similarity index 100%
rename from assets/styles/app.css
rename to assets/styles/css/app.css
diff --git a/assets/styles/css/calendrierChauffagiste.css b/assets/styles/css/calendrierChauffagiste.css
new file mode 100644
index 0000000..e69de29
diff --git a/assets/styles/css/calendrierSecretaire.css b/assets/styles/css/calendrierSecretaire.css
new file mode 100644
index 0000000..e69de29
diff --git a/assets/styles/css/intervention.css b/assets/styles/css/intervention.css
new file mode 100644
index 0000000..e69de29
diff --git a/assets/styles/css/login.css b/assets/styles/css/login.css
new file mode 100644
index 0000000..2b86d9d
--- /dev/null
+++ b/assets/styles/css/login.css
@@ -0,0 +1,67 @@
+body {
+    width: 1500px;
+    height: 1000px;
+
+    background: linear-gradient(#A0C2C8, #A6CD9E);
+}
+
+.logo {
+    position: absolute;
+    margin: -3% 0 0 1%;
+    height: 30%;
+}
+
+.titre {        /*pas fini*/
+    margin: 4% 10% 0 25%;
+    font-weight: 50;
+    font-size: 450%;
+}
+
+.background {
+    position: absolute;
+    width: 50%;
+    height: 50%;
+    left: 25%;
+    top: 25%;
+
+    background: rgba(36, 60, 64, 0.7);
+}
+
+
+.logoEmail {
+    position: absolute;
+    margin: 6.5% 0 0 31%;
+    height: 12%;
+    background: #243C40;
+}
+.email {
+    position: absolute;
+    margin: 7% 0 0 37.5%;
+    width: 30%;
+    height: 9.5%;
+    background-color: #f0f0f0;
+}
+
+.logoPassword {
+    position: absolute;
+    margin: 16.5% 0 0 31%;
+    height: 12%;
+    background: #243C40;
+}
+.password {
+    position: absolute;
+    margin: 17% 0 0 37.5%;
+    width: 30%;
+    height: 9.5%;
+    background-color: #f0f0f0;
+}
+
+/*forgot password*/
+.forgot {
+    position: absolute;
+    margin: 23.5% 0 0 42.5%;
+    font-size: 130%;
+    color: #f0f0f0;
+}
+
+
diff --git a/assets/styles/image/1.png b/assets/styles/image/1.png
new file mode 100644
index 0000000..99bb380
Binary files /dev/null and b/assets/styles/image/1.png differ
diff --git a/assets/styles/image/2.png b/assets/styles/image/2.png
new file mode 100644
index 0000000..87dd915
Binary files /dev/null and b/assets/styles/image/2.png differ
diff --git a/assets/styles/image/LogoHegreConfort_SansFond.png b/assets/styles/image/LogoHegreConfort_SansFond.png
new file mode 100644
index 0000000..bd78f17
Binary files /dev/null and b/assets/styles/image/LogoHegreConfort_SansFond.png differ
diff --git a/src/Controller/CalendrierController.php b/src/Controller/CalendrierController.php
new file mode 100644
index 0000000..3fc2c78
--- /dev/null
+++ b/src/Controller/CalendrierController.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace App\Controller;
+
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Attribute\Route;
+
+class CalendrierController extends AbstractController
+{
+    #[Route('/calendrier', name: 'app_calendrier')]
+    public function index(): Response
+    {
+        return $this->render('calendrier/index.html.twig', [
+            'controller_name' => 'CalendrierController',
+        ]);
+    }
+}
diff --git a/templates/calendrier/indexChauffagiste.html.twig b/templates/calendrier/indexChauffagiste.html.twig
new file mode 100644
index 0000000..e69de29
diff --git a/templates/calendrier/indexSecretaire.html.twig b/templates/calendrier/indexSecretaire.html.twig
new file mode 100644
index 0000000..4f874cd
--- /dev/null
+++ b/templates/calendrier/indexSecretaire.html.twig
@@ -0,0 +1,20 @@
+{% extends 'base.html.twig' %}
+
+{% block title %}Hello CalendrierController!{% endblock %}
+
+{% block body %}
+<style>
+    .example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
+    .example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
+</style>
+
+<div class="example-wrapper">
+    <h1>Hello {{ controller_name }}! ✅</h1>
+
+    This friendly message is coming from:
+    <ul>
+        <li>Your controller at <code>/home/allarda@stsio.lan/Test/HegreEtConfort/src/Controller/CalendrierController.php</code></li>
+        <li>Your template at <code>/home/allarda@stsio.lan/Test/HegreEtConfort/templates/calendrier/index.html.twig</code></li>
+    </ul>
+</div>
+{% endblock %}
diff --git a/templates/login/index.html.twig b/templates/login/index.html.twig
index 6b95ed1..08c8f2d 100644
--- a/templates/login/index.html.twig
+++ b/templates/login/index.html.twig
@@ -1,20 +1,31 @@
-{% extends 'base.html.twig' %}
+<!DOCTYPE html>
+<html lang="fr, en">
+<head>
+    <meta charset="UTF-8">
+    <title>{% block title %}Authentification{% endblock %}</title>
+    <link href="{{ asset('styles/css/authentification.css') }}" rel='stylesheet'>
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text><text y=%221.3em%22 x=%220.2em%22 font-size=%2276%22 fill=%22%23fff%22>sf</text></svg>">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    {% block stylesheets %}
+    {% endblock %}
+</head>
+<body>
 
-{% block title %}Hello LoginController!{% endblock %}
-
-{% block body %}
-<style>
-    .example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
-    .example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
-</style>
-
-<div class="example-wrapper">
-    <h1>Hello {{ controller_name }}! ✅</h1>
-
-    This friendly message is coming from:
-    <ul>
-        <li>Your controller at <code>E:/BTS/PhpStorm/HegreEtConfort/src/Controller/LoginController.php</code></li>
-        <li>Your template at <code>E:/BTS/PhpStorm/HegreEtConfort/templates/login/index.html.twig</code></li>
-    </ul>
+<div class="row" id="xxx">
+    <div class="col-2"><img class="logo" src="{{ asset('styles/image/LogoHegreConfort_SansFond.png') }}" alt="Logo Hegre et Confort"></div>
+    <div class="col-10"><h1 class="titre">D'HEGRE ET CONFORT</h1></div>
 </div>
-{% endblock %}
+
+<section>
+    <div class="background"></div>
+
+    <img class="logoEmail" src="{{ asset('styles/image/1.png') }}">
+    <input class="email" type="email" placeholder="Adresse mail">
+
+    <img class="logoPassword" src="{{ asset('styles/image/2.png') }}">
+    <input class="password" type="password" placeholder="Mot de passe">
+</section>
+
+<p class="forgot"> Mot de passe oublié ?</p>
+</body>
+</html>