From 1aaf4e8a7e62a88b7e8b4312e3040dfab72a864a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Burak=20Kaan=20K=C3=B6se?= <bkaankose@outlook.com>
Date: Fri, 6 Mar 2026 04:04:14 +0100
Subject: [PATCH] Settings UI

---
 .../Translations/en_US/resources.json         |   2 +
 .../SettingOptionsPageViewModel.cs            |  42 ++
 Wino.Mail.WinUI/Views/SettingOptionsPage.xaml | 603 +++++-------------
 .../Views/SettingOptionsPage.xaml.cs          |   2 +
 4 files changed, 198 insertions(+), 451 deletions(-)

diff --git a/Wino.Core.Domain/Translations/en_US/resources.json b/Wino.Core.Domain/Translations/en_US/resources.json
index f0277a2a..f7683c2f 100644
--- a/Wino.Core.Domain/Translations/en_US/resources.json
+++ b/Wino.Core.Domain/Translations/en_US/resources.json
@@ -748,6 +748,8 @@
     "SettingsOptions_MailSection": "Mail",
     "SettingsOptions_CalendarSection": "Calendar",
     "SettingsOptions_MoreComingSoon": "More options coming soon",
+    "SettingsOptions_HeroDescription": "Customize your Wino Mail experience",
+    "SettingsOptions_AccountsSummary": "{0} account(s) configured",
     "SettingsPaneLengthReset_Description": "Reset the size of the mail list to original if you have issues with it.",
     "SettingsPaneLengthReset_Title": "Reset Mail List Size",
     "SettingsPaypal_Description": "Show much more love ❤️ All donations are appreciated.",
diff --git a/Wino.Core.ViewModels/SettingOptionsPageViewModel.cs b/Wino.Core.ViewModels/SettingOptionsPageViewModel.cs
index df4b5ce4..f1840720 100644
--- a/Wino.Core.ViewModels/SettingOptionsPageViewModel.cs
+++ b/Wino.Core.ViewModels/SettingOptionsPageViewModel.cs
@@ -1,14 +1,56 @@
 using System;
+using System.Threading.Tasks;
+using CommunityToolkit.Mvvm.ComponentModel;
 using CommunityToolkit.Mvvm.Input;
 using CommunityToolkit.Mvvm.Messaging;
 using Wino.Core.Domain;
 using Wino.Core.Domain.Enums;
+using Wino.Core.Domain.Interfaces;
+using Wino.Core.Domain.Models.Navigation;
 using Wino.Messaging.Client.Navigation;
 
 namespace Wino.Core.ViewModels;
 
 public partial class SettingOptionsPageViewModel : CoreBaseViewModel
 {
+    private readonly INativeAppService _nativeAppService;
+    private readonly IAccountService _accountService;
+
+    [ObservableProperty]
+    public partial string VersionText { get; set; } = string.Empty;
+
+    [ObservableProperty]
+    public partial string AccountSummaryText { get; set; } = string.Empty;
+
+    [ObservableProperty]
+    public partial int AccountCount { get; set; }
+
+    public SettingOptionsPageViewModel(INativeAppService nativeAppService, IAccountService accountService)
+    {
+        _nativeAppService = nativeAppService;
+        _accountService = accountService;
+    }
+
+    public override void OnNavigatedTo(NavigationMode mode, object parameters)
+    {
+        base.OnNavigatedTo(mode, parameters);
+
+        VersionText = string.Format("{0}{1}", Translator.SettingsAboutVersion, _nativeAppService.GetFullAppVersion());
+        _ = LoadAccountSummaryAsync();
+    }
+
+    private async Task LoadAccountSummaryAsync()
+    {
+        var accounts = await _accountService.GetAccountsAsync();
+        int count = accounts?.Count ?? 0;
+
+        await ExecuteUIThread(() =>
+        {
+            AccountCount = count;
+            AccountSummaryText = string.Format(Translator.SettingsOptions_AccountsSummary, count);
+        });
+    }
+
     [RelayCommand]
     private void GoAccountSettings() => Messenger.Send<NavigateManageAccountsRequested>();
 
diff --git a/Wino.Mail.WinUI/Views/SettingOptionsPage.xaml b/Wino.Mail.WinUI/Views/SettingOptionsPage.xaml
index f8a98333..52cd9d26 100644
--- a/Wino.Mail.WinUI/Views/SettingOptionsPage.xaml
+++ b/Wino.Mail.WinUI/Views/SettingOptionsPage.xaml
@@ -13,16 +13,17 @@
     mc:Ignorable="d">
 
     <ScrollViewer Padding="0,0,16,0" VerticalScrollBarVisibility="Auto">
-        <StackPanel Margin="0,8,0,24" Spacing="16">
+        <StackPanel Margin="0,8,0,24" Spacing="4">
             <StackPanel.ChildrenTransitions>
                 <TransitionCollection>
                     <EntranceThemeTransition FromVerticalOffset="50" IsStaggeringEnabled="True" />
                 </TransitionCollection>
             </StackPanel.ChildrenTransitions>
 
-            <!--  Hero Account Card - Prominent at top  -->
+            <!--  Hero Banner - Windows 11 style  -->
             <Grid
-                Padding="20"
+                Margin="0,0,0,12"
+                Padding="24,28"
                 Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                 BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                 BorderThickness="1"
@@ -30,36 +31,55 @@
                 <Grid.ColumnDefinitions>
                     <ColumnDefinition Width="Auto" />
                     <ColumnDefinition Width="*" />
-                    <ColumnDefinition Width="Auto" />
                 </Grid.ColumnDefinitions>
 
+                <!--  App Icon  -->
                 <Border
-                    Width="56"
-                    Height="56"
-                    CornerRadius="28">
+                    Width="72"
+                    Height="72"
+                    Background="{ThemeResource AccentFillColorDefaultBrush}"
+                    CornerRadius="16">
                     <FontIcon
                         HorizontalAlignment="Center"
                         VerticalAlignment="Center"
-                        FontSize="24"
-                        Foreground="{ThemeResource TextOnAccentAAFillColorDisabledBrush}"
-                        Glyph="&#xE77B;" />
+                        FontSize="32"
+                        Foreground="{ThemeResource TextOnAccentFillColorPrimaryBrush}"
+                        Glyph="&#xE715;" />
                 </Border>
 
+                <!--  App Info  -->
                 <StackPanel
                     Grid.Column="1"
-                    Margin="16,0,0,0"
+                    Margin="20,0,0,0"
                     VerticalAlignment="Center"
-                    Spacing="2">
-                    <TextBlock Style="{StaticResource SubtitleTextBlockStyle}" Text="{x:Bind domain:Translator.SettingsManageAccountSettings_Title}" />
+                    Spacing="4">
+                    <TextBlock
+                        Style="{StaticResource TitleTextBlockStyle}"
+                        Text="Wino Mail" />
                     <TextBlock
                         Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                        Style="{StaticResource BodyTextBlockStyle}"
+                        Text="{x:Bind domain:Translator.SettingsOptions_HeroDescription}" />
+                    <TextBlock
+                        Margin="0,2,0,0"
+                        Foreground="{ThemeResource TextFillColorTertiaryBrush}"
                         Style="{StaticResource CaptionTextBlockStyle}"
-                        Text="{x:Bind domain:Translator.SettingsManageAccountSettings_Description}" />
+                        Text="{x:Bind ViewModel.VersionText, Mode=OneWay}" />
                 </StackPanel>
+            </Grid>
 
+            <!--  Account Management Card  -->
+            <controls:SettingsCard
+                Margin="0,0,0,12"
+                Click="SettingOptionClicked"
+                Description="{x:Bind ViewModel.AccountSummaryText, Mode=OneWay}"
+                Header="{x:Bind domain:Translator.SettingsManageAccountSettings_Title}"
+                IsClickEnabled="True"
+                Tag="{x:Bind enums:WinoPage.AccountManagementPage}">
+                <controls:SettingsCard.HeaderIcon>
+                    <FontIcon Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}" Glyph="&#xE77B;" />
+                </controls:SettingsCard.HeaderIcon>
                 <Button
-                    Grid.Column="2"
-                    VerticalAlignment="Center"
                     Click="SettingOptionClicked"
                     Style="{StaticResource AccentButtonStyle}"
                     Tag="{x:Bind enums:WinoPage.AccountManagementPage}">
@@ -68,454 +88,135 @@
                         <FontIcon FontSize="12" Glyph="&#xE76C;" />
                     </StackPanel>
                 </Button>
-            </Grid>
+            </controls:SettingsCard>
 
-            <!--  General Settings Card  -->
-            <Grid
-                Padding="20"
-                Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
-                BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
-                BorderThickness="1"
-                CornerRadius="8">
-                <Grid.RowDefinitions>
-                    <RowDefinition Height="Auto" />
-                    <RowDefinition Height="*" />
-                </Grid.RowDefinitions>
+            <!--  General Section  -->
+            <TextBlock
+                Margin="1,8,0,4"
+                Style="{StaticResource BodyStrongTextBlockStyle}"
+                Text="{x:Bind domain:Translator.SettingsOptions_GeneralSection}" />
 
-                <!--  General Header  -->
-                <StackPanel
-                    Margin="0,0,0,16"
-                    Orientation="Horizontal"
-                    Spacing="12">
-                    <Border
-                        Width="40"
-                        Height="40"
-                        Background="{ThemeResource SystemFillColorNeutralBackgroundBrush}"
-                        CornerRadius="8">
-                        <FontIcon
-                            HorizontalAlignment="Center"
-                            VerticalAlignment="Center"
-                            FontSize="18"
-                            Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}"
-                            Glyph="&#xE713;" />
-                    </Border>
-                    <TextBlock
-                        VerticalAlignment="Center"
-                        Style="{StaticResource SubtitleTextBlockStyle}"
-                        Text="{x:Bind domain:Translator.SettingsOptions_GeneralSection}" />
-                </StackPanel>
+            <controls:SettingsCard
+                Click="SettingOptionClicked"
+                Description="{x:Bind domain:Translator.SettingsAppPreferences_Description}"
+                Header="{x:Bind domain:Translator.SettingsAppPreferences_Title}"
+                IsClickEnabled="True"
+                Tag="{x:Bind enums:WinoPage.AppPreferencesPage}">
+                <controls:SettingsCard.HeaderIcon>
+                    <FontIcon Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}" Glyph="&#xE770;" />
+                </controls:SettingsCard.HeaderIcon>
+            </controls:SettingsCard>
 
-                <!--  General Options  -->
-                <StackPanel Grid.Row="1" Spacing="2">
-                    <Button
-                        HorizontalAlignment="Stretch"
-                        HorizontalContentAlignment="Stretch"
-                        Background="Transparent"
-                        BorderThickness="0"
-                        Click="SettingOptionClicked"
-                        CornerRadius="4"
-                        Tag="{x:Bind enums:WinoPage.AppPreferencesPage}">
-                        <Grid Padding="4,10" ColumnSpacing="12">
-                            <Grid.ColumnDefinitions>
-                                <ColumnDefinition Width="Auto" />
-                                <ColumnDefinition Width="*" />
-                                <ColumnDefinition Width="Auto" />
-                            </Grid.ColumnDefinitions>
-                            <FontIcon
-                                VerticalAlignment="Center"
-                                FontSize="16"
-                                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-                                Glyph="&#xE770;" />
-                            <TextBlock
-                                Grid.Column="1"
-                                VerticalAlignment="Center"
-                                Text="{x:Bind domain:Translator.SettingsAppPreferences_Title}" />
-                            <FontIcon
-                                Grid.Column="2"
-                                VerticalAlignment="Center"
-                                FontSize="12"
-                                Foreground="{ThemeResource TextFillColorTertiaryBrush}"
-                                Glyph="&#xE76C;" />
-                        </Grid>
-                    </Button>
+            <controls:SettingsCard
+                Click="SettingOptionClicked"
+                Description="{x:Bind domain:Translator.SettingsLanguageTime_Description}"
+                Header="{x:Bind domain:Translator.SettingsLanguageTime_Title}"
+                IsClickEnabled="True"
+                Tag="{x:Bind enums:WinoPage.LanguageTimePage}">
+                <controls:SettingsCard.HeaderIcon>
+                    <FontIcon Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}" Glyph="&#xE775;" />
+                </controls:SettingsCard.HeaderIcon>
+            </controls:SettingsCard>
 
-                    <Button
-                        HorizontalAlignment="Stretch"
-                        HorizontalContentAlignment="Stretch"
-                        Background="Transparent"
-                        BorderThickness="0"
-                        Click="SettingOptionClicked"
-                        CornerRadius="4"
-                        Tag="{x:Bind enums:WinoPage.LanguageTimePage}">
-                        <Grid Padding="4,10" ColumnSpacing="12">
-                            <Grid.ColumnDefinitions>
-                                <ColumnDefinition Width="Auto" />
-                                <ColumnDefinition Width="*" />
-                                <ColumnDefinition Width="Auto" />
-                            </Grid.ColumnDefinitions>
-                            <FontIcon
-                                VerticalAlignment="Center"
-                                FontSize="16"
-                                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-                                Glyph="&#xE775;" />
-                            <TextBlock
-                                Grid.Column="1"
-                                VerticalAlignment="Center"
-                                Text="{x:Bind domain:Translator.SettingsLanguageTime_Title}" />
-                            <FontIcon
-                                Grid.Column="2"
-                                VerticalAlignment="Center"
-                                FontSize="12"
-                                Foreground="{ThemeResource TextFillColorTertiaryBrush}"
-                                Glyph="&#xE76C;" />
-                        </Grid>
-                    </Button>
+            <controls:SettingsCard
+                Click="SettingOptionClicked"
+                Description="{x:Bind domain:Translator.SettingsPersonalization_Description}"
+                Header="{x:Bind domain:Translator.SettingsPersonalization_Title}"
+                IsClickEnabled="True"
+                Tag="{x:Bind enums:WinoPage.PersonalizationPage}">
+                <controls:SettingsCard.HeaderIcon>
+                    <FontIcon Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}" Glyph="&#xE771;" />
+                </controls:SettingsCard.HeaderIcon>
+            </controls:SettingsCard>
 
-                    <Button
-                        HorizontalAlignment="Stretch"
-                        HorizontalContentAlignment="Stretch"
-                        Background="Transparent"
-                        BorderThickness="0"
-                        Click="SettingOptionClicked"
-                        CornerRadius="4"
-                        Tag="{x:Bind enums:WinoPage.PersonalizationPage}">
-                        <Grid Padding="4,10" ColumnSpacing="12">
-                            <Grid.ColumnDefinitions>
-                                <ColumnDefinition Width="Auto" />
-                                <ColumnDefinition Width="*" />
-                                <ColumnDefinition Width="Auto" />
-                            </Grid.ColumnDefinitions>
-                            <FontIcon
-                                VerticalAlignment="Center"
-                                FontSize="16"
-                                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-                                Glyph="&#xE771;" />
-                            <TextBlock
-                                Grid.Column="1"
-                                VerticalAlignment="Center"
-                                Text="{x:Bind domain:Translator.SettingsPersonalization_Title}" />
-                            <FontIcon
-                                Grid.Column="2"
-                                VerticalAlignment="Center"
-                                FontSize="12"
-                                Foreground="{ThemeResource TextFillColorTertiaryBrush}"
-                                Glyph="&#xE76C;" />
-                        </Grid>
-                    </Button>
+            <controls:SettingsCard
+                Click="SettingOptionClicked"
+                Description="{x:Bind domain:Translator.SettingsAbout_Description}"
+                Header="{x:Bind domain:Translator.SettingsAbout_Title}"
+                IsClickEnabled="True"
+                Tag="{x:Bind enums:WinoPage.AboutPage}">
+                <controls:SettingsCard.HeaderIcon>
+                    <FontIcon Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}" Glyph="&#xE946;" />
+                </controls:SettingsCard.HeaderIcon>
+            </controls:SettingsCard>
 
-                    <Button
-                        HorizontalAlignment="Stretch"
-                        HorizontalContentAlignment="Stretch"
-                        Background="Transparent"
-                        BorderThickness="0"
-                        Click="SettingOptionClicked"
-                        CornerRadius="4"
-                        Tag="{x:Bind enums:WinoPage.AboutPage}">
-                        <Grid Padding="4,10" ColumnSpacing="12">
-                            <Grid.ColumnDefinitions>
-                                <ColumnDefinition Width="Auto" />
-                                <ColumnDefinition Width="*" />
-                                <ColumnDefinition Width="Auto" />
-                            </Grid.ColumnDefinitions>
-                            <FontIcon
-                                VerticalAlignment="Center"
-                                FontSize="16"
-                                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-                                Glyph="&#xE946;" />
-                            <TextBlock
-                                Grid.Column="1"
-                                VerticalAlignment="Center"
-                                Text="{x:Bind domain:Translator.SettingsAbout_Title}" />
-                            <FontIcon
-                                Grid.Column="2"
-                                VerticalAlignment="Center"
-                                FontSize="12"
-                                Foreground="{ThemeResource TextFillColorTertiaryBrush}"
-                                Glyph="&#xE76C;" />
-                        </Grid>
-                    </Button>
-                </StackPanel>
-            </Grid>
+            <!--  Mail Section  -->
+            <TextBlock
+                Margin="1,16,0,4"
+                Style="{StaticResource BodyStrongTextBlockStyle}"
+                Text="{x:Bind domain:Translator.SettingsOptions_MailSection}" />
 
-            <!--  Two-Column Layout for Mail & Calendar  -->
-            <Grid ColumnSpacing="16">
-                <Grid.ColumnDefinitions>
-                    <ColumnDefinition Width="*" />
-                    <ColumnDefinition Width="*" />
-                </Grid.ColumnDefinitions>
+            <controls:SettingsCard
+                Click="SettingOptionClicked"
+                Description="{x:Bind domain:Translator.Settings_KeyboardShortcuts_Description}"
+                Header="{x:Bind domain:Translator.Settings_KeyboardShortcuts_Title}"
+                IsClickEnabled="True"
+                Tag="{x:Bind enums:WinoPage.KeyboardShortcutsPage}">
+                <controls:SettingsCard.HeaderIcon>
+                    <FontIcon Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}" Glyph="&#xE765;" />
+                </controls:SettingsCard.HeaderIcon>
+            </controls:SettingsCard>
 
-                <!--  Mail Settings Card  -->
-                <Grid
-                    Grid.Column="0"
-                    Padding="20"
-                    Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
-                    BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
-                    BorderThickness="1"
-                    CornerRadius="8">
-                    <Grid.RowDefinitions>
-                        <RowDefinition Height="Auto" />
-                        <RowDefinition Height="*" />
-                    </Grid.RowDefinitions>
+            <controls:SettingsCard
+                Click="SettingOptionClicked"
+                Description="{x:Bind domain:Translator.SettingsMessageList_Description}"
+                Header="{x:Bind domain:Translator.SettingsMessageList_Title}"
+                IsClickEnabled="True"
+                Tag="{x:Bind enums:WinoPage.MessageListPage}">
+                <controls:SettingsCard.HeaderIcon>
+                    <FontIcon Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}" Glyph="&#xE8C4;" />
+                </controls:SettingsCard.HeaderIcon>
+            </controls:SettingsCard>
 
-                    <!--  Mail Header  -->
-                    <StackPanel
-                        Margin="0,0,0,16"
-                        Orientation="Horizontal"
-                        Spacing="12">
-                        <Border
-                            Width="40"
-                            Height="40"
-                            Background="{ThemeResource SystemFillColorNeutralBackgroundBrush}"
-                            CornerRadius="8">
-                            <FontIcon
-                                HorizontalAlignment="Center"
-                                VerticalAlignment="Center"
-                                FontSize="18"
-                                Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}"
-                                Glyph="&#xE715;" />
-                        </Border>
-                        <TextBlock
-                            VerticalAlignment="Center"
-                            Style="{StaticResource SubtitleTextBlockStyle}"
-                            Text="{x:Bind domain:Translator.SettingsOptions_MailSection}" />
-                    </StackPanel>
+            <controls:SettingsCard
+                Click="SettingOptionClicked"
+                Description="{x:Bind domain:Translator.SettingsReadComposePane_Description}"
+                Header="{x:Bind domain:Translator.SettingsReadComposePane_Title}"
+                IsClickEnabled="True"
+                Tag="{x:Bind enums:WinoPage.ReadComposePanePage}">
+                <controls:SettingsCard.HeaderIcon>
+                    <FontIcon Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}" Glyph="&#xE8BD;" />
+                </controls:SettingsCard.HeaderIcon>
+            </controls:SettingsCard>
 
-                    <!--  Mail Options  -->
-                    <StackPanel Grid.Row="1" Spacing="2">
-                        <Button
-                            HorizontalAlignment="Stretch"
-                            HorizontalContentAlignment="Stretch"
-                            Background="Transparent"
-                            BorderThickness="0"
-                            Click="SettingOptionClicked"
-                            CornerRadius="4"
-                            Tag="{x:Bind enums:WinoPage.KeyboardShortcutsPage}">
-                            <Grid Padding="4,10" ColumnSpacing="12">
-                                <Grid.ColumnDefinitions>
-                                    <ColumnDefinition Width="Auto" />
-                                    <ColumnDefinition Width="*" />
-                                    <ColumnDefinition Width="Auto" />
-                                </Grid.ColumnDefinitions>
-                                <FontIcon
-                                    VerticalAlignment="Center"
-                                    FontSize="16"
-                                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-                                    Glyph="&#xE765;" />
-                                <TextBlock
-                                    Grid.Column="1"
-                                    VerticalAlignment="Center"
-                                    Text="{x:Bind domain:Translator.Settings_KeyboardShortcuts_Title}" />
-                                <FontIcon
-                                    Grid.Column="2"
-                                    VerticalAlignment="Center"
-                                    FontSize="12"
-                                    Foreground="{ThemeResource TextFillColorTertiaryBrush}"
-                                    Glyph="&#xE76C;" />
-                            </Grid>
-                        </Button>
+            <controls:SettingsCard
+                Click="SettingOptionClicked"
+                Description="{x:Bind domain:Translator.SettingsSignatureAndEncryption_Description}"
+                Header="{x:Bind domain:Translator.SettingsSignatureAndEncryption_Title}"
+                IsClickEnabled="True"
+                Tag="{x:Bind enums:WinoPage.SignatureAndEncryptionPage}">
+                <controls:SettingsCard.HeaderIcon>
+                    <FontIcon Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}" Glyph="&#xE8D7;" />
+                </controls:SettingsCard.HeaderIcon>
+            </controls:SettingsCard>
 
-                        <Button
-                            HorizontalAlignment="Stretch"
-                            HorizontalContentAlignment="Stretch"
-                            Background="Transparent"
-                            BorderThickness="0"
-                            Click="SettingOptionClicked"
-                            CornerRadius="4"
-                            Tag="{x:Bind enums:WinoPage.MessageListPage}">
-                            <Grid Padding="4,10" ColumnSpacing="12">
-                                <Grid.ColumnDefinitions>
-                                    <ColumnDefinition Width="Auto" />
-                                    <ColumnDefinition Width="*" />
-                                    <ColumnDefinition Width="Auto" />
-                                </Grid.ColumnDefinitions>
-                                <FontIcon
-                                    VerticalAlignment="Center"
-                                    FontSize="16"
-                                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-                                    Glyph="&#xE8C4;" />
-                                <TextBlock
-                                    Grid.Column="1"
-                                    VerticalAlignment="Center"
-                                    Text="{x:Bind domain:Translator.SettingsMessageList_Title}" />
-                                <FontIcon
-                                    Grid.Column="2"
-                                    VerticalAlignment="Center"
-                                    FontSize="12"
-                                    Foreground="{ThemeResource TextFillColorTertiaryBrush}"
-                                    Glyph="&#xE76C;" />
-                            </Grid>
-                        </Button>
+            <controls:SettingsCard
+                Click="SettingOptionClicked"
+                Description="{x:Bind domain:Translator.SettingsStorage_Description}"
+                Header="{x:Bind domain:Translator.SettingsStorage_Title}"
+                IsClickEnabled="True"
+                Tag="{x:Bind enums:WinoPage.StoragePage}">
+                <controls:SettingsCard.HeaderIcon>
+                    <FontIcon Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}" Glyph="&#xE81C;" />
+                </controls:SettingsCard.HeaderIcon>
+            </controls:SettingsCard>
 
-                        <Button
-                            HorizontalAlignment="Stretch"
-                            HorizontalContentAlignment="Stretch"
-                            Background="Transparent"
-                            BorderThickness="0"
-                            Click="SettingOptionClicked"
-                            CornerRadius="4"
-                            Tag="{x:Bind enums:WinoPage.ReadComposePanePage}">
-                            <Grid Padding="4,10" ColumnSpacing="12">
-                                <Grid.ColumnDefinitions>
-                                    <ColumnDefinition Width="Auto" />
-                                    <ColumnDefinition Width="*" />
-                                    <ColumnDefinition Width="Auto" />
-                                </Grid.ColumnDefinitions>
-                                <FontIcon
-                                    VerticalAlignment="Center"
-                                    FontSize="16"
-                                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-                                    Glyph="&#xE8BD;" />
-                                <TextBlock
-                                    Grid.Column="1"
-                                    VerticalAlignment="Center"
-                                    Text="{x:Bind domain:Translator.SettingsReadComposePane_Title}" />
-                                <FontIcon
-                                    Grid.Column="2"
-                                    VerticalAlignment="Center"
-                                    FontSize="12"
-                                    Foreground="{ThemeResource TextFillColorTertiaryBrush}"
-                                    Glyph="&#xE76C;" />
-                            </Grid>
-                        </Button>
+            <!--  Calendar Section  -->
+            <TextBlock
+                Margin="1,16,0,4"
+                Style="{StaticResource BodyStrongTextBlockStyle}"
+                Text="{x:Bind domain:Translator.SettingsOptions_CalendarSection}" />
 
-                        <Button
-                            HorizontalAlignment="Stretch"
-                            HorizontalContentAlignment="Stretch"
-                            Background="Transparent"
-                            BorderThickness="0"
-                            Click="SettingOptionClicked"
-                            CornerRadius="4"
-                            Tag="{x:Bind enums:WinoPage.SignatureAndEncryptionPage}">
-                            <Grid Padding="4,10" ColumnSpacing="12">
-                                <Grid.ColumnDefinitions>
-                                    <ColumnDefinition Width="Auto" />
-                                    <ColumnDefinition Width="*" />
-                                    <ColumnDefinition Width="Auto" />
-                                </Grid.ColumnDefinitions>
-                                <FontIcon
-                                    VerticalAlignment="Center"
-                                    FontSize="16"
-                                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-                                    Glyph="&#xE8D7;" />
-                                <TextBlock
-                                    Grid.Column="1"
-                                    VerticalAlignment="Center"
-                                    Text="{x:Bind domain:Translator.SettingsSignatureAndEncryption_Title}" />
-                                <FontIcon
-                                    Grid.Column="2"
-                                    VerticalAlignment="Center"
-                                    FontSize="12"
-                                    Foreground="{ThemeResource TextFillColorTertiaryBrush}"
-                                    Glyph="&#xE76C;" />
-                            </Grid>
-                        </Button>
-
-                        <Button
-                            HorizontalAlignment="Stretch"
-                            HorizontalContentAlignment="Stretch"
-                            Background="Transparent"
-                            BorderThickness="0"
-                            Click="SettingOptionClicked"
-                            CornerRadius="4"
-                            Tag="{x:Bind enums:WinoPage.StoragePage}">
-                            <Grid Padding="4,10" ColumnSpacing="12">
-                                <Grid.ColumnDefinitions>
-                                    <ColumnDefinition Width="Auto" />
-                                    <ColumnDefinition Width="*" />
-                                    <ColumnDefinition Width="Auto" />
-                                </Grid.ColumnDefinitions>
-                                <FontIcon
-                                    VerticalAlignment="Center"
-                                    FontSize="16"
-                                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-                                    Glyph="&#xE81C;" />
-                                <TextBlock
-                                    Grid.Column="1"
-                                    VerticalAlignment="Center"
-                                    Text="{x:Bind domain:Translator.SettingsStorage_Title}" />
-                                <FontIcon
-                                    Grid.Column="2"
-                                    VerticalAlignment="Center"
-                                    FontSize="12"
-                                    Foreground="{ThemeResource TextFillColorTertiaryBrush}"
-                                    Glyph="&#xE76C;" />
-                            </Grid>
-                        </Button>
-                    </StackPanel>
-                </Grid>
-
-                <!--  Calendar Settings Card  -->
-                <Grid
-                    Grid.Column="1"
-                    Padding="20"
-                    Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
-                    BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
-                    BorderThickness="1"
-                    CornerRadius="8">
-                    <Grid.RowDefinitions>
-                        <RowDefinition Height="Auto" />
-                        <RowDefinition Height="*" />
-                    </Grid.RowDefinitions>
-
-                    <!--  Calendar Header  -->
-                    <StackPanel
-                        Margin="0,0,0,16"
-                        Orientation="Horizontal"
-                        Spacing="12">
-                        <Border
-                            Width="40"
-                            Height="40"
-                            Background="{ThemeResource SystemFillColorNeutralBackgroundBrush}"
-                            CornerRadius="8">
-                            <FontIcon
-                                HorizontalAlignment="Center"
-                                VerticalAlignment="Center"
-                                FontSize="18"
-                                Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}"
-                                Glyph="&#xE787;" />
-                        </Border>
-                        <TextBlock
-                            VerticalAlignment="Center"
-                            Style="{StaticResource SubtitleTextBlockStyle}"
-                            Text="{x:Bind domain:Translator.SettingsOptions_CalendarSection}" />
-                    </StackPanel>
-
-                    <!--  Calendar Options  -->
-                    <StackPanel Grid.Row="1" Spacing="2">
-                        <Button
-                            HorizontalAlignment="Stretch"
-                            HorizontalContentAlignment="Stretch"
-                            Background="Transparent"
-                            BorderThickness="0"
-                            Click="SettingOptionClicked"
-                            CornerRadius="4"
-                            Tag="{x:Bind enums:WinoPage.CalendarSettingsPage}">
-                            <Grid Padding="4,10" ColumnSpacing="12">
-                                <Grid.ColumnDefinitions>
-                                    <ColumnDefinition Width="Auto" />
-                                    <ColumnDefinition Width="*" />
-                                    <ColumnDefinition Width="Auto" />
-                                </Grid.ColumnDefinitions>
-                                <FontIcon
-                                    VerticalAlignment="Center"
-                                    FontSize="16"
-                                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-                                    Glyph="&#xE8BF;" />
-                                <TextBlock
-                                    Grid.Column="1"
-                                    VerticalAlignment="Center"
-                                    Text="{x:Bind domain:Translator.SettingsCalendarSettings_Title}" />
-                                <FontIcon
-                                    Grid.Column="2"
-                                    VerticalAlignment="Center"
-                                    FontSize="12"
-                                    Foreground="{ThemeResource TextFillColorTertiaryBrush}"
-                                    Glyph="&#xE76C;" />
-                            </Grid>
-                        </Button>
-                    </StackPanel>
-                </Grid>
-            </Grid>
+            <controls:SettingsCard
+                Click="SettingOptionClicked"
+                Description="{x:Bind domain:Translator.SettingsCalendarSettings_Description}"
+                Header="{x:Bind domain:Translator.SettingsCalendarSettings_Title}"
+                IsClickEnabled="True"
+                Tag="{x:Bind enums:WinoPage.CalendarSettingsPage}">
+                <controls:SettingsCard.HeaderIcon>
+                    <FontIcon Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}" Glyph="&#xE787;" />
+                </controls:SettingsCard.HeaderIcon>
+            </controls:SettingsCard>
         </StackPanel>
     </ScrollViewer>
 </abstract:SettingOptionsPageAbstract>
diff --git a/Wino.Mail.WinUI/Views/SettingOptionsPage.xaml.cs b/Wino.Mail.WinUI/Views/SettingOptionsPage.xaml.cs
index 159c0ea3..2ec1c820 100644
--- a/Wino.Mail.WinUI/Views/SettingOptionsPage.xaml.cs
+++ b/Wino.Mail.WinUI/Views/SettingOptionsPage.xaml.cs
@@ -1,3 +1,4 @@
+using CommunityToolkit.WinUI.Controls;
 using Microsoft.UI.Xaml;
 using Microsoft.UI.Xaml.Controls;
 using Wino.Core.Domain.Enums;
@@ -17,6 +18,7 @@ public sealed partial class SettingOptionsPage : SettingOptionsPageAbstract
         WinoPage? page = sender switch
         {
             Button button when button.Tag is WinoPage p => p,
+            SettingsCard card when card.Tag is WinoPage p => p,
             _ => null
         };