diff --git a/packages/builder/src/pages/builder/app/[application]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
index bbdc1c50b4..c533e9d232 100644
--- a/packages/builder/src/pages/builder/app/[application]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
@@ -195,7 +195,7 @@
           size="M"
           name="ArrowLeft"
           hoverable
-          on:click={() => $goto("../")}
+          on:click={() => $goto("../../portal/apps")}
         />
         <Heading size="S">{$store.name || "App"}</Heading>
       </div>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/DatasourceModal.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/DatasourceModal.svelte
index e9233113bb..874a109952 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/DatasourceModal.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/DatasourceModal.svelte
@@ -1,6 +1,12 @@
 <script>
   import { store } from "builderStore"
-  import { ModalContent, Layout, notifications, Icon } from "@budibase/bbui"
+  import {
+    ModalContent,
+    Layout,
+    notifications,
+    Icon,
+    Body,
+  } from "@budibase/bbui"
   import { tables, datasources } from "stores/backend"
   import getTemplates from "builderStore/store/screenTemplates"
   import ICONS from "components/backend/DatasourceNavigator/icons"
@@ -70,17 +76,18 @@
     disabled={!selectedScreens.length}
     size="L"
   >
+    <Body size="S">
+      Select which data source you would like to use to create your screens
+    </Body>
     <Layout noPadding gap="S">
       {#each filteredSources as datasource}
         <div class="data-source-wrap">
           <div class="data-source-header">
-            <div class="datasource-icon">
-              <svelte:component
-                this={ICONS[datasource.source]}
-                height="24"
-                width="24"
-              />
-            </div>
+            <svelte:component
+              this={ICONS[datasource.source]}
+              height="24"
+              width="24"
+            />
             <div class="data-source-name">{datasource.name}</div>
           </div>
           {#if Array.isArray(datasource.entities)}
@@ -153,19 +160,21 @@
   .data-source-wrap {
     padding-bottom: var(--spectrum-alias-item-padding-s);
     display: grid;
-    grid-gap: var(--spacing-xs);
+    grid-gap: var(--spacing-s);
   }
 
   .data-source-header {
     display: flex;
     align-items: center;
+    gap: var(--spacing-m);
+    padding-bottom: var(--spacing-xs);
   }
 
   .data-source-entry {
     cursor: pointer;
     grid-gap: var(--spectrum-alias-grid-margin-xsmall);
     padding: var(--spectrum-alias-item-padding-s);
-    background: var(--spectrum-alias-background-color-primary);
+    background: var(--spectrum-alias-background-color-secondary);
     transition: 0.3s all;
     border: 1px solid var(--spectrum-global-color-gray-300);
     border-radius: 4px;
@@ -179,11 +188,6 @@
     background: var(--spectrum-alias-background-color-tertiary);
   }
 
-  .data-source-name {
-    padding: var(--spectrum-alias-item-padding-s);
-    min-height: var(--spectrum-icon-size-s);
-  }
-
   .data-source-entry .data-source-check {
     margin-left: auto;
   }
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/NewScreenModal.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/NewScreenModal.svelte
index 8fd22926e4..e2d66a80c0 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/NewScreenModal.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/NewScreenModal.svelte
@@ -107,7 +107,7 @@
     cursor: pointer;
     grid-gap: var(--spectrum-alias-grid-margin-xsmall);
     padding: var(--spectrum-alias-item-padding-s);
-    background: var(--spectrum-alias-background-color-primary);
+    background: var(--spectrum-alias-background-color-secondary);
     transition: 0.3s all;
     border: 1px solid var(--spectrum-global-color-gray-300);
     border-radius: 4px;
@@ -123,6 +123,9 @@
   .screen-type-wrap .screen-type-text {
     padding-left: var(--spectrum-alias-item-padding-xl);
   }
+  .screen-type-wrap .screen-type-text :global(h1) {
+    padding-bottom: var(--spacing-xs);
+  }
   .screen-type-wrap :global(.spectrum-Icon) {
     min-width: var(--spectrum-icon-size-m);
   }
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDetailsModal.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDetailsModal.svelte
index 4afd182053..42bc68f7c4 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDetailsModal.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDetailsModal.svelte
@@ -7,6 +7,7 @@
   export let onConfirm
   export let onCancel
   export let screenUrl
+  export let screenName
   export let confirmText = "Continue"
 
   let routeError
@@ -44,6 +45,7 @@
   const confirmScreenDetails = async () => {
     await onConfirm({
       screenUrl,
+      screenName,
     })
   }
 </script>
