diff --git a/src/CalcViewModel/Common/NavCategory.cpp b/src/CalcViewModel/Common/NavCategory.cpp
index d5769aef..d604801c 100644
--- a/src/CalcViewModel/Common/NavCategory.cpp
+++ b/src/CalcViewModel/Common/NavCategory.cpp
@@ -42,6 +42,7 @@ static constexpr int PRESSURE_ID = 14;
 static constexpr int ANGLE_ID = 15;
 static constexpr int CURRENCY_ID = 16;
 static constexpr int GRAPHING_ID = 17;
+static constexpr int SETTINGS_ID = 18;
 // ^^^ THESE CONSTANTS SHOULD NEVER CHANGE ^^^
 
 wchar_t* towchar_t(int number)
@@ -298,6 +299,16 @@ static const list<NavCategoryInitializer> s_categoryManifest = [] {
                                   MyVirtualKey::None,
                                   nullptr,
                                   SUPPORTS_NEGATIVE,
+                                  true },
+          NavCategoryInitializer{ ViewMode::Settings,
+                                  SETTINGS_ID,
+                                  L"Settings",
+                                  L"CategoryName_Settings",
+                                  L"\uE713",
+                                  CategoryGroupType::None,
+                                  MyVirtualKey::None,
+                                  nullptr,
+                                  false,
                                   true } });
     return res;
 }();
@@ -371,6 +382,11 @@ bool NavCategory::IsConverterViewMode(ViewMode mode)
     return IsModeInCategoryGroup(mode, CategoryGroupType::Converter);
 }
 
+bool NavCategory::IsSettingsViewMode(ViewMode mode)
+{
+    return mode == ViewMode::Settings;
+}
+
 bool NavCategory::IsModeInCategoryGroup(ViewMode mode, CategoryGroupType type)
 {
     auto iter = find_if(begin(s_categoryManifest), end(s_categoryManifest), [mode, type](const NavCategoryInitializer& initializer) {
diff --git a/src/CalcViewModel/Common/NavCategory.h b/src/CalcViewModel/Common/NavCategory.h
index a2edc995..5617c2ce 100644
--- a/src/CalcViewModel/Common/NavCategory.h
+++ b/src/CalcViewModel/Common/NavCategory.h
@@ -45,7 +45,8 @@ namespace CalculatorApp
             Pressure = 14,
             Angle = 15,
             Currency = 16,
-            Graphing = 17
+            Graphing = 17,
+            Settings = 18
         };
 
     public
@@ -138,6 +139,7 @@ namespace CalculatorApp
             static bool IsGraphingCalculatorViewMode(ViewMode mode);
             static bool IsDateCalculatorViewMode(ViewMode mode);
             static bool IsConverterViewMode(ViewMode mode);
+            static bool IsSettingsViewMode(ViewMode mode);
 
             static Platform::String ^ GetFriendlyName(ViewMode mode);
             static Platform::String ^ GetNameResourceKey(ViewMode mode);
diff --git a/src/Calculator/AboutFlyout.xaml b/src/Calculator/AboutFlyout.xaml
deleted file mode 100644
index 50f6f4e1..00000000
--- a/src/Calculator/AboutFlyout.xaml
+++ /dev/null
@@ -1,76 +0,0 @@
-<UserControl x:Class="CalculatorApp.AboutFlyout"
-             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:CalculatorApp.Common"
-             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-             mc:Ignorable="d">
-    <UserControl.Transitions>
-        <TransitionCollection>
-            <EdgeUIThemeTransition Edge="Left"/>
-        </TransitionCollection>
-    </UserControl.Transitions>
-    <Grid>
-        <Grid.RowDefinitions>
-            <RowDefinition Height="Auto"/>
-            <RowDefinition Height="Auto"/>
-        </Grid.RowDefinitions>
-        <Grid.ColumnDefinitions>
-            <ColumnDefinition Width="Auto"/>
-            <ColumnDefinition Width="*"/>
-        </Grid.ColumnDefinitions>
-
-        <TextBlock x:Name="Header"
-                   Grid.Column="1"
-                   Margin="12,10,12,0"
-                   Style="{ThemeResource SubtitleTextBlockStyle}"/>
-        <StackPanel Grid.Row="1"
-                    Grid.ColumnSpan="2"
-                    Margin="0,12,0,0"
-                    Orientation="Vertical">
-            <RichTextBlock x:Name="AboutContentBody"
-                           MaxWidth="292"
-                           Margin="12,0,12,18"
-                           HorizontalAlignment="Left"
-                           Foreground="{ThemeResource SystemControlPageTextBaseHighBrush}"
-                           FontSize="{ThemeResource BodyFontSize}">
-                <Paragraph>
-                    <Run x:Name="AboutFlyoutVersion"/>
-                    <LineBreak/>
-                    <Run x:Name="AboutControlCopyrightRun"/>
-                </Paragraph>
-            </RichTextBlock>
-            <HyperlinkButton x:Name="AboutFlyoutEULA"
-                             Margin="12,0,12,6"
-                             NavigateUri="https://go.microsoft.com/fwlink/?LinkID=529064"
-                             ToolTipService.ToolTip="https://go.microsoft.com/fwlink/?LinkID=529064">
-                <TextBlock x:Uid="AboutFlyoutEULA"
-                           FontSize="{ThemeResource BodyFontSize}"
-                           TextWrapping="Wrap"/>
-            </HyperlinkButton>
-            <HyperlinkButton Margin="12,0,12,6"
-                             NavigateUri="https://go.microsoft.com/fwlink/?LinkID=822631"
-                             ToolTipService.ToolTip="https://go.microsoft.com/fwlink/?LinkID=822631">
-                <TextBlock x:Uid="AboutControlServicesAgreement"
-                           FontSize="{ThemeResource BodyFontSize}"
-                           TextWrapping="Wrap"/>
-            </HyperlinkButton>
-            <HyperlinkButton Margin="12,0,12,6"
-                             NavigateUri="https://go.microsoft.com/fwlink/?LinkID=521839"
-                             ToolTipService.ToolTip="https://go.microsoft.com/fwlink/?LinkID=521839">
-                <TextBlock x:Uid="AboutControlPrivacyStatement"
-                           FontSize="{ThemeResource BodyFontSize}"
-                           TextWrapping="Wrap"/>
-            </HyperlinkButton>
-            <Button x:Name="FeedbackButton"
-                    x:Uid="FeedbackButton"
-                    MinWidth="120"
-                    Margin="12,12,0,0"
-                    HorizontalAlignment="Left"
-                    VerticalAlignment="Top"
-                    Style="{StaticResource ButtonRevealStyle}"
-                    Click="FeedbackButton_Click"/>
-
-        </StackPanel>
-    </Grid>
-</UserControl>
diff --git a/src/Calculator/AboutFlyout.xaml.h b/src/Calculator/AboutFlyout.xaml.h
deleted file mode 100644
index ab0e481e..00000000
--- a/src/Calculator/AboutFlyout.xaml.h
+++ /dev/null
@@ -1,22 +0,0 @@
-// Copyright (c) Microsoft Corporation. All rights reserved.
-// Licensed under the MIT License.
-
-#pragma once
-
-#include "AboutFlyout.g.h"
-
-namespace CalculatorApp
-{
-public
-    ref class AboutFlyout sealed
-    {
-    public:
-        AboutFlyout();
-
-        void SetDefaultFocus();
-
-    private:
-        void FeedbackButton_Click(_In_ Platform::Object ^ sender, _In_ Windows::UI::Xaml::RoutedEventArgs ^ e);
-        void SetVersionString();
-    };
-} /* namespace CalculatorApp */
diff --git a/src/Calculator/Calculator.vcxproj b/src/Calculator/Calculator.vcxproj
index 4ac84f07..3893b156 100644
--- a/src/Calculator/Calculator.vcxproj
+++ b/src/Calculator/Calculator.vcxproj
@@ -232,9 +232,6 @@
     <ResourceCompile Include="Calculator.rc" PreprocessorDefinitions="%(PreprocessorDefinitions);APP_VERSION_MAJOR=$(AppVersion.Split(`.`)[0]);APP_VERSION_MINOR=$(AppVersion.Split(`.`)[1]);APP_VERSION_BUILD=$(AppVersion.Split(`.`)[2]);APP_VERSION_REVISION=$(AppVersion.Split(`.`)[3])" />
   </ItemGroup>
   <ItemGroup>
-    <ClInclude Include="AboutFlyout.xaml.h">
-      <DependentUpon>AboutFlyout.xaml</DependentUpon>
-    </ClInclude>
     <ClInclude Include="Common\AppLifecycleLogger.h" />
     <ClInclude Include="Common\KeyboardShortcutManager.h" />
     <ClInclude Include="Common\ValidatingConverters.h" />
@@ -259,6 +256,9 @@
     <ClInclude Include="Controls\OperatorPanelListView.h" />
     <ClInclude Include="Controls\OperatorPanelButton.h" />
     <ClInclude Include="Controls\EquationTextBox.h" />
+    <ClInclude Include="SettingsPage.xaml.h">
+      <DependentUpon>SettingsPage.xaml</DependentUpon>
+    </ClInclude>
     <ClInclude Include="Utils\DispatcherTimerDelayer.h" />
     <ClInclude Include="pch.h" />
     <ClInclude Include="App.xaml.h">
@@ -346,10 +346,12 @@
     <ApplicationDefinition Include="App.xaml">
       <SubType>Designer</SubType>
     </ApplicationDefinition>
-    <Page Include="AboutFlyout.xaml" />
     <Page Include="EquationStylePanelControl.xaml">
       <SubType>Designer</SubType>
     </Page>
+    <Page Include="SettingsPage.xaml">
+      <SubType>Designer</SubType>
+    </Page>
     <Page Include="Views\Calculator.xaml">
       <SubType>Designer</SubType>
     </Page>
@@ -393,9 +395,6 @@
     <None Include="WindowsDev_TemporaryKey.pfx" />
   </ItemGroup>
   <ItemGroup>
-    <ClCompile Include="AboutFlyout.xaml.cpp">
-      <DependentUpon>AboutFlyout.xaml</DependentUpon>
-    </ClCompile>
     <ClCompile Include="App.xaml.cpp">
       <DependentUpon>App.xaml</DependentUpon>
     </ClCompile>
@@ -421,6 +420,9 @@
     <ClCompile Include="Controls\OperatorPanelListView.cpp" />
     <ClCompile Include="Controls\OperatorPanelButton.cpp" />
     <ClCompile Include="Controls\EquationTextBox.cpp" />
+    <ClCompile Include="SettingsPage.xaml.cpp">
+      <DependentUpon>SettingsPage.xaml</DependentUpon>
+    </ClCompile>
     <ClCompile Include="Utils\DispatcherTimerDelayer.cpp" />
     <ClCompile Include="pch.cpp">
       <PrecompiledHeader Condition="'$(Configuration)|$(Platform)'=='Debug|Win32'">Create</PrecompiledHeader>
diff --git a/src/Calculator/Calculator.vcxproj.filters b/src/Calculator/Calculator.vcxproj.filters
index 40a9a5cf..aed9ecf3 100644
--- a/src/Calculator/Calculator.vcxproj.filters
+++ b/src/Calculator/Calculator.vcxproj.filters
@@ -485,7 +485,6 @@
     <Page Include="Views\UnitConverter.xaml">
       <Filter>Views</Filter>
     </Page>
-    <Page Include="AboutFlyout.xaml" />
     <Page Include="Views\CalculatorProgrammerBitFlipPanel.xaml">
       <Filter>Views</Filter>
     </Page>
@@ -524,6 +523,7 @@
     <Page Include="Views\CalculatorProgrammerDisplayPanel.xaml">
       <Filter>Views\StateTriggers</Filter>
     </Page>
+    <Page Include="SettingsPage.xaml" />
   </ItemGroup>
   <ItemGroup>
     <PRIResource Include="Resources\en-US\CEngineStrings.resw">
diff --git a/src/Calculator/Resources/en-US/Resources.resw b/src/Calculator/Resources/en-US/Resources.resw
index 296f790c..850db11b 100644
--- a/src/Calculator/Resources/en-US/Resources.resw
+++ b/src/Calculator/Resources/en-US/Resources.resw
@@ -2717,33 +2717,9 @@
     <value>%1 %2</value>
     <comment>This string is what is read by Narrator, and other screen readers, for the supplementary value at the bottom of the converter view, %1 = the value of the supplementary unit (i.e. 0.5), %2 = the unit itself (i.e. inches, meters, etc)</comment>
   </data>
-  <data name="AboutControlBackButton.[using:Windows.UI.Xaml.Automation]AutomationProperties.Name" xml:space="preserve">
-    <value>Back</value>
-    <comment>Screen reader prompt for the About panel back button</comment>
-  </data>
-  <data name="AboutControlBackButton.[using:Windows.UI.Xaml.Controls]ToolTipService.ToolTip" xml:space="preserve">
-    <value>Back</value>
-    <comment>Content of tooltip being displayed on AboutControlBackButton</comment>
-  </data>
-  <data name="AboutFlyoutEULA.Text" xml:space="preserve">
-    <value>Microsoft Software License Terms</value>
-    <comment>Displayed on a link to the Microsoft Software License Terms on the About panel</comment>
-  </data>
   <data name="PreviewTag.Text" xml:space="preserve">
     <value>Preview</value>
     <comment>Label displayed next to upcoming features</comment>
-  </data>  
-  <data name="AboutControlPrivacyStatement.Text" xml:space="preserve">
-    <value>Microsoft Privacy Statement</value>
-    <comment>Displayed on a link to the Microsoft Privacy Statement on the About panel</comment>
-  </data>
-  <data name="AboutControlCopyright" xml:space="preserve">
-    <value>© %1 Microsoft. All rights reserved.</value>
-    <comment>{Locked="%1"}. Copyright statement, displayed on the About panel. %1 = the current year (4 digits)</comment>
-  </data>
-  <data name="AboutButton.Content" xml:space="preserve">
-    <value>About</value>
-    <comment>The text that shows in the dropdown navigation control to open About panel</comment>
   </data>
   <data name="FeedbackButton.Content" xml:space="preserve">
     <value>Send feedback</value>
@@ -3163,10 +3139,6 @@
     <value>Could not update rates</value>
     <comment>This string is what is read by Narrator, and other screen readers, when the currency rates in Currency converter have failed to update.</comment>
   </data>
-  <data name="AboutButton.AccessKey" xml:space="preserve">
-    <value>AB</value>
-    <comment>AccessKey for the About button. {StringCategory="Accelerator"}</comment>
-  </data>
   <data name="HistoryButton.AccessKey" xml:space="preserve">
     <value>I</value>
     <comment>Access key for the History button. {StringCategory="Accelerator"}</comment>
@@ -3495,10 +3467,6 @@
     <value>%1 category</value>
     <comment>{Locked='%1'} Format string for the accessible name of a Calculator menu category header, used by screen readers. "%1" is the pluralized category name, e.g. Calculators, Converters. An example when formatted is "Calculators category".</comment>
   </data>
-  <data name="AboutControlServicesAgreement.Text" xml:space="preserve">
-    <value>Microsoft Services Agreement</value>
-    <comment>Displayed on a link to the Microsoft Services Agreement in the about this app information</comment>
-  </data>
   <data name="UnitAbbreviation_Pyeong" xml:space="preserve">
     <value>Pyeong</value>
     <comment>An abbreviation for a measurement unit of area.</comment>
@@ -4743,4 +4711,63 @@
     <value>Rotate Through Carry Circular Shift selected</value>
     <comment>Label for a radio button that toggles rotate circular with carry behavior for the shift operations.</comment>
   </data>
-</root>
+  <data name="SettingsButton.Content" xml:space="preserve">
+    <value>Settings</value>
+    <comment>The text that shows in the dropdown navigation control to open the Settings page.</comment>
+  </data>
+  <data name="SettingsButton.AccessKey" xml:space="preserve">
+    <value>AB</value>
+    <comment>AccessKey for the Settings button. {StringCategory="Accelerator"}</comment>
+  </data>
+  <data name="CategoryName_SettingsText" xml:space="preserve">
+    <value>Settings</value>
+    <comment>Settings category.</comment>
+  </data>
+  <data name="SettingsAppTheme.Text" xml:space="preserve">
+    <value>App theme</value>
+    <comment>Heading text for the "App theme" section in settings.</comment>
+  </data>
+  <data name="SettingsDarkTheme.Content" xml:space="preserve">
+    <value>Dark</value>
+    <comment>Content for "Dark theme"radio button in settings.</comment>
+  </data>
+  <data name="SettingsLightTheme.Content" xml:space="preserve">
+    <value>Light</value>
+    <comment>Content for "Light theme"radio button in settings.</comment>
+  </data>
+  <data name="SettingsSystemTheme.Content" xml:space="preserve">
+    <value>Use system setting</value>
+    <comment>Content for "System theme"radio button in settings.</comment>
+  </data>
+  <data name="ColorSettingsButton.Text" xml:space="preserve">
+    <value>Windows color Settings</value>
+  </data>
+  <data name="SettingsAboutLabel.Text" xml:space="preserve">
+    <value>About this app</value>
+    <comment>Heading text for the "about" section in settings</comment>
+  </data>
+  <data name="SettingsCopyright" xml:space="preserve">
+    <value>© %1 Microsoft. All rights reserved.</value>
+    <comment>{Locked="%1"}. Copyright statement, displayed on the Settings page. %1 = the current year (4 digits)</comment>
+  </data>
+  <data name="SettingsEULA.Text" xml:space="preserve">
+    <value>Microsoft Software License Terms</value>
+    <comment>Displayed on a link to the Microsoft Software License Terms on the Settings page</comment>
+  </data>
+  <data name="SettingsServicesAgreement.Text" xml:space="preserve">
+    <value>Microsoft Services Agreement</value>
+    <comment>Displayed on a link to the Microsoft Services Agreement on the Settings page.</comment>
+  </data>
+  <data name="SettingsFeedbackButton.Content" xml:space="preserve">
+    <value>Send feedback</value>
+    <comment>The text that shows in the button in settings to give the user the option to send feedback about the app and it launches Windows Feedback app</comment>
+  </data>
+  <data name="SettingsFeedbackButton.[using:Windows.UI.Xaml.Controls]ToolTipService.ToolTip" xml:space="preserve">
+    <value>Send feedback with the feedback hub</value>
+    <comment>Tooltip for the "Send feedback" button</comment>
+  </data>
+  <data name="SettingsPrivacyStatment.Text" xml:space="preserve">
+    <value>Microsoft Privacy Statment</value>
+    <comment>Displayed on a link to the Microsoft Privacy Statement on the Settings page.</comment>
+  </data>
+</root>
\ No newline at end of file
diff --git a/src/Calculator/SettingsPage.xaml b/src/Calculator/SettingsPage.xaml
new file mode 100644
index 00000000..07b3145d
--- /dev/null
+++ b/src/Calculator/SettingsPage.xaml
@@ -0,0 +1,107 @@
+<UserControl x:Class="CalculatorApp.SettingsPage"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:converters="using:CalculatorApp.Converters"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:local="using:CalculatorApp"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             d:DesignHeight="455"
+             d:DesignWidth="445"
+             mc:Ignorable="d">
+
+    <Grid x:Name="PageGrid"
+          Margin="12,0,12,0"
+          AutomationProperties.LandmarkType="Main">
+        <Grid.RowDefinitions>
+            <RowDefinition Height="1*"
+                           MinHeight="{StaticResource HamburgerHeight}"
+                           MaxHeight="52"/>
+            <RowDefinition Height="4*"/>
+            <RowDefinition Height="1*" MaxHeight="32"/>
+            <RowDefinition Height="4*"/>
+        </Grid.RowDefinitions>
+
+        <StackPanel x:Name="SettingsStack"
+                    Grid.Row="1"
+                    AutomationProperties.LabeledBy="{Binding ElementName=SettingsAppTheme}"
+                    Orientation="Vertical">
+
+            <TextBlock x:Name="SettingsAppTheme"
+                       x:Uid="SettingsAppTheme"
+                       Style="{StaticResource SubtitleTextBlockStyle}"
+                       AutomationProperties.HeadingLevel="Level1"
+                       TextTrimming="Clip"/>
+
+            <RadioButton x:Name="SettingsLightTheme"
+                         x:Uid="SettingsLightTheme"
+                         Grid.Row="2"/>
+
+            <RadioButton x:Name="SettingsDarkTheme"
+                         x:Uid="SettingsDarkTheme"
+                         Grid.Row="3"/>
+
+            <RadioButton x:Name="SettingsSystemTheme"
+                         x:Uid="SettingsSystemTheme"
+                         Grid.Row="4"/>
+
+            <HyperlinkButton x:Name="ColorSettingsButton"
+                             Margin="0,-2"
+                             HorizontalAlignment="Left"
+                             Click="ColorSettingsButtonClicked">
+                <TextBlock x:Uid="ColorSettingsButton" TextWrapping="Wrap"/>
+            </HyperlinkButton>
+
+        </StackPanel>
+
+        <StackPanel x:Name="AboutStack"
+                    Grid.Row="3"
+                    AutomationProperties.LabeledBy="{Binding ElementName=SettingsAboutLabel}"
+                    Orientation="Vertical">
+
+            <TextBlock x:Name="SettingsAboutLabel"
+                       x:Uid="SettingsAboutLabel"
+                       Style="{StaticResource SubtitleTextBlockStyle}"
+                       AutomationProperties.HeadingLevel="Level2"
+                       TextTrimming="Clip"/>
+
+            <TextBlock Margin="0,0,0,4"
+                       Style="{StaticResource BodyTextBlockStyle}"
+                       IsTextSelectionEnabled="True">
+                <Run x:Name="SettingsVersion"/>
+                <LineBreak/>
+                <Run x:Name="SettingsCopyright"/>
+            </TextBlock>
+
+            <HyperlinkButton Margin="0,-2"
+                             HorizontalAlignment="Left"
+                             NavigateUri="https://go.microsoft.com/fwlink/?LinkID=529064"
+                             ToolTipService.ToolTip="https://go.microsoft.com/fwlink/?LinkID=529064">
+                <TextBlock x:Uid="SettingsEULA" TextWrapping="Wrap"/>
+            </HyperlinkButton>
+
+            <HyperlinkButton Margin="0,-2"
+                             HorizontalAlignment="Left"
+                             NavigateUri="https://go.microsoft.com/fwlink/?LinkID=822631"
+                             ToolTipService.ToolTip="https://go.microsoft.com/fwlink/?LinkID=822631">
+                <TextBlock x:Uid="SettingsServicesAgreement" TextWrapping="Wrap"/>
+            </HyperlinkButton>
+
+            <HyperlinkButton Margin="0,-2"
+                             HorizontalAlignment="Left"
+                             NavigateUri="https://go.microsoft.com/fwlink/?LinkID=521839"
+                             ToolTipService.ToolTip="https://go.microsoft.com/fwlink/?LinkID=521839">
+                <TextBlock x:Uid="SettingsPrivacyStatment" TextWrapping="Wrap"/>
+            </HyperlinkButton>
+
+            <Button x:Name="SettingsFeedbackButton"
+                    x:Uid="SettingsFeedbackButton"
+                    Margin="0,24"
+                    HorizontalAlignment="Left"
+                    VerticalAlignment="Top"
+                    Style="{StaticResource ButtonRevealStyle}"
+                    Click="SettingsFeedbackButtonClick"/>
+
+        </StackPanel>
+
+    </Grid>
+</UserControl>
diff --git a/src/Calculator/AboutFlyout.xaml.cpp b/src/Calculator/SettingsPage.xaml.cpp
similarity index 59%
rename from src/Calculator/AboutFlyout.xaml.cpp
rename to src/Calculator/SettingsPage.xaml.cpp
index 5f295c59..fb4e554a 100644
--- a/src/Calculator/AboutFlyout.xaml.cpp
+++ b/src/Calculator/SettingsPage.xaml.cpp
@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 #include "pch.h"
-#include "AboutFlyout.xaml.h"
+#include "SettingsPage.xaml.h"
 #include "CalcViewModel/Common/AppResourceProvider.h"
 #include "CalcViewModel/Common/LocalizationService.h"
 #include "CalcViewModel/Common/LocalizationStringUtil.h"
@@ -24,40 +24,46 @@ using namespace Windows::UI::Xaml::Data;
 #define BUILD_YEAR 2020
 #endif
 
-AboutFlyout::AboutFlyout()
+
+SettingsPage::SettingsPage()
 {
     auto locService = LocalizationService::GetInstance();
     auto resourceLoader = AppResourceProvider::GetInstance();
 
-    InitializeComponent();
+	InitializeComponent();
 
     Language = locService->GetLanguage();
 
     this->SetVersionString();
-
-    Header->Text = resourceLoader->GetResourceString("AboutButton/Content");
-
-    auto copyrightText =
-        LocalizationStringUtil::GetLocalizedString(resourceLoader->GetResourceString("AboutControlCopyright"), StringReference(to_wstring(BUILD_YEAR).c_str()));
-    AboutControlCopyrightRun->Text = copyrightText;
+    this->SetCopyrightString();
 }
 
-void AboutFlyout::FeedbackButton_Click(_In_ Object ^ sender, _In_ RoutedEventArgs ^ e)
-{
-    PackageVersion version = Package::Current->Id->Version;
-    String ^ versionNumber = ref new String(L"Version ");
-    versionNumber = versionNumber + version.Major + "." + version.Minor + "." + version.Build + "." + version.Revision;
-    Launcher::LaunchUriAsync(ref new Uri("windows-feedback:?contextid=130&metadata=%7B%22Metadata%22:[%7B%22AppBuild%22:%22" + versionNumber + "%22%7D]%7D"));
-}
-
-void AboutFlyout::SetVersionString()
+void SettingsPage::SetVersionString()
 {
     PackageVersion version = Package::Current->Id->Version;
     String ^ appName = AppResourceProvider::GetInstance()->GetResourceString(L"AppName");
-    AboutFlyoutVersion->Text = appName + L" " + version.Major + L"." + version.Minor + L"." + version.Build + L"." + version.Revision;
+
+    SettingsVersion->Text = appName + L" " + version.Major + L"." + version.Minor + L"." + version.Build + L"." + version.Revision;
 }
 
-void AboutFlyout::SetDefaultFocus()
+void SettingsPage::SetCopyrightString()
 {
-    AboutFlyoutEULA->Focus(::FocusState::Programmatic);
+    auto resourceLoader = AppResourceProvider::GetInstance();
+    auto copyrightText = LocalizationStringUtil::GetLocalizedString(resourceLoader->GetResourceString("SettingsCopyright"), StringReference(to_wstring(BUILD_YEAR).c_str()));
+
+    SettingsCopyright->Text = copyrightText;
+}
+
+void SettingsPage::ColorSettingsButtonClicked(_In_ Object ^ sender, _In_ RoutedEventArgs ^ e)
+{
+    Launcher::LaunchUriAsync(ref new Uri("ms-settings:colors"));
+}
+
+void SettingsPage::SettingsFeedbackButtonClick(_In_ Object ^ sender, _In_ RoutedEventArgs ^ e)
+{
+    PackageVersion version = Package::Current->Id->Version;
+    String ^ versionNumber = ref new String(L"Version ");
+    versionNumber = versionNumber + version.Major + version.Minor + version.Build + version.Revision;
+
+    Launcher::LaunchUriAsync(ref new Uri("windows-feedback:?contextid=130&metadata=%7B%22Metadata%22:[%7B%22AppBuild%22:%22" + versionNumber + "%22%7D]%7D"));
 }
diff --git a/src/Calculator/SettingsPage.xaml.h b/src/Calculator/SettingsPage.xaml.h
new file mode 100644
index 00000000..14e9a73b
--- /dev/null
+++ b/src/Calculator/SettingsPage.xaml.h
@@ -0,0 +1,22 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+#pragma once
+
+#include "SettingsPage.g.h"
+
+namespace CalculatorApp
+{
+	[Windows::Foundation::Metadata::WebHostHidden]
+	public ref class SettingsPage sealed
+	{
+	public:
+		SettingsPage();
+
+    private:
+        void ColorSettingsButtonClicked(_In_ Platform::Object ^ sender, _In_ Windows::UI::Xaml::RoutedEventArgs ^ e);
+        void SettingsFeedbackButtonClick(_In_ Platform::Object ^ sender, _In_ Windows::UI::Xaml::RoutedEventArgs ^ e);
+        void SetVersionString();
+        void SetCopyrightString();
+    };
+}
diff --git a/src/Calculator/Views/MainPage.xaml b/src/Calculator/Views/MainPage.xaml
index 07eef666..69d94b10 100644
--- a/src/Calculator/Views/MainPage.xaml
+++ b/src/Calculator/Views/MainPage.xaml
@@ -109,6 +109,9 @@
             <Border x:Name="ConverterHolder">
                 <!-- PLACEHOLDER!!!! This is where the converter goes when it is delay loaded -->
             </Border>
+            <Border x:Name="SettingsHolder">
+                <!-- PLACEHOLDER!!!! This is where the settings goes when it is delay loaded -->
+            </Border>
         </Grid>
 
         <Grid Grid.Row="1"
@@ -176,28 +179,19 @@
                     <muxc:NavigationViewList x:Name="NavFooter"
                                              Width="{StaticResource SplitViewOpenPaneLength}"
                                              IsItemClickEnabled="True"
-                                             ItemClick="OnAboutButtonClick"
+                                             ItemClick="OnSettingsButtonClick"
                                              x:Load="False">
                         <muxc:NavigationViewList.ItemContainerTransitions>
                             <!-- Remove EntranceThemeTransition which is a default transition for NavigationViewList -->
                             <TransitionCollection/>
                         </muxc:NavigationViewList.ItemContainerTransitions>
                         <muxc:NavigationViewList.Items>
-                            <muxc:NavigationViewItem x:Name="AboutButton"
-                                                     x:Uid="AboutButton"
+                            <muxc:NavigationViewItem x:Name="SettingsButton"
+                                                     x:Uid="SettingsButton"
                                                      Style="{StaticResource NavViewItemStyle}">
                                 <muxc:NavigationViewItem.Icon>
-                                    <FontIcon FontFamily="{StaticResource CalculatorFontFamily}" Glyph="&#xe946;"/>
+                                    <FontIcon FontFamily="{StaticResource CalculatorFontFamily}" Glyph="&#xE713;"/>
                                 </muxc:NavigationViewItem.Icon>
-                                <FlyoutBase.AttachedFlyout>
-                                    <Flyout x:Name="AboutPageFlyout"
-                                            x:Uid="AboutPageFlyout"
-                                            Closed="OnAboutFlyoutClosed"
-                                            FlyoutPresenterStyle="{StaticResource AboutFlyoutPresenterStyle}"
-                                            Opened="OnAboutFlyoutOpened">
-                                        <local:AboutFlyout x:Name="AboutPage" x:Load="False"/>
-                                    </Flyout>
-                                </FlyoutBase.AttachedFlyout>
                             </muxc:NavigationViewItem>
                         </muxc:NavigationViewList.Items>
                     </muxc:NavigationViewList>
diff --git a/src/Calculator/Views/MainPage.xaml.cpp b/src/Calculator/Views/MainPage.xaml.cpp
index 53c1499e..120e0fb0 100644
--- a/src/Calculator/Views/MainPage.xaml.cpp
+++ b/src/Calculator/Views/MainPage.xaml.cpp
@@ -178,6 +178,10 @@ void MainPage::OnAppPropertyChanged(_In_ Platform::Object ^ sender, _In_ Windows
                 m_converter->AnimateConverter();
             }
         }
+        else if (newValue == ViewMode::Settings)
+        {
+            EnsureSettings();
+        }
 
         ShowHideControls(newValue);
 
@@ -197,6 +201,7 @@ void MainPage::ShowHideControls(ViewMode mode)
     auto isDateCalcViewMode = NavCategory::IsDateCalculatorViewMode(mode);
     auto isGraphingCalcViewMode = NavCategory::IsGraphingCalculatorViewMode(mode);
     auto isConverterViewMode = NavCategory::IsConverterViewMode(mode);
+    auto isSettingsViewMode = NavCategory::IsSettingsViewMode(mode);
 
     if (m_calculator)
     {
@@ -221,6 +226,12 @@ void MainPage::ShowHideControls(ViewMode mode)
         m_converter->Visibility = BooleanToVisibilityConverter::Convert(isConverterViewMode);
         m_converter->IsEnabled = isConverterViewMode;
     }
+
+    if (m_settings)
+    {
+        m_settings->Visibility = BooleanToVisibilityConverter::Convert(isSettingsViewMode);
+        m_settings->IsEnabled = isSettingsViewMode;
+    }
 }
 
 void MainPage::UpdateViewState()
@@ -243,7 +254,7 @@ void MainPage::UpdatePanelViewState()
 
 void MainPage::OnPageLoaded(_In_ Object ^, _In_ RoutedEventArgs ^ args)
 {
-    if (!m_converter && !m_calculator && !m_dateCalculator && !m_graphingCalculator)
+    if (!m_converter && !m_calculator && !m_dateCalculator && !m_graphingCalculator && !m_settings)
     {
         // We have just launched into our default mode (standard calc) so ensure calc is loaded
         EnsureCalculator();
@@ -380,6 +391,17 @@ void MainPage::EnsureConverter()
     }
 }
 
+void MainPage::EnsureSettings()
+{
+    if (!m_settings)
+    {
+        m_settings = ref new CalculatorApp::SettingsPage();
+        m_settings->Name = L"SettingsPage";
+
+        SettingsHolder->Child = m_settings;
+    }
+}
+
 void MainPage::OnNavLoaded(_In_ Object ^ sender, _In_ RoutedEventArgs ^ e)
 {
     if (NavView->SelectedItem == nullptr)
@@ -427,25 +449,9 @@ void MainPage::OnNavPaneClosed(_In_ MUXC::NavigationView ^ sender, _In_ Object ^
     this->SetDefaultFocus();
 }
 
-void MainPage::OnAboutButtonClick(Object ^ sender, ItemClickEventArgs ^ e)
+void MainPage::OnSettingsButtonClick(Object ^ sender, ItemClickEventArgs ^ e, ViewMode /*model*/)
 {
-    ShowAboutPage();
-}
-
-void MainPage::OnAboutFlyoutOpened(_In_ Object ^ sender, _In_ Object ^ e)
-{
-    // Keep Ignoring Escape till the About page flyout is opened
-    KeyboardShortcutManager::IgnoreEscape(false);
-
-    KeyboardShortcutManager::UpdateDropDownState(this->AboutPageFlyout);
-}
-
-void MainPage::OnAboutFlyoutClosed(_In_ Object ^ sender, _In_ Object ^ e)
-{
-    // Start Honoring Escape once the About page flyout is closed
-    KeyboardShortcutManager::HonorEscape();
-
-    KeyboardShortcutManager::UpdateDropDownState(nullptr);
+    Model->Mode = ViewMode::Settings;
 }
 
 void MainPage::OnNavSelectionChanged(_In_ Object ^ sender, _In_ MUXC::NavigationViewSelectionChangedEventArgs ^ e)
@@ -508,16 +514,6 @@ MUXC::NavigationViewItem ^ MainPage::CreateNavViewItemFromCategory(NavCategory ^
     return item;
 }
 
-void MainPage::ShowAboutPage()
-{
-    if (!AboutPage)
-    {
-        this->FindName(L"AboutPage");
-    }
-
-    FlyoutBase::ShowAttachedFlyout(AboutButton);
-}
-
 void MainPage::UnregisterEventHandlers()
 {
     Window::Current->SizeChanged -= m_windowSizeEventToken;
diff --git a/src/Calculator/Views/MainPage.xaml.h b/src/Calculator/Views/MainPage.xaml.h
index 2b71bdd6..c9f76396 100644
--- a/src/Calculator/Views/MainPage.xaml.h
+++ b/src/Calculator/Views/MainPage.xaml.h
@@ -9,6 +9,7 @@
 #include "Views/GraphingCalculator/GraphingCalculator.xaml.h"
 #include "Views/UnitConverter.xaml.h"
 #include "CalcViewModel/ApplicationViewModel.h"
+#include "SettingsPage.xaml.h"
 
 namespace CalculatorApp
 {
@@ -54,9 +55,7 @@ public
             Microsoft::UI::Xaml::Controls::NavigationView ^ /*sender*/,
             _In_ Microsoft::UI::Xaml::Controls::NavigationViewItemInvokedEventArgs ^ e);
 
-        void OnAboutButtonClick(_In_ Platform::Object ^ sender, _In_ Windows::UI::Xaml::Controls::ItemClickEventArgs ^ e);
-        void OnAboutFlyoutOpened(_In_ Platform::Object ^ sender, _In_ Platform::Object ^ e);
-        void OnAboutFlyoutClosed(_In_ Platform::Object ^ sender, _In_ Platform::Object ^ e);
+        void OnSettingsButtonClick(_In_ Platform::Object ^ sender, _In_ Windows::UI::Xaml::Controls::ItemClickEventArgs ^ e, CalculatorApp::Common::ViewMode mode);
         void AlwaysOnTopButtonClick(Platform::Object ^ sender, Windows::UI::Xaml::RoutedEventArgs ^ e);
         void TitleBarAlwaysOnTopButtonClick(Platform::Object ^ sender, Windows::UI::Xaml::RoutedEventArgs ^ e);
 
@@ -75,7 +74,7 @@ public
         void EnsureDateCalculator();
         void EnsureGraphingCalculator();
         void EnsureConverter();
-        void ShowAboutPage();
+        void EnsureSettings();
 
         void AnnounceCategoryName();
 
@@ -83,6 +82,7 @@ public
 		GraphingCalculator^ m_graphingCalculator;
         CalculatorApp::UnitConverter ^ m_converter;
         CalculatorApp::DateCalculator ^ m_dateCalculator;
+        CalculatorApp::SettingsPage ^ m_settings;
         Windows::Foundation::EventRegistrationToken m_windowSizeEventToken;
         CalculatorApp::ViewModel::ApplicationViewModel ^ m_model;
         Windows::Foundation::EventRegistrationToken m_accessibilitySettingsToken;