From fe5edd9c5dcc280ecdabb4262caea3aa982fdc84 Mon Sep 17 00:00:00 2001
From: Niels Laute <niels.laute@live.nl>
Date: Mon, 24 Nov 2025 12:23:59 +0100
Subject: [PATCH] First set of UX changes to flyout

---
 .../Configuration/AppConstants.cs             |   5 +-
 .../PowerDisplay/PowerDisplay.csproj          |   1 +
 .../PowerDisplayXAML/MainWindow.xaml          | 520 +++++++-----------
 .../PowerDisplayXAML/MainWindow.xaml.cs       |  48 +-
 .../PowerDisplay/Strings/en-us/Resources.resw |   2 +-
 5 files changed, 215 insertions(+), 361 deletions(-)

diff --git a/src/modules/powerdisplay/PowerDisplay/Configuration/AppConstants.cs b/src/modules/powerdisplay/PowerDisplay/Configuration/AppConstants.cs
index 30467dd4b4..82642c8952 100644
--- a/src/modules/powerdisplay/PowerDisplay/Configuration/AppConstants.cs
+++ b/src/modules/powerdisplay/PowerDisplay/Configuration/AppConstants.cs
@@ -52,12 +52,11 @@ namespace PowerDisplay.Configuration
         public static class UI
         {
             // Window dimensions
-            public const int WindowWidth = 640;
+            public const int WindowWidth = 386;
             public const int MaxWindowHeight = 650;
-            public const int WindowRightMargin = 10;
+            public const int WindowRightMargin = 12;
 
             // Animation and layout update delays (milliseconds)
-            public const int AnimationDelayMs = 100;
             public const int LayoutUpdateDelayMs = 50;
             public const int MonitorDiscoveryDelayMs = 200;
 
diff --git a/src/modules/powerdisplay/PowerDisplay/PowerDisplay.csproj b/src/modules/powerdisplay/PowerDisplay/PowerDisplay.csproj
index 2e9f8ff011..d4208b63db 100644
--- a/src/modules/powerdisplay/PowerDisplay/PowerDisplay.csproj
+++ b/src/modules/powerdisplay/PowerDisplay/PowerDisplay.csproj
@@ -45,6 +45,7 @@
     <PackageReference Include="Microsoft.WindowsAppSDK" />
     <PackageReference Include="Microsoft.Windows.SDK.BuildTools" />
     <PackageReference Include="WmiLight" />
+	<PackageReference Include="WinUIEx" />
     <PackageReference Include="System.Collections.Immutable" />
     <PackageReference Include="CommunityToolkit.WinUI.Controls.SettingsControls" />
     <PackageReference Include="CommunityToolkit.WinUI.Animations" />
diff --git a/src/modules/powerdisplay/PowerDisplay/PowerDisplayXAML/MainWindow.xaml b/src/modules/powerdisplay/PowerDisplay/PowerDisplayXAML/MainWindow.xaml
index 60a938ac5f..57164b3993 100644
--- a/src/modules/powerdisplay/PowerDisplay/PowerDisplayXAML/MainWindow.xaml
+++ b/src/modules/powerdisplay/PowerDisplay/PowerDisplayXAML/MainWindow.xaml
@@ -1,351 +1,241 @@
-<?xml version="1.0" encoding="utf-8"?>
-<Window x:Class="PowerDisplay.MainWindow"
-        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        xmlns:vm="using:PowerDisplay.ViewModels"
-        xmlns:converters="using:PowerDisplay.Converters"
-        xmlns:toolkit="using:CommunityToolkit.WinUI.Controls"
-        xmlns:ui="using:CommunityToolkit.WinUI"
-        xmlns:animations="using:CommunityToolkit.WinUI.Animations">
+<winuiex:WindowEx
+    x:Class="PowerDisplay.MainWindow"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:animations="using:CommunityToolkit.WinUI.Animations"
+    xmlns:converters="using:PowerDisplay.Converters"
+    xmlns:toolkit="using:CommunityToolkit.WinUI.Controls"
+    xmlns:ui="using:CommunityToolkit.WinUI"
+    xmlns:vm="using:PowerDisplay.ViewModels"
+    xmlns:winuiex="using:WinUIEx"
+    IsAlwaysOnTop="True"
+    IsMaximizable="False"
+    IsMinimizable="False"
+    IsResizable="False"
+    IsShownInSwitchers="False"
+    IsTitleBarVisible="False">
+    <winuiex:WindowEx.Backdrop>
+        <winuiex:AcrylicSystemBackdrop
+            DarkFallbackColor="#1c1c1c"
+            DarkLuminosityOpacity="0.96"
+            DarkTintColor="#202020"
+            DarkTintOpacity="0.5"
+            LightFallbackColor="#EEEEEE"
+            LightLuminosityOpacity="0.90"
+            LightTintColor="#F3F3F3"
+            LightTintOpacity="0" />
+    </winuiex:WindowEx.Backdrop>
+
     <Grid x:Name="RootGrid">
-        <Grid.RenderTransform>
-            <TranslateTransform x:Name="RootGridTransform" X="0" />
-        </Grid.RenderTransform>
-
         <Grid.Resources>
-            <!-- Enhanced Slide-in animation storyboard -->
-            <Storyboard x:Key="SlideInStoryboard">
-                <DoubleAnimation Storyboard.TargetName="RootGridTransform"
-                               Storyboard.TargetProperty="X"
-                               From="300"
-                               To="0"
-                               Duration="0:0:0.4">
-                    <DoubleAnimation.EasingFunction>
-                        <CubicEase EasingMode="EaseOut" />
-                    </DoubleAnimation.EasingFunction>
-                </DoubleAnimation>
-                <DoubleAnimation Storyboard.TargetName="RootGrid"
-                               Storyboard.TargetProperty="Opacity"
-                               From="0"
-                               To="1"
-                               Duration="0:0:0.3" />
-                <DoubleAnimation Storyboard.TargetName="MainContainer"
-                               Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)"
-                               From="20"
-                               To="0"
-                               Duration="0:0:0.5">
-                    <DoubleAnimation.EasingFunction>
-                        <CubicEase EasingMode="EaseOut" />
-                    </DoubleAnimation.EasingFunction>
-                </DoubleAnimation>
-            </Storyboard>
-
-            <!-- Enhanced Slide-out animation storyboard -->
-            <Storyboard x:Key="SlideOutStoryboard">
-                <DoubleAnimation Storyboard.TargetName="RootGridTransform"
-                               Storyboard.TargetProperty="X"
-                               From="0"
-                               To="300"
-                               Duration="0:0:0.3">
-                    <DoubleAnimation.EasingFunction>
-                        <CubicEase EasingMode="EaseIn" />
-                    </DoubleAnimation.EasingFunction>
-                </DoubleAnimation>
-                <DoubleAnimation Storyboard.TargetName="RootGrid"
-                               Storyboard.TargetProperty="Opacity"
-                               From="1"
-                               To="0"
-                               Duration="0:0:0.2" />
-            </Storyboard>
+            <Style
+                x:Key="FlyoutButtonStyle"
+                BasedOn="{StaticResource SubtleButtonStyle}"
+                TargetType="Button">
+                <Setter Property="Padding" Value="6" />
+                <Setter Property="Width" Value="32" />
+                <Setter Property="Height" Value="32" />
+                <Setter Property="FontFamily" Value="{ThemeResource SymbolThemeFontFamily}" />
+            </Style>
         </Grid.Resources>
-
-        <!-- Main Container with modern design -->
-        <Border x:Name="MainContainer"
-                CornerRadius="8"
-                Background="{ThemeResource LayerFillColorDefaultBrush}"
-                BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
-                BorderThickness="1"
-                Margin="0"
-                MaxWidth="640"
-                HorizontalAlignment="Stretch"
-                VerticalAlignment="Top">
-            <Border.RenderTransform>
-                <TranslateTransform Y="0" />
-            </Border.RenderTransform>
-
+        <Border x:Name="MainContainer">
             <Grid>
                 <Grid.RowDefinitions>
                     <RowDefinition Height="Auto" />
-                    <RowDefinition Height="Auto" />
+                    <RowDefinition Height="48" />
                 </Grid.RowDefinitions>
 
-                <!-- Content Area -->
-                <ScrollViewer Grid.Row="0"
-                             ZoomMode="Disabled"
-                             HorizontalScrollMode="Disabled"
-                             HorizontalScrollBarVisibility="Disabled"
-                             VerticalScrollBarVisibility="Auto"
-                             MaxHeight="420"
-                             Padding="8">
+                <!--  Main Container with modern design  -->
+                <Grid
+                    Background="{ThemeResource LayerOnAcrylicFillColorDefaultBrush}"
+                    BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
+                    BorderThickness="0,0,0,1">
+                    <StackPanel
+                        HorizontalAlignment="Center"
+                        VerticalAlignment="Center"
+                        Orientation="Vertical"
+                        Spacing="16"
+                        Visibility="{x:Bind ConvertBoolToVisibility(ViewModel.IsScanning), Mode=OneWay}">
+                        <ProgressRing
+                            Width="32"
+                            Height="32"
+                            Foreground="{ThemeResource AccentFillColorDefaultBrush}"
+                            IsActive="True" />
+                        <TextBlock
+                            x:Name="ScanningMonitorsTextBlock"
+                            HorizontalAlignment="Center"
+                            FontSize="12"
+                            TextAlignment="Center" />
+                    </StackPanel>
 
-                    <StackPanel Spacing="4">
-
-                        <!-- Loading State with modern progress -->
-                        <StackPanel Orientation="Vertical"
-                                   Spacing="16"
-                                   HorizontalAlignment="Center"
-                                   VerticalAlignment="Center"
-                                   Visibility="{x:Bind ConvertBoolToVisibility(ViewModel.IsScanning), Mode=OneWay}">
-                            <ProgressRing IsActive="True"
-                                         Width="32"
-                                         Height="32"
-                                         Foreground="{ThemeResource AccentFillColorDefaultBrush}" />
-                            <TextBlock x:Name="ScanningMonitorsTextBlock"
-                                      FontSize="12"
-                                      HorizontalAlignment="Center"
-                                      TextAlignment="Center" />
-                        </StackPanel>
-
-                        <!-- No Monitors State with InfoBar -->
-                        <InfoBar x:Name="NoMonitorsInfoBar"
-                                        IsOpen="{x:Bind ViewModel.ShowNoMonitorsMessage, Mode=OneWay}"
-                                        Severity="Informational"
-                                        IsClosable="False"
-                                        Background="{ThemeResource InfoBarInformationalSeverityBackgroundBrush}">
-                            <InfoBar.IconSource>
-                                <FontIconSource Glyph="&#xE7F4;" />
-                            </InfoBar.IconSource>
-                            <TextBlock x:Name="NoMonitorsTextBlock" />
-                        </InfoBar>
-
-                        <!-- Monitors List with modern card design -->
-                        <ItemsControl ItemsSource="{x:Bind ViewModel.Monitors, Mode=OneWay}"
-                                     Visibility="{x:Bind ConvertBoolToVisibility(ViewModel.HasMonitors), Mode=OneWay}"
-                                     HorizontalAlignment="Stretch">
-                            <ItemsControl.ItemsPanel>
-                                <ItemsPanelTemplate>
-                                    <StackPanel Orientation="Vertical"
-                                               Spacing="0">
-                                        <StackPanel.ChildrenTransitions>
-                                            <TransitionCollection>
-                                                <EntranceThemeTransition FromVerticalOffset="20" />
-                                                <RepositionThemeTransition IsStaggeringEnabled="True" />
-                                            </TransitionCollection>
-                                        </StackPanel.ChildrenTransitions>
-                                    </StackPanel>
-                                </ItemsPanelTemplate>
-                            </ItemsControl.ItemsPanel>
+                    <!--  No Monitors State with InfoBar  -->
+                    <InfoBar
+                        x:Name="NoMonitorsInfoBar"
+                        x:Uid="NoMonitorsText"
+                        IconSource="{ui:FontIconSource Glyph=&#xE7F4;}"
+                        IsClosable="False"
+                        IsOpen="{x:Bind ViewModel.ShowNoMonitorsMessage, Mode=OneWay}"
+                        Severity="Informational" />
 
+                    <!--  Content Area  -->
+                    <ScrollViewer
+                        Padding="8"
+                        HorizontalScrollBarVisibility="Disabled"
+                        HorizontalScrollMode="Disabled"
+                        VerticalScrollBarVisibility="Auto"
+                        ZoomMode="Disabled">
+                        <!--  Monitors List with modern card design  -->
+                        <ItemsControl
+                            HorizontalAlignment="Stretch"
+                            ItemsSource="{x:Bind ViewModel.Monitors, Mode=OneWay}"
+                            Visibility="{x:Bind ConvertBoolToVisibility(ViewModel.HasMonitors), Mode=OneWay}">
                             <ItemsControl.ItemTemplate>
                                 <DataTemplate x:DataType="vm:MonitorViewModel">
-                                    <StackPanel Spacing="2" HorizontalAlignment="Stretch">
-                                        <StackPanel.ChildrenTransitions>
-                                            <TransitionCollection>
-                                                <EntranceThemeTransition FromVerticalOffset="8" />
-                                                <RepositionThemeTransition />
-                                            </TransitionCollection>
-                                        </StackPanel.ChildrenTransitions>
-
-                                        <!-- Monitor Name with Icon -->
-                                        <StackPanel Orientation="Horizontal"
-                                                    Spacing="12"
-                                                    Padding="12,8">
-                                            <FontIcon Glyph="{x:Bind MonitorIconGlyph, Mode=OneWay}"
-                                                      FontSize="20"
-                                                      VerticalAlignment="Center"
-                                                      HorizontalAlignment="Center" />
-                                            <TextBlock Text="{x:Bind Name, Mode=OneWay}"
-                                                      FontSize="20"
-                                                      FontWeight="SemiBold"
-                                                      VerticalAlignment="Center" />
+                                    <StackPanel HorizontalAlignment="Stretch" Spacing="2">
+                                        <!--  Monitor Name with Icon  -->
+                                        <StackPanel
+                                            Padding="12,8"
+                                            Orientation="Horizontal"
+                                            Spacing="12">
+                                            <FontIcon
+                                                HorizontalAlignment="Center"
+                                                VerticalAlignment="Center"
+                                                FontSize="14"
+                                                Glyph="{x:Bind MonitorIconGlyph, Mode=OneWay}" />
+                                            <TextBlock
+                                                VerticalAlignment="Center"
+                                                FontWeight="SemiBold"
+                                                Text="{x:Bind Name, Mode=OneWay}" />
                                         </StackPanel>
 
-                                                    <!-- Brightness Control -->
-                                                    <Grid Height="40" HorizontalAlignment="Stretch">
-                                                        <Grid.ColumnDefinitions>
-                                                            <ColumnDefinition Width="1*"/>
-                                                            <ColumnDefinition Width="7*"/>
-                                                            <ColumnDefinition Width="2*"/>
-                                                        </Grid.ColumnDefinitions>
+                                        <!--  Brightness Control  -->
+                                        <Grid HorizontalAlignment="Stretch">
+                                            <Grid.ColumnDefinitions>
+                                                <ColumnDefinition Width="48" />
+                                                <ColumnDefinition Width="*" />
+                                            </Grid.ColumnDefinitions>
+                                            <FontIcon
+                                                Grid.Column="0"
+                                                HorizontalAlignment="Center"
+                                                VerticalAlignment="Center"
+                                                FontSize="14"
+                                                Glyph="&#xE793;" />
 
-                                                        <FontIcon Grid.Column="0"
-                                                                 Glyph="&#xE793;"
-                                                                 FontSize="14"
-                                                                 VerticalAlignment="Center"
-                                                                 HorizontalAlignment="Center" />
+                                            <Slider
+                                                Grid.Column="1"
+                                                MinHeight="32"
+                                                Margin="0,2"
+                                                HorizontalAlignment="Stretch"
+                                                VerticalAlignment="Center"
+                                                IsEnabled="{x:Bind IsInteractionEnabled, Mode=OneWay}"
+                                                Maximum="{x:Bind MaxBrightness, Mode=OneWay}"
+                                                Minimum="{x:Bind MinBrightness, Mode=OneWay}"
+                                                PointerCaptureLost="Slider_PointerCaptureLost"
+                                                Tag="Brightness"
+                                                ValueChanged="Slider_ValueChanged"
+                                                Value="{x:Bind Brightness, Mode=OneWay}" />
+                                        </Grid>
 
-                                                        <Slider Grid.Column="1"
-                                                               HorizontalAlignment="Stretch"
-                                                               MinHeight="32"
-                                                               VerticalAlignment="Center"
-                                                               Margin="0,2"
-                                                               Minimum="{x:Bind MinBrightness, Mode=OneWay}"
-                                                               Maximum="{x:Bind MaxBrightness, Mode=OneWay}"
-                                                               Value="{x:Bind Brightness, Mode=OneWay}"
-                                                               ValueChanged="Slider_ValueChanged"
-                                                               PointerCaptureLost="Slider_PointerCaptureLost"
-                                                               Tag="Brightness"
-                                                               IsEnabled="{x:Bind IsInteractionEnabled, Mode=OneWay}" />
+                                        <!--  Contrast Control  -->
+                                        <Grid HorizontalAlignment="Stretch" Visibility="{x:Bind ConvertBoolToVisibility(ShowContrast), Mode=OneWay}">
+                                            <Grid.ColumnDefinitions>
+                                                <ColumnDefinition Width="48" />
+                                                <ColumnDefinition Width="*" />
+                                            </Grid.ColumnDefinitions>
 
-                                                        <TextBlock Grid.Column="2"
-                                                                  FontSize="12"
-                                                                  FontWeight="SemiBold"
-                                                                  HorizontalAlignment="Center"
-                                                                  VerticalAlignment="Center"
-                                                                  Text="{x:Bind Brightness, Mode=OneWay}" />
-                                                    </Grid>
+                                            <FontIcon
+                                                HorizontalAlignment="Center"
+                                                VerticalAlignment="Center"
+                                                FontSize="14"
+                                                Glyph="&#xE7A6;" />
 
-                                                    <!-- Color Temperature Control removed - now in Settings UI -->
+                                            <Slider
+                                                Grid.Column="1"
+                                                MinHeight="32"
+                                                Margin="0,2"
+                                                HorizontalAlignment="Stretch"
+                                                VerticalAlignment="Center"
+                                                IsEnabled="{x:Bind IsInteractionEnabled, Mode=OneWay}"
+                                                Maximum="100"
+                                                Minimum="0"
+                                                PointerCaptureLost="Slider_PointerCaptureLost"
+                                                Tag="Contrast"
+                                                ValueChanged="Slider_ValueChanged"
+                                                Value="{x:Bind ContrastPercent, Mode=OneWay}" />
+                                        </Grid>
 
-                                                    <!-- Contrast Control -->
-                                                    <Grid Height="40"
-                                                          HorizontalAlignment="Stretch"
-                                                          Visibility="{x:Bind ConvertBoolToVisibility(ShowContrast), Mode=OneWay}">
-                                                        <Grid.Transitions>
-                                                            <TransitionCollection>
-                                                                <EntranceThemeTransition FromVerticalOffset="10" />
-                                                                <RepositionThemeTransition />
-                                                            </TransitionCollection>
-                                                        </Grid.Transitions>
-                                                        <Grid.ColumnDefinitions>
-                                                            <ColumnDefinition Width="1*"/>
-                                                            <ColumnDefinition Width="7*"/>
-                                                            <ColumnDefinition Width="2*"/>
-                                                        </Grid.ColumnDefinitions>
+                                        <!--  Volume Control  -->
+                                        <Grid HorizontalAlignment="Stretch" Visibility="{x:Bind ConvertBoolToVisibility(ShowVolume), Mode=OneWay}">
+                                            <Grid.ColumnDefinitions>
+                                                <ColumnDefinition Width="48" />
+                                                <ColumnDefinition Width="*" />
+                                            </Grid.ColumnDefinitions>
 
-                                                        <FontIcon Grid.Column="0"
-                                                                 Glyph="&#xE7A6;"
-                                                                 FontSize="14"
-                                                                 VerticalAlignment="Center"
-                                                                 HorizontalAlignment="Center" />
-
-                                                        <Slider Grid.Column="1"
-                                                               HorizontalAlignment="Stretch"
-                                                               MinHeight="32"
-                                                               VerticalAlignment="Center"
-                                                               Margin="0,2"
-                                                               Minimum="0"
-                                                               Maximum="100"
-                                                               Value="{x:Bind ContrastPercent, Mode=OneWay}"
-                                                               ValueChanged="Slider_ValueChanged"
-                                                               PointerCaptureLost="Slider_PointerCaptureLost"
-                                                               Tag="Contrast"
-                                                               IsEnabled="{x:Bind IsInteractionEnabled, Mode=OneWay}" />
-
-                                                        <TextBlock Grid.Column="2"
-                                                                  FontSize="12"
-                                                                  FontWeight="SemiBold"
-                                                                  HorizontalAlignment="Center"
-                                                                  VerticalAlignment="Center">
-                                                            <Run Text="{x:Bind Contrast, Mode=OneWay}" />
-                                                            <Run Text="%" FontSize="9" />
-                                                        </TextBlock>
-                                                    </Grid>
-
-                                                    <!-- Volume Control -->
-                                                    <Grid Height="40"
-                                                          HorizontalAlignment="Stretch"
-                                                          Visibility="{x:Bind ConvertBoolToVisibility(ShowVolume), Mode=OneWay}">
-                                                        <Grid.Transitions>
-                                                            <TransitionCollection>
-                                                                <EntranceThemeTransition FromVerticalOffset="10" />
-                                                                <RepositionThemeTransition />
-                                                            </TransitionCollection>
-                                                        </Grid.Transitions>
-                                                        <Grid.ColumnDefinitions>
-                                                            <ColumnDefinition Width="1*"/>
-                                                            <ColumnDefinition Width="7*"/>
-                                                            <ColumnDefinition Width="2*"/>
-                                                        </Grid.ColumnDefinitions>
-
-                                                        <FontIcon Grid.Column="0"
-                                                                 Glyph="&#xE767;"
-                                                                 FontSize="14"
-                                                                 VerticalAlignment="Center"
-                                                                 HorizontalAlignment="Center" />
-
-                                                        <Slider Grid.Column="1"
-                                                               HorizontalAlignment="Stretch"
-                                                               MinHeight="32"
-                                                               VerticalAlignment="Center"
-                                                               Margin="0,2"
-                                                               Minimum="{x:Bind MinVolume, Mode=OneWay}"
-                                                               Maximum="{x:Bind MaxVolume, Mode=OneWay}"
-                                                               Value="{x:Bind Volume, Mode=OneWay}"
-                                                               ValueChanged="Slider_ValueChanged"
-                                                               PointerCaptureLost="Slider_PointerCaptureLost"
-                                                               Tag="Volume"
-                                                               IsEnabled="{x:Bind IsInteractionEnabled, Mode=OneWay}" />
-
-                                                        <TextBlock Grid.Column="2"
-                                                                  FontSize="12"
-                                                                  FontWeight="SemiBold"
-                                                                  HorizontalAlignment="Center"
-                                                                  VerticalAlignment="Center">
-                                                            <Run Text="{x:Bind Volume, Mode=OneWay}" />
-                                                            <Run Text="%" FontSize="9" />
-                                                        </TextBlock>
-                                                    </Grid>
+                                            <FontIcon
+                                                HorizontalAlignment="Center"
+                                                VerticalAlignment="Center"
+                                                FontSize="14"
+                                                Glyph="&#xE767;" />
 
+                                            <Slider
+                                                Grid.Column="1"
+                                                MinHeight="32"
+                                                Margin="0,2"
+                                                HorizontalAlignment="Stretch"
+                                                VerticalAlignment="Center"
+                                                IsEnabled="{x:Bind IsInteractionEnabled, Mode=OneWay}"
+                                                Maximum="{x:Bind MaxVolume, Mode=OneWay}"
+                                                Minimum="{x:Bind MinVolume, Mode=OneWay}"
+                                                PointerCaptureLost="Slider_PointerCaptureLost"
+                                                Tag="Volume"
+                                                ValueChanged="Slider_ValueChanged"
+                                                Value="{x:Bind Volume, Mode=OneWay}" />
+                                        </Grid>
                                     </StackPanel>
                                 </DataTemplate>
                             </ItemsControl.ItemTemplate>
                         </ItemsControl>
-                    </StackPanel>
-                </ScrollViewer>
-
-                <!-- Status Bar with modern design -->
-                <Grid Grid.Row="1"
-                      BorderBrush="{ThemeResource DividerStrokeColorDefaultBrush}"
-                      BorderThickness="0,1,0,0"
-                      Padding="8">
+                    </ScrollViewer>
+                </Grid>
+                <!--  Status Bar with modern design  -->
+                <Grid Grid.Row="1" Padding="8">
                     <Grid.ColumnDefinitions>
                         <ColumnDefinition Width="*" />
                         <ColumnDefinition Width="Auto" />
                     </Grid.ColumnDefinitions>
 
-                    <!-- Status Information -->
-                    <StackPanel Orientation="Vertical" VerticalAlignment="Center">
-                        <TextBlock x:Name="AdjustBrightnessTextBlock"
-                                  FontSize="16"
-                                  FontWeight="SemiBold" />
-                    </StackPanel>
+                    <!--  Status Information  -->
+                    <TextBlock x:Name="AdjustBrightnessTextBlock" />
 
-                    <!-- Action Buttons -->
-                    <StackPanel Grid.Column="1"
-                               Orientation="Horizontal"
-                               Spacing="4"
-                               VerticalAlignment="Center">
-                        <Button x:Name="LinkButton"
-                               Width="40"
-                               Height="40"
-                               CornerRadius="4"
-                               Background="Transparent"
-                               BorderThickness="0"
-                               ToolTipService.ToolTip="Sync all monitors">
-                            <FontIcon Glyph="&#xE71B;" FontSize="16" />
-                        </Button>
-                        <Button x:Name="DisableButton"
-                               Width="40"
-                               Height="40"
-                               CornerRadius="4"
-                               Background="Transparent"
-                               BorderThickness="0"
-                               ToolTipService.ToolTip="Toggle control">
-                            <FontIcon Glyph="&#xE7E8;" FontSize="16" />
-                        </Button>
-                        <Button x:Name="RefreshButton"
-                               Width="40"
-                               Height="40"
-                               CornerRadius="4"
-                               Background="Transparent"
-                               BorderThickness="0"
-                               ToolTipService.ToolTip="Refresh monitors">
-                            <FontIcon Glyph="&#xE72C;" FontSize="16" />
-                        </Button>
+                    <!--  Action Buttons  -->
+                    <StackPanel
+                        Grid.Column="1"
+                        Margin="0,0,12,0"
+                        HorizontalAlignment="Right"
+                        Orientation="Horizontal"
+                        Spacing="8">
+                        <Button
+                            x:Name="LinkButton"
+                            Content="{ui:FontIcon Glyph=&#xE71B;,
+                                                  FontSize=16}"
+                            Style="{StaticResource SubtleButtonStyle}"
+                            ToolTipService.ToolTip="Sync all monitors" />
+                        <Button
+                            x:Name="DisableButton"
+                            Content="{ui:FontIcon Glyph=&#xE7E8;,
+                                                  FontSize=16}"
+                            Style="{StaticResource SubtleButtonStyle}"
+                            ToolTipService.ToolTip="Toggle control" />
+
+                        <Button
+                            x:Name="RefreshButton"
+                            Content="{ui:FontIcon Glyph=&#xE72C;,
+                                                  FontSize=16}"
+                            Style="{StaticResource SubtleButtonStyle}"
+                            ToolTipService.ToolTip="Refresh monitors" />
                     </StackPanel>
                 </Grid>
             </Grid>
         </Border>
     </Grid>
-</Window>
\ No newline at end of file
+</winuiex:WindowEx>
\ No newline at end of file
diff --git a/src/modules/powerdisplay/PowerDisplay/PowerDisplayXAML/MainWindow.xaml.cs b/src/modules/powerdisplay/PowerDisplay/PowerDisplayXAML/MainWindow.xaml.cs
index 269715013e..894b82df90 100644
--- a/src/modules/powerdisplay/PowerDisplay/PowerDisplayXAML/MainWindow.xaml.cs
+++ b/src/modules/powerdisplay/PowerDisplay/PowerDisplayXAML/MainWindow.xaml.cs
@@ -24,6 +24,7 @@ using PowerDisplay.Native;
 using PowerDisplay.ViewModels;
 using Windows.Graphics;
 using WinRT.Interop;
+using WinUIEx;
 using static PowerDisplay.Native.PInvoke;
 using Monitor = PowerDisplay.Core.Models.Monitor;
 
@@ -33,7 +34,7 @@ namespace PowerDisplay
     /// PowerDisplay main window
     /// </summary>
     [DynamicallyAccessedMembers(DynamicallyAccessedMemberTypes.PublicProperties | DynamicallyAccessedMemberTypes.PublicMethods)]
-    public sealed partial class MainWindow : Window, IDisposable
+    public sealed partial class MainWindow : WindowEx, IDisposable
     {
         private readonly ISettingsUtils _settingsUtils = new SettingsUtils();
         private MainViewModel _viewModel = null!;
@@ -157,7 +158,6 @@ namespace PowerDisplay
 
                 // Set text block content
                 ScanningMonitorsTextBlock.Text = loader.GetString("ScanningMonitorsText");
-                NoMonitorsTextBlock.Text = loader.GetString("NoMonitorsText");
                 AdjustBrightnessTextBlock.Text = loader.GetString("AdjustBrightnessText");
 
                 // Set button tooltips
@@ -170,7 +170,6 @@ namespace PowerDisplay
                 // Use English defaults if resource loading fails
                 Logger.LogWarning($"Failed to load localized strings: {ex.Message}");
                 ScanningMonitorsTextBlock.Text = "Scanning monitors...";
-                NoMonitorsTextBlock.Text = "No monitors detected";
                 AdjustBrightnessTextBlock.Text = "PowerDisplay";
 
                 Microsoft.UI.Xaml.Controls.ToolTipService.SetToolTip(LinkButton, "Synchronize all monitors to the same brightness");
@@ -280,25 +279,8 @@ namespace PowerDisplay
         {
             var hWnd = WinRT.Interop.WindowNative.GetWindowHandle(this);
 
-            // Use storyboard animation for window exit
-            if (RootGrid.Resources.ContainsKey("SlideOutStoryboard"))
-            {
-                var slideOutStoryboard = RootGrid.Resources["SlideOutStoryboard"] as Storyboard;
-                if (slideOutStoryboard != null)
-                {
-                    slideOutStoryboard.Completed += (s, e) =>
-                    {
-                        // Hide window after animation completes
-                        WindowHelper.ShowWindow(hWnd, false);
-                    };
-                    slideOutStoryboard.Begin();
-                }
-            }
-            else
-            {
-                // Fallback: hide immediately if animation not found
-                WindowHelper.ShowWindow(hWnd, false);
-            }
+            // Fallback: hide immediately if animation not found
+            WindowHelper.ShowWindow(hWnd, false);
         }
 
         /// <summary>
@@ -559,26 +541,6 @@ namespace PowerDisplay
                         titleBar.SetDragRectangles(Array.Empty<Windows.Graphics.RectInt32>());
                     }
 
-                    // Set modern Mica Alt backdrop for Windows 11
-                    try
-                    {
-                        // Use Mica Alt for a more modern appearance
-                        if (Microsoft.UI.Composition.SystemBackdrops.MicaController.IsSupported())
-                        {
-                            this.SystemBackdrop = new Microsoft.UI.Xaml.Media.MicaBackdrop();
-                        }
-                        else
-                        {
-                            // Fallback to basic backdrop for older systems
-                            this.SystemBackdrop = new Microsoft.UI.Xaml.Media.DesktopAcrylicBackdrop();
-                        }
-                    }
-                    catch
-                    {
-                        // Fallback: use solid color background
-                        this.SystemBackdrop = null;
-                    }
-
                     // Use Win32 API to further disable window moving
                     WindowHelper.DisableWindowMovingAndResizing(hWnd);
 
@@ -612,6 +574,8 @@ namespace PowerDisplay
                 var availableWidth = (double)AppConstants.UI.WindowWidth;
                 var contentHeight = GetContentHeight(availableWidth);
 
+                contentHeight = 720;
+
                 // Account for display scaling
                 var scale = RootGrid.XamlRoot?.RasterizationScale ?? 1.0;
                 var scaledHeight = (int)Math.Ceiling(contentHeight * scale);
diff --git a/src/modules/powerdisplay/PowerDisplay/Strings/en-us/Resources.resw b/src/modules/powerdisplay/PowerDisplay/Strings/en-us/Resources.resw
index 707e25a557..a19698d134 100644
--- a/src/modules/powerdisplay/PowerDisplay/Strings/en-us/Resources.resw
+++ b/src/modules/powerdisplay/PowerDisplay/Strings/en-us/Resources.resw
@@ -15,7 +15,7 @@
   <data name="ScanningMonitorsText" xml:space="preserve">
     <value>Scanning monitors...</value>
   </data>
-  <data name="NoMonitorsText" xml:space="preserve">
+  <data name="NoMonitorsText.Message" xml:space="preserve">
     <value>No monitors detected</value>
   </data>
   <data name="AdjustBrightnessText" xml:space="preserve">