diff --git a/lib/core/widgets/components/barista_perks_section.dart b/lib/core/widgets/components/barista_perks_section.dart
index 962c129df..efa781935 100644
--- a/lib/core/widgets/components/barista_perks_section.dart
+++ b/lib/core/widgets/components/barista_perks_section.dart
@@ -1,35 +1,25 @@
-import 'package:coffeecard/core/extensions/string_extensions.dart';
 import 'package:coffeecard/core/strings.dart';
 import 'package:coffeecard/core/widgets/components/helpers/grid.dart';
 import 'package:coffeecard/core/widgets/components/section_title.dart';
 import 'package:coffeecard/core/widgets/components/user_role_indicator.dart';
-import 'package:coffeecard/features/product/purchasable_products.dart';
+import 'package:coffeecard/features/product/product_model.dart';
 import 'package:coffeecard/features/ticket/presentation/widgets/perk_card.dart';
-import 'package:coffeecard/features/user/domain/entities/role.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:gap/gap.dart';
-import 'package:provider/provider.dart';
 
-class BaristaPerksSection extends StatefulWidget {
-  const BaristaPerksSection({required this.userRole});
+class BaristaPerksSection extends StatelessWidget {
+  const BaristaPerksSection(this.userRole, this.perks);
 
-  final Role userRole;
+  final String userRole;
+  final Iterable<Product> perks;
 
-  @override
-  State<BaristaPerksSection> createState() => _BaristaPerksSectionState();
-}
-
-class _BaristaPerksSectionState extends State<BaristaPerksSection> {
   @override
   Widget build(BuildContext context) {
-    final perks = context.watch<PurchasableProducts>().perks;
-    final roleName = widget.userRole.name.capitalize();
     return Column(
       children: [
         SectionTitle.withSideWidget(
-          Strings.perksTitle(roleName),
-          sideWidget: UserRoleIndicator(widget.userRole),
+          Strings.perksTitle(userRole),
+          sideWidget: UserRoleIndicator(userRole),
         ),
         Grid(
           gap: GridGap.normal,
diff --git a/lib/core/widgets/components/user_role_indicator.dart b/lib/core/widgets/components/user_role_indicator.dart
index 2e809c418..ef4a02864 100644
--- a/lib/core/widgets/components/user_role_indicator.dart
+++ b/lib/core/widgets/components/user_role_indicator.dart
@@ -1,16 +1,14 @@
-import 'package:coffeecard/core/extensions/string_extensions.dart';
 import 'package:coffeecard/core/strings.dart';
 import 'package:coffeecard/core/styles/app_colors.dart';
 import 'package:coffeecard/core/styles/app_text_styles.dart';
 import 'package:coffeecard/core/widgets/components/dialog.dart';
-import 'package:coffeecard/features/user/domain/entities/role.dart';
 import 'package:flutter/material.dart';
 import 'package:gap/gap.dart';
 
 class UserRoleIndicator extends StatelessWidget {
   const UserRoleIndicator(this.userRole);
 
-  final Role userRole;
+  final String userRole;
 
   @override
   Widget build(BuildContext context) {
@@ -28,10 +26,7 @@ class UserRoleIndicator extends StatelessWidget {
       child: Row(
         mainAxisSize: MainAxisSize.min,
         children: [
-          Text(
-            userRole.name.capitalize(),
-            style: AppTextStyle.baristaButton,
-          ),
+          Text(userRole, style: AppTextStyle.baristaButton),
           const Gap(8),
           const Icon(
             Icons.info_outline,
@@ -46,7 +41,7 @@ class UserRoleIndicator extends StatelessWidget {
   Future<void> showDialog(BuildContext context) {
     return appDialog(
       context: context,
-      title: userRole.name.capitalize(),
+      title: userRole,
       children: [
         Text(Strings.baristaPerksExplainer, style: AppTextStyle.settingKey),
       ],
diff --git a/lib/features/ticket/presentation/pages/tickets_page.dart b/lib/features/ticket/presentation/pages/tickets_page.dart
index 96eb4f460..86537ccd6 100644
--- a/lib/features/ticket/presentation/pages/tickets_page.dart
+++ b/lib/features/ticket/presentation/pages/tickets_page.dart
@@ -1,7 +1,9 @@
+import 'package:coffeecard/core/extensions/string_extensions.dart';
 import 'package:coffeecard/core/strings.dart';
 import 'package:coffeecard/core/widgets/components/barista_perks_section.dart';
 import 'package:coffeecard/core/widgets/components/scaffold.dart';
 import 'package:coffeecard/core/widgets/upgrade_alert.dart';
+import 'package:coffeecard/features/product/product_model.dart';
 import 'package:coffeecard/features/product/purchasable_products.dart';
 import 'package:coffeecard/features/ticket/presentation/widgets/shop_section.dart';
 import 'package:coffeecard/features/ticket/presentation/widgets/tickets_section.dart';
@@ -22,29 +24,56 @@ class TicketsPage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final user = (context.read<UserCubit>().state as UserLoaded).user;
-    final perksAvailable = context.read<PurchasableProducts>().perks.isNotEmpty;
-
     return UpgradeAlert(
-      child: AppScaffold.withTitle(
-        title: Strings.ticketsPageTitle,
-        body: Column(
-          crossAxisAlignment: CrossAxisAlignment.stretch,
-          children: [
-            Expanded(
-              child: ListView(
-                controller: scrollController,
-                shrinkWrap: true,
-                padding: const EdgeInsets.all(16.0),
-                children: [
-                  const TicketSection(),
-                  if (perksAvailable) BaristaPerksSection(userRole: user.role),
-                  const ShopSection(),
-                ],
-              ),
+      child: BlocBuilder<UserCubit, UserState>(
+        buildWhen: (_, current) => current is UserWithData,
+        builder: (context, state) {
+          if (state is! UserWithData) {
+            return const Center(child: CircularProgressIndicator());
+          }
+          return _TicketsContent(
+            scrollController: scrollController,
+            userRole: state.user.role.name.capitalize(),
+            perks: context.watch<PurchasableProducts>().perks,
+          );
+        },
+      ),
+    );
+  }
+}
+
+/// The content of the tickets page, shown when user info is loaded.
+class _TicketsContent extends StatelessWidget {
+  const _TicketsContent({
+    required this.scrollController,
+    required this.userRole,
+    required this.perks,
+  });
+
+  final ScrollController scrollController;
+  final String userRole;
+  final Iterable<Product> perks;
+
+  @override
+  Widget build(BuildContext context) {
+    return AppScaffold.withTitle(
+      title: Strings.ticketsPageTitle,
+      body: Column(
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        children: [
+          Expanded(
+            child: ListView(
+              controller: scrollController,
+              shrinkWrap: true,
+              padding: const EdgeInsets.all(16.0),
+              children: [
+                const TicketSection(),
+                if (perks.isNotEmpty) BaristaPerksSection(userRole, perks),
+                const ShopSection(),
+              ],
             ),
-          ],
-        ),
+          ),
+        ],
       ),
     );
   }