From 491b720e16c05cc48e05685695de199d0a98cdb0 Mon Sep 17 00:00:00 2001
From: Niels Laute <niels9001@hotmail.com>
Date: Mon, 16 Aug 2021 09:56:10 +0200
Subject: [PATCH] OOBE XAML refactoring

---
 .../FluentIcons/FluentIconsSettings.png       | Bin 0 -> 3582 bytes
 .../Microsoft.PowerToys.Settings.UI.csproj    |   5 +-
 .../OOBE/Views/OobeFancyZones.xaml            |  65 ++++-----------
 .../OOBE/Views/OobeFileExplorer.xaml          |  62 ++++----------
 .../OOBE/Views/OobeImageResizer.xaml          |  66 ++++-----------
 .../OOBE/Views/OobeKBM.xaml                   |  67 ++++-----------
 .../OOBE/Views/OobeOverview.xaml              |  65 +++++----------
 .../OOBE/Views/OobePowerRename.xaml           |  69 ++++------------
 .../OOBE/Views/OobeRun.xaml                   |  76 +++++-------------
 .../OOBE/Views/OobeShortcutGuide.xaml         |  72 +++++------------
 .../OOBE/Views/OobeVideoConference.xaml       |  63 ++++-----------
 .../Strings/en-us/Resources.resw              |  18 +++--
 .../Views/ShellPage.xaml                      |   2 +-
 13 files changed, 171 insertions(+), 459 deletions(-)
 create mode 100644 src/settings-ui/Microsoft.PowerToys.Settings.UI/Assets/FluentIcons/FluentIconsSettings.png

diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Assets/FluentIcons/FluentIconsSettings.png b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Assets/FluentIcons/FluentIconsSettings.png
new file mode 100644
index 0000000000000000000000000000000000000000..bf6a6c2d807a30e9e0eca5ea71b3d099a5e05e22
GIT binary patch
literal 3582
zcmbVP2{e>zA0I;YO3CCZW3nX1EXFdEv1IIxG})tO%nT-GF*EiQ3L%muQ?{!t6{*P*
zibh%LDnz#ABZU?>-KHY0`d%&0z2CXtch7g<bDsBk-skx}zyJO}=S_BTwo{N*l?8!7
z3J&&oA~0(%4{0gj{S?IK1CtEf-ir$Y$*o@=VxY76U=T=Bh3@Lf^CaxTQdkTFGL_{=
zGl*cY0W=6?W)Z<AQ-Wwbh#xJ0&cs1yZ`^`H=u{lk!-#+&u&rr<bo(d{ZEuvbD<vw3
zf}uh!%pqnGSb%^*<B=f|j9?}g8-as<<;4Q)<!v|=@)g1h!a=Q;1wuRtE)Z)LhXye*
zK)@&n1Oj4$F+d?r{3v8&eFzGHLc$Toa3mUrG{vG!u}CE3`vV2Uaj5=SBHs49FyIRZ
z4dn6ISU5a9Jlr7M(167WfFm&&3><-iqfjsa0pmt8dE^Kfle_f?1D?jEaOi9voyCMK
zGm`ySp*$QEQ1zP)4E72wll$FIfXCnwWHuaWfLONaE09WA!LdU*!C!?_DR5dajX`7b
zxBwQpf@KG?cr0!p>%UO19REoG;9CM=MaEz1!eFe3;PPz305iTj<S)@&*GM)EPNZ>J
zp&Sa$CJaz>>#{X$tTl&5=CL@gELQN3NV)t_8G=F?pds5l=u9droU8kX3p6~LN5esv
zqXt8m!jML;NHo?6iAACG5GX7H@eN8~QR)7Xe+f0lB251T1#*T;=8^vvOr>D`SsVr#
zFqqCD2hiYbW&jkj;zq1BE11Or1OwU`{&C;I+S-M~@}~y_2VA1vPKbkzwJ{Q7Yz#vg
zAit_hAYdJsTppQ8p*i4jP{26`bUGDlLZKL$(ty0AQH@YAiXYkthA}ij!BD1XL$W^t
z<xin}GZ(mzXHi0zQ{cya>i>CvH-`??AUXIS^DI~9a_(U5>0BVHk>5*aFD>NzDwq!W
znl4x}Ww{J+P|9-rX;kR<ZTdg<z&G0PKpH^$Kl0)mjLY)pg_Ains{p`Tf17u3KzaCb
z!G5y?{+}j(J^Mp(|9}G>V|lsKtALM{ZbxGREsg{9GWCgfwjhvnngia-)ia@uA9TXk
zZBt@V?OelyrNfMXvd!nDv-jE9D?2(0&Pr(=%T$FZr;*SLcAv*3Rh`7a$78M1)*fL$
zJf<qGEsn&3FIlcdq!jF|eQ#V-%Ek0G<e%XVM>l;Q%B}9+RW5{kbak08&eRUfRn099
zEXKU%FCO`*XKuTwH0~57CKSbJYDmJB4<p<0OD1s~CAi~lNAj0f{8HElq%c^#St>hD
z#XVn8H!6=7lO%Q9ZF;*0!~lhfd3bn~?a>=;>IFHF>No%P;pZDn(0&9vcl@&9Ca$@}
zeS>i~2akO}5z{h;B+Won55CAbd3EL+L9csDp3pY{6``G2m|LT4DXx*>GB4k_c}Q%^
zrbikw&KXy=vRDTOWrnn$Tvw!Vykj!9hNF)@#>=|tlsx8=+p0*iL!UhT;pE|yu`;9x
zo5U{Ai|F|4(!<G%ZQT!3l&|F;^4HDlkAC}Rpf3+yQmNeDD$*LUh&`%wM<Yc`Pf@`;
zl?Ag0QxNUPY^}$i&PivN>=jmY{>&$JWwRJ&59y@Ib$1*fAotS~e#t4*r|y+FloCnu
zIgSYlZP4^*E(bi4p7CQZYC_OWYA0Gmur?w_`jwE6;Fo43W{M@pwY5R_x1F!3$cpQa
zsi~{U=qd?GYq@^9p&?RHJ*LRot{oJ3F!(~F+5CG*Dd>u9d%0_sguI)_Wsr0KkwI}^
zBxIF{EBWg6>-w3@)R(ifT3KD=;3A)2#<7ZpKKF$O2MVH%JJOE`JFndAN?y}WXD}3n
z63i;QMyZG{@X^`DY#iMGl5LV^MjEDZN5-PCh07Jy)YZNFR8d7Gu`^BxDi2=B;Ogs?
zb>6gayWK(w&D!m)oR}!pFxk$?H!^E&rEb|}B$aUZpq5#X?xH#A__YW0Q2SnZtVp?0
z;Ige}s7F|)XPnVB73id_Tk5kVvQ)^8mQ%~$zV)?X&je?*(LXGBrWn3g<A5`_uP!KZ
zCb@jmj<EdnkM6-&$7_{NIxQT`{s2{dQc)L7@M}<uAYO$%t{X`4yVy$0ttu}sPx|P3
z=H<0JA3HjRmwM6a_j7cg?tOPiTYKZMXu-6*8P_(jJG{CMmo`1{aICNGmhD)J_tSc3
zO&OJVbGa$s@dyc_7*o8^ZbtI+b~>f<nvzIPQp$bK@TULTL3n)DL}R%#3X65B>n^U^
z#L;ys2)f8ZKUy;oGILixZ#L%W@8`5GD+L_!<9|@8qAWa;zt^BuC*5QPS#?XSc|v;0
zve&&>1Z4;WLo!z;`UXb`#(CtQjqaR3QZ(7~LjKH_)g5y!bBN|7!4}Uo&)foEbRs`>
znOZzvG9bV(MBO{X0hikd4f6xGQ5z1pKZb;CeL=Q!-<+A@yZ=f=^KOIO((_Gem2&Il
zCc?j%Nz$Dh4}*kr$hxSfi>8IE8T7)KU$@zv?0yEe-W{$3dqBwU%<+^8F4?mVp{Hi$
zRM}`0i!YtnbD-#aZRwdxIh`q(PFZS(;O-o<dCj`DuLlv6RCz<L+zA3qTro}I!}Dui
z+Y6I|iTVjz&aDc%2}(Z7RhQO!2Z>q#5*p&G(t!kz$))W(p?@s*RNGK%^#`Hoc-X1e
zjV;V;mjnV$<xO_I`1`W8cSo~350T@5%4mPkGnRS2sY|$1#%_OF#ic3{yE5sPX9<$x
z**79@323IDgGl$9N<NmfUB<Hi{^sY7PfZo8x!mWXK0fbs+#9K?TlMS9ruW>97wo_5
z4SqDRX2TcHLihn={1J~GpsY`HZBbuI-$g{Z+xi-}nc|wQA-75_9HPdw&!nJkl4gcv
z)F^!4t4~6H)p@DLJjV`HI-2H{%;yO5u_))d>v2U-8j&08msTqhx9LxSr_u6WnrYs{
zNowPCl3XB2VB^lRz2U4xAf(-Fn)Ovw!^ZC$#M^PxPZi|7c*!D#jfMD&xEoTn9NVCV
z<x}@&agN5*Z*%RKWml>tV?W&%-x|IDd~Gd8ej;Mk1N#Nzt5O2R`QqrwDY$md0^}{Y
z*Sk1X(;lNJN|1C;-~Fz^X>jj*HL2)V4U=+3=bqmdWEpPQn0jI2p>L7jqLIqm`%5Dj
z)`cB~@277aPKjAu)6@TO%YZWkE$ajNU4fsxaCXORBtp?oe!f{DTs&H<K;=CuU#)2T
zoTz(p$Jmh7FQGzsTplefEM1U{(FDI>7MC_?G*}isS&A<FbVq%YXa7$J6{T}D8&8l8
z-hkh{<!f|=ygj7eU5(rqpLZv)ytyj<OLI6s{G&Q4kfeP1G6O`d_G%o-d%<Kub04&d
zc2AW@zE2*#Y5ESe)HIqrB-Z0h()0{EbU}XL@E~qYd;k7nQT!``Y?M4bwAS2k*OUnS
zjNO*#R3A8sk*|DpzPbr^B1b%_BV9Bbv-n9=ILJR!P<s7F#U(=`9<R<uNs)K?+&)_{
zhr>7c6uVx06e}~*sq|BY%?(6*v5&4{jzt18v8pSq5&PH*VHA_HUPot}$M%}*wHclM
zf&uLcn`32bM`H=9DVC)hH>S=vOIn+4d#IY5U1V=w^{jVvI8HMqRqM0pUt~?7xzkxe
zGO{tce3KAA8J3sB8=@tVJ!J1@W?`vwwU!;FP+8$N+lqT`Uf{6WPo)~1k3X1h>AL8I
zjvrWcrMl!^{Q6c`9_eDkmKvfq7KC@)a`95ybHj`8e!Fq$l^rdFIHHNu*W3EjXa9;>
zVlOd2#0f^zDl0r&QokCkkoEp*iJoMrQGj4_y3q<|!EsBg>S1Q^uC#78dUK)d<+>Jz
zgr9fm=Es_&N%b&{0rIfKP?v0?#mv~rS*OSPFZ%;W5<AWWNO-^{SCL4Mg(h0RIu3Zb
zV+~&3ka$++j+$ThSsew}Sj-%cau}11&t!m{&@iU)1@mz6>DU4L-#5-{xh%K@1<Y4J
c{nGn+wFv3mBOh>m*YY2lgN-x3Y9}fF-=3r8!T<mO

literal 0
HcmV?d00001

diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Microsoft.PowerToys.Settings.UI.csproj b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Microsoft.PowerToys.Settings.UI.csproj
index c163aae3ad..79adec003a 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Microsoft.PowerToys.Settings.UI.csproj
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Microsoft.PowerToys.Settings.UI.csproj
@@ -111,7 +111,7 @@
     <Compile Include="Controls\SettingsPageControl\SettingsPageControl.xaml.cs">
       <DependentUpon>SettingsPageControl.xaml</DependentUpon>
     </Compile>
- <Compile Include="Controls\OOBEPageControl\OOBEPageControl.xaml.cs">
+    <Compile Include="Controls\OOBEPageControl\OOBEPageControl.xaml.cs">
       <DependentUpon>OOBEPageControl.xaml</DependentUpon>
     </Compile>
     <Compile Include="Controls\SettingsPageControl\SidePanelLink.cs" />
@@ -231,6 +231,7 @@
     <Content Include="Assets\FluentIcons\FluentIconsPowerRename.png" />
     <Content Include="Assets\FluentIcons\FluentIconsPowerToys.png" />
     <Content Include="Assets\FluentIcons\FluentIconsPowerToysRun.png" />
+    <Content Include="Assets\FluentIcons\FluentIconsSettings.png" />
     <Content Include="Assets\FluentIcons\FluentIconsShortcutGuide.png" />
     <Content Include="Assets\FluentIcons\FluentIconsVideoConferenceMute.png" />
     <Content Include="Assets\Logo.scale-200.png" />
@@ -336,7 +337,7 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
-<Page Include="Controls\OOBEPageControl\OOBEPageControl.xaml">
+    <Page Include="Controls\OOBEPageControl\OOBEPageControl.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeFancyZones.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeFancyZones.xaml
index 1deb7dff3d..cb77e00b7e 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeFancyZones.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeFancyZones.xaml
@@ -8,63 +8,32 @@
       xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
       mc:Ignorable="d">
 
-    <Grid>
-        <Grid.RowDefinitions>
-            <RowDefinition Height="280" />
-            <RowDefinition Height="*" />
-        </Grid.RowDefinitions>
+    <controls:OOBEPageControl ModuleTitle="{x:Bind ViewModel.ModuleName}"
+                                  ModuleImageSource="{x:Bind ViewModel.PreviewImageSource}"
+                                  ModuleDescription="{x:Bind ViewModel.Description}">
 
-        <Image Stretch="UniformToFill"
-               Source="{x:Bind ViewModel.PreviewImageSource}" />
-
-        <ScrollViewer Grid.Row="1"
-                      VerticalScrollBarVisibility="Auto">
-            <StackPanel Orientation="Vertical"
-                        Margin="{StaticResource OobePageContentMargin}"
-                        VerticalAlignment="Top">
-                <TextBlock Text="{x:Bind ViewModel.ModuleName}"
-                           AutomationProperties.HeadingLevel="Level2"
-                           Style="{StaticResource PageTitleStyle}" />
-                <TextBlock TextWrapping="Wrap"
-                           Margin="0,4,0,0"
-                           Text="{x:Bind ViewModel.Description}" />
-
-                <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}"
-                                 Margin="-12,0,0,4">
-                    <TextBlock>
-                                <Run x:Uid="Oobe_LearnMore" />
-                                <Run Text="{x:Bind ViewModel.ModuleName}" />
-                    </TextBlock>
-                </HyperlinkButton>
+        <controls:OOBEPageControl.ModuleContent>
+            <StackPanel Orientation="Vertical">
 
                 <TextBlock x:Uid="Oobe_HowToUse"
-                           AutomationProperties.HeadingLevel="Level3"
-                           Style="{StaticResource OobeSubtitleStyle}" />
-
+                           Style="{ThemeResource OobeSubtitleStyle}" />
 
                 <controls:ShortcutTextControl x:Uid="Oobe_FancyZones_HowToUse" />
 
                 <TextBlock x:Uid="Oobe_TipsAndTricks"
-                           AutomationProperties.HeadingLevel="Level3"
-                           Style="{StaticResource OobeSubtitleStyle}" />
+                           Style="{ThemeResource OobeSubtitleStyle}"/>
 
                 <controls:ShortcutTextControl x:Uid="Oobe_FancyZones_TipsAndTricks" />
 
-                <StackPanel Orientation="Horizontal"
-                            Spacing="4"
-                            Margin="0,32,0,0">
-                    <Button Click="SettingsLaunchButton_Click"
-                            AutomationProperties.LabeledBy="{Binding ElementName=SettingsLabel}">
-                        <StackPanel Orientation="Horizontal"
-                                    Spacing="8">
-                            <TextBlock Text="&#xE115;"
-                                       Margin="0,3,0,0"
-                                       FontFamily="Segoe MDL2 Assets" />
-                            <TextBlock x:Uid="OOBE_Settings" Name="SettingsLabel" />
-                        </StackPanel>
-                    </Button>
+                <StackPanel Orientation="Horizontal" Spacing="12" Margin="0,24,0,0">
+                    <Button x:Uid="OOBE_Settings"
+                            Click="SettingsLaunchButton_Click"/>
+                    <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}" Style="{StaticResource HyperlinkButtonStyle}">
+                        <TextBlock x:Uid="LearnMore_FancyZones"
+                               TextWrapping="Wrap" />
+                    </HyperlinkButton>
                 </StackPanel>
             </StackPanel>
-        </ScrollViewer>
-    </Grid>
-</Page>
+        </controls:OOBEPageControl.ModuleContent>
+    </controls:OOBEPageControl>
+</Page>
\ No newline at end of file
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeFileExplorer.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeFileExplorer.xaml
index 3744f347ef..fe0da965c3 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeFileExplorer.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeFileExplorer.xaml
@@ -7,59 +7,27 @@
       xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
       mc:Ignorable="d">
 
-    <Grid>
-        <Grid.RowDefinitions>
-            <RowDefinition Height="280" />
-            <RowDefinition Height="*" />
-        </Grid.RowDefinitions>
+    <controls:OOBEPageControl ModuleTitle="{x:Bind ViewModel.ModuleName}"
+                                  ModuleImageSource="{x:Bind ViewModel.PreviewImageSource}"
+                                  ModuleDescription="{x:Bind ViewModel.Description}">
 
-        <Image Stretch="UniformToFill"
-               Source="{x:Bind ViewModel.PreviewImageSource}" />
-
-        <ScrollViewer Grid.Row="1"
-                      VerticalScrollBarVisibility="Auto">
-            <StackPanel Orientation="Vertical"
-                        Margin="{StaticResource OobePageContentMargin}"
-                        VerticalAlignment="Top">
-
-                <TextBlock Text="{x:Bind ViewModel.ModuleName}"
-                           AutomationProperties.HeadingLevel="Level2"
-                           Style="{StaticResource PageTitleStyle}" />
-
-                <TextBlock Margin="0,4,0,0"
-                           TextWrapping="Wrap"
-                           Text="{x:Bind ViewModel.Description}" />
-
-                <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}"
-                                 Margin="-12,0,0,4">
-                    <TextBlock>
-                                <Run x:Uid="Oobe_LearnMore" />
-                                <Run Text="{x:Bind ViewModel.ModuleName}" />
-                    </TextBlock>
-                </HyperlinkButton>
+        <controls:OOBEPageControl.ModuleContent>
+            <StackPanel Orientation="Vertical">
 
                 <TextBlock x:Uid="Oobe_HowToEnable"
-                           AutomationProperties.HeadingLevel="Level3"
-                           Style="{StaticResource OobeSubtitleStyle}" />
+                           Style="{ThemeResource OobeSubtitleStyle}" />
 
                 <controls:ShortcutTextControl x:Uid="Oobe_FileExplorer_HowToEnable" />
-                
-                <StackPanel Orientation="Horizontal"
-                            Spacing="4"
-                            Margin="0,32,0,0">
 
-                    <Button Click="SettingsLaunchButton_Click"
-                            AutomationProperties.LabeledBy="{Binding ElementName=SettingsLabel}">
-                        <StackPanel Orientation="Horizontal"
-                                    Spacing="8">
-                            <TextBlock Text="&#xE115;"
-                                       Margin="0,3,0,0"
-                                       FontFamily="Segoe MDL2 Assets" />
-                            <TextBlock x:Uid="OOBE_Settings" Name="SettingsLabel" />
-                        </StackPanel>
-                    </Button>
+                <StackPanel Orientation="Horizontal" Spacing="12" Margin="0,24,0,0">
+                    <Button x:Uid="OOBE_Settings"
+                            Click="SettingsLaunchButton_Click"/>
+                    <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}" Style="{StaticResource HyperlinkButtonStyle}">
+                        <TextBlock x:Uid="LearnMore_PowerPreview"
+                               TextWrapping="Wrap" />
+                    </HyperlinkButton>
                 </StackPanel>
             </StackPanel>
-        </ScrollViewer>
-    </Grid>
+        </controls:OOBEPageControl.ModuleContent>
+    </controls:OOBEPageControl>
 </Page>
\ No newline at end of file
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeImageResizer.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeImageResizer.xaml
index 9591e2e96f..78b051934d 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeImageResizer.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeImageResizer.xaml
@@ -8,64 +8,32 @@
       xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
       mc:Ignorable="d">
 
-    <Grid>
-        <Grid.RowDefinitions>
-            <RowDefinition Height="280" />
-            <RowDefinition Height="*" />
-        </Grid.RowDefinitions>
+    <controls:OOBEPageControl ModuleTitle="{x:Bind ViewModel.ModuleName}"
+                                  ModuleImageSource="{x:Bind ViewModel.PreviewImageSource}"
+                                  ModuleDescription="{x:Bind ViewModel.Description}">
 
-        <Image Stretch="UniformToFill"
-               Source="{x:Bind ViewModel.PreviewImageSource}" />
-
-        <ScrollViewer Grid.Row="1"
-                      VerticalScrollBarVisibility="Auto">
-            <StackPanel Orientation="Vertical"
-                        Margin="{StaticResource OobePageContentMargin}"
-                        VerticalAlignment="Top">
-
-                <TextBlock Text="{x:Bind ViewModel.ModuleName}"
-                           AutomationProperties.HeadingLevel="Level2"
-                           Style="{StaticResource PageTitleStyle}" />
-
-                <TextBlock Margin="0,4,0,0"
-                           TextWrapping="Wrap"
-                           Text="{x:Bind ViewModel.Description}" />
-
-                <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}"
-                                 Margin="-12,0,0,4">
-                    <TextBlock>
-                                <Run x:Uid="Oobe_LearnMore" />
-                                <Run Text="{x:Bind ViewModel.ModuleName}" />
-                    </TextBlock>
-                </HyperlinkButton>
+        <controls:OOBEPageControl.ModuleContent>
+            <StackPanel Orientation="Vertical">
 
                 <TextBlock x:Uid="Oobe_HowToLaunch"
-                           AutomationProperties.HeadingLevel="Level3"
-                           Style="{StaticResource OobeSubtitleStyle}" />
+                           Style="{ThemeResource OobeSubtitleStyle}" />
 
                 <controls:ShortcutTextControl x:Uid="Oobe_ImageResizer_HowToLaunch" />
 
                 <TextBlock x:Uid="Oobe_TipsAndTricks"
-                           AutomationProperties.HeadingLevel="Level3"
-                           Style="{StaticResource OobeSubtitleStyle}" />
+                           Style="{ThemeResource OobeSubtitleStyle}"/>
 
                 <controls:ShortcutTextControl x:Uid="Oobe_ImageResizer_TipsAndTricks" />
 
-                <StackPanel Orientation="Horizontal"
-                            Spacing="4"
-                            Margin="0,32,0,0">
-                    <Button Click="SettingsLaunchButton_Click"
-                            AutomationProperties.LabeledBy="{Binding ElementName=SettingsLabel}">
-                        <StackPanel Orientation="Horizontal"
-                                    Spacing="8">
-                            <TextBlock Text="&#xE115;"
-                                       Margin="0,3,0,0"
-                                       FontFamily="Segoe MDL2 Assets" />
-                            <TextBlock x:Uid="OOBE_Settings" Name="SettingsLabel"/>
-                        </StackPanel>
-                    </Button>
+                <StackPanel Orientation="Horizontal" Spacing="12" Margin="0,24,0,0">
+                    <Button x:Uid="OOBE_Settings"
+                            Click="SettingsLaunchButton_Click"/>
+                    <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}" Style="{StaticResource HyperlinkButtonStyle}">
+                        <TextBlock x:Uid="LearnMore_ImageResizer"
+                               TextWrapping="Wrap" />
+                    </HyperlinkButton>
                 </StackPanel>
             </StackPanel>
-        </ScrollViewer>
-    </Grid>
-</Page>
+        </controls:OOBEPageControl.ModuleContent>
+    </controls:OOBEPageControl>
+</Page>
\ No newline at end of file
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeKBM.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeKBM.xaml
index 97d2e9a1d3..f5c5d4546c 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeKBM.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeKBM.xaml
@@ -1,70 +1,37 @@
 <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:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
       mc:Ignorable="d">
 
-    <Grid>
-        <Grid.RowDefinitions>
-            <RowDefinition Height="280" />
-            <RowDefinition Height="*" />
-        </Grid.RowDefinitions>
+    <controls:OOBEPageControl ModuleTitle="{x:Bind ViewModel.ModuleName}"
+                                  ModuleImageSource="{x:Bind ViewModel.PreviewImageSource}"
+                                  ModuleDescription="{x:Bind ViewModel.Description}">
 
-        <Image Stretch="UniformToFill"
-               Source="{x:Bind ViewModel.PreviewImageSource}" />
-
-        <ScrollViewer Grid.Row="1"
-                      VerticalScrollBarVisibility="Auto">
-            <StackPanel Orientation="Vertical"
-                        Margin="{StaticResource OobePageContentMargin}"
-                        VerticalAlignment="Top">
-
-                <TextBlock Text="{x:Bind ViewModel.ModuleName}"
-                           AutomationProperties.HeadingLevel="Level2"
-                           Style="{StaticResource PageTitleStyle}" />
-
-                <TextBlock Margin="0,4,0,0"
-                           TextWrapping="Wrap"
-                           Text="{x:Bind ViewModel.Description}" />
-
-                <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}"
-                                 Margin="-12,0,0,4">
-                    <TextBlock>
-                                <Run x:Uid="Oobe_LearnMore" />
-                                <Run Text="{x:Bind ViewModel.ModuleName}" />
-                    </TextBlock>
-                </HyperlinkButton>
+        <controls:OOBEPageControl.ModuleContent>
+            <StackPanel Orientation="Vertical">
 
                 <TextBlock x:Uid="Oobe_HowToCreateMappings"
-                           AutomationProperties.HeadingLevel="Level3"
-                           Style="{StaticResource OobeSubtitleStyle}" />
+                           Style="{ThemeResource OobeSubtitleStyle}" />
 
                 <controls:ShortcutTextControl x:Uid="Oobe_KBM_HowToCreateMappings" />
 
                 <TextBlock x:Uid="Oobe_TipsAndTricks"
-                           AutomationProperties.HeadingLevel="Level3"
-                           Style="{StaticResource OobeSubtitleStyle}" />
+                           Style="{ThemeResource OobeSubtitleStyle}"/>
 
                 <controls:ShortcutTextControl x:Uid="Oobe_KBM_TipsAndTricks" />
 
-                <StackPanel Orientation="Horizontal"
-                            Spacing="4"
-                            Margin="0,32,0,0">
-                    <Button Click="SettingsLaunchButton_Click"
-                            AutomationProperties.LabeledBy="{Binding ElementName=SettingsLabel}">
-                        <StackPanel Orientation="Horizontal"
-                                    Spacing="8">
-                            <TextBlock Text="&#xE115;"
-                                       Margin="0,3,0,0"
-                                       FontFamily="Segoe MDL2 Assets" />
-                            <TextBlock x:Uid="OOBE_Settings" Name="SettingsLabel" />
-                        </StackPanel>
-                    </Button>
+                <StackPanel Orientation="Horizontal" Spacing="12" Margin="0,24,0,0">
+                    <Button x:Uid="OOBE_Settings"
+                            Click="SettingsLaunchButton_Click"/>
+                    <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}" Style="{StaticResource HyperlinkButtonStyle}">
+                        <TextBlock x:Uid="LearnMore_KBM"
+                               TextWrapping="Wrap" />
+                    </HyperlinkButton>
                 </StackPanel>
             </StackPanel>
-        </ScrollViewer>
-    </Grid>
+        </controls:OOBEPageControl.ModuleContent>
+    </controls:OOBEPageControl>
 </Page>
\ No newline at end of file
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeOverview.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeOverview.xaml
index dc97410862..977d0bbe44 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeOverview.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeOverview.xaml
@@ -4,56 +4,33 @@
       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"
+      xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
       mc:Ignorable="d">
 
-    <Grid>
-        <Grid.RowDefinitions>
-            <RowDefinition Height="280" />
-            <RowDefinition Height="*" />
-        </Grid.RowDefinitions>
+    <controls:OOBEPageControl ModuleTitle="{x:Bind ViewModel.ModuleName}"
+                                  ModuleImageSource="{x:Bind ViewModel.PreviewImageSource}">
 
-        <Image Stretch="UniformToFill"
-               Source="{x:Bind ViewModel.PreviewImageSource}" />
-
-        <ScrollViewer Grid.Row="1"
-                      VerticalScrollBarVisibility="Auto">
-            <StackPanel Orientation="Vertical"
-                        Margin="{StaticResource OobePageContentMargin}"
-                        VerticalAlignment="Top">
-
-                <TextBlock Text="{x:Bind ViewModel.ModuleName}"
-                           AutomationProperties.HeadingLevel="Level2"
-                           Style="{StaticResource PageTitleStyle}" />
+        <controls:OOBEPageControl.ModuleContent>
+            <StackPanel Orientation="Vertical">
 
                 <TextBlock Margin="0,4,0,0"
-                           TextWrapping="Wrap">
-                    <Run x:Uid="Oobe_Overview_Description" />
-                    <Hyperlink NavigateUri="{x:Bind ViewModel.DescriptionLink}">
-                        <Run x:Uid="Oobe_Overview_DescriptionLinkText" />
-                    </Hyperlink><Run Text="." />
-                </TextBlock>
+                           x:Uid="Oobe_Overview_Description"
+                           TextWrapping="Wrap"/>
+                <HyperlinkButton NavigateUri="{x:Bind ViewModel.DescriptionLink}" Style="{StaticResource HyperlinkButtonStyle}">
+                    <TextBlock x:Uid="Oobe_Overview_DescriptionLinkText"
+                               TextWrapping="Wrap" />
+                </HyperlinkButton>
 
-                <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><Run Text="." />
-                </TextBlock>
+                <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}" Style="{StaticResource HyperlinkButtonStyle}">
+                    <TextBlock x:Uid="Oobe_Overview_LatestVersionLink"
+                               TextWrapping="Wrap" />
+                </HyperlinkButton>
 
-                <Button Click="SettingsLaunchButton_Click"
-                        AutomationProperties.LabeledBy="{Binding ElementName=SettingsLabel}"
-                        Margin="0,32,0,0">
-                    <StackPanel Orientation="Horizontal"
-                                Spacing="8">
-                        <TextBlock Text="&#xE115;"
-                                   Margin="0,3,0,0"
-                                   FontFamily="Segoe MDL2 Assets" />
-                        <TextBlock 
-                                   Name="SettingsLabel" />
-                    </StackPanel>
-                </Button>
+                <StackPanel Orientation="Horizontal" Spacing="12" Margin="0,24,0,0">
+                    <Button x:Uid="OOBE_Settings"
+                            Click="SettingsLaunchButton_Click"/>
+                </StackPanel>
             </StackPanel>
-        </ScrollViewer>
-    </Grid>
+        </controls:OOBEPageControl.ModuleContent>
+    </controls:OOBEPageControl>
 </Page>
\ No newline at end of file
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobePowerRename.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobePowerRename.xaml
index 28d6bfb79c..50cff8cf84 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobePowerRename.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobePowerRename.xaml
@@ -7,67 +7,32 @@
       xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
       mc:Ignorable="d">
 
-    <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="{StaticResource OobePageContentMargin}"
-                        VerticalAlignment="Top">
-
-                <TextBlock Text="{x:Bind ViewModel.ModuleName}"
-                           AutomationProperties.HeadingLevel="Level2"
-                           Style="{StaticResource PageTitleStyle}" />
-
-                <TextBlock Margin="0,4,0,0"
-                           TextWrapping="Wrap"
-                           Text="{x:Bind ViewModel.Description}" />
-
-                <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}"
-                                 Margin="-12,0,0,4">
-                    <TextBlock>
-                                <Run x:Uid="Oobe_LearnMore" />
-                                <Run Text="{x:Bind ViewModel.ModuleName}" />
-                    </TextBlock>
-                </HyperlinkButton>
+    <controls:OOBEPageControl ModuleTitle="{x:Bind ViewModel.ModuleName}"
+                                  ModuleImageSource="{x:Bind ViewModel.PreviewImageSource}"
+                                  ModuleDescription="{x:Bind ViewModel.Description}">
 
+        <controls:OOBEPageControl.ModuleContent>
+            <StackPanel Orientation="Vertical">
 
                 <TextBlock x:Uid="Oobe_HowToUse"
-                           AutomationProperties.HeadingLevel="Level3"
-                           Style="{StaticResource OobeSubtitleStyle}" />
+                           Style="{ThemeResource OobeSubtitleStyle}" />
 
                 <controls:ShortcutTextControl x:Uid="Oobe_PowerRename_HowToUse" />
 
                 <TextBlock x:Uid="Oobe_TipsAndTricks"
-                           AutomationProperties.HeadingLevel="Level3"
-                           Style="{StaticResource OobeSubtitleStyle}" />
+                           Style="{ThemeResource OobeSubtitleStyle}"/>
 
-                <TextBlock x:Uid="Oobe_PowerRename_TipsAndTricks"
-                           TextWrapping="Wrap" />
+                <controls:ShortcutTextControl x:Uid="Oobe_PowerRename_TipsAndTricks" />
 
-                <StackPanel Orientation="Horizontal"
-                            Spacing="4"
-                            Margin="0,32,0,0">
-
-                    <Button Click="SettingsLaunchButton_Click"
-                            AutomationProperties.LabeledBy="{Binding ElementName=SettingsLabel}">
-                        <StackPanel Orientation="Horizontal"
-                                    Spacing="8">
-                            <TextBlock Text="&#xE115;"
-                                       Margin="0,3,0,0"
-                                       FontFamily="Segoe MDL2 Assets" />
-                            <TextBlock x:Uid="OOBE_Settings" Name="SettingsLabel" />
-                        </StackPanel>
-                    </Button>
+                <StackPanel Orientation="Horizontal" Spacing="12" Margin="0,24,0,0">
+                    <Button x:Uid="OOBE_Settings"
+                            Click="SettingsLaunchButton_Click"/>
+                    <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}" Style="{StaticResource HyperlinkButtonStyle}">
+                        <TextBlock x:Uid="LearnMore_PowerRename"
+                               TextWrapping="Wrap" />
+                    </HyperlinkButton>
                 </StackPanel>
             </StackPanel>
-        </ScrollViewer>
-    </Grid>
+        </controls:OOBEPageControl.ModuleContent>
+    </controls:OOBEPageControl>
 </Page>
\ No newline at end of file
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeRun.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeRun.xaml
index a5e8beba9a..3ef45b1a4b 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeRun.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeRun.xaml
@@ -8,73 +8,33 @@
       xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
       mc:Ignorable="d">
 
-    <Grid>
-        <Grid.RowDefinitions>
-            <RowDefinition Height="280" />
-            <RowDefinition Height="*" />
-        </Grid.RowDefinitions>
+    <controls:OOBEPageControl ModuleTitle="{x:Bind ViewModel.ModuleName}"
+                                  ModuleImageSource="{x:Bind ViewModel.PreviewImageSource}"
+                                  ModuleDescription="{x:Bind ViewModel.Description}">
 
-        <Image Stretch="UniformToFill"
-               Source="{x:Bind ViewModel.PreviewImageSource}" />
-
-        <ScrollViewer Grid.Row="1"
-                      VerticalScrollBarVisibility="Auto">
-            <StackPanel Orientation="Vertical"
-                        Margin="{StaticResource OobePageContentMargin}"
-                        VerticalAlignment="Top">
-
-                <TextBlock Text="{x:Bind ViewModel.ModuleName}"
-                           AutomationProperties.HeadingLevel="Level2"
-                           Style="{StaticResource PageTitleStyle}" />
-
-                <TextBlock Margin="0,4,0,0"
-                           TextWrapping="Wrap"
-                           Text="{x:Bind ViewModel.Description}" />
-
-                <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}"
-                                 Margin="-12,0,0,4">
-                    <TextBlock>
-                                <Run x:Uid="Oobe_LearnMore" />
-                                <Run Text="{x:Bind ViewModel.ModuleName}" />
-                    </TextBlock>
-
-                </HyperlinkButton>
+        <controls:OOBEPageControl.ModuleContent>
+            <StackPanel Orientation="Vertical">
 
                 <TextBlock x:Uid="Oobe_HowToLaunch"
-                           AutomationProperties.HeadingLevel="Level3"
-                           Style="{StaticResource OobeSubtitleStyle}" />
+                           Style="{ThemeResource OobeSubtitleStyle}" />
 
                 <controls:ShortcutTextControl x:Uid="Oobe_Run_HowToLaunch" />
 
                 <TextBlock x:Uid="Oobe_TipsAndTricks"
-                           AutomationProperties.HeadingLevel="Level3"
-                           Style="{StaticResource OobeSubtitleStyle}" />
+                           Style="{ThemeResource OobeSubtitleStyle}"/>
 
                 <controls:ShortcutTextControl x:Uid="Oobe_Run_TipsAndTricks" />
 
-                <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"
-                            AutomationProperties.LabeledBy="{Binding ElementName=SettingsLabel}">
-                        <StackPanel Orientation="Horizontal"
-                                    Spacing="8">
-                            <TextBlock Text="&#xE115;"
-                                       Margin="0,3,0,0"
-                                       FontFamily="Segoe MDL2 Assets" />
-                            <TextBlock  x:Uid="OOBE_Settings" Name="SettingsLabel" />
-                        </StackPanel>
-                    </Button>
+                <StackPanel Orientation="Horizontal" Spacing="12" Margin="0,24,0,0">
+                    <Button x:Uid="Launch_Run" Style="{StaticResource AccentButtonStyle}" Click="Start_Run_Click"/>
+                    <Button x:Uid="OOBE_Settings"
+                            Click="SettingsLaunchButton_Click"/>
+                    <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}" Style="{StaticResource HyperlinkButtonStyle}">
+                        <TextBlock x:Uid="LearnMore_Run"
+                               TextWrapping="Wrap" />
+                    </HyperlinkButton>
                 </StackPanel>
             </StackPanel>
-        </ScrollViewer>
-    </Grid>
-</Page>
+        </controls:OOBEPageControl.ModuleContent>
+    </controls:OOBEPageControl>
+</Page>
\ No newline at end of file
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeShortcutGuide.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeShortcutGuide.xaml
index 0f7328a555..6ef696af96 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeShortcutGuide.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeShortcutGuide.xaml
@@ -8,65 +8,29 @@
       xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
       mc:Ignorable="d">
 
-    <Grid>
-        <Grid.RowDefinitions>
-            <RowDefinition Height="280" />
-            <RowDefinition Height="*" />
-        </Grid.RowDefinitions>
 
-        <Image Stretch="UniformToFill"
-               Source="{x:Bind ViewModel.PreviewImageSource}" />
+    <controls:OOBEPageControl ModuleTitle="{x:Bind ViewModel.ModuleName}"
+                                  ModuleImageSource="{x:Bind ViewModel.PreviewImageSource}"
+                                  ModuleDescription="{x:Bind ViewModel.Description}">
 
-        <ScrollViewer Grid.Row="1"
-                      VerticalScrollBarVisibility="Auto">
-            <StackPanel Orientation="Vertical"
-                        Margin="{StaticResource OobePageContentMargin}"
-                        VerticalAlignment="Top">
-
-                <TextBlock Text="{x:Bind ViewModel.ModuleName}"
-                           AutomationProperties.HeadingLevel="Level2"
-                           Style="{StaticResource PageTitleStyle}" />
-
-                <TextBlock Margin="0,4,0,0"
-                           TextWrapping="Wrap"
-                           Text="{x:Bind ViewModel.Description}" />
-
-                <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}"
-                                 Margin="-12,0,0,4">
-
-                    <TextBlock>
-                                <Run x:Uid="Oobe_LearnMore" />
-                                <Run Text="{x:Bind ViewModel.ModuleName}" />
-                    </TextBlock>
-                </HyperlinkButton>
+        <controls:OOBEPageControl.ModuleContent>
+            <StackPanel Orientation="Vertical">
 
                 <TextBlock x:Uid="Oobe_HowToLaunch"
-                           AutomationProperties.HeadingLevel="Level3"
-                           Style="{StaticResource OobeSubtitleStyle}" />
+                           Style="{ThemeResource OobeSubtitleStyle}" />
 
                 <controls:ShortcutTextControl x:Uid="Oobe_ShortcutGuide_HowToLaunch" />
-                
-                <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"
-                            AutomationProperties.LabeledBy="{Binding ElementName=SettingsLabel}">
-                        <StackPanel Orientation="Horizontal"
-                                    Spacing="8">
-                            <TextBlock Text="&#xE115;"
-                                       Margin="0,3,0,0"
-                                       FontFamily="Segoe MDL2 Assets" />
-                            <TextBlock x:Uid="OOBE_Settings" Name="SettingsLabel" />
-                        </StackPanel>
-                    </Button>
+
+                <StackPanel Orientation="Horizontal" Spacing="12" Margin="0,24,0,0">
+                    <Button x:Uid="Launch_ShortcutGuide" Style="{StaticResource AccentButtonStyle}" Click="Start_ShortcutGuide_Click"/>
+                    <Button x:Uid="OOBE_Settings"
+                            Click="SettingsLaunchButton_Click"/>
+                    <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}" Style="{StaticResource HyperlinkButtonStyle}">
+                        <TextBlock x:Uid="LearnMore_ShortcutGuide"
+                               TextWrapping="Wrap" />
+                    </HyperlinkButton>
                 </StackPanel>
             </StackPanel>
-        </ScrollViewer>
-    </Grid>
-</Page>
+        </controls:OOBEPageControl.ModuleContent>
+    </controls:OOBEPageControl>
+</Page>
\ No newline at end of file
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeVideoConference.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeVideoConference.xaml
index f84456cbfa..4ea415ae03 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeVideoConference.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeVideoConference.xaml
@@ -8,58 +8,27 @@
       xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
       mc:Ignorable="d">
 
-    <Grid>
-        <Grid.RowDefinitions>
-            <RowDefinition Height="280" />
-            <RowDefinition Height="*" />
-        </Grid.RowDefinitions>
+    <controls:OOBEPageControl ModuleTitle="{x:Bind ViewModel.ModuleName}"
+                                  ModuleImageSource="{x:Bind ViewModel.PreviewImageSource}"
+                                  ModuleDescription="{x:Bind ViewModel.Description}">
 
-        <Image Stretch="UniformToFill"
-               Source="{x:Bind ViewModel.PreviewImageSource}" />
-
-        <ScrollViewer Grid.Row="1"
-                      VerticalScrollBarVisibility="Auto">
-            <StackPanel Orientation="Vertical"
-                        Margin="{StaticResource OobePageContentMargin}"
-                        VerticalAlignment="Top">
-
-                <TextBlock Text="{x:Bind ViewModel.ModuleName}"
-                           AutomationProperties.HeadingLevel="Level2"
-                           Style="{StaticResource PageTitleStyle}" />
-
-                <TextBlock TextWrapping="Wrap"
-                           Margin="0,4,0,0"
-                           Text="{x:Bind ViewModel.Description}" />
-
-                <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}"
-                                 Margin="-12,0,0,4">
-                    <TextBlock>
-                                <Run x:Uid="Oobe_LearnMore" />
-                                <Run Text="{x:Bind ViewModel.ModuleName}" />
-                    </TextBlock>
-                </HyperlinkButton>
+        <controls:OOBEPageControl.ModuleContent>
+            <StackPanel Orientation="Vertical">
 
                 <TextBlock x:Uid="Oobe_HowToLaunch"
-                           AutomationProperties.HeadingLevel="Level3"
-                           Style="{StaticResource OobeSubtitleStyle}" />
+                           Style="{ThemeResource OobeSubtitleStyle}" />
 
                 <controls:ShortcutTextControl x:Uid="Oobe_VideoConference_HowToLaunch" />
 
-                <StackPanel Orientation="Horizontal"
-                            Margin="0,32,0,0"
-                            Spacing="8">
-                    <Button Click="SettingsLaunchButton_Click"
-                            AutomationProperties.LabeledBy="{Binding ElementName=SettingsLabel}"> 
-                        <StackPanel Orientation="Horizontal"
-                                    Spacing="8">
-                            <TextBlock Text="&#xE115;"
-                                       Margin="0,3,0,0"
-                                       FontFamily="Segoe MDL2 Assets" />
-                            <TextBlock x:Uid="OOBE_Settings" Name="SettingsLabel"/>
-                        </StackPanel>
-                    </Button>
+                <StackPanel Orientation="Horizontal" Spacing="12" Margin="0,24,0,0">
+                    <Button x:Uid="OOBE_Settings"
+                            Click="SettingsLaunchButton_Click"/>
+                    <HyperlinkButton NavigateUri="{x:Bind ViewModel.Link}" Style="{StaticResource HyperlinkButtonStyle}">
+                        <TextBlock x:Uid="LearnMore_VCM"
+                               TextWrapping="Wrap" />
+                    </HyperlinkButton>
                 </StackPanel>
             </StackPanel>
-        </ScrollViewer>
-    </Grid>
-</Page>
+        </controls:OOBEPageControl.ModuleContent>
+    </controls:OOBEPageControl>
+</Page>
\ No newline at end of file
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw
index 6dd47c2665..0695e4a1d7 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw
@@ -1170,7 +1170,7 @@ Made with 💗 by Microsoft and the PowerToys community.</value>
     <value>Launch</value>
   </data>
   <data name="Launch_ColorPicker.Content" xml:space="preserve">
-    <value>Launch ColorPicker</value>
+    <value>Launch Color Picker</value>
   </data>
   <data name="Oobe_LearnMore.Text" xml:space="preserve">
     <value>Learn more about</value>
@@ -1202,18 +1202,16 @@ Made with 💗 by Microsoft and the PowerToys community.</value>
   <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 in our</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>
+    
+Take a moment to preview the various utilities listed or view our comprehensive documentation.</value>
   </data>
   <data name="Oobe_Overview_DescriptionLinkText.Text" xml:space="preserve">
-    <value>Microsoft Docs</value>
+    <value>Check out documentation on Microsoft Docs</value>
   </data>
   <data name="Oobe_Overview_LatestVersionLink.Text" xml:space="preserve">
-    <value>release notes</value>
+    <value>Check out what's new in our release notes</value>
   </data>
   <data name="Oobe_ColorPicker_HowToUse.Text" xml:space="preserve">
     <value>{Win} + {Shift} + {C} to open Color Picker.</value>
@@ -1517,4 +1515,10 @@ From there, simply click on a Markdown file or SVG icon in the File Explorer and
     <value>File Explorer add-ons</value>
     <comment>Do not localize this string</comment>
   </data>
+  <data name="Launch_Run.Content" xml:space="preserve">
+    <value>Launch PowerToys Run</value>
+  </data>
+  <data name="Launch_ShortcutGuide.Content" xml:space="preserve">
+    <value>Launch Shortcut Guide</value>
+  </data>
 </root>
\ No newline at end of file
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ShellPage.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ShellPage.xaml
index 31c7ca61cb..00cddc8f2a 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ShellPage.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ShellPage.xaml
@@ -43,7 +43,7 @@
             <winui:NavigationView.MenuItems>
                 <winui:NavigationViewItem x:Uid="Shell_General" helpers:NavHelper.NavigateTo="views:GeneralPage" AutomationProperties.HeadingLevel="Level1">
                     <winui:NavigationViewItem.Icon>
-                        <FontIcon Glyph="&#xE713;"/>
+                        <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsSettings.png" ShowAsMonochrome="False"/>
                     </winui:NavigationViewItem.Icon>
                 </winui:NavigationViewItem>