From c72d1b703842a0adb25446e881c66aed9d219bb7 Mon Sep 17 00:00:00 2001
From: United600 <United600@users.noreply.github.com>
Date: Tue, 23 Apr 2024 17:23:08 +0100
Subject: [PATCH 1/2] improve settings brushes and spacing

---
 src/Notepads/App.xaml                         |  31 +-
 src/Notepads/Notepads.csproj                  |   4 +
 .../Resource/CustomSettingsStyle.xaml         |  42 ++
 src/Notepads/Strings/ar-YE/Settings.resw      |   2 +-
 src/Notepads/Strings/bg-BG/Settings.resw      |   2 +-
 src/Notepads/Strings/cs-CZ/Settings.resw      |   2 +-
 src/Notepads/Strings/de-CH/Settings.resw      |   2 +-
 src/Notepads/Strings/de-DE/Settings.resw      |   2 +-
 src/Notepads/Strings/en-US/Settings.resw      |   2 +-
 src/Notepads/Strings/es-ES/Settings.resw      |   2 +-
 src/Notepads/Strings/fi-FI/Settings.resw      |   2 +-
 src/Notepads/Strings/fr-FR/Settings.resw      |   2 +-
 src/Notepads/Strings/hi-IN/Settings.resw      |   2 +-
 src/Notepads/Strings/hr-HR/Settings.resw      |   2 +-
 src/Notepads/Strings/hu-HU/Settings.resw      |   2 +-
 src/Notepads/Strings/it-IT/Settings.resw      |   2 +-
 src/Notepads/Strings/ja-JP/Settings.resw      |   2 +-
 src/Notepads/Strings/ka-GE/Settings.resw      |   2 +-
 src/Notepads/Strings/ko-KR/Settings.resw      |   2 +-
 src/Notepads/Strings/nl-NL/Settings.resw      |   2 +-
 src/Notepads/Strings/or-IN/Settings.resw      |   2 +-
 src/Notepads/Strings/pl-PL/Settings.resw      |   2 +-
 src/Notepads/Strings/pt-BR/Settings.resw      |   2 +-
 src/Notepads/Strings/pt-PT/Settings.resw      |   2 +-
 src/Notepads/Strings/ru-RU/Settings.resw      |   2 +-
 src/Notepads/Strings/sr-Latn/Settings.resw    |   2 +-
 src/Notepads/Strings/sr-cyrl/Settings.resw    |   2 +-
 src/Notepads/Strings/tr-TR/Settings.resw      |   2 +-
 src/Notepads/Strings/uk-UA/Settings.resw      |   2 +-
 src/Notepads/Strings/vi-VN/Settings.resw      |   2 +-
 src/Notepads/Strings/zh-CN/Settings.resw      |   2 +-
 src/Notepads/Strings/zh-TW/Settings.resw      |   2 +-
 src/Notepads/Views/Settings/AboutPage.xaml    | 215 ++++-----
 .../Views/Settings/AdvancedSettingsPage.xaml  | 166 ++++---
 .../Settings/AdvancedSettingsPage.xaml.cs     |   6 +-
 .../Settings/PersonalizationSettingsPage.xaml | 153 +++---
 .../PersonalizationSettingsPage.xaml.cs       |   3 +-
 src/Notepads/Views/Settings/SettingsPage.xaml |  65 ++-
 .../Views/Settings/SettingsPanel.xaml         |  52 +-
 .../Settings/TextAndEditorSettingsPage.xaml   | 456 ++++++++++--------
 .../TextAndEditorSettingsPage.xaml.cs         |   1 +
 41 files changed, 658 insertions(+), 594 deletions(-)
 create mode 100644 src/Notepads/Resource/CustomSettingsStyle.xaml

diff --git a/src/Notepads/App.xaml b/src/Notepads/App.xaml
index af23eda27..f564ec439 100644
--- a/src/Notepads/App.xaml
+++ b/src/Notepads/App.xaml
@@ -21,27 +21,20 @@
             <ResourceDictionary.MergedDictionaries>
                 <ResourceDictionary Source="Notepads.Controls/Themes/Generic.xaml" />
                 <ResourceDictionary Source="Controls/TextEditor/TextEditorCore.xaml" />
-                <ResourceDictionary Source="Controls/FindAndReplace/FindAndReplacePlaceholder.xaml"></ResourceDictionary>
-                <ResourceDictionary Source="Resource/DismissButtonStyle.xaml"></ResourceDictionary>
-                <ResourceDictionary Source="Resource/TransparentTextBoxStyle.xaml"></ResourceDictionary>
-                <ResourceDictionary Source="Resource/CustomSplitViewStyle.xaml"></ResourceDictionary>
-                <ResourceDictionary Source="Resource/InAppNotificationNoDismissButton.xaml"></ResourceDictionary>
-                <ResourceDictionary Source="Resource/CustomSliderStyle.xaml"></ResourceDictionary>
-                <ResourceDictionary Source="Resource/CustomRadioButtonStyle.xaml"></ResourceDictionary>
-                <ResourceDictionary Source="Resource/CustomToggleSwitchStyle.xaml"></ResourceDictionary>
-                <ResourceDictionary Source="Resource/CustomNavigationViewItemStyle.xaml"></ResourceDictionary>
-                <ResourceDictionary Source="Resource/CustomAppBarButtonStyle.xaml"></ResourceDictionary>
-                <ResourceDictionary Source="Resource/CustomCheckBoxStyle.xaml"></ResourceDictionary>
+                <ResourceDictionary Source="Controls/FindAndReplace/FindAndReplacePlaceholder.xaml" />
+                <ResourceDictionary Source="Resource/DismissButtonStyle.xaml" />
+                <ResourceDictionary Source="Resource/TransparentTextBoxStyle.xaml" />
+                <ResourceDictionary Source="Resource/CustomSplitViewStyle.xaml" />
+                <ResourceDictionary Source="Resource/InAppNotificationNoDismissButton.xaml" />
+                <ResourceDictionary Source="Resource/CustomSliderStyle.xaml" />
+                <ResourceDictionary Source="Resource/CustomRadioButtonStyle.xaml" />
+                <ResourceDictionary Source="Resource/CustomToggleSwitchStyle.xaml" />
+                <ResourceDictionary Source="Resource/CustomNavigationViewItemStyle.xaml" />
+                <ResourceDictionary Source="Resource/CustomAppBarButtonStyle.xaml" />
+                <ResourceDictionary Source="Resource/CustomCheckBoxStyle.xaml" />
+                <ResourceDictionary Source="Resource/CustomSettingsStyle.xaml" />
             </ResourceDictionary.MergedDictionaries>
 
-            <Style x:Key="CompactSubtitleTextBlockStyle" TargetType="TextBlock" BasedOn="{StaticResource SubtitleTextBlockStyle}">
-                <Setter Property="FontSize" Value="18"/>
-            </Style>
-
-            <Style x:Key="DescriptionTextBlockStyle" TargetType="TextBlock" BasedOn="{StaticResource CaptionTextBlockStyle}">
-                <Setter Property="Foreground" Value="{ThemeResource SystemBaseMediumHighColor}"/>
-            </Style>
-
         </ResourceDictionary>
     </Application.Resources>
 </Application>
\ No newline at end of file
diff --git a/src/Notepads/Notepads.csproj b/src/Notepads/Notepads.csproj
index 22000c977..fbfc99760 100644
--- a/src/Notepads/Notepads.csproj
+++ b/src/Notepads/Notepads.csproj
@@ -385,6 +385,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="Resource\CustomSettingsStyle.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="Resource\CustomSliderStyle.xaml">
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
diff --git a/src/Notepads/Resource/CustomSettingsStyle.xaml b/src/Notepads/Resource/CustomSettingsStyle.xaml
new file mode 100644
index 000000000..3fdd3a02a
--- /dev/null
+++ b/src/Notepads/Resource/CustomSettingsStyle.xaml
@@ -0,0 +1,42 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:local="using:Notepads">
+
+    <ResourceDictionary.ThemeDictionaries>
+        <ResourceDictionary x:Key="Default">
+            <Color x:Key="DangerTextForegroundColor">#FFFF4419</Color>
+            <SolidColorBrush x:Key="DangerTextForegroundBrush" Color="{StaticResource DangerTextForegroundColor}" />
+        </ResourceDictionary>
+        <ResourceDictionary x:Key="Light">
+            <Color x:Key="DangerTextForegroundColor">#FFE00015</Color>
+            <SolidColorBrush x:Key="DangerTextForegroundBrush" Color="{StaticResource DangerTextForegroundColor}" />
+        </ResourceDictionary>
+        <ResourceDictionary x:Key="HighContrast">
+            <SolidColorBrush x:Key="DangerTextForegroundBrush" Color="{ThemeResource SystemColorHighlightColor}" />
+        </ResourceDictionary>
+    </ResourceDictionary.ThemeDictionaries>
+
+    <StaticResource x:Key="ComboBoxBackground" ResourceKey="SystemControlTransparentBrush" />
+
+    <x:Double x:Key="SettingsEntranceHorizontalOffset">25</x:Double>
+    <Thickness x:Key="SettingsContentPadding">20,8,20,12</Thickness>
+    <Thickness x:Key="SettingsTitleMargin">20,0,20,0</Thickness>
+    <Thickness x:Key="SettingsSubtitleMargin">0,0,0,6</Thickness>
+    <Thickness x:Key="SettingsSubtitleLargeMargin">0,0,0,12</Thickness>
+
+    <Style x:Key="SettingsGroupSectionStyle" TargetType="StackPanel">
+        <Setter Property="Margin" Value="0,0,0,20" />
+    </Style>
+
+    <Style x:Key="SubtitleAltTextBlockStyle" TargetType="TextBlock" BasedOn="{StaticResource BaseTextBlockStyle}">
+        <Setter Property="FontWeight" Value="Normal" />
+        <Setter Property="FontSize" Value="18" />
+        <Setter Property="OpticalMarginAlignment" Value="TrimSideBearings" />
+    </Style>
+    <Style x:Key="DescriptionTextBlockStyle" TargetType="TextBlock" BasedOn="{StaticResource BaseTextBlockStyle}">
+        <Setter Property="Foreground" Value="{ThemeResource SystemControlDescriptionTextForegroundBrush}" />
+        <Setter Property="FontSize" Value="12" />
+        <Setter Property="FontWeight" Value="Normal" />
+    </Style>
+
+</ResourceDictionary>
diff --git a/src/Notepads/Strings/ar-YE/Settings.resw b/src/Notepads/Strings/ar-YE/Settings.resw
index 8ead247fd..16a1d5a95 100644
--- a/src/Notepads/Strings/ar-YE/Settings.resw
+++ b/src/Notepads/Strings/ar-YE/Settings.resw
@@ -149,7 +149,7 @@
     <value>للمزيد من المعلومات قم بزيارة موقعنا:</value>
     <comment>AboutPage Notepads Website Title display text.</comment>
   </data>
-  <data name="AboutPage_PrivacyStatementTitle.Text" xml:space="preserve">
+  <data name="AboutPage_PrivacyStatementTitle.Content" xml:space="preserve">
     <value>بيان سياسة الخصوصية</value>
     <comment>AboutPage PrivacyStatementTitle display text.</comment>
   </data>
diff --git a/src/Notepads/Strings/bg-BG/Settings.resw b/src/Notepads/Strings/bg-BG/Settings.resw
index f54607809..a450c9c35 100644
--- a/src/Notepads/Strings/bg-BG/Settings.resw
+++ b/src/Notepads/Strings/bg-BG/Settings.resw
@@ -149,7 +149,7 @@
     <value>За повече информация, моля посетете нашия уебсайт:</value>
     <comment>AboutPage Notepads Website Title display text.</comment>
   </data>
-  <data name="AboutPage_PrivacyStatementTitle.Text" xml:space="preserve">
+  <data name="AboutPage_PrivacyStatementTitle.Content" xml:space="preserve">
     <value>Декларация за поверителност</value>
     <comment>AboutPage PrivacyStatementTitle display text.</comment>
   </data>
diff --git a/src/Notepads/Strings/cs-CZ/Settings.resw b/src/Notepads/Strings/cs-CZ/Settings.resw
index 25cee14cd..20800df35 100644
--- a/src/Notepads/Strings/cs-CZ/Settings.resw
+++ b/src/Notepads/Strings/cs-CZ/Settings.resw
@@ -149,7 +149,7 @@
     <value>Pro více informací, prosím, navštivte náš web:</value>
     <comment>AboutPage Notepads Website Title display text.</comment>
   </data>
-  <data name="AboutPage_PrivacyStatementTitle.Text" xml:space="preserve">
+  <data name="AboutPage_PrivacyStatementTitle.Content" xml:space="preserve">
     <value>Prohlášení o zásadách ochrany osobních údajů</value>
     <comment>AboutPage PrivacyStatementTitle display text.</comment>
   </data>
diff --git a/src/Notepads/Strings/de-CH/Settings.resw b/src/Notepads/Strings/de-CH/Settings.resw
index 9a77aebb0..d0f683cb8 100644
--- a/src/Notepads/Strings/de-CH/Settings.resw
+++ b/src/Notepads/Strings/de-CH/Settings.resw
@@ -149,7 +149,7 @@
     <value>Mehr Informationen auf unserer Website:</value>
     <comment>AboutPage Notepads Website Title display text.</comment>
   </data>
-  <data name="AboutPage_PrivacyStatementTitle.Text" xml:space="preserve">
+  <data name="AboutPage_PrivacyStatementTitle.Content" xml:space="preserve">
     <value>Datenschutzerklärung</value>
     <comment>AboutPage PrivacyStatementTitle display text.</comment>
   </data>
diff --git a/src/Notepads/Strings/de-DE/Settings.resw b/src/Notepads/Strings/de-DE/Settings.resw
index 4fac86c29..442d88196 100644
--- a/src/Notepads/Strings/de-DE/Settings.resw
+++ b/src/Notepads/Strings/de-DE/Settings.resw
@@ -149,7 +149,7 @@
     <value>Mehr Informationen auf unserer Website:</value>
     <comment>AboutPage Notepads Website Title display text.</comment>
   </data>
-  <data name="AboutPage_PrivacyStatementTitle.Text" xml:space="preserve">
+  <data name="AboutPage_PrivacyStatementTitle.Content" xml:space="preserve">
     <value>Datenschutzerklärung</value>
     <comment>AboutPage PrivacyStatementTitle display text.</comment>
   </data>
diff --git a/src/Notepads/Strings/en-US/Settings.resw b/src/Notepads/Strings/en-US/Settings.resw
index bc442cca4..a67f773e5 100644
--- a/src/Notepads/Strings/en-US/Settings.resw
+++ b/src/Notepads/Strings/en-US/Settings.resw
@@ -149,7 +149,7 @@
     <value>For more info, please visit our website:</value>
     <comment>AboutPage Notepads Website Title display text.</comment>
   </data>
-  <data name="AboutPage_PrivacyStatementTitle.Text" xml:space="preserve">
+  <data name="AboutPage_PrivacyStatementTitle.Content" xml:space="preserve">
     <value>Privacy Statement</value>
     <comment>AboutPage PrivacyStatementTitle display text.</comment>
   </data>
diff --git a/src/Notepads/Strings/es-ES/Settings.resw b/src/Notepads/Strings/es-ES/Settings.resw
index 6e3520b82..a7696b2ca 100644
--- a/src/Notepads/Strings/es-ES/Settings.resw
+++ b/src/Notepads/Strings/es-ES/Settings.resw
@@ -149,7 +149,7 @@
     <value>Para más información, visite nuestro sitio web:</value>
     <comment>AboutPage Notepads Website Title display text.</comment>
   </data>
-  <data name="AboutPage_PrivacyStatementTitle.Text" xml:space="preserve">
+  <data name="AboutPage_PrivacyStatementTitle.Content" xml:space="preserve">
     <value>Declaración de Privacidad</value>
     <comment>AboutPage PrivacyStatementTitle display text.</comment>
   </data>
diff --git a/src/Notepads/Strings/fi-FI/Settings.resw b/src/Notepads/Strings/fi-FI/Settings.resw
index d329593fd..c98693168 100644
--- a/src/Notepads/Strings/fi-FI/Settings.resw
+++ b/src/Notepads/Strings/fi-FI/Settings.resw
@@ -149,7 +149,7 @@
     <value>Lisätietoja varten vieraile verkkosivuillamme:</value>
     <comment>AboutPage Notepads Website Title display text.</comment>
   </data>
-  <data name="AboutPage_PrivacyStatementTitle.Text" xml:space="preserve">
+  <data name="AboutPage_PrivacyStatementTitle.Content" xml:space="preserve">
     <value>Tietosuojalausunto</value>
     <comment>AboutPage PrivacyStatementTitle display text.</comment>
   </data>
diff --git a/src/Notepads/Strings/fr-FR/Settings.resw b/src/Notepads/Strings/fr-FR/Settings.resw
index c1bdf4c26..072769b44 100644
--- a/src/Notepads/Strings/fr-FR/Settings.resw
+++ b/src/Notepads/Strings/fr-FR/Settings.resw
@@ -149,7 +149,7 @@
     <value>Pour plus d'infos, visitez notre site :</value>
     <comment>AboutPage Notepads Website Title display text.</comment>
   </data>
-  <data name="AboutPage_PrivacyStatementTitle.Text" xml:space="preserve">
+  <data name="AboutPage_PrivacyStatementTitle.Content" xml:space="preserve">
     <value>Déclaration de confidentialité</value>
     <comment>AboutPage PrivacyStatementTitle display text.</comment>
   </data>
diff --git a/src/Notepads/Strings/hi-IN/Settings.resw b/src/Notepads/Strings/hi-IN/Settings.resw
index d5dbc0654..740b73f3d 100644
--- a/src/Notepads/Strings/hi-IN/Settings.resw
+++ b/src/Notepads/Strings/hi-IN/Settings.resw
@@ -149,7 +149,7 @@
     <value>अधिक जानकारी के लिए, कृपया हमारी वेबसाइट पर जाएं:</value>
     <comment>AboutPage Notepads Website Title display text.</comment>
   </data>
-  <data name="AboutPage_PrivacyStatementTitle.Text" xml:space="preserve">
+  <data name="AboutPage_PrivacyStatementTitle.Content" xml:space="preserve">
     <value>गोपनीयता विवरण</value>
     <comment>AboutPage PrivacyStatementTitle display text.</comment>
   </data>
diff --git a/src/Notepads/Strings/hr-HR/Settings.resw b/src/Notepads/Strings/hr-HR/Settings.resw
index a902168f5..deb08600a 100644
--- a/src/Notepads/Strings/hr-HR/Settings.resw
+++ b/src/Notepads/Strings/hr-HR/Settings.resw
@@ -149,7 +149,7 @@
     <value>Daljnje informacije se nalaze na našoj web-stranici:</value>
     <comment>AboutPage Notepads Website Title display text.</comment>
   </data>
-  <data name="AboutPage_PrivacyStatementTitle.Text" xml:space="preserve">
+  <data name="AboutPage_PrivacyStatementTitle.Content" xml:space="preserve">
     <value>Izjava o privatnosti</value>
     <comment>AboutPage PrivacyStatementTitle display text.</comment>
   </data>
diff --git a/src/Notepads/Strings/hu-HU/Settings.resw b/src/Notepads/Strings/hu-HU/Settings.resw
index 2507bb0ef..43d237f43 100644
--- a/src/Notepads/Strings/hu-HU/Settings.resw
+++ b/src/Notepads/Strings/hu-HU/Settings.resw
@@ -149,7 +149,7 @@
     <value>További információért, látogassa meg a weboldalunkat:</value>
     <comment>AboutPage Notepads Website Title display text.</comment>
   </data>
-  <data name="AboutPage_PrivacyStatementTitle.Text" xml:space="preserve">
+  <data name="AboutPage_PrivacyStatementTitle.Content" xml:space="preserve">
     <value>Adatvédelmi Nyilatkozat</value>
     <comment>AboutPage PrivacyStatementTitle display text.</comment>
   </data>
diff --git a/src/Notepads/Strings/it-IT/Settings.resw b/src/Notepads/Strings/it-IT/Settings.resw
index 5447248e8..765a63a21 100644
--- a/src/Notepads/Strings/it-IT/Settings.resw
+++ b/src/Notepads/Strings/it-IT/Settings.resw
@@ -149,7 +149,7 @@
     <value>Per maggiori informazioni, visita il nostro sito Web:</value>
     <comment>AboutPage Notepads Website Title display text.</comment>
   </data>
-  <data name="AboutPage_PrivacyStatementTitle.Text" xml:space="preserve">
+  <data name="AboutPage_PrivacyStatementTitle.Content" xml:space="preserve">
     <value>Informativa sulla Privacy</value>
     <comment>AboutPage PrivacyStatementTitle display text.</comment>
   </data>
diff --git a/src/Notepads/Strings/ja-JP/Settings.resw b/src/Notepads/Strings/ja-JP/Settings.resw
index e5d63e7c9..411d76bf3 100644
--- a/src/Notepads/Strings/ja-JP/Settings.resw
+++ b/src/Notepads/Strings/ja-JP/Settings.resw
@@ -149,7 +149,7 @@
     <value>詳しくは公式サイトをご覧ください:</value>
     <comment>AboutPage Notepads Website Title display text.</comment>
   </data>
-  <data name="AboutPage_PrivacyStatementTitle.Text" xml:space="preserve">
+  <data name="AboutPage_PrivacyStatementTitle.Content" xml:space="preserve">
     <value>プライバシーについて</value>
     <comment>AboutPage PrivacyStatementTitle display text.</comment>
   </data>
diff --git a/src/Notepads/Strings/ka-GE/Settings.resw b/src/Notepads/Strings/ka-GE/Settings.resw
index 7be23152d..90f2ecb98 100644
--- a/src/Notepads/Strings/ka-GE/Settings.resw
+++ b/src/Notepads/Strings/ka-GE/Settings.resw
@@ -149,7 +149,7 @@
     <value>დამატებითი ინფორმაციისთვის, ესტუმრეთ ვებსაიტს:</value>
     <comment>AboutPage Notepads Website Title display text.</comment>
   </data>
-  <data name="AboutPage_PrivacyStatementTitle.Text" xml:space="preserve">
+  <data name="AboutPage_PrivacyStatementTitle.Content" xml:space="preserve">
     <value>კონფედენციალურობის შესახებგანცხადება</value>
     <comment>AboutPage PrivacyStatementTitle display text.</comment>
   </data>
diff --git a/src/Notepads/Strings/ko-KR/Settings.resw b/src/Notepads/Strings/ko-KR/Settings.resw
index 04ff84d1a..5620402af 100644
--- a/src/Notepads/Strings/ko-KR/Settings.resw
+++ b/src/Notepads/Strings/ko-KR/Settings.resw
@@ -149,7 +149,7 @@
     <value>자세한 내용은 우리의 웹 사이트를 방문하십시오:</value>
     <comment>AboutPage Notepads Website Title display text.</comment>
   </data>
-  <data name="AboutPage_PrivacyStatementTitle.Text" xml:space="preserve">
+  <data name="AboutPage_PrivacyStatementTitle.Content" xml:space="preserve">
     <value>개인정보 보호 정책</value>
     <comment>AboutPage PrivacyStatementTitle display text.</comment>
   </data>
diff --git a/src/Notepads/Strings/nl-NL/Settings.resw b/src/Notepads/Strings/nl-NL/Settings.resw
index 6a93e5deb..9ae856fc9 100644
--- a/src/Notepads/Strings/nl-NL/Settings.resw
+++ b/src/Notepads/Strings/nl-NL/Settings.resw
@@ -149,7 +149,7 @@
     <value>Voor meer informatie, bezoek de website:</value>
     <comment>AboutPage Notepads Website Title display text.</comment>
   </data>
-  <data name="AboutPage_PrivacyStatementTitle.Text" xml:space="preserve">
+  <data name="AboutPage_PrivacyStatementTitle.Content" xml:space="preserve">
     <value>Privacyverklaring</value>
     <comment>AboutPage PrivacyStatementTitle display text.</comment>
   </data>
diff --git a/src/Notepads/Strings/or-IN/Settings.resw b/src/Notepads/Strings/or-IN/Settings.resw
index b38a86a80..2f19fcf67 100644
--- a/src/Notepads/Strings/or-IN/Settings.resw
+++ b/src/Notepads/Strings/or-IN/Settings.resw
@@ -149,7 +149,7 @@
     <value>ଅଧିକ ସୂଚନା ପାଇଁ, ଦୟାକରି ଆମର ୱେବସାଇଟ୍ ପରିଦର୍ଶନ କରନ୍ତୁ:</value>
     <comment>AboutPage Notepads Website Title display text.</comment>
   </data>
-  <data name="AboutPage_PrivacyStatementTitle.Text" xml:space="preserve">
+  <data name="AboutPage_PrivacyStatementTitle.Content" xml:space="preserve">
     <value>ଗୋପନୀୟତା ବିବୃତ୍ତି</value>
     <comment>AboutPage PrivacyStatementTitle display text.</comment>
   </data>
diff --git a/src/Notepads/Strings/pl-PL/Settings.resw b/src/Notepads/Strings/pl-PL/Settings.resw
index 31dc5c677..298a02329 100644
--- a/src/Notepads/Strings/pl-PL/Settings.resw
+++ b/src/Notepads/Strings/pl-PL/Settings.resw
@@ -149,7 +149,7 @@
     <value>Po więcej informacji, odwiedź naszą stronę:</value>
     <comment>AboutPage Notepads Website Title display text.</comment>
   </data>
-  <data name="AboutPage_PrivacyStatementTitle.Text" xml:space="preserve">
+  <data name="AboutPage_PrivacyStatementTitle.Content" xml:space="preserve">
     <value>Polityka prywatności</value>
     <comment>AboutPage PrivacyStatementTitle display text.</comment>
   </data>
diff --git a/src/Notepads/Strings/pt-BR/Settings.resw b/src/Notepads/Strings/pt-BR/Settings.resw
index 195a96f79..c69c02626 100644
--- a/src/Notepads/Strings/pt-BR/Settings.resw
+++ b/src/Notepads/Strings/pt-BR/Settings.resw
@@ -149,7 +149,7 @@
     <value>Para mais informações, visite o nosso site:</value>
     <comment>AboutPage Notepads Website Title display text.</comment>
   </data>
-  <data name="AboutPage_PrivacyStatementTitle.Text" xml:space="preserve">
+  <data name="AboutPage_PrivacyStatementTitle.Content" xml:space="preserve">
     <value>Declaração de privacidade</value>
     <comment>AboutPage PrivacyStatementTitle display text.</comment>
   </data>
diff --git a/src/Notepads/Strings/pt-PT/Settings.resw b/src/Notepads/Strings/pt-PT/Settings.resw
index 3cc03bbf9..72732a5f5 100644
--- a/src/Notepads/Strings/pt-PT/Settings.resw
+++ b/src/Notepads/Strings/pt-PT/Settings.resw
@@ -149,7 +149,7 @@
     <value>Para obter mais informações, visite o nosso site:</value>
     <comment>AboutPage Notepads Website Title display text.</comment>
   </data>
-  <data name="AboutPage_PrivacyStatementTitle.Text" xml:space="preserve">
+  <data name="AboutPage_PrivacyStatementTitle.Content" xml:space="preserve">
     <value>Declaração de privacidade</value>
     <comment>AboutPage PrivacyStatementTitle display text.</comment>
   </data>
diff --git a/src/Notepads/Strings/ru-RU/Settings.resw b/src/Notepads/Strings/ru-RU/Settings.resw
index e17830de9..ab2bdb2ef 100644
--- a/src/Notepads/Strings/ru-RU/Settings.resw
+++ b/src/Notepads/Strings/ru-RU/Settings.resw
@@ -149,7 +149,7 @@
     <value>Больше информации на нашем веб-сайте:</value>
     <comment>AboutPage Notepads Website Title display text.</comment>
   </data>
-  <data name="AboutPage_PrivacyStatementTitle.Text" xml:space="preserve">
+  <data name="AboutPage_PrivacyStatementTitle.Content" xml:space="preserve">
     <value>Заявление о конфиденциальности</value>
     <comment>AboutPage PrivacyStatementTitle display text.</comment>
   </data>
diff --git a/src/Notepads/Strings/sr-Latn/Settings.resw b/src/Notepads/Strings/sr-Latn/Settings.resw
index 1ea33ae32..d9eaaa3ab 100644
--- a/src/Notepads/Strings/sr-Latn/Settings.resw
+++ b/src/Notepads/Strings/sr-Latn/Settings.resw
@@ -149,7 +149,7 @@
     <value>Za još informacija, molimo posetite naš veb-sajt:</value>
     <comment>AboutPage Notepads Website Title display text.</comment>
   </data>
-  <data name="AboutPage_PrivacyStatementTitle.Text" xml:space="preserve">
+  <data name="AboutPage_PrivacyStatementTitle.Content" xml:space="preserve">
     <value>Izjava o privatnosti</value>
     <comment>AboutPage PrivacyStatementTitle display text.</comment>
   </data>
diff --git a/src/Notepads/Strings/sr-cyrl/Settings.resw b/src/Notepads/Strings/sr-cyrl/Settings.resw
index fd2a53f5d..26f87e654 100644
--- a/src/Notepads/Strings/sr-cyrl/Settings.resw
+++ b/src/Notepads/Strings/sr-cyrl/Settings.resw
@@ -149,7 +149,7 @@
     <value>За још информација, молимо посетите наш веб-сајт:</value>
     <comment>AboutPage Notepads Website Title display text.</comment>
   </data>
-  <data name="AboutPage_PrivacyStatementTitle.Text" xml:space="preserve">
+  <data name="AboutPage_PrivacyStatementTitle.Content" xml:space="preserve">
     <value>Изјава о приватности</value>
     <comment>AboutPage PrivacyStatementTitle display text.</comment>
   </data>
diff --git a/src/Notepads/Strings/tr-TR/Settings.resw b/src/Notepads/Strings/tr-TR/Settings.resw
index df5f5ae92..046024386 100755
--- a/src/Notepads/Strings/tr-TR/Settings.resw
+++ b/src/Notepads/Strings/tr-TR/Settings.resw
@@ -149,7 +149,7 @@
     <value>Daha fazla bilgi için, web sitemizi ziyaret edin:</value>
     <comment>AboutPage Notepads Website Title display text.</comment>
   </data>
-  <data name="AboutPage_PrivacyStatementTitle.Text" xml:space="preserve">
+  <data name="AboutPage_PrivacyStatementTitle.Content" xml:space="preserve">
     <value>Gizlilik Beyanı</value>
     <comment>AboutPage PrivacyStatementTitle display text.</comment>
   </data>
diff --git a/src/Notepads/Strings/uk-UA/Settings.resw b/src/Notepads/Strings/uk-UA/Settings.resw
index e31d7a809..d05980656 100644
--- a/src/Notepads/Strings/uk-UA/Settings.resw
+++ b/src/Notepads/Strings/uk-UA/Settings.resw
@@ -149,7 +149,7 @@
     <value>Для додаткової інформації відвідайте наш сайт:</value>
     <comment>AboutPage Notepads Website Title display text.</comment>
   </data>
-  <data name="AboutPage_PrivacyStatementTitle.Text" xml:space="preserve">
+  <data name="AboutPage_PrivacyStatementTitle.Content" xml:space="preserve">
     <value>Конфіденційність</value>
     <comment>AboutPage PrivacyStatementTitle display text.</comment>
   </data>
diff --git a/src/Notepads/Strings/vi-VN/Settings.resw b/src/Notepads/Strings/vi-VN/Settings.resw
index 38e50511e..186357e81 100644
--- a/src/Notepads/Strings/vi-VN/Settings.resw
+++ b/src/Notepads/Strings/vi-VN/Settings.resw
@@ -149,7 +149,7 @@
     <value>Để biết thêm thông tin, vui lòng truy cập trang web của chúng tôi:</value>
     <comment>AboutPage Notepads Website Title display text.</comment>
   </data>
-  <data name="AboutPage_PrivacyStatementTitle.Text" xml:space="preserve">
+  <data name="AboutPage_PrivacyStatementTitle.Content" xml:space="preserve">
     <value>Cam kết bảo mật</value>
     <comment>AboutPage PrivacyStatementTitle display text.</comment>
   </data>
diff --git a/src/Notepads/Strings/zh-CN/Settings.resw b/src/Notepads/Strings/zh-CN/Settings.resw
index 6fbdb7ecf..84914a1a0 100644
--- a/src/Notepads/Strings/zh-CN/Settings.resw
+++ b/src/Notepads/Strings/zh-CN/Settings.resw
@@ -149,7 +149,7 @@
     <value>更多信息，请访问Notepads官网：</value>
     <comment>AboutPage Notepads Website Title display text.</comment>
   </data>
-  <data name="AboutPage_PrivacyStatementTitle.Text" xml:space="preserve">
+  <data name="AboutPage_PrivacyStatementTitle.Content" xml:space="preserve">
     <value>隐私声明</value>
     <comment>AboutPage PrivacyStatementTitle display text.</comment>
   </data>
diff --git a/src/Notepads/Strings/zh-TW/Settings.resw b/src/Notepads/Strings/zh-TW/Settings.resw
index 3334a131c..89a4dc790 100644
--- a/src/Notepads/Strings/zh-TW/Settings.resw
+++ b/src/Notepads/Strings/zh-TW/Settings.resw
@@ -149,7 +149,7 @@
     <value>若要取得更多資訊，請造訪我們的官方網站：</value>
     <comment>AboutPage Notepads Website Title display text.</comment>
   </data>
-  <data name="AboutPage_PrivacyStatementTitle.Text" xml:space="preserve">
+  <data name="AboutPage_PrivacyStatementTitle.Content" xml:space="preserve">
     <value>隱私權聲明</value>
     <comment>AboutPage PrivacyStatementTitle display text.</comment>
   </data>
diff --git a/src/Notepads/Views/Settings/AboutPage.xaml b/src/Notepads/Views/Settings/AboutPage.xaml
index 07f62de97..6cd19a495 100644
--- a/src/Notepads/Views/Settings/AboutPage.xaml
+++ b/src/Notepads/Views/Settings/AboutPage.xaml
@@ -1,140 +1,105 @@
-<Page
-    x:Class="Notepads.Views.Settings.AboutPage"
-    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    mc:Ignorable="d"
-    Background="{ThemeResource SystemControlForegroundTransparentBrush}">
+<Page x:Class="Notepads.Views.Settings.AboutPage"
+      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      d:DesignWidth="333.333"
+      d:DesignHeight="1124"
+      HighContrastAdjustment="None"
+      mc:Ignorable="d">
 
     <Grid>
         <Grid.ChildrenTransitions>
             <TransitionCollection>
-                <EntranceThemeTransition FromHorizontalOffset="25" FromVerticalOffset="0"/>
+                <EntranceThemeTransition FromHorizontalOffset="{StaticResource SettingsEntranceHorizontalOffset}" FromVerticalOffset="0" />
             </TransitionCollection>
         </Grid.ChildrenTransitions>
         <Grid.BackgroundTransition>
             <BrushTransition />
         </Grid.BackgroundTransition>
 
-        <ScrollViewer
-            Grid.Row="0"
-            Padding="20,0,20,0"
-            IsTabStop="False"
-            UseSystemFocusVisuals="False"
-            VerticalScrollBarVisibility="Auto"
-            VerticalScrollMode="Auto">
-            <StackPanel HorizontalAlignment="Left" Margin="0,0,0,40">
-                <StackPanel Orientation="Horizontal" Margin="0,15,0,0">
-                    <Image x:Name="AppIconImage" Width="90" Margin="-6,0,0,0" Source="/Assets/appicon_ws.png"/>
-                    <StackPanel Margin="10,0,0,0">
-                        <TextBlock
-                            Margin="0,5,0,0"
-                            FontWeight="Normal"
-                            FontSize="25"
-                            Text="{x:Bind AppName, Mode=OneTime}" />
-                        <TextBlock
-                            Margin="2,5,0,5"
-                            FontWeight="Normal"
-                            FontSize="20"
-                            Text="{x:Bind AppVersion, Mode=OneTime}" />
+        <ScrollViewer Grid.Row="0"
+                      VerticalScrollMode="Auto"
+                      VerticalScrollBarVisibility="Auto"
+                      IsTabStop="False"
+                      UseSystemFocusVisuals="False">
+            <StackPanel Padding="{StaticResource SettingsContentPadding}" HorizontalAlignment="Left">
+                <!-- About -->
+                <StackPanel Style="{StaticResource SettingsGroupSectionStyle}" Orientation="Horizontal">
+                    <Image x:Name="AppIconImage" Width="96" Margin="-6,0,12,0" Source="/Assets/appicon_ws.png" />
+                    <StackPanel>
+                        <TextBlock Style="{StaticResource TitleTextBlockStyle}"
+                                   Margin="0,4,0,4"
+                                   Text="{x:Bind AppName, Mode=OneTime}"
+                                   d:Text="Notepads"
+                                   FontWeight="Normal" />
+                        <TextBlock Style="{StaticResource SubtitleTextBlockStyle}"
+                                   Foreground="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
+                                   Text="{x:Bind AppVersion, Mode=OneTime}"
+                                   d:Text="v1.0.0.0" />
+                    </StackPanel>
+                </StackPanel>
+                <!-- Description & Related Links -->
+                <StackPanel Style="{StaticResource SettingsGroupSectionStyle}" Spacing="8">
+                    <TextBlock x:Uid="/Settings/AboutPage_NotepadsShortDescription"
+                               Style="{StaticResource BodyTextBlockStyle}"
+                               Margin="{StaticResource SettingsSubtitleLargeMargin}" />
+                    <StackPanel Spacing="-4">
+                        <TextBlock x:Uid="/Settings/AboutPage_Notepads_SourceCodeTitle" Style="{StaticResource BodyTextBlockStyle}" />
+                        <HyperlinkButton Content="https://github.com/0x7c13/Notepads" NavigateUri="https://github.com/0x7c13/Notepads" />
+                    </StackPanel>
+                    <StackPanel Spacing="-4">
+                        <TextBlock x:Uid="/Settings/AboutPage_Notepads_WebsiteTitle" Style="{StaticResource BodyTextBlockStyle}" />
+                        <HyperlinkButton Content="https://www.NotepadsApp.com" NavigateUri="https://www.notepadsapp.com" />
+                    </StackPanel>
+                    <StackPanel Spacing="-4">
+                        <TextBlock x:Uid="/Settings/AboutPage_Notepads_AuthorContactsTitle" Style="{StaticResource BodyTextBlockStyle}" />
+                        <HyperlinkButton Content="NotepadsApp@outlook.com" NavigateUri="mailto:notepadsapp@outlook.com" />
+                        <HyperlinkButton Content="Discord" NavigateUri="https://discord.gg/VqetCub" />
+                    </StackPanel>
+                    <StackPanel Spacing="-4">
+                        <TextBlock x:Uid="/Settings/AboutPage_Notepads_IssueAndFeatureRequestsTitle" Style="{StaticResource BodyTextBlockStyle}" />
+                        <HyperlinkButton Content="https://github.com/0x7c13/Notepads/issues" NavigateUri="https://github.com/0x7c13/Notepads/issues" />
+                    </StackPanel>
+                </StackPanel>
+                <!-- Changelog -->
+                <StackPanel Style="{StaticResource SettingsGroupSectionStyle}">
+                    <TextBlock x:Uid="/Settings/AboutPage_ChangelogUrl_Title"
+                               Style="{StaticResource SubtitleAltTextBlockStyle}"
+                               Margin="0,0,0,2"
+                               AutomationProperties.HeadingLevel="Level2" />
+                    <HyperlinkButton Content="Notepads Releases" NavigateUri="https://github.com/0x7c13/Notepads/releases" />
+                </StackPanel>
+                <!-- Dependencies & References -->
+                <StackPanel Style="{StaticResource SettingsGroupSectionStyle}">
+                    <TextBlock x:Uid="/Settings/AboutPage_DependenciesAndReferences_Title"
+                               Style="{StaticResource SubtitleAltTextBlockStyle}"
+                               Margin="0,0,0,2"
+                               AutomationProperties.HeadingLevel="Level2" />
+                    <StackPanel Spacing="-4">
+                        <HyperlinkButton Content="Windows UI Library" NavigateUri="https://github.com/Microsoft/microsoft-ui-xaml" />
+                        <HyperlinkButton Content="Windows Community Toolkit" NavigateUri="https://github.com/windows-toolkit/WindowsCommunityToolkit" />
+                        <HyperlinkButton Content="XAML Controls Gallery" NavigateUri="https://github.com/microsoft/Xaml-Controls-Gallery" />
+                        <HyperlinkButton Content="ColorCode Universal" NavigateUri="https://github.com/WilliamABradley/ColorCode-Universal" />
+                        <HyperlinkButton Content="UTF Unknown" NavigateUri="https://github.com/CharsetDetector/UTF-unknown" />
+                        <HyperlinkButton Content="DiffPlex" NavigateUri="https://github.com/mmanela/diffplex" />
+                        <HyperlinkButton Content="Win2D" NavigateUri="https://github.com/microsoft/Win2D" />
+                    </StackPanel>
+                </StackPanel>
+                <!-- Disclamer -->
+                <StackPanel Style="{StaticResource SettingsGroupSectionStyle}">
+                    <TextBlock x:Uid="/Settings/AboutPage_Disclaimer_Title"
+                               Style="{StaticResource SubtitleAltTextBlockStyle}"
+                               Margin="0,0,0,8"
+                               AutomationProperties.HeadingLevel="Level2" />
+                    <StackPanel>
+                        <TextBlock x:Uid="/Settings/AboutPage_Disclaimer_Content"
+                                   Style="{StaticResource BodyTextBlockStyle}"
+                                   Margin="0,0,0,16" />
+                        <TextBlock Margin="0,0,0,4" Text="Copyright (c) 2019-2024 Jackie (Jiaqi) Liu." />
+                        <HyperlinkButton x:Uid="/Settings/AboutPage_PrivacyStatementTitle" NavigateUri="https://github.com/0x7c13/Notepads/blob/master/PRIVACY.md" />
                     </StackPanel>
                 </StackPanel>
-                <RichTextBlock MaxWidth="600" Margin="0,15,0,0" IsTextSelectionEnabled="False">
-                    <Paragraph>
-                        <Run x:Uid="/Settings/AboutPage_NotepadsShortDescription"/>
-                    </Paragraph>
-                    <Paragraph Margin="0,15,0,0">
-                        <Run x:Uid="/Settings/AboutPage_Notepads_SourceCodeTitle"/>
-                    </Paragraph>
-                    <Paragraph>
-                        <Hyperlink NavigateUri="https://github.com/0x7c13/Notepads">
-                            https://github.com/0x7c13/Notepads
-                        </Hyperlink>
-                    </Paragraph>
-                    <Paragraph Margin="0,15,0,0">
-                        <Run x:Uid="/Settings/AboutPage_Notepads_WebsiteTitle"/>
-                    </Paragraph>
-                    <Paragraph>
-                        <Hyperlink NavigateUri="https://www.NotepadsApp.com">
-                            https://www.NotepadsApp.com
-                        </Hyperlink>
-                    </Paragraph>
-                    <Paragraph Margin="0,15,0,0">
-                        <Run x:Uid="/Settings/AboutPage_Notepads_AuthorContactsTitle"/>
-                        <Hyperlink NavigateUri="mailto:NotepadsApp@outlook.com">
-                            mailto:NotepadsApp@outlook.com
-                        </Hyperlink>
-                    </Paragraph>
-                    <Paragraph Margin="0,15,0,0">
-                        <Run x:Uid="/Settings/AboutPage_Notepads_IssueAndFeatureRequestsTitle"/>
-                    </Paragraph>
-                    <Paragraph>
-                        <Hyperlink NavigateUri="https://github.com/0x7c13/Notepads/issues">
-                            https://github.com/0x7c13/Notepads/issues
-                        </Hyperlink>
-                    </Paragraph>
-                </RichTextBlock>
-                <Button  Content="Feedback" Margin="0,8,0,0" Visibility="Collapsed" />
-
-                <TextBlock
-                    x:Uid="/Settings/AboutPage_ChangelogUrl_Title"
-                    Style="{StaticResource CompactSubtitleTextBlockStyle}"
-                    Margin="0,20,0,0"
-                    FontWeight="Normal"/>
-                <RichTextBlock IsTextSelectionEnabled="False" MaxWidth="600" Margin="0,10,0,0" >
-                    <Paragraph Margin="0,10,0,10">
-                        <Hyperlink NavigateUri="https://github.com/0x7c13/Notepads/releases">Notepads Releases</Hyperlink>
-                    </Paragraph>
-                </RichTextBlock>
-
-                <TextBlock
-                    x:Uid="/Settings/AboutPage_DependenciesAndReferences_Title"
-                    Style="{StaticResource CompactSubtitleTextBlockStyle}"
-                    Margin="0,20,0,0"
-                    FontWeight="Normal"/>
-                <RichTextBlock IsTextSelectionEnabled="False" MaxWidth="600" Margin="0,10,0,0" >
-                    <Paragraph Margin="0,10,0,10">
-                        <Hyperlink NavigateUri="https://github.com/Microsoft/microsoft-ui-xaml">Windows UI Library</Hyperlink>
-                    </Paragraph>
-                    <Paragraph Margin="0,10,0,10">
-                        <Hyperlink NavigateUri="https://github.com/windows-toolkit/WindowsCommunityToolkit">Windows Community Toolkit</Hyperlink>
-                    </Paragraph>
-                    <Paragraph Margin="0,10,0,10">
-                        <Hyperlink NavigateUri="https://github.com/microsoft/Xaml-Controls-Gallery">XAML Controls Gallery</Hyperlink>
-                    </Paragraph>
-                    <Paragraph Margin="0,10,0,10">
-                        <Hyperlink NavigateUri="https://github.com/WilliamABradley/ColorCode-Universal">ColorCode Universal</Hyperlink>
-                    </Paragraph>
-                    <Paragraph Margin="0,10,0,10">
-                        <Hyperlink NavigateUri="https://github.com/CharsetDetector/UTF-unknown">UTF Unknown</Hyperlink>
-                    </Paragraph>
-                    <Paragraph Margin="0,10,0,10">
-                        <Hyperlink NavigateUri="https://github.com/mmanela/diffplex">DiffPlex</Hyperlink>
-                    </Paragraph>
-                    <Paragraph Margin="0,10,0,10">
-                        <Hyperlink NavigateUri="https://github.com/microsoft/Win2D">Win2D</Hyperlink>
-                    </Paragraph>
-                </RichTextBlock>
-
-                <TextBlock
-                    x:Uid="/Settings/AboutPage_Disclaimer_Title"
-                    Style="{StaticResource CompactSubtitleTextBlockStyle}"
-                    Margin="0,20,0,0"
-                    FontWeight="Normal"/>
-                <RichTextBlock MaxWidth="600" Margin="0,10,0,0" IsTextSelectionEnabled="False">
-                    <Paragraph>
-                        <Run x:Uid="/Settings/AboutPage_Disclaimer_Content"/>
-                    </Paragraph>
-                    <Paragraph>
-                        <LineBreak /> Copyright (c) 2019-2024 Jackie (Jiaqi) Liu.
-                    </Paragraph>
-                    <Paragraph Margin="0,10,0,10">
-                        <Hyperlink NavigateUri="https://github.com/0x7c13/Notepads/blob/master/PRIVACY.md" >
-                            <Run x:Uid="/Settings/AboutPage_PrivacyStatementTitle"/>
-                        </Hyperlink>
-                    </Paragraph>
-                </RichTextBlock>
             </StackPanel>
         </ScrollViewer>
 
diff --git a/src/Notepads/Views/Settings/AdvancedSettingsPage.xaml b/src/Notepads/Views/Settings/AdvancedSettingsPage.xaml
index 12df8faa2..898939dca 100644
--- a/src/Notepads/Views/Settings/AdvancedSettingsPage.xaml
+++ b/src/Notepads/Views/Settings/AdvancedSettingsPage.xaml
@@ -1,96 +1,92 @@
-<Page
-    x:Class="Notepads.Views.Settings.AdvancedSettingsPage"
-    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:utilities="using:Notepads.Utilities"
-    mc:Ignorable="d"
-    Background="{ThemeResource SystemControlForegroundTransparentBrush}">
+<Page x:Class="Notepads.Views.Settings.AdvancedSettingsPage"
+      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      xmlns:utilities="using:Notepads.Utilities"
+      d:DesignWidth="333.333"
+      d:DesignHeight="768"
+      HighContrastAdjustment="None"
+      mc:Ignorable="d">
 
     <Grid>
         <Grid.ChildrenTransitions>
             <TransitionCollection>
-                <EntranceThemeTransition FromHorizontalOffset="25" FromVerticalOffset="0"/>
+                <EntranceThemeTransition FromHorizontalOffset="{StaticResource SettingsEntranceHorizontalOffset}" FromVerticalOffset="0" />
             </TransitionCollection>
         </Grid.ChildrenTransitions>
         <Grid.BackgroundTransition>
             <BrushTransition />
         </Grid.BackgroundTransition>
 
-        <ScrollViewer
-            Grid.Row="0"
-            Padding="20,0,20,0"
-            IsTabStop="False"
-            UseSystemFocusVisuals="False"
-            VerticalScrollBarVisibility="Auto"
-            VerticalScrollMode="Auto">
-            <StackPanel HorizontalAlignment="Left" Margin="0,0,0,40">
-                <TextBlock
-                    x:Uid="/Settings/AdvancedPage_StatusBarSettings_Title"
-                    Style="{StaticResource CompactSubtitleTextBlockStyle}"
-                    Margin="0,15,0,0"
-                    FontWeight="Normal"/>
-                <StackPanel Margin="0,10,0,0">
-                    <ToggleSwitch x:Uid="/Settings/AdvancedPage_StatusBarSettings_ShowHideStatusBarToggleSwitch"
-                                  Style="{StaticResource CustomToggleSwitchStyle}" 
-                                  x:Name="ShowStatusBarToggleSwitch" />
+        <ScrollViewer Grid.Row="0"
+                      VerticalScrollMode="Auto"
+                      VerticalScrollBarVisibility="Auto"
+                      IsTabStop="False"
+                      UseSystemFocusVisuals="False">
+            <StackPanel Padding="{StaticResource SettingsContentPadding}" HorizontalAlignment="Left">
+                <!-- Status Bar -->
+                <StackPanel Style="{StaticResource SettingsGroupSectionStyle}">
+                    <TextBlock x:Uid="/Settings/AdvancedPage_StatusBarSettings_Title"
+                               Style="{StaticResource SubtitleAltTextBlockStyle}"
+                               Margin="{StaticResource SettingsSubtitleMargin}"
+                               AutomationProperties.HeadingLevel="Level2" />
+                    <StackPanel>
+                        <ToggleSwitch x:Name="ShowStatusBarToggleSwitch" x:Uid="/Settings/AdvancedPage_StatusBarSettings_ShowHideStatusBarToggleSwitch" />
+                    </StackPanel>
                 </StackPanel>
-                <TextBlock
-                    x:Uid="/Settings/AdvancedPage_SmartCopySettings_Title"
-                    Style="{StaticResource CompactSubtitleTextBlockStyle}"
-                    Margin="0,15,0,0"
-                    FontWeight="Normal"/>
-                <StackPanel Margin="0,10,0,0">
-                    <ToggleSwitch x:Uid="/Settings/AdvancedPage_SmartCopySettings_EnableSmartCopyToggleSwitch"
-                                  Style="{StaticResource CustomToggleSwitchStyle}" 
-                                  x:Name="EnableSmartCopyToggleSwitch" />
-                    <TextBlock x:Uid="/Settings/AdvancedPage_SmartCopySettings_Description" Style="{ThemeResource DescriptionTextBlockStyle}" Margin="0,8,0,0"/>
+                <!-- Smart Copy -->
+                <StackPanel Style="{StaticResource SettingsGroupSectionStyle}">
+                    <TextBlock x:Uid="/Settings/AdvancedPage_SmartCopySettings_Title"
+                               Style="{StaticResource SubtitleAltTextBlockStyle}"
+                               Margin="{StaticResource SettingsSubtitleMargin}"
+                               AutomationProperties.HeadingLevel="Level2" />
+                    <StackPanel>
+                        <ToggleSwitch x:Name="EnableSmartCopyToggleSwitch" x:Uid="/Settings/AdvancedPage_SmartCopySettings_EnableSmartCopyToggleSwitch" />
+                        <TextBlock x:Uid="/Settings/AdvancedPage_SmartCopySettings_Description" Style="{StaticResource DescriptionTextBlockStyle}" />
+                    </StackPanel>
                 </StackPanel>
-                <TextBlock
-                    x:Name="SessionSnapshotSettingsTitle"
-                    x:Uid="/Settings/AdvancedPage_SessionSnapshotSettings_Title"
-                    Style="{StaticResource CompactSubtitleTextBlockStyle}"
-                    Margin="0,20,0,0"
-                    FontWeight="Normal"/>
-                <StackPanel x:Name="SessionSnapshotSettingsControls" Margin="0,10,0,0">
-                    <ToggleSwitch x:Uid="/Settings/AdvancedPage_SessionSnapshotSettings_OnOffToggleSwitch"
-                                  Style="{StaticResource CustomToggleSwitchStyle}" 
-                                  x:Name="EnableSessionSnapshotToggleSwitch" />
-                    <TextBlock x:Uid="/Settings/AdvancedPage_SessionSnapshotSettings_Description" Style="{ThemeResource DescriptionTextBlockStyle}" Margin="0,8,0,0"/>
+                <!-- Session Snapshot -->
+                <StackPanel x:Name="SessionSnapshotSettingsPanel" Style="{StaticResource SettingsGroupSectionStyle}">
+                    <TextBlock x:Name="SessionSnapshotSettingsTitle"
+                               x:Uid="/Settings/AdvancedPage_SessionSnapshotSettings_Title"
+                               Style="{StaticResource SubtitleAltTextBlockStyle}"
+                               Margin="{StaticResource SettingsSubtitleMargin}"
+                               AutomationProperties.HeadingLevel="Level2" />
+                    <StackPanel>
+                        <ToggleSwitch x:Name="EnableSessionSnapshotToggleSwitch" x:Uid="/Settings/AdvancedPage_SessionSnapshotSettings_OnOffToggleSwitch" />
+                        <TextBlock x:Uid="/Settings/AdvancedPage_SessionSnapshotSettings_Description" Style="{StaticResource DescriptionTextBlockStyle}" />
+                    </StackPanel>
                 </StackPanel>
-                <TextBlock
-                    x:Name="LaunchPreferenceSettingsTitle"
-                    x:Uid="/Settings/AdvancedPage_LaunchPreferenceSettings_Title"
-                    Style="{StaticResource CompactSubtitleTextBlockStyle}"
-                    Margin="0,25,0,0"
-                    FontWeight="Normal"/>
-                <StackPanel x:Name="LaunchPreferenceSettingsControls" Margin="0,10,0,0">
-                    <ToggleSwitch x:Uid="/Settings/AdvancedPage_LaunchPreferenceSettings_AlwaysOpenNewWindowToggleSwitch"
-                                  Style="{StaticResource CustomToggleSwitchStyle}" 
-                                  x:Name="AlwaysOpenNewWindowToggleSwitch" 
-                                  Margin="0,10,0,0" />
-                    <TextBlock x:Uid="/Settings/AdvancedPage_AlwaysOpenNewWindow_Description" Style="{ThemeResource DescriptionTextBlockStyle}" Margin="0,8,0,8"/>
-                    <ToggleSwitch x:Uid="/Settings/AdvancedPage_LaunchPreferenceSettings_ExitWhenLastTabClosedToggleSwitch"
-                                  Style="{StaticResource CustomToggleSwitchStyle}" 
-                                  x:Name="ExitWhenLastTabClosedToggleSwitch" />
+                <!-- Launch -->
+                <StackPanel x:Name="LaunchPreferenceSettingsPanel" Style="{StaticResource SettingsGroupSectionStyle}">
+                    <TextBlock x:Name="LaunchPreferenceSettingsTitle"
+                               x:Uid="/Settings/AdvancedPage_LaunchPreferenceSettings_Title"
+                               Style="{StaticResource SubtitleAltTextBlockStyle}"
+                               Margin="{StaticResource SettingsSubtitleMargin}"
+                               AutomationProperties.HeadingLevel="Level2" />
+                    <StackPanel>
+                        <ToggleSwitch x:Name="AlwaysOpenNewWindowToggleSwitch" x:Uid="/Settings/AdvancedPage_LaunchPreferenceSettings_AlwaysOpenNewWindowToggleSwitch" />
+                        <TextBlock x:Uid="/Settings/AdvancedPage_AlwaysOpenNewWindow_Description" Style="{StaticResource DescriptionTextBlockStyle}" />
+                        <ToggleSwitch x:Name="ExitWhenLastTabClosedToggleSwitch"
+                                      x:Uid="/Settings/AdvancedPage_LaunchPreferenceSettings_ExitWhenLastTabClosedToggleSwitch"
+                                      Margin="0,10,0,0" />
+                    </StackPanel>
                 </StackPanel>
-                <StackPanel x:Name="LanguagePreferenceSettingsPanel">
-                    <TextBlock
-                    x:Name="LanguagePreferenceSettingsTitle"
-                    x:Uid="/Settings/AdvancedPage_LanguagePreferenceSettings_Title"
-                    Style="{StaticResource CompactSubtitleTextBlockStyle}"
-                    Margin="0,25,0,0"
-                    FontWeight="Normal"/>
-                    <StackPanel x:Name="LanguagePreferenceSettingsControls" Margin="0,10,0,0">
+                <!-- Language -->
+                <StackPanel Style="{StaticResource SettingsGroupSectionStyle}">
+                    <TextBlock x:Name="LanguagePreferenceSettingsTitle"
+                               x:Uid="/Settings/AdvancedPage_LanguagePreferenceSettings_Title"
+                               Style="{StaticResource SubtitleAltTextBlockStyle}"
+                               Margin="{StaticResource SettingsSubtitleLargeMargin}"
+                               AutomationProperties.HeadingLevel="Level2" />
+                    <StackPanel>
                         <ComboBox x:Name="LanguagePicker"
-                              ItemsSource="{x:Bind SupportedLanguages, Mode=OneTime}"
-                              HorizontalAlignment="Stretch"
-                              VerticalAlignment="Center"
-                              BorderThickness="1"
-                              Height="36"
-                              Background="Transparent"
-                              IsTextSearchEnabled="True">
+                                  HorizontalAlignment="Stretch"
+                                  VerticalAlignment="Center"
+                                  IsTextSearchEnabled="True"
+                                  ItemsSource="{x:Bind SupportedLanguages, Mode=OneTime}"
+                                  d:PlaceholderText="System Default">
                             <ComboBox.ItemTemplate>
                                 <DataTemplate x:DataType="utilities:LanguageItem">
                                     <TextBlock Text="{x:Bind Name}" />
@@ -99,15 +95,15 @@
                         </ComboBox>
                         <TextBlock x:Name="RestartPrompt"
                                    x:Uid="/Settings/AdvancedPage_LanguagePreferenceSettings_RestartPrompt"
-                                   Style="{ThemeResource DescriptionTextBlockStyle}"
-                                   Foreground="{ThemeResource SystemControlErrorTextForegroundBrush}"
-                                   TextWrapping="Wrap"
+                                   Style="{StaticResource CaptionTextBlockStyle}"
+                                   Foreground="{ThemeResource DangerTextForegroundBrush}"
+                                   Margin="0,6,0,0"
                                    Visibility="Collapsed"
-                                   Margin="0,4,0,0"/>
-                        <TextBlock x:Uid="/Settings/AdvancedPage_LanguagePreferenceSettings_Description"
-                                   Style="{ThemeResource DescriptionTextBlockStyle}"
-                                   Margin="0,8,0,0"/>
+                                   d:Visibility="Visible" />
                     </StackPanel>
+                    <TextBlock x:Uid="/Settings/AdvancedPage_LanguagePreferenceSettings_Description"
+                               Style="{StaticResource DescriptionTextBlockStyle}"
+                               Margin="0,6,0,0" />
                 </StackPanel>
             </StackPanel>
         </ScrollViewer>
diff --git a/src/Notepads/Views/Settings/AdvancedSettingsPage.xaml.cs b/src/Notepads/Views/Settings/AdvancedSettingsPage.xaml.cs
index 7cc59cfe3..7a38f34d2 100644
--- a/src/Notepads/Views/Settings/AdvancedSettingsPage.xaml.cs
+++ b/src/Notepads/Views/Settings/AdvancedSettingsPage.xaml.cs
@@ -41,10 +41,8 @@ public AdvancedSettingsPage()
             if (App.IsGameBarWidget)
             {
                 // these settings don't make sense for Game Bar, there can be only one
-                SessionSnapshotSettingsTitle.Visibility = Visibility.Collapsed;
-                SessionSnapshotSettingsControls.Visibility = Visibility.Collapsed;
-                LaunchPreferenceSettingsTitle.Visibility = Visibility.Collapsed;
-                LaunchPreferenceSettingsControls.Visibility = Visibility.Collapsed;
+                SessionSnapshotSettingsPanel.Visibility = Visibility.Collapsed;
+                LaunchPreferenceSettingsPanel.Visibility = Visibility.Collapsed;
             }
 
             LanguagePicker.SelectedItem = SupportedLanguages.FirstOrDefault(language => language.ID == ApplicationLanguages.PrimaryLanguageOverride);
diff --git a/src/Notepads/Views/Settings/PersonalizationSettingsPage.xaml b/src/Notepads/Views/Settings/PersonalizationSettingsPage.xaml
index 1d82d4ceb..1fc1b0f93 100644
--- a/src/Notepads/Views/Settings/PersonalizationSettingsPage.xaml
+++ b/src/Notepads/Views/Settings/PersonalizationSettingsPage.xaml
@@ -1,86 +1,105 @@
-<Page
-    x:Class="Notepads.Views.Settings.PersonalizationSettingsPage"
-    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    mc:Ignorable="d"
-    Background="{ThemeResource SystemControlForegroundTransparentBrush}">
+<Page x:Class="Notepads.Views.Settings.PersonalizationSettingsPage"
+      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      d:DesignWidth="333.333"
+      d:DesignHeight="900"
+      HighContrastAdjustment="None"
+      mc:Ignorable="d">
 
     <Grid>
         <Grid.ChildrenTransitions>
             <TransitionCollection>
-                <EntranceThemeTransition FromHorizontalOffset="25" FromVerticalOffset="0"/>
+                <EntranceThemeTransition FromHorizontalOffset="{StaticResource SettingsEntranceHorizontalOffset}" FromVerticalOffset="0" />
             </TransitionCollection>
         </Grid.ChildrenTransitions>
         <Grid.BackgroundTransition>
             <BrushTransition />
         </Grid.BackgroundTransition>
 
-        <ScrollViewer
-            Grid.Row="0"
-            Padding="20,0,20,0"
-            IsTabStop="False"
-            UseSystemFocusVisuals="False"
-            VerticalScrollBarVisibility="Auto"
-            VerticalScrollMode="Auto">
-            <StackPanel HorizontalAlignment="Left" Margin="0,0,0,40">
-                <TextBlock
-                    x:Uid="/Settings/PersonalizationPage_ThemeModeSettings_Title"
-                    Style="{StaticResource CompactSubtitleTextBlockStyle}"
-                    Margin="0,15,0,0"
-                    FontWeight="Normal"/>
-                <StackPanel x:Name="ThemePanel" Margin="0,10,0,0">
-                    <RadioButton x:Uid="/Settings/PersonalizationPage_ThemeModeSettings_LightModeRadioButton" Style="{StaticResource CustomRadioButtonStyle}" x:Name="ThemeModeLightButton" Tag="Light" />
-                    <RadioButton x:Uid="/Settings/PersonalizationPage_ThemeModeSettings_DarkModeRadioButton" Style="{StaticResource CustomRadioButtonStyle}" x:Name="ThemeModeDarkButton" Tag="Dark" />
-                    <RadioButton x:Uid="/Settings/PersonalizationPage_ThemeModeSettings_WindowsModeRadioButton" Style="{StaticResource CustomRadioButtonStyle}" x:Name="ThemeModeDefaultButton" Tag="Default" />
+        <ScrollViewer Grid.Row="0"
+                      VerticalScrollMode="Auto"
+                      VerticalScrollBarVisibility="Auto"
+                      IsTabStop="False"
+                      UseSystemFocusVisuals="False">
+            <StackPanel Padding="{StaticResource SettingsContentPadding}" HorizontalAlignment="Left">
+                <!-- Theme -->
+                <StackPanel Style="{StaticResource SettingsGroupSectionStyle}">
+                    <TextBlock x:Uid="/Settings/PersonalizationPage_ThemeModeSettings_Title"
+                               Style="{StaticResource SubtitleAltTextBlockStyle}"
+                               Margin="{StaticResource SettingsSubtitleMargin}"
+                               AutomationProperties.HeadingLevel="Level2" />
+                    <StackPanel x:Name="ThemePanel">
+                        <RadioButton x:Name="ThemeModeLightButton"
+                                     x:Uid="/Settings/PersonalizationPage_ThemeModeSettings_LightModeRadioButton"
+                                     Tag="Light" />
+                        <RadioButton x:Name="ThemeModeDarkButton"
+                                     x:Uid="/Settings/PersonalizationPage_ThemeModeSettings_DarkModeRadioButton"
+                                     Tag="Dark" />
+                        <RadioButton x:Name="ThemeModeDefaultButton"
+                                     x:Uid="/Settings/PersonalizationPage_ThemeModeSettings_WindowsModeRadioButton"
+                                     Tag="Default" />
+                    </StackPanel>
                 </StackPanel>
-                <TextBlock x:Name="BackgroundTintOpacityTitle"
-                    x:Uid="/Settings/PersonalizationPage_BackgroundTintOpacitySettings_Title"
-                    Style="{StaticResource CompactSubtitleTextBlockStyle}"
-                    Margin="0,20,0,0"
-                    FontWeight="Normal"/>
-                <StackPanel x:Name="BackgroundTintOpacityControls" Margin="0,10,0,0">
+                <!-- Background Opacity -->
+                <StackPanel x:Name="BackgroundTintOpacitySettingsPanel" Style="{StaticResource SettingsGroupSectionStyle}">
+                    <TextBlock x:Name="BackgroundTintOpacityTitle"
+                               x:Uid="/Settings/PersonalizationPage_BackgroundTintOpacitySettings_Title"
+                               Style="{StaticResource SubtitleAltTextBlockStyle}"
+                               Margin="{StaticResource SettingsSubtitleMargin}"
+                               AutomationProperties.HeadingLevel="Level2" />
                     <StackPanel Orientation="Horizontal">
-                        <Slider Style="{StaticResource CustomSliderStyle}" 
-                                x:Name="BackgroundTintOpacitySlider"
-                                Minimum="0" Maximum="100" 
-                                StepFrequency="1"
-                                Margin="0,0,10,0" 
-                                Width="200"/>
-                        <TextBlock Text="{x:Bind BackgroundTintOpacitySlider.Value, Mode=OneWay}"
-                                   Height="{x:Bind BackgroundTintOpacitySlider.Height, Mode=OneWay}"
-                                   VerticalAlignment="Center" 
-                                   FontSize="18"/>
-                        <TextBlock Text="%"
-                                   Height="{x:Bind BackgroundTintOpacitySlider.Height, Mode=OneWay}"
-                                   VerticalAlignment="Center" 
-                                   FontSize="18"/>
+                        <FontIcon Margin="0,0,8,0"
+                                  VerticalAlignment="Center"
+                                  Glyph="&#xE727;"
+                                  FontSize="20"
+                                  IsHitTestVisible="False"
+                                  AutomationProperties.AccessibilityView="Raw" />
+                        <Slider x:Name="BackgroundTintOpacitySlider"
+                                Width="200"
+                                Height="{StaticResource SliderHorizontalHeight}"
+                                Maximum="100"
+                                Minimum="0"
+                                StepFrequency="1" />
+                        <TextBlock Style="{StaticResource SubtitleTextBlockStyle}"
+                                   Margin="12,0,0,2"
+                                   VerticalAlignment="Center"
+                                   Text="{x:Bind BackgroundTintOpacitySlider.Value, Mode=OneWay}"
+                                   d:Text="100" />
+                        <TextBlock Style="{StaticResource SubtitleTextBlockStyle}"
+                                   Margin="2,0,0,2"
+                                   VerticalAlignment="Center"
+                                   Text="%" />
                     </StackPanel>
-                    <TextBlock x:Uid="/Settings/PersonalizationPage_BackgroundTintOpacitySettings_Description" Style="{ThemeResource DescriptionTextBlockStyle}" Margin="0,8,0,0"/>
+                    <TextBlock x:Uid="/Settings/PersonalizationPage_BackgroundTintOpacitySettings_Description" Style="{StaticResource DescriptionTextBlockStyle}" />
                 </StackPanel>
-                <TextBlock
-                    x:Uid="/Settings/PersonalizationPage_AccentColorSettings_Title"
-                    Style="{StaticResource CompactSubtitleTextBlockStyle}"
-                    Margin="0,20,0,0"
-                    FontWeight="Normal"/>
-                <StackPanel Margin="0,10,0,0">
-                    <ToggleSwitch x:Uid="/Settings/PersonalizationPage_AccentColorSettings_UseWindowsAccentColorToggleSwitch" Style="{StaticResource CustomToggleSwitchStyle}" x:Name="AccentColorToggle" Margin="0,0,0,8"/>
-                    <Viewbox MaxWidth="300" Stretch="Fill">
-                        <ColorPicker
-                            x:Name="AccentColorPicker"
-                            ColorSpectrumShape="Ring"
-                            IsColorSliderVisible="True"
-                            IsColorChannelTextInputVisible="True"
-                            IsHexInputVisible="True"
-                            IsAlphaEnabled="False"
-                            IsAlphaSliderVisible="True"
-                            IsAlphaTextInputVisible="True">
-                        </ColorPicker>
-                    </Viewbox>
+                <!-- Accent Color -->
+                <StackPanel Style="{StaticResource SettingsGroupSectionStyle}">
+                    <TextBlock x:Uid="/Settings/PersonalizationPage_AccentColorSettings_Title"
+                               Style="{StaticResource SubtitleAltTextBlockStyle}"
+                               Margin="{StaticResource SettingsSubtitleMargin}"
+                               AutomationProperties.HeadingLevel="Level2" />
+                    <StackPanel>
+                        <ToggleSwitch x:Name="AccentColorToggle"
+                                      x:Uid="/Settings/PersonalizationPage_AccentColorSettings_UseWindowsAccentColorToggleSwitch"
+                                      Margin="{StaticResource SettingsSubtitleLargeMargin}" />
+                        <Viewbox MaxWidth="292" Stretch="Fill">
+                            <ColorPicker x:Name="AccentColorPicker"
+                                         ColorSpectrumShape="Ring"
+                                         IsColorSliderVisible="True"
+                                         IsColorChannelTextInputVisible="True"
+                                         IsAlphaEnabled="False"
+                                         IsHexInputVisible="True">
+                                <ColorPicker.Resources>
+                                    <StaticResource x:Key="TextControlBackground" ResourceKey="SystemControlTransparentBrush" />
+                                </ColorPicker.Resources>
+                            </ColorPicker>
+                        </Viewbox>
+                    </StackPanel>
                 </StackPanel>
-
             </StackPanel>
         </ScrollViewer>
+
     </Grid>
 </Page>
diff --git a/src/Notepads/Views/Settings/PersonalizationSettingsPage.xaml.cs b/src/Notepads/Views/Settings/PersonalizationSettingsPage.xaml.cs
index 847385a1c..9e8d68358 100644
--- a/src/Notepads/Views/Settings/PersonalizationSettingsPage.xaml.cs
+++ b/src/Notepads/Views/Settings/PersonalizationSettingsPage.xaml.cs
@@ -48,8 +48,7 @@ public PersonalizationSettingsPage()
             if (App.IsGameBarWidget)
             {
                 // Game Bar widgets do not support transparency, disable this setting
-                BackgroundTintOpacityTitle.Visibility = Visibility.Collapsed;
-                BackgroundTintOpacityControls.Visibility = Visibility.Collapsed;
+                BackgroundTintOpacitySettingsPanel.Visibility = Visibility.Collapsed;
             }
             else
             {
diff --git a/src/Notepads/Views/Settings/SettingsPage.xaml b/src/Notepads/Views/Settings/SettingsPage.xaml
index 754c9dc2c..b871109dd 100644
--- a/src/Notepads/Views/Settings/SettingsPage.xaml
+++ b/src/Notepads/Views/Settings/SettingsPage.xaml
@@ -1,58 +1,51 @@
-<Page
-    x:Class="Notepads.Views.Settings.SettingsPage"
-    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:settings="using:Notepads.Views.Settings"
-    mc:Ignorable="d"
-    Background="{ThemeResource SystemControlForegroundTransparentBrush}">
+<Page x:Class="Notepads.Views.Settings.SettingsPage"
+      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      xmlns:settings="using:Notepads.Views.Settings"
+      mc:Ignorable="d">
 
     <NavigationView x:Name="SettingsNavigationView"
+                    IsBackButtonVisible="Collapsed"
+                    IsBackEnabled="False"
                     IsPaneOpen="False"
                     IsSettingsVisible="False"
-                    IsBackEnabled="False"
-                    IsBackButtonVisible="Collapsed"
-                    PaneDisplayMode="LeftCompact"
+                    ItemInvoked="SettingsPanel_OnItemInvoked"
                     OpenPaneLength="200"
-                    ItemInvoked="SettingsPanel_OnItemInvoked">
-
+                    PaneDisplayMode="LeftCompact">
         <NavigationView.MenuItems>
-            <NavigationViewItem Style="{StaticResource CustomNavigationViewItemStyle}" 
-                                x:Uid="/Settings/TextAndEditorPage_Title"
-                                Tag="TextAndEditor"
-                                IsSelected="True">
+            <NavigationViewItem x:Uid="/Settings/TextAndEditorPage_Title"
+                                Style="{StaticResource CustomNavigationViewItemStyle}"
+                                IsSelected="True"
+                                Tag="TextAndEditor">
                 <NavigationViewItem.Icon>
-                    <FontIcon FontFamily="Segoe MDL2 Assets"
-                              Glyph="&#xF17F;" />
+                    <FontIcon Glyph="&#xF17F;" />
                 </NavigationViewItem.Icon>
             </NavigationViewItem>
-            <NavigationViewItem Style="{StaticResource CustomNavigationViewItemStyle}" 
-                                x:Uid="/Settings/PersonalizationPage_Title"
-                                Tag="Personalization" >
+            <NavigationViewItem x:Uid="/Settings/PersonalizationPage_Title"
+                                Style="{StaticResource CustomNavigationViewItemStyle}"
+                                Tag="Personalization">
                 <NavigationViewItem.Icon>
-                    <FontIcon FontFamily="Segoe MDL2 Assets"
-                              Glyph="&#xE771;" />
+                    <FontIcon Glyph="&#xE771;" />
                 </NavigationViewItem.Icon>
             </NavigationViewItem>
-            <NavigationViewItem Style="{StaticResource CustomNavigationViewItemStyle}" 
-                                x:Uid="/Settings/AdvancedPage_Title"
-                                Tag="Advanced" >
+            <NavigationViewItem x:Uid="/Settings/AdvancedPage_Title"
+                                Style="{StaticResource CustomNavigationViewItemStyle}"
+                                Tag="Advanced">
                 <NavigationViewItem.Icon>
-                    <FontIcon FontFamily="Segoe MDL2 Assets"
-                              Glyph="&#xE9E9;" />
+                    <FontIcon Glyph="&#xE9E9;" />
                 </NavigationViewItem.Icon>
             </NavigationViewItem>
-            <NavigationViewItem Style="{StaticResource CustomNavigationViewItemStyle}" 
-                                x:Uid="/Settings/AboutPage_Title"
-                                Tag="About" >
+            <NavigationViewItem x:Uid="/Settings/AboutPage_Title"
+                                Style="{StaticResource CustomNavigationViewItemStyle}"
+                                Tag="About">
                 <NavigationViewItem.Icon>
-                    <FontIcon FontFamily="Segoe MDL2 Assets"
-                              Glyph="&#xE946;" />
+                    <FontIcon Glyph="&#xE946;" />
                 </NavigationViewItem.Icon>
             </NavigationViewItem>
         </NavigationView.MenuItems>
-        <settings:SettingsPanel x:Name="SettingsPanel"/>
+        <settings:SettingsPanel x:Name="SettingsPanel" />
     </NavigationView>
 
 </Page>
diff --git a/src/Notepads/Views/Settings/SettingsPanel.xaml b/src/Notepads/Views/Settings/SettingsPanel.xaml
index 97cc6f703..c555b454d 100644
--- a/src/Notepads/Views/Settings/SettingsPanel.xaml
+++ b/src/Notepads/Views/Settings/SettingsPanel.xaml
@@ -1,26 +1,23 @@
-<Page
-    x:Class="Notepads.Views.Settings.SettingsPanel"
-    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    mc:Ignorable="d"
-    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+<Page x:Class="Notepads.Views.Settings.SettingsPanel"
+      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      d:DesignWidth="333.333"
+      HighContrastAdjustment="None"
+      mc:Ignorable="d">
 
     <Page.Resources>
         <ResourceDictionary>
             <ResourceDictionary.ThemeDictionaries>
-                <ResourceDictionary x:Key="Light">
-                    <SolidColorBrush x:Key="SettingsPanelBackgroundBrush"
-                                     Color="WhiteSmoke"/>
-                </ResourceDictionary>
                 <ResourceDictionary x:Key="Dark">
-                    <SolidColorBrush x:Key="SettingsPanelBackgroundBrush"
-                                     Color="#222222"/>
+                    <SolidColorBrush x:Key="SettingsPanelBackgroundBrush" Color="{ThemeResource SystemAltMediumLowColor}" />
+                </ResourceDictionary>
+                <ResourceDictionary x:Key="Light">
+                    <SolidColorBrush x:Key="SettingsPanelBackgroundBrush" Color="{ThemeResource SystemAltMediumHighColor}" />
                 </ResourceDictionary>
                 <ResourceDictionary x:Key="HighContrast">
-                    <SolidColorBrush x:Key="SettingsPanelBackgroundBrush"
-                                     Color="{StaticResource SystemColorHighlightColor}"/>
+                    <SolidColorBrush x:Key="SettingsPanelBackgroundBrush" Color="{ThemeResource SystemColorWindowColor}" />
                 </ResourceDictionary>
             </ResourceDictionary.ThemeDictionaries>
         </ResourceDictionary>
@@ -28,21 +25,24 @@
 
     <Grid Background="{ThemeResource SettingsPanelBackgroundBrush}">
         <Grid.RowDefinitions>
-            <RowDefinition Height="60"/>
-            <RowDefinition Height="*"/>
+            <RowDefinition Height="48" />
+            <RowDefinition Height="*" />
         </Grid.RowDefinitions>
 
-        <Grid Row="0" 
-              Margin="18,0,18,0"
+        <Grid Grid.Row="0"
+              BorderBrush="{ThemeResource SystemControlForegroundBaseLowBrush}"
               BorderThickness="0,0,0,1"
-              BorderBrush="{ThemeResource SystemControlForegroundBaseMediumLowBrush}">
+              Margin="{StaticResource SettingsTitleMargin}">
             <TextBlock x:Name="TitleTextBlock"
-                       Padding="0,0,0,10"
-                       FontSize="24"
-                       VerticalAlignment="Bottom"/>
+                       Style="{StaticResource TitleTextBlockStyle}"
+                       Padding="0,8,0,0"
+                       d:Text="Title"
+                       AutomationProperties.HeadingLevel="Level1" />
         </Grid>
-        <Grid Row="1">
-            <Frame x:Name="ContentFrame"/>
+
+        <Grid Grid.Row="1">
+            <Frame x:Name="ContentFrame" />
         </Grid>
+
     </Grid>
 </Page>
diff --git a/src/Notepads/Views/Settings/TextAndEditorSettingsPage.xaml b/src/Notepads/Views/Settings/TextAndEditorSettingsPage.xaml
index 810ed7f07..43e8f52ec 100644
--- a/src/Notepads/Views/Settings/TextAndEditorSettingsPage.xaml
+++ b/src/Notepads/Views/Settings/TextAndEditorSettingsPage.xaml
@@ -1,226 +1,280 @@
-<Page
-    x:Class="Notepads.Views.Settings.TextAndEditorSettingsPage"
-    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:settings="using:Notepads.Services"
-    mc:Ignorable="d"
-    Background="{ThemeResource SystemControlForegroundTransparentBrush}">
+<Page x:Class="Notepads.Views.Settings.TextAndEditorSettingsPage"
+      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      xmlns:settings="using:Notepads.Services"
+      d:DesignWidth="333.333"
+      d:DesignHeight="1700"
+      HighContrastAdjustment="None"
+      mc:Ignorable="d">
 
     <Grid>
         <Grid.ChildrenTransitions>
             <TransitionCollection>
-                <EntranceThemeTransition FromHorizontalOffset="25" FromVerticalOffset="0"/>
+                <EntranceThemeTransition FromHorizontalOffset="{StaticResource SettingsEntranceHorizontalOffset}" FromVerticalOffset="0" />
             </TransitionCollection>
         </Grid.ChildrenTransitions>
         <Grid.BackgroundTransition>
             <BrushTransition />
         </Grid.BackgroundTransition>
 
-        <ScrollViewer
-            Grid.Row="0"
-            Padding="20,0,20,0"
-            IsTabStop="False"
-            UseSystemFocusVisuals="False"
-            VerticalScrollBarVisibility="Auto"
-            VerticalScrollMode="Auto">
-            <StackPanel HorizontalAlignment="Left" Margin="0,0,0,40">
-                <TextBlock
-                    x:Uid="/Settings/TextAndEditorPage_TextWrappingSettings_Title"
-                    Style="{StaticResource CompactSubtitleTextBlockStyle}"
-                    Margin="0,15,0,0"
-                    FontWeight="Normal"/>
-                <StackPanel Margin="0,10,0,0">
-                    <ToggleSwitch x:Uid="/Settings/TextAndEditorPage_TextWrappingSettings_ToggleSwitch"
-                                  Style="{StaticResource CustomToggleSwitchStyle}" 
-                                  x:Name="TextWrappingToggle"/>
-                </StackPanel>
-                <TextBlock
-                    x:Uid="/Settings/TextAndEditorPage_SpellingSettings_Title"
-                    Style="{StaticResource CompactSubtitleTextBlockStyle}"
-                    Margin="0,20,0,0"
-                    FontWeight="Normal"/>
-                <StackPanel Margin="0,10,0,0">
-                    <ToggleSwitch x:Uid="/Settings/TextAndEditorPage_SpellingSettings_HighlightMisspelledWordsToggleSwitch"
-                                  Style="{StaticResource CustomToggleSwitchStyle}" 
-                                  x:Name="HighlightMisspelledWordsToggle"/>
-                </StackPanel>
-                <TextBlock
-                    x:Uid="/Settings/TextAndEditorPage_DisplaySettings_Title"
-                    Style="{StaticResource CompactSubtitleTextBlockStyle}"
-                    Margin="0,20,0,0"
-                    FontWeight="Normal"/>
-                <StackPanel Margin="0,10,0,0">
-                    <ToggleSwitch x:Uid="/Settings/TextAndEditorPage_LineHighlighterSettings_ToggleSwitch"
-                                  Style="{StaticResource CustomToggleSwitchStyle}" 
-                                  x:Name="LineHighlighterToggle"
-                                  Margin="0,0,0,10"/>
-                    <ToggleSwitch x:Uid="/Settings/TextAndEditorPage_LineNumbersSettings_ToggleSwitch"
-                                  Style="{StaticResource CustomToggleSwitchStyle}" 
-                                  x:Name="LineNumbersToggle"/>
-                    <TextBlock x:Uid="/Settings/TextAndEditorPage_LineNumbersSettings_Description" Style="{ThemeResource DescriptionTextBlockStyle}" Margin="0,8,0,0"/>
+        <ScrollViewer Grid.Row="0"
+                      VerticalScrollMode="Auto"
+                      VerticalScrollBarVisibility="Auto"
+                      IsTabStop="False"
+                      UseSystemFocusVisuals="False">
+            <StackPanel Padding="{StaticResource SettingsContentPadding}" HorizontalAlignment="Left">
+                <!-- Text Wrapping -->
+                <StackPanel Style="{StaticResource SettingsGroupSectionStyle}">
+                    <TextBlock x:Uid="/Settings/TextAndEditorPage_TextWrappingSettings_Title"
+                               Style="{StaticResource SubtitleAltTextBlockStyle}"
+                               Margin="{StaticResource SettingsSubtitleMargin}"
+                               AutomationProperties.HeadingLevel="Level2" />
+                    <StackPanel>
+                        <ToggleSwitch x:Name="TextWrappingToggle" x:Uid="/Settings/TextAndEditorPage_TextWrappingSettings_ToggleSwitch" />
+                    </StackPanel>
                 </StackPanel>
-                <TextBlock
-                    x:Uid="/Settings/TextAndEditorPage_FontSettings_Title"
-                    Style="{StaticResource CompactSubtitleTextBlockStyle}"
-                    Margin="0,25,0,0"
-                    FontWeight="Normal"/>
-                <StackPanel Margin="0,10,0,0">
-                    <ComboBox x:Name="FontFamilyPicker"
-                              ItemsSource="{x:Bind AvailableFonts, Mode=OneTime}"
-                              HorizontalAlignment="Stretch"
-                              VerticalAlignment="Center"
-                              BorderThickness="1"
-                              Height="36"
-                              Background="Transparent"
-                              IsTextSearchEnabled="True">
-                        <ComboBox.ItemTemplate>
-                            <DataTemplate>
-                                <TextBlock Text="{Binding}"
-                                           FontFamily="{Binding}" />
-                            </DataTemplate>
-                        </ComboBox.ItemTemplate>
-                    </ComboBox>
-                    <ComboBox x:Name="FontSizePicker"
-                              ItemsSource="{x:Bind AvailableFontSizes, Mode=OneTime}"
-                              IsEditable="False"
-                              Margin="0,10,0,0"
-                              VerticalAlignment="Center"
-                              BorderThickness="1"
-                              Height="36"
-                              MinWidth="70"
-                              Background="Transparent">
-                    </ComboBox>
+                <!-- Spelling -->
+                <StackPanel Style="{StaticResource SettingsGroupSectionStyle}">
+                    <TextBlock x:Uid="/Settings/TextAndEditorPage_SpellingSettings_Title"
+                               Style="{StaticResource SubtitleAltTextBlockStyle}"
+                               Margin="{StaticResource SettingsSubtitleMargin}"
+                               AutomationProperties.HeadingLevel="Level2" />
+                    <StackPanel>
+                        <ToggleSwitch x:Name="HighlightMisspelledWordsToggle" x:Uid="/Settings/TextAndEditorPage_SpellingSettings_HighlightMisspelledWordsToggleSwitch" />
+                    </StackPanel>
                 </StackPanel>
-                <TextBlock
-                    x:Uid="/Settings/TextAndEditorPage_FontStyleSettings_Title"
-                    Style="{StaticResource CompactSubtitleTextBlockStyle}"
-                    Margin="0,20,0,0"
-                    FontWeight="Normal"/>
-                <StackPanel Margin="0,10,0,0">
-                    <ComboBox x:Name="FontStylePicker"
-                              ItemsSource="{x:Bind AvailableFontStyles, Mode=OneTime}"
-                              FontFamily="{x:Bind settings:AppSettingsService.EditorFontFamily}"
-                              VerticalAlignment="Center"
-                              BorderThickness="1"
-                              Height="36"
-                              Background="Transparent"
-                              IsTextSearchEnabled="True">
-                        <ComboBox.ItemTemplate>
-                            <DataTemplate>
-                                <TextBlock Text="{Binding FontStyleLocalizedName}"
-                                           FontStyle="{Binding FontStyle}" />
-                            </DataTemplate>
-                        </ComboBox.ItemTemplate>
-                    </ComboBox>
+                <!-- Display -->
+                <StackPanel Style="{StaticResource SettingsGroupSectionStyle}">
+                    <TextBlock x:Uid="/Settings/TextAndEditorPage_DisplaySettings_Title"
+                               Style="{StaticResource SubtitleAltTextBlockStyle}"
+                               Margin="{StaticResource SettingsSubtitleMargin}"
+                               AutomationProperties.HeadingLevel="Level2" />
+                    <StackPanel>
+                        <ToggleSwitch x:Name="LineHighlighterToggle"
+                                      x:Uid="/Settings/TextAndEditorPage_LineHighlighterSettings_ToggleSwitch"
+                                      Margin="0,0,0,4" />
+                        <ToggleSwitch x:Name="LineNumbersToggle" x:Uid="/Settings/TextAndEditorPage_LineNumbersSettings_ToggleSwitch" />
+                        <TextBlock x:Uid="/Settings/TextAndEditorPage_LineNumbersSettings_Description" Style="{StaticResource DescriptionTextBlockStyle}" />
+                    </StackPanel>
                 </StackPanel>
-                <TextBlock
-                    x:Uid="/Settings/TextAndEditorPage_FontWeightSettings_Title"
-                    Style="{StaticResource CompactSubtitleTextBlockStyle}"
-                    Margin="0,20,0,0"
-                    FontWeight="Normal"/>
-                <StackPanel Margin="0,10,0,0">
-                    <ComboBox x:Name="FontWeightPicker"
-                              ItemsSource="{x:Bind AvailableFontWeights, Mode=OneTime}"
-                              FontFamily="{x:Bind settings:AppSettingsService.EditorFontFamily}"
-                              IsEditable="False"
-                              VerticalAlignment="Center"
-                              BorderThickness="1"
-                              Height="36"
-                              MinWidth="70"
-                              Background="Transparent">
-                        <ComboBox.ItemTemplate>
-                            <DataTemplate>
-                                <TextBlock Text="{Binding FontWeightLocalizedName}"
-                                           FontWeight="{Binding FontWeight}" />
-                            </DataTemplate>
-                        </ComboBox.ItemTemplate>
-                    </ComboBox>
+                <!-- Font -->
+                <StackPanel Style="{StaticResource SettingsGroupSectionStyle}">
+                    <TextBlock x:Uid="/Settings/TextAndEditorPage_FontSettings_Title"
+                               Style="{StaticResource SubtitleAltTextBlockStyle}"
+                               Margin="{StaticResource SettingsSubtitleLargeMargin}"
+                               AutomationProperties.HeadingLevel="Level2" />
+                    <StackPanel Spacing="12" Margin="{StaticResource SettingsSubtitleLargeMargin}">
+                        <ComboBox x:Name="FontFamilyPicker"
+                                  HorizontalAlignment="Stretch"
+                                  VerticalAlignment="Center"
+                                  IsTextSearchEnabled="True"
+                                  ItemsSource="{x:Bind AvailableFonts, Mode=OneTime}"
+                                  d:PlaceholderText="Consolas">
+                            <ComboBox.ItemTemplate>
+                                <DataTemplate>
+                                    <TextBlock Text="{Binding}" FontFamily="{Binding}" />
+                                </DataTemplate>
+                            </ComboBox.ItemTemplate>
+                        </ComboBox>
+                        <ComboBox x:Name="FontSizePicker"
+                                  MinWidth="72"
+                                  VerticalAlignment="Center"
+                                  FontFamily="{x:Bind settings:AppSettingsService.EditorFontFamily}"
+                                  IsEditable="False"
+                                  ItemsSource="{x:Bind AvailableFontSizes, Mode=OneTime}"
+                                  d:PlaceholderText="14" />
+                    </StackPanel>
+                    <!-- Font Style -->
+                    <StackPanel Margin="{StaticResource SettingsSubtitleLargeMargin}">
+                        <TextBlock x:Uid="/Settings/TextAndEditorPage_FontStyleSettings_Title"
+                                   Style="{StaticResource BodyTextBlockStyle}"
+                                   Margin="{StaticResource ComboBoxHeaderThemeMargin}"
+                                   AutomationProperties.HeadingLevel="Level3" />
+                        <ComboBox x:Name="FontStylePicker"
+                                  MinWidth="72"
+                                  VerticalAlignment="Center"
+                                  FontFamily="{x:Bind settings:AppSettingsService.EditorFontFamily}"
+                                  IsTextSearchEnabled="True"
+                                  ItemsSource="{x:Bind AvailableFontStyles, Mode=OneTime}"
+                                  d:PlaceholderText="Normal">
+                            <ComboBox.ItemTemplate>
+                                <DataTemplate>
+                                    <TextBlock Text="{Binding FontStyleLocalizedName}" FontStyle="{Binding FontStyle}" />
+                                </DataTemplate>
+                            </ComboBox.ItemTemplate>
+                        </ComboBox>
+                    </StackPanel>
+                    <!-- Font Weight -->
+                    <StackPanel>
+                        <TextBlock x:Uid="/Settings/TextAndEditorPage_FontWeightSettings_Title"
+                                   Style="{StaticResource BodyTextBlockStyle}"
+                                   Margin="{StaticResource ComboBoxHeaderThemeMargin}"
+                                   AutomationProperties.HeadingLevel="Level3" />
+                        <ComboBox x:Name="FontWeightPicker"
+                                  MinWidth="72"
+                                  VerticalAlignment="Center"
+                                  FontFamily="{x:Bind settings:AppSettingsService.EditorFontFamily}"
+                                  IsEditable="False"
+                                  ItemsSource="{x:Bind AvailableFontWeights, Mode=OneTime}"
+                                  d:PlaceholderText="Normal">
+                            <ComboBox.ItemTemplate>
+                                <DataTemplate>
+                                    <TextBlock Text="{Binding FontWeightLocalizedName}" FontWeight="{Binding FontWeight}" />
+                                </DataTemplate>
+                            </ComboBox.ItemTemplate>
+                        </ComboBox>
+                    </StackPanel>
                 </StackPanel>
-                <TextBlock
-                    x:Uid="/Settings/TextAndEditorPage_LineEndingSettings_Title"
-                    Style="{StaticResource CompactSubtitleTextBlockStyle}"
-                    Margin="0,25,0,0"
-                    FontWeight="Normal"/>
-                <StackPanel x:Name="LineEndingPanel" Margin="0,10,0,0">
-                    <RadioButton Style="{StaticResource CustomRadioButtonStyle}" x:Name="CrlfRadioButton" Tag="Crlf" Content="Windows (CRLF)" GroupName="LineEndingGroup"/>
-                    <RadioButton Style="{StaticResource CustomRadioButtonStyle}" x:Name="CrRadioButton" Tag="Cr" Content="Macintosh (CR)" GroupName="LineEndingGroup"/>
-                    <RadioButton Style="{StaticResource CustomRadioButtonStyle}" x:Name="LfRadioButton" Tag="Lf" Content="Unix (LF)" GroupName="LineEndingGroup"/>
+                <!-- Line Ending -->
+                <StackPanel Style="{StaticResource SettingsGroupSectionStyle}">
+                    <TextBlock x:Uid="/Settings/TextAndEditorPage_LineEndingSettings_Title"
+                               Style="{StaticResource SubtitleAltTextBlockStyle}"
+                               Margin="{StaticResource SettingsSubtitleMargin}"
+                               AutomationProperties.HeadingLevel="Level2" />
+                    <StackPanel x:Name="LineEndingPanel">
+                        <RadioButton x:Name="CrlfRadioButton"
+                                     Content="Windows (CRLF)"
+                                     GroupName="LineEndingGroup"
+                                     Tag="Crlf" />
+                        <RadioButton x:Name="CrRadioButton"
+                                     Content="Macintosh (CR)"
+                                     GroupName="LineEndingGroup"
+                                     Tag="Cr" />
+                        <RadioButton x:Name="LfRadioButton"
+                                     Content="Unix (LF)"
+                                     GroupName="LineEndingGroup"
+                                     Tag="Lf" />
+                    </StackPanel>
+                    <TextBlock x:Uid="/Settings/TextAndEditorPage_LineEndingSettings_Description" Style="{StaticResource DescriptionTextBlockStyle}" />
                 </StackPanel>
-                <TextBlock x:Uid="/Settings/TextAndEditorPage_LineEndingSettings_Description" Style="{ThemeResource DescriptionTextBlockStyle}" Margin="0,8,0,0"/>
-                <TextBlock
-                    x:Uid="/Settings/TextAndEditorPage_EncodingSettings_Title"
-                    Style="{StaticResource CompactSubtitleTextBlockStyle}"
-                    Margin="0,25,0,0"
-                    FontWeight="Normal"/>
-                <StackPanel x:Name="EncodingPanel" Margin="0,10,0,0">
-                    <RadioButton Style="{StaticResource CustomRadioButtonStyle}" x:Name="Utf8EncodingRadioButton" Tag="UTF-8" Content="UTF-8" GroupName="EncodingGroup"/>
-                    <RadioButton Style="{StaticResource CustomRadioButtonStyle}" x:Name="Utf8BomEncodingRadioButton" Tag="UTF-8-BOM" Content="UTF-8-BOM" GroupName="EncodingGroup"/>
-                    <RadioButton Style="{StaticResource CustomRadioButtonStyle}" x:Name="Utf16LeBomEncodingRadioButton" Tag="UTF-16 LE BOM" Content="UTF-16 LE BOM" GroupName="EncodingGroup"/>
-                    <RadioButton Style="{StaticResource CustomRadioButtonStyle}" x:Name="Utf16BeBomEncodingRadioButton" Tag="UTF-16 BE BOM" Content="UTF-16 BE BOM" GroupName="EncodingGroup"/>
+                <!-- Enconding -->
+                <StackPanel Style="{StaticResource SettingsGroupSectionStyle}">
+                    <TextBlock x:Uid="/Settings/TextAndEditorPage_EncodingSettings_Title"
+                               Style="{StaticResource SubtitleAltTextBlockStyle}"
+                               Margin="{StaticResource SettingsSubtitleMargin}"
+                               AutomationProperties.HeadingLevel="Level2" />
+                    <StackPanel x:Name="EncodingPanel">
+                        <RadioButton x:Name="Utf8EncodingRadioButton"
+                                     Content="UTF-8"
+                                     GroupName="EncodingGroup"
+                                     Tag="UTF-8" />
+                        <RadioButton x:Name="Utf8BomEncodingRadioButton"
+                                     Content="UTF-8-BOM"
+                                     GroupName="EncodingGroup"
+                                     Tag="UTF-8-BOM" />
+                        <RadioButton x:Name="Utf16LeBomEncodingRadioButton"
+                                     Content="UTF-16 LE BOM"
+                                     GroupName="EncodingGroup"
+                                     Tag="UTF-16 LE BOM" />
+                        <RadioButton x:Name="Utf16BeBomEncodingRadioButton"
+                                     Content="UTF-16 BE BOM"
+                                     GroupName="EncodingGroup"
+                                     Tag="UTF-16 BE BOM" />
+                    </StackPanel>
+                    <TextBlock x:Uid="/Settings/TextAndEditorPage_EncodingSettings_Description" Style="{StaticResource DescriptionTextBlockStyle}" />
                 </StackPanel>
-                <TextBlock x:Uid="/Settings/TextAndEditorPage_EncodingSettings_Description" Style="{ThemeResource DescriptionTextBlockStyle}" Margin="0,8,0,0"/>
-                <TextBlock
-                    x:Uid="/Settings/TextAndEditorPage_DecodingSettings_Title"
-                    Style="{StaticResource CompactSubtitleTextBlockStyle}"
-                    Margin="0,25,0,0"
-                    FontWeight="Normal"/>
-                <StackPanel x:Name="DecodingPanel" Margin="0,10,0,0">
-                    <RadioButton x:Uid="/Settings/TextAndEditorPage_DecodingSettings_AutoGuessRadioButton" Style="{StaticResource CustomRadioButtonStyle}" x:Name="AutoGuessDecodingRadioButton" Tag="Auto" GroupName="DecodingGroup"/>
-                    <RadioButton x:Uid="/Settings/TextAndEditorPage_DecodingSettings_Utf8RadioButton" Style="{StaticResource CustomRadioButtonStyle}" x:Name="Utf8DecodingRadioButton" Tag="UTF-8" GroupName="DecodingGroup"/>
-                    <RadioButton x:Uid="/Settings/TextAndEditorPage_DecodingSettings_AnsiRadioButton" Style="{StaticResource CustomRadioButtonStyle}" x:Name="AnsiDecodingRadioButton" Tag="ANSI" GroupName="DecodingGroup"/>
+                <!-- Decoding -->
+                <StackPanel Style="{StaticResource SettingsGroupSectionStyle}">
+                    <TextBlock x:Uid="/Settings/TextAndEditorPage_DecodingSettings_Title"
+                               Style="{StaticResource SubtitleAltTextBlockStyle}"
+                               Margin="{StaticResource SettingsSubtitleMargin}"
+                               AutomationProperties.HeadingLevel="Level2" />
+                    <StackPanel x:Name="DecodingPanel">
+                        <RadioButton x:Name="AutoGuessDecodingRadioButton"
+                                     x:Uid="/Settings/TextAndEditorPage_DecodingSettings_AutoGuessRadioButton"
+                                     GroupName="DecodingGroup"
+                                     Tag="Auto" />
+                        <RadioButton x:Name="Utf8DecodingRadioButton"
+                                     x:Uid="/Settings/TextAndEditorPage_DecodingSettings_Utf8RadioButton"
+                                     GroupName="DecodingGroup"
+                                     Tag="UTF-8" />
+                        <RadioButton x:Name="AnsiDecodingRadioButton"
+                                     x:Uid="/Settings/TextAndEditorPage_DecodingSettings_AnsiRadioButton"
+                                     GroupName="DecodingGroup"
+                                     Tag="ANSI" />
+                    </StackPanel>
+                    <TextBlock x:Uid="/Settings/TextAndEditorPage_DecodingSettings_Description" Style="{StaticResource DescriptionTextBlockStyle}" />
                 </StackPanel>
-                <TextBlock x:Uid="/Settings/TextAndEditorPage_DecodingSettings_Description" Style="{ThemeResource DescriptionTextBlockStyle}" Margin="0,8,0,0"/>
-                <TextBlock
-                    x:Uid="/Settings/TextAndEditorPage_TabKeySettings_Title"
-                    Style="{StaticResource CompactSubtitleTextBlockStyle}"
-                    Margin="0,25,0,0"
-                    FontWeight="Normal"/>
-                <StackPanel x:Name="TabBehaviorPanel" Margin="0,10,0,0">
-                    <RadioButton x:Uid="/Settings/TextAndEditorPage_TabKeySettings_DefaultRadioButton" Style="{StaticResource CustomRadioButtonStyle}" x:Name="TabDefaultRadioButton" Tag="-1" GroupName="TabBehaviorGroup"/>
-                    <RadioButton x:Uid="/Settings/TextAndEditorPage_TabKeySettings_TwoSpacesRadioButton" Style="{StaticResource CustomRadioButtonStyle}" x:Name="TabTwoSpacesRadioButton" Tag="2" GroupName="TabBehaviorGroup"/>
-                    <RadioButton x:Uid="/Settings/TextAndEditorPage_TabKeySettings_FourSpacesRadioButton" Style="{StaticResource CustomRadioButtonStyle}" x:Name="TabFourSpacesRadioButton" Tag="4" GroupName="TabBehaviorGroup"/>
-                    <RadioButton x:Uid="/Settings/TextAndEditorPage_TabKeySettings_EightSpacesRadioButton" Style="{StaticResource CustomRadioButtonStyle}" x:Name="TabEightSpacesRadioButton" Tag="8" GroupName="TabBehaviorGroup"/>
+                <!-- Tab Key -->
+                <StackPanel Style="{StaticResource SettingsGroupSectionStyle}">
+                    <TextBlock x:Uid="/Settings/TextAndEditorPage_TabKeySettings_Title"
+                               Style="{StaticResource SubtitleAltTextBlockStyle}"
+                               Margin="{StaticResource SettingsSubtitleMargin}"
+                               AutomationProperties.HeadingLevel="Level2" />
+                    <StackPanel x:Name="TabBehaviorPanel">
+                        <RadioButton x:Name="TabDefaultRadioButton"
+                                     x:Uid="/Settings/TextAndEditorPage_TabKeySettings_DefaultRadioButton"
+                                     GroupName="TabBehaviorGroup"
+                                     Tag="-1" />
+                        <RadioButton x:Name="TabTwoSpacesRadioButton"
+                                     x:Uid="/Settings/TextAndEditorPage_TabKeySettings_TwoSpacesRadioButton"
+                                     GroupName="TabBehaviorGroup"
+                                     Tag="2" />
+                        <RadioButton x:Name="TabFourSpacesRadioButton"
+                                     x:Uid="/Settings/TextAndEditorPage_TabKeySettings_FourSpacesRadioButton"
+                                     GroupName="TabBehaviorGroup"
+                                     Tag="4" />
+                        <RadioButton x:Name="TabEightSpacesRadioButton"
+                                     x:Uid="/Settings/TextAndEditorPage_TabKeySettings_EightSpacesRadioButton"
+                                     GroupName="TabBehaviorGroup"
+                                     Tag="8" />
+                    </StackPanel>
+                    <TextBlock x:Uid="/Settings/TextAndEditorPage_TabKeySettings_Description" Style="{StaticResource DescriptionTextBlockStyle}" />
                 </StackPanel>
-                <TextBlock x:Uid="/Settings/TextAndEditorPage_TabKeySettings_Description" Style="{ThemeResource DescriptionTextBlockStyle}" Margin="0,8,0,0"/>
-                <TextBlock
-                    x:Uid="/Settings/TextAndEditorPage_SearchEngineSettings_Title"
-                    Style="{StaticResource CompactSubtitleTextBlockStyle}"
-                    Margin="0,25,0,0"
-                    FontWeight="Normal"/>
-                <StackPanel x:Name="SearchEnginePanel" Margin="0,10,0,0">
-                    <RadioButton Style="{StaticResource CustomRadioButtonStyle}" x:Name="BingRadioButton" GroupName="SearchEngineGroup">
-                        <StackPanel Orientation="Horizontal">
-                            <Image Source="ms-appx:///Assets/search_bing.png" Width="16" Stretch="Uniform"/>
-                            <TextBlock Text="Bing" Margin="8,0,0,0"/>
+                <!-- Search Engine -->
+                <StackPanel Style="{StaticResource SettingsGroupSectionStyle}">
+                    <TextBlock x:Uid="/Settings/TextAndEditorPage_SearchEngineSettings_Title"
+                               Style="{StaticResource SubtitleAltTextBlockStyle}"
+                               Margin="{StaticResource SettingsSubtitleMargin}"
+                               AutomationProperties.HeadingLevel="Level2" />
+                    <StackPanel x:Name="SearchEnginePanel">
+                        <RadioButton x:Name="BingRadioButton" GroupName="SearchEngineGroup">
+                            <StackPanel Orientation="Horizontal">
+                                <Image Width="16" Source="ms-appx:///Assets/search_bing.png" Stretch="Uniform" />
+                                <TextBlock Margin="8,0,0,0" Text="Bing" />
+                            </StackPanel>
+                        </RadioButton>
+                        <RadioButton x:Name="GoogleRadioButton" GroupName="SearchEngineGroup">
+                            <StackPanel Orientation="Horizontal">
+                                <Image Width="16" Source="ms-appx:///Assets/search_google.png" Stretch="Uniform" />
+                                <TextBlock Margin="8,0,0,0" Text="Google" />
+                            </StackPanel>
+                        </RadioButton>
+                        <RadioButton x:Name="DuckDuckGoRadioButton" GroupName="SearchEngineGroup">
+                            <StackPanel Orientation="Horizontal">
+                                <Image Width="16" Source="ms-appx:///Assets/search_duckduckgo.png" Stretch="Uniform" />
+                                <TextBlock Margin="8,0,0,0" Text="Duck Duck Go" />
+                            </StackPanel>
+                        </RadioButton>
+                        <RadioButton x:Name="CustomSearchUrlRadioButton" GroupName="SearchEngineGroup">
+                            <StackPanel Orientation="Horizontal">
+                                <Image Width="16" Source="ms-appx:///Assets/search_custom.png" Stretch="Uniform" />
+                                <TextBlock x:Uid="/Settings/TextAndEditorPage_SearchEngineSettings_CustomSearchUrlRadioButton" Margin="8,0,0,0" />
+                            </StackPanel>
+                        </RadioButton>
+                        <StackPanel Margin="28,6,0,4">
+                            <TextBox x:Name="CustomSearchUrl"
+                                     Style="{StaticResource TransparentTextBoxStyle}"
+                                     BorderThickness="0"
+                                     IsSpellCheckEnabled="False"
+                                     LostFocus="CustomSearchUrl_LostFocus"
+                                     PlaceholderText="https://www.example.com/search?q={0}"
+                                     TextChanged="CustomSearchUrl_TextChanged" />
+                            <TextBlock x:Name="CustomUrlErrorReport"
+                                       x:Uid="/Settings/TextAndEditorPage_SearchEngineSettings_CustomSearchUrlRadioButton_CustomUrlErrorReport"
+                                       Style="{StaticResource CaptionTextBlockStyle}"
+                                       Foreground="{ThemeResource DangerTextForegroundBrush}"
+                                       Margin="0,4,0,0"
+                                       Visibility="Collapsed"
+                                       d:Visibility="Visible" />
                         </StackPanel>
-                    </RadioButton>
-                    <RadioButton Style="{StaticResource CustomRadioButtonStyle}" x:Name="GoogleRadioButton" GroupName="SearchEngineGroup">
-                        <StackPanel Orientation="Horizontal">
-                            <Image Source="ms-appx:///Assets/search_google.png" Width="16" Stretch="Uniform"/>
-                            <TextBlock Text="Google" Margin="8,0,0,0"/>
-                        </StackPanel>
-                    </RadioButton>
-                    <RadioButton Style="{StaticResource CustomRadioButtonStyle}" x:Name="DuckDuckGoRadioButton" GroupName="SearchEngineGroup">
-                        <StackPanel Orientation="Horizontal">
-                            <Image Source="ms-appx:///Assets/search_duckduckgo.png" Width="16" Stretch="Uniform"/>
-                            <TextBlock Text="Duck Duck Go" Margin="8,0,0,0"/>
-                        </StackPanel>
-                    </RadioButton>
-                    <RadioButton Style="{StaticResource CustomRadioButtonStyle}" x:Name="CustomSearchUrlRadioButton" GroupName="SearchEngineGroup">
-                        <StackPanel Orientation="Horizontal">
-                            <Image Source="ms-appx:///Assets/search_custom.png" Width="16" Stretch="Uniform"/>
-                            <TextBlock x:Uid="/Settings/TextAndEditorPage_SearchEngineSettings_CustomSearchUrlRadioButton" Text="Custom Search Engine" Margin="8,0,0,0"/>
-                        </StackPanel>
-                    </RadioButton>
-                    <StackPanel  Margin="28,5,0,10">
-                        <TextBox Style="{StaticResource TransparentTextBoxStyle}" BorderThickness="0" x:Name="CustomSearchUrl" PlaceholderText="https://www.example.com/search?q={0}" IsSpellCheckEnabled="False" TextChanged="CustomSearchUrl_TextChanged" LostFocus="CustomSearchUrl_LostFocus"/>
-                        <TextBlock x:Name="CustomUrlErrorReport" x:Uid="/Settings/TextAndEditorPage_SearchEngineSettings_CustomSearchUrlRadioButton_CustomUrlErrorReport" Style="{ThemeResource DescriptionTextBlockStyle}" Foreground="Red" Visibility="Collapsed"/>
                     </StackPanel>
+                    <TextBlock x:Uid="/Settings/TextAndEditorPage_SearchEngineSettings_Description" Style="{StaticResource DescriptionTextBlockStyle}" />
                 </StackPanel>
-                <TextBlock x:Uid="/Settings/TextAndEditorPage_SearchEngineSettings_Description" Style="{ThemeResource DescriptionTextBlockStyle}" Margin="0,8,0,0"/>
             </StackPanel>
         </ScrollViewer>
+
     </Grid>
 </Page>
diff --git a/src/Notepads/Views/Settings/TextAndEditorSettingsPage.xaml.cs b/src/Notepads/Views/Settings/TextAndEditorSettingsPage.xaml.cs
index b616d8122..a40a07e10 100644
--- a/src/Notepads/Views/Settings/TextAndEditorSettingsPage.xaml.cs
+++ b/src/Notepads/Views/Settings/TextAndEditorSettingsPage.xaml.cs
@@ -370,6 +370,7 @@ private void FontFamilyPicker_OnSelectionChanged(object sender, SelectionChanged
         {
             var fontFamily = new FontFamily((string)e.AddedItems.First());
             AppSettingsService.EditorFontFamily = fontFamily.Source;
+            FontSizePicker.FontFamily = fontFamily;
             FontStylePicker.FontFamily = fontFamily;
             FontWeightPicker.FontFamily = fontFamily;
         }

From e794ac8adcd3e00fdd384347721e1dd14ed69dfb Mon Sep 17 00:00:00 2001
From: United600 <United600@users.noreply.github.com>
Date: Mon, 22 Jul 2024 22:50:41 +0100
Subject: [PATCH 2/2] remove custom brush and more design tags

---
 src/Notepads/Resource/CustomSettingsStyle.xaml     | 14 +++++++-------
 src/Notepads/Views/Settings/AboutPage.xaml         | 10 ++++++----
 .../Views/Settings/AdvancedSettingsPage.xaml       |  8 +++++---
 .../Settings/PersonalizationSettingsPage.xaml      | 14 +++++++++-----
 src/Notepads/Views/Settings/SettingsPage.xaml      |  3 +++
 src/Notepads/Views/Settings/SettingsPanel.xaml     |  3 ++-
 .../Views/Settings/TextAndEditorSettingsPage.xaml  | 14 ++++++++------
 7 files changed, 40 insertions(+), 26 deletions(-)

diff --git a/src/Notepads/Resource/CustomSettingsStyle.xaml b/src/Notepads/Resource/CustomSettingsStyle.xaml
index 3fdd3a02a..72b823b3c 100644
--- a/src/Notepads/Resource/CustomSettingsStyle.xaml
+++ b/src/Notepads/Resource/CustomSettingsStyle.xaml
@@ -2,19 +2,19 @@
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                     xmlns:local="using:Notepads">
 
-    <ResourceDictionary.ThemeDictionaries>
+    <!--<ResourceDictionary.ThemeDictionaries>
         <ResourceDictionary x:Key="Default">
-            <Color x:Key="DangerTextForegroundColor">#FFFF4419</Color>
-            <SolidColorBrush x:Key="DangerTextForegroundBrush" Color="{StaticResource DangerTextForegroundColor}" />
+            <Color x:Key="WarningTextColor">#FFFF4419</Color>
+            <SolidColorBrush x:Key="WarningTextForegroundBrush" Color="{StaticResource WarningTextColor}" />
         </ResourceDictionary>
         <ResourceDictionary x:Key="Light">
-            <Color x:Key="DangerTextForegroundColor">#FFE00015</Color>
-            <SolidColorBrush x:Key="DangerTextForegroundBrush" Color="{StaticResource DangerTextForegroundColor}" />
+            <Color x:Key="WarningTextColor">#FFE00015</Color>
+            <SolidColorBrush x:Key="WarningTextForegroundBrush" Color="{StaticResource WarningTextColor}" />
         </ResourceDictionary>
         <ResourceDictionary x:Key="HighContrast">
-            <SolidColorBrush x:Key="DangerTextForegroundBrush" Color="{ThemeResource SystemColorHighlightColor}" />
+            <SolidColorBrush x:Key="WarningTextForegroundBrush" Color="{ThemeResource SystemColorHighlightColor}" />
         </ResourceDictionary>
-    </ResourceDictionary.ThemeDictionaries>
+    </ResourceDictionary.ThemeDictionaries>-->
 
     <StaticResource x:Key="ComboBoxBackground" ResourceKey="SystemControlTransparentBrush" />
 
diff --git a/src/Notepads/Views/Settings/AboutPage.xaml b/src/Notepads/Views/Settings/AboutPage.xaml
index 6cd19a495..814722033 100644
--- a/src/Notepads/Views/Settings/AboutPage.xaml
+++ b/src/Notepads/Views/Settings/AboutPage.xaml
@@ -3,9 +3,11 @@
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-      d:DesignWidth="333.333"
-      d:DesignHeight="1124"
+      d:Background="{ThemeResource SystemControlBackgroundAltMediumHighBrush}"
+      d:RequestedTheme="Light"
       HighContrastAdjustment="None"
+      d:DesignWidth="334"
+      d:DesignHeight="1124"
       mc:Ignorable="d">
 
     <Grid>
@@ -30,9 +32,9 @@
                     <StackPanel>
                         <TextBlock Style="{StaticResource TitleTextBlockStyle}"
                                    Margin="0,4,0,4"
+                                   FontWeight="Normal"
                                    Text="{x:Bind AppName, Mode=OneTime}"
-                                   d:Text="Notepads"
-                                   FontWeight="Normal" />
+                                   d:Text="Notepads" />
                         <TextBlock Style="{StaticResource SubtitleTextBlockStyle}"
                                    Foreground="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
                                    Text="{x:Bind AppVersion, Mode=OneTime}"
diff --git a/src/Notepads/Views/Settings/AdvancedSettingsPage.xaml b/src/Notepads/Views/Settings/AdvancedSettingsPage.xaml
index 898939dca..bb283ebb4 100644
--- a/src/Notepads/Views/Settings/AdvancedSettingsPage.xaml
+++ b/src/Notepads/Views/Settings/AdvancedSettingsPage.xaml
@@ -4,9 +4,11 @@
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       xmlns:utilities="using:Notepads.Utilities"
-      d:DesignWidth="333.333"
-      d:DesignHeight="768"
+      d:Background="{ThemeResource SystemControlBackgroundAltMediumHighBrush}"
+      d:RequestedTheme="Light"
       HighContrastAdjustment="None"
+      d:DesignWidth="334"
+      d:DesignHeight="768"
       mc:Ignorable="d">
 
     <Grid>
@@ -96,7 +98,7 @@
                         <TextBlock x:Name="RestartPrompt"
                                    x:Uid="/Settings/AdvancedPage_LanguagePreferenceSettings_RestartPrompt"
                                    Style="{StaticResource CaptionTextBlockStyle}"
-                                   Foreground="{ThemeResource DangerTextForegroundBrush}"
+                                   Foreground="{ThemeResource SystemControlErrorTextForegroundBrush}"
                                    Margin="0,6,0,0"
                                    Visibility="Collapsed"
                                    d:Visibility="Visible" />
diff --git a/src/Notepads/Views/Settings/PersonalizationSettingsPage.xaml b/src/Notepads/Views/Settings/PersonalizationSettingsPage.xaml
index 1fc1b0f93..a73e253a5 100644
--- a/src/Notepads/Views/Settings/PersonalizationSettingsPage.xaml
+++ b/src/Notepads/Views/Settings/PersonalizationSettingsPage.xaml
@@ -3,9 +3,11 @@
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-      d:DesignWidth="333.333"
-      d:DesignHeight="900"
+      d:Background="{ThemeResource SystemControlBackgroundAltMediumHighBrush}"
+      d:RequestedTheme="Light"
       HighContrastAdjustment="None"
+      d:DesignWidth="334"
+      d:DesignHeight="900"
       mc:Ignorable="d">
 
     <Grid>
@@ -52,8 +54,8 @@
                     <StackPanel Orientation="Horizontal">
                         <FontIcon Margin="0,0,8,0"
                                   VerticalAlignment="Center"
-                                  Glyph="&#xE727;"
                                   FontSize="20"
+                                  Glyph="&#xE727;"
                                   IsHitTestVisible="False"
                                   AutomationProperties.AccessibilityView="Raw" />
                         <Slider x:Name="BackgroundTintOpacitySlider"
@@ -61,12 +63,13 @@
                                 Height="{StaticResource SliderHorizontalHeight}"
                                 Maximum="100"
                                 Minimum="0"
-                                StepFrequency="1" />
+                                StepFrequency="1"
+                                d:Value="100" />
                         <TextBlock Style="{StaticResource SubtitleTextBlockStyle}"
                                    Margin="12,0,0,2"
                                    VerticalAlignment="Center"
                                    Text="{x:Bind BackgroundTintOpacitySlider.Value, Mode=OneWay}"
-                                   d:Text="100" />
+                                   d:Text="{Binding ElementName=BackgroundTintOpacitySlider, Path=Value}" />
                         <TextBlock Style="{StaticResource SubtitleTextBlockStyle}"
                                    Margin="2,0,0,2"
                                    VerticalAlignment="Center"
@@ -86,6 +89,7 @@
                                       Margin="{StaticResource SettingsSubtitleLargeMargin}" />
                         <Viewbox MaxWidth="292" Stretch="Fill">
                             <ColorPicker x:Name="AccentColorPicker"
+                                         d:Color="{ThemeResource SystemControlBackgroundAccentBrush}"
                                          ColorSpectrumShape="Ring"
                                          IsColorSliderVisible="True"
                                          IsColorChannelTextInputVisible="True"
diff --git a/src/Notepads/Views/Settings/SettingsPage.xaml b/src/Notepads/Views/Settings/SettingsPage.xaml
index b871109dd..779ef0135 100644
--- a/src/Notepads/Views/Settings/SettingsPage.xaml
+++ b/src/Notepads/Views/Settings/SettingsPage.xaml
@@ -4,12 +4,15 @@
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       xmlns:settings="using:Notepads.Views.Settings"
+      d:RequestedTheme="Light"
+      d:DesignWidth="386"
       mc:Ignorable="d">
 
     <NavigationView x:Name="SettingsNavigationView"
                     IsBackButtonVisible="Collapsed"
                     IsBackEnabled="False"
                     IsPaneOpen="False"
+                    d:IsPaneOpen="True"
                     IsSettingsVisible="False"
                     ItemInvoked="SettingsPanel_OnItemInvoked"
                     OpenPaneLength="200"
diff --git a/src/Notepads/Views/Settings/SettingsPanel.xaml b/src/Notepads/Views/Settings/SettingsPanel.xaml
index c555b454d..12a1823d1 100644
--- a/src/Notepads/Views/Settings/SettingsPanel.xaml
+++ b/src/Notepads/Views/Settings/SettingsPanel.xaml
@@ -3,8 +3,9 @@
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-      d:DesignWidth="333.333"
+      d:RequestedTheme="Light"
       HighContrastAdjustment="None"
+      d:DesignWidth="334"
       mc:Ignorable="d">
 
     <Page.Resources>
diff --git a/src/Notepads/Views/Settings/TextAndEditorSettingsPage.xaml b/src/Notepads/Views/Settings/TextAndEditorSettingsPage.xaml
index 43e8f52ec..5c6f6b0aa 100644
--- a/src/Notepads/Views/Settings/TextAndEditorSettingsPage.xaml
+++ b/src/Notepads/Views/Settings/TextAndEditorSettingsPage.xaml
@@ -4,9 +4,11 @@
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       xmlns:settings="using:Notepads.Services"
-      d:DesignWidth="333.333"
-      d:DesignHeight="1700"
+      d:Background="{ThemeResource SystemControlBackgroundAltMediumHighBrush}"
+      d:RequestedTheme="Light"
       HighContrastAdjustment="None"
+      d:DesignWidth="334"
+      d:DesignHeight="1700"
       mc:Ignorable="d">
 
     <Grid>
@@ -74,7 +76,7 @@
                                   d:PlaceholderText="Consolas">
                             <ComboBox.ItemTemplate>
                                 <DataTemplate>
-                                    <TextBlock Text="{Binding}" FontFamily="{Binding}" />
+                                    <TextBlock FontFamily="{Binding}" Text="{Binding}" />
                                 </DataTemplate>
                             </ComboBox.ItemTemplate>
                         </ComboBox>
@@ -101,7 +103,7 @@
                                   d:PlaceholderText="Normal">
                             <ComboBox.ItemTemplate>
                                 <DataTemplate>
-                                    <TextBlock Text="{Binding FontStyleLocalizedName}" FontStyle="{Binding FontStyle}" />
+                                    <TextBlock FontStyle="{Binding FontStyle}" Text="{Binding FontStyleLocalizedName}" />
                                 </DataTemplate>
                             </ComboBox.ItemTemplate>
                         </ComboBox>
@@ -121,7 +123,7 @@
                                   d:PlaceholderText="Normal">
                             <ComboBox.ItemTemplate>
                                 <DataTemplate>
-                                    <TextBlock Text="{Binding FontWeightLocalizedName}" FontWeight="{Binding FontWeight}" />
+                                    <TextBlock FontWeight="{Binding FontWeight}" Text="{Binding FontWeightLocalizedName}" />
                                 </DataTemplate>
                             </ComboBox.ItemTemplate>
                         </ComboBox>
@@ -265,7 +267,7 @@
                             <TextBlock x:Name="CustomUrlErrorReport"
                                        x:Uid="/Settings/TextAndEditorPage_SearchEngineSettings_CustomSearchUrlRadioButton_CustomUrlErrorReport"
                                        Style="{StaticResource CaptionTextBlockStyle}"
-                                       Foreground="{ThemeResource DangerTextForegroundBrush}"
+                                       Foreground="{ThemeResource SystemControlErrorTextForegroundBrush}"
                                        Margin="0,4,0,0"
                                        Visibility="Collapsed"
                                        d:Visibility="Visible" />