diff --git a/app/assets/stylesheets/utilities.css b/app/assets/stylesheets/utilities.css
index 3eb820bfb..cea383315 100644
--- a/app/assets/stylesheets/utilities.css
+++ b/app/assets/stylesheets/utilities.css
@@ -19,6 +19,7 @@
   .txt-subtle { color: var(--color-ink-medium); }
   .txt-alert { color: var(--color-marker); }
   .txt-undecorated { text-decoration: none; }
+  .txt-underline { text-decoration: underline; }
   .txt-tight-lines { line-height: 1.2; }
   .txt-nowrap { white-space: nowrap; }
   .txt-break { word-break: break-word; }
diff --git a/app/views/account/join_codes/edit.html.erb b/app/views/account/join_codes/edit.html.erb
index e93191e10..febe6ab67 100644
--- a/app/views/account/join_codes/edit.html.erb
+++ b/app/views/account/join_codes/edit.html.erb
@@ -1,44 +1,33 @@
-<% @page_title = "Edit Join Code" %>
+<% @page_title = "Change usage limit" %>
 
 <% content_for :header do %>
   <%= render "filters/menu" %>
-  <div class="header__actions header__actions--start">
+  <div class="header__title">
     <%= link_to account_join_code_path, class: "btn borderless txt-medium", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
-      <span class="overflow-ellipsis">&larr; <strong>Join Code</strong></span>
+      <span class="overflow-ellipsis">&larr; <strong>Invite link</strong></span>
     <% end %>
   </div>
-
-  <h1 class="header__title"><%= @page_title %></h1>
 <% end %>
 
-<article
-  class="panel center txt-align-start"
-  style="view-transition-name: <%= dom_id(@join_code) %>"
->
+<article class="panel center shadow flex flex-column gap-half" style="view-transition-name: <%= dom_id(@join_code) %>">
+  <header class="margin-block-end-half">
+    <h2 class="txt-large margin-none font-weight-black"><%= @page_title %></h2>
+    <p class="txt-medium margin-none">How many times can this link be used to join the account?</p>
+  </header>
   <%= form_with model: @join_code, url: account_join_code_path, method: :patch, data: { controller: "form" }, html: { class: "flex flex-column gap" } do |form| %>
-    <div class="flex flex-column gap-half">
-      <%= form.label :usage_limit do %>
-        <strong>Usage limit</strong>
-        <br>
+    <%= form.number_field :usage_limit,
+          required: true,
+          autofocus: true,
+          min: @join_code.usage_count,
+          class: "input center txt-large fit-content font-weight-black",
+          data: { action: "keydown.esc@document->form#cancel focus->form#select" } %>
 
-        <p class="margin-none txt-x-small txt-subtle">
-          How many times can this code be used to join the account?
-        </p>
-      <% end %>
-
-      <%= form.number_field :usage_limit,
-            required: true,
-            autofocus: true,
-            min: @join_code.usage_count,
-            class: "input",
-            data: { action: "keydown.esc@document->form#cancel" } %>
-      <p class="margin-none txt-x-small txt-subtle">
-        Current usage: <%= @join_code.usage_count %>. You can only increase the limit to allow more uses.
-      </p>
-    </div>
+    <p class="margin-none txt-subtle">
+      This code has been used <%= @join_code.usage_count %>/<%= @join_code.usage_limit %> times.
+    </p>
 
     <%= form.button type: :submit, class: "btn btn--link center txt-medium" do %>
-      <span>Update join code</span>
+      <span>Save changes</span>
     <% end %>
 
     <%= link_to "Go back", account_join_code_path, data: { form_target: "cancel" }, hidden: true %>
diff --git a/app/views/account/join_codes/show.html.erb b/app/views/account/join_codes/show.html.erb
index b33d283be..7a4b22129 100644
--- a/app/views/account/join_codes/show.html.erb
+++ b/app/views/account/join_codes/show.html.erb
@@ -1,87 +1,68 @@
-<% @page_title = "Join Code" %>
+<% @page_title = "Add people" %>
 
 <% content_for :header do %>
   <%= render "filters/menu" %>
-  <h1 class="header__title"><%= @page_title %></h1>
+  <div class="header__title">
+    <%= link_to account_settings_path, class: "btn borderless txt-medium", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
+      <span class="overflow-ellipsis">&larr; <strong>Account Settings</strong></span>
+    <% end %>
+  </div>
 <% end %>
 
-<article
-  class="panel center txt-align-start"
-  style="view-transition-name: <%= dom_id(@join_code) %>"
->
-  <div class="flex flex-column gap">
-    <div class="flex align-center gap-half">
-      <h2 class="txt-large margin-none flex-item-grow">
-        <code><%= @join_code.code %></code>
-      </h2>
-      <% if @join_code.active? %>
-        <span class="badge badge--positive">Active</span>
-      <% else %>
-        <span class="badge badge--subtle">Used up</span>
+<div class="panel shadow center flex flex-column gap" style="view-transition-name: <%= dom_id(@join_code) %>">
+  <header>
+    <h2 class="txt-large margin-none font-weight-black"><%= @page_title %></h2>
+    <p class="txt-medium margin-none">Share the link below to invite people to this account</p>
+  </header>
+
+  <% url = join_url(join_code: @join_code.code, script_name: "/#{@join_code.tenant}") %>
+  <div class="flex align-center gap-half">
+    <input type="text" class="input flex-item-grow" value="<%= url %>" readonly>
+    <%= button_to account_join_code_path, method: :delete, class: "btn btn--circle txt-small",
+          data: { turbo_confirm: "Are you sure you want to generate a new link? The previous code will stop working." } do %>
+      <%= icon_tag "refresh" %>
+      <span class="for-screen-reader">Generate a new code</span>
+    <% end %>
+  </div>
+
+  <div class="center flex align-center gap">
+    <%= tag.button class: "btn btn--link", data: {
+        controller: "copy-to-clipboard", action: "copy-to-clipboard#copy",
+        copy_to_clipboard_success_class: "btn--success", copy_to_clipboard_content_value: url } do %>
+
+      <%= icon_tag "copy-paste" %>
+      <span class="txt-nowrap">Copy invite link</span>
+    <% end %>
+
+    <div data-controller="dialog" data-dialog-modal-value="true" class="flex-inline">
+      <%= tag.button class: "btn", data: { action: "dialog#open" } do %>
+        <%= icon_tag "qr-code" %>
+        <span>Get QR code</span>
       <% end %>
-    </div>
 
-    <div class="flex flex-column gap-half">
-      <div>
-        <strong class="txt-small">Usage</strong>
-        <p class="margin-none txt-subtle">
-          <%= @join_code.usage_count %>
-          of
-          <%= @join_code.usage_limit %>
-          uses
-          <% if @join_code.active? %>
-            (
-            <%= @join_code.usage_limit - @join_code.usage_count %>
-            remaining)
-          <% end %>
-        </p>
-      </div>
-    </div>
+      <dialog class="dialog panel shadow" data-dialog-target="dialog">
+        <p class="margin-none-block-start"><strong>Scan this code with the camera on your mobile device</strong></p>
 
-    <hr class="separator">
-
-    <div class="flex flex-column gap-half">
-      <strong class="txt-small">Join URL</strong>
-
-      <% url = join_url(join_code: @join_code.code, script_name: "/#{@join_code.tenant}") %>
-      <div class="flex align-center gap-half">
-        <input
-          type="text"
-          class="input flex-item-grow"
-          value="<%= url %>"
-          readonly
-        >
-        <%= button_to_copy_to_clipboard(url) do %>
-          <%= icon_tag "copy-paste" %>
-          <span class="for-screen-reader">Copy join link</span>
-        <% end %>
-      </div>
-
-      <p class="margin-none txt-x-small txt-subtle">
-        Share this URL with people you want to invite to your account.
-      </p>
-
-      <div
-        class="txt-align-center margin-block-start"
-        style="max-width: 200px; margin-inline: auto;"
-      >
         <%= qr_code_image(url) %>
-      </div>
-    </div>
 
-    <hr class="separator">
-
-    <div class="flex gap-half">
-      <%= link_to edit_account_join_code_path, class: "btn btn--secondary txt-small" do %>
-        <%= icon_tag "edit" %>
-        <span>Edit limit</span>
-      <% end %>
-
-      <%= button_to account_join_code_path, method: :delete, class: "btn btn--negative txt-small",
-            data: { turbo_confirm: "Are you sure you want to regenerate this join code? The old code will no longer work." } do %>
-        <%= icon_tag "refresh" %>
-        <span>Regenerate</span>
-      <% end %>
+        <form method="dialog" class="margin-block-start flex justify-center">
+          <button class="btn">
+            <span>Done</span>
+          </button>
+        </form>
+      </dialog>
     </div>
   </div>
-</article>
+
+  <footer class="txt-small">
+    <hr class="separator--horizontal full-width margin-block" style="--border-color: var(--color-ink-lighter)">
+
+    <p class="margin-none <%= "txt-negative" if !@join_code.active? %>">
+      This code has been used <%= @join_code.usage_count %>/<%= @join_code.usage_limit %> times
+      (<%= @join_code.active? ? @join_code.usage_limit - @join_code.usage_count : "none" %> remaining)
+      <%= link_to edit_account_join_code_path, class: @join_code.active? ? "txt-link" : "txt-negative txt-underline" do %>
+        <span>Change limit</span>
+      <% end %>
+    </p>
+  </footer>
+</div>
\ No newline at end of file
diff --git a/app/views/account/settings/_users.html.erb b/app/views/account/settings/_users.html.erb
index 62cdc2de4..631cfddf0 100644
--- a/app/views/account/settings/_users.html.erb
+++ b/app/views/account/settings/_users.html.erb
@@ -5,7 +5,7 @@
      navigable-list-actionable-items-value="true">
   <h2 class="divider txt-large">People on the account</h2>
 
-  <%= link_to account_join_code_path, class: "btn btn--link center" do %>
+  <%= link_to account_join_code_path, class: "btn btn--link center txt-small" do %>
     <%= icon_tag "add" %>
     <span>Add people</span>
   <% end %>