diff --git a/BlazorApp/BlazorApp/Components/InventoryComp.razor b/BlazorApp/BlazorApp/Components/InventoryComp.razor
index 7645f1c..5ed6408 100644
--- a/BlazorApp/BlazorApp/Components/InventoryComp.razor
+++ b/BlazorApp/BlazorApp/Components/InventoryComp.razor
@@ -37,12 +37,10 @@
             </div>
 
             <div class="col-6">
-
-            </div>
                 
-    <div>Available items:</div>
+                <div>Available items:</div>
 
-    <div>
+    <div class="css-dataGrid">
 
         <div class="bar">
             <input type="text" />
@@ -56,6 +54,7 @@
                   ShowPager
                   Sortable="true">
 
+
             <DataGridColumn TItem="Item" Field="@nameof(Item.Id)">
                 <DisplayTemplate>
                     <InventoryItem Item="@context" NoDrop="true" />
@@ -66,8 +65,8 @@
 
     </div>
 
-
-    </div>
+                </div>
+         </div>
         
             
     </div>
diff --git a/BlazorApp/BlazorApp/Components/InventoryComp.razor.css b/BlazorApp/BlazorApp/Components/InventoryComp.razor.css
index 901ab49..24a257c 100644
--- a/BlazorApp/BlazorApp/Components/InventoryComp.razor.css
+++ b/BlazorApp/BlazorApp/Components/InventoryComp.razor.css
@@ -1,16 +1,21 @@
-.css-grid {
+.css-body {
+    flex: auto;
+    flex-direction: column;
+}
+
+
+.css-grid {
     grid-template-columns: repeat(6,minmax(0,1fr));
-    gap: 75px;
+    grid-column-gap: 75px;
+    grid-row-gap: 5px;
     display: grid;
     width: 40%;
+    align-items: flex-start
 }
 
 
-.css-recipe {
-    grid-template-columns: repeat(3,minmax(0,1fr));
-    gap: 10px;
-    display: grid;
-    width: 212px;
+.css-dataGrid {
+    align-items: flex-end,
 }