diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor
new file mode 100644
index 0000000..79c9572
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor
@@ -0,0 +1,23 @@
+@using GameIdeas.BlazorApp.Shared.Components.Select
+@using GameIdeas.Shared.Dto
+
+
+<EditForm EditContext="EditContext">
+    <SelectList TItem="Func<GameDto, object>"
+                Headers="SortTypes"
+                Items="GameProperties"
+                @bind-Value=GameFilterParams.GameProperty
+                HeaderChanged=HandleSortTypeChanged
+                Theme="SelectListTheme.Sort">
+        <Button>
+            <div class="sort-button">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                    <path d="M18 21L14 17H17V7H14L18 3L22 7H19V17H22M2 19V17H12V19M2 13V11H9V13M2 7V5H6V7H2Z" />
+                </svg>
+            </div>
+        </Button>
+    </SelectList>
+</EditForm>
+
+
+
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.cs
new file mode 100644
index 0000000..5868c38
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.cs
@@ -0,0 +1,37 @@
+using GameIdeas.BlazorApp.Shared.Components.Select;
+using GameIdeas.Shared.Dto;
+using GameIdeas.Shared.Enum;
+using Microsoft.AspNetCore.Components.Forms;
+
+namespace GameIdeas.BlazorApp.Pages.Games.Filter;
+
+public partial class GameFilter
+{
+    private readonly IEnumerable<SelectElement<Func<GameDto?, object?>>> SortTypes = [
+        new() { Item = _ => SortType.Ascending, Label = "Ascendant", IsSelected = true },
+        new() { Item = _ => SortType.Descending, Label = "Descendant" }
+    ];
+    
+    private readonly IEnumerable<SelectElement<Func<GameDto?, object?>>> GameProperties = [
+        new() { Item = game => game?.Name, Label = "Nom", IsSelected = true },
+        new() { Item = game => game?.ReleaseDate, Label = "Date de parution" }
+    ];
+
+    private EditContext? EditContext;
+    private GameFilterParams GameFilterParams = new();
+
+    protected override void OnInitialized()
+    {
+        EditContext = new EditContext(GameFilterParams);
+        EditContext.OnFieldChanged += HandleFormChanged;
+    }
+
+    private void HandleFormChanged(object? sender, FieldChangedEventArgs e)
+    {
+        throw new NotImplementedException();
+    }
+    private void HandleSortTypeChanged(Func<GameDto?, object?> getHeader)
+    {
+        GameFilterParams.SortType = (SortType?)getHeader(null) ?? SortType.Ascending;
+    }
+}
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.css
new file mode 100644
index 0000000..a1e4e53
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.css
@@ -0,0 +1,17 @@
+.sort-button {
+    height: 28px;
+    width: 28px;
+    border-radius: var(--small-radius);
+    background: var(--black);
+    overflow: hidden;
+}
+
+.sort-button svg {
+    fill: var(--white);
+    padding: 2px;
+}
+
+    .sort-button svg:hover {
+        cursor: pointer;
+        background: var(--low-white);
+    }
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilterParams.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilterParams.cs
new file mode 100644
index 0000000..c98d496
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilterParams.cs
@@ -0,0 +1,10 @@
+using GameIdeas.Shared.Enum;
+using GameIdeas.Shared.Dto;
+
+namespace GameIdeas.BlazorApp.Pages.Games.Filter;
+
+public class GameFilterParams
+{
+    public SortType? SortType { get; set; }
+    public Func<GameDto?, object?>? GameProperty { get; set; }
+}
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor
index 0e9af03..d317dda 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor
@@ -1,6 +1,6 @@
 @page "/Games"
 @using GameIdeas.BlazorApp.Layouts
-@using GameIdeas.BlazorApp.Pages.Games.Header
+@using GameIdeas.BlazorApp.Pages.Games.Filter
 @using GameIdeas.BlazorApp.Shared.Components
 @using GameIdeas.BlazorApp.Shared.Layouts.Header
 @using GameIdeas.Resources
@@ -11,6 +11,6 @@
 
 <HeaderLayout>
     <Body>
-        <HeaderGame />
+        <GameFilter />
     </Body>
 </HeaderLayout>
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor
deleted file mode 100644
index 171fad3..0000000
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
-
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor.cs
deleted file mode 100644
index 875ea39..0000000
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor.cs
+++ /dev/null
@@ -1,6 +0,0 @@
-namespace GameIdeas.BlazorApp.Pages.Games.Header;
-
-public partial class HeaderGame
-{
-
-}
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor.css
deleted file mode 100644
index 5f28270..0000000
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor.css
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSetting.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSetting.cs
deleted file mode 100644
index 487c78a..0000000
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSetting.cs
+++ /dev/null
@@ -1,20 +0,0 @@
-namespace GameIdeas.BlazorApp.Shared.Components.Account;
-
-public enum AccountSetting
-{
-	Logout
-}
-
-public class AccountSettingParams
-{
-    public string Label { get; set; }
-    public AccountSetting AccountSetting { get; set; }
-    public bool ForConnected { get; set; }
-
-    public AccountSettingParams(string label, AccountSetting accountSetting, bool forConnected)
-    {
-        Label = label;
-        AccountSetting = accountSetting;
-        ForConnected = forConnected;
-    }
-}
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.css
index de479fc..7550294 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.css
@@ -4,7 +4,7 @@
     position: fixed;
     animation-name: fade-in;
     animation-duration: 0.4s;
-    border: 2px solid var(--light-grey);
+    border: 2px solid var(--low-white);
     background: var(--black);
     right: 10px;
     margin-top: 4px;
@@ -17,7 +17,7 @@
 .login-form {
     display: flex;
     flex-direction: column;
-    padding: 20px 6px;
+    padding: 20px 8px;
     gap: 20px;
     max-width: 400px;
 }
@@ -31,7 +31,7 @@
 
 ::deep .input-text {
     background: var(--light-grey);
-    border: 2px solid rgb(255, 255, 255, 0.3);
+    border: 2px solid var(--low-white);
     border-radius: var(--small-radius);
     padding: 6px;
     color: var(--white);
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css
index 9f39b89..38ad19b 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css
@@ -25,6 +25,26 @@
     }
 
 /***** Sort Theme *****/
-.sort .select-label:hover {
-    color: var(--light-grey);
-}
\ No newline at end of file
+.sort {
+    gap: 6px;
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    padding: 2px 6px;
+}
+
+    .sort:hover {
+        background: var(--low-white);
+    }
+
+.sort .selected {
+    width: 20px;
+    height: 20px;
+}
+
+.sort .select-label {
+    text-wrap: nowrap;
+    margin-right: 6px;
+}
+
+
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css
index ead1cd6..bdbf6ba 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css
@@ -21,8 +21,8 @@
 }
 
 .line {
-    margin: 0 6px;
-    border-bottom: 2px solid var(--light-grey);
+    margin: 2px 6px;
+    border-bottom: 2px solid var(--low-white);
 }
 
 
@@ -36,5 +36,6 @@
 .select-content.sort {
     background: var(--black);
     box-shadow: var(--drop-shadow);
+    padding: 4px 0;
 }
 
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css
index b9df5af..b744d36 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css
@@ -10,6 +10,7 @@
     --light-grey: #5C5C5E;
     --black: rgba(44, 43, 46, 0.8);
     --white: #fff;
+    --low-white: rgb(255, 255, 255, 0.1);
     --semi-black: rgba(0, 0, 0, 0.5);
     --line-black: rgba(0, 0, 0, 0.2);
     --small-radius: 4px;
diff --git a/src/GameIdeas/GameIdeas.Shared/Dto/GameDto.cs b/src/GameIdeas/GameIdeas.Shared/Dto/GameDto.cs
new file mode 100644
index 0000000..293a672
--- /dev/null
+++ b/src/GameIdeas/GameIdeas.Shared/Dto/GameDto.cs
@@ -0,0 +1,7 @@
+namespace GameIdeas.Shared.Dto;
+
+public class GameDto
+{
+    public string? Name { get; set; }
+    public string? ReleaseDate { get; set; }
+}
\ No newline at end of file
diff --git a/src/GameIdeas/GameIdeas.Shared/Enum/SortType.cs b/src/GameIdeas/GameIdeas.Shared/Enum/SortType.cs
new file mode 100644
index 0000000..e3091cc
--- /dev/null
+++ b/src/GameIdeas/GameIdeas.Shared/Enum/SortType.cs
@@ -0,0 +1,7 @@
+namespace GameIdeas.Shared.Enum;
+
+public enum SortType
+{
+    Ascending,
+    Descending
+}