diff --git a/client/src/components/ControlPanel.jsx b/client/src/components/ControlPanel.jsx
index 423ccbf..51ad803 100644
--- a/client/src/components/ControlPanel.jsx
+++ b/client/src/components/ControlPanel.jsx
@@ -235,16 +235,43 @@ function TurtleDetails({ turtle }) {
       {turtle.inventory && turtle.inventory.length > 0 && (
         <div className="detail-section">
           <h3>Inventory ({turtle.inventoryCount || turtle.inventory.length}/16)</h3>
-          <div className="inventory-list">
-            {turtle.inventory.map((item, index) => (
-              <div key={index} className="inventory-item">
-                <span className="item-icon">📦</span>
-                <span className="item-name">
-                  {item.name.replace('minecraft:', '').replace(/_/g, ' ')}
-                </span>
-                <span className="item-count">×{item.count}</span>
-              </div>
-            ))}
+          <div className="inventory-grid">
+            {Array.from({ length: 16 }, (_, slotIndex) => {
+              const item = turtle.inventory[slotIndex];
+              return (
+                <div 
+                  key={slotIndex} 
+                  className={`inventory-slot ${item ? 'filled' : 'empty'}`}
+                  title={item ? `${item.name.replace('minecraft:', '').replace(/_/g, ' ')} (${item.count})` : 'Empty'}
+                >
+                  {item ? (
+                    <>
+                      <div className="slot-item">
+                        <span className="item-icon">
+                          {item.name.includes('diamond') ? '💎' :
+                           item.name.includes('gold') ? '�' :
+                           item.name.includes('iron') ? '⚪' :
+                           item.name.includes('coal') ? '⚫' :
+                           item.name.includes('emerald') ? '🟢' :
+                           item.name.includes('redstone') ? '🔴' :
+                           item.name.includes('lapis') ? '🔵' :
+                           item.name.includes('stone') ? '🗿' :
+                           item.name.includes('dirt') ? '🟤' :
+                           item.name.includes('wood') || item.name.includes('log') ? '🪵' :
+                           item.name.includes('cobble') ? '🪨' : '�📦'}
+                        </span>
+                        <span className="item-count">{item.count}</span>
+                      </div>
+                      <div className="slot-name">
+                        {item.name.replace('minecraft:', '').replace(/_/g, ' ').split(' ').slice(0, 2).join(' ')}
+                      </div>
+                    </>
+                  ) : (
+                    <span className="slot-number">{slotIndex + 1}</span>
+                  )}
+                </div>
+              );
+            })}
           </div>
         </div>
       )}