diff --git a/packages/builder/src/components/backend/DataTable/buttons/grid/GridScreensButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/grid/GridScreensButton.svelte
index b2edb52725..f3a119b456 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/grid/GridScreensButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/grid/GridScreensButton.svelte
@@ -1,20 +1,29 @@
-<script>
-  import { ActionButton, List, ListItem, Button } from "@budibase/bbui"
-  import DetailPopover from "@/components/common/DetailPopover.svelte"
-  import { screenStore, appStore } from "@/stores/builder"
+<script lang="ts">
+  import { Button } from "@budibase/bbui"
+  import ScreensPopover from "@/components/common/ScreensPopover.svelte"
+  import { screenStore } from "@/stores/builder"
   import { getContext, createEventDispatcher } from "svelte"
-
-  const { datasource } = getContext("grid")
+  import type { Screen, ScreenUsage } from "@budibase/types"
   const dispatch = createEventDispatcher()
 
-  let popover
+  const { datasource }: { datasource: any } = getContext("grid")
+
+  let popover: any
 
   $: ds = $datasource
   $: resourceId = ds?.type === "table" ? ds.tableId : ds?.id
   $: connectedScreens = findConnectedScreens($screenStore.screens, resourceId)
-  $: screenCount = connectedScreens.length
+  $: screenUsage = connectedScreens.map(
+    (screen: Screen): ScreenUsage => ({
+      url: screen.routing?.route,
+      _id: screen._id!,
+    })
+  )
 
-  const findConnectedScreens = (screens, resourceId) => {
+  const findConnectedScreens = (
+    screens: Screen[],
+    resourceId: string
+  ): Screen[] => {
     return screens.filter(screen => {
       return JSON.stringify(screen).includes(`"${resourceId}"`)
     })
@@ -26,34 +35,16 @@
   }
 </script>
 
-<DetailPopover title="Screens" bind:this={popover}>
-  <svelte:fragment slot="anchor" let:open>
-    <ActionButton
-      icon="WebPage"
-      selected={open || screenCount}
-      quiet
-      accentColor="#364800"
-    >
-      Screens{screenCount ? `: ${screenCount}` : ""}
-    </ActionButton>
-  </svelte:fragment>
-  {#if !connectedScreens.length}
-    There aren't any screens connected to this data.
-  {:else}
-    The following screens are connected to this data.
-    <List>
-      {#each connectedScreens as screen}
-        <ListItem
-          title={screen.routing.route}
-          url={`/builder/app/${$appStore.appId}/design/${screen._id}`}
-          showArrow
-        />
-      {/each}
-    </List>
-  {/if}
-  <div>
+<ScreensPopover
+  bind:this={popover}
+  screens={screenUsage}
+  icon="WebPage"
+  accentColor="#364800"
+  showCount
+>
+  <svelte:fragment slot="footer">
     <Button secondary icon="WebPage" on:click={generateScreen}>
       Generate app screen
     </Button>
-  </div>
-</DetailPopover>
+  </svelte:fragment>
+</ScreensPopover>
diff --git a/packages/builder/src/components/common/ScreensPopover.svelte b/packages/builder/src/components/common/ScreensPopover.svelte
new file mode 100644
index 0000000000..7e45d591d2
--- /dev/null
+++ b/packages/builder/src/components/common/ScreensPopover.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+  import { List, ListItem, ActionButton } from "@budibase/bbui"
+  import DetailPopover from "@/components/common/DetailPopover.svelte"
+  import { appStore } from "@/stores/builder"
+  import type { ScreenUsage } from "@budibase/types"
+  import { PopoverAlign } from "@budibase/types"
+
+  export let screens: ScreenUsage[] = []
+  export let icon = "DeviceDesktop"
+  export let accentColor: string | undefined = undefined
+  export let showCount = false
+  export let align = PopoverAlign.Left
+
+  let popover: any
+
+  export function show() {
+    popover?.show()
+  }
+
+  export function hide() {
+    popover?.hide()
+  }
+</script>
+
+<DetailPopover title="Screens" bind:this={popover} {align}>
+  <svelte:fragment slot="anchor" let:open>
+    <ActionButton
+      {icon}
+      quiet
+      selected={open || (showCount && screens.length)}
+      {accentColor}
+      on:click={show}
+    >
+      Screens{showCount && screens.length ? `: ${screens.length}` : ""}
+    </ActionButton>
+  </svelte:fragment>
+
+  {#if !screens.length}
+    <div class="empty-state">
+      <p>No screens are using this data.</p>
+    </div>
+  {:else}
+    <p class="description">The following screens are connected to this data.</p>
+    <List>
+      {#each screens as screen}
+        <ListItem
+          title={screen.url}
+          url={`/builder/app/${$appStore.appId}/design/${screen._id}`}
+          showArrow
+        />
+      {/each}
+    </List>
+  {/if}
+
+  <slot name="footer" />
+</DetailPopover>
+
+<style>
+  .description {
+    font-size: var(--font-size-s);
+    margin: 0 0 var(--spacing-xs) 0;
+  }
+
+  .empty-state {
+    padding: var(--spacing-m);
+    text-align: center;
+    color: var(--grey-5);
+    font-size: var(--font-size-s);
+  }
+</style>
diff --git a/packages/builder/src/components/integration/ConnectedQueryScreens.svelte b/packages/builder/src/components/integration/ConnectedQueryScreens.svelte
index e97017df96..2a24088dc4 100644
--- a/packages/builder/src/components/integration/ConnectedQueryScreens.svelte
+++ b/packages/builder/src/components/integration/ConnectedQueryScreens.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
   import { onMount } from "svelte"
-  import { List, ListItem, ActionButton } from "@budibase/bbui"
-  import DetailPopover from "@/components/common/DetailPopover.svelte"
-  import { appStore, screenStore } from "@/stores/builder"
+
+  import { screenStore } from "@/stores/builder"
+  import ScreensPopover from "@/components/common/ScreensPopover.svelte"
   import type { ScreenUsage } from "@budibase/types"
-  import { PopoverAlign } from "@budibase/types"
 
   export let sourceId: string
 
@@ -25,42 +24,10 @@
   })
 </script>
 
-<DetailPopover title="Screens" bind:this={popover} align={PopoverAlign.Left}>
-  <svelte:fragment slot="anchor" let:open>
-    <ActionButton icon="DeviceDesktop" quiet selected={open} on:click={show}>
-      Screens
-    </ActionButton>
-  </svelte:fragment>
-
-  {#if !screens.length}
-    <div class="empty-state">
-      <p>No screens are using this data.</p>
-    </div>
-  {:else}
-    <p class="description">The following screens are connected to this data.</p>
-
-    <List>
-      {#each screens as screen}
-        <ListItem
-          title={screen.url}
-          url={`/builder/app/${$appStore.appId}/design/${screen._id}`}
-          showArrow
-        />
-      {/each}
-    </List>
-  {/if}
-</DetailPopover>
-
-<style>
-  .description {
-    font-size: var(--font-size-s);
-    margin: 0 0 var(--spacing-xs) 0;
-  }
-
-  .empty-state {
-    padding: var(--spacing-m);
-    text-align: center;
-    color: var(--grey-5);
-    font-size: var(--font-size-s);
-  }
-</style>
+<ScreensPopover
+  bind:this={popover}
+  {screens}
+  icon="WebPage"
+  accentColor="#364800"
+  showCount
+/>