diff --git a/FiloContainer.slnx b/FiloContainer.slnx
index 8393e94..4610440 100644
--- a/FiloContainer.slnx
+++ b/FiloContainer.slnx
@@ -1,4 +1,10 @@
 <Solution>
+  <Folder Name="/app/">
+    <Project Path="app/FiloExplorer/FiloExplorer.csproj" Id="0865122a-f7f0-47d8-bf64-05f6426ae4fb">
+      <Platform Project="x64" />
+      <Deploy />
+    </Project>
+  </Folder>
   <Folder Name="/src/">
     <Project Path="src/Filo/Filo.csproj" />
   </Folder>
diff --git a/app/FiloExplorer/App.xaml b/app/FiloExplorer/App.xaml
new file mode 100644
index 0000000..376cc99
--- /dev/null
+++ b/app/FiloExplorer/App.xaml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Application
+    x:Class="FiloExplorer.App"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:FiloExplorer">
+    <Application.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
+                <!-- Other merged dictionaries here -->
+            </ResourceDictionary.MergedDictionaries>
+            <!-- Other app resources here -->
+        </ResourceDictionary>
+    </Application.Resources>
+</Application>
diff --git a/app/FiloExplorer/App.xaml.cs b/app/FiloExplorer/App.xaml.cs
new file mode 100644
index 0000000..1b15aeb
--- /dev/null
+++ b/app/FiloExplorer/App.xaml.cs
@@ -0,0 +1,36 @@
+using Microsoft.UI.Xaml;
+using Microsoft.Windows.AppNotifications;
+using System;
+
+
+namespace FiloExplorer;
+
+/// <summary>
+/// Provides application-specific behavior to supplement the default Application class.
+/// </summary>
+public partial class App : Application
+{
+    private Window? _window;
+    public static IServiceProvider Services { get; private set; } = null!;
+
+    /// <summary>
+    /// Initializes the singleton application object.  This is the first line of authored code
+    /// executed, and as such is the logical equivalent of main() or WinMain().
+    /// </summary>
+    public App()
+    {
+        InitializeComponent();
+    }
+
+    /// <summary>
+    /// Invoked when the application is launched.
+    /// </summary>
+    /// <param name="args">Details about the launch request and process.</param>
+    protected override void OnLaunched(LaunchActivatedEventArgs args)
+    {
+        _window = new MainWindow();
+        _window.Activate();
+
+        AppNotificationManager.Default.Register();
+    }
+}
diff --git a/app/FiloExplorer/Assets/AppIcon.png b/app/FiloExplorer/Assets/AppIcon.png
new file mode 100644
index 0000000..33f9592
Binary files /dev/null and b/app/FiloExplorer/Assets/AppIcon.png differ
diff --git a/app/FiloExplorer/Assets/AppLogo.png b/app/FiloExplorer/Assets/AppLogo.png
new file mode 100644
index 0000000..e79710c
Binary files /dev/null and b/app/FiloExplorer/Assets/AppLogo.png differ
diff --git a/app/FiloExplorer/Assets/LargeTile.scale-100.png b/app/FiloExplorer/Assets/LargeTile.scale-100.png
new file mode 100644
index 0000000..a533552
Binary files /dev/null and b/app/FiloExplorer/Assets/LargeTile.scale-100.png differ
diff --git a/app/FiloExplorer/Assets/LargeTile.scale-125.png b/app/FiloExplorer/Assets/LargeTile.scale-125.png
new file mode 100644
index 0000000..6f57546
Binary files /dev/null and b/app/FiloExplorer/Assets/LargeTile.scale-125.png differ
diff --git a/app/FiloExplorer/Assets/LargeTile.scale-150.png b/app/FiloExplorer/Assets/LargeTile.scale-150.png
new file mode 100644
index 0000000..2079736
Binary files /dev/null and b/app/FiloExplorer/Assets/LargeTile.scale-150.png differ
diff --git a/app/FiloExplorer/Assets/LargeTile.scale-200.png b/app/FiloExplorer/Assets/LargeTile.scale-200.png
new file mode 100644
index 0000000..f35ce5e
Binary files /dev/null and b/app/FiloExplorer/Assets/LargeTile.scale-200.png differ
diff --git a/app/FiloExplorer/Assets/LargeTile.scale-400.png b/app/FiloExplorer/Assets/LargeTile.scale-400.png
new file mode 100644
index 0000000..e17474b
Binary files /dev/null and b/app/FiloExplorer/Assets/LargeTile.scale-400.png differ
diff --git a/app/FiloExplorer/Assets/LockScreenLogo.scale-200.png b/app/FiloExplorer/Assets/LockScreenLogo.scale-200.png
new file mode 100644
index 0000000..7440f0d
Binary files /dev/null and b/app/FiloExplorer/Assets/LockScreenLogo.scale-200.png differ
diff --git a/app/FiloExplorer/Assets/Remove text from lay.png b/app/FiloExplorer/Assets/Remove text from lay.png
new file mode 100644
index 0000000..800b32d
Binary files /dev/null and b/app/FiloExplorer/Assets/Remove text from lay.png differ
diff --git a/app/FiloExplorer/Assets/SmallTile.scale-100.png b/app/FiloExplorer/Assets/SmallTile.scale-100.png
new file mode 100644
index 0000000..524dffd
Binary files /dev/null and b/app/FiloExplorer/Assets/SmallTile.scale-100.png differ
diff --git a/app/FiloExplorer/Assets/SmallTile.scale-125.png b/app/FiloExplorer/Assets/SmallTile.scale-125.png
new file mode 100644
index 0000000..fb6a742
Binary files /dev/null and b/app/FiloExplorer/Assets/SmallTile.scale-125.png differ
diff --git a/app/FiloExplorer/Assets/SmallTile.scale-150.png b/app/FiloExplorer/Assets/SmallTile.scale-150.png
new file mode 100644
index 0000000..19fb7bd
Binary files /dev/null and b/app/FiloExplorer/Assets/SmallTile.scale-150.png differ
diff --git a/app/FiloExplorer/Assets/SmallTile.scale-200.png b/app/FiloExplorer/Assets/SmallTile.scale-200.png
new file mode 100644
index 0000000..84de515
Binary files /dev/null and b/app/FiloExplorer/Assets/SmallTile.scale-200.png differ
diff --git a/app/FiloExplorer/Assets/SmallTile.scale-400.png b/app/FiloExplorer/Assets/SmallTile.scale-400.png
new file mode 100644
index 0000000..27c3b57
Binary files /dev/null and b/app/FiloExplorer/Assets/SmallTile.scale-400.png differ
diff --git a/app/FiloExplorer/Assets/SplashScreen.scale-100.png b/app/FiloExplorer/Assets/SplashScreen.scale-100.png
new file mode 100644
index 0000000..8d6538b
Binary files /dev/null and b/app/FiloExplorer/Assets/SplashScreen.scale-100.png differ
diff --git a/app/FiloExplorer/Assets/SplashScreen.scale-125.png b/app/FiloExplorer/Assets/SplashScreen.scale-125.png
new file mode 100644
index 0000000..8071fd2
Binary files /dev/null and b/app/FiloExplorer/Assets/SplashScreen.scale-125.png differ
diff --git a/app/FiloExplorer/Assets/SplashScreen.scale-150.png b/app/FiloExplorer/Assets/SplashScreen.scale-150.png
new file mode 100644
index 0000000..69d1408
Binary files /dev/null and b/app/FiloExplorer/Assets/SplashScreen.scale-150.png differ
diff --git a/app/FiloExplorer/Assets/SplashScreen.scale-200.png b/app/FiloExplorer/Assets/SplashScreen.scale-200.png
new file mode 100644
index 0000000..59ea27f
Binary files /dev/null and b/app/FiloExplorer/Assets/SplashScreen.scale-200.png differ
diff --git a/app/FiloExplorer/Assets/SplashScreen.scale-400.png b/app/FiloExplorer/Assets/SplashScreen.scale-400.png
new file mode 100644
index 0000000..7850cda
Binary files /dev/null and b/app/FiloExplorer/Assets/SplashScreen.scale-400.png differ
diff --git a/app/FiloExplorer/Assets/Square150x150Logo.scale-100.png b/app/FiloExplorer/Assets/Square150x150Logo.scale-100.png
new file mode 100644
index 0000000..58a061b
Binary files /dev/null and b/app/FiloExplorer/Assets/Square150x150Logo.scale-100.png differ
diff --git a/app/FiloExplorer/Assets/Square150x150Logo.scale-125.png b/app/FiloExplorer/Assets/Square150x150Logo.scale-125.png
new file mode 100644
index 0000000..5069cd2
Binary files /dev/null and b/app/FiloExplorer/Assets/Square150x150Logo.scale-125.png differ
diff --git a/app/FiloExplorer/Assets/Square150x150Logo.scale-150.png b/app/FiloExplorer/Assets/Square150x150Logo.scale-150.png
new file mode 100644
index 0000000..c8ec4da
Binary files /dev/null and b/app/FiloExplorer/Assets/Square150x150Logo.scale-150.png differ
diff --git a/app/FiloExplorer/Assets/Square150x150Logo.scale-200.png b/app/FiloExplorer/Assets/Square150x150Logo.scale-200.png
new file mode 100644
index 0000000..cdc5b66
Binary files /dev/null and b/app/FiloExplorer/Assets/Square150x150Logo.scale-200.png differ
diff --git a/app/FiloExplorer/Assets/Square150x150Logo.scale-400.png b/app/FiloExplorer/Assets/Square150x150Logo.scale-400.png
new file mode 100644
index 0000000..17c7e84
Binary files /dev/null and b/app/FiloExplorer/Assets/Square150x150Logo.scale-400.png differ
diff --git a/app/FiloExplorer/Assets/Square44x44Logo.altform-lightunplated_targetsize-16.png b/app/FiloExplorer/Assets/Square44x44Logo.altform-lightunplated_targetsize-16.png
new file mode 100644
index 0000000..7e99e81
Binary files /dev/null and b/app/FiloExplorer/Assets/Square44x44Logo.altform-lightunplated_targetsize-16.png differ
diff --git a/app/FiloExplorer/Assets/Square44x44Logo.altform-lightunplated_targetsize-24.png b/app/FiloExplorer/Assets/Square44x44Logo.altform-lightunplated_targetsize-24.png
new file mode 100644
index 0000000..f93c1d3
Binary files /dev/null and b/app/FiloExplorer/Assets/Square44x44Logo.altform-lightunplated_targetsize-24.png differ
diff --git a/app/FiloExplorer/Assets/Square44x44Logo.altform-lightunplated_targetsize-256.png b/app/FiloExplorer/Assets/Square44x44Logo.altform-lightunplated_targetsize-256.png
new file mode 100644
index 0000000..7edc3ff
Binary files /dev/null and b/app/FiloExplorer/Assets/Square44x44Logo.altform-lightunplated_targetsize-256.png differ
diff --git a/app/FiloExplorer/Assets/Square44x44Logo.altform-lightunplated_targetsize-32.png b/app/FiloExplorer/Assets/Square44x44Logo.altform-lightunplated_targetsize-32.png
new file mode 100644
index 0000000..a840b14
Binary files /dev/null and b/app/FiloExplorer/Assets/Square44x44Logo.altform-lightunplated_targetsize-32.png differ
diff --git a/app/FiloExplorer/Assets/Square44x44Logo.altform-lightunplated_targetsize-48.png b/app/FiloExplorer/Assets/Square44x44Logo.altform-lightunplated_targetsize-48.png
new file mode 100644
index 0000000..71c6624
Binary files /dev/null and b/app/FiloExplorer/Assets/Square44x44Logo.altform-lightunplated_targetsize-48.png differ
diff --git a/app/FiloExplorer/Assets/Square44x44Logo.altform-unplated_targetsize-16.png b/app/FiloExplorer/Assets/Square44x44Logo.altform-unplated_targetsize-16.png
new file mode 100644
index 0000000..7e99e81
Binary files /dev/null and b/app/FiloExplorer/Assets/Square44x44Logo.altform-unplated_targetsize-16.png differ
diff --git a/app/FiloExplorer/Assets/Square44x44Logo.altform-unplated_targetsize-256.png b/app/FiloExplorer/Assets/Square44x44Logo.altform-unplated_targetsize-256.png
new file mode 100644
index 0000000..7edc3ff
Binary files /dev/null and b/app/FiloExplorer/Assets/Square44x44Logo.altform-unplated_targetsize-256.png differ
diff --git a/app/FiloExplorer/Assets/Square44x44Logo.altform-unplated_targetsize-32.png b/app/FiloExplorer/Assets/Square44x44Logo.altform-unplated_targetsize-32.png
new file mode 100644
index 0000000..a840b14
Binary files /dev/null and b/app/FiloExplorer/Assets/Square44x44Logo.altform-unplated_targetsize-32.png differ
diff --git a/app/FiloExplorer/Assets/Square44x44Logo.altform-unplated_targetsize-48.png b/app/FiloExplorer/Assets/Square44x44Logo.altform-unplated_targetsize-48.png
new file mode 100644
index 0000000..71c6624
Binary files /dev/null and b/app/FiloExplorer/Assets/Square44x44Logo.altform-unplated_targetsize-48.png differ
diff --git a/app/FiloExplorer/Assets/Square44x44Logo.scale-100.png b/app/FiloExplorer/Assets/Square44x44Logo.scale-100.png
new file mode 100644
index 0000000..6519315
Binary files /dev/null and b/app/FiloExplorer/Assets/Square44x44Logo.scale-100.png differ
diff --git a/app/FiloExplorer/Assets/Square44x44Logo.scale-125.png b/app/FiloExplorer/Assets/Square44x44Logo.scale-125.png
new file mode 100644
index 0000000..d2d9822
Binary files /dev/null and b/app/FiloExplorer/Assets/Square44x44Logo.scale-125.png differ
diff --git a/app/FiloExplorer/Assets/Square44x44Logo.scale-150.png b/app/FiloExplorer/Assets/Square44x44Logo.scale-150.png
new file mode 100644
index 0000000..0db34ab
Binary files /dev/null and b/app/FiloExplorer/Assets/Square44x44Logo.scale-150.png differ
diff --git a/app/FiloExplorer/Assets/Square44x44Logo.scale-200.png b/app/FiloExplorer/Assets/Square44x44Logo.scale-200.png
new file mode 100644
index 0000000..a7d3d1e
Binary files /dev/null and b/app/FiloExplorer/Assets/Square44x44Logo.scale-200.png differ
diff --git a/app/FiloExplorer/Assets/Square44x44Logo.scale-400.png b/app/FiloExplorer/Assets/Square44x44Logo.scale-400.png
new file mode 100644
index 0000000..4d6f247
Binary files /dev/null and b/app/FiloExplorer/Assets/Square44x44Logo.scale-400.png differ
diff --git a/app/FiloExplorer/Assets/Square44x44Logo.targetsize-16.png b/app/FiloExplorer/Assets/Square44x44Logo.targetsize-16.png
new file mode 100644
index 0000000..c6bc82a
Binary files /dev/null and b/app/FiloExplorer/Assets/Square44x44Logo.targetsize-16.png differ
diff --git a/app/FiloExplorer/Assets/Square44x44Logo.targetsize-24.png b/app/FiloExplorer/Assets/Square44x44Logo.targetsize-24.png
new file mode 100644
index 0000000..ef8441d
Binary files /dev/null and b/app/FiloExplorer/Assets/Square44x44Logo.targetsize-24.png differ
diff --git a/app/FiloExplorer/Assets/Square44x44Logo.targetsize-24_altform-unplated.png b/app/FiloExplorer/Assets/Square44x44Logo.targetsize-24_altform-unplated.png
new file mode 100644
index 0000000..f93c1d3
Binary files /dev/null and b/app/FiloExplorer/Assets/Square44x44Logo.targetsize-24_altform-unplated.png differ
diff --git a/app/FiloExplorer/Assets/Square44x44Logo.targetsize-256.png b/app/FiloExplorer/Assets/Square44x44Logo.targetsize-256.png
new file mode 100644
index 0000000..c348dce
Binary files /dev/null and b/app/FiloExplorer/Assets/Square44x44Logo.targetsize-256.png differ
diff --git a/app/FiloExplorer/Assets/Square44x44Logo.targetsize-32.png b/app/FiloExplorer/Assets/Square44x44Logo.targetsize-32.png
new file mode 100644
index 0000000..e6ec315
Binary files /dev/null and b/app/FiloExplorer/Assets/Square44x44Logo.targetsize-32.png differ
diff --git a/app/FiloExplorer/Assets/Square44x44Logo.targetsize-48.png b/app/FiloExplorer/Assets/Square44x44Logo.targetsize-48.png
new file mode 100644
index 0000000..f87c8ac
Binary files /dev/null and b/app/FiloExplorer/Assets/Square44x44Logo.targetsize-48.png differ
diff --git a/app/FiloExplorer/Assets/StoreLogo.backup.png b/app/FiloExplorer/Assets/StoreLogo.backup.png
new file mode 100644
index 0000000..a4586f2
Binary files /dev/null and b/app/FiloExplorer/Assets/StoreLogo.backup.png differ
diff --git a/app/FiloExplorer/Assets/StoreLogo.scale-100.png b/app/FiloExplorer/Assets/StoreLogo.scale-100.png
new file mode 100644
index 0000000..3b0bac3
Binary files /dev/null and b/app/FiloExplorer/Assets/StoreLogo.scale-100.png differ
diff --git a/app/FiloExplorer/Assets/StoreLogo.scale-125.png b/app/FiloExplorer/Assets/StoreLogo.scale-125.png
new file mode 100644
index 0000000..353cad9
Binary files /dev/null and b/app/FiloExplorer/Assets/StoreLogo.scale-125.png differ
diff --git a/app/FiloExplorer/Assets/StoreLogo.scale-150.png b/app/FiloExplorer/Assets/StoreLogo.scale-150.png
new file mode 100644
index 0000000..36e85b2
Binary files /dev/null and b/app/FiloExplorer/Assets/StoreLogo.scale-150.png differ
diff --git a/app/FiloExplorer/Assets/StoreLogo.scale-200.png b/app/FiloExplorer/Assets/StoreLogo.scale-200.png
new file mode 100644
index 0000000..bb1c940
Binary files /dev/null and b/app/FiloExplorer/Assets/StoreLogo.scale-200.png differ
diff --git a/app/FiloExplorer/Assets/StoreLogo.scale-400.png b/app/FiloExplorer/Assets/StoreLogo.scale-400.png
new file mode 100644
index 0000000..1ac154a
Binary files /dev/null and b/app/FiloExplorer/Assets/StoreLogo.scale-400.png differ
diff --git a/app/FiloExplorer/Assets/Wide310x150Logo.scale-100.png b/app/FiloExplorer/Assets/Wide310x150Logo.scale-100.png
new file mode 100644
index 0000000..9602459
Binary files /dev/null and b/app/FiloExplorer/Assets/Wide310x150Logo.scale-100.png differ
diff --git a/app/FiloExplorer/Assets/Wide310x150Logo.scale-125.png b/app/FiloExplorer/Assets/Wide310x150Logo.scale-125.png
new file mode 100644
index 0000000..081657d
Binary files /dev/null and b/app/FiloExplorer/Assets/Wide310x150Logo.scale-125.png differ
diff --git a/app/FiloExplorer/Assets/Wide310x150Logo.scale-150.png b/app/FiloExplorer/Assets/Wide310x150Logo.scale-150.png
new file mode 100644
index 0000000..4af2799
Binary files /dev/null and b/app/FiloExplorer/Assets/Wide310x150Logo.scale-150.png differ
diff --git a/app/FiloExplorer/Assets/Wide310x150Logo.scale-200.png b/app/FiloExplorer/Assets/Wide310x150Logo.scale-200.png
new file mode 100644
index 0000000..8d6538b
Binary files /dev/null and b/app/FiloExplorer/Assets/Wide310x150Logo.scale-200.png differ
diff --git a/app/FiloExplorer/Assets/Wide310x150Logo.scale-400.png b/app/FiloExplorer/Assets/Wide310x150Logo.scale-400.png
new file mode 100644
index 0000000..59ea27f
Binary files /dev/null and b/app/FiloExplorer/Assets/Wide310x150Logo.scale-400.png differ
diff --git a/app/FiloExplorer/Assets/folder.png b/app/FiloExplorer/Assets/folder.png
new file mode 100644
index 0000000..ca84780
Binary files /dev/null and b/app/FiloExplorer/Assets/folder.png differ
diff --git a/app/FiloExplorer/Assets/icon.png b/app/FiloExplorer/Assets/icon.png
new file mode 100644
index 0000000..70c7b52
Binary files /dev/null and b/app/FiloExplorer/Assets/icon.png differ
diff --git a/app/FiloExplorer/Assets/iconfilo.png b/app/FiloExplorer/Assets/iconfilo.png
new file mode 100644
index 0000000..881d67e
Binary files /dev/null and b/app/FiloExplorer/Assets/iconfilo.png differ
diff --git a/app/FiloExplorer/FiloExplorer.csproj b/app/FiloExplorer/FiloExplorer.csproj
new file mode 100644
index 0000000..1acf605
--- /dev/null
+++ b/app/FiloExplorer/FiloExplorer.csproj
@@ -0,0 +1,97 @@
+<Project Sdk="Microsoft.NET.Sdk">
+  <PropertyGroup>
+    <OutputType>WinExe</OutputType>
+    <TargetFramework>net10.0-windows10.0.22000.0</TargetFramework>
+    <TargetPlatformMinVersion>10.0.17763.0</TargetPlatformMinVersion>
+    <RootNamespace>FiloExplorer</RootNamespace>
+    <ApplicationManifest>app.manifest</ApplicationManifest>
+    <Platforms>x64</Platforms>
+    <RuntimeIdentifiers>win-x64</RuntimeIdentifiers>
+    <PublishProfile>win-$(Platform).pubxml</PublishProfile>
+    <UseWinUI>true</UseWinUI>
+    <WinUISDKReferences>false</WinUISDKReferences>
+    <EnableMsixTooling>true</EnableMsixTooling>
+    <Nullable>enable</Nullable>
+  </PropertyGroup>
+  <ItemGroup>
+    <Content Remove="Assets\folder.png" />
+    <Content Remove="Assets\iconfilo.png" />
+    <Content Remove="Assets\Remove text from lay.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <None Remove="Views\HelpPage.xaml" />
+    <None Remove="Views\MainPage.xaml" />
+    <None Remove="Views\NewPage.xaml" />
+    <None Remove="Views\ViewPage.xaml" />
+  </ItemGroup>
+  <ItemGroup>
+    <Content Include="Assets\SplashScreen.scale-200.png" />
+    <Content Include="Assets\LockScreenLogo.scale-200.png" />
+    <Content Include="Assets\Square150x150Logo.scale-200.png" />
+    <Content Include="Assets\Square44x44Logo.scale-200.png" />
+    <Content Include="Assets\Square44x44Logo.targetsize-24_altform-unplated.png" />
+    <Content Include="Assets\Wide310x150Logo.scale-200.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <Manifest Include="$(ApplicationManifest)" />
+  </ItemGroup>
+  <!--
+    Defining the "Msix" ProjectCapability here allows the Single-project MSIX Packaging
+    Tools extension to be activated for this project even if the Windows App SDK Nuget
+    package has not yet been restored.
+  -->
+  <ItemGroup Condition="'$(DisableMsixProjectCapabilityAddedByProject)'!='true' and '$(EnableMsixTooling)'=='true'">
+    <ProjectCapability Include="Msix" />
+  </ItemGroup>
+  <ItemGroup>
+    <PackageReference Include="CommunityToolkit.Mvvm" Version="8.4.2" />
+    <PackageReference Include="Filo" Version="1.1.0" />
+    <PackageReference Include="Microsoft.Windows.SDK.BuildTools" Version="10.0.26100.7705" />
+    <PackageReference Include="Microsoft.WindowsAppSDK" Version="1.8.260317003" />
+  </ItemGroup>
+  <ItemGroup>
+    <Page Update="Views\HelpPage.xaml">
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+  </ItemGroup>
+  <ItemGroup>
+    <Page Update="Views\ViewPage.xaml">
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+  </ItemGroup>
+  <ItemGroup>
+    <Page Update="Views\NewPage.xaml">
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+  </ItemGroup>
+  <ItemGroup>
+    <Page Update="Views\MainPage.xaml">
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+  </ItemGroup>
+  <!--
+    Defining the "HasPackageAndPublishMenuAddedByProject" property here allows the Solution
+    Explorer "Package and Publish" context menu entry to be enabled for this project even if
+    the Windows App SDK Nuget package has not yet been restored.
+  -->
+  <PropertyGroup Condition="'$(DisableHasPackageAndPublishMenuAddedByProject)'!='true' and '$(EnableMsixTooling)'=='true'">
+    <HasPackageAndPublishMenu>true</HasPackageAndPublishMenu>
+  </PropertyGroup>
+  <!-- Publish Properties -->
+  <PropertyGroup>
+    <PublishReadyToRun Condition="'$(Configuration)' == 'Debug'">False</PublishReadyToRun>
+    <PublishReadyToRun Condition="'$(Configuration)' != 'Debug'">True</PublishReadyToRun>
+    <PublishTrimmed Condition="'$(Configuration)' == 'Debug'">False</PublishTrimmed>
+    <PublishTrimmed Condition="'$(Configuration)' != 'Debug'">False</PublishTrimmed>
+    <PackageCertificateThumbprint>01ABAD0860577FBCDFD634C13DB67FAAA6AF155A</PackageCertificateThumbprint>
+    <AppxPackageSigningEnabled>True</AppxPackageSigningEnabled>
+    <GenerateAppInstallerFile>True</GenerateAppInstallerFile>
+    <AppxPackageSigningTimestampDigestAlgorithm>SHA256</AppxPackageSigningTimestampDigestAlgorithm>
+    <AppxAutoIncrementPackageRevision>True</AppxAutoIncrementPackageRevision>
+    <GenerateTestArtifacts>True</GenerateTestArtifacts>
+    <AppxBundle>Always</AppxBundle>
+    <AppxBundlePlatforms>x64</AppxBundlePlatforms>
+    <AppInstallerUri>E:\source\FiloContainer\app\FiloExplorer\AppPackages\App</AppInstallerUri>
+    <HoursBetweenUpdateChecks>0</HoursBetweenUpdateChecks>
+  </PropertyGroup>
+</Project>
\ No newline at end of file
diff --git a/app/FiloExplorer/Helpers/MimeHelper.cs b/app/FiloExplorer/Helpers/MimeHelper.cs
new file mode 100644
index 0000000..fc2904d
--- /dev/null
+++ b/app/FiloExplorer/Helpers/MimeHelper.cs
@@ -0,0 +1,52 @@
+using System;
+using System.Collections.Generic;
+using System.IO;
+
+namespace FiloExplorer.Helpers;
+
+public static class MimeHelper
+{
+    private static readonly Dictionary<string, string> _map = new(StringComparer.OrdinalIgnoreCase)
+    {
+        // Images
+        [".jpg"] = "image/jpeg",
+        [".jpeg"] = "image/jpeg",
+        [".png"] = "image/png",
+        [".gif"] = "image/gif",
+        [".bmp"] = "image/bmp",
+        [".webp"] = "image/webp",
+
+        // Video
+        [".mp4"] = "video/mp4",
+        [".mkv"] = "video/x-matroska",
+        [".webm"] = "video/webm",
+        [".avi"] = "video/x-msvideo",
+
+        // Audio
+        [".mp3"] = "audio/mpeg",
+        [".wav"] = "audio/wav",
+        [".aac"] = "audio/aac",
+        [".flac"] = "audio/flac",
+
+        // Text
+        [".txt"] = "text/plain",
+        [".json"] = "application/json",
+        [".xml"] = "application/xml",
+        [".html"] = "text/html",
+        [".css"] = "text/css",
+
+        // Other
+        [".pdf"] = "application/pdf",
+        [".zip"] = "application/zip",
+    };
+
+    public static string GetMimeType(string filePath)
+    {
+        var ext = Path.GetExtension(filePath);
+
+        if (!string.IsNullOrEmpty(ext) && _map.TryGetValue(ext, out var mime))
+            return mime;
+
+        return "application/octet-stream"; // fallback
+    }
+}
diff --git a/app/FiloExplorer/Helpers/MsgHelper.cs b/app/FiloExplorer/Helpers/MsgHelper.cs
new file mode 100644
index 0000000..5d09dc6
--- /dev/null
+++ b/app/FiloExplorer/Helpers/MsgHelper.cs
@@ -0,0 +1,87 @@
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.Windows.AppNotifications;
+using Microsoft.Windows.AppNotifications.Builder;
+using System;
+using System.Threading.Tasks;
+
+namespace FiloExplorer.Helpers;
+
+public static class MsgHelper
+{
+    public static async Task ShowMessageDialogAsync(string title, string message, XamlRoot xamlRoot)
+    {
+        var dialog = new ContentDialog
+        {
+            Title = title,
+            Content = message,
+            CloseButtonText = "OK",
+            XamlRoot = xamlRoot,
+        };
+
+        await dialog.ShowAsync();
+    }
+
+    public static async Task<bool> ShowConfirmationDialogAsync(string title, string message, XamlRoot xamlRoot)
+    {
+        var dialog = new ContentDialog
+        {
+            Title = title,
+            Content = message,
+            PrimaryButtonText = "Yes",
+            SecondaryButtonText = "No",
+            DefaultButton = ContentDialogButton.Primary,
+            XamlRoot = xamlRoot
+        };
+        var result = await dialog.ShowAsync();
+        return result == ContentDialogResult.Primary;
+    }
+
+    public static async Task<string?> ShowPasswordDialogAsync(XamlRoot xamlRoot)
+    {
+        var passwordBox = new PasswordBox
+        {
+            PlaceholderText = "Enter container password",
+            Width = 320,
+            Margin = new Thickness(0, 12, 0, 0)
+        };
+
+        var content = new StackPanel
+        {
+            Spacing = 8,
+            Children =
+            {
+                new TextBlock
+                {
+                    Text = "This container is encrypted with AES-256.\nPlease enter the correct password to unlock it.",
+                    TextWrapping = TextWrapping.Wrap,
+                    Margin = new Thickness(0, 0, 0, 8)
+                },
+                passwordBox
+            }
+        };
+
+        var dialog = new ContentDialog
+        {
+            Title = "Encrypted Filo Container",
+            Content = content,
+            PrimaryButtonText = "Unlock",
+            SecondaryButtonText = "Cancel",
+            DefaultButton = ContentDialogButton.Primary,
+            XamlRoot = xamlRoot
+        };
+
+        var result = await dialog.ShowAsync();
+        return result == ContentDialogResult.Primary ? passwordBox.Password?.Trim() : null;
+    }
+
+    public static void ShowToast(string title, string message)
+    {
+        var content = new AppNotificationBuilder()
+            .AddText(title)
+            .AddText(message)
+            .BuildNotification();
+
+        AppNotificationManager.Default.Show(content);
+    }
+}
\ No newline at end of file
diff --git a/app/FiloExplorer/MainWindow.xaml b/app/FiloExplorer/MainWindow.xaml
new file mode 100644
index 0000000..ca383b1
--- /dev/null
+++ b/app/FiloExplorer/MainWindow.xaml
@@ -0,0 +1,96 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Window
+    x:Class="FiloExplorer.MainWindow"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:FiloExplorer"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d"
+    Title="Filo Container">
+
+    <Window.SystemBackdrop>
+        <MicaBackdrop Kind="BaseAlt"/>
+    </Window.SystemBackdrop>
+
+    <Grid>
+        <!-- Custom Title Bar Area -->
+        <Grid x:Name="AppTitleBar" 
+              Height="48" 
+              VerticalAlignment="Top">
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="Auto"/>
+                <ColumnDefinition Width="*"/>
+                <ColumnDefinition Width="Auto"/>
+            </Grid.ColumnDefinitions>
+
+            <!-- App Icon + Title -->
+            <StackPanel Orientation="Horizontal" 
+                        Spacing="12" 
+                        Margin="16,0,0,0" 
+                        VerticalAlignment="Center">
+                <Image Source="ms-appx:///Assets/AppIcon.png" 
+                       Width="24" Height="24"/>
+                <TextBlock x:Name="AppTitleText" 
+                           Text="Filo Explorer" 
+                           Style="{ThemeResource CaptionTextBlockStyle}"
+                           FontWeight="SemiBold"
+                           VerticalAlignment="Center"/>
+            </StackPanel>
+
+            <!-- MenuBar will sit below or integrated -->
+        </Grid>
+
+        <Grid Margin="0,38,0,0">
+            <Grid.RowDefinitions>
+                <RowDefinition Height="Auto"/>
+                <!-- MenuBar -->
+                <RowDefinition Height="*"/>
+                <!-- Content Frame -->
+            </Grid.RowDefinitions>
+
+            <!-- Modern MenuBar -->
+            <MenuBar Grid.Row="0" 
+                     Margin="12,8,12,0">
+                <MenuBarItem Title="File">
+                    <MenuFlyoutItem x:Name="menuFileNew" 
+                                    Text="New Container" 
+                                    Icon="Document" 
+                                    Click="menuFileNew_Click">
+                        <MenuFlyoutItem.KeyboardAccelerators>
+                            <KeyboardAccelerator Modifiers="Control" Key="N"/>
+                        </MenuFlyoutItem.KeyboardAccelerators>
+                    </MenuFlyoutItem>
+                    <MenuFlyoutItem x:Name="menuFileOpen" 
+                                    Text="Open Container..." 
+                                    Icon="OpenFile" 
+                                    Click="menuFileOpen_Click">
+                        <MenuFlyoutItem.KeyboardAccelerators>
+                            <KeyboardAccelerator Modifiers="Control" Key="O"/>
+                        </MenuFlyoutItem.KeyboardAccelerators>
+                    </MenuFlyoutItem>
+                    <MenuFlyoutSeparator />
+                    <MenuFlyoutItem x:Name="menuFileExit" 
+                                    Text="Exit" 
+                                    Click="menuFileExit_Click"/>
+                </MenuBarItem>
+
+                <MenuBarItem Title="Help">
+                    <MenuFlyoutItem x:Name="menuHelpView" 
+                                    Text="View Help" 
+                                    Icon="Help" 
+                                    Click="menuHelpView_Click"/>
+                    <MenuFlyoutSeparator />
+                    <MenuFlyoutItem x:Name="menuHelpAbout" 
+                                    Text="About Filo Explorer" 
+                                    Click="menuHelpAbout_Click"/>
+                </MenuBarItem>
+            </MenuBar>
+
+            <!-- Main Content Frame -->
+            <Frame x:Name="RootFrame" 
+                   Grid.Row="1"
+                   Padding="0"/>
+        </Grid>
+    </Grid>
+</Window>
diff --git a/app/FiloExplorer/MainWindow.xaml.cs b/app/FiloExplorer/MainWindow.xaml.cs
new file mode 100644
index 0000000..bbf8485
--- /dev/null
+++ b/app/FiloExplorer/MainWindow.xaml.cs
@@ -0,0 +1,193 @@
+using FiloExplorer.Views;
+using Microsoft.UI;
+using Microsoft.UI.Text;
+using Microsoft.UI.Windowing;
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Media;
+using Microsoft.Windows.Storage.Pickers;
+using System;
+using System.Threading.Tasks;
+using Windows.Graphics;
+
+namespace FiloExplorer;
+
+/// <summary>
+/// An empty window that can be used on its own or navigated to within a Frame.
+/// </summary>
+public sealed partial class MainWindow : Window
+{
+    public MainWindow()
+    {
+        InitializeComponent();
+
+        // Modern Fluent Title Bar Setup
+        ExtendsContentIntoTitleBar = true;
+        SetTitleBar(AppTitleBar);   // Drag region
+
+        AppWindow.Title = "Filo Explorer";
+        AppWindow.Resize(new SizeInt32(1100, 720));
+
+        // Prefer Mica + Dark theme for premium feel
+        //AppWindow.TitleBar.PreferredTheme = TitleBarTheme.Dark;
+
+        RootFrame.Navigate(typeof(MainPage));
+    }
+
+    private void menuFileNew_Click(object sender, RoutedEventArgs e)
+    {
+        RootFrame.Navigate(typeof(NewPage));
+    }
+
+    private async void menuFileOpen_Click(object sender, RoutedEventArgs e)
+    {
+        var picker = new FileOpenPicker(this.RootFrame.XamlRoot.ContentIslandEnvironment.AppWindowId);
+        picker.FileTypeFilter.Add(".filo");
+
+        var file = picker.PickSingleFileAsync().GetAwaiter().GetResult();
+        if (file != null)
+        {
+            RootFrame.Navigate(typeof(ViewPage), file.Path);
+        }
+    }
+
+    private void menuFileExit_Click(object sender, RoutedEventArgs e)
+    {
+        Close();
+    }
+
+    private void menuHelpView_Click(object sender, RoutedEventArgs e)
+    {
+        RootFrame.Navigate(typeof(HelpPage));
+    }
+
+    private async void menuHelpAbout_Click(object sender, RoutedEventArgs e)
+    {
+        await ShowAboutDialogAsync();
+    }
+
+    private async Task ShowAboutDialogAsync()
+    {
+        var aboutContent = new StackPanel
+        {
+            Spacing = 24,
+            HorizontalAlignment = HorizontalAlignment.Center,
+            MaxWidth = 420
+        };
+
+        // App Icon + Name
+        var header = new StackPanel
+        {
+            Orientation = Orientation.Horizontal,
+            Spacing = 16,
+            HorizontalAlignment = HorizontalAlignment.Center
+        };
+
+        header.Children.Add(new Border
+        {
+            Width = 80,
+            Height = 80,
+            CornerRadius = new CornerRadius(16),
+            Background = new SolidColorBrush(Microsoft.UI.Colors.DeepSkyBlue),
+            Child = new Image
+            {
+                Source = new Microsoft.UI.Xaml.Media.Imaging.BitmapImage(new Uri("ms-appx:///Assets/AppLogo.png")),
+                Stretch = Stretch.UniformToFill
+            }
+            //Child = new FontIcon
+            //{
+            //    Glyph = "\uE8A7",        // Container / Archive icon
+            //    FontSize = 48,
+            //    Foreground = new SolidColorBrush(Colors.White)
+            //}
+        });
+
+        var titleStack = new StackPanel
+        {
+            VerticalAlignment = VerticalAlignment.Center,
+            Spacing = 4
+        };
+
+        titleStack.Children.Add(new TextBlock
+        {
+            Text = "Filo Explorer",
+            FontSize = 28,
+            FontWeight = FontWeights.Bold
+        });
+
+        titleStack.Children.Add(new TextBlock
+        {
+            Text = "Version 1.1.0",
+            Foreground = new SolidColorBrush(Microsoft.UI.Colors.Gray),
+            FontSize = 15
+        });
+
+        header.Children.Add(titleStack);
+        aboutContent.Children.Add(header);
+
+        // Description
+        aboutContent.Children.Add(new TextBlock
+        {
+            Text = "A modern, secure, and lightweight archive tool for creating and exploring encrypted .filo containers.",
+            TextWrapping = TextWrapping.Wrap,
+            TextAlignment = TextAlignment.Center,
+            Margin = new Thickness(0, 8, 0, 0)
+        });
+
+        // Features / Info
+        var infoPanel = new StackPanel { Spacing = 12, Margin = new Thickness(0, 20, 0, 0) };
+
+        infoPanel.Children.Add(CreateInfoRow("\uE72E", "AES-256 Encryption"));
+        infoPanel.Children.Add(CreateInfoRow("\uE8A5", "Fast Preview for Images & Media"));
+        infoPanel.Children.Add(CreateInfoRow("\uE8B7", "Built with WinUI 3 & Fluent Design"));
+
+        aboutContent.Children.Add(infoPanel);
+
+        // Footer / Copyright
+        aboutContent.Children.Add(new TextBlock
+        {
+            Text = "© 2026 ManuHub • All rights reserved",
+            FontSize = 13,
+            Foreground = new SolidColorBrush(Microsoft.UI.Colors.Gray),
+            HorizontalAlignment = HorizontalAlignment.Center,
+            Margin = new Thickness(0, 30, 0, 0)
+        });
+
+        var dialog = new ContentDialog
+        {
+            Title = "",                     // We use custom header
+            Content = aboutContent,
+            CloseButtonText = "Close",
+            DefaultButton = ContentDialogButton.Close,
+            XamlRoot = this.Content.XamlRoot,
+            Style = Application.Current.Resources["DefaultContentDialogStyle"] as Style
+        };
+
+        await dialog.ShowAsync();
+    }
+
+    // Helper to create nice info rows
+    private StackPanel CreateInfoRow(string glyph, string text)
+    {
+        return new StackPanel
+        {
+            Orientation = Orientation.Horizontal,
+            Spacing = 12,
+            Children =
+        {
+            new FontIcon
+            {
+                Glyph = glyph,
+                FontSize = 20,
+                Foreground = new SolidColorBrush(Microsoft.UI.Colors.DeepSkyBlue)
+            },
+            new TextBlock
+            {
+                Text = text,
+                VerticalAlignment = VerticalAlignment.Center,
+                FontSize = 15
+            }
+        }
+        };
+    }
+}
diff --git a/app/FiloExplorer/Models/ContainerItem.cs b/app/FiloExplorer/Models/ContainerItem.cs
new file mode 100644
index 0000000..2b90ca5
--- /dev/null
+++ b/app/FiloExplorer/Models/ContainerItem.cs
@@ -0,0 +1,27 @@
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Media;
+using Windows.UI;
+
+namespace FiloExplorer.Models;
+
+public class ContainerItem
+{
+    public string Name { get; set; }
+    public string FullPath { get; set; }
+    public bool IsFolder { get; set; }
+    public long Size { get; set; }
+    public string MimeType { get; set; }
+    public bool Encrypted { get; set; }
+
+    public string DisplaySize => IsFolder ? "" : FormatSize(Size);
+    public Symbol IconSymbol => IsFolder ? Symbol.Folder : Symbol.Document;
+    public Brush IconColor => IsFolder ? new SolidColorBrush(Color.FromArgb(255, 255, 193, 7)) : new SolidColorBrush(Color.FromArgb(255, 0, 120, 215));
+
+    private string FormatSize(long size)
+    {
+        if (size < 1024) return $"{size} B";
+        if (size < 1024 * 1024) return $"{size / 1024.0:F1} KB";
+        if (size < 1024 * 1024 * 1024) return $"{size / 1024.0 / 1024.0:F1} MB";
+        return $"{size / 1024.0 / 1024.0 / 1024.0:F1} GB";
+    }
+}
diff --git a/app/FiloExplorer/Models/PendingItem.cs b/app/FiloExplorer/Models/PendingItem.cs
new file mode 100644
index 0000000..f4ce139
--- /dev/null
+++ b/app/FiloExplorer/Models/PendingItem.cs
@@ -0,0 +1,25 @@
+using Microsoft.UI.Xaml.Media.Imaging;
+using System.ComponentModel;
+
+namespace FiloExplorer.Models;
+
+public class PendingItem : INotifyPropertyChanged
+{
+    public string Name => System.IO.Path.GetFileName(Path);
+    public string Path { get; set; }
+    public bool IsDirectory { get; set; }
+
+    public string DisplaySize => IsDirectory ? "" : FormatSize(new System.IO.FileInfo(Path).Length);
+
+    public BitmapImage? Thumbnail { get; set; }
+
+    public event PropertyChangedEventHandler? PropertyChanged;
+
+    private string FormatSize(long size)
+    {
+        if (size < 1024) return $"{size} B";
+        if (size < 1024 * 1024) return $"{size / 1024.0:F1} KB";
+        if (size < 1024 * 1024 * 1024) return $"{size / 1024.0 / 1024.0:F1} MB";
+        return $"{size / 1024.0 / 1024.0 / 1024.0:F1} GB";
+    }
+}
diff --git a/app/FiloExplorer/Package.appxmanifest b/app/FiloExplorer/Package.appxmanifest
new file mode 100644
index 0000000..7f0a229
--- /dev/null
+++ b/app/FiloExplorer/Package.appxmanifest
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<Package
+  xmlns="http://schemas.microsoft.com/appx/manifest/foundation/windows10"
+  xmlns:mp="http://schemas.microsoft.com/appx/2014/phone/manifest"
+  xmlns:uap="http://schemas.microsoft.com/appx/manifest/uap/windows10"
+  xmlns:rescap="http://schemas.microsoft.com/appx/manifest/foundation/windows10/restrictedcapabilities"
+  xmlns:systemai="http://schemas.microsoft.com/appx/manifest/systemai/windows10"
+  xmlns:com="http://schemas.microsoft.com/appx/manifest/com/windows10"
+  IgnorableNamespaces="uap rescap systemai com">
+
+  <Identity Name="FiloExplorer" Publisher="CN=8F09EC4C-C217-4E2F-BC6D-865A31F7EE04" Version="1.0.1.0" />
+
+  <mp:PhoneIdentity PhoneProductId="abc86f69-03e8-40f6-a574-2369d0d7c78c" PhonePublisherId="00000000-0000-0000-0000-000000000000"/>
+
+  <Properties>
+    <DisplayName>Filo Explorer</DisplayName>
+    <PublisherDisplayName>ManuHub</PublisherDisplayName>
+    <Logo>Assets\StoreLogo.png</Logo>
+  </Properties>
+
+  <Dependencies>
+    <TargetDeviceFamily Name="Windows.Universal" MinVersion="10.0.17763.0" MaxVersionTested="10.0.26226.0" />
+    <TargetDeviceFamily Name="Windows.Desktop" MinVersion="10.0.17763.0" MaxVersionTested="10.0.26226.0" />
+  </Dependencies>
+
+  <Resources>
+    <Resource Language="x-generate"/>
+  </Resources>
+
+  <Applications>
+    <Application Id="App" Executable="$targetnametoken$.exe" EntryPoint="$targetentrypoint$">
+      <uap:VisualElements
+        DisplayName="Filo Explorer"
+        Description="Fast, Flexible, Multi-file Container"
+        BackgroundColor="transparent"
+        Square150x150Logo="Assets\Square150x150Logo.png"
+        Square44x44Logo="Assets\Square44x44Logo.png">
+        <uap:DefaultTile Wide310x150Logo="Assets\Wide310x150Logo.png"  Square71x71Logo="Assets\SmallTile.png" Square310x310Logo="Assets\LargeTile.png"/>
+        <uap:SplashScreen Image="Assets\SplashScreen.png" />
+      </uap:VisualElements>
+		<Extensions>
+			<!-- Register COM CLSID -->
+			<com:Extension Category="windows.comServer">
+				<com:ComServer>
+					<com:ExeServer Executable="FiloExplorer\FiloExplorer.exe" DisplayName="$targetnametoken$" Arguments="----AppNotificationActivated:">
+						<!-- Example path to executable: CommunityToolkit.Maui.Sample\CommunityToolkit.Maui.Sample.exe -->
+						<com:Class Id="6e919706-2634-4d97-a93c-2213b2acc444" />
+					</com:ExeServer>
+				</com:ComServer>
+			</com:Extension>
+		</Extensions>
+    </Application>
+  </Applications>
+
+  <Capabilities>
+    <rescap:Capability Name="runFullTrust" />
+    <systemai:Capability Name="systemAIModels"/>
+  </Capabilities>
+</Package>
diff --git a/app/FiloExplorer/Properties/launchSettings.json b/app/FiloExplorer/Properties/launchSettings.json
new file mode 100644
index 0000000..752e0cf
--- /dev/null
+++ b/app/FiloExplorer/Properties/launchSettings.json
@@ -0,0 +1,10 @@
+{
+  "profiles": {
+    "FiloExplorer (Package)": {
+      "commandName": "MsixPackage"
+    },
+    "FiloExplorer (Unpackaged)": {
+      "commandName": "MsixPackage"
+    }
+  }
+}
\ No newline at end of file
diff --git a/app/FiloExplorer/Views/HelpPage.xaml b/app/FiloExplorer/Views/HelpPage.xaml
new file mode 100644
index 0000000..befefbc
--- /dev/null
+++ b/app/FiloExplorer/Views/HelpPage.xaml
@@ -0,0 +1,229 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Page
+    x:Class="FiloExplorer.Views.HelpPage"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:FiloExplorer.Views"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d">
+
+    <Grid Padding="40,20">
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto"/>
+            <RowDefinition Height="*"/>
+        </Grid.RowDefinitions>
+
+        <!-- Top CommandBar with Back Button -->
+        <CommandBar Grid.Row="0" DefaultLabelPosition="Right">
+            <CommandBar.PrimaryCommands>
+                <AppBarButton Icon="Back" 
+                              Label="Back" 
+                              Click="BackButton_Click"/>
+            </CommandBar.PrimaryCommands>
+
+            <CommandBar.Content>
+                <TextBlock Text="Help &amp; Support" 
+                           Style="{ThemeResource TitleTextBlockStyle}"
+                           Margin="0,0,0,0"
+                           VerticalAlignment="Center"/>
+            </CommandBar.Content>
+        </CommandBar>
+
+        <!-- Main Content -->
+        <ScrollViewer Grid.Row="1">
+            <StackPanel Spacing="40" MaxWidth="900" HorizontalAlignment="Left">
+
+                <!-- Introduction -->
+                <StackPanel Spacing="12">
+                    <TextBlock Text="Welcome to Filo Explorer" 
+                               Style="{ThemeResource TitleLargeTextBlockStyle}"
+                               FontWeight="SemiBold"/>
+
+                    <TextBlock Text="Filo Explorer is a modern, secure container application built on the Filo 1.1.0 library. It allows you to create encrypted archives (.filo files) and securely view, preview, and extract their contents."
+                               TextWrapping="Wrap"
+                               Style="{ThemeResource BodyTextBlockStyle}"/>
+                </StackPanel>
+
+                <!-- Core Capabilities using Filo Package -->
+                <StackPanel Spacing="20">
+                    <TextBlock Text="Filo Package Capabilities" 
+                               Style="{ThemeResource SubtitleTextBlockStyle}"
+                               FontWeight="SemiBold"/>
+
+                    <Grid ColumnSpacing="24" RowSpacing="20">
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="*"/>
+                            <ColumnDefinition Width="*"/>
+                        </Grid.ColumnDefinitions>
+
+                        <!-- Create -->
+                        <Border Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
+                                Padding="24" CornerRadius="8">
+                            <StackPanel Spacing="16">
+                                <FontIcon Glyph="&#xE710;" FontSize="36" 
+                                          Foreground="{ThemeResource AccentFillColorDefaultBrush}"/>
+                                <TextBlock Text="Create Secure Container" FontWeight="SemiBold" FontSize="18"/>
+                                <TextBlock Text="Using FiloWriter with AES-256 encryption support. Add individual files or entire folders recursively. Optional password protection via WithPassword()." 
+                                           TextWrapping="Wrap"
+                                           Foreground="{ThemeResource TextFillColorSecondaryBrush}"/>
+                            </StackPanel>
+                        </Border>
+
+                        <!-- View -->
+                        <Border Grid.Column="1" Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
+                                Padding="24" CornerRadius="8">
+                            <StackPanel Spacing="16">
+                                <FontIcon Glyph="&#xE8A5;" FontSize="36" 
+                                          Foreground="{ThemeResource AccentFillColorDefaultBrush}"/>
+                                <TextBlock Text="Browse &amp; Preview" FontWeight="SemiBold" FontSize="18"/>
+                                <TextBlock Text="Powered by FiloReader and FiloStream. Supports fast preview of images, video, and audio without full extraction. ListFiles() provides complete directory structure." 
+                                           TextWrapping="Wrap"
+                                           Foreground="{ThemeResource TextFillColorSecondaryBrush}"/>
+                            </StackPanel>
+                        </Border>
+                    </Grid>
+                </StackPanel>
+
+                <!-- How to Use -->
+                <StackPanel Spacing="20">
+                    <TextBlock Text="How to Use" 
+                               Style="{ThemeResource SubtitleTextBlockStyle}"
+                               FontWeight="SemiBold"/>
+
+                    <Grid ColumnSpacing="20" RowSpacing="16">
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="Auto"/>
+                            <RowDefinition Height="Auto"/>
+                        </Grid.RowDefinitions>
+
+                        <StackPanel Spacing="12">
+                            <TextBlock Text="1. Creating a New Container" FontWeight="SemiBold"/>
+                            <TextBlock Text="• Click 'Create Filo Container' from the main menu or home screen&#x0a;• Add files and folders&#x0a;• Optionally set a password in the right pane&#x0a;• Click 'Create Filo container'" 
+                                       TextWrapping="Wrap" 
+                                       Foreground="{ThemeResource TextFillColorSecondaryBrush}"/>
+                        </StackPanel>
+
+                        <StackPanel Spacing="12" Grid.Row="1">
+                            <TextBlock Text="2. Opening and Viewing" FontWeight="SemiBold"/>
+                            <TextBlock Text="• Click 'Open Filo Container'&#x0a;• Select a .filo file&#x0a;• Enter password if the container is encrypted (AES256 header)&#x0a;• Browse folders and preview files directly" 
+                                       TextWrapping="Wrap" 
+                                       Foreground="{ThemeResource TextFillColorSecondaryBrush}"/>
+                        </StackPanel>
+                    </Grid>
+                </StackPanel>
+
+                <!-- Features -->
+                <StackPanel Spacing="20">
+                    <TextBlock Text="Key Features" 
+                               Style="{ThemeResource SubtitleTextBlockStyle}"
+                               FontWeight="SemiBold"/>
+
+                    <Grid ColumnSpacing="20" RowSpacing="16">
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="Auto"/>
+                            <ColumnDefinition Width="*"/>
+                        </Grid.ColumnDefinitions>
+
+                        <StackPanel Spacing="20">
+                            <StackPanel Orientation="Horizontal" Spacing="16">
+                                <FontIcon Glyph="&#xE72E;" FontSize="24" Foreground="#00B7C3"/>
+                                <StackPanel>
+                                    <TextBlock Text="AES-256 Encryption" FontWeight="SemiBold"/>
+                                    <TextBlock Text="Strong encryption for your sensitive files" 
+                                               Foreground="{ThemeResource TextFillColorSecondaryBrush}"/>
+                                </StackPanel>
+                            </StackPanel>
+
+                            <StackPanel Orientation="Horizontal" Spacing="16">
+                                <FontIcon Glyph="&#xE8A7;" FontSize="24" Foreground="#00B7C3"/>
+                                <StackPanel>
+                                    <TextBlock Text="Rich Preview" FontWeight="SemiBold"/>
+                                    <TextBlock Text="Preview images, videos, and audio directly" 
+                                               Foreground="{ThemeResource TextFillColorSecondaryBrush}"/>
+                                </StackPanel>
+                            </StackPanel>
+                        </StackPanel>
+
+                        <StackPanel Spacing="20" Grid.Column="1">
+                            <StackPanel Orientation="Horizontal" Spacing="16">
+                                <FontIcon Glyph="&#xE8B7;" FontSize="24" Foreground="#00B7C3"/>
+                                <StackPanel>
+                                    <TextBlock Text="Fluent Design" FontWeight="SemiBold"/>
+                                    <TextBlock Text="Modern WinUI 3 interface with Mica &amp; Acrylic" 
+                                               Foreground="{ThemeResource TextFillColorSecondaryBrush}"/>
+                                </StackPanel>
+                            </StackPanel>
+
+                            <StackPanel Orientation="Horizontal" Spacing="16">
+                                <FontIcon Glyph="&#xE896;" FontSize="24" Foreground="#00B7C3"/>
+                                <StackPanel>
+                                    <TextBlock Text="Easy Extraction" FontWeight="SemiBold"/>
+                                    <TextBlock Text="Extract individual files or entire folders" 
+                                               Foreground="{ThemeResource TextFillColorSecondaryBrush}"/>
+                                </StackPanel>
+                            </StackPanel>
+                        </StackPanel>
+                    </Grid>
+                </StackPanel>
+
+                <!-- Keyboard Shortcuts -->
+                <StackPanel Spacing="20">
+                    <TextBlock Text="Keyboard Shortcuts" 
+                               Style="{ThemeResource SubtitleTextBlockStyle}"
+                               FontWeight="SemiBold"/>
+
+                    <Border Background="{ThemeResource CardBackgroundFillColorDefaultBrush}" 
+                            Padding="24" CornerRadius="8">
+                        <Grid ColumnSpacing="40" RowSpacing="12">
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition Width="Auto"/>
+                                <ColumnDefinition Width="*"/>
+                            </Grid.ColumnDefinitions>
+
+                            <StackPanel Spacing="12">
+                                <TextBlock Text="Ctrl + N" FontFamily="Consolas" FontWeight="SemiBold"/>
+                                <TextBlock Text="Ctrl + O" FontFamily="Consolas" FontWeight="SemiBold"/>
+                                <TextBlock Text="Alt + Left Arrow" FontFamily="Consolas" FontWeight="SemiBold"/>
+                                <TextBlock Text="F1" FontFamily="Consolas" FontWeight="SemiBold"/>
+                            </StackPanel>
+
+                            <StackPanel Spacing="12" Grid.Column="1">
+                                <TextBlock Text="Create new container"/>
+                                <TextBlock Text="Open existing container"/>
+                                <TextBlock Text="Go back"/>
+                                <TextBlock Text="Open Help"/>
+                            </StackPanel>
+                        </Grid>
+                    </Border>
+                </StackPanel>
+
+                <!-- Footer -->
+                <Border Background="{ThemeResource CardBackgroundFillColorDefaultBrush}" 
+                        Padding="24" CornerRadius="8">
+                    <StackPanel Spacing="8">
+                        <TextBlock Text="About Filo 1.1.0" FontWeight="SemiBold"/>
+                        <TextBlock Text="Filo is a lightweight, high-performance container format with built-in AES-256 encryption support. FiloReader and FiloWriter provide simple and secure APIs for working with .filo containers."
+                                   TextWrapping="Wrap"
+                                   Foreground="{ThemeResource TextFillColorSecondaryBrush}"/>
+                    </StackPanel>
+                </Border>
+
+                <!-- Support -->
+                <StackPanel Spacing="16">
+                    <TextBlock Text="Need More Help?" 
+                               Style="{ThemeResource SubtitleTextBlockStyle}"
+                               FontWeight="SemiBold"/>
+
+                    <TextBlock Text="If you have any questions or encounter issues, feel free to reach out." 
+                               TextWrapping="Wrap"
+                               Foreground="{ThemeResource TextFillColorSecondaryBrush}"/>
+
+                    <HyperlinkButton Content="Contact Support" 
+                                     NavigateUri="mailto:support@yourdomain.com"/>
+                </StackPanel>
+
+            </StackPanel>
+        </ScrollViewer>
+    </Grid>
+</Page>
diff --git a/app/FiloExplorer/Views/HelpPage.xaml.cs b/app/FiloExplorer/Views/HelpPage.xaml.cs
new file mode 100644
index 0000000..ab0ac06
--- /dev/null
+++ b/app/FiloExplorer/Views/HelpPage.xaml.cs
@@ -0,0 +1,23 @@
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+
+namespace FiloExplorer.Views;
+
+/// <summary>
+/// An empty page that can be used on its own or navigated to within a Frame.
+/// </summary>
+public sealed partial class HelpPage : Page
+{
+    public HelpPage()
+    {
+        InitializeComponent();
+    }
+
+    private void BackButton_Click(object sender, RoutedEventArgs e)
+    {
+        if (Frame.CanGoBack)
+        {
+            Frame.GoBack();
+        }
+    }
+}
diff --git a/app/FiloExplorer/Views/MainPage.xaml b/app/FiloExplorer/Views/MainPage.xaml
new file mode 100644
index 0000000..3530f70
--- /dev/null
+++ b/app/FiloExplorer/Views/MainPage.xaml
@@ -0,0 +1,109 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Page
+    x:Class="FiloExplorer.Views.MainPage"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:FiloExplorer.Views"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d">
+
+    <Grid >
+        <ScrollViewer VerticalScrollBarVisibility="Auto">
+            <StackPanel Spacing="32" 
+                        HorizontalAlignment="Center" 
+                        VerticalAlignment="Center"
+                        MaxWidth="800"
+                        Padding="40">
+
+                <!-- Hero Section -->
+                <StackPanel Spacing="16" HorizontalAlignment="Center">
+                    <Border Width="120" Height="120" 
+                            CornerRadius="60" 
+                            Background="DeepSkyBlue"
+                            HorizontalAlignment="Center">
+                        <Image Source="/Assets/AppLogo.png"  Height="128" Width="128" Margin="-7"/>
+                    </Border>
+
+                    <TextBlock Text="Filo Explorer" 
+                               FontSize="42" 
+                               FontWeight="Bold" 
+                               HorizontalAlignment="Center"
+                               Foreground="{ThemeResource TextFillColorPrimaryBrush}"/>
+
+                    <TextBlock Text="Secure • Fast • Beautiful" 
+                               FontSize="18" 
+                               Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                               HorizontalAlignment="Center"
+                               TextAlignment="Center"/>
+                </StackPanel>
+
+                <!-- Action Cards -->
+                <Grid ColumnSpacing="24" RowSpacing="24">
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="*"/>
+                        <ColumnDefinition Width="*"/>
+                    </Grid.ColumnDefinitions>
+
+                    <!-- Create New Card -->
+                    <Button x:Name="CreateCard" 
+                            Click="New_Click"
+                            Padding="32"
+                            Background="{ThemeResource CardBackgroundFillColorDefaultBrush}">
+                        <StackPanel Spacing="20" HorizontalAlignment="Center" >
+                            <FontIcon Glyph="&#xE710;" 
+                                      FontSize="48" 
+                                      Foreground="{ThemeResource AccentFillColorDefaultBrush}"/>
+                            <TextBlock Text="Create Filo Container" 
+                                       FontSize="20" 
+                                       FontWeight="SemiBold"
+                                       HorizontalAlignment="Center"/>
+                            <TextBlock Text="Build a new encrypted .filo container from files and folders" 
+                                       TextAlignment="Center"
+                                       Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                                       TextWrapping="Wrap"/>
+                        </StackPanel>
+                    </Button>
+
+                    <!-- Open Existing Card -->
+                    <Button Grid.Column="1"                        
+                            x:Name="OpenCard" 
+                            Click="Open_Click"
+                            Padding="32"
+                            Background="{ThemeResource CardBackgroundFillColorDefaultBrush}">
+                        <StackPanel Spacing="20" HorizontalAlignment="Center">
+                            <FontIcon Glyph="&#xE8A5;" 
+                                      FontSize="48" 
+                                      Foreground="{ThemeResource AccentFillColorDefaultBrush}"/>
+                            <TextBlock Text="Open Filo Container" 
+                                       FontSize="20" 
+                                       FontWeight="SemiBold"
+                                       HorizontalAlignment="Center"/>
+                            <TextBlock Text="View, preview, and extract files from an existing .filo container" 
+                                       TextAlignment="Center"
+                                       Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                                       TextWrapping="Wrap"/>
+                        </StackPanel>
+                    </Button>
+                </Grid>
+
+                <!-- Recent or Tips -->
+                <Border Background="{ThemeResource CardBackgroundFillColorDefaultBrush}" 
+                        Padding="24" 
+                        CornerRadius="8">
+                    <StackPanel>
+                        <TextBlock Text="Quick Tips" 
+                                   FontWeight="SemiBold" 
+                                   Margin="0,0,0,12"/>
+                        <TextBlock Text="• Use Ctrl+N to quickly create a new container" 
+                                   Foreground="{ThemeResource TextFillColorSecondaryBrush}"/>
+                        <TextBlock Text="• Supported formats: Images, Videos, Documents, and more" 
+                                   Foreground="{ThemeResource TextFillColorSecondaryBrush}"/>
+                        <TextBlock Text="• All data is encrypted with AES-256 when password is set" 
+                                   Foreground="{ThemeResource TextFillColorSecondaryBrush}"/>
+                    </StackPanel>
+                </Border>
+            </StackPanel>
+        </ScrollViewer>
+    </Grid>
+</Page>
diff --git a/app/FiloExplorer/Views/MainPage.xaml.cs b/app/FiloExplorer/Views/MainPage.xaml.cs
new file mode 100644
index 0000000..d95443e
--- /dev/null
+++ b/app/FiloExplorer/Views/MainPage.xaml.cs
@@ -0,0 +1,37 @@
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.Windows.Storage.Pickers;
+using System;
+
+// To learn more about WinUI, the WinUI project structure,
+// and more about our project templates, see: http://aka.ms/winui-project-info.
+
+namespace FiloExplorer.Views;
+
+/// <summary>
+/// An empty page that can be used on its own or navigated to within a Frame.
+/// </summary>
+public sealed partial class MainPage : Page
+{
+    public MainPage()
+    {
+        InitializeComponent();
+    }
+
+    private void New_Click(object sender, RoutedEventArgs e)
+    {
+        Frame.Navigate(typeof(NewPage));
+    }
+
+    private async void Open_Click(object sender, RoutedEventArgs e)
+    {
+        var picker = new FileOpenPicker(this.XamlRoot.ContentIslandEnvironment.AppWindowId);
+        picker.FileTypeFilter.Add(".filo");
+
+        var file = await picker.PickSingleFileAsync();
+        if (file != null)
+        {
+            Frame.Navigate(typeof(ViewPage), file.Path);
+        }
+    }
+}
diff --git a/app/FiloExplorer/Views/NewPage.xaml b/app/FiloExplorer/Views/NewPage.xaml
new file mode 100644
index 0000000..b287bd4
--- /dev/null
+++ b/app/FiloExplorer/Views/NewPage.xaml
@@ -0,0 +1,221 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Page
+    x:Class="FiloExplorer.Views.NewPage"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:FiloExplorer.Views"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:models="using:FiloExplorer.Models"
+    mc:Ignorable="d">
+
+    <Grid>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto"/>
+            <!-- Toolbar -->
+            <RowDefinition Height="*"/>
+            <!-- Main Content -->
+        </Grid.RowDefinitions>
+
+        <!-- CommandBar -->
+        <CommandBar Grid.Row="0" DefaultLabelPosition="Right">
+            <CommandBar.PrimaryCommands>
+                <!-- Back Button -->
+                <AppBarButton Icon="Back" 
+                      Label="Back" 
+                      ToolTipService.ToolTip="Go back to home"
+                      Click="BackButton_Click"/>
+                <AppBarSeparator />
+                <AppBarButton Icon="Save" 
+                              Label="Create container" 
+                              ToolTipService.ToolTip="Save as .filo container"
+                              Click="Create_Click"/>
+                <AppBarSeparator />
+                <AppBarButton Icon="Add" 
+                              Label="Add Files" 
+                              ToolTipService.ToolTip="Add one or more files"
+                              Click="AddFile_Click"/>
+                <AppBarButton Icon="Folder" 
+                              Label="Add Folder" 
+                              ToolTipService.ToolTip="Add a folder recursively"
+                              Click="AddFolder_Click"/>
+                <AppBarSeparator />
+                <AppBarButton Icon="Delete" 
+                              Label="Remove" 
+                              ToolTipService.ToolTip="Remove selected item"
+                              Click="RemoveSelected_Click"/>
+                <AppBarButton Icon="Clear" 
+                              Label="Clear All" 
+                              ToolTipService.ToolTip="Clear all pending items"
+                              Click="ClearAll_Click"/>
+            </CommandBar.PrimaryCommands>
+
+            <CommandBar.Content>
+                <TextBlock Text="Create Filo" 
+                           Style="{ThemeResource TitleTextBlockStyle}"
+                           Margin="16,0,0,0"
+                           VerticalAlignment="Center"/>
+            </CommandBar.Content>
+        </CommandBar>
+
+        <!-- Main Content -->
+        <SplitView x:Name="MainSplitView"
+                   Grid.Row="1"
+                   DisplayMode="Inline"
+                   IsPaneOpen="True"
+                   OpenPaneLength="380"
+                   PanePlacement="Right">
+
+            <!-- Left: Pending Items List -->
+            <SplitView.Content>
+                <Grid>
+                    <ListView x:Name="PendingList"
+                              IsItemClickEnabled="False"
+                              SelectionMode="Single"
+                              Background="{ThemeResource LayerFillColorDefaultBrush}">
+                        <ListView.Header>
+                            <Border Padding="16,12" Background="{ThemeResource CardBackgroundFillColorDefaultBrush}">
+                                <TextBlock Text="Pending Items" 
+                                           Style="{ThemeResource SubtitleTextBlockStyle}"/>
+                            </Border>
+                        </ListView.Header>
+
+                        <ListView.ItemTemplate>
+                            <DataTemplate x:DataType="models:PendingItem">
+                                <Grid Padding="12" ColumnSpacing="12">
+                                    <Grid.ColumnDefinitions>
+                                        <ColumnDefinition Width="40"/>
+                                        <ColumnDefinition Width="*"/>
+                                        <ColumnDefinition Width="Auto"/>
+                                    </Grid.ColumnDefinitions>
+
+                                    <Image Source="{x:Bind Thumbnail, Mode=OneWay}" 
+                                           Width="32" Height="32"
+                                           Stretch="Uniform"/>
+
+                                    <StackPanel Grid.Column="1" VerticalAlignment="Center">
+                                        <TextBlock Text="{x:Bind Name}" 
+                                                   Style="{ThemeResource BodyTextBlockStyle}"/>
+                                        <TextBlock Text="{x:Bind Path}" 
+                                                   Style="{ThemeResource CaptionTextBlockStyle}"
+                                                   Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                                                   TextTrimming="CharacterEllipsis"/>
+                                    </StackPanel>
+
+                                    <TextBlock Grid.Column="2"
+                                               Text="{x:Bind DisplaySize}"
+                                               VerticalAlignment="Center"
+                                               Foreground="{ThemeResource TextFillColorSecondaryBrush}"/>
+                                </Grid>
+                            </DataTemplate>
+                        </ListView.ItemTemplate>
+
+                        <!-- Empty State -->
+                        <ListView.ItemContainerStyle>
+                            <Style TargetType="ListViewItem">
+                                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
+                            </Style>
+                        </ListView.ItemContainerStyle>
+                    </ListView>
+
+                    <!-- Empty State Overlay -->
+                    <Grid x:Name="EmptyStateGrid" 
+                          Visibility="Visible"
+                          VerticalAlignment="Center"
+                          HorizontalAlignment="Center">
+                        <StackPanel HorizontalAlignment="Center">
+                            <SymbolIcon Symbol="Add" 
+                                        Foreground="{ThemeResource TextFillColorDisabledBrush}"/>
+                            <TextBlock Text="No items added yet" 
+                                       Margin="0,16,0,4"
+                                       HorizontalAlignment="Center"
+                                       Style="{ThemeResource SubtitleTextBlockStyle}"/>
+                            <TextBlock Text="Click 'Add Files' or 'Add Folder' to begin" 
+                                       Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                                       TextAlignment="Center"/>
+                        </StackPanel>
+                    </Grid>
+                </Grid>
+            </SplitView.Content>
+
+            <!-- Right Pane: Info / Preview -->
+            <SplitView.Pane>
+                <Grid Background="{ThemeResource AcrylicBackgroundFillColorDefaultBrush}" 
+                      Padding="20">
+                    <StackPanel Spacing="20">
+                        <!-- Header -->
+                        <TextBlock Text="Container Settings" 
+                       Style="{ThemeResource SubtitleTextBlockStyle}" 
+                       FontWeight="SemiBold"/>
+
+                        <!-- Output File -->
+                        <StackPanel Spacing="6">
+                            <TextBlock Text="Output File" 
+                                       FontWeight="SemiBold"/>
+                            <TextBlock x:Name="OutputPathText" 
+                                       Text="NewContainer.filo" 
+                                       TextWrapping="WrapWholeWords"
+                                       Foreground="{ThemeResource TextFillColorSecondaryBrush}"/>
+
+                            <Button Content="Change Location" 
+                                    Style="{StaticResource TextBlockButtonStyle}" 
+                                    Click="ChangeOutputPath_Click"
+                                    HorizontalAlignment="Left"
+                                    Margin="0,4,0,0"/>
+                        </StackPanel>
+
+
+                        <!-- Items Summary -->
+                        <StackPanel Spacing="6">
+                            <TextBlock Text="Items to Add" 
+                                       FontWeight="SemiBold"/>
+                            <TextBlock x:Name="ItemCountText" 
+                                       Text="0 items" 
+                                       Foreground="{ThemeResource TextFillColorSecondaryBrush}"/>
+                        </StackPanel>
+
+                        <!-- Estimated Size -->
+                        <StackPanel Spacing="6">
+                            <TextBlock Text="Estimated Size" 
+                                       FontWeight="SemiBold"/>
+                            <TextBlock x:Name="EstimatedSizeText" 
+                                       Text="Calculating..." 
+                                       Foreground="{ThemeResource TextFillColorSecondaryBrush}"/>
+                        </StackPanel>
+
+                        <!-- Password Section -->
+                        <StackPanel Spacing="8">
+                            <TextBlock Text="Encryption Password" 
+                                       FontWeight="SemiBold"/>
+
+                            <TextBlock Text="Your files will be encrypted with AES-256" 
+                                       FontSize="13"
+                                       Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                                       TextWrapping="Wrap"/>
+
+                            <PasswordBox x:Name="PasswordText" 
+                                         PlaceholderText="Enter password (optional)"
+                                         PasswordRevealMode="Peek"
+                                         Margin="0,4,0,0"/>
+
+                            <TextBlock Text="Leave empty for no encryption" 
+                                       FontSize="12"
+                                       Foreground="{ThemeResource TextFillColorTertiaryBrush}"
+                                       Margin="0,4,0,0"/>
+                        </StackPanel>
+
+                        <!-- Create Button (Big & Prominent) -->
+                        <Button Content="Create Filo Container" 
+                                Style="{StaticResource AccentButtonStyle}"
+                                HorizontalAlignment="Stretch"
+                                Margin="0,20,0,0"
+                                Click="Create_Click"
+                                Height="48"
+                                FontSize="16"
+                                FontWeight="SemiBold"/>
+                    </StackPanel>
+                </Grid>
+            </SplitView.Pane>
+        </SplitView>
+    </Grid>
+</Page>
diff --git a/app/FiloExplorer/Views/NewPage.xaml.cs b/app/FiloExplorer/Views/NewPage.xaml.cs
new file mode 100644
index 0000000..168bdaa
--- /dev/null
+++ b/app/FiloExplorer/Views/NewPage.xaml.cs
@@ -0,0 +1,219 @@
+using FiloExplorer.Helpers;
+using FiloExplorer.Models;
+using ManuHub.Filo;
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Media.Imaging;
+using Microsoft.Windows.Storage.Pickers;
+using System;
+using System.Collections.ObjectModel;
+using System.IO;
+using System.Threading.Tasks;
+using Windows.Storage;
+using Windows.Storage.FileProperties;
+using static FiloExplorer.Helpers.MsgHelper;
+
+namespace FiloExplorer.Views;
+
+/// <summary>
+/// An empty page that can be used on its own or navigated to within a Frame.
+/// </summary>
+public sealed partial class NewPage : Page
+{
+    private readonly ObservableCollection<PendingItem> _pendingItems = new();
+
+    public NewPage()
+    {
+        InitializeComponent();
+        PendingList.ItemsSource = _pendingItems;
+
+        // Show/hide empty state
+        _pendingItems.CollectionChanged += (s, e) =>
+        {
+            EmptyStateGrid.Visibility = _pendingItems.Count == 0
+                ? Visibility.Visible : Visibility.Collapsed;
+
+            UpdateInfoPanel();
+        };
+    }
+
+    private void UpdateInfoPanel()
+    {
+        ItemCountText.Text = $"{_pendingItems.Count} item{(_pendingItems.Count != 1 ? "s" : "")}";
+        // You can add estimated size calculation here later
+    }
+
+    // ====================== Add Files ======================
+    private async void AddFile_Click(object sender, RoutedEventArgs e)
+    {
+        var picker = new FileOpenPicker(this.XamlRoot.ContentIslandEnvironment.AppWindowId);
+        picker.FileTypeFilter.Add("*");
+
+        var files = await picker.PickMultipleFilesAsync();
+        if (files == null) return;
+
+        foreach (var file in files)
+        {
+            var item = new PendingItem
+            {
+                Path = file.Path,
+                //Name = file.DisplayName + file.FileType,
+                IsDirectory = false,
+                
+                Thumbnail = await GetFileThumbnailAsync(file.Path)
+            };
+
+            _pendingItems.Add(item);
+        }
+    }
+
+    // ====================== Add Folder ======================
+    private async void AddFolder_Click(object sender, RoutedEventArgs e)
+    {
+        var picker = new FolderPicker(this.XamlRoot.ContentIslandEnvironment.AppWindowId);
+
+        var folder = await picker.PickSingleFolderAsync();
+        if (folder == null) return;
+
+        var item = new PendingItem
+        {
+            Path = folder.Path,
+            //Name = folder.DisplayName,
+            IsDirectory = true,
+            Thumbnail = await GetFolderThumbnailAsync(folder.Path)
+        };
+
+        _pendingItems.Add(item);
+    }
+
+    // ====================== Thumbnail Helper (Async) ======================
+    private async Task<BitmapImage?> GetFileThumbnailAsync(string path)
+    {
+        try
+        {
+            var storageFile = await StorageFile.GetFileFromPathAsync(path);
+            var storageItemThumbnail = await storageFile.GetThumbnailAsync(ThumbnailMode.ListView, 32, ThumbnailOptions.UseCurrentScale);
+            var bitmapImage = new BitmapImage();
+            bitmapImage.SetSource(storageItemThumbnail);
+            return bitmapImage;
+        }
+        catch (Exception)
+        {
+            return null;
+        }
+    }
+
+    private async Task<BitmapImage?> GetFolderThumbnailAsync(string path)
+    {
+        try
+        {
+            var storageFolder = await StorageFolder.GetFolderFromPathAsync(path);
+            var storageItemThumbnail = await storageFolder.GetThumbnailAsync(ThumbnailMode.ListView, 32, ThumbnailOptions.UseCurrentScale);
+            var bitmapImage = new BitmapImage();
+            bitmapImage.SetSource(storageItemThumbnail);
+            return bitmapImage;
+        }
+        catch (Exception)
+        {
+            return null;
+        }
+    }
+
+    // ====================== Create Container ======================
+    private async void Create_Click(object sender, RoutedEventArgs e)
+    {
+        if (_pendingItems.Count == 0)
+        {
+            await ShowMessageDialogAsync("No items", "Please add at least one file or folder.", this.XamlRoot);
+            return;
+        }
+
+        string password = PasswordText.Password?.Trim() ?? "";
+
+        try
+        {
+            // Choose output path first (better UX)
+            var picker = new FileSavePicker(this.XamlRoot.ContentIslandEnvironment.AppWindowId);
+            picker.DefaultFileExtension = ".filo";
+            picker.FileTypeChoices.Add("Filo Container", new[] { ".filo" });
+            picker.SuggestedFileName = "NewContainer.filo";
+            picker.CommitButtonText = "Save Filo";
+            picker.SuggestedStartLocation = PickerLocationId.DocumentsLibrary;
+            picker.SuggestedFolder = "";
+
+            // Show the picker dialog
+            var file = await picker.PickSaveFileAsync();
+            if (file == null) return;
+
+            string savePath = file.Path;
+            OutputPathText.Text = file.Path;
+
+            var writer = new FiloWriter(savePath);
+
+            if (!string.IsNullOrEmpty(PasswordText.Password))
+            {
+                writer.WithPassword(PasswordText.Password);
+            }
+
+            foreach (var item in _pendingItems)
+            {
+                if (item.IsDirectory)
+                {
+                    writer.AddDirectory(item.Path, Path.GetFileName(item.Path));
+                }
+                else
+                {
+                    writer.AddFile(item.Path, new FileMetadata
+                    {
+                        MimeType = MimeHelper.GetMimeType(item.Path)
+                    });
+                }
+            }
+
+            await writer.WriteAsync();
+
+            await ShowMessageDialogAsync("Success", $"Filo container created successfully!\n\n{file.Path}", this.XamlRoot);
+
+            _pendingItems.Clear();
+            Frame.GoBack();
+        }
+        catch (Exception ex)
+        {
+            await ShowMessageDialogAsync("Error", $"Failed to create container:\n{ex.Message}", this.XamlRoot);
+        }
+    }
+
+    // ====================== Remove & Clear ======================
+    private void RemoveSelected_Click(object sender, RoutedEventArgs e)
+    {
+        if (PendingList.SelectedItem is PendingItem item)
+        {
+            _pendingItems.Remove(item);
+        }
+    }
+
+    private void ClearAll_Click(object sender, RoutedEventArgs e)
+    {
+        _pendingItems.Clear();
+    }
+
+
+
+    private async void BackButton_Click(object sender, RoutedEventArgs e)
+    {
+        if (_pendingItems.Count > 0)
+        {
+            var result = await ShowConfirmationDialogAsync("Unsaved Changes", "You have pending items. Are you sure you want to go back and lose these changes?", this.XamlRoot);
+            if (!result) return;
+        }
+
+        if (Frame.CanGoBack)
+            Frame.GoBack();
+    }
+
+    private async void ChangeOutputPath_Click(object sender, RoutedEventArgs e)
+    {
+        // Fix later
+    }
+
+}
diff --git a/app/FiloExplorer/Views/ViewPage.xaml b/app/FiloExplorer/Views/ViewPage.xaml
new file mode 100644
index 0000000..30f2f15
--- /dev/null
+++ b/app/FiloExplorer/Views/ViewPage.xaml
@@ -0,0 +1,144 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Page
+    x:Class="FiloExplorer.Views.ViewPage"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:FiloExplorer.Views"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
+    xmlns:model="using:FiloExplorer.Models"
+    mc:Ignorable="d">
+
+    <Grid>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto"/>
+            <!-- Toolbar -->
+            <RowDefinition Height="*"/>
+            <!-- Breadcrumb -->
+            <RowDefinition Height="Auto"/>
+            <!-- Main Content -->
+        </Grid.RowDefinitions>
+
+        <!-- Top CommandBar -->
+        <CommandBar Grid.Row="0" DefaultLabelPosition="Right">
+            <CommandBar.PrimaryCommands>
+                <AppBarButton Icon="Back" 
+                              Label="Back" 
+                              ToolTipService.ToolTip="Go back"
+                              Click="BackButton_Click"/>
+                <AppBarSeparator/>
+                <AppBarButton x:Name="AppBarButtonUp" Icon="Up" Label="Up" Click="UpButton_Click" />
+                <AppBarSeparator/>
+                <AppBarButton Icon="Save" Label="Extract" Click="ExtractButton_Click"/>
+                <AppBarButton Icon="SaveLocal" Label="Extract All" Click="ExtractAllButton_Click"/>
+                <AppBarSeparator/>
+                <AppBarButton Icon="Refresh" Label="Refresh" Click="RefreshButton_Click"/>
+            </CommandBar.PrimaryCommands>
+
+            <CommandBar.Content>
+                <TextBlock Text="Filo View" 
+                           Style="{ThemeResource TitleTextBlockStyle}"
+                           Margin="12,0,0,0" VerticalAlignment="Center"/>
+            </CommandBar.Content>
+        </CommandBar>
+
+        <!-- Main Content with SplitView -->
+        <SplitView x:Name="MainSplitView"
+                   Grid.Row="1"
+                   DisplayMode="Inline"
+                   IsPaneOpen="True"
+                   OpenPaneLength="420"
+                   PaneBackground="{ThemeResource LayerFillColorDefaultBrush}">
+
+            <!-- File List Pane -->
+            <SplitView.Pane>
+                <Grid>
+                    <ListView x:Name="FileList"
+                              IsItemClickEnabled="True"
+                              ItemClick="FileList_ItemClick"
+                              SelectionMode="Single"
+                              Background="{ThemeResource LayerFillColorDefaultBrush}">
+                        <ListView.ItemTemplate>
+                            <DataTemplate x:DataType="model:ContainerItem">
+                                <Grid Padding="8" ColumnSpacing="12">
+                                    <Grid.ColumnDefinitions>
+                                        <ColumnDefinition Width="32"/>
+                                        <ColumnDefinition Width="*"/>
+                                        <ColumnDefinition Width="Auto"/>
+                                    </Grid.ColumnDefinitions>
+
+                                    <SymbolIcon Grid.Column="0" 
+                                                Symbol="{x:Bind IconSymbol, Mode=OneWay}" 
+                                                Foreground="{x:Bind IconColor, Mode=OneWay}"/>
+
+                                    <TextBlock Grid.Column="1" 
+                                               Text="{x:Bind Name}" 
+                                               VerticalAlignment="Center"
+                                               TextTrimming="CharacterEllipsis"/>
+
+                                    <TextBlock Grid.Column="2" 
+                                               Text="{x:Bind DisplaySize}" 
+                                               Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                                               VerticalAlignment="Center"
+                                               Margin="12,0,0,0"/>
+                                </Grid>
+                            </DataTemplate>
+                        </ListView.ItemTemplate>
+                    </ListView>
+                </Grid>
+            </SplitView.Pane>
+
+            <!-- Preview Pane -->
+            <SplitView.Content>
+                <Grid Background="{ThemeResource SolidBackgroundFillColorBaseBrush}">
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="Auto"/>
+                        <RowDefinition Height="*"/>
+                    </Grid.RowDefinitions>
+
+                    <!-- Preview Header -->
+                    <Border Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
+                            BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
+                            BorderThickness="0,0,0,1"
+                            Padding="16,12">
+                        <TextBlock x:Name="PreviewHeaderText"
+                                   Text="Preview"
+                                   Style="{ThemeResource SubtitleTextBlockStyle}"/>
+                    </Border>
+
+                    <!-- Preview Content -->
+                    <Grid Grid.Row="1" x:Name="PreviewContent">
+                        <Image x:Name="PreviewImage" 
+                               Stretch="Uniform"
+                               Margin="20"
+                               Visibility="Collapsed"/>
+
+                        <MediaPlayerElement x:Name="MediaPlayerElement" 
+                                            AreTransportControlsEnabled="True"
+                                            Visibility="Collapsed"
+                                            Margin="12"/>
+
+                        <!-- Placeholder when nothing is selected -->
+                        <StackPanel x:Name="NoPreviewPanel"
+                                    VerticalAlignment="Center"
+                                    HorizontalAlignment="Center"
+                                    Visibility="Visible">
+                            <SymbolIcon Symbol="Preview" 
+                                        Foreground="{ThemeResource TextFillColorDisabledBrush}"/>
+                            <TextBlock Text="Select a file to preview" 
+                                       Margin="0,16,0,0"
+                                       Style="{ThemeResource BodyTextBlockStyle}"
+                                       Foreground="{ThemeResource TextFillColorSecondaryBrush}"/>
+                        </StackPanel>
+                    </Grid>
+                </Grid>
+            </SplitView.Content>
+        </SplitView>
+
+        <!-- Breadcrumb -->
+        <BreadcrumbBar x:Name="BreadcrumbBar" 
+                       Grid.Row="2"
+                       Margin="12,8,12,8"
+                       ItemClicked="BreadcrumbBar_ItemClicked"/>
+    </Grid>
+</Page>
diff --git a/app/FiloExplorer/Views/ViewPage.xaml.cs b/app/FiloExplorer/Views/ViewPage.xaml.cs
new file mode 100644
index 0000000..c9f5df5
--- /dev/null
+++ b/app/FiloExplorer/Views/ViewPage.xaml.cs
@@ -0,0 +1,367 @@
+using FiloExplorer.Models;
+using ManuHub.Filo;
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Media.Imaging;
+using Microsoft.UI.Xaml.Navigation;
+using Microsoft.Windows.Storage.Pickers;
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.Diagnostics;
+using System.IO;
+using System.Linq;
+using System.Threading.Tasks;
+using Windows.Media.Core;
+using Windows.Storage.Streams;
+using static FiloExplorer.Helpers.MsgHelper;
+
+namespace FiloExplorer.Views;
+
+/// <summary>
+/// An empty page that can be used on its own or navigated to within a Frame.
+/// </summary>
+public sealed partial class ViewPage : Page
+{
+    //private readonly INotificationService? _notification;
+    private FiloReader? _reader;
+    private readonly List<FiloFileInfo> _allFiles = new();
+    private readonly ObservableCollection<ContainerItem> _items = new();
+    private string _currentFolder = "";
+    private byte[]? _key;
+    private string? _archivePath;
+
+    public ObservableCollection<string> BreadcrumbItems { get; } = new();
+
+    public ViewPage()
+    {
+        InitializeComponent();
+        FileList.ItemsSource = _items;
+        BreadcrumbBar.ItemsSource = BreadcrumbItems;
+
+        this.Loaded += ViewPage_Loaded;
+    }
+
+    protected override void OnNavigatedTo(NavigationEventArgs e)
+    {
+        base.OnNavigatedTo(e);
+        _archivePath = e.Parameter as string;
+
+        if (string.IsNullOrEmpty(_archivePath))
+        {
+            Frame.GoBack();
+        }
+
+        // Do nothing heavy here — wait for Loaded
+    }
+
+    private async void ViewPage_Loaded(object sender, RoutedEventArgs e)
+    {
+        this.Loaded -= ViewPage_Loaded;   // Prevent multiple calls
+
+        if (string.IsNullOrEmpty(_archivePath)) return;
+
+        await OpenArchiveWithPasswordAsync(_archivePath);
+    }
+
+    private async Task OpenArchiveWithPasswordAsync(string path)
+    {
+        try
+        {
+            _reader = new FiloReader(path);
+            await _reader.InitializeAsync();
+
+            // === Password Handling for Filo 1.1.0 ===
+            if (_reader.Header.Encryption == "AES256")
+            {
+                string? password = await ShowPasswordDialogAsync(this.XamlRoot);
+
+                if (string.IsNullOrWhiteSpace(password))
+                {
+                    ShowToast("Operation Cancelled", "Password is required for this encrypted container.");
+                    // await ShowMessageDialogAsync("Operation Cancelled", "Password is required for this encrypted container.", this.XamlRoot);
+                    Frame.GoBack();
+                    return;
+                }
+
+                _key = _reader.DeriveKey(password); // If password is wrong, exception will be thrown Invakid Password
+            }
+            else
+            {
+                _key = null; // No encryption
+            }
+
+            // Load files
+            _allFiles.Clear();
+            _allFiles.AddRange(_reader.ListFiles());
+
+            RefreshView();
+            UpdateBreadcrumb();
+
+            // Optional: Show encryption status in UI
+            if (_key != null)
+                PreviewHeaderText.Text = "Preview (Encrypted Container)";
+        }
+        catch (Exception ex)
+        {
+            ShowToast("Failed to Open Container", ex.Message);
+            //await ShowMessageDialogAsync("Failed to Open Container", ex.Message, this.XamlRoot);
+            Frame.GoBack();
+        }
+    }
+
+    private void RefreshView()
+    {
+        _items.Clear();
+        var folders = new HashSet<string>();
+
+        foreach (var file in _allFiles)
+        {
+            if (!file.Directory.StartsWith(_currentFolder, StringComparison.OrdinalIgnoreCase))
+                continue;
+
+            var relative = file.Directory.Substring(_currentFolder.Length).Trim('/');
+
+            if (string.IsNullOrEmpty(relative))
+            {
+                // File in current folder
+                _items.Add(new ContainerItem
+                {
+                    Name = file.Name,
+                    FullPath = file.Path,
+                    IsFolder = false,
+                    Size = file.FileSize,
+                    MimeType = file.MimeType,
+                    Encrypted = file.Encrypted
+                });
+            }
+            else
+            {
+                // Folder
+                folders.Add(relative.Split('/')[0]);
+            }
+        }
+
+        // Add folders at the top
+        foreach (var folder in folders.OrderBy(f => f))
+        {
+            _items.Insert(0, new ContainerItem
+            {
+                Name = folder,
+                FullPath = string.IsNullOrEmpty(_currentFolder)
+                    ? folder
+                    : $"{_currentFolder}/{folder}",
+                IsFolder = true
+            });
+        }
+    }
+
+    private void UpdateBreadcrumb()
+    {
+        BreadcrumbItems.Clear();
+
+        BreadcrumbItems.Add("Home");
+        AppBarButtonUp.IsEnabled = false;
+
+        if (string.IsNullOrEmpty(_currentFolder))
+            return;
+
+        var parts = _currentFolder.Split('/');
+
+        string accumulatedPath = "";
+
+        foreach (var part in parts)
+        {
+            accumulatedPath = string.IsNullOrEmpty(accumulatedPath)
+                ? part
+                : $"{accumulatedPath}/{part}";
+
+            BreadcrumbItems.Add(part);
+        }
+
+        if (BreadcrumbItems.Count == 1)
+            AppBarButtonUp.IsEnabled = false;
+        else
+            AppBarButtonUp.IsEnabled = true;
+    }
+
+    private async void FileList_ItemClick(object sender, ItemClickEventArgs e)
+    {
+        if (e.ClickedItem is not ContainerItem item) return;
+
+        if (item.IsFolder)
+        {
+            _currentFolder = item.FullPath;
+            RefreshView();
+            UpdateBreadcrumb();
+        }
+        else
+        {
+            await PreviewFileAsync(item);
+        }
+    }
+
+    // -------- Preview --------
+    private async Task PreviewFileAsync(ContainerItem item)
+    {
+        try
+        {
+            // Hide all previews first
+            PreviewImage.Visibility = Visibility.Collapsed;
+            MediaPlayerElement.Visibility = Visibility.Collapsed;
+            NoPreviewPanel.Visibility = Visibility.Collapsed;
+
+            using var filoStream = new FiloStream(_reader, item.FullPath, _key);
+            var ras = await ToRandomAccessStreamAsync(filoStream);
+
+            if (item.MimeType?.StartsWith("image") == true)
+            {
+                var bitmap = new BitmapImage();
+                await bitmap.SetSourceAsync(ras);
+                PreviewImage.Source = bitmap;
+                PreviewImage.Visibility = Visibility.Visible;
+            }
+            else if (item.MimeType?.StartsWith("video") == true ||
+                     item.MimeType?.StartsWith("audio") == true)
+            {
+                MediaPlayerElement.Source = MediaSource.CreateFromStream(ras, item.MimeType);
+                MediaPlayerElement.Visibility = Visibility.Visible;
+                MediaPlayerElement.MediaPlayer?.Play();
+            }
+            else
+            {
+                // TODO: Add text preview, PDF, etc.
+                NoPreviewPanel.Visibility = Visibility.Visible;
+            }
+
+            PreviewHeaderText.Text = $"Preview - {item.Name}";
+        }
+        catch (Exception ex)
+        {
+            // Show error in preview area
+            PreviewHeaderText.Text = "Preview Error";
+            NoPreviewPanel.Visibility = Visibility.Visible;
+        }
+    }
+
+    private async Task<IRandomAccessStream> ToRandomAccessStreamAsync(Stream stream)
+    {
+        var memoryStream = new MemoryStream();
+        await stream.CopyToAsync(memoryStream);
+        memoryStream.Position = 0;
+        return memoryStream.AsRandomAccessStream();
+    }
+
+    // Toolbar Handlers
+    private void UpButton_Click(object sender, RoutedEventArgs e)
+    {
+        if (string.IsNullOrEmpty(_currentFolder)) return;
+
+        var lastSlash = _currentFolder.LastIndexOf('/');
+        _currentFolder = lastSlash > 0
+            ? _currentFolder.Substring(0, lastSlash)
+            : "";
+
+        RefreshView();
+        UpdateBreadcrumb();
+    }
+
+    // -------- Extract --------
+    private async void ExtractButton_Click(object sender, RoutedEventArgs e)
+    {
+        if (FileList.SelectedItem is not ContainerItem item || item.IsFolder)
+        {
+            ShowToast("No file selected", "Please select a file to extract.");
+            return;
+        }
+
+        var folderPicker = new FolderPicker(this.XamlRoot.ContentIslandEnvironment.AppWindowId);
+        var folder = await folderPicker.PickSingleFolderAsync();
+        if (folder == null) return;
+
+        try
+        {
+            var itemPath = Path.Combine(folder.Path, item.FullPath);
+            await _reader.ExtractFileAsync(item.FullPath, itemPath, _key);
+        }
+        catch (Exception ex)
+        {
+        }
+    }
+
+    private async void ExtractAllButton_Click(object sender, RoutedEventArgs e)
+    {
+        if (_items.Count == 0)
+        {
+            ShowToast("Nothing to extract", "There are no files or folders in the current view to extract.");
+            return;
+        }
+
+        var folderPicker = new FolderPicker(this.XamlRoot.ContentIslandEnvironment.AppWindowId);
+        var folder = await folderPicker.PickSingleFolderAsync();
+        if (folder == null) return;
+
+        foreach (var item in _items)
+        {
+            if (item.IsFolder)
+            {
+                try
+                {
+                    await _reader.ExtractDirectoryAsync(item.FullPath, Path.Combine(folder.Path, item.Name), _key);
+                }
+                catch (Exception ex)
+                { }
+            }
+            else
+            {
+                try
+                {
+                    await _reader.ExtractFileAsync(item.FullPath, Path.Combine(folder.Path, item.Name), _key);
+                }
+                catch (Exception ex)
+                { }
+            }
+        }
+    }
+
+    private void BreadcrumbBar_ItemClicked(BreadcrumbBar sender, BreadcrumbBarItemClickedEventArgs args)
+    {
+        if (args.Index == 0)
+        {
+            _currentFolder = "";
+        }
+        else
+        {
+            // Rebuild path up to clicked item
+            var pathParts = new List<string>();
+            for (int i = 1; i <= args.Index; i++)
+            {
+                pathParts.Add(BreadcrumbItems[i]);
+            }
+            _currentFolder = string.Join("/", pathParts);
+        }
+
+        RefreshView();
+        UpdateBreadcrumb(); // Optional: trim breadcrumb after click
+    }
+
+    private void RefreshButton_Click(object sender, RoutedEventArgs e)
+    {
+        RefreshView();
+        UpdateBreadcrumb();
+    }
+
+    private async void BackButton_Click(object sender, RoutedEventArgs e)
+    {
+        // going back without confirmation is a bad idea, not unsaved changes, navigate to main page
+        var result = await ShowConfirmationDialogAsync("Go Back", "Are you sure you want to go back to home page?", this.XamlRoot);
+        if (!result) return;
+
+        if (Frame.CanGoBack)
+        {
+            PreviewImage.Source = null;
+            MediaPlayerElement.Source = null;
+            Frame.GoBack();
+        }
+    }
+}
diff --git a/app/FiloExplorer/app.manifest b/app/FiloExplorer/app.manifest
new file mode 100644
index 0000000..cabf9c8
--- /dev/null
+++ b/app/FiloExplorer/app.manifest
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<assembly manifestVersion="1.0" xmlns="urn:schemas-microsoft-com:asm.v1">
+  <assemblyIdentity version="1.0.0.0" name="FiloExplorer.app"/>
+
+  <compatibility xmlns="urn:schemas-microsoft-com:compatibility.v1">
+    <application>
+      <!-- The ID below informs the system that this application is compatible with OS features first introduced in Windows 10. 
+      It is necessary to support features in unpackaged applications, for example the custom titlebar implementation.
+      For more info see https://docs.microsoft.com/windows/apps/windows-app-sdk/use-windows-app-sdk-run-time#declare-os-compatibility-in-your-application-manifest -->
+      <supportedOS Id="{8e0f7a12-bfb3-4fe8-b9a5-48fd50a15a9a}" />
+    </application>
+  </compatibility>
+  
+  <application xmlns="urn:schemas-microsoft-com:asm.v3">
+    <windowsSettings>
+      <dpiAwareness xmlns="http://schemas.microsoft.com/SMI/2016/WindowsSettings">PerMonitorV2</dpiAwareness>
+    </windowsSettings>
+  </application>
+</assembly>
\ No newline at end of file