diff --git a/apps/server/AliasVault.Client/Main/Components/Folders/DeleteFolderModal.razor b/apps/server/AliasVault.Client/Main/Components/Folders/DeleteFolderModal.razor
index c442baeef..3af9b9154 100644
--- a/apps/server/AliasVault.Client/Main/Components/Folders/DeleteFolderModal.razor
+++ b/apps/server/AliasVault.Client/Main/Components/Folders/DeleteFolderModal.razor
@@ -1,86 +1,73 @@
+@using AliasVault.Client.Main.Components.Layout
 @using Microsoft.Extensions.Localization
 
 @* DeleteFolderModal component - modal with two delete options for a folder *@
-@if (IsOpen)
-{
-    <div class="fixed inset-0 z-50 overflow-y-auto">
-        <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-            @* Background overlay *@
-            <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity dark:bg-gray-900 dark:bg-opacity-75" @onclick="HandleClose"></div>
+<FormModal
+    IsOpen="IsOpen"
+    Title="@Localizer["DeleteFolderTitle"]"
+    IconBackgroundClass="bg-red-100 dark:bg-red-900/30"
+    ShowDefaultFooter="false"
+    OnClose="HandleClose">
+    <Icon>
+        <svg class="h-6 w-6 text-red-600 dark:text-red-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
+        </svg>
+    </Icon>
+    <ChildContent>
+        <p class="text-sm text-gray-500 dark:text-gray-400">
+            @string.Format(Localizer["DeleteFolderDescription"].Value, FolderName)
+        </p>
+    </ChildContent>
+    <FooterContent>
+        <div class="w-full space-y-2">
+            @* Option 1: Delete folder, keep items *@
+            <button
+                type="button"
+                @onclick="HandleDeleteFolderOnly"
+                disabled="@IsDeleting"
+                class="w-full flex items-center gap-3 p-3 rounded-lg border border-orange-200 bg-orange-50 hover:bg-orange-100 dark:border-orange-800 dark:bg-orange-900/20 dark:hover:bg-orange-900/30 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
+                <div class="flex-shrink-0 w-10 h-10 flex items-center justify-center rounded-full bg-orange-100 dark:bg-orange-900/40">
+                    <svg class="w-5 h-5 text-orange-600 dark:text-orange-400" viewBox="0 0 24 24" fill="currentColor">
+                        <path d="M10 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-8l-2-2z"/>
+                    </svg>
+                </div>
+                <div class="flex-1 text-left">
+                    <div class="font-medium text-orange-700 dark:text-orange-300">@Localizer["DeleteFolderOnlyTitle"]</div>
+                    <div class="text-sm text-orange-600/80 dark:text-orange-400/80">@Localizer["DeleteFolderOnlyDescription"]</div>
+                </div>
+            </button>
 
-            @* Modal panel *@
-            <div class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg dark:bg-gray-800">
-                <div class="bg-white px-4 pb-4 pt-5 sm:p-6 dark:bg-gray-800">
-                    <div class="sm:flex sm:items-start">
-                        <div class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10 dark:bg-red-900/30">
-                            <svg class="h-6 w-6 text-red-600 dark:text-red-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
-                            </svg>
-                        </div>
-                        <div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left flex-1">
-                            <h3 class="text-lg font-semibold leading-6 text-gray-900 dark:text-white">
-                                @Localizer["DeleteFolderTitle"]
-                            </h3>
-                            <div class="mt-2">
-                                <p class="text-sm text-gray-500 dark:text-gray-400">
-                                    @string.Format(Localizer["DeleteFolderDescription"].Value, FolderName)
-                                </p>
-                            </div>
-                        </div>
+            @* Option 2: Delete folder and contents - only show if folder has items *@
+            @if (ItemCount > 0)
+            {
+                <button
+                    type="button"
+                    @onclick="HandleDeleteFolderAndContents"
+                    disabled="@IsDeleting"
+                    class="w-full flex items-center gap-3 p-3 rounded-lg border border-red-200 bg-red-50 hover:bg-red-100 dark:border-red-800 dark:bg-red-900/20 dark:hover:bg-red-900/30 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
+                    <div class="flex-shrink-0 w-10 h-10 flex items-center justify-center rounded-full bg-red-100 dark:bg-red-900/40">
+                        <svg class="w-5 h-5 text-red-600 dark:text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                            <polyline points="3 6 5 6 21 6" />
+                            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+                        </svg>
                     </div>
-                </div>
+                    <div class="flex-1 text-left">
+                        <div class="font-medium text-red-700 dark:text-red-300">@Localizer["DeleteFolderAndContentsTitle"]</div>
+                        <div class="text-sm text-red-600/80 dark:text-red-400/80">@string.Format(Localizer["DeleteFolderAndContentsDescription"].Value, ItemCount)</div>
+                    </div>
+                </button>
+            }
 
-                <div class="bg-gray-50 px-4 py-3 space-y-2 dark:bg-gray-800/50">
-                    @* Option 1: Delete folder, keep items *@
-                    <button
-                        type="button"
-                        @onclick="HandleDeleteFolderOnly"
-                        disabled="@IsDeleting"
-                        class="w-full flex items-center gap-3 p-3 rounded-lg border border-orange-200 bg-orange-50 hover:bg-orange-100 dark:border-orange-800 dark:bg-orange-900/20 dark:hover:bg-orange-900/30 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
-                        <div class="flex-shrink-0 w-10 h-10 flex items-center justify-center rounded-full bg-orange-100 dark:bg-orange-900/40">
-                            <svg class="w-5 h-5 text-orange-600 dark:text-orange-400" viewBox="0 0 24 24" fill="currentColor">
-                                <path d="M10 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-8l-2-2z"/>
-                            </svg>
-                        </div>
-                        <div class="flex-1 text-left">
-                            <div class="font-medium text-orange-700 dark:text-orange-300">@Localizer["DeleteFolderOnlyTitle"]</div>
-                            <div class="text-sm text-orange-600/80 dark:text-orange-400/80">@Localizer["DeleteFolderOnlyDescription"]</div>
-                        </div>
-                    </button>
-
-                    @* Option 2: Delete folder and contents - only show if folder has items *@
-                    @if (ItemCount > 0)
-                    {
-                        <button
-                            type="button"
-                            @onclick="HandleDeleteFolderAndContents"
-                            disabled="@IsDeleting"
-                            class="w-full flex items-center gap-3 p-3 rounded-lg border border-red-200 bg-red-50 hover:bg-red-100 dark:border-red-800 dark:bg-red-900/20 dark:hover:bg-red-900/30 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
-                            <div class="flex-shrink-0 w-10 h-10 flex items-center justify-center rounded-full bg-red-100 dark:bg-red-900/40">
-                                <svg class="w-5 h-5 text-red-600 dark:text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                    <polyline points="3 6 5 6 21 6" />
-                                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
-                                </svg>
-                            </div>
-                            <div class="flex-1 text-left">
-                                <div class="font-medium text-red-700 dark:text-red-300">@Localizer["DeleteFolderAndContentsTitle"]</div>
-                                <div class="text-sm text-red-600/80 dark:text-red-400/80">@string.Format(Localizer["DeleteFolderAndContentsDescription"].Value, ItemCount)</div>
-                            </div>
-                        </button>
-                    }
-
-                    @* Cancel button *@
-                    <button
-                        type="button"
-                        @onclick="HandleClose"
-                        class="w-full mt-2 inline-flex justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:bg-gray-700 dark:text-white dark:ring-gray-600 dark:hover:bg-gray-600">
-                        @Localizer["CancelButton"]
-                    </button>
-                </div>
-            </div>
+            @* Cancel button *@
+            <button
+                type="button"
+                @onclick="HandleClose"
+                class="w-full mt-2 inline-flex justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:bg-gray-700 dark:text-white dark:ring-gray-600 dark:hover:bg-gray-600">
+                @Localizer["CancelButton"]
+            </button>
         </div>
-    </div>
-}
+    </FooterContent>
+</FormModal>
 
 @code {
     [Inject]
diff --git a/apps/server/AliasVault.Client/Main/Components/Folders/FolderPill.razor b/apps/server/AliasVault.Client/Main/Components/Folders/FolderPill.razor
index b271cb4c4..497a32265 100644
--- a/apps/server/AliasVault.Client/Main/Components/Folders/FolderPill.razor
+++ b/apps/server/AliasVault.Client/Main/Components/Folders/FolderPill.razor
@@ -1,7 +1,7 @@
 @using AliasVault.Client.Main.Models
 
 @* FolderPill component - displays a folder as a compact clickable pill *@
-<button @onclick="OnClick" class="inline-flex items-center gap-2 px-3.5 py-2 text-sm rounded-lg bg-gray-100 dark:bg-gray-700/50 hover:bg-gray-200 dark:hover:bg-gray-600/50 transition-colors focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-1 dark:focus:ring-offset-gray-800">
+<button @onclick="OnClick" class="inline-flex items-center gap-2 px-5 py-3 text-sm rounded-lg bg-gray-100 dark:bg-gray-700/50 hover:bg-gray-200 dark:hover:bg-gray-600/50 transition-colors focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-1 dark:focus:ring-offset-gray-800">
     <svg class="w-4 h-4 text-orange-500 flex-shrink-0" viewBox="0 0 24 24" fill="currentColor">
         <path d="M10 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-8l-2-2z"/>
     </svg>
diff --git a/apps/server/AliasVault.Client/Main/Pages/Items/Home.razor b/apps/server/AliasVault.Client/Main/Pages/Items/Home.razor
index d48aa6edb..b07b51c28 100644
--- a/apps/server/AliasVault.Client/Main/Pages/Items/Home.razor
+++ b/apps/server/AliasVault.Client/Main/Pages/Items/Home.razor
@@ -18,7 +18,7 @@
     Title="@GetFilterTitle()"
     Description="@Localizer["PageDescription"]">
     <TitleActions>
-        <div class="relative">
+        <div class="relative flex items-center gap-2">
             <button @onclick="ToggleFilterDropdown" id="filterButton" class="flex items-center gap-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none">
                 <h1 class="flex items-baseline gap-1.5 text-xl font-semibold tracking-tight text-gray-900 dark:text-white sm:text-2xl">
                     <span>@GetFilterTitle()</span>
@@ -28,6 +28,15 @@
                     <polyline points="6 9 12 15 18 9" />
                 </svg>
             </button>
+            @if (IsInFolder)
+            {
+                <button @onclick="ShowDeleteFolderModal" title="@Localizer["DeleteFolder"]" class="p-1.5 text-gray-400 hover:text-red-500 dark:text-gray-500 dark:hover:text-red-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <polyline points="3 6 5 6 21 6" />
+                        <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+                    </svg>
+                </button>
+            }
 
             @if (ShowFilterDropdown)
             {
@@ -148,7 +157,7 @@ else
     }
     else
     {
-        <div class="px-4 mb-4">
+        <div class="px-4 mb-4 min-h-[250px]">
             @* Folders section - only show at root level *@
             @if (!IsInFolder && !IsSearching)
             {
@@ -173,19 +182,6 @@ else
                 </div>
             }
 
-            @* Back to root button - only show when in folder *@
-            @if (IsInFolder)
-            {
-                <div class="mb-4">
-                    <button @onclick="NavigateToRoot" class="inline-flex items-center gap-2 px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors">
-                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
-                        </svg>
-                        @Localizer["BackToRoot"]
-                    </button>
-                </div>
-            }
-
             <div class="grid gap-4 md:grid-cols-4 xl:grid-cols-6">
                 @if (Items.Count == 0 && !IsInFolder)
                 {
@@ -259,18 +255,6 @@ else
                     }
                 </div>
             }
-
-            @* Delete folder button - only show when in a folder *@
-            @if (IsInFolder)
-            {
-                <button @onclick="ShowDeleteFolderModal" class="w-full mt-4 p-3 flex items-center gap-2 text-left text-red-600 dark:text-red-400 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 hover:border-red-300 dark:hover:border-red-700 transition-colors">
-                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <polyline points="3 6 5 6 21 6" />
-                        <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
-                    </svg>
-                    <span>@Localizer["DeleteFolder"]</span>
-                </button>
-            }
         </div>
     }
 }
@@ -491,10 +475,10 @@ else
     {
         if (Folders.Count > 0)
         {
-            return "inline-flex items-center gap-1.5 px-3.5 py-2 text-sm rounded-lg transition-colors focus:outline-none text-gray-500 dark:text-gray-400 hover:text-orange-600 dark:hover:text-orange-400 hover:bg-gray-100 dark:hover:bg-gray-700/50";
+            return "inline-flex items-center gap-1.5 px-5 py-3 text-sm rounded-lg transition-colors focus:outline-none text-gray-500 dark:text-gray-400 hover:text-orange-600 dark:hover:text-orange-400 hover:bg-gray-100 dark:hover:bg-gray-700/50";
         }
 
-        return "inline-flex items-center gap-1.5 px-3.5 py-2 text-sm rounded-lg transition-colors focus:outline-none text-gray-400 dark:text-gray-500 border border-dashed border-gray-300 dark:border-gray-600 hover:border-orange-400 dark:hover:border-orange-500 hover:text-orange-600 dark:hover:text-orange-400";
+        return "inline-flex items-center gap-1.5 px-5 py-3 text-sm rounded-lg transition-colors focus:outline-none text-gray-400 dark:text-gray-500 border border-dashed border-gray-300 dark:border-gray-600 hover:border-orange-400 dark:hover:border-orange-500 hover:text-orange-600 dark:hover:text-orange-400";
     }
 
     /// <summary>