From d027aa7bef27d3a8cfe9fd842582531926155b35 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 6 Mar 2026 10:33:17 +0000
Subject: [PATCH 1/2] Initial plan


From 44d66a984a6bc229adefec01e0de1ebb731e7188 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 6 Mar 2026 10:43:02 +0000
Subject: [PATCH 2/2] Revamp My Account screens with modern tile-based layout

Co-authored-by: StuartFerguson <16325469+StuartFerguson@users.noreply.github.com>
---
 .../MyAccount/MyAccountAddressesPage.xaml     | 166 +++++++++++---
 .../Pages/MyAccount/MyAccountContactPage.xaml | 124 +++++++----
 .../Pages/MyAccount/MyAccountDetailsPage.xaml | 207 +++++++++++++-----
 .../Pages/MyAccount/MyAccountPage.xaml        | 103 ++++++---
 .../Pages/MyAccount/MyAccountPage.xaml.cs     |  96 +++++---
 5 files changed, 495 insertions(+), 201 deletions(-)

diff --git a/TransactionProcessor.Mobile/Pages/MyAccount/MyAccountAddressesPage.xaml b/TransactionProcessor.Mobile/Pages/MyAccount/MyAccountAddressesPage.xaml
index e16b0e28a..bb4c2fffe 100644
--- a/TransactionProcessor.Mobile/Pages/MyAccount/MyAccountAddressesPage.xaml
+++ b/TransactionProcessor.Mobile/Pages/MyAccount/MyAccountAddressesPage.xaml
@@ -2,44 +2,138 @@
 <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              x:Class="TransactionProcessor.Mobile.Pages.MyAccount.MyAccountAddressesPage"
-             xmlns:controls="clr-namespace:TransactionProcessor.Mobile.Controls"
-             Shell.NavBarIsVisible="False">
+             Shell.NavBarIsVisible="False"
+             Padding="0">
     <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 Spacing="0">
+
+            <!-- Header with gradient background -->
+            <Grid HeightRequest="130">
+                <Grid.Background>
+                    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
+                        <GradientStop Color="{StaticResource profile}" Offset="0.0"/>
+                        <GradientStop Color="#2aab83" Offset="1.0"/>
+                    </LinearGradientBrush>
+                </Grid.Background>
+                <VerticalStackLayout VerticalOptions="Center" HorizontalOptions="Center" Spacing="4" Padding="20">
+                    <Label Text="{Binding Title}"
+                           AutomationId="{Binding Title}"
+                           FontSize="20"
+                           FontAttributes="Bold"
+                           TextColor="White"
+                           HorizontalOptions="Center"/>
+                    <Label Text="Primary address details"
+                           FontSize="13"
+                           TextColor="White"
+                           Opacity="0.85"
+                           HorizontalOptions="Center"/>
                 </VerticalStackLayout>
-            </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}"/>
+            </Grid>
+
+            <!-- Address details card -->
+            <VerticalStackLayout Padding="20,20,20,16" Spacing="16">
+
+                <Frame Style="{StaticResource HomeCardFrame}">
+                    <VerticalStackLayout Spacing="12">
+                        <Label Text="Primary Address"
+                               FontSize="16"
+                               FontAttributes="Bold"
+                               TextColor="{StaticResource labelTextColor}"
+                               AutomationId="PrimaryAddressLabel"/>
+
+                        <BoxView HeightRequest="1" Color="{StaticResource Gray100}" Margin="0,0,0,4"/>
+
+                        <Grid ColumnDefinitions="Auto,*" RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto,Auto" ColumnSpacing="12" RowSpacing="8">
+
+                            <Label Grid.Row="0" Grid.Column="0"
+                                   Text="Line 1:"
+                                   FontAttributes="Bold"
+                                   FontSize="13"
+                                   TextColor="{StaticResource labelTextColor}"/>
+                            <Label Grid.Row="0" Grid.Column="1"
+                                   Text="{Binding Address.AddressLine1}"
+                                   FontSize="13"
+                                   TextColor="{StaticResource labelTextColor}"
+                                   AutomationId="AddressLine1Label"/>
+
+                            <Label Grid.Row="1" Grid.Column="0"
+                                   Text="Line 2:"
+                                   FontAttributes="Bold"
+                                   FontSize="13"
+                                   TextColor="{StaticResource labelTextColor}"/>
+                            <Label Grid.Row="1" Grid.Column="1"
+                                   Text="{Binding Address.AddressLine2}"
+                                   FontSize="13"
+                                   TextColor="{StaticResource labelTextColor}"
+                                   AutomationId="AddressLine2Label"/>
+
+                            <Label Grid.Row="2" Grid.Column="0"
+                                   Text="Line 3:"
+                                   FontAttributes="Bold"
+                                   FontSize="13"
+                                   TextColor="{StaticResource labelTextColor}"/>
+                            <Label Grid.Row="2" Grid.Column="1"
+                                   Text="{Binding Address.AddressLine3}"
+                                   FontSize="13"
+                                   TextColor="{StaticResource labelTextColor}"
+                                   AutomationId="AddressLine3Label"/>
+
+                            <Label Grid.Row="3" Grid.Column="0"
+                                   Text="Line 4:"
+                                   FontAttributes="Bold"
+                                   FontSize="13"
+                                   TextColor="{StaticResource labelTextColor}"/>
+                            <Label Grid.Row="3" Grid.Column="1"
+                                   Text="{Binding Address.AddressLine4}"
+                                   FontSize="13"
+                                   TextColor="{StaticResource labelTextColor}"
+                                   AutomationId="AddressLine4Label"/>
+
+                            <Label Grid.Row="4" Grid.Column="0"
+                                   Text="Post Code:"
+                                   FontAttributes="Bold"
+                                   FontSize="13"
+                                   TextColor="{StaticResource labelTextColor}"/>
+                            <Label Grid.Row="4" Grid.Column="1"
+                                   Text="{Binding Address.PostalCode}"
+                                   FontSize="13"
+                                   TextColor="{StaticResource labelTextColor}"
+                                   AutomationId="AddressPostCodeLabel"/>
+
+                            <Label Grid.Row="5" Grid.Column="0"
+                                   Text="Region:"
+                                   FontAttributes="Bold"
+                                   FontSize="13"
+                                   TextColor="{StaticResource labelTextColor}"/>
+                            <Label Grid.Row="5" Grid.Column="1"
+                                   Text="{Binding Address.Region}"
+                                   FontSize="13"
+                                   TextColor="{StaticResource labelTextColor}"
+                                   AutomationId="AddressRegionLabel"/>
+
+                            <Label Grid.Row="6" Grid.Column="0"
+                                   Text="Town:"
+                                   FontAttributes="Bold"
+                                   FontSize="13"
+                                   TextColor="{StaticResource labelTextColor}"/>
+                            <Label Grid.Row="6" Grid.Column="1"
+                                   Text="{Binding Address.Town}"
+                                   FontSize="13"
+                                   TextColor="{StaticResource labelTextColor}"
+                                   AutomationId="AddressTownLabel"/>
+                        </Grid>
+                    </VerticalStackLayout>
+                </Frame>
+
+                <Button Text="Edit Address"
+                        Style="{StaticResource StandardButton}"
+                        AutomationId="EditAddressButton"/>
+                <Button Text="Back"
+                        AutomationId="BackButton"
+                        Style="{StaticResource StandardButton}"
+                        Command="{Binding BackButtonCommand}"/>
+            </VerticalStackLayout>
+
         </VerticalStackLayout>
     </ScrollView>
 </ContentPage>
\ No newline at end of file
diff --git a/TransactionProcessor.Mobile/Pages/MyAccount/MyAccountContactPage.xaml b/TransactionProcessor.Mobile/Pages/MyAccount/MyAccountContactPage.xaml
index fc5999cbf..a256db08c 100644
--- a/TransactionProcessor.Mobile/Pages/MyAccount/MyAccountContactPage.xaml
+++ b/TransactionProcessor.Mobile/Pages/MyAccount/MyAccountContactPage.xaml
@@ -2,46 +2,94 @@
 <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              x:Class="TransactionProcessor.Mobile.Pages.MyAccount.MyAccountContactPage"
-             xmlns:controls="clr-namespace:TransactionProcessor.Mobile.Controls"
-             Shell.NavBarIsVisible="False">
+             Shell.NavBarIsVisible="False"
+             Padding="0">
     <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 Spacing="0">
+
+            <!-- Header with gradient background -->
+            <Grid HeightRequest="130">
+                <Grid.Background>
+                    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
+                        <GradientStop Color="{StaticResource profile}" Offset="0.0"/>
+                        <GradientStop Color="#2aab83" Offset="1.0"/>
+                    </LinearGradientBrush>
+                </Grid.Background>
+                <VerticalStackLayout VerticalOptions="Center" HorizontalOptions="Center" Spacing="4" Padding="20">
+                    <Label Text="{Binding Title}"
+                           AutomationId="{Binding Title}"
+                           FontSize="20"
+                           FontAttributes="Bold"
+                           TextColor="White"
+                           HorizontalOptions="Center"/>
+                    <Label Text="Primary contact details"
+                           FontSize="13"
+                           TextColor="White"
+                           Opacity="0.85"
+                           HorizontalOptions="Center"/>
                 </VerticalStackLayout>
-            </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}"/>
+            </Grid>
+
+            <!-- Contact details card -->
+            <VerticalStackLayout Padding="20,20,20,16" Spacing="16">
+
+                <Frame Style="{StaticResource HomeCardFrame}">
+                    <VerticalStackLayout Spacing="12">
+                        <Label Text="Primary Contact"
+                               FontSize="16"
+                               FontAttributes="Bold"
+                               TextColor="{StaticResource labelTextColor}"
+                               AutomationId="PrimaryContactLabel"/>
+
+                        <BoxView HeightRequest="1" Color="{StaticResource Gray100}" Margin="0,0,0,4"/>
+
+                        <Grid ColumnDefinitions="Auto,*" RowDefinitions="Auto,Auto,Auto" ColumnSpacing="12" RowSpacing="12">
+
+                            <Label Grid.Row="0" Grid.Column="0"
+                                   Text="Name:"
+                                   FontAttributes="Bold"
+                                   FontSize="13"
+                                   TextColor="{StaticResource labelTextColor}"/>
+                            <Label Grid.Row="0" Grid.Column="1"
+                                   Text="{Binding Contact.Name}"
+                                   FontSize="13"
+                                   TextColor="{StaticResource labelTextColor}"
+                                   AutomationId="ContactNameLabel"/>
+
+                            <Label Grid.Row="1" Grid.Column="0"
+                                   Text="Email:"
+                                   FontAttributes="Bold"
+                                   FontSize="13"
+                                   TextColor="{StaticResource labelTextColor}"/>
+                            <Label Grid.Row="1" Grid.Column="1"
+                                   Text="{Binding Contact.EmailAddress}"
+                                   FontSize="13"
+                                   TextColor="{StaticResource labelTextColor}"
+                                   AutomationId="ContactEmailAddressLabel"/>
+
+                            <Label Grid.Row="2" Grid.Column="0"
+                                   Text="Mobile:"
+                                   FontAttributes="Bold"
+                                   FontSize="13"
+                                   TextColor="{StaticResource labelTextColor}"/>
+                            <Label Grid.Row="2" Grid.Column="1"
+                                   Text="{Binding Contact.MobileNumber}"
+                                   FontSize="13"
+                                   TextColor="{StaticResource labelTextColor}"
+                                   AutomationId="ContactMobileNumberLabel"/>
+                        </Grid>
+                    </VerticalStackLayout>
+                </Frame>
+
+                <Button Text="Edit Contact"
+                        Style="{StaticResource StandardButton}"
+                        AutomationId="EditContactButton"/>
+                <Button Text="Back"
+                        AutomationId="BackButton"
+                        Style="{StaticResource StandardButton}"
+                        Command="{Binding BackButtonCommand}"/>
+            </VerticalStackLayout>
+
         </VerticalStackLayout>
     </ScrollView>
 </ContentPage>
\ No newline at end of file
diff --git a/TransactionProcessor.Mobile/Pages/MyAccount/MyAccountDetailsPage.xaml b/TransactionProcessor.Mobile/Pages/MyAccount/MyAccountDetailsPage.xaml
index c52902387..1a99c0128 100644
--- a/TransactionProcessor.Mobile/Pages/MyAccount/MyAccountDetailsPage.xaml
+++ b/TransactionProcessor.Mobile/Pages/MyAccount/MyAccountDetailsPage.xaml
@@ -2,67 +2,156 @@
 <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              x:Class="TransactionProcessor.Mobile.Pages.MyAccount.MyAccountDetailsPage"
-             xmlns:controls="clr-namespace:TransactionProcessor.Mobile.Controls"
-             Shell.NavBarIsVisible="False">
+             Shell.NavBarIsVisible="False"
+             Padding="0">
     <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="Name:" FontAttributes="Bold"
-                       HorizontalTextAlignment="Start"
-                       HorizontalOptions="Fill"/>
-                    <Label Text="{Binding MerchantName}"
-                       HorizontalTextAlignment="Start"
-                       HorizontalOptions="Fill"  Margin="0,0,0,10"
-                       AutomationId="MerchantNameLabel"/>
-
-                    <Label Text="Balance:" FontAttributes="Bold"
-                       HorizontalTextAlignment="Start"
-                       HorizontalOptions="Fill"/>
-                    <Label Text="{Binding Balance}"
-                       HorizontalTextAlignment="Start"
-                       HorizontalOptions="Fill" Margin="0,0,0,10"
-                       AutomationId="BalanceLabel"/>
-
-                    <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"/>
-
-                    <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"/>
-
-                    <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 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 Spacing="0">
+
+            <!-- Header with gradient background -->
+            <Grid HeightRequest="130">
+                <Grid.Background>
+                    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
+                        <GradientStop Color="{StaticResource profile}" Offset="0.0"/>
+                        <GradientStop Color="#2aab83" Offset="1.0"/>
+                    </LinearGradientBrush>
+                </Grid.Background>
+                <VerticalStackLayout VerticalOptions="Center" HorizontalOptions="Center" Spacing="4" Padding="20">
+                    <Label Text="{Binding Title}"
+                           AutomationId="{Binding Title}"
+                           FontSize="20"
+                           FontAttributes="Bold"
+                           TextColor="White"
+                           HorizontalOptions="Center"/>
+                    <Label Text="Merchant account information"
+                           FontSize="13"
+                           TextColor="White"
+                           Opacity="0.85"
+                           HorizontalOptions="Center"/>
                 </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}"/>
+            </Grid>
+
+            <!-- Account details cards -->
+            <VerticalStackLayout Padding="20,20,20,16" Spacing="16">
+
+                <!-- Merchant info card -->
+                <Frame Style="{StaticResource HomeCardFrame}">
+                    <VerticalStackLayout Spacing="12">
+                        <Label Text="Merchant Details"
+                               FontSize="16"
+                               FontAttributes="Bold"
+                               TextColor="{StaticResource labelTextColor}"/>
+
+                        <BoxView HeightRequest="1" Color="{StaticResource Gray100}" Margin="0,0,0,4"/>
+
+                        <Grid ColumnDefinitions="Auto,*" RowDefinitions="Auto" ColumnSpacing="12" RowSpacing="8">
+                            <Label Grid.Row="0" Grid.Column="0"
+                                   Text="Name:"
+                                   FontAttributes="Bold"
+                                   FontSize="13"
+                                   TextColor="{StaticResource labelTextColor}"/>
+                            <Label Grid.Row="0" Grid.Column="1"
+                                   Text="{Binding MerchantName}"
+                                   FontSize="13"
+                                   TextColor="{StaticResource labelTextColor}"
+                                   AutomationId="MerchantNameLabel"/>
+                        </Grid>
+                    </VerticalStackLayout>
+                </Frame>
+
+                <!-- Balance card -->
+                <Frame Style="{StaticResource HomeCardFrame}">
+                    <VerticalStackLayout Spacing="12">
+                        <Label Text="Balances"
+                               FontSize="16"
+                               FontAttributes="Bold"
+                               TextColor="{StaticResource labelTextColor}"/>
+
+                        <BoxView HeightRequest="1" Color="{StaticResource Gray100}" Margin="0,0,0,4"/>
+
+                        <Grid ColumnDefinitions="*,*" RowDefinitions="Auto,Auto" ColumnSpacing="12" RowSpacing="8">
+                            <Label Grid.Row="0" Grid.Column="0"
+                                   Text="Balance"
+                                   FontAttributes="Bold"
+                                   FontSize="12"
+                                   TextColor="{StaticResource labelTextColor}"/>
+                            <Label Grid.Row="1" Grid.Column="0"
+                                   Text="{Binding Balance}"
+                                   FontSize="14"
+                                   TextColor="{StaticResource profile}"
+                                   FontAttributes="Bold"
+                                   AutomationId="BalanceLabel"/>
+
+                            <Label Grid.Row="0" Grid.Column="1"
+                                   Text="Available Balance"
+                                   FontAttributes="Bold"
+                                   FontSize="12"
+                                   TextColor="{StaticResource labelTextColor}"/>
+                            <Label Grid.Row="1" Grid.Column="1"
+                                   Text="{Binding AvailableBalance}"
+                                   FontSize="14"
+                                   TextColor="{StaticResource profile}"
+                                   FontAttributes="Bold"
+                                   AutomationId="AvailableBalanceLabel"/>
+                        </Grid>
+                    </VerticalStackLayout>
+                </Frame>
+
+                <!-- Statement card -->
+                <Frame Style="{StaticResource HomeCardFrame}">
+                    <VerticalStackLayout Spacing="12">
+                        <Label Text="Statement"
+                               FontSize="16"
+                               FontAttributes="Bold"
+                               TextColor="{StaticResource labelTextColor}"/>
+
+                        <BoxView HeightRequest="1" Color="{StaticResource Gray100}" Margin="0,0,0,4"/>
+
+                        <Grid ColumnDefinitions="Auto,*" RowDefinitions="Auto,Auto,Auto" ColumnSpacing="12" RowSpacing="8">
+                            <Label Grid.Row="0" Grid.Column="0"
+                                   Text="Last Statement:"
+                                   FontAttributes="Bold"
+                                   FontSize="13"
+                                   TextColor="{StaticResource labelTextColor}"/>
+                            <Label Grid.Row="0" Grid.Column="1"
+                                   Text="{Binding LastStatementDate, StringFormat='{0:dd/MM/yyyy}'}"
+                                   FontSize="13"
+                                   TextColor="{StaticResource labelTextColor}"
+                                   AutomationId="LastStatementDateLabel"/>
+
+                            <Label Grid.Row="1" Grid.Column="0"
+                                   Text="Next Statement:"
+                                   FontAttributes="Bold"
+                                   FontSize="13"
+                                   TextColor="{StaticResource labelTextColor}"/>
+                            <Label Grid.Row="1" Grid.Column="1"
+                                   Text="{Binding NextStatementDate, StringFormat='{0:dd/MM/yyyy}'}"
+                                   FontSize="13"
+                                   TextColor="{StaticResource labelTextColor}"
+                                   AutomationId="NextStatementDateLabel"/>
+
+                            <Label Grid.Row="2" Grid.Column="0"
+                                   Text="Settlement:"
+                                   FontAttributes="Bold"
+                                   FontSize="13"
+                                   TextColor="{StaticResource labelTextColor}"/>
+                            <Label Grid.Row="2" Grid.Column="1"
+                                   Text="{Binding SettlementSchedule}"
+                                   FontSize="13"
+                                   TextColor="{StaticResource labelTextColor}"
+                                   AutomationId="SettlementScheduleLabel"/>
+                        </Grid>
+                    </VerticalStackLayout>
+                </Frame>
+
+                <Button Text="Edit Details"
+                        Style="{StaticResource StandardButton}"
+                        AutomationId="EditDetailsButton"/>
+                <Button Text="Back"
+                        AutomationId="BackButton"
+                        Style="{StaticResource StandardButton}"
+                        Command="{Binding BackButtonCommand}"/>
+            </VerticalStackLayout>
+
         </VerticalStackLayout>
     </ScrollView>
 </ContentPage>
\ No newline at end of file
diff --git a/TransactionProcessor.Mobile/Pages/MyAccount/MyAccountPage.xaml b/TransactionProcessor.Mobile/Pages/MyAccount/MyAccountPage.xaml
index f5f62c8a9..c17e081d1 100644
--- a/TransactionProcessor.Mobile/Pages/MyAccount/MyAccountPage.xaml
+++ b/TransactionProcessor.Mobile/Pages/MyAccount/MyAccountPage.xaml
@@ -3,42 +3,81 @@
                                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                                x:Class="TransactionProcessor.Mobile.Pages.MyAccount.MyAccountPage"
                                xmlns:common="clr-namespace:TransactionProcessor.Mobile.Pages.Common"
-                               xmlns:controls="clr-namespace:TransactionProcessor.Mobile.Controls"
-                               Shell.NavBarIsVisible="False">
+                               Shell.NavBarIsVisible="False"
+                               Padding="0">
     <ScrollView>
-        <VerticalStackLayout Style="{DynamicResource Layout}">
+        <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"/>
+            <!-- Header with gradient background -->
+            <Grid HeightRequest="160">
+                <Grid.Background>
+                    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
+                        <GradientStop Color="{StaticResource profile}" Offset="0.0"/>
+                        <GradientStop Color="#2aab83" Offset="1.0"/>
+                    </LinearGradientBrush>
+                </Grid.Background>
+                <VerticalStackLayout VerticalOptions="Center" HorizontalOptions="Center" Spacing="4" Padding="20">
+                    <Image Source="profilebutton.svg" HeightRequest="52" WidthRequest="52" HorizontalOptions="Center"/>
+                    <Label Text="{Binding Title}"
+                           AutomationId="{Binding Title}"
+                           FontSize="20"
+                           FontAttributes="Bold"
+                           TextColor="White"
+                           HorizontalOptions="Center"/>
                     <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}"/>
+                           FontSize="13"
+                           TextColor="White"
+                           Opacity="0.9"
+                           HorizontalOptions="Center"/>
                 </VerticalStackLayout>
-            </Frame>
+            </Grid>
+
+            <!-- Account info card -->
+            <VerticalStackLayout Padding="20,20,20,0" Spacing="16">
+                <Frame Style="{StaticResource HomeCardFrame}">
+                    <Grid ColumnDefinitions="*,*" RowDefinitions="Auto,Auto" ColumnSpacing="8" RowSpacing="4">
+                        <Label Grid.Row="0" Grid.Column="0"
+                               Text="Merchant Name"
+                               FontSize="12"
+                               FontAttributes="Bold"
+                               TextColor="{StaticResource labelTextColor}"/>
+                        <Label Grid.Row="1" Grid.Column="0"
+                               Text="{Binding MerchantName}"
+                               FontSize="14"
+                               AutomationId="MerchantNameLabel"
+                               TextColor="{StaticResource labelTextColor}"/>
+                        <Label Grid.Row="0" Grid.Column="1"
+                               Text="Last Login"
+                               FontSize="12"
+                               FontAttributes="Bold"
+                               TextColor="{StaticResource labelTextColor}"/>
+                        <Label Grid.Row="1" Grid.Column="1"
+                               Text="{Binding LastLogin, StringFormat='{0:dd/MM/yyyy HH:mm}'}"
+                               FontSize="14"
+                               AutomationId="LastLoginLabel"
+                               TextColor="{StaticResource labelTextColor}"/>
+                    </Grid>
+                </Frame>
+            </VerticalStackLayout>
+
+            <!-- Account option tiles -->
+            <VerticalStackLayout Padding="20,16,20,16" Spacing="16">
+                <Label Text="Account Options"
+                       FontSize="16"
+                       FontAttributes="Bold"
+                       TextColor="{StaticResource labelTextColor}"/>
+
+                <FlexLayout x:Name="MyAccountOptionsList"
+                            Wrap="Wrap"
+                            JustifyContent="SpaceEvenly"
+                            AlignItems="Start"/>
+
+                <Button Text="Back"
+                        AutomationId="BackButton"
+                        Style="{StaticResource StandardButton}"
+                        Command="{Binding BackButtonCommand}"/>
+            </VerticalStackLayout>
+
         </VerticalStackLayout>
     </ScrollView>
 </common:NoBackWithoutLogoutPage>
\ No newline at end of file
diff --git a/TransactionProcessor.Mobile/Pages/MyAccount/MyAccountPage.xaml.cs b/TransactionProcessor.Mobile/Pages/MyAccount/MyAccountPage.xaml.cs
index f8a4f0c18..22fc0d17d 100644
--- a/TransactionProcessor.Mobile/Pages/MyAccount/MyAccountPage.xaml.cs
+++ b/TransactionProcessor.Mobile/Pages/MyAccount/MyAccountPage.xaml.cs
@@ -1,4 +1,3 @@
-using CommunityToolkit.Maui.Behaviors;
 using TransactionProcessor.Mobile.BusinessLogic.Common;
 using TransactionProcessor.Mobile.BusinessLogic.Models;
 using TransactionProcessor.Mobile.BusinessLogic.ViewModels.MyAccount;
@@ -15,7 +14,6 @@ public MyAccountPage(MyAccountPageViewModel vm)
         this.InitializeComponent();
         
         BindingContext = vm;
-        
     }
 
     protected override async void OnAppearing()
@@ -27,48 +25,74 @@ protected override async void OnAppearing()
 
     private void LoadOptions(MyAccountPageViewModel viewModel)
     {
-        this.MyAccountOptionsList.Clear();
+        this.MyAccountOptionsList.Children.Clear();
 
         Int32 rowCount = 0;
         foreach (ListViewItem modelOption in viewModel.MyAccountOptions)
         {
-            Button button = new Button
-            {
-                Text = modelOption.Title,
-                HorizontalOptions = LayoutOptions.FillAndExpand,
-                AutomationId = $"{modelOption.Title.Replace(" ", "")}Button",
-            };
-            button.SetDynamicResource(VisualElement.StyleProperty, "MyAccountButtonStyle");
+            Frame tile = this.CreateOptionTile(modelOption, rowCount);
+            this.MyAccountOptionsList.Children.Add(tile);
+            rowCount++;
+        }
+    }
 
-            Binding commandParameter = new Binding
-            {
-                Source = new ItemSelected<ListViewItem>
-                {
-                    SelectedItem = modelOption,
-                    SelectedItemIndex = rowCount
-                }
-            };
-
-            Binding command = new Binding
-            {
-                Source = viewModel.OptionSelectedCommand
-            };
-            
-            // Create the behavior and bind it to the command
-            EventToCommandBehavior behavior = new EventToCommandBehavior
+    private Frame CreateOptionTile(ListViewItem modelOption, Int32 rowCount)
+    {
+        Frame tile = new Frame();
+        tile.SetDynamicResource(VisualElement.StyleProperty, "SelectionTileFrame");
+        tile.AutomationId = $"{modelOption.Title.Replace(" ", "")}Button";
+
+        String iconSource = modelOption.Title switch
+        {
+            "Addresses" => "homebutton.svg",
+            "Contacts" => "supportbutton.svg",
+            "Account Info" => "reportbutton.svg",
+            "Logout" => "backbutton.svg",
+            _ => "profilebutton.svg"
+        };
+
+        Image icon = new Image
+        {
+            Source = iconSource,
+            HeightRequest = 36,
+            WidthRequest = 36,
+            HorizontalOptions = LayoutOptions.Center
+        };
+
+        Label nameLabel = new Label
+        {
+            Text = modelOption.Title,
+            HorizontalTextAlignment = TextAlignment.Center,
+            HorizontalOptions = LayoutOptions.Center,
+            FontAttributes = FontAttributes.Bold,
+            FontSize = 13
+        };
+        nameLabel.SetDynamicResource(Label.TextColorProperty, "profile");
+
+        tile.Content = new VerticalStackLayout
+        {
+            Spacing = 8,
+            HorizontalOptions = LayoutOptions.Center,
+            Children = { icon, nameLabel }
+        };
+
+        Binding commandParameter = new Binding
+        {
+            Source = new ItemSelected<ListViewItem>
             {
-                EventName = "Clicked"
-            };
-            behavior.SetBinding(EventToCommandBehavior.CommandProperty, command);
-            behavior.SetBinding(EventToCommandBehavior.CommandParameterProperty, commandParameter);
+                SelectedItem = modelOption,
+                SelectedItemIndex = rowCount
+            }
+        };
 
-            // Attach the behavior to the button
-            button.Behaviors.Add(behavior);
+        Binding command = new Binding("OptionSelectedCommand", source: this.viewModel);
 
-            this.MyAccountOptionsList.Add(button);
+        TapGestureRecognizer tapGesture = new TapGestureRecognizer();
+        tapGesture.SetBinding(TapGestureRecognizer.CommandProperty, command);
+        tapGesture.SetBinding(TapGestureRecognizer.CommandParameterProperty, commandParameter);
 
-            rowCount++;
-        }
-    }
+        tile.GestureRecognizers.Add(tapGesture);
 
+        return tile;
+    }
 }
\ No newline at end of file