diff --git a/packages/builder/src/components/backend/DataTable/buttons/grid/GridAutomationsButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/grid/GridAutomationsButton.svelte
index 39d894d2fd..9670bb2f35 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/grid/GridAutomationsButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/grid/GridAutomationsButton.svelte
@@ -38,7 +38,7 @@
   }
 </script>
 
-<DetailPopover title="Automations" minWidth={400} bind:this={popover}>
+<DetailPopover title="Automations" bind:this={popover}>
   <svelte:fragment slot="anchor" let:open>
     <ActionButton
       icon="JourneyVoyager"
diff --git a/packages/builder/src/components/backend/DataTable/buttons/grid/GridCreateViewButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/grid/GridCreateViewButton.svelte
deleted file mode 100644
index d4f4bcd1b1..0000000000
--- a/packages/builder/src/components/backend/DataTable/buttons/grid/GridCreateViewButton.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-  import { Modal, ActionButton, TooltipType, TempTooltip } from "@budibase/bbui"
-  import GridCreateViewModal from "../../modals/grid/GridCreateViewModal.svelte"
-
-  const { filter } = getContext("grid")
-
-  let modal
-  let firstFilterUsage = false
-
-  $: {
-    if ($filter?.length && !firstFilterUsage) {
-      firstFilterUsage = true
-    }
-  }
-</script>
-
-<TempTooltip
-  text="Create a view to save your filters"
-  type={TooltipType.Info}
-  condition={firstFilterUsage}
->
-  <ActionButton icon="CollectionAdd" quiet on:click={modal.show}>
-    Create view
-  </ActionButton>
-</TempTooltip>
-<Modal bind:this={modal}>
-  <GridCreateViewModal />
-</Modal>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/grid/GridGenerateButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/grid/GridGenerateButton.svelte
index 84ef6102ca..cb2afbc000 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/grid/GridGenerateButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/grid/GridGenerateButton.svelte
@@ -89,7 +89,7 @@
   }
 </script>
 
-<DetailPopover title="Generate" bind:this={popover} minWidth={400}>
+<DetailPopover title="Generate" bind:this={popover}>
   <svelte:fragment slot="anchor" let:open>
     <ActionButton selected={open}>
       <div class="center">
diff --git a/packages/builder/src/components/backend/DataTable/buttons/grid/GridRowActionsButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/grid/GridRowActionsButton.svelte
index 7b52c72fc7..a6a7c930f5 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/grid/GridRowActionsButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/grid/GridRowActionsButton.svelte
@@ -60,7 +60,7 @@
   }
 </script>
 
-<DetailPopover title="Row actions" minWidth={400} maxWidth={400}>
+<DetailPopover title="Row actions">
   <svelte:fragment slot="anchor" let:open>
     <ActionButton
       icon="Engagement"
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 c192730670..701a286112 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/grid/GridScreensButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/grid/GridScreensButton.svelte
@@ -26,7 +26,7 @@
   }
 </script>
 
-<DetailPopover title="Screens" minWidth={400} bind:this={popover}>
+<DetailPopover title="Screens" bind:this={popover}>
   <svelte:fragment slot="anchor" let:open>
     <ActionButton
       icon="WebPage"
diff --git a/packages/builder/src/components/common/DetailPopover.svelte b/packages/builder/src/components/common/DetailPopover.svelte
index a399bae10f..bc891bfe42 100644
--- a/packages/builder/src/components/common/DetailPopover.svelte
+++ b/packages/builder/src/components/common/DetailPopover.svelte
@@ -3,8 +3,6 @@
 
   export let title
   export let align = "left"
-  export let minWidth
-  export let maxWidth
   export let showPopover
 
   let popover
@@ -24,11 +22,13 @@
 <Popover
   bind:this={popover}
   bind:open
-  minWidth={minWidth || 300}
+  minWidth={400}
+  maxWidth={400}
   {anchor}
   {align}
-  {maxWidth}
   {showPopover}
+  on:open
+  on:close
 >
   <div class="detail-popover">
     <div class="detail-popover__header">
diff --git a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/CreateViewButton.svelte b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/CreateViewButton.svelte
new file mode 100644
index 0000000000..78f1b7edee
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/CreateViewButton.svelte
@@ -0,0 +1,103 @@
+<script>
+  import DetailPopover from "components/common/DetailPopover.svelte"
+  import { Input, notifications, Button, Icon } from "@budibase/bbui"
+  import { goto } from "@roxi/routify"
+  import { viewsV2 } from "stores/builder"
+
+  export let table
+  export let firstView = false
+
+  let name
+  let popover
+
+  $: views = Object.keys(table?.views || {}).map(x => x.toLowerCase())
+  $: trimmedName = name?.trim()
+  $: nameExists = views.includes(trimmedName?.toLowerCase())
+  $: nameValid = trimmedName?.length && !nameExists
+
+  export const show = () => {
+    popover?.show()
+  }
+
+  const enrichSchema = schema => {
+    // We need to sure that "visible" is set to true for any fields which have
+    // not yet been saved with grid metadata attached
+    const cloned = { ...schema }
+    Object.entries(cloned).forEach(([field, fieldSchema]) => {
+      if (fieldSchema.visible == null) {
+        cloned[field] = { ...cloned[field], visible: true }
+      }
+    })
+    return cloned
+  }
+
+  const saveView = async () => {
+    popover.hide()
+    try {
+      const newView = await viewsV2.create({
+        name: trimmedName,
+        tableId: table._id,
+        schema: enrichSchema(table.schema),
+        primaryDisplay: table.primaryDisplay,
+      })
+      notifications.success(`View ${name} created`)
+      $goto(`./${newView.id}`)
+    } catch (error) {
+      notifications.error("Error creating view")
+    }
+  }
+</script>
+
+<DetailPopover
+  title="Create view"
+  bind:this={popover}
+  on:open={() => (name = null)}
+>
+  <svelte:fragment slot="anchor" let:open>
+    {#if firstView}
+      <Button cta>Create a view</Button>
+    {:else}
+      <div class="icon" class:open>
+        <Icon
+          name="Add"
+          size="L"
+          color="var(--spectrum-global-color-gray-600)"
+        />
+      </div>
+    {/if}
+  </svelte:fragment>
+  <Input
+    label="Name"
+    thin
+    bind:value={name}
+    error={nameExists ? "A view already exists with that name" : null}
+    autofocus
+  />
+  <div>
+    <Button cta on:click={saveView} disabled={nameExists || !nameValid}>
+      Create view
+    </Button>
+  </div>
+</DetailPopover>
+
+<style>
+  .icon {
+    height: 32px;
+    padding: 0 8px;
+    border-radius: 4px;
+    display: grid;
+    place-items: center;
+    transition: background 130ms ease-out;
+  }
+  .icon:hover,
+  .icon:active,
+  .icon.open {
+    background: var(--spectrum-global-color-gray-300);
+    cursor: pointer;
+  }
+  .icon:hover :global(.spectrum-Icon),
+  .icon:active :global(.spectrum-Icon),
+  .icon.open :global(.spectrum-Icon) {
+    color: var(--spectrum-global-color-gray-900) !important;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/CreateViewModal.svelte b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/CreateViewModal.svelte
index a37b5ccf82..49f5fcd1ff 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/CreateViewModal.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/CreateViewModal.svelte
@@ -1,64 +1,2 @@
 <script>
-  import { Modal, Input, notifications, ModalContent } from "@budibase/bbui"
-  import { goto } from "@roxi/routify"
-  import { viewsV2 } from "stores/builder"
-
-  export let table
-
-  let name
-  let modal
-
-  $: views = Object.keys(table?.views || {}).map(x => x.toLowerCase())
-  $: trimmedName = name?.trim()
-  $: nameExists = views.includes(trimmedName?.toLowerCase())
-  $: nameValid = trimmedName?.length && !nameExists
-
-  export const show = () => {
-    name = null
-    modal?.show()
-  }
-
-  const enrichSchema = schema => {
-    // We need to sure that "visible" is set to true for any fields which have
-    // not yet been saved with grid metadata attached
-    const cloned = { ...schema }
-    Object.entries(cloned).forEach(([field, fieldSchema]) => {
-      if (fieldSchema.visible == null) {
-        cloned[field] = { ...cloned[field], visible: true }
-      }
-    })
-    return cloned
-  }
-
-  const saveView = async () => {
-    try {
-      const newView = await viewsV2.create({
-        name: trimmedName,
-        tableId: table._id,
-        schema: enrichSchema(table.schema),
-        primaryDisplay: table.primaryDisplay,
-      })
-      notifications.success(`View ${name} created`)
-      name = null
-      $goto(`./${newView.id}`)
-    } catch (error) {
-      notifications.error("Error creating view")
-    }
-  }
 </script>
-
-<Modal bind:this={modal}>
-  <ModalContent
-    title="Create view"
-    confirmText="Create view"
-    onConfirm={saveView}
-    disabled={!nameValid}
-  >
-    <Input
-      label="View name"
-      thin
-      bind:value={name}
-      error={nameExists ? "A view already exists with that name" : null}
-    />
-  </ModalContent>
-</Modal>
diff --git a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/EditViewModal.svelte b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/EditViewModal.svelte
index 0809d55884..0f39fa063d 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/EditViewModal.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/EditViewModal.svelte
@@ -39,7 +39,7 @@
 </script>
 
 <Modal bind:this={editorModal} on:show={initForm}>
-  <ModalContent title="Edit View" onConfirm={save} confirmText="Save">
-    <Input label="View Name" thin bind:value={updatedName} />
+  <ModalContent title="Edit view" onConfirm={save} confirmText="Save">
+    <Input label="Name" thin bind:value={updatedName} />
   </ModalContent>
 </Modal>
diff --git a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/ViewNavBar.svelte b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/ViewNavBar.svelte
index b1fffebbfe..4d48dd6a9b 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/ViewNavBar.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/ViewNavBar.svelte
@@ -26,6 +26,7 @@
   import CreateViewModal from "./CreateViewModal.svelte"
   import { onDestroy } from "svelte"
   import { derived } from "svelte/store"
+  import CreateViewButton from "./CreateViewButton.svelte"
 
   // View overflow
   let observer
@@ -34,7 +35,6 @@
   let overflowMenu
 
   // Editing table
-  let createViewModal
   let editTableModal
   let deleteTableModal
 
@@ -268,7 +268,7 @@
     </div>
   {/if}
   {#if !hasViews && tableEditable}
-    <Button cta on:click={createViewModal?.show}>Create a view</Button>
+    <CreateViewButton firstView {table} />
     <span>
       To create subsets of data, control access and more, create a view.
     </span>
@@ -311,19 +311,11 @@
     </ActionMenu>
   {/if}
   {#if hasViews}
-    <Icon
-      name="Add"
-      size="L"
-      hoverable
-      color="var(--spectrum-global-color-gray-600)"
-      hoverColor="var(--spectrum-global-color-gray-900)"
-      on:click={createViewModal?.show}
-    />
+    <CreateViewButton firstView={false} {table} />
   {/if}
 </div>
 
 {#if table && tableEditable}
-  <CreateViewModal {table} bind:this={createViewModal} />
   <EditTableModal {table} bind:this={editTableModal} />
   <DeleteTableModal {table} bind:this={deleteTableModal} />
 {/if}
@@ -343,7 +335,7 @@
     justify-content: flex-start;
     align-items: center;
     padding: 0 var(--spacing-xl);
-    gap: 12px;
+    gap: 8px;
   }
   .nav__views {
     flex: 0 1 auto;
@@ -353,7 +345,6 @@
     align-items: center;
     overflow: hidden;
     gap: 8px;
-    margin-left: -4px;
   }
 
   /* Table and view items */