diff --git a/src/CraftSharp/Models/ConnexionModel.cs b/src/CraftSharp/Models/ConnexionModel.cs
new file mode 100644
index 0000000..0979c90
--- /dev/null
+++ b/src/CraftSharp/Models/ConnexionModel.cs
@@ -0,0 +1,15 @@
+using System.ComponentModel.DataAnnotations;
+
+namespace CraftSharp.Models
+{
+    public class ConnexionModel
+    {
+        [Required(ErrorMessage = "Le pseudo est obligatoire.")]
+        [StringLength(50, ErrorMessage = "Le pseudo est trop long")]
+        public string? Name { get; set; }
+
+        [Required(ErrorMessage = "Le mot de passe est obligatoire.")]
+        [StringLength(50, ErrorMessage = "Le mot de passe est trop long")]
+        public string? Password { get; set; }
+    }
+}
diff --git a/src/CraftSharp/Models/InscriptionModel.cs b/src/CraftSharp/Models/InscriptionModel.cs
new file mode 100644
index 0000000..30c618d
--- /dev/null
+++ b/src/CraftSharp/Models/InscriptionModel.cs
@@ -0,0 +1,25 @@
+using System.ComponentModel.DataAnnotations;
+
+namespace CraftSharp.Models
+{
+    public class InscriptionModel
+    {
+
+        [Required(ErrorMessage = "Le pseudo est obligatoire.")]
+        [StringLength(50, ErrorMessage = "Le pseudo est trop long")]
+        public string? Pseudo { get; set; }
+
+        [Required(ErrorMessage = "L'email est obligatoire.")]
+        [StringLength(50, ErrorMessage = "Le nom ne doit pas dépasser 50 caractères.")]
+        [RegularExpression(@"^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$", ErrorMessage = "Le format de l'email n'est pas correcte.")]
+        public string? Email { get; set; }
+
+        [Required(ErrorMessage = "Le mot de passe est obligatoire.")]
+        [StringLength(50, ErrorMessage = "Le mot de passe est trop long")]
+        public string? Password { get; set; }
+
+        [Required(ErrorMessage = "Vous devez confirmer votre mot de passe")]
+        [StringLength(50, ErrorMessage = "Le pseudo est trop long")]
+        public string? ConfirmPasswd { get; set; }
+    }
+}
\ No newline at end of file
diff --git a/src/CraftSharp/Pages/Connexion.razor b/src/CraftSharp/Pages/Connexion.razor
new file mode 100644
index 0000000..0c41710
--- /dev/null
+++ b/src/CraftSharp/Pages/Connexion.razor
@@ -0,0 +1,37 @@
+@page "/connexion"
+@layout InscriptionLayout
+@inject NavigationManager NavManager
+
+    <div class="option">
+        <h1>Connexion</h1>
+        <div>
+             <EditForm Model="@connexion" OnValidSubmit="@seConnecter">
+            <DataAnnotationsValidator />
+            <ValidationSummary />
+
+            <div class="editForm">
+                <p>
+                    <label for="display-name">
+                        Pseudonyme:
+                         <InputText id="name" @bind-Value="@connexion.Name" />
+                    </label>
+                </p>
+                <p>
+                    <label for="name">
+                        Mot de passe:
+                         <InputText id="password"  type="password" @bind-Value="@connexion.Password" />
+                     </label>
+                </p>
+            </div>
+             <div class="choix">
+                  <button classtype="submit"> Se connecter </button>  
+             </div>
+            </EditForm>
+        </div> 
+    </div>
+    <object>
+        <param name="autostart" value="true">
+        <param name="src" value="../audio/audio.mp3">
+        <param name="autoplay" value="true"> 
+        <embed src="../audio/audio.mp3" controller="true" autoplay="true" autostart="True" type="audio/mp3" />
+    </object>
\ No newline at end of file
diff --git a/src/CraftSharp/Pages/Connexion.razor.cs b/src/CraftSharp/Pages/Connexion.razor.cs
new file mode 100644
index 0000000..266d819
--- /dev/null
+++ b/src/CraftSharp/Pages/Connexion.razor.cs
@@ -0,0 +1,25 @@
+using Microsoft.Extensions.Logging;
+using System;
+using System.ComponentModel.DataAnnotations;
+using Microsoft.Extensions.Logging;
+using Microsoft.AspNetCore.Components;
+using CraftSharp.Models;
+
+namespace CraftSharp.Pages
+{
+    public partial class Connexion
+    {
+        private readonly ConnexionModel connexion = new();
+
+        private string _connexionId = "test";
+        private string _connexionPasswrd = "test";
+
+        private void seConnecter()
+        {
+            if (connexion.Name == _connexionId && connexion.Password == _connexionPasswrd)
+            {
+                NavManager.NavigateTo("/counter");
+            }
+        }
+    }
+}
diff --git a/src/CraftSharp/Pages/Connexion.razor.css b/src/CraftSharp/Pages/Connexion.razor.css
new file mode 100644
index 0000000..715f868
--- /dev/null
+++ b/src/CraftSharp/Pages/Connexion.razor.css
@@ -0,0 +1,58 @@
+.option {
+    margin-left: auto;
+    margin-right: auto;
+    width: 500px
+}
+
+button:hover {
+    background: url('Images/btn2.png') no-repeat;
+}
+
+h1 {
+    color: white;
+    font-family: Minecraft;
+    margin-left: 25%;
+    margin-right: 25%;
+}
+
+.choix {
+    display: flex;
+    justify-content: space-around;
+}
+
+object {
+    visibility: hidden;
+}
+
+button {
+    width: 12rem;
+    text-decoration: none;
+    text-align: center;
+    color: white;
+    cursor: pointer;
+    background: url('Images/btn1.png') no-repeat;
+    font-family: SilkscreenNormal;
+    line-height: 26px;
+    padding-top: 6px;
+    font-family: Minecraft;
+}
+
+InputText {
+    width: 100%;
+}
+
+.ecrire {
+    margin-left: auto;
+    margin-right: auto;
+    width: 6em
+}
+
+label {
+    width: 15rem;
+}
+
+.editForm {
+    margin-left: 25%;
+    margin-right: 25%;
+    width: 100%;
+}
diff --git a/src/CraftSharp/Pages/Inscription.razor b/src/CraftSharp/Pages/Inscription.razor
new file mode 100644
index 0000000..1d93e71
--- /dev/null
+++ b/src/CraftSharp/Pages/Inscription.razor
@@ -0,0 +1,50 @@
+@page "/inscription"
+@layout InscriptionLayout
+@inject NavigationManager NavManager
+
+    <div class="option">
+        <h1>Inscription</h1>
+        <div>
+          <EditForm Model="@inscription" OnValidSubmit="@inscrire">
+            <DataAnnotationsValidator />
+            <ValidationSummary />
+
+            <div class="editForm">
+                <p>
+                    <label for="email">
+                        Email:
+                         <InputText id="email" @bind-Value="@inscription.Email" />
+                     </label>
+                </p>
+                <p>
+                    <label for="pseudo">
+                        Pseudonyme:
+                         <InputText id="pseudo" @bind-Value="@inscription.Pseudo" />
+                    </label>
+                </p>
+                <p>
+                    <label for="password">
+                        Mot de passe:
+                         <InputText id="password"  type="password" @bind-Value="@inscription.Password" />
+                     </label>
+                </p>
+                <p>
+                    <label for="confimPasswd">
+                        Mot de passe:
+                         <InputText id="confimPasswd"  type="password" @bind-Value="@inscription.ConfirmPasswd" />
+                     </label>
+                </p>
+            </div>
+            <div class="choix">
+                 <button classtype="submit"> Valider </button>    
+             </div>
+          </EditForm>
+            
+        </div> 
+    </div>
+    <object>
+        <param name="autostart" value="true">
+        <param name="src" value="../audio/audio.mp3">
+        <param name="autoplay" value="true"> 
+        <embed src="../audio/audio.mp3" controller="true" autoplay="true" autostart="True" type="audio/mp3" />
+    </object>
\ No newline at end of file
diff --git a/src/CraftSharp/Pages/Inscription.razor.cs b/src/CraftSharp/Pages/Inscription.razor.cs
new file mode 100644
index 0000000..1530f25
--- /dev/null
+++ b/src/CraftSharp/Pages/Inscription.razor.cs
@@ -0,0 +1,18 @@
+using Microsoft.Extensions.Logging;
+using System;
+using System.ComponentModel.DataAnnotations;
+using Microsoft.Extensions.Logging;
+using Microsoft.AspNetCore.Components;
+using CraftSharp.Models;
+
+namespace CraftSharp.Pages
+{
+    public partial class Inscription
+    {
+        private readonly InscriptionModel inscription = new();
+
+        private void inscrire()
+        {
+        }
+    }
+}
diff --git a/src/CraftSharp/Pages/Inscription.razor.css b/src/CraftSharp/Pages/Inscription.razor.css
new file mode 100644
index 0000000..715f868
--- /dev/null
+++ b/src/CraftSharp/Pages/Inscription.razor.css
@@ -0,0 +1,58 @@
+.option {
+    margin-left: auto;
+    margin-right: auto;
+    width: 500px
+}
+
+button:hover {
+    background: url('Images/btn2.png') no-repeat;
+}
+
+h1 {
+    color: white;
+    font-family: Minecraft;
+    margin-left: 25%;
+    margin-right: 25%;
+}
+
+.choix {
+    display: flex;
+    justify-content: space-around;
+}
+
+object {
+    visibility: hidden;
+}
+
+button {
+    width: 12rem;
+    text-decoration: none;
+    text-align: center;
+    color: white;
+    cursor: pointer;
+    background: url('Images/btn1.png') no-repeat;
+    font-family: SilkscreenNormal;
+    line-height: 26px;
+    padding-top: 6px;
+    font-family: Minecraft;
+}
+
+InputText {
+    width: 100%;
+}
+
+.ecrire {
+    margin-left: auto;
+    margin-right: auto;
+    width: 6em
+}
+
+label {
+    width: 15rem;
+}
+
+.editForm {
+    margin-left: 25%;
+    margin-right: 25%;
+    width: 100%;
+}
diff --git a/src/CraftSharp/Shared/HeaderLayout.razor b/src/CraftSharp/Shared/HeaderLayout.razor
index 5c9ba21..87dc25b 100644
--- a/src/CraftSharp/Shared/HeaderLayout.razor
+++ b/src/CraftSharp/Shared/HeaderLayout.razor
@@ -1,4 +1,5 @@
-<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
+@inject NavigationManager navigationManager
+<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
     <div class="container-fluid">
 
         <img class="nav-image" src="Images/CraftSharp-Logo.png" alt="Logo Application"/>
@@ -40,10 +41,10 @@
                 <div >
                     <CultureSelector/>
                 </div>
-                <div class="button"> Se connecter
-            </div>
-                <div class="button"> S'inscrire
-            </div>
+                <button @onclick=@goConnexion> Se connecter
+            </button>
+                <button @onclick=@goInscription> S'inscrire
+            </button>
         </div>
         </div>
     </div>
diff --git a/src/CraftSharp/Shared/HeaderLayout.razor.cs b/src/CraftSharp/Shared/HeaderLayout.razor.cs
index f861000..6141ebf 100644
--- a/src/CraftSharp/Shared/HeaderLayout.razor.cs
+++ b/src/CraftSharp/Shared/HeaderLayout.razor.cs
@@ -8,5 +8,15 @@ namespace CraftSharp.Shared
     {
         [Inject]
         public IStringLocalizer<Index> Localizer { get; set; }
+
+        void goInscription()
+        {
+            navigationManager.NavigateTo("inscription");
+        }
+
+        void goConnexion()
+        {
+            navigationManager.NavigateTo("connexion");
+        }
     }
 }
diff --git a/src/CraftSharp/Shared/HeaderLayout.razor.css b/src/CraftSharp/Shared/HeaderLayout.razor.css
index db8d508..bec6bbc 100644
--- a/src/CraftSharp/Shared/HeaderLayout.razor.css
+++ b/src/CraftSharp/Shared/HeaderLayout.razor.css
@@ -11,9 +11,8 @@
 
 }
 
-.button {
-    height: 5rem;
-    width: 11rem;
+button {
+    width: 12rem;
     text-decoration: none;
     text-align: center;
     color: white;
@@ -22,9 +21,10 @@
     font-family: SilkscreenNormal;
     line-height: 26px;
     padding-top: 6px;
+    font-family: Minecraft;
 }
 
-.button:hover {
+button:hover {
     background: url('Images/btn2.png') no-repeat;
 }
 
diff --git a/src/CraftSharp/Shared/InscriptionLayout.razor b/src/CraftSharp/Shared/InscriptionLayout.razor
new file mode 100644
index 0000000..978904d
--- /dev/null
+++ b/src/CraftSharp/Shared/InscriptionLayout.razor
@@ -0,0 +1,16 @@
+@inherits LayoutComponentBase
+@inject NavigationManager navigationManager
+
+<div class="connexionBody">
+    <button @onclick=@getBack  id="back">Retour</button>
+    <header>
+        <img src="../images/CraftSharp-Logo.png"/>
+    </header>
+
+    @Body
+
+    <footer>
+        <p class="p1">Craft# 1.0</p>
+        <p class="p2">Copyright KARTAL Emre, VALIN Arthur, HASSOU Rayhan</p>
+    </footer>
+</div>
\ No newline at end of file
diff --git a/src/CraftSharp/Shared/InscriptionLayout.razor.cs b/src/CraftSharp/Shared/InscriptionLayout.razor.cs
new file mode 100644
index 0000000..cb4739f
--- /dev/null
+++ b/src/CraftSharp/Shared/InscriptionLayout.razor.cs
@@ -0,0 +1,14 @@
+using Microsoft.AspNetCore.Http.Extensions;
+using Microsoft.JSInterop;
+using System.Reflection.Metadata;
+
+namespace CraftSharp.Shared
+{
+    public partial class InscriptionLayout
+    {
+        void getBack()
+        {
+            navigationManager.NavigateTo("");
+        }
+    }
+}
diff --git a/src/CraftSharp/Shared/InscriptionLayout.razor.css b/src/CraftSharp/Shared/InscriptionLayout.razor.css
new file mode 100644
index 0000000..fd35265
--- /dev/null
+++ b/src/CraftSharp/Shared/InscriptionLayout.razor.css
@@ -0,0 +1,52 @@
+@font-face {
+    font-family: "Minecraft";
+    src: url("fonts/Minecraft.ttf") format("truetype");
+}
+
+body {
+    background-image: url("Images/fond.jpg");
+    height: 100%
+}
+
+.connexionBody {
+    background-image: url("Images/fond.jpg");
+    width: 100%;
+    min-height: 100vh;
+}
+
+header img {
+    width: 50%;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+footer {
+    position: absolute;
+    bottom: 0px;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+}
+
+    footer p {
+        color: white;
+        font-family: Minecraft;
+    }
+
+.p2 {
+    float: right;
+}
+
+button {
+    width: 12rem;
+    text-decoration: none;
+    text-align: center;
+    color: white;
+    cursor: pointer;
+    background: url('Images/btn1.png') no-repeat;
+    font-family: SilkscreenNormal;
+    line-height: 26px;
+    padding-top: 6px;
+    font-family: Minecraft;
+}
diff --git a/src/CraftSharp/wwwroot/Images/fond.jpg b/src/CraftSharp/wwwroot/Images/fond.jpg
new file mode 100644
index 0000000..6dff98a
Binary files /dev/null and b/src/CraftSharp/wwwroot/Images/fond.jpg differ
diff --git a/src/CraftSharp/wwwroot/audio/audio.mp3 b/src/CraftSharp/wwwroot/audio/audio.mp3
new file mode 100644
index 0000000..c908214
Binary files /dev/null and b/src/CraftSharp/wwwroot/audio/audio.mp3 differ
diff --git a/src/CraftSharp/wwwroot/font/Minecraft.ttf b/src/CraftSharp/wwwroot/font/Minecraft.ttf
new file mode 100644
index 0000000..85c1472
Binary files /dev/null and b/src/CraftSharp/wwwroot/font/Minecraft.ttf differ