diff --git a/packages/builder/src/pages/builder/app/[application]/data/_components/AITableGeneration.svelte b/packages/builder/src/pages/builder/app/[application]/data/_components/AITableGeneration.svelte
new file mode 100644
index 0000000000..93b8bd2ee2
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/data/_components/AITableGeneration.svelte
@@ -0,0 +1,43 @@
+<script>
+  import { Input } from "@budibase/bbui"
+</script>
+
+<div class="ai-generation">
+  <div class="ai-generation-prompt">
+    <Input placeholder="Generate data using AI..." />
+  </div>
+  <div class="ai-generation-prompt-example">
+    Create a table called tickets with title, description, status fields
+  </div>
+  <div class="ai-generation-prompt-example">
+    Create a table called students with name and address fields
+  </div>
+</div>
+
+<style>
+  .ai-generation {
+    max-width: 753px;
+    display: grid;
+    gap: 10px;
+
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto auto;
+    margin-bottom: 36px;
+  }
+
+  .ai-generation-prompt {
+    grid-column: 1 / -1;
+  }
+  .ai-generation-prompt :global(.spectrum-Textfield-input) {
+    background: #1d1d1d;
+    border-radius: 20px;
+  }
+
+  .ai-generation-prompt-example {
+    padding: 2px 8px;
+    gap: 10px;
+
+    border: 1px solid #393939;
+    border-radius: 14px;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/data/new.svelte b/packages/builder/src/pages/builder/app/[application]/data/new.svelte
index 6ff9e63820..7e463e851b 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/new.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/new.svelte
@@ -7,7 +7,7 @@
   } from "@/stores/builder"
 
   import { hasData } from "@/stores/selectors"
-  import { notifications, Body, Icon, AbsTooltip, Input } from "@budibase/bbui"
+  import { notifications, Body, Icon, AbsTooltip } from "@budibase/bbui"
   import { params, goto } from "@roxi/routify"
   import CreateExternalDatasourceModal from "./_components/CreateExternalDatasourceModal/index.svelte"
   import CreateInternalTableModal from "./_components/CreateInternalTableModal.svelte"
@@ -15,6 +15,7 @@
   import IntegrationIcon from "@/components/backend/DatasourceNavigator/IntegrationIcon.svelte"
   import CreationPage from "@/components/common/CreationPage.svelte"
   import ICONS from "@/components/backend/DatasourceNavigator/icons/index.js"
+  import AiTableGeneration from "./_components/AITableGeneration.svelte"
 
   let internalTableModal
   let externalDatasourceModal
@@ -57,17 +58,7 @@
       <Icon name="Info" size="S" />
     </AbsTooltip>
   </div>
-  <div class="ai-generation">
-    <div class="ai-generation-prompt">
-      <Input placeholder="Generate data using AI..." />
-    </div>
-    <div class="ai-generation-prompt-example">
-      Create a table called tickets with title, description, status fields
-    </div>
-    <div class="ai-generation-prompt-example">
-      Create a table called students with name and address fields
-    </div>
-  </div>
+  <AiTableGeneration />
 
   <div class="options">
     <DatasourceOption
@@ -138,30 +129,4 @@
     margin-bottom: 48px;
     max-width: 1050px;
   }
-
-  .ai-generation {
-    max-width: 753px;
-    display: grid;
-    gap: 10px;
-
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: auto auto;
-    margin-bottom: 36px;
-  }
-
-  .ai-generation-prompt {
-    grid-column: 1 / -1;
-  }
-  .ai-generation-prompt :global(.spectrum-Textfield-input) {
-    background: #1d1d1d;
-    border-radius: 20px;
-  }
-
-  .ai-generation-prompt-example {
-    padding: 2px 8px;
-    gap: 10px;
-
-    border: 1px solid #393939;
-    border-radius: 14px;
-  }
 </style>