diff --git a/Frontend/erp-system/app/dashboard/settings/page.tsx b/Frontend/erp-system/app/dashboard/settings/page.tsx
new file mode 100644
index 0000000..dbe71d9
--- /dev/null
+++ b/Frontend/erp-system/app/dashboard/settings/page.tsx
@@ -0,0 +1,54 @@
+import Link from "next/link"
+import { ShieldCheck, SlidersHorizontal, Users } from "lucide-react"
+
+const cards = [
+  {
+    title: "Roles",
+    href: "/dashboard/settings/roles",
+    icon: ShieldCheck,
+    description: "Manage roles and navigation permissions",
+  },
+  {
+    title: "Users",
+    href: "/dashboard/settings/users",
+    icon: Users,
+    description: "Create users and assign their roles",
+  },
+  {
+    title: "Product Configuration",
+    href: "/dashboard/products/settings",
+    icon: SlidersHorizontal,
+    description: "Configure product and master-data options",
+  },
+]
+
+export default function SettingsPage() {
+  return (
+    <div className="flex flex-col gap-6">
+      <div>
+        <h1 className="text-2xl font-bold text-foreground">ERP Settings</h1>
+        <p className="text-base text-muted-foreground">
+          Manage ERP access, users, and system configuration.
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {cards.map((card) => (
+          <Link
+            key={card.href}
+            href={card.href}
+            className="flex items-center gap-4 rounded-2xl border bg-card p-5 shadow-sm ring-1 ring-foreground/5 transition-colors hover:bg-muted"
+          >
+            <div className="flex size-11 shrink-0 items-center justify-center rounded-xl bg-primary/10">
+              <card.icon className="size-5 text-primary" />
+            </div>
+            <div>
+              <p className="font-semibold text-foreground">{card.title}</p>
+              <p className="text-sm text-muted-foreground">{card.description}</p>
+            </div>
+          </Link>
+        ))}
+      </div>
+    </div>
+  )
+}