diff --git a/packages/builder/src/components/design/Pane.svelte b/packages/builder/src/components/design/Pane.svelte
deleted file mode 100644
index 88b6ea1c05..0000000000
--- a/packages/builder/src/components/design/Pane.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-
-  export let title
-
-  const createPaneStore = getContext("createPaneStore")
-
-  $: paneStore = createPaneStore(title)
-</script>
-
-{#if $paneStore}
-  <div class="pane">
-    <slot />
-  </div>
-{/if}
-
-<style>
-  .pane {
-    padding: 13px;
-  }
-</style>
diff --git a/packages/builder/src/components/design/RightPanel.svelte b/packages/builder/src/components/design/RightPanel.svelte
deleted file mode 100644
index f9075600f9..0000000000
--- a/packages/builder/src/components/design/RightPanel.svelte
+++ /dev/null
@@ -1,112 +0,0 @@
-<script>
-  import { setContext } from "svelte"
-  import { writable, get } from "svelte/store"
-  import { Icon, Body, Button } from "@budibase/bbui"
-
-  export let icon
-  export let title
-
-  let panes = {}
-  let selectedPaneIdStore = writable(null)
-
-  const createPaneStore = pane => {
-    const id = crypto.randomUUID()
-
-    return {
-      subscribe: callback => {
-        panes[id] = pane
-
-        if (get(selectedPaneIdStore) === null) {
-          selectedPaneIdStore.set(id)
-        }
-
-        const unsubscribeSelectedPaneIdStore = selectedPaneIdStore.subscribe(
-          selectedPaneId => callback(selectedPaneId === id)
-        )
-
-        return () => {
-          delete panes[id]
-          panes = panes
-          unsubscribeSelectedPaneIdStore()
-
-          if (get(selectedPaneIdStore) === id) {
-            const ids = Object.keys(panes)
-
-            if (ids.length > 0) {
-              selectedPaneIdStore.set(ids[0])
-            } else {
-              selectedPaneIdStore.set(null)
-            }
-          }
-        }
-      },
-    }
-  }
-
-  setContext("createPaneStore", createPaneStore)
-</script>
-
-<div class="panel">
-  <div class="header">
-    <div class="icon">
-      <Icon name={icon} />
-    </div>
-    <Body>{title}</Body>
-  </div>
-  <div class="controls">
-    {#each Object.entries(panes) as [id, pane]}
-      <div class="button" class:active={$selectedPaneIdStore === id}>
-        <Button on:click={() => selectedPaneIdStore.set(id)}>{pane}</Button>
-      </div>
-    {/each}
-  </div>
-  <div class="divider" />
-
-  <slot />
-</div>
-
-<style>
-  .panel {
-    width: 310px;
-    background: var(--background);
-  }
-
-  .header {
-    display: flex;
-    padding: 16px 14px;
-    align-items: center;
-  }
-
-  .icon {
-    color: var(--grey-6);
-    margin-right: 8px;
-  }
-
-  .controls {
-    padding: 0 14px 16px;
-    display: flex;
-  }
-
-  .button:first-child {
-    margin-right: 8px;
-  }
-
-  .button :global(button) {
-    border-radius: 4px;
-    border: none;
-    background-color: var(--grey-1);
-    color: var(--ink);
-  }
-
-  .button :global(button):hover {
-    background-color: var(--grey-2);
-  }
-
-  .button.active :global(button) {
-    background-color: var(--grey-2);
-  }
-
-  .divider {
-    border-top: 1px solid var(--grey-3);
-  }
-</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/index.svelte
index f442e3a275..6da744a44a 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/index.svelte
@@ -1,5 +1,6 @@
 <script>
   import { get } from "svelte/store"
+  import Panel from "components/design/Panel.svelte"
   import {
     Detail,
     Toggle,
@@ -25,6 +26,7 @@
       e.detail
     )
   }
+
   const update = async (key, value) => {
     try {
       let navigation = $store.navigation
@@ -36,16 +38,12 @@
   }
 </script>
 
-<div class="panel">
-  <div class="header">
-    <div class="icon">
-      <Icon
-        name={$selectedScreen.showNavigation ? "Visibility" : "VisibilityOff"}
-      />
-    </div>
-    <Body>Navigation</Body>
-  </div>
-  <div class="divider" />
+<Panel
+  title="Navigation"
+  icon={$selectedScreen.showNavigation ? "Visibility" : "VisibilityOff"}
+  borderLeft
+  wide
+>
   <div class="generalSection">
     <div class="subheading">
       <Detail>General</Detail>
@@ -161,16 +159,9 @@
       />
     </div>
   </div>
-</div>
+</Panel>
 
 <style>
-  .panel {
-    overflow: hidden;
-    width: 310px;
-    background: var(--background);
-    border-left: 2px solid var(--grey-2);
-  }
-
   .generalSection {
     padding: 13px 13px 25px;
   }
@@ -178,17 +169,6 @@
   .customizeSection {
     padding: 13px 13px 25px;
   }
-
-  .header {
-    display: flex;
-    padding: 16px 14px;
-    align-items: center;
-  }
-
-  .header :global(p) {
-    font-size: 12px;
-  }
-
   .subheading {
     margin-bottom: 10px;
   }
@@ -197,15 +177,6 @@
     color: var(--grey-6);
   }
 
-  .icon {
-    color: var(--grey-6);
-    margin-right: 8px;
-  }
-
-  .icon :global(svg) {
-    height: 16px;
-  }
-
   .toggle {
     display: flex;
     align-items: center;
