From f7ed043446cef95063d1e5d5afeca04d31efcfeb Mon Sep 17 00:00:00 2001
From: Hao Liu <liuhao3418@gmail.com>
Date: Tue, 4 Mar 2025 19:09:28 +0800
Subject: [PATCH] [FHL] New static UX for Keyboard Manager Editor (#37747)

* Set up static new UX for Keyboard Manager Editor

* Improve the formatting and performance

* fix spelling
---
 .../KeyboardManagerEditorUI/App.xaml          |   3 +-
 .../KeyboardManagerEditorUI/App.xaml.cs       |  47 +++-
 .../Assets/FluentIconsKeyboardManager.png     | Bin 0 -> 3386 bytes
 .../KeyboardManagerEditorUI/Assets/kbm.jpg    | Bin 0 -> 5034 bytes
 .../Helpers/Remapping.cs                      |  25 ++
 .../Helpers/URLShortcut.cs                    |  19 ++
 .../KeyboardManagerEditorUI.csproj            |  56 +++++
 .../KeyboardManagerEditorUI/MainWindow.xaml   | 139 +++++------
 .../MainWindow.xaml.cs                        |  75 +-----
 .../Pages/ExistingUI.xaml                     |  96 ++++++++
 .../Pages/ExistingUI.xaml.cs                  | 102 ++++++++
 .../Pages/Programs.xaml                       | 230 ++++++++++++++++++
 .../Pages/Programs.xaml.cs                    |  46 ++++
 .../Pages/Shortcuts.xaml                      | 191 +++++++++++++++
 .../Pages/Shortcuts.xaml.cs                   |  57 +++++
 .../KeyboardManagerEditorUI/Pages/Text.xaml   | 180 ++++++++++++++
 .../Pages/Text.xaml.cs                        |  53 ++++
 .../KeyboardManagerEditorUI/Pages/URLs.xaml   | 172 +++++++++++++
 .../Pages/URLs.xaml.cs                        |  54 ++++
 .../Styles/CommonStyle.xaml                   | 203 ++++++++++++++++
 .../Styles/InputControl.xaml                  | 104 ++++++++
 .../Styles/InputControl.xaml.cs               |  80 ++++++
 .../Styles/KeyVisual.cs                       | 198 +++++++++++++++
 .../Styles/KeyVisual.xaml                     | 156 ++++++++++++
 24 files changed, 2136 insertions(+), 150 deletions(-)
 create mode 100644 src/modules/keyboardmanager/KeyboardManagerEditorUI/Assets/FluentIconsKeyboardManager.png
 create mode 100644 src/modules/keyboardmanager/KeyboardManagerEditorUI/Assets/kbm.jpg
 create mode 100644 src/modules/keyboardmanager/KeyboardManagerEditorUI/Helpers/Remapping.cs
 create mode 100644 src/modules/keyboardmanager/KeyboardManagerEditorUI/Helpers/URLShortcut.cs
 create mode 100644 src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/ExistingUI.xaml
 create mode 100644 src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/ExistingUI.xaml.cs
 create mode 100644 src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/Programs.xaml
 create mode 100644 src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/Programs.xaml.cs
 create mode 100644 src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/Shortcuts.xaml
 create mode 100644 src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/Shortcuts.xaml.cs
 create mode 100644 src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/Text.xaml
 create mode 100644 src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/Text.xaml.cs
 create mode 100644 src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/URLs.xaml
 create mode 100644 src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/URLs.xaml.cs
 create mode 100644 src/modules/keyboardmanager/KeyboardManagerEditorUI/Styles/CommonStyle.xaml
 create mode 100644 src/modules/keyboardmanager/KeyboardManagerEditorUI/Styles/InputControl.xaml
 create mode 100644 src/modules/keyboardmanager/KeyboardManagerEditorUI/Styles/InputControl.xaml.cs
 create mode 100644 src/modules/keyboardmanager/KeyboardManagerEditorUI/Styles/KeyVisual.cs
 create mode 100644 src/modules/keyboardmanager/KeyboardManagerEditorUI/Styles/KeyVisual.xaml

diff --git a/src/modules/keyboardmanager/KeyboardManagerEditorUI/App.xaml b/src/modules/keyboardmanager/KeyboardManagerEditorUI/App.xaml
index 21a8eb12e1..b5119bcf57 100644
--- a/src/modules/keyboardmanager/KeyboardManagerEditorUI/App.xaml
+++ b/src/modules/keyboardmanager/KeyboardManagerEditorUI/App.xaml
@@ -8,7 +8,8 @@
         <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>
                 <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
-                <!--  Other merged dictionaries here  -->
+                <ResourceDictionary Source="/Styles/KeyVisual.xaml" />
+                <ResourceDictionary Source="/Styles/CommonStyle.xaml" />
             </ResourceDictionary.MergedDictionaries>
             <!--  Other app resources here  -->
         </ResourceDictionary>
diff --git a/src/modules/keyboardmanager/KeyboardManagerEditorUI/App.xaml.cs b/src/modules/keyboardmanager/KeyboardManagerEditorUI/App.xaml.cs
index 88b7f7996c..d013209292 100644
--- a/src/modules/keyboardmanager/KeyboardManagerEditorUI/App.xaml.cs
+++ b/src/modules/keyboardmanager/KeyboardManagerEditorUI/App.xaml.cs
@@ -7,7 +7,10 @@ using System.Collections.Generic;
 using System.IO;
 using System.Linq;
 using System.Runtime.InteropServices.WindowsRuntime;
+using System.Threading.Tasks;
 using ManagedCommon;
+using Microsoft.UI;
+using Microsoft.UI.Dispatching;
 using Microsoft.UI.Xaml;
 using Microsoft.UI.Xaml.Controls;
 using Microsoft.UI.Xaml.Controls.Primitives;
@@ -35,8 +38,14 @@ namespace KeyboardManagerEditorUI
         public App()
         {
             this.InitializeComponent();
-            Logger.InitializeLogger("\\Keyboard Manager\\WinUI3Editor\\Logs");
-            Logger.LogInfo("keyboard-manager WinUI3 editor logger is initialized");
+
+            Task.Run(() =>
+            {
+                Logger.InitializeLogger("\\Keyboard Manager\\WinUI3Editor\\Logs");
+                Logger.LogInfo("keyboard-manager WinUI3 editor logger is initialized");
+            });
+
+            UnhandledException += App_UnhandledException;
         }
 
         /// <summary>
@@ -46,10 +55,42 @@ namespace KeyboardManagerEditorUI
         protected override void OnLaunched(Microsoft.UI.Xaml.LaunchActivatedEventArgs args)
         {
             window = new MainWindow();
-            window.Activate();
+
+            var appWindow = window.AppWindow;
+            var titleBar = appWindow.TitleBar;
+
+            titleBar.ExtendsContentIntoTitleBar = true;
+            titleBar.BackgroundColor = Colors.Transparent;
+
+            var windowSize = new Windows.Graphics.SizeInt32(960, 600);
+            appWindow.Resize(windowSize);
+
+            Task.Run(() =>
+            {
+                App.Current.Resources.MergedDictionaries.Add(new ResourceDictionary()
+                {
+                    Source = new Uri("ms-appx:///Styles/CommonStyle.xaml"),
+                });
+            }).ContinueWith(_ =>
+            {
+                window.DispatcherQueue.TryEnqueue(() =>
+                {
+                    window.Activate();
+                    window.DispatcherQueue.TryEnqueue(DispatcherQueuePriority.Low, () =>
+                    {
+                        (window.Content as FrameworkElement)?.UpdateLayout();
+                    });
+                });
+            });
+
             Logger.LogInfo("keyboard-manager WinUI3 editor window is launched");
         }
 
+        private void App_UnhandledException(object sender, Microsoft.UI.Xaml.UnhandledExceptionEventArgs e)
+        {
+            Logger.LogError("Unhandled exception", e.Exception);
+        }
+
         private Window? window;
     }
 }
diff --git a/src/modules/keyboardmanager/KeyboardManagerEditorUI/Assets/FluentIconsKeyboardManager.png b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Assets/FluentIconsKeyboardManager.png
new file mode 100644
index 0000000000000000000000000000000000000000..2d6db29ff15ee3334b29e74572c65701394599e1
GIT binary patch
literal 3386
zcmbVP2~-o;8V(3HO4&4h0*b_d8Z051EI<N?1P~}j35#rkhRGxZNG2x1B&c8!5hH>k
zFCvSw6jTIM5Ue1rR>WE@P}ER2L{KBr3KUmVcoRiV`;J{s=bV|jbMN<m|NfsdI|5hw
z8qc(vi9(@_{r$Xykhh)gMo&kc_fYxy$ZLk!FG7k!8O_$+dZ>aT3lz$*Ul0;53umoh
zfUwY!!-ZoZM}<&~piw9{4~3WmCO|T5EW{Ux+;KzA-{P<Wt~)M_#v-xAUQnFCFIfTw
zC$9_vlM_HX7w54Q>!x5J1VTv0!77A_A}K@Rj(f+;K-Ri#A`bfwB1>?`dFm8m!&!k?
zFIWO$og7I7kVK+ko#~E%6O~3MIbg{oGKmO~i6lA!02nl929=7Pyl{v%375wR@?Jiv
z3;A-##mQu129YS2%N^wuM_9rq0(3f^NFo!-WCDU9NR=WPM?nxtZ9g!0LsC#85X%Ix
z2&-e{#KK83cN}8rdl!V_DO!<qGE7LohzgFF2sn~-F1-VC!6}?LNs{<ZITs{CiI5Ny
z$)pGtn8J$VU>Pipga3qj>i7=|kkGPNQ#w9si%>YFLMrpwfVeRkkdLCJAxbes41%O^
zk_3c&HXvr&>bwy%yd)4u21`O<IPpWG0za6HC6gTiEIv#i;=*#N{qF=IZ;lLd$01n*
z2qZEAa0vmN8DwV$iT*hWV30`fp)8my;3+=_rBWCa+8>}u$#6L`&fkK$AcF@>gdD_S
zfsn(8h++{Rhn)%|!wXJ?C5U3gI?C_&{k^;bB`{Brh#W|Re3@8(A1^0>?&L&3e0*mv
zi^cF4No5=n2>E-v<B;Gu3ItpR;Nnap@jx=cg-QVk6bcn2xPUwt0u7*nGzg&pcupVW
zy<sp(R{|g8xrjWKL?Q8bG$(=!4dfB1WGa>5!UJf8SQ5aY#UdPZD*c1}Dv1DTK~Cbo
z=Fv5#u67uH0x6PJ<z(vwL+dA3i304qa$#^lT^qRLKwbVJE^cyL@R11oGY{U=%Htq}
z^e^h-JxmJoWO9xK^5i4Y`rEoA{+aPo&W67>{huZ8&rSbBo&FosC&LQHaYTFwnW;pa
z&KaU^`n*pH@&EJn?(BDy>H{1Zf4b$=+(ka7CO0HPs3pi;KDbQmfI>}w>+kIu629%%
zeYcL<g?-kR+PopU>9y?Hz*TKg{?b@+ra5_LMkX+8Z<eK3)|}Rf^Suu|&7b<1Z=GdB
zRSk_{4+A_|AF0hE%WSj?ZyQtQIj{Ks3VC#M{93hX=%I%zLLUC4%r|6(ZEi^zg1g5w
zr@}rrzn84)onZAgtl!$%&^Ns_;X;xx-r!{yc$aDa3Zs(GypPUQWY1-4O(fSFzQ6u*
zi*@u14`U5(n(EtF=OeQx(p1mF=D&Tq*p*r4Qi?I1220!j+h=H|U&H=_Q*+@(zQ!sr
zd@y4h<J0OSg?Zj%KrexSOVgKG;Pf>X27zCcHuMA?4~*Gt^D+RvC3jWHwIhu*#n1+(
zb>Eqb5j&apio6nbNo#E@84lMLXd=#_yHfRQPPFyD1spoV6NbB5EJxBzXq7aDc1PKx
zypzxS&t7Dr9zbhEOa8Mn`bkQ6bmp8zduI^ejQN<DnkpwY-rWwUM-;829TTdmTKeWO
z_k4}n;u#%FU(dt3i65sFG%n1xO-X*jU$F>Wc_)>abjNJl0)C1_-O}Rzr1{1Csye2j
zik~uWG_D+&6}9)0qH{OiiFI{%dyt9x6K+J?lP8Y1>MaYK9`>%g6yFegB7AqH{gS|W
z4yIpkdPUw@Y~6T@k8;>|*(Ay#UnB%r!RpHkw;!8dS07H=zvAcp9rW;?D-{99NO$*B
z3gOZ2Z(FWtxLs=&$n3mF6x!jQ{-VLPbeBPKyQ!7AX?x@uc{qQ7`iUl@dXSX!bo6O{
z1G=}O@X-0&$G;xZqH{3Erm-UOxXSDXbyYR~Xl`=-f)1mbjTK7*9ye81Ib$HtTUI~R
zeT6qd{ZQ9x;T40q7P`wsUsYBnG*+rl+_;8;uIJQOum1eEGmkDj*+}0x{EC?R>);af
z()eT`gOe%G)>wEqy&h3y38Jc+rejsO+@CTV1xK7|xZSP5C48yC%Bj#8-RjTGZN2s^
zqf!`%FT>-|`jH?ivmZV5rax!%JxWfx?>K7a2$Ovu|5@*a*}gM8OTMowO0GX=6>!)~
z-}-puG5^N}n(#8bxBZ0&*H!G?&H^=FwXAn|m|Q-RSt;<#HPBl7gqow;m0eWBvzJcf
z?Fhm|w2zO^w|R5+Ji51Nnx1uhs}a9_>5nywR}DXR9V!u66;wVrLgAl&-R`OwytLOM
z;Yd}1&6{E0+o^Y(m7~H__o~5`n9<f?zT(ljtGAQ;c443!uT~vq<J%9oc3jvw5u3oE
zFZU}EL{-+?U*5V<8S|-04Q53f*fo&%YLiZN#A>sQf|`MJq-HkA<u|BvdABHiF1%DY
zr==zOW+PNbTeM?#jQr}-=4PWlyXE%Vn82+Az(IJlD}YET7FpY-53T9m`eOb_c6*eo
zvwNL#WWLs|$F(Rp`b)*Y(A(bI?E!GvH-*P+v|}49(nO)!?d2D3R#|@II!jge)%Ql#
zqb@^DdJMY`qu<;PRWB*1yuj$-1?SE&j5u($ak_S1Xej$S&4;}%a_b4T8}YCcEh49(
z#xlDwNxesF_@xGYvFexlwQu6XAmPr@1A&7FPHZs<=d&L_5~pL)q()mk75*1*Vb(ya
zJrlDWoz`Gt9beR7;Mu(<)6b)4mVpYdTHoU_{<8ewMmskvv(Ej&?7X;|=5At_(QQh=
zA!=nsPa--`zoJQ1mr+&A-kiMGt`sTI+U>F{r?i+tV@+g;nQVF0S*yzqEKj|jwb4+7
zT6&fBdei;$Hs9^+J!8mDFJ0a`dOw)2ynN}_=|O9G?gPV_*F(4VRhe<lF8BW~zIdc%
z@qzoLpV;)W7O&jBZ(#|#VG$bRkuo+fb>gB=*TB>K4DZ8*88;jrsH1v1L-*%;Uh5yp
zrxw@!94!_f=gJhP=R8bpTc1+SW)@VouD>$4FF+L2b7i%<JgxQzq=Bz!UEd6J5P{;#
zi)iDh+12$HAmiNA`itzasy=sN0;#PeZ;XhE@p24w;j_QES9C}ac@ylg0-GzgKRZ?g
z?J=Q6^n~u(SDR&yKEK<cBceug-{(s~RMz^#6F-9J8d`)p7_;!GL;u+(4ka={Ge{eJ
zRzUi6eUI<71=`}3hk|32&vwJ9+U9h2<_qi6T9A6OZMg96c(zgM%YN*0+q;&LH&dFs
z_LT>zG$-xK)1}&j_ikuYb|^f}^ef_amD1EV9DL50PG<rS=kCfGVta}=Mt8UGi*Cwh
zd}C{E35M5nM~@j`(rhBZ(^cKm&%GFTvdW2bGKNA+1Ml$8l<52A?%5EN;$d?HHc8jt
zW7PM+P4B2n_F%uOO@U-+M%os3t~g}foxb?agC)y0O%UGJ7eD_laJE6Y?c+NcO(%0&
zUd~A>AufZnx`WrqCoYT3npWS&%4)uTf_^)<Nxmz$&9`Eu?(fFmXQg*7b6wj104o7(
A$p8QV

literal 0
HcmV?d00001

diff --git a/src/modules/keyboardmanager/KeyboardManagerEditorUI/Assets/kbm.jpg b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Assets/kbm.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..46d0c96f6f03fa3e6b6e994633eb82bf22e7951e
GIT binary patch
literal 5034
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
Rj@S49?7tl7!6fwEe*pw|$j<-(

literal 0
HcmV?d00001

diff --git a/src/modules/keyboardmanager/KeyboardManagerEditorUI/Helpers/Remapping.cs b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Helpers/Remapping.cs
new file mode 100644
index 0000000000..1f593177cc
--- /dev/null
+++ b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Helpers/Remapping.cs
@@ -0,0 +1,25 @@
+// 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;
+
+namespace KeyboardManagerEditorUI.Helpers
+{
+    public class Remapping
+    {
+        public List<string> OriginalKeys { get; set; } = new List<string>();
+
+        public List<string> RemappedKeys { get; set; } = new List<string>();
+
+        public bool IsAllApps { get; set; } = true;
+
+        public string AppName { get; set; } = "All apps";
+
+        public bool IsEnabled { get; set; } = true;
+    }
+}
diff --git a/src/modules/keyboardmanager/KeyboardManagerEditorUI/Helpers/URLShortcut.cs b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Helpers/URLShortcut.cs
new file mode 100644
index 0000000000..b961b3bc1b
--- /dev/null
+++ b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Helpers/URLShortcut.cs
@@ -0,0 +1,19 @@
+// 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;
+
+namespace KeyboardManagerEditorUI.Helpers
+{
+    public class URLShortcut
+    {
+        public List<string> Shortcut { get; set; } = new List<string>();
+
+        public string URL { get; set; } = string.Empty;
+    }
+}
diff --git a/src/modules/keyboardmanager/KeyboardManagerEditorUI/KeyboardManagerEditorUI.csproj b/src/modules/keyboardmanager/KeyboardManagerEditorUI/KeyboardManagerEditorUI.csproj
index eace63f59e..58f7a1e829 100644
--- a/src/modules/keyboardmanager/KeyboardManagerEditorUI/KeyboardManagerEditorUI.csproj
+++ b/src/modules/keyboardmanager/KeyboardManagerEditorUI/KeyboardManagerEditorUI.csproj
@@ -18,6 +18,22 @@
     <OutputPath>..\..\..\..\$(Platform)\$(Configuration)\$(MSBuildProjectName)</OutputPath>
   </PropertyGroup>
 
+  <PropertyGroup>
+	<EnableDefaultXamlItems>true</EnableDefaultXamlItems>
+	<EnableXamlJitOptimization>true</EnableXamlJitOptimization>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <None Remove="Pages\ExistingUI.xaml" />
+    <None Remove="Pages\Programs.xaml" />
+    <None Remove="Pages\Shortcuts.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" />
+  </ItemGroup>
+
   <ItemGroup>
     <Manifest Include="$(ApplicationManifest)" />
   </ItemGroup>
@@ -42,6 +58,46 @@
   <ItemGroup>
     <Folder Include="Assets\" />
   </ItemGroup>
+  <ItemGroup>
+    <Page Update="Styles\CommonStyle.xaml">
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+  </ItemGroup>
+  <ItemGroup>
+    <Page Update="Pages\URLs.xaml">
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+  </ItemGroup>
+  <ItemGroup>
+    <Page Update="Pages\Text.xaml">
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+  </ItemGroup>
+  <ItemGroup>
+    <Page Update="Pages\Programs.xaml">
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+  </ItemGroup>
+  <ItemGroup>
+    <Page Update="Pages\Shortcuts.xaml">
+      <Generator>MSBuild:Compile</Generator>
+    </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>
+  </ItemGroup>
+  <ItemGroup>
+    <Page Update="Pages\ExistingUI.xaml">
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+  </ItemGroup>
 
   <!--
     Defining the "HasPackageAndPublishMenuAddedByProject" property here allows the Solution
diff --git a/src/modules/keyboardmanager/KeyboardManagerEditorUI/MainWindow.xaml b/src/modules/keyboardmanager/KeyboardManagerEditorUI/MainWindow.xaml
index 9a0ba9a4a1..4cd06bac70 100644
--- a/src/modules/keyboardmanager/KeyboardManagerEditorUI/MainWindow.xaml
+++ b/src/modules/keyboardmanager/KeyboardManagerEditorUI/MainWindow.xaml
@@ -6,91 +6,70 @@
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:local="using:KeyboardManagerEditorUI"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:pages="using:KeyboardManagerEditorUI.Pages"
     Title="KeyboardManagerEditorUI"
     mc:Ignorable="d">
 
-    <Grid Padding="16">
-        <StackPanel>
+    <Grid
+        x:Name="LayoutRoot"
+        HorizontalAlignment="Stretch"
+        VerticalAlignment="Stretch"
+        CornerRadius="4"
+        RowSpacing="6">
+        <Grid.RowDefinitions>
+            <RowDefinition Height="32" />
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
+
+        <StackPanel
+            Grid.ColumnSpan="2"
+            Margin="16,8,8,8"
+            VerticalAlignment="Top"
+            Orientation="Horizontal">
+            <Image Width="16" Source="ms-appx:///Assets/FluentIconsKeyboardManager.png" />
             <TextBlock
-                Margin="10"
-                FontSize="24"
-                Foreground="{ThemeResource TextFillColorPrimaryBrush}"
-                Text="Remap keys" />
-
-            <TextBlock
-                Margin="10"
-                FontSize="16"
-                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-                Text="Select the key you want to change and then configure the key, shortcut or text you want it to send."
-                TextWrapping="Wrap" />
-
-            <TextBlock
-                Margin="10"
-                FontSize="16"
-                FontStyle="Italic"
-                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-                Text="Example of a remapping: Select A and send &quot;Ctrl+C&quot;, &quot;A&quot; would be your &quot;Select&quot; and &quot;Ctrl+C&quot; would be your &quot;To send&quot; command."
-                TextWrapping="Wrap" />
-
-            <Grid Margin="10">
-                <Grid.ColumnDefinitions>
-                    <ColumnDefinition Width="240" />
-                    <ColumnDefinition Width="Auto" />
-                    <ColumnDefinition Width="240" />
-                </Grid.ColumnDefinitions>
-                <Grid.RowDefinitions>
-                    <RowDefinition Height="Auto" />
-                    <RowDefinition Height="Auto" />
-                </Grid.RowDefinitions>
-                <TextBlock
-                    Margin="0,12,0,0"
-                    FontSize="16"
-                    FontWeight="Bold"
-                    Text="Selected:" />
-                <Grid Grid.Row="1" Margin="0,8,0,0">
-                    <StackPanel>
-                        <ToggleButton Click="Button_Click" Content="Select" />
-                        <ComboBox
-                            x:Name="keyComboBox"
-                            Width="250"
-                            PlaceholderText="select keys please" />
-                    </StackPanel>
-                </Grid>
-
-                <TextBlock
-                    Grid.Row="1"
-                    Grid.Column="1"
-                    Margin="24,0,24,0"
-                    HorizontalAlignment="Center"
-                    VerticalAlignment="Center"
-                    FontFamily="{ThemeResource SymbolThemeFontFamily}"
-                    Text="&#xE0AB;" />
-
-                <TextBlock
-                    Grid.Column="2"
-                    Margin="0,12,0,0"
-                    FontSize="16"
-                    FontWeight="Bold"
-                    Text="To Send:" />
-                <Grid
-                    Grid.Row="1"
-                    Grid.Column="2"
-                    Margin="0,8,0,0">
-                    <StackPanel>
-                        <ToggleButton Click="Button_Click" Content="Click to select" />
-                        <ComboBox
-                            x:Name="newKeyComboBox"
-                            Width="250"
-                            PlaceholderText="select keys please" />
-                    </StackPanel>
-                </Grid>
-            </Grid>
-            <Button
-                Margin="10"
-                Content="+ Add Key Remapping"
-                Style="{StaticResource AccentButtonStyle}" />
-
+                Margin="12,0,0,0"
+                Style="{StaticResource CaptionTextBlockStyle}"
+                Text="Keyboard Manager" />
         </StackPanel>
 
+        <NavigationView
+            x:Name="RootView"
+            Grid.RowSpan="2"
+            Margin="0,32,0,0"
+            IsBackButtonVisible="Collapsed"
+            IsBackEnabled="False"
+            IsPaneToggleButtonVisible="False"
+            IsTitleBarAutoPaddingEnabled="True"
+            OpenPaneLength="240"
+            PaneDisplayMode="Top"
+            SelectionChanged="RootView_SelectionChanged">
+            <NavigationView.MenuItems>
+                <NavigationViewItem Content="Remappings" Tag="Remappings">
+                    <NavigationViewItem.Icon>
+                        <FontIcon Glyph="&#xEDA7;" />
+                    </NavigationViewItem.Icon>
+                </NavigationViewItem>
+                <NavigationViewItem Content="Programs" Tag="Programs">
+                    <NavigationViewItem.Icon>
+                        <FontIcon Glyph="&#xECAA;" />
+                    </NavigationViewItem.Icon>
+                </NavigationViewItem>
+                <NavigationViewItem Content="Text" Tag="Text">
+                    <NavigationViewItem.Icon>
+                        <FontIcon Glyph="&#xE8D2;" />
+                    </NavigationViewItem.Icon>
+                </NavigationViewItem>
+                <NavigationViewItem Content="URLs" Tag="URLs">
+                    <NavigationViewItem.Icon>
+                        <FontIcon Glyph="&#xE8A7;" />
+                    </NavigationViewItem.Icon>
+                </NavigationViewItem>
+            </NavigationView.MenuItems>
+            <NavigationView.Content>
+                <Frame x:Name="NavigationFrame" Margin="0,0,0,0" />
+            </NavigationView.Content>
+        </NavigationView>
     </Grid>
+
 </Window>
diff --git a/src/modules/keyboardmanager/KeyboardManagerEditorUI/MainWindow.xaml.cs b/src/modules/keyboardmanager/KeyboardManagerEditorUI/MainWindow.xaml.cs
index 3a60481ee6..d62c9e1e1b 100644
--- a/src/modules/keyboardmanager/KeyboardManagerEditorUI/MainWindow.xaml.cs
+++ b/src/modules/keyboardmanager/KeyboardManagerEditorUI/MainWindow.xaml.cs
@@ -21,83 +21,26 @@ using Windows.Foundation.Collections;
 
 namespace KeyboardManagerEditorUI
 {
-    /// <summary>
-    /// Window that can be used on its own or navigated to within a Frame.
-    /// </summary>
     public sealed partial class MainWindow : Window
     {
-        public class KeyboardKey
-        {
-            public int KeyCode { get; set; }
-
-            public string KeyName { get; set; } = string.Empty;
-
-            public override string ToString() => KeyName;
-        }
-
-        // Struct to hold key code and name pairs
-        [StructLayout(LayoutKind.Sequential, CharSet = CharSet.Unicode)]
-        private struct KeyNamePair
-        {
-            public int KeyCode;
-            [MarshalAs(UnmanagedType.ByValTStr, SizeConst = 64)]
-            public string KeyName;
-        }
-
-        [DllImport("PowerToys.KeyboardManagerEditorLibraryWrapper.dll", CallingConvention = CallingConvention.Cdecl)]
-        private static extern int GetKeyboardKeysList(bool isShortcut, [Out] KeyNamePair[] keyList, int maxCount);
-
-        [DllImport("PowerToys.KeyboardManagerEditorLibraryWrapper.dll", CallingConvention = CallingConvention.Cdecl)]
-        private static extern bool CheckIfRemappingsAreValid();
-
-        public List<KeyboardKey> KeysList { get; private set; } = new List<KeyboardKey>();
-
         public MainWindow()
         {
             this.InitializeComponent();
 
-            LoadKeyboardKeys();
-
-            keyComboBox.ItemsSource = KeysList;
-            keyComboBox.DisplayMemberPath = "KeyName";
-
-            newKeyComboBox.ItemsSource = KeysList;
-            newKeyComboBox.DisplayMemberPath = "KeyCode";
+            RootView.SelectedItem = RootView.MenuItems[0];
         }
 
-        private void LoadKeyboardKeys()
+        private void RootView_SelectionChanged(NavigationView sender, NavigationViewSelectionChangedEventArgs args)
         {
-            const int MaxKeys = 300;
-            KeyNamePair[] keyNamePairs = new KeyNamePair[MaxKeys];
-
-            int count = GetKeyboardKeysList(false, keyNamePairs, MaxKeys);
-
-            KeysList = new List<KeyboardKey>(count);
-            for (int i = 0; i < count; i++)
+            if (args.SelectedItem is NavigationViewItem selectedItem)
             {
-                KeysList.Add(new KeyboardKey
+                switch ((string)selectedItem.Tag)
                 {
-                    KeyCode = keyNamePairs[i].KeyCode,
-                    KeyName = keyNamePairs[i].KeyName,
-                });
-            }
-        }
-
-        private void KeyComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
-        {
-            if (e.AddedItems.Count > 0 && e.AddedItems[0] is KeyboardKey key)
-            {
-                Console.WriteLine($"selected key: {key.KeyName} (code: {key.KeyCode})");
-            }
-        }
-
-        private void Button_Click(object sender, RoutedEventArgs e)
-        {
-            var button = sender as Button;
-            if (button == null)
-            {
-                // button.Background = (SolidColorBrush)Application.Current.Resources["SystemControlBackgroundAccentBrush"];
-                return;
+                    case "Remappings": NavigationFrame.Navigate(typeof(Pages.Shortcuts)); break;
+                    case "Programs": NavigationFrame.Navigate(typeof(Pages.Programs)); break;
+                    case "Text": NavigationFrame.Navigate(typeof(Pages.Text)); break;
+                    case "URLs": NavigationFrame.Navigate(typeof(Pages.URLs)); break;
+                }
             }
         }
     }
diff --git a/src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/ExistingUI.xaml b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/ExistingUI.xaml
new file mode 100644
index 0000000000..840b68dc38
--- /dev/null
+++ b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/ExistingUI.xaml
@@ -0,0 +1,96 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<UserControl
+    x:Class="KeyboardManagerEditorUI.Pages.ExistingUI"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:local="using:KeyboardManagerEditorUI.Pages"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d">
+
+    <!--  WinUI3 implementation of the existing Keyboard Manager UI  -->
+    <Grid Padding="16">
+        <StackPanel>
+            <TextBlock
+                Margin="10"
+                FontSize="24"
+                Foreground="{ThemeResource TextFillColorPrimaryBrush}"
+                Text="Remap keys" />
+
+            <TextBlock
+                Margin="10"
+                FontSize="16"
+                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                Text="Select the key you want to change and then configure the key, shortcut or text you want it to send."
+                TextWrapping="Wrap" />
+
+            <TextBlock
+                Margin="10"
+                FontSize="16"
+                FontStyle="Italic"
+                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                Text="Example of a remapping: Select A and send &quot;Ctrl+C&quot;, &quot;A&quot; would be your &quot;Select&quot; and &quot;Ctrl+C&quot; would be your &quot;To send&quot; command."
+                TextWrapping="Wrap" />
+
+            <Grid Margin="10">
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition Width="240" />
+                    <ColumnDefinition Width="Auto" />
+                    <ColumnDefinition Width="240" />
+                </Grid.ColumnDefinitions>
+                <Grid.RowDefinitions>
+                    <RowDefinition Height="Auto" />
+                    <RowDefinition Height="Auto" />
+                </Grid.RowDefinitions>
+                <TextBlock
+                    Margin="0,12,0,0"
+                    FontSize="16"
+                    FontWeight="Bold"
+                    Text="Selected:" />
+                <Grid Grid.Row="1" Margin="0,8,0,0">
+                    <StackPanel>
+                        <ToggleButton Click="Button_Click" Content="Select" />
+                        <ComboBox
+                            x:Name="keyComboBox"
+                            Width="250"
+                            PlaceholderText="select keys please" />
+                    </StackPanel>
+                </Grid>
+
+                <TextBlock
+                    Grid.Row="1"
+                    Grid.Column="1"
+                    Margin="24,0,24,0"
+                    HorizontalAlignment="Center"
+                    VerticalAlignment="Center"
+                    FontFamily="{ThemeResource SymbolThemeFontFamily}"
+                    Text="&#xE0AB;" />
+
+                <TextBlock
+                    Grid.Column="2"
+                    Margin="0,12,0,0"
+                    FontSize="16"
+                    FontWeight="Bold"
+                    Text="To Send:" />
+                <Grid
+                    Grid.Row="1"
+                    Grid.Column="2"
+                    Margin="0,8,0,0">
+                    <StackPanel>
+                        <ToggleButton Click="Button_Click" Content="Click to select" />
+                        <ComboBox
+                            x:Name="newKeyComboBox"
+                            Width="250"
+                            PlaceholderText="select keys please" />
+                    </StackPanel>
+                </Grid>
+            </Grid>
+            <Button
+                Margin="10"
+                Content="+ Add Key Remapping"
+                Style="{StaticResource AccentButtonStyle}" />
+
+        </StackPanel>
+
+    </Grid>
+</UserControl>
diff --git a/src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/ExistingUI.xaml.cs b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/ExistingUI.xaml.cs
new file mode 100644
index 0000000000..a0da86f019
--- /dev/null
+++ b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/ExistingUI.xaml.cs
@@ -0,0 +1,102 @@
+// 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.Collections.ObjectModel;
+using System.IO;
+using System.Linq;
+using System.Runtime.InteropServices;
+using System.Runtime.InteropServices.WindowsRuntime;
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Controls.Primitives;
+using Microsoft.UI.Xaml.Data;
+using Microsoft.UI.Xaml.Input;
+using Microsoft.UI.Xaml.Media;
+using Microsoft.UI.Xaml.Navigation;
+using Windows.Foundation;
+using Windows.Foundation.Collections;
+
+// WinUI3 implementation of the Existing Keyboard Manager UI
+namespace KeyboardManagerEditorUI.Pages
+{
+    public sealed partial class ExistingUI : UserControl
+    {
+        public class KeyboardKey
+        {
+            public int KeyCode { get; set; }
+
+            public string KeyName { get; set; } = string.Empty;
+
+            public override string ToString() => KeyName;
+        }
+
+        // Struct to hold key code and name pairs
+        [StructLayout(LayoutKind.Sequential, CharSet = CharSet.Unicode)]
+        private struct KeyNamePair
+        {
+            public int KeyCode;
+            [MarshalAs(UnmanagedType.ByValTStr, SizeConst = 64)]
+            public string KeyName;
+        }
+
+        [DllImport("PowerToys.KeyboardManagerEditorLibraryWrapper.dll", CallingConvention = CallingConvention.Cdecl)]
+        private static extern int GetKeyboardKeysList(bool isShortcut, [Out] KeyNamePair[] keyList, int maxCount);
+
+        [DllImport("PowerToys.KeyboardManagerEditorLibraryWrapper.dll", CallingConvention = CallingConvention.Cdecl)]
+        private static extern bool CheckIfRemappingsAreValid();
+
+        public List<KeyboardKey> KeysList { get; private set; } = new List<KeyboardKey>();
+
+        public ExistingUI()
+        {
+            this.InitializeComponent();
+
+            LoadKeyboardKeys();
+
+            keyComboBox.ItemsSource = KeysList;
+            keyComboBox.DisplayMemberPath = "KeyName";
+
+            newKeyComboBox.ItemsSource = KeysList;
+            newKeyComboBox.DisplayMemberPath = "KeyCode";
+        }
+
+        private void LoadKeyboardKeys()
+        {
+            const int MaxKeys = 300;
+            KeyNamePair[] keyNamePairs = new KeyNamePair[MaxKeys];
+
+            int count = GetKeyboardKeysList(false, keyNamePairs, MaxKeys);
+
+            KeysList = new List<KeyboardKey>(count);
+            for (int i = 0; i < count; i++)
+            {
+                KeysList.Add(new KeyboardKey
+                {
+                    KeyCode = keyNamePairs[i].KeyCode,
+                    KeyName = keyNamePairs[i].KeyName,
+                });
+            }
+        }
+
+        private void KeyComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
+        {
+            if (e.AddedItems.Count > 0 && e.AddedItems[0] is KeyboardKey key)
+            {
+                Console.WriteLine($"selected key: {key.KeyName} (code: {key.KeyCode})");
+            }
+        }
+
+        private void Button_Click(object sender, RoutedEventArgs e)
+        {
+            var button = sender as Button;
+            if (button == null)
+            {
+                // button.Background = (SolidColorBrush)Application.Current.Resources["SystemControlBackgroundAccentBrush"];
+                return;
+            }
+        }
+    }
+}
diff --git a/src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/Programs.xaml b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/Programs.xaml
new file mode 100644
index 0000000000..1e5e2b4c86
--- /dev/null
+++ b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/Programs.xaml
@@ -0,0 +1,230 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<Page
+    x:Class="KeyboardManagerEditorUI.Pages.Programs"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    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"
+    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
+    mc:Ignorable="d">
+
+    <Grid Padding="16">
+        <StackPanel>
+            <TextBlock Foreground="{ThemeResource TextFillColorSecondaryBrush}" Text="Program shortcuts allow you to open specific applications when you use the configured shortcut" />
+            <Button
+                x:Name="NewShortcutBtn"
+                Grid.Column="0"
+                Height="36"
+                Margin="0,24,0,0"
+                VerticalAlignment="Top"
+                Click="NewShortcutBtn_Click">
+
+                <StackPanel Orientation="Horizontal" Spacing="8">
+                    <TextBlock
+                        Margin="0,0,0,0"
+                        VerticalAlignment="Center"
+                        FontFamily="Segoe Fluent Icons"
+                        Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}"
+                        Text="&#xE109;" />
+                    <TextBlock Text="Program shortcut" />
+                </StackPanel>
+            </Button>
+            <StackPanel
+                Margin="0,12,0,0"
+                Orientation="Vertical"
+                Spacing="8">
+                <Grid
+                    Grid.Row="1"
+                    Grid.Column="1"
+                    HorizontalAlignment="Stretch"
+                    VerticalAlignment="Top"
+                    Background="{ThemeResource LayerFillColorDefaultBrush}"
+                    BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
+                    BorderThickness="1"
+                    CornerRadius="8">
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="48" />
+                        <RowDefinition Height="*" />
+                    </Grid.RowDefinitions>
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="236" />
+                        <ColumnDefinition Width="236" />
+                        <ColumnDefinition Width="*" />
+                        <ColumnDefinition Width="84" />
+                    </Grid.ColumnDefinitions>
+                    <TextBlock
+                        Grid.Column="0"
+                        Margin="16,-2,0,0"
+                        VerticalAlignment="Center"
+                        Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                        Text="Shortcut" />
+                    <AppBarSeparator
+                        Grid.Column="1"
+                        Margin="-6,4,0,4"
+                        HorizontalAlignment="Left" />
+                    <TextBlock
+                        Grid.Column="1"
+                        Margin="12,-2,0,0"
+                        HorizontalAlignment="Left"
+                        VerticalAlignment="Center"
+                        Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                        Text="Program" />
+
+                    <ListView
+                        Grid.Row="1"
+                        Grid.ColumnSpan="4"
+                        IsItemClickEnabled="True"
+                        ItemClick="ListView_ItemClick"
+                        ItemsSource="{x:Bind Shortcuts}"
+                        SelectionMode="None">
+                        <ListView.ItemTemplate>
+                            <DataTemplate x:DataType="helper:URLShortcut">
+                                <Grid Height="48">
+                                    <Grid.ColumnDefinitions>
+                                        <ColumnDefinition Width="232" />
+                                        <ColumnDefinition Width="238" />
+                                        <ColumnDefinition Width="*" />
+                                        <ColumnDefinition Width="84" />
+                                    </Grid.ColumnDefinitions>
+                                    <Rectangle
+                                        Grid.ColumnSpan="5"
+                                        Height="1"
+                                        Margin="-16,0,-16,0"
+                                        HorizontalAlignment="Stretch"
+                                        VerticalAlignment="Bottom"
+                                        Fill="{ThemeResource CardStrokeColorDefaultBrush}"
+                                        Opacity="0.8" />
+                                    <ItemsControl
+                                        Grid.Column="0"
+                                        VerticalAlignment="Center"
+                                        ItemsSource="{x:Bind Shortcut}">
+                                        <ItemsControl.ItemsPanel>
+                                            <ItemsPanelTemplate>
+                                                <StackPanel Orientation="Horizontal" Spacing="4" />
+                                            </ItemsPanelTemplate>
+                                        </ItemsControl.ItemsPanel>
+                                        <ItemsControl.ItemTemplate>
+                                            <DataTemplate>
+                                                <styles:KeyVisual
+                                                    HorizontalAlignment="Left"
+                                                    Content="{Binding}"
+                                                    VisualType="SmallOutline" />
+                                            </DataTemplate>
+                                        </ItemsControl.ItemTemplate>
+                                    </ItemsControl>
+                                    <StackPanel
+                                        Grid.Column="1"
+                                        Orientation="Horizontal"
+                                        Spacing="8">
+                                        <Image Width="16" Source="ms-appx:///Assets/Images/FluentIconsKeyboardManager.png" />
+                                        <TextBlock VerticalAlignment="Center" Text="Keyboardmanager.exe" />
+                                        <FontIcon
+                                            VerticalAlignment="Center"
+                                            FontSize="14"
+                                            Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}"
+                                            Glyph="&#xE946;">
+                                            <ToolTipService.ToolTip>
+                                                <TextBlock>
+                                                    <Run FontWeight="SemiBold" Text="Arguments:" />
+                                                    <Run Text="-config json" />
+                                                    <LineBreak />
+                                                    <Run FontWeight="SemiBold" Text="Starting directory:" />
+                                                    <Run Text="C:\Users\Dev\PowerToys\bin" />
+                                                    <LineBreak />
+                                                    <Run FontWeight="SemiBold" Text="Launch state:" />
+                                                    <Run Text="Minimized" />
+                                                </TextBlock>
+                                            </ToolTipService.ToolTip>
+                                        </FontIcon>
+                                    </StackPanel>
+                                    <ToggleSwitch
+                                        Grid.ColumnSpan="4"
+                                        Margin="0,0,-112,0"
+                                        HorizontalAlignment="Right"
+                                        IsOn="True"
+                                        OffContent=""
+                                        OnContent="" />
+                                </Grid>
+                            </DataTemplate>
+                        </ListView.ItemTemplate>
+                    </ListView>
+                </Grid>
+            </StackPanel>
+        </StackPanel>
+        <ContentDialog
+            x:Name="KeyDialog"
+            Title="New program shortcut"
+            Width="480"
+            MinWidth="600"
+            MaxWidth="600"
+            PrimaryButtonStyle="{StaticResource AccentButtonStyle}"
+            PrimaryButtonText="Save"
+            SecondaryButtonText="Cancel">
+            <StackPanel Width="480" Orientation="Vertical">
+                <TextBlock Margin="0,12,0,8" Text="Shortcut" />
+
+                <ToggleButton
+                    x:Name="OriginalToggleBtn"
+                    Padding="0,24,0,24"
+                    HorizontalAlignment="Stretch"
+                    Style="{StaticResource CustomShortcutToggleButtonStyle}">
+                    <ToggleButton.Content>
+                        <StackPanel Orientation="Horizontal" Spacing="8">
+                            <styles:KeyVisual Content="Win" VisualType="SmallOutline" />
+                            <styles:KeyVisual Content="U" VisualType="SmallOutline" />
+                        </StackPanel>
+                    </ToggleButton.Content>
+                </ToggleButton>
+                <Grid
+                    Margin="0,24,0,0"
+                    ColumnSpacing="4"
+                    RowSpacing="12">
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="*" />
+                        <ColumnDefinition Width="Auto" />
+                    </Grid.ColumnDefinitions>
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="Auto" />
+                        <RowDefinition Height="Auto" />
+                        <RowDefinition Height="Auto" />
+                        <RowDefinition Height="Auto" />
+                    </Grid.RowDefinitions>
+
+                    <TextBox Header="Application" Text="Keyboardmanager.exe" />
+                    <Button
+                        Grid.Column="1"
+                        Height="32"
+                        VerticalAlignment="Bottom">
+                        <FontIcon FontSize="14" Glyph="&#xE8DA;" />
+                    </Button>
+                    <TextBox
+                        Grid.Row="1"
+                        Header="Arguments"
+                        Text="-config json" />
+                    <TextBox
+                        Grid.Row="2"
+                        Header="Start in directory"
+                        Text="C:\Users\Dev\PowerToys\bin" />
+                    <Button
+                        Grid.Row="2"
+                        Grid.Column="1"
+                        Height="32"
+                        VerticalAlignment="Bottom">
+                        <FontIcon FontSize="14" Glyph="&#xE8DA;" />
+                    </Button>
+
+                    <ComboBox
+                        Grid.Row="3"
+                        Header="Launch state"
+                        SelectedIndex="0">
+                        <ComboBoxItem Content="Show window" />
+                        <ComboBoxItem Content="Minimized" />
+                    </ComboBox>
+                </Grid>
+            </StackPanel>
+        </ContentDialog>
+    </Grid>
+</Page>
diff --git a/src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/Programs.xaml.cs b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/Programs.xaml.cs
new file mode 100644
index 0000000000..c0410222fb
--- /dev/null
+++ b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/Programs.xaml.cs
@@ -0,0 +1,46 @@
+// 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.Collections.ObjectModel;
+using System.IO;
+using System.Linq;
+using System.Runtime.InteropServices.WindowsRuntime;
+using KeyboardManagerEditorUI.Helpers;
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Controls.Primitives;
+using Microsoft.UI.Xaml.Data;
+using Microsoft.UI.Xaml.Input;
+using Microsoft.UI.Xaml.Media;
+using Microsoft.UI.Xaml.Navigation;
+using Windows.Foundation;
+using Windows.Foundation.Collections;
+
+namespace KeyboardManagerEditorUI.Pages
+{
+    public sealed partial class Programs : Page
+    {
+        public ObservableCollection<URLShortcut> Shortcuts { get; set; }
+
+        public Programs()
+        {
+            this.InitializeComponent();
+
+            Shortcuts = new ObservableCollection<URLShortcut>();
+            Shortcuts.Add(new URLShortcut() { Shortcut = new List<string>() { "Win", "U", }, URL = "https://www.bing.com" });
+        }
+
+        private async void NewShortcutBtn_Click(object sender, RoutedEventArgs e)
+        {
+            await KeyDialog.ShowAsync();
+        }
+
+        private async void ListView_ItemClick(object sender, ItemClickEventArgs e)
+        {
+            await KeyDialog.ShowAsync();
+        }
+    }
+}
diff --git a/src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/Shortcuts.xaml b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/Shortcuts.xaml
new file mode 100644
index 0000000000..62a6f01376
--- /dev/null
+++ b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/Shortcuts.xaml
@@ -0,0 +1,191 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<Page
+    x:Class="KeyboardManagerEditorUI.Pages.Shortcuts"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    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"
+    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
+    mc:Ignorable="d">
+
+
+    <Grid Padding="16">
+        <StackPanel>
+            <TextBlock Foreground="{ThemeResource TextFillColorSecondaryBrush}" Text="Remappings allow you to reconfigure a single key or shortcut to a new key or shortcut" />
+
+            <Button
+                x:Name="NewShortcutBtn"
+                Grid.Column="0"
+                Height="36"
+                Margin="0,24,0,0"
+                VerticalAlignment="Top"
+                Click="NewShortcutBtn_Click">
+
+                <StackPanel Orientation="Horizontal" Spacing="8">
+                    <TextBlock
+                        Margin="0,0,0,0"
+                        VerticalAlignment="Center"
+                        FontFamily="Segoe Fluent Icons"
+                        Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}"
+                        Text="&#xE109;" />
+                    <TextBlock Text="New remapping" />
+                </StackPanel>
+            </Button>
+            <StackPanel
+                Margin="0,12,0,0"
+                Orientation="Vertical"
+                Spacing="8">
+                <Grid
+                    Grid.Row="1"
+                    Grid.Column="1"
+                    HorizontalAlignment="Stretch"
+                    VerticalAlignment="Top"
+                    Background="{ThemeResource LayerFillColorDefaultBrush}"
+                    BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
+                    BorderThickness="1"
+                    CornerRadius="8">
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="48" />
+                        <RowDefinition Height="*" />
+                    </Grid.RowDefinitions>
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="236" />
+                        <ColumnDefinition Width="236" />
+                        <ColumnDefinition Width="*" />
+                        <ColumnDefinition Width="84" />
+                    </Grid.ColumnDefinitions>
+                    <TextBlock
+                        Grid.Column="0"
+                        Margin="16,-2,0,0"
+                        VerticalAlignment="Center"
+                        Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                        Text="Original key(s)" />
+                    <AppBarSeparator
+                        Grid.Column="1"
+                        Margin="-6,4,0,4"
+                        HorizontalAlignment="Left" />
+                    <TextBlock
+                        Grid.Column="1"
+                        Margin="12,-2,0,0"
+                        HorizontalAlignment="Left"
+                        VerticalAlignment="Center"
+                        Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                        Text="New key(s)" />
+                    <AppBarSeparator
+                        Grid.Column="2"
+                        Margin="-6,4,0,4"
+                        HorizontalAlignment="Left" />
+                    <TextBlock
+                        Grid.Column="2"
+                        Margin="12,-2,0,0"
+                        HorizontalAlignment="Left"
+                        VerticalAlignment="Center"
+                        Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                        Text="Applicable apps" />
+
+                    <Rectangle
+                        Grid.ColumnSpan="4"
+                        Height="1"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Bottom"
+                        Fill="{ThemeResource CardStrokeColorDefaultBrush}" />
+                    <ListView
+                        Grid.Row="1"
+                        Grid.ColumnSpan="4"
+                        IsItemClickEnabled="True"
+                        ItemClick="ListView_ItemClick"
+                        ItemsSource="{x:Bind RemappedShortcuts}"
+                        SelectionMode="None">
+                        <ListView.ItemTemplate>
+                            <DataTemplate x:DataType="helper:Remapping">
+                                <Grid Height="48">
+                                    <Grid.ColumnDefinitions>
+                                        <ColumnDefinition Width="232" />
+                                        <ColumnDefinition Width="238" />
+                                        <ColumnDefinition Width="*" />
+                                        <ColumnDefinition Width="84" />
+                                    </Grid.ColumnDefinitions>
+                                    <Rectangle
+                                        Grid.ColumnSpan="5"
+                                        Height="1"
+                                        Margin="-16,0,-16,0"
+                                        HorizontalAlignment="Stretch"
+                                        VerticalAlignment="Bottom"
+                                        Fill="{ThemeResource CardStrokeColorDefaultBrush}"
+                                        Opacity="0.8" />
+
+                                    <ItemsControl
+                                        Grid.Column="0"
+                                        VerticalAlignment="Center"
+                                        IsEnabled="{x:Bind IsEnabled, Mode=OneWay}"
+                                        ItemsSource="{x:Bind OriginalKeys}">
+                                        <ItemsControl.ItemsPanel>
+                                            <ItemsPanelTemplate>
+                                                <StackPanel Orientation="Horizontal" Spacing="4" />
+                                            </ItemsPanelTemplate>
+                                        </ItemsControl.ItemsPanel>
+                                        <ItemsControl.ItemTemplate>
+                                            <DataTemplate>
+                                                <styles:KeyVisual
+                                                    HorizontalAlignment="Left"
+                                                    Content="{Binding}"
+                                                    VisualType="SmallOutline" />
+                                            </DataTemplate>
+                                        </ItemsControl.ItemTemplate>
+                                    </ItemsControl>
+                                    <ItemsControl
+                                        Grid.Column="1"
+                                        Margin="0,6,0,6"
+                                        VerticalAlignment="Center"
+                                        IsEnabled="{x:Bind IsEnabled, Mode=OneWay}"
+                                        ItemsSource="{x:Bind RemappedKeys}">
+                                        <ItemsControl.ItemsPanel>
+                                            <ItemsPanelTemplate>
+                                                <StackPanel Orientation="Horizontal" Spacing="4" />
+                                            </ItemsPanelTemplate>
+                                        </ItemsControl.ItemsPanel>
+                                        <ItemsControl.ItemTemplate>
+                                            <DataTemplate>
+                                                <styles:KeyVisual Content="{Binding}" VisualType="Small" />
+                                            </DataTemplate>
+                                        </ItemsControl.ItemTemplate>
+                                    </ItemsControl>
+                                    <TextBlock
+                                        Grid.Column="2"
+                                        Margin="-4,0,0,0"
+                                        HorizontalAlignment="Left"
+                                        VerticalAlignment="Center"
+                                        FontSize="12"
+                                        Text="{x:Bind AppName}" />
+                                    <ToggleSwitch
+                                        Grid.ColumnSpan="4"
+                                        Margin="0,0,-112,0"
+                                        HorizontalAlignment="Right"
+                                        IsOn="{x:Bind IsEnabled, Mode=TwoWay}"
+                                        OffContent=""
+                                        OnContent="" />
+                                </Grid>
+                            </DataTemplate>
+                        </ListView.ItemTemplate>
+                    </ListView>
+                </Grid>
+            </StackPanel>
+
+        </StackPanel>
+        <ContentDialog
+            x:Name="KeyDialog"
+            Title="Remap a shortcut"
+            MinWidth="600"
+            MaxWidth="600"
+            PrimaryButtonStyle="{StaticResource AccentButtonStyle}"
+            PrimaryButtonText="Save"
+            SecondaryButtonText="Cancel">
+            <Grid>
+                <styles:InputControl x:Name="ShortcutControl" />
+            </Grid>
+        </ContentDialog>
+    </Grid>
+</Page>
diff --git a/src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/Shortcuts.xaml.cs b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/Shortcuts.xaml.cs
new file mode 100644
index 0000000000..02d7346a96
--- /dev/null
+++ b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/Shortcuts.xaml.cs
@@ -0,0 +1,57 @@
+// 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.Collections.ObjectModel;
+using System.IO;
+using System.Linq;
+using System.Runtime.InteropServices.WindowsRuntime;
+using KeyboardManagerEditorUI.Helpers;
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Controls.Primitives;
+using Microsoft.UI.Xaml.Data;
+using Microsoft.UI.Xaml.Input;
+using Microsoft.UI.Xaml.Media;
+using Microsoft.UI.Xaml.Navigation;
+using Windows.Foundation;
+using Windows.Foundation.Collections;
+
+namespace KeyboardManagerEditorUI.Pages
+{
+    public sealed partial class Shortcuts : Page
+    {
+        public ObservableCollection<Remapping> RemappedShortcuts { get; set; }
+
+        public Shortcuts()
+        {
+            this.InitializeComponent();
+
+            RemappedShortcuts = new ObservableCollection<Remapping>();
+            RemappedShortcuts.Add(new Remapping() { OriginalKeys = new List<string>() { "Ctrl", "Shift", "F" }, RemappedKeys = new List<string>() { "Shift", "F" }, IsAllApps = true });
+            RemappedShortcuts.Add(new Remapping() { OriginalKeys = new List<string>() { "Ctrl (Left)" }, RemappedKeys = new List<string>() { "Ctrl (Right)" }, IsAllApps = true });
+            RemappedShortcuts.Add(new Remapping() { OriginalKeys = new List<string>() { "Shift", "M" }, RemappedKeys = new List<string>() { "Ctrl", "M" }, IsAllApps = true });
+            RemappedShortcuts.Add(new Remapping() { OriginalKeys = new List<string>() { "Shift", "Alt", "B" }, RemappedKeys = new List<string>() { "Alt", "B" }, IsAllApps = false, AppName = "outlook.exe" });
+            RemappedShortcuts.Add(new Remapping() { OriginalKeys = new List<string>() { "Numpad 1" }, RemappedKeys = new List<string>() { "Ctrl", "F" }, IsAllApps = true });
+            RemappedShortcuts.Add(new Remapping() { OriginalKeys = new List<string>() { "Numpad 2" }, RemappedKeys = new List<string>() { "Alt", "F" }, IsAllApps = true, AppName = "outlook.exe" });
+        }
+
+        private async void NewShortcutBtn_Click(object sender, RoutedEventArgs e)
+        {
+            await KeyDialog.ShowAsync();
+        }
+
+        private async void ListView_ItemClick(object sender, ItemClickEventArgs e)
+        {
+            if (e.ClickedItem is Remapping selectedShortcut)
+            {
+                ShortcutControl.SetOriginalKeys(selectedShortcut.OriginalKeys);
+                ShortcutControl.SetRemappedKeys(selectedShortcut.RemappedKeys);
+                ShortcutControl.SetApp(!selectedShortcut.IsAllApps, selectedShortcut.AppName);
+                await KeyDialog.ShowAsync();
+            }
+        }
+    }
+}
diff --git a/src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/Text.xaml b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/Text.xaml
new file mode 100644
index 0000000000..4ccffe69b4
--- /dev/null
+++ b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/Text.xaml
@@ -0,0 +1,180 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<Page
+    x:Class="KeyboardManagerEditorUI.Pages.Text"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    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"
+    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
+    mc:Ignorable="d">
+
+    <Grid Padding="16">
+        <StackPanel>
+            <TextBlock Foreground="{ThemeResource TextFillColorSecondaryBrush}" Text="Text shortcuts allow you to insert text in any inputfield when you use the configured text" />
+            <Button
+                x:Name="NewShortcutBtn"
+                Grid.Column="0"
+                Height="36"
+                Margin="0,24,0,0"
+                VerticalAlignment="Top"
+                Click="NewShortcutBtn_Click">
+
+                <StackPanel Orientation="Horizontal" Spacing="8">
+                    <TextBlock
+                        Margin="0,0,0,0"
+                        VerticalAlignment="Center"
+                        FontFamily="Segoe Fluent Icons"
+                        Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}"
+                        Text="&#xE109;" />
+                    <TextBlock Text="Text shortcut" />
+                </StackPanel>
+            </Button>
+
+
+            <StackPanel
+                Margin="0,12,0,0"
+                Orientation="Vertical"
+                Spacing="8">
+                <Grid
+                    Grid.Row="1"
+                    Grid.Column="1"
+                    HorizontalAlignment="Stretch"
+                    VerticalAlignment="Top"
+                    Background="{ThemeResource LayerFillColorDefaultBrush}"
+                    BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
+                    BorderThickness="1"
+                    CornerRadius="8">
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="48" />
+                        <RowDefinition Height="*" />
+                    </Grid.RowDefinitions>
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="236" />
+                        <ColumnDefinition Width="236" />
+                        <ColumnDefinition Width="*" />
+                        <ColumnDefinition Width="84" />
+                    </Grid.ColumnDefinitions>
+                    <TextBlock
+                        Grid.Column="0"
+                        Margin="16,-2,0,0"
+                        VerticalAlignment="Center"
+                        Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                        Text="Shortcut" />
+                    <AppBarSeparator
+                        Grid.Column="1"
+                        Margin="-6,4,0,4"
+                        HorizontalAlignment="Left" />
+                    <TextBlock
+                        Grid.Column="1"
+                        Margin="12,-2,0,0"
+                        HorizontalAlignment="Left"
+                        VerticalAlignment="Center"
+                        Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                        Text="Text" />
+
+                    <ListView
+                        Grid.Row="1"
+                        Grid.ColumnSpan="4"
+                        IsItemClickEnabled="True"
+                        ItemClick="ListView_ItemClick"
+                        ItemsSource="{x:Bind Shortcuts}"
+                        SelectionMode="None">
+                        <ListView.ItemTemplate>
+                            <DataTemplate x:DataType="helper:URLShortcut">
+                                <Grid Height="48">
+                                    <Grid.ColumnDefinitions>
+                                        <ColumnDefinition Width="232" />
+                                        <ColumnDefinition Width="238" />
+                                        <ColumnDefinition Width="*" />
+                                        <ColumnDefinition Width="84" />
+                                    </Grid.ColumnDefinitions>
+                                    <Rectangle
+                                        Grid.ColumnSpan="5"
+                                        Height="1"
+                                        Margin="-16,0,-16,0"
+                                        HorizontalAlignment="Stretch"
+                                        VerticalAlignment="Bottom"
+                                        Fill="{ThemeResource CardStrokeColorDefaultBrush}"
+                                        Opacity="0.8" />
+                                    <ItemsControl
+                                        Grid.Column="0"
+                                        VerticalAlignment="Center"
+                                        ItemsSource="{x:Bind Shortcut}">
+                                        <ItemsControl.ItemsPanel>
+                                            <ItemsPanelTemplate>
+                                                <StackPanel Orientation="Horizontal" Spacing="4" />
+                                            </ItemsPanelTemplate>
+                                        </ItemsControl.ItemsPanel>
+                                        <ItemsControl.ItemTemplate>
+                                            <DataTemplate>
+                                                <styles:KeyVisual
+                                                    HorizontalAlignment="Left"
+                                                    Content="{Binding}"
+                                                    VisualType="SmallOutline" />
+                                            </DataTemplate>
+                                        </ItemsControl.ItemTemplate>
+                                    </ItemsControl>
+                                    <TextBlock
+                                        Grid.Column="1"
+                                        Grid.ColumnSpan="2"
+                                        Margin="0,0,0,0"
+                                        VerticalAlignment="Center"
+                                        FontSize="12"
+                                        Text="{x:Bind URL}"
+                                        TextTrimming="CharacterEllipsis" />
+                                    <ToggleSwitch
+                                        Grid.ColumnSpan="4"
+                                        Margin="0,0,-112,0"
+                                        HorizontalAlignment="Right"
+                                        IsOn="True"
+                                        OffContent=""
+                                        OnContent="" />
+                                </Grid>
+                            </DataTemplate>
+                        </ListView.ItemTemplate>
+                    </ListView>
+                </Grid>
+            </StackPanel>
+        </StackPanel>
+        <ContentDialog
+            x:Name="KeyDialog"
+            Title="New text shortcut"
+            Width="480"
+            Height="360"
+            MinWidth="600"
+            MaxWidth="600"
+            PrimaryButtonStyle="{StaticResource AccentButtonStyle}"
+            PrimaryButtonText="Save"
+            SecondaryButtonText="Cancel">
+            <StackPanel
+                Width="360"
+                Height="360"
+                Orientation="Vertical">
+                <TextBlock Margin="0,12,0,8" Text="Shortcut" />
+
+                <ToggleButton
+                    x:Name="OriginalToggleBtn"
+                    Padding="0,24,0,24"
+                    HorizontalAlignment="Stretch"
+                    Style="{StaticResource CustomShortcutToggleButtonStyle}">
+                    <ToggleButton.Content>
+                        <StackPanel Orientation="Horizontal" Spacing="8">
+                            <styles:KeyVisual Content="Shift" VisualType="SmallOutline" />
+                            <styles:KeyVisual Content="Win" VisualType="SmallOutline" />
+                            <styles:KeyVisual Content="M" VisualType="SmallOutline" />
+                        </StackPanel>
+                    </ToggleButton.Content>
+                </ToggleButton>
+                <TextBox
+                    Height="200"
+                    Margin="0,24,0,0"
+                    Header="Text to insert"
+                    Text="https://www.microsoft.com"
+                    TextWrapping="Wrap" />
+            </StackPanel>
+        </ContentDialog>
+    </Grid>
+</Page>
diff --git a/src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/Text.xaml.cs b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/Text.xaml.cs
new file mode 100644
index 0000000000..1a9ae16ee3
--- /dev/null
+++ b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/Text.xaml.cs
@@ -0,0 +1,53 @@
+// 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.Collections.ObjectModel;
+using System.IO;
+using System.Linq;
+using System.Runtime.InteropServices.WindowsRuntime;
+using KeyboardManagerEditorUI.Helpers;
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Controls.Primitives;
+using Microsoft.UI.Xaml.Data;
+using Microsoft.UI.Xaml.Input;
+using Microsoft.UI.Xaml.Media;
+using Microsoft.UI.Xaml.Navigation;
+using Windows.Foundation;
+using Windows.Foundation.Collections;
+
+namespace KeyboardManagerEditorUI.Pages
+{
+    /// <summary>
+    /// An empty page that can be used on its own or navigated to within a Frame.
+    /// </summary>
+    public sealed partial class Text : Page
+    {
+        public ObservableCollection<URLShortcut> Shortcuts { get; set; }
+
+        public Text()
+        {
+            this.InitializeComponent();
+
+            Shortcuts = new ObservableCollection<URLShortcut>();
+            Shortcuts.Add(new URLShortcut() { Shortcut = new List<string>() { "Shift", "Win", "M" }, URL = "Hello" });
+            Shortcuts.Add(new URLShortcut() { Shortcut = new List<string>() { "Win", "P", }, URL = "Nice!" });
+            Shortcuts.Add(new URLShortcut() { Shortcut = new List<string>() { "Shift", "Win", "M" }, URL = "I like it" });
+            Shortcuts.Add(new URLShortcut() { Shortcut = new List<string>() { "Win", "U", }, URL = "Yes" });
+            Shortcuts.Add(new URLShortcut() { Shortcut = new List<string>() { "Ctrl", "P" }, URL = "OK" });
+        }
+
+        private async void NewShortcutBtn_Click(object sender, RoutedEventArgs e)
+        {
+            await KeyDialog.ShowAsync();
+        }
+
+        private async void ListView_ItemClick(object sender, ItemClickEventArgs e)
+        {
+            await KeyDialog.ShowAsync();
+        }
+    }
+}
diff --git a/src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/URLs.xaml b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/URLs.xaml
new file mode 100644
index 0000000000..06a2fbed00
--- /dev/null
+++ b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/URLs.xaml
@@ -0,0 +1,172 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<Page
+    x:Class="KeyboardManagerEditorUI.Pages.URLs"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    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"
+    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
+    mc:Ignorable="d">
+
+    <Grid Padding="16">
+        <StackPanel>
+            <TextBlock Foreground="{ThemeResource TextFillColorSecondaryBrush}" Text="URL shortcuts allow you to open a URL when you use the configured shortcut" />
+            <Button
+                x:Name="NewShortcutBtn"
+                Grid.Column="0"
+                Height="36"
+                Margin="0,24,0,0"
+                VerticalAlignment="Top"
+                Click="NewShortcutBtn_Click">
+
+                <StackPanel Orientation="Horizontal" Spacing="8">
+                    <TextBlock
+                        Margin="0,0,0,0"
+                        VerticalAlignment="Center"
+                        FontFamily="Segoe Fluent Icons"
+                        Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}"
+                        Text="&#xE109;" />
+                    <TextBlock Text="URL shortcut" />
+                </StackPanel>
+            </Button>
+            <StackPanel
+                Margin="0,12,0,0"
+                Orientation="Vertical"
+                Spacing="8">
+                <Grid
+                    Grid.Row="1"
+                    Grid.Column="1"
+                    HorizontalAlignment="Stretch"
+                    VerticalAlignment="Top"
+                    Background="{ThemeResource LayerFillColorDefaultBrush}"
+                    BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
+                    BorderThickness="1"
+                    CornerRadius="8">
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="48" />
+                        <RowDefinition Height="*" />
+                    </Grid.RowDefinitions>
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="236" />
+                        <ColumnDefinition Width="236" />
+                        <ColumnDefinition Width="*" />
+                        <ColumnDefinition Width="84" />
+                    </Grid.ColumnDefinitions>
+                    <TextBlock
+                        Grid.Column="0"
+                        Margin="16,-2,0,0"
+                        VerticalAlignment="Center"
+                        Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                        Text="Shortcut" />
+                    <AppBarSeparator
+                        Grid.Column="1"
+                        Margin="-6,4,0,4"
+                        HorizontalAlignment="Left" />
+                    <TextBlock
+                        Grid.Column="1"
+                        Margin="12,-2,0,0"
+                        HorizontalAlignment="Left"
+                        VerticalAlignment="Center"
+                        Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                        Text="URL" />
+
+                    <ListView
+                        Grid.Row="1"
+                        Grid.ColumnSpan="4"
+                        IsItemClickEnabled="True"
+                        ItemClick="ListView_ItemClick"
+                        ItemsSource="{x:Bind Shortcuts}"
+                        SelectionMode="None">
+                        <ListView.ItemTemplate>
+                            <DataTemplate x:DataType="helper:URLShortcut">
+                                <Grid Height="48">
+                                    <Grid.ColumnDefinitions>
+                                        <ColumnDefinition Width="232" />
+                                        <ColumnDefinition Width="238" />
+                                        <ColumnDefinition Width="*" />
+                                        <ColumnDefinition Width="84" />
+                                    </Grid.ColumnDefinitions>
+                                    <Rectangle
+                                        Grid.ColumnSpan="5"
+                                        Height="1"
+                                        Margin="-16,0,-16,0"
+                                        HorizontalAlignment="Stretch"
+                                        VerticalAlignment="Bottom"
+                                        Fill="{ThemeResource CardStrokeColorDefaultBrush}"
+                                        Opacity="0.8" />
+                                    <ItemsControl
+                                        Grid.Column="0"
+                                        VerticalAlignment="Center"
+                                        ItemsSource="{x:Bind Shortcut}">
+                                        <ItemsControl.ItemsPanel>
+                                            <ItemsPanelTemplate>
+                                                <StackPanel Orientation="Horizontal" Spacing="4" />
+                                            </ItemsPanelTemplate>
+                                        </ItemsControl.ItemsPanel>
+                                        <ItemsControl.ItemTemplate>
+                                            <DataTemplate>
+                                                <styles:KeyVisual
+                                                    HorizontalAlignment="Left"
+                                                    Content="{Binding}"
+                                                    VisualType="SmallOutline" />
+                                            </DataTemplate>
+                                        </ItemsControl.ItemTemplate>
+                                    </ItemsControl>
+                                    <HyperlinkButton
+                                        Grid.Column="1"
+                                        Margin="-12,0,0,0"
+                                        Content="{x:Bind URL}" />
+                                    <ToggleSwitch
+                                        Grid.ColumnSpan="4"
+                                        Margin="0,0,-112,0"
+                                        HorizontalAlignment="Right"
+                                        IsOn="True"
+                                        OffContent=""
+                                        OnContent="" />
+                                </Grid>
+                            </DataTemplate>
+                        </ListView.ItemTemplate>
+                    </ListView>
+                </Grid>
+            </StackPanel>
+        </StackPanel>
+        <ContentDialog
+            x:Name="KeyDialog"
+            Title="New URL shortcut"
+            Width="480"
+            Height="360"
+            MinWidth="600"
+            MaxWidth="600"
+            PrimaryButtonStyle="{StaticResource AccentButtonStyle}"
+            PrimaryButtonText="Save"
+            SecondaryButtonText="Cancel">
+            <StackPanel
+                Width="320"
+                Height="264"
+                Orientation="Vertical">
+                <TextBlock Margin="0,12,0,8" Text="Shortcut" />
+
+                <ToggleButton
+                    x:Name="OriginalToggleBtn"
+                    Padding="0,24,0,24"
+                    HorizontalAlignment="Stretch"
+                    Style="{StaticResource CustomShortcutToggleButtonStyle}">
+                    <ToggleButton.Content>
+                        <StackPanel Orientation="Horizontal" Spacing="8">
+                            <styles:KeyVisual Content="Shift" VisualType="SmallOutline" />
+                            <styles:KeyVisual Content="Win" VisualType="SmallOutline" />
+                            <styles:KeyVisual Content="M" VisualType="SmallOutline" />
+                        </StackPanel>
+                    </ToggleButton.Content>
+                </ToggleButton>
+                <TextBox
+                    Margin="0,24,0,0"
+                    Header="URL to open"
+                    Text="https://www.microsoft.com" />
+            </StackPanel>
+        </ContentDialog>
+    </Grid>
+</Page>
diff --git a/src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/URLs.xaml.cs b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/URLs.xaml.cs
new file mode 100644
index 0000000000..05a0b60040
--- /dev/null
+++ b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Pages/URLs.xaml.cs
@@ -0,0 +1,54 @@
+// 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.Collections.ObjectModel;
+using System.IO;
+using System.Linq;
+using System.Runtime.InteropServices.WindowsRuntime;
+using KeyboardManagerEditorUI.Helpers;
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Controls.Primitives;
+using Microsoft.UI.Xaml.Data;
+using Microsoft.UI.Xaml.Input;
+using Microsoft.UI.Xaml.Media;
+using Microsoft.UI.Xaml.Navigation;
+using Windows.Foundation;
+using Windows.Foundation.Collections;
+
+namespace KeyboardManagerEditorUI.Pages
+{
+    /// <summary>
+    /// An empty page that can be used on its own or navigated to within a Frame.
+    /// </summary>
+    public sealed partial class URLs : Page
+    {
+        public ObservableCollection<URLShortcut> Shortcuts { get; set; }
+
+        public URLs()
+        {
+            this.InitializeComponent();
+
+            Shortcuts = new ObservableCollection<URLShortcut>();
+            Shortcuts.Add(new URLShortcut() { Shortcut = new List<string>() { "Shift", "Win", "M" }, URL = "https://www.microsoft.com" });
+            Shortcuts.Add(new URLShortcut() { Shortcut = new List<string>() { "Win", "P", }, URL = "https://www.bing.com" });
+            Shortcuts.Add(new URLShortcut() { Shortcut = new List<string>() { "Shift", "Win", "M" }, URL = "https://www.windows.com" });
+            Shortcuts.Add(new URLShortcut() { Shortcut = new List<string>() { "Win", "U", }, URL = "https://www.bing.com" });
+            Shortcuts.Add(new URLShortcut() { Shortcut = new List<string>() { "Ctrl", "P" }, URL = "https://www.surface.com" });
+            Shortcuts.Add(new URLShortcut() { Shortcut = new List<string>() { "Alt", "Ctrl", "Shift" }, URL = "https://www.bing.com" });
+        }
+
+        private async void NewShortcutBtn_Click(object sender, RoutedEventArgs e)
+        {
+            await KeyDialog.ShowAsync();
+        }
+
+        private async void ListView_ItemClick(object sender, ItemClickEventArgs e)
+        {
+            await KeyDialog.ShowAsync();
+        }
+    }
+}
diff --git a/src/modules/keyboardmanager/KeyboardManagerEditorUI/Styles/CommonStyle.xaml b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Styles/CommonStyle.xaml
new file mode 100644
index 0000000000..0cc49d716b
--- /dev/null
+++ b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Styles/CommonStyle.xaml
@@ -0,0 +1,203 @@
+<?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="ContentDialogMaxWidth">960</x:Double>
+
+    <Style x:Key="CustomShortcutToggleButtonStyle" TargetType="ToggleButton">
+        <Setter Property="Background" Value="{ThemeResource ToggleButtonBackground}" />
+        <Setter Property="Foreground" Value="{ThemeResource ToggleButtonForeground}" />
+        <Setter Property="BorderBrush" Value="{ThemeResource ToggleButtonBorderBrush}" />
+        <Setter Property="BorderThickness" Value="1,1,1,1" />
+        <Setter Property="Padding" Value="{StaticResource ButtonPadding}" />
+        <Setter Property="HorizontalAlignment" Value="Left" />
+        <Setter Property="VerticalAlignment" Value="Center" />
+        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
+        <Setter Property="FontWeight" Value="Normal" />
+        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
+        <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
+        <Setter Property="FocusVisualMargin" Value="-3" />
+        <Setter Property="CornerRadius" Value="4" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="ToggleButton">
+                    <ContentPresenter
+                        x:Name="ContentPresenter"
+                        Padding="{TemplateBinding Padding}"
+                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                        AutomationProperties.AccessibilityView="Raw"
+                        Background="{TemplateBinding Background}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        Content="{TemplateBinding Content}"
+                        ContentTemplate="{TemplateBinding ContentTemplate}"
+                        ContentTransitions="{TemplateBinding ContentTransitions}"
+                        CornerRadius="{TemplateBinding CornerRadius}">
+                        <VisualStateManager.VisualStateGroups>
+                            <VisualStateGroup x:Name="CommonStates">
+                                <VisualState x:Name="Normal" />
+
+                                <VisualState x:Name="PointerOver">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBackgroundPointerOver}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBorderBrushPointerOver}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonForegroundPointerOver}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                </VisualState>
+                                <VisualState x:Name="Pressed">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBackgroundPressed}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBorderBrushPressed}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonForegroundPressed}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                </VisualState>
+                                <VisualState x:Name="Disabled">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBackgroundDisabled}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonForegroundDisabled}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBorderBrushDisabled}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                </VisualState>
+                                <VisualState x:Name="Checked">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonForegroundChecked}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBackgroundChecked}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderThickness">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="1,1,1,4" />
+                                        </ObjectAnimationUsingKeyFrames>
+
+                                    </Storyboard>
+                                </VisualState>
+                                <VisualState x:Name="CheckedPointerOver">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBackgroundPointerOver}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBackgroundCheckedPointerOver}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonForegroundCheckedPointerOver}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderThickness">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="1,1,1,4" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                </VisualState>
+                                <VisualState x:Name="CheckedPressed">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBackgroundPressed}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonForegroundCheckedPressed}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBackgroundCheckedPressed}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderThickness">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="1,1,1,4" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                </VisualState>
+                                <VisualState x:Name="CheckedDisabled">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBackgroundCheckedDisabled}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonForegroundCheckedDisabled}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBorderBrushCheckedDisabled}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                </VisualState>
+                                <VisualState x:Name="Indeterminate">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBackgroundIndeterminate}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonForegroundIndeterminate}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBorderBrushIndeterminate}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                </VisualState>
+                                <VisualState x:Name="IndeterminatePointerOver">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBackgroundIndeterminatePointerOver}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBorderBrushIndeterminatePointerOver}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonForegroundIndeterminatePointerOver}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                </VisualState>
+                                <VisualState x:Name="IndeterminatePressed">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBackgroundIndeterminatePressed}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBorderBrushIndeterminatePressed}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonForegroundIndeterminatePressed}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                </VisualState>
+                                <VisualState x:Name="IndeterminateDisabled">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBackgroundIndeterminateDisabled}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonForegroundIndeterminateDisabled}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBorderBrushIndeterminateDisabled}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                </VisualState>
+                            </VisualStateGroup>
+                        </VisualStateManager.VisualStateGroups>
+                    </ContentPresenter>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+</ResourceDictionary>
diff --git a/src/modules/keyboardmanager/KeyboardManagerEditorUI/Styles/InputControl.xaml b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Styles/InputControl.xaml
new file mode 100644
index 0000000000..4b29a1af5a
--- /dev/null
+++ b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Styles/InputControl.xaml
@@ -0,0 +1,104 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<UserControl
+    x:Class="KeyboardManagerEditorUI.Styles.InputControl"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:local="using:KeyboardManagerEditorUI.Styles"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    Loaded="UserControl_Loaded"
+    mc:Ignorable="d">
+
+    <StackPanel>
+
+
+        <Grid>
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="240" />
+                <ColumnDefinition Width="Auto" />
+                <ColumnDefinition Width="240" />
+            </Grid.ColumnDefinitions>
+            <Grid.RowDefinitions>
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+            </Grid.RowDefinitions>
+            <TextBlock Margin="0,12,0,0" Text="Original key(s)" />
+            <Grid Grid.Row="1" Margin="0,8,0,0">
+                <ToggleButton
+                    x:Name="OriginalToggleBtn"
+                    Padding="0,24,0,24"
+                    HorizontalAlignment="Stretch"
+                    Checked="OriginalToggleBtn_Checked"
+                    Style="{StaticResource CustomShortcutToggleButtonStyle}">
+                    <ToggleButton.Content>
+                        <ItemsControl x:Name="OriginalKeys">
+                            <ItemsControl.ItemsPanel>
+                                <ItemsPanelTemplate>
+                                    <StackPanel Orientation="Horizontal" Spacing="4" />
+                                </ItemsPanelTemplate>
+                            </ItemsControl.ItemsPanel>
+                            <ItemsControl.ItemTemplate>
+                                <DataTemplate>
+                                    <local:KeyVisual Content="{Binding}" VisualType="SmallOutline" />
+                                </DataTemplate>
+                            </ItemsControl.ItemTemplate>
+                        </ItemsControl>
+                    </ToggleButton.Content>
+                </ToggleButton>
+
+            </Grid>
+
+            <TextBlock
+                Grid.Row="1"
+                Grid.Column="1"
+                Margin="24,0,24,0"
+                HorizontalAlignment="Center"
+                VerticalAlignment="Center"
+                FontFamily="{ThemeResource SymbolThemeFontFamily}"
+                Text="&#xE0AB;" />
+
+            <TextBlock
+                Grid.Column="2"
+                Margin="0,12,0,0"
+                Text="New key(s)" />
+            <Grid
+                Grid.Row="1"
+                Grid.Column="2"
+                Margin="0,8,0,0">
+                <ToggleButton
+                    x:Name="RemappedToggleBtn"
+                    Padding="0,24,0,24"
+                    HorizontalAlignment="Stretch"
+                    Checked="RemappedToggleBtn_Checked"
+                    Style="{StaticResource CustomShortcutToggleButtonStyle}">
+                    <ToggleButton.Content>
+                        <ItemsControl x:Name="RemappedKeys">
+                            <ItemsControl.ItemsPanel>
+                                <ItemsPanelTemplate>
+                                    <StackPanel Orientation="Horizontal" Spacing="4" />
+                                </ItemsPanelTemplate>
+                            </ItemsControl.ItemsPanel>
+                            <ItemsControl.ItemTemplate>
+                                <DataTemplate>
+                                    <local:KeyVisual Content="{Binding}" VisualType="Small" />
+                                </DataTemplate>
+                            </ItemsControl.ItemTemplate>
+                        </ItemsControl>
+                    </ToggleButton.Content>
+                </ToggleButton>
+
+            </Grid>
+        </Grid>
+
+        <CheckBox
+            x:Name="AllAppsCheckBox"
+            Margin="0,24,0,12"
+            Content="Only apply this remapping to a specific application"
+            IsChecked="True" />
+        <TextBox
+            x:Name="AppNameTextBox"
+            Header="Application name"
+            IsEnabled="{Binding ElementName=AllAppsCheckBox, Path=IsChecked}"
+            PlaceholderText="e.g.: outlook.exe" />
+    </StackPanel>
+</UserControl>
diff --git a/src/modules/keyboardmanager/KeyboardManagerEditorUI/Styles/InputControl.xaml.cs b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Styles/InputControl.xaml.cs
new file mode 100644
index 0000000000..5b319e9c5a
--- /dev/null
+++ b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Styles/InputControl.xaml.cs
@@ -0,0 +1,80 @@
+// 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.IO;
+using System.Linq;
+using System.Runtime.InteropServices.WindowsRuntime;
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Controls.Primitives;
+using Microsoft.UI.Xaml.Data;
+using Microsoft.UI.Xaml.Input;
+using Microsoft.UI.Xaml.Media;
+using Microsoft.UI.Xaml.Navigation;
+using Windows.Foundation;
+using Windows.Foundation.Collections;
+
+namespace KeyboardManagerEditorUI.Styles
+{
+    public sealed partial class InputControl : UserControl
+    {
+        public InputControl()
+        {
+            this.InitializeComponent();
+        }
+
+        public void SetOriginalKeys(List<string> keys)
+        {
+            OriginalKeys.ItemsSource = keys;
+        }
+
+        public void SetRemappedKeys(List<string> keys)
+        {
+            RemappedKeys.ItemsSource = keys;
+        }
+
+        private void OriginalToggleBtn_Checked(object sender, RoutedEventArgs e)
+        {
+            RemappedToggleBtn.IsChecked = false;
+        }
+
+        private void RemappedToggleBtn_Checked(object sender, RoutedEventArgs e)
+        {
+            OriginalToggleBtn.IsChecked = false;
+        }
+
+        public void SetApp(bool isSpecificApp, string appName)
+        {
+            if (isSpecificApp)
+            {
+                AllAppsCheckBox.IsChecked = true;
+                AppNameTextBox.Text = appName;
+                AppNameTextBox.Visibility = Visibility.Visible;
+            }
+            else
+            {
+                AllAppsCheckBox.IsChecked = false;
+                AppNameTextBox.Visibility = Visibility.Collapsed;
+            }
+        }
+
+        private void AllAppsCheckBox_Checked(object sender, RoutedEventArgs e)
+        {
+            AppNameTextBox.Visibility = Visibility.Visible;
+        }
+
+        private void AllAppsCheckBox_Unchecked(object sender, RoutedEventArgs e)
+        {
+            AppNameTextBox.Visibility = Visibility.Collapsed;
+        }
+
+        private void UserControl_Loaded(object sender, RoutedEventArgs e)
+        {
+            AllAppsCheckBox.Checked += AllAppsCheckBox_Checked;
+            AllAppsCheckBox.Unchecked += AllAppsCheckBox_Unchecked;
+        }
+    }
+}
diff --git a/src/modules/keyboardmanager/KeyboardManagerEditorUI/Styles/KeyVisual.cs b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Styles/KeyVisual.cs
new file mode 100644
index 0000000000..058377d1ce
--- /dev/null
+++ b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Styles/KeyVisual.cs
@@ -0,0 +1,198 @@
+// 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
new file mode 100644
index 0000000000..5bb67875cc
--- /dev/null
+++ b/src/modules/keyboardmanager/KeyboardManagerEditorUI/Styles/KeyVisual.xaml
@@ -0,0 +1,156 @@
+<?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>