diff --git a/frontend/app/(dashboard)/settings/page.tsx b/frontend/app/(dashboard)/settings/page.tsx
new file mode 100644
index 0000000..c841ce2
--- /dev/null
+++ b/frontend/app/(dashboard)/settings/page.tsx
@@ -0,0 +1,118 @@
+'use client';
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Settings, User, Bell, Shield, Database } from 'lucide-react';
+import Link from 'next/link';
+import { useAuthStore } from '@/lib/stores/auth-store';
+
+export default function SettingsPage() {
+  const { user } = useAuthStore();
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-3xl font-bold">Settings</h1>
+        <p className="text-muted-foreground mt-1">
+          Manage your account and application settings
+        </p>
+      </div>
+
+      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+        <Card className="hover:shadow-md transition-shadow cursor-pointer">
+          <Link href="/settings/profile">
+            <CardHeader className="pb-3">
+              <CardTitle className="flex items-center gap-2 text-lg">
+                <User className="h-5 w-5" />
+                Profile
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="text-sm text-muted-foreground">
+                Update your personal information and preferences
+              </p>
+            </CardContent>
+          </Link>
+        </Card>
+
+        <Card className="hover:shadow-md transition-shadow cursor-pointer">
+          <Link href="/settings/notifications">
+            <CardHeader className="pb-3">
+              <CardTitle className="flex items-center gap-2 text-lg">
+                <Bell className="h-5 w-5" />
+                Notifications
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="text-sm text-muted-foreground">
+                Configure email and in-app notifications
+              </p>
+            </CardContent>
+          </Link>
+        </Card>
+
+        <Card className="hover:shadow-md transition-shadow cursor-pointer">
+          <Link href="/settings/security">
+            <CardHeader className="pb-3">
+              <CardTitle className="flex items-center gap-2 text-lg">
+                <Shield className="h-5 w-5" />
+                Security
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="text-sm text-muted-foreground">
+                Manage password and authentication settings
+              </p>
+            </CardContent>
+          </Link>
+        </Card>
+
+        {user?.role === 'SUPERADMIN' && (
+          <Card className="hover:shadow-md transition-shadow cursor-pointer">
+            <Link href="/admin">
+              <CardHeader className="pb-3">
+                <CardTitle className="flex items-center gap-2 text-lg">
+                  <Database className="h-5 w-5" />
+                  System Admin
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="text-sm text-muted-foreground">
+                  System administration and configuration
+                </p>
+              </CardContent>
+            </Link>
+          </Card>
+        )}
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Settings className="h-5 w-5" />
+            Quick Info
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div>
+            <p className="font-medium">Current User</p>
+            <p className="text-sm text-muted-foreground">
+              {user?.fullName || user?.username || 'Unknown'} ({user?.role})
+            </p>
+          </div>
+          <div>
+            <p className="font-medium">Organization</p>
+            <p className="text-sm text-muted-foreground">
+              {user?.primaryOrganization?.organizationName || 'Not assigned'}
+            </p>
+          </div>
+          <div>
+            <p className="font-medium">Application</p>
+            <p className="text-sm text-muted-foreground">
+              LCBP3 Document Management System v1.8.5
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/frontend/next.config.mjs b/frontend/next.config.mjs
index 36e540f..1a80713 100644
--- a/frontend/next.config.mjs
+++ b/frontend/next.config.mjs
@@ -78,6 +78,18 @@ const nextConfig = {
             key: 'X-Content-Type-Options',
             value: 'nosniff',
           },
+          {
+            key: 'Content-Security-Policy',
+            value: [
+              "default-src 'self'",
+              "script-src 'self' 'unsafe-eval'", // จำเป็นสำหรับ Workflow DSL Engine (new Function())
+              "style-src 'self' 'unsafe-inline'",
+              "img-src 'self' data: https:",
+              "font-src 'self'",
+              "connect-src 'self' ws: wss:",
+              "frame-src 'self'",
+            ].join('; '),
+          },
         ],
       },
     ];