diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml
index 907b00dfff..50c5c06479 100644
--- a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml
+++ b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml
@@ -3,9 +3,6 @@
                     xmlns:controls="using:Avalonia.Controls"
                     x:CompileBindings="True">
 
-  <!-- This must follow OverlayCornerRadius -->
-  <CornerRadius x:Key="TopOverlayCornerRadius">5,5,0,0</CornerRadius>
-
   <ControlTheme x:Key="{x:Type ColorPicker}"
                 TargetType="ColorPicker">
     <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
@@ -25,7 +22,7 @@
                         Padding="0,0,10,0"
                         UseLayoutRounding="False">
           <DropDownButton.Styles>
-            <Style Selector="FlyoutPresenter.NoPadding">
+            <Style Selector="FlyoutPresenter.nopadding">
               <Setter Property="Padding" Value="0" />
             </Style>
           </DropDownButton.Styles>
@@ -45,8 +42,10 @@
             </Panel>
           </DropDownButton.Content>
           <DropDownButton.Flyout>
-            <Flyout FlyoutPresenterClasses="NoPadding">
+            <Flyout FlyoutPresenterClasses="nopadding"
+                    Placement="Bottom">
               <ColorView x:Name="FlyoutColorView"
+                         Classes="topoverlay"
                          Color="{Binding Color, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                          ColorModel="{Binding ColorModel, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                          ColorSpectrumComponents="{TemplateBinding ColorSpectrumComponents}"
@@ -81,10 +80,4 @@
     </Setter>
   </ControlTheme>
 
-  <!-- Adjust Background within Flyout -->
-  <!-- Note: This is implemented but there seems to be an issue and the selector can't match across the Flyout -->
-  <!--<Style Selector="ColorPicker /template/ ColorView#FlyoutColorView /template/ Border#TabBackgroundBorder">
-    <Setter Property="CornerRadius" Value="{DynamicResource TopOverlayCornerRadius}" />
-  </Style>-->
-
 </ResourceDictionary>
diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml
index 993745b1e5..153b4422ea 100644
--- a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml
+++ b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml
@@ -77,6 +77,8 @@
     17.7761 14 17.5 14H9.94999ZM7.5 16C6.67157 16 6 15.3284 6 14.5C6 13.6716 6.67157 13 7.5
     13C8.32843 13 9 13.6716 9 14.5C9 15.3284 8.32843 16 7.5 16Z
   </PathGeometry>
+  <!-- This must follow OverlayCornerRadius -->
+  <CornerRadius x:Key="TopOverlayCornerRadius">5,5,0,0</CornerRadius>
 
   <ControlTheme x:Key="{x:Type ColorView}"
                 TargetType="ColorView">
@@ -644,6 +646,12 @@
         </Grid>
       </ControlTemplate>
     </Setter>
+
+    <!-- Special style used to customize the top tab area corner radius -->
+    <Style Selector="^.topoverlay /template/ Border#TabBackgroundBorder">
+      <Setter Property="CornerRadius" Value="{DynamicResource TopOverlayCornerRadius}" />
+    </Style>
+
   </ControlTheme>
 
 </ResourceDictionary>