diff --git a/app/admin/applications/[id]/page.tsx b/app/admin/applications/[id]/page.tsx
index db3b0cc..e286a7f 100644
--- a/app/admin/applications/[id]/page.tsx
+++ b/app/admin/applications/[id]/page.tsx
@@ -1,27 +1,49 @@
 "use client";
 
 import Link from "next/link";
-import { getApplicationById } from "@/services/mockApplications";
-import ApproveRejectButtons from "@/components/admin/ApproveRejectButtons";
+import { useEffect, useState } from "react";
 
-type Props = {
-  params: Promise<{ id: string }>;
+const STATUS_STYLES: Record<string, string> = {
+  pending:  "bg-amber-50 text-amber-700 ring-1 ring-amber-200",
+  approved: "bg-emerald-50 text-emerald-700 ring-1 ring-emerald-200",
+  rejected: "bg-red-50 text-red-600 ring-1 ring-red-200",
 };
 
-export default async function ApplicationDetail({ params }: Props) {
-  const { id } = await params;
-  const app = getApplicationById(id);
-
-  if (!app) {
-    return (
-      <div className="p-6">
-        <h2 className="text-xl font-semibold">Application not found</h2>
-        <p className="mt-2">No mock application matches id {id}.</p>
-        <Link href="/admin/applications" className="text-blue-600 hover:underline mt-4 inline-block">
-          Back to applications
-        </Link>
-      </div>
-    );
+interface Application {
+  id: string;
+  type: string;
+  status: string;
+  submitterName: string;
+  submitterEmail: string;
+  payload: Record<string, unknown>;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export default function ApplicationDetail({ params }: { params: { id: string } }) {
+  const [app, setApp] = useState<Application | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [actioning, setActioning] = useState<"approved" | "rejected" | null>(null);
+  const [actionError, setActionError] = useState<string | null>(null);
+
+  async function handleAction(status: "approved" | "rejected") {
+    setActioning(status);
+    setActionError(null);
+    try {
+      const res = await fetch(`/api/admin/applications/${params.id}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ status }),
+      });
+      if (!res.ok) { const b = await res.json(); throw new Error(b.error ?? "Failed to update"); }
+      const { data } = await res.json();
+      setApp(data);
+    } catch (err: any) {
+      setActionError(err.message);
+    } finally {
+      setActioning(null);
+    }
   }
 
   useEffect(() => {
@@ -61,15 +83,14 @@ export default async function ApplicationDetail({ params }: Props) {
   if (!app) return null;
 
   return (
-    <div className="p-6">
-      <div className="flex items-center justify-between">
-        <h1 className="text-2xl font-semibold">Application: {app.name}</h1>
-        <div className="flex items-center gap-4">
-          <ApproveRejectButtons id={app.id} />
-          <Link href="/admin/applications" className="text-blue-600 hover:underline">
-            Back
-          </Link>
+    <PageShell>
+      {/* Header */}
+      <div className="flex items-start justify-between mb-8">
+        <div>
+          <h1 className="text-2xl font-semibold text-gray-900">{app.submitterName}</h1>
+          <p className="text-sm text-gray-500 mt-1">{app.submitterEmail}</p>
         </div>
+        <BackLink />
       </div>
 
       <div className="bg-white border border-gray-200 rounded-lg shadow-sm mb-6">
diff --git a/app/api/admin/applications/route.ts b/app/api/admin/applications/route.ts
index 71fcaf9..2d74c2b 100644
--- a/app/api/admin/applications/route.ts
+++ b/app/api/admin/applications/route.ts
@@ -1,7 +1,7 @@
 import { NextResponse } from "next/server";
 import { prisma } from "@/lib/prisma";
 
-export async function GET() {
+export async function GET(request: NextRequest) {
   try {
     const session = await auth();
     if (!session?.user?.email) {
@@ -43,6 +43,7 @@ export async function GET() {
     });
 
     return NextResponse.json({ data: applications }, { status: 200 });
+
   } catch (err) {
     console.error(err);
     return NextResponse.json(