diff --git a/src/common/__tests__/hotbar-store.test.ts b/src/common/__tests__/hotbar-store.test.ts
index 51002fee23..9f54e8731d 100644
--- a/src/common/__tests__/hotbar-store.test.ts
+++ b/src/common/__tests__/hotbar-store.test.ts
@@ -156,6 +156,13 @@ describe("HotbarStore", () => {
       expect(hotbarStore.getActive().items.length).toEqual(12);
     });
 
+    it("initially adds catalog entity as first item", () => {
+      const hotbarStore = HotbarStore.createInstance();
+
+      hotbarStore.load();
+      expect(hotbarStore.getActive().items[0].entity.name).toEqual("Catalog");
+    });
+
     it("adds items", () => {
       const hotbarStore = HotbarStore.createInstance();
 
@@ -163,7 +170,7 @@ describe("HotbarStore", () => {
       hotbarStore.addToHotbar(testCluster);
       const items = hotbarStore.getActive().items.filter(Boolean);
 
-      expect(items.length).toEqual(1);
+      expect(items.length).toEqual(2);
     });
 
     it("removes items", () => {
@@ -172,6 +179,7 @@ describe("HotbarStore", () => {
       hotbarStore.load();
       hotbarStore.addToHotbar(testCluster);
       hotbarStore.removeFromHotbar("test");
+      hotbarStore.removeFromHotbar("catalog-entity");
       const items = hotbarStore.getActive().items.filter(Boolean);
 
       expect(items.length).toEqual(0);
@@ -185,7 +193,7 @@ describe("HotbarStore", () => {
       hotbarStore.removeFromHotbar("invalid uid");
       const items = hotbarStore.getActive().items.filter(Boolean);
 
-      expect(items.length).toEqual(1);
+      expect(items.length).toEqual(2);
     });
 
     it("moves item to empty cell", () => {
@@ -196,12 +204,12 @@ describe("HotbarStore", () => {
       hotbarStore.addToHotbar(minikubeCluster);
       hotbarStore.addToHotbar(awsCluster);
 
-      expect(hotbarStore.getActive().items[5]).toBeNull();
+      expect(hotbarStore.getActive().items[6]).toBeNull();
 
       hotbarStore.restackItems(1, 5);
 
       expect(hotbarStore.getActive().items[5]).toBeTruthy();
-      expect(hotbarStore.getActive().items[5].entity.uid).toEqual("minikube");
+      expect(hotbarStore.getActive().items[5].entity.uid).toEqual("test");
     });
 
     it("moves items down", () => {
@@ -212,12 +220,12 @@ describe("HotbarStore", () => {
       hotbarStore.addToHotbar(minikubeCluster);
       hotbarStore.addToHotbar(awsCluster);
 
-      // aws -> test
-      hotbarStore.restackItems(2, 0);
+      // aws -> catalog
+      hotbarStore.restackItems(3, 0);
 
       const items = hotbarStore.getActive().items.map(item => item?.entity.uid || null);
 
-      expect(items.slice(0, 4)).toEqual(["aws", "test", "minikube", null]);
+      expect(items.slice(0, 4)).toEqual(["aws", "catalog-entity", "test", "minikube"]);
     });
 
     it("moves items up", () => {
@@ -229,11 +237,11 @@ describe("HotbarStore", () => {
       hotbarStore.addToHotbar(awsCluster);
 
       // test -> aws
-      hotbarStore.restackItems(0, 2);
+      hotbarStore.restackItems(1, 3);
 
       const items = hotbarStore.getActive().items.map(item => item?.entity.uid || null);
 
-      expect(items.slice(0, 4)).toEqual(["minikube", "aws", "test", null]);
+      expect(items.slice(0, 4)).toEqual(["catalog-entity", "minikube", "aws", "test"]);
     });
 
     it("does nothing when item moved to same cell", () => {
@@ -241,9 +249,9 @@ describe("HotbarStore", () => {
 
       hotbarStore.load();
       hotbarStore.addToHotbar(testCluster);
-      hotbarStore.restackItems(0, 0);
+      hotbarStore.restackItems(1, 1);
 
-      expect(hotbarStore.getActive().items[0].entity.uid).toEqual("test");
+      expect(hotbarStore.getActive().items[1].entity.uid).toEqual("test");
     });
 
     it("new items takes first empty cell", () => {
diff --git a/src/common/hotbar-store.ts b/src/common/hotbar-store.ts
index fd888c6194..ab41583b0a 100644
--- a/src/common/hotbar-store.ts
+++ b/src/common/hotbar-store.ts
@@ -92,7 +92,7 @@ export class HotbarStore extends BaseStore<HotbarStoreModel> {
     return this.hotbarIndex(this.activeHotbarId);
   }
 
-  get initialItems() {
+  get defaultHotbarInitialItems() {
     const { metadata: { uid, name, source } } = catalogEntity;
     const initialItem = { entity: { uid, name, source }};
 
@@ -102,12 +102,16 @@ export class HotbarStore extends BaseStore<HotbarStoreModel> {
     ];
   }
 
+  get initialItems() {
+    return [...Array.from(Array(defaultHotbarCells).fill(null))];
+  }
+
   @action protected async fromStore(data: Partial<HotbarStoreModel> = {}) {
     if (data.hotbars?.length === 0) {
       this.hotbars = [{
         id: uuid.v4(),
         name: "Default",
-        items: this.initialItems,
+        items: this.defaultHotbarInitialItems,
       }];
     } else {
       this.hotbars = data.hotbars;