diff --git a/TransactionMobile.Maui/App.xaml b/TransactionMobile.Maui/App.xaml
index fbd5a2fa..1918ee41 100644
--- a/TransactionMobile.Maui/App.xaml
+++ b/TransactionMobile.Maui/App.xaml
@@ -3,23 +3,6 @@
              xmlns:local="clr-namespace:TransactionMobile.Maui"
              x:Class="TransactionMobile.Maui.App">
     <Application.Resources>
-        <ResourceDictionary>
-
-            <Color x:Key="PrimaryColor">#512bdf</Color>
-            <Color x:Key="SecondaryColor">White</Color>
-
-            <Style TargetType="Label">
-                <Setter Property="TextColor" Value="{DynamicResource PrimaryColor}" />
-                <Setter Property="FontFamily" Value="OpenSansRegular" />
-            </Style>
-
-            <Style TargetType="Button">
-                <Setter Property="TextColor" Value="{DynamicResource SecondaryColor}" />
-                <Setter Property="FontFamily" Value="OpenSansRegular" />
-                <Setter Property="BackgroundColor" Value="{DynamicResource PrimaryColor}" />
-                <Setter Property="Padding" Value="14,10" />
-            </Style>
-
-        </ResourceDictionary>
+        <ResourceDictionary Source="Resources/Styles/LightTheme.xaml"/>
     </Application.Resources>
 </Application>
diff --git a/TransactionMobile.Maui/Pages/LoginPage.xaml b/TransactionMobile.Maui/Pages/LoginPage.xaml
index e80bd498..b649956b 100644
--- a/TransactionMobile.Maui/Pages/LoginPage.xaml
+++ b/TransactionMobile.Maui/Pages/LoginPage.xaml
@@ -7,11 +7,49 @@
              Shell.FlyoutItemIsVisible="False"
              BackgroundColor="White">
     <ContentPage.Content>
-        <StackLayout>
-            <Button Text="Login"
-                    Command="{Binding LoginCommand}"
-                    HorizontalOptions="CenterAndExpand"
-                    VerticalOptions="CenterAndExpand" />
-        </StackLayout>
+        <!-- Main structure-->
+        <Grid>
+            <Grid.RowDefinitions>
+                <RowDefinition Height="Auto"></RowDefinition>
+                <RowDefinition Height="Auto"></RowDefinition>
+                <RowDefinition Height="Auto"></RowDefinition>
+            </Grid.RowDefinitions>
+            <!--Main image-->
+            <Image Grid.RowSpan="2" Grid.Row="0" Source="Resources/loginimage.jpg" VerticalOptions="Start" Aspect="AspectFit"/>
+
+            <!-- Title-->
+            <Label Grid.Row="1" Text="Log In" FontSize="34" VerticalOptions="End" FontAttributes="Bold" Padding="20,0,0,20"/>
+
+            <Frame Grid.Row="2" HasShadow="True" Padding="25,50" Margin="10,0,10,10" VerticalOptions="CenterAndExpand" 
+                   CornerRadius="20" Opacity="0.9" BackgroundColor="#E5E9F0">
+                <Grid ColumnDefinitions="Auto,*">
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="50"></RowDefinition>
+                        <RowDefinition Height="50"></RowDefinition>
+                        <RowDefinition Height="50"></RowDefinition>
+                        <RowDefinition Height="50"></RowDefinition>
+                    </Grid.RowDefinitions>
+
+                    <Entry x:Name="UserNameEntry"
+                           Grid.Row="0"
+                           Placeholder="User name or email address"
+                           AutomationId="UserNameEntry"
+                           Style="{DynamicResource UserNameEntryStyle}"
+                           Grid.ColumnSpan="2">
+                    </Entry>
+
+                    <Entry x:Name="PasswordEntry"
+                           Grid.Row="1"
+                           Placeholder="******"
+                           AutomationId="PasswordEntry"
+                           Style="{DynamicResource PasswordEntryStyle}"
+                           Grid.ColumnSpan="2">
+                    </Entry>
+
+                    <Button Grid.ColumnSpan="2" Grid.Row="2" Text="Continue" Style="{StaticResource StandardButton}" Command="{Binding LoginCommand}"/>
+                    <Label Grid.ColumnSpan="2" Grid.Row="3" Text="Forgot your password?" TextColor="{StaticResource P}" FontAttributes="Bold"/>
+                </Grid>
+            </Frame>
+        </Grid>
     </ContentPage.Content>
 </ContentPage>
\ No newline at end of file
diff --git a/TransactionMobile.Maui/Pages/Transactions/MobileTopup/MobileTopupFailedPage.xaml b/TransactionMobile.Maui/Pages/Transactions/MobileTopup/MobileTopupFailedPage.xaml
index 9f307394..4c20e452 100644
--- a/TransactionMobile.Maui/Pages/Transactions/MobileTopup/MobileTopupFailedPage.xaml
+++ b/TransactionMobile.Maui/Pages/Transactions/MobileTopup/MobileTopupFailedPage.xaml
@@ -1,25 +1,24 @@
-<?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="TransactionMobile.Maui.MobileTopupFailedPage"
-             Title="{Binding Title}"
-             BackgroundColor="White">
-    <StackLayout>
-        <Label
-            Margin="0,40,0,0"
-            Style="{StaticResource LabelStyle}"
-            HorizontalTextAlignment="Center"
-            AutomationId="MobileTopupFailed"
-            Text="MOBILE TOPUP FAILURE" />
+             x:Class="TransactionMobile.Maui.MobileTopupFailedPage" Title="{Binding Title}"
+             Shell.NavBarIsVisible="False" BackgroundColor="White">
+    <VerticalStackLayout x:Name="MainLayout">
+        <Label Text="{Binding Title}" FontSize="24" HorizontalOptions="Center" VerticalOptions="End"
+               FontAttributes="Bold" Padding="20,0,0,20"/>
+        <Frame HasShadow="True" Padding="25,50" Margin="10,0,10,10" VerticalOptions="CenterAndExpand" CornerRadius="20"
+               Opacity="0.9" BackgroundColor="#E5E9F0">
+            <VerticalStackLayout Spacing="10">
 
-        <Button
-            x:Name="CancelButton"
-            Grid.Row="5"
-            Margin="0,16"
-            MinimumWidthRequest="250"
-            WidthRequest="400"
-            Text="Cancel"
-            Command="{Binding CancelledCommand}"
-            AutomationId="CancelButton"/>
-    </StackLayout>
+                <Image Source="Resources/PaymentFailure.svg" VerticalOptions="Start" Aspect="AspectFit"/>
+
+                <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."/>
+
+                <Button x:Name="CancelButton" Grid.Row="5" Margin="0,16"
+                        Text="Cancel" Command="{Binding CancelledCommand}"
+                        Style="{DynamicResource MobileTopupButtonStyle}" AutomationId="CancelButton"/>
+            </VerticalStackLayout>
+        </Frame>
+    </VerticalStackLayout>
 </ContentPage>
\ No newline at end of file
diff --git a/TransactionMobile.Maui/Pages/Transactions/MobileTopup/MobileTopupPerformTopupPage.xaml b/TransactionMobile.Maui/Pages/Transactions/MobileTopup/MobileTopupPerformTopupPage.xaml
index 388297f3..3233a298 100644
--- a/TransactionMobile.Maui/Pages/Transactions/MobileTopup/MobileTopupPerformTopupPage.xaml
+++ b/TransactionMobile.Maui/Pages/Transactions/MobileTopup/MobileTopupPerformTopupPage.xaml
@@ -4,46 +4,58 @@
              x:Class="TransactionMobile.Maui.MobileTopupPerformTopupPage"
              xmlns:behaviors="clr-namespace:CommunityToolkit.Maui.Behaviors;assembly=CommunityToolkit.Maui"
              Title="{Binding Title}"
+             Shell.NavBarIsVisible="False"
              BackgroundColor="White">
-    <StackLayout>
-        <Entry x:Name="CustomerMobileNumberEntry"
+    <VerticalStackLayout x:Name="MainLayout">
+    <Label Text="{Binding Title}" FontSize="24" HorizontalOptions="Center"  VerticalOptions="End" FontAttributes="Bold" Padding="20,0,0,20"/>
+    <Frame HasShadow="True" Padding="25,50" Margin="10,0,10,10" VerticalOptions="CenterAndExpand" 
+           CornerRadius="20" Opacity="0.9" BackgroundColor="#E5E9F0">
+        <VerticalStackLayout Spacing="10">
+            <Entry x:Name="CustomerMobileNumberEntry"
                Placeholder="Customer Mobile Number"
+               Style="{DynamicResource MobileNumberEntryStyle}"
                AutomationId="CustomerMobileNumberEntry"
                Text="{Binding CustomerMobileNumber}"
                Keyboard="Numeric">
-            <Entry.Behaviors>
-                <behaviors:EventToCommandBehavior             
+                <Entry.Behaviors>
+                    <behaviors:EventToCommandBehavior             
                     EventName="Completed"  
                     Command="{Binding CustomerMobileNumberEntryCompletedCommand}" />
-            </Entry.Behaviors>
-        </Entry>
-
-        <Entry x:Name="TopupAmountEntry"
+                </Entry.Behaviors>
+            </Entry>
+            
+            <Entry x:Name="TopupAmountEntry"
                Placeholder="100"
                AutomationId="TopupAmountEntry"
+               Style="{DynamicResource AmountEntryStyle}"
                Text="{Binding TopupAmount}"
                Keyboard="Numeric">
-            <Entry.Behaviors>
-                <behaviors:EventToCommandBehavior             
+                <Entry.Behaviors>
+                    <behaviors:EventToCommandBehavior             
                     EventName="Completed"  
                     Command="{Binding TopupAmountEntryCompletedCommand}" />
-            </Entry.Behaviors>
-        </Entry>
-        
-        <Entry x:Name="CustomerEmailAddressEntry"
+                </Entry.Behaviors>
+            </Entry>
+            
+            <Entry x:Name="CustomerEmailAddressEntry"
                Placeholder="customeremail@email.com"
                AutomationId="CustomerEmailAddressEntry"
+               Style="{DynamicResource EmailAddressEntryStyle}"
                Text="{Binding CustomerEmailAddress}">
-            <Entry.Behaviors>
-                <behaviors:EventToCommandBehavior             
+                <Entry.Behaviors>
+                    <behaviors:EventToCommandBehavior             
                     EventName="Completed"  
                     Command="{Binding CustomerEmailAddressEntryCompletedCommand}" />
-            </Entry.Behaviors>
-        </Entry>
-
-        <Button x:Name="PerformTopupButton" 
+                </Entry.Behaviors>
+            </Entry>
+            
+            <Button x:Name="PerformTopupButton" 
                 Text="Perform Topup"
+                Style="{DynamicResource MobileTopupButtonStyle}"
                 Command="{Binding PerformTopupCommand}"
                 AutomationId="PerformTopupButton"/>
-    </StackLayout>
+            <!--Style="{DynamicResource MobileTopupButtonStyle}"-->
+        </VerticalStackLayout>
+    </Frame>
+    </VerticalStackLayout>
 </ContentPage>
\ No newline at end of file
diff --git a/TransactionMobile.Maui/Pages/Transactions/MobileTopup/MobileTopupPerformTopupPage.xaml.cs b/TransactionMobile.Maui/Pages/Transactions/MobileTopup/MobileTopupPerformTopupPage.xaml.cs
index 2032276e..80b887d7 100644
--- a/TransactionMobile.Maui/Pages/Transactions/MobileTopup/MobileTopupPerformTopupPage.xaml.cs
+++ b/TransactionMobile.Maui/Pages/Transactions/MobileTopup/MobileTopupPerformTopupPage.xaml.cs
@@ -13,7 +13,7 @@ public MobileTopupPerformTopupPage(MobileTopupPerformTopupPageViewModel vm)
         BindingContext = vm;
         vm.OnCustomerMobileNumberEntryCompleted = () =>
                                                   {
-                                                      if (this.TopupAmountEntry.IsEnabled)
+                                                      if (this.TopupAmountEntry.IsReadOnly)
                                                       {
                                                           this.TopupAmountEntry.Focus();
                                                       }
@@ -37,7 +37,7 @@ protected override async void OnAppearing()
         base.OnAppearing();
         if (viewModel.TopupAmount > 0)
         {
-            this.TopupAmountEntry.IsEnabled = false;
+            this.TopupAmountEntry.IsReadOnly = true;
         }
     }
 
diff --git a/TransactionMobile.Maui/Pages/Transactions/MobileTopup/MobileTopupSelectOperatorPage.xaml b/TransactionMobile.Maui/Pages/Transactions/MobileTopup/MobileTopupSelectOperatorPage.xaml
index db0c6333..55b953bf 100644
--- a/TransactionMobile.Maui/Pages/Transactions/MobileTopup/MobileTopupSelectOperatorPage.xaml
+++ b/TransactionMobile.Maui/Pages/Transactions/MobileTopup/MobileTopupSelectOperatorPage.xaml
@@ -3,9 +3,14 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              x:Class="TransactionMobile.Maui.MobileTopupSelectOperatorPage"
              Title="{Binding Title}"
+             Shell.NavBarIsVisible="False"
              BackgroundColor="White">
-    <StackLayout>
-        <Grid x:Name="OperatorGrid" HorizontalOptions="CenterAndExpand" VerticalOptions="FillAndExpand">
-        </Grid>
-    </StackLayout>
+    <VerticalStackLayout x:Name="MainLayout">
+        <Label Text="{Binding Title}" FontSize="24" HorizontalOptions="Center"  VerticalOptions="End" FontAttributes="Bold" Padding="20,0,0,20"/>
+        <Frame HasShadow="True" Padding="25,50" Margin="10,0,10,10" VerticalOptions="CenterAndExpand" 
+           CornerRadius="20" Opacity="0.9" BackgroundColor="#E5E9F0">
+            <VerticalStackLayout x:Name="OperatorList" Spacing="10">
+            </VerticalStackLayout>
+        </Frame>
+    </VerticalStackLayout>
 </ContentPage>
\ No newline at end of file
diff --git a/TransactionMobile.Maui/Pages/Transactions/MobileTopup/MobileTopupSelectOperatorPage.xaml.cs b/TransactionMobile.Maui/Pages/Transactions/MobileTopup/MobileTopupSelectOperatorPage.xaml.cs
index f389a8c5..e8d732de 100644
--- a/TransactionMobile.Maui/Pages/Transactions/MobileTopup/MobileTopupSelectOperatorPage.xaml.cs
+++ b/TransactionMobile.Maui/Pages/Transactions/MobileTopup/MobileTopupSelectOperatorPage.xaml.cs
@@ -22,16 +22,7 @@ protected override async void OnAppearing()
 
     private void LoadOperators(MobileTopupSelectOperatorPageViewModel viewModel)
     {
-        RowDefinitionCollection rowDefinitionCollection = new RowDefinitionCollection();
-        for (Int32 i = 0; i < viewModel.Operators.Count; i++)
-        {
-            rowDefinitionCollection.Add(new RowDefinition
-                                        {
-                                            Height = 60
-                                        });
-        }
-
-        this.OperatorGrid.RowDefinitions = rowDefinitionCollection;
+        this.OperatorList.Children.Clear();
 
         Int32 rowCount = 0;
         foreach (ContractOperatorModel modelOperator in viewModel.Operators)
@@ -42,7 +33,7 @@ private void LoadOperators(MobileTopupSelectOperatorPageViewModel viewModel)
                                 HorizontalOptions = LayoutOptions.FillAndExpand,
                                 AutomationId = modelOperator.OperatorName,
                             };
-            //button.SetDynamicResource(VisualElement.StyleProperty, "MobileTopupButtonStyle");
+            button.SetDynamicResource(VisualElement.StyleProperty, "MobileTopupButtonStyle");
             Binding commandParameter = new Binding()
                                        {
                                            Source = new ItemSelected<ContractOperatorModel>(){ 
@@ -58,8 +49,8 @@ private void LoadOperators(MobileTopupSelectOperatorPageViewModel viewModel)
             
             button.SetBinding(Button.CommandProperty, command);
             button.SetBinding(Button.CommandParameterProperty, commandParameter);
-
-            this.OperatorGrid.Add(button, 0, rowCount);
+            
+            this.OperatorList.Children.Add(button);
 
             rowCount++;
         }
diff --git a/TransactionMobile.Maui/Pages/Transactions/MobileTopup/MobileTopupSelectProductPage.xaml b/TransactionMobile.Maui/Pages/Transactions/MobileTopup/MobileTopupSelectProductPage.xaml
index ac21a46b..d7045d3e 100644
--- a/TransactionMobile.Maui/Pages/Transactions/MobileTopup/MobileTopupSelectProductPage.xaml
+++ b/TransactionMobile.Maui/Pages/Transactions/MobileTopup/MobileTopupSelectProductPage.xaml
@@ -3,9 +3,15 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              x:Class="TransactionMobile.Maui.MobileTopupSelectProductPage"
              Title="{Binding Title}"
+             Shell.NavBarIsVisible="False"
              BackgroundColor="White">
-    <StackLayout>
-        <Grid x:Name="ProductsGrid" HorizontalOptions="CenterAndExpand" VerticalOptions="FillAndExpand">
-        </Grid>
-    </StackLayout>
+    <VerticalStackLayout x:Name="MainLayout">
+        <Label Text="{Binding Title}" FontSize="24" HorizontalOptions="Center"  VerticalOptions="End" FontAttributes="Bold" Padding="20,0,0,20"/>
+        <Frame HasShadow="True" Padding="25,50" Margin="10,0,10,10" VerticalOptions="CenterAndExpand" 
+               CornerRadius="20" Opacity="0.9" BackgroundColor="#E5E9F0">
+        
+        <VerticalStackLayout x:Name="ProductsList" Spacing="10">
+        </VerticalStackLayout>
+    </Frame>
+    </VerticalStackLayout>
 </ContentPage>
\ No newline at end of file
diff --git a/TransactionMobile.Maui/Pages/Transactions/MobileTopup/MobileTopupSelectProductPage.xaml.cs b/TransactionMobile.Maui/Pages/Transactions/MobileTopup/MobileTopupSelectProductPage.xaml.cs
index 5d708707..b171b175 100644
--- a/TransactionMobile.Maui/Pages/Transactions/MobileTopup/MobileTopupSelectProductPage.xaml.cs
+++ b/TransactionMobile.Maui/Pages/Transactions/MobileTopup/MobileTopupSelectProductPage.xaml.cs
@@ -22,17 +22,8 @@ protected override async void OnAppearing()
 
     private void LoadProducts(MobileTopupSelectProductPageViewModel viewModel)
     {
-        RowDefinitionCollection rowDefinitionCollection = new RowDefinitionCollection();
-        for (Int32 i = 0; i < viewModel.Products.Count; i++)
-        {
-            rowDefinitionCollection.Add(new RowDefinition
-                                        {
-                                            Height = 60
-                                        });
-        }
-
-        this.ProductsGrid.RowDefinitions = rowDefinitionCollection;
-
+        this.ProductsList.Clear();
+        
         Int32 rowCount = 0;
         foreach (ContractProductModel modelProduct in viewModel.Products)
         {
@@ -42,7 +33,7 @@ private void LoadProducts(MobileTopupSelectProductPageViewModel viewModel)
                                   HorizontalOptions = LayoutOptions.FillAndExpand,
                                   AutomationId = modelProduct.ProductDisplayText,
             };
-            //button.SetDynamicResource(VisualElement.StyleProperty, "MobileTopupButtonStyle");
+            button.SetDynamicResource(VisualElement.StyleProperty, "MobileTopupButtonStyle");
 
             Binding commandParameter = new Binding()
                                        {
@@ -61,7 +52,7 @@ private void LoadProducts(MobileTopupSelectProductPageViewModel viewModel)
             button.SetBinding(Button.CommandProperty, command);
             button.SetBinding(Button.CommandParameterProperty, commandParameter);
 
-            this.ProductsGrid.Add(button, 0, rowCount);
+            this.ProductsList.Add(button);
 
             rowCount++;
         }
diff --git a/TransactionMobile.Maui/Pages/Transactions/MobileTopup/MobileTopupSuccessPage.xaml b/TransactionMobile.Maui/Pages/Transactions/MobileTopup/MobileTopupSuccessPage.xaml
index a5ebe7c3..762e89ff 100644
--- a/TransactionMobile.Maui/Pages/Transactions/MobileTopup/MobileTopupSuccessPage.xaml
+++ b/TransactionMobile.Maui/Pages/Transactions/MobileTopup/MobileTopupSuccessPage.xaml
@@ -1,29 +1,24 @@
-<?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="TransactionMobile.Maui.MobileTopupSuccessPage"
-             Title="{Binding Title}"
-             BackgroundColor="White">
-    <StackLayout>
-        <Label
-            Margin="0,40,0,0"
-            Style="{StaticResource LabelStyle}"
-            HorizontalTextAlignment="Center"
-            AutomationId="MobileTopupSuccessful"
-            Text="MOBILE TOPUP SUCCESSFUL" />
+             x:Class="TransactionMobile.Maui.MobileTopupSuccessPage" Title="{Binding Title}"
+             Shell.NavBarIsVisible="False" BackgroundColor="White">
+    <VerticalStackLayout x:Name="MainLayout">
+        <Label Text="{Binding Title}" FontSize="24" HorizontalOptions="Center" VerticalOptions="End"
+               FontAttributes="Bold" Padding="20,0,0,20"/>
+        <Frame HasShadow="True" Padding="25,50" Margin="10,0,10,10" VerticalOptions="CenterAndExpand" CornerRadius="20"
+               Opacity="0.9" BackgroundColor="#E5E9F0">
+            <VerticalStackLayout Spacing="10">
 
-        <!--  Payment description label  -->
-        <Label
-            Margin="17,8"
-            Text="Thank you for your topup. An automated payment receipt will be sent to your email entered." />
+                <Image Source="Resources/PaymentSuccess.svg" VerticalOptions="Start" Aspect="AspectFit"/>
 
-        <Button
-            x:Name="CompleteButton"
-            Margin="0,16"
-            MinimumWidthRequest="250"
-            WidthRequest="250"
-            Text="Complete"
-            Command="{Binding CompletedCommand}"
-            AutomationId="CompleteButton"/>
-    </StackLayout>
+                <!--  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" Command="{Binding CompletedCommand}"
+                        Style="{DynamicResource MobileTopupButtonStyle}" AutomationId="CompleteButton"/>
+            </VerticalStackLayout>
+        </Frame>
+    </VerticalStackLayout>
 </ContentPage>
\ No newline at end of file
diff --git a/TransactionMobile.Maui/Pages/Transactions/TransactionsPage.xaml b/TransactionMobile.Maui/Pages/Transactions/TransactionsPage.xaml
index ca667b61..999d0abf 100644
--- a/TransactionMobile.Maui/Pages/Transactions/TransactionsPage.xaml
+++ b/TransactionMobile.Maui/Pages/Transactions/TransactionsPage.xaml
@@ -2,25 +2,22 @@
 <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              x:Class="TransactionMobile.Maui.Pages.Transactions.TransactionsPage"
-             Shell.NavBarIsVisible="True"
              Title="{Binding Title}"
+             Shell.NavBarIsVisible="False"
              BackgroundColor="White">
-    <StackLayout>
-        <Grid>
-            <Grid.RowDefinitions>
-                <RowDefinition Height="50"></RowDefinition>
-                <RowDefinition Height="50"></RowDefinition>
-                <RowDefinition Height="50"></RowDefinition>
-                <RowDefinition Height="50"></RowDefinition>
-                <RowDefinition Height="50"></RowDefinition>
-            </Grid.RowDefinitions>
-
-
-            <Button AutomationId="MobileTopupButton" Command="{Binding MobileTopupCommand}" x:Name="MobileTopupButton" Text="Mobile Topup" Grid.Row="0" Grid.Column="0" Style="{DynamicResource MobileTopupButtonStyle}"/>
-            <Button AutomationId="MobileWalletButton" Command="{Binding MobileWalletCommand}" x:Name="MobileWalletButton" Text="Mobile Wallet" Grid.Row="1" Grid.Column="0" Style="{DynamicResource MobileWalletButtonStyle}"/>
-            <Button AutomationId="BillPaymentButton" Command="{Binding BillPaymentCommand}" x:Name="BillPaymentButton" Text="Bill Payment" Grid.Row="2" Grid.Column="0" Style="{DynamicResource BillPaymentButtonStyle}"/>
-            <Button AutomationId="VoucherButton" Command="{Binding VoucherCommand}" x:Name="VoucherButton" Text="Voucher" Grid.Row="3" Grid.Column="0" Style="{DynamicResource VoucherButtonStyle}"/>
-            <Button AutomationId="AdminButton" Command="{Binding AdminCommand}" x:Name="AdminButton" Text="Admin" Grid.Row="4" Grid.Column="0" Style="{DynamicResource AdminButtonStyle}"/>
-        </Grid>
-    </StackLayout>
+    <!-- This might be better as a flex layout if we had images-->
+    <VerticalStackLayout>
+    <Label Text="{Binding Title}" FontSize="24" HorizontalOptions="Center"  VerticalOptions="End" FontAttributes="Bold" Padding="20,0,0,20"/>
+    <Frame HasShadow="True" Padding="25,50" Margin="10,0,10,10" VerticalOptions="CenterAndExpand" 
+           CornerRadius="20" Opacity="0.9" BackgroundColor="#E5E9F0">
+            <VerticalStackLayout Spacing="10">
+            
+                <Button AutomationId="MobileTopupButton" Command="{Binding MobileTopupCommand}" x:Name="MobileTopupButton" Text="Mobile Topup" Style="{DynamicResource MobileTopupButtonStyle}"/>
+                <Button AutomationId="MobileWalletButton" Command="{Binding MobileWalletCommand}" x:Name="MobileWalletButton" Text="Mobile Wallet" Style="{DynamicResource MobileWalletButtonStyle}"/>
+                <Button AutomationId="BillPaymentButton" Command="{Binding BillPaymentCommand}" x:Name="BillPaymentButton" Text="Bill Payment" Style="{DynamicResource BillPaymentButtonStyle}"/>
+                <Button AutomationId="VoucherButton" Command="{Binding VoucherCommand}" x:Name="VoucherButton" Text="Voucher" Style="{DynamicResource VoucherButtonStyle}"/>
+                <Button AutomationId="AdminButton" Command="{Binding AdminCommand}" x:Name="AdminButton" Text="Admin" Style="{DynamicResource AdminButtonStyle}"/>
+           </VerticalStackLayout>
+    </Frame>
+    </VerticalStackLayout>
 </ContentPage>
\ No newline at end of file
diff --git a/TransactionMobile.Maui/Resources/Images/loginimage.jpg b/TransactionMobile.Maui/Resources/Images/loginimage.jpg
new file mode 100644
index 00000000..94ed4b3b
Binary files /dev/null and b/TransactionMobile.Maui/Resources/Images/loginimage.jpg differ
diff --git a/TransactionMobile.Maui/Resources/Images/paymentfailure.svg b/TransactionMobile.Maui/Resources/Images/paymentfailure.svg
new file mode 100644
index 00000000..45eebe33
--- /dev/null
+++ b/TransactionMobile.Maui/Resources/Images/paymentfailure.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="80px" height="80px" viewBox="0 0 80 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 57.1 (83088) - https://sketch.com -->
+    <title>Group</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Designs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Payment-Success" transform="translate(-147.000000, -199.000000)" fill-rule="nonzero">
+            <g id="Group" transform="translate(147.000000, 199.000000)">
+                <circle id="Oval" fill="#FFFFFF" cx="40.6465016" cy="41.9093333" r="29.904"></circle>
+                <path d="M80,39.9994154 C80,56.1776688 70.2544553,70.7629071 55.3076982,76.9540566 C40.360941,83.1452061 23.1564794,79.7230259 11.7167267,68.2832733 C0.276974062,56.8435206 -3.14520614,39.639059 3.04594338,24.6923018 C9.2370929,9.74554469 23.8223312,-9.9475983e-14 40.0005846,-9.9475983e-14 C62.0916517,-9.9475983e-14 80,17.9083483 80,39.9994154 Z M58.5132227,20.7087522 C57.5682193,19.7637493 56.0360666,19.7637493 55.0910632,20.7087522 L40,35.799816 L24.9089366,20.7087522 C23.9639332,19.7637493 22.4317805,19.7637493 21.4867771,20.7087522 L20.7087533,21.4867761 C20.2549462,21.9405827 20,22.5560767 20,23.1978565 C20,23.8396362 20.2549462,24.4551303 20.7087533,24.9089368 L35.7998154,40 L20.7087533,55.0910632 C20.2549462,55.5448697 20,56.1603638 20,56.8021435 C20,57.4439233 20.2549462,58.0594173 20.7087533,58.5132239 L21.4867771,59.2912478 C22.4317805,60.2362507 23.9639332,60.2362507 24.9089366,59.2912478 L40,44.200184 L55.0910632,59.2912478 C56.0360666,60.2362507 57.5682193,60.2362507 58.5132227,59.2912478 L59.2912477,58.5132239 C60.2362508,57.5682201 60.2362508,56.036067 59.2912477,55.0910632 L44.2001844,40 L59.2912477,24.9089368 C60.2362508,23.963933 60.2362508,22.4317799 59.2912477,21.4867761 L58.5132227,20.7087522 Z" id="Shape" fill="#FF6585"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/TransactionMobile.Maui/Resources/Images/paymentsuccess.svg b/TransactionMobile.Maui/Resources/Images/paymentsuccess.svg
new file mode 100644
index 00000000..ed4a68f8
--- /dev/null
+++ b/TransactionMobile.Maui/Resources/Images/paymentsuccess.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="80px" height="80px" viewBox="0 0 80 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 57.1 (83088) - https://sketch.com -->
+    <title>Group1</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Designs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Payment-Success" transform="translate(-147.000000, -199.000000)" fill-rule="nonzero">
+            <g id="Group1" transform="translate(147.000000, 199.000000)">
+                <circle id="Oval" fill="#FFFFFF" cx="40.6465016" cy="43.9093333" r="29.904"></circle>
+                <path d="M79.9371683,39.968 C79.9371683,56.133547 70.1992777,70.7073301 55.2642597,76.8936172 C40.3292417,83.0799042 23.1382923,79.6604117 11.7075244,68.2296438 C0.276756528,56.7988759 -3.1427359,39.6079266 3.04355111,24.6729086 C9.22983812,9.73789057 23.8036213,-9.9475983e-14 39.9691683,-9.9475983e-14 C62.0428851,-9.9475983e-14 79.9371683,17.8942831 79.9371683,39.968 Z M35.3505016,61.1253333 L64.9985016,31.4773333 C65.4831222,30.9940384 65.7554909,30.3377536 65.7554909,29.6533333 C65.7554909,28.9689131 65.4831222,28.3126283 64.9985016,27.8293333 L61.3505016,24.208 C60.8681186,23.7237019 60.2127164,23.4514645 59.5291683,23.4514645 C58.8456202,23.4514645 58.1902179,23.7237019 57.7078349,24.208 L33.5265016,48.3893333 L22.2358349,37.072 C21.2268448,36.068558 19.5968251,36.068558 18.5878349,37.072 L14.9398349,40.7413333 C13.9363929,41.7503235 13.9363929,43.3803432 14.9398349,44.3893333 L31.7025016,61.1466667 C32.1857966,61.6312872 32.8420813,61.9036559 33.5265016,61.9036559 C34.2109219,61.9036559 34.8672066,61.6312872 35.3505016,61.1466667 L35.3505016,61.1253333 Z" id="Shape" fill="#3ACC6C"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/TransactionMobile.Maui/Resources/Styles/LightTheme.xaml b/TransactionMobile.Maui/Resources/Styles/LightTheme.xaml
new file mode 100644
index 00000000..04d30ff7
--- /dev/null
+++ b/TransactionMobile.Maui/Resources/Styles/LightTheme.xaml
@@ -0,0 +1,160 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ResourceDictionary xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
+                    x:Class="TransactionMobile.Maui.Resources.Styles.LightTheme">
+
+    <!-- Colors in use -->
+    <Color x:Key="pageBackgroundColor">#FFFFFF</Color>
+    <Color x:Key="textColor">#E5E9F0</Color>
+
+    <Color x:Key="labelTextColor">#4267B2</Color>
+    <Color x:Key="labelLightTextColor">#FFFFFF</Color>
+    <Color x:Key="entryTextColor">#4267B2</Color>
+    <Color x:Key="entryPlaceHolderColor">#A0FFFFFF</Color>
+    <Color x:Key="entryPlaceHolderColorDark">#4267B2</Color>
+    <Color x:Key="buttonTextColor">#FFFFFF</Color>
+
+    <Color x:Key="primary">#4267B2</Color>
+    <Color x:Key="transactions">#31C8E3</Color>
+    <Color x:Key="reports">#E38C44</Color>
+    <Color x:Key="profile">#5BE3B6</Color>
+    <Color x:Key="support">#E37188</Color>
+
+    <Color x:Key="mobileTopup">#7ed321</Color>
+    <Color x:Key="admin">#ff4a4a</Color>
+    <Color x:Key="mobileWallet">#ff844a</Color>
+    <Color x:Key="billPayment">#4acaff</Color>
+    <Color x:Key="voucher">MediumPurple</Color>
+
+    <!-- Styles -->
+    <Style TargetType="Page" ApplyToDerivedTypes="True">
+        <Setter Property="BackgroundColor" Value="{StaticResource pageBackgroundColor}"/>
+        <Setter Property="Padding" Value="20, 10"/>
+    </Style>
+
+    <Style x:Key="LabelStyle" TargetType="Label">
+        <Setter Property="TextColor" Value="{StaticResource labelTextColor}"/>
+        <Setter Property="FontFamily" Value="OpenSansRegular"/>
+    </Style>
+
+    <Style x:Key="SmallLabelStyle" TargetType="Label">
+        <Setter Property="TextColor" Value="{StaticResource labelTextColor}"/>
+        <Setter Property="FontFamily" Value="OpenSansRegular"/>
+        <Setter Property="FontSize" Value="12" />
+        <Setter Property="LineHeight" Value="1.25" />
+    </Style>
+
+    <Style x:Key="AmountEntryStyle" TargetType="Entry">
+        <Setter Property="PlaceholderColor" Value="{StaticResource entryPlaceHolderColorDark}" />
+        <Setter Property="TextColor" Value="{StaticResource entryTextColor}" />
+        <Setter Property="HeightRequest" Value="50"></Setter>
+        <Setter Property="Margin" Value="0,0,0,0"></Setter>
+        <Setter Property="ReturnType" Value="Done" />
+    </Style>
+
+    <Style x:Key="MobileNumberEntryStyle" TargetType="Entry">
+        <Setter Property="PlaceholderColor" Value="{StaticResource entryPlaceHolderColorDark}" />
+        <Setter Property="TextColor" Value="{StaticResource entryTextColor}" />
+        <Setter Property="TextColor" Value="Blue"></Setter>
+        <Setter Property="HeightRequest" Value="50"></Setter>
+        <Setter Property="Margin" Value="0,0,0,0"></Setter>
+        <Setter Property="ReturnType" Value="Done" />
+    </Style>
+
+    <Style x:Key="EmailAddressEntryStyle" TargetType="Entry">
+        <Setter Property="PlaceholderColor" Value="{StaticResource entryPlaceHolderColorDark}" />
+        <Setter Property="TextColor" Value="{StaticResource entryTextColor}" />
+        <Setter Property="HeightRequest" Value="50"></Setter>
+        <Setter Property="Margin" Value="0,0,0,0"></Setter>
+        <Setter Property="ReturnType" Value="Done" />
+    </Style>
+
+    <Style x:Key="UserNameEntryStyle" TargetType="Entry">
+        <Setter Property="PlaceholderColor" Value="{StaticResource entryPlaceHolderColorDark}" />
+        <Setter Property="TextColor" Value="{StaticResource entryTextColor}"></Setter>
+        <Setter Property="HeightRequest" Value="50"></Setter>
+        <Setter Property="Margin" Value="0,0,0,0"></Setter>
+        <Setter Property="ReturnType" Value="Done" />
+    </Style>
+
+    <Style x:Key="PasswordEntryStyle" TargetType="Entry">
+        <Setter Property="PlaceholderColor" Value="{StaticResource entryPlaceHolderColorDark}" />
+        <Setter Property="TextColor" Value="{StaticResource entryTextColor}"></Setter>
+        <Setter Property="HeightRequest" Value="50"></Setter>
+        <Setter Property="Margin" Value="0,0,0,0"></Setter>
+        <Setter Property="IsPassword" Value="True"></Setter>
+        <Setter Property="ReturnType" Value="Done" />
+    </Style>
+
+    <Style TargetType="Button" x:Key="StandardButton">
+        <Setter Property="TextColor" Value="{StaticResource buttonTextColor}"/>
+        <Setter Property="FontFamily" Value="OpenSansRegular"/>
+        <Setter Property="BackgroundColor" Value="{StaticResource primary}"/>
+        <Setter Property="CornerRadius" Value="10"/>
+        <Setter Property="Padding" Value="15, 10"/>
+        <Setter Property="HeightRequest" Value="40" />
+        <Setter Property="CornerRadius" Value="20" />
+    </Style>
+
+    <Style TargetType="Button" x:Key="StandardButtonSmall">
+        <Setter Property="TextColor" Value="{StaticResource buttonTextColor}"/>
+        <Setter Property="FontFamily" Value="OpenSansRegular"/>
+        <Setter Property="BackgroundColor" Value="{StaticResource primary}"/>
+        <Setter Property="CornerRadius" Value="10"/>
+        <Setter Property="Padding" Value="15, 10"/>
+        <Setter Property="HeightRequest" Value="30" />
+        <Setter Property="CornerRadius" Value="20" />
+    </Style>
+
+    <Style x:Key="MobileTopupButtonStyle" TargetType="Button">
+        <Setter Property="BackgroundColor" Value="{DynamicResource mobileTopup}"></Setter>
+        <Setter Property="TextColor" Value="{DynamicResource buttonTextColor}" />
+        <Setter Property="FontFamily" Value="OpenSansRegular"/>
+        <Setter Property="BorderWidth" Value="0" />
+        <Setter Property="FontSize" Value="16" />
+        <Setter Property="HeightRequest" Value="40" />
+        <Setter Property="CornerRadius" Value="20" />
+        <Setter Property="VerticalOptions" Value="CenterAndExpand" />
+    </Style>
+
+    <Style x:Key="VoucherButtonStyle" TargetType="Button">
+        <Setter Property="BackgroundColor" Value="{DynamicResource voucher}"></Setter>
+        <Setter Property="TextColor" Value="{DynamicResource buttonTextColor}" />
+        <Setter Property="FontFamily" Value="OpenSansRegular"/>
+        <Setter Property="BorderWidth" Value="0" />
+        <Setter Property="FontSize" Value="16" />
+        <Setter Property="HeightRequest" Value="40" />
+        <Setter Property="CornerRadius" Value="20" />
+    </Style>
+
+    <Style x:Key="MobileWalletButtonStyle" TargetType="Button">
+        <Setter Property="BackgroundColor" Value="{DynamicResource mobileWallet}"></Setter>
+        <Setter Property="TextColor" Value="{DynamicResource buttonTextColor}" />
+        <Setter Property="FontFamily" Value="OpenSansRegular"/>
+        <Setter Property="BorderWidth" Value="0" />
+        <Setter Property="FontSize" Value="16" />
+        <Setter Property="HeightRequest" Value="40" />
+        <Setter Property="CornerRadius" Value="20" />
+    </Style>
+
+    <Style x:Key="BillPaymentButtonStyle" TargetType="Button">
+        <Setter Property="BackgroundColor" Value="{DynamicResource billPayment}"></Setter>
+        <Setter Property="TextColor" Value="{DynamicResource buttonTextColor}" />
+        <Setter Property="FontFamily" Value="OpenSansRegular"/>
+        <Setter Property="BorderWidth" Value="0" />
+        <Setter Property="FontSize" Value="16" />
+        <Setter Property="HeightRequest" Value="40" />
+        <Setter Property="CornerRadius" Value="20" />
+    </Style>
+
+    <Style x:Key="AdminButtonStyle" TargetType="Button">
+        <Setter Property="BackgroundColor" Value="{DynamicResource admin}"></Setter>
+        <Setter Property="TextColor" Value="{DynamicResource buttonTextColor}" />
+        <Setter Property="FontFamily" Value="OpenSansRegular"/>
+        <Setter Property="BorderWidth" Value="0" />
+        <Setter Property="FontSize" Value="16" />
+        <Setter Property="HeightRequest" Value="40" />
+        <Setter Property="CornerRadius" Value="20" />
+    </Style>
+
+</ResourceDictionary>
\ No newline at end of file
diff --git a/TransactionMobile.Maui/Resources/Styles/LightTheme.xaml.cs b/TransactionMobile.Maui/Resources/Styles/LightTheme.xaml.cs
new file mode 100644
index 00000000..ba25c710
--- /dev/null
+++ b/TransactionMobile.Maui/Resources/Styles/LightTheme.xaml.cs
@@ -0,0 +1,11 @@
+using Microsoft.Maui.Controls;
+
+namespace TransactionMobile.Maui.Resources.Styles;
+
+public partial class LightTheme : ResourceDictionary
+{
+    public LightTheme()
+    {
+        InitializeComponent();
+    }
+}
\ No newline at end of file
diff --git a/TransactionMobile.Maui/TransactionMobile.Maui.csproj b/TransactionMobile.Maui/TransactionMobile.Maui.csproj
index 8f50a881..be9e7912 100644
--- a/TransactionMobile.Maui/TransactionMobile.Maui.csproj
+++ b/TransactionMobile.Maui/TransactionMobile.Maui.csproj
@@ -101,6 +101,9 @@
 	  <Compile Update="Pages\Transactions\Voucher\VoucherSelectProductPage.xaml.cs">
 	    <DependentUpon>VoucherSelectProductPage.xaml</DependentUpon>
 	  </Compile>
+	  <Compile Update="Resources\Styles\LightTheme.xaml.cs">
+	    <DependentUpon>LightTheme.xaml</DependentUpon>
+	  </Compile>
 	</ItemGroup>
 
 	<ItemGroup>
@@ -162,6 +165,9 @@
 	  <MauiXaml Update="Pages\Transactions\Voucher\VoucherSelectProductPage.xaml">
 	    <Generator>MSBuild:Compile</Generator>
 	  </MauiXaml>
+	  <MauiXaml Update="Resources\Styles\LightTheme.xaml">
+	    <Generator>MSBuild:Compile</Generator>
+	  </MauiXaml>
 	</ItemGroup>
 
 	<ItemGroup>