diff --git a/packages/bbui/src/ActionButton/ActionButton.svelte b/packages/bbui/src/ActionButton/ActionButton.svelte
index cfc810807e..cc4417be2a 100644
--- a/packages/bbui/src/ActionButton/ActionButton.svelte
+++ b/packages/bbui/src/ActionButton/ActionButton.svelte
@@ -88,6 +88,7 @@
   }
   .is-selected:not(.spectrum-ActionButton--emphasized) {
     background: var(--spectrum-global-color-gray-300);
+    border-color: var(--spectrum-global-color-gray-700);
   }
   .noPadding {
     padding: 0;
diff --git a/packages/bbui/src/FancyForm/FancyButton.svelte b/packages/bbui/src/FancyForm/FancyButton.svelte
new file mode 100644
index 0000000000..09615df8fa
--- /dev/null
+++ b/packages/bbui/src/FancyForm/FancyButton.svelte
@@ -0,0 +1,29 @@
+<script>
+  import Icon from "../Icon/Icon.svelte"
+  import FancyField from "./FancyField.svelte"
+
+  export let icon
+  export let disabled
+</script>
+
+<FancyField on:click clickable {disabled}>
+  {#if icon}
+    {#if icon.includes("/")}
+      <img src={icon} alt="button" />
+    {:else}
+      <Icon name={icon} />
+    {/if}
+  {/if}
+  <div>
+    <slot />
+  </div>
+</FancyField>
+
+<style>
+  img {
+    width: 22px;
+  }
+  div {
+    font-size: var(--font-size-l);
+  }
+</style>
diff --git a/packages/bbui/src/FancyForm/FancyButtonRadio.svelte b/packages/bbui/src/FancyForm/FancyButtonRadio.svelte
new file mode 100644
index 0000000000..510fd8efb8
--- /dev/null
+++ b/packages/bbui/src/FancyForm/FancyButtonRadio.svelte
@@ -0,0 +1,70 @@
+<script>
+  import { createEventDispatcher } from "svelte"
+  import FancyField from "./FancyField.svelte"
+  import FancyFieldLabel from "./FancyFieldLabel.svelte"
+  import ActionButton from "../ActionButton/ActionButton.svelte"
+
+  export let label
+  export let value
+  export let disabled = false
+  export let error = null
+  export let validate = null
+  export let options = []
+  export let getOptionLabel = option => extractProperty(option, "label")
+  export let getOptionValue = option => extractProperty(option, "value")
+
+  const dispatch = createEventDispatcher()
+
+  $: placeholder = !value
+
+  const extractProperty = (value, property) => {
+    if (value && typeof value === "object") {
+      return value[property]
+    }
+    return value
+  }
+
+  const onChange = newValue => {
+    dispatch("change", newValue)
+    value = newValue
+    if (validate) {
+      error = validate(newValue)
+    }
+  }
+</script>
+
+<FancyField {error} {value} {validate} {disabled} autoHeight>
+  {#if label}
+    <FancyFieldLabel placeholder={false}>{label}</FancyFieldLabel>
+  {/if}
+
+  <div class="options">
+    {#each options as option}
+      <ActionButton
+        selected={getOptionValue(option) === value}
+        on:click={() => onChange(getOptionValue(option))}
+      >
+        {getOptionLabel(option)}
+      </ActionButton>
+    {/each}
+  </div>
+</FancyField>
+
+<style>
+  .options {
+    margin-top: 34px;
+    margin-bottom: 14px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 6px;
+    flex-wrap: wrap;
+  }
+  .options :global(.spectrum-ActionButton) {
+    font-size: 15px;
+    line-height: 17px;
+    height: auto;
+    padding: 6px 10px;
+  }
+</style>
diff --git a/packages/bbui/src/FancyForm/FancyCheckbox.svelte b/packages/bbui/src/FancyForm/FancyCheckbox.svelte
new file mode 100644
index 0000000000..191cc79485
--- /dev/null
+++ b/packages/bbui/src/FancyForm/FancyCheckbox.svelte
@@ -0,0 +1,53 @@
+<script>
+  import { createEventDispatcher } from "svelte"
+  import FancyField from "./FancyField.svelte"
+  import Checkbox from "../Form/Core/Checkbox.svelte"
+
+  export let value
+  export let text
+  export let disabled = false
+  export let error = null
+  export let validate = null
+
+  const dispatch = createEventDispatcher()
+
+  const onChange = () => {
+    const newValue = !value
+    dispatch("change", newValue)
+    value = newValue
+    if (validate) {
+      error = validate(newValue)
+    }
+  }
+</script>
+
+<FancyField {error} {value} {validate} {disabled} clickable on:click={onChange}>
+  <span>
+    <Checkbox {disabled} {value} />
+  </span>
+  <div class="text">
+    {#if text}
+      {text}
+    {/if}
+    <slot />
+  </div>
+</FancyField>
+
+<style>
+  span {
+    pointer-events: none;
+  }
+  .text {
+    font-size: 15px;
+    line-height: 17px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+  .text > :global(*) {
+    font-size: inherit !important;
+  }
+</style>
diff --git a/packages/bbui/src/FancyForm/FancyField.svelte b/packages/bbui/src/FancyForm/FancyField.svelte
new file mode 100644
index 0000000000..89f2dec7d0
--- /dev/null
+++ b/packages/bbui/src/FancyForm/FancyField.svelte
@@ -0,0 +1,126 @@
+<script>
+  import Icon from "../Icon/Icon.svelte"
+  import { getContext, onMount } from "svelte"
+  import { slide } from "svelte/transition"
+
+  export let disabled = false
+  export let error = null
+  export let focused = false
+  export let clickable = false
+  export let validate
+  export let value
+  export let ref
+  export let autoHeight
+
+  const formContext = getContext("fancy-form")
+  const id = Math.random()
+  const API = {
+    validate: () => {
+      if (validate) {
+        error = validate(value)
+      }
+      return !error
+    },
+  }
+
+  onMount(() => {
+    if (formContext) {
+      formContext.registerField(id, API)
+    }
+    return () => {
+      if (formContext) {
+        formContext.unregisterField(id)
+      }
+    }
+  })
+</script>
+
+<div
+  bind:this={ref}
+  class="fancy-field"
+  class:error
+  class:disabled
+  class:focused
+  class:clickable
+  class:auto-height={autoHeight}
+>
+  <div class="content" on:click>
+    <div class="field">
+      <slot />
+    </div>
+    {#if error}
+      <div class="error-icon">
+        <Icon name="Alert" />
+      </div>
+    {/if}
+  </div>
+  {#if error}
+    <div transition:slide|local={{ duration: 130 }} class="error-message">
+      {error}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .fancy-field {
+    max-width: 400px;
+    background: var(--spectrum-global-color-gray-75);
+    border: 1px solid var(--spectrum-global-color-gray-300);
+    border-radius: 4px;
+    box-sizing: border-box;
+    transition: border-color 130ms ease-out, background 130ms ease-out,
+      background 130ms ease-out;
+    color: var(--spectrum-global-color-gray-800);
+  }
+  .fancy-field:hover {
+    border-color: var(--spectrum-global-color-gray-400);
+  }
+  .fancy-field.clickable:hover {
+    background: var(--spectrum-global-color-gray-200);
+    cursor: pointer;
+  }
+  .fancy-field.focused {
+    border-color: var(--spectrum-global-color-blue-400);
+  }
+  .fancy-field.error {
+    border-color: var(--spectrum-global-color-red-400);
+  }
+  .fancy-field.disabled {
+    background: var(--spectrum-global-color-gray-200);
+    color: var(--spectrum-global-color-gray-400);
+    border: 1px solid var(--spectrum-global-color-gray-300);
+    pointer-events: none;
+  }
+  .content {
+    position: relative;
+    height: 64px;
+    padding: 0 16px;
+  }
+  .fancy-field.auto-height .content {
+    height: auto;
+  }
+  .content,
+  .field {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 16px;
+  }
+  .field {
+    flex: 1 1 auto;
+  }
+  .error-message {
+    background: var(--spectrum-global-color-red-400);
+    color: white;
+    font-size: 14px;
+    padding: 6px 16px;
+    font-weight: 500;
+  }
+  .error-icon {
+    flex: 0 0 auto;
+  }
+  .error-icon :global(.spectrum-Icon) {
+    fill: var(--spectrum-global-color-red-400);
+  }
+</style>
diff --git a/packages/bbui/src/FancyForm/FancyFieldLabel.svelte b/packages/bbui/src/FancyForm/FancyFieldLabel.svelte
new file mode 100644
index 0000000000..181cff50e4
--- /dev/null
+++ b/packages/bbui/src/FancyForm/FancyFieldLabel.svelte
@@ -0,0 +1,25 @@
+<script>
+  export let placeholder = true
+</script>
+
+<div class:placeholder>
+  <slot />
+</div>
+
+<style>
+  div {
+    font-size: 14px;
+    line-height: 15px;
+    font-weight: 500;
+    position: absolute;
+    top: 10px;
+    color: var(--spectrum-global-color-gray-600);
+    transition: font-size 130ms ease-out, top 130ms ease-out,
+      transform 130ms ease-out;
+  }
+  div.placeholder {
+    top: 50%;
+    font-size: 15px;
+    transform: translateY(-50%);
+  }
+</style>
diff --git a/packages/bbui/src/FancyForm/FancyForm.svelte b/packages/bbui/src/FancyForm/FancyForm.svelte
new file mode 100644
index 0000000000..f874238572
--- /dev/null
+++ b/packages/bbui/src/FancyForm/FancyForm.svelte
@@ -0,0 +1,40 @@
+<script>
+  import { setContext } from "svelte"
+
+  let fields = {}
+
+  setContext("fancy-form", {
+    registerField: (id, api) => {
+      fields = { ...fields, [id]: api }
+    },
+    unregisterField: id => {
+      delete fields[id]
+      fields = fields
+    },
+  })
+
+  export const validate = () => {
+    let valid = true
+    Object.values(fields).forEach(api => {
+      if (!api.validate()) {
+        valid = false
+      }
+    })
+    return valid
+  }
+</script>
+
+<div class="fancy-form">
+  <slot />
+</div>
+
+<style>
+  .fancy-form :global(.fancy-field:not(:first-of-type)) {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+  .fancy-form :global(.fancy-field:not(:last-of-type)) {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+</style>
diff --git a/packages/bbui/src/FancyForm/FancyInput.svelte b/packages/bbui/src/FancyForm/FancyInput.svelte
new file mode 100644
index 0000000000..ef254949c8
--- /dev/null
+++ b/packages/bbui/src/FancyForm/FancyInput.svelte
@@ -0,0 +1,63 @@
+<script>
+  import { createEventDispatcher } from "svelte"
+  import FancyField from "./FancyField.svelte"
+  import FancyFieldLabel from "./FancyFieldLabel.svelte"
+
+  export let label
+  export let value
+  export let type = "text"
+  export let disabled = false
+  export let error = null
+  export let validate = null
+
+  const dispatch = createEventDispatcher()
+
+  let focused = false
+  $: placeholder = !focused && !value
+
+  const onChange = e => {
+    const newValue = e.target.value
+    dispatch("change", newValue)
+    value = newValue
+    if (validate) {
+      error = validate(newValue)
+    }
+  }
+</script>
+
+<FancyField {error} {value} {validate} {disabled} {focused}>
+  {#if label}
+    <FancyFieldLabel {placeholder}>{label}</FancyFieldLabel>
+  {/if}
+  <input
+    {disabled}
+    value={value || ""}
+    type={type || "text"}
+    on:input={onChange}
+    on:focus={() => (focused = true)}
+    on:blur={() => (focused = false)}
+    class:placeholder
+  />
+</FancyField>
+
+<style>
+  input {
+    width: 100%;
+    transition: transform 130ms ease-out;
+    transform: translateY(9px);
+    background: transparent;
+    font-size: 15px;
+    line-height: 17px;
+    font-family: var(--font-sans);
+    color: var(--spectrum-global-color-gray-900);
+    outline: none;
+    border: none;
+  }
+  input.placeholder {
+    transform: translateY(0);
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+  }
+</style>
diff --git a/packages/bbui/src/FancyForm/FancySelect.svelte b/packages/bbui/src/FancyForm/FancySelect.svelte
new file mode 100644
index 0000000000..240871fc9a
--- /dev/null
+++ b/packages/bbui/src/FancyForm/FancySelect.svelte
@@ -0,0 +1,135 @@
+<script>
+  import { createEventDispatcher } from "svelte"
+  import FancyField from "./FancyField.svelte"
+  import Icon from "../Icon/Icon.svelte"
+  import Popover from "../Popover/Popover.svelte"
+  import FancyFieldLabel from "./FancyFieldLabel.svelte"
+
+  export let label
+  export let value
+  export let disabled = false
+  export let error = null
+  export let validate = null
+  export let options = []
+  export let getOptionLabel = option => extractProperty(option, "label")
+  export let getOptionValue = option => extractProperty(option, "value")
+
+  const dispatch = createEventDispatcher()
+
+  let open = false
+  let popover
+  let wrapper
+
+  $: placeholder = !value
+
+  const extractProperty = (value, property) => {
+    if (value && typeof value === "object") {
+      return value[property]
+    }
+    return value
+  }
+
+  const onChange = newValue => {
+    dispatch("change", newValue)
+    value = newValue
+    if (validate) {
+      error = validate(newValue)
+    }
+    open = false
+  }
+</script>
+
+<FancyField
+  bind:ref={wrapper}
+  {error}
+  {value}
+  {validate}
+  {disabled}
+  clickable
+  on:click={() => (open = true)}
+>
+  {#if label}
+    <FancyFieldLabel {placeholder}>{label}</FancyFieldLabel>
+  {/if}
+
+  <div class="value" class:placeholder>
+    {value || ""}
+  </div>
+
+  <div class="arrow">
+    <Icon name="ChevronDown" />
+  </div>
+</FancyField>
+
+<Popover
+  anchor={wrapper}
+  align="left"
+  portalTarget={document.documentElement}
+  bind:this={popover}
+  {open}
+  on:close={() => (open = false)}
+  useAnchorWidth={true}
+  maxWidth={null}
+>
+  <div class="popover-content">
+    {#if options.length}
+      {#each options as option, idx}
+        <div
+          class="popover-option"
+          tabindex="0"
+          on:click={() => onChange(getOptionValue(option, idx))}
+        >
+          <span class="option-text">
+            {getOptionLabel(option, idx)}
+          </span>
+          {#if value === getOptionValue(option, idx)}
+            <Icon name="Checkmark" />
+          {/if}
+        </div>
+      {/each}
+    {/if}
+  </div>
+</Popover>
+
+<style>
+  .value {
+    display: block;
+    flex: 1 1 auto;
+    font-size: 15px;
+    line-height: 17px;
+    color: var(--spectrum-global-color-gray-900);
+    transition: transform 130ms ease-out, opacity 130ms ease-out;
+    opacity: 1;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    width: 0;
+    transform: translateY(9px);
+  }
+  .value.placeholder {
+    transform: translateY(0);
+    opacity: 0;
+    pointer-events: none;
+    margin-top: 0;
+  }
+  .popover-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    padding: 7px 0;
+  }
+  .popover-option {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: 7px 16px;
+    transition: background 130ms ease-out;
+    font-size: 15px;
+  }
+  .popover-option:hover {
+    background: var(--spectrum-global-color-gray-200);
+    cursor: pointer;
+  }
+</style>
diff --git a/packages/bbui/src/FancyForm/index.js b/packages/bbui/src/FancyForm/index.js
new file mode 100644
index 0000000000..241036fb35
--- /dev/null
+++ b/packages/bbui/src/FancyForm/index.js
@@ -0,0 +1,6 @@
+export { default as FancyInput } from "./FancyInput.svelte"
+export { default as FancyCheckbox } from "./FancyCheckbox.svelte"
+export { default as FancySelect } from "./FancySelect.svelte"
+export { default as FancyButton } from "./FancyButton.svelte"
+export { default as FancyForm } from "./FancyForm.svelte"
+export { default as FancyButtonRadio } from "./FancyButtonRadio.svelte"
diff --git a/packages/bbui/src/Form/Core/Select.svelte b/packages/bbui/src/Form/Core/Select.svelte
index 3e15b7f6ef..721083e3a6 100644
--- a/packages/bbui/src/Form/Core/Select.svelte
+++ b/packages/bbui/src/Form/Core/Select.svelte
@@ -18,8 +18,11 @@
   export let autoWidth = false
   export let autocomplete = false
   export let sort = false
+
   const dispatch = createEventDispatcher()
+
   let open = false
+
   $: fieldText = getFieldText(value, options, placeholder)
   $: fieldIcon = getFieldAttribute(getOptionIcon, value, options)
   $: fieldColour = getFieldAttribute(getOptionColour, value, options)
diff --git a/packages/bbui/src/Layout/Page.svelte b/packages/bbui/src/Layout/Page.svelte
index 15aabd2c61..01111fda9a 100644
--- a/packages/bbui/src/Layout/Page.svelte
+++ b/packages/bbui/src/Layout/Page.svelte
@@ -18,6 +18,7 @@
   <div class="main">
     <div class="content" class:wide class:noPadding class:narrow>
       <slot />
+      <div class="fix-scroll-padding" />
     </div>
   </div>
   <div
@@ -55,9 +56,14 @@
     max-width: 1080px;
     margin: 0 auto;
     flex: 1 1 auto;
-    padding: 50px;
+    padding: 50px 50px 0 50px;
     z-index: 1;
   }
+  .fix-scroll-padding {
+    content: "";
+    display: block;
+    flex: 0 0 50px;
+  }
   .content.wide {
     max-width: none;
   }
diff --git a/packages/bbui/src/Link/Link.svelte b/packages/bbui/src/Link/Link.svelte
index 3bbfdd8282..ea9496ba72 100644
--- a/packages/bbui/src/Link/Link.svelte
+++ b/packages/bbui/src/Link/Link.svelte
@@ -1,5 +1,6 @@
 <script>
   import "@spectrum-css/link/dist/index-vars.css"
+  import { createEventDispatcher } from "svelte"
 
   export let href = "#"
   export let size = "M"
@@ -9,10 +10,12 @@
   export let overBackground = false
   export let target
   export let download
+
+  const dispatch = createEventDispatcher()
 </script>
 
 <a
-  on:click
+  on:click={e => dispatch("click") && e.stopPropagation()}
   {href}
   {target}
   {download}
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js
index 601c4dcbca..3de0bc2f46 100644
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@@ -101,3 +101,6 @@ export { banner, BANNER_TYPES } from "./Stores/banner"
 
 // Helpers
 export * as Helpers from "./helpers"
+
+// Fancy form components
+export * from "./FancyForm"
diff --git a/packages/builder/src/components/portal/page/SideNavItem.svelte b/packages/builder/src/components/portal/page/SideNavItem.svelte
index b31afb683f..c22b8b6113 100644
--- a/packages/builder/src/components/portal/page/SideNavItem.svelte
+++ b/packages/builder/src/components/portal/page/SideNavItem.svelte
@@ -5,7 +5,7 @@
 </script>
 
 <a on:click href={url} class:active>
-  {text}
+  {text || ""}
 </a>
 
 <style>
diff --git a/packages/builder/src/pages/builder/portal/_layout.svelte b/packages/builder/src/pages/builder/portal/_layout.svelte
index 8cc5f5c79e..3cb60e26cf 100644
--- a/packages/builder/src/pages/builder/portal/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/_layout.svelte
@@ -98,7 +98,7 @@
   /* Customise tabs appearance*/
   .nav :global(.spectrum-Tabs) {
     margin-bottom: -2px;
-    padding: 7px 0;
+    padding: 5px 0;
     flex: 1 1 auto;
   }
   .nav :global(.spectrum-Tabs-content) {
diff --git a/packages/builder/src/pages/builder/portal/account/_layout.svelte b/packages/builder/src/pages/builder/portal/account/_layout.svelte
index 04db8e50b4..3083b574a8 100644
--- a/packages/builder/src/pages/builder/portal/account/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/account/_layout.svelte
@@ -1,14 +1,15 @@
 <script>
-  import { isActive } from "@roxi/routify"
+  import { goto, isActive } from "@roxi/routify"
   import { Page } from "@budibase/bbui"
   import { Content, SideNav, SideNavItem } from "components/portal/page"
   import { menu } from "stores/portal"
 
-  $: pages = $menu.find(x => x.title === "Account").subPages
+  $: pages = $menu.find(x => x.title === "Account")?.subPages || []
+  $: !pages.length && $goto("../")
 </script>
 
-<Page narrow>
-  <Content>
+<Page>
+  <Content narrow>
     <div slot="side-nav">
       <SideNav>
         {#each pages as { title, href }}
diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte
index f073693a49..c91ba6c437 100644
--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/index.svelte
@@ -227,7 +227,7 @@
       {/each}
       <div class="title">
         <div class="welcome">
-          <Layout noPadding gap="S">
+          <Layout noPadding gap="XS">
             <Heading size="L">{welcomeHeader}</Heading>
             <Body size="M">
               Manage your apps and get a head start with templates
diff --git a/packages/builder/src/pages/builder/portal/settings/_layout.svelte b/packages/builder/src/pages/builder/portal/settings/_layout.svelte
index ec26ca5754..ac22eda5f4 100644
--- a/packages/builder/src/pages/builder/portal/settings/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/settings/_layout.svelte
@@ -1,11 +1,12 @@
 <script>
-  import { isActive } from "@roxi/routify"
+  import { goto, isActive } from "@roxi/routify"
   import { Page } from "@budibase/bbui"
   import { Content, SideNav, SideNavItem } from "components/portal/page"
   import { menu } from "stores/portal"
 
   $: wide = $isActive("./email/:template")
-  $: pages = $menu.find(x => x.title === "Settings").subPages
+  $: pages = $menu.find(x => x.title === "Settings")?.subPages || []
+  $: !pages.length && $goto("../")
 </script>
 
 <Page>
diff --git a/packages/builder/src/pages/builder/portal/users/_layout.svelte b/packages/builder/src/pages/builder/portal/users/_layout.svelte
index 97de1eeabf..db598c4e43 100644
--- a/packages/builder/src/pages/builder/portal/users/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/users/_layout.svelte
@@ -1,11 +1,12 @@
 <script>
   import { Page } from "@budibase/bbui"
   import { SideNav, SideNavItem, Content } from "components/portal/page"
-  import { isActive } from "@roxi/routify"
+  import { isActive, goto } from "@roxi/routify"
   import { menu } from "stores/portal"
 
   $: wide = $isActive("./users/index") || $isActive("./groups/index")
-  $: pages = $menu.find(x => x.title === "Users").subPages
+  $: pages = $menu.find(x => x.title === "Users")?.subPages || []
+  $: !pages.length && $goto("../")
 </script>
 
 <Page>
diff --git a/packages/frontend-core/src/components/SplitPage.svelte b/packages/frontend-core/src/components/SplitPage.svelte
new file mode 100644
index 0000000000..ad119180e8
--- /dev/null
+++ b/packages/frontend-core/src/components/SplitPage.svelte
@@ -0,0 +1,50 @@
+<div class="split-page">
+  <div class="left">
+    <div class="content">
+      <slot />
+    </div>
+  </div>
+  <div class="right">
+    <slot name="right" />
+  </div>
+</div>
+
+<style>
+  .split-page {
+    height: 100%;
+    display: grid;
+    grid-template-columns: max(50%, 380px) 1fr;
+    justify-content: stretch;
+    overflow: hidden;
+  }
+  .left {
+    background: var(--background);
+    display: grid;
+    place-items: center;
+    padding: 40px;
+    overflow-y: auto;
+  }
+  .right {
+    background: linear-gradient(
+      to bottom right,
+      var(--spectrum-global-color-gray-300) 0%,
+      var(--background) 100%
+    );
+  }
+  .content {
+    width: 100%;
+    max-width: 400px;
+  }
+
+  @media (max-width: 740px) {
+    .split-page {
+      grid-template-columns: 1fr;
+    }
+    .left {
+      padding: 20px;
+    }
+    .right {
+      display: none;
+    }
+  }
+</style>
diff --git a/packages/frontend-core/src/components/TestimonialPage.svelte b/packages/frontend-core/src/components/TestimonialPage.svelte
new file mode 100644
index 0000000000..3028d4447a
--- /dev/null
+++ b/packages/frontend-core/src/components/TestimonialPage.svelte
@@ -0,0 +1,62 @@
+<script>
+  import SplitPage from "./SplitPage.svelte"
+  import { Layout } from "@budibase/bbui"
+</script>
+
+<SplitPage>
+  <slot />
+  <div class="wrapper" slot="right">
+    <div class="testimonial">
+      <Layout noPadding gap="S">
+        <div class="text">
+          "Here is an example of how Budibase changed my life for the better and
+          now all I do is eat, sleep, build apps, repeat."
+        </div>
+        <div class="user">
+          <img
+            src="https://icon-library.com/images/male-user-icon/male-user-icon-24.jpg"
+          />
+          <div class="author">
+            <div class="name">No-code Enthusiast</div>
+            <div class="company">Bedroom TLD</div>
+          </div>
+        </div>
+      </Layout>
+    </div>
+  </div>
+</SplitPage>
+
+<style>
+  .wrapper {
+    width: 100%;
+    height: 100%;
+    display: grid;
+    place-items: center;
+  }
+  .testimonial {
+    width: 280px;
+    padding: 40px;
+  }
+  .text {
+    font-size: var(--font-size-l);
+    font-style: italic;
+  }
+  img {
+    width: 40px;
+  }
+  .user {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-s);
+  }
+  .name {
+    font-weight: bold;
+    color: var(--spectrum-global-color-gray-900);
+    font-size: var(--font-size-l);
+  }
+  .company {
+    color: var(--spectrum-global-color-gray-700);
+  }
+</style>
diff --git a/packages/frontend-core/src/components/index.js b/packages/frontend-core/src/components/index.js
new file mode 100644
index 0000000000..7ca21c4ff9
--- /dev/null
+++ b/packages/frontend-core/src/components/index.js
@@ -0,0 +1,2 @@
+export { default as SplitPage } from "./SplitPage.svelte"
+export { default as TestimonialPage } from "./TestimonialPage.svelte"
diff --git a/packages/frontend-core/src/index.js b/packages/frontend-core/src/index.js
index aecca81cda..01bf05c69e 100644
--- a/packages/frontend-core/src/index.js
+++ b/packages/frontend-core/src/index.js
@@ -3,3 +3,4 @@ export { fetchData } from "./fetch/fetchData"
 export * as Constants from "./constants"
 export * from "./stores"
 export * from "./utils"
+export * from "./components"