Repository: microsoft/terminal (language: cpp)

Issue:
AGI-P1 Maximize icon should be rounded
### Windows Terminal version

1.13.10333.0

### Windows build number

_No response_

### Other Software

_No response_

### Steps to reproduce

In our latest update to Preview, we added the snap assist functionality to the min/max/close control. Along with this and moving towards the Windows 11 styling, we should also make the maximize icon a rounded square.

### Expected Behavior

It should look something like this (taken from PowerPoint):
![image](https://user-images.githubusercontent.com/48369326/153053503-30c2fc38-570b-4853-a2e3-9736ead839ce.png)

### Actual Behavior

Currently it looks like this:
![image](https://user-images.githubusercontent.com/48369326/153053404-0d31e5ef-951a-460a-a180-ac3ead478d86.png)
Acrylic Broken
### Windows Terminal version

1.13.10336.0

### Windows build number

Microsoft Windows [Version 10.0.19044.1503]

### Other Software

_No response_

### Steps to reproduce

1. Install The Latest Version Of Windows Terminal Preview On Windows 10.
2. Boom, Title bar Acrylic Broken

### Expected Behavior

Acrylic On Title Bar Works

### Actual Behavior

Acrylic Title Bar Very White
Pasting multiple lines, multiple times is broken in main
After #12517 likely

copy a bunch of lines, like 

```
git cherry-pick 02135ed
git cherry-pick 27a1b9d
git cherry-pick f5f0712
git cherry-pick c0083ef
git cherry-pick 09e9915
git cherry-pick 0a15643
```

and paste em. You'll get the warning, fine. Allow the paste. Now copy some more lines like

```
git cherry-pick 5ba0d61
git cherry-pick c62705e
git cherry-pick 788d33c
```

and paste em. No warning, no paste. One at a time works fine. I'm betting the page is stuck thinking the dialog is open (it's not).

(I bet there are other ways of reproducing this too)


Discussion / hints:

Fix patch:
diff --git a/.github/actions/spelling/allow/allow.txt b/.github/actions/spelling/allow/allow.txt
index de11231a313..dd3be665afd 100644
--- a/.github/actions/spelling/allow/allow.txt
+++ b/.github/actions/spelling/allow/allow.txt
@@ -1,4 +1,8 @@
 apc
+Apc
+bsd
+breadcrumb
+breadcrumbs
 calt
 ccmp
 changelog
@@ -16,6 +20,8 @@ downside
 downsides
 dze
 dzhe
+EDDB
+EDDC
 Enum'd
 Fitt
 formattings
@@ -62,6 +68,8 @@ runtimes
 shcha
 slnt
 Sos
+timeline
+timelines
 timestamped
 TLDR
 tokenizes
diff --git a/src/cascadia/TerminalApp/App.xaml b/src/cascadia/TerminalApp/App.xaml
index 251028dee8f..1aa09e74d21 100644
--- a/src/cascadia/TerminalApp/App.xaml
+++ b/src/cascadia/TerminalApp/App.xaml
@@ -21,7 +21,7 @@
             <ResourceDictionary.MergedDictionaries>
                 <!--  Include the MUX Controls resources  -->
                 <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls"
-                                       ControlsResourcesVersion="Version1" />
+                                       ControlsResourcesVersion="Version2" />
                 <ResourceDictionary>
 
                     <!--
@@ -54,20 +54,43 @@
                     <ResourceDictionary.ThemeDictionaries>
                         <ResourceDictionary x:Key="Dark">
                             <!--  Define resources for Dark mode here  -->
+
+                            <!--
+                                Originally, we were using the raw value of
+                                ApplicationPageBackgroundThemeBrush here, which is
+                                evaluated as SolidBackgroundFillColorBase. If we try
+                                to use those resources directly though, we don't get
+                                the properly themed versions. Presumably because the
+                                App itself can't have it's RequestedTheme changed at
+                                runtime.
+                                
+                                However, after more discussion with the WinUI
+                                team, we determined that those colors don't
+                                provide enough contrast. The color here (and in
+                                light mode) were chosen for greater contrast.
+                                
+                                See GH #12356 for more history on the subject.
+                            -->
                             <SolidColorBrush x:Key="TabViewBackground"
-                                             Color="#FF333333" />
+                                             Color="#0a0a0a" />
+
+                            <StaticResource x:Key="UnfocusedBorderBrush"
+                                            ResourceKey="ApplicationPageBackgroundThemeBrush" />
+
 
-                            <SolidColorBrush x:Key="UnfocusedBorderBrush"
-                                             Color="#FF333333" />
                         </ResourceDictionary>
 
                         <ResourceDictionary x:Key="Light">
                             <!--  Define resources for Light mode here  -->
+
+                            <!--
+                                GH #12398 has more history on this value, as well as GH #12400
+                            -->
                             <SolidColorBrush x:Key="TabViewBackground"
-                                             Color="#FFCCCCCC" />
+                                             Color="#dadada" />
 
-                            <SolidColorBrush x:Key="UnfocusedBorderBrush"
-                                             Color="#FFCCCCCC" />
+                            <StaticResource x:Key="UnfocusedBorderBrush"
+                                            ResourceKey="ApplicationPageBackgroundThemeBrush" />
                         </ResourceDictionary>
 
                     </ResourceDictionary.ThemeDictionaries>
diff --git a/src/cascadia/TerminalApp/AppLogic.cpp b/src/cascadia/TerminalApp/AppLogic.cpp
index 2dc201c876c..ba6ae4feaf1 100644
--- a/src/cascadia/TerminalApp/AppLogic.cpp
+++ b/src/cascadia/TerminalApp/AppLogic.cpp
@@ -376,7 +376,11 @@ namespace winrt::TerminalApp::implementation
         }
 
         _dialog = dialog;
-
+        // GH#12622: After the dialog is displayed, always clear it out. If we
+        // don't, we won't be able to display another!
+        const auto cleanup = wil::scope_exit([this]() {
+            _dialog = nullptr;
+        });
         // IMPORTANT: This is necessary as documented in the ContentDialog MSDN docs.
         // Since we're hosting the dialog in a Xaml island, we need to connect it to the
         // xaml tree somehow.
@@ -424,6 +428,14 @@ namespace winrt::TerminalApp::implementation
         }
     }
 
+    // Method Description:
+    // - Returns true if there is no dialog currently being shown (meaning that we can show a dialog)
+    // - Returns false if there is a dialog currently being shown (meaning that we cannot show another dialog)
+    bool AppLogic::CanShowDialog()
+    {
+        return (_dialog == nullptr);
+    }
+
     // Method Description:
     // - Displays a dialog for errors found while loading or validating the
     //   settings. Uses the resources under the provided  title and content keys
diff --git a/src/cascadia/TerminalApp/AppLogic.h b/src/cascadia/TerminalApp/AppLogic.h
index e87f3d59bfe..39acf807f78 100644
--- a/src/cascadia/TerminalApp/AppLogic.h
+++ b/src/cascadia/TerminalApp/AppLogic.h
@@ -107,6 +107,7 @@ namespace winrt::TerminalApp::implementation
         bool GetShowTitleInTitlebar();
 
         winrt::Windows::Foundation::IAsyncOperation<winrt::Windows::UI::Xaml::Controls::ContentDialogResult> ShowDialog(winrt::Windows::UI::Xaml::Controls::ContentDialog dialog);
+        bool CanShowDialog();
         void DismissDialog();
 
         Windows::Foundation::Collections::IMapView<Microsoft::Terminal::Control::KeyChord, Microsoft::Terminal::Settings::Model::Command> GlobalHotkeys();
diff --git a/src/cascadia/TerminalApp/AppLogic.idl b/src/cascadia/TerminalApp/AppLogic.idl
index 32d413bbf40..da2bc57cc2f 100644
--- a/src/cascadia/TerminalApp/AppLogic.idl
+++ b/src/cascadia/TerminalApp/AppLogic.idl
@@ -19,6 +19,8 @@ namespace TerminalApp
         String WindowName { get; };
     };
 
+    // See IDialogPresenter and TerminalPage's DialogPresenter for more
+    // information.
     [default_interface] runtimeclass AppLogic : IDirectKeyListener, IDialogPresenter
     {
         AppLogic();
@@ -89,11 +91,6 @@ namespace TerminalApp
 
         Windows.Foundation.Collections.IMapView<Microsoft.Terminal.Control.KeyChord, Microsoft.Terminal.Settings.Model.Command> GlobalHotkeys();
 
-        // See IDialogPresenter and TerminalPage's DialogPresenter for more
-        // information.
-        Windows.Foundation.IAsyncOperation<Windows.UI.Xaml.Controls.ContentDialogResult> ShowDialog(Windows.UI.Xaml.Controls.ContentDialog dialog);
-        void DismissDialog();
-
         event Windows.Foundation.TypedEventHandler<Object, Windows.UI.Xaml.UIElement> SetTitleBarContent;
         event Windows.Foundation.TypedEventHandler<Object, String> TitleChanged;
         event Windows.Foundation.TypedEventHandler<Object, LastTabClosedEventArgs> LastTabClosed;
diff --git a/src/cascadia/TerminalApp/CommandPalette.xaml b/src/cascadia/TerminalApp/CommandPalette.xaml
index 29dbfb90094..11fa61807c0 100644
--- a/src/cascadia/TerminalApp/CommandPalette.xaml
+++ b/src/cascadia/TerminalApp/CommandPalette.xaml
@@ -145,7 +145,7 @@
                     <!--  xE70E is ChevronUp. Rotated 90 degrees, it's _ChevronRight_  -->
                     <FontIcon Grid.Column="2"
                               HorizontalAlignment="Right"
-                              FontFamily="Segoe MDL2 Assets"
+                              FontFamily="{ThemeResource SymbolThemeFontFamily}"
                               Glyph="&#xE70E;">
 
                         <FontIcon.RenderTransform>
@@ -199,20 +199,20 @@
                                 Orientation="Horizontal">
 
                         <FontIcon Margin="0,0,8,0"
-                                  FontFamily="Segoe MDL2 Assets"
+                                  FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                   FontSize="12"
                                   Glyph="&#xEA8F;"
                                   Visibility="{x:Bind Item.(local:TabPaletteItem.TabStatus).BellIndicator, Mode=OneWay}" />
 
                         <FontIcon Margin="0,0,8,0"
-                                  FontFamily="Segoe MDL2 Assets"
+                                  FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                   FontSize="12"
                                   Glyph="&#xE8A3;"
                                   Visibility="{x:Bind Item.(local:TabPaletteItem.TabStatus).IsPaneZoomed, Mode=OneWay}" />
 
                         <FontIcon x:Name="HeaderLockIcon"
                                   Margin="0,0,8,0"
-                                  FontFamily="Segoe MDL2 Assets"
+                                  FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                   FontSize="12"
                                   Glyph="&#xE72E;"
                                   Visibility="{x:Bind Item.(local:TabPaletteItem.TabStatus).IsReadOnlyActive, Mode=OneWay}" />
@@ -445,7 +445,7 @@
                         Background="Transparent"
                         Click="_moveBackButtonClicked"
                         ClickMode="Press">
-                    <FontIcon FontFamily="Segoe MDL2 Assets"
+                    <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}"
                               FontSize="12"
                               Glyph="&#xE76b;" />
                 </Button>
diff --git a/src/cascadia/TerminalApp/MinMaxCloseControl.xaml b/src/cascadia/TerminalApp/MinMaxCloseControl.xaml
index 684831586bc..cbfe7d9928e 100644
--- a/src/cascadia/TerminalApp/MinMaxCloseControl.xaml
+++ b/src/cascadia/TerminalApp/MinMaxCloseControl.xaml
@@ -247,9 +247,10 @@
             Click="_MaximizeClick"
             Style="{StaticResource CaptionButton}">
         <Button.Resources>
+            <!--  These paths are complicated, but taken directly from WinUI's WindowCaptionButton paths.  -->
             <ResourceDictionary>
-                <x:String x:Key="CaptionButtonPath">M 0 0 H 10 V 10 H 0 V 0</x:String>
-                <x:String x:Key="CaptionButtonPathWindowMaximized">M 0 2 h 8 v 8 h -8 v -8 M 2 2 v -2 h 8 v 8 h -2</x:String>
+                <x:String x:Key="CaptionButtonPath">M 1.516 -0.001 L 7.451 0.009 C 8.751 0.019 9 1 8.981 1.477 L 9.002 7.558 M 9.002 7.547 C 8.929 8.669 8 9 7.43 9.015 L 1.464 9.005 C 0.374 8.973 0 8 -0.004 7.484 L -0.004 1.477 C 0 1 0.415 0.009 1.527 -0.001</x:String>
+                <x:String x:Key="CaptionButtonPathWindowMaximized">M 1.516 -0.001 L 7.451 0.009 C 8.751 0.019 9 1 8.981 1.477 L 9.002 7.558 M 11 6 L 11 2 C 11 0 10 -2 8.011 -1.946 L 7.06 -1.969 L 3 -2 M 9.002 7.547 C 8.929 8.669 8 9 7.43 9.015 L 1.464 9.005 C 0.374 8.973 0 8 -0.004 7.484 L -0.004 1.477 C 0 1 0.415 0.009 1.527 -0.001</x:String>
             </ResourceDictionary>
         </Button.Resources>
         <ToolTipService.ToolTip>
diff --git a/src/cascadia/TerminalApp/SettingsTab.cpp b/src/cascadia/TerminalApp/SettingsTab.cpp
index b0319c4d4e4..38d1134ac74 100644
--- a/src/cascadia/TerminalApp/SettingsTab.cpp
+++ b/src/cascadia/TerminalApp/SettingsTab.cpp
@@ -82,7 +82,6 @@ namespace winrt::TerminalApp::implementation
 
         if (auto tab{ weakThis.get() })
         {
-            auto fontFamily = winrt::WUX::Media::FontFamily(L"Segoe MDL2 Assets");
             auto glyph = L"\xE713"; // This is the Setting icon (looks like a gear)
 
             // The TabViewItem Icon needs MUX while the IconSourceElement in the CommandPalette needs WUX...
diff --git a/src/cascadia/TerminalApp/TabBase.cpp b/src/cascadia/TerminalApp/TabBase.cpp
index 3994a76c38f..6cda2158ae3 100644
--- a/src/cascadia/TerminalApp/TabBase.cpp
+++ b/src/cascadia/TerminalApp/TabBase.cpp
@@ -90,7 +90,7 @@ namespace winrt::TerminalApp::implementation
         // Close
         Controls::MenuFlyoutItem closeTabMenuItem;
         Controls::FontIcon closeSymbol;
-        closeSymbol.FontFamily(Media::FontFamily{ L"Segoe MDL2 Assets" });
+        closeSymbol.FontFamily(Media::FontFamily{ L"Segoe Fluent Icons, Segoe MDL2 Assets" });
         closeSymbol.Glyph(L"\xE711");
 
         closeTabMenuItem.Click([weakThis](auto&&, auto&&) {
diff --git a/src/cascadia/TerminalApp/TabHeaderControl.xaml b/src/cascadia/TerminalApp/TabHeaderControl.xaml
index 1a69fdf785f..f24f9e0d2bf 100644
--- a/src/cascadia/TerminalApp/TabHeaderControl.xaml
+++ b/src/cascadia/TerminalApp/TabHeaderControl.xaml
@@ -48,19 +48,19 @@
         -->
         <FontIcon x:Name="HeaderBellIndicator"
                   Margin="0,0,8,0"
-                  FontFamily="Segoe MDL2 Assets"
+                  FontFamily="{ThemeResource SymbolThemeFontFamily}"
                   FontSize="12"
                   Glyph="&#xEA8F;"
                   Visibility="{x:Bind TabStatus.BellIndicator, Mode=OneWay}" />
         <FontIcon x:Name="HeaderZoomIcon"
                   Margin="0,0,8,0"
-                  FontFamily="Segoe MDL2 Assets"
+                  FontFamily="{ThemeResource SymbolThemeFontFamily}"
                   FontSize="12"
                   Glyph="&#xE8A3;"
                   Visibility="{x:Bind TabStatus.IsPaneZoomed, Mode=OneWay}" />
         <FontIcon x:Name="HeaderLockIcon"
                   Margin="0,0,8,0"
-                  FontFamily="Segoe MDL2 Assets"
+                  FontFamily="{ThemeResource SymbolThemeFontFamily}"
                   FontSize="12"
                   Glyph="&#xE72E;"
                   Visibility="{x:Bind TabStatus.IsReadOnlyActive, Mode=OneWay}" />
diff --git a/src/cascadia/TerminalApp/TabRowControl.xaml b/src/cascadia/TerminalApp/TabRowControl.xaml
index 0cce26ef313..b5d300aaefe 100644
--- a/src/cascadia/TerminalApp/TabRowControl.xaml
+++ b/src/cascadia/TerminalApp/TabRowControl.xaml
@@ -24,7 +24,7 @@
             <!--  EA18 is the "Shield" glyph  -->
             <FontIcon x:Uid="ElevationShield"
                       Margin="9,4,0,4"
-                      FontFamily="Segoe MDL2 Assets"
+                      FontFamily="{ThemeResource SymbolThemeFontFamily}"
                       FontSize="16"
                       Foreground="{ThemeResource SystemControlForegroundBaseMediumBrush}"
                       Glyph="&#xEA18;"
@@ -44,7 +44,7 @@
                              CornerRadius="{Binding Source={ThemeResource OverlayCornerRadius}, Converter={StaticResource TopCornerRadiusFilterConverter}}"
                              DragOver="OnNewTabButtonDragOver"
                              Drop="OnNewTabButtonDrop"
-                             FontFamily="Segoe MDL2 Assets"
+                             FontFamily="{ThemeResource SymbolThemeFontFamily}"
                              FontSize="12"
                              FontWeight="SemiLight"
                              UseLayoutRounding="true">
diff --git a/src/cascadia/TerminalApp/TerminalPage.cpp b/src/cascadia/TerminalApp/TerminalPage.cpp
index b7d4cb40b76..05389d2022f 100644
--- a/src/cascadia/TerminalApp/TerminalPage.cpp
+++ b/src/cascadia/TerminalApp/TerminalPage.cpp
@@ -158,7 +158,6 @@ namespace winrt::TerminalApp::implementation
         if (_settings.GlobalSettings().UseAcrylicInTabRow())
         {
             const auto res = Application::Current().Resources();
-
             const auto lightKey = winrt::box_value(L"Light");
             const auto darkKey = winrt::box_value(L"Dark");
             const auto tabViewBackgroundKey = winrt::box_value(L"TabViewBackground");
@@ -562,10 +561,7 @@ namespace winrt::TerminalApp::implementation
     //   Notes link, and privacy policy link.
     void TerminalPage::_ShowAboutDialog()
     {
-        if (auto presenter{ _dialogPresenter.get() })
-        {
-            presenter.ShowDialog(FindName(L"AboutDialog").try_as<WUX::Controls::ContentDialog>());
-        }
+        _ShowDialogHelper(L"AboutDialog");
     }
 
     winrt::hstring TerminalPage::ApplicationDisplayName()
@@ -585,6 +581,33 @@ namespace winrt::TerminalApp::implementation
         ShellExecute(nullptr, nullptr, currentPath.c_str(), nullptr, nullptr, SW_SHOW);
     }
 
+    // Method description:
+    // - Called when the user closes a content dialog
+    // - Tells the presenter to update its knowledge of whether there is a content dialog open
+    void TerminalPage::_DialogCloseClick(const IInspectable&,
+                                         const ContentDialogButtonClickEventArgs&)
+    {
+        if (auto presenter{ _dialogPresenter.get() })
+        {
+            presenter.DismissDialog();
+        }
+    }
+
+    // Method Description:
+    // - Helper to show a content dialog
+    // - We only open a content dialog if there isn't one open already
+    winrt::Windows::Foundation::IAsyncOperation<ContentDialogResult> TerminalPage::_ShowDialogHelper(const std::wstring_view& name)
+    {
+        if (auto presenter{ _dialogPresenter.get() })
+        {
+            if (presenter.CanShowDialog())
+            {
+                co_return co_await presenter.ShowDialog(FindName(name).try_as<WUX::Controls::ContentDialog>());
+            }
+        }
+        co_return ContentDialogResult::None;
+    }
+
     // Method Description:
     // - Displays a dialog to warn the user that they are about to close all open windows.
     //   Once the user clicks the OK button, shut down the application.
@@ -593,11 +616,7 @@ namespace winrt::TerminalApp::implementation
     //   when this is called, nothing happens. See _ShowDialog for details
     winrt::Windows::Foundation::IAsyncOperation<ContentDialogResult> TerminalPage::_ShowQuitDialog()
     {
-        if (auto presenter{ _dialogPresenter.get() })
-        {
-            co_return co_await presenter.ShowDialog(FindName(L"QuitDialog").try_as<WUX::Controls::ContentDialog>());
-        }
-        co_return ContentDialogResult::None;
+        return _ShowDialogHelper(L"QuitDialog");
     }
 
     // Method Description:
@@ -609,22 +628,14 @@ namespace winrt::TerminalApp::implementation
     //   when this is called, nothing happens. See _ShowDialog for details
     winrt::Windows::Foundation::IAsyncOperation<ContentDialogResult> TerminalPage::_ShowCloseWarningDialog()
     {
-        if (auto presenter{ _dialogPresenter.get() })
-        {
-            co_return co_await presenter.ShowDialog(FindName(L"CloseAllDialog").try_as<WUX::Controls::ContentDialog>());
-        }
-        co_return ContentDialogResult::None;
+        return _ShowDialogHelper(L"CloseAllDialog");
     }
 
     // Method Description:
     // - Displays a dialog for warnings found while closing the terminal tab marked as read-only
     winrt::Windows::Foundation::IAsyncOperation<ContentDialogResult> TerminalPage::_ShowCloseReadOnlyDialog()
     {
-        if (auto presenter{ _dialogPresenter.get() })
-        {
-            co_return co_await presenter.ShowDialog(FindName(L"CloseReadOnlyDialog").try_as<WUX::Controls::ContentDialog>());
-        }
-        co_return ContentDialogResult::None;
+        return _ShowDialogHelper(L"CloseReadOnlyDialog");
     }
 
     // Method Description:
@@ -637,11 +648,7 @@ namespace winrt::TerminalApp::implementation
     //   when this is called, nothing happens. See _ShowDialog for details
     winrt::Windows::Foundation::IAsyncOperation<ContentDialogResult> TerminalPage::_ShowMultiLinePasteWarningDialog()
     {
-        if (auto presenter{ _dialogPresenter.get() })
-        {
-            co_return co_await presenter.ShowDialog(FindName(L"MultiLinePasteDialog").try_as<WUX::Controls::ContentDialog>());
-        }
-        co_return ContentDialogResult::None;
+        return _ShowDialogHelper(L"MultiLinePasteDialog");
     }
 
     // Method Description:
@@ -652,11 +659,7 @@ namespace winrt::TerminalApp::implementation
     //   when this is called, nothing happens. See _ShowDialog for details
     winrt::Windows::Foundation::IAsyncOperation<ContentDialogResult> TerminalPage::_ShowLargePasteWarningDialog()
     {
-        if (auto presenter{ _dialogPresenter.get() })
-        {
-            co_return co_await presenter.ShowDialog(FindName(L"LargePasteDialog").try_as<WUX::Controls::ContentDialog>());
-        }
-        co_return ContentDialogResult::None;
+        return _ShowDialogHelper(L"LargePasteDialog");
     }
 
     // Method Description:
@@ -784,7 +787,7 @@ namespace winrt::TerminalApp::implementation
 
                 WUX::Controls::FontIcon commandPaletteIcon{};
                 commandPaletteIcon.Glyph(L"\xE945");
-                commandPaletteIcon.FontFamily(Media::FontFamily{ L"Segoe MDL2 Assets" });
+                commandPaletteIcon.FontFamily(Media::FontFamily{ L"Segoe Fluent Icons, Segoe MDL2 Assets" });
                 commandPaletteFlyout.Icon(commandPaletteIcon);
 
                 commandPaletteFlyout.Click({ this, &TerminalPage::_CommandPaletteButtonOnClick });
diff --git a/src/cascadia/TerminalApp/TerminalPage.h b/src/cascadia/TerminalApp/TerminalPage.h
index 1d8cf439060..29334269a16 100644
--- a/src/cascadia/TerminalApp/TerminalPage.h
+++ b/src/cascadia/TerminalApp/TerminalPage.h
@@ -204,12 +204,15 @@ namespace winrt::TerminalApp::implementation
         std::shared_ptr<Toast> _windowIdToast{ nullptr };
         std::shared_ptr<Toast> _windowRenameFailedToast{ nullptr };
 
+        winrt::Windows::Foundation::IAsyncOperation<winrt::Windows::UI::Xaml::Controls::ContentDialogResult> _ShowDialogHelper(const std::wstring_view& name);
+
         void _ShowAboutDialog();
         winrt::Windows::Foundation::IAsyncOperation<winrt::Windows::UI::Xaml::Controls::ContentDialogResult> _ShowQuitDialog();
         winrt::Windows::Foundation::IAsyncOperation<winrt::Windows::UI::Xaml::Controls::ContentDialogResult> _ShowCloseWarningDialog();
         winrt::Windows::Foundation::IAsyncOperation<winrt::Windows::UI::Xaml::Controls::ContentDialogResult> _ShowCloseReadOnlyDialog();
         winrt::Windows::Foundation::IAsyncOperation<winrt::Windows::UI::Xaml::Controls::ContentDialogResult> _ShowMultiLinePasteWarningDialog();
         winrt::Windows::Foundation::IAsyncOperation<winrt::Windows::UI::Xaml::Controls::ContentDialogResult> _ShowLargePasteWarningDialog();
+        void _DialogCloseClick(const IInspectable& sender, const Windows::UI::Xaml::Controls::ContentDialogButtonClickEventArgs& eventArgs);
 
         void _CreateNewTabFlyout();
         void _OpenNewTabDropdown();
diff --git a/src/cascadia/TerminalApp/TerminalPage.idl b/src/cascadia/TerminalApp/TerminalPage.idl
index 979483d0ad8..b726fcf23ef 100644
--- a/src/cascadia/TerminalApp/TerminalPage.idl
+++ b/src/cascadia/TerminalApp/TerminalPage.idl
@@ -14,6 +14,8 @@ namespace TerminalApp
     interface IDialogPresenter
     {
         Windows.Foundation.IAsyncOperation<Windows.UI.Xaml.Controls.ContentDialogResult> ShowDialog(Windows.UI.Xaml.Controls.ContentDialog dialog);
+        Boolean CanShowDialog();
+        void DismissDialog();
     };
 
     [default_interface] runtimeclass TerminalPage : Windows.UI.Xaml.Controls.Page, Windows.UI.Xaml.Data.INotifyPropertyChanged
diff --git a/src/cascadia/TerminalApp/TerminalPage.xaml b/src/cascadia/TerminalApp/TerminalPage.xaml
index ad2fe2a3257..5ca8ed25858 100644
--- a/src/cascadia/TerminalApp/TerminalPage.xaml
+++ b/src/cascadia/TerminalApp/TerminalPage.xaml
@@ -24,7 +24,8 @@
                              Grid.Row="0"
                              KeyUp="_KeyDownHandler" />
 
-        <StackPanel Grid.Row="1">
+        <StackPanel Grid.Row="1"
+                    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
             <mux:InfoBar x:Name="KeyboardServiceWarningInfoBar"
                          x:Load="False"
                          IsClosable="True"
@@ -74,6 +75,7 @@
         <ContentDialog x:Name="AboutDialog"
                        x:Uid="AboutDialog"
                        x:Load="False"
+                       CloseButtonClick="_DialogCloseClick"
                        DefaultButton="Close">
             <StackPanel Orientation="Vertical">
                 <TextBlock IsTextSelectionEnabled="True">
@@ -95,21 +97,25 @@
         <ContentDialog x:Name="QuitDialog"
                        x:Uid="QuitDialog"
                        x:Load="False"
+                       CloseButtonClick="_DialogCloseClick"
                        DefaultButton="Primary" />
 
         <ContentDialog x:Name="CloseAllDialog"
                        x:Uid="CloseAllDialog"
                        x:Load="False"
+                       CloseButtonClick="_DialogCloseClick"
                        DefaultButton="Primary" />
 
         <ContentDialog x:Name="CloseReadOnlyDialog"
                        x:Uid="CloseReadOnlyDialog"
                        x:Load="False"
+                       CloseButtonClick="_DialogCloseClick"
                        DefaultButton="Close" />
 
         <ContentDialog x:Name="MultiLinePasteDialog"
                        x:Uid="MultiLinePasteDialog"
                        x:Load="False"
+                       CloseButtonClick="_DialogCloseClick"
                        DefaultButton="Primary">
             <StackPanel>
                 <TextBlock x:Uid="MultiLineWarningText"
@@ -129,11 +135,13 @@
         <ContentDialog x:Name="LargePasteDialog"
                        x:Uid="LargePasteDialog"
                        x:Load="False"
+                       CloseButtonClick="_DialogCloseClick"
                        DefaultButton="Primary" />
 
         <ContentDialog x:Name="ControlNoticeDialog"
                        x:Uid="ControlNoticeDialog"
                        x:Load="False"
+                       CloseButtonClick="_DialogCloseClick"
                        DefaultButton="Primary">
             <TextBlock IsTextSelectionEnabled="True"
                        TextWrapping="WrapWholeWords">
@@ -144,6 +152,7 @@
         <ContentDialog x:Name="CouldNotOpenUriDialog"
                        x:Uid="CouldNotOpenUriDialog"
                        x:Load="False"
+                       CloseButtonClick="_DialogCloseClick"
                        DefaultButton="Primary">
             <TextBlock IsTextSelectionEnabled="True"
                        TextWrapping="WrapWholeWords">
diff --git a/src/cascadia/TerminalApp/TerminalTab.cpp b/src/cascadia/TerminalApp/TerminalTab.cpp
index eb223e0abb9..2621fb6b5fc 100644
--- a/src/cascadia/TerminalApp/TerminalTab.cpp
+++ b/src/cascadia/TerminalApp/TerminalTab.cpp
@@ -1210,7 +1210,7 @@ namespace winrt::TerminalApp::implementation
         // "Color..."
         Controls::MenuFlyoutItem chooseColorMenuItem;
         Controls::FontIcon colorPickSymbol;
-        colorPickSymbol.FontFamily(Media::FontFamily{ L"Segoe MDL2 Assets" });
+        colorPickSymbol.FontFamily(Media::FontFamily{ L"Segoe Fluent Icons, Segoe MDL2 Assets" });
         colorPickSymbol.Glyph(L"\xE790");
 
         chooseColorMenuItem.Click([weakThis](auto&&, auto&&) {
@@ -1241,7 +1241,7 @@ namespace winrt::TerminalApp::implementation
         {
             // "Rename Tab"
             Controls::FontIcon renameTabSymbol;
-            renameTabSymbol.FontFamily(Media::FontFamily{ L"Segoe MDL2 Assets" });
+            renameTabSymbol.FontFamily(Media::FontFamily{ L"Segoe Fluent Icons, Segoe MDL2 Assets" });
             renameTabSymbol.Glyph(L"\xE8AC"); // Rename
 
             renameTabMenuItem.Click([weakThis](auto&&, auto&&) {
@@ -1258,7 +1258,7 @@ namespace winrt::TerminalApp::implementation
         {
             // "Duplicate Tab"
             Controls::FontIcon duplicateTabSymbol;
-            duplicateTabSymbol.FontFamily(Media::FontFamily{ L"Segoe MDL2 Assets" });
+            duplicateTabSymbol.FontFamily(Media::FontFamily{ L"Segoe Fluent Icons, Segoe MDL2 Assets" });
             duplicateTabSymbol.Glyph(L"\xF5ED");
 
             duplicateTabMenuItem.Click([weakThis](auto&&, auto&&) {
@@ -1275,7 +1275,7 @@ namespace winrt::TerminalApp::implementation
         {
             // "Split Tab"
             Controls::FontIcon splitTabSymbol;
-            splitTabSymbol.FontFamily(Media::FontFamily{ L"Segoe MDL2 Assets" });
+            splitTabSymbol.FontFamily(Media::FontFamily{ L"Segoe Fluent Icons, Segoe MDL2 Assets" });
             splitTabSymbol.Glyph(L"\xF246"); // ViewDashboard
 
             splitTabMenuItem.Click([weakThis](auto&&, auto&&) {
@@ -1292,7 +1292,7 @@ namespace winrt::TerminalApp::implementation
         {
             // "Split Tab"
             Controls::FontIcon exportTabSymbol;
-            exportTabSymbol.FontFamily(Media::FontFamily{ L"Segoe MDL2 Assets" });
+            exportTabSymbol.FontFamily(Media::FontFamily{ L"Segoe Fluent Icons, Segoe MDL2 Assets" });
             exportTabSymbol.Glyph(L"\xE74E"); // Save
 
             exportTabMenuItem.Click([weakThis](auto&&, auto&&) {
diff --git a/src/cascadia/TerminalControl/SearchBoxControl.xaml b/src/cascadia/TerminalControl/SearchBoxControl.xaml
index a2fbf6e8969..e61bfbd6453 100644
--- a/src/cascadia/TerminalControl/SearchBoxControl.xaml
+++ b/src/cascadia/TerminalControl/SearchBoxControl.xaml
@@ -255,7 +255,7 @@
                       Click="GoBackwardClicked"
                       IsChecked="True"
                       Style="{StaticResource ToggleButtonStyle}">
-            <FontIcon FontFamily="Segoe MDL2 Assets"
+            <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}"
                       Glyph="&#xE74A;"
                       Style="{ThemeResource FontIconStyle}" />
         </ToggleButton>
@@ -263,7 +263,7 @@
                       x:Uid="SearchBox_SearchForwards"
                       Click="GoForwardClicked"
                       Style="{StaticResource ToggleButtonStyle}">
-            <FontIcon FontFamily="Segoe MDL2 Assets"
+            <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}"
                       Glyph="&#xE74B;"
                       Style="{ThemeResource FontIconStyle}" />
         </ToggleButton>
@@ -278,7 +278,7 @@
                 x:Uid="SearchBox_Close"
                 Click="CloseClick"
                 Style="{ThemeResource ButtonStyle}">
-            <FontIcon FontFamily="Segoe MDL2 Assets"
+            <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}"
                       FontSize="12"
                       Glyph="&#xE711;" />
         </Button>
diff --git a/src/cascadia/TerminalControl/TermControl.xaml b/src/cascadia/TerminalControl/TermControl.xaml
index 663ccf7ce1a..589f9d4c3f7 100644
--- a/src/cascadia/TerminalControl/TermControl.xaml
+++ b/src/cascadia/TerminalControl/TermControl.xaml
@@ -5,6 +5,8 @@
 <UserControl x:Class="Microsoft.Terminal.Control.TermControl"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:contract7NotPresent="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractNotPresent(Windows.Foundation.UniversalApiContract,7)"
+             xmlns:contract7Present="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract,7)"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:local="using:Microsoft.Terminal.Control"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
@@ -27,6 +29,1144 @@
              TabNavigation="Cycle"
              Tapped="_TappedHandler"
              mc:Ignorable="d">
+    <UserControl.Resources>
+
+        <!--
+            BODGY: ControlsV2 changed the size of the scrollbars from 16dips to
+            12dips. This is harder for folks to hit with the mouse, and isn't
+            consistent with the rest of the scrollbars on the platform (as much
+            as they can be).
+            
+            To work around this, we have to entirely copy the template for the
+            ScrollBar into our XAML file. We're then also re-defining
+            ScrollBarSize here to 16, so that the new template will pick up on
+            the new value.
+            
+            This is kinda a pain, and we have to be careful to be sure to ingest
+            an updated version of the template any time we update MUX. The
+            latest ControlsV2 version of the template can be found at:
+            https://github.com/microsoft/microsoft-ui-xaml/blob/main/dev/CommonStyles/ScrollBar_themeresources.xaml#L218
+            
+            We're also removing the corner radius, cause that should be flush
+            with the top of the window above the TermControl.
+            
+            We're also planning on making this adjustable in the future
+            (GH#9218), where we might need this anyways.
+        -->
+
+        <x:Double x:Key="ScrollBarSize">16</x:Double>
+        <CornerRadius x:Key="ScrollBarCornerRadius">0</CornerRadius>
+
+        <Style x:Key="ForkedScrollbarTemplate"
+               TargetType="ScrollBar">
+            <Setter Property="MinWidth" Value="{StaticResource ScrollBarSize}" />
+            <Setter Property="MinHeight" Value="{StaticResource ScrollBarSize}" />
+            <Setter Property="Background" Value="{ThemeResource ScrollBarBackground}" />
+            <Setter Property="Foreground" Value="{ThemeResource ScrollBarForeground}" />
+            <Setter Property="BorderBrush" Value="{ThemeResource ScrollBarBorderBrush}" />
+            <Setter Property="IsTabStop" Value="False" />
+            <Setter Property="CornerRadius" Value="{ThemeResource ScrollBarCornerRadius}" />
+            <Setter Property="Template">
+                <Setter.Value>
+                    <ControlTemplate TargetType="ScrollBar">
+                        <Grid x:Name="Root">
+                            <Grid.Resources>
+                                <ControlTemplate x:Key="RepeatButtonTemplate"
+                                                 TargetType="RepeatButton">
+                                    <Grid x:Name="Root"
+                                          Background="Transparent">
+                                        <VisualStateManager.VisualStateGroups>
+                                            <VisualStateGroup x:Name="CommonStates">
+                                                <VisualState x:Name="Normal" />
+                                            </VisualStateGroup>
+                                        </VisualStateManager.VisualStateGroups>
+                                    </Grid>
+                                </ControlTemplate>
+                                <ControlTemplate x:Key="HorizontalIncrementTemplate"
+                                                 TargetType="RepeatButton">
+                                    <Grid x:Name="Root"
+                                          Padding="{ThemeResource ScrollBarHorizontalIncreaseMargin}"
+                                          Background="{ThemeResource ScrollBarButtonBackground}"
+                                          BorderBrush="{ThemeResource ScrollBarButtonBorderBrush}">
+                                        <FontIcon x:Name="Arrow"
+                                                  FontFamily="{ThemeResource SymbolThemeFontFamily}"
+                                                  FontSize="{StaticResource ScrollBarButtonArrowIconFontSize}"
+                                                  Foreground="{ThemeResource ScrollBarButtonArrowForeground}"
+                                                  Glyph="&#xEDDA;"
+                                                  MirroredWhenRightToLeft="True"
+                                                  RenderTransformOrigin="0.5, 0.5">
+                                            <FontIcon.RenderTransform>
+                                                <ScaleTransform x:Name="ScaleTransform" ScaleX="1" ScaleY="1" />
+                                            </FontIcon.RenderTransform>
+                                        </FontIcon>
+                                        <VisualStateManager.VisualStateGroups>
+                                            <VisualStateGroup x:Name="CommonStates">
+                                                <VisualState x:Name="Normal" />
+                                                <VisualState x:Name="PointerOver">
+                                                    <Storyboard>
+                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
+                                                                                       Storyboard.TargetProperty="Foreground">
+                                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                                    Value="{ThemeResource ScrollBarButtonArrowForegroundPointerOver}" />
+                                                        </ObjectAnimationUsingKeyFrames>
+                                                    </Storyboard>
+                                                </VisualState>
+                                                <VisualState x:Name="Pressed">
+                                                    <Storyboard>
+                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
+                                                                                       Storyboard.TargetProperty="Foreground">
+                                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                                    Value="{ThemeResource ScrollBarButtonArrowForegroundPressed}" />
+                                                        </ObjectAnimationUsingKeyFrames>
+                                                        <DoubleAnimationUsingKeyFrames RepeatBehavior="Forever"
+                                                                                       Storyboard.TargetName="ScaleTransform"
+                                                                                       Storyboard.TargetProperty="ScaleX">
+                                                            <DiscreteDoubleKeyFrame KeyTime="0:0:0.016"
+                                                                                    Value="{ThemeResource ScrollBarButtonArrowScalePressed}" />
+                                                            <DiscreteDoubleKeyFrame KeyTime="0:0:30"
+                                                                                    Value="{ThemeResource ScrollBarButtonArrowScalePressed}" />
+                                                        </DoubleAnimationUsingKeyFrames>
+                                                        <DoubleAnimationUsingKeyFrames RepeatBehavior="Forever"
+                                                                                       Storyboard.TargetName="ScaleTransform"
+                                                                                       Storyboard.TargetProperty="ScaleY">
+                                                            <DiscreteDoubleKeyFrame KeyTime="0:0:0.016"
+                                                                                    Value="{ThemeResource ScrollBarButtonArrowScalePressed}" />
+                                                            <DiscreteDoubleKeyFrame KeyTime="0:0:30"
+                                                                                    Value="{ThemeResource ScrollBarButtonArrowScalePressed}" />
+                                                        </DoubleAnimationUsingKeyFrames>
+                                                    </Storyboard>
+                                                </VisualState>
+                                                <VisualState x:Name="Disabled">
+                                                    <Storyboard>
+                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
+                                                                                       Storyboard.TargetProperty="Foreground">
+                                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                                    Value="{ThemeResource ScrollBarButtonArrowForegroundDisabled}" />
+                                                        </ObjectAnimationUsingKeyFrames>
+                                                    </Storyboard>
+                                                </VisualState>
+                                            </VisualStateGroup>
+                                        </VisualStateManager.VisualStateGroups>
+                                    </Grid>
+                                </ControlTemplate>
+                                <ControlTemplate x:Key="HorizontalDecrementTemplate"
+                                                 TargetType="RepeatButton">
+                                    <Grid x:Name="Root"
+                                          Padding="{ThemeResource ScrollBarHorizontalDecreaseMargin}"
+                                          Background="{ThemeResource ScrollBarButtonBackground}"
+                                          BorderBrush="{ThemeResource ScrollBarButtonBorderBrush}">
+                                        <FontIcon x:Name="Arrow"
+                                                  FontFamily="{ThemeResource SymbolThemeFontFamily}"
+                                                  FontSize="{StaticResource ScrollBarButtonArrowIconFontSize}"
+                                                  Foreground="{ThemeResource ScrollBarButtonArrowForeground}"
+                                                  Glyph="&#xEDD9;"
+                                                  MirroredWhenRightToLeft="True"
+                                                  RenderTransformOrigin="0.5, 0.5">
+                                            <FontIcon.RenderTransform>
+                                                <ScaleTransform x:Name="ScaleTransform" ScaleX="1" ScaleY="1" />
+                                            </FontIcon.RenderTransform>
+                                        </FontIcon>
+                                        <VisualStateManager.VisualStateGroups>
+                                            <VisualStateGroup x:Name="CommonStates">
+                                                <VisualState x:Name="Normal" />
+                                                <VisualState x:Name="PointerOver">
+                                                    <Storyboard>
+                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
+                                                                                       Storyboard.TargetProperty="Foreground">
+                                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                                    Value="{ThemeResource ScrollBarButtonArrowForegroundPointerOver}" />
+                                                        </ObjectAnimationUsingKeyFrames>
+                                                    </Storyboard>
+                                                </VisualState>
+                                                <VisualState x:Name="Pressed">
+                                                    <Storyboard>
+                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
+                                                                                       Storyboard.TargetProperty="Foreground">
+                                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                                    Value="{ThemeResource ScrollBarButtonArrowForegroundPressed}" />
+                                                        </ObjectAnimationUsingKeyFrames>
+                                                        <DoubleAnimationUsingKeyFrames RepeatBehavior="Forever"
+                                                                                       Storyboard.TargetName="ScaleTransform"
+                                                                                       Storyboard.TargetProperty="ScaleX">
+                                                            <DiscreteDoubleKeyFrame KeyTime="0:0:0.016"
+                                                                                    Value="{ThemeResource ScrollBarButtonArrowScalePressed}" />
+                                                            <DiscreteDoubleKeyFrame KeyTime="0:0:30"
+                                                                                    Value="{ThemeResource ScrollBarButtonArrowScalePressed}" />
+                                                        </DoubleAnimationUsingKeyFrames>
+                                                        <DoubleAnimationUsingKeyFrames RepeatBehavior="Forever"
+                                                                                       Storyboard.TargetName="ScaleTransform"
+                                                                                       Storyboard.TargetProperty="ScaleY">
+                                                            <DiscreteDoubleKeyFrame KeyTime="0:0:0.016"
+                                                                                    Value="{ThemeResource ScrollBarButtonArrowScalePressed}" />
+                                                            <DiscreteDoubleKeyFrame KeyTime="0:0:30"
+                                                                                    Value="{ThemeResource ScrollBarButtonArrowScalePressed}" />
+                                                        </DoubleAnimationUsingKeyFrames>
+                                                    </Storyboard>
+                                                </VisualState>
+                                                <VisualState x:Name="Disabled">
+                                                    <Storyboard>
+                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
+                                                                                       Storyboard.TargetProperty="Foreground">
+                                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                                    Value="{ThemeResource ScrollBarButtonArrowForegroundDisabled}" />
+                                                        </ObjectAnimationUsingKeyFrames>
+                                                    </Storyboard>
+                                                </VisualState>
+                                            </VisualStateGroup>
+                                        </VisualStateManager.VisualStateGroups>
+                                    </Grid>
+                                </ControlTemplate>
+                                <ControlTemplate x:Key="VerticalIncrementTemplate"
+                                                 TargetType="RepeatButton">
+                                    <Grid x:Name="Root"
+                                          Padding="{ThemeResource ScrollBarVerticalIncreaseMargin}"
+                                          Background="{ThemeResource ScrollBarButtonBackground}"
+                                          BorderBrush="{ThemeResource ScrollBarButtonBorderBrush}">
+                                        <FontIcon x:Name="Arrow"
+                                                  FontFamily="{ThemeResource SymbolThemeFontFamily}"
+                                                  FontSize="{StaticResource ScrollBarButtonArrowIconFontSize}"
+                                                  Foreground="{ThemeResource ScrollBarButtonArrowForeground}"
+                                                  Glyph="&#xEDDC;"
+                                                  RenderTransformOrigin="0.5, 0.5">
+                                            <FontIcon.RenderTransform>
+                                                <ScaleTransform x:Name="ScaleTransform" ScaleX="1" ScaleY="1" />
+                                            </FontIcon.RenderTransform>
+                                        </FontIcon>
+                                        <VisualStateManager.VisualStateGroups>
+                                            <VisualStateGroup x:Name="CommonStates">
+                                                <VisualState x:Name="Normal" />
+                                                <VisualState x:Name="PointerOver">
+                                                    <Storyboard>
+                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
+                                                                                       Storyboard.TargetProperty="Foreground">
+                                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                                    Value="{ThemeResource ScrollBarButtonArrowForegroundPointerOver}" />
+                                                        </ObjectAnimationUsingKeyFrames>
+                                                    </Storyboard>
+                                                </VisualState>
+                                                <VisualState x:Name="Pressed">
+                                                    <Storyboard>
+                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
+                                                                                       Storyboard.TargetProperty="Foreground">
+                                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                                    Value="{ThemeResource ScrollBarButtonArrowForegroundPressed}" />
+                                                        </ObjectAnimationUsingKeyFrames>
+                                                        <DoubleAnimationUsingKeyFrames RepeatBehavior="Forever"
+                                                                                       Storyboard.TargetName="ScaleTransform"
+                                                                                       Storyboard.TargetProperty="ScaleX">
+                                                            <DiscreteDoubleKeyFrame KeyTime="0:0:0.016"
+                                                                                    Value="{ThemeResource ScrollBarButtonArrowScalePressed}" />
+                                                            <DiscreteDoubleKeyFrame KeyTime="0:0:30"
+                                                                                    Value="{ThemeResource ScrollBarButtonArrowScalePressed}" />
+                                                        </DoubleAnimationUsingKeyFrames>
+                                                        <DoubleAnimationUsingKeyFrames RepeatBehavior="Forever"
+                                                                                       Storyboard.TargetName="ScaleTransform"
+                                                                                       Storyboard.TargetProperty="ScaleY">
+                                                            <DiscreteDoubleKeyFrame KeyTime="0:0:0.016"
+                                                                                    Value="{ThemeResource ScrollBarButtonArrowScalePressed}" />
+                                                            <DiscreteDoubleKeyFrame KeyTime="0:0:30"
+                                                                                    Value="{ThemeResource ScrollBarButtonArrowScalePressed}" />
+                                                        </DoubleAnimationUsingKeyFrames>
+                                                    </Storyboard>
+                                                </VisualState>
+                                                <VisualState x:Name="Disabled">
+                                                    <Storyboard>
+                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
+                                                                                       Storyboard.TargetProperty="Foreground">
+                                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                                    Value="{ThemeResource ScrollBarButtonArrowForegroundDisabled}" />
+                                                        </ObjectAnimationUsingKeyFrames>
+                                                    </Storyboard>
+                                                </VisualState>
+                                            </VisualStateGroup>
+                                        </VisualStateManager.VisualStateGroups>
+                                    </Grid>
+                                </ControlTemplate>
+                                <ControlTemplate x:Key="VerticalDecrementTemplate"
+                                                 TargetType="RepeatButton">
+                                    <Grid x:Name="Root"
+                                          Padding="{ThemeResource ScrollBarVerticalDecreaseMargin}"
+                                          Background="{ThemeResource ScrollBarButtonBackground}"
+                                          BorderBrush="{ThemeResource ScrollBarButtonBorderBrush}">
+                                        <FontIcon x:Name="Arrow"
+                                                  FontFamily="{ThemeResource SymbolThemeFontFamily}"
+                                                  FontSize="{StaticResource ScrollBarButtonArrowIconFontSize}"
+                                                  Foreground="{ThemeResource ScrollBarButtonArrowForeground}"
+                                                  Glyph="&#xEDDB;"
+                                                  RenderTransformOrigin="0.5, 0.5">
+                                            <FontIcon.RenderTransform>
+                                                <ScaleTransform x:Name="ScaleTransform" ScaleX="1" ScaleY="1" />
+                                            </FontIcon.RenderTransform>
+                                        </FontIcon>
+                                        <VisualStateManager.VisualStateGroups>
+                                            <VisualStateGroup x:Name="CommonStates">
+                                                <VisualState x:Name="Normal" />
+                                                <VisualState x:Name="PointerOver">
+                                                    <Storyboard>
+                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
+                                                                                       Storyboard.TargetProperty="Foreground">
+                                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                                    Value="{ThemeResource ScrollBarButtonArrowForegroundPointerOver}" />
+                                                        </ObjectAnimationUsingKeyFrames>
+                                                    </Storyboard>
+                                                </VisualState>
+                                                <VisualState x:Name="Pressed">
+                                                    <Storyboard>
+                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
+                                                                                       Storyboard.TargetProperty="Foreground">
+                                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                                    Value="{ThemeResource ScrollBarButtonArrowForegroundPressed}" />
+                                                        </ObjectAnimationUsingKeyFrames>
+                                                        <DoubleAnimationUsingKeyFrames RepeatBehavior="Forever"
+                                                                                       Storyboard.TargetName="ScaleTransform"
+                                                                                       Storyboard.TargetProperty="ScaleX">
+                                                            <DiscreteDoubleKeyFrame KeyTime="0:0:0.016"
+                                                                                    Value="{ThemeResource ScrollBarButtonArrowScalePressed}" />
+                                                            <DiscreteDoubleKeyFrame KeyTime="0:0:30"
+                                                                                    Value="{ThemeResource ScrollBarButtonArrowScalePressed}" />
+                                                        </DoubleAnimationUsingKeyFrames>
+                                                        <DoubleAnimationUsingKeyFrames RepeatBehavior="Forever"
+                                                                                       Storyboard.TargetName="ScaleTransform"
+                                                                                       Storyboard.TargetProperty="ScaleY">
+                                                            <DiscreteDoubleKeyFrame KeyTime="0:0:0.016"
+                                                                                    Value="{ThemeResource ScrollBarButtonArrowScalePressed}" />
+                                                            <DiscreteDoubleKeyFrame KeyTime="0:0:30"
+                                                                                    Value="{ThemeResource ScrollBarButtonArrowScalePressed}" />
+                                                        </DoubleAnimationUsingKeyFrames>
+                                                    </Storyboard>
+                                                </VisualState>
+                                                <VisualState x:Name="Disabled">
+                                                    <Storyboard>
+                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
+                                                                                       Storyboard.TargetProperty="Foreground">
+                                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                                    Value="{ThemeResource ScrollBarButtonArrowForegroundDisabled}" />
+                                                        </ObjectAnimationUsingKeyFrames>
+                                                    </Storyboard>
+                                                </VisualState>
+                                            </VisualStateGroup>
+                                        </VisualStateManager.VisualStateGroups>
+                                    </Grid>
+                                </ControlTemplate>
+                                <ControlTemplate x:Key="VerticalThumbTemplate"
+                                                 TargetType="Thumb">
+                                    <Rectangle x:Name="ThumbVisual"
+                                               contract7NotPresent:RadiusX="{Binding Source={ThemeResource ScrollBarCornerRadius}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
+                                               contract7NotPresent:RadiusY="{Binding Source={ThemeResource ScrollBarCornerRadius}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}"
+                                               contract7Present:RadiusX="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
+                                               contract7Present:RadiusY="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}"
+                                               Fill="{TemplateBinding Background}"
+                                               Stroke="{TemplateBinding BorderBrush}"
+                                               StrokeThickness="{ThemeResource ScrollBarThumbStrokeThickness}">
+                                        <VisualStateManager.VisualStateGroups>
+                                            <VisualStateGroup x:Name="CommonStates">
+                                                <VisualState x:Name="Normal" />
+                                                <VisualState x:Name="Disabled">
+                                                    <Storyboard>
+                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ThumbVisual"
+                                                                                       Storyboard.TargetProperty="Fill">
+                                                            <DiscreteObjectKeyFrame KeyTime="{StaticResource ScrollBarColorChangeDuration}"
+                                                                                    Value="{ThemeResource ScrollBarThumbFillDisabled}" />
+                                                        </ObjectAnimationUsingKeyFrames>
+                                                        <DoubleAnimation Storyboard.TargetName="ThumbVisual"
+                                                                         Storyboard.TargetProperty="Opacity"
+                                                                         To="0"
+                                                                         Duration="{StaticResource ScrollBarOpacityChangeDuration}" />
+                                                    </Storyboard>
+                                                </VisualState>
+                                            </VisualStateGroup>
+                                        </VisualStateManager.VisualStateGroups>
+                                    </Rectangle>
+                                </ControlTemplate>
+                                <ControlTemplate x:Key="HorizontalThumbTemplate"
+                                                 TargetType="Thumb">
+                                    <Rectangle x:Name="ThumbVisual"
+                                               contract7NotPresent:RadiusX="{Binding Source={ThemeResource ScrollBarCornerRadius}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
+                                               contract7NotPresent:RadiusY="{Binding Source={ThemeResource ScrollBarCornerRadius}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}"
+                                               contract7Present:RadiusX="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
+                                               contract7Present:RadiusY="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}"
+                                               Fill="{TemplateBinding Background}"
+                                               Stroke="{TemplateBinding BorderBrush}"
+                                               StrokeThickness="{ThemeResource ScrollBarThumbStrokeThickness}">
+                                        <VisualStateManager.VisualStateGroups>
+                                            <VisualStateGroup x:Name="CommonStates">
+                                                <VisualState x:Name="Normal" />
+                                                <VisualState x:Name="Disabled">
+                                                    <Storyboard>
+                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ThumbVisual"
+                                                                                       Storyboard.TargetProperty="Fill">
+                                                            <DiscreteObjectKeyFrame KeyTime="{StaticResource ScrollBarColorChangeDuration}"
+                                                                                    Value="{ThemeResource ScrollBarThumbFillDisabled}" />
+                                                        </ObjectAnimationUsingKeyFrames>
+                                                        <DoubleAnimation Storyboard.TargetName="ThumbVisual"
+                                                                         Storyboard.TargetProperty="Opacity"
+                                                                         To="0"
+                                                                         Duration="{StaticResource ScrollBarOpacityChangeDuration}" />
+                                                    </Storyboard>
+                                                </VisualState>
+                                            </VisualStateGroup>
+                                        </VisualStateManager.VisualStateGroups>
+                                    </Rectangle>
+                                </ControlTemplate>
+                            </Grid.Resources>
+                            <Grid x:Name="HorizontalRoot"
+                                  contract7Present:CornerRadius="{TemplateBinding CornerRadius}"
+                                  Background="{TemplateBinding Background}"
+                                  BorderBrush="{TemplateBinding BorderBrush}"
+                                  IsHitTestVisible="False">
+                                <Grid.ColumnDefinitions>
+                                    <ColumnDefinition Width="Auto" />
+                                    <ColumnDefinition Width="Auto" />
+                                    <ColumnDefinition Width="Auto" />
+                                    <ColumnDefinition Width="*" />
+                                    <ColumnDefinition Width="Auto" />
+                                </Grid.ColumnDefinitions>
+                                <Rectangle x:Name="HorizontalTrackRect"
+                                           Grid.ColumnSpan="5"
+                                           Margin="0"
+                                           contract7NotPresent:RadiusX="{Binding Source={ThemeResource ScrollBarCornerRadius}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter2x}}"
+                                           contract7NotPresent:RadiusY="{Binding Source={ThemeResource ScrollBarCornerRadius}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter2x}}"
+                                           contract7Present:RadiusX="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter2x}}"
+                                           contract7Present:RadiusY="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter2x}}"
+                                           Fill="{ThemeResource ScrollBarTrackFill}"
+                                           Opacity="0"
+                                           Stroke="{ThemeResource ScrollBarTrackStroke}"
+                                           StrokeThickness="{ThemeResource ScrollBarTrackBorderThemeThickness}" />
+                                <RepeatButton x:Name="HorizontalSmallDecrease"
+                                              Grid.Column="0"
+                                              Width="{StaticResource ScrollBarSize}"
+                                              MinHeight="{StaticResource ScrollBarSize}"
+                                              Padding="{ThemeResource ScrollBarHorizontalDecreaseMargin}"
+                                              VerticalAlignment="Center"
+                                              AllowFocusOnInteraction="False"
+                                              Interval="50"
+                                              IsTabStop="False"
+                                              Opacity="0"
+                                              Template="{StaticResource HorizontalDecrementTemplate}" />
+                                <RepeatButton x:Name="HorizontalLargeDecrease"
+                                              Grid.Column="1"
+                                              Width="0"
+                                              HorizontalAlignment="Stretch"
+                                              VerticalAlignment="Stretch"
+                                              AllowFocusOnInteraction="False"
+                                              Interval="50"
+                                              IsTabStop="False"
+                                              Opacity="0"
+                                              Template="{StaticResource RepeatButtonTemplate}" />
+                                <Thumb x:Name="HorizontalThumb"
+                                       Grid.Column="2"
+                                       Height="{StaticResource ScrollBarHorizontalThumbMinHeight}"
+                                       MinWidth="{StaticResource ScrollBarHorizontalThumbMinWidth}"
+                                       contract7Present:CornerRadius="{TemplateBinding CornerRadius}"
+                                       AutomationProperties.AccessibilityView="Raw"
+                                       Background="{ThemeResource ScrollBarPanningThumbBackground}"
+                                       BorderBrush="{ThemeResource ScrollBarThumbBorderBrush}"
+                                       Opacity="0"
+                                       RenderTransformOrigin="0.5,1"
+                                       Template="{StaticResource HorizontalThumbTemplate}">
+                                    <Thumb.RenderTransform>
+                                        <TranslateTransform x:Name="HorizontalThumbTransform" Y="{StaticResource ScrollBarThumbOffset}" />
+                                    </Thumb.RenderTransform>
+                                </Thumb>
+
+                                <RepeatButton x:Name="HorizontalLargeIncrease"
+                                              Grid.Column="3"
+                                              HorizontalAlignment="Stretch"
+                                              VerticalAlignment="Stretch"
+                                              AllowFocusOnInteraction="False"
+                                              Interval="50"
+                                              IsTabStop="False"
+                                              Opacity="0"
+                                              Template="{StaticResource RepeatButtonTemplate}" />
+                                <RepeatButton x:Name="HorizontalSmallIncrease"
+                                              Grid.Column="4"
+                                              Width="{StaticResource ScrollBarSize}"
+                                              MinHeight="{StaticResource ScrollBarSize}"
+                                              Padding="{ThemeResource ScrollBarHorizontalIncreaseMargin}"
+                                              VerticalAlignment="Center"
+                                              AllowFocusOnInteraction="False"
+                                              Interval="50"
+                                              IsTabStop="False"
+                                              Opacity="0"
+                                              Template="{StaticResource HorizontalIncrementTemplate}" />
+                            </Grid>
+                            <Grid x:Name="HorizontalPanningRoot"
+                                  MinWidth="24"
+                                  contract7Present:CornerRadius="{TemplateBinding CornerRadius}"
+                                  Opacity="0"
+                                  Visibility="Collapsed">
+                                <Border x:Name="HorizontalPanningThumb"
+                                        Height="2"
+                                        MinWidth="32"
+                                        Margin="0,2,0,2"
+                                        HorizontalAlignment="Left"
+                                        VerticalAlignment="Bottom"
+                                        Background="{ThemeResource ScrollBarPanningThumbBackground}"
+                                        BorderThickness="0" />
+                            </Grid>
+                            <Grid x:Name="VerticalRoot"
+                                  Background="{TemplateBinding Background}"
+                                  BorderBrush="{TemplateBinding BorderBrush}"
+                                  IsHitTestVisible="False">
+
+                                <Grid.RowDefinitions>
+                                    <RowDefinition Height="Auto" />
+                                    <RowDefinition Height="Auto" />
+                                    <RowDefinition Height="Auto" />
+                                    <RowDefinition Height="*" />
+                                    <RowDefinition Height="Auto" />
+                                </Grid.RowDefinitions>
+                                <Rectangle x:Name="VerticalTrackRect"
+                                           Grid.RowSpan="5"
+                                           Margin="0"
+                                           contract7NotPresent:RadiusX="{Binding Source={ThemeResource ScrollBarCornerRadius}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter2x}}"
+                                           contract7NotPresent:RadiusY="{Binding Source={ThemeResource ScrollBarCornerRadius}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter2x}}"
+                                           contract7Present:RadiusX="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter2x}}"
+                                           contract7Present:RadiusY="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter2x}}"
+                                           Fill="{ThemeResource ScrollBarTrackFill}"
+                                           Opacity="0"
+                                           Stroke="{ThemeResource ScrollBarTrackStroke}"
+                                           StrokeThickness="{ThemeResource ScrollBarTrackBorderThemeThickness}" />
+                                <RepeatButton x:Name="VerticalSmallDecrease"
+                                              Grid.Row="0"
+                                              Height="{StaticResource ScrollBarSize}"
+                                              MinWidth="{StaticResource ScrollBarSize}"
+                                              Padding="{ThemeResource ScrollBarVerticalDecreaseMargin}"
+                                              HorizontalAlignment="Center"
+                                              Interval="50"
+                                              IsTabStop="False"
+                                              Opacity="0"
+                                              Template="{StaticResource VerticalDecrementTemplate}" />
+                                <RepeatButton x:Name="VerticalLargeDecrease"
+                                              Grid.Row="1"
+                                              Height="0"
+                                              HorizontalAlignment="Stretch"
+                                              VerticalAlignment="Stretch"
+                                              AllowFocusOnInteraction="False"
+                                              Interval="50"
+                                              IsTabStop="False"
+                                              Opacity="0"
+                                              Template="{StaticResource RepeatButtonTemplate}" />
+                                <Thumb x:Name="VerticalThumb"
+                                       Grid.Row="2"
+                                       Width="{StaticResource ScrollBarVerticalThumbMinWidth}"
+                                       MinHeight="{StaticResource ScrollBarVerticalThumbMinHeight}"
+                                       contract7Present:CornerRadius="{TemplateBinding CornerRadius}"
+                                       AutomationProperties.AccessibilityView="Raw"
+                                       Background="{ThemeResource ScrollBarPanningThumbBackground}"
+                                       BorderBrush="{ThemeResource ScrollBarThumbBorderBrush}"
+                                       Opacity="0"
+                                       RenderTransformOrigin="1,0.5"
+                                       Template="{StaticResource VerticalThumbTemplate}">
+                                    <Thumb.RenderTransform>
+                                        <TranslateTransform x:Name="VerticalThumbTransform" X="{StaticResource ScrollBarThumbOffset}" />
+                                    </Thumb.RenderTransform>
+                                </Thumb>
+
+                                <RepeatButton x:Name="VerticalLargeIncrease"
+                                              Grid.Row="3"
+                                              HorizontalAlignment="Stretch"
+                                              VerticalAlignment="Stretch"
+                                              AllowFocusOnInteraction="False"
+                                              Interval="50"
+                                              IsTabStop="False"
+                                              Opacity="0"
+                                              Template="{StaticResource RepeatButtonTemplate}" />
+                                <RepeatButton x:Name="VerticalSmallIncrease"
+                                              Grid.Row="4"
+                                              Height="{StaticResource ScrollBarSize}"
+                                              MinWidth="{StaticResource ScrollBarSize}"
+                                              Padding="{ThemeResource ScrollBarVerticalIncreaseMargin}"
+                                              HorizontalAlignment="Center"
+                                              Interval="50"
+                                              IsTabStop="False"
+                                              Opacity="0"
+                                              Template="{StaticResource VerticalIncrementTemplate}" />
+                            </Grid>
+                            <Grid x:Name="VerticalPanningRoot"
+                                  MinHeight="24"
+                                  contract7Present:CornerRadius="{TemplateBinding CornerRadius}"
+                                  Opacity="0"
+                                  Visibility="Collapsed">
+                                <Border x:Name="VerticalPanningThumb"
+                                        Width="2"
+                                        MinHeight="32"
+                                        Margin="2,0,2,0"
+                                        HorizontalAlignment="Right"
+                                        VerticalAlignment="Top"
+                                        Background="{ThemeResource ScrollBarPanningThumbBackground}"
+                                        BorderThickness="0" />
+                            </Grid>
+
+                            <VisualStateManager.VisualStateGroups>
+                                <VisualStateGroup x:Name="CommonStates">
+                                    <VisualState x:Name="Normal" />
+                                    <VisualState x:Name="Disabled">
+                                        <VisualState.Setters>
+                                            <Setter Target="Root.Background" Value="{ThemeResource ScrollBarBackgroundDisabled}" />
+                                            <Setter Target="Root.BorderBrush" Value="{ThemeResource ScrollBarBorderBrushDisabled}" />
+                                            <Setter Target="Root.Opacity" Value="0.5" />
+                                            <Setter Target="HorizontalTrackRect.Stroke" Value="{ThemeResource ScrollBarTrackStrokeDisabled}" />
+                                            <Setter Target="VerticalTrackRect.Stroke" Value="{ThemeResource ScrollBarTrackStrokeDisabled}" />
+                                            <Setter Target="HorizontalTrackRect.Fill" Value="{ThemeResource ScrollBarTrackFillDisabled}" />
+                                            <Setter Target="VerticalTrackRect.Fill" Value="{ThemeResource ScrollBarTrackFillDisabled}" />
+                                            <Setter Target="HorizontalPanningThumb.Background" Value="{ThemeResource ScrollBarPanningThumbBackgroundDisabled}" />
+                                            <Setter Target="VerticalPanningThumb.Background" Value="{ThemeResource ScrollBarPanningThumbBackgroundDisabled}" />
+                                        </VisualState.Setters>
+                                    </VisualState>
+                                </VisualStateGroup>
+                                <VisualStateGroup x:Name="ScrollingIndicatorStates">
+                                    <VisualState x:Name="TouchIndicator">
+                                        <VisualState.Setters>
+                                            <Setter Target="HorizontalRoot.Visibility" Value="Collapsed" />
+                                            <Setter Target="VerticalRoot.Visibility" Value="Collapsed" />
+                                            <Setter Target="HorizontalPanningRoot.Opacity" Value="1" />
+                                            <Setter Target="VerticalPanningRoot.Opacity" Value="1" />
+                                        </VisualState.Setters>
+                                    </VisualState>
+                                    <VisualState x:Name="MouseIndicator">
+                                        <VisualState.Setters>
+                                            <Setter Target="HorizontalPanningRoot.Visibility" Value="Collapsed" />
+                                            <Setter Target="VerticalPanningRoot.Visibility" Value="Collapsed" />
+                                            <Setter Target="HorizontalRoot.IsHitTestVisible" Value="True" />
+                                            <Setter Target="VerticalRoot.IsHitTestVisible" Value="True" />
+                                            <Setter Target="HorizontalThumb.Opacity" Value="1" />
+                                            <Setter Target="VerticalThumb.Opacity" Value="1" />
+                                        </VisualState.Setters>
+                                    </VisualState>
+                                    <VisualState x:Name="NoIndicator">
+                                        <VisualState.Setters>
+                                            <Setter Target="HorizontalThumb.Background" Value="{ThemeResource ScrollBarPanningThumbBackground}" />
+                                            <Setter Target="VerticalThumb.Background" Value="{ThemeResource ScrollBarPanningThumbBackground}" />
+                                        </VisualState.Setters>
+                                        <Storyboard>
+                                            <DoubleAnimation Storyboard.TargetName="VerticalSmallIncrease"
+                                                             Storyboard.TargetProperty="Opacity"
+                                                             To="0"
+                                                             Duration="{StaticResource ScrollBarOpacityChangeDuration}" />
+                                            <DoubleAnimation Storyboard.TargetName="VerticalLargeIncrease"
+                                                             Storyboard.TargetProperty="Opacity"
+                                                             To="0"
+                                                             Duration="{StaticResource ScrollBarOpacityChangeDuration}" />
+                                            <DoubleAnimation Storyboard.TargetName="VerticalLargeDecrease"
+                                                             Storyboard.TargetProperty="Opacity"
+                                                             To="0"
+                                                             Duration="{StaticResource ScrollBarOpacityChangeDuration}" />
+                                            <DoubleAnimation Storyboard.TargetName="VerticalThumb"
+                                                             Storyboard.TargetProperty="Opacity"
+                                                             To="0"
+                                                             Duration="{StaticResource ScrollBarOpacityChangeDuration}" />
+                                            <DoubleAnimation Storyboard.TargetName="VerticalSmallDecrease"
+                                                             Storyboard.TargetProperty="Opacity"
+                                                             To="0"
+                                                             Duration="{StaticResource ScrollBarOpacityChangeDuration}" />
+                                            <DoubleAnimation Storyboard.TargetName="VerticalTrackRect"
+                                                             Storyboard.TargetProperty="Opacity"
+                                                             To="0"
+                                                             Duration="{StaticResource ScrollBarOpacityChangeDuration}" />
+
+                                            <DoubleAnimation Storyboard.TargetName="HorizontalSmallIncrease"
+                                                             Storyboard.TargetProperty="Opacity"
+                                                             To="0"
+                                                             Duration="{StaticResource ScrollBarOpacityChangeDuration}" />
+                                            <DoubleAnimation Storyboard.TargetName="HorizontalLargeIncrease"
+                                                             Storyboard.TargetProperty="Opacity"
+                                                             To="0"
+                                                             Duration="{StaticResource ScrollBarOpacityChangeDuration}" />
+                                            <DoubleAnimation Storyboard.TargetName="HorizontalLargeDecrease"
+                                                             Storyboard.TargetProperty="Opacity"
+                                                             To="0"
+                                                             Duration="{StaticResource ScrollBarOpacityChangeDuration}" />
+                                            <DoubleAnimation Storyboard.TargetName="HorizontalThumb"
+                                                             Storyboard.TargetProperty="Opacity"
+                                                             To="0"
+                                                             Duration="{StaticResource ScrollBarOpacityChangeDuration}" />
+                                            <DoubleAnimation Storyboard.TargetName="HorizontalSmallDecrease"
+                                                             Storyboard.TargetProperty="Opacity"
+                                                             To="0"
+                                                             Duration="{StaticResource ScrollBarOpacityChangeDuration}" />
+                                            <DoubleAnimation Storyboard.TargetName="HorizontalTrackRect"
+                                                             Storyboard.TargetProperty="Opacity"
+                                                             To="0"
+                                                             Duration="{StaticResource ScrollBarOpacityChangeDuration}" />
+
+                                            <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True"
+                                                                           Storyboard.TargetName="VerticalThumb"
+                                                                           Storyboard.TargetProperty="Width">
+                                                <SplineDoubleKeyFrame KeySpline="0,0,0,1"
+                                                                      KeyTime="{StaticResource ScrollBarContractDuration}"
+                                                                      Value="{StaticResource ScrollBarVerticalThumbMinWidth}" />
+                                            </DoubleAnimationUsingKeyFrames>
+
+                                            <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True"
+                                                                           Storyboard.TargetName="VerticalThumbTransform"
+                                                                           Storyboard.TargetProperty="X">
+                                                <SplineDoubleKeyFrame KeySpline="0,0,0,1"
+                                                                      KeyTime="{StaticResource ScrollBarContractDuration}"
+                                                                      Value="{StaticResource ScrollBarThumbOffset}" />
+                                            </DoubleAnimationUsingKeyFrames>
+
+                                            <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True"
+                                                                           Storyboard.TargetName="HorizontalThumb"
+                                                                           Storyboard.TargetProperty="Height">
+                                                <SplineDoubleKeyFrame KeySpline="0,0,0,1"
+                                                                      KeyTime="{StaticResource ScrollBarContractDuration}"
+                                                                      Value="{StaticResource ScrollBarHorizontalThumbMinHeight}" />
+                                            </DoubleAnimationUsingKeyFrames>
+
+                                            <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True"
+                                                                           Storyboard.TargetName="HorizontalThumbTransform"
+                                                                           Storyboard.TargetProperty="Y">
+                                                <SplineDoubleKeyFrame KeySpline="0,0,0,1"
+                                                                      KeyTime="{StaticResource ScrollBarContractDuration}"
+                                                                      Value="{StaticResource ScrollBarThumbOffset}" />
+                                            </DoubleAnimationUsingKeyFrames>
+
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalRoot"
+                                                                           Storyboard.TargetProperty="Visibility">
+                                                <DiscreteObjectKeyFrame KeyTime="{StaticResource ScrollBarOpacityChangeDuration}">
+                                                    <DiscreteObjectKeyFrame.Value>
+                                                        <Visibility>Collapsed</Visibility>
+                                                    </DiscreteObjectKeyFrame.Value>
+                                                </DiscreteObjectKeyFrame>
+                                            </ObjectAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalRoot"
+                                                                           Storyboard.TargetProperty="Visibility">
+                                                <DiscreteObjectKeyFrame KeyTime="{StaticResource ScrollBarOpacityChangeDuration}">
+                                                    <DiscreteObjectKeyFrame.Value>
+                                                        <Visibility>Collapsed</Visibility>
+                                                    </DiscreteObjectKeyFrame.Value>
+                                                </DiscreteObjectKeyFrame>
+                                            </ObjectAnimationUsingKeyFrames>
+
+                                            <DoubleAnimation Storyboard.TargetName="HorizontalPanningRoot"
+                                                             Storyboard.TargetProperty="Opacity"
+                                                             To="0"
+                                                             Duration="{StaticResource ScrollBarOpacityChangeDuration}" />
+                                            <DoubleAnimation Storyboard.TargetName="VerticalPanningRoot"
+                                                             Storyboard.TargetProperty="Opacity"
+                                                             To="0"
+                                                             Duration="{StaticResource ScrollBarOpacityChangeDuration}" />
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalPanningRoot"
+                                                                           Storyboard.TargetProperty="Visibility">
+                                                <DiscreteObjectKeyFrame KeyTime="{StaticResource ScrollBarContractDuration}">
+                                                    <DiscreteObjectKeyFrame.Value>
+                                                        <Visibility>Collapsed</Visibility>
+                                                    </DiscreteObjectKeyFrame.Value>
+                                                </DiscreteObjectKeyFrame>
+                                            </ObjectAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalPanningRoot"
+                                                                           Storyboard.TargetProperty="Visibility">
+                                                <DiscreteObjectKeyFrame KeyTime="{StaticResource ScrollBarContractDuration}">
+                                                    <DiscreteObjectKeyFrame.Value>
+                                                        <Visibility>Collapsed</Visibility>
+                                                    </DiscreteObjectKeyFrame.Value>
+                                                </DiscreteObjectKeyFrame>
+                                            </ObjectAnimationUsingKeyFrames>
+                                        </Storyboard>
+                                    </VisualState>
+                                </VisualStateGroup>
+                                <VisualStateGroup x:Name="ConsciousStates">
+                                    <VisualStateGroup.Transitions>
+                                        <VisualTransition From="Expanded"
+                                                          To="Collapsed">
+                                            <Storyboard>
+                                                <DoubleAnimation BeginTime="{StaticResource ScrollBarContractBeginTime}"
+                                                                 Storyboard.TargetName="VerticalSmallIncrease"
+                                                                 Storyboard.TargetProperty="Opacity"
+                                                                 To="0"
+                                                                 Duration="{StaticResource ScrollBarOpacityChangeDuration}" />
+                                                <DoubleAnimation BeginTime="{StaticResource ScrollBarContractBeginTime}"
+                                                                 Storyboard.TargetName="VerticalLargeIncrease"
+                                                                 Storyboard.TargetProperty="Opacity"
+                                                                 To="0"
+                                                                 Duration="{StaticResource ScrollBarOpacityChangeDuration}" />
+                                                <DoubleAnimation BeginTime="{StaticResource ScrollBarContractBeginTime}"
+                                                                 Storyboard.TargetName="VerticalLargeDecrease"
+                                                                 Storyboard.TargetProperty="Opacity"
+                                                                 To="0"
+                                                                 Duration="{StaticResource ScrollBarOpacityChangeDuration}" />
+                                                <DoubleAnimation BeginTime="{StaticResource ScrollBarContractBeginTime}"
+                                                                 Storyboard.TargetName="VerticalSmallDecrease"
+                                                                 Storyboard.TargetProperty="Opacity"
+                                                                 To="0"
+                                                                 Duration="{StaticResource ScrollBarOpacityChangeDuration}" />
+                                                <DoubleAnimation BeginTime="{StaticResource ScrollBarContractBeginTime}"
+                                                                 Storyboard.TargetName="VerticalTrackRect"
+                                                                 Storyboard.TargetProperty="Opacity"
+                                                                 To="0"
+                                                                 Duration="{StaticResource ScrollBarOpacityChangeDuration}" />
+                                                <DoubleAnimation BeginTime="{StaticResource ScrollBarContractBeginTime}"
+                                                                 Storyboard.TargetName="HorizontalSmallIncrease"
+                                                                 Storyboard.TargetProperty="Opacity"
+                                                                 To="0"
+                                                                 Duration="{StaticResource ScrollBarOpacityChangeDuration}" />
+                                                <DoubleAnimation BeginTime="{StaticResource ScrollBarContractBeginTime}"
+                                                                 Storyboard.TargetName="HorizontalLargeIncrease"
+                                                                 Storyboard.TargetProperty="Opacity"
+                                                                 To="0"
+                                                                 Duration="{StaticResource ScrollBarOpacityChangeDuration}" />
+                                                <DoubleAnimation BeginTime="{StaticResource ScrollBarContractBeginTime}"
+                                                                 Storyboard.TargetName="HorizontalLargeDecrease"
+                                                                 Storyboard.TargetProperty="Opacity"
+                                                                 To="0"
+                                                                 Duration="{StaticResource ScrollBarOpacityChangeDuration}" />
+                                                <DoubleAnimation BeginTime="{StaticResource ScrollBarContractBeginTime}"
+                                                                 Storyboard.TargetName="HorizontalSmallDecrease"
+                                                                 Storyboard.TargetProperty="Opacity"
+                                                                 To="0"
+                                                                 Duration="{StaticResource ScrollBarOpacityChangeDuration}" />
+                                                <DoubleAnimation BeginTime="{StaticResource ScrollBarContractBeginTime}"
+                                                                 Storyboard.TargetName="HorizontalTrackRect"
+                                                                 Storyboard.TargetProperty="Opacity"
+                                                                 To="0"
+                                                                 Duration="{StaticResource ScrollBarOpacityChangeDuration}" />
+
+                                                <DoubleAnimationUsingKeyFrames BeginTime="{StaticResource ScrollBarContractBeginTime}"
+                                                                               EnableDependentAnimation="True"
+                                                                               Storyboard.TargetName="VerticalThumb"
+                                                                               Storyboard.TargetProperty="Width">
+                                                    <SplineDoubleKeyFrame KeySpline="0,0,0,1"
+                                                                          KeyTime="{StaticResource ScrollBarContractDuration}"
+                                                                          Value="{StaticResource ScrollBarVerticalThumbMinWidth}" />
+                                                </DoubleAnimationUsingKeyFrames>
+                                                <DoubleAnimationUsingKeyFrames BeginTime="{StaticResource ScrollBarContractBeginTime}"
+                                                                               Storyboard.TargetName="VerticalThumbTransform"
+                                                                               Storyboard.TargetProperty="X">
+                                                    <SplineDoubleKeyFrame KeySpline="0,0,0,1"
+                                                                          KeyTime="{StaticResource ScrollBarContractDuration}"
+                                                                          Value="{StaticResource ScrollBarThumbOffset}" />
+                                                </DoubleAnimationUsingKeyFrames>
+                                                <DoubleAnimationUsingKeyFrames BeginTime="{StaticResource ScrollBarContractBeginTime}"
+                                                                               EnableDependentAnimation="True"
+                                                                               Storyboard.TargetName="HorizontalThumb"
+                                                                               Storyboard.TargetProperty="Height">
+                                                    <SplineDoubleKeyFrame KeySpline="0,0,0,1"
+                                                                          KeyTime="{StaticResource ScrollBarContractDuration}"
+                                                                          Value="{StaticResource ScrollBarHorizontalThumbMinHeight}" />
+                                                </DoubleAnimationUsingKeyFrames>
+                                                <DoubleAnimationUsingKeyFrames BeginTime="{StaticResource ScrollBarContractBeginTime}"
+                                                                               Storyboard.TargetName="HorizontalThumbTransform"
+                                                                               Storyboard.TargetProperty="Y">
+                                                    <SplineDoubleKeyFrame KeySpline="0,0,0,1"
+                                                                          KeyTime="{StaticResource ScrollBarContractDuration}"
+                                                                          Value="{StaticResource ScrollBarThumbOffset}" />
+                                                </DoubleAnimationUsingKeyFrames>
+                                            </Storyboard>
+                                        </VisualTransition>
+                                    </VisualStateGroup.Transitions>
+                                    <VisualState x:Name="Collapsed">
+                                        <VisualState.Setters>
+                                            <Setter Target="HorizontalThumb.Background" Value="{ThemeResource ScrollBarPanningThumbBackgroundColor}" />
+                                            <Setter Target="VerticalThumb.Background" Value="{ThemeResource ScrollBarPanningThumbBackgroundColor}" />
+                                        </VisualState.Setters>
+                                    </VisualState>
+                                    <VisualState x:Name="Expanded">
+                                        <VisualState.Setters>
+                                            <Setter Target="Root.Background" Value="{ThemeResource ScrollBarBackgroundPointerOver}" />
+                                            <Setter Target="Root.BorderBrush" Value="{ThemeResource ScrollBarBorderBrushPointerOver}" />
+                                            <Setter Target="HorizontalTrackRect.Stroke" Value="{ThemeResource ScrollBarTrackStrokePointerOver}" />
+                                            <Setter Target="VerticalTrackRect.Stroke" Value="{ThemeResource ScrollBarTrackStrokePointerOver}" />
+                                            <Setter Target="HorizontalTrackRect.Fill" Value="{ThemeResource ScrollBarTrackFillPointerOver}" />
+                                            <Setter Target="VerticalTrackRect.Fill" Value="{ThemeResource ScrollBarTrackFillPointerOver}" />
+                                            <Setter Target="HorizontalThumb.Background" Value="{ThemeResource ScrollBarThumbBackground}" />
+                                            <Setter Target="VerticalThumb.Background" Value="{ThemeResource ScrollBarThumbBackground}" />
+                                        </VisualState.Setters>
+
+                                        <Storyboard>
+                                            <DoubleAnimation BeginTime="{StaticResource ScrollBarExpandBeginTime}"
+                                                             Storyboard.TargetName="VerticalSmallIncrease"
+                                                             Storyboard.TargetProperty="Opacity"
+                                                             To="1"
+                                                             Duration="{StaticResource ScrollBarOpacityChangeDuration}" />
+                                            <DoubleAnimation BeginTime="{StaticResource ScrollBarExpandBeginTime}"
+                                                             Storyboard.TargetName="VerticalLargeIncrease"
+                                                             Storyboard.TargetProperty="Opacity"
+                                                             To="1"
+                                                             Duration="{StaticResource ScrollBarOpacityChangeDuration}" />
+                                            <DoubleAnimation BeginTime="{StaticResource ScrollBarExpandBeginTime}"
+                                                             Storyboard.TargetName="VerticalLargeDecrease"
+                                                             Storyboard.TargetProperty="Opacity"
+                                                             To="1"
+                                                             Duration="{StaticResource ScrollBarOpacityChangeDuration}" />
+                                            <DoubleAnimation BeginTime="{StaticResource ScrollBarExpandBeginTime}"
+                                                             Storyboard.TargetName="VerticalSmallDecrease"
+                                                             Storyboard.TargetProperty="Opacity"
+                                                             To="1"
+                                                             Duration="{StaticResource ScrollBarOpacityChangeDuration}" />
+                                            <DoubleAnimation BeginTime="{StaticResource ScrollBarExpandBeginTime}"
+                                                             Storyboard.TargetName="VerticalTrackRect"
+                                                             Storyboard.TargetProperty="Opacity"
+                                                             To="1"
+                                                             Duration="{StaticResource ScrollBarOpacityChangeDuration}" />
+                                            <DoubleAnimation BeginTime="{StaticResource ScrollBarExpandBeginTime}"
+                                                             Storyboard.TargetName="HorizontalSmallIncrease"
+                                                             Storyboard.TargetProperty="Opacity"
+                                                             To="1"
+                                                             Duration="{StaticResource ScrollBarOpacityChangeDuration}" />
+                                            <DoubleAnimation BeginTime="{StaticResource ScrollBarExpandBeginTime}"
+                                                             Storyboard.TargetName="HorizontalLargeIncrease"
+                                                             Storyboard.TargetProperty="Opacity"
+                                                             To="1"
+                                                             Duration="{StaticResource ScrollBarOpacityChangeDuration}" />
+                                            <DoubleAnimation BeginTime="{StaticResource ScrollBarExpandBeginTime}"
+                                                             Storyboard.TargetName="HorizontalLargeDecrease"
+                                                             Storyboard.TargetProperty="Opacity"
+                                                             To="1"
+                                                             Duration="{StaticResource ScrollBarOpacityChangeDuration}" />
+                                            <DoubleAnimation BeginTime="{StaticResource ScrollBarExpandBeginTime}"
+                                                             Storyboard.TargetName="HorizontalSmallDecrease"
+                                                             Storyboard.TargetProperty="Opacity"
+                                                             To="1"
+                                                             Duration="{StaticResource ScrollBarOpacityChangeDuration}" />
+                                            <DoubleAnimation BeginTime="{StaticResource ScrollBarExpandBeginTime}"
+                                                             Storyboard.TargetName="HorizontalTrackRect"
+                                                             Storyboard.TargetProperty="Opacity"
+                                                             To="1"
+                                                             Duration="{StaticResource ScrollBarOpacityChangeDuration}" />
+
+                                            <DoubleAnimationUsingKeyFrames BeginTime="{StaticResource ScrollBarExpandBeginTime}"
+                                                                           EnableDependentAnimation="True"
+                                                                           Storyboard.TargetName="VerticalThumb"
+                                                                           Storyboard.TargetProperty="Width">
+                                                <SplineDoubleKeyFrame KeySpline="0,0,0,1"
+                                                                      KeyTime="{StaticResource ScrollBarExpandDuration}"
+                                                                      Value="{StaticResource ScrollBarSize}" />
+                                            </DoubleAnimationUsingKeyFrames>
+
+                                            <DoubleAnimationUsingKeyFrames BeginTime="{StaticResource ScrollBarExpandBeginTime}"
+                                                                           Storyboard.TargetName="VerticalThumbTransform"
+                                                                           Storyboard.TargetProperty="X">
+                                                <SplineDoubleKeyFrame KeySpline="0,0,0,1"
+                                                                      KeyTime="{StaticResource ScrollBarExpandDuration}"
+                                                                      Value="0" />
+                                            </DoubleAnimationUsingKeyFrames>
+                                            <DoubleAnimationUsingKeyFrames BeginTime="{StaticResource ScrollBarExpandBeginTime}"
+                                                                           EnableDependentAnimation="True"
+                                                                           Storyboard.TargetName="HorizontalThumb"
+                                                                           Storyboard.TargetProperty="Height">
+                                                <SplineDoubleKeyFrame KeySpline="0,0,0,1"
+                                                                      KeyTime="{StaticResource ScrollBarExpandDuration}"
+                                                                      Value="{StaticResource ScrollBarSize}" />
+                                            </DoubleAnimationUsingKeyFrames>
+                                            <DoubleAnimationUsingKeyFrames BeginTime="{StaticResource ScrollBarExpandBeginTime}"
+                                                                           Storyboard.TargetName="HorizontalThumbTransform"
+                                                                           Storyboard.TargetProperty="Y">
+                                                <SplineDoubleKeyFrame KeySpline="0,0,0,1"
+                                                                      KeyTime="{StaticResource ScrollBarExpandDuration}"
+                                                                      Value="0" />
+                                            </DoubleAnimationUsingKeyFrames>
+                                        </Storyboard>
+                                    </VisualState>
+                                    <VisualState x:Name="ExpandedWithoutAnimation">
+                                        <VisualState.Setters>
+                                            <Setter Target="Root.Background" Value="{ThemeResource ScrollBarBackgroundPointerOver}" />
+                                            <Setter Target="Root.BorderBrush" Value="{ThemeResource ScrollBarBorderBrushPointerOver}" />
+                                            <Setter Target="HorizontalTrackRect.Stroke" Value="{ThemeResource ScrollBarTrackStrokePointerOver}" />
+                                            <Setter Target="VerticalTrackRect.Stroke" Value="{ThemeResource ScrollBarTrackStrokePointerOver}" />
+                                            <Setter Target="HorizontalTrackRect.Fill" Value="{ThemeResource ScrollBarTrackFillPointerOver}" />
+                                            <Setter Target="VerticalTrackRect.Fill" Value="{ThemeResource ScrollBarTrackFillPointerOver}" />
+                                            <Setter Target="HorizontalThumb.Background" Value="{ThemeResource ScrollBarThumbBackground}" />
+                                            <Setter Target="VerticalThumb.Background" Value="{ThemeResource ScrollBarThumbBackground}" />
+                                        </VisualState.Setters>
+                                        <!--
+                                            The storyboard below cannot be moved to a transition since transitions
+                                            will not be run by the framework when animations are disabled in the system
+                                        -->
+                                        <Storyboard>
+                                            <DoubleAnimation BeginTime="{StaticResource ScrollBarExpandBeginTime}"
+                                                             Storyboard.TargetName="VerticalSmallIncrease"
+                                                             Storyboard.TargetProperty="Opacity"
+                                                             To="1"
+                                                             Duration="0" />
+                                            <DoubleAnimation BeginTime="{StaticResource ScrollBarExpandBeginTime}"
+                                                             Storyboard.TargetName="VerticalLargeIncrease"
+                                                             Storyboard.TargetProperty="Opacity"
+                                                             To="1"
+                                                             Duration="0" />
+                                            <DoubleAnimation BeginTime="{StaticResource ScrollBarExpandBeginTime}"
+                                                             Storyboard.TargetName="VerticalLargeDecrease"
+                                                             Storyboard.TargetProperty="Opacity"
+                                                             To="1"
+                                                             Duration="0" />
+                                            <DoubleAnimation BeginTime="{StaticResource ScrollBarExpandBeginTime}"
+                                                             Storyboard.TargetName="VerticalSmallDecrease"
+                                                             Storyboard.TargetProperty="Opacity"
+                                                             To="1"
+                                                             Duration="0" />
+                                            <DoubleAnimation BeginTime="{StaticResource ScrollBarExpandBeginTime}"
+                                                             Storyboard.TargetName="VerticalTrackRect"
+                                                             Storyboard.TargetProperty="Opacity"
+                                                             To="1"
+                                                             Duration="0" />
+                                            <DoubleAnimation BeginTime="{StaticResource ScrollBarExpandBeginTime}"
+                                                             Storyboard.TargetName="HorizontalSmallIncrease"
+                                                             Storyboard.TargetProperty="Opacity"
+                                                             To="1"
+                                                             Duration="0" />
+                                            <DoubleAnimation BeginTime="{StaticResource ScrollBarExpandBeginTime}"
+                                                             Storyboard.TargetName="HorizontalLargeIncrease"
+                                                             Storyboard.TargetProperty="Opacity"
+                                                             To="1"
+                                                             Duration="0" />
+                                            <DoubleAnimation BeginTime="{StaticResource ScrollBarExpandBeginTime}"
+                                                             Storyboard.TargetName="HorizontalLargeDecrease"
+                                                             Storyboard.TargetProperty="Opacity"
+                                                             To="1"
+                                                             Duration="0" />
+                                            <DoubleAnimation BeginTime="{StaticResource ScrollBarExpandBeginTime}"
+                                                             Storyboard.TargetName="HorizontalSmallDecrease"
+                                                             Storyboard.TargetProperty="Opacity"
+                                                             To="1"
+                                                             Duration="0" />
+                                            <DoubleAnimation BeginTime="{StaticResource ScrollBarExpandBeginTime}"
+                                                             Storyboard.TargetName="HorizontalTrackRect"
+                                                             Storyboard.TargetProperty="Opacity"
+                                                             To="1"
+                                                             Duration="0" />
+
+                                            <DoubleAnimationUsingKeyFrames BeginTime="{StaticResource ScrollBarExpandBeginTime}"
+                                                                           EnableDependentAnimation="True"
+                                                                           Storyboard.TargetName="VerticalThumb"
+                                                                           Storyboard.TargetProperty="Width">
+                                                <SplineDoubleKeyFrame KeySpline="0,0,0,1"
+                                                                      KeyTime="0"
+                                                                      Value="{StaticResource ScrollBarSize}" />
+                                            </DoubleAnimationUsingKeyFrames>
+
+                                            <DoubleAnimationUsingKeyFrames BeginTime="{StaticResource ScrollBarExpandBeginTime}"
+                                                                           Storyboard.TargetName="VerticalThumbTransform"
+                                                                           Storyboard.TargetProperty="X">
+                                                <SplineDoubleKeyFrame KeySpline="0,0,0,1"
+                                                                      KeyTime="0"
+                                                                      Value="0" />
+                                            </DoubleAnimationUsingKeyFrames>
+
+                                            <DoubleAnimationUsingKeyFrames BeginTime="{StaticResource ScrollBarExpandBeginTime}"
+                                                                           EnableDependentAnimation="True"
+                                                                           Storyboard.TargetName="HorizontalThumb"
+                                                                           Storyboard.TargetProperty="Height">
+                                                <SplineDoubleKeyFrame KeySpline="0,0,0,1"
+                                                                      KeyTime="0"
+                                                                      Value="{StaticResource ScrollBarSize}" />
+                                            </DoubleAnimationUsingKeyFrames>
+
+                                            <DoubleAnimationUsingKeyFrames BeginTime="{StaticResource ScrollBarExpandBeginTime}"
+                                                                           Storyboard.TargetName="HorizontalThumbTransform"
+                                                                           Storyboard.TargetProperty="Y">
+                                                <SplineDoubleKeyFrame KeySpline="0,0,0,1"
+                                                                      KeyTime="0"
+                                                                      Value="0" />
+                                            </DoubleAnimationUsingKeyFrames>
+
+                                        </Storyboard>
+                                    </VisualState>
+                                    <VisualState x:Name="CollapsedWithoutAnimation">
+                                        <VisualState.Setters>
+                                            <Setter Target="HorizontalThumb.Background" Value="{ThemeResource ScrollBarPanningThumbBackground}" />
+                                            <Setter Target="VerticalThumb.Background" Value="{ThemeResource ScrollBarPanningThumbBackground}" />
+                                        </VisualState.Setters>
+                                        <!--
+                                            The storyboard below cannot be moved to a transition since transitions
+                                            will not be run by the framework when animations are disabled in the system
+                                        -->
+                                        <Storyboard>
+                                            <DoubleAnimation BeginTime="{StaticResource ScrollBarContractBeginTime}"
+                                                             Storyboard.TargetName="VerticalSmallIncrease"
+                                                             Storyboard.TargetProperty="Opacity"
+                                                             To="0"
+                                                             Duration="0" />
+                                            <DoubleAnimation BeginTime="{StaticResource ScrollBarContractBeginTime}"
+                                                             Storyboard.TargetName="VerticalLargeIncrease"
+                                                             Storyboard.TargetProperty="Opacity"
+                                                             To="0"
+                                                             Duration="0" />
+                                            <DoubleAnimation BeginTime="{StaticResource ScrollBarContractBeginTime}"
+                                                             Storyboard.TargetName="VerticalLargeDecrease"
+                                                             Storyboard.TargetProperty="Opacity"
+                                                             To="0"
+                                                             Duration="0" />
+                                            <DoubleAnimation BeginTime="{StaticResource ScrollBarContractBeginTime}"
+                                                             Storyboard.TargetName="VerticalSmallDecrease"
+                                                             Storyboard.TargetProperty="Opacity"
+                                                             To="0"
+                                                             Duration="0" />
+                                            <DoubleAnimation BeginTime="{StaticResource ScrollBarContractBeginTime}"
+                                                             Storyboard.TargetName="VerticalTrackRect"
+                                                             Storyboard.TargetProperty="Opacity"
+                                                             To="0"
+                                                             Duration="0" />
+                                            <DoubleAnimation BeginTime="{StaticResource ScrollBarContractBeginTime}"
+                                                             Storyboard.TargetName="HorizontalSmallIncrease"
+                                                             Storyboard.TargetProperty="Opacity"
+                                                             To="0"
+                                                             Duration="0" />
+                                            <DoubleAnimation BeginTime="{StaticResource ScrollBarContractBeginTime}"
+                                                             Storyboard.TargetName="HorizontalLargeIncrease"
+                                                             Storyboard.TargetProperty="Opacity"
+                                                             To="0"
+                                                             Duration="0" />
+                                            <DoubleAnimation BeginTime="{StaticResource ScrollBarContractBeginTime}"
+                                                             Storyboard.TargetName="HorizontalLargeDecrease"
+                                                             Storyboard.TargetProperty="Opacity"
+                                                             To="0"
+                                                             Duration="0" />
+                                            <DoubleAnimation BeginTime="{StaticResource ScrollBarContractBeginTime}"
+                                                             Storyboard.TargetName="HorizontalSmallDecrease"
+                                                             Storyboard.TargetProperty="Opacity"
+                                                             To="0"
+                                                             Duration="0" />
+                                            <DoubleAnimation BeginTime="{StaticResource ScrollBarContractBeginTime}"
+                                                             Storyboard.TargetName="HorizontalTrackRect"
+                                                             Storyboard.TargetProperty="Opacity"
+                                                             To="0"
+                                                             Duration="0" />
+
+                                            <DoubleAnimationUsingKeyFrames BeginTime="{StaticResource ScrollBarContractBeginTime}"
+                                                                           EnableDependentAnimation="True"
+                                                                           Storyboard.TargetName="VerticalThumb"
+                                                                           Storyboard.TargetProperty="Width">
+                                                <SplineDoubleKeyFrame KeySpline="0,0,0,1"
+                                                                      KeyTime="0"
+                                                                      Value="{StaticResource ScrollBarVerticalThumbMinWidth}" />
+                                            </DoubleAnimationUsingKeyFrames>
+
+                                            <DoubleAnimationUsingKeyFrames BeginTime="{StaticResource ScrollBarContractBeginTime}"
+                                                                           Storyboard.TargetName="VerticalThumbTransform"
+                                                                           Storyboard.TargetProperty="X">
+                                                <SplineDoubleKeyFrame KeySpline="0,0,0,1"
+                                                                      KeyTime="0"
+                                                                      Value="{StaticResource ScrollBarThumbOffset}" />
+                                            </DoubleAnimationUsingKeyFrames>
+
+                                            <DoubleAnimationUsingKeyFrames BeginTime="{StaticResource ScrollBarContractBeginTime}"
+                                                                           EnableDependentAnimation="True"
+                                                                           Storyboard.TargetName="HorizontalThumb"
+                                                                           Storyboard.TargetProperty="Height">
+                                                <SplineDoubleKeyFrame KeySpline="0,0,0,1"
+                                                                      KeyTime="0"
+                                                                      Value="{StaticResource ScrollBarHorizontalThumbMinHeight}" />
+                                            </DoubleAnimationUsingKeyFrames>
+
+                                            <DoubleAnimationUsingKeyFrames BeginTime="{StaticResource ScrollBarContractBeginTime}"
+                                                                           Storyboard.TargetName="HorizontalThumbTransform"
+                                                                           Storyboard.TargetProperty="Y">
+                                                <SplineDoubleKeyFrame KeySpline="0,0,0,1"
+                                                                      KeyTime="0"
+                                                                      Value="{StaticResource ScrollBarThumbOffset}" />
+                                            </DoubleAnimationUsingKeyFrames>
+                                        </Storyboard>
+                                    </VisualState>
+                                </VisualStateGroup>
+
+                            </VisualStateManager.VisualStateGroups>
+                        </Grid>
+                    </ControlTemplate>
+                </Setter.Value>
+            </Setter>
+        </Style>
+    </UserControl.Resources>
+
     <!--
         TODO GH#4031: We've investigated whether we should be using KeyDown or PreviewKeyDown
         but not necessarily come to a consensus. It's possible that moving input to the SwapChainPanel
@@ -101,6 +1241,7 @@
                        PointerPressed="_CapturePointer"
                        PointerReleased="_ReleasePointerCapture"
                        SmallChange="1"
+                       Style="{StaticResource ForkedScrollbarTemplate}"
                        ValueChanged="_ScrollbarChangeHandler"
                        ViewportSize="10" />
         </Grid>
diff --git a/src/cascadia/TerminalSettingsEditor/Actions.xaml b/src/cascadia/TerminalSettingsEditor/Actions.xaml
index 35a59cc8f28..5d46d5da020 100644
--- a/src/cascadia/TerminalSettingsEditor/Actions.xaml
+++ b/src/cascadia/TerminalSettingsEditor/Actions.xaml
@@ -375,28 +375,30 @@
     </Page.Resources>
 
     <ScrollViewer ViewChanging="ViewChanging">
-        <StackPanel MaxWidth="600"
-                    Spacing="8"
-                    Style="{StaticResource SettingsStackStyle}">
-            <!--  Add New Button  -->
-            <Button x:Name="AddNewButton"
-                    Click="AddNew_Click">
-                <Button.Content>
-                    <StackPanel Orientation="Horizontal">
-                        <FontIcon FontSize="{StaticResource StandardIconSize}"
-                                  Glyph="&#xE710;" />
-                        <TextBlock x:Uid="Actions_AddNewTextBlock"
-                                   Style="{StaticResource IconButtonTextBlockStyle}" />
-                    </StackPanel>
-                </Button.Content>
-            </Button>
-
-            <!--  Keybindings  -->
-            <ListView x:Name="KeyBindingsListView"
-                      ItemTemplate="{StaticResource KeyBindingTemplate}"
-                      ItemsSource="{x:Bind KeyBindingList, Mode=OneWay}"
-                      SelectionMode="None" />
-        </StackPanel>
+        <Border MaxWidth="{StaticResource StandardControlMaxWidth}">
+            <StackPanel MaxWidth="600"
+                        HorizontalAlignment="Left"
+                        Spacing="8"
+                        Style="{StaticResource SettingsStackStyle}">
+                <!--  Add New Button  -->
+                <Button x:Name="AddNewButton"
+                        Click="AddNew_Click">
+                    <Button.Content>
+                        <StackPanel Orientation="Horizontal">
+                            <FontIcon FontSize="{StaticResource StandardIconSize}"
+                                      Glyph="&#xE710;" />
+                            <TextBlock x:Uid="Actions_AddNewTextBlock"
+                                       Style="{StaticResource IconButtonTextBlockStyle}" />
+                        </StackPanel>
+                    </Button.Content>
+                </Button>
 
+                <!--  Keybindings  -->
+                <ListView x:Name="KeyBindingsListView"
+                          ItemTemplate="{StaticResource KeyBindingTemplate}"
+                          ItemsSource="{x:Bind KeyBindingList, Mode=OneWay}"
+                          SelectionMode="None" />
+            </StackPanel>
+        </Border>
     </ScrollViewer>
 </Page>
diff --git a/src/cascadia/TerminalSettingsEditor/AddProfile.xaml b/src/cascadia/TerminalSettingsEditor/AddProfile.xaml
index dd8defdfe5c..09237dd1b59 100644
--- a/src/cascadia/TerminalSettingsEditor/AddProfile.xaml
+++ b/src/cascadia/TerminalSettingsEditor/AddProfile.xaml
@@ -23,25 +23,29 @@
 
     <ScrollViewer ViewChanging="ViewChanging">
         <StackPanel Style="{StaticResource SettingsStackStyle}">
-            <Button x:Name="AddNewButton"
-                    Click="AddNewClick"
-                    Style="{StaticResource AccentButtonStyle}">
-                <Button.Content>
-                    <StackPanel Orientation="Horizontal">
-                        <FontIcon FontSize="{StaticResource StandardIconSize}"
-                                  Glyph="&#xE710;" />
-                        <TextBlock x:Uid="AddProfile_AddNewTextBlock"
-                                   Style="{StaticResource IconButtonTextBlockStyle}" />
-                    </StackPanel>
-                </Button.Content>
-            </Button>
+            <Border MaxWidth="{StaticResource StandardControlMaxWidth}">
+                <Button x:Name="AddNewButton"
+                        Click="AddNewClick"
+                        Style="{StaticResource AccentButtonStyle}">
+                    <Button.Content>
+                        <StackPanel Orientation="Horizontal">
+                            <FontIcon FontSize="{StaticResource StandardIconSize}"
+                                      Glyph="&#xE710;" />
+                            <TextBlock x:Uid="AddProfile_AddNewTextBlock"
+                                       Style="{StaticResource IconButtonTextBlockStyle}" />
+                        </StackPanel>
+                    </Button.Content>
+                </Button>
+            </Border>
             <StackPanel Margin="{StaticResource StandardControlMargin}">
                 <local:SettingContainer x:Uid="AddProfile_Duplicate">
-                    <muxc:RadioButtons x:Name="Profiles"
-                                       AutomationProperties.AccessibilityView="Content"
-                                       ItemsSource="{x:Bind State.Settings.AllProfiles, Mode=OneWay}"
-                                       SelectionChanged="ProfilesSelectionChanged">
-                        <muxc:RadioButtons.ItemTemplate>
+                    <ComboBox x:Name="Profiles"
+                              AutomationProperties.AccessibilityView="Content"
+                              ItemsSource="{x:Bind State.Settings.AllProfiles, Mode=OneWay}"
+                              SelectedIndex="0"
+                              SelectionChanged="ProfilesSelectionChanged"
+                              Style="{StaticResource ComboBoxSettingStyle}">
+                        <ComboBox.ItemTemplate>
                             <DataTemplate x:DataType="model:Profile">
                                 <Grid HorizontalAlignment="Stretch"
                                       ColumnSpacing="8">
@@ -63,23 +67,25 @@
 
                                 </Grid>
                             </DataTemplate>
-                        </muxc:RadioButtons.ItemTemplate>
-                    </muxc:RadioButtons>
+                        </ComboBox.ItemTemplate>
+                    </ComboBox>
                 </local:SettingContainer>
-                <Button x:Name="DuplicateButton"
-                        Margin="{StaticResource StandardControlMargin}"
-                        Click="DuplicateClick"
-                        IsEnabled="{x:Bind IsProfileSelected, Mode=OneWay}"
-                        Style="{StaticResource AccentButtonStyle}">
-                    <Button.Content>
-                        <StackPanel Orientation="Horizontal">
-                            <FontIcon FontSize="{StaticResource StandardIconSize}"
-                                      Glyph="&#xE8C8;" />
-                            <TextBlock x:Uid="AddProfile_DuplicateTextBlock"
-                                       Style="{StaticResource IconButtonTextBlockStyle}" />
-                        </StackPanel>
-                    </Button.Content>
-                </Button>
+                <Border MaxWidth="{StaticResource StandardControlMaxWidth}">
+                    <Button x:Name="DuplicateButton"
+                            Margin="{StaticResource StandardControlMargin}"
+                            Click="DuplicateClick"
+                            IsEnabled="{x:Bind IsProfileSelected, Mode=OneWay}"
+                            Style="{StaticResource AccentButtonStyle}">
+                        <Button.Content>
+                            <StackPanel Orientation="Horizontal">
+                                <FontIcon FontSize="{StaticResource StandardIconSize}"
+                                          Glyph="&#xE8C8;" />
+                                <TextBlock x:Uid="AddProfile_DuplicateTextBlock"
+                                           Style="{StaticResource IconButtonTextBlockStyle}" />
+                            </StackPanel>
+                        </Button.Content>
+                    </Button>
+                </Border>
             </StackPanel>
         </StackPanel>
     </ScrollViewer>
diff --git a/src/cascadia/TerminalSettingsEditor/Appearances.cpp b/src/cascadia/TerminalSettingsEditor/Appearances.cpp
index 0eb24bb054f..a9add91b5c4 100644
--- a/src/cascadia/TerminalSettingsEditor/Appearances.cpp
+++ b/src/cascadia/TerminalSettingsEditor/Appearances.cpp
@@ -142,7 +142,7 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
     {
         bool result{ false };
         const auto currentFont{ Appearance().FontFace() };
-        for (const auto& font : SourceProfile().MonospaceFontList())
+        for (const auto& font : ProfileViewModel::MonospaceFontList())
         {
             if (font.LocalizedName() == currentFont)
             {
@@ -175,7 +175,7 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         // look for the current font in our shown list of fonts
         const auto& appearanceVM{ Appearance() };
         const auto appearanceFontFace{ appearanceVM.FontFace() };
-        const auto& currentFontList{ ShowAllFonts() ? SourceProfile().CompleteFontList() : SourceProfile().MonospaceFontList() };
+        const auto& currentFontList{ ShowAllFonts() ? ProfileViewModel::CompleteFontList() : ProfileViewModel::MonospaceFontList() };
         IInspectable fallbackFont;
         for (const auto& font : currentFontList)
         {
diff --git a/src/cascadia/TerminalSettingsEditor/Appearances.h b/src/cascadia/TerminalSettingsEditor/Appearances.h
index f6fa4b3d644..d9288c3db54 100644
--- a/src/cascadia/TerminalSettingsEditor/Appearances.h
+++ b/src/cascadia/TerminalSettingsEditor/Appearances.h
@@ -128,16 +128,16 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         bool IsCustomFontWeight();
         WINRT_PROPERTY(Windows::Foundation::Collections::IObservableVector<Microsoft::Terminal::Settings::Editor::EnumEntry>, FontWeightList);
 
-        GETSET_BINDABLE_ENUM_SETTING(CursorShape, Microsoft::Terminal::Core::CursorStyle, Appearance, CursorShape);
+        GETSET_BINDABLE_ENUM_SETTING(CursorShape, Microsoft::Terminal::Core::CursorStyle, Appearance().CursorShape);
         WINRT_PROPERTY(Windows::Foundation::Collections::IObservableVector<Model::ColorScheme>, ColorSchemeList, nullptr);
 
         WINRT_CALLBACK(PropertyChanged, Windows::UI::Xaml::Data::PropertyChangedEventHandler);
         DEPENDENCY_PROPERTY(Editor::AppearanceViewModel, Appearance);
         WINRT_PROPERTY(Editor::ProfileViewModel, SourceProfile, nullptr);
 
-        GETSET_BINDABLE_ENUM_SETTING(BackgroundImageStretchMode, Windows::UI::Xaml::Media::Stretch, Appearance, BackgroundImageStretchMode);
+        GETSET_BINDABLE_ENUM_SETTING(BackgroundImageStretchMode, Windows::UI::Xaml::Media::Stretch, Appearance().BackgroundImageStretchMode);
 
-        GETSET_BINDABLE_ENUM_SETTING(IntenseTextStyle, Microsoft::Terminal::Settings::Model::IntenseStyle, Appearance, IntenseTextStyle);
+        GETSET_BINDABLE_ENUM_SETTING(IntenseTextStyle, Microsoft::Terminal::Settings::Model::IntenseStyle, Appearance().IntenseTextStyle);
 
     private:
         bool _ShowAllFonts;
diff --git a/src/cascadia/TerminalSettingsEditor/Appearances.xaml b/src/cascadia/TerminalSettingsEditor/Appearances.xaml
index 6058a08b3ad..7961f70d6c0 100644
--- a/src/cascadia/TerminalSettingsEditor/Appearances.xaml
+++ b/src/cascadia/TerminalSettingsEditor/Appearances.xaml
@@ -41,11 +41,10 @@
         <StackPanel Style="{StaticResource PivotStackStyle}">
             <!--  Grouping: Text  -->
             <TextBlock x:Uid="Profile_TextHeader"
-                       Style="{StaticResource SubtitleTextBlockStyle}" />
+                       Style="{StaticResource TextBlockSubHeaderStyle}" />
 
             <!--  Color Scheme  -->
             <local:SettingContainer x:Uid="Profile_ColorScheme"
-                                    Margin="0"
                                     ClearSettingValue="{x:Bind Appearance.ClearColorSchemeName}"
                                     HasSettingValue="{x:Bind Appearance.HasColorSchemeName, Mode=OneWay}"
                                     SettingOverrideSource="{x:Bind Appearance.ColorSchemeNameOverrideSource, Mode=OneWay}">
@@ -66,7 +65,7 @@
                                     HasSettingValue="{x:Bind Appearance.HasFontFace, Mode=OneWay}"
                                     SettingOverrideSource="{x:Bind Appearance.FontFaceOverrideSource, Mode=OneWay}"
                                     Visibility="{x:Bind Appearance.IsDefault, Mode=OneWay}">
-                <StackPanel>
+                <StackPanel Margin="0,8,0,0">
                     <!--
                         Binding the ItemsSource to a separate variable that switches between the
                         two font lists causes a crash within the ComboBox code.
@@ -153,21 +152,22 @@
                                     ClearSettingValue="{x:Bind Appearance.ClearRetroTerminalEffect}"
                                     HasSettingValue="{x:Bind Appearance.HasRetroTerminalEffect, Mode=OneWay}"
                                     SettingOverrideSource="{x:Bind Appearance.RetroTerminalEffectOverrideSource, Mode=OneWay}">
-                <ToggleSwitch IsOn="{x:Bind Appearance.RetroTerminalEffect, Mode=TwoWay}" />
+                <ToggleSwitch IsOn="{x:Bind Appearance.RetroTerminalEffect, Mode=TwoWay}"
+                              Style="{StaticResource ToggleSwitchInExpanderStyle}" />
             </local:SettingContainer>
         </StackPanel>
 
         <!--  Grouping: Cursor  -->
         <StackPanel Style="{StaticResource PivotStackStyle}">
             <TextBlock x:Uid="Profile_CursorHeader"
-                       Style="{StaticResource SubtitleTextBlockStyle}" />
+                       Style="{StaticResource TextBlockSubHeaderStyle}" />
 
             <!--  Cursor Shape  -->
             <local:SettingContainer x:Uid="Profile_CursorShape"
-                                    Margin="0"
                                     ClearSettingValue="{x:Bind Appearance.ClearCursorShape}"
                                     HasSettingValue="{x:Bind Appearance.HasCursorShape, Mode=OneWay}"
-                                    SettingOverrideSource="{x:Bind Appearance.CursorShapeOverrideSource, Mode=OneWay}">
+                                    SettingOverrideSource="{x:Bind Appearance.CursorShapeOverrideSource, Mode=OneWay}"
+                                    Style="{StaticResource ExpanderSettingContainerStyle}">
                 <muxc:RadioButtons AutomationProperties.AccessibilityView="Content"
                                    ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
                                    ItemsSource="{x:Bind CursorShapeList, Mode=OneWay}"
@@ -200,30 +200,33 @@
         <!--  Grouping: Background  -->
         <StackPanel Style="{StaticResource PivotStackStyle}">
             <TextBlock x:Uid="Profile_BackgroundHeader"
-                       Style="{StaticResource SubtitleTextBlockStyle}" />
+                       Style="{StaticResource TextBlockSubHeaderStyle}" />
 
             <!--  Background Image  -->
             <local:SettingContainer x:Name="BackgroundImageContainer"
                                     x:Uid="Profile_BackgroundImage"
-                                    Margin="0"
                                     ClearSettingValue="{x:Bind Appearance.ClearBackgroundImagePath}"
+                                    CurrentValue="{x:Bind Appearance.BackgroundImagePath, Mode=OneWay}"
                                     HasSettingValue="{x:Bind Appearance.HasBackgroundImagePath, Mode=OneWay}"
-                                    SettingOverrideSource="{x:Bind Appearance.BackgroundImagePathOverrideSource, Mode=OneWay}">
+                                    SettingOverrideSource="{x:Bind Appearance.BackgroundImagePathOverrideSource, Mode=OneWay}"
+                                    Style="{StaticResource ExpanderSettingContainerStyle}">
                 <StackPanel Orientation="Vertical">
+                    <TextBox x:Uid="Profile_BackgroundImageBox"
+                             IsEnabled="{x:Bind local:Converters.StringsAreNotEqual('desktopWallpaper', Appearance.BackgroundImagePath), Mode=OneWay}"
+                             IsSpellCheckEnabled="False"
+                             Style="{StaticResource TextBoxSettingStyle}"
+                             Text="{x:Bind local:Converters.StringOrEmptyIfPlaceholder('desktopWallpaper', Appearance.BackgroundImagePath), Mode=TwoWay, BindBack=Appearance.SetBackgroundImagePath}" />
                     <StackPanel Orientation="Horizontal">
-                        <TextBox x:Uid="Profile_BackgroundImageBox"
-                                 IsEnabled="{x:Bind local:Converters.StringsAreNotEqual('desktopWallpaper', Appearance.BackgroundImagePath), Mode=OneWay}"
-                                 IsSpellCheckEnabled="False"
-                                 Style="{StaticResource TextBoxSettingStyle}"
-                                 Text="{x:Bind local:Converters.StringOrEmptyIfPlaceholder('desktopWallpaper', Appearance.BackgroundImagePath), Mode=TwoWay, BindBack=Appearance.SetBackgroundImagePath}" />
                         <Button x:Uid="Profile_BackgroundImageBrowse"
+                                Margin="0,10,10,0"
                                 Click="BackgroundImage_Click"
                                 IsEnabled="{x:Bind local:Converters.StringsAreNotEqual('desktopWallpaper', Appearance.BackgroundImagePath), Mode=OneWay}"
                                 Style="{StaticResource BrowseButtonStyle}" />
+                        <CheckBox x:Name="UseDesktopImageCheckBox"
+                                  x:Uid="Profile_UseDesktopImage"
+                                  Margin="0,5,0,0"
+                                  IsChecked="{x:Bind Appearance.UseDesktopBGImage, Mode=TwoWay}" />
                     </StackPanel>
-                    <CheckBox x:Name="UseDesktopImageCheckBox"
-                              x:Uid="Profile_UseDesktopImage"
-                              IsChecked="{x:Bind Appearance.UseDesktopBGImage, Mode=TwoWay}" />
                 </StackPanel>
             </local:SettingContainer>
 
@@ -232,6 +235,7 @@
                                     ClearSettingValue="{x:Bind Appearance.ClearBackgroundImageStretchMode}"
                                     HasSettingValue="{x:Bind Appearance.HasBackgroundImageStretchMode, Mode=OneWay}"
                                     SettingOverrideSource="{x:Bind Appearance.BackgroundImageStretchModeOverrideSource, Mode=OneWay}"
+                                    Style="{StaticResource ExpanderSettingContainerStyle}"
                                     Visibility="{x:Bind Appearance.BackgroundImageSettingsVisible, Mode=OneWay}">
                 <muxc:RadioButtons AutomationProperties.AccessibilityView="Content"
                                    ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
@@ -244,6 +248,7 @@
                                     ClearSettingValue="{x:Bind Appearance.ClearBackgroundImageAlignment}"
                                     HasSettingValue="{x:Bind Appearance.HasBackgroundImageAlignment, Mode=OneWay}"
                                     SettingOverrideSource="{x:Bind Appearance.BackgroundImageAlignmentOverrideSource, Mode=OneWay}"
+                                    Style="{StaticResource ExpanderSettingContainerStyle}"
                                     Visibility="{x:Bind Appearance.BackgroundImageSettingsVisible, Mode=OneWay}">
                 <Grid HorizontalAlignment="Left">
                     <Grid.RowDefinitions>
@@ -272,13 +277,14 @@
                                   x:Uid="Profile_BackgroundImageAlignmentTopLeft"
                                   Grid.Row="0"
                                   Grid.Column="0"
-                                  Click="BIAlignment_Click">
+                                  Click="BIAlignment_Click"
+                                  Style="{StaticResource BIAlignmentToggleButtonStyle}">
                         <ToggleButton.Tag>
                             <!--  ConvergedAlignment: Vertical_Top (0x10) | Horizontal_Left (0x01)  -->
                             <x:Int32>17</x:Int32>
                         </ToggleButton.Tag>
                         <ToggleButton.Content>
-                            <FontIcon FontFamily="Segoe MDL2 Assets"
+                            <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                       Glyph="&#xE744;"
                                       RenderTransformOrigin="0.5,0.5">
                                 <FontIcon.RenderTransform>
@@ -291,13 +297,14 @@
                                   x:Uid="Profile_BackgroundImageAlignmentTop"
                                   Grid.Row="0"
                                   Grid.Column="1"
-                                  Click="BIAlignment_Click">
+                                  Click="BIAlignment_Click"
+                                  Style="{StaticResource BIAlignmentToggleButtonStyle}">
                         <ToggleButton.Tag>
                             <!--  ConvergedAlignment: Vertical_Top (0x10) | Horizontal_Center (0x00)  -->
                             <x:Int32>16</x:Int32>
                         </ToggleButton.Tag>
                         <ToggleButton.Content>
-                            <FontIcon FontFamily="Segoe MDL2 Assets"
+                            <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                       Glyph="&#xE745;"
                                       RenderTransformOrigin="0.5,0.5">
                                 <FontIcon.RenderTransform>
@@ -310,13 +317,14 @@
                                   x:Uid="Profile_BackgroundImageAlignmentTopRight"
                                   Grid.Row="0"
                                   Grid.Column="2"
-                                  Click="BIAlignment_Click">
+                                  Click="BIAlignment_Click"
+                                  Style="{StaticResource BIAlignmentToggleButtonStyle}">
                         <ToggleButton.Tag>
                             <!--  ConvergedAlignment: Vertical_Top (0x10) | Horizontal_Right (0x02)  -->
                             <x:Int32>18</x:Int32>
                         </ToggleButton.Tag>
                         <ToggleButton.Content>
-                            <FontIcon FontFamily="Segoe MDL2 Assets"
+                            <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                       Glyph="&#xEA5F;"
                                       RenderTransformOrigin="0.5,0.5">
                                 <FontIcon.RenderTransform>
@@ -331,13 +339,14 @@
                                   x:Uid="Profile_BackgroundImageAlignmentLeft"
                                   Grid.Row="1"
                                   Grid.Column="0"
-                                  Click="BIAlignment_Click">
+                                  Click="BIAlignment_Click"
+                                  Style="{StaticResource BIAlignmentToggleButtonStyle}">
                         <ToggleButton.Tag>
                             <!--  ConvergedAlignment: Vertical_Center (0x00) | Horizontal_Left (0x01)  -->
                             <x:Int32>1</x:Int32>
                         </ToggleButton.Tag>
                         <ToggleButton.Content>
-                            <FontIcon FontFamily="Segoe MDL2 Assets"
+                            <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                       Glyph="&#xE746;" />
                         </ToggleButton.Content>
                     </ToggleButton>
@@ -345,13 +354,14 @@
                                   x:Uid="Profile_BackgroundImageAlignmentCenter"
                                   Grid.Row="1"
                                   Grid.Column="1"
-                                  Click="BIAlignment_Click">
+                                  Click="BIAlignment_Click"
+                                  Style="{StaticResource BIAlignmentToggleButtonStyle}">
                         <ToggleButton.Tag>
                             <!--  ConvergedAlignment: Vertical_Center (0x00) | Horizontal_Center (0x00)  -->
                             <x:Int32>0</x:Int32>
                         </ToggleButton.Tag>
                         <ToggleButton.Content>
-                            <FontIcon FontFamily="Segoe MDL2 Assets"
+                            <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                       Glyph="&#xF16E;" />
                         </ToggleButton.Content>
                     </ToggleButton>
@@ -359,13 +369,14 @@
                                   x:Uid="Profile_BackgroundImageAlignmentRight"
                                   Grid.Row="1"
                                   Grid.Column="2"
-                                  Click="BIAlignment_Click">
+                                  Click="BIAlignment_Click"
+                                  Style="{StaticResource BIAlignmentToggleButtonStyle}">
                         <ToggleButton.Tag>
                             <!--  ConvergedAlignment: Vertical_Center (0x00) | Horizontal_Right (0x02)  -->
                             <x:Int32>2</x:Int32>
                         </ToggleButton.Tag>
                         <ToggleButton.Content>
-                            <FontIcon FontFamily="Segoe MDL2 Assets"
+                            <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                       Glyph="&#xEA61;" />
                         </ToggleButton.Content>
                     </ToggleButton>
@@ -375,13 +386,14 @@
                                   x:Uid="Profile_BackgroundImageAlignmentBottomLeft"
                                   Grid.Row="2"
                                   Grid.Column="0"
-                                  Click="BIAlignment_Click">
+                                  Click="BIAlignment_Click"
+                                  Style="{StaticResource BIAlignmentToggleButtonStyle}">
                         <ToggleButton.Tag>
                             <!--  ConvergedAlignment: Vertical_Bottom (0x20) | Horizontal_Left (0x01)  -->
                             <x:Int32>33</x:Int32>
                         </ToggleButton.Tag>
                         <ToggleButton.Content>
-                            <FontIcon FontFamily="Segoe MDL2 Assets"
+                            <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                       Glyph="&#xE744;" />
                         </ToggleButton.Content>
                     </ToggleButton>
@@ -389,13 +401,14 @@
                                   x:Uid="Profile_BackgroundImageAlignmentBottom"
                                   Grid.Row="2"
                                   Grid.Column="1"
-                                  Click="BIAlignment_Click">
+                                  Click="BIAlignment_Click"
+                                  Style="{StaticResource BIAlignmentToggleButtonStyle}">
                         <ToggleButton.Tag>
                             <!--  ConvergedAlignment: Vertical_Bottom (0x20) | Horizontal_Center (0x00)  -->
                             <x:Int32>32</x:Int32>
                         </ToggleButton.Tag>
                         <ToggleButton.Content>
-                            <FontIcon FontFamily="Segoe MDL2 Assets"
+                            <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                       Glyph="&#xE745;" />
                         </ToggleButton.Content>
                     </ToggleButton>
@@ -403,13 +416,14 @@
                                   x:Uid="Profile_BackgroundImageAlignmentBottomRight"
                                   Grid.Row="2"
                                   Grid.Column="2"
-                                  Click="BIAlignment_Click">
+                                  Click="BIAlignment_Click"
+                                  Style="{StaticResource BIAlignmentToggleButtonStyle}">
                         <ToggleButton.Tag>
                             <!--  ConvergedAlignment: Vertical_Top (0x20) | Horizontal_Right (0x02)  -->
                             <x:Int32>34</x:Int32>
                         </ToggleButton.Tag>
                         <ToggleButton.Content>
-                            <FontIcon FontFamily="Segoe MDL2 Assets"
+                            <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                       Glyph="&#xEA5F;" />
                         </ToggleButton.Content>
                     </ToggleButton>
@@ -442,14 +456,14 @@
         <!--  Grouping: Text Formatting  -->
         <StackPanel Style="{StaticResource PivotStackStyle}">
             <TextBlock x:Uid="Appearance_TextFormattingHeader"
-                       Style="{StaticResource SubtitleTextBlockStyle}" />
+                       Style="{StaticResource TextBlockSubHeaderStyle}" />
 
             <!--  Intense is bold, bright  -->
             <local:SettingContainer x:Uid="Appearance_IntenseTextStyle"
-                                    Margin="0"
                                     ClearSettingValue="{x:Bind Appearance.ClearIntenseTextStyle}"
                                     HasSettingValue="{x:Bind Appearance.HasIntenseTextStyle, Mode=OneWay}"
-                                    SettingOverrideSource="{x:Bind Appearance.IntenseTextStyleOverrideSource, Mode=OneWay}">
+                                    SettingOverrideSource="{x:Bind Appearance.IntenseTextStyleOverrideSource, Mode=OneWay}"
+                                    Style="{StaticResource ExpanderSettingContainerStyle}">
                 <muxc:RadioButtons AutomationProperties.AccessibilityView="Content"
                                    ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
                                    ItemsSource="{x:Bind IntenseTextStyleList, Mode=OneWay}"
diff --git a/src/cascadia/TerminalSettingsEditor/ColorSchemes.xaml b/src/cascadia/TerminalSettingsEditor/ColorSchemes.xaml
index 4629cad1e0a..3515a213745 100644
--- a/src/cascadia/TerminalSettingsEditor/ColorSchemes.xaml
+++ b/src/cascadia/TerminalSettingsEditor/ColorSchemes.xaml
@@ -94,11 +94,17 @@
     </Page.Resources>
 
     <ScrollViewer ViewChanging="ViewChanging">
-        <StackPanel Margin="{StaticResource StandardIndentMargin}"
+        <StackPanel MaxWidth="{StaticResource StandardControlMaxWidth}"
+                    Margin="{StaticResource StandardIndentMargin}"
                     Spacing="24">
 
+            <TextBlock x:Uid="ColorSchemesDisclaimer"
+                       Margin="{StaticResource StandardIndentMargin}"
+                       Style="{StaticResource DisclaimerStyle}" />
+
             <!--  Select Color and Add New Button  -->
-            <StackPanel Orientation="Horizontal">
+            <StackPanel Margin="0,5,0,0"
+                        Orientation="Horizontal">
 
                 <StackPanel Orientation="Horizontal"
                             Visibility="{x:Bind local:Converters.InvertedBooleanToVisibility(IsRenaming), Mode=OneWay}">
diff --git a/src/cascadia/TerminalSettingsEditor/CommonResources.xaml b/src/cascadia/TerminalSettingsEditor/CommonResources.xaml
index c51856255d0..07e1e305d1b 100644
--- a/src/cascadia/TerminalSettingsEditor/CommonResources.xaml
+++ b/src/cascadia/TerminalSettingsEditor/CommonResources.xaml
@@ -11,30 +11,11 @@
         <ResourceDictionary Source="SettingContainerStyle.xaml" />
     </ResourceDictionary.MergedDictionaries>
 
-    <ResourceDictionary.ThemeDictionaries>
-        <ResourceDictionary x:Key="Light">
-            <Style x:Key="SecondaryTextBlockStyle"
-                   TargetType="TextBlock">
-                <Setter Property="Foreground" Value="{ThemeResource SystemBaseMediumColor}" />
-            </Style>
-        </ResourceDictionary>
-        <ResourceDictionary x:Key="Dark">
-            <Style x:Key="SecondaryTextBlockStyle"
-                   TargetType="TextBlock">
-                <Setter Property="Foreground" Value="{ThemeResource SystemBaseMediumColor}" />
-            </Style>
-        </ResourceDictionary>
-        <ResourceDictionary x:Key="HighContrast">
-            <Style x:Key="SecondaryTextBlockStyle"
-                   TargetType="TextBlock" />
-            <!--  Do not mess with the foreground color for High Contrast. Let it ride as is.  -->
-        </ResourceDictionary>
-    </ResourceDictionary.ThemeDictionaries>
-
     <x:Double x:Key="StandardIconSize">14.0</x:Double>
     <Thickness x:Key="StandardIndentMargin">13,0,0,0</Thickness>
     <Thickness x:Key="StandardControlMargin">0,24,0,0</Thickness>
     <x:Double x:Key="StandardBoxMinWidth">250</x:Double>
+    <x:Double x:Key="StandardControlMaxWidth">1000</x:Double>
 
     <!--
         This is for styling the entire items control used on the
@@ -48,15 +29,13 @@
     <!--  Used to stack a group of settings  -->
     <Style x:Key="SettingsStackStyle"
            TargetType="StackPanel">
-        <Setter Property="HorizontalAlignment" Value="Left" />
-        <Setter Property="Margin" Value="13,0,0,48" />
+        <Setter Property="Margin" Value="13,0,13,48" />
     </Style>
 
     <!--  Used to stack a group of settings inside a pivot  -->
     <Style x:Key="PivotStackStyle"
            TargetType="StackPanel">
-        <Setter Property="HorizontalAlignment" Value="Left" />
-        <Setter Property="Margin" Value="0,0,0,48" />
+        <Setter Property="Margin" Value="0,0,13,48" />
     </Style>
 
     <!--  Combo Box  -->
@@ -70,16 +49,24 @@
     <Style x:Key="TextBoxSettingStyle"
            BasedOn="{StaticResource DefaultTextBoxStyle}"
            TargetType="TextBox">
-        <Setter Property="Width" Value="{StaticResource StandardBoxMinWidth}" />
+        <Setter Property="MinWidth" Value="{StaticResource StandardBoxMinWidth}" />
+        <Setter Property="MaxWidth" Value="400" />
         <Setter Property="HorizontalAlignment" Value="Left" />
         <Setter Property="TextWrapping" Value="Wrap" />
     </Style>
 
+    <Style x:Key="TextBlockSubHeaderStyle"
+           BasedOn="{StaticResource SubtitleTextBlockStyle}"
+           TargetType="TextBlock">
+        <Setter Property="MaxWidth" Value="{StaticResource StandardControlMaxWidth}" />
+    </Style>
+
     <!--  Used for disclaimers  -->
     <Style x:Key="DisclaimerStyle"
            TargetType="TextBlock">
         <Setter Property="FontStyle" Value="Italic" />
         <Setter Property="TextWrapping" Value="WrapWholeWords" />
+        <Setter Property="MaxWidth" Value="1000" />
     </Style>
 
     <!--  Used for flyout messages  -->
@@ -93,7 +80,7 @@
     <!--  Number Box  -->
     <Style x:Key="NumberBoxSettingStyle"
            TargetType="muxc:NumberBox">
-        <Setter Property="SpinButtonPlacementMode" Value="Compact" />
+        <Setter Property="SpinButtonPlacementMode" Value="Inline" />
         <Setter Property="HorizontalAlignment" Value="Left" />
     </Style>
 
@@ -122,6 +109,7 @@
            TargetType="Button">
         <Setter Property="Height" Value="33" />
         <Setter Property="Width" Value="33" />
+        <Setter Property="Padding" Value="5" />
     </Style>
 
     <Style x:Key="AccentBrowseButtonStyle"
@@ -138,6 +126,7 @@
         <Setter Property="VerticalAlignment" Value="Bottom" />
         <Setter Property="Height" Value="33" />
         <Setter Property="Width" Value="33" />
+        <Setter Property="Padding" Value="5" />
     </Style>
 
     <Style x:Key="IconButtonTextBlockStyle"
@@ -145,6 +134,13 @@
         <Setter Property="Margin" Value="10,0,0,0" />
     </Style>
 
+    <Style x:Key="BIAlignmentToggleButtonStyle"
+           TargetType="ToggleButton">
+        <Setter Property="Width" Value="40" />
+        <Setter Property="Height" Value="40" />
+        <Setter Property="Padding" Value="8" />
+    </Style>
+
     <!--  Slider-Related Styling  -->
     <Style x:Key="SliderValueLabelStyle"
            TargetType="TextBlock">
@@ -159,4 +155,730 @@
         <Setter Property="Width" Value="{StaticResource StandardBoxMinWidth}" />
         <Setter Property="HorizontalAlignment" Value="Left" />
     </Style>
+
+    <Style x:Key="ToggleSwitchInExpanderStyle"
+           TargetType="ToggleSwitch">
+        <Setter Property="Foreground" Value="{ThemeResource ToggleSwitchContentForeground}" />
+        <Setter Property="HorizontalAlignment" Value="Right" />
+        <Setter Property="VerticalAlignment" Value="Center" />
+        <Setter Property="HorizontalContentAlignment" Value="Right" />
+        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
+        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
+        <Setter Property="ManipulationMode" Value="System,TranslateX" />
+        <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
+        <Setter Property="MinWidth" Value="{StaticResource ToggleSwitchThemeMinWidth}" />
+        <Setter Property="FocusVisualMargin" Value="-7,-3,-7,-3" />
+        <Setter Property="Margin" Value="0,0,10,0" />
+        <Setter Property="MinWidth" Value="0" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="ToggleSwitch">
+                    <Grid Background="{TemplateBinding Background}"
+                          BorderBrush="{TemplateBinding BorderBrush}"
+                          BorderThickness="{TemplateBinding BorderThickness}">
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="Auto" />
+                            <RowDefinition Height="*" />
+                        </Grid.RowDefinitions>
+
+                        <ContentPresenter x:Name="HeaderContentPresenter"
+                                          Grid.Row="0"
+                                          Margin="{ThemeResource ToggleSwitchTopHeaderMargin}"
+                                          VerticalAlignment="Top"
+                                          x:DeferLoadStrategy="Lazy"
+                                          AutomationProperties.AccessibilityView="Raw"
+                                          Content="{TemplateBinding Header}"
+                                          ContentTemplate="{TemplateBinding HeaderTemplate}"
+                                          Foreground="{ThemeResource ToggleSwitchHeaderForeground}"
+                                          IsHitTestVisible="False"
+                                          TextWrapping="Wrap"
+                                          Visibility="Collapsed" />
+                        <Grid Grid.Row="1"
+                              HorizontalAlignment="Left"
+                              VerticalAlignment="Top">
+
+                            <Grid.RowDefinitions>
+                                <RowDefinition Height="{ThemeResource ToggleSwitchPreContentMargin}" />
+                                <RowDefinition Height="Auto" />
+                                <RowDefinition Height="{ThemeResource ToggleSwitchPostContentMargin}" />
+                            </Grid.RowDefinitions>
+
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition Width="Auto" />
+                                <ColumnDefinition Width="12"
+                                                  MaxWidth="12" />
+                                <ColumnDefinition Width="Auto" />
+                            </Grid.ColumnDefinitions>
+                            <Grid x:Name="SwitchAreaGrid"
+                                  Grid.RowSpan="3"
+                                  Grid.ColumnSpan="3"
+                                  Margin="0,5"
+                                  Background="{ThemeResource ToggleSwitchContainerBackground}"
+                                  Control.IsTemplateFocusTarget="True" />
+                            <ContentPresenter x:Name="OffContentPresenter"
+                                              Grid.RowSpan="3"
+                                              Grid.Column="0"
+                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                                              AutomationProperties.AccessibilityView="Raw"
+                                              Content="{TemplateBinding OffContent}"
+                                              ContentTemplate="{TemplateBinding OffContentTemplate}"
+                                              Foreground="{TemplateBinding Foreground}"
+                                              IsHitTestVisible="False"
+                                              Opacity="0" />
+                            <ContentPresenter x:Name="OnContentPresenter"
+                                              Grid.RowSpan="3"
+                                              Grid.Column="0"
+                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                                              AutomationProperties.AccessibilityView="Raw"
+                                              Content="{TemplateBinding OnContent}"
+                                              ContentTemplate="{TemplateBinding OnContentTemplate}"
+                                              Foreground="{TemplateBinding Foreground}"
+                                              IsHitTestVisible="False"
+                                              Opacity="0" />
+                            <Rectangle x:Name="OuterBorder"
+                                       Grid.Row="1"
+                                       Grid.Column="2"
+                                       Width="40"
+                                       Height="20"
+                                       Fill="{ThemeResource ToggleSwitchFillOff}"
+                                       RadiusX="10"
+                                       RadiusY="10"
+                                       Stroke="{ThemeResource ToggleSwitchStrokeOff}"
+                                       StrokeThickness="{ThemeResource ToggleSwitchOuterBorderStrokeThickness}" />
+                            <Rectangle x:Name="SwitchKnobBounds"
+                                       Grid.Row="1"
+                                       Grid.Column="2"
+                                       Width="40"
+                                       Height="20"
+                                       Fill="{ThemeResource ToggleSwitchFillOn}"
+                                       Opacity="0"
+                                       RadiusX="10"
+                                       RadiusY="10"
+                                       Stroke="{ThemeResource ToggleSwitchStrokeOn}"
+                                       StrokeThickness="{ThemeResource ToggleSwitchOnStrokeThickness}" />
+                            <Grid x:Name="SwitchKnob"
+                                  Grid.Row="1"
+                                  Grid.Column="2"
+                                  Width="20"
+                                  Height="20"
+                                  HorizontalAlignment="Left">
+                                <Border x:Name="SwitchKnobOn"
+                                        Width="12"
+                                        Height="12"
+                                        Margin="0,0,1,0"
+                                        HorizontalAlignment="Center"
+                                        Background="{ThemeResource ToggleSwitchKnobFillOn}"
+                                        BorderBrush="{ThemeResource ToggleSwitchKnobStrokeOn}"
+                                        CornerRadius="7"
+                                        Opacity="0"
+                                        RenderTransformOrigin="0.5, 0.5">
+                                    <Border.RenderTransform>
+                                        <CompositeTransform />
+                                    </Border.RenderTransform>
+                                </Border>
+                                <Rectangle x:Name="SwitchKnobOff"
+                                           Width="12"
+                                           Height="12"
+                                           Margin="-1,0,0,0"
+                                           HorizontalAlignment="Center"
+                                           Fill="{ThemeResource ToggleSwitchKnobFillOff}"
+                                           RadiusX="7"
+                                           RadiusY="7"
+                                           RenderTransformOrigin="0.5, 0.5">
+                                    <Rectangle.RenderTransform>
+                                        <CompositeTransform />
+                                    </Rectangle.RenderTransform>
+                                </Rectangle>
+                                <Grid.RenderTransform>
+                                    <TranslateTransform x:Name="KnobTranslateTransform" />
+                                </Grid.RenderTransform>
+                            </Grid>
+                            <Thumb x:Name="SwitchThumb"
+                                   Grid.RowSpan="3"
+                                   Grid.ColumnSpan="3"
+                                   AutomationProperties.AccessibilityView="Raw">
+                                <Thumb.Template>
+                                    <ControlTemplate TargetType="Thumb">
+                                        <Rectangle Fill="Transparent" />
+                                    </ControlTemplate>
+                                </Thumb.Template>
+                            </Thumb>
+
+                        </Grid>
+
+                        <VisualStateManager.VisualStateGroups>
+                            <VisualStateGroup x:Name="CommonStates">
+                                <VisualState x:Name="Normal">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder"
+                                                                       Storyboard.TargetProperty="Stroke">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ToggleSwitchStrokeOff}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder"
+                                                                       Storyboard.TargetProperty="Fill">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ToggleSwitchFillOff}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff"
+                                                                       Storyboard.TargetProperty="Fill">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ToggleSwitchKnobFillOff}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn"
+                                                                       Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ToggleSwitchKnobFillOn}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds"
+                                                                       Storyboard.TargetProperty="Fill">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ToggleSwitchFillOn}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds"
+                                                                       Storyboard.TargetProperty="Stroke">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ToggleSwitchStrokeOn}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchAreaGrid"
+                                                                       Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ToggleSwitchContainerBackground}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True"
+                                                                       Storyboard.TargetName="SwitchKnobOn"
+                                                                       Storyboard.TargetProperty="Width">
+                                            <SplineDoubleKeyFrame KeySpline="{StaticResource ControlFastOutSlowInKeySpline}"
+                                                                  KeyTime="{StaticResource ControlFasterAnimationDuration}"
+                                                                  Value="12" />
+                                        </DoubleAnimationUsingKeyFrames>
+                                        <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True"
+                                                                       Storyboard.TargetName="SwitchKnobOn"
+                                                                       Storyboard.TargetProperty="Height">
+                                            <SplineDoubleKeyFrame KeySpline="{StaticResource ControlFastOutSlowInKeySpline}"
+                                                                  KeyTime="{StaticResource ControlFasterAnimationDuration}"
+                                                                  Value="12" />
+                                        </DoubleAnimationUsingKeyFrames>
+                                        <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True"
+                                                                       Storyboard.TargetName="SwitchKnobOff"
+                                                                       Storyboard.TargetProperty="Width">
+                                            <SplineDoubleKeyFrame KeySpline="{StaticResource ControlFastOutSlowInKeySpline}"
+                                                                  KeyTime="{StaticResource ControlFasterAnimationDuration}"
+                                                                  Value="12" />
+                                        </DoubleAnimationUsingKeyFrames>
+                                        <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True"
+                                                                       Storyboard.TargetName="SwitchKnobOff"
+                                                                       Storyboard.TargetProperty="Height">
+                                            <SplineDoubleKeyFrame KeySpline="{StaticResource ControlFastOutSlowInKeySpline}"
+                                                                  KeyTime="{StaticResource ControlFasterAnimationDuration}"
+                                                                  Value="12" />
+                                        </DoubleAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                </VisualState>
+                                <VisualState x:Name="PointerOver">
+                                    <Storyboard>
+                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder"
+                                                                      Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)">
+                                            <LinearColorKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}"
+                                                                 Value="{ThemeResource ToggleSwitchStrokeOffPointerOver}" />
+                                        </ColorAnimationUsingKeyFrames>
+                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder"
+                                                                      Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
+                                            <LinearColorKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}"
+                                                                 Value="{ThemeResource ToggleSwitchFillOffPointerOver}" />
+                                        </ColorAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff"
+                                                                       Storyboard.TargetProperty="Fill">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ToggleSwitchKnobFillOffPointerOver}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn"
+                                                                       Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ToggleSwitchKnobFillOnPointerOver}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds"
+                                                                       Storyboard.TargetProperty="Fill">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ToggleSwitchFillOnPointerOver}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds"
+                                                                       Storyboard.TargetProperty="Stroke">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ToggleSwitchStrokeOnPointerOver}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="SwitchAreaGrid"
+                                                                      Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
+                                            <LinearColorKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}"
+                                                                 Value="{ThemeResource ToggleSwitchContainerBackgroundPointerOver}" />
+                                        </ColorAnimationUsingKeyFrames>
+                                        <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True"
+                                                                       Storyboard.TargetName="SwitchKnobOn"
+                                                                       Storyboard.TargetProperty="Width">
+                                            <SplineDoubleKeyFrame KeySpline="{StaticResource ControlFastOutSlowInKeySpline}"
+                                                                  KeyTime="{StaticResource ControlFasterAnimationDuration}"
+                                                                  Value="14" />
+                                        </DoubleAnimationUsingKeyFrames>
+                                        <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True"
+                                                                       Storyboard.TargetName="SwitchKnobOn"
+                                                                       Storyboard.TargetProperty="Height">
+                                            <SplineDoubleKeyFrame KeySpline="{StaticResource ControlFastOutSlowInKeySpline}"
+                                                                  KeyTime="{StaticResource ControlFasterAnimationDuration}"
+                                                                  Value="14" />
+                                        </DoubleAnimationUsingKeyFrames>
+                                        <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True"
+                                                                       Storyboard.TargetName="SwitchKnobOff"
+                                                                       Storyboard.TargetProperty="Width">
+                                            <SplineDoubleKeyFrame KeySpline="{StaticResource ControlFastOutSlowInKeySpline}"
+                                                                  KeyTime="{StaticResource ControlFasterAnimationDuration}"
+                                                                  Value="14" />
+                                        </DoubleAnimationUsingKeyFrames>
+                                        <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True"
+                                                                       Storyboard.TargetName="SwitchKnobOff"
+                                                                       Storyboard.TargetProperty="Height">
+                                            <SplineDoubleKeyFrame KeySpline="{StaticResource ControlFastOutSlowInKeySpline}"
+                                                                  KeyTime="{StaticResource ControlFasterAnimationDuration}"
+                                                                  Value="14" />
+                                        </DoubleAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                </VisualState>
+                                <VisualState x:Name="Pressed">
+
+                                    <VisualState.Setters>
+                                        <Setter Target="SwitchKnobOn.HorizontalAlignment" Value="Right" />
+                                        <Setter Target="SwitchKnobOn.Margin" Value="0,0,3,0" />
+                                        <Setter Target="SwitchKnobOff.HorizontalAlignment" Value="Left" />
+                                        <Setter Target="SwitchKnobOff.Margin" Value="3,0,0,0" />
+                                    </VisualState.Setters>
+
+                                    <Storyboard>
+                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder"
+                                                                      Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)">
+                                            <LinearColorKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}"
+                                                                 Value="{ThemeResource ToggleSwitchStrokeOffPressed}" />
+                                        </ColorAnimationUsingKeyFrames>
+                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder"
+                                                                      Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
+                                            <LinearColorKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}"
+                                                                 Value="{ThemeResource ToggleSwitchFillOffPressed}" />
+                                        </ColorAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds"
+                                                                       Storyboard.TargetProperty="Fill">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ToggleSwitchFillOnPressed}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds"
+                                                                       Storyboard.TargetProperty="Stroke">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ToggleSwitchStrokeOnPressed}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff"
+                                                                       Storyboard.TargetProperty="Fill">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ToggleSwitchKnobFillOffPressed}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn"
+                                                                       Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ToggleSwitchKnobFillOnPressed}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="SwitchAreaGrid"
+                                                                      Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
+                                            <LinearColorKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}"
+                                                                 Value="{ThemeResource ToggleSwitchContainerBackgroundPressed}" />
+                                        </ColorAnimationUsingKeyFrames>
+                                        <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True"
+                                                                       Storyboard.TargetName="SwitchKnobOn"
+                                                                       Storyboard.TargetProperty="Width">
+                                            <SplineDoubleKeyFrame KeySpline="{StaticResource ControlFastOutSlowInKeySpline}"
+                                                                  KeyTime="{StaticResource ControlFasterAnimationDuration}"
+                                                                  Value="17" />
+                                        </DoubleAnimationUsingKeyFrames>
+                                        <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True"
+                                                                       Storyboard.TargetName="SwitchKnobOn"
+                                                                       Storyboard.TargetProperty="Height">
+                                            <SplineDoubleKeyFrame KeySpline="{StaticResource ControlFastOutSlowInKeySpline}"
+                                                                  KeyTime="{StaticResource ControlFasterAnimationDuration}"
+                                                                  Value="14" />
+                                        </DoubleAnimationUsingKeyFrames>
+                                        <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True"
+                                                                       Storyboard.TargetName="SwitchKnobOff"
+                                                                       Storyboard.TargetProperty="Width">
+                                            <SplineDoubleKeyFrame KeySpline="{StaticResource ControlFastOutSlowInKeySpline}"
+                                                                  KeyTime="{StaticResource ControlFasterAnimationDuration}"
+                                                                  Value="17" />
+                                        </DoubleAnimationUsingKeyFrames>
+                                        <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True"
+                                                                       Storyboard.TargetName="SwitchKnobOff"
+                                                                       Storyboard.TargetProperty="Height">
+                                            <SplineDoubleKeyFrame KeySpline="{StaticResource ControlFastOutSlowInKeySpline}"
+                                                                  KeyTime="{StaticResource ControlFasterAnimationDuration}"
+                                                                  Value="14" />
+                                        </DoubleAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                </VisualState>
+                                <VisualState x:Name="Disabled">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentPresenter"
+                                                                       Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ToggleSwitchHeaderForegroundDisabled}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OffContentPresenter"
+                                                                       Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ToggleSwitchContentForegroundDisabled}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OnContentPresenter"
+                                                                       Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ToggleSwitchContentForegroundDisabled}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder"
+                                                                      Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)">
+                                            <LinearColorKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}"
+                                                                 Value="{ThemeResource ToggleSwitchStrokeOffDisabled}" />
+                                        </ColorAnimationUsingKeyFrames>
+                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder"
+                                                                      Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
+                                            <LinearColorKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}"
+                                                                 Value="{ThemeResource ToggleSwitchFillOffDisabled}" />
+                                        </ColorAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds"
+                                                                       Storyboard.TargetProperty="Fill">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ToggleSwitchFillOnDisabled}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds"
+                                                                       Storyboard.TargetProperty="Stroke">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ToggleSwitchStrokeOnDisabled}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff"
+                                                                       Storyboard.TargetProperty="Fill">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ToggleSwitchKnobFillOffDisabled}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn"
+                                                                       Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ToggleSwitchKnobFillOnDisabled}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="SwitchAreaGrid"
+                                                                      Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
+                                            <LinearColorKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}"
+                                                                 Value="{ThemeResource ToggleSwitchContainerBackgroundDisabled}" />
+                                        </ColorAnimationUsingKeyFrames>
+                                        <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True"
+                                                                       Storyboard.TargetName="SwitchKnobOn"
+                                                                       Storyboard.TargetProperty="Width">
+                                            <SplineDoubleKeyFrame KeySpline="{StaticResource ControlFastOutSlowInKeySpline}"
+                                                                  KeyTime="{StaticResource ControlNormalAnimationDuration}"
+                                                                  Value="12" />
+                                        </DoubleAnimationUsingKeyFrames>
+                                        <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True"
+                                                                       Storyboard.TargetName="SwitchKnobOn"
+                                                                       Storyboard.TargetProperty="Height">
+                                            <SplineDoubleKeyFrame KeySpline="{StaticResource ControlFastOutSlowInKeySpline}"
+                                                                  KeyTime="{StaticResource ControlNormalAnimationDuration}"
+                                                                  Value="12" />
+                                        </DoubleAnimationUsingKeyFrames>
+                                        <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True"
+                                                                       Storyboard.TargetName="SwitchKnobOff"
+                                                                       Storyboard.TargetProperty="Width">
+                                            <SplineDoubleKeyFrame KeySpline="{StaticResource ControlFastOutSlowInKeySpline}"
+                                                                  KeyTime="{StaticResource ControlNormalAnimationDuration}"
+                                                                  Value="12" />
+                                        </DoubleAnimationUsingKeyFrames>
+                                        <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True"
+                                                                       Storyboard.TargetName="SwitchKnobOff"
+                                                                       Storyboard.TargetProperty="Height">
+                                            <SplineDoubleKeyFrame KeySpline="{StaticResource ControlFastOutSlowInKeySpline}"
+                                                                  KeyTime="{StaticResource ControlNormalAnimationDuration}"
+                                                                  Value="12" />
+                                        </DoubleAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                </VisualState>
+
+                            </VisualStateGroup>
+                            <VisualStateGroup x:Name="ToggleStates">
+
+                                <VisualStateGroup.Transitions>
+                                    <VisualTransition x:Name="DraggingToOnTransition"
+                                                      GeneratedDuration="0"
+                                                      From="Dragging"
+                                                      To="On">
+
+                                        <Storyboard>
+                                            <RepositionThemeAnimation FromHorizontalOffset="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.KnobCurrentToOnOffset}"
+                                                                      TargetName="SwitchKnob" />
+                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds"
+                                                                           Storyboard.TargetProperty="Opacity">
+                                                <LinearDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}"
+                                                                      Value="1" />
+                                            </DoubleAnimationUsingKeyFrames>
+                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder"
+                                                                           Storyboard.TargetProperty="Opacity">
+                                                <LinearDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}"
+                                                                      Value="0" />
+                                            </DoubleAnimationUsingKeyFrames>
+                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn"
+                                                                           Storyboard.TargetProperty="Opacity">
+                                                <LinearDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}"
+                                                                      Value="1" />
+                                            </DoubleAnimationUsingKeyFrames>
+                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff"
+                                                                           Storyboard.TargetProperty="Opacity">
+                                                <LinearDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}"
+                                                                      Value="0" />
+                                            </DoubleAnimationUsingKeyFrames>
+                                        </Storyboard>
+                                    </VisualTransition>
+                                    <VisualTransition x:Name="OnToDraggingTransition"
+                                                      GeneratedDuration="0"
+                                                      From="On"
+                                                      To="Dragging">
+                                        <Storyboard>
+                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds"
+                                                                           Storyboard.TargetProperty="Opacity">
+                                                <LinearDoubleKeyFrame KeyTime="0"
+                                                                      Value="1" />
+                                            </DoubleAnimationUsingKeyFrames>
+                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn"
+                                                                           Storyboard.TargetProperty="Opacity">
+                                                <LinearDoubleKeyFrame KeyTime="0"
+                                                                      Value="1" />
+                                            </DoubleAnimationUsingKeyFrames>
+                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff"
+                                                                           Storyboard.TargetProperty="Opacity">
+                                                <LinearDoubleKeyFrame KeyTime="0"
+                                                                      Value="0" />
+                                            </DoubleAnimationUsingKeyFrames>
+                                        </Storyboard>
+                                    </VisualTransition>
+                                    <VisualTransition x:Name="DraggingToOffTransition"
+                                                      GeneratedDuration="0"
+                                                      From="Dragging"
+                                                      To="Off">
+
+                                        <Storyboard>
+                                            <RepositionThemeAnimation FromHorizontalOffset="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.KnobCurrentToOffOffset}"
+                                                                      TargetName="SwitchKnob" />
+                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds"
+                                                                           Storyboard.TargetProperty="Opacity">
+                                                <LinearDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}"
+                                                                      Value="0" />
+                                            </DoubleAnimationUsingKeyFrames>
+                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn"
+                                                                           Storyboard.TargetProperty="Opacity">
+                                                <LinearDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}"
+                                                                      Value="0" />
+                                            </DoubleAnimationUsingKeyFrames>
+                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff"
+                                                                           Storyboard.TargetProperty="Opacity">
+                                                <LinearDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}"
+                                                                      Value="1" />
+                                            </DoubleAnimationUsingKeyFrames>
+                                        </Storyboard>
+                                    </VisualTransition>
+                                    <VisualTransition x:Name="OnToOffTransition"
+                                                      GeneratedDuration="0"
+                                                      From="On"
+                                                      To="Off">
+
+                                        <Storyboard>
+                                            <RepositionThemeAnimation FromHorizontalOffset="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.KnobOnToOffOffset}"
+                                                                      TargetName="SwitchKnob" />
+                                        </Storyboard>
+                                    </VisualTransition>
+                                    <VisualTransition x:Name="OffToOnTransition"
+                                                      GeneratedDuration="0"
+                                                      From="Off"
+                                                      To="On">
+
+                                        <Storyboard>
+                                            <RepositionThemeAnimation FromHorizontalOffset="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.KnobOffToOnOffset}"
+                                                                      TargetName="SwitchKnob" />
+                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds"
+                                                                           Storyboard.TargetProperty="Opacity">
+                                                <LinearDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}"
+                                                                      Value="1" />
+                                            </DoubleAnimationUsingKeyFrames>
+                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder"
+                                                                           Storyboard.TargetProperty="Opacity">
+                                                <LinearDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}"
+                                                                      Value="0" />
+                                            </DoubleAnimationUsingKeyFrames>
+                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn"
+                                                                           Storyboard.TargetProperty="Opacity">
+                                                <LinearDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}"
+                                                                      Value="1" />
+                                            </DoubleAnimationUsingKeyFrames>
+                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff"
+                                                                           Storyboard.TargetProperty="Opacity">
+                                                <LinearDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}"
+                                                                      Value="0" />
+                                            </DoubleAnimationUsingKeyFrames>
+                                        </Storyboard>
+                                    </VisualTransition>
+                                </VisualStateGroup.Transitions>
+                                <VisualState x:Name="Dragging" />
+                                <VisualState x:Name="Off" />
+                                <VisualState x:Name="On">
+                                    <Storyboard>
+                                        <DoubleAnimation Storyboard.TargetName="KnobTranslateTransform"
+                                                         Storyboard.TargetProperty="X"
+                                                         To="20"
+                                                         Duration="0" />
+                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds"
+                                                                       Storyboard.TargetProperty="Opacity">
+                                            <LinearDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}"
+                                                                  Value="1" />
+                                        </DoubleAnimationUsingKeyFrames>
+                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder"
+                                                                       Storyboard.TargetProperty="Opacity">
+                                            <LinearDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}"
+                                                                  Value="0" />
+                                        </DoubleAnimationUsingKeyFrames>
+                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn"
+                                                                       Storyboard.TargetProperty="Opacity">
+                                            <LinearDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}"
+                                                                  Value="1" />
+                                        </DoubleAnimationUsingKeyFrames>
+                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff"
+                                                                       Storyboard.TargetProperty="Opacity">
+                                            <LinearDoubleKeyFrame KeyTime="{StaticResource ControlFasterAnimationDuration}"
+                                                                  Value="0" />
+                                        </DoubleAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                </VisualState>
+
+                            </VisualStateGroup>
+                            <VisualStateGroup x:Name="ContentStates">
+                                <VisualState x:Name="OffContent">
+
+                                    <Storyboard>
+                                        <DoubleAnimation Storyboard.TargetName="OffContentPresenter"
+                                                         Storyboard.TargetProperty="Opacity"
+                                                         To="1"
+                                                         Duration="0" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OffContentPresenter"
+                                                                       Storyboard.TargetProperty="IsHitTestVisible">
+                                            <DiscreteObjectKeyFrame KeyTime="0">
+                                                <DiscreteObjectKeyFrame.Value>
+                                                    <x:Boolean>True</x:Boolean>
+                                                </DiscreteObjectKeyFrame.Value>
+                                            </DiscreteObjectKeyFrame>
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                </VisualState>
+                                <VisualState x:Name="OnContent">
+
+                                    <Storyboard>
+                                        <DoubleAnimation Storyboard.TargetName="OnContentPresenter"
+                                                         Storyboard.TargetProperty="Opacity"
+                                                         To="1"
+                                                         Duration="0" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OnContentPresenter"
+                                                                       Storyboard.TargetProperty="IsHitTestVisible">
+                                            <DiscreteObjectKeyFrame KeyTime="0">
+                                                <DiscreteObjectKeyFrame.Value>
+                                                    <x:Boolean>True</x:Boolean>
+                                                </DiscreteObjectKeyFrame.Value>
+                                            </DiscreteObjectKeyFrame>
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                </VisualState>
+
+                            </VisualStateGroup>
+
+                        </VisualStateManager.VisualStateGroups>
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <Style x:Key="NavigatorButtonStyle"
+           TargetType="Button">
+        <Setter Property="Background" Value="{ThemeResource ExpanderHeaderBackground}" />
+        <Setter Property="MinWidth" Value="{ThemeResource FlyoutThemeMinWidth}" />
+        <Setter Property="MaxWidth" Value="1000" />
+        <Setter Property="MinHeight" Value="64" />
+        <Setter Property="BorderThickness" Value="{ThemeResource ExpanderHeaderBorderThickness}" />
+        <Setter Property="BorderBrush" Value="{ThemeResource ExpanderHeaderBorderBrush}" />
+        <Setter Property="Padding" Value="16,0,8,0" />
+        <Setter Property="Margin" Value="0,4,0,0" />
+        <Setter Property="HorizontalAlignment" Value="Stretch" />
+        <Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
+        <Setter Property="VerticalAlignment" Value="Stretch" />
+        <Setter Property="HorizontalContentAlignment" Value="Left" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="Button">
+                    <Grid x:Name="Grid"
+                          Padding="{TemplateBinding Padding}"
+                          AutomationProperties.AccessibilityView="Raw"
+                          Background="{TemplateBinding Background}"
+                          BorderBrush="{TemplateBinding BorderBrush}"
+                          BorderThickness="{TemplateBinding BorderThickness}"
+                          CornerRadius="{TemplateBinding CornerRadius}">
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="*" />
+                            <ColumnDefinition Width="Auto" />
+                        </Grid.ColumnDefinitions>
+                        <ContentPresenter x:Name="ContentPresenter"
+                                          Grid.Column="0"
+                                          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                                          Content="{TemplateBinding Content}"
+                                          ContentTemplate="{TemplateBinding ContentTemplate}"
+                                          ContentTransitions="{TemplateBinding ContentTransitions}" />
+                        <FontIcon Margin="20,0,8,0"
+                                  HorizontalAlignment="Right"
+                                  FontSize="10"
+                                  FontWeight="Black"
+                                  Glyph="&#xE76C;" />
+
+                        <VisualStateManager.VisualStateGroups>
+                            <VisualStateGroup x:Name="CommonStates">
+                                <VisualState x:Name="Normal" />
+                                <VisualState x:Name="PointerOver">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid"
+                                                                       Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ToggleButtonBackgroundPointerOver}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid"
+                                                                       Storyboard.TargetProperty="BorderBrush">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ToggleButtonBorderBrushPointerOver}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                </VisualState>
+                                <VisualState x:Name="Pressed">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid"
+                                                                       Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ToggleButtonBackgroundPressed}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid"
+                                                                       Storyboard.TargetProperty="BorderBrush">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource ToggleButtonBorderBrushPressed}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                </VisualState>
+                            </VisualStateGroup>
+                        </VisualStateManager.VisualStateGroups>
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
 </ResourceDictionary>
diff --git a/src/cascadia/TerminalSettingsEditor/GlobalAppearance.h b/src/cascadia/TerminalSettingsEditor/GlobalAppearance.h
index 8b0082a95ee..553c6a2e872 100644
--- a/src/cascadia/TerminalSettingsEditor/GlobalAppearance.h
+++ b/src/cascadia/TerminalSettingsEditor/GlobalAppearance.h
@@ -28,8 +28,8 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         bool FeatureNotificationIconEnabled() const noexcept;
 
         WINRT_PROPERTY(Editor::GlobalAppearancePageNavigationState, State, nullptr);
-        GETSET_BINDABLE_ENUM_SETTING(Theme, winrt::Windows::UI::Xaml::ElementTheme, State().Globals, Theme);
-        GETSET_BINDABLE_ENUM_SETTING(TabWidthMode, winrt::Microsoft::UI::Xaml::Controls::TabViewWidthMode, State().Globals, TabWidthMode);
+        GETSET_BINDABLE_ENUM_SETTING(Theme, winrt::Windows::UI::Xaml::ElementTheme, State().Globals().Theme);
+        GETSET_BINDABLE_ENUM_SETTING(TabWidthMode, winrt::Microsoft::UI::Xaml::Controls::TabViewWidthMode, State().Globals().TabWidthMode);
 
     public:
         // LanguageDisplayConverter maps the given BCP 47 tag to a localized string.
diff --git a/src/cascadia/TerminalSettingsEditor/GlobalAppearance.xaml b/src/cascadia/TerminalSettingsEditor/GlobalAppearance.xaml
index 7361ec7cb8a..91c1310dfe5 100644
--- a/src/cascadia/TerminalSettingsEditor/GlobalAppearance.xaml
+++ b/src/cascadia/TerminalSettingsEditor/GlobalAppearance.xaml
@@ -28,7 +28,6 @@
         <StackPanel Style="{StaticResource SettingsStackStyle}">
             <!--  Language  -->
             <local:SettingContainer x:Uid="Globals_Language"
-                                    Margin="0"
                                     Visibility="{x:Bind LanguageSelectorAvailable}">
                 <ComboBox ItemsSource="{x:Bind LanguageList}"
                           SelectedItem="{x:Bind CurrentLanguage, Mode=TwoWay}">
@@ -41,7 +40,8 @@
             </local:SettingContainer>
 
             <!--  Theme  -->
-            <local:SettingContainer x:Uid="Globals_Theme">
+            <local:SettingContainer x:Uid="Globals_Theme"
+                                    Style="{StaticResource ExpanderSettingContainerStyle}">
                 <muxc:RadioButtons AutomationProperties.AccessibilityView="Content"
                                    ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
                                    ItemsSource="{x:Bind ThemeList, Mode=OneWay}"
@@ -50,31 +50,37 @@
 
             <!--  Always show tabs  -->
             <local:SettingContainer x:Uid="Globals_AlwaysShowTabs">
-                <ToggleSwitch IsOn="{x:Bind State.Globals.AlwaysShowTabs, Mode=TwoWay}" />
+                <ToggleSwitch IsOn="{x:Bind State.Globals.AlwaysShowTabs, Mode=TwoWay}"
+                              Style="{StaticResource ToggleSwitchInExpanderStyle}" />
             </local:SettingContainer>
 
             <!--  Show Titlebar  -->
             <local:SettingContainer x:Uid="Globals_ShowTitlebar">
-                <ToggleSwitch IsOn="{x:Bind State.Globals.ShowTabsInTitlebar, Mode=TwoWay}" />
+                <ToggleSwitch IsOn="{x:Bind State.Globals.ShowTabsInTitlebar, Mode=TwoWay}"
+                              Style="{StaticResource ToggleSwitchInExpanderStyle}" />
             </local:SettingContainer>
 
             <!--  Show Acrylic in Tab Row  -->
             <local:SettingContainer x:Uid="Globals_AcrylicTabRow">
-                <ToggleSwitch IsOn="{x:Bind State.Globals.UseAcrylicInTabRow, Mode=TwoWay}" />
+                <ToggleSwitch IsOn="{x:Bind State.Globals.UseAcrylicInTabRow, Mode=TwoWay}"
+                              Style="{StaticResource ToggleSwitchInExpanderStyle}" />
             </local:SettingContainer>
 
             <!--  Show Title in Titlebar  -->
             <local:SettingContainer x:Uid="Globals_ShowTitleInTitlebar">
-                <ToggleSwitch IsOn="{x:Bind State.Globals.ShowTitleInTitlebar, Mode=TwoWay}" />
+                <ToggleSwitch IsOn="{x:Bind State.Globals.ShowTitleInTitlebar, Mode=TwoWay}"
+                              Style="{StaticResource ToggleSwitchInExpanderStyle}" />
             </local:SettingContainer>
 
             <!--  Always on Top  -->
             <local:SettingContainer x:Uid="Globals_AlwaysOnTop">
-                <ToggleSwitch IsOn="{x:Bind State.Globals.AlwaysOnTop, Mode=TwoWay}" />
+                <ToggleSwitch IsOn="{x:Bind State.Globals.AlwaysOnTop, Mode=TwoWay}"
+                              Style="{StaticResource ToggleSwitchInExpanderStyle}" />
             </local:SettingContainer>
 
             <!--  Tab Width Mode  -->
-            <local:SettingContainer x:Uid="Globals_TabWidthMode">
+            <local:SettingContainer x:Uid="Globals_TabWidthMode"
+                                    Style="{StaticResource ExpanderSettingContainerStyle}">
                 <muxc:RadioButtons AutomationProperties.AccessibilityView="Content"
                                    ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
                                    ItemsSource="{x:Bind TabWidthModeList, Mode=OneWay}"
@@ -84,19 +90,22 @@
             <!--  Disable Animations  -->
             <!--  NOTE: the UID is "DisablePaneAnimationsReversed" not "DisablePaneAnimations". See GH#9124 for more details.  -->
             <local:SettingContainer x:Uid="Globals_DisableAnimationsReversed">
-                <ToggleSwitch IsOn="{x:Bind local:Converters.InvertBoolean(State.Globals.DisableAnimations), BindBack=State.Globals.SetInvertedDisableAnimationsValue, Mode=TwoWay}" />
+                <ToggleSwitch IsOn="{x:Bind local:Converters.InvertBoolean(State.Globals.DisableAnimations), BindBack=State.Globals.SetInvertedDisableAnimationsValue, Mode=TwoWay}"
+                              Style="{StaticResource ToggleSwitchInExpanderStyle}" />
             </local:SettingContainer>
 
             <!--  Always Show Notification Icon  -->
             <local:SettingContainer x:Uid="Globals_AlwaysShowNotificationIcon"
                                     Visibility="{x:Bind FeatureNotificationIconEnabled}">
-                <ToggleSwitch IsOn="{x:Bind State.Globals.AlwaysShowNotificationIcon, Mode=TwoWay}" />
+                <ToggleSwitch IsOn="{x:Bind State.Globals.AlwaysShowNotificationIcon, Mode=TwoWay}"
+                              Style="{StaticResource ToggleSwitchInExpanderStyle}" />
             </local:SettingContainer>
 
             <!--  Minimize To Notification Area  -->
             <local:SettingContainer x:Uid="Globals_MinimizeToNotificationArea"
                                     Visibility="{x:Bind FeatureNotificationIconEnabled}">
-                <ToggleSwitch IsOn="{x:Bind State.Globals.MinimizeToNotificationArea, Mode=TwoWay}" />
+                <ToggleSwitch IsOn="{x:Bind State.Globals.MinimizeToNotificationArea, Mode=TwoWay}"
+                              Style="{StaticResource ToggleSwitchInExpanderStyle}" />
             </local:SettingContainer>
         </StackPanel>
     </ScrollViewer>
diff --git a/src/cascadia/TerminalSettingsEditor/Interaction.h b/src/cascadia/TerminalSettingsEditor/Interaction.h
index bf6dc598b26..d4178593bb5 100644
--- a/src/cascadia/TerminalSettingsEditor/Interaction.h
+++ b/src/cascadia/TerminalSettingsEditor/Interaction.h
@@ -26,8 +26,8 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
 
         WINRT_PROPERTY(Editor::InteractionPageNavigationState, State, nullptr);
 
-        GETSET_BINDABLE_ENUM_SETTING(TabSwitcherMode, Model::TabSwitcherMode, State().Globals, TabSwitcherMode);
-        GETSET_BINDABLE_ENUM_SETTING(CopyFormat, winrt::Microsoft::Terminal::Control::CopyFormat, State().Globals, CopyFormatting);
+        GETSET_BINDABLE_ENUM_SETTING(TabSwitcherMode, Model::TabSwitcherMode, State().Globals().TabSwitcherMode);
+        GETSET_BINDABLE_ENUM_SETTING(CopyFormat, winrt::Microsoft::Terminal::Control::CopyFormat, State().Globals().CopyFormatting);
     };
 }
 
diff --git a/src/cascadia/TerminalSettingsEditor/Interaction.xaml b/src/cascadia/TerminalSettingsEditor/Interaction.xaml
index 6b93c5847fb..6bf232bb3b3 100644
--- a/src/cascadia/TerminalSettingsEditor/Interaction.xaml
+++ b/src/cascadia/TerminalSettingsEditor/Interaction.xaml
@@ -27,13 +27,14 @@
     <ScrollViewer ViewChanging="ViewChanging">
         <StackPanel Style="{StaticResource SettingsStackStyle}">
             <!--  Copy On Select  -->
-            <local:SettingContainer x:Uid="Globals_CopyOnSelect"
-                                    Margin="0">
-                <ToggleSwitch IsOn="{x:Bind State.Globals.CopyOnSelect, Mode=TwoWay}" />
+            <local:SettingContainer x:Uid="Globals_CopyOnSelect">
+                <ToggleSwitch IsOn="{x:Bind State.Globals.CopyOnSelect, Mode=TwoWay}"
+                              Style="{StaticResource ToggleSwitchInExpanderStyle}" />
             </local:SettingContainer>
 
             <!--  Copy Format  -->
-            <local:SettingContainer x:Uid="Globals_CopyFormat">
+            <local:SettingContainer x:Uid="Globals_CopyFormat"
+                                    Style="{StaticResource ExpanderSettingContainerStyle}">
                 <muxc:RadioButtons AutomationProperties.AccessibilityView="Content"
                                    ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
                                    ItemsSource="{x:Bind CopyFormatList, Mode=OneWay}"
@@ -42,11 +43,14 @@
 
             <!--  Trim Block Selection  -->
             <local:SettingContainer x:Uid="Globals_TrimBlockSelection">
-                <ToggleSwitch IsOn="{x:Bind State.Globals.TrimBlockSelection, Mode=TwoWay}" />
+                <ToggleSwitch IsOn="{x:Bind State.Globals.TrimBlockSelection, Mode=TwoWay}"
+                              Style="{StaticResource ToggleSwitchInExpanderStyle}" />
             </local:SettingContainer>
 
             <!--  Word Delimiters  -->
-            <local:SettingContainer x:Uid="Globals_WordDelimiters">
+            <local:SettingContainer x:Uid="Globals_WordDelimiters"
+                                    CurrentValue="{x:Bind State.Globals.WordDelimiters, Mode=OneWay}"
+                                    Style="{StaticResource ExpanderSettingContainerStyle}">
                 <TextBox IsSpellCheckEnabled="False"
                          Style="{StaticResource TextBoxSettingStyle}"
                          Text="{x:Bind State.Globals.WordDelimiters, Mode=TwoWay}" />
@@ -54,11 +58,13 @@
 
             <!--  Snap On Resize  -->
             <local:SettingContainer x:Uid="Globals_SnapToGridOnResize">
-                <ToggleSwitch IsOn="{x:Bind State.Globals.SnapToGridOnResize, Mode=TwoWay}" />
+                <ToggleSwitch IsOn="{x:Bind State.Globals.SnapToGridOnResize, Mode=TwoWay}"
+                              Style="{StaticResource ToggleSwitchInExpanderStyle}" />
             </local:SettingContainer>
 
             <!--  Tab Switcher Mode  -->
-            <local:SettingContainer x:Uid="Globals_TabSwitcherMode">
+            <local:SettingContainer x:Uid="Globals_TabSwitcherMode"
+                                    Style="{StaticResource ExpanderSettingContainerStyle}">
                 <muxc:RadioButtons AutomationProperties.AccessibilityView="Content"
                                    ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
                                    ItemsSource="{x:Bind TabSwitcherModeList}"
@@ -67,12 +73,14 @@
 
             <!--  Focus Follow Mouse Mode  -->
             <local:SettingContainer x:Uid="Globals_FocusFollowMouse">
-                <ToggleSwitch IsOn="{x:Bind State.Globals.FocusFollowMouse, Mode=TwoWay}" />
+                <ToggleSwitch IsOn="{x:Bind State.Globals.FocusFollowMouse, Mode=TwoWay}"
+                              Style="{StaticResource ToggleSwitchInExpanderStyle}" />
             </local:SettingContainer>
 
             <!--  Detect URLs  -->
             <local:SettingContainer x:Uid="Globals_DetectURLs">
-                <ToggleSwitch IsOn="{x:Bind State.Globals.DetectURLs, Mode=TwoWay}" />
+                <ToggleSwitch IsOn="{x:Bind State.Globals.DetectURLs, Mode=TwoWay}"
+                              Style="{StaticResource ToggleSwitchInExpanderStyle}" />
             </local:SettingContainer>
         </StackPanel>
     </ScrollViewer>
diff --git a/src/cascadia/TerminalSettingsEditor/Launch.h b/src/cascadia/TerminalSettingsEditor/Launch.h
index baf110c52e4..673ae47ca0f 100644
--- a/src/cascadia/TerminalSettingsEditor/Launch.h
+++ b/src/cascadia/TerminalSettingsEditor/Launch.h
@@ -33,9 +33,9 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
 
         WINRT_PROPERTY(Editor::LaunchPageNavigationState, State, nullptr);
 
-        GETSET_BINDABLE_ENUM_SETTING(FirstWindowPreference, Model::FirstWindowPreference, State().Settings().GlobalSettings, FirstWindowPreference);
-        GETSET_BINDABLE_ENUM_SETTING(LaunchMode, Model::LaunchMode, State().Settings().GlobalSettings, LaunchMode);
-        GETSET_BINDABLE_ENUM_SETTING(WindowingBehavior, Model::WindowingMode, State().Settings().GlobalSettings, WindowingBehavior);
+        GETSET_BINDABLE_ENUM_SETTING(FirstWindowPreference, Model::FirstWindowPreference, State().Settings().GlobalSettings().FirstWindowPreference);
+        GETSET_BINDABLE_ENUM_SETTING(LaunchMode, Model::LaunchMode, State().Settings().GlobalSettings().LaunchMode);
+        GETSET_BINDABLE_ENUM_SETTING(WindowingBehavior, Model::WindowingMode, State().Settings().GlobalSettings().WindowingBehavior);
     };
 }
 
diff --git a/src/cascadia/TerminalSettingsEditor/Launch.xaml b/src/cascadia/TerminalSettingsEditor/Launch.xaml
index 8d694f47063..f52668f8b49 100644
--- a/src/cascadia/TerminalSettingsEditor/Launch.xaml
+++ b/src/cascadia/TerminalSettingsEditor/Launch.xaml
@@ -37,8 +37,7 @@
         <StackPanel>
             <StackPanel Style="{StaticResource SettingsStackStyle}">
                 <!--  Default Profile  -->
-                <local:SettingContainer x:Uid="Globals_DefaultProfile"
-                                        Margin="0">
+                <local:SettingContainer x:Uid="Globals_DefaultProfile">
                     <ComboBox x:Name="DefaultProfile"
                               ItemsSource="{x:Bind DefaultProfiles}"
                               SelectedItem="{x:Bind CurrentDefaultProfile, Mode=TwoWay}"
@@ -133,11 +132,13 @@
 
                 <!--  Start on User Login  -->
                 <local:SettingContainer x:Uid="Globals_StartOnUserLogin">
-                    <ToggleSwitch IsOn="{x:Bind State.Settings.GlobalSettings.StartOnUserLogin, Mode=TwoWay}" />
+                    <ToggleSwitch IsOn="{x:Bind State.Settings.GlobalSettings.StartOnUserLogin, Mode=TwoWay}"
+                                  Style="{StaticResource ToggleSwitchInExpanderStyle}" />
                 </local:SettingContainer>
 
                 <!--  First Window Behavior  -->
                 <local:SettingContainer x:Uid="Globals_FirstWindowPreference"
+                                        Style="{StaticResource ExpanderSettingContainerStyle}"
                                         Visibility="{x:Bind ShowFirstWindowPreference}">
                     <muxc:RadioButtons AutomationProperties.AccessibilityView="Content"
                                        ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
@@ -148,7 +149,8 @@
 
                 <!--  Launch Mode  -->
                 <local:SettingContainer x:Name="Globals_LaunchMode"
-                                        x:Uid="Globals_LaunchMode">
+                                        x:Uid="Globals_LaunchMode"
+                                        Style="{StaticResource ExpanderSettingContainerStyle}">
                     <muxc:RadioButtons AutomationProperties.AccessibilityView="Content"
                                        ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
                                        ItemsSource="{x:Bind LaunchModeList}"
@@ -156,32 +158,49 @@
                 </local:SettingContainer>
 
                 <!--  Launch Mode  -->
-                <local:SettingContainer x:Uid="Globals_WindowingBehavior">
+                <local:SettingContainer x:Uid="Globals_WindowingBehavior"
+                                        Style="{StaticResource ExpanderSettingContainerStyle}">
                     <muxc:RadioButtons AutomationProperties.AccessibilityView="Content"
                                        ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
                                        ItemsSource="{x:Bind WindowingBehaviorList}"
                                        SelectedItem="{x:Bind CurrentWindowingBehavior, Mode=TwoWay}" />
                 </local:SettingContainer>
-            </StackPanel>
 
-            <!--  Launch Size  -->
-            <StackPanel Style="{StaticResource SettingsStackStyle}">
-                <!--  Header  -->
-                <TextBlock x:Uid="Globals_LaunchSize"
-                           Style="{StaticResource SubtitleTextBlockStyle}" />
-
-                <!--  Columns  -->
-                <local:SettingContainer x:Uid="Globals_InitialCols"
-                                        Margin="0">
-                    <muxc:NumberBox x:Uid="Globals_InitialColsBox"
-                                    Style="{StaticResource LaunchSizeNumberBoxStyle}"
-                                    Value="{x:Bind State.Settings.GlobalSettings.InitialCols, Mode=TwoWay}" />
-                </local:SettingContainer>
-                <!--  Rows  -->
-                <local:SettingContainer x:Uid="Globals_InitialRows">
-                    <muxc:NumberBox x:Uid="Globals_InitialRowsBox"
-                                    Style="{StaticResource LaunchSizeNumberBoxStyle}"
-                                    Value="{x:Bind State.Settings.GlobalSettings.InitialRows, Mode=TwoWay}" />
+                <local:SettingContainer x:Uid="Globals_LaunchSize"
+                                        Style="{StaticResource ExpanderSettingContainerStyle}">
+                    <Grid ColumnSpacing="10"
+                          RowSpacing="10">
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="Auto" />
+                            <RowDefinition Height="Auto" />
+                        </Grid.RowDefinitions>
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="Auto" />
+                            <ColumnDefinition Width="Auto" />
+                        </Grid.ColumnDefinitions>
+                        <TextBlock x:Uid="Globals_InitialCols"
+                                   Grid.Row="0"
+                                   Grid.Column="0"
+                                   VerticalAlignment="Center"
+                                   Style="{StaticResource SettingsPageItemHeaderStyle}" />
+                        <muxc:NumberBox x:Uid="Globals_InitialColsBox"
+                                        Grid.Row="0"
+                                        Grid.Column="1"
+                                        VerticalAlignment="Center"
+                                        Style="{StaticResource LaunchSizeNumberBoxStyle}"
+                                        Value="{x:Bind State.Settings.GlobalSettings.InitialCols, Mode=TwoWay}" />
+                        <TextBlock x:Uid="Globals_InitialRows"
+                                   Grid.Row="1"
+                                   Grid.Column="0"
+                                   VerticalAlignment="Center"
+                                   Style="{StaticResource SettingsPageItemHeaderStyle}" />
+                        <muxc:NumberBox x:Uid="Globals_InitialRowsBox"
+                                        Grid.Row="1"
+                                        Grid.Column="1"
+                                        VerticalAlignment="Center"
+                                        Style="{StaticResource LaunchSizeNumberBoxStyle}"
+                                        Value="{x:Bind State.Settings.GlobalSettings.InitialRows, Mode=TwoWay}" />
+                    </Grid>
                 </local:SettingContainer>
             </StackPanel>
         </StackPanel>
diff --git a/src/cascadia/TerminalSettingsEditor/MainPage.cpp b/src/cascadia/TerminalSettingsEditor/MainPage.cpp
index 414bd4f0d2a..249efba490f 100644
--- a/src/cascadia/TerminalSettingsEditor/MainPage.cpp
+++ b/src/cascadia/TerminalSettingsEditor/MainPage.cpp
@@ -29,6 +29,7 @@ using namespace winrt::Microsoft::Terminal::Settings::Model;
 using namespace winrt::Windows::UI::Core;
 using namespace winrt::Windows::System;
 using namespace winrt::Windows::UI::Xaml::Controls;
+using namespace winrt::Windows::Foundation::Collections;
 
 static const std::wstring_view launchTag{ L"Launch_Nav" };
 static const std::wstring_view interactionTag{ L"Interaction_Nav" };
@@ -59,6 +60,8 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         Automation::AutomationProperties::SetHelpText(SaveButton(), RS_(L"Settings_SaveSettingsButton/[using:Windows.UI.Xaml.Controls]ToolTipService/ToolTip"));
         Automation::AutomationProperties::SetHelpText(ResetButton(), RS_(L"Settings_ResetSettingsButton/[using:Windows.UI.Xaml.Controls]ToolTipService/ToolTip"));
         Automation::AutomationProperties::SetHelpText(OpenJsonNavItem(), RS_(L"Nav_OpenJSON/[using:Windows.UI.Xaml.Controls]ToolTipService/ToolTip"));
+
+        _breadcrumbs = single_threaded_observable_vector<IInspectable>();
     }
 
     // Method Description:
@@ -73,16 +76,15 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         _settingsClone = settings.Copy();
 
         // Deduce information about the currently selected item
-        IInspectable selectedItemTag;
-        auto menuItems{ SettingsNav().MenuItems() };
-        if (const auto& selectedItem{ SettingsNav().SelectedItem() })
+        IInspectable lastBreadcrumb;
+        const auto size = _breadcrumbs.Size();
+        if (size > 0)
         {
-            if (const auto& navViewItem{ selectedItem.try_as<MUX::Controls::NavigationViewItem>() })
-            {
-                selectedItemTag = navViewItem.Tag();
-            }
+            lastBreadcrumb = _breadcrumbs.GetAt(size - 1);
         }
 
+        auto menuItems{ SettingsNav().MenuItems() };
+
         // We'll remove a bunch of items and iterate over it twice.
         // --> Copy it into an STL vector to simplify our code and reduce COM overhead.
         std::vector<IInspectable> menuItemsSTL(menuItems.Size(), nullptr);
@@ -129,8 +131,8 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         // We'll update the profile in the _profilesNavState whenever we actually navigate to one
 
         // now that the menuItems are repopulated,
-        // refresh the current page using the SelectedItem data we collected before the refresh
-        if (selectedItemTag)
+        // refresh the current page using the breadcrumb data we collected before the refresh
+        if (const auto& crumb{ lastBreadcrumb.try_as<Breadcrumb>() })
         {
             for (const auto& item : menuItems)
             {
@@ -140,26 +142,26 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
                     {
                         if (const auto& stringTag{ tag.try_as<hstring>() })
                         {
-                            if (const auto& selectedItemStringTag{ selectedItemTag.try_as<hstring>() })
+                            if (const auto& breadcrumbStringTag{ crumb->Tag().try_as<hstring>() })
                             {
-                                if (stringTag == selectedItemStringTag)
+                                if (stringTag == breadcrumbStringTag)
                                 {
                                     // found the one that was selected before the refresh
                                     SettingsNav().SelectedItem(item);
-                                    _Navigate(*stringTag);
+                                    _Navigate(*stringTag, crumb->SubPage());
                                     return;
                                 }
                             }
                         }
                         else if (const auto& profileTag{ tag.try_as<ProfileViewModel>() })
                         {
-                            if (const auto& selectedItemProfileTag{ selectedItemTag.try_as<ProfileViewModel>() })
+                            if (const auto& breadcrumbProfileTag{ crumb->Tag().try_as<ProfileViewModel>() })
                             {
-                                if (profileTag->OriginalProfileGuid() == selectedItemProfileTag->OriginalProfileGuid())
+                                if (profileTag->OriginalProfileGuid() == breadcrumbProfileTag->OriginalProfileGuid())
                                 {
                                     // found the one that was selected before the refresh
                                     SettingsNav().SelectedItem(item);
-                                    _Navigate(*profileTag);
+                                    _Navigate(*profileTag, crumb->SubPage());
                                     return;
                                 }
                             }
@@ -174,7 +176,7 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         // We can use menuItemsSTL here because the only things they miss are profile entries.
         const auto& firstItem{ menuItemsSTL.at(0).as<MUX::Controls::NavigationViewItem>() };
         SettingsNav().SelectedItem(firstItem);
-        _Navigate(unbox_value<hstring>(firstItem.Tag()));
+        _Navigate(unbox_value<hstring>(firstItem.Tag()), BreadcrumbSubPage::None);
     }
 
     void MainPage::SetHostingWindow(uint64_t hostingWindow) noexcept
@@ -243,7 +245,7 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
             // Manually navigate because setting the selected item programmatically doesn't trigger ItemInvoked.
             if (const auto tag = initialItem.as<MUX::Controls::NavigationViewItem>().Tag())
             {
-                _Navigate(unbox_value<hstring>(tag));
+                _Navigate(unbox_value<hstring>(tag), BreadcrumbSubPage::None);
             }
         }
     }
@@ -267,72 +269,140 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
 
             if (const auto navString = clickedItemContainer.Tag().try_as<hstring>())
             {
-                _Navigate(*navString);
+                _Navigate(*navString, BreadcrumbSubPage::None);
             }
             else if (const auto profile = clickedItemContainer.Tag().try_as<Editor::ProfileViewModel>())
             {
                 // Navigate to a page with the given profile
-                _Navigate(profile);
+                _Navigate(profile, BreadcrumbSubPage::None);
             }
         }
     }
 
-    void MainPage::_Navigate(hstring clickedItemTag)
+    void MainPage::_PreNavigateHelper()
+    {
+        _profileViewModelChangedRevoker.revoke();
+        _breadcrumbs.Clear();
+    }
+
+    void MainPage::_SetupProfileEventHandling(const Editor::ProfilePageNavigationState state)
     {
+        // Add an event handler to navigate to Profiles_Appearance or Profiles_Advanced
+        // Some notes on this:
+        // - At first we tried putting another frame inside Profiles.xaml and having that
+        //   frame default to showing Profiles_Base. This allowed the logic for navigation
+        //   to Profiles_Advanced/Profiles_Appearance to live within Profiles.cpp.
+        // - However, the header for the SUI lives in MainPage.xaml (because that's where
+        //   the whole NavigationView is) and so the BreadcrumbBar needs to be in MainPage.xaml.
+        //   We decided that it's better for the owner of the BreadcrumbBar to also be responsible
+        //   for navigation, so the navigation to Profiles_Advanced/Profiles_Appearance from
+        //   Profiles_Base got moved here.
+        const auto profile = state.Profile();
+
+        // If this is the base layer, the breadcrumb tag should be the globalProfileTag instead of the
+        // ProfileViewModel, because the navigation menu item for this profile is the globalProfileTag.
+        // See MainPage::UpdateSettings for why this matters
+        const auto breadcrumbTag = profile.IsBaseLayer() ? box_value(globalProfileTag) : box_value(profile);
+        const auto breadcrumbText = profile.IsBaseLayer() ? RS_(L"Nav_ProfileDefaults/Content") : profile.Name();
+        _profileViewModelChangedRevoker = profile.PropertyChanged(winrt::auto_revoke, [=](auto&&, const PropertyChangedEventArgs& args) {
+            const auto settingName{ args.PropertyName() };
+            if (settingName == L"CurrentPage")
+            {
+                const auto currentPage = profile.CurrentPage();
+                if (currentPage == ProfileSubPage::Base)
+                {
+                    contentFrame().Navigate(xaml_typename<Editor::Profiles_Base>(), state);
+                    _breadcrumbs.Clear();
+                    const auto crumb = winrt::make<Breadcrumb>(breadcrumbTag, breadcrumbText, BreadcrumbSubPage::None);
+                    _breadcrumbs.Append(crumb);
+                }
+                else if (currentPage == ProfileSubPage::Appearance)
+                {
+                    contentFrame().Navigate(xaml_typename<Editor::Profiles_Appearance>(), state);
+                    const auto crumb = winrt::make<Breadcrumb>(breadcrumbTag, RS_(L"Profile_Appearance/Header"), BreadcrumbSubPage::Profile_Appearance);
+                    _breadcrumbs.Append(crumb);
+                }
+                else if (currentPage == ProfileSubPage::Advanced)
+                {
+                    contentFrame().Navigate(xaml_typename<Editor::Profiles_Advanced>(), state);
+                    const auto crumb = winrt::make<Breadcrumb>(breadcrumbTag, RS_(L"Profile_Advanced/Header"), BreadcrumbSubPage::Profile_Advanced);
+                    _breadcrumbs.Append(crumb);
+                }
+            }
+        });
+    }
+
+    void MainPage::_Navigate(hstring clickedItemTag, BreadcrumbSubPage subPage)
+    {
+        _PreNavigateHelper();
+
         if (clickedItemTag == launchTag)
         {
             contentFrame().Navigate(xaml_typename<Editor::Launch>(), winrt::make<LaunchPageNavigationState>(_settingsClone));
+            const auto crumb = winrt::make<Breadcrumb>(box_value(clickedItemTag), RS_(L"Nav_Launch/Content"), BreadcrumbSubPage::None);
+            _breadcrumbs.Append(crumb);
         }
         else if (clickedItemTag == interactionTag)
         {
             contentFrame().Navigate(xaml_typename<Editor::Interaction>(), winrt::make<InteractionPageNavigationState>(_settingsClone.GlobalSettings()));
+            const auto crumb = winrt::make<Breadcrumb>(box_value(clickedItemTag), RS_(L"Nav_Interaction/Content"), BreadcrumbSubPage::None);
+            _breadcrumbs.Append(crumb);
         }
         else if (clickedItemTag == renderingTag)
         {
             contentFrame().Navigate(xaml_typename<Editor::Rendering>(), winrt::make<RenderingPageNavigationState>(_settingsClone.GlobalSettings()));
+            const auto crumb = winrt::make<Breadcrumb>(box_value(clickedItemTag), RS_(L"Nav_Rendering/Content"), BreadcrumbSubPage::None);
+            _breadcrumbs.Append(crumb);
         }
         else if (clickedItemTag == actionsTag)
         {
-            if constexpr (Feature_EditableActionsPage::IsEnabled())
-            {
-                contentFrame().Navigate(xaml_typename<Editor::Actions>(), winrt::make<ActionsPageNavigationState>(_settingsClone));
-            }
-            else
-            {
-                auto actionsState{ winrt::make<ReadOnlyActionsPageNavigationState>(_settingsClone) };
-                actionsState.OpenJson([weakThis = get_weak()](auto&&, auto&& arg) {
-                    if (auto self{ weakThis.get() })
-                    {
-                        self->_OpenJsonHandlers(nullptr, arg);
-                    }
-                });
-                contentFrame().Navigate(xaml_typename<Editor::ReadOnlyActions>(), actionsState);
-            }
+            contentFrame().Navigate(xaml_typename<Editor::Actions>(), winrt::make<ActionsPageNavigationState>(_settingsClone));
+            const auto crumb = winrt::make<Breadcrumb>(box_value(clickedItemTag), RS_(L"Nav_Actions/Content"), BreadcrumbSubPage::None);
+            _breadcrumbs.Append(crumb);
         }
         else if (clickedItemTag == globalProfileTag)
         {
             auto profileVM{ _viewModelForProfile(_settingsClone.ProfileDefaults(), _settingsClone) };
             profileVM.IsBaseLayer(true);
-            _lastProfilesNavState = winrt::make<ProfilePageNavigationState>(profileVM,
-                                                                            _settingsClone.GlobalSettings().ColorSchemes(),
-                                                                            _lastProfilesNavState,
-                                                                            *this);
+            auto state{ winrt::make<ProfilePageNavigationState>(profileVM,
+                                                                _settingsClone.GlobalSettings().ColorSchemes(),
+                                                                *this) };
+
+            _SetupProfileEventHandling(state);
+
+            contentFrame().Navigate(xaml_typename<Editor::Profiles_Base>(), state);
+            const auto crumb = winrt::make<Breadcrumb>(box_value(clickedItemTag), RS_(L"Nav_ProfileDefaults/Content"), BreadcrumbSubPage::None);
+            _breadcrumbs.Append(crumb);
 
-            contentFrame().Navigate(xaml_typename<Editor::Profiles>(), _lastProfilesNavState);
+            // If we were given a label, make sure we are on the correct sub-page
+            if (subPage == BreadcrumbSubPage::Profile_Appearance)
+            {
+                profileVM.CurrentPage(ProfileSubPage::Appearance);
+            }
+            else if (subPage == BreadcrumbSubPage::Profile_Advanced)
+            {
+                profileVM.CurrentPage(ProfileSubPage::Advanced);
+            }
         }
         else if (clickedItemTag == colorSchemesTag)
         {
             contentFrame().Navigate(xaml_typename<Editor::ColorSchemes>(), _colorSchemesNavState);
+            const auto crumb = winrt::make<Breadcrumb>(box_value(clickedItemTag), RS_(L"Nav_ColorSchemes/Content"), BreadcrumbSubPage::None);
+            _breadcrumbs.Append(crumb);
         }
         else if (clickedItemTag == globalAppearanceTag)
         {
             contentFrame().Navigate(xaml_typename<Editor::GlobalAppearance>(), winrt::make<GlobalAppearancePageNavigationState>(_settingsClone.GlobalSettings()));
+            const auto crumb = winrt::make<Breadcrumb>(box_value(clickedItemTag), RS_(L"Nav_Appearance/Content"), BreadcrumbSubPage::None);
+            _breadcrumbs.Append(crumb);
         }
         else if (clickedItemTag == addProfileTag)
         {
             auto addProfileState{ winrt::make<AddProfilePageNavigationState>(_settingsClone) };
             addProfileState.AddNew({ get_weak(), &MainPage::_AddProfileHandler });
             contentFrame().Navigate(xaml_typename<Editor::AddProfile>(), addProfileState);
+            const auto crumb = winrt::make<Breadcrumb>(box_value(clickedItemTag), RS_(L"Nav_AddNewProfile/Content"), BreadcrumbSubPage::None);
+            _breadcrumbs.Append(crumb);
         }
     }
 
@@ -341,17 +411,37 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
     // - NOTE: this does not update the selected item.
     // Arguments:
     // - profile - the profile object we are getting a view of
-    void MainPage::_Navigate(const Editor::ProfileViewModel& profile)
+    void MainPage::_Navigate(const Editor::ProfileViewModel& profile, BreadcrumbSubPage subPage)
     {
-        _lastProfilesNavState = winrt::make<ProfilePageNavigationState>(profile,
-                                                                        _settingsClone.GlobalSettings().ColorSchemes(),
-                                                                        _lastProfilesNavState,
-                                                                        *this);
+        auto state{ winrt::make<ProfilePageNavigationState>(profile,
+                                                            _settingsClone.GlobalSettings().ColorSchemes(),
+                                                            *this) };
+
+        _PreNavigateHelper();
 
         // Add an event handler for when the user wants to delete a profile.
-        _lastProfilesNavState.DeleteProfile({ this, &MainPage::_DeleteProfile });
+        profile.DeleteProfile({ this, &MainPage::_DeleteProfile });
+
+        _SetupProfileEventHandling(state);
+
+        contentFrame().Navigate(xaml_typename<Editor::Profiles_Base>(), state);
+        const auto crumb = winrt::make<Breadcrumb>(box_value(profile), profile.Name(), BreadcrumbSubPage::None);
+        _breadcrumbs.Append(crumb);
 
-        contentFrame().Navigate(xaml_typename<Editor::Profiles>(), _lastProfilesNavState);
+        // Set the profile's 'CurrentPage' to the correct one, if this requires further navigation, the
+        // event handler will do it
+        if (subPage == BreadcrumbSubPage::None)
+        {
+            profile.CurrentPage(ProfileSubPage::Base);
+        }
+        else if (subPage == BreadcrumbSubPage::Profile_Appearance)
+        {
+            profile.CurrentPage(ProfileSubPage::Appearance);
+        }
+        else if (subPage == BreadcrumbSubPage::Profile_Advanced)
+        {
+            profile.CurrentPage(ProfileSubPage::Advanced);
+        }
     }
 
     void MainPage::OpenJsonTapped(IInspectable const& /*sender*/, Windows::UI::Xaml::Input::TappedRoutedEventArgs const& /*args*/)
@@ -385,6 +475,23 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         UpdateSettings(_settingsSource);
     }
 
+    void MainPage::BreadcrumbBar_ItemClicked(Microsoft::UI::Xaml::Controls::BreadcrumbBar const& /*sender*/, Microsoft::UI::Xaml::Controls::BreadcrumbBarItemClickedEventArgs const& args)
+    {
+        if (gsl::narrow_cast<uint32_t>(args.Index()) < (_breadcrumbs.Size() - 1))
+        {
+            const auto tag = args.Item().as<Breadcrumb>()->Tag();
+            const auto subPage = args.Item().as<Breadcrumb>()->SubPage();
+            if (const auto profileViewModel = tag.try_as<ProfileViewModel>())
+            {
+                _Navigate(*profileViewModel, subPage);
+            }
+            else
+            {
+                _Navigate(tag.as<hstring>(), subPage);
+            }
+        }
+    }
+
     void MainPage::_InitializeProfilesList()
     {
         const auto menuItems = SettingsNav().MenuItems();
@@ -424,7 +531,7 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
 
         // Select and navigate to the new profile
         SettingsNav().SelectedItem(navItem);
-        _Navigate(profileViewModel);
+        _Navigate(profileViewModel, BreadcrumbSubPage::None);
     }
 
     MUX::Controls::NavigationViewItem MainPage::_CreateProfileNavViewItem(const Editor::ProfileViewModel& profile)
@@ -484,11 +591,11 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         // navigate to the profile next to this one
         const auto newSelectedItem{ menuItems.GetAt(index < menuItems.Size() - 1 ? index : index - 1) };
         SettingsNav().SelectedItem(newSelectedItem);
-        _Navigate(newSelectedItem.try_as<MUX::Controls::NavigationViewItem>().Tag().try_as<Editor::ProfileViewModel>());
+        _Navigate(newSelectedItem.try_as<MUX::Controls::NavigationViewItem>().Tag().try_as<Editor::ProfileViewModel>(), BreadcrumbSubPage::None);
     }
 
-    bool MainPage::ShowBaseLayerMenuItem() const noexcept
+    IObservableVector<IInspectable> MainPage::Breadcrumbs() noexcept
     {
-        return Feature_ShowProfileDefaultsInSettings::IsEnabled();
+        return _breadcrumbs;
     }
 }
diff --git a/src/cascadia/TerminalSettingsEditor/MainPage.h b/src/cascadia/TerminalSettingsEditor/MainPage.h
index 24c2c9cd503..f63586aa3b0 100644
--- a/src/cascadia/TerminalSettingsEditor/MainPage.h
+++ b/src/cascadia/TerminalSettingsEditor/MainPage.h
@@ -4,10 +4,23 @@
 #pragma once
 
 #include "MainPage.g.h"
+#include "Breadcrumb.g.h"
 #include "Utils.h"
 
 namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
 {
+    struct Breadcrumb : BreadcrumbT<Breadcrumb>
+    {
+        Breadcrumb(IInspectable tag, winrt::hstring label, BreadcrumbSubPage subPage) :
+            _Tag{ tag },
+            _Label{ label },
+            _SubPage{ subPage } {}
+
+        WINRT_PROPERTY(IInspectable, Tag);
+        WINRT_PROPERTY(winrt::hstring, Label);
+        WINRT_PROPERTY(BreadcrumbSubPage, SubPage);
+    };
+
     struct MainPage : MainPageT<MainPage>
     {
         MainPage() = delete;
@@ -21,16 +34,18 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         void SettingsNav_ItemInvoked(Microsoft::UI::Xaml::Controls::NavigationView const& sender, Microsoft::UI::Xaml::Controls::NavigationViewItemInvokedEventArgs const& args);
         void SaveButton_Click(Windows::Foundation::IInspectable const& sender, Windows::UI::Xaml::RoutedEventArgs const& args);
         void ResetButton_Click(Windows::Foundation::IInspectable const& sender, Windows::UI::Xaml::RoutedEventArgs const& args);
+        void BreadcrumbBar_ItemClicked(Microsoft::UI::Xaml::Controls::BreadcrumbBar const& sender, Microsoft::UI::Xaml::Controls::BreadcrumbBarItemClickedEventArgs const& args);
 
         void SetHostingWindow(uint64_t hostingWindow) noexcept;
         bool TryPropagateHostingWindow(IInspectable object) noexcept;
         uint64_t GetHostingWindow() const noexcept;
 
-        bool ShowBaseLayerMenuItem() const noexcept;
+        Windows::Foundation::Collections::IObservableVector<IInspectable> Breadcrumbs() noexcept;
 
         TYPED_EVENT(OpenJson, Windows::Foundation::IInspectable, Model::SettingsTarget);
 
     private:
+        Windows::Foundation::Collections::IObservableVector<IInspectable> _breadcrumbs;
         Model::CascadiaSettings _settingsSource;
         Model::CascadiaSettings _settingsClone;
 
@@ -42,11 +57,15 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         void _DeleteProfile(const Windows::Foundation::IInspectable sender, const Editor::DeleteProfileEventArgs& args);
         void _AddProfileHandler(const winrt::guid profileGuid);
 
-        void _Navigate(hstring clickedItemTag);
-        void _Navigate(const Editor::ProfileViewModel& profile);
+        void _SetupProfileEventHandling(const winrt::Microsoft::Terminal::Settings::Editor::ProfilePageNavigationState state);
+
+        void _PreNavigateHelper();
+        void _Navigate(hstring clickedItemTag, BreadcrumbSubPage subPage);
+        void _Navigate(const Editor::ProfileViewModel& profile, BreadcrumbSubPage subPage);
 
         winrt::Microsoft::Terminal::Settings::Editor::ColorSchemesPageNavigationState _colorSchemesNavState{ nullptr };
-        winrt::Microsoft::Terminal::Settings::Editor::ProfilePageNavigationState _lastProfilesNavState{ nullptr };
+
+        Windows::UI::Xaml::Data::INotifyPropertyChanged::PropertyChanged_revoker _profileViewModelChangedRevoker;
     };
 }
 
diff --git a/src/cascadia/TerminalSettingsEditor/MainPage.idl b/src/cascadia/TerminalSettingsEditor/MainPage.idl
index 6c368713a73..4c771419753 100644
--- a/src/cascadia/TerminalSettingsEditor/MainPage.idl
+++ b/src/cascadia/TerminalSettingsEditor/MainPage.idl
@@ -13,6 +13,20 @@ namespace Microsoft.Terminal.Settings.Editor
         UInt64 GetHostingWindow();
     }
 
+    enum BreadcrumbSubPage
+    {
+        None = 0,
+        Profile_Appearance,
+        Profile_Advanced
+    };
+
+    runtimeclass Breadcrumb
+    {
+        IInspectable Tag;
+        String Label;
+        BreadcrumbSubPage SubPage;
+    }
+
     [default_interface] runtimeclass MainPage : Windows.UI.Xaml.Controls.Page, IHostedInWindow
     {
         MainPage(Microsoft.Terminal.Settings.Model.CascadiaSettings settings);
@@ -24,6 +38,6 @@ namespace Microsoft.Terminal.Settings.Editor
         // Let's just smuggle the HWND in as a UInt64 :|
         void SetHostingWindow(UInt64 window);
 
-        Boolean ShowBaseLayerMenuItem { get; };
+        Windows.Foundation.Collections.IObservableVector<IInspectable> Breadcrumbs { get; };
     }
 }
diff --git a/src/cascadia/TerminalSettingsEditor/MainPage.xaml b/src/cascadia/TerminalSettingsEditor/MainPage.xaml
index c609b895cbc..9fe881938ad 100644
--- a/src/cascadia/TerminalSettingsEditor/MainPage.xaml
+++ b/src/cascadia/TerminalSettingsEditor/MainPage.xaml
@@ -6,6 +6,7 @@
       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:local="using:Microsoft.Terminal.Settings.Editor"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
       Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
@@ -36,12 +37,36 @@
     </Page.Resources>
 
     <muxc:NavigationView x:Name="SettingsNav"
-                         Header="{Binding ElementName=SettingsNav, Path=SelectedItem.Content, Mode=OneWay}"
                          IsBackButtonVisible="Collapsed"
                          IsSettingsVisible="False"
                          ItemInvoked="SettingsNav_ItemInvoked"
                          Loaded="SettingsNav_Loaded"
                          TabFocusNavigation="Cycle">
+        <muxc:NavigationView.Resources>
+            <ResourceDictionary>
+                <Thickness x:Key="NavigationViewHeaderMargin">15,0,0,0</Thickness>
+            </ResourceDictionary>
+        </muxc:NavigationView.Resources>
+        <muxc:NavigationView.Header>
+            <muxc:BreadcrumbBar x:Name="NavigationBreadcrumbBar"
+                                MaxWidth="{StaticResource StandardControlMaxWidth}"
+                                ItemClicked="BreadcrumbBar_ItemClicked"
+                                ItemsSource="{x:Bind Breadcrumbs}">
+                <muxc:BreadcrumbBar.ItemTemplate>
+                    <DataTemplate x:DataType="local:Breadcrumb">
+                        <TextBlock Text="{x:Bind Label}" />
+                    </DataTemplate>
+                </muxc:BreadcrumbBar.ItemTemplate>
+                <muxc:BreadcrumbBar.Resources>
+                    <ResourceDictionary>
+                        <x:Double x:Key="BreadcrumbBarItemThemeFontSize">28</x:Double>
+                        <Thickness x:Key="BreadcrumbBarChevronPadding">11,4,12,0</Thickness>
+                        <FontWeight x:Key="BreadcrumbBarItemFontWeight">SemiBold</FontWeight>
+                        <x:Double x:Key="BreadcrumbBarChevronFontSize">16</x:Double>
+                    </ResourceDictionary>
+                </muxc:BreadcrumbBar.Resources>
+            </muxc:BreadcrumbBar>
+        </muxc:NavigationView.Header>
 
         <muxc:NavigationView.MenuItems>
 
@@ -91,8 +116,7 @@
 
             <muxc:NavigationViewItem x:Name="BaseLayerMenuItem"
                                      x:Uid="Nav_ProfileDefaults"
-                                     Tag="GlobalProfile_Nav"
-                                     Visibility="{x:Bind ShowBaseLayerMenuItem}">
+                                     Tag="GlobalProfile_Nav">
                 <muxc:NavigationViewItem.Icon>
                     <FontIcon Glyph="&#xE81E;" />
                 </muxc:NavigationViewItem.Icon>
@@ -112,7 +136,7 @@
             </muxc:NavigationViewItem>
         </muxc:NavigationView.FooterMenuItems>
 
-        <Grid>
+        <Grid Margin="0,0,0,0">
             <Grid.RowDefinitions>
                 <RowDefinition Height="*" />
                 <RowDefinition Height="Auto" />
@@ -131,9 +155,8 @@
             </Frame>
             <!--  Explicitly set the background color on grid to prevent the navigation animation from overflowing it  -->
             <Grid Grid.Row="1"
-                  Height="100"
-                  Background="{ThemeResource SystemAltHighColor}"
-                  BorderBrush="{ThemeResource SystemBaseLowColor}"
+                  Height="80"
+                  BorderBrush="{ThemeResource ApplicationPageBackgroundThemeBrush}"
                   BorderThickness="0,1,0,0">
                 <Grid.ColumnDefinitions>
                     <ColumnDefinition Width="*" />
diff --git a/src/cascadia/TerminalSettingsEditor/Microsoft.Terminal.Settings.Editor.vcxproj b/src/cascadia/TerminalSettingsEditor/Microsoft.Terminal.Settings.Editor.vcxproj
index e38d6383c5d..88695463ebc 100644
--- a/src/cascadia/TerminalSettingsEditor/Microsoft.Terminal.Settings.Editor.vcxproj
+++ b/src/cascadia/TerminalSettingsEditor/Microsoft.Terminal.Settings.Editor.vcxproj
@@ -70,7 +70,23 @@
       <DependentUpon>MainPage.xaml</DependentUpon>
     </ClInclude>
     <ClInclude Include="Profiles.h">
-      <DependentUpon>Profiles.xaml</DependentUpon>
+      <DependentUpon>Profiles.idl</DependentUpon>
+      <SubType>Code</SubType>
+    </ClInclude>
+    <ClInclude Include="ProfileViewModel.h">
+      <DependentUpon>ProfileViewModel.idl</DependentUpon>
+      <SubType>Code</SubType>
+    </ClInclude>
+    <ClInclude Include="Profiles_Base.h">
+      <DependentUpon>Profiles_Base.xaml</DependentUpon>
+      <SubType>Code</SubType>
+    </ClInclude>
+    <ClInclude Include="Profiles_Advanced.h">
+      <DependentUpon>Profiles_Advanced.xaml</DependentUpon>
+      <SubType>Code</SubType>
+    </ClInclude>
+    <ClInclude Include="Profiles_Appearance.h">
+      <DependentUpon>Profiles_Appearance.xaml</DependentUpon>
       <SubType>Code</SubType>
     </ClInclude>
     <ClInclude Include="Appearances.h">
@@ -118,7 +134,13 @@
     <Page Include="MainPage.xaml">
       <SubType>Designer</SubType>
     </Page>
-    <Page Include="Profiles.xaml">
+    <Page Include="Profiles_Base.xaml">
+      <SubType>Designer</SubType>
+    </Page>
+    <Page Include="Profiles_Advanced.xaml">
+      <SubType>Designer</SubType>
+    </Page>
+    <Page Include="Profiles_Appearance.xaml">
       <SubType>Designer</SubType>
     </Page>
     <Page Include="ReadOnlyActions.xaml">
@@ -169,8 +191,20 @@
       <DependentUpon>MainPage.xaml</DependentUpon>
     </ClCompile>
     <ClCompile Include="$(GeneratedFilesDir)module.g.cpp" />
-    <ClCompile Include="Profiles.cpp">
-      <DependentUpon>Profiles.xaml</DependentUpon>
+    <ClCompile Include="ProfileViewModel.cpp">
+      <DependentUpon>ProfileViewModel.idl</DependentUpon>
+      <SubType>Code</SubType>
+    </ClCompile>
+    <ClCompile Include="Profiles_Base.cpp">
+      <DependentUpon>Profiles_Base.xaml</DependentUpon>
+      <SubType>Code</SubType>
+    </ClCompile>
+    <ClCompile Include="Profiles_Advanced.cpp">
+      <DependentUpon>Profiles_Advanced.xaml</DependentUpon>
+      <SubType>Code</SubType>
+    </ClCompile>
+    <ClCompile Include="Profiles_Appearance.cpp">
+      <DependentUpon>Profiles_Appearance.xaml</DependentUpon>
       <SubType>Code</SubType>
     </ClCompile>
     <ClCompile Include="Appearances.cpp">
@@ -235,7 +269,19 @@
       <DependentUpon>MainPage.xaml</DependentUpon>
     </Midl>
     <Midl Include="Profiles.idl">
-      <DependentUpon>Profiles.xaml</DependentUpon>
+      <SubType>Code</SubType>
+    </Midl>
+    <Midl Include="ProfileViewModel.idl" />
+    <Midl Include="Profiles_Base.idl">
+      <DependentUpon>Profiles_Base.xaml</DependentUpon>
+      <SubType>Code</SubType>
+    </Midl>
+    <Midl Include="Profiles_Advanced.idl">
+      <DependentUpon>Profiles_Advanced.xaml</DependentUpon>
+      <SubType>Code</SubType>
+    </Midl>
+    <Midl Include="Profiles_Appearance.idl">
+      <DependentUpon>Profiles_Appearance.xaml</DependentUpon>
       <SubType>Code</SubType>
     </Midl>
     <Midl Include="Appearances.idl">
diff --git a/src/cascadia/TerminalSettingsEditor/Microsoft.Terminal.Settings.Editor.vcxproj.filters b/src/cascadia/TerminalSettingsEditor/Microsoft.Terminal.Settings.Editor.vcxproj.filters
index 3b0b9186e6a..015795e88bd 100644
--- a/src/cascadia/TerminalSettingsEditor/Microsoft.Terminal.Settings.Editor.vcxproj.filters
+++ b/src/cascadia/TerminalSettingsEditor/Microsoft.Terminal.Settings.Editor.vcxproj.filters
@@ -17,6 +17,7 @@
     <ClInclude Include="PreviewConnection.h" />
   </ItemGroup>
   <ItemGroup>
+    <Midl Include="ProfileViewModel.idl" />
     <Midl Include="EnumEntry.idl" />
     <Midl Include="Converters.idl">
       <Filter>Converters</Filter>
@@ -34,7 +35,9 @@
     <Page Include="Interaction.xaml" />
     <Page Include="Launch.xaml" />
     <Page Include="MainPage.xaml" />
-    <Page Include="Profiles.xaml" />
+    <Page Include="Profiles_Base.xaml" />
+    <Page Include="Profiles_Advanced.xaml" />
+    <Page Include="Profiles_Appearance.xaml" />
     <Page Include="Appearances.xaml" />
     <Page Include="Rendering.xaml" />
     <Page Include="Actions.xaml" />
diff --git a/src/cascadia/TerminalSettingsEditor/Profiles.cpp b/src/cascadia/TerminalSettingsEditor/ProfileViewModel.cpp
similarity index 61%
rename from src/cascadia/TerminalSettingsEditor/Profiles.cpp
rename to src/cascadia/TerminalSettingsEditor/ProfileViewModel.cpp
index bb429a454d0..ab2ea7db673 100644
--- a/src/cascadia/TerminalSettingsEditor/Profiles.cpp
+++ b/src/cascadia/TerminalSettingsEditor/ProfileViewModel.cpp
@@ -1,598 +1,427 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-
-#include "pch.h"
-#include "Profiles.h"
-
-#include "PreviewConnection.h"
-#include "Profiles.g.cpp"
-#include "EnumEntry.h"
-
-#include <LibraryResources.h>
-#include "..\WinRTUtils\inc\Utils.h"
-
-// This function is a copy of DxFontInfo::_NearbyCollection() with
-// * the call to DxFontInfo::s_GetNearbyFonts() inlined
-// * checkForUpdates for GetSystemFontCollection() set to true
-static wil::com_ptr<IDWriteFontCollection1> NearbyCollection(IDWriteFactory* dwriteFactory)
-{
-    // The convenience interfaces for loading fonts from files
-    // are only available on Windows 10+.
-    wil::com_ptr<IDWriteFactory6> factory6;
-    // wil's query() facilities don't work inside WinRT land at the moment.
-    // They produce a compilation error due to IUnknown and winrt::Windows::Foundation::IUnknown being ambiguous.
-    if (!SUCCEEDED(dwriteFactory->QueryInterface(__uuidof(IDWriteFactory6), factory6.put_void())))
-    {
-        return nullptr;
-    }
-
-    wil::com_ptr<IDWriteFontCollection1> systemFontCollection;
-    THROW_IF_FAILED(factory6->GetSystemFontCollection(false, systemFontCollection.addressof(), true));
-
-    wil::com_ptr<IDWriteFontSet> systemFontSet;
-    THROW_IF_FAILED(systemFontCollection->GetFontSet(systemFontSet.addressof()));
-
-    wil::com_ptr<IDWriteFontSetBuilder2> fontSetBuilder2;
-    THROW_IF_FAILED(factory6->CreateFontSetBuilder(fontSetBuilder2.addressof()));
-
-    THROW_IF_FAILED(fontSetBuilder2->AddFontSet(systemFontSet.get()));
-
-    {
-        const std::filesystem::path module{ wil::GetModuleFileNameW<std::wstring>(nullptr) };
-        const auto folder{ module.parent_path() };
-
-        for (const auto& p : std::filesystem::directory_iterator(folder))
-        {
-            if (til::ends_with(p.path().native(), L".ttf"))
-            {
-                fontSetBuilder2->AddFontFile(p.path().c_str());
-            }
-        }
-    }
-
-    wil::com_ptr<IDWriteFontSet> fontSet;
-    THROW_IF_FAILED(fontSetBuilder2->CreateFontSet(fontSet.addressof()));
-
-    wil::com_ptr<IDWriteFontCollection1> fontCollection;
-    THROW_IF_FAILED(factory6->CreateFontCollectionFromFontSet(fontSet.get(), &fontCollection));
-
-    return fontCollection;
-}
-
-using namespace winrt::Windows::UI::Text;
-using namespace winrt::Windows::UI::Xaml;
-using namespace winrt::Windows::UI::Xaml::Controls;
-using namespace winrt::Windows::UI::Xaml::Data;
-using namespace winrt::Windows::UI::Xaml::Navigation;
-using namespace winrt::Windows::Foundation;
-using namespace winrt::Windows::Foundation::Collections;
-using namespace winrt::Microsoft::Terminal::Settings::Model;
-
-namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
-{
-    Windows::Foundation::Collections::IObservableVector<Editor::Font> ProfileViewModel::_MonospaceFontList{ nullptr };
-    Windows::Foundation::Collections::IObservableVector<Editor::Font> ProfileViewModel::_FontList{ nullptr };
-
-    ProfileViewModel::ProfileViewModel(const Model::Profile& profile, const Model::CascadiaSettings& appSettings) :
-        _profile{ profile },
-        _defaultAppearanceViewModel{ winrt::make<implementation::AppearanceViewModel>(profile.DefaultAppearance().try_as<AppearanceConfig>()) },
-        _originalProfileGuid{ profile.Guid() },
-        _appSettings{ appSettings },
-        _unfocusedAppearanceViewModel{ nullptr }
-    {
-        // Add a property changed handler to our own property changed event.
-        // This propagates changes from the settings model to anybody listening to our
-        //  unique view model members.
-        PropertyChanged([this](auto&&, const PropertyChangedEventArgs& args) {
-            const auto viewModelProperty{ args.PropertyName() };
-            if (viewModelProperty == L"IsBaseLayer")
-            {
-                // we _always_ want to show the background image settings in base layer
-                _NotifyChanges(L"BackgroundImageSettingsVisible");
-            }
-            else if (viewModelProperty == L"StartingDirectory")
-            {
-                // notify listener that all starting directory related values might have changed
-                // NOTE: this is similar to what is done with BackgroundImagePath above
-                _NotifyChanges(L"UseParentProcessDirectory", L"UseCustomStartingDirectory");
-            }
-            else if (viewModelProperty == L"UseAcrylic")
-            {
-                // GH#11372: If we're on Windows 10, and someone turns off
-                // acrylic, we're going to disable opacity for them. Opacity
-                // doesn't work without acrylic on Windows 10.
-                //
-                // BODGY: CascadiaSettings's function IsDefaultTerminalAvailable
-                // is basically a "are we on Windows 11" check, because defterm
-                // only works on Win11. So we'll use that.
-                //
-                // Remove when we can remove the rest of GH#11285
-                if (!UseAcrylic() && !CascadiaSettings::IsDefaultTerminalAvailable())
-                {
-                    Opacity(1.0);
-                }
-            }
-        });
-
-        // Do the same for the starting directory
-        if (!StartingDirectory().empty())
-        {
-            _lastStartingDirectoryPath = StartingDirectory();
-        }
-
-        // generate the font list, if we don't have one
-        if (!_FontList || !_MonospaceFontList)
-        {
-            UpdateFontList();
-        }
-
-        if (profile.HasUnfocusedAppearance())
-        {
-            _unfocusedAppearanceViewModel = winrt::make<implementation::AppearanceViewModel>(profile.UnfocusedAppearance().try_as<AppearanceConfig>());
-        }
-
-        _defaultAppearanceViewModel.IsDefault(true);
-    }
-
-    Model::TerminalSettings ProfileViewModel::TermSettings() const
-    {
-        return Model::TerminalSettings::CreateWithProfile(_appSettings, _profile, nullptr).DefaultSettings();
-    }
-
-    // Method Description:
-    // - Updates the lists of fonts and sorts them alphabetically
-    void ProfileViewModel::UpdateFontList() noexcept
-    try
-    {
-        // initialize font list
-        std::vector<Editor::Font> fontList;
-        std::vector<Editor::Font> monospaceFontList;
-
-        // get a DWriteFactory
-        com_ptr<IDWriteFactory> factory;
-        THROW_IF_FAILED(DWriteCreateFactory(
-            DWRITE_FACTORY_TYPE_SHARED,
-            __uuidof(IDWriteFactory),
-            reinterpret_cast<::IUnknown**>(factory.put())));
-
-        // get the font collection; subscribe to updates
-        const auto fontCollection = NearbyCollection(factory.get());
-
-        for (UINT32 i = 0; i < fontCollection->GetFontFamilyCount(); ++i)
-        {
-            try
-            {
-                // get the font family
-                com_ptr<IDWriteFontFamily> fontFamily;
-                THROW_IF_FAILED(fontCollection->GetFontFamily(i, fontFamily.put()));
-
-                // get the font's localized names
-                com_ptr<IDWriteLocalizedStrings> localizedFamilyNames;
-                THROW_IF_FAILED(fontFamily->GetFamilyNames(localizedFamilyNames.put()));
-
-                // construct a font entry for tracking
-                if (const auto fontEntry{ _GetFont(localizedFamilyNames) })
-                {
-                    // check if the font is monospaced
-                    try
-                    {
-                        com_ptr<IDWriteFont> font;
-                        THROW_IF_FAILED(fontFamily->GetFirstMatchingFont(DWRITE_FONT_WEIGHT::DWRITE_FONT_WEIGHT_NORMAL,
-                                                                         DWRITE_FONT_STRETCH::DWRITE_FONT_STRETCH_NORMAL,
-                                                                         DWRITE_FONT_STYLE::DWRITE_FONT_STYLE_NORMAL,
-                                                                         font.put()));
-
-                        // add the font name to our list of monospace fonts
-                        const auto castedFont{ font.try_as<IDWriteFont1>() };
-                        if (castedFont && castedFont->IsMonospacedFont())
-                        {
-                            monospaceFontList.emplace_back(fontEntry);
-                        }
-                    }
-                    CATCH_LOG();
-
-                    // add the font name to our list of all fonts
-                    fontList.emplace_back(std::move(fontEntry));
-                }
-            }
-            CATCH_LOG();
-        }
-
-        // sort and save the lists
-        std::sort(begin(fontList), end(fontList), FontComparator());
-        _FontList = single_threaded_observable_vector<Editor::Font>(std::move(fontList));
-
-        std::sort(begin(monospaceFontList), end(monospaceFontList), FontComparator());
-        _MonospaceFontList = single_threaded_observable_vector<Editor::Font>(std::move(monospaceFontList));
-    }
-    CATCH_LOG();
-
-    Editor::Font ProfileViewModel::_GetFont(com_ptr<IDWriteLocalizedStrings> localizedFamilyNames)
-    {
-        // used for the font's name as an identifier (i.e. text block's font family property)
-        std::wstring nameID;
-        UINT32 nameIDIndex;
-
-        // used for the font's localized name
-        std::wstring localizedName;
-        UINT32 localizedNameIndex;
-
-        // use our current locale to find the localized name
-        BOOL exists{ FALSE };
-        HRESULT hr;
-        wchar_t localeName[LOCALE_NAME_MAX_LENGTH];
-        if (GetUserDefaultLocaleName(localeName, LOCALE_NAME_MAX_LENGTH))
-        {
-            hr = localizedFamilyNames->FindLocaleName(localeName, &localizedNameIndex, &exists);
-        }
-        if (SUCCEEDED(hr) && !exists)
-        {
-            // if we can't find the font for our locale, fallback to the en-us one
-            // Source: https://docs.microsoft.com/en-us/windows/win32/api/dwrite/nf-dwrite-idwritelocalizedstrings-findlocalename
-            hr = localizedFamilyNames->FindLocaleName(L"en-us", &localizedNameIndex, &exists);
-        }
-        if (!exists)
-        {
-            // failed to find the correct locale, using the first one
-            localizedNameIndex = 0;
-        }
-
-        // get the localized name
-        UINT32 nameLength;
-        THROW_IF_FAILED(localizedFamilyNames->GetStringLength(localizedNameIndex, &nameLength));
-
-        localizedName.resize(nameLength);
-        THROW_IF_FAILED(localizedFamilyNames->GetString(localizedNameIndex, localizedName.data(), nameLength + 1));
-
-        // now get the nameID
-        hr = localizedFamilyNames->FindLocaleName(L"en-us", &nameIDIndex, &exists);
-        if (FAILED(hr) || !exists)
-        {
-            // failed to find it, using the first one
-            nameIDIndex = 0;
-        }
-
-        // get the nameID
-        THROW_IF_FAILED(localizedFamilyNames->GetStringLength(nameIDIndex, &nameLength));
-        nameID.resize(nameLength);
-        THROW_IF_FAILED(localizedFamilyNames->GetString(nameIDIndex, nameID.data(), nameLength + 1));
-
-        if (!nameID.empty() && !localizedName.empty())
-        {
-            return make<Font>(nameID, localizedName);
-        }
-        return nullptr;
-    }
-
-    IObservableVector<Editor::Font> ProfileViewModel::CompleteFontList() const noexcept
-    {
-        return _FontList;
-    }
-
-    IObservableVector<Editor::Font> ProfileViewModel::MonospaceFontList() const noexcept
-    {
-        return _MonospaceFontList;
-    }
-
-    winrt::guid ProfileViewModel::OriginalProfileGuid() const noexcept
-    {
-        return _originalProfileGuid;
-    }
-
-    bool ProfileViewModel::CanDeleteProfile() const
-    {
-        return !IsBaseLayer();
-    }
-
-    Editor::AppearanceViewModel ProfileViewModel::DefaultAppearance()
-    {
-        return _defaultAppearanceViewModel;
-    }
-
-    bool ProfileViewModel::HasUnfocusedAppearance()
-    {
-        return _profile.HasUnfocusedAppearance();
-    }
-
-    bool ProfileViewModel::EditableUnfocusedAppearance()
-    {
-        if constexpr (Feature_EditableUnfocusedAppearance::IsEnabled())
-        {
-            return true;
-        }
-        return false;
-    }
-
-    bool ProfileViewModel::ShowUnfocusedAppearance()
-    {
-        return EditableUnfocusedAppearance() && HasUnfocusedAppearance();
-    }
-
-    void ProfileViewModel::CreateUnfocusedAppearance(const Windows::Foundation::Collections::IMapView<hstring, Model::ColorScheme>& schemes,
-                                                     const IHostedInWindow& windowRoot)
-    {
-        _profile.CreateUnfocusedAppearance();
-
-        _unfocusedAppearanceViewModel = winrt::make<implementation::AppearanceViewModel>(_profile.UnfocusedAppearance().try_as<AppearanceConfig>());
-        _unfocusedAppearanceViewModel.Schemes(schemes);
-        _unfocusedAppearanceViewModel.WindowRoot(windowRoot);
-
-        _NotifyChanges(L"UnfocusedAppearance", L"HasUnfocusedAppearance", L"ShowUnfocusedAppearance");
-    }
-
-    void ProfileViewModel::DeleteUnfocusedAppearance()
-    {
-        _profile.DeleteUnfocusedAppearance();
-
-        _unfocusedAppearanceViewModel = nullptr;
-
-        _NotifyChanges(L"UnfocusedAppearance", L"HasUnfocusedAppearance", L"ShowUnfocusedAppearance");
-    }
-
-    Editor::AppearanceViewModel ProfileViewModel::UnfocusedAppearance()
-    {
-        return _unfocusedAppearanceViewModel;
-    }
-
-    bool ProfileViewModel::UseParentProcessDirectory()
-    {
-        return StartingDirectory().empty();
-    }
-
-    // This function simply returns the opposite of UseParentProcessDirectory.
-    // We bind the 'IsEnabled' parameters of the textbox and browse button
-    // to this because it needs to be the reverse of UseParentProcessDirectory
-    // but we don't want to create a whole new converter for inverting a boolean
-    bool ProfileViewModel::UseCustomStartingDirectory()
-    {
-        return !UseParentProcessDirectory();
-    }
-
-    void ProfileViewModel::UseParentProcessDirectory(const bool useParent)
-    {
-        if (useParent)
-        {
-            // Stash the current value of StartingDirectory. If the user
-            // checks and un-checks the "Use parent process directory" button, we want
-            // the path that we display in the text box to remain unchanged.
-            //
-            // Only stash this value if it's not empty
-            if (!StartingDirectory().empty())
-            {
-                _lastStartingDirectoryPath = StartingDirectory();
-            }
-            StartingDirectory(L"");
-        }
-        else
-        {
-            // Restore the path we had previously cached as long as it wasn't empty
-            // If it was empty, set the starting directory to %USERPROFILE%
-            // (we need to set it to something non-empty otherwise we will automatically
-            // disable the text box)
-            if (_lastStartingDirectoryPath.empty())
-            {
-                StartingDirectory(L"%USERPROFILE%");
-            }
-            else
-            {
-                StartingDirectory(_lastStartingDirectoryPath);
-            }
-        }
-    }
-
-    void ProfilePageNavigationState::DeleteProfile()
-    {
-        auto deleteProfileArgs{ winrt::make_self<DeleteProfileEventArgs>(_Profile.Guid()) };
-        _DeleteProfileHandlers(*this, *deleteProfileArgs);
-    }
-
-    void ProfilePageNavigationState::CreateUnfocusedAppearance()
-    {
-        _Profile.CreateUnfocusedAppearance(_Schemes, _WindowRoot);
-    }
-
-    void ProfilePageNavigationState::DeleteUnfocusedAppearance()
-    {
-        _Profile.DeleteUnfocusedAppearance();
-    }
-
-    Profiles::Profiles() :
-        _previewControl{ Control::TermControl(Model::TerminalSettings{}, make<PreviewConnection>()) }
-    {
-        InitializeComponent();
-
-        INITIALIZE_BINDABLE_ENUM_SETTING(AntiAliasingMode, TextAntialiasingMode, winrt::Microsoft::Terminal::Control::TextAntialiasingMode, L"Profile_AntialiasingMode", L"Content");
-        INITIALIZE_BINDABLE_ENUM_SETTING_REVERSE_ORDER(CloseOnExitMode, CloseOnExitMode, winrt::Microsoft::Terminal::Settings::Model::CloseOnExitMode, L"Profile_CloseOnExit", L"Content");
-        INITIALIZE_BINDABLE_ENUM_SETTING(ScrollState, ScrollbarState, winrt::Microsoft::Terminal::Control::ScrollbarState, L"Profile_ScrollbarVisibility", L"Content");
-
-        const auto startingDirCheckboxTooltip{ ToolTipService::GetToolTip(StartingDirectoryUseParentCheckbox()) };
-        Automation::AutomationProperties::SetFullDescription(StartingDirectoryUseParentCheckbox(), unbox_value<hstring>(startingDirCheckboxTooltip));
-
-        Automation::AutomationProperties::SetName(DeleteButton(), RS_(L"Profile_DeleteButton/Text"));
-
-        _previewControl.IsEnabled(false);
-        _previewControl.AllowFocusWhenDisabled(false);
-        ControlPreview().Child(_previewControl);
-    }
-
-    void Profiles::OnNavigatedTo(const NavigationEventArgs& e)
-    {
-        _State = e.Parameter().as<Editor::ProfilePageNavigationState>();
-
-        // generate the font list, if we don't have one
-        if (!_State.Profile().CompleteFontList() || !_State.Profile().MonospaceFontList())
-        {
-            ProfileViewModel::UpdateFontList();
-        }
-
-        // Check the use parent directory box if the starting directory is empty
-        if (_State.Profile().StartingDirectory().empty())
-        {
-            StartingDirectoryUseParentCheckbox().IsChecked(true);
-        }
-
-        // Subscribe to some changes in the view model
-        // These changes should force us to update our own set of "Current<Setting>" members,
-        // and propagate those changes to the UI
-        _ViewModelChangedRevoker = _State.Profile().PropertyChanged(winrt::auto_revoke, [=](auto&&, const PropertyChangedEventArgs& args) {
-            const auto settingName{ args.PropertyName() };
-            if (settingName == L"AntialiasingMode")
-            {
-                _PropertyChangedHandlers(*this, PropertyChangedEventArgs{ L"CurrentAntiAliasingMode" });
-            }
-            else if (settingName == L"CloseOnExit")
-            {
-                _PropertyChangedHandlers(*this, PropertyChangedEventArgs{ L"CurrentCloseOnExitMode" });
-            }
-            else if (settingName == L"BellStyle")
-            {
-                _PropertyChangedHandlers(*this, PropertyChangedEventArgs{ L"IsBellStyleFlagSet" });
-            }
-            else if (settingName == L"ScrollState")
-            {
-                _PropertyChangedHandlers(*this, PropertyChangedEventArgs{ L"CurrentScrollState" });
-            }
-            _previewControl.Settings(_State.Profile().TermSettings());
-            _previewControl.UpdateSettings();
-        });
-
-        // The Appearances object handles updating the values in the settings UI, but
-        // we still need to listen to the changes here just to update the preview control
-        _AppearanceViewModelChangedRevoker = _State.Profile().DefaultAppearance().PropertyChanged(winrt::auto_revoke, [=](auto&&, const PropertyChangedEventArgs& /*args*/) {
-            _previewControl.Settings(_State.Profile().TermSettings());
-            _previewControl.UpdateSettings();
-        });
-
-        // Navigate to the pivot in the provided navigation state
-        ProfilesPivot().SelectedIndex(static_cast<int>(_State.LastActivePivot()));
-
-        _previewControl.Settings(_State.Profile().TermSettings());
-        // There is a possibility that the control has not fully initialized yet,
-        // so wait for it to initialize before updating the settings (so we know
-        // that the renderer is set up)
-        _previewControl.Initialized([&](auto&& /*s*/, auto&& /*e*/) {
-            _previewControl.UpdateSettings();
-        });
-    }
-
-    void Profiles::OnNavigatedFrom(const NavigationEventArgs& /*e*/)
-    {
-        _ViewModelChangedRevoker.revoke();
-        _AppearanceViewModelChangedRevoker.revoke();
-    }
-
-    bool Profiles::IsBellStyleFlagSet(const uint32_t flag)
-    {
-        return (WI_EnumValue(_State.Profile().BellStyle()) & flag) == flag;
-    }
-
-    void Profiles::SetBellStyleAudible(winrt::Windows::Foundation::IReference<bool> on)
-    {
-        auto currentStyle = State().Profile().BellStyle();
-        WI_UpdateFlag(currentStyle, Model::BellStyle::Audible, winrt::unbox_value<bool>(on));
-        State().Profile().BellStyle(currentStyle);
-    }
-
-    void Profiles::SetBellStyleWindow(winrt::Windows::Foundation::IReference<bool> on)
-    {
-        auto currentStyle = State().Profile().BellStyle();
-        WI_UpdateFlag(currentStyle, Model::BellStyle::Window, winrt::unbox_value<bool>(on));
-        State().Profile().BellStyle(currentStyle);
-    }
-
-    void Profiles::SetBellStyleTaskbar(winrt::Windows::Foundation::IReference<bool> on)
-    {
-        auto currentStyle = State().Profile().BellStyle();
-        WI_UpdateFlag(currentStyle, Model::BellStyle::Taskbar, winrt::unbox_value<bool>(on));
-        State().Profile().BellStyle(currentStyle);
-    }
-
-    void Profiles::DeleteConfirmation_Click(IInspectable const& /*sender*/, RoutedEventArgs const& /*e*/)
-    {
-        auto state{ winrt::get_self<ProfilePageNavigationState>(_State) };
-        state->DeleteProfile();
-    }
-
-    void Profiles::CreateUnfocusedAppearance_Click(IInspectable const& /*sender*/, RoutedEventArgs const& /*e*/)
-    {
-        _State.CreateUnfocusedAppearance();
-    }
-
-    void Profiles::DeleteUnfocusedAppearance_Click(IInspectable const& /*sender*/, RoutedEventArgs const& /*e*/)
-    {
-        _State.DeleteUnfocusedAppearance();
-    }
-
-    fire_and_forget Profiles::Icon_Click(IInspectable const&, RoutedEventArgs const&)
-    {
-        auto lifetime = get_strong();
-
-        const auto parentHwnd{ reinterpret_cast<HWND>(_State.WindowRoot().GetHostingWindow()) };
-        auto file = co_await OpenImagePicker(parentHwnd);
-        if (!file.empty())
-        {
-            _State.Profile().Icon(file);
-        }
-    }
-
-    fire_and_forget Profiles::Commandline_Click(IInspectable const&, RoutedEventArgs const&)
-    {
-        auto lifetime = get_strong();
-
-        static constexpr COMDLG_FILTERSPEC supportedFileTypes[] = {
-            { L"Executable Files (*.exe, *.cmd, *.bat)", L"*.exe;*.cmd;*.bat" },
-            { L"All Files (*.*)", L"*.*" }
-        };
-
-        static constexpr winrt::guid clientGuidExecutables{ 0x2E7E4331, 0x0800, 0x48E6, { 0xB0, 0x17, 0xA1, 0x4C, 0xD8, 0x73, 0xDD, 0x58 } };
-        const auto parentHwnd{ reinterpret_cast<HWND>(_State.WindowRoot().GetHostingWindow()) };
-        auto path = co_await OpenFilePicker(parentHwnd, [](auto&& dialog) {
-            THROW_IF_FAILED(dialog->SetClientGuid(clientGuidExecutables));
-            try
-            {
-                auto folderShellItem{ winrt::capture<IShellItem>(&SHGetKnownFolderItem, FOLDERID_ComputerFolder, KF_FLAG_DEFAULT, nullptr) };
-                dialog->SetDefaultFolder(folderShellItem.get());
-            }
-            CATCH_LOG(); // non-fatal
-            THROW_IF_FAILED(dialog->SetFileTypes(ARRAYSIZE(supportedFileTypes), supportedFileTypes));
-            THROW_IF_FAILED(dialog->SetFileTypeIndex(1)); // the array is 1-indexed
-            THROW_IF_FAILED(dialog->SetDefaultExtension(L"exe;cmd;bat"));
-        });
-
-        if (!path.empty())
-        {
-            _State.Profile().Commandline(path);
-        }
-    }
-
-    fire_and_forget Profiles::StartingDirectory_Click(IInspectable const&, RoutedEventArgs const&)
-    {
-        auto lifetime = get_strong();
-        const auto parentHwnd{ reinterpret_cast<HWND>(_State.WindowRoot().GetHostingWindow()) };
-        auto folder = co_await OpenFilePicker(parentHwnd, [](auto&& dialog) {
-            static constexpr winrt::guid clientGuidFolderPicker{ 0xAADAA433, 0xB04D, 0x4BAE, { 0xB1, 0xEA, 0x1E, 0x6C, 0xD1, 0xCD, 0xA6, 0x8B } };
-            THROW_IF_FAILED(dialog->SetClientGuid(clientGuidFolderPicker));
-            try
-            {
-                auto folderShellItem{ winrt::capture<IShellItem>(&SHGetKnownFolderItem, FOLDERID_ComputerFolder, KF_FLAG_DEFAULT, nullptr) };
-                dialog->SetDefaultFolder(folderShellItem.get());
-            }
-            CATCH_LOG(); // non-fatal
-
-            DWORD flags{};
-            THROW_IF_FAILED(dialog->GetOptions(&flags));
-            THROW_IF_FAILED(dialog->SetOptions(flags | FOS_PICKFOLDERS)); // folders only
-        });
-
-        if (!folder.empty())
-        {
-            _State.Profile().StartingDirectory(folder);
-        }
-    }
-
-    void Profiles::Pivot_SelectionChanged(Windows::Foundation::IInspectable const& /*sender*/,
-                                          RoutedEventArgs const& /*e*/)
-    {
-        _State.LastActivePivot(static_cast<Editor::ProfilesPivots>(ProfilesPivot().SelectedIndex()));
-    }
-}
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+#include "pch.h"
+#include "ProfileViewModel.h"
+#include "ProfileViewModel.g.cpp"
+#include "EnumEntry.h"
+
+#include <LibraryResources.h>
+#include "..\WinRTUtils\inc\Utils.h"
+
+// This function is a copy of DxFontInfo::_NearbyCollection() with
+// * the call to DxFontInfo::s_GetNearbyFonts() inlined
+// * checkForUpdates for GetSystemFontCollection() set to true
+static wil::com_ptr<IDWriteFontCollection1> NearbyCollection(IDWriteFactory* dwriteFactory)
+{
+    // The convenience interfaces for loading fonts from files
+    // are only available on Windows 10+.
+    wil::com_ptr<IDWriteFactory6> factory6;
+    // wil's query() facilities don't work inside WinRT land at the moment.
+    // They produce a compilation error due to IUnknown and winrt::Windows::Foundation::IUnknown being ambiguous.
+    if (!SUCCEEDED(dwriteFactory->QueryInterface(__uuidof(IDWriteFactory6), factory6.put_void())))
+    {
+        return nullptr;
+    }
+
+    wil::com_ptr<IDWriteFontCollection1> systemFontCollection;
+    THROW_IF_FAILED(factory6->GetSystemFontCollection(false, systemFontCollection.addressof(), true));
+
+    wil::com_ptr<IDWriteFontSet> systemFontSet;
+    THROW_IF_FAILED(systemFontCollection->GetFontSet(systemFontSet.addressof()));
+
+    wil::com_ptr<IDWriteFontSetBuilder2> fontSetBuilder2;
+    THROW_IF_FAILED(factory6->CreateFontSetBuilder(fontSetBuilder2.addressof()));
+
+    THROW_IF_FAILED(fontSetBuilder2->AddFontSet(systemFontSet.get()));
+
+    {
+        const std::filesystem::path module{ wil::GetModuleFileNameW<std::wstring>(nullptr) };
+        const auto folder{ module.parent_path() };
+
+        for (const auto& p : std::filesystem::directory_iterator(folder))
+        {
+            if (til::ends_with(p.path().native(), L".ttf"))
+            {
+                fontSetBuilder2->AddFontFile(p.path().c_str());
+            }
+        }
+    }
+
+    wil::com_ptr<IDWriteFontSet> fontSet;
+    THROW_IF_FAILED(fontSetBuilder2->CreateFontSet(fontSet.addressof()));
+
+    wil::com_ptr<IDWriteFontCollection1> fontCollection;
+    THROW_IF_FAILED(factory6->CreateFontCollectionFromFontSet(fontSet.get(), &fontCollection));
+
+    return fontCollection;
+}
+
+using namespace winrt::Windows::UI::Text;
+using namespace winrt::Windows::UI::Xaml;
+using namespace winrt::Windows::UI::Xaml::Controls;
+using namespace winrt::Windows::UI::Xaml::Data;
+using namespace winrt::Windows::UI::Xaml::Navigation;
+using namespace winrt::Windows::Foundation;
+using namespace winrt::Windows::Foundation::Collections;
+using namespace winrt::Microsoft::Terminal::Settings::Model;
+
+namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
+{
+    Windows::Foundation::Collections::IObservableVector<Editor::Font> ProfileViewModel::_MonospaceFontList{ nullptr };
+    Windows::Foundation::Collections::IObservableVector<Editor::Font> ProfileViewModel::_FontList{ nullptr };
+
+    ProfileViewModel::ProfileViewModel(const Model::Profile& profile, const Model::CascadiaSettings& appSettings) :
+        _profile{ profile },
+        _defaultAppearanceViewModel{ winrt::make<implementation::AppearanceViewModel>(profile.DefaultAppearance().try_as<AppearanceConfig>()) },
+        _originalProfileGuid{ profile.Guid() },
+        _appSettings{ appSettings },
+        _unfocusedAppearanceViewModel{ nullptr }
+    {
+        INITIALIZE_BINDABLE_ENUM_SETTING(AntiAliasingMode, TextAntialiasingMode, winrt::Microsoft::Terminal::Control::TextAntialiasingMode, L"Profile_AntialiasingMode", L"Content");
+        INITIALIZE_BINDABLE_ENUM_SETTING_REVERSE_ORDER(CloseOnExitMode, CloseOnExitMode, winrt::Microsoft::Terminal::Settings::Model::CloseOnExitMode, L"Profile_CloseOnExit", L"Content");
+        INITIALIZE_BINDABLE_ENUM_SETTING(ScrollState, ScrollbarState, winrt::Microsoft::Terminal::Control::ScrollbarState, L"Profile_ScrollbarVisibility", L"Content");
+
+        // Add a property changed handler to our own property changed event.
+        // This propagates changes from the settings model to anybody listening to our
+        //  unique view model members.
+        PropertyChanged([this](auto&&, const PropertyChangedEventArgs& args) {
+            const auto viewModelProperty{ args.PropertyName() };
+            if (viewModelProperty == L"IsBaseLayer")
+            {
+                // we _always_ want to show the background image settings in base layer
+                _NotifyChanges(L"BackgroundImageSettingsVisible");
+            }
+            else if (viewModelProperty == L"StartingDirectory")
+            {
+                // notify listener that all starting directory related values might have changed
+                // NOTE: this is similar to what is done with BackgroundImagePath above
+                _NotifyChanges(L"UseParentProcessDirectory", L"UseCustomStartingDirectory");
+            }
+            else if (viewModelProperty == L"UseAcrylic")
+            {
+                // GH#11372: If we're on Windows 10, and someone turns off
+                // acrylic, we're going to disable opacity for them. Opacity
+                // doesn't work without acrylic on Windows 10.
+                //
+                // BODGY: CascadiaSettings's function IsDefaultTerminalAvailable
+                // is basically a "are we on Windows 11" check, because defterm
+                // only works on Win11. So we'll use that.
+                //
+                // Remove when we can remove the rest of GH#11285
+                if (!UseAcrylic() && !CascadiaSettings::IsDefaultTerminalAvailable())
+                {
+                    Opacity(1.0);
+                }
+            }
+            else if (viewModelProperty == L"AntialiasingMode")
+            {
+                _NotifyChanges(L"CurrentAntiAliasingMode");
+            }
+            else if (viewModelProperty == L"CloseOnExit")
+            {
+                _NotifyChanges(L"CurrentCloseOnExitMode");
+            }
+            else if (viewModelProperty == L"BellStyle")
+            {
+                _NotifyChanges(L"IsBellStyleFlagSet");
+            }
+            else if (viewModelProperty == L"ScrollState")
+            {
+                _NotifyChanges(L"CurrentScrollState");
+            }
+        });
+
+        // Do the same for the starting directory
+        if (!StartingDirectory().empty())
+        {
+            _lastStartingDirectoryPath = StartingDirectory();
+        }
+
+        // generate the font list, if we don't have one
+        if (!_FontList || !_MonospaceFontList)
+        {
+            UpdateFontList();
+        }
+
+        if (profile.HasUnfocusedAppearance())
+        {
+            _unfocusedAppearanceViewModel = winrt::make<implementation::AppearanceViewModel>(profile.UnfocusedAppearance().try_as<AppearanceConfig>());
+        }
+
+        _defaultAppearanceViewModel.IsDefault(true);
+    }
+
+    Model::TerminalSettings ProfileViewModel::TermSettings() const
+    {
+        return Model::TerminalSettings::CreateWithProfile(_appSettings, _profile, nullptr).DefaultSettings();
+    }
+
+    // Method Description:
+    // - Updates the lists of fonts and sorts them alphabetically
+    void ProfileViewModel::UpdateFontList() noexcept
+    try
+    {
+        // initialize font list
+        std::vector<Editor::Font> fontList;
+        std::vector<Editor::Font> monospaceFontList;
+
+        // get a DWriteFactory
+        com_ptr<IDWriteFactory> factory;
+        THROW_IF_FAILED(DWriteCreateFactory(
+            DWRITE_FACTORY_TYPE_SHARED,
+            __uuidof(IDWriteFactory),
+            reinterpret_cast<::IUnknown**>(factory.put())));
+
+        // get the font collection; subscribe to updates
+        const auto fontCollection = NearbyCollection(factory.get());
+
+        for (UINT32 i = 0; i < fontCollection->GetFontFamilyCount(); ++i)
+        {
+            try
+            {
+                // get the font family
+                com_ptr<IDWriteFontFamily> fontFamily;
+                THROW_IF_FAILED(fontCollection->GetFontFamily(i, fontFamily.put()));
+
+                // get the font's localized names
+                com_ptr<IDWriteLocalizedStrings> localizedFamilyNames;
+                THROW_IF_FAILED(fontFamily->GetFamilyNames(localizedFamilyNames.put()));
+
+                // construct a font entry for tracking
+                if (const auto fontEntry{ _GetFont(localizedFamilyNames) })
+                {
+                    // check if the font is monospaced
+                    try
+                    {
+                        com_ptr<IDWriteFont> font;
+                        THROW_IF_FAILED(fontFamily->GetFirstMatchingFont(DWRITE_FONT_WEIGHT::DWRITE_FONT_WEIGHT_NORMAL,
+                                                                         DWRITE_FONT_STRETCH::DWRITE_FONT_STRETCH_NORMAL,
+                                                                         DWRITE_FONT_STYLE::DWRITE_FONT_STYLE_NORMAL,
+                                                                         font.put()));
+
+                        // add the font name to our list of monospace fonts
+                        const auto castedFont{ font.try_as<IDWriteFont1>() };
+                        if (castedFont && castedFont->IsMonospacedFont())
+                        {
+                            monospaceFontList.emplace_back(fontEntry);
+                        }
+                    }
+                    CATCH_LOG();
+
+                    // add the font name to our list of all fonts
+                    fontList.emplace_back(std::move(fontEntry));
+                }
+            }
+            CATCH_LOG();
+        }
+
+        // sort and save the lists
+        std::sort(begin(fontList), end(fontList), FontComparator());
+        _FontList = single_threaded_observable_vector<Editor::Font>(std::move(fontList));
+
+        std::sort(begin(monospaceFontList), end(monospaceFontList), FontComparator());
+        _MonospaceFontList = single_threaded_observable_vector<Editor::Font>(std::move(monospaceFontList));
+    }
+    CATCH_LOG();
+
+    Editor::Font ProfileViewModel::_GetFont(com_ptr<IDWriteLocalizedStrings> localizedFamilyNames)
+    {
+        // used for the font's name as an identifier (i.e. text block's font family property)
+        std::wstring nameID;
+        UINT32 nameIDIndex;
+
+        // used for the font's localized name
+        std::wstring localizedName;
+        UINT32 localizedNameIndex;
+
+        // use our current locale to find the localized name
+        BOOL exists{ FALSE };
+        HRESULT hr;
+        wchar_t localeName[LOCALE_NAME_MAX_LENGTH];
+        if (GetUserDefaultLocaleName(localeName, LOCALE_NAME_MAX_LENGTH))
+        {
+            hr = localizedFamilyNames->FindLocaleName(localeName, &localizedNameIndex, &exists);
+        }
+        if (SUCCEEDED(hr) && !exists)
+        {
+            // if we can't find the font for our locale, fallback to the en-us one
+            // Source: https://docs.microsoft.com/en-us/windows/win32/api/dwrite/nf-dwrite-idwritelocalizedstrings-findlocalename
+            hr = localizedFamilyNames->FindLocaleName(L"en-us", &localizedNameIndex, &exists);
+        }
+        if (!exists)
+        {
+            // failed to find the correct locale, using the first one
+            localizedNameIndex = 0;
+        }
+
+        // get the localized name
+        UINT32 nameLength;
+        THROW_IF_FAILED(localizedFamilyNames->GetStringLength(localizedNameIndex, &nameLength));
+
+        localizedName.resize(nameLength);
+        THROW_IF_FAILED(localizedFamilyNames->GetString(localizedNameIndex, localizedName.data(), nameLength + 1));
+
+        // now get the nameID
+        hr = localizedFamilyNames->FindLocaleName(L"en-us", &nameIDIndex, &exists);
+        if (FAILED(hr) || !exists)
+        {
+            // failed to find it, using the first one
+            nameIDIndex = 0;
+        }
+
+        // get the nameID
+        THROW_IF_FAILED(localizedFamilyNames->GetStringLength(nameIDIndex, &nameLength));
+        nameID.resize(nameLength);
+        THROW_IF_FAILED(localizedFamilyNames->GetString(nameIDIndex, nameID.data(), nameLength + 1));
+
+        if (!nameID.empty() && !localizedName.empty())
+        {
+            return make<Font>(nameID, localizedName);
+        }
+        return nullptr;
+    }
+
+    Windows::Foundation::Collections::IMapView<hstring, Model::ColorScheme> ProfileViewModel::Schemes() const noexcept
+    {
+        return _Schemes;
+    }
+
+    void ProfileViewModel::Schemes(const Windows::Foundation::Collections::IMapView<hstring, Model::ColorScheme>& val) noexcept
+    {
+        _Schemes = val;
+    }
+
+    winrt::guid ProfileViewModel::OriginalProfileGuid() const noexcept
+    {
+        return _originalProfileGuid;
+    }
+
+    bool ProfileViewModel::CanDeleteProfile() const
+    {
+        return !IsBaseLayer();
+    }
+
+    Editor::AppearanceViewModel ProfileViewModel::DefaultAppearance()
+    {
+        return _defaultAppearanceViewModel;
+    }
+
+    bool ProfileViewModel::HasUnfocusedAppearance()
+    {
+        return _profile.HasUnfocusedAppearance();
+    }
+
+    bool ProfileViewModel::EditableUnfocusedAppearance() const noexcept
+    {
+        return Feature_EditableUnfocusedAppearance::IsEnabled();
+    }
+
+    bool ProfileViewModel::ShowUnfocusedAppearance()
+    {
+        return EditableUnfocusedAppearance() && HasUnfocusedAppearance();
+    }
+
+    void ProfileViewModel::CreateUnfocusedAppearance()
+    {
+        _profile.CreateUnfocusedAppearance();
+
+        _unfocusedAppearanceViewModel = winrt::make<implementation::AppearanceViewModel>(_profile.UnfocusedAppearance().try_as<AppearanceConfig>());
+        _unfocusedAppearanceViewModel.Schemes(_Schemes);
+        _unfocusedAppearanceViewModel.WindowRoot(_WindowRoot);
+
+        _NotifyChanges(L"UnfocusedAppearance", L"HasUnfocusedAppearance", L"ShowUnfocusedAppearance");
+    }
+
+    void ProfileViewModel::DeleteUnfocusedAppearance()
+    {
+        _profile.DeleteUnfocusedAppearance();
+
+        _unfocusedAppearanceViewModel = nullptr;
+
+        _NotifyChanges(L"UnfocusedAppearance", L"HasUnfocusedAppearance", L"ShowUnfocusedAppearance");
+    }
+
+    Editor::AppearanceViewModel ProfileViewModel::UnfocusedAppearance()
+    {
+        return _unfocusedAppearanceViewModel;
+    }
+
+    bool ProfileViewModel::UseParentProcessDirectory()
+    {
+        return StartingDirectory().empty();
+    }
+
+    // This function simply returns the opposite of UseParentProcessDirectory.
+    // We bind the 'IsEnabled' parameters of the textbox and browse button
+    // to this because it needs to be the reverse of UseParentProcessDirectory
+    // but we don't want to create a whole new converter for inverting a boolean
+    bool ProfileViewModel::UseCustomStartingDirectory()
+    {
+        return !UseParentProcessDirectory();
+    }
+
+    void ProfileViewModel::UseParentProcessDirectory(const bool useParent)
+    {
+        if (useParent)
+        {
+            // Stash the current value of StartingDirectory. If the user
+            // checks and un-checks the "Use parent process directory" button, we want
+            // the path that we display in the text box to remain unchanged.
+            //
+            // Only stash this value if it's not empty
+            if (!StartingDirectory().empty())
+            {
+                _lastStartingDirectoryPath = StartingDirectory();
+            }
+            StartingDirectory(L"");
+        }
+        else
+        {
+            // Restore the path we had previously cached as long as it wasn't empty
+            // If it was empty, set the starting directory to %USERPROFILE%
+            // (we need to set it to something non-empty otherwise we will automatically
+            // disable the text box)
+            if (_lastStartingDirectoryPath.empty())
+            {
+                StartingDirectory(L"%USERPROFILE%");
+            }
+            else
+            {
+                StartingDirectory(_lastStartingDirectoryPath);
+            }
+        }
+    }
+
+    bool ProfileViewModel::IsBellStyleFlagSet(const uint32_t flag)
+    {
+        return (WI_EnumValue(BellStyle()) & flag) == flag;
+    }
+
+    void ProfileViewModel::SetBellStyleAudible(winrt::Windows::Foundation::IReference<bool> on)
+    {
+        auto currentStyle = BellStyle();
+        WI_UpdateFlag(currentStyle, Model::BellStyle::Audible, winrt::unbox_value<bool>(on));
+        BellStyle(currentStyle);
+    }
+
+    void ProfileViewModel::SetBellStyleWindow(winrt::Windows::Foundation::IReference<bool> on)
+    {
+        auto currentStyle = BellStyle();
+        WI_UpdateFlag(currentStyle, Model::BellStyle::Window, winrt::unbox_value<bool>(on));
+        BellStyle(currentStyle);
+    }
+
+    void ProfileViewModel::SetBellStyleTaskbar(winrt::Windows::Foundation::IReference<bool> on)
+    {
+        auto currentStyle = BellStyle();
+        WI_UpdateFlag(currentStyle, Model::BellStyle::Taskbar, winrt::unbox_value<bool>(on));
+        BellStyle(currentStyle);
+    }
+
+    void ProfileViewModel::DeleteProfile()
+    {
+        auto deleteProfileArgs{ winrt::make_self<DeleteProfileEventArgs>(Guid()) };
+        _DeleteProfileHandlers(*this, *deleteProfileArgs);
+    }
+}
diff --git a/src/cascadia/TerminalSettingsEditor/ProfileViewModel.h b/src/cascadia/TerminalSettingsEditor/ProfileViewModel.h
new file mode 100644
index 00000000000..cbbda89c815
--- /dev/null
+++ b/src/cascadia/TerminalSettingsEditor/ProfileViewModel.h
@@ -0,0 +1,147 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+#pragma once
+
+#include "DeleteProfileEventArgs.g.h"
+#include "ProfileViewModel.g.h"
+#include "Utils.h"
+#include "ViewModelHelpers.h"
+#include "Appearances.h"
+
+namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
+{
+    struct ProfileViewModel : ProfileViewModelT<ProfileViewModel>, ViewModelHelper<ProfileViewModel>
+    {
+    public:
+        // font face
+        static void UpdateFontList() noexcept;
+        static Windows::Foundation::Collections::IObservableVector<Editor::Font> CompleteFontList() noexcept { return _FontList; };
+        static Windows::Foundation::Collections::IObservableVector<Editor::Font> MonospaceFontList() noexcept { return _MonospaceFontList; };
+
+        ProfileViewModel(const Model::Profile& profile, const Model::CascadiaSettings& settings);
+        Model::TerminalSettings TermSettings() const;
+        void DeleteProfile();
+
+        Windows::Foundation::Collections::IMapView<hstring, Model::ColorScheme> Schemes() const noexcept;
+        void Schemes(const Windows::Foundation::Collections::IMapView<hstring, Model::ColorScheme>& val) noexcept;
+
+        // bell style bits
+        bool IsBellStyleFlagSet(const uint32_t flag);
+        void SetBellStyleAudible(winrt::Windows::Foundation::IReference<bool> on);
+        void SetBellStyleWindow(winrt::Windows::Foundation::IReference<bool> on);
+        void SetBellStyleTaskbar(winrt::Windows::Foundation::IReference<bool> on);
+
+        void SetAcrylicOpacityPercentageValue(double value)
+        {
+            Opacity(winrt::Microsoft::Terminal::Settings::Editor::Converters::PercentageValueToPercentage(value));
+
+            // GH#11372: If we're on Windows 10, and someone wants opacity, then
+            // we'll turn acrylic on for them. Opacity doesn't work without
+            // acrylic on Windows 10.
+            //
+            // BODGY: CascadiaSettings's function IsDefaultTerminalAvailable
+            // is basically a "are we on Windows 11" check, because defterm
+            // only works on Win11. So we'll use that.
+            //
+            // Remove when we can remove the rest of GH#11285
+            if (value < 100.0 &&
+                !winrt::Microsoft::Terminal::Settings::Model::CascadiaSettings::IsDefaultTerminalAvailable())
+            {
+                UseAcrylic(true);
+            }
+        };
+
+        void SetPadding(double value)
+        {
+            Padding(to_hstring(value));
+        }
+
+        // starting directory
+        bool UseParentProcessDirectory();
+        void UseParentProcessDirectory(const bool useParent);
+        bool UseCustomStartingDirectory();
+
+        // general profile knowledge
+        winrt::guid OriginalProfileGuid() const noexcept;
+        bool CanDeleteProfile() const;
+        Editor::AppearanceViewModel DefaultAppearance();
+        Editor::AppearanceViewModel UnfocusedAppearance();
+        bool HasUnfocusedAppearance();
+        bool EditableUnfocusedAppearance() const noexcept;
+        bool ShowUnfocusedAppearance();
+        void CreateUnfocusedAppearance();
+        void DeleteUnfocusedAppearance();
+
+        VIEW_MODEL_OBSERVABLE_PROPERTY(ProfileSubPage, CurrentPage);
+
+        PERMANENT_OBSERVABLE_PROJECTED_SETTING(_profile, Guid);
+        PERMANENT_OBSERVABLE_PROJECTED_SETTING(_profile, ConnectionType);
+        OBSERVABLE_PROJECTED_SETTING(_profile, Name);
+        OBSERVABLE_PROJECTED_SETTING(_profile, Source);
+        OBSERVABLE_PROJECTED_SETTING(_profile, Hidden);
+        OBSERVABLE_PROJECTED_SETTING(_profile, Icon);
+        OBSERVABLE_PROJECTED_SETTING(_profile, CloseOnExit);
+        OBSERVABLE_PROJECTED_SETTING(_profile, TabTitle);
+        OBSERVABLE_PROJECTED_SETTING(_profile, TabColor);
+        OBSERVABLE_PROJECTED_SETTING(_profile, SuppressApplicationTitle);
+        OBSERVABLE_PROJECTED_SETTING(_profile, UseAcrylic);
+        OBSERVABLE_PROJECTED_SETTING(_profile, ScrollState);
+        OBSERVABLE_PROJECTED_SETTING(_profile, Padding);
+        OBSERVABLE_PROJECTED_SETTING(_profile, Commandline);
+        OBSERVABLE_PROJECTED_SETTING(_profile, StartingDirectory);
+        OBSERVABLE_PROJECTED_SETTING(_profile, AntialiasingMode);
+        OBSERVABLE_PROJECTED_SETTING(_profile.DefaultAppearance(), Foreground);
+        OBSERVABLE_PROJECTED_SETTING(_profile.DefaultAppearance(), Background);
+        OBSERVABLE_PROJECTED_SETTING(_profile.DefaultAppearance(), SelectionBackground);
+        OBSERVABLE_PROJECTED_SETTING(_profile.DefaultAppearance(), CursorColor);
+        OBSERVABLE_PROJECTED_SETTING(_profile.DefaultAppearance(), Opacity);
+        OBSERVABLE_PROJECTED_SETTING(_profile, HistorySize);
+        OBSERVABLE_PROJECTED_SETTING(_profile, SnapOnInput);
+        OBSERVABLE_PROJECTED_SETTING(_profile, AltGrAliasing);
+        OBSERVABLE_PROJECTED_SETTING(_profile, BellStyle);
+
+        WINRT_PROPERTY(bool, IsBaseLayer, false);
+        WINRT_PROPERTY(IHostedInWindow, WindowRoot, nullptr);
+        GETSET_BINDABLE_ENUM_SETTING(AntiAliasingMode, Microsoft::Terminal::Control::TextAntialiasingMode, AntialiasingMode);
+        GETSET_BINDABLE_ENUM_SETTING(CloseOnExitMode, Microsoft::Terminal::Settings::Model::CloseOnExitMode, CloseOnExit);
+        GETSET_BINDABLE_ENUM_SETTING(ScrollState, Microsoft::Terminal::Control::ScrollbarState, ScrollState);
+
+        TYPED_EVENT(DeleteProfile, Editor::ProfileViewModel, Editor::DeleteProfileEventArgs);
+
+    private:
+        Model::Profile _profile;
+        winrt::guid _originalProfileGuid;
+        winrt::hstring _lastBgImagePath;
+        winrt::hstring _lastStartingDirectoryPath;
+        Editor::AppearanceViewModel _defaultAppearanceViewModel;
+        Windows::Foundation::Collections::IMapView<hstring, Model::ColorScheme> _Schemes;
+
+        static Windows::Foundation::Collections::IObservableVector<Editor::Font> _MonospaceFontList;
+        static Windows::Foundation::Collections::IObservableVector<Editor::Font> _FontList;
+
+        static Editor::Font _GetFont(com_ptr<IDWriteLocalizedStrings> localizedFamilyNames);
+
+        Model::CascadiaSettings _appSettings;
+        Editor::AppearanceViewModel _unfocusedAppearanceViewModel;
+    };
+
+    struct DeleteProfileEventArgs :
+        public DeleteProfileEventArgsT<DeleteProfileEventArgs>
+    {
+    public:
+        DeleteProfileEventArgs(guid profileGuid) :
+            _ProfileGuid(profileGuid) {}
+
+        guid ProfileGuid() const noexcept { return _ProfileGuid; }
+
+    private:
+        guid _ProfileGuid{};
+    };
+};
+
+namespace winrt::Microsoft::Terminal::Settings::Editor::factory_implementation
+{
+    // Since we have static functions, we need a factory.
+    BASIC_FACTORY(ProfileViewModel);
+}
diff --git a/src/cascadia/TerminalSettingsEditor/ProfileViewModel.idl b/src/cascadia/TerminalSettingsEditor/ProfileViewModel.idl
new file mode 100644
index 00000000000..b694aea4799
--- /dev/null
+++ b/src/cascadia/TerminalSettingsEditor/ProfileViewModel.idl
@@ -0,0 +1,95 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import "EnumEntry.idl";
+import "MainPage.idl";
+import "Appearances.idl";
+
+#include "ViewModelHelpers.idl.h"
+
+#define OBSERVABLE_PROJECTED_PROFILE_SETTING(Type, Name) \
+    OBSERVABLE_PROJECTED_SETTING(Type, Name);            \
+    Object Name##OverrideSource { get; }
+
+namespace Microsoft.Terminal.Settings.Editor
+{
+    runtimeclass DeleteProfileEventArgs
+    {
+        Guid ProfileGuid { get; };
+    }
+
+    enum ProfileSubPage
+    {
+        Base = 0,
+        Appearance = 1,
+        Advanced = 2
+    };
+
+    runtimeclass ProfileViewModel : Windows.UI.Xaml.Data.INotifyPropertyChanged
+    {
+        static Windows.Foundation.Collections.IObservableVector<Font> CompleteFontList { get; };
+        static Windows.Foundation.Collections.IObservableVector<Font> MonospaceFontList { get; };
+
+        Microsoft.Terminal.Settings.Model.TerminalSettings TermSettings { get; };
+
+        event Windows.Foundation.TypedEventHandler<ProfileViewModel, DeleteProfileEventArgs> DeleteProfile;
+
+        void SetAcrylicOpacityPercentageValue(Double value);
+        void SetPadding(Double value);
+
+        Boolean IsBellStyleFlagSet(UInt32 flag);
+        void SetBellStyleAudible(Windows.Foundation.IReference<Boolean> on);
+        void SetBellStyleWindow(Windows.Foundation.IReference<Boolean> on);
+        void SetBellStyleTaskbar(Windows.Foundation.IReference<Boolean> on);
+
+        IInspectable CurrentAntiAliasingMode;
+        Windows.Foundation.Collections.IObservableVector<Microsoft.Terminal.Settings.Editor.EnumEntry> AntiAliasingModeList { get; };
+
+        IInspectable CurrentCloseOnExitMode;
+        Windows.Foundation.Collections.IObservableVector<Microsoft.Terminal.Settings.Editor.EnumEntry> CloseOnExitModeList { get; };
+
+        IInspectable CurrentScrollState;
+        Windows.Foundation.Collections.IObservableVector<Microsoft.Terminal.Settings.Editor.EnumEntry> ScrollStateList { get; };
+
+        Boolean CanDeleteProfile { get; };
+        Boolean IsBaseLayer;
+        ProfileSubPage CurrentPage;
+        Boolean UseParentProcessDirectory;
+        Boolean UseCustomStartingDirectory { get; };
+        AppearanceViewModel DefaultAppearance { get; };
+        Guid OriginalProfileGuid { get; };
+        Boolean HasUnfocusedAppearance { get; };
+        Boolean EditableUnfocusedAppearance { get; };
+        Boolean ShowUnfocusedAppearance { get; };
+        AppearanceViewModel UnfocusedAppearance { get; };
+
+        void CreateUnfocusedAppearance();
+        void DeleteUnfocusedAppearance();
+
+        OBSERVABLE_PROJECTED_PROFILE_SETTING(String, Name);
+        PERMANENT_OBSERVABLE_PROJECTED_SETTING(Guid, Guid);
+        OBSERVABLE_PROJECTED_PROFILE_SETTING(String, Source);
+        PERMANENT_OBSERVABLE_PROJECTED_SETTING(Guid, ConnectionType);
+        OBSERVABLE_PROJECTED_PROFILE_SETTING(Boolean, Hidden);
+        OBSERVABLE_PROJECTED_PROFILE_SETTING(String, Icon);
+        OBSERVABLE_PROJECTED_PROFILE_SETTING(Microsoft.Terminal.Settings.Model.CloseOnExitMode, CloseOnExit);
+        OBSERVABLE_PROJECTED_PROFILE_SETTING(String, TabTitle);
+        OBSERVABLE_PROJECTED_PROFILE_SETTING(Windows.Foundation.IReference<Microsoft.Terminal.Core.Color>, TabColor);
+        OBSERVABLE_PROJECTED_PROFILE_SETTING(Boolean, SuppressApplicationTitle);
+        OBSERVABLE_PROJECTED_PROFILE_SETTING(Boolean, UseAcrylic);
+        OBSERVABLE_PROJECTED_PROFILE_SETTING(Double, Opacity);
+        OBSERVABLE_PROJECTED_PROFILE_SETTING(Microsoft.Terminal.Control.ScrollbarState, ScrollState);
+        OBSERVABLE_PROJECTED_PROFILE_SETTING(String, Padding);
+        OBSERVABLE_PROJECTED_PROFILE_SETTING(String, Commandline);
+        OBSERVABLE_PROJECTED_PROFILE_SETTING(String, StartingDirectory);
+        OBSERVABLE_PROJECTED_PROFILE_SETTING(Microsoft.Terminal.Control.TextAntialiasingMode, AntialiasingMode);
+        OBSERVABLE_PROJECTED_PROFILE_SETTING(Windows.Foundation.IReference<Microsoft.Terminal.Core.Color>, Foreground);
+        OBSERVABLE_PROJECTED_PROFILE_SETTING(Windows.Foundation.IReference<Microsoft.Terminal.Core.Color>, Background);
+        OBSERVABLE_PROJECTED_PROFILE_SETTING(Windows.Foundation.IReference<Microsoft.Terminal.Core.Color>, SelectionBackground);
+        OBSERVABLE_PROJECTED_PROFILE_SETTING(Windows.Foundation.IReference<Microsoft.Terminal.Core.Color>, CursorColor);
+        OBSERVABLE_PROJECTED_PROFILE_SETTING(Int32, HistorySize);
+        OBSERVABLE_PROJECTED_PROFILE_SETTING(Boolean, SnapOnInput);
+        OBSERVABLE_PROJECTED_PROFILE_SETTING(Boolean, AltGrAliasing);
+        OBSERVABLE_PROJECTED_PROFILE_SETTING(Microsoft.Terminal.Settings.Model.BellStyle, BellStyle);
+    }
+}
diff --git a/src/cascadia/TerminalSettingsEditor/Profiles.h b/src/cascadia/TerminalSettingsEditor/Profiles.h
index 2bcbb1ca37b..8b245b8fe28 100644
--- a/src/cascadia/TerminalSettingsEditor/Profiles.h
+++ b/src/cascadia/TerminalSettingsEditor/Profiles.h
@@ -3,146 +3,26 @@
 
 #pragma once
 
-#include "Profiles.g.h"
 #include "ProfilePageNavigationState.g.h"
-#include "DeleteProfileEventArgs.g.h"
-#include "ProfileViewModel.g.h"
+#include "ProfileViewModel.h"
 #include "Utils.h"
 #include "ViewModelHelpers.h"
 #include "Appearances.h"
 
 namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
 {
-    struct ProfileViewModel : ProfileViewModelT<ProfileViewModel>, ViewModelHelper<ProfileViewModel>
-    {
-    public:
-        ProfileViewModel(const Model::Profile& profile, const Model::CascadiaSettings& settings);
-
-        Model::TerminalSettings TermSettings() const;
-
-        void SetAcrylicOpacityPercentageValue(double value)
-        {
-            Opacity(winrt::Microsoft::Terminal::Settings::Editor::Converters::PercentageValueToPercentage(value));
-
-            // GH#11372: If we're on Windows 10, and someone wants opacity, then
-            // we'll turn acrylic on for them. Opacity doesn't work without
-            // acrylic on Windows 10.
-            //
-            // BODGY: CascadiaSettings's function IsDefaultTerminalAvailable
-            // is basically a "are we on Windows 11" check, because defterm
-            // only works on Win11. So we'll use that.
-            //
-            // Remove when we can remove the rest of GH#11285
-            if (value < 100.0 &&
-                !winrt::Microsoft::Terminal::Settings::Model::CascadiaSettings::IsDefaultTerminalAvailable())
-            {
-                UseAcrylic(true);
-            }
-        };
-
-        void SetPadding(double value)
-        {
-            Padding(to_hstring(value));
-        }
-
-        // starting directory
-        bool UseParentProcessDirectory();
-        void UseParentProcessDirectory(const bool useParent);
-        bool UseCustomStartingDirectory();
-
-        // font face
-        static void UpdateFontList() noexcept;
-        Windows::Foundation::Collections::IObservableVector<Editor::Font> CompleteFontList() const noexcept;
-        Windows::Foundation::Collections::IObservableVector<Editor::Font> MonospaceFontList() const noexcept;
-
-        // general profile knowledge
-        winrt::guid OriginalProfileGuid() const noexcept;
-        bool CanDeleteProfile() const;
-        Editor::AppearanceViewModel DefaultAppearance();
-        Editor::AppearanceViewModel UnfocusedAppearance();
-        bool HasUnfocusedAppearance();
-        bool EditableUnfocusedAppearance();
-        bool ShowUnfocusedAppearance();
-
-        void CreateUnfocusedAppearance(const Windows::Foundation::Collections::IMapView<hstring, Model::ColorScheme>& schemes,
-                                       const IHostedInWindow& windowRoot);
-        void DeleteUnfocusedAppearance();
-
-        WINRT_PROPERTY(bool, IsBaseLayer, false);
-
-        PERMANENT_OBSERVABLE_PROJECTED_SETTING(_profile, Guid);
-        PERMANENT_OBSERVABLE_PROJECTED_SETTING(_profile, ConnectionType);
-        OBSERVABLE_PROJECTED_SETTING(_profile, Name);
-        OBSERVABLE_PROJECTED_SETTING(_profile, Source);
-        OBSERVABLE_PROJECTED_SETTING(_profile, Hidden);
-        OBSERVABLE_PROJECTED_SETTING(_profile, Icon);
-        OBSERVABLE_PROJECTED_SETTING(_profile, CloseOnExit);
-        OBSERVABLE_PROJECTED_SETTING(_profile, TabTitle);
-        OBSERVABLE_PROJECTED_SETTING(_profile, TabColor);
-        OBSERVABLE_PROJECTED_SETTING(_profile, SuppressApplicationTitle);
-        OBSERVABLE_PROJECTED_SETTING(_profile, UseAcrylic);
-        OBSERVABLE_PROJECTED_SETTING(_profile, ScrollState);
-        OBSERVABLE_PROJECTED_SETTING(_profile, Padding);
-        OBSERVABLE_PROJECTED_SETTING(_profile, Commandline);
-        OBSERVABLE_PROJECTED_SETTING(_profile, StartingDirectory);
-        OBSERVABLE_PROJECTED_SETTING(_profile, AntialiasingMode);
-        OBSERVABLE_PROJECTED_SETTING(_profile, ForceFullRepaintRendering);
-        OBSERVABLE_PROJECTED_SETTING(_profile, SoftwareRendering);
-        OBSERVABLE_PROJECTED_SETTING(_profile.DefaultAppearance(), Foreground);
-        OBSERVABLE_PROJECTED_SETTING(_profile.DefaultAppearance(), Background);
-        OBSERVABLE_PROJECTED_SETTING(_profile.DefaultAppearance(), SelectionBackground);
-        OBSERVABLE_PROJECTED_SETTING(_profile.DefaultAppearance(), CursorColor);
-        OBSERVABLE_PROJECTED_SETTING(_profile.DefaultAppearance(), Opacity);
-        OBSERVABLE_PROJECTED_SETTING(_profile, HistorySize);
-        OBSERVABLE_PROJECTED_SETTING(_profile, SnapOnInput);
-        OBSERVABLE_PROJECTED_SETTING(_profile, AltGrAliasing);
-        OBSERVABLE_PROJECTED_SETTING(_profile, BellStyle);
-
-    private:
-        Model::Profile _profile;
-        winrt::guid _originalProfileGuid;
-        winrt::hstring _lastBgImagePath;
-        winrt::hstring _lastStartingDirectoryPath;
-        Editor::AppearanceViewModel _defaultAppearanceViewModel;
-
-        static Windows::Foundation::Collections::IObservableVector<Editor::Font> _MonospaceFontList;
-        static Windows::Foundation::Collections::IObservableVector<Editor::Font> _FontList;
-
-        static Editor::Font _GetFont(com_ptr<IDWriteLocalizedStrings> localizedFamilyNames);
-
-        Model::CascadiaSettings _appSettings;
-        Editor::AppearanceViewModel _unfocusedAppearanceViewModel;
-    };
-
-    struct DeleteProfileEventArgs :
-        public DeleteProfileEventArgsT<DeleteProfileEventArgs>
-    {
-    public:
-        DeleteProfileEventArgs(guid profileGuid) :
-            _ProfileGuid(profileGuid) {}
-
-        guid ProfileGuid() const noexcept { return _ProfileGuid; }
-
-    private:
-        guid _ProfileGuid{};
-    };
-
     struct ProfilePageNavigationState : ProfilePageNavigationStateT<ProfilePageNavigationState>
     {
     public:
         ProfilePageNavigationState(const Editor::ProfileViewModel& viewModel,
                                    const Windows::Foundation::Collections::IMapView<hstring, Model::ColorScheme>& schemes,
-                                   const Editor::ProfilePageNavigationState& lastState,
                                    const IHostedInWindow& windowRoot) :
-            _Profile{ viewModel },
-            _Schemes{ schemes },
-            _WindowRoot{ windowRoot }
+            _Profile{ viewModel }
         {
-            // If there was a previous nav state copy the selected pivot from it.
-            if (lastState)
-            {
-                _LastActivePivot = lastState.LastActivePivot();
-            }
+            auto profile{ winrt::get_self<ProfileViewModel>(viewModel) };
+            profile->Schemes(schemes);
+            profile->WindowRoot(windowRoot);
+
             viewModel.DefaultAppearance().Schemes(schemes);
             viewModel.DefaultAppearance().WindowRoot(windowRoot);
 
@@ -152,63 +32,6 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
                 viewModel.UnfocusedAppearance().WindowRoot(windowRoot);
             }
         }
-
-        void DeleteProfile();
-        void CreateUnfocusedAppearance();
-        void DeleteUnfocusedAppearance();
-
-        Windows::Foundation::Collections::IMapView<hstring, Model::ColorScheme> Schemes() { return _Schemes; }
-        void Schemes(const Windows::Foundation::Collections::IMapView<hstring, Model::ColorScheme>& val) { _Schemes = val; }
-        TYPED_EVENT(DeleteProfile, Editor::ProfilePageNavigationState, Editor::DeleteProfileEventArgs);
-        WINRT_PROPERTY(IHostedInWindow, WindowRoot, nullptr);
-        WINRT_PROPERTY(Editor::ProfilesPivots, LastActivePivot, Editor::ProfilesPivots::General);
         WINRT_PROPERTY(Editor::ProfileViewModel, Profile, nullptr);
-
-    private:
-        Windows::Foundation::Collections::IMapView<hstring, Model::ColorScheme> _Schemes;
-    };
-
-    struct Profiles : public HasScrollViewer<Profiles>, ProfilesT<Profiles>
-    {
-    public:
-        Profiles();
-
-        void OnNavigatedTo(const Windows::UI::Xaml::Navigation::NavigationEventArgs& e);
-        void OnNavigatedFrom(const Windows::UI::Xaml::Navigation::NavigationEventArgs& e);
-
-        // bell style bits
-        bool IsBellStyleFlagSet(const uint32_t flag);
-        void SetBellStyleAudible(winrt::Windows::Foundation::IReference<bool> on);
-        void SetBellStyleWindow(winrt::Windows::Foundation::IReference<bool> on);
-        void SetBellStyleTaskbar(winrt::Windows::Foundation::IReference<bool> on);
-
-        fire_and_forget Commandline_Click(Windows::Foundation::IInspectable const& sender, Windows::UI::Xaml::RoutedEventArgs const& e);
-        fire_and_forget StartingDirectory_Click(Windows::Foundation::IInspectable const& sender, Windows::UI::Xaml::RoutedEventArgs const& e);
-        fire_and_forget Icon_Click(Windows::Foundation::IInspectable const& sender, Windows::UI::Xaml::RoutedEventArgs const& e);
-        void DeleteConfirmation_Click(Windows::Foundation::IInspectable const& sender, Windows::UI::Xaml::RoutedEventArgs const& e);
-        void Pivot_SelectionChanged(Windows::Foundation::IInspectable const& sender, Windows::UI::Xaml::RoutedEventArgs const& e);
-        void CreateUnfocusedAppearance_Click(Windows::Foundation::IInspectable const& sender, Windows::UI::Xaml::RoutedEventArgs const& e);
-        void DeleteUnfocusedAppearance_Click(Windows::Foundation::IInspectable const& sender, Windows::UI::Xaml::RoutedEventArgs const& e);
-
-        WINRT_CALLBACK(PropertyChanged, Windows::UI::Xaml::Data::PropertyChangedEventHandler);
-
-        WINRT_PROPERTY(Editor::ProfilePageNavigationState, State, nullptr);
-        GETSET_BINDABLE_ENUM_SETTING(AntiAliasingMode, Microsoft::Terminal::Control::TextAntialiasingMode, State().Profile, AntialiasingMode);
-        GETSET_BINDABLE_ENUM_SETTING(CloseOnExitMode, Microsoft::Terminal::Settings::Model::CloseOnExitMode, State().Profile, CloseOnExit);
-        GETSET_BINDABLE_ENUM_SETTING(ScrollState, Microsoft::Terminal::Control::ScrollbarState, State().Profile, ScrollState);
-
-    private:
-        void _UpdateBIAlignmentControl(const int32_t val);
-
-        std::array<Windows::UI::Xaml::Controls::Primitives::ToggleButton, 9> _BIAlignmentButtons;
-        Windows::UI::Xaml::Data::INotifyPropertyChanged::PropertyChanged_revoker _ViewModelChangedRevoker;
-        Windows::UI::Xaml::Data::INotifyPropertyChanged::PropertyChanged_revoker _AppearanceViewModelChangedRevoker;
-
-        Microsoft::Terminal::Control::TermControl _previewControl;
     };
 };
-
-namespace winrt::Microsoft::Terminal::Settings::Editor::factory_implementation
-{
-    BASIC_FACTORY(Profiles);
-}
diff --git a/src/cascadia/TerminalSettingsEditor/Profiles.idl b/src/cascadia/TerminalSettingsEditor/Profiles.idl
index 482a1967174..a3a1dafd1cf 100644
--- a/src/cascadia/TerminalSettingsEditor/Profiles.idl
+++ b/src/cascadia/TerminalSettingsEditor/Profiles.idl
@@ -1,114 +1,13 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 
-import "EnumEntry.idl";
 import "MainPage.idl";
-import "Appearances.idl";
-
-#include "ViewModelHelpers.idl.h"
-
-#define OBSERVABLE_PROJECTED_PROFILE_SETTING(Type, Name) \
-    OBSERVABLE_PROJECTED_SETTING(Type, Name);            \
-    Object Name##OverrideSource { get; }
+import "ProfileViewModel.idl";
 
 namespace Microsoft.Terminal.Settings.Editor
 {
-    runtimeclass ProfileViewModel : Windows.UI.Xaml.Data.INotifyPropertyChanged
-    {
-        Windows.Foundation.Collections.IObservableVector<Font> CompleteFontList { get; };
-        Windows.Foundation.Collections.IObservableVector<Font> MonospaceFontList { get; };
-        Microsoft.Terminal.Settings.Model.TerminalSettings TermSettings { get; };
-
-        void SetAcrylicOpacityPercentageValue(Double value);
-        void SetPadding(Double value);
-
-        Boolean CanDeleteProfile { get; };
-        Boolean IsBaseLayer;
-        Boolean UseParentProcessDirectory;
-        Boolean UseCustomStartingDirectory { get; };
-        AppearanceViewModel DefaultAppearance { get; };
-        Guid OriginalProfileGuid { get; };
-        Boolean HasUnfocusedAppearance { get; };
-        Boolean EditableUnfocusedAppearance { get; };
-        Boolean ShowUnfocusedAppearance { get; };
-        AppearanceViewModel UnfocusedAppearance { get; };
-
-        void CreateUnfocusedAppearance(Windows.Foundation.Collections.IMapView<String, Microsoft.Terminal.Settings.Model.ColorScheme> Schemes, IHostedInWindow WindowRoot);
-        void DeleteUnfocusedAppearance();
-
-        OBSERVABLE_PROJECTED_PROFILE_SETTING(String, Name);
-        PERMANENT_OBSERVABLE_PROJECTED_SETTING(Guid, Guid);
-        OBSERVABLE_PROJECTED_PROFILE_SETTING(String, Source);
-        PERMANENT_OBSERVABLE_PROJECTED_SETTING(Guid, ConnectionType);
-        OBSERVABLE_PROJECTED_PROFILE_SETTING(Boolean, Hidden);
-        OBSERVABLE_PROJECTED_PROFILE_SETTING(String, Icon);
-        OBSERVABLE_PROJECTED_PROFILE_SETTING(Microsoft.Terminal.Settings.Model.CloseOnExitMode, CloseOnExit);
-        OBSERVABLE_PROJECTED_PROFILE_SETTING(String, TabTitle);
-        OBSERVABLE_PROJECTED_PROFILE_SETTING(Windows.Foundation.IReference<Microsoft.Terminal.Core.Color>, TabColor);
-        OBSERVABLE_PROJECTED_PROFILE_SETTING(Boolean, SuppressApplicationTitle);
-        OBSERVABLE_PROJECTED_PROFILE_SETTING(Boolean, UseAcrylic);
-        OBSERVABLE_PROJECTED_PROFILE_SETTING(Double, Opacity);
-        OBSERVABLE_PROJECTED_PROFILE_SETTING(Microsoft.Terminal.Control.ScrollbarState, ScrollState);
-        OBSERVABLE_PROJECTED_PROFILE_SETTING(String, Padding);
-        OBSERVABLE_PROJECTED_PROFILE_SETTING(String, Commandline);
-        OBSERVABLE_PROJECTED_PROFILE_SETTING(String, StartingDirectory);
-        OBSERVABLE_PROJECTED_PROFILE_SETTING(Microsoft.Terminal.Control.TextAntialiasingMode, AntialiasingMode);
-        OBSERVABLE_PROJECTED_PROFILE_SETTING(Boolean, ForceFullRepaintRendering);
-        OBSERVABLE_PROJECTED_PROFILE_SETTING(Boolean, SoftwareRendering);
-        OBSERVABLE_PROJECTED_PROFILE_SETTING(Windows.Foundation.IReference<Microsoft.Terminal.Core.Color>, Foreground);
-        OBSERVABLE_PROJECTED_PROFILE_SETTING(Windows.Foundation.IReference<Microsoft.Terminal.Core.Color>, Background);
-        OBSERVABLE_PROJECTED_PROFILE_SETTING(Windows.Foundation.IReference<Microsoft.Terminal.Core.Color>, SelectionBackground);
-        OBSERVABLE_PROJECTED_PROFILE_SETTING(Windows.Foundation.IReference<Microsoft.Terminal.Core.Color>, CursorColor);
-        OBSERVABLE_PROJECTED_PROFILE_SETTING(Int32, HistorySize);
-        OBSERVABLE_PROJECTED_PROFILE_SETTING(Boolean, SnapOnInput);
-        OBSERVABLE_PROJECTED_PROFILE_SETTING(Boolean, AltGrAliasing);
-        OBSERVABLE_PROJECTED_PROFILE_SETTING(Microsoft.Terminal.Settings.Model.BellStyle, BellStyle);
-    }
-
-    runtimeclass DeleteProfileEventArgs
-    {
-        Guid ProfileGuid { get; };
-    }
-
-    enum ProfilesPivots
-    {
-        General = 0,
-        Appearance = 1,
-        Advanced = 2
-    };
-
     runtimeclass ProfilePageNavigationState
     {
-        IHostedInWindow WindowRoot; // necessary to send the right HWND into the file picker dialogs.
-
-        ProfileViewModel Profile;
-        ProfilesPivots LastActivePivot;
-
-        void CreateUnfocusedAppearance();
-        void DeleteUnfocusedAppearance();
-
-        event Windows.Foundation.TypedEventHandler<ProfilePageNavigationState, DeleteProfileEventArgs> DeleteProfile;
+        ProfileViewModel Profile { get; };
     };
-
-    [default_interface] runtimeclass Profiles : Windows.UI.Xaml.Controls.Page, Windows.UI.Xaml.Data.INotifyPropertyChanged
-    {
-        Profiles();
-        ProfilePageNavigationState State { get; };
-
-        Boolean IsBellStyleFlagSet(UInt32 flag);
-        void SetBellStyleAudible(Windows.Foundation.IReference<Boolean> on);
-        void SetBellStyleWindow(Windows.Foundation.IReference<Boolean> on);
-        void SetBellStyleTaskbar(Windows.Foundation.IReference<Boolean> on);
-
-        IInspectable CurrentAntiAliasingMode;
-        Windows.Foundation.Collections.IObservableVector<Microsoft.Terminal.Settings.Editor.EnumEntry> AntiAliasingModeList { get; };
-
-        IInspectable CurrentCloseOnExitMode;
-        Windows.Foundation.Collections.IObservableVector<Microsoft.Terminal.Settings.Editor.EnumEntry> CloseOnExitModeList { get; };
-
-        IInspectable CurrentScrollState;
-        Windows.Foundation.Collections.IObservableVector<Microsoft.Terminal.Settings.Editor.EnumEntry> ScrollStateList { get; };
-
-        Windows.UI.Xaml.Controls.Slider OpacitySlider { get; };
-    }
 }
diff --git a/src/cascadia/TerminalSettingsEditor/Profiles.xaml b/src/cascadia/TerminalSettingsEditor/Profiles.xaml
deleted file mode 100644
index dcbe1d084c6..00000000000
--- a/src/cascadia/TerminalSettingsEditor/Profiles.xaml
+++ /dev/null
@@ -1,487 +0,0 @@
-<!--
-    Copyright (c) Microsoft Corporation. All rights reserved. Licensed under
-    the MIT License. See LICENSE in the project root for license information.
--->
-<Page x:Class="Microsoft.Terminal.Settings.Editor.Profiles"
-      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:local="using:Microsoft.Terminal.Settings.Editor"
-      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-      xmlns:model="using:Microsoft.Terminal.Settings.Model"
-      xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
-      mc:Ignorable="d">
-
-    <Page.Resources>
-        <ResourceDictionary>
-            <ResourceDictionary.MergedDictionaries>
-                <ResourceDictionary Source="CommonResources.xaml" />
-            </ResourceDictionary.MergedDictionaries>
-
-            <DataTemplate x:Key="EnumRadioButtonTemplate"
-                          x:DataType="local:EnumEntry">
-                <RadioButton Content="{x:Bind EnumName, Mode=OneWay}" />
-            </DataTemplate>
-
-            <DataTemplate x:Key="EnumComboBoxItemTemplate"
-                          x:DataType="local:EnumEntry">
-                <TextBlock Text="{x:Bind EnumName, Mode=OneWay}" />
-            </DataTemplate>
-
-            <DataTemplate x:Key="FontFaceComboBoxItemTemplate"
-                          x:DataType="local:Font">
-                <TextBlock FontFamily="{x:Bind Name}"
-                           Text="{x:Bind LocalizedName}" />
-            </DataTemplate>
-        </ResourceDictionary>
-    </Page.Resources>
-
-    <!--  Use a Grid instead of a StackPanel. StackPanel suppresses the inner ScrollViewer.  -->
-    <Grid>
-        <Grid.RowDefinitions>
-            <RowDefinition Height="auto" />
-            <RowDefinition Height="*" />
-        </Grid.RowDefinitions>
-
-        <TextBlock x:Uid="Profile_BaseLayerDisclaimer"
-                   Grid.Row="0"
-                   Margin="{StaticResource StandardIndentMargin}"
-                   Style="{StaticResource DisclaimerStyle}"
-                   Visibility="{x:Bind State.Profile.IsBaseLayer}" />
-
-        <Pivot x:Name="ProfilesPivot"
-               Grid.Row="1"
-               Margin="1,0,0,0"
-               HorizontalAlignment="Left"
-               SelectionChanged="Pivot_SelectionChanged">
-            <!--  General Tab  -->
-            <PivotItem x:Uid="Profile_General">
-                <ScrollViewer ViewChanging="ViewChanging">
-                    <StackPanel Style="{StaticResource PivotStackStyle}">
-
-                        <!--  Name  -->
-                        <!--
-                            NOTE: Has/Clear is not bound because we don't want the reset button & override text to appear.
-                            Additionally, the JSON stubs generated by auto-generated profiles come with a name,
-                            so the name will always be overridden.
-                        -->
-                        <local:SettingContainer x:Uid="Profile_Name"
-                                                Margin="0,0,0,24"
-                                                Visibility="{x:Bind local:Converters.InvertedBooleanToVisibility(State.Profile.IsBaseLayer), Mode=OneWay}">
-                            <TextBox Style="{StaticResource TextBoxSettingStyle}"
-                                     Text="{x:Bind State.Profile.Name, Mode=TwoWay}" />
-                        </local:SettingContainer>
-
-                        <!--  Commandline  -->
-                        <local:SettingContainer x:Name="CommandlineContainer"
-                                                x:Uid="Profile_Commandline"
-                                                Margin="0,0,0,24"
-                                                ClearSettingValue="{x:Bind State.Profile.ClearCommandline}"
-                                                HasSettingValue="{x:Bind State.Profile.HasCommandline, Mode=OneWay}"
-                                                SettingOverrideSource="{x:Bind State.Profile.CommandlineOverrideSource, Mode=OneWay}"
-                                                Visibility="{x:Bind local:Converters.InvertedBooleanToVisibility(State.Profile.IsBaseLayer), Mode=OneWay}">
-                            <StackPanel Orientation="Horizontal">
-                                <TextBox x:Uid="Profile_CommandlineBox"
-                                         IsSpellCheckEnabled="False"
-                                         Style="{StaticResource TextBoxSettingStyle}"
-                                         Text="{x:Bind State.Profile.Commandline, Mode=TwoWay}" />
-                                <Button x:Uid="Profile_CommandlineBrowse"
-                                        Click="Commandline_Click"
-                                        Style="{StaticResource BrowseButtonStyle}" />
-                            </StackPanel>
-                        </local:SettingContainer>
-
-                        <!--  Starting Directory  -->
-                        <local:SettingContainer x:Name="StartingDirectoryContainer"
-                                                x:Uid="Profile_StartingDirectory"
-                                                Margin="0"
-                                                ClearSettingValue="{x:Bind State.Profile.ClearStartingDirectory}"
-                                                HasSettingValue="{x:Bind State.Profile.HasStartingDirectory, Mode=OneWay}"
-                                                SettingOverrideSource="{x:Bind State.Profile.StartingDirectoryOverrideSource, Mode=OneWay}">
-                            <StackPanel Orientation="Vertical">
-                                <StackPanel Orientation="Horizontal">
-                                    <TextBox x:Uid="Profile_StartingDirectoryBox"
-                                             IsEnabled="{x:Bind State.Profile.UseCustomStartingDirectory, Mode=OneWay}"
-                                             IsSpellCheckEnabled="False"
-                                             Style="{StaticResource TextBoxSettingStyle}"
-                                             Text="{x:Bind State.Profile.StartingDirectory, Mode=TwoWay}" />
-                                    <Button x:Name="StartingDirectoryBrowse"
-                                            x:Uid="Profile_StartingDirectoryBrowse"
-                                            Click="StartingDirectory_Click"
-                                            IsEnabled="{x:Bind State.Profile.UseCustomStartingDirectory, Mode=OneWay}"
-                                            Style="{StaticResource BrowseButtonStyle}" />
-                                </StackPanel>
-                                <CheckBox x:Name="StartingDirectoryUseParentCheckbox"
-                                          x:Uid="Profile_StartingDirectoryUseParentCheckbox"
-                                          IsChecked="{x:Bind State.Profile.UseParentProcessDirectory, Mode=TwoWay}" />
-                            </StackPanel>
-                        </local:SettingContainer>
-
-                        <!--  Icon  -->
-                        <local:SettingContainer x:Uid="Profile_Icon"
-                                                ClearSettingValue="{x:Bind State.Profile.ClearIcon}"
-                                                HasSettingValue="{x:Bind State.Profile.HasIcon, Mode=OneWay}"
-                                                SettingOverrideSource="{x:Bind State.Profile.IconOverrideSource, Mode=OneWay}">
-                            <StackPanel Orientation="Horizontal">
-                                <TextBox x:Uid="Profile_IconBox"
-                                         FontFamily="Segoe UI, Segoe MDL2 Assets"
-                                         IsSpellCheckEnabled="False"
-                                         Style="{StaticResource TextBoxSettingStyle}"
-                                         Text="{x:Bind State.Profile.Icon, Mode=TwoWay}" />
-                                <Button x:Uid="Profile_IconBrowse"
-                                        Click="Icon_Click"
-                                        Style="{StaticResource BrowseButtonStyle}" />
-                            </StackPanel>
-                        </local:SettingContainer>
-
-                        <!--  Tab Title  -->
-                        <local:SettingContainer x:Uid="Profile_TabTitle"
-                                                ClearSettingValue="{x:Bind State.Profile.ClearTabTitle}"
-                                                HasSettingValue="{x:Bind State.Profile.HasTabTitle, Mode=OneWay}"
-                                                SettingOverrideSource="{x:Bind State.Profile.TabTitleOverrideSource, Mode=OneWay}">
-                            <TextBox Style="{StaticResource TextBoxSettingStyle}"
-                                     Text="{x:Bind State.Profile.TabTitle, Mode=TwoWay}" />
-                        </local:SettingContainer>
-
-                        <!--  Hidden  -->
-                        <local:SettingContainer x:Uid="Profile_Hidden"
-                                                Visibility="{x:Bind local:Converters.InvertedBooleanToVisibility(State.Profile.IsBaseLayer), Mode=OneWay}">
-                            <ToggleSwitch IsOn="{x:Bind State.Profile.Hidden, Mode=TwoWay}" />
-                        </local:SettingContainer>
-
-                        <!--  Delete Button  -->
-                        <Button x:Name="DeleteButton"
-                                Margin="{StaticResource StandardControlMargin}"
-                                Style="{StaticResource DeleteButtonStyle}"
-                                Visibility="{x:Bind State.Profile.CanDeleteProfile}">
-                            <Button.Resources>
-                                <ResourceDictionary>
-                                    <ResourceDictionary.ThemeDictionaries>
-                                        <ResourceDictionary x:Key="Light">
-                                            <SolidColorBrush x:Key="ButtonBackground"
-                                                             Color="Firebrick" />
-                                            <SolidColorBrush x:Key="ButtonBackgroundPointerOver"
-                                                             Color="#C23232" />
-                                            <SolidColorBrush x:Key="ButtonBackgroundPressed"
-                                                             Color="#A21212" />
-                                            <SolidColorBrush x:Key="ButtonForeground"
-                                                             Color="White" />
-                                            <SolidColorBrush x:Key="ButtonForegroundPointerOver"
-                                                             Color="White" />
-                                            <SolidColorBrush x:Key="ButtonForegroundPressed"
-                                                             Color="White" />
-                                        </ResourceDictionary>
-                                        <ResourceDictionary x:Key="Dark">
-                                            <SolidColorBrush x:Key="ButtonBackground"
-                                                             Color="Firebrick" />
-                                            <SolidColorBrush x:Key="ButtonBackgroundPointerOver"
-                                                             Color="#C23232" />
-                                            <SolidColorBrush x:Key="ButtonBackgroundPressed"
-                                                             Color="#A21212" />
-                                            <SolidColorBrush x:Key="ButtonForeground"
-                                                             Color="White" />
-                                            <SolidColorBrush x:Key="ButtonForegroundPointerOver"
-                                                             Color="White" />
-                                            <SolidColorBrush x:Key="ButtonForegroundPressed"
-                                                             Color="White" />
-                                        </ResourceDictionary>
-                                        <ResourceDictionary x:Key="HighContrast">
-                                            <SolidColorBrush x:Key="ButtonBackground"
-                                                             Color="{ThemeResource SystemColorButtonFaceColor}" />
-                                            <SolidColorBrush x:Key="ButtonBackgroundPointerOver"
-                                                             Color="{ThemeResource SystemColorHighlightColor}" />
-                                            <SolidColorBrush x:Key="ButtonBackgroundPressed"
-                                                             Color="{ThemeResource SystemColorHighlightColor}" />
-                                            <SolidColorBrush x:Key="ButtonForeground"
-                                                             Color="{ThemeResource SystemColorButtonTextColor}" />
-                                            <SolidColorBrush x:Key="ButtonForegroundPointerOver"
-                                                             Color="{ThemeResource SystemColorHighlightTextColor}" />
-                                            <SolidColorBrush x:Key="ButtonForegroundPressed"
-                                                             Color="{ThemeResource SystemColorHighlightTextColor}" />
-                                        </ResourceDictionary>
-                                    </ResourceDictionary.ThemeDictionaries>
-                                </ResourceDictionary>
-                            </Button.Resources>
-                            <Button.Content>
-                                <StackPanel Orientation="Horizontal">
-                                    <FontIcon FontSize="{StaticResource StandardIconSize}"
-                                              Glyph="&#xE74D;" />
-                                    <TextBlock x:Uid="Profile_DeleteButton"
-                                               Margin="10,0,0,0" />
-                                </StackPanel>
-                            </Button.Content>
-                            <Button.Flyout>
-                                <Flyout>
-                                    <StackPanel>
-                                        <TextBlock x:Uid="Profile_DeleteConfirmationMessage"
-                                                   Style="{StaticResource CustomFlyoutTextStyle}" />
-                                        <Button x:Uid="Profile_DeleteConfirmationButton"
-                                                Click="DeleteConfirmation_Click" />
-                                    </StackPanel>
-                                </Flyout>
-                            </Button.Flyout>
-                        </Button>
-                    </StackPanel>
-                </ScrollViewer>
-            </PivotItem>
-
-            <!--  Appearance Tab  -->
-            <PivotItem x:Uid="Profile_Appearance">
-                <ScrollViewer ViewChanging="ViewChanging">
-                    <StackPanel>
-                        <!--  Control Preview  -->
-                        <Border x:Name="ControlPreview"
-                                Width="350"
-                                Height="160"
-                                Margin="0,0,0,12"
-                                HorizontalAlignment="Left"
-                                BorderBrush="{ThemeResource SystemControlForegroundBaseMediumLowBrush}"
-                                BorderThickness="1" />
-
-                        <local:Appearances Appearance="{x:Bind State.Profile.DefaultAppearance, Mode=OneWay}"
-                                           SourceProfile="{x:Bind State.Profile, Mode=OneWay}" />
-
-                        <!--  Grouping: Transparency  -->
-                        <StackPanel Style="{StaticResource PivotStackStyle}">
-                            <TextBlock x:Uid="Profile_TransparencyHeader"
-                                       Style="{StaticResource SubtitleTextBlockStyle}" />
-
-                            <!--  Opacity  -->
-                            <local:SettingContainer x:Name="OpacityContainer"
-                                                    x:Uid="Profile_Opacity"
-                                                    Margin="0"
-                                                    ClearSettingValue="{x:Bind State.Profile.ClearOpacity}"
-                                                    HasSettingValue="{x:Bind State.Profile.HasOpacity, Mode=OneWay}"
-                                                    SettingOverrideSource="{x:Bind State.Profile.OpacityOverrideSource, Mode=OneWay}">
-                                <StackPanel x:Name="OpacityControl">
-                                    <Grid Style="{StaticResource CustomSliderControlGridStyle}">
-                                        <Grid.ColumnDefinitions>
-                                            <ColumnDefinition Width="*" />
-                                            <ColumnDefinition Width="Auto" />
-                                        </Grid.ColumnDefinitions>
-                                        <Slider x:Name="OpacitySlider"
-                                                x:Uid="Profile_OpacitySlider"
-                                                Grid.Column="0"
-                                                Value="{x:Bind local:Converters.PercentageToPercentageValue(State.Profile.Opacity), BindBack=State.Profile.SetAcrylicOpacityPercentageValue, Mode=TwoWay}" />
-                                        <TextBlock Grid.Column="1"
-                                                   Style="{StaticResource SliderValueLabelStyle}"
-                                                   Text="{x:Bind local:Converters.AppendPercentageSign(OpacitySlider.Value), Mode=OneWay}" />
-                                    </Grid>
-                                </StackPanel>
-                            </local:SettingContainer>
-
-                            <!--  Use Acrylic  -->
-                            <local:SettingContainer x:Uid="Profile_UseAcrylic"
-                                                    Margin="0"
-                                                    ClearSettingValue="{x:Bind State.Profile.ClearUseAcrylic}"
-                                                    HasSettingValue="{x:Bind State.Profile.HasUseAcrylic, Mode=OneWay}"
-                                                    SettingOverrideSource="{x:Bind State.Profile.UseAcrylicOverrideSource, Mode=OneWay}">
-                                <ToggleSwitch x:Name="UseAcrylicToggleSwitch"
-                                              IsOn="{x:Bind State.Profile.UseAcrylic, Mode=TwoWay}" />
-                            </local:SettingContainer>
-
-                        </StackPanel>
-
-                        <!--  Grouping: Window  -->
-                        <StackPanel Style="{StaticResource PivotStackStyle}">
-                            <TextBlock x:Uid="Profile_WindowHeader"
-                                       Style="{StaticResource SubtitleTextBlockStyle}" />
-
-                            <!--  Padding  -->
-                            <local:SettingContainer x:Uid="Profile_Padding"
-                                                    Margin="0"
-                                                    ClearSettingValue="{x:Bind State.Profile.ClearPadding}"
-                                                    HasSettingValue="{x:Bind State.Profile.HasPadding, Mode=OneWay}"
-                                                    SettingOverrideSource="{x:Bind State.Profile.PaddingOverrideSource, Mode=OneWay}">
-                                <Grid Style="{StaticResource CustomSliderControlGridStyle}">
-                                    <Grid.ColumnDefinitions>
-                                        <ColumnDefinition Width="*" />
-                                        <ColumnDefinition Width="Auto" />
-                                    </Grid.ColumnDefinitions>
-                                    <Slider x:Name="PaddingSlider"
-                                            x:Uid="Profile_PaddingSlider"
-                                            Grid.Column="0"
-                                            Value="{x:Bind local:Converters.MaxValueFromPaddingString(State.Profile.Padding), BindBack=State.Profile.SetPadding, Mode=TwoWay}" />
-                                    <TextBlock Grid.Column="1"
-                                               Style="{StaticResource SliderValueLabelStyle}"
-                                               Text="{Binding ElementName=PaddingSlider, Path=Value, Mode=OneWay}" />
-                                </Grid>
-                            </local:SettingContainer>
-
-                            <!--  Scrollbar Visibility  -->
-                            <local:SettingContainer x:Uid="Profile_ScrollbarVisibility"
-                                                    ClearSettingValue="{x:Bind State.Profile.ClearScrollState}"
-                                                    HasSettingValue="{x:Bind State.Profile.HasScrollState, Mode=OneWay}"
-                                                    SettingOverrideSource="{x:Bind State.Profile.ScrollStateOverrideSource, Mode=OneWay}">
-                                <muxc:RadioButtons AutomationProperties.AccessibilityView="Content"
-                                                   ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
-                                                   ItemsSource="{x:Bind ScrollStateList, Mode=OneWay}"
-                                                   SelectedItem="{x:Bind CurrentScrollState, Mode=TwoWay}" />
-                            </local:SettingContainer>
-                        </StackPanel>
-                        <StackPanel>
-                            <StackPanel Orientation="Horizontal"
-                                        Visibility="{x:Bind State.Profile.EditableUnfocusedAppearance, Mode=OneWay}">
-                                <TextBlock x:Uid="Profile_UnfocusedAppearanceTextBlock"
-                                           Style="{StaticResource TitleTextBlockStyle}" />
-                                <Button x:Uid="Profile_CreateUnfocusedAppearanceButton"
-                                        Margin="32,0,0,0"
-                                        Click="CreateUnfocusedAppearance_Click"
-                                        Style="{StaticResource BaseButtonStyle}"
-                                        Visibility="{x:Bind local:Converters.InvertedBooleanToVisibility(State.Profile.HasUnfocusedAppearance), Mode=OneWay}">
-                                    <Button.Content>
-                                        <FontIcon FontSize="{StaticResource StandardIconSize}"
-                                                  Glyph="&#xE710;" />
-                                    </Button.Content>
-                                </Button>
-                                <Button x:Uid="Profile_DeleteUnfocusedAppearanceButton"
-                                        Margin="32,0,0,0"
-                                        Click="DeleteUnfocusedAppearance_Click"
-                                        Style="{StaticResource BaseButtonStyle}"
-                                        Visibility="{x:Bind State.Profile.HasUnfocusedAppearance, Mode=OneWay}">
-                                    <Button.Content>
-                                        <FontIcon FontSize="{StaticResource StandardIconSize}"
-                                                  Glyph="&#xE74D;" />
-                                    </Button.Content>
-                                    <Button.Resources>
-                                        <ResourceDictionary>
-                                            <ResourceDictionary.ThemeDictionaries>
-                                                <ResourceDictionary x:Key="Light">
-                                                    <SolidColorBrush x:Key="ButtonBackground"
-                                                                     Color="Firebrick" />
-                                                    <SolidColorBrush x:Key="ButtonBackgroundPointerOver"
-                                                                     Color="#C23232" />
-                                                    <SolidColorBrush x:Key="ButtonBackgroundPressed"
-                                                                     Color="#A21212" />
-                                                    <SolidColorBrush x:Key="ButtonForeground"
-                                                                     Color="White" />
-                                                    <SolidColorBrush x:Key="ButtonForegroundPointerOver"
-                                                                     Color="White" />
-                                                    <SolidColorBrush x:Key="ButtonForegroundPressed"
-                                                                     Color="White" />
-                                                </ResourceDictionary>
-                                                <ResourceDictionary x:Key="Dark">
-                                                    <SolidColorBrush x:Key="ButtonBackground"
-                                                                     Color="Firebrick" />
-                                                    <SolidColorBrush x:Key="ButtonBackgroundPointerOver"
-                                                                     Color="#C23232" />
-                                                    <SolidColorBrush x:Key="ButtonBackgroundPressed"
-                                                                     Color="#A21212" />
-                                                    <SolidColorBrush x:Key="ButtonForeground"
-                                                                     Color="White" />
-                                                    <SolidColorBrush x:Key="ButtonForegroundPointerOver"
-                                                                     Color="White" />
-                                                    <SolidColorBrush x:Key="ButtonForegroundPressed"
-                                                                     Color="White" />
-                                                </ResourceDictionary>
-                                                <ResourceDictionary x:Key="HighContrast">
-                                                    <SolidColorBrush x:Key="ButtonBackground"
-                                                                     Color="{ThemeResource SystemColorButtonFaceColor}" />
-                                                    <SolidColorBrush x:Key="ButtonBackgroundPointerOver"
-                                                                     Color="{ThemeResource SystemColorHighlightColor}" />
-                                                    <SolidColorBrush x:Key="ButtonBackgroundPressed"
-                                                                     Color="{ThemeResource SystemColorHighlightColor}" />
-                                                    <SolidColorBrush x:Key="ButtonForeground"
-                                                                     Color="{ThemeResource SystemColorButtonTextColor}" />
-                                                    <SolidColorBrush x:Key="ButtonForegroundPointerOver"
-                                                                     Color="{ThemeResource SystemColorHighlightTextColor}" />
-                                                    <SolidColorBrush x:Key="ButtonForegroundPressed"
-                                                                     Color="{ThemeResource SystemColorHighlightTextColor}" />
-                                                </ResourceDictionary>
-                                            </ResourceDictionary.ThemeDictionaries>
-                                        </ResourceDictionary>
-                                    </Button.Resources>
-                                </Button>
-                            </StackPanel>
-                            <local:Appearances Appearance="{x:Bind State.Profile.UnfocusedAppearance, Mode=OneWay}"
-                                               SourceProfile="{x:Bind State.Profile, Mode=OneWay}"
-                                               Visibility="{x:Bind State.Profile.ShowUnfocusedAppearance, Mode=OneWay}" />
-                        </StackPanel>
-                    </StackPanel>
-                </ScrollViewer>
-            </PivotItem>
-
-            <!--  Advanced Tab  -->
-            <PivotItem x:Uid="Profile_Advanced">
-                <ScrollViewer ViewChanging="ViewChanging">
-                    <StackPanel Style="{StaticResource PivotStackStyle}">
-                        <!--  Suppress Application Title  -->
-                        <local:SettingContainer x:Uid="Profile_SuppressApplicationTitle"
-                                                Margin="0"
-                                                ClearSettingValue="{x:Bind State.Profile.ClearSuppressApplicationTitle}"
-                                                HasSettingValue="{x:Bind State.Profile.HasSuppressApplicationTitle, Mode=OneWay}"
-                                                SettingOverrideSource="{x:Bind State.Profile.SuppressApplicationTitleOverrideSource, Mode=OneWay}">
-                            <ToggleSwitch IsOn="{x:Bind State.Profile.SuppressApplicationTitle, Mode=TwoWay}" />
-                        </local:SettingContainer>
-
-                        <!--  Antialiasing Mode  -->
-                        <local:SettingContainer x:Uid="Profile_AntialiasingMode"
-                                                ClearSettingValue="{x:Bind State.Profile.ClearAntialiasingMode}"
-                                                HasSettingValue="{x:Bind State.Profile.HasAntialiasingMode, Mode=OneWay}"
-                                                SettingOverrideSource="{x:Bind State.Profile.AntialiasingModeOverrideSource, Mode=OneWay}">
-                            <muxc:RadioButtons AutomationProperties.AccessibilityView="Content"
-                                               ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
-                                               ItemsSource="{x:Bind AntiAliasingModeList, Mode=OneWay}"
-                                               SelectedItem="{x:Bind CurrentAntiAliasingMode, Mode=TwoWay}" />
-                        </local:SettingContainer>
-
-                        <!--  AltGr Aliasing  -->
-                        <local:SettingContainer x:Uid="Profile_AltGrAliasing"
-                                                ClearSettingValue="{x:Bind State.Profile.ClearAltGrAliasing}"
-                                                HasSettingValue="{x:Bind State.Profile.HasAltGrAliasing, Mode=OneWay}"
-                                                SettingOverrideSource="{x:Bind State.Profile.AltGrAliasingOverrideSource, Mode=OneWay}">
-                            <ToggleSwitch IsOn="{x:Bind State.Profile.AltGrAliasing, Mode=TwoWay}" />
-                        </local:SettingContainer>
-
-                        <!--  Snap On Input  -->
-                        <local:SettingContainer x:Uid="Profile_SnapOnInput"
-                                                ClearSettingValue="{x:Bind State.Profile.ClearSnapOnInput}"
-                                                HasSettingValue="{x:Bind State.Profile.HasSnapOnInput, Mode=OneWay}"
-                                                SettingOverrideSource="{x:Bind State.Profile.SnapOnInputOverrideSource, Mode=OneWay}">
-                            <ToggleSwitch IsOn="{x:Bind State.Profile.SnapOnInput, Mode=TwoWay}" />
-                        </local:SettingContainer>
-
-                        <!--  History Size  -->
-                        <local:SettingContainer x:Uid="Profile_HistorySize"
-                                                ClearSettingValue="{x:Bind State.Profile.ClearHistorySize}"
-                                                HasSettingValue="{x:Bind State.Profile.HasHistorySize, Mode=OneWay}"
-                                                SettingOverrideSource="{x:Bind State.Profile.HistorySizeOverrideSource, Mode=OneWay}">
-                            <muxc:NumberBox x:Uid="Profile_HistorySizeBox"
-                                            LargeChange="100"
-                                            Minimum="0"
-                                            SmallChange="10"
-                                            Style="{StaticResource NumberBoxSettingStyle}"
-                                            Value="{x:Bind State.Profile.HistorySize, Mode=TwoWay}" />
-                        </local:SettingContainer>
-
-                        <!--  Close On Exit  -->
-                        <local:SettingContainer x:Uid="Profile_CloseOnExit"
-                                                ClearSettingValue="{x:Bind State.Profile.ClearCloseOnExit}"
-                                                HasSettingValue="{x:Bind State.Profile.HasCloseOnExit, Mode=OneWay}"
-                                                SettingOverrideSource="{x:Bind State.Profile.CloseOnExitOverrideSource, Mode=OneWay}">
-                            <muxc:RadioButtons AutomationProperties.AccessibilityView="Content"
-                                               ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
-                                               ItemsSource="{x:Bind CloseOnExitModeList, Mode=OneWay}"
-                                               SelectedItem="{x:Bind CurrentCloseOnExitMode, Mode=TwoWay}" />
-                        </local:SettingContainer>
-
-                        <!--  Bell Style  -->
-                        <local:SettingContainer x:Uid="Profile_BellStyle"
-                                                ClearSettingValue="{x:Bind State.Profile.ClearBellStyle}"
-                                                HasSettingValue="{x:Bind State.Profile.HasBellStyle, Mode=OneWay}"
-                                                SettingOverrideSource="{x:Bind State.Profile.BellStyleOverrideSource, Mode=OneWay}">
-                            <StackPanel>
-                                <CheckBox x:Uid="Profile_BellStyleAudible"
-                                          IsChecked="{x:Bind IsBellStyleFlagSet(1), BindBack=SetBellStyleAudible, Mode=TwoWay}" />
-                                <CheckBox x:Uid="Profile_BellStyleWindow"
-                                          IsChecked="{x:Bind IsBellStyleFlagSet(2), BindBack=SetBellStyleWindow, Mode=TwoWay}" />
-                                <CheckBox x:Uid="Profile_BellStyleTaskbar"
-                                          IsChecked="{x:Bind IsBellStyleFlagSet(4), BindBack=SetBellStyleTaskbar, Mode=TwoWay}" />
-                            </StackPanel>
-                        </local:SettingContainer>
-                    </StackPanel>
-                </ScrollViewer>
-            </PivotItem>
-        </Pivot>
-    </Grid>
-</Page>
diff --git a/src/cascadia/TerminalSettingsEditor/Profiles_Advanced.cpp b/src/cascadia/TerminalSettingsEditor/Profiles_Advanced.cpp
new file mode 100644
index 00000000000..79c0edffd76
--- /dev/null
+++ b/src/cascadia/TerminalSettingsEditor/Profiles_Advanced.cpp
@@ -0,0 +1,31 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+#include "pch.h"
+#include "Profiles_Advanced.h"
+#include "Profiles_Advanced.g.cpp"
+
+#include "EnumEntry.h"
+#include <LibraryResources.h>
+#include "..\WinRTUtils\inc\Utils.h"
+
+using namespace winrt::Windows::UI::Xaml::Navigation;
+
+namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
+{
+    Profiles_Advanced::Profiles_Advanced()
+    {
+        InitializeComponent();
+    }
+
+    void Profiles_Advanced::OnNavigatedTo(const NavigationEventArgs& e)
+    {
+        auto state{ e.Parameter().as<Editor::ProfilePageNavigationState>() };
+        _Profile = state.Profile();
+    }
+
+    void Profiles_Advanced::OnNavigatedFrom(const NavigationEventArgs& /*e*/)
+    {
+        _ViewModelChangedRevoker.revoke();
+    }
+}
diff --git a/src/cascadia/TerminalSettingsEditor/Profiles_Advanced.h b/src/cascadia/TerminalSettingsEditor/Profiles_Advanced.h
new file mode 100644
index 00000000000..1acd81d647a
--- /dev/null
+++ b/src/cascadia/TerminalSettingsEditor/Profiles_Advanced.h
@@ -0,0 +1,31 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+#pragma once
+
+#include "Profiles_Advanced.g.h"
+#include "ViewModelHelpers.h"
+#include "Utils.h"
+
+namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
+{
+    struct Profiles_Advanced : public HasScrollViewer<Profiles_Advanced>, Profiles_AdvancedT<Profiles_Advanced>
+    {
+    public:
+        Profiles_Advanced();
+
+        void OnNavigatedTo(const Windows::UI::Xaml::Navigation::NavigationEventArgs& e);
+        void OnNavigatedFrom(const Windows::UI::Xaml::Navigation::NavigationEventArgs& e);
+
+        WINRT_CALLBACK(PropertyChanged, Windows::UI::Xaml::Data::PropertyChangedEventHandler);
+        WINRT_PROPERTY(Editor::ProfileViewModel, Profile, nullptr);
+
+    private:
+        Windows::UI::Xaml::Data::INotifyPropertyChanged::PropertyChanged_revoker _ViewModelChangedRevoker;
+    };
+};
+
+namespace winrt::Microsoft::Terminal::Settings::Editor::factory_implementation
+{
+    BASIC_FACTORY(Profiles_Advanced);
+}
diff --git a/src/cascadia/TerminalSettingsEditor/Profiles_Advanced.idl b/src/cascadia/TerminalSettingsEditor/Profiles_Advanced.idl
new file mode 100644
index 00000000000..44a1cbca91a
--- /dev/null
+++ b/src/cascadia/TerminalSettingsEditor/Profiles_Advanced.idl
@@ -0,0 +1,13 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import "Profiles.idl";
+
+namespace Microsoft.Terminal.Settings.Editor
+{
+    [default_interface] runtimeclass Profiles_Advanced : Windows.UI.Xaml.Controls.Page, Windows.UI.Xaml.Data.INotifyPropertyChanged
+    {
+        Profiles_Advanced();
+        ProfileViewModel Profile { get; };
+    }
+}
diff --git a/src/cascadia/TerminalSettingsEditor/Profiles_Advanced.xaml b/src/cascadia/TerminalSettingsEditor/Profiles_Advanced.xaml
new file mode 100644
index 00000000000..7a6682dfe05
--- /dev/null
+++ b/src/cascadia/TerminalSettingsEditor/Profiles_Advanced.xaml
@@ -0,0 +1,124 @@
+<!--
+    Copyright (c) Microsoft Corporation. All rights reserved. Licensed under
+    the MIT License. See LICENSE in the project root for license information.
+-->
+<Page x:Class="Microsoft.Terminal.Settings.Editor.Profiles_Advanced"
+      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:local="using:Microsoft.Terminal.Settings.Editor"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      xmlns:model="using:Microsoft.Terminal.Settings.Model"
+      xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
+      mc:Ignorable="d">
+
+    <Page.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="CommonResources.xaml" />
+            </ResourceDictionary.MergedDictionaries>
+
+            <DataTemplate x:Key="EnumRadioButtonTemplate"
+                          x:DataType="local:EnumEntry">
+                <RadioButton Content="{x:Bind EnumName, Mode=OneWay}" />
+            </DataTemplate>
+        </ResourceDictionary>
+    </Page.Resources>
+
+    <Grid>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="auto" />
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
+        <TextBlock x:Uid="Profile_BaseLayerDisclaimer"
+                   Grid.Row="0"
+                   Margin="{StaticResource StandardIndentMargin}"
+                   Style="{StaticResource DisclaimerStyle}"
+                   Visibility="{x:Bind Profile.IsBaseLayer}" />
+        <ScrollViewer Grid.Row="1"
+                      ViewChanging="ViewChanging">
+            <StackPanel Style="{StaticResource SettingsStackStyle}">
+                <!--  Suppress Application Title  -->
+                <local:SettingContainer x:Uid="Profile_SuppressApplicationTitle"
+                                        ClearSettingValue="{x:Bind Profile.ClearSuppressApplicationTitle}"
+                                        HasSettingValue="{x:Bind Profile.HasSuppressApplicationTitle, Mode=OneWay}"
+                                        SettingOverrideSource="{x:Bind Profile.SuppressApplicationTitleOverrideSource, Mode=OneWay}">
+                    <ToggleSwitch IsOn="{x:Bind Profile.SuppressApplicationTitle, Mode=TwoWay}"
+                                  Style="{StaticResource ToggleSwitchInExpanderStyle}" />
+                </local:SettingContainer>
+
+                <!--  Antialiasing Mode  -->
+                <local:SettingContainer x:Uid="Profile_AntialiasingMode"
+                                        ClearSettingValue="{x:Bind Profile.ClearAntialiasingMode}"
+                                        HasSettingValue="{x:Bind Profile.HasAntialiasingMode, Mode=OneWay}"
+                                        SettingOverrideSource="{x:Bind Profile.AntialiasingModeOverrideSource, Mode=OneWay}"
+                                        Style="{StaticResource ExpanderSettingContainerStyle}">
+                    <muxc:RadioButtons AutomationProperties.AccessibilityView="Content"
+                                       ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
+                                       ItemsSource="{x:Bind Profile.AntiAliasingModeList, Mode=OneWay}"
+                                       SelectedItem="{x:Bind Profile.CurrentAntiAliasingMode, Mode=TwoWay}" />
+                </local:SettingContainer>
+
+                <!--  AltGr Aliasing  -->
+                <local:SettingContainer x:Uid="Profile_AltGrAliasing"
+                                        ClearSettingValue="{x:Bind Profile.ClearAltGrAliasing}"
+                                        HasSettingValue="{x:Bind Profile.HasAltGrAliasing, Mode=OneWay}"
+                                        SettingOverrideSource="{x:Bind Profile.AltGrAliasingOverrideSource, Mode=OneWay}">
+                    <ToggleSwitch IsOn="{x:Bind Profile.AltGrAliasing, Mode=TwoWay}"
+                                  Style="{StaticResource ToggleSwitchInExpanderStyle}" />
+                </local:SettingContainer>
+
+                <!--  Snap On Input  -->
+                <local:SettingContainer x:Uid="Profile_SnapOnInput"
+                                        ClearSettingValue="{x:Bind Profile.ClearSnapOnInput}"
+                                        HasSettingValue="{x:Bind Profile.HasSnapOnInput, Mode=OneWay}"
+                                        SettingOverrideSource="{x:Bind Profile.SnapOnInputOverrideSource, Mode=OneWay}">
+                    <ToggleSwitch IsOn="{x:Bind Profile.SnapOnInput, Mode=TwoWay}"
+                                  Style="{StaticResource ToggleSwitchInExpanderStyle}" />
+                </local:SettingContainer>
+
+                <!--  History Size  -->
+                <local:SettingContainer x:Uid="Profile_HistorySize"
+                                        ClearSettingValue="{x:Bind Profile.ClearHistorySize}"
+                                        HasSettingValue="{x:Bind Profile.HasHistorySize, Mode=OneWay}"
+                                        SettingOverrideSource="{x:Bind Profile.HistorySizeOverrideSource, Mode=OneWay}">
+                    <muxc:NumberBox x:Uid="Profile_HistorySizeBox"
+                                    LargeChange="100"
+                                    Minimum="0"
+                                    SmallChange="10"
+                                    Style="{StaticResource NumberBoxSettingStyle}"
+                                    Value="{x:Bind Profile.HistorySize, Mode=TwoWay}" />
+                </local:SettingContainer>
+
+                <!--  Close On Exit  -->
+                <local:SettingContainer x:Uid="Profile_CloseOnExit"
+                                        ClearSettingValue="{x:Bind Profile.ClearCloseOnExit}"
+                                        HasSettingValue="{x:Bind Profile.HasCloseOnExit, Mode=OneWay}"
+                                        SettingOverrideSource="{x:Bind Profile.CloseOnExitOverrideSource, Mode=OneWay}"
+                                        Style="{StaticResource ExpanderSettingContainerStyle}">
+                    <muxc:RadioButtons AutomationProperties.AccessibilityView="Content"
+                                       ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
+                                       ItemsSource="{x:Bind Profile.CloseOnExitModeList, Mode=OneWay}"
+                                       SelectedItem="{x:Bind Profile.CurrentCloseOnExitMode, Mode=TwoWay}" />
+                </local:SettingContainer>
+
+                <!--  Bell Style  -->
+                <local:SettingContainer x:Uid="Profile_BellStyle"
+                                        ClearSettingValue="{x:Bind Profile.ClearBellStyle}"
+                                        HasSettingValue="{x:Bind Profile.HasBellStyle, Mode=OneWay}"
+                                        SettingOverrideSource="{x:Bind Profile.BellStyleOverrideSource, Mode=OneWay}"
+                                        Style="{StaticResource ExpanderSettingContainerStyle}">
+                    <StackPanel>
+                        <CheckBox x:Uid="Profile_BellStyleAudible"
+                                  IsChecked="{x:Bind Profile.IsBellStyleFlagSet(1), BindBack=Profile.SetBellStyleAudible, Mode=TwoWay}" />
+                        <CheckBox x:Uid="Profile_BellStyleWindow"
+                                  IsChecked="{x:Bind Profile.IsBellStyleFlagSet(2), BindBack=Profile.SetBellStyleWindow, Mode=TwoWay}" />
+                        <CheckBox x:Uid="Profile_BellStyleTaskbar"
+                                  IsChecked="{x:Bind Profile.IsBellStyleFlagSet(4), BindBack=Profile.SetBellStyleTaskbar, Mode=TwoWay}" />
+                    </StackPanel>
+                </local:SettingContainer>
+
+            </StackPanel>
+        </ScrollViewer>
+    </Grid>
+</Page>
diff --git a/src/cascadia/TerminalSettingsEditor/Profiles_Appearance.cpp b/src/cascadia/TerminalSettingsEditor/Profiles_Appearance.cpp
new file mode 100644
index 00000000000..5593704cd39
--- /dev/null
+++ b/src/cascadia/TerminalSettingsEditor/Profiles_Appearance.cpp
@@ -0,0 +1,78 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+#include "pch.h"
+#include "Profiles_Appearance.h"
+#include "Profiles_Appearance.g.cpp"
+#include "Profiles.h"
+#include "PreviewConnection.h"
+#include "EnumEntry.h"
+
+#include <LibraryResources.h>
+#include "..\WinRTUtils\inc\Utils.h"
+
+using namespace winrt::Windows::UI::Xaml;
+using namespace winrt::Windows::UI::Xaml::Navigation;
+
+namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
+{
+    Profiles_Appearance::Profiles_Appearance() :
+        _previewControl{ Control::TermControl(Model::TerminalSettings{}, make<PreviewConnection>()) }
+    {
+        InitializeComponent();
+
+        _previewControl.IsEnabled(false);
+        _previewControl.AllowFocusWhenDisabled(false);
+        ControlPreview().Child(_previewControl);
+    }
+
+    void Profiles_Appearance::OnNavigatedTo(const NavigationEventArgs& e)
+    {
+        auto state{ e.Parameter().as<Editor::ProfilePageNavigationState>() };
+        _Profile = state.Profile();
+
+        // generate the font list, if we don't have one
+        if (_Profile.CompleteFontList() || !_Profile.MonospaceFontList())
+        {
+            ProfileViewModel::UpdateFontList();
+        }
+
+        // Subscribe to some changes in the view model
+        // These changes should force us to update our own set of "Current<Setting>" members,
+        // and propagate those changes to the UI
+        _ViewModelChangedRevoker = _Profile.PropertyChanged(winrt::auto_revoke, [=](auto&&, const PropertyChangedEventArgs& /*args*/) {
+            _previewControl.Settings(_Profile.TermSettings());
+            _previewControl.UpdateSettings();
+        });
+
+        // The Appearances object handles updating the values in the settings UI, but
+        // we still need to listen to the changes here just to update the preview control
+        _AppearanceViewModelChangedRevoker = _Profile.DefaultAppearance().PropertyChanged(winrt::auto_revoke, [=](auto&&, const PropertyChangedEventArgs& /*args*/) {
+            _previewControl.Settings(_Profile.TermSettings());
+            _previewControl.UpdateSettings();
+        });
+
+        // There is a possibility that the control has not fully initialized yet,
+        // so wait for it to initialize before updating the settings (so we know
+        // that the renderer is set up)
+        _previewControl.Initialized([&](auto&& /*s*/, auto&& /*e*/) {
+            _previewControl.UpdateSettings();
+        });
+    }
+
+    void Profiles_Appearance::OnNavigatedFrom(const NavigationEventArgs& /*e*/)
+    {
+        _ViewModelChangedRevoker.revoke();
+        _AppearanceViewModelChangedRevoker.revoke();
+    }
+
+    void Profiles_Appearance::CreateUnfocusedAppearance_Click(IInspectable const& /*sender*/, RoutedEventArgs const& /*e*/)
+    {
+        _Profile.CreateUnfocusedAppearance();
+    }
+
+    void Profiles_Appearance::DeleteUnfocusedAppearance_Click(IInspectable const& /*sender*/, RoutedEventArgs const& /*e*/)
+    {
+        _Profile.DeleteUnfocusedAppearance();
+    }
+}
diff --git a/src/cascadia/TerminalSettingsEditor/Profiles_Appearance.h b/src/cascadia/TerminalSettingsEditor/Profiles_Appearance.h
new file mode 100644
index 00000000000..f85efca9c23
--- /dev/null
+++ b/src/cascadia/TerminalSettingsEditor/Profiles_Appearance.h
@@ -0,0 +1,35 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+#pragma once
+
+#include "Profiles_Appearance.g.h"
+#include "Utils.h"
+
+namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
+{
+    struct Profiles_Appearance : public HasScrollViewer<Profiles_Appearance>, Profiles_AppearanceT<Profiles_Appearance>
+    {
+    public:
+        Profiles_Appearance();
+
+        void OnNavigatedTo(const Windows::UI::Xaml::Navigation::NavigationEventArgs& e);
+        void OnNavigatedFrom(const Windows::UI::Xaml::Navigation::NavigationEventArgs& e);
+
+        void CreateUnfocusedAppearance_Click(Windows::Foundation::IInspectable const& sender, Windows::UI::Xaml::RoutedEventArgs const& e);
+        void DeleteUnfocusedAppearance_Click(Windows::Foundation::IInspectable const& sender, Windows::UI::Xaml::RoutedEventArgs const& e);
+
+        WINRT_CALLBACK(PropertyChanged, Windows::UI::Xaml::Data::PropertyChangedEventHandler);
+        WINRT_PROPERTY(Editor::ProfileViewModel, Profile, nullptr);
+
+    private:
+        Microsoft::Terminal::Control::TermControl _previewControl;
+        Windows::UI::Xaml::Data::INotifyPropertyChanged::PropertyChanged_revoker _ViewModelChangedRevoker;
+        Windows::UI::Xaml::Data::INotifyPropertyChanged::PropertyChanged_revoker _AppearanceViewModelChangedRevoker;
+    };
+};
+
+namespace winrt::Microsoft::Terminal::Settings::Editor::factory_implementation
+{
+    BASIC_FACTORY(Profiles_Appearance);
+}
diff --git a/src/cascadia/TerminalSettingsEditor/Profiles_Appearance.idl b/src/cascadia/TerminalSettingsEditor/Profiles_Appearance.idl
new file mode 100644
index 00000000000..dff812912a7
--- /dev/null
+++ b/src/cascadia/TerminalSettingsEditor/Profiles_Appearance.idl
@@ -0,0 +1,15 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import "Profiles.idl";
+
+namespace Microsoft.Terminal.Settings.Editor
+{
+    [default_interface] runtimeclass Profiles_Appearance : Windows.UI.Xaml.Controls.Page, Windows.UI.Xaml.Data.INotifyPropertyChanged
+    {
+        Profiles_Appearance();
+        ProfileViewModel Profile { get; };
+
+        Windows.UI.Xaml.Controls.Slider OpacitySlider { get; };
+    }
+}
diff --git a/src/cascadia/TerminalSettingsEditor/Profiles_Appearance.xaml b/src/cascadia/TerminalSettingsEditor/Profiles_Appearance.xaml
new file mode 100644
index 00000000000..070ac4ec98c
--- /dev/null
+++ b/src/cascadia/TerminalSettingsEditor/Profiles_Appearance.xaml
@@ -0,0 +1,228 @@
+<!--
+    Copyright (c) Microsoft Corporation. All rights reserved. Licensed under
+    the MIT License. See LICENSE in the project root for license information.
+-->
+<Page x:Class="Microsoft.Terminal.Settings.Editor.Profiles_Appearance"
+      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:local="using:Microsoft.Terminal.Settings.Editor"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      xmlns:model="using:Microsoft.Terminal.Settings.Model"
+      xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
+      mc:Ignorable="d">
+
+    <Page.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="CommonResources.xaml" />
+            </ResourceDictionary.MergedDictionaries>
+
+            <DataTemplate x:Key="EnumRadioButtonTemplate"
+                          x:DataType="local:EnumEntry">
+                <RadioButton Content="{x:Bind EnumName, Mode=OneWay}" />
+            </DataTemplate>
+
+            <DataTemplate x:Key="FontFaceComboBoxItemTemplate"
+                          x:DataType="local:Font">
+                <TextBlock FontFamily="{x:Bind Name}"
+                           Text="{x:Bind LocalizedName}" />
+            </DataTemplate>
+        </ResourceDictionary>
+    </Page.Resources>
+
+    <Grid>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="auto" />
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
+        <TextBlock x:Uid="Profile_BaseLayerDisclaimer"
+                   Grid.Row="0"
+                   Margin="{StaticResource StandardIndentMargin}"
+                   Style="{StaticResource DisclaimerStyle}"
+                   Visibility="{x:Bind Profile.IsBaseLayer}" />
+        <ScrollViewer Grid.Row="1"
+                      ViewChanging="ViewChanging">
+            <StackPanel Style="{StaticResource SettingsStackStyle}">
+                <!--  Control Preview  -->
+                <Border MaxWidth="{StaticResource StandardControlMaxWidth}">
+                    <Border x:Name="ControlPreview"
+                            Width="350"
+                            Height="160"
+                            Margin="0,0,0,12"
+                            HorizontalAlignment="Left"
+                            BorderBrush="{ThemeResource SystemControlForegroundBaseMediumLowBrush}"
+                            BorderThickness="1" />
+                </Border>
+
+                <local:Appearances Appearance="{x:Bind Profile.DefaultAppearance, Mode=OneWay}"
+                                   SourceProfile="{x:Bind Profile, Mode=OneWay}" />
+
+                <!--  Grouping: Transparency  -->
+                <StackPanel Style="{StaticResource PivotStackStyle}">
+                    <TextBlock x:Uid="Profile_TransparencyHeader"
+                               Style="{StaticResource TextBlockSubHeaderStyle}" />
+
+                    <!--  Opacity  -->
+                    <local:SettingContainer x:Name="OpacityContainer"
+                                            x:Uid="Profile_Opacity"
+                                            ClearSettingValue="{x:Bind Profile.ClearOpacity}"
+                                            HasSettingValue="{x:Bind Profile.HasOpacity, Mode=OneWay}"
+                                            SettingOverrideSource="{x:Bind Profile.OpacityOverrideSource, Mode=OneWay}">
+                        <StackPanel x:Name="OpacityControl">
+                            <Grid Style="{StaticResource CustomSliderControlGridStyle}">
+                                <Grid.ColumnDefinitions>
+                                    <ColumnDefinition Width="*" />
+                                    <ColumnDefinition Width="Auto" />
+                                </Grid.ColumnDefinitions>
+                                <Slider x:Name="OpacitySlider"
+                                        Grid.Column="0"
+                                        Value="{x:Bind local:Converters.PercentageToPercentageValue(Profile.Opacity), BindBack=Profile.SetAcrylicOpacityPercentageValue, Mode=TwoWay}" />
+                                <TextBlock Grid.Column="1"
+                                           Style="{StaticResource SliderValueLabelStyle}"
+                                           Text="{x:Bind local:Converters.AppendPercentageSign(OpacitySlider.Value), Mode=OneWay}" />
+                            </Grid>
+                        </StackPanel>
+                    </local:SettingContainer>
+
+                    <!--  Use Acrylic  -->
+                    <local:SettingContainer x:Uid="Profile_UseAcrylic"
+                                            ClearSettingValue="{x:Bind Profile.ClearUseAcrylic}"
+                                            HasSettingValue="{x:Bind Profile.HasUseAcrylic, Mode=OneWay}"
+                                            SettingOverrideSource="{x:Bind Profile.UseAcrylicOverrideSource, Mode=OneWay}">
+                        <ToggleSwitch x:Name="UseAcrylicToggleSwitch"
+                                      IsOn="{x:Bind Profile.UseAcrylic, Mode=TwoWay}"
+                                      Style="{StaticResource ToggleSwitchInExpanderStyle}" />
+                    </local:SettingContainer>
+
+                </StackPanel>
+
+                <!--  Grouping: Window  -->
+                <StackPanel Style="{StaticResource PivotStackStyle}">
+                    <TextBlock x:Uid="Profile_WindowHeader"
+                               Style="{StaticResource TextBlockSubHeaderStyle}" />
+
+                    <!--  Padding  -->
+                    <local:SettingContainer x:Uid="Profile_Padding"
+                                            ClearSettingValue="{x:Bind Profile.ClearPadding}"
+                                            HasSettingValue="{x:Bind Profile.HasPadding, Mode=OneWay}"
+                                            SettingOverrideSource="{x:Bind Profile.PaddingOverrideSource, Mode=OneWay}">
+                        <Grid Style="{StaticResource CustomSliderControlGridStyle}">
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition Width="*" />
+                                <ColumnDefinition Width="Auto" />
+                            </Grid.ColumnDefinitions>
+                            <Slider x:Name="PaddingSlider"
+                                    Grid.Column="0"
+                                    Value="{x:Bind local:Converters.MaxValueFromPaddingString(Profile.Padding), BindBack=Profile.SetPadding, Mode=TwoWay}" />
+                            <TextBlock Grid.Column="1"
+                                       Style="{StaticResource SliderValueLabelStyle}"
+                                       Text="{Binding ElementName=PaddingSlider, Path=Value, Mode=OneWay}" />
+                        </Grid>
+                    </local:SettingContainer>
+
+                    <!--  Scrollbar Visibility  -->
+                    <local:SettingContainer x:Uid="Profile_ScrollbarVisibility"
+                                            ClearSettingValue="{x:Bind Profile.ClearScrollState}"
+                                            HasSettingValue="{x:Bind Profile.HasScrollState, Mode=OneWay}"
+                                            SettingOverrideSource="{x:Bind Profile.ScrollStateOverrideSource, Mode=OneWay}"
+                                            Style="{StaticResource ExpanderSettingContainerStyle}">
+                        <muxc:RadioButtons AutomationProperties.AccessibilityView="Content"
+                                           ItemTemplate="{StaticResource EnumRadioButtonTemplate}"
+                                           ItemsSource="{x:Bind Profile.ScrollStateList, Mode=OneWay}"
+                                           SelectedItem="{x:Bind Profile.CurrentScrollState, Mode=TwoWay}" />
+                    </local:SettingContainer>
+                </StackPanel>
+                <StackPanel MaxWidth="{StaticResource StandardControlMaxWidth}">
+                    <StackPanel Orientation="Horizontal"
+                                Visibility="{x:Bind Profile.EditableUnfocusedAppearance, Mode=OneWay}">
+                        <TextBlock x:Uid="Profile_UnfocusedAppearanceTextBlock"
+                                   Style="{StaticResource TitleTextBlockStyle}" />
+                        <Button x:Uid="Profile_CreateUnfocusedAppearanceButton"
+                                Margin="10,0,0,0"
+                                Click="CreateUnfocusedAppearance_Click"
+                                Style="{StaticResource BaseButtonStyle}"
+                                Visibility="{x:Bind local:Converters.InvertedBooleanToVisibility(Profile.HasUnfocusedAppearance), Mode=OneWay}">
+                            <Button.Content>
+                                <StackPanel Orientation="Horizontal">
+                                    <FontIcon Margin="0,3,0,0"
+                                              FontSize="{StaticResource StandardIconSize}"
+                                              Glyph="&#xE710;" />
+                                    <TextBlock x:Uid="Profile_AddAppearanceButton"
+                                               Margin="10,0,0,0"
+                                               FontSize="{StaticResource StandardIconSize}" />
+                                </StackPanel>
+                            </Button.Content>
+                        </Button>
+                        <Button x:Uid="Profile_DeleteUnfocusedAppearanceButton"
+                                Margin="10,0,0,0"
+                                Click="DeleteUnfocusedAppearance_Click"
+                                Style="{StaticResource BaseButtonStyle}"
+                                Visibility="{x:Bind Profile.HasUnfocusedAppearance, Mode=OneWay}">
+                            <Button.Content>
+                                <StackPanel Orientation="Horizontal">
+                                    <FontIcon FontSize="{StaticResource StandardIconSize}"
+                                              Glyph="&#xE74D;" />
+                                    <TextBlock x:Uid="Profile_DeleteAppearanceButton"
+                                               Margin="10,0,0,0"
+                                               FontSize="{StaticResource StandardIconSize}" />
+                                </StackPanel>
+                            </Button.Content>
+                            <Button.Resources>
+                                <ResourceDictionary>
+                                    <ResourceDictionary.ThemeDictionaries>
+                                        <ResourceDictionary x:Key="Light">
+                                            <SolidColorBrush x:Key="ButtonBackground"
+                                                             Color="Firebrick" />
+                                            <SolidColorBrush x:Key="ButtonBackgroundPointerOver"
+                                                             Color="#C23232" />
+                                            <SolidColorBrush x:Key="ButtonBackgroundPressed"
+                                                             Color="#A21212" />
+                                            <SolidColorBrush x:Key="ButtonForeground"
+                                                             Color="White" />
+                                            <SolidColorBrush x:Key="ButtonForegroundPointerOver"
+                                                             Color="White" />
+                                            <SolidColorBrush x:Key="ButtonForegroundPressed"
+                                                             Color="White" />
+                                        </ResourceDictionary>
+                                        <ResourceDictionary x:Key="Dark">
+                                            <SolidColorBrush x:Key="ButtonBackground"
+                                                             Color="Firebrick" />
+                                            <SolidColorBrush x:Key="ButtonBackgroundPointerOver"
+                                                             Color="#C23232" />
+                                            <SolidColorBrush x:Key="ButtonBackgroundPressed"
+                                                             Color="#A21212" />
+                                            <SolidColorBrush x:Key="ButtonForeground"
+                                                             Color="White" />
+                                            <SolidColorBrush x:Key="ButtonForegroundPointerOver"
+                                                             Color="White" />
+                                            <SolidColorBrush x:Key="ButtonForegroundPressed"
+                                                             Color="White" />
+                                        </ResourceDictionary>
+                                        <ResourceDictionary x:Key="HighContrast">
+                                            <SolidColorBrush x:Key="ButtonBackground"
+                                                             Color="{ThemeResource SystemColorButtonFaceColor}" />
+                                            <SolidColorBrush x:Key="ButtonBackgroundPointerOver"
+                                                             Color="{ThemeResource SystemColorHighlightColor}" />
+                                            <SolidColorBrush x:Key="ButtonBackgroundPressed"
+                                                             Color="{ThemeResource SystemColorHighlightColor}" />
+                                            <SolidColorBrush x:Key="ButtonForeground"
+                                                             Color="{ThemeResource SystemColorButtonTextColor}" />
+                                            <SolidColorBrush x:Key="ButtonForegroundPointerOver"
+                                                             Color="{ThemeResource SystemColorHighlightTextColor}" />
+                                            <SolidColorBrush x:Key="ButtonForegroundPressed"
+                                                             Color="{ThemeResource SystemColorHighlightTextColor}" />
+                                        </ResourceDictionary>
+                                    </ResourceDictionary.ThemeDictionaries>
+                                </ResourceDictionary>
+                            </Button.Resources>
+                        </Button>
+                    </StackPanel>
+                    <local:Appearances Appearance="{x:Bind Profile.UnfocusedAppearance, Mode=OneWay}"
+                                       SourceProfile="{x:Bind Profile, Mode=OneWay}"
+                                       Visibility="{x:Bind Profile.ShowUnfocusedAppearance, Mode=OneWay}" />
+                </StackPanel>
+            </StackPanel>
+        </ScrollViewer>
+    </Grid>
+</Page>
diff --git a/src/cascadia/TerminalSettingsEditor/Profiles_Base.cpp b/src/cascadia/TerminalSettingsEditor/Profiles_Base.cpp
new file mode 100644
index 00000000000..1c75efabfc9
--- /dev/null
+++ b/src/cascadia/TerminalSettingsEditor/Profiles_Base.cpp
@@ -0,0 +1,128 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+#include "pch.h"
+#include "Profiles_Base.h"
+#include "Profiles_Base.g.cpp"
+#include "Profiles.h"
+
+#include <LibraryResources.h>
+#include "..\WinRTUtils\inc\Utils.h"
+
+using namespace winrt::Windows::UI::Xaml;
+using namespace winrt::Windows::UI::Xaml::Controls;
+using namespace winrt::Windows::UI::Xaml::Navigation;
+
+namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
+{
+    Profiles_Base::Profiles_Base()
+    {
+        InitializeComponent();
+
+        const auto startingDirCheckboxTooltip{ ToolTipService::GetToolTip(StartingDirectoryUseParentCheckbox()) };
+        Automation::AutomationProperties::SetFullDescription(StartingDirectoryUseParentCheckbox(), unbox_value<hstring>(startingDirCheckboxTooltip));
+
+        Automation::AutomationProperties::SetName(DeleteButton(), RS_(L"Profile_DeleteButton/Text"));
+        AppearanceNavigator().Content(box_value(RS_(L"Profile_Appearance/Header")));
+        AdvancedNavigator().Content(box_value(RS_(L"Profile_Advanced/Header")));
+    }
+
+    void Profiles_Base::OnNavigatedTo(const NavigationEventArgs& e)
+    {
+        auto state{ e.Parameter().as<Editor::ProfilePageNavigationState>() };
+        _Profile = state.Profile();
+
+        // Check the use parent directory box if the starting directory is empty
+        if (_Profile.StartingDirectory().empty())
+        {
+            StartingDirectoryUseParentCheckbox().IsChecked(true);
+        }
+    }
+
+    void Profiles_Base::OnNavigatedFrom(const NavigationEventArgs& /*e*/)
+    {
+        _ViewModelChangedRevoker.revoke();
+    }
+
+    void Profiles_Base::Appearance_Click(IInspectable const& /*sender*/, RoutedEventArgs const& /*args*/)
+    {
+        _Profile.CurrentPage(ProfileSubPage::Appearance);
+    }
+
+    void Profiles_Base::Advanced_Click(IInspectable const& /*sender*/, RoutedEventArgs const& /*args*/)
+    {
+        _Profile.CurrentPage(ProfileSubPage::Advanced);
+    }
+
+    void Profiles_Base::DeleteConfirmation_Click(IInspectable const& /*sender*/, RoutedEventArgs const& /*e*/)
+    {
+        winrt::get_self<ProfileViewModel>(_Profile)->DeleteProfile();
+    }
+
+    fire_and_forget Profiles_Base::Commandline_Click(IInspectable const&, RoutedEventArgs const&)
+    {
+        auto lifetime = get_strong();
+
+        static constexpr COMDLG_FILTERSPEC supportedFileTypes[] = {
+            { L"Executable Files (*.exe, *.cmd, *.bat)", L"*.exe;*.cmd;*.bat" },
+            { L"All Files (*.*)", L"*.*" }
+        };
+
+        static constexpr winrt::guid clientGuidExecutables{ 0x2E7E4331, 0x0800, 0x48E6, { 0xB0, 0x17, 0xA1, 0x4C, 0xD8, 0x73, 0xDD, 0x58 } };
+        const auto parentHwnd{ reinterpret_cast<HWND>(winrt::get_self<ProfileViewModel>(_Profile)->WindowRoot().GetHostingWindow()) };
+        auto path = co_await OpenFilePicker(parentHwnd, [](auto&& dialog) {
+            THROW_IF_FAILED(dialog->SetClientGuid(clientGuidExecutables));
+            try
+            {
+                auto folderShellItem{ winrt::capture<IShellItem>(&SHGetKnownFolderItem, FOLDERID_ComputerFolder, KF_FLAG_DEFAULT, nullptr) };
+                dialog->SetDefaultFolder(folderShellItem.get());
+            }
+            CATCH_LOG(); // non-fatal
+            THROW_IF_FAILED(dialog->SetFileTypes(ARRAYSIZE(supportedFileTypes), supportedFileTypes));
+            THROW_IF_FAILED(dialog->SetFileTypeIndex(1)); // the array is 1-indexed
+            THROW_IF_FAILED(dialog->SetDefaultExtension(L"exe;cmd;bat"));
+        });
+
+        if (!path.empty())
+        {
+            _Profile.Commandline(path);
+        }
+    }
+
+    fire_and_forget Profiles_Base::Icon_Click(IInspectable const&, RoutedEventArgs const&)
+    {
+        auto lifetime = get_strong();
+
+        const auto parentHwnd{ reinterpret_cast<HWND>(winrt::get_self<ProfileViewModel>(_Profile)->WindowRoot().GetHostingWindow()) };
+        auto file = co_await OpenImagePicker(parentHwnd);
+        if (!file.empty())
+        {
+            _Profile.Icon(file);
+        }
+    }
+
+    fire_and_forget Profiles_Base::StartingDirectory_Click(IInspectable const&, RoutedEventArgs const&)
+    {
+        auto lifetime = get_strong();
+        const auto parentHwnd{ reinterpret_cast<HWND>(winrt::get_self<ProfileViewModel>(_Profile)->WindowRoot().GetHostingWindow()) };
+        auto folder = co_await OpenFilePicker(parentHwnd, [](auto&& dialog) {
+            static constexpr winrt::guid clientGuidFolderPicker{ 0xAADAA433, 0xB04D, 0x4BAE, { 0xB1, 0xEA, 0x1E, 0x6C, 0xD1, 0xCD, 0xA6, 0x8B } };
+            THROW_IF_FAILED(dialog->SetClientGuid(clientGuidFolderPicker));
+            try
+            {
+                auto folderShellItem{ winrt::capture<IShellItem>(&SHGetKnownFolderItem, FOLDERID_ComputerFolder, KF_FLAG_DEFAULT, nullptr) };
+                dialog->SetDefaultFolder(folderShellItem.get());
+            }
+            CATCH_LOG(); // non-fatal
+
+            DWORD flags{};
+            THROW_IF_FAILED(dialog->GetOptions(&flags));
+            THROW_IF_FAILED(dialog->SetOptions(flags | FOS_PICKFOLDERS)); // folders only
+        });
+
+        if (!folder.empty())
+        {
+            _Profile.StartingDirectory(folder);
+        }
+    }
+}
diff --git a/src/cascadia/TerminalSettingsEditor/Profiles_Base.h b/src/cascadia/TerminalSettingsEditor/Profiles_Base.h
new file mode 100644
index 00000000000..778a2f675cc
--- /dev/null
+++ b/src/cascadia/TerminalSettingsEditor/Profiles_Base.h
@@ -0,0 +1,38 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+#pragma once
+
+#include "Profiles_Base.g.h"
+#include "ViewModelHelpers.h"
+#include "Utils.h"
+
+namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
+{
+    struct Profiles_Base : public HasScrollViewer<Profiles_Base>, Profiles_BaseT<Profiles_Base>
+    {
+    public:
+        Profiles_Base();
+
+        void OnNavigatedTo(const Windows::UI::Xaml::Navigation::NavigationEventArgs& e);
+        void OnNavigatedFrom(const Windows::UI::Xaml::Navigation::NavigationEventArgs& e);
+
+        fire_and_forget StartingDirectory_Click(Windows::Foundation::IInspectable const& sender, Windows::UI::Xaml::RoutedEventArgs const& e);
+        fire_and_forget Icon_Click(Windows::Foundation::IInspectable const& sender, Windows::UI::Xaml::RoutedEventArgs const& e);
+        fire_and_forget Commandline_Click(Windows::Foundation::IInspectable const& sender, Windows::UI::Xaml::RoutedEventArgs const& e);
+        void Appearance_Click(Windows::Foundation::IInspectable const& sender, Windows::UI::Xaml::RoutedEventArgs const& e);
+        void Advanced_Click(Windows::Foundation::IInspectable const& sender, Windows::UI::Xaml::RoutedEventArgs const& e);
+        void DeleteConfirmation_Click(Windows::Foundation::IInspectable const& sender, Windows::UI::Xaml::RoutedEventArgs const& e);
+
+        WINRT_CALLBACK(PropertyChanged, Windows::UI::Xaml::Data::PropertyChangedEventHandler);
+        WINRT_PROPERTY(Editor::ProfileViewModel, Profile, nullptr);
+
+    private:
+        Windows::UI::Xaml::Data::INotifyPropertyChanged::PropertyChanged_revoker _ViewModelChangedRevoker;
+    };
+};
+
+namespace winrt::Microsoft::Terminal::Settings::Editor::factory_implementation
+{
+    BASIC_FACTORY(Profiles_Base);
+}
diff --git a/src/cascadia/TerminalSettingsEditor/Profiles_Base.idl b/src/cascadia/TerminalSettingsEditor/Profiles_Base.idl
new file mode 100644
index 00000000000..a0cd1b88aba
--- /dev/null
+++ b/src/cascadia/TerminalSettingsEditor/Profiles_Base.idl
@@ -0,0 +1,13 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import "Profiles.idl";
+
+namespace Microsoft.Terminal.Settings.Editor
+{
+    [default_interface] runtimeclass Profiles_Base : Windows.UI.Xaml.Controls.Page, Windows.UI.Xaml.Data.INotifyPropertyChanged
+    {
+        Profiles_Base();
+        ProfileViewModel Profile { get; };
+    }
+}
diff --git a/src/cascadia/TerminalSettingsEditor/Profiles_Base.xaml b/src/cascadia/TerminalSettingsEditor/Profiles_Base.xaml
new file mode 100644
index 00000000000..08ae38cca66
--- /dev/null
+++ b/src/cascadia/TerminalSettingsEditor/Profiles_Base.xaml
@@ -0,0 +1,233 @@
+<!--
+    Copyright (c) Microsoft Corporation. All rights reserved. Licensed under
+    the MIT License. See LICENSE in the project root for license information.
+-->
+<Page x:Class="Microsoft.Terminal.Settings.Editor.Profiles_Base"
+      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:local="using:Microsoft.Terminal.Settings.Editor"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      xmlns:model="using:Microsoft.Terminal.Settings.Model"
+      xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
+      mc:Ignorable="d">
+
+    <Page.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="CommonResources.xaml" />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </Page.Resources>
+
+    <!--  Use a Grid instead of a StackPanel. StackPanel suppresses the inner ScrollViewer.  -->
+    <Grid>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="auto" />
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
+        <TextBlock x:Uid="Profile_BaseLayerDisclaimer"
+                   Grid.Row="0"
+                   Margin="{StaticResource StandardIndentMargin}"
+                   Style="{StaticResource DisclaimerStyle}"
+                   Visibility="{x:Bind Profile.IsBaseLayer}" />
+        <ScrollViewer Grid.Row="1"
+                      ViewChanging="ViewChanging">
+            <StackPanel Style="{StaticResource SettingsStackStyle}">
+
+                <!--  Name  -->
+                <!--
+                    NOTE: Has/Clear is not bound because we don't want the reset button & override text to appear.
+                    Additionally, the JSON stubs generated by auto-generated profiles come with a name,
+                    so the name will always be overridden.
+                -->
+                <local:SettingContainer x:Uid="Profile_Name"
+                                        CurrentValue="{x:Bind Profile.Name, Mode=OneWay}"
+                                        Style="{StaticResource ExpanderSettingContainerStyle}"
+                                        Visibility="{x:Bind local:Converters.InvertedBooleanToVisibility(Profile.IsBaseLayer), Mode=OneWay}">
+                    <TextBox Style="{StaticResource TextBoxSettingStyle}"
+                             Text="{x:Bind Profile.Name, Mode=TwoWay}" />
+                </local:SettingContainer>
+
+                <!--  Commandline  -->
+                <local:SettingContainer x:Name="CommandlineContainer"
+                                        x:Uid="Profile_Commandline"
+                                        ClearSettingValue="{x:Bind Profile.ClearCommandline}"
+                                        CurrentValue="{x:Bind Profile.Commandline, Mode=OneWay}"
+                                        HasSettingValue="{x:Bind Profile.HasCommandline, Mode=OneWay}"
+                                        SettingOverrideSource="{x:Bind Profile.CommandlineOverrideSource, Mode=OneWay}"
+                                        Style="{StaticResource ExpanderSettingContainerStyle}"
+                                        Visibility="{x:Bind local:Converters.InvertedBooleanToVisibility(Profile.IsBaseLayer), Mode=OneWay}">
+                    <StackPanel>
+                        <TextBox x:Uid="Profile_CommandlineBox"
+                                 IsSpellCheckEnabled="False"
+                                 Style="{StaticResource TextBoxSettingStyle}"
+                                 Text="{x:Bind Profile.Commandline, Mode=TwoWay}" />
+                        <Button x:Uid="Profile_CommandlineBrowse"
+                                Margin="0,10,0,0"
+                                Click="Commandline_Click"
+                                Style="{StaticResource BrowseButtonStyle}" />
+                    </StackPanel>
+                </local:SettingContainer>
+
+                <!--  Starting Directory  -->
+                <local:SettingContainer x:Name="StartingDirectoryContainer"
+                                        x:Uid="Profile_StartingDirectory"
+                                        ClearSettingValue="{x:Bind Profile.ClearStartingDirectory}"
+                                        CurrentValue="{x:Bind Profile.StartingDirectory, Mode=OneWay}"
+                                        HasSettingValue="{x:Bind Profile.HasStartingDirectory, Mode=OneWay}"
+                                        SettingOverrideSource="{x:Bind Profile.StartingDirectoryOverrideSource, Mode=OneWay}"
+                                        Style="{StaticResource ExpanderSettingContainerStyle}">
+                    <StackPanel Orientation="Vertical">
+                        <TextBox x:Uid="Profile_StartingDirectoryBox"
+                                 IsEnabled="{x:Bind Profile.UseCustomStartingDirectory, Mode=OneWay}"
+                                 IsSpellCheckEnabled="False"
+                                 Style="{StaticResource TextBoxSettingStyle}"
+                                 Text="{x:Bind Profile.StartingDirectory, Mode=TwoWay}" />
+                        <StackPanel Orientation="Horizontal">
+                            <Button x:Name="StartingDirectoryBrowse"
+                                    x:Uid="Profile_StartingDirectoryBrowse"
+                                    Margin="0,10,10,0"
+                                    Click="StartingDirectory_Click"
+                                    IsEnabled="{x:Bind Profile.UseCustomStartingDirectory, Mode=OneWay}"
+                                    Style="{StaticResource BrowseButtonStyle}" />
+                            <CheckBox x:Name="StartingDirectoryUseParentCheckbox"
+                                      x:Uid="Profile_StartingDirectoryUseParentCheckbox"
+                                      Margin="0,5,0,0"
+                                      IsChecked="{x:Bind Profile.UseParentProcessDirectory, Mode=TwoWay}" />
+                        </StackPanel>
+                    </StackPanel>
+                </local:SettingContainer>
+
+                <!--  Icon  -->
+                <local:SettingContainer x:Uid="Profile_Icon"
+                                        ClearSettingValue="{x:Bind Profile.ClearIcon}"
+                                        CurrentValue="{x:Bind Profile.Icon, Mode=OneWay}"
+                                        HasSettingValue="{x:Bind Profile.HasIcon, Mode=OneWay}"
+                                        SettingOverrideSource="{x:Bind Profile.IconOverrideSource, Mode=OneWay}"
+                                        Style="{StaticResource ExpanderSettingContainerStyle}">
+                    <StackPanel>
+                        <TextBox x:Uid="Profile_IconBox"
+                                 FontFamily="Segoe UI, Segoe Fluent Icons, Segoe MDL2 Assets"
+                                 IsSpellCheckEnabled="False"
+                                 Style="{StaticResource TextBoxSettingStyle}"
+                                 Text="{x:Bind Profile.Icon, Mode=TwoWay}" />
+                        <Button x:Uid="Profile_IconBrowse"
+                                Margin="0,10,0,0"
+                                Click="Icon_Click"
+                                Style="{StaticResource BrowseButtonStyle}" />
+                    </StackPanel>
+                </local:SettingContainer>
+
+                <!--  Tab Title  -->
+                <local:SettingContainer x:Uid="Profile_TabTitle"
+                                        ClearSettingValue="{x:Bind Profile.ClearTabTitle}"
+                                        CurrentValue="{x:Bind Profile.TabTitle, Mode=OneWay}"
+                                        HasSettingValue="{x:Bind Profile.HasTabTitle, Mode=OneWay}"
+                                        SettingOverrideSource="{x:Bind Profile.TabTitleOverrideSource, Mode=OneWay}"
+                                        Style="{StaticResource ExpanderSettingContainerStyle}">
+                    <TextBox Style="{StaticResource TextBoxSettingStyle}"
+                             Text="{x:Bind Profile.TabTitle, Mode=TwoWay}" />
+                </local:SettingContainer>
+
+                <!--  Hidden  -->
+                <local:SettingContainer x:Uid="Profile_Hidden"
+                                        Visibility="{x:Bind local:Converters.InvertedBooleanToVisibility(Profile.IsBaseLayer), Mode=OneWay}">
+                    <ToggleSwitch IsOn="{x:Bind Profile.Hidden, Mode=TwoWay}"
+                                  Style="{StaticResource ToggleSwitchInExpanderStyle}" />
+                </local:SettingContainer>
+
+                <TextBlock x:Uid="Profile_AdditionalSettingsHeader"
+                           Margin="0,48,0,0"
+                           Style="{StaticResource TextBlockSubHeaderStyle}" />
+
+                <Button x:Name="AppearanceNavigator"
+                        Click="Appearance_Click"
+                        Style="{StaticResource NavigatorButtonStyle}">
+                    Appearance
+                </Button>
+                <Button x:Name="AdvancedNavigator"
+                        Click="Advanced_Click"
+                        Style="{StaticResource NavigatorButtonStyle}">
+                    <TextBlock HorizontalAlignment="Left"
+                               VerticalAlignment="Center"
+                               Text="Advanced" />
+                </Button>
+                <!--  Delete Button  -->
+                <Border MaxWidth="{StaticResource StandardControlMaxWidth}">
+                    <Button x:Name="DeleteButton"
+                            Margin="{StaticResource StandardControlMargin}"
+                            Style="{StaticResource DeleteButtonStyle}"
+                            Visibility="{x:Bind Profile.CanDeleteProfile}">
+                        <Button.Resources>
+                            <ResourceDictionary>
+                                <ResourceDictionary.ThemeDictionaries>
+                                    <ResourceDictionary x:Key="Light">
+                                        <SolidColorBrush x:Key="ButtonBackground"
+                                                         Color="Firebrick" />
+                                        <SolidColorBrush x:Key="ButtonBackgroundPointerOver"
+                                                         Color="#C23232" />
+                                        <SolidColorBrush x:Key="ButtonBackgroundPressed"
+                                                         Color="#A21212" />
+                                        <SolidColorBrush x:Key="ButtonForeground"
+                                                         Color="White" />
+                                        <SolidColorBrush x:Key="ButtonForegroundPointerOver"
+                                                         Color="White" />
+                                        <SolidColorBrush x:Key="ButtonForegroundPressed"
+                                                         Color="White" />
+                                    </ResourceDictionary>
+                                    <ResourceDictionary x:Key="Dark">
+                                        <SolidColorBrush x:Key="ButtonBackground"
+                                                         Color="Firebrick" />
+                                        <SolidColorBrush x:Key="ButtonBackgroundPointerOver"
+                                                         Color="#C23232" />
+                                        <SolidColorBrush x:Key="ButtonBackgroundPressed"
+                                                         Color="#A21212" />
+                                        <SolidColorBrush x:Key="ButtonForeground"
+                                                         Color="White" />
+                                        <SolidColorBrush x:Key="ButtonForegroundPointerOver"
+                                                         Color="White" />
+                                        <SolidColorBrush x:Key="ButtonForegroundPressed"
+                                                         Color="White" />
+                                    </ResourceDictionary>
+                                    <ResourceDictionary x:Key="HighContrast">
+                                        <SolidColorBrush x:Key="ButtonBackground"
+                                                         Color="{ThemeResource SystemColorButtonFaceColor}" />
+                                        <SolidColorBrush x:Key="ButtonBackgroundPointerOver"
+                                                         Color="{ThemeResource SystemColorHighlightColor}" />
+                                        <SolidColorBrush x:Key="ButtonBackgroundPressed"
+                                                         Color="{ThemeResource SystemColorHighlightColor}" />
+                                        <SolidColorBrush x:Key="ButtonForeground"
+                                                         Color="{ThemeResource SystemColorButtonTextColor}" />
+                                        <SolidColorBrush x:Key="ButtonForegroundPointerOver"
+                                                         Color="{ThemeResource SystemColorHighlightTextColor}" />
+                                        <SolidColorBrush x:Key="ButtonForegroundPressed"
+                                                         Color="{ThemeResource SystemColorHighlightTextColor}" />
+                                    </ResourceDictionary>
+                                </ResourceDictionary.ThemeDictionaries>
+                            </ResourceDictionary>
+                        </Button.Resources>
+                        <Button.Content>
+                            <StackPanel Orientation="Horizontal">
+                                <FontIcon FontSize="{StaticResource StandardIconSize}"
+                                          Glyph="&#xE74D;" />
+                                <TextBlock x:Uid="Profile_DeleteButton"
+                                           Margin="10,0,0,0" />
+                            </StackPanel>
+                        </Button.Content>
+                        <Button.Flyout>
+                            <Flyout>
+                                <StackPanel>
+                                    <TextBlock x:Uid="Profile_DeleteConfirmationMessage"
+                                               Style="{StaticResource CustomFlyoutTextStyle}" />
+                                    <Button x:Uid="Profile_DeleteConfirmationButton"
+                                            Click="DeleteConfirmation_Click" />
+                                </StackPanel>
+                            </Flyout>
+                        </Button.Flyout>
+                    </Button>
+                </Border>
+            </StackPanel>
+        </ScrollViewer>
+    </Grid>
+</Page>
diff --git a/src/cascadia/TerminalSettingsEditor/Rendering.xaml b/src/cascadia/TerminalSettingsEditor/Rendering.xaml
index 3746a444c5e..72f39027bca 100644
--- a/src/cascadia/TerminalSettingsEditor/Rendering.xaml
+++ b/src/cascadia/TerminalSettingsEditor/Rendering.xaml
@@ -25,12 +25,14 @@
 
             <!--  Force Full Repaint  -->
             <local:SettingContainer x:Uid="Globals_ForceFullRepaint">
-                <ToggleSwitch IsOn="{x:Bind State.Globals.ForceFullRepaintRendering, Mode=TwoWay}" />
+                <ToggleSwitch IsOn="{x:Bind State.Globals.ForceFullRepaintRendering, Mode=TwoWay}"
+                              Style="{StaticResource ToggleSwitchInExpanderStyle}" />
             </local:SettingContainer>
 
             <!--  Software Rendering  -->
             <local:SettingContainer x:Uid="Globals_SoftwareRendering">
-                <ToggleSwitch IsOn="{x:Bind State.Globals.SoftwareRendering, Mode=TwoWay}" />
+                <ToggleSwitch IsOn="{x:Bind State.Globals.SoftwareRendering, Mode=TwoWay}"
+                              Style="{StaticResource ToggleSwitchInExpanderStyle}" />
             </local:SettingContainer>
         </StackPanel>
     </ScrollViewer>
diff --git a/src/cascadia/TerminalSettingsEditor/Resources/en-US/Resources.resw b/src/cascadia/TerminalSettingsEditor/Resources/en-US/Resources.resw
index 51efaaef488..beb0f9da21f 100644
--- a/src/cascadia/TerminalSettingsEditor/Resources/en-US/Resources.resw
+++ b/src/cascadia/TerminalSettingsEditor/Resources/en-US/Resources.resw
@@ -275,22 +275,14 @@
     <value>When disabled, the terminal will render only the updates to the screen between frames.</value>
     <comment>A description for what the "force full repaint" setting does. Presented near "Globals_ForceFullRepaint.Header".</comment>
   </data>
-  <data name="Globals_InitialCols.Header" xml:space="preserve">
+  <data name="Globals_InitialCols.Text" xml:space="preserve">
     <value>Columns</value>
     <comment>Header for a control to choose the number of columns in the terminal's text grid.</comment>
   </data>
-  <data name="Globals_InitialCols.HelpText" xml:space="preserve">
-    <value>The number of columns displayed in the window upon first load. Measured in characters.</value>
-    <comment>A description for what the "columns" setting does. Presented near "Globals_InitialCols.Header".</comment>
-  </data>
-  <data name="Globals_InitialRows.Header" xml:space="preserve">
+  <data name="Globals_InitialRows.Text" xml:space="preserve">
     <value>Rows</value>
     <comment>Header for a control to choose the number of rows in the terminal's text grid.</comment>
   </data>
-  <data name="Globals_InitialRows.HelpText" xml:space="preserve">
-    <value>The number of rows displayed in the window upon first load. Measured in characters.</value>
-    <comment>A description for what the "rows" setting does. Presented near "Globals_InitialRows.Header".</comment>
-  </data>
   <data name="Globals_InitialColsBox.[using:Windows.UI.Xaml.Automation]AutomationProperties.Name" xml:space="preserve">
     <value>Initial Columns</value>
     <comment>Name for a control to choose the number of columns in the terminal's text grid.</comment>
@@ -924,9 +916,17 @@
     <comment>A description for what the "tab title" setting does. Presented near "Profile_TabTitle".</comment>
   </data>
   <data name="Profile_UnfocusedAppearanceTextBlock.Text" xml:space="preserve">
-    <value>Unfocused Appearance</value>
+    <value>Unfocused appearance</value>
     <comment>The header for the section where the unfocused appearance settings can be changed.</comment>
   </data>
+  <data name="Profile_AddAppearanceButton.Text" xml:space="preserve">
+    <value>Add</value>
+    <comment>Button label that adds an unfocused appearance for this profile.</comment>
+  </data>
+  <data name="Profile_DeleteAppearanceButton.Text" xml:space="preserve">
+    <value>Delete</value>
+    <comment>Button label that deletes the unfocused appearance for this profile.</comment>
+  </data>
   <data name="Profile_UseAcrylic.Header" xml:space="preserve">
     <value>Enable acrylic</value>
     <comment>Header for a control to toggle the acrylic-like rendering of the background. The acrylic material creates a translucent texture.</comment>
@@ -1047,10 +1047,14 @@
     <value>Thin</value>
     <comment>This is the formal name for a font weight.</comment>
   </data>
-  <data name="Globals_LaunchSize.Text" xml:space="preserve">
+  <data name="Globals_LaunchSize.Header" xml:space="preserve">
     <value>Launch size</value>
     <comment>Header for a group of settings that control the size of the app. Presented near "Globals_InitialCols" and "Globals_InitialRows".</comment>
   </data>
+  <data name="Globals_LaunchSize.HelpText" xml:space="preserve">
+    <value>The number of rows and columns displayed in the window upon first load. Measured in characters.</value>
+    <comment>A description for what the "rows" and "columns" settings do. Presented near "Globals_LaunchSize.Header".</comment>
+  </data>
   <data name="Profile_BellStyleAll.Content" xml:space="preserve">
     <value>All</value>
     <comment>An option to choose from for the "bell style" setting. When selected, a combination of the other bell styles is used to notify the user.</comment>
@@ -1114,6 +1118,10 @@
     <value>Cursor</value>
     <comment>Header for a group of settings that control the appearance of the cursor. Presented near "Profile_CursorHeight" and other keys starting with "Profile_Cursor".</comment>
   </data>
+  <data name="Profile_AdditionalSettingsHeader.Text" xml:space="preserve">
+    <value>Additional settings</value>
+    <comment>Header for the buttons that navigate to additional settings for the profile.</comment>
+  </data>
   <data name="Profile_TextHeader.Text" xml:space="preserve">
     <value>Text</value>
     <comment>Header for a group of settings that control the appearance of text in the app.</comment>
@@ -1150,6 +1158,10 @@
     <value>Cancel rename</value>
     <comment>Text label for a button that can be used to cancel a rename operation during the renaming process.</comment>
   </data>
+  <data name="ColorSchemesDisclaimer.Text" xml:space="preserve">
+    <value>Schemes defined here can be applied to your profiles under the "Appearances" section of the profile settings pages.</value>
+    <comment>A disclaimer presented at the top of a page. "Appearances" should match Profile_Appearance.Header.</comment>
+  </data>
   <data name="Profile_BaseLayerDisclaimer.Text" xml:space="preserve">
     <value>Settings defined here will apply to all profiles unless they are overridden by a profile's settings.</value>
     <comment>A disclaimer presented at the top of a page. See "Nav_ProfileDefaults.Content" for a description on what the defaults layer does in the app.</comment>
diff --git a/src/cascadia/TerminalSettingsEditor/SettingContainer.cpp b/src/cascadia/TerminalSettingsEditor/SettingContainer.cpp
index 7d53785c608..581e8346aa9 100644
--- a/src/cascadia/TerminalSettingsEditor/SettingContainer.cpp
+++ b/src/cascadia/TerminalSettingsEditor/SettingContainer.cpp
@@ -12,6 +12,7 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
 {
     DependencyProperty SettingContainer::_HeaderProperty{ nullptr };
     DependencyProperty SettingContainer::_HelpTextProperty{ nullptr };
+    DependencyProperty SettingContainer::_CurrentValueProperty{ nullptr };
     DependencyProperty SettingContainer::_HasSettingValueProperty{ nullptr };
     DependencyProperty SettingContainer::_SettingOverrideSourceProperty{ nullptr };
 
@@ -43,6 +44,15 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
                     xaml_typename<Editor::SettingContainer>(),
                     PropertyMetadata{ box_value(L"") });
         }
+        if (!_CurrentValueProperty)
+        {
+            _CurrentValueProperty =
+                DependencyProperty::Register(
+                    L"CurrentValue",
+                    xaml_typename<hstring>(),
+                    xaml_typename<Editor::SettingContainer>(),
+                    PropertyMetadata{ box_value(L"") });
+        }
         if (!_HasSettingValueProperty)
         {
             _HasSettingValueProperty =
@@ -135,6 +145,17 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
                 }
             }
         }
+
+        if (HelpText().empty())
+        {
+            if (const auto& child{ GetTemplateChild(L"HelpTextBlock") })
+            {
+                if (const auto& textBlock{ child.try_as<Controls::TextBlock>() })
+                {
+                    textBlock.Visibility(Visibility::Collapsed);
+                }
+            }
+        }
     }
 
     // Method Description:
diff --git a/src/cascadia/TerminalSettingsEditor/SettingContainer.h b/src/cascadia/TerminalSettingsEditor/SettingContainer.h
index de9570e7f11..7accd8735b9 100644
--- a/src/cascadia/TerminalSettingsEditor/SettingContainer.h
+++ b/src/cascadia/TerminalSettingsEditor/SettingContainer.h
@@ -31,6 +31,7 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
 
         DEPENDENCY_PROPERTY(Windows::Foundation::IInspectable, Header);
         DEPENDENCY_PROPERTY(hstring, HelpText);
+        DEPENDENCY_PROPERTY(hstring, CurrentValue);
         DEPENDENCY_PROPERTY(bool, HasSettingValue);
         DEPENDENCY_PROPERTY(IInspectable, SettingOverrideSource);
         TYPED_EVENT(ClearSettingValue, Editor::SettingContainer, Windows::Foundation::IInspectable);
diff --git a/src/cascadia/TerminalSettingsEditor/SettingContainer.idl b/src/cascadia/TerminalSettingsEditor/SettingContainer.idl
index 3c75cd2dc33..39638ca4fe8 100644
--- a/src/cascadia/TerminalSettingsEditor/SettingContainer.idl
+++ b/src/cascadia/TerminalSettingsEditor/SettingContainer.idl
@@ -13,6 +13,9 @@ namespace Microsoft.Terminal.Settings.Editor
         String HelpText;
         static Windows.UI.Xaml.DependencyProperty HelpTextProperty { get; };
 
+        String CurrentValue;
+        static Windows.UI.Xaml.DependencyProperty CurrentValueProperty { get; };
+
         Boolean HasSettingValue;
         static Windows.UI.Xaml.DependencyProperty HasSettingValueProperty { get; };
 
diff --git a/src/cascadia/TerminalSettingsEditor/SettingContainerStyle.xaml b/src/cascadia/TerminalSettingsEditor/SettingContainerStyle.xaml
index 717e6e80855..5efb9a2ebb6 100644
--- a/src/cascadia/TerminalSettingsEditor/SettingContainerStyle.xaml
+++ b/src/cascadia/TerminalSettingsEditor/SettingContainerStyle.xaml
@@ -7,12 +7,51 @@
                     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                     xmlns:local="using:Microsoft.Terminal.Settings.Editor"
                     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+                    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
                     mc:Ignorable="d">
 
-    <Style x:Key="SettingContainerHeaderStyle"
+    <ResourceDictionary.ThemeDictionaries>
+        <ResourceDictionary x:Key="Light">
+            <Style x:Key="SecondaryTextBlockStyle"
+                   TargetType="TextBlock">
+                <Setter Property="Foreground" Value="{ThemeResource SystemBaseMediumColor}" />
+            </Style>
+            <SolidColorBrush x:Key="SubgroupHeaderBrush"
+                             Color="{StaticResource SystemBaseMediumColor}" />
+            <Color x:Key="CardStrokeColorDefault">#0F000000</Color>
+            <SolidColorBrush x:Key="CardStrokeColorDefaultBrush"
+                             Color="{StaticResource CardStrokeColorDefault}" />
+            <StaticResource x:Key="ExpanderHeaderBorderBrush"
+                            ResourceKey="CardStrokeColorDefaultBrush" />
+        </ResourceDictionary>
+        <ResourceDictionary x:Key="HighContrast">
+            <Style x:Key="SecondaryTextBlockStyle"
+                   TargetType="TextBlock" />
+            <!--  Do not mess with the foreground color for High Contrast. Let it ride as is.  -->
+            <SolidColorBrush x:Key="SubgroupHeaderBrush"
+                             Color="{ThemeResource SystemColorWindowTextColor}" />
+            <StaticResource x:Key="ExpanderHeaderBorderBrush"
+                            ResourceKey="SystemColorButtonTextColorBrush" />
+        </ResourceDictionary>
+        <ResourceDictionary x:Key="Dark">
+            <Style x:Key="SecondaryTextBlockStyle"
+                   TargetType="TextBlock">
+                <Setter Property="Foreground" Value="{ThemeResource SystemBaseMediumColor}" />
+            </Style>
+            <SolidColorBrush x:Key="SubgroupHeaderBrush"
+                             Color="{StaticResource SystemBaseMediumColor}" />
+            <Color x:Key="CardStrokeColorDefault">#19000000</Color>
+            <SolidColorBrush x:Key="CardStrokeColorDefaultBrush"
+                             Color="{StaticResource CardStrokeColorDefault}" />
+            <StaticResource x:Key="ExpanderHeaderBorderBrush"
+                            ResourceKey="CardStrokeColorDefaultBrush" />
+        </ResourceDictionary>
+    </ResourceDictionary.ThemeDictionaries>
+
+    <Style x:Key="StackPanelInExpanderStyle"
            TargetType="StackPanel">
-        <Setter Property="Orientation" Value="Horizontal" />
-        <Setter Property="Margin" Value="0,0,0,4" />
+        <Setter Property="VerticalAlignment" Value="Center" />
+        <Setter Property="Padding" Value="0,12,0,12" />
     </Style>
 
     <Style x:Key="SettingContainerResetButtonStyle"
@@ -21,37 +60,123 @@
         <Setter Property="Height" Value="19" />
         <Setter Property="Width" Value="19" />
         <Setter Property="Padding" Value="0" />
+        <Setter Property="BorderBrush" Value="Transparent" />
         <Setter Property="Background" Value="Transparent" />
     </Style>
 
     <Style x:Key="SettingContainerFontIconStyle"
            TargetType="FontIcon">
         <Setter Property="Foreground" Value="{StaticResource SystemAccentColor}" />
-        <Setter Property="FontSize" Value="14" />
-        <Setter Property="FontFamily" Value="Segoe MDL2 Assets" />
+        <Setter Property="FontSize" Value="11" />
+        <Setter Property="FontFamily" Value="{ThemeResource SymbolThemeFontFamily}" />
+    </Style>
+
+    <Style x:Key="NonExpanderGrid"
+           TargetType="Grid">
+        <Setter Property="Background" Value="{ThemeResource ExpanderHeaderBackground}" />
+        <Setter Property="MinWidth" Value="{ThemeResource FlyoutThemeMinWidth}" />
+        <Setter Property="MinHeight" Value="64" />
+        <Setter Property="BorderThickness" Value="{ThemeResource ExpanderHeaderBorderThickness}" />
+        <Setter Property="BorderBrush" Value="{ThemeResource ExpanderHeaderBorderBrush}" />
+        <Setter Property="Padding" Value="16,0,8,0" />
+        <Setter Property="HorizontalAlignment" Value="Stretch" />
+        <Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
+    </Style>
+
+    <Style x:Key="SettingsPageItemHeaderStyle"
+           BasedOn="{StaticResource BodyTextBlockStyle}"
+           TargetType="TextBlock">
+        <Setter Property="LineHeight" Value="20" />
+        <Setter Property="TextWrapping" Value="WrapWholeWords" />
+    </Style>
+
+    <Style x:Key="SettingsPageItemDescriptionStyle"
+           BasedOn="{StaticResource CaptionTextBlockStyle}"
+           TargetType="TextBlock">
+        <Setter Property="Margin" Value="0,0,24,0" />
+        <Setter Property="LineHeight" Value="16" />
+        <Setter Property="Foreground" Value="{ThemeResource SubgroupHeaderBrush}" />
+        <Setter Property="TextWrapping" Value="WrapWholeWords" />
     </Style>
 
     <Style TargetType="local:SettingContainer">
-        <Setter Property="Margin" Value="0,24,0,0" />
+        <Setter Property="Margin" Value="0,4,0,0" />
         <Setter Property="IsTabStop" Value="False" />
+        <Setter Property="MaxWidth" Value="1000" />
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="local:SettingContainer">
-                    <StackPanel>
-
-                        <!--  Header space  -->
-                        <StackPanel Style="{StaticResource SettingContainerHeaderStyle}">
-                            <TextBlock Text="{TemplateBinding Header}" />
-                            <Button x:Name="ResetButton"
-                                    Style="{StaticResource SettingContainerResetButtonStyle}">
-                                <FontIcon Glyph="&#xE845;"
-                                          Style="{StaticResource SettingContainerFontIconStyle}" />
-                            </Button>
+                    <Grid Style="{StaticResource NonExpanderGrid}">
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="*" />
+                            <ColumnDefinition Width="Auto" />
+                        </Grid.ColumnDefinitions>
+                        <StackPanel Style="{StaticResource StackPanelInExpanderStyle}">
+                            <StackPanel Orientation="Horizontal">
+                                <TextBlock Style="{StaticResource SettingsPageItemHeaderStyle}"
+                                           Text="{TemplateBinding Header}" />
+                                <Button x:Name="ResetButton"
+                                        Style="{StaticResource SettingContainerResetButtonStyle}">
+                                    <FontIcon Glyph="&#xE845;"
+                                              Style="{StaticResource SettingContainerFontIconStyle}" />
+                                </Button>
+                            </StackPanel>
+                            <TextBlock x:Name="HelpTextBlock"
+                                       Style="{StaticResource SettingsPageItemDescriptionStyle}"
+                                       Text="{TemplateBinding HelpText}" />
                         </StackPanel>
+                        <ContentPresenter Grid.Column="1"
+                                          HorizontalAlignment="Right"
+                                          VerticalAlignment="Center"
+                                          Content="{TemplateBinding Content}" />
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
 
-                        <!--  This is where the actual setting control will go  -->
-                        <ContentPresenter Content="{TemplateBinding Content}" />
-                    </StackPanel>
+    <Style x:Key="ExpanderSettingContainerStyle"
+           TargetType="local:SettingContainer">
+        <Setter Property="MaxWidth" Value="1000" />
+        <Setter Property="IsTabStop" Value="False" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="local:SettingContainer">
+                    <muxc:Expander Margin="0,4,0,0"
+                                   HorizontalAlignment="Stretch"
+                                   HorizontalContentAlignment="Stretch"
+                                   Content="{TemplateBinding Content}">
+                        <muxc:Expander.Header>
+                            <Grid MinHeight="64">
+                                <Grid.ColumnDefinitions>
+                                    <ColumnDefinition Width="*" />
+                                    <ColumnDefinition Width="Auto" />
+                                </Grid.ColumnDefinitions>
+                                <StackPanel Style="{StaticResource StackPanelInExpanderStyle}">
+                                    <StackPanel Orientation="Horizontal">
+                                        <TextBlock Style="{StaticResource SettingsPageItemHeaderStyle}"
+                                                   Text="{TemplateBinding Header}" />
+                                        <Button x:Name="ResetButton"
+                                                Style="{StaticResource SettingContainerResetButtonStyle}">
+                                            <FontIcon Glyph="&#xE845;"
+                                                      Style="{StaticResource SettingContainerFontIconStyle}" />
+                                        </Button>
+                                    </StackPanel>
+                                    <TextBlock x:Name="HelpTextBlock"
+                                               Style="{StaticResource SettingsPageItemDescriptionStyle}"
+                                               Text="{TemplateBinding HelpText}" />
+                                </StackPanel>
+                                <TextBlock Grid.Column="1"
+                                           MaxWidth="250"
+                                           Margin="0,0,-16,0"
+                                           HorizontalAlignment="Right"
+                                           VerticalAlignment="Center"
+                                           FontFamily="Segoe UI, Segoe Fluent Icons, Segoe MDL2 Assets"
+                                           Style="{StaticResource SettingsPageItemDescriptionStyle}"
+                                           Text="{TemplateBinding CurrentValue}" />
+                            </Grid>
+                        </muxc:Expander.Header>
+                    </muxc:Expander>
                 </ControlTemplate>
             </Setter.Value>
         </Setter>
diff --git a/src/cascadia/TerminalSettingsEditor/Utils.h b/src/cascadia/TerminalSettingsEditor/Utils.h
index ec73f41c71f..c14fbcc695d 100644
--- a/src/cascadia/TerminalSettingsEditor/Utils.h
+++ b/src/cascadia/TerminalSettingsEditor/Utils.h
@@ -51,29 +51,29 @@
 // of EnumEntries so that we may display all possible values of the given
 // enum type and its localized names. It also provides a getter and setter
 // for the setting we wish to bind to.
-#define GETSET_BINDABLE_ENUM_SETTING(name, enumType, settingsModelName, settingNameInModel)                                                              \
-public:                                                                                                                                                  \
-    winrt::Windows::Foundation::Collections::IObservableVector<winrt::Microsoft::Terminal::Settings::Editor::EnumEntry> name##List()                     \
-    {                                                                                                                                                    \
-        return _##name##List;                                                                                                                            \
-    }                                                                                                                                                    \
-                                                                                                                                                         \
-    winrt::Windows::Foundation::IInspectable Current##name()                                                                                             \
-    {                                                                                                                                                    \
-        return winrt::box_value<winrt::Microsoft::Terminal::Settings::Editor::EnumEntry>(_##name##Map.Lookup(settingsModelName().settingNameInModel())); \
-    }                                                                                                                                                    \
-                                                                                                                                                         \
-    void Current##name(const winrt::Windows::Foundation::IInspectable& enumEntry)                                                                        \
-    {                                                                                                                                                    \
-        if (auto ee = enumEntry.try_as<winrt::Microsoft::Terminal::Settings::Editor::EnumEntry>())                                                       \
-        {                                                                                                                                                \
-            auto setting = winrt::unbox_value<enumType>(ee.EnumValue());                                                                                 \
-            settingsModelName().settingNameInModel(setting);                                                                                             \
-        }                                                                                                                                                \
-    }                                                                                                                                                    \
-                                                                                                                                                         \
-private:                                                                                                                                                 \
-    winrt::Windows::Foundation::Collections::IObservableVector<winrt::Microsoft::Terminal::Settings::Editor::EnumEntry> _##name##List;                   \
+#define GETSET_BINDABLE_ENUM_SETTING(name, enumType, viewModelSettingGetSet)                                                             \
+public:                                                                                                                                  \
+    winrt::Windows::Foundation::Collections::IObservableVector<winrt::Microsoft::Terminal::Settings::Editor::EnumEntry> name##List()     \
+    {                                                                                                                                    \
+        return _##name##List;                                                                                                            \
+    }                                                                                                                                    \
+                                                                                                                                         \
+    winrt::Windows::Foundation::IInspectable Current##name()                                                                             \
+    {                                                                                                                                    \
+        return winrt::box_value<winrt::Microsoft::Terminal::Settings::Editor::EnumEntry>(_##name##Map.Lookup(viewModelSettingGetSet())); \
+    }                                                                                                                                    \
+                                                                                                                                         \
+    void Current##name(const winrt::Windows::Foundation::IInspectable& enumEntry)                                                        \
+    {                                                                                                                                    \
+        if (auto ee = enumEntry.try_as<winrt::Microsoft::Terminal::Settings::Editor::EnumEntry>())                                       \
+        {                                                                                                                                \
+            auto setting = winrt::unbox_value<enumType>(ee.EnumValue());                                                                 \
+            viewModelSettingGetSet(setting);                                                                                             \
+        }                                                                                                                                \
+    }                                                                                                                                    \
+                                                                                                                                         \
+private:                                                                                                                                 \
+    winrt::Windows::Foundation::Collections::IObservableVector<winrt::Microsoft::Terminal::Settings::Editor::EnumEntry> _##name##List;   \
     winrt::Windows::Foundation::Collections::IMap<enumType, winrt::Microsoft::Terminal::Settings::Editor::EnumEntry> _##name##Map;
 
 // This macro defines a dependency property for a WinRT class.
diff --git a/src/cascadia/TerminalSettingsModel/IconPathConverter.cpp b/src/cascadia/TerminalSettingsModel/IconPathConverter.cpp
index d649fb8850d..3ebf99644cc 100644
--- a/src/cascadia/TerminalSettingsModel/IconPathConverter.cpp
+++ b/src/cascadia/TerminalSettingsModel/IconPathConverter.cpp
@@ -124,7 +124,7 @@ namespace winrt::Microsoft::Terminal::Settings::Model::implementation
                     const bool isMDL2Icon = ch >= L'\uE700' && ch <= L'\uF8FF';
                     if (isMDL2Icon)
                     {
-                        icon.FontFamily(winrt::Windows::UI::Xaml::Media::FontFamily{ L"Segoe MDL2 Assets" });
+                        icon.FontFamily(winrt::Windows::UI::Xaml::Media::FontFamily{ L"Segoe Fluent Icons, Segoe MDL2 Assets" });
                     }
                     else
                     {
diff --git a/src/cascadia/WindowsTerminal/WindowsTerminal.manifest b/src/cascadia/WindowsTerminal/WindowsTerminal.manifest
index 47612326b28..8e1afe241f0 100644
--- a/src/cascadia/WindowsTerminal/WindowsTerminal.manifest
+++ b/src/cascadia/WindowsTerminal/WindowsTerminal.manifest
@@ -14,6 +14,11 @@
         <!-- This will cause unpackaged activation failures in XAML Islands. -->
         <!-- (We use unpackaged activation in test scenarios.) See GH#10265. -->
         <maxversiontested Id="10.0.18362.0"/>
+
+        <!-- You apparently are expected to include all the maxversiontested
+        entries separately. They are treated like an array. This one turns on Segoe
+        UI Variable, GH #12452 -->
+        <maxversiontested Id="10.0.22000.0"/>
         <supportedOS Id="{8e0f7a12-bfb3-4fe8-b9a5-48fd50a15a9a}" />
     </application>
   </compatibility>


Test patch: