diff --git a/apps/mobile/packages/features/client/hubs/lib/src/presentation/pages/client_hubs_page.dart b/apps/mobile/packages/features/client/hubs/lib/src/presentation/pages/client_hubs_page.dart
index 586b0a74..04ea1cca 100644
--- a/apps/mobile/packages/features/client/hubs/lib/src/presentation/pages/client_hubs_page.dart
+++ b/apps/mobile/packages/features/client/hubs/lib/src/presentation/pages/client_hubs_page.dart
@@ -2,7 +2,6 @@ import 'package:design_system/design_system.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_modular/flutter_modular.dart';
-import 'package:lucide_icons/lucide_icons.dart';
 import 'package:core_localization/core_localization.dart';
 import '../blocs/client_hubs_bloc.dart';
 import '../blocs/client_hubs_event.dart';
@@ -47,14 +46,16 @@ class ClientHubsPage extends StatelessWidget {
         },
         builder: (context, state) {
           return Scaffold(
-            backgroundColor: const Color(0xFFF8FAFC), // slate-50
             body: Stack(
               children: [
                 CustomScrollView(
                   slivers: [
                     _buildAppBar(context),
                     SliverPadding(
-                      padding: const EdgeInsets.fromLTRB(20, 20, 20, 100),
+                      padding: const EdgeInsets.symmetric(
+                        horizontal: UiConstants.space5,
+                        vertical: UiConstants.space5,
+                      ).copyWith(bottom: 100),
                       sliver: SliverList(
                         delegate: SliverChildListDelegate([
                           if (state.status == ClientHubsStatus.loading)
@@ -85,7 +86,7 @@ class ClientHubsPage extends StatelessWidget {
                               ),
                             ),
                           ],
-                          const SizedBox(height: 20),
+                          const SizedBox(height: UiConstants.space5),
                           const HubInfoCard(),
                         ]),
                       ),
@@ -120,7 +121,7 @@ class ClientHubsPage extends StatelessWidget {
                   ),
                 if (state.status == ClientHubsStatus.actionInProgress)
                   Container(
-                    color: Colors.black.withValues(alpha: 0.1),
+                    color: UiColors.black.withValues(alpha: 0.1),
                     child: const Center(child: CircularProgressIndicator()),
                   ),
               ],
@@ -133,20 +134,19 @@ class ClientHubsPage extends StatelessWidget {
 
   Widget _buildAppBar(BuildContext context) {
     return SliverAppBar(
-      backgroundColor: const Color(0xFF121826),
+      backgroundColor: UiColors.foreground, // Dark Slate equivalent
       automaticallyImplyLeading: false,
       expandedHeight: 140,
       pinned: true,
       flexibleSpace: FlexibleSpaceBar(
         background: Container(
-          decoration: const BoxDecoration(
-            gradient: LinearGradient(
-              colors: [Color(0xFF121826), Color(0xFF1E293B)],
-              begin: Alignment.topLeft,
-              end: Alignment.bottomRight,
-            ),
+          color: UiColors.foreground,
+          padding: const EdgeInsets.fromLTRB(
+            UiConstants.space5,
+            UiConstants.space12,
+            UiConstants.space5,
+            0,
           ),
-          padding: const EdgeInsets.fromLTRB(20, 48, 20, 0),
           child: Column(
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
@@ -156,17 +156,17 @@ class ClientHubsPage extends StatelessWidget {
                   width: 40,
                   height: 40,
                   decoration: BoxDecoration(
-                    color: Colors.white.withValues(alpha: 0.2),
+                    color: UiColors.white.withValues(alpha: 0.2),
                     shape: BoxShape.circle,
                   ),
                   child: const Icon(
-                    LucideIcons.arrowLeft,
-                    color: Colors.white,
+                    UiIcons.arrowLeft,
+                    color: UiColors.white,
                     size: 20,
                   ),
                 ),
               ),
-              const SizedBox(height: 16),
+              const SizedBox(height: UiConstants.space4),
               Row(
                 mainAxisAlignment: MainAxisAlignment.spaceBetween,
                 children: <Widget>[
@@ -175,17 +175,12 @@ class ClientHubsPage extends StatelessWidget {
                     children: <Widget>[
                       Text(
                         t.client_hubs.title,
-                        style: const TextStyle(
-                          color: Colors.white,
-                          fontWeight: FontWeight.bold,
-                          fontSize: 24,
-                        ),
+                        style: UiTypography.headline1m.white,
                       ),
                       Text(
                         t.client_hubs.subtitle,
-                        style: const TextStyle(
-                          color: Color(0xFFCBD5E1), // slate-300
-                          fontSize: 14,
+                        style: UiTypography.body2r.copyWith(
+                          color: UiColors.switchInactive,
                         ),
                       ),
                     ],
@@ -195,10 +190,10 @@ class ClientHubsPage extends StatelessWidget {
                       context,
                     ).add(const ClientHubsAddDialogToggled(visible: true)),
                     text: t.client_hubs.add_hub,
-                    leadingIcon: LucideIcons.plus,
+                    leadingIcon: UiIcons.add,
                     style: ElevatedButton.styleFrom(
-                      minimumSize: Size(0, 40),
-                      maximumSize: Size.fromHeight(40),
+                      minimumSize: const Size(0, 40),
+                      maximumSize: const Size.fromHeight(40),
                     ),
                   ),
                 ],