diff --git a/src/app/admin/products/page.tsx b/src/app/admin/products/page.tsx
index 2f6ff4a..2a02294 100644
--- a/src/app/admin/products/page.tsx
+++ b/src/app/admin/products/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { Suspense, useEffect, useState } from "react";
 import Link from "next/link";
 import { useSearchParams } from "next/navigation";
 
@@ -109,7 +109,7 @@ function ConfirmModal({
   );
 }
 
-export default function AdminProductsPage() {
+function AdminProductsPageInner() {
   const searchParams = useSearchParams();
   const tab = searchParams.get("tab");
   const isDeletedTab = tab === "deleted";
@@ -392,3 +392,11 @@ export default function AdminProductsPage() {
     </div>
   );
 }
+
+export default function AdminProductsPage() {
+  return (
+    <Suspense fallback={<div className="py-24 text-sm font-semibold text-on-surface-variant">Loading products...</div>}>
+      <AdminProductsPageInner />
+    </Suspense>
+  );
+}
diff --git a/src/app/admin/review/[productId]/page.tsx b/src/app/admin/review/[productId]/page.tsx
index 087281a..3a4469d 100644
--- a/src/app/admin/review/[productId]/page.tsx
+++ b/src/app/admin/review/[productId]/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useParams, useRouter, useSearchParams } from "next/navigation";
-import { useEffect, useState } from "react";
+import { Suspense, useEffect, useState } from "react";
 
 const API_BASE = process.env.NEXT_PUBLIC_API_URL || "https://be.inatrading.co.id";
 
@@ -196,7 +196,7 @@ function ProductColumn({ product, label, accent }: { product: any; label: string
 
 // ─── Main Page ─────────────────────────────────────────────────────────────
 
-export default function AdminReviewDetailPage() {
+function AdminReviewDetailPageInner() {
   const params = useParams<{ productId: string }>();
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -474,3 +474,11 @@ export default function AdminReviewDetailPage() {
     </>
   );
 }
+
+export default function AdminReviewDetailPage() {
+  return (
+    <Suspense fallback={<div className="m-6 py-24 text-sm font-semibold text-slate-400">Loading review detail...</div>}>
+      <AdminReviewDetailPageInner />
+    </Suspense>
+  );
+}
diff --git a/src/components/admin-product-submenu-nav.tsx b/src/components/admin-product-submenu-nav.tsx
index 50010b9..d31c2d0 100644
--- a/src/components/admin-product-submenu-nav.tsx
+++ b/src/components/admin-product-submenu-nav.tsx
@@ -2,13 +2,14 @@
 
 import Link from "next/link";
 import { usePathname, useSearchParams } from "next/navigation";
+import { Suspense } from "react";
 
 const adminProductSubmenu = [
   { label: "All Product", href: "/admin/products" },
   { label: "Deleted", href: "/admin/products?tab=deleted" },
 ];
 
-export function AdminProductSubmenuNav() {
+function AdminProductSubmenuNavInner() {
   const pathname = usePathname();
   const searchParams = useSearchParams();
   const currentTab = searchParams.get("tab") ?? "";
@@ -45,3 +46,11 @@ export function AdminProductSubmenuNav() {
     </div>
   );
 }
+
+export function AdminProductSubmenuNav() {
+  return (
+    <Suspense fallback={null}>
+      <AdminProductSubmenuNavInner />
+    </Suspense>
+  );
+}