diff --git a/packages/web/src/Screen.svelte b/packages/web/src/Screen.svelte
index 3cdf48060..1c10928d5 100644
--- a/packages/web/src/Screen.svelte
+++ b/packages/web/src/Screen.svelte
@@ -3,7 +3,7 @@
   import WidgetIconPanel from './widgets/WidgetIconPanel.svelte';
   import { currentTheme, leftPanelWidth, selectedWidget, visibleCommandPalette, visibleToolbar } from './stores';
   import TabsPanel from './widgets/TabsPanel.svelte';
-  import TabContent from './TabContent.svelte';
+  import TabRegister from './TabRegister.svelte';
   import CommandPalette from './commands/CommandPalette.svelte';
   import Toolbar from './widgets/Toolbar.svelte';
   import splitterDrag from './utility/splitterDrag';
@@ -28,7 +28,7 @@
     <TabsPanel />
   </div>
   <div class="content">
-    <TabContent />
+    <TabRegister />
   </div>
   {#if $selectedWidget}
     <div
diff --git a/packages/web/src/TabContent.svelte b/packages/web/src/TabContent.svelte
index 8bb481ed8..7597f1d8b 100644
--- a/packages/web/src/TabContent.svelte
+++ b/packages/web/src/TabContent.svelte
@@ -1,61 +1,12 @@
-<script context="module" lang="ts">
-  function createTabComponent(selectedTab) {
-    const tabComponent = tabs[selectedTab.tabComponent]?.default;
-    if (tabComponent) {
-      return {
-        tabComponent,
-        props: selectedTab && selectedTab.props,
-      };
-    }
-    return null;
-  }
-</script>
-
 <script lang="ts">
-  import _ from 'lodash';
-  import { openedTabs } from './stores';
-  import tabs from './tabs';
-
-  let mountedTabs = {};
-  $: selectedTab = $openedTabs.find(x => x.selected && x.closedTime == null);
-
-  // cleanup closed tabs
-  $: {
-    if (
-      _.difference(
-        _.keys(mountedTabs),
-        _.map(
-          $openedTabs.filter(x => x.closedTime == null),
-          'tabid'
-        )
-      ).length > 0
-    ) {
-      mountedTabs = _.pickBy(mountedTabs, (v, k) => $openedTabs.find(x => x.tabid == k && x.closedTime == null));
-    }
-  }
-
-  // open missing tabs
-  $: {
-    if (selectedTab) {
-      const { tabid } = selectedTab;
-      if (tabid && !mountedTabs[tabid]) {
-        const newTab = createTabComponent(selectedTab);
-        if (newTab) {
-          mountedTabs = {
-            ...mountedTabs,
-            [tabid]: newTab,
-          };
-        }
-      }
-    }
-  }
+  export let tabid;
+  export let tabVisible;
+  export let tabComponent;
 </script>
 
-{#each _.keys(mountedTabs) as tabid (tabid)}
-  <div class:tabVisible={tabid == (selectedTab && selectedTab.tabid)}>
-    <svelte:component this={mountedTabs[tabid].tabComponent} {...mountedTabs[tabid].props} {tabid} />
-  </div>
-{/each}
+<div class:tabVisible>
+  <svelte:component this={tabComponent} {...$$restProps} {tabid} {tabVisible} />
+</div>
 
 <style>
   div {
diff --git a/packages/web/src/TabRegister.svelte b/packages/web/src/TabRegister.svelte
new file mode 100644
index 000000000..d5bf9de5d
--- /dev/null
+++ b/packages/web/src/TabRegister.svelte
@@ -0,0 +1,62 @@
+<script context="module" lang="ts">
+  function createTabComponent(selectedTab) {
+    const tabComponent = tabs[selectedTab.tabComponent]?.default;
+    if (tabComponent) {
+      return {
+        tabComponent,
+        props: selectedTab && selectedTab.props,
+      };
+    }
+    return null;
+  }
+</script>
+
+<script lang="ts">
+  import _ from 'lodash';
+  import { openedTabs } from './stores';
+  import TabContent from './TabContent.svelte';
+  import tabs from './tabs';
+
+  let mountedTabs = {};
+  $: selectedTab = $openedTabs.find(x => x.selected && x.closedTime == null);
+
+  // cleanup closed tabs
+  $: {
+    if (
+      _.difference(
+        _.keys(mountedTabs),
+        _.map(
+          $openedTabs.filter(x => x.closedTime == null),
+          'tabid'
+        )
+      ).length > 0
+    ) {
+      mountedTabs = _.pickBy(mountedTabs, (v, k) => $openedTabs.find(x => x.tabid == k && x.closedTime == null));
+    }
+  }
+
+  // open missing tabs
+  $: {
+    if (selectedTab) {
+      const { tabid } = selectedTab;
+      if (tabid && !mountedTabs[tabid]) {
+        const newTab = createTabComponent(selectedTab);
+        if (newTab) {
+          mountedTabs = {
+            ...mountedTabs,
+            [tabid]: newTab,
+          };
+        }
+      }
+    }
+  }
+</script>
+
+{#each _.keys(mountedTabs) as tabid (tabid)}
+  <TabContent
+    tabComponent={mountedTabs[tabid].tabComponent}
+    {...mountedTabs[tabid].props}
+    {tabid}
+    tabVisible={tabid == (selectedTab && selectedTab.tabid)}
+  />
+{/each}