diff --git a/app/react-components/ui.jsx b/app/react-components/ui.jsx
index feaf57a..6969583 100644
--- a/app/react-components/ui.jsx
+++ b/app/react-components/ui.jsx
@@ -5,6 +5,7 @@ import {ACTION_MAP, RESOLUTION} from '@/constants.js';
 import ClientContext from '@/context/client.js';
 
 import Dom from './dom.jsx';
+import HotBar from './hotbar.jsx';
 import Pixi from './pixi.jsx';
 import styles from './ui.module.css';
 
@@ -41,13 +42,7 @@ export default function Ui() {
       </style>
       <Pixi />
       <Dom>
-        <div
-          style={{
-            backgroundColor: 'rgba(0, 0, 0, 0.1)',
-            height: '225px',
-            width: '400px',
-          }}
-        ></div>
+        <HotBar active={0} slots={Array(10).fill(0).map(() => {})} />
       </Dom>
     </div>
   );