diff --git a/app/engine.js b/app/engine.js
index 5f9dbcb..112a12e 100644
--- a/app/engine.js
+++ b/app/engine.js
@@ -114,7 +114,7 @@ export default class Engine {
       Inventory: {
         slots: {
           1: {
-            qty: 500,
+            qty: 10,
             source: '/assets/potion',
           },
         },
@@ -235,7 +235,7 @@ export default class Engine {
         }
         case 'use': {
           if (payload.value) {
-            const item = Inventory.item(Wielder.activeSlot);
+            const item = Inventory.item(Wielder.activeSlot + 1);
             this.server.readAsset(item.source + '/start.js')
               .then((response) => response.text())
               .then((code) => {
diff --git a/app/react-components/ui.jsx b/app/react-components/ui.jsx
index 93eed88..90a13b2 100644
--- a/app/react-components/ui.jsx
+++ b/app/react-components/ui.jsx
@@ -15,13 +15,17 @@ import styles from './ui.module.css';
 
 const ratio = RESOLUTION.x / RESOLUTION.y;
 
+function emptySlots() {
+  return Array(10).fill(undefined);
+}
+
 export default function Ui({disconnected}) {
   // Key input.
   const client = useContext(ClientContext);
   const [mainEntity, setMainEntity] = useMainEntity();
   const [ecs] = useEcs();
   const [showDisconnected, setShowDisconnected] = useState(false);
-  const [hotbarSlots, setHotbarSlots] = useState(Array(10).fill(0).map(() => {}));
+  const [hotbarSlots, setHotbarSlots] = useState(emptySlots());
   const [activeSlot, setActiveSlot] = useState(0);
   useEffect(() => {
     let handle;
@@ -141,26 +145,18 @@ export default function Ui({disconnected}) {
     ecs.apply(payload.ecs);
     let localMainEntity = mainEntity;
     for (const id in payload.ecs) {
+      const entity = ecs.get(id);
       const update = payload.ecs[id];
       if (update?.MainEntity) {
         setMainEntity(localMainEntity = id);
       }
       if (localMainEntity === id) {
         if (update.Inventory) {
-          const newHotbarSlots = [...hotbarSlots];
-          const {slots, slotChange} = update.Inventory;
-          if (slotChange) {
-            for (const slotIndex in slotChange) {
-              newHotbarSlots[slotIndex] = {
-                ...newHotbarSlots[slotIndex],
-                ...slotChange[slotIndex],
-              };
-            }
-          }
-          if (slots) {
-            for (const slotIndex in slots) {
-              const {qty, source} = slots[slotIndex];
-              newHotbarSlots[slotIndex] = {
+          const newHotbarSlots = emptySlots();
+          for (let i = 1; i < 11; ++i) {
+            if (entity.Inventory.slots[i]) {
+              const {qty, source} = entity.Inventory.slots[i];
+              newHotbarSlots[i - 1] = {
                 image: source + '/icon.png',
                 qty,
               };
@@ -190,7 +186,7 @@ export default function Ui({disconnected}) {
             onActivate={(i) => {
               client.send({
                 type: 'Action',
-                payload: {type: 'changeSlot', value: i + 1},
+                payload: {type: 'changeSlot', value: i},
               });
             }}
             slots={hotbarSlots}