diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditUser.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditUser.svelte
index 5753b7d5bb..6467b8e953 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditUser.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditUser.svelte
@@ -34,11 +34,26 @@
   }
 
   const saveRow = async () => {
+    errors = []
+
+    // Do some basic front end validation first
+    if (!row.email) {
+      errors = [...errors, { message: "Email is required" }]
+    }
+    if (!row.password) {
+      errors = [...errors, { message: "Password is required" }]
+    }
+    if (!row.roleId) {
+      errors = [...errors, { message: "Role is required" }]
+    }
+    if (errors.length) {
+      return false
+    }
+
     const rowResponse = await backendApi.saveRow(
       { ...row, tableId: table._id },
       table._id
     )
-
     if (rowResponse.errors) {
       if (Array.isArray(rowResponse.errors)) {
         errors = rowResponse.errors.map(error => ({ message: error }))
@@ -48,6 +63,9 @@
           .flat()
       }
       return false
+    } else if (rowResponse.status === 400 && rowResponse.message) {
+      errors = [{ message: rowResponse.message }]
+      return false
     }
 
     notifier.success("User saved successfully.")
diff --git a/packages/standard-components/src/Card.svelte b/packages/standard-components/src/Card.svelte
index 33be4185f7..85f30c5a09 100644
--- a/packages/standard-components/src/Card.svelte
+++ b/packages/standard-components/src/Card.svelte
@@ -40,7 +40,7 @@
     <a
       use:linkable
       style="--linkColor: {linkColor}; --linkHoverColor: {linkHoverColor}"
-      href={linkUrl}>
+      href={linkUrl || '/'}>
       {linkText}
     </a>
   </div>
@@ -71,6 +71,7 @@
     font-size: 1.25rem;
     font-weight: 700;
     margin: 0;
+    white-space: pre-wrap;
   }
 
   .text {
@@ -78,6 +79,7 @@
     margin: 0;
     font-weight: 400;
     line-height: 1.5rem;
+    white-space: pre-wrap;
   }
 
   a {
@@ -85,6 +87,7 @@
     text-decoration: none;
     color: var(--linkColor);
     font-weight: 600;
+    white-space: pre-wrap;
   }
 
   a:hover {
diff --git a/packages/standard-components/src/CardHorizontal.svelte b/packages/standard-components/src/CardHorizontal.svelte
index 5d7596e296..523d796cf5 100644
--- a/packages/standard-components/src/CardHorizontal.svelte
+++ b/packages/standard-components/src/CardHorizontal.svelte
@@ -40,7 +40,7 @@
       <p class="subtext">{subtext}</p>
       <a
         style="--linkColor: {linkColor}; --linkHoverColor: {linkHoverColor}"
-        href={linkUrl}>{linkText}</a>
+        href={linkUrl || '/'}>{linkText}</a>
     </footer>
   </div>
 </div>
@@ -71,6 +71,7 @@
     font-size: 1rem;
     font-weight: 700;
     margin: 0;
+    white-space: pre-wrap;
   }
 
   .text {
@@ -78,6 +79,7 @@
     margin: 0.5rem 0 0 0;
     font-weight: 400;
     line-height: 1.25rem;
+    white-space: pre-wrap;
   }
 
   footer {
@@ -91,6 +93,7 @@
     margin: 0;
     font-weight: 400;
     color: #757575;
+    white-space: pre-wrap;
   }
 
   a {
@@ -99,7 +102,7 @@
     color: var(--linkColor);
     font-weight: 600;
     font-size: 0.85rem;
-    margin: 0;
+    white-space: pre-wrap;
   }
 
   a:hover {
diff --git a/packages/standard-components/src/CardStat.svelte b/packages/standard-components/src/CardStat.svelte
index e5e40ad862..86291db915 100644
--- a/packages/standard-components/src/CardStat.svelte
+++ b/packages/standard-components/src/CardStat.svelte
@@ -20,7 +20,6 @@
   .container {
     min-width: 260px;
     width: max-content;
-    max-height: 170px;
     border: 1px solid var(--grey-3);
     border-radius: 0.3rem;
     color: var(--blue);
@@ -31,6 +30,7 @@
     color: #9e9e9e;
     font-weight: 500;
     margin: 1rem 1.5rem 0.5rem 1.5rem;
+    white-space: pre-wrap;
   }
 
   .value {
@@ -38,6 +38,7 @@
     font-weight: 500;
     margin: 0 1.5rem 1.5rem 1.5rem;
     color: inherit;
+    white-space: pre-wrap;
   }
 
   .label {
@@ -45,5 +46,6 @@
     font-weight: 400;
     color: #9e9e9e;
     margin: 1rem 1.5rem;
+    white-space: pre-wrap;
   }
 </style>
diff --git a/packages/standard-components/src/Heading.svelte b/packages/standard-components/src/Heading.svelte
index 66775dc666..f06ac86afd 100644
--- a/packages/standard-components/src/Heading.svelte
+++ b/packages/standard-components/src/Heading.svelte
@@ -4,21 +4,31 @@
   const { styleable } = getContext("sdk")
   const component = getContext("component")
 
-  export let className = ""
   export let type
   export let text = ""
 </script>
 
 {#if type === 'h1'}
-  <h1 class={className} use:styleable={$component.styles}>{text}</h1>
+  <h1 use:styleable={$component.styles}>{text}</h1>
 {:else if type === 'h2'}
-  <h2 class={className} use:styleable={$component.styles}>{text}</h2>
+  <h2 use:styleable={$component.styles}>{text}</h2>
 {:else if type === 'h3'}
-  <h3 class={className} use:styleable={$component.styles}>{text}</h3>
+  <h3 use:styleable={$component.styles}>{text}</h3>
 {:else if type === 'h4'}
-  <h4 class={className} use:styleable={$component.styles}>{text}</h4>
+  <h4 use:styleable={$component.styles}>{text}</h4>
 {:else if type === 'h5'}
-  <h5 class={className} use:styleable={$component.styles}>{text}</h5>
+  <h5 use:styleable={$component.styles}>{text}</h5>
 {:else if type === 'h6'}
-  <h6 class={className} use:styleable={$component.styles}>{text}</h6>
+  <h6 use:styleable={$component.styles}>{text}</h6>
 {/if}
+
+<style>
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    white-space: pre-wrap;
+  }
+</style>
diff --git a/packages/standard-components/src/StackedList.svelte b/packages/standard-components/src/StackedList.svelte
index b06ce53ebe..3cf70b2ec1 100644
--- a/packages/standard-components/src/StackedList.svelte
+++ b/packages/standard-components/src/StackedList.svelte
@@ -50,6 +50,7 @@
 
   .subheading {
     opacity: 0.6;
+    white-space: pre-wrap;
   }
 
   .content {
@@ -60,6 +61,7 @@
 
   .heading {
     font-weight: 600;
+    white-space: pre-wrap;
   }
 
   .image-block {
diff --git a/packages/standard-components/src/Text.svelte b/packages/standard-components/src/Text.svelte
index 887bdec29d..ab62352694 100644
--- a/packages/standard-components/src/Text.svelte
+++ b/packages/standard-components/src/Text.svelte
@@ -5,38 +5,13 @@
   const component = getContext("component")
 
   export let text = ""
-  export let className = ""
-  export let type = ""
-
-  const isTag = tag => type === tag
 </script>
 
-{#if isTag('none')}
-  <span use:styleable={$component.styles}>{text}</span>
-{:else if isTag('bold')}
-  <b class={className} use:styleable={$component.styles}>{text}</b>
-{:else if isTag('strong')}
-  <strong class={className} use:styleable={$component.styles}>{text}</strong>
-{:else if isTag('italic')}
-  <i class={className} use:styleable={$component.styles}>{text}</i>
-{:else if isTag('emphasis')}
-  <em class={className} use:styleable={$component.styles}>{text}</em>
-{:else if isTag('mark')}
-  <mark class={className} use:styleable={$component.styles}>{text}</mark>
-{:else if isTag('small')}
-  <small class={className} use:styleable={$component.styles}>{text}</small>
-{:else if isTag('del')}
-  <del class={className} use:styleable={$component.styles}>{text}</del>
-{:else if isTag('ins')}
-  <ins class={className} use:styleable={$component.styles}>{text}</ins>
-{:else if isTag('sub')}
-  <sub class={className} use:styleable={$component.styles}>{text}</sub>
-{:else if isTag('sup')}
-  <sup class={className} use:styleable={$component.styles}>{text}</sup>
-{:else}<span use:styleable={$component.styles}>{text}</span>{/if}
+<p use:styleable={$component.styles}>{text}</p>
 
 <style>
-  span {
+  p {
     display: inline-block;
+    white-space: pre-wrap;
   }
 </style>