diff --git a/src/modules/keyboardmanager/KeyboardManagerEditorUI/App.xaml b/src/modules/keyboardmanager/KeyboardManagerEditorUI/App.xaml
index b5119bcf57..7bb01c0386 100644
--- a/src/modules/keyboardmanager/KeyboardManagerEditorUI/App.xaml
+++ b/src/modules/keyboardmanager/KeyboardManagerEditorUI/App.xaml
@@ -8,10 +8,13 @@
         <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>
                 <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
-                <ResourceDictionary Source="/Styles/KeyVisual.xaml" />
-                <ResourceDictionary Source="/Styles/CommonStyle.xaml" />
+                <ResourceDictionary Source="/Controls/KeyVisual/KeyVisual.xaml" />
+                <ResourceDictionary Source="/Controls/KeyVisual/KeyCharPresenter.xaml" />
+                <ResourceDictionary Source="/Styles/Button.xaml" />
             </ResourceDictionary.MergedDictionaries>
             <!--  Other app resources here  -->
+
+            <x:Double x:Key="ContentDialogMaxWidth">960</x:Double>
         </ResourceDictionary>
     </Application.Resources>
 </Application>
diff --git a/src/modules/keyboardmanager/KeyboardManagerEditorUI/Styles/InputControl.xaml b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Controls/InputControl.xaml
similarity index 95%
rename from src/modules/keyboardmanager/KeyboardManagerEditorUI/Styles/InputControl.xaml
rename to src/modules/keyboardmanager/KeyboardManagerEditorUI/Controls/InputControl.xaml
index 4fb953de49..22f8f6ab64 100644
--- a/src/modules/keyboardmanager/KeyboardManagerEditorUI/Styles/InputControl.xaml
+++ b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Controls/InputControl.xaml
@@ -1,12 +1,12 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <UserControl
-    x:Class="KeyboardManagerEditorUI.Styles.InputControl"
+    x:Class="KeyboardManagerEditorUI.Controls.InputControl"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:controls="using:CommunityToolkit.WinUI.UI.Controls"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:helper="using:KeyboardManagerEditorUI.Helpers"
-    xmlns:local="using:KeyboardManagerEditorUI.Styles"
+    xmlns:local="using:KeyboardManagerEditorUI.Controls"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     Loaded="UserControl_Loaded"
     mc:Ignorable="d">
@@ -43,7 +43,7 @@
                             </ItemsControl.ItemsPanel>
                             <ItemsControl.ItemTemplate>
                                 <DataTemplate>
-                                    <local:KeyVisual Content="{Binding}" VisualType="SmallOutline" />
+                                    <local:KeyVisual Content="{Binding}" Style="{StaticResource DefaultKeyVisualStyle}" />
                                 </DataTemplate>
                             </ItemsControl.ItemTemplate>
                         </ItemsControl>
@@ -79,7 +79,7 @@
                             </ItemsControl.ItemsPanel>
                             <ItemsControl.ItemTemplate>
                                 <DataTemplate>
-                                    <local:KeyVisual Content="{Binding}" VisualType="Small" />
+                                    <local:KeyVisual Content="{Binding}" Style="{StaticResource AccentKeyVisualStyle}" />
                                 </DataTemplate>
                             </ItemsControl.ItemTemplate>
                         </ItemsControl>
diff --git a/src/modules/keyboardmanager/KeyboardManagerEditorUI/Styles/InputControl.xaml.cs b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Controls/InputControl.xaml.cs
similarity index 99%
rename from src/modules/keyboardmanager/KeyboardManagerEditorUI/Styles/InputControl.xaml.cs
rename to src/modules/keyboardmanager/KeyboardManagerEditorUI/Controls/InputControl.xaml.cs
index 1c7760d4fa..46b3a873ed 100644
--- a/src/modules/keyboardmanager/KeyboardManagerEditorUI/Styles/InputControl.xaml.cs
+++ b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Controls/InputControl.xaml.cs
@@ -14,7 +14,7 @@ using Microsoft.UI.Xaml.Input;
 using Microsoft.UI.Xaml.Media;
 using Windows.System;
 
-namespace KeyboardManagerEditorUI.Styles
+namespace KeyboardManagerEditorUI.Controls
 {
     public sealed partial class InputControl : UserControl, IDisposable, IKeyboardHookTarget
     {
diff --git a/src/modules/keyboardmanager/KeyboardManagerEditorUI/Controls/KeyVisual/KeyCharPresenter.xaml b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Controls/KeyVisual/KeyCharPresenter.xaml
new file mode 100644
index 0000000000..2c6bf72292
--- /dev/null
+++ b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Controls/KeyVisual/KeyCharPresenter.xaml
@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ResourceDictionary
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:KeyboardManagerEditorUI.Controls"
+    xmlns:ui="using:CommunityToolkit.WinUI">
+
+    <Style BasedOn="{StaticResource DefaultKeyCharPresenterStyle}" TargetType="local:KeyCharPresenter" />
+
+    <Style x:Key="DefaultKeyCharPresenterStyle" TargetType="local:KeyCharPresenter">
+        <Setter Property="FontWeight" Value="Normal" />
+        <Setter Property="HorizontalAlignment" Value="Left" />
+        <Setter Property="IsTabStop" Value="False" />
+        <Setter Property="AutomationProperties.AccessibilityView" Value="Raw" />
+        <Setter Property="HorizontalContentAlignment" Value="Center" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="VerticalAlignment" Value="Center" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="local:KeyCharPresenter">
+                    <Grid Height="{TemplateBinding FontSize}">
+                        <TextBlock
+                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                            FontFamily="{TemplateBinding FontFamily}"
+                            FontSize="{TemplateBinding FontSize}"
+                            FontWeight="{TemplateBinding FontWeight}"
+                            Text="{TemplateBinding Content}"
+                            TextLineBounds="Tight" />
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+    <Style
+        x:Key="WindowsKeyCharPresenterStyle"
+        BasedOn="{StaticResource DefaultKeyCharPresenterStyle}"
+        TargetType="local:KeyCharPresenter">
+        <!--  Scale to visually align the height of the Windows logo and text  -->
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="local:KeyCharPresenter">
+                    <Grid Height="{TemplateBinding FontSize}">
+                        <Viewbox>
+                            <PathIcon Data="M9 20H0V11H9V20ZM20 20H11V11H20V20ZM9 9H0V0H9V9ZM20 9H11V0H20V9Z" />
+                        </Viewbox>
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+    <Style
+        x:Key="GlyphKeyCharPresenterStyle"
+        BasedOn="{StaticResource DefaultKeyCharPresenterStyle}"
+        TargetType="local:KeyCharPresenter">
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="local:KeyCharPresenter">
+                    <Grid>
+                        <Viewbox>
+                            <FontIcon
+                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                                FontSize="{TemplateBinding FontSize}"
+                                FontWeight="{TemplateBinding FontWeight}"
+                                Glyph="{TemplateBinding Content}" />
+                        </Viewbox>
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+</ResourceDictionary>
diff --git a/src/modules/keyboardmanager/KeyboardManagerEditorUI/Controls/KeyVisual/KeyCharPresenter.xaml.cs b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Controls/KeyVisual/KeyCharPresenter.xaml.cs
new file mode 100644
index 0000000000..0457e715ee
--- /dev/null
+++ b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Controls/KeyVisual/KeyCharPresenter.xaml.cs
@@ -0,0 +1,32 @@
+// Copyright (c) Microsoft Corporation
+// 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.Linq;
+using System.Runtime.InteropServices.WindowsRuntime;
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Data;
+using Microsoft.UI.Xaml.Documents;
+using Microsoft.UI.Xaml.Input;
+using Microsoft.UI.Xaml.Media;
+
+namespace KeyboardManagerEditorUI.Controls;
+
+public sealed partial class KeyCharPresenter : Control
+{
+    public KeyCharPresenter()
+    {
+        DefaultStyleKey = typeof(KeyCharPresenter);
+    }
+
+    public object Content
+    {
+        get => (object)GetValue(ContentProperty);
+        set => SetValue(ContentProperty, value);
+    }
+
+    public static readonly DependencyProperty ContentProperty = DependencyProperty.Register(nameof(Content), typeof(object), typeof(KeyCharPresenter), new PropertyMetadata(default(string)));
+}
diff --git a/src/modules/keyboardmanager/KeyboardManagerEditorUI/Controls/KeyVisual/KeyVisual.xaml b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Controls/KeyVisual/KeyVisual.xaml
new file mode 100644
index 0000000000..9eed022582
--- /dev/null
+++ b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Controls/KeyVisual/KeyVisual.xaml
@@ -0,0 +1,190 @@
+<ResourceDictionary
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:KeyboardManagerEditorUI.Controls">
+
+    <Style BasedOn="{StaticResource DefaultKeyVisualStyle}" TargetType="local:KeyVisual" />
+
+    <Style x:Key="DefaultKeyVisualStyle" TargetType="local:KeyVisual">
+        <Setter Property="MinWidth" Value="16" />
+        <Setter Property="AutomationProperties.AccessibilityView" Value="Raw" />
+        <Setter Property="IsTabStop" Value="False" />
+        <Setter Property="MinHeight" Value="16" />
+        <Setter Property="Background" Value="{ThemeResource ControlFillColorInputActiveBrush}" />
+        <Setter Property="Foreground" Value="{ThemeResource TextFillColorPrimaryBrush}" />
+        <Setter Property="BorderBrush" Value="{ThemeResource ControlStrokeColorDefaultBrush}" />
+        <Setter Property="BorderThickness" Value="1" />
+        <Setter Property="Padding" Value="8" />
+        <Setter Property="FontWeight" Value="Normal" />
+        <Setter Property="FontSize" Value="14" />
+        <Setter Property="CornerRadius" Value="4" />
+        <Setter Property="BackgroundSizing" Value="InnerBorderEdge" />
+        <Setter Property="HorizontalAlignment" Value="Left" />
+        <Setter Property="HorizontalContentAlignment" Value="Center" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="VerticalAlignment" Value="Center" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="local:KeyVisual">
+                    <Grid
+                        x:Name="KeyHolder"
+                        MinWidth="{TemplateBinding MinWidth}"
+                        MinHeight="{TemplateBinding MinHeight}"
+                        HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+                        VerticalAlignment="{TemplateBinding VerticalAlignment}"
+                        Background="{TemplateBinding Background}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        CornerRadius="{TemplateBinding CornerRadius}">
+                        <Grid.BackgroundTransition>
+                            <BrushTransition Duration="0:0:0.083" />
+                        </Grid.BackgroundTransition>
+                        <local:KeyCharPresenter
+                            x:Name="KeyPresenter"
+                            Margin="{TemplateBinding Padding}"
+                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                            AutomationProperties.AccessibilityView="Raw"
+                            Content="{TemplateBinding Content}"
+                            FontSize="{TemplateBinding FontSize}"
+                            FontWeight="{TemplateBinding FontWeight}"
+                            Foreground="{TemplateBinding Foreground}" />
+                        <VisualStateManager.VisualStateGroups>
+                            <VisualStateGroup x:Name="CommonStates">
+                                <VisualState x:Name="Normal" />
+                                <VisualState x:Name="Disabled">
+                                    <VisualState.Setters>
+                                        <Setter Target="KeyHolder.Background" Value="{ThemeResource SubtleFillColorTransparentBrush}" />
+                                        <Setter Target="KeyHolder.BorderBrush" Value="{ThemeResource CardStrokeColorDefaultSolidBrush}" />
+                                        <Setter Target="KeyPresenter.Foreground" Value="{ThemeResource ControlStrokeColorDefaultBrush}" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                                <VisualState x:Name="Invalid">
+                                    <VisualState.Setters>
+                                        <Setter Target="KeyHolder.Background" Value="{ThemeResource SystemFillColorCriticalBackgroundBrush}" />
+                                        <Setter Target="KeyHolder.BorderBrush" Value="{ThemeResource SystemFillColorCriticalBrush}" />
+                                        <Setter Target="KeyHolder.BorderThickness" Value="2" />
+                                        <Setter Target="KeyPresenter.Foreground" Value="{ThemeResource SystemFillColorCriticalBrush}" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                            </VisualStateGroup>
+                        </VisualStateManager.VisualStateGroups>
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <Style
+        x:Key="SubtleKeyVisualStyle"
+        BasedOn="{StaticResource DefaultKeyVisualStyle}"
+        TargetType="local:KeyVisual">
+        <Setter Property="Background" Value="{ThemeResource SubtleFillColorTransparentBrush}" />
+        <Setter Property="BorderBrush" Value="{ThemeResource SubtleFillColorTransparentBrush}" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="local:KeyVisual">
+                    <Grid
+                        x:Name="KeyHolder"
+                        MinWidth="{TemplateBinding MinWidth}"
+                        MinHeight="{TemplateBinding MinHeight}"
+                        HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+                        VerticalAlignment="{TemplateBinding VerticalAlignment}"
+                        Background="{TemplateBinding Background}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        CornerRadius="{TemplateBinding CornerRadius}">
+                        <Grid.BackgroundTransition>
+                            <BrushTransition Duration="0:0:0.083" />
+                        </Grid.BackgroundTransition>
+                        <local:KeyCharPresenter
+                            x:Name="KeyPresenter"
+                            Margin="{TemplateBinding Padding}"
+                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                            AutomationProperties.AccessibilityView="Raw"
+                            Content="{TemplateBinding Content}"
+                            FontSize="{TemplateBinding FontSize}"
+                            FontWeight="{TemplateBinding FontWeight}"
+                            Foreground="{TemplateBinding Foreground}" />
+                        <VisualStateManager.VisualStateGroups>
+                            <VisualStateGroup x:Name="CommonStates">
+                                <VisualState x:Name="Normal" />
+                                <VisualState x:Name="Disabled">
+                                    <VisualState.Setters>
+                                        <Setter Target="KeyPresenter.Foreground" Value="{ThemeResource TextFillColorDisabledBrush}" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                                <VisualState x:Name="Invalid">
+                                    <VisualState.Setters>
+                                        <Setter Target="KeyPresenter.Foreground" Value="{ThemeResource SystemFillColorCriticalBrush}" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                            </VisualStateGroup>
+                        </VisualStateManager.VisualStateGroups>
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <Style
+        x:Key="AccentKeyVisualStyle"
+        BasedOn="{StaticResource DefaultKeyVisualStyle}"
+        TargetType="local:KeyVisual">
+        <Setter Property="Background" Value="{ThemeResource AccentFillColorDefaultBrush}" />
+        <Setter Property="Foreground" Value="{ThemeResource TextOnAccentFillColorPrimaryBrush}" />
+        <Setter Property="BorderBrush" Value="{ThemeResource AccentControlElevationBorderBrush}" />
+        <Setter Property="BackgroundSizing" Value="OuterBorderEdge" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="local:KeyVisual">
+                    <Grid
+                        x:Name="KeyHolder"
+                        MinWidth="{TemplateBinding MinWidth}"
+                        MinHeight="{TemplateBinding MinHeight}"
+                        HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+                        VerticalAlignment="{TemplateBinding VerticalAlignment}"
+                        AutomationProperties.AccessibilityView="Raw"
+                        Background="{TemplateBinding Background}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        CornerRadius="{TemplateBinding CornerRadius}">
+                        <Grid.BackgroundTransition>
+                            <BrushTransition Duration="0:0:0.083" />
+                        </Grid.BackgroundTransition>
+                        <local:KeyCharPresenter
+                            x:Name="KeyPresenter"
+                            Margin="{TemplateBinding Padding}"
+                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                            Content="{TemplateBinding Content}"
+                            FontSize="{TemplateBinding FontSize}"
+                            FontWeight="{TemplateBinding FontWeight}"
+                            Foreground="{TemplateBinding Foreground}" />
+                        <VisualStateManager.VisualStateGroups>
+                            <VisualStateGroup x:Name="CommonStates">
+                                <VisualState x:Name="Normal" />
+                                <VisualState x:Name="Disabled">
+                                    <VisualState.Setters>
+                                        <Setter Target="KeyHolder.Background" Value="{ThemeResource AccentButtonBackgroundDisabled}" />
+                                        <Setter Target="KeyHolder.BorderBrush" Value="{ThemeResource AccentButtonBorderBrushDisabled}" />
+                                        <Setter Target="KeyPresenter.Foreground" Value="{ThemeResource AccentButtonForegroundDisabled}" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                                <VisualState x:Name="Invalid">
+                                    <VisualState.Setters>
+                                        <Setter Target="KeyHolder.Background" Value="{ThemeResource SystemFillColorCriticalBackgroundBrush}" />
+                                        <Setter Target="KeyHolder.BorderBrush" Value="{ThemeResource SystemFillColorCriticalBrush}" />
+                                        <Setter Target="KeyHolder.BorderThickness" Value="2" />
+                                        <Setter Target="KeyPresenter.Foreground" Value="{ThemeResource SystemFillColorCriticalBrush}" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                            </VisualStateGroup>
+                        </VisualStateManager.VisualStateGroups>
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+</ResourceDictionary>
diff --git a/src/modules/keyboardmanager/KeyboardManagerEditorUI/Controls/KeyVisual/KeyVisual.xaml.cs b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Controls/KeyVisual/KeyVisual.xaml.cs
new file mode 100644
index 0000000000..258b221107
--- /dev/null
+++ b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Controls/KeyVisual/KeyVisual.xaml.cs
@@ -0,0 +1,168 @@
+// Copyright (c) Microsoft Corporation
+// The Microsoft Corporation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Windows.System;
+
+namespace KeyboardManagerEditorUI.Controls
+{
+    [TemplatePart(Name = KeyPresenter, Type = typeof(KeyCharPresenter))]
+    [TemplateVisualState(Name = NormalState, GroupName = "CommonStates")]
+    [TemplateVisualState(Name = DisabledState, GroupName = "CommonStates")]
+    [TemplateVisualState(Name = InvalidState, GroupName = "CommonStates")]
+    public sealed partial class KeyVisual : Control
+    {
+        private const string KeyPresenter = "KeyPresenter";
+        private const string NormalState = "Normal";
+        private const string DisabledState = "Disabled";
+        private const string InvalidState = "Invalid";
+        private KeyCharPresenter _keyPresenter;
+
+        public object Content
+        {
+            get => (object)GetValue(ContentProperty);
+            set => SetValue(ContentProperty, value);
+        }
+
+        public static readonly DependencyProperty ContentProperty = DependencyProperty.Register(nameof(Content), typeof(object), typeof(KeyVisual), new PropertyMetadata(default(string), OnContentChanged));
+
+        public bool IsInvalid
+        {
+            get => (bool)GetValue(IsInvalidProperty);
+            set => SetValue(IsInvalidProperty, value);
+        }
+
+        public static readonly DependencyProperty IsInvalidProperty = DependencyProperty.Register(nameof(IsInvalid), typeof(bool), typeof(KeyVisual), new PropertyMetadata(false, OnIsInvalidChanged));
+
+        public bool RenderKeyAsGlyph
+        {
+            get => (bool)GetValue(RenderKeyAsGlyphProperty);
+            set => SetValue(RenderKeyAsGlyphProperty, value);
+        }
+
+        public static readonly DependencyProperty RenderKeyAsGlyphProperty = DependencyProperty.Register(nameof(RenderKeyAsGlyph), typeof(bool), typeof(KeyVisual), new PropertyMetadata(false, OnContentChanged));
+
+#pragma warning disable CS8618 // Non-nullable field must contain a non-null value when exiting constructor. Consider adding the 'required' modifier or declaring as nullable.
+        public KeyVisual()
+#pragma warning restore CS8618 // Non-nullable field must contain a non-null value when exiting constructor. Consider adding the 'required' modifier or declaring as nullable.
+        {
+            this.DefaultStyleKey = typeof(KeyVisual);
+        }
+
+        protected override void OnApplyTemplate()
+        {
+            IsEnabledChanged -= KeyVisual_IsEnabledChanged;
+            _keyPresenter = (KeyCharPresenter)this.GetTemplateChild(KeyPresenter);
+            Update();
+            SetVisualStates();
+            IsEnabledChanged += KeyVisual_IsEnabledChanged;
+            base.OnApplyTemplate();
+        }
+
+        private static void OnContentChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            ((KeyVisual)d).SetVisualStates();
+        }
+
+        private static void OnIsInvalidChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            ((KeyVisual)d).SetVisualStates();
+        }
+
+        private void SetVisualStates()
+        {
+            if (this != null)
+            {
+                if (IsInvalid)
+                {
+                    VisualStateManager.GoToState(this, InvalidState, true);
+                }
+                else if (!IsEnabled)
+                {
+                    VisualStateManager.GoToState(this, DisabledState, true);
+                }
+                else
+                {
+                    VisualStateManager.GoToState(this, NormalState, true);
+                }
+            }
+        }
+
+        private void Update()
+        {
+            if (Content == null)
+            {
+                return;
+            }
+
+            if (Content is string)
+            {
+                _keyPresenter.Style = (Style)Application.Current.Resources["DefaultKeyCharPresenterStyle"];
+                return;
+            }
+
+            if (Content is int keyCode)
+            {
+                VirtualKey virtualKey = (VirtualKey)keyCode;
+                switch (virtualKey)
+                {
+                    case VirtualKey.Enter:
+                        SetGlyphOrText("\uE751", virtualKey);
+                        break;
+
+                    case VirtualKey.Back:
+                        SetGlyphOrText("\uE750", virtualKey);
+                        break;
+
+                    case VirtualKey.Shift:
+                    case (VirtualKey)160: // Left Shift
+                    case (VirtualKey)161: // Right Shift
+                        SetGlyphOrText("\uE752", virtualKey);
+                        break;
+
+                    case VirtualKey.Up:
+                        _keyPresenter.Content = "\uE0E4";
+                        break;
+
+                    case VirtualKey.Down:
+                        _keyPresenter.Content = "\uE0E5";
+                        break;
+
+                    case VirtualKey.Left:
+                        _keyPresenter.Content = "\uE0E2";
+                        break;
+
+                    case VirtualKey.Right:
+                        _keyPresenter.Content = "\uE0E3";
+                        break;
+
+                    case VirtualKey.LeftWindows:
+                    case VirtualKey.RightWindows:
+                        _keyPresenter.Style = (Style)Application.Current.Resources["WindowsKeyCharPresenterStyle"];
+                        break;
+                }
+            }
+        }
+
+        private void SetGlyphOrText(string glyph, VirtualKey key)
+        {
+            if (RenderKeyAsGlyph)
+            {
+                _keyPresenter.Content = glyph;
+                _keyPresenter.Style = (Style)Application.Current.Resources["GlyphKeyCharPresenterStyle"];
+            }
+            else
+            {
+                _keyPresenter.Content = key.ToString();
+                _keyPresenter.Style = (Style)Application.Current.Resources["DefaultKeyCharPresenterStyle"];
+            }
+        }
+
+        private void KeyVisual_IsEnabledChanged(object sender, DependencyPropertyChangedEventArgs e)
+        {
+            SetVisualStates();
+        }
+    }
+}
diff --git a/src/modules/keyboardmanager/KeyboardManagerEditorUI/Styles/TextPageInputControl.xaml b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Controls/TextPageInputControl.xaml
similarity index 93%
rename from src/modules/keyboardmanager/KeyboardManagerEditorUI/Styles/TextPageInputControl.xaml
rename to src/modules/keyboardmanager/KeyboardManagerEditorUI/Controls/TextPageInputControl.xaml
index 35c25fdcf2..9f77680a96 100644
--- a/src/modules/keyboardmanager/KeyboardManagerEditorUI/Styles/TextPageInputControl.xaml
+++ b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Controls/TextPageInputControl.xaml
@@ -1,12 +1,12 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <UserControl
-    x:Class="KeyboardManagerEditorUI.Styles.TextPageInputControl"
+    x:Class="KeyboardManagerEditorUI.Controls.TextPageInputControl"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:controls="using:CommunityToolkit.WinUI.UI.Controls"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:helper="using:KeyboardManagerEditorUI.Helpers"
-    xmlns:local="using:KeyboardManagerEditorUI.Styles"
+    xmlns:local="using:KeyboardManagerEditorUI.Controls"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     Loaded="UserControl_Loaded"
     mc:Ignorable="d">
@@ -19,7 +19,6 @@
         <TextBlock
             Margin="0,12,0,8"
             FontWeight="SemiBold"
-            Foreground="{ThemeResource TextFillColorPrimaryBrush}"
             Text="{x:Bind helper:ResourceLoaderInstance.GetString('TextPageInputControl_ShortcutKeys')}" />
 
         <ToggleButton
@@ -37,7 +36,7 @@
                     </ItemsControl.ItemsPanel>
                     <ItemsControl.ItemTemplate>
                         <DataTemplate>
-                            <local:KeyVisual Content="{Binding}" VisualType="SmallOutline" />
+                            <local:KeyVisual Content="{Binding}" Style="{StaticResource DefaultKeyVisualStyle}" />
                         </DataTemplate>
                     </ItemsControl.ItemTemplate>
                 </ItemsControl>
diff --git a/src/modules/keyboardmanager/KeyboardManagerEditorUI/Styles/TextPageInputControl.xaml.cs b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Controls/TextPageInputControl.xaml.cs
similarity index 99%
rename from src/modules/keyboardmanager/KeyboardManagerEditorUI/Styles/TextPageInputControl.xaml.cs
rename to src/modules/keyboardmanager/KeyboardManagerEditorUI/Controls/TextPageInputControl.xaml.cs
index 1d2a28c8d7..7fe19b86d5 100644
--- a/src/modules/keyboardmanager/KeyboardManagerEditorUI/Styles/TextPageInputControl.xaml.cs
+++ b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Controls/TextPageInputControl.xaml.cs
@@ -10,7 +10,7 @@ using Microsoft.UI.Xaml;
 using Microsoft.UI.Xaml.Controls;
 using Windows.System;
 
-namespace KeyboardManagerEditorUI.Styles
+namespace KeyboardManagerEditorUI.Controls
 {
     public sealed partial class TextPageInputControl : UserControl, IKeyboardHookTarget
     {
diff --git a/src/modules/keyboardmanager/KeyboardManagerEditorUI/KeyboardManagerEditorUI.csproj b/src/modules/keyboardmanager/KeyboardManagerEditorUI/KeyboardManagerEditorUI.csproj
index 58c0332b5b..ee67217975 100644
--- a/src/modules/keyboardmanager/KeyboardManagerEditorUI/KeyboardManagerEditorUI.csproj
+++ b/src/modules/keyboardmanager/KeyboardManagerEditorUI/KeyboardManagerEditorUI.csproj
@@ -27,10 +27,6 @@
     <None Remove="Pages\Programs.xaml" />
     <None Remove="Pages\Text.xaml" />
     <None Remove="Pages\URLs.xaml" />
-    <None Remove="Styles\CommonStyle.xaml" />
-    <None Remove="Styles\InputControl.xaml" />
-    <None Remove="Styles\KeyVisual.xaml" />
-    <None Remove="Styles\TextPageInputControl.xaml" />
   </ItemGroup>
 
   <ItemGroup>
@@ -59,12 +55,7 @@
     <ProjectReference Include="..\..\..\common\Common.UI\Common.UI.csproj" />
   </ItemGroup>
   <ItemGroup>
-    <Page Update="Styles\TextPageInputControl.xaml">
-      <Generator>MSBuild:Compile</Generator>
-    </Page>
-  </ItemGroup>
-  <ItemGroup>
-    <Page Update="Styles\CommonStyle.xaml">
+    <Page Update="Styles\Button.xaml">
       <Generator>MSBuild:Compile</Generator>
     </Page>
   </ItemGroup>
@@ -89,14 +80,7 @@
     </Page>
   </ItemGroup>
   <ItemGroup>
-    <Page Update="Styles\InputControl.xaml">
-      <Generator>MSBuild:Compile</Generator>
-    </Page>
-  </ItemGroup>
-  <ItemGroup>
-    <Page Update="Styles\KeyVisual.xaml">
-      <Generator>MSBuild:Compile</Generator>
-    </Page>
+    <Folder Include="Controls\" />
   </ItemGroup>
 
   <!--
diff --git a/src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/Programs.xaml b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/Programs.xaml
index 7f60325107..076ffa0275 100644
--- a/src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/Programs.xaml
+++ b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/Programs.xaml
@@ -3,11 +3,11 @@
     x:Class="KeyboardManagerEditorUI.Pages.Programs"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="using:KeyboardManagerEditorUI.Controls"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:helper="using:KeyboardManagerEditorUI.Helpers"
     xmlns:local="using:KeyboardManagerEditorUI.Pages"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:styles="using:KeyboardManagerEditorUI.Styles"
     mc:Ignorable="d">
 
     <Grid Padding="16">
@@ -31,7 +31,7 @@
             </Button>
             <Grid
                 HorizontalAlignment="Stretch"
-                Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
+                Background="{ThemeResource LayerFillColorDefaultBrush}"
                 BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                 BorderThickness="1"
                 CornerRadius="{StaticResource OverlayCornerRadius}">
@@ -103,10 +103,10 @@
                                     </ItemsControl.ItemsPanel>
                                     <ItemsControl.ItemTemplate>
                                         <DataTemplate>
-                                            <styles:KeyVisual
+                                            <controls:KeyVisual
                                                 HorizontalAlignment="Left"
                                                 Content="{Binding}"
-                                                VisualType="SmallOutline" />
+                                                Style="{StaticResource DefaultKeyVisualStyle}" />
                                         </DataTemplate>
                                     </ItemsControl.ItemTemplate>
                                 </ItemsControl>
@@ -165,8 +165,8 @@
                     Style="{StaticResource CustomShortcutToggleButtonStyle}">
                     <ToggleButton.Content>
                         <StackPanel Orientation="Horizontal" Spacing="8">
-                            <styles:KeyVisual Content="{x:Bind helper:ResourceLoaderInstance.GetString('ProgramsPage_ExampleKey1')}" VisualType="SmallOutline" />
-                            <styles:KeyVisual Content="{x:Bind helper:ResourceLoaderInstance.GetString('ProgramsPage_ExampleKey2')}" VisualType="SmallOutline" />
+                            <controls:KeyVisual Content="{x:Bind helper:ResourceLoaderInstance.GetString('ProgramsPage_ExampleKey1')}" Style="{StaticResource AccentKeyVisualStyle}" />
+                            <controls:KeyVisual Content="{x:Bind helper:ResourceLoaderInstance.GetString('ProgramsPage_ExampleKey2')}" Style="{StaticResource AccentKeyVisualStyle}" />
                         </StackPanel>
                     </ToggleButton.Content>
                 </ToggleButton>
diff --git a/src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/Remappings.xaml b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/Remappings.xaml
index 5d29d0637e..715fce2f3d 100644
--- a/src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/Remappings.xaml
+++ b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/Remappings.xaml
@@ -3,12 +3,12 @@
     x:Class="KeyboardManagerEditorUI.Pages.Remappings"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:controls="using:CommunityToolkit.WinUI.UI.Controls"
+    xmlns:controls="using:KeyboardManagerEditorUI.Controls"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:helper="using:KeyboardManagerEditorUI.Helpers"
     xmlns:local="using:KeyboardManagerEditorUI.Pages"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:styles="using:KeyboardManagerEditorUI.Styles"
+    xmlns:tkcontrols="using:CommunityToolkit.WinUI.UI.Controls"
     mc:Ignorable="d">
 
     <Grid Padding="16">
@@ -33,7 +33,7 @@
             </Button>
             <Grid
                 HorizontalAlignment="Stretch"
-                Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
+                Background="{ThemeResource LayerFillColorDefaultBrush}"
                 BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                 BorderThickness="1"
                 CornerRadius="{StaticResource OverlayCornerRadius}">
@@ -114,7 +114,7 @@
                                     ItemsSource="{x:Bind OriginalKeys}">
                                     <ItemsControl.ItemsPanel>
                                         <ItemsPanelTemplate>
-                                            <controls:WrapPanel
+                                            <tkcontrols:WrapPanel
                                                 MaxWidth="230"
                                                 HorizontalSpacing="4"
                                                 Orientation="Horizontal" />
@@ -122,10 +122,10 @@
                                     </ItemsControl.ItemsPanel>
                                     <ItemsControl.ItemTemplate>
                                         <DataTemplate>
-                                            <styles:KeyVisual
+                                            <controls:KeyVisual
                                                 HorizontalAlignment="Left"
                                                 Content="{Binding}"
-                                                VisualType="SmallOutline" />
+                                                Style="{StaticResource DefaultKeyVisualStyle}" />
                                         </DataTemplate>
                                     </ItemsControl.ItemTemplate>
                                 </ItemsControl>
@@ -137,7 +137,7 @@
                                     ItemsSource="{x:Bind RemappedKeys}">
                                     <ItemsControl.ItemsPanel>
                                         <ItemsPanelTemplate>
-                                            <controls:WrapPanel
+                                            <tkcontrols:WrapPanel
                                                 MaxWidth="230"
                                                 HorizontalSpacing="4"
                                                 Orientation="Horizontal" />
@@ -145,10 +145,10 @@
                                     </ItemsControl.ItemsPanel>
                                     <ItemsControl.ItemTemplate>
                                         <DataTemplate>
-                                            <styles:KeyVisual
+                                            <controls:KeyVisual
                                                 HorizontalAlignment="Left"
                                                 Content="{Binding}"
-                                                VisualType="Small" />
+                                                Style="{StaticResource AccentKeyVisualStyle}" />
                                         </DataTemplate>
                                     </ItemsControl.ItemTemplate>
                                 </ItemsControl>
@@ -191,7 +191,7 @@
             PrimaryButtonText="{x:Bind helper:ResourceLoaderInstance.GetString('RemappingsPage_DialogPrimary')}"
             SecondaryButtonText="{x:Bind helper:ResourceLoaderInstance.GetString('RemappingsPage_DialogSecondary')}">
             <Grid>
-                <styles:InputControl x:Name="RemappingControl" />
+                <controls:InputControl x:Name="RemappingControl" />
             </Grid>
         </ContentDialog>
         <TeachingTip
diff --git a/src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/Text.xaml b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/Text.xaml
index 858ad25396..2e6fb00cdb 100644
--- a/src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/Text.xaml
+++ b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/Text.xaml
@@ -3,12 +3,12 @@
     x:Class="KeyboardManagerEditorUI.Pages.Text"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:controls="using:CommunityToolkit.WinUI.UI.Controls"
+    xmlns:controls="using:KeyboardManagerEditorUI.Controls"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:helper="using:KeyboardManagerEditorUI.Helpers"
     xmlns:local="using:KeyboardManagerEditorUI.Pages"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:styles="using:KeyboardManagerEditorUI.Styles"
+    xmlns:tkcontrols="using:CommunityToolkit.WinUI.UI.Controls"
     mc:Ignorable="d">
 
     <Grid Padding="16">
@@ -32,7 +32,7 @@
             </Button>
             <Grid
                 HorizontalAlignment="Stretch"
-                Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
+                Background="{ThemeResource LayerFillColorDefaultBrush}"
                 BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                 BorderThickness="1"
                 CornerRadius="{StaticResource OverlayCornerRadius}">
@@ -116,7 +116,7 @@
                                     ItemsSource="{x:Bind Keys}">
                                     <ItemsControl.ItemsPanel>
                                         <ItemsPanelTemplate>
-                                            <controls:WrapPanel
+                                            <tkcontrols:WrapPanel
                                                 MaxWidth="230"
                                                 HorizontalSpacing="4"
                                                 Orientation="Horizontal" />
@@ -124,10 +124,10 @@
                                     </ItemsControl.ItemsPanel>
                                     <ItemsControl.ItemTemplate>
                                         <DataTemplate>
-                                            <styles:KeyVisual
+                                            <controls:KeyVisual
                                                 HorizontalAlignment="Left"
                                                 Content="{Binding}"
-                                                VisualType="SmallOutline" />
+                                                Style="{StaticResource DefaultKeyVisualStyle}" />
                                         </DataTemplate>
                                     </ItemsControl.ItemTemplate>
                                 </ItemsControl>
@@ -190,7 +190,7 @@
             PrimaryButtonText="{x:Bind helper:ResourceLoaderInstance.GetString('TextPage_KeyDialogPrimary')}"
             SecondaryButtonText="{x:Bind helper:ResourceLoaderInstance.GetString('TextPage_KeyDialogSecondary')}">
             <Grid>
-                <styles:TextPageInputControl x:Name="TextInputControl" />
+                <controls:TextPageInputControl x:Name="TextInputControl" />
             </Grid>
         </ContentDialog>
 
diff --git a/src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/URLs.xaml b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/URLs.xaml
index c055195f28..12b0d7218e 100644
--- a/src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/URLs.xaml
+++ b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/URLs.xaml
@@ -3,11 +3,11 @@
     x:Class="KeyboardManagerEditorUI.Pages.URLs"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="using:KeyboardManagerEditorUI.Controls"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:helper="using:KeyboardManagerEditorUI.Helpers"
     xmlns:local="using:KeyboardManagerEditorUI.Pages"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:styles="using:KeyboardManagerEditorUI.Styles"
     mc:Ignorable="d">
 
     <Grid Padding="16">
@@ -32,7 +32,7 @@
 
             <Grid
                 HorizontalAlignment="Stretch"
-                Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
+                Background="{ThemeResource LayerFillColorDefaultBrush}"
                 BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                 BorderThickness="1"
                 CornerRadius="{ThemeResource OverlayCornerRadius}">
@@ -104,10 +104,10 @@
                                     </ItemsControl.ItemsPanel>
                                     <ItemsControl.ItemTemplate>
                                         <DataTemplate>
-                                            <styles:KeyVisual
+                                            <controls:KeyVisual
                                                 HorizontalAlignment="Left"
                                                 Content="{Binding}"
-                                                VisualType="SmallOutline" />
+                                                Style="{StaticResource DefaultKeyVisualStyle}" />
                                         </DataTemplate>
                                     </ItemsControl.ItemTemplate>
                                 </ItemsControl>
@@ -150,8 +150,8 @@
                     Style="{StaticResource CustomShortcutToggleButtonStyle}">
                     <ToggleButton.Content>
                         <StackPanel Orientation="Horizontal" Spacing="8">
-                            <styles:KeyVisual Content="{x:Bind helper:ResourceLoaderInstance.GetString('UrlPage_WinLeft')}" VisualType="SmallOutline" />
-                            <styles:KeyVisual Content="{x:Bind helper:ResourceLoaderInstance.GetString('UrlPage_B')}" VisualType="SmallOutline" />
+                            <controls:KeyVisual Content="{x:Bind helper:ResourceLoaderInstance.GetString('UrlPage_WinLeft')}" Style="{StaticResource DefaultKeyVisualStyle}" />
+                            <controls:KeyVisual Content="{x:Bind helper:ResourceLoaderInstance.GetString('UrlPage_B')}" Style="{StaticResource DefaultKeyVisualStyle}" />
                         </StackPanel>
                     </ToggleButton.Content>
                 </ToggleButton>
diff --git a/src/modules/keyboardmanager/KeyboardManagerEditorUI/Styles/CommonStyle.xaml b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Styles/Button.xaml
similarity index 99%
rename from src/modules/keyboardmanager/KeyboardManagerEditorUI/Styles/CommonStyle.xaml
rename to src/modules/keyboardmanager/KeyboardManagerEditorUI/Styles/Button.xaml
index 0cc49d716b..c6cb7a1ba0 100644
--- a/src/modules/keyboardmanager/KeyboardManagerEditorUI/Styles/CommonStyle.xaml
+++ b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Styles/Button.xaml
@@ -4,8 +4,6 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:local="using:KeyboardManagerEditorUI.Styles">
 
-    <x:Double x:Key="ContentDialogMaxWidth">960</x:Double>
-
     <Style x:Key="CustomShortcutToggleButtonStyle" TargetType="ToggleButton">
         <Setter Property="Background" Value="{ThemeResource ToggleButtonBackground}" />
         <Setter Property="Foreground" Value="{ThemeResource ToggleButtonForeground}" />
@@ -39,7 +37,6 @@
                         <VisualStateManager.VisualStateGroups>
                             <VisualStateGroup x:Name="CommonStates">
                                 <VisualState x:Name="Normal" />
-
                                 <VisualState x:Name="PointerOver">
                                     <Storyboard>
                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
diff --git a/src/modules/keyboardmanager/KeyboardManagerEditorUI/Styles/KeyVisual.cs b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Styles/KeyVisual.cs
deleted file mode 100644
index 058377d1ce..0000000000
--- a/src/modules/keyboardmanager/KeyboardManagerEditorUI/Styles/KeyVisual.cs
+++ /dev/null
@@ -1,198 +0,0 @@
-// Copyright (c) Microsoft Corporation
-// 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.Linq;
-using System.Text;
-using System.Threading.Tasks;
-using Microsoft.UI.Xaml;
-using Microsoft.UI.Xaml.Controls;
-using Microsoft.UI.Xaml.Data;
-using Microsoft.UI.Xaml.Markup;
-using Microsoft.UI.Xaml.Media;
-using Windows.System;
-
-namespace KeyboardManagerEditorUI.Styles
-{
-    [TemplatePart(Name = KeyPresenter, Type = typeof(ContentPresenter))]
-    [TemplateVisualState(Name = "Normal", GroupName = "CommonStates")]
-    [TemplateVisualState(Name = "Disabled", GroupName = "CommonStates")]
-    [TemplateVisualState(Name = "Default", GroupName = "StateStates")]
-    [TemplateVisualState(Name = "Error", GroupName = "StateStates")]
-    public sealed partial class KeyVisual : Control
-    {
-        private const string KeyPresenter = "KeyPresenter";
-        private KeyVisual? _keyVisual;
-        private ContentPresenter? _keyPresenter;
-
-        public object Content
-        {
-            get => (object)GetValue(ContentProperty);
-            set => SetValue(ContentProperty, value);
-        }
-
-        public static readonly DependencyProperty ContentProperty = DependencyProperty.Register("Content", typeof(object), typeof(KeyVisual), new PropertyMetadata(default(string), OnContentChanged));
-
-        public VisualType VisualType
-        {
-            get => (VisualType)GetValue(VisualTypeProperty);
-            set => SetValue(VisualTypeProperty, value);
-        }
-
-        public static readonly DependencyProperty VisualTypeProperty = DependencyProperty.Register("VisualType", typeof(VisualType), typeof(KeyVisual), new PropertyMetadata(default(VisualType), OnSizeChanged));
-
-        public bool IsError
-        {
-            get => (bool)GetValue(IsErrorProperty);
-            set => SetValue(IsErrorProperty, value);
-        }
-
-        public static readonly DependencyProperty IsErrorProperty = DependencyProperty.Register("IsError", typeof(bool), typeof(KeyVisual), new PropertyMetadata(false, OnIsErrorChanged));
-
-        public KeyVisual()
-        {
-            this.DefaultStyleKey = typeof(KeyVisual);
-            this.Style = GetStyleSize("TextKeyVisualStyle");
-        }
-
-        protected override void OnApplyTemplate()
-        {
-            IsEnabledChanged -= KeyVisual_IsEnabledChanged;
-            _keyVisual = (KeyVisual)this;
-            _keyPresenter = (ContentPresenter)_keyVisual.GetTemplateChild(KeyPresenter);
-            Update();
-            SetEnabledState();
-            SetErrorState();
-            IsEnabledChanged += KeyVisual_IsEnabledChanged;
-            base.OnApplyTemplate();
-        }
-
-        private static void OnContentChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
-        {
-            ((KeyVisual)d).Update();
-        }
-
-        private static void OnSizeChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
-        {
-            ((KeyVisual)d).Update();
-        }
-
-        private static void OnIsErrorChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
-        {
-            ((KeyVisual)d).SetErrorState();
-        }
-
-        private void Update()
-        {
-            if (_keyVisual == null || _keyVisual._keyPresenter == null)
-            {
-                return;
-            }
-
-            if (_keyVisual.Content != null)
-            {
-                if (_keyVisual.Content.GetType() == typeof(string))
-                {
-                    _keyVisual.Style = GetStyleSize("TextKeyVisualStyle");
-                    _keyVisual._keyPresenter.Content = _keyVisual.Content;
-                }
-                else
-                {
-                    _keyVisual.Style = GetStyleSize("IconKeyVisualStyle");
-
-                    switch ((int)_keyVisual.Content)
-                    {
-                        /* We can enable other glyphs in the future
-                        case 13: // The Enter key or button.
-                            _keyVisual._keyPresenter.Content = "\uE751"; break;
-
-                        case 8: // The Back key or button.
-                            _keyVisual._keyPresenter.Content = "\uE750"; break;
-
-                        case 16: // The right Shift key or button.
-                        case 160: // The left Shift key or button.
-                        case 161: // The Shift key or button.
-                            _keyVisual._keyPresenter.Content = "\uE752"; break; */
-
-                        case 38: _keyVisual._keyPresenter.Content = "\uE0E4"; break; // The Up Arrow key or button.
-                        case 40: _keyVisual._keyPresenter.Content = "\uE0E5"; break; // The Down Arrow key or button.
-                        case 37: _keyVisual._keyPresenter.Content = "\uE0E2"; break; // The Left Arrow key or button.
-                        case 39: _keyVisual._keyPresenter.Content = "\uE0E3"; break; // The Right Arrow key or button.
-
-                        case 91: // The left Windows key
-                        case 92: // The right Windows key
-                            PathIcon winIcon = (PathIcon)XamlReader.Load(@"<PathIcon xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation"" Data=""M9,17V9h8v8ZM0,17V9H8v8ZM9,8V0h8V8ZM0,8V0H8V8Z"" />") as PathIcon;
-                            Viewbox winIconContainer = new Viewbox();
-                            winIconContainer.Child = winIcon;
-                            winIconContainer.HorizontalAlignment = HorizontalAlignment.Center;
-                            winIconContainer.VerticalAlignment = VerticalAlignment.Center;
-
-                            double iconDimensions = GetIconSize();
-                            winIconContainer.Height = iconDimensions;
-                            winIconContainer.Width = iconDimensions;
-                            _keyVisual._keyPresenter.Content = winIconContainer;
-                            break;
-                        default: _keyVisual._keyPresenter.Content = ((VirtualKey)_keyVisual.Content).ToString(); break;
-                    }
-                }
-            }
-        }
-
-        public Style GetStyleSize(string styleName)
-        {
-            if (VisualType == VisualType.Small)
-            {
-                return (Style)App.Current.Resources["Small" + styleName];
-            }
-            else if (VisualType == VisualType.SmallOutline)
-            {
-                return (Style)App.Current.Resources["SmallOutline" + styleName];
-            }
-            else if (VisualType == VisualType.LargeOutline)
-            {
-                return (Style)App.Current.Resources["LargeOutline" + styleName];
-            }
-            else
-            {
-                return (Style)App.Current.Resources["Default" + styleName];
-            }
-        }
-
-        public double GetIconSize()
-        {
-            if (VisualType == VisualType.Small || VisualType == VisualType.SmallOutline)
-            {
-                return (double)App.Current.Resources["SmallIconSize"];
-            }
-            else
-            {
-                return (double)App.Current.Resources["DefaultIconSize"];
-            }
-        }
-
-        private void KeyVisual_IsEnabledChanged(object sender, DependencyPropertyChangedEventArgs e)
-        {
-            SetEnabledState();
-        }
-
-        private void SetErrorState()
-        {
-            VisualStateManager.GoToState(this, IsError ? "Error" : "Default", true);
-        }
-
-        private void SetEnabledState()
-        {
-            VisualStateManager.GoToState(this, IsEnabled ? "Normal" : "Disabled", true);
-        }
-    }
-
-    public enum VisualType
-    {
-        Small,
-        SmallOutline,
-        Large,
-        LargeOutline,
-    }
-}
diff --git a/src/modules/keyboardmanager/KeyboardManagerEditorUI/Styles/KeyVisual.xaml b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Styles/KeyVisual.xaml
deleted file mode 100644
index 5bb67875cc..0000000000
--- a/src/modules/keyboardmanager/KeyboardManagerEditorUI/Styles/KeyVisual.xaml
+++ /dev/null
@@ -1,156 +0,0 @@
-<?xml version="1.0" encoding="utf-8" ?>
-<ResourceDictionary
-    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:local="using:KeyboardManagerEditorUI.Styles">
-
-    <x:Double x:Key="DefaultIconSize">16</x:Double>
-    <x:Double x:Key="SmallIconSize">12</x:Double>
-    <Style x:Key="DefaultTextKeyVisualStyle" TargetType="local:KeyVisual">
-        <Setter Property="MinWidth" Value="32" />
-        <Setter Property="MinHeight" Value="32" />
-        <Setter Property="Background" Value="{ThemeResource AccentButtonBackgroundPressed}" />
-        <Setter Property="Foreground" Value="{ThemeResource TextOnAccentFillColorPrimaryBrush}" />
-        <Setter Property="BorderBrush" Value="{ThemeResource ButtonBorderBrush}" />
-        <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}" />
-        <Setter Property="Padding" Value="4,0,0,4" />
-        <Setter Property="FontWeight" Value="Normal" />
-        <Setter Property="HorizontalAlignment" Value="Center" />
-        <Setter Property="HorizontalContentAlignment" Value="Center" />
-        <Setter Property="FontSize" Value="12" />
-        <Setter Property="Template">
-            <Setter.Value>
-                <ControlTemplate TargetType="local:KeyVisual">
-                    <Grid>
-                        <Grid Height="{TemplateBinding MinHeight}">
-                            <Border
-                                BorderBrush="{TemplateBinding BorderBrush}"
-                                BorderThickness="{TemplateBinding BorderThickness}"
-                                CornerRadius="4" />
-                            <Rectangle
-                                x:Name="ContentHolder"
-                                Fill="{TemplateBinding Background}"
-                                RadiusX="4"
-                                RadiusY="4" />
-                            <ContentPresenter
-                                x:Name="KeyPresenter"
-                                Margin="{TemplateBinding Padding}"
-                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                VerticalAlignment="Center"
-                                Content="{TemplateBinding Content}"
-                                FontSize="12"
-                                FontWeight="Normal"
-                                Foreground="{TemplateBinding Foreground}" />
-                        </Grid>
-                        <VisualStateManager.VisualStateGroups>
-                            <VisualStateGroup x:Name="CommonStates">
-                                <VisualState x:Name="Normal" />
-                                <VisualState x:Name="Disabled">
-                                    <VisualState.Setters>
-                                        <Setter Target="ContentHolder.Fill" Value="{ThemeResource AccentButtonBackgroundDisabled}" />
-                                        <Setter Target="KeyPresenter.Foreground" Value="{ThemeResource AccentButtonForegroundDisabled}" />
-                                        <Setter Target="ContentHolder.Stroke" Value="{ThemeResource AccentButtonBorderBrushDisabled}" />
-                                        <!--<Setter Target="ContentHolder.StrokeThickness" Value="{TemplateBinding BorderThickness}" />-->
-                                    </VisualState.Setters>
-                                </VisualState>
-                            </VisualStateGroup>
-                            <VisualStateGroup x:Name="StateStates">
-                                <VisualState x:Name="Default" />
-                                <VisualState x:Name="Error">
-                                    <VisualState.Setters>
-                                        <Setter Target="ContentHolder.Fill" Value="{ThemeResource InfoBarErrorSeverityBackgroundBrush}" />
-                                        <Setter Target="KeyPresenter.Foreground" Value="{ThemeResource InfoBarErrorSeverityIconBackground}" />
-                                        <Setter Target="ContentHolder.Stroke" Value="{ThemeResource InfoBarErrorSeverityIconBackground}" />
-                                        <Setter Target="ContentHolder.StrokeThickness" Value="2" />
-                                    </VisualState.Setters>
-                                </VisualState>
-                            </VisualStateGroup>
-                        </VisualStateManager.VisualStateGroups>
-                    </Grid>
-                </ControlTemplate>
-            </Setter.Value>
-        </Setter>
-    </Style>
-
-    <Style
-        x:Key="SmallTextKeyVisualStyle"
-        BasedOn="{StaticResource DefaultTextKeyVisualStyle}"
-        TargetType="local:KeyVisual">
-        <Setter Property="MinWidth" Value="40" />
-        <Setter Property="Height" Value="36" />
-        <Setter Property="FontWeight" Value="SemiBold" />
-        <Setter Property="Padding" Value="12,0,12,2" />
-        <Setter Property="FontSize" Value="14" />
-        <Setter Property="HorizontalContentAlignment" Value="Center" />
-    </Style>
-
-    <Style
-        x:Key="LargeOutlineTextKeyVisualStyle"
-        BasedOn="{StaticResource DefaultTextKeyVisualStyle}"
-        TargetType="local:KeyVisual">
-        <Setter Property="Background" Value="{ThemeResource ControlFillColorDefaultBrush}" />
-        <Setter Property="Foreground" Value="{ThemeResource ButtonForeground}" />
-        <Setter Property="BorderBrush" Value="{ThemeResource ControlStrongStrokeColorDefaultBrush}" />
-        <Setter Property="FontWeight" Value="SemiBold" />
-        <Setter Property="HorizontalContentAlignment" Value="Center" />
-    </Style>
-
-    <Style
-        x:Key="SmallOutlineTextKeyVisualStyle"
-        BasedOn="{StaticResource DefaultTextKeyVisualStyle}"
-        TargetType="local:KeyVisual">
-        <Setter Property="MinWidth" Value="40" />
-        <Setter Property="Background" Value="{ThemeResource ControlFillColorDefaultBrush}" />
-        <Setter Property="Foreground" Value="{ThemeResource TextFillColorSecondaryBrush}" />
-        <Setter Property="BorderBrush" Value="{ThemeResource ControlStrongStrokeColorDefaultBrush}" />
-        <Setter Property="Height" Value="36" />
-        <Setter Property="BorderThickness" Value="1,1,1,1" />
-        <Setter Property="FontWeight" Value="SemiBold" />
-        <Setter Property="Padding" Value="8,0,8,2" />
-        <Setter Property="FontSize" Value="13" />
-        <Setter Property="HorizontalContentAlignment" Value="Center" />
-    </Style>
-
-
-    <Style
-        x:Key="DefaultIconKeyVisualStyle"
-        BasedOn="{StaticResource DefaultTextKeyVisualStyle}"
-        TargetType="local:KeyVisual">
-        <Setter Property="MinWidth" Value="56" />
-        <Setter Property="MinHeight" Value="48" />
-        <Setter Property="FontFamily" Value="{ThemeResource SymbolThemeFontFamily}" />
-        <Setter Property="Padding" Value="16,8,16,8" />
-        <Setter Property="FontSize" Value="14" />
-        <Setter Property="HorizontalContentAlignment" Value="Center" />
-    </Style>
-
-    <Style
-        x:Key="SmallIconKeyVisualStyle"
-        BasedOn="{StaticResource DefaultTextKeyVisualStyle}"
-        TargetType="local:KeyVisual">
-        <Setter Property="MinWidth" Value="40" />
-        <Setter Property="Height" Value="36" />
-        <Setter Property="FontFamily" Value="{ThemeResource SymbolThemeFontFamily}" />
-        <Setter Property="FontWeight" Value="Normal" />
-        <Setter Property="Padding" Value="0" />
-        <Setter Property="FontSize" Value="10" />
-        <Setter Property="HorizontalContentAlignment" Value="Center" />
-    </Style>
-
-    <Style
-        x:Key="SmallOutlineIconKeyVisualStyle"
-        BasedOn="{StaticResource DefaultTextKeyVisualStyle}"
-        TargetType="local:KeyVisual">
-        <Setter Property="MinWidth" Value="40" />
-        <Setter Property="Background" Value="{ThemeResource ButtonBackground}" />
-        <Setter Property="Foreground" Value="{ThemeResource ButtonForeground}" />
-        <Setter Property="BorderBrush" Value="{ThemeResource ButtonBorderBrush}" />
-        <Setter Property="FontFamily" Value="{ThemeResource SymbolThemeFontFamily}" />
-        <Setter Property="Height" Value="36" />
-        <Setter Property="FontWeight" Value="SemiBold" />
-        <Setter Property="Padding" Value="0" />
-        <Setter Property="FontSize" Value="9" />
-        <Setter Property="HorizontalContentAlignment" Value="Center" />
-    </Style>
-
-</ResourceDictionary>