diff --git a/src/ext/extension-page/App.svelte b/src/ext/extension-page/App.svelte
index 90d396b4..22487e8f 100644
--- a/src/ext/extension-page/App.svelte
+++ b/src/ext/extension-page/App.svelte
@@ -66,6 +66,10 @@
 	const editorMinWidth = "20rem";
 
 	function sidebarSwitch() {
+		if (!sidebarHidden && !$items.find((i) => i.active)) {
+			log.add("Please select or create a new item first.", "info", true);
+			return;
+		}
 		sidebarHidden = !sidebarHidden;
 	}
 
@@ -101,14 +105,14 @@
 >
 	{#if !sidebarHidden}
 		<Sidebar {sidebarSwitch} />
+		<div
+			role="none"
+			class="splitter"
+			class:dragging={splitterActive}
+			on:mousedown={handleSplitterDrag}
+			on:mouseup={handleSplitterDrag}
+		></div>
 	{/if}
-	<div
-		role="none"
-		class="splitter"
-		class:dragging={splitterActive}
-		on:mousedown={handleSplitterDrag}
-		on:mouseup={handleSplitterDrag}
-	></div>
 	<Editor {sidebarHidden} {sidebarSwitch} />
 </main>
 {#if splitterActive}
@@ -168,7 +172,7 @@
 		cursor: col-resize;
 		position: fixed;
 		inset: 0;
-		z-index: 200;
+		z-index: 20;
 	}
 
 	.splitter {
@@ -182,7 +186,7 @@
 		left: calc(var(--sidebar-fixed-width) - var(--splitter-offset));
 		width: var(--splitter-width);
 		height: 100svh;
-		z-index: 201;
+		z-index: 21;
 		transition: background-color 0.2s ease-in-out;
 
 		&:hover,
diff --git a/src/ext/extension-page/Components/Editor/Editor.svelte b/src/ext/extension-page/Components/Editor/Editor.svelte
index ef47d3b6..e0b7c719 100644
--- a/src/ext/extension-page/Components/Editor/Editor.svelte
+++ b/src/ext/extension-page/Components/Editor/Editor.svelte
@@ -255,19 +255,16 @@
 	}
 
 	.editor__empty {
-		align-items: center;
 		background-color: inherit;
 		color: var(--text-color-disabled);
-		display: flex;
 		font: var(--text-large);
-		height: 100%;
-		justify-content: center;
-		left: 0;
 		letter-spacing: var(--letter-spacing-large);
+		display: flex;
+		place-content: center;
+		place-items: center;
 		position: absolute;
-		top: 0;
-		width: 100%;
-		z-index: 85;
+		inset: 0;
+		z-index: 10;
 	}
 
 	.editor__header {
diff --git a/src/ext/extension-page/Components/Sidebar/Sidebar.svelte b/src/ext/extension-page/Components/Sidebar/Sidebar.svelte
index cc382adc..c5af6b55 100644
--- a/src/ext/extension-page/Components/Sidebar/Sidebar.svelte
+++ b/src/ext/extension-page/Components/Sidebar/Sidebar.svelte
@@ -81,8 +81,8 @@
 	}
 
 	async function activate(item) {
-		// if not in ready state or the item is already active
-		if (!$v4state.includes("ready") || item.active) return;
+		// if item is empty or already active
+		if (!item || item.active) return;
 
 		// check if there's a temp item and it's not the item to be activated
 		// can occur when user clicks a non-temp item while a temp item exists
@@ -228,7 +228,7 @@
 			title="Open settings"
 			{disabled}
 		/>
-		<Dropdown icon={iconPlus} title="New item" {disabled} right>
+		<Dropdown icon={iconPlus} title="New item" {disabled}>
 			<button on:click={() => newItem("js")}>New JS</button>
 			<button on:click={() => newItem("css")}>New CSS</button>
 			<button on:click={newRemote}>New Remote</button>