diff --git a/TransactionProcessor.Mobile.BusinessLogic/UIServices/INavigationService.cs b/TransactionProcessor.Mobile.BusinessLogic/UIServices/INavigationService.cs
index d07ae4c08..acfe12075 100644
--- a/TransactionProcessor.Mobile.BusinessLogic/UIServices/INavigationService.cs
+++ b/TransactionProcessor.Mobile.BusinessLogic/UIServices/INavigationService.cs
@@ -62,6 +62,8 @@ Task GoToBillPaymentPayBillPage(ProductDetails productDetails,
     Task GoToMyAccountContacts();
     Task GoToMyAccountDetails();
 
+    Task GoToTransactionsPage();
+
     Task GoToReportsSalesAnalysis();
     Task GoToReportsBalanceAnalysis();
 
diff --git a/TransactionProcessor.Mobile.BusinessLogic/ViewModels/HomePageViewModel.cs b/TransactionProcessor.Mobile.BusinessLogic/ViewModels/HomePageViewModel.cs
index 9cc4b25c3..53f122250 100644
--- a/TransactionProcessor.Mobile.BusinessLogic/ViewModels/HomePageViewModel.cs
+++ b/TransactionProcessor.Mobile.BusinessLogic/ViewModels/HomePageViewModel.cs
@@ -1,18 +1,96 @@
-using System.Diagnostics.CodeAnalysis;
+using System.Diagnostics.CodeAnalysis;
+using CommunityToolkit.Mvvm.Input;
+using TransactionProcessor.Mobile.BusinessLogic.Common;
+using TransactionProcessor.Mobile.BusinessLogic.Models;
 using TransactionProcessor.Mobile.BusinessLogic.Services;
 using TransactionProcessor.Mobile.BusinessLogic.UIServices;
 
 namespace TransactionProcessor.Mobile.BusinessLogic.ViewModels;
 
-[ExcludeFromCodeCoverage]
-public class HomePageViewModel : ExtendedBaseViewModel
+public partial class HomePageViewModel : ExtendedBaseViewModel
 {
+    #region Fields
+
+    private String merchantName;
+    private String availableBalance;
+
+    #endregion
+
+    #region Constructors
+
     public HomePageViewModel(IApplicationCache applicationCache,
                              IDialogService dialogService,
                              IDeviceService deviceService,
                              INavigationService navigationService,
-                             INavigationParameterService navigationParameterService) :base(applicationCache,dialogService, navigationService, deviceService,navigationParameterService)
+                             INavigationParameterService navigationParameterService)
+        : base(applicationCache, dialogService, navigationService, deviceService, navigationParameterService)
+    {
+        this.Title = "Home";
+    }
+
+    #endregion
+
+    #region Properties
+
+    public String MerchantName
+    {
+        get => this.merchantName;
+        set => this.SetProperty(ref this.merchantName, value);
+    }
+
+    public String AvailableBalance
     {
-        
+        get => this.availableBalance;
+        set => this.SetProperty(ref this.availableBalance, value);
     }
-}
\ No newline at end of file
+
+    #endregion
+
+    #region Methods
+
+    public override async Task Initialise(CancellationToken cancellationToken)
+    {
+        await base.Initialise(cancellationToken);
+
+        MerchantDetailsModel merchantDetails = this.ApplicationCache.GetMerchantDetails();
+        if (merchantDetails != null)
+        {
+            this.MerchantName = merchantDetails.MerchantName;
+            this.AvailableBalance = merchantDetails.AvailableBalance.ToString("C2");
+        }
+        else
+        {
+            this.MerchantName = String.Empty;
+            this.AvailableBalance = "-";
+        }
+    }
+
+    [RelayCommand]
+    public async Task MobileTopup()
+    {
+        CorrelationIdProvider.NewId();
+        await this.NavigationService.GoToMobileTopupSelectOperatorPage();
+    }
+
+    [RelayCommand]
+    public async Task BillPayment()
+    {
+        CorrelationIdProvider.NewId();
+        await this.NavigationService.GoToBillPaymentSelectOperatorPage();
+    }
+
+    [RelayCommand]
+    public async Task Voucher()
+    {
+        CorrelationIdProvider.NewId();
+        await this.NavigationService.GoToVoucherSelectOperatorPage();
+    }
+
+    [RelayCommand]
+    public async Task AllTransactions()
+    {
+        await this.NavigationService.GoToTransactionsPage();
+    }
+
+    #endregion
+}
diff --git a/TransactionProcessor.Mobile/Pages/AppHome/HomePage.xaml b/TransactionProcessor.Mobile/Pages/AppHome/HomePage.xaml
index ad32197be..01f907e18 100644
--- a/TransactionProcessor.Mobile/Pages/AppHome/HomePage.xaml
+++ b/TransactionProcessor.Mobile/Pages/AppHome/HomePage.xaml
@@ -4,13 +4,99 @@
                                x:Class="TransactionProcessor.Mobile.Pages.AppHome.HomePage"
                                xmlns:controls="using:TransactionProcessor.Mobile.Controls"
                                xmlns:common="using:TransactionProcessor.Mobile.Pages.Common"
-                               Shell.NavBarIsVisible="False">
-    <VerticalStackLayout x:Name="MainLayout" Style="{DynamicResource Layout}">
-        <controls:TitleLabel Text="Home" AutomationId="Home" FontSize="20" HorizontalTextAlignment="Center"  VerticalOptions="End" FontAttributes="Bold" Padding="20,0,0,20"/>
-        <Image Source="loginimage.jpg" VerticalOptions="Start" Style="{DynamicResource LoginImage}"/>
-        <Label Text="Welcome to .NET MAUI!"
-               VerticalOptions="CenterAndExpand" 
-               HorizontalOptions="CenterAndExpand" />
-        <Button Text="Exit Application" AutomationId="BackButton" Style="{StaticResource StandardButton}" Command="{Binding BackButtonCommand}"/>
-    </VerticalStackLayout>
-</common:NoBackWithoutLogoutPage>
\ No newline at end of file
+                               Shell.NavBarIsVisible="False"
+                               x:Name="HomeView">
+    <ScrollView BackgroundColor="{StaticResource pageBackgroundColor}">
+        <VerticalStackLayout Spacing="0">
+
+            <!-- Header section -->
+            <Frame Style="{StaticResource PageHeaderStyle}">
+                <VerticalStackLayout Spacing="4">
+                    <Label Text="Transaction Processor" Style="{StaticResource HeaderTitleStyle}"
+                           AutomationId="Home"/>
+                    <Label Text="{Binding MerchantName}" Style="{StaticResource HeaderSubtitleStyle}"/>
+                </VerticalStackLayout>
+            </Frame>
+
+            <!-- Dashboard content -->
+            <VerticalStackLayout Padding="16,16,16,16" Spacing="0">
+
+                <!-- Available balance card -->
+                <Frame Style="{StaticResource BalanceCardStyle}">
+                    <VerticalStackLayout Spacing="4">
+                        <Label Text="Available Balance" TextColor="White" FontSize="13" Opacity="0.85"/>
+                        <Label Text="{Binding AvailableBalance}" TextColor="White"
+                               FontSize="32" FontAttributes="Bold"/>
+                    </VerticalStackLayout>
+                </Frame>
+
+                <!-- Quick Actions label -->
+                <Label Text="Quick Actions" FontSize="16" FontAttributes="Bold"
+                       TextColor="{StaticResource labelTextColor}" Margin="4,0,0,8"/>
+
+                <!-- Quick action tiles grid (2 columns) -->
+                <Grid ColumnDefinitions="*,*" RowDefinitions="auto,auto">
+
+                    <!-- Mobile Topup tile -->
+                    <Frame Grid.Row="0" Grid.Column="0" Style="{StaticResource DashboardTileStyle}"
+                           BackgroundColor="{StaticResource mobileTopup}">
+                        <Frame.GestureRecognizers>
+                            <TapGestureRecognizer Command="{Binding MobileTopupCommand}"/>
+                        </Frame.GestureRecognizers>
+                        <VerticalStackLayout VerticalOptions="Center" HorizontalOptions="Center" Spacing="4">
+                            <Label Text="Mobile" Style="{StaticResource TileLabelStyle}" FontAttributes="Bold"/>
+                            <Label Text="Topup" Style="{StaticResource TileLabelStyle}"/>
+                        </VerticalStackLayout>
+                    </Frame>
+
+                    <!-- Bill Payment tile -->
+                    <Frame Grid.Row="0" Grid.Column="1" Style="{StaticResource DashboardTileStyle}"
+                           BackgroundColor="{StaticResource billPayment}">
+                        <Frame.GestureRecognizers>
+                            <TapGestureRecognizer Command="{Binding BillPaymentCommand}"/>
+                        </Frame.GestureRecognizers>
+                        <VerticalStackLayout VerticalOptions="Center" HorizontalOptions="Center" Spacing="4">
+                            <Label Text="Bill" Style="{StaticResource TileLabelStyle}" FontAttributes="Bold"/>
+                            <Label Text="Payment" Style="{StaticResource TileLabelStyle}"/>
+                        </VerticalStackLayout>
+                    </Frame>
+
+                    <!-- Voucher tile -->
+                    <Frame Grid.Row="1" Grid.Column="0" Style="{StaticResource DashboardTileStyle}"
+                           BackgroundColor="{StaticResource voucher}">
+                        <Frame.GestureRecognizers>
+                            <TapGestureRecognizer Command="{Binding VoucherCommand}"/>
+                        </Frame.GestureRecognizers>
+                        <VerticalStackLayout VerticalOptions="Center" HorizontalOptions="Center" Spacing="4">
+                            <Label Text="Voucher" Style="{StaticResource TileLabelStyle}" FontAttributes="Bold"/>
+                            <Label Text="Issue" Style="{StaticResource TileLabelStyle}"/>
+                        </VerticalStackLayout>
+                    </Frame>
+
+                    <!-- All Transactions tile (navigates to Transactions tab) -->
+                    <Frame Grid.Row="1" Grid.Column="1" Style="{StaticResource DashboardTileStyle}"
+                           BackgroundColor="{StaticResource primary}">
+                        <Frame.GestureRecognizers>
+                            <TapGestureRecognizer Command="{Binding AllTransactionsCommand}"/>
+                        </Frame.GestureRecognizers>
+                        <VerticalStackLayout VerticalOptions="Center" HorizontalOptions="Center" Spacing="4">
+                            <Label Text="All" Style="{StaticResource TileLabelStyle}" FontAttributes="Bold"/>
+                            <Label Text="Transactions" Style="{StaticResource TileLabelStyle}"/>
+                        </VerticalStackLayout>
+                    </Frame>
+
+                </Grid>
+
+                <!-- Exit button -->
+                <Frame Style="{StaticResource ActionTileStyle}"
+                       BackgroundColor="{StaticResource MidGray}">
+                    <Frame.GestureRecognizers>
+                        <TapGestureRecognizer Command="{Binding BackButtonCommand}"/>
+                    </Frame.GestureRecognizers>
+                    <Label Text="Exit Application" Style="{StaticResource TileLabelStyle}" FontAttributes="Bold" AutomationId="BackButton"/>
+                </Frame>
+
+            </VerticalStackLayout>
+        </VerticalStackLayout>
+    </ScrollView>
+</common:NoBackWithoutLogoutPage>
diff --git a/TransactionProcessor.Mobile/Pages/LoginPage.xaml b/TransactionProcessor.Mobile/Pages/LoginPage.xaml
index 6dec8c24e..11477a3ce 100644
--- a/TransactionProcessor.Mobile/Pages/LoginPage.xaml
+++ b/TransactionProcessor.Mobile/Pages/LoginPage.xaml
@@ -7,54 +7,81 @@
              Shell.NavBarIsVisible="False"
              Shell.FlyoutItemIsVisible="True"
              x:Name="Logon">
-    <ContentPage.Content>
-        <ScrollView>
-            <!-- Main structure-->
-            <VerticalStackLayout x:Name="MainLayout" Style="{DynamicResource Layout}">
-                <!--Main image-->
-                <Image Source="loginimage.jpg" VerticalOptions="Start" Style="{DynamicResource LoginImage}"/>
-
-                <!-- Title-->
-                <Label Text="Log In" FontSize="34" HorizontalOptions="Center" FontAttributes="Bold" Padding="20,0,0,20" 
-                   AutomationId="LoginLabel"
-                   x:Name="LoginLabel"/>
-                <Frame Style="{DynamicResource MainFrame}">
-
-                    <VerticalStackLayout x:Name="SubLayout">
-                        <Entry x:Name="UserNameEntry"
-                               Placeholder="User name or email address"
-                               AutomationId="UserNameEntry"
-                               Style="{DynamicResource UserNameEntryStyle}"
-                               Text="{Binding UserName}">
-                        </Entry>
-
-                        <Entry x:Name="PasswordEntry"
-                           Placeholder="******"
-                           AutomationId="PasswordEntry"
-                           Style="{DynamicResource PasswordEntryStyle}"
-                           Text="{Binding Password}">
-                        </Entry>
-                        <HorizontalStackLayout Margin="20" Spacing="10">
-                            <Label Text="Use Training Mode?" VerticalOptions="Center" HorizontalOptions="Start"/>
-
-                            <Switch x:Name="UseTrainingMode" VerticalOptions="Center" HorizontalOptions="Start" AutomationId="UseTrainingModeSwitch"
-                                IsToggled="{Binding UseTrainingMode}"
-                                />
+    <Grid RowDefinitions="220,*">
+
+        <!-- Branded header section -->
+        <BoxView Grid.Row="0" Color="{StaticResource primary}"/>
+        <VerticalStackLayout Grid.Row="0" VerticalOptions="Center" HorizontalOptions="Center" Spacing="4">
+            <Label Text="Transaction Processor" Style="{StaticResource HeaderTitleStyle}"
+                   HorizontalOptions="Center" AutomationId="LoginLabel"/>
+            <Label Text="Merchant Point of Sale" Style="{StaticResource HeaderSubtitleStyle}"
+                   HorizontalOptions="Center"/>
+        </VerticalStackLayout>
+
+        <!-- Login form card -->
+        <ScrollView Grid.Row="1" BackgroundColor="{StaticResource pageBackgroundColor}">
+            <VerticalStackLayout Spacing="0" Padding="0,20,0,20">
+
+                <Frame Style="{StaticResource LoginFormFrameStyle}">
+                    <VerticalStackLayout Spacing="8">
+
+                        <Label Text="Sign In" FontSize="22" FontAttributes="Bold"
+                               TextColor="{StaticResource primary}" Margin="0,0,0,8"/>
+
+                        <!-- Username field -->
+                        <Frame Style="{StaticResource FormEntryStyle}">
+                            <Entry x:Name="UserNameEntry"
+                                   Placeholder="Username or email address"
+                                   AutomationId="UserNameEntry"
+                                   Style="{DynamicResource UserNameEntryStyle}"
+                                   Text="{Binding UserName}"/>
+                        </Frame>
+
+                        <!-- Password field -->
+                        <Frame Style="{StaticResource FormEntryStyle}">
+                            <Entry x:Name="PasswordEntry"
+                                   Placeholder="Password"
+                                   AutomationId="PasswordEntry"
+                                   Style="{DynamicResource PasswordEntryStyle}"
+                                   Text="{Binding Password}"/>
+                        </Frame>
+
+                        <!-- Training mode toggle -->
+                        <HorizontalStackLayout Margin="0,8,0,4" Spacing="12">
+                            <Label Text="Training Mode" VerticalOptions="Center"
+                                   TextColor="{StaticResource labelTextColor}" FontSize="14"/>
+                            <Switch x:Name="UseTrainingMode"
+                                    VerticalOptions="Center"
+                                    AutomationId="UseTrainingModeSwitch"
+                                    IsToggled="{Binding UseTrainingMode}"/>
                         </HorizontalStackLayout>
 
-                        <Button Text="Continue" Style="{StaticResource StandardButton}" AutomationId="LoginButton">
+                        <Button Text="Sign In" Style="{StaticResource StandardButton}"
+                                AutomationId="LoginButton" Margin="0,8,0,0">
                             <Button.Behaviors>
                                 <toolkit:EventToCommandBehavior
                                     EventName="Clicked"
-                                    Command="{Binding LogonCommand}" BindingContext="{Binding Source={x:Reference Logon}, Path=BindingContext}" />
+                                    Command="{Binding LogonCommand}"
+                                    BindingContext="{Binding Source={x:Reference Logon}, Path=BindingContext}"/>
                             </Button.Behaviors>
                         </Button>
 
-                        <Label AutomationId="DeviceSerial" VerticalOptions="Center" HorizontalOptions="Start" Text="{Binding DeviceIdentifier}"/>
-                        <Entry x:Name="ConfigHostUrlEntry" AutomationId="ConfigHostUrlEntry" Text="{Binding ConfigHostUrl}"/>
+                        <Label AutomationId="DeviceSerial" FontSize="11"
+                               TextColor="{StaticResource MidGray}"
+                               HorizontalOptions="Center" Margin="0,8,0,0"
+                               Text="{Binding DeviceIdentifier}"/>
+
+                        <!-- Config URL (advanced, small) -->
+                        <Entry x:Name="ConfigHostUrlEntry" AutomationId="ConfigHostUrlEntry"
+                               Text="{Binding ConfigHostUrl}"
+                               Placeholder="Config host URL (optional)"
+                               FontSize="11" TextColor="{StaticResource MidGray}"
+                               PlaceholderColor="{StaticResource MidGray}"/>
                     </VerticalStackLayout>
                 </Frame>
+
             </VerticalStackLayout>
         </ScrollView>
-    </ContentPage.Content>
-</ContentPage>
\ No newline at end of file
+
+    </Grid>
+</ContentPage>
diff --git a/TransactionProcessor.Mobile/Pages/MyAccount/MyAccountAddressesPage.xaml b/TransactionProcessor.Mobile/Pages/MyAccount/MyAccountAddressesPage.xaml
index e16b0e28a..07114e21f 100644
--- a/TransactionProcessor.Mobile/Pages/MyAccount/MyAccountAddressesPage.xaml
+++ b/TransactionProcessor.Mobile/Pages/MyAccount/MyAccountAddressesPage.xaml
@@ -4,42 +4,82 @@
              x:Class="TransactionProcessor.Mobile.Pages.MyAccount.MyAccountAddressesPage"
              xmlns:controls="clr-namespace:TransactionProcessor.Mobile.Controls"
              Shell.NavBarIsVisible="False">
-    <ScrollView>
-        <VerticalStackLayout Style="{DynamicResource Layout}">
-            <controls:TitleLabel Text="{Binding Title}" AutomationId="{Binding Title}" FontSize="20" HorizontalTextAlignment="Center"  VerticalOptions="End" FontAttributes="Bold" Padding="20,0,0,20"/>
-
-            <Frame Style="{DynamicResource MainFrame}">
-                <VerticalStackLayout x:Name="SubLayout">
-                    <Label Text="Primary Address" HorizontalTextAlignment="Center"
-                       HorizontalOptions="Fill" FontAttributes="Bold" FontSize="20"
-                       Margin="10,0,0,10" AutomationId="PrimaryAddressLabel"/>
-
-                    <Label Text="{Binding Address.AddressLine1}"
-                       HorizontalTextAlignment="Start"
-                       HorizontalOptions="Fill" AutomationId="AddressLine1Label"/>
-                    <Label Text="{Binding Address.AddressLine2}" x:Name="AddressLine2"
-               HorizontalTextAlignment="Start"
-               HorizontalOptions="Fill"  AutomationId="AddressLine2Label"/>
-                    <Label Text="{Binding Address.AddressLine3}"  x:Name="AddressLine3"
-               HorizontalTextAlignment="Start"
-               HorizontalOptions="Fill" AutomationId="AddressLine3Label"/>
-                    <Label Text="{Binding Address.AddressLine4}"  x:Name="AddressLine4"
-               HorizontalTextAlignment="Start"
-               HorizontalOptions="Fill" AutomationId="AddressLine4Label"/>
-                    <Label Text="{Binding Address.PostalCode}"
-               HorizontalTextAlignment="Start"
-               HorizontalOptions="Fill"  AutomationId="AddressPostCodeLabel"/>
-                    <Label Text="{Binding Address.Region}"
-               HorizontalTextAlignment="Start"
-               HorizontalOptions="Fill"  AutomationId="AddressRegionLabel"/>
-                    <Label Text="{Binding Address.Town}"
-               HorizontalTextAlignment="Start"
-               HorizontalOptions="Fill" AutomationId="AddressTownLabel"/>
-                </VerticalStackLayout>
+    <ScrollView BackgroundColor="{StaticResource pageBackgroundColor}">
+        <VerticalStackLayout Spacing="0">
+
+            <!-- Header -->
+            <Frame Style="{StaticResource PageHeaderStyle}">
+                <Label Text="{Binding Title}" Style="{StaticResource HeaderTitleStyle}" AutomationId="MyAddresses"/>
             </Frame>
-            <Button Text="Edit Address" Style="{StaticResource MyAccountButtonStyle}" 
-                Margin="10,0,10,0" AutomationId="EditAddressButton"/>
-            <Button Margin="10,0,10,0" Text="Back" AutomationId="BackButton" Style="{StaticResource MyAccountButtonStyle}" Command="{Binding BackButtonCommand}"/>
+
+            <VerticalStackLayout Padding="16,16,16,16" Spacing="12">
+
+                <!-- Primary Address card -->
+                <Frame Style="{StaticResource SectionCardStyle}">
+                    <VerticalStackLayout x:Name="SubLayout" Spacing="6">
+
+                        <Label Text="Primary Address" FontSize="16" FontAttributes="Bold"
+                               TextColor="{StaticResource labelTextColor}" Margin="0,0,0,8"
+                               AutomationId="PrimaryAddressLabel"/>
+
+                        <Label Text="{Binding Address.AddressLine1}"
+                               TextColor="{StaticResource DarkGray}" FontSize="14"
+                               AutomationId="AddressLine1Label"/>
+                        <Label Text="{Binding Address.AddressLine2}" x:Name="AddressLine2"
+                               TextColor="{StaticResource DarkGray}" FontSize="14"
+                               AutomationId="AddressLine2Label"/>
+                        <Label Text="{Binding Address.AddressLine3}" x:Name="AddressLine3"
+                               TextColor="{StaticResource DarkGray}" FontSize="14"
+                               AutomationId="AddressLine3Label"/>
+                        <Label Text="{Binding Address.AddressLine4}" x:Name="AddressLine4"
+                               TextColor="{StaticResource DarkGray}" FontSize="14"
+                               AutomationId="AddressLine4Label"/>
+
+                        <!-- Town / Region / PostCode row -->
+                        <Grid ColumnDefinitions="*,*,auto" Margin="0,4,0,0">
+                            <VerticalStackLayout Grid.Column="0" Spacing="2">
+                                <Label Text="Town" FontSize="11" TextColor="{StaticResource MidGray}"/>
+                                <Label Text="{Binding Address.Town}" FontSize="14"
+                                       FontAttributes="Bold" TextColor="{StaticResource labelTextColor}"
+                                       AutomationId="AddressTownLabel"/>
+                            </VerticalStackLayout>
+                            <VerticalStackLayout Grid.Column="1" Spacing="2">
+                                <Label Text="Region" FontSize="11" TextColor="{StaticResource MidGray}"/>
+                                <Label Text="{Binding Address.Region}" FontSize="14"
+                                       FontAttributes="Bold" TextColor="{StaticResource labelTextColor}"
+                                       AutomationId="AddressRegionLabel"/>
+                            </VerticalStackLayout>
+                            <VerticalStackLayout Grid.Column="2" Spacing="2">
+                                <Label Text="Post Code" FontSize="11" TextColor="{StaticResource MidGray}"/>
+                                <Label Text="{Binding Address.PostalCode}" FontSize="14"
+                                       FontAttributes="Bold" TextColor="{StaticResource labelTextColor}"
+                                       AutomationId="AddressPostCodeLabel"/>
+                            </VerticalStackLayout>
+                        </Grid>
+
+                    </VerticalStackLayout>
+                </Frame>
+
+                <!-- Action tiles row -->
+                <Grid ColumnDefinitions="*,*" ColumnSpacing="10">
+                    <Frame Grid.Column="0" Style="{StaticResource ActionTileStyle}"
+                           BackgroundColor="{StaticResource profile}">
+                        <Frame.GestureRecognizers>
+                            <TapGestureRecognizer/>
+                        </Frame.GestureRecognizers>
+                        <Label Text="Edit Address" Style="{StaticResource TileLabelStyle}" FontAttributes="Bold" AutomationId="EditAddressButton"/>
+                    </Frame>
+
+                    <Frame Grid.Column="1" Style="{StaticResource ActionTileStyle}"
+                           BackgroundColor="{StaticResource MidGray}">
+                        <Frame.GestureRecognizers>
+                            <TapGestureRecognizer Command="{Binding BackButtonCommand}"/>
+                        </Frame.GestureRecognizers>
+                        <Label Text="Back" Style="{StaticResource TileLabelStyle}" FontAttributes="Bold"/>
+                    </Frame>
+                </Grid>
+
+            </VerticalStackLayout>
         </VerticalStackLayout>
     </ScrollView>
-</ContentPage>
\ No newline at end of file
+</ContentPage>
diff --git a/TransactionProcessor.Mobile/Pages/MyAccount/MyAccountContactPage.xaml b/TransactionProcessor.Mobile/Pages/MyAccount/MyAccountContactPage.xaml
index fc5999cbf..8b7974240 100644
--- a/TransactionProcessor.Mobile/Pages/MyAccount/MyAccountContactPage.xaml
+++ b/TransactionProcessor.Mobile/Pages/MyAccount/MyAccountContactPage.xaml
@@ -4,44 +4,65 @@
              x:Class="TransactionProcessor.Mobile.Pages.MyAccount.MyAccountContactPage"
              xmlns:controls="clr-namespace:TransactionProcessor.Mobile.Controls"
              Shell.NavBarIsVisible="False">
-    <ScrollView>
-        <VerticalStackLayout Style="{DynamicResource Layout}">
-            <controls:TitleLabel Text="{Binding Title}" AutomationId="{Binding Title}" FontSize="20" HorizontalTextAlignment="Center"  VerticalOptions="End" FontAttributes="Bold" Padding="20,0,0,20"/>
-
-            <Frame Style="{DynamicResource MainFrame}">
-                <VerticalStackLayout x:Name="SubLayout">
-                    <Label Text="Primary Contact" HorizontalTextAlignment="Center"
-                       HorizontalOptions="Fill" FontAttributes="Bold" FontSize="20"
-                       Margin="10,0,0,10" AutomationId="PrimaryContactLabel"/>
-
-                    <Label Text="Name:" FontAttributes="Bold"
-                       HorizontalTextAlignment="Start"
-                       HorizontalOptions="Fill"/>
-                    <Label Text="{Binding Contact.Name}"
-                       HorizontalTextAlignment="Start"
-                       HorizontalOptions="Fill" Margin="0,0,0,10"
-                       AutomationId="ContactNameLabel"/>
-
-                    <Label Text="Email Address:" FontAttributes="Bold"
-                       HorizontalTextAlignment="Start"
-                       HorizontalOptions="Fill"/>
-                    <Label Text="{Binding Contact.EmailAddress}"
-                       HorizontalTextAlignment="Start"
-                       HorizontalOptions="Fill"  Margin="0,0,0,10"
-                       AutomationId="ContactEmailAddressLabel"/>
-
-                    <Label Text="Mobile Number:" FontAttributes="Bold"
-                       HorizontalTextAlignment="Start"
-                       HorizontalOptions="Fill"/>
-                    <Label Text="{Binding Contact.MobileNumber}"
-                       HorizontalTextAlignment="Start"
-                       HorizontalOptions="Fill"  Margin="0,0,0,10"
-                       AutomationId="ContactMobileNumberLabel"/>
-                </VerticalStackLayout>
+    <ScrollView BackgroundColor="{StaticResource pageBackgroundColor}">
+        <VerticalStackLayout Spacing="0">
+
+            <!-- Header -->
+            <Frame Style="{StaticResource PageHeaderStyle}">
+                <Label Text="{Binding Title}" Style="{StaticResource HeaderTitleStyle}" AutomationId="MyContacts"/>
             </Frame>
-            <Button Text="Edit Contact" Style="{StaticResource MyAccountButtonStyle}" 
-                Margin="10,0,0,10" AutomationId="EditContactButton"/>
-            <Button Margin="10,0,0,10" Text="Back" AutomationId="BackButton" Style="{StaticResource MyAccountButtonStyle}" Command="{Binding BackButtonCommand}"/>
+
+            <VerticalStackLayout Padding="16,16,16,16" Spacing="12">
+
+                <!-- Primary Contact card -->
+                <Frame Style="{StaticResource SectionCardStyle}">
+                    <VerticalStackLayout x:Name="SubLayout" Spacing="0">
+
+                        <Label Text="Primary Contact" FontSize="16" FontAttributes="Bold"
+                               TextColor="{StaticResource labelTextColor}" Margin="0,0,0,12"
+                               AutomationId="PrimaryContactLabel"/>
+
+                        <!-- Name -->
+                        <Label Text="Name" FontSize="12" TextColor="{StaticResource MidGray}"/>
+                        <Label Text="{Binding Contact.Name}" FontSize="15"
+                               FontAttributes="Bold" TextColor="{StaticResource labelTextColor}"
+                               Margin="0,0,0,12" AutomationId="ContactNameLabel"/>
+
+                        <!-- Email -->
+                        <Label Text="Email Address" FontSize="12" TextColor="{StaticResource MidGray}"/>
+                        <Label Text="{Binding Contact.EmailAddress}" FontSize="15"
+                               FontAttributes="Bold" TextColor="{StaticResource labelTextColor}"
+                               Margin="0,0,0,12" AutomationId="ContactEmailAddressLabel"/>
+
+                        <!-- Mobile -->
+                        <Label Text="Mobile Number" FontSize="12" TextColor="{StaticResource MidGray}"/>
+                        <Label Text="{Binding Contact.MobileNumber}" FontSize="15"
+                               FontAttributes="Bold" TextColor="{StaticResource labelTextColor}"
+                               AutomationId="ContactMobileNumberLabel"/>
+
+                    </VerticalStackLayout>
+                </Frame>
+
+                <!-- Action tiles row -->
+                <Grid ColumnDefinitions="*,*" ColumnSpacing="10">
+                    <Frame Grid.Column="0" Style="{StaticResource ActionTileStyle}"
+                           BackgroundColor="{StaticResource profile}">
+                        <Frame.GestureRecognizers>
+                            <TapGestureRecognizer/>
+                        </Frame.GestureRecognizers>
+                        <Label Text="Edit Contact" Style="{StaticResource TileLabelStyle}" FontAttributes="Bold" AutomationId="EditContactButton"/>
+                    </Frame>
+
+                    <Frame Grid.Column="1" Style="{StaticResource ActionTileStyle}"
+                           BackgroundColor="{StaticResource MidGray}">
+                        <Frame.GestureRecognizers>
+                            <TapGestureRecognizer Command="{Binding BackButtonCommand}"/>
+                        </Frame.GestureRecognizers>
+                        <Label Text="Back" Style="{StaticResource TileLabelStyle}" FontAttributes="Bold"/>
+                    </Frame>
+                </Grid>
+
+            </VerticalStackLayout>
         </VerticalStackLayout>
     </ScrollView>
-</ContentPage>
\ No newline at end of file
+</ContentPage>
diff --git a/TransactionProcessor.Mobile/Pages/MyAccount/MyAccountDetailsPage.xaml b/TransactionProcessor.Mobile/Pages/MyAccount/MyAccountDetailsPage.xaml
index c52902387..35521c9ff 100644
--- a/TransactionProcessor.Mobile/Pages/MyAccount/MyAccountDetailsPage.xaml
+++ b/TransactionProcessor.Mobile/Pages/MyAccount/MyAccountDetailsPage.xaml
@@ -4,65 +4,87 @@
              x:Class="TransactionProcessor.Mobile.Pages.MyAccount.MyAccountDetailsPage"
              xmlns:controls="clr-namespace:TransactionProcessor.Mobile.Controls"
              Shell.NavBarIsVisible="False">
-    <ScrollView>
-        <VerticalStackLayout Style="{DynamicResource Layout}">
-            <controls:TitleLabel Text="{Binding Title}" AutomationId="{Binding Title}" FontSize="20" HorizontalTextAlignment="Center"  VerticalOptions="End" FontAttributes="Bold" Padding="20,0,0,20"/>
+    <ScrollView BackgroundColor="{StaticResource pageBackgroundColor}">
+        <VerticalStackLayout Spacing="0">
 
-            <Frame Style="{DynamicResource MainFrame}">
-                <VerticalStackLayout x:Name="SubLayout">
+            <!-- Header -->
+            <Frame Style="{StaticResource PageHeaderStyle}">
+                <Label Text="{Binding Title}" Style="{StaticResource HeaderTitleStyle}" AutomationId="MyDetails"/>
+            </Frame>
 
-                    <Label Text="Name:" FontAttributes="Bold"
-                       HorizontalTextAlignment="Start"
-                       HorizontalOptions="Fill"/>
-                    <Label Text="{Binding MerchantName}"
-                       HorizontalTextAlignment="Start"
-                       HorizontalOptions="Fill"  Margin="0,0,0,10"
-                       AutomationId="MerchantNameLabel"/>
+            <VerticalStackLayout Padding="16,16,16,16" Spacing="12">
 
-                    <Label Text="Balance:" FontAttributes="Bold"
-                       HorizontalTextAlignment="Start"
-                       HorizontalOptions="Fill"/>
-                    <Label Text="{Binding Balance}"
-                       HorizontalTextAlignment="Start"
-                       HorizontalOptions="Fill" Margin="0,0,0,10"
-                       AutomationId="BalanceLabel"/>
+                <!-- Merchant info card -->
+                <Frame Style="{StaticResource SectionCardStyle}">
+                    <VerticalStackLayout Spacing="8">
+                        <Label Text="Merchant" FontSize="13" TextColor="{StaticResource MidGray}"/>
+                        <Label Text="{Binding MerchantName}" FontSize="18" FontAttributes="Bold"
+                               TextColor="{StaticResource labelTextColor}"
+                               AutomationId="MerchantNameLabel"/>
+                    </VerticalStackLayout>
+                </Frame>
 
-                    <Label Text="Available Balance:" FontAttributes="Bold"
-                       HorizontalTextAlignment="Start"
-                       HorizontalOptions="Fill"/>
-                    <Label Text="{Binding AvailableBalance}"
-                       HorizontalTextAlignment="Start"
-                       HorizontalOptions="Fill"  Margin="0,0,0,10"
-                       AutomationId="AvailableBalanceLabel"/>
+                <!-- Balance card -->
+                <Frame Style="{StaticResource BalanceCardStyle}">
+                    <Grid ColumnDefinitions="*,*">
+                        <VerticalStackLayout Grid.Column="0" Spacing="2">
+                            <Label Text="Balance" TextColor="White" FontSize="13" Opacity="0.85"/>
+                            <Label Text="{Binding Balance}" TextColor="White"
+                                   FontSize="22" FontAttributes="Bold"
+                                   AutomationId="BalanceLabel"/>
+                        </VerticalStackLayout>
+                        <VerticalStackLayout Grid.Column="1" Spacing="2">
+                            <Label Text="Available" TextColor="White" FontSize="13" Opacity="0.85"/>
+                            <Label Text="{Binding AvailableBalance}" TextColor="White"
+                                   FontSize="22" FontAttributes="Bold"
+                                   AutomationId="AvailableBalanceLabel"/>
+                        </VerticalStackLayout>
+                    </Grid>
+                </Frame>
 
-                    <Label Text="Last Statement:" FontAttributes="Bold"
-                       HorizontalTextAlignment="Start"
-                       HorizontalOptions="Fill"/>
-                    <Label Text="{Binding LastStatementDate, StringFormat='{0:dd/MM/yyyy}'}"
-                       HorizontalTextAlignment="Start"
-                       HorizontalOptions="Fill"  Margin="0,0,0,10"
-                       AutomationId="LastStatementDateLabel"/>
+                <!-- Statement info -->
+                <Frame Style="{StaticResource SectionCardStyle}">
+                    <Grid ColumnDefinitions="*,*" RowDefinitions="auto,auto,auto">
+                        <Label Grid.Row="0" Grid.Column="0" Text="Last Statement"
+                               FontSize="12" TextColor="{StaticResource MidGray}"/>
+                        <Label Grid.Row="1" Grid.Column="0"
+                               Text="{Binding LastStatementDate, StringFormat='{0:dd/MM/yyyy}'}"
+                               FontSize="15" FontAttributes="Bold"
+                               TextColor="{StaticResource labelTextColor}"
+                               AutomationId="LastStatementDateLabel"/>
 
-                    <Label Text="Next Statement:" FontAttributes="Bold"
-                       HorizontalTextAlignment="Start"
-                       HorizontalOptions="Fill"/>
-                    <Label Text="{Binding NextStatementDate, StringFormat='{0:dd/MM/yyyy}'}"
-                       HorizontalTextAlignment="Start"
-                       HorizontalOptions="Fill"  Margin="0,0,0,10"
-                       AutomationId="NextStatementDateLabel"/>
+                        <Label Grid.Row="0" Grid.Column="1" Text="Next Statement"
+                               FontSize="12" TextColor="{StaticResource MidGray}"/>
+                        <Label Grid.Row="1" Grid.Column="1"
+                               Text="{Binding NextStatementDate, StringFormat='{0:dd/MM/yyyy}'}"
+                               FontSize="15" FontAttributes="Bold"
+                               TextColor="{StaticResource labelTextColor}"
+                               AutomationId="NextStatementDateLabel"/>
 
-                    <Label Text="Settlement Schedule:" FontAttributes="Bold"
-                       HorizontalTextAlignment="Start"
-                       HorizontalOptions="Fill"/>
-                    <Label Text="{Binding SettlementSchedule}"
-                       HorizontalTextAlignment="Start"
-                       HorizontalOptions="Fill"  Margin="0,0,0,10"
-                       AutomationId="SettlementScheduleLabel"/>
-                </VerticalStackLayout>
-            </Frame>
-            <Button Text="Edit Details" Style="{StaticResource MyAccountButtonStyle}" 
-                Margin="10,0,0,10" AutomationId="EditDetailsButton"/>
-            <Button Margin="10,0,0,10" Text="Back" AutomationId="BackButton" Style="{StaticResource MyAccountButtonStyle}" Command="{Binding BackButtonCommand}"/>
+                        <Label Grid.Row="2" Grid.Column="0" Text="Settlement Schedule"
+                               FontSize="12" TextColor="{StaticResource MidGray}" Margin="0,8,0,0"/>
+                        <Label Grid.Row="2" Grid.Column="1"
+                               Text="{Binding SettlementSchedule}"
+                               FontSize="15" FontAttributes="Bold"
+                               TextColor="{StaticResource labelTextColor}" Margin="0,8,0,0"
+                               AutomationId="SettlementScheduleLabel"/>
+                    </Grid>
+                </Frame>
+
+                <Frame Style="{StaticResource ActionTileStyle}"
+                       BackgroundColor="{StaticResource profile}">
+                    <Label Text="Edit Details" Style="{StaticResource TileLabelStyle}" FontAttributes="Bold" AutomationId="EditDetailsButton"/>
+                </Frame>
+
+                <Frame Style="{StaticResource ActionTileStyle}"
+                       BackgroundColor="{StaticResource MidGray}">
+                    <Frame.GestureRecognizers>
+                        <TapGestureRecognizer Command="{Binding BackButtonCommand}"/>
+                    </Frame.GestureRecognizers>
+                    <Label Text="Back" Style="{StaticResource TileLabelStyle}" FontAttributes="Bold" AutomationId="BackButton"/>
+                </Frame>
+
+            </VerticalStackLayout>
         </VerticalStackLayout>
     </ScrollView>
-</ContentPage>
\ No newline at end of file
+</ContentPage>
diff --git a/TransactionProcessor.Mobile/Pages/MyAccount/MyAccountPage.xaml b/TransactionProcessor.Mobile/Pages/MyAccount/MyAccountPage.xaml
index f5f62c8a9..9d65a8caf 100644
--- a/TransactionProcessor.Mobile/Pages/MyAccount/MyAccountPage.xaml
+++ b/TransactionProcessor.Mobile/Pages/MyAccount/MyAccountPage.xaml
@@ -5,40 +5,45 @@
                                xmlns:common="clr-namespace:TransactionProcessor.Mobile.Pages.Common"
                                xmlns:controls="clr-namespace:TransactionProcessor.Mobile.Controls"
                                Shell.NavBarIsVisible="False">
-    <ScrollView>
-        <VerticalStackLayout Style="{DynamicResource Layout}">
+    <ScrollView BackgroundColor="{StaticResource pageBackgroundColor}">
+        <VerticalStackLayout Spacing="0">
 
-            <controls:TitleLabel Text="{Binding Title}" AutomationId="{Binding Title}" FontSize="20" HorizontalTextAlignment="Center"  VerticalOptions="End" FontAttributes="Bold" Padding="20,0,0,20"/>
-
-            <Frame Style="{DynamicResource MainFrame}">
-                <VerticalStackLayout>
-                <HorizontalStackLayout>
-                    <Label Text="Merchant Name:"
-                           HorizontalTextAlignment="Center"
-                           HorizontalOptions="Fill"
-                           FontAttributes="Bold" FontSize="15"
-                           Margin="0,0,5,5"/>
-                    <Label Text="{Binding MerchantName}"
-                           HorizontalTextAlignment="Center"
-                           HorizontalOptions="Fill"
-                           FontSize="15"/>
-                </HorizontalStackLayout>
-                    <HorizontalStackLayout>
-                        <Label Text="Last Login:"
-                           HorizontalTextAlignment="Center"
-                           HorizontalOptions="Fill"
-                           FontAttributes="Bold" FontSize="15"
-                           Margin="0,0,5,10"/>
-                    <Label Text="{Binding LastLogin, StringFormat='{0:dd/MM/yyyy HH:mm:ss}'}"
-                           HorizontalTextAlignment="Center"
-                           HorizontalOptions="Fill"
-                           FontSize="15"/>
-                    </HorizontalStackLayout>
-                    <VerticalStackLayout x:Name="MyAccountOptionsList" Spacing="10">
-                    </VerticalStackLayout>
-                    <Button Text="Back" AutomationId="BackButton" Style="{StaticResource MyAccountButtonStyle}" Command="{Binding BackButtonCommand}"/>
+            <!-- Header section -->
+            <Frame Style="{StaticResource PageHeaderStyle}">
+                <VerticalStackLayout Spacing="4">
+                    <Label Text="{Binding Title}" Style="{StaticResource HeaderTitleStyle}" AutomationId="{Binding Title}"/>
+                    <Label Text="{Binding MerchantName}" Style="{StaticResource HeaderSubtitleStyle}"/>
                 </VerticalStackLayout>
             </Frame>
+
+            <!-- Account info section -->
+            <VerticalStackLayout Padding="16,16,16,16" Spacing="0">
+
+                <!-- Last login card -->
+                <Frame Style="{StaticResource SectionCardStyle}">
+                    <Grid ColumnDefinitions="*,auto">
+                        <VerticalStackLayout Grid.Column="0" Spacing="2">
+                            <Label Text="Last Login" FontSize="12" TextColor="{StaticResource MidGray}"/>
+                            <Label Text="{Binding LastLogin, StringFormat='{0:dd/MM/yyyy HH:mm}'}"
+                                   FontSize="16" FontAttributes="Bold"
+                                   TextColor="{StaticResource labelTextColor}"/>
+                        </VerticalStackLayout>
+                    </Grid>
+                </Frame>
+
+                <!-- Options grid (dynamically populated) -->
+                <Grid x:Name="MyAccountOptionsList" ColumnDefinitions="*,*" ColumnSpacing="10" RowSpacing="10"/>
+
+                <Frame Style="{StaticResource ActionTileStyle}"
+                       BackgroundColor="{StaticResource MidGray}"
+                       Margin="0,8,0,0">
+                    <Frame.GestureRecognizers>
+                        <TapGestureRecognizer Command="{Binding BackButtonCommand}"/>
+                    </Frame.GestureRecognizers>
+                    <Label Text="Back" Style="{StaticResource TileLabelStyle}" FontAttributes="Bold" AutomationId="BackButton"/>
+                </Frame>
+
+            </VerticalStackLayout>
         </VerticalStackLayout>
     </ScrollView>
-</common:NoBackWithoutLogoutPage>
\ No newline at end of file
+</common:NoBackWithoutLogoutPage>
diff --git a/TransactionProcessor.Mobile/Pages/MyAccount/MyAccountPage.xaml.cs b/TransactionProcessor.Mobile/Pages/MyAccount/MyAccountPage.xaml.cs
index f8a4f0c18..25aa729e8 100644
--- a/TransactionProcessor.Mobile/Pages/MyAccount/MyAccountPage.xaml.cs
+++ b/TransactionProcessor.Mobile/Pages/MyAccount/MyAccountPage.xaml.cs
@@ -13,9 +13,7 @@ public partial class MyAccountPage : NoBackWithoutLogoutPage
     public MyAccountPage(MyAccountPageViewModel vm)
     {
         this.InitializeComponent();
-        
         BindingContext = vm;
-        
     }
 
     protected override async void OnAppearing()
@@ -27,48 +25,62 @@ protected override async void OnAppearing()
 
     private void LoadOptions(MyAccountPageViewModel viewModel)
     {
-        this.MyAccountOptionsList.Clear();
+        this.MyAccountOptionsList.Children.Clear();
+        this.MyAccountOptionsList.RowDefinitions.Clear();
 
+        var tiles = new List<Frame>();
         Int32 rowCount = 0;
         foreach (ListViewItem modelOption in viewModel.MyAccountOptions)
         {
-            Button button = new Button
+            Frame tile = this.CreateTile(modelOption.Title, (Color)Application.Current.Resources["profile"], $"{modelOption.Title.Replace(" ", "")}Button");
+            TapGestureRecognizer tap = new TapGestureRecognizer
             {
-                Text = modelOption.Title,
-                HorizontalOptions = LayoutOptions.FillAndExpand,
-                AutomationId = $"{modelOption.Title.Replace(" ", "")}Button",
-            };
-            button.SetDynamicResource(VisualElement.StyleProperty, "MyAccountButtonStyle");
-
-            Binding commandParameter = new Binding
-            {
-                Source = new ItemSelected<ListViewItem>
-                {
-                    SelectedItem = modelOption,
-                    SelectedItemIndex = rowCount
-                }
+                Command = new Command(() => viewModel.OptionSelectedCommand.Execute(
+                    new ItemSelected<ListViewItem> { SelectedItem = modelOption, SelectedItemIndex = rowCount }))
             };
+            tile.GestureRecognizers.Add(tap);
+            tiles.Add(tile);
+            rowCount++;
+        }
 
-            Binding command = new Binding
-            {
-                Source = viewModel.OptionSelectedCommand
-            };
-            
-            // Create the behavior and bind it to the command
-            EventToCommandBehavior behavior = new EventToCommandBehavior
+        int row = 0;
+        for (int i = 0; i < tiles.Count; i += 2)
+        {
+            this.MyAccountOptionsList.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
+            Grid.SetRow(tiles[i], row);
+            Grid.SetColumn(tiles[i], 0);
+            this.MyAccountOptionsList.Children.Add(tiles[i]);
+            if (i + 1 < tiles.Count)
             {
-                EventName = "Clicked"
-            };
-            behavior.SetBinding(EventToCommandBehavior.CommandProperty, command);
-            behavior.SetBinding(EventToCommandBehavior.CommandParameterProperty, commandParameter);
-
-            // Attach the behavior to the button
-            button.Behaviors.Add(behavior);
-
-            this.MyAccountOptionsList.Add(button);
-
-            rowCount++;
+                Grid.SetRow(tiles[i + 1], row);
+                Grid.SetColumn(tiles[i + 1], 1);
+                this.MyAccountOptionsList.Children.Add(tiles[i + 1]);
+            }
+            row++;
         }
     }
 
-}
\ No newline at end of file
+    private Frame CreateTile(string text, Color backgroundColor, string automationId)
+    {
+        return new Frame
+        {
+            CornerRadius = 16,
+            HasShadow = true,
+            Padding = new Thickness(12),
+            HeightRequest = 100,
+            BackgroundColor = backgroundColor,
+            BorderColor = Colors.Transparent,
+            HorizontalOptions = LayoutOptions.FillAndExpand,
+            Content = new Label
+            {
+                Text = text,
+                TextColor = Colors.White,
+                FontAttributes = FontAttributes.Bold,
+                FontSize = 16,
+                HorizontalTextAlignment = TextAlignment.Center,
+                VerticalTextAlignment = TextAlignment.Center,
+                AutomationId = automationId
+            }
+        };
+    }
+}
diff --git a/TransactionProcessor.Mobile/Pages/Reports/ReportsBalanceAnalysisPage.xaml b/TransactionProcessor.Mobile/Pages/Reports/ReportsBalanceAnalysisPage.xaml
index 89f1bafca..1b9a39ef3 100644
--- a/TransactionProcessor.Mobile/Pages/Reports/ReportsBalanceAnalysisPage.xaml
+++ b/TransactionProcessor.Mobile/Pages/Reports/ReportsBalanceAnalysisPage.xaml
@@ -5,23 +5,38 @@
              xmlns:controls="clr-namespace:TransactionProcessor.Mobile.Controls"
              xmlns:liveChartsCore="clr-namespace:LiveChartsCore.SkiaSharpView.Maui;assembly=LiveChartsCore.SkiaSharpView.Maui"
              Shell.NavBarIsVisible="False">
+    <Grid RowDefinitions="auto,*,auto" BackgroundColor="{StaticResource pageBackgroundColor}">
 
-    <ScrollView>
-        <VerticalStackLayout>
-            <controls:TitleLabel Text="{Binding Title}" AutomationId="{Binding Title}" FontSize="20" HorizontalTextAlignment="Center"  VerticalOptions="End" FontAttributes="Bold" Padding="20,0,0,20"/>
+        <!-- Header -->
+        <Frame Grid.Row="0" Style="{StaticResource PageHeaderStyle}">
+            <Label Text="{Binding Title}" Style="{StaticResource HeaderTitleStyle}" AutomationId="{Binding Title}"/>
+        </Frame>
 
-            <liveChartsCore:CartesianChart x:Name="Chart"
-                                           Series="{Binding Series}" 
-                                           YAxes="{Binding YAxes}"
-                                           XAxes="{Binding XAxes}"
-                                           TooltipFindingStrategy="{Binding TooltipFindingStrategy}"
-                                           TooltipPosition="{Binding TooltipPosition}"
-                                           HeightRequest="200" HorizontalOptions="FillAndExpand">
-            </liveChartsCore:CartesianChart>
-
-            <VerticalStackLayout Style="{DynamicResource Layout}">
-            <Button Text="Back" AutomationId="BackButton" Style="{StaticResource ReportsButtonStyle}" Command="{Binding BackButtonCommand}"/>
+        <!-- Chart -->
+        <ScrollView Grid.Row="1">
+            <VerticalStackLayout Padding="16,16,16,0">
+                <Frame Style="{StaticResource SectionCardStyle}" Padding="8">
+                    <liveChartsCore:CartesianChart x:Name="Chart"
+                                                   Series="{Binding Series}"
+                                                   YAxes="{Binding YAxes}"
+                                                   XAxes="{Binding XAxes}"
+                                                   TooltipFindingStrategy="{Binding TooltipFindingStrategy}"
+                                                   TooltipPosition="{Binding TooltipPosition}"
+                                                   HeightRequest="300"
+                                                   HorizontalOptions="FillAndExpand"/>
+                </Frame>
             </VerticalStackLayout>
-        </VerticalStackLayout>
-    </ScrollView>
-</ContentPage>
\ No newline at end of file
+        </ScrollView>
+
+        <!-- Back tile -->
+        <Frame Grid.Row="2" Style="{StaticResource ActionTileStyle}"
+               BackgroundColor="{StaticResource MidGray}"
+               Margin="16,8">
+            <Frame.GestureRecognizers>
+                <TapGestureRecognizer Command="{Binding BackButtonCommand}"/>
+            </Frame.GestureRecognizers>
+            <Label Text="Back" Style="{StaticResource TileLabelStyle}" FontAttributes="Bold" AutomationId="BackButton"/>
+        </Frame>
+
+    </Grid>
+</ContentPage>
diff --git a/TransactionProcessor.Mobile/Pages/Reports/ReportsPage.xaml b/TransactionProcessor.Mobile/Pages/Reports/ReportsPage.xaml
index cf021724c..99f365b72 100644
--- a/TransactionProcessor.Mobile/Pages/Reports/ReportsPage.xaml
+++ b/TransactionProcessor.Mobile/Pages/Reports/ReportsPage.xaml
@@ -5,11 +5,19 @@
                                xmlns:common="clr-namespace:TransactionProcessor.Mobile.Pages.Common"
                                x:Class="TransactionProcessor.Mobile.Pages.Reports.ReportsPage"
                                Shell.NavBarIsVisible="False">
-    <VerticalStackLayout x:Name="MainLayout" Style="{DynamicResource Layout}">
-        <controls:TitleLabel Text="{Binding Title}" AutomationId="{Binding Title}" FontSize="20" HorizontalTextAlignment="Center"  VerticalOptions="End" FontAttributes="Bold" Padding="20,0,0,20"/>
-        <Frame Style="{DynamicResource MainFrame}">
-            <VerticalStackLayout x:Name="ReportsList" Spacing="10">
+    <ScrollView BackgroundColor="{StaticResource pageBackgroundColor}">
+        <VerticalStackLayout Spacing="0">
+
+            <!-- Header -->
+            <Frame Style="{StaticResource PageHeaderStyle}">
+                <Label Text="{Binding Title}" Style="{StaticResource HeaderTitleStyle}" AutomationId="{Binding Title}"/>
+            </Frame>
+
+            <!-- Reports grid (dynamically populated) -->
+            <VerticalStackLayout Padding="16,16,16,16" Spacing="10">
+                <Grid x:Name="ReportsList" ColumnDefinitions="*,*" ColumnSpacing="10" RowSpacing="10"/>
             </VerticalStackLayout>
-        </Frame>
-    </VerticalStackLayout>
-</common:NoBackWithoutLogoutPage>
\ No newline at end of file
+
+        </VerticalStackLayout>
+    </ScrollView>
+</common:NoBackWithoutLogoutPage>
diff --git a/TransactionProcessor.Mobile/Pages/Reports/ReportsPage.xaml.cs b/TransactionProcessor.Mobile/Pages/Reports/ReportsPage.xaml.cs
index 87a0b9513..dcda1564f 100644
--- a/TransactionProcessor.Mobile/Pages/Reports/ReportsPage.xaml.cs
+++ b/TransactionProcessor.Mobile/Pages/Reports/ReportsPage.xaml.cs
@@ -11,8 +11,8 @@ public partial class ReportsPage : NoBackWithoutLogoutPage
     private ReportsPageViewModel viewModel => BindingContext as ReportsPageViewModel;
 
     public ReportsPage(ReportsPageViewModel vm)
-	{
-		this.InitializeComponent();
+{
+this.InitializeComponent();
         BindingContext = vm;
     }
 
@@ -25,67 +25,76 @@ protected override async void OnAppearing()
 
     private void LoadProducts(ReportsPageViewModel viewModel)
     {
-        this.ReportsList.Clear();
+        this.ReportsList.Children.Clear();
+        this.ReportsList.RowDefinitions.Clear();
 
+        var tiles = new List<Frame>();
         Int32 rowCount = 0;
         foreach (ListViewItem modelOption in viewModel.ReportsMenuOptions)
         {
-            Button button = new Button
-                            {
-                                Text = modelOption.Title,
-                                HorizontalOptions = LayoutOptions.FillAndExpand,
-                                AutomationId = $"{modelOption.Title.Replace(" ", "")}Button",
-                            };
-            button.SetDynamicResource(VisualElement.StyleProperty, "ReportsButtonStyle");
-
-            Binding commandParameter = new Binding
-            {
-                Source = new ItemSelected<ListViewItem>
-                {
-                    SelectedItem = modelOption,
-                    SelectedItemIndex = rowCount
-                }
-            };
-
-            Binding command = new Binding("OptionSelectedCommand", source: this.viewModel);
-
-            // Create the behavior and bind it to the command
-            EventToCommandBehavior behavior = new EventToCommandBehavior
+            Frame tile = this.CreateTile(modelOption.Title, (Color)Application.Current.Resources["reports"], $"{modelOption.Title.Replace(" ", "")}Button");
+            TapGestureRecognizer tap = new TapGestureRecognizer
             {
-                EventName = "Clicked"
+                Command = new Command(() => viewModel.OptionSelectedCommand.Execute(
+                    new ItemSelected<ListViewItem> { SelectedItem = modelOption, SelectedItemIndex = rowCount }))
             };
-            behavior.SetBinding(EventToCommandBehavior.CommandProperty, command);
-            behavior.SetBinding(EventToCommandBehavior.CommandParameterProperty, commandParameter);
-
-            // Attach the behavior to the button
-            button.Behaviors.Add(behavior);
-
+            tile.GestureRecognizers.Add(tap);
+            tiles.Add(tile);
             rowCount++;
-            this.ReportsList.Add(button);
+        }
 
+        int row = 0;
+        for (int i = 0; i < tiles.Count; i += 2)
+        {
+            this.ReportsList.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
+            Grid.SetRow(tiles[i], row);
+            Grid.SetColumn(tiles[i], 0);
+            this.ReportsList.Children.Add(tiles[i]);
+            if (i + 1 < tiles.Count)
+            {
+                Grid.SetRow(tiles[i + 1], row);
+                Grid.SetColumn(tiles[i + 1], 1);
+                this.ReportsList.Children.Add(tiles[i + 1]);
+            }
+            row++;
         }
 
-        this.ReportsList.Add(this.AddBackButton());
+        Frame backTile = this.CreateBackTile(viewModel.BackButtonCommand);
+        this.ReportsList.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
+        Grid.SetRow(backTile, row);
+        Grid.SetColumn(backTile, 0);
+        Grid.SetColumnSpan(backTile, 2);
+        this.ReportsList.Children.Add(backTile);
     }
 
-    private Button AddBackButton()
+    private Frame CreateTile(string text, Color backgroundColor, string automationId)
     {
-        Button button = new Button
+        return new Frame
         {
-            Text = "Back",
+            CornerRadius = 16,
+            HasShadow = true,
+            Padding = new Thickness(12),
+            HeightRequest = 100,
+            BackgroundColor = backgroundColor,
+            BorderColor = Colors.Transparent,
             HorizontalOptions = LayoutOptions.FillAndExpand,
-            AutomationId = "BackButton",
-        };
-        button.SetDynamicResource(VisualElement.StyleProperty, "ReportsButtonStyle");
-
-        Binding backButtonCommand = new Binding
-        {
-            Source = this.viewModel.BackButtonCommand
+            Content = new Label
+            {
+                Text = text,
+                TextColor = Colors.White,
+                FontAttributes = FontAttributes.Bold,
+                FontSize = 16,
+                HorizontalTextAlignment = TextAlignment.Center,
+                VerticalTextAlignment = TextAlignment.Center,
+                AutomationId = automationId
+            }
         };
-
-        button.SetBinding(Button.CommandProperty, backButtonCommand);
-
-        return button;
     }
 
-}
\ No newline at end of file
+    private Frame CreateBackTile(System.Windows.Input.ICommand command)
+    {
+        Frame frame = this.CreateTile("Back", (Color)Application.Current.Resources["MidGray"], "BackButton");
+        frame.GestureRecognizers.Add(new TapGestureRecognizer { Command = command });
+        return frame;
+    }
+}
diff --git a/TransactionProcessor.Mobile/Pages/Reports/ReportsSalesAnalysisPage.xaml b/TransactionProcessor.Mobile/Pages/Reports/ReportsSalesAnalysisPage.xaml
index 15a5dcc0c..2557ae003 100644
--- a/TransactionProcessor.Mobile/Pages/Reports/ReportsSalesAnalysisPage.xaml
+++ b/TransactionProcessor.Mobile/Pages/Reports/ReportsSalesAnalysisPage.xaml
@@ -10,100 +10,102 @@
 
     <ContentPage.Resources>
         <ResourceDictionary>
-            <toolkit:SelectedItemEventArgsConverter x:Key="SelectedItemEventArgsConverter" />
+            <toolkit:SelectedItemEventArgsConverter x:Key="SelectedItemEventArgsConverter"/>
         </ResourceDictionary>
 
         <DataTemplate x:Key="CardTemplate">
-            <Frame
-            Padding="0"
-            CornerRadius="20"
-            HasShadow="False"
-            x:DataType="reports1:SalesAnalysis"
-            BackgroundColor="{StaticResource LightGray}">
-                <Grid
-                            RowDefinitions="42,40,*"
-                            Padding="20">
-                    <Image
-                                Source="{Binding Icon}"
-                                WidthRequest="36"
-                                HeightRequest="36"
-                                VerticalOptions="Start"
-                                HorizontalOptions="End"/>
+            <Frame CornerRadius="16" HasShadow="True" Padding="0" Margin="0,0,0,8"
+                   BorderColor="Transparent"
+                   x:DataType="reports1:SalesAnalysis"
+                   BackgroundColor="{StaticResource cardBackgroundColor}">
+                <Grid RowDefinitions="auto,auto,auto" Padding="16,12">
+
+                    <!-- Title row with icon -->
+                    <Grid Grid.Row="0" ColumnDefinitions="*,auto">
+                        <Label Grid.Column="0" Text="{Binding MainTitle}"
+                               FontSize="16" FontAttributes="Bold"
+                               TextColor="{StaticResource labelTextColor}"/>
+                        <Image Grid.Column="1" Source="{Binding Icon}"
+                               WidthRequest="32" HeightRequest="32"
+                               VerticalOptions="Center"/>
+                    </Grid>
+
+                    <!-- Today's value -->
+                    <Grid Grid.Row="1" ColumnDefinitions="*,auto" Margin="0,8,0,0">
+                        <Label Grid.Column="0" Text="{Binding TodaysTitle}"
+                               FontSize="12" TextColor="{StaticResource MidGray}"/>
+                        <Label Grid.Column="1" Text="{Binding TodaysValue}"
+                               FontSize="14" FontAttributes="Bold"
+                               TextColor="{StaticResource labelTextColor}"/>
+                    </Grid>
+
+                    <!-- Comparison and variance -->
+                    <Grid Grid.Row="2" ColumnDefinitions="*,auto,auto,auto" Margin="0,4,0,0">
+                        <Label Grid.Column="0" Text="{Binding ComparisonTitle}"
+                               FontSize="12" TextColor="{StaticResource MidGray}"
+                               VerticalOptions="Center"/>
+                        <Label Grid.Column="1" Text="{Binding ComparisonValue}"
+                               FontSize="13" TextColor="{StaticResource DarkGray}"
+                               VerticalOptions="Center" Margin="0,0,12,0"/>
+                        <Label Grid.Column="2" Text="{Binding VarianceTitle}"
+                               FontSize="12" TextColor="{StaticResource MidGray}"
+                               VerticalOptions="Center"/>
+                        <Label Grid.Column="3" Text="{Binding VarianceValue}"
+                               FontSize="13" FontAttributes="Bold"
+                               TextColor="{StaticResource successGreen}"
+                               VerticalOptions="Center" Margin="4,0,0,0"/>
+                    </Grid>
 
-                    <Label Text="{Binding MainTitle}" class="LargeTitle"/>
-
-                    <VerticalStackLayout
-                                Spacing="0"
-                                Grid.RowSpan="3" 
-                                VerticalOptions="Center">
-                        <Label Text="{Binding TodaysTitle}" class="Subhead" />
-                        <Label Text="{Binding TodaysValue}" class="Subhead" />
-                    </VerticalStackLayout>
-
-                    <HorizontalStackLayout
-                            Grid.Row="2"
-                            Spacing="10"
-                            VerticalOptions="End">
-                        <Label Text="{Binding ComparisonTitle}" class="Small" VerticalOptions="Center"/>
-                        <Label Text="{Binding ComparisonValue}" class="Small" VerticalOptions="Center"/>
-                    </HorizontalStackLayout>
-
-                    <HorizontalStackLayout
-                                Grid.Row="2"
-                                Spacing="10"
-                                HorizontalOptions="End"
-                                VerticalOptions="End">
-                        <Label Text="{Binding VarianceTitle}" class="Small" VerticalOptions="Center"/>
-                        <Label Text="{Binding VarianceValue}" class="Small" VerticalOptions="Center"/>
-                    </HorizontalStackLayout>
                 </Grid>
             </Frame>
-
-
-
         </DataTemplate>
-
     </ContentPage.Resources>
 
-    <ScrollView>
-        <VerticalStackLayout Style="{DynamicResource Layout}">
-            <controls:TitleLabel Text="{Binding Title}" AutomationId="{Binding Title}" FontSize="20" HorizontalTextAlignment="Center"  VerticalOptions="End" FontAttributes="Bold" Padding="20,0,0,20"/>
+    <Grid RowDefinitions="auto,auto,*,auto" BackgroundColor="{StaticResource pageBackgroundColor}">
 
+        <!-- Header -->
+        <Frame Grid.Row="0" Style="{StaticResource PageHeaderStyle}">
+            <Label Text="{Binding Title}" Style="{StaticResource HeaderTitleStyle}" AutomationId="SalesAnalysis"/>
+        </Frame>
+
+        <!-- Date picker -->
+        <Frame Grid.Row="1" Style="{StaticResource SectionCardStyle}" Margin="16,12,16,0">
             <Picker x:Name="ComparisonDate"
                     Title="Select Date for Comparison"
                     ItemDisplayBinding="{Binding DisplayText}"
                     ItemsSource="{Binding ComparisonDates}"
-                    SelectedItem="{Binding SelectedItem}">
+                    SelectedItem="{Binding SelectedItem}"
+                    TextColor="{StaticResource labelTextColor}">
                 <Picker.Behaviors>
                     <toolkit:EventToCommandBehavior
                         EventName="SelectedIndexChanged"
                         Command="{Binding ComparisonDatePickerSelectedIndexChangedCommand}"
-                        BindingContext="{Binding Source={x:Reference SalesAnalysisPage}, Path=BindingContext}" />
+                        BindingContext="{Binding Source={x:Reference SalesAnalysisPage}, Path=BindingContext}"/>
                 </Picker.Behaviors>
             </Picker>
+        </Frame>
 
-            <ScrollView>
-                <VerticalStackLayout>
-
-                    <!-- Actual Content -->
-                    <CollectionView
-                        Margin="15"
+        <!-- Sales analysis list -->
+        <CollectionView Grid.Row="2"
+                        Margin="16,8,16,0"
                         ItemsSource="{Binding SalesAnalysisList}"
                         ItemTemplate="{StaticResource CardTemplate}">
-                        <CollectionView.ItemsLayout>
-                            <GridItemsLayout Orientation="Vertical"
-                                             Span="1"
-                                             VerticalItemSpacing="8"
-                                             HorizontalItemSpacing="8"/>
-                        </CollectionView.ItemsLayout>
-                    </CollectionView>
-
-                </VerticalStackLayout>
-            </ScrollView>
-
-
-            <Button Text="Back" AutomationId="BackButton" Style="{StaticResource ReportsButtonStyle}" Command="{Binding BackButtonCommand}"/>
-
-        </VerticalStackLayout>
-    </ScrollView>
-</ContentPage>
\ No newline at end of file
+            <CollectionView.ItemsLayout>
+                <GridItemsLayout Orientation="Vertical" Span="1"
+                                 VerticalItemSpacing="0"
+                                 HorizontalItemSpacing="0"/>
+            </CollectionView.ItemsLayout>
+        </CollectionView>
+
+        <!-- Back tile -->
+        <Frame Grid.Row="3" Style="{StaticResource ActionTileStyle}"
+               BackgroundColor="{StaticResource MidGray}"
+               Margin="16,8">
+            <Frame.GestureRecognizers>
+                <TapGestureRecognizer Command="{Binding BackButtonCommand}"/>
+            </Frame.GestureRecognizers>
+            <Label Text="Back" Style="{StaticResource TileLabelStyle}" FontAttributes="Bold" AutomationId="BackButton"/>
+        </Frame>
+
+    </Grid>
+</ContentPage>
diff --git a/TransactionProcessor.Mobile/Pages/Support/SupportPage.xaml b/TransactionProcessor.Mobile/Pages/Support/SupportPage.xaml
index 858b6a53d..851cfd722 100644
--- a/TransactionProcessor.Mobile/Pages/Support/SupportPage.xaml
+++ b/TransactionProcessor.Mobile/Pages/Support/SupportPage.xaml
@@ -7,45 +7,59 @@
                                xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
                                Shell.NavBarIsVisible="False"
                                x:Name="Support">
-    <ScrollView>
-        <VerticalStackLayout Style="{DynamicResource Layout}">
+    <ScrollView BackgroundColor="{StaticResource pageBackgroundColor}">
+        <VerticalStackLayout Spacing="0">
 
-            <controls:TitleLabel Text="{Binding Title}" AutomationId="{Binding Title}" FontSize="20" HorizontalTextAlignment="Center"  VerticalOptions="End" FontAttributes="Bold" Padding="20,0,0,20"/>
-
-            <!--Main image-->
-            <Image Source="techsupport.jpg" VerticalOptions="Start" Aspect="AspectFit"/>
+            <!-- Header -->
+            <Frame Style="{StaticResource PageHeaderStyle}">
+                <Label Text="{Binding Title}" Style="{StaticResource HeaderTitleStyle}" AutomationId="{Binding Title}"/>
+            </Frame>
 
+            <!-- Support content -->
+            <VerticalStackLayout Padding="16,16,16,16" Spacing="12">
 
-            <Frame Style="{DynamicResource MainFrame}">
-                <VerticalStackLayout x:Name="SubLayout" Spacing="5">
+                <!-- App info card -->
+                <Frame Style="{StaticResource SectionCardStyle}">
+                    <VerticalStackLayout Spacing="8">
+                        <Label Text="App Information" FontSize="14" FontAttributes="Bold"
+                               TextColor="{StaticResource labelTextColor}"/>
+                        <Label Text="{Binding ApplicationName, Mode=OneTime}"
+                               TextColor="{StaticResource DarkGray}" FontSize="14"/>
+                        <Label Text="{Binding Platform, Mode=OneTime}"
+                               TextColor="{StaticResource DarkGray}" FontSize="14"/>
+                        <Label Text="{Binding NumberTransactionsStored, Mode=OneTime}"
+                               TextColor="{StaticResource DarkGray}" FontSize="14"/>
+                    </VerticalStackLayout>
+                </Frame>
 
-                    <Label Text="{Binding ApplicationName, Mode=OneTime}"
-                       HorizontalTextAlignment="Center"
-                       HorizontalOptions="Fill"/>
+                <!-- Support action tiles -->
+                <Grid ColumnDefinitions="*,*" ColumnSpacing="10">
+                    <Frame Grid.Column="0" Style="{StaticResource ActionTileStyle}"
+                           BackgroundColor="{StaticResource support}">
+                        <Frame.GestureRecognizers>
+                            <TapGestureRecognizer Command="{Binding UploadLogsCommand}"/>
+                        </Frame.GestureRecognizers>
+                        <Label Text="Upload Logs" Style="{StaticResource TileLabelStyle}" FontAttributes="Bold" AutomationId="UploadLogsButton"/>
+                    </Frame>
 
-                    <Label Text="{Binding Platform, Mode=OneTime}"
-                       VerticalOptions="Center"/>
+                    <Frame Grid.Column="1" Style="{StaticResource ActionTileStyle}"
+                           BackgroundColor="{StaticResource support}">
+                        <Frame.GestureRecognizers>
+                            <TapGestureRecognizer Command="{Binding ViewLogsCommand}"/>
+                        </Frame.GestureRecognizers>
+                        <Label Text="View Logs" Style="{StaticResource TileLabelStyle}" FontAttributes="Bold" AutomationId="ViewLogsButton"/>
+                    </Frame>
+                </Grid>
 
-                    <Label Text="{Binding NumberTransactionsStored, Mode=OneTime}"
-                       VerticalOptions="Center"/>
+                <Frame Style="{StaticResource ActionTileStyle}"
+                       BackgroundColor="{StaticResource MidGray}">
+                    <Frame.GestureRecognizers>
+                        <TapGestureRecognizer Command="{Binding BackButtonCommand}"/>
+                    </Frame.GestureRecognizers>
+                    <Label Text="Back" Style="{StaticResource TileLabelStyle}" FontAttributes="Bold" AutomationId="BackButton"/>
+                </Frame>
 
-                    <Button Text="Upload Logs" Style="{StaticResource StandardButton}" AutomationId="UploadLogsButton">
-                        <Button.Behaviors>
-                            <toolkit:EventToCommandBehavior
-                                EventName="Clicked"
-                                Command="{Binding UploadLogsCommand}" BindingContext="{Binding Source={x:Reference Support}, Path=BindingContext}" />
-                        </Button.Behaviors>
-                    </Button>
-                    <Button Text="View Logs" Style="{StaticResource StandardButton}" AutomationId="ViewLogsButton">
-                        <Button.Behaviors>
-                            <toolkit:EventToCommandBehavior
-                                EventName="Clicked"
-                                Command="{Binding ViewLogsCommand}" BindingContext="{Binding Source={x:Reference Support}, Path=BindingContext}" />
-                        </Button.Behaviors>
-                    </Button>
-                    <Button Text="Back" Style="{StaticResource StandardButton}" Command="{Binding BackButtonCommand}" AutomationId="BackButton"/>
-                </VerticalStackLayout>
-            </Frame>
+            </VerticalStackLayout>
         </VerticalStackLayout>
     </ScrollView>
-</common:NoBackWithoutLogoutPage>
\ No newline at end of file
+</common:NoBackWithoutLogoutPage>
diff --git a/TransactionProcessor.Mobile/Pages/Support/ViewLogsPage.xaml b/TransactionProcessor.Mobile/Pages/Support/ViewLogsPage.xaml
index 0f47fb33d..a5e09f1e4 100644
--- a/TransactionProcessor.Mobile/Pages/Support/ViewLogsPage.xaml
+++ b/TransactionProcessor.Mobile/Pages/Support/ViewLogsPage.xaml
@@ -1,25 +1,46 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="utf-8"?>
 <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              x:Class="TransactionProcessor.Mobile.Pages.Support.ViewLogsPage"
              xmlns:controls="clr-namespace:TransactionProcessor.Mobile.Controls"
              Shell.NavBarIsVisible="False">
-    <StackLayout Margin="20" Style="{DynamicResource Layout}">
-        <controls:TitleLabel Text="{Binding Title}" AutomationId="{Binding Title}" FontSize="20" HorizontalTextAlignment="Center"
-                                 VerticalOptions="End" FontAttributes="Bold" Padding="20,0,0,20"/>
-        <ListView ItemsSource="{Binding LogMessages}" HasUnevenRows="true" VerticalScrollBarVisibility="Always">
-                <ListView.ItemTemplate>
-                    <DataTemplate>
-                        <ViewCell>
-                            <StackLayout>
-                            <Label Text="{Binding Path=EntryDateTime, StringFormat='{0:dd/MM/yyyy hh:MM:ss}'}" FontAttributes="Bold" TextColor="{Binding TextColor}"/>
-                            <Label Text="{Binding LogLevel}" TextColor="{Binding TextColor}"/>
-                            <Label Text="{Binding Message}" LineBreakMode="WordWrap" TextColor="{Binding TextColor}"/>
-                            </StackLayout>
-                        </ViewCell>
-                    </DataTemplate>
-                </ListView.ItemTemplate>
-            </ListView>
-        <Button Text="Back" Style="{StaticResource StandardButton}" Command="{Binding BackButtonCommand}" AutomationId="BackButton"/>
-    </StackLayout>
-</ContentPage>
\ No newline at end of file
+    <Grid RowDefinitions="auto,*,auto" BackgroundColor="{StaticResource pageBackgroundColor}">
+
+        <!-- Header -->
+        <Frame Grid.Row="0" Style="{StaticResource PageHeaderStyle}">
+            <Label Text="{Binding Title}" Style="{StaticResource HeaderTitleStyle}" AutomationId="ViewLogs"/>
+        </Frame>
+
+        <!-- Log messages list -->
+        <ListView Grid.Row="1" ItemsSource="{Binding LogMessages}"
+                  HasUnevenRows="True" VerticalScrollBarVisibility="Always"
+                  Margin="16,8">
+            <ListView.ItemTemplate>
+                <DataTemplate>
+                    <ViewCell>
+                        <VerticalStackLayout Padding="8,6" Spacing="2">
+                            <Label Text="{Binding Path=EntryDateTime, StringFormat='{0:dd/MM/yyyy HH:mm:ss}'}"
+                                   FontAttributes="Bold" FontSize="12"
+                                   TextColor="{Binding TextColor}"/>
+                            <Label Text="{Binding LogLevel}" FontSize="11"
+                                   TextColor="{Binding TextColor}"/>
+                            <Label Text="{Binding Message}" LineBreakMode="WordWrap" FontSize="12"
+                                   TextColor="{Binding TextColor}"/>
+                        </VerticalStackLayout>
+                    </ViewCell>
+                </DataTemplate>
+            </ListView.ItemTemplate>
+        </ListView>
+
+        <!-- Back tile -->
+        <Frame Grid.Row="2" Style="{StaticResource ActionTileStyle}"
+               BackgroundColor="{StaticResource MidGray}"
+               Margin="16,8">
+            <Frame.GestureRecognizers>
+                <TapGestureRecognizer Command="{Binding BackButtonCommand}"/>
+            </Frame.GestureRecognizers>
+            <Label Text="Back" Style="{StaticResource TileLabelStyle}" FontAttributes="Bold" AutomationId="BackButton"/>
+        </Frame>
+
+    </Grid>
+</ContentPage>
diff --git a/TransactionProcessor.Mobile/Pages/Transactions/Admin/AdminPage.xaml b/TransactionProcessor.Mobile/Pages/Transactions/Admin/AdminPage.xaml
index 3b3886e3b..8076fe588 100644
--- a/TransactionProcessor.Mobile/Pages/Transactions/Admin/AdminPage.xaml
+++ b/TransactionProcessor.Mobile/Pages/Transactions/Admin/AdminPage.xaml
@@ -6,20 +6,36 @@
              xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
              Shell.NavBarIsVisible="False"
              x:Name="Admin">
-    <ScrollView>
-        <VerticalStackLayout Style="{DynamicResource Layout}">
-            <controls:TitleLabel Text="{Binding Title}" AutomationId="{Binding Title}" FontSize="20" HorizontalTextAlignment="Center"  VerticalOptions="End" FontAttributes="Bold" Padding="20,0,0,20"/>
-            <Frame Style="{DynamicResource MainFrame}">
-                <VerticalStackLayout Spacing="10">
-                    <Button AutomationId="ReconciliationButton" x:Name="ReconciliationButton" Text="Reconciliation" Style="{DynamicResource AdminButtonStyle}">
-                        <Button.Behaviors>
-                            <toolkit:EventToCommandBehavior
-                                EventName="Clicked"
-                                Command="{Binding ReconciliationCommand}" BindingContext="{Binding Source={x:Reference Admin}, Path=BindingContext}" />
-                        </Button.Behaviors>
-                    </Button>
-                </VerticalStackLayout>
+    <ScrollView BackgroundColor="{StaticResource pageBackgroundColor}">
+        <VerticalStackLayout Spacing="0">
+
+            <!-- Header -->
+            <Frame Style="{StaticResource PageHeaderStyle}" BackgroundColor="{StaticResource admin}">
+                <Label Text="{Binding Title}" Style="{StaticResource HeaderTitleStyle}" AutomationId="{Binding Title}"/>
             </Frame>
+
+            <VerticalStackLayout Padding="16,16,16,16" Spacing="10">
+
+                <!-- Action tiles row -->
+                <Grid ColumnDefinitions="*,*" ColumnSpacing="10">
+                    <Frame Grid.Column="0" Style="{StaticResource ActionTileStyle}"
+                           BackgroundColor="{StaticResource admin}">
+                        <Frame.GestureRecognizers>
+                            <TapGestureRecognizer Command="{Binding ReconciliationCommand}"/>
+                        </Frame.GestureRecognizers>
+                        <Label Text="Reconciliation" Style="{StaticResource TileLabelStyle}" FontAttributes="Bold" AutomationId="ReconciliationButton"/>
+                    </Frame>
+
+                    <Frame Grid.Column="1" Style="{StaticResource ActionTileStyle}"
+                           BackgroundColor="{StaticResource MidGray}">
+                        <Frame.GestureRecognizers>
+                            <TapGestureRecognizer Command="{Binding BackButtonCommand}"/>
+                        </Frame.GestureRecognizers>
+                        <Label Text="Back" Style="{StaticResource TileLabelStyle}" FontAttributes="Bold"/>
+                    </Frame>
+                </Grid>
+
+            </VerticalStackLayout>
         </VerticalStackLayout>
     </ScrollView>
-</ContentPage>
\ No newline at end of file
+</ContentPage>
diff --git a/TransactionProcessor.Mobile/Pages/Transactions/BillPayment/BillPaymentFailedPage.xaml b/TransactionProcessor.Mobile/Pages/Transactions/BillPayment/BillPaymentFailedPage.xaml
index ded937e65..04c901b5f 100644
--- a/TransactionProcessor.Mobile/Pages/Transactions/BillPayment/BillPaymentFailedPage.xaml
+++ b/TransactionProcessor.Mobile/Pages/Transactions/BillPayment/BillPaymentFailedPage.xaml
@@ -6,29 +6,42 @@
              xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
              Shell.NavBarIsVisible="False"
              x:Name="BillPaymentFailed">
-    <ScrollView>
-        <VerticalStackLayout x:Name="MainLayout" Style="{DynamicResource Layout}">
-            <controls:TitleLabel Text="{Binding Title}" AutomationId="{Binding Title}" FontSize="20" HorizontalTextAlignment="Center" VerticalOptions="End"
-               FontAttributes="Bold" Padding="20,0,0,20"/>
-            <Frame Style="{DynamicResource MainFrame}">
-                <VerticalStackLayout Spacing="10">
+    <ScrollView BackgroundColor="{StaticResource pageBackgroundColor}">
+        <VerticalStackLayout Spacing="0">
 
-                    <Image Source="paymentfailure.png" VerticalOptions="Start" Style="{DynamicResource PaymentImage}"/>
+            <!-- Header -->
+            <Frame Style="{StaticResource PageHeaderStyle}" BackgroundColor="{StaticResource admin}">
+                <Label Text="{Binding Title}" Style="{StaticResource HeaderTitleStyle}" AutomationId="{Binding Title}"/>
+            </Frame>
 
-                    <Label Margin="17,8"
-                       Text="Unfortunately, we could not process your bill payment, this may be for a variety of reasons.  If you wish you can retry the transaction."/>
+            <VerticalStackLayout Padding="16,24,16,16" Spacing="16">
 
-                    <Button x:Name="CancelButton" Grid.Row="5" Margin="0,16"
-                        Text="Cancel"
-                        Style="{DynamicResource BillPaymentButtonStyle}" AutomationId="CancelButton">
-                        <Button.Behaviors>
-                            <toolkit:EventToCommandBehavior
-                                EventName="Clicked"
-                                Command="{Binding CancelledCommand}" BindingContext="{Binding Source={x:Reference BillPaymentFailed}, Path=BindingContext}" />
-                        </Button.Behaviors>
-                    </Button>
-                </VerticalStackLayout>
-            </Frame>
+                <Frame Style="{StaticResource SectionCardStyle}">
+                    <VerticalStackLayout Spacing="12" HorizontalOptions="Center">
+                        <Image Source="paymentfailure.png" VerticalOptions="Start"
+                               HeightRequest="120" WidthRequest="120"
+                               HorizontalOptions="Center"/>
+                        <Label Text="Payment Failed"
+                               FontSize="20" FontAttributes="Bold"
+                               TextColor="{StaticResource admin}"
+                               HorizontalTextAlignment="Center"/>
+                        <Label Text="Unfortunately, we could not process your bill payment. If you wish you can retry the transaction."
+                               FontSize="14" TextColor="{StaticResource DarkGray}"
+                               HorizontalTextAlignment="Center"
+                               Margin="8,0"/>
+                    </VerticalStackLayout>
+                </Frame>
+
+                <!-- Action tile -->
+                <Frame Style="{StaticResource ActionTileStyle}"
+                       BackgroundColor="{StaticResource admin}">
+                    <Frame.GestureRecognizers>
+                        <TapGestureRecognizer Command="{Binding CancelledCommand}"/>
+                    </Frame.GestureRecognizers>
+                    <Label Text="Cancel" Style="{StaticResource TileLabelStyle}" FontAttributes="Bold" AutomationId="CancelButton"/>
+                </Frame>
+
+            </VerticalStackLayout>
         </VerticalStackLayout>
     </ScrollView>
-</ContentPage>
\ No newline at end of file
+</ContentPage>
diff --git a/TransactionProcessor.Mobile/Pages/Transactions/BillPayment/BillPaymentGetAccountPage.xaml b/TransactionProcessor.Mobile/Pages/Transactions/BillPayment/BillPaymentGetAccountPage.xaml
index d26a874d1..7dfc60a19 100644
--- a/TransactionProcessor.Mobile/Pages/Transactions/BillPayment/BillPaymentGetAccountPage.xaml
+++ b/TransactionProcessor.Mobile/Pages/Transactions/BillPayment/BillPaymentGetAccountPage.xaml
@@ -6,33 +6,53 @@
              xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
              Shell.NavBarIsVisible="False"
              x:Name="BillPaymentGetAccount">
-    <ScrollView>
-        <VerticalStackLayout x:Name="MainLayout" Style="{DynamicResource Layout}">
-            <controls:TitleLabel Text="{Binding Title}" AutomationId="{Binding Title}" FontSize="20" HorizontalTextAlignment="Center"  VerticalOptions="End" FontAttributes="Bold" Padding="20,0,0,20"/>
-            <Frame Style="{DynamicResource MainFrame}">
-                <VerticalStackLayout Spacing="10">
-                    <Entry x:Name="CustomerAccountNumberEntry"
-               Placeholder="Customer Account Number"
-               AutomationId="CustomerAccountNumberEntry"
-               Style="{DynamicResource CustomerAccountNumberEntryStyle}"
-               Text="{Binding CustomerAccountNumber}"
-               Keyboard="Numeric">
-                    </Entry>
-
-                    <Button x:Name="GetAccountButton" 
-                            Text="Get Account"
-                            Style="{DynamicResource BillPaymentButtonStyle}"
-                            AutomationId="GetAccountButton">
-                        <Button.Behaviors>
-                            <toolkit:EventToCommandBehavior
-                                EventName="Clicked"
-                                Command="{Binding GetAccountCommand}" BindingContext="{Binding Source={x:Reference BillPaymentGetAccount}, Path=BindingContext}" />
-                        </Button.Behaviors>
-                    </Button>
-                    <Button Text="Back" Style="{StaticResource BillPaymentButtonStyle}" Command="{Binding BackButtonCommand}"/>
-                </VerticalStackLayout>
-                
+    <ScrollView BackgroundColor="{StaticResource pageBackgroundColor}">
+        <VerticalStackLayout Spacing="0">
+
+            <!-- Header -->
+            <Frame Style="{StaticResource PageHeaderStyle}">
+                <Label Text="{Binding Title}" Style="{StaticResource HeaderTitleStyle}" AutomationId="GetCustomerAccount"/>
             </Frame>
+
+            <VerticalStackLayout Padding="16,16,16,16" Spacing="12">
+
+                <Frame Style="{StaticResource SectionCardStyle}">
+                    <VerticalStackLayout Spacing="12">
+
+                        <Label Text="Account Number" FontSize="13"
+                               TextColor="{StaticResource labelTextColor}" FontAttributes="Bold"/>
+                        <Frame Style="{StaticResource FormEntryStyle}">
+                            <Entry x:Name="CustomerAccountNumberEntry"
+                                   Placeholder="Customer Account Number"
+                                   AutomationId="CustomerAccountNumberEntry"
+                                   Style="{DynamicResource CustomerAccountNumberEntryStyle}"
+                                   Text="{Binding CustomerAccountNumber}"
+                                   Keyboard="Numeric"/>
+                        </Frame>
+
+                    </VerticalStackLayout>
+                </Frame>
+
+                <!-- Action tiles row -->
+                <Grid ColumnDefinitions="*,*" ColumnSpacing="10">
+                    <Frame Grid.Column="0" Style="{StaticResource ActionTileStyle}"
+                           BackgroundColor="{StaticResource billPayment}">
+                        <Frame.GestureRecognizers>
+                            <TapGestureRecognizer Command="{Binding GetAccountCommand}"/>
+                        </Frame.GestureRecognizers>
+                        <Label Text="Get Account" Style="{StaticResource TileLabelStyle}" FontAttributes="Bold" AutomationId="GetAccountButton"/>
+                    </Frame>
+
+                    <Frame Grid.Column="1" Style="{StaticResource ActionTileStyle}"
+                           BackgroundColor="{StaticResource MidGray}">
+                        <Frame.GestureRecognizers>
+                            <TapGestureRecognizer Command="{Binding BackButtonCommand}"/>
+                        </Frame.GestureRecognizers>
+                        <Label Text="Back" Style="{StaticResource TileLabelStyle}" FontAttributes="Bold"/>
+                    </Frame>
+                </Grid>
+
+            </VerticalStackLayout>
         </VerticalStackLayout>
     </ScrollView>
-</ContentPage>
\ No newline at end of file
+</ContentPage>
diff --git a/TransactionProcessor.Mobile/Pages/Transactions/BillPayment/BillPaymentGetMeterPage.xaml b/TransactionProcessor.Mobile/Pages/Transactions/BillPayment/BillPaymentGetMeterPage.xaml
index 31d223e35..3bc7812d4 100644
--- a/TransactionProcessor.Mobile/Pages/Transactions/BillPayment/BillPaymentGetMeterPage.xaml
+++ b/TransactionProcessor.Mobile/Pages/Transactions/BillPayment/BillPaymentGetMeterPage.xaml
@@ -6,34 +6,53 @@
              x:Class="TransactionProcessor.Mobile.Pages.Transactions.BillPayment.BillPaymentGetMeterPage"
              Shell.NavBarIsVisible="False"
              x:Name="BillPaymentGetMeter">
-    <ScrollView>
-        <VerticalStackLayout x:Name="MainLayout" Style="{DynamicResource Layout}">
-            <controls:TitleLabel Text="{Binding Title}" AutomationId="{Binding Title}" FontSize="20" HorizontalTextAlignment="Center"  VerticalOptions="End" FontAttributes="Bold" Padding="20,0,0,20"/>
-            <Frame Style="{DynamicResource MainFrame}">
-                <VerticalStackLayout Spacing="10">
-                    <Entry x:Name="MeterNumberEntry"
-               Placeholder="Meter Number"
-               AutomationId="MeterNumberEntry"
-               Style="{DynamicResource CustomerAccountNumberEntryStyle}"
-               Text="{Binding MeterNumber}"
-               Keyboard="Numeric">
-                    </Entry>
-
-                    <Button x:Name="GetMeterButton" 
-                            Text="Get Meter"
-                            Command="{Binding GetMeterCommand}"
-                            Style="{DynamicResource BillPaymentButtonStyle}"
-                            AutomationId="GetMeterButton">
-                        <Button.Behaviors>
-                            <toolkit:EventToCommandBehavior
-                                EventName="Clicked"
-                                Command="{Binding GetMeterCommand}" BindingContext="{Binding Source={x:Reference BillPaymentGetMeter}, Path=BindingContext}" />
-                        </Button.Behaviors>
-                    </Button>
-                    <Button Text="Back" Style="{StaticResource BillPaymentButtonStyle}" Command="{Binding BackButtonCommand}"/>
-                </VerticalStackLayout>
-                
+    <ScrollView BackgroundColor="{StaticResource pageBackgroundColor}">
+        <VerticalStackLayout Spacing="0">
+
+            <!-- Header -->
+            <Frame Style="{StaticResource PageHeaderStyle}">
+                <Label Text="{Binding Title}" Style="{StaticResource HeaderTitleStyle}" AutomationId="GetMeter"/>
             </Frame>
+
+            <VerticalStackLayout Padding="16,16,16,16" Spacing="12">
+
+                <Frame Style="{StaticResource SectionCardStyle}">
+                    <VerticalStackLayout Spacing="12">
+
+                        <Label Text="Meter Number" FontSize="13"
+                               TextColor="{StaticResource labelTextColor}" FontAttributes="Bold"/>
+                        <Frame Style="{StaticResource FormEntryStyle}">
+                            <Entry x:Name="MeterNumberEntry"
+                                   Placeholder="Meter Number"
+                                   AutomationId="MeterNumberEntry"
+                                   Style="{DynamicResource CustomerAccountNumberEntryStyle}"
+                                   Text="{Binding MeterNumber}"
+                                   Keyboard="Numeric"/>
+                        </Frame>
+
+                    </VerticalStackLayout>
+                </Frame>
+
+                <!-- Action tiles row -->
+                <Grid ColumnDefinitions="*,*" ColumnSpacing="10">
+                    <Frame Grid.Column="0" Style="{StaticResource ActionTileStyle}"
+                           BackgroundColor="{StaticResource billPayment}">
+                        <Frame.GestureRecognizers>
+                            <TapGestureRecognizer Command="{Binding GetMeterCommand}"/>
+                        </Frame.GestureRecognizers>
+                        <Label Text="Get Meter" Style="{StaticResource TileLabelStyle}" FontAttributes="Bold" AutomationId="GetMeterButton"/>
+                    </Frame>
+
+                    <Frame Grid.Column="1" Style="{StaticResource ActionTileStyle}"
+                           BackgroundColor="{StaticResource MidGray}">
+                        <Frame.GestureRecognizers>
+                            <TapGestureRecognizer Command="{Binding BackButtonCommand}"/>
+                        </Frame.GestureRecognizers>
+                        <Label Text="Back" Style="{StaticResource TileLabelStyle}" FontAttributes="Bold"/>
+                    </Frame>
+                </Grid>
+
+            </VerticalStackLayout>
         </VerticalStackLayout>
     </ScrollView>
-</ContentPage>
\ No newline at end of file
+</ContentPage>
diff --git a/TransactionProcessor.Mobile/Pages/Transactions/BillPayment/BillPaymentPayBillPage.xaml b/TransactionProcessor.Mobile/Pages/Transactions/BillPayment/BillPaymentPayBillPage.xaml
index 5d97c4d15..b024fbf0c 100644
--- a/TransactionProcessor.Mobile/Pages/Transactions/BillPayment/BillPaymentPayBillPage.xaml
+++ b/TransactionProcessor.Mobile/Pages/Transactions/BillPayment/BillPaymentPayBillPage.xaml
@@ -6,89 +6,117 @@
              xmlns:controls="clr-namespace:TransactionProcessor.Mobile.Controls"
              Shell.NavBarIsVisible="False"
              x:Name="BillPaymentPayBill">
-    <ScrollView>
-        <VerticalStackLayout x:Name="MainLayout" Style="{DynamicResource Layout}">
-            <controls:TitleLabel Text="{Binding Title}" AutomationId="{Binding Title}" FontSize="20" HorizontalTextAlignment="Center"
-                                     VerticalOptions="End" FontAttributes="Bold" Padding="20,0,0,20"/>
-            <Frame Style="{DynamicResource MainFrame}" IsVisible="{Binding IsPostPayVisible}">
-                <VerticalStackLayout x:Name="PostPayLayout">
-                    <Label Text="Bill Details" HorizontalTextAlignment="Center"
-                           HorizontalOptions="Fill" FontAttributes="Bold" FontSize="20"
-                           Margin="10,0,0,10" AutomationId="PrimaryAddressLabel"/>
-                    
-                    <Label Text="{Binding BillDetails.AccountNumber, StringFormat='Account Number: {0}'}"
-                           HorizontalTextAlignment="Start"
-                           HorizontalOptions="Fill" AutomationId="AccountNumber"/>
-                    <Label Text="{Binding BillDetails.AccountName, StringFormat='Account Holder: {0}'}"
-                           HorizontalTextAlignment="Start"
-                           HorizontalOptions="Fill" AutomationId="AccountName"/>
-                    <Label Text="{Binding BillDetails.Balance, StringFormat='Balance: {0} KES'}"
-                           HorizontalTextAlignment="Start"
-                           HorizontalOptions="Fill" AutomationId="Balance"/>
-                    <Label Text="{Binding BillDetails.DueDate, StringFormat='Due Date: {0}'}"
-                           HorizontalTextAlignment="Start"
-                           HorizontalOptions="Fill" AutomationId="DueDate"/>
-                    <Entry x:Name="CustomerMobileNumberEntry"
-                           Placeholder="Customer Mobile Number"
-                           AutomationId="CustomerMobileNumberEntry"
-                           Style="{DynamicResource CustomerMobileNumberEntryStyle}"
-                           Text="{Binding CustomerMobileNumber}"
-                           Keyboard="Numeric">
-                        <Entry.Behaviors>
-                            <behaviors:EventToCommandBehavior             
-                                EventName="Completed"  
-                                Command="{Binding CustomerMobileNumberEntryCompletedCommand}" />
-                        </Entry.Behaviors>
-                    </Entry>
+    <ScrollView BackgroundColor="{StaticResource pageBackgroundColor}">
+        <VerticalStackLayout Spacing="0">
 
-                    <Entry x:Name="PostPaymentAmountEntry"
-                           Placeholder="100"
-                           AutomationId="PostPaymentAmountEntry"
-                           Style="{DynamicResource AmountEntryStyle}"
-                           Text="{Binding PaymentAmount}"
-                           Keyboard="Numeric">
-                        <Entry.Behaviors>
-                            <behaviors:EventToCommandBehavior             
-                                EventName="Completed"  
-                                Command="{Binding PaymentAmountEntryCompletedCommand}" />
-                        </Entry.Behaviors>
-                    </Entry>
-                </VerticalStackLayout>
+            <!-- Header -->
+            <Frame Style="{StaticResource PageHeaderStyle}">
+                <Label Text="{Binding Title}" Style="{StaticResource HeaderTitleStyle}" AutomationId="MakeBillPayment"/>
             </Frame>
-            <Frame Style="{DynamicResource MainFrame}"  IsVisible="{Binding IsPrePayVisible}">
-                <VerticalStackLayout x:Name="PrePayLayout">
-                    <Label Text="Meter Details" HorizontalTextAlignment="Center"
-                           HorizontalOptions="Fill" FontAttributes="Bold" FontSize="20"
-                           Margin="10,0,0,10" AutomationId="PrimaryAddressLabel"/>
 
-                    <Label Text="{Binding MeterDetails.MeterNumber, StringFormat='Meter Number: {0}'}"
-                           HorizontalTextAlignment="Start"
-                           HorizontalOptions="Fill" AutomationId="MeterNumber"/>
+            <VerticalStackLayout Padding="16,16,16,16" Spacing="12">
 
-                    <Entry x:Name="PrePaymentAmountEntry"
-                           Placeholder="100"
-                           AutomationId="PrePaymentAmountEntry"
-                           Style="{DynamicResource AmountEntryStyle}"
-                           Text="{Binding PaymentAmount}"
-                           Keyboard="Numeric">
-                        <Entry.Behaviors>
-                            <behaviors:EventToCommandBehavior             
-                                EventName="Completed"  
-                                Command="{Binding PaymentAmountEntryCompletedCommand}" />
-                        </Entry.Behaviors>
-                    </Entry>
-                </VerticalStackLayout>
-            </Frame>
+                <!-- Post Pay section -->
+                <Frame Style="{StaticResource SectionCardStyle}" IsVisible="{Binding IsPostPayVisible}">
+                    <VerticalStackLayout x:Name="PostPayLayout" Spacing="8">
+                        <Label Text="Bill Details" FontSize="16" FontAttributes="Bold"
+                               TextColor="{StaticResource labelTextColor}" Margin="0,0,0,8"
+                               AutomationId="PrimaryAddressLabel"/>
+
+                        <Label Text="{Binding BillDetails.AccountNumber, StringFormat='Account Number: {0}'}"
+                               TextColor="{StaticResource DarkGray}" AutomationId="AccountNumber"/>
+                        <Label Text="{Binding BillDetails.AccountName, StringFormat='Account Holder: {0}'}"
+                               TextColor="{StaticResource DarkGray}" AutomationId="AccountName"/>
+                        <Label Text="{Binding BillDetails.Balance, StringFormat='Balance: {0} KES'}"
+                               TextColor="{StaticResource DarkGray}" AutomationId="Balance"/>
+                        <Label Text="{Binding BillDetails.DueDate, StringFormat='Due Date: {0}'}"
+                               TextColor="{StaticResource DarkGray}" AutomationId="DueDate"/>
+
+                        <Label Text="Mobile Number" FontSize="13"
+                               TextColor="{StaticResource labelTextColor}" FontAttributes="Bold" Margin="0,8,0,0"/>
+                        <Frame Style="{StaticResource FormEntryStyle}">
+                            <Entry x:Name="CustomerMobileNumberEntry"
+                                   Placeholder="Customer Mobile Number"
+                                   AutomationId="CustomerMobileNumberEntry"
+                                   Style="{DynamicResource CustomerMobileNumberEntryStyle}"
+                                   Text="{Binding CustomerMobileNumber}"
+                                   Keyboard="Numeric">
+                                <Entry.Behaviors>
+                                    <behaviors:EventToCommandBehavior
+                                        EventName="Completed"
+                                        Command="{Binding CustomerMobileNumberEntryCompletedCommand}"/>
+                                </Entry.Behaviors>
+                            </Entry>
+                        </Frame>
+
+                        <Label Text="Payment Amount" FontSize="13"
+                               TextColor="{StaticResource labelTextColor}" FontAttributes="Bold"/>
+                        <Frame Style="{StaticResource FormEntryStyle}">
+                            <Entry x:Name="PostPaymentAmountEntry"
+                                   Placeholder="100"
+                                   AutomationId="PostPaymentAmountEntry"
+                                   Style="{DynamicResource AmountEntryStyle}"
+                                   Text="{Binding PaymentAmount}"
+                                   Keyboard="Numeric">
+                                <Entry.Behaviors>
+                                    <behaviors:EventToCommandBehavior
+                                        EventName="Completed"
+                                        Command="{Binding PaymentAmountEntryCompletedCommand}"/>
+                                </Entry.Behaviors>
+                            </Entry>
+                        </Frame>
+                    </VerticalStackLayout>
+                </Frame>
+
+                <!-- Pre Pay section -->
+                <Frame Style="{StaticResource SectionCardStyle}" IsVisible="{Binding IsPrePayVisible}">
+                    <VerticalStackLayout x:Name="PrePayLayout" Spacing="8">
+                        <Label Text="Meter Details" FontSize="16" FontAttributes="Bold"
+                               TextColor="{StaticResource labelTextColor}" Margin="0,0,0,8"
+                               AutomationId="PrimaryAddressLabel"/>
+
+                        <Label Text="{Binding MeterDetails.MeterNumber, StringFormat='Meter Number: {0}'}"
+                               TextColor="{StaticResource DarkGray}" AutomationId="MeterNumber"/>
+
+                        <Label Text="Payment Amount" FontSize="13"
+                               TextColor="{StaticResource labelTextColor}" FontAttributes="Bold" Margin="0,8,0,0"/>
+                        <Frame Style="{StaticResource FormEntryStyle}">
+                            <Entry x:Name="PrePaymentAmountEntry"
+                                   Placeholder="100"
+                                   AutomationId="PrePaymentAmountEntry"
+                                   Style="{DynamicResource AmountEntryStyle}"
+                                   Text="{Binding PaymentAmount}"
+                                   Keyboard="Numeric">
+                                <Entry.Behaviors>
+                                    <behaviors:EventToCommandBehavior
+                                        EventName="Completed"
+                                        Command="{Binding PaymentAmountEntryCompletedCommand}"/>
+                                </Entry.Behaviors>
+                            </Entry>
+                        </Frame>
+                    </VerticalStackLayout>
+                </Frame>
+
+                <!-- Action tiles row -->
+                <Grid ColumnDefinitions="*,*" ColumnSpacing="10">
+                    <Frame Grid.Column="0" Style="{StaticResource ActionTileStyle}"
+                           BackgroundColor="{StaticResource billPayment}">
+                        <Frame.GestureRecognizers>
+                            <TapGestureRecognizer Command="{Binding MakeBillPaymentCommand}"/>
+                        </Frame.GestureRecognizers>
+                        <Label Text="Make Payment" Style="{StaticResource TileLabelStyle}" FontAttributes="Bold" AutomationId="MakePaymentButton"/>
+                    </Frame>
+
+                    <Frame Grid.Column="1" Style="{StaticResource ActionTileStyle}"
+                           BackgroundColor="{StaticResource MidGray}">
+                        <Frame.GestureRecognizers>
+                            <TapGestureRecognizer Command="{Binding BackButtonCommand}"/>
+                        </Frame.GestureRecognizers>
+                        <Label Text="Back" Style="{StaticResource TileLabelStyle}" FontAttributes="Bold"/>
+                    </Frame>
+                </Grid>
 
-            <Button x:Name="MakePaymentButton" Text="Make Payment" Style="{DynamicResource BillPaymentButtonStyle}" AutomationId="MakePaymentButton">
-                <Button.Behaviors>
-                    <behaviors:EventToCommandBehavior
-                        EventName="Clicked"
-                        Command="{Binding MakeBillPaymentCommand}" BindingContext="{Binding Source={x:Reference BillPaymentPayBill}, Path=BindingContext}" />
-                </Button.Behaviors>
-            </Button>
-            <Button Text="Back" Style="{StaticResource BillPaymentButtonStyle}"
-                            Command="{Binding BackButtonCommand}"/>
+            </VerticalStackLayout>
         </VerticalStackLayout>
     </ScrollView>
-</ContentPage>
\ No newline at end of file
+</ContentPage>
diff --git a/TransactionProcessor.Mobile/Pages/Transactions/BillPayment/BillPaymentPayBillPage.xaml.cs b/TransactionProcessor.Mobile/Pages/Transactions/BillPayment/BillPaymentPayBillPage.xaml.cs
index 56d64cd9d..ae15c898b 100644
--- a/TransactionProcessor.Mobile/Pages/Transactions/BillPayment/BillPaymentPayBillPage.xaml.cs
+++ b/TransactionProcessor.Mobile/Pages/Transactions/BillPayment/BillPaymentPayBillPage.xaml.cs
@@ -16,7 +16,6 @@ public BillPaymentPayBillPage(BillPaymentPayBillPageViewModel vm)
                                                   };
         vm.OnPaymentAmountEntryCompleted = () =>
                                                   {
-                                                      this.MakePaymentButton.Focus();
                                                   };
     }
     
diff --git a/TransactionProcessor.Mobile/Pages/Transactions/BillPayment/BillPaymentSelectOperatorPage.xaml b/TransactionProcessor.Mobile/Pages/Transactions/BillPayment/BillPaymentSelectOperatorPage.xaml
index dc2254b32..a08105feb 100644
--- a/TransactionProcessor.Mobile/Pages/Transactions/BillPayment/BillPaymentSelectOperatorPage.xaml
+++ b/TransactionProcessor.Mobile/Pages/Transactions/BillPayment/BillPaymentSelectOperatorPage.xaml
@@ -4,14 +4,18 @@
              x:Class="TransactionProcessor.Mobile.Pages.Transactions.BillPayment.BillPaymentSelectOperatorPage"
              xmlns:controls="clr-namespace:TransactionProcessor.Mobile.Controls"
              Shell.NavBarIsVisible="False">
-    <ScrollView>
-        <VerticalStackLayout x:Name="MainLayout" Style="{DynamicResource Layout}">
-            <controls:TitleLabel Text="{Binding Title}" AutomationId="{Binding Title}" FontSize="20" HorizontalTextAlignment="Center" VerticalOptions="End"
-               FontAttributes="Bold" Padding="20,0,0,20"/>
-            <Frame Style="{DynamicResource MainFrame}">
-                <VerticalStackLayout Spacing="10" x:Name="OperatorList">
-                </VerticalStackLayout>
+    <ScrollView BackgroundColor="{StaticResource pageBackgroundColor}">
+        <VerticalStackLayout Spacing="0">
+
+            <!-- Header -->
+            <Frame Style="{StaticResource PageHeaderStyle}">
+                <Label Text="{Binding Title}" Style="{StaticResource HeaderTitleStyle}" AutomationId="SelectanOperator"/>
             </Frame>
+
+            <VerticalStackLayout Padding="16,16,16,16" Spacing="10">
+                <Grid x:Name="OperatorList" ColumnDefinitions="*,*" ColumnSpacing="10" RowSpacing="10"/>
+            </VerticalStackLayout>
+
         </VerticalStackLayout>
     </ScrollView>
-</ContentPage>
\ No newline at end of file
+</ContentPage>
diff --git a/TransactionProcessor.Mobile/Pages/Transactions/BillPayment/BillPaymentSelectOperatorPage.xaml.cs b/TransactionProcessor.Mobile/Pages/Transactions/BillPayment/BillPaymentSelectOperatorPage.xaml.cs
index e5aa1e577..230eb7a6c 100644
--- a/TransactionProcessor.Mobile/Pages/Transactions/BillPayment/BillPaymentSelectOperatorPage.xaml.cs
+++ b/TransactionProcessor.Mobile/Pages/Transactions/BillPayment/BillPaymentSelectOperatorPage.xaml.cs
@@ -9,9 +9,9 @@ public partial class BillPaymentSelectOperatorPage : ContentPage
 {
     private BillPaymentSelectOperatorPageViewModel viewModel => this.BindingContext as BillPaymentSelectOperatorPageViewModel;
 
-	public BillPaymentSelectOperatorPage(BillPaymentSelectOperatorPageViewModel vm)
-	{
-		this.InitializeComponent();
+public BillPaymentSelectOperatorPage(BillPaymentSelectOperatorPageViewModel vm)
+{
+this.InitializeComponent();
         this.BindingContext = vm;
     }
 
@@ -25,58 +25,75 @@ protected override async void OnAppearing()
     private void LoadOperators(BillPaymentSelectOperatorPageViewModel viewModel)
     {
         this.OperatorList.Children.Clear();
-        
+        this.OperatorList.RowDefinitions.Clear();
+
+        var tiles = new List<Frame>();
         Int32 rowCount = 0;
         foreach (ContractOperatorModel modelOperator in viewModel.Operators)
         {
-            Button button = new Button
-                            {
-                                Text = modelOperator.OperatorName,
-                                HorizontalOptions = LayoutOptions.FillAndExpand,
-                                AutomationId = modelOperator.OperatorName,
-                            };
-            button.SetDynamicResource(VisualElement.StyleProperty, "BillPaymentButtonStyle");
-            
-            Binding commandParameter = new Binding { Source = new ItemSelected<ContractOperatorModel>() { SelectedItem = modelOperator, SelectedItemIndex = rowCount } };
-
-            Binding command = new Binding("OperatorSelectedCommand", source: this.viewModel);
-
-            // Create the behavior and bind it to the command
-            EventToCommandBehavior behavior = new EventToCommandBehavior
+            Frame tile = this.CreateTile(modelOperator.OperatorName, (Color)Application.Current.Resources["billPayment"], modelOperator.OperatorName.Replace(" ", ""));
+            TapGestureRecognizer tap = new TapGestureRecognizer
             {
-                EventName = "Clicked"
+                Command = new Command(() => viewModel.OperatorSelectedCommand.Execute(
+                    new ItemSelected<ContractOperatorModel> { SelectedItem = modelOperator, SelectedItemIndex = rowCount }))
             };
-            behavior.SetBinding(EventToCommandBehavior.CommandProperty, command);
-            behavior.SetBinding(EventToCommandBehavior.CommandParameterProperty, commandParameter);
-
-            // Attach the behavior to the button
-            button.Behaviors.Add(behavior);
-
-            this.OperatorList.Add(button);
-
+            tile.GestureRecognizers.Add(tap);
+            tiles.Add(tile);
             rowCount++;
         }
-        this.OperatorList.Add(this.AddBackButton());
-        
-    }
 
-    private Button AddBackButton()
-    {
-        Button button = new Button
-                        {
-                            Text = "Back",
-                            HorizontalOptions = LayoutOptions.FillAndExpand,
-                            AutomationId = "BackButton",
-                        };
-        button.SetDynamicResource(VisualElement.StyleProperty, "BillPaymentButtonStyle");
+        int row = 0;
+        for (int i = 0; i < tiles.Count; i += 2)
+        {
+            this.OperatorList.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
+            Grid.SetRow(tiles[i], row);
+            Grid.SetColumn(tiles[i], 0);
+            this.OperatorList.Children.Add(tiles[i]);
+            if (i + 1 < tiles.Count)
+            {
+                Grid.SetRow(tiles[i + 1], row);
+                Grid.SetColumn(tiles[i + 1], 1);
+                this.OperatorList.Children.Add(tiles[i + 1]);
+            }
+            row++;
+        }
 
-        Binding backButtonCommand = new Binding
-                                    {
-                                        Source = this.viewModel.BackButtonCommand
-                                    };
+        Frame backTile = this.CreateBackTile(viewModel.BackButtonCommand);
+        this.OperatorList.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
+        Grid.SetRow(backTile, row);
+        Grid.SetColumn(backTile, 0);
+        Grid.SetColumnSpan(backTile, 2);
+        this.OperatorList.Children.Add(backTile);
+    }
 
-        button.SetBinding(Button.CommandProperty, backButtonCommand);
+    private Frame CreateTile(string text, Color backgroundColor, string automationId)
+    {
+        return new Frame
+        {
+            CornerRadius = 16,
+            HasShadow = true,
+            Padding = new Thickness(12),
+            HeightRequest = 100,
+            BackgroundColor = backgroundColor,
+            BorderColor = Colors.Transparent,
+            HorizontalOptions = LayoutOptions.FillAndExpand,
+            Content = new Label
+            {
+                Text = text,
+                TextColor = Colors.White,
+                FontAttributes = FontAttributes.Bold,
+                FontSize = 16,
+                HorizontalTextAlignment = TextAlignment.Center,
+                VerticalTextAlignment = TextAlignment.Center,
+                AutomationId = automationId
+            }
+        };
+    }
 
-        return button;
+    private Frame CreateBackTile(System.Windows.Input.ICommand command)
+    {
+        Frame frame = this.CreateTile("Back", (Color)Application.Current.Resources["MidGray"], "BackButton");
+        frame.GestureRecognizers.Add(new TapGestureRecognizer { Command = command });
+        return frame;
     }
-}
\ No newline at end of file
+}
diff --git a/TransactionProcessor.Mobile/Pages/Transactions/BillPayment/BillPaymentSelectProductPage.xaml b/TransactionProcessor.Mobile/Pages/Transactions/BillPayment/BillPaymentSelectProductPage.xaml
index 207ee6f72..3730ff331 100644
--- a/TransactionProcessor.Mobile/Pages/Transactions/BillPayment/BillPaymentSelectProductPage.xaml
+++ b/TransactionProcessor.Mobile/Pages/Transactions/BillPayment/BillPaymentSelectProductPage.xaml
@@ -1,17 +1,21 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
-             xmlns:controls="clr-namespace:TransactionProcessor.Mobile.Controls"
              x:Class="TransactionProcessor.Mobile.Pages.Transactions.BillPayment.BillPaymentSelectProductPage"
+             xmlns:controls="clr-namespace:TransactionProcessor.Mobile.Controls"
              Shell.NavBarIsVisible="False">
-    <ScrollView>
-        <VerticalStackLayout x:Name="MainLayout" Style="{DynamicResource Layout}">
-            <controls:TitleLabel Text="{Binding Title}" AutomationId="{Binding Title}" FontSize="20" HorizontalTextAlignment="Center" VerticalOptions="End"
-               FontAttributes="Bold" Padding="20,0,0,20"/>
-            <Frame Style="{DynamicResource MainFrame}">
-                <VerticalStackLayout Spacing="10" x:Name="ProductsList">
-                </VerticalStackLayout>
+    <ScrollView BackgroundColor="{StaticResource pageBackgroundColor}">
+        <VerticalStackLayout Spacing="0">
+
+            <!-- Header -->
+            <Frame Style="{StaticResource PageHeaderStyle}">
+                <Label Text="{Binding Title}" Style="{StaticResource HeaderTitleStyle}" AutomationId="SelectaProduct"/>
             </Frame>
+
+            <VerticalStackLayout Padding="16,16,16,16" Spacing="10">
+                <Grid x:Name="ProductsList" ColumnDefinitions="*,*" ColumnSpacing="10" RowSpacing="10"/>
+            </VerticalStackLayout>
+
         </VerticalStackLayout>
     </ScrollView>
-</ContentPage>
\ No newline at end of file
+</ContentPage>
diff --git a/TransactionProcessor.Mobile/Pages/Transactions/BillPayment/BillPaymentSelectProductPage.xaml.cs b/TransactionProcessor.Mobile/Pages/Transactions/BillPayment/BillPaymentSelectProductPage.xaml.cs
index 79fd14f3a..0de392e55 100644
--- a/TransactionProcessor.Mobile/Pages/Transactions/BillPayment/BillPaymentSelectProductPage.xaml.cs
+++ b/TransactionProcessor.Mobile/Pages/Transactions/BillPayment/BillPaymentSelectProductPage.xaml.cs
@@ -9,9 +9,9 @@ public partial class BillPaymentSelectProductPage : ContentPage
 {
     private BillPaymentSelectProductPageViewModel viewModel => this.BindingContext as BillPaymentSelectProductPageViewModel;
 
-	public BillPaymentSelectProductPage(BillPaymentSelectProductPageViewModel vm)
-	{
-		this.InitializeComponent();
+public BillPaymentSelectProductPage(BillPaymentSelectProductPageViewModel vm)
+{
+this.InitializeComponent();
         this.BindingContext = vm;
     }
 
@@ -25,57 +25,75 @@ protected override async void OnAppearing()
     private void LoadProducts(BillPaymentSelectProductPageViewModel viewModel)
     {
         this.ProductsList.Children.Clear();
+        this.ProductsList.RowDefinitions.Clear();
 
+        var tiles = new List<Frame>();
         Int32 rowCount = 0;
         foreach (ContractProductModel modelProduct in viewModel.Products)
         {
-            Button button = new Button
+            Frame tile = this.CreateTile(modelProduct.ProductDisplayText, (Color)Application.Current.Resources["billPayment"], modelProduct.ProductDisplayText.Replace(" ", ""));
+            TapGestureRecognizer tap = new TapGestureRecognizer
             {
-                                  Text = modelProduct.ProductDisplayText,
-                                  HorizontalOptions = LayoutOptions.FillAndExpand,
-                                  AutomationId = modelProduct.ProductDisplayText,
+                Command = new Command(() => viewModel.ProductSelectedCommand.Execute(
+                    new ItemSelected<ContractProductModel> { SelectedItem = modelProduct, SelectedItemIndex = rowCount }))
             };
-            button.SetDynamicResource(VisualElement.StyleProperty, "BillPaymentButtonStyle");
-            
-            Binding commandParameter = new Binding { Source = new ItemSelected<ContractProductModel>() { SelectedItem = modelProduct, SelectedItemIndex = rowCount } };
-
-            Binding command = new Binding("ProductSelectedCommand", source: this.viewModel);
+            tile.GestureRecognizers.Add(tap);
+            tiles.Add(tile);
+            rowCount++;
+        }
 
-            // Create the behavior and bind it to the command
-            EventToCommandBehavior behavior = new EventToCommandBehavior
+        int row = 0;
+        for (int i = 0; i < tiles.Count; i += 2)
+        {
+            this.ProductsList.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
+            Grid.SetRow(tiles[i], row);
+            Grid.SetColumn(tiles[i], 0);
+            this.ProductsList.Children.Add(tiles[i]);
+            if (i + 1 < tiles.Count)
             {
-                EventName = "Clicked"
-            };
-            behavior.SetBinding(EventToCommandBehavior.CommandProperty, command);
-            behavior.SetBinding(EventToCommandBehavior.CommandParameterProperty, commandParameter);
-
-            // Attach the behavior to the button
-            button.Behaviors.Add(behavior);
-
-            this.ProductsList.Add(button);
-
-            rowCount++;
+                Grid.SetRow(tiles[i + 1], row);
+                Grid.SetColumn(tiles[i + 1], 1);
+                this.ProductsList.Children.Add(tiles[i + 1]);
+            }
+            row++;
         }
-        this.ProductsList.Add(this.AddBackButton());
+
+        Frame backTile = this.CreateBackTile(viewModel.BackButtonCommand);
+        this.ProductsList.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
+        Grid.SetRow(backTile, row);
+        Grid.SetColumn(backTile, 0);
+        Grid.SetColumnSpan(backTile, 2);
+        this.ProductsList.Children.Add(backTile);
     }
 
-    private Button AddBackButton()
+    private Frame CreateTile(string text, Color backgroundColor, string automationId)
     {
-        Button button = new Button
-                        {
-                            Text = "Back",
-                            HorizontalOptions = LayoutOptions.FillAndExpand,
-                            AutomationId = "BackButton",
-                        };
-        button.SetDynamicResource(VisualElement.StyleProperty, "BillPaymentButtonStyle");
-
-        Binding backButtonCommand = new Binding
-                                    {
-                                        Source = this.viewModel.BackButtonCommand
-                                    };
-
-        button.SetBinding(Button.CommandProperty, backButtonCommand);
+        return new Frame
+        {
+            CornerRadius = 16,
+            HasShadow = true,
+            Padding = new Thickness(12),
+            HeightRequest = 100,
+            BackgroundColor = backgroundColor,
+            BorderColor = Colors.Transparent,
+            HorizontalOptions = LayoutOptions.FillAndExpand,
+            Content = new Label
+            {
+                Text = text,
+                TextColor = Colors.White,
+                FontAttributes = FontAttributes.Bold,
+                FontSize = 16,
+                HorizontalTextAlignment = TextAlignment.Center,
+                VerticalTextAlignment = TextAlignment.Center,
+                AutomationId = automationId
+            }
+        };
+    }
 
-        return button;
+    private Frame CreateBackTile(System.Windows.Input.ICommand command)
+    {
+        Frame frame = this.CreateTile("Back", (Color)Application.Current.Resources["MidGray"], "BackButton");
+        frame.GestureRecognizers.Add(new TapGestureRecognizer { Command = command });
+        return frame;
     }
-}
\ No newline at end of file
+}
diff --git a/TransactionProcessor.Mobile/Pages/Transactions/BillPayment/BillPaymentSuccessPage.xaml b/TransactionProcessor.Mobile/Pages/Transactions/BillPayment/BillPaymentSuccessPage.xaml
index f8ca3035b..89b07b9b5 100644
--- a/TransactionProcessor.Mobile/Pages/Transactions/BillPayment/BillPaymentSuccessPage.xaml
+++ b/TransactionProcessor.Mobile/Pages/Transactions/BillPayment/BillPaymentSuccessPage.xaml
@@ -6,29 +6,52 @@
              x:Class="TransactionProcessor.Mobile.Pages.Transactions.BillPayment.BillPaymentSuccessPage"
              Shell.NavBarIsVisible="False"
              x:Name="BillPaymentSuccess">
-    <ScrollView>
-        <VerticalStackLayout x:Name="MainLayout" Style="{DynamicResource Layout}">
-            <controls:TitleLabel Text="{Binding Title}" AutomationId="{Binding Title}" FontSize="20" HorizontalTextAlignment="Center" VerticalOptions="End"
-               FontAttributes="Bold" Padding="20,0,0,20"/>
-            <Frame Style="{DynamicResource MainFrame}">
-                <VerticalStackLayout Spacing="10">
+    <ScrollView BackgroundColor="{StaticResource pageBackgroundColor}">
+        <VerticalStackLayout Spacing="0">
 
-                    <Image Source="paymentsuccess.png" VerticalOptions="Start" Style="{DynamicResource PaymentImage}"/>
+            <!-- Header -->
+            <Frame Style="{StaticResource PageHeaderStyle}" BackgroundColor="{StaticResource successGreen}">
+                <Label Text="{Binding Title}" Style="{StaticResource HeaderTitleStyle}" AutomationId="BillPaymentSuccessful"/>
+            </Frame>
 
-                    <!--  Payment description label  -->
-                    <Label Margin="17,8" Text="Thank you for your bill payment. An automated payment receipt will be sent to your email entered."/>
+            <VerticalStackLayout Padding="16,24,16,16" Spacing="16">
 
-                    <Button x:Name="CompleteButton" Margin="0,16" Text="Complete"
-                        Style="{DynamicResource BillPaymentButtonStyle}" AutomationId="CompleteButton">
-                        <Button.Behaviors>
-                            <toolkit:EventToCommandBehavior
-                                EventName="Clicked"
-                                Command="{Binding CompletedCommand}" BindingContext="{Binding Source={x:Reference BillPaymentSuccess}, Path=BindingContext}" />
-                        </Button.Behaviors>
-                    </Button>
+                <Frame Style="{StaticResource SectionCardStyle}">
+                    <VerticalStackLayout Spacing="12" HorizontalOptions="Center">
+                        <Image Source="paymentsuccess.png" VerticalOptions="Start"
+                               HeightRequest="120" WidthRequest="120"
+                               HorizontalOptions="Center"/>
+                        <Label Text="Payment Successful!"
+                               FontSize="20" FontAttributes="Bold"
+                               TextColor="{StaticResource successGreen}"
+                               HorizontalTextAlignment="Center"/>
+                        <Label Text="Thank you for your bill payment. An automated payment receipt will be sent to your email address."
+                               FontSize="14" TextColor="{StaticResource DarkGray}"
+                               HorizontalTextAlignment="Center"
+                               Margin="8,0"/>
+                    </VerticalStackLayout>
+                </Frame>
 
-                </VerticalStackLayout>
-            </Frame>
+                <!-- Action tiles row -->
+                <Grid ColumnDefinitions="*,*" ColumnSpacing="10">
+                    <Frame Grid.Column="0" Style="{StaticResource ActionTileStyle}"
+                           BackgroundColor="{StaticResource successGreen}">
+                        <Frame.GestureRecognizers>
+                            <TapGestureRecognizer Command="{Binding CompletedCommand}"/>
+                        </Frame.GestureRecognizers>
+                        <Label Text="Complete" Style="{StaticResource TileLabelStyle}" FontAttributes="Bold" AutomationId="CompleteButton"/>
+                    </Frame>
+
+                    <Frame Grid.Column="1" Style="{StaticResource ActionTileStyle}"
+                           BackgroundColor="{StaticResource MidGray}">
+                        <Frame.GestureRecognizers>
+                            <TapGestureRecognizer Command="{Binding BackButtonCommand}"/>
+                        </Frame.GestureRecognizers>
+                        <Label Text="Back" Style="{StaticResource TileLabelStyle}" FontAttributes="Bold"/>
+                    </Frame>
+                </Grid>
+
+            </VerticalStackLayout>
         </VerticalStackLayout>
     </ScrollView>
-</ContentPage>
\ No newline at end of file
+</ContentPage>
diff --git a/TransactionProcessor.Mobile/Pages/Transactions/MobileTopup/MobileTopupFailedPage.xaml b/TransactionProcessor.Mobile/Pages/Transactions/MobileTopup/MobileTopupFailedPage.xaml
index 1b84bf956..56caed5d8 100644
--- a/TransactionProcessor.Mobile/Pages/Transactions/MobileTopup/MobileTopupFailedPage.xaml
+++ b/TransactionProcessor.Mobile/Pages/Transactions/MobileTopup/MobileTopupFailedPage.xaml
@@ -6,28 +6,43 @@
              x:Class="TransactionProcessor.Mobile.Pages.Transactions.MobileTopup.MobileTopupFailedPage"
              Shell.NavBarIsVisible="False"
              x:Name="MobileTopupFailed">
-    <ScrollView>
-        <VerticalStackLayout x:Name="MainLayout" Style="{DynamicResource Layout}" >
-            <controls:TitleLabel Text="{Binding Title}" AutomationId="{Binding Title}" FontSize="20" HorizontalTextAlignment="Center" VerticalOptions="End"
-               FontAttributes="Bold" Padding="20,0,0,20"/>
-            <Frame Style="{DynamicResource MainFrame}">
-                <VerticalStackLayout Spacing="10">
+    <ScrollView BackgroundColor="{StaticResource pageBackgroundColor}">
+        <VerticalStackLayout Spacing="0">
 
-                    <Image Source="paymentfailure.png" VerticalOptions="Start" Style="{DynamicResource PaymentImage}"/>
+            <!-- Header -->
+            <Frame Style="{StaticResource PageHeaderStyle}" BackgroundColor="{StaticResource admin}">
+                <Label Text="{Binding Title}" Style="{StaticResource HeaderTitleStyle}" AutomationId="{Binding Title}"/>
+            </Frame>
 
-                    <Label Margin="17,8"
-                       Text="Unfortunately, we could not process your mobile top-up, this may be for a variety of reasons.  If you wish you can retry the transaction."/>
+            <VerticalStackLayout Padding="16,24,16,16" Spacing="16">
 
-                    <Button x:Name="CancelButton" Grid.Row="5" Margin="0,16"
-                        Style="{DynamicResource MobileTopupButtonStyle}" AutomationId="CancelButton">
-                        <Button.Behaviors>
-                            <toolkit:EventToCommandBehavior
-                                EventName="Clicked"
-                                Command="{Binding CancelledCommand}" BindingContext="{Binding Source={x:Reference MobileTopupFailed}, Path=BindingContext}" />
-                        </Button.Behaviors>
-                    </Button>
-                </VerticalStackLayout>
-            </Frame>
+                <!-- Failure card -->
+                <Frame Style="{StaticResource SectionCardStyle}">
+                    <VerticalStackLayout Spacing="12" HorizontalOptions="Center">
+                        <Image Source="paymentfailure.png" VerticalOptions="Start"
+                               HeightRequest="120" WidthRequest="120"
+                               HorizontalOptions="Center"/>
+                        <Label Text="Topup Failed"
+                               FontSize="20" FontAttributes="Bold"
+                               TextColor="{StaticResource admin}"
+                               HorizontalTextAlignment="Center"/>
+                        <Label Text="Unfortunately, we could not process your mobile top-up. If you wish you can retry the transaction."
+                               FontSize="14" TextColor="{StaticResource DarkGray}"
+                               HorizontalTextAlignment="Center"
+                               Margin="8,0"/>
+                    </VerticalStackLayout>
+                </Frame>
+
+                <!-- Action tile -->
+                <Frame Style="{StaticResource ActionTileStyle}"
+                       BackgroundColor="{StaticResource admin}">
+                    <Frame.GestureRecognizers>
+                        <TapGestureRecognizer Command="{Binding CancelledCommand}"/>
+                    </Frame.GestureRecognizers>
+                    <Label Text="Cancel" Style="{StaticResource TileLabelStyle}" FontAttributes="Bold" AutomationId="CancelButton"/>
+                </Frame>
+
+            </VerticalStackLayout>
         </VerticalStackLayout>
     </ScrollView>
-</ContentPage>
\ No newline at end of file
+</ContentPage>
diff --git a/TransactionProcessor.Mobile/Pages/Transactions/MobileTopup/MobileTopupPerformTopupPage.xaml b/TransactionProcessor.Mobile/Pages/Transactions/MobileTopup/MobileTopupPerformTopupPage.xaml
index 66c2d24cb..9a0772a1d 100644
--- a/TransactionProcessor.Mobile/Pages/Transactions/MobileTopup/MobileTopupPerformTopupPage.xaml
+++ b/TransactionProcessor.Mobile/Pages/Transactions/MobileTopup/MobileTopupPerformTopupPage.xaml
@@ -6,62 +6,92 @@
              xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
              Shell.NavBarIsVisible="False"
              x:Name="MobileTopPerformTopup">
-    <ScrollView>
-        <VerticalStackLayout x:Name="MainLayout" Style="{DynamicResource Layout}">
-            <controls:TitleLabel Text="{Binding Title}" AutomationId="{Binding Title}" FontSize="20" HorizontalTextAlignment="Center"  VerticalOptions="End" FontAttributes="Bold" Padding="20,0,0,20"/>
-            <Frame Style="{DynamicResource MainFrame}">
-                <VerticalStackLayout Spacing="10">
-                    <Entry x:Name="CustomerMobileNumberEntry"
-               Placeholder="Customer Mobile Number"
-               Style="{DynamicResource MobileNumberEntryStyle}"
-               AutomationId="CustomerMobileNumberEntry"
-               Text="{Binding CustomerMobileNumber}"
-               Keyboard="Numeric">
-                        <Entry.Behaviors>
-                            <toolkit:EventToCommandBehavior             
-                    EventName="Completed"  
-                    Command="{Binding CustomerMobileNumberEntryCompletedCommand}" />
-                        </Entry.Behaviors>
-                    </Entry>
+    <ScrollView BackgroundColor="{StaticResource pageBackgroundColor}">
+        <VerticalStackLayout Spacing="0">
 
-                    <Entry x:Name="TopupAmountEntry"
-               Placeholder="100"
-               AutomationId="TopupAmountEntry"
-               Style="{DynamicResource AmountEntryStyle}"
-               Text="{Binding TopupAmount}"
-               Keyboard="Numeric">
-                        <Entry.Behaviors>
-                            <toolkit:EventToCommandBehavior             
-                    EventName="Completed"  
-                    Command="{Binding TopupAmountEntryCompletedCommand}" />
-                        </Entry.Behaviors>
-                    </Entry>
+            <!-- Header -->
+            <Frame Style="{StaticResource PageHeaderStyle}">
+                <Label Text="{Binding Title}" Style="{StaticResource HeaderTitleStyle}" AutomationId="EnterTopupDetails"/>
+            </Frame>
 
-                    <Entry x:Name="CustomerEmailAddressEntry"
-               Placeholder="customeremail@email.com"
-               AutomationId="CustomerEmailAddressEntry"
-               Style="{DynamicResource EmailAddressEntryStyle}"
-               Text="{Binding CustomerEmailAddress}">
-                        <Entry.Behaviors>
-                            <toolkit:EventToCommandBehavior             
-                    EventName="Completed"  
-                    Command="{Binding CustomerEmailAddressEntryCompletedCommand}" />
-                        </Entry.Behaviors>
-                    </Entry>
+            <VerticalStackLayout Padding="16,16,16,16" Spacing="12">
 
-                    <Button x:Name="PerformTopupButton" 
-                Text="Perform Topup"
-                Style="{DynamicResource MobileTopupButtonStyle}"
-                AutomationId="PerformTopupButton">
-                        <Button.Behaviors>
-                            <toolkit:EventToCommandBehavior
-                                EventName="Clicked"
-                                Command="{Binding PerformTopupCommand}" BindingContext="{Binding Source={x:Reference MobileTopPerformTopup}, Path=BindingContext}" />
-                        </Button.Behaviors>
-                    </Button>
-                <Button Text="Back" Style="{StaticResource MobileTopupButtonStyle}" Command="{Binding BackButtonCommand}"/>
-                </VerticalStackLayout>
-            </Frame>
+                <Frame Style="{StaticResource SectionCardStyle}">
+                    <VerticalStackLayout Spacing="12">
+
+                        <Label Text="Customer Mobile Number" FontSize="13"
+                               TextColor="{StaticResource labelTextColor}" FontAttributes="Bold"/>
+                        <Frame Style="{StaticResource FormEntryStyle}">
+                            <Entry x:Name="CustomerMobileNumberEntry"
+                                   Placeholder="Customer Mobile Number"
+                                   Style="{DynamicResource MobileNumberEntryStyle}"
+                                   AutomationId="CustomerMobileNumberEntry"
+                                   Text="{Binding CustomerMobileNumber}"
+                                   Keyboard="Numeric">
+                                <Entry.Behaviors>
+                                    <toolkit:EventToCommandBehavior
+                                        EventName="Completed"
+                                        Command="{Binding CustomerMobileNumberEntryCompletedCommand}"/>
+                                </Entry.Behaviors>
+                            </Entry>
+                        </Frame>
+
+                        <Label Text="Topup Amount" FontSize="13"
+                               TextColor="{StaticResource labelTextColor}" FontAttributes="Bold"/>
+                        <Frame Style="{StaticResource FormEntryStyle}">
+                            <Entry x:Name="TopupAmountEntry"
+                                   Placeholder="100"
+                                   AutomationId="TopupAmountEntry"
+                                   Style="{DynamicResource AmountEntryStyle}"
+                                   Text="{Binding TopupAmount}"
+                                   Keyboard="Numeric">
+                                <Entry.Behaviors>
+                                    <toolkit:EventToCommandBehavior
+                                        EventName="Completed"
+                                        Command="{Binding TopupAmountEntryCompletedCommand}"/>
+                                </Entry.Behaviors>
+                            </Entry>
+                        </Frame>
+
+                        <Label Text="Customer Email (optional)" FontSize="13"
+                               TextColor="{StaticResource labelTextColor}" FontAttributes="Bold"/>
+                        <Frame Style="{StaticResource FormEntryStyle}">
+                            <Entry x:Name="CustomerEmailAddressEntry"
+                                   Placeholder="customer@email.com"
+                                   AutomationId="CustomerEmailAddressEntry"
+                                   Style="{DynamicResource EmailAddressEntryStyle}"
+                                   Text="{Binding CustomerEmailAddress}">
+                                <Entry.Behaviors>
+                                    <toolkit:EventToCommandBehavior
+                                        EventName="Completed"
+                                        Command="{Binding CustomerEmailAddressEntryCompletedCommand}"/>
+                                </Entry.Behaviors>
+                            </Entry>
+                        </Frame>
+
+                    </VerticalStackLayout>
+                </Frame>
+
+                <!-- Action tiles row -->
+                <Grid ColumnDefinitions="*,*" ColumnSpacing="10">
+                    <Frame Grid.Column="0" Style="{StaticResource ActionTileStyle}"
+                           BackgroundColor="{StaticResource mobileTopup}">
+                        <Frame.GestureRecognizers>
+                            <TapGestureRecognizer Command="{Binding PerformTopupCommand}"/>
+                        </Frame.GestureRecognizers>
+                        <Label Text="Perform Topup" Style="{StaticResource TileLabelStyle}" FontAttributes="Bold" AutomationId="PerformTopupButton"/>
+                    </Frame>
+
+                    <Frame Grid.Column="1" Style="{StaticResource ActionTileStyle}"
+                           BackgroundColor="{StaticResource MidGray}">
+                        <Frame.GestureRecognizers>
+                            <TapGestureRecognizer Command="{Binding BackButtonCommand}"/>
+                        </Frame.GestureRecognizers>
+                        <Label Text="Back" Style="{StaticResource TileLabelStyle}" FontAttributes="Bold"/>
+                    </Frame>
+                </Grid>
+
+            </VerticalStackLayout>
         </VerticalStackLayout>
     </ScrollView>
-</ContentPage>
\ No newline at end of file
+</ContentPage>
diff --git a/TransactionProcessor.Mobile/Pages/Transactions/MobileTopup/MobileTopupPerformTopupPage.xaml.cs b/TransactionProcessor.Mobile/Pages/Transactions/MobileTopup/MobileTopupPerformTopupPage.xaml.cs
index b679ff368..a73369282 100644
--- a/TransactionProcessor.Mobile/Pages/Transactions/MobileTopup/MobileTopupPerformTopupPage.xaml.cs
+++ b/TransactionProcessor.Mobile/Pages/Transactions/MobileTopup/MobileTopupPerformTopupPage.xaml.cs
@@ -27,7 +27,6 @@ public MobileTopupPerformTopupPage(MobileTopupPerformTopupPageViewModel vm)
                                          };
         vm.OnCustomerEmailAddressEntryCompleted = () =>
                                          {
-                                             this.PerformTopupButton.Focus();
                                          };
     }
     
diff --git a/TransactionProcessor.Mobile/Pages/Transactions/MobileTopup/MobileTopupSelectOperatorPage.xaml b/TransactionProcessor.Mobile/Pages/Transactions/MobileTopup/MobileTopupSelectOperatorPage.xaml
index 0cd0e2cbe..4028e6f5f 100644
--- a/TransactionProcessor.Mobile/Pages/Transactions/MobileTopup/MobileTopupSelectOperatorPage.xaml
+++ b/TransactionProcessor.Mobile/Pages/Transactions/MobileTopup/MobileTopupSelectOperatorPage.xaml
@@ -4,13 +4,18 @@
              x:Class="TransactionProcessor.Mobile.Pages.Transactions.MobileTopup.MobileTopupSelectOperatorPage"
              xmlns:controls="clr-namespace:TransactionProcessor.Mobile.Controls"
              Shell.NavBarIsVisible="False">
-    <ScrollView>
-        <VerticalStackLayout x:Name="MainLayout" Style="{DynamicResource Layout}">
-            <controls:TitleLabel Text="{Binding Title}" AutomationId="{Binding Title}" FontSize="20" HorizontalTextAlignment="Center"  VerticalOptions="End" FontAttributes="Bold" Padding="20,0,0,20"/>
-            <Frame Style="{DynamicResource MainFrame}">
-                <VerticalStackLayout x:Name="OperatorList" Spacing="10">
-                </VerticalStackLayout>
+    <ScrollView BackgroundColor="{StaticResource pageBackgroundColor}">
+        <VerticalStackLayout Spacing="0">
+
+            <!-- Header -->
+            <Frame Style="{StaticResource PageHeaderStyle}">
+                <Label Text="{Binding Title}" Style="{StaticResource HeaderTitleStyle}" AutomationId="SelectanOperator"/>
             </Frame>
+
+            <VerticalStackLayout Padding="16,16,16,16" Spacing="10">
+                <Grid x:Name="OperatorList" ColumnDefinitions="*,*" ColumnSpacing="10" RowSpacing="10"/>
+            </VerticalStackLayout>
+
         </VerticalStackLayout>
     </ScrollView>
-</ContentPage>
\ No newline at end of file
+</ContentPage>
diff --git a/TransactionProcessor.Mobile/Pages/Transactions/MobileTopup/MobileTopupSelectOperatorPage.xaml.cs b/TransactionProcessor.Mobile/Pages/Transactions/MobileTopup/MobileTopupSelectOperatorPage.xaml.cs
index 4506af51a..856361ccc 100644
--- a/TransactionProcessor.Mobile/Pages/Transactions/MobileTopup/MobileTopupSelectOperatorPage.xaml.cs
+++ b/TransactionProcessor.Mobile/Pages/Transactions/MobileTopup/MobileTopupSelectOperatorPage.xaml.cs
@@ -9,9 +9,9 @@ public partial class MobileTopupSelectOperatorPage : ContentPage
 {
     private MobileTopupSelectOperatorPageViewModel viewModel => this.BindingContext as MobileTopupSelectOperatorPageViewModel;
 
-	public MobileTopupSelectOperatorPage(MobileTopupSelectOperatorPageViewModel vm)
-	{
-		this.InitializeComponent();
+public MobileTopupSelectOperatorPage(MobileTopupSelectOperatorPageViewModel vm)
+{
+this.InitializeComponent();
         this.BindingContext = vm;
     }
 
@@ -25,79 +25,75 @@ protected override async void OnAppearing()
     private void LoadOperators(MobileTopupSelectOperatorPageViewModel viewModel)
     {
         this.OperatorList.Children.Clear();
+        this.OperatorList.RowDefinitions.Clear();
 
+        var tiles = new List<Frame>();
         Int32 rowCount = 0;
         foreach (ContractOperatorModel modelOperator in viewModel.Operators)
         {
-            Button button = new Button
-                            {
-                                Text = modelOperator.OperatorName,
-                                HorizontalOptions = LayoutOptions.FillAndExpand,
-                                AutomationId = modelOperator.OperatorName,
-                            };
-            button.SetDynamicResource(VisualElement.StyleProperty, "MobileTopupButtonStyle");
-            //Binding commandParameter = new Binding()
-            //                           {
-            //                               Source = new ItemSelected<ContractOperatorModel>(){ 
-            //                                                                                     SelectedItem = modelOperator,
-            //                                                                                     SelectedItemIndex = rowCount
-            //                                                                                 }
-            //                           };
-
-            //Binding command = new Binding
-            //            {
-            //                Source = viewModel.OperatorSelectedCommand
-            //            };
-
-            //button.SetBinding(Button.CommandProperty, command);
-            //button.SetBinding(Button.CommandParameterProperty, commandParameter);
-
-            Binding commandParameter = new Binding
+            Frame tile = this.CreateTile(modelOperator.OperatorName, (Color)Application.Current.Resources["mobileTopup"], modelOperator.OperatorName.Replace(" ", ""));
+            TapGestureRecognizer tap = new TapGestureRecognizer
             {
-                Source = new ItemSelected<ContractOperatorModel>
-                {
-                    SelectedItem = modelOperator,
-                    SelectedItemIndex = rowCount
-                }
+                Command = new Command(() => viewModel.OperatorSelectedCommand.Execute(
+                    new ItemSelected<ContractOperatorModel> { SelectedItem = modelOperator, SelectedItemIndex = rowCount }))
             };
+            tile.GestureRecognizers.Add(tap);
+            tiles.Add(tile);
+            rowCount++;
+        }
 
-            Binding command = new Binding("OperatorSelectedCommand", source: this.viewModel);
-
-            // Create the behavior and bind it to the command
-            EventToCommandBehavior behavior = new EventToCommandBehavior
+        int row = 0;
+        for (int i = 0; i < tiles.Count; i += 2)
+        {
+            this.OperatorList.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
+            Grid.SetRow(tiles[i], row);
+            Grid.SetColumn(tiles[i], 0);
+            this.OperatorList.Children.Add(tiles[i]);
+            if (i + 1 < tiles.Count)
             {
-                EventName = "Clicked",
-            };
-            behavior.SetBinding(EventToCommandBehavior.CommandProperty, command);
-            behavior.SetBinding(EventToCommandBehavior.CommandParameterProperty, commandParameter);
-
-            // Attach the behavior to the button
-            button.Behaviors.Add(behavior);
-
-            this.OperatorList.Children.Add(button);
-
-            rowCount++;
+                Grid.SetRow(tiles[i + 1], row);
+                Grid.SetColumn(tiles[i + 1], 1);
+                this.OperatorList.Children.Add(tiles[i + 1]);
+            }
+            row++;
         }
 
-        this.OperatorList.Children.Add(this.AddBackButton());
+        Frame backTile = this.CreateBackTile(viewModel.BackButtonCommand);
+        this.OperatorList.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
+        Grid.SetRow(backTile, row);
+        Grid.SetColumn(backTile, 0);
+        Grid.SetColumnSpan(backTile, 2);
+        this.OperatorList.Children.Add(backTile);
     }
 
-    private Button AddBackButton() {
-        Button button = new Button
-                            {
-                                Text = "Back",
-                                HorizontalOptions = LayoutOptions.FillAndExpand,
-                                AutomationId = "BackButton",
-                            };
-        button.SetDynamicResource(VisualElement.StyleProperty, "MobileTopupButtonStyle");
-
-        Binding backButtonCommand = new Binding
-                                    {
-                                        Source = this.viewModel.BackButtonCommand
-                                    };
-
-        button.SetBinding(Button.CommandProperty, backButtonCommand);
+    private Frame CreateTile(string text, Color backgroundColor, string automationId)
+    {
+        return new Frame
+        {
+            CornerRadius = 16,
+            HasShadow = true,
+            Padding = new Thickness(12),
+            HeightRequest = 100,
+            BackgroundColor = backgroundColor,
+            BorderColor = Colors.Transparent,
+            HorizontalOptions = LayoutOptions.FillAndExpand,
+            Content = new Label
+            {
+                Text = text,
+                TextColor = Colors.White,
+                FontAttributes = FontAttributes.Bold,
+                FontSize = 16,
+                HorizontalTextAlignment = TextAlignment.Center,
+                VerticalTextAlignment = TextAlignment.Center,
+                AutomationId = automationId
+            }
+        };
+    }
 
-        return button;
+    private Frame CreateBackTile(System.Windows.Input.ICommand command)
+    {
+        Frame frame = this.CreateTile("Back", (Color)Application.Current.Resources["MidGray"], "BackButton");
+        frame.GestureRecognizers.Add(new TapGestureRecognizer { Command = command });
+        return frame;
     }
-}
\ No newline at end of file
+}
diff --git a/TransactionProcessor.Mobile/Pages/Transactions/MobileTopup/MobileTopupSelectProductPage.xaml b/TransactionProcessor.Mobile/Pages/Transactions/MobileTopup/MobileTopupSelectProductPage.xaml
index 759d5e820..c17bd7ff9 100644
--- a/TransactionProcessor.Mobile/Pages/Transactions/MobileTopup/MobileTopupSelectProductPage.xaml
+++ b/TransactionProcessor.Mobile/Pages/Transactions/MobileTopup/MobileTopupSelectProductPage.xaml
@@ -4,14 +4,18 @@
              xmlns:controls="clr-namespace:TransactionProcessor.Mobile.Controls"
              x:Class="TransactionProcessor.Mobile.Pages.Transactions.MobileTopup.MobileTopupSelectProductPage"
              Shell.NavBarIsVisible="False">
-    <ScrollView>
-        <VerticalStackLayout x:Name="MainLayout" Style="{DynamicResource Layout}">
-            <controls:TitleLabel Text="{Binding Title}" AutomationId="{Binding Title}" FontSize="20" HorizontalTextAlignment="Center"  VerticalOptions="End" FontAttributes="Bold" Padding="20,0,0,20"/>
-            <Frame Style="{DynamicResource MainFrame}">
+    <ScrollView BackgroundColor="{StaticResource pageBackgroundColor}">
+        <VerticalStackLayout Spacing="0">
 
-                <VerticalStackLayout x:Name="ProductsList" Spacing="10">
-                </VerticalStackLayout>
+            <!-- Header -->
+            <Frame Style="{StaticResource PageHeaderStyle}">
+                <Label Text="{Binding Title}" Style="{StaticResource HeaderTitleStyle}" AutomationId="SelectaProduct"/>
             </Frame>
+
+            <VerticalStackLayout Padding="16,16,16,16" Spacing="10">
+                <Grid x:Name="ProductsList" ColumnDefinitions="*,*" ColumnSpacing="10" RowSpacing="10"/>
+            </VerticalStackLayout>
+
         </VerticalStackLayout>
     </ScrollView>
-</ContentPage>
\ No newline at end of file
+</ContentPage>
diff --git a/TransactionProcessor.Mobile/Pages/Transactions/MobileTopup/MobileTopupSelectProductPage.xaml.cs b/TransactionProcessor.Mobile/Pages/Transactions/MobileTopup/MobileTopupSelectProductPage.xaml.cs
index 31fa5ba7b..8a8e91a15 100644
--- a/TransactionProcessor.Mobile/Pages/Transactions/MobileTopup/MobileTopupSelectProductPage.xaml.cs
+++ b/TransactionProcessor.Mobile/Pages/Transactions/MobileTopup/MobileTopupSelectProductPage.xaml.cs
@@ -31,66 +31,77 @@ protected override async void OnAppearing() {
     }
 
     private void LoadProducts(MobileTopupSelectProductPageViewModel viewModel) {
-        this.ProductsList.Clear();
+        this.ProductsList.Children.Clear();
+        this.ProductsList.RowDefinitions.Clear();
 
+        var tiles = new List<Frame>();
         Int32 rowCount = 0;
         foreach (ContractProductModel modelProduct in viewModel.Products) {
-            Button button = new Button {
-                                           Text = modelProduct.ProductDisplayText,
-                                           HorizontalOptions = LayoutOptions.FillAndExpand,
-                                           AutomationId = modelProduct.ProductDisplayText,
-                                       };
-            button.SetDynamicResource(VisualElement.StyleProperty, "MobileTopupButtonStyle");
-
-            Binding commandParameter = new Binding
+            Frame tile = this.CreateTile(modelProduct.ProductDisplayText, (Color)Application.Current.Resources["mobileTopup"], modelProduct.ProductDisplayText.Replace(" ", ""));
+            TapGestureRecognizer tap = new TapGestureRecognizer
             {
-                Source = new ItemSelected<ContractProductModel>
-                {
-                    SelectedItem = modelProduct,
-                    SelectedItemIndex = rowCount
-                }
+                Command = new Command(() => viewModel.ProductSelectedCommand.Execute(
+                    new ItemSelected<ContractProductModel> { SelectedItem = modelProduct, SelectedItemIndex = rowCount }))
             };
+            tile.GestureRecognizers.Add(tap);
+            tiles.Add(tile);
+            rowCount++;
+        }
 
-            Binding command = new Binding("ProductSelectedCommand", source: this.viewModel);
-
-            // Create the behavior and bind it to the command
-            EventToCommandBehavior behavior = new EventToCommandBehavior
+        int row = 0;
+        for (int i = 0; i < tiles.Count; i += 2)
+        {
+            this.ProductsList.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
+            Grid.SetRow(tiles[i], row);
+            Grid.SetColumn(tiles[i], 0);
+            this.ProductsList.Children.Add(tiles[i]);
+            if (i + 1 < tiles.Count)
             {
-                EventName = "Clicked"
-            };
-            behavior.SetBinding(EventToCommandBehavior.CommandProperty, command);
-            behavior.SetBinding(EventToCommandBehavior.CommandParameterProperty, commandParameter);
-
-            // Attach the behavior to the button
-            button.Behaviors.Add(behavior);
-
-            this.ProductsList.Add(button);
-
-            rowCount++;
+                Grid.SetRow(tiles[i + 1], row);
+                Grid.SetColumn(tiles[i + 1], 1);
+                this.ProductsList.Children.Add(tiles[i + 1]);
+            }
+            row++;
         }
 
-        this.ProductsList.Add(this.AddBackButton());
+        Frame backTile = this.CreateBackTile(viewModel.BackButtonCommand);
+        this.ProductsList.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
+        Grid.SetRow(backTile, row);
+        Grid.SetColumn(backTile, 0);
+        Grid.SetColumnSpan(backTile, 2);
+        this.ProductsList.Children.Add(backTile);
+    }
+
+    private Frame CreateTile(string text, Color backgroundColor, string automationId)
+    {
+        return new Frame
+        {
+            CornerRadius = 16,
+            HasShadow = true,
+            Padding = new Thickness(12),
+            HeightRequest = 100,
+            BackgroundColor = backgroundColor,
+            BorderColor = Colors.Transparent,
+            HorizontalOptions = LayoutOptions.FillAndExpand,
+            Content = new Label
+            {
+                Text = text,
+                TextColor = Colors.White,
+                FontAttributes = FontAttributes.Bold,
+                FontSize = 16,
+                HorizontalTextAlignment = TextAlignment.Center,
+                VerticalTextAlignment = TextAlignment.Center,
+                AutomationId = automationId
+            }
+        };
     }
 
-    private Button AddBackButton()
+    private Frame CreateBackTile(System.Windows.Input.ICommand command)
     {
-        Button button = new Button
-                        {
-                            Text = "Back",
-                            HorizontalOptions = LayoutOptions.FillAndExpand,
-                            AutomationId = "BackButton",
-                        };
-        button.SetDynamicResource(VisualElement.StyleProperty, "MobileTopupButtonStyle");
-
-        Binding backButtonCommand = new Binding
-                                    {
-                                        Source = this.viewModel.BackButtonCommand
-                                    };
-
-        button.SetBinding(Button.CommandProperty, backButtonCommand);
-
-        return button;
+        Frame frame = this.CreateTile("Back", (Color)Application.Current.Resources["MidGray"], "BackButton");
+        frame.GestureRecognizers.Add(new TapGestureRecognizer { Command = command });
+        return frame;
     }
 
     #endregion
-}
\ No newline at end of file
+}
diff --git a/TransactionProcessor.Mobile/Pages/Transactions/MobileTopup/MobileTopupSuccessPage.xaml b/TransactionProcessor.Mobile/Pages/Transactions/MobileTopup/MobileTopupSuccessPage.xaml
index 5555520c9..d0b62486a 100644
--- a/TransactionProcessor.Mobile/Pages/Transactions/MobileTopup/MobileTopupSuccessPage.xaml
+++ b/TransactionProcessor.Mobile/Pages/Transactions/MobileTopup/MobileTopupSuccessPage.xaml
@@ -6,28 +6,53 @@
              x:Class="TransactionProcessor.Mobile.Pages.Transactions.MobileTopup.MobileTopupSuccessPage"
              Shell.NavBarIsVisible="False"
              x:Name="MobileTopupSuccess">
-    <ScrollView>
-        <VerticalStackLayout x:Name="MainLayout" Style="{DynamicResource Layout}">
-            <controls:TitleLabel Text="{Binding Title}" AutomationId="{Binding Title}" FontSize="20" HorizontalTextAlignment="Center" VerticalOptions="End"
-               FontAttributes="Bold" Padding="20,0,0,20"/>
-            <Frame Style="{DynamicResource MainFrame}">
-                <VerticalStackLayout Spacing="10">
+    <ScrollView BackgroundColor="{StaticResource pageBackgroundColor}">
+        <VerticalStackLayout Spacing="0">
 
-                    <Image Source="paymentsuccess.png" VerticalOptions="Start" Style="{DynamicResource PaymentImage}"/>
-
-                    <!--  Payment description label -->
-                    <Label Margin="17,8"
-                           Text="Thank you for your topup. An automated payment receipt will be sent to your email entered."/>
-                    <Button x:Name="CompleteButton" Margin="0,16" Text="Complete"
-                        Style="{DynamicResource MobileTopupButtonStyle}" AutomationId="CompleteButton">
-                        <Button.Behaviors>
-                            <toolkit:EventToCommandBehavior
-                                EventName="Clicked"
-                                Command="{Binding CompletedCommand}" BindingContext="{Binding Source={x:Reference MobileTopupSuccess}, Path=BindingContext}" />
-                        </Button.Behaviors>
-                    </Button>
-                </VerticalStackLayout>
+            <!-- Header -->
+            <Frame Style="{StaticResource PageHeaderStyle}" BackgroundColor="{StaticResource successGreen}">
+                <Label Text="{Binding Title}" Style="{StaticResource HeaderTitleStyle}" AutomationId="MobileTopupSuccessful"/>
             </Frame>
+
+            <VerticalStackLayout Padding="16,24,16,16" Spacing="16">
+
+                <!-- Success card -->
+                <Frame Style="{StaticResource SectionCardStyle}">
+                    <VerticalStackLayout Spacing="12" HorizontalOptions="Center">
+                        <Image Source="paymentsuccess.png" VerticalOptions="Start"
+                               HeightRequest="120" WidthRequest="120"
+                               HorizontalOptions="Center"/>
+                        <Label Text="Topup Successful!"
+                               FontSize="20" FontAttributes="Bold"
+                               TextColor="{StaticResource successGreen}"
+                               HorizontalTextAlignment="Center"/>
+                        <Label Text="Thank you for your topup. An automated payment receipt will be sent to the email address entered."
+                               FontSize="14" TextColor="{StaticResource DarkGray}"
+                               HorizontalTextAlignment="Center"
+                               Margin="8,0"/>
+                    </VerticalStackLayout>
+                </Frame>
+
+                <!-- Action tiles row -->
+                <Grid ColumnDefinitions="*,*" ColumnSpacing="10">
+                    <Frame Grid.Column="0" Style="{StaticResource ActionTileStyle}"
+                           BackgroundColor="{StaticResource successGreen}">
+                        <Frame.GestureRecognizers>
+                            <TapGestureRecognizer Command="{Binding CompletedCommand}"/>
+                        </Frame.GestureRecognizers>
+                        <Label Text="Complete" Style="{StaticResource TileLabelStyle}" FontAttributes="Bold" AutomationId="CompleteButton"/>
+                    </Frame>
+
+                    <Frame Grid.Column="1" Style="{StaticResource ActionTileStyle}"
+                           BackgroundColor="{StaticResource MidGray}">
+                        <Frame.GestureRecognizers>
+                            <TapGestureRecognizer Command="{Binding BackButtonCommand}"/>
+                        </Frame.GestureRecognizers>
+                        <Label Text="Back" Style="{StaticResource TileLabelStyle}" FontAttributes="Bold"/>
+                    </Frame>
+                </Grid>
+
+            </VerticalStackLayout>
         </VerticalStackLayout>
     </ScrollView>
-</ContentPage>
\ No newline at end of file
+</ContentPage>
diff --git a/TransactionProcessor.Mobile/Pages/Transactions/TransactionsPage.xaml b/TransactionProcessor.Mobile/Pages/Transactions/TransactionsPage.xaml
index bb0e3a449..4f27e5043 100644
--- a/TransactionProcessor.Mobile/Pages/Transactions/TransactionsPage.xaml
+++ b/TransactionProcessor.Mobile/Pages/Transactions/TransactionsPage.xaml
@@ -7,51 +7,95 @@
                                xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
                                Shell.NavBarIsVisible="False"
                                x:Name="Transactions">
-    <ScrollView>
-        <!-- This might be better as a flex layout if we had images-->
-        <VerticalStackLayout Style="{DynamicResource Layout}">
-            <controls:TitleLabel Text="{Binding Title}" AutomationId="{Binding Title}" FontSize="20" HorizontalTextAlignment="Center"  VerticalOptions="End" FontAttributes="Bold" Padding="20,0,0,20"/>
-            <Frame Style="{DynamicResource MainFrame}">
-                <VerticalStackLayout Spacing="10">
-
-                    <Button AutomationId="MobileTopupButton" x:Name="MobileTopupButton" Text="Mobile Topup" Style="{DynamicResource MobileTopupButtonStyle}">
-                        <Button.Behaviors>
-                            <toolkit:EventToCommandBehavior
-                                EventName="Clicked"
-                                Command="{Binding MobileTopupCommand}" BindingContext="{Binding Source={x:Reference Transactions}, Path=BindingContext}" />
-                        </Button.Behaviors>
-                    </Button>
-                    <Button AutomationId="MobileWalletButton" x:Name="MobileWalletButton" Text="Mobile Wallet" Style="{DynamicResource MobileWalletButtonStyle}">
-                        <Button.Behaviors>
-                            <toolkit:EventToCommandBehavior
-                                EventName="Clicked"
-                                Command="{Binding MobileWalletCommand}" BindingContext="{Binding Source={x:Reference Transactions}, Path=BindingContext}" />
-                        </Button.Behaviors>
-                    </Button>
-                    <Button AutomationId="BillPaymentButton" x:Name="BillPaymentButton" Text="Bill Payment" Style="{DynamicResource BillPaymentButtonStyle}">
-                        <Button.Behaviors>
-                            <toolkit:EventToCommandBehavior
-                                EventName="Clicked"
-                                Command="{Binding BillPaymentCommand}" BindingContext="{Binding Source={x:Reference Transactions}, Path=BindingContext}" />
-                        </Button.Behaviors>
-                    </Button>
-                    <Button AutomationId="VoucherButton" x:Name="VoucherButton" Text="Voucher" Style="{DynamicResource VoucherButtonStyle}">
-                        <Button.Behaviors>
-                            <toolkit:EventToCommandBehavior
-                                EventName="Clicked"
-                                Command="{Binding VoucherCommand}" BindingContext="{Binding Source={x:Reference Transactions}, Path=BindingContext}" />
-                        </Button.Behaviors>
-                    </Button>
-                    <Button AutomationId="AdminButton" x:Name="AdminButton" Text="Admin" Style="{DynamicResource AdminButtonStyle}">
-                        <Button.Behaviors>
-                            <toolkit:EventToCommandBehavior
-                                EventName="Clicked"
-                                Command="{Binding AdminCommand}" BindingContext="{Binding Source={x:Reference Transactions}, Path=BindingContext}" />
-                        </Button.Behaviors>
-                    </Button>
-                    <Button Text="Back" AutomationId="BackButton"  Style="{StaticResource StandardButton}" Command="{Binding BackButtonCommand}"/>
-                </VerticalStackLayout>
+    <ScrollView BackgroundColor="{StaticResource pageBackgroundColor}">
+        <VerticalStackLayout Spacing="0">
+
+            <!-- Header -->
+            <Frame Style="{StaticResource PageHeaderStyle}">
+                <Label Text="{Binding Title}" Style="{StaticResource HeaderTitleStyle}" AutomationId="Transactions"/>
             </Frame>
+
+            <!-- Transaction type grid -->
+            <VerticalStackLayout Padding="16,16,16,16" Spacing="0">
+
+                <Label Text="Select a transaction type" FontSize="14"
+                       TextColor="{StaticResource labelTextColor}" Margin="4,0,0,12"/>
+
+                <!-- 2-column grid of transaction type cards -->
+                <Grid ColumnDefinitions="*,*" RowDefinitions="auto,auto,auto">
+
+                    <!-- Mobile Topup -->
+                    <Frame Grid.Row="0" Grid.Column="0" Style="{StaticResource DashboardTileStyle}"
+                           BackgroundColor="{StaticResource mobileTopup}">
+                        <Frame.GestureRecognizers>
+                            <TapGestureRecognizer Command="{Binding MobileTopupCommand}"/>
+                        </Frame.GestureRecognizers>
+                        <VerticalStackLayout VerticalOptions="Center" HorizontalOptions="Center" Spacing="4">
+                            <Label Text="Mobile" Style="{StaticResource TileLabelStyle}" FontAttributes="Bold" AutomationId="MobileTopupButton"/>
+                            <Label Text="Topup" Style="{StaticResource TileLabelStyle}"/>
+                        </VerticalStackLayout>
+                    </Frame>
+
+                    <!-- Mobile Wallet -->
+                    <Frame Grid.Row="0" Grid.Column="1" Style="{StaticResource DashboardTileStyle}"
+                           BackgroundColor="{StaticResource mobileWallet}">
+                        <Frame.GestureRecognizers>
+                            <TapGestureRecognizer Command="{Binding MobileWalletCommand}"/>
+                        </Frame.GestureRecognizers>
+                        <VerticalStackLayout VerticalOptions="Center" HorizontalOptions="Center" Spacing="4">
+                            <Label Text="Mobile" Style="{StaticResource TileLabelStyle}" FontAttributes="Bold" AutomationId="MobileWalletButton"/>
+                            <Label Text="Wallet" Style="{StaticResource TileLabelStyle}"/>
+                        </VerticalStackLayout>
+                    </Frame>
+
+                    <!-- Bill Payment -->
+                    <Frame Grid.Row="1" Grid.Column="0" Style="{StaticResource DashboardTileStyle}"
+                           BackgroundColor="{StaticResource billPayment}">
+                        <Frame.GestureRecognizers>
+                            <TapGestureRecognizer Command="{Binding BillPaymentCommand}"/>
+                        </Frame.GestureRecognizers>
+                        <VerticalStackLayout VerticalOptions="Center" HorizontalOptions="Center" Spacing="4">
+                            <Label Text="Bill" Style="{StaticResource TileLabelStyle}" FontAttributes="Bold" AutomationId="BillPaymentButton"/>
+                            <Label Text="Payment" Style="{StaticResource TileLabelStyle}"/>
+                        </VerticalStackLayout>
+                    </Frame>
+
+                    <!-- Voucher -->
+                    <Frame Grid.Row="1" Grid.Column="1" Style="{StaticResource DashboardTileStyle}"
+                           BackgroundColor="{StaticResource voucher}">
+                        <Frame.GestureRecognizers>
+                            <TapGestureRecognizer Command="{Binding VoucherCommand}"/>
+                        </Frame.GestureRecognizers>
+                        <VerticalStackLayout VerticalOptions="Center" HorizontalOptions="Center" Spacing="4">
+                            <Label Text="Voucher" Style="{StaticResource TileLabelStyle}" FontAttributes="Bold" AutomationId="VoucherButton"/>
+                            <Label Text="Issue" Style="{StaticResource TileLabelStyle}"/>
+                        </VerticalStackLayout>
+                    </Frame>
+
+                    <!-- Admin (full width) -->
+                    <Frame Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2"
+                           Style="{StaticResource DashboardTileStyle}"
+                           BackgroundColor="{StaticResource admin}" HeightRequest="64">
+                        <Frame.GestureRecognizers>
+                            <TapGestureRecognizer Command="{Binding AdminCommand}"/>
+                        </Frame.GestureRecognizers>
+                        <Label Text="Admin" Style="{StaticResource TileLabelStyle}"
+                               FontAttributes="Bold" FontSize="16" AutomationId="AdminButton"
+                               VerticalOptions="Center" HorizontalOptions="Center"/>
+                    </Frame>
+
+                </Grid>
+
+                <Frame Style="{StaticResource ActionTileStyle}"
+                       BackgroundColor="{StaticResource MidGray}"
+                       Margin="0,12,0,0">
+                    <Frame.GestureRecognizers>
+                        <TapGestureRecognizer Command="{Binding BackButtonCommand}"/>
+                    </Frame.GestureRecognizers>
+                    <Label Text="Back" Style="{StaticResource TileLabelStyle}" FontAttributes="Bold" AutomationId="BackButton"/>
+                </Frame>
+
+            </VerticalStackLayout>
         </VerticalStackLayout>
     </ScrollView>
-</common:NoBackWithoutLogoutPage>
\ No newline at end of file
+</common:NoBackWithoutLogoutPage>
diff --git a/TransactionProcessor.Mobile/Pages/Transactions/Voucher/VoucherIssueFailedPage.xaml b/TransactionProcessor.Mobile/Pages/Transactions/Voucher/VoucherIssueFailedPage.xaml
index 4fa26fb84..255ac7bff 100644
--- a/TransactionProcessor.Mobile/Pages/Transactions/Voucher/VoucherIssueFailedPage.xaml
+++ b/TransactionProcessor.Mobile/Pages/Transactions/Voucher/VoucherIssueFailedPage.xaml
@@ -6,29 +6,42 @@
              xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
              Shell.NavBarIsVisible="False"
              x:Name="VoucherIssueFailed">
-    <ScrollView>
-        <VerticalStackLayout x:Name="MainLayout" Style="{DynamicResource Layout}">
-            <controls:TitleLabel Text="{Binding Title}" AutomationId="{Binding Title}" FontSize="20" HorizontalTextAlignment="Center" VerticalOptions="End"
-               FontAttributes="Bold" Padding="20,0,0,20"/>
-            <Frame Style="{DynamicResource MainFrame}">
-                <VerticalStackLayout Spacing="10">
+    <ScrollView BackgroundColor="{StaticResource pageBackgroundColor}">
+        <VerticalStackLayout Spacing="0">
 
-                    <Image Source="paymentfailure.png" VerticalOptions="Start" Style="{DynamicResource PaymentImage}"/>
+            <!-- Header -->
+            <Frame Style="{StaticResource PageHeaderStyle}" BackgroundColor="{StaticResource admin}">
+                <Label Text="{Binding Title}" Style="{StaticResource HeaderTitleStyle}" AutomationId="{Binding Title}"/>
+            </Frame>
 
-                    <Label Margin="17,8"
-                       Text="Unfortunately, we could not process your voucher issue, this may be for a variety of reasons.  If you wish you can retry the transaction."/>
+            <VerticalStackLayout Padding="16,24,16,16" Spacing="16">
 
-                    <Button x:Name="CancelButton" Grid.Row="5" Margin="0,16"
-                        Text="Cancel"
-                        Style="{DynamicResource VoucherButtonStyle}" AutomationId="CancelButton">
-                        <Button.Behaviors>
-                            <toolkit:EventToCommandBehavior
-                                EventName="Clicked"
-                                Command="{Binding CancelledCommand}" BindingContext="{Binding Source={x:Reference VoucherIssueFailed}, Path=BindingContext}" />
-                        </Button.Behaviors>
-                    </Button>
-                </VerticalStackLayout>
-            </Frame>
+                <Frame Style="{StaticResource SectionCardStyle}">
+                    <VerticalStackLayout Spacing="12" HorizontalOptions="Center">
+                        <Image Source="paymentfailure.png" VerticalOptions="Start"
+                               HeightRequest="120" WidthRequest="120"
+                               HorizontalOptions="Center"/>
+                        <Label Text="Voucher Issue Failed"
+                               FontSize="20" FontAttributes="Bold"
+                               TextColor="{StaticResource admin}"
+                               HorizontalTextAlignment="Center"/>
+                        <Label Text="Unfortunately, we could not process your voucher issue. If you wish you can retry the transaction."
+                               FontSize="14" TextColor="{StaticResource DarkGray}"
+                               HorizontalTextAlignment="Center"
+                               Margin="8,0"/>
+                    </VerticalStackLayout>
+                </Frame>
+
+                <!-- Action tile -->
+                <Frame Style="{StaticResource ActionTileStyle}"
+                       BackgroundColor="{StaticResource admin}">
+                    <Frame.GestureRecognizers>
+                        <TapGestureRecognizer Command="{Binding CancelledCommand}"/>
+                    </Frame.GestureRecognizers>
+                    <Label Text="Cancel" Style="{StaticResource TileLabelStyle}" FontAttributes="Bold" AutomationId="CancelButton"/>
+                </Frame>
+
+            </VerticalStackLayout>
         </VerticalStackLayout>
     </ScrollView>
-</ContentPage>
\ No newline at end of file
+</ContentPage>
diff --git a/TransactionProcessor.Mobile/Pages/Transactions/Voucher/VoucherIssueSuccessPage.xaml b/TransactionProcessor.Mobile/Pages/Transactions/Voucher/VoucherIssueSuccessPage.xaml
index 564eb27e5..fb041d8d9 100644
--- a/TransactionProcessor.Mobile/Pages/Transactions/Voucher/VoucherIssueSuccessPage.xaml
+++ b/TransactionProcessor.Mobile/Pages/Transactions/Voucher/VoucherIssueSuccessPage.xaml
@@ -6,29 +6,52 @@
              x:Class="TransactionProcessor.Mobile.Pages.Transactions.Voucher.VoucherIssueSuccessPage"
              Shell.NavBarIsVisible="False"
              x:Name="VoucherIssueSuccess">
-    <ScrollView>
-        <VerticalStackLayout x:Name="MainLayout" Style="{DynamicResource Layout}">
-            <controls:TitleLabel Text="{Binding Title}" AutomationId="{Binding Title}" FontSize="20" HorizontalTextAlignment="Center" VerticalOptions="End"
-               FontAttributes="Bold" Padding="20,0,0,20"/>
-            <Frame Style="{DynamicResource MainFrame}">
-                <VerticalStackLayout Spacing="10">
+    <ScrollView BackgroundColor="{StaticResource pageBackgroundColor}">
+        <VerticalStackLayout Spacing="0">
 
-                    <Image Source="paymentsuccess.png" VerticalOptions="Start" Style="{DynamicResource PaymentImage}"/>
+            <!-- Header -->
+            <Frame Style="{StaticResource PageHeaderStyle}" BackgroundColor="{StaticResource successGreen}">
+                <Label Text="{Binding Title}" Style="{StaticResource HeaderTitleStyle}" AutomationId="VoucherIssueSuccessful"/>
+            </Frame>
 
-                    <!--  Payment description label  -->
-                    <Label Margin="17,8"
-                       Text="Thank you for your voucher purchase. An automated payment receipt will be sent to your email entered."/>
+            <VerticalStackLayout Padding="16,24,16,16" Spacing="16">
 
-                    <Button x:Name="CompleteButton" Margin="0,16" Text="Complete"
-                        Style="{DynamicResource VoucherButtonStyle}" AutomationId="CompleteButton">
-                        <Button.Behaviors>
-                            <toolkit:EventToCommandBehavior
-                                EventName="Clicked"
-                                Command="{Binding CompletedCommand}" BindingContext="{Binding Source={x:Reference VoucherIssueSuccess}, Path=BindingContext}" />
-                        </Button.Behaviors>
-                    </Button>
-                </VerticalStackLayout>
-            </Frame>
+                <Frame Style="{StaticResource SectionCardStyle}">
+                    <VerticalStackLayout Spacing="12" HorizontalOptions="Center">
+                        <Image Source="paymentsuccess.png" VerticalOptions="Start"
+                               HeightRequest="120" WidthRequest="120"
+                               HorizontalOptions="Center"/>
+                        <Label Text="Voucher Issued!"
+                               FontSize="20" FontAttributes="Bold"
+                               TextColor="{StaticResource successGreen}"
+                               HorizontalTextAlignment="Center"/>
+                        <Label Text="Thank you for your voucher purchase. An automated payment receipt will be sent to the email address entered."
+                               FontSize="14" TextColor="{StaticResource DarkGray}"
+                               HorizontalTextAlignment="Center"
+                               Margin="8,0"/>
+                    </VerticalStackLayout>
+                </Frame>
+
+                <!-- Action tiles row -->
+                <Grid ColumnDefinitions="*,*" ColumnSpacing="10">
+                    <Frame Grid.Column="0" Style="{StaticResource ActionTileStyle}"
+                           BackgroundColor="{StaticResource successGreen}">
+                        <Frame.GestureRecognizers>
+                            <TapGestureRecognizer Command="{Binding CompletedCommand}"/>
+                        </Frame.GestureRecognizers>
+                        <Label Text="Complete" Style="{StaticResource TileLabelStyle}" FontAttributes="Bold" AutomationId="CompleteButton"/>
+                    </Frame>
+
+                    <Frame Grid.Column="1" Style="{StaticResource ActionTileStyle}"
+                           BackgroundColor="{StaticResource MidGray}">
+                        <Frame.GestureRecognizers>
+                            <TapGestureRecognizer Command="{Binding BackButtonCommand}"/>
+                        </Frame.GestureRecognizers>
+                        <Label Text="Back" Style="{StaticResource TileLabelStyle}" FontAttributes="Bold"/>
+                    </Frame>
+                </Grid>
+
+            </VerticalStackLayout>
         </VerticalStackLayout>
     </ScrollView>
-</ContentPage>
\ No newline at end of file
+</ContentPage>
diff --git a/TransactionProcessor.Mobile/Pages/Transactions/Voucher/VoucherPerformIssuePage.xaml b/TransactionProcessor.Mobile/Pages/Transactions/Voucher/VoucherPerformIssuePage.xaml
index 7101bac40..f6651ffdf 100644
--- a/TransactionProcessor.Mobile/Pages/Transactions/Voucher/VoucherPerformIssuePage.xaml
+++ b/TransactionProcessor.Mobile/Pages/Transactions/Voucher/VoucherPerformIssuePage.xaml
@@ -6,76 +6,108 @@
              xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
              Shell.NavBarIsVisible="False"
              x:Name="VoucherPerformIssue">
-    <ScrollView>
-        <VerticalStackLayout x:Name="MainLayout" Style="{DynamicResource Layout}">
-            <controls:TitleLabel Text="{Binding Title}" AutomationId="{Binding Title}" FontSize="20" HorizontalTextAlignment="Center"  VerticalOptions="End" FontAttributes="Bold" Padding="20,0,0,20"/>
-            <Frame Style="{DynamicResource MainFrame}">
-                <VerticalStackLayout Spacing="10">
-                    <Entry x:Name="RecipientMobileNumberEntry"
-               Placeholder="Recipient Mobile Number"
-               AutomationId="RecipientMobileNumberEntry"
-               Style="{DynamicResource MobileNumberEntryStyle}"
-               Text="{Binding RecipientMobileNumber}"
-               Keyboard="Numeric">
-                        <Entry.Behaviors>
-                            <toolkit:EventToCommandBehavior             
-                    EventName="Completed"  
-                    Command="{Binding RecipientMobileNumberEntryCompletedCommand}" />
-                        </Entry.Behaviors>
-                    </Entry>
+    <ScrollView BackgroundColor="{StaticResource pageBackgroundColor}">
+        <VerticalStackLayout Spacing="0">
 
-                    <Entry x:Name="RecipientEmailAddressEntry"
-               Placeholder="Recipient Email Address"
-               AutomationId="RecipientEmailAddressEntry"
-               Style="{DynamicResource EmailAddressEntryStyle}"
-               Text="{Binding RecipientEmailAddress}"
-               Keyboard="Numeric">
-                        <Entry.Behaviors>
-                            <toolkit:EventToCommandBehavior             
-                    EventName="Completed"  
-                    Command="{Binding RecipientEmailAddressEntryCompletedCommand}" />
-                        </Entry.Behaviors>
-                    </Entry>
+            <!-- Header -->
+            <Frame Style="{StaticResource PageHeaderStyle}">
+                <Label Text="{Binding Title}" Style="{StaticResource HeaderTitleStyle}" AutomationId="EnterVoucherIssueDetails"/>
+            </Frame>
 
-                    <Entry x:Name="VoucherAmountEntry"
-               Placeholder="100"
-               AutomationId="VoucherAmountEntry"
-               Style="{DynamicResource AmountEntryStyle}"
-               Text="{Binding VoucherAmount}"
-               Keyboard="Numeric">
-                        <Entry.Behaviors>
-                            <toolkit:EventToCommandBehavior             
-                    EventName="Completed"  
-                    Command="{Binding VoucherAmountEntryCompletedCommand}" />
-                        </Entry.Behaviors>
-                    </Entry>
+            <VerticalStackLayout Padding="16,16,16,16" Spacing="12">
 
-                    <Entry x:Name="CustomerEmailAddressEntry"
-               Placeholder="customeremail@email.com"
-               AutomationId="CustomerEmailAddressEntry"
-               Style="{DynamicResource EmailAddressEntryStyle}"
-               Text="{Binding CustomerEmailAddress}">
-                        <Entry.Behaviors>
-                            <toolkit:EventToCommandBehavior             
-                    EventName="Completed"  
-                    Command="{Binding CustomerEmailAddressEntryCompletedCommand}" />
-                        </Entry.Behaviors>
-                    </Entry>
+                <Frame Style="{StaticResource SectionCardStyle}">
+                    <VerticalStackLayout Spacing="12">
 
-                    <Button x:Name="IssueVoucherButton" 
-                Text="Issue Voucher"
-                Style="{DynamicResource VoucherButtonStyle}"
-                AutomationId="IssueVoucherButton">
-                        <Button.Behaviors>
-                            <toolkit:EventToCommandBehavior
-                                EventName="Clicked"
-                                Command="{Binding IssueVoucherCommand}" BindingContext="{Binding Source={x:Reference VoucherPerformIssue}, Path=BindingContext}" />
-                        </Button.Behaviors>
-                    </Button>
-                    <Button Text="Back" Style="{StaticResource VoucherButtonStyle}" Command="{Binding BackButtonCommand}"/>
-                </VerticalStackLayout>
-                
-            </Frame>
+                        <Label Text="Recipient Mobile Number" FontSize="13"
+                               TextColor="{StaticResource labelTextColor}" FontAttributes="Bold"/>
+                        <Frame Style="{StaticResource FormEntryStyle}">
+                            <Entry x:Name="RecipientMobileNumberEntry"
+                                   Placeholder="Recipient Mobile Number"
+                                   AutomationId="RecipientMobileNumberEntry"
+                                   Style="{DynamicResource MobileNumberEntryStyle}"
+                                   Text="{Binding RecipientMobileNumber}"
+                                   Keyboard="Numeric">
+                                <Entry.Behaviors>
+                                    <toolkit:EventToCommandBehavior
+                                        EventName="Completed"
+                                        Command="{Binding RecipientMobileNumberEntryCompletedCommand}"/>
+                                </Entry.Behaviors>
+                            </Entry>
+                        </Frame>
+
+                        <Label Text="Recipient Email Address" FontSize="13"
+                               TextColor="{StaticResource labelTextColor}" FontAttributes="Bold"/>
+                        <Frame Style="{StaticResource FormEntryStyle}">
+                            <Entry x:Name="RecipientEmailAddressEntry"
+                                   Placeholder="Recipient Email Address"
+                                   AutomationId="RecipientEmailAddressEntry"
+                                   Style="{DynamicResource EmailAddressEntryStyle}"
+                                   Text="{Binding RecipientEmailAddress}">
+                                <Entry.Behaviors>
+                                    <toolkit:EventToCommandBehavior
+                                        EventName="Completed"
+                                        Command="{Binding RecipientEmailAddressEntryCompletedCommand}"/>
+                                </Entry.Behaviors>
+                            </Entry>
+                        </Frame>
+
+                        <Label Text="Voucher Amount" FontSize="13"
+                               TextColor="{StaticResource labelTextColor}" FontAttributes="Bold"/>
+                        <Frame Style="{StaticResource FormEntryStyle}">
+                            <Entry x:Name="VoucherAmountEntry"
+                                   Placeholder="100"
+                                   AutomationId="VoucherAmountEntry"
+                                   Style="{DynamicResource AmountEntryStyle}"
+                                   Text="{Binding VoucherAmount}"
+                                   Keyboard="Numeric">
+                                <Entry.Behaviors>
+                                    <toolkit:EventToCommandBehavior
+                                        EventName="Completed"
+                                        Command="{Binding VoucherAmountEntryCompletedCommand}"/>
+                                </Entry.Behaviors>
+                            </Entry>
+                        </Frame>
+
+                        <Label Text="Customer Email (optional)" FontSize="13"
+                               TextColor="{StaticResource labelTextColor}" FontAttributes="Bold"/>
+                        <Frame Style="{StaticResource FormEntryStyle}">
+                            <Entry x:Name="CustomerEmailAddressEntry"
+                                   Placeholder="customer@email.com"
+                                   AutomationId="CustomerEmailAddressEntry"
+                                   Style="{DynamicResource EmailAddressEntryStyle}"
+                                   Text="{Binding CustomerEmailAddress}">
+                                <Entry.Behaviors>
+                                    <toolkit:EventToCommandBehavior
+                                        EventName="Completed"
+                                        Command="{Binding CustomerEmailAddressEntryCompletedCommand}"/>
+                                </Entry.Behaviors>
+                            </Entry>
+                        </Frame>
+
+                    </VerticalStackLayout>
+                </Frame>
+
+                <!-- Action tiles row -->
+                <Grid ColumnDefinitions="*,*" ColumnSpacing="10">
+                    <Frame Grid.Column="0" Style="{StaticResource ActionTileStyle}"
+                           BackgroundColor="{StaticResource voucher}">
+                        <Frame.GestureRecognizers>
+                            <TapGestureRecognizer Command="{Binding IssueVoucherCommand}"/>
+                        </Frame.GestureRecognizers>
+                        <Label Text="Issue Voucher" Style="{StaticResource TileLabelStyle}" FontAttributes="Bold" AutomationId="IssueVoucherButton"/>
+                    </Frame>
+
+                    <Frame Grid.Column="1" Style="{StaticResource ActionTileStyle}"
+                           BackgroundColor="{StaticResource MidGray}">
+                        <Frame.GestureRecognizers>
+                            <TapGestureRecognizer Command="{Binding BackButtonCommand}"/>
+                        </Frame.GestureRecognizers>
+                        <Label Text="Back" Style="{StaticResource TileLabelStyle}" FontAttributes="Bold"/>
+                    </Frame>
+                </Grid>
+
+            </VerticalStackLayout>
         </VerticalStackLayout>
     </ScrollView>
-</ContentPage>
\ No newline at end of file
+</ContentPage>
diff --git a/TransactionProcessor.Mobile/Pages/Transactions/Voucher/VoucherPerformIssuePage.xaml.cs b/TransactionProcessor.Mobile/Pages/Transactions/Voucher/VoucherPerformIssuePage.xaml.cs
index 133be6785..542b51697 100644
--- a/TransactionProcessor.Mobile/Pages/Transactions/Voucher/VoucherPerformIssuePage.xaml.cs
+++ b/TransactionProcessor.Mobile/Pages/Transactions/Voucher/VoucherPerformIssuePage.xaml.cs
@@ -38,7 +38,6 @@ public VoucherPerformIssuePage(VoucherPerformIssuePageViewModel vm)
                                               };
         vm.OnCustomerEmailAddressEntryCompleted = () =>
                                          {
-                                             this.IssueVoucherButton.Focus();
                                          };
     }
     
diff --git a/TransactionProcessor.Mobile/Pages/Transactions/Voucher/VoucherSelectOperatorPage.xaml b/TransactionProcessor.Mobile/Pages/Transactions/Voucher/VoucherSelectOperatorPage.xaml
index a7f1298d5..96682cbdc 100644
--- a/TransactionProcessor.Mobile/Pages/Transactions/Voucher/VoucherSelectOperatorPage.xaml
+++ b/TransactionProcessor.Mobile/Pages/Transactions/Voucher/VoucherSelectOperatorPage.xaml
@@ -4,14 +4,18 @@
              x:Class="TransactionProcessor.Mobile.Pages.Transactions.Voucher.VoucherSelectOperatorPage"
              xmlns:controls="clr-namespace:TransactionProcessor.Mobile.Controls"
              Shell.NavBarIsVisible="False">
-    <ScrollView>
-        <VerticalStackLayout x:Name="MainLayout" Style="{DynamicResource Layout}">
-            <controls:TitleLabel Text="{Binding Title}" AutomationId="{Binding Title}" FontSize="20" HorizontalTextAlignment="Center" VerticalOptions="End"
-               FontAttributes="Bold" Padding="20,0,0,20"/>
-            <Frame Style="{DynamicResource MainFrame}">
-                <VerticalStackLayout Spacing="10" x:Name="OperatorList">
-                </VerticalStackLayout>
+    <ScrollView BackgroundColor="{StaticResource pageBackgroundColor}">
+        <VerticalStackLayout Spacing="0">
+
+            <!-- Header -->
+            <Frame Style="{StaticResource PageHeaderStyle}">
+                <Label Text="{Binding Title}" Style="{StaticResource HeaderTitleStyle}" AutomationId="SelectanOperator"/>
             </Frame>
+
+            <VerticalStackLayout Padding="16,16,16,16" Spacing="10">
+                <Grid x:Name="OperatorList" ColumnDefinitions="*,*" ColumnSpacing="10" RowSpacing="10"/>
+            </VerticalStackLayout>
+
         </VerticalStackLayout>
     </ScrollView>
-</ContentPage>
\ No newline at end of file
+</ContentPage>
diff --git a/TransactionProcessor.Mobile/Pages/Transactions/Voucher/VoucherSelectOperatorPage.xaml.cs b/TransactionProcessor.Mobile/Pages/Transactions/Voucher/VoucherSelectOperatorPage.xaml.cs
index 29ab6f6c8..4ebaf18ba 100644
--- a/TransactionProcessor.Mobile/Pages/Transactions/Voucher/VoucherSelectOperatorPage.xaml.cs
+++ b/TransactionProcessor.Mobile/Pages/Transactions/Voucher/VoucherSelectOperatorPage.xaml.cs
@@ -9,9 +9,9 @@ public partial class VoucherSelectOperatorPage : ContentPage
 {
     private VoucherSelectOperatorPageViewModel viewModel => this.BindingContext as VoucherSelectOperatorPageViewModel;
 
-	public VoucherSelectOperatorPage(VoucherSelectOperatorPageViewModel vm)
-	{
-		this.InitializeComponent();
+public VoucherSelectOperatorPage(VoucherSelectOperatorPageViewModel vm)
+{
+this.InitializeComponent();
         this.BindingContext = vm;
     }
 
@@ -25,65 +25,75 @@ protected override async void OnAppearing()
     private void LoadOperators(VoucherSelectOperatorPageViewModel viewModel)
     {
         this.OperatorList.Children.Clear();
-        
+        this.OperatorList.RowDefinitions.Clear();
+
+        var tiles = new List<Frame>();
         Int32 rowCount = 0;
         foreach (ContractOperatorModel modelOperator in viewModel.Operators)
         {
-            Button button = new Button
-                            {
-                                Text = modelOperator.OperatorName,
-                                HorizontalOptions = LayoutOptions.FillAndExpand,
-                                AutomationId = modelOperator.OperatorName,
-                            };
-            button.SetDynamicResource(VisualElement.StyleProperty, "VoucherButtonStyle");
-
-            Binding commandParameter = new Binding
+            Frame tile = this.CreateTile(modelOperator.OperatorName, (Color)Application.Current.Resources["voucher"], modelOperator.OperatorName.Replace(" ", ""));
+            TapGestureRecognizer tap = new TapGestureRecognizer
             {
-                Source = new ItemSelected<ContractOperatorModel>
-                {
-                    SelectedItem = modelOperator,
-                    SelectedItemIndex = rowCount
-                }
+                Command = new Command(() => viewModel.OperatorSelectedCommand.Execute(
+                    new ItemSelected<ContractOperatorModel> { SelectedItem = modelOperator, SelectedItemIndex = rowCount }))
             };
+            tile.GestureRecognizers.Add(tap);
+            tiles.Add(tile);
+            rowCount++;
+        }
 
-            Binding command = new Binding("OperatorSelectedCommand", source: this.viewModel);
-
-            // Create the behavior and bind it to the command
-            EventToCommandBehavior behavior = new EventToCommandBehavior
+        int row = 0;
+        for (int i = 0; i < tiles.Count; i += 2)
+        {
+            this.OperatorList.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
+            Grid.SetRow(tiles[i], row);
+            Grid.SetColumn(tiles[i], 0);
+            this.OperatorList.Children.Add(tiles[i]);
+            if (i + 1 < tiles.Count)
             {
-                EventName = "Clicked"
-            };
-            behavior.SetBinding(EventToCommandBehavior.CommandProperty, command);
-            behavior.SetBinding(EventToCommandBehavior.CommandParameterProperty, commandParameter);
-
-            // Attach the behavior to the button
-            button.Behaviors.Add(behavior);
-
-            this.OperatorList.Add(button);
-
-            rowCount++;
+                Grid.SetRow(tiles[i + 1], row);
+                Grid.SetColumn(tiles[i + 1], 1);
+                this.OperatorList.Children.Add(tiles[i + 1]);
+            }
+            row++;
         }
-        this.OperatorList.Add(this.AddBackButton());
-        
+
+        Frame backTile = this.CreateBackTile(viewModel.BackButtonCommand);
+        this.OperatorList.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
+        Grid.SetRow(backTile, row);
+        Grid.SetColumn(backTile, 0);
+        Grid.SetColumnSpan(backTile, 2);
+        this.OperatorList.Children.Add(backTile);
     }
 
-    private Button AddBackButton()
+    private Frame CreateTile(string text, Color backgroundColor, string automationId)
     {
-        Button button = new Button
-                        {
-                            Text = "Back",
-                            HorizontalOptions = LayoutOptions.FillAndExpand,
-                            AutomationId = "BackButton",
-                        };
-        button.SetDynamicResource(VisualElement.StyleProperty, "VoucherButtonStyle");
-
-        Binding backButtonCommand = new Binding
-                                    {
-                                        Source = this.viewModel.BackButtonCommand
-                                    };
-
-        button.SetBinding(Button.CommandProperty, backButtonCommand);
+        return new Frame
+        {
+            CornerRadius = 16,
+            HasShadow = true,
+            Padding = new Thickness(12),
+            HeightRequest = 100,
+            BackgroundColor = backgroundColor,
+            BorderColor = Colors.Transparent,
+            HorizontalOptions = LayoutOptions.FillAndExpand,
+            Content = new Label
+            {
+                Text = text,
+                TextColor = Colors.White,
+                FontAttributes = FontAttributes.Bold,
+                FontSize = 16,
+                HorizontalTextAlignment = TextAlignment.Center,
+                VerticalTextAlignment = TextAlignment.Center,
+                AutomationId = automationId
+            }
+        };
+    }
 
-        return button;
+    private Frame CreateBackTile(System.Windows.Input.ICommand command)
+    {
+        Frame frame = this.CreateTile("Back", (Color)Application.Current.Resources["MidGray"], "BackButton");
+        frame.GestureRecognizers.Add(new TapGestureRecognizer { Command = command });
+        return frame;
     }
-}
\ No newline at end of file
+}
diff --git a/TransactionProcessor.Mobile/Pages/Transactions/Voucher/VoucherSelectProductPage.xaml b/TransactionProcessor.Mobile/Pages/Transactions/Voucher/VoucherSelectProductPage.xaml
index c3b9bbdc4..1f92d1d67 100644
--- a/TransactionProcessor.Mobile/Pages/Transactions/Voucher/VoucherSelectProductPage.xaml
+++ b/TransactionProcessor.Mobile/Pages/Transactions/Voucher/VoucherSelectProductPage.xaml
@@ -4,14 +4,18 @@
              x:Class="TransactionProcessor.Mobile.Pages.Transactions.Voucher.VoucherSelectProductPage"
              xmlns:controls="clr-namespace:TransactionProcessor.Mobile.Controls"
              Shell.NavBarIsVisible="False">
-    <ScrollView>
-        <VerticalStackLayout x:Name="MainLayout" Style="{DynamicResource Layout}">
-            <controls:TitleLabel Text="{Binding Title}" AutomationId="{Binding Title}" FontSize="20" HorizontalTextAlignment="Center" VerticalOptions="End"
-               FontAttributes="Bold" Padding="20,0,0,20"/>
-            <Frame Style="{DynamicResource MainFrame}">
-                <VerticalStackLayout Spacing="10" x:Name="ProductsList">
-                </VerticalStackLayout>
+    <ScrollView BackgroundColor="{StaticResource pageBackgroundColor}">
+        <VerticalStackLayout Spacing="0">
+
+            <!-- Header -->
+            <Frame Style="{StaticResource PageHeaderStyle}">
+                <Label Text="{Binding Title}" Style="{StaticResource HeaderTitleStyle}" AutomationId="SelectaProduct"/>
             </Frame>
+
+            <VerticalStackLayout Padding="16,16,16,16" Spacing="10">
+                <Grid x:Name="ProductsList" ColumnDefinitions="*,*" ColumnSpacing="10" RowSpacing="10"/>
+            </VerticalStackLayout>
+
         </VerticalStackLayout>
     </ScrollView>
-</ContentPage>
\ No newline at end of file
+</ContentPage>
diff --git a/TransactionProcessor.Mobile/Pages/Transactions/Voucher/VoucherSelectProductPage.xaml.cs b/TransactionProcessor.Mobile/Pages/Transactions/Voucher/VoucherSelectProductPage.xaml.cs
index 199db4b68..9d18d6474 100644
--- a/TransactionProcessor.Mobile/Pages/Transactions/Voucher/VoucherSelectProductPage.xaml.cs
+++ b/TransactionProcessor.Mobile/Pages/Transactions/Voucher/VoucherSelectProductPage.xaml.cs
@@ -9,9 +9,9 @@ public partial class VoucherSelectProductPage : ContentPage
 {
     private VoucherSelectProductPageViewModel viewModel => this.BindingContext as VoucherSelectProductPageViewModel;
 
-	public VoucherSelectProductPage(VoucherSelectProductPageViewModel vm)
-	{
-		this.InitializeComponent();
+public VoucherSelectProductPage(VoucherSelectProductPageViewModel vm)
+{
+this.InitializeComponent();
         this.BindingContext = vm;
     }
 
@@ -25,64 +25,75 @@ protected override async void OnAppearing()
     private void LoadProducts(VoucherSelectProductPageViewModel viewModel)
     {
         this.ProductsList.Children.Clear();
+        this.ProductsList.RowDefinitions.Clear();
 
+        var tiles = new List<Frame>();
         Int32 rowCount = 0;
         foreach (ContractProductModel modelProduct in viewModel.Products)
         {
-            Button button = new Button
+            Frame tile = this.CreateTile(modelProduct.ProductDisplayText, (Color)Application.Current.Resources["voucher"], modelProduct.ProductDisplayText.Replace(" ", ""));
+            TapGestureRecognizer tap = new TapGestureRecognizer
             {
-                                  Text = modelProduct.ProductDisplayText,
-                                  HorizontalOptions = LayoutOptions.FillAndExpand,
-                                  AutomationId = modelProduct.ProductDisplayText,
+                Command = new Command(() => viewModel.ProductSelectedCommand.Execute(
+                    new ItemSelected<ContractProductModel> { SelectedItem = modelProduct, SelectedItemIndex = rowCount }))
             };
-            button.SetDynamicResource(VisualElement.StyleProperty, "VoucherButtonStyle");
+            tile.GestureRecognizers.Add(tap);
+            tiles.Add(tile);
+            rowCount++;
+        }
 
-            Binding commandParameter = new Binding
+        int row = 0;
+        for (int i = 0; i < tiles.Count; i += 2)
+        {
+            this.ProductsList.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
+            Grid.SetRow(tiles[i], row);
+            Grid.SetColumn(tiles[i], 0);
+            this.ProductsList.Children.Add(tiles[i]);
+            if (i + 1 < tiles.Count)
             {
-                Source = new ItemSelected<ContractProductModel>
-                {
-                    SelectedItem = modelProduct,
-                    SelectedItemIndex = rowCount
-                }
-            };
+                Grid.SetRow(tiles[i + 1], row);
+                Grid.SetColumn(tiles[i + 1], 1);
+                this.ProductsList.Children.Add(tiles[i + 1]);
+            }
+            row++;
+        }
 
-            Binding command = new Binding("ProductSelectedCommand", source: this.viewModel);
+        Frame backTile = this.CreateBackTile(viewModel.BackButtonCommand);
+        this.ProductsList.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
+        Grid.SetRow(backTile, row);
+        Grid.SetColumn(backTile, 0);
+        Grid.SetColumnSpan(backTile, 2);
+        this.ProductsList.Children.Add(backTile);
+    }
 
-            // Create the behavior and bind it to the command
-            EventToCommandBehavior behavior = new EventToCommandBehavior
+    private Frame CreateTile(string text, Color backgroundColor, string automationId)
+    {
+        return new Frame
+        {
+            CornerRadius = 16,
+            HasShadow = true,
+            Padding = new Thickness(12),
+            HeightRequest = 100,
+            BackgroundColor = backgroundColor,
+            BorderColor = Colors.Transparent,
+            HorizontalOptions = LayoutOptions.FillAndExpand,
+            Content = new Label
             {
-                EventName = "Clicked"
-            };
-            behavior.SetBinding(EventToCommandBehavior.CommandProperty, command);
-            behavior.SetBinding(EventToCommandBehavior.CommandParameterProperty, commandParameter);
-
-            // Attach the behavior to the button
-            button.Behaviors.Add(behavior);
-
-            this.ProductsList.Add(button);
-
-            rowCount++;
-        }
-        this.ProductsList.Add(this.AddBackButton());
+                Text = text,
+                TextColor = Colors.White,
+                FontAttributes = FontAttributes.Bold,
+                FontSize = 16,
+                HorizontalTextAlignment = TextAlignment.Center,
+                VerticalTextAlignment = TextAlignment.Center,
+                AutomationId = automationId
+            }
+        };
     }
 
-    private Button AddBackButton()
+    private Frame CreateBackTile(System.Windows.Input.ICommand command)
     {
-        Button button = new Button
-                        {
-                            Text = "Back",
-                            HorizontalOptions = LayoutOptions.FillAndExpand,
-                            AutomationId = "BackButton",
-                        };
-        button.SetDynamicResource(VisualElement.StyleProperty, "VoucherButtonStyle");
-
-        Binding backButtonCommand = new Binding
-                                    {
-                                        Source = this.viewModel.BackButtonCommand
-                                    };
-
-        button.SetBinding(Button.CommandProperty, backButtonCommand);
-
-        return button;
+        Frame frame = this.CreateTile("Back", (Color)Application.Current.Resources["MidGray"], "BackButton");
+        frame.GestureRecognizers.Add(new TapGestureRecognizer { Command = command });
+        return frame;
     }
-}
\ No newline at end of file
+}
diff --git a/TransactionProcessor.Mobile/Resources/Styles/LightTheme.xaml b/TransactionProcessor.Mobile/Resources/Styles/LightTheme.xaml
index a0ebe8c81..2dd38d601 100644
--- a/TransactionProcessor.Mobile/Resources/Styles/LightTheme.xaml
+++ b/TransactionProcessor.Mobile/Resources/Styles/LightTheme.xaml
@@ -30,6 +30,9 @@
     <Color x:Key="DarkGray">#212125</Color>
     <Color x:Key="MidGray">#CFCFD3</Color>
     <Color x:Key="LightGray">#EFEFEF</Color>
+    <Color x:Key="headerTextColor">#FFFFFF</Color>
+    <Color x:Key="cardBackgroundColor">#F8FAFF</Color>
+    <Color x:Key="successGreen">#27AE60</Color>
 
     <!-- Styles -->
     <Style TargetType="Page" ApplyToDerivedTypes="True">
@@ -206,4 +209,97 @@
         <Setter Property="BackgroundColor" Value="#f5f8fa"></Setter>
     </Style>
 
+    <!-- Dashboard styles -->
+    <Style x:Key="PageHeaderStyle" TargetType="Frame">
+        <Setter Property="BackgroundColor" Value="{StaticResource primary}"/>
+        <Setter Property="CornerRadius" Value="0"/>
+        <Setter Property="HasShadow" Value="True"/>
+        <Setter Property="Padding" Value="20,30,20,20"/>
+        <Setter Property="Margin" Value="0"/>
+        <Setter Property="BorderColor" Value="Transparent"/>
+    </Style>
+
+    <Style x:Key="BalanceCardStyle" TargetType="Frame">
+        <Setter Property="BackgroundColor" Value="{StaticResource successGreen}"/>
+        <Setter Property="CornerRadius" Value="16"/>
+        <Setter Property="HasShadow" Value="True"/>
+        <Setter Property="Padding" Value="20,16"/>
+        <Setter Property="Margin" Value="0,0,0,16"/>
+    </Style>
+
+    <Style x:Key="DashboardTileStyle" TargetType="Frame">
+        <Setter Property="CornerRadius" Value="16"/>
+        <Setter Property="HasShadow" Value="True"/>
+        <Setter Property="Padding" Value="12"/>
+        <Setter Property="Margin" Value="6"/>
+        <Setter Property="HeightRequest" Value="100"/>
+        <Setter Property="BorderColor" Value="Transparent"/>
+    </Style>
+
+    <!-- Action tile: full-width card replacing action buttons -->
+    <Style x:Key="ActionTileStyle" TargetType="Frame">
+        <Setter Property="CornerRadius" Value="14"/>
+        <Setter Property="HasShadow" Value="True"/>
+        <Setter Property="Padding" Value="14"/>
+        <Setter Property="HeightRequest" Value="56"/>
+        <Setter Property="BorderColor" Value="Transparent"/>
+        <Setter Property="HorizontalOptions" Value="FillAndExpand"/>
+    </Style>
+
+    <Style x:Key="TileLabelStyle" TargetType="Label">
+        <Setter Property="TextColor" Value="{StaticResource headerTextColor}"/>
+        <Setter Property="FontFamily" Value="OpenSansRegular"/>
+        <Setter Property="FontSize" Value="14"/>
+        <Setter Property="HorizontalTextAlignment" Value="Center"/>
+        <Setter Property="VerticalTextAlignment" Value="Center"/>
+    </Style>
+
+    <Style x:Key="TileIconStyle" TargetType="Label">
+        <Setter Property="TextColor" Value="{StaticResource headerTextColor}"/>
+        <Setter Property="FontSize" Value="32"/>
+        <Setter Property="HorizontalTextAlignment" Value="Center"/>
+        <Setter Property="VerticalTextAlignment" Value="Center"/>
+    </Style>
+
+    <Style x:Key="HeaderTitleStyle" TargetType="Label">
+        <Setter Property="TextColor" Value="{StaticResource headerTextColor}"/>
+        <Setter Property="FontFamily" Value="OpenSansRegular"/>
+        <Setter Property="FontSize" Value="22"/>
+        <Setter Property="FontAttributes" Value="Bold"/>
+    </Style>
+
+    <Style x:Key="HeaderSubtitleStyle" TargetType="Label">
+        <Setter Property="TextColor" Value="{StaticResource headerTextColor}"/>
+        <Setter Property="FontFamily" Value="OpenSansRegular"/>
+        <Setter Property="FontSize" Value="14"/>
+        <Setter Property="Opacity" Value="0.85"/>
+    </Style>
+
+    <Style x:Key="LoginFormFrameStyle" TargetType="Frame">
+        <Setter Property="BackgroundColor" Value="White"/>
+        <Setter Property="CornerRadius" Value="24"/>
+        <Setter Property="HasShadow" Value="True"/>
+        <Setter Property="Padding" Value="28,24"/>
+        <Setter Property="Margin" Value="20,0,20,20"/>
+        <Setter Property="BorderColor" Value="Transparent"/>
+    </Style>
+
+    <Style x:Key="FormEntryStyle" TargetType="Frame">
+        <Setter Property="BackgroundColor" Value="{StaticResource LightGray}"/>
+        <Setter Property="CornerRadius" Value="12"/>
+        <Setter Property="HasShadow" Value="False"/>
+        <Setter Property="Padding" Value="12,4"/>
+        <Setter Property="Margin" Value="0,6"/>
+        <Setter Property="BorderColor" Value="{StaticResource MidGray}"/>
+    </Style>
+
+    <Style x:Key="SectionCardStyle" TargetType="Frame">
+        <Setter Property="BackgroundColor" Value="{StaticResource cardBackgroundColor}"/>
+        <Setter Property="CornerRadius" Value="16"/>
+        <Setter Property="HasShadow" Value="True"/>
+        <Setter Property="Padding" Value="16"/>
+        <Setter Property="Margin" Value="0,0,0,12"/>
+        <Setter Property="BorderColor" Value="Transparent"/>
+    </Style>
+
 </ResourceDictionary>
\ No newline at end of file
diff --git a/TransactionProcessor.Mobile/UIServices/ShellNavigationService.cs b/TransactionProcessor.Mobile/UIServices/ShellNavigationService.cs
index f1397d1ef..0ddb05fcf 100644
--- a/TransactionProcessor.Mobile/UIServices/ShellNavigationService.cs
+++ b/TransactionProcessor.Mobile/UIServices/ShellNavigationService.cs
@@ -186,6 +186,10 @@ public async Task GoToMyAccountDetails() {
         await NavigateTo(nameof(MyAccountDetailsPage));
     }
 
+    public async Task GoToTransactionsPage() {
+        await NavigateTo("///main/transactions");
+    }
+
     public async Task GoToReportsSalesAnalysis(){
         await NavigateTo(nameof(ReportsSalesAnalysisPage));
     }