From 40fc4561ee842a237deb105e38ecc8222ce798ec Mon Sep 17 00:00:00 2001
From: Niels Laute <niels.laute@live.nl>
Date: Fri, 27 Jun 2025 16:20:50 +0200
Subject: [PATCH] More shortcut visual refactoring

---
 .../SettingsXAML/Controls/KeyVisual.xaml      |  43 +++++---
 .../SettingsXAML/Controls/KeyVisual.xaml.cs   |   4 +-
 .../ShortcutControl/ShortcutControl.xaml      | 102 +++++++++++-------
 .../ShortcutControl/ShortcutControl.xaml.cs   |  39 ++++---
 .../ShortcutDialogContentControl.xaml         |  12 ++-
 .../SettingsXAML/Themes/Generic.xaml          |   4 +-
 .../SettingsXAML/Views/DashboardPage.xaml     |  85 +++++++++++----
 .../Views/KeyboardManagerPage.xaml            |  11 +-
 .../Settings.UI/Strings/en-us/Resources.resw  |  17 ++-
 .../ViewModels/DashboardViewModel.cs          |  15 ++-
 10 files changed, 226 insertions(+), 106 deletions(-)

diff --git a/src/settings-ui/Settings.UI/SettingsXAML/Controls/KeyVisual.xaml b/src/settings-ui/Settings.UI/SettingsXAML/Controls/KeyVisual.xaml
index 6af129c4a2..8c93708d46 100644
--- a/src/settings-ui/Settings.UI/SettingsXAML/Controls/KeyVisual.xaml
+++ b/src/settings-ui/Settings.UI/SettingsXAML/Controls/KeyVisual.xaml
@@ -6,17 +6,20 @@
     <Style BasedOn="{StaticResource DefaultKeyVisualStyle}" TargetType="controls:KeyVisual" />
 
     <Style x:Key="DefaultKeyVisualStyle" TargetType="controls:KeyVisual">
-        <Setter Property="MinWidth" Value="12" />
-        <Setter Property="MinHeight" Value="12" />
-        <Setter Property="Background" Value="{ThemeResource ControlFillColorDefaultBrush}" />
+        <Setter Property="MinWidth" Value="16" />
+        <Setter Property="MinHeight" Value="16" />
+        <Setter Property="Background" Value="{ThemeResource SubtleFillColorTransparentBrush}" />
         <Setter Property="Foreground" Value="{ThemeResource TextFillColorPrimaryBrush}" />
-        <Setter Property="BorderBrush" Value="{ThemeResource CardStrokeColorDefaultSolid}" />
+        <Setter Property="BorderBrush" Value="{ThemeResource ControlStrokeColorDefaultBrush}" />
         <Setter Property="BorderThickness" Value="1" />
-        <Setter Property="Padding" Value="4,4,4,4" />
-        <Setter Property="FontWeight" Value="SemiBold" />
-        <Setter Property="CornerRadius" Value="{StaticResource ControlCornerRadius}" />
+        <Setter Property="Padding" Value="4,0,4,0" />
+        <Setter Property="FontWeight" Value="Normal" />
+        <Setter Property="FontSize" Value="12" />
+        <Setter Property="CornerRadius" Value="2" />
         <Setter Property="HorizontalAlignment" Value="Center" />
         <Setter Property="HorizontalContentAlignment" Value="Center" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="VerticalAlignment" Value="Center" />
         <Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}" />
         <Setter Property="Template">
             <Setter.Value>
@@ -25,7 +28,8 @@
                         x:Name="ContentHolder"
                         Width="{TemplateBinding Width}"
                         Height="{TemplateBinding Height}"
-                        MinHeight="{TemplateBinding FontSize}"
+                        MinWidth="{TemplateBinding MinWidth}"
+                        MinHeight="{TemplateBinding MinHeight}"
                         Padding="{TemplateBinding Padding}"
                         HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                         VerticalAlignment="{TemplateBinding VerticalAlignment}"
@@ -40,15 +44,16 @@
                             Content="{TemplateBinding Content}"
                             FontSize="{TemplateBinding FontSize}"
                             FontWeight="{TemplateBinding FontWeight}"
-                            Foreground="{TemplateBinding Foreground}" />
+                            Foreground="{TemplateBinding Foreground}"
+                            TextLineBounds="Tight" />
                         <VisualStateManager.VisualStateGroups>
                             <VisualStateGroup x:Name="CommonStates">
                                 <VisualState x:Name="Normal" />
                                 <VisualState x:Name="Disabled">
                                     <VisualState.Setters>
-                                        <Setter Target="ContentHolder.Background" Value="{ThemeResource ControlFillColorDisabledBrush}" />
+                                        <Setter Target="ContentHolder.Background" Value="{ThemeResource SubtleFillColorTransparentBrush}" />
                                         <Setter Target="ContentHolder.BorderBrush" Value="{ThemeResource CardStrokeColorDefaultSolidBrush}" />
-                                        <Setter Target="KeyPresenter.Foreground" Value="{ThemeResource TextFillColorDisabledBrush}" />
+                                        <Setter Target="KeyPresenter.Foreground" Value="{ThemeResource ControlStrokeColorDefaultBrush}" />
                                     </VisualState.Setters>
                                 </VisualState>
                                 <VisualState x:Name="Invalid">
@@ -79,6 +84,10 @@
                 <ControlTemplate TargetType="controls:KeyVisual">
                     <Grid
                         x:Name="ContentHolder"
+                        Width="{TemplateBinding Width}"
+                        Height="{TemplateBinding Height}"
+                        MinWidth="{TemplateBinding MinWidth}"
+                        MinHeight="{TemplateBinding MinHeight}"
                         Padding="{TemplateBinding Padding}"
                         HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                         VerticalAlignment="{TemplateBinding VerticalAlignment}"
@@ -93,7 +102,8 @@
                             Content="{TemplateBinding Content}"
                             FontSize="{TemplateBinding FontSize}"
                             FontWeight="{TemplateBinding FontWeight}"
-                            Foreground="{TemplateBinding Foreground}" />
+                            Foreground="{TemplateBinding Foreground}"
+                            TextLineBounds="Tight" />
                         <VisualStateManager.VisualStateGroups>
                             <VisualStateGroup x:Name="CommonStates">
                                 <VisualState x:Name="Normal" />
@@ -127,9 +137,13 @@
                 <ControlTemplate TargetType="controls:KeyVisual">
                     <Grid
                         x:Name="ContentHolder"
+                        Width="{TemplateBinding Width}"
+                        Height="{TemplateBinding Height}"
+                        MinWidth="{TemplateBinding MinWidth}"
+                        MinHeight="{TemplateBinding MinHeight}"
                         Padding="{TemplateBinding Padding}"
                         HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
-                        VerticalAlignment="Stretch"
+                        VerticalAlignment="{TemplateBinding VerticalAlignment}"
                         Background="{TemplateBinding Background}"
                         BorderBrush="{TemplateBinding BorderBrush}"
                         BorderThickness="{TemplateBinding BorderThickness}"
@@ -141,7 +155,8 @@
                             Content="{TemplateBinding Content}"
                             FontSize="{TemplateBinding FontSize}"
                             FontWeight="{TemplateBinding FontWeight}"
-                            Foreground="{TemplateBinding Foreground}" />
+                            Foreground="{TemplateBinding Foreground}"
+                            TextLineBounds="Tight" />
                         <VisualStateManager.VisualStateGroups>
                             <VisualStateGroup x:Name="CommonStates">
                                 <VisualState x:Name="Normal" />
diff --git a/src/settings-ui/Settings.UI/SettingsXAML/Controls/KeyVisual.xaml.cs b/src/settings-ui/Settings.UI/SettingsXAML/Controls/KeyVisual.xaml.cs
index d343ec23b1..4d14734120 100644
--- a/src/settings-ui/Settings.UI/SettingsXAML/Controls/KeyVisual.xaml.cs
+++ b/src/settings-ui/Settings.UI/SettingsXAML/Controls/KeyVisual.xaml.cs
@@ -92,7 +92,7 @@ namespace Microsoft.PowerToys.Settings.UI.Controls
                 }
                 else
                 {
-                    _keyVisual._keyPresenter.Margin = new Thickness(0, 2, 0, 2);
+                    _keyVisual._keyPresenter.FontSize = _keyVisual.FontSize * 0.8;
                     _keyVisual._keyPresenter.FontFamily = new FontFamily("Segoe Fluent Icons, Segoe MDL2 Assets");
                     switch ((int)_keyVisual.Content)
                     {
@@ -120,7 +120,7 @@ namespace Microsoft.PowerToys.Settings.UI.Controls
                             winIconContainer.HorizontalAlignment = HorizontalAlignment.Center;
                             winIconContainer.VerticalAlignment = VerticalAlignment.Center;
 
-                            double iconDimensions = _keyVisual.FontSize * 0.9; // Adjust the size of the icon based on the font size
+                            double iconDimensions = _keyVisual.FontSize * 0.8; // Adjust the size of the icon based on the font size
                             winIconContainer.Height = iconDimensions;
                             winIconContainer.Width = iconDimensions;
                             _keyVisual._keyPresenter.Content = winIconContainer;
diff --git a/src/settings-ui/Settings.UI/SettingsXAML/Controls/ShortcutControl/ShortcutControl.xaml b/src/settings-ui/Settings.UI/SettingsXAML/Controls/ShortcutControl/ShortcutControl.xaml
index 04f5e505b0..8d20f13a45 100644
--- a/src/settings-ui/Settings.UI/SettingsXAML/Controls/ShortcutControl/ShortcutControl.xaml
+++ b/src/settings-ui/Settings.UI/SettingsXAML/Controls/ShortcutControl/ShortcutControl.xaml
@@ -11,45 +11,67 @@
     mc:Ignorable="d">
 
     <Grid HorizontalAlignment="Right">
-        <StackPanel Orientation="Horizontal">
-            <Button
-                x:Name="EditButton"
-                Padding="0"
-                Click="OpenDialogButton_Click"
-                CornerRadius="8">
-                <Grid Margin="12,6,12,6">
-                    <StackPanel Orientation="Horizontal" Spacing="16">
-                        <ItemsControl
-                            x:Name="PreviewKeysControl"
-                            VerticalAlignment="Center"
-                            IsEnabled="{Binding ElementName=EditButton, Path=IsEnabled}"
-                            IsTabStop="False">
-                            <ItemsControl.ItemsPanel>
-                                <ItemsPanelTemplate>
-                                    <StackPanel Orientation="Horizontal" Spacing="4" />
-                                </ItemsPanelTemplate>
-                            </ItemsControl.ItemsPanel>
-                            <ItemsControl.ItemTemplate>
-                                <DataTemplate>
-                                    <controls:KeyVisual
-                                        VerticalAlignment="Center"
-                                        AutomationProperties.AccessibilityView="Raw"
-                                        Content="{Binding}"
-                                        Padding="12,8,12,8"
-                                        IsTabStop="False"
-                                        Style="{StaticResource AccentKeyVisualStyle}" />
-                                </DataTemplate>
-                            </ItemsControl.ItemTemplate>
-                        </ItemsControl>
-                        <FontIcon
-                            FontFamily="{ThemeResource SymbolThemeFontFamily}"
-                            FontSize="14"
-                            Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-                            Glyph="&#xE70F;" />
-                    </StackPanel>
-                    <!--<TextBlock Text="No shortcut configured" />-->
-                </Grid>
-            </Button>
-        </StackPanel>
+        <Button
+            x:Name="EditButton"
+            Padding="0"
+            Click="OpenDialogButton_Click"
+            Style="{StaticResource SubtleButtonStyle}">
+            <Grid>
+                <ItemsControl
+                    x:Name="PreviewKeysControl"
+                    Margin="2"
+                    VerticalAlignment="Center"
+                    IsEnabled="{Binding ElementName=EditButton, Path=IsEnabled}"
+                    IsTabStop="False"
+                    Visibility="Collapsed">
+                    <ItemsControl.ItemsPanel>
+                        <ItemsPanelTemplate>
+                            <StackPanel Orientation="Horizontal" Spacing="4" />
+                        </ItemsPanelTemplate>
+                    </ItemsControl.ItemsPanel>
+                    <ItemsControl.ItemTemplate>
+                        <DataTemplate>
+                            <controls:KeyVisual
+                                Height="30              "
+                                Padding="12,4,12,4"
+                                VerticalAlignment="Center"
+                                AutomationProperties.AccessibilityView="Raw"
+                                Content="{Binding}"
+                                CornerRadius="{StaticResource ControlCornerRadius}"
+                                FontWeight="SemiBold"
+                                IsTabStop="False"
+                                Style="{StaticResource AccentKeyVisualStyle}" />
+                        </DataTemplate>
+                    </ItemsControl.ItemTemplate>
+                </ItemsControl>
+                <StackPanel
+                    x:Name="PlaceholderPanel"
+                    Padding="8,4"
+                    BorderThickness="1"
+                    CornerRadius="{StaticResource ControlCornerRadius}"
+                    Orientation="Horizontal"
+                    Spacing="8">
+                    <!--<FontIcon
+                        AutomationProperties.AccessibilityView="Raw"
+                        FontSize="12"
+                        Glyph="&#xEDA7;" />-->
+                    <TextBlock
+                        x:Uid="ConfigureShortcutText"
+                        VerticalAlignment="Center"
+                        Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
+                </StackPanel>
+            </Grid>
+        </Button>
+        <VisualStateManager.VisualStateGroups>
+            <VisualStateGroup x:Name="CommonStates">
+                <VisualState x:Name="Normal" />
+                <VisualState x:Name="Configured">
+                    <VisualState.Setters>
+                        <Setter Target="PlaceholderPanel.Visibility" Value="Collapsed" />
+                        <Setter Target="PreviewKeysControl.Visibility" Value="Visible" />
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
+        </VisualStateManager.VisualStateGroups>
     </Grid>
 </UserControl>
\ No newline at end of file
diff --git a/src/settings-ui/Settings.UI/SettingsXAML/Controls/ShortcutControl/ShortcutControl.xaml.cs b/src/settings-ui/Settings.UI/SettingsXAML/Controls/ShortcutControl/ShortcutControl.xaml.cs
index e33127572d..c75017300c 100644
--- a/src/settings-ui/Settings.UI/SettingsXAML/Controls/ShortcutControl/ShortcutControl.xaml.cs
+++ b/src/settings-ui/Settings.UI/SettingsXAML/Controls/ShortcutControl/ShortcutControl.xaml.cs
@@ -3,7 +3,6 @@
 // See the LICENSE file in the project root for more information.
 
 using System;
-
 using CommunityToolkit.WinUI;
 using Microsoft.PowerToys.Settings.UI.Helpers;
 using Microsoft.PowerToys.Settings.UI.Library;
@@ -11,6 +10,7 @@ using Microsoft.UI.Xaml;
 using Microsoft.UI.Xaml.Automation;
 using Microsoft.UI.Xaml.Controls;
 using Microsoft.UI.Xaml.Input;
+using Microsoft.Windows.ApplicationModel.Resources;
 using Windows.System;
 
 namespace Microsoft.PowerToys.Settings.UI.Controls
@@ -36,6 +36,8 @@ namespace Microsoft.PowerToys.Settings.UI.Controls
 
         public static readonly DependencyProperty AllowDisableProperty = DependencyProperty.Register("AllowDisable", typeof(bool), typeof(ShortcutControl), new PropertyMetadata(false, OnAllowDisableChanged));
 
+        private static ResourceLoader resourceLoader = Helpers.ResourceLoaderInstance.ResourceLoader;
+
         private static void OnAllowDisableChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
         {
             var me = d as ShortcutControl;
@@ -50,8 +52,6 @@ namespace Microsoft.PowerToys.Settings.UI.Controls
                 return;
             }
 
-            var resourceLoader = Helpers.ResourceLoaderInstance.ResourceLoader;
-
             var newValue = (bool)(e?.NewValue ?? false);
 
             var text = newValue ? resourceLoader.GetString("Activation_Shortcut_With_Disable_Description") : resourceLoader.GetString("Activation_Shortcut_Description");
@@ -103,8 +103,7 @@ namespace Microsoft.PowerToys.Settings.UI.Controls
                 {
                     hotkeySettings = value;
                     SetValue(HotkeySettingsProperty, value);
-                    PreviewKeysControl.ItemsSource = HotkeySettings.GetKeysList();
-                    AutomationProperties.SetHelpText(EditButton, HotkeySettings.ToString());
+                    SetKeys();
                     c.Keys = HotkeySettings.GetKeysList();
                 }
             }
@@ -118,8 +117,6 @@ namespace Microsoft.PowerToys.Settings.UI.Controls
             this.Unloaded += ShortcutControl_Unloaded;
             this.Loaded += ShortcutControl_Loaded;
 
-            var resourceLoader = Helpers.ResourceLoaderInstance.ResourceLoader;
-
             // We create the Dialog in C# because doing it in XAML is giving WinUI/XAML Island bugs when using dark theme.
             shortcutDialog = new ContentDialog
             {
@@ -433,11 +430,9 @@ namespace Microsoft.PowerToys.Settings.UI.Controls
             hotkeySettings = null;
 
             SetValue(HotkeySettingsProperty, hotkeySettings);
-            PreviewKeysControl.ItemsSource = HotkeySettings.GetKeysList();
+            SetKeys();
 
             lastValidSettings = hotkeySettings;
-
-            AutomationProperties.SetHelpText(EditButton, HotkeySettings.ToString());
             shortcutDialog.Hide();
         }
 
@@ -448,8 +443,7 @@ namespace Microsoft.PowerToys.Settings.UI.Controls
                 HotkeySettings = lastValidSettings with { };
             }
 
-            PreviewKeysControl.ItemsSource = hotkeySettings.GetKeysList();
-            AutomationProperties.SetHelpText(EditButton, HotkeySettings.ToString());
+            SetKeys();
             shortcutDialog.Hide();
         }
 
@@ -462,9 +456,7 @@ namespace Microsoft.PowerToys.Settings.UI.Controls
 
             var empty = new HotkeySettings();
             HotkeySettings = empty;
-
-            PreviewKeysControl.ItemsSource = HotkeySettings.GetKeysList();
-            AutomationProperties.SetHelpText(EditButton, HotkeySettings.ToString());
+            SetKeys();
             shortcutDialog.Hide();
         }
 
@@ -525,5 +517,22 @@ namespace Microsoft.PowerToys.Settings.UI.Controls
             Dispose(disposing: true);
             GC.SuppressFinalize(this);
         }
+
+        private void SetKeys()
+        {
+            var keys = HotkeySettings.GetKeysList();
+
+            if (keys != null && keys.Count > 0)
+            {
+                VisualStateManager.GoToState(this, "Configured", true);
+                PreviewKeysControl.ItemsSource = keys;
+                AutomationProperties.SetHelpText(EditButton, HotkeySettings.ToString());
+            }
+            else
+            {
+                VisualStateManager.GoToState(this, "Normal", true);
+                AutomationProperties.SetHelpText(EditButton, resourceLoader.GetString("ConfigureShortcut"));
+            }
+        }
     }
 }
diff --git a/src/settings-ui/Settings.UI/SettingsXAML/Controls/ShortcutControl/ShortcutDialogContentControl.xaml b/src/settings-ui/Settings.UI/SettingsXAML/Controls/ShortcutControl/ShortcutDialogContentControl.xaml
index 6f2f186fb6..af79b39ac7 100644
--- a/src/settings-ui/Settings.UI/SettingsXAML/Controls/ShortcutControl/ShortcutDialogContentControl.xaml
+++ b/src/settings-ui/Settings.UI/SettingsXAML/Controls/ShortcutControl/ShortcutDialogContentControl.xaml
@@ -34,12 +34,16 @@
             <ItemsControl.ItemTemplate>
                 <DataTemplate>
                     <controls:KeyVisual
-                        Height="56" Padding="20,8,20,8"
+                        Height="56"
+                        Padding="20,8,20,8"
                         AutomationProperties.AccessibilityView="Raw"
                         Content="{Binding}"
-                        FontSize="20" Style="{StaticResource AccentKeyVisualStyle}"
+                        CornerRadius="{StaticResource ControlCornerRadius}"
+                        FontSize="19"
+                        FontWeight="SemiBold"
                         IsInvalid="{Binding ElementName=ShortcutContentControl, Path=IsError, Mode=OneWay}"
-                        IsTabStop="False" />
+                        IsTabStop="False"
+                        Style="{StaticResource AccentKeyVisualStyle}" />
                 </DataTemplate>
             </ItemsControl.ItemTemplate>
         </ItemsControl>
@@ -51,14 +55,12 @@
             Orientation="Vertical"
             Spacing="8">
             <Grid Height="62">
-
                 <InfoBar
                     x:Uid="InvalidShortcut"
                     IsClosable="False"
                     IsOpen="{Binding ElementName=ShortcutContentControl, Path=IsError, Mode=OneWay}"
                     IsTabStop="{Binding ElementName=ShortcutContentControl, Path=IsError, Mode=OneWay}"
                     Severity="Error" />
-
                 <InfoBar
                     x:Uid="WarningShortcutAltGr"
                     IsClosable="False"
diff --git a/src/settings-ui/Settings.UI/SettingsXAML/Themes/Generic.xaml b/src/settings-ui/Settings.UI/SettingsXAML/Themes/Generic.xaml
index b1c5f79256..6a68895c50 100644
--- a/src/settings-ui/Settings.UI/SettingsXAML/Themes/Generic.xaml
+++ b/src/settings-ui/Settings.UI/SettingsXAML/Themes/Generic.xaml
@@ -2,7 +2,7 @@
 
     <ResourceDictionary.MergedDictionaries>
         <ResourceDictionary Source="ms-appx:///SettingsXAML/Controls/SettingsGroup/SettingsGroup.xaml" />
-        <ResourceDictionary Source="ms-appx:///SettingsXAML/Controls/IsEnabledTextBlock/IsEnabledTextBlock.xaml" />
-        <ResourceDictionary Source="ms-appx:///SettingsXAML/Controls/FlyoutMenuButton/FlyoutMenuButton.xaml" />
+        <ResourceDictionary Source="ms-appx:///SettingsXAML/Controls/IsEnabledTextBlock.xaml" />
+        <ResourceDictionary Source="ms-appx:///SettingsXAML/Controls/FlyoutMenuButton.xaml" />
     </ResourceDictionary.MergedDictionaries>
 </ResourceDictionary>
diff --git a/src/settings-ui/Settings.UI/SettingsXAML/Views/DashboardPage.xaml b/src/settings-ui/Settings.UI/SettingsXAML/Views/DashboardPage.xaml
index 0df37f062f..6709b19b6c 100644
--- a/src/settings-ui/Settings.UI/SettingsXAML/Views/DashboardPage.xaml
+++ b/src/settings-ui/Settings.UI/SettingsXAML/Views/DashboardPage.xaml
@@ -42,18 +42,16 @@
                     ItemsSource="{x:Bind Shortcut, Mode=OneWay}">
                     <ItemsControl.ItemsPanel>
                         <ItemsPanelTemplate>
-                            <StackPanel Orientation="Horizontal" Spacing="2" />
+                            <StackPanel Orientation="Horizontal" Spacing="4" />
                         </ItemsPanelTemplate>
                     </ItemsControl.ItemsPanel>
                     <ItemsControl.ItemTemplate>
                         <DataTemplate>
                             <controls:KeyVisual
-                                Padding="8,4,8,4"
                                 VerticalAlignment="Center"
                                 AutomationProperties.AccessibilityView="Raw"
                                 Content="{Binding}"
                                 FontSize="12"
-                                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                 IsTabStop="False" />
                         </DataTemplate>
                     </ItemsControl.ItemTemplate>
@@ -130,11 +128,11 @@
                         Grid.Column="1"
                         VerticalAlignment="Center"
                         Orientation="Vertical">
-                        <TextBlock FontWeight="SemiBold" Text="Learn what's new" />
+                        <TextBlock x:Uid="LearnWhatsNew" FontWeight="SemiBold" />
                         <TextBlock
                             Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                             Style="{StaticResource CaptionTextBlockStyle}"
-                            Text="Version 0.91" />
+                            Text="{x:Bind ViewModel.PowerToysVersion, Mode=OneWay}" />
                     </StackPanel>
                 </Grid>
             </Button>
@@ -143,8 +141,8 @@
                 Grid.Column="1"
                 Orientation="Horizontal"
                 Spacing="16">
+                <!-- // TO DO: Shortcut conflicts
                 <Button Style="{StaticResource SubtleButtonStyle}">
-                    <!--  Visibility="{x:Bind ViewModel.UpdateAvailable, Mode=OneWay}"  -->
                     <Grid ColumnSpacing="16">
                         <Grid.ColumnDefinitions>
                             <ColumnDefinition Width="Auto" />
@@ -163,28 +161,74 @@
                                 Text="2 conflicts found" />
                         </StackPanel>
                     </Grid>
-                </Button>
-                <Button Click="SWVersionButtonClicked" Style="{StaticResource SubtleButtonStyle}">
-                    <!--  Visibility="{x:Bind ViewModel.UpdateAvailable, Mode=OneWay}"  -->
+                </Button>-->
+                <Button
+                    Click="SWVersionButtonClicked"
+                    Style="{StaticResource SubtleButtonStyle}"
+                    Visibility="{x:Bind ViewModel.UpdateAvailable, Mode=OneWay}">
                     <Grid ColumnSpacing="16">
                         <Grid.ColumnDefinitions>
                             <ColumnDefinition Width="Auto" />
                             <ColumnDefinition Width="*" />
                         </Grid.ColumnDefinitions>
-                        <FontIcon
-                            AutomationProperties.AccessibilityView="Raw"
-                            FontSize="20"
-                            Foreground="{ThemeResource AccentTextFillColorTertiaryBrush}"
-                            Glyph="&#xE895;" />
+                        <Border
+                            Width="20"
+                            Height="20"
+                            CornerRadius="10">
+                            <Border.Background>
+                                <LinearGradientBrush StartPoint="0,0" EndPoint="0.5,1">
+                                    <GradientStop Offset="0.0" Color="#239DE0" />
+                                    <GradientStop Offset="1.0" Color="#037CD6" />
+                                </LinearGradientBrush>
+                            </Border.Background>
+                            <FontIcon
+                                AutomationProperties.AccessibilityView="Raw"
+                                FontSize="11"
+                                Foreground="White"
+                                Glyph="&#xE895;" />
+                        </Border>
                         <StackPanel Grid.Column="1" Orientation="Vertical">
                             <TextBlock x:Uid="UpdateAvailable" FontWeight="SemiBold" />
-                            <TextBlock
-                                x:Uid="LearnMore"
-                                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-                                Style="{StaticResource CaptionTextBlockStyle}" />
+                            <TextBlock Foreground="{ThemeResource TextFillColorSecondaryBrush}" Style="{StaticResource CaptionTextBlockStyle}">
+                                <Run x:Uid="GeneralVersion" />
+                                <Run Text="{x:Bind ViewModel.UpdateSettingsConfig.NewVersion, Mode=OneWay}" />
+                            </TextBlock>
                         </StackPanel>
                     </Grid>
                 </Button>
+                <Grid
+                    Padding="0,0,4,0"
+                    VerticalAlignment="Center"
+                    ColumnSpacing="16"
+                    Visibility="{x:Bind ViewModel.UpdateAvailable, Converter={StaticResource ReverseBoolToVisibilityConverter}, Mode=OneWay}">
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="Auto" />
+                        <ColumnDefinition Width="*" />
+                    </Grid.ColumnDefinitions>
+                    <Border
+                        Width="20"
+                        Height="20"
+                        CornerRadius="10">
+                        <Border.Background>
+                            <LinearGradientBrush StartPoint="0,0" EndPoint="0.5,1">
+                                <GradientStop Offset="0.0" Color="#6FB538" />
+                                <GradientStop Offset="1.0" Color="#397A24" />
+                            </LinearGradientBrush>
+                        </Border.Background>
+                        <FontIcon
+                            AutomationProperties.AccessibilityView="Raw"
+                            FontSize="11"
+                            Foreground="White"
+                            Glyph="&#xE73E;" />
+                    </Border>
+                    <StackPanel Grid.Column="1" Orientation="Vertical">
+                        <TextBlock x:Uid="YoureUpToDate" FontWeight="SemiBold" />
+                        <TextBlock Foreground="{ThemeResource TextFillColorSecondaryBrush}" Style="{StaticResource CaptionTextBlockStyle}">
+                            <Run x:Uid="General_VersionLastChecked" />
+                            <Run Text="{x:Bind ViewModel.UpdateSettingsConfig.LastCheckedDateLocalized, Mode=OneWay}" />
+                        </TextBlock>
+                    </StackPanel>
+                </Grid>
             </StackPanel>
         </Grid>
 
@@ -302,9 +346,6 @@
                         Padding="0"
                         VerticalAlignment="Top"
                         DividerVisibility="Collapsed">
-                        <!--<controls:Card.TitleContent>
-                            <Button Content="Click" />
-                        </controls:Card.TitleContent>-->
                         <ItemsRepeater
                             x:Name="DashboardView"
                             Grid.Row="2"
@@ -372,8 +413,6 @@
                                             OffContent=" "
                                             OnContent=" " />
                                     </tkcontrols:SettingsCard>
-
-
                                 </DataTemplate>
                             </ItemsRepeater.ItemTemplate>
                         </ItemsRepeater>
diff --git a/src/settings-ui/Settings.UI/SettingsXAML/Views/KeyboardManagerPage.xaml b/src/settings-ui/Settings.UI/SettingsXAML/Views/KeyboardManagerPage.xaml
index 7ac704ae76..e15c5dab9b 100644
--- a/src/settings-ui/Settings.UI/SettingsXAML/Views/KeyboardManagerPage.xaml
+++ b/src/settings-ui/Settings.UI/SettingsXAML/Views/KeyboardManagerPage.xaml
@@ -25,11 +25,18 @@
         </Style>
 
         <DataTemplate x:Key="OriginalKeyTemplate" x:DataType="x:String">
-            <controls:KeyVisual Content="{Binding}" />
+            <controls:KeyVisual
+                Padding="8"
+                Content="{Binding}"
+                CornerRadius="{StaticResource ControlCornerRadius}" />
         </DataTemplate>
 
         <DataTemplate x:Key="RemappedKeyTemplate" x:DataType="x:String">
-            <controls:KeyVisual Content="{Binding}" />
+            <controls:KeyVisual
+                Padding="8"
+                Content="{Binding}"
+                CornerRadius="{StaticResource ControlCornerRadius}"
+                Style="{StaticResource AccentKeyVisualStyle}" />
         </DataTemplate>
 
         <!--<DataTemplate x:Name="KeysListViewTemplate" x:DataType="Lib:KeysDataModel">
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 f6938404a8..81e09e5a9f 100644
--- a/src/settings-ui/Settings.UI/Strings/en-us/Resources.resw
+++ b/src/settings-ui/Settings.UI/Strings/en-us/Resources.resw
@@ -4947,7 +4947,7 @@ To record a specific window, enter the hotkey with the Alt key in the opposite m
   <data name="CmdPal_ShortDescription" xml:space="preserve">
     <value>A better quick launcher</value>
   </data>
-   <data name="CmdPal_ActivationDescription" xml:space="preserve">
+  <data name="CmdPal_ActivationDescription" xml:space="preserve">
     <value>Launch Command Palette</value>
   </data>
   <data name="CmdPal_Enable_CmdPal.Header" xml:space="preserve">
@@ -5055,4 +5055,19 @@ To record a specific window, enter the hotkey with the Alt key in the opposite m
   <data name="BugReportUnderConstruction" xml:space="preserve">
     <value>Bug report package is being created</value>
   </data>
+  <data name="YoureUpToDate.Text" xml:space="preserve">
+    <value>You're up to date</value>
+  </data>
+  <data name="GeneralVersion.Text" xml:space="preserve">
+    <value>Version</value>
+  </data>
+  <data name="LearnWhatsNew.Text" xml:space="preserve">
+    <value>Learn what's new</value>
+  </data>
+  <data name="ConfigureShortcut" xml:space="preserve">
+    <value>Configure shortcut</value>
+  </data>
+  <data name="ConfigureShortcutText.Text" xml:space="preserve">
+    <value>Configure shortcut</value>
+  </data>
 </root>
\ No newline at end of file
diff --git a/src/settings-ui/Settings.UI/ViewModels/DashboardViewModel.cs b/src/settings-ui/Settings.UI/ViewModels/DashboardViewModel.cs
index 172816dbf4..aa4c274912 100644
--- a/src/settings-ui/Settings.UI/ViewModels/DashboardViewModel.cs
+++ b/src/settings-ui/Settings.UI/ViewModels/DashboardViewModel.cs
@@ -15,6 +15,7 @@ using Microsoft.PowerToys.Settings.UI.Helpers;
 using Microsoft.PowerToys.Settings.UI.Library;
 using Microsoft.PowerToys.Settings.UI.Library.Helpers;
 using Microsoft.PowerToys.Settings.UI.Library.Interfaces;
+using Microsoft.PowerToys.Settings.UI.Library.Utilities;
 using Microsoft.PowerToys.Settings.UI.Services;
 using Microsoft.PowerToys.Settings.UI.Views;
 using Microsoft.UI.Xaml;
@@ -35,8 +36,18 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
 
         public ObservableCollection<DashboardListItem> ActionModules { get; set; } = new ObservableCollection<DashboardListItem>();
 
+        public string PowerToysVersion
+        {
+            get
+            {
+                return Helper.GetProductVersion();
+            }
+        }
+
         public bool UpdateAvailable { get; set; }
 
+        public UpdatingSettings UpdateSettingsConfig { get; set; }
+
         private ISettingsRepository<GeneralSettings> _settingsRepository;
         private GeneralSettings generalSettingsConfig;
         private Windows.ApplicationModel.Resources.ResourceLoader resourceLoader = Helpers.ResourceLoaderInstance.ResourceLoader;
@@ -58,8 +69,8 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
 
             GetShortcutModules();
 
-            UpdatingSettings updatingSettingsConfig = UpdatingSettings.LoadSettings();
-            UpdateAvailable = updatingSettingsConfig != null && (updatingSettingsConfig.State == UpdatingSettings.UpdatingState.ReadyToInstall || updatingSettingsConfig.State == UpdatingSettings.UpdatingState.ReadyToDownload);
+            UpdateSettingsConfig = UpdatingSettings.LoadSettings();
+            UpdateAvailable = UpdateSettingsConfig != null && (UpdateSettingsConfig.State == UpdatingSettings.UpdatingState.ReadyToInstall || UpdateSettingsConfig.State == UpdatingSettings.UpdatingState.ReadyToDownload);
         }
 
         private void AddDashboardListItem(ModuleType moduleType)