From 3015ffd9508b363ff74b58355421f895ddbc6420 Mon Sep 17 00:00:00 2001
From: Niels Laute <niels.laute@live.nl>
Date: Tue, 31 Mar 2020 14:32:22 +0200
Subject: [PATCH] Settings V2: new FancyZones, ImageResizer XAML, sidepanels
 are now in the settings pages for more flexibility (#1792)

* Added FZ settings page

* Added FZ page

* Added sidepanel to all settings pages + UX improvements. New Fancy zones page.

* Added ImageResizer page + sidepanel improvements

* Revert "Added ImageResizer page + sidepanel improvements"

This reverts commit 75bc37a6ba27023fd6c6c155d3d65d937615d6bc.

* Removed contributors on general page

* Added ImageResizer page
---
 PowerToys.sln                                 |   1 +
 .../Microsoft.PowerToys.Settings.UI/App.xaml  |   2 +-
 .../Microsoft.PowerToys.Settings.UI.csproj    |  22 +-
 .../Strings/en-us/Resources.resw              |  14 +-
 .../Styles/_Sizes.xaml                        |  19 ++
 .../ViewModels/FancyZonesViewModel.cs         |  13 ++
 .../ViewModels/ImageResizerViewModel.cs       |  13 ++
 .../Views/FancyZonesPage.xaml                 | 145 +++++++++++++
 .../Views/FancyZonesPage.xaml.cs              |  28 +++
 .../Views/GeneralPage.xaml                    |  87 ++++++--
 .../Views/GeneralPage.xaml.cs                 |  35 ++--
 .../Views/ImageResizerPage.xaml               | 195 ++++++++++++++++++
 .../Views/ImageResizerPage.xaml.cs            |  29 +++
 .../Views/PowerLauncherPage.xaml              |  63 +++++-
 .../Views/PowerPreviewPage.xaml               |  56 ++++-
 .../Views/PowerPreviewPage.xaml.cs            |   8 -
 .../Views/PowerRenamePage.xaml                |  71 ++++++-
 .../Views/ShellPage.xaml                      |  98 +++------
 .../Views/ShellPage.xaml.cs                   |  45 +---
 .../Views/ShortcutGuidePage.xaml              |  53 ++++-
 20 files changed, 813 insertions(+), 184 deletions(-)
 create mode 100644 src/core/Microsoft.PowerToys.Settings.UI/Styles/_Sizes.xaml
 create mode 100644 src/core/Microsoft.PowerToys.Settings.UI/ViewModels/FancyZonesViewModel.cs
 create mode 100644 src/core/Microsoft.PowerToys.Settings.UI/ViewModels/ImageResizerViewModel.cs
 create mode 100644 src/core/Microsoft.PowerToys.Settings.UI/Views/FancyZonesPage.xaml
 create mode 100644 src/core/Microsoft.PowerToys.Settings.UI/Views/FancyZonesPage.xaml.cs
 create mode 100644 src/core/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml
 create mode 100644 src/core/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml.cs

diff --git a/PowerToys.sln b/PowerToys.sln
index 544c96ba52..77c12b0a80 100644
--- a/PowerToys.sln
+++ b/PowerToys.sln
@@ -189,6 +189,7 @@ Project("{8BC9CEB8-8B4A-11D0-8D11-00A0C91BC942}") = "Microsoft.PowerToys.Setting
 Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Solution Items", "Solution Items", "{4981CCD1-4CD9-4A49-B240-00AA46493FF8}"
 	ProjectSection(SolutionItems) = preProject
 		.editorconfig = .editorconfig
+		src\tests\win-app-driver\packages.config = src\tests\win-app-driver\packages.config
 	EndProjectSection
 EndProject
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Microsoft.PowerToys.Settings.UI.Lib", "src\core\Microsoft.PowerToys.Settings.UI.Lib\Microsoft.PowerToys.Settings.UI.Lib.csproj", "{B1BCC8C6-46B5-4BFA-8F22-20F32D99EC6A}"
diff --git a/src/core/Microsoft.PowerToys.Settings.UI/App.xaml b/src/core/Microsoft.PowerToys.Settings.UI/App.xaml
index e5a4b1b823..7ea0edfe34 100644
--- a/src/core/Microsoft.PowerToys.Settings.UI/App.xaml
+++ b/src/core/Microsoft.PowerToys.Settings.UI/App.xaml
@@ -10,7 +10,7 @@
                 <ResourceDictionary Source="/Styles/_Colors.xaml" />
                 <ResourceDictionary Source="/Styles/_FontSizes.xaml" />
                 <ResourceDictionary Source="/Styles/_Thickness.xaml" />
-
+                <ResourceDictionary Source="/Styles/_Sizes.xaml" />
                 <ResourceDictionary Source="/Styles/TextBlock.xaml" />
                 <ResourceDictionary Source="/Styles/Page.xaml"/>
             </ResourceDictionary.MergedDictionaries>
diff --git a/src/core/Microsoft.PowerToys.Settings.UI/Microsoft.PowerToys.Settings.UI.csproj b/src/core/Microsoft.PowerToys.Settings.UI/Microsoft.PowerToys.Settings.UI.csproj
index 1463d65a70..9562010244 100644
--- a/src/core/Microsoft.PowerToys.Settings.UI/Microsoft.PowerToys.Settings.UI.csproj
+++ b/src/core/Microsoft.PowerToys.Settings.UI/Microsoft.PowerToys.Settings.UI.csproj
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="utf-8"?>
 <Project ToolsVersion="15.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
   <Import Project="$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props" Condition="Exists('$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props')" />
   <PropertyGroup>
@@ -134,6 +134,8 @@
     <Compile Include="Services\ActivationService.cs" />
     <Compile Include="Services\NavigationService.cs" />
     <Compile Include="ViewModels\GeneralViewModel.cs" />
+    <Compile Include="ViewModels\FancyZonesViewModel.cs" />
+    <Compile Include="ViewModels\ImageResizerViewModel.cs" />
     <Compile Include="ViewModels\PowerRenameViewModel.cs" />
     <Compile Include="ViewModels\PowerLauncherViewModel.cs" />
     <Compile Include="ViewModels\ShellViewModel.cs" />
@@ -141,12 +143,18 @@
     <Compile Include="Views\GeneralPage.xaml.cs">
       <DependentUpon>GeneralPage.xaml</DependentUpon>
     </Compile>
+    <Compile Include="Views\ImageResizerPage.xaml.cs">
+      <DependentUpon>ImageResizerPage.xaml</DependentUpon>
+    </Compile>
     <Compile Include="Views\PowerLauncherPage.xaml.cs">
       <DependentUpon>PowerLauncherPage.xaml</DependentUpon>
     </Compile>
     <Compile Include="Views\PowerPreviewPage.xaml.cs">
       <DependentUpon>PowerPreviewPage.xaml</DependentUpon>
     </Compile>
+    <Compile Include="Views\FancyZonesPage.xaml.cs">
+      <DependentUpon>FancyZonesPage.xaml</DependentUpon>
+    </Compile>
     <Compile Include="Views\PowerRenamePage.xaml.cs">
       <DependentUpon>PowerRenamePage.xaml</DependentUpon>
     </Compile>
@@ -214,6 +222,10 @@
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
     </Page>
+    <Page Include="Styles\_Sizes.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="Styles\_Thickness.xaml">
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
@@ -222,10 +234,18 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="Views\ImageResizerPage.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="Views\PowerLauncherPage.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="Views\FancyZonesPage.xaml">
+      <Generator>MSBuild:Compile</Generator>
+      <SubType>Designer</SubType>
+    </Page>
     <Page Include="Views\PowerPreviewPage.xaml">
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
diff --git a/src/core/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw b/src/core/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw
index 0ccb936aa8..13bf1145e1 100644
--- a/src/core/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw
+++ b/src/core/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw
@@ -145,8 +145,16 @@
     <value>Shortcut Guide</value>
     <comment>Navigation view item name for Shortcut Guide</comment>
   </data>
-   <data name="Shell_PowerPreview.Content" xml:space="preserve">
+  <data name="Shell_PowerPreview.Content" xml:space="preserve">
     <value>File Explorer Preview</value>
-    <comment>File Explorer Preview Settings</comment>
-  </data> 
+    <comment>Navigation view item name for File Explorer Preview</comment>
+  </data>
+  <data name="Shell_FancyZones.Content" xml:space="preserve">
+    <value>FancyZones</value>
+    <comment>Navigation view item name for FancyZones</comment>
+  </data>
+  <data name="Shell_ImageResizer.Content" xml:space="preserve">
+    <value>Image Resizer</value>
+    <comment>Navigation view item name for Image Resizer</comment>
+  </data>
 </root>
\ No newline at end of file
diff --git a/src/core/Microsoft.PowerToys.Settings.UI/Styles/_Sizes.xaml b/src/core/Microsoft.PowerToys.Settings.UI/Styles/_Sizes.xaml
new file mode 100644
index 0000000000..ec5eaec72c
--- /dev/null
+++ b/src/core/Microsoft.PowerToys.Settings.UI/Styles/_Sizes.xaml
@@ -0,0 +1,19 @@
+<ResourceDictionary
+    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.Styles">
+
+    <x:Double x:Key="SidePanelWidth">180</x:Double>
+
+    <!-- Breakpoint for wide layout (side panel next to content) -->
+    <x:Double x:Key="WideLayoutMinWidth">1100</x:Double>
+    
+    <!-- Breakpoint for small layout (side panel under content) -->
+    <x:Double x:Key="SmallLayoutMinWidth">480</x:Double>
+
+    <!-- Column spacing between content and sidepanel -->
+    <x:Double x:Key="DefaultColumnSpacing">24</x:Double>
+
+    <!-- Row spacing between content and sidepanel (in small mode) -->
+    <x:Double x:Key="DefaultRowSpacing">24</x:Double>
+</ResourceDictionary>
diff --git a/src/core/Microsoft.PowerToys.Settings.UI/ViewModels/FancyZonesViewModel.cs b/src/core/Microsoft.PowerToys.Settings.UI/ViewModels/FancyZonesViewModel.cs
new file mode 100644
index 0000000000..71adf5ab87
--- /dev/null
+++ b/src/core/Microsoft.PowerToys.Settings.UI/ViewModels/FancyZonesViewModel.cs
@@ -0,0 +1,13 @@
+using System;
+
+using Microsoft.PowerToys.Settings.UI.Helpers;
+
+namespace Microsoft.PowerToys.Settings.UI.ViewModels
+{
+    public class FancyZonesViewModel : Observable
+    {
+        public FancyZonesViewModel()
+        {
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/core/Microsoft.PowerToys.Settings.UI/ViewModels/ImageResizerViewModel.cs b/src/core/Microsoft.PowerToys.Settings.UI/ViewModels/ImageResizerViewModel.cs
new file mode 100644
index 0000000000..6a89566057
--- /dev/null
+++ b/src/core/Microsoft.PowerToys.Settings.UI/ViewModels/ImageResizerViewModel.cs
@@ -0,0 +1,13 @@
+using System;
+
+using Microsoft.PowerToys.Settings.UI.Helpers;
+
+namespace Microsoft.PowerToys.Settings.UI.ViewModels
+{
+    public class ImageResizerViewModel : Observable
+    {
+        public ImageResizerViewModel()
+        {
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/core/Microsoft.PowerToys.Settings.UI/Views/FancyZonesPage.xaml b/src/core/Microsoft.PowerToys.Settings.UI/Views/FancyZonesPage.xaml
new file mode 100644
index 0000000000..ee68c4f0c5
--- /dev/null
+++ b/src/core/Microsoft.PowerToys.Settings.UI/Views/FancyZonesPage.xaml
@@ -0,0 +1,145 @@
+<Page
+    x:Class="Microsoft.PowerToys.Settings.UI.Views.FancyZonesPage"
+    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.Views"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
+    mc:Ignorable="d"
+    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+
+    <Grid ColumnSpacing="{StaticResource DefaultColumnSpacing}" RowSpacing="{StaticResource DefaultRowSpacing}">
+        <VisualStateManager.VisualStateGroups>
+            <VisualStateGroup x:Name="LayoutVisualStates">
+                <VisualState x:Name="WideLayout">
+                    <VisualState.StateTriggers>
+                        <AdaptiveTrigger MinWindowWidth="{StaticResource WideLayoutMinWidth}" />
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="SidePanel.(Grid.Column)" Value="1" />
+                        <Setter Target="SidePanel.(Grid.Row)" Value="0" />
+                    </VisualState.Setters>
+                </VisualState>
+                <VisualState x:Name="SmallLayout">
+                    <VisualState.StateTriggers>
+                        <AdaptiveTrigger MinWindowWidth="{StaticResource SmallLayoutMinWidth}" />
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="SidePanel.(Grid.Column)" Value="0" />
+                        <Setter Target="SidePanel.(Grid.Row)" Value="1" />
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
+        </VisualStateManager.VisualStateGroups>
+        <Grid.ColumnDefinitions>
+            <ColumnDefinition Width="*"/>
+            <ColumnDefinition Width="Auto"/>
+        </Grid.ColumnDefinitions>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto"/>
+            <RowDefinition Height="Auto" />
+        </Grid.RowDefinitions>
+
+        <StackPanel Orientation="Vertical">
+            <TextBlock Text="Create window layouts to help make multi-tasking easy."
+                       TextWrapping="Wrap"/>
+
+            <ToggleSwitch Header="Enable FancyZones"
+                          IsOn="True"
+                          Margin="{StaticResource SmallTopMargin}" />
+
+            <TextBlock Text="Zone behaviour"
+                       Style="{StaticResource SettingsGroupTitleStyle}"/>
+
+            <CheckBox Content="Hold Shift key or any non-primary mouse button to enable zones while dragging"
+                          IsChecked="True"
+                          Margin="{StaticResource SmallTopMargin}"/>
+
+            <CheckBox Content="Override Windows Snap hotkeys (Win + arrow) to move windows between zones"
+                          IsChecked="True"
+                          Margin="{StaticResource SmallTopMargin}"/>
+
+            <CheckBox Content="Flash zones when the active FancyZones layout changes"
+                          IsChecked="True"
+                          Margin="{StaticResource SmallTopMargin}"/>
+
+            <CheckBox Content="Keep windows in their zones when the screen resolution changes"
+                          IsChecked="True"
+                          Margin="{StaticResource SmallTopMargin}"/>
+
+            <CheckBox Content="During zone layout changes, windows assigned to a zone will match new size/positions"
+                          IsChecked="True"
+                          Margin="{StaticResource SmallTopMargin}"/>
+
+            <CheckBox Content="Keep windows pinned to multiple desktops in the same zone when the active desktop changes"
+                          IsChecked="True"
+                          Margin="{StaticResource SmallTopMargin}"/>
+
+            <CheckBox Content="Move newly created windows to their last known zone"
+                          IsChecked="True"
+                          Margin="{StaticResource SmallTopMargin}"/>
+
+            <CheckBox Content="Follow mouse cursor instead of focus when launching editor in a multi screen environment"
+                          IsChecked="True"
+                          Margin="{StaticResource SmallTopMargin}"/>
+
+
+
+
+            <TextBlock Text="Appearance" 
+                       Style="{StaticResource SettingsGroupTitleStyle}"/>
+
+            <!-- TO DO: Do we still need this numberbox? The colorpicker has an Alpha/Opacity option as well so we could use that -->
+            <muxc:NumberBox Header="Zone highlight opacity (%)"
+                            Value="90"
+                            Minimum="0"
+                            Maximum="100"
+                            SpinButtonPlacementMode="Inline"
+                            HorizontalAlignment="Left"
+                            Margin="{StaticResource SmallTopMargin}" />
+
+            <TextBlock Text="Zone highlight color (default: #0078D7)" 
+                       Style="{StaticResource BodyTextBlockStyle}"
+                       Margin="{StaticResource SmallTopMargin}" />
+            
+            <muxc:ColorPicker Margin="0,6,0,0"
+                              HorizontalAlignment="Left"
+                              IsMoreButtonVisible="True"
+                              IsColorSliderVisible="True"
+                              IsColorChannelTextInputVisible="True"
+                              IsHexInputVisible="True"
+                              IsAlphaEnabled="True"
+                              IsAlphaSliderVisible="True"
+                              IsAlphaTextInputVisible="True" />
+
+            <TextBlock Text="Excluded apps" 
+                       Style="{StaticResource SettingsGroupTitleStyle}"/>
+
+            <TextBox Header="To exclude an application from snapping to zones add its name here (one per line). Excluded apps will react to the Windows Snap regardless of all other settings."
+                     Margin="{StaticResource SmallTopMargin}"/>
+            
+        </StackPanel>
+        
+        <StackPanel x:Name="SidePanel"
+                                Orientation="Vertical"
+                                HorizontalAlignment="Left"
+                                Width="{StaticResource SidePanelWidth}"
+                                Grid.Column="1">
+
+            <TextBlock Text="About this feature"
+                                   Style="{StaticResource SettingsGroupTitleStyle}"
+                                   Margin="{StaticResource XSmallBottomMargin}"/>
+            <Image Source="https://user-images.githubusercontent.com/9866362/77859136-f04ae880-7207-11ea-8a7f-4295342fe319.gif" />
+            <HyperlinkButton Content="Module overview" NavigateUri="https://github.com/microsoft/PowerToys/blob/master/src/modules/fancyzones/README.md"/>
+            <HyperlinkButton Content="Give feedback"/>
+
+            <TextBlock Text="Contributors"
+                           Style="{StaticResource SettingsGroupTitleStyle}"/>
+
+            <HyperlinkButton Content="Contributor name"/>
+            <HyperlinkButton Content="Contributor name"/>
+            <HyperlinkButton Content="Contributor name"/>
+        </StackPanel>
+    </Grid>
+</Page>
\ No newline at end of file
diff --git a/src/core/Microsoft.PowerToys.Settings.UI/Views/FancyZonesPage.xaml.cs b/src/core/Microsoft.PowerToys.Settings.UI/Views/FancyZonesPage.xaml.cs
new file mode 100644
index 0000000000..b789c48621
--- /dev/null
+++ b/src/core/Microsoft.PowerToys.Settings.UI/Views/FancyZonesPage.xaml.cs
@@ -0,0 +1,28 @@
+using Microsoft.PowerToys.Settings.UI.ViewModels;
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Runtime.InteropServices.WindowsRuntime;
+using Windows.Foundation;
+using Windows.Foundation.Collections;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Controls.Primitives;
+using Windows.UI.Xaml.Data;
+using Windows.UI.Xaml.Input;
+using Windows.UI.Xaml.Media;
+using Windows.UI.Xaml.Navigation;
+
+namespace Microsoft.PowerToys.Settings.UI.Views
+{
+    public sealed partial class FancyZonesPage : Page
+    {
+        public FancyZonesViewModel ViewModel { get; } = new FancyZonesViewModel();
+
+        public FancyZonesPage()
+        {
+            this.InitializeComponent();
+        }
+    }
+}
diff --git a/src/core/Microsoft.PowerToys.Settings.UI/Views/GeneralPage.xaml b/src/core/Microsoft.PowerToys.Settings.UI/Views/GeneralPage.xaml
index 0dd40c279b..e123d7b36e 100644
--- a/src/core/Microsoft.PowerToys.Settings.UI/Views/GeneralPage.xaml
+++ b/src/core/Microsoft.PowerToys.Settings.UI/Views/GeneralPage.xaml
@@ -9,27 +9,56 @@
     mc:Ignorable="d"
     Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 
-    <Grid>
-        <ScrollViewer>
-            <StackPanel Orientation="Vertical">
+    <Grid ColumnSpacing="{StaticResource DefaultColumnSpacing}" RowSpacing="{StaticResource DefaultRowSpacing}">
+        <VisualStateManager.VisualStateGroups>
+            <VisualStateGroup x:Name="LayoutVisualStates">
+                <VisualState x:Name="WideLayout">
+                    <VisualState.StateTriggers>
+                        <AdaptiveTrigger MinWindowWidth="{StaticResource WideLayoutMinWidth}" />
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="SidePanel.(Grid.Column)" Value="1" />
+                        <Setter Target="SidePanel.(Grid.Row)" Value="0" />
+                    </VisualState.Setters>
+                </VisualState>
+                <VisualState x:Name="SmallLayout">
+                    <VisualState.StateTriggers>
+                        <AdaptiveTrigger MinWindowWidth="{StaticResource SmallLayoutMinWidth}" />
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="SidePanel.(Grid.Column)" Value="0" />
+                        <Setter Target="SidePanel.(Grid.Row)" Value="1" />
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
+        </VisualStateManager.VisualStateGroups>
+        <Grid.ColumnDefinitions>
+            <ColumnDefinition Width="*"/>
+            <ColumnDefinition Width="Auto"/>
+        </Grid.ColumnDefinitions>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto"/>
+            <RowDefinition Height="Auto" />
+        </Grid.RowDefinitions>
+        <StackPanel Orientation="Vertical">
 
-                <ToggleSwitch Header="Run at startup" x:Name="ToggleSwitch_RunAtStartUp"  Margin="{StaticResource SmallTopMargin}" Toggled="ToggleSwitch_RunAtStartUp_Toggled" />
+            <ToggleSwitch Header="Run at startup" x:Name="ToggleSwitch_RunAtStartUp"  Margin="{StaticResource SmallTopMargin}" Toggled="ToggleSwitch_RunAtStartUp_Toggled" />
 
-                <muxc:RadioButtons Header="Theme" Margin="{StaticResource SmallTopMargin}">
-                    <RadioButton x:Name="Rodio_Theme_Dark" Content="Dark" Tag="Dark" Checked="Theme_Changed"/>
-                    <RadioButton x:Name="Rodio_Theme_Light"  Content="Light" Tag="Light" Checked="Theme_Changed"/>
-                    <RadioButton x:Name="Rodio_Theme_Default"  Content="System default" Tag="System" Checked="Theme_Changed"/>
-                </muxc:RadioButtons>
+            <muxc:RadioButtons Header="Theme" Margin="{StaticResource SmallTopMargin}">
+                <RadioButton x:Name="Radio_Theme_Dark" Content="Dark" Tag="Dark" Checked="Theme_Changed"/>
+                <RadioButton x:Name="Radio_Theme_Light"  Content="Light" Tag="Light" Checked="Theme_Changed"/>
+                <RadioButton x:Name="Radio_Theme_Default"  Content="System default" Tag="System" Checked="Theme_Changed"/>
+            </muxc:RadioButtons>
 
-                <!--
+            <!--
                     <TextBlock Text="Default apps" Style="{StaticResource SettingsGroupTitleStyle}"/>
                 <ToggleSwitch Header="Disable telemetry" IsOn="True" Margin="0,14,0,0" />
                 <TextBlock Text="PowerToys currently respects the Windows data &amp; feedback setting" Opacity="0.8" Margin="0,0,0,0" />
                     -->
 
-                <Button Background="{ThemeResource SystemAccentColor}" Content="Restart as admin" Margin="{StaticResource SmallTopMargin}" Foreground="White" Click="Restart_Elevated" />
+            <Button Content="Restart as admin" Margin="{StaticResource SmallTopMargin}" Style="{StaticResource AccentButtonStyle}" Click="Restart_Elevated" />
 
-                <!--
+            <!--
                 <TextBlock Text="Default apps" Style="{StaticResource SubtitleTextBlockStyle}" Margin="0,34,0,8"/>
                 <ComboBox Header="Shell" SelectedIndex="0" MinWidth="240" Margin="0,14,0,0">
                     <ComboBoxItem>PowerShell</ComboBoxItem>
@@ -39,15 +68,31 @@
                 </ComboBox>
                -->
 
-                <TextBlock Text="About PowerToys" Style="{StaticResource SettingsGroupTitleStyle}"/>
-                <TextBlock Text="Version 0.15.1.0" FontWeight="Bold" Margin="{StaticResource SmallTopMargin}" />
-                <!--<Button Background="{ThemeResource SystemAccentColor}" Content="Check for updates" Margin="0,10,0,0" Foreground="White" />
-                 TO DO: The styling of this button should be improved so the hover/pressed states are representing the SystemAccentColor -->
+        </StackPanel>
 
-                <HyperlinkButton Content="Report a bug" NavigateUri="https://github.com/microsoft/PowerToys/issues" />
-                <HyperlinkButton Content="Request a feature"  NavigateUri="https://github.com/microsoft/PowerToys/issues"/>
-                <HyperlinkButton Content="Privacy statement" NavigateUri=" http://go.microsoft.com/fwlink/?LinkId=521839" />
-            </StackPanel>
-        </ScrollViewer>
+        <StackPanel x:Name="SidePanel"
+                                Orientation="Vertical"
+                                HorizontalAlignment="Left"
+                                Width="{StaticResource SidePanelWidth}"
+                                Grid.Column="1">
+
+            <TextBlock Text="About PowerToys"
+                                   Style="{StaticResource SettingsGroupTitleStyle}"
+                                   Margin="{StaticResource XSmallBottomMargin}"/>
+            <TextBlock Text="Version 0.15.2" FontWeight="Bold" Margin="{StaticResource SmallTopMargin}" />
+            <Button Content="Check for updates" Margin="{StaticResource SmallTopMargin}" Foreground="White" Style="{StaticResource AccentButtonStyle}" Click="CheckForUpdates_Click" />
+
+            <HyperlinkButton Content="Report a bug" NavigateUri="https://github.com/microsoft/PowerToys/issues" Margin="{StaticResource SmallTopMargin}" />
+            <HyperlinkButton Content="Request a feature"  NavigateUri="https://github.com/microsoft/PowerToys/issues"/>
+            <HyperlinkButton Content="Privacy statement" NavigateUri=" http://go.microsoft.com/fwlink/?LinkId=521839" />
+
+         
+
+            <!--<TextBlock Text="Contributors" Style="{StaticResource SettingsGroupTitleStyle}"/>
+
+            <HyperlinkButton Content="Contributor name"/>
+            <HyperlinkButton Content="Contributor name"/>
+            <HyperlinkButton Content="Contributor name"/>-->
+        </StackPanel>
     </Grid>
 </Page>
diff --git a/src/core/Microsoft.PowerToys.Settings.UI/Views/GeneralPage.xaml.cs b/src/core/Microsoft.PowerToys.Settings.UI/Views/GeneralPage.xaml.cs
index f06a2022b1..80d3c3c70c 100644
--- a/src/core/Microsoft.PowerToys.Settings.UI/Views/GeneralPage.xaml.cs
+++ b/src/core/Microsoft.PowerToys.Settings.UI/Views/GeneralPage.xaml.cs
@@ -8,6 +8,7 @@ namespace Microsoft.PowerToys.Settings.UI.Views
     using System.IO;
     using Microsoft.PowerToys.Settings.UI.Lib;
     using Microsoft.PowerToys.Settings.UI.ViewModels;
+    using Windows.System;
     using Windows.UI.Popups;
     using Windows.UI.Xaml;
     using Windows.UI.Xaml.Controls;
@@ -58,9 +59,6 @@ namespace Microsoft.PowerToys.Settings.UI.Views
                 // load run on start up ui settings value and update the ui state.
                 this.ToggleSwitch_RunAtStartUp.IsOn = settings.startup;
             }
-
-            ShellPage.ShellHandler.HideContributorsList();
-            ShellPage.ShellHandler.HideFeatureDetails();
         }
 
         /// <summary>
@@ -73,15 +71,15 @@ namespace Microsoft.PowerToys.Settings.UI.Views
             {
                 case "light":
                     ShellPage.ShellHandler.RequestedTheme = ElementTheme.Light;
-                    this.Rodio_Theme_Light.IsChecked = true;
+                    this.Radio_Theme_Light.IsChecked = true;
                     break;
                 case "dark":
                     ShellPage.ShellHandler.RequestedTheme = ElementTheme.Dark;
-                    this.Rodio_Theme_Dark.IsChecked = true;
+                    this.Radio_Theme_Dark.IsChecked = true;
                     break;
                 case "system":
                     ShellPage.ShellHandler.RequestedTheme = ElementTheme.Default;
-                    this.Rodio_Theme_Default.IsChecked = true;
+                    this.Radio_Theme_Default.IsChecked = true;
                     break;
             }
         }
@@ -131,16 +129,21 @@ namespace Microsoft.PowerToys.Settings.UI.Views
         {
             RadioButton rb = sender as RadioButton;
 
-            if (rb != null)
-            {
-                string themeName = rb.Tag.ToString();
-                this.ReLoadTheme(themeName);
+            //if (rb != null)
+            //{
+            //    string themeName = rb.Tag.ToString();
+            //    this.ReLoadTheme(themeName);
 
-                // update and save settings to file.
-                GeneralSettings settings = SettingsUtils.GetSettings<GeneralSettings>(string.Empty);
-                settings.theme = themeName;
-                SettingsUtils.SaveSettings<GeneralSettings>(settings, string.Empty);
-            }
+            //    // update and save settings to file.
+            //    GeneralSettings settings = SettingsUtils.GetSettings<GeneralSettings>(string.Empty);
+            //    settings.theme = themeName;
+            //    SettingsUtils.SaveSettings<GeneralSettings>(settings, string.Empty);
+            //}
+        }
+
+        private async void CheckForUpdates_Click(object sender, RoutedEventArgs e)
+        {
+            await Launcher.LaunchUriAsync(new Uri("https://github.com/microsoft/PowerToys/releases"));
         }
     }
-}
+}
\ No newline at end of file
diff --git a/src/core/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml b/src/core/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml
new file mode 100644
index 0000000000..4427c8d046
--- /dev/null
+++ b/src/core/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml
@@ -0,0 +1,195 @@
+<Page
+    x:Class="Microsoft.PowerToys.Settings.UI.Views.ImageResizerPage"
+    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.Views"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
+    mc:Ignorable="d"
+    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+
+    <Grid ColumnSpacing="{StaticResource DefaultColumnSpacing}" RowSpacing="{StaticResource DefaultRowSpacing}">
+        <VisualStateManager.VisualStateGroups>
+            <VisualStateGroup x:Name="LayoutVisualStates">
+                <VisualState x:Name="WideLayout">
+                    <VisualState.StateTriggers>
+                        <AdaptiveTrigger MinWindowWidth="{StaticResource WideLayoutMinWidth}" />
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="SidePanel.(Grid.Column)" Value="1" />
+                        <Setter Target="SidePanel.(Grid.Row)" Value="0" />
+                    </VisualState.Setters>
+                </VisualState>
+                <VisualState x:Name="SmallLayout">
+                    <VisualState.StateTriggers>
+                        <AdaptiveTrigger MinWindowWidth="{StaticResource SmallLayoutMinWidth}" />
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="SidePanel.(Grid.Column)" Value="0" />
+                        <Setter Target="SidePanel.(Grid.Row)" Value="1" />
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
+        </VisualStateManager.VisualStateGroups>
+        <Grid.ColumnDefinitions>
+            <ColumnDefinition Width="*"/>
+            <ColumnDefinition Width="Auto"/>
+        </Grid.ColumnDefinitions>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto"/>
+            <RowDefinition Height="Auto" />
+        </Grid.RowDefinitions>
+        <StackPanel Orientation="Vertical">
+            <TextBlock Text="Lets you resize images by right-clicking."
+                       TextWrapping="Wrap"/>
+
+            <ToggleSwitch Header="Enable Image Resizer"
+                          IsOn="True"
+                          Margin="{StaticResource SmallTopMargin}" />
+
+            <TextBlock Text="Sizes" 
+                       Style="{StaticResource SettingsGroupTitleStyle}"/>
+
+            <!-- TO DO: Don't know if a listview with these items is the best solution here. Maybe a data grid is better? -->
+            <!--<ListView Margin="{StaticResource SmallTopMargin}" Padding="-12,0,0,0" SelectionMode="None" ItemsSource="{x:Bind Sizes, Mode=OneWay}">
+                <ListView.ItemTemplate>
+                    <DataTemplate x:DataType="local:ResizeSize">
+                        <StackPanel Orientation="Horizontal" Spacing="4">
+                            <TextBox Text="{x:Bind Title}" Width="68"/>
+                            <ComboBox SelectedIndex="1" Width="88">
+                                <ComboBoxItem>Fill</ComboBoxItem>
+                                <ComboBoxItem>Fit</ComboBoxItem>
+                                <ComboBoxItem>Stretch</ComboBoxItem>
+                            </ComboBox>
+                            <muxc:NumberBox Value="{x:Bind Width}"/>
+                            <TextBlock Text="x" FontWeight="SemiBold" Margin="0,4,0,0"/>
+                            <muxc:NumberBox Value="{x:Bind Height}"/>
+                            <ComboBox SelectedIndex="3">
+                                <ComboBoxItem>Centimeters</ComboBoxItem>
+                                <ComboBoxItem>Inches</ComboBoxItem>
+                                <ComboBoxItem>Percent</ComboBoxItem>
+                                <ComboBoxItem>Pixels</ComboBoxItem>
+                            </ComboBox>
+                            <Button x:Name="RemoveButton" Background="Transparent" Click="RemoveButton_Click">
+                                <Button.Content>
+                                    <FontIcon Opacity="0.8" Glyph="&#xE74D;"/>
+                                </Button.Content>
+                            </Button>
+                        </StackPanel>
+                    </DataTemplate>
+                </ListView.ItemTemplate>
+            </ListView>-->
+
+            <Button x:Name="AddSizeButton" Content="Add new size" Margin="{StaticResource SmallTopMargin}"/>
+
+            <TextBlock Text="Encoding" 
+                       Style="{StaticResource SettingsGroupTitleStyle}"/>
+
+            <ComboBox Header="Fallback encoder"
+                          SelectedIndex="1"
+                          MinWidth="240"
+                          Margin="{StaticResource SmallTopMargin}">
+                <ComboBoxItem>BMP Encoder</ComboBoxItem>
+                <ComboBoxItem>GIF Encoder</ComboBoxItem>
+                <ComboBoxItem>JPEG Encoder</ComboBoxItem>
+                <ComboBoxItem>PNG Encoder</ComboBoxItem>
+                <ComboBoxItem>TIFF Encoder</ComboBoxItem>
+                <ComboBoxItem>WMPhoto Encoder</ComboBoxItem>
+            </ComboBox>
+
+            <muxc:NumberBox Header="JPEG Quality level"
+                            Minimum="0"
+                            Maximum="100"
+                            Value="90"
+                            MinWidth="240"
+                            SpinButtonPlacementMode="Inline"
+                            HorizontalAlignment="Left"
+                            Margin="{StaticResource SmallTopMargin}" />
+
+            <ComboBox Header="PNG interlacing"
+                          SelectedIndex="0"
+                          MinWidth="240"
+                          Margin="{StaticResource SmallTopMargin}">
+                <ComboBoxItem>Default</ComboBoxItem>
+                <ComboBoxItem>On</ComboBoxItem>
+                <ComboBoxItem>Off</ComboBoxItem>
+            </ComboBox>
+
+            <ComboBox Header="TIFF Compression"
+                          SelectedIndex="0"
+                          MinWidth="240"
+                          Margin="{StaticResource SmallTopMargin}">
+                <ComboBoxItem>Default</ComboBoxItem>
+                <ComboBoxItem>None</ComboBoxItem>
+                <ComboBoxItem>CCITT3</ComboBoxItem>
+                <ComboBoxItem>CCITT4</ComboBoxItem>
+                <ComboBoxItem>LZW</ComboBoxItem>
+                <ComboBoxItem>RLE</ComboBoxItem>
+                <ComboBoxItem>Zip</ComboBoxItem>
+            </ComboBox>
+
+            <TextBlock Text="File" 
+                       Style="{StaticResource SettingsGroupTitleStyle}"/>
+
+
+            <TextBox  Header="Filename format"
+                      Text="%1 (%2)"
+                      HorizontalAlignment="Left"
+                      MinWidth="240"
+                      Margin="{StaticResource SmallTopMargin}"/>
+
+            <TextBlock Text="The following parameters can be used:"
+                       Margin="{StaticResource SmallTopBottomMargin}"/>
+
+            <TextBlock FontSize="12">
+                <Run FontWeight="Bold">%1</Run>
+                <Run>  -  Original filename</Run>
+            </TextBlock>
+            <TextBlock FontSize="12">
+                <Run FontWeight="Bold">%2</Run>
+                <Run>  -  Size name</Run>
+            </TextBlock>
+            <TextBlock FontSize="12">
+                <Run FontWeight="Bold">%3</Run>
+                <Run>  -  Selected width</Run>
+            </TextBlock>
+            <TextBlock FontSize="12">
+                <Run FontWeight="Bold">%4</Run>
+                <Run>  -  Selected height</Run>
+            </TextBlock>
+            <TextBlock FontSize="12">
+                <Run FontWeight="Bold">%5</Run>
+                <Run>  -  Actual height</Run>
+            </TextBlock>
+            <TextBlock FontSize="12">
+                <Run FontWeight="Bold">%6</Run>
+                <Run>  -  Actual width</Run>
+            </TextBlock>
+
+            <CheckBox Content="Use original date modified" 
+                      Margin="{StaticResource SmallTopMargin}"/>
+        </StackPanel>
+
+        <StackPanel x:Name="SidePanel"
+                                Orientation="Vertical"
+                                HorizontalAlignment="Left"
+                                Width="{StaticResource SidePanelWidth}"
+                                Grid.Column="1">
+
+            <TextBlock Text="About this feature"
+                                   Style="{StaticResource SettingsGroupTitleStyle}"
+                                   Margin="{StaticResource XSmallBottomMargin}"/>
+
+            <HyperlinkButton Content="Module overview"/>
+            <HyperlinkButton Content="Give feedback"/>
+
+            <TextBlock Text="Contributors"
+                           Style="{StaticResource SettingsGroupTitleStyle}"/>
+
+            <HyperlinkButton Content="Contributor name"/>
+            <HyperlinkButton Content="Contributor name"/>
+            <HyperlinkButton Content="Contributor name"/>
+        </StackPanel>
+    </Grid>
+</Page>
\ No newline at end of file
diff --git a/src/core/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml.cs b/src/core/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml.cs
new file mode 100644
index 0000000000..53ae3264c4
--- /dev/null
+++ b/src/core/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml.cs
@@ -0,0 +1,29 @@
+using Microsoft.PowerToys.Settings.UI.ViewModels;
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Runtime.InteropServices.WindowsRuntime;
+using Windows.Foundation;
+using Windows.Foundation.Collections;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Controls.Primitives;
+using Windows.UI.Xaml.Data;
+using Windows.UI.Xaml.Input;
+using Windows.UI.Xaml.Media;
+using Windows.UI.Xaml.Navigation;
+
+namespace Microsoft.PowerToys.Settings.UI.Views
+{
+
+    public sealed partial class ImageResizerPage : Page
+    {
+        public ImageResizerViewModel ViewModel { get; } = new ImageResizerViewModel();
+
+        public ImageResizerPage()
+        {
+            this.InitializeComponent();
+        }
+    }
+}
diff --git a/src/core/Microsoft.PowerToys.Settings.UI/Views/PowerLauncherPage.xaml b/src/core/Microsoft.PowerToys.Settings.UI/Views/PowerLauncherPage.xaml
index 6383fca549..df78df3cc5 100644
--- a/src/core/Microsoft.PowerToys.Settings.UI/Views/PowerLauncherPage.xaml
+++ b/src/core/Microsoft.PowerToys.Settings.UI/Views/PowerLauncherPage.xaml
@@ -9,10 +9,40 @@
     mc:Ignorable="d"
     Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 
-    <Grid>
+    <Grid ColumnSpacing="{StaticResource DefaultColumnSpacing}" RowSpacing="{StaticResource DefaultRowSpacing}">
+        <VisualStateManager.VisualStateGroups>
+            <VisualStateGroup x:Name="LayoutVisualStates">
+                <VisualState x:Name="WideLayout">
+                    <VisualState.StateTriggers>
+                        <AdaptiveTrigger MinWindowWidth="{StaticResource WideLayoutMinWidth}" />
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="SidePanel.(Grid.Column)" Value="1" />
+                        <Setter Target="SidePanel.(Grid.Row)" Value="0" />
+                    </VisualState.Setters>
+                </VisualState>
+                <VisualState x:Name="SmallLayout">
+                    <VisualState.StateTriggers>
+                        <AdaptiveTrigger MinWindowWidth="{StaticResource SmallLayoutMinWidth}" />
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="SidePanel.(Grid.Column)" Value="0" />
+                        <Setter Target="SidePanel.(Grid.Row)" Value="1" />
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
+        </VisualStateManager.VisualStateGroups>
+        <Grid.ColumnDefinitions>
+            <ColumnDefinition Width="*"/>
+            <ColumnDefinition Width="Auto"/>
+        </Grid.ColumnDefinitions>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto"/>
+            <RowDefinition Height="Auto" />
+        </Grid.RowDefinitions>
 
         <StackPanel Orientation="Vertical">
-            <TextBlock Text="A quick launcher that has additional capabilities without sacrificing performance."
+            <TextBlock Text="A quick launcher that has additional capabilities without sacrificing performance." Style="{StaticResource BodyTextBlockStyle}"
                        TextWrapping="Wrap"/>
 
             <ToggleSwitch Header="Enable PowerLauncher"
@@ -78,14 +108,35 @@
                      Width="320"
                      Margin="{StaticResource SmallTopMargin}"/>
 
-            <ToggleSwitch Header="Override Win+R key"
-                          IsOn="True"
+            <CheckBox Content="Override Win+R key"
+                          IsChecked="True"
                           Margin="{StaticResource SmallTopMargin}"/>
 
-            <ToggleSwitch Header="Override Win+S key"
-                          IsOn="True" 
+            <CheckBox Content="Override Win+S key"
+                          IsChecked="True" 
                           Margin="{StaticResource SmallTopMargin}" />
 
         </StackPanel>
+
+        <StackPanel x:Name="SidePanel"
+                                Orientation="Vertical"
+                                HorizontalAlignment="Left"
+                                Width="{StaticResource SidePanelWidth}"
+                                Grid.Column="1">
+
+            <TextBlock Text="About this feature"
+                                   Style="{StaticResource SettingsGroupTitleStyle}"
+                                   Margin="{StaticResource XSmallBottomMargin}"/>
+
+            <HyperlinkButton Content="Module overview"/>
+            <HyperlinkButton Content="Give feedback"/>
+
+            <TextBlock Text="Contributors"
+                           Style="{StaticResource SettingsGroupTitleStyle}"/>
+
+            <HyperlinkButton Content="Contributor name"/>
+            <HyperlinkButton Content="Contributor name"/>
+            <HyperlinkButton Content="Contributor name"/>
+        </StackPanel>
     </Grid>
 </Page>
\ No newline at end of file
diff --git a/src/core/Microsoft.PowerToys.Settings.UI/Views/PowerPreviewPage.xaml b/src/core/Microsoft.PowerToys.Settings.UI/Views/PowerPreviewPage.xaml
index be9ebc57f9..367bb9c144 100644
--- a/src/core/Microsoft.PowerToys.Settings.UI/Views/PowerPreviewPage.xaml
+++ b/src/core/Microsoft.PowerToys.Settings.UI/Views/PowerPreviewPage.xaml
@@ -7,7 +7,38 @@
     mc:Ignorable="d"
     Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 
-    <Grid>
+    <Grid ColumnSpacing="{StaticResource DefaultColumnSpacing}" RowSpacing="{StaticResource DefaultRowSpacing}">
+        <VisualStateManager.VisualStateGroups>
+            <VisualStateGroup x:Name="LayoutVisualStates">
+                <VisualState x:Name="WideLayout">
+                    <VisualState.StateTriggers>
+                        <AdaptiveTrigger MinWindowWidth="{StaticResource WideLayoutMinWidth}" />
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="SidePanel.(Grid.Column)" Value="1" />
+                        <Setter Target="SidePanel.(Grid.Row)" Value="0" />
+                    </VisualState.Setters>
+                </VisualState>
+                <VisualState x:Name="SmallLayout">
+                    <VisualState.StateTriggers>
+                        <AdaptiveTrigger MinWindowWidth="{StaticResource SmallLayoutMinWidth}" />
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="SidePanel.(Grid.Column)" Value="0" />
+                        <Setter Target="SidePanel.(Grid.Row)" Value="1" />
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
+        </VisualStateManager.VisualStateGroups>
+        <Grid.ColumnDefinitions>
+            <ColumnDefinition Width="*"/>
+            <ColumnDefinition Width="Auto"/>
+        </Grid.ColumnDefinitions>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto"/>
+            <RowDefinition Height="Auto" />
+        </Grid.RowDefinitions>
+        
         <StackPanel Orientation="Vertical">
             <TextBlock Text="These settings allow you to manage your Windows File Explorer Addons."
                        TextWrapping="Wrap"/>
@@ -23,5 +54,26 @@
                               Toggled="ToggleSwitch_Preview_MD_Toggled" />
 
         </StackPanel>
+        <StackPanel x:Name="SidePanel"
+                                Orientation="Vertical"
+                                HorizontalAlignment="Left"
+                                Width="{StaticResource SidePanelWidth}"
+                                Grid.Column="1">
+
+            <TextBlock Text="About this feature"
+                                   Style="{StaticResource SettingsGroupTitleStyle}"
+                                   Margin="{StaticResource XSmallBottomMargin}"/>
+
+            <HyperlinkButton Content="Module overview" NavigateUri="https://github.com/microsoft/PowerToys/tree/master/src/modules/previewpane"/>
+            <HyperlinkButton Content="Give feedback" NavigateUri="https://github.com/microsoft/PowerToys/issues"/>
+
+            <!--  <TextBlock Text="Contributors"
+                           Style="{StaticResource SettingsGroupTitleStyle}"/>
+
+            <HyperlinkButton Content="Contributor name"/>
+            <HyperlinkButton Content="Contributor name"/>
+            <HyperlinkButton Content="Contributor name"/>
+            -->
+        </StackPanel>
     </Grid>
-</Page>
+</Page>
\ No newline at end of file
diff --git a/src/core/Microsoft.PowerToys.Settings.UI/Views/PowerPreviewPage.xaml.cs b/src/core/Microsoft.PowerToys.Settings.UI/Views/PowerPreviewPage.xaml.cs
index b9ba9fe364..a318762fb1 100644
--- a/src/core/Microsoft.PowerToys.Settings.UI/Views/PowerPreviewPage.xaml.cs
+++ b/src/core/Microsoft.PowerToys.Settings.UI/Views/PowerPreviewPage.xaml.cs
@@ -50,14 +50,6 @@ namespace Microsoft.PowerToys.Settings.UI.Views
                 ToggleSwitch_Preview_SVG.IsOn = settings.properties.IDS_PREVPANE_SVG_BOOL_TOGGLE_CONTROLL.value;
                 ToggleSwitch_Preview_MD.IsOn = settings.properties.PREVPANE_MD_BOOL_TOGGLE_CONTROLL_ID.value;
             }
-
-            ShellPage.ShellHandler.ShowFeatureDetails();
-
-            ShellPage.ShellHandler.SetFeatureDetails(
-                "https://github.com/microsoft/PowerToys/tree/master/src/modules/previewpane",
-                "https://github.com/microsoft/PowerToys/issues");
-
-            ShellPage.ShellHandler.HideContributorsList();
         }
 
         private void ToggleSwitch_Preview_SVG_Toggled(object sender, RoutedEventArgs e)
diff --git a/src/core/Microsoft.PowerToys.Settings.UI/Views/PowerRenamePage.xaml b/src/core/Microsoft.PowerToys.Settings.UI/Views/PowerRenamePage.xaml
index d3caf91e77..e69d233a84 100644
--- a/src/core/Microsoft.PowerToys.Settings.UI/Views/PowerRenamePage.xaml
+++ b/src/core/Microsoft.PowerToys.Settings.UI/Views/PowerRenamePage.xaml
@@ -9,8 +9,37 @@
     mc:Ignorable="d"
     Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 
-    <Grid>
-
+    <Grid ColumnSpacing="{StaticResource DefaultColumnSpacing}" RowSpacing="{StaticResource DefaultRowSpacing}">
+        <VisualStateManager.VisualStateGroups>
+            <VisualStateGroup x:Name="LayoutVisualStates">
+                <VisualState x:Name="WideLayout">
+                    <VisualState.StateTriggers>
+                        <AdaptiveTrigger MinWindowWidth="{StaticResource WideLayoutMinWidth}" />
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="SidePanel.(Grid.Column)" Value="1" />
+                        <Setter Target="SidePanel.(Grid.Row)" Value="0" />
+                    </VisualState.Setters>
+                </VisualState>
+                <VisualState x:Name="SmallLayout">
+                    <VisualState.StateTriggers>
+                        <AdaptiveTrigger MinWindowWidth="{StaticResource SmallLayoutMinWidth}" />
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="SidePanel.(Grid.Column)" Value="0" />
+                        <Setter Target="SidePanel.(Grid.Row)" Value="1" />
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
+        </VisualStateManager.VisualStateGroups>
+        <Grid.ColumnDefinitions>
+            <ColumnDefinition Width="*"/>
+            <ColumnDefinition Width="Auto"/>
+        </Grid.ColumnDefinitions>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto"/>
+            <RowDefinition Height="Auto" />
+        </Grid.RowDefinitions>
         <StackPanel Orientation="Vertical">
             <TextBlock Text="A Windows Shell Extension for more advanced bulk renaming using search and replace or regular expressions."
                        TextWrapping="Wrap"/>
@@ -22,23 +51,23 @@
             <TextBlock Text="Shell integration"
                        Style="{StaticResource SettingsGroupTitleStyle}"/>
 
-            <ToggleSwitch Header="Show on default context menu"
-                          IsOn="True"
+            <CheckBox Content="Show on default context menu"
+                          IsChecked="True"
                           Margin="{StaticResource SmallTopMargin}"/>
 
-            <ToggleSwitch Header="Only show on extended context menu (Shift + Right-click)"
-                          IsOn="True" 
+            <CheckBox Content="Only show on extended context menu (Shift + Right-click)"
+                          IsChecked="True" 
                           Margin="{StaticResource SmallTopMargin}" />
 
             <TextBlock Text="Miscellaneous" 
                        Style="{StaticResource SettingsGroupTitleStyle}"/>
 
-            <ToggleSwitch Header="Enable autocomplete and autosuggest of recently used inputs for search and replace values"
-                          IsOn="True"
+            <CheckBox Content="Enable autocomplete and autosuggest of recently used inputs for search and replace values"
+                          IsChecked="True"
                           Margin="{StaticResource SmallTopMargin}"/>
 
-            <ToggleSwitch Header="Restore search, replace and flags values on launch from previous run" 
-                          IsOn="True" 
+            <CheckBox Content="Restore search, replace and flags values on launch from previous run" 
+                          IsChecked="True" 
                           Margin="{StaticResource SmallTopMargin}" />
 
             <muxc:NumberBox Header="Maximum numbers of items to show in recently used list"
@@ -47,5 +76,27 @@
                             HorizontalAlignment="Left"
                             Margin="{StaticResource SmallTopMargin}" />
         </StackPanel>
+        
+        
+        <StackPanel x:Name="SidePanel"
+                                Orientation="Vertical"
+                                HorizontalAlignment="Left"
+                                 Width="{StaticResource SidePanelWidth}"
+                                Grid.Column="1">
+
+            <TextBlock Text="About this feature"
+                                   Style="{StaticResource SettingsGroupTitleStyle}"
+                                   Margin="{StaticResource XSmallBottomMargin}"/>
+
+            <HyperlinkButton Content="Module overview" NavigateUri="https://github.com/microsoft/PowerToys/tree/master/src/modules/powerrename"/>
+            <HyperlinkButton Content="Give feedback"/>
+
+            <TextBlock Text="Contributors"
+                           Style="{StaticResource SettingsGroupTitleStyle}"/>
+
+            <HyperlinkButton Content="Contributor name"/>
+            <HyperlinkButton Content="Contributor name"/>
+            <HyperlinkButton Content="Contributor name"/>
+        </StackPanel>
     </Grid>
 </Page>
\ No newline at end of file
diff --git a/src/core/Microsoft.PowerToys.Settings.UI/Views/ShellPage.xaml b/src/core/Microsoft.PowerToys.Settings.UI/Views/ShellPage.xaml
index 8282f1f3fb..27dbcb6245 100644
--- a/src/core/Microsoft.PowerToys.Settings.UI/Views/ShellPage.xaml
+++ b/src/core/Microsoft.PowerToys.Settings.UI/Views/ShellPage.xaml
@@ -19,29 +19,6 @@
     </i:Interaction.Behaviors>
 
     <Grid>
-        <VisualStateManager.VisualStateGroups>
-            <VisualStateGroup x:Name="LayoutVisualStates">
-                <VisualState x:Name="LargeLayout">
-                    <VisualState.StateTriggers>
-                        <AdaptiveTrigger MinWindowWidth="1100" />
-                    </VisualState.StateTriggers>
-                    <VisualState.Setters>
-                        <Setter Target="SidePanel.(Grid.Column)" Value="1" />
-                        <Setter Target="SidePanel.(Grid.Row)" Value="0" />
-                    </VisualState.Setters>
-                </VisualState>
-                <VisualState x:Name="WideLayout">
-                    <VisualState.StateTriggers>
-                        <AdaptiveTrigger MinWindowWidth="480" />
-                    </VisualState.StateTriggers>
-                    <VisualState.Setters>
-                        <Setter Target="SidePanel.(Grid.Column)" Value="0" />
-                        <Setter Target="SidePanel.(Grid.Row)" Value="1" />
-                    </VisualState.Setters>
-                </VisualState>
-            </VisualStateGroup>
-        </VisualStateManager.VisualStateGroups>
-
         <winui:NavigationView
         x:Name="navigationView"
         IsBackButtonVisible="Collapsed"
@@ -76,11 +53,18 @@
                 </winui:NavigationViewItem>
 
                 <!-- TO DO: Update icon -->
-                <winui:NavigationViewItem x:Uid="Shell_PowerRename" helpers:NavHelper.NavigateTo="views:PowerRenamePage">
+                <winui:NavigationViewItem x:Uid="Shell_FancyZones" helpers:NavHelper.NavigateTo="views:FancyZonesPage">
                     <winui:NavigationViewItem.Icon>
                         <FontIcon Glyph="&#xE8AC;"/>
                     </winui:NavigationViewItem.Icon>
                 </winui:NavigationViewItem>
+                
+                <!-- TO DO: Update icon -->
+            <winui:NavigationViewItem x:Uid="Shell_PowerRename" helpers:NavHelper.NavigateTo="views:PowerRenamePage">
+                <winui:NavigationViewItem.Icon>
+                    <FontIcon Glyph="&#xE8AC;"/>
+                </winui:NavigationViewItem.Icon>
+            </winui:NavigationViewItem>
 
                 <!-- TO DO: Update icon -->
                 <winui:NavigationViewItem x:Uid="Shell_ShortcutGuide" helpers:NavHelper.NavigateTo="views:ShortcutGuidePage">
@@ -101,6 +85,13 @@
                         <PathIcon Data="M608 128q45 0 77 9t58 24 46 31 40 31 44 23 55 10h992q27 0 50 10t40 27 28 41 10 50v384h-128V384H928q-31 0-54 9t-44 24-41 31-45 31-58 23-78 10H128v1152h128v128H0V256q0-27 10-50t27-40 41-28 50-10h480zm0 256q24 0 42-4t33-13 29-20 32-27q-17-15-31-26t-30-20-33-13-42-5H128v128h480zm1440 512v1152H384V896h1664zm-128 128H512v896h1408v-896zm-128 256h-384v-128h384v128zm-128 256h-256v-128h256v128zm0 256h-256v-128h256v128zm-384 0H640v-640h640v640zm-128-512H768v384h384v-384z" ></PathIcon>
                     </winui:NavigationViewItem.Icon>
                 </winui:NavigationViewItem>
+
+                <!-- TO DO: Update icon -->
+                <winui:NavigationViewItem x:Uid="Shell_ImageResizer" helpers:NavHelper.NavigateTo="views:ImageResizerPage">
+                    <winui:NavigationViewItem.Icon>
+                        <FontIcon Glyph="&#xEDA7;"/>
+                    </winui:NavigationViewItem.Icon>
+                </winui:NavigationViewItem>
             </winui:NavigationView.MenuItems>
             <i:Interaction.Behaviors>
                 <behaviors:NavigationViewHeaderBehavior
@@ -114,54 +105,19 @@
                                 FontWeight="Bold"
                                 Style="{ThemeResource TitleTextBlockStyle}"
                                 Margin="{StaticResource SmallLeftRightMargin}" />
-                            </Grid>
-                        </DataTemplate>
-                    </behaviors:NavigationViewHeaderBehavior.DefaultHeaderTemplate>
-                </behaviors:NavigationViewHeaderBehavior>
-                <ic:EventTriggerBehavior EventName="ItemInvoked">
-                    <ic:InvokeCommandAction Command="{x:Bind ViewModel.ItemInvokedCommand}" />
-                </ic:EventTriggerBehavior>
-            </i:Interaction.Behaviors>
-            <ScrollViewer Grid.Column="0">
-                <Grid RowSpacing="32"
-                      Margin="{StaticResource MediumLeftRightBottomMargin}">
-                    <Grid.ColumnDefinitions>
-                        <ColumnDefinition Width="*" />
-                        <ColumnDefinition Width="Auto" />
-                    </Grid.ColumnDefinitions>
-                    <Grid.RowDefinitions>
-                        <RowDefinition Height="*"/>
-                        <RowDefinition Height="Auto"/>
-                    </Grid.RowDefinitions>
-
+                        </Grid>
+                    </DataTemplate>
+                </behaviors:NavigationViewHeaderBehavior.DefaultHeaderTemplate>
+            </behaviors:NavigationViewHeaderBehavior>
+            <ic:EventTriggerBehavior EventName="ItemInvoked">
+                <ic:InvokeCommandAction Command="{x:Bind ViewModel.ItemInvokedCommand}" />
+            </ic:EventTriggerBehavior>
+        </i:Interaction.Behaviors>
+        <ScrollViewer Grid.Column="0">
+                <Grid Margin="{StaticResource MediumLeftRightBottomMargin}">
                     <Frame x:Name="shellFrame" />
-
-                    <StackPanel x:Name="SidePanel"
-                                Orientation="Vertical"
-                                HorizontalAlignment="Left"
-                                Width="240"
-                                Grid.Column="1">
-
-                        <TextBlock x:Name="Feature_Details_Title" 
-                                   Text="About this feature"
-                                   Style="{StaticResource SettingsGroupTitleStyle}"
-                                   Margin="{StaticResource XSmallBottomMargin}"/>
-
-                        <ListView x:Name="Feature_Details">
-                            <HyperlinkButton x:Name="Module_Overview_LinkButton"
-                                             Content="Module overview"/>
-                            <HyperlinkButton x:Name="Module_Feedback_LinkButton"
-                                             Content="Give feedback"/>
-                        </ListView>
-
-                        <TextBlock x:Name="Contributors_List_Title" 
-                                   Text="Contributors"
-                                   Style="{StaticResource SettingsGroupTitleStyle}"/>
-
-                        <ListView x:Name="Contributors_List" />
-                    </StackPanel>
                 </Grid>
-            </ScrollViewer>
-        </winui:NavigationView>
+        </ScrollViewer>
+    </winui:NavigationView>
     </Grid>
 </UserControl>
\ No newline at end of file
diff --git a/src/core/Microsoft.PowerToys.Settings.UI/Views/ShellPage.xaml.cs b/src/core/Microsoft.PowerToys.Settings.UI/Views/ShellPage.xaml.cs
index bc4c14f497..7e97231885 100644
--- a/src/core/Microsoft.PowerToys.Settings.UI/Views/ShellPage.xaml.cs
+++ b/src/core/Microsoft.PowerToys.Settings.UI/Views/ShellPage.xaml.cs
@@ -62,48 +62,5 @@ namespace Microsoft.PowerToys.Settings.UI.Views
         {
             Default_SndMSG_Callback = implmentation;
         }
-
-        public void HideFeatureDetails()
-        {
-            this.Feature_Details_Title.Visibility = Visibility.Collapsed;
-            this.Feature_Details.Visibility = Visibility.Collapsed;
-        }
-
-        public void ShowFeatureDetails()
-        {
-            this.Feature_Details_Title.Visibility = Visibility.Visible;
-            this.Feature_Details.Visibility = Visibility.Visible;
-        }
-
-        public void SetFeatureDetails(string moduleOverviewLink,string reportBugLink)
-        {
-            this.Module_Overview_LinkButton.NavigateUri = new Uri(moduleOverviewLink);
-            this.Module_Feedback_LinkButton.NavigateUri = new Uri(reportBugLink);
-        }
-
-        public void HideContributorsList()
-        {
-            this.Contributors_List_Title.Visibility = Visibility.Collapsed;
-            this.Contributors_List.Visibility = Visibility.Collapsed;
-        }
-
-        public void ShowContributorsList()
-        {
-            this.Contributors_List_Title.Visibility = Visibility.Visible;
-            this.Contributors_List.Visibility = Visibility.Visible;
-        }
-
-        public void PopulateContributorsList(List<Contributor> contributors)
-        {
-            this.Contributors_List.Items.Clear();
-
-            foreach (Contributor contributor in contributors)
-            {
-                HyperlinkButton link = new HyperlinkButton();
-                link.Content = contributor.Name;
-                link.NavigateUri = new Uri(contributor.Link);
-                this.Contributors_List.Items.Add(link);
-            }
-        }
     }
-}
+}
\ No newline at end of file
diff --git a/src/core/Microsoft.PowerToys.Settings.UI/Views/ShortcutGuidePage.xaml b/src/core/Microsoft.PowerToys.Settings.UI/Views/ShortcutGuidePage.xaml
index 4a3728edba..b1df2bf643 100644
--- a/src/core/Microsoft.PowerToys.Settings.UI/Views/ShortcutGuidePage.xaml
+++ b/src/core/Microsoft.PowerToys.Settings.UI/Views/ShortcutGuidePage.xaml
@@ -9,7 +9,37 @@
     mc:Ignorable="d"
     Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 
-    <Grid>
+    <Grid ColumnSpacing="{StaticResource DefaultColumnSpacing}" RowSpacing="{StaticResource DefaultRowSpacing}">
+        <VisualStateManager.VisualStateGroups>
+            <VisualStateGroup x:Name="LayoutVisualStates">
+                <VisualState x:Name="WideLayout">
+                    <VisualState.StateTriggers>
+                        <AdaptiveTrigger MinWindowWidth="{StaticResource WideLayoutMinWidth}" />
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="SidePanel.(Grid.Column)" Value="1" />
+                        <Setter Target="SidePanel.(Grid.Row)" Value="0" />
+                    </VisualState.Setters>
+                </VisualState>
+                <VisualState x:Name="SmallLayout">
+                    <VisualState.StateTriggers>
+                        <AdaptiveTrigger MinWindowWidth="{StaticResource SmallLayoutMinWidth}" />
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="SidePanel.(Grid.Column)" Value="0" />
+                        <Setter Target="SidePanel.(Grid.Row)" Value="1" />
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
+        </VisualStateManager.VisualStateGroups>
+        <Grid.ColumnDefinitions>
+            <ColumnDefinition Width="*"/>
+            <ColumnDefinition Width="Auto"/>
+        </Grid.ColumnDefinitions>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto"/>
+            <RowDefinition Height="Auto" />
+        </Grid.RowDefinitions>
         <StackPanel Orientation="Vertical">
             <TextBlock Text="Shows a help overlay with Windows shortcuts when the Windows key is pressed."
                        TextWrapping="Wrap"/>
@@ -41,5 +71,26 @@
                 <RadioButton Content="System default" IsChecked="True"/>
             </muxc:RadioButtons>
         </StackPanel>
+
+        <StackPanel x:Name="SidePanel"
+                                Orientation="Vertical"
+                                HorizontalAlignment="Left"
+                                Width="{StaticResource SidePanelWidth}"
+                                Grid.Column="1">
+
+            <TextBlock Text="About this feature"
+                                   Style="{StaticResource SettingsGroupTitleStyle}"
+                                   Margin="{StaticResource XSmallBottomMargin}"/>
+
+            <HyperlinkButton Content="Module overview" NavigateUri="https://github.com/microsoft/PowerToys/blob/master/src/modules/shortcut_guide/README.md"/>
+            <HyperlinkButton Content="Give feedback"/>
+
+            <TextBlock Text="Contributors"
+                           Style="{StaticResource SettingsGroupTitleStyle}"/>
+
+            <HyperlinkButton Content="Contributor name"/>
+            <HyperlinkButton Content="Contributor name"/>
+            <HyperlinkButton Content="Contributor name"/>
+        </StackPanel>
     </Grid>
 </Page>
\ No newline at end of file