From 26f2d61582d15427fc4372ba00e22c66dbd91f29 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Tue, 28 Jul 2026 16:22:52 +0200
Subject: [PATCH 1/3] Improve onboarding pages

- Give the add site and installation pages a plain white layout with a
  heading, subtitle and a progress indicator at the bottom of the page
- Remove the timezone field from the add site form, and detect it automatically
- Rebuild the installation instructions as numbered steps with
  click-to-copy code, and hide the extra options during onboarding
- Offer a way out of every step with a secondary button, either skipping ahead or heading back
  to where you came from
- Drop the separate verification step from the progress indicator, as
  verification now happens on the dashboard
- Tidy up shared form and UI details along the way: help text under
  fields, read-only inputs, smaller toggles and an improved loading spinner
---
 assets/js/app.js                              |   2 +
 assets/js/liveview/copy-snippet.js            |  34 ++
 e2e/tests/fixtures.ts                         |  13 +-
 lib/plausible/site.ex                         |  11 +-
 lib/plausible_web/components/flow_progress.ex |  63 ++--
 lib/plausible_web/components/generic.ex       |  83 ++---
 lib/plausible_web/components/icons.ex         |  19 +
 .../components/site/toggle_live.ex            |   6 +-
 .../controllers/auth_controller.ex            |  56 ++-
 lib/plausible_web/controllers/helpers.ex      |  16 +
 .../controllers/site_controller.ex            |  56 ++-
 lib/plausible_web/flows.ex                    |  12 +-
 lib/plausible_web/live/components/form.ex     |  40 +--
 .../live/components/verification_banner.ex    |   7 +-
 lib/plausible_web/live/installation.ex        | 160 ++++++---
 lib/plausible_web/live/installation/icons.ex  |   8 +-
 .../live/installation/instructions.ex         | 333 +++++++++---------
 .../live/onboarding_layout_context.ex         |  19 +
 lib/plausible_web/router.ex                   |  14 +-
 .../templates/layout/_header.html.heex        |   3 +-
 .../templates/layout/app.html.heex            |   8 +-
 .../templates/layout/onboarding.html.heex     |  28 ++
 .../templates/site/new.html.heex              |  82 ++---
 test/plausible/site/domain_test.exs           |   8 +-
 .../components/flow_progress_test.exs         |  43 ++-
 ...l_sites_controller_sites_crud_api_test.exs |   2 +-
 .../controllers/site_controller_test.exs      |  12 +-
 .../plausible_web/live/change_domain_test.exs |   6 +-
 .../components/verification_banner_test.exs   |   4 +-
 test/plausible_web/live/installation_test.exs | 164 ++++++---
 30 files changed, 759 insertions(+), 553 deletions(-)
 create mode 100644 assets/js/liveview/copy-snippet.js
 create mode 100644 lib/plausible_web/live/onboarding_layout_context.ex
 create mode 100644 lib/plausible_web/templates/layout/onboarding.html.heex

diff --git a/assets/js/app.js b/assets/js/app.js
index f73084a96689..ca1143490f4a 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -3,11 +3,13 @@ import 'abortcontroller-polyfill/dist/polyfill-patch-fetch'
 import Alpine from 'alpinejs'
 import './liveview/live_socket'
 import comboBox from './liveview/combo-box'
+import copySnippet from './liveview/copy-snippet'
 import dropdown from './liveview/dropdown'
 import './liveview/phx_events'
 
 Alpine.data('dropdown', dropdown)
 Alpine.data('comboBox', comboBox)
+Alpine.data('copySnippet', copySnippet)
 Alpine.start()
 
 if (document.querySelectorAll('[data-modal]').length > 0) {
diff --git a/assets/js/liveview/copy-snippet.js b/assets/js/liveview/copy-snippet.js
new file mode 100644
index 000000000000..e3f6fdb3e7e8
--- /dev/null
+++ b/assets/js/liveview/copy-snippet.js
@@ -0,0 +1,34 @@
+// Copy-to-clipboard behaviour for a readonly textarea holding a code snippet.
+// Expects an `x-ref="snippet"` textarea within the same `x-data` scope.
+
+const RESET_DELAY = 2000
+
+const hasSelection = (el) => el.selectionStart !== el.selectionEnd
+
+const isFullySelected = (el) =>
+  el.selectionStart === 0 && el.selectionEnd === el.value.length
+
+export default () => ({
+  copied: false,
+  copyAll() {
+    const el = this.$refs.snippet
+    el.focus()
+    el.select()
+    document.execCommand('copy')
+    this.copied = true
+
+    setTimeout(() => {
+      this.copied = false
+
+      // Leave it alone if the user has highlighted their own text since.
+      if (isFullySelected(el)) {
+        el.setSelectionRange(0, 0)
+        el.blur()
+      }
+    }, RESET_DELAY)
+  },
+  copyIfNoSelection() {
+    if (hasSelection(this.$refs.snippet)) return
+    this.copyAll()
+  }
+})
diff --git a/e2e/tests/fixtures.ts b/e2e/tests/fixtures.ts
index 34eeabc2c59c..f3022996ee37 100644
--- a/e2e/tests/fixtures.ts
+++ b/e2e/tests/fixtures.ts
@@ -115,9 +115,7 @@ export async function register({
 
   await page.getByRole('button', { name: 'Activate' }).click()
 
-  await expect(
-    page.getByRole('button', { name: 'Install Plausible' })
-  ).toBeVisible()
+  await expect(page.getByRole('button', { name: 'Add site' })).toBeVisible()
 }
 
 export async function login({ page, user }: { page: Page; user: User }) {
@@ -149,19 +147,16 @@ export async function addSite({
 }) {
   await page.goto('/sites/new', { waitUntil: 'commit' })
 
-  await expect(
-    page.getByRole('button', { name: 'Install Plausible' })
-  ).toBeVisible()
+  await expect(page.getByRole('button', { name: 'Add site' })).toBeVisible()
 
   await page.getByLabel('Domain').fill(domain)
-  await page.getByLabel('Reporting timezone').selectOption('Etc/UTC')
 
-  await page.getByRole('button', { name: 'Install Plausible' }).click()
+  await page.getByRole('button', { name: 'Add site' }).click()
 
   await expect(page).toHaveURL(/\/installation/)
 
   await expect(
-    page.getByRole('button', { name: /Verify .* installation/ })
+    page.getByRole('button', { name: "I've installed it" })
   ).toBeVisible()
 }
 
diff --git a/lib/plausible/site.ex b/lib/plausible/site.ex
index b4c5aaa2daca..33da11e57036 100644
--- a/lib/plausible/site.ex
+++ b/lib/plausible/site.ex
@@ -97,13 +97,9 @@ defmodule Plausible.Site do
   end
 
   on_ee do
-    @domain_unique_error """
-    This domain cannot be registered. Perhaps one of your colleagues registered it? If that's not the case, please contact support@plausible.io
-    """
+    @domain_unique_error "This domain is already registered. Ask the owner for access, or contact support@plausible.io"
   else
-    @domain_unique_error """
-    This domain cannot be registered. Perhaps one of your colleagues registered it?
-    """
+    @domain_unique_error "This domain is already registered. Ask the owner for access."
   end
 
   on_ee do
@@ -116,7 +112,8 @@ defmodule Plausible.Site do
     site
     |> cast(attrs, @changeset_cast_fields)
     |> clean_domain()
-    |> validate_required([:domain, :timezone])
+    |> validate_required([:domain], message: "Please enter a domain or subdomain")
+    |> validate_required([:timezone])
     |> validate_timezone()
     |> validate_domain_format()
     |> validate_domain_reserved_characters()
diff --git a/lib/plausible_web/components/flow_progress.ex b/lib/plausible_web/components/flow_progress.ex
index 53288065fedd..705a00a2c725 100644
--- a/lib/plausible_web/components/flow_progress.ex
+++ b/lib/plausible_web/components/flow_progress.ex
@@ -1,8 +1,8 @@
 defmodule PlausibleWeb.Components.FlowProgress do
   @moduledoc """
-  Component for provisioning/registration flows displaying
-  progress status. See `PlausibleWeb.Flows` for the list of
-  flow definitions.
+  Dotted progress indicator shown during the registration flow.
+  One small dot per step in `PlausibleWeb.Flows.steps/1`, with completed
+  and current steps highlighted.
   """
   use Phoenix.Component
 
@@ -20,45 +20,24 @@ defmodule PlausibleWeb.Components.FlowProgress do
       )
 
     ~H"""
-    <div :if={not Enum.empty?(@steps)} class="mt-6 hidden md:block" id="flow-progress">
-      <div class="flex items-center justify-between max-w-4xl mx-auto my-8">
-        <%= for {step, idx} <- Enum.with_index(@steps) do %>
-          <div class="flex items-center text-base">
-            <div
-              :if={idx < @current_step_idx}
-              class="size-6 bg-green-500 dark:bg-green-600 text-white rounded-full flex items-center justify-center"
-            >
-              <Heroicons.check class="size-4" />
-            </div>
-            <div
-              :if={idx == @current_step_idx}
-              class="size-6 bg-indigo-600 text-xs text-white font-bold rounded-full flex items-center justify-center"
-            >
-              {idx + 1}
-            </div>
-            <div
-              :if={idx > @current_step_idx}
-              class="size-6 bg-gray-300 text-xs text-white font-bold dark:bg-gray-800 rounded-full flex items-center justify-center"
-            >
-              {idx + 1}
-            </div>
-            <span :if={idx < @current_step_idx} class="ml-2 text-gray-500">
-              {step}
-            </span>
-            <span
-              :if={idx == @current_step_idx}
-              class="ml-2 font-semibold text-black dark:text-gray-300"
-            >
-              {step}
-            </span>
-            <span :if={idx > @current_step_idx} class="ml-2 text-gray-500">
-              {step}
-            </span>
-          </div>
-          <div :if={idx + 1 != length(@steps)} class="flex-1 h-px bg-gray-300 mx-4 dark:bg-gray-800 ">
-          </div>
-        <% end %>
-      </div>
+    <div
+      :if={not Enum.empty?(@steps)}
+      id="flow-progress"
+      class="flex items-center gap-2"
+      aria-label="Progress"
+    >
+      <span
+        :for={{step, idx} <- Enum.with_index(@steps)}
+        class={
+          cond do
+            idx == @current_step_idx -> "h-2 w-5 rounded-full bg-indigo-600 dark:bg-gray-100"
+            idx < @current_step_idx -> "size-2 rounded-full bg-indigo-600 dark:bg-gray-100"
+            true -> "size-2 rounded-full bg-gray-300 dark:bg-gray-600"
+          end
+        }
+        aria-current={idx == @current_step_idx && "step"}
+        aria-label={step}
+      />
     </div>
     """
   end
diff --git a/lib/plausible_web/components/generic.ex b/lib/plausible_web/components/generic.ex
index 173e6a6a6f88..4bae4bc0b6ca 100644
--- a/lib/plausible_web/components/generic.ex
+++ b/lib/plausible_web/components/generic.ex
@@ -62,6 +62,7 @@ defmodule PlausibleWeb.Components.Generic do
   @button_base_class "btn-base"
 
   @button_sizes %{
+    "xs" => "btn-xs",
     "sm" => "btn-sm",
     "md" => "btn-md"
   }
@@ -477,20 +478,32 @@ defmodule PlausibleWeb.Components.Generic do
   def spinner(assigns) do
     ~H"""
     <svg
-      class={["animate-spin h-4 w-4 text-indigo-500", @class]}
+      class={["animate-spin size-4 text-indigo-500", @class]}
       xmlns="http://www.w3.org/2000/svg"
-      fill="none"
       viewBox="0 0 24 24"
+      fill="none"
       {@rest}
     >
-      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4">
-      </circle>
-      <path
-        class="opacity-75"
-        fill="currentColor"
-        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-      >
-      </path>
+      <circle
+        class="opacity-20"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        stroke-width="4"
+        stroke-linecap="round"
+      />
+      <circle
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        stroke-width="4"
+        stroke-linecap="round"
+        pathLength="100"
+        stroke-dasharray="30 70"
+        transform="rotate(-90 12 12)"
+      />
     </svg>
     """
   end
@@ -545,7 +558,7 @@ defmodule PlausibleWeb.Components.Generic do
       <span
         :if={@server_mode?}
         class={[
-          "relative inline-flex h-6 w-11 shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-hidden focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2",
+          "relative inline-flex h-5 w-9 shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-hidden focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2",
           if(@checked, do: "bg-indigo-600", else: "dark:bg-gray-600 bg-gray-200"),
           if(@disabled, do: "opacity-50")
         ]}
@@ -553,23 +566,23 @@ defmodule PlausibleWeb.Components.Generic do
         <span
           aria-hidden="true"
           class={[
-            "pointer-events-none inline-block size-5 transform rounded-full bg-white shadow-sm ring-0 transition duration-200 ease-in-out",
-            if(@checked, do: "dark:bg-white translate-x-5", else: "dark:bg-white translate-x-0")
+            "pointer-events-none inline-block size-4 transform rounded-full bg-white shadow-sm ring-0 transition duration-200 ease-in-out",
+            if(@checked, do: "dark:bg-white translate-x-4", else: "dark:bg-white translate-x-0")
           ]}
         />
       </span>
       <span
         :if={!@server_mode?}
         class={[
-          "relative inline-flex h-6 w-11 shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-hidden focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2",
+          "relative inline-flex h-5 w-9 shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-hidden focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2",
           if(@disabled, do: "opacity-50")
         ]}
         x-bind:class={"#{@js_active_var} ? 'bg-indigo-600' : 'dark:bg-gray-600 bg-gray-200'"}
       >
         <span
           aria-hidden="true"
-          class="pointer-events-none inline-block size-5 transform rounded-full bg-white shadow-sm ring-0 transition duration-200 ease-in-out"
-          x-bind:class={"#{@js_active_var} ? 'dark:bg-white translate-x-5' : 'dark:bg-white translate-x-0'"}
+          class="pointer-events-none inline-block size-4 transform rounded-full bg-white shadow-sm ring-0 transition duration-200 ease-in-out"
+          x-bind:class={"#{@js_active_var} ? 'dark:bg-white translate-x-4' : 'dark:bg-white translate-x-0'"}
         />
       </span>
     </button>
@@ -870,38 +883,6 @@ defmodule PlausibleWeb.Components.Generic do
     """
   end
 
-  attr :id, :string, required: true
-  attr :text, :string, required: true
-  attr :rows, :integer, required: true
-  attr :resizable, :boolean, default: false
-
-  def copyable_readonly_text_area(assigns) do
-    ~H"""
-    <div class={["relative w-full"]}>
-      <textarea
-        id={@id}
-        class={[
-          "w-full bg-transparent border-1 border-gray-300 rounded-md p-4 text-sm text-gray-700 dark:border-gray-750 dark:text-gray-300",
-          if(!@resizable, do: "resize-none")
-        ]}
-        rows={@rows}
-        readonly
-      ><%= @text %></textarea>
-
-      <a
-        onclick={"var input = document.getElementById('#{@id}'); input.focus(); input.select(); document.execCommand('copy'); event.stopPropagation();"}
-        href="javascript:void(0)"
-        class="absolute flex items-center text-xs font-medium text-indigo-600 no-underline bottom-2 right-4 p-2 transition-colors duration-150 hover:text-indigo-700 dark:text-indigo-500 dark:hover:text-indigo-400"
-      >
-        <Heroicons.document_duplicate class="pr-1 text-current size-5" />
-        <span>
-          COPY
-        </span>
-      </a>
-    </div>
-    """
-  end
-
   slot :title
   slot :subtitle
   slot :inner_block, required: true
@@ -1055,7 +1036,7 @@ defmodule PlausibleWeb.Components.Generic do
       <button
         type="submit"
         class={[
-          "relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full transition-colors ease-in-out duration-200",
+          "relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-transparent rounded-full transition-colors ease-in-out duration-200",
           if(@set_to, do: "bg-indigo-600", else: "bg-gray-200 dark:bg-gray-600"),
           if(@disabled?, do: "cursor-not-allowed")
         ]}
@@ -1064,8 +1045,8 @@ defmodule PlausibleWeb.Components.Generic do
         <span
           aria-hidden="true"
           class={[
-            "inline-block size-5 rounded-full bg-white shadow transform transition ease-in-out duration-200",
-            if(@set_to, do: "translate-x-5", else: "translate-x-0")
+            "inline-block size-4 rounded-full bg-white shadow transform transition ease-in-out duration-200",
+            if(@set_to, do: "translate-x-4", else: "translate-x-0")
           ]}
         />
       </button>
diff --git a/lib/plausible_web/components/icons.ex b/lib/plausible_web/components/icons.ex
index 51bca1baaf47..ef2c90f7126d 100644
--- a/lib/plausible_web/components/icons.ex
+++ b/lib/plausible_web/components/icons.ex
@@ -155,6 +155,25 @@ defmodule PlausibleWeb.Components.Icons do
 
   attr :class, :any, default: []
 
+  def copy_icon(assigns) do
+    ~H"""
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" class={@class}>
+      <g
+        fill="none"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="1.5"
+      >
+        <path d="M2.25 6.75v6.5a2 2 0 0 0 2 2h7.5" />
+        <path d="M7.25 12.25h6.5a2 2 0 0 0 2-2v-5.5a2 2 0 0 0-2-2h-6.5a2 2 0 0 0-2 2v5.5a2 2 0 0 0 2 2" />
+      </g>
+    </svg>
+    """
+  end
+
+  attr :class, :any, default: []
+
   def envelope_icon(assigns) do
     ~H"""
     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class={@class}>
diff --git a/lib/plausible_web/components/site/toggle_live.ex b/lib/plausible_web/components/site/toggle_live.ex
index 8262d5da42ae..a93644d02989 100644
--- a/lib/plausible_web/components/site/toggle_live.ex
+++ b/lib/plausible_web/components/site/toggle_live.ex
@@ -33,7 +33,7 @@ defmodule PlausibleWeb.Components.Site.Feature.ToggleLive do
           phx-click="toggle"
           phx-target={@myself}
           class={[
-            "relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full transition-colors ease-in-out duration-200",
+            "relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-transparent rounded-full transition-colors ease-in-out duration-200",
             if(@current_setting, do: "bg-indigo-600", else: "bg-gray-200 dark:bg-gray-600"),
             if(@disabled?, do: "cursor-not-allowed")
           ]}
@@ -42,8 +42,8 @@ defmodule PlausibleWeb.Components.Site.Feature.ToggleLive do
           <span
             aria-hidden="true"
             class={[
-              "inline-block size-5 rounded-full bg-white shadow transform transition ease-in-out duration-200",
-              if(@current_setting, do: "translate-x-5", else: "translate-x-0")
+              "inline-block size-4 rounded-full bg-white shadow transform transition ease-in-out duration-200",
+              if(@current_setting, do: "translate-x-4", else: "translate-x-0")
             ]}
           />
         </button>
diff --git a/lib/plausible_web/controllers/auth_controller.ex b/lib/plausible_web/controllers/auth_controller.ex
index 13ae747473d4..ffddf23a8631 100644
--- a/lib/plausible_web/controllers/auth_controller.ex
+++ b/lib/plausible_web/controllers/auth_controller.ex
@@ -63,23 +63,32 @@ defmodule PlausibleWeb.AuthController do
   def activate_form(conn, params) do
     user = conn.assigns.current_user
     flow = params["flow"] || PlausibleWeb.Flows.register()
-    team_identifier = params["team_identifier"]
-    has_email_code? = Plausible.Users.has_email_code?(user)
-    has_any_memberships? = Plausible.Teams.Users.has_sites?(user)
-
-    render_auth_page(conn, "activate.html",
-      error: nil,
-      has_email_code?: has_email_code?,
-      has_any_memberships?: has_any_memberships?,
-      heading: activate_heading(has_email_code?),
-      form_submit_url: "/activate?flow=#{flow}",
-      team_identifier: team_identifier
+
+    render_activate_form(conn, flow,
+      has_email_code?: Plausible.Users.has_email_code?(user),
+      has_any_memberships?: Plausible.Teams.Users.has_sites?(user)
     )
   end
 
   defp activate_heading(true), do: "Check your email"
   defp activate_heading(false), do: "Activate your account"
 
+  defp render_activate_form(conn, flow, opts) do
+    assigns =
+      [
+        error: nil,
+        form_submit_url: "/activate?flow=#{flow}",
+        team_identifier: conn.params["team_identifier"]
+      ]
+      |> Keyword.merge(opts)
+
+    render_auth_page(
+      conn,
+      "activate.html",
+      Keyword.put(assigns, :heading, activate_heading(assigns[:has_email_code?]))
+    )
+  end
+
   def activate(conn, %{"code" => code}) do
     user = conn.assigns[:current_user]
 
@@ -88,17 +97,10 @@ defmodule PlausibleWeb.AuthController do
       do_activate(conn, user, code)
     else
       {:error, {:rate_limit, _}} ->
-        has_any_memberships? = Plausible.Teams.Users.has_sites?(user, include_pending?: false)
-        flow = conn.params["flow"]
-        team_identifier = conn.params["team_identifier"]
-
-        render_auth_page(conn, "activate.html",
+        render_activate_form(conn, conn.params["flow"],
           error: "Too many attempts. Please wait a few minutes before trying again.",
           has_email_code?: true,
-          has_any_memberships?: has_any_memberships?,
-          heading: activate_heading(true),
-          form_submit_url: "/activate?flow=#{flow}",
-          team_identifier: team_identifier
+          has_any_memberships?: Plausible.Teams.Users.has_sites?(user, include_pending?: false)
         )
     end
   end
@@ -129,23 +131,17 @@ defmodule PlausibleWeb.AuthController do
         end
 
       {:error, :incorrect} ->
-        render_auth_page(conn, "activate.html",
+        render_activate_form(conn, flow,
           error: "That code didn't work. Please try again.",
           has_email_code?: true,
-          has_any_memberships?: has_any_memberships?,
-          heading: activate_heading(true),
-          form_submit_url: "/activate?flow=#{flow}",
-          team_identifier: team_identifier
+          has_any_memberships?: has_any_memberships?
         )
 
       {:error, :expired} ->
-        render_auth_page(conn, "activate.html",
+        render_activate_form(conn, flow,
           error: "The code has expired. Please request another one.",
           has_email_code?: false,
-          has_any_memberships?: has_any_memberships?,
-          heading: activate_heading(false),
-          form_submit_url: "/activate?flow=#{flow}",
-          team_identifier: team_identifier
+          has_any_memberships?: has_any_memberships?
         )
     end
   end
diff --git a/lib/plausible_web/controllers/helpers.ex b/lib/plausible_web/controllers/helpers.ex
index c7e1e33d5806..1b494356b711 100644
--- a/lib/plausible_web/controllers/helpers.ex
+++ b/lib/plausible_web/controllers/helpers.ex
@@ -34,6 +34,22 @@ defmodule PlausibleWeb.ControllerHelpers do
     render(conn, template, Keyword.merge(@auth_layout_assigns, extra_assigns))
   end
 
+  @onboarding_layout_assigns [
+    layout: {PlausibleWeb.LayoutView, :onboarding},
+    hide_footer?: true,
+    disable_global_notices?: true,
+    white_bg?: true
+  ]
+
+  def render_onboarding_page(conn, template, extra_assigns \\ []) do
+    assigns =
+      @onboarding_layout_assigns
+      |> Keyword.put(:hide_trial_badge?, conn.params["flow"] == PlausibleWeb.Flows.register())
+      |> Keyword.merge(extra_assigns)
+
+    render(conn, template, assigns)
+  end
+
   def debug_metadata(conn) do
     %{
       request_method: conn.method,
diff --git a/lib/plausible_web/controllers/site_controller.ex b/lib/plausible_web/controllers/site_controller.ex
index 791105cdab43..a2acddef5101 100644
--- a/lib/plausible_web/controllers/site_controller.ex
+++ b/lib/plausible_web/controllers/site_controller.ex
@@ -27,12 +27,8 @@ defmodule PlausibleWeb.SiteController do
     flow = params["flow"] || PlausibleWeb.Flows.register()
     team = conn.assigns.current_team
 
-    render(conn, "new.html",
-      changeset: Plausible.Site.changeset(%Plausible.Site{}),
-      site_limit: Plausible.Teams.Billing.site_limit(team),
-      site_limit_exceeded?: Plausible.Teams.Billing.ensure_can_add_new_site(team) != :ok,
-      form_submit_url: "/sites?flow=#{flow}",
-      flow: flow
+    render_new_site_form(conn, flow,
+      site_limit_exceeded?: Plausible.Teams.Billing.ensure_can_add_new_site(team) != :ok
     )
   end
 
@@ -56,24 +52,10 @@ defmodule PlausibleWeb.SiteController do
       {:error, _, :permission_denied, _} ->
         conn
         |> put_flash(:error, "You are not permitted to add sites in the current team")
-        |> render("new.html",
-          changeset: Plausible.Site.changeset(%Plausible.Site{}),
-          first_site?: first_site?,
-          site_limit: Plausible.Teams.Billing.site_limit(team),
-          site_limit_exceeded?: false,
-          flow: flow,
-          form_submit_url: "/sites?flow=#{flow}"
-        )
+        |> render_new_site_form(flow)
 
       {:error, _, {:over_limit, limit}, _} ->
-        render(conn, "new.html",
-          changeset: Plausible.Site.changeset(%Plausible.Site{}),
-          first_site?: first_site?,
-          site_limit: limit,
-          site_limit_exceeded?: true,
-          flow: flow,
-          form_submit_url: "/sites?flow=#{flow}"
-        )
+        render_new_site_form(conn, flow, site_limit: limit, site_limit_exceeded?: true)
 
       {:error, _, changeset, _} ->
         case check_can_already_access(changeset, user) do
@@ -81,18 +63,32 @@ defmodule PlausibleWeb.SiteController do
             redirect(conn, to: Routes.stats_path(PlausibleWeb.Endpoint, :stats, domain, []))
 
           {:error, :no_access} ->
-            render(conn, "new.html",
-              changeset: changeset,
-              first_site?: first_site?,
-              site_limit: Plausible.Teams.Billing.site_limit(team),
-              site_limit_exceeded?: false,
-              flow: flow,
-              form_submit_url: "/sites?flow=#{flow}"
-            )
+            render_new_site_form(conn, flow, changeset: changeset)
         end
     end
   end
 
+  defp render_new_site_form(conn, flow, opts \\ []) do
+    defaults = [
+      changeset: Plausible.Site.changeset(%Plausible.Site{}),
+      site_limit_exceeded?: false,
+      flow: flow,
+      form_submit_url: "/sites?flow=#{flow}",
+      current_step: "Add site info",
+      heading: "Add a website",
+      subtitle: "Start measuring traffic on a new site."
+    ]
+
+    assigns =
+      defaults
+      |> Keyword.merge(opts)
+      |> Keyword.put_new_lazy(:site_limit, fn ->
+        Plausible.Teams.Billing.site_limit(conn.assigns.current_team)
+      end)
+
+    render_onboarding_page(conn, "new.html", assigns)
+  end
+
   def settings(conn, %{"domain" => domain}) do
     redirect(conn, to: Routes.site_path(conn, :settings_general, domain))
   end
diff --git a/lib/plausible_web/flows.ex b/lib/plausible_web/flows.ex
index 0d22dae1e9f9..706dc2ac5956 100644
--- a/lib/plausible_web/flows.ex
+++ b/lib/plausible_web/flows.ex
@@ -6,18 +6,15 @@ defmodule PlausibleWeb.Flows do
 
   @flows %{
     review: [
-      "Install Plausible",
-      "Verify installation"
+      "Install Plausible"
     ],
     domain_change: [
       "Set up new domain",
-      "Install Plausible",
-      "Verify installation"
+      "Install Plausible"
     ],
     register: [
       "Add site info",
-      "Install Plausible",
-      "Verify installation"
+      "Install Plausible"
     ],
     invitation: [
       "Register",
@@ -25,8 +22,7 @@ defmodule PlausibleWeb.Flows do
     ],
     provisioning: [
       "Add site info",
-      "Install Plausible",
-      "Verify installation"
+      "Install Plausible"
     ]
   }
 
diff --git a/lib/plausible_web/live/components/form.ex b/lib/plausible_web/live/components/form.ex
index b376aacf257b..079bef42417e 100644
--- a/lib/plausible_web/live/components/form.ex
+++ b/lib/plausible_web/live/components/form.ex
@@ -18,7 +18,7 @@ defmodule PlausibleWeb.Live.Components.Form do
   <.input name="my-input" errors={["oh no!"]} />
   """
 
-  @default_input_class "text-sm text-gray-900 dark:text-white dark:bg-gray-750 block pl-3.5 py-2.5 border-gray-300 dark:border-gray-800 transition-all duration-150 focus:outline-none focus:ring-3 focus:ring-indigo-500/20 dark:focus:ring-indigo-500/25 focus:border-indigo-500 rounded-md disabled:bg-gray-100 disabled:dark:bg-gray-800 disabled:border-gray-200 disabled:dark:border-gray-800 disabled:text-gray-900/40 disabled:dark:text-white/30 disabled:cursor-not-allowed"
+  @default_input_class "text-sm text-gray-900 dark:text-white dark:bg-gray-750 block pl-3.5 py-2.5 border-gray-300 dark:border-gray-800 transition-all duration-150 focus:outline-none focus:ring-3 focus:ring-indigo-500/20 dark:focus:ring-indigo-500/25 focus:border-indigo-500 rounded-md selection:bg-gray-200 dark:selection:bg-gray-700 disabled:bg-gray-100 disabled:dark:bg-gray-800 disabled:border-gray-200 disabled:dark:border-gray-800 disabled:text-gray-900/40 disabled:dark:text-white/30 disabled:cursor-not-allowed [&[readonly]]:bg-gray-100 [&[readonly]]:border-transparent [&[readonly]]:dark:border-transparent [&[readonly]]:dark:bg-gray-750 [&[readonly]]:focus:ring-0 [&[readonly]]:focus:border-transparent [&[readonly]]:dark:focus:border-transparent [&[readonly]]:cursor-default"
 
   attr(:id, :any, default: nil)
   attr(:name, :any)
@@ -53,6 +53,7 @@ defmodule PlausibleWeb.Live.Components.Form do
 
   attr(:mt?, :boolean, default: true)
   attr(:max_one_error, :boolean, default: false)
+  attr(:resizable, :boolean, default: true)
   slot(:help_content)
   slot(:inner_block)
   slot(:trailing)
@@ -77,22 +78,20 @@ defmodule PlausibleWeb.Live.Components.Form do
   def input(%{type: "select"} = assigns) do
     ~H"""
     <div class={@mt? && "mt-6"}>
-      <.label
-        :if={@label != nil and @label != ""}
-        for={@id}
-        class={if @help_text, do: "mb-0.5", else: "mb-1.5"}
-      >
+      <.label :if={@label != nil and @label != ""} for={@id} class="mb-1.5">
         {@label}
       </.label>
-
-      <p :if={@help_text} class="text-gray-500 dark:text-gray-400 mb-2 text-sm">
-        {@help_text}
-      </p>
       <select id={@id} name={@name} multiple={@multiple} class={[@class, @width]} {@rest}>
         <option :if={@prompt} value="">{@prompt}</option>
         {Phoenix.HTML.Form.options_for_select(@options, @value)}
       </select>
       <.error :for={msg <- @errors}>{msg}</.error>
+      <p
+        :if={@help_text && @errors == []}
+        class="text-xs text-gray-500 dark:text-gray-400 mt-1"
+      >
+        {@help_text}
+      </p>
     </div>
     """
   end
@@ -159,12 +158,12 @@ defmodule PlausibleWeb.Live.Components.Form do
   def input(%{type: "textarea"} = assigns) do
     ~H"""
     <div class={@mt? && "mt-6"}>
-      <.label class="mb-1.5" for={@id}>{@label}</.label>
+      <.label :if={@label != nil and @label != ""} class="mb-1.5" for={@id}>{@label}</.label>
       <textarea
         id={@id}
         rows={@rest[:rows] || "6"}
         name={@name}
-        class="block w-full textarea border-1 border-gray-300 rounded-md p-4 text-sm text-gray-700 dark:border-gray-500 dark:bg-gray-900 dark:text-gray-300"
+        class={[@class, @width, !@resizable && "resize-none"]}
         {@rest}
       >{Phoenix.HTML.Form.normalize_value("textarea", @value)}</textarea>
       <.error :for={msg <- @errors}>{msg}</.error>
@@ -185,16 +184,9 @@ defmodule PlausibleWeb.Live.Components.Form do
 
     ~H"""
     <div class={@mt? && "mt-6"}>
-      <.label
-        :if={@label != nil and @label != ""}
-        for={@id}
-        class={if @help_text, do: "mb-0.5", else: "mb-1.5"}
-      >
+      <.label :if={@label != nil and @label != ""} for={@id} class="mb-1.5">
         {@label}
       </.label>
-      <p :if={@help_text} class="text-gray-500 dark:text-gray-400 mb-2 text-sm">
-        {@help_text}
-      </p>
       <div class="relative">
         <input
           type={@type}
@@ -206,10 +198,16 @@ defmodule PlausibleWeb.Live.Components.Form do
         />
         {render_slot(@trailing)}
       </div>
-      {render_slot(@inner_block)}
       <.error :for={msg <- @errors}>
         {msg}
       </.error>
+      <p
+        :if={@help_text && @errors == []}
+        class="text-xs text-gray-500 dark:text-gray-400 mt-1"
+      >
+        {@help_text}
+      </p>
+      {render_slot(@inner_block)}
     </div>
     """
   end
diff --git a/lib/plausible_web/live/components/verification_banner.ex b/lib/plausible_web/live/components/verification_banner.ex
index 856f0670e41b..b848766f1899 100644
--- a/lib/plausible_web/live/components/verification_banner.ex
+++ b/lib/plausible_web/live/components/verification_banner.ex
@@ -198,7 +198,7 @@ defmodule PlausibleWeb.Live.Components.VerificationBanner do
           <.button_link
             :if={not @offer_custom_url_input?}
             mt?={false}
-            href={Routes.site_path(PlausibleWeb.Endpoint, :installation, @domain, flow: @flow)}
+            href={Routes.site_path(PlausibleWeb.Endpoint, :installation, @domain, flow: @flow, return_to: "dashboard")}
             theme="ghost"
             size="sm"
             class="hover:bg-gray-600/10 dark:hover:bg-white/10 hover:border-transparent dark:hover:border-transparent"
@@ -265,7 +265,10 @@ defmodule PlausibleWeb.Live.Components.VerificationBanner do
 
   defp review_installation_link_sentence(assigns) do
     review_installation_url =
-      Routes.site_path(PlausibleWeb.Endpoint, :installation, assigns.domain, flow: assigns.flow)
+      Routes.site_path(PlausibleWeb.Endpoint, :installation, assigns.domain,
+        flow: assigns.flow,
+        return_to: "dashboard"
+      )
 
     render_recommendation("See your installation instructions again here", [
       %{text: "here", href: review_installation_url}
diff --git a/lib/plausible_web/live/installation.ex b/lib/plausible_web/live/installation.ex
index 83ffac86e35b..45361bbb3768 100644
--- a/lib/plausible_web/live/installation.ex
+++ b/lib/plausible_web/live/installation.ex
@@ -82,7 +82,12 @@ defmodule PlausibleWeb.Live.Installation do
     {:ok,
      assign(socket,
        site: site,
-       flow: flow
+       site_created?: params["site_created"] == "true",
+       flow: flow,
+       return_to: params["return_to"],
+       current_step: "Install Plausible",
+       heading: "Add tracking to your site",
+       subtitle: "Install Plausible on #{site.domain} to start seeing data."
      )}
   end
 
@@ -103,43 +108,49 @@ defmodule PlausibleWeb.Live.Installation do
   def render(assigns) do
     ~H"""
     <div>
-      <PlausibleWeb.Components.FlowProgress.render flow={@flow} current_step="Install Plausible" />
-
-      <.focus_box>
+      <div class="flex flex-col gap-10 w-full max-w-md mx-auto mt-10 pb-16 px-4 text-gray-900 dark:text-gray-100">
         <.async_result :let={recommended_installation_type} assign={@recommended_installation_type}>
           <:loading>
-            <div class="text-center text-gray-500">
-              {if(@flow == Flows.review(),
-                do: "Scanning your site to detect how Plausible is integrated...",
-                else: "Determining the simplest integration path for your website..."
-              )}
-            </div>
-            <div class="flex items-center justify-center py-8">
-              <.spinner class="w-6 h-6" />
+            <div class="flex gap-3 items-center">
+              <.spinner class="size-5" />
+              <div class="text-gray-500 dark:text-gray-400 text-base">
+                {if(@flow == Flows.review(),
+                  do: "Checking how Plausible is integrated into your site...",
+                  else: "Checking how your site is built..."
+                )}
+              </div>
             </div>
           </:loading>
 
-          <div class="grid grid-cols-2 sm:flex sm:flex-row gap-1 rounded-lg p-1 border border-gray-300 dark:border-gray-700">
-            <.tab
-              patch={"?type=manual&flow=#{@flow}"}
-              selected={@installation_type.result == "manual"}
-            >
-              <Icons.script_icon /> Script
-            </.tab>
-            <.tab
-              patch={"?type=wordpress&flow=#{@flow}"}
-              selected={@installation_type.result == "wordpress"}
-            >
-              <Icons.wordpress_icon /> WordPress
-            </.tab>
-            <%= on_ee do %>
-              <.tab patch={"?type=gtm&flow=#{@flow}"} selected={@installation_type.result == "gtm"}>
-                <Icons.tag_manager_icon /> Tag Manager
+          <div class="flex flex-col gap-3">
+            <label class="text-sm font-semibold text-gray-800 dark:text-gray-200">
+              Installation method
+            </label>
+            <div class="grid grid-cols-2 sm:flex sm:flex-row gap-1.5">
+              <.tab
+                patch={"?type=manual&flow=#{@flow}"}
+                selected={@installation_type.result == "manual"}
+              >
+                <Icons.script_icon /> Script
               </.tab>
-            <% end %>
-            <.tab patch={"?type=npm&flow=#{@flow}"} selected={@installation_type.result == "npm"}>
-              <Icons.npm_icon /> NPM
-            </.tab>
+              <.tab
+                patch={"?type=wordpress&flow=#{@flow}"}
+                selected={@installation_type.result == "wordpress"}
+              >
+                <Icons.wordpress_icon /> WordPress
+              </.tab>
+              <%= on_ee do %>
+                <.tab
+                  patch={"?type=gtm&flow=#{@flow}"}
+                  selected={@installation_type.result == "gtm"}
+                >
+                  <Icons.tag_manager_icon /> Tag Manager
+                </.tab>
+              <% end %>
+              <.tab patch={"?type=npm&flow=#{@flow}"} selected={@installation_type.result == "npm"}>
+                <Icons.npm_icon /> NPM
+              </.tab>
+            </div>
           </div>
 
           <%= on_ee do %>
@@ -151,19 +162,20 @@ defmodule PlausibleWeb.Live.Installation do
           <% end %>
 
           <.form
+            class="flex flex-col gap-10"
             for={@tracker_script_configuration_form.result}
             phx-submit="submit"
-            class="mt-4"
             onsubmit={install_method_event(@installation_type.result, recommended_installation_type)}
           >
-            <.input
+            <input
               type="hidden"
-              field={@tracker_script_configuration_form.result[:installation_type]}
+              name={@tracker_script_configuration_form.result[:installation_type].name}
               value={@installation_type.result}
             />
             <Instructions.manual_instructions
               :if={@installation_type.result == "manual"}
               tracker_script_configuration_form={@tracker_script_configuration_form.result}
+              flow={@flow}
             />
 
             <Instructions.wordpress_instructions
@@ -180,15 +192,28 @@ defmodule PlausibleWeb.Live.Installation do
             <% end %>
             <Instructions.npm_instructions :if={@installation_type.result == "npm"} />
 
-            <.button
-              type="submit"
-              class="w-full mt-8"
-            >
-              {submit_button_text(@installation_type.result)}
-            </.button>
+            <div class="flex justify-end items-center gap-x-2">
+              <.secondary_action flow={@flow} return_to={@return_to} domain={@site.domain} />
+              <.button
+                type="submit"
+                mt?={false}
+                class={
+                  install_method_event(
+                    @installation_type.result,
+                    recommended_installation_type
+                  )
+                }
+              >
+                {submit_button_text()}
+              </.button>
+            </div>
           </.form>
         </.async_result>
-        <:footer :if={ce?() and @installation_type.result == "manual"}>
+
+        <div
+          :if={ce?() and @installation_type.result == "manual"}
+          class="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700 text-sm"
+        >
           <.focus_list>
             <:item>
               Still using the legacy snippet with the data-domain attribute? See
@@ -197,19 +222,16 @@ defmodule PlausibleWeb.Live.Installation do
               </.styled_link>
             </:item>
           </.focus_list>
-        </:footer>
-      </.focus_box>
+        </div>
+      </div>
     </div>
     """
   end
 
   on_ee do
-    defp submit_button_text("manual"), do: "Verify Script installation"
-    defp submit_button_text("wordpress"), do: "Verify WordPress installation"
-    defp submit_button_text("gtm"), do: "Verify Tag Manager installation"
-    defp submit_button_text("npm"), do: "Verify NPM installation"
+    defp submit_button_text, do: "I've installed it"
   else
-    defp submit_button_text(_), do: "Proceed to dashboard"
+    defp submit_button_text, do: "Proceed to dashboard"
   end
 
   on_ee do
@@ -298,19 +320,53 @@ defmodule PlausibleWeb.Live.Installation do
     end
   end
 
+  attr :flow, :string, required: true
+  attr :return_to, :string, default: nil
+  attr :domain, :string, required: true
+
+  defp secondary_action(assigns) do
+    {label, href} =
+      cond do
+        assigns.return_to == "dashboard" ->
+          {"Back to dashboard",
+           Routes.stats_path(PlausibleWeb.Endpoint, :stats, assigns.domain,
+             verify_installation: true,
+             flow: assigns.flow
+           )}
+
+        assigns.flow == Flows.review() ->
+          {"Back to settings",
+           Routes.site_path(PlausibleWeb.Endpoint, :settings_general, assigns.domain)}
+
+        assigns.flow == Flows.provisioning() ->
+          {"Back to sites", Routes.site_path(PlausibleWeb.Endpoint, :index)}
+
+        true ->
+          {"Skip", Routes.site_path(PlausibleWeb.Endpoint, :index)}
+      end
+
+    assigns = assign(assigns, label: label, href: href)
+
+    ~H"""
+    <.button_link theme="ghost" href={@href} mt?={false}>
+      {@label}
+    </.button_link>
+    """
+  end
+
   attr :selected, :boolean, default: false
   attr :patch, :string, required: true
   slot :inner_block, required: true
 
   defp tab(assigns) do
     base_classes =
-      "rounded-md px-3 py-2 text-sm font-medium flex items-center flex-1 justify-center whitespace-nowrap hover:bg-gray-100 dark:hover:bg-gray-750 transition-colors duration-150"
+      "rounded-md border px-2.5 py-1.5 text-sm font-medium flex items-center gap-1 flex-1 justify-center whitespace-nowrap transition-colors duration-150"
 
     selected_class =
       if assigns[:selected] do
-        "bg-gray-150 dark:bg-gray-700"
+        "bg-indigo-50/80 dark:bg-indigo-900/30 border-indigo-500 text-gray-900 dark:text-gray-100"
       else
-        "bg-transparent cursor-pointer"
+        "bg-transparent border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600 cursor-pointer"
       end
 
     assigns = assign(assigns, class: "#{selected_class} #{base_classes}")
diff --git a/lib/plausible_web/live/installation/icons.ex b/lib/plausible_web/live/installation/icons.ex
index bf2e846ff55b..092778bfcc41 100644
--- a/lib/plausible_web/live/installation/icons.ex
+++ b/lib/plausible_web/live/installation/icons.ex
@@ -8,7 +8,7 @@ defmodule PlausibleWeb.Live.Installation.Icons do
     ~H"""
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      class="w-4 h-4 mr-1"
+      class="size-4"
       fill="none"
       viewBox="0 0 24 24"
       stroke-width="2"
@@ -28,7 +28,7 @@ defmodule PlausibleWeb.Live.Installation.Icons do
     ~H"""
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      class="w-4 h-4 mr-1"
+      class="size-4"
       viewBox="0 0 50 50"
       width="50px"
       height="50px"
@@ -41,7 +41,7 @@ defmodule PlausibleWeb.Live.Installation.Icons do
 
   def tag_manager_icon(assigns) do
     ~H"""
-    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-1 -ml-2" viewBox="0 0 80 80">
+    <svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 80 80">
       <path
         d="M 40 3.0058594 C 38.232848 3.0058594 36.465803 3.6767752 35.125 5.0175781 L 5.0175781 35.125 C 2.3359722 37.806606 2.3359722 42.193394 5.0175781 44.875 L 35.125 74.982422 C 36.465803 76.323225 38.236969 77 40 77 C 41.763031 77 43.534197 76.323225 44.875 74.982422 L 74.982422 44.875 C 77.665111 42.193478 77.665111 37.806522 74.982422 35.125 L 44.875 5.0175781 C 43.534197 3.6767752 41.767152 3.0058594 40 3.0058594 z M 40 4.9960938 C 41.251848 4.9960936 42.50374 5.4744436 43.460938 6.4316406 L 73.568359 36.539062 C 75.48367 38.453541 75.48367 41.54646 73.568359 43.460938 L 43.460938 73.568359 C 42.50374 74.525556 41.254969 75 40 75 C 38.745031 75 37.49626 74.525556 36.539062 73.568359 L 6.4316406 43.460938 C 4.5172466 41.546543 4.5172466 38.453457 6.4316406 36.539062 L 36.539062 6.4316406 C 37.49626 5.4744436 38.748152 4.9960938 40 4.9960938 z M 52.681641 18.007812 C 52.386328 17.980859 52.083359 18.085812 51.880859 18.289062 C 51.790859 18.389062 51.710156 18.499141 51.660156 18.619141 C 51.610156 18.739141 51.589844 18.87 51.589844 19 C 51.589844 19.13 51.610156 19.260859 51.660156 19.380859 C 51.710156 19.500859 51.780859 19.609938 51.880859 19.710938 C 51.970859 19.800937 52.079219 19.869922 52.199219 19.919922 C 52.319219 19.969922 52.449844 20 52.589844 20 C 52.719844 20 52.850703 19.969922 52.970703 19.919922 C 53.090703 19.869922 53.199062 19.800937 53.289062 19.710938 C 53.479063 19.520938 53.589844 19.27 53.589844 19 C 53.589844 18.87 53.559766 18.739141 53.509766 18.619141 C 53.459766 18.489141 53.389063 18.389063 53.289062 18.289062 C 53.199063 18.199063 53.090703 18.130078 52.970703 18.080078 C 52.878203 18.040078 52.780078 18.016797 52.681641 18.007812 z M 50.085938 20.496094 C 49.830938 20.496094 49.575859 20.593563 49.380859 20.789062 C 48.990859 21.179063 48.990859 21.819938 49.380859 22.210938 C 49.570859 22.399938 49.829844 22.5 50.089844 22.5 C 50.339844 22.5 50.599063 22.399938 50.789062 22.210938 C 51.179063 21.819938 51.179062 21.179062 50.789062 20.789062 C 50.594062 20.593563 50.340937 20.496094 50.085938 20.496094 z M 47.585938 22.996094 C 47.330938 22.996094 47.075859 23.093563 46.880859 23.289062 C 46.490859 23.679063 46.490859 24.319938 46.880859 24.710938 C 47.070859 24.899938 47.329844 25 47.589844 25 C 47.839844 25 48.099063 24.899938 48.289062 24.710938 C 48.679063 24.319938 48.679062 23.679062 48.289062 23.289062 C 48.094062 23.093563 47.840937 22.996094 47.585938 22.996094 z M 45.085938 25.496094 C 44.830938 25.496094 44.575859 25.593563 44.380859 25.789062 C 43.990859 26.179063 43.990859 26.819938 44.380859 27.210938 C 44.570859 27.399938 44.829844 27.5 45.089844 27.5 C 45.339844 27.5 45.599063 27.399938 45.789062 27.210938 C 46.179063 26.819938 46.179062 26.179062 45.789062 25.789062 C 45.594062 25.593563 45.340937 25.496094 45.085938 25.496094 z M 42.486328 28.005859 C 42.388672 28.015547 42.291719 28.040078 42.199219 28.080078 C 42.079219 28.130078 41.970859 28.199062 41.880859 28.289062 C 41.790859 28.389063 41.710156 28.489141 41.660156 28.619141 C 41.610156 28.739141 41.589844 28.87 41.589844 29 C 41.589844 29.27 41.690859 29.520937 41.880859 29.710938 C 41.970859 29.800937 42.079219 29.869922 42.199219 29.919922 C 42.319219 29.969922 42.449844 30 42.589844 30 C 42.719844 30 42.850703 29.969922 42.970703 29.919922 C 43.090703 29.869922 43.199063 29.800938 43.289062 29.710938 C 43.479062 29.520937 43.589844 29.27 43.589844 29 C 43.589844 28.87 43.559766 28.739141 43.509766 28.619141 C 43.459766 28.499141 43.389062 28.389062 43.289062 28.289062 C 43.079062 28.079062 42.779297 27.976797 42.486328 28.005859 z M 40 30.001953 L 30.001953 40 L 30.708984 40.707031 L 40 49.998047 L 49.998047 40 L 40 30.001953 z M 40 32.830078 L 47.169922 40 L 40 47.169922 L 32.830078 40 L 40 32.830078 z M 37.585938 50.003906 C 37.455937 50.003906 37.324219 50.029578 37.199219 50.080078 C 37.079219 50.130078 36.970859 50.199062 36.880859 50.289062 C 36.790859 50.389062 36.710156 50.499141 36.660156 50.619141 C 36.610156 50.739141 36.589844 50.87 36.589844 51 C 36.589844 51.13 36.610156 51.260859 36.660156 51.380859 C 36.710156 51.500859 36.780859 51.609938 36.880859 51.710938 C 37.070859 51.899937 37.319844 52 37.589844 52 C 37.849844 52 38.109062 51.899938 38.289062 51.710938 C 38.389063 51.609938 38.459766 51.500859 38.509766 51.380859 C 38.559766 51.260859 38.589844 51.13 38.589844 51 C 38.589844 50.87 38.559766 50.739141 38.509766 50.619141 C 38.459766 50.489141 38.389063 50.389063 38.289062 50.289062 C 38.199063 50.199063 38.090703 50.130078 37.970703 50.080078 C 37.845703 50.029578 37.715938 50.003906 37.585938 50.003906 z M 42.414062 50.003906 C 42.284062 50.003906 42.154297 50.029578 42.029297 50.080078 C 41.909297 50.130078 41.800937 50.199063 41.710938 50.289062 C 41.520938 50.478063 41.410156 50.74 41.410156 51 C 41.410156 51.13 41.440234 51.260859 41.490234 51.380859 C 41.540234 51.500859 41.610937 51.609938 41.710938 51.710938 C 41.800938 51.800938 41.909297 51.869922 42.029297 51.919922 C 42.149297 51.969922 42.280156 52 42.410156 52 C 42.680156 52 42.929141 51.899937 43.119141 51.710938 C 43.209141 51.609938 43.289844 51.500859 43.339844 51.380859 C 43.389844 51.260859 43.410156 51.13 43.410156 51 C 43.410156 50.87 43.389844 50.739141 43.339844 50.619141 C 43.289844 50.489141 43.209141 50.389062 43.119141 50.289062 C 43.029141 50.199062 42.920781 50.130078 42.800781 50.080078 C 42.675781 50.029578 42.544063 50.003906 42.414062 50.003906 z M 35.085938 52.496094 C 34.830937 52.496094 34.575859 52.593563 34.380859 52.789062 C 33.990859 53.179063 33.990859 53.819938 34.380859 54.210938 C 34.570859 54.399938 34.829844 54.5 35.089844 54.5 C 35.339844 54.5 35.599062 54.399937 35.789062 54.210938 C 36.179063 53.819938 36.179063 53.179062 35.789062 52.789062 C 35.594062 52.593563 35.340938 52.496094 35.085938 52.496094 z M 44.914062 52.496094 C 44.659063 52.496094 44.405937 52.593563 44.210938 52.789062 C 43.820937 53.179063 43.820938 53.819938 44.210938 54.210938 C 44.400937 54.399938 44.660156 54.5 44.910156 54.5 C 45.170156 54.5 45.429141 54.399937 45.619141 54.210938 C 46.009141 53.819938 46.009141 53.179062 45.619141 52.789062 C 45.424141 52.593563 45.169062 52.496094 44.914062 52.496094 z M 32.585938 54.996094 C 32.330937 54.996094 32.075859 55.093563 31.880859 55.289062 C 31.490859 55.679063 31.490859 56.319938 31.880859 56.710938 C 32.070859 56.899938 32.329844 57 32.589844 57 C 32.839844 57 33.099062 56.899937 33.289062 56.710938 C 33.679063 56.319938 33.679063 55.679062 33.289062 55.289062 C 33.094062 55.093563 32.840938 54.996094 32.585938 54.996094 z M 47.414062 54.996094 C 47.159063 54.996094 46.905937 55.093563 46.710938 55.289062 C 46.320937 55.679063 46.320938 56.319938 46.710938 56.710938 C 46.900937 56.899938 47.160156 57 47.410156 57 C 47.670156 57 47.929141 56.899937 48.119141 56.710938 C 48.509141 56.319938 48.509141 55.679062 48.119141 55.289062 C 47.924141 55.093563 47.669062 54.996094 47.414062 54.996094 z M 30.085938 57.496094 C 29.830938 57.496094 29.575859 57.593563 29.380859 57.789062 C 28.990859 58.179063 28.990859 58.819938 29.380859 59.210938 C 29.570859 59.399938 29.829844 59.5 30.089844 59.5 C 30.339844 59.5 30.599062 59.399937 30.789062 59.210938 C 31.179063 58.819938 31.179063 58.179062 30.789062 57.789062 C 30.594062 57.593563 30.340937 57.496094 30.085938 57.496094 z M 49.914062 57.496094 C 49.659063 57.496094 49.405937 57.593563 49.210938 57.789062 C 48.820937 58.179063 48.820938 58.819938 49.210938 59.210938 C 49.400937 59.399938 49.660156 59.5 49.910156 59.5 C 50.170156 59.5 50.429141 59.399937 50.619141 59.210938 C 51.009141 58.819938 51.009141 58.179062 50.619141 57.789062 C 50.424141 57.593563 50.169062 57.496094 49.914062 57.496094 z M 27.585938 60.003906 C 27.455938 60.003906 27.324219 60.029578 27.199219 60.080078 C 27.079219 60.130078 26.970859 60.199063 26.880859 60.289062 C 26.690859 60.478063 26.589844 60.74 26.589844 61 C 26.589844 61.27 26.690859 61.520937 26.880859 61.710938 C 27.070859 61.899938 27.319844 62 27.589844 62 C 27.849844 62 28.109062 61.899937 28.289062 61.710938 C 28.479063 61.520938 28.589844 61.27 28.589844 61 C 28.589844 60.74 28.479062 60.478062 28.289062 60.289062 C 28.199063 60.199062 28.090703 60.130078 27.970703 60.080078 C 27.845703 60.029578 27.715937 60.003906 27.585938 60.003906 z M 52.316406 60.005859 C 52.21875 60.015547 52.121797 60.040078 52.029297 60.080078 C 51.909297 60.130078 51.800938 60.199062 51.710938 60.289062 C 51.520938 60.478062 51.410156 60.74 51.410156 61 C 51.410156 61.27 51.520938 61.520938 51.710938 61.710938 C 51.900938 61.899937 52.149922 62 52.419922 62 C 52.679922 62 52.929141 61.899938 53.119141 61.710938 C 53.309141 61.520937 53.410156 61.27 53.410156 61 C 53.410156 60.74 53.309141 60.478063 53.119141 60.289062 C 52.909141 60.079063 52.609375 59.976797 52.316406 60.005859 z"
         stroke="currentColor"
@@ -58,7 +58,7 @@ defmodule PlausibleWeb.Live.Installation.Icons do
       xmlns="http://www.w3.org/2000/svg"
       width="16"
       height="16"
-      class="w-4 h-4 mr-1"
+      class="size-4"
       viewBox="0 0 16 16"
     >
       <path class="fill-black" d="M0,16V0H16V16ZM3,3V13H8V5h3v8h2V3Z" /><path
diff --git a/lib/plausible_web/live/installation/instructions.ex b/lib/plausible_web/live/installation/instructions.ex
index 9716d01ea8e7..03fd00f96680 100644
--- a/lib/plausible_web/live/installation/instructions.ex
+++ b/lib/plausible_web/live/installation/instructions.ex
@@ -3,87 +3,97 @@ defmodule PlausibleWeb.Live.Installation.Instructions do
   Instruction forms and components for the Installation module
   """
   use PlausibleWeb, :component
-  import PlausibleWeb.Components.Generic
-  alias Plausible.Site.TrackerScriptConfiguration
+  alias PlausibleWeb.Flows
 
   attr :tracker_script_configuration_form, :map, required: true
+  attr :flow, :string, required: true
 
   def manual_instructions(assigns) do
     ~H"""
-    <.title class="mt-4">
-      Script installation
-    </.title>
+    <div class="flex flex-col gap-3">
+      <label class="text-sm font-semibold text-gray-800 dark:text-gray-200">
+        Add this snippet to your site's
+        <code class="font-mono text-[0.825rem] text-red-700 dark:text-red-400 font-semibold">
+          &lt;head&gt;
+        </code>
+      </label>
+
+      <.code_snippet text={render_snippet(@tracker_script_configuration_form.data)} rows={6} />
 
-    <div class="text-sm my-4 leading-6">
-      Paste this snippet into the <code>&lt;head&gt;</code>
-      section of your site. See our
-      <.styled_link href="https://plausible.io/docs/integration-guides" new_tab={true}>
-        installation guides.
-      </.styled_link>
-      Once done, click the button below to verify your installation.
+      <p class="text-sm text-gray-500 dark:text-gray-400">
+        Need help?
+        <.styled_link href="https://plausible.io/docs/plausible-script">
+          Read our docs
+        </.styled_link>
+      </p>
     </div>
 
-    <.copy_snippet_box tracker_script_configuration={@tracker_script_configuration_form.data} />
-    <.h2 class="mt-8 text-sm font-medium">Optional measurements</.h2>
-    <.script_config_control
-      field={@tracker_script_configuration_form[:outbound_links]}
-      label="Outbound links"
-      tooltip="Automatically track clicks on external links. These count towards your billable pageviews."
-      learn_more="https://plausible.io/docs/outbound-link-click-tracking"
-    />
-    <.script_config_control
-      field={@tracker_script_configuration_form[:file_downloads]}
-      label="File downloads"
-      tooltip="Automatically track file downloads. These count towards your billable pageviews."
-      learn_more="https://plausible.io/docs/file-downloads-tracking"
-    />
-    <.script_config_control
-      field={@tracker_script_configuration_form[:form_submissions]}
-      label="Form submissions"
-      tooltip="Automatically track form submissions. These count towards your billable pageviews."
-      learn_more="https://plausible.io/docs/form-submissions-tracking"
-    />
+    <div :if={@flow == Flows.review()}>
+      <label class="text-sm font-semibold text-gray-800 dark:text-gray-200">
+        Optional measurements
+      </label>
+      <.script_config_control
+        field={@tracker_script_configuration_form[:outbound_links]}
+        label="Outbound links"
+        tooltip="Automatically track clicks on external links. These count towards your billable pageviews."
+        learn_more="https://plausible.io/docs/outbound-link-click-tracking"
+      />
+      <.script_config_control
+        field={@tracker_script_configuration_form[:file_downloads]}
+        label="File downloads"
+        tooltip="Automatically track file downloads. These count towards your billable pageviews."
+        learn_more="https://plausible.io/docs/file-downloads-tracking"
+      />
+      <.script_config_control
+        field={@tracker_script_configuration_form[:form_submissions]}
+        label="Form submissions"
+        tooltip="Automatically track form submissions. These count towards your billable pageviews."
+        learn_more="https://plausible.io/docs/form-submissions-tracking"
+      />
 
-    <.disclosure>
-      <.disclosure_button class="mt-4 flex items-center group">
-        <.h2 class="text-sm font-medium">Advanced options</.h2>
-        <Heroicons.chevron_down mini class="size-4 ml-1 mt-0.5 group-data-[open=true]:rotate-180" />
-      </.disclosure_button>
-      <.disclosure_panel>
-        <ul class="list-disc list-inside mt-2 space-y-2">
-          <.advanced_option
-            variant="tagged-events"
-            label="Manual tagging"
-            tooltip="Tag site elements like buttons, links and forms to track user activity. These count towards your billable pageviews. Additional action required."
-            learn_more="https://plausible.io/docs/custom-event-goals"
-          />
-          <.advanced_option
-            variant="404"
-            label="404 error pages"
-            tooltip="Find 404 error pages on your site. These count towards your billable pageviews. Additional action required."
-            learn_more="https://plausible.io/docs/error-pages-tracking-404"
-          />
-          <.advanced_option
-            variant="hash"
-            label="Hashed page paths"
-            tooltip="Automatically track page paths that use a # in the URL."
-            learn_more="https://plausible.io/docs/hash-based-routing"
-          />
-          <.advanced_option
-            variant="pageview-props"
-            label="Custom properties"
-            tooltip="Attach custom properties (also known as custom dimensions) to pageviews or custom events to create custom metrics. Additional action required."
-            learn_more="https://plausible.io/docs/custom-props/introduction"
-          />
-          <.advanced_option
-            variant="revenue"
-            label="Ecommerce revenue"
-            tooltip="Assign monetary values to purchases and track revenue attribution. Additional action required."
-            learn_more="https://plausible.io/docs/ecommerce-revenue-tracking"
-          />
-        </ul>
-      </.disclosure_panel>
-    </.disclosure>
+      <.disclosure>
+        <.disclosure_button class="mt-10 flex items-center group">
+          <label class="text-sm font-semibold text-gray-800 dark:text-gray-200 cursor-pointer">
+            Advanced options
+          </label>
+          <Heroicons.chevron_down mini class="size-4 ml-1 mt-0.5 group-data-[open=true]:rotate-180" />
+        </.disclosure_button>
+        <.disclosure_panel>
+          <ul class="list-disc list-inside mt-2 space-y-2">
+            <.advanced_option
+              variant="tagged-events"
+              label="Manual tagging"
+              tooltip="Tag site elements like buttons, links and forms to track user activity. These count towards your billable pageviews. Additional action required."
+              learn_more="https://plausible.io/docs/custom-event-goals"
+            />
+            <.advanced_option
+              variant="404"
+              label="404 error pages"
+              tooltip="Find 404 error pages on your site. These count towards your billable pageviews. Additional action required."
+              learn_more="https://plausible.io/docs/error-pages-tracking-404"
+            />
+            <.advanced_option
+              variant="hash"
+              label="Hashed page paths"
+              tooltip="Automatically track page paths that use a # in the URL."
+              learn_more="https://plausible.io/docs/hash-based-routing"
+            />
+            <.advanced_option
+              variant="pageview-props"
+              label="Custom properties"
+              tooltip="Attach custom properties (also known as custom dimensions) to pageviews or custom events to create custom metrics. Additional action required."
+              learn_more="https://plausible.io/docs/custom-props/introduction"
+            />
+            <.advanced_option
+              variant="revenue"
+              label="Ecommerce revenue"
+              tooltip="Assign monetary values to purchases and track revenue attribution. Additional action required."
+              learn_more="https://plausible.io/docs/ecommerce-revenue-tracking"
+            />
+          </ul>
+        </.disclosure_panel>
+      </.disclosure>
+    </div>
     """
   end
 
@@ -92,28 +102,17 @@ defmodule PlausibleWeb.Live.Installation.Instructions do
 
   def wordpress_instructions(assigns) do
     ~H"""
-    <.title class="mt-4">
-      WordPress installation
-    </.title>
-    <div class="text-sm mt-4 leading-6">
-      <div class="mb-4">
-        <span :if={@recommended_installation_type == "wordpress"}>
-          We've detected your website is using WordPress. Here's how to integrate Plausible:
-        </span>
-        <span :if={@recommended_installation_type != "wordpress"}>
-          Using Wordpress? Here's how to integrate Plausible:
-        </span>
-      </div>
-      <.focus_list>
-        <:item>
-          <.styled_link href="https://plausible.io/wordpress-analytics-plugin" new_tab={true}>
-            Install our WordPress plugin
+    <div class="flex flex-col gap-6">
+      <label class="text-sm font-semibold text-gray-800 dark:text-gray-200">Instructions</label>
+      <.steps_list>
+        <:step>
+          <.styled_link href="https://plausible.io/wordpress-analytics-plugin">
+            Install our WordPress plugin.
           </.styled_link>
-        </:item>
-        <:item>
-          After activating our plugin, click the button below to verify your installation.
-        </:item>
-      </.focus_list>
+        </:step>
+        <:step>Activate the plugin.</:step>
+        <:step>Click 'I've installed it' to verify your installation.</:step>
+      </.steps_list>
     </div>
     """
   end
@@ -123,75 +122,40 @@ defmodule PlausibleWeb.Live.Installation.Instructions do
 
   def gtm_instructions(assigns) do
     ~H"""
-    <.title class="mt-4">
-      Tag Manager installation
-    </.title>
-    <div class="text-sm mt-4 leading-6">
-      <.gtm_instructions_content
-        recommended_installation_type={@recommended_installation_type}
-        tracker_script_configuration={@tracker_script_configuration_form.data}
-      />
-    </div>
-    """
-  end
-
-  attr :recommended_installation_type, :string, required: true
-  attr :tracker_script_configuration, TrackerScriptConfiguration, required: true
-
-  def gtm_instructions_content(assigns) do
-    ~H"""
-    <span :if={@recommended_installation_type == "gtm"}>
-      We've detected your website is using Google Tag Manager. Here's how to integrate Plausible:
-    </span>
-    <span :if={@recommended_installation_type != "gtm"}>
-      Using Google Tag Manager? Here's how to integrate Plausible:
-    </span>
-    <div class="mt-4">
-      <.gtm_instructions_content_inner tracker_script_configuration={@tracker_script_configuration} />
+    <div class="flex flex-col gap-6">
+      <label class="text-sm font-semibold text-gray-800 dark:text-gray-200">Instructions</label>
+      <.steps_list>
+        <:step>
+          <div class="flex flex-col gap-2">
+            <span>Copy your Script ID.</span>
+            <.code_snippet text={@tracker_script_configuration_form.data.id} rows={1} />
+          </div>
+        </:step>
+        <:step>
+          <.styled_link href="https://plausible.io/gtm-template">
+            Install the Plausible template in GTM.
+          </.styled_link>
+        </:step>
+        <:step>Paste your Script ID into the template.</:step>
+        <:step>Click 'I've installed it' to verify your installation.</:step>
+      </.steps_list>
     </div>
     """
   end
 
-  def gtm_instructions_content_inner(assigns) do
-    ~H"""
-    <.copyable_readonly_text_area
-      id="script-config-id"
-      text={@tracker_script_configuration.id}
-      rows={1}
-    />
-    <.focus_list>
-      <:item>
-        Copy your site's Script ID from above
-      </:item>
-
-      <:item>
-        <.styled_link href="https://plausible.io/gtm-template" new_tab={true}>
-          Install the Plausible template in GTM
-        </.styled_link>
-      </:item>
-
-      <:item>
-        Paste your Script ID into the template
-      </:item>
-    </.focus_list>
-    """
-  end
-
   def npm_instructions(assigns) do
     ~H"""
-    <.title class="my-4">
-      NPM installation
-    </.title>
-    <.focus_list>
-      <:item>
-        <.styled_link href="https://www.npmjs.com/package/@plausible-analytics/tracker" new_tab={true}>
-          Install @plausible-analytics/tracker NPM package
-        </.styled_link>
-      </:item>
-      <:item>
-        Once done, click the button below to verify your installation.
-      </:item>
-    </.focus_list>
+    <div class="flex flex-col gap-6">
+      <label class="text-sm font-semibold text-gray-800 dark:text-gray-200">Instructions</label>
+      <.steps_list>
+        <:step>
+          <.styled_link href="https://www.npmjs.com/package/@plausible-analytics/tracker">
+            Install @plausible-analytics/tracker NPM package
+          </.styled_link>
+        </:step>
+        <:step>Click 'I've installed it' to verify your installation.</:step>
+      </.steps_list>
+    </div>
     """
   end
 
@@ -252,11 +216,62 @@ defmodule PlausibleWeb.Live.Installation.Instructions do
     """
   end
 
-  def copy_snippet_box(assigns) do
-    assigns = assign(assigns, :text, render_snippet(assigns.tracker_script_configuration))
+  slot :step, required: true
+
+  defp steps_list(assigns) do
+    ~H"""
+    <ol class="flex flex-col text-sm text-gray-800 dark:text-gray-200">
+      <li
+        :for={{step, idx} <- Enum.with_index(@step)}
+        class="relative flex items-start gap-3 leading-6 pb-6 last:pb-0"
+      >
+        <span
+          :if={idx + 1 < length(@step)}
+          aria-hidden="true"
+          class="absolute top-7 bottom-1 left-3 -translate-x-1/2 w-px bg-gray-300 dark:bg-gray-600"
+        />
+        <span class="shrink-0 size-6 rounded-full border border-gray-300 dark:border-gray-600 text-sm font-medium flex items-center justify-center">
+          {idx + 1}
+        </span>
+        <div class="flex-1 text-base">
+          {render_slot(step)}
+        </div>
+      </li>
+    </ol>
+    """
+  end
+
+  attr :text, :string, required: true
+  attr :rows, :integer, default: 6
 
+  defp code_snippet(assigns) do
     ~H"""
-    <.copyable_readonly_text_area id="snippet" text={@text} rows={6} resizable={true} />
+    <div class="relative rounded-lg bg-gray-100 dark:bg-gray-750" x-data="copySnippet">
+      <textarea
+        x-ref="snippet"
+        name="snippet"
+        rows={@rows}
+        readonly
+        class="block w-full resize-none border-0 bg-transparent px-3 py-3 text-[0.8rem] leading-4.5 font-mono text-gray-800 dark:text-gray-300 selection:bg-gray-200/80 dark:selection:bg-gray-700 focus:outline-none focus:ring-0"
+        x-on:click="copyIfNoSelection()"
+      ><%= @text %></textarea>
+
+      <.button
+        type="button"
+        theme="secondary"
+        size="xs"
+        mt?={false}
+        class="absolute top-1.5 right-1.5 shadow-xs"
+        x-on:click="copyAll()"
+      >
+        <span x-show="!copied" class="inline-flex items-center gap-x-1.5">
+          <PlausibleWeb.Components.Icons.copy_icon class="size-3.5" /> Copy
+        </span>
+        <span x-show="copied" x-cloak class="inline-flex items-center gap-x-1.5">
+          <Heroicons.check mini class="size-3.5" /> Copied!
+        </span>
+      </.button>
+    </div>
     """
   end
 
diff --git a/lib/plausible_web/live/onboarding_layout_context.ex b/lib/plausible_web/live/onboarding_layout_context.ex
new file mode 100644
index 000000000000..b0d0ce21c83f
--- /dev/null
+++ b/lib/plausible_web/live/onboarding_layout_context.ex
@@ -0,0 +1,19 @@
+defmodule PlausibleWeb.Live.OnboardingLayoutContext do
+  @moduledoc false
+
+  import Phoenix.Component
+
+  alias PlausibleWeb.Flows
+
+  def on_mount(_arg, params, _session, socket) do
+    socket =
+      assign(socket,
+        hide_trial_badge?: params["flow"] == Flows.register(),
+        hide_footer?: true,
+        disable_global_notices?: true,
+        white_bg?: true
+      )
+
+    {:cont, socket, layout: {PlausibleWeb.LayoutView, :onboarding}}
+  end
+end
diff --git a/lib/plausible_web/router.ex b/lib/plausible_web/router.ex
index f9c16cf88faa..812b308967ac 100644
--- a/lib/plausible_web/router.ex
+++ b/lib/plausible_web/router.ex
@@ -598,10 +598,16 @@ defmodule PlausibleWeb.Router do
     scope alias: Live, assigns: %{connect_live_socket: true} do
       pipe_through [:app_layout, PlausibleWeb.RequireAccountPlug]
 
-      scope assigns: %{
-              dogfood_page_path: "/:website/installation"
-            } do
-        live "/:domain/installation", Installation, :installation, as: :site
+      live_session :onboarding, on_mount: PlausibleWeb.Live.OnboardingLayoutContext do
+        scope assigns: %{
+                dogfood_page_path: "/:website/installation"
+              } do
+          live "/:domain/installation",
+               Installation,
+               :installation,
+               as: :site,
+               container: {:div, class: "flex-1 flex flex-col"}
+        end
       end
 
       scope assigns: %{
diff --git a/lib/plausible_web/templates/layout/_header.html.heex b/lib/plausible_web/templates/layout/_header.html.heex
index d1a93f7a3fc3..2f40ecb8c9dc 100644
--- a/lib/plausible_web/templates/layout/_header.html.heex
+++ b/lib/plausible_web/templates/layout/_header.html.heex
@@ -26,7 +26,8 @@
                 :if={
                   ee?() and Plausible.Teams.on_trial?(@conn.assigns[:current_team]) and
                     (not Plausible.Teams.setup?(@conn.assigns[:current_team]) or
-                       @conn.assigns[:current_team_role] in Plausible.Billing.allowed_roles())
+                       @conn.assigns[:current_team_role] in Plausible.Billing.allowed_roles()) and
+                    !assigns[:hide_trial_badge?]
                 }
                 class="hidden sm:block"
               >
diff --git a/lib/plausible_web/templates/layout/app.html.heex b/lib/plausible_web/templates/layout/app.html.heex
index 8029096dfcd5..1973ca36ff9e 100644
--- a/lib/plausible_web/templates/layout/app.html.heex
+++ b/lib/plausible_web/templates/layout/app.html.heex
@@ -30,7 +30,11 @@
   </head>
   <body
     class={[
-      "flex flex-col bg-gray-50 dark:bg-gray-950",
+      "flex flex-col dark:bg-gray-950",
+      if(assigns[:white_bg?],
+        do: "bg-white",
+        else: "bg-gray-50"
+      ),
       if !assigns[:embedded] do
         "h-full"
       end
@@ -49,7 +53,7 @@
       <% end %>
     <% end %>
 
-    <main class="flex-1">
+    <main class="flex-1 flex flex-col">
       {Map.get(assigns, :inner_layout) || @inner_content}
     </main>
 
diff --git a/lib/plausible_web/templates/layout/onboarding.html.heex b/lib/plausible_web/templates/layout/onboarding.html.heex
new file mode 100644
index 000000000000..967c20c5a1be
--- /dev/null
+++ b/lib/plausible_web/templates/layout/onboarding.html.heex
@@ -0,0 +1,28 @@
+<div class="flex-1 flex flex-col">
+  <div class="flex-1">
+    <div
+      :if={assigns[:heading]}
+      class="w-full max-w-md mx-auto mt-10 sm:mt-16 px-4 flex flex-col gap-y-2 dark:text-gray-300"
+    >
+      <h1 class="text-lg sm:text-xl font-semibold">{@heading}</h1>
+      <p
+        :if={assigns[:subtitle]}
+        class="text-base text-gray-500 dark:text-gray-400 text-pretty"
+      >
+        {@subtitle}
+      </p>
+    </div>
+    {@inner_content}
+  </div>
+  <div
+    :if={
+      assigns[:flow] == PlausibleWeb.Flows.register() and assigns[:current_step] not in [nil, ""]
+    }
+    class="pb-20 flex justify-center"
+  >
+    <PlausibleWeb.Components.FlowProgress.render
+      flow={@flow}
+      current_step={@current_step}
+    />
+  </div>
+</div>
diff --git a/lib/plausible_web/templates/site/new.html.heex b/lib/plausible_web/templates/site/new.html.heex
index abb4ed0bccbf..e81ab2d29091 100644
--- a/lib/plausible_web/templates/site/new.html.heex
+++ b/lib/plausible_web/templates/site/new.html.heex
@@ -1,11 +1,5 @@
-<PlausibleWeb.Components.FlowProgress.render flow={@flow} current_step="Add site info" />
-
-<.focus_box>
-  <:title>
-    Add website info
-  </:title>
-
-  <.form :let={f} for={@changeset} action={@form_submit_url}>
+<div class="w-full max-w-md mx-auto mt-10 pb-16 px-4 dark:text-gray-300">
+  <.form :let={f} class="flex flex-col gap-y-8" for={@changeset} action={@form_submit_url}>
     <PlausibleWeb.Components.Billing.Notice.limit_exceeded
       :if={@site_limit_exceeded?}
       current_user={@current_user}
@@ -14,50 +8,38 @@
       resource="sites"
     />
 
-    <div class="my-6">
-      <.input
-        help_text="Just the naked domain or subdomain without 'www', 'https' etc."
-        type="text"
-        placeholder="example.com"
-        field={f[:domain]}
-        label="Domain"
-        disabled={@site_limit_exceeded?}
-      />
-    </div>
-    <div class="my-6">
-      <.input
-        type="select"
-        help_text="To make sure we agree on what 'today' means"
-        field={f[:timezone]}
-        id="tz-select"
-        value="Etc/Greenwich"
-        disabled={@site_limit_exceeded?}
-        label="Reporting timezone"
-        options={Plausible.Timezones.options()}
-      />
-    </div>
-    <script>
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 var option;
-
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 if (typeof Intl !== "undefined") {
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   var timezoneName = Intl.DateTimeFormat().resolvedOptions().timeZone
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     option = document.querySelector('#tz-select option[value="' + timezoneName + '"]')
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 }
+    <.input
+      help_text="Just the naked domain or subdomain without 'www', 'https' etc."
+      type="text"
+      placeholder="example.com"
+      field={f[:domain]}
+      label="Domain"
+      disabled={@site_limit_exceeded?}
+      mt?={false}
+    />
 
-      if (!option) {
-        var offset = (new Date()).getTimezoneOffset()
-          option = document.querySelector('#tz-select option[offset="' + offset + '"]')
+    <input type="hidden" name={f[:timezone].name} id="tz-input" value="Etc/UTC" />
+    <script>
+      if (typeof Intl !== "undefined") {
+        var detectedTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+        if (detectedTimezone) {
+          document.getElementById("tz-input").value = detectedTimezone;
+        }
       }
-
-      if (option) { option.selected = "selected"}
     </script>
 
-    <.button
-      disabled={@site_limit_exceeded?}
-      type="submit"
-      class="w-full disabled:cursor-not-allowed"
-    >
-      Install Plausible
-    </.button>
+    <div class="flex justify-end items-center gap-x-2">
+      <.button_link theme="ghost" href={Routes.site_path(@conn, :index)} mt?={false}>
+        {if @flow == PlausibleWeb.Flows.provisioning(), do: "Back to sites", else: "Skip"}
+      </.button_link>
+      <.button
+        disabled={@site_limit_exceeded?}
+        type="submit"
+        mt?={false}
+        class="disabled:cursor-not-allowed"
+      >
+        Add site
+      </.button>
+    </div>
   </.form>
-</.focus_box>
+</div>
diff --git a/test/plausible/site/domain_test.exs b/test/plausible/site/domain_test.exs
index 98a0135738d5..089af3f6c26f 100644
--- a/test/plausible/site/domain_test.exs
+++ b/test/plausible/site/domain_test.exs
@@ -19,7 +19,7 @@ defmodule Plausible.Site.DomainTest do
     site2 = insert(:site)
     assert {:error, changeset} = Domain.change(site2, "new-domain.example.com")
     assert {error_message, _} = changeset.errors[:domain]
-    assert error_message =~ "This domain cannot be registered"
+    assert error_message =~ "This domain is already registered"
   end
 
   test "domain is also guaranteed unique against existing domain_changed_from entries" do
@@ -33,7 +33,7 @@ defmodule Plausible.Site.DomainTest do
     assert {:error, %{errors: [{:domain, {^error, _}}]}} =
              Domain.change(site2, site1.domain_changed_from)
 
-    assert error =~ "This domain cannot be registered"
+    assert error =~ "This domain is already registered"
   end
 
   test "a single site's domain can be changed back and forth" do
@@ -72,7 +72,7 @@ defmodule Plausible.Site.DomainTest do
 
     assert {:error, changeset} = Domain.change(Repo.reload!(site2), "one.example.com")
     assert {error_message, _} = changeset.errors[:domain]
-    assert error_message =~ "This domain cannot be registered"
+    assert error_message =~ "This domain is already registered"
   end
 
   test "change info is cleared when the grace period expires" do
@@ -112,7 +112,7 @@ defmodule Plausible.Site.DomainTest do
   test "new domain gets validated" do
     site = build(:site)
     changeset = Site.update_changeset(site, %{domain: " "})
-    assert {"can't be blank", _} = changeset.errors[:domain]
+    assert {"Please enter a domain or subdomain", _} = changeset.errors[:domain]
 
     changeset = Site.update_changeset(site, %{domain: "?#[]"})
     assert {"must not contain URI reserved characters" <> _, _} = changeset.errors[:domain]
diff --git a/test/plausible_web/components/flow_progress_test.exs b/test/plausible_web/components/flow_progress_test.exs
index 383612e1eb9a..63bf85b5310f 100644
--- a/test/plausible_web/components/flow_progress_test.exs
+++ b/test/plausible_web/components/flow_progress_test.exs
@@ -30,8 +30,9 @@ defmodule PlausibleWeb.Components.FlowProgressTest do
         current_step: "Add site info"
       )
 
-    assert text_of_element(rendered, "#flow-progress") ==
-             "1 Add site info 2 Install Plausible 3 Verify installation"
+    assert_dot_labels(rendered, ["Add site info", "Install Plausible"])
+
+    assert_current_step(rendered, "Add site info")
   end
 
   test "invitation" do
@@ -41,8 +42,8 @@ defmodule PlausibleWeb.Components.FlowProgressTest do
         current_step: "Register"
       )
 
-    assert text_of_element(rendered, "#flow-progress") ==
-             "1 Register 2 Activate account"
+    assert_dot_labels(rendered, ["Register", "Activate account"])
+    assert_current_step(rendered, "Register")
   end
 
   test "provisioning" do
@@ -52,8 +53,9 @@ defmodule PlausibleWeb.Components.FlowProgressTest do
         current_step: "Add site info"
       )
 
-    assert text_of_element(rendered, "#flow-progress") ==
-             "1 Add site info 2 Install Plausible 3 Verify installation"
+    assert_dot_labels(rendered, ["Add site info", "Install Plausible"])
+
+    assert_current_step(rendered, "Add site info")
   end
 
   test "review" do
@@ -63,8 +65,8 @@ defmodule PlausibleWeb.Components.FlowProgressTest do
         current_step: "Install Plausible"
       )
 
-    assert text_of_element(rendered, "#flow-progress") ==
-             "1 Install Plausible 2 Verify installation"
+    assert_dot_labels(rendered, ["Install Plausible"])
+    assert_current_step(rendered, "Install Plausible")
   end
 
   test "domain_change" do
@@ -74,7 +76,28 @@ defmodule PlausibleWeb.Components.FlowProgressTest do
         current_step: "Set up new domain"
       )
 
-    assert text_of_element(rendered, "#flow-progress") ==
-             "1 Set up new domain 2 Install Plausible 3 Verify installation"
+    assert_dot_labels(rendered, ["Set up new domain", "Install Plausible"])
+
+    assert_current_step(rendered, "Set up new domain")
+  end
+
+  defp assert_dot_labels(rendered, expected_labels) do
+    labels =
+      rendered
+      |> LazyHTML.from_fragment()
+      |> LazyHTML.query("#flow-progress [aria-label]")
+      |> LazyHTML.attribute("aria-label")
+
+    assert labels == expected_labels
+  end
+
+  defp assert_current_step(rendered, expected_label) do
+    current =
+      rendered
+      |> LazyHTML.from_fragment()
+      |> LazyHTML.query(~s(#flow-progress [aria-current="step"]))
+
+    assert Enum.count(current) == 1
+    assert LazyHTML.attribute(current, "aria-label") == [expected_label]
   end
 end
diff --git a/test/plausible_web/controllers/api/external_sites_controller_sites_crud_api_test.exs b/test/plausible_web/controllers/api/external_sites_controller_sites_crud_api_test.exs
index 458804f3b0db..c45522c59d59 100644
--- a/test/plausible_web/controllers/api/external_sites_controller_sites_crud_api_test.exs
+++ b/test/plausible_web/controllers/api/external_sites_controller_sites_crud_api_test.exs
@@ -288,7 +288,7 @@ defmodule PlausibleWeb.Api.ExternalSitesControllerSitesCrudApiTest do
         conn = post(conn, "/api/v1/sites", %{})
 
         assert json_response(conn, 400) == %{
-                 "error" => "domain: can't be blank"
+                 "error" => "domain: Please enter a domain or subdomain"
                }
       end
 
diff --git a/test/plausible_web/controllers/site_controller_test.exs b/test/plausible_web/controllers/site_controller_test.exs
index 8c66b55e5e8a..3cee62dc30c2 100644
--- a/test/plausible_web/controllers/site_controller_test.exs
+++ b/test/plausible_web/controllers/site_controller_test.exs
@@ -22,7 +22,7 @@ defmodule PlausibleWeb.SiteControllerTest do
     test "shows the site form", %{conn: conn} do
       conn = get(conn, "/sites/new")
 
-      assert html_response(conn, 200) =~ "Add website info"
+      assert html_response(conn, 200) =~ "Add a website"
     end
 
     test "shows onboarding steps regardless of sites provisioned", %{conn: conn1, user: user} do
@@ -379,7 +379,7 @@ defmodule PlausibleWeb.SiteControllerTest do
           }
         })
 
-      assert html_response(conn, 200) =~ htmlize_quotes("can't be blank")
+      assert html_response(conn, 200) =~ "Please enter a domain or subdomain"
     end
 
     test "fails to create site when not allowed to in selected team", %{conn: conn, user: user} do
@@ -529,7 +529,7 @@ defmodule PlausibleWeb.SiteControllerTest do
           }
         })
 
-      assert html_response(conn, 200) =~ htmlize_quotes("can't be blank")
+      assert html_response(conn, 200) =~ "Please enter a domain or subdomain"
     end
 
     test "only alphanumeric characters and slash allowed in domain", %{conn: conn} do
@@ -570,7 +570,7 @@ defmodule PlausibleWeb.SiteControllerTest do
         })
 
       assert html_response(conn, 200) =~
-               "This domain cannot be registered. Perhaps one of your colleagues registered it?"
+               "This domain is already registered. Ask the owner for access"
 
       if ee?() do
         assert html_response(conn, 200) =~ "support@plausible.io"
@@ -593,7 +593,7 @@ defmodule PlausibleWeb.SiteControllerTest do
         })
 
       assert html_response(conn, 200) =~
-               "This domain cannot be registered. Perhaps one of your colleagues registered it?"
+               "This domain is already registered. Ask the owner for access"
 
       if ee?() do
         assert html_response(conn, 200) =~ "support@plausible.io"
@@ -660,7 +660,7 @@ defmodule PlausibleWeb.SiteControllerTest do
           })
 
         assert html_response(conn, 200) =~
-                 "This domain cannot be registered. Perhaps one of your colleagues registered it?"
+                 "This domain is already registered. Ask the owner for access"
       end
     end
   end
diff --git a/test/plausible_web/live/change_domain_test.exs b/test/plausible_web/live/change_domain_test.exs
index 84f902d3b4c8..ee0b76ed5b19 100644
--- a/test/plausible_web/live/change_domain_test.exs
+++ b/test/plausible_web/live/change_domain_test.exs
@@ -55,7 +55,7 @@ defmodule PlausibleWeb.Live.ChangeDomainTest do
         |> element("form")
         |> render_submit(%{site: %{domain: another_site.domain}})
 
-      assert html =~ "This domain cannot be registered"
+      assert html =~ "This domain is already registered"
 
       site = Repo.reload!(site)
       assert site.domain != another_site.domain
@@ -93,7 +93,7 @@ defmodule PlausibleWeb.Live.ChangeDomainTest do
         |> element("form")
         |> render_submit(%{site: %{domain: "foo.example.com"}})
 
-      assert html =~ "This domain cannot be registered"
+      assert html =~ "This domain is already registered"
 
       site = Repo.reload!(site)
       assert site.domain != "foo.example.com"
@@ -204,7 +204,7 @@ defmodule PlausibleWeb.Live.ChangeDomainTest do
         |> element("form")
         |> render_submit(%{site: %{domain: ""}})
 
-      assert html =~ htmlize_quotes("can't be blank")
+      assert html =~ "Please enter a domain or subdomain"
     end
 
     test "form validation shows error for invalid domain format", %{conn: conn, site: site} do
diff --git a/test/plausible_web/live/components/verification_banner_test.exs b/test/plausible_web/live/components/verification_banner_test.exs
index dbd289ddb6b0..4c2d9d5ab4a0 100644
--- a/test/plausible_web/live/components/verification_banner_test.exs
+++ b/test/plausible_web/live/components/verification_banner_test.exs
@@ -67,7 +67,7 @@ defmodule PlausibleWeb.Live.Components.VerificationBannerTest do
 
       assert element_exists?(
                html,
-               ~s|#recommendation a[href="/example.com/installation?flow="]|
+               ~s|#recommendation a[href="/example.com/installation?flow=&return_to=dashboard"]|
              )
 
       refute element_exists?(html, @super_admin_report)
@@ -218,7 +218,7 @@ defmodule PlausibleWeb.Live.Components.VerificationBannerTest do
 
       assert element_exists?(
                html,
-               ~s|a[href="/example.com/installation?flow=review"]|
+               ~s|a[href="/example.com/installation?flow=review&return_to=dashboard"]|
              )
 
       assert html =~ "Review installation"
diff --git a/test/plausible_web/live/installation_test.exs b/test/plausible_web/live/installation_test.exs
index 794b6ec09f4d..227cf76387c1 100644
--- a/test/plausible_web/live/installation_test.exs
+++ b/test/plausible_web/live/installation_test.exs
@@ -9,17 +9,9 @@ defmodule PlausibleWeb.Live.InstallationTest do
   @migration_guide_link "https://plausible.io/docs/script-update-guide"
 
   on_ee do
-    @manual_button_text "Verify Script installation"
-    @wordpress_button_text "Verify WordPress installation"
-    @gtm_button_text "Verify Tag Manager installation"
-    @npm_button_text "Verify NPM installation"
+    @submit_button_text "I've installed it"
   else
-    @shared_button_text "Proceed to dashboard"
-
-    @manual_button_text @shared_button_text
-    @wordpress_button_text @shared_button_text
-    @gtm_button_text @shared_button_text
-    @npm_button_text @shared_button_text
+    @submit_button_text "Proceed to dashboard"
   end
 
   setup [:create_user, :log_in, :create_site]
@@ -57,7 +49,7 @@ defmodule PlausibleWeb.Live.InstallationTest do
       {lv, _} = get_lv(conn, site)
 
       html = render_async(lv, 500)
-      assert text(html) =~ @wordpress_button_text
+      assert text(html) =~ @submit_button_text
     end
 
     @tag :ee_only
@@ -71,7 +63,7 @@ defmodule PlausibleWeb.Live.InstallationTest do
       {lv, _} = get_lv(conn, site, "?type=wordpress")
 
       html = render_async(lv, 500)
-      assert text(html) =~ @wordpress_button_text
+      assert text(html) =~ @submit_button_text
     end
 
     @tag :ee_only
@@ -85,7 +77,7 @@ defmodule PlausibleWeb.Live.InstallationTest do
       {lv, _} = get_lv(conn, site, "?type=gtm")
 
       html = render_async(lv, 500)
-      assert text(html) =~ @gtm_button_text
+      assert text(html) =~ @submit_button_text
     end
 
     @tag :ee_only
@@ -99,7 +91,7 @@ defmodule PlausibleWeb.Live.InstallationTest do
       {lv, _} = get_lv(conn, site, "?type=npm")
 
       html = render_async(lv, 500)
-      assert text(html) =~ @npm_button_text
+      assert text(html) =~ @submit_button_text
     end
 
     @tag :ee_only
@@ -113,7 +105,7 @@ defmodule PlausibleWeb.Live.InstallationTest do
       {lv, _} = get_lv(conn, site, "?type=manual")
 
       html = render_async(lv, 500)
-      assert text(html) =~ @manual_button_text
+      assert text(html) =~ @submit_button_text
     end
 
     on_ee do
@@ -124,28 +116,28 @@ defmodule PlausibleWeb.Live.InstallationTest do
         {lv, _html} = get_lv(conn, site, "?type=manual")
 
         html = render_async(lv, 500)
-        assert html =~ @manual_button_text
+        assert html =~ htmlize_quotes(@submit_button_text)
 
         lv
         |> element("a[href*=\"type=wordpress\"]")
         |> render_click()
 
         html = render(lv)
-        assert html =~ @wordpress_button_text
+        assert html =~ htmlize_quotes(@submit_button_text)
 
         lv
         |> element("a[href*=\"type=gtm\"]")
         |> render_click()
 
         html = render(lv)
-        assert html =~ @gtm_button_text
+        assert html =~ htmlize_quotes(@submit_button_text)
 
         lv
         |> element("a[href*=\"type=npm\"]")
         |> render_click()
 
         html = render(lv)
-        assert html =~ @npm_button_text
+        assert html =~ htmlize_quotes(@submit_button_text)
       end
     else
       test "allows switching between installation tabs (CE)", %{conn: conn, site: site} do
@@ -153,7 +145,7 @@ defmodule PlausibleWeb.Live.InstallationTest do
 
         html = render_async(lv, 500)
         assert html =~ "window.plausible"
-        assert html =~ @shared_button_text
+        assert html =~ htmlize_quotes(@submit_button_text)
 
         lv
         |> element("a[href*=\"type=wordpress\"]")
@@ -161,7 +153,7 @@ defmodule PlausibleWeb.Live.InstallationTest do
 
         html = render(lv)
         assert html =~ "https://plausible.io/wordpress-analytics-plugin"
-        assert html =~ @shared_button_text
+        assert html =~ htmlize_quotes(@submit_button_text)
 
         lv
         |> element("a[href*=\"type=npm\"]")
@@ -169,7 +161,7 @@ defmodule PlausibleWeb.Live.InstallationTest do
 
         html = render(lv)
         assert html =~ "@plausible-analytics/tracker"
-        assert html =~ @shared_button_text
+        assert html =~ htmlize_quotes(@submit_button_text)
       end
     end
 
@@ -183,7 +175,7 @@ defmodule PlausibleWeb.Live.InstallationTest do
 
       assert eventually(fn ->
                html = render(lv)
-               {html =~ @manual_button_text, html}
+               {html =~ htmlize_quotes(@submit_button_text), html}
              end)
 
       html = render(lv)
@@ -202,7 +194,7 @@ defmodule PlausibleWeb.Live.InstallationTest do
       {lv, _html} = get_lv(conn, site, "?type=manual&flow=review")
 
       html = render_async(lv, 500)
-      assert html =~ @manual_button_text
+      assert html =~ htmlize_quotes(@submit_button_text)
       assert html =~ "Optional measurements"
       assert html =~ "Outbound links"
       assert html =~ "File downloads"
@@ -218,7 +210,7 @@ defmodule PlausibleWeb.Live.InstallationTest do
       {lv, _html} = get_lv(conn, site, "?type=manual&flow=review")
 
       html = render_async(lv, 500)
-      assert html =~ @manual_button_text
+      assert html =~ htmlize_quotes(@submit_button_text)
       assert html =~ "Advanced options"
       assert html =~ "Manual tagging"
       assert html =~ "404 error pages"
@@ -239,7 +231,7 @@ defmodule PlausibleWeb.Live.InstallationTest do
       {lv, _html} = get_lv(conn, site, "?type=manual&flow=review")
 
       html = render_async(lv, 500)
-      assert html =~ @manual_button_text
+      assert html =~ htmlize_quotes(@submit_button_text)
 
       config = TrackerScriptConfiguration |> Plausible.Repo.get_by!(site_id: site.id)
       assert config.outbound_links == true
@@ -264,12 +256,7 @@ defmodule PlausibleWeb.Live.InstallationTest do
     end
 
     on_ee do
-      for {type, expected_text} <- [
-            {"manual", @manual_button_text},
-            {"wordpress", @wordpress_button_text},
-            {"gtm", @gtm_button_text},
-            {"npm", @npm_button_text}
-          ] do
+      for type <- ["manual", "wordpress", "gtm", "npm"] do
         test "submitting form with #{type} redirects to the dashboard with the verification banner (EE)",
              %{
                conn: conn,
@@ -281,7 +268,7 @@ defmodule PlausibleWeb.Live.InstallationTest do
           {lv, _html} = get_lv(conn, site, "?type=#{unquote(type)}")
 
           html = render_async(lv, 500)
-          assert html =~ unquote(expected_text)
+          assert html =~ htmlize_quotes(@submit_button_text)
 
           lv
           |> element("form[phx-submit='submit']")
@@ -335,7 +322,7 @@ defmodule PlausibleWeb.Live.InstallationTest do
       {lv, _html} = get_lv(conn, site, "?type=manual")
 
       html = render_async(lv, 500)
-      assert html =~ @manual_button_text
+      assert html =~ htmlize_quotes(@submit_button_text)
 
       # Test with all options disabled
       lv
@@ -367,7 +354,7 @@ defmodule PlausibleWeb.Live.InstallationTest do
       {lv, _html} = get_lv(conn, site, "?type=manual&flow=review")
 
       html = render_async(lv, 500)
-      assert html =~ @manual_button_text
+      assert html =~ htmlize_quotes(@submit_button_text)
 
       lv
       |> element("form[phx-submit='submit']")
@@ -396,14 +383,14 @@ defmodule PlausibleWeb.Live.InstallationTest do
     end
 
     @tag :ee_only
-    test "detected WordPress installation shows special message", %{conn: conn, site: site} do
+    test "detected WordPress installation preselects WordPress tab", %{conn: conn, site: site} do
       stub_dns()
       stub_detection_wordpress()
 
       {lv, _} = get_lv(conn, site)
 
       html = render_async(lv, 500)
-      assert text(html) =~ "We've detected your website is using WordPress"
+      assert text(html) =~ "Install our WordPress plugin"
     end
 
     @tag :ee_only
@@ -427,21 +414,21 @@ defmodule PlausibleWeb.Live.InstallationTest do
 
       html = render_async(lv, 500)
 
-      refute text(html) =~ "We've detected your website is using WordPress"
-      assert text(html) =~ @manual_button_text
+      refute text(html) =~ "Install our WordPress plugin"
+      assert text(html) =~ @submit_button_text
     end
 
     @tag :ee_only
-    test "detected GTM installation shows special message", %{conn: conn, site: site} do
+    test "detected GTM installation preselects Tag Manager tab", %{conn: conn, site: site} do
       stub_dns()
       stub_detection_gtm()
 
       {lv, _} = get_lv(conn, site)
 
       html = render_async(lv, 500)
-      assert html =~ @gtm_button_text
+      assert html =~ htmlize_quotes(@submit_button_text)
 
-      assert text(html) =~ "We've detected your website is using Google Tag Manager"
+      assert text(html) =~ "Install the Plausible template in GTM"
     end
 
     @tag :ee_only
@@ -459,7 +446,7 @@ defmodule PlausibleWeb.Live.InstallationTest do
       {lv, _} = get_lv(conn, site)
 
       html = render_async(lv, 500)
-      assert html =~ @npm_button_text
+      assert html =~ htmlize_quotes(@submit_button_text)
     end
 
     @tag :ee_only
@@ -498,7 +485,7 @@ defmodule PlausibleWeb.Live.InstallationTest do
       {lv, _} = get_lv(conn, site, "?type=wordpress")
 
       html = render_async(lv, 500)
-      assert html =~ @wordpress_button_text
+      assert html =~ htmlize_quotes(@submit_button_text)
       refute element_exists?(html, "a[href='#{@migration_guide_link}']")
     end
 
@@ -515,7 +502,7 @@ defmodule PlausibleWeb.Live.InstallationTest do
         assert eventually(fn ->
                  html = render(lv)
                  # Should default to manual installation when detection returns {:error, _}
-                 {html =~ @manual_button_text, html}
+                 {html =~ htmlize_quotes(@submit_button_text), html}
                end)
       end)
     end
@@ -533,7 +520,7 @@ defmodule PlausibleWeb.Live.InstallationTest do
 
         html = render_async(lv, 500)
         # Should default to manual installation when detection returns {:error, _}
-        assert html =~ @manual_button_text
+        assert html =~ htmlize_quotes(@submit_button_text)
       end)
     end
   end
@@ -560,7 +547,7 @@ defmodule PlausibleWeb.Live.InstallationTest do
       {lv, _} = get_lv(conn, site)
 
       html = render_async(lv, 500)
-      assert html =~ @manual_button_text
+      assert html =~ htmlize_quotes(@submit_button_text)
     end
 
     test "allows editor access to installation page", %{conn: conn, user: user} do
@@ -575,7 +562,7 @@ defmodule PlausibleWeb.Live.InstallationTest do
       {lv, _} = get_lv(conn, site)
 
       html = render_async(lv, 500)
-      assert html =~ @manual_button_text
+      assert html =~ htmlize_quotes(@submit_button_text)
     end
   end
 
@@ -593,7 +580,7 @@ defmodule PlausibleWeb.Live.InstallationTest do
       {lv, _} = get_lv(conn, site, "?type=invalid")
 
       html = render_async(lv, 500)
-      assert html =~ @manual_button_text
+      assert html =~ htmlize_quotes(@submit_button_text)
     end
 
     test "falls back to provisioning flow when invalid flow parameter supplied", %{
@@ -608,7 +595,7 @@ defmodule PlausibleWeb.Live.InstallationTest do
       {lv, _} = get_lv(conn, site, "?flow=invalid")
 
       html = render_async(lv, 500)
-      assert html =~ @manual_button_text
+      assert html =~ htmlize_quotes(@submit_button_text)
     end
   end
 
@@ -628,7 +615,80 @@ defmodule PlausibleWeb.Live.InstallationTest do
       {lv, _} = get_lv(conn, site)
 
       html = render_async(lv, 500)
-      assert html =~ @gtm_button_text
+      assert html =~ htmlize_quotes(@submit_button_text)
+    end
+  end
+
+  describe "secondary action" do
+    @tag :ee_only
+    test "offers Skip to /sites in the register flow", %{conn: conn, site: site} do
+      stub_dns()
+      stub_detection_manual()
+
+      {lv, _} = get_lv(conn, site, "?flow=register")
+
+      html = render_async(lv, 500)
+
+      assert text_of_element(html, ~s|a[href="/sites"]|) == "Skip"
+    end
+
+    @tag :ee_only
+    test "offers Back to sites in the provisioning flow", %{conn: conn, site: site} do
+      stub_dns()
+      stub_detection_manual()
+
+      {lv, _} = get_lv(conn, site, "?flow=provisioning")
+
+      html = render_async(lv, 500)
+
+      assert text_of_element(html, ~s|a[href="/sites"]|) == "Back to sites"
+    end
+
+    @tag :ee_only
+    test "offers Back to settings in the review flow", %{conn: conn, site: site} do
+      stub_dns()
+      stub_detection_manual()
+
+      {lv, _} = get_lv(conn, site, "?flow=review")
+
+      html = render_async(lv, 500)
+
+      href = Routes.site_path(PlausibleWeb.Endpoint, :settings_general, site.domain)
+
+      assert text_of_element(html, ~s|a[href="#{href}"]|) == "Back to settings"
+    end
+
+    @tag :ee_only
+    test "offers Back to dashboard, keeping verification on, when return_to=dashboard", %{
+      conn: conn,
+      site: site
+    } do
+      stub_dns()
+      stub_detection_manual()
+
+      {lv, _} = get_lv(conn, site, "?flow=provisioning&return_to=dashboard")
+
+      html = render_async(lv, 500)
+
+      href =
+        Routes.stats_path(PlausibleWeb.Endpoint, :stats, site.domain,
+          verify_installation: true,
+          flow: "provisioning"
+        )
+
+      assert text_of_element(html, ~s|a[href="#{href}"]|) == "Back to dashboard"
+    end
+
+    @tag :ee_only
+    test "falls back to Skip when the flow is unrecognised", %{conn: conn, site: site} do
+      stub_dns()
+      stub_detection_manual()
+
+      {lv, _} = get_lv(conn, site, "?flow=")
+
+      html = render_async(lv, 500)
+
+      assert text_of_element(html, ~s|a[href="/sites"]|) == "Skip"
     end
   end
 
@@ -652,7 +712,7 @@ defmodule PlausibleWeb.Live.InstallationTest do
       {lv, _} = get_lv(conn, site, "?flow=review")
 
       html = render_async(lv, 500)
-      assert html =~ @wordpress_button_text
+      assert html =~ htmlize_quotes(@submit_button_text)
     end
   end
 

From c4d98a5e1d3102cc28a7bf6acce2c4c957274857 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Mon, 3 Aug 2026 11:09:01 +0200
Subject: [PATCH 2/3] Add autofocus to domain input on `/sites/new`

---
 lib/plausible_web/templates/site/new.html.heex | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/plausible_web/templates/site/new.html.heex b/lib/plausible_web/templates/site/new.html.heex
index e81ab2d29091..1f4ad3805300 100644
--- a/lib/plausible_web/templates/site/new.html.heex
+++ b/lib/plausible_web/templates/site/new.html.heex
@@ -16,6 +16,7 @@
       label="Domain"
       disabled={@site_limit_exceeded?}
       mt?={false}
+      autofocus="autofocus"
     />
 
     <input type="hidden" name={f[:timezone].name} id="tz-input" value="Etc/UTC" />

From 0f86c2d8f4b80f25210a8015a47020887ab83d02 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Mon, 3 Aug 2026 11:12:13 +0200
Subject: [PATCH 3/3] Add changelog entries

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 471a0501c812..cf2c9a54d9f5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -24,6 +24,7 @@ All notable changes to this project will be documented in this file.
 - Removed the intermediate "Awaiting your first pageview" screen after site created. User is now taken straight to the dashboard from the installation instructions page.
 - Removed the standalone team switcher page; team switching is now done from the topbar dropdown only
 - Removed `Bamboo.SMTPAdapter` from supported e-mail adapters; the library is no longer in active developments and does not compile under Elixir 1.20+
+- Removed timezone selection field when creating a new site. Timezone is automatically detected and can still be changed in site settings.
 
 ### Changed
 
@@ -39,6 +40,7 @@ All notable changes to this project will be documented in this file.
 - Improved site transfer UI
 - Redesigned authentication pages (register, sign in, 2FA, password reset, account activation)
 - Removed limitation that blocked users without owned sites from starting a subscription
+- Redesigned onboarding pages (add site, installation)
 
 ### Fixed