diff --git a/src/cascadia/TerminalSettingsEditor/NullableColorPicker.cpp b/src/cascadia/TerminalSettingsEditor/NullableColorPicker.cpp
index 4cb9f655b7..7996535c97 100644
--- a/src/cascadia/TerminalSettingsEditor/NullableColorPicker.cpp
+++ b/src/cascadia/TerminalSettingsEditor/NullableColorPicker.cpp
@@ -159,12 +159,7 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         CurrentColor(nullptr);
     }
 
-    safe_void_coroutine NullableColorPicker::MoreColors_Clicked(const IInspectable& /*sender*/, const RoutedEventArgs& /*args*/)
-    {
-        co_await ColorPickerDialog().ShowAsync();
-    }
-
-    void NullableColorPicker::ColorPickerDialog_Opened(const IInspectable& /*sender*/, const ContentDialogOpenedEventArgs& /*args*/)
+    void NullableColorPicker::Flyout_Opening(const IInspectable& /*sender*/, const IInspectable& /*args*/)
     {
         // Initialize color picker with current color
         if (CurrentColor())
@@ -185,7 +180,7 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         }
     }
 
-    void NullableColorPicker::ColorPickerDialog_PrimaryButtonClick(const IInspectable& /*sender*/, const ContentDialogButtonClickEventArgs& /*args*/)
+    void NullableColorPicker::Flyout_Closing(const winrt::Windows::Foundation::IInspectable& /*sender*/, const winrt::Windows::UI::Xaml::Controls::Primitives::FlyoutBaseClosingEventArgs& /*args*/)
     {
         const auto& selectedColor = ColorPickerControl().Color();
         const Microsoft::Terminal::Core::Color terminalColor{ selectedColor.R, selectedColor.G, selectedColor.B, selectedColor.A };
diff --git a/src/cascadia/TerminalSettingsEditor/NullableColorPicker.h b/src/cascadia/TerminalSettingsEditor/NullableColorPicker.h
index 876ce23d7f..04ce05aa32 100644
--- a/src/cascadia/TerminalSettingsEditor/NullableColorPicker.h
+++ b/src/cascadia/TerminalSettingsEditor/NullableColorPicker.h
@@ -22,10 +22,8 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         void ColorChip_DataContextChanged(const winrt::Windows::Foundation::IInspectable& sender, const winrt::Windows::UI::Xaml::DataContextChangedEventArgs& args);
 
         void NullColorButton_Clicked(const winrt::Windows::Foundation::IInspectable& sender, const winrt::Windows::UI::Xaml::RoutedEventArgs& args);
-        safe_void_coroutine MoreColors_Clicked(const winrt::Windows::Foundation::IInspectable& sender, const winrt::Windows::UI::Xaml::RoutedEventArgs& args);
-
-        void ColorPickerDialog_Opened(const winrt::Windows::Foundation::IInspectable& sender, const winrt::Windows::UI::Xaml::Controls::ContentDialogOpenedEventArgs& args);
-        void ColorPickerDialog_PrimaryButtonClick(const winrt::Windows::Foundation::IInspectable& sender, const winrt::Windows::UI::Xaml::Controls::ContentDialogButtonClickEventArgs& args);
+        void Flyout_Opening(const winrt::Windows::Foundation::IInspectable& sender, const winrt::Windows::Foundation::IInspectable& args);
+        void Flyout_Closing(const winrt::Windows::Foundation::IInspectable& sender, const winrt::Windows::UI::Xaml::Controls::Primitives::FlyoutBaseClosingEventArgs& args);
 
         DEPENDENCY_PROPERTY(Editor::ColorSchemeViewModel, ColorSchemeVM);
         DEPENDENCY_PROPERTY(Windows::Foundation::IReference<Microsoft::Terminal::Core::Color>, CurrentColor);
diff --git a/src/cascadia/TerminalSettingsEditor/NullableColorPicker.xaml b/src/cascadia/TerminalSettingsEditor/NullableColorPicker.xaml
index 6755543311..941f29b5e3 100644
--- a/src/cascadia/TerminalSettingsEditor/NullableColorPicker.xaml
+++ b/src/cascadia/TerminalSettingsEditor/NullableColorPicker.xaml
@@ -97,25 +97,6 @@
     <StackPanel x:Name="ContentStackPanel"
                 Orientation="Horizontal"
                 Spacing="5">
-        <ContentDialog x:Name="ColorPickerDialog"
-                       x:Uid="NullableColorPicker_ColorPickerContentDialog"
-                       DefaultButton="Primary"
-                       Opened="ColorPickerDialog_Opened"
-                       PrimaryButtonClick="ColorPickerDialog_PrimaryButtonClick"
-                       TabFocusNavigation="Cycle">
-            <muxc:ColorPicker x:Name="ColorPickerControl"
-                              Margin="0,0,0,-40"
-                              ColorSpectrumShape="Box"
-                              IsAlphaEnabled="False"
-                              IsAlphaSliderVisible="True"
-                              IsAlphaTextInputVisible="True"
-                              IsColorChannelTextInputVisible="False"
-                              IsColorSliderVisible="False"
-                              IsHexInputVisible="False"
-                              IsMoreButtonVisible="False"
-                              Orientation="Horizontal" />
-        </ContentDialog>
-
         <ContentPresenter Content="{x:Bind ColorSchemeVM, Mode=OneWay}"
                           ContentTemplate="{StaticResource ColorSchemeTemplate}" />
 
@@ -146,8 +127,14 @@
                 </ToggleButton>
 
                 <Button x:Uid="NullableColorPicker_MoreColorsButton"
-                        HorizontalAlignment="Stretch"
-                        Click="MoreColors_Clicked" />
+                        HorizontalAlignment="Stretch">
+                    <Button.Flyout>
+                        <Flyout Closing="Flyout_Closing"
+                                Opening="Flyout_Opening">
+                            <muxc:ColorPicker x:Name="ColorPickerControl" />
+                        </Flyout>
+                    </Button.Flyout>
+                </Button>
             </StackPanel>
         </Grid>