diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index f92cdf31dc..ef354de6fb 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -319,6 +319,7 @@ summary {
 @import 'components/banners';
 @import 'components/buttons';
 @import 'components/cards';
+@import 'components/card_grants';
 @import 'components/checks';
 @import 'components/comments';
 @import 'components/conversation';
diff --git a/app/assets/stylesheets/components/_card_grants.scss b/app/assets/stylesheets/components/_card_grants.scss
new file mode 100644
index 0000000000..d1f38ec2ca
--- /dev/null
+++ b/app/assets/stylesheets/components/_card_grants.scss
@@ -0,0 +1,982 @@
+// Card grant page. Built on `.card`, the HCB palette and `card--background-image`
+// so it sits inside HCB, but with more air and bigger numbers than the dense
+// `.details` lists — this page is read by grantees, not accountants.
+
+$grant-hairline: rgba(200, 200, 200, 0.35);
+
+// Bordered tile shared by the help articles and the controls. An inset shadow
+// rather than a border, so the outline doesn't add to the tile's size.
+@mixin grant-tile {
+  position: relative;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.875rem;
+  box-shadow: inset 0 0 0 1px rgba(140, 150, 165, 0.3);
+
+  html[data-dark='true'] & {
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
+  }
+}
+
+@mixin grant-hairline($side) {
+  border-#{$side}: 1px solid $grant-hairline;
+
+  html[data-dark='true'] & {
+    border-#{$side}-color: rgba(255, 255, 255, 0.125);
+  }
+}
+
+.grant-hero {
+  padding: 1.75rem;
+
+  // The shared wash only fades to near-white at the very bottom, but the
+  // grant's numbers sit higher up, so wash the whole hero evenly instead.
+  &.card.card--background-image {
+    background-image:
+      linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.96)),
+      var(--bg-image) !important;
+
+    html[data-dark='true'] & {
+      background-image:
+        linear-gradient(rgba(37, 36, 41, 0.85), rgba(37, 36, 41, 0.94)),
+        var(--bg-image) !important;
+    }
+  }
+
+  @media (max-width: 40em) {
+    padding: 1.25rem;
+  }
+}
+
+// Status on the left, the organizer's actions on the right.
+.grant-hero__top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 0.75rem 1rem;
+  margin-bottom: 1.25rem;
+}
+
+// Secondary text over the background image: `.muted` is too faint to read there.
+.grant-hero__soft {
+  color: mix($slate, $muted, 60%);
+
+  html[data-dark='true'] & {
+    color: $smoke-dark;
+  }
+}
+
+.grant-hero__grid {
+  display: grid;
+  gap: 1.5rem;
+  grid-template-columns: minmax(0, 1fr);
+
+  @media (min-width: 56em) {
+    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
+    gap: 2.5rem;
+  }
+}
+
+.grant-hero__aside {
+  @include grant-hairline(top);
+  padding-top: 1.25rem;
+
+  @media (min-width: 56em) {
+    border-top: 0;
+    padding-top: 0;
+    padding-left: 2.5rem;
+    @include grant-hairline(left);
+  }
+}
+
+.grant-hero__amount {
+  display: block;
+  margin: 0;
+  font-size: 3.25rem;
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: -0.035em;
+  font-variant-numeric: tabular-nums;
+
+  @media (max-width: 40em) {
+    font-size: 2.5rem;
+  }
+}
+
+.grant-hero__date {
+  margin: 0;
+  font-size: 1.625rem;
+  font-weight: 700;
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+}
+
+// How much of the grant is still yours to spend.
+.grant-meter {
+  height: 8px;
+  border-radius: 999px;
+  background-color: rgba(map-get($palette, muted), 0.25);
+  overflow: hidden;
+
+  html[data-dark='true'] & {
+    background-color: rgba(255, 255, 255, 0.2);
+  }
+}
+
+.grant-meter__fill {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background-color: map-get($palette, success);
+  transition: width 0.25s ease-in-out;
+
+  &.grant-meter__fill--muted {
+    background-color: map-get($palette, muted);
+  }
+}
+
+// Compact label / value pairs stacked in the hero aside. Rows grow when a long
+// value wraps rather than colliding with the row beneath them.
+.grant-meta {
+  display: grid;
+  gap: 0.375rem;
+}
+
+.grant-meta > div {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 1rem;
+  min-height: 1.625rem;
+}
+
+.grant-meta__label {
+  flex: 0 0 auto;
+  white-space: nowrap;
+}
+
+.grant-meta__value {
+  min-width: 0;
+  text-align: right;
+  overflow-wrap: anywhere;
+
+  // `.mention` carries a trailing margin meant for inline prose; drop it so
+  // avatars line up flush with the values above and below.
+  &.mention,
+  .mention {
+    margin-right: 0;
+  }
+}
+
+// State notices (canceled, frozen, instructions, fraud check…) stack under the
+// hero with one gap between them, whatever margins the callout partial brings.
+.grant-notices {
+  display: grid;
+  gap: 0.75rem;
+  margin-top: 1rem;
+
+  > .card {
+    margin: 0;
+  }
+}
+
+.grant-section {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.625rem;
+  margin: 2.5rem 0 0.875rem;
+  font-size: 1.375rem;
+}
+
+.grant-section__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 2rem;
+  height: 2rem;
+  font-size: 17px;
+  font-weight: 900;
+  border-radius: var(--radius-xl);
+  background: rgba(map-get($palette, muted), 0.15);
+  color: map-get($palette, slate);
+
+  html[data-dark='true'] & {
+    color: map-get($palette, smoke);
+  }
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+}
+
+// Card artwork beside its numbers, then the controls. Laid out against the
+// section's own width (not the viewport) since the sidebar and admin tools
+// change how much room it gets at any given screen size.
+.grant-pay {
+  container: grant-pay / inline-size;
+  display: grid;
+  gap: 0.75rem;
+}
+
+.grant-panel {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  margin: 0;
+  padding: 0;
+
+  // Any narrower than 21rem and the card artwork wraps its own number.
+  @container grant-pay (min-width: 46rem) {
+    grid-template-columns: 21rem minmax(0, 1fr);
+  }
+}
+
+.grant-panel__art {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 1.5rem;
+
+  .btn {
+    max-width: 20rem;
+    margin-inline: auto;
+  }
+}
+
+.grant-panel__fields {
+  display: grid;
+  align-content: center;
+  gap: 1.5rem;
+  padding: 1.25rem 1.5rem;
+  @include grant-hairline(top);
+
+  @container grant-pay (min-width: 46rem) {
+    border-top: 0;
+    @include grant-hairline(left);
+  }
+
+  // Wide enough for card and billing details side by side.
+  @container grant-pay (min-width: 72rem) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    column-gap: 2rem;
+  }
+}
+
+// Heading inside a card, one step below the page's `.grant-section`.
+.grant-subheading {
+  margin: 0 0 0.5rem;
+  font-size: 1.125rem;
+}
+
+.grant-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.125rem 1.5rem;
+  min-height: 2.5rem;
+  padding: 0.375rem 0;
+
+  + .grant-row {
+    @include grant-hairline(top);
+  }
+}
+
+.grant-row__label {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  flex: 0 0 auto;
+  color: map-get($palette, muted);
+}
+
+// On a narrow screen a long value drops below its label but stays right-aligned.
+.grant-row__value {
+  margin-left: auto;
+  min-width: 0;
+  font-weight: 600;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  overflow-wrap: anywhere;
+}
+
+.grant-controls {
+  margin: 0;
+  padding: 1.25rem 1.5rem 1.5rem;
+}
+
+// Tiles like the help articles below. Stacked full-width rows on phones, with
+// the icon beside the copy; once there's room, one row of icon-on-top tiles.
+.grant-controls__grid {
+  display: grid;
+  gap: 0.625rem;
+  margin-top: 0.875rem;
+
+  .grant-action {
+    @include grant-tile;
+    flex-direction: row;
+    align-items: center;
+    height: 100%;
+  }
+
+  @container grant-pay (min-width: 40rem) {
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(0, 1fr);
+
+    .grant-action {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    .grant-action__arrow {
+      position: absolute;
+      top: 0.5rem;
+      right: 0.5rem;
+      transform: translate(-3px, 3px);
+    }
+  }
+}
+
+// Help card: the help center articles as tiles, then the org's own support
+// as a slim tinted strip along the bottom.
+.grant-help {
+  display: grid;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+
+  > .grant-action {
+    padding: 0.875rem 1.5rem;
+    border-radius: 0;
+  }
+
+  // Under the tiles it's a footer: tinted, and "Still stuck?" runs into its
+  // description on one line instead of stacking.
+  > .grant-answers + .grant-action {
+    background: rgba(140, 150, 165, 0.08);
+    @include grant-hairline(top);
+
+    &:hover:not(:disabled),
+    &:focus-visible {
+      background: rgba(140, 150, 165, 0.14);
+    }
+
+    .grant-action__text {
+      flex-direction: row;
+      flex-wrap: wrap;
+      align-items: baseline;
+      column-gap: 0.375rem;
+    }
+  }
+}
+
+.grant-answers {
+  padding: 1.25rem 1.5rem 1.5rem;
+}
+
+// As many columns as fit (all five on a full-width page), wrapping on phones.
+.grant-answers__row {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
+  gap: 0.625rem;
+  margin-top: 0.875rem;
+}
+
+// A help tile's or control's colour shows in its icon, and washes over the
+// whole thing on hover.
+.grant-answer,
+.grant-action {
+  --tone: #{map-get($palette, muted)};
+  --tone-wash: #{rgba(map-get($palette, muted), 0.08)};
+  --tone-soft: #{rgba(map-get($palette, muted), 0.14)};
+
+  @each $tone in (primary, warning, success, info, purple, accent) {
+    &.grant-tone--#{'' + $tone} {
+      --tone: #{map-get($palette, $tone)};
+      --tone-wash: #{rgba(map-get($palette, $tone), 0.08)};
+      --tone-soft: #{rgba(map-get($palette, $tone), 0.14)};
+    }
+  }
+}
+
+.grant-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 0.625rem;
+  color: var(--tone);
+  background: var(--tone-soft);
+}
+
+// An arrow slides in on hover to say the tile opens the help center.
+.grant-answer {
+  @include grant-tile;
+  display: flex;
+  border-radius: var(--radius-lg);
+  background: transparent;
+  color: inherit;
+  text-decoration: none;
+  transition: background-color 0.15s ease;
+
+  &:hover,
+  &:focus {
+    color: inherit;
+  }
+
+  &:hover,
+  &:focus-visible {
+    background: var(--tone-wash);
+
+    html[data-dark='true'] & {
+      background: var(--tone-wash);
+    }
+
+    .grant-answer__arrow {
+      opacity: 1;
+      transform: none;
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--tone);
+    outline-offset: 2px;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+
+.grant-answer__label {
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+// The arrow glyph only fills the middle third of its icon, so the icon is
+// drawn large and tucked into the corner.
+.grant-answer__arrow {
+  position: absolute;
+  top: 0.25rem;
+  right: 0.25rem;
+  display: inline-flex;
+  color: var(--tone);
+  opacity: 0;
+  transform: translate(-3px, 3px);
+  transition:
+    opacity 0.15s ease,
+    transform 0.15s ease;
+}
+
+.grant-section-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 0.5rem 1rem;
+  margin: 2.5rem 0 0.875rem;
+
+  > .grant-section {
+    margin: 0;
+  }
+}
+
+// Horizontal strip of facts, hairline-separated.
+.grant-strip {
+  display: flex;
+  flex-wrap: wrap;
+
+  > div {
+    flex: 1 1 9rem;
+    padding: 0.25rem 1.25rem;
+    @include grant-hairline(left);
+
+    &:first-child {
+      padding-left: 0;
+      border-left: 0;
+    }
+
+    @media (max-width: 40em) {
+      flex-basis: 45%;
+      padding: 0.5rem 0.75rem;
+
+      &:nth-child(odd) {
+        padding-left: 0;
+        border-left: 0;
+      }
+    }
+  }
+}
+
+.grant-strip__label {
+  display: block;
+  margin: 0 0 0.125rem;
+  font-size: 0.875rem;
+  color: map-get($palette, muted);
+}
+
+.grant-strip__value {
+  margin: 0;
+  font-weight: 600;
+  line-height: 1.35;
+  overflow-wrap: anywhere;
+}
+
+// A long merchant or category list would otherwise stretch its strip cell into
+// a tall single column, so past a couple of entries the cell shows a count and
+// the entries move to a full-width drawer under the strip. CSS-only: each
+// drawer has a hidden checkbox ahead of the strip, and the count label toggles
+// it — so it works without JS and survives Turbo caching.
+.grant-drawer__toggle {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.grant-disclosure {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.125rem;
+  cursor: pointer;
+  user-select: none;
+  color: map-get($palette, info);
+
+  html[data-dark='true'] & {
+    color: lighten($blue, 12%);
+  }
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.grant-disclosure__caret {
+  transition: transform 0.15s ease;
+}
+
+.grant-drawer {
+  display: none;
+  margin-top: 1rem;
+  padding-top: 1rem;
+  @include grant-hairline(top);
+}
+
+.grant-drawer__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 0.5rem;
+}
+
+.grant-drawer__close {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  cursor: pointer;
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: map-get($palette, muted);
+
+  &:hover {
+    color: map-get($palette, slate);
+  }
+}
+
+.grant-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  // Dozens of merchants stay inside one predictable block instead of pushing
+  // the rest of the page down.
+  max-height: 13rem;
+  overflow-y: auto;
+}
+
+.grant-chip {
+  padding: 0.25rem 0.625rem;
+  border-radius: 999px;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  line-height: 1.35;
+  max-width: 100%;
+  overflow-wrap: anywhere;
+  background: rgba(140, 150, 165, 0.12);
+
+  html[data-dark='true'] & {
+    background: rgba(255, 255, 255, 0.08);
+  }
+}
+
+@each $key in ('merchants', 'categories') {
+  ##{'grant-' + $key}:checked {
+    ~ ##{'grant-' + $key}-drawer {
+      display: block;
+    }
+
+    ~ .grant-strip
+      .grant-disclosure[for='#{'grant-' + $key}']
+      .grant-disclosure__caret {
+      transform: rotate(180deg);
+    }
+  }
+}
+
+.grant-limits__note {
+  margin: 1rem -1rem -1rem;
+  padding: 0.5rem 1rem;
+  border-radius: 0 0 0.5rem 0.5rem;
+  background: rgba(140, 150, 165, 0.1);
+  @include grant-hairline(top);
+}
+
+// Pre-authorization: the cart-screenshot dropzone and its uploads share one
+// panel, so an empty dropzone reads as part of the step rather than a stray box.
+$grant-upload-height: 11.5rem;
+
+.grant-upload {
+  padding: 0;
+}
+
+.grant-upload__grid {
+  display: flex;
+  flex-direction: column;
+
+  @media (min-width: 56em) {
+    flex-direction: row;
+    align-items: stretch;
+  }
+}
+
+.grant-upload__drop {
+  flex: 0 0 auto;
+  padding: 1.25rem;
+
+  @media (min-width: 56em) {
+    flex-basis: 19rem;
+  }
+}
+
+.grant-upload__dropzone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.625rem;
+  height: 100%;
+  min-height: $grant-upload-height;
+  padding: 1.25rem;
+  text-align: center;
+  border: 2px dashed $grant-hairline;
+  border-radius: var(--radius-lg);
+  background-color: rgba(map-get($palette, smoke), 0.35);
+  transition: 0.125s ease-in-out;
+  transition-property: border-color, background-color;
+
+  html[data-dark='true'] & {
+    border-color: rgba(255, 255, 255, 0.15);
+    background-color: rgba(255, 255, 255, 0.03);
+  }
+
+  &:hover {
+    border-color: rgba(map-get($palette, info), 0.5);
+  }
+}
+
+.grant-upload__dropzone-icon {
+  color: map-get($palette, muted);
+}
+
+.grant-upload__list {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  gap: 0.75rem;
+  min-width: 0;
+  min-height: $grant-upload-height;
+  padding: 1.25rem;
+  overflow-x: auto;
+}
+
+// Only hairline the two apart when the dropzone is actually there — once the
+// pre-authorization is submitted the list stands alone.
+.grant-upload__drop + .grant-upload__list {
+  @include grant-hairline(top);
+
+  @media (min-width: 56em) {
+    border-top: 0;
+    @include grant-hairline(left);
+  }
+}
+
+// Nothing uploaded yet: let the dropzone have the whole panel rather than
+// pairing it with an empty gallery. Browsers without `:has()` keep the split.
+.grant-upload__grid:has(.grant-upload__empty) {
+  .grant-upload__drop {
+    flex: 1 1 auto;
+  }
+
+  .grant-upload__drop + .grant-upload__list {
+    display: none;
+  }
+}
+
+.grant-upload__thumb {
+  display: block;
+  flex: 0 0 auto;
+  height: $grant-upload-height;
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  box-shadow: var(--shadow-border-sm);
+  transition: transform 0.125s ease-in-out;
+
+  &:hover {
+    transform: translateY(-2px);
+  }
+
+  img {
+    display: block;
+    height: 100%;
+    width: auto;
+    max-width: none;
+  }
+}
+
+.grant-upload__empty {
+  flex: 1 1 auto;
+  align-self: center;
+  text-align: center;
+}
+
+.grant-upload__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 0.5rem 1rem;
+  padding: 0.75rem 1.25rem;
+  font-size: 0.875rem;
+  @include grant-hairline(top);
+
+  a {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+}
+
+// Step 3: the explainer and its call to action sit on one line where there's room.
+.grant-submit {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 1rem;
+
+  p {
+    flex: 1 1 22rem;
+  }
+
+  .btn {
+    flex: 0 0 auto;
+  }
+}
+
+// One control. The whole row is the button (or link): an icon in the
+// control's colour, its copy, and an arrow that slides in on hover.
+.grant-action {
+  display: flex;
+  align-items: center;
+  gap: 0.875rem;
+  width: 100%;
+  margin: 0;
+  padding: 0.75rem;
+  border: 0;
+  border-radius: var(--radius-lg);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background-color 0.125s ease-in-out;
+
+  // Some rows are links: beat the global `a:hover, a:focus` slate, which is
+  // near-invisible in dark mode and sticks after a modal trigger is clicked.
+  &:hover,
+  &:focus {
+    color: inherit;
+  }
+
+  &:hover:not(:disabled),
+  &:focus-visible {
+    background-color: var(--tone-wash);
+
+    .grant-action__arrow {
+      opacity: 1;
+      transform: none;
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--tone);
+    outline-offset: -2px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}
+
+.grant-action__text {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 0.125rem;
+  min-width: 0;
+}
+
+.grant-action__title {
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.grant-action__desc {
+  font-size: 0.875rem;
+  line-height: 1.35;
+  color: map-get($palette, muted);
+}
+
+.grant-action__arrow {
+  flex: 0 0 auto;
+  color: var(--tone);
+  opacity: 0;
+  transform: translateX(-3px);
+  transition:
+    opacity 0.15s ease,
+    transform 0.15s ease;
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+
+.grant-comments__summary {
+  cursor: pointer;
+  list-style: none;
+
+  &::-webkit-details-marker {
+    display: none;
+  }
+
+  &::before {
+    content: '';
+    display: inline-block;
+    flex: 0 0 auto;
+    width: 0.45rem;
+    height: 0.45rem;
+    margin-right: 0.625rem;
+    border-right: 2px solid map-get($palette, muted);
+    border-bottom: 2px solid map-get($palette, muted);
+    transform: rotate(-45deg);
+    transition: transform 0.15s ease-in-out;
+  }
+
+  .grant-section {
+    display: inline-flex;
+    vertical-align: middle;
+  }
+}
+
+.grant-comments[open] > .grant-comments__summary::before {
+  transform: rotate(45deg);
+}
+
+.grant-comments__count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.5rem;
+  padding: 0 0.4rem;
+  font-size: 0.875rem;
+  font-weight: 700;
+  line-height: 1.5rem;
+  border-radius: var(--radius-xl);
+  background: rgba(map-get($palette, muted), 0.15);
+  color: map-get($palette, slate);
+
+  html[data-dark='true'] & {
+    color: map-get($palette, smoke);
+  }
+}
+
+.grant-comments__body {
+  margin-top: 0.875rem;
+}
+
+// Activation pledges. Each statement is a full-width clickable row rather than
+// a bare checkbox, and lights up once it's been agreed to.
+.grant-pledge {
+  padding: 0;
+  overflow: hidden;
+}
+
+.grant-pledge__row {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.875rem;
+  margin: 0;
+  padding: 1rem 1.25rem;
+  font-weight: 400;
+  line-height: 1.45;
+  cursor: pointer;
+  transition: background-color 0.125s ease-in-out;
+
+  + .grant-pledge__row {
+    @include grant-hairline(top);
+  }
+
+  &:hover {
+    background-color: rgba(140, 150, 165, 0.06);
+  }
+
+  &:has(input:checked) {
+    background-color: rgba(map-get($palette, success), 0.06);
+  }
+
+  input[type='checkbox'] {
+    flex: 0 0 auto;
+    width: 1.125rem;
+    height: 1.125rem;
+    margin: 0.125rem 0 0;
+    accent-color: map-get($palette, success);
+    cursor: pointer;
+  }
+}
+
+.grant-pledge__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 0.75rem 1rem;
+  padding: 1rem 1.25rem;
+  font-size: 0.875rem;
+  background: rgba(140, 150, 165, 0.06);
+  @include grant-hairline(top);
+
+  .btn {
+    flex: 0 0 auto;
+  }
+}
diff --git a/app/controllers/card_grants_controller.rb b/app/controllers/card_grants_controller.rb
index 6fac2a34de..9719faa5c5 100644
--- a/app/controllers/card_grants_controller.rb
+++ b/app/controllers/card_grants_controller.rb
@@ -154,10 +154,6 @@ def bulk_upload_template
               disposition: "attachment"
   end
 
-  def edit_overview
-    authorize @card_grant
-  end
-
   def edit_purpose
     authorize @card_grant
   end
diff --git a/app/policies/card_grant_policy.rb b/app/policies/card_grant_policy.rb
index c355d5ad84..f67b0e9c66 100644
--- a/app/policies/card_grant_policy.rb
+++ b/app/policies/card_grant_policy.rb
@@ -21,17 +21,16 @@ def spending?
     record.event.is_public? || user&.auditor? || user_in_event?
   end
 
-  def edit_overview?
+  def edit_purpose?
     auditor_or_member? && record.active?
   end
 
-  alias_method :edit_actions?, :edit_overview?
-  alias_method :edit_usage_restrictions?, :edit_overview?
-  alias_method :edit_expiration?, :edit_overview?
-  alias_method :edit_purpose?, :edit_overview?
-  alias_method :edit_balance?, :edit_overview?
-  alias_method :edit_topup?, :edit_overview?
-  alias_method :edit_withdraw?, :edit_overview?
+  alias_method :edit_actions?, :edit_purpose?
+  alias_method :edit_usage_restrictions?, :edit_purpose?
+  alias_method :edit_expiration?, :edit_purpose?
+  alias_method :edit_balance?, :edit_purpose?
+  alias_method :edit_topup?, :edit_purpose?
+  alias_method :edit_withdraw?, :edit_purpose?
 
   def activate?
     (user&.admin? || (cardholder? && authorized_to_activate?)) && record.active?
diff --git a/app/views/card_grant/pre_authorizations/_screenshot_count.html.erb b/app/views/card_grant/pre_authorizations/_screenshot_count.html.erb
index 31a05ac5d0..18b8fdc634 100644
--- a/app/views/card_grant/pre_authorizations/_screenshot_count.html.erb
+++ b/app/views/card_grant/pre_authorizations/_screenshot_count.html.erb
@@ -1,10 +1,14 @@
+<%# locals: (count:, card_grant:, disabled:) %>
+
 <% url = clear_screenshots_card_grant_pre_authorizations_path(card_grant) %>
 
-<div id="screenshot_count">
-    <small class="muted">
-        <%= pluralize(count, "screenshot") %> uploaded
-        <% if count >= 1 && !disabled %>
-            • <%= link_to "Remove all", url, class: "remove-screenshots", data: { turbo_method: :post } %>
+<div id="screenshot_count" class="grant-upload__footer">
+    <span class="muted"><%= pluralize(count, "screenshot") %> uploaded</span>
+
+    <% if count >= 1 && !disabled %>
+        <%= link_to url, class: "remove-screenshots", data: { turbo_method: :post } do %>
+            <%= inline_icon "view-close-small", size: 20 %>
+            Remove all
         <% end %>
-    </small>
+    <% end %>
 </div>
diff --git a/app/views/card_grant/pre_authorizations/_screenshot_form.html.erb b/app/views/card_grant/pre_authorizations/_screenshot_form.html.erb
index 6307de74cf..d7280f45d3 100644
--- a/app/views/card_grant/pre_authorizations/_screenshot_form.html.erb
+++ b/app/views/card_grant/pre_authorizations/_screenshot_form.html.erb
@@ -1,78 +1,63 @@
-<div id="screenshot_upload_form" class="flex-shrink-0 h-[200px]">
-  <div class="<%= "mb3" if defined?(include_spacing) %> h-100" style="position: relative;">
-    <%= form_with model: false, url: card_grant_pre_authorizations_path, method: :patch, remote: true, class: "flex flex-col justify-center h-100", data: {
-          turbo: defined?(turbo) ? turbo : "false",
-          controller: "file-drop form",
-          action: defined?(disabled) && disabled ? "" : "
-            dragover@window->file-drop#dragover
-            drop@window->file-drop#drop
-            dragenter@window->file-drop#dragenter
-            dragleave@window->file-drop#dragleave
-          ",
+<%# Cart screenshot dropzone. Rendered inline on the pre-authorization page and
+    swapped wholesale by the controller's turbo stream after an upload, so the
+    layout classes live on the outermost element. %>
 
-          "file-drop-title-value" => "Drop to add a screenshot.",
-          "file-drop-global-paste-value" => "true"
-        }.compact, html: {
-          onsubmit: "
-            const button = $('#upload-screenshot-button', this);
-            $('span', button).text('Uploading...');
-            button.attr('disabled', 'disabled');
-          "
-        } do |form| %>
+<div id="screenshot_upload_form" class="grant-upload__drop">
+  <%= form_with model: false, url: card_grant_pre_authorizations_path, method: :patch, remote: true, class: "h-100", data: {
+        turbo: defined?(turbo) ? turbo : "false",
+        controller: "file-drop form",
+        action: local_assigns[:disabled] ? "" : "
+          dragover@window->file-drop#dragover
+          drop@window->file-drop#drop
+          dragenter@window->file-drop#dragenter
+          dragleave@window->file-drop#dragleave
+        ",
 
-      <div class="card h-100 flex flex-col<%= " pt0" if defined?(show_banner) && defined?(uploaded_files) && uploaded_files.any? %> justify-center px-8" id="upload_screenshot_form">
-        <% if defined?(show_banner) %>
-          <% if defined?(uploaded_files) && uploaded_files.any? %>
-            <p class="card__banner bg-success white bold flex items-center mt0 mb2">
-              <%= inline_icon "checkmark", size: 24, class: "mr2" %>
-              <%= pluralize uploaded_files.count, "screenshot" %>
-              added
-            </p>
-          <% end %>
-        <% end %>
-        <div class="container container--md pt2">
+        "file-drop-title-value" => "Drop to add a screenshot.",
+        "file-drop-global-paste-value" => "true"
+      }.compact, html: {
+        onsubmit: "
+          const button = $('#upload-screenshot-button', this);
+          $('span', button).text('Uploading...');
+          button.attr('disabled', 'disabled');
+        "
+      } do |form| %>
+
+    <div class="grant-upload__dropzone" id="upload_screenshot_form">
+      <%= form.file_field :screenshot,
+                          multiple: true,
+                          include_hidden: false,
+                          required: true,
+                          class: "display-none",
+                          accept: "image/*,image/heic,.pdf",
+                          direct_upload: true,
+                          data: {
+                            "file-drop-target" => "fileInput",
+                            "action"           => "change->form#submit"
+                          } %>
 
-          <% if local_assigns[:redirect_url] %>
-            <%= form.hidden_field :redirect_url, value: local_assigns[:redirect_url] %>
-          <% end %>
-          <%= (form.hidden_field :pre_authorization_id, value: pre_authorization.id) if defined?(pre_authorization) %>
-          <%= (form.hidden_field :show_link, value: true) if defined?(inline_linking) %>
+      <%= inline_icon "photo", size: 28, class: "grant-upload__dropzone-icon" %>
 
-          <%= form.file_field :screenshot,
-                              multiple: true,
-                              include_hidden: false,
-                              required: true,
-                              class: "display-none",
-                              accept: "image/*,image/heic,.pdf",
-                              direct_upload: true,
-                              data: {
-                                "file-drop-target" => "fileInput",
-                                "action"           => "change->form#submit"
-                              } %>
-          <span class="flex items-center justify-center flex-row flex-wrap" style="margin: -8px;">
-            <%= form.label :screenshot, class: "btn m1 #{"bg-success" if local_assigns[:success]} #{"bg-error" if local_assigns[:error]}", id: "upload-screenshot-button", disabled: false do %>
-              <%= inline_icon "cloud-upload" %>
-              <% if local_assigns[:success] || local_assigns[:error] %>
-                <span id="upload-screenshot-button-text"><%= local_assigns[:success] || local_assigns[:error] %></span>
-                <script>
-                  // JavaScript to revert changes after 2 seconds
-                  setTimeout(function() {
-                    if (document.getElementById("upload-screenshot-button") && document.getElementById("upload-screenshot-button-text")) {
-                      document.getElementById("upload-screenshot-button-text").innerHTML = 'Upload screenshot';
-                      document.getElementById("upload-screenshot-button").classList.remove("bg-success", "bg-error");
-                    }
-                  }, 2000);
-                </script>
-              <% else %>
-                <span>Upload screenshot</span>
-              <% end %>
-            <% end %>
-          </span>
+      <%= form.label :screenshot, class: "btn #{"bg-success" if local_assigns[:success]} #{"bg-error" if local_assigns[:error]}", id: "upload-screenshot-button" do %>
+        <%= inline_icon "cloud-upload" %>
+        <% if local_assigns[:success] || local_assigns[:error] %>
+          <span id="upload-screenshot-button-text"><%= local_assigns[:success] || local_assigns[:error] %></span>
+          <script>
+            // JavaScript to revert changes after 2 seconds
+            setTimeout(function() {
+              if (document.getElementById("upload-screenshot-button") && document.getElementById("upload-screenshot-button-text")) {
+                document.getElementById("upload-screenshot-button-text").innerHTML = 'Upload screenshot';
+                document.getElementById("upload-screenshot-button").classList.remove("bg-success", "bg-error");
+              }
+            }, 2000);
+          </script>
+        <% else %>
+          <span>Upload screenshot</span>
+        <% end %>
+      <% end %>
 
-          <p class="center muted">Or drag & drop your screenshot here</p>
-        </div>
-      </div>
+      <p class="m-0 muted center">or drag, drop, or paste it here</p>
+    </div>
 
-    <% end %>
-  </div>
+  <% end %>
 </div>
diff --git a/app/views/card_grant/pre_authorizations/_screenshot_list.html.erb b/app/views/card_grant/pre_authorizations/_screenshot_list.html.erb
index 65bd38a4bd..52aa661be4 100644
--- a/app/views/card_grant/pre_authorizations/_screenshot_list.html.erb
+++ b/app/views/card_grant/pre_authorizations/_screenshot_list.html.erb
@@ -1,34 +1,40 @@
-<div id="screenshot_list" class="flex flex-row gap-4 h-[200px] w-full overflow-x-auto min-w-0">
-    <% screenshots.each do |screenshot| %>
-        <% file_path = rails_blob_path(screenshot, only_path: true, disposition: "inline") %>
-        <% if screenshot.image? %>
-            <% modal_id = "preview_screenshot_#{screenshot.id}" %>
-            <%= image_tag screenshot,
-                          class: "h-100 !w-min-content card min-w-0 !flex-shrink-0 pointer",
-                          alt: screenshot.filename,
-                          title: "Click to enlarge",
-                          data: { behavior: "modal_trigger", modal: modal_id } %>
+<%# locals: (screenshots:) %>
 
-            <section class="modal modal--scroll bg-snow modal--huge p0" data-behavior="modal" role="dialog" id="<%= modal_id %>" style="overflow: initial; z-index: 300;">
-                <a href="#close_modal" tabindex="0" class="pop modal__close muted absolute invisible md:visible" rel="modal:close" style="top: 0px; right: -24px; transform: translateY(50%); background: #11111199;">
-                    <%= inline_icon "view-close", size: 28, class: "pop modal__close muted m0" %>
-                </a>
-                <div class="bg-smoke dark:bg-darkless flex items-center justify-center" style="border-radius: 0.75rem; padding: 1.5rem; max-height: 85vh;">
+<div id="screenshot_list" class="grant-upload__list">
+    <% if screenshots.any? %>
+        <% screenshots.each do |screenshot| %>
+            <% if screenshot.image? %>
+                <% modal_id = "preview_screenshot_#{screenshot.id}" %>
+                <div class="grant-upload__thumb pointer">
                     <%= image_tag screenshot,
-                                  class: "card p0",
-                                  alt: screenshot.filename,
-                                  style: "object-fit: contain; width: auto; height: auto; max-width: 100%; max-height: calc(85vh - 3rem); min-width: 0px;" %>
+                                  alt: screenshot.filename.to_s,
+                                  title: "Click to enlarge",
+                                  data: { behavior: "modal_trigger", modal: modal_id } %>
                 </div>
-            </section>
-        <% else %>
-            <%= link_to file_path, target: "_blank", rel: "noopener", class: "card flex flex-col items-center justify-center h-100 px-4 !flex-shrink-0 min-w-0 pointer", title: "Open #{screenshot.filename}" do %>
-                <%= inline_icon "docs", size: 32, class: "muted" %>
-                <span class="muted h5 mt1 line-clamp-1"><%= screenshot.filename %></span>
+
+                <section class="modal modal--scroll bg-snow modal--huge p0" data-behavior="modal" role="dialog" id="<%= modal_id %>" style="overflow: initial; z-index: 300;">
+                    <a href="#close_modal" tabindex="0" class="pop modal__close muted absolute invisible md:visible" rel="modal:close" style="top: 0px; right: -24px; transform: translateY(50%); background: #11111199;">
+                        <%= inline_icon "view-close", size: 28, class: "pop modal__close muted m0" %>
+                    </a>
+                    <div class="bg-smoke dark:bg-darkless flex items-center justify-center" style="border-radius: 0.75rem; padding: 1.5rem; max-height: 85vh;">
+                        <%= image_tag screenshot,
+                                      class: "card p0",
+                                      alt: screenshot.filename.to_s,
+                                      style: "object-fit: contain; width: auto; height: auto; max-width: 100%; max-height: calc(85vh - 3rem); min-width: 0px;" %>
+                    </div>
+                </section>
+            <% else %>
+                <%= link_to rails_blob_path(screenshot, only_path: true, disposition: "inline"),
+                            target: "_blank",
+                            rel: "noopener",
+                            class: "grant-upload__thumb flex flex-col items-center justify-center px-4",
+                            title: "Open #{screenshot.filename}" do %>
+                    <%= inline_icon "docs", size: 32, class: "muted" %>
+                    <span class="muted h5 mt1 line-clamp-1"><%= screenshot.filename %></span>
+                <% end %>
             <% end %>
         <% end %>
-    <% end %>
-
-    <% if screenshots.empty? %>
-        <%= blankslate "No screenshots uploaded", class: "w-full flex items-center justify-center" %>
+    <% else %>
+        <p class="grant-upload__empty muted m-0">No screenshots uploaded yet</p>
     <% end %>
 </div>
diff --git a/app/views/card_grant/pre_authorizations/show.html.erb b/app/views/card_grant/pre_authorizations/show.html.erb
index 613117969d..485ce56eaf 100644
--- a/app/views/card_grant/pre_authorizations/show.html.erb
+++ b/app/views/card_grant/pre_authorizations/show.html.erb
@@ -1,53 +1,39 @@
 <% title "Grant to #{@card_grant.user.name}" %>
 <%= render "events/nav", selected: :transfers if organizer_signed_in? %>
+<%= render "users/nav", selected: :home unless organizer_signed_in? %>
 
 <%= turbo_stream_from @pre_authorization %>
 
-<% shimmer = @pre_authorization.submitted? %>
-
-<div class="card mt4 mb3 pb0">
-  <div class="card__banner card__banner--top flex justify-between items-center border-bottom divide-secondary <%= "card--background-image" if @event.background_image.attached? %>" style="<%= "--bg-image: url(#{url_for(@event.background_image).dump})" if @event.background_image.attached? %>">
-    <h3 class="h1 pt2 pb2 my0 color-black">
-      <%= @event.name %>
-      has granted you
-      <%= render_money @card_grant.amount %>
-      <% if @card_grant.purpose.present? %>
-        for <%= @card_grant.purpose %>
-      <% end %>
-    </h3>
-  </div>
-  <div class="flex flex-row items-center justify-start gap-2 mb2 lg:items-end">
-    <div class="flex items-start flex-col lg:flex-row lg:items-end justify-start gap-2">
-      <div class="flex flex-row items-end justify-start gap-2 w-min-content min-w-0 flex-shrink-0">
-        <h3 class="m-0 p-0">Pre-authorization</h3>
-        <%= inline_icon "view-forward", class: "m-0 lg:self-center", size: 20 %>
-      </div>
-      <p class="m-0">Before you can get spending, we need to know what you're planning&nbsp;to&nbsp;buy.</p>
-    </div>
-    <div class="flex-grow"></div>
-    <div class="flex flex-row items-center w-min-content flex-shrink-0">
-      <%= render partial: "card_grant/pre_authorizations/status_badge", locals: { pre_authorization: @pre_authorization, organizer: false } %>
+<% draft = @pre_authorization.draft? %>
+
+<%# The hero doubles as the page header: same grant summary the grantee sees on
+    the grant itself, with the pre-authorization step called out underneath. %>
+<% hero_footer = capture do %>
+  <div class="flex items-baseline flex-wrap justify-between gap-x-4 gap-y-1">
+    <div class="flex items-baseline flex-wrap gap-x-2">
+      <h3 class="m-0 p-0">Pre-authorization</h3>
+      <p class="m-0 muted">Before you can start spending, tell us what you're planning&nbsp;to&nbsp;buy.</p>
     </div>
+    <%= render partial: "card_grant/pre_authorizations/status_badge", locals: { pre_authorization: @pre_authorization, organizer: false } %>
   </div>
-</div>
+<% end %>
+
+<%= render partial: "card_grants/hero", locals: { card_grant: @card_grant, footer: hero_footer, show_actions: false } %>
 
 <% if @pre_authorization.authorized? %>
-  <div class="card flex flex-row gap-2 justify-between align-center mb3">
-    <h3 class="flex flex-row items-center m-0">
-      <%= inline_icon "checkmark", size: 24, class: "mr2 text-green" %>
-      Your card grant has been approved!
-    </h3>
-    <%= link_to "View card details", card_grant_path(@card_grant), class: "btn bg-success" %>
-  </div>
+  <%= render "application/callout", type: "success", title: "Your card grant has been approved!" do %>
+    <p class="m-0">You're all set — your card is ready to spend.</p>
+    <%= link_to "View card details", card_grant_path(@card_grant), class: "btn bg-success mt-3" %>
+  <% end %>
 <% end %>
 
 <% if @pre_authorization.fraudulent? && @pre_authorization.unauthorized? %>
-  <div class="card flex flex-row gap-2 justify-between align-center mb3">
-    <p class="flex flex-row items-center m-0">
-      <%= inline_icon "important", size: 24, class: "mr2 text-orange" %>
-      Your card grant has been flagged as fraudulent because it doesn't meet the given requirements. Please reach out to <%= @card_grant.event.name %> for support.
+  <%= render "application/callout", type: "error", title: "This grant has been flagged" do %>
+    <p class="m-0">
+      Your card grant was flagged because it doesn't meet the given requirements.
+      Please reach out to <%= @card_grant.event.name %> for support.
     </p>
-  </div>
+  <% end %>
 <% end %>
 
 <% if @card_grant.instructions.present? %>
@@ -60,46 +46,67 @@
 
 <%= render partial: "card_grant/pre_authorizations/organizer_info", locals: { pre_authorization: @pre_authorization, link_to_pre_authorization: false } %>
 
-<%= form_with model: @pre_authorization, id: "pre_authorization_form", url: card_grant_pre_authorizations_path(@card_grant), method: :patch, class: "flex flex-col", data: { turbo: true } do |form| %>
-
-  <h3>1. Provide a link to the product page</h3>
-  <p>Submit a link to the product you're looking to purchase. We'll use this to verify that the item is in line with the purpose of the grant.</p>
-
-  <div class="field mb2">
-    <%= form.label :product_url, "Product page URL" %>
-    <%= form.text_field :product_url, required: true, placeholder: "https://example.com/product", disabled: !@pre_authorization.draft? %>
+<%= render "card_grants/section_heading", icon: "1", title: "Link to the product page" %>
+<p class="muted mt-0 mb-3">
+  Submit a link to the product you're looking to purchase. We'll use this to verify that the item is in line with the purpose of the grant.
+</p>
+
+<%= form_with model: @pre_authorization, id: "pre_authorization_form", url: card_grant_pre_authorizations_path(@card_grant), method: :patch, data: { turbo: true } do |form| %>
+  <div class="card">
+    <% if draft %>
+      <div class="field flex items-center justify-between m-0">
+        <%= form.label :product_url, "Product page URL" %>
+        <%= form.text_field :product_url, required: true, placeholder: "https://example.com/product" %>
+      </div>
+    <% else %>
+      <div class="grant-row">
+        <span class="grant-row__label">
+          <%= inline_icon "link", size: 20 %>
+          Product page
+        </span>
+        <% if @pre_authorization.product_url.present? %>
+          <%= ugc_link_to @pre_authorization.product_url, @pre_authorization.product_url, target: :_blank, rel: "noopener", class: "grant-row__value" %>
+        <% else %>
+          <span class="grant-row__value muted">Not provided</span>
+        <% end %>
+      </div>
+    <% end %>
   </div>
-
 <% end %>
 
-<h3>2. Upload a screenshot of your cart</h3>
-<p>Upload a screenshot of your cart showing the item you want to purchase. Make sure it includes the total cost, as well as any taxes, fees, and shipping costs. This helps us verify the total amount you need to spend.</p>
+<%= render "card_grants/section_heading", icon: "2", title: "Screenshot of your cart" %>
+<p class="muted mt-0 mb-3">
+  Upload a screenshot of your cart showing the item you want to purchase. Make sure it includes the total cost, as well as any taxes, fees, and shipping costs. This helps us verify the total amount you need to spend.
+</p>
+
+<section class="card grant-upload">
+  <div class="grant-upload__grid">
+    <% if draft %>
+      <%= render partial: "card_grant/pre_authorizations/screenshot_form", locals: { turbo: true } %>
+    <% end %>
 
-<div class="flex justify-start flex-row gap-4">
-  <% if @pre_authorization.draft? %>
-    <%= render partial: "card_grant/pre_authorizations/screenshot_form", locals: {
-          upload_method: "attach_receipt_page",
-          turbo: true
+    <%= render partial: "card_grant/pre_authorizations/screenshot_list", locals: {
+          screenshots: @pre_authorization.screenshots.attachments
         } %>
-  <% end %>
+  </div>
 
-  <%= render partial: "card_grant/pre_authorizations/screenshot_list", locals: {
-        screenshots: @pre_authorization.screenshots.attachments,
-        shimmer:
+  <%= render partial: "card_grant/pre_authorizations/screenshot_count", locals: {
+        count: @pre_authorization.screenshots.count,
+        card_grant: @card_grant,
+        disabled: !draft
       } %>
-</div>
+</section>
 
-<%= render partial: "card_grant/pre_authorizations/screenshot_count", locals: {
-      count: @pre_authorization.screenshots.count,
-      card_grant: @card_grant,
-      disabled: !@pre_authorization.draft?
-    } %>
+<%= render "card_grants/section_heading", icon: "3", title: "Submit for review" %>
 
-<h3>3. Submit for review</h3>
-<p>Once you've provided the product link and uploaded the screenshot, our review process will screen your submission and activate your grant.</p>
+<div class="card grant-submit mb-20">
+  <p class="m-0 muted">
+    Once you've provided the product link and uploaded the screenshot, our review process will screen your submission and activate your grant.
+  </p>
 
-<% if @pre_authorization.draft? %>
-  <input type="submit" class="btn" value="Submit for review" form="pre_authorization_form">
-<% elsif @pre_authorization.submitted? %>
-  <input type="submit" class="btn bg-warning" value="Submitted..." form="pre_authorization_form" disabled>
-<% end %>
+  <% if draft %>
+    <input type="submit" class="btn" value="Submit for review" form="pre_authorization_form">
+  <% elsif @pre_authorization.submitted? %>
+    <input type="submit" class="btn bg-warning" value="Submitted" form="pre_authorization_form" disabled>
+  <% end %>
+</div>
diff --git a/app/views/card_grants/_actions.html.erb b/app/views/card_grants/_actions.html.erb
index d912d8005a..ea184f8877 100644
--- a/app/views/card_grants/_actions.html.erb
+++ b/app/views/card_grants/_actions.html.erb
@@ -1,22 +1,38 @@
 <%# locals: (card_grant:) %>
 
 <% if card_grant.active? %>
-  <div class="card card--breakdown flex flex-col p-1">
-    <p class="eyebrow mb-0 px-4 opacity-50">Controls</p>
-    <% if organizer_signed_in?(as: :member) %>
-      <%= render "stripe_cards/actions/freeze", stripe_card: card_grant.stripe_card if card_grant.stripe_card.present? %>
-      <%= render "card_grants/actions/convert_to_reimbursement_report", card_grant:, label: card_grant.user == current_user ? "Get reimbursed" : "Create reimbursement report" %>
-      <% if card_grant.user == current_user %>
-        <%= render "card_grants/actions/return", card_grant: %>
-      <% else %>
-        <%= render "card_grants/actions/cancel", card_grant: %>
-      <% end %>
-      <%= render "card_grants/actions/support", card_grant: %>
-    <% elsif card_grant.user == current_user %>
-      <%= render "stripe_cards/actions/freeze", stripe_card: card_grant.stripe_card if card_grant.stripe_card.present? %>
-      <%= render "card_grants/actions/convert_to_reimbursement_report", card_grant:, label: "Get reimbursed" %>
-      <%= render "card_grants/actions/return", card_grant: %>
-      <%= render "card_grants/actions/support", card_grant: %>
+  <% own = card_grant.user == current_user %>
+  <% stripe_card = card_grant.stripe_card %>
+
+  <%# Rendered up front since several hide themselves, and an empty card shouldn't show. %>
+  <% controls = [] %>
+  <% if organizer_signed_in?(as: :member) || own %>
+    <% controls << render("stripe_cards/actions/freeze", stripe_card:, variant: "control", label: "Pause spending instantly", subtitle: "You can unfreeze it yourself at any time") if stripe_card.present? %>
+    <% controls << render("card_grants/actions/convert_to_reimbursement_report", card_grant:, variant: "control", label: own ? "I paid out of pocket" : "Create reimbursement report", subtitle: "Swap the balance for a reimbursement") %>
+    <% if own %>
+      <% controls << render("card_grants/actions/return", card_grant:, label: "I don’t need this money", subtitle: "Send the remaining balance back to #{card_grant.event.name}") %>
+    <% else %>
+      <% controls << render("card_grants/actions/cancel", card_grant:, variant: "control", label: "Return the balance to #{card_grant.event.name}") %>
     <% end %>
-  </div>
+  <% end %>
+  <% controls.reject!(&:blank?) %>
+  <% support = render("card_grants/actions/support", card_grant:, title: own ? "Still stuck?" : "Need help?") if organizer_signed_in?(as: :member) || own %>
+  <% answers = render("card_grants/quick_answers") if own %>
+
+  <% if controls.any? %>
+    <div class="card grant-controls">
+      <h3 class="grant-subheading">Controls</h3>
+      <div class="grant-controls__grid">
+        <%= safe_join controls %>
+      </div>
+    </div>
+  <% end %>
+
+  <%# Help gets its own card so it doesn't read as one more control. %>
+  <% if answers.present? || support.present? %>
+    <div class="card grant-help">
+      <%= answers %>
+      <%= support %>
+    </div>
+  <% end %>
 <% end %>
diff --git a/app/views/card_grants/_canceled_warning.html.erb b/app/views/card_grants/_canceled_warning.html.erb
deleted file mode 100644
index 657b41a9cf..0000000000
--- a/app/views/card_grants/_canceled_warning.html.erb
+++ /dev/null
@@ -1,27 +0,0 @@
-<%# locals: (card_grant:) %>
-
-<% if card_grant.canceled? %>
-  <div class="card border b--info mb-2">
-    <div class="flex items-center info">
-      <%= inline_icon "info", size: 32, class: "mr1" %>
-      <p class="bold mt0 mb0">
-        <% if card_grant.converted_to_reimbursement_report? %>
-          This grant has been canceled and converted into a reimbursement report
-        <% else %>
-          This grant has been canceled
-        <% end %>
-        <% if canceled_by = card_grant.last_user_change_to(status: :canceled) %>
-          by <%= user_mention canceled_by, disable_tooltip: true %>
-        <% end %>
-        <% if canceled_at = card_grant.last_time_change_to(status: :canceled) %>
-          <span class="tooltipped" aria-label="<%= canceled_at.to_formatted_s(:long) %>">
-            <%= time_ago_in_words canceled_at %> ago
-          </span>
-        <% end %>
-        <% if card_grant.converted_to_reimbursement_report? && policy(card_grant.reimbursement_report).show? %>
-          • <%= link_to "View reimbursement report", card_grant.reimbursement_report %>
-        <% end %>
-      </p>
-    </div>
-  </div>
-<% end %>
diff --git a/app/views/card_grants/_card_details.html.erb b/app/views/card_grants/_card_details.html.erb
index 59e0d2a406..1c422803b4 100644
--- a/app/views/card_grants/_card_details.html.erb
+++ b/app/views/card_grants/_card_details.html.erb
@@ -1,147 +1,139 @@
 <%# locals: (card_grant:) %>
 
-<% if (stripe_card = card_grant.stripe_card).present? %>
-  <div>
-    <div class="card container--md">
-      <h3 class="mt0 mb0 info bold">How do I make purchases on this card?</h3>
-      <p class="mt1">Here's all the info you might need:</p>
-
-      <section class="details">
-        <div class="fs-mask">
-          <strong>Status</strong>
-          <span class="flex items-baseline g-1">
-            <%= status_badge stripe_card.status_badge_type %>
-            <%= stripe_card.status_text.capitalize %>
-          </span>
+<div class="grant-pay">
+  <% if (stripe_card = card_grant.stripe_card).present? %>
+    <% cardholder = stripe_card.cardholder %>
+    <% owner = stripe_card.user == current_user && stripe_card.virtual? %>
+    <% revealed = owner && @show_card_details %>
+
+    <div class="card grant-panel">
+      <div class="grant-panel__art">
+        <div class="<%= "scale-[0.98] transition-transform hover:scale-1" if card_grant.canceled? %>">
+          <%= render "stripe_cards/stripe_card", stripe_card:, headless: true %>
         </div>
+        <% if owner %>
+          <%= link_to card_grant_path(card_grant, show_details: (!@show_card_details).to_s),
+                      class: "btn w-full mt-4",
+                      data: { turbo: true } do %>
+            <%= inline_icon revealed ? "view-fill" : "view" %>
+            <%= revealed ? "Hide details" : "Show details" %>
+          <% end %>
+        <% end %>
+      </div>
 
-        <% if stripe_card.frozen? && stripe_card.last_frozen_by && stripe_card.last_frozen_by != User.system_user %>
-          <div class="fs-mask">
-            <strong>Frozen by</strong>
-            <%= user_mention stripe_card.last_frozen_by %>
+      <div class="grant-panel__fields">
+        <div class="grant-panel__group">
+          <h3 class="grant-subheading">Card</h3>
+
+          <div class="grant-row fs-mask">
+            <span class="grant-row__label">Name on card</span>
+            <span class="grant-row__value"><%= copy_to_clipboard(stripe_card.user.name, tooltip_direction: "w") %></span>
           </div>
-        <% end %>
 
-        <div class="fs-mask">
-          <strong>Card number</strong>
-          <div class="flex justify-between font-mono items-center">
-            <% if stripe_card.user == current_user && stripe_card.virtual? %>
-              <% if @show_card_details %>
-                <%= copy_to_clipboard(stripe_card.full_card_number, class: "w-fit", tooltip_direction: "e") do %>
-                  <%= stripe_card.formatted_card_number %>
-                <% end %>
+          <% if stripe_card.frozen? && stripe_card.last_frozen_by && stripe_card.last_frozen_by != User.system_user %>
+            <div class="grant-row fs-mask">
+              <span class="grant-row__label">Frozen by</span>
+              <span class="grant-row__value"><%= user_mention stripe_card.last_frozen_by %></span>
+            </div>
+          <% end %>
+
+          <div class="grant-row fs-mask">
+            <span class="grant-row__label">Card number</span>
+            <span class="grant-row__value font-mono">
+              <% if revealed %>
+                <%= copy_to_clipboard(stripe_card.full_card_number, tooltip_direction: "w") { stripe_card.formatted_card_number } %>
               <% else %>
                 <%= stripe_card.hidden_card_number_with_last_four %>
               <% end %>
-              <%= link_to card_grant_path(card_grant, show_details: (!@show_card_details).to_s), data: { turbo: true } do %>
-                <%= inline_icon @show_card_details ? "view-fill" : "view", class: "align-middle" %>
-              <% end %>
-            <% else %>
-              <%= stripe_card.hidden_card_number_with_last_four %>
-              <div class="right tooltipped tooltipped--w" aria-label="Hidden to protect security">
-                <%= inline_icon "private", size: 32, class: "muted" %>
-              </div>
-            <% end %>
+            </span>
           </div>
-        </div>
 
-        <div class="fs-mask">
-          <strong class="inline-flex items-center" style="gap: 4px">
-            Expiration date
-            <span class="text-yellow tooltipped tooltipped--e h-[18px]" aria-label="This is what you enter when asked for expiration date at checkout. This is different than your grant's spend by date.">
-              <%= inline_icon "important", size: 18, style: "position: unset;" %>
+          <div class="grant-row fs-mask">
+            <span class="grant-row__label">
+              Expiry
+              <span class="text-yellow tooltipped tooltipped--e h-[18px]" aria-label="Enter this at checkout — it's not your grant's spend by date.">
+                <%= inline_icon "important", size: 18, style: "position: unset;" %>
+              </span>
             </span>
-          </strong>
-          <%= copy_to_clipboard(render_short_exp_date(stripe_card), class: "w-fit", tooltip_direction: "e") { render_exp_date stripe_card } %>
-        </div>
+            <span class="grant-row__value font-mono">
+              <%= copy_to_clipboard(render_short_exp_date(stripe_card), tooltip_direction: "w") { render_exp_date stripe_card } %>
+            </span>
+          </div>
 
-        <div class="fs-mask">
-          <strong>CVC</strong>
-          <div class="flex justify-between font-mono items-center">
-            <% if stripe_card.user == current_user && stripe_card.virtual? %>
-              <% if @show_card_details %>
-                <%= copy_to_clipboard(stripe_card.cvc, class: "w-fit", tooltip_direction: "e") do %>
-                  <%= stripe_card.cvc %>
-                <% end %>
+          <div class="grant-row fs-mask">
+            <span class="grant-row__label">CVC</span>
+            <span class="grant-row__value font-mono">
+              <% if revealed %>
+                <%= copy_to_clipboard(stripe_card.cvc, tooltip_direction: "w") { stripe_card.cvc } %>
               <% else %>
                 <%= stripe_card.hidden_cvc %>
               <% end %>
-            <% else %>
-              <%= stripe_card.hidden_cvc %>
-              <div class="right tooltipped tooltipped--w" aria-label="Hidden to protect security">
-                <%= inline_icon "private", size: 32, class: "muted" %>
-              </div>
-            <% end %>
+            </span>
           </div>
-        </div>
 
-        <% if stripe_card.cash_withdrawal_enabled? %>
-          <div class="fs-mask" data-controller="pin" data-pin-card-id-value="<%= stripe_card.id %>" data-pin-stripe-id-value="<%= stripe_card.stripe_id %>" data-pin-stripe-api-key-value="<%= StripeService.publishable_key %>">
-            <strong>PIN</strong>
-            <div class="flex justify-between font-mono items-center">
-              <span id="card-pin">••••</span>
-              <%= inline_icon @show_card_details ? "view-fill" : "view", class: "align-middle", "data-action": "click->pin#view" %>
+          <% if stripe_card.cash_withdrawal_enabled? && stripe_card.user == current_user %>
+            <div class="grant-row fs-mask"
+                 data-controller="pin"
+                 data-pin-card-id-value="<%= stripe_card.id %>"
+                 data-pin-stripe-id-value="<%= stripe_card.stripe_id %>"
+                 data-pin-stripe-api-key-value="<%= StripeService.publishable_key %>">
+              <span class="grant-row__label">PIN</span>
+              <span class="grant-row__value font-mono flex items-center gap-2 justify-end">
+                <span id="card-pin">••••</span>
+                <%= inline_icon "view", class: "pointer align-middle", "data-action": "click->pin#view" %>
+              </span>
             </div>
-          </div>
-        <% end %>
-
-        <div class="fs-mask">
-          <strong class="inline-flex items-center" style="gap: 4px">
-            Address
-            <% if stripe_card.cardholder.stripe_billing_address_line2.presence %> line 1<% end %>
-            <% if stripe_card.user == current_user && stripe_card.cardholder.default_billing_address? %>
-              <%= link_to settings_address_path, class: "info tooltipped tooltipped--e", "aria-label": "You're using HCB's default billing address, not your home address. You can change it in your user settings if you'd like.", style: "display: flex;", data: { turbo: false } do %>
-                <%= inline_icon "info", size: 18, style: "position: unset;" %>
-              <% end %>
-            <% end %>
-          </strong>
-          <%= copy_to_clipboard(stripe_card.cardholder.stripe_billing_address_line1, class: "w-fit", tooltip_direction: "e") %>
+          <% end %>
         </div>
 
-        <% if stripe_card.cardholder.stripe_billing_address_line2.presence %>
-          <div class="fs-mask">
-            <strong>Address line 2</strong>
-            <%= copy_to_clipboard(stripe_card.cardholder.stripe_billing_address_line2, class: "w-fit", tooltip_direction: "e") %>
-          </div>
-        <% end %>
+        <%# The billing address can be the grantee's home, so organizers only get the card itself. %>
+        <% admin_tool_if(card_grant.user != current_user) do %>
+          <div class="grant-panel__group">
+            <h3 class="grant-subheading">Billing address</h3>
 
-        <div class="fs-mask">
-          <strong>City</strong>
-          <%= copy_to_clipboard(stripe_card.cardholder.stripe_billing_address_city, class: "w-fit", tooltip_direction: "e") %>
-        </div>
+            <div class="grant-row fs-mask">
+              <span class="grant-row__label">
+                Street
+                <% if stripe_card.user == current_user && cardholder.default_billing_address? %>
+                  <%= link_to settings_address_path, class: "info tooltipped tooltipped--e", "aria-label": "This is HCB's billing address, not your home address. You can change it in your settings.", style: "display: flex;", data: { turbo: false } do %>
+                    <%= inline_icon "info", size: 18, style: "position: unset;" %>
+                  <% end %>
+                <% end %>
+              </span>
+              <span class="grant-row__value">
+                <%= copy_to_clipboard([cardholder.stripe_billing_address_line1, cardholder.stripe_billing_address_line2.presence].compact.join(" "), tooltip_direction: "w") do %>
+                  <%= cardholder.stripe_billing_address_line1 %>
+                  <%= cardholder.stripe_billing_address_line2.presence %>
+                <% end %>
+              </span>
+            </div>
 
-        <div class="fs-mask">
-          <strong>State</strong>
-          <%= copy_to_clipboard(stripe_card.cardholder.stripe_billing_address_state, class: "w-fit", tooltip_direction: "e") %>
-        </div>
+            <div class="grant-row fs-mask">
+              <span class="grant-row__label">City</span>
+              <span class="grant-row__value"><%= copy_to_clipboard(cardholder.stripe_billing_address_city, tooltip_direction: "w") %></span>
+            </div>
 
-        <div class="fs-mask">
-          <strong>ZIP/Postal code</strong>
-          <%= copy_to_clipboard(stripe_card.stripe_cardholder.address_postal_code, class: "w-fit", tooltip_direction: "e") %>
-        </div>
+            <div class="grant-row fs-mask">
+              <span class="grant-row__label">State</span>
+              <span class="grant-row__value"><%= copy_to_clipboard(cardholder.stripe_billing_address_state, tooltip_direction: "w") %></span>
+            </div>
 
-        <% if stripe_card.user.phone_number %>
-          <div class="fs-mask">
-            <strong class="inline-flex items-center" style="gap: 4px">
-              Phone number
-              <span class="info tooltipped tooltipped--e h-[18px]" aria-label="This is your phone number - use this if asked during checkout.">
-                <%= inline_icon "info", size: 18, style: "position: unset;" %>
-              </span>
-            </strong>
-            <%= copy_to_clipboard(stripe_card.user.pretty_phone_number, class: "w-fit", tooltip_direction: "e") %>
+            <div class="grant-row fs-mask">
+              <span class="grant-row__label">ZIP</span>
+              <span class="grant-row__value"><%= copy_to_clipboard(stripe_card.stripe_cardholder.address_postal_code, tooltip_direction: "w") %></span>
+            </div>
+
+            <% if stripe_card.user.pretty_phone_number.presence %>
+              <div class="grant-row fs-mask">
+                <span class="grant-row__label">Phone</span>
+                <span class="grant-row__value"><%= copy_to_clipboard(stripe_card.user.pretty_phone_number, tooltip_direction: "w") %></span>
+              </div>
+            <% end %>
           </div>
         <% end %>
-
-        <div>
-          <strong>Type</strong>
-          <%= stripe_card.virtual? ? "Virtual" : "Physical" %>
-        </div>
-
-        <div>
-          <strong>Network</strong>
-          Visa
-        </div>
-      </section>
+      </div>
     </div>
-  </div>
-<% end %>
+  <% end %>
+
+  <%= render partial: "card_grants/actions", locals: { card_grant: } %>
+</div>
diff --git a/app/views/card_grants/_control.html.erb b/app/views/card_grants/_control.html.erb
new file mode 100644
index 0000000000..0db89d3f6e
--- /dev/null
+++ b/app/views/card_grants/_control.html.erb
@@ -0,0 +1,9 @@
+<%# locals: (title:, description:, icon:) %>
+
+<%# Body of one row in the grant controls list. The row itself is the button or link, so everything in here is inline. %>
+<span class="grant-icon"><%= inline_icon icon, size: 20 %></span>
+<span class="grant-action__text">
+  <span class="grant-action__title"><%= title %></span>
+  <span class="grant-action__desc"><%= description %></span>
+</span>
+<%= inline_icon "view-forward", size: 24, class: "grant-action__arrow" %>
diff --git a/app/views/card_grants/_control_drawer.html.erb b/app/views/card_grants/_control_drawer.html.erb
new file mode 100644
index 0000000000..239e805905
--- /dev/null
+++ b/app/views/card_grants/_control_drawer.html.erb
@@ -0,0 +1,16 @@
+<%# locals: (id:, label:, items:) %>
+
+<div class="grant-drawer" id="<%= id %>-drawer">
+  <div class="grant-drawer__head">
+    <span class="grant-strip__label"><%= label %></span>
+    <label class="grant-drawer__close" for="<%= id %>">
+      <%= inline_icon "view-close", size: 18 %>
+      Hide
+    </label>
+  </div>
+  <ul class="grant-chips">
+    <% items.each do |item| %>
+      <li class="grant-chip"><%= item %></li>
+    <% end %>
+  </ul>
+</div>
diff --git a/app/views/card_grants/_control_field.html.erb b/app/views/card_grants/_control_field.html.erb
new file mode 100644
index 0000000000..9f3a379675
--- /dev/null
+++ b/app/views/card_grants/_control_field.html.erb
@@ -0,0 +1,16 @@
+<%# locals: (id:, label:, items:, empty:, inline_limit: 2) %>
+
+<div class="grant-strip__cell">
+  <span class="grant-strip__label"><%= label %></span>
+
+  <% if items.blank? %>
+    <p class="grant-strip__value"><%= empty %></p>
+  <% elsif items.size <= inline_limit %>
+    <p class="grant-strip__value"><%= items.to_sentence %></p>
+  <% else %>
+    <label class="grant-strip__value grant-disclosure" for="<%= id %>">
+      <%= pluralize(items.size, label.downcase.singularize) %>
+      <%= inline_icon "down-caret", size: 20, class: "grant-disclosure__caret" %>
+    </label>
+  <% end %>
+</div>
diff --git a/app/views/card_grants/_edit_nav.html.erb b/app/views/card_grants/_edit_nav.html.erb
index 437c8bb423..6697b31b58 100644
--- a/app/views/card_grants/_edit_nav.html.erb
+++ b/app/views/card_grants/_edit_nav.html.erb
@@ -27,9 +27,6 @@
   <% end %>
 </section>
 <ul class="tab-container">
-  <%= settings_tab active: active == "overview" do %>
-    <%= link_to "Overview", edit_overview_event_card_grant_path(@card_grant), data: { turbo: true } %>
-  <% end %>
   <%= settings_tab active: active == "purpose" do %>
     <%= link_to "Purpose and instructions", edit_purpose_event_card_grant_path(@card_grant), data: { turbo: true } %>
   <% end %>
diff --git a/app/views/card_grants/_grant_details.html.erb b/app/views/card_grants/_grant_details.html.erb
index c99c69fedd..3f77dd6957 100644
--- a/app/views/card_grants/_grant_details.html.erb
+++ b/app/views/card_grants/_grant_details.html.erb
@@ -1,73 +1,57 @@
-<%# locals: (card_grant:) %>
+<%# locals: (card_grant:, own:) %>
 
-<% if (stripe_card = card_grant.stripe_card).present? %>
-  <div>
-    <div class="card container--md pt-0">
-      <p>
-        This is information about your grant:
-        <br>
-        <i class="muted">
-          If there are any issues with your grant amount, spend by, or allowed merchants,
-          please reach out to the <%= card_grant.event.name %> team. HCB staff are unable
-          to provide assistance with these requests.
-        </i>
-      </p>
+<% merchants = card_grant.allowed_merchant_names %>
+<% categories = card_grant.allowed_category_names %>
+
+<%# Long lists collapse into a full-width drawer below the strip so one big list %>
+<%# can't stretch the card into a single tall column. %>
+<% inline_limit = 2 %>
+<% drawers = { "Merchants" => merchants, "Categories" => categories }.select { |_, items| items.size > inline_limit } %>
+
+<div class="card grant-limits">
+  <% drawers.each_key do |label| %>
+    <input type="checkbox" class="grant-drawer__toggle" id="grant-<%= label.parameterize %>" autocomplete="off">
+  <% end %>
+
+  <section class="grant-strip">
+    <%= render "card_grants/control_field", id: "grant-merchants", label: "Merchants", items: merchants, empty: "Anywhere", inline_limit: %>
+    <%= render "card_grants/control_field", id: "grant-categories", label: "Categories", items: categories, empty: "Anything", inline_limit: %>
 
-      <section class="details">
-        <p>
-          <strong class="inline-flex items-center" style="gap: 4px">
-            Spend by
-            <span class="text-yellow tooltipped tooltipped--e h-[18px]" aria-label="This is when your grant will be returned to <%= card_grant.event.name %>. Please check the above section if you are looking for your billing information.">
-              <%= inline_icon "important", size: 18, style: "position: unset;" %>
-            </span>
-          </strong>
-          <span><%= format_date card_grant.expiration_at %></span>
-        </p>
+    <% if card_grant.keyword_lock.present? %>
+      <div class="grant-strip__cell">
+        <span class="grant-strip__label">Keyword</span>
+        <p class="grant-strip__value font-mono"><%= card_grant.keyword_lock %></p>
+      </div>
+    <% end %>
 
-        <% if card_grant.one_time_use %>
-          <p>
-            <strong class="inline-flex items-center" style="gap: 4px">
-              One time use
-              <span class="info tooltipped tooltipped--e h-[18px]" aria-label="This card will automatically freeze after you make a purchase">
-                <%= inline_icon "info", size: 18, style: "position: unset;" %>
-              </span>
-            </strong>
-            <span><%= card_grant.one_time_use ? "Yes" : "No" %></span>
-          </p>
-        <% end %>
+    <div class="grant-strip__cell">
+      <span class="grant-strip__label">One time use</span>
+      <p class="grant-strip__value"><%= card_grant.one_time_use ? "Yes" : "No" %></p>
+    </div>
 
-        <p>
-          <strong>Allowed merchants</strong>
-          <% if card_grant.allowed_merchants.any? %>
-            <span><%= card_grant.allowed_merchant_names.to_sentence %></span>
-          <% else %>
-            <span>All merchants allowed</span>
-          <% end %>
-        </p>
+    <div class="grant-strip__cell">
+      <span class="grant-strip__label">Unspent funds</span>
+      <p class="grant-strip__value">Return to <%= card_grant.event.name %></p>
+    </div>
+  </section>
 
-        <% if card_grant.allowed_merchants.any? && organizer_signed_in? %>
-          <p>
-            <strong>Merchant IDs</strong>
-            <span><%= card_grant.allowed_merchants.join(", ") %></span>
-          </p>
-        <% end %>
+  <% drawers.each do |label, items| %>
+    <%= render "card_grants/control_drawer", id: "grant-#{label.parameterize}", label:, items: %>
+  <% end %>
 
-        <p>
-          <strong>Allowed categories</strong>
-          <% if (allowed_categories = card_grant.allowed_category_names.join(", ").presence) %>
-            <span><%= allowed_categories %></span>
-          <% else %>
-            <span>All categories allowed</span>
-          <% end %>
-        </p>
+  <% if !own && card_grant.allowed_merchants.any? && organizer_signed_in? %>
+    <p class="text-sm muted font-mono mt-3 mb-0">Merchant IDs: <%= card_grant.allowed_merchants.join(", ") %></p>
+  <% end %>
 
-        <% if card_grant.keyword_lock.present? %>
-          <p>
-            <strong>Merchant keyword lock</strong>
-            <span><%= card_grant.keyword_lock %></span>
-          </p>
-        <% end %>
-      </section>
+  <% if own %>
+    <div class="grant-limits__note">
+      <p class="my-0">
+        <strong><%= card_grant.event.name %> sets these limits, not HCB.</strong>
+      </p>
+      <p class="text-sm my-0 opacity-60">
+        To change these restrictions, message the <%= card_grant.event.name %> team.
+        <strong>HCB cannot change your grant limits.</strong>
+      </p>
     </div>
-  </div>
-<% end %>
+  <% end %>
+</div>
diff --git a/app/views/card_grants/_header_banner.html.erb b/app/views/card_grants/_header_banner.html.erb
deleted file mode 100644
index 0f6aa37d73..0000000000
--- a/app/views/card_grants/_header_banner.html.erb
+++ /dev/null
@@ -1,46 +0,0 @@
-<%# locals: (card_grant:, footer: nil) %>
-
-<section class="card mt-8 min-h-[300px] flex flex-col justify-between card--background-image" style="<%= card_grant.event.background_image.attached? ? "--bg-image: url(#{url_for(card_grant.event.background_image).dump})" : "--bg-image: #{GeoPattern.generate(card_grant.stripe_card&.public_id || card_grant.public_id).to_data_uri}" %>">
-  <div class="flex flex-row justify-end items-start gap-x-4 gap-y-2 flex-wrap">
-    <% if organizer_signed_in?(as: :member) %>
-      <%= render "card_grants/actions/edit", card_grant: card_grant %>
-    <% end %>
-  </div>
-  <div class="flex-grow"></div>
-  <div class="flex flex-col gap-8 lg:flex-row justify-between items-start lg:items-center">
-    <div class="flex flex-col justify-center items-start mt-5">
-      <h2 class="border-none !mx-0 !px-0 !mt-0 inline-flex items-center flex-wrap">
-        Grant to &nbsp; <%= user_mention(card_grant.user, class: "mr-2") %> for <%= render_money card_grant.amount %>
-      </h2>
-      <p class="my-0 flex items-baseline g-1">
-        <%= status_badge card_grant.status_badge_type %>
-        <%= card_grant.state_text %>
-        <% if card_grant.purpose.present? %>
-          • <%= card_grant.purpose %>
-        <% end %>
-      </p>
-    </div>
-
-    <section class="details-horiz px-4">
-      <p>
-        <strong>Sent by</strong>
-        <%= user_mention card_grant.sent_by %>
-      </p>
-      <p>
-        <strong>Funded by</strong>
-        <%= link_to card_grant.event.name, card_grant.event %>
-      </p>
-      <p>
-        <strong>Sent</strong>
-        <span class="tooltipped" aria-label="<%= card_grant.created_at.to_formatted_s(:long) %>">
-          <%= time_ago_in_words card_grant.created_at %> ago
-        </span>
-      </p>
-    </section>
-  </div>
-  <% if defined?(footer) && footer.present? %>
-    <div class="card !shadow-none m-[-16px] mt-4 rounded-tl-none rounded-tr-none border-top divide-secondary">
-      <%= footer %>
-    </div>
-  <% end %>
-</section>
diff --git a/app/views/card_grants/_hero.html.erb b/app/views/card_grants/_hero.html.erb
new file mode 100644
index 0000000000..1fc2ee4bac
--- /dev/null
+++ b/app/views/card_grants/_hero.html.erb
@@ -0,0 +1,93 @@
+<%# locals: (card_grant:, footer: nil, show_actions: true) %>
+
+<% own = card_grant.user == current_user %>
+<% total = card_grant.amount %>
+<% remaining = card_grant.balance %>
+<% remaining_fraction = total.positive? ? [[remaining.cents.to_f / total.cents, 0].max, 1].min : 0 %>
+<%# `state` is the one place that knows whether the grant can be spent right
+    now, so the badge, the meter and the date all key off it. %>
+<% state = card_grant.state %>
+<% spendable = state == "success" %>
+<% ended = card_grant.canceled? || card_grant.expired? %>
+<% if ended %>
+  <% ended_at = card_grant.last_time_change_to(status: card_grant.status.to_sym) || card_grant.expiration_at %>
+<% end %>
+<% days_left = ((ended ? ended_at.to_date : card_grant.expiration_at.to_date) - Date.current).to_i %>
+
+<section class="card card--background-image grant-hero mt-4"
+         style="<%= card_grant.event.background_image.attached? ? "--bg-image: url(#{url_for(card_grant.event.background_image).dump})" : "--bg-image: #{GeoPattern.generate(card_grant.stripe_card&.public_id || card_grant.public_id).to_data_uri}" %>">
+  <div class="grant-hero__top">
+    <p class="flex items-baseline flex-wrap g-1 m-0">
+      <%= status_badge state %>
+      <strong><%= card_grant.state_text %></strong>
+      <% if card_grant.purpose.present? %>
+        <span class="grant-hero__soft">&nbsp;&nbsp;• <%= card_grant.purpose %></span>
+      <% end %>
+    </p>
+    <% if show_actions && organizer_signed_in?(as: :member) %>
+      <div class="flex items-center flex-wrap gap-2">
+        <%= render "card_grants/actions/edit", card_grant: %>
+      </div>
+    <% end %>
+  </div>
+
+  <div class="grant-hero__grid">
+    <div>
+      <span class="grant-hero__amount"><%= render_money remaining %></span>
+      <p class="mt-1 mb-3 grant-hero__soft">
+        <%= remaining == total ? "to spend" : "left of #{render_money total}" %>
+      </p>
+
+      <div class="grant-meter">
+        <span class="grant-meter__fill <%= "grant-meter__fill--muted" unless spendable %>"
+              style="width: <%= number_to_percentage(remaining_fraction * 100, precision: 2) %>"></span>
+      </div>
+    </div>
+
+    <div class="grant-hero__aside">
+      <p class="grant-hero__soft m-0">
+        <% if card_grant.canceled? %>
+          Canceled on
+        <% elsif card_grant.expired? %>
+          Expired on
+        <% else %>
+          <%= own ? "Spend it by" : "Expires on" %>
+        <% end %>
+      </p>
+      <div class="flex items-baseline flex-wrap gap-x-2">
+        <p class="grant-hero__date"><%= format_date(ended ? ended_at : card_grant.expiration_at) %></p>
+        <span class="grant-hero__soft">
+          <% if days_left.positive? %>
+            <%= pluralize days_left, "day" %> left
+          <% elsif days_left.zero? %>
+            today
+          <% else %>
+            <%= pluralize days_left.abs, "day" %> ago
+          <% end %>
+        </span>
+      </div>
+
+      <div class="grant-meta mt-2">
+        <div>
+          <span class="grant-hero__soft grant-meta__label">Granted by</span>
+          <%= link_to card_grant.event.name, card_grant.event, class: "grant-meta__value" %>
+        </div>
+        <div>
+          <span class="grant-hero__soft grant-meta__label">Granted to</span>
+          <%= user_mention card_grant.user, class: "grant-meta__value" %>
+        </div>
+        <div>
+          <span class="grant-hero__soft grant-meta__label">Sent</span>
+          <span class="grant-meta__value tooltipped tooltipped--w" aria-label="<%= card_grant.created_at.to_formatted_s(:long) %>">
+            <%= time_ago_in_words card_grant.created_at %> ago
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+<% if footer.present? %>
+  <div class="card mt-2">
+    <%= footer %>
+  </div>
+<% end %>
diff --git a/app/views/card_grants/_invitation.html.erb b/app/views/card_grants/_invitation.html.erb
index 9b299c0b95..3e0e0b97c8 100644
--- a/app/views/card_grants/_invitation.html.erb
+++ b/app/views/card_grants/_invitation.html.erb
@@ -2,47 +2,46 @@
 
 <% if card_grant.pending_invite? %>
   <%# Prompt user to create a Stripe Card %>
-  <div class="flex flex-col w-100">
-    <div class="w-full">
-      <div class="card border b--info">
-        <h2 class="mt-0">Activate your grant card</h2>
-        <p>
-          Before you can start spending, you need to agree to the Card Issuing Terms and pledge to use the card responsibly.
-        </p>
-        <%= form_with url: activate_card_grant_path(card_grant) do |form| %>
-          <div class="field field--checkbox mb2" style="display: grid; grid-template-columns: min-content 1fr;">
-            <%= form.check_box :purpose, required: true %>
-            <%= form.label :purpose do %>
-              I will only use this card for the intended purpose
-              <% if card_grant.purpose.present? %>
-                (<strong><%= card_grant.purpose %></strong>)
-              <% end %>
-              and adhere to the instructions provided by <%= card_grant.event.name + (card_grant.instructions.present? ? ":" : "") %>
-            <% end %>
-            <% if card_grant.instructions.present? %>
-              <div></div> <%# this empty <div> exists for layout purposes to handle checkbox alignment %>
-              <div class="card card--sunken py-0">
-                <%= MarkdownService.instance.render(card_grant.instructions) %>
-              </div>
-            <% end %>
-          </div>
-          <div class="field field--checkbox mb2">
-            <%= form.check_box :policy, required: true %>
-            <%= form.label :policy do %>
-              I will abide by the <%= link_to "Code of Conduct", "https://hackclub.com/conduct", target: :_blank %> and understand that fraudulent activity will result in a ban
-            <% end %>
-          </div>
-          <div class="field field--checkbox mb2">
-            <%= form.check_box :terms, required: true %>
-            <%= form.label :terms do %>
-              I agree to the <%= link_to "Card Issuing Terms", "https://stripe.com/legal/issuing/celtic-authorized-user-terms", target: :_blank %>
-            <% end %>
-          </div>
-          <div class="actions">
-            <%= form.submit "Start spending" %>
-          </div>
+  <div class="grant-section-row">
+    <h2 class="grant-section">Activate your grant card</h2>
+    <%= link_to "https://grants.help.hcb.hackclub.com/en/articles/15410293-i-got-a-card-grant-how-do-i-use-it", target: "_blank", rel: "noopener", class: "flex items-center shrink-0 no-underline" do %>
+      How card grants work
+      <%= inline_icon "view-forward" %>
+    <% end %>
+  </div>
+  <p class="muted mt-0 mb-3">
+    One more step before you can start spending: agree to the following and we'll issue your card.
+  </p>
+
+  <%= form_with url: activate_card_grant_path(card_grant), class: "card grant-pledge" do |form| %>
+    <%= form.label :purpose, class: "grant-pledge__row" do %>
+      <%= form.check_box :purpose, required: true %>
+      <span>
+        I will only use this card for the intended purpose
+        <% if card_grant.purpose.present? %>
+          (<strong><%= card_grant.purpose %></strong>)
         <% end %>
-      </div>
+        and adhere to the instructions provided by <%= card_grant.event.name %><%= " above" if card_grant.instructions.present? %>
+      </span>
+    <% end %>
+
+    <%= form.label :policy, class: "grant-pledge__row" do %>
+      <%= form.check_box :policy, required: true %>
+      <span>
+        I will abide by the <%= link_to "Code of Conduct", "https://hackclub.com/conduct", target: :_blank %> and understand that fraudulent activity will result in a ban
+      </span>
+    <% end %>
+
+    <%= form.label :terms, class: "grant-pledge__row" do %>
+      <%= form.check_box :terms, required: true %>
+      <span>
+        I agree to the <%= link_to "Card Issuing Terms", "https://stripe.com/legal/issuing/celtic-authorized-user-terms", target: :_blank %>
+      </span>
+    <% end %>
+
+    <div class="grant-pledge__footer">
+      <p class="m-0 muted">Your virtual card is ready to use as soon as you activate it.</p>
+      <%= form.submit "Start spending", class: "btn bg-success" %>
     </div>
-  </div>
+  <% end %>
 <% end %>
diff --git a/app/views/card_grants/_quick_answers.html.erb b/app/views/card_grants/_quick_answers.html.erb
new file mode 100644
index 0000000000..1773b635b4
--- /dev/null
+++ b/app/views/card_grants/_quick_answers.html.erb
@@ -0,0 +1,28 @@
+<%# locals: () %>
+
+<%# Help center articles as a row of tiles rather than a FAQ list, so one glance shows what's covered. %>
+<div class="grant-answers">
+  <div class="flex items-center justify-between">
+    <h3 class="grant-subheading m-0">Need help?</h3>
+    <%= link_to "https://grants.help.hcb.hackclub.com/en/collections/19675936-card-grants", target: "_blank", rel: "noopener", class: "flex items-center shrink-0 no-underline" do %>
+      All articles
+      <%= inline_icon "view-forward" %>
+    <% end %>
+  </div>
+
+  <div class="grant-answers__row">
+    <% [
+         ["I'm out of funds", "plus", "purple", "https://grants.help.hcb.hackclub.com/en/articles/15582009-can-i-add-more-money-to-my-grant-card"],
+         ["My card was declined", "forbidden", "primary", "https://grants.help.hcb.hackclub.com/en/articles/15414377-my-grant-card-was-declined-what-can-i-do"],
+         ["I made a personal purchase", "flag", "warning", "https://grants.help.hcb.hackclub.com/en/articles/15582008-i-used-my-grant-card-for-a-personal-purchase-by-mistake-what-do-i-do"],
+         ["I got a refund", "view-reload", "success", "https://grants.help.hcb.hackclub.com/en/articles/15582011-i-got-a-refund-on-a-grant-purchase-where-does-the-money-go"],
+         ["I have multiple grants", "card-list", "info", "https://grants.help.hcb.hackclub.com/en/articles/15582012-can-i-combine-multiple-grant-cards"],
+       ].each do |label, icon, tone, url| %>
+      <%= link_to url, target: "_blank", rel: "noopener", class: "grant-answer grant-tone--#{tone}" do %>
+        <span class="grant-icon"><%= inline_icon icon, size: 20 %></span>
+        <span class="grant-answer__label"><%= label %></span>
+        <span class="grant-answer__arrow" aria-hidden="true"><%= inline_icon "external-arrow", size: 28 %></span>
+      <% end %>
+    <% end %>
+  </div>
+</div>
diff --git a/app/views/card_grants/_section_heading.html.erb b/app/views/card_grants/_section_heading.html.erb
new file mode 100644
index 0000000000..549b8883be
--- /dev/null
+++ b/app/views/card_grants/_section_heading.html.erb
@@ -0,0 +1,11 @@
+<%# locals: (icon: "", title:, own: true, badge: nil) %>
+
+<h2 class="grant-section">
+  <% if own && !icon.empty? %>
+    <span class="grant-section__icon" aria-hidden="true"><%= icon %></span>
+  <% end %>
+  <%= title %>
+  <% if badge %>
+    <span class="badge ml-0 bg-warning"><%= badge %></span>
+  <% end %>
+</h2>
diff --git a/app/views/card_grants/_status_callout.html.erb b/app/views/card_grants/_status_callout.html.erb
new file mode 100644
index 0000000000..eaa55c0e28
--- /dev/null
+++ b/app/views/card_grants/_status_callout.html.erb
@@ -0,0 +1,106 @@
+<%# locals: (card_grant:) %>
+
+<%# One callout per grant state, so the hero badge, this notice and the sections
+    underneath always agree. Only states that need explaining get one: an
+    active, spendable grant shows nothing here. Suspected fraud is left to the
+    pre-authorization callout, which already carries the organizer's actions. %>
+
+<% own = card_grant.user == current_user %>
+<% stripe_card = card_grant.stripe_card %>
+<% event_name = card_grant.event.name %>
+
+<% canceled_by = card_grant.last_user_change_to(status: :canceled) if card_grant.canceled? %>
+<% canceled_at = card_grant.last_time_change_to(status: :canceled) if card_grant.canceled? %>
+<% canceled_when_by = capture do %>
+  <% if canceled_by %>by <%= user_mention canceled_by, disable_tooltip: true %><% end %>
+  <% if canceled_at %><span class="tooltipped tooltipped--n" aria-label="<%= canceled_at.to_formatted_s(:long) %>"><%= time_ago_in_words canceled_at %> ago</span><% end %>
+<% end %>
+
+<% if card_grant.converted_to_reimbursement_report? %>
+  <%= render "application/callout", type: "info", icon: "attachment", title: "This grant was converted into a reimbursement report" do %>
+    <p class="m-0">
+      Converted <%= canceled_when_by %>. The card no longer works; the money is paid out through the report instead.
+    </p>
+    <% if policy(card_grant.reimbursement_report).show? %>
+      <%= link_to "View reimbursement report", card_grant.reimbursement_report, class: "btn mt-3" %>
+    <% end %>
+  <% end %>
+
+<% elsif card_grant.canceled? %>
+  <%= render "application/callout", type: "info", color: "muted", icon: "forbidden", title: "This grant has been canceled" do %>
+    <p class="m-0">
+      Canceled <%= canceled_when_by %>.
+      <% if stripe_card.nil? %>
+        It was canceled before the card was activated, so nothing was ever charged to it.
+      <% else %>
+        The card no longer works, and the unspent balance went back to <%= event_name %>.
+        <% if own %>Any purchases you already made still need receipts, which you can upload below.<% end %>
+      <% end %>
+    </p>
+  <% end %>
+
+<% elsif card_grant.expired? %>
+  <%= render "application/callout", type: "info", color: "muted", icon: "clock", title: "This grant expired on #{format_date card_grant.expiration_at}" do %>
+    <p class="m-0">
+      <% if stripe_card.nil? %>
+        It expired before the card was activated, so nothing was ever charged to it.
+      <% else %>
+        The card no longer works, and the unspent balance went back to <%= event_name %>.
+        <% if own %>Any purchases you already made still need receipts, which you can upload below.<% end %>
+      <% end %>
+    </p>
+  <% end %>
+
+<% elsif card_grant.pending_invite? && !own %>
+  <%= render "application/callout", type: "info", icon: "email", title: "Waiting for #{card_grant.user.name} to activate this grant" do %>
+    <p class="m-0">
+      We emailed an invitation to <%= card_grant.email %>. The virtual card is issued as soon as they accept it, and nothing can be spent until then.
+    </p>
+  <% end %>
+
+<% elsif stripe_card&.frozen? %>
+  <% frozen_by = stripe_card.last_frozen_by if stripe_card.last_frozen_by && stripe_card.last_frozen_by != User.system_user %>
+  <%= render "application/callout", type: "warning", icon: "freeze", title: "This card is frozen" do %>
+    <p class="m-0">
+      <% if frozen_by %>
+        Frozen by <%= user_mention frozen_by, disable_tooltip: true %>.
+      <% end %>
+      Nothing can be charged to it until it's defrosted.
+      <% if policy(stripe_card).defrost? %>
+        You can defrost it from the controls below.
+      <% elsif card_grant.event.financially_frozen? || card_grant.user.locked? %>
+        Only the HCB team can defrost it. <%= help_message %>
+      <% elsif frozen_by && frozen_by != current_user %>
+        To use it again, ask <%= frozen_by.name %> or a manager of <%= event_name %> to defrost it.
+      <% else %>
+        To use it again, ask a manager of <%= event_name %> to defrost it.
+      <% end %>
+    </p>
+    <%# Grantees can't defrost a card someone else froze, so point them straight at whoever can.
+        The support modal lives in the controls, which only render for these viewers. %>
+    <% if (own || organizer_signed_in?(as: :member)) && !policy(stripe_card).defrost? && !card_grant.event.financially_frozen? && !card_grant.user.locked? %>
+      <% if card_grant.setting.support_message.present? %>
+        <button type="button" class="btn mt-3" data-behavior="modal_trigger" data-modal="support_card_grant_<%= card_grant.id %>">
+          <%= inline_icon "support" %>
+          Contact <%= event_name %>
+        </button>
+      <% elsif card_grant.setting.support_url.present? %>
+        <%= link_to card_grant.setting.support_url, target: "_blank", rel: "noopener", class: "btn mt-3" do %>
+          <%= inline_icon card_grant.setting.slack_support? ? "slack" : (card_grant.setting.email_support? ? "email" : "support") %>
+          <% if card_grant.setting.slack_support? %>
+            Contact <%= event_name %> on Slack
+          <% elsif card_grant.setting.email_support? %>
+            Email <%= event_name %>
+          <% else %>
+            Contact <%= event_name %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+<% elsif stripe_card&.inactive? && card_grant.pre_authorization.nil? %>
+  <%= render "application/callout", type: "warning", icon: "important", title: "This card isn't active yet" do %>
+    <p class="m-0">Nothing can be charged to it until it's activated.</p>
+  <% end %>
+<% end %>
diff --git a/app/views/card_grants/_transactions.html.erb b/app/views/card_grants/_transactions.html.erb
index d67a357836..20e7d0c57a 100644
--- a/app/views/card_grants/_transactions.html.erb
+++ b/app/views/card_grants/_transactions.html.erb
@@ -1,6 +1,8 @@
-<%# locals: (hcb_codes: nil, is_public: false, ledger:, items:) %>
+<%# locals: (hcb_codes: nil, is_public: false, ledger:, items:, heading: true) %>
 
-<h2 class="heading h2 leading-[1.5] mt2 ml0 pt1 pb1 pr2">Transactions on this card</h2>
+<% if heading %>
+  <h2 class="heading h2 leading-[1.5] mt2 ml0 pt1 pb1 pr2">Transactions on this card</h2>
+<% end %>
 <% if Flipper.enabled?(:new_ledger_everywhere_2026_07_13, current_user) %>
   <%= render "ledgers/ledger", ledger: @ledger, items: @items, show_author: false, receipt_upload_button: !is_public %>
 <% else %>
diff --git a/app/views/card_grants/actions/_cancel.html.erb b/app/views/card_grants/actions/_cancel.html.erb
index e29f4b638a..e9b4ba6485 100644
--- a/app/views/card_grants/actions/_cancel.html.erb
+++ b/app/views/card_grants/actions/_cancel.html.erb
@@ -1,15 +1,29 @@
-<%# locals: (card_grant:, label: "") %>
+<%# locals: (card_grant:, label: "", variant: "list_item") %>
 
 <% cancel_tooltip = policy(card_grant).cancel? ? "Cancel this grant and return funds to the organization" : "You don't have permission to perform this action" %>
-<%= button_to cancel_event_card_grant_path(id: card_grant.hashid, event_id: @event.slug),
-              method: :post,
-              form_class: "contents",
-              class: "btn btn--list-item",
-              disabled: !policy(card_grant).cancel?,
-              data: { turbo: true, turbo_frame: "_top", turbo_confirm: "Are you sure? This will irreversibly transfer the remaining balance on this grant BACK to your account.", turbo_confirm_danger: true } do %>
-  <%= inline_icon "reply", size: 20 %>
-  <div>
-    <strong>Cancel grant</strong>
-    <p class="text-sm opacity-60"><%= label.presence || cancel_tooltip %></p>
-  </div>
+<% cancel_path = cancel_event_card_grant_path(id: card_grant.hashid, event_id: @event.slug) %>
+<% cancel_data = { turbo: true, turbo_frame: "_top", turbo_confirm: "Are you sure? This will irreversibly transfer the remaining balance on this grant BACK to your account.", turbo_confirm_danger: true } %>
+
+<% if variant.to_s == "control" %>
+  <%= button_to cancel_path,
+                method: :post,
+                form_class: "contents",
+                class: "grant-action grant-tone--primary",
+                disabled: !policy(card_grant).cancel?,
+                data: cancel_data do %>
+    <%= render "card_grants/control", title: "Cancel grant", description: policy(card_grant).cancel? ? label.presence || cancel_tooltip : cancel_tooltip, icon: "reply" %>
+  <% end %>
+<% else %>
+  <%= button_to cancel_path,
+                method: :post,
+                form_class: "contents",
+                class: "btn btn--list-item",
+                disabled: !policy(card_grant).cancel?,
+                data: cancel_data do %>
+    <%= inline_icon "reply", size: 20 %>
+    <div>
+      <strong>Cancel grant</strong>
+      <p class="text-sm opacity-60"><%= label.presence || cancel_tooltip %></p>
+    </div>
+  <% end %>
 <% end %>
diff --git a/app/views/card_grants/actions/_convert_to_reimbursement_report.html.erb b/app/views/card_grants/actions/_convert_to_reimbursement_report.html.erb
index 6763ba2772..46d7c99cfd 100644
--- a/app/views/card_grants/actions/_convert_to_reimbursement_report.html.erb
+++ b/app/views/card_grants/actions/_convert_to_reimbursement_report.html.erb
@@ -1,17 +1,30 @@
-<%# locals: (card_grant:, label: "Create reimbursement report", subtitle: "") %>
+<%# locals: (card_grant:, label: "Create reimbursement report", subtitle: "", variant: "list_item") %>
 
 <% if card_grant.card_grant_setting.reimbursement_conversions_enabled? && card_grant.balance.positive? %>
   <% reimbursement_tooltip = policy(card_grant).convert_to_reimbursement_report? ? "Cancel this grant and open a reimbursement report with remaining funds" : "You don't have permission to perform this action" %>
-  <%= button_to convert_to_reimbursement_report_event_card_grant_path(id: card_grant.hashid, event_id: @event.slug),
-                method: :post,
-                form_class: "contents",
-                class: "btn btn--list-item",
-                disabled: !policy(card_grant).convert_to_reimbursement_report?,
-                data: { turbo: true, turbo_frame: "_top", turbo_confirm: "Are you sure? This will cancel your card grant and convert it into a reimbursement report.", turbo_confirm_danger: true } do %>
-    <%= inline_icon "attachment", size: 20 %>
-    <div>
-      <strong><%= label %></strong>
-      <p class="text-sm opacity-60"><%= subtitle.presence || reimbursement_tooltip %></p>
-    </div>
+  <% convert_path = convert_to_reimbursement_report_event_card_grant_path(id: card_grant.hashid, event_id: @event.slug) %>
+  <% convert_confirm = { turbo: true, turbo_frame: "_top", turbo_confirm: "Are you sure? This will cancel your card grant and convert it into a reimbursement report.", turbo_confirm_danger: true } %>
+  <% if variant.to_s == "control" %>
+    <%= button_to convert_path,
+                  method: :post,
+                  form_class: "contents",
+                  class: "grant-action grant-tone--purple",
+                  disabled: !policy(card_grant).convert_to_reimbursement_report?,
+                  data: convert_confirm do %>
+      <%= render "card_grants/control", title: label, description: policy(card_grant).convert_to_reimbursement_report? ? subtitle.presence || reimbursement_tooltip : reimbursement_tooltip, icon: "reimbursement" %>
+    <% end %>
+  <% else %>
+    <%= button_to convert_path,
+                  method: :post,
+                  form_class: "contents",
+                  class: "btn btn--list-item",
+                  disabled: !policy(card_grant).convert_to_reimbursement_report?,
+                  data: convert_confirm do %>
+      <%= inline_icon "attachment", size: 20 %>
+      <div>
+        <strong><%= label %></strong>
+        <p class="text-sm opacity-60"><%= subtitle.presence || reimbursement_tooltip %></p>
+      </div>
+    <% end %>
   <% end %>
 <% end %>
diff --git a/app/views/card_grants/actions/_edit.html.erb b/app/views/card_grants/actions/_edit.html.erb
index 166fdfa38b..c09c269614 100644
--- a/app/views/card_grants/actions/_edit.html.erb
+++ b/app/views/card_grants/actions/_edit.html.erb
@@ -8,7 +8,7 @@
   <% end %>
 <% end %>
 
-<% if policy(card_grant).edit_overview? %>
+<% if policy(card_grant).edit_purpose? %>
   <div class="tooltipped tooltipped--w" aria-label="<%= policy(card_grant).update? ? "Manage this grant" : "View grant settings" %>">
     <%= link_to "#",
                 class: "btn whitespace-nowrap",
@@ -25,6 +25,6 @@
 
   <section class="modal modal--scroll modal--wide bg-snow" data-behavior="modal" role="dialog" id="edit_card_grant">
     <%= modal_header(policy(card_grant).update? ? "Manage grant" : "Grant settings") %>
-    <%= turbo_frame_tag "edit_#{card_grant.id}", src: edit_overview_event_card_grant_path(card_grant) %>
+    <%= turbo_frame_tag "edit_#{card_grant.id}", src: edit_purpose_event_card_grant_path(card_grant) %>
   </section>
 <% end %>
diff --git a/app/views/card_grants/actions/_return.html.erb b/app/views/card_grants/actions/_return.html.erb
index d2177a6bb7..6a1a9c3cb2 100644
--- a/app/views/card_grants/actions/_return.html.erb
+++ b/app/views/card_grants/actions/_return.html.erb
@@ -1,12 +1,8 @@
-<%# locals: (card_grant:) %>
+<%# locals: (card_grant:, label: "", subtitle: "") %>
 
-<% return_tooltip = "Cancel this grant and return funds to the organization" %>
-<%= link_to "#", data: { behavior: "modal_trigger", modal: "return-grant" }, class: "btn btn--list-item" do %>
-  <%= inline_icon "support", size: 20 %>
-  <div>
-    <strong>Return grant</strong>
-    <p class="text-sm opacity-60"><%= return_tooltip %></p>
-  </div>
+<% return_tooltip = subtitle.presence || "Cancel this grant and return funds to the organization" %>
+<%= link_to "#", data: { behavior: "modal_trigger", modal: "return-grant" }, class: "grant-action grant-tone--primary" do %>
+  <%= render "card_grants/control", title: label.presence || "Return grant", description: return_tooltip, icon: "reply" %>
 <% end %>
 
 <div class="modal modal--scroll bg-snow" data-behavior="modal" role="dialog" id="return-grant">
diff --git a/app/views/card_grants/actions/_support.html.erb b/app/views/card_grants/actions/_support.html.erb
index f8d2f61d33..825627e9a4 100644
--- a/app/views/card_grants/actions/_support.html.erb
+++ b/app/views/card_grants/actions/_support.html.erb
@@ -1,41 +1,27 @@
-<%# locals: (card_grant:) %>
+<%# locals: (card_grant:, title: "Need help?") %>
 
 <% if card_grant.setting.support_message.present? || card_grant.setting.support_url.present? %>
-  <div class="tooltipped tooltipped--n">
+  <% support_description = capture do %>
     <% if card_grant.setting.support_message.present? %>
-      <button class="btn btn--list-item" data-behavior="modal_trigger" data-modal="support_card_grant_<%= card_grant.id %>">
-        <%= inline_icon "help" %>
-        <div>
-          <p><strong>Get support</strong></p>
-          <p class="text-sm opacity-60">
-            Get in touch with <%= card_grant.event.name %> for support
-          </p>
-        </div>
-      </button>
+      Get in touch with <%= card_grant.event.name %> for support
+    <% elsif card_grant.setting.slack_support? %>
+      Contact <%= card_grant.event.name %> on Slack
+    <% elsif card_grant.setting.email_support? %>
+      Email <%= card_grant.event.name %> for support
     <% else %>
-      <%= link_to card_grant.setting.support_url, target: "_blank", class: "btn btn--list-item" do %>
-        <% if card_grant.setting.slack_support? %>
-          <%= inline_icon "slack" %>
-        <% elsif card_grant.setting.email_support? %>
-          <%= inline_icon "email" %>
-        <% else %>
-          <%= inline_icon "help" %>
-        <% end %>
-        <div>
-          <p><strong>Get support</strong></p>
-          <p class="text-sm opacity-60">
-            <% if card_grant.setting.slack_support? %>
-              Contact <%= card_grant.event.name %> on Slack
-            <% elsif card_grant.setting.email_support? %>
-              Email <%= card_grant.event.name %> for support
-            <% else %>
-              Get in touch with <%= card_grant.event.name %> for support
-            <% end %>
-          </p>
-        </div>
-      <% end %>
+      Get in touch with <%= card_grant.event.name %> for support
     <% end %>
-  </div>
+  <% end %>
+
+  <% if card_grant.setting.support_message.present? %>
+    <button type="button" class="grant-action" data-behavior="modal_trigger" data-modal="support_card_grant_<%= card_grant.id %>">
+      <%= render "card_grants/control", title:, description: support_description, icon: "support" %>
+    </button>
+  <% else %>
+    <%= link_to card_grant.setting.support_url, target: "_blank", rel: "noopener", class: "grant-action" do %>
+      <%= render "card_grants/control", title:, description: support_description, icon: "support" %>
+    <% end %>
+  <% end %>
 
   <% if card_grant.setting.support_message.present? %>
     <section id="support_card_grant_<%= card_grant.id %>" class="modal modal--scroll bg-snow" data-behavior="modal" role="dialog">
diff --git a/app/views/card_grants/edit_overview.html.erb b/app/views/card_grants/edit_overview.html.erb
deleted file mode 100644
index 4f4fcff607..0000000000
--- a/app/views/card_grants/edit_overview.html.erb
+++ /dev/null
@@ -1,36 +0,0 @@
-<turbo-frame id="edit_<%= @card_grant.id %>" autoscroll data-autoscroll-behavior="smooth">
-  <%= render "card_grants/edit_nav", active: "overview" %>
-
-  <section class="details details--wide pb2 details--tall">
-    <p>
-      <strong>Grant sent to</strong>
-      <span><%= mail_to @card_grant.user.email %> (<%= copy_to_clipboard(@card_grant.user.public_id, class: "w-fit", tooltip_direction: "e") %>)</span>
-    </p>
-
-    <p>
-      <strong>Expires on</strong>
-      <span><%= format_date @card_grant.expiration_at %></span>
-    </p>
-
-    <p>
-      <strong>One time use?</strong>
-      <span><%= @card_grant.one_time_use ? "Yes" : "No" %></span>
-    </p>
-
-    <p>
-      <strong>Allowed merchants</strong>
-      <% if @card_grant.allowed_merchants.any? %>
-        <span class="font-mono h5"><%= @card_grant.allowed_merchant_names.to_sentence %></span>
-      <% else %>
-        <span>All merchants allowed</span>
-      <% end %>
-    </p>
-
-    <% if @card_grant.allowed_merchants.any? %>
-      <p>
-        <strong>Merchant IDs</strong>
-        <span class="font-mono h5"><%= @card_grant.allowed_merchants.join(", ") %></span>
-      </p>
-    <% end %>
-  </section>
-</turbo-frame>
diff --git a/app/views/card_grants/edit_purpose.html.erb b/app/views/card_grants/edit_purpose.html.erb
index db938ac0b9..8aa424d6d5 100644
--- a/app/views/card_grants/edit_purpose.html.erb
+++ b/app/views/card_grants/edit_purpose.html.erb
@@ -2,18 +2,18 @@
   <%= render "card_grants/edit_nav", active: "purpose" %>
 
   <div class="flex gap-3">
-    <div>
+    <div class="w-full">
       <%= form_with(model: @card_grant, id: "card_grant_edit_form") do |form| %>
-        <div class="field">
-          <%= form.label :purpose %>
+        <div class="flex items-center justify-between w-full">
+          <strong><%= form.label :purpose %></strong>
           <div class="flex gap-3 items-stretch">
             <%= form.text_field :purpose, placeholder: "OpenAI Credits", disabled: !policy(@card_grant).update? %>
           </div>
         </div>
 
-        <div class="field">
+        <div class="w-full">
           <%= form.label :instructions, "Instructions (optional)", class: "bold" %>
-          <%= form.text_area :instructions, placeholder: "Please only purchase a soldering iron…", class: "min-h-[70px]", disabled: !policy(@card_grant).update? %>
+          <%= form.text_area :instructions, placeholder: "Please only purchase a soldering iron…", class: "!max-w-full min-h-[70px]", disabled: !policy(@card_grant).update? %>
           <p class="h5 muted mt0 mb1">
             <%= link_to "https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#table-of-contents", target: "_blank", class: "flex items-center" do %>
               <%= inline_icon "markdown", size: 32 %> Styling with Markdown is supported
diff --git a/app/views/card_grants/show.html.erb b/app/views/card_grants/show.html.erb
index 452384fcc7..a00267c127 100644
--- a/app/views/card_grants/show.html.erb
+++ b/app/views/card_grants/show.html.erb
@@ -5,86 +5,69 @@
   <%= render "users/nav", selected: :cards %>
 <% end %>
 
-<% footer = nil %>
-<% if @card_grant.user == current_user && @card_grant.pending_invite? %>
-  <% footer = capture do %>
-    <div class="flex flex-row items-center justify-start gap-2 lg:items-end">
-      <div class="flex items-start flex-col lg:flex-row lg:items-end justify-start gap-2">
-        <div class="flex flex-row items-end justify-start gap-2 w-min-content min-w-0 flex-shrink-0">
-          <h3 class="m-0 p-0">Card activation</h3>
-          <%= inline_icon "view-forward", class: "m-0 lg:self-center", size: 20 %>
-        </div>
-        <p class="m-0">We just need one more thing before you can start spending&nbsp;your&nbsp;grant.</p>
-      </div>
-    </div>
-  <% end %>
-<% end %>
+<% own = @card_grant.user == current_user %>
+<% awaiting_activation = own && @card_grant.pending_invite? %>
+<% stripe_card = @card_grant.stripe_card %>
+<%# Once a grant is over there's nothing left to do in order, so the grantee's
+    numbered steps give way to plain headings. %>
+<% ended = @card_grant.canceled? || @card_grant.expired? %>
+<% steps = own && !ended %>
 
-<%= render partial: "card_grants/header_banner", locals: { card_grant: @card_grant, footer: } %>
+<%= render partial: "card_grants/hero", locals: { card_grant: @card_grant } %>
 
-<% if @card_grant.instructions.present? && !(@card_grant.user == current_user && @card_grant.pending_invite?) %>
-  <%= render "application/callout", title: "Instructions from #{@card_grant.event.name}", type: "info", class: "mb-4" do %>
-    <p class="m-0">
-      <%= MarkdownService.instance.render(@card_grant.instructions) %>
-    </p>
+<%# Everything that explains the grant's state sits together under the hero. %>
+<% notices = capture do %>
+  <%= render partial: "card_grants/status_callout", locals: { card_grant: @card_grant } %>
+
+  <%= render partial: "card_grant/pre_authorizations/organizer_info", locals: { pre_authorization: @card_grant.pre_authorization, link_to_pre_authorization: true } if @card_grant.pre_authorization.present? && organizer_signed_in? %>
+
+  <% if @card_grant.instructions.present? %>
+    <%= render "application/callout", title: "Instructions from #{@card_grant.event.name}", type: "info" do %>
+      <p class="m-0">
+        <%= MarkdownService.instance.render(@card_grant.instructions) %>
+      </p>
+    <% end %>
   <% end %>
 <% end %>
+<% if notices.present? %>
+  <div class="grant-notices"><%= notices %></div>
+<% end %>
 
-<div class="sm:mt-5 check--form flex justify-center <%= "flex-wrap" if @frame %> mb-5" style="gap: 3rem">
-  <%# Grantee has pending invite %>
-  <% if @card_grant.user == current_user && @card_grant.pending_invite? %>
-    <%= render partial: "card_grants/invitation", locals: { card_grant: @card_grant } %>
-  <%# Grant was converted into a reimbursement report %>
-  <% elsif @card_grant.user == current_user && @card_grant.converted_to_reimbursement_report? %>
-    <div class="flex-grow">
-      <%= blankslate "This grant was converted into a reimbursement report." %>
-      <% if policy(@card_grant.reimbursement_report).show? %>
-        <p class="text-center">
-          <%= link_to "View reimbursement report", @card_grant.reimbursement_report %>
-        </p>
-      <% end %>
-    </div>
-  <%# Grant was canceled before the grantee accepted the invite %>
-  <% elsif @card_grant.user == current_user && @card_grant.stripe_card.nil? && @card_grant.canceled? %>
-    <%= blankslate "Sorry, this grant was canceled!", class: "flex-grow" %>
-  <%# Grantee has accepted invite %>
-  <% elsif organizer_signed_in? || @card_grant.user == current_user %>
-    <div class="justify-center flex flex-col sm:flex-row w-full gap-2">
-      <% if @card_grant.stripe_card %>
-        <div class="sm:max-w-[300px]">
-          <div class="<%= "scale-[0.98] transition-transform hover:scale-1 mb-2" if @card_grant.canceled? %>">
-            <%= render "stripe_cards/stripe_card", stripe_card: @card_grant.stripe_card, headless: true %>
-          </div>
-          <%= render partial: "card_grants/balance", locals: { card_grant: @card_grant } %>
-          <%= render partial: "card_grants/canceled_warning", locals: { card_grant: @card_grant } %>
-          <%= render partial: "card_grants/actions", locals: { card_grant: @card_grant } %>
-        </div>
-      <% end %>
-      <div class="flex flex-col flex-1 gap-2 mt-1.5">
-        <% if @card_grant.stripe_card %>
-          <% admin_tool_if @card_grant.user != current_user do %>
-            <%= render partial: "card_grants/card_details", locals: { card_grant: @card_grant } %>
-          <% end %>
-        <% elsif @card_grant.canceled? %>
-          <div class="self-center">
-            <%= render partial: "card_grants/canceled_warning", locals: { card_grant: @card_grant } %>
-          </div>
-        <% end %>
-        <%= render partial: "card_grants/grant_details", locals: { card_grant: @card_grant } %>
-
-        <%= render partial: "card_grant/pre_authorizations/organizer_info", locals: { pre_authorization: @card_grant.pre_authorization, link_to_pre_authorization: true } if @card_grant.pre_authorization.present? && organizer_signed_in? %>
+<% if awaiting_activation %>
+  <%= render partial: "card_grants/invitation", locals: { card_grant: @card_grant } %>
+<% elsif own && (@card_grant.converted_to_reimbursement_report? || stripe_card.nil?) %>
+  <%# The grant ended before (or instead of) the card being used, so the
+      spending rules and card details don't apply: just the money trail. %>
+  <%= render "card_grants/section_heading", title: "Transactions" %>
+  <%= render partial: "card_grants/transactions", locals: { hcb_codes: @hcb_codes, ledger: @ledger, items: @items, heading: false } %>
+<% elsif organizer_signed_in? || own %>
+  <% unless own && ended %>
+    <%= render "card_grants/section_heading", icon: steps ? "1" : "", title: own ? "What you can spend it on" : "Spending controls", own: own %>
+    <%= render partial: "card_grants/grant_details", locals: { card_grant: @card_grant, own: own } %>
+  <% end %>
 
-      </div>
-    </div>
+  <% if stripe_card.present? %>
+    <%= render "card_grants/section_heading", icon: steps ? "2" : "", title: own ? (ended ? "Your card" : "Pay with your card") : "Virtual card", own: own %>
+    <%= render partial: "card_grants/card_details", locals: { card_grant: @card_grant } %>
   <% end %>
-</div>
 
-<% unless @card_grant.user == current_user && @card_grant.pending_invite? %>
-  <%= render partial: "card_grants/transactions", locals: { hcb_codes: @hcb_codes, ledger: @ledger, items: @items } %>
+  <%= render "card_grants/section_heading", icon: steps ? "3" : "", title: own ? "Upload a receipt for every purchase" : "Transactions", own: own, badge: ("Required" if own) %>
+  <%= render partial: "card_grants/transactions", locals: { hcb_codes: @hcb_codes, ledger: @ledger, items: @items, heading: false } %>
 <% end %>
 
 <% if policy(@card_grant.comments.build).create? %>
-  <h2>Comments</h2>
-  <%= render "comments/list", comments: @card_grant.comments, show_blankslate: true %>
-  <%= render "comments/form", commentable: @card_grant %>
+  <% comments = policy_scope(@card_grant.comments) %>
+  <div class="mt-10 mb-10 block menu__divider"></div>
+  <details class="grant-comments" <%= "open" if comments.any? %>>
+    <summary class="grant-comments__summary">
+      <h2 class="grant-section m-0">
+        Comments
+        <span class="grant-comments__count"><%= comments.size %></span>
+      </h2>
+    </summary>
+    <div class="grant-comments__body">
+      <%= render "comments/list", comments: @card_grant.comments, show_blankslate: true %>
+      <%= render "comments/form", commentable: @card_grant %>
+    </div>
+  </details>
 <% end %>
diff --git a/app/views/stripe_cards/actions/_freeze.html.erb b/app/views/stripe_cards/actions/_freeze.html.erb
index 39ce2bd2f9..0ca5afed7a 100644
--- a/app/views/stripe_cards/actions/_freeze.html.erb
+++ b/app/views/stripe_cards/actions/_freeze.html.erb
@@ -1,39 +1,80 @@
-<%# locals: (stripe_card:, label: "") %>
+<%# locals: (stripe_card:, label: "", subtitle: "", variant: "list_item") %>
+
+<% control = variant.to_s == "control" %>
 
 <% if stripe_card&.stripe_status == 'inactive' %>
-  <% defrost_tooltip = "Instantly re-freeze #{stripe_card.user == current_user ? "your" : stripe_card.user.possessive_name} card anytime" %>
-  <%= button_to defrost_stripe_card_path(stripe_card),
-                method: :post,
-                form_class: "contents",
-                class: "btn btn--list-item",
-                disabled: !policy(stripe_card).defrost?,
-                data: { turbo: true, turbo_frame: "_top" } do %>
-    <%= inline_icon "freeze" %>
-    <div>
-      <strong>Defrost</strong>
-      <p class="text-sm opacity-60"><%= policy(stripe_card).defrost? ? defrost_tooltip : "You don't have permission to perform this action" %></p>
-    </div>
+  <% defrost_tooltip = subtitle.presence || "Instantly re-freeze #{stripe_card.user == current_user ? "your" : stripe_card.user.possessive_name} card anytime" %>
+  <% defrost_subtitle = policy(stripe_card).defrost? ? defrost_tooltip : "You don't have permission to perform this action" %>
+  <% if control %>
+    <%= button_to defrost_stripe_card_path(stripe_card),
+                  method: :post,
+                  form_class: "contents",
+                  class: "grant-action grant-tone--info",
+                  disabled: !policy(stripe_card).defrost?,
+                  data: { turbo: true, turbo_frame: "_top" } do %>
+      <%# `label`/`subtitle` describe freezing, so the frozen state has its own copy. %>
+      <%# Say who can defrost it rather than a bare permission error; the status callout has the contact details. %>
+      <% defrost_description = if policy(stripe_card).defrost?
+                                 "Defrost it to start spending again"
+                               elsif stripe_card.event.financially_frozen? || stripe_card.user.locked?
+                                 "Only the HCB team can defrost this card"
+                               else
+                                 "Ask a manager of #{stripe_card.event.name} to defrost it"
+                               end %>
+      <%= render "card_grants/control", title: "Card frozen", description: defrost_description, icon: "freeze" %>
+    <% end %>
+  <% else %>
+    <%= button_to defrost_stripe_card_path(stripe_card),
+                  method: :post,
+                  form_class: "contents",
+                  class: "btn btn--list-item",
+                  disabled: !policy(stripe_card).defrost?,
+                  data: { turbo: true, turbo_frame: "_top" } do %>
+      <%= inline_icon "freeze" %>
+      <div>
+        <strong>Defrost</strong>
+        <p class="text-sm opacity-60"><%= defrost_subtitle %></p>
+      </div>
+    <% end %>
   <% end %>
 <% elsif stripe_card&.stripe_status == 'active' %>
-  <% freeze_tooltip = label.presence || "Instantly freeze #{stripe_card.user == current_user ? "your" : stripe_card.user.possessive_name} card anytime" %>
-  <%= button_to freeze_stripe_card_path(stripe_card),
-                method: :post,
-                form_class: "contents",
-                class: "btn btn--list-item",
-                disabled: !policy(stripe_card).freeze?,
-                data: { turbo: true, turbo_frame: "_top" } do %>
-    <%= inline_icon "freeze" %>
-    <div>
-      <strong>Freeze</strong>
-      <p class="text-sm opacity-60"><%= policy(stripe_card).freeze? ? freeze_tooltip : "You don't have permission to perform this action" %></p>
-    </div>
+  <% freeze_tooltip = subtitle.presence || label.presence || "Instantly freeze #{stripe_card.user == current_user ? "your" : stripe_card.user.possessive_name} card anytime" %>
+  <% freeze_subtitle = policy(stripe_card).freeze? ? freeze_tooltip : "You don't have permission to perform this action" %>
+  <% if control %>
+    <%= button_to freeze_stripe_card_path(stripe_card),
+                  method: :post,
+                  form_class: "contents",
+                  class: "grant-action grant-tone--info",
+                  disabled: !policy(stripe_card).freeze?,
+                  data: { turbo: true, turbo_frame: "_top" } do %>
+      <%= render "card_grants/control", title: label.presence || "Freeze", description: freeze_subtitle, icon: "freeze" %>
+    <% end %>
+  <% else %>
+    <%= button_to freeze_stripe_card_path(stripe_card),
+                  method: :post,
+                  form_class: "contents",
+                  class: "btn btn--list-item",
+                  disabled: !policy(stripe_card).freeze?,
+                  data: { turbo: true, turbo_frame: "_top" } do %>
+      <%= inline_icon "freeze" %>
+      <div>
+        <strong>Freeze</strong>
+        <p class="text-sm opacity-60"><%= freeze_subtitle %></p>
+      </div>
+    <% end %>
   <% end %>
 <% elsif !stripe_card&.canceled? %>
-  <button type="button" class="btn btn--list-item" disabled>
-    <%= inline_icon "freeze" %>
-    <div>
-      <strong>Freeze</strong>
-      <p class="text-sm opacity-60">This card cannot be frozen because it has not been activated</p>
-    </div>
-  </button>
+  <% if control %>
+    <button type="button" class="grant-action grant-tone--info" disabled>
+      <%= render "card_grants/control", title: "Freeze", description: "This card cannot be frozen because it has not been activated", icon: "freeze" %>
+    </button>
+  <% else %>
+    <button type="button" class="btn btn--list-item" disabled>
+      <%= inline_icon "freeze" %>
+      <div>
+        <strong>Freeze</strong>
+        <p class="text-sm opacity-60">This card cannot be frozen because it has not been activated</p>
+      </div>
+    </button>
+  <% end %>
 <% end %>
diff --git a/config/routes.rb b/config/routes.rb
index 18cc3cc8a4..85f62d1ed8 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -1134,7 +1134,6 @@
         post "disable_pre_authorization"
         post "permit_merchant"
 
-        get "edit/overview", to: "card_grants#edit_overview"
         get "edit/usage_restrictions", to: "card_grants#edit_usage_restrictions"
         get "edit/expiration", to: "card_grants#edit_expiration"
         get "edit/purpose", to: "card_grants#edit_purpose"
diff --git a/spec/controllers/card_grant/pre_authorizations_controller_spec.rb b/spec/controllers/card_grant/pre_authorizations_controller_spec.rb
new file mode 100644
index 0000000000..d2943a2866
--- /dev/null
+++ b/spec/controllers/card_grant/pre_authorizations_controller_spec.rb
@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+require "rails_helper"
+
+RSpec.describe CardGrant::PreAuthorizationsController do
+  include SessionSupport
+  render_views
+
+  describe "#show" do
+    it "doesn't link a non-http product URL" do
+      event = create(:event, :with_positive_balance, plan_type: Event::Plan::HackClubAffiliate)
+      card_grant = create(:card_grant, event:)
+      card_grant.update_columns(user_id: card_grant.stripe_card.user.id)
+      # The format validation only checks that an http(s) URL appears somewhere
+      # in the string, so this saves.
+      pre_authorization = CardGrant::PreAuthorization.create!(card_grant:)
+      pre_authorization.update_columns(product_url: "javascript:alert(1)//http://example.com", aasm_state: "submitted")
+      create_session(card_grant.user.reload, verified: true)
+
+      get(:show, params: { card_grant_id: card_grant.hashid })
+
+      expect(response).to have_http_status(:ok)
+      expect(response.body).to include("javascript:alert(1)//http://example.com")
+      expect(response.body).not_to include('href="javascript:')
+    end
+  end
+end
diff --git a/spec/controllers/card_grants_controller_spec.rb b/spec/controllers/card_grants_controller_spec.rb
index 826114b2d3..591f3854d0 100644
--- a/spec/controllers/card_grants_controller_spec.rb
+++ b/spec/controllers/card_grants_controller_spec.rb
@@ -6,6 +6,216 @@
   include SessionSupport
   render_views
 
+  describe "#show" do
+    let(:event) { create(:event, :with_positive_balance, plan_type: Event::Plan::HackClubAffiliate) }
+
+    it "renders the card, rules and transactions for the grantee" do
+      card_grant = create(:card_grant, event:, merchant_lock: ["abc123"])
+      card_grant.update_columns(user_id: card_grant.stripe_card.user.id)
+      create_session(card_grant.user.reload, verified: true)
+
+      get(:show, params: { id: card_grant.hashid })
+
+      expect(response).to have_http_status(:ok)
+      expect(response.body).to include("Billing address")
+      expect(response.body).to include("Show details")
+      expect(response.body).to include("What you can spend it on")
+      expect(response.body).to include("Upload a receipt for every purchase")
+      expect(response.body).not_to include("Merchant IDs")
+    end
+
+    it "renders the activation prompt before the card exists" do
+      card_grant = create(:card_grant, event:)
+      card_grant.update!(stripe_card: nil)
+      create_session(card_grant.user, verified: true)
+
+      get(:show, params: { id: card_grant.hashid })
+
+      expect(response).to have_http_status(:ok)
+      expect(response.body).to include("Activate your grant card")
+      expect(response.body).not_to include("Billing address")
+    end
+
+    it "shows an organizer the masked card but not the grantee's billing address or PIN" do
+      organizer = create(:user)
+      card_grant = create(:card_grant, event:, merchant_lock: ["abc123"])
+      card_grant.stripe_card.update_columns(cash_withdrawal_enabled: true)
+      create(:organizer_position, user: organizer, event:)
+      create_session(organizer, verified: true)
+
+      get(:show, params: { id: card_grant.hashid, show_details: "true" })
+
+      expect(response).to have_http_status(:ok)
+      expect(response.body).to include("Virtual card")
+      expect(response.body).to include("Spending controls")
+      expect(response.body).to include("Merchant IDs: abc123")
+      expect(response.body).to include("Name on card")
+      expect(response.body).to include(card_grant.stripe_card.hidden_card_number_with_last_four)
+      expect(response.body).not_to include("Billing address")
+      expect(response.body).not_to include("Show details")
+      expect(response.body).not_to include("card-pin")
+    end
+
+    it "shows defrost copy, not the freeze copy, once the grantee's card is frozen" do
+      card_grant = create(:card_grant, event:)
+      card_grant.update_columns(user_id: card_grant.stripe_card.user.id)
+      card_grant.stripe_card.update_columns(stripe_status: "inactive")
+      create_session(card_grant.user.reload, verified: true)
+
+      get(:show, params: { id: card_grant.hashid })
+
+      expect(response.body).to include("Card frozen")
+      expect(response.body).not_to include("Pause spending instantly")
+    end
+
+    it "shows a frozen notice above the card when the grantee's card is frozen" do
+      card_grant = create(:card_grant, event:)
+      card_grant.update_columns(user_id: card_grant.stripe_card.user.id)
+      card_grant.stripe_card.update_columns(stripe_status: "inactive", initially_activated: true)
+      create_session(card_grant.user.reload, verified: true)
+
+      get(:show, params: { id: card_grant.hashid })
+
+      expect(response.body).to include("This card is frozen")
+      expect(response.body).to include("status bg-warning")
+    end
+
+    it "tells the grantee who to contact when someone else froze their card" do
+      allow(User).to receive(:system_user).and_return(create(:user, email: User::SYSTEM_USER_EMAIL))
+      organizer = create(:user)
+      create(:organizer_position, user: organizer, event:)
+      card_grant = create(:card_grant, event:)
+      card_grant.update_columns(user_id: card_grant.stripe_card.user.id)
+      card_grant.setting.update!(support_url: "mailto:help@example.com")
+      card_grant.stripe_card.update_columns(event_id: event.id, stripe_status: "inactive", initially_activated: true, last_frozen_by_id: organizer.id)
+      create_session(card_grant.user.reload, verified: true)
+
+      get(:show, params: { id: card_grant.hashid })
+
+      expect(response.body).to include(ERB::Util.h("ask #{organizer.name} or a manager of #{event.name} to defrost it"))
+      expect(response.body).to include(ERB::Util.h("Ask a manager of #{event.name} to defrost it"))
+      expect(response.body).to include(ERB::Util.h("Email #{event.name}"))
+      expect(response.body).not_to include("You don&#39;t have permission")
+    end
+
+    it "explains a canceled grant to the grantee without the spending rules" do
+      card_grant = create(:card_grant, event:)
+      card_grant.update_columns(user_id: card_grant.stripe_card.user.id, status: :canceled)
+      card_grant.stripe_card.update_columns(stripe_status: "canceled")
+      create_session(card_grant.user.reload, verified: true)
+
+      get(:show, params: { id: card_grant.hashid })
+
+      expect(response).to have_http_status(:ok)
+      expect(response.body).to include("This grant has been canceled")
+      expect(response.body).to include("Canceled on")
+      expect(response.body).to include("Your card")
+      expect(response.body).to include("Upload a receipt for every purchase")
+      expect(response.body).not_to include("What you can spend it on")
+      expect(response.body).not_to include("Pause spending instantly")
+      expect(response.body).not_to include("grant-section__icon")
+    end
+
+    it "explains a grant canceled before the card was activated" do
+      card_grant = create(:card_grant, event:)
+      card_grant.update!(stripe_card: nil)
+      card_grant.update_columns(status: :canceled)
+      create_session(card_grant.user, verified: true)
+
+      get(:show, params: { id: card_grant.hashid })
+
+      expect(response).to have_http_status(:ok)
+      expect(response.body).to include("canceled before the card was activated")
+      expect(response.body).not_to include("Activate your grant card")
+      expect(response.body).not_to include("Name on card")
+    end
+
+    it "explains an expired grant to an organizer" do
+      organizer = create(:user)
+      card_grant = create(:card_grant, event:)
+      card_grant.update_columns(status: :expired)
+      card_grant.stripe_card.update_columns(stripe_status: "canceled")
+      create(:organizer_position, user: organizer, event:)
+      create_session(organizer, verified: true)
+
+      get(:show, params: { id: card_grant.hashid })
+
+      expect(response).to have_http_status(:ok)
+      expect(response.body).to include("This grant expired on")
+      expect(response.body).to include("Expired on")
+      expect(response.body).to include("Spending controls")
+      expect(response.body).to include("status bg-muted")
+    end
+
+    it "links the grantee to the reimbursement report once converted" do
+      card_grant = create(:card_grant, event:)
+      card_grant.update_columns(user_id: card_grant.stripe_card.user.id, status: :canceled)
+      card_grant.stripe_card.update_columns(stripe_status: "canceled")
+      create(:reimbursement_report, event:, user: card_grant.user.reload, card_grant:)
+      create_session(card_grant.user, verified: true)
+
+      get(:show, params: { id: card_grant.hashid })
+
+      expect(response).to have_http_status(:ok)
+      expect(response.body).to include("converted into a reimbursement report")
+      expect(response.body).to include("View reimbursement report")
+      expect(response.body).not_to include("Name on card")
+      expect(response.body).not_to include("This grant has been canceled")
+    end
+
+    it "tells an organizer the grantee hasn't activated the grant yet" do
+      organizer = create(:user)
+      card_grant = create(:card_grant, event:)
+      card_grant.update!(stripe_card: nil)
+      create(:organizer_position, user: organizer, event:)
+      create_session(organizer, verified: true)
+
+      get(:show, params: { id: card_grant.hashid })
+
+      expect(response).to have_http_status(:ok)
+      expect(response.body).to include("to activate this grant")
+      expect(response.body).to include("status bg-info")
+      expect(response.body).not_to include("Virtual card")
+    end
+
+    it "explains why cancel is disabled for a member who can't cancel" do
+      create(:organizer_position, event:, role: :manager)
+      member = create(:user)
+      create(:organizer_position, user: member, event:, role: :member)
+      card_grant = create(:card_grant, event:)
+      create_session(member, verified: true)
+
+      get(:show, params: { id: card_grant.hashid })
+
+      expect(response.body).to include("You don&#39;t have permission to perform this action")
+      expect(response.body).not_to include("Return the balance to")
+    end
+
+    it "shows the grantee help articles" do
+      card_grant = create(:card_grant, event:)
+      card_grant.update_columns(user_id: card_grant.stripe_card.user.id)
+      create_session(card_grant.user.reload, verified: true)
+
+      get(:show, params: { id: card_grant.hashid })
+
+      expect(response.body).to include("All articles")
+      expect(response.body).to include("My card was declined")
+      expect(response.body).to include("I&#39;m out of funds")
+      expect(response.body).to include("I have multiple grants")
+    end
+
+    it "keeps the grantee help articles off the organizer's view" do
+      organizer = create(:user)
+      card_grant = create(:card_grant, event:)
+      create(:organizer_position, user: organizer, event:)
+      create_session(organizer, verified: true)
+
+      get(:show, params: { id: card_grant.hashid })
+
+      expect(response.body).not_to include("All articles")
+    end
+  end
+
   describe "read-only grant settings" do
     it "allows members to view, but not edit, grant settings" do
       member = create(:user)