diff --git a/frontend/src/components/BlockContextMenu.vue b/frontend/src/components/BlockContextMenu.vue
index c9a1459f..fc449b76 100644
--- a/frontend/src/components/BlockContextMenu.vue
+++ b/frontend/src/components/BlockContextMenu.vue
@@ -144,7 +144,7 @@ const contextMenuOptions: ContextMenuOption[] = [
 			const parentBlock = props.block.getParentBlock();
 			if (!parentBlock) return;
 
-			const selectedBlocks = store.selectedBlocks;
+			const selectedBlocks = store.activeCanvas?.selectedBlocks || [];
 			const blockPosition = Math.min(...selectedBlocks.map(parentBlock.getChildIndex.bind(parentBlock)));
 			const newBlock = parentBlock?.addChild(newBlockObj, blockPosition);
 
@@ -170,11 +170,11 @@ const contextMenuOptions: ContextMenuOption[] = [
 		},
 		condition: () => {
 			if (props.block.isRoot()) return false;
-			if (store.selectedBlocks.length === 1) return true;
+			if (store.activeCanvas?.selectedBlocks.length === 1) return true;
 			// check if all selected blocks are siblings
 			const parentBlock = props.block.getParentBlock();
 			if (!parentBlock) return false;
-			const selectedBlocks = store.selectedBlocks;
+			const selectedBlocks = store.activeCanvas?.selectedBlocks || [];
 			return selectedBlocks.every((block) => block.getParentBlock() === parentBlock);
 		},
 	},
diff --git a/frontend/src/components/BlockLayers.vue b/frontend/src/components/BlockLayers.vue
index 67e16440..eb21eb8c 100644
--- a/frontend/src/components/BlockLayers.vue
+++ b/frontend/src/components/BlockLayers.vue
@@ -14,9 +14,6 @@
 							:title="element.blockId"
 							@contextmenu.prevent.stop="onContextMenu"
 							class="cursor-pointer rounded border border-transparent bg-white pl-2 pr-[2px] text-sm text-gray-700 dark:bg-zinc-900 dark:text-gray-500"
-							:class="{
-								'block-selected': store.isSelected(element.blockId),
-							}"
 							@click.stop="
 								store.activeCanvas?.history.pause();
 								element.expanded = true;
@@ -131,10 +128,10 @@ const toggleExpanded = (block: Block) => {
 };
 
 watch(
-	() => store.selectedBlocks,
+	() => store.activeCanvas?.selectedBlocks,
 	() => {
-		if (store.selectedBlocks.length) {
-			store.selectedBlocks.forEach((block: Block) => {
+		if (store.activeCanvas?.selectedBlocks.length) {
+			store.activeCanvas?.selectedBlocks.forEach((block: Block) => {
 				if (block) {
 					expandedLayers.value.add(block.blockId);
 					let parentBlock = block.getParentBlock();
diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index 8feb1fa7..873dd44c 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -80,10 +80,8 @@ const draggable = computed(() => {
 	return !props.block.isRoot() && !props.preview && false;
 });
 
-const hovered = ref(false);
-const isSelected = computed(() => {
-	return store.selectedBlocks.some((block) => block.blockId === props.block.blockId);
-});
+const isHovered = ref(false);
+const isSelected = ref(false);
 
 const getComponentName = (block: Block) => {
 	if (block.isRepeater()) {
@@ -146,7 +144,7 @@ const loadEditor = computed(() => {
 		target.value &&
 		props.block.getStyle("display") !== "none" &&
 		((isSelected.value && props.breakpoint === store.activeBreakpoint) ||
-			(hovered.value && store.hoveredBreakpoint === props.breakpoint)) &&
+			(isHovered.value && store.hoveredBreakpoint === props.breakpoint)) &&
 		!canvasProps?.scaling &&
 		!canvasProps?.panning
 	);
@@ -258,10 +256,24 @@ watch(
 	() => store.hoveredBlock,
 	(newValue, oldValue) => {
 		if (newValue === props.block.blockId) {
-			hovered.value = true;
+			isHovered.value = true;
 		} else if (oldValue === props.block.blockId) {
-			hovered.value = false;
+			isHovered.value = false;
 		}
 	}
 );
+
+watch(
+	() => store.activeCanvas?.selectedBlockIds,
+	() => {
+		if (store.activeCanvas?.isSelected(props.block)) {
+			isSelected.value = true;
+		} else {
+			isSelected.value = false;
+		}
+	},
+	{
+		deep: true,
+	}
+);
 </script>
diff --git a/frontend/src/components/BuilderCanvas.vue b/frontend/src/components/BuilderCanvas.vue
index d8df0c5f..b37bbc50 100644
--- a/frontend/src/components/BuilderCanvas.vue
+++ b/frontend/src/components/BuilderCanvas.vue
@@ -165,7 +165,7 @@ const { isOverDropZone } = useDropZone(canvasContainer, {
 		let parentBlock = block.value as Block | null;
 		if (element) {
 			if (element.dataset.blockId) {
-				parentBlock = store.findBlock(element.dataset.blockId) || parentBlock;
+				parentBlock = findBlock(element.dataset.blockId) || parentBlock;
 			}
 		}
 		let componentName = ev.dataTransfer?.getData("componentName");
@@ -230,12 +230,12 @@ function setEvents() {
 			let block = getFirstBlock();
 			if (element) {
 				if (element.dataset.blockId) {
-					block = store.findBlock(element.dataset.blockId) || block;
+					block = findBlock(element.dataset.blockId) || block;
 				}
 			}
 			let parentBlock = getFirstBlock();
 			if (element.dataset.blockId) {
-				parentBlock = store.findBlock(element.dataset.blockId) || parentBlock;
+				parentBlock = findBlock(element.dataset.blockId) || parentBlock;
 				while (parentBlock && !parentBlock.canHaveChildren()) {
 					parentBlock = parentBlock.getParentBlock() || getFirstBlock();
 				}
@@ -445,7 +445,7 @@ const handleClick = (ev: MouseEvent) => {
 	// hack to ensure if click is on canvas-container
 	// TODO: Still clears selection if space handlers are dragged over canvas-container
 	if (target?.classList.contains("canvas-container")) {
-		store.clearSelection();
+		clearSelection();
 	}
 };
 
@@ -470,6 +470,77 @@ const setRootBlock = (newBlock: Block, resetCanvas = false) => {
 	}
 };
 
+const selectedBlockIds = ref([]) as Ref<string[]>;
+const selectedBlocks = computed(() => {
+	return selectedBlockIds.value.map((id) => findBlock(id));
+}) as Ref<Block[]>;
+
+const isSelected = (block: Block) => {
+	return selectedBlockIds.value.includes(block.blockId);
+};
+
+const selectBlock = (_block: Block, multiSelect = false) => {
+	if (multiSelect) {
+		selectedBlockIds.value.push(_block.blockId);
+	} else {
+		selectedBlockIds.value.splice(0, selectedBlockIds.value.length, _block.blockId);
+	}
+};
+
+const toggleBlockSelection = (_block: Block) => {
+	if (isSelected(_block)) {
+		selectedBlockIds.value.splice(selectedBlockIds.value.indexOf(_block.blockId), 1);
+	} else {
+		selectBlock(_block, true);
+	}
+};
+
+const clearSelection = () => {
+	selectedBlockIds.value = [];
+};
+
+const findParentBlock = (blockId: string, blocks?: Block[]): Block | null => {
+	if (!blocks) {
+		const firstBlock = getFirstBlock();
+		if (!firstBlock) {
+			return null;
+		}
+		blocks = [firstBlock];
+	}
+	for (const block of blocks) {
+		if (block.children) {
+			for (const child of block.children) {
+				if (child.blockId === blockId) {
+					return block;
+				}
+			}
+			const found = findParentBlock(blockId, block.children);
+			if (found) {
+				return found;
+			}
+		}
+	}
+	return null;
+};
+
+const findBlock = (blockId: string, blocks?: Block[]): Block | null => {
+	if (!blocks) {
+		blocks = [getFirstBlock()];
+	}
+	for (const block of blocks) {
+		if (block.blockId === blockId) {
+			return block;
+		}
+		if (block.children) {
+			const found = findBlock(blockId, block.children);
+			if (found) {
+				return found;
+			}
+		}
+	}
+	return null;
+};
+
 defineExpose({
 	setScaleAndTranslate,
 	resetZoom,
@@ -482,5 +553,13 @@ defineExpose({
 	block,
 	setRootBlock,
 	canvasProps,
+	selectBlock,
+	toggleBlockSelection,
+	selectedBlocks,
+	clearSelection,
+	isSelected,
+	selectedBlockIds,
+	findParentBlock,
+	findBlock,
 });
 </script>
diff --git a/frontend/src/components/BuilderLeftPanel.vue b/frontend/src/components/BuilderLeftPanel.vue
index 212f60fe..8487c895 100644
--- a/frontend/src/components/BuilderLeftPanel.vue
+++ b/frontend/src/components/BuilderLeftPanel.vue
@@ -54,7 +54,7 @@
 <script setup lang="ts">
 import convertHTMLToBlocks from "@/utils/convertHTMLToBlocks";
 import { createResource } from "frappe-ui";
-import { Ref, inject, ref } from "vue";
+import { Ref, inject, ref, watch } from "vue";
 import useStore from "../store";
 import BlockLayers from "./BlockLayers.vue";
 import BuilderComponents from "./BuilderComponents.vue";
@@ -89,4 +89,32 @@ const getPage = () => {
 const setActiveTab = (tab: LeftSidebarTabOption) => {
 	store.leftPanelActiveTab = tab;
 };
+
+// moved out of BlockLayers for performance
+// TODO: Find a better way to do this
+watch(
+	() => store.hoveredBlock,
+	() => {
+		document.querySelectorAll(`[data-block-layer-id].hovered-block`).forEach((el) => {
+			el.classList.remove("hovered-block");
+		});
+		if (store.hoveredBlock) {
+			document.querySelector(`[data-block-layer-id="${store.hoveredBlock}"]`)?.classList.add("hovered-block");
+		}
+	}
+);
+
+watch(
+	() => store.activeCanvas?.selectedBlocks,
+	() => {
+		document.querySelectorAll(`[data-block-layer-id].block-selected`).forEach((el) => {
+			el.classList.remove("block-selected");
+		});
+		if (store.activeCanvas?.selectedBlocks.length) {
+			store.activeCanvas?.selectedBlocks.forEach((block: Block) => {
+				document.querySelector(`[data-block-layer-id="${block.blockId}"]`)?.classList.add("block-selected");
+			});
+		}
+	}
+);
 </script>
diff --git a/frontend/src/components/TextBlock.vue b/frontend/src/components/TextBlock.vue
index 8a648b76..d156a81c 100644
--- a/frontend/src/components/TextBlock.vue
+++ b/frontend/src/components/TextBlock.vue
@@ -199,10 +199,10 @@ watch(
 
 if (!props.preview) {
 	watch(
-		() => store.isSelected(props.block.blockId),
+		() => store.activeCanvas?.isSelected(props.block),
 		() => {
 			// only load editor if block is selected for performance reasons
-			if (store.isSelected(props.block.blockId) && !blockController.multipleBlocksSelected()) {
+			if (store.activeCanvas?.isSelected(props.block) && !blockController.multipleBlocksSelected()) {
 				editor.value = new Editor({
 					content: textContent.value,
 					extensions: [
diff --git a/frontend/src/pages/PageBuilder.vue b/frontend/src/pages/PageBuilder.vue
index d0ccfa7b..8a4b644d 100644
--- a/frontend/src/pages/PageBuilder.vue
+++ b/frontend/src/pages/PageBuilder.vue
@@ -105,9 +105,9 @@ useEventListener(
 useEventListener(document, "copy", (e) => {
 	if (isTargetEditable(e)) return;
 	e.preventDefault();
-	if (store.selectedBlocks.length) {
+	if (store.activeCanvas?.selectedBlocks.length) {
 		const componentDocuments: BuilderComponent[] = [];
-		store.selectedBlocks.forEach((block: Block) => {
+		store.activeCanvas?.selectedBlocks.forEach((block: Block) => {
 			const components = block.getUsedComponentNames();
 			components.forEach((componentName) => {
 				const component = store.getComponent(componentName);
@@ -118,7 +118,7 @@ useEventListener(document, "copy", (e) => {
 		});
 		// just copy non components
 		const dataToCopy = {
-			blocks: store.selectedBlocks,
+			blocks: store.activeCanvas?.selectedBlocks,
 			components: componentDocuments,
 		};
 		copyToClipboard(dataToCopy, e, "builder-copied-blocks");
@@ -162,8 +162,8 @@ useEventListener(document, "paste", async (e) => {
 			await store.createComponent(component, true);
 		}
 
-		if (store.selectedBlocks.length && dataObj.blocks[0].blockId !== "root") {
-			let parentBlock = store.selectedBlocks[0];
+		if (store.activeCanvas?.selectedBlocks.length && dataObj.blocks[0].blockId !== "root") {
+			let parentBlock = store.activeCanvas.selectedBlocks[0];
 			while (parentBlock && !parentBlock.canHaveChildren()) {
 				parentBlock = parentBlock.getParentBlock() as Block;
 			}
@@ -558,20 +558,6 @@ watch(
 		deep: true,
 	}
 );
-
-// moved out of BlockLayers for performance
-// TODO: Find a better way to do this
-watch(
-	() => store.hoveredBlock,
-	() => {
-		document.querySelectorAll(`[data-block-layer-id].hovered-block`).forEach((el) => {
-			el.classList.remove("hovered-block");
-		});
-		if (store.hoveredBlock) {
-			document.querySelector(`[data-block-layer-id="${store.hoveredBlock}"]`)?.classList.add("hovered-block");
-		}
-	}
-);
 </script>
 
 <style>
diff --git a/frontend/src/store.ts b/frontend/src/store.ts
index 8cb0de0f..1c9f82a5 100644
--- a/frontend/src/store.ts
+++ b/frontend/src/store.ts
@@ -23,7 +23,6 @@ const useStore = defineStore("store", {
 		pageData: <{ [key: string]: [] }>{},
 		mode: <BuilderMode>"select", // check setEvents in BuilderCanvas for usage
 		lastMode: <BuilderMode>"select",
-		selectedBlocks: <Block[]>[],
 		activeCanvas: <InstanceType<typeof BuilderCanvas> | null>null,
 		history: {
 			pause: () => {},
@@ -127,59 +126,15 @@ const useStore = defineStore("store", {
 
 			return imageBlock;
 		},
-		findBlock(blockId: string, blocks?: Array<Block>): Block | null {
-			if (!blocks) {
-				blocks = [this.activeCanvas?.getFirstBlock() as Block];
-			}
-			for (const block of blocks) {
-				if (block.blockId === blockId) {
-					return block;
-				}
-				if (block.children) {
-					const found = this.findBlock(blockId, block.children);
-					if (found) {
-						return found;
-					}
-				}
-			}
-			return null;
-		},
-		findParentBlock(blockId: string, blocks?: Array<Block>): Block | null {
-			if (!blocks) {
-				const firstBlock = this.activeCanvas?.getFirstBlock() as Block;
-				if (!firstBlock) {
-					return null;
-				}
-				blocks = [firstBlock];
-			}
-			for (const block of blocks) {
-				if (block.children) {
-					for (const child of block.children) {
-						if (child.blockId === blockId) {
-							return block;
-						}
-					}
-					const found = this.findParentBlock(blockId, block.children);
-					if (found) {
-						return found;
-					}
-				}
-			}
-			return null;
-		},
 		selectBlock(block: Block, e: MouseEvent | null, scrollIntoView = true) {
 			this.activeCanvas?.history?.pause();
 			if (this.settingPage) {
 				return;
 			}
 			if (e && e.shiftKey) {
-				if (this.isSelected(block.blockId)) {
-					this.selectedBlocks = this.selectedBlocks.filter((block: Block) => block.blockId !== block.blockId);
-				} else {
-					this.selectedBlocks.push(block);
-				}
+				this.activeCanvas?.toggleBlockSelection(block);
 			} else {
-				this.selectedBlocks = [block];
+				this.activeCanvas?.selectBlock(block);
 			}
 			if (scrollIntoView) {
 				// TODO: move to layers?
@@ -194,7 +149,7 @@ const useStore = defineStore("store", {
 			if (block.isExtendedFromComponent()) {
 				this.editingComponent = block?.extendedFromComponent as string;
 			}
-			this.clearSelection();
+			this.activeCanvas?.clearSelection();
 			this.editingMode = "component";
 		},
 		isComponentUsed(componentName: string) {
@@ -221,7 +176,7 @@ const useStore = defineStore("store", {
 		},
 		editPage(saveComponent = false, retainSelection = false) {
 			if (!retainSelection) {
-				this.clearSelection();
+				this.activeCanvas?.clearSelection();
 			}
 			this.editingMode = "page";
 			this.editableBlock = null;
@@ -306,12 +261,6 @@ const useStore = defineStore("store", {
 				fileName: fileDoc.file_name,
 			};
 		},
-		clearSelection() {
-			this.selectedBlocks = [];
-		},
-		isSelected(blockId: string) {
-			return this.selectedBlocks.some((block) => block.blockId === blockId);
-		},
 		getActivePage() {
 			return webPages.getRow(this.selectedPage as string) as BuilderPage;
 		},
diff --git a/frontend/src/utils/block.ts b/frontend/src/utils/block.ts
index be158ae1..6322f4eb 100644
--- a/frontend/src/utils/block.ts
+++ b/frontend/src/utils/block.ts
@@ -131,8 +131,8 @@ class Block implements BlockOptions {
 		if (this.isChildOfComponent) {
 			const componentBlock = store.getComponentBlock(this.isChildOfComponent as string);
 			return (
-				store.findBlock(this.referenceBlockId as string, [componentBlock]) ||
-				store.findBlock(this.blockId as string, [componentBlock]) ||
+				store.activeCanvas?.findBlock(this.referenceBlockId as string, [componentBlock]) ||
+				store.activeCanvas?.findBlock(this.blockId as string, [componentBlock]) ||
 				new Block({})
 			);
 		}
@@ -406,7 +406,11 @@ class Block implements BlockOptions {
 	}
 	getParentBlock(): Block | null {
 		const store = useStore();
-		return store.findParentBlock(this.blockId);
+		if (store.activeCanvas) {
+			return store.activeCanvas.findParentBlock(this.blockId);
+		} else {
+			return null;
+		}
 	}
 	canHaveChildren(): boolean {
 		return !(
diff --git a/frontend/src/utils/blockController.ts b/frontend/src/utils/blockController.ts
index 4956e871..84b1cda2 100644
--- a/frontend/src/utils/blockController.ts
+++ b/frontend/src/utils/blockController.ts
@@ -1,6 +1,6 @@
 import useStore from "@/store";
 import { CSSProperties } from "vue";
-import { BlockDataKey } from "./block";
+import Block, { BlockDataKey } from "./block";
 
 const store = useStore();
 
@@ -8,27 +8,30 @@ type styleProperty = keyof CSSProperties;
 
 const blockController = {
 	clearSelection: () => {
-		store.selectedBlocks = [];
+		store.activeCanvas?.clearSelection();
+	},
+	getFirstSelectedBlock: () => {
+		return store.activeCanvas?.selectedBlocks[0] as Block;
 	},
 	getSelectedBlocks: () => {
-		return store.selectedBlocks;
+		return store.activeCanvas?.selectedBlocks || [];
 	},
 	isRoot() {
-		return blockController.isBLockSelected() && store.selectedBlocks[0].isRoot();
+		return blockController.isBLockSelected() && blockController.getFirstSelectedBlock().isRoot();
 	},
 	setStyle: (style: styleProperty, value: StyleValue) => {
-		store.selectedBlocks.forEach((block) => {
+		store.activeCanvas?.selectedBlocks.forEach((block) => {
 			block.setStyle(style, value);
 		});
 	},
 	setBaseStyle: (style: styleProperty, value: StyleValue) => {
-		store.selectedBlocks.forEach((block) => {
+		store.activeCanvas?.selectedBlocks.forEach((block) => {
 			block.setBaseStyle(style, value);
 		});
 	},
 	getStyle: (style: styleProperty) => {
 		let styleValue = "__initial__" as StyleValue;
-		store.selectedBlocks.forEach((block) => {
+		store.activeCanvas?.selectedBlocks.forEach((block) => {
 			if (styleValue === "__initial__") {
 				styleValue = block.getStyle(style);
 			} else if (styleValue !== block.getStyle(style)) {
@@ -38,32 +41,32 @@ const blockController = {
 		return styleValue;
 	},
 	isBLockSelected: () => {
-		return store.selectedBlocks.length > 0;
+		return store.activeCanvas?.selectedBlocks.length || 0 > 0;
 	},
 	multipleBlocksSelected: () => {
-		return store.selectedBlocks.length > 1;
+		return store.activeCanvas?.selectedBlocks && store.activeCanvas?.selectedBlocks.length > 1;
 	},
 	isText: () => {
-		return blockController.isBLockSelected() && store.selectedBlocks[0].isText();
+		return blockController.isBLockSelected() && blockController.getFirstSelectedBlock().isText();
 	},
 	isContainer: () => {
-		return blockController.isBLockSelected() && store.selectedBlocks[0].isContainer();
+		return blockController.isBLockSelected() && blockController.getFirstSelectedBlock().isContainer();
 	},
 	isImage: () => {
-		return blockController.isBLockSelected() && store.selectedBlocks[0].isImage();
+		return blockController.isBLockSelected() && blockController.getFirstSelectedBlock().isImage();
 	},
 	isButton: () => {
-		return blockController.isBLockSelected() && store.selectedBlocks[0].isButton();
+		return blockController.isBLockSelected() && blockController.getFirstSelectedBlock().isButton();
 	},
 	isLink: () => {
-		return blockController.isBLockSelected() && store.selectedBlocks[0].isLink();
+		return blockController.isBLockSelected() && blockController.getFirstSelectedBlock().isLink();
 	},
 	isInput: () => {
-		return blockController.isBLockSelected() && store.selectedBlocks[0].isInput();
+		return blockController.isBLockSelected() && blockController.getFirstSelectedBlock().isInput();
 	},
 	getAttribute: (attribute: string) => {
 		let attributeValue = "__initial__" as StyleValue;
-		store.selectedBlocks.forEach((block) => {
+		store.activeCanvas?.selectedBlocks.forEach((block) => {
 			if (attributeValue === "__initial__") {
 				attributeValue = block.getAttribute(attribute);
 			} else if (attributeValue !== block.getAttribute(attribute)) {
@@ -73,13 +76,13 @@ const blockController = {
 		return attributeValue;
 	},
 	setAttribute: (attribute: string, value: string) => {
-		store.selectedBlocks.forEach((block) => {
+		store.activeCanvas?.selectedBlocks.forEach((block) => {
 			block.setAttribute(attribute, value);
 		});
 	},
 	getKeyValue: (key: "element" | "innerHTML" | "visibilityCondition") => {
 		let keyValue = "__initial__" as StyleValue | undefined;
-		store.selectedBlocks.forEach((block) => {
+		store.activeCanvas?.selectedBlocks.forEach((block) => {
 			if (keyValue === "__initial__") {
 				keyValue = block[key];
 			} else if (keyValue !== block[key]) {
@@ -89,7 +92,7 @@ const blockController = {
 		return keyValue;
 	},
 	setKeyValue: (key: "element" | "innerHTML" | "visibilityCondition", value: string) => {
-		store.selectedBlocks.forEach((block) => {
+		store.activeCanvas?.selectedBlocks.forEach((block) => {
 			if (key === "element" && block.blockName === "container") {
 				// reset blockName since it will not be a container anymore
 				delete block.blockName;
@@ -99,17 +102,21 @@ const blockController = {
 	},
 	getClasses: () => {
 		let classes = [] as string[];
-		classes = store.selectedBlocks[0].getClasses();
+		if (blockController.isBLockSelected()) {
+			classes = blockController.getFirstSelectedBlock().getClasses() || [];
+		}
 		return classes;
 	},
 	setClasses: (classes: string[]) => {
-		store.selectedBlocks[0].classes = classes;
+		const block = store.activeCanvas?.selectedBlocks[0];
+		if (!block) return;
+		block.classes = classes;
 	},
 	getRawStyles: () => {
-		return blockController.isBLockSelected() && store.selectedBlocks[0].rawStyles;
+		return blockController.isBLockSelected() && blockController.getFirstSelectedBlock().rawStyles;
 	},
 	setRawStyles: (rawStyles: BlockStyleMap) => {
-		store.selectedBlocks.forEach((block) => {
+		store.activeCanvas?.selectedBlocks.forEach((block) => {
 			Object.keys(block.rawStyles).forEach((key) => {
 				if (!rawStyles[key]) {
 					delete block.rawStyles[key];
@@ -119,10 +126,10 @@ const blockController = {
 		});
 	},
 	getCustomAttributes: () => {
-		return blockController.isBLockSelected() && store.selectedBlocks[0].customAttributes;
+		return blockController.isBLockSelected() && blockController.getFirstSelectedBlock().customAttributes;
 	},
 	setCustomAttributes: (customAttributes: BlockAttributeMap) => {
-		store.selectedBlocks.forEach((block) => {
+		store.activeCanvas?.selectedBlocks.forEach((block) => {
 			Object.keys(block.customAttributes).forEach((key) => {
 				if (!customAttributes[key]) {
 					delete block.customAttributes[key];
@@ -132,16 +139,16 @@ const blockController = {
 		});
 	},
 	getParentBlock: () => {
-		return blockController.isBLockSelected() && store.selectedBlocks[0].getParentBlock();
+		return store.activeCanvas?.selectedBlocks[0]?.getParentBlock() || store.activeCanvas?.getFirstBlock();
 	},
 	setTextColor: (color: string) => {
-		store.selectedBlocks.forEach((block) => {
+		store.activeCanvas?.selectedBlocks.forEach((block) => {
 			block.setTextColor(color);
 		});
 	},
 	getTextColor: () => {
 		let color = "__initial__" as StyleValue;
-		store.selectedBlocks.forEach((block) => {
+		store.activeCanvas?.selectedBlocks.forEach((block) => {
 			if (color === "__initial__") {
 				color = block.getTextColor();
 			} else if (color !== block.getTextColor()) {
@@ -151,13 +158,13 @@ const blockController = {
 		return color;
 	},
 	setFontFamily: (value: string) => {
-		store.selectedBlocks.forEach((block) => {
+		store.activeCanvas?.selectedBlocks.forEach((block) => {
 			block.setFontFamily(value);
 		});
 	},
 	getFontFamily: () => {
 		let fontFamily = "__initial__" as StyleValue;
-		store.selectedBlocks.forEach((block) => {
+		store.activeCanvas?.selectedBlocks.forEach((block) => {
 			if (fontFamily === "__initial__") {
 				fontFamily = block.getFontFamily();
 			} else if (fontFamily !== block.getFontFamily()) {
@@ -167,41 +174,41 @@ const blockController = {
 		return fontFamily;
 	},
 	isHTML: () => {
-		return blockController.isBLockSelected() && store.selectedBlocks[0].isHTML();
+		return blockController.isBLockSelected() && blockController.getFirstSelectedBlock().isHTML();
 	},
 	getInnerHTML: () => {
-		return blockController.isBLockSelected() && store.selectedBlocks[0].getInnerHTML();
+		return blockController.isBLockSelected() && blockController.getFirstSelectedBlock().getInnerHTML();
 	},
 	setInnerHTML: (value: string) => {
-		store.selectedBlocks.forEach((block) => {
+		store.activeCanvas?.selectedBlocks.forEach((block) => {
 			block.setInnerHTML(value);
 		});
 	},
 	getTextContent: () => {
-		return store.selectedBlocks[0].getTextContent();
+		return blockController.isBLockSelected() && blockController.getFirstSelectedBlock().getTextContent();
 	},
 	setDataKey: (key: keyof BlockDataKey, value: string) => {
-		store.selectedBlocks.forEach((block) => {
+		store.activeCanvas?.selectedBlocks.forEach((block) => {
 			block.setDataKey(key, value);
 		});
 	},
 	getDataKey: (key: keyof BlockDataKey) => {
-		return store.selectedBlocks[0].getDataKey(key);
+		return blockController.isBLockSelected() && blockController.getFirstSelectedBlock().getDataKey(key);
 	},
 	isRepeater: () => {
-		return blockController.isBLockSelected() && store.selectedBlocks[0].isRepeater();
+		return blockController.isBLockSelected() && blockController.getFirstSelectedBlock().isRepeater();
 	},
 	getPadding: () => {
-		return store.selectedBlocks[0].getPadding();
+		return blockController.isBLockSelected() && blockController.getFirstSelectedBlock().getPadding();
 	},
 	setPadding: (value: string) => {
-		store.selectedBlocks[0].setPadding(value);
+		blockController.getFirstSelectedBlock().setPadding(value);
 	},
 	getMargin: () => {
-		return store.selectedBlocks[0].getMargin();
+		return blockController.isBLockSelected() && blockController.getFirstSelectedBlock().getMargin();
 	},
 	setMargin: (value: string) => {
-		store.selectedBlocks[0].setMargin(value);
+		blockController.getFirstSelectedBlock().setMargin(value);
 	},
 };
 
diff --git a/frontend/src/utils/useDraggableBlock.ts b/frontend/src/utils/useDraggableBlock.ts
index ea555df1..33492631 100644
--- a/frontend/src/utils/useDraggableBlock.ts
+++ b/frontend/src/utils/useDraggableBlock.ts
@@ -38,7 +38,7 @@ export function useDraggableBlock(block: Block, target: HTMLElement, options: {
 		// move block to new container
 		if (e.dataTransfer) {
 			const draggingBlockId = e.dataTransfer.getData("draggingBlockId");
-			const draggingBlock = store.findBlock(draggingBlockId) as Block;
+			const draggingBlock = store.activeCanvas?.findBlock(draggingBlockId) as Block;
 			const nearestElementIndex = findNearestSiblingIndex(e);
 			if (draggingBlock) {
 				const newParent = block;