diff --git a/ValblazeProject/Pages/CraftingPage.razor b/ValblazeProject/Pages/CraftingPage.razor
new file mode 100644
index 0000000..c16c8a0
--- /dev/null
+++ b/ValblazeProject/Pages/CraftingPage.razor
@@ -0,0 +1,9 @@
+@using System.Globalization
+@using ValblazeProject.Components
+@using ValblazeProject.Models
+
+<h3>Encour</h3>
+
+<div>
+    <Crafting Items="Items" Recipes="Recipes" />
+</div>
diff --git a/ValblazeProject/Pages/CraftingPage.razor.cs b/ValblazeProject/Pages/CraftingPage.razor.cs
new file mode 100644
index 0000000..acbd878
--- /dev/null
+++ b/ValblazeProject/Pages/CraftingPage.razor.cs
@@ -0,0 +1,33 @@
+using Microsoft.AspNetCore.Components;
+using ValblazeProject.Components;
+using ValblazeProject.Models;
+using ValblazeProject.Services;
+
+namespace ValblazeProject.Pages
+{
+    public partial class CraftingPage
+    {
+
+        [Inject]
+        public IDataService DataService { get; set; }
+
+        public List<Item> Items { get; set; } = new List<Item>();
+
+        private List<CraftingRecipe> Recipes { get; set; } = new List<CraftingRecipe>();
+
+        protected override async Task OnAfterRenderAsync(bool firstRender)
+        {
+            base.OnAfterRenderAsync(firstRender);
+
+            if (!firstRender)
+            {
+                return;
+            }
+
+            Items = await DataService.List(0, await DataService.Count());
+            Recipes = await DataService.GetRecipes();
+
+
+        }
+    }
+}
diff --git a/ValblazeProject/Pages/Index.razor b/ValblazeProject/Pages/Index.razor
index 9cb9b96..e4cef82 100644
--- a/ValblazeProject/Pages/Index.razor
+++ b/ValblazeProject/Pages/Index.razor
@@ -2,7 +2,6 @@
 @using ValblazeProject.Components
 @using ValblazeProject.Models
 
-
 @page "/"
 
 <PageTitle>Index</PageTitle>
@@ -15,75 +14,8 @@ Welcome to your new app.
     <b>CurrentCulture</b>: @CultureInfo.CurrentCulture
 </p>
 
-
 <SurveyPrompt Title="How is Blazor working for you?" />
 
-<!--
-<Card>
-    <CardHeader>
-        <div class="card-header">
-           My Templated Component
-        </div>
-    </CardHeader>
-    <CardBody>
-        <div class="card-body">
-            <h5>Welcome To Template Component</h5>
-        </div>
-    </CardBody>
-    <CardFooter>
-        <div class="card-footer text-muted">
-            Click Here
-        </div>
-    </CardFooter>
-</Card>
-
-<Card>
-    <CardHeader>
-        <div class="card-header">
-            Templated Component
-        </div>
-    </CardHeader>
-    <CardHeader>
-        <div class="card-header">
-            Hi I'm duplicated header
-        </div>
-    </CardHeader>
-</Card>
-
-
-<Card Item="CakeItem">
-    <CardHeader>
-        <div class="card-header">
-            Cake Token Number - @context.Id
-        </div>
-    </CardHeader>
-    <CardBody>
-        <div class="card-body">
-            <div>@context.Name</div>
-            <div>$ @context.Cost</div>
-        </div>
-    </CardBody>
-    <CardFooter>
-        <div class="card-footer text-muted">
-            Click Here
-        </div>
-    </CardFooter>
-</Card>
-
-<Card Item="CakeItem" Context="cakeContext">
-    <CardHeader>
-        <div class="card-header">
-            Cake Token Number - @cakeContext.Id
-        </div>
-    </CardHeader>
-    <CardBody>
-        <div class="card-body">
-            <div>@cakeContext.Name</div>
-            <div>$ @cakeContext.Cost</div>
-        </div>
-    </CardBody>
-</Card>
--->
 <ShowItems Items="Cakes" >
     <ShowTemplate Context="CakeContext">
         <div class="card text-center">
@@ -100,7 +32,3 @@ Welcome to your new app.
         </div>
     </ShowTemplate>
 </ShowItems>
-
-<div>
-    <Crafting Items="Items" Recipes="Recipes" />
-</div>
\ No newline at end of file
diff --git a/ValblazeProject/Pages/Index.razor.cs b/ValblazeProject/Pages/Index.razor.cs
index 61d129e..8d208d7 100644
--- a/ValblazeProject/Pages/Index.razor.cs
+++ b/ValblazeProject/Pages/Index.razor.cs
@@ -9,33 +9,6 @@ namespace ValblazeProject.Pages
     {
         public List<Cake> Cakes { get; set; }
 
-        /*protected override Task OnAfterRenderAsync(bool firstRender)
-        {
-            LoadCakes();
-            StateHasChanged();
-            return base.OnAfterRenderAsync(firstRender);
-        }
-
-        public void LoadCakes()
-        {
-            Cakes = new List<Cake>
-        {
-            // items hidden for display purpose
-            new Cake
-            {
-                Id = 1,
-                Name = "Red Velvet",
-                Cost = 60
-            },
-        };
-        }
-        private Cake CakeItem = new Cake
-        {
-            Id = 1,
-            Name = "Black Forest",
-            Cost = 50
-        };*/
-
         [Inject]
         public IDataService DataService { get; set; }
 
diff --git a/ValblazeProject/Pages/Inventaire.razor b/ValblazeProject/Pages/Inventaire.razor
new file mode 100644
index 0000000..4aad047
--- /dev/null
+++ b/ValblazeProject/Pages/Inventaire.razor
@@ -0,0 +1,5 @@
+<h3>Inventaire</h3>
+
+@code {
+
+}
diff --git a/ValblazeProject/Pages/List.razor b/ValblazeProject/Pages/List.razor
index 1f5fb1e..e72d37e 100644
--- a/ValblazeProject/Pages/List.razor
+++ b/ValblazeProject/Pages/List.razor
@@ -31,14 +31,14 @@
     </DataGridColumn>
     <DataGridColumn TItem="Item" Field="@nameof(Item.Id)" Caption="Image">
         <DisplayTemplate>
-                @if (!string.IsNullOrWhiteSpace(context.ImageBase64))
-                {
-                    <img src="data:image/png;base64, @(context.ImageBase64)" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="min-width: 50px; max-width: 150px" />
-                }
-                else
-                {
-                    <img src="images/default.png" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="max-width: 150px"/>
-                }
+            @if (!string.IsNullOrWhiteSpace(context.ImageBase64))
+            {
+                <img src="data:image/png;base64, @(context.ImageBase64)" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="min-width: 50px; max-width: 150px" />
+            }
+            else
+            {
+                <img src="images/default.png" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="max-width: 150px"/>
+            }
         </DisplayTemplate>
     </DataGridColumn>
     <DataGridColumn TItem="Item" Field="@nameof(Item.DisplayName)" Caption="Display name" />
diff --git a/ValblazeProject/Shared/MainLayout.razor b/ValblazeProject/Shared/MainLayout.razor
index a81e2c4..e46c071 100644
--- a/ValblazeProject/Shared/MainLayout.razor
+++ b/ValblazeProject/Shared/MainLayout.razor
@@ -2,9 +2,9 @@
 @using ValblazeProject.UIThemeClasses
 
 <div class="page">
+    <CultureSelector />
     <div class="sidebar">
         <NavMenu />
-        <CultureSelector />
     </div>
 
     <div class="main">
diff --git a/ValblazeProject/Shared/NavMenu.razor b/ValblazeProject/Shared/NavMenu.razor
index 54297f0..e1aff3a 100644
--- a/ValblazeProject/Shared/NavMenu.razor
+++ b/ValblazeProject/Shared/NavMenu.razor
@@ -19,6 +19,11 @@
                 <span class="oi oi-home" aria-hidden="true"></span> Home
             </NavLink>
         </div>
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="CraftingPage">
+                <span class="oi oi-plus" aria-hidden="true"></span> Counter
+            </NavLink>
+        </div>
         <div class="nav-item px-3">
             <NavLink class="nav-link" href="counter">
                 <span class="oi oi-plus" aria-hidden="true"></span> Counter