diff --git a/beszel/internal/alerts/alerts.go b/beszel/internal/alerts/alerts.go
index 77422b3..e2c5550 100644
--- a/beszel/internal/alerts/alerts.go
+++ b/beszel/internal/alerts/alerts.go
@@ -185,46 +185,47 @@ func (am *AlertManager) sendAlert(data AlertData) {
 }
 
 func (am *AlertManager) SendShoutrrrAlert(notificationUrl, title, message, link, linkText string) error {
+	// services that support title param
 	supportsTitle := []string{"bark", "discord", "gotify", "ifttt", "join", "matrix", "ntfy", "opsgenie", "pushbullet", "pushover", "slack", "teams", "telegram", "zulip"}
-	supportsLink := []string{"ntfy"}
+
 	// Parse the URL
 	parsedURL, err := url.Parse(notificationUrl)
 	if err != nil {
 		return fmt.Errorf("error parsing URL: %v", err)
 	}
-
 	scheme := parsedURL.Scheme
-
-	// // Get query parameters
 	queryParams := parsedURL.Query()
 
 	// Add title
-	if !sliceContains(supportsTitle, scheme) {
-		message = title + "\n\n" + message
-	} else {
+	if sliceContains(supportsTitle, scheme) {
 		queryParams.Add("title", title)
-
-	}
-	// Add link
-	if !sliceContains(supportsLink, scheme) {
-		// add link to the message
-		message += "\n\n" + link
-	} else {
-		// ntfy link
-		if scheme == "ntfy" {
-			queryParams.Add("Actions", fmt.Sprintf("view, %s, %s", linkText, link))
+	} else if scheme == "mattermost" {
+		// use markdown title for mattermost
+		message = "##### " + title + "\n\n" + message
+	} else if scheme == "generic" && queryParams.Has("template") {
+		// add title as property if using generic with template json
+		titleKey := queryParams.Get("titlekey")
+		if titleKey == "" {
+			titleKey = "title"
 		}
+		queryParams.Add("$"+titleKey, title)
+	} else {
+		// otherwise just add title to message
+		message = title + "\n\n" + message
 	}
 
-	//
-	if scheme == "generic" {
-		queryParams.Add("template", "json")
-		queryParams.Add("$title", title)
+	// Add link
+	if scheme == "ntfy" {
+		// if ntfy, add link to actions
+		queryParams.Add("Actions", fmt.Sprintf("view, %s, %s", linkText, link))
+	} else {
+		// else add link directly to the message
+		message += "\n\n" + link
 	}
 
 	// Encode the modified query parameters back into the URL
 	parsedURL.RawQuery = queryParams.Encode()
-	log.Println("URL after modification:", parsedURL.String())
+	// log.Println("URL after modification:", parsedURL.String())
 
 	err = shoutrrr.Send(parsedURL.String(), message)
 
diff --git a/beszel/site/src/components/routes/settings/general.tsx b/beszel/site/src/components/routes/settings/general.tsx
index 71c9bfb..00dea21 100644
--- a/beszel/site/src/components/routes/settings/general.tsx
+++ b/beszel/site/src/components/routes/settings/general.tsx
@@ -9,6 +9,7 @@ import {
 } from '@/components/ui/select'
 import { chartTimeData } from '@/lib/utils'
 import { Separator } from '@/components/ui/separator'
+import { SaveIcon } from 'lucide-react'
 
 export default function SettingsProfilePage() {
 	return (
@@ -20,8 +21,11 @@ export default function SettingsProfilePage() {
 			<Separator className="mt-6 mb-5" /> */}
 			<div className="space-y-5">
 				<div className="space-y-2">
-					<Label>Default chart period</Label>
-					{/* <Input placeholder="Username" /> */}
+					<div className="mb-4">
+						<h3 className="mb-1 text-lg font-medium">Chart options</h3>
+						<p className="text-sm text-muted-foreground">Adjust display options for charts.</p>
+					</div>
+					<Label className="block">Default time period</Label>
 					<Select defaultValue="1h">
 						<SelectTrigger>
 							<SelectValue />
@@ -35,11 +39,14 @@ export default function SettingsProfilePage() {
 						</SelectContent>
 					</Select>
 					<p className="text-[0.8rem] text-muted-foreground">
-						Sets the default time range for charts.
+						Sets the default time range for charts when a system is viewed.
 					</p>
 				</div>
 				<Separator />
-				<Button type="submit">Save settings</Button>
+				<Button type="submit" className="flex items-center gap-1.5">
+					<SaveIcon className="h-4 w-4" />
+					Save settings
+				</Button>
 			</div>
 		</div>
 	)
diff --git a/beszel/site/src/components/routes/settings/layout.tsx b/beszel/site/src/components/routes/settings/layout.tsx
index 9f5b6dd..57b0f98 100644
--- a/beszel/site/src/components/routes/settings/layout.tsx
+++ b/beszel/site/src/components/routes/settings/layout.tsx
@@ -35,10 +35,10 @@ export default function SettingsLayout() {
 	}, [])
 
 	return (
-		<Card className="pt-5 px-4 pb-9 sm:pt-6 sm:px-7">
+		<Card className="pt-5 px-4 pb-8 sm:pt-6 sm:px-7">
 			<CardHeader className="p-0">
 				<CardTitle className="mb-1">Settings</CardTitle>
-				<CardDescription>Manage your account settings and set e-mail preferences.</CardDescription>
+				<CardDescription>Manage notification and display preferences.</CardDescription>
 			</CardHeader>
 			<CardContent className="p-0">
 				<Separator className="my-5" />
diff --git a/beszel/site/src/components/routes/settings/notifications.tsx b/beszel/site/src/components/routes/settings/notifications.tsx
index d340ea7..d023188 100644
--- a/beszel/site/src/components/routes/settings/notifications.tsx
+++ b/beszel/site/src/components/routes/settings/notifications.tsx
@@ -5,7 +5,9 @@ import { pb } from '@/lib/stores'
 import { Separator } from '@/components/ui/separator'
 import { Card } from '@/components/ui/card'
 // import { Switch } from '@/components/ui/switch'
-import { Trash2Icon } from 'lucide-react'
+import { LoaderCircleIcon, PlusIcon, SaveIcon, Trash2Icon } from 'lucide-react'
+import { useState } from 'react'
+import { toast } from '@/components/ui/use-toast'
 
 export default function SettingsNotificationsPage() {
 	return (
@@ -20,7 +22,7 @@ export default function SettingsNotificationsPage() {
 					<div className="mb-4">
 						<h3 className="mb-1 text-lg font-medium">Email notifications</h3>
 						<p className="text-sm text-muted-foreground">
-							Get notified when new alerts are created.
+							Leave the emails field to disable email notifications.
 						</p>
 					</div>
 					<Label className="block">To email(s)</Label>
@@ -36,63 +38,99 @@ export default function SettingsNotificationsPage() {
 						<p className="text-sm text-muted-foreground">
 							Beszel uses{' '}
 							<a
-								href="https://containrrr.dev/shoutrrr/v0.8/services/overview/"
+								href="https://containrrr.dev/shoutrrr/services/overview/"
 								target="_blank"
-								className="font-medium text-primary opacity-80 hover:opacity-100 duration-100"
+								className="link"
 							>
 								Shoutrrr
 							</a>{' '}
 							to integrate with popular notification services.
 						</p>
 					</div>
-					<Card className="bg-muted/30 p-3.5">
-						<div className="flex items-center gap-1">
-							<Label htmlFor="name" className="sr-only">
-								URL
-							</Label>
-							<Input
-								id="name"
-								name="name"
-								className="light:bg-card"
-								required
-								placeholder="generic://example.com?@header=value"
-							/>
-							<Button
-								type="button"
-								variant="outline"
-								className=""
-								// onClick={() => append({ value: '' })}
-							>
-								Test
-							</Button>
-							<Button
-								type="button"
-								variant="outline"
-								size="icon"
-								className="shrink-0"
-								// onClick={() => append({ value: '' })}
-							>
-								<Trash2Icon className="h-4 w-4" />
-							</Button>
-							{/* <Label htmlFor="enabled-01" className="sr-only">
-								Enabled
-							</Label>
-							<Switch defaultChecked id="enabled-01" className="ml-2" /> */}
-						</div>
-					</Card>
+					<ShoutrrrUrlCard />
 					<Button
 						type="button"
 						variant="outline"
 						size="sm"
-						className="mt-2"
+						className="mt-2 flex items-center gap-1"
 						// onClick={() => append({ value: '' })}
 					>
+						<PlusIcon className="h-4 w-4 -ml-0.5" />
 						Add URL
 					</Button>
 				</div>
 				<Separator />
-				<Button type="submit">Save settings</Button>
+				<Button type="submit" className="flex items-center gap-1.5">
+					<SaveIcon className="h-4 w-4" />
+					Save settings
+				</Button>
 			</div>
 		</div>
 	)
 }
+
+async function sendTestNotification(url: string) {
+	const res = await pb.send('/api/beszel/send-test-notification', { url })
+	if ('err' in res && !res.err) {
+		toast({
+			title: 'Test notification sent',
+			description: 'Check your notification service',
+		})
+	} else {
+		toast({
+			title: 'Error',
+			description: res.err ?? 'Failed to send test notification',
+			variant: 'destructive',
+		})
+	}
+}
+
+// todo unique ids
+function ShoutrrrUrlCard() {
+	const [url, setUrl] = useState('')
+	const [isLoading, setIsLoading] = useState(false)
+
+	return (
+		<Card className="bg-muted/30 p-3.5">
+			<div className="flex items-center gap-1">
+				<Label htmlFor="name" className="sr-only">
+					URL
+				</Label>
+				<Input
+					id="name"
+					name="name"
+					className="light:bg-card"
+					required
+					placeholder="generic://webhook.site/xxxxxx"
+					onChange={(e) => setUrl(e.target.value)}
+				/>
+				<Button
+					type="button"
+					variant="outline"
+					className="w-28"
+					disabled={isLoading || url === ''}
+					onClick={async () => {
+						setIsLoading(true)
+						await sendTestNotification(url)
+						setIsLoading(false)
+					}}
+				>
+					{isLoading ? <LoaderCircleIcon className="sh-4 w-4 animate-spin" /> : 'Test URL'}
+				</Button>
+				<Button
+					type="button"
+					variant="outline"
+					size="icon"
+					className="shrink-0"
+					// onClick={() => append({ value: '' })}
+				>
+					<Trash2Icon className="sh-4 w-4" />
+				</Button>
+				{/* <Label htmlFor="enabled-01" className="sr-only">
+								Enabled
+							</Label>
+							<Switch defaultChecked id="enabled-01" className="ml-2" /> */}
+			</div>
+		</Card>
+	)
+}
diff --git a/beszel/site/src/index.css b/beszel/site/src/index.css
index 36bc611..d46b356 100644
--- a/beszel/site/src/index.css
+++ b/beszel/site/src/index.css
@@ -78,6 +78,9 @@
 	body {
 		@apply bg-background text-foreground;
 	}
+	.link {
+		@apply text-primary font-medium underline-offset-4 hover:underline;
+	}
 }
 
 .recharts-tooltip-wrapper {