diff --git a/myBlazorApp/myBlazorApp/Pages/Inventory.razor b/myBlazorApp/myBlazorApp/Pages/Inventory.razor
index 5ad0477..97de069 100644
--- a/myBlazorApp/myBlazorApp/Pages/Inventory.razor
+++ b/myBlazorApp/myBlazorApp/Pages/Inventory.razor
@@ -5,68 +5,72 @@
 
 <h3>Inventory</h3>
 
-
-<div class="inventory-items">
-    <InventoryItem Index="0" Item=@itemsInventory.ElementAt(0)/>
-    <InventoryItem Index="1" />
-    <InventoryItem Index="2" />
-    <InventoryItem Index="3" />
-    <InventoryItem Index="4" />
-    <InventoryItem Index="5" />
-    <InventoryItem Index="6" />
-    <InventoryItem Index="7" />
-    <InventoryItem Index="8" />
-    <InventoryItem Index="9" />
-    <InventoryItem Index="10" />
-    <InventoryItem Index="11" />
-    <InventoryItem Index="12" />
-    <InventoryItem Index="13" />
-    <InventoryItem Index="14" />
-    <InventoryItem Index="15" />
-    <InventoryItem Index="16" />
-    <InventoryItem Index="17" />
-</div>
-<div class="css-grid">
-
-    @foreach (var item in itemsInventory)
-    {
-        <CraftingItem Item="item" NoDrop="true" />
-    }
 <p>
     <b>CurrentCulture</b>: @CultureInfo.CurrentCulture
 </p>
 
-</div>
+<div class="body">
+    <div class="align-start">
+        <div class="inventory-items">
+            <InventoryItem Index="0" />
+            <InventoryItem Index="1" />
+            <InventoryItem Index="2" />
+            <InventoryItem Index="3" />
+            <InventoryItem Index="4" />
+            <InventoryItem Index="5" />
+            <InventoryItem Index="6" />
+            <InventoryItem Index="7" />
+            <InventoryItem Index="8" />
+            <InventoryItem Index="9" />
+            <InventoryItem Index="10" />
+            <InventoryItem Index="11" />
+            <InventoryItem Index="12" />
+            <InventoryItem Index="13" />
+            <InventoryItem Index="14" />
+            <InventoryItem Index="15" />
+            <InventoryItem Index="16" />
+            <InventoryItem Index="17" />
+        </div>
+    </div>
+    <div class="css-grid">
+
+        @*@foreach (var item in itemsInventory)
+        {
+            <CraftingItem Item="item" NoDrop="true" />
+        }*@
 
-<div id="ItemList">
-    <div>
-        <p>
-           List of items 
-        </p>
-        @*SearchBar*@
-
     </div>
 
-    <DataGrid TItem="Item"
-          Data="@items"
-          ReadData="@OnReadData"
-          TotalItems="@totalItem"
-          PageSize="10"
-          ShowPager
-          Responsive>
-          <DataGridColumn TItem="Item" Field=""/>          
-          <DataGridColumn TItem="Item" Field="@nameof(Item.DisplayName)" Caption="Display name" />
-          <DataGridColumn TItem="Item" Field="@nameof(Item.Id)" Caption="Image">
-            <DisplayTemplate>
-                @if (File.Exists($"{WebHostEnvironment.WebRootPath}/images/{context.Name}.png"))
-                {
-                    <img src="images/@(context.Name).png" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="max-width: 150px"/>
-                }
-                else
-                {
-                    <img src="images/default.png" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="max-width: 150px"/>
-                }
-            </DisplayTemplate>
-          </DataGridColumn>
-    </DataGrid>
+    <div id="ItemList" class="align-end">
+        <div>
+            <p>
+               List of items 
+            </p>
+            @*SearchBar*@
+
+        </div>
+
+        <DataGrid TItem="Item"
+              Data="@itemsInventory"
+              ReadData="@OnReadData"
+              TotalItems="@totalItem"
+              PageSize="10"
+              ShowPager
+              Responsive>
+              <DataGridColumn TItem="Item" Field=""/>          
+              <DataGridColumn TItem="Item" Field="@nameof(Item.DisplayName)" Caption="Display name" />
+              <DataGridColumn TItem="Item" Field="@nameof(Item.Id)" Caption="Image">
+                <DisplayTemplate>
+                    @if (File.Exists($"{WebHostEnvironment.WebRootPath}/images/{context.Name}.png"))
+                    {
+                        <img src="images/@(context.Name).png" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="max-width: 150px"/>
+                    }
+                    else
+                    {
+                        <img src="images/default.png" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="max-width: 150px"/>
+                    }
+                </DisplayTemplate>
+              </DataGridColumn>
+        </DataGrid>
+    </div>
 </div>
diff --git a/myBlazorApp/myBlazorApp/Pages/Inventory.razor.css b/myBlazorApp/myBlazorApp/Pages/Inventory.razor.css
index 34491e9..c3bcf2e 100644
--- a/myBlazorApp/myBlazorApp/Pages/Inventory.razor.css
+++ b/myBlazorApp/myBlazorApp/Pages/Inventory.razor.css
@@ -1,6 +1,21 @@
-.inventory-items {
+.body {
+    display: flex;
+}
+
+.inventory-items {
     grid-template-columns: repeat(6,minmax(0,1fr));
     gap: 10px;
     display: grid;
     width: 40%;
 }
+
+.align-start {
+    align-items: flex-start;
+    justify-content: start
+}
+
+.align-end { 
+    align-content: flex-end;
+    justify-content: end;
+    width: 400px;
+}
\ No newline at end of file