From 9c23cbd4488e4101cd157ebde07722ffb044bf1c Mon Sep 17 00:00:00 2001
From: Niels Laute <niels.laute@live.nl>
Date: Mon, 24 Nov 2025 20:22:36 +0100
Subject: [PATCH] More changes to the Settings page

---
 .../Settings.UI.Library/MonitorInfo.cs        |   5 +
 .../SettingsXAML/Views/PowerDisplayPage.xaml  |  88 ++---
 .../Views/ProfileEditorDialog.xaml            | 327 +++++-------------
 .../Settings.UI/Strings/en-us/Resources.resw  |   2 +-
 4 files changed, 126 insertions(+), 296 deletions(-)

diff --git a/src/settings-ui/Settings.UI.Library/MonitorInfo.cs b/src/settings-ui/Settings.UI.Library/MonitorInfo.cs
index 3e89ce4891..a0db813c46 100644
--- a/src/settings-ui/Settings.UI.Library/MonitorInfo.cs
+++ b/src/settings-ui/Settings.UI.Library/MonitorInfo.cs
@@ -2,6 +2,7 @@
 // The Microsoft Corporation licenses this file to you under the MIT license.
 // See the LICENSE file in the project root for more information.
 
+using System;
 using System.Collections.Generic;
 using System.Collections.ObjectModel;
 using System.Linq;
@@ -71,6 +72,10 @@ namespace Microsoft.PowerToys.Settings.UI.Library
             }
         }
 
+        public string MonitorIconGlyph => CommunicationMethod.Contains("WMI", StringComparison.OrdinalIgnoreCase) == true
+    ? "\uE7F8" // Laptop icon for WMI
+    : "\uE7F4"; // External monitor icon for DDC/CI and others
+
         [JsonPropertyName("internalName")]
         public string InternalName
         {
diff --git a/src/settings-ui/Settings.UI/SettingsXAML/Views/PowerDisplayPage.xaml b/src/settings-ui/Settings.UI/SettingsXAML/Views/PowerDisplayPage.xaml
index b3a5a9c888..818ca3b354 100644
--- a/src/settings-ui/Settings.UI/SettingsXAML/Views/PowerDisplayPage.xaml
+++ b/src/settings-ui/Settings.UI/SettingsXAML/Views/PowerDisplayPage.xaml
@@ -46,65 +46,53 @@
                 </controls:SettingsGroup>
 
                 <controls:SettingsGroup x:Uid="PowerDisplay_Profiles_GroupSettings" IsEnabled="{x:Bind ViewModel.IsEnabled, Mode=OneWay}">
-                    <tkcontrols:SettingsCard x:Uid="PowerDisplay_QuickProfiles" HeaderIcon="{ui:FontIcon Glyph=&#xE8B7;}">
-                        <StackPanel Spacing="8">
-                            <!--  Profile buttons row  -->
-                            <ItemsRepeater ItemsSource="{x:Bind ViewModel.Profiles, Mode=OneWay}">
-                                <ItemsRepeater.Layout>
-                                    <StackLayout Orientation="Horizontal" Spacing="8" />
-                                </ItemsRepeater.Layout>
-                                <ItemsRepeater.ItemTemplate>
-                                    <DataTemplate x:DataType="library:PowerDisplayProfile">
+                    <tkcontrols:SettingsExpander
+                        x:Uid="PowerDisplay_QuickProfiles"
+                        HeaderIcon="{ui:FontIcon Glyph=&#xE8B7;}"
+                        ItemsSource="{x:Bind ViewModel.Profiles, Mode=OneWay}">
+                        <tkcontrols:SettingsExpander.ItemTemplate>
+                            <DataTemplate x:DataType="library:PowerDisplayProfile">
+                                <tkcontrols:SettingsCard Header="{x:Bind Name}">
+                                    <StackPanel Orientation="Horizontal" Spacing="8">
                                         <Button
                                             Click="ProfileButton_Click"
+                                            Content="Apply"
+                                            Tag="{x:Bind}" />
+                                        <Button
+                                            Content="{ui:FontIcon Glyph=&#xE712;,
+                                                                  FontSize=16}"
+                                            Style="{StaticResource SubtleButtonStyle}"
                                             Tag="{x:Bind}"
-                                            ToolTipService.ToolTip="Apply this profile">
-                                            <StackPanel Orientation="Horizontal" Spacing="6">
-                                                <FontIcon FontSize="14" Glyph="&#xE81E;" />
-                                                <TextBlock Text="{x:Bind Name}" />
-                                            </StackPanel>
-
-                                            <Button.ContextFlyout>
+                                            ToolTipService.ToolTip="More settings">
+                                            <Button.Flyout>
                                                 <MenuFlyout>
                                                     <MenuFlyoutItem
                                                         Click="EditProfile_Click"
+                                                        Icon="{ui:FontIcon Glyph=&#xE70F;}"
                                                         Tag="{x:Bind}"
-                                                        Text="Edit">
-                                                        <MenuFlyoutItem.Icon>
-                                                            <FontIcon Glyph="&#xE70F;" />
-                                                        </MenuFlyoutItem.Icon>
-                                                    </MenuFlyoutItem>
+                                                        Text="Edit" />
+                                                    <MenuFlyoutSeparator />
                                                     <MenuFlyoutItem
                                                         Click="DeleteProfile_Click"
+                                                        Icon="{ui:FontIcon Glyph=&#xE74D;}"
                                                         Tag="{x:Bind}"
-                                                        Text="Delete">
-                                                        <MenuFlyoutItem.Icon>
-                                                            <FontIcon Glyph="&#xE74D;" />
-                                                        </MenuFlyoutItem.Icon>
-                                                    </MenuFlyoutItem>
+                                                        Text="Delete" />
                                                 </MenuFlyout>
-                                            </Button.ContextFlyout>
+                                            </Button.Flyout>
                                         </Button>
-                                    </DataTemplate>
-                                </ItemsRepeater.ItemTemplate>
-                            </ItemsRepeater>
+                                    </StackPanel>
+                                </tkcontrols:SettingsCard>
+                            </DataTemplate>
+                        </tkcontrols:SettingsExpander.ItemTemplate>
 
-                            <!--  Add profile button  -->
-                            <Button Click="AddProfileButton_Click" ToolTipService.ToolTip="Save current settings as new profile">
-                                <StackPanel Orientation="Horizontal" Spacing="6">
-                                    <FontIcon FontSize="14" Glyph="&#xE710;" />
-                                    <TextBlock x:Uid="PowerDisplay_AddProfile_Text" />
-                                </StackPanel>
-                            </Button>
-
-                            <!--  Help text  -->
-                            <TextBlock
-                                x:Uid="PowerDisplay_ProfilesHelpText"
-                                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-                                Style="{StaticResource CaptionTextBlockStyle}"
-                                TextWrapping="Wrap" />
-                        </StackPanel>
-                    </tkcontrols:SettingsCard>
+                        <!--  Add profile button  -->
+                        <Button Click="AddProfileButton_Click" ToolTipService.ToolTip="Save current settings as new profile">
+                            <StackPanel Orientation="Horizontal" Spacing="6">
+                                <FontIcon FontSize="14" Glyph="&#xE710;" />
+                                <TextBlock x:Uid="PowerDisplay_AddProfile_Text" />
+                            </StackPanel>
+                        </Button>
+                    </tkcontrols:SettingsExpander>
                 </controls:SettingsGroup>
 
                 <controls:SettingsGroup x:Uid="PowerDisplay_Monitors" IsEnabled="{x:Bind ViewModel.IsEnabled, Mode=OneWay}">
@@ -126,8 +114,10 @@
                                     Margin="0,0,0,2"
                                     Description="{x:Bind InternalName, Mode=OneWay}"
                                     Header="{x:Bind Name}"
-                                    HeaderIcon="{ui:FontIcon Glyph=&#xE7F4;}"
                                     IsExpanded="False">
+                                    <tkcontrols:SettingsExpander.HeaderIcon>
+                                        <FontIcon Glyph="{x:Bind MonitorIconGlyph, Mode=OneWay}" />
+                                    </tkcontrols:SettingsExpander.HeaderIcon>
                                     <TextBlock Text="{x:Bind CommunicationMethod, Mode=OneWay}" />
                                     <tkcontrols:SettingsExpander.ItemsHeader>
                                         <!--  Capabilities warning  -->
@@ -203,14 +193,12 @@
                                                                 <RowDefinition Height="Auto" />
                                                                 <RowDefinition Height="*" />
                                                             </Grid.RowDefinitions>
-
                                                             <!--  Header with Copy Button  -->
-                                                            <Grid Grid.Row="0" Margin="0,0,0,12">
+                                                            <Grid Margin="0,0,0,12">
                                                                 <Grid.ColumnDefinitions>
                                                                     <ColumnDefinition Width="*" />
                                                                     <ColumnDefinition Width="Auto" />
                                                                 </Grid.ColumnDefinitions>
-
                                                                 <TextBlock
                                                                     Grid.Column="0"
                                                                     VerticalAlignment="Center"
diff --git a/src/settings-ui/Settings.UI/SettingsXAML/Views/ProfileEditorDialog.xaml b/src/settings-ui/Settings.UI/SettingsXAML/Views/ProfileEditorDialog.xaml
index 0f8a4f0d1c..dd5f91c1e8 100644
--- a/src/settings-ui/Settings.UI/SettingsXAML/Views/ProfileEditorDialog.xaml
+++ b/src/settings-ui/Settings.UI/SettingsXAML/Views/ProfileEditorDialog.xaml
@@ -4,18 +4,27 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:tkcontrols="using:CommunityToolkit.WinUI.Controls"
     xmlns:ui="using:CommunityToolkit.WinUI"
     xmlns:viewmodels="using:Microsoft.PowerToys.Settings.UI.ViewModels"
     Title="Edit Profile"
+    Width="486"
+    MinWidth="486"
     CloseButtonClick="ContentDialog_CloseButtonClick"
     CloseButtonText="Cancel"
     DefaultButton="Primary"
     IsPrimaryButtonEnabled="{x:Bind ViewModel.CanSave, Mode=OneWay}"
     PrimaryButtonClick="ContentDialog_PrimaryButtonClick"
     PrimaryButtonText="Save"
+    Style="{StaticResource DefaultContentDialogStyle}"
     mc:Ignorable="d">
 
-    <Grid>
+    <Grid MinWidth="486">
+        <Grid.Resources>
+            <x:Double x:Key="SettingsCardWrapThreshold">0</x:Double>
+            <x:Double x:Key="SettingsCardWrapNoIconThreshold">0</x:Double>
+            <Thickness x:Key="SettingsExpanderItemPadding">0,8,0,8</Thickness>
+        </Grid.Resources>
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto" />
             <RowDefinition Height="*" />
@@ -29,264 +38,92 @@
             Text="{x:Bind ViewModel.ProfileName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
 
         <!--  Monitors List  -->
-        <ScrollViewer
-            Grid.Row="1"
-            Padding="0,0,16,0"
-            VerticalScrollBarVisibility="Auto">
+        <ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto">
             <StackPanel Spacing="16">
-                <TextBlock Style="{StaticResource BodyStrongTextBlockStyle}" Text="Select Monitors" />
-
+                <TextBlock Style="{StaticResource BodyStrongTextBlockStyle}" Text="Select what monitors and settings to include for this profile" />
                 <ItemsControl ItemsSource="{x:Bind ViewModel.Monitors, Mode=OneWay}">
                     <ItemsControl.ItemTemplate>
                         <DataTemplate x:DataType="viewmodels:MonitorSelectionItem">
-                            <Grid Margin="0,0,0,12">
-                                <!--  Unselected State  -->
-                                <Border
-                                    Background="{ThemeResource CardBackgroundFillColorSecondaryBrush}"
-                                    BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
-                                    BorderThickness="1"
-                                    CornerRadius="8"
-                                    Visibility="{x:Bind IsSelected, Mode=OneWay, Converter={StaticResource ReverseBoolToVisibilityConverter}}">
-                                    <Grid Padding="16,12">
-                                        <Grid.ColumnDefinitions>
-                                            <ColumnDefinition Width="Auto" />
-                                            <ColumnDefinition Width="*" />
-                                        </Grid.ColumnDefinitions>
-                                        <CheckBox
-                                            Margin="0,0,12,0"
-                                            VerticalAlignment="Center"
-                                            IsChecked="{x:Bind IsSelected, Mode=TwoWay}" />
-                                        <StackPanel Grid.Column="1" VerticalAlignment="Center">
-                                            <TextBlock
-                                                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-                                                Style="{StaticResource BodyStrongTextBlockStyle}"
-                                                Text="{x:Bind Monitor.Name}" />
-                                            <TextBlock
-                                                Foreground="{ThemeResource TextFillColorTertiaryBrush}"
-                                                Style="{StaticResource CaptionTextBlockStyle}"
-                                                Text="{x:Bind Monitor.InternalName}" />
-                                        </StackPanel>
-                                    </Grid>
-                                </Border>
-
-                                <!--  Selected State  -->
-                                <Border
-                                    Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
-                                    BorderBrush="{ThemeResource AccentControlElevationBorderBrush}"
-                                    BorderThickness="1"
-                                    CornerRadius="8"
-                                    Visibility="{x:Bind IsSelected, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}">
-                                    <StackPanel>
-                                        <!--  Header: Monitor Selection  -->
-                                        <Grid Padding="16,12">
-                                            <Grid.ColumnDefinitions>
-                                                <ColumnDefinition Width="Auto" />
-                                                <ColumnDefinition Width="*" />
-                                            </Grid.ColumnDefinitions>
-                                            <CheckBox
-                                                Margin="0,0,12,0"
-                                                VerticalAlignment="Center"
-                                                IsChecked="{x:Bind IsSelected, Mode=TwoWay}" />
-                                            <StackPanel Grid.Column="1" VerticalAlignment="Center">
-                                                <TextBlock Style="{StaticResource BodyStrongTextBlockStyle}" Text="{x:Bind Monitor.Name}" />
-                                                <TextBlock
-                                                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-                                                    Style="{StaticResource CaptionTextBlockStyle}"
-                                                    Text="{x:Bind Monitor.InternalName}" />
-                                            </StackPanel>
-                                        </Grid>
-
-                                        <!--  Content: Settings  -->
-                                        <StackPanel Padding="20,0,20,20" Spacing="0">
-
-                                            <MenuFlyoutSeparator Margin="-20,0,-20,16" />
-
-                                            <!--  Brightness Row  -->
-                                            <Grid Margin="0,0,0,12" Visibility="{x:Bind Monitor.SupportsBrightness, Converter={StaticResource BoolToVisibilityConverter}}">
-                                                <Grid.ColumnDefinitions>
-                                                    <ColumnDefinition Width="140" />
-                                                    <ColumnDefinition Width="*" />
-                                                    <ColumnDefinition Width="40" />
-                                                    <ColumnDefinition Width="50" />
-                                                </Grid.ColumnDefinitions>
-
-                                                <StackPanel
-                                                    VerticalAlignment="Center"
-                                                    Orientation="Horizontal"
-                                                    Spacing="12">
-                                                    <FontIcon
-                                                        FontSize="16"
-                                                        Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-                                                        Glyph="&#xE706;" />
+                            <tkcontrols:SettingsExpander
+                                Margin="0,0,0,8"
+                                Header="{x:Bind Monitor.Name}"
+                                HeaderIcon="{x:Bind Monitor.MonitorIconGlyph}">
+                                <ToggleSwitch IsOn="{x:Bind IsSelected, Mode=TwoWay}" />
+                                <tkcontrols:SettingsExpander.Items>
+                                    <tkcontrols:SettingsCard Padding="16,8,16,8" Visibility="{x:Bind Monitor.SupportsBrightness, Converter={StaticResource BoolToVisibilityConverter}}">
+                                        <tkcontrols:SettingsCard.Header>
+                                            <CheckBox IsChecked="{x:Bind IncludeBrightness, Mode=TwoWay}">
+                                                <StackPanel Orientation="Horizontal" Spacing="8">
+                                                    <FontIcon FontSize="16" Glyph="&#xE706;" />
                                                     <TextBlock VerticalAlignment="Center" Text="Brightness" />
                                                 </StackPanel>
+                                            </CheckBox>
+                                        </tkcontrols:SettingsCard.Header>
+                                        <Slider
+                                            MinWidth="{StaticResource SettingActionControlMinWidth}"
+                                            VerticalAlignment="Center"
+                                            Maximum="100"
+                                            Minimum="0"
+                                            Value="{x:Bind Brightness, Mode=TwoWay}" />
+                                        <tkcontrols:SettingsCard.Resources>
+                                            <x:Double x:Key="SettingsCardLeftIndention">0</x:Double>
+                                        </tkcontrols:SettingsCard.Resources>
+                                    </tkcontrols:SettingsCard>
 
-                                                <Slider
-                                                    Grid.Column="1"
-                                                    Margin="12,0,12,0"
-                                                    VerticalAlignment="Center"
-                                                    Maximum="100"
-                                                    Minimum="0"
-                                                    Value="{x:Bind Brightness, Mode=TwoWay}" />
-
-                                                <TextBlock
-                                                    Grid.Column="2"
-                                                    Margin="0,0,8,0"
-                                                    VerticalAlignment="Center"
-                                                    Text="{x:Bind Brightness, Mode=OneWay}"
-                                                    TextAlignment="Right" />
-
-                                                <ToggleSwitch
-                                                    Grid.Column="3"
-                                                    MinWidth="0"
-                                                    HorizontalAlignment="Right"
-                                                    VerticalAlignment="Center"
-                                                    IsOn="{x:Bind IncludeBrightness, Mode=TwoWay}"
-                                                    OffContent=""
-                                                    OnContent="" />
-                                            </Grid>
-
-                                            <!--  Contrast Row  -->
-                                            <Grid Margin="0,0,0,12" Visibility="{x:Bind Monitor.SupportsContrast, Converter={StaticResource BoolToVisibilityConverter}}">
-                                                <Grid.ColumnDefinitions>
-                                                    <ColumnDefinition Width="140" />
-                                                    <ColumnDefinition Width="*" />
-                                                    <ColumnDefinition Width="40" />
-                                                    <ColumnDefinition Width="50" />
-                                                </Grid.ColumnDefinitions>
-
-                                                <StackPanel
-                                                    VerticalAlignment="Center"
-                                                    Orientation="Horizontal"
-                                                    Spacing="12">
-                                                    <FontIcon
-                                                        FontSize="16"
-                                                        Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-                                                        Glyph="&#xE793;" />
+                                    <tkcontrols:SettingsCard Padding="16,8,16,8" Visibility="{x:Bind Monitor.SupportsContrast, Converter={StaticResource BoolToVisibilityConverter}}">
+                                        <tkcontrols:SettingsCard.Header>
+                                            <CheckBox IsChecked="{x:Bind IncludeContrast, Mode=TwoWay}">
+                                                <StackPanel Orientation="Horizontal" Spacing="8">
+                                                    <FontIcon FontSize="16" Glyph="&#xE793;" />
                                                     <TextBlock VerticalAlignment="Center" Text="Contrast" />
                                                 </StackPanel>
-
-                                                <Slider
-                                                    Grid.Column="1"
-                                                    Margin="12,0,12,0"
-                                                    VerticalAlignment="Center"
-                                                    Maximum="100"
-                                                    Minimum="0"
-                                                    Value="{x:Bind Contrast, Mode=TwoWay}" />
-
-                                                <TextBlock
-                                                    Grid.Column="2"
-                                                    Margin="0,0,8,0"
-                                                    VerticalAlignment="Center"
-                                                    Text="{x:Bind Contrast, Mode=OneWay}"
-                                                    TextAlignment="Right" />
-
-                                                <ToggleSwitch
-                                                    Grid.Column="3"
-                                                    MinWidth="0"
-                                                    HorizontalAlignment="Right"
-                                                    VerticalAlignment="Center"
-                                                    IsOn="{x:Bind IncludeContrast, Mode=TwoWay}"
-                                                    OffContent=""
-                                                    OnContent="" />
-                                            </Grid>
-
-                                            <!--  Volume Row  -->
-                                            <Grid Margin="0,0,0,12" Visibility="{x:Bind Monitor.SupportsVolume, Converter={StaticResource BoolToVisibilityConverter}}">
-                                                <Grid.ColumnDefinitions>
-                                                    <ColumnDefinition Width="140" />
-                                                    <ColumnDefinition Width="*" />
-                                                    <ColumnDefinition Width="40" />
-                                                    <ColumnDefinition Width="50" />
-                                                </Grid.ColumnDefinitions>
-
-                                                <StackPanel
-                                                    VerticalAlignment="Center"
-                                                    Orientation="Horizontal"
-                                                    Spacing="12">
-                                                    <FontIcon
-                                                        FontSize="16"
-                                                        Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-                                                        Glyph="&#xE767;" />
+                                            </CheckBox>
+                                        </tkcontrols:SettingsCard.Header>
+                                        <Slider
+                                            MinWidth="{StaticResource SettingActionControlMinWidth}"
+                                            VerticalAlignment="Center"
+                                            Maximum="100"
+                                            Minimum="0"
+                                            Value="{x:Bind Contrast, Mode=TwoWay}" />
+                                    </tkcontrols:SettingsCard>
+                                    <tkcontrols:SettingsCard Padding="16,8,16,8" Visibility="{x:Bind Monitor.SupportsVolume, Converter={StaticResource BoolToVisibilityConverter}}">
+                                        <tkcontrols:SettingsCard.Header>
+                                            <CheckBox IsChecked="{x:Bind IncludeVolume, Mode=TwoWay}">
+                                                <StackPanel Orientation="Horizontal" Spacing="8">
+                                                    <FontIcon FontSize="16" Glyph="&#xE767;" />
                                                     <TextBlock VerticalAlignment="Center" Text="Volume" />
                                                 </StackPanel>
-
-                                                <Slider
-                                                    Grid.Column="1"
-                                                    Margin="12,0,12,0"
-                                                    VerticalAlignment="Center"
-                                                    Maximum="100"
-                                                    Minimum="0"
-                                                    Value="{x:Bind Volume, Mode=TwoWay}" />
-
-                                                <TextBlock
-                                                    Grid.Column="2"
-                                                    Margin="0,0,8,0"
-                                                    VerticalAlignment="Center"
-                                                    Text="{x:Bind Volume, Mode=OneWay}"
-                                                    TextAlignment="Right" />
-
-                                                <ToggleSwitch
-                                                    Grid.Column="3"
-                                                    MinWidth="0"
-                                                    HorizontalAlignment="Right"
-                                                    VerticalAlignment="Center"
-                                                    IsOn="{x:Bind IncludeVolume, Mode=TwoWay}"
-                                                    OffContent=""
-                                                    OnContent="" />
-                                            </Grid>
-
-                                            <!--  Color Temperature Row  -->
-                                            <Grid Margin="0,0,0,0" Visibility="{x:Bind Monitor.SupportsColorTemperature, Converter={StaticResource BoolToVisibilityConverter}}">
-                                                <Grid.ColumnDefinitions>
-                                                    <ColumnDefinition Width="140" />
-                                                    <ColumnDefinition Width="*" />
-                                                    <ColumnDefinition Width="40" />
-                                                    <ColumnDefinition Width="50" />
-                                                </Grid.ColumnDefinitions>
-
-                                                <StackPanel
-                                                    VerticalAlignment="Center"
-                                                    Orientation="Horizontal"
-                                                    Spacing="12">
-                                                    <FontIcon
-                                                        FontSize="16"
-                                                        Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-                                                        Glyph="&#xE790;" />
-                                                    <TextBlock VerticalAlignment="Center" Text="Color Temp" />
+                                            </CheckBox>
+                                        </tkcontrols:SettingsCard.Header>
+                                        <Slider
+                                            MinWidth="{StaticResource SettingActionControlMinWidth}"
+                                            VerticalAlignment="Center"
+                                            Maximum="100"
+                                            Minimum="0" />
+                                    </tkcontrols:SettingsCard>
+                                    <tkcontrols:SettingsCard Padding="16,8,16,8" Visibility="{x:Bind Monitor.SupportsColorTemperature, Converter={StaticResource BoolToVisibilityConverter}}">
+                                        <tkcontrols:SettingsCard.Header>
+                                            <CheckBox IsChecked="{x:Bind IncludeColorTemperature, Mode=TwoWay}">
+                                                <StackPanel Orientation="Horizontal" Spacing="8">
+                                                    <FontIcon FontSize="16" Glyph="&#xE790;" />
+                                                    <TextBlock VerticalAlignment="Center" Text="Color temperature" />
                                                 </StackPanel>
-
-                                                <ComboBox
-                                                    Grid.Column="1"
-                                                    MinWidth="160"
-                                                    Margin="12,0,12,0"
-                                                    HorizontalAlignment="Stretch"
-                                                    VerticalAlignment="Center"
-                                                    DisplayMemberPath="DisplayName"
-                                                    ItemsSource="{x:Bind Monitor.ColorPresetsForDisplay, Mode=OneWay}"
-                                                    PlaceholderText="Select..."
-                                                    SelectedValue="{x:Bind ColorTemperature, Mode=TwoWay}"
-                                                    SelectedValuePath="VcpValue" />
-
-                                                <!--  Spacer to match layout  -->
-                                                <Grid Grid.Column="2" />
-
-                                                <ToggleSwitch
-                                                    Grid.Column="3"
-                                                    MinWidth="0"
-                                                    HorizontalAlignment="Right"
-                                                    VerticalAlignment="Center"
-                                                    IsOn="{x:Bind IncludeColorTemperature, Mode=TwoWay}"
-                                                    OffContent=""
-                                                    OnContent="" />
-                                            </Grid>
-
-                                        </StackPanel>
-                                    </StackPanel>
-                                </Border>
-                            </Grid>
+                                            </CheckBox>
+                                        </tkcontrols:SettingsCard.Header>
+                                        <ComboBox
+                                            MinWidth="{StaticResource SettingActionControlMinWidth}"
+                                            VerticalAlignment="Center"
+                                            DisplayMemberPath="DisplayName"
+                                            ItemsSource="{x:Bind Monitor.ColorPresetsForDisplay, Mode=OneWay}"
+                                            PlaceholderText="Select.."
+                                            SelectedValue="{x:Bind ColorTemperature, Mode=TwoWay}"
+                                            SelectedValuePath="VcpValue" />
+                                    </tkcontrols:SettingsCard>
+                                </tkcontrols:SettingsExpander.Items>
+                            </tkcontrols:SettingsExpander>
                         </DataTemplate>
                     </ItemsControl.ItemTemplate>
+
                 </ItemsControl>
             </StackPanel>
         </ScrollViewer>
diff --git a/src/settings-ui/Settings.UI/Strings/en-us/Resources.resw b/src/settings-ui/Settings.UI/Strings/en-us/Resources.resw
index c1017c853a..eec4f0b152 100644
--- a/src/settings-ui/Settings.UI/Strings/en-us/Resources.resw
+++ b/src/settings-ui/Settings.UI/Strings/en-us/Resources.resw
@@ -5599,7 +5599,7 @@ To record a specific window, enter the hotkey with the Alt key in the opposite m
     <value>Click a profile button to quickly apply saved monitor settings</value>
   </data>
   <data name="PowerDisplay_AddProfile_Text.Text" xml:space="preserve">
-    <value>Add Profile</value>
+    <value>Add profile</value>
   </data>
   <data name="PowerDisplay_ProfilesHelpText.Text" xml:space="preserve">
     <value>Right-click a profile to rename or delete it</value>