diff --git a/.gitignore b/.gitignore
index 4a2bba8..954200c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -187,5 +187,5 @@ fabric.properties
 /web/js/
 
 # End of https://www.toptal.com/developers/gitignore/api/symfony,phpstorm,git
-.idea/
-/vendor/
\ No newline at end of file
+/vendor/
+.idea/
\ No newline at end of file
diff --git a/assets/styles/app.css b/assets/styles/app.css
index dd6181a..8b13789 100644
--- a/assets/styles/app.css
+++ b/assets/styles/app.css
@@ -1,3 +1 @@
-body {
-    background-color: skyblue;
-}
+
diff --git a/assets/styles/login.css b/assets/styles/login.css
new file mode 100644
index 0000000..733985c
--- /dev/null
+++ b/assets/styles/login.css
@@ -0,0 +1,84 @@
+html {
+    background-image: url("asset/image/BackgroundLogin.jpg"); background-repeat: no-repeat; background-size: cover;
+    height: 100%;
+    width: 100%;
+}
+
+body {
+    height: 100%;
+    width: 100%;
+}
+
+.Login {
+    width: 100%;
+    height: 100%;
+}
+.Circle {
+    background: #db5559;
+    width: 41%;
+    height: 80%;
+    margin: 0 auto;
+    border-style: solid;
+    border-radius: 50%;
+    border-color: white;
+    border-width: 5px;
+}
+.Form {
+    background: #791c1c;
+    height: 40%;
+    width: 55%;
+    margin: auto;
+    border-style: solid;
+    border-radius: 50px;
+    border-color: white;
+    border-width: 2px;
+    text-align: center;
+    font-family: "Qwitcher Grypen", cursive;
+    font-size: 40px;
+    font-style: italic;
+    color: white;
+    padding-bottom: 0;
+
+}
+
+.Logo {
+    display: flex;
+    margin: auto;
+    margin-top: 8%;
+}
+
+.Title1 {
+    margin: 0;
+    padding: 0;
+}
+
+.Title2 {
+    display: grid;
+    place-items: center;
+    height: 7vh;
+    color: black;
+    font-family: "Qwitcher Grypen", cursive;
+    font-size: 40px;
+    margin: 0;
+}
+
+.form-group{
+    display: grid;
+    place-items: center;
+    height: 7vh;
+    align-items: center;
+    text-align: center;
+    /*margin-bottom: 10px;*/
+}
+
+.form-control{
+    background-color: #f19595;
+    margin-left: 10px;
+    border-radius: 5px;
+}
+
+.btn{
+    background-color: #279b63;
+    border-radius: 6px;
+    height: 30px;
+}
\ No newline at end of file
diff --git a/public/asset/image/BackgroundLogin.jpg b/public/asset/image/BackgroundLogin.jpg
new file mode 100644
index 0000000..5a2825f
Binary files /dev/null and b/public/asset/image/BackgroundLogin.jpg differ
diff --git a/public/asset/image/CircleBackground.png b/public/asset/image/CircleBackground.png
new file mode 100644
index 0000000..562fc69
Binary files /dev/null and b/public/asset/image/CircleBackground.png differ
diff --git a/public/asset/image/LogoHegre.png b/public/asset/image/LogoHegre.png
new file mode 100644
index 0000000..517bffb
Binary files /dev/null and b/public/asset/image/LogoHegre.png differ
diff --git a/src/Controller/LoginController.php b/src/Controller/LoginController.php
new file mode 100644
index 0000000..05fc113
--- /dev/null
+++ b/src/Controller/LoginController.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Controller;
+
+use App\Form\LoginFormType;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Attribute\Route;
+
+class LoginController extends AbstractController
+{
+    #[Route('/login', name: 'app_login')]
+    public function index(Request $request): Response
+    {
+        $form = $this->createForm(LoginFormType::class);
+        $form->handleRequest($request);
+
+        return $this->render('login/login.html.twig',[
+        'form' => $form->createView(),
+        ]);
+    }
+}
diff --git a/src/Form/LoginFormType.php b/src/Form/LoginFormType.php
new file mode 100644
index 0000000..1b04d23
--- /dev/null
+++ b/src/Form/LoginFormType.php
@@ -0,0 +1,34 @@
+<?php
+
+namespace App\Form;
+
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\EmailType;
+use Symfony\Component\Form\Extension\Core\Type\PasswordType;
+use Symfony\Component\Form\Extension\Core\Type\SubmitType;
+use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+
+class LoginFormType extends AbstractType
+{
+    public function buildForm(FormBuilderInterface $builder, array $options): void
+    {
+        $builder
+            ->add('email', EmailType::class, [
+                'label' => 'Email',
+            ])
+            ->add('password', PasswordType::class, [
+                'label' => 'Mot de passe',
+            ])
+            ->add('confirm', SubmitType::class, [
+                'label' => 'Connexion',
+            ]);
+    }
+
+    public function configureOptions(OptionsResolver $resolver): void
+    {
+        $resolver->setDefaults([
+            // Configure your form options here
+        ]);
+    }
+}
diff --git a/templates/base.html.twig b/templates/base.html.twig
index 3cda30f..c98ef50 100644
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@@ -3,7 +3,10 @@
     <head>
         <meta charset="UTF-8">
         <title>{% block title %}Welcome!{% endblock %}</title>
-        <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 rel="" href="">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Qwitcher+Grypen:wght@400;700&display=swap" rel="stylesheet">
         {% block stylesheets %}
         {% endblock %}
 
diff --git a/templates/login/login.html.twig b/templates/login/login.html.twig
new file mode 100644
index 0000000..f5b236b
--- /dev/null
+++ b/templates/login/login.html.twig
@@ -0,0 +1,122 @@
+{% extends 'base.html.twig' %}
+
+{% block stylesheets %}
+    <link rel="stylesheet" href="../../../assets/styles/login.css">
+{% endblock %}
+
+
+{% block title %}Login{% endblock %}
+
+{% block body %}
+
+<style>
+    html {
+        background-image: url("asset/image/BackgroundLogin.jpg"); background-repeat: no-repeat; background-size: cover;
+        height: 100%;
+        width: 100%;
+    }
+
+    body {
+        height: 100%;
+        width: 100%;
+    }
+
+    .Login {
+        width: 100%;
+        height: 100%;
+    }
+    .Circle {
+        background: #db5559;
+        width: 41%;
+        height: 80%;
+        margin: 0 auto;
+        border-style: solid;
+        border-radius: 50%;
+        border-color: white;
+        border-width: 5px;
+    }
+    .Form {
+        background: #791c1c;
+        height: 40%;
+        width: 55%;
+        margin: auto;
+        border-style: solid;
+        border-radius: 50px;
+        border-color: white;
+        border-width: 2px;
+        text-align: center;
+        font-family: "Qwitcher Grypen", cursive;
+        font-size: 40px;
+        font-style: italic;
+        color: white;
+        padding-bottom: 0;
+
+    }
+
+    .Logo {
+        display: flex;
+        margin: auto;
+        margin-top: 8%;
+    }
+
+    .Title1 {
+        margin: 0;
+        padding: 0;
+    }
+
+    .Title2 {
+        display: grid;
+        place-items: center;
+        height: 7vh;
+        color: black;
+        font-family: "Qwitcher Grypen", cursive;
+        font-size: 40px;
+        margin: 0;
+    }
+
+    .form-group{
+        display: grid;
+        place-items: center;
+        height: 7vh;
+        align-items: center;
+        text-align: center;
+        /*margin-bottom: 10px;*/
+    }
+
+    .form-control{
+        background-color: #f19595;
+        margin-left: 10px;
+        border-radius: 5px;
+    }
+
+    .btn{
+        background-color: #279b63;
+        border-radius: 6px;
+        height: 30px;
+    }
+
+</style>
+
+<div class="Login">
+    <div class="Circle">
+        <img src="asset/image/LogoHegre.png" class="Logo">
+        <div class="Form">
+            {{ form_start(form) }}
+            <h1 class="Title1">Bienvenue !</h1>
+                <div class="form-group">
+                    {{ form_label(form.email) }}
+                    {{ form_widget(form.email, {'attr': {'class': 'form-control'}}) }}
+                </div>
+                <div class="form-group">
+                    {{ form_label(form.password) }}
+                    {{ form_widget(form.password, {'attr': {'class': 'form-control'}}) }}
+                </div>
+                <div class="form-group">
+                    {{ form_widget(form.confirm, {'attr': {'class': 'btn btn-primary'}}) }}
+                </div>
+            {{ form_end(form) }}
+        </div>
+        <h1 class="Title2">Volaille en fête, Saveurs parfaites !</h1>
+    </div>
+</div>
+{% endblock %}