diff --git a/app/portal/laser-settings/Client.tsx b/app/portal/laser-settings/Client.tsx
new file mode 100644
index 00000000..466588a0
--- /dev/null
+++ b/app/portal/laser-settings/Client.tsx
@@ -0,0 +1,58 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import { useSearchParams } from "next/navigation";
+
+const SettingsSwitcher = dynamic(
+    () => import("@/components/portal/SettingsSwitcher"),
+                                 { ssr: false }
+);
+
+function DetailsFrame({ src }: { src: string }) {
+    return (
+        <iframe
+        key={src}
+        src={src}
+        className="w-full h-[70vh] rounded-md border"
+        sandbox="allow-same-origin allow-scripts allow-forms allow-popups"
+        />
+    );
+}
+
+export default function LaserSettingsClient() {
+    const search = useSearchParams();
+    const t = (search.get("t") || "fiber").toLowerCase();
+    const id = search.get("id");
+
+    // map tab -> canonical detail route
+    const detailSrc =
+    !id
+    ? null
+    : t === "fiber"
+    ? `/settings/fiber/${id}`
+    : t === "uv"
+    ? `/settings/uv/${id}`
+    : t === "co2-galvo"
+    ? `/settings/co2-galvo/${id}`
+    : t === "co2-gantry"
+    ? `/settings/co2-gantry/${id}`
+    : null;
+
+    return (
+        <div className="space-y-4">
+        <div className="rounded-lg border p-6">
+        <h2 className="mb-4 text-xl font-semibold">Laser Settings</h2>
+        <SettingsSwitcher />
+        </div>
+
+        {detailSrc && (
+            <div className="rounded-lg border p-4">
+            <div className="mb-2 text-sm opacity-70">
+            Viewing detail #{id} ({t})
+            </div>
+            <DetailsFrame src={detailSrc} />
+            </div>
+        )}
+        </div>
+    );
+}
diff --git a/app/portal/laser-settings/page.tsx b/app/portal/laser-settings/page.tsx
index ec7e589b..58dd0c2e 100644
--- a/app/portal/laser-settings/page.tsx
+++ b/app/portal/laser-settings/page.tsx
@@ -1,65 +1,8 @@
-"use client";
-
-import dynamic from "next/dynamic";
-import { useSearchParams, useRouter } from "next/navigation";
-
-// Your existing list/tabs component for the four settings lists:
-const SettingsSwitcher = dynamic(() => import("@/components/portal/SettingsSwitcher"), { ssr: false });
+// app/portal/laser-settings/page.tsx
+import LaserSettingsClient from "./Client";
 
 export const metadata = { title: "MakerDash • Laser Settings" };
 
-export default function LaserSettingsPortalPage() {
-    const search = useSearchParams();
-    const router = useRouter();
-    const t = (search.get("t") || "fiber").toLowerCase(); // fiber | uv | co2-galvo | co2-gantry
-    const id = search.get("id");
-
-    // Build canonical detail route we already have in /app/settings/*/[id]/
-    const embedSrc = id
-    ? t === "fiber"
-    ? `/settings/fiber/${encodeURIComponent(id)}`
-    : t === "uv"
-    ? `/settings/uv/${encodeURIComponent(id)}`
-    : t === "co2-galvo"
-    ? `/settings/co2-galvo/${encodeURIComponent(id)}`
-    : t === "co2-gantry"
-    ? `/settings/co2-gantry/${encodeURIComponent(id)}`
-    : null
-    : null;
-
-    const goList = () => router.replace(`/portal/laser-settings?t=${encodeURIComponent(t)}`);
-
-    return (
-        <div className="rounded-lg border p-6">
-        <div className="mb-4 flex items-center justify-between">
-        <h2 className="text-xl font-semibold">Laser Settings</h2>
-        <div className="flex gap-2">
-        <button
-        onClick={goList}
-        className={`rounded-md border px-3 py-1 text-sm ${id ? "opacity-80 hover:opacity-100" : "bg-accent text-background"}`}
-        >
-        List
-        </button>
-        <button
-        disabled={!id}
-        className={`rounded-md border px-3 py-1 text-sm ${id ? "bg-accent text-background" : "opacity-40 cursor-not-allowed"}`}
-        >
-        Details{ id ? ` #${id}` : "" }
-        </button>
-        </div>
-        </div>
-
-        {/* List view (existing) */}
-        {!id && <SettingsSwitcher />}
-
-        {/* Detail view (embed canonical page) */}
-        {id && embedSrc && (
-            <iframe
-            key={embedSrc}
-            src={embedSrc}
-            className="mt-4 h-[calc(100vh-260px)] w-full rounded-md border"
-            />
-        )}
-        </div>
-    );
+export default function Page() {
+    return <LaserSettingsClient />;
 }
diff --git a/app/portal/laser-sources/Client.tsx b/app/portal/laser-sources/Client.tsx
new file mode 100644
index 00000000..6f68fd32
--- /dev/null
+++ b/app/portal/laser-sources/Client.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import { useSearchParams } from "next/navigation";
+
+const LasersList = dynamic(() => import("@/app/lasers/page"), { ssr: false });
+
+function DetailsFrame({ src }: { src: string }) {
+    return (
+        <iframe
+        key={src}
+        src={src}
+        className="w-full h-[70vh] rounded-md border"
+        sandbox="allow-same-origin allow-scripts allow-forms allow-popups"
+        />
+    );
+}
+
+export default function LaserSourcesClient() {
+    const search = useSearchParams();
+    const id = search.get("id");
+
+    return (
+        <div className="space-y-4">
+        <div className="rounded-lg border p-6">
+        <h2 className="mb-4 text-xl font-semibold">Laser Sources</h2>
+        <LasersList />
+        </div>
+
+        {id && (
+            <div className="rounded-lg border p-4">
+            <div className="mb-2 text-sm opacity-70">Viewing source #{id}</div>
+            <DetailsFrame src={`/lasers/${id}`} />
+            </div>
+        )}
+        </div>
+    );
+}
diff --git a/app/portal/laser-sources/page.tsx b/app/portal/laser-sources/page.tsx
index 539a2524..78c4c7f5 100644
--- a/app/portal/laser-sources/page.tsx
+++ b/app/portal/laser-sources/page.tsx
@@ -1,48 +1,8 @@
-"use client";
-
-import dynamic from "next/dynamic";
-import { useSearchParams, useRouter } from "next/navigation";
-
-const LasersList = dynamic(() => import("@/app/lasers/page"), { ssr: false });
+// app/portal/laser-sources/page.tsx
+import LaserSourcesClient from "./Client";
 
 export const metadata = { title: "MakerDash • Laser Sources" };
 
-export default function LaserSourcesPortalPage() {
-    const search = useSearchParams();
-    const router = useRouter();
-    const id = search.get("id");
-
-    const goList = () => router.replace("/portal/laser-sources");
-
-    return (
-        <div className="rounded-lg border p-6">
-        <div className="mb-4 flex items-center justify-between">
-        <h2 className="text-xl font-semibold">Laser Sources</h2>
-        <div className="flex gap-2">
-        <button
-        onClick={goList}
-        className={`rounded-md border px-3 py-1 text-sm ${id ? "opacity-80 hover:opacity-100" : "bg-accent text-background"}`}
-        >
-        List
-        </button>
-        <button
-        disabled={!id}
-        className={`rounded-md border px-3 py-1 text-sm ${id ? "bg-accent text-background" : "opacity-40 cursor-not-allowed"}`}
-        >
-        Details{ id ? ` #${id}` : "" }
-        </button>
-        </div>
-        </div>
-
-        {!id && <LasersList />}
-
-        {id && (
-            <iframe
-            key={id}
-            src={`/lasers/${encodeURIComponent(id)}`}
-            className="mt-4 h-[calc(100vh-260px)] w-full rounded-md border"
-            />
-        )}
-        </div>
-    );
+export default function Page() {
+    return <LaserSourcesClient />;
 }
diff --git a/app/portal/materials/Client.tsx b/app/portal/materials/Client.tsx
new file mode 100644
index 00000000..3ed6ac29
--- /dev/null
+++ b/app/portal/materials/Client.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import { useSearchParams } from "next/navigation";
+
+const MaterialsList = dynamic(
+    () => import("@/app/materials/materials/page"),
+                              { ssr: false }
+);
+const CoatingsList = dynamic(
+    () => import("@/app/materials/materials-coatings/page"),
+                             { ssr: false }
+);
+
+function DetailsFrame({ src }: { src: string }) {
+    return (
+        <iframe
+        key={src}
+        src={src}
+        className="w-full h-[70vh] rounded-md border"
+        sandbox="allow-same-origin allow-scripts allow-forms allow-popups"
+        />
+    );
+}
+
+export default function MaterialsClient() {
+    const search = useSearchParams();
+    const t = (search.get("t") || "materials").toLowerCase();
+    const id = search.get("id");
+
+    const detailSrc =
+    !id
+    ? null
+    : t === "materials"
+    ? `/materials/materials/${id}`
+    : t === "materials-coatings"
+    ? `/materials/materials-coatings/${id}`
+    : null;
+
+    return (
+        <div className="space-y-4">
+        <div className="rounded-lg border p-6">
+        <h2 className="mb-4 text-xl font-semibold">Materials</h2>
+        {t === "materials" ? <MaterialsList /> : <CoatingsList />}
+        </div>
+
+        {detailSrc && (
+            <div className="rounded-lg border p-4">
+            <div className="mb-2 text-sm opacity-70">
+            Viewing {t.replace("-", " ")} #{id}
+            </div>
+            <DetailsFrame src={detailSrc} />
+            </div>
+        )}
+        </div>
+    );
+}
diff --git a/app/portal/materials/page.tsx b/app/portal/materials/page.tsx
index 4d078a67..cd284377 100644
--- a/app/portal/materials/page.tsx
+++ b/app/portal/materials/page.tsx
@@ -1,67 +1,8 @@
-"use client";
-
-import dynamic from "next/dynamic";
-import { useSearchParams, useRouter } from "next/navigation";
-
-const MaterialsList = dynamic(() => import("@/app/materials/materials/page"), { ssr: false });
-const CoatingsList  = dynamic(() => import("@/app/materials/materials-coatings/page"), { ssr: false });
+// app/portal/materials/page.tsx
+import MaterialsClient from "./Client";
 
 export const metadata = { title: "MakerDash • Materials" };
 
-export default function MaterialsPortalPage() {
-    const search = useSearchParams();
-    const router = useRouter();
-    const t = (search.get("t") || "materials").toLowerCase(); // materials | materials-coatings
-    const id = search.get("id");
-
-    const embedSrc = id
-    ? t === "materials"
-    ? `/materials/materials/${encodeURIComponent(id)}`
-    : `/materials/materials-coatings/${encodeURIComponent(id)}`
-    : null;
-
-    const go = (tab: string) => {
-        const url = new URL(window.location.href);
-        url.searchParams.set("t", tab);
-        url.searchParams.delete("id");
-        router.replace(url.pathname + "?" + url.searchParams.toString());
-    };
-
-    return (
-        <div className="rounded-lg border p-6">
-        <div className="mb-4 flex items-center justify-between">
-        <h2 className="text-xl font-semibold">Materials</h2>
-        <div className="flex gap-2">
-        <button
-        onClick={() => go("materials")}
-        className={`rounded-md border px-3 py-1 text-sm ${t === "materials" && !id ? "bg-accent text-background" : "opacity-80 hover:opacity-100"}`}
-        >
-        Materials
-        </button>
-        <button
-        onClick={() => go("materials-coatings")}
-        className={`rounded-md border px-3 py-1 text-sm ${t === "materials-coatings" && !id ? "bg-accent text-background" : "opacity-80 hover:opacity-100"}`}
-        >
-        Coatings
-        </button>
-        <button
-        disabled={!id}
-        className={`rounded-md border px-3 py-1 text-sm ${id ? "bg-accent text-background" : "opacity-40 cursor-not-allowed"}`}
-        >
-        Details{ id ? ` #${id}` : "" }
-        </button>
-        </div>
-        </div>
-
-        {!id && (t === "materials" ? <MaterialsList /> : <CoatingsList />)}
-
-        {id && embedSrc && (
-            <iframe
-            key={embedSrc}
-            src={embedSrc}
-            className="mt-4 h-[calc(100vh-260px)] w-full rounded-md border"
-            />
-        )}
-        </div>
-    );
+export default function Page() {
+    return <MaterialsClient />;
 }
diff --git a/app/portal/projects/Client.tsx b/app/portal/projects/Client.tsx
new file mode 100644
index 00000000..30843b51
--- /dev/null
+++ b/app/portal/projects/Client.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import { useSearchParams } from "next/navigation";
+
+const ProjectsList = dynamic(() => import("@/app/projects/page"), { ssr: false });
+
+function DetailsFrame({ src }: { src: string }) {
+    return (
+        <iframe
+        key={src}
+        src={src}
+        className="w-full h-[70vh] rounded-md border"
+        sandbox="allow-same-origin allow-scripts allow-forms allow-popups"
+        />
+    );
+}
+
+export default function ProjectsClient() {
+    const search = useSearchParams();
+    const id = search.get("id");
+
+    return (
+        <div className="space-y-4">
+        <div className="rounded-lg border p-6">
+        <h2 className="mb-4 text-xl font-semibold">Projects</h2>
+        <ProjectsList />
+        </div>
+
+        {id && (
+            <div className="rounded-lg border p-4">
+            <div className="mb-2 text-sm opacity-70">Viewing project #{id}</div>
+            <DetailsFrame src={`/projects/${id}`} />
+            </div>
+        )}
+        </div>
+    );
+}
diff --git a/app/portal/projects/page.tsx b/app/portal/projects/page.tsx
index d1878667..6928468b 100644
--- a/app/portal/projects/page.tsx
+++ b/app/portal/projects/page.tsx
@@ -1,48 +1,8 @@
-"use client";
-
-import dynamic from "next/dynamic";
-import { useSearchParams, useRouter } from "next/navigation";
-
-const ProjectsList = dynamic(() => import("@/app/projects/page"), { ssr: false });
+// app/portal/projects/page.tsx
+import ProjectsClient from "./Client";
 
 export const metadata = { title: "MakerDash • Projects" };
 
-export default function ProjectsPortalPage() {
-    const search = useSearchParams();
-    const router = useRouter();
-    const id = search.get("id");
-
-    const goList = () => router.replace("/portal/projects");
-
-    return (
-        <div className="rounded-lg border p-6">
-        <div className="mb-4 flex items-center justify-between">
-        <h2 className="text-xl font-semibold">Projects</h2>
-        <div className="flex gap-2">
-        <button
-        onClick={goList}
-        className={`rounded-md border px-3 py-1 text-sm ${id ? "opacity-80 hover:opacity-100" : "bg-accent text-background"}`}
-        >
-        List
-        </button>
-        <button
-        disabled={!id}
-        className={`rounded-md border px-3 py-1 text-sm ${id ? "bg-accent text-background" : "opacity-40 cursor-not-allowed"}`}
-        >
-        Details{ id ? ` #${id}` : "" }
-        </button>
-        </div>
-        </div>
-
-        {!id && <ProjectsList />}
-
-        {id && (
-            <iframe
-            key={id}
-            src={`/projects/${encodeURIComponent(id)}`}
-            className="mt-4 h-[calc(100vh-260px)] w-full rounded-md border"
-            />
-        )}
-        </div>
-    );
+export default function Page() {
+    return <ProjectsClient />;
 }