diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 3f551e9..af5b350 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -17,6 +17,7 @@ import Profile from "./pages/Profile";
 import Repositories from "./pages/Repositories";
 import RepositoryDetail from "./pages/RepositoryDetail";
 import AlertChannels from "./pages/settings/AlertChannels";
+import Notifications from "./pages/settings/Notifications";
 import SettingsAgentConfig from "./pages/settings/SettingsAgentConfig";
 import SettingsHostGroups from "./pages/settings/SettingsHostGroups";
 import SettingsServerConfig from "./pages/settings/SettingsServerConfig";
@@ -188,7 +189,9 @@ function AppRoutes() {
 				element={
 					<ProtectedRoute requirePermission="can_manage_settings">
 						<Layout>
-							<SettingsHostGroups />
+							<SettingsLayout>
+								<Notifications />
+							</SettingsLayout>
 						</Layout>
 					</ProtectedRoute>
 				}
diff --git a/frontend/src/pages/settings/Notifications.jsx b/frontend/src/pages/settings/Notifications.jsx
new file mode 100644
index 0000000..3d035fe
--- /dev/null
+++ b/frontend/src/pages/settings/Notifications.jsx
@@ -0,0 +1,163 @@
+import { Bell, Plus, Settings } from "lucide-react";
+
+const Notifications = () => {
+	return (
+		<div className="space-y-6">
+			{/* Header */}
+			<div className="flex items-center justify-between">
+				<div>
+					<h1 className="text-2xl font-bold text-secondary-900 dark:text-white">
+						Notifications
+					</h1>
+					<p className="mt-1 text-sm text-secondary-600 dark:text-secondary-400">
+						Configure notification preferences and alert rules
+					</p>
+				</div>
+				<button type="button" className="btn-primary flex items-center gap-2">
+					<Plus className="h-4 w-4" />
+					Add Rule
+				</button>
+			</div>
+
+			{/* Coming Soon Card */}
+			<div className="bg-white dark:bg-secondary-800 border border-secondary-200 dark:border-secondary-600 rounded-lg p-6">
+				<div className="flex items-center gap-4">
+					<div className="flex-shrink-0">
+						<div className="w-12 h-12 bg-primary-100 dark:bg-primary-900 rounded-lg flex items-center justify-center">
+							<Bell className="h-6 w-6 text-primary-600 dark:text-primary-400" />
+						</div>
+					</div>
+					<div className="flex-1">
+						<h3 className="text-lg font-semibold text-secondary-900 dark:text-white">
+							Notification Rules Coming Soon
+						</h3>
+						<p className="mt-1 text-sm text-secondary-600 dark:text-secondary-400">
+							We're working on adding comprehensive notification rules including
+							package updates, security alerts, system events, and custom
+							triggers.
+						</p>
+						<div className="mt-3">
+							<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-200">
+								In Development
+							</span>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			{/* Notification Settings Preview */}
+			<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+				{/* Package Updates */}
+				<div className="bg-white dark:bg-secondary-800 border border-secondary-200 dark:border-secondary-600 rounded-lg p-6">
+					<div className="flex items-center gap-3 mb-4">
+						<div className="w-8 h-8 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center">
+							<Settings className="h-4 w-4 text-blue-600 dark:text-blue-400" />
+						</div>
+						<h3 className="text-lg font-medium text-secondary-900 dark:text-white">
+							Package Updates
+						</h3>
+					</div>
+					<p className="text-sm text-secondary-600 dark:text-secondary-400 mb-4">
+						Get notified when packages are updated on your hosts
+					</p>
+					<div className="space-y-2">
+						<div className="flex items-center justify-between">
+							<span className="text-sm text-secondary-700 dark:text-secondary-300">
+								Critical Updates
+							</span>
+							<span className="text-xs text-secondary-500 dark:text-secondary-400">
+								Coming Soon
+							</span>
+						</div>
+						<div className="flex items-center justify-between">
+							<span className="text-sm text-secondary-700 dark:text-secondary-300">
+								Security Patches
+							</span>
+							<span className="text-xs text-secondary-500 dark:text-secondary-400">
+								Coming Soon
+							</span>
+						</div>
+						<div className="flex items-center justify-between">
+							<span className="text-sm text-secondary-700 dark:text-secondary-300">
+								Major Updates
+							</span>
+							<span className="text-xs text-secondary-500 dark:text-secondary-400">
+								Coming Soon
+							</span>
+						</div>
+					</div>
+				</div>
+
+				{/* System Events */}
+				<div className="bg-white dark:bg-secondary-800 border border-secondary-200 dark:border-secondary-600 rounded-lg p-6">
+					<div className="flex items-center gap-3 mb-4">
+						<div className="w-8 h-8 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center">
+							<Bell className="h-4 w-4 text-green-600 dark:text-green-400" />
+						</div>
+						<h3 className="text-lg font-medium text-secondary-900 dark:text-white">
+							System Events
+						</h3>
+					</div>
+					<p className="text-sm text-secondary-600 dark:text-secondary-400 mb-4">
+						Monitor system health and performance events
+					</p>
+					<div className="space-y-2">
+						<div className="flex items-center justify-between">
+							<span className="text-sm text-secondary-700 dark:text-secondary-300">
+								Host Offline
+							</span>
+							<span className="text-xs text-secondary-500 dark:text-secondary-400">
+								Coming Soon
+							</span>
+						</div>
+						<div className="flex items-center justify-between">
+							<span className="text-sm text-secondary-700 dark:text-secondary-300">
+								High CPU Usage
+							</span>
+							<span className="text-xs text-secondary-500 dark:text-secondary-400">
+								Coming Soon
+							</span>
+						</div>
+						<div className="flex items-center justify-between">
+							<span className="text-sm text-secondary-700 dark:text-secondary-300">
+								Disk Space Low
+							</span>
+							<span className="text-xs text-secondary-500 dark:text-secondary-400">
+								Coming Soon
+							</span>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			{/* Empty State */}
+			<div className="bg-white dark:bg-secondary-800 border border-secondary-200 dark:border-secondary-600 rounded-lg">
+				<div className="px-6 py-4 border-b border-secondary-200 dark:border-secondary-600">
+					<h3 className="text-lg font-medium text-secondary-900 dark:text-white">
+						Notification Rules
+					</h3>
+					<p className="mt-1 text-sm text-secondary-600 dark:text-secondary-400">
+						No notification rules configured yet
+					</p>
+				</div>
+				<div className="px-6 py-8 text-center">
+					<Bell className="mx-auto h-12 w-12 text-secondary-400" />
+					<h3 className="mt-2 text-sm font-medium text-secondary-900 dark:text-white">
+						No rules
+					</h3>
+					<p className="mt-1 text-sm text-secondary-500 dark:text-secondary-400">
+						Get started by creating your first notification rule.
+					</p>
+					<div className="mt-6">
+						<button type="button" className="btn-primary">
+							<Plus className="h-4 w-4 mr-2" />
+							Add Rule
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default Notifications;