diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
index 9bc1806349..8471cc03ed 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
@@ -4,6 +4,7 @@
   import { syncURLToState } from "helpers/urlStateSync"
   import { store } from "builderStore"
   import { onDestroy } from "svelte"
+  import LeftPanel from "./components/[componentId]/_components/LeftPanel/index.svelte"
 
   $: screenId = $store.selectedScreenId
   $: store.actions.websocket.selectResource(screenId)
@@ -23,6 +24,7 @@
 
 <div class="design">
   <div class="content">
+    <LeftPanel />
     <AppPanel />
     <slot />
   </div>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/index.svelte
index 86c0df8cac..c1fe15f625 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/index.svelte
@@ -1,25 +1,28 @@
 <script>
   import Screens from "./Screens/index.svelte"
   import Components from "./Components/index.svelte"
+  import { selectedScreen } from "builderStore"
 </script>
 
 <div class="panel">
   <Screens />
   <div class="divider" />
-  <Components />
+  {#if $selectedScreen}
+    <Components />
+  {/if}
 </div>
 
 <style>
   .panel {
     width: 310px;
     height: 100%;
-    border-right: 2px solid var(--grey-2);
+    border-right: var(--border-light);
     display: flex;
     flex-direction: column;
     background: var(--background);
   }
 
   .divider {
-    border-bottom: 2px solid var(--grey-2);
+    border-bottom: var(--border-light);
   }
 </style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte
index 807109326a..51c3c64321 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte
@@ -1,5 +1,4 @@
 <script>
-  import LeftPanel from "./_components/LeftPanel/index.svelte"
   import { syncURLToState } from "helpers/urlStateSync"
   import { store, selectedScreen } from "builderStore"
   import * as routify from "@roxi/routify"
@@ -47,9 +46,6 @@
   onDestroy(stopSyncing)
 </script>
 
-<div class="left">
-  <LeftPanel />
-</div>
 {#if routeComponentId === "screen"}
   <ScreenSettingsPanel />
 {:else if routeComponentId === "navigation"}
@@ -58,9 +54,3 @@
   <ComponentSettingsPanel />
 {/if}
 <slot />
-
-<style>
-  .left {
-    order: -1;
-  }
-</style>