diff --git a/frontend/app/(dashboard)/reports/page.tsx b/frontend/app/(dashboard)/reports/page.tsx
new file mode 100644
index 0000000..108334d
--- /dev/null
+++ b/frontend/app/(dashboard)/reports/page.tsx
@@ -0,0 +1,257 @@
+// frontend/app/(dashboard)/reports/page.tsx
+"use client";
+
+import Link from "next/link";
+import { format } from "date-fns";
+import { BarChart3, Package } from "lucide-react";
+import { clsx } from "clsx";
+import { useAssets } from "@/lib/query/hooks/useAsset";
+import { Asset, AssetStatus } from "@/lib/query/types/asset";
+import { StatusBadge } from "@/components/assets/status-badge";
+
+const STATUS_COLORS: Record<AssetStatus, string> = {
+  [AssetStatus.ACTIVE]: "bg-green-500",
+  [AssetStatus.ASSIGNED]: "bg-blue-500",
+  [AssetStatus.MAINTENANCE]: "bg-yellow-500",
+  [AssetStatus.RETIRED]: "bg-gray-400",
+};
+
+export default function ReportsPage() {
+  const { data, isLoading } = useAssets({ page: 1, limit: 1000 });
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-64 text-gray-400 text-sm">
+        Loading report…
+      </div>
+    );
+  }
+
+  if (!data) return null;
+
+  const assets = data?.assets ?? [];
+  const total = assets.length;
+
+  const byStatus = assets.reduce<Record<AssetStatus, number>>(
+    (acc, asset) => {
+      acc[asset.status] += 1;
+      return acc;
+    },
+    {
+      [AssetStatus.ACTIVE]: 0,
+      [AssetStatus.ASSIGNED]: 0,
+      [AssetStatus.MAINTENANCE]: 0,
+      [AssetStatus.RETIRED]: 0,
+    },
+  );
+
+  const byCategory = Object.values(
+    assets.reduce<Record<string, { name: string; count: number }>>((acc, asset) => {
+      const categoryName = asset.category?.name ?? "Uncategorized";
+      if (!acc[categoryName]) {
+        acc[categoryName] = { name: categoryName, count: 0 };
+      }
+      acc[categoryName].count += 1;
+      return acc;
+    }, {}),
+  );
+
+  const byDepartment = Object.values(
+    assets.reduce<Record<string, { name: string; count: number }>>((acc, asset) => {
+      const departmentName = asset.department?.name ?? "Unassigned";
+      if (!acc[departmentName]) {
+        acc[departmentName] = { name: departmentName, count: 0 };
+      }
+      acc[departmentName].count += 1;
+      return acc;
+    }, {}),
+  );
+
+  const recent = [...assets]
+    .sort(
+      (left, right) =>
+        new Date(right.createdAt).getTime() - new Date(left.createdAt).getTime(),
+    )
+    .slice(0, 10);
+
+  const statusItems = Object.entries(byStatus) as [AssetStatus, number][];
+  const topCategories = [...byCategory]
+    .sort((a, b) => b.count - a.count)
+    .slice(0, 8);
+  const topDepartments = [...byDepartment]
+    .sort((a, b) => b.count - a.count)
+    .slice(0, 8);
+
+  return (
+    <div>
+      {/* Header */}
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold text-gray-900">Reports</h1>
+        <p className="text-sm text-gray-500 mt-1">Asset inventory overview</p>
+      </div>
+
+      {/* Summary cards */}
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+        <div className="bg-white rounded-xl border border-gray-200 p-5 col-span-2 lg:col-span-1">
+          <p className="text-sm text-gray-500">Total Assets</p>
+          <p className="text-3xl font-bold text-gray-900 mt-1">{total}</p>
+        </div>
+        {statusItems.map(([status, count]) => (
+          <div
+            key={status}
+            className="bg-white rounded-xl border border-gray-200 p-5"
+          >
+            <p className="text-sm text-gray-500 capitalize">
+              {status.toLowerCase()}
+            </p>
+            <p className="text-3xl font-bold text-gray-900 mt-1">{count}</p>
+          </div>
+        ))}
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+        {/* By Status bar */}
+        <div className="bg-white rounded-xl border border-gray-200 p-5">
+          <h2 className="text-sm font-semibold text-gray-900 mb-4 flex items-center gap-2">
+            <BarChart3 size={15} className="text-gray-400" />
+            Assets by Status
+          </h2>
+          <div className="space-y-3">
+            {statusItems.map(([status, count]) => {
+              const pct = total > 0 ? Math.round((count / total) * 100) : 0;
+              return (
+                <div key={status}>
+                  <div className="flex justify-between text-xs text-gray-500 mb-1">
+                    <span className="capitalize">{status.toLowerCase()}</span>
+                    <span>
+                      {count} ({pct}%)
+                    </span>
+                  </div>
+                  <div className="h-2 bg-gray-100 rounded-full overflow-hidden">
+                    <div
+                      className={clsx(
+                        "h-full rounded-full transition-all",
+                        STATUS_COLORS[status],
+                      )}
+                      style={{ width: `${pct}%` }}
+                    />
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+
+        {/* By Category */}
+        <div className="bg-white rounded-xl border border-gray-200 p-5">
+          <h2 className="text-sm font-semibold text-gray-900 mb-4 flex items-center gap-2">
+            <BarChart3 size={15} className="text-gray-400" />
+            Assets by Category
+          </h2>
+          {topCategories.length === 0 ? (
+            <p className="text-sm text-gray-400 text-center py-6">No data</p>
+          ) : (
+            <div className="space-y-3">
+              {topCategories.map(({ name, count }) => {
+                const pct = total > 0 ? Math.round((count / total) * 100) : 0;
+                return (
+                  <div key={name}>
+                    <div className="flex justify-between text-xs text-gray-500 mb-1">
+                      <span>{name}</span>
+                      <span>
+                        {count} ({pct}%)
+                      </span>
+                    </div>
+                    <div className="h-2 bg-gray-100 rounded-full overflow-hidden">
+                      <div
+                        className="h-full rounded-full bg-gray-900 transition-all"
+                        style={{ width: `${pct}%` }}
+                      />
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* By Department */}
+        <div className="bg-white rounded-xl border border-gray-200 p-5">
+          <h2 className="text-sm font-semibold text-gray-900 mb-4 flex items-center gap-2">
+            <BarChart3 size={15} className="text-gray-400" />
+            Assets by Department
+          </h2>
+          {topDepartments.length === 0 ? (
+            <p className="text-sm text-gray-400 text-center py-6">No data</p>
+          ) : (
+            <div className="space-y-3">
+              {topDepartments.map(({ name, count }) => {
+                const pct = total > 0 ? Math.round((count / total) * 100) : 0;
+                return (
+                  <div key={name}>
+                    <div className="flex justify-between text-xs text-gray-500 mb-1">
+                      <span>{name}</span>
+                      <span>
+                        {count} ({pct}%)
+                      </span>
+                    </div>
+                    <div className="h-2 bg-gray-100 rounded-full overflow-hidden">
+                      <div
+                        className="h-full rounded-full bg-blue-500 transition-all"
+                        style={{ width: `${pct}%` }}
+                      />
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+
+        {/* Recent Assets */}
+        <div className="bg-white rounded-xl border border-gray-200 p-5">
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="text-sm font-semibold text-gray-900 flex items-center gap-2">
+              <Package size={15} className="text-gray-400" />
+              Recently Added
+            </h2>
+            <Link
+              href="/assets"
+              className="text-xs text-gray-400 hover:text-gray-900 hover:underline"
+            >
+              View all
+            </Link>
+          </div>
+          {recent.length === 0 ? (
+            <p className="text-sm text-gray-400 text-center py-6">
+              No assets yet
+            </p>
+          ) : (
+            <div className="space-y-2">
+              {recent.map((asset: Asset) => (
+                <Link
+                  key={asset.id}
+                  href={`/assets/${asset.id}`}
+                  className="flex items-center justify-between py-2 border-b border-gray-100 last:border-0 hover:bg-gray-50 -mx-2 px-2 rounded-lg transition-colors"
+                >
+                  <div>
+                    <p className="text-sm font-medium text-gray-900">
+                      {asset.name}
+                    </p>
+                    <p className="text-xs text-gray-400 mt-0.5">
+                      {asset.assetId} · {asset.category?.name ?? "—"} ·{" "}
+                      {format(new Date(asset.createdAt), "MMM d, yyyy")}
+                    </p>
+                  </div>
+                  <StatusBadge status={asset.status} />
+                </Link>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/app/(dashboard)/settings/page.tsx b/frontend/app/(dashboard)/settings/page.tsx
new file mode 100644
index 0000000..7203b8d
--- /dev/null
+++ b/frontend/app/(dashboard)/settings/page.tsx
@@ -0,0 +1,256 @@
+"use client";
+
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { User, Lock, CheckCircle } from "lucide-react";
+import { useAuthStore } from "@/store/auth.store";
+import { useUpdateProfile } from "@/lib/query/hooks/query.hook";
+
+// ── Profile schema ──────────────────────────────────────────────
+const profileSchema = z.object({
+  firstName: z.string().min(1, "First name is required"),
+  lastName: z.string().min(1, "Last name is required"),
+});
+type ProfileForm = z.infer<typeof profileSchema>;
+
+// ── Password schema ─────────────────────────────────────────────
+const passwordSchema = z
+  .object({
+    password: z.string().min(8, "Password must be at least 8 characters"),
+    confirmPassword: z.string(),
+  })
+  .refine((d) => d.password === d.confirmPassword, {
+    message: "Passwords don't match",
+    path: ["confirmPassword"],
+  });
+type PasswordForm = z.infer<typeof passwordSchema>;
+
+export default function SettingsPage() {
+  const { user } = useAuthStore();
+  const updateProfile = useUpdateProfile();
+  const [profileSaved, setProfileSaved] = useState(false);
+  const [passwordSaved, setPasswordSaved] = useState(false);
+
+  const profileForm = useForm<ProfileForm>({
+    resolver: zodResolver(profileSchema),
+    defaultValues: {
+      firstName: user?.firstName ?? "",
+      lastName: user?.lastName ?? "",
+    },
+  });
+
+  const passwordForm = useForm<PasswordForm>({
+    resolver: zodResolver(passwordSchema),
+    defaultValues: { password: "", confirmPassword: "" },
+  });
+
+  const onProfileSubmit = (data: ProfileForm) => {
+    updateProfile.mutate(data, {
+      onSuccess: () => {
+        setProfileSaved(true);
+        setTimeout(() => setProfileSaved(false), 3000);
+      },
+    });
+  };
+
+  const onPasswordSubmit = (data: PasswordForm) => {
+    updateProfile.mutate(
+      { password: data.password },
+      {
+        onSuccess: () => {
+          setPasswordSaved(true);
+          passwordForm.reset();
+          setTimeout(() => setPasswordSaved(false), 3000);
+        },
+      },
+    );
+  };
+
+  return (
+    <div className="max-w-2xl">
+      {/* Header */}
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold text-gray-900">Settings</h1>
+        <p className="text-sm text-gray-500 mt-1">
+          Manage your profile and account preferences
+        </p>
+      </div>
+
+      {/* Profile section */}
+      <div className="bg-white rounded-xl border border-gray-200 p-6 mb-5">
+        <div className="flex items-center gap-3 mb-5">
+          <div className="w-8 h-8 rounded-full bg-gray-900 text-white flex items-center justify-center flex-shrink-0">
+            <User size={15} />
+          </div>
+          <div>
+            <h2 className="text-sm font-semibold text-gray-900">Profile</h2>
+            <p className="text-xs text-gray-500">Update your display name</p>
+          </div>
+        </div>
+
+        <form
+          onSubmit={profileForm.handleSubmit(onProfileSubmit)}
+          className="space-y-4"
+        >
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-xs font-medium text-gray-700 mb-1">
+                First name
+              </label>
+              <input
+                {...profileForm.register("firstName")}
+                className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-900"
+              />
+              {profileForm.formState.errors.firstName && (
+                <p className="text-xs text-red-500 mt-1">
+                  {profileForm.formState.errors.firstName.message}
+                </p>
+              )}
+            </div>
+            <div>
+              <label className="block text-xs font-medium text-gray-700 mb-1">
+                Last name
+              </label>
+              <input
+                {...profileForm.register("lastName")}
+                className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-900"
+              />
+              {profileForm.formState.errors.lastName && (
+                <p className="text-xs text-red-500 mt-1">
+                  {profileForm.formState.errors.lastName.message}
+                </p>
+              )}
+            </div>
+          </div>
+
+          {/* Email (read-only) */}
+          <div>
+            <label className="block text-xs font-medium text-gray-700 mb-1">
+              Email address
+            </label>
+            <input
+              type="email"
+              value={user?.email ?? ""}
+              disabled
+              className="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg bg-gray-50 text-gray-400 cursor-not-allowed"
+            />
+            <p className="text-xs text-gray-400 mt-1">
+              Email cannot be changed.
+            </p>
+          </div>
+
+          {/* Role (read-only) */}
+          <div>
+            <label className="block text-xs font-medium text-gray-700 mb-1">
+              Role
+            </label>
+            <input
+              value={
+                user?.role
+                  ? user.role.charAt(0).toUpperCase() + user.role.slice(1)
+                  : ""
+              }
+              disabled
+              className="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg bg-gray-50 text-gray-400 cursor-not-allowed"
+            />
+          </div>
+
+          <div className="flex items-center gap-3 pt-1">
+            <button
+              type="submit"
+              disabled={updateProfile.isPending}
+              className="px-4 py-2 text-sm font-medium bg-gray-900 text-white rounded-lg hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            >
+              {updateProfile.isPending ? "Saving…" : "Save changes"}
+            </button>
+            {profileSaved && (
+              <span className="flex items-center gap-1.5 text-xs text-green-600">
+                <CheckCircle size={13} />
+                Saved successfully
+              </span>
+            )}
+            {updateProfile.isError && (
+              <span className="text-xs text-red-500">
+                Failed to save. Try again.
+              </span>
+            )}
+          </div>
+        </form>
+      </div>
+
+      {/* Password section */}
+      <div className="bg-white rounded-xl border border-gray-200 p-6">
+        <div className="flex items-center gap-3 mb-5">
+          <div className="w-8 h-8 rounded-full bg-gray-100 text-gray-600 flex items-center justify-center flex-shrink-0">
+            <Lock size={15} />
+          </div>
+          <div>
+            <h2 className="text-sm font-semibold text-gray-900">
+              Change Password
+            </h2>
+            <p className="text-xs text-gray-500">
+              Choose a strong password (min. 8 characters)
+            </p>
+          </div>
+        </div>
+
+        <form
+          onSubmit={passwordForm.handleSubmit(onPasswordSubmit)}
+          className="space-y-4"
+        >
+          <div>
+            <label className="block text-xs font-medium text-gray-700 mb-1">
+              New password
+            </label>
+            <input
+              {...passwordForm.register("password")}
+              type="password"
+              placeholder="••••••••"
+              className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-900"
+            />
+            {passwordForm.formState.errors.password && (
+              <p className="text-xs text-red-500 mt-1">
+                {passwordForm.formState.errors.password.message}
+              </p>
+            )}
+          </div>
+
+          <div>
+            <label className="block text-xs font-medium text-gray-700 mb-1">
+              Confirm new password
+            </label>
+            <input
+              {...passwordForm.register("confirmPassword")}
+              type="password"
+              placeholder="••••••••"
+              className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-900"
+            />
+            {passwordForm.formState.errors.confirmPassword && (
+              <p className="text-xs text-red-500 mt-1">
+                {passwordForm.formState.errors.confirmPassword.message}
+              </p>
+            )}
+          </div>
+
+          <div className="flex items-center gap-3 pt-1">
+            <button
+              type="submit"
+              disabled={updateProfile.isPending}
+              className="px-4 py-2 text-sm font-medium bg-gray-900 text-white rounded-lg hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            >
+              {updateProfile.isPending ? "Updating…" : "Update password"}
+            </button>
+            {passwordSaved && (
+              <span className="flex items-center gap-1.5 text-xs text-green-600">
+                <CheckCircle size={13} />
+                Password updated
+              </span>
+            )}
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 3b2dabd..619fff0 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -18,7 +18,6 @@
         "@tanstack/react-table": "^8.21.3",
         "axios": "^1.13.2",
         "clsx": "^2.1.1",
-        "create-next-app": "^15.5.9",
         "date-fns": "^4.1.0",
         "jspdf": "^4.0.0",
         "lucide-react": "^0.562.0",
@@ -4497,18 +4496,6 @@
         "url": "https://opencollective.com/core-js"
       }
     },
-    "node_modules/create-next-app": {
-      "version": "15.5.9",
-      "resolved": "https://registry.npmjs.org/create-next-app/-/create-next-app-15.5.9.tgz",
-      "integrity": "sha512-B489ZPUb555IuCM4Ggevi3dzHqpzdZXUkEAT/RFz8JKG3HtxYC8PacOIjSKKgXDfbsHza+ckmoScjwRgaV4L7w==",
-      "license": "MIT",
-      "bin": {
-        "create-next-app": "dist/index.js"
-      },
-      "engines": {
-        "node": ">=18.18.0"
-      }
-    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
diff --git a/frontend/store/auth.store.ts b/frontend/store/auth.store.ts
index 2615e1d..9949964 100644
--- a/frontend/store/auth.store.ts
+++ b/frontend/store/auth.store.ts
@@ -4,7 +4,10 @@ import { persist } from 'zustand/middleware';
 interface User {
   id: string;
   email: string;
-  name: string;
+  firstName: string;
+  lastName: string;
+  role: string;
+  name?: string;
 }
 
 interface AuthStore {