diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index 41b30d8c..deed7060 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -5,6 +5,8 @@ import { ThemeToggle } from './ThemeToggle'
 import { Button } from './ui/Button'
 import { useAuth } from '../context/AuthContext'
 import { checkHealth } from '../api/health'
+import NotificationCenter from './NotificationCenter'
+import SystemStatus from './SystemStatus'
 
 interface LayoutProps {
   children: ReactNode
@@ -27,8 +29,7 @@ export default function Layout({ children }: LayoutProps) {
     { name: 'Remote Servers', path: '/remote-servers', icon: '🖥️' },
     { name: 'Certificates', path: '/certificates', icon: '🔒' },
     { name: 'Import Caddyfile', path: '/import', icon: '📥' },
-    { name: 'Logs', path: '/logs', icon: '📜' },
-    { name: 'Settings', path: '/settings', icon: '⚙️' },
+    { name: 'Settings', path: '/settings/security', icon: '⚙️' },
   ]
 
   return (
@@ -37,6 +38,7 @@ export default function Layout({ children }: LayoutProps) {
       <div className="lg:hidden fixed top-0 left-0 right-0 h-16 bg-white dark:bg-dark-sidebar border-b border-gray-200 dark:border-gray-800 flex items-center justify-between px-4 z-40">
         <h1 className="text-lg font-bold text-gray-900 dark:text-white">CPM+</h1>
         <div className="flex items-center gap-2">
+          <NotificationCenter />
           <ThemeToggle />
           <Button variant="ghost" size="sm" onClick={() => setSidebarOpen(!sidebarOpen)}>
             {sidebarOpen ? '✕' : '☰'}
@@ -58,7 +60,7 @@ export default function Layout({ children }: LayoutProps) {
         <div className="flex flex-col flex-1 px-4 mt-16 lg:mt-0">
           <nav className="flex-1 space-y-1">
             {navigation.map((item) => {
-              const isActive = location.pathname === item.path
+              const isActive = location.pathname === item.path || (item.path.startsWith('/settings') && location.pathname.startsWith('/settings'))
               return (
                 <Link
                   key={item.path}
@@ -107,9 +109,16 @@ export default function Layout({ children }: LayoutProps) {
         />
       )}
 
-      {/* Main content */}
-      <main className="flex-1 overflow-auto pt-16 lg:pt-0">
-        {children}
+      {/* Main Content */}
+      <main className="flex-1 min-w-0 overflow-auto pt-16 lg:pt-0 flex flex-col">
+        {/* Desktop Header */}
+        <header className="hidden lg:flex items-center justify-end px-8 py-4 gap-4 bg-white dark:bg-dark-sidebar border-b border-gray-200 dark:border-gray-800">
+           <SystemStatus />
+           <NotificationCenter />
+        </header>
+        <div className="p-4 lg:p-8 max-w-7xl mx-auto w-full">
+          {children}
+        </div>
       </main>
     </div>
   )
diff --git a/frontend/src/components/NotificationCenter.tsx b/frontend/src/components/NotificationCenter.tsx
new file mode 100644
index 00000000..7998bef6
--- /dev/null
+++ b/frontend/src/components/NotificationCenter.tsx
@@ -0,0 +1,118 @@
+import React, { useState } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { Bell, X, Info, AlertTriangle, AlertCircle, CheckCircle } from 'lucide-react';
+import { getNotifications, markNotificationRead, markAllNotificationsRead } from '../api/system';
+
+const NotificationCenter: React.FC = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const queryClient = useQueryClient();
+
+  const { data: notifications = [] } = useQuery({
+    queryKey: ['notifications'],
+    queryFn: () => getNotifications(true),
+    refetchInterval: 30000, // Poll every 30s
+  });
+
+  const markReadMutation = useMutation({
+    mutationFn: markNotificationRead,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['notifications'] });
+    },
+  });
+
+  const markAllReadMutation = useMutation({
+    mutationFn: markAllNotificationsRead,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['notifications'] });
+    },
+  });
+
+  const unreadCount = notifications.length;
+
+  const getIcon = (type: string) => {
+    switch (type) {
+      case 'success': return <CheckCircle className="w-5 h-5 text-green-500" />;
+      case 'warning': return <AlertTriangle className="w-5 h-5 text-yellow-500" />;
+      case 'error': return <AlertCircle className="w-5 h-5 text-red-500" />;
+      default: return <Info className="w-5 h-5 text-blue-500" />;
+    }
+  };
+
+  return (
+    <div className="relative">
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="relative p-2 text-gray-400 hover:text-white focus:outline-none"
+      >
+        <Bell className="w-6 h-6" />
+        {unreadCount > 0 && (
+          <span className="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 transform translate-x-1/4 -translate-y-1/4 bg-red-600 rounded-full">
+            {unreadCount}
+          </span>
+        )}
+      </button>
+
+      {isOpen && (
+        <>
+          <div
+            className="fixed inset-0 z-10"
+            onClick={() => setIsOpen(false)}
+          ></div>
+          <div className="absolute right-0 z-20 w-80 mt-2 overflow-hidden bg-white rounded-md shadow-lg dark:bg-gray-800 ring-1 ring-black ring-opacity-5">
+            <div className="flex items-center justify-between px-4 py-2 border-b dark:border-gray-700">
+              <h3 className="text-sm font-medium text-gray-900 dark:text-white">Notifications</h3>
+              {unreadCount > 0 && (
+                <button
+                  onClick={() => markAllReadMutation.mutate()}
+                  className="text-xs text-blue-600 hover:text-blue-500 dark:text-blue-400"
+                >
+                  Mark all read
+                </button>
+              )}
+            </div>
+            <div className="max-h-96 overflow-y-auto">
+              {notifications.length === 0 ? (
+                <div className="px-4 py-6 text-center text-sm text-gray-500 dark:text-gray-400">
+                  No new notifications
+                </div>
+              ) : (
+                notifications.map((notification) => (
+                  <div
+                    key={notification.id}
+                    className="flex items-start px-4 py-3 border-b dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700"
+                  >
+                    <div className="flex-shrink-0 mt-0.5">
+                      {getIcon(notification.type)}
+                    </div>
+                    <div className="ml-3 w-0 flex-1">
+                      <p className="text-sm font-medium text-gray-900 dark:text-white">
+                        {notification.title}
+                      </p>
+                      <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+                        {notification.message}
+                      </p>
+                      <p className="mt-1 text-xs text-gray-400">
+                        {new Date(notification.created_at).toLocaleString()}
+                      </p>
+                    </div>
+                    <div className="ml-4 flex-shrink-0 flex">
+                      <button
+                        onClick={() => markReadMutation.mutate(notification.id)}
+                        className="bg-white dark:bg-gray-800 rounded-md inline-flex text-gray-400 hover:text-gray-500 focus:outline-none"
+                      >
+                        <span className="sr-only">Close</span>
+                        <X className="w-4 h-4" />
+                      </button>
+                    </div>
+                  </div>
+                ))
+              )}
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default NotificationCenter;
diff --git a/frontend/src/components/SystemStatus.tsx b/frontend/src/components/SystemStatus.tsx
new file mode 100644
index 00000000..f32b24ae
--- /dev/null
+++ b/frontend/src/components/SystemStatus.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { checkUpdates } from '../api/system';
+import { ExternalLink, CheckCircle, AlertCircle } from 'lucide-react';
+
+const SystemStatus: React.FC = () => {
+  const { data: updateInfo, isLoading } = useQuery({
+    queryKey: ['system-updates'],
+    queryFn: checkUpdates,
+    staleTime: 1000 * 60 * 60, // 1 hour
+  });
+
+  if (isLoading) return null;
+
+  if (!updateInfo?.available) {
+    return (
+      <div className="flex items-center text-sm text-green-500">
+        <CheckCircle className="w-4 h-4 mr-1" />
+        <span className="hidden sm:inline">Up to date</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-center text-sm text-yellow-500 bg-yellow-50 dark:bg-yellow-900/20 px-3 py-1 rounded-full">
+      <AlertCircle className="w-4 h-4 mr-2" />
+      <span className="mr-2 hidden sm:inline">Update available: {updateInfo.latest_version}</span>
+      <a
+        href={updateInfo.changelog_url}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="flex items-center underline hover:text-yellow-600"
+      >
+        <span className="hidden sm:inline">Changelog</span> <ExternalLink className="w-3 h-3 ml-1" />
+      </a>
+    </div>
+  );
+};
+
+export default SystemStatus;