[OOBE] Out of box experience window (#9973)

src/settings-ui/Microsoft.PowerToys.Settings.UI/Helpers/NativeMethods.cs

@@ -6,7 +6,7 @@ using System.Runtime.InteropServices;
 
 namespace Microsoft.PowerToys.Settings.UI.Helpers
 {
-    internal static class NativeMethods
+    public static class NativeMethods
     {
         [DllImport("user32.dll")]
         internal static extern uint SendInput(uint nInputs, NativeKeyboardHelper.INPUT[] pInputs, int cbSize);
@@ -14,7 +14,12 @@ namespace Microsoft.PowerToys.Settings.UI.Helpers
         [DllImport("user32.dll", CharSet = CharSet.Auto, CallingConvention = CallingConvention.StdCall, SetLastError = true)]
         internal static extern short GetAsyncKeyState(int vKey);
 
+#pragma warning disable CA1401 // P/Invokes should not be visible
         [DllImport("user32.dll")]
         public static extern bool ShowWindow(System.IntPtr hWnd, int nCmdShow);
+
+        [DllImport("user32.dll")]
+        public static extern bool AllowSetForegroundWindow(int dwProcessId);
+#pragma warning restore CA1401 // P/Invokes should not be visible
     }
 }

src/settings-ui/Microsoft.PowerToys.Settings.UI/Microsoft.PowerToys.Settings.UI.csproj

@@ -111,6 +111,42 @@
     <Compile Include="Helpers\StartProcessHelper.cs" />
     <Compile Include="ICoreWindowInterop.cs" />
     <Compile Include="Interop.cs" />
+    <Compile Include="OOBE\Enums\PowerToysModulesEnum.cs" />
+    <Compile Include="OOBE\ViewModel\OobeShellViewModel.cs" />
+    <Compile Include="OOBE\ViewModel\OobePowerToysModule.cs" />
+    <Compile Include="OOBE\Views\OobeColorPicker.xaml.cs">
+      <DependentUpon>OobeColorPicker.xaml</DependentUpon>
+    </Compile>
+    <Compile Include="OOBE\Views\OobeFancyZones.xaml.cs">
+      <DependentUpon>OobeFancyZones.xaml</DependentUpon>
+    </Compile>
+    <Compile Include="OOBE\Views\OobeFileExplorer.xaml.cs">
+      <DependentUpon>OobeFileExplorer.xaml</DependentUpon>
+    </Compile>
+    <Compile Include="OOBE\Views\OobeImageResizer.xaml.cs">
+      <DependentUpon>OobeImageResizer.xaml</DependentUpon>
+    </Compile>
+    <Compile Include="OOBE\Views\OobeKBM.xaml.cs">
+      <DependentUpon>OobeKBM.xaml</DependentUpon>
+    </Compile>
+    <Compile Include="OOBE\Views\OobeOverview.xaml.cs">
+      <DependentUpon>OobeOverview.xaml</DependentUpon>
+    </Compile>
+    <Compile Include="OOBE\Views\OobePowerRename.xaml.cs">
+      <DependentUpon>OobePowerRename.xaml</DependentUpon>
+    </Compile>
+    <Compile Include="OOBE\Views\OobeRun.xaml.cs">
+      <DependentUpon>OobeRun.xaml</DependentUpon>
+    </Compile>
+    <Compile Include="OOBE\Views\OobeShellPage.xaml.cs">
+      <DependentUpon>OobeShellPage.xaml</DependentUpon>
+    </Compile>
+    <Compile Include="OOBE\Views\OobeShortcutGuide.xaml.cs">
+      <DependentUpon>OobeShortcutGuide.xaml</DependentUpon>
+    </Compile>
+    <Compile Include="OOBE\Views\OobeVideoConference.xaml.cs">
+      <DependentUpon>OobeVideoConference.xaml</DependentUpon>
+    </Compile>
     <Compile Include="Services\ActivationService.cs" />
     <Compile Include="Services\NavigationService.cs" />
     <Compile Include="ViewModels\Commands\ButtonClickCommand.cs" />
@@ -153,11 +189,30 @@
     </AppxManifest>
   </ItemGroup>
   <ItemGroup>
+    <Content Include="Assets\FluentIcons\FluentIconsColorPicker.png" />
+    <Content Include="Assets\FluentIcons\FluentIconsFancyZones.png" />
+    <Content Include="Assets\FluentIcons\FluentIconsFileExplorerPreview.png" />
+    <Content Include="Assets\FluentIcons\FluentIconsImageResizer.png" />
+    <Content Include="Assets\FluentIcons\FluentIconsKeyboardManager.png" />
+    <Content Include="Assets\FluentIcons\FluentIconsPowerRename.png" />
+    <Content Include="Assets\FluentIcons\FluentIconsPowerToys.png" />
+    <Content Include="Assets\FluentIcons\FluentIconsPowerToysRun.png" />
+    <Content Include="Assets\FluentIcons\FluentIconsShortcutGuide.png" />
+    <Content Include="Assets\FluentIcons\FluentIconsVideoConferenceMute.png" />
     <Content Include="Assets\Logo.scale-200.png" />
     <Content Include="Assets\Modules\ColorPicker.png" />
     <Content Include="Assets\Modules\FancyZones.png" />
     <Content Include="Assets\Modules\ImageResizer.png" />
     <Content Include="Assets\Modules\KBM.png" />
+    <Content Include="Assets\Modules\OOBE\ColorPicker.gif" />
+    <Content Include="Assets\Modules\OOBE\FancyZones.gif" />
+    <Content Include="Assets\Modules\OOBE\FileExplorer.png" />
+    <Content Include="Assets\Modules\OOBE\ImageResizer.gif" />
+    <Content Include="Assets\Modules\OOBE\KBM.gif" />
+    <Content Include="Assets\Modules\OOBE\PowerRename.gif" />
+    <Content Include="Assets\Modules\OOBE\Run.gif" />
+    <Content Include="Assets\Modules\OOBE\OOBEShortcutGuide.png" />
+    <Content Include="Assets\Modules\OOBE\VideoConferenceMute.png" />
     <Content Include="Assets\Modules\PowerLauncher.png" />
     <Content Include="Assets\Modules\PowerPreview.png" />
     <Content Include="Assets\Modules\PowerRename.png" />
@@ -216,6 +271,50 @@
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
     </Page>
+    <Page Include="OOBE\Views\OobeColorPicker.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+    <Page Include="OOBE\Views\OobeFancyZones.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+    <Page Include="OOBE\Views\OobeFileExplorer.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+    <Page Include="OOBE\Views\OobeImageResizer.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+    <Page Include="OOBE\Views\OobeKBM.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+    <Page Include="OOBE\Views\OobeOverview.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+    <Page Include="OOBE\Views\OobePowerRename.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+    <Page Include="OOBE\Views\OobeRun.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+    <Page Include="OOBE\Views\OobeShellPage.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+    <Page Include="OOBE\Views\OobeShortcutGuide.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+    <Page Include="OOBE\Views\OobeVideoConference.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="Styles\Button.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
@@ -300,6 +399,7 @@
       <Name>Microsoft.PowerToys.Settings.UI.Library</Name>
     </ProjectReference>
   </ItemGroup>
+  <ItemGroup />
   <PropertyGroup Condition=" '$(VisualStudioVersion)' == '' or '$(VisualStudioVersion)' &lt; '14.0' ">
     <VisualStudioVersion>14.0</VisualStudioVersion>
   </PropertyGroup>

src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Enums/PowerToysModulesEnum.cs

@@ -0,0 +1,20 @@
+// 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.
+
+namespace Microsoft.PowerToys.Settings.UI.OOBE.Enums
+{
+    public enum PowerToysModulesEnum
+    {
+        Overview = 0,
+        ColorPicker,
+        FancyZones,
+        ImageResizer,
+        KBM,
+        Run,
+        PowerRename,
+        FileExplorer,
+        ShortcutGuide,
+        VideoConference,
+    }
+}

src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/ViewModel/OobePowerToysModule.cs

@@ -0,0 +1,79 @@
+// Copyright (c) Microsoft Corporation
+// The Microsoft Corporation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using Microsoft.PowerToys.Settings.UI.Library.Telemetry.Events;
+using Microsoft.PowerToys.Telemetry;
+
+namespace Microsoft.PowerToys.Settings.UI.OOBE.ViewModel
+{
+    public class OobePowerToysModule
+    {
+        private System.Diagnostics.Stopwatch timeOpened = new System.Diagnostics.Stopwatch();
+
+        public string ModuleName { get; set; }
+
+        public string Tag { get; set; }
+
+        public bool IsNew { get; set; }
+
+        public string Image { get; set; }
+
+        public string Icon { get; set; }
+
+        public string FluentIcon { get; set; }
+
+        public string PreviewImageSource { get; set; }
+
+        public string Description { get; set; }
+
+        public string Link { get; set; }
+
+        public string DescriptionLink { get; set; }
+
+        public OobePowerToysModule()
+        {
+        }
+
+        public OobePowerToysModule(OobePowerToysModule other)
+        {
+            if (other == null)
+            {
+                return;
+            }
+
+            ModuleName = other.ModuleName;
+            Tag = other.Tag;
+            IsNew = other.IsNew;
+            Image = other.Image;
+            Icon = other.Icon;
+            FluentIcon = other.FluentIcon;
+            PreviewImageSource = other.PreviewImageSource;
+            Description = other.Description;
+            Link = other.Link;
+            DescriptionLink = other.DescriptionLink;
+            timeOpened = other.timeOpened;
+        }
+
+        public void LogOpeningSettingsEvent()
+        {
+            PowerToysTelemetry.Log.WriteEvent(new OobeSettingsEvent() { ModuleName = this.ModuleName });
+        }
+
+        public void LogRunningModuleEvent()
+        {
+            PowerToysTelemetry.Log.WriteEvent(new OobeModuleRunEvent() { ModuleName = this.ModuleName });
+        }
+
+        public void LogOpeningModuleEvent()
+        {
+            timeOpened.Start();
+        }
+
+        public void LogClosingModuleEvent()
+        {
+            timeOpened.Stop();
+            PowerToysTelemetry.Log.WriteEvent(new OobeSectionEvent() { Section = this.ModuleName, TimeOpenedMs = timeOpened.ElapsedMilliseconds });
+        }
+    }
+}

src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/ViewModel/OobeShellViewModel.cs

@@ -0,0 +1,13 @@
+// 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.
+
+namespace Microsoft.PowerToys.Settings.UI.OOBE.ViewModel
+{
+    public class OobeShellViewModel
+    {
+        public OobeShellViewModel()
+        {
+        }
+    }
+}

src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeColorPicker.xaml

@@ -0,0 +1,74 @@
+<Page
+    x:Class="Microsoft.PowerToys.Settings.UI.OOBE.Views.OobeColorPicker"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:Microsoft.PowerToys.Settings.UI.OOBE.Views"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d"
+    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+
+    <Grid>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="280" />
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
+
+        <Image Stretch="UniformToFill"
+               Source="{x:Bind ViewModel.PreviewImageSource}" />
+
+        <ScrollViewer Grid.Row="1"
+                      VerticalScrollBarVisibility="Auto">
+            <StackPanel Orientation="Vertical"
+                        Margin="32,24,0,0"
+                        VerticalAlignment="Top">
+                
+                <TextBlock Text="{x:Bind ViewModel.ModuleName}"
+                           Style="{StaticResource PageTitleStyle}" />
+                
+                <TextBlock TextWrapping="Wrap"
+                           Margin="0,4,0,0"
+                           Text="{x:Bind ViewModel.Description}" />
+
+                <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}" Margin="0,0,0,4">
+                    <TextBlock>
+                                <Run x:Uid="Oobe_LearnMore" />
+                                <Run Text="{x:Bind ViewModel.ModuleName}" />
+                    </TextBlock>
+                </HyperlinkButton>
+
+                <TextBlock x:Uid="Oobe_HowToUse"
+                           Style="{StaticResource OobeSubtitleStyle}"/>
+                
+            <TextBlock x:Uid="Oobe_ColorPicker_HowToUse"
+                       TextWrapping="Wrap"/>
+            
+            <TextBlock x:Uid="Oobe_TipsAndTricks"
+                       Style="{StaticResource OobeSubtitleStyle}"/>
+                
+            <TextBlock x:Uid="Oobe_ColorPicker_TipsAndTricks"
+                       TextWrapping="Wrap" />
+            
+            <StackPanel Orientation="Horizontal"
+                        Spacing="4"
+                        Margin="0,32,0,0">
+                <Button Style="{StaticResource AccentButtonStyle}" Click="Start_ColorPicker_Click">
+                    <TextBlock>
+                        <Run x:Uid="Oobe_Launch"/>
+                        <Run Text="{x:Bind ViewModel.ModuleName}"/>
+                    </TextBlock>
+                </Button>
+                    <Button Click="SettingsLaunchButton_Click">
+                        <StackPanel Orientation="Horizontal"
+                                    Spacing="8">
+                            <TextBlock Text="&#xE115;"
+                                       Margin="0,3,0,0"
+                                       FontFamily="Segoe MDL2 Assets" />
+                            <TextBlock x:Uid="OOBE_Settings" />
+                        </StackPanel>
+                    </Button>
+                </StackPanel>
+        </StackPanel>
+        </ScrollViewer>
+    </Grid>
+</Page>

src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeColorPicker.xaml.cs

@@ -0,0 +1,61 @@
+// 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.Threading;
+using Microsoft.PowerToys.Settings.UI.OOBE.Enums;
+using Microsoft.PowerToys.Settings.UI.OOBE.ViewModel;
+using Microsoft.PowerToys.Settings.UI.Views;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Navigation;
+
+namespace Microsoft.PowerToys.Settings.UI.OOBE.Views
+{
+    /// <summary>
+    /// An empty page that can be used on its own or navigated to within a Frame.
+    /// </summary>
+    public sealed partial class OobeColorPicker : Page
+    {
+        public OobePowerToysModule ViewModel { get; set; }
+
+        public OobeColorPicker()
+        {
+            this.InitializeComponent();
+            ViewModel = new OobePowerToysModule(OobeShellPage.OobeShellHandler.Modules[(int)PowerToysModulesEnum.ColorPicker]);
+            DataContext = ViewModel;
+        }
+
+        private void Start_ColorPicker_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
+        {
+            if (OobeShellPage.ColorPickerSharedEventCallback != null)
+            {
+                using (var eventHandle = new EventWaitHandle(false, EventResetMode.AutoReset, OobeShellPage.ColorPickerSharedEventCallback()))
+                {
+                    eventHandle.Set();
+                }
+            }
+
+            ViewModel.LogRunningModuleEvent();
+        }
+
+        private void SettingsLaunchButton_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
+        {
+            if (OobeShellPage.OpenMainWindowCallback != null)
+            {
+                OobeShellPage.OpenMainWindowCallback(typeof(ColorPickerPage));
+            }
+
+            ViewModel.LogOpeningSettingsEvent();
+        }
+
+        protected override void OnNavigatedTo(NavigationEventArgs e)
+        {
+            ViewModel.LogOpeningModuleEvent();
+        }
+
+        protected override void OnNavigatedFrom(NavigationEventArgs e)
+        {
+            ViewModel.LogClosingModuleEvent();
+        }
+    }
+}

src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeFancyZones.xaml

@@ -0,0 +1,66 @@
+<Page
+    x:Class="Microsoft.PowerToys.Settings.UI.OOBE.Views.OobeFancyZones"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:Microsoft.PowerToys.Settings.UI.OOBE.Views"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d"
+    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+
+    <Grid>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="280" />
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
+
+        <Image Stretch="UniformToFill"
+               Height="280"
+               Source="{x:Bind ViewModel.PreviewImageSource}" />
+
+        <ScrollViewer Grid.Row="1"
+                      VerticalScrollBarVisibility="Auto">
+            <StackPanel Orientation="Vertical"
+                        Margin="32,24,32,24"
+                        VerticalAlignment="Top">
+                <TextBlock Text="{x:Bind ViewModel.ModuleName}"
+                           Style="{StaticResource PageTitleStyle}" />
+                <TextBlock TextWrapping="Wrap"
+                           Margin="0,4,0,0"
+                           Text="{x:Bind ViewModel.Description}" />
+
+                <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}"
+                                 Margin="0,0,0,4">
+                    <TextBlock>
+                                <Run x:Uid="Oobe_LearnMore" />
+                                <Run Text="{x:Bind ViewModel.ModuleName}" />
+                    </TextBlock>
+                </HyperlinkButton>
+                
+                <TextBlock x:Uid="Oobe_HowToUse"
+                           Style="{StaticResource OobeSubtitleStyle}" />
+                <TextBlock x:Uid="Oobe_FancyZones_HowToUse"
+                           TextWrapping="Wrap" />
+
+                <TextBlock x:Uid="Oobe_TipsAndTricks"
+                           Style="{StaticResource OobeSubtitleStyle}" />
+                <TextBlock x:Uid="Oobe_FancyZones_TipsAndTricks"
+                           TextWrapping="Wrap" />
+
+                <StackPanel Orientation="Horizontal"
+                            Spacing="4"
+                            Margin="0,32,0,0">
+                    <Button Click="SettingsLaunchButton_Click">
+                        <StackPanel Orientation="Horizontal"
+                                    Spacing="8">
+                            <TextBlock Text="&#xE115;"
+                                       Margin="0,3,0,0"
+                                       FontFamily="Segoe MDL2 Assets" />
+                            <TextBlock x:Uid="OOBE_Settings" />
+                        </StackPanel>
+                    </Button>
+                </StackPanel>
+            </StackPanel>
+        </ScrollViewer>
+    </Grid>
+</Page>

src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeFancyZones.xaml.cs

@@ -0,0 +1,47 @@
+// Copyright (c) Microsoft Corporation
+// The Microsoft Corporation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using Microsoft.PowerToys.Settings.UI.OOBE.Enums;
+using Microsoft.PowerToys.Settings.UI.OOBE.ViewModel;
+using Microsoft.PowerToys.Settings.UI.Views;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Navigation;
+
+namespace Microsoft.PowerToys.Settings.UI.OOBE.Views
+{
+    /// <summary>
+    /// An empty page that can be used on its own or navigated to within a Frame.
+    /// </summary>
+    public sealed partial class OobeFancyZones : Page
+    {
+        public OobePowerToysModule ViewModel { get; set; }
+
+        public OobeFancyZones()
+        {
+            this.InitializeComponent();
+            ViewModel = new OobePowerToysModule(OobeShellPage.OobeShellHandler.Modules[(int)PowerToysModulesEnum.FancyZones]);
+            DataContext = ViewModel;
+        }
+
+        private void SettingsLaunchButton_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
+        {
+            if (OobeShellPage.OpenMainWindowCallback != null)
+            {
+                OobeShellPage.OpenMainWindowCallback(typeof(FancyZonesPage));
+            }
+
+            ViewModel.LogOpeningSettingsEvent();
+        }
+
+        protected override void OnNavigatedTo(NavigationEventArgs e)
+        {
+            ViewModel.LogOpeningModuleEvent();
+        }
+
+        protected override void OnNavigatedFrom(NavigationEventArgs e)
+        {
+            ViewModel.LogClosingModuleEvent();
+        }
+    }
+}

src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeFileExplorer.xaml

@@ -0,0 +1,65 @@
+<Page x:Class="Microsoft.PowerToys.Settings.UI.OOBE.Views.OobeFileExplorer"
+      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:local="using:Microsoft.PowerToys.Settings.UI.OOBE.Views"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      mc:Ignorable="d"
+      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+
+    <Grid>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="280" />
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
+
+        <Image Stretch="UniformToFill"
+               Height="280"
+               Grid.Row="0"
+               Source="{x:Bind ViewModel.PreviewImageSource}" />
+
+        <ScrollViewer Grid.Row="1"
+                      VerticalScrollBarVisibility="Auto">
+            <StackPanel Orientation="Vertical"
+                        Margin="32,24,32,24"
+                        VerticalAlignment="Top">
+
+                <TextBlock Text="{x:Bind ViewModel.ModuleName}"
+                           Style="{StaticResource PageTitleStyle}" />
+
+                <TextBlock Margin="0,4,0,0"
+                           TextWrapping="Wrap"
+                           Text="{x:Bind ViewModel.Description}" />
+
+                <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}"
+                                 Margin="0,0,0,4">
+                    <TextBlock>
+                                <Run x:Uid="Oobe_LearnMore" />
+                                <Run Text="{x:Bind ViewModel.ModuleName}" />
+                    </TextBlock>
+                </HyperlinkButton>
+
+                <TextBlock x:Uid="Oobe_HowToEnable"
+                           Style="{StaticResource OobeSubtitleStyle}" />
+
+                <TextBlock x:Uid="Oobe_FileExplorer_HowToEnable"
+                           TextWrapping="Wrap" />
+
+                <StackPanel Orientation="Horizontal"
+                            Spacing="4"
+                            Margin="0,32,0,0">
+
+                    <Button Click="SettingsLaunchButton_Click">
+                        <StackPanel Orientation="Horizontal"
+                                    Spacing="8">
+                            <TextBlock Text="&#xE115;"
+                                       Margin="0,3,0,0"
+                                       FontFamily="Segoe MDL2 Assets" />
+                            <TextBlock x:Uid="OOBE_Settings" />
+                        </StackPanel>
+                    </Button>
+                </StackPanel>
+            </StackPanel>
+        </ScrollViewer>
+    </Grid>
+</Page>

src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeFileExplorer.xaml.cs

@@ -0,0 +1,47 @@
+// Copyright (c) Microsoft Corporation
+// The Microsoft Corporation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using Microsoft.PowerToys.Settings.UI.OOBE.Enums;
+using Microsoft.PowerToys.Settings.UI.OOBE.ViewModel;
+using Microsoft.PowerToys.Settings.UI.Views;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Navigation;
+
+namespace Microsoft.PowerToys.Settings.UI.OOBE.Views
+{
+    /// <summary>
+    /// An empty page that can be used on its own or navigated to within a Frame.
+    /// </summary>
+    public sealed partial class OobeFileExplorer : Page
+    {
+        public OobePowerToysModule ViewModel { get; set; }
+
+        public OobeFileExplorer()
+        {
+            this.InitializeComponent();
+            ViewModel = new OobePowerToysModule(OobeShellPage.OobeShellHandler.Modules[(int)PowerToysModulesEnum.FileExplorer]);
+            DataContext = ViewModel;
+        }
+
+        private void SettingsLaunchButton_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
+        {
+            if (OobeShellPage.OpenMainWindowCallback != null)
+            {
+                OobeShellPage.OpenMainWindowCallback(typeof(PowerPreviewPage));
+            }
+
+            ViewModel.LogOpeningSettingsEvent();
+        }
+
+        protected override void OnNavigatedTo(NavigationEventArgs e)
+        {
+            ViewModel.LogOpeningModuleEvent();
+        }
+
+        protected override void OnNavigatedFrom(NavigationEventArgs e)
+        {
+            ViewModel.LogClosingModuleEvent();
+        }
+    }
+}

src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeImageResizer.xaml

@@ -0,0 +1,71 @@
+<Page
+    x:Class="Microsoft.PowerToys.Settings.UI.OOBE.Views.OobeImageResizer"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:Microsoft.PowerToys.Settings.UI.OOBE.Views"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d"
+    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+
+    <Grid>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="280" />
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
+
+        <Image Stretch="UniformToFill"
+               Height="280"
+               Grid.Row="0"
+               Source="{x:Bind ViewModel.PreviewImageSource}" />
+
+        <ScrollViewer Grid.Row="1"
+                      VerticalScrollBarVisibility="Auto">
+            <StackPanel Orientation="Vertical"
+                        Margin="32,24,32,24"
+                        VerticalAlignment="Top">
+
+                <TextBlock Text="{x:Bind ViewModel.ModuleName}"
+                           Style="{StaticResource PageTitleStyle}" />
+
+                <TextBlock Margin="0,4,0,0"
+                           TextWrapping="Wrap"
+                           Text="{x:Bind ViewModel.Description}" />
+
+                <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}"
+                                 Margin="0,0,0,4">
+                    <TextBlock>
+                                <Run x:Uid="Oobe_LearnMore" />
+                                <Run Text="{x:Bind ViewModel.ModuleName}" />
+                    </TextBlock>
+                </HyperlinkButton>
+
+                <TextBlock x:Uid="Oobe_HowToLaunch"
+                           Style="{StaticResource OobeSubtitleStyle}" />
+
+                <TextBlock x:Uid="Oobe_ImageResizer_HowToLaunch"
+                           TextWrapping="Wrap" />
+
+                <TextBlock x:Uid="Oobe_TipsAndTricks"
+                           Style="{StaticResource OobeSubtitleStyle}" />
+
+                <TextBlock x:Uid="Oobe_ImageResizer_TipsAndTricks"
+                           TextWrapping="Wrap" />
+
+                <StackPanel Orientation="Horizontal"
+                            Spacing="4"
+                            Margin="0,32,0,0">
+                    <Button Click="SettingsLaunchButton_Click">
+                        <StackPanel Orientation="Horizontal"
+                                    Spacing="8">
+                            <TextBlock Text="&#xE115;"
+                                       Margin="0,3,0,0"
+                                       FontFamily="Segoe MDL2 Assets" />
+                            <TextBlock Text="Settings" />
+                        </StackPanel>
+                    </Button>
+                </StackPanel>
+            </StackPanel>
+        </ScrollViewer>
+    </Grid>
+</Page>

src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeImageResizer.xaml.cs

@@ -0,0 +1,47 @@
+// Copyright (c) Microsoft Corporation
+// The Microsoft Corporation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using Microsoft.PowerToys.Settings.UI.OOBE.Enums;
+using Microsoft.PowerToys.Settings.UI.OOBE.ViewModel;
+using Microsoft.PowerToys.Settings.UI.Views;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Navigation;
+
+namespace Microsoft.PowerToys.Settings.UI.OOBE.Views
+{
+    /// <summary>
+    /// An empty page that can be used on its own or navigated to within a Frame.
+    /// </summary>
+    public sealed partial class OobeImageResizer : Page
+    {
+        public OobePowerToysModule ViewModel { get; set; }
+
+        public OobeImageResizer()
+        {
+            this.InitializeComponent();
+            ViewModel = new OobePowerToysModule(OobeShellPage.OobeShellHandler.Modules[(int)PowerToysModulesEnum.ImageResizer]);
+            DataContext = ViewModel;
+        }
+
+        private void SettingsLaunchButton_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
+        {
+            if (OobeShellPage.OpenMainWindowCallback != null)
+            {
+                OobeShellPage.OpenMainWindowCallback(typeof(ImageResizerPage));
+            }
+
+            ViewModel.LogOpeningSettingsEvent();
+        }
+
+        protected override void OnNavigatedTo(NavigationEventArgs e)
+        {
+            ViewModel.LogOpeningModuleEvent();
+        }
+
+        protected override void OnNavigatedFrom(NavigationEventArgs e)
+        {
+            ViewModel.LogClosingModuleEvent();
+        }
+    }
+}

src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeKBM.xaml

@@ -0,0 +1,68 @@
+<Page x:Class="Microsoft.PowerToys.Settings.UI.OOBE.Views.OobeKBM"
+      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:local="using:Microsoft.PowerToys.Settings.UI.OOBE.Views"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      mc:Ignorable="d"
+      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+
+    <Grid>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="280" />
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
+
+        <Image Stretch="UniformToFill"
+               Source="{x:Bind ViewModel.PreviewImageSource}" />
+
+        <ScrollViewer Grid.Row="1"
+                      VerticalScrollBarVisibility="Auto">
+            <StackPanel Orientation="Vertical"
+                        Margin="32,24,32,24"
+                        VerticalAlignment="Top">
+
+                <TextBlock Text="{x:Bind ViewModel.ModuleName}"
+                           Style="{StaticResource PageTitleStyle}" />
+
+                <TextBlock Margin="0,4,0,0"
+                           TextWrapping="Wrap"
+                           Text="{x:Bind ViewModel.Description}" />
+
+                <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}"
+                                 Margin="0,0,0,4">
+                    <TextBlock>
+                                <Run x:Uid="Oobe_LearnMore" />
+                                <Run Text="{x:Bind ViewModel.ModuleName}" />
+                    </TextBlock>
+                </HyperlinkButton>
+
+                <TextBlock x:Uid="Oobe_HowToCreateMappings"
+                           Style="{StaticResource OobeSubtitleStyle}" />
+
+                <TextBlock x:Uid="Oobe_KBM_HowToCreateMappings"
+                           TextWrapping="Wrap" />
+
+                <TextBlock x:Uid="Oobe_TipsAndTricks"
+                           Style="{StaticResource OobeSubtitleStyle}" />
+
+                <TextBlock x:Uid="Oobe_KBM_TipsAndTricks"
+                           TextWrapping="Wrap" />
+
+                <StackPanel Orientation="Horizontal"
+                            Spacing="4"
+                            Margin="0,32,0,0">
+                    <Button Click="SettingsLaunchButton_Click">
+                        <StackPanel Orientation="Horizontal"
+                                    Spacing="8">
+                            <TextBlock Text="&#xE115;"
+                                       Margin="0,3,0,0"
+                                       FontFamily="Segoe MDL2 Assets" />
+                            <TextBlock Text="Settings" />
+                        </StackPanel>
+                    </Button>
+                </StackPanel>
+            </StackPanel>
+        </ScrollViewer>
+    </Grid>
+</Page>

src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeKBM.xaml.cs

@@ -0,0 +1,47 @@
+// Copyright (c) Microsoft Corporation
+// The Microsoft Corporation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using Microsoft.PowerToys.Settings.UI.OOBE.Enums;
+using Microsoft.PowerToys.Settings.UI.OOBE.ViewModel;
+using Microsoft.PowerToys.Settings.UI.Views;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Navigation;
+
+namespace Microsoft.PowerToys.Settings.UI.OOBE.Views
+{
+    /// <summary>
+    /// An empty page that can be used on its own or navigated to within a Frame.
+    /// </summary>
+    public sealed partial class OobeKBM : Page
+    {
+        public OobePowerToysModule ViewModel { get; set; }
+
+        public OobeKBM()
+        {
+            this.InitializeComponent();
+            ViewModel = new OobePowerToysModule(OobeShellPage.OobeShellHandler.Modules[(int)PowerToysModulesEnum.KBM]);
+            DataContext = ViewModel;
+        }
+
+        private void SettingsLaunchButton_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
+        {
+            if (OobeShellPage.OpenMainWindowCallback != null)
+            {
+                OobeShellPage.OpenMainWindowCallback(typeof(KeyboardManagerPage));
+            }
+
+            ViewModel.LogOpeningSettingsEvent();
+        }
+
+        protected override void OnNavigatedTo(NavigationEventArgs e)
+        {
+            ViewModel.LogOpeningModuleEvent();
+        }
+
+        protected override void OnNavigatedFrom(NavigationEventArgs e)
+        {
+            ViewModel.LogClosingModuleEvent();
+        }
+    }
+}

src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeOverview.xaml

@@ -0,0 +1,59 @@
+<Page x:Class="Microsoft.PowerToys.Settings.UI.OOBE.Views.OobeOverview"
+      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:local="using:Microsoft.PowerToys.Settings.UI.OOBE.Views"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      mc:Ignorable="d"
+      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+
+    <Grid>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="280" />
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
+
+        <Image Stretch="UniformToFill"
+               Height="320"
+               Source="{x:Bind ViewModel.PreviewImageSource}" />
+
+        <ScrollViewer Grid.Row="1"
+                      VerticalScrollBarVisibility="Auto">
+            <StackPanel Orientation="Vertical"
+                        Margin="32,24,32,24"
+                        VerticalAlignment="Top">
+
+                <TextBlock Text="{x:Bind ViewModel.ModuleName}"
+                           Style="{StaticResource PageTitleStyle}" />
+
+                <TextBlock Margin="0,4,0,0"
+                           TextWrapping="Wrap">
+                    <Run x:Uid="Oobe_Overview_Description" />
+                    <Hyperlink NavigateUri="{x:Bind ViewModel.DescriptionLink}"
+                               Foreground="{ThemeResource SystemControlBackgroundAccentBrush}">
+                        <Run x:Uid="Oobe_Overview_DescriptionLinkText" />
+                    </Hyperlink>
+                </TextBlock>
+
+                <TextBlock Margin="0,32,0,0"
+                           TextWrapping="Wrap">
+                <Run x:Uid="Oobe_Overview_CheckoutLatestVersion" />
+                <Hyperlink NavigateUri="{x:Bind ViewModel.Link}">
+                    <Run x:Uid="Oobe_Overview_LatestVersionLink" />
+                </Hyperlink>
+                </TextBlock>
+
+                <Button Click="SettingsLaunchButton_Click"
+                            Margin="0,32,0,0">
+                    <StackPanel Orientation="Horizontal"
+                                    Spacing="8">
+                        <TextBlock Text="&#xE115;"
+                                       Margin="0,3,0,0"
+                                       FontFamily="Segoe MDL2 Assets" />
+                        <TextBlock x:Uid="OOBE_Settings" />
+                    </StackPanel>
+                </Button>
+            </StackPanel>
+        </ScrollViewer>
+    </Grid>
+</Page>

src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeOverview.xaml.cs

@@ -0,0 +1,44 @@
+// Copyright (c) Microsoft Corporation
+// The Microsoft Corporation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using Microsoft.PowerToys.Settings.UI.OOBE.Enums;
+using Microsoft.PowerToys.Settings.UI.OOBE.ViewModel;
+using Microsoft.PowerToys.Settings.UI.Views;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Navigation;
+
+namespace Microsoft.PowerToys.Settings.UI.OOBE.Views
+{
+    public sealed partial class OobeOverview : Page
+    {
+        public OobePowerToysModule ViewModel { get; set; }
+
+        public OobeOverview()
+        {
+            this.InitializeComponent();
+            ViewModel = new OobePowerToysModule(OobeShellPage.OobeShellHandler.Modules[(int)PowerToysModulesEnum.Overview]);
+            DataContext = ViewModel;
+        }
+
+        private void SettingsLaunchButton_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
+        {
+            if (OobeShellPage.OpenMainWindowCallback != null)
+            {
+                OobeShellPage.OpenMainWindowCallback(typeof(GeneralPage));
+            }
+
+            ViewModel.LogOpeningSettingsEvent();
+        }
+
+        protected override void OnNavigatedTo(NavigationEventArgs e)
+        {
+            ViewModel.LogOpeningModuleEvent();
+        }
+
+        protected override void OnNavigatedFrom(NavigationEventArgs e)
+        {
+            ViewModel.LogClosingModuleEvent();
+        }
+    }
+}

src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobePowerRename.xaml

@@ -0,0 +1,70 @@
+<Page x:Class="Microsoft.PowerToys.Settings.UI.OOBE.Views.OobePowerRename"
+      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:local="using:Microsoft.PowerToys.Settings.UI.OOBE.Views"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      mc:Ignorable="d"
+      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+
+    <Grid>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="280" />
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
+
+        <Image Stretch="UniformToFill"
+               Source="{x:Bind ViewModel.PreviewImageSource}" />
+
+        <ScrollViewer Grid.Row="1"
+                      VerticalScrollBarVisibility="Auto">
+            <StackPanel Orientation="Vertical"
+                        Margin="32,24,32,24"
+                        VerticalAlignment="Top">
+
+                <TextBlock Text="{x:Bind ViewModel.ModuleName}"
+                           Style="{StaticResource PageTitleStyle}" />
+
+                <TextBlock Margin="0,4,0,0"
+                           TextWrapping="Wrap"
+                           Text="{x:Bind ViewModel.Description}" />
+
+                <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}"
+                                 Margin="0,0,0,4">
+                    <TextBlock>
+                                <Run x:Uid="Oobe_LearnMore" />
+                                <Run Text="{x:Bind ViewModel.ModuleName}" />
+                    </TextBlock>
+                </HyperlinkButton>
+
+
+                <TextBlock x:Uid="Oobe_HowToUse"
+                           Style="{StaticResource OobeSubtitleStyle}" />
+
+                <TextBlock x:Uid="Oobe_PowerRename_HowToUse"
+                           TextWrapping="Wrap" />
+
+                <TextBlock x:Uid="Oobe_TipsAndTricks"
+                           Style="{StaticResource OobeSubtitleStyle}" />
+
+                <TextBlock x:Uid="Oobe_PowerRename_TipsAndTricks"
+                           TextWrapping="Wrap" />
+
+                <StackPanel Orientation="Horizontal"
+                            Spacing="4"
+                            Margin="0,32,0,0">
+
+                    <Button Click="SettingsLaunchButton_Click">
+                        <StackPanel Orientation="Horizontal"
+                                    Spacing="8">
+                            <TextBlock Text="&#xE115;"
+                                       Margin="0,3,0,0"
+                                       FontFamily="Segoe MDL2 Assets" />
+                            <TextBlock x:Uid="OOBE_Settings" />
+                        </StackPanel>
+                    </Button>
+                </StackPanel>
+            </StackPanel>
+        </ScrollViewer>
+    </Grid>
+</Page>

src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobePowerRename.xaml.cs

@@ -0,0 +1,47 @@
+// Copyright (c) Microsoft Corporation
+// The Microsoft Corporation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using Microsoft.PowerToys.Settings.UI.OOBE.Enums;
+using Microsoft.PowerToys.Settings.UI.OOBE.ViewModel;
+using Microsoft.PowerToys.Settings.UI.Views;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Navigation;
+
+namespace Microsoft.PowerToys.Settings.UI.OOBE.Views
+{
+    /// <summary>
+    /// An empty page that can be used on its own or navigated to within a Frame.
+    /// </summary>
+    public sealed partial class OobePowerRename : Page
+    {
+        public OobePowerToysModule ViewModel { get; set; }
+
+        public OobePowerRename()
+        {
+            this.InitializeComponent();
+            ViewModel = new OobePowerToysModule(OobeShellPage.OobeShellHandler.Modules[(int)PowerToysModulesEnum.PowerRename]);
+            DataContext = ViewModel;
+        }
+
+        private void SettingsLaunchButton_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
+        {
+            if (OobeShellPage.OpenMainWindowCallback != null)
+            {
+                OobeShellPage.OpenMainWindowCallback(typeof(PowerRenamePage));
+            }
+
+            ViewModel.LogOpeningSettingsEvent();
+        }
+
+        protected override void OnNavigatedTo(NavigationEventArgs e)
+        {
+            ViewModel.LogOpeningModuleEvent();
+        }
+
+        protected override void OnNavigatedFrom(NavigationEventArgs e)
+        {
+            ViewModel.LogClosingModuleEvent();
+        }
+    }
+}

src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeRun.xaml

@@ -0,0 +1,77 @@
+<Page
+    x:Class="Microsoft.PowerToys.Settings.UI.OOBE.Views.OobeRun"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:Microsoft.PowerToys.Settings.UI.OOBE.Views"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d"
+    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+
+    <Grid>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="280" />
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
+
+        <Image Stretch="UniformToFill"
+               Source="{x:Bind ViewModel.PreviewImageSource}" />
+
+        <ScrollViewer Grid.Row="1"
+                      VerticalScrollBarVisibility="Auto">
+            <StackPanel Orientation="Vertical"
+                        Margin="32,24,32,24"
+                        VerticalAlignment="Top">
+
+                <TextBlock Text="{x:Bind ViewModel.ModuleName}"
+                           Style="{StaticResource PageTitleStyle}" />
+
+                <TextBlock Margin="0,4,0,0"
+                           TextWrapping="Wrap"
+                           Text="{x:Bind ViewModel.Description}" />
+
+                <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}"
+                                 Margin="0,0,0,4">
+                    <TextBlock>
+                                <Run x:Uid="Oobe_LearnMore" />
+                                <Run Text="{x:Bind ViewModel.ModuleName}" />
+                    </TextBlock>
+
+                </HyperlinkButton>
+
+                <TextBlock x:Uid="Oobe_HowToLaunch"
+                           Style="{StaticResource OobeSubtitleStyle}" />
+
+                <TextBlock x:Uid="Oobe_Run_HowToLaunch" />
+
+                <TextBlock x:Uid="Oobe_TipsAndTricks"
+                           Style="{StaticResource OobeSubtitleStyle}" />
+
+                <TextBlock x:Uid="Oobe_Run_TipsAndTricks"
+                           TextWrapping="Wrap" />
+
+                <StackPanel Orientation="Horizontal"
+                            Margin="0,32,0,0"
+                            Spacing="4">
+
+                    <Button Click="Start_Run_Click" Style="{StaticResource AccentButtonStyle}">
+                        <TextBlock>
+                        <Run x:Uid="Oobe_Launch" />
+                        <Run Text="{x:Bind ViewModel.ModuleName}" />
+                        </TextBlock>
+                    </Button>
+
+                    <Button Click="SettingsLaunchButton_Click">
+                        <StackPanel Orientation="Horizontal"
+                                    Spacing="8">
+                            <TextBlock Text="&#xE115;"
+                                       Margin="0,3,0,0"
+                                       FontFamily="Segoe MDL2 Assets" />
+                            <TextBlock  x:Uid="OOBE_Settings" />
+                        </StackPanel>
+                    </Button>
+                </StackPanel>
+            </StackPanel>
+        </ScrollViewer>
+    </Grid>
+</Page>

src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeRun.xaml.cs

@@ -0,0 +1,61 @@
+// 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.Threading;
+using Microsoft.PowerToys.Settings.UI.OOBE.Enums;
+using Microsoft.PowerToys.Settings.UI.OOBE.ViewModel;
+using Microsoft.PowerToys.Settings.UI.Views;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Navigation;
+
+namespace Microsoft.PowerToys.Settings.UI.OOBE.Views
+{
+    /// <summary>
+    /// An empty page that can be used on its own or navigated to within a Frame.
+    /// </summary>
+    public sealed partial class OobeRun : Page
+    {
+        public OobePowerToysModule ViewModel { get; set; }
+
+        public OobeRun()
+        {
+            this.InitializeComponent();
+            ViewModel = new OobePowerToysModule(OobeShellPage.OobeShellHandler.Modules[(int)PowerToysModulesEnum.Run]);
+            DataContext = ViewModel;
+        }
+
+        private void Start_Run_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
+        {
+            if (OobeShellPage.RunSharedEventCallback != null)
+            {
+                using (var eventHandle = new EventWaitHandle(false, EventResetMode.AutoReset, OobeShellPage.RunSharedEventCallback()))
+                {
+                    eventHandle.Set();
+                }
+            }
+
+            ViewModel.LogRunningModuleEvent();
+        }
+
+        private void SettingsLaunchButton_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
+        {
+            if (OobeShellPage.OpenMainWindowCallback != null)
+            {
+                OobeShellPage.OpenMainWindowCallback(typeof(PowerLauncherPage));
+            }
+
+            ViewModel.LogOpeningSettingsEvent();
+        }
+
+        protected override void OnNavigatedTo(NavigationEventArgs e)
+        {
+            ViewModel.LogOpeningModuleEvent();
+        }
+
+        protected override void OnNavigatedFrom(NavigationEventArgs e)
+        {
+            ViewModel.LogClosingModuleEvent();
+        }
+    }
+}

src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeShellPage.xaml

@@ -0,0 +1,70 @@
+<UserControl
+    x:Class="Microsoft.PowerToys.Settings.UI.OOBE.Views.OobeShellPage"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:Microsoft.PowerToys.Settings.UI.OOBE.Views"
+    xmlns:winui="using:Microsoft.UI.Xaml.Controls"
+    xmlns:localModels="using:Microsoft.PowerToys.Settings.UI.OOBE.ViewModel"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d"
+    Loaded="UserControl_Loaded">
+
+    <UserControl.Resources>
+        <DataTemplate x:Key="NavigationViewMenuItem" x:DataType="localModels:OobePowerToysModule">
+            <winui:NavigationViewItem Content="{x:Bind ModuleName}" Tag="{x:Bind Tag}">
+                <winui:NavigationViewItem.Icon>
+                    <BitmapIcon UriSource="{x:Bind FluentIcon}" ShowAsMonochrome="False"/>
+                </winui:NavigationViewItem.Icon>
+            </winui:NavigationViewItem>
+        </DataTemplate>
+    </UserControl.Resources>
+    
+    <Grid>
+        <VisualStateManager.VisualStateGroups>
+            <VisualStateGroup x:Name="LayoutVisualStates">
+                <VisualState x:Name="WideLayout">
+                    <VisualState.StateTriggers>
+                        <AdaptiveTrigger MinWindowWidth="{StaticResource WideLayoutMinWidth}" />
+                    </VisualState.StateTriggers>
+                </VisualState>
+                <VisualState x:Name="SmallLayout">
+                    <VisualState.StateTriggers>
+                        <AdaptiveTrigger MinWindowWidth="{StaticResource SmallLayoutMinWidth}" />
+                        <AdaptiveTrigger MinWindowWidth="0" />
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="NavigationView.PaneDisplayMode"
+                                Value="LeftMinimal" />
+                        <Setter Target="NavigationView.IsPaneToggleButtonVisible"
+                                Value="True" />
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
+        </VisualStateManager.VisualStateGroups>
+        <winui:NavigationView IsSettingsVisible="False"
+                              IsPaneToggleButtonVisible="False"
+                              IsPaneOpen="True"
+                              x:Name="NavigationView"
+                              OpenPaneLength="296"
+                              PaneDisplayMode="Left"
+                              SelectionChanged="NavigationView_SelectionChanged"
+                              IsBackButtonVisible="Collapsed"
+                              MenuItemsSource="{x:Bind Modules, Mode=OneTime}"
+                              MenuItemTemplate="{StaticResource NavigationViewMenuItem}">
+            <winui:NavigationView.PaneCustomContent>
+                <StackPanel Grid.Column="0" Margin="16"
+                            Orientation="Vertical">
+                    <TextBlock x:Uid="Oobe_GettingStarted"
+                               TextWrapping="Wrap"
+                               FontWeight="SemiBold"
+                               Style="{StaticResource PageTitleStyle}"
+                               Margin="0,0,0,16" />
+                </StackPanel>
+            </winui:NavigationView.PaneCustomContent>
+            <winui:NavigationView.Content>
+                <Frame x:Name="NavigationFrame" />
+            </winui:NavigationView.Content>
+        </winui:NavigationView>
+    </Grid>
+</UserControl>

src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeShellPage.xaml.cs

@@ -0,0 +1,225 @@
+// 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.ObjectModel;
+using System.Diagnostics.CodeAnalysis;
+using Microsoft.PowerToys.Settings.UI.OOBE.Enums;
+using Microsoft.PowerToys.Settings.UI.OOBE.ViewModel;
+using Windows.ApplicationModel.Resources;
+using Windows.UI.Xaml.Controls;
+
+namespace Microsoft.PowerToys.Settings.UI.OOBE.Views
+{
+    public sealed partial class OobeShellPage : UserControl
+    {
+        public static Func<string> RunSharedEventCallback { get; set; }
+
+        public static void SetRunSharedEventCallback(Func<string> implementation)
+        {
+            RunSharedEventCallback = implementation;
+        }
+
+        public static Func<string> ColorPickerSharedEventCallback { get; set; }
+
+        public static void SetColorPickerSharedEventCallback(Func<string> implementation)
+        {
+            ColorPickerSharedEventCallback = implementation;
+        }
+
+        public static Func<string> ShortcutGuideSharedEventCallback { get; set; }
+
+        public static void SetShortcutGuideSharedEventCallback(Func<string> implementation)
+        {
+            ShortcutGuideSharedEventCallback = implementation;
+        }
+
+        public static Action<Type> OpenMainWindowCallback { get; set; }
+
+        public static void SetOpenMainWindowCallback(Action<Type> implementation)
+        {
+            OpenMainWindowCallback = implementation;
+        }
+
+        /// <summary>
+        /// Gets view model.
+        /// </summary>
+        public OobeShellViewModel ViewModel { get; } = new OobeShellViewModel();
+
+        /// <summary>
+        /// Gets or sets a shell handler to be used to update contents of the shell dynamically from page within the frame.
+        /// </summary>
+        public static OobeShellPage OobeShellHandler { get; set; }
+
+        public ObservableCollection<OobePowerToysModule> Modules { get; }
+
+        public OobeShellPage()
+        {
+            InitializeComponent();
+
+            DataContext = ViewModel;
+            OobeShellHandler = this;
+
+            Modules = new ObservableCollection<OobePowerToysModule>();
+            ResourceLoader loader = ResourceLoader.GetForViewIndependentUse();
+
+            Modules.Insert((int)PowerToysModulesEnum.Overview, new OobePowerToysModule()
+            {
+                ModuleName = loader.GetString("Oobe_Welcome"),
+                Tag = "Overview",
+                IsNew = false,
+                Icon = "\uEF3C",
+                Image = "ms-appx:///Assets/Modules/ColorPicker.png",
+                FluentIcon = "ms-appx:///Assets/FluentIcons/FluentIconsPowerToys.png",
+                PreviewImageSource = "https://github.com/microsoft/PowerToys/raw/master/doc/images/overview/PT%20hero%20image.png",
+                DescriptionLink = "https://aka.ms/PowerToysOverview",
+                Link = "https://github.com/microsoft/PowerToys/releases/",
+            });
+            Modules.Insert((int)PowerToysModulesEnum.ColorPicker, new OobePowerToysModule()
+            {
+                ModuleName = loader.GetString("Oobe_ColorPicker"),
+                Tag = "ColorPicker",
+                IsNew = false,
+                Icon = "\uEF3C",
+                Image = "ms-appx:///Assets/Modules/ColorPicker.png",
+                FluentIcon = "ms-appx:///Assets/FluentIcons/FluentIconsColorPicker.png",
+                PreviewImageSource = "ms-appx:///Assets/Modules/OOBE/ColorPicker.gif",
+                Description = loader.GetString("Oobe_ColorPicker_Description"),
+                Link = "https://aka.ms/PowerToysOverview_ColorPicker",
+            });
+            Modules.Insert((int)PowerToysModulesEnum.FancyZones, new OobePowerToysModule()
+            {
+                ModuleName = loader.GetString("Oobe_FancyZones"),
+                Tag = "FancyZones",
+                IsNew = false,
+                Icon = "\uE737",
+                Image = "ms-appx:///Assets/Modules/FancyZones.png",
+                FluentIcon = "ms-appx:///Assets/FluentIcons/FluentIconsFancyZones.png",
+                PreviewImageSource = "ms-appx:///Assets/Modules/OOBE/FancyZones.gif",
+                Description = loader.GetString("Oobe_FancyZones_Description"),
+                Link = "https://aka.ms/PowerToysOverview_FancyZones",
+            });
+            Modules.Insert((int)PowerToysModulesEnum.ImageResizer, new OobePowerToysModule()
+            {
+                ModuleName = loader.GetString("Oobe_ImageResizer"),
+                Tag = "ImageResizer",
+                IsNew = false,
+                Icon = "\uEB9F",
+                Image = "ms-appx:///Assets/Modules/ImageResizer.png",
+                FluentIcon = "ms-appx:///Assets/FluentIcons/FluentIconsImageResizer.png",
+                Description = loader.GetString("Oobe_ImageResizer_Description"),
+                PreviewImageSource = "ms-appx:///Assets/Modules/OOBE/ImageResizer.gif",
+                Link = "https://aka.ms/PowerToysOverview_ImageResizer",
+            });
+            Modules.Insert((int)PowerToysModulesEnum.KBM, new OobePowerToysModule()
+            {
+                ModuleName = loader.GetString("Oobe_KBM"),
+                Tag = "KBM",
+                IsNew = false,
+                Icon = "\uE765",
+                Image = "ms-appx:///Assets/Modules/KeyboardManager.png",
+                FluentIcon = "ms-appx:///Assets/FluentIcons/FluentIconsKeyboardManager.png",
+                Description = loader.GetString("Oobe_KBM_Description"),
+                PreviewImageSource = "ms-appx:///Assets/Modules/OOBE/KBM.gif",
+                Link = "https://aka.ms/PowerToysOverview_KeyboardManager",
+            });
+            Modules.Insert((int)PowerToysModulesEnum.Run, new OobePowerToysModule()
+            {
+                ModuleName = loader.GetString("Oobe_Run"),
+                Tag = "Run",
+                IsNew = false,
+                Icon = "\uE773",
+                Image = "ms-appx:///Assets/Modules/PowerLauncher.png",
+                FluentIcon = "ms-appx:///Assets/FluentIcons/FluentIconsPowerToysRun.png",
+                PreviewImageSource = "ms-appx:///Assets/Modules/OOBE/Run.gif",
+                Description = loader.GetString("Oobe_PowerRun_Description"),
+                Link = "https://aka.ms/PowerToysOverview_PowerToysRun",
+            });
+            Modules.Insert((int)PowerToysModulesEnum.PowerRename, new OobePowerToysModule()
+            {
+                ModuleName = loader.GetString("Oobe_PowerRename"),
+                Tag = "PowerRename",
+                IsNew = false,
+                Icon = "\uE8AC",
+                Image = "ms-appx:///Assets/Modules/PowerRename.png",
+                FluentIcon = "ms-appx:///Assets/FluentIcons/FluentIconsPowerRename.png",
+                Description = loader.GetString("Oobe_PowerRename_Description"),
+                PreviewImageSource = "ms-appx:///Assets/Modules/OOBE/PowerRename.gif",
+                Link = "https://aka.ms/PowerToysOverview_PowerRename",
+            });
+            Modules.Insert((int)PowerToysModulesEnum.FileExplorer, new OobePowerToysModule()
+            {
+                ModuleName = loader.GetString("Oobe_FileExplorer"),
+                Tag = "FileExplorer",
+                IsNew = false,
+                Icon = "\uEC50",
+                FluentIcon = "ms-appx:///Assets/FluentIcons/FluentIconsFileExplorerPreview.png",
+                Image = "ms-appx:///Assets/Modules/PowerPreview.png",
+                Description = loader.GetString("Oobe_FileExplorer_Description"),
+                PreviewImageSource = "ms-appx:///Assets/Modules/OOBE/FileExplorer.png",
+                Link = "https://aka.ms/PowerToysOverview_FileExplorerAddOns",
+            });
+            Modules.Insert((int)PowerToysModulesEnum.ShortcutGuide, new OobePowerToysModule()
+            {
+                ModuleName = loader.GetString("Oobe_ShortcutGuide"),
+                Tag = "ShortcutGuide",
+                IsNew = false,
+                Icon = "\uEDA7",
+                FluentIcon = "ms-appx:///Assets/FluentIcons/FluentIconsShortcutGuide.png",
+                Image = "ms-appx:///Assets/Modules/ShortcutGuide.png",
+                Description = loader.GetString("Oobe_ShortcutGuide_Description"),
+                PreviewImageSource = "ms-appx:///Assets/Modules/OOBE/OOBEShortcutGuide.png",
+                Link = "https://aka.ms/PowerToysOverview_ShortcutGuide",
+            });
+            /* Modules.Insert((int)PowerToysModulesEnum.VideoConference, new OobePowerToysModule()
+            {
+                ModuleName = loader.GetString("Oobe_VideoConference"),
+                Tag = "VideoConference",
+                IsNew = true,
+                Icon = "\uEC50",
+                FluentIcon = "ms-appx:///Assets/FluentIcons/FluentIconsVideoConferenceMute.png",
+                Image = "ms-appx:///Assets/Modules/VideoConference.png",
+                Description = loader.GetString("Oobe_VideoConference_Description"),
+                PreviewImageSource = "ms-appx:///Assets/Modules/OOBE/VideoConferenceMute.png",
+                Link = "https://aka.ms/PowerToysOverview_VideoConference",
+            }); */
+        }
+
+        public void OnClosing()
+        {
+            if (NavigationView.SelectedItem != null)
+            {
+                ((OobePowerToysModule)NavigationView.SelectedItem).LogClosingModuleEvent();
+            }
+        }
+
+        private void UserControl_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)
+        {
+            if (Modules.Count > 0)
+            {
+                NavigationView.SelectedItem = Modules[(int)PowerToysModulesEnum.Overview];
+            }
+        }
+
+        [SuppressMessage("Usage", "CA1801:Review unused parameters", Justification = "Params are required for event handler signature requirements.")]
+        private void NavigationView_SelectionChanged(Microsoft.UI.Xaml.Controls.NavigationView sender, Microsoft.UI.Xaml.Controls.NavigationViewSelectionChangedEventArgs args)
+        {
+            OobePowerToysModule selectedItem = args.SelectedItem as OobePowerToysModule;
+
+            switch (selectedItem.Tag)
+            {
+                case "Overview": NavigationFrame.Navigate(typeof(OobeOverview)); break;
+                case "ColorPicker": NavigationFrame.Navigate(typeof(OobeColorPicker)); break;
+                case "FancyZones": NavigationFrame.Navigate(typeof(OobeFancyZones)); break;
+                case "Run": NavigationFrame.Navigate(typeof(OobeRun)); break;
+                case "ImageResizer": NavigationFrame.Navigate(typeof(OobeImageResizer)); break;
+                case "KBM": NavigationFrame.Navigate(typeof(OobeKBM)); break;
+                case "PowerRename": NavigationFrame.Navigate(typeof(OobePowerRename)); break;
+                case "FileExplorer": NavigationFrame.Navigate(typeof(OobeFileExplorer)); break;
+                case "ShortcutGuide": NavigationFrame.Navigate(typeof(OobeShortcutGuide)); break;
+                case "VideoConference": NavigationFrame.Navigate(typeof(OobeVideoConference)); break;
+            }
+        }
+    }
+}

src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeShortcutGuide.xaml

@@ -0,0 +1,70 @@
+<Page
+    x:Class="Microsoft.PowerToys.Settings.UI.OOBE.Views.OobeShortcutGuide"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:Microsoft.PowerToys.Settings.UI.OOBE.Views"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d"
+    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+
+    <Grid>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="280" />
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
+
+        <Image Stretch="UniformToFill"
+               Source="{x:Bind ViewModel.PreviewImageSource}" />
+
+        <ScrollViewer Grid.Row="1"
+                      VerticalScrollBarVisibility="Auto">
+            <StackPanel Orientation="Vertical"
+                        Margin="32,24,32,24"
+                        VerticalAlignment="Top">
+
+                <TextBlock Text="{x:Bind ViewModel.ModuleName}"
+                           Style="{StaticResource PageTitleStyle}" />
+
+                <TextBlock Margin="0,4,0,0"
+                           TextWrapping="Wrap"
+                           Text="{x:Bind ViewModel.Description}" />
+
+                <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}"
+                                 Margin="0,0,0,4">
+
+                    <TextBlock>
+                                <Run x:Uid="Oobe_LearnMore" />
+                                <Run Text="{x:Bind ViewModel.ModuleName}" />
+                    </TextBlock>
+                </HyperlinkButton>
+
+                <TextBlock x:Uid="Oobe_HowToLaunch"
+                           Style="{StaticResource OobeSubtitleStyle}" />
+
+                <TextBlock x:Uid="Oobe_ShortcutGuide_HowToLaunch"
+                           TextWrapping="Wrap" />
+
+                <StackPanel Orientation="Horizontal"
+                            Margin="0,32,0,0"
+                            Spacing="8">
+                    <Button Click="Start_ShortcutGuide_Click" Style="{StaticResource AccentButtonStyle}">
+                        <TextBlock>
+                        <Run x:Uid="Oobe_Launch" />
+                        <Run Text="{x:Bind ViewModel.ModuleName}" />
+                        </TextBlock>
+                    </Button>
+                    <Button Click="SettingsLaunchButton_Click">
+                        <StackPanel Orientation="Horizontal"
+                                    Spacing="8">
+                            <TextBlock Text="&#xE115;"
+                                       Margin="0,3,0,0"
+                                       FontFamily="Segoe MDL2 Assets" />
+                            <TextBlock x:Uid="OOBE_Settings" />
+                        </StackPanel>
+                    </Button>
+                </StackPanel>
+            </StackPanel>
+        </ScrollViewer>
+    </Grid>
+</Page>

src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeShortcutGuide.xaml.cs

@@ -0,0 +1,61 @@
+// 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.Threading;
+using Microsoft.PowerToys.Settings.UI.OOBE.Enums;
+using Microsoft.PowerToys.Settings.UI.OOBE.ViewModel;
+using Microsoft.PowerToys.Settings.UI.Views;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Navigation;
+
+namespace Microsoft.PowerToys.Settings.UI.OOBE.Views
+{
+    /// <summary>
+    /// An empty page that can be used on its own or navigated to within a Frame.
+    /// </summary>
+    public sealed partial class OobeShortcutGuide : Page
+    {
+        public OobePowerToysModule ViewModel { get; set; }
+
+        public OobeShortcutGuide()
+        {
+            this.InitializeComponent();
+            ViewModel = new OobePowerToysModule(OobeShellPage.OobeShellHandler.Modules[(int)PowerToysModulesEnum.ShortcutGuide]);
+            DataContext = ViewModel;
+        }
+
+        private void Start_ShortcutGuide_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
+        {
+            if (OobeShellPage.ShortcutGuideSharedEventCallback != null)
+            {
+                using (var eventHandle = new EventWaitHandle(false, EventResetMode.AutoReset, OobeShellPage.ShortcutGuideSharedEventCallback()))
+                {
+                    eventHandle.Set();
+                }
+            }
+
+            ViewModel.LogRunningModuleEvent();
+        }
+
+        private void SettingsLaunchButton_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
+        {
+            if (OobeShellPage.OpenMainWindowCallback != null)
+            {
+                OobeShellPage.OpenMainWindowCallback(typeof(ShortcutGuidePage));
+            }
+
+            ViewModel.LogOpeningSettingsEvent();
+        }
+
+        protected override void OnNavigatedTo(NavigationEventArgs e)
+        {
+            ViewModel.LogOpeningModuleEvent();
+        }
+
+        protected override void OnNavigatedFrom(NavigationEventArgs e)
+        {
+            ViewModel.LogClosingModuleEvent();
+        }
+    }
+}

src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeVideoConference.xaml

@@ -0,0 +1,63 @@
+<Page
+    x:Class="Microsoft.PowerToys.Settings.UI.OOBE.Views.OobeVideoConference"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:Microsoft.PowerToys.Settings.UI.OOBE.Views"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d"
+    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+
+    <Grid>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="280" />
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
+
+        <Image Stretch="UniformToFill"
+               Source="{x:Bind ViewModel.PreviewImageSource}" />
+
+        <ScrollViewer Grid.Row="1"
+                      VerticalScrollBarVisibility="Auto">
+            <StackPanel Orientation="Vertical"
+                        Margin="32,24,32,24"
+                        VerticalAlignment="Top">
+
+                <TextBlock Text="{x:Bind ViewModel.ModuleName}"
+                           Style="{StaticResource PageTitleStyle}" />
+
+                <TextBlock TextWrapping="Wrap"
+                           Margin="0,4,0,0"
+                           Text="{x:Bind ViewModel.Description}" />
+
+                <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}"
+                                 Margin="0,0,0,4">
+                    <TextBlock>
+                                <Run x:Uid="Oobe_LearnMore" />
+                                <Run Text="{x:Bind ViewModel.ModuleName}" />
+                    </TextBlock>
+                </HyperlinkButton>
+
+                <TextBlock x:Uid="Oobe_HowToLaunch"
+                           Style="{StaticResource OobeSubtitleStyle}" />
+
+                <TextBlock x:Uid="Oobe_VideoConference_HowToLaunch"
+                           TextWrapping="Wrap" />
+
+                <StackPanel Orientation="Horizontal"
+                            Margin="0,32,0,0"
+                            Spacing="8">
+                    <Button Click="SettingsLaunchButton_Click"> 
+                        <StackPanel Orientation="Horizontal"
+                                    Spacing="8">
+                            <TextBlock Text="&#xE115;"
+                                       Margin="0,3,0,0"
+                                       FontFamily="Segoe MDL2 Assets" />
+                            <TextBlock x:Uid="OOBE_Settings" />
+                        </StackPanel>
+                    </Button>
+                </StackPanel>
+            </StackPanel>
+        </ScrollViewer>
+    </Grid>
+</Page>

src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeVideoConference.xaml.cs

@@ -0,0 +1,41 @@
+// Copyright (c) Microsoft Corporation
+// The Microsoft Corporation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using Microsoft.PowerToys.Settings.UI.OOBE.Enums;
+using Microsoft.PowerToys.Settings.UI.OOBE.ViewModel;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Navigation;
+
+namespace Microsoft.PowerToys.Settings.UI.OOBE.Views
+{
+    /// <summary>
+    /// An empty page that can be used on its own or navigated to within a Frame.
+    /// </summary>
+    public sealed partial class OobeVideoConference : Page
+    {
+        public OobePowerToysModule ViewModel { get; set; }
+
+        public OobeVideoConference()
+        {
+            this.InitializeComponent();
+            ViewModel = new OobePowerToysModule(OobeShellPage.OobeShellHandler.Modules[(int)PowerToysModulesEnum.VideoConference]);
+            DataContext = ViewModel;
+        }
+
+        private void SettingsLaunchButton_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
+        {
+            ViewModel.LogOpeningSettingsEvent();
+        }
+
+        protected override void OnNavigatedTo(NavigationEventArgs e)
+        {
+            ViewModel.LogOpeningModuleEvent();
+        }
+
+        protected override void OnNavigatedFrom(NavigationEventArgs e)
+        {
+            ViewModel.LogClosingModuleEvent();
+        }
+    }
+}

src/settings-ui/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw

@@ -977,4 +977,172 @@
   <data name="Run_PluginUseDescription.Text" xml:space="preserve">
     <value>You can include or remove each plugin from the global results, change the direct activation phrase and configure additional options.</value>
   </data>
+  <data name="Oobe_GetStarted.Text" xml:space="preserve">
+    <value>Let's get started!</value>
+  </data>
+  <data name="Oobe_PowerToysDescription.Text" xml:space="preserve">
+    <value>Welcome to PowerToys!  These overviews will help you quickly learn the basics of all our utilities.</value>
+  </data>
+  <data name="Oobe_GettingStarted.Text" xml:space="preserve">
+    <value>Getting started</value>
+  </data>
+  <data name="Oobe_Launch.Text" xml:space="preserve">
+    <value>Launch</value>
+  </data>
+  <data name="Oobe_LearnMore.Text" xml:space="preserve">
+    <value>Learn more about</value>
+  </data>
+  <data name="Oobe_ColorPicker_Description" xml:space="preserve">
+    <value>Color Picker is a system-wide color selection tool for Windows 10 that enables you to pick colors from any currently running application and automatically copies it in a configurable format to your clipboard.</value>
+  </data>
+  <data name="Oobe_FancyZones_Description" xml:space="preserve">
+    <value>FancyZones is a window manager that makes it easy to create complex window layouts and quickly position windows into those layouts.</value>
+  </data>
+  <data name="Oobe_FileExplorer_Description" xml:space="preserve">
+    <value>PowerToys introduces add-ons to the Window’s File Explorer that will currently enable Markdown files (.md) and SVG icons (.svg) to be viewed in the preview pane.</value>
+  </data>
+  <data name="Oobe_ImageResizer_Description" xml:space="preserve">
+    <value>Image Resizer is a Windows shell extension for simple bulk image-resizing.</value>
+  </data>
+  <data name="Oobe_KBM_Description" xml:space="preserve">
+    <value>Keyboard Manager allows you to customize the keyboard to be more productive by remapping keys and creating your own keyboard shortcuts.</value>
+  </data>
+  <data name="Oobe_PowerRename_Description" xml:space="preserve">
+    <value>PowerRename enables you to perform simple bulk renaming, searching and replacing file names.</value>
+  </data>
+  <data name="Oobe_PowerRun_Description" xml:space="preserve">
+    <value>PowerToys Run is a quick launcher for power users that contains some additional features without sacrificing performance.</value>
+  </data>
+  <data name="Oobe_ShortcutGuide_Description" xml:space="preserve">
+    <value>Shortcut Guide presents the user with a listing of available shortcuts for the current state of the desktop.</value>
+  </data>
+  <data name="Oobe_VideoConference_Description" xml:space="preserve">
+    <value>Video Conference Mute allows users to quickly mute the microphone and turn off the camera while on a conference call with a single keystroke, regardless of what application has focus on your computer.</value>
+  </data>
+  <data name="Oobe_Overview_CheckoutLatestVersion.Text" xml:space="preserve">
+    <value>For returning users, check out what is new on this latest version of</value>
+  </data>
+  <data name="Oobe_Overview_Description.Text" xml:space="preserve">
+    <value>Microsoft PowerToys is a set of utilities for power users to tune and streamline their Windows 10 experience for greater productivity.
+Take a moment to preview the various utilities listed or view our comprehensive documentation on</value>
+  </data>
+  <data name="Oobe_Overview_DescriptionLinkText.Text" xml:space="preserve">
+    <value>Microsoft Docs.</value>
+  </data>
+  <data name="Oobe_Overview_LatestVersionLink.Text" xml:space="preserve">
+    <value>PowerToys in our release notes.</value>
+  </data>
+  <data name="Oobe_ColorPicker_HowToUse.Text" xml:space="preserve">
+    <value>Win + Shift + C to open Color Picker.</value>
+  </data>
+  <data name="Oobe_ColorPicker_TipsAndTricks.Text" xml:space="preserve">
+    <value>To select a color with more precision, scroll the mouse wheel to zoom in.</value>
+  </data>
+  <data name="Oobe_FancyZones_HowToUse.Text" xml:space="preserve">
+    <value>Shift + drag while dragging the window to snap a window to a zone, and release the window in the desired zone.
+Win + ` to open the FancyZones editor.</value>
+  </data>
+  <data name="Oobe_FancyZones_TipsAndTricks.Text" xml:space="preserve">
+    <value>Snap a window to multiple zones by holding the Ctrl key (while also holding Shift) when dragging a window.</value>
+  </data>
+  <data name="Oobe_FileExplorer_HowToEnable.Text" xml:space="preserve">
+    <value>Open Windows File Explorer, select the View tab in the File Explorer ribbon, then select Preview Pane. 
+From there, simply click on a Markdown file or SVG icon in the File Explorer and observe the content on the preview pane!</value>
+  </data>
+  <data name="Oobe_HowToCreateMappings.Text" xml:space="preserve">
+    <value>How to create mappings</value>
+  </data>
+  <data name="Oobe_HowToEnable.Text" xml:space="preserve">
+    <value>How to enable</value>
+  </data>
+  <data name="Oobe_HowToLaunch.Text" xml:space="preserve">
+    <value>How to launch</value>
+  </data>
+  <data name="Oobe_HowToUse.Text" xml:space="preserve">
+    <value>How to use</value>
+  </data>
+  <data name="Oobe_ImageResizer_HowToLaunch.Text" xml:space="preserve">
+    <value>In File Explorer, right-clicking one or more image files and clicking on Resize pictures from the context menu.</value>
+  </data>
+  <data name="Oobe_ImageResizer_TipsAndTricks.Text" xml:space="preserve">
+    <value>Want a custom size? You can add them in the PowerToys Settings!</value>
+  </data>
+  <data name="Oobe_KBM_HowToCreateMappings.Text" xml:space="preserve">
+    <value>Launch PowerToys settings, navigate to the Keyboard Manager menu, and select either Remap a key or Remap a shortcut.</value>
+  </data>
+  <data name="Oobe_KBM_TipsAndTricks.Text" xml:space="preserve">
+    <value>Want to only have a shortcut work for a single application? Use the Target App field when creating the shortcut remapping.</value>
+  </data>
+  <data name="Oobe_PowerRename_HowToUse.Text" xml:space="preserve">
+    <value>In File Explorer, right-clicking one or more selected files and clicking on PowerRename from the context menu.</value>
+  </data>
+  <data name="Oobe_PowerRename_TipsAndTricks.Text" xml:space="preserve">
+    <value>PowerRename supports searching for files using regular expressions to enable more advanced renaming functionalities.</value>
+  </data>
+  <data name="Oobe_Run_HowToLaunch.Text" xml:space="preserve">
+    <value>Alt + Space to open PowerToys and just start typing.</value>
+  </data>
+  <data name="Oobe_Run_TipsAndTricks.Text" xml:space="preserve">
+    <value>PowerToys runs supports various action keys to funnel search queries for a specific subset of results. Typing &lt; searches for running processes only, ? will search only for file, or . for installed applications! See PowerToys documentation for the complete set of 'Action Keys' available.</value>
+  </data>
+  <data name="Oobe_ShortcutGuide_HowToLaunch.Text" xml:space="preserve">
+    <value>Win + ? to open Shortcut Guide, press it again to close or press Esc. You can also launch it by holding the Win key for one second!</value>
+  </data>
+  <data name="Oobe_TipsAndTricks.Text" xml:space="preserve">
+    <value>Tips &amp; tricks</value>
+  </data>
+  <data name="Oobe_VideoConference_HowToLaunch.Text" xml:space="preserve">
+    <value>Win + N to toggle both your microphone and video 
+Win + Shift + A to toggle your microphone 
+Win + Shift + O to toggle your video</value>
+  </data>
+  <data name="Oobe_ColorPicker" xml:space="preserve">
+    <value>Color Picker</value>
+    <comment>Do not localize this string</comment>
+  </data>
+  <data name="Oobe_FancyZones" xml:space="preserve">
+    <value>FancyZones</value>
+    <comment>Do not localize this string</comment>
+  </data>
+  <data name="Oobe_FileExplorer" xml:space="preserve">
+    <value>File Explorer add-ons</value>
+    <comment>Do not localize this string</comment>
+  </data>
+  <data name="Oobe_ImageResizer" xml:space="preserve">
+    <value>ImageResizer</value>
+    <comment>Do not localize this string</comment>
+  </data>
+  <data name="Oobe_KBM" xml:space="preserve">
+    <value>Keyboard Manager</value>
+    <comment>Do not localize this string</comment>
+  </data>
+  <data name="Oobe_Overview" xml:space="preserve">
+    <value>Overview</value>
+  </data>
+  <data name="Oobe_PowerRename" xml:space="preserve">
+    <value>PowerRename</value>
+    <comment>Do not localize this string</comment>
+  </data>
+  <data name="Oobe_Run" xml:space="preserve">
+    <value>PowerToys Run</value>
+    <comment>Do not localize this string</comment>
+  </data>
+  <data name="Oobe_ShortcutGuide" xml:space="preserve">
+    <value>Shortcut Guide</value>
+    <comment>Do not localize this string</comment>
+  </data>
+  <data name="Oobe_VideoConference" xml:space="preserve">
+    <value>Video Conference</value>
+    <comment>Do not localize this string</comment>
+  </data>
+  <data name="Oobe_Welcome" xml:space="preserve">
+    <value>Welcome to PowerToys</value>
+    <comment>Do not localize 'PowerToys'</comment>
+  </data>
+  <data name="OOBE_Settings.Text" xml:space="preserve">
+    <value>Settings</value>
+  </data>
+  <data name="Oobe_Button.Text" xml:space="preserve">
+    <value>PowerToys Tour</value>
+  </data>
 </root>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Styles/TextBlock.xaml

@@ -5,7 +5,7 @@
     <!--Common texts-->
     <Style x:Key="PageTitleStyle" TargetType="TextBlock">
         <Setter Property="VerticalAlignment" Value="Center" />
-        <Setter Property="FontWeight" Value="SemiLight" />
+        <Setter Property="FontWeight" Value="SemiBold" />
         <Setter Property="FontSize" Value="{StaticResource LargeFontSize}" />
         <Setter Property="TextTrimming" Value="CharacterEllipsis" />
         <Setter Property="TextWrapping" Value="NoWrap" />
@@ -28,4 +28,9 @@
     <Style x:Key="SettingsGroupTitleStyleAsHeader" TargetType="TextBlock" BasedOn="{StaticResource SettingsGroupTitleStyle}">
         <Setter Property="Margin" Value="0,0,0,4" />
     </Style>
+
+    <Style x:Key="OobeSubtitleStyle" TargetType="TextBlock">
+        <Setter Property="FontWeight" Value="SemiBold"/>
+        <Setter Property="Margin" Value="0,16,0,0" />
+    </Style>
 </ResourceDictionary>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/GeneralPage.xaml

@@ -187,6 +187,10 @@
                         RelativePanel.Below="AboutImage"
                         Orientation="Vertical" >
 
+                <HyperlinkButton Click="OobeButton_Click">
+                    <TextBlock x:Uid="Oobe_Button"/>
+                </HyperlinkButton>
+                
                 <HyperlinkButton x:Uid="GeneralPage_ImageHyperlinkToDocs">
                     <TextBlock x:Uid="General_Repository"/>
                 </HyperlinkButton>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/GeneralPage.xaml.cs

@@ -122,5 +122,10 @@ namespace Microsoft.PowerToys.Settings.UI.Views
         {
             Helpers.StartProcessHelper.Start(Helpers.StartProcessHelper.ColorsSettings);
         }
+
+        private void OobeButton_Click(object sender, RoutedEventArgs e)
+        {
+            ShellPage.OpenOobeWindowCallback();
+        }
     }
 }

src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ShellPage.xaml

@@ -105,6 +105,7 @@
             </ic:EventTriggerBehavior>
         </i:Interaction.Behaviors>
         <ScrollViewer x:Name="scrollViewer"
+                      VerticalScrollBarVisibility="Auto"
                       Grid.Column="0">
                 <Grid Margin="{StaticResource MediumLeftRightBottomMargin}">
                     <Frame x:Name="shellFrame" />

src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ShellPage.xaml.cs

@@ -2,8 +2,10 @@
 // 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.Diagnostics.CodeAnalysis;
+using Microsoft.PowerToys.Settings.UI.Services;
 using Microsoft.PowerToys.Settings.UI.ViewModels;
 using Windows.Data.Json;
 using Windows.UI.Xaml.Controls;
@@ -21,6 +23,11 @@ namespace Microsoft.PowerToys.Settings.UI.Views
         /// <param name="msg">message.</param>
         public delegate void IPCMessageCallback(string msg);
 
+        /// <summary>
+        /// Declaration for the opening oobe window callback function.
+        /// </summary>
+        public delegate void OobeOpeningCallback();
+
         /// <summary>
         /// Gets or sets a shell handler to be used to update contents of the shell dynamically from page within the frame.
         /// </summary>
@@ -41,6 +48,11 @@ namespace Microsoft.PowerToys.Settings.UI.Views
         /// </summary>
         public static IPCMessageCallback CheckForUpdatesMsgCallback { get; set; }
 
+        /// <summary>
+        /// Gets or sets callback function for opening oobe window
+        /// </summary>
+        public static OobeOpeningCallback OpenOobeWindowCallback { get; set; }
+
         /// <summary>
         /// Gets view model.
         /// </summary>
@@ -114,6 +126,15 @@ namespace Microsoft.PowerToys.Settings.UI.Views
             CheckForUpdatesMsgCallback = implementation;
         }
 
+        /// <summary>
+        /// Set oobe opening callback function
+        /// </summary>
+        /// <param name="implementation">delegate function implementation.</param>
+        public static void SetOpenOobeCallback(OobeOpeningCallback implementation)
+        {
+            OpenOobeWindowCallback = implementation;
+        }
+
         public static void SetElevationStatus(bool isElevated)
         {
             IsElevated = isElevated;
@@ -124,6 +145,11 @@ namespace Microsoft.PowerToys.Settings.UI.Views
             IsUserAnAdmin = isAdmin;
         }
 
+        public static void Navigate(Type type)
+        {
+            NavigationService.Navigate(type);
+        }
+
         public void Refresh()
         {
             shellFrame.Navigate(typeof(GeneralPage));