diff --git a/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte b/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
index 9010cdfcf8..d5f6c5eb6a 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { ModalContent, Modal, Body, Layout, Label } from "@budibase/bbui"
+  import { ModalContent, Modal, Body, Layout, Detail } from "@budibase/bbui"
   import { onMount } from "svelte"
   import ICONS from "../icons"
   import api from "builderStore/api"
@@ -66,7 +66,7 @@
 <Modal bind:this={modal}>
   <ModalContent
     disabled={!Object.keys(integration).length}
-    title="Add Data"
+    title="Data"
     confirmText="Continue"
     cancelText="Start from scratch"
     size="M"
@@ -74,12 +74,11 @@
       chooseNextModal()
     }}
   >
-    <Body size="XS"
-      >All apps need data. You can connect to a data source below, or add data
-      to your app using Budibase's built-in database - it's simple!
-    </Body>
-
     <Layout noPadding>
+      <Body size="XS"
+        >All apps need data. You can connect to a data source below, or add data
+        to your app using Budibase's built-in database.
+      </Body>
       <div
         class:selected={integration.type === INTERNAL}
         on:click={() => selectIntegration(INTERNAL)}
@@ -92,8 +91,12 @@
           >
         </div>
       </div>
-      <Label size="S">Connect to data source</Label>
+    </Layout>
 
+    <Layout gap="XS" noPadding>
+      <div class="title-spacing">
+        <Detail size="S">Connect to data source</Detail>
+      </div>
       <div class="item-list">
         {#each Object.entries(integrations).filter(([key]) => key !== INTERNAL) as [integrationType, schema]}
           <div
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte b/packages/builder/src/components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte
index d1474aa79f..9221cbf083 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte
@@ -1,6 +1,6 @@
 <script>
   import { goto } from "@roxi/routify"
-  import { ModalContent, notifications } from "@budibase/bbui"
+  import { ModalContent, notifications, Body, Layout } from "@budibase/bbui"
   import analytics, { Events } from "analytics"
   import IntegrationConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte"
   import { datasources, tables } from "stores/backend"
@@ -57,7 +57,7 @@
 </script>
 
 <ModalContent
-  title="Add Data"
+  title={`Connect to ${IntegrationNames[integration.type]}`}
   onConfirm={() => saveDatasource()}
   confirmText={integration.plus
     ? "Fetch tables from database"
@@ -65,6 +65,12 @@
   cancelText="Back"
   size="M"
 >
+  <Layout noPadding>
+    <Body size="XS"
+      >Connect your database to Budibase using the config below.
+    </Body>
+  </Layout>
+
   <IntegrationConfigForm
     schema={integration.schema}
     bind:integration={integration.config}
