diff --git a/src/Umbraco.Web.UI.Client/src/installer/installer-database.element.ts b/src/Umbraco.Web.UI.Client/src/installer/installer-database.element.ts
index 790736e934..eb42ab738b 100644
--- a/src/Umbraco.Web.UI.Client/src/installer/installer-database.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/installer/installer-database.element.ts
@@ -1,27 +1,44 @@
 import { css, CSSResultGroup, html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { customElement, state } from 'lit/decorators.js';
 
 import { postInstall } from '../api/fetcher';
-
 @customElement('umb-installer-database')
 export class UmbInstallerDatabase extends LitElement {
   static styles: CSSResultGroup = [
     css`
       uui-input,
-      uui-input-password {
+      uui-input-password,
+      uui-combobox {
         width: 100%;
       }
 
+      h1 {
+        text-align: center;
+        margin-bottom: var(--uui-size-layout-3);
+      }
+
+      h4 {
+        margin-bottom: 0;
+        margin-top: var(--uui-size-layout-2);
+      }
+
       #buttons {
         display: flex;
+        margin-top: var(--uui-size-layout-3);
       }
 
       #button-install {
         margin-left: auto;
+        min-width: 120px;
       }
     `,
   ];
 
+  options = ['SQLite', 'Microsoft SQL Server', 'Custom connection string'];
+
+  @state()
+  databaseType = 'SQLite';
+
   private _handleSubmit = (e: SubmitEvent) => {
     e.preventDefault();
 
@@ -40,13 +57,106 @@ export class UmbInstallerDatabase extends LitElement {
     this.dispatchEvent(new CustomEvent('user', { bubbles: true, composed: true }));
   }
 
+  private _renderSettings() {
+    switch (this.databaseType) {
+      case 'Microsoft SQL Server':
+        return this._renderSqlServer();
+      case 'Custom connection string':
+        return this._renderCustom();
+      default:
+        return this._renderSQLite();
+    }
+  }
+  private _renderSQLite = () => html` <uui-form-layout-item>
+    <uui-label for="database-file-name" slot="label" required>Database file name</uui-label>
+    <uui-input
+      type="text"
+      id="database-file-name"
+      name="database-file-name"
+      value="Umbraco"
+      required
+      required-message="Database file name is required"></uui-input>
+  </uui-form-layout-item>`;
+
+  private _renderSqlServer = () => html`
+    <h4>Connection</h4>
+    <hr />
+    <uui-form-layout-item>
+      <uui-label for="server" slot="label" required>Server</uui-label>
+      <uui-input
+        type="text"
+        id="server"
+        name="server"
+        placeholder="(local)SQLEXPRESS"
+        required
+        required-message="Server is required"></uui-input>
+    </uui-form-layout-item>
+    <uui-form-layout-item>
+      <uui-label for="database-name" slot="label" required>Database Name</uui-label>
+      <uui-input
+        type="text"
+        id="database-name"
+        name="database-name"
+        placeholder="umbraco-cms"
+        required
+        required-message="Database name is required"></uui-input>
+    </uui-form-layout-item>
+    <h4>Connection</h4>
+    <hr />
+    <uui-form-layout-item>
+      <uui-checkbox name="int-auth" label="int-auth">Use integrated authentication</uui-checkbox>
+    </uui-form-layout-item>
+    <uui-form-layout-item>
+      <uui-label for="username" slot="label" required>Username</uui-label>
+      <uui-input type="text" id="username" name="username" required required-message="Username is required"></uui-input>
+    </uui-form-layout-item>
+
+    <uui-form-layout-item>
+      <uui-label for="password" slot="label" required>Password</uui-label>
+      <uui-input-password
+        id="password"
+        name="password"
+        required
+        required-message="Password is required"></uui-input-password>
+    </uui-form-layout-item>
+  `;
+
+  private _renderCustom = () => html`
+    <uui-form-layout-item>
+      <uui-label for="connection-string" slot="label" required>Connection string</uui-label>
+      <uui-textarea
+        type="text"
+        id="connection-string"
+        name="connection-string"
+        required
+        required-message="Connection string is required"></uui-textarea>
+    </uui-form-layout-item>
+  `;
+
+  private _handleDatabaseTypeChange = (e: CustomEvent) => {
+    this.databaseType = e.target.value;
+  };
+
   render() {
     return html` <div class="uui-text">
-      <h1 class="uui-h3">Customize Umbraco</h1>
+      <h1 class="uui-h3">Database Configuration</h1>
       <uui-form>
-        <form id="LoginForm" name="login" @submit="${this._handleSubmit}">
+        <form id="database-form" name="database" @submit="${this._handleSubmit}">
+          <uui-form-layout-item>
+            <uui-label for="database-type" slot="label" required>Database type</uui-label>
+            <uui-combobox value=${this.databaseType} @change=${this._handleDatabaseTypeChange}>
+              <uui-combobox-list>
+                ${this.options.map(
+                  (option) => html` <uui-combobox-list-option value=${option}>${option}</uui-combobox-list-option> `
+                )}
+              </uui-combobox-list>
+            </uui-combobox>
+          </uui-form-layout-item>
+
+          ${this._renderSettings()}
+
           <div id="buttons">
-            <uui-button id="button-back" @click=${this._onBack} label="Back" look="secondary"></uui-button>
+            <uui-button label="Back" @click=${this._onBack} look="secondary"></uui-button>
             <uui-button id="button-install" type="submit" label="Install" look="positive"></uui-button>
           </div>
         </form>
diff --git a/src/Umbraco.Web.UI.Client/src/installer/installer-installing.element.ts b/src/Umbraco.Web.UI.Client/src/installer/installer-installing.element.ts
index 305b276620..9f95727b59 100644
--- a/src/Umbraco.Web.UI.Client/src/installer/installer-installing.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/installer/installer-installing.element.ts
@@ -4,20 +4,8 @@ import { customElement } from 'lit/decorators.js';
 export class UmbInstallerInstalling extends LitElement {
   static styles: CSSResultGroup = [
     css`
-      #log {
-        border: 1px solid #b3b3b3;
-        margin-top: 16px;
-        padding: 8px 12px;
-        background: #f1f1f1;
-        color: #282828;
-      }
-
-      #buttons {
-        display: flex;
-      }
-
-      #button-install {
-        margin-left: auto;
+      h1 {
+        text-align: center;
       }
     `,
   ];
@@ -25,15 +13,7 @@ export class UmbInstallerInstalling extends LitElement {
   render() {
     return html` <div class="uui-text">
       <h1 class="uui-h3">Installing Umbraco</h1>
-      <p>Almost there! In a few moments your Umbraco adventure begins!</p>
       <uui-progress-bar progress="50"></uui-progress-bar>
-      <div id="log">
-        struct group_info init_groups = { .usage = ATOMIC_INIT(2) }; struct group_info *groups_alloc(int gidsetsize){
-        struct group_info *group_info; int nblocks; int i; nblocks = (gidsetsize + NGROUPS_PER_BLOCK - 1) /
-        NGROUPS_PER_BLOCK; /* Make sure we always allocate at least one indirect block pointer */ nblocks = nblocks ? :
-        1; group_info = kmalloc(sizeof(*group_info) + nblocks*sizeof(gid_t *), GFP_USER); if (!group_info) return NULL;
-        group_info->ngroups = gidsetsize; group_info->nblocks = nblocks; atomic_set(&grou|
-      </div>
     </div>`;
   }
 }
diff --git a/src/Umbraco.Web.UI.Client/src/installer/installer-layout.element.ts b/src/Umbraco.Web.UI.Client/src/installer/installer-layout.element.ts
index 1a1cacd2b7..d6fc6a274f 100644
--- a/src/Umbraco.Web.UI.Client/src/installer/installer-layout.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/installer/installer-layout.element.ts
@@ -37,8 +37,9 @@ export class UmbInstallerLayout extends LitElement {
       }
 
       #box {
-        width: 500px;
-        padding: var(--uui-size-space-4) var(--uui-size-space-6) var(--uui-size-space-6) var(--uui-size-space-6);
+        width: 450px;
+        box-sizing: border-box;
+        padding: var(--uui-size-layout-1) var(--uui-size-layout-2) var(--uui-size-layout-2) var(--uui-size-layout-2);
       }
     `,
   ];
diff --git a/src/Umbraco.Web.UI.Client/src/installer/installer-user.element.ts b/src/Umbraco.Web.UI.Client/src/installer/installer-user.element.ts
index d045d35a40..611531fe85 100644
--- a/src/Umbraco.Web.UI.Client/src/installer/installer-user.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/installer/installer-user.element.ts
@@ -12,12 +12,23 @@ export class UmbInstallerUser extends LitElement {
         width: 100%;
       }
 
+      h1 {
+        text-align: center;
+        margin-bottom: var(--uui-size-layout-3);
+      }
+
+      #news-checkbox {
+        margin-top: var(--uui-size-layout-2);
+      }
+
       #buttons {
         display: flex;
+        margin-top: var(--uui-size-layout-3);
       }
 
       #button-install {
         margin-left: auto;
+        min-width: 120px;
       }
     `,
   ];
@@ -38,11 +49,11 @@ export class UmbInstallerUser extends LitElement {
     const password = formData.get('password') as string;
     const news = formData.has('news');
 
-    this._install(name, email, password, news);
+    this._next(name, email, password, news);
   };
 
-  private async _install(name: string, email: string, password: string, subscribeToNewsletter: boolean) {
-    console.log('Installing', name, email, password, subscribeToNewsletter);
+  private async _next(name: string, email: string, password: string, subscribeToNewsletter: boolean) {
+    console.log('Next', name, email, password, subscribeToNewsletter);
 
     try {
       await postInstall({
@@ -55,12 +66,12 @@ export class UmbInstallerUser extends LitElement {
           connectionString: '',
           databaseProviderMetadataId: '1',
           integratedAuth: false,
-          providerName: 'SQLite'
-        }
+          providerName: 'SQLite',
+        },
       });
 
       // TODO: Change to redirect when router has been added.
-      this.dispatchEvent(new CustomEvent('install', { bubbles: true, composed: true }));
+      this.dispatchEvent(new CustomEvent('database', { bubbles: true, composed: true }));
     } catch (error) {
       console.log(error);
     }
@@ -72,29 +83,17 @@ export class UmbInstallerUser extends LitElement {
 
   render() {
     return html` <div class="uui-text">
-      <h1 class="uui-h3">Install Umbraco</h1>
+      <h1>Install Umbraco</h1>
       <uui-form>
         <form id="LoginForm" name="login" @submit="${this._handleSubmit}">
           <uui-form-layout-item>
             <uui-label for="name" slot="label" required>Name</uui-label>
-            <uui-input
-              type="text"
-              id="name"
-              name="name"
-              placeholder="Enter your name..."
-              required
-              required-message="Name is required"></uui-input>
+            <uui-input type="text" id="name" name="name" required required-message="Name is required"></uui-input>
           </uui-form-layout-item>
 
           <uui-form-layout-item>
             <uui-label for="email" slot="label" required>Email</uui-label>
-            <uui-input
-              type="email"
-              id="email"
-              name="email"
-              placeholder="Enter your email..."
-              required
-              required-message="Email is required"></uui-input>
+            <uui-input type="email" id="email" name="email" required required-message="Email is required"></uui-input>
           </uui-form-layout-item>
 
           <uui-form-layout-item>
@@ -102,24 +101,18 @@ export class UmbInstallerUser extends LitElement {
             <uui-input-password
               id="password"
               name="password"
-              placeholder="Enter your password..."
               required
               required-message="Password is required"></uui-input-password>
           </uui-form-layout-item>
 
-          <uui-form-layout-item>
+          <uui-form-layout-item id="news-checkbox">
             <uui-checkbox name="persist" label="Remember me">
               Keep me updated on Umbraco Versions, Security Bulletins and Community News
             </uui-checkbox>
           </uui-form-layout-item>
 
           <div id="buttons">
-            <uui-button
-              id="button-customize"
-              @click=${this._onCustomize}
-              label="Customize"
-              look="secondary"></uui-button>
-            <uui-button id="button-install" type="submit" label="Install" look="positive"></uui-button>
+            <uui-button id="button-install" type="submit" label="Next" look="primary"></uui-button>
           </div>
         </form>
       </uui-form>
diff --git a/src/Umbraco.Web.UI.Client/src/installer/installer.element.ts b/src/Umbraco.Web.UI.Client/src/installer/installer.element.ts
index d7a90ca364..d8e2cd2aec 100644
--- a/src/Umbraco.Web.UI.Client/src/installer/installer.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/installer/installer.element.ts
@@ -13,7 +13,7 @@ export class UmbInstaller extends LitElement {
   static styles: CSSResultGroup = [css``];
 
   @state()
-  step = 1;
+  step = 2;
 
   private _renderSection() {
     switch (this.step) {
@@ -30,7 +30,7 @@ export class UmbInstaller extends LitElement {
   connectedCallback(): void {
     super.connectedCallback();
     this.addEventListener('install', () => this._handleInstall());
-    this.addEventListener('customize', () => this._handleCustomize());
+    this.addEventListener('database', () => this._handleDatabase());
     this.addEventListener('user', () => this._handleUser());
 
     getInstall({}).then(({ data }) => {
@@ -42,7 +42,7 @@ export class UmbInstaller extends LitElement {
     this.step = 1;
   }
 
-  private _handleCustomize() {
+  private _handleDatabase() {
     this.step = 2;
   }