From e8d1658c0a0da04184171224600a882ede6bcaab Mon Sep 17 00:00:00 2001
From: Nicolas Meienberger <github@thisprops.com>
Date: Thu, 2 Apr 2026 18:35:43 +0200
Subject: [PATCH] refactor: dedicated edit page for notifications

---
 .../components/create-notification-form.tsx   | 138 ++++----
 .../notification-forms/email-form.tsx         |   5 +-
 .../notification-forms/generic-form.tsx       |  11 +-
 .../notification-forms/ntfy-form.tsx          |   5 +-
 .../notification-forms/pushover-form.tsx      |   4 +-
 .../routes/edit-notification.tsx              |  90 +++++
 .../routes/notification-details.tsx           | 322 ++++++++++++------
 app/routeTree.gen.ts                          |  69 ++--
 .../notifications/$notificationId/edit.tsx    |  38 +++
 .../index.tsx}                                |   4 +-
 10 files changed, 484 insertions(+), 202 deletions(-)
 create mode 100644 app/client/modules/notifications/routes/edit-notification.tsx
 create mode 100644 app/routes/(dashboard)/notifications/$notificationId/edit.tsx
 rename app/routes/(dashboard)/notifications/{$notificationId.tsx => $notificationId/index.tsx} (92%)

diff --git a/app/client/modules/notifications/components/create-notification-form.tsx b/app/client/modules/notifications/components/create-notification-form.tsx
index b476045c..21997451 100644
--- a/app/client/modules/notifications/components/create-notification-form.tsx
+++ b/app/client/modules/notifications/components/create-notification-form.tsx
@@ -59,6 +59,7 @@ type Props = {
 	initialValues?: Partial<NotificationFormValues>;
 	formId?: string;
 	className?: string;
+	readOnly?: boolean;
 };
 
 const defaultValuesForType = {
@@ -122,7 +123,14 @@ const defaultValuesForType = {
 	},
 };
 
-export const CreateNotificationForm = ({ onSubmit, mode = "create", initialValues, formId, className }: Props) => {
+export const CreateNotificationForm = ({
+	onSubmit,
+	mode = "create",
+	initialValues,
+	formId,
+	className,
+	readOnly = false,
+}: Props) => {
 	const form = useForm<NotificationFormValues>({
 		resolver: zodResolver(formSchema, undefined, { raw: true }),
 		defaultValues: initialValues || {
@@ -145,72 +153,74 @@ export const CreateNotificationForm = ({ onSubmit, mode = "create", initialValue
 				onSubmit={form.handleSubmit(onSubmit, scrollToFirstError)}
 				className={cn("space-y-4", className)}
 			>
-				<FormField
-					control={form.control}
-					name="name"
-					render={({ field }) => (
-						<FormItem>
-							<FormLabel>Name</FormLabel>
-							<FormControl>
-								<Input {...field} placeholder="My notification" max={32} min={2} />
-							</FormControl>
-							<FormDescription>Unique identifier for this notification destination.</FormDescription>
-							<FormMessage />
-						</FormItem>
-					)}
-				/>
-
-				<FormField
-					control={form.control}
-					name="type"
-					render={({ field }) => (
-						<FormItem>
-							<FormLabel>Type</FormLabel>
-							<Select
-								onValueChange={(value) => {
-									field.onChange(value);
-									if (!initialValues) {
-										form.reset({
-											name: form.getValues().name || "",
-											...defaultValuesForType[value as keyof typeof defaultValuesForType],
-										});
-									}
-								}}
-								value={field.value ?? ""}
-								disabled={mode === "update"}
-							>
+				<fieldset disabled={readOnly} className="space-y-4">
+					<FormField
+						control={form.control}
+						name="name"
+						render={({ field }) => (
+							<FormItem>
+								<FormLabel>Name</FormLabel>
 								<FormControl>
-									<SelectTrigger className={mode === "update" ? "bg-gray-50" : ""}>
-										<SelectValue placeholder="Select notification type" />
-									</SelectTrigger>
+									<Input {...field} placeholder="My notification" max={32} min={2} disabled={readOnly} />
 								</FormControl>
-								<SelectContent>
-									<SelectItem value="email">Email (SMTP)</SelectItem>
-									<SelectItem value="slack">Slack</SelectItem>
-									<SelectItem value="discord">Discord</SelectItem>
-									<SelectItem value="gotify">Gotify</SelectItem>
-									<SelectItem value="ntfy">Ntfy</SelectItem>
-									<SelectItem value="pushover">Pushover</SelectItem>
-									<SelectItem value="telegram">Telegram</SelectItem>
-									<SelectItem value="generic">Generic Webhook</SelectItem>
-									<SelectItem value="custom">Custom (Shoutrrr URL)</SelectItem>
-								</SelectContent>
-							</Select>
-							<FormDescription>Choose the notification delivery method.</FormDescription>
-							<FormMessage />
-						</FormItem>
-					)}
-				/>
+								<FormDescription>Unique identifier for this notification destination.</FormDescription>
+								<FormMessage />
+							</FormItem>
+						)}
+					/>
 
-				{watchedType === "email" && <EmailForm form={form} />}
-				{watchedType === "slack" && <SlackForm form={form} />}
-				{watchedType === "discord" && <DiscordForm form={form} />}
-				{watchedType === "gotify" && <GotifyForm form={form} />}
-				{watchedType === "ntfy" && <NtfyForm form={form} />}
-				{watchedType === "pushover" && <PushoverForm form={form} />}
-				{watchedType === "telegram" && <TelegramForm form={form} />}
-				{watchedType === "generic" && <GenericForm form={form} />}
-				{watchedType === "custom" && <CustomForm form={form} />}
+					<FormField
+						control={form.control}
+						name="type"
+						render={({ field }) => (
+							<FormItem>
+								<FormLabel>Type</FormLabel>
+								<Select
+									onValueChange={(value) => {
+										field.onChange(value);
+										if (!initialValues) {
+											form.reset({
+												name: form.getValues().name || "",
+												...defaultValuesForType[value as keyof typeof defaultValuesForType],
+											});
+										}
+									}}
+									value={field.value ?? ""}
+									disabled={mode === "update" || readOnly}
+								>
+									<FormControl>
+										<SelectTrigger className={mode === "update" || readOnly ? "bg-gray-50" : ""}>
+											<SelectValue placeholder="Select notification type" />
+										</SelectTrigger>
+									</FormControl>
+									<SelectContent>
+										<SelectItem value="email">Email (SMTP)</SelectItem>
+										<SelectItem value="slack">Slack</SelectItem>
+										<SelectItem value="discord">Discord</SelectItem>
+										<SelectItem value="gotify">Gotify</SelectItem>
+										<SelectItem value="ntfy">Ntfy</SelectItem>
+										<SelectItem value="pushover">Pushover</SelectItem>
+										<SelectItem value="telegram">Telegram</SelectItem>
+										<SelectItem value="generic">Generic Webhook</SelectItem>
+										<SelectItem value="custom">Custom (Shoutrrr URL)</SelectItem>
+									</SelectContent>
+								</Select>
+								<FormDescription>Choose the notification delivery method.</FormDescription>
+								<FormMessage />
+							</FormItem>
+						)}
+					/>
+
+					{watchedType === "email" && <EmailForm form={form} readOnly={readOnly} />}
+					{watchedType === "slack" && <SlackForm form={form} />}
+					{watchedType === "discord" && <DiscordForm form={form} />}
+					{watchedType === "gotify" && <GotifyForm form={form} />}
+					{watchedType === "ntfy" && <NtfyForm form={form} readOnly={readOnly} />}
+					{watchedType === "pushover" && <PushoverForm form={form} readOnly={readOnly} />}
+					{watchedType === "telegram" && <TelegramForm form={form} />}
+					{watchedType === "generic" && <GenericForm form={form} readOnly={readOnly} />}
+					{watchedType === "custom" && <CustomForm form={form} />}
+				</fieldset>
 			</form>
 		</Form>
 	);
diff --git a/app/client/modules/notifications/components/notification-forms/email-form.tsx b/app/client/modules/notifications/components/notification-forms/email-form.tsx
index 6231b5e3..9843b556 100644
--- a/app/client/modules/notifications/components/notification-forms/email-form.tsx
+++ b/app/client/modules/notifications/components/notification-forms/email-form.tsx
@@ -7,9 +7,10 @@ import type { NotificationFormValues } from "../create-notification-form";
 
 type Props = {
 	form: UseFormReturn<NotificationFormValues>;
+	readOnly?: boolean;
 };
 
-export const EmailForm = ({ form }: Props) => {
+export const EmailForm = ({ form, readOnly = false }: Props) => {
 	return (
 		<>
 			<FormField
@@ -128,7 +129,7 @@ export const EmailForm = ({ form }: Props) => {
 				render={({ field }) => (
 					<FormItem className="flex flex-row items-center space-x-3">
 						<FormControl>
-							<Checkbox checked={field.value} onCheckedChange={field.onChange} />
+							<Checkbox checked={field.value} disabled={readOnly} onCheckedChange={field.onChange} />
 						</FormControl>
 						<div className="space-y-1 leading-none">
 							<FormLabel>Use TLS</FormLabel>
diff --git a/app/client/modules/notifications/components/notification-forms/generic-form.tsx b/app/client/modules/notifications/components/notification-forms/generic-form.tsx
index a62ce1e7..15558340 100644
--- a/app/client/modules/notifications/components/notification-forms/generic-form.tsx
+++ b/app/client/modules/notifications/components/notification-forms/generic-form.tsx
@@ -10,6 +10,7 @@ import type { NotificationFormValues } from "../create-notification-form";
 
 type Props = {
 	form: UseFormReturn<NotificationFormValues>;
+	readOnly?: boolean;
 };
 
 const WebhookPreview = ({ values }: { values: Partial<NotificationFormValues> }) => {
@@ -48,7 +49,7 @@ ${body}`;
 	);
 };
 
-export const GenericForm = ({ form }: Props) => {
+export const GenericForm = ({ form, readOnly = false }: Props) => {
 	const watchedValues = useWatch({ control: form.control });
 	const useJson = useWatch({ control: form.control, name: "useJson" });
 
@@ -74,7 +75,7 @@ export const GenericForm = ({ form }: Props) => {
 				render={({ field }) => (
 					<FormItem>
 						<FormLabel>Method</FormLabel>
-						<Select onValueChange={field.onChange} value={field.value ?? ""}>
+						<Select disabled={readOnly} onValueChange={field.onChange} value={field.value ?? ""}>
 							<FormControl>
 								<SelectTrigger>
 									<SelectValue placeholder="Select method" />
@@ -127,7 +128,11 @@ export const GenericForm = ({ form }: Props) => {
 				render={({ field }) => (
 					<FormItem className="flex flex-row items-center space-x-3">
 						<FormControl>
-							<Checkbox checked={field.value} onCheckedChange={(checked) => field.onChange(checked)} />
+							<Checkbox
+								checked={field.value}
+								disabled={readOnly}
+								onCheckedChange={(checked) => field.onChange(checked)}
+							/>
 						</FormControl>
 						<div className="space-y-1 leading-none">
 							<FormLabel>Use JSON Template</FormLabel>
diff --git a/app/client/modules/notifications/components/notification-forms/ntfy-form.tsx b/app/client/modules/notifications/components/notification-forms/ntfy-form.tsx
index 16ecec98..979f2901 100644
--- a/app/client/modules/notifications/components/notification-forms/ntfy-form.tsx
+++ b/app/client/modules/notifications/components/notification-forms/ntfy-form.tsx
@@ -7,9 +7,10 @@ import type { NotificationFormValues } from "../create-notification-form";
 
 type Props = {
 	form: UseFormReturn<NotificationFormValues>;
+	readOnly?: boolean;
 };
 
-export const NtfyForm = ({ form }: Props) => {
+export const NtfyForm = ({ form, readOnly = false }: Props) => {
 	return (
 		<>
 			<FormField
@@ -90,7 +91,7 @@ export const NtfyForm = ({ form }: Props) => {
 				render={({ field }) => (
 					<FormItem>
 						<FormLabel>Priority</FormLabel>
-						<Select onValueChange={field.onChange} value={String(field.value)}>
+						<Select disabled={readOnly} onValueChange={field.onChange} value={String(field.value)}>
 							<FormControl>
 								<SelectTrigger>
 									<SelectValue placeholder="Select priority" />
diff --git a/app/client/modules/notifications/components/notification-forms/pushover-form.tsx b/app/client/modules/notifications/components/notification-forms/pushover-form.tsx
index e49dd2e6..1dfd1f5a 100644
--- a/app/client/modules/notifications/components/notification-forms/pushover-form.tsx
+++ b/app/client/modules/notifications/components/notification-forms/pushover-form.tsx
@@ -7,9 +7,10 @@ import type { NotificationFormValues } from "../create-notification-form";
 
 type Props = {
 	form: UseFormReturn<NotificationFormValues>;
+	readOnly?: boolean;
 };
 
-export const PushoverForm = ({ form }: Props) => {
+export const PushoverForm = ({ form, readOnly = false }: Props) => {
 	return (
 		<>
 			<FormField
@@ -61,6 +62,7 @@ export const PushoverForm = ({ form }: Props) => {
 					<FormItem>
 						<FormLabel>Priority</FormLabel>
 						<Select
+							disabled={readOnly}
 							onValueChange={(value) => field.onChange(Number(value))}
 							defaultValue={String(field.value)}
 							value={String(field.value)}
diff --git a/app/client/modules/notifications/routes/edit-notification.tsx b/app/client/modules/notifications/routes/edit-notification.tsx
new file mode 100644
index 00000000..b607f5eb
--- /dev/null
+++ b/app/client/modules/notifications/routes/edit-notification.tsx
@@ -0,0 +1,90 @@
+import { useMutation, useSuspenseQuery } from "@tanstack/react-query";
+import { useId } from "react";
+import { useNavigate } from "@tanstack/react-router";
+import { Bell, Save } from "lucide-react";
+import { toast } from "sonner";
+import {
+	getNotificationDestinationOptions,
+	updateNotificationDestinationMutation,
+} from "~/client/api-client/@tanstack/react-query.gen";
+import { Alert, AlertDescription } from "~/client/components/ui/alert";
+import { Button } from "~/client/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "~/client/components/ui/card";
+import { parseError } from "~/client/lib/errors";
+import { CreateNotificationForm, type NotificationFormValues } from "../components/create-notification-form";
+
+export function EditNotificationPage({ notificationId }: { notificationId: string }) {
+	const navigate = useNavigate();
+	const formId = useId();
+
+	const { data } = useSuspenseQuery({
+		...getNotificationDestinationOptions({ path: { id: notificationId } }),
+	});
+
+	const updateDestination = useMutation({
+		...updateNotificationDestinationMutation(),
+		onSuccess: () => {
+			toast.success("Notification destination updated successfully");
+			void navigate({ to: `/notifications/${data.id}` });
+		},
+		onError: (error) => {
+			toast.error("Failed to update notification destination", {
+				description: parseError(error)?.message,
+			});
+		},
+	});
+
+	const handleSubmit = (values: NotificationFormValues) => {
+		updateDestination.mutate({
+			path: { id: String(data.id) },
+			body: {
+				name: values.name,
+				config: values,
+			},
+		});
+	};
+
+	return (
+		<div className="container mx-auto space-y-6">
+			<Card>
+				<CardHeader>
+					<div className="flex items-center gap-3">
+						<div className="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
+							<Bell className="w-5 h-5 text-primary" />
+						</div>
+						<CardTitle>Edit Notification Destination</CardTitle>
+					</div>
+				</CardHeader>
+				<CardContent className="space-y-6">
+					{updateDestination.isError && (
+						<Alert variant="destructive">
+							<AlertDescription>
+								<strong>Failed to update notification destination:</strong>
+								<br />
+								{parseError(updateDestination.error)?.message}
+							</AlertDescription>
+						</Alert>
+					)}
+					<CreateNotificationForm
+						mode="update"
+						formId={formId}
+						onSubmit={handleSubmit}
+						initialValues={{
+							...data.config,
+							name: data.name,
+						}}
+					/>
+					<div className="flex justify-end gap-2 pt-4 border-t">
+						<Button type="button" variant="secondary" onClick={() => navigate({ to: `/notifications/${data.id}` })}>
+							Cancel
+						</Button>
+						<Button type="submit" form={formId} loading={updateDestination.isPending}>
+							<Save className="h-4 w-4 mr-2" />
+							Save Changes
+						</Button>
+					</div>
+				</CardContent>
+			</Card>
+		</div>
+	);
+}
diff --git a/app/client/modules/notifications/routes/notification-details.tsx b/app/client/modules/notifications/routes/notification-details.tsx
index ca9d0222..bd72c266 100644
--- a/app/client/modules/notifications/routes/notification-details.tsx
+++ b/app/client/modules/notifications/routes/notification-details.tsx
@@ -1,11 +1,10 @@
 import { useMutation, useSuspenseQuery } from "@tanstack/react-query";
 import { toast } from "sonner";
-import { useState, useId } from "react";
+import { useState } from "react";
 import {
 	deleteNotificationDestinationMutation,
 	getNotificationDestinationOptions,
 	testNotificationDestinationMutation,
-	updateNotificationDestinationMutation,
 } from "~/client/api-client/@tanstack/react-query.gen";
 import { Button } from "~/client/components/ui/button";
 import {
@@ -22,19 +21,159 @@ import {
 	DropdownMenu,
 	DropdownMenuContent,
 	DropdownMenuItem,
+	DropdownMenuSeparator,
 	DropdownMenuTrigger,
 } from "~/client/components/ui/dropdown-menu";
+import { Badge } from "~/client/components/ui/badge";
+import { Card, CardTitle } from "~/client/components/ui/card";
+import { Separator } from "~/client/components/ui/separator";
 import { parseError } from "~/client/lib/errors";
+import { formatDateTime } from "~/client/lib/datetime";
 import { cn } from "~/client/lib/utils";
-import { Card, CardContent, CardHeader, CardTitle } from "~/client/components/ui/card";
-import { Bell, ChevronDown, Save, TestTube2, Trash2 } from "lucide-react";
-import { Alert, AlertDescription } from "~/client/components/ui/alert";
-import { CreateNotificationForm, type NotificationFormValues } from "../components/create-notification-form";
+import {
+	Bell,
+	Bot,
+	ChevronDown,
+	Globe,
+	Hash,
+	Key,
+	Link,
+	Lock,
+	Mail,
+	AtSign,
+	MessageSquare,
+	Pencil,
+	Server,
+	Settings,
+	Shield,
+	Smile,
+	TestTube2,
+	Trash2,
+	Users,
+} from "lucide-react";
 import { useNavigate } from "@tanstack/react-router";
+import type { GetNotificationDestinationResponse } from "~/client/api-client/types.gen";
+
+type NotificationConfig = GetNotificationDestinationResponse["config"];
+type Props = {
+	icon: React.ReactNode;
+	label: string;
+	value: string;
+	mono?: boolean;
+};
+
+function ConfigRow({ icon, label, value, mono }: Props) {
+	return (
+		<div className="flex items-center gap-3 py-3 first:pt-0 last:pb-0">
+			<span className="text-muted-foreground shrink-0">{icon}</span>
+			<span className="text-sm text-muted-foreground w-40 shrink-0">{label}</span>
+			<span className={cn("text-sm break-all", { "font-mono bg-muted/50 px-2 py-0.5 rounded": mono })}>{value}</span>
+		</div>
+	);
+}
+
+function NotificationConfigRows({ config }: { config: NotificationConfig }) {
+	switch (config.type) {
+		case "slack":
+			return (
+				<>
+					<ConfigRow icon={<Globe className="h-4 w-4" />} label="Webhook URL" value={config.webhookUrl} mono />
+					<ConfigRow icon={<Hash className="h-4 w-4" />} label="Channel" value={config.channel || "—"} />
+					<ConfigRow icon={<Bot className="h-4 w-4" />} label="Bot Username" value={config.username || "—"} />
+					<ConfigRow icon={<Smile className="h-4 w-4" />} label="Icon Emoji" value={config.iconEmoji || "—"} />
+				</>
+			);
+		case "discord":
+			return (
+				<>
+					<ConfigRow icon={<Globe className="h-4 w-4" />} label="Webhook URL" value={config.webhookUrl} mono />
+					<ConfigRow icon={<Bot className="h-4 w-4" />} label="Username" value={config.username || "—"} />
+					<ConfigRow icon={<Link className="h-4 w-4" />} label="Avatar URL" value={config.avatarUrl || "—"} mono />
+					<ConfigRow icon={<MessageSquare className="h-4 w-4" />} label="Thread ID" value={config.threadId || "—"} />
+				</>
+			);
+		case "email":
+			return (
+				<>
+					<ConfigRow icon={<Server className="h-4 w-4" />} label="SMTP Host" value={config.smtpHost} mono />
+					<ConfigRow icon={<Server className="h-4 w-4" />} label="SMTP Port" value={String(config.smtpPort)} />
+					<ConfigRow icon={<AtSign className="h-4 w-4" />} label="Username" value={config.username || "—"} />
+					<ConfigRow icon={<Lock className="h-4 w-4" />} label="Password" value={config.password || "—"} />
+					<ConfigRow icon={<Mail className="h-4 w-4" />} label="From" value={config.from} />
+					{config.fromName && (
+						<ConfigRow icon={<Mail className="h-4 w-4" />} label="From Name" value={config.fromName} />
+					)}
+					<ConfigRow icon={<Users className="h-4 w-4" />} label="To" value={config.to.join(", ")} />
+					<ConfigRow icon={<Shield className="h-4 w-4" />} label="TLS" value={config.useTLS ? "Enabled" : "Disabled"} />
+				</>
+			);
+		case "gotify":
+			return (
+				<>
+					<ConfigRow icon={<Globe className="h-4 w-4" />} label="Server URL" value={config.serverUrl} mono />
+					<ConfigRow icon={<Key className="h-4 w-4" />} label="Token" value={config.token} mono />
+					<ConfigRow icon={<Globe className="h-4 w-4" />} label="Path" value={config.path || "—"} mono />
+					<ConfigRow icon={<Settings className="h-4 w-4" />} label="Priority" value={String(config.priority)} />
+				</>
+			);
+		case "ntfy":
+			return (
+				<>
+					<ConfigRow
+						icon={<Globe className="h-4 w-4" />}
+						label="Server URL"
+						value={config.serverUrl || "Default (ntfy.sh)"}
+						mono
+					/>
+					<ConfigRow icon={<Hash className="h-4 w-4" />} label="Topic" value={config.topic} />
+					<ConfigRow icon={<Settings className="h-4 w-4" />} label="Priority" value={config.priority} />
+					<ConfigRow icon={<AtSign className="h-4 w-4" />} label="Username" value={config.username || "—"} />
+					<ConfigRow icon={<Lock className="h-4 w-4" />} label="Password" value={config.password || "—"} />
+					<ConfigRow icon={<Key className="h-4 w-4" />} label="Access Token" value={config.accessToken || "—"} />
+				</>
+			);
+		case "pushover":
+			return (
+				<>
+					<ConfigRow icon={<Key className="h-4 w-4" />} label="User Key" value={config.userKey} mono />
+					<ConfigRow icon={<Key className="h-4 w-4" />} label="API Token" value={config.apiToken} mono />
+					<ConfigRow icon={<Settings className="h-4 w-4" />} label="Devices" value={config.devices || "—"} />
+					<ConfigRow icon={<Settings className="h-4 w-4" />} label="Priority" value={String(config.priority)} />
+				</>
+			);
+		case "telegram":
+			return (
+				<>
+					<ConfigRow icon={<Key className="h-4 w-4" />} label="Bot Token" value={config.botToken} mono />
+					<ConfigRow icon={<Hash className="h-4 w-4" />} label="Chat ID" value={config.chatId} mono />
+					<ConfigRow icon={<MessageSquare className="h-4 w-4" />} label="Thread ID" value={config.threadId || "—"} />
+				</>
+			);
+		case "generic":
+			return (
+				<>
+					<ConfigRow icon={<Globe className="h-4 w-4" />} label="URL" value={config.url} mono />
+					<ConfigRow icon={<Settings className="h-4 w-4" />} label="Method" value={config.method} />
+					<ConfigRow icon={<Settings className="h-4 w-4" />} label="Content Type" value={config.contentType || "—"} />
+					<ConfigRow
+						icon={<Settings className="h-4 w-4" />}
+						label="JSON Mode"
+						value={config.useJson ? "Enabled" : "Disabled"}
+					/>
+					<ConfigRow icon={<Key className="h-4 w-4" />} label="Title Key" value={config.titleKey || "—"} mono />
+					<ConfigRow icon={<Key className="h-4 w-4" />} label="Message Key" value={config.messageKey || "—"} mono />
+					{config.headers?.map((h, i) => (
+						<ConfigRow key={i} icon={<Link className="h-4 w-4" />} label={`Header ${i + 1}`} value={h} mono />
+					))}
+				</>
+			);
+		case "custom":
+			return <ConfigRow icon={<Globe className="h-4 w-4" />} label="Shoutrrr URL" value={config.shoutrrrUrl} mono />;
+	}
+}
 
 export function NotificationDetailsPage({ notificationId }: { notificationId: string }) {
 	const navigate = useNavigate();
-	const formId = useId();
 	const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
 
 	const { data } = useSuspenseQuery({
@@ -54,18 +193,6 @@ export function NotificationDetailsPage({ notificationId }: { notificationId: st
 		},
 	});
 
-	const updateDestination = useMutation({
-		...updateNotificationDestinationMutation(),
-		onSuccess: () => {
-			toast.success("Notification destination updated successfully");
-		},
-		onError: (error) => {
-			toast.error("Failed to update notification destination", {
-				description: parseError(error)?.message,
-			});
-		},
-	});
-
 	const testDestination = useMutation({
 		...testNotificationDestinationMutation(),
 		onSuccess: () => {
@@ -83,101 +210,86 @@ export function NotificationDetailsPage({ notificationId }: { notificationId: st
 		deleteDestination.mutate({ path: { id: String(data.id) } });
 	};
 
-	const handleSubmit = (values: NotificationFormValues) => {
-		updateDestination.mutate({
-			path: { id: String(data.id) },
-			body: {
-				name: values.name,
-				config: values,
-			},
-		});
-	};
-
 	const handleTest = () => {
 		testDestination.mutate({ path: { id: String(data.id) } });
 	};
 
 	return (
 		<>
-			<div className="flex items-center justify-between mb-4">
-				<div className="text-sm font-semibold text-muted-foreground flex items-center gap-2">
-					<span
-						className={cn("inline-flex items-center gap-2 px-2 py-1 rounded-md text-xs bg-gray-500/10 text-gray-500", {
-							"bg-success/10 text-success": data.enabled,
-							"bg-red-500/10 text-red-500": !data.enabled,
-						})}
-					>
-						{data.enabled ? "Enabled" : "Disabled"}
-					</span>
-					<span className="text-xs bg-primary/10 rounded-md px-2 py-1 capitalize">{data.type}</span>
-				</div>
-				<div className="flex items-center gap-2">
-					<Button
-						onClick={handleTest}
-						disabled={testDestination.isPending || !data.enabled}
-						variant="outline"
-						loading={testDestination.isPending}
-					>
-						<TestTube2 className="h-4 w-4 mr-2" />
-						Test
-					</Button>
-					<DropdownMenu>
-						<DropdownMenuTrigger asChild>
-							<Button variant="outline">
-								Actions
-								<ChevronDown className="h-4 w-4 ml-1" />
-							</Button>
-						</DropdownMenuTrigger>
-						<DropdownMenuContent align="end">
-							<DropdownMenuItem
-								variant="destructive"
-								onClick={() => setShowDeleteConfirm(true)}
-								disabled={deleteDestination.isPending}
-							>
-								<Trash2 />
-								Delete
-							</DropdownMenuItem>
-						</DropdownMenuContent>
-					</DropdownMenu>
-				</div>
-			</div>
-
-			<Card>
-				<CardHeader>
-					<div className="flex items-center gap-3">
-						<div className="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
-							<Bell className="w-5 h-5 text-primary" />
+			<div className="flex flex-col gap-6 @container">
+				<Card className="px-6 py-5">
+					<div className="flex flex-col @wide:flex-row @wide:items-center justify-between gap-4">
+						<div className="flex items-center gap-4">
+							<div className="hidden @medium:flex items-center justify-center w-10 h-10 shrink-0 rounded-lg bg-muted/50 border border-border/50">
+								<Bell className="h-5 w-5 text-muted-foreground" />
+							</div>
+							<div>
+								<div className="flex items-center gap-2">
+									<h2 className="text-lg font-semibold tracking-tight">{data.name}</h2>
+									<Separator orientation="vertical" className="h-4 mx-1" />
+									<Badge variant="outline" className="capitalize gap-1.5">
+										<span
+											className={cn("w-2 h-2 rounded-full shrink-0", {
+												"bg-success": data.enabled,
+												"bg-red-500": !data.enabled,
+											})}
+										/>
+										{data.enabled ? "Enabled" : "Disabled"}
+									</Badge>
+									<Badge variant="secondary" className="capitalize">
+										{data.type}
+									</Badge>
+								</div>
+								<p className="text-sm text-muted-foreground mt-0.5">Created {formatDateTime(data.createdAt)}</p>
+							</div>
+						</div>
+						<div className="flex items-center gap-2">
+							<Button
+								onClick={handleTest}
+								disabled={testDestination.isPending || !data.enabled}
+								variant="outline"
+								loading={testDestination.isPending}
+							>
+								<TestTube2 className="h-4 w-4 mr-2" />
+								Test
+							</Button>
+							<DropdownMenu>
+								<DropdownMenuTrigger asChild>
+									<Button variant="outline">
+										Actions
+										<ChevronDown className="h-4 w-4 ml-1" />
+									</Button>
+								</DropdownMenuTrigger>
+								<DropdownMenuContent align="end">
+									<DropdownMenuItem onClick={() => navigate({ to: `/notifications/${data.id}/edit` })}>
+										<Pencil />
+										Edit
+									</DropdownMenuItem>
+									<DropdownMenuSeparator />
+									<DropdownMenuItem
+										variant="destructive"
+										onClick={() => setShowDeleteConfirm(true)}
+										disabled={deleteDestination.isPending}
+									>
+										<Trash2 />
+										Delete
+									</DropdownMenuItem>
+								</DropdownMenuContent>
+							</DropdownMenu>
 						</div>
-						<CardTitle>{data.name}</CardTitle>
 					</div>
-				</CardHeader>
-				<CardContent className="space-y-6">
-					{updateDestination.isError && (
-						<Alert variant="destructive">
-							<AlertDescription>
-								<strong>Failed to update notification destination:</strong>
-								<br />
-								{parseError(updateDestination.error)?.message}
-							</AlertDescription>
-						</Alert>
-					)}
-					<CreateNotificationForm
-						mode="update"
-						formId={formId}
-						onSubmit={handleSubmit}
-						initialValues={{
-							...data.config,
-							name: data.name,
-						}}
-					/>
-					<div className="flex justify-end gap-2 pt-4 border-t">
-						<Button type="submit" form={formId} loading={updateDestination.isPending}>
-							<Save className="h-4 w-4 mr-2" />
-							Save Changes
-						</Button>
+				</Card>
+
+				<Card className="px-6 py-6">
+					<CardTitle className="flex items-center gap-2 mb-5">
+						<Settings className="h-4 w-4 text-muted-foreground" />
+						Configuration
+					</CardTitle>
+					<div className="space-y-0 divide-y divide-border/50">
+						<NotificationConfigRows config={data.config} />
 					</div>
-				</CardContent>
-			</Card>
+				</Card>
+			</div>
 
 			<AlertDialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
 				<AlertDialogContent>
diff --git a/app/routeTree.gen.ts b/app/routeTree.gen.ts
index f490814f..2e8c12b3 100644
--- a/app/routeTree.gen.ts
+++ b/app/routeTree.gen.ts
@@ -25,15 +25,16 @@ import { Route as dashboardAdminIndexRouteImport } from './routes/(dashboard)/ad
 import { Route as dashboardVolumesCreateRouteImport } from './routes/(dashboard)/volumes/create'
 import { Route as dashboardRepositoriesCreateRouteImport } from './routes/(dashboard)/repositories/create'
 import { Route as dashboardNotificationsCreateRouteImport } from './routes/(dashboard)/notifications/create'
-import { Route as dashboardNotificationsNotificationIdRouteImport } from './routes/(dashboard)/notifications/$notificationId'
 import { Route as dashboardBackupsCreateRouteImport } from './routes/(dashboard)/backups/create'
 import { Route as authLoginErrorRouteImport } from './routes/(auth)/login.error'
 import { Route as dashboardVolumesVolumeIdIndexRouteImport } from './routes/(dashboard)/volumes/$volumeId/index'
 import { Route as dashboardRepositoriesRepositoryIdIndexRouteImport } from './routes/(dashboard)/repositories/$repositoryId/index'
+import { Route as dashboardNotificationsNotificationIdIndexRouteImport } from './routes/(dashboard)/notifications/$notificationId/index'
 import { Route as dashboardBackupsBackupIdIndexRouteImport } from './routes/(dashboard)/backups/$backupId/index'
 import { Route as dashboardVolumesVolumeIdEditRouteImport } from './routes/(dashboard)/volumes/$volumeId/edit'
 import { Route as dashboardSettingsSsoNewRouteImport } from './routes/(dashboard)/settings/sso/new'
 import { Route as dashboardRepositoriesRepositoryIdEditRouteImport } from './routes/(dashboard)/repositories/$repositoryId/edit'
+import { Route as dashboardNotificationsNotificationIdEditRouteImport } from './routes/(dashboard)/notifications/$notificationId/edit'
 import { Route as dashboardBackupsBackupIdEditRouteImport } from './routes/(dashboard)/backups/$backupId/edit'
 import { Route as dashboardRepositoriesRepositoryIdSnapshotIdIndexRouteImport } from './routes/(dashboard)/repositories/$repositoryId/$snapshotId/index'
 import { Route as dashboardRepositoriesRepositoryIdSnapshotIdRestoreRouteImport } from './routes/(dashboard)/repositories/$repositoryId/$snapshotId/restore'
@@ -121,12 +122,6 @@ const dashboardNotificationsCreateRoute =
     path: '/notifications/create',
     getParentRoute: () => dashboardRouteRoute,
   } as any)
-const dashboardNotificationsNotificationIdRoute =
-  dashboardNotificationsNotificationIdRouteImport.update({
-    id: '/notifications/$notificationId',
-    path: '/notifications/$notificationId',
-    getParentRoute: () => dashboardRouteRoute,
-  } as any)
 const dashboardBackupsCreateRoute = dashboardBackupsCreateRouteImport.update({
   id: '/backups/create',
   path: '/backups/create',
@@ -149,6 +144,12 @@ const dashboardRepositoriesRepositoryIdIndexRoute =
     path: '/repositories/$repositoryId/',
     getParentRoute: () => dashboardRouteRoute,
   } as any)
+const dashboardNotificationsNotificationIdIndexRoute =
+  dashboardNotificationsNotificationIdIndexRouteImport.update({
+    id: '/notifications/$notificationId/',
+    path: '/notifications/$notificationId/',
+    getParentRoute: () => dashboardRouteRoute,
+  } as any)
 const dashboardBackupsBackupIdIndexRoute =
   dashboardBackupsBackupIdIndexRouteImport.update({
     id: '/backups/$backupId/',
@@ -172,6 +173,12 @@ const dashboardRepositoriesRepositoryIdEditRoute =
     path: '/repositories/$repositoryId/edit',
     getParentRoute: () => dashboardRouteRoute,
   } as any)
+const dashboardNotificationsNotificationIdEditRoute =
+  dashboardNotificationsNotificationIdEditRouteImport.update({
+    id: '/notifications/$notificationId/edit',
+    path: '/notifications/$notificationId/edit',
+    getParentRoute: () => dashboardRouteRoute,
+  } as any)
 const dashboardBackupsBackupIdEditRoute =
   dashboardBackupsBackupIdEditRouteImport.update({
     id: '/backups/$backupId/edit',
@@ -205,7 +212,6 @@ export interface FileRoutesByFullPath {
   '/api/$': typeof ApiSplatRoute
   '/login/error': typeof authLoginErrorRoute
   '/backups/create': typeof dashboardBackupsCreateRoute
-  '/notifications/$notificationId': typeof dashboardNotificationsNotificationIdRoute
   '/notifications/create': typeof dashboardNotificationsCreateRoute
   '/repositories/create': typeof dashboardRepositoriesCreateRoute
   '/volumes/create': typeof dashboardVolumesCreateRoute
@@ -216,10 +222,12 @@ export interface FileRoutesByFullPath {
   '/settings/': typeof dashboardSettingsIndexRoute
   '/volumes/': typeof dashboardVolumesIndexRoute
   '/backups/$backupId/edit': typeof dashboardBackupsBackupIdEditRoute
+  '/notifications/$notificationId/edit': typeof dashboardNotificationsNotificationIdEditRoute
   '/repositories/$repositoryId/edit': typeof dashboardRepositoriesRepositoryIdEditRoute
   '/settings/sso/new': typeof dashboardSettingsSsoNewRoute
   '/volumes/$volumeId/edit': typeof dashboardVolumesVolumeIdEditRoute
   '/backups/$backupId/': typeof dashboardBackupsBackupIdIndexRoute
+  '/notifications/$notificationId/': typeof dashboardNotificationsNotificationIdIndexRoute
   '/repositories/$repositoryId/': typeof dashboardRepositoriesRepositoryIdIndexRoute
   '/volumes/$volumeId/': typeof dashboardVolumesVolumeIdIndexRoute
   '/backups/$backupId/$snapshotId/restore': typeof dashboardBackupsBackupIdSnapshotIdRestoreRoute
@@ -234,7 +242,6 @@ export interface FileRoutesByTo {
   '/api/$': typeof ApiSplatRoute
   '/login/error': typeof authLoginErrorRoute
   '/backups/create': typeof dashboardBackupsCreateRoute
-  '/notifications/$notificationId': typeof dashboardNotificationsNotificationIdRoute
   '/notifications/create': typeof dashboardNotificationsCreateRoute
   '/repositories/create': typeof dashboardRepositoriesCreateRoute
   '/volumes/create': typeof dashboardVolumesCreateRoute
@@ -245,10 +252,12 @@ export interface FileRoutesByTo {
   '/settings': typeof dashboardSettingsIndexRoute
   '/volumes': typeof dashboardVolumesIndexRoute
   '/backups/$backupId/edit': typeof dashboardBackupsBackupIdEditRoute
+  '/notifications/$notificationId/edit': typeof dashboardNotificationsNotificationIdEditRoute
   '/repositories/$repositoryId/edit': typeof dashboardRepositoriesRepositoryIdEditRoute
   '/settings/sso/new': typeof dashboardSettingsSsoNewRoute
   '/volumes/$volumeId/edit': typeof dashboardVolumesVolumeIdEditRoute
   '/backups/$backupId': typeof dashboardBackupsBackupIdIndexRoute
+  '/notifications/$notificationId': typeof dashboardNotificationsNotificationIdIndexRoute
   '/repositories/$repositoryId': typeof dashboardRepositoriesRepositoryIdIndexRoute
   '/volumes/$volumeId': typeof dashboardVolumesVolumeIdIndexRoute
   '/backups/$backupId/$snapshotId/restore': typeof dashboardBackupsBackupIdSnapshotIdRestoreRoute
@@ -266,7 +275,6 @@ export interface FileRoutesById {
   '/api/$': typeof ApiSplatRoute
   '/(auth)/login/error': typeof authLoginErrorRoute
   '/(dashboard)/backups/create': typeof dashboardBackupsCreateRoute
-  '/(dashboard)/notifications/$notificationId': typeof dashboardNotificationsNotificationIdRoute
   '/(dashboard)/notifications/create': typeof dashboardNotificationsCreateRoute
   '/(dashboard)/repositories/create': typeof dashboardRepositoriesCreateRoute
   '/(dashboard)/volumes/create': typeof dashboardVolumesCreateRoute
@@ -277,10 +285,12 @@ export interface FileRoutesById {
   '/(dashboard)/settings/': typeof dashboardSettingsIndexRoute
   '/(dashboard)/volumes/': typeof dashboardVolumesIndexRoute
   '/(dashboard)/backups/$backupId/edit': typeof dashboardBackupsBackupIdEditRoute
+  '/(dashboard)/notifications/$notificationId/edit': typeof dashboardNotificationsNotificationIdEditRoute
   '/(dashboard)/repositories/$repositoryId/edit': typeof dashboardRepositoriesRepositoryIdEditRoute
   '/(dashboard)/settings/sso/new': typeof dashboardSettingsSsoNewRoute
   '/(dashboard)/volumes/$volumeId/edit': typeof dashboardVolumesVolumeIdEditRoute
   '/(dashboard)/backups/$backupId/': typeof dashboardBackupsBackupIdIndexRoute
+  '/(dashboard)/notifications/$notificationId/': typeof dashboardNotificationsNotificationIdIndexRoute
   '/(dashboard)/repositories/$repositoryId/': typeof dashboardRepositoriesRepositoryIdIndexRoute
   '/(dashboard)/volumes/$volumeId/': typeof dashboardVolumesVolumeIdIndexRoute
   '/(dashboard)/backups/$backupId/$snapshotId/restore': typeof dashboardBackupsBackupIdSnapshotIdRestoreRoute
@@ -297,7 +307,6 @@ export interface FileRouteTypes {
     | '/api/$'
     | '/login/error'
     | '/backups/create'
-    | '/notifications/$notificationId'
     | '/notifications/create'
     | '/repositories/create'
     | '/volumes/create'
@@ -308,10 +317,12 @@ export interface FileRouteTypes {
     | '/settings/'
     | '/volumes/'
     | '/backups/$backupId/edit'
+    | '/notifications/$notificationId/edit'
     | '/repositories/$repositoryId/edit'
     | '/settings/sso/new'
     | '/volumes/$volumeId/edit'
     | '/backups/$backupId/'
+    | '/notifications/$notificationId/'
     | '/repositories/$repositoryId/'
     | '/volumes/$volumeId/'
     | '/backups/$backupId/$snapshotId/restore'
@@ -326,7 +337,6 @@ export interface FileRouteTypes {
     | '/api/$'
     | '/login/error'
     | '/backups/create'
-    | '/notifications/$notificationId'
     | '/notifications/create'
     | '/repositories/create'
     | '/volumes/create'
@@ -337,10 +347,12 @@ export interface FileRouteTypes {
     | '/settings'
     | '/volumes'
     | '/backups/$backupId/edit'
+    | '/notifications/$notificationId/edit'
     | '/repositories/$repositoryId/edit'
     | '/settings/sso/new'
     | '/volumes/$volumeId/edit'
     | '/backups/$backupId'
+    | '/notifications/$notificationId'
     | '/repositories/$repositoryId'
     | '/volumes/$volumeId'
     | '/backups/$backupId/$snapshotId/restore'
@@ -357,7 +369,6 @@ export interface FileRouteTypes {
     | '/api/$'
     | '/(auth)/login/error'
     | '/(dashboard)/backups/create'
-    | '/(dashboard)/notifications/$notificationId'
     | '/(dashboard)/notifications/create'
     | '/(dashboard)/repositories/create'
     | '/(dashboard)/volumes/create'
@@ -368,10 +379,12 @@ export interface FileRouteTypes {
     | '/(dashboard)/settings/'
     | '/(dashboard)/volumes/'
     | '/(dashboard)/backups/$backupId/edit'
+    | '/(dashboard)/notifications/$notificationId/edit'
     | '/(dashboard)/repositories/$repositoryId/edit'
     | '/(dashboard)/settings/sso/new'
     | '/(dashboard)/volumes/$volumeId/edit'
     | '/(dashboard)/backups/$backupId/'
+    | '/(dashboard)/notifications/$notificationId/'
     | '/(dashboard)/repositories/$repositoryId/'
     | '/(dashboard)/volumes/$volumeId/'
     | '/(dashboard)/backups/$backupId/$snapshotId/restore'
@@ -500,13 +513,6 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof dashboardNotificationsCreateRouteImport
       parentRoute: typeof dashboardRouteRoute
     }
-    '/(dashboard)/notifications/$notificationId': {
-      id: '/(dashboard)/notifications/$notificationId'
-      path: '/notifications/$notificationId'
-      fullPath: '/notifications/$notificationId'
-      preLoaderRoute: typeof dashboardNotificationsNotificationIdRouteImport
-      parentRoute: typeof dashboardRouteRoute
-    }
     '/(dashboard)/backups/create': {
       id: '/(dashboard)/backups/create'
       path: '/backups/create'
@@ -535,6 +541,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof dashboardRepositoriesRepositoryIdIndexRouteImport
       parentRoute: typeof dashboardRouteRoute
     }
+    '/(dashboard)/notifications/$notificationId/': {
+      id: '/(dashboard)/notifications/$notificationId/'
+      path: '/notifications/$notificationId'
+      fullPath: '/notifications/$notificationId/'
+      preLoaderRoute: typeof dashboardNotificationsNotificationIdIndexRouteImport
+      parentRoute: typeof dashboardRouteRoute
+    }
     '/(dashboard)/backups/$backupId/': {
       id: '/(dashboard)/backups/$backupId/'
       path: '/backups/$backupId'
@@ -563,6 +576,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof dashboardRepositoriesRepositoryIdEditRouteImport
       parentRoute: typeof dashboardRouteRoute
     }
+    '/(dashboard)/notifications/$notificationId/edit': {
+      id: '/(dashboard)/notifications/$notificationId/edit'
+      path: '/notifications/$notificationId/edit'
+      fullPath: '/notifications/$notificationId/edit'
+      preLoaderRoute: typeof dashboardNotificationsNotificationIdEditRouteImport
+      parentRoute: typeof dashboardRouteRoute
+    }
     '/(dashboard)/backups/$backupId/edit': {
       id: '/(dashboard)/backups/$backupId/edit'
       path: '/backups/$backupId/edit'
@@ -624,7 +644,6 @@ const authRouteRouteWithChildren = authRouteRoute._addFileChildren(
 
 interface dashboardRouteRouteChildren {
   dashboardBackupsCreateRoute: typeof dashboardBackupsCreateRoute
-  dashboardNotificationsNotificationIdRoute: typeof dashboardNotificationsNotificationIdRoute
   dashboardNotificationsCreateRoute: typeof dashboardNotificationsCreateRoute
   dashboardRepositoriesCreateRoute: typeof dashboardRepositoriesCreateRoute
   dashboardVolumesCreateRoute: typeof dashboardVolumesCreateRoute
@@ -635,10 +654,12 @@ interface dashboardRouteRouteChildren {
   dashboardSettingsIndexRoute: typeof dashboardSettingsIndexRoute
   dashboardVolumesIndexRoute: typeof dashboardVolumesIndexRoute
   dashboardBackupsBackupIdEditRoute: typeof dashboardBackupsBackupIdEditRoute
+  dashboardNotificationsNotificationIdEditRoute: typeof dashboardNotificationsNotificationIdEditRoute
   dashboardRepositoriesRepositoryIdEditRoute: typeof dashboardRepositoriesRepositoryIdEditRoute
   dashboardSettingsSsoNewRoute: typeof dashboardSettingsSsoNewRoute
   dashboardVolumesVolumeIdEditRoute: typeof dashboardVolumesVolumeIdEditRoute
   dashboardBackupsBackupIdIndexRoute: typeof dashboardBackupsBackupIdIndexRoute
+  dashboardNotificationsNotificationIdIndexRoute: typeof dashboardNotificationsNotificationIdIndexRoute
   dashboardRepositoriesRepositoryIdIndexRoute: typeof dashboardRepositoriesRepositoryIdIndexRoute
   dashboardVolumesVolumeIdIndexRoute: typeof dashboardVolumesVolumeIdIndexRoute
   dashboardBackupsBackupIdSnapshotIdRestoreRoute: typeof dashboardBackupsBackupIdSnapshotIdRestoreRoute
@@ -648,8 +669,6 @@ interface dashboardRouteRouteChildren {
 
 const dashboardRouteRouteChildren: dashboardRouteRouteChildren = {
   dashboardBackupsCreateRoute: dashboardBackupsCreateRoute,
-  dashboardNotificationsNotificationIdRoute:
-    dashboardNotificationsNotificationIdRoute,
   dashboardNotificationsCreateRoute: dashboardNotificationsCreateRoute,
   dashboardRepositoriesCreateRoute: dashboardRepositoriesCreateRoute,
   dashboardVolumesCreateRoute: dashboardVolumesCreateRoute,
@@ -660,11 +679,15 @@ const dashboardRouteRouteChildren: dashboardRouteRouteChildren = {
   dashboardSettingsIndexRoute: dashboardSettingsIndexRoute,
   dashboardVolumesIndexRoute: dashboardVolumesIndexRoute,
   dashboardBackupsBackupIdEditRoute: dashboardBackupsBackupIdEditRoute,
+  dashboardNotificationsNotificationIdEditRoute:
+    dashboardNotificationsNotificationIdEditRoute,
   dashboardRepositoriesRepositoryIdEditRoute:
     dashboardRepositoriesRepositoryIdEditRoute,
   dashboardSettingsSsoNewRoute: dashboardSettingsSsoNewRoute,
   dashboardVolumesVolumeIdEditRoute: dashboardVolumesVolumeIdEditRoute,
   dashboardBackupsBackupIdIndexRoute: dashboardBackupsBackupIdIndexRoute,
+  dashboardNotificationsNotificationIdIndexRoute:
+    dashboardNotificationsNotificationIdIndexRoute,
   dashboardRepositoriesRepositoryIdIndexRoute:
     dashboardRepositoriesRepositoryIdIndexRoute,
   dashboardVolumesVolumeIdIndexRoute: dashboardVolumesVolumeIdIndexRoute,
diff --git a/app/routes/(dashboard)/notifications/$notificationId/edit.tsx b/app/routes/(dashboard)/notifications/$notificationId/edit.tsx
new file mode 100644
index 00000000..17ee3dc2
--- /dev/null
+++ b/app/routes/(dashboard)/notifications/$notificationId/edit.tsx
@@ -0,0 +1,38 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { getNotificationDestinationOptions } from "~/client/api-client/@tanstack/react-query.gen";
+import { EditNotificationPage } from "~/client/modules/notifications/routes/edit-notification";
+
+export const Route = createFileRoute("/(dashboard)/notifications/$notificationId/edit")({
+	component: RouteComponent,
+	errorComponent: () => <div>Failed to load notification</div>,
+	loader: async ({ params, context }) => {
+		const notification = await context.queryClient.ensureQueryData({
+			...getNotificationDestinationOptions({ path: { id: params.notificationId } }),
+		});
+
+		return notification;
+	},
+	staticData: {
+		breadcrumb: (match) => [
+			{ label: "Notifications", href: "/notifications" },
+			{
+				label: match.loaderData?.name || "Notification Details",
+				href: `/notifications/${match.params.notificationId}`,
+			},
+			{ label: "Edit" },
+		],
+	},
+	head: ({ loaderData }) => ({
+		meta: [
+			{ title: `Zerobyte - Edit ${loaderData?.name}` },
+			{
+				name: "description",
+				content: "Edit notification destination settings.",
+			},
+		],
+	}),
+});
+
+function RouteComponent() {
+	return <EditNotificationPage notificationId={Route.useParams().notificationId} />;
+}
diff --git a/app/routes/(dashboard)/notifications/$notificationId.tsx b/app/routes/(dashboard)/notifications/$notificationId/index.tsx
similarity index 92%
rename from app/routes/(dashboard)/notifications/$notificationId.tsx
rename to app/routes/(dashboard)/notifications/$notificationId/index.tsx
index ceab9f70..4b67f396 100644
--- a/app/routes/(dashboard)/notifications/$notificationId.tsx
+++ b/app/routes/(dashboard)/notifications/$notificationId/index.tsx
@@ -2,7 +2,7 @@ import { createFileRoute } from "@tanstack/react-router";
 import { getNotificationDestinationOptions } from "~/client/api-client/@tanstack/react-query.gen";
 import { NotificationDetailsPage } from "~/client/modules/notifications/routes/notification-details";
 
-export const Route = createFileRoute("/(dashboard)/notifications/$notificationId")({
+export const Route = createFileRoute("/(dashboard)/notifications/$notificationId/")({
 	component: RouteComponent,
 	errorComponent: () => <div>Failed to load notification</div>,
 	loader: async ({ params, context }) => {
@@ -23,7 +23,7 @@ export const Route = createFileRoute("/(dashboard)/notifications/$notificationId
 			{ title: `Zerobyte - ${loaderData?.name}` },
 			{
 				name: "description",
-				content: "View and edit notification destination settings.",
+				content: "View notification destination settings.",
 			},
 		],
 	}),