diff --git a/package.json b/package.json
index ee2f3f7b..d5efc62f 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,7 @@
     "elysia": "^1.4.28",
     "exact-mirror": "^1.0.0",
     "file-type": "^22.0.1",
-    "lucide-react": "^0.465.0",
+    "lucide-react": "^1.47.0",
     "moment": "^2.30.1",
     "next": "^15",
     "next-auth": "^4.24.14",
diff --git a/src/app/api/build-status/route.ts b/src/app/api/build-status/route.ts
new file mode 100644
index 00000000..24e02a2c
--- /dev/null
+++ b/src/app/api/build-status/route.ts
@@ -0,0 +1,103 @@
+import buildLiveStatusService from "@/server/services/build-live-status.service";
+import buildStatusService from "@/server/services/standalone-services/build-status-pub-sub.service";
+import buildWatchService from "@/server/services/standalone-services/build-watch.service";
+import { getAuthUserSession, simpleRoute } from "@/server/utils/action-wrapper.utils";
+import { StreamUtils } from "@/shared/utils/stream.utils";
+
+// Prevents this route's response from being cached
+export const dynamic = "force-dynamic";
+
+export async function POST() {
+    return simpleRoute(async () => {
+        const session = await getAuthUserSession();
+
+        void buildWatchService.startWatch();
+        await buildStatusService.ensureSeeded();
+
+        let appLookup = await buildLiveStatusService.getBuildableAppLookup(session);
+
+        const encoder = new TextEncoder();
+        let shouldStopStreaming = false;
+        let unsubscribe: (() => void) | null = null;
+        let heartbeat: ReturnType<typeof setInterval> | null = null;
+
+        const customReadable = new ReadableStream({
+            async start(controller) {
+                const sendData = (data: unknown) => {
+                    if (shouldStopStreaming) {
+                        return;
+                    }
+                    try {
+                        controller.enqueue(encoder.encode(StreamUtils.encodeSseData(data)));
+                    } catch (e) {
+                        console.error(`[BUILD STATUS] Error while enqueueing build status data: `, e);
+                        shouldStopStreaming = true;
+                        unsubscribe?.();
+                        unsubscribe = null;
+                        if (heartbeat) clearInterval(heartbeat);
+                        heartbeat = null;
+                        controller.close();
+                    }
+                };
+
+                unsubscribe = buildStatusService.subscribe(async (status) => {
+                    if (shouldStopStreaming || status.workloadType !== 'app') {
+                        return;
+                    }
+
+                    let appInfo = appLookup.get(status.workloadId);
+                    if (!appInfo) {
+                        // A new app might have been created while streaming, refresh the lookup.
+                        appLookup = await buildLiveStatusService.getBuildableAppLookup(session);
+                        appInfo = appLookup.get(status.workloadId);
+                    }
+                    if (!appInfo) {
+                        return;
+                    }
+
+                    sendData(buildLiveStatusService.mapBuildToStatus(status, appInfo));
+                });
+
+                try {
+                    sendData(buildLiveStatusService.getInitialStatus(appLookup));
+                } catch (e) {
+                    console.error("Error fetching initial build status", e);
+                }
+
+                heartbeat = setInterval(() => {
+                    if (shouldStopStreaming) return;
+                    try {
+                        controller.enqueue(encoder.encode(': ping\n\n'));
+                    } catch (error) {
+                        console.error('[BUILD STATUS] Error while sending heartbeat:', error);
+                        shouldStopStreaming = true;
+                        unsubscribe?.();
+                        unsubscribe = null;
+                        if (heartbeat) clearInterval(heartbeat);
+                        heartbeat = null;
+                        controller.close();
+                    }
+                }, 25_000);
+            },
+            cancel() {
+                console.log("[BUILD STATUS] Client left, cancelling build status stream");
+                shouldStopStreaming = true;
+                if (unsubscribe) {
+                    unsubscribe();
+                    unsubscribe = null;
+                }
+                if (heartbeat) clearInterval(heartbeat);
+                heartbeat = null;
+            },
+        });
+
+        return new Response(customReadable, {
+            headers: {
+                Connection: "keep-alive",
+                "Content-Encoding": "none",
+                "Cache-Control": "no-cache, no-transform",
+                "Content-Type": "text/event-stream; charset=utf-8",
+            },
+        });
+    });
+}
diff --git a/src/app/api/deployment-status/route.ts b/src/app/api/deployment-status/route.ts
index e918059b..fbbb4a44 100644
--- a/src/app/api/deployment-status/route.ts
+++ b/src/app/api/deployment-status/route.ts
@@ -23,6 +23,7 @@ export async function POST() {
         const encoder = new TextEncoder();
         let shouldStopStreaming = false;
         let unsubscribe: (() => void) | null = null;
+        let heartbeat: ReturnType<typeof setInterval> | null = null;
 
         // Fetch all projects and apps to build a lookup map
         let appLookup = await deploymentLiveStatusService.getAppLookup(session);
@@ -37,6 +38,10 @@ export async function POST() {
                     } catch (e) {
                         console.error(`[ENQUEUE ERROR] Error while enqueueing Deployment Status data: `, e);
                         shouldStopStreaming = true;
+                        unsubscribe?.();
+                        unsubscribe = null;
+                        if (heartbeat) clearInterval(heartbeat);
+                        heartbeat = null;
                         controller.close();
                     }
                 };
@@ -85,6 +90,21 @@ export async function POST() {
 
                     sendData(status);
                 });
+
+                heartbeat = setInterval(() => {
+                    if (shouldStopStreaming) return;
+                    try {
+                        controller.enqueue(encoder.encode(': ping\n\n'));
+                    } catch (error) {
+                        console.error('[ENQUEUE ERROR] Error while sending deployment status heartbeat:', error);
+                        shouldStopStreaming = true;
+                        unsubscribe?.();
+                        unsubscribe = null;
+                        if (heartbeat) clearInterval(heartbeat);
+                        heartbeat = null;
+                        controller.close();
+                    }
+                }, 25_000);
             },
             cancel() {
                 console.log("[LEAVE] Cancelling deployment status stream");
@@ -93,6 +113,8 @@ export async function POST() {
                     unsubscribe();
                     unsubscribe = null;
                 }
+                if (heartbeat) clearInterval(heartbeat);
+                heartbeat = null;
             }
         });
 
diff --git a/src/app/api/logs-download/route.ts b/src/app/api/logs-download/route.ts
deleted file mode 100644
index 54588163..00000000
--- a/src/app/api/logs-download/route.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-
-import { FsUtils } from "@/server/utils/fs.utils";
-import { PathUtils } from "@/server/utils/path.utils";
-import { NextRequest, NextResponse } from "next/server";
-import fs from 'fs/promises';
-import { getAuthUserSession, isAuthorizedReadForApp } from "@/server/utils/action-wrapper.utils";
-import { ServiceException } from "@/shared/model/service.exception.model";
-import { z } from "zod";
-import { stringToDate } from "@/shared/utils/zod.utils";
-
-// Prevents this route's response from being cached
-export const dynamic = "force-dynamic";
-
-const zodInputModel = z.object({
-    appId: z.string().min(1),
-    date: stringToDate
-});
-
-export async function GET(request: NextRequest) {
-    try {
-        await getAuthUserSession();
-
-        const requestUrl = new URL(request.url);
-        const appId = requestUrl.searchParams.get('appId');
-        const date = requestUrl.searchParams.get('date');
-        const validatedData = zodInputModel.parse({ appId, date });
-
-        await isAuthorizedReadForApp(validatedData.appId);
-
-        const logsPath = PathUtils.appLogsFile(validatedData.appId, validatedData.date);
-        if (!await FsUtils.fileExists(logsPath)) {
-            throw new ServiceException(`Could not find logs for ${appId}.`);
-        }
-
-        const buffer = await fs.readFile(logsPath);
-
-        return new NextResponse(buffer, {
-            headers: {
-                'Content-Type': 'application/gzip',
-                'Content-Disposition':
-                    `attachment; filename="${appId}-${validatedData.date.toISOString().split('T')[0]}.tar.gz"`,
-            },
-        });
-    } catch (error) {
-        console.error('Error while downloading data:', error);
-        return new Response((error as Error)?.message ?? 'An unknown error occured.', { status: 500 });
-    }
-}
\ No newline at end of file
diff --git a/src/app/error.tsx b/src/app/error.tsx
new file mode 100644
index 00000000..dd317ebb
--- /dev/null
+++ b/src/app/error.tsx
@@ -0,0 +1,28 @@
+'use client';
+
+import ErrorState from '@/components/custom/error-state';
+import { CircleAlert } from 'lucide-react';
+import { useEffect } from 'react';
+
+export default function Error({
+    error,
+    reset,
+}: {
+    error: Error & { digest?: string };
+    reset: () => void;
+}) {
+    useEffect(() => {
+        console.error(error);
+    }, [error]);
+
+    return (
+        <ErrorState
+            icon={<CircleAlert />}
+            mediaClassName="bg-destructive/10 text-destructive"
+            title="Something went wrong"
+            description="An unexpected error occurred while loading this page. You can try again, or return to the dashboard."
+            digest={error.digest}
+            onRetry={reset}
+        />
+    );
+}
diff --git a/src/app/error/page.tsx b/src/app/error/page.tsx
index 73b3479e..7b06b6a7 100644
--- a/src/app/error/page.tsx
+++ b/src/app/error/page.tsx
@@ -1,9 +1,13 @@
+import ErrorState from '@/components/custom/error-state';
+import { TriangleAlert } from 'lucide-react';
 
 export default function ErrorPage() {
-
     return (
-        <div>
-            Error Page
-        </div>
-    )
-}
\ No newline at end of file
+        <ErrorState
+            icon={<TriangleAlert />}
+            mediaClassName="bg-destructive/10 text-destructive"
+            title="Something went wrong"
+            description="An unexpected error occurred. Please try again or return to the dashboard."
+        />
+    );
+}
diff --git a/src/app/global-error.tsx b/src/app/global-error.tsx
index 17086361..933b0f0a 100644
--- a/src/app/global-error.tsx
+++ b/src/app/global-error.tsx
@@ -1,41 +1,39 @@
-'use client' // Error boundaries must be Client Components
+'use client';
 
-import { cn } from "@/frontend/utils/utils";
-import { AlertCircle } from "lucide-react"
-import { Inter } from "next/font/google";
+import ErrorState from '@/components/custom/error-state';
+import { cn } from '@/frontend/utils/utils';
+import { TriangleAlert } from 'lucide-react';
+import { Inter } from 'next/font/google';
 
 const inter = Inter({
-    subsets: ["latin"],
-    variable: "--font-sans",
+    subsets: ['latin'],
+    variable: '--font-sans',
 });
 
 export default function GlobalError({
     error,
+    reset,
 }: {
-    error: Error & { digest?: string }
-    reset: () => void
+    error: Error & { digest?: string };
+    reset: () => void;
 }) {
     return (
-        <html >
-            <body className={cn(
-                "min-h-screen bg-background font-sans antialiased",
-                inter.variable
-            )}>
-                <div className="h-screen w-fuäll flex flex-col items-center justify-center p-4 space-y-4 bg-background text-foreground">
-                    <div className="flex flex-col items-center justify-center space-y-2 text-center max-w-md">
-                        <div className="rounded-full bg-destructive/10 p-3">
-                            <AlertCircle className="h-8 w-8 text-destructive" />
-                        </div>
-                        <h2 className="text-2xl font-bold tracking-tight">Something went wrong!</h2>
-                        <p className="text-muted-foreground mt-4">
-                            An unexpected error occurred. Please check if your authorized for this action and try again.
-                        </p>
-                        <p className="text-xs text-muted-foreground mt-6">
-                            Digest: {error.digest}
-                        </p>
-                    </div>
-                </div>
+        <html lang="en">
+            <body
+                className={cn(
+                    'min-h-screen bg-background font-sans antialiased',
+                    inter.variable
+                )}
+            >
+                <ErrorState
+                    icon={<TriangleAlert />}
+                    mediaClassName="bg-destructive/10 text-destructive"
+                    title="Something went wrong"
+                    description="A critical error occurred. Please try again, or reload the page to get back to the dashboard."
+                    digest={error.digest}
+                    onRetry={reset}
+                />
             </body>
         </html>
-    )
+    );
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index f8496cc4..ff7e1f6c 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -13,6 +13,7 @@ import { BreadcrumbsGenerator } from "../components/custom/breadcrumbs-generator
 import { getUserSession } from "@/server/utils/action-wrapper.utils";
 import { InputDialog } from "@/components/custom/input-dialog";
 import PodsStatusPollingProvider from "@/components/custom/pods-status-polling-provider";
+import BuildStatusPollingProvider from "@/components/custom/build-status-polling-provider";
 import { GenericDialog } from "@/components/custom/generic-dialog";
 
 const inter = Inter({
@@ -50,8 +51,8 @@ export default async function RootLayout({
         <SidebarProvider defaultOpen={defaultOpen}>
           <AppSidebar />
           <main className="flex min-w-0 flex-1 flex-col items-center">
-            <div className="w-full min-w-0 max-w-8xl px-2 lg:px-4">
-              <div className="min-w-0 flex-col p-6 md:flex">
+            <div className="w-full min-w-0 max-w-8xl px-2 has-[[data-project-network-graph]]:max-w-none lg:px-4">
+              <div className="min-w-0 flex-col p-6 md:flex has-[[data-project-network-graph]]:pb-0">
                 {userIsLoggedIn && <BreadcrumbsGenerator />}
                 <Suspense fallback={<FullLoadingSpinner />}>
                   {children}
@@ -66,6 +67,7 @@ export default async function RootLayout({
         <InputDialog />
         <GenericDialog />
         {userIsLoggedIn && <PodsStatusPollingProvider />}
+        {userIsLoggedIn && <BuildStatusPollingProvider />}
       </body>
     </html>
   );
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
new file mode 100644
index 00000000..258bb721
--- /dev/null
+++ b/src/app/not-found.tsx
@@ -0,0 +1,12 @@
+import ErrorState from '@/components/custom/error-state';
+import { FileQuestion } from 'lucide-react';
+
+export default function NotFound() {
+    return (
+        <ErrorState
+            icon={<FileQuestion className="text-muted-foreground" />}
+            title="Page not found"
+            description="The page you are looking for doesn't exist or may have been moved."
+        />
+    );
+}
diff --git a/src/app/project/[projectId]/actions.ts b/src/app/project/[projectId]/actions.ts
index 02463b3d..9167d058 100644
--- a/src/app/project/[projectId]/actions.ts
+++ b/src/app/project/[projectId]/actions.ts
@@ -56,7 +56,7 @@ export const createApp = async (appName: string, projectId: string, appId?: stri
             projectId
         });
 
-        return new SuccessActionResult(returnData, "App created successfully.");
+        return new SuccessActionResult(returnData, "Saved successfully.");
     });
 
 export const createAppFromTemplate = async (prevState: any, inputData: AppTemplateModel, projectId: string) =>
diff --git a/src/app/project/[projectId]/app-components/edit-app-dialog.tsx b/src/app/project/[projectId]/app-components/edit-app-dialog.tsx
index 81a04f67..db337dd2 100644
--- a/src/app/project/[projectId]/app-components/edit-app-dialog.tsx
+++ b/src/app/project/[projectId]/app-components/edit-app-dialog.tsx
@@ -3,6 +3,7 @@
 import { Toast } from "@/frontend/utils/toast.utils";
 import { createApp } from "../actions";
 import { useRouter } from "next/navigation";
+import { cloneElement, type MouseEvent, type ReactElement } from "react";
 import type { App } from "@prisma/client";
 import { useInputDialog } from "@/frontend/states/zustand.states";
 
@@ -12,7 +13,7 @@ export function EditAppDialog({
     existingItem,
     openAppAfterCreate = true
 }: {
-    children?: React.ReactNode,
+    children?: ReactElement<{ onClick?: (event: MouseEvent) => void }>;
     projectId: string;
     existingItem?: Pick<App, 'id' | 'name'>;
     openAppAfterCreate?: boolean;
@@ -35,5 +36,12 @@ export function EditAppDialog({
         }
     };
 
-    return <div onClick={() => createAppFunc()}>{children}</div>
+    if (!children) return null;
+
+    return cloneElement(children, {
+        onClick: (event) => {
+            children.props.onClick?.(event);
+            void createAppFunc();
+        },
+    });
 }
diff --git a/src/app/project/[projectId]/app-components/project-network-graph.tsx b/src/app/project/[projectId]/app-components/project-network-graph.tsx
index 099cc308..146ea23f 100644
--- a/src/app/project/[projectId]/app-components/project-network-graph.tsx
+++ b/src/app/project/[projectId]/app-components/project-network-graph.tsx
@@ -1,9 +1,8 @@
 'use client';
 
-import type { CSSProperties } from 'react';
-import { memo, useEffect, useMemo, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { useRouter } from 'next/navigation';
+import type { CSSProperties, ReactNode } from 'react';
+import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
 import {
     Background,
     BackgroundVariant,
@@ -12,25 +11,39 @@ import {
     MarkerType,
     Position,
     ReactFlow,
+    SmoothStepEdge,
     useNodesState,
     type Node,
     type NodeProps,
     type NodeTypes,
+    type EdgeProps,
     type Connection,
     type ReactFlowInstance,
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
-import { Bot, Boxes, Cloud, Database, Edit2, Globe2, Info, RotateCcw, Trash2 } from 'lucide-react';
+import { Blocks, Bot, Boxes, Cloud, Database, File, Info, RotateCcw } from 'lucide-react';
 import { Button } from '@/components/ui/button';
-import { Card } from '@/components/ui/card';
+import { Card, CardFooter } from '@/components/ui/card';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import {
+    ContextMenu,
+    ContextMenuContent,
+    ContextMenuItem,
+    ContextMenuTrigger,
+} from '@/components/ui/context-menu';
 import PodStatusIndicator from '@/components/custom/pod-status-indicator';
+import BuildStatusIndicator from '@/components/custom/build-status-indicator';
 import { cn } from '@/frontend/utils/utils';
 import type { AppExtendedModel } from '@/shared/model/app-extended.model';
 import type { UserSession } from '@/shared/model/sim-session.model';
 import { UserGroupUtils } from '@/shared/utils/role.utils';
-import { InternalHostnameUtils } from '@/server/utils/internal-hostname.utils';
-import { NodeDetailsDrawer, type PanelConnection } from './project-network-graph/node-details-drawer';
+import { RolePermissionEnum } from '@/shared/model/role-extended.model.ts';
+import { NodeDetailsDrawer } from './project-network-graph/node-details-drawer';
+import {
+    ProjectNetworkGraphAppContextMenu,
+    type ProjectNetworkGraphAppContextMenuProps,
+} from './project-network-graph/project-network-graph-app-context-menu';
+import { ProjectNetworkGraphConnectionContextMenu } from './project-network-graph/project-network-graph-connection-context-menu';
 import { connectionDeletionProvenance, NetworkGraphNode } from './project-network-graph/project-network-graph-projection';
 import { useProjectNetworkGraph } from './project-network-graph/use-project-network-graph';
 import { graphEdgePresentation, graphLegendItems, NETWORK_GRAPH_COLORS } from './project-network-graph/project-network-graph-visual-semantics';
@@ -43,26 +56,37 @@ import { AppNetworkPolicyDraft, AppNetworkPolicyDraftUtils } from '@/shared/util
 import AppNetworkPolicyRuleDialog from '@/app/project/app/[appId]/advanced/app-network-policy-rule-dialog';
 import { saveAppNetworkPolicyConfiguration } from '@/app/project/app/[appId]/advanced/actions';
 import { deleteApp } from '@/app/project/[projectId]/actions';
-import { EditAppDialog } from './edit-app-dialog';
+import { EditAppDialog } from '@/app/project/[projectId]/app-components/edit-app-dialog';
+import ChooseTemplateDialog from '@/app/project/[projectId]/choose-template-dialog';
 import type { ProjectNetworkGraphPositions } from '@/shared/model/project-network-graph-layout.model';
+import type { S3Target } from '@prisma/client';
+import type { VolumeBackupExtendedModel } from '@/shared/model/volume-backup-extended.model';
+import {
+    type DrawerTab,
+    useProjectNetworkGraphDrawerSession,
+} from './project-network-graph/project-network-graph-drawer-session';
 
 const hiddenHandleClassName = 'size-1.5! border-0! bg-transparent! opacity-0! pointer-events-none';
-const connectionSourceHandleClassName = 'size-3! border-2! border-background! bg-qs-500! opacity-0! shadow-md! transition-all duration-150 group-hover:opacity-100! [&.connectingfrom]:opacity-0! hover:bg-qs-600!';
-const connectionTargetHandleClassName = 'size-3! border-2! border-background! bg-qs-400! opacity-0! shadow-md! transition-all duration-150 [&.connectingto]:opacity-100! hover:bg-qs-500!';
+const connectionSourceHandleClassName = 'z-20! size-4! border-2! border-background! bg-qs-500! opacity-0! shadow-md! transition-all duration-150 group-hover:opacity-100! [&.connectingfrom]:opacity-0! hover:bg-qs-600!';
+const connectionTargetHandleClassName = 'z-20! size-4! border-2! border-background! bg-qs-400! opacity-0! shadow-md! transition-all duration-150 [&.connectingto]:opacity-100! hover:bg-qs-500!';
 
-type EdgeMenu = { edgeId: string; x: number; y: number };
-type NodeMenu = { appId: string; x: number; y: number };
 type WorkloadNodeData = NetworkGraphNode & {
     connectionInProgress?: boolean;
     connectionTarget?: boolean;
     selected?: boolean;
     connectedToSelection?: boolean;
+    contextMenu?: Omit<ProjectNetworkGraphAppContextMenuProps, 'children'>;
 };
+type ConnectionEdgeData = { onDelete: () => void };
 type ProjectNetworkGraphProps = {
     apps: AppExtendedModel[];
     projectId: string;
     session: UserSession;
     savedPositions: ProjectNetworkGraphPositions;
+    s3Targets: S3Target[];
+    storageClasses: string[];
+    volumeBackupsByApp: Record<string, VolumeBackupExtendedModel[]>;
+    gitSshPublicKeysByApp: Record<string, string | undefined>;
 };
 
 const WorkloadNode = memo(function WorkloadNode({
@@ -70,32 +94,39 @@ const WorkloadNode = memo(function WorkloadNode({
 }: NodeProps<Node<WorkloadNodeData, 'workload'>>) {
     const database = !!data.appType && data.appType.toUpperCase() !== 'APP';
     const Icon = data.kind === 'AGENT' ? Bot : database ? Database : Boxes;
-    return (
-        <div className={cn(
-            'group relative flex w-[240px] cursor-pointer items-center gap-3 rounded-xl border bg-card px-4 py-3.5 shadow-xs transition-all duration-150 hover:border-qs-500/50 hover:shadow-md',
-            data.external && 'border-dashed border-amber-500/70 bg-amber-500/5',
-            data.selected && 'border-qs-500 ring-2 ring-qs-500/20 shadow-md',
-            !data.selected && !data.connectedToSelection && 'opacity-40',
-        )}>
-            <div className={cn('flex size-10 shrink-0 items-center justify-center rounded-lg ring-1', data.kind === 'AGENT' ? 'bg-violet-500/15 text-violet-600 ring-violet-500/30' : database ? 'bg-emerald-500/10 text-emerald-600 ring-emerald-500/30' : 'bg-qs-500/10 text-qs-600 ring-qs-500/30')}>
-                <Icon className="size-5" />
-            </div>
-            <div className="min-w-0 flex-1">
-                <div className="flex min-w-0 items-center gap-2">
-                    <p className="truncate text-sm font-semibold" title={data.name}>{data.name}</p>
-                    {data.kind === 'APP' && <div className={cn('ml-auto shrink-0 transition-opacity', data.connectionTarget && 'opacity-0')}>
-                        <PodStatusIndicator appId={data.id.replace('APP:', '')} />
-                    </div>}
+    const node = (
+        <div className={cn('group relative w-[240px] cursor-pointer transition-opacity duration-150', !data.selected && !data.connectedToSelection && 'opacity-40')}>
+            <div className={cn(
+                'relative z-10 flex items-center gap-3 rounded-xl border bg-card px-4 py-3.5 shadow-xs transition-all duration-150 hover:border-qs-500/50 hover:shadow-md',
+                data.external && 'border-dashed border-amber-500/70 bg-amber-500/5',
+                data.selected && 'border-qs-500 ring-2 ring-qs-500/20 shadow-md',
+            )}>
+                <div className={cn('flex size-10 shrink-0 items-center justify-center rounded-lg ring-1', data.kind === 'AGENT' ? 'bg-violet-500/15 text-violet-600 ring-violet-500/30' : database ? 'bg-emerald-500/10 text-emerald-600 ring-emerald-500/30' : 'bg-qs-500/10 text-qs-600 ring-qs-500/30')}>
+                    <Icon className="size-5" />
+                </div>
+                <div className="min-w-0 flex-1">
+                    <div className="flex min-w-0 items-center gap-2">
+                        <p className="truncate text-sm font-semibold" title={data.name}>{data.name}</p>
+                        {data.kind === 'APP' && <div className={cn('ml-auto flex shrink-0 transition-opacity', data.connectionTarget && 'opacity-0')}>
+                            <PodStatusIndicator appId={data.id.replace('APP:', '')} />
+                        </div>}
+                    </div>
+                    <p className="truncate text-xs text-muted-foreground">{data.caption ?? (database ? data.appType : data.kind === 'AGENT' ? 'Agent sandbox' : 'App')}</p>
                 </div>
-                <p className="truncate text-xs text-muted-foreground">{data.caption ?? (database ? data.appType : data.kind === 'AGENT' ? 'Agent sandbox' : 'App')}</p>
             </div>
-            <Handle id="target-ingress" type="target" position={Position.Left} title="Drop connection here" className={cn(data.external ? hiddenHandleClassName : connectionTargetHandleClassName, data.connectionTarget && 'opacity-100!')} />
+            {data.kind === 'APP' && <div className="relative z-0 mx-auto -mt-px hidden w-[184px] justify-center rounded-b-xl border border-t-0 bg-card px-3 pb-2 pt-2 shadow-xs has-[.build-status-indicator]:flex">
+                <BuildStatusIndicator appId={data.id.replace('APP:', '')} showLabel className="build-status-indicator" />
+            </div>}
+            <Handle id="target-ingress" type="target" position={Position.Left} title="Drop connection here" className={cn(data.external ? hiddenHandleClassName : connectionTargetHandleClassName, data.connectionTarget && 'opacity-100!')} style={{ top: 34, bottom: 'auto' }} />
             <Handle id="source-internet" type="source" position={Position.Top} className={hiddenHandleClassName} />
             <Handle id="source-ingress" type="source" position={Position.Bottom} className={hiddenHandleClassName} />
             <Handle id="target-egress" type="target" position={Position.Left} className={hiddenHandleClassName} />
-            <Handle id="source-egress" type="source" position={Position.Right} title="Drag to create connection" className={cn(data.external ? hiddenHandleClassName : connectionSourceHandleClassName, data.connectionInProgress && 'opacity-0!')} />
+            <Handle id="source-egress" type="source" position={Position.Right} title="Drag to create connection" className={cn(data.external ? hiddenHandleClassName : connectionSourceHandleClassName, data.connectionInProgress && 'opacity-0!')} style={{ top: 34, bottom: 'auto' }} />
         </div>
     );
+    return data.contextMenu
+        ? <ProjectNetworkGraphAppContextMenu {...data.contextMenu}>{node}</ProjectNetworkGraphAppContextMenu>
+        : node;
 });
 const InternetNode = memo(function InternetNode({
     data,
@@ -112,6 +143,61 @@ const InternetNode = memo(function InternetNode({
     );
 });
 const nodeTypes = { workload: WorkloadNode, internet: InternetNode } satisfies NodeTypes;
+function ConnectionEdge(props: EdgeProps) {
+    const data = props.data as ConnectionEdgeData | undefined;
+    if (!data) return <SmoothStepEdge {...props} />;
+    return (
+        <ProjectNetworkGraphConnectionContextMenu onDelete={data.onDelete}>
+            <SmoothStepEdge {...props} />
+        </ProjectNetworkGraphConnectionContextMenu>
+    );
+}
+const edgeTypes = { connection: ConnectionEdge };
+
+function ProjectNetworkGraphCanvasContextMenu({
+    projectId,
+    canCreateApps,
+    children,
+}: {
+    projectId: string;
+    canCreateApps: boolean;
+    children: ReactNode;
+}) {
+    const { openDialog } = useDialog();
+
+    const openTemplateDialog = (templateType: 'database' | 'template') => {
+        openDialog(
+            <ChooseTemplateDialog projectId={projectId} templateType={templateType} />,
+            { maxWidth: '1000px' },
+        );
+    };
+
+    if (!canCreateApps) return children;
+
+    return (
+        <ContextMenu>
+            <ContextMenuTrigger className="block size-full">
+                {children}
+            </ContextMenuTrigger>
+            <ContextMenuContent>
+                <EditAppDialog projectId={projectId} openAppAfterCreate={false}>
+                    <ContextMenuItem>
+                        <File />
+                        Create Empty App
+                    </ContextMenuItem>
+                </EditAppDialog>
+                <ContextMenuItem onClick={() => openTemplateDialog('template')}>
+                    <Blocks />
+                    Create App from Template
+                </ContextMenuItem>
+                <ContextMenuItem onClick={() => openTemplateDialog('database')}>
+                    <Database />
+                    Create Database
+                </ContextMenuItem>
+            </ContextMenuContent>
+        </ContextMenu>
+    );
+}
 
 function Legend() {
     return (
@@ -134,7 +220,9 @@ function Legend() {
 }
 
 export default function ProjectNetworkGraph(props: ProjectNetworkGraphProps) {
-    return <ProjectNetworkGraphEditor key={AppNetworkPolicyDraftUtils.snapshotKey(props.apps)} {...props} />;
+    return <ProjectNetworkGraphEditor
+        key={AppNetworkPolicyDraftUtils.snapshotKey(props.apps)}
+        {...props} />;
 }
 
 function ProjectNetworkGraphEditor({
@@ -142,32 +230,57 @@ function ProjectNetworkGraphEditor({
     projectId,
     session,
     savedPositions,
+    s3Targets,
+    storageClasses,
+    volumeBackupsByApp,
+    gitSshPublicKeysByApp,
 }: ProjectNetworkGraphProps) {
     const router = useRouter();
+    const searchParams = useSearchParams();
     const { openDialog } = useDialog();
     const { openConfirmDialog } = useConfirmDialog();
     const [drafts, setDrafts] = useState<Record<string, AppNetworkPolicyDraft>>(() => AppNetworkPolicyDraftUtils.collectionFromApps(apps));
     const [baseline, setBaseline] = useState<Record<string, AppNetworkPolicyDraft>>(() => AppNetworkPolicyDraftUtils.collectionFromApps(apps));
-    const [edgeMenu, setEdgeMenu] = useState<EdgeMenu>();
-    const [nodeMenu, setNodeMenu] = useState<NodeMenu>();
     const [saving, setSaving] = useState(false);
-    const [selectedNodeId, setSelectedNodeId] = useState<string>();
-    const [isNodeDrawerOpen, setIsNodeDrawerOpen] = useState(false);
     const [connectionSourceNodeId, setConnectionSourceNodeId] = useState<string>();
     const [connectionTargetNodeId, setConnectionTargetNodeId] = useState<string>();
+    const [graphHeight, setGraphHeight] = useState<number>();
     const graphContainerRef = useRef<HTMLDivElement>(null);
     const drawerContentRef = useRef<HTMLDivElement>(null);
     const reactFlowRef = useRef<Pick<ReactFlowInstance, 'getNode' | 'getZoom' | 'setViewport'>>(null);
     const connectionTargetLeaveTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
     const graphApps = useMemo(() => apps.map(app => AppNetworkPolicyDraftUtils.applyToApp(app, drafts[app.id])), [apps, drafts]);
     const canEditLayout = UserGroupUtils.sessionHasWriteAccessToProject(session, projectId);
+    const canCreateApps = UserGroupUtils.sessionCanCreateNewAppsForProject(session, projectId);
     const { layout, saveNodePosition, resetLayout } = useProjectNetworkGraph(graphApps, projectId, savedPositions);
     const dirty = Object.keys(drafts).some(appId => !AppNetworkPolicyDraftUtils.equals(drafts[appId], baseline[appId]));
     const localAppIds = useMemo(() => new Set(apps.map(app => app.id)), [apps]);
-    const writable = (appId: string) => UserGroupUtils.sessionHasWriteAccessForApp(session, appId);
-    const writableAppIds = new Set(apps.filter(app => writable(app.id)).map(app => app.id));
-    const canRenameApps = UserGroupUtils.sessionCanCreateNewAppsForProject(session, projectId);
-    const canDeleteApps = UserGroupUtils.sessionCanDeleteAppsForProject(session, projectId);
+    const drawerSession = useProjectNetworkGraphDrawerSession({
+        searchParams,
+        appIds: localAppIds,
+    });
+    const { selectedNodeId } = drawerSession;
+    const writable = useCallback(
+        (appId: string) => UserGroupUtils.sessionHasWriteAccessForApp(session, appId),
+        [session],
+    );
+    const writableAppIds = useMemo(
+        () => new Set(apps.filter(app => writable(app.id)).map(app => app.id)),
+        [apps, writable],
+    );
+
+    useLayoutEffect(() => {
+        const updateGraphHeight = () => {
+            const graphContainer = graphContainerRef.current;
+            if (!graphContainer) return;
+
+            setGraphHeight(Math.max(0, window.innerHeight - graphContainer.getBoundingClientRect().top));
+        };
+
+        updateGraphHeight();
+        window.addEventListener('resize', updateGraphHeight);
+        return () => window.removeEventListener('resize', updateGraphHeight);
+    }, []);
     const cancelConnectionTargetLeave = () => {
         if (connectionTargetLeaveTimer.current) clearTimeout(connectionTargetLeaveTimer.current);
     };
@@ -179,9 +292,9 @@ function ProjectNetworkGraphEditor({
         project: { id: app.projectId, name: app.project.name },
     }));
 
-    const updateDraft = (appId: string, update: (draft: AppNetworkPolicyDraft) => AppNetworkPolicyDraft) => {
+    const updateDraft = useCallback((appId: string, update: (draft: AppNetworkPolicyDraft) => AppNetworkPolicyDraft) => {
         setDrafts(current => ({ ...current, [appId]: update(current[appId]) }));
-    };
+    }, []);
     const openConnectionDialog = (sourceAppId: string, targetAppId: string) => {
         const source = apps.find(app => app.id === sourceAppId);
         const target = selectableTargets.find(item => item.id === targetAppId);
@@ -200,28 +313,25 @@ function ProjectNetworkGraphEditor({
             )}
         />, { maxWidth: 'max-w-md' });
     };
-    const deleteConnection = (edgeId: string) => {
+    const deleteConnection = useCallback((edgeId: string) => {
         const edge = layout?.edges.find(item => item.id === edgeId);
         const provenance = connectionDeletionProvenance(edge, writableAppIds);
         if (!provenance) { return; }
         setDrafts(current => AppNetworkPolicyDraftUtils.removeProvenance(current, provenance));
-        setEdgeMenu(undefined);
-    };
-    const deleteLocalApp = async (appId: string) => {
-        setNodeMenu(undefined);
+    }, [layout?.edges, writableAppIds]);
+    const deleteLocalApp = useCallback(async (appId: string) => {
         if (!await openConfirmDialog({
             title: 'Delete App',
             description: 'Are you sure you want to delete this app? All data will be lost and this action cannot be undone.',
         })) return;
         await Toast.fromAction(() => deleteApp(appId));
-    };
-    const toggleInternetAccess = (appId: string) => {
+    }, [openConfirmDialog]);
+    const toggleInternetAccess = useCallback((appId: string) => {
         updateDraft(appId, draft => ({
             ...draft,
             allowInternetAccess: !draft.allowInternetAccess,
         }));
-        setNodeMenu(undefined);
-    };
+    }, [updateDraft]);
     const saveChanges = async () => {
         const changed = Object.values(drafts).filter(draft => !AppNetworkPolicyDraftUtils.equals(draft, baseline[draft.appId]));
         if (!changed.length) { return; }
@@ -248,11 +358,17 @@ function ProjectNetworkGraphEditor({
     };
     const discardChanges = () => {
         setDrafts(baseline);
-        setEdgeMenu(undefined);
         setConnectionSourceNodeId(undefined);
         setConnectionTargetNodeId(undefined);
     };
-    const projectedNodes: Node[] = useMemo(() => (layout?.nodes ?? []).map(node => ({
+    const projectedNodes: Node[] = useMemo(() => (layout?.nodes ?? []).map(node => {
+        const appId = node.kind === 'APP' ? node.id.replace('APP:', '') : undefined;
+        const app = appId ? apps.find(item => item.id === appId) : undefined;
+        const draft = app ? drafts[app.id] : undefined;
+        const role = app
+            ? UserGroupUtils.getRolePermissionForApp(session, app.id) ?? undefined
+            : undefined;
+        return {
         id: node.id,
         type: node.kind === 'INTERNET' ? 'internet' : 'workload',
         position: node.position,
@@ -261,12 +377,23 @@ function ProjectNetworkGraphEditor({
             connectionInProgress: !!connectionSourceNodeId,
             connectionTarget: node.id === connectionTargetNodeId,
             selected: node.id === selectedNodeId,
+            contextMenu: app && draft && role === RolePermissionEnum.READWRITE ? {
+                app,
+                role,
+                allowInternetAccess: draft.allowInternetAccess,
+                onToggleInternetAccess: () => toggleInternetAccess(app.id),
+                onOpenDrawerTab: (tab: DrawerTab) => {
+                    drawerSession.openAppTab(app.id, tab);
+                },
+                onDelete: () => void deleteLocalApp(app.id),
+            } : undefined,
             connectedToSelection: !selectedNodeId || (layout?.edges ?? []).some(edge =>
                 (edge.source === selectedNodeId && edge.target === node.id)
                 || (edge.target === selectedNodeId && edge.source === node.id),
             ),
         },
-    })), [connectionSourceNodeId, connectionTargetNodeId, layout?.edges, layout?.nodes, selectedNodeId]);
+    };
+    }), [apps, connectionSourceNodeId, connectionTargetNodeId, deleteLocalApp, drafts, drawerSession, layout?.edges, layout?.nodes, selectedNodeId, session, toggleInternetAccess]);
     const [nodes, setNodes, onNodesChange] = useNodesState(projectedNodes);
     useEffect(() => setNodes(projectedNodes), [projectedNodes, setNodes]);
     const edges = useMemo(() => (layout?.edges ?? []).map(edge => {
@@ -277,7 +404,10 @@ function ProjectNetworkGraphEditor({
             target: edge.target,
             sourceHandle: presentation.sourceHandle,
             targetHandle: presentation.targetHandle,
-            type: 'smoothstep' as const,
+            type: connectionDeletionProvenance(edge, writableAppIds) ? 'connection' : 'smoothstep',
+            data: connectionDeletionProvenance(edge, writableAppIds)
+                ? { onDelete: () => deleteConnection(edge.id) }
+                : undefined,
             pathOptions: { offset: 20 },
             markerStart: edge.internetIngress ? { type: MarkerType.ArrowClosed, color: presentation.color, width: 16, height: 16 } : undefined,
             markerEnd: edge.direction === 'INTERNET_CONNECTION'
@@ -295,34 +425,13 @@ function ProjectNetworkGraphEditor({
             labelBgPadding: [6, 3] as [number, number],
             labelBgBorderRadius: 6,
         };
-    }), [layout?.edges, selectedNodeId]);
+    }), [deleteConnection, layout?.edges, selectedNodeId, writableAppIds]);
     const selectedNode = nodes.find(node => node.id === selectedNodeId)?.data as NetworkGraphNode | undefined;
     const selectedApp = selectedNode?.kind === 'APP' ? apps.find(app => app.id === selectedNode.id.replace('APP:', '')) : undefined;
     const selectedAppRole = selectedApp ? UserGroupUtils.getRolePermissionForApp(session, selectedApp.id) ?? undefined : undefined;
-    const selectedConnections = useMemo(() => (layout?.edges ?? [])
-        .filter(edge => edge.source === selectedNodeId || edge.target === selectedNodeId)
-        .map(edge => {
-            const otherNode = (layout?.nodes ?? []).find(node => node.id === (edge.source === selectedNodeId ? edge.target : edge.source));
-            const direction = edge.source === selectedNodeId ? 'Egress' : 'Ingress';
-            const port = Number.parseInt(edge.labels[0] ?? '', 10);
-            const copyValue = direction === 'Ingress' && otherNode?.kind === 'APP' && otherNode.projectId
-                ? InternalHostnameUtils.getInternalBaseUrlForApp({ id: otherNode.id.replace('APP:', ''), projectId: otherNode.projectId }, Number.isNaN(port) ? undefined : port)
-                : undefined;
-            return {
-                id: edge.id,
-                name: otherNode?.name ?? 'Unknown workload',
-                direction,
-                label: graphEdgePresentation(edge).label,
-                copyValue
-            } satisfies PanelConnection;
-        }), [layout, selectedNodeId]);
-
-    useEffect(() => {
-        if (selectedNodeId) setIsNodeDrawerOpen(true);
-    }, [selectedNodeId]);
-
     useEffect(() => {
         if (!selectedNodeId || selectedNode?.kind !== 'APP') return;
+        if (!window.matchMedia('(min-width: 1024px)').matches) return;
 
         const animationFrame = requestAnimationFrame(() => {
             const reactFlow = reactFlowRef.current;
@@ -357,14 +466,15 @@ function ProjectNetworkGraphEditor({
         <div>
             <div
                 ref={graphContainerRef}
-                className="relative -mx-8 h-[calc(100dvh-14rem)] min-h-80 w-auto overflow-hidden bg-background lg:-mx-10"
+                className="relative -mx-8 w-auto overflow-hidden bg-background lg:-mx-10"
+                style={{ height: graphHeight ?? 'calc(100dvh - 14rem)' }}
             >
                 <div className="absolute right-4 top-4 z-10 flex overflow-hidden rounded-md border bg-background shadow-xs">
                     <Popover>
                         <PopoverTrigger render={<Button variant="ghost" size="sm" className="rounded-none border-0 text-muted-foreground shadow-none hover:text-foreground">
-                                <Info className="mr-1.5 size-3.5" />
-                                Legend
-                            </Button>} />
+                            <Info className="mr-1.5 size-3.5" />
+                            Legend
+                        </Button>} />
                         <PopoverContent align="end" className="w-auto p-3">
                             <Legend />
                         </PopoverContent>
@@ -374,20 +484,25 @@ function ProjectNetworkGraphEditor({
                         Reset
                     </Button>}
                 </div>
-                <ReactFlow
+                <ProjectNetworkGraphCanvasContextMenu
+                    projectId={projectId}
+                    canCreateApps={canCreateApps}
+                >
+                    <ReactFlow
                     onInit={instance => { reactFlowRef.current = instance; }}
                     nodes={nodes}
                     edges={edges}
                     onNodesChange={onNodesChange}
                     nodeTypes={nodeTypes}
+                    edgeTypes={edgeTypes}
                     fitView
                     fitViewOptions={{ padding: 0.2, maxZoom: 1.1 }}
                     minZoom={0.3}
                     maxZoom={1.5}
-                    zoomOnScroll={false}
+                    zoomOnScroll
                     zoomOnPinch={false}
                     zoomOnDoubleClick={false}
-                    preventScrolling={false}
+                    preventScrolling
                     nodesDraggable={canEditLayout}
                     nodesConnectable
                     elementsSelectable={false}
@@ -419,28 +534,7 @@ function ProjectNetworkGraphEditor({
                         setConnectionSourceNodeId(undefined);
                         setConnectionTargetNodeId(undefined);
                     }}
-                    onEdgeContextMenu={(event, edge) => {
-                        event.preventDefault();
-                        setNodeMenu(undefined);
-                        const graphEdge = layout?.edges.find(item => item.id === edge.id);
-                        if (connectionDeletionProvenance(graphEdge, writableAppIds)) {
-                            setEdgeMenu({ edgeId: edge.id, x: event.clientX, y: event.clientY });
-                        }
-                    }}
-                    onNodeContextMenu={(event, node) => {
-                        event.preventDefault();
-                        setEdgeMenu(undefined);
-                        const data = node.data as NetworkGraphNode;
-                        const appId = data.kind === 'APP' ? data.id.replace('APP:', '') : undefined;
-                        if (appId && localAppIds.has(appId) && (canRenameApps || canDeleteApps || writable(appId))) {
-                            setNodeMenu({ appId, x: event.clientX, y: event.clientY });
-                        } else {
-                            setNodeMenu(undefined);
-                        }
-                    }}
                     onPaneClick={() => {
-                        setEdgeMenu(undefined);
-                        setNodeMenu(undefined);
                     }}
                     onNodeMouseEnter={(_event, node) => {
                         cancelConnectionTargetLeave();
@@ -467,64 +561,37 @@ function ProjectNetworkGraphEditor({
                     onNodeClick={(_event, node) => {
                         const data = node.data as NetworkGraphNode;
                         if (data.kind !== 'INTERNET') {
-                            setSelectedNodeId(node.id);
+                            drawerSession.selectNode(data);
                         }
                     }}
                 >
                     <Background variant={BackgroundVariant.Dots} gap={22} size={1.5} color="color-mix(in oklab, var(--muted-foreground) 35%, transparent)" />
                     <Controls showInteractive={false} />
-                </ReactFlow>
+                    </ReactFlow>
+                </ProjectNetworkGraphCanvasContextMenu>
                 {dirty && (
                     <Card className="absolute bottom-4 left-16 z-10 flex w-fit overflow-hidden p-1 shadow-md">
-                        <Button
-                            size="sm"
-                            disabled={saving}
-                            className="bg-qs-600 text-white hover:bg-qs-700 disabled:bg-qs-600 disabled:text-white"
-                            onClick={() => void saveChanges()}
-                        >
-                            Save & Apply
-                        </Button>
-                        <Button
-                            variant="ghost"
-                            size="sm"
-                            disabled={saving}
-                            className="text-muted-foreground hover:text-foreground ml-2"
-                            onClick={discardChanges}
-                        >
-                            Cancel
-                        </Button>
+                        <CardFooter className="p-0">
+                            <Button
+                                size="sm"
+                                disabled={saving}
+                                className="bg-qs-600 text-white hover:bg-qs-700 disabled:bg-qs-600 disabled:text-white"
+                                onClick={() => void saveChanges()}
+                            >
+                                Save & Apply
+                            </Button>
+                            <Button
+                                variant="ghost"
+                                size="sm"
+                                disabled={saving}
+                                className="text-muted-foreground hover:text-foreground ml-2"
+                                onClick={discardChanges}
+                            >
+                                Cancel
+                            </Button>
+                        </CardFooter>
                     </Card>
                 )}
-                {edgeMenu && createPortal(
-                    <div className="fixed z-50 rounded-md border bg-popover p-1 shadow-md" style={{ left: edgeMenu.x, top: edgeMenu.y }}>
-                        <Button variant="ghost" size="sm" className="w-full justify-start text-destructive" onClick={() => deleteConnection(edgeMenu.edgeId)}>
-                            <Trash2 className="mr-2 size-4" /> Delete connection
-                        </Button>
-                    </div>,
-                    document.body,
-                )}
-                {nodeMenu && (() => {
-                    const app = apps.find(item => item.id === nodeMenu.appId);
-                    const draft = drafts[nodeMenu.appId];
-                    if (!app || !draft) return null;
-                    return createPortal(
-                        <div className="fixed z-50 min-w-44 rounded-md border bg-popover p-1 shadow-md" style={{ left: nodeMenu.x, top: nodeMenu.y }}>
-                            {writable(app.id) && <Button variant="ghost" size="sm" className="w-full justify-start" onClick={() => toggleInternetAccess(app.id)}>
-                                <Globe2 className="mr-2 size-4" />
-                                {draft.allowInternetAccess ? 'Disable' : 'Enable'} Egress Internet Access
-                            </Button>}
-                            {canRenameApps && <EditAppDialog projectId={projectId} existingItem={app}>
-                                <Button variant="ghost" size="sm" className="w-full justify-start" onClick={() => setNodeMenu(undefined)}>
-                                    <Edit2 className="mr-2 size-4" /> Edit App Name
-                                </Button>
-                            </EditAppDialog>}
-                            {canDeleteApps && <Button variant="ghost" size="sm" className="w-full justify-start text-destructive" onClick={() => void deleteLocalApp(app.id)}>
-                                <Trash2 className="mr-2 size-4" /> Delete App
-                            </Button>}
-                        </div>,
-                        document.body,
-                    );
-                })()}
                 {edges.length === 0 && nodes.length === 0 && <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-2 text-center text-sm text-muted-foreground">
                     <Cloud className="size-6 opacity-40" /><p>No active network policy connections yet.</p>
                 </div>}
@@ -533,13 +600,18 @@ function ProjectNetworkGraphEditor({
                     node={selectedNode}
                     app={selectedApp}
                     role={selectedAppRole}
-                    connections={selectedConnections}
-                    open={isNodeDrawerOpen}
-                    onOpenChange={setIsNodeDrawerOpen}
-                    onOpenChangeComplete={open => {
-                        if (!open) setSelectedNodeId(undefined);
+                    s3Targets={s3Targets}
+                    storageClasses={storageClasses}
+                    volumeBackups={selectedApp ? (volumeBackupsByApp[selectedApp.id] ?? []) : []}
+                    gitSshPublicKey={selectedApp ? gitSshPublicKeysByApp[selectedApp.id] : undefined}
+                    open={drawerSession.open}
+                    onOpenChange={drawerSession.onOpenChange}
+                    onOpenChangeComplete={drawerSession.onOpenChangeComplete}
+                    requestedTab={drawerSession.requestedTab}
+                    onTabChange={tab => {
+                        if (selectedApp) drawerSession.openAppTab(selectedApp.id, tab);
                     }}
-                    onOpen={() => router.push(`/project/app/${selectedNode.id.replace('APP:', '')}`)} />}
+                />}
             </div>
         </div>
     );
diff --git a/src/app/project/[projectId]/app-components/project-network-graph/drawer/drawer-backup-list.tsx b/src/app/project/[projectId]/app-components/project-network-graph/drawer/drawer-backup-list.tsx
new file mode 100644
index 00000000..855de0d1
--- /dev/null
+++ b/src/app/project/[projectId]/app-components/project-network-graph/drawer/drawer-backup-list.tsx
@@ -0,0 +1,89 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Archive } from 'lucide-react';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from '@/components/ui/empty';
+import LoadingSpinner from '@/components/ui/loading-spinner';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { formatDateTime } from '@/frontend/utils/format.utils';
+import { Actions } from '@/frontend/utils/nextjs-actions.utils';
+import { KubeSizeConverter } from '@/shared/utils/kubernetes-size-converter.utils';
+import type { BackupEntry } from '@/shared/model/backup-info.model';
+import type { VolumeBackupExtendedModel } from '@/shared/model/volume-backup-extended.model';
+import { getBackupsForVolumeSchedule } from '@/app/project/app/[appId]/volumes/actions';
+
+export function DrawerBackupList({
+    volumeBackup,
+}: {
+    volumeBackup: VolumeBackupExtendedModel;
+}) {
+    const [backups, setBackups] = useState<BackupEntry[]>();
+    const [hasLoadError, setHasLoadError] = useState(false);
+
+    useEffect(() => {
+        setBackups(undefined);
+        setHasLoadError(false);
+        void Actions.run(() => getBackupsForVolumeSchedule(volumeBackup.id))
+            .then(setBackups)
+            .catch(() => setHasLoadError(true));
+    }, [volumeBackup.id]);
+
+    if (hasLoadError) {
+        return (
+            <Alert variant="destructive">
+                <AlertTitle>Backups could not be loaded</AlertTitle>
+                <AlertDescription>
+                    Check the backup storage connection and try again.
+                </AlertDescription>
+            </Alert>
+        );
+    }
+
+    if (!backups) {
+        return (
+            <div className="flex justify-center py-12">
+                <LoadingSpinner />
+            </div>
+        );
+    }
+
+    if (backups.length === 0) {
+        return (
+            <Empty>
+                <EmptyHeader>
+                    <EmptyMedia variant="icon">
+                        <Archive />
+                    </EmptyMedia>
+                    <EmptyTitle>No backups yet</EmptyTitle>
+                    <EmptyDescription>
+                        This backup schedule has not created any backups yet.
+                    </EmptyDescription>
+                </EmptyHeader>
+            </Empty>
+        );
+    }
+
+    return (
+        <Table>
+            <TableHeader>
+                <TableRow>
+                    <TableHead>Created</TableHead>
+                    <TableHead>Size</TableHead>
+                </TableRow>
+            </TableHeader>
+            <TableBody>
+                {backups.map((backup) => (
+                    <TableRow key={backup.key}>
+                        <TableCell>{formatDateTime(backup.backupDate, true)}</TableCell>
+                        <TableCell>
+                            {backup.sizeBytes
+                                ? KubeSizeConverter.convertBytesToReadableSize(backup.sizeBytes)
+                                : 'Unknown'}
+                        </TableCell>
+                    </TableRow>
+                ))}
+            </TableBody>
+        </Table>
+    );
+}
diff --git a/src/app/project/[projectId]/app-components/project-network-graph/drawer/drawer-backups-tab.tsx b/src/app/project/[projectId]/app-components/project-network-graph/drawer/drawer-backups-tab.tsx
new file mode 100644
index 00000000..c3dd306d
--- /dev/null
+++ b/src/app/project/[projectId]/app-components/project-network-graph/drawer/drawer-backups-tab.tsx
@@ -0,0 +1,40 @@
+'use client';
+
+import type { S3Target } from '@prisma/client';
+import VolumeBackupList from '@/app/project/app/[appId]/volumes/volume-backup';
+import type { AppExtendedModel } from '@/shared/model/app-extended.model';
+import { RolePermissionEnum } from '@/shared/model/role-extended.model.ts';
+import type { VolumeBackupExtendedModel } from '@/shared/model/volume-backup-extended.model';
+import { useNestedDrawer } from './nested-drawer';
+import { DrawerBackupList } from './drawer-backup-list';
+
+export function DrawerBackupsTab({
+    app,
+    role,
+    s3Targets,
+    volumeBackups,
+}: {
+    app: AppExtendedModel;
+    role: RolePermissionEnum;
+    s3Targets: S3Target[];
+    volumeBackups: VolumeBackupExtendedModel[];
+}) {
+    const { openNestedDrawer } = useNestedDrawer();
+
+    return (
+        <VolumeBackupList
+            app={app}
+            readonly={role !== RolePermissionEnum.READWRITE}
+            s3Targets={s3Targets}
+            volumeBackups={volumeBackups}
+            hideCard
+            onBackupScheduleClick={(volumeBackup) =>
+                openNestedDrawer({
+                    title: 'Backups',
+                    description: `Backups for the ${volumeBackup.cron} schedule.`,
+                    content: <DrawerBackupList volumeBackup={volumeBackup} />,
+                })
+            }
+        />
+    );
+}
diff --git a/src/app/project/[projectId]/app-components/project-network-graph/drawer/drawer-deployments-tab.tsx b/src/app/project/[projectId]/app-components/project-network-graph/drawer/drawer-deployments-tab.tsx
new file mode 100644
index 00000000..b83e1ee6
--- /dev/null
+++ b/src/app/project/[projectId]/app-components/project-network-graph/drawer/drawer-deployments-tab.tsx
@@ -0,0 +1,59 @@
+import { AppExtendedModel } from "@/shared/model/app-extended.model";
+import { RolePermissionEnum } from "@/shared/model/role-extended.model.ts";
+import { useNestedDrawer } from "./nested-drawer";
+import { DeploymentInfoModel } from "@/shared/model/deployment-info.model";
+import { BuildLogsDialogContent } from "@/app/project/app/[appId]/overview/build-logs-overlay";
+import BuildsTab from "@/app/project/app/[appId]/overview/deployments";
+import { formatDateTime } from "@/frontend/utils/format.utils";
+import WebhookDeploymentInfo from "@/app/project/app/[appId]/overview/webhook-deployment";
+import { Button } from "@/components/ui/button";
+import { Webhook } from "lucide-react";
+
+
+
+
+export default function DrawerDeploymentsTab({
+    app,
+    role,
+}: {
+    app: AppExtendedModel;
+    role: RolePermissionEnum;
+}) {
+    const { openNestedDrawer } = useNestedDrawer();
+
+    const showLogs = (deployment: DeploymentInfoModel) => {
+        openNestedDrawer({
+            title: 'Deployment Logs',
+            description: `View the logs for the selected deployment ${formatDateTime(deployment.createdAt)}.`,
+            content: (
+                <BuildLogsDialogContent
+                    deploymentInfo={deployment}
+                    workloadId={app.id}
+                    workloadType="app"
+                    hideHeader
+                />
+            ),
+        });
+    };
+
+    const showWebhookCard = () => {
+        openNestedDrawer({
+            title: 'Webhook',
+            description: ``,
+            content: (
+                <WebhookDeploymentInfo
+                    app={app}
+                    role={role}
+                />
+            ),
+        });
+    }
+
+    return <div className="space-y-4">
+        <div className="flex items-end justify-between pl-2">
+            <div className="font-semibold text-lg text-foreground/80">Latest Deployments</div>
+            <Button onClick={showWebhookCard} variant="outline"><Webhook /> Configure Webhooks</Button>
+        </div>
+        <BuildsTab app={app} role={role} view="grid" onShowLogs={showLogs} />
+    </div>;
+}
\ No newline at end of file
diff --git a/src/app/project/[projectId]/app-components/project-network-graph/drawer/drawer-environment.tsx b/src/app/project/[projectId]/app-components/project-network-graph/drawer/drawer-environment.tsx
new file mode 100644
index 00000000..5744297b
--- /dev/null
+++ b/src/app/project/[projectId]/app-components/project-network-graph/drawer/drawer-environment.tsx
@@ -0,0 +1,123 @@
+'use client';
+
+import { Copy, Eye, EyeOff } from 'lucide-react';
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import type { AppExtendedModel } from '@/shared/model/app-extended.model';
+import { EnvVarUtils } from '@/shared/utils/env-var.utils';
+import { toast } from 'sonner';
+
+type EnvironmentVariable = {
+    name: string;
+    value: string;
+};
+
+function VariableList({
+    title,
+    variables,
+}: {
+    title: string;
+    variables: EnvironmentVariable[];
+}) {
+    const [visibleValues, setVisibleValues] = useState<Set<string>>(new Set());
+
+    return (
+        <div className="space-y-2">
+            <h4 className="text-sm font-medium">{title}</h4>
+            {variables.length === 0 ? (
+                <p className="text-sm text-muted-foreground">None configured.</p>
+            ) : (
+                <div className="divide-y rounded-2xl border">
+                    {variables.map((variable, index) => {
+                        const variableId = `${variable.name}-${index}`;
+                        const isVisible = visibleValues.has(variableId);
+
+                        return (
+                            <div
+                                key={variableId}
+                                className="group flex items-center gap-3 px-3 py-2"
+                            >
+                                <div className="flex min-w-0 flex-1 items-center gap-1">
+                                    <code className="min-w-0 truncate text-xs font-medium">
+                                        {variable.name}
+                                    </code>
+                                    <Button
+                                        type="button"
+                                        variant="ghost"
+                                        size="icon"
+                                        className="pointer-events-none size-6 shrink-0 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:opacity-100"
+                                        title="Copy variable name"
+                                        onClick={() => {
+                                            void navigator.clipboard.writeText(
+                                                variable.name,
+                                            );
+                                            toast.success('Variable name copied');
+                                        }}
+                                    >
+                                        <Copy className="size-3.5" />
+                                        <span className="sr-only">
+                                            Copy variable name
+                                        </span>
+                                    </Button>
+                                </div>
+                                <code className="min-w-0 flex-1 truncate text-right text-xs text-muted-foreground">
+                                    {isVisible ? variable.value : '••••••••'}
+                                </code>
+                                <Button
+                                    type="button"
+                                    variant="ghost"
+                                    size="icon"
+                                    className="size-7 shrink-0"
+                                    onClick={() =>
+                                        setVisibleValues((current) => {
+                                            const next = new Set(current);
+                                            if (next.has(variableId)) {
+                                                next.delete(variableId);
+                                            } else {
+                                                next.add(variableId);
+                                            }
+                                            return next;
+                                        })
+                                    }
+                                >
+                                    {isVisible ? (
+                                        <EyeOff className="size-3.5" />
+                                    ) : (
+                                        <Eye className="size-3.5" />
+                                    )}
+                                    <span className="sr-only">
+                                        {isVisible ? 'Hide value' : 'Show value'}
+                                    </span>
+                                </Button>
+                            </div>
+                        );
+                    })}
+                </div>
+            )}
+        </div>
+    );
+}
+
+export function DrawerEnvironment({
+    app,
+    onEdit,
+}: {
+    app: AppExtendedModel;
+    onEdit: () => void;
+}) {
+    return (
+        <div className="space-y-6">
+            <VariableList
+                title="Environment variables"
+                variables={EnvVarUtils.parseEnvVariables(app)}
+            />
+            <VariableList
+                title="Build arguments"
+                variables={EnvVarUtils.parseBuildArgs(app)}
+            />
+            <Button type="button" variant="outline" onClick={onEdit}>
+                Edit variables
+            </Button>
+        </div>
+    );
+}
diff --git a/src/app/project/[projectId]/app-components/project-network-graph/drawer/drawer-settings.tsx b/src/app/project/[projectId]/app-components/project-network-graph/drawer/drawer-settings.tsx
new file mode 100644
index 00000000..3bbade4a
--- /dev/null
+++ b/src/app/project/[projectId]/app-components/project-network-graph/drawer/drawer-settings.tsx
@@ -0,0 +1,190 @@
+'use client';
+
+import {
+    Boxes,
+    Globe2,
+    HardDrive,
+    Network,
+    SlidersHorizontal,
+    Zap,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import BasicAuth from '@/app/project/app/[appId]/advanced/basic-auth';
+import { saveHealthCheck } from '@/app/project/app/[appId]/advanced/actions';
+import HealthCheckSettings from '@/app/project/app/[appId]/advanced/health-check-settings';
+import NetworkPolicy from '@/app/project/app/[appId]/advanced/network-policy';
+import NodePortsCard from '@/app/project/app/[appId]/domains/node-ports';
+import EnvEdit from '@/app/project/app/[appId]/environment/env-edit';
+import GeneralAppContainerConfig from '@/app/project/app/[appId]/general/app-container-config';
+import GeneralAppRateLimits from '@/app/project/app/[appId]/general/app-rate-limits';
+import GeneralAppSource from '@/app/project/app/[appId]/general/app-source';
+import StorageList from '@/app/project/app/[appId]/volumes/storages';
+import DomainsCard from '@/components/custom/domains-card';
+import FileMountsCard from '@/components/custom/file-mounts-card';
+import type { AppExtendedModel } from '@/shared/model/app-extended.model';
+import { RolePermissionEnum } from '@/shared/model/role-extended.model.ts';
+import { SettingsSection } from './settings-section';
+import { DrawerEnvironment } from './drawer-environment';
+import { useNestedDrawer } from './nested-drawer';
+
+export function DrawerSettings({
+    app,
+    role,
+    storageClasses,
+    gitSshPublicKey,
+}: {
+    app: AppExtendedModel;
+    role: RolePermissionEnum;
+    storageClasses: string[];
+    gitSshPublicKey?: string;
+}) {
+    const readonly = role !== RolePermissionEnum.READWRITE;
+    const { openNestedDrawer } = useNestedDrawer();
+
+    return (
+        <div className="relative grid gap-16 grid-cols-1 lg:grid-cols-[1fr_auto]">
+            <div className="pb-4 space-y-10 [&_[data-slot=card-footer]]:mt-4">
+                <SettingsSection
+                    id="source"
+                    title="Source"
+                    icon={Boxes}
+                >
+                    <GeneralAppSource
+                        hideCard
+                        app={app}
+                        readonly={readonly}
+                        gitSshPublicKey={gitSshPublicKey}
+                    />
+                </SettingsSection>
+                <SettingsSection
+                    id="deployment"
+                    title="Deployment"
+                    icon={SlidersHorizontal}
+                >
+                    <GeneralAppRateLimits app={app} readonly={readonly} hideCard />
+                    <Button
+                        type="button"
+                        variant="outline"
+                        onClick={() =>
+                            openNestedDrawer({
+                                title: 'Advanced settings',
+                                content: (
+                                    <GeneralAppContainerConfig
+                                        app={app}
+                                        readonly={readonly}
+
+                                    />
+                                ),
+                            })
+                        }>
+                        Advanced container settings
+                    </Button>
+                </SettingsSection>
+                <SettingsSection
+                    id="environment"
+                    title="Environment"
+                    icon={Zap}
+                >
+                    <DrawerEnvironment
+                        app={app}
+                        onEdit={() =>
+                            openNestedDrawer({
+                                title: 'Environment variables',
+                                content: (
+                                    <EnvEdit
+                                        app={app}
+                                        readonly={readonly}
+                                        hideCard={false}
+                                    />
+                                ),
+                            })
+                        }
+                    />
+                </SettingsSection>
+                <SettingsSection
+                    id="networking"
+                    title="Networking"
+                    icon={Network}
+                >
+                    <DomainsCard
+                        readonly={readonly}
+                        domains={app.appDomains}
+                        workloadId={app.id}
+                        workloadType="app"
+                        hideCard
+                    />
+                    <NodePortsCard app={app} readonly={readonly} hideCard />
+                    <Button
+                        type="button"
+                        variant="outline"
+                        onClick={() =>
+                            openNestedDrawer({
+                                title: 'Network policies',
+                                content: (
+                                    <NetworkPolicy
+                                        app={app}
+                                        readonly={readonly}
+                                        hideCard={false}
+                                    />
+                                ),
+                            })
+                        }>
+                        Edit network policies
+                    </Button>
+                </SettingsSection>
+                <SettingsSection id="storage" title="Storage" icon={HardDrive}>
+                    <StorageList
+                        app={app}
+                        readonly={readonly}
+                        storageClasses={storageClasses}
+                        hideCard
+                    />
+                    <FileMountsCard
+                        readonly={readonly}
+                        fileMounts={app.appFileMounts}
+                        workloadId={app.id}
+                        workloadType="app"
+                        hideCard
+                    />
+                </SettingsSection>
+                <SettingsSection
+                    id="advanced"
+                    title="Advanced"
+                    icon={Globe2}
+                >
+                    <BasicAuth app={app} readonly={readonly} hideCard />
+                    <div>
+                        <CardHeader>
+                            <CardTitle>Health Checks</CardTitle>
+                            <CardDescription>
+                                Configure healthchecks so that k3s can automatically monitor when your application is fully started up and ready to receive traffic (In kubernetes terms, startup, readiness and liveness probes).
+                            </CardDescription>
+                        </CardHeader>
+                        <CardFooter>
+                            <Button
+                                type="button"
+                                variant="outline"
+                                onClick={() =>
+                                    openNestedDrawer({
+                                        title: 'Health checks',
+                                        content: (
+                                            <HealthCheckSettings
+                                                readonly={readonly}
+                                                workload={app}
+                                                saveHealthCheck={saveHealthCheck}
+                                                hideCard={false}
+                                            />
+                                        ),
+                                    })
+                                }
+                            >
+                                Edit health checks
+                            </Button>
+                        </CardFooter>
+                    </div>
+                </SettingsSection>
+            </div>
+        </div>
+    );
+}
diff --git a/src/app/project/[projectId]/app-components/project-network-graph/drawer/nested-drawer.tsx b/src/app/project/[projectId]/app-components/project-network-graph/drawer/nested-drawer.tsx
new file mode 100644
index 00000000..7966fa4d
--- /dev/null
+++ b/src/app/project/[projectId]/app-components/project-network-graph/drawer/nested-drawer.tsx
@@ -0,0 +1,98 @@
+'use client';
+
+import { ArrowLeft } from 'lucide-react';
+import {
+    createContext,
+    useCallback,
+    useContext,
+    useState,
+    type ReactNode,
+} from 'react';
+import { Button } from '@/components/ui/button';
+import {
+    Drawer,
+    DrawerContent,
+    DrawerDescription,
+    DrawerHeader,
+    DrawerTitle,
+} from '@/components/ui/drawer';
+import { ScrollArea } from '@/components/ui/scroll-area';
+
+type NestedDrawerOptions = {
+    title: string;
+    description?: ReactNode;
+    content: ReactNode;
+};
+
+type NestedDrawerContextValue = {
+    openNestedDrawer: (options: NestedDrawerOptions) => void;
+    closeNestedDrawer: () => void;
+};
+
+const NestedDrawerContext = createContext<NestedDrawerContextValue | null>(null);
+
+export function NestedDrawerProvider({ children }: { children: ReactNode }) {
+    const [drawer, setDrawer] = useState<NestedDrawerOptions | null>(null);
+    const closeNestedDrawer = useCallback(() => setDrawer(null), []);
+    const openNestedDrawer = useCallback(
+        (options: NestedDrawerOptions) => setDrawer(options),
+        [],
+    );
+
+    return (
+        <NestedDrawerContext.Provider
+            value={{ openNestedDrawer, closeNestedDrawer }}
+        >
+            {children}
+            <Drawer
+                swipeDirection="right"
+                disablePointerDismissal
+                modal={false}
+                open={drawer !== null}
+                onOpenChange={(open) => !open && closeNestedDrawer()}
+            >
+                <DrawerContent className="min-w-0 border border-border/60 data-[swipe-axis=x]:w-[calc(100%-1rem)] sm:data-[swipe-axis=x]:w-1/2 shadow">
+                    <DrawerHeader className="p-6 text-left">
+                        <DrawerTitle className="flex items-center gap-2">
+                            <Button
+                                type="button"
+                                variant="ghost"
+                                size="icon"
+                                className="size-8 opacity-70 hover:opacity-100"
+                                onClick={closeNestedDrawer}>
+                                <ArrowLeft className="size-4" />
+                                <span className="sr-only">Back</span>
+                            </Button>
+                            <span>{drawer?.title}</span>
+                        </DrawerTitle>
+                        {drawer?.description && (
+                            <DrawerDescription>
+                                {drawer.description}
+                            </DrawerDescription>
+                        )}
+                    </DrawerHeader>
+                    <ScrollArea
+                        className="min-h-0 min-w-0 flex-1 px-4 pb-4"
+                        contentClassName="h-full"
+                    >
+                        <div className="h-full min-w-0 p-1">
+                            {drawer?.content}
+                        </div>
+                    </ScrollArea>
+                </DrawerContent>
+            </Drawer>
+        </NestedDrawerContext.Provider>
+    );
+}
+
+export function useNestedDrawer() {
+    const context = useContext(NestedDrawerContext);
+
+    if (!context) {
+        throw new Error(
+            'useNestedDrawer must be used within a NestedDrawerProvider.',
+        );
+    }
+
+    return context;
+}
diff --git a/src/app/project/[projectId]/app-components/project-network-graph/drawer/settings-section.tsx b/src/app/project/[projectId]/app-components/project-network-graph/drawer/settings-section.tsx
new file mode 100644
index 00000000..8cc73cd3
--- /dev/null
+++ b/src/app/project/[projectId]/app-components/project-network-graph/drawer/settings-section.tsx
@@ -0,0 +1,31 @@
+import type { LucideIcon } from 'lucide-react';
+import type { ReactNode } from 'react';
+
+export function SettingsSection({
+    id,
+    title,
+    icon: Icon,
+    children,
+}: {
+    id: string;
+    title: string;
+    icon: LucideIcon;
+    children: ReactNode;
+}) {
+    return (
+        <section
+            id={id}
+            className="relative scroll-mt-4 space-y-3 pl-14 before:absolute before:inset-y-0 before:left-5 before:w-px before:bg-border"
+        >
+            <div className="absolute left-0 top-0 flex size-10 items-center justify-center rounded-full border bg-background text-muted-foreground">
+                <Icon className="size-4" />
+            </div>
+            <div className="space-y-0.5 pt-1.5 pb-8">
+                <h3 className="text-xl font-medium text-foreground/90">{title}</h3>
+            </div>
+            <div className="space-y-8 max-w-xl 2xl:max-w-2xl 3xl:max-w-3xl">
+                {children}
+            </div>
+        </section>
+    );
+}
diff --git a/src/app/project/[projectId]/app-components/project-network-graph/node-details-drawer.tsx b/src/app/project/[projectId]/app-components/project-network-graph/node-details-drawer.tsx
index 675e3071..520c9f08 100644
--- a/src/app/project/[projectId]/app-components/project-network-graph/node-details-drawer.tsx
+++ b/src/app/project/[projectId]/app-components/project-network-graph/node-details-drawer.tsx
@@ -1,25 +1,22 @@
 'use client';
 
-import { useEffect, type Ref } from 'react';
+import { type ReactNode, type Ref } from 'react';
 
 import {
-    ArrowDown,
-    ArrowUp,
     BarChart3,
     Bot,
     Boxes,
-    ChevronDown,
-    Copy,
     ExternalLink,
-    Globe2,
     Hammer,
-    LayoutDashboard,
-    Network,
+    Key,
     Play,
     Rocket,
-    ScrollText,
+    Logs as LogsIcon,
+    Pencil,
+    Settings,
     Square,
     X,
+    RotateCwClock,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import {
@@ -29,39 +26,46 @@ import {
     DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import {
-    Item,
-    ItemActions,
-    ItemContent,
-    ItemDescription,
-    ItemGroup,
-    ItemMedia,
-    ItemTitle,
-} from '@/components/ui/item';
+    Tooltip,
+    TooltipContent,
+    TooltipProvider,
+    TooltipTrigger,
+} from '@/components/ui/tooltip';
 import { ScrollArea } from '@/components/ui/scroll-area';
-import { Separator } from '@/components/ui/separator';
 import {
     Drawer,
     DrawerContent,
     DrawerDescription,
-    DrawerFooter,
     DrawerHeader,
     DrawerTitle,
 } from '@/components/ui/drawer';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import PodStatusIndicator from '@/components/custom/pod-status-indicator';
 import { deploy, startApp, stopApp } from '@/app/project/app/[appId]/actions';
-import { useDialog, usePodsStatus } from '@/frontend/states/zustand.states';
+import { usePodsStatus } from '@/frontend/states/zustand.states';
 import { cn } from '@/frontend/utils/utils';
 import { AppSourceUtils } from '@/frontend/utils/app-source.utils';
+import { AppLifecycleUtils } from '@/frontend/utils/app-lifecycle.utils';
 import { Toast } from '@/frontend/utils/toast.utils';
-import { toast } from 'sonner';
 import type { AppExtendedModel } from '@/shared/model/app-extended.model';
 import Logs from '@/app/project/app/[appId]/overview/logs';
-import BuildsTab from '@/app/project/app/[appId]/overview/deployments';
 import MonitoringTab from '@/app/project/app/[appId]/overview/monitoring-app';
 import { RolePermissionEnum } from '@/shared/model/role-extended.model.ts';
 import type { NetworkGraphNode } from './project-network-graph-projection';
 import GeneralAppSource from '@/app/project/app/[appId]/general/app-source';
+import DbCredentials from '@/app/project/app/[appId]/credentials/db-crendentials';
+import DbToolsCard from '@/app/project/app/[appId]/credentials/db-tools';
+import { DrawerSettings } from './drawer/drawer-settings';
+import { NestedDrawerProvider } from './drawer/nested-drawer';
+import { DrawerBackupsTab } from './drawer/drawer-backups-tab';
+import { EditAppDialog } from '../edit-app-dialog';
+import type { S3Target } from '@prisma/client';
+import type { VolumeBackupExtendedModel } from '@/shared/model/volume-backup-extended.model';
+import {
+    DrawerSessionUtils,
+    type DrawerTab,
+} from './project-network-graph-drawer-session';
+import DrawerDeploymentsTab from './drawer/drawer-deployments-tab';
 
 export type PanelConnection = {
     id: string;
@@ -71,6 +75,14 @@ export type PanelConnection = {
     copyValue?: string;
 };
 
+function DrawerTabScrollArea({ children }: { children: ReactNode }) {
+    return (
+        <ScrollArea className="min-h-0 min-w-0 flex-1 px-6 pt-2">
+            <div className="min-w-0 pb-4">{children}</div>
+        </ScrollArea>
+    );
+}
+
 function AppStatusActions({
     app,
     role,
@@ -81,83 +93,143 @@ function AppStatusActions({
     const deploymentStatus = usePodsStatus(
         (state) => state.podsStatus.get(app.id)?.deploymentStatus ?? 'UNKNOWN',
     );
-    const canManage = role === RolePermissionEnum.READWRITE;
-    const appSourceIsConfigured = AppSourceUtils.isConfiguredSource(app);
-    const canStart = ['ERROR', 'UNKNOWN', 'SHUTDOWN', 'SHUTTING_DOWN'].includes(
-        deploymentStatus,
-    );
-    const canStop = [
-        'BUILDING',
-        'DEPLOYED',
-        'ERROR',
-        'UNKNOWN',
-        'DEPLOYING',
-    ].includes(deploymentStatus);
+    const lifecycle = AppLifecycleUtils.availability(app, role, deploymentStatus);
+    const openDomain = (domain: AppExtendedModel['appDomains'][number]) => {
+        const protocol = domain.useSsl ? 'https' : 'http';
 
-    return (
-        <div className="flex items-center rounded-md bg-emerald-500/10 px-2 py-1">
+        window.open(`${protocol}://${domain.hostname}`, '_blank');
+    };
 
-            {canManage ? (
-                <DropdownMenu>
-                    <DropdownMenuTrigger>
-                        <div className="flex items-center gap-1">
-                            <PodStatusIndicator appId={app.id} showLabel />
-                            <Button
-                                variant="ghost"
-                                size="icon"
-                                className="ml-1 size-5"
-                            >
-                                <ChevronDown className="size-3.5" />
-                                <span className="sr-only">App actions</span>
-                            </Button>
-                        </div>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent align="end">
-                        <DropdownMenuItem
-                            disabled={!appSourceIsConfigured}
-                            onClick={() =>
-                                void Toast.fromAction(() => deploy(app.id))
-                            }
-                        >
-                            <Rocket />
-                            Deploy
-                        </DropdownMenuItem>
-                        {app.appType === 'APP' &&
-                            (app.sourceType === 'GIT' ||
-                                app.sourceType === 'GIT_SSH') && (
-                                <DropdownMenuItem
-                                    disabled={!appSourceIsConfigured}
-                                    onClick={() =>
-                                        void Toast.fromAction(() =>
-                                            deploy(app.id, true),
-                                        )
+    return (
+        <div className="flex shrink-0 items-center gap-1 bg-stone-100 rounded-2xl pl-4 pr-2 py-1">
+            <PodStatusIndicator appId={app.id} />
+            {(lifecycle.canManage || app.appDomains.length > 0) && (
+                <TooltipProvider delay={300}>
+                    <div className="ml-2 flex items-center gap-1 pl-2">
+                        {lifecycle.canManage && (
+                            <>
+                                <Tooltip>
+                                    <TooltipTrigger
+                                        render={
+                                            <Button
+                                                type="button"
+                                                variant="ghost"
+                                                size="icon-sm"
+                                                disabled={!lifecycle.canDeploy}
+                                                onClick={() => void Toast.fromAction(() => deploy(app.id))}
+                                            >
+                                                <Rocket />
+                                                <span className="sr-only">Deploy</span>
+                                            </Button>
+                                        }
+                                    />
+                                    <TooltipContent>Deploy</TooltipContent>
+                                </Tooltip>
+                                {lifecycle.supportsRebuild && (
+                                    <Tooltip>
+                                        <TooltipTrigger
+                                            render={
+                                                <Button
+                                                    type="button"
+                                                    variant="ghost"
+                                                    size="icon-sm"
+                                                    disabled={!lifecycle.canRebuild}
+                                                    onClick={() => void Toast.fromAction(() => deploy(app.id, true))}
+                                                >
+                                                    <Hammer />
+                                                    <span className="sr-only">Rebuild</span>
+                                                </Button>
+                                            }
+                                        />
+                                        <TooltipContent>Rebuild</TooltipContent>
+                                    </Tooltip>
+                                )}
+                                <Tooltip>
+                                    <TooltipTrigger
+                                        render={
+                                            <Button
+                                                type="button"
+                                                variant="ghost"
+                                                size="icon-sm"
+                                                disabled={!lifecycle.canStart}
+                                                onClick={() => void Toast.fromAction(() => startApp(app.id))}
+                                            >
+                                                <Play />
+                                                <span className="sr-only">Start</span>
+                                            </Button>
+                                        }
+                                    />
+                                    <TooltipContent>Start</TooltipContent>
+                                </Tooltip>
+                                <Tooltip>
+                                    <TooltipTrigger
+                                        render={
+                                            <Button
+                                                type="button"
+                                                variant="ghost"
+                                                size="icon-sm"
+                                                className="hover:bg-destructive/10 hover:text-destructive"
+                                                disabled={!lifecycle.canStop}
+                                                onClick={() => void Toast.fromAction(() => stopApp(app.id))}
+                                            >
+                                                <Square />
+                                                <span className="sr-only">Stop</span>
+                                            </Button>
+                                        }
+                                    />
+                                    <TooltipContent>Stop</TooltipContent>
+                                </Tooltip>
+                            </>
+                        )}
+                        {app.appDomains.length === 1 && (
+                            <Tooltip>
+                                <TooltipTrigger
+                                    render={
+                                        <Button
+                                            type="button"
+                                            variant="ghost"
+                                            size="icon-sm"
+                                            onClick={() => openDomain(app.appDomains[0])}
+                                        >
+                                            <ExternalLink />
+                                            <span className="sr-only">Open domain</span>
+                                        </Button>
                                     }
-                                >
-                                    <Hammer />
-                                    Rebuild
-                                </DropdownMenuItem>
-                            )}
-                        <DropdownMenuItem
-                            disabled={!canStart || !appSourceIsConfigured}
-                            onClick={() =>
-                                void Toast.fromAction(() => startApp(app.id))
-                            }
-                        >
-                            <Play />
-                            Start
-                        </DropdownMenuItem>
-                        <DropdownMenuItem
-                            disabled={!canStop || !appSourceIsConfigured}
-                            onClick={() =>
-                                void Toast.fromAction(() => stopApp(app.id))
-                            }
-                        >
-                            <Square />
-                            Stop
-                        </DropdownMenuItem>
-                    </DropdownMenuContent>
-                </DropdownMenu>
-            ) : <PodStatusIndicator appId={app.id} showLabel />}
+                                />
+                                <TooltipContent>Open domain</TooltipContent>
+                            </Tooltip>
+                        )}
+                        {app.appDomains.length > 1 && (
+                            <DropdownMenu>
+                                <DropdownMenuTrigger
+                                    render={
+                                        <Button
+                                            type="button"
+                                            variant="ghost"
+                                            size="icon-sm"
+                                            aria-label="Open domain"
+                                            title="Open domain"
+                                        >
+                                            <ExternalLink />
+                                        </Button>
+                                    }
+                                />
+                                <DropdownMenuContent align="end" className="w-fit">
+                                    {app.appDomains.map((domain) => (
+                                        <DropdownMenuItem
+                                            key={domain.id}
+                                            onClick={() => openDomain(domain)}
+                                        >
+                                            <ExternalLink />
+                                            {domain.hostname}
+                                        </DropdownMenuItem>
+                                    ))}
+                                </DropdownMenuContent>
+                            </DropdownMenu>
+                        )}
+                    </div>
+                </TooltipProvider>
+            )}
         </div>
     );
 }
@@ -167,108 +239,47 @@ export function NodeDetailsDrawer({
     node,
     app,
     role,
-    connections,
+    s3Targets,
+    storageClasses,
+    volumeBackups,
+    gitSshPublicKey,
     open,
     onOpenChange,
     onOpenChangeComplete,
-    onOpen,
+    requestedTab,
+    onTabChange,
 }: {
     contentRef?: Ref<HTMLDivElement>;
     node: NetworkGraphNode;
     app?: AppExtendedModel;
     role?: RolePermissionEnum;
-    connections: PanelConnection[];
+    s3Targets: S3Target[];
+    storageClasses: string[];
+    volumeBackups: VolumeBackupExtendedModel[];
+    gitSshPublicKey?: string;
     open: boolean;
     onOpenChange: (open: boolean) => void;
     onOpenChangeComplete: (open: boolean) => void;
-    onOpen: () => void;
+    requestedTab?: string | null;
+    onTabChange: (tab: DrawerTab) => void;
 }) {
-    const isDialogOpen = useDialog((state) => state.isDialogOpen);
     const isApp = node.kind === 'APP';
     const needsSourceConfiguration =
         app &&
         role === RolePermissionEnum.READWRITE &&
         !AppSourceUtils.isConfiguredSource(app);
-    const connectionsContent = (
-        <div className="space-y-2">
-            {connections.length === 0 ? (
-                <p className="text-xs text-muted-foreground">
-                    No active connections.
-                </p>
-            ) : (
-                <ItemGroup>
-                    {connections.map((connection) => {
-                        const isInternet = connection.name === 'Internet';
-                        const DirectionIcon = connection.direction === 'Ingress'
-                            ? ArrowDown
-                            : ArrowUp;
+    const hasVolumes = (app?.appVolumes.length ?? 0) > 0;
 
-                        return (
-                            <Item key={connection.id} variant="outline" size="sm">
-                                <ItemMedia
-                                    variant="icon"
-                                    className={
-                                        isInternet
-                                            ? 'bg-violet-500/10 text-violet-600'
-                                            : 'bg-qs-500/10 text-qs-600'
-                                    }
-                                >
-                                    {isInternet ? (
-                                        <Globe2 className="size-4" />
-                                    ) : (
-                                        <DirectionIcon className="size-4" />
-                                    )}
-                                </ItemMedia>
-                                <ItemContent>
-                                    <ItemTitle>{connection.name}</ItemTitle>
-                                    <ItemDescription>
-                                        {connection.direction}
-                                        {connection.label
-                                            ? ` · ${connection.label}`
-                                            : ''}
-                                    </ItemDescription>
-                                </ItemContent>
-                                {connection.copyValue && (
-                                    <ItemActions>
-                                        <Button
-                                            type="button"
-                                            variant="ghost"
-                                            size="icon"
-                                            className="size-7"
-                                            title="Copy internal hostname"
-                                            onClick={() => {
-                                                void navigator.clipboard.writeText(
-                                                    connection.copyValue!,
-                                                );
-                                                toast.success(
-                                                    'Copied internal hostname to clipboard',
-                                                );
-                                            }}
-                                        >
-                                            <Copy className="size-3.5" />
-                                            <span className="sr-only">
-                                                Copy internal hostname
-                                            </span>
-                                        </Button>
-                                    </ItemActions>
-                                )}
-                            </Item>
-                        );
-                    })}
-                </ItemGroup>
-            )}
-        </div>
+    const activeTab = DrawerSessionUtils.resolveTab(
+        app?.appType,
+        requestedTab,
+        hasVolumes,
     );
-    const externalDomain = app?.appDomains[0];
-    const externalUrl = externalDomain
-        ? `${externalDomain.useSsl ? 'https' : 'http'}://${externalDomain.hostname}`
-        : undefined;
 
-    useEffect(() => {
-        if (open && isDialogOpen) {
-            onOpenChange(false);
-        }
-    }, [isDialogOpen, onOpenChange, open]);
+    const handleTabChange = (tab: string) => {
+        const nextTab = DrawerSessionUtils.resolveTab(app?.appType, tab, hasVolumes);
+        onTabChange(nextTab);
+    };
 
     return (
         <Drawer
@@ -281,196 +292,173 @@ export function NodeDetailsDrawer({
         >
             <DrawerContent
                 ref={contentRef}
-                className="border border-border/60 sm:data-[swipe-axis=x]:w-[28rem] lg:data-[swipe-axis=x]:w-[32rem] shadow"
+                className="min-w-0 border border-border/60 data-[swipe-axis=x]:w-[calc(100%-1rem)] sm:data-[swipe-axis=x]:w-1/2 shadow"
             >
-                <Button
-                    type="button"
-                    variant="ghost"
-                    size="icon"
-                    className="absolute right-4 top-4 z-10 size-8 opacity-70 hover:opacity-100"
-                    onClick={() => onOpenChange(false)}
-                >
-                    <X className="size-4" />
-                    <span className="sr-only">Close</span>
-                </Button>
-                <Tabs defaultValue="overview" className="min-h-0 flex-1">
-                    <DrawerHeader className="gap-4 p-6 pb-0 pr-12 text-left">
-                        <div className="flex items-start gap-3">
-                            <div
-                                className={cn(
-                                    'flex size-10 shrink-0 items-center justify-center rounded-lg ring-1',
-                                    isApp
-                                        ? 'bg-qs-500/10 text-qs-600 ring-qs-500/30'
-                                        : 'bg-violet-500/15 text-violet-600 ring-violet-500/30',
-                                )}
-                            >
-                                {isApp ? (
-                                    <Boxes className="size-5" />
-                                ) : (
-                                    <Bot className="size-5" />
+                <NestedDrawerProvider>
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        className="absolute right-4 top-4 z-10 size-8 opacity-70 hover:opacity-100"
+                        onClick={() => onOpenChange(false)}
+                    >
+                        <X className="size-4" />
+                        <span className="sr-only">Close</span>
+                    </Button>
+                    <Tabs
+                        value={activeTab}
+                        onValueChange={handleTabChange}
+                        className="min-h-0 min-w-0 flex-1"
+                    >
+                        <DrawerHeader className="gap-4 p-6 pb-0 pr-12 text-left">
+                            <div className="flex items-start gap-3">
+                                <div
+                                    className={cn(
+                                        'flex size-12 shrink-0 items-center justify-center rounded-lg ring-1',
+                                        isApp
+                                            ? 'bg-qs-500/10 text-qs-600 ring-qs-500/30'
+                                            : 'bg-violet-500/15 text-violet-600 ring-violet-500/30',
+                                    )}
+                                >
+                                    {isApp ? (
+                                        <Boxes className="size-6" />
+                                    ) : (
+                                        <Bot className="size-6" />
+                                    )}
+                                </div>
+                                <div className="min-w-0 flex-1">
+                                    <DrawerTitle className="group/title flex items-center gap-1 text-lg">
+                                        <span className="truncate">{node.name}</span>
+                                        {app && role === RolePermissionEnum.READWRITE && (
+                                            <EditAppDialog
+                                                projectId={app.projectId}
+                                                existingItem={app}
+                                            >
+                                                <Button
+                                                    type="button"
+                                                    variant="ghost"
+                                                    size="icon-sm"
+                                                    className="shrink-0 opacity-0 transition-opacity group-hover/title:opacity-100 focus-visible:opacity-100"
+                                                >
+                                                    <Pencil />
+                                                    <span className="sr-only">Edit app name</span>
+                                                </Button>
+                                            </EditAppDialog>
+                                        )}
+                                    </DrawerTitle>
+                                    <DrawerDescription className="text-xs">
+                                        {node.caption ??
+                                            (isApp ? 'App' : 'Agent sandbox')}
+                                    </DrawerDescription>
+                                </div>
+                                {app && !needsSourceConfiguration && (<>
+                                    <AppStatusActions app={app} role={role} />
+                                    <div className=""></div>
+                                </>
                                 )}
                             </div>
-                            <div className="min-w-0 flex-1">
-                                <DrawerTitle className="truncate text-base">
-                                    {node.name}
-                                </DrawerTitle>
-                                <DrawerDescription className="text-xs">
-                                    {node.caption ??
-                                        (isApp ? 'App' : 'Agent sandbox')}
-                                </DrawerDescription>
-                            </div>
-                            {app && !needsSourceConfiguration && (
-                                <AppStatusActions app={app} role={role} />
+                            {app && role && !needsSourceConfiguration ? (
+                                <ScrollArea scrollbarOrientation="horizontal">
+                                    <TabsList className="mt-4 gap-4">
+                                        <TabsTrigger value="deployments">
+                                            <Rocket />
+                                            Deployments
+                                        </TabsTrigger>
+                                        {app.appType !== 'APP' && (
+                                            <TabsTrigger value="credentials">
+                                                <Key />
+                                                DB Access
+                                            </TabsTrigger>
+                                        )}
+                                        <TabsTrigger value="logs">
+                                            <LogsIcon />
+                                            Logs
+                                        </TabsTrigger>
+                                        <TabsTrigger value="stats">
+                                            <BarChart3 />
+                                            Stats
+                                        </TabsTrigger>
+                                        {hasVolumes && (
+                                            <TabsTrigger value="backups">
+                                                <RotateCwClock />
+                                                Backups
+                                            </TabsTrigger>
+                                        )}
+                                        <TabsTrigger value="settings">
+                                            <Settings />
+                                            Settings
+                                        </TabsTrigger>
+                                    </TabsList>
+                                </ScrollArea>
+                            ) : (
+                                <div className="h-2"></div>
                             )}
-                        </div>
-                        {app && role && !needsSourceConfiguration ? (
-                            <ScrollArea scrollbarOrientation="horizontal">
-                                <TabsList className="mt-4">
-                                    <TabsTrigger value="overview">
-                                        <LayoutDashboard />
-                                        Overview
-                                    </TabsTrigger>
-                                    <TabsTrigger value="logs">
-                                        <ScrollText />
-                                        Logs
-                                    </TabsTrigger>
-                                    <TabsTrigger value="deployments">
-                                        <Rocket />
-                                        Deployments
-                                    </TabsTrigger>
-                                    <TabsTrigger value="stats">
-                                        <BarChart3 />
-                                        Stats
-                                    </TabsTrigger>
-                                </TabsList>
-                            </ScrollArea>
-                        ) : (
-                            <div className="h-2"></div>
-                        )}
-                    </DrawerHeader>
-                    <ScrollArea className="min-h-0 flex-1 px-4">
+                        </DrawerHeader>
                         {needsSourceConfiguration ? (
-                            <>
+                            <DrawerTabScrollArea>
                                 <GeneralAppSource
                                     hideCard
                                     app={app}
-                                    readonly={
-                                        role !== RolePermissionEnum.READWRITE
-                                    }
+                                    readonly={role !== RolePermissionEnum.READWRITE}
                                 />
-                            </>
-                        ) : app && role ? (
+                            </DrawerTabScrollArea>
+                        ) : app && role && (
                             <>
-                                <TabsContent
-                                    value="overview"
-                                    className="mt-4 space-y-6"
-                                >
-                                    <ItemGroup className="gap-0">
-                                        <Item size="xs">
-                                            <ItemContent>
-                                                <ItemTitle className="font-normal text-muted-foreground">
-                                                    Image
-                                                </ItemTitle>
-                                            </ItemContent>
-                                            <ItemActions className="max-w-[65%] truncate">
-                                                {app.sourceType === 'CONTAINER'
-                                                    ? (app.containerImageSource ??
-                                                        'Not configured')
-                                                    : (app.gitUrl ??
-                                                        'Not configured')}
-                                            </ItemActions>
-                                        </Item>
-                                        <Item size="xs">
-                                            <ItemContent>
-                                                <ItemTitle className="font-normal text-muted-foreground">
-                                                    Replicas
-                                                </ItemTitle>
-                                            </ItemContent>
-                                            <ItemActions>
-                                                {app.replicas}
-                                            </ItemActions>
-                                        </Item>
-                                        <Item size="xs">
-                                            <ItemContent>
-                                                <ItemTitle className="font-normal text-muted-foreground">
-                                                    Project
-                                                </ItemTitle>
-                                            </ItemContent>
-                                            <ItemActions>
-                                                {app.project.name}
-                                            </ItemActions>
-                                        </Item>
-                                        {externalUrl && (
-                                            <Item size="xs">
-                                                <ItemContent>
-                                                    <ItemTitle className="font-normal text-muted-foreground">
-                                                        External URL
-                                                    </ItemTitle>
-                                                </ItemContent>
-                                                <ItemActions className="max-w-[65%] truncate">
-                                                    <a
-                                                        href={externalUrl}
-                                                        target="_blank"
-                                                        rel="noreferrer"
-                                                        className="flex items-center gap-1 truncate text-primary underline"
-                                                    >
-                                                        <span className="truncate">
-                                                            {externalUrl}
-                                                        </span>
-                                                        <ExternalLink className="size-3 shrink-0" />
-                                                    </a>
-                                                </ItemActions>
-                                            </Item>
-                                        )}
-                                    </ItemGroup>
-                                    <Separator className="my-8" />
-                                    <div className="space-y-3">
-                                        <h3 className="text-sm font-semibold">
-                                            Network Policies
-                                        </h3>
-                                        {connectionsContent}
-                                    </div>
+                                <TabsContent value="deployments" className="flex min-h-0 min-w-0 flex-1 flex-col">
+                                    <DrawerTabScrollArea>
+                                        <DrawerDeploymentsTab key={app.id} app={app} role={role} />
+                                    </DrawerTabScrollArea>
                                 </TabsContent>
-                                <TabsContent value="logs" className="mt-4">
-                                    <Logs key={app.id} app={app} role={role} hideCard />
+                                <TabsContent value="logs" className="flex min-h-0 min-w-0 flex-1 flex-col px-6 pt-3 pb-4">
+                                    <Logs key={app.id} app={app} role={role} hideCard useFullHeight />
                                 </TabsContent>
-                                <TabsContent
-                                    value="deployments"
-                                    className="mt-4"
-                                >
-                                    <BuildsTab
-                                        key={app.id}
-                                        app={app}
-                                        role={role}
-                                        view="grid"
-                                    />
+                                <TabsContent value="stats" className="flex min-h-0 min-w-0 flex-1 flex-col">
+                                    <DrawerTabScrollArea>
+                                        <MonitoringTab hideCard key={app.id} app={app} />
+                                    </DrawerTabScrollArea>
                                 </TabsContent>
-                                <TabsContent value="stats" className="mt-4">
-                                    <MonitoringTab key={app.id} app={app} />
+                                {hasVolumes && (
+                                    <TabsContent value="backups" className="flex min-h-0 min-w-0 flex-1 flex-col">
+                                        <DrawerTabScrollArea>
+                                            <div className="px-2 pt-4">
+                                                <DrawerBackupsTab
+                                                    app={app}
+                                                    role={role}
+                                                    s3Targets={s3Targets}
+                                                    volumeBackups={volumeBackups}
+                                                />
+                                            </div>
+                                        </DrawerTabScrollArea>
+                                    </TabsContent>
+                                )}
+                                {app.appType !== 'APP' && (
+                                    <TabsContent value="credentials" className="flex min-h-0 min-w-0 flex-1 flex-col">
+                                        <DrawerTabScrollArea>
+                                            <div className="space-y-4 px-1 pt-1">
+                                                {role === RolePermissionEnum.READWRITE && (
+                                                    <DbToolsCard app={app} />
+                                                )}
+                                                <DbCredentials app={app} />
+                                            </div>
+                                        </DrawerTabScrollArea>
+                                    </TabsContent>
+                                )}
+                                <TabsContent value="settings" className="flex min-h-0 min-w-0 flex-1 flex-col">
+                                    <DrawerTabScrollArea>
+                                        <div className="pt-4">
+                                            <DrawerSettings
+                                                app={app}
+                                                role={role}
+                                                storageClasses={storageClasses}
+                                                gitSshPublicKey={gitSshPublicKey}
+                                            />
+                                        </div>
+                                    </DrawerTabScrollArea>
                                 </TabsContent>
                             </>
-                        ) : (
-                            <div>
-                                <div className="mb-3 flex items-center gap-2 text-sm font-medium">
-                                    <Network className="size-4" />
-                                    Network Policies ({connections.length})
-                                </div>
-                                {connectionsContent}
-                            </div>
                         )}
-                    </ScrollArea>
-                </Tabs>
-                {isApp && (
-                    <DrawerFooter className="border-t p-4">
-                        <Button
-                            variant="secondary"
-                            className="w-full"
-                            onClick={onOpen}
-                        >
-                            Open App Settings<ExternalLink className="ml-2 size-4" />
-                        </Button>
-                    </DrawerFooter>
-                )}
+                    </Tabs>
+                </NestedDrawerProvider>
             </DrawerContent>
         </Drawer>
     );
diff --git a/src/app/project/[projectId]/app-components/project-network-graph/project-network-graph-app-context-menu.tsx b/src/app/project/[projectId]/app-components/project-network-graph/project-network-graph-app-context-menu.tsx
new file mode 100644
index 00000000..7b5d2d02
--- /dev/null
+++ b/src/app/project/[projectId]/app-components/project-network-graph/project-network-graph-app-context-menu.tsx
@@ -0,0 +1,119 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { Box, Globe2, Hammer, Logs, Play, Rocket, RotateCwClock, Settings, Square, Trash2 } from 'lucide-react';
+import {
+    ContextMenu,
+    ContextMenuContent,
+    ContextMenuItem,
+    ContextMenuSeparator,
+    ContextMenuSub,
+    ContextMenuSubContent,
+    ContextMenuSubTrigger,
+    ContextMenuTrigger,
+} from '@/components/ui/context-menu';
+import { deploy, startApp, stopApp } from '@/app/project/app/[appId]/actions';
+import { usePodsStatus } from '@/frontend/states/zustand.states';
+import { AppLifecycleUtils } from '@/frontend/utils/app-lifecycle.utils';
+import { Toast } from '@/frontend/utils/toast.utils';
+import type { AppExtendedModel } from '@/shared/model/app-extended.model';
+import { RolePermissionEnum } from '@/shared/model/role-extended.model.ts';
+
+export type ProjectNetworkGraphAppContextMenuProps = {
+    app: AppExtendedModel;
+    role?: RolePermissionEnum;
+    allowInternetAccess: boolean;
+    onToggleInternetAccess: () => void;
+    onOpenDrawerTab: (tab: 'deployments' | 'logs' | 'backups' | 'settings') => void;
+    onDelete: () => void;
+    children: ReactNode;
+};
+
+export function ProjectNetworkGraphAppContextMenu({
+    app,
+    role,
+    allowInternetAccess,
+    onToggleInternetAccess,
+    onDelete,
+    children,
+    onOpenDrawerTab
+}: ProjectNetworkGraphAppContextMenuProps) {
+    const deploymentStatus = usePodsStatus(
+        (state) => state.podsStatus.get(app.id)?.deploymentStatus ?? 'UNKNOWN',
+    );
+    const lifecycle = AppLifecycleUtils.availability(app, role, deploymentStatus);
+
+    return (
+        <ContextMenu>
+            <ContextMenuTrigger>{children}</ContextMenuTrigger>
+            <ContextMenuContent onClick={(event) => event.stopPropagation()}>
+                {lifecycle.canManage && <>
+                    <ContextMenuSub>
+                        <ContextMenuSubTrigger className="gap-2">
+                            <Rocket />
+                            Deploy
+                        </ContextMenuSubTrigger>
+                        <ContextMenuSubContent onClick={(event) => event.stopPropagation()}>
+                            <ContextMenuItem
+                                disabled={!lifecycle.canDeploy}
+                                onClick={() => void Toast.fromAction(() => deploy(app.id))}
+                            >
+                                <Rocket />
+                                Deploy
+                            </ContextMenuItem>
+                            {lifecycle.supportsRebuild && <ContextMenuItem
+                                    disabled={!lifecycle.canRebuild}
+                                    onClick={() => void Toast.fromAction(() => deploy(app.id, true))}
+                                >
+                                    <Hammer />
+                                    Rebuild
+                                </ContextMenuItem>}
+                            <ContextMenuItem
+                                disabled={!lifecycle.canStart}
+                                onClick={() => void Toast.fromAction(() => startApp(app.id))}
+                            >
+                                <Play />
+                                Start
+                            </ContextMenuItem>
+                            <ContextMenuItem
+                                disabled={!lifecycle.canStop}
+                                onClick={() => void Toast.fromAction(() => stopApp(app.id))}
+                            >
+                                <Square />
+                                Stop
+                            </ContextMenuItem>
+                        </ContextMenuSubContent>
+                    </ContextMenuSub>
+                    <ContextMenuSeparator />
+                    <ContextMenuItem onClick={() => onOpenDrawerTab('deployments')}>
+                        <Box />
+                        View Deployments
+                    </ContextMenuItem>
+                    <ContextMenuItem onClick={() => onOpenDrawerTab('logs')}>
+                        <Logs />
+                        View Logs
+                    </ContextMenuItem>
+                    {app.appVolumes.length > 0 && (
+                        <ContextMenuItem onClick={() => onOpenDrawerTab('backups')}>
+                            <RotateCwClock />
+                            View Backups
+                        </ContextMenuItem>
+                    )}
+                    <ContextMenuItem onClick={() => onOpenDrawerTab('settings')}>
+                        <Settings />
+                        View Settings
+                    </ContextMenuItem>
+                    <ContextMenuSeparator />
+                    <ContextMenuItem onClick={onToggleInternetAccess}>
+                        <Globe2 />
+                        {allowInternetAccess ? 'Disable' : 'Enable'} Egress Internet Access
+                    </ContextMenuItem>
+                </>}
+                {lifecycle.canManage && <ContextMenuItem variant="destructive" onClick={onDelete}>
+                    <Trash2 />
+                    Delete App
+                </ContextMenuItem>}
+            </ContextMenuContent>
+        </ContextMenu>
+    );
+}
diff --git a/src/app/project/[projectId]/app-components/project-network-graph/project-network-graph-connection-context-menu.tsx b/src/app/project/[projectId]/app-components/project-network-graph/project-network-graph-connection-context-menu.tsx
new file mode 100644
index 00000000..c9026dc0
--- /dev/null
+++ b/src/app/project/[projectId]/app-components/project-network-graph/project-network-graph-connection-context-menu.tsx
@@ -0,0 +1,30 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { Trash2 } from 'lucide-react';
+import {
+    ContextMenu,
+    ContextMenuContent,
+    ContextMenuItem,
+    ContextMenuTrigger,
+} from '@/components/ui/context-menu';
+
+export function ProjectNetworkGraphConnectionContextMenu({
+    onDelete,
+    children,
+}: {
+    onDelete: () => void;
+    children: ReactNode;
+}) {
+    return (
+        <ContextMenu>
+            <ContextMenuTrigger render={<g />}>{children}</ContextMenuTrigger>
+            <ContextMenuContent onClick={(event) => event.stopPropagation()}>
+                <ContextMenuItem variant="destructive" onClick={onDelete}>
+                    <Trash2 />
+                    Delete connection
+                </ContextMenuItem>
+            </ContextMenuContent>
+        </ContextMenu>
+    );
+}
diff --git a/src/app/project/[projectId]/app-components/project-network-graph/project-network-graph-drawer-session.spec.ts b/src/app/project/[projectId]/app-components/project-network-graph/project-network-graph-drawer-session.spec.ts
new file mode 100644
index 00000000..1adc2a47
--- /dev/null
+++ b/src/app/project/[projectId]/app-components/project-network-graph/project-network-graph-drawer-session.spec.ts
@@ -0,0 +1,68 @@
+import { act, renderHook } from '@testing-library/react';
+import {
+    DrawerSessionUtils,
+    useProjectNetworkGraphDrawerSession,
+} from './project-network-graph-drawer-session';
+
+describe('DrawerSessionUtils.resolveTab', () => {
+    test.each([
+        ['APP', 'credentials', 'deployments'],
+        ['POSTGRES', 'credentials', 'credentials'],
+        ['APP', 'logs', 'logs'],
+        ['APP', 'backups', 'backups'],
+        ['APP', 'unknown', 'deployments'],
+        ['APP', null, 'deployments'],
+    ] as const)('normalizes %s requested tab %s to %s', (appType, requestedTab, expected) => {
+        expect(DrawerSessionUtils.resolveTab(appType, requestedTab)).toBe(expected);
+    });
+
+    it('rejects the backups tab when the app has no volumes', () => {
+        expect(DrawerSessionUtils.resolveTab('APP', 'backups', false)).toBe('deployments');
+    });
+});
+
+describe('useProjectNetworkGraphDrawerSession', () => {
+    test('keeps its interface stable across an unrelated parent render', () => {
+        const searchParams = new URLSearchParams('drawerTab=deployments');
+        const appIds = new Set(['app-1']);
+        const { result, rerender } = renderHook(() =>
+            useProjectNetworkGraphDrawerSession({ searchParams, appIds }),
+        );
+
+        const session = result.current;
+        rerender();
+
+        expect(result.current).toBe(session);
+    });
+
+    test('keeps the selected node until the drawer closing animation completes', () => {
+        const searchParams = new URLSearchParams('drawerAppId=app-1&drawerTab=logs');
+        const appIds = new Set(['app-1']);
+        const { result } = renderHook(() =>
+            useProjectNetworkGraphDrawerSession({ searchParams, appIds }),
+        );
+
+        expect(result.current.selectedNodeId).toBe('APP:app-1');
+        expect(result.current.open).toBe(true);
+        expect(result.current.requestedTab).toBe('logs');
+
+        act(() => result.current.onOpenChange(false));
+
+        expect(result.current.selectedNodeId).toBe('APP:app-1');
+        expect(result.current.open).toBe(false);
+
+        act(() => result.current.onOpenChangeComplete(false));
+
+        expect(result.current.selectedNodeId).toBeUndefined();
+    });
+
+    test('clears an unknown drawer app from the URL', () => {
+        const searchParams = new URLSearchParams('drawerAppId=missing&drawerTab=logs');
+        const appIds = new Set(['app-1']);
+        const { result } = renderHook(() =>
+            useProjectNetworkGraphDrawerSession({ searchParams, appIds }),
+        );
+
+        expect(result.current.selectedNodeId).toBeUndefined();
+    });
+});
diff --git a/src/app/project/[projectId]/app-components/project-network-graph/project-network-graph-drawer-session.ts b/src/app/project/[projectId]/app-components/project-network-graph/project-network-graph-drawer-session.ts
new file mode 100644
index 00000000..e598b9f5
--- /dev/null
+++ b/src/app/project/[projectId]/app-components/project-network-graph/project-network-graph-drawer-session.ts
@@ -0,0 +1,117 @@
+'use client';
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { TabNavigationUtils } from '@/frontend/utils/tab-navigation.utils';
+import type { NetworkGraphNode } from './project-network-graph-projection';
+
+export const drawerTabValues = [
+    'deployments',
+    'credentials',
+    'logs',
+    'stats',
+    'backups',
+    'settings',
+] as const;
+
+export type DrawerTab = (typeof drawerTabValues)[number];
+
+export class DrawerSessionUtils {
+    static resolveTab(
+        appType: string | undefined,
+        requestedTab: string | null | undefined,
+        hasVolumes = true,
+    ): DrawerTab {
+        if (!drawerTabValues.includes(requestedTab as DrawerTab)) return 'deployments';
+        if (requestedTab === 'credentials' && appType === 'APP') return 'deployments';
+        if (requestedTab === 'backups' && !hasVolumes) return 'deployments';
+        return requestedTab as DrawerTab;
+    }
+}
+
+type QueryParams = Pick<URLSearchParams, 'get' | 'toString'>;
+
+export function useProjectNetworkGraphDrawerSession({
+    searchParams,
+    appIds,
+}: {
+    searchParams: QueryParams;
+    appIds: Set<string>;
+}) {
+    const [selectedNodeId, setSelectedNodeId] = useState<string>();
+    const [open, setOpen] = useState(false);
+    const requestedTab = searchParams.get('drawerTab');
+
+    const updateQuery = useCallback((appId?: string, tab?: DrawerTab) => {
+        const params = new URLSearchParams(searchParams.toString());
+
+        if (!appId) {
+            params.delete('drawerAppId');
+            params.delete('drawerTab');
+        } else {
+            params.set('drawerAppId', appId);
+            params.set('drawerTab', tab ?? 'deployments');
+        }
+
+        TabNavigationUtils.replaceQuery(params);
+    }, [searchParams]);
+
+    useEffect(() => {
+        const requestedAppId = searchParams.get('drawerAppId');
+
+        if (!requestedAppId) return;
+        if (!appIds.has(requestedAppId)) {
+            updateQuery();
+            return;
+        }
+
+        setSelectedNodeId(`APP:${requestedAppId}`);
+    }, [appIds, searchParams, updateQuery]);
+
+    useEffect(() => {
+        if (selectedNodeId) setOpen(true);
+    }, [selectedNodeId]);
+
+    const selectNode = useCallback((node: NetworkGraphNode) => {
+        setSelectedNodeId(node.id);
+        if (selectedNodeId === node.id) setOpen(true);
+        updateQuery(node.kind === 'APP' ? node.id.replace('APP:', '') : undefined);
+    }, [selectedNodeId, updateQuery]);
+
+    const openAppTab = useCallback((appId: string, tab: DrawerTab) => {
+        const nodeId = `APP:${appId}`;
+        setSelectedNodeId(nodeId);
+        if (selectedNodeId === nodeId) setOpen(true);
+        updateQuery(appId, tab);
+    }, [selectedNodeId, updateQuery]);
+
+    const onOpenChange = useCallback((nextOpen: boolean) => {
+        setOpen(nextOpen);
+        if (!nextOpen) {
+            updateQuery();
+        }
+    }, [updateQuery]);
+
+    const onOpenChangeComplete = useCallback((nextOpen: boolean) => {
+        // Keep the node mounted until Vaul finishes its exit animation. A click
+        // during that animation reopens it, so do not clear the new selection.
+        if (!nextOpen && !open) setSelectedNodeId(undefined);
+    }, [open]);
+
+    return useMemo(() => ({
+        selectedNodeId,
+        open,
+        requestedTab,
+        selectNode,
+        openAppTab,
+        onOpenChange,
+        onOpenChangeComplete,
+    }), [
+        onOpenChange,
+        onOpenChangeComplete,
+        openAppTab,
+        open,
+        requestedTab,
+        selectNode,
+        selectedNodeId,
+    ]);
+}
diff --git a/src/app/project/[projectId]/app-components/project-overview.tsx b/src/app/project/[projectId]/app-components/project-overview.tsx
index fe8d4450..f0cda138 100644
--- a/src/app/project/[projectId]/app-components/project-overview.tsx
+++ b/src/app/project/[projectId]/app-components/project-overview.tsx
@@ -16,6 +16,8 @@ import { AppExtendedModel } from "@/shared/model/app-extended.model";
 import type { ProjectNetworkGraphPositions } from '@/shared/model/project-network-graph-layout.model';
 import { useDialog } from '@/frontend/states/zustand.states';
 import NewNetworkPolicyExplanationDialog from './new-network-policy-explanation-dialog';
+import type { S3Target } from '@prisma/client';
+import type { VolumeBackupExtendedModel } from '@/shared/model/volume-backup-extended.model';
 
 interface ProjectOverviewProps {
     apps: AppExtendedModel[];
@@ -24,6 +26,10 @@ interface ProjectOverviewProps {
     projectName: string;
     networkGraphPositions: ProjectNetworkGraphPositions;
     showNewNetworkPolicyExplanation: boolean;
+    s3Targets: S3Target[];
+    storageClasses: string[];
+    volumeBackupsByApp: Record<string, VolumeBackupExtendedModel[]>;
+    gitSshPublicKeysByApp: Record<string, string | undefined>;
 }
 
 type ProjectOverviewTab = 'table' | 'graph';
@@ -43,10 +49,15 @@ export default function AppProjectOverview({
     projectName,
     networkGraphPositions,
     showNewNetworkPolicyExplanation,
+    s3Targets,
+    storageClasses,
+    volumeBackupsByApp,
+    gitSshPublicKeysByApp,
 }: ProjectOverviewProps) {
     const searchParams = useSearchParams();
     const { openDialog } = useDialog();
     const requestedTab = searchParams.get('tab');
+    const requestedDrawerAppId = searchParams.get('drawerAppId');
     const [currentTab, setCurrentTab] = useState<ProjectOverviewTab>('graph');
 
     useEffect(() => {
@@ -61,13 +72,17 @@ export default function AppProjectOverview({
     }, [openDialog, showNewNetworkPolicyExplanation, apps.length]);
 
     useEffect(() => {
+        if (requestedDrawerAppId) {
+            setCurrentTab('graph');
+            return;
+        }
         if (isProjectOverviewTab(requestedTab)) {
             setCurrentTab(requestedTab);
             return;
         }
         const savedTab = window.localStorage.getItem(tabStorageKey());
         setCurrentTab(isProjectOverviewTab(savedTab) ? savedTab : 'graph');
-    }, [projectId, requestedTab]);
+    }, [projectId, requestedDrawerAppId, requestedTab]);
 
     const handleTabChange = (value: string) => {
         if (!isProjectOverviewTab(value)) return;
@@ -138,12 +153,16 @@ export default function AppProjectOverview({
             <TabsContent value="table">
                 <AppTable session={session} app={apps} projectId={projectId} />
             </TabsContent>
-            <TabsContent value="graph">
+            <TabsContent value="graph" data-project-network-graph>
                 <ProjectNetworkGraph
                     apps={apps}
                     projectId={projectId}
                     session={session}
                     savedPositions={networkGraphPositions}
+                    s3Targets={s3Targets}
+                    storageClasses={storageClasses}
+                    volumeBackupsByApp={volumeBackupsByApp}
+                    gitSshPublicKeysByApp={gitSshPublicKeysByApp}
                 />
             </TabsContent>
         </Tabs>
diff --git a/src/app/project/[projectId]/page.tsx b/src/app/project/[projectId]/page.tsx
index f40b2109..ed7bdb3b 100644
--- a/src/app/project/[projectId]/page.tsx
+++ b/src/app/project/[projectId]/page.tsx
@@ -13,6 +13,10 @@ import AgentListClient from "./agent-components/agent-table";
 import projectNetworkGraphLayoutService from '@/server/services/project-network-graph-layout.service';
 import { ensureReadProject, RequesterIdentity } from '@/server/utils/shared-authorization.utils';
 import paramService, { ParamService } from '@/server/services/param.service';
+import s3TargetService from '@/server/services/s3-target.service';
+import volumeBackupService from '@/server/services/volume-backup.service';
+import clusterService from '@/server/services/cluster.service';
+import appGitSshKeyService from '@/server/services/app-git-ssh-key.service';
 
 export default async function AppsPage({
     params
@@ -53,9 +57,26 @@ export default async function AppsPage({
     const data = await appService.getAllAppsByProjectId(projectId);
     const relevantApps = data.filter((app) =>
         UserGroupUtils.sessionHasReadAccessForApp(session, app.id));
-    const [networkGraphPositions, hasAcknowledgedNewNetworkPolicyExplanation] = await Promise.all([
+    const [
+        networkGraphPositions,
+        hasAcknowledgedNewNetworkPolicyExplanation,
+        s3Targets,
+        storageClasses,
+        volumeBackups,
+        gitSshPublicKeys,
+    ] = await Promise.all([
         projectNetworkGraphLayoutService.getPositions(projectId),
         paramService.getBoolean(ParamService.FEATURE_NEW_NETWORK_POLICY_EXPLENATION),
+        s3TargetService.getAll(),
+        clusterService.getStorageClasses(),
+        Promise.all(relevantApps.map(async (app) => [
+            app.id,
+            await volumeBackupService.getForApp(app.id),
+        ] as const)),
+        Promise.all(relevantApps.map(async (app) => [
+            app.id,
+            await appGitSshKeyService.getPublicKey(app.id),
+        ] as const)),
     ]);
 
     return (
@@ -67,6 +88,10 @@ export default async function AppsPage({
                 projectName={project.name}
                 networkGraphPositions={networkGraphPositions}
                 showNewNetworkPolicyExplanation={!hasAcknowledgedNewNetworkPolicyExplanation}
+                s3Targets={s3Targets}
+                storageClasses={storageClasses}
+                volumeBackupsByApp={Object.fromEntries(volumeBackups)}
+                gitSshPublicKeysByApp={Object.fromEntries(gitSshPublicKeys)}
             />
             <ProjectBreadcrumbs project={project} />
         </div>
diff --git a/src/app/project/agent/[agentId]/general/agent-volumes-card.tsx b/src/app/project/agent/[agentId]/general/agent-volumes-card.tsx
index 9e4a4a2c..d235b895 100644
--- a/src/app/project/agent/[agentId]/general/agent-volumes-card.tsx
+++ b/src/app/project/agent/[agentId]/general/agent-volumes-card.tsx
@@ -61,7 +61,7 @@ export default function AgentVolumesCard({ volumes, projectId, readonly, storage
                             <TableHead>Mount Path</TableHead>
                             <TableHead>Size</TableHead>
                             <TableHead>Storage Class</TableHead>
-                            {!readonly && <TableHead className="w-[100px]">Actions</TableHead>}
+                            {!readonly && <TableHead className="w-[100px]"></TableHead>}
                         </TableRow>
                     </TableHeader>
                     <TableBody>
diff --git a/src/app/project/app/[appId]/advanced/basic-auth-edit-dialog.tsx b/src/app/project/app/[appId]/advanced/basic-auth-edit-dialog.tsx
index 26507e1b..f6d4a2e2 100644
--- a/src/app/project/app/[appId]/advanced/basic-auth-edit-dialog.tsx
+++ b/src/app/project/app/[appId]/advanced/basic-auth-edit-dialog.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
 import {
   Form,
   FormControl,
@@ -13,7 +13,7 @@ import { Input } from "@/components/ui/input"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useForm } from "react-hook-form"
 
-import { useActionState, useEffect, useState } from "react";
+import { useActionState, useEffect } from "react";
 import { FormUtils } from "@/frontend/utils/form.utilts";
 import { SubmitButton } from "@/components/custom/submit-button";
 import { AppBasicAuth } from "@prisma/client"
@@ -23,19 +23,18 @@ import { AppExtendedModel } from "@/shared/model/app-extended.model"
 import { BasicAuthEditModel, basicAuthEditZodModel } from "@/shared/model/basic-auth-edit.model"
 import { saveBasicAuth } from "./actions"
 import { z } from "zod"
+import { useDialog } from '@/frontend/states/zustand.states';
 
 
 export default function BasicAuthEditDialog({
-  children,
   basicAuth,
   app
 }: {
-  children: React.ReactNode;
   basicAuth?: AppBasicAuth;
   app: AppExtendedModel;
 }) {
 
-  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const { closeDialog } = useDialog();
   const form = useForm<z.input<typeof basicAuthEditZodModel>, unknown, z.output<typeof basicAuthEditZodModel>>({
     resolver: zodResolver(basicAuthEditZodModel),
     defaultValues: {
@@ -57,10 +56,10 @@ export default function BasicAuthEditDialog({
       toast.success('Authentication information saved successfully', {
         description: "Click \"deploy\" to apply the changes to your app.",
       });
-      setIsOpen(false);
+      closeDialog();
     }
     FormUtils.mapValidationErrorsToForm<typeof basicAuthEditZodModel>(state, form);
-  }, [form, state]);
+  }, [closeDialog, form, state]);
 
   useEffect(() => {
     form.reset(basicAuth);
@@ -68,18 +67,13 @@ export default function BasicAuthEditDialog({
 
   return (
     <>
-      <div onClick={() => setIsOpen(true)}>
-        {children}
-      </div>
-      <Dialog open={!!isOpen} onOpenChange={() => setIsOpen(false)}>
-        <DialogContent className="sm:max-w-[425px]">
-          <DialogHeader>
-            <DialogTitle>Basic Authentication</DialogTitle>
-            <DialogDescription>
-              Configure basic authentication to secure your app.
-            </DialogDescription>
-          </DialogHeader>
-          <Form {...form}>
+      <DialogHeader>
+        <DialogTitle>Basic Authentication</DialogTitle>
+        <DialogDescription>
+          Configure basic authentication to secure your app.
+        </DialogDescription>
+      </DialogHeader>
+      <Form {...form}>
             <form action={() => form.handleSubmit((data) => {
               return formAction(data);
             }, console.error)()}>
@@ -116,9 +110,7 @@ export default function BasicAuthEditDialog({
                 <SubmitButton>Save</SubmitButton>
               </div>
             </form>
-          </Form >
-        </DialogContent>
-      </Dialog>
+      </Form >
     </>
   )
 
diff --git a/src/app/project/app/[appId]/advanced/basic-auth.tsx b/src/app/project/app/[appId]/advanced/basic-auth.tsx
index 76520bc5..611c8382 100644
--- a/src/app/project/app/[appId]/advanced/basic-auth.tsx
+++ b/src/app/project/app/[appId]/advanced/basic-auth.tsx
@@ -4,24 +4,25 @@ import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }
 import { AppExtendedModel } from "@/shared/model/app-extended.model";
 import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Button } from "@/components/ui/button";
-import { EditIcon, Eye, TrashIcon } from "lucide-react";
+import { EditIcon, Eye, Plus, TrashIcon } from "lucide-react";
 import { Toast } from "@/frontend/utils/toast.utils";
-import { useConfirmDialog } from "@/frontend/states/zustand.states";
+import { useConfirmDialog, useDialog } from "@/frontend/states/zustand.states";
 import React from "react";
-import FileMountEditDialog from "./basic-auth-edit-dialog";
 import BasicAuthEditDialog from "./basic-auth-edit-dialog";
 import { deleteBasicAuth } from "./actions";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 
-export default function BasicAuth({ app, readonly }: {
+export default function BasicAuth({ app, readonly, hideCard = false }: {
     app: AppExtendedModel;
     readonly: boolean;
+    hideCard?: boolean;
 }) {
 
-    const { openConfirmDialog: openDialog } = useConfirmDialog();
+    const { openConfirmDialog } = useConfirmDialog();
+    const { openDialog } = useDialog();
 
     const asyncDelete = async (volumeId: string) => {
-        const confirm = await openDialog({
+        const confirm = await openConfirmDialog({
             title: "Delete Auth Credential",
             description: "Are you sure you want to remove this auth credential? The changes will take effect, after you deploy the app. ",
             okButton: "Delete Auth Credential",
@@ -30,26 +31,27 @@ export default function BasicAuth({ app, readonly }: {
             await Toast.fromAction(() => deleteBasicAuth(volumeId));
         }
     };
+    const CardWrapper = hideCard ? 'div' : Card;
 
     return <>
-        <Card>
+        <CardWrapper>
             <CardHeader>
                 <CardTitle>Basic Authentication</CardTitle>
                 <CardDescription>Configure basic authentication for your app. This will add a basic authentication layer in front of your app.</CardDescription>
             </CardHeader>
-            <CardContent>
+            {app.appBasicAuths.length > 0 && <CardContent className={hideCard ? "px-0" : undefined}>
                 <Table>
                     <TableCaption>{app.appBasicAuths.length} Auth Credentials</TableCaption>
                     <TableHeader>
                         <TableRow>
                             <TableHead>Username</TableHead>
                             <TableHead>Password</TableHead>
-                            <TableHead className="w-[100px]">Action</TableHead>
+                            {!readonly && <TableHead className="w-[88px]"></TableHead>}
                         </TableRow>
                     </TableHeader>
                     <TableBody>
                         {app.appBasicAuths.map(basicAuth => (
-                            <TableRow key={basicAuth.id}>
+                            <TableRow key={basicAuth.id} className="group transition-colors duration-150 hover:bg-muted/30">
                                 <TableCell className="font-medium">{basicAuth.username}</TableCell>
                                 <TableCell className="font-medium">
                                     <TooltipProvider>
@@ -65,24 +67,39 @@ export default function BasicAuth({ app, readonly }: {
                                         </Tooltip>
                                     </TooltipProvider>
                                 </TableCell>
-                                {!readonly && <TableCell className="font-medium flex gap-2">
-                                    <BasicAuthEditDialog app={app} basicAuth={basicAuth}>
-                                        <Button variant="ghost"><EditIcon /></Button>
-                                    </BasicAuthEditDialog>
-                                    <Button variant="ghost" onClick={() => asyncDelete(basicAuth.id)}>
-                                        <TrashIcon />
-                                    </Button>
+                                {!readonly && <TableCell className="w-[88px] font-medium">
+                                    <div className="flex gap-1 opacity-100 transition-opacity duration-150 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100">
+                                        <Button size="icon"
+                                            variant="ghost"
+                                            onClick={() => void openDialog(
+                                                <BasicAuthEditDialog
+                                                    app={app}
+                                                    basicAuth={basicAuth}
+                                                />,
+                                                { maxWidth: '425px' },
+                                            )}
+                                        >
+                                            <EditIcon />
+                                        </Button>
+                                        <Button variant="ghost" size="icon" className="hover:text-destructive" onClick={() => asyncDelete(basicAuth.id)}>
+                                            <TrashIcon />
+                                        </Button>
+                                    </div>
                                 </TableCell>}
                             </TableRow>
                         ))}
                     </TableBody>
                 </Table>
-            </CardContent>
-            {!readonly && <CardFooter>
-                <FileMountEditDialog app={app}>
-                    <Button>Add Auth Credential</Button>
-                </FileMountEditDialog>
+            </CardContent>}
+            {!readonly && <CardFooter className={hideCard ? "px-0" : undefined}>
+                <Button
+                    onClick={() => void openDialog(
+                        <BasicAuthEditDialog app={app} />,
+                        { maxWidth: '425px' },
+                    )}
+                    variant="outline"><Plus /> Add Auth Credential
+                </Button>
             </CardFooter>}
-        </Card >
+        </CardWrapper>
     </>;
-}
\ No newline at end of file
+}
diff --git a/src/app/project/app/[appId]/advanced/health-check-settings.tsx b/src/app/project/app/[appId]/advanced/health-check-settings.tsx
index 92137d8e..1aa58280 100644
--- a/src/app/project/app/[appId]/advanced/health-check-settings.tsx
+++ b/src/app/project/app/[appId]/advanced/health-check-settings.tsx
@@ -19,10 +19,11 @@ import { SubmitButton } from "@/components/custom/submit-button";
 import { FormUtils } from "@/frontend/utils/form.utilts";
 import { ServerActionResult } from "@/shared/model/server-action-error-return.model";
 
-export default function HealthCheckSettings({ workload, readonly, saveHealthCheck }: {
+export default function HealthCheckSettings({ workload, readonly, saveHealthCheck, hideCard = false }: {
     workload: HealthCheckWorkload;
     readonly: boolean;
     saveHealthCheck: (state: ServerActionResult<any, any>, payload: HealthCheckModel) => Promise<ServerActionResult<any, any>>;
+    hideCard?: boolean;
 }) {
 
     const defaultHeaders = workload.healthCheckHttpHeadersJson
@@ -71,20 +72,21 @@ export default function HealthCheckSettings({ workload, readonly, saveHealthChec
         }
         FormUtils.mapValidationErrorsToForm<typeof healthCheckZodModel>(state, form);
     }, [form, state]);
+    const CardWrapper = hideCard ? 'div' : Card;
 
     return (
-        <Card>
-            <CardHeader>
+        <CardWrapper>
+            {!hideCard && <CardHeader>
                 <CardTitle>Health Check Settings</CardTitle>
                 <CardDescription>
                     Configure healthchecks so that k3s can automatically monitor when your application is fully started up and ready to receive traffic (In kubernetes terms, startup, readiness and liveness probes).
                 </CardDescription>
-            </CardHeader>
+            </CardHeader>}
             <Form {...form}>
                 <form action={() => form.handleSubmit((data) => {
                     formAction(data);
                 })()}>
-                    <CardContent className="space-y-6">
+                    <CardContent className={hideCard ? "space-y-6 px-0" : "space-y-6"}>
                         <FormField
                             control={form.control}
                             name="enabled"
@@ -329,11 +331,11 @@ export default function HealthCheckSettings({ workload, readonly, saveHealthChec
                             </>
                         )}
                     </CardContent>
-                    <CardFooter>
+                    <CardFooter className={hideCard ? "px-0" : undefined}>
                         <SubmitButton>Save</SubmitButton>
                     </CardFooter>
                 </form>
             </Form>
-        </Card>
+        </CardWrapper>
     );
 }
diff --git a/src/app/project/app/[appId]/advanced/network-policy.tsx b/src/app/project/app/[appId]/advanced/network-policy.tsx
index e660659c..04f01a07 100644
--- a/src/app/project/app/[appId]/advanced/network-policy.tsx
+++ b/src/app/project/app/[appId]/advanced/network-policy.tsx
@@ -22,7 +22,7 @@ import NetworkPolicyGraph from './network-policy-graph';
 
 type Project = { id: string; name: string; apps: { id: string; name: string; appType: AppExtendedModel['appType'] }[]; agents: { id: string; name: string }[] };
 
-export default function NetworkPolicy({ app, readonly }: { app: AppExtendedModel; readonly: boolean }) {
+export default function NetworkPolicy({ app, readonly, hideCard = false }: { app: AppExtendedModel; readonly: boolean; hideCard?: boolean }) {
     const router = useRouter();
     const [draft, setDraft] = useState(() => AppNetworkPolicyDraftUtils.fromApp(app));
     const [baseline, setBaseline] = useState(() => AppNetworkPolicyDraftUtils.fromApp(app));
@@ -94,10 +94,11 @@ export default function NetworkPolicy({ app, readonly }: { app: AppExtendedModel
         ))}
         onAdd={addRule}
     />, { maxWidth: 'max-w-md' });
+    const CardWrapper = hideCard ? 'div' : Card;
 
-    return <Card>
-        <CardHeader><CardTitle>Network Policy</CardTitle><CardDescription>Control which traffic can reach this app and where it can connect.</CardDescription></CardHeader>
-        <CardContent className="space-y-6">
+    return <CardWrapper>
+        {!hideCard && <CardHeader><CardTitle>Network Policy</CardTitle><CardDescription>Control which traffic can reach this app and where it can connect.</CardDescription></CardHeader>}
+        <CardContent className={hideCard ? "space-y-6 px-0" : "space-y-6"}>
             <Card className="p-0">
                 <CardContent className="space-y-4 p-4">
                     <SettingRow label="Network Policies" description="Apply traffic restrictions to this app." checked={draft.useNetworkPolicy} disabled={readonly} onChange={useNetworkPolicy => setDraft(current => ({ ...current, useNetworkPolicy }))} />
@@ -118,10 +119,10 @@ export default function NetworkPolicy({ app, readonly }: { app: AppExtendedModel
                 </TabsContent>
             </Tabs>}
         </CardContent>
-        {!readonly && dirty && <CardFooter className="flex items-center justify-between gap-4 border-t pt-6">
+        {!readonly && dirty && <CardFooter className={hideCard ? "flex items-center justify-between gap-4 px-0 pt-6" : "flex items-center justify-between gap-4 border-t pt-6"}>
             <Button onClick={saveChanges} disabled={saving}>Save & Apply Changes</Button>
         </CardFooter>}
-    </Card>;
+    </CardWrapper>;
 }
 
 function SettingRow({ label, description, checked, disabled, onChange, hint }: { label: string; description: string; checked: boolean; disabled: boolean; onChange: (checked: boolean) => void; hint?: string }) {
diff --git a/src/app/project/app/[appId]/credentials/db-crendentials.tsx b/src/app/project/app/[appId]/credentials/db-crendentials.tsx
index 8ddd6a88..5990698d 100644
--- a/src/app/project/app/[appId]/credentials/db-crendentials.tsx
+++ b/src/app/project/app/[appId]/credentials/db-crendentials.tsx
@@ -36,7 +36,7 @@ export default function DbCredentials({
             </CardHeader>
             <CardContent>
                 {!databaseCredentials ? <FullLoadingSpinner /> : <>
-                    <div className="grid grid-cols-2 gap-4">
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                         {!!databaseCredentials?.databaseName && <>   <CopyInputField
                             label="Database Name"
                             value={databaseCredentials?.databaseName || ''} />
diff --git a/src/app/project/app/[appId]/domains/node-port-edit-dialog.tsx b/src/app/project/app/[appId]/domains/node-port-edit-dialog.tsx
index a24b405c..d9de00b8 100644
--- a/src/app/project/app/[appId]/domains/node-port-edit-dialog.tsx
+++ b/src/app/project/app/[appId]/domains/node-port-edit-dialog.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import type { z } from "zod";
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
 import {
     Form,
     FormControl,
@@ -15,7 +15,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useForm } from "react-hook-form"
 
-import { useActionState, useEffect, useState } from "react";
+import { useActionState, useEffect } from "react";
 import { FormUtils } from "@/frontend/utils/form.utilts";
 import { SubmitButton } from "@/components/custom/submit-button";
 import { AppNodePort } from "@prisma/client"
@@ -23,10 +23,10 @@ import { ServerActionResult } from "@/shared/model/server-action-error-return.mo
 import { saveNodePort } from "./actions"
 import { toast } from "sonner"
 import { NodePortEditModel, nodePortEditZodModel } from "@/shared/model/node-port-edit.model"
+import { useDialog } from '@/frontend/states/zustand.states';
 
-export default function NodePortEditDialog({ children, appNodePort, appId }: { children: React.ReactNode; appNodePort?: AppNodePort; appId: string; }) {
-
-    const [isOpen, setIsOpen] = useState<boolean>(false);
+export default function NodePortEditDialog({ appNodePort, appId }: { appNodePort?: AppNodePort; appId: string; }) {
+    const { closeDialog } = useDialog();
 
     const form = useForm<z.input<typeof nodePortEditZodModel>, unknown, z.output<typeof nodePortEditZodModel>>({
         resolver: zodResolver(nodePortEditZodModel),
@@ -49,10 +49,10 @@ export default function NodePortEditDialog({ children, appNodePort, appId }: { c
             toast.success('Node port saved successfully.', {
                 description: 'Click "deploy" to apply the changes to your app.',
             });
-            setIsOpen(false);
+            closeDialog();
         }
         FormUtils.mapValidationErrorsToForm<typeof nodePortEditZodModel>(state, form);
-    }, [form, state]);
+    }, [closeDialog, form, state]);
 
     useEffect(() => {
         if (appNodePort) {
@@ -66,18 +66,13 @@ export default function NodePortEditDialog({ children, appNodePort, appId }: { c
 
     return (
         <>
-            <div onClick={() => setIsOpen(true)}>
-                {children}
-            </div>
-            <Dialog open={!!isOpen} onOpenChange={() => setIsOpen(false)}>
-                <DialogContent className="sm:max-w-[425px]">
-                    <DialogHeader>
-                        <DialogTitle>{appNodePort ? 'Edit' : 'Add'} Node Port</DialogTitle>
-                        <DialogDescription>
-                            Expose this app directly on a host/node port. Changes take effect after redeployment.
-                        </DialogDescription>
-                    </DialogHeader>
-                    <Form {...form}>
+            <DialogHeader>
+                <DialogTitle>{appNodePort ? 'Edit' : 'Add'} Node Port</DialogTitle>
+                <DialogDescription>
+                    Expose this app directly on a host/node port. Changes take effect after redeployment.
+                </DialogDescription>
+            </DialogHeader>
+            <Form {...form}>
                         <form action={() => form.handleSubmit((data) => {
                             return formAction(data);
                         })()}>
@@ -137,9 +132,7 @@ export default function NodePortEditDialog({ children, appNodePort, appId }: { c
                                 <SubmitButton>Save</SubmitButton>
                             </div>
                         </form>
-                    </Form>
-                </DialogContent>
-            </Dialog>
+            </Form>
         </>
     );
 }
diff --git a/src/app/project/app/[appId]/domains/node-ports.tsx b/src/app/project/app/[appId]/domains/node-ports.tsx
index 556b6477..50b792ea 100644
--- a/src/app/project/app/[appId]/domains/node-ports.tsx
+++ b/src/app/project/app/[appId]/domains/node-ports.tsx
@@ -8,16 +8,19 @@ import NodePortEditDialog from "./node-port-edit-dialog";
 import { Button } from "@/components/ui/button";
 import { EditIcon, Plus, TrashIcon } from "lucide-react";
 import { Toast } from "@/frontend/utils/toast.utils";
-import { useConfirmDialog } from "@/frontend/states/zustand.states";
+import { useConfirmDialog, useDialog } from "@/frontend/states/zustand.states";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 
-export default function NodePortsCard({ app, readonly }: {
+export default function NodePortsCard({ app, readonly, hideCard = false }: {
     app: AppExtendedModel;
     readonly: boolean;
+    hideCard?: boolean;
 }) {
-    const { openConfirmDialog: openDialog } = useConfirmDialog();
+    const { openConfirmDialog } = useConfirmDialog();
+    const { openDialog } = useDialog();
 
     const asyncDeleteNodePort = async (nodePortId: string) => {
-        const confirm = await openDialog({
+        const confirm = await openConfirmDialog({
             title: 'Delete Node Port',
             description: 'The node port will be removed and the changes will take effect after you redeploy the app. Are you sure you want to remove this node port?',
             okButton: 'Delete Node Port',
@@ -26,54 +29,68 @@ export default function NodePortsCard({ app, readonly }: {
             await Toast.fromAction(() => deleteNodePort(nodePortId));
         }
     };
+    const CardWrapper = hideCard ? 'div' : Card;
 
     return (
-        <Card>
+        <CardWrapper>
             <CardHeader>
                 <CardTitle>Node Ports</CardTitle>
                 <CardDescription>
                     Expose this app directly on a node/host port, bypassing Traefik. Useful for non-HTTP workloads such as SFTP, game servers, or other TCP/UDP services.
                 </CardDescription>
             </CardHeader>
-            <CardContent>
+            {app.appNodePorts.length > 0 && <CardContent className={hideCard ? "px-0" : undefined}>
                 <Table>
                     <TableCaption>{app.appNodePorts.length} Node Port{app.appNodePorts.length !== 1 ? 's' : ''}</TableCaption>
                     <TableHeader>
                         <TableRow>
                             <TableHead>Container Port</TableHead>
                             <TableHead>Node Port</TableHead>
-                            <TableHead>Protocol</TableHead>
-                            {!readonly && <TableHead className="w-[100px]">Actions</TableHead>}
+                            <TableHead className="hidden xl:table-cell">Protocol</TableHead>
+                            {!readonly && <TableHead className="w-[88px]"></TableHead>}
                         </TableRow>
                     </TableHeader>
                     <TableBody>
                         {app.appNodePorts.map((np) => (
-                            <TableRow key={np.id}>
+                            <TableRow key={np.id} className="group transition-colors duration-150 hover:bg-muted/30">
                                 <TableCell className="font-medium">{np.port}</TableCell>
                                 <TableCell className="font-medium">{np.nodePort}</TableCell>
-                                <TableCell className="font-medium">{np.protocol}</TableCell>
+                                <TableCell className="hidden font-medium xl:table-cell">{np.protocol}</TableCell>
                                 {!readonly && (
-                                    <TableCell className="font-medium flex gap-2">
-                                        <NodePortEditDialog appId={app.id} appNodePort={np}>
-                                            <Button variant="ghost"><EditIcon /></Button>
-                                        </NodePortEditDialog>
-                                        <Button variant="ghost" onClick={() => asyncDeleteNodePort(np.id)}>
-                                            <TrashIcon />
-                                        </Button>
+                                    <TableCell className="w-[88px] font-medium">
+                                        <div className="flex gap-1 opacity-100 transition-opacity duration-150 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100">
+                                            <TooltipProvider>
+                                                <Tooltip>
+                                                    <TooltipTrigger render={<Button variant="ghost" size="icon" onClick={() => void openDialog(<NodePortEditDialog appId={app.id} appNodePort={np} />, { maxWidth: '425px' })}><EditIcon /></Button>} />
+                                                    <TooltipContent>Edit node port</TooltipContent>
+                                                </Tooltip>
+                                            </TooltipProvider>
+                                            <TooltipProvider>
+                                                <Tooltip>
+                                                    <TooltipTrigger render={<Button variant="ghost" size="icon" className="hover:text-destructive" onClick={() => asyncDeleteNodePort(np.id)}><TrashIcon /></Button>} />
+                                                    <TooltipContent>Delete node port</TooltipContent>
+                                                </Tooltip>
+                                            </TooltipProvider>
+                                        </div>
                                     </TableCell>
                                 )}
                             </TableRow>
                         ))}
                     </TableBody>
                 </Table>
-            </CardContent>
+            </CardContent>}
             {!readonly && (
-                <CardFooter>
-                    <NodePortEditDialog appId={app.id}>
-                        <Button><Plus /> Add Node Port</Button>
-                    </NodePortEditDialog>
+                <CardFooter className={hideCard ? "px-0" : undefined}>
+                    <Button variant="outline"
+                        onClick={() => void openDialog(
+                            <NodePortEditDialog appId={app.id} />,
+                            { maxWidth: '425px' },
+                        )}
+                    >
+                        <Plus /> Add Node Port
+                    </Button>
                 </CardFooter>
             )}
-        </Card>
+        </CardWrapper>
     );
 }
diff --git a/src/app/project/app/[appId]/environment/env-edit.tsx b/src/app/project/app/[appId]/environment/env-edit.tsx
index 1d4a4306..5150153b 100644
--- a/src/app/project/app/[appId]/environment/env-edit.tsx
+++ b/src/app/project/app/[appId]/environment/env-edit.tsx
@@ -16,9 +16,10 @@ import { Textarea } from "@/components/ui/textarea";
 import { AppExtendedModel } from "@/shared/model/app-extended.model";
 
 
-export default function EnvEdit({ app, readonly }: {
+export default function EnvEdit({ app, readonly, hideCard = false }: {
     app: AppExtendedModel;
     readonly: boolean;
+    hideCard?: boolean;
 }) {
     const form = useForm<z.input<typeof appEnvVariablesZodModel>, unknown, z.output<typeof appEnvVariablesZodModel>>({
         resolver: zodResolver(appEnvVariablesZodModel),
@@ -37,22 +38,23 @@ export default function EnvEdit({ app, readonly }: {
     }, [form, state]);
 
     const buildArgsEnabled = app.appType === 'APP' && app.buildMethod === 'DOCKERFILE';
+    const CardWrapper = hideCard ? 'div' : Card;
 
     return <>
-        <Card>
-            <CardHeader>
+        <CardWrapper>
+            {!hideCard && <CardHeader>
                 <CardTitle>Environment Variables</CardTitle>
                 <CardDescription>
                     Provide optional environment variables for your application.
                     {app.appType !== 'APP' && <div className="text-sm text-red-500 pt-2">You should not change ENV variables for databases.</div>}
 
                 </CardDescription>
-            </CardHeader>
+            </CardHeader>}
             <Form {...form}>
                 <form action={() => form.handleSubmit((data) => {
                     return formAction(data);
                 })()}>
-                    <CardContent className="space-y-6">
+                    <CardContent className={hideCard ? "space-y-6 px-0" : "space-y-6"}>
                         <FormField
                             control={form.control}
                             name="envVars"
@@ -95,11 +97,11 @@ export default function EnvEdit({ app, readonly }: {
                             )}
                         />
                     </CardContent>
-                    {!readonly && <CardFooter>
+                    {!readonly && <CardFooter className={hideCard ? "px-0" : undefined}>
                         <SubmitButton>Save</SubmitButton>
                     </CardFooter>}
                 </form>
             </Form >
-        </Card >
+        </CardWrapper>
     </>;
 }
diff --git a/src/app/project/app/[appId]/general/app-container-config.tsx b/src/app/project/app/[appId]/general/app-container-config.tsx
index 8bd0915e..6a8deb49 100644
--- a/src/app/project/app/[appId]/general/app-container-config.tsx
+++ b/src/app/project/app/[appId]/general/app-container-config.tsx
@@ -23,9 +23,10 @@ import { ContainerCommangArgsUtils } from "@/shared/utils/container-command-args
 
 export type AppContainerConfigInputModel = z.infer<typeof appContainerConfigZodModel>;
 
-export default function GeneralAppContainerConfig({ app, readonly }: {
+export default function GeneralAppContainerConfig({ app, readonly, hideCard = false }: {
     app: AppExtendedModel;
     readonly: boolean;
+    hideCard?: boolean;
 }) {
     const inputValue = (value: unknown) => typeof value === 'string' || typeof value === 'number' ? value : '';
     // Parse containerArgs from JSON string to array
@@ -60,21 +61,22 @@ export default function GeneralAppContainerConfig({ app, readonly }: {
     }, [form, state]);
 
     const values = form.watch();
+    const CardWrapper = hideCard ? 'div' : Card;
 
     return (
-        <Card>
-            <CardHeader>
+        <CardWrapper>
+            {!hideCard && <CardHeader>
                 <CardTitle>Container Configuration</CardTitle>
                 <CardDescription>
                     Override image defaults only when your workload needs custom startup behavior or Linux security settings.
                 </CardDescription>
-            </CardHeader>
+            </CardHeader>}
             <Form {...form}>
                 <TooltipProvider delay={150}>
                     <form action={() => form.handleSubmit((data) => {
                         return formAction(data);
                     })()}>
-                        <CardContent className="space-y-6">
+                        <CardContent className={hideCard ? "space-y-6 px-0" : "space-y-6"}>
                             <div className="space-y-4">
                                 <div className="space-y-1">
                                     <p className="text-sm font-medium">Runtime</p>
@@ -210,7 +212,7 @@ export default function GeneralAppContainerConfig({ app, readonly }: {
                             </div>
                         </CardContent>
                         {!readonly && (
-                            <CardFooter className="gap-4">
+                            <CardFooter className={hideCard ? "gap-4 px-0" : "gap-4"}>
                                 <SubmitButton>Save</SubmitButton>
                                 <p className="text-red-500">{state?.message}</p>
                             </CardFooter>
@@ -218,6 +220,6 @@ export default function GeneralAppContainerConfig({ app, readonly }: {
                     </form>
                 </TooltipProvider>
             </Form>
-        </Card>
+        </CardWrapper>
     );
 }
diff --git a/src/app/project/app/[appId]/general/app-rate-limits.tsx b/src/app/project/app/[appId]/general/app-rate-limits.tsx
index 73180b1d..290aad00 100644
--- a/src/app/project/app/[appId]/general/app-rate-limits.tsx
+++ b/src/app/project/app/[appId]/general/app-rate-limits.tsx
@@ -10,6 +10,7 @@ import { useForm } from "react-hook-form";
 import { saveGeneralAppRateLimits } from "./actions";
 import { ServerActionResult } from "@/shared/model/server-action-error-return.model";
 import { Input } from "@/components/ui/input";
+import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText } from "@/components/ui/input-group";
 import { AppRateLimitsModel, appRateLimitsZodModel } from "@/shared/model/app-rate-limits.model";
 import { useActionState, useEffect, useState } from "react";
 import { toast } from "sonner";
@@ -21,9 +22,10 @@ import { KubeSizeConverter } from "@/shared/utils/kubernetes-size-converter.util
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 
 
-export default function GeneralAppRateLimits({ app, readonly }: {
+export default function GeneralAppRateLimits({ app, readonly, hideCard = false }: {
     app: AppExtendedModel;
     readonly: boolean;
+    hideCard?: boolean;
 }) {
     const form = useForm<z.input<typeof appRateLimitsZodModel>, unknown, z.output<typeof appRateLimitsZodModel>>({
         resolver: zodResolver(appRateLimitsZodModel),
@@ -58,17 +60,19 @@ export default function GeneralAppRateLimits({ app, readonly }: {
         FormUtils.mapValidationErrorsToForm<typeof appRateLimitsZodModel>(state, form);
     }, [form, state]);
 
+    const CardWrapper = hideCard ? 'div' : Card;
+
     return <>
-        <Card>
-            <CardHeader>
+        <CardWrapper>
+            {!hideCard && <CardHeader>
                 <CardTitle>Container Rate Limits</CardTitle>
                 <CardDescription>Provide optional rate Limits per running container instance.</CardDescription>
-            </CardHeader>
+            </CardHeader>}
             <Form {...form}>
                 <form action={() => form.handleSubmit((data) => {
                     return formAction(data);
                 })()}>
-                    <CardContent className="space-y-4">
+                    <CardContent className={hideCard ? "space-y-4 px-0" : "space-y-4"}>
                         <div className={cn('grid grid-cols-2 gap-4 ', app.appType !== 'APP' && 'hidden')}>
 
                             <FormField
@@ -85,16 +89,19 @@ export default function GeneralAppRateLimits({ app, readonly }: {
                                 )}
                             />
                         </div>
-                        <div className="grid grid-cols-2 gap-4">
+                        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
 
                             <FormField
                                 control={form.control}
                                 name="memoryLimit"
                                 render={({ field }) => (
                                     <FormItem>
-                                        <FormLabel>Memory Limit (MB)</FormLabel>
+                                        <FormLabel>Memory Limit</FormLabel>
                                         <FormControl>
-                                            <Input type="number" {...field} value={field.value as string | number | readonly string[] | undefined} />
+                                            <InputGroup>
+                                                <InputGroupInput type="number" {...field} value={field.value as string | number | readonly string[] | undefined} />
+                                                <InputGroupAddon align="inline-end"><InputGroupText>MB</InputGroupText></InputGroupAddon>
+                                            </InputGroup>
                                         </FormControl>
                                         <FormMessage />
                                     </FormItem>
@@ -106,20 +113,23 @@ export default function GeneralAppRateLimits({ app, readonly }: {
                                 name="memoryReservation"
                                 render={({ field }) => (
                                     <FormItem>
-                                        <FormLabel>Memory Reservation (MB)</FormLabel>
+                                        <FormLabel>Memory Reservation</FormLabel>
                                         <FormControl>
-                                            <Input type="number" {...field} value={field.value as string | number | readonly string[] | undefined} />
+                                            <InputGroup>
+                                                <InputGroupInput type="number" {...field} value={field.value as string | number | readonly string[] | undefined} />
+                                                <InputGroupAddon align="inline-end"><InputGroupText>MB</InputGroupText></InputGroupAddon>
+                                            </InputGroup>
                                         </FormControl>
                                         <FormMessage />
                                         {!readonly && suggestedMemoryMb !== undefined && (
                                             <TooltipProvider>
                                                 <Tooltip>
                                                     <TooltipTrigger delay={200} render={<span
-                                                            className="inline-flex cursor-pointer items-center rounded-full border border-blue-300 bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-700 hover:bg-blue-100 dark:border-blue-700 dark:bg-blue-950 dark:text-blue-300 dark:hover:bg-blue-900"
-                                                            onClick={() => form.setValue('memoryReservation', suggestedMemoryMb)}
-                                                        >
-                                                            ~ {suggestedMemoryMb} MB
-                                                        </span>} />
+                                                        className="inline-flex w-fit cursor-pointer items-center rounded-full border border-blue-300 bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-700 hover:bg-blue-100 dark:border-blue-700 dark:bg-blue-950 dark:text-blue-300 dark:hover:bg-blue-900"
+                                                        onClick={() => form.setValue('memoryReservation', suggestedMemoryMb)}
+                                                    >
+                                                        ~ {suggestedMemoryMb} MB
+                                                    </span>} />
                                                     <TooltipContent>
                                                         <p>Suggestion based on current pod resource usage</p>
                                                     </TooltipContent>
@@ -135,9 +145,12 @@ export default function GeneralAppRateLimits({ app, readonly }: {
                                 name="cpuLimit"
                                 render={({ field }) => (
                                     <FormItem>
-                                        <FormLabel>CPU Limit (m)</FormLabel>
+                                        <FormLabel>CPU Limit</FormLabel>
                                         <FormControl>
-                                            <Input type="number" {...field} value={field.value as string | number | readonly string[] | undefined} />
+                                            <InputGroup>
+                                                <InputGroupInput type="number" {...field} value={field.value as string | number | readonly string[] | undefined} />
+                                                <InputGroupAddon align="inline-end"><InputGroupText>mCPU</InputGroupText></InputGroupAddon>
+                                            </InputGroup>
                                         </FormControl>
                                         <FormMessage />
                                     </FormItem>
@@ -149,20 +162,23 @@ export default function GeneralAppRateLimits({ app, readonly }: {
                                 name="cpuReservation"
                                 render={({ field }) => (
                                     <FormItem>
-                                        <FormLabel>CPU Reservation (m)</FormLabel>
+                                        <FormLabel>CPU Reservation</FormLabel>
                                         <FormControl>
-                                            <Input type="number" {...field} value={field.value as string | number | readonly string[] | undefined} />
+                                            <InputGroup>
+                                                <InputGroupInput type="number" {...field} value={field.value as string | number | readonly string[] | undefined} />
+                                                <InputGroupAddon align="inline-end"><InputGroupText>mCPU</InputGroupText></InputGroupAddon>
+                                            </InputGroup>
                                         </FormControl>
                                         <FormMessage />
                                         {!readonly && suggestedCpuMillicores !== undefined && (
                                             <TooltipProvider>
                                                 <Tooltip>
                                                     <TooltipTrigger delay={200} render={<span
-                                                            className="inline-flex cursor-pointer items-center rounded-full border border-blue-300 bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-700 hover:bg-blue-100 dark:border-blue-700 dark:bg-blue-950 dark:text-blue-300 dark:hover:bg-blue-900"
-                                                            onClick={() => form.setValue('cpuReservation', suggestedCpuMillicores)}
-                                                        >
-                                                            ~ {suggestedCpuMillicores} m
-                                                        </span>} />
+                                                        className="inline-flex w-fit cursor-pointer items-center rounded-full border border-blue-300 bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-700 hover:bg-blue-100 dark:border-blue-700 dark:bg-blue-950 dark:text-blue-300 dark:hover:bg-blue-900"
+                                                        onClick={() => form.setValue('cpuReservation', suggestedCpuMillicores)}
+                                                    >
+                                                        ~ {suggestedCpuMillicores} m
+                                                    </span>} />
                                                     <TooltipContent>
                                                         <p>Suggestion based on current pod resource usage</p>
                                                     </TooltipContent>
@@ -174,13 +190,13 @@ export default function GeneralAppRateLimits({ app, readonly }: {
                             />
                         </div>
                     </CardContent>
-                    {!readonly && <CardFooter className="gap-4">
+                    {!readonly && <CardFooter className={hideCard ? "gap-4 px-0" : "gap-4"}>
                         <SubmitButton>Save</SubmitButton>
                         <p className="text-red-500">{state?.message}</p>
                     </CardFooter>}
                 </form>
             </Form >
-        </Card >
+        </CardWrapper >
 
     </>;
 }
diff --git a/src/app/project/app/[appId]/general/app-source.tsx b/src/app/project/app/[appId]/general/app-source.tsx
index 7f8818d5..a86de24f 100644
--- a/src/app/project/app/[appId]/general/app-source.tsx
+++ b/src/app/project/app/[appId]/general/app-source.tsx
@@ -43,27 +43,23 @@ export default function GeneralAppSource({
         !configured ? (
             <EmptySourceState readonly={readonly} onConnect={openSourceWizard} />
         ) : (
-            <ConfiguredSourceSummary app={app} gitSshPublicKey={gitSshPublicKey} />
+            <ConfiguredSourceSummary app={app} gitSshPublicKey={gitSshPublicKey} readonly={readonly} onConnect={openSourceWizard} />
         )
     );
 
     if (hideCard) {
-        return <div className="pt-4">{cardContent}</div>;
+        return <div className="space-y-4">
+            {cardContent}
+            {configured && app.buildMethod === 'FRAMEWORK' && <FrameworkConfigurationCard app={app} readonly={readonly} />}
+        </div>;
     }
 
     return (
         <>
             <Card>
-                <CardHeader className="flex flex-row items-start justify-between gap-4">
-                    <div>
-                        <CardTitle>Source</CardTitle>
-                        <CardDescription>Connect the source QuickStack should build or run.</CardDescription>
-                    </div>
-                    {!readonly && configured && (
-                        <Button type="button" variant="secondary" onClick={openSourceWizard}>
-                            Change source
-                        </Button>
-                    )}
+                <CardHeader >
+                    <CardTitle>Source</CardTitle>
+                    <CardDescription>Connect the source QuickStack should build or run.</CardDescription>
                 </CardHeader>
                 <CardContent>
                     {cardContent}
@@ -94,7 +90,7 @@ function EmptySourceState({ readonly, onConnect }: { readonly: boolean; onConnec
     );
 }
 
-function ConfiguredSourceSummary({ app, gitSshPublicKey }: { app: AppExtendedModel; gitSshPublicKey?: string }) {
+function ConfiguredSourceSummary({ app, gitSshPublicKey, readonly, onConnect }: { app: AppExtendedModel; gitSshPublicKey?: string; readonly: boolean; onConnect: () => void; }) {
     const { openDialog } = useDialog();
     const sourceType = app.sourceType as SourceType;
     const isGitSource = sourceType === 'GIT' || sourceType === 'GIT_SSH';
@@ -103,7 +99,7 @@ function ConfiguredSourceSummary({ app, gitSshPublicKey }: { app: AppExtendedMod
     return (
         <div className="space-y-4">
             <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
-                <div className="flex min-w-0 items-center gap-3">
+                <div className="flex w-full items-center gap-3 justify-between">
                     <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-muted">
                         <Icon className="h-5 w-5 text-muted-foreground" />
                     </div>
@@ -113,6 +109,12 @@ function ConfiguredSourceSummary({ app, gitSshPublicKey }: { app: AppExtendedMod
                             {isGitSource ? app.gitUrl : app.containerImageSource}
                         </p>
                     </div>
+                    <div className="flex-1"></div>
+                    {!readonly &&
+                        <Button type="button" variant="secondary" onClick={onConnect} >
+                            Change source
+                        </Button>
+                    }
                 </div>
             </div>
             <div className="grid gap-3 md:grid-cols-2">
diff --git a/src/app/project/app/[appId]/overview/actions.ts b/src/app/project/app/[appId]/overview/actions.ts
index 0be50a6e..6d5957b8 100644
--- a/src/app/project/app/[appId]/overview/actions.ts
+++ b/src/app/project/app/[appId]/overview/actions.ts
@@ -6,9 +6,7 @@ import buildService from "@/server/services/build.service";
 import deploymentService from "@/server/services/deployment.service";
 import monitoringService from "@/server/services/monitoring.service";
 import podService from "@/server/services/pod.service";
-import { isAuthorizedReadForApp, isAuthorizedWriteForApp, simpleAction } from "@/server/utils/action-wrapper.utils";
-import appLogsService from "@/server/services/standalone-services/app-logs.service";
-import { ServiceException } from "@/shared/model/service.exception.model";
+import { isAuthorizedReadForApp, isAuthorizedWriteForApp, isAuthorizedWriteForWorkload, simpleAction } from "@/server/utils/action-wrapper.utils";
 
 export const getDeploymentsAndBuildsForApp = async (appId: string) =>
     simpleAction(async () => {
@@ -46,22 +44,6 @@ export const getRessourceDataApp = async (projectId: string, appId: string) =>
 
 export const createNewWebhookUrl = async (appId: string) =>
     simpleAction(async () => {
-        await isAuthorizedWriteForApp(appId);
-        await appService.regenerateWebhookId(appId);
-    });
-
-export const getDownloadableLogs = async (appId: string) =>
-    simpleAction(async () => {
-        await isAuthorizedReadForApp(appId);
-        return new SuccessActionResult(await appLogsService.getAvailableLogsForApp(appId));
+        await isAuthorizedWriteForWorkload(appId);
+       return  await appService.regenerateWebhookId(appId);
     });
-
-export const exportLogsToFileForToday = async (appId: string) =>
-    simpleAction(async () => {
-        await isAuthorizedReadForApp(appId);
-        const result = await appLogsService.writeAppLogsToDiskForApp(appId);
-        if (!result) {
-            throw new ServiceException('There are no logs available for today.');
-        }
-        return new SuccessActionResult(result);
-    });
\ No newline at end of file
diff --git a/src/app/project/app/[appId]/overview/build-logs-overlay.tsx b/src/app/project/app/[appId]/overview/build-logs-overlay.tsx
index a903498a..2ed0c6e4 100644
--- a/src/app/project/app/[appId]/overview/build-logs-overlay.tsx
+++ b/src/app/project/app/[appId]/overview/build-logs-overlay.tsx
@@ -8,15 +8,18 @@ import { DeploymentInfoModel } from "@/shared/model/deployment-info.model";
 import { WorkloadType } from "@/shared/model/runtime-type.model";
 import { formatDateTime } from "@/frontend/utils/format.utils";
 import BuildLogsStreamed from "@/components/custom/build-logs-streamed";
+import { cn } from "@/frontend/utils/utils";
 
 export function BuildLogsDialogContent({
   deploymentInfo,
   workloadId,
   workloadType,
+  hideHeader = false,
 }: {
   deploymentInfo?: DeploymentInfoModel;
   workloadId?: string;
   workloadType?: WorkloadType;
+  hideHeader?: boolean;
 }) {
 
   if (!deploymentInfo) {
@@ -25,15 +28,22 @@ export function BuildLogsDialogContent({
 
   return (
     <>
-      <DialogHeader>
-        <DialogTitle>Deployment Logs</DialogTitle>
-        <DialogDescription>
-          View the logs for the selected deployment {formatDateTime(deploymentInfo.createdAt)}.
-        </DialogDescription>
-      </DialogHeader>
-      <div>
+      {!hideHeader && (
+        <DialogHeader>
+          <DialogTitle>Deployment Logs</DialogTitle>
+          <DialogDescription>
+            View the logs for the selected deployment {formatDateTime(deploymentInfo.createdAt)}.
+          </DialogDescription>
+        </DialogHeader>
+      )}
+      <div className={cn(hideHeader && "h-full min-h-0")}>
         {(!deploymentInfo.deploymentId || !workloadId || !workloadType) && 'For this build is no log available'}
-        {deploymentInfo.deploymentId && workloadId && workloadType && <BuildLogsStreamed deploymentId={deploymentInfo.deploymentId} workloadId={workloadId} workloadType={workloadType} />}
+        {deploymentInfo.deploymentId && workloadId && workloadType && <BuildLogsStreamed
+          deploymentId={deploymentInfo.deploymentId}
+          workloadId={workloadId}
+          workloadType={workloadType}
+          useFullHeight={hideHeader}
+        />}
       </div>
     </>
   )
diff --git a/src/app/project/app/[appId]/overview/deployments-grid-view.tsx b/src/app/project/app/[appId]/overview/deployments-grid-view.tsx
index 6d6f2d42..31ebdfc6 100644
--- a/src/app/project/app/[appId]/overview/deployments-grid-view.tsx
+++ b/src/app/project/app/[appId]/overview/deployments-grid-view.tsx
@@ -38,7 +38,7 @@ export function DeploymentsGridView({
         <div className="grid gap-2">
             {deployments.map(deployment => (
                 <Item
-                    key={deployment.deploymentId}
+                    key={deployment.deploymentId + deployment.createdAt?.toISOString()}
                     variant="outline"
                     className="flex-col items-stretch gap-2 p-2.5"
                 >
diff --git a/src/app/project/app/[appId]/overview/deployments.tsx b/src/app/project/app/[appId]/overview/deployments.tsx
index 39c7a6ce..4585367b 100644
--- a/src/app/project/app/[appId]/overview/deployments.tsx
+++ b/src/app/project/app/[appId]/overview/deployments.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import {
     Card,
     CardContent,
@@ -8,7 +8,7 @@ import {
 } from '@/components/ui/card';
 import FullLoadingSpinner from '@/components/ui/full-loading-spinnter';
 import { usePolling } from '@/frontend/hooks/use-polling';
-import { useConfirmDialog, useDialog } from '@/frontend/states/zustand.states';
+import { useBuildStatus, useConfirmDialog, useDialog } from '@/frontend/states/zustand.states';
 import { Toast } from '@/frontend/utils/toast.utils';
 import type { AppExtendedModel } from '@/shared/model/app-extended.model';
 import type { DeploymentInfoModel } from '@/shared/model/deployment-info.model';
@@ -29,10 +29,12 @@ export default function BuildsTab({
     app,
     role,
     view = 'default',
+    onShowLogs: onShowLogsOverride,
 }: {
     app: AppExtendedModel;
     role: RolePermissionEnum;
     view?: BuildsTabView;
+    onShowLogs?: (deployment: DeploymentInfoModel) => void;
 }) {
     const { openConfirmDialog } = useConfirmDialog();
     const { openDialog } = useDialog();
@@ -78,7 +80,7 @@ export default function BuildsTab({
         await updateBuilds();
     };
 
-    const showLogs = (deployment: DeploymentInfoModel) =>
+    const showLogs = onShowLogsOverride ?? ((deployment: DeploymentInfoModel) =>
         openDialog(
             <BuildLogsDialogContent
                 deploymentInfo={deployment}
@@ -86,7 +88,7 @@ export default function BuildsTab({
                 workloadType="app"
             />,
             { maxWidth: '1300px' },
-        );
+        ));
     const canStopBuild = (deployment: DeploymentInfoModel) =>
         role === RolePermissionEnum.READWRITE
         && !!deployment.buildJobName
@@ -98,6 +100,15 @@ export default function BuildsTab({
         && deployment.status !== 'DEPLOYING'
         && deployment.status !== 'DEPLOYED';
 
+    const currentBuildStatus = useBuildStatus(state => state.buildStatus.get(app.id)?.status);
+
+    useEffect(() => {
+        if (currentBuildStatus === undefined) {
+            return;
+        }
+        void updateBuilds();
+    }, [currentBuildStatus, updateBuilds]);
+
     usePolling(updateBuilds, {
         intervalMs: 10000,
         enabled: app.sourceType !== 'container',
diff --git a/src/app/project/app/[appId]/overview/logs-download-overlay.tsx b/src/app/project/app/[appId]/overview/logs-download-overlay.tsx
deleted file mode 100644
index aa7b8d20..00000000
--- a/src/app/project/app/[appId]/overview/logs-download-overlay.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import { Button } from "@/components/ui/button"
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog"
-import React, { useCallback, useEffect } from "react";
-import { formatDate } from "@/frontend/utils/format.utils";
-import { DownloadableAppLogsModel } from "@/shared/model/downloadable-app-logs.model";
-import { toast } from "sonner";
-import { Actions } from "@/frontend/utils/nextjs-actions.utils";
-import { exportLogsToFileForToday, getDownloadableLogs } from "./actions";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import { Download } from "lucide-react";
-import FullLoadingSpinner from "@/components/ui/full-loading-spinnter";
-import { Toast } from "@/frontend/utils/toast.utils";
-import { DateUtils } from "@/shared/utils/date.utils";
-
-export function LogsDownloadOverlay({
-  children,
-  appId,
-  onClose
-}: {
-  children: React.ReactNode;
-  appId: string;
-  onClose?: () => void;
-}) {
-
-  const [logs, setLogs] = React.useState<DownloadableAppLogsModel[] | undefined>(undefined);
-  const [isLoading, setIsLoading] = React.useState(false);
-
-  const getLogsListAsync = useCallback(async () => {
-    setIsLoading(true);
-    try {
-      let logs = await Actions.run(() => getDownloadableLogs(appId));
-      const today = new Date();
-      logs = logs.filter(log => !DateUtils.isSameDay(today, log.date));
-      logs.unshift({
-        appId: appId,
-        date: new Date()
-      });
-      setLogs(logs);
-    } catch {
-      toast.error('Error while loading log files');
-    } finally {
-      setIsLoading(false);
-    }
-  }, [appId])
-
-  const downloadLogFile = async (item: DownloadableAppLogsModel) => {
-    try {
-      setIsLoading(true);
-      // check if item.date is today
-      const today = new Date();
-      if (DateUtils.isSameDay(today, item.date)) {
-        const logsToOpen = await Toast.fromAction(() => exportLogsToFileForToday(appId));
-        if (!logsToOpen.data) {
-          throw new Error('No logs available for today');
-        }
-        item = logsToOpen.data;
-      }
-      window.open(`/api/logs-download?appId=${appId}&date=${item.date.toISOString()}`, '_blank');
-    } finally {
-      setIsLoading(false);
-    }
-  }
-
-  useEffect(() => {
-    getLogsListAsync();
-  }, [appId, getLogsListAsync]);
-
-  return (
-    <Dialog onOpenChange={(isO) => {
-      if (!isO) {
-        onClose?.();
-      }
-    }}>
-      <DialogTrigger render={children as React.ReactElement} />
-      <DialogContent className="sm:max-w-[500px]">
-        <DialogHeader>
-          <DialogTitle>Logs Download</DialogTitle>
-          <DialogDescription>
-            Every day a new export of the logs is created. You can download the logs of the running pod(s) or the logs from the past.
-          </DialogDescription>
-        </DialogHeader>
-        <ScrollArea className="max-h-[70vh]">
-          {logs ? <Table>
-            <TableCaption>{logs.length} logs</TableCaption>
-            <TableHeader>
-              <TableRow>
-                <TableHead>Date</TableHead>
-                <TableHead></TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {logs.map((item, index) => (
-                <TableRow key={index}>
-                  <TableCell>{formatDate(item.date)}</TableCell>
-                  <TableCell className="flex justify-end gap-2">
-                    <Button variant="ghost" size="sm" onClick={() => downloadLogFile(item)} disabled={isLoading}>
-                      <Download />
-                    </Button>
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table> : <FullLoadingSpinner />}
-        </ScrollArea>
-      </DialogContent>
-    </Dialog>
-  )
-}
diff --git a/src/app/project/app/[appId]/overview/logs.tsx b/src/app/project/app/[appId]/overview/logs.tsx
index 2a6e5879..96599212 100644
--- a/src/app/project/app/[appId]/overview/logs.tsx
+++ b/src/app/project/app/[appId]/overview/logs.tsx
@@ -9,10 +9,9 @@ import FullLoadingSpinner from "@/components/ui/full-loading-spinnter";
 import { toast } from "sonner";
 import { LogsDialogContent } from "@/components/custom/logs-overlay";
 import { Button } from "@/components/ui/button";
-import { Download, Expand, Terminal } from "lucide-react";
+import { Expand, Terminal } from "lucide-react";
 import { TerminalDialog } from "./terminal-overlay";
-import { LogsDownloadOverlay } from "./logs-download-overlay";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { RolePermissionEnum } from "@/shared/model/role-extended.model.ts";
 import { useDialog, usePodsStatus } from "@/frontend/states/zustand.states";
 import { cn } from "@/frontend/utils/utils";
@@ -21,10 +20,12 @@ export default function Logs({
     app,
     role,
     hideCard = false,
+    useFullHeight = false,
 }: {
     app: AppExtendedModel;
     role: RolePermissionEnum;
     hideCard?: boolean;
+    useFullHeight?: boolean;
 }) {
     const [selectedPod, setSelectedPod] = useState<PodsInfoModel | undefined>(undefined);
     const [appPods, setAppPods] = useState<PodsInfoModel[] | undefined>(undefined);
@@ -111,72 +112,74 @@ export default function Logs({
     }, [appPods, selectedPod]);
 
     const ContentWrapper = hideCard ? Fragment : Card;
+    const content = <>
+        {!hideCard && <CardHeader>
+            <CardTitle>Logs</CardTitle>
+            <CardDescription>Read logs from all running Containers.</CardDescription>
+        </CardHeader>}
+        <CardContent className={cn(
+            'space-y-4',
+            hideCard && 'p-0',
+            useFullHeight && 'flex min-h-0 flex-1 flex-col',
+        )}>
+            {!appPods && <FullLoadingSpinner />}
+            {appPods && appPods.length === 0 && <div>No running pods found for this app.</div>}
+            {selectedPod && appPods && <div className="flex gap-4">
+                <div className="flex-1">
+                    <Select
+                        value={selectedPod.podName}
+                        onValueChange={(val) => setSelectedPod(appPods.find(p => p.podName === val))}
+                        items={appPods.map((pod) => ({ value: pod.podName, label: `${pod.podName} (${pod.status})` }))}
+                    >
+                        <SelectTrigger className="w-full" >
+                            <SelectValue placeholder="Pod wählen" />
+                        </SelectTrigger>
+                        <SelectContent>
+                            {appPods.map(pod => <SelectItem key={pod.podName} value={pod.podName}>{pod.podName} ({pod.status})</SelectItem>)}
+                        </SelectContent>
+                    </Select>
+                </div>
+                {role === RolePermissionEnum.READWRITE && <div>
+                    <TerminalDialog terminalInfo={{
+                        podName: selectedPod.podName,
+                        containerName: selectedPod.containerName,
+                        namespace: app.projectId
+                    }} >
+                        <Button variant="secondary">
+                            <Terminal />  Terminal
+                        </Button>
+                    </TerminalDialog>
+                </div>}
+                <div>
+                    <Tooltip>
+                        <TooltipTrigger delay={300}>
+                            <Button variant="secondary" onClick={() => openDialog(<LogsDialogContent namespace={app.projectId} podName={selectedPod.podName} />, { maxWidth: '1300px' })}>
+                                <Expand />
+                            </Button>
+                        </TooltipTrigger>
+                        <TooltipContent>
+                            <p>Fullscreen Logs</p>
+                        </TooltipContent>
+                    </Tooltip>
+                </div>
+            </div>}
+            {app.projectId && selectedPod && <div className={cn(useFullHeight && 'min-h-0 flex-1')}>
+                <LogsStreamed
+                    namespace={app.projectId}
+                    podName={selectedPod.podName}
+                    useFullHeight={useFullHeight}
+                />
+            </div>}
+        </CardContent>
+    </>;
+
+    if (hideCard && useFullHeight) {
+        return <div className="flex h-full min-h-0 flex-col">{content}</div>;
+    }
+
     return <>
         <ContentWrapper>
-            {!hideCard && <CardHeader>
-                <CardTitle>Logs</CardTitle>
-                <CardDescription>Read logs from all running Containers.</CardDescription>
-            </CardHeader>}
-            <CardContent className={cn('space-y-4', hideCard ? 'p-0' : '')}>
-                {!appPods && <FullLoadingSpinner />}
-                {appPods && appPods.length === 0 && <div>No running pods found for this app.</div>}
-                {selectedPod && appPods && <div className="flex gap-4">
-                    <div className="flex-1">
-                        <Select
-                            value={selectedPod.podName}
-                            onValueChange={(val) => setSelectedPod(appPods.find(p => p.podName === val))}
-                            items={appPods.map((pod) => ({ value: pod.podName, label: `${pod.podName} (${pod.status})` }))}
-                        >
-                            <SelectTrigger className="w-full" >
-                                <SelectValue placeholder="Pod wählen" />
-                            </SelectTrigger>
-                            <SelectContent>
-                                {appPods.map(pod => <SelectItem key={pod.podName} value={pod.podName}>{pod.podName} ({pod.status})</SelectItem>)}
-                            </SelectContent>
-                        </Select>
-                    </div>
-                    {role === RolePermissionEnum.READWRITE && <div>
-                        <TerminalDialog terminalInfo={{
-                            podName: selectedPod.podName,
-                            containerName: selectedPod.containerName,
-                            namespace: app.projectId
-                        }} >
-                            <Button variant="secondary">
-                                <Terminal />  Terminal
-                            </Button>
-                        </TerminalDialog>
-                    </div>}
-                    <div>
-                        <TooltipProvider>
-                            <Tooltip>
-                                <TooltipTrigger delay={300}>
-                                    <LogsDownloadOverlay appId={app.id} >
-                                        <Button variant="secondary">
-                                            <Download />
-                                        </Button>
-                                    </LogsDownloadOverlay>
-                                </TooltipTrigger>
-                                <TooltipContent>
-                                    <p>Download Logs</p>
-                                </TooltipContent>
-                            </Tooltip>
-                        </TooltipProvider>
-                    </div>
-                    <div>
-                        <Tooltip>
-                            <TooltipTrigger delay={300}>
-                                <Button variant="secondary" onClick={() => openDialog(<LogsDialogContent namespace={app.projectId} podName={selectedPod.podName} />, { maxWidth: '1300px' })}>
-                                    <Expand />
-                                </Button>
-                            </TooltipTrigger>
-                            <TooltipContent>
-                                <p>Fullscreen Logs</p>
-                            </TooltipContent>
-                        </Tooltip>
-                    </div>
-                </div>}
-                {app.projectId && selectedPod && <LogsStreamed namespace={app.projectId} podName={selectedPod.podName} />}
-            </CardContent>
+            {content}
         </ContentWrapper>
     </>;
 }
diff --git a/src/app/project/app/[appId]/overview/logs.unit.spec.ts b/src/app/project/app/[appId]/overview/logs.unit.spec.ts
index 12563626..f7fac074 100644
--- a/src/app/project/app/[appId]/overview/logs.unit.spec.ts
+++ b/src/app/project/app/[appId]/overview/logs.unit.spec.ts
@@ -12,7 +12,6 @@ vi.mock('./actions', () => ({
 
 vi.mock('../../../../../components/custom/logs-streamed', () => ({ default: () => null }));
 vi.mock('./terminal-overlay', () => ({ TerminalDialog: () => null }));
-vi.mock('./logs-download-overlay', () => ({ LogsDownloadOverlay: () => null }));
 vi.mock('@/components/custom/logs-overlay', () => ({ LogsDialogContent: () => null }));
 
 const mockedGetPodsForApp = vi.mocked(getPodsForApp);
diff --git a/src/app/project/app/[appId]/overview/terminal-overlay.tsx b/src/app/project/app/[appId]/overview/terminal-overlay.tsx
index 144dac83..8b2cc3bd 100644
--- a/src/app/project/app/[appId]/overview/terminal-overlay.tsx
+++ b/src/app/project/app/[appId]/overview/terminal-overlay.tsx
@@ -1,37 +1,43 @@
 import {
-  Dialog,
-  DialogContent,
   DialogHeader,
   DialogTitle,
-  DialogTrigger,
 } from "@/components/ui/dialog"
-import React from "react";
+import { useDialog } from "@/frontend/states/zustand.states";
+import { cloneElement, type MouseEvent, type ReactElement } from "react";
 import { TerminalSetupInfoModel } from "@/shared/model/terminal-setup-info.model";
 import TerminalStreamed from "./terminal-streamed";
 
+function TerminalDialogContent({ terminalInfo }: { terminalInfo: TerminalSetupInfoModel }) {
+  return <>
+    <DialogHeader>
+      <DialogTitle>Terminal</DialogTitle>
+    </DialogHeader>
+    <div className="space-y-4">
+      <TerminalStreamed terminalInfo={terminalInfo} />
+    </div>
+  </>;
+}
+
 export function TerminalDialog({
   terminalInfo,
   children
 }: {
   terminalInfo: TerminalSetupInfoModel;
-  children: React.ReactNode;
+  children: ReactElement<{ onClick?: (event: MouseEvent) => void }>;
 }) {
+  const { openDialog } = useDialog();
 
-  const [isOpen, setIsOpen] = React.useState(false);
+  const openTerminalDialog = () => {
+    void openDialog(
+      <TerminalDialogContent terminalInfo={terminalInfo} />,
+      { maxWidth: '1300px' },
+    );
+  };
 
-  return (
-    <Dialog open={isOpen} onOpenChange={(isO) => {
-      setIsOpen(isO);
-    }}>
-      <DialogTrigger render={children as React.ReactElement} />
-      <DialogContent className="sm:max-w-[1300px]">
-        <DialogHeader>
-          <DialogTitle>Terminal</DialogTitle>
-        </DialogHeader>
-        <div className="space-y-4">
-          {terminalInfo ? <TerminalStreamed terminalInfo={terminalInfo} /> : 'Currently there is no Terminal available'}
-        </div>
-      </DialogContent>
-    </Dialog>
-  )
+  return cloneElement(children, {
+    onClick: (event) => {
+      children.props.onClick?.(event);
+      openTerminalDialog();
+    },
+  });
 }
diff --git a/src/app/project/app/[appId]/overview/webhook-deployment.tsx b/src/app/project/app/[appId]/overview/webhook-deployment.tsx
index 5169881a..4ef83350 100644
--- a/src/app/project/app/[appId]/overview/webhook-deployment.tsx
+++ b/src/app/project/app/[appId]/overview/webhook-deployment.tsx
@@ -19,14 +19,18 @@ export default function WebhookDeploymentInfo({
     const { openConfirmDialog } = useConfirmDialog();
     const [webhookUrl, setWebhookUrl] = useState<string | undefined>(undefined);
 
-    useEffect(() => {
-        if (app.webhookId) {
+    const setWebhookId = (webhookId?: string | null | void) => {
+        if (webhookId) {
             const hostname = window.location.hostname;
             const port = [80, 443].includes(Number(window.location.port)) ? '' : `:${window.location.port}`;
             const protocol = window.location.protocol;
-            setWebhookUrl(`${protocol}//${hostname}${port}/api/v1/webhook/deploy?id=${app.webhookId}`);
+            setWebhookUrl(`${protocol}//${hostname}${port}/api/v1/webhook/deploy?id=${webhookId}`);
         }
-    }, [app]);
+    }
+
+    useEffect(() => {
+        setWebhookId(app.webhookId);
+    }, [app, app.webhookId]);
 
     const createNewWebhookUrlAsync = async () => {
         if (!await openConfirmDialog({
@@ -36,7 +40,8 @@ export default function WebhookDeploymentInfo({
         })) {
             return;
         }
-        await Toast.fromAction(() => createNewWebhookUrl(app.id), 'Webhook URL has been regenerated.');
+        const newWebhookId = await Toast.fromAction(() => createNewWebhookUrl(app.id), 'Webhook URL has been regenerated.');
+        setWebhookId(newWebhookId.data);
     }
 
     const copyWebhookUrl = () => {
diff --git a/src/app/project/app/[appId]/volumes/actions.ts b/src/app/project/app/[appId]/volumes/actions.ts
index e31eac5f..c06a65fb 100644
--- a/src/app/project/app/[appId]/volumes/actions.ts
+++ b/src/app/project/app/[appId]/volumes/actions.ts
@@ -3,7 +3,7 @@
 import { appVolumeEditZodModel } from "@/shared/model/volume-edit.model";
 import { ServerActionResult, SuccessActionResult } from "@/shared/model/server-action-error-return.model";
 import appService from "@/server/services/app.service";
-import { isAuthorizedReadForApp, isAuthorizedWriteForApp, saveFormAction, simpleAction } from "@/server/utils/action-wrapper.utils";
+import { isAuthorizedReadForApp, isAuthorizedWriteForApp, isAuthorizedWriteForWorkload, saveFormAction, simpleAction } from "@/server/utils/action-wrapper.utils";
 import { z } from "zod";
 import { ServiceException } from "@/shared/model/service.exception.model";
 import pvcService from "@/server/services/pvc.service";
@@ -16,7 +16,7 @@ import { volumeUploadZodModel } from "@/shared/model/volume-upload.model";
 import restoreService from "@/server/services/restore.service";
 import fileBrowserService from "@/server/services/file-browser-service";
 import monitoringService from "@/server/services/monitoring.service";
-import dataAccess from "@/server/adapter/db.client";
+import type { BackupEntry } from "@/shared/model/backup-info.model";
 
 const actionAppVolumeEditZodModel = appVolumeEditZodModel.merge(z.object({
     appId: z.string(),
@@ -47,14 +47,7 @@ export const saveVolume = async (prevState: any, inputData: z.infer<typeof actio
         const sharedVolumeId = existingVolume?.sharedVolumeId ?? validatedData.sharedVolumeId ?? undefined;
 
         if (sharedVolumeId) {
-            const sharedVolume = await dataAccess.client.appVolume.findFirstOrThrow({
-                where: {
-                    id: sharedVolumeId
-                },
-                include: {
-                    app: true
-                }
-            });
+            const sharedVolume = await appService.getVolumeWithAppById(sharedVolumeId);
             if (sharedVolume.app.projectId !== existingApp.projectId) {
                 throw new ServiceException('Shared volumes must belong to the same project.');
             }
@@ -176,19 +169,7 @@ export const runBackupVolumeSchedule = async (backupVolumeId: string) =>
     simpleAction(async () => {
         await validateBackupVolumeWriteAuthorization(backupVolumeId);
 
-        // Get the backup volume with app info to determine backup method
-        const backupVolume = await dataAccess.client.volumeBackup.findFirstOrThrow({
-            where: {
-                id: backupVolumeId
-            },
-            include: {
-                volume: {
-                    include: {
-                        app: true
-                    }
-                }
-            }
-        });
+        const backupVolume = await volumeBackupService.getWithVolumeAndAppById(backupVolumeId);
 
         // Use database-specific backup if it's a database app AND useDatabaseBackup is true
         if (backupVolume.volume.app.appType !== 'APP' && backupVolume.useDatabaseBackup) {
@@ -200,6 +181,14 @@ export const runBackupVolumeSchedule = async (backupVolumeId: string) =>
         return new SuccessActionResult(undefined, 'Backup created and uploaded successfully');
     });
 
+export const getBackupsForVolumeSchedule = async (backupVolumeId: string) =>
+    simpleAction(async () => {
+        await validateBackupVolumeReadAuthorization(backupVolumeId);
+
+        const backups = await backupService.getBackupsForVolumeSchedule(backupVolumeId);
+        return new SuccessActionResult<BackupEntry[]>(backups);
+    });
+
 export const openFileBrowserForVolume = async (volumeId: string) =>
     simpleAction(async () => {
         await validateVolumeWriteAuthorization(volumeId);
@@ -211,53 +200,26 @@ export const openFileBrowserForVolume = async (volumeId: string) =>
     }>>;
 
 async function validateVolumeWriteAuthorization(volumeId: string) {
-    const volumeAppId = await dataAccess.client.appVolume.findFirstOrThrow({
-        where: {
-            id: volumeId,
-        },
-        select: {
-            appId: true,
-        }
-    });
-    await isAuthorizedWriteForApp(volumeAppId?.appId);
+    const volume = await appService.getVolumeWithAppById(volumeId);
+    await isAuthorizedWriteForWorkload(volume.appId);
 }
 
 async function validateVolumeReadAuthorization(volumeId: string) {
-    const volumeAppId = await dataAccess.client.appVolume.findFirstOrThrow({
-        where: {
-            id: volumeId,
-        },
-        select: {
-            appId: true,
-        }
-    });
-    await isAuthorizedReadForApp(volumeAppId?.appId);
+    const volume = await appService.getVolumeWithAppById(volumeId);
+    await isAuthorizedReadForApp(volume.appId);
 }
 
 async function validateFileMountWriteAuthorization(fileMountId: string) {
-    const fileMountAppId = await dataAccess.client.appFileMount.findFirstOrThrow({
-        where: {
-            id: fileMountId,
-        },
-        select: {
-            appId: true,
-        }
-    });
-    await isAuthorizedWriteForApp(fileMountAppId?.appId);
+    const appId = await appService.getFileMountAppId(fileMountId);
+    await isAuthorizedWriteForApp(appId);
 }
 
 async function validateBackupVolumeWriteAuthorization(backupVolumeId: string) {
-    const volumeAppId = await dataAccess.client.volumeBackup.findFirstOrThrow({
-        where: {
-            id: backupVolumeId,
-        },
-        select: {
-            volume: {
-                select: {
-                    appId: true,
-                }
-            }
-        }
-    });
-    await isAuthorizedWriteForApp(volumeAppId?.volume.appId);
+    const appId = await volumeBackupService.getAppIdById(backupVolumeId);
+    await isAuthorizedWriteForApp(appId);
+}
+
+async function validateBackupVolumeReadAuthorization(backupVolumeId: string) {
+    const appId = await volumeBackupService.getAppIdById(backupVolumeId);
+    await isAuthorizedReadForApp(appId);
 }
diff --git a/src/app/project/app/[appId]/volumes/shared-storage-edit-overlay.tsx b/src/app/project/app/[appId]/volumes/shared-storage-edit-overlay.tsx
index f2f9305a..22203239 100644
--- a/src/app/project/app/[appId]/volumes/shared-storage-edit-overlay.tsx
+++ b/src/app/project/app/[appId]/volumes/shared-storage-edit-overlay.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import type { z } from "zod";
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
 import {
     Form,
     FormControl,
@@ -25,6 +25,7 @@ import { AppExtendedModel } from "@/shared/model/app-extended.model"
 import SelectFormField from "@/components/custom/select-form-field"
 import { Alert, AlertDescription } from "@/components/ui/alert"
 import { Info } from "lucide-react"
+import { useDialog } from "@/frontend/states/zustand.states";
 
 type ShareableVolume = {
     id: string;
@@ -35,12 +36,11 @@ type ShareableVolume = {
     app: { name: string };
 };
 
-export default function SharedStorageEditDialog({ children, app }: {
-    children: React.ReactNode;
+export default function SharedStorageEditDialog({ app }: {
     app: AppExtendedModel;
 }) {
 
-    const [isOpen, setIsOpen] = useState<boolean>(false);
+    const { closeDialog } = useDialog();
     const [shareableVolumes, setShareableVolumes] = useState<ShareableVolume[]>([]);
     const [isLoadingVolumes, setIsLoadingVolumes] = useState(false);
 
@@ -64,22 +64,20 @@ export default function SharedStorageEditDialog({ children, app }: {
 
     // Fetch shareable volumes when dialog opens
     useEffect(() => {
-        if (isOpen) {
-            setIsLoadingVolumes(true);
-            getShareableVolumes(app.id).then(result => {
-                if (result.status === 'success' && result.data) {
-                    const alreadyAddedSharedVolumes = app.appVolumes
-                        .filter(v => !!v.sharedVolumeId)
-                        .map(v => v.sharedVolumeId);
-                    setShareableVolumes(result.data.filter(v => !alreadyAddedSharedVolumes.includes(v.id)));
-                } else {
-                    setShareableVolumes([]);
-                    toast.error('An error occurred while fetching shareable volumes');
-                }
-                setIsLoadingVolumes(false);
-            });
-        }
-    }, [isOpen, app.id, app.appVolumes]);
+        setIsLoadingVolumes(true);
+        getShareableVolumes(app.id).then(result => {
+            if (result.status === 'success' && result.data) {
+                const alreadyAddedSharedVolumes = app.appVolumes
+                    .filter(v => !!v.sharedVolumeId)
+                    .map(v => v.sharedVolumeId);
+                setShareableVolumes(result.data.filter(v => !alreadyAddedSharedVolumes.includes(v.id)));
+            } else {
+                setShareableVolumes([]);
+                toast.error('An error occurred while fetching shareable volumes');
+            }
+            setIsLoadingVolumes(false);
+        });
+    }, [app.id, app.appVolumes]);
 
     // Watch selected volume and auto-fill fields
     const watchedSharedVolumeId = form.watch("sharedVolumeId");
@@ -100,18 +98,13 @@ export default function SharedStorageEditDialog({ children, app }: {
             toast.success('Shared volume mounted successfully', {
                 description: "Click \"deploy\" to apply the changes to your app.",
             });
-            setIsOpen(false);
+            closeDialog();
         }
         FormUtils.mapValidationErrorsToForm<typeof appVolumeEditZodModel>(state, form);
-    }, [form, state]);
+    }, [closeDialog, form, state]);
 
     return (
         <>
-            <div onClick={() => setIsOpen(true)}>
-                {children}
-            </div>
-            <Dialog open={!!isOpen} onOpenChange={() => setIsOpen(false)}>
-                <DialogContent className="sm:max-w-[425px]">
                     <DialogHeader>
                         <DialogTitle>Mount Shared Volume</DialogTitle>
                         <DialogDescription>
@@ -171,8 +164,6 @@ export default function SharedStorageEditDialog({ children, app }: {
                             </div>
                         </form>
                     </Form >
-                </DialogContent>
-            </Dialog>
         </>
     )
 }
diff --git a/src/app/project/app/[appId]/volumes/storage-edit-overlay.tsx b/src/app/project/app/[appId]/volumes/storage-edit-overlay.tsx
index 1d3df79f..39d117f3 100644
--- a/src/app/project/app/[appId]/volumes/storage-edit-overlay.tsx
+++ b/src/app/project/app/[appId]/volumes/storage-edit-overlay.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import type { z } from "zod";
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
 import {
   Form,
   FormControl,
@@ -29,7 +29,7 @@ import { Check, ChevronsUpDown, CircleHelp } from "lucide-react"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useForm } from "react-hook-form"
 
-import { useActionState, useEffect, useState } from "react";
+import { useActionState, useEffect } from "react";
 import { FormUtils } from "@/frontend/utils/form.utilts";
 import { SubmitButton } from "@/components/custom/submit-button";
 import { AppVolume } from "@prisma/client"
@@ -41,20 +41,20 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/comp
 import { AppExtendedModel } from "@/shared/model/app-extended.model"
 import CheckboxFormField from "@/components/custom/checkbox-form-field"
 import StorageClassCombobox from "@/components/custom/storage-class-combobox"
+import { useDialog } from "@/frontend/states/zustand.states";
 
 const accessModes = [
   { label: "ReadWriteOnce", value: "ReadWriteOnce" },
   { label: "ReadWriteMany", value: "ReadWriteMany" },
 ] as const
 
-export default function StorageEditDialog({ children, volume, app, storageClasses }: {
-  children: React.ReactNode;
+export default function StorageEditDialog({ volume, app, storageClasses }: {
   volume?: AppVolume;
   app: AppExtendedModel;
   storageClasses: string[];
 }) {
 
-  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const { closeDialog } = useDialog();
   const defaultStorageClassName = volume?.storageClassName ?? storageClasses[0] ?? "";
 
   const form = useForm<z.input<typeof appVolumeEditZodModel>, unknown, z.output<typeof appVolumeEditZodModel>>({
@@ -89,10 +89,10 @@ export default function StorageEditDialog({ children, volume, app, storageClasse
       toast.success('Volume saved successfully', {
         description: "Click \"deploy\" to apply the changes to your app.",
       });
-      setIsOpen(false);
+      closeDialog();
     }
     FormUtils.mapValidationErrorsToForm<typeof appVolumeEditZodModel>(state, form);
-  }, [form, state]);
+  }, [closeDialog, form, state]);
 
   useEffect(() => {
     form.reset({
@@ -109,11 +109,6 @@ export default function StorageEditDialog({ children, volume, app, storageClasse
 
   return (
     <>
-      <div onClick={() => setIsOpen(true)}>
-        {children}
-      </div>
-      <Dialog open={!!isOpen} onOpenChange={() => setIsOpen(false)}>
-        <DialogContent className="sm:max-w-[425px]">
           <DialogHeader>
             <DialogTitle>Edit Volume</DialogTitle>
             <DialogDescription>
@@ -287,8 +282,6 @@ export default function StorageEditDialog({ children, volume, app, storageClasse
               </div>
             </form>
           </Form >
-        </DialogContent>
-      </Dialog>
     </>
   )
 }
diff --git a/src/app/project/app/[appId]/volumes/storages.tsx b/src/app/project/app/[appId]/volumes/storages.tsx
index 1b5df83f..3ea0698d 100644
--- a/src/app/project/app/[appId]/volumes/storages.tsx
+++ b/src/app/project/app/[appId]/volumes/storages.tsx
@@ -4,12 +4,12 @@ import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }
 import { AppExtendedModel } from "@/shared/model/app-extended.model";
 import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Button } from "@/components/ui/button";
-import { Download, EditIcon, Folder, TrashIcon, Share2, Unlink } from "lucide-react";
+import { Download, EditIcon, Folder, TrashIcon, Share2, Unlink, Plus, FolderPlus } from "lucide-react";
 import DialogEditDialog from "./storage-edit-overlay";
 import SharedStorageEditDialog from "./shared-storage-edit-overlay";
 import { Toast } from "@/frontend/utils/toast.utils";
 import { deleteVolume, downloadPvcData, getPvcUsage, openFileBrowserForVolume } from "./actions";
-import { useConfirmDialog } from "@/frontend/states/zustand.states";
+import { useConfirmDialog, useDialog } from "@/frontend/states/zustand.states";
 import { AppVolume } from "@prisma/client";
 import React from "react";
 import { KubeObjectNameUtils } from "@/server/utils/kube-object-name.utils";
@@ -30,10 +30,11 @@ type AppVolumeWithCapacity = (AppVolume & {
     usedPercentage?: number;
 });
 
-export default function StorageList({ app, readonly, storageClasses }: {
+export default function StorageList({ app, readonly, storageClasses, hideCard = false }: {
     app: AppExtendedModel;
     storageClasses: string[];
     readonly: boolean;
+    hideCard?: boolean;
 }) {
 
     const [volumesWithStorage, setVolumesWithStorage] = React.useState<AppVolumeWithCapacity[]>(app.appVolumes as AppVolumeWithCapacity[]);
@@ -64,6 +65,7 @@ export default function StorageList({ app, readonly, storageClasses }: {
     }, [loadAndMapStorageData]);
 
     const { openConfirmDialog: openDialog } = useConfirmDialog();
+    const { openDialog: openGenericDialog } = useDialog();
 
     const asyncDeleteVolume = async (volumeId: string, isBaseVolume: boolean) => {
         try {
@@ -143,31 +145,33 @@ export default function StorageList({ app, readonly, storageClasses }: {
         }
     }
 
+    const CardWrapper = hideCard ? 'div' : Card;
+
     return <>
-        <Card>
+        <CardWrapper>
             <CardHeader>
                 <CardTitle>Volumes</CardTitle>
                 <CardDescription>Add one or more volumes to to configure persistent storage within your container.</CardDescription>
             </CardHeader>
-            <CardContent>
+            {volumesWithStorage.length > 0 && <CardContent className={hideCard ? "px-0" : undefined}>
                 <Table>
                     <TableCaption>{app.appVolumes.length} Storage</TableCaption>
                     <TableHeader>
                         <TableRow>
                             <TableHead>Mount Path</TableHead>
-                            <TableHead>Storage Size</TableHead>
+                            <TableHead className="hidden xl:table-cell">Storage Size</TableHead>
                             <TableHead>Storage Used</TableHead>
-                            <TableHead>Storage Class</TableHead>
-                            <TableHead>Access Mode</TableHead>
-                            <TableHead>Shared</TableHead>
-                            <TableHead className="w-[100px]">Action</TableHead>
+                            <TableHead className="hidden 2xl:table-cell">Storage Class</TableHead>
+                            <TableHead className="hidden 2xl:table-cell">Access Mode</TableHead>
+                            <TableHead className="hidden 2xl:table-cell">Shared</TableHead>
+                            <TableHead className="w-[160px]"></TableHead>
                         </TableRow>
                     </TableHeader>
                     <TableBody>
                         {volumesWithStorage.map(volume => (
-                            <TableRow key={volume.containerMountPath}>
+                            <TableRow key={volume.containerMountPath} className="group transition-colors duration-150 hover:bg-muted/30">
                                 <TableCell className="font-medium">{volume.containerMountPath}</TableCell>
-                                <TableCell className="font-medium">{volume.size} MB</TableCell>
+                                <TableCell className="hidden font-medium xl:table-cell">{volume.size} MB</TableCell>
                                 <TableCell className="font-medium space-y-2">
                                     {volume.usedPercentage && <>
                                         <Progress value={volume.usedPercentage}
@@ -177,9 +181,9 @@ export default function StorageList({ app, readonly, storageClasses }: {
                                         </div>
                                     </>}
                                 </TableCell>
-                                <TableCell className="font-medium capitalize">{volume.storageClassName?.replace('-', ' ')}</TableCell>
-                                <TableCell className="font-medium">{volume.accessMode}</TableCell>
-                                <TableCell className="font-medium">
+                                <TableCell className="hidden font-medium capitalize 2xl:table-cell">{volume.storageClassName?.replace('-', ' ')}</TableCell>
+                                <TableCell className="hidden font-medium 2xl:table-cell">{volume.accessMode}</TableCell>
+                                <TableCell className="hidden font-medium 2xl:table-cell">
                                     {volume.shareWithOtherApps && (
                                         <TooltipProvider>
                                             <Tooltip>
@@ -211,34 +215,35 @@ export default function StorageList({ app, readonly, storageClasses }: {
                                         </TooltipProvider>
                                     )}
                                 </TableCell>
-                                <TableCell className="font-medium flex gap-2">
-                                    {!volume.sharedVolumeId && <>
-                                        <TooltipProvider>
-                                            <Tooltip>
-                                                <TooltipTrigger delay={200}>
-                                                    <Button variant="ghost" onClick={() => asyncDownloadPvcData(volume.id)} disabled={isLoading}>
-                                                        <Download />
-                                                    </Button>
-                                                </TooltipTrigger>
-                                                <TooltipContent>
-                                                    <p>Download volume content</p>
-                                                </TooltipContent>
-                                            </Tooltip>
-                                        </TooltipProvider>
-                                        {!readonly && <TooltipProvider>
-                                            <Tooltip>
-                                                <TooltipTrigger delay={200}>
-                                                    <Button variant="ghost" onClick={() => openFileBrowserForVolumeAsync(volume.id)} disabled={isLoading}>
-                                                        <Folder />
-                                                    </Button>
-                                                </TooltipTrigger>
-                                                <TooltipContent>
-                                                    <p>View content of Volume</p>
-                                                </TooltipContent>
-                                            </Tooltip>
-                                        </TooltipProvider>}
-                                    </>}
-                                    {/*<StorageRestoreDialog app={app} volume={volume}>
+                                <TableCell className="w-[160px] font-medium">
+                                    <div className="flex gap-2 opacity-100 transition-opacity duration-150 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100">
+                                        {!volume.sharedVolumeId && <>
+                                            <TooltipProvider>
+                                                <Tooltip>
+                                                    <TooltipTrigger delay={200}>
+                                                        <Button variant="ghost" onClick={() => asyncDownloadPvcData(volume.id)} disabled={isLoading}>
+                                                            <Download />
+                                                        </Button>
+                                                    </TooltipTrigger>
+                                                    <TooltipContent>
+                                                        <p>Download volume content</p>
+                                                    </TooltipContent>
+                                                </Tooltip>
+                                            </TooltipProvider>
+                                            {!readonly && <TooltipProvider>
+                                                <Tooltip>
+                                                    <TooltipTrigger delay={200}>
+                                                        <Button variant="ghost" onClick={() => openFileBrowserForVolumeAsync(volume.id)} disabled={isLoading}>
+                                                            <Folder />
+                                                        </Button>
+                                                    </TooltipTrigger>
+                                                    <TooltipContent>
+                                                        <p>View content of Volume</p>
+                                                    </TooltipContent>
+                                                </Tooltip>
+                                            </TooltipProvider>}
+                                        </>}
+                                        {/*<StorageRestoreDialog app={app} volume={volume}>
                                         <TooltipProvider>
                                             <Tooltip>
                                                 <TooltipTrigger delay={200}>
@@ -252,59 +257,77 @@ export default function StorageList({ app, readonly, storageClasses }: {
                                             </Tooltip>
                                         </TooltipProvider>
                                     </StorageRestoreDialog>*/}
-                                    {!readonly && <>
-                                        {volume.sharedVolumeId ? (
-                                            <TooltipProvider>
-                                                <Tooltip>
-                                                    <TooltipTrigger delay={200}>
-                                                        <Button variant="ghost" disabled={true}><EditIcon /></Button>
-                                                    </TooltipTrigger>
-                                                    <TooltipContent>
-                                                        <p>Shared volumes cannot be edited (size and storage class are inherited)</p>
-                                                    </TooltipContent>
-                                                </Tooltip>
-                                            </TooltipProvider>
-                                        ) : (
-                                            <DialogEditDialog app={app} volume={volume} storageClasses={storageClasses}>
+                                        {!readonly && <>
+                                            {volume.sharedVolumeId ? (
                                                 <TooltipProvider>
                                                     <Tooltip>
                                                         <TooltipTrigger delay={200}>
-                                                            <Button variant="ghost" disabled={isLoading}><EditIcon /></Button>
+                                                            <Button variant="ghost" disabled={true}><EditIcon /></Button>
+                                                        </TooltipTrigger>
+                                                        <TooltipContent>
+                                                            <p>Shared volumes cannot be edited (size and storage class are inherited)</p>
+                                                        </TooltipContent>
+                                                    </Tooltip>
+                                                </TooltipProvider>
+                                            ) : (
+                                                <TooltipProvider>
+                                                    <Tooltip>
+                                                        <TooltipTrigger delay={200}>
+                                                            <Button
+                                                                variant="ghost"
+                                                                disabled={isLoading}
+                                                                onClick={() => void openGenericDialog(
+                                                                    <DialogEditDialog app={app} volume={volume} storageClasses={storageClasses} />,
+                                                                    { maxWidth: '425px' },
+                                                                )}
+                                                            >
+                                                                <EditIcon />
+                                                            </Button>
                                                         </TooltipTrigger>
                                                         <TooltipContent>
                                                             <p>Edit volume settings</p>
                                                         </TooltipContent>
                                                     </Tooltip>
                                                 </TooltipProvider>
-                                            </DialogEditDialog>
-                                        )}
-                                        <TooltipProvider>
-                                            <Tooltip>
-                                                <TooltipTrigger delay={200}>
-                                                    <Button variant="ghost" onClick={() => asyncDeleteVolume(volume.id, !volume.sharedVolumeId)} disabled={isLoading}>
-                                                        {volume.sharedVolumeId ? <Unlink /> : <TrashIcon />}
-                                                    </Button>
-                                                </TooltipTrigger>
-                                                <TooltipContent>
-                                                    <p>{volume.sharedVolumeId ? 'Detach Volume' : 'Delete Volume'}</p>
-                                                </TooltipContent>
-                                            </Tooltip>
-                                        </TooltipProvider>
-                                    </>}
+                                            )}
+                                            <TooltipProvider>
+                                                <Tooltip>
+                                                    <TooltipTrigger delay={200}>
+                                                        <Button variant="ghost" onClick={() => asyncDeleteVolume(volume.id, !volume.sharedVolumeId)} disabled={isLoading}>
+                                                            {volume.sharedVolumeId ? <Unlink /> : <TrashIcon />}
+                                                        </Button>
+                                                    </TooltipTrigger>
+                                                    <TooltipContent>
+                                                        <p>{volume.sharedVolumeId ? 'Detach Volume' : 'Delete Volume'}</p>
+                                                    </TooltipContent>
+                                                </Tooltip>
+                                            </TooltipProvider>
+                                        </>}
+                                    </div>
                                 </TableCell>
                             </TableRow>
                         ))}
                     </TableBody>
                 </Table>
-            </CardContent>
-            {!readonly && <CardFooter className="flex gap-2">
-                <DialogEditDialog app={app} storageClasses={storageClasses}>
-                    <Button>Add Volume</Button>
-                </DialogEditDialog>
-                <SharedStorageEditDialog app={app}>
-                    <Button variant="outline">Add Shared Volume</Button>
-                </SharedStorageEditDialog>
+            </CardContent>}
+            {!readonly && <CardFooter className={hideCard ? "flex gap-2 px-0 mt-4" : "flex gap-2"}>
+                <Button
+                    variant="outline"
+                    onClick={() => void openGenericDialog(
+                        <DialogEditDialog app={app} storageClasses={storageClasses} />,
+                        { maxWidth: '425px' },
+                    )}
+                ><Plus />
+                    Add Volume
+                </Button>
+                <Button
+                    variant="outline"
+                    onClick={() => void openGenericDialog(
+                        <SharedStorageEditDialog app={app} />,
+                        { maxWidth: '425px' },
+                    )}
+                ><FolderPlus /> Add Shared Volume</Button>
             </CardFooter>}
-        </Card >
+        </CardWrapper>
     </>;
 }
diff --git a/src/app/project/app/[appId]/volumes/volume-backup-edit-overlay.tsx b/src/app/project/app/[appId]/volumes/volume-backup-edit-overlay.tsx
index 3b56c4a6..741e2462 100644
--- a/src/app/project/app/[appId]/volumes/volume-backup-edit-overlay.tsx
+++ b/src/app/project/app/[appId]/volumes/volume-backup-edit-overlay.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import type { z } from "zod";
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
 import {
   Form,
   FormControl,
@@ -15,7 +15,7 @@ import { Input } from "@/components/ui/input"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useForm } from "react-hook-form"
 
-import { useActionState, useEffect, useState } from "react";
+import { useActionState, useEffect } from "react";
 import { FormUtils } from "@/frontend/utils/form.utilts";
 import { SubmitButton } from "@/components/custom/submit-button";
 import { AppVolume, S3Target, VolumeBackup } from "@prisma/client"
@@ -27,22 +27,21 @@ import SelectFormField from "@/components/custom/select-form-field"
 import Link from "next/link"
 import { Checkbox } from "@/components/ui/checkbox"
 import { AppExtendedModel } from "@/shared/model/app-extended.model"
+import { useDialog } from "@/frontend/states/zustand.states";
 
 export default function VolumeBackupEditDialog({
-  children,
   volumeBackup,
   s3Targets,
   volumes,
   app
 }: {
-  children: React.ReactNode;
   volumeBackup?: VolumeBackup;
   s3Targets: S3Target[];
   volumes: AppVolume[];
   app: AppExtendedModel;
 }) {
 
-  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const { closeDialog } = useDialog();
 
   const isDatabaseApp = app.appType !== 'APP';
   const isDatabaseBackupSupported = [
@@ -75,10 +74,10 @@ export default function VolumeBackupEditDialog({
       toast.success('Volume Backup saved successfully', {
         description: "From now on the volume will be backed up according to the new settings.",
       });
-      setIsOpen(false);
+      closeDialog();
     }
     FormUtils.mapValidationErrorsToForm<typeof volumeBackupEditZodModel>(state, form);
-  }, [form, state]);
+  }, [closeDialog, form, state]);
 
   useEffect(() => {
     form.reset(volumeBackup);
@@ -86,11 +85,6 @@ export default function VolumeBackupEditDialog({
 
   return (
     <>
-      <div onClick={() => setIsOpen(true)}>
-        {children}
-      </div>
-      <Dialog open={!!isOpen} onOpenChange={() => setIsOpen(false)}>
-        <DialogContent className="sm:max-w-[425px]">
           <DialogHeader>
             <DialogTitle>Edit Backup Configuration</DialogTitle>
             <DialogDescription>
@@ -188,8 +182,6 @@ export default function VolumeBackupEditDialog({
               </div>
             </form>
           </Form >
-        </DialogContent>
-      </Dialog>
     </>
   )
 
diff --git a/src/app/project/app/[appId]/volumes/volume-backup.tsx b/src/app/project/app/[appId]/volumes/volume-backup.tsx
index 4432525b..8d6d6287 100644
--- a/src/app/project/app/[appId]/volumes/volume-backup.tsx
+++ b/src/app/project/app/[appId]/volumes/volume-backup.tsx
@@ -4,13 +4,12 @@ import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }
 import { AppExtendedModel } from "@/shared/model/app-extended.model";
 import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Button } from "@/components/ui/button";
-import { EditIcon, Play, TrashIcon } from "lucide-react";
+import { EditIcon, List, Play, Plus, TrashIcon } from "lucide-react";
 import { Toast } from "@/frontend/utils/toast.utils";
 import { deleteBackupVolume, runBackupVolumeSchedule } from "./actions";
-import { useConfirmDialog } from "@/frontend/states/zustand.states";
+import { useConfirmDialog, useDialog } from "@/frontend/states/zustand.states";
 import { S3Target } from "@prisma/client";
 import React from "react";
-import { formatDateTime } from "@/frontend/utils/format.utils";
 import VolumeBackupEditDialog from "./volume-backup-edit-overlay";
 import { VolumeBackupExtendedModel } from "@/shared/model/volume-backup-extended.model";
 import { AppVolume } from "@prisma/client";
@@ -19,15 +18,20 @@ export default function VolumeBackupList({
     app,
     volumeBackups,
     s3Targets,
-    readonly
+    readonly,
+    hideCard = false,
+    onBackupScheduleClick,
 }: {
     app: AppExtendedModel,
     s3Targets: S3Target[],
     volumeBackups: VolumeBackupExtendedModel[];
     readonly: boolean;
+    hideCard?: boolean;
+    onBackupScheduleClick?: (volumeBackup: VolumeBackupExtendedModel) => void;
 }) {
 
     const { openConfirmDialog: openDialog } = useConfirmDialog();
+    const { openDialog: openGenericDialog } = useDialog();
     const [isLoading, setIsLoading] = React.useState(false);
 
     // Filter out shared volumes (volumes that are mounted from other apps)
@@ -60,59 +64,93 @@ export default function VolumeBackupList({
         }
     };
 
+    const CardWrapper = hideCard ? 'div' : Card;
+
     return <>
-        <Card>
+        <CardWrapper>
             <CardHeader>
                 <CardTitle>Backup Schedules</CardTitle>
                 <CardDescription>Configure backup schedules for your volumes. Backups can be stored in a S3 bucket.</CardDescription>
             </CardHeader>
-            <CardContent>
+            {volumeBackups.length > 0 && <CardContent className={hideCard ? "px-0" : undefined}>
                 <Table>
                     <TableCaption>{volumeBackups.length} Backup Rules</TableCaption>
                     <TableHeader>
                         <TableRow>
                             <TableHead>Cron Expression</TableHead>
                             <TableHead>Retention</TableHead>
-                            <TableHead>Backup Method</TableHead>
-                            <TableHead>Backup Location</TableHead>
-                            <TableHead>Created At</TableHead>
-                            <TableHead className="w-[100px]">Action</TableHead>
+                            <TableHead className="hidden 2xl:table-cell">Backup Method</TableHead>
+                            <TableHead className="hidden xl:table-cell">Backup Location</TableHead>
+                            {(onBackupScheduleClick || !readonly) && <TableHead className="w-[120px]"></TableHead>}
                         </TableRow>
                     </TableHeader>
                     <TableBody>
                         {volumeBackups.map(volumeBackup => (
-                            <TableRow key={volumeBackup.id}>
+                            <TableRow key={volumeBackup.id} className="group transition-colors duration-150 hover:bg-muted/30">
                                 <TableCell className="font-medium">{volumeBackup.cron}</TableCell>
                                 <TableCell className="font-medium">{volumeBackup.retention}</TableCell>
-                                <TableCell className="font-medium">
+                                <TableCell className="hidden font-medium 2xl:table-cell">
                                     {app.appType !== 'APP' && volumeBackup.useDatabaseBackup
                                         ? `Database (${app.appType.toLocaleLowerCase()})`
                                         : 'Archive of Volume'}
                                 </TableCell>
-                                <TableCell className="font-medium">{volumeBackup.target.name}</TableCell>
-                                <TableCell className="font-medium">{formatDateTime(volumeBackup.createdAt)}</TableCell>
-                                {!readonly && <TableCell className="font-medium flex gap-2">
-                                    <Button disabled={isLoading} variant="ghost" onClick={() => asyncRunBackupVolumeSchedule(volumeBackup.id)}>
+                                <TableCell className="hidden font-medium xl:table-cell">{volumeBackup.target.name}</TableCell>
+                                {(onBackupScheduleClick || !readonly) && <TableCell className="w-[120px] font-medium">
+                                    <div className="flex gap-1 opacity-100 transition-opacity duration-150 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100">
+                                    {onBackupScheduleClick && <Button
+                                        variant="ghost"
+                                        size="icon"
+                                        aria-label="Show backups"
+                                        onClick={() => onBackupScheduleClick(volumeBackup)}
+                                    >
+                                        <List />
+                                    </Button>}
+                                    {!readonly && <Button disabled={isLoading} variant="ghost" size="icon" onClick={() => {
+                                        void asyncRunBackupVolumeSchedule(volumeBackup.id);
+                                    }}>
                                         <Play />
-                                    </Button>
-                                    <VolumeBackupEditDialog volumeBackup={volumeBackup}
-                                        s3Targets={s3Targets} volumes={ownVolumes as AppVolume[]} app={app}>
-                                        <Button disabled={isLoading} variant="ghost"><EditIcon /></Button>
-                                    </VolumeBackupEditDialog>
-                                    <Button disabled={isLoading} variant="ghost" onClick={() => asyncDeleteBackupVolume(volumeBackup.id)}>
+                                    </Button>}
+                                    {!readonly && <Button
+                                        disabled={isLoading}
+                                        variant="ghost"
+                                        size="icon"
+                                        onClick={() => {
+                                            void openGenericDialog(
+                                                <VolumeBackupEditDialog
+                                                    volumeBackup={volumeBackup}
+                                                    s3Targets={s3Targets}
+                                                    volumes={ownVolumes}
+                                                    app={app}
+                                                />,
+                                                { maxWidth: '425px' },
+                                            );
+                                        }}
+                                    >
+                                        <EditIcon />
+                                    </Button>}
+                                    {!readonly && <Button disabled={isLoading} variant="ghost" size="icon" className="hover:text-destructive" onClick={() => {
+                                        void asyncDeleteBackupVolume(volumeBackup.id);
+                                    }}>
                                         <TrashIcon />
-                                    </Button>
+                                    </Button>}
+                                    </div>
                                 </TableCell>}
                             </TableRow>
                         ))}
                     </TableBody>
                 </Table>
-            </CardContent>
-            {!readonly && <CardFooter>
-                <VolumeBackupEditDialog s3Targets={s3Targets} volumes={ownVolumes as AppVolume[]} app={app}>
-                    <Button>Add Backup Schedule</Button>
-                </VolumeBackupEditDialog>
+            </CardContent>}
+            {!readonly && <CardFooter className={hideCard ? "px-0 pt-4" : undefined}>
+                <Button
+                    variant="outline"
+                    onClick={() => void openGenericDialog(
+                        <VolumeBackupEditDialog s3Targets={s3Targets} volumes={ownVolumes} app={app} />,
+                        { maxWidth: '425px' },
+                    )}
+                >
+                    <Plus /> Add Backup Schedule
+                </Button>
             </CardFooter>}
-        </Card >
+        </CardWrapper>
     </>;
-}
\ No newline at end of file
+}
diff --git a/src/app/settings/actions.ts b/src/app/settings/actions.ts
index be4f258e..5b0ffad3 100644
--- a/src/app/settings/actions.ts
+++ b/src/app/settings/actions.ts
@@ -16,7 +16,6 @@ import { KubeSizeConverter } from "@/shared/utils/kubernetes-size-converter.util
 import buildService from "@/server/services/build.service";
 import standalonePodService from "@/server/services/standalone-services/standalone-pod.service";
 import maintenanceService from "@/server/services/standalone-services/maintenance.service";
-import appLogsService from "@/server/services/standalone-services/app-logs.service";
 import deploymentLogService from "@/server/services/deployment-logs.service";
 import systemBackupService from "@/server/services/standalone-services/system-backup.service";
 import backupService from "@/server/services/standalone-services/backup.service";
@@ -249,11 +248,8 @@ export const purgeRegistryImages = async () =>
 export const deleteOldAppLogs = async () =>
   simpleAction(async () => {
     await getAdminUserSession();
-    await Promise.all([
-      appLogsService.deleteOldAppLogs(),
-      deploymentLogService.deleteOldDeploymentLogs(),
-    ]);
-    return new SuccessActionResult(undefined, `Successfully deleted old app and deployment logs.`);
+    await deploymentLogService.deleteAllLogs();
+    return new SuccessActionResult(undefined, 'Successfully deleted all deployment logs.');
   });
 
 export const setCanaryChannel = async (useCanaryChannel: boolean) =>
diff --git a/src/app/settings/platform/operations/qs-maintenance-settings.tsx b/src/app/settings/platform/operations/qs-maintenance-settings.tsx
index 0d258d2d..ca10dea5 100644
--- a/src/app/settings/platform/operations/qs-maintenance-settings.tsx
+++ b/src/app/settings/platform/operations/qs-maintenance-settings.tsx
@@ -57,13 +57,13 @@ export default function QuickStackMaintenanceSettings({
 
                 <Button variant="secondary" onClick={async () => {
                     if (await useConfirm.openConfirmDialog({
-                        title: 'Delete old App logs',
-                        description: 'This action deletes all old app logs. Use this action to free up disk space.',
-                        okButton: "Delete old App logs"
+                        title: 'Delete Deployment Logs',
+                        description: 'This action deletes all stored deployment logs. Use this action to free up disk space.',
+                        okButton: 'Delete Deployment Logs'
                     })) {
                         Toast.fromAction(() => deleteOldAppLogs());
                     }
-                }}><Trash /> Delete old App logs</Button>
+                }}><Trash /> Delete Deployment Logs</Button>
 
                 <Button variant="secondary" onClick={async () => {
                     if (await useConfirm.openConfirmDialog({
diff --git a/src/components/custom/build-logs-streamed.tsx b/src/components/custom/build-logs-streamed.tsx
index 1961d676..3b41e25c 100644
--- a/src/components/custom/build-logs-streamed.tsx
+++ b/src/components/custom/build-logs-streamed.tsx
@@ -23,12 +23,14 @@ export default function BuildLogsStreamed({
     workloadId,
     workloadType,
     fullHeight = false,
+    useFullHeight = false,
     maxLines = Constants.DEFAULT_MAX_LOG_LINES,
 }: {
     deploymentId?: string;
     workloadId?: string;
     workloadType?: string;
     fullHeight?: boolean;
+    useFullHeight?: boolean;
     maxLines?: number;
 }) {
     const { logs, isConnected, textAreaRef } = useLogStream(
@@ -39,12 +41,15 @@ export default function BuildLogsStreamed({
     );
 
     return <>
-        <div className="space-y-4">
+        <div className={cn(
+            "space-y-4",
+            useFullHeight && "flex h-full min-h-0 flex-col",
+        )}>
             <Textarea ref={textAreaRef} value={logs} readOnly className={cn(
-                (fullHeight ? "h-[80vh]" : "h-[400px]"),
+                (useFullHeight ? "min-h-0 flex-1" : fullHeight ? "h-[80vh]" : "h-[400px]"),
                 " bg-slate-900 text-white",
                 sourceCodePro.className)} />
-            <div className="w-fit">
+            <div className="w-fit shrink-0">
                 <HoverCard>
                     <HoverCardTrigger>
                         {isConnected ? <div className="w-3 h-3 rounded-full bg-green-500"></div> : <div className="w-3 h-3 rounded-full bg-slate-500"></div>}
diff --git a/src/components/custom/build-status-indicator.tsx b/src/components/custom/build-status-indicator.tsx
new file mode 100644
index 00000000..7f42ae13
--- /dev/null
+++ b/src/components/custom/build-status-indicator.tsx
@@ -0,0 +1,84 @@
+'use client'
+
+import { memo, type MouseEvent } from 'react';
+import { CircleAlert } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { cn } from '@/frontend/utils/utils';
+import { useDialog } from '@/frontend/states/zustand.states';
+import { BuildLogsDialogContent } from '@/app/project/app/[appId]/overview/build-logs-overlay';
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipTrigger,
+} from '@/components/ui/tooltip';
+import { useBuildStatus } from '@/frontend/states/zustand.states';
+import { isActiveBuildStatus } from '@/shared/model/app-build-status.model';
+
+interface BuildStatusIndicatorProps {
+    appId: string;
+    showLabel?: boolean;
+    className?: string;
+}
+
+function BuildStatusIndicator({ appId, showLabel, className }: BuildStatusIndicatorProps) {
+    const buildStatus = useBuildStatus(state => state.buildStatus.get(appId));
+    const { openDialog } = useDialog();
+
+    if (!buildStatus) {
+        return null;
+    }
+
+    if (isActiveBuildStatus(buildStatus.status)) {
+        const canShowLogs = (buildStatus.status === 'RUNNING' || buildStatus.status === 'PENDING') && !!buildStatus.deploymentId;
+        const showLogs = (event: MouseEvent<HTMLButtonElement>) => {
+            event.stopPropagation();
+            if (!canShowLogs || !buildStatus.deploymentId) return;
+            openDialog(
+                <BuildLogsDialogContent
+                    deploymentInfo={{
+                        deploymentId: buildStatus.deploymentId,
+                        createdAt: buildStatus.startedAt ?? new Date(),
+                        status: 'BUILDING',
+                        gitCommit: buildStatus.gitCommit,
+                        gitCommitMessage: buildStatus.gitCommitMessage,
+                        buildMethod: buildStatus.buildMethod,
+                    }}
+                    workloadId={buildStatus.workloadId}
+                    workloadType={buildStatus.workloadType}
+                />,
+                { maxWidth: '1300px' },
+            );
+        };
+
+        return (
+            <Tooltip>
+                <TooltipTrigger render={<button type="button" onClick={showLogs} className={cn('flex w-fit items-center gap-1.5', canShowLogs && 'cursor-pointer', className)}>
+                    <Spinner className="size-3 text-blue-500" />
+                    {showLabel && <span className="text-xs text-blue-700 shimmer">{buildStatus.status === 'RUNNING' ? 'Building' : 'Pending'}</span>}
+                </button>} />
+                <TooltipContent>
+                    <p>{buildStatus.status === 'RUNNING' ? 'Build is running' : 'Build is queued'}</p>
+                </TooltipContent>
+            </Tooltip>
+        );
+    }
+
+    if (buildStatus.status === 'FAILED') {
+        return (
+            <Tooltip>
+                <TooltipTrigger render={<div className={cn('flex w-fit items-center gap-1.5', className)}>
+                    <CircleAlert className="size-3.5 text-red-500" />
+                    {showLabel && <span className="text-xs text-red-700">Build failed</span>}
+                </div>} />
+                <TooltipContent>
+                    <p>Last build failed</p>
+                    {buildStatus.gitCommitMessage && <p>{buildStatus.gitCommitMessage}</p>}
+                </TooltipContent>
+            </Tooltip>
+        );
+    }
+
+    return null;
+}
+
+export default memo(BuildStatusIndicator);
diff --git a/src/components/custom/build-status-indicator.unit.spec.ts b/src/components/custom/build-status-indicator.unit.spec.ts
new file mode 100644
index 00000000..44737b80
--- /dev/null
+++ b/src/components/custom/build-status-indicator.unit.spec.ts
@@ -0,0 +1,98 @@
+import React from 'react';
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { AppBuildStatusModel } from '@/shared/model/app-build-status.model';
+import { useBuildStatus } from '@/frontend/states/zustand.states';
+import { useDialog } from '@/frontend/states/zustand.states';
+import BuildStatusIndicator from './build-status-indicator';
+
+vi.mock('@/components/ui/tooltip', () => ({
+    Tooltip: ({ children }: { children: React.ReactNode }) => children,
+    TooltipTrigger: ({ children, render }: { children?: React.ReactNode; render?: React.ReactNode }) => render ?? children,
+    TooltipContent: ({ children }: { children: React.ReactNode }) => children,
+}));
+
+vi.mock('@/app/project/app/[appId]/overview/build-logs-overlay', () => ({
+    BuildLogsDialogContent: () => null,
+}));
+
+function status(workloadId: string, buildStatus: AppBuildStatusModel['status']): AppBuildStatusModel {
+    return {
+        workloadId,
+        workloadType: 'app',
+        workloadName: workloadId,
+        projectId: 'project-1',
+        projectName: 'Project 1',
+        status: buildStatus,
+    };
+}
+
+describe('BuildStatusIndicator', () => {
+    beforeEach(() => {
+        useBuildStatus.setState({
+            buildStatus: new Map(),
+            lastUpdate: null,
+            isLoading: false,
+            listeners: new Set(),
+        });
+        useDialog.setState({ openDialog: vi.fn() });
+    });
+
+    afterEach(() => {
+        cleanup();
+    });
+
+    it('shows a running label while a build is running', () => {
+        useBuildStatus.setState({ buildStatus: new Map([['app-a', status('app-a', 'RUNNING')]]) });
+
+        render(React.createElement(BuildStatusIndicator, { appId: 'app-a', showLabel: true }));
+
+        expect(screen.getByText('Building')).toBeTruthy();
+    });
+
+    it('opens build logs for a running build', () => {
+        const openDialog = vi.fn();
+        useDialog.setState({ openDialog });
+        useBuildStatus.setState({ buildStatus: new Map([['app-a', {
+            ...status('app-a', 'RUNNING'),
+            deploymentId: 'deployment-1',
+        }]]) });
+
+        render(React.createElement(BuildStatusIndicator, { appId: 'app-a', showLabel: true }));
+        fireEvent.click(screen.getByRole('button'));
+
+        expect(openDialog).toHaveBeenCalledOnce();
+    });
+
+    it('shows a pending label while a build is queued', () => {
+        useBuildStatus.setState({ buildStatus: new Map([['app-a', status('app-a', 'PENDING')]]) });
+
+        render(React.createElement(BuildStatusIndicator, { appId: 'app-a', showLabel: true }));
+
+        expect(screen.getByText('Pending')).toBeTruthy();
+    });
+
+    it('shows a failed label when the last build failed', () => {
+        useBuildStatus.setState({ buildStatus: new Map([['app-a', status('app-a', 'FAILED')]]) });
+
+        render(React.createElement(BuildStatusIndicator, { appId: 'app-a', showLabel: true }));
+
+        expect(screen.getByText('Build failed')).toBeTruthy();
+    });
+
+    it('renders nothing when the last build succeeded', () => {
+        useBuildStatus.setState({ buildStatus: new Map([['app-a', status('app-a', 'SUCCEEDED')]]) });
+
+        const { container } = render(React.createElement(BuildStatusIndicator, { appId: 'app-a', showLabel: true }));
+
+        expect(container.textContent).toBe('');
+    });
+
+    it('renders nothing when there is no build yet', () => {
+        useBuildStatus.setState({ buildStatus: new Map([['app-a', status('app-a', 'NOT_BUILT')]]) });
+
+        const { container } = render(React.createElement(BuildStatusIndicator, { appId: 'app-a' }));
+
+        expect(container.textContent).toBe('');
+    });
+});
diff --git a/src/components/custom/build-status-polling-provider.tsx b/src/components/custom/build-status-polling-provider.tsx
new file mode 100644
index 00000000..6eb1eed5
--- /dev/null
+++ b/src/components/custom/build-status-polling-provider.tsx
@@ -0,0 +1,20 @@
+'use client'
+
+import { useEffect } from 'react';
+import { buildStatusPollingService } from '@/frontend/services/build-status-sse.service';
+
+/**
+ * Client component that initializes and manages the build status streaming service.
+ * Mounted in the root layout so the build status of all apps stays fresh.
+ */
+export default function BuildStatusPollingProvider() {
+    useEffect(() => {
+        buildStatusPollingService.start();
+
+        return () => {
+            buildStatusPollingService.stop();
+        };
+    }, []);
+
+    return null;
+}
diff --git a/src/components/custom/domains-card.tsx b/src/components/custom/domains-card.tsx
index 4c5281bf..6f826495 100644
--- a/src/components/custom/domains-card.tsx
+++ b/src/components/custom/domains-card.tsx
@@ -11,12 +11,14 @@ import { DomainEditModel } from "@/shared/model/domain-edit.model";
 import { WorkloadType } from "@/shared/model/runtime-type.model";
 import DomainEditOverlay from "@/components/custom/domain-edit-overlay";
 import { deleteDomain } from "@/app/project/actions";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 
-export default function DomainsCard({ domains, workloadId, workloadType, readonly }: {
+export default function DomainsCard({ domains, workloadId, workloadType, readonly, hideCard = false }: {
     domains: DomainEditModel[];
     workloadId: string;
     workloadType: WorkloadType;
     readonly: boolean;
+    hideCard?: boolean;
 }) {
     const { openConfirmDialog } = useConfirmDialog();
     const { openDialog } = useDialog();
@@ -37,56 +39,71 @@ export default function DomainsCard({ domains, workloadId, workloadType, readonl
             existingDomain={domain}
             workloadId={workloadId}
             workloadType={workloadType} />, {
-                maxWidth: 'max-w-2xl',
-            });
+            maxWidth: 'max-w-2xl',
+        });
     }
+    const CardWrapper = hideCard ? 'div' : Card;
 
     return <>
-        <Card>
+        <CardWrapper>
             <CardHeader>
                 <CardTitle>Domains</CardTitle>
                 <CardDescription>Add custom domains. If a domain is configured, it will be public and accessible via the internet.
                 </CardDescription>
             </CardHeader>
-            <CardContent>
+            {domains.length > 0 && <CardContent className={hideCard ? "px-0" : undefined}>
                 <Table>
                     <TableCaption>{domains.length} Domains</TableCaption>
                     <TableHeader>
                         <TableRow>
                             <TableHead>Name</TableHead>
-                            <TableHead>Port</TableHead>
-                            <TableHead>SSL</TableHead>
-                            <TableHead>Redirect HTTP to HTTPS</TableHead>
-                            <TableHead className="w-[100px]">Action</TableHead>
+                            {!hideCard && <>
+                                <TableHead className="hidden xl:table-cell">Port</TableHead>
+                                <TableHead className="hidden 2xl:table-cell">SSL</TableHead>
+                                <TableHead className="hidden 2xl:table-cell">Redirect HTTP to HTTPS</TableHead>
+                            </>}
+                            {!readonly && <TableHead className="w-[88px]"></TableHead>}
                         </TableRow>
                     </TableHeader>
                     <TableBody>
                         {domains.map(domain => (
-                            <TableRow key={domain.hostname}>
+                            <TableRow key={domain.hostname} className="group transition-colors duration-150 hover:bg-muted/30">
                                 <TableCell className="font-medium flex gap-2">
                                     <Code>{domain.hostname}</Code>
                                     <div className="self-center cursor-pointer" onClick={() => window.open((domain.useSsl ? 'https://' : 'http://') + domain.hostname, '_blank')}>
-                                        <ExternalLink />
+                                        <ExternalLink className="h-3 w-3" />
                                     </div>
                                 </TableCell>
-                                <TableCell className="font-medium">{domain.port}</TableCell>
-                                <TableCell className="font-medium">{domain.useSsl ? <CheckIcon /> : <XIcon />}</TableCell>
-                                <TableCell className="font-medium">{domain.useSsl && domain.redirectHttps ? <CheckIcon /> : <XIcon />}</TableCell>
-                                {!readonly && <TableCell className="font-medium flex gap-2">
-                                    <Button variant="ghost" onClick={() => openEditDomainDialog(domain)}><EditIcon /></Button>
-                                    <Button variant="ghost" onClick={() => asyncDeleteDomain(domain.id!)}>
-                                        <TrashIcon />
-                                    </Button>
+                                {!hideCard && <>
+                                    <TableCell className="hidden font-medium xl:table-cell">{domain.port}</TableCell>
+                                    <TableCell className="hidden font-medium 2xl:table-cell">{domain.useSsl ? <CheckIcon /> : <XIcon />}</TableCell>
+                                    <TableCell className="hidden font-medium 2xl:table-cell">{domain.useSsl && domain.redirectHttps ? <CheckIcon /> : <XIcon />}</TableCell>
+                                </>}
+                                {!readonly && <TableCell className="w-[88px] font-medium">
+                                    <div className="flex gap-1 opacity-100 transition-opacity duration-150 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100">
+                                        <TooltipProvider>
+                                            <Tooltip>
+                                                <TooltipTrigger render={<Button variant="ghost" size="icon" onClick={() => openEditDomainDialog(domain)}><EditIcon /></Button>} />
+                                                <TooltipContent>Edit domain</TooltipContent>
+                                            </Tooltip>
+                                        </TooltipProvider>
+                                        <TooltipProvider>
+                                            <Tooltip>
+                                                <TooltipTrigger render={<Button variant="ghost" size="icon" className="hover:text-destructive" onClick={() => asyncDeleteDomain(domain.id!)}><TrashIcon /></Button>} />
+                                                <TooltipContent>Delete domain</TooltipContent>
+                                            </Tooltip>
+                                        </TooltipProvider>
+                                    </div>
                                 </TableCell>}
                             </TableRow>
                         ))}
                     </TableBody>
                 </Table>
-            </CardContent>
-            {!readonly && <CardFooter>
-                <Button onClick={() => openEditDomainDialog()}><Plus /> Add Domain</Button>
+            </CardContent>}
+            {!readonly && <CardFooter className={hideCard ? "px-0" : undefined}>
+                <Button variant="outline" onClick={() => openEditDomainDialog()}><Plus /> Add Domain</Button>
             </CardFooter>}
-        </Card >
+        </CardWrapper >
 
     </>;
 }
diff --git a/src/components/custom/error-state.tsx b/src/components/custom/error-state.tsx
new file mode 100644
index 00000000..c573aad0
--- /dev/null
+++ b/src/components/custom/error-state.tsx
@@ -0,0 +1,68 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import {
+    Empty,
+    EmptyContent,
+    EmptyDescription,
+    EmptyHeader,
+    EmptyMedia,
+    EmptyTitle,
+} from '@/components/ui/empty';
+import { cn } from '@/frontend/utils/utils';
+import { Home, RotateCw } from 'lucide-react';
+
+export default function ErrorState({
+    icon,
+    title,
+    description,
+    mediaClassName,
+    digest,
+    onRetry,
+    homeHref = '/',
+}: {
+    icon: React.ReactNode;
+    title: string;
+    description: React.ReactNode;
+    mediaClassName?: string;
+    digest?: string;
+    onRetry?: () => void;
+    homeHref?: string;
+}) {
+    return (
+        <div className="flex min-h-[60vh] w-full items-center justify-center p-4">
+            <Empty className="max-w-md border border-dashed">
+                <EmptyHeader>
+                    <EmptyMedia variant="icon" className={cn(mediaClassName)}>
+                        {icon}
+                    </EmptyMedia>
+                    <EmptyTitle>{title}</EmptyTitle>
+                    <EmptyDescription>{description}</EmptyDescription>
+                </EmptyHeader>
+                <EmptyContent>
+                    <div className="flex flex-wrap items-center justify-center gap-2">
+                        {onRetry && (
+                            <Button variant="outline" onClick={onRetry}>
+                                <RotateCw />
+                                Try again
+                            </Button>
+                        )}
+                        <Button
+                            render={
+                                <a href={homeHref}>
+                                    <Home />
+                                    Back to home
+                                </a>
+                            }
+                        />
+                    </div>
+                    {digest && (
+                        <p className="text-xs text-muted-foreground/70">
+                            Digest: <span className="font-mono">{digest}</span>
+                        </p>
+                    )}
+                </EmptyContent>
+            </Empty>
+        </div>
+    );
+}
diff --git a/src/components/custom/file-mounts-card.tsx b/src/components/custom/file-mounts-card.tsx
index 75bc56e2..5ad8a2f8 100644
--- a/src/components/custom/file-mounts-card.tsx
+++ b/src/components/custom/file-mounts-card.tsx
@@ -10,12 +10,14 @@ import { FileMountEditModel } from "@/shared/model/file-mount-edit.model";
 import { WorkloadType } from "@/shared/model/runtime-type.model";
 import FileMountEditOverlay from "@/components/custom/file-mount-edit-overlay";
 import { deleteFileMount } from "@/app/project/actions";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 
-export default function FileMountsCard({ fileMounts, workloadId, workloadType, readonly }: {
+export default function FileMountsCard({ fileMounts, workloadId, workloadType, readonly, hideCard = false }: {
     fileMounts: FileMountEditModel[];
     workloadId: string;
     workloadType: WorkloadType;
     readonly: boolean;
+    hideCard?: boolean;
 }) {
     const { openConfirmDialog } = useConfirmDialog();
     const { openDialog } = useDialog();
@@ -40,39 +42,41 @@ export default function FileMountsCard({ fileMounts, workloadId, workloadType, r
         });
     };
 
+    const CardWrapper = hideCard ? 'div' : Card;
+
     return <>
-        <Card>
+        <CardWrapper>
             <CardHeader>
                 <CardTitle>File Mounts</CardTitle>
                 <CardDescription>Create files which are mounted into the container.</CardDescription>
             </CardHeader>
-            <CardContent>
+            {fileMounts.length > 0 && <CardContent className={hideCard ? "px-0" : undefined}>
                 <Table>
                     <TableCaption>{fileMounts.length} File Mounts</TableCaption>
                     <TableHeader>
                         <TableRow>
                             <TableHead>Mount Path</TableHead>
-                            {!readonly && <TableHead className="w-[100px]">Actions</TableHead>}
+                            {!readonly && <TableHead className="w-[100px]"></TableHead>}
                         </TableRow>
                     </TableHeader>
                     <TableBody>
                         {fileMounts.map(fileMount => (
-                            <TableRow key={fileMount.id ?? fileMount.containerMountPath}>
+                            <TableRow key={fileMount.id ?? fileMount.containerMountPath} className="group transition-colors duration-150 hover:bg-muted/30">
                                 <TableCell className="font-medium">{fileMount.containerMountPath}</TableCell>
-                                {!readonly && <TableCell className="font-medium flex gap-2">
-                                    <Button variant="ghost" onClick={() => openEditFileMountDialog(fileMount)}><EditIcon /></Button>
-                                    <Button variant="ghost" onClick={() => asyncDeleteFileMount(fileMount.id!)}>
-                                        <TrashIcon />
-                                    </Button>
+                                {!readonly && <TableCell className="w-[88px] font-medium">
+                                    <div className="flex gap-1 opacity-100 transition-opacity duration-150 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100">
+                                        <TooltipProvider><Tooltip><TooltipTrigger render={<Button variant="ghost" size="icon" onClick={() => openEditFileMountDialog(fileMount)}><EditIcon /></Button>} /><TooltipContent>Edit file mount</TooltipContent></Tooltip></TooltipProvider>
+                                        <TooltipProvider><Tooltip><TooltipTrigger render={<Button variant="ghost" size="icon" className="hover:text-destructive" onClick={() => asyncDeleteFileMount(fileMount.id!)}><TrashIcon /></Button>} /><TooltipContent>Delete file mount</TooltipContent></Tooltip></TooltipProvider>
+                                    </div>
                                 </TableCell>}
                             </TableRow>
                         ))}
                     </TableBody>
                 </Table>
-            </CardContent>
-            {!readonly && <CardFooter>
-                <Button onClick={() => openEditFileMountDialog()}><Plus /> Add File Mount</Button>
+            </CardContent>}
+            {!readonly && <CardFooter className={hideCard ? "px-0" : undefined}>
+                <Button variant="outline" onClick={() => openEditFileMountDialog()}><Plus /> Add File Mount</Button>
             </CardFooter>}
-        </Card>
+        </CardWrapper>
     </>;
 }
diff --git a/src/components/custom/logs-streamed.tsx b/src/components/custom/logs-streamed.tsx
index 6c9f4cc2..a9669511 100644
--- a/src/components/custom/logs-streamed.tsx
+++ b/src/components/custom/logs-streamed.tsx
@@ -22,6 +22,7 @@ export default function LogsStreamed({
     podName,
     buildJobName,
     fullHeight = false,
+    useFullHeight = false,
     linesCount = 100,
     maxLines = Constants.DEFAULT_MAX_LOG_LINES,
 }: {
@@ -29,6 +30,7 @@ export default function LogsStreamed({
     podName?: string;
     buildJobName?: string;
     fullHeight?: boolean;
+    useFullHeight?: boolean;
     linesCount?: number;
     maxLines?: number;
 }) {
@@ -40,12 +42,15 @@ export default function LogsStreamed({
     );
 
     return <>
-        <div className="space-y-4">
+        <div className={cn(
+            "space-y-4",
+            useFullHeight && "flex h-full min-h-0 flex-col",
+        )}>
             <Textarea ref={textAreaRef} value={logs} readOnly className={cn(
-                (fullHeight ? "h-[80vh]" : "h-[400px]"),
+                (useFullHeight ? "min-h-0 flex-1" : fullHeight ? "h-[80vh]" : "h-[400px]"),
                 " bg-slate-900 text-white ",
                 sourceCodePro.className)} />
-            <div className="w-fit">
+            <div className="w-fit shrink-0">
                 <HoverCard>
                     <HoverCardTrigger>
                         {isConnected ? <div className="w-3 h-3 rounded-full bg-green-500"></div> : <div className="w-3 h-3 rounded-full bg-slate-500"></div>}
diff --git a/src/components/custom/pods-status-polling-provider.tsx b/src/components/custom/pods-status-polling-provider.tsx
index 0457da1f..415bc75d 100644
--- a/src/components/custom/pods-status-polling-provider.tsx
+++ b/src/components/custom/pods-status-polling-provider.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useEffect } from 'react';
-import { podsStatusPollingService } from '@/frontend/services/pods-status-polling.service';
+import { podsStatusPollingService } from '@/frontend/services/pods-status-sse.service';
 
 /**
  * Client component that initializes and manages the pods status polling service.
diff --git a/src/components/ui/context-menu.tsx b/src/components/ui/context-menu.tsx
new file mode 100644
index 00000000..8e310801
--- /dev/null
+++ b/src/components/ui/context-menu.tsx
@@ -0,0 +1,270 @@
+"use client"
+
+import * as React from "react"
+import { ContextMenu as ContextMenuPrimitive } from "@base-ui/react/context-menu"
+import { cn } from "cn"
+import { ChevronRightIcon, CheckIcon } from "lucide-react"
+
+function ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
+}
+
+function ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {
+  return (
+    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
+  )
+}
+
+function ContextMenuTrigger({
+  className,
+  ...props
+}: ContextMenuPrimitive.Trigger.Props) {
+  return (
+    <ContextMenuPrimitive.Trigger
+      data-slot="context-menu-trigger"
+      className={cn("select-none", className)}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuContent({
+  className,
+  align = "start",
+  alignOffset = 4,
+  side = "right",
+  sideOffset = 0,
+  ...props
+}: ContextMenuPrimitive.Popup.Props &
+  Pick<
+    ContextMenuPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Positioner
+        className="isolate z-50 outline-none"
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <ContextMenuPrimitive.Popup
+          data-slot="context-menu-content"
+          className={cn("z-50 max-h-(--available-height) min-w-48 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-2xl bg-popover p-1 text-popover-foreground shadow-2xl ring-1 ring-foreground/5 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+          {...props}
+        />
+      </ContextMenuPrimitive.Positioner>
+    </ContextMenuPrimitive.Portal>
+  )
+}
+
+function ContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) {
+  return (
+    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
+  )
+}
+
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: ContextMenuPrimitive.GroupLabel.Props & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.GroupLabel
+      data-slot="context-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-3 py-2.5 text-xs text-muted-foreground data-inset:pl-9.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: ContextMenuPrimitive.Item.Props & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-slot="context-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/context-menu-item relative flex cursor-default items-center gap-2.5 rounded-xl px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuSub({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) {
+  return (
+    <ContextMenuPrimitive.SubmenuRoot data-slot="context-menu-sub" {...props} />
+  )
+}
+
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: ContextMenuPrimitive.SubmenuTrigger.Props & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.SubmenuTrigger
+      data-slot="context-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center rounded-xl px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </ContextMenuPrimitive.SubmenuTrigger>
+  )
+}
+
+function ContextMenuSubContent({
+  ...props
+}: React.ComponentProps<typeof ContextMenuContent>) {
+  return (
+    <ContextMenuContent
+      data-slot="context-menu-sub-content"
+      className="shadow-lg"
+      side="right"
+      {...props}
+    />
+  )
+}
+
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: ContextMenuPrimitive.CheckboxItem.Props & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      data-slot="context-menu-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-xl py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute right-2">
+        <ContextMenuPrimitive.CheckboxItemIndicator>
+          <CheckIcon
+          />
+        </ContextMenuPrimitive.CheckboxItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  )
+}
+
+function ContextMenuRadioGroup({
+  ...props
+}: ContextMenuPrimitive.RadioGroup.Props) {
+  return (
+    <ContextMenuPrimitive.RadioGroup
+      data-slot="context-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function ContextMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: ContextMenuPrimitive.RadioItem.Props & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      data-slot="context-menu-radio-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-xl py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute right-2">
+        <ContextMenuPrimitive.RadioItemIndicator>
+          <CheckIcon
+          />
+        </ContextMenuPrimitive.RadioItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  )
+}
+
+function ContextMenuSeparator({
+  className,
+  ...props
+}: ContextMenuPrimitive.Separator.Props) {
+  return (
+    <ContextMenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      className={cn("-mx-1 my-1 h-px bg-border/50", className)}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}
diff --git a/src/components/ui/scroll-area.tsx b/src/components/ui/scroll-area.tsx
index 4fc03d70..a61b052f 100644
--- a/src/components/ui/scroll-area.tsx
+++ b/src/components/ui/scroll-area.tsx
@@ -6,11 +6,13 @@ import { cn } from "cn"
 
 function ScrollArea({
   className,
+  contentClassName,
   children,
   scrollbarOrientation = "vertical",
   ...props
 }: ScrollAreaPrimitive.Root.Props & {
   scrollbarOrientation?: ScrollAreaPrimitive.Scrollbar.Props["orientation"]
+  contentClassName?: string
 }) {
   return (
     <ScrollAreaPrimitive.Root
@@ -20,9 +22,13 @@ function ScrollArea({
     >
       <ScrollAreaPrimitive.Viewport
         data-slot="scroll-area-viewport"
-        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
+        className={cn(
+          "size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1",
+          scrollbarOrientation === "horizontal"
+          && "overflow-y-hidden overscroll-y-none touch-pan-x"
+        )}
       >
-        <ScrollAreaPrimitive.Content>
+        <ScrollAreaPrimitive.Content className={contentClassName}>
           {children}
         </ScrollAreaPrimitive.Content>
       </ScrollAreaPrimitive.Viewport>
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
index d596d6d9..06444928 100644
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -6,7 +6,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     <textarea
       data-slot="textarea"
       className={cn(
-        "flex field-sizing-content min-h-16 w-full resize-none rounded-xl border border-input bg-input/30 px-3 py-3 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 md:text-sm dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        "flex field-sizing-content min-h-16 w-full resize-y rounded-xl border border-input bg-input/30 px-3 py-3 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 md:text-sm dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
         className
       )}
       {...props}
diff --git a/src/frontend/services/build-status-sse.service.ts b/src/frontend/services/build-status-sse.service.ts
new file mode 100644
index 00000000..775b4b03
--- /dev/null
+++ b/src/frontend/services/build-status-sse.service.ts
@@ -0,0 +1,131 @@
+import { AppBuildStatusModel } from '@/shared/model/app-build-status.model';
+import { StreamUtils } from '@/shared/utils/stream.utils';
+import { useBuildStatus } from '../states/zustand.states';
+
+/**
+ * Singleton service that manages streaming for the build status of all apps.
+ * This service runs in the browser and updates the Zustand store with fresh data via SSE.
+ */
+class BuildStatusSSEStateService {
+    private static instance: BuildStatusSSEStateService;
+    private controller: AbortController | null = null;
+    private isConnected = false;
+    private buffer = '';
+
+    private constructor() { }
+
+    public static getInstance(): BuildStatusSSEStateService {
+        if (!BuildStatusSSEStateService.instance) {
+            BuildStatusSSEStateService.instance = new BuildStatusSSEStateService();
+        }
+        return BuildStatusSSEStateService.instance;
+    }
+
+    public start(): void {
+        if (this.isConnected) {
+            console.log('[BuildStatusService] Already connected, skipping start');
+            return;
+        }
+
+        console.log('[BuildStatusService] Starting build status stream');
+        this.connect();
+    }
+
+    public stop(): void {
+        if (this.controller) {
+            console.log('[BuildStatusService] Stopping build status stream');
+            this.controller.abort();
+            this.controller = null;
+            this.isConnected = false;
+            this.buffer = '';
+        }
+    }
+
+    private async connect() {
+        const controller = new AbortController();
+        this.controller = controller;
+        const signal = controller.signal;
+        this.isConnected = true;
+        this.buffer = '';
+
+        try {
+            const response = await fetch('/api/build-status', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                signal: signal,
+            });
+
+            if (!response.ok || !response.body) {
+                throw new Error('Failed to connect to build status stream');
+            }
+
+            const reader = response.body
+                .pipeThrough(new TextDecoderStream())
+                .getReader();
+
+            while (true) {
+                const { value, done } = await reader.read();
+                if (done) {
+                    this.reconnect(controller);
+                    break;
+                }
+                if (value) {
+                    this.processChunk(value);
+                }
+            }
+        } catch (error: any) {
+            if (error.name === 'AbortError') {
+                console.log('[BuildStatusService] Stream aborted');
+            } else {
+                console.error('[BuildStatusService] Stream error:', error);
+                this.reconnect(controller);
+            }
+        } finally {
+            if (this.controller === controller) {
+                this.isConnected = false;
+            }
+        }
+    }
+
+    private reconnect(controller: AbortController): void {
+        this.isConnected = false;
+        setTimeout(() => {
+            if (this.controller === controller && !controller.signal.aborted) {
+                this.connect();
+            }
+        }, 5000);
+    }
+
+    private processChunk(chunk: string) {
+        const { frames, buffer } = StreamUtils.parseSseFrames(this.buffer, chunk);
+        this.buffer = buffer;
+
+        for (const frame of frames) {
+            try {
+                const data = JSON.parse(frame);
+                const { setBuildStatus, updateBuildStatus } = useBuildStatus.getState();
+
+                if (Array.isArray(data)) {
+                    setBuildStatus(data as AppBuildStatusModel[]);
+                } else {
+                    updateBuildStatus(data as AppBuildStatusModel);
+                }
+            } catch (e) {
+                console.error('[BuildStatusService] Error parsing JSON:', e);
+            }
+        }
+    }
+
+    public refresh(): void {
+        this.stop();
+        this.start();
+    }
+
+    public isActive(): boolean {
+        return this.isConnected;
+    }
+}
+
+export const buildStatusPollingService = BuildStatusSSEStateService.getInstance();
diff --git a/src/frontend/services/pods-status-polling.service.ts b/src/frontend/services/pods-status-sse.service.ts
similarity index 85%
rename from src/frontend/services/pods-status-polling.service.ts
rename to src/frontend/services/pods-status-sse.service.ts
index 14e6e557..9ba71c56 100644
--- a/src/frontend/services/pods-status-polling.service.ts
+++ b/src/frontend/services/pods-status-sse.service.ts
@@ -42,8 +42,9 @@ class PodsStatusPollingService {
     }
 
     private async connect() {
-        this.controller = new AbortController();
-        const signal = this.controller.signal;
+        const controller = new AbortController();
+        this.controller = controller;
+        const signal = controller.signal;
         this.isConnected = true;
         this.buffer = '';
 
@@ -66,7 +67,10 @@ class PodsStatusPollingService {
 
             while (true) {
                 const { value, done } = await reader.read();
-                if (done) break;
+                if (done) {
+                    this.reconnect(controller);
+                    break;
+                }
                 if (value) {
                     this.processChunk(value);
                 }
@@ -76,19 +80,24 @@ class PodsStatusPollingService {
                 console.log('[PodsStatusService] Stream aborted');
             } else {
                 console.error('[PodsStatusService] Stream error:', error);
-                // Retry logic
-                this.isConnected = false;
-                setTimeout(() => {
-                    if (!signal.aborted) {
-                        this.connect();
-                    }
-                }, 5000);
+                this.reconnect(controller);
             }
         } finally {
-            this.isConnected = false;
+            if (this.controller === controller) {
+                this.isConnected = false;
+            }
         }
     }
 
+    private reconnect(controller: AbortController): void {
+        this.isConnected = false;
+        setTimeout(() => {
+            if (this.controller === controller && !controller.signal.aborted) {
+                this.connect();
+            }
+        }, 5000);
+    }
+
     private processChunk(chunk: string) {
         // Frames are buffered so an incomplete frame split across chunks is
         // carried into the next read instead of being dropped.
diff --git a/src/frontend/states/zustand.states.ts b/src/frontend/states/zustand.states.ts
index 2a14c5ad..4437d7c8 100644
--- a/src/frontend/states/zustand.states.ts
+++ b/src/frontend/states/zustand.states.ts
@@ -1,3 +1,4 @@
+import { AppBuildStatusModel } from "@/shared/model/app-build-status.model";
 import { AppPodsStatusModel } from "@/shared/model/app-pod-status.model";
 import { ReactNode } from "react";
 import { create } from "zustand"
@@ -164,6 +165,65 @@ export const usePodsStatus = create<ZustandPodsStatusProps>((set, get) => ({
     }
 }));
 
+/* Build Status Store */
+interface ZustandBuildStatusProps {
+    buildStatus: Map<string, AppBuildStatusModel>;
+    lastUpdate: Date | null;
+    isLoading: boolean;
+    listeners: Set<(changedWorkloadIds: string[]) => void>;
+    setBuildStatus: (data: AppBuildStatusModel[]) => void;
+    updateBuildStatus: (data: AppBuildStatusModel) => void;
+    setLoading: (loading: boolean) => void;
+    getBuildStatus: (workloadId: string) => AppBuildStatusModel | undefined;
+    subscribeToStatusChanges: (callback: (changedWorkloadIds: string[]) => void) => () => void;
+}
+
+export const useBuildStatus = create<ZustandBuildStatusProps>((set, get) => ({
+    buildStatus: new Map(),
+    lastUpdate: null,
+    isLoading: true,
+    listeners: new Set(),
+    setBuildStatus: (data) => {
+        set({
+            buildStatus: new Map(data.map(build => [build.workloadId, build])),
+            lastUpdate: new Date(),
+            isLoading: false,
+        });
+        get().listeners.forEach(listener => listener(data.map(build => build.workloadId)));
+    },
+    updateBuildStatus: (data) => {
+        set((state) => {
+            const newMap = new Map(state.buildStatus);
+            newMap.set(data.workloadId, data);
+            return {
+                buildStatus: newMap,
+                lastUpdate: new Date(),
+            };
+        });
+        get().listeners.forEach(listener => listener([data.workloadId]));
+    },
+    setLoading: (loading) => {
+        set({ isLoading: loading });
+    },
+    getBuildStatus: (workloadId) => {
+        return get().buildStatus.get(workloadId);
+    },
+    subscribeToStatusChanges: (callback) => {
+        set((state) => {
+            const newListeners = new Set(state.listeners);
+            newListeners.add(callback);
+            return { listeners: newListeners };
+        });
+        return () => {
+            set((state) => {
+                const newListeners = new Set(state.listeners);
+                newListeners.delete(callback);
+                return { listeners: newListeners };
+            });
+        };
+    }
+}));
+
 
 /* Generic Dialog */
 export interface DialogSizeProps {
diff --git a/src/frontend/utils/app-lifecycle.utils.ts b/src/frontend/utils/app-lifecycle.utils.ts
new file mode 100644
index 00000000..ac397ca3
--- /dev/null
+++ b/src/frontend/utils/app-lifecycle.utils.ts
@@ -0,0 +1,37 @@
+import type { AppExtendedModel } from '@/shared/model/app-extended.model';
+import { RolePermissionEnum } from '@/shared/model/role-extended.model.ts';
+import { AppSourceUtils } from './app-source.utils';
+
+export class AppLifecycleUtils {
+    static availability(
+        app: AppExtendedModel,
+        role: RolePermissionEnum | undefined,
+        deploymentStatus: string,
+    ) {
+        const canManage = role === RolePermissionEnum.READWRITE;
+        const sourceConfigured = AppSourceUtils.isConfiguredSource(app);
+        const canDeploy = canManage && sourceConfigured;
+
+        return {
+            canManage,
+            canDeploy,
+            supportsRebuild:
+                app.appType === 'APP'
+                && (app.sourceType === 'GIT' || app.sourceType === 'GIT_SSH'),
+            canRebuild:
+                canDeploy
+                && app.appType === 'APP'
+                && (app.sourceType === 'GIT' || app.sourceType === 'GIT_SSH'),
+            canStart:
+                canDeploy
+                && ['ERROR', 'UNKNOWN', 'SHUTDOWN', 'SHUTTING_DOWN'].includes(
+                    deploymentStatus,
+                ),
+            canStop:
+                canDeploy
+                && ['BUILDING', 'DEPLOYED', 'ERROR', 'UNKNOWN', 'DEPLOYING'].includes(
+                    deploymentStatus,
+                ),
+        };
+    }
+}
diff --git a/src/frontend/utils/app-lifecycle.utils.unit.spec.ts b/src/frontend/utils/app-lifecycle.utils.unit.spec.ts
new file mode 100644
index 00000000..135a8069
--- /dev/null
+++ b/src/frontend/utils/app-lifecycle.utils.unit.spec.ts
@@ -0,0 +1,43 @@
+import { AppLifecycleUtils } from './app-lifecycle.utils';
+import { RolePermissionEnum } from '@/shared/model/role-extended.model.ts';
+import type { AppExtendedModel } from '@/shared/model/app-extended.model';
+
+const app = {
+    appType: 'APP',
+    sourceType: 'GIT',
+    gitUrl: 'https://github.com/quickstack/app.git',
+    gitBranch: 'main',
+} as AppExtendedModel;
+
+describe('AppLifecycleUtils.availability', () => {
+    test.each([
+        ['DEPLOYED', true, true, false],
+        ['SHUTDOWN', true, false, true],
+        ['BUILDING', true, true, false],
+        ['UNKNOWN', true, true, true],
+    ])('maps %s to the permitted App lifecycle actions', (status, canDeploy, canStop, canStart) => {
+        expect(AppLifecycleUtils.availability(app, RolePermissionEnum.READWRITE, status)).toMatchObject({
+            canDeploy,
+            supportsRebuild: true,
+            canRebuild: true,
+            canStart,
+            canStop,
+        });
+    });
+
+    test('denies every App lifecycle action without a configured Source or write permission', () => {
+        expect(AppLifecycleUtils.availability({ ...app, gitBranch: '' }, RolePermissionEnum.READWRITE, 'UNKNOWN')).toMatchObject({
+            canDeploy: false,
+            supportsRebuild: true,
+            canRebuild: false,
+            canStart: false,
+            canStop: false,
+        });
+        expect(AppLifecycleUtils.availability(app, undefined, 'UNKNOWN')).toMatchObject({
+            canManage: false,
+            canDeploy: false,
+            canStart: false,
+            canStop: false,
+        });
+    });
+});
diff --git a/src/frontend/utils/format.utils.ts b/src/frontend/utils/format.utils.ts
index 810f168c..fbeb4a95 100644
--- a/src/frontend/utils/format.utils.ts
+++ b/src/frontend/utils/format.utils.ts
@@ -1,28 +1,54 @@
 
-import { formatInTimeZone } from 'date-fns-tz';
+function formatLocalDate(date: Date, options: Intl.DateTimeFormatOptions): string {
+    return new Intl.DateTimeFormat(undefined, options).format(date);
+}
 
-export function formatDate(date: Date | undefined | null): string {
-    if (!date) {
-        return '';
+type DateInput = Date | string | undefined | null;
+
+function parseDate(date: DateInput): Date | undefined {
+    if (typeof date === 'string') {
+        date = new Date(date);
     }
-    return formatInTimeZone(date, 'Europe/Zurich', 'dd.MM.yyyy');
+
+    return date instanceof Date && !Number.isNaN(date.getTime()) ? date : undefined;
 }
 
-export function formatDateTime(date: Date | undefined | null, includeSeconds = false): string {
-    if (!date) {
+export function formatDate(date: DateInput): string {
+    const parsedDate = parseDate(date);
+    if (!parsedDate) {
         return '';
     }
-    if (includeSeconds) {
-        return formatInTimeZone(date, 'Europe/Zurich', 'dd.MM.yyyy HH:mm:ss');
+    return formatLocalDate(parsedDate, {
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric',
+    });
+}
+
+export function formatDateTime(date: DateInput, includeSeconds = false): string {
+    const parsedDate = parseDate(date);
+    if (!parsedDate) {
+        return '';
     }
-    return formatInTimeZone(date, 'Europe/Zurich', 'dd.MM.yyyy HH:mm');
+    return formatLocalDate(parsedDate, {
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+        ...(includeSeconds && { second: '2-digit' }),
+    });
 }
 
-export function formatTime(date: Date | undefined | null): string {
-    if (!date) {
+export function formatTime(date: DateInput): string {
+    const parsedDate = parseDate(date);
+    if (!parsedDate) {
         return '';
     }
-    return formatInTimeZone(date, 'Europe/Zurich', 'HH:mm');
+    return formatLocalDate(parsedDate, {
+        hour: '2-digit',
+        minute: '2-digit',
+    });
 }
 
 export function formatBytes(bytes: number) {
@@ -31,4 +57,4 @@ export function formatBytes(bytes: number) {
     const sizes = ['B', 'KB', 'MB', 'GB'];
     const i = Math.floor(Math.log(bytes) / Math.log(k));
     return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
-};
\ No newline at end of file
+};
diff --git a/src/frontend/utils/format.utils.unit.spec.ts b/src/frontend/utils/format.utils.unit.spec.ts
index fb513a97..e541e391 100644
--- a/src/frontend/utils/format.utils.unit.spec.ts
+++ b/src/frontend/utils/format.utils.unit.spec.ts
@@ -1,78 +1,142 @@
 
 import { formatDate, formatDateTime, formatTime } from '@/frontend/utils/format.utils';
-import { formatInTimeZone } from 'date-fns-tz';
-
-vi.mock('date-fns-tz', () => ({
-    formatInTimeZone: vi.fn(),
-}));
 
 describe('format.utils', () => {
     const mockDate = new Date('2023-10-10T10:10:10Z');
+    const format = vi.fn();
+    const dateTimeFormat = vi.fn(() => ({ format }));
 
     beforeEach(() => {
         vi.clearAllMocks();
+        vi.stubGlobal('Intl', {
+            DateTimeFormat: class {
+                constructor(...args: unknown[]) {
+                    dateTimeFormat(...args);
+                }
+
+                format = format;
+            },
+        });
+        format.mockReturnValue('formatted date');
     });
 
+    afterEach(() => vi.unstubAllGlobals());
+
     describe('formatDate', () => {
         it('should return formatted date string for valid date', () => {
-            vi.mocked(formatInTimeZone).mockReturnValue('10.10.2023');
             const result = formatDate(mockDate);
-            expect(result).toBe('10.10.2023');
-            expect(formatInTimeZone).toHaveBeenCalledWith(mockDate, 'Europe/Zurich', 'dd.MM.yyyy');
+            expect(result).toBe('formatted date');
+            expect(dateTimeFormat).toHaveBeenCalledWith(undefined, {
+                day: '2-digit', month: '2-digit', year: 'numeric',
+            });
+            expect(format).toHaveBeenCalledWith(mockDate);
+        });
+
+        it('should parse and format a date string', () => {
+            const dateString = '2023-10-10T10:10:10Z';
+            const result = formatDate(dateString);
+
+            expect(result).toBe('formatted date');
+            expect(format).toHaveBeenCalledWith(new Date(dateString));
         });
 
         it('should return empty string for undefined date', () => {
             const result = formatDate(undefined);
             expect(result).toBe('');
-            expect(formatInTimeZone).not.toHaveBeenCalled();
+            expect(dateTimeFormat).not.toHaveBeenCalled();
         });
 
         it('should return empty string for null date', () => {
             const result = formatDate(null);
             expect(result).toBe('');
-            expect(formatInTimeZone).not.toHaveBeenCalled();
+            expect(dateTimeFormat).not.toHaveBeenCalled();
+        });
+
+        it('should return an empty string for an invalid date', () => {
+            const result = formatDate(new Date('invalid'));
+            expect(result).toBe('');
+            expect(dateTimeFormat).not.toHaveBeenCalled();
         });
     });
 
     describe('formatDateTime', () => {
         it('should return formatted date-time string for valid date', () => {
-            vi.mocked(formatInTimeZone).mockReturnValue('10.10.2023 12:10');
             const result = formatDateTime(mockDate);
-            expect(result).toBe('10.10.2023 12:10');
-            expect(formatInTimeZone).toHaveBeenCalledWith(mockDate, 'Europe/Zurich', 'dd.MM.yyyy HH:mm');
+            expect(result).toBe('formatted date');
+            expect(dateTimeFormat).toHaveBeenCalledWith(undefined, {
+                day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit',
+            });
+            expect(format).toHaveBeenCalledWith(mockDate);
+        });
+
+        it('should parse and format a date-time string', () => {
+            const dateString = '2023-10-10T10:10:10Z';
+            const result = formatDateTime(dateString);
+
+            expect(result).toBe('formatted date');
+            expect(format).toHaveBeenCalledWith(new Date(dateString));
+        });
+
+        it('should include seconds when requested', () => {
+            formatDateTime(mockDate, true);
+            expect(dateTimeFormat).toHaveBeenCalledWith(undefined, {
+                day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit',
+            });
         });
 
         it('should return empty string for undefined date', () => {
             const result = formatDateTime(undefined);
             expect(result).toBe('');
-            expect(formatInTimeZone).not.toHaveBeenCalled();
+            expect(dateTimeFormat).not.toHaveBeenCalled();
         });
 
         it('should return empty string for null date', () => {
             const result = formatDateTime(null);
             expect(result).toBe('');
-            expect(formatInTimeZone).not.toHaveBeenCalled();
+            expect(dateTimeFormat).not.toHaveBeenCalled();
+        });
+
+        it('should return an empty string for an invalid date', () => {
+            const result = formatDateTime(new Date('invalid'));
+            expect(result).toBe('');
+            expect(dateTimeFormat).not.toHaveBeenCalled();
         });
     });
 
     describe('formatTime', () => {
         it('should return formatted time string for valid date', () => {
-            vi.mocked(formatInTimeZone).mockReturnValue('12:10');
             const result = formatTime(mockDate);
-            expect(result).toBe('12:10');
-            expect(formatInTimeZone).toHaveBeenCalledWith(mockDate, 'Europe/Zurich', 'HH:mm');
+            expect(result).toBe('formatted date');
+            expect(dateTimeFormat).toHaveBeenCalledWith(undefined, {
+                hour: '2-digit', minute: '2-digit',
+            });
+            expect(format).toHaveBeenCalledWith(mockDate);
+        });
+
+        it('should parse and format a time string', () => {
+            const dateString = '2023-10-10T10:10:10Z';
+            const result = formatTime(dateString);
+
+            expect(result).toBe('formatted date');
+            expect(format).toHaveBeenCalledWith(new Date(dateString));
         });
 
         it('should return empty string for undefined date', () => {
             const result = formatTime(undefined);
             expect(result).toBe('');
-            expect(formatInTimeZone).not.toHaveBeenCalled();
+            expect(dateTimeFormat).not.toHaveBeenCalled();
         });
 
         it('should return empty string for null date', () => {
             const result = formatTime(null);
             expect(result).toBe('');
-            expect(formatInTimeZone).not.toHaveBeenCalled();
+            expect(dateTimeFormat).not.toHaveBeenCalled();
+        });
+
+        it('should return an empty string for an invalid date', () => {
+            const result = formatTime(new Date('invalid'));
+            expect(result).toBe('');
+            expect(dateTimeFormat).not.toHaveBeenCalled();
         });
     });
-});
\ No newline at end of file
+});
diff --git a/src/server.ts b/src/server.ts
index 17d5e370..e6bae396 100644
--- a/src/server.ts
+++ b/src/server.ts
@@ -11,7 +11,6 @@ import { Constants } from './shared/utils/constants'
 import backupService from './server/services/standalone-services/backup.service'
 import maintenanceService from './server/services/standalone-services/maintenance.service'
 import passwordChangeService from './server/services/standalone-services/password-change.service'
-import appLogsService from './server/services/standalone-services/app-logs.service'
 
 declare global {
     var quickStackInitKey: string | undefined;
@@ -64,7 +63,6 @@ async function initializeNextJs() {
 
     await backupService.registerAllBackups();
     maintenanceService.configureMaintenanceCronJobs();
-    appLogsService.configureCronJobs();
 
     const app = next({ dev });
     const handle = app.getRequestHandler();
diff --git a/src/server/services/app.service.ts b/src/server/services/app.service.ts
index baf1f0f2..f91a2a59 100644
--- a/src/server/services/app.service.ts
+++ b/src/server/services/app.service.ts
@@ -372,6 +372,7 @@ class AppService {
             ...existingApp,
             webhookId: randomBytes
         });
+        return randomBytes;
     }
 
     async saveDomain(domainToBeSaved: Prisma.AppDomainUncheckedCreateInput | Prisma.AppDomainUncheckedUpdateInput, tx?: Prisma.TransactionClient) {
@@ -473,6 +474,21 @@ class AppService {
         });
     }
 
+    async getVolumeWithAppById(id: string) {
+        return dataAccess.client.appVolume.findFirstOrThrow({
+            where: { id },
+            include: { app: true },
+        });
+    }
+
+    async getFileMountAppId(fileMountId: string) {
+        const fileMount = await dataAccess.client.appFileMount.findFirstOrThrow({
+            where: { id: fileMountId },
+            select: { appId: true },
+        });
+        return fileMount.appId;
+    }
+
     async getShareableVolumesByProjectId(projectId: string, appId: string) {
         return await dataAccess.client.appVolume.findMany({
             where: {
diff --git a/src/server/services/build-live-status.service.ts b/src/server/services/build-live-status.service.ts
new file mode 100644
index 00000000..12d35ead
--- /dev/null
+++ b/src/server/services/build-live-status.service.ts
@@ -0,0 +1,89 @@
+import projectService from './project.service';
+import buildStatusService from './standalone-services/build-status-pub-sub.service';
+import { AppBuildStatusModel } from '@/shared/model/app-build-status.model';
+import { UserSession } from '@/shared/model/sim-session.model';
+import { UserGroupUtils } from '@/shared/utils/role.utils';
+
+export interface BuildableAppInfo {
+    appId: string;
+    appName: string;
+    projectId: string;
+    projectName: string;
+}
+
+const BUILDABLE_SOURCE_TYPES = ['GIT', 'GIT_SSH'];
+
+class BuildLiveStatusService {
+
+    /** Lists all apps that are built from source, filtered by the session's read access. */
+    async getBuildableAppLookup(session?: UserSession): Promise<Map<string, BuildableAppInfo>> {
+        const projects = await projectService.getAll();
+        const appLookup = new Map<string, BuildableAppInfo>();
+
+        for (const project of projects) {
+            for (const app of project.apps) {
+                if (!BUILDABLE_SOURCE_TYPES.includes(app.sourceType)) {
+                    continue;
+                }
+                if (session && !UserGroupUtils.sessionHasReadAccessForProjectWorkload(session, app.id)) {
+                    continue;
+                }
+                appLookup.set(app.id, {
+                    appId: app.id,
+                    appName: app.name,
+                    projectId: project.id,
+                    projectName: project.name,
+                });
+            }
+        }
+        return appLookup;
+    }
+
+    /**
+     * Builds the initial SSE payload. Apps without a known build are reported as
+     * NOT_BUILT so every buildable app always has a status.
+     */
+    getInitialStatus(appLookup: Map<string, BuildableAppInfo>): AppBuildStatusModel[] {
+        const result: AppBuildStatusModel[] = [];
+        const knownAppIds = new Set<string>();
+
+        for (const status of buildStatusService.getStatuses()) {
+            if (status.workloadType !== 'app') {
+                continue;
+            }
+            const appInfo = appLookup.get(status.workloadId);
+            if (!appInfo) {
+                continue;
+            }
+            knownAppIds.add(status.workloadId);
+            result.push(this.mapBuildToStatus(status, appInfo));
+        }
+
+        for (const [appId, appInfo] of appLookup.entries()) {
+            if (knownAppIds.has(appId)) {
+                continue;
+            }
+            result.push({
+                workloadId: appId,
+                workloadType: 'app',
+                workloadName: appInfo.appName,
+                projectId: appInfo.projectId,
+                projectName: appInfo.projectName,
+                status: 'NOT_BUILT',
+            });
+        }
+        return result;
+    }
+
+    mapBuildToStatus(status: AppBuildStatusModel, appInfo: BuildableAppInfo): AppBuildStatusModel {
+        return {
+            ...status,
+            workloadName: appInfo.appName,
+            projectId: appInfo.projectId,
+            projectName: appInfo.projectName,
+        };
+    }
+}
+
+const buildLiveStatusService = new BuildLiveStatusService();
+export default buildLiveStatusService;
diff --git a/src/server/services/build-live-status.service.unit.spec.ts b/src/server/services/build-live-status.service.unit.spec.ts
new file mode 100644
index 00000000..2f820bbe
--- /dev/null
+++ b/src/server/services/build-live-status.service.unit.spec.ts
@@ -0,0 +1,108 @@
+vi.mock('@/server/services/project.service', () => ({
+    default: {
+        getAll: vi.fn(),
+    },
+}));
+vi.mock('@/server/services/standalone-services/build-status-pub-sub.service', () => ({
+    default: {
+        getStatuses: vi.fn(),
+    },
+}));
+
+import projectService from '@/server/services/project.service';
+import buildStatusService from '@/server/services/standalone-services/build-status-pub-sub.service';
+import buildLiveStatusService from '@/server/services/build-live-status.service';
+import { UserGroupUtils } from '@/shared/utils/role.utils';
+
+function app(id: string, sourceType: string) {
+    return { id, name: `name-${id}`, sourceType };
+}
+
+describe('BuildLiveStatusService', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+        vi.restoreAllMocks();
+    });
+
+    describe('getBuildableAppLookup', () => {
+        it('only includes apps that have to be built', async () => {
+            vi.mocked(projectService.getAll).mockResolvedValue([
+                {
+                    id: 'project-1',
+                    name: 'Project',
+                    apps: [app('app-git', 'GIT'), app('app-ssh', 'GIT_SSH'), app('app-container', 'CONTAINER')],
+                },
+            ] as any);
+
+            const lookup = await buildLiveStatusService.getBuildableAppLookup();
+
+            expect(Array.from(lookup.keys()).sort()).toEqual(['app-git', 'app-ssh']);
+            expect(lookup.get('app-git')).toEqual({
+                appId: 'app-git',
+                appName: 'name-app-git',
+                projectId: 'project-1',
+                projectName: 'Project',
+            });
+        });
+
+        it('filters out apps the session cannot read', async () => {
+            vi.mocked(projectService.getAll).mockResolvedValue([
+                {
+                    id: 'project-1',
+                    name: 'Project',
+                    apps: [app('app-1', 'GIT'), app('app-2', 'GIT')],
+                },
+            ] as any);
+            vi.spyOn(UserGroupUtils, 'sessionHasReadAccessForProjectWorkload').mockImplementation((_session, appId) => appId === 'app-1');
+
+            const lookup = await buildLiveStatusService.getBuildableAppLookup({} as any);
+
+            expect(Array.from(lookup.keys())).toEqual(['app-1']);
+        });
+    });
+
+    describe('getInitialStatus', () => {
+        it('reports NOT_BUILT for buildable apps without a build', () => {
+            vi.mocked(buildStatusService.getStatuses).mockReturnValue([]);
+            const appLookup = new Map([['app-1', { appId: 'app-1', appName: 'App', projectId: 'project-1', projectName: 'Project' }]]);
+
+            const statuses = buildLiveStatusService.getInitialStatus(appLookup);
+
+            expect(statuses).toEqual([
+                expect.objectContaining({ workloadId: 'app-1', workloadType: 'app', status: 'NOT_BUILT', workloadName: 'App' }),
+            ]);
+        });
+
+        it('merges known build statuses and only returns apps in the lookup', () => {
+            vi.mocked(buildStatusService.getStatuses).mockReturnValue([
+                { workloadId: 'app-1', workloadType: 'app', workloadName: '', projectId: '', projectName: '', status: 'RUNNING' },
+                { workloadId: 'app-other', workloadType: 'app', workloadName: '', projectId: '', projectName: '', status: 'FAILED' },
+                { workloadId: 'agent-1', workloadType: 'agent', workloadName: '', projectId: '', projectName: '', status: 'RUNNING' },
+            ]);
+            const appLookup = new Map([['app-1', { appId: 'app-1', appName: 'App', projectId: 'project-1', projectName: 'Project' }]]);
+
+            const statuses = buildLiveStatusService.getInitialStatus(appLookup);
+
+            expect(statuses).toEqual([
+                expect.objectContaining({ workloadId: 'app-1', status: 'RUNNING', workloadName: 'App', projectId: 'project-1' }),
+            ]);
+        });
+    });
+
+    describe('mapBuildToStatus', () => {
+        it('overrides names and project information from the app lookup', () => {
+            const mapped = buildLiveStatusService.mapBuildToStatus(
+                { workloadId: 'app-1', workloadType: 'app', workloadName: 'stale', projectId: '', projectName: '', status: 'SUCCEEDED' },
+                { appId: 'app-1', appName: 'Fresh App', projectId: 'project-9', projectName: 'Fresh Project' },
+            );
+
+            expect(mapped).toMatchObject({
+                workloadId: 'app-1',
+                status: 'SUCCEEDED',
+                workloadName: 'Fresh App',
+                projectId: 'project-9',
+                projectName: 'Fresh Project',
+            });
+        });
+    });
+});
diff --git a/src/server/services/deployment-logs.service.ts b/src/server/services/deployment-logs.service.ts
index c5ffdd57..8641cecf 100644
--- a/src/server/services/deployment-logs.service.ts
+++ b/src/server/services/deployment-logs.service.ts
@@ -5,25 +5,8 @@ import { FsUtils } from '../utils/fs.utils';
 
 class DeploymentLogService {
 
-    async deleteOldDeploymentLogs() {
-        const logDaysThreshold = 30;
-        const expirationTime = Date.now() - logDaysThreshold * 24 * 60 * 60 * 1000;
-
-        await FsUtils.createDirIfNotExistsAsync(PathUtils.deploymentLogsPath, true);
-        const logFiles = await FsUtils.listFilesInDirAsync(PathUtils.deploymentLogsPath);
-
-        for (const logFile of logFiles) {
-            if (!logFile.endsWith('.log')) {
-                continue;
-            }
-
-            const logFilePath = PathUtils.appDeploymentLogFile(logFile.replace(/\.log$/, ''));
-            const stat = await fsPromises.stat(logFilePath);
-
-            if (stat.isFile() && stat.mtimeMs < expirationTime) {
-                await FsUtils.deleteFileIfExists(logFilePath);
-            }
-        }
+    async deleteAllLogs() {
+        await FsUtils.deleteDirIfExistsAsync(PathUtils.deploymentLogsPath, true);
     }
 
     async writeLogs(deploymentId: string, logMessage: string, addDate = true, addNewLine = true) {
diff --git a/src/server/services/deployment-logs.service.unit.spec.ts b/src/server/services/deployment-logs.service.unit.spec.ts
index 1f5e3f83..6c123d8c 100644
--- a/src/server/services/deployment-logs.service.unit.spec.ts
+++ b/src/server/services/deployment-logs.service.unit.spec.ts
@@ -44,20 +44,13 @@ describe('deployment-logs.service', () => {
         );
     });
 
-    it('deletes deployment logs older than 30 days', async () => {
-        const oldDeploymentId = 'deploy-old';
-        const recentDeploymentId = 'deploy-recent';
-        await writeLogFile(oldDeploymentId, 'old log');
-        await writeLogFile(recentDeploymentId, 'recent log');
+    it('deletes all deployment logs', async () => {
+        await writeLogFile('deploy-one', 'first');
+        await writeLogFile('deploy-two', 'second');
 
-        const oldLogDate = new Date();
-        oldLogDate.setDate(oldLogDate.getDate() - 31);
-        await fs.utimes(PathUtils.appDeploymentLogFile(oldDeploymentId), oldLogDate, oldLogDate);
+        await deploymentLogService.deleteAllLogs();
 
-        await deploymentLogService.deleteOldDeploymentLogs();
-
-        await expect(fs.access(PathUtils.appDeploymentLogFile(oldDeploymentId))).rejects.toThrow();
-        await expect(fs.access(PathUtils.appDeploymentLogFile(recentDeploymentId))).resolves.toBeUndefined();
+        await expect(fs.access(PathUtils.deploymentLogsPath)).rejects.toThrow();
     });
 
     it('streams the existing log content before watching for updates', async () => {
diff --git a/src/server/services/standalone-services/app-logs.service.ts b/src/server/services/standalone-services/app-logs.service.ts
index e7665297..83dedd00 100644
--- a/src/server/services/standalone-services/app-logs.service.ts
+++ b/src/server/services/standalone-services/app-logs.service.ts
@@ -1,51 +1,9 @@
-import stream from "stream";
 import dataAccess from "../../adapter/db.client";
 import standalonePodService from "./standalone-pod.service";
-import k3s from "../../adapter/kubernetes-api.adapter";
-import { FsUtils } from "../../utils/fs.utils";
-import { PathUtils } from "../../utils/path.utils";
-import fsPromises from "fs/promises";
-import { App } from "@prisma/client";
-import path from "path";
-import scheduleService from "./schedule.service";
-import { DownloadableAppLogsModel } from "../../../shared/model/downloadable-app-logs.model";
 import { AppLogEntryModel } from "@/shared/model/app-tail-log-entry";
 
-const { create } = require('tar') as { create: any };
-
 class AppLogsService {
 
-    configureCronJobs() {
-        scheduleService.scheduleJob('daily-logs-to-file', '10 0 * * *', async () => {
-            await this.backupLogsForAllRunningAppsForYesterday();
-            await this.deleteOldAppLogs();
-        });
-    }
-
-    async getAvailableLogsForApp(appId: string): Promise<DownloadableAppLogsModel[]> {
-        const appLogsFolder = PathUtils.appLogsFolder(appId);
-        await FsUtils.createDirIfNotExistsAsync(appLogsFolder, true);
-
-        const fileNames = await FsUtils.listFilesInDirAsync(appLogsFolder);
-        const logFiles = fileNames.map((fileName) => {
-            const date = this.dateFromAppLogsFileName(fileName);
-            if (!date) {
-                return undefined;
-            }
-            return {
-                appId,
-                date
-            };
-        }).filter((logFile) => logFile !== undefined);
-
-        // sort logs by date descending
-        logFiles.sort((a, b) => {
-            return b.date.getTime() - a.date.getTime();
-        });
-
-        return logFiles;
-    }
-
     async getCurrentLogs(appId: string, lines = 200): Promise<AppLogEntryModel[]> {
         const app = await dataAccess.client.app.findFirstOrThrow({
             where: {
@@ -67,166 +25,6 @@ class AppLogsService {
         );
     }
 
-    private dateFromAppLogsFileName(fileName: string) {
-        try {
-            const dateStr = fileName.replace('.tar.gz', '').split("_")[1];
-            return new Date(dateStr);
-        } catch {
-            console.error("Error parsing date from file name", fileName);
-            return undefined;
-        }
-    }
-
-    async deleteOldAppLogs() {
-        const logDaysThreshold = 20;
-
-        const itemsInFolder = await FsUtils.listFilesInDirAsync(PathUtils.persistedLogsPath);
-        const logFolders = await Promise.all(itemsInFolder.map(async (item) => {
-            const stat = await fsPromises.stat(PathUtils.appLogsFolder(item));
-            if (stat.isDirectory()) {
-                return item;
-            }
-            await FsUtils.deleteFileIfExists(PathUtils.appLogsFolder(item));
-        }));
-
-        for (const logFolder of logFolders.filter((folder) => !!folder) as string[]) {
-            const logsInFolder = await FsUtils.listFilesInDirAsync(PathUtils.appLogsFolder(logFolder));
-            for (const logFile of logsInFolder) {
-                const fullLogFilePath = path.join(PathUtils.appLogsFolder(logFolder), logFile);
-                const stat = await fsPromises.stat(fullLogFilePath);
-
-                if (stat.mtimeMs < new Date().getTime() - logDaysThreshold * 24 * 60 * 60 * 1000) {
-                    if (stat.isDirectory()) {
-                        await FsUtils.deleteDirIfExistsAsync(fullLogFilePath);
-                    } else {
-                        await FsUtils.deleteFileIfExists(fullLogFilePath);
-                    }
-                }
-            }
-        }
-    }
-
-    async backupLogsForAllRunningAppsForYesterday() {
-        const yesterday = new Date();
-        yesterday.setDate(yesterday.getDate() - 1);
-        await this.writeLogsToDiskForAllRunningApps(yesterday);
-    }
-
-    async writeLogsToDiskForAllRunningApps(date?: Date) {
-        const apps = await dataAccess.client.app.findMany();
-        for (const app of apps) {
-            try {
-                await this.writeAppLogsToDiskForApp(app.id, date);
-            } catch (error) {
-                console.error(`Error writing logs to disk for app ${app.id}`, error);
-            }
-        }
-    }
-
-    async writeAppLogsToDiskForApp(appId: string, date?: Date) {
-
-        const startOfDay = date ?? new Date();
-        startOfDay.setHours(0, 0, 0, 0);
-        const secondsSinceMidnight = (new Date().getTime() - startOfDay.getTime()) / 1000;
-
-        const app = await dataAccess.client.app.findFirstOrThrow({
-            where: {
-                id: appId
-            }
-        });
-
-        const podInfos = await standalonePodService.getPodsForApp(app.projectId, app.id);
-        if (podInfos.length === 0) {
-            return;
-        }
-
-        await FsUtils.createDirIfNotExistsAsync(PathUtils.appLogsFolder(app.id), true);
-
-        let logPathsWritten = [];
-        for (const pod of podInfos) {
-            const logPath = await this.writeLogsToFileForPod(pod, app, startOfDay, secondsSinceMidnight);
-            if (await FsUtils.fileExists(logPath)) {
-                logPathsWritten.push(logPath);
-            } else {
-                console.error(`Error writing logs to file for pod ${pod.podName} in app ${app.id}. There was no file written!`);
-            }
-        }
-
-        // create tar.gz file from all log files
-        const logFilePath = PathUtils.appLogsFile(app.id, startOfDay);
-        await FsUtils.deleteFileIfExists(logFilePath); // delete existing log file --> new one will be created
-
-        if (logPathsWritten.length === 0) {
-            return;
-        }
-
-        await create({
-            gzip: true,
-            file: logFilePath,
-            cwd: PathUtils.appLogsFolder(app.id)
-        }, logPathsWritten);
-
-        if (!FsUtils.fileExists(logFilePath)) {
-            throw new Error(`Error creating tar file for logs of app ${app.id} on path ${logFilePath}`);
-        }
-
-        for (const logPath of logPathsWritten) {
-            await FsUtils.deleteFileIfExists(logPath);
-        }
-
-        return {
-            appId: app.id,
-            date: startOfDay
-        };
-    }
-
-
-
-    private async writeLogsToFileForPod(pod: { podName: string; containerName: string; uid?: string; status?: string; },
-        app: App, startOfDay: Date, secondsSinceMidnight: number) {
-
-        console.log(`Fetching logs for pod ${pod.podName} in container ${pod.containerName}`);
-        const textLogFilePath = path.join(PathUtils.appLogsFolder(app.id),
-            `${startOfDay.toISOString().split('T')[0]}_${pod.podName}.log`);
-        await FsUtils.deleteFileIfExists(textLogFilePath); // delete existing log file --> new one will be created
-
-        await new Promise<void>(async (resolve, reject) => {
-            try {
-
-                let logStream = new stream.PassThrough();
-
-                const requestWebSocket = await k3s.log.log(app.projectId, pod.podName, pod.containerName, logStream, {
-                    follow: false,
-                    sinceSeconds: Math.round(secondsSinceMidnight),
-                    timestamps: true,
-                    pretty: false,
-                    previous: false
-                });
-
-                logStream.on('data', async (chunk) => {
-                    await fsPromises.appendFile(textLogFilePath, chunk.toString(), {
-                        encoding: 'utf-8'
-                    });
-                });
-
-                logStream.on('error', (error) => {
-                    console.error(`Error fetching logs for pod ${pod.podName} in container ${pod.containerName}`, error);
-                    reject(error);
-                });
-
-                logStream.on('end', () => {
-                    console.log(`[END] Log stream ended for ${pod.podName}`);
-                    resolve();
-                    requestWebSocket?.abort();
-                });
-            } catch (error) {
-                console.error(`Error fetching logs for pod ${pod.podName} in container ${pod.containerName}`, error);
-                reject(error);
-            }
-        });
-
-        return textLogFilePath;
-    }
 }
 
 const appLogsService = new AppLogsService();
diff --git a/src/server/services/standalone-services/backup.service.ts b/src/server/services/standalone-services/backup.service.ts
index b6699ee5..6bc3c459 100644
--- a/src/server/services/standalone-services/backup.service.ts
+++ b/src/server/services/standalone-services/backup.service.ts
@@ -216,6 +216,19 @@ class BackupService {
         return { backupInfoModels, backupsVolumesWithoutActualBackups };
     }
 
+    async getBackupsForVolumeSchedule(backupVolumeId: string): Promise<BackupEntry[]> {
+        const backupVolume = await dataAccess.client.volumeBackup.findFirstOrThrow({
+            where: { id: backupVolumeId },
+            include: { target: true },
+        });
+        const backupData = await this.getBackupsFromS3Target(backupVolume.target);
+        const backupInfo = backupData.backupInfoModels.find(
+            (item) => item.backupVolumeId === backupVolumeId,
+        );
+
+        return backupInfo?.backups ?? [];
+    }
+
     private async listAndParseBackupFiles(s3Target: S3Target) {
         const fileKeys = await s3Service.listFiles(s3Target);
         const backupData = fileKeys.filter(x => {
diff --git a/src/server/services/standalone-services/build-status-pub-sub.service.ts b/src/server/services/standalone-services/build-status-pub-sub.service.ts
new file mode 100644
index 00000000..d5fed709
--- /dev/null
+++ b/src/server/services/standalone-services/build-status-pub-sub.service.ts
@@ -0,0 +1,248 @@
+import { V1Job } from '@kubernetes/client-node';
+import { AppBuildMethod } from '../../../shared/model/app-source-info.model';
+import { AppBuildStatusModel, isActiveBuildStatus } from '../../../shared/model/app-build-status.model';
+import { BuildJobModel } from '../../../shared/model/build-job';
+import { GlobalBuildJobModel } from '../../../shared/model/global-build-job.model';
+import { WorkloadType } from '../../../shared/model/runtime-type.model';
+import { Constants } from '../../../shared/utils/constants';
+import buildService from '../build.service';
+
+export type BuildStatusListener = (status: AppBuildStatusModel) => void | Promise<void>;
+
+type ReconcilableBuild = BuildJobModel & Partial<Pick<GlobalBuildJobModel, 'workloadName' | 'projectName' | 'projectId' | 'completionTime'>>;
+
+declare global {
+    var buildStatusServiceInstance: BuildStatusPubSubService | undefined;
+}
+
+/**
+ * In-memory, process-wide cache of the latest build status per workload.
+ *
+ * The Kubernetes job watch feeds this service through `applyJobEvent`, and the
+ * SSE route subscribes to receive status transitions. The cache is not the
+ * source of truth: `ensureSeeded` builds it from the build service, so a restart
+ * or reconnect behaves the same as a long-running process.
+ */
+class BuildStatusPubSubService {
+    private statuses = new Map<string, AppBuildStatusModel>();
+    private subscribers = new Set<BuildStatusListener>();
+    private seedPromise: Promise<void> | null = null;
+
+    subscribe(listener: BuildStatusListener): () => void {
+        this.subscribers.add(listener);
+        let isSubscribed = true;
+        return () => {
+            if (!isSubscribed) {
+                return;
+            }
+            isSubscribed = false;
+            this.subscribers.delete(listener);
+        };
+    }
+
+    getStatuses(): AppBuildStatusModel[] {
+        return Array.from(this.statuses.values());
+    }
+
+    getStatus(workloadType: WorkloadType, workloadId: string): AppBuildStatusModel | undefined {
+        return this.statuses.get(this.key(workloadType, workloadId));
+    }
+
+    /** Rebuilds the cached status for every workload present in the given builds. */
+    applyBuildJobs(builds: ReconcilableBuild[]): void {
+        const groups = new Map<string, { workloadType: WorkloadType; workloadId: string; builds: ReconcilableBuild[] }>();
+        for (const build of builds) {
+            if (!build.workloadId || !build.workloadType) {
+                continue;
+            }
+            const groupKey = this.key(build.workloadType, build.workloadId);
+            const group = groups.get(groupKey) ?? { workloadType: build.workloadType, workloadId: build.workloadId, builds: [] };
+            group.builds.push(build);
+            groups.set(groupKey, group);
+        }
+
+        for (const group of groups.values()) {
+            this.reconcileGroup(group.workloadType, group.workloadId, group.builds);
+        }
+    }
+
+    /**
+     * Applies a single Kubernetes job watch event.
+     *
+     * ADDED/MODIFIED upsert the workload status. DELETED re-reads the remaining
+     * builds for that workload because a single deleted job does not tell us the
+     * previous build's outcome.
+     */
+    async applyJobEvent(type: string, job: V1Job): Promise<void> {
+        const annotations = job.metadata?.annotations;
+        const buildName = job.metadata?.name;
+        const workloadType = (annotations?.[Constants.QS_ANNOTATION_WORKLOAD_TYPE] as WorkloadType | undefined)
+            ?? (annotations?.[Constants.QS_ANNOTATION_AGENT_ID] ? 'agent' : 'app');
+        const workloadId = annotations?.[Constants.QS_ANNOTATION_WORKLOAD_ID]
+            ?? annotations?.[workloadType === 'agent' ? Constants.QS_ANNOTATION_AGENT_ID : Constants.QS_ANNOTATION_APP_ID];
+        if (!workloadId) {
+            return;
+        }
+
+        if (type === 'DELETED') {
+            const builds = await buildService.getBuildsForWorkload(workloadId);
+            const remaining = builds.filter(build => build.workloadType === workloadType);
+            if (remaining.length === 0) {
+                this.setNotBuilt(workloadType, workloadId);
+            } else {
+                this.reconcileGroup(workloadType, workloadId, remaining);
+            }
+            return;
+        }
+
+        const status = buildService.getJobStatusString(job.status);
+        const existing = this.statuses.get(this.key(workloadType, workloadId));
+        const isDifferentBuild = !!existing?.buildName && !!buildName && existing.buildName !== buildName;
+        if (isDifferentBuild) {
+            const incomingStart = this.toTime(job.status?.startTime);
+            const existingStart = this.toTime(existing?.startedAt);
+            const isOlderBuild = !!incomingStart && !!existingStart && incomingStart < existingStart;
+            const isStaleTerminalForActiveBuild = isActiveBuildStatus(existing.status) && !isActiveBuildStatus(status);
+            if (isOlderBuild || isStaleTerminalForActiveBuild) {
+                return;
+            }
+        }
+
+        this.setStatus({
+            workloadId,
+            workloadType,
+            workloadName: existing?.workloadName ?? workloadId,
+            projectId: annotations?.[Constants.QS_ANNOTATION_PROJECT_ID] ?? existing?.projectId ?? '',
+            projectName: existing?.projectName ?? '',
+            status,
+            buildName,
+            gitCommit: annotations?.[Constants.QS_ANNOTATION_GIT_COMMIT] || existing?.gitCommit,
+            gitCommitMessage: annotations?.[Constants.QS_ANNOTATION_GIT_COMMIT_MESSAGE] || existing?.gitCommitMessage,
+            deploymentId: annotations?.[Constants.QS_ANNOTATION_DEPLOYMENT_ID] || existing?.deploymentId,
+            buildMethod: (annotations?.[Constants.QS_ANNOTATION_BUILD_METHOD] as AppBuildMethod) || existing?.buildMethod,
+            startedAt: job.status?.startTime ?? existing?.startedAt,
+            completionTime: job.status?.completionTime ?? existing?.completionTime,
+        });
+    }
+
+    /** Rebuilds the cache from Kubernetes. Concurrent callers share one request. */
+    async ensureSeeded(): Promise<void> {
+        if (this.seedPromise) {
+            return this.seedPromise;
+        }
+
+        const seedPromise = (async () => {
+            const builds = await buildService.getAllBuilds();
+            // A restarted watch receives ADDED only for jobs that still exist.
+            // Drop statuses for jobs that disappeared during the restart gap.
+            this.statuses.clear();
+            this.applyBuildJobs(builds);
+        })();
+        this.seedPromise = seedPromise;
+
+        try {
+            await seedPromise;
+        } finally {
+            if (this.seedPromise === seedPromise) {
+                this.seedPromise = null;
+            }
+        }
+    }
+
+    reset(): void {
+        this.statuses.clear();
+        this.subscribers.clear();
+        this.seedPromise = null;
+    }
+
+    private reconcileGroup(workloadType: WorkloadType, workloadId: string, builds: ReconcilableBuild[]): void {
+        const active = builds.find(build => build.status === 'RUNNING')
+            ?? builds.find(build => build.status === 'PENDING');
+        const latestFinished = builds
+            .filter(build => build.status !== 'RUNNING' && build.status !== 'PENDING')
+            .sort((a, b) => this.toTime(b.startTime) - this.toTime(a.startTime))[0];
+        const chosen = active ?? latestFinished;
+        if (!chosen) {
+            this.setNotBuilt(workloadType, workloadId);
+            return;
+        }
+
+        const existing = this.statuses.get(this.key(workloadType, workloadId));
+        this.setStatus({
+            workloadId,
+            workloadType,
+            workloadName: chosen.workloadName || existing?.workloadName || workloadId,
+            projectId: chosen.projectId ?? existing?.projectId ?? '',
+            projectName: chosen.projectName ?? existing?.projectName ?? '',
+            status: chosen.status,
+            buildName: chosen.name,
+            gitCommit: chosen.gitCommit || undefined,
+            gitCommitMessage: chosen.gitCommitMessage || undefined,
+            deploymentId: chosen.deploymentId || undefined,
+            buildMethod: chosen.buildMethod,
+            startedAt: chosen.startTime,
+            completionTime: chosen.completionTime,
+        });
+    }
+
+    private setNotBuilt(workloadType: WorkloadType, workloadId: string): void {
+        const existing = this.statuses.get(this.key(workloadType, workloadId));
+        this.setStatus({
+            workloadId,
+            workloadType,
+            workloadName: existing?.workloadName ?? workloadId,
+            projectId: existing?.projectId ?? '',
+            projectName: existing?.projectName ?? '',
+            status: 'NOT_BUILT',
+        });
+    }
+
+    private setStatus(entry: AppBuildStatusModel): void {
+        const entryKey = this.key(entry.workloadType, entry.workloadId);
+        const existing = this.statuses.get(entryKey);
+        if (existing && this.signature(existing) === this.signature(entry)) {
+            return;
+        }
+        this.statuses.set(entryKey, entry);
+        this.notify(entry);
+    }
+
+    private notify(status: AppBuildStatusModel): void {
+        for (const subscriber of this.subscribers) {
+            try {
+                const result = subscriber(status);
+                if (result && typeof result.then === 'function') {
+                    result.catch((error) => console.error('[BuildStatus] Subscriber error:', error));
+                }
+            } catch (error) {
+                console.error('[BuildStatus] Subscriber error:', error);
+            }
+        }
+    }
+
+    private signature(status: AppBuildStatusModel): string {
+        return [
+            status.status,
+            status.buildName ?? '',
+            status.gitCommit ?? '',
+            status.deploymentId ?? '',
+            status.startedAt ? this.toTime(status.startedAt) : '',
+            status.completionTime ? this.toTime(status.completionTime) : '',
+        ].join('|');
+    }
+
+    private toTime(value?: Date | string): number {
+        if (!value) {
+            return 0;
+        }
+        return value instanceof Date ? value.getTime() : new Date(value).getTime();
+    }
+
+    private key(workloadType: WorkloadType, workloadId: string): string {
+        return `${workloadType}:${workloadId}`;
+    }
+}
+
+const buildStatusService = globalThis.buildStatusServiceInstance ?? new BuildStatusPubSubService();
+globalThis.buildStatusServiceInstance = buildStatusService;
+export default buildStatusService;
diff --git a/src/server/services/standalone-services/build-status.service.unit.spec.ts b/src/server/services/standalone-services/build-status.service.unit.spec.ts
new file mode 100644
index 00000000..28b988cc
--- /dev/null
+++ b/src/server/services/standalone-services/build-status.service.unit.spec.ts
@@ -0,0 +1,241 @@
+vi.mock('@/server/services/build.service', () => ({
+    default: {
+        getAllBuilds: vi.fn(),
+        getBuildsForWorkload: vi.fn(),
+        getJobStatusString: vi.fn(),
+    },
+}));
+
+import buildService from '@/server/services/build.service';
+import buildStatusService from '@/server/services/standalone-services/build-status-pub-sub.service';
+import type { GlobalBuildJobModel } from '@/shared/model/global-build-job.model';
+
+function makeBuild(overrides: Partial<GlobalBuildJobModel> & Pick<GlobalBuildJobModel, 'workloadId' | 'status'>): GlobalBuildJobModel {
+    return {
+        name: `build-${overrides.workloadId}`,
+        startTime: new Date('2024-01-01T00:00:00Z'),
+        workloadType: 'app',
+        gitCommit: 'abc123',
+        gitCommitMessage: 'feat: build',
+        deploymentId: 'deployment-1',
+        projectId: 'project-1',
+        workloadName: 'My App',
+        projectName: 'My Project',
+        ...overrides,
+    } as GlobalBuildJobModel;
+}
+
+describe('BuildStatusService', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+        buildStatusService.reset();
+    });
+
+    describe('applyBuildJobs', () => {
+        it('uses the active build over a finished build for the same workload', () => {
+            buildStatusService.applyBuildJobs([
+                makeBuild({ workloadId: 'app-1', status: 'SUCCEEDED', startTime: new Date('2024-01-01T00:00:00Z') }),
+                makeBuild({ workloadId: 'app-1', status: 'RUNNING', name: 'build-active', startTime: new Date('2024-01-02T00:00:00Z') }),
+            ]);
+
+            const status = buildStatusService.getStatus('app', 'app-1');
+            expect(status?.status).toBe('RUNNING');
+            expect(status?.buildName).toBe('build-active');
+        });
+
+        it('uses the most recent finished build when no build is active', () => {
+            buildStatusService.applyBuildJobs([
+                makeBuild({ workloadId: 'app-1', status: 'FAILED', name: 'build-old', startTime: new Date('2024-01-01T00:00:00Z') }),
+                makeBuild({ workloadId: 'app-1', status: 'SUCCEEDED', name: 'build-new', startTime: new Date('2024-01-02T00:00:00Z') }),
+            ]);
+
+            const status = buildStatusService.getStatus('app', 'app-1');
+            expect(status?.status).toBe('SUCCEEDED');
+            expect(status?.buildName).toBe('build-new');
+        });
+
+        it('keeps builds of different workloads separate', () => {
+            buildStatusService.applyBuildJobs([
+                makeBuild({ workloadId: 'app-1', status: 'SUCCEEDED' }),
+                makeBuild({ workloadId: 'app-2', status: 'FAILED' }),
+            ]);
+
+            expect(buildStatusService.getStatus('app', 'app-1')?.status).toBe('SUCCEEDED');
+            expect(buildStatusService.getStatus('app', 'app-2')?.status).toBe('FAILED');
+        });
+    });
+
+    describe('applyJobEvent', () => {
+        it('creates a RUNNING status from a watch event', async () => {
+            vi.mocked(buildService.getJobStatusString).mockReturnValue('RUNNING');
+
+            await buildStatusService.applyJobEvent('MODIFIED', {
+                metadata: {
+                    name: 'build-1',
+                    annotations: {
+                        'qs-workload-type': 'app',
+                        'qs-app-id': 'app-1',
+                        'qs-project-id': 'project-1',
+                        'qs-git-commit': 'abc123',
+                    },
+                },
+            } as any);
+
+            const status = buildStatusService.getStatus('app', 'app-1');
+            expect(status?.status).toBe('RUNNING');
+            expect(status?.buildName).toBe('build-1');
+        });
+
+        it('notifies subscribers when a status changes', async () => {
+            const listener = vi.fn();
+            buildStatusService.subscribe(listener);
+            vi.mocked(buildService.getJobStatusString).mockReturnValue('RUNNING');
+
+            await buildStatusService.applyJobEvent('MODIFIED', {
+                metadata: { name: 'build-1', annotations: { 'qs-app-id': 'app-1' } },
+            } as any);
+
+            expect(listener).toHaveBeenCalledTimes(1);
+            expect(listener).toHaveBeenCalledWith(expect.objectContaining({ workloadId: 'app-1', status: 'RUNNING' }));
+        });
+
+        it('does not notify subscribers when the status did not change', async () => {
+            const listener = vi.fn();
+            buildStatusService.subscribe(listener);
+            vi.mocked(buildService.getJobStatusString).mockReturnValue('RUNNING');
+            const job = { metadata: { name: 'build-1', annotations: { 'qs-app-id': 'app-1' } } } as any;
+
+            await buildStatusService.applyJobEvent('MODIFIED', job);
+            await buildStatusService.applyJobEvent('MODIFIED', job);
+
+            expect(listener).toHaveBeenCalledTimes(1);
+        });
+
+        it('does not overwrite a newer finished build with an older finished build', async () => {
+            vi.mocked(buildService.getJobStatusString).mockReturnValue('SUCCEEDED');
+            await buildStatusService.applyJobEvent('MODIFIED', {
+                metadata: { name: 'build-new', annotations: { 'qs-app-id': 'app-1' } },
+                status: { startTime: new Date('2024-01-02T00:00:00Z') },
+            } as any);
+
+            vi.mocked(buildService.getJobStatusString).mockReturnValue('FAILED');
+            await buildStatusService.applyJobEvent('MODIFIED', {
+                metadata: { name: 'build-old', annotations: { 'qs-app-id': 'app-1' } },
+                status: { startTime: new Date('2024-01-01T00:00:00Z') },
+            } as any);
+
+            expect(buildStatusService.getStatus('app', 'app-1')?.buildName).toBe('build-new');
+            expect(buildStatusService.getStatus('app', 'app-1')?.status).toBe('SUCCEEDED');
+        });
+
+        it('ignores a terminal event of an older build while a newer build is active', async () => {
+            vi.mocked(buildService.getJobStatusString).mockReturnValue('RUNNING');
+            await buildStatusService.applyJobEvent('MODIFIED', {
+                metadata: { name: 'build-active', annotations: { 'qs-app-id': 'app-1' } },
+            } as any);
+
+            vi.mocked(buildService.getJobStatusString).mockReturnValue('SUCCEEDED');
+            await buildStatusService.applyJobEvent('MODIFIED', {
+                metadata: { name: 'build-old', annotations: { 'qs-app-id': 'app-1' } },
+            } as any);
+
+            expect(buildStatusService.getStatus('app', 'app-1')?.buildName).toBe('build-active');
+            expect(buildStatusService.getStatus('app', 'app-1')?.status).toBe('RUNNING');
+        });
+
+        it('falls back to NOT_BUILT when the tracked build is deleted and no builds remain', async () => {
+            vi.mocked(buildService.getJobStatusString).mockReturnValue('RUNNING');
+            await buildStatusService.applyJobEvent('MODIFIED', {
+                metadata: { name: 'build-1', annotations: { 'qs-app-id': 'app-1' } },
+            } as any);
+            vi.mocked(buildService.getBuildsForWorkload).mockResolvedValue([] as any);
+
+            await buildStatusService.applyJobEvent('DELETED', {
+                metadata: { name: 'build-1', annotations: { 'qs-app-id': 'app-1' } },
+            } as any);
+
+            expect(buildStatusService.getStatus('app', 'app-1')?.status).toBe('NOT_BUILT');
+        });
+
+        it('recomputes the status from remaining builds when the tracked build is deleted', async () => {
+            vi.mocked(buildService.getJobStatusString).mockReturnValue('RUNNING');
+            await buildStatusService.applyJobEvent('MODIFIED', {
+                metadata: { name: 'build-active', annotations: { 'qs-app-id': 'app-1' } },
+            } as any);
+            vi.mocked(buildService.getBuildsForWorkload).mockResolvedValue([
+                makeBuild({ workloadId: 'app-1', status: 'FAILED', name: 'build-older', startTime: new Date('2024-01-01T00:00:00Z') }),
+            ] as any);
+
+            await buildStatusService.applyJobEvent('DELETED', {
+                metadata: { name: 'build-active', annotations: { 'qs-app-id': 'app-1' } },
+            } as any);
+
+            expect(buildStatusService.getStatus('app', 'app-1')?.status).toBe('FAILED');
+            expect(buildStatusService.getStatus('app', 'app-1')?.buildName).toBe('build-older');
+        });
+    });
+
+    describe('ensureSeeded', () => {
+        it('seeds from the build service and only lists once for concurrent calls', async () => {
+            vi.mocked(buildService.getAllBuilds).mockResolvedValue([
+                makeBuild({ workloadId: 'app-1', status: 'SUCCEEDED' }),
+            ] as any);
+
+            await Promise.all([
+                buildStatusService.ensureSeeded(),
+                buildStatusService.ensureSeeded(),
+            ]);
+
+            expect(buildService.getAllBuilds).toHaveBeenCalledTimes(1);
+            expect(buildStatusService.getStatus('app', 'app-1')?.status).toBe('SUCCEEDED');
+        });
+
+        it('rebuilds the cache on every completed seed', async () => {
+            vi.mocked(buildService.getAllBuilds)
+                .mockResolvedValueOnce([makeBuild({ workloadId: 'app-1', status: 'RUNNING' })] as any)
+                .mockResolvedValueOnce([makeBuild({ workloadId: 'app-2', status: 'SUCCEEDED' })] as any);
+
+            await buildStatusService.ensureSeeded();
+            await buildStatusService.ensureSeeded();
+
+            expect(buildService.getAllBuilds).toHaveBeenCalledTimes(2);
+            expect(buildStatusService.getStatus('app', 'app-1')).toBeUndefined();
+            expect(buildStatusService.getStatus('app', 'app-2')?.status).toBe('SUCCEEDED');
+        });
+
+        it('propagates seeding errors so callers do not report stale statuses', async () => {
+            vi.mocked(buildService.getAllBuilds).mockRejectedValueOnce(new Error('Kubernetes unavailable'));
+
+            await expect(buildStatusService.ensureSeeded()).rejects.toThrow('Kubernetes unavailable');
+        });
+    });
+
+    describe('subscribe', () => {
+        it('isolates a throwing subscriber from other subscribers', async () => {
+            const bad = vi.fn(() => { throw new Error('boom'); });
+            const good = vi.fn();
+            buildStatusService.subscribe(bad);
+            buildStatusService.subscribe(good);
+            vi.mocked(buildService.getJobStatusString).mockReturnValue('RUNNING');
+
+            await buildStatusService.applyJobEvent('MODIFIED', {
+                metadata: { name: 'build-1', annotations: { 'qs-app-id': 'app-1' } },
+            } as any);
+
+            expect(good).toHaveBeenCalledTimes(1);
+        });
+
+        it('stops notifying after unsubscribe', async () => {
+            const listener = vi.fn();
+            const unsubscribe = buildStatusService.subscribe(listener);
+            unsubscribe();
+            vi.mocked(buildService.getJobStatusString).mockReturnValue('RUNNING');
+
+            await buildStatusService.applyJobEvent('MODIFIED', {
+                metadata: { name: 'build-1', annotations: { 'qs-app-id': 'app-1' } },
+            } as any);
+
+            expect(listener).not.toHaveBeenCalled();
+        });
+    });
+});
diff --git a/src/server/services/standalone-services/build-watch.service.ts b/src/server/services/standalone-services/build-watch.service.ts
index 5c2a2e01..86d21a81 100644
--- a/src/server/services/standalone-services/build-watch.service.ts
+++ b/src/server/services/standalone-services/build-watch.service.ts
@@ -12,6 +12,7 @@ import { AppBuildMethod } from '@/shared/model/app-source-info.model';
 import appGitSshKeyService from '../app-git-ssh-key.service';
 import { RollbackAnnotationUtils } from '@/shared/utils/rollback-annotation.utils';
 import { AppBuildMethodUtils } from '@/shared/utils/app-build-method.utils';
+import buildStatusService from './build-status-pub-sub.service';
 
 declare global {
     var buildWatchServiceInstance: BuildWatchService | undefined;
@@ -29,6 +30,14 @@ class BuildWatchService {
         this.isWatchRunning = true;
         console.log('[BuildWatch] Starting build job watch...');
 
+        try {
+            await buildStatusService.ensureSeeded();
+        } catch (error) {
+            // The watch must keep processing build completions when its status
+            // cache cannot be rebuilt. The SSE route will surface the seed error.
+            console.error('[BuildWatch] Failed to seed build statuses:', error);
+        }
+
         const kc = k3s.getKubeConfig();
         const watch = new k8s.Watch(kc);
 
@@ -36,12 +45,13 @@ class BuildWatchService {
             `/apis/batch/v1/namespaces/${BUILD_NAMESPACE}/jobs`,
             {},
             async (type: string, apiObj: unknown) => {
+                const job = apiObj as V1Job;
                 try {
-                    const job = apiObj as V1Job;
-                    await this.handleJobEvent(job);
+                    await buildStatusService.applyJobEvent(type, job);
                 } catch (e) {
-                    console.error('[BuildWatch] Error handling job event:', e);
+                    console.error('[BuildWatch] Status update failed:', e);
                 }
+                await this.handleJobEvent(job);
             },
             (err: unknown) => {
                 if (err) console.error('[BuildWatch] Watch error:', err);
diff --git a/src/server/services/standalone-services/build-watch.service.unit.spec.ts b/src/server/services/standalone-services/build-watch.service.unit.spec.ts
index d1deb5c7..92d346a8 100644
--- a/src/server/services/standalone-services/build-watch.service.unit.spec.ts
+++ b/src/server/services/standalone-services/build-watch.service.unit.spec.ts
@@ -1,7 +1,12 @@
+const k8sMocks = vi.hoisted(() => ({
+    watch: vi.fn(),
+    abort: vi.fn(),
+}));
+
 vi.mock('@kubernetes/client-node', async () => {
     const actual = await vi.importActual<typeof import('@kubernetes/client-node')>('@kubernetes/client-node');
     class WatchMock {
-        watch = vi.fn().mockResolvedValue({ abort: vi.fn() });
+        watch = k8sMocks.watch;
     }
     return {
         ...actual,
@@ -20,6 +25,8 @@ vi.mock('@/server/adapter/kubernetes-api.adapter', () => ({
 vi.mock('@/server/services/build.service', () => ({
     default: {
         getJobStatusString: vi.fn(),
+        getAllBuilds: vi.fn().mockResolvedValue([]),
+        getBuildsForWorkload: vi.fn().mockResolvedValue([]),
     },
 }));
 vi.mock('@/server/services/deployment.service', () => ({
@@ -44,9 +51,16 @@ vi.mock('@/server/services/app-git-ssh-key.service', () => ({
         deleteTemporaryBuildSecret: vi.fn(),
     },
 }));
+vi.mock('@/server/services/standalone-services/build-status-pub-sub.service', () => ({
+    default: {
+        ensureSeeded: vi.fn().mockResolvedValue(undefined),
+        applyJobEvent: vi.fn().mockResolvedValue(undefined),
+    },
+}));
 
 import buildService from '@/server/services/build.service';
 import buildWatchService from '@/server/services/standalone-services/build-watch.service';
+import buildStatusService from '@/server/services/standalone-services/build-status-pub-sub.service';
 import deploymentService from '@/server/services/deployment.service';
 import appService from '@/server/services/app.service';
 import appGitSshKeyService from '@/server/services/app-git-ssh-key.service';
@@ -55,6 +69,43 @@ describe('BuildWatchService', () => {
     beforeEach(() => {
         vi.clearAllMocks();
         (buildWatchService as any).processedJobs.clear();
+        (buildWatchService as any).isWatchRunning = false;
+        k8sMocks.watch.mockResolvedValue({ abort: k8sMocks.abort });
+    });
+
+    it('seeds the build status service and forwards job events to it', async () => {
+        vi.mocked(buildService.getJobStatusString).mockReturnValue('PENDING');
+
+        await buildWatchService.startWatch();
+
+        expect(buildStatusService.ensureSeeded).toHaveBeenCalledTimes(1);
+        expect(k8sMocks.watch).toHaveBeenCalledTimes(1);
+
+        const eventHandler = k8sMocks.watch.mock.calls[0][2] as (type: string, job: unknown) => Promise<void>;
+        const job = { metadata: { name: 'build-1', annotations: { 'qs-app-id': 'app-1' } } };
+        await eventHandler('MODIFIED', job);
+
+        expect(buildStatusService.applyJobEvent).toHaveBeenCalledWith('MODIFIED', job);
+    });
+
+    it('still handles a completed build when status tracking fails', async () => {
+        vi.mocked(buildStatusService.applyJobEvent).mockRejectedValueOnce(new Error('status unavailable'));
+        vi.mocked(buildService.getJobStatusString).mockReturnValue('SUCCEEDED');
+        vi.mocked(appService.getExtendedById).mockResolvedValue({ buildMethod: 'RAILPACK' } as any);
+
+        await buildWatchService.startWatch();
+        const eventHandler = k8sMocks.watch.mock.calls[0][2] as (type: string, job: unknown) => Promise<void>;
+        await eventHandler('MODIFIED', {
+            metadata: {
+                name: 'build-1',
+                annotations: {
+                    'qs-deplyoment-id': 'deployment-1',
+                    'qs-app-id': 'app-1',
+                },
+            },
+        });
+
+        expect(deploymentService.createDeployment).toHaveBeenCalledTimes(1);
     });
 
     it('ignores pending jobs and does not trigger deployment work', async () => {
diff --git a/src/server/services/volume-backup.service.ts b/src/server/services/volume-backup.service.ts
index 6d2e8752..d714b202 100644
--- a/src/server/services/volume-backup.service.ts
+++ b/src/server/services/volume-backup.service.ts
@@ -47,6 +47,29 @@ class VolumeBackupService {
         });
     }
 
+    async getWithVolumeAndAppById(id: string) {
+        return dataAccess.client.volumeBackup.findFirstOrThrow({
+            where: { id },
+            include: {
+                volume: {
+                    include: { app: true },
+                },
+            },
+        });
+    }
+
+    async getAppIdById(id: string) {
+        const volumeBackup = await dataAccess.client.volumeBackup.findFirstOrThrow({
+            where: { id },
+            select: {
+                volume: {
+                    select: { appId: true },
+                },
+            },
+        });
+        return volumeBackup.volume.appId;
+    }
+
     async save(item: Prisma.VolumeBackupUncheckedCreateInput | Prisma.VolumeBackupUncheckedUpdateInput) {
         let savedItem: VolumeBackup;
         try {
diff --git a/src/server/utils/env-var.utils.ts b/src/server/utils/env-var.utils.ts
index 9cd60bd9..99adac75 100644
--- a/src/server/utils/env-var.utils.ts
+++ b/src/server/utils/env-var.utils.ts
@@ -1,21 +1 @@
-import { AppExtendedModel } from "@/shared/model/app-extended.model";
-
-export class EnvVarUtils {
-    static parseEnvVariables(app: AppExtendedModel) {
-        return app.envVars ? app.envVars.split('\n').filter(x => !!x).map(env => {
-            const [name] = env.split('=');
-            const value = env.replace(`${name}=`, '');
-            return { name, value };
-        }) : [];
-    }
-
-    static parseBuildArgs(app: AppExtendedModel) {
-        return app.buildArgs ? app.buildArgs.split('\n').filter(x => !!x).map(buildArg => {
-            const separatorIndex = buildArg.indexOf('=');
-            if (separatorIndex === -1) {
-                return { name: buildArg, value: '' };
-            }
-            return { name: buildArg.slice(0, separatorIndex), value: buildArg.slice(separatorIndex + 1) };
-        }) : [];
-    }
-}
\ No newline at end of file
+export { EnvVarUtils } from '@/shared/utils/env-var.utils';
diff --git a/src/server/utils/fs.utils.ts b/src/server/utils/fs.utils.ts
index 1bbc8aa7..e2424d21 100644
--- a/src/server/utils/fs.utils.ts
+++ b/src/server/utils/fs.utils.ts
@@ -2,10 +2,6 @@ import fs from "fs"
 
 export class FsUtils {
 
-    static listFilesInDirAsync(appLogsFolder: string) {
-        return fs.promises.readdir(appLogsFolder);
-    }
-
     static getFileStats(file: string) {
         return fs.promises.stat(file);
     }
diff --git a/src/server/utils/path.utils.ts b/src/server/utils/path.utils.ts
index deede443..bd80c5df 100644
--- a/src/server/utils/path.utils.ts
+++ b/src/server/utils/path.utils.ts
@@ -31,19 +31,6 @@ export class PathUtils {
         return path.join(this.tempDataRoot, 'backup-restore');
     }
 
-    static get persistedLogsPath() {
-        return path.join(this.internalDataRoot, 'app-logs');
-    }
-
-    static appLogsFolder(appId: string): string {
-        return path.join(this.persistedLogsPath, `${appId}`);
-    }
-
-    static appLogsFile(appId: string, date: Date): string {
-        const dateString = date.toISOString().split('T')[0];
-        return path.join(this.appLogsFolder(appId), `${appId}_${dateString}.tar.gz`);
-    }
-
     static gitRootPathForApp(appId: string): string {
         return path.join(PathUtils.gitRootPath, this.convertIdToFolderFriendlyName(appId));
     }
diff --git a/src/shared/model/app-build-status.model.ts b/src/shared/model/app-build-status.model.ts
new file mode 100644
index 00000000..d036acb4
--- /dev/null
+++ b/src/shared/model/app-build-status.model.ts
@@ -0,0 +1,29 @@
+import { z } from "zod";
+import { appBuildMethodZodModel } from "./app-source-info.model";
+import { buildJobStatusEnumZod } from "./build-job";
+import { zodWorkloadType } from "./runtime-type.model";
+
+export const appBuildStatusEnumZod = z.union([buildJobStatusEnumZod, z.literal('NOT_BUILT')]);
+export type AppBuildStatus = z.infer<typeof appBuildStatusEnumZod>;
+
+export const appBuildStatusZodModel = z.object({
+    workloadId: z.string(),
+    workloadType: zodWorkloadType,
+    workloadName: z.string(),
+    projectId: z.string(),
+    projectName: z.string(),
+    status: appBuildStatusEnumZod,
+    buildName: z.string().optional(),
+    gitCommit: z.string().optional(),
+    gitCommitMessage: z.string().optional(),
+    deploymentId: z.string().optional(),
+    buildMethod: appBuildMethodZodModel.optional(),
+    startedAt: z.date().optional(),
+    completionTime: z.date().optional(),
+});
+
+export type AppBuildStatusModel = z.infer<typeof appBuildStatusZodModel>;
+
+export function isActiveBuildStatus(status: AppBuildStatus): boolean {
+    return status === 'RUNNING' || status === 'PENDING';
+}
diff --git a/src/shared/model/downloadable-app-logs.model.ts b/src/shared/model/downloadable-app-logs.model.ts
deleted file mode 100644
index a185abf9..00000000
--- a/src/shared/model/downloadable-app-logs.model.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export interface DownloadableAppLogsModel {
-    appId: string;
-    date: Date;
-}
diff --git a/src/shared/utils/env-var.utils.ts b/src/shared/utils/env-var.utils.ts
new file mode 100644
index 00000000..96438213
--- /dev/null
+++ b/src/shared/utils/env-var.utils.ts
@@ -0,0 +1,36 @@
+import type { AppExtendedModel } from '@/shared/model/app-extended.model';
+
+type EnvVarSource = Pick<AppExtendedModel, 'envVars' | 'buildArgs'>;
+
+export class EnvVarUtils {
+    static parseEnvVariables(app: EnvVarSource) {
+        return app.envVars
+            ? app.envVars
+                .split('\n')
+                .filter((value) => !!value)
+                .map((env) => {
+                    const [name] = env.split('=');
+                    const value = env.replace(`${name}=`, '');
+                    return { name, value };
+                })
+            : [];
+    }
+
+    static parseBuildArgs(app: EnvVarSource) {
+        return app.buildArgs
+            ? app.buildArgs
+                .split('\n')
+                .filter((value) => !!value)
+                .map((buildArg) => {
+                    const separatorIndex = buildArg.indexOf('=');
+                    if (separatorIndex === -1) {
+                        return { name: buildArg, value: '' };
+                    }
+                    return {
+                        name: buildArg.slice(0, separatorIndex),
+                        value: buildArg.slice(separatorIndex + 1),
+                    };
+                })
+            : [];
+    }
+}
diff --git a/yarn.lock b/yarn.lock
index bc8a5293..c6919736 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7398,10 +7398,10 @@ lru.min@^1.0.0:
   resolved "https://registry.yarnpkg.com/lru.min/-/lru.min-1.1.3.tgz#c8c3d001dfb4cbe5b8d1f4bea207d4a320e5d76f"
   integrity sha512-Lkk/vx6ak3rYkRR0Nhu4lFUT2VDnQSxBe8Hbl7f36358p6ow8Bnvr8lrLt98H8J1aGxfhbX4Fs5tYg2+FTwr5Q==
 
-lucide-react@^0.465.0:
-  version "0.465.0"
-  resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.465.0.tgz#3f98d40f7b7ac5266c055aaf582c303b07f84de2"
-  integrity sha512-uV7WEqbwaCcc+QjAxIhAvkAr3kgwkkYID3XptCHll72/F7NZlk6ONmJYpk+Xqx5Q0r/8wiOjz73H1BYbl8Z8iw==
+lucide-react@^1.47.0:
+  version "1.47.0"
+  resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-1.47.0.tgz#a358c1362b0377928ce58908ed9c884937d5b026"
+  integrity sha512-o8C23aXpNQypRY73W7fW02EyvWJinEMXgKeGjFoKym0zj3Q73hD97A1IQps1g8C14HTGsOpZL0Am+xjfgFZAbg==
 
 luxon@^3.2.1:
   version "3.5.0"