From 823eca7dc528c17f831922e68fedc63452c6344f Mon Sep 17 00:00:00 2001
From: Dave Earley <dave@hi.events>
Date: Mon, 27 Jul 2026 22:57:46 +0100
Subject: [PATCH 1/6] Fix undefined email on signup

---
 .../components/forms/OrganizerForm/index.tsx  | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/forms/OrganizerForm/index.tsx b/frontend/src/components/forms/OrganizerForm/index.tsx
index fa6c1aaf92..a7887d7b3d 100644
--- a/frontend/src/components/forms/OrganizerForm/index.tsx
+++ b/frontend/src/components/forms/OrganizerForm/index.tsx
@@ -95,15 +95,20 @@ export const OrganizerCreateForm = ({onSuccess, onCancel}: OrganizerFormProps) =
     }
 
     useEffect(() => {
-        if (meFetched) {
-            form.setFieldValue('currency', String(account?.currency_code));
+        if (!accountFetched) {
+            return;
         }
-        if (accountFetched) {
-            form.setFieldValue('name', String(account?.name));
-            form.setFieldValue('email', String(me?.email));
-            form.setFieldValue('timezone', String(me?.timezone));
+        form.setFieldValue('currency', account?.currency_code ?? '');
+        form.setFieldValue('name', account?.name ?? '');
+    }, [accountFetched]);
+
+    useEffect(() => {
+        if (!meFetched) {
+            return;
         }
-    }, [accountFetched, meFetched]);
+        form.setFieldValue('email', me?.email ?? '');
+        form.setFieldValue('timezone', me?.timezone ?? Intl.DateTimeFormat().resolvedOptions().timeZone);
+    }, [meFetched]);
 
     return (
         <LoadingContainer>

From 0181d3d746f32dacfcd3e9c63943e828974586bd Mon Sep 17 00:00:00 2001
From: Dave Earley <dave@hi.events>
Date: Mon, 27 Jul 2026 23:12:00 +0100
Subject: [PATCH 2/6] Improve email templates

---
 .../emails/orders/attendee-ticket.blade.php   |   3 +-
 .../organizer/summary-for-organizer.blade.php |   3 -
 .../views/emails/orders/summary.blade.php     |   6 +-
 .../views/vendor/mail/html/footer.blade.php   |   4 +-
 .../views/vendor/mail/html/header.blade.php   |   6 +-
 .../views/vendor/mail/html/layout.blade.php   |  14 +-
 .../views/vendor/mail/html/message.blade.php  |   6 +-
 .../views/vendor/mail/html/themes/default.css | 208 ++++++++++++------
 8 files changed, 159 insertions(+), 91 deletions(-)

diff --git a/backend/resources/views/emails/orders/attendee-ticket.blade.php b/backend/resources/views/emails/orders/attendee-ticket.blade.php
index df55702afa..2e7514b488 100644
--- a/backend/resources/views/emails/orders/attendee-ticket.blade.php
+++ b/backend/resources/views/emails/orders/attendee-ticket.blade.php
@@ -35,8 +35,7 @@
 
 <x-mail::message>
 # {{ __('You\'re going to') }} {{ $event->getTitle() }}! 🎉
-<br>
-<br>
+
 @if($order->isOrderAwaitingOfflinePayment())
 <div style="border-radius: 4px; background-color: #f8d7da; color: #842029; margin-bottom: 1.5rem; padding: 1rem;">
 <p>
diff --git a/backend/resources/views/emails/orders/organizer/summary-for-organizer.blade.php b/backend/resources/views/emails/orders/organizer/summary-for-organizer.blade.php
index 6d69ccda10..3a790b06ba 100644
--- a/backend/resources/views/emails/orders/organizer/summary-for-organizer.blade.php
+++ b/backend/resources/views/emails/orders/organizer/summary-for-organizer.blade.php
@@ -7,10 +7,7 @@
 <x-mail::message>
 # {{ __('You\'ve received a new order!') }} 🎉
 
-<br>
 {{ __('Congratulations! You\'ve received a new order for ') }} <b>{{ $event->getTitle() }}</b>! {{ __('Please find the details below.') }}
-<br>
-<br>
 
 @if($order->isOrderAwaitingOfflinePayment())
 <div style="border-radius: 4px; background-color: #f8d7da; color: #842029; margin-bottom: 1.5rem; padding: 1rem;">
diff --git a/backend/resources/views/emails/orders/summary.blade.php b/backend/resources/views/emails/orders/summary.blade.php
index bdd61636ce..ca84e41df1 100644
--- a/backend/resources/views/emails/orders/summary.blade.php
+++ b/backend/resources/views/emails/orders/summary.blade.php
@@ -41,7 +41,7 @@
 
 <p>
 
-# {{ __('Event Details') }}
+## {{ __('Event Details') }}
 **{{ __('Event Name:') }}** {{ $event->getTitle() }}
     <br>
 **{{ __('Date & Time:') }}** {{ __(':date at :time', ['date' => $displayDate, 'time' => $displayTime]) }}
@@ -55,14 +55,14 @@
 @if($eventSettings->getPostCheckoutMessage() && $order->isOrderCompleted())
 <p>
 
-# {{ __('Additional Information') }}
+## {{ __('Additional Information') }}
 
 {!! $eventSettings->getPostCheckoutMessage() !!}
 
 </p>
 @endif
 
-# {{ __('Order Summary') }}
+## {{ __('Order Summary') }}
 - **{{ __('Order Number:') }}** {{ $order->getPublicId() }}
 - **{{ __('Total Amount:') }}** {{ Currency::format($order->getTotalGross(), $event->getCurrency()) }}
 
diff --git a/backend/resources/views/vendor/mail/html/footer.blade.php b/backend/resources/views/vendor/mail/html/footer.blade.php
index 33f7dad76d..e00bda4e31 100644
--- a/backend/resources/views/vendor/mail/html/footer.blade.php
+++ b/backend/resources/views/vendor/mail/html/footer.blade.php
@@ -1,8 +1,8 @@
 <tr>
     <td>
-        <table class="footer" align="center" width="570" cellpadding="0" cellspacing="0" role="presentation">
+        <table class="footer" align="center" width="600" cellpadding="0" cellspacing="0" role="presentation">
             <tr>
-                <td class="content-cell" align="center">
+                <td class="footer-cell" align="center">
                     {{ Illuminate\Mail\Markdown::parse($slot) }}
                 </td>
             </tr>
diff --git a/backend/resources/views/vendor/mail/html/header.blade.php b/backend/resources/views/vendor/mail/html/header.blade.php
index 6e30a3df94..7de65ac147 100644
--- a/backend/resources/views/vendor/mail/html/header.blade.php
+++ b/backend/resources/views/vendor/mail/html/header.blade.php
@@ -2,11 +2,7 @@
 <tr>
     <td class="header">
         <a href="{{ $url }}" style="display: inline-block;">
-            @if (trim($slot) === 'Laravel')
-                <img src="https://laravel.com/img/notification-logo.png" class="logo" alt="Laravel Logo">
-            @else
-                {{ $slot }}
-            @endif
+            {{ $slot }}
         </a>
     </td>
 </tr>
diff --git a/backend/resources/views/vendor/mail/html/layout.blade.php b/backend/resources/views/vendor/mail/html/layout.blade.php
index 574631dd92..692cf993b1 100644
--- a/backend/resources/views/vendor/mail/html/layout.blade.php
+++ b/backend/resources/views/vendor/mail/html/layout.blade.php
@@ -8,18 +8,28 @@
     <meta name="color-scheme" content="light">
     <meta name="supported-color-schemes" content="light">
     <style>
-        @media only screen and (max-width: 600px) {
+        @media only screen and (max-width: 640px) {
             .inner-body {
+                border-radius: 0 !important;
                 width: 100% !important;
             }
 
             .footer {
                 width: 100% !important;
             }
+
+            .content-cell {
+                padding: 28px 24px !important;
+            }
+
+            h1 {
+                font-size: 22px !important;
+            }
         }
 
         @media only screen and (max-width: 500px) {
             .button {
+                text-align: center;
                 width: 100% !important;
             }
         }
@@ -36,7 +46,7 @@
                 <!-- Email Body -->
                 <tr>
                     <td class="body" width="100%" cellpadding="0" cellspacing="0" style="border: hidden !important;">
-                        <table class="inner-body" align="center" width="570" cellpadding="0" cellspacing="0"
+                        <table class="inner-body" align="center" width="600" cellpadding="0" cellspacing="0"
                                role="presentation">
                             <!-- Body content -->
                             <tr>
diff --git a/backend/resources/views/vendor/mail/html/message.blade.php b/backend/resources/views/vendor/mail/html/message.blade.php
index 737c8aa3e3..62082a6312 100644
--- a/backend/resources/views/vendor/mail/html/message.blade.php
+++ b/backend/resources/views/vendor/mail/html/message.blade.php
@@ -3,11 +3,9 @@
     <x-slot:header>
         <x-mail::header :url="config('app.email_logo_link_url')">
             @if($appLogo = config('app.email_logo_url'))
-                <img src="{{ $appLogo }}" class="logo" alt="{{ config('app.name') }}"
-                     style="max-width: 300px;">
+                <img src="{{ $appLogo }}" class="logo" alt="{{ config('app.name') }}">
             @else
-                <img src="{{ config('app.frontend_url') }}/logos/hi-events-stacked-light.png" class="logo" alt="{{ config('app.name') }}"
-                     style="max-width: 300px;">
+                <img src="{{ config('app.frontend_url') }}/logos/hi-events-stacked-light.png" class="logo" alt="{{ config('app.name') }}">
             @endif
         </x-mail::header>
     </x-slot:header>
diff --git a/backend/resources/views/vendor/mail/html/themes/default.css b/backend/resources/views/vendor/mail/html/themes/default.css
index 607cae0a21..5ad747f517 100644
--- a/backend/resources/views/vendor/mail/html/themes/default.css
+++ b/backend/resources/views/vendor/mail/html/themes/default.css
@@ -3,17 +3,18 @@
 body,
 body *:not(html):not(style):not(br):not(tr):not(code) {
     box-sizing: border-box;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
+    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
     'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
     position: relative;
 }
 
 body {
     -webkit-text-size-adjust: none;
-    background-color: #ffffff;
-    color: #718096;
+    -webkit-font-smoothing: antialiased;
+    background-color: #f4f2f7;
+    color: #56506a;
     height: 100%;
-    line-height: 1.4;
+    line-height: 1.65;
     margin: 0;
     padding: 0;
     width: 100% !important;
@@ -23,12 +24,13 @@ p,
 ul,
 ol,
 blockquote {
-    line-height: 1.4;
+    line-height: 1.65;
     text-align: left;
 }
 
 a {
-    color: #3869d4;
+    color: #40296c;
+    text-decoration: underline;
 }
 
 a img {
@@ -38,36 +40,84 @@ a img {
 /* Typography */
 
 h1 {
-    color: #3d4852;
-    font-size: 18px;
-    font-weight: bold;
-    margin-top: 0;
+    color: #191029;
+    font-size: 25px;
+    font-weight: 700;
+    letter-spacing: -0.02em;
+    line-height: 1.3;
+    margin: 0 0 16px;
     text-align: left;
 }
 
 h2 {
-    font-size: 16px;
-    font-weight: bold;
-    margin-top: 0;
+    color: #2b2140;
+    font-size: 18px;
+    font-weight: 600;
+    letter-spacing: -0.01em;
+    line-height: 1.4;
+    margin: 28px 0 10px;
     text-align: left;
 }
 
 h3 {
-    font-size: 14px;
-    font-weight: bold;
-    margin-top: 0;
+    color: #2b2140;
+    font-size: 15px;
+    font-weight: 600;
+    line-height: 1.5;
+    margin: 24px 0 8px;
     text-align: left;
 }
 
 p {
     font-size: 16px;
-    line-height: 1.5em;
-    margin-top: 0;
+    line-height: 1.65;
+    margin: 0 0 16px;
     text-align: left;
 }
 
 p.sub {
-    font-size: 12px;
+    color: #8e879e;
+    font-size: 13px;
+}
+
+strong,
+b {
+    color: #2b2140;
+    font-weight: 600;
+}
+
+ul,
+ol {
+    margin: 0 0 16px;
+    padding-left: 20px;
+}
+
+li {
+    font-size: 16px;
+    line-height: 1.65;
+    margin-bottom: 6px;
+}
+
+hr {
+    border: none;
+    border-top: 1px solid #ebe7f2;
+    margin: 32px 0;
+}
+
+blockquote {
+    border-left: 3px solid #e2dcee;
+    color: #8e879e;
+    margin: 0 0 16px;
+    padding: 2px 0 2px 16px;
+}
+
+code {
+    background-color: #f3f0f9;
+    border-radius: 4px;
+    color: #40296c;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    font-size: 14px;
+    padding: 2px 6px;
 }
 
 img {
@@ -80,7 +130,7 @@ img {
     -premailer-cellpadding: 0;
     -premailer-cellspacing: 0;
     -premailer-width: 100%;
-    background-color: #edf2f7;
+    background-color: #f4f2f7;
     margin: 0;
     padding: 0;
     width: 100%;
@@ -98,21 +148,22 @@ img {
 /* Header */
 
 .header {
-    padding: 25px 0;
+    padding: 32px 0 28px;
     text-align: center;
 }
 
 .header a {
-    color: #3d4852;
+    color: #191029;
     font-size: 19px;
-    font-weight: bold;
+    font-weight: 700;
+    letter-spacing: -0.02em;
     text-decoration: none;
 }
 
 /* Logo */
 
 .logo {
-    max-width: 300px;
+    max-width: 220px;
     width: 150px;
 }
 
@@ -122,9 +173,7 @@ img {
     -premailer-cellpadding: 0;
     -premailer-cellspacing: 0;
     -premailer-width: 100%;
-    background-color: #edf2f7;
-    border-bottom: 1px solid #edf2f7;
-    border-top: 1px solid #edf2f7;
+    background-color: #f4f2f7;
     margin: 0;
     padding: 0;
     width: 100%;
@@ -133,27 +182,31 @@ img {
 .inner-body {
     -premailer-cellpadding: 0;
     -premailer-cellspacing: 0;
-    -premailer-width: 570px;
+    -premailer-width: 600px;
     background-color: #ffffff;
-    border-color: #e8e5ef;
-    border-radius: 2px;
-    border-width: 1px;
-    box-shadow: 0 2px 0 rgba(0, 0, 150, 0.025), 2px 4px 0 rgba(0, 0, 150, 0.015);
+    border-radius: 16px;
+    box-shadow: 0 1px 2px rgba(25, 16, 41, 0.04), 0 10px 28px rgba(25, 16, 41, 0.06);
     margin: 0 auto;
     padding: 0;
-    width: 570px;
+    width: 600px;
 }
 
 /* Subcopy */
 
 .subcopy {
-    border-top: 1px solid #e8e5ef;
-    margin-top: 25px;
-    padding-top: 25px;
+    border-top: 1px solid #ebe7f2;
+    margin-top: 32px;
+    padding-top: 24px;
 }
 
 .subcopy p {
-    font-size: 14px;
+    color: #8e879e;
+    font-size: 13px;
+    line-height: 1.6;
+}
+
+.subcopy a {
+    color: #8e879e;
 }
 
 /* Footer */
@@ -161,21 +214,27 @@ img {
 .footer {
     -premailer-cellpadding: 0;
     -premailer-cellspacing: 0;
-    -premailer-width: 570px;
+    -premailer-width: 600px;
     margin: 0 auto;
     padding: 0;
     text-align: center;
-    width: 570px;
+    width: 600px;
+}
+
+.footer-cell {
+    padding: 28px 32px 40px;
 }
 
 .footer p {
-    color: #b0adc5;
-    font-size: 12px;
+    color: #948da3;
+    font-size: 13px;
+    line-height: 1.6;
+    margin: 0;
     text-align: center;
 }
 
 .footer a {
-    color: #b0adc5;
+    color: #948da3;
     text-decoration: underline;
 }
 
@@ -185,27 +244,35 @@ img {
     -premailer-cellpadding: 0;
     -premailer-cellspacing: 0;
     -premailer-width: 100%;
-    margin: 30px auto;
+    border-collapse: collapse;
+    margin: 24px auto;
     width: 100%;
 }
 
 .table th {
-    border-bottom: 1px solid #edeff2;
+    border-bottom: 1px solid #ebe7f2;
+    color: #8e879e;
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.06em;
     margin: 0;
-    padding-bottom: 8px;
+    padding: 0 0 10px;
+    text-align: left;
+    text-transform: uppercase;
 }
 
 .table td {
-    color: #74787e;
+    border-bottom: 1px solid #f2eff7;
+    color: #56506a;
     font-size: 15px;
-    line-height: 18px;
+    line-height: 1.5;
     margin: 0;
-    padding: 10px 0;
+    padding: 12px 0;
 }
 
 .content-cell {
     max-width: 100vw;
-    padding: 32px;
+    padding: 40px;
 }
 
 /* Buttons */
@@ -214,7 +281,7 @@ img {
     -premailer-cellpadding: 0;
     -premailer-cellspacing: 0;
     -premailer-width: 100%;
-    margin: 30px auto;
+    margin: 28px auto;
     padding: 0;
     text-align: center;
     width: 100%;
@@ -222,52 +289,53 @@ img {
 
 .button {
     -webkit-text-size-adjust: none;
-    border-radius: 4px;
-    color: #fff;
+    border-radius: 10px;
+    color: #ffffff;
     display: inline-block;
+    font-size: 15px;
+    font-weight: 600;
+    letter-spacing: 0.01em;
+    line-height: 1.2;
     overflow: hidden;
+    padding: 15px 34px;
     text-decoration: none;
 }
 
 .button-blue,
 .button-primary {
-    background-color: #2d3748;
-    padding: 16px 48px;
+    background-color: #40296c;
+    box-shadow: 0 2px 6px rgba(64, 41, 108, 0.24);
 }
 
 .button-green,
 .button-success {
-    background-color: #48bb78;
-    border-bottom: 8px solid #48bb78;
-    border-left: 18px solid #48bb78;
-    border-right: 18px solid #48bb78;
-    border-top: 8px solid #48bb78;
+    background-color: #16a34a;
+    box-shadow: 0 2px 6px rgba(22, 163, 74, 0.24);
 }
 
 .button-red,
 .button-error {
-    background-color: #e53e3e;
-    border-bottom: 8px solid #e53e3e;
-    border-left: 18px solid #e53e3e;
-    border-right: 18px solid #e53e3e;
-    border-top: 8px solid #e53e3e;
+    background-color: #dc2626;
+    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.24);
 }
 
 /* Panels */
 
 .panel {
-    border-left: #2d3748 solid 4px;
-    margin: 21px 0;
+    margin: 24px 0;
 }
 
 .panel-content {
-    background-color: #edf2f7;
-    color: #718096;
-    padding: 16px;
+    background-color: #f7f5fb;
+    border-left: 3px solid #40296c;
+    border-radius: 10px;
+    color: #56506a;
+    padding: 18px 20px;
 }
 
 .panel-content p {
-    color: #718096;
+    color: #56506a;
+    margin-bottom: 12px;
 }
 
 .panel-item {

From e6bb9c3c366245109dc5a623169d11ace96c6277 Mon Sep 17 00:00:00 2001
From: Dave Earley <dave@hi.events>
Date: Tue, 28 Jul 2026 07:27:31 +0100
Subject: [PATCH 3/6] Add scroll shadow to tables

---
 .../TanStackTable/TanStackTable.module.scss   | 31 ++++++++++------
 .../components/common/TanStackTable/index.tsx | 36 +++++++++++++++++--
 2 files changed, 55 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/common/TanStackTable/TanStackTable.module.scss b/frontend/src/components/common/TanStackTable/TanStackTable.module.scss
index 139ce3f85a..246fc4901b 100644
--- a/frontend/src/components/common/TanStackTable/TanStackTable.module.scss
+++ b/frontend/src/components/common/TanStackTable/TanStackTable.module.scss
@@ -61,15 +61,18 @@
   &::after {
     content: '';
     position: absolute;
-    top: 0;
-    right: 0;
+    top: -1px;
     bottom: 0;
-    width: 1px;
+    left: 100%;
+    width: 18px;
     background: linear-gradient(
                     to right,
-                    rgba(255, 255, 255, 0.1),
-                    rgba(255, 255, 255, 0)
+                    rgba(20, 10, 40, 0.11),
+                    rgba(20, 10, 40, 0.045) 45%,
+                    rgba(20, 10, 40, 0)
     );
+    opacity: 0;
+    transition: opacity 0.2s ease;
     pointer-events: none;
   }
 }
@@ -83,19 +86,27 @@
   &::before {
     content: '';
     position: absolute;
-    top: 0;
-    left: 0;
+    top: -1px;
     bottom: 0;
-    width: 1px;
+    right: 100%;
+    width: 18px;
     background: linear-gradient(
                     to left,
-                    rgba(255, 255, 255, 0.1),
-                    rgba(255, 255, 255, 0)
+                    rgba(20, 10, 40, 0.11),
+                    rgba(20, 10, 40, 0.045) 45%,
+                    rgba(20, 10, 40, 0)
     );
+    opacity: 0;
+    transition: opacity 0.2s ease;
     pointer-events: none;
   }
 }
 
+.showStartShadow tbody .stickyLeft::after,
+.showEndShadow tbody .stickyRight::before {
+  opacity: 1;
+}
+
 .tableHead .stickyLeft,
 .tableHead .stickyRight {
   background-color: #f2f0f5;
diff --git a/frontend/src/components/common/TanStackTable/index.tsx b/frontend/src/components/common/TanStackTable/index.tsx
index 9e272ac1b0..062edfd23b 100644
--- a/frontend/src/components/common/TanStackTable/index.tsx
+++ b/frontend/src/components/common/TanStackTable/index.tsx
@@ -1,6 +1,6 @@
 import {ColumnDef, flexRender, getCoreRowModel, useReactTable, VisibilityState,} from '@tanstack/react-table';
 import {Table as MantineTable} from '@mantine/core';
-import React, {useEffect, useState} from 'react';
+import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {Card} from '../Card';
 import classes from './TanStackTable.module.scss';
 
@@ -49,6 +49,34 @@ export function TanStackTable<TData>({
         return {};
     });
 
+    const viewportRef = useRef<HTMLDivElement>(null);
+    const [showStartShadow, setShowStartShadow] = useState(false);
+    const [showEndShadow, setShowEndShadow] = useState(false);
+
+    const updateStickyShadows = useCallback(() => {
+        const viewport = viewportRef.current;
+        if (!viewport) {
+            return;
+        }
+        const {scrollLeft, clientWidth, scrollWidth} = viewport;
+        setShowStartShadow(scrollLeft > 1);
+        setShowEndShadow(scrollWidth - clientWidth - scrollLeft > 1);
+    }, []);
+
+    useEffect(() => {
+        const viewport = viewportRef.current;
+        if (!viewport) {
+            return;
+        }
+        updateStickyShadows();
+        const resizeObserver = new ResizeObserver(updateStickyShadows);
+        resizeObserver.observe(viewport);
+        if (viewport.firstElementChild) {
+            resizeObserver.observe(viewport.firstElementChild);
+        }
+        return () => resizeObserver.disconnect();
+    }, [updateStickyShadows]);
+
     const table = useReactTable({
         data,
         columns,
@@ -69,8 +97,12 @@ export function TanStackTable<TData>({
     const tableContent = (
         <MantineTable.ScrollContainer minWidth={200} scrollAreaProps={{
             type: 'hover',
+            viewportRef: viewportRef,
+            onScrollPositionChange: updateStickyShadows,
         }}>
-            <MantineTable className={classes.table}>
+            <MantineTable
+                className={`${classes.table} ${showStartShadow ? classes.showStartShadow : ''} ${showEndShadow ? classes.showEndShadow : ''}`}
+            >
                 {!hideHeader && (
                     <MantineTable.Thead className={classes.tableHead}>
                         {table.getHeaderGroups().map((headerGroup) => (

From 15b0067adf1e2ae3e0ac73a9c8f06fa8c9658c80 Mon Sep 17 00:00:00 2001
From: Dave Earley <dave@hi.events>
Date: Tue, 28 Jul 2026 07:42:50 +0100
Subject: [PATCH 4/6] Fix zoom on mobile

---
 .../components/layouts/AppLayout/AppLayout.module.scss    | 7 ++++---
 .../layouts/AppLayout/Topbar/Topbar.module.scss           | 8 ++++++--
 frontend/src/components/layouts/Event/Event.module.scss   | 3 ++-
 .../layouts/OrganizerLayout/OrganizerLayout.module.scss   | 3 ++-
 4 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/layouts/AppLayout/AppLayout.module.scss b/frontend/src/components/layouts/AppLayout/AppLayout.module.scss
index 1161f7668e..a2ef5e82a1 100644
--- a/frontend/src/components/layouts/AppLayout/AppLayout.module.scss
+++ b/frontend/src/components/layouts/AppLayout/AppLayout.module.scss
@@ -6,8 +6,9 @@
     "topbar"
     "main";
   grid-template-rows: auto 1fr;
-  grid-template-columns: 1fr;
+  grid-template-columns: minmax(0, 1fr);
   height: 100vh;
+  height: 100dvh;
   transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
 
   @media (min-width: 768px) {
@@ -15,13 +16,13 @@
       "sidebar topbar"
       "sidebar main";
     grid-template-rows: auto 1fr;
-    grid-template-columns: 280px 1fr;
+    grid-template-columns: 280px minmax(0, 1fr);
 
     &.closed {
       grid-template-areas:
         "topbar"
         "main";
-      grid-template-columns: 1fr;
+      grid-template-columns: minmax(0, 1fr);
     }
   }
 
diff --git a/frontend/src/components/layouts/AppLayout/Topbar/Topbar.module.scss b/frontend/src/components/layouts/AppLayout/Topbar/Topbar.module.scss
index fb722a5a00..51a1c09652 100644
--- a/frontend/src/components/layouts/AppLayout/Topbar/Topbar.module.scss
+++ b/frontend/src/components/layouts/AppLayout/Topbar/Topbar.module.scss
@@ -130,6 +130,7 @@
     display: flex;
     align-items: center;
     margin-left: auto;
+    flex-shrink: 0;
   }
 
   &.withShadow {
@@ -138,6 +139,7 @@
 
   .burger {
     --burger-color: var(--hi-color-white);
+    flex-shrink: 0;
     @include mixins.respond-above(md) {
       display: none;
     }
@@ -150,16 +152,18 @@
     display: flex;
     justify-content: center;
     padding-inline: 5px;
+    min-width: 0;
 
     a {
       display: flex;
+      min-width: 0;
     }
 
     img {
-      max-width: 120px;
+      max-width: min(120px, 100%);
 
       @include mixins.respond-below(sm) {
-        max-width: 100px;
+        max-width: min(100px, 100%);
       }
     }
 
diff --git a/frontend/src/components/layouts/Event/Event.module.scss b/frontend/src/components/layouts/Event/Event.module.scss
index c8163729d2..5189aae103 100644
--- a/frontend/src/components/layouts/Event/Event.module.scss
+++ b/frontend/src/components/layouts/Event/Event.module.scss
@@ -6,9 +6,10 @@
   position: relative;
   margin-left: 0px;
   margin-right: auto;
+  flex-shrink: 0;
 
   @include mixins.respond-below(md) {
-    margin-left: 16px;
+    margin-left: 8px;
   }
 
   .statusAction {
diff --git a/frontend/src/components/layouts/OrganizerLayout/OrganizerLayout.module.scss b/frontend/src/components/layouts/OrganizerLayout/OrganizerLayout.module.scss
index 4dcc37182e..bb1b526e1c 100644
--- a/frontend/src/components/layouts/OrganizerLayout/OrganizerLayout.module.scss
+++ b/frontend/src/components/layouts/OrganizerLayout/OrganizerLayout.module.scss
@@ -70,9 +70,10 @@
   position: relative;
   margin-left: 0px;
   margin-right: auto;
+  flex-shrink: 0;
 
   @include mixins.respond-below(md) {
-    margin-left: 16px;
+    margin-left: 8px;
   }
 
   .statusAction {

From 195b4e5eca115bb080cf11237fb2dad5ae2c5444 Mon Sep 17 00:00:00 2001
From: Dave Earley <dave@hi.events>
Date: Tue, 28 Jul 2026 08:14:20 +0100
Subject: [PATCH 5/6] Fix filter bar on mobile

---
 .../TanStackTable/TanStackTable.module.scss   |  8 +++++
 .../common/ToolBar/ToolBar.module.scss        | 32 +++++++++++++++++++
 2 files changed, 40 insertions(+)

diff --git a/frontend/src/components/common/TanStackTable/TanStackTable.module.scss b/frontend/src/components/common/TanStackTable/TanStackTable.module.scss
index 246fc4901b..7fbff95018 100644
--- a/frontend/src/components/common/TanStackTable/TanStackTable.module.scss
+++ b/frontend/src/components/common/TanStackTable/TanStackTable.module.scss
@@ -20,6 +20,10 @@
     background-color: #f2f0f5;
     color: var(--hi-secondary-text) !important;
     padding: 20px !important;
+
+    @include mixins.respond-below(sm) {
+      padding: 14px 12px !important;
+    }
   }
 }
 
@@ -46,6 +50,10 @@
     td {
       padding: 20px !important;
       white-space: nowrap;
+
+      @include mixins.respond-below(sm) {
+        padding: 14px 12px !important;
+      }
     }
   }
 
diff --git a/frontend/src/components/common/ToolBar/ToolBar.module.scss b/frontend/src/components/common/ToolBar/ToolBar.module.scss
index 27e8fe03f1..31db1a48b4 100644
--- a/frontend/src/components/common/ToolBar/ToolBar.module.scss
+++ b/frontend/src/components/common/ToolBar/ToolBar.module.scss
@@ -19,6 +19,10 @@
   flex: 1;
   min-width: 0;
   margin-bottom: 0 !important;
+
+  @include mixins.respond-below(sm, true) {
+    flex-basis: 100%;
+  }
 }
 
 .actions {
@@ -27,6 +31,16 @@
   gap: 8px;
   flex-shrink: 0;
   margin-left: auto;
+
+  @include mixins.respond-below(sm, true) {
+    width: 100%;
+    margin-left: 0;
+
+    > * {
+      flex: 1 1 auto;
+      min-width: 0;
+    }
+  }
 }
 
 .rowFilters {
@@ -42,6 +56,24 @@
   align-items: center;
   gap: 8px;
   flex-wrap: wrap;
+
+  @include mixins.respond-below(sm, true) {
+    width: 100%;
+
+    > * {
+      flex: 1 1 auto;
+      min-width: 0;
+    }
+
+    :global(.mantine-Group-root) {
+      width: 100%;
+
+      > * {
+        flex: 1 1 auto;
+        min-width: 0;
+      }
+    }
+  }
 }
 
 .resultCount {

From e3a0c20724d599e7c0df1bb06baaa34f7768d8ae Mon Sep 17 00:00:00 2001
From: Dave Earley <dave@hi.events>
Date: Tue, 28 Jul 2026 10:48:42 +0100
Subject: [PATCH 6/6] Update order and attendee drawyers

---
 e2e/pages/attendee.page.ts                    |   6 +-
 e2e/tests/management/attendees.spec.ts        |   2 +-
 e2e/tests/management/orders.spec.ts           |   4 +-
 .../common/Accordion/Accordion.module.scss    |  54 ---
 .../src/components/common/Accordion/index.tsx |  54 ---
 .../AttendeeDetails.module.scss               |  31 --
 .../common/AttendeeDetails/index.tsx          |  60 ---
 .../AttendeeList/AttendeeList.module.scss     |  60 +--
 .../components/common/AttendeeList/index.tsx  |   2 +-
 .../components/common/AttendeeTable/index.tsx | 109 +-----
 .../components/common/Card/Card.module.scss   |   4 -
 frontend/src/components/common/Card/index.tsx |   2 +-
 .../EntityActions/EntityActions.module.scss   |   6 +
 .../components/common/EntityActions/index.tsx | 126 +++++++
 .../OrderDetails/OrderDetails.module.scss     |  41 ++-
 .../components/common/OrderDetails/index.tsx  |   6 +-
 .../OrderSummary/OrderSummary.module.scss     |  37 +-
 .../components/common/OrderSummary/index.tsx  |   2 +-
 .../components/common/OrdersTable/index.tsx   | 137 +------
 .../QuestionAndAnswerList.module.scss         |  85 ++---
 .../common/QuestionAndAnswerList/index.tsx    |   2 +-
 .../common/SideDrawer/SideDrawer.module.scss  | 243 ++++++++++++-
 .../components/common/SideDrawer/index.tsx    | 127 ++++++-
 .../ManageAttendeeModal.module.scss           |  21 +-
 .../modals/ManageAttendeeModal/index.tsx      | 317 ++++++++--------
 .../ManageOccurrenceModal.module.scss         |   3 +-
 .../modals/ManageOccurrenceModal/index.tsx    |   4 +-
 .../ManageOrderModal.module.scss              |  33 +-
 .../modals/ManageOrderModal/index.tsx         | 341 +++++++++++-------
 frontend/src/hooks/useAttendeeActions.tsx     | 126 +++++++
 frontend/src/hooks/useOrderActions.tsx        | 185 ++++++++++
 31 files changed, 1359 insertions(+), 871 deletions(-)
 delete mode 100644 frontend/src/components/common/Accordion/Accordion.module.scss
 delete mode 100644 frontend/src/components/common/Accordion/index.tsx
 delete mode 100644 frontend/src/components/common/AttendeeDetails/AttendeeDetails.module.scss
 delete mode 100644 frontend/src/components/common/AttendeeDetails/index.tsx
 create mode 100644 frontend/src/components/common/EntityActions/EntityActions.module.scss
 create mode 100644 frontend/src/components/common/EntityActions/index.tsx
 create mode 100644 frontend/src/hooks/useAttendeeActions.tsx
 create mode 100644 frontend/src/hooks/useOrderActions.tsx

diff --git a/e2e/pages/attendee.page.ts b/e2e/pages/attendee.page.ts
index c2d21de32d..5a1f9eacb2 100644
--- a/e2e/pages/attendee.page.ts
+++ b/e2e/pages/attendee.page.ts
@@ -33,12 +33,12 @@ export class AttendeePage {
     await this.page.getByRole('menuitem', { name: action }).click();
   }
 
-  viewTab(): Locator {
-    return this.page.getByRole('tab', { name: 'View' });
+  editButton(): Locator {
+    return this.page.getByTestId('attendee-edit-button');
   }
 
   async renameFirstName(firstName: string): Promise<void> {
-    await this.page.getByRole('tab', { name: 'Edit' }).click();
+    await this.editButton().click();
     await this.page.getByLabel(/^First name/).fill(firstName);
     await this.page.getByRole('button', { name: 'Save Changes' }).click();
   }
diff --git a/e2e/tests/management/attendees.spec.ts b/e2e/tests/management/attendees.spec.ts
index cc6c2d2d95..bac9405093 100644
--- a/e2e/tests/management/attendees.spec.ts
+++ b/e2e/tests/management/attendees.spec.ts
@@ -33,7 +33,7 @@ test.describe('attendees', () => {
     await attendees.openRowAction(event.attendeeEmail, 'Manage attendee');
     await attendees.renameFirstName(newFirstName);
 
-    await expect(attendees.viewTab()).toHaveAttribute('aria-selected', 'true');
+    await expect(attendees.editButton()).toBeVisible();
     await attendees.closeDrawer();
     await expect(attendees.rowByText(newFirstName)).toBeVisible();
   });
diff --git a/e2e/tests/management/orders.spec.ts b/e2e/tests/management/orders.spec.ts
index bda3c641c9..61a1d2fa87 100644
--- a/e2e/tests/management/orders.spec.ts
+++ b/e2e/tests/management/orders.spec.ts
@@ -19,9 +19,9 @@ test.describe('orders management', () => {
     await orders.chooseRowAction(order.buyerEmail, 'Manage order');
 
     const drawer = orders.detailsDrawer();
-    await expect(drawer.getByText('Order Reference')).toBeVisible();
     await expect(drawer.getByText(`${order.buyerFirstName} ${order.buyerLastName}`).first()).toBeVisible();
-    await expect(drawer.getByText('Total order amount')).toBeVisible();
+    await expect(drawer.getByText('Items')).toBeVisible();
+    await expect(drawer.getByText('Order Summary')).toBeVisible();
     await expect(drawer.getByText('$0.00').first()).toBeVisible();
   });
 
diff --git a/frontend/src/components/common/Accordion/Accordion.module.scss b/frontend/src/components/common/Accordion/Accordion.module.scss
deleted file mode 100644
index a195483f74..0000000000
--- a/frontend/src/components/common/Accordion/Accordion.module.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-.accordionItem {
-  border: 1px solid var(--mantine-color-gray-2);
-  border-radius: var(--mantine-radius-sm);
-  background-color: var(--mantine-color-white);
-  overflow: hidden;
-
-  & + & {
-    margin-top: 0.75rem;
-  }
-}
-
-.accordionControl {
-  background-color: var(--mantine-color-gray-0);
-  border-bottom: none;
-
-  &:hover {
-    background-color: var(--mantine-color-gray-1);
-  }
-
-  &[data-expanded] {
-    background-color: var(--mantine-color-white);
-    border-bottom: 1px solid var(--mantine-color-gray-2);
-  }
-}
-
-.accordionContent {
-  padding: 1.25rem;
-
-  @media (max-width: 768px) {
-    padding: 1rem;
-  }
-}
-
-.accordionChevron {
-  transition: transform 0.2s ease;
-
-  &[data-expanded] {
-    transform: rotate(180deg);
-  }
-}
-
-.header {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.title {
-  flex: 1;
-}
-
-.badge {
-  margin-left: auto;
-}
diff --git a/frontend/src/components/common/Accordion/index.tsx b/frontend/src/components/common/Accordion/index.tsx
deleted file mode 100644
index 522b757700..0000000000
--- a/frontend/src/components/common/Accordion/index.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import {Accordion as MantineAccordion, Group, Text} from '@mantine/core';
-import {Icon} from '@tabler/icons-react';
-import classes from './Accordion.module.scss';
-import React from "react";
-
-export interface AccordionItem {
-    value: string;
-    icon?: Icon;
-    title: string;
-    count?: number;
-    hidden?: boolean;
-    content: React.ReactNode;
-}
-
-interface AccordionProps {
-    items: AccordionItem[];
-    defaultValue?: string;
-}
-
-export const Accordion = ({items, defaultValue}: AccordionProps) => {
-    return (
-        <MantineAccordion
-            variant="separated"
-            defaultValue={defaultValue}
-            classNames={{
-                item: classes.accordionItem,
-                control: classes.accordionControl,
-                content: classes.accordionContent,
-                chevron: classes.accordionChevron
-            }}
-        >
-            {items
-                .filter((item) => !item.hidden)
-                .map((item) => (
-                    <MantineAccordion.Item key={item.value} value={item.value}>
-                        <MantineAccordion.Control>
-                            <Group gap="xs">
-                                {item.icon && <item.icon size={18} stroke={1.5}/>}
-                                <Text fw={500}>{item.title}</Text>
-                                {item.count !== undefined && (
-                                    <Text size="xs" c="dimmed">
-                                        ({item.count})
-                                    </Text>
-                                )}
-                            </Group>
-                        </MantineAccordion.Control>
-                        <MantineAccordion.Panel>
-                            {item.content}
-                        </MantineAccordion.Panel>
-                    </MantineAccordion.Item>
-                ))}
-        </MantineAccordion>
-    );
-};
diff --git a/frontend/src/components/common/AttendeeDetails/AttendeeDetails.module.scss b/frontend/src/components/common/AttendeeDetails/AttendeeDetails.module.scss
deleted file mode 100644
index 4b150b7eab..0000000000
--- a/frontend/src/components/common/AttendeeDetails/AttendeeDetails.module.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-@use "../../../styles/mixins";
-
-.orderDetails {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  flex-wrap: wrap;
-
-  .block {
-    width: 50%;
-    margin-bottom: var(--hi-spacing-md);
-  }
-
-  @include mixins.respond-below(md) {
-    flex-direction: column;
-    flex-wrap: nowrap;
-
-    .block {
-      margin-bottom: 10px;
-      width: auto;
-
-      &:last-of-type {
-        margin-bottom: 0;
-      }
-    }
-  }
-
-  .title {
-    font-weight: bold;
-  }
-}
diff --git a/frontend/src/components/common/AttendeeDetails/index.tsx b/frontend/src/components/common/AttendeeDetails/index.tsx
deleted file mode 100644
index 14ad95a34c..0000000000
--- a/frontend/src/components/common/AttendeeDetails/index.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import {Anchor} from "@mantine/core";
-import {Attendee, Product} from "../../../types.ts";
-import classes from "./AttendeeDetails.module.scss";
-import {t} from "@lingui/macro";
-import {getAttendeeProductTitle} from "../../../utilites/products.ts";
-import {getLocaleName, SupportedLocales} from "../../../locales.ts";
-import {relativeDate} from "../../../utilites/dates.ts";
-
-export const AttendeeDetails = ({attendee}: { attendee: Attendee }) => {
-    return (
-        <div className={classes.orderDetails}>
-            <div className={classes.block}>
-                <div className={classes.title}>
-                    {t`Name`}
-                </div>
-                <div className={classes.amount}>
-                    {attendee.first_name} {attendee.last_name}
-                </div>
-            </div>
-            <div className={classes.block}>
-                <div className={classes.title}>
-                    {t`Email`}
-                </div>
-                <div className={classes.value}>
-                    <Anchor href={'mailto:' + attendee.email} target={'_blank'}>{attendee.email}</Anchor>
-                </div>
-            </div>
-            <div className={classes.block}>
-                <div className={classes.title}>
-                    {t`Product`}
-                </div>
-                <div className={classes.amount}>
-                    {getAttendeeProductTitle(attendee, attendee.product as Product)}
-                </div>
-            </div>
-            <div className={classes.block}>
-                <div className={classes.title}>
-                    {t`Language`}
-                </div>
-                <div className={classes.amount}>
-                    {getLocaleName(attendee.locale as SupportedLocales)}
-                </div>
-            </div>
-            {attendee.check_ins && attendee.check_ins.length > 0 && (
-                <div className={classes.block}>
-                    <div className={classes.title}>
-                        {t`Check-Ins`}
-                    </div>
-                    <div className={classes.value}>
-                        {attendee.check_ins.map((checkIn) => (
-                            <div key={checkIn.id}>
-                                <strong>{checkIn.check_in_list?.name}</strong> - {relativeDate(checkIn.created_at)}
-                            </div>
-                        ))}
-                    </div>
-                </div>
-            )}
-        </div>
-    );
-}
diff --git a/frontend/src/components/common/AttendeeList/AttendeeList.module.scss b/frontend/src/components/common/AttendeeList/AttendeeList.module.scss
index 83bf50ffc2..e44751fde4 100644
--- a/frontend/src/components/common/AttendeeList/AttendeeList.module.scss
+++ b/frontend/src/components/common/AttendeeList/AttendeeList.module.scss
@@ -1,35 +1,32 @@
 .container {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
 }
 
 .attendeeList {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
 }
 
 .attendee {
   display: flex;
   flex-direction: column;
-  padding: 0.875rem;
-  background: var(--mantine-color-gray-0);
-  border: 1px solid var(--mantine-color-gray-2);
-  border-radius: var(--mantine-radius-sm);
-  transition: all 0.2s ease;
+  padding: 10px 12px;
+  margin: 0 -12px;
+  border-radius: var(--mantine-radius-md);
+  transition: background-color 120ms ease;
 
   &:hover {
-    border-color: var(--mantine-color-gray-3);
-    transform: translateY(-1px);
+    background-color: var(--mantine-color-gray-0);
   }
 }
 
 .attendeeInfo {
   display: flex;
   align-items: center;
-  gap: 1rem;
+  gap: var(--mantine-spacing-sm);
   flex: 1;
+  min-width: 0;
 }
 
 .details {
@@ -38,52 +35,27 @@
 }
 
 .name {
-  line-height: 1.2;
+  line-height: 1.3;
 }
 
 .product {
-  margin-top: 0.25rem;
-  color: var(--mantine-color-gray-6);
+  margin-top: 2px;
+  color: var(--mantine-color-dimmed);
 }
 
 .actionButton {
   margin-left: auto;
-
-  &:hover {
-    background-color: var(--mantine-color-blue-0);
-  }
 }
 
 .avatar {
-  background: var(--hi-color-gray);
+  background-color: var(--mantine-color-gray-1);
+  color: var(--mantine-color-dimmed);
   font-weight: 500;
 }
 
-/* Added styles for answers display */
 .answersContainer {
-  margin-top: 0.75rem;
-  padding-top: 0.75rem;
-  padding-left: .4rem;
-  border-top: 1px solid var(--mantine-color-gray-2);
-}
-
-.questionAnswer {
-  margin-bottom: 0.75rem;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-}
-
-.questionTitle {
-  display: flex;
-  gap: 0.5rem;
-  margin-bottom: 0.25rem;
-  align-items: flex-start;
-}
-
-.answer {
-  color: var(--mantine-color-gray-7);
-  padding-left: 1.5rem;
-  font-size: var(--mantine-font-size-sm);
+  margin-top: var(--mantine-spacing-sm);
+  padding: var(--mantine-spacing-sm) var(--mantine-spacing-md);
+  border-radius: var(--mantine-radius-md);
+  background-color: var(--mantine-color-gray-0);
 }
diff --git a/frontend/src/components/common/AttendeeList/index.tsx b/frontend/src/components/common/AttendeeList/index.tsx
index 346b4d675d..48d47b9c3f 100644
--- a/frontend/src/components/common/AttendeeList/index.tsx
+++ b/frontend/src/components/common/AttendeeList/index.tsx
@@ -60,7 +60,7 @@ export const AttendeeList = ({order, products, refetchOrder, questionAnswers = [
                         <div key={attendee.id} className={classes.attendee}>
                             <div className={classes.attendeeInfo}>
                                 <Avatar
-                                    size="md"
+                                    size={32}
                                     radius="xl"
                                     className={classes.avatar}
                                 >
diff --git a/frontend/src/components/common/AttendeeTable/index.tsx b/frontend/src/components/common/AttendeeTable/index.tsx
index 8581cbf365..306bb710cd 100644
--- a/frontend/src/components/common/AttendeeTable/index.tsx
+++ b/frontend/src/components/common/AttendeeTable/index.tsx
@@ -1,37 +1,31 @@
 import {ActionIcon, Anchor, Avatar, Button, Group, Popover, Tooltip} from '@mantine/core';
-import {Attendee, IdParam, MessageType} from "../../../types.ts";
+import {Attendee, IdParam} from "../../../types.ts";
 import {
     IconCalendarEvent,
     IconCheck,
     IconClock,
     IconClipboardList,
     IconCopy,
-    IconMailForward,
     IconNote,
     IconPlus,
     IconSend,
-    IconTrash,
-    IconUserCog,
     IconX
 } from "@tabler/icons-react";
 import {getInitials, getProductFromEvent} from "../../../utilites/helpers.ts";
 import {useClipboard, useDisclosure} from "@mantine/hooks";
-import {SendMessageModal} from "../../modals/SendMessageModal";
 import {useMemo, useState} from "react";
 import {NoResultsSplash} from "../NoResultsSplash";
 import {useParams} from "react-router";
 import {useGetEvent} from "../../../queries/useGetEvent.ts";
 import {useGetEventCheckInLists} from "../../../queries/useGetCheckInLists.ts";
 import Truncate from "../Truncate";
-import {notifications} from "@mantine/notifications";
-import {useModifyAttendee} from "../../../mutations/useModifyAttendee.ts";
-import {showError, showSuccess} from "../../../utilites/notifications.tsx";
-import {t, Trans} from "@lingui/macro";
-import {confirmationDialog} from "../../../utilites/confirmationDialog.tsx";
-import {useResendAttendeeTicket} from "../../../mutations/useResendAttendeeTicket.ts";
+import {showSuccess} from "../../../utilites/notifications.tsx";
+import {t} from "@lingui/macro";
 import {ManageAttendeeModal} from "../../modals/ManageAttendeeModal";
 import {ManageOrderModal} from "../../modals/ManageOrderModal";
 import {ActionMenu} from '../ActionMenu';
+import {toActionMenuGroups} from "../EntityActions";
+import {useAttendeeActions} from "../../../hooks/useAttendeeActions.tsx";
 import {CheckInStatusModal} from "../CheckInStatusModal";
 import {formatDateWithLocale, prettyDate} from "../../../utilites/dates.ts";
 import {TanStackTable, TanStackTableColumn} from "../TanStackTable";
@@ -48,7 +42,6 @@ interface AttendeeTableProps {
 
 export const AttendeeTable = ({attendees, openCreateModal, compact, occurrenceId}: AttendeeTableProps) => {
     const {eventId} = useParams();
-    const [isMessageModalOpen, messageModal] = useDisclosure(false);
     const [isViewModalOpen, viewModalOpen] = useDisclosure(false);
     const [isCheckInModalOpen, checkInModal] = useDisclosure(false);
     const [isOrderModalOpen, orderModal] = useDisclosure(false);
@@ -57,9 +50,11 @@ export const AttendeeTable = ({attendees, openCreateModal, compact, occurrenceId
     const [selectedOrderId, setSelectedOrderId] = useState<IdParam>();
     const {data: event} = useGetEvent(eventId);
     const {data: checkInLists} = useGetEventCheckInLists(eventId);
-    const modifyMutation = useModifyAttendee();
-    const resendTicketMutation = useResendAttendeeTicket();
     const clipboard = useClipboard({timeout: 2000});
+    const {getAttendeeActions, attendeeActionModals, openMessageModal} = useAttendeeActions({
+        eventId,
+        onManage: (attendee: Attendee) => handleModalClick(attendee, viewModalOpen),
+    });
 
     const relevantCheckInLists = checkInLists?.data?.filter(list =>
         !occurrenceId || !list.event_occurrence_id || list.event_occurrence_id === Number(occurrenceId)
@@ -74,44 +69,6 @@ export const AttendeeTable = ({attendees, openCreateModal, compact, occurrenceId
         modal.open();
     }
 
-    const handleResendTicket = (attendee: Attendee) => {
-        resendTicketMutation.mutate({
-            attendeeId: attendee.id,
-            eventId: eventId,
-        }, {
-            onSuccess: () => showSuccess(t`Ticket email has been resent to attendee`),
-            onError: (error: any) => showError(error.response.data.message || t`Failed to resend ticket email`)
-        });
-    }
-
-    const handleCancel = (attendee: Attendee) => {
-        const message = attendee.status === 'CANCELLED'
-            ? t`Are you sure you want to activate this attendee?`
-            : t`Are you sure you want to cancel this attendee? This will void their ticket`
-
-        confirmationDialog(message, () => {
-            modifyMutation.mutate({
-                attendeeId: attendee.id,
-                eventId: eventId,
-                attendeeData: {
-                    status: attendee.status === 'CANCELLED' ? 'ACTIVE' : 'CANCELLED'
-                }
-            }, {
-                onSuccess: () => {
-                    notifications.show({
-                        message: (
-                            <Trans>
-                                Successfully {attendee.status === 'CANCELLED' ? 'activated' : 'cancelled'} attendee
-                            </Trans>
-                        ),
-                        color: 'green',
-                    });
-                },
-                onError: () => showError(t`Failed to cancel attendee`),
-            });
-        })
-    };
-
     const getCheckInCount = (attendee: Attendee) => {
         if (!attendee.check_ins) return 0;
         if (!occurrenceId) return attendee.check_ins.length;
@@ -130,7 +87,7 @@ export const AttendeeTable = ({attendees, openCreateModal, compact, occurrenceId
 
     const handleMessageFromEmail = (attendee: Attendee) => {
         setEmailPopoverId(null);
-        handleModalClick(attendee, messageModal);
+        openMessageModal(attendee);
     };
 
     const handleOrderClick = (orderId: IdParam) => {
@@ -361,40 +318,10 @@ export const AttendeeTable = ({attendees, openCreateModal, compact, occurrenceId
                     enableHiding: false,
                     cell: (info: CellContext<Attendee, unknown>) => (
                         <div className={classes.actionsMenu}>
-                            <ActionMenu dataTestId="attendee-actions-trigger" itemsGroups={[
-                                {
-                                    label: t`Actions`,
-                                    items: [
-                                        {
-                                            label: t`Manage attendee`,
-                                            icon: <IconUserCog size={14}/>,
-                                            onClick: () => handleModalClick(info.row.original, viewModalOpen),
-                                        },
-                                        {
-                                            label: t`Message attendee`,
-                                            icon: <IconSend size={14}/>,
-                                            onClick: () => handleModalClick(info.row.original, messageModal),
-                                        },
-                                        {
-                                            label: t`Resend ticket email`,
-                                            icon: <IconMailForward size={14}/>,
-                                            onClick: () => handleResendTicket(info.row.original),
-                                            visible: info.row.original.status === 'ACTIVE',
-                                        },
-                                    ],
-                                },
-                                {
-                                    label: t`Danger Zone`,
-                                    items: [
-                                        {
-                                            label: info.row.original.status === 'CANCELLED' ? t`Activate` : t`Cancel` + ` ` + t`ticket`,
-                                            icon: <IconTrash size={14}/>,
-                                            onClick: () => handleCancel(info.row.original),
-                                            color: info.row.original.status === 'CANCELLED' ? 'green' : 'red',
-                                        },
-                                    ],
-                                },
-                            ]}/>
+                            <ActionMenu
+                                dataTestId="attendee-actions-trigger"
+                                itemsGroups={toActionMenuGroups(getAttendeeActions(info.row.original))}
+                            />
                         </div>
                     ),
                     meta: {
@@ -447,13 +374,7 @@ export const AttendeeTable = ({attendees, openCreateModal, compact, occurrenceId
                 hideHeader={compact}
                 noCard={compact}
             />
-            {(selectedAttendee && isMessageModalOpen) && <SendMessageModal
-                onClose={messageModal.close}
-                orderId={selectedAttendee.order_id}
-                attendeeId={selectedAttendee.id}
-                messageType={MessageType.IndividualAttendees}
-                eventOccurrenceId={selectedAttendee.event_occurrence_id}
-            />}
+            {attendeeActionModals}
             {(selectedAttendee?.id && isViewModalOpen) && <ManageAttendeeModal
                 attendeeId={selectedAttendee.id}
                 onClose={viewModalOpen.close}
diff --git a/frontend/src/components/common/Card/Card.module.scss b/frontend/src/components/common/Card/Card.module.scss
index 77cce2dfa3..0477c3a6c6 100644
--- a/frontend/src/components/common/Card/Card.module.scss
+++ b/frontend/src/components/common/Card/Card.module.scss
@@ -4,10 +4,6 @@
   padding: var(--hi-spacing-lg);
   margin-bottom: var(--hi-spacing-lg);
 
-  &.noStyle {
-    //
-  }
-
   &.lightGray {
     // Use checkout variables if available, fallback to default colors
     background-color: var(--checkout-accent-soft, var(--hi-color-gray));
diff --git a/frontend/src/components/common/Card/index.tsx b/frontend/src/components/common/Card/index.tsx
index 0a2aa521c8..dfad2c4e44 100644
--- a/frontend/src/components/common/Card/index.tsx
+++ b/frontend/src/components/common/Card/index.tsx
@@ -1,7 +1,7 @@
 import classes from './Card.module.scss';
 import React, {CSSProperties, LegacyRef} from "react";
 
-export type CardVariant = 'default' | 'lightGray' | 'noStyle' | 'lightGradient';
+export type CardVariant = 'default' | 'lightGray' | 'lightGradient';
 
 interface CardInterface {
     children: React.ReactNode;
diff --git a/frontend/src/components/common/EntityActions/EntityActions.module.scss b/frontend/src/components/common/EntityActions/EntityActions.module.scss
new file mode 100644
index 0000000000..b009f1c9e4
--- /dev/null
+++ b/frontend/src/components/common/EntityActions/EntityActions.module.scss
@@ -0,0 +1,6 @@
+.bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px;
+}
diff --git a/frontend/src/components/common/EntityActions/index.tsx b/frontend/src/components/common/EntityActions/index.tsx
new file mode 100644
index 0000000000..4317baa7e7
--- /dev/null
+++ b/frontend/src/components/common/EntityActions/index.tsx
@@ -0,0 +1,126 @@
+import {ReactNode} from "react";
+import {t} from "@lingui/macro";
+import {ActionIcon, Button, Menu, Tooltip} from "@mantine/core";
+import {IconDotsVertical} from "@tabler/icons-react";
+import {ActionMenuItemsGroup} from "../ActionMenu";
+import classes from "./EntityActions.module.scss";
+
+export type EntityActionGroup = 'primary' | 'secondary' | 'danger';
+
+export interface EntityAction {
+    key: string;
+    label: string;
+    icon: ReactNode;
+    onClick: () => void;
+    group: EntityActionGroup;
+    color?: string;
+    dataTestId?: string;
+}
+
+const byGroup = (actions: EntityAction[], group: EntityActionGroup) => actions.filter(action => action.group === group);
+
+export const toActionMenuGroups = (actions: EntityAction[]): ActionMenuItemsGroup[] => {
+    const danger = byGroup(actions, 'danger');
+
+    return [
+        {
+            label: t`Actions`,
+            items: [...byGroup(actions, 'primary'), ...byGroup(actions, 'secondary')],
+        },
+        ...(danger.length > 0 ? [{
+            label: t`Danger Zone`,
+            items: danger,
+            showDividerAbove: true,
+        }] : []),
+    ];
+};
+
+export const EntityActionMenuItems = ({actions}: { actions: EntityAction[] }) => {
+    const danger = byGroup(actions, 'danger');
+
+    return (
+        <>
+            <Menu.Label>{t`Manage`}</Menu.Label>
+            {[...byGroup(actions, 'primary'), ...byGroup(actions, 'secondary')].map(action => (
+                <Menu.Item
+                    key={action.key}
+                    leftSection={action.icon}
+                    onClick={action.onClick}
+                    color={action.color}
+                >
+                    {action.label}
+                </Menu.Item>
+            ))}
+            {danger.length > 0 && (
+                <>
+                    <Menu.Divider/>
+                    <Menu.Label>{t`Danger zone`}</Menu.Label>
+                    {danger.map(action => (
+                        <Menu.Item
+                            key={action.key}
+                            leftSection={action.icon}
+                            onClick={action.onClick}
+                            color={action.color}
+                        >
+                            {action.label}
+                        </Menu.Item>
+                    ))}
+                </>
+            )}
+        </>
+    );
+};
+
+export const EntityActionBar = ({actions}: { actions: EntityAction[] }) => {
+    const primary = byGroup(actions, 'primary');
+    const secondary = byGroup(actions, 'secondary');
+    const danger = byGroup(actions, 'danger');
+
+    return (
+        <div className={classes.bar}>
+            {primary.map(action => (
+                <Button
+                    key={action.key}
+                    variant="default"
+                    size="compact-sm"
+                    color={action.color}
+                    leftSection={action.icon}
+                    onClick={action.onClick}
+                    data-testid={action.dataTestId}
+                >
+                    {action.label}
+                </Button>
+            ))}
+
+            {(secondary.length > 0 || danger.length > 0) && (
+                <Menu shadow="md" width={210} position="bottom-end">
+                    <Menu.Target>
+                        <Tooltip label={t`More actions`} withArrow position="bottom">
+                            <ActionIcon variant="subtle" color="gray" size="lg" radius="xl">
+                                <IconDotsVertical size={16}/>
+                            </ActionIcon>
+                        </Tooltip>
+                    </Menu.Target>
+                    <Menu.Dropdown>
+                        {secondary.map(action => (
+                            <Menu.Item key={action.key} leftSection={action.icon} onClick={action.onClick}>
+                                {action.label}
+                            </Menu.Item>
+                        ))}
+                        {secondary.length > 0 && danger.length > 0 && <Menu.Divider/>}
+                        {danger.map(action => (
+                            <Menu.Item
+                                key={action.key}
+                                leftSection={action.icon}
+                                onClick={action.onClick}
+                                color={action.color}
+                            >
+                                {action.label}
+                            </Menu.Item>
+                        ))}
+                    </Menu.Dropdown>
+                </Menu>
+            )}
+        </div>
+    );
+};
diff --git a/frontend/src/components/common/OrderDetails/OrderDetails.module.scss b/frontend/src/components/common/OrderDetails/OrderDetails.module.scss
index 4b150b7eab..1895ab1707 100644
--- a/frontend/src/components/common/OrderDetails/OrderDetails.module.scss
+++ b/frontend/src/components/common/OrderDetails/OrderDetails.module.scss
@@ -1,31 +1,32 @@
 @use "../../../styles/mixins";
 
 .orderDetails {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  column-gap: var(--mantine-spacing-xl);
+  row-gap: var(--mantine-spacing-md);
 
-  .block {
-    width: 50%;
-    margin-bottom: var(--hi-spacing-md);
+  @include mixins.respond-below(sm) {
+    grid-template-columns: minmax(0, 1fr);
   }
 
-  @include mixins.respond-below(md) {
-    flex-direction: column;
-    flex-wrap: nowrap;
-
-    .block {
-      margin-bottom: 10px;
-      width: auto;
-
-      &:last-of-type {
-        margin-bottom: 0;
-      }
-    }
+  .block {
+    min-width: 0;
   }
 
   .title {
-    font-weight: bold;
+    font-size: var(--mantine-font-size-xs);
+    font-weight: 400;
+    color: var(--mantine-color-dimmed);
+    margin-bottom: 3px;
+  }
+
+  .amount,
+  .value {
+    font-size: var(--mantine-font-size-sm);
+    font-weight: 500;
+    line-height: 1.45;
+    color: var(--mantine-color-text);
+    overflow-wrap: anywhere;
   }
 }
diff --git a/frontend/src/components/common/OrderDetails/index.tsx b/frontend/src/components/common/OrderDetails/index.tsx
index 732a3347f4..92c4ac41d1 100644
--- a/frontend/src/components/common/OrderDetails/index.tsx
+++ b/frontend/src/components/common/OrderDetails/index.tsx
@@ -7,14 +7,12 @@ import {Event, Order} from "../../../types.ts";
 import classes from "./OrderDetails.module.scss";
 import {t} from "@lingui/macro";
 import {formatAddress} from "../../../utilites/addressUtilities.ts";
-import React from "react";
 import {capitalize} from "../../../utilites/stringHelper.ts";
 
-export const OrderDetails = ({order, event, cardVariant = 'lightGray', style = {}}: {
+export const OrderDetails = ({order, event, cardVariant = 'lightGray'}: {
     order: Order,
     event: Event,
     cardVariant?: CardVariant,
-    style?: React.CSSProperties
 }) => {
     const occurrenceItems = order.order_items?.filter(item => item.event_occurrence) ?? [];
     const uniqueOccurrences = Array.from(
@@ -22,7 +20,7 @@ export const OrderDetails = ({order, event, cardVariant = 'lightGray', style = {
     );
 
     return (
-        <Card className={classes.orderDetails} variant={cardVariant} style={style}>
+        <Card className={classes.orderDetails} variant={cardVariant}>
             <div className={classes.block}>
                 <div className={classes.title}>
                     {t`Name`}
diff --git a/frontend/src/components/common/OrderSummary/OrderSummary.module.scss b/frontend/src/components/common/OrderSummary/OrderSummary.module.scss
index 40dec7fad8..4ded645eb3 100644
--- a/frontend/src/components/common/OrderSummary/OrderSummary.module.scss
+++ b/frontend/src/components/common/OrderSummary/OrderSummary.module.scss
@@ -3,27 +3,32 @@
 
     .separator {
       height: 1px;
-      margin: 7px 0;
+      margin: var(--mantine-spacing-xs) 0;
       width: 100%;
-      border-bottom: 1px solid #ddd;
+      background-color: var(--mantine-color-gray-2);
     }
 
     .itemRow {
       display: flex;
-      align-content: center;
+      align-items: baseline;
       justify-content: space-between;
-      padding: 10px 0;
+      gap: var(--mantine-spacing-md);
+      padding: 6px 0;
+      font-size: var(--mantine-font-size-sm);
 
       .itemName {
         text-align: left;
+        min-width: 0;
+        color: var(--mantine-color-text);
 
         .total {
-          font-size: 1.1em;
+          font-weight: 600;
+          color: var(--mantine-color-text);
         }
 
         .occurrenceMeta {
-          margin-top: 4px;
-          font-size: 12px;
+          margin-top: 3px;
+          font-size: var(--mantine-font-size-xs);
           color: var(--mantine-color-dimmed);
         }
       }
@@ -32,7 +37,23 @@
         text-align: right;
         font-weight: 500;
         white-space: nowrap;
+        color: var(--mantine-color-text);
       }
     }
+
+    .itemRow:last-child {
+      font-size: 0.9375rem;
+
+      .itemValue {
+        font-weight: 600;
+      }
+    }
+  }
+
+  .priceBeforeDiscount {
+    display: inline-block;
+    margin-right: 5px;
+    color: var(--mantine-color-dimmed);
+    font-weight: 400;
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/common/OrderSummary/index.tsx b/frontend/src/components/common/OrderSummary/index.tsx
index e3ccc2f185..36dc82d9c6 100644
--- a/frontend/src/components/common/OrderSummary/index.tsx
+++ b/frontend/src/components/common/OrderSummary/index.tsx
@@ -32,7 +32,7 @@ export const OrderSummary = ({event, order, showFreeWhenZeroTotal = true}: Order
                             </div>
                             <div className={classes.itemValue}>
                                 {!!item.price_before_discount && (
-                                    <div style={{color: '#888', marginRight: '5px', display: 'inline-block'}}>
+                                    <div className={classes.priceBeforeDiscount}>
                                         <Currency
                                             currency={event.currency}
                                             price={item.price_before_discount * item.quantity}
diff --git a/frontend/src/components/common/OrdersTable/index.tsx b/frontend/src/components/common/OrdersTable/index.tsx
index 90d7509fc1..56ed401525 100644
--- a/frontend/src/components/common/OrdersTable/index.tsx
+++ b/frontend/src/components/common/OrdersTable/index.tsx
@@ -1,9 +1,8 @@
 import {t} from "@lingui/macro";
 import {Anchor, Button, Group, Menu, Popover, Text, Tooltip} from '@mantine/core';
-import {Event, IdParam, Invoice, MessageType, Order} from "../../../types.ts";
+import {Event, IdParam, Invoice, Order} from "../../../types.ts";
 import {
     IconAlertCircle,
-    IconBasketCog,
     IconCalendarEvent,
     IconCash,
     IconCheck,
@@ -15,37 +14,25 @@ import {
     IconFileInvoice,
     IconFileOff,
     IconHelp,
-    IconReceipt2,
-    IconReceiptDollar,
-    IconReceiptRefund,
-    IconRepeat,
     IconSend,
     IconTicket,
-    IconTrash,
     IconX
 } from "@tabler/icons-react";
 import {formatDateWithLocale, relativeDate} from "../../../utilites/dates.ts";
 import {ManageOrderModal} from "../../modals/ManageOrderModal";
 import {useClipboard, useDisclosure} from "@mantine/hooks";
 import {useMemo, useState} from "react";
-import {CancelOrderModal} from "../../modals/CancelOrderModal";
-import {SendMessageModal} from "../../modals/SendMessageModal";
 import {NoResultsSplash} from "../NoResultsSplash";
-import {RefundOrderModal} from "../../modals/RefundOrderModal";
 import classes from "./OrdersTable.module.scss";
-import {useResendOrderConfirmation} from "../../../mutations/useResendOrderConfirmation.ts";
 import {formatNumber} from "../../../utilites/helpers.ts";
 import {useUrlHash} from "../../../hooks/useUrlHash.ts";
-import {useMarkOrderAsPaid} from "../../../mutations/useMarkOrderAsPaid.ts";
-import {orderClient} from "../../../api/order.client.ts";
-import {downloadBinary} from "../../../utilites/download.ts";
-import {withLoadingNotification} from "../../../utilites/withLoadingNotification.tsx";
-import {showError, showSuccess} from "../../../utilites/notifications.tsx";
+import {useOrderActions} from "../../../hooks/useOrderActions.tsx";
+import {EntityActionMenuItems} from "../EntityActions";
+import {showSuccess} from "../../../utilites/notifications.tsx";
 import {TanStackTable, TanStackTableColumn} from "../TanStackTable";
 import {ColumnVisibilityToggle} from "../ColumnVisibilityToggle";
 import {CellContext} from "@tanstack/react-table";
 import {formatCurrency} from "../../../utilites/currency.ts";
-import {eventCheckoutUrl} from "../../../utilites/urlHelper.ts";
 
 interface OrdersTableProps {
     event: Event,
@@ -55,14 +42,13 @@ interface OrdersTableProps {
 
 export const OrdersTable = ({orders, event, compact}: OrdersTableProps) => {
     const [isViewModalOpen, viewModal] = useDisclosure(false);
-    const [isCancelModalOpen, cancelModal] = useDisclosure(false);
-    const [isMessageModalOpen, messageModal] = useDisclosure(false);
-    const [isRefundModalOpen, refundModal] = useDisclosure(false);
     const [orderId, setOrderId] = useState<IdParam>();
     const [emailPopoverId, setEmailPopoverId] = useState<IdParam | null>(null);
-    const resendConfirmationMutation = useResendOrderConfirmation();
-    const markAsPaidMutation = useMarkOrderAsPaid();
     const clipboard = useClipboard({timeout: 2000});
+    const {getOrderActions, orderActionModals, openMessageModal, downloadInvoice} = useOrderActions({
+        eventId: event.id,
+        onManage: (order: Order) => handleModalClick(order.id, viewModal),
+    });
 
     useUrlHash(/^#order-(\d+)$/, (matches => {
         const orderId = matches![1];
@@ -75,43 +61,6 @@ export const OrdersTable = ({orders, event, compact}: OrdersTableProps) => {
         modal.open();
     }
 
-    const handleMarkAsPaid = (eventId: IdParam, orderId: IdParam) => {
-        markAsPaidMutation.mutate({eventId, orderId}, {
-            onSuccess: () => showSuccess(t`Order marked as paid`),
-            onError: () => showError(t`There was an error marking the order as paid`)
-        });
-    }
-
-    const handleResendConfirmation = (eventId: IdParam, orderId: IdParam) => {
-        resendConfirmationMutation.mutate({eventId, orderId}, {
-            onSuccess: () => showSuccess(t`Your message has been sent`),
-            onError: () => showError(t`There was an error sending your message`)
-        });
-    }
-
-    const handleInvoiceDownload = async (invoice: Invoice) => {
-        await withLoadingNotification(
-            async () => {
-                const blob = await orderClient.downloadInvoice(event.id, invoice.order_id);
-                downloadBinary(blob, invoice.invoice_number + '.pdf');
-            },
-            {
-                loading: {
-                    title: t`Downloading Invoice`,
-                    message: t`Please wait while we prepare your invoice...`
-                },
-                success: {
-                    title: t`Success`,
-                    message: t`Invoice downloaded successfully`
-                },
-                error: {
-                    title: t`Error`,
-                    message: t`Failed to download invoice. Please try again.`
-                }
-            }
-        );
-    };
-
     const handleCopyEmail = (email: string) => {
         clipboard.copy(email);
         showSuccess(t`Email address copied to clipboard`);
@@ -120,7 +69,7 @@ export const OrdersTable = ({orders, event, compact}: OrdersTableProps) => {
 
     const handleMessageFromEmail = (order: Order) => {
         setEmailPopoverId(null);
-        handleModalClick(order.id, messageModal);
+        openMessageModal(order);
     };
 
     const formatTime = (dateString: string): string => {
@@ -133,11 +82,6 @@ export const OrdersTable = ({orders, event, compact}: OrdersTableProps) => {
     };
 
     const ActionMenu = ({order}: { order: Order }) => {
-        const isRefundable = !order.is_free_order
-            && order.status !== 'AWAITING_OFFLINE_PAYMENT'
-            && order.payment_provider === 'STRIPE'
-            && order.refund_status !== 'REFUNDED';
-
         return (
             <Group wrap={'nowrap'} gap={0} justify={'flex-end'}>
                 <Menu shadow="md" width={200}>
@@ -150,52 +94,7 @@ export const OrdersTable = ({orders, event, compact}: OrdersTableProps) => {
                     </Menu.Target>
 
                     <Menu.Dropdown>
-                        <Menu.Label>{t`Manage`}</Menu.Label>
-                        <Menu.Item onClick={() => handleModalClick(order.id, viewModal)}
-                                   leftSection={<IconBasketCog size={14}/>}>{t`Manage order`}</Menu.Item>
-                        <Menu.Item onClick={() => handleModalClick(order.id, messageModal)}
-                                   leftSection={<IconSend size={14}/>}>{t`Message buyer`}</Menu.Item>
-                        <Menu.Item onClick={() => {
-                                       const url = eventCheckoutUrl(order.event_id, order.short_id, 'summary');
-                                       clipboard.copy(url);
-                                       showSuccess(t`Customer link copied to clipboard`);
-                                   }}
-                                   leftSection={<IconCopy size={14}/>}>{t`Copy customer link`}</Menu.Item>
-
-                        {order.latest_invoice && (
-                            <Menu.Item onClick={() => handleInvoiceDownload(order.latest_invoice as Invoice)}
-                                       leftSection={<IconReceipt2 size={14}/>}>{t`Download invoice`}</Menu.Item>
-                        )}
-
-                        {order.status === 'AWAITING_OFFLINE_PAYMENT' && (
-                            <Menu.Item onClick={() => handleMarkAsPaid(event.id, order.id)}
-                                       leftSection={<IconReceiptDollar size={14}/>}>{t`Mark as paid`}</Menu.Item>
-                        )}
-
-                        {isRefundable && (
-                            <Menu.Item onClick={() => handleModalClick(order.id, refundModal)}
-                                       leftSection={<IconReceiptRefund size={14}/>}>{t`Refund order`}</Menu.Item>
-                        )}
-
-                        {order.status === 'COMPLETED' && (
-                            <Menu.Item
-                                onClick={() => handleResendConfirmation(event.id, order.id)}
-                                leftSection={<IconRepeat size={14}/>}>
-                                {t`Resend order email`}
-                            </Menu.Item>
-                        )}
-
-                        {order.status !== 'CANCELLED' && (
-                            <>
-                                <Menu.Divider/>
-                                <Menu.Label>{t`Danger zone`}</Menu.Label>
-                                <Menu.Item color="red"
-                                           onClick={() => handleModalClick(order.id, cancelModal)}
-                                           leftSection={<IconTrash size={14}/>}>
-                                    {t`Cancel order`}
-                                </Menu.Item>
-                            </>
-                        )}
+                        <EntityActionMenuItems actions={getOrderActions(order)}/>
                     </Menu.Dropdown>
                 </Menu>
             </Group>
@@ -305,7 +204,7 @@ export const OrdersTable = ({orders, event, compact}: OrdersTableProps) => {
                                 </Text>
                                 {order.latest_invoice ? (
                                     <Anchor
-                                        onClick={() => handleInvoiceDownload(order.latest_invoice as Invoice)}
+                                        onClick={() => downloadInvoice(order.latest_invoice as Invoice)}
                                         className={classes.invoiceLink}
                                         style={{cursor: 'pointer'}}
                                     >
@@ -495,18 +394,8 @@ export const OrdersTable = ({orders, event, compact}: OrdersTableProps) => {
                 hideHeader={compact}
                 noCard={compact}
             />
-            {orderId && (
-                <>
-                    {isRefundModalOpen && <RefundOrderModal onClose={refundModal.close} orderId={orderId}/>}
-                    {isViewModalOpen && <ManageOrderModal onClose={viewModal.close} orderId={orderId}/>}
-                    {isCancelModalOpen && <CancelOrderModal onClose={cancelModal.close} orderId={orderId}/>}
-                    {isMessageModalOpen && <SendMessageModal
-                        onClose={messageModal.close}
-                        orderId={orderId}
-                        messageType={MessageType.OrderOwner}
-                    />}
-                </>
-            )}
+            {orderId && isViewModalOpen && <ManageOrderModal onClose={viewModal.close} orderId={orderId}/>}
+            {orderActionModals}
         </>
     )
 };
diff --git a/frontend/src/components/common/QuestionAndAnswerList/QuestionAndAnswerList.module.scss b/frontend/src/components/common/QuestionAndAnswerList/QuestionAndAnswerList.module.scss
index 9acae80f4b..f608057f8a 100644
--- a/frontend/src/components/common/QuestionAndAnswerList/QuestionAndAnswerList.module.scss
+++ b/frontend/src/components/common/QuestionAndAnswerList/QuestionAndAnswerList.module.scss
@@ -1,37 +1,36 @@
-/* QuestionAndAnswerList.module.scss */
 .container {
   display: flex;
   flex-direction: column;
-  gap: 1.5rem;
+  gap: var(--mantine-spacing-lg);
 }
 
 .section {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: var(--mantine-spacing-sm);
 }
 
 .sectionHeader {
-  padding-bottom: 0.5rem;
+  padding-bottom: var(--mantine-spacing-xs);
   border-bottom: 1px solid var(--mantine-color-gray-2);
 }
 
 .questionsList {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: var(--mantine-spacing-md);
 }
 
 .questionCard {
-  padding: 0.75rem;
-  background: #ffffff;
+  padding: var(--mantine-spacing-md);
+  background-color: var(--mantine-color-body);
   border: 1px solid var(--mantine-color-gray-2);
-  border-radius: var(--mantine-radius-sm);
+  border-radius: var(--mantine-radius-md);
 }
 
 .questionCompact {
-  padding: 0.5rem 0;
-  border-bottom: 1px solid var(--mantine-color-gray-1);
+  padding: var(--mantine-spacing-xs) 0;
+  border-bottom: 1px solid var(--mantine-color-gray-2);
 
   &:last-child {
     border-bottom: none;
@@ -39,97 +38,79 @@
 }
 
 .productTitle {
-  color: var(--mantine-color-gray-6);
-  margin-bottom: 0.5rem;
+  color: var(--mantine-color-dimmed);
+  margin-bottom: var(--mantine-spacing-xs);
   font-size: var(--mantine-font-size-xs);
 }
 
 .questionTitle {
   display: flex;
-  gap: 0.5rem;
-  margin-bottom: 0.375rem;
+  gap: var(--mantine-spacing-xs);
+  margin-bottom: 4px;
   align-items: flex-start;
 }
 
 .answerContainer {
   display: flex;
   align-items: flex-start;
-  gap: 0.5rem;
+  gap: var(--mantine-spacing-xs);
 }
 
 .answer {
   flex: 1;
-  color: var(--mantine-color-dark-6);
+  color: var(--mantine-color-text);
   word-break: break-word;
 }
 
 .editContainer {
-  padding: 0.5rem;
-  background: var(--mantine-color-gray-0);
+  padding: var(--mantine-spacing-sm);
+  background-color: var(--mantine-color-gray-0);
   border: 1px solid var(--mantine-color-gray-2);
-  border-radius: var(--mantine-radius-sm);
+  border-radius: var(--mantine-radius-md);
 }
 
 .editActions {
-  margin-top: 0.5rem;
+  margin-top: var(--mantine-spacing-xs);
 }
 
 .attendeeInfo {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  margin-top: 0.625rem;
-  padding-top: 0.625rem;
-  border-top: 1px solid var(--mantine-color-gray-1);
-  color: var(--mantine-color-gray-6);
-}
-
-.emptyState {
-  padding: 1.5rem;
-  text-align: center;
+  gap: var(--mantine-spacing-xs);
+  margin-top: var(--mantine-spacing-sm);
+  padding-top: var(--mantine-spacing-sm);
+  border-top: 1px solid var(--mantine-color-gray-2);
+  color: var(--mantine-color-dimmed);
 }
 
 .questionText {
-  color: #333;
-  border-bottom: 1px solid #f0f0f0;
-  padding-bottom: 4px;
+  color: var(--mantine-color-dimmed);
+  font-weight: 500;
 }
 
-/* New styles for attendee-focused layout */
 .attendeeQuestionsList {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: var(--mantine-spacing-sm);
 }
 
 .attendeeSection {
-  border: 1px solid var(--mantine-color-gray-3);
-  border-radius: var(--mantine-radius-sm);
+  border: 1px solid var(--mantine-color-gray-2);
+  border-radius: var(--mantine-radius-md);
   overflow: hidden;
-  background: var(--mantine-color-gray-0);
 }
 
 .attendeeHeader {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0.5rem 0.75rem;
-  background-color: var(--mantine-color-gray-1);
-  border-bottom: 1px solid var(--mantine-color-gray-3);
+  padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
+  background-color: var(--mantine-color-gray-0);
+  border-bottom: 1px solid var(--mantine-color-gray-2);
 }
 
 .attendeeQuestions {
-  padding: 0.5rem;
+  padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
-}
-
-/* In compact mode, adjust spacing in attendee sections */
-.questionCompact:first-child {
-  padding-top: 0.25rem;
-}
-
-.questionCompact:last-child {
-  padding-bottom: 0.25rem;
 }
diff --git a/frontend/src/components/common/QuestionAndAnswerList/index.tsx b/frontend/src/components/common/QuestionAndAnswerList/index.tsx
index ae482bdb3c..25dd0849f1 100644
--- a/frontend/src/components/common/QuestionAndAnswerList/index.tsx
+++ b/frontend/src/components/common/QuestionAndAnswerList/index.tsx
@@ -113,7 +113,7 @@ const QuestionItem = ({ qa, isEditing, toggleEditMode, onEditAnswer, compact = f
             )}
 
             <div className={classes.questionTitle}>
-                <Text size="sm" fw={600} className={classes.questionText}>
+                <Text size="xs" className={classes.questionText}>
                     {qa.title}
                 </Text>
             </div>
diff --git a/frontend/src/components/common/SideDrawer/SideDrawer.module.scss b/frontend/src/components/common/SideDrawer/SideDrawer.module.scss
index a1174a020c..56e72536eb 100644
--- a/frontend/src/components/common/SideDrawer/SideDrawer.module.scss
+++ b/frontend/src/components/common/SideDrawer/SideDrawer.module.scss
@@ -1,6 +1,241 @@
-.sideBarTitle {
-    font-size: 1.5rem;
+@use "../../../styles/mixins";
+
+.content {
+    display: flex;
+    flex-direction: column;
+}
+
+.body {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    padding: 0;
+    min-height: 100%;
+}
+
+.header {
+    position: sticky;
+    top: 0;
+    z-index: 3;
+    display: flex;
+    align-items: center;
+    gap: var(--mantine-spacing-md);
+    padding: 18px var(--mantine-spacing-lg);
+    background-color: var(--mantine-color-body);
+
+    &[data-bordered] {
+        border-bottom: 1px solid var(--mantine-color-gray-2);
+    }
+}
+
+.headerActions {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-inline-start: auto;
+    flex-shrink: 0;
+}
+
+.scrollArea {
+    flex: 1;
+    padding: 0 var(--mantine-spacing-lg) var(--mantine-spacing-xl);
+    outline: none;
+}
+
+.footer {
+    position: sticky;
+    bottom: 0;
+    margin-top: auto;
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--mantine-spacing-sm);
+    padding: var(--mantine-spacing-md) var(--mantine-spacing-lg);
+    background-color: var(--mantine-color-body);
+    border-top: 1px solid var(--mantine-color-gray-2);
+}
+
+.heading {
+    display: flex;
+    align-items: center;
+    gap: var(--mantine-spacing-sm);
+    min-width: 0;
+}
+
+.headingMedia {
+    flex-shrink: 0;
+}
+
+.headingText {
+    min-width: 0;
+}
+
+.headingTitle {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 1.0625rem;
     font-weight: 600;
-    margin-top: 15px;
-    margin-bottom: 5px;
+    line-height: 1.3;
+    letter-spacing: -0.01em;
+    min-width: 0;
+
+    > span {
+        @include mixins.ellipsis();
+    }
+}
+
+.headingSubtitle {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-top: 3px;
+    font-size: var(--mantine-font-size-xs);
+    color: var(--mantine-color-dimmed);
+    min-width: 0;
+
+    > span {
+        @include mixins.ellipsis();
+    }
+}
+
+.stats {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 1px;
+    margin-top: var(--mantine-spacing-lg);
+    background-color: var(--mantine-color-gray-2);
+    border: 1px solid var(--mantine-color-gray-2);
+    border-radius: var(--mantine-radius-md);
+    overflow: hidden;
+}
+
+.stat {
+    padding: 11px 14px;
+    background-color: var(--mantine-color-gray-0);
+    min-width: 0;
+}
+
+.statLabel {
+    font-size: 0.6875rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--mantine-color-dimmed);
+}
+
+.statValue {
+    margin-top: 5px;
+    font-size: 0.9375rem;
+    font-weight: 600;
+    line-height: 1.35;
+    color: var(--mantine-color-text);
+    @include mixins.ellipsis();
+}
+
+.section {
+    padding-top: var(--mantine-spacing-xl);
+
+    & + & {
+        margin-top: var(--mantine-spacing-xl);
+        border-top: 1px solid var(--mantine-color-gray-2);
+    }
+}
+
+.sectionHeader {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: var(--mantine-spacing-sm);
+}
+
+.sectionTitle {
+    margin: 0;
+    font-size: 0.6875rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--mantine-color-dimmed);
+}
+
+.sectionCount {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 18px;
+    height: 18px;
+    padding: 0 6px;
+    border-radius: var(--mantine-radius-xl);
+    background-color: var(--mantine-color-gray-1);
+    color: var(--mantine-color-dimmed);
+    font-size: 0.6875rem;
+    font-weight: 600;
+    line-height: 1;
+}
+
+.surface {
+    padding: 10px var(--mantine-spacing-md);
+    border: 1px solid var(--mantine-color-gray-2);
+    border-radius: var(--mantine-radius-md);
+    background-color: var(--mantine-color-body);
+}
+
+.fields {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    column-gap: var(--mantine-spacing-xl);
+    row-gap: var(--mantine-spacing-md);
+}
+
+.field {
+    min-width: 0;
+}
+
+.fieldLabel {
+    font-size: var(--mantine-font-size-xs);
+    color: var(--mantine-color-dimmed);
+    margin-bottom: 3px;
+}
+
+.fieldValue {
+    font-size: var(--mantine-font-size-sm);
+    font-weight: 500;
+    line-height: 1.45;
+    color: var(--mantine-color-text);
+    overflow-wrap: anywhere;
+}
+
+.placeholder {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mantine-spacing-lg);
+    padding-top: var(--mantine-spacing-lg);
+}
+
+@include mixins.respond-below(sm) {
+    .header,
+    .footer {
+        padding-left: var(--mantine-spacing-md);
+        padding-right: var(--mantine-spacing-md);
+    }
+
+    .header {
+        padding-top: var(--mantine-spacing-md);
+        padding-bottom: var(--mantine-spacing-md);
+    }
+
+    .scrollArea {
+        padding: 0 var(--mantine-spacing-md) var(--mantine-spacing-lg);
+    }
+
+    .stats {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .fields {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .footer button {
+        flex: 1;
+    }
 }
diff --git a/frontend/src/components/common/SideDrawer/index.tsx b/frontend/src/components/common/SideDrawer/index.tsx
index 5bd54d1963..0090b75b61 100644
--- a/frontend/src/components/common/SideDrawer/index.tsx
+++ b/frontend/src/components/common/SideDrawer/index.tsx
@@ -1,31 +1,132 @@
-import {Drawer, DrawerProps} from "@mantine/core";
-import React from "react";
+import {CloseButton, Drawer, DrawerProps, Skeleton} from "@mantine/core";
+import React, {useId} from "react";
+import {t} from "@lingui/macro";
 import classes from "./SideDrawer.module.scss";
 
-interface SideDrawerProps {
-    heading?: string | React.ReactNode,
+interface SideDrawerProps extends Omit<DrawerProps, 'position' | 'size' | 'title'> {
+    header?: React.ReactNode;
+    actions?: React.ReactNode;
+    footer?: React.ReactNode;
+    loading?: boolean;
 }
 
-export const SideDrawer = (props: DrawerProps & SideDrawerProps) => {
+interface SideDrawerHeadingProps {
+    media?: React.ReactNode;
+    title: React.ReactNode;
+    subtitle?: React.ReactNode;
+}
+
+export interface DrawerStat {
+    label: string;
+    value: React.ReactNode;
+}
+
+interface SideDrawerSectionProps {
+    title: string;
+    count?: number;
+    surface?: boolean;
+    children: React.ReactNode;
+}
+
+export const SideDrawerHeading = ({media, title, subtitle}: SideDrawerHeadingProps) => (
+    <div className={classes.heading}>
+        {media && <div className={classes.headingMedia}>{media}</div>}
+        <div className={classes.headingText}>
+            <div className={classes.headingTitle}>{title}</div>
+            {subtitle && <div className={classes.headingSubtitle}>{subtitle}</div>}
+        </div>
+    </div>
+);
+
+export const SideDrawerStats = ({stats}: { stats: DrawerStat[] }) => (
+    <div className={classes.stats}>
+        {stats.map((stat) => (
+            <div key={stat.label} className={classes.stat}>
+                <div className={classes.statLabel}>{stat.label}</div>
+                <div className={classes.statValue}>{stat.value}</div>
+            </div>
+        ))}
+    </div>
+);
+
+export const SideDrawerSection = ({title, count, surface, children}: SideDrawerSectionProps) => (
+    <section className={classes.section}>
+        <div className={classes.sectionHeader}>
+            <h3 className={classes.sectionTitle}>{title}</h3>
+            {count !== undefined && <span className={classes.sectionCount}>{count}</span>}
+        </div>
+        {surface ? <div className={classes.surface}>{children}</div> : children}
+    </section>
+);
+
+export const SideDrawerFields = ({fields}: { fields: DrawerStat[] }) => (
+    <div className={classes.fields}>
+        {fields.map((field) => (
+            <div key={field.label} className={classes.field}>
+                <div className={classes.fieldLabel}>{field.label}</div>
+                <div className={classes.fieldValue}>{field.value}</div>
+            </div>
+        ))}
+    </div>
+);
+
+const HeadingPlaceholder = () => (
+    <div className={classes.heading}>
+        <Skeleton height={42} circle/>
+        <div className={classes.headingText}>
+            <Skeleton height={13} width="45%" radius="sm"/>
+            <Skeleton height={10} width="70%" radius="sm" mt={10}/>
+        </div>
+    </div>
+);
+
+const ContentPlaceholder = () => (
+    <div className={classes.placeholder}>
+        <Skeleton height={74} radius="md"/>
+        {[45, 70, 55, 65].map((width, index) => (
+            <Skeleton key={index} height={12} width={`${width}%`} radius="sm"/>
+        ))}
+    </div>
+);
+
+export const SideDrawer = ({header, actions, footer, loading, children, ...props}: SideDrawerProps) => {
+    const headingId = useId();
+
     return (
         <Drawer
             {...props}
+            aria-labelledby={headingId}
+            position="right"
+            size="xl"
+            withCloseButton={false}
+            closeOnClickOutside={false}
             overlayProps={{
                 opacity: 0.55,
                 blur: 3,
             }}
-            position="right"
-            size={'xl'}
-            withCloseButton={true}
-            title={props.heading}
-            closeOnClickOutside={false}
             classNames={{
-                title: classes.sideDrawerTitle,
+                content: classes.content,
+                body: classes.body,
             }}
         >
-            <div style={{padding: '15px', paddingTop: 0}}>
-                {props.children}
+            <div className={classes.header} data-bordered={(header || loading) ? true : undefined} id={headingId}>
+                {loading ? <HeadingPlaceholder/> : header}
+                <div className={classes.headerActions}>
+                    {actions}
+                    <CloseButton
+                        aria-label={t`Close`}
+                        onClick={props.onClose}
+                        size="lg"
+                        radius="xl"
+                    />
+                </div>
             </div>
+
+            <div className={classes.scrollArea} data-autofocus tabIndex={-1}>
+                {loading ? <ContentPlaceholder/> : children}
+            </div>
+
+            {footer && <div className={classes.footer}>{footer}</div>}
         </Drawer>
     )
 }
diff --git a/frontend/src/components/modals/ManageAttendeeModal/ManageAttendeeModal.module.scss b/frontend/src/components/modals/ManageAttendeeModal/ManageAttendeeModal.module.scss
index b0db64bc9f..a2740c3d7e 100644
--- a/frontend/src/components/modals/ManageAttendeeModal/ManageAttendeeModal.module.scss
+++ b/frontend/src/components/modals/ManageAttendeeModal/ManageAttendeeModal.module.scss
@@ -1,16 +1,15 @@
-.container {
-  padding: 0.5rem;
+.reference {
+    font-family: var(--mantine-font-family-monospace);
 }
 
-.header {
-  display: flex;
-  align-items: center;
-  margin-bottom: 1.5rem;
-  padding: 0 0.5rem;
+.actions {
+    padding-top: var(--mantine-spacing-md);
 }
 
-.attendeeInfo {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
+.form {
+    padding-top: var(--mantine-spacing-lg);
+}
+
+.notes {
+    white-space: pre-line;
 }
diff --git a/frontend/src/components/modals/ManageAttendeeModal/index.tsx b/frontend/src/components/modals/ManageAttendeeModal/index.tsx
index 807995a697..2a3beedaed 100644
--- a/frontend/src/components/modals/ManageAttendeeModal/index.tsx
+++ b/frontend/src/components/modals/ManageAttendeeModal/index.tsx
@@ -5,14 +5,11 @@ import {useGetOrder} from "../../../queries/useGetOrder.ts";
 import {useUpdateAttendee} from "../../../mutations/useUpdateAttendee.ts";
 import {useFormErrorResponseHandler} from "../../../hooks/useFormErrorResponseHandler.tsx";
 import {useForm} from "@mantine/form";
-import {Accordion} from "../../common/Accordion";
-import {Button} from "../../common/Button";
-import {Avatar, Box, Group, Stack, Tabs, Text, Textarea, TextInput} from "@mantine/core";
-import {IconEdit, IconNotebook, IconQuestionMark, IconReceipt, IconTicket, IconUser} from "@tabler/icons-react";
-import {LoadingMask} from "../../common/LoadingMask";
-import {AttendeeDetails} from "../../common/AttendeeDetails";
-import {OrderDetails} from "../../common/OrderDetails";
+import {Anchor, Avatar, Button, Text, Textarea, TextInput} from "@mantine/core";
+import {EntityActionBar} from "../../common/EntityActions";
+import {useAttendeeActions} from "../../../hooks/useAttendeeActions.tsx";
 import {QuestionList} from "../../common/QuestionAndAnswerList";
+import {ManageOrderModal} from "../ManageOrderModal";
 import {AttendeeTicket} from "../../common/AttendeeTicket";
 import {getInitials} from "../../../utilites/helpers.ts";
 import {t} from "@lingui/macro";
@@ -20,18 +17,30 @@ import classes from './ManageAttendeeModal.module.scss';
 import {useEffect, useState} from "react";
 import {showSuccess} from "../../../utilites/notifications.tsx";
 import {ProductSelector} from "../../common/ProductSelector";
-import {GenericModalProps, IdParam, ProductCategory, ProductType, QuestionAnswer} from "../../../types.ts";
+import {GenericModalProps, IdParam, Product, ProductCategory, ProductType, QuestionAnswer} from "../../../types.ts";
 import {InputGroup} from "../../common/InputGroup";
 import {InputLabelWithHelp} from "../../common/InputLabelWithHelp";
 import {EditAttendeeRequest} from "../../../api/attendee.client.ts";
 import {AttendeeStatusBadge} from "../../common/AttendeeStatusBadge";
-import {SideDrawer} from "../../common/SideDrawer";
+import {getAttendeeProductTitle} from "../../../utilites/products.ts";
+import {getLocaleName, SupportedLocales} from "../../../locales.ts";
+import {relativeDate} from "../../../utilites/dates.ts";
+import {
+    DrawerStat,
+    SideDrawer,
+    SideDrawerFields,
+    SideDrawerHeading,
+    SideDrawerSection,
+    SideDrawerStats
+} from "../../common/SideDrawer";
 
 interface ManageAttendeeModalProps extends GenericModalProps {
     onClose: () => void;
     attendeeId: IdParam;
 }
 
+const FORM_ID = 'manage-attendee-form';
+
 export const ManageAttendeeModal = ({onClose, attendeeId}: ManageAttendeeModalProps) => {
     const {eventId} = useParams();
     const {data: attendee, refetch: refetchAttendee} = useGetAttendee(eventId, attendeeId);
@@ -39,6 +48,10 @@ export const ManageAttendeeModal = ({onClose, attendeeId}: ManageAttendeeModalPr
     const {data: event} = useGetEvent(eventId);
     const errorHandler = useFormErrorResponseHandler();
     const mutation = useUpdateAttendee();
+    const {getAttendeeActions, attendeeActionModals} = useAttendeeActions({
+        eventId,
+        onEdit: () => setIsEditing(true),
+    });
 
     const form = useForm({
         initialValues: {
@@ -51,7 +64,8 @@ export const ManageAttendeeModal = ({onClose, attendeeId}: ManageAttendeeModalPr
         },
     });
 
-    const [activeTab, setActiveTab] = useState("view");
+    const [isEditing, setIsEditing] = useState(false);
+    const [showOrder, setShowOrder] = useState(false);
 
     useEffect(() => {
         if (attendee) {
@@ -81,7 +95,7 @@ export const ManageAttendeeModal = ({onClose, attendeeId}: ManageAttendeeModalPr
     }, [form.values.product_id]);
 
     if (!attendee || !order || !event) {
-        return <LoadingMask/>;
+        return <SideDrawer opened={true} onClose={onClose} loading/>;
     }
 
     const handleSubmit = (values: EditAttendeeRequest) => {
@@ -94,148 +108,169 @@ export const ManageAttendeeModal = ({onClose, attendeeId}: ManageAttendeeModalPr
             {
                 onSuccess: () => {
                     showSuccess(t`Successfully updated attendee`);
-                    setActiveTab("view");
+                    setIsEditing(false);
                 },
                 onError: (error) => errorHandler(form, error),
             }
         );
     };
 
+    const handleCancelEdit = () => {
+        form.reset();
+        setIsEditing(false);
+    };
+
     const fullName = `${attendee.first_name} ${attendee.last_name}`;
-    const hasQuestions = attendee.question_answers && attendee.question_answers.length > 0;
-
-    const detailsTab = (
-        <div>
-            <InputGroup>
-                <TextInput {...form.getInputProps("first_name")} label={t`First name`} placeholder={t`Homer`} required/>
-                <TextInput {...form.getInputProps("last_name")} label={t`Last name`} placeholder={t`Simpson`} required/>
-            </InputGroup>
-            <InputGroup>
-                <TextInput {...form.getInputProps("email")} label={t`Email address`} placeholder="homer@simpson.com"
-                           required/>
-                {event?.product_categories && event.product_categories.length > 0 && (
-                    <ProductSelector
-                        placeholder={t`Select Product`}
-                        label={t`Product`}
-                        productCategories={event.product_categories as ProductCategory[]}
-                        form={form}
-                        productFieldName={"product_id"}
-                        includedProductTypes={[ProductType.Ticket]}
-                        multiSelect={false}
-                        showTierSelector={true}
-                    />
-                )}
-            </InputGroup>
-            <Textarea
-                label={<InputLabelWithHelp label={t`Notes`}
-                                           helpText={t`Add any notes about the attendee. These will not be visible to the attendee.`}/>}
-                {...form.getInputProps("notes")}
-                placeholder={t`Add any notes about the attendee...`}
-                minRows={3}
-                maxRows={6}
-                autosize
-            />
-        </div>
-    );
+    const questionAnswers = attendee.question_answers ?? [];
+    const checkIns = attendee.check_ins ?? [];
 
-    const viewContent = (
-        <Accordion
-            items={[
-                {
-                    value: "details",
-                    icon: IconUser,
-                    title: t`Attendee Details`,
-                    content: <AttendeeDetails attendee={attendee}/>,
-                },
-                {
-                    value: "notes",
-                    icon: IconNotebook,
-                    title: t`Attendee Notes`,
-                    hidden: !attendee.notes,
-                    content: (
-                        <Box p="md">
-                            <Text style={{whiteSpace: 'pre-line'}}>
-                                {attendee.notes}
-                            </Text>
-                        </Box>
-                    ),
-                },
-                {
-                    value: "order",
-                    icon: IconReceipt,
-                    title: t`Order Details`,
-                    content: <OrderDetails order={order} event={event} cardVariant="noStyle"/>,
-                },
-                {
-                    value: "ticket",
-                    icon: IconTicket,
-                    title: t`Attendee Ticket`,
-                    content: attendee.product ? (
-                        <AttendeeTicket event={event} attendee={attendee} product={attendee.product}/>
-                    ) : (
-                        <Text c="dimmed" ta="center" py="xl">
-                            {t`No product associated with this attendee.`}
-                        </Text>
-                    ),
-                },
-                {
-                    value: "questions",
-                    icon: IconQuestionMark,
-                    title: t`Questions & Answers`,
-                    count: hasQuestions ? attendee?.question_answers?.length : undefined,
-                    content: hasQuestions ? (
-                        <QuestionList
-                            onEditAnswer={refetchAttendee}
-                            questions={attendee.question_answers as QuestionAnswer[]}
-                        />
-                    ) : (
-                        <Text c="dimmed" ta="center" py="xl">
-                            {t`No questions answered by this attendee.`}
-                        </Text>
-                    ),
-                },
-            ].filter(item => !item.hidden)}
-            defaultValue="details"
+    const stats: DrawerStat[] = [
+        {
+            label: t`Ticket`,
+            value: getAttendeeProductTitle(attendee, attendee.product as Product),
+        },
+        {
+            label: t`Status`,
+            value: <AttendeeStatusBadge attendee={attendee}/>,
+        },
+        {
+            label: t`Check-In`,
+            value: checkIns.length > 0 ? relativeDate(checkIns[0].created_at) : t`Not checked in`,
+        },
+        {
+            label: t`Order`,
+            value: (
+                <Anchor className={classes.reference} onClick={() => setShowOrder(true)}>
+                    {order.public_id}
+                </Anchor>
+            ),
+        },
+    ];
+
+    const fields: DrawerStat[] = [
+        {
+            label: t`Email`,
+            value: <Anchor href={'mailto:' + attendee.email} target="_blank">{attendee.email}</Anchor>,
+        },
+        {
+            label: t`Language`,
+            value: getLocaleName(attendee.locale as SupportedLocales),
+        },
+        ...(checkIns.length > 0 ? [{
+            label: t`Check-Ins`,
+            value: checkIns.map(checkIn => (
+                <div key={checkIn.id}>
+                    {checkIn.check_in_list?.name} · {relativeDate(checkIn.created_at)}
+                </div>
+            )),
+        }] : []),
+    ];
+
+    const header = (
+        <SideDrawerHeading
+            media={(
+                <Avatar size={42} radius="xl" variant="light" color="primary">
+                    {getInitials(fullName)}
+                </Avatar>
+            )}
+            title={<span>{fullName}</span>}
+            subtitle={<span>{attendee.email}</span>}
         />
     );
 
+    const footer = isEditing && (
+        <>
+            <Button variant="default" onClick={handleCancelEdit}>
+                {t`Cancel`}
+            </Button>
+            <Button type="submit" form={FORM_ID} loading={mutation.isPending}>
+                {t`Save Changes`}
+            </Button>
+        </>
+    );
+
     return (
-        <SideDrawer opened onClose={onClose} size="lg" padding="md">
-            <Stack className={classes.container}>
-                <div className={classes.header}>
-                    <Group justify="center" align="center">
-                        <Group gap="sm" align="center">
-                            <Avatar size="md" radius="xl">
-                                {getInitials(fullName)}
-                            </Avatar>
-                            <div className={classes.attendeeInfo}>
-                                <Text fz="md" fw={500}>{fullName}</Text>
-                                <AttendeeStatusBadge attendee={attendee}/>
-                            </div>
-                        </Group>
-                    </Group>
-                </div>
-                <Tabs value={activeTab} onChange={setActiveTab as any}>
-                    <Tabs.List>
-                        <Tabs.Tab value="view" leftSection={<IconUser size={16}/>}>{t`View`}</Tabs.Tab>
-                        <Tabs.Tab value="edit" leftSection={<IconEdit size={16}/>}>{t`Edit`}</Tabs.Tab>
-                    </Tabs.List>
-
-                    <Box mt="md">
-                        <Tabs.Panel value="view">{viewContent}</Tabs.Panel>
-                        <Tabs.Panel value="edit">
-                            <form onSubmit={form.onSubmit(handleSubmit)}>
-                                <Stack gap="md">
-                                    {detailsTab}
-                                    <Button type="submit" fullWidth disabled={mutation.isPending}>
-                                        {mutation.isPending ? t`Working...` : t`Save Changes`}
-                                    </Button>
-                                </Stack>
-                            </form>
-                        </Tabs.Panel>
-                    </Box>
-                </Tabs>
-            </Stack>
+        <SideDrawer
+            opened={true}
+            onClose={onClose}
+            header={header}
+            footer={footer}
+        >
+            {isEditing ? (
+                <form id={FORM_ID} onSubmit={form.onSubmit(handleSubmit)} className={classes.form}>
+                    <InputGroup>
+                        <TextInput {...form.getInputProps("first_name")} label={t`First name`}
+                                   placeholder={t`Homer`} required/>
+                        <TextInput {...form.getInputProps("last_name")} label={t`Last name`}
+                                   placeholder={t`Simpson`} required/>
+                    </InputGroup>
+                    <InputGroup>
+                        <TextInput {...form.getInputProps("email")} label={t`Email address`}
+                                   placeholder="homer@simpson.com" required/>
+                        {event?.product_categories && event.product_categories.length > 0 && (
+                            <ProductSelector
+                                placeholder={t`Select Product`}
+                                label={t`Product`}
+                                productCategories={event.product_categories as ProductCategory[]}
+                                form={form}
+                                productFieldName={"product_id"}
+                                includedProductTypes={[ProductType.Ticket]}
+                                multiSelect={false}
+                                showTierSelector={true}
+                            />
+                        )}
+                    </InputGroup>
+                    <Textarea
+                        label={<InputLabelWithHelp
+                            label={t`Notes`}
+                            helpText={t`Add any notes about the attendee. These will not be visible to the attendee.`}/>}
+                        {...form.getInputProps("notes")}
+                        placeholder={t`Add any notes about the attendee...`}
+                        minRows={3}
+                        maxRows={6}
+                        autosize
+                    />
+                </form>
+            ) : (
+                <>
+                    <SideDrawerStats stats={stats}/>
+
+                    <div className={classes.actions}>
+                        <EntityActionBar actions={getAttendeeActions(attendee)}/>
+                    </div>
+
+                    <SideDrawerSection title={t`Details`}>
+                        <SideDrawerFields fields={fields}/>
+                    </SideDrawerSection>
+
+                    {attendee.notes && (
+                        <SideDrawerSection title={t`Notes`}>
+                            <Text size="sm" className={classes.notes}>{attendee.notes}</Text>
+                        </SideDrawerSection>
+                    )}
+
+                    {attendee.product && (
+                        <SideDrawerSection title={t`Ticket`}>
+                            <AttendeeTicket event={event} attendee={attendee} product={attendee.product}/>
+                        </SideDrawerSection>
+                    )}
+
+                    {questionAnswers.length > 0 && (
+                        <SideDrawerSection title={t`Questions & Answers`} count={questionAnswers.length}>
+                            <QuestionList
+                                onEditAnswer={refetchAttendee}
+                                questions={questionAnswers as QuestionAnswer[]}
+                            />
+                        </SideDrawerSection>
+                    )}
+                </>
+            )}
+
+            {attendeeActionModals}
+
+            {showOrder && (
+                <ManageOrderModal orderId={attendee.order_id} onClose={() => setShowOrder(false)}/>
+            )}
         </SideDrawer>
     );
 };
diff --git a/frontend/src/components/modals/ManageOccurrenceModal/ManageOccurrenceModal.module.scss b/frontend/src/components/modals/ManageOccurrenceModal/ManageOccurrenceModal.module.scss
index e45e1c89e7..b20d47a219 100644
--- a/frontend/src/components/modals/ManageOccurrenceModal/ManageOccurrenceModal.module.scss
+++ b/frontend/src/components/modals/ManageOccurrenceModal/ManageOccurrenceModal.module.scss
@@ -1,5 +1,5 @@
 .container {
-  padding: 0.5rem;
+  padding-top: var(--mantine-spacing-md);
 }
 
 .header {
@@ -7,7 +7,6 @@
   align-items: flex-start;
   justify-content: space-between;
   margin-bottom: 1rem;
-  padding: 0 0.5rem;
 }
 
 .occurrenceInfo {
diff --git a/frontend/src/components/modals/ManageOccurrenceModal/index.tsx b/frontend/src/components/modals/ManageOccurrenceModal/index.tsx
index f07a7b15d3..2f64fb0036 100644
--- a/frontend/src/components/modals/ManageOccurrenceModal/index.tsx
+++ b/frontend/src/components/modals/ManageOccurrenceModal/index.tsx
@@ -95,7 +95,7 @@ export const ManageOccurrenceModal = ({onClose, occurrenceId}: GenericModalProps
 
     if (!occurrence || !event) {
         return (
-            <SideDrawer opened={true} onClose={onClose} size="lg" padding="md">
+            <SideDrawer opened={true} onClose={onClose}>
                 <Stack p="md" gap="md">
                     <Skeleton height={24} width="70%"/>
                     <Skeleton height={14} width="40%"/>
@@ -127,7 +127,7 @@ export const ManageOccurrenceModal = ({onClose, occurrenceId}: GenericModalProps
         : 0;
 
     return (
-        <SideDrawer opened={true} onClose={onClose} size="lg" padding="md">
+        <SideDrawer opened={true} onClose={onClose}>
             <Stack className={classes.container}>
                 <div className={classes.header}>
                     <div className={classes.occurrenceInfo}>
diff --git a/frontend/src/components/modals/ManageOrderModal/ManageOrderModal.module.scss b/frontend/src/components/modals/ManageOrderModal/ManageOrderModal.module.scss
index e3f7383424..8d0b8450a5 100644
--- a/frontend/src/components/modals/ManageOrderModal/ManageOrderModal.module.scss
+++ b/frontend/src/components/modals/ManageOrderModal/ManageOrderModal.module.scss
@@ -1,18 +1,29 @@
 @use "../../../styles/mixins";
 
-.container {
-  padding: 0.5rem;
+.reference {
+    font-family: var(--mantine-font-family-monospace);
+    letter-spacing: 0;
 }
 
-.header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  margin-bottom: 1rem;
-  padding: 0 0.5rem;
+.separator {
+    color: var(--mantine-color-gray-4);
 }
 
-.orderInfo {
-  display: flex;
-  flex-direction: column;
+.separator,
+.email {
+    @include mixins.respond-below(sm) {
+        display: none;
+    }
+}
+
+.actions {
+    padding-top: var(--mantine-spacing-md);
+}
+
+.form {
+    padding-top: var(--mantine-spacing-lg);
+}
+
+.notes {
+    white-space: pre-line;
 }
diff --git a/frontend/src/components/modals/ManageOrderModal/index.tsx b/frontend/src/components/modals/ManageOrderModal/index.tsx
index 0dc0573517..53a1212061 100644
--- a/frontend/src/components/modals/ManageOrderModal/index.tsx
+++ b/frontend/src/components/modals/ManageOrderModal/index.tsx
@@ -4,39 +4,54 @@ import {useGetEvent} from "../../../queries/useGetEvent.ts";
 import {useGetOrder} from "../../../queries/useGetOrder.ts";
 import {OrderSummary} from "../../common/OrderSummary";
 import {AttendeeList} from "../../common/AttendeeList";
-import {OrderDetails} from "../../common/OrderDetails";
 import {t} from "@lingui/macro";
 import {QuestionAndAnswerList} from "../../common/QuestionAndAnswerList";
-import {Box, Stack, Tabs, Text, Textarea, TextInput} from "@mantine/core";
-import {IconEdit, IconInfoCircle, IconNotebook, IconQuestionMark, IconReceipt, IconUsers} from "@tabler/icons-react";
+import {ActionIcon, Anchor, Avatar, Button, CopyButton, Text, Textarea, TextInput, Tooltip} from "@mantine/core";
+import {IconCheck, IconCopy} from "@tabler/icons-react";
+import {EntityActionBar} from "../../common/EntityActions";
+import {useOrderActions} from "../../../hooks/useOrderActions.tsx";
 import {OrderStatusBadge} from "../../common/OrderStatusBadge";
-import {Accordion, AccordionItem} from "../../common/Accordion";
 import {useForm} from "@mantine/form";
 import {useEffect, useState} from "react";
 import {useEditOrder} from "../../../mutations/useEditOrder";
 import {useFormErrorResponseHandler} from "../../../hooks/useFormErrorResponseHandler";
 import {showSuccess} from "../../../utilites/notifications";
-import {Button} from "../../common/Button";
 import {InputGroup} from "../../common/InputGroup";
 import {InputLabelWithHelp} from "../../common/InputLabelWithHelp";
+import {getInitials} from "../../../utilites/helpers.ts";
+import {Currency} from "../../common/Currency";
+import {formatDateWithLocale, prettyDate, relativeDate} from "../../../utilites/dates.ts";
+import {formatAddress} from "../../../utilites/addressUtilities.ts";
+import {capitalize} from "../../../utilites/stringHelper.ts";
 import classes from './ManageOrderModal.module.scss';
 import {EditOrderPayload} from "../../../api/order.client.ts";
-import {SideDrawer} from "../../common/SideDrawer";
+import {
+    DrawerStat,
+    SideDrawer,
+    SideDrawerFields,
+    SideDrawerHeading,
+    SideDrawerSection,
+    SideDrawerStats
+} from "../../common/SideDrawer";
 
 interface ManageOrderModalProps {
     orderId: IdParam;
 }
 
+const FORM_ID = 'manage-order-form';
+
 export const ManageOrderModal = ({onClose, orderId}: GenericModalProps & ManageOrderModalProps) => {
     const {eventId} = useParams();
     const {data: order, refetch: refetchOrder} = useGetOrder(eventId, orderId);
     const {data: event, data: {product_categories: productCategories} = {}} = useGetEvent(eventId);
     const products = productCategories?.flatMap(category => category.products);
-    const orderHasQuestions = order?.question_answers && order.question_answers.length > 0;
-    const orderHasAttendees = order?.attendees && order.attendees.length > 0;
-    const [activeTab, setActiveTab] = useState("view");
+    const [isEditing, setIsEditing] = useState(false);
     const errorHandler = useFormErrorResponseHandler();
     const mutation = useEditOrder();
+    const {getOrderActions, orderActionModals} = useOrderActions({
+        eventId,
+        onEdit: () => setIsEditing(true),
+    });
 
     const form = useForm({
         initialValues: {
@@ -59,7 +74,7 @@ export const ManageOrderModal = ({onClose, orderId}: GenericModalProps & ManageO
     }, [order]);
 
     if (!order || !event) {
-        return null;
+        return <SideDrawer opened={true} onClose={onClose} loading/>;
     }
 
     const handleSubmit = (values: EditOrderPayload) => {
@@ -72,151 +87,221 @@ export const ManageOrderModal = ({onClose, orderId}: GenericModalProps & ManageO
             {
                 onSuccess: () => {
                     showSuccess(t`Successfully updated order`);
-                    setActiveTab("view");
+                    setIsEditing(false);
                 },
                 onError: (error) => errorHandler(form, error),
             }
         );
     };
 
-    const accordionItems: AccordionItem[] = [
+    const handleCancelEdit = () => {
+        form.reset();
+        setIsEditing(false);
+    };
+
+    const buyerName = `${order.first_name} ${order.last_name}`;
+    const questionAnswers = order.question_answers ?? [];
+    const attendees = order.attendees ?? [];
+    const occurrences = Array.from(
+        new Map((order.order_items ?? [])
+            .filter(item => item.event_occurrence)
+            .map(item => [item.event_occurrence!.id, item.event_occurrence!])).values()
+    );
+
+    const stats: DrawerStat[] = [
         {
-            value: 'details',
-            icon: IconInfoCircle,
-            title: t`Order Details`,
-            content: <OrderDetails order={order} event={event} cardVariant="noStyle" style={{padding: 0}}/>
+            label: t`Total`,
+            value: <Currency currency={order.currency} price={order.total_gross}/>,
         },
         {
-            value: "notes",
-            icon: IconNotebook,
-            title: t`Order Notes`,
-            hidden: !order.notes,
-            content: (
-                <Box p="md">
-                    <Text style={{whiteSpace: 'pre-line'}}>
-                        {order.notes}
-                    </Text>
-                </Box>
-            ),
+            label: t`Items`,
+            value: (order.order_items ?? []).reduce((total, item) => total + item.quantity, 0),
         },
         {
-            value: 'summary',
-            icon: IconReceipt,
-            title: t`Order Summary`,
-            content: <OrderSummary event={event} order={order}/>
+            label: t`Status`,
+            value: <OrderStatusBadge order={order} variant="light"/>,
         },
         {
-            value: 'questions',
-            icon: IconQuestionMark,
-            title: t`Questions & Answers`,
-            count: orderHasQuestions ? order.question_answers.length : undefined,
-            content: orderHasQuestions ? (
-                <QuestionAndAnswerList
-                    onEditAnswer={refetchOrder}
-                    questionAnswers={order.question_answers as QuestionAnswer[]}/>
-            ) : (
-                <Text c="dimmed" ta="center" py="xl">
-                    {t`No questions have been asked for this order.`}
-                </Text>
-            )
+            label: t`Placed`,
+            value: (
+                <Tooltip label={prettyDate(order.created_at, event.timezone)} position="bottom" withArrow>
+                    <span>{relativeDate(order.created_at)}</span>
+                </Tooltip>
+            ),
         },
+    ];
+
+    const fields: DrawerStat[] = [
         {
-            value: 'attendees',
-            icon: IconUsers,
-            title: t`Attendees`,
-            count: orderHasAttendees ? order.attendees.length : undefined,
-            content: orderHasAttendees ? (
-                <AttendeeList refetchOrder={refetchOrder} order={order} products={products as Product[]} questionAnswers={order.question_answers}/>
-            ) : (
-                <Text c="dimmed" ta="center" py="xl">
-                    {t`No attendees have been added to this order.`}
-                </Text>
-            )
-        }
+            label: t`Email`,
+            value: <Anchor href={'mailto:' + order.email} target="_blank">{order.email}</Anchor>,
+        },
+        ...(occurrences.length > 0 ? [{
+            label: occurrences.length === 1 ? t`Occurrence` : t`Occurrences`,
+            value: occurrences.map(occurrence => (
+                <div key={occurrence.id}>
+                    {formatDateWithLocale(occurrence.start_date, 'shortDate', event.timezone)}
+                    {' '}
+                    {formatDateWithLocale(occurrence.start_date, 'timeOnly', event.timezone)}
+                    {occurrence.label && ` · ${occurrence.label}`}
+                </div>
+            )),
+        }] : []),
+        ...(order.payment_provider ? [{
+            label: t`Payment provider`,
+            value: capitalize(order.payment_provider),
+        }] : []),
+        ...(order.promo_code ? [{
+            label: t`Promo code`,
+            value: order.promo_code,
+        }] : []),
+        ...(order.total_refunded > 0 ? [{
+            label: t`Total refunded`,
+            value: <Currency currency={order.currency} price={order.total_refunded}/>,
+        }] : []),
+        ...(order.address ? [{
+            label: t`Address`,
+            value: formatAddress(order.address),
+        }] : []),
     ];
 
-    const editContent = (
-        <form onSubmit={form.onSubmit(handleSubmit)}>
-            <Stack gap="xs">
-                <InputGroup>
-                    <TextInput
-                        {...form.getInputProps("first_name")}
-                        label={t`First name`}
-                        placeholder={t`Homer`}
-                        required
-                    />
-                    <TextInput
-                        {...form.getInputProps("last_name")}
-                        label={t`Last name`}
-                        placeholder={t`Simpson`}
-                        required
-                    />
-                </InputGroup>
-                <TextInput
-                    {...form.getInputProps("email")}
-                    label={t`Email address`}
-                    placeholder="homer@simpson.com"
-                    required
-                />
-                <Textarea
-                    label={
-                        <InputLabelWithHelp
-                            label={t`Notes`}
-                            helpText={t`Add any notes about the order. These will not be visible to the customer.`}
-                        />
-                    }
-                    {...form.getInputProps("notes")}
-                    placeholder={t`Add any notes about the order...`}
-                    minRows={3}
-                    maxRows={6}
-                    autosize
-                />
-                <Button type="submit" fullWidth disabled={mutation.isPending}>
-                    {mutation.isPending ? t`Working...` : t`Save Changes`}
-                </Button>
-            </Stack>
-        </form>
+    const header = (
+        <SideDrawerHeading
+            media={(
+                <Avatar size={42} radius="xl" variant="light" color="primary">
+                    {getInitials(buyerName)}
+                </Avatar>
+            )}
+            title={(
+                <>
+                    <span className={classes.reference}>{order.public_id}</span>
+                    <CopyButton value={String(order.public_id)}>
+                        {({copied, copy}) => (
+                            <Tooltip label={copied ? t`Copied` : t`Copy`} position="bottom" withArrow>
+                                <ActionIcon
+                                    variant="subtle"
+                                    color="gray"
+                                    size="sm"
+                                    radius="xl"
+                                    aria-label={t`Copy`}
+                                    onClick={copy}
+                                >
+                                    {copied ? <IconCheck size={14}/> : <IconCopy size={14}/>}
+                                </ActionIcon>
+                            </Tooltip>
+                        )}
+                    </CopyButton>
+                </>
+            )}
+            subtitle={(
+                <>
+                    <span>{buyerName}</span>
+                    <span className={classes.separator}>·</span>
+                    <span className={classes.email}>{order.email}</span>
+                </>
+            )}
+        />
+    );
+
+    const footer = isEditing && (
+        <>
+            <Button variant="default" onClick={handleCancelEdit}>
+                {t`Cancel`}
+            </Button>
+            <Button type="submit" form={FORM_ID} loading={mutation.isPending}>
+                {t`Save Changes`}
+            </Button>
+        </>
     );
 
     return (
         <SideDrawer
             opened={true}
             onClose={onClose}
-            size="lg"
-            padding="md"
+            header={header}
+            footer={footer}
         >
-            <Stack className={classes.container}>
-                <div className={classes.header}>
-                    <div className={classes.orderInfo}>
-                        <Text fz="sm" c="dimmed" mb={4}>Order Reference</Text>
-                        <Text fz="xl" fw={600}>{order.public_id}</Text>
+            {isEditing ? (
+                <form id={FORM_ID} onSubmit={form.onSubmit(handleSubmit)} className={classes.form}>
+                    <InputGroup>
+                        <TextInput
+                            {...form.getInputProps("first_name")}
+                            label={t`First name`}
+                            placeholder={t`Homer`}
+                            required
+                        />
+                        <TextInput
+                            {...form.getInputProps("last_name")}
+                            label={t`Last name`}
+                            placeholder={t`Simpson`}
+                            required
+                        />
+                    </InputGroup>
+                    <TextInput
+                        {...form.getInputProps("email")}
+                        label={t`Email address`}
+                        placeholder="homer@simpson.com"
+                        required
+                    />
+                    <Textarea
+                        label={
+                            <InputLabelWithHelp
+                                label={t`Notes`}
+                                helpText={t`Add any notes about the order. These will not be visible to the customer.`}
+                            />
+                        }
+                        {...form.getInputProps("notes")}
+                        placeholder={t`Add any notes about the order...`}
+                        minRows={3}
+                        maxRows={6}
+                        autosize
+                    />
+                </form>
+            ) : (
+                <>
+                    <SideDrawerStats stats={stats}/>
+
+                    <div className={classes.actions}>
+                        <EntityActionBar actions={getOrderActions(order)}/>
                     </div>
-                    <OrderStatusBadge order={order} variant="outline"/>
-                </div>
 
-                <Tabs value={activeTab} onChange={setActiveTab as any}>
-                    <Tabs.List>
-                        <Tabs.Tab value="view" leftSection={<IconInfoCircle size={16}/>}>
-                            {t`View`}
-                        </Tabs.Tab>
-                        <Tabs.Tab value="edit" leftSection={<IconEdit size={16}/>}>
-                            {t`Edit`}
-                        </Tabs.Tab>
-                    </Tabs.List>
-
-                    <Box mt="md">
-                        <Tabs.Panel value="view">
-                            <Accordion
-                                items={accordionItems}
-                                defaultValue="details"
+                    <SideDrawerSection title={t`Details`}>
+                        <SideDrawerFields fields={fields}/>
+                    </SideDrawerSection>
+
+                    <SideDrawerSection title={t`Order Summary`} surface>
+                        <OrderSummary event={event} order={order}/>
+                    </SideDrawerSection>
+
+                    {order.notes && (
+                        <SideDrawerSection title={t`Notes`}>
+                            <Text size="sm" className={classes.notes}>{order.notes}</Text>
+                        </SideDrawerSection>
+                    )}
+
+                    {attendees.length > 0 && (
+                        <SideDrawerSection title={t`Attendees`} count={attendees.length}>
+                            <AttendeeList
+                                refetchOrder={refetchOrder}
+                                order={order}
+                                products={products as Product[]}
+                                questionAnswers={questionAnswers}
                             />
-                        </Tabs.Panel>
-                        <Tabs.Panel value="edit">
-                            {editContent}
-                        </Tabs.Panel>
-                    </Box>
-                </Tabs>
-            </Stack>
+                        </SideDrawerSection>
+                    )}
+
+                    {questionAnswers.length > 0 && (
+                        <SideDrawerSection title={t`Questions & Answers`} count={questionAnswers.length}>
+                            <QuestionAndAnswerList
+                                onEditAnswer={refetchOrder}
+                                questionAnswers={questionAnswers as QuestionAnswer[]}
+                            />
+                        </SideDrawerSection>
+                    )}
+                </>
+            )}
+
+            {orderActionModals}
         </SideDrawer>
     );
 };
diff --git a/frontend/src/hooks/useAttendeeActions.tsx b/frontend/src/hooks/useAttendeeActions.tsx
new file mode 100644
index 0000000000..a6bcc76fda
--- /dev/null
+++ b/frontend/src/hooks/useAttendeeActions.tsx
@@ -0,0 +1,126 @@
+import {useState} from "react";
+import {t, Trans} from "@lingui/macro";
+import {useDisclosure} from "@mantine/hooks";
+import {notifications} from "@mantine/notifications";
+import {IconMailForward, IconPencil, IconSend, IconTrash, IconUserCog} from "@tabler/icons-react";
+import {Attendee, IdParam, MessageType} from "../types.ts";
+import {EntityAction} from "../components/common/EntityActions";
+import {SendMessageModal} from "../components/modals/SendMessageModal";
+import {useModifyAttendee} from "../mutations/useModifyAttendee.ts";
+import {useResendAttendeeTicket} from "../mutations/useResendAttendeeTicket.ts";
+import {showError, showSuccess} from "../utilites/notifications.tsx";
+import {confirmationDialog} from "../utilites/confirmationDialog.tsx";
+
+interface UseAttendeeActionsOptions {
+    eventId: IdParam;
+    onManage?: (attendee: Attendee) => void;
+    onEdit?: (attendee: Attendee) => void;
+}
+
+export const useAttendeeActions = ({eventId, onManage, onEdit}: UseAttendeeActionsOptions) => {
+    const [isMessageModalOpen, messageModal] = useDisclosure(false);
+    const [selectedAttendee, setSelectedAttendee] = useState<Attendee>();
+    const modifyMutation = useModifyAttendee();
+    const resendTicketMutation = useResendAttendeeTicket();
+
+    const handleMessage = (attendee: Attendee) => {
+        setSelectedAttendee(attendee);
+        messageModal.open();
+    };
+
+    const handleResendTicket = (attendee: Attendee) => {
+        resendTicketMutation.mutate({
+            attendeeId: attendee.id,
+            eventId: eventId,
+        }, {
+            onSuccess: () => showSuccess(t`Ticket email has been resent to attendee`),
+            onError: (error: any) => showError(error.response.data.message || t`Failed to resend ticket email`)
+        });
+    };
+
+    const handleCancel = (attendee: Attendee) => {
+        const message = attendee.status === 'CANCELLED'
+            ? t`Are you sure you want to activate this attendee?`
+            : t`Are you sure you want to cancel this attendee? This will void their ticket`;
+
+        confirmationDialog(message, () => {
+            modifyMutation.mutate({
+                attendeeId: attendee.id,
+                eventId: eventId,
+                attendeeData: {
+                    status: attendee.status === 'CANCELLED' ? 'ACTIVE' : 'CANCELLED'
+                }
+            }, {
+                onSuccess: () => {
+                    notifications.show({
+                        message: (
+                            <Trans>
+                                Successfully {attendee.status === 'CANCELLED' ? 'activated' : 'cancelled'} attendee
+                            </Trans>
+                        ),
+                        color: 'green',
+                    });
+                },
+                onError: () => showError(t`Failed to cancel attendee`),
+            });
+        });
+    };
+
+    const getAttendeeActions = (attendee: Attendee): EntityAction[] => {
+        const isCancelled = attendee.status === 'CANCELLED';
+
+        const actions: (EntityAction | false)[] = [
+            !!onManage && {
+                key: 'manage',
+                label: t`Manage attendee`,
+                icon: <IconUserCog size={14}/>,
+                onClick: () => onManage(attendee),
+                group: 'primary',
+            },
+            !!onEdit && {
+                key: 'edit',
+                label: t`Edit`,
+                icon: <IconPencil size={14}/>,
+                onClick: () => onEdit(attendee),
+                group: 'primary',
+                dataTestId: 'attendee-edit-button',
+            },
+            {
+                key: 'message',
+                label: t`Message attendee`,
+                icon: <IconSend size={14}/>,
+                onClick: () => handleMessage(attendee),
+                group: 'primary',
+            },
+            attendee.status === 'ACTIVE' && {
+                key: 'resend',
+                label: t`Resend ticket email`,
+                icon: <IconMailForward size={14}/>,
+                onClick: () => handleResendTicket(attendee),
+                group: 'primary',
+            },
+            {
+                key: 'cancel',
+                label: isCancelled ? t`Activate` : t`Cancel` + ` ` + t`ticket`,
+                icon: <IconTrash size={14}/>,
+                onClick: () => handleCancel(attendee),
+                group: 'danger',
+                color: isCancelled ? 'green' : 'red',
+            },
+        ];
+
+        return actions.filter(Boolean) as EntityAction[];
+    };
+
+    const attendeeActionModals = selectedAttendee && isMessageModalOpen && (
+        <SendMessageModal
+            onClose={messageModal.close}
+            orderId={selectedAttendee.order_id}
+            attendeeId={selectedAttendee.id}
+            messageType={MessageType.IndividualAttendees}
+            eventOccurrenceId={selectedAttendee.event_occurrence_id}
+        />
+    );
+
+    return {getAttendeeActions, attendeeActionModals, openMessageModal: handleMessage};
+};
diff --git a/frontend/src/hooks/useOrderActions.tsx b/frontend/src/hooks/useOrderActions.tsx
new file mode 100644
index 0000000000..72f9d4f137
--- /dev/null
+++ b/frontend/src/hooks/useOrderActions.tsx
@@ -0,0 +1,185 @@
+import {useState} from "react";
+import {t} from "@lingui/macro";
+import {useClipboard, useDisclosure} from "@mantine/hooks";
+import {
+    IconBasketCog,
+    IconCopy,
+    IconPencil,
+    IconReceipt2,
+    IconReceiptDollar,
+    IconReceiptRefund,
+    IconRepeat,
+    IconSend,
+    IconTrash
+} from "@tabler/icons-react";
+import {IdParam, Invoice, MessageType, Order} from "../types.ts";
+import {EntityAction} from "../components/common/EntityActions";
+import {CancelOrderModal} from "../components/modals/CancelOrderModal";
+import {RefundOrderModal} from "../components/modals/RefundOrderModal";
+import {SendMessageModal} from "../components/modals/SendMessageModal";
+import {useResendOrderConfirmation} from "../mutations/useResendOrderConfirmation.ts";
+import {useMarkOrderAsPaid} from "../mutations/useMarkOrderAsPaid.ts";
+import {orderClient} from "../api/order.client.ts";
+import {downloadBinary} from "../utilites/download.ts";
+import {withLoadingNotification} from "../utilites/withLoadingNotification.tsx";
+import {showError, showSuccess} from "../utilites/notifications.tsx";
+import {eventCheckoutUrl} from "../utilites/urlHelper.ts";
+
+interface UseOrderActionsOptions {
+    eventId: IdParam;
+    onManage?: (order: Order) => void;
+    onEdit?: (order: Order) => void;
+}
+
+export const useOrderActions = ({eventId, onManage, onEdit}: UseOrderActionsOptions) => {
+    const [isCancelModalOpen, cancelModal] = useDisclosure(false);
+    const [isMessageModalOpen, messageModal] = useDisclosure(false);
+    const [isRefundModalOpen, refundModal] = useDisclosure(false);
+    const [selectedOrderId, setSelectedOrderId] = useState<IdParam>();
+    const resendConfirmationMutation = useResendOrderConfirmation();
+    const markAsPaidMutation = useMarkOrderAsPaid();
+    const clipboard = useClipboard({timeout: 2000});
+
+    const openModal = (order: Order, modal: { open: () => void }) => {
+        setSelectedOrderId(order.id);
+        modal.open();
+    };
+
+    const handleMarkAsPaid = (order: Order) => {
+        markAsPaidMutation.mutate({eventId, orderId: order.id}, {
+            onSuccess: () => showSuccess(t`Order marked as paid`),
+            onError: () => showError(t`There was an error marking the order as paid`)
+        });
+    };
+
+    const handleResendConfirmation = (order: Order) => {
+        resendConfirmationMutation.mutate({eventId, orderId: order.id}, {
+            onSuccess: () => showSuccess(t`Your message has been sent`),
+            onError: () => showError(t`There was an error sending your message`)
+        });
+    };
+
+    const handleCopyCustomerLink = (order: Order) => {
+        clipboard.copy(eventCheckoutUrl(order.event_id, order.short_id, 'summary'));
+        showSuccess(t`Customer link copied to clipboard`);
+    };
+
+    const handleInvoiceDownload = async (invoice: Invoice) => {
+        await withLoadingNotification(
+            async () => {
+                const blob = await orderClient.downloadInvoice(eventId, invoice.order_id);
+                downloadBinary(blob, invoice.invoice_number + '.pdf');
+            },
+            {
+                loading: {
+                    title: t`Downloading Invoice`,
+                    message: t`Please wait while we prepare your invoice...`
+                },
+                success: {
+                    title: t`Success`,
+                    message: t`Invoice downloaded successfully`
+                },
+                error: {
+                    title: t`Error`,
+                    message: t`Failed to download invoice. Please try again.`
+                }
+            }
+        );
+    };
+
+    const getOrderActions = (order: Order): EntityAction[] => {
+        const isRefundable = !order.is_free_order
+            && order.status !== 'AWAITING_OFFLINE_PAYMENT'
+            && order.payment_provider === 'STRIPE'
+            && order.refund_status !== 'REFUNDED';
+
+        const actions: (EntityAction | false)[] = [
+            !!onManage && {
+                key: 'manage',
+                label: t`Manage order`,
+                icon: <IconBasketCog size={14}/>,
+                onClick: () => onManage(order),
+                group: 'primary',
+            },
+            !!onEdit && {
+                key: 'edit',
+                label: t`Edit`,
+                icon: <IconPencil size={14}/>,
+                onClick: () => onEdit(order),
+                group: 'primary',
+                dataTestId: 'order-edit-button',
+            },
+            {
+                key: 'message',
+                label: t`Message buyer`,
+                icon: <IconSend size={14}/>,
+                onClick: () => openModal(order, messageModal),
+                group: 'primary',
+            },
+            order.status === 'COMPLETED' && {
+                key: 'resend',
+                label: t`Resend order email`,
+                icon: <IconRepeat size={14}/>,
+                onClick: () => handleResendConfirmation(order),
+                group: 'primary',
+            },
+            order.status === 'AWAITING_OFFLINE_PAYMENT' && {
+                key: 'mark-as-paid',
+                label: t`Mark as paid`,
+                icon: <IconReceiptDollar size={14}/>,
+                onClick: () => handleMarkAsPaid(order),
+                group: 'primary',
+            },
+            isRefundable && {
+                key: 'refund',
+                label: t`Refund order`,
+                icon: <IconReceiptRefund size={14}/>,
+                onClick: () => openModal(order, refundModal),
+                group: 'secondary',
+            },
+            {
+                key: 'copy-link',
+                label: t`Copy customer link`,
+                icon: <IconCopy size={14}/>,
+                onClick: () => handleCopyCustomerLink(order),
+                group: 'secondary',
+            },
+            !!order.latest_invoice && {
+                key: 'invoice',
+                label: t`Download invoice`,
+                icon: <IconReceipt2 size={14}/>,
+                onClick: () => handleInvoiceDownload(order.latest_invoice as Invoice),
+                group: 'secondary',
+            },
+            order.status !== 'CANCELLED' && {
+                key: 'cancel',
+                label: t`Cancel order`,
+                icon: <IconTrash size={14}/>,
+                onClick: () => openModal(order, cancelModal),
+                group: 'danger',
+                color: 'red',
+            },
+        ];
+
+        return actions.filter(Boolean) as EntityAction[];
+    };
+
+    const orderActionModals = selectedOrderId && (
+        <>
+            {isRefundModalOpen && <RefundOrderModal onClose={refundModal.close} orderId={selectedOrderId}/>}
+            {isCancelModalOpen && <CancelOrderModal onClose={cancelModal.close} orderId={selectedOrderId}/>}
+            {isMessageModalOpen && <SendMessageModal
+                onClose={messageModal.close}
+                orderId={selectedOrderId}
+                messageType={MessageType.OrderOwner}
+            />}
+        </>
+    );
+
+    return {
+        getOrderActions,
+        orderActionModals,
+        openMessageModal: (order: Order) => openModal(order, messageModal),
+        downloadInvoice: handleInvoiceDownload,
+    };
+};