From 3dfabdad7432825af417fbeefda440a47c16e250 Mon Sep 17 00:00:00 2001
From: Egamorf <maxime.adler76@gmail.com>
Date: Thu, 20 Mar 2025 18:33:28 +0100
Subject: [PATCH] Add game header (#5)

Co-authored-by: Maxime Adler <madler@sqli.com>
Reviewed-on: https://gitea.egamorf.com/PRJ-Game-Ideas/game-ideas/pulls/5
---
 .../Pages/Games/Filter/GameFilter.razor       | 65 ++++++++++++++
 .../Pages/Games/Filter/GameFilter.razor.cs    | 65 ++++++++++++++
 .../Pages/Games/Filter/GameFilter.razor.css   | 69 +++++++++++++++
 .../Pages/Games/Filter/GameFilterParams.cs    | 15 ++++
 .../Pages/Games/GamesBase.razor               |  9 +-
 .../Pages/Games/GamesBase.razor.cs            |  4 +-
 .../Pages/Games/Models/AccountSetting.cs      | 20 -----
 .../Pages/Games/Models/AddType.cs             |  6 --
 .../Pages/Games/Models/DisplayType.cs         |  7 ++
 .../Properties/launchSettings.json            |  2 +
 .../Account}/AccountSettings.razor            |  7 +-
 .../Account}/AccountSettings.razor.cs         |  8 +-
 .../Account}/AccountSettings.razor.css        | 10 +--
 .../Account}/LoginValidator.cs                |  2 +-
 .../Components/Dropdown/DropdownContent.razor | 13 ---
 .../Dropdown/DropdownContent.razor.cs         | 36 --------
 .../Dropdown/DropdownContent.razor.css        | 33 -------
 .../Components/Dropdown/DropdownTheme.cs      |  7 --
 .../Components/Search/SearchInput.razor       | 30 +++++++
 .../Components/Search/SearchInput.razor.cs    | 39 +++++++++
 .../Components/Search/SearchInput.razor.css   | 58 +++++++++++++
 .../Components/Search/SearchInputIcon.cs      |  7 ++
 .../Select/Components/SelectListElement.razor | 15 ++++
 .../Components/SelectListElement.razor.cs     | 22 +++++
 .../Components/SelectListElement.razor.css    | 67 +++++++++++++++
 .../Components/Select/Models/SelectElement.cs |  9 ++
 .../Components/Select/Models/SelectTheme.cs   |  8 ++
 .../Select/MultipleSelectList.razor           | 33 +++++++
 .../Select/MultipleSelectList.razor.cs        | 71 +++++++++++++++
 .../Select/MultipleSelectList.razor.css       | 49 +++++++++++
 .../Shared/Components/Select/SelectList.razor | 37 ++++++++
 .../Components/Select/SelectList.razor.cs     | 64 ++++++++++++++
 .../Components/Select/SelectList.razor.css    | 40 +++++++++
 .../Components/SliderRange/SliderRange.razor  | 13 +++
 .../SliderRange/SliderRange.razor.cs          | 57 ++++++++++++
 .../SliderRange/SliderRange.razor.css         | 86 +++++++++++++++++++
 .../SliderRange/SliderRangeParams.cs          | 10 +++
 .../Shared/Headers/HeaderBase.razor.cs        | 46 ----------
 .../Header/HeaderLayout.razor}                | 34 +++++---
 .../Layouts/Header/HeaderLayout.razor.cs      | 34 ++++++++
 .../Header/HeaderLayout.razor.css}            |  2 +-
 .../GameIdeas.BlazorApp/wwwroot/css/app.css   |  3 +-
 .../CreateStaticResourceKey.cs                |  2 +
 .../Constants/GlobalConstants.cs              |  7 ++
 src/GameIdeas/GameIdeas.Shared/Dto/GameDto.cs |  7 ++
 .../GameIdeas.Shared/Enum/SortType.cs         |  7 ++
 .../GameIdeas.WebAPI/Files/GameIdeas.fr.json  |  3 +-
 47 files changed, 1043 insertions(+), 195 deletions(-)
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.cs
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.css
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilterParams.cs
 delete mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Models/AccountSetting.cs
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Models/DisplayType.cs
 rename src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/{Headers => Components/Account}/AccountSettings.razor (89%)
 rename src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/{Headers => Components/Account}/AccountSettings.razor.cs (91%)
 rename src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/{Headers => Components/Account}/AccountSettings.razor.css (89%)
 rename src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/{Headers => Components/Account}/LoginValidator.cs (85%)
 delete mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownContent.razor
 delete mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownContent.razor.cs
 delete mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownContent.razor.css
 delete mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownTheme.cs
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.css
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInputIcon.cs
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.cs
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Models/SelectElement.cs
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Models/SelectTheme.cs
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.css
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.cs
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.cs
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.css
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRangeParams.cs
 delete mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBase.razor.cs
 rename src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/{Headers/HeaderBase.razor => Layouts/Header/HeaderLayout.razor} (55%)
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.cs
 rename src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/{Headers/HeaderBase.razor.css => Layouts/Header/HeaderLayout.razor.css} (98%)
 create mode 100644 src/GameIdeas/GameIdeas.Shared/Constants/GlobalConstants.cs
 create mode 100644 src/GameIdeas/GameIdeas.Shared/Dto/GameDto.cs
 create mode 100644 src/GameIdeas/GameIdeas.Shared/Enum/SortType.cs

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..f18e32a
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor
@@ -0,0 +1,65 @@
+@using GameIdeas.BlazorApp.Shared.Components.Search
+@using GameIdeas.BlazorApp.Shared.Components.Select
+@using GameIdeas.BlazorApp.Shared.Components.Select.Models
+@using GameIdeas.BlazorApp.Shared.Components.SliderRange
+@using GameIdeas.Shared.Dto
+@using GameIdeas.BlazorApp.Pages.Games.Models
+
+
+<EditForm EditContext="EditContext">
+    <div class="form-filter">
+        <SelectList TItem="Func<GameDto, object>"
+                    Headers="SortTypes"
+                    Items="GameProperties"
+                    @bind-Value=GameFilterParams.SortProperty
+                    HeaderChanged=HandleSortTypeChanged
+                    Theme="SelectListTheme.Sort">
+            <Button>
+                <div class="square-button">
+                    <svg class="sort-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                        <path d="M10,13H22V11H10M10,19H22V17H10M10,7H22V5H10M6,7H8.5L5,3.5L1.5,7H4V17H1.5L5,20.5L8.5,17H6V7Z" />
+                    </svg>
+                </div>
+            </Button>
+        </SelectList>
+
+        <div class="square-button" @onclick="@(() => HandleDisplayClicked(DisplayType.List))">
+            <svg class="list-icon @(DisplayType == DisplayType.List ? "selected-icon" : "")" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                <path d="M4,5V7H21V5M4,11H21V9H4M4,19H21V17H4M4,15H21V13H4V15Z" />
+            </svg>
+        </div>
+
+        <div class="square-button" @onclick="@(() => HandleDisplayClicked(DisplayType.Card))">
+            <svg class="card-icon @(DisplayType == DisplayType.Card ? "selected-icon" : "")" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                <path d="M16,5V11H21V5M10,11H15V5H10M16,18H21V12H16M10,18H15V12H10M4,18H9V12H4M4,11H9V5H4V11Z" />
+            </svg>
+        </div>
+
+        <div class="search-container">
+            <SearchInput @bind-Text=GameFilterParams.SearchName />
+        </div>
+
+        <div class="select-container">
+            <MultipleSelectList TItem="string"
+                                Items="Plateforms"
+                                @bind-Values=GameFilterParams.Plateforms
+                                Theme="SelectListTheme.Filter" />
+        </div>
+
+        <div class="select-container">
+            <MultipleSelectList TItem="string"
+                                Items="Genres"
+                                @bind-Values=GameFilterParams.Genres
+                                Theme="SelectListTheme.Filter" />
+        </div>
+
+        <div class="slider-container">
+            <SliderRange Params="SliderRangeParams"
+                         @bind-Max=GameFilterParams.MaxRating
+                         @bind-Min=GameFilterParams.MinRating />
+        </div>
+    </div>
+</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..8dcba7b
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.cs
@@ -0,0 +1,65 @@
+using GameIdeas.BlazorApp.Pages.Games.Models;
+using GameIdeas.BlazorApp.Shared.Components.Select.Models;
+using GameIdeas.BlazorApp.Shared.Components.SliderRange;
+using GameIdeas.Shared.Dto;
+using GameIdeas.Shared.Enum;
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Forms;
+
+namespace GameIdeas.BlazorApp.Pages.Games.Filter;
+
+public partial class GameFilter
+{
+    [Parameter] public GameFilterParams GameFilterParams { get; set; } = new();
+    [Parameter] public EventCallback<GameFilterParams> GameFilterParamsChanged { get; set; }
+    [Parameter] public DisplayType DisplayType { get; set; }
+    [Parameter] public EventCallback<DisplayType> DisplayTypeChanged { get; set; }
+
+    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 readonly IEnumerable<SelectElement<string>> Plateforms = [
+        new() { Item = "Steam", Label = "Steam" },
+        new() { Item = "GOG", Label = "GOG" },
+        new() { Item = "Epic games", Label = "Epic games" },
+        new() { Item = "Ubisoft", Label = "Ubisoft" },
+    ];
+
+    private readonly IEnumerable<SelectElement<string>> Genres = [
+        new() { Item = "Rogue Like", Label = "Rogue Like" },
+        new() { Item = "Aventure", Label = "Aventure" },
+        new() { Item = "RPG", Label = "RPG" },
+        new() { Item = "Fast FPS", Label = "Fast FPS" },
+    ];
+
+    private EditContext? EditContext;
+    private SliderRangeParams SliderRangeParams =
+        new() { Min = 1, ValueMin = 1, ValueMax = 5, Max = 5 };
+
+    protected override void OnInitialized()
+    {
+        EditContext = new EditContext(GameFilterParams);
+        EditContext.OnFieldChanged += async (s, e) =>
+        {
+            await GameFilterParamsChanged.InvokeAsync(GameFilterParams);
+        };
+    }
+
+    private void HandleSortTypeChanged(Func<GameDto?, object?> getHeader)
+    {
+        GameFilterParams.SortType = (SortType?)getHeader(null) ?? SortType.Ascending;
+    }
+
+    private async Task HandleDisplayClicked(DisplayType displayType)
+    {
+        DisplayType = displayType;
+        await DisplayTypeChanged.InvokeAsync(displayType);
+    }
+}
\ 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..75bae77
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.css
@@ -0,0 +1,69 @@
+.form-filter {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    align-items: center;
+}
+
+.search-container {
+    width: 150px;
+    min-width: 150px;
+}
+
+.slider-container {
+    width: 150px;
+    min-width: 150px;
+}
+
+.select-container {
+    width: 150px;
+    min-width: 150px;
+}
+
+.square-button {
+    height: 28px;
+    min-height: 28px;
+    width: 28px;
+    min-width: 28px;
+    border-radius: var(--small-radius);
+    background: var(--black);
+    overflow: hidden;
+}
+
+    .square-button:first-child {
+        margin-right: 16px;
+    }
+
+.square-button svg {
+    fill: var(--white);
+}
+
+    .square-button svg:hover {
+        cursor: pointer;
+        background: var(--low-white);
+    }
+
+.selected-icon {
+    fill: var(--violet) !important;
+}
+
+.sort-icon {
+    padding: 2px;
+}
+
+.list-icon {
+    padding-right: 1px;
+    padding-top: 0.5px;
+    padding-bottom: 0.5px;
+}
+
+.card-icon {
+    padding-top: 1px;
+    padding-right: 1px;
+}
+
+@media screen and (max-width: 1000px) {
+    .select-container {
+        display: none;
+    }
+}
\ 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..7106f83
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilterParams.cs
@@ -0,0 +1,15 @@
+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?>? SortProperty { get; set; }
+    public string? SearchName { get; set; }
+    public IEnumerable<string>? Plateforms { get; set; }
+    public IEnumerable<string>? Genres { get; set; }
+    public int MaxRating { get; set; }
+    public int MinRating { 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 87718be..e30c95a 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor
@@ -1,15 +1,16 @@
 @page "/Games"
 @using GameIdeas.BlazorApp.Layouts
+@using GameIdeas.BlazorApp.Pages.Games.Filter
 @using GameIdeas.BlazorApp.Shared.Components
-@using GameIdeas.BlazorApp.Shared.Headers
+@using GameIdeas.BlazorApp.Shared.Layouts.Header
 @using GameIdeas.Resources
 
 @layout MainLayout
 
 <PageTitle>@ResourcesKey.GamesIdeas</PageTitle>
 
-<HeaderBase>
+<HeaderLayout>
     <Body>
-        <div>PROUT</div>
+        <GameFilter @bind-DisplayType=DisplayType />
     </Body>
-</HeaderBase>
+</HeaderLayout>
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.cs
index dc671cf..d4cfdaf 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.cs
@@ -1,6 +1,8 @@
+using GameIdeas.BlazorApp.Pages.Games.Models;
+
 namespace GameIdeas.BlazorApp.Pages.Games;
 
 public partial class GamesBase ()
 {
-
+    private DisplayType DisplayType = DisplayType.List;
 }
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Models/AccountSetting.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Models/AccountSetting.cs
deleted file mode 100644
index 23e9ce3..0000000
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Models/AccountSetting.cs
+++ /dev/null
@@ -1,20 +0,0 @@
-namespace GameIdeas.BlazorApp.Pages.Games.Models;
-
-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/Pages/Games/Models/AddType.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Models/AddType.cs
index 6e34746..d526be0 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Models/AddType.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Models/AddType.cs
@@ -5,9 +5,3 @@ public enum AddType
     Manual,
     Auto
 }
-
-public class AddTypeParams(AddType addType, string label)
-{
-    public AddType AddType { get; set; } = addType;
-    public string? Label { get; set; } = label;
-}
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Models/DisplayType.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Models/DisplayType.cs
new file mode 100644
index 0000000..f3c0af4
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Models/DisplayType.cs
@@ -0,0 +1,7 @@
+namespace GameIdeas.BlazorApp.Pages.Games.Models;
+
+public enum DisplayType
+{
+    Card,
+    List
+}
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Properties/launchSettings.json b/src/GameIdeas/Client/GameIdeas.BlazorApp/Properties/launchSettings.json
index 8db20ce..fccd456 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Properties/launchSettings.json
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Properties/launchSettings.json
@@ -7,6 +7,7 @@
       "launchBrowser": true,
       "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
       "applicationUrl": "http://localhost:5172",
+      "launchUrl": "http://localhost:5172/Games",
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
       }
@@ -17,6 +18,7 @@
       "launchBrowser": true,
       "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
       "applicationUrl": "https://localhost:7060;http://localhost:5172",
+      "launchUrl": "http://localhost:7060/Games",
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
       }
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/AccountSettings.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor
similarity index 89%
rename from src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/AccountSettings.razor
rename to src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor
index 578eead..5b111c2 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/AccountSettings.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor
@@ -1,7 +1,7 @@
 @using GameIdeas.Resources
 @using Blazored.FluentValidation;
 
-<div class="account-setting-container" tabindex="1001">
+<div class="account-setting-container" tabindex="1000">
     <div class="account-setting-content @(ContentVisile ? string.Empty : "invisible")">
         @if (!AuthentificationService.IsLogin)
         {
@@ -36,10 +36,13 @@
         else
         {
             <div class="settings-list">
+                <div class="settings-element">
+                    @ResourcesKey.UserManager
+                </div>
+                <span class="line"></span>
                 <div class="settings-element" @onclick="HandleLogoutClicked">
                     @ResourcesKey.Logout
                 </div>
-                @* <span class="line"></span> *@
             </div>
         }
     </div>
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/AccountSettings.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.cs
similarity index 91%
rename from src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/AccountSettings.razor.cs
rename to src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.cs
index 97ff274..4e36135 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/AccountSettings.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.cs
@@ -2,7 +2,7 @@ using GameIdeas.BlazorApp.Services;
 using GameIdeas.Shared.Dto;
 using Microsoft.AspNetCore.Components.Forms;
 
-namespace GameIdeas.BlazorApp.Shared.Headers;
+namespace GameIdeas.BlazorApp.Shared.Components.Account;
 
 public partial class AccountSettings (
     AuthentificationService AuthentificationService)
@@ -39,17 +39,17 @@ public partial class AccountSettings (
     {
         if (EditContext?.Validate() == false)
         {
-            LoginDto.Password = string.Empty;
             return;
         }
 
         IsLoading = true;
         await Task.Delay(TimeSpan.FromSeconds(5));
+        Close();
+        AuthentificationService.Login();
         IsLoading = false;
 
         LoginDto = new();
-        Close();
-        AuthentificationService.Login();
+        EditContext = new EditContext(LoginDto);
     }
     private void HandleLogoutClicked()
     {
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/AccountSettings.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.css
similarity index 89%
rename from src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/AccountSettings.razor.css
rename to src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.css
index de479fc..6a651ee 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/AccountSettings.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.css
@@ -4,8 +4,8 @@
     position: fixed;
     animation-name: fade-in;
     animation-duration: 0.4s;
-    border: 2px solid var(--light-grey);
-    background: var(--black);
+    border: 2px solid var(--low-white);
+    background: var(--semi-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;
 }
@@ -30,8 +30,8 @@
 }
 
 ::deep .input-text {
-    background: var(--light-grey);
-    border: 2px solid rgb(255, 255, 255, 0.3);
+    background: var(--low-white);
+    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/Headers/LoginValidator.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/LoginValidator.cs
similarity index 85%
rename from src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/LoginValidator.cs
rename to src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/LoginValidator.cs
index 931bd7b..629c3c9 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/LoginValidator.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/LoginValidator.cs
@@ -1,7 +1,7 @@
 using FluentValidation;
 using GameIdeas.Shared.Dto;
 
-namespace GameIdeas.BlazorApp.Shared.Headers;
+namespace GameIdeas.BlazorApp.Shared.Components.Account;
 
 public class LoginValidator : AbstractValidator<LoginDto>
 {
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownContent.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownContent.razor
deleted file mode 100644
index 1ddac6b..0000000
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownContent.razor
+++ /dev/null
@@ -1,13 +0,0 @@
-@typeparam TItem
-
-<div @ref=Content class="dropdown-container" tabindex="1000"
-        @onfocusout=HandleDropdownAddFocusOut>
-    <div class="dropdown-content @(ContentVisile ? string.Empty : "invisible") @(Enum.GetName(Theme)?.ToLower())">
-        @foreach (var item in Items)
-        {
-            <div class="drowdown-element @(Enum.GetName(Theme)?.ToLower())" @onclick=HandleItemClicked>
-                @(LabelSelector != null ? LabelSelector.Invoke(item) : item?.ToString())
-            </div>
-        }
-    </div>
-</div>
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownContent.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownContent.razor.cs
deleted file mode 100644
index 97c8b71..0000000
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownContent.razor.cs
+++ /dev/null
@@ -1,36 +0,0 @@
-using Microsoft.AspNetCore.Components;
-
-namespace GameIdeas.BlazorApp.Shared.Components.Dropdown;
-
-public partial class DropdownContent<TItem>
-{
-    [Parameter] public TItem? Value { get; set; }
-    [Parameter] public EventCallback<TItem?> ValueChanged { get; set; }
-    [Parameter] public IEnumerable<TItem> Items { get; set; } = [];
-    [Parameter] public Func<TItem, string>? LabelSelector { get; set; }
-    [Parameter] public DropdownTheme Theme { get; set; }
-
-    private bool ContentVisile = false;
-    private DateTime ContentLastFocusOut = DateTime.Now;
-    private ElementReference Content;
-
-    public async Task OpenAsync()
-    {
-        if (DateTime.Now - ContentLastFocusOut >= TimeSpan.FromSeconds(0.2))
-        {
-            await Content.FocusAsync();
-            ContentVisile = true;
-        }
-    }
-
-    public void Close() => ContentVisile = false;
-
-    private void HandleDropdownAddFocusOut()
-    {
-        ContentLastFocusOut = DateTime.Now;
-        ContentVisile = false;
-    }
-
-    private async Task HandleItemClicked() => await ValueChanged.InvokeAsync(Value);
-
-}
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownContent.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownContent.razor.css
deleted file mode 100644
index 253d8f6..0000000
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownContent.razor.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.dropdown-content {
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    border-radius: var(--small-radius);
-    position: fixed;
-    animation-name: fade-in;
-    animation-duration: 0.4s;
-    margin-top: 4px;
-}
-
-.drowdown-element {
-    width: fit-content;
-}
-
-    .drowdown-element:hover {
-        cursor: pointer;
-    }
-
-.invisible {
-    display: none;
-}
-
-.dropdown-content.navigation {
-    gap: 4px;
-    background: var(--violet);
-    box-shadow: var(--drop-shadow);
-    padding: 4px 6px;
-}
-
-    .drowdown-element.navigation:hover {
-        color: var(--light-grey);
-    }
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownTheme.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownTheme.cs
deleted file mode 100644
index e225ac5..0000000
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownTheme.cs
+++ /dev/null
@@ -1,7 +0,0 @@
-namespace GameIdeas.BlazorApp.Shared.Components.Dropdown;
-
-public enum DropdownTheme
-{
-    Navigation,
-    Account
-}
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor
new file mode 100644
index 0000000..e921fb2
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor
@@ -0,0 +1,30 @@
+<div class="search-container">
+    <input type="text"
+           class="search-field"
+           @bind=@Text
+           @bind:event="oninput" 
+           @bind:after=HandleTextChanged />
+
+    @if (!string.IsNullOrEmpty(Text))
+    {
+        <div class="clear-icon" @onclick=HandleClearClicked>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
+            </svg>
+        </div>
+    }
+
+    <div class="search-icon @(Enum.GetName(Icon)?.ToLower())" @onclick=HandleSearchClicked>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            @if (Icon == SearchInputIcon.Search)
+            {
+                <path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
+            }
+            else if (Icon == SearchInputIcon.Dropdown)
+            {
+                <path d="M1 3H23L12 22" />
+            }
+        </svg>
+    </div>
+</div>
+
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs
new file mode 100644
index 0000000..d8f6e14
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs
@@ -0,0 +1,39 @@
+using Microsoft.AspNetCore.Components;
+
+namespace GameIdeas.BlazorApp.Shared.Components.Search;
+
+public partial class SearchInput
+{
+    [Parameter] public string? Text { get; set; }
+    [Parameter] public EventCallback<string> TextChanged { get; set; }
+    [Parameter] public EventCallback ClearClicked { get; set; }
+    [Parameter] public EventCallback SearchClicked { get; set; }
+    [Parameter] public SearchInputIcon Icon { get; set; }
+
+    protected override void OnInitialized()
+    {
+        Text = string.Empty;
+    }
+
+    public void SetText(string str)
+    {
+        Text = str;
+    }
+    
+    private async Task HandleTextChanged()
+    {
+        await TextChanged.InvokeAsync(Text);
+    }
+
+    private async Task HandleClearClicked()
+    {
+        Text = string.Empty;
+        await TextChanged.InvokeAsync(string.Empty);
+        await ClearClicked.InvokeAsync();
+    }
+    private async Task HandleSearchClicked()
+    {
+        await TextChanged.InvokeAsync(Text);
+        await SearchClicked.InvokeAsync();
+    }
+}
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.css
new file mode 100644
index 0000000..17aca87
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.css
@@ -0,0 +1,58 @@
+.search-container {
+    display: flex;
+    flex-direction: row;
+    gap: 4px;
+    height: 28px;
+    padding-left: 8px;
+    padding-right: 2px;
+    border-radius: var(--small-radius);
+    background: var(--black);
+    overflow: hidden;
+    align-items: center;
+    width: 140px;
+}
+
+::deep .search-field {
+    border: none !important;
+    outline: none !important;
+    background: none !important;
+    color: var(--white);
+    height: 100%;
+    padding: 0;
+    min-width: 0;
+}
+
+.clear-icon {
+    min-height: 18px;
+    min-width: 18px;
+    height: 18px;
+    width: 18px;
+}
+
+    .clear-icon:hover {
+        cursor: pointer;
+    }
+
+    .clear-icon svg {
+        fill: var(--white);
+    }
+
+.search-icon {
+    min-height: 24px;
+    min-width: 24px;
+    height: 24px;
+    width: 24px;
+}
+
+    .search-icon:hover {
+        cursor: pointer;
+    }
+
+    .search-icon svg {
+        fill: var(--white);
+    }
+
+    .search-icon.dropdown svg {
+        fill: var(--violet);
+        transform: scale(.8, .5);
+    }
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInputIcon.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInputIcon.cs
new file mode 100644
index 0000000..3f731f2
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInputIcon.cs
@@ -0,0 +1,7 @@
+namespace GameIdeas.BlazorApp.Shared.Components.Search;
+
+public enum SearchInputIcon
+{
+    Search,
+    Dropdown
+}
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor
new file mode 100644
index 0000000..837f2ad
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor
@@ -0,0 +1,15 @@
+@typeparam TItem
+
+<div class="select-element @(Enum.GetName(Theme)?.ToLower())" @onclick=HandleItemClicked>
+    <div class="selected">
+        @if (Value != null && Value.IsSelected)
+        {
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                <path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z" />
+            </svg>
+        }
+    </div>
+    <div class="select-label">
+        @Value?.Label
+    </div>
+</div>
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.cs
new file mode 100644
index 0000000..917c9a6
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.cs
@@ -0,0 +1,22 @@
+using GameIdeas.BlazorApp.Shared.Components.Select.Models;
+using Microsoft.AspNetCore.Components;
+
+namespace GameIdeas.BlazorApp.Shared.Components.Select.Components;
+
+public partial class SelectListElement<TItem>
+{
+    [Parameter] public EventCallback<SelectElement<TItem>?> ValueChanged { get; set; }
+    [Parameter] public SelectElement<TItem>? Value { get; set; }
+    [Parameter] public SelectListTheme Theme { get; set; }
+    private async Task HandleItemClicked()
+    {
+        if (Value == null)
+        {
+            return;
+        }
+
+        Value.IsSelected = true;
+        StateHasChanged();
+        await ValueChanged.InvokeAsync(Value);
+    }
+}
\ No newline at end of file
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
new file mode 100644
index 0000000..8f975aa
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css
@@ -0,0 +1,67 @@
+.select-element {
+    display: flex;
+    flex-direction: row;
+    width: fit-content;
+    width: 100%;
+    gap: 6px;
+    height: 20px;
+    align-items: center;
+}
+
+    .select-element:hover {
+        cursor: pointer;
+    }
+
+.selected {
+    width: 12px;
+    min-width: 12px;
+    height: 12px;
+    min-height: 12px;
+}
+
+.selected svg {
+    display: block;
+    fill: var(--white)
+}
+
+/***** Navigation Theme *****/
+.navigation {
+    padding: 4px 8px;
+}
+    .navigation:hover {
+        background: var(--violet-selected);
+    }
+
+    .navigation .selected {
+        display: none;
+    } 
+
+/***** Sort Theme *****/
+.sort {
+    padding: 2px 6px;
+}
+
+    .sort:hover {
+        background: var(--low-white);
+    }
+
+    .sort .select-label {
+        text-wrap: nowrap;
+        margin-right: 6px;
+    }
+
+/***** Filter Theme *****/
+.filter {
+    padding: 2px 6px;
+}
+
+    .filter:hover {
+        background: var(--low-white);
+    }
+
+    .filter .select-label {
+        text-wrap: nowrap;
+        margin-right: 6px;
+    }
+
+
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Models/SelectElement.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Models/SelectElement.cs
new file mode 100644
index 0000000..5e0e8f4
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Models/SelectElement.cs
@@ -0,0 +1,9 @@
+namespace GameIdeas.BlazorApp.Shared.Components.Select.Models;
+
+public class SelectElement<TItem>
+{
+    public TItem? Item { get; set; }
+    public string? Label { get; set; }
+    public bool IsSelected { get; set; } = false;
+    public bool IsNew { get; set; } = false;
+}
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Models/SelectTheme.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Models/SelectTheme.cs
new file mode 100644
index 0000000..f0c1d1f
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Models/SelectTheme.cs
@@ -0,0 +1,8 @@
+namespace GameIdeas.BlazorApp.Shared.Components.Select.Models;
+
+public enum SelectListTheme
+{
+    Navigation,
+    Sort,
+    Filter
+}
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor
new file mode 100644
index 0000000..c9495fc
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor
@@ -0,0 +1,33 @@
+@using GameIdeas.BlazorApp.Shared.Components.Search
+@using GameIdeas.BlazorApp.Shared.Components.Select.Components
+@typeparam TItem
+
+<div class="select-list" tabindex="1001" @ref="BaseElement">
+    <div class="select-button" @onfocusin=HandleFocusIn @onfocusout=HandleFocusOut>
+        <SearchInput @ref=SearchInput
+                     Icon="SearchInputIcon.Dropdown"
+                     TextChanged="HandleTextChanged"
+                     ClearClicked="HandleTextChanged"
+                     SearchClicked="HandleSearchClicked" />
+    </div>
+    <div class="select-container @(AlignRight ? "align-right" : "")"
+         tabindex="1000"
+         @ref=ContentElement
+         @onfocusin=HandleContentFocusIn
+         @onfocusout=HandleContentFocusOut>
+
+        @if (IsContentOpen)
+        {
+            <div class="select-content @(Enum.GetName(Theme)?.ToLower())">
+                @foreach (var item in Items)
+                {
+                    <SelectListElement TItem="TItem"
+                                       Value="item"
+                                       ValueChanged="HandleItemClicked"
+                                       Theme="Theme" />
+                }
+            </div>
+        }
+    </div>
+</div>
+
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs
new file mode 100644
index 0000000..5d5e07c
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs
@@ -0,0 +1,71 @@
+using GameIdeas.BlazorApp.Shared.Components.Search;
+using GameIdeas.BlazorApp.Shared.Components.Select.Models;
+using Microsoft.AspNetCore.Components;
+
+namespace GameIdeas.BlazorApp.Shared.Components.Select;
+
+public partial class MultipleSelectList<TItem>
+{
+    [Parameter] public IEnumerable<TItem>? Values { get; set; }
+    [Parameter] public EventCallback<IEnumerable<TItem>?> ValuesChanged { get; set; }
+    [Parameter] public IEnumerable<SelectElement<TItem>> Items { get; set; } = [];
+    [Parameter] public SelectListTheme Theme { get; set; }
+    [Parameter] public bool AlignRight { get; set; }
+
+    private bool IsContentOpen
+    {
+        get => InputFocus || ContentFocus;
+    }
+
+    private bool InputFocus = false;
+    private bool ContentFocus = false;
+    private SearchInput? SearchInput;
+    private ElementReference ContentElement;
+    private ElementReference BaseElement;
+
+    private async Task HandleItemClicked(SelectElement<TItem> selectedValue)
+    {
+        Values = Items.Where(x => x.IsSelected && x.Item != null).Select(x => x.Item!);
+        SearchInput?.SetText(string.Join(", ", Values));
+        await ValuesChanged.InvokeAsync(Values);
+    }
+
+    private async Task HandleTextChanged()
+    {
+        await BaseElement.FocusAsync();
+    }
+
+    private void HandleFocusIn()
+    {
+        InputFocus = true;
+    }
+
+    private void HandleContentFocusIn()
+    {
+        ContentFocus = true;
+    }
+
+    private async Task HandleContentFocusOut()
+    {
+        await Task.Delay(TimeSpan.FromSeconds(0.3));
+        ContentFocus = false;
+    }
+
+    private async Task HandleFocusOut()
+    {
+        await Task.Delay(TimeSpan.FromSeconds(0.3));
+        InputFocus = false;
+    }
+
+    private async Task HandleSearchClicked()
+    {
+        if (!IsContentOpen)
+        {
+            await ContentElement.FocusAsync();
+        }
+        else
+        {
+            await BaseElement.FocusAsync();
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.css
new file mode 100644
index 0000000..0884707
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.css
@@ -0,0 +1,49 @@
+.select-list {
+    position: relative;
+}
+
+.select-container {
+    margin-top: 4px;
+    position: absolute;
+}
+
+.align-right {
+    right: 0;
+}
+
+.select-content {
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    border-radius: var(--small-radius);
+    animation-name: fade-in;
+    animation-duration: 0.4s;
+}
+
+.line {
+    margin: 2px 6px;
+    border-bottom: 2px solid var(--low-white);
+}
+
+
+/***** Navigation Theme *****/
+.select-content.navigation {
+    background: var(--violet);
+    box-shadow: var(--drop-shadow);
+}
+
+/***** Sort Theme *****/
+.select-content.sort {
+    background: var(--semi-black);
+    box-shadow: var(--drop-shadow);
+    padding: 4px 0;
+}
+
+/***** Filter Theme *****/
+.select-content.filter {
+    background: var(--semi-black);
+    box-shadow: var(--drop-shadow);
+    padding: 4px 0;
+    min-width: 150px;
+}
+
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor
new file mode 100644
index 0000000..0aee122
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor
@@ -0,0 +1,37 @@
+@using GameIdeas.BlazorApp.Shared.Components.Select.Components
+@typeparam TItem
+
+<div class="select-list" @onclick=HandleButtonClicked>
+    <div class="select-button">
+        @Button
+    </div>
+    <div @ref=Container @onfocusout=HandleFocusOut
+        class="select-container @(AlignRight ? "align-right" : "")" 
+        tabindex="1000">
+
+        @if (ContentVisile)
+        {
+            <div class="select-content @(Enum.GetName(Theme)?.ToLower())">
+                @foreach (var item in Headers)
+                {
+                    <SelectListElement TItem="TItem"
+                                       Value="item"
+                                       ValueChanged="HandleHeaderClicked"
+                                       Theme="Theme" />
+                }
+                @if (Headers.Any())
+                {
+                    <span class="line"></span>
+                }
+                @foreach (var item in Items)
+                {
+                    <SelectListElement TItem="TItem"
+                                       Value="item"
+                                       ValueChanged="HandleItemClicked"
+                                       Theme="Theme" />
+                }
+            </div>
+        }
+    </div>
+</div>
+
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.cs
new file mode 100644
index 0000000..59423dd
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.cs
@@ -0,0 +1,64 @@
+using GameIdeas.BlazorApp.Shared.Components.Select.Models;
+using Microsoft.AspNetCore.Components;
+
+namespace GameIdeas.BlazorApp.Shared.Components.Select;
+
+public partial class SelectList<TItem> 
+{
+    [Parameter] public RenderFragment? Button { get; set; }
+    [Parameter] public TItem? Value { get; set; }
+    [Parameter] public EventCallback<TItem?> ValueChanged { get; set; }
+    [Parameter] public TItem? Header { get; set; }
+    [Parameter] public EventCallback<TItem?> HeaderChanged { get; set; }
+    [Parameter] public IEnumerable<SelectElement<TItem>> Items { get; set; } = [];
+    [Parameter] public IEnumerable<SelectElement<TItem>> Headers { get; set; } = [];
+    [Parameter] public SelectListTheme Theme { get; set; }
+    [Parameter] public bool AlignRight { get; set; }
+
+    private bool ContentVisile = false;
+    private DateTime ContentLastFocusOut = DateTime.Now;
+    private ElementReference Container;
+
+    public async Task OpenAsync()
+    {
+        if (DateTime.Now - ContentLastFocusOut >= TimeSpan.FromSeconds(0.2))
+        {
+            await Container.FocusAsync();
+            ContentVisile = true;
+        }
+    }
+
+    public void Close() => ContentVisile = false;
+
+    private async Task HandleButtonClicked() => await OpenAsync();
+
+    private void HandleFocusOut()
+    {
+        ContentLastFocusOut = DateTime.Now;
+        ContentVisile = false;
+    }
+
+    private async Task HandleItemClicked(SelectElement<TItem> selectedValue)
+    {
+        foreach (var item in Items)
+        {
+            item.IsSelected = false;
+        }
+
+        selectedValue.IsSelected = true;
+        Value = selectedValue.Item;
+        await ValueChanged.InvokeAsync(Value);
+    }
+
+    private async Task HandleHeaderClicked(SelectElement<TItem> selectedValue)
+    {
+        foreach (var header in Headers)
+        {
+            header.IsSelected = false;
+        }
+
+        selectedValue.IsSelected = true;
+        Header = selectedValue.Item;
+        await HeaderChanged.InvokeAsync(Header);
+    }
+}
\ No newline at end of file
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
new file mode 100644
index 0000000..3e5473b
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css
@@ -0,0 +1,40 @@
+.select-list {
+    position: relative;
+}
+
+.select-container {
+    margin-top: 4px;
+    position: absolute;
+}
+
+.align-right {
+    right: 0;
+}
+
+.select-content {
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    border-radius: var(--small-radius);
+    animation-name: fade-in;
+    animation-duration: 0.4s;
+}
+
+.line {
+    margin: 2px 6px;
+    border-bottom: 2px solid var(--low-white);
+}
+
+
+/***** Navigation Theme *****/
+.select-content.navigation {
+    background: var(--violet);
+    box-shadow: var(--drop-shadow);
+}
+
+/***** Sort Theme *****/
+.select-content.sort {
+    background: var(--semi-black);
+    box-shadow: var(--drop-shadow);
+    padding: 4px 0;
+}
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor
new file mode 100644
index 0000000..f0eb5ab
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor
@@ -0,0 +1,13 @@
+<div class="container">
+    <div class="slider-track" style="@FillColor()"></div>
+    
+    <input type="range" id="min-range" style="@StatusColor(Params.ValueMin)" min="@Params.Min" max="@Params.Max" 
+        @bind="@Params.ValueMin" @bind:event="oninput" @bind:after=HandleSlideOnInput />
+    <input type="range" id="max-range" style="@StatusColor(Params.ValueMax)" min="@Params.Min" max="@Params.Max" 
+        @bind="@Params.ValueMax" @bind:event="oninput" @bind:after=HandleSlideTwoInput />
+
+    <div class="values">
+        <span class="value">@Params.ValueMin</span>
+        <span class="value">@Params.ValueMax</span>
+    </div>
+</div>
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.cs
new file mode 100644
index 0000000..bdc2846
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.cs
@@ -0,0 +1,57 @@
+using Microsoft.AspNetCore.Components;
+using System.Threading.Tasks;
+
+namespace GameIdeas.BlazorApp.Shared.Components.SliderRange;
+
+public partial class SliderRange
+{
+    [Parameter] public SliderRangeParams Params { get; set; } = new();
+    [Parameter] public int Max { get; set; }
+    [Parameter] public EventCallback<int> MaxChanged { get; set; }
+    [Parameter] public int Min { get; set; }
+    [Parameter] public EventCallback<int> MinChanged { get; set; }
+
+    private async Task HandleSlideTwoInput()
+    {
+        if (Params.ValueMax - Params.ValueMin <= Params.Gap)
+        {
+            Params.ValueMin = Params.ValueMax - Params.Gap;
+        }
+
+        Max = Params.Max;
+        await MaxChanged.InvokeAsync(Params.Max);
+    }
+
+    private async Task HandleSlideOnInput()
+    {
+        if (Params.ValueMax - Params.ValueMin <= Params.Gap)
+        {
+            Params.ValueMax = Params.ValueMin + Params.Gap;
+        }
+
+        Min = Params.Min;
+        await MinChanged.InvokeAsync(Params.Min);
+    }
+
+    private string FillColor()
+    {
+        var percent1 = (double)(Params.ValueMin - Params.Min) / (Params.Max - Params.Min) * 100;
+        var percent2 = (double)(Params.ValueMax - Params.Min) / (Params.Max - Params.Min) * 100;
+        return $"background: linear-gradient(to right, var(--light-grey) {percent1}% , var(--violet) {percent1}% , var(--violet) {percent2}%, var(--light-grey) {percent2}%)";
+    }
+
+    private string StatusColor(int value)
+    {
+        string str = "--thumb-color: var({0});";
+
+        int firstTier = (int)Math.Floor(0.33 * Params.Max);
+        int secondTier = (int)Math.Ceiling(0.66 * Params.Max);
+
+        return value switch
+        {
+            int x when x <= firstTier => string.Format(str, "--red"),
+            int x when x >= secondTier => string.Format(str, "--green"),
+            _ => string.Format(str, "--yellow"),
+        };
+    }
+}
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.css
new file mode 100644
index 0000000..cf23999
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.css
@@ -0,0 +1,86 @@
+.container {
+    position: relative;
+    width: 100%;
+}
+
+input[type="range"] {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    width: 100%;
+    outline: none;
+    margin: auto;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    background-color: transparent;
+    pointer-events: none;
+}
+
+.slider-track {
+    width: 100%;
+    height: 2px;
+    margin: auto;
+    border-radius: 2px;
+}
+
+input[type="range"]::-webkit-slider-runnable-track {
+    -webkit-appearance: none;
+    height: 2px;
+}
+
+input[type="range"]::-moz-range-track {
+    -moz-appearance: none;
+    height: 2px;
+}
+
+input[type="range"]::-ms-track {
+    appearance: none;
+    height: 2px;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    height: 1em;
+    width: 1em;
+    background-color: var(--thumb-color);
+    cursor: pointer;
+    margin-top: -6px;
+    pointer-events: auto;
+    border-radius: 50%;
+}
+
+input[type="range"]::-moz-range-thumb {
+    -webkit-appearance: none;
+    height: 1em;
+    width: 1em;
+    cursor: pointer;
+    border-radius: 50%;
+    background-color: var(--thumb-color);
+    pointer-events: auto;
+    border: none;
+}
+
+input[type="range"]::-ms-thumb {
+    appearance: none;
+    height: 1em;
+    width: 1em;
+    cursor: pointer;
+    border-radius: 50%;
+    background-color: var(--thumb-color);
+    pointer-events: auto;
+}
+
+.values {
+    display: flex;
+    position: absolute;
+    margin-top: 10px;
+    width: 100%;
+    font-weight: bold;
+    justify-content: space-between;
+}
+
+.value {
+    width: 1em;
+    text-align:center;
+}
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRangeParams.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRangeParams.cs
new file mode 100644
index 0000000..b82f00b
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRangeParams.cs
@@ -0,0 +1,10 @@
+namespace GameIdeas.BlazorApp.Shared.Components.SliderRange;
+
+public class SliderRangeParams
+{
+    public int Min{ get; set; }
+    public int Max { get; set; }
+    public int ValueMin { get; set; }
+    public int ValueMax { get; set; }
+    public int Gap { get; set; } = 0;
+}
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBase.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBase.razor.cs
deleted file mode 100644
index 722958a..0000000
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBase.razor.cs
+++ /dev/null
@@ -1,46 +0,0 @@
-using GameIdeas.BlazorApp.Pages.Games.Models;
-using GameIdeas.BlazorApp.Shared.Components.Dropdown;
-using GameIdeas.Resources;
-using Microsoft.AspNetCore.Components;
-
-namespace GameIdeas.BlazorApp.Shared.Headers;
-
-public partial class HeaderBase
-{
-    [Parameter] public RenderFragment? Body { get; set; }
-    [Parameter] public EventCallback<AddType> AddTypeChanged { get; set; }
-
-    private DropdownContent<AddTypeParams>? DropdownAdd;
-    private readonly IEnumerable<AddTypeParams> AddTypes =
-    [
-        new AddTypeParams(AddType.Manual, ResourcesKey.ManualAdd),
-        new AddTypeParams(AddType.Auto, ResourcesKey.AutoAdd)
-    ];
-
-    private AccountSettings? AccountSettings;
-
-    private void HandleIconClicked()
-    {
-        throw new NotImplementedException();
-    }
-
-    private async Task HandleMoreButton()
-    {
-        if (DropdownAdd != null)
-        {
-            await DropdownAdd.OpenAsync();
-        }
-
-        AccountSettings?.Close();
-    }
-
-    private async Task HandleAddTypeClickedAsync(AddTypeParams value)
-    {
-        await AddTypeChanged.InvokeAsync(value.AddType);
-    }
-
-    private void HandleAccountClicked()
-    {
-        AccountSettings?.Toggle();
-    }
-}
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBase.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor
similarity index 55%
rename from src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBase.razor
rename to src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor
index d6c82f0..17f9cc6 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBase.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor
@@ -1,11 +1,15 @@
 @using GameIdeas.BlazorApp.Pages.Games
 @using GameIdeas.BlazorApp.Pages.Games.Models
-@using GameIdeas.BlazorApp.Shared.Components.Dropdown
+@using GameIdeas.BlazorApp.Shared.Components.Account
+@using GameIdeas.BlazorApp.Shared.Components.Select
+@using GameIdeas.BlazorApp.Shared.Components.Select.Models
 @using GameIdeas.Resources
 
+@inherits LayoutComponentBase
+
 <div class="header-tab">
     <div class="icon-container" @onclick="HandleIconClicked">
-        <img src="icon.png" alt="Game Ideas">        
+        <img src="icon.png" alt="Game Ideas">
     </div>
 
     @Body
@@ -18,21 +22,23 @@
                         <path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
                     </svg>
                 </div>
-                <div class="second-button button" @onclick=HandleMoreButton>
-                    <svg class="button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                        <path d="M1 3H23L12 22" />
-                    </svg>
-                </div>
+                <SelectList TItem="AddType"
+                            Items="SelectElements"
+                            ValueChanged=HandleAddTypeClickedAsync
+                            Theme="SelectListTheme.Navigation"
+                            AlignRight=true>
+                    <Button>
+                        <div class="second-button button">
+                            <svg class="button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                                <path d="M1 3H23L12 22" />
+                            </svg>
+                        </div>
+                    </Button>
+                </SelectList>
             </div>
-            <DropdownContent @ref="DropdownAdd"
-                             TItem="AddTypeParams"
-                             ValueChanged=HandleAddTypeClickedAsync
-                             Items="AddTypes"
-                             LabelSelector="(addtype => addtype.Label)"
-                             Theme="DropdownTheme.Navigation" />
         </div>
         <div class="account-container">
-            <div class="icon-container">
+            <div class="icon-container" @onclick=HandleAccountClicked>
                 <svg class="account-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                     <path d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" />
                 </svg>
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.cs
new file mode 100644
index 0000000..f3e335a
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.cs
@@ -0,0 +1,34 @@
+using GameIdeas.BlazorApp.Pages.Games.Models;
+using GameIdeas.BlazorApp.Shared.Components.Account;
+using GameIdeas.BlazorApp.Shared.Components.Select.Models;
+using GameIdeas.Resources;
+using Microsoft.AspNetCore.Components;
+
+namespace GameIdeas.BlazorApp.Shared.Layouts.Header;
+
+public partial class HeaderLayout : LayoutComponentBase
+{
+    [Parameter] public EventCallback<AddType> AddTypeChanged { get; set; }
+
+    private readonly IEnumerable<SelectElement<AddType>> SelectElements = [
+        new SelectElement<AddType> { Item = AddType.Manual, Label = ResourcesKey.ManualAdd },
+        new SelectElement<AddType> { Item = AddType.Auto, Label = ResourcesKey.AutoAdd }
+    ];
+
+    private AccountSettings? AccountSettings;
+
+    private void HandleIconClicked()
+    {
+        throw new NotImplementedException();
+    }
+
+    private async Task HandleAddTypeClickedAsync(AddType value)
+    {
+        await AddTypeChanged.InvokeAsync(value);
+    }
+
+    private void HandleAccountClicked()
+    {
+        AccountSettings?.Toggle();
+    }
+}
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBase.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.css
similarity index 98%
rename from src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBase.razor.css
rename to src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.css
index 3648621..7661644 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBase.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.css
@@ -42,7 +42,7 @@
     flex-direction: row;
     background: var(--violet);
     border-radius: var(--small-radius);
-    overflow: hidden;
+    overflow: visible;
 }
 
 .button {
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css
index b9df5af..725eae6 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css
@@ -8,8 +8,9 @@
     --yellow: #FFC107;
     --green: #43F8C0;
     --light-grey: #5C5C5E;
-    --black: rgba(44, 43, 46, 0.8);
+    --black: rgba(0, 0, 0, 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.Resources/CreateStaticResourceKey.cs b/src/GameIdeas/GameIdeas.Resources/CreateStaticResourceKey.cs
index 2509e89..d81c880 100644
--- a/src/GameIdeas/GameIdeas.Resources/CreateStaticResourceKey.cs
+++ b/src/GameIdeas/GameIdeas.Resources/CreateStaticResourceKey.cs
@@ -10,6 +10,7 @@ public class Translations (TranslationService translationService)
     public string Logout => translationService.Translate(nameof(Logout));
     public string EnterUsername => translationService.Translate(nameof(EnterUsername));
     public string EnterPassword => translationService.Translate(nameof(EnterPassword));
+    public string UserManager => translationService.Translate(nameof(UserManager));
 }
 
 public static class ResourcesKey
@@ -28,4 +29,5 @@ public static class ResourcesKey
     public static string Logout => _instance?.Logout ?? throw new InvalidOperationException("ResourcesKey.Logout is not initialized.");
     public static string EnterUsername => _instance?.EnterUsername ?? throw new InvalidOperationException("ResourcesKey.EnterUsername is not initialized.");
     public static string EnterPassword => _instance?.EnterPassword ?? throw new InvalidOperationException("ResourcesKey.EnterPassword is not initialized.");
+    public static string UserManager => _instance?.UserManager ?? throw new InvalidOperationException("ResourcesKey.UserManager is not initialized.");
 }
\ No newline at end of file
diff --git a/src/GameIdeas/GameIdeas.Shared/Constants/GlobalConstants.cs b/src/GameIdeas/GameIdeas.Shared/Constants/GlobalConstants.cs
new file mode 100644
index 0000000..21d357b
--- /dev/null
+++ b/src/GameIdeas/GameIdeas.Shared/Constants/GlobalConstants.cs
@@ -0,0 +1,7 @@
+namespace GameIdeas.Shared.Constants;
+
+public class GlobalConstants
+{
+    public const string EnterKeyCode = "Enter";
+    public const string PadEnterKeyCode = "NumpadEnter";
+}
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
+}
diff --git a/src/GameIdeas/Server/GameIdeas.WebAPI/Files/GameIdeas.fr.json b/src/GameIdeas/Server/GameIdeas.WebAPI/Files/GameIdeas.fr.json
index ea987f0..5feb362 100644
--- a/src/GameIdeas/Server/GameIdeas.WebAPI/Files/GameIdeas.fr.json
+++ b/src/GameIdeas/Server/GameIdeas.WebAPI/Files/GameIdeas.fr.json
@@ -5,5 +5,6 @@
   "Login": "Se connecter",
   "Logout": "Se déconnecter",
   "EnterUsername": "Nom d'utilisateur",
-  "EnterPassword": "Mot de passe"
+  "EnterPassword": "Mot de passe",
+  "UserManager": "Gestion des utilisateurs"
 }
\ No newline at end of file