upd

Code/Inventory/Ui/Inventory.razor

@@ -2,7 +2,7 @@
 @inherits PanelComponent
 @namespace Sasalka.Ui
 
-<root class="@( Inventar.IsInventoryOpen ? "" : "hidden" )">
+<root class="inventory @( Inventar.IsInventoryOpen ? "" : "hidden" )">
 	<div class="inventory-panel">
 		@if ( PlayerInventory.Items.Count > 0 )
 		{

Code/Inventory/Ui/Inventory.razor.scss

@@ -1,34 +1,30 @@
 Inventory {
+  display: flex;
+  flex-direction: column;
+  height: 96vh;
+  width: 30%;
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  padding: 24px;
   background: linear-gradient(135deg, #0a1a2b 0%, #08111f 100%);
   border: 3px solid #2a3d54;
   border-radius: 14px;
   font-family: 'Orbitron', 'Poppins', sans-serif;
-  position: absolute;
-  width: 30%;
-  height: 96vh;
-  right: 20px;
-  top: 20px;
-  padding: 24px;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  transition: all 0.2s ease;
   z-index: 100;
   overflow: hidden;
-
   pointer-events: all;
-
-  &.hidden {
-    opacity: 0;
-  }
 }
 
 .inventory-panel {
+  overflow-y: scroll;
   display: flex;
   flex-direction: column;
   gap: 12px;
+  //background-color: rgba(255, 0, 0, 0.1);
 }
 
+
 .hidden {
   opacity: 0;
 }

Code/Inventory/Ui/InventoryItem.razor

@@ -3,24 +3,33 @@
 @inherits Sandbox.UI.Panel
 @namespace Sasalka.Ui
 
-<root class="inventory-item @( Equipped ? "equipped" : "" )" @onclick="@(() => OnItemClick?.Invoke( Item ))" @onrightclick=@( () => OnItemRightClick?.Invoke( Item ) )>
+@{
+	var definition = Item?.Definition;
+	var name = definition?.Name;
+	var slot = Item?.Equipped == true ? definition?.GetSlot() : null;
+	var imageUrl = definition?.ImageTexture.IsValid() == true
+		? definition.ImageTexture.ResourcePath
+		: !string.IsNullOrWhiteSpace( definition?.ImageUrl )
+			? definition.ImageUrl
+			: null;
+}
 
-	@* <input type="checkbox" class="equipped-checkbox" checked="@Equipped" disabled/> *@
-
-	@if ( Item.Definition.ImageTexture.IsValid() )
+<root class="inventory-item @( Item.Equipped ? "equipped" : "" )" @onclick="@(() => OnItemClick?.Invoke( Item ))" @onrightclick=@( () => OnItemRightClick?.Invoke( Item ) )>
+	@if ( slot is not null )
 	{
-		<img src="@Item.Definition.ImageTexture.ResourcePath" alt="@Item.Definition.Name"/>
-	}
-	else if ( Item.Definition.ImageUrl.Length > 0 )
-	{
-		<img src="@Item.Definition.ImageUrl" alt="@Item.Definition.Name">
+		<div class="inventory-item__slot">@slot</div>
 	}
 
-	<div class="inventory-item__name">@Item?.Definition.Name</div>
-
-	@if ( Item?.Definition.MaxCount > 1 )
+	@if ( !string.IsNullOrEmpty( imageUrl ) )
 	{
-		<div class="inventory-item__count">@Item?.Count / @Item?.Definition.MaxCount</div>
+		<img src="@imageUrl" alt="@name"/>
+	}
+
+	<div class="inventory-item__name">@name</div>
+
+	@if ( definition?.MaxCount > 1 )
+	{
+		<div class="inventory-item__count">@Item?.Count / @definition.MaxCount</div>
 	}
 </root>
 
@@ -29,16 +38,11 @@
 	public Action<Sasalka.InventoryItem> OnItemClick { get; set; }
 	public Action<Sasalka.InventoryItem> OnItemRightClick { get; set; }
 
-	public bool Equipped { get; set; }
-
 	protected override int BuildHash()
 	{
 		base.BuildHash();
-
 		var hash = new HashCode();
-
-		hash.Add( Item.Count );
-
+		hash.Add( Item?.Count );
 		return hash.ToHashCode();
 	}
 

Code/Inventory/Ui/InventoryItem.razor.scss

@@ -1,16 +1,16 @@
 InventoryItem {
+  flex-shrink: 0;
   width: 100%;
-  //height: 64px;
   background: #2a3d53;
   display: flex;
   gap: 24px;
   align-items: center;
   justify-content: flex-start;
   border: 1px solid #666;
-  cursor: pointer;
-  transition: background 0.2s;
   border-radius: 12px;
   padding: 12px 24px;
+  cursor: pointer;
+  transition: background 0.2s ease;
   position: relative;
 
   &:hover {
@@ -20,22 +20,30 @@ InventoryItem {
   img {
     width: 32px;
     height: 32px;
+    object-fit: contain;
   }
 
-  &.name {
+  .inventory-item__name {
     font-size: 20px;
+    font-weight: 500;
+  }
+
+  .inventory-item__count {
+    margin-left: auto;
+    font-size: 14px;
+    color: #ccc;
+  }
+
+  .inventory-item__slot {
+    font-size: 12px;
+    color: #8fc98f;
+    background: rgba(0, 0, 0, 0.3);
+    padding: 2px 6px;
+    border-radius: 4px;
   }
 
   &.equipped {
     border: 2px solid #4caf50;
     background: #2e3e2e;
   }
-
-  .equipped-checkbox {
-    position: absolute;
-    top: 6px;
-    left: 6px;
-    pointer-events: none;
-    accent-color: #4caf50;
-  }
 }