diff --git a/client/web/src/pages/admin/_shared/grading/GradingActionButtons.tsx b/client/web/src/pages/admin/_shared/grading/GradingActionButtons.tsx
new file mode 100644
index 00000000..1d6e305a
--- /dev/null
+++ b/client/web/src/pages/admin/_shared/grading/GradingActionButtons.tsx
@@ -0,0 +1,96 @@
+import { Loader2, Minus, ThumbsDown, ThumbsUp } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+interface GradingActionButtonsProps {
+  disabled: boolean;
+  onReject: () => void;
+  onWaitlist: () => void;
+  onAccept: () => void;
+  label?: string;
+}
+
+export function GradingActionButtons({
+  disabled,
+  onReject,
+  onWaitlist,
+  onAccept,
+  label = "Cast your vote",
+}: GradingActionButtonsProps) {
+  return (
+    <div>
+      <Label className="text-xs text-muted-foreground">{label}</Label>
+      <div className="flex flex-col gap-2 mt-2">
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="outline"
+              className="w-full cursor-pointer hover:bg-red-50 hover:text-red-700 hover:border-red-300 disabled:opacity-50 disabled:cursor-not-allowed"
+              onClick={onReject}
+              disabled={disabled}
+            >
+              {disabled ? (
+                <Loader2 className="h-4 w-4 mr-1.5 animate-spin" />
+              ) : (
+                <ThumbsDown className="h-4 w-4 mr-1.5" />
+              )}
+              Reject
+              <kbd className="ml-auto px-1.5 py-0.5 bg-muted rounded text-[10px] font-mono text-muted-foreground">
+                ⌘J
+              </kbd>
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Reject (⌘J)</TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="outline"
+              className="w-full cursor-pointer hover:bg-yellow-50 hover:text-yellow-700 hover:border-yellow-300 disabled:opacity-50 disabled:cursor-not-allowed"
+              onClick={onWaitlist}
+              disabled={disabled}
+            >
+              {disabled ? (
+                <Loader2 className="h-4 w-4 mr-1.5 animate-spin" />
+              ) : (
+                <Minus className="h-4 w-4 mr-1.5" />
+              )}
+              Waitlist
+              <kbd className="ml-auto px-1.5 py-0.5 bg-muted rounded text-[10px] font-mono text-muted-foreground">
+                ⌘K
+              </kbd>
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Waitlist (⌘K)</TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="outline"
+              className="w-full cursor-pointer hover:bg-green-50 hover:text-green-700 hover:border-green-300 disabled:opacity-50 disabled:cursor-not-allowed"
+              onClick={onAccept}
+              disabled={disabled}
+            >
+              {disabled ? (
+                <Loader2 className="h-4 w-4 mr-1.5 animate-spin" />
+              ) : (
+                <ThumbsUp className="h-4 w-4 mr-1.5" />
+              )}
+              Accept
+              <kbd className="ml-auto px-1.5 py-0.5 bg-muted rounded text-[10px] font-mono text-muted-foreground">
+                ⌘L
+              </kbd>
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Accept (⌘L)</TooltipContent>
+        </Tooltip>
+      </div>
+    </div>
+  );
+}
diff --git a/client/web/src/pages/admin/assigned/grading/components/GradingDetailsPanel.tsx b/client/web/src/pages/admin/_shared/grading/GradingDetailsPanel.tsx
similarity index 70%
rename from client/web/src/pages/admin/assigned/grading/components/GradingDetailsPanel.tsx
rename to client/web/src/pages/admin/_shared/grading/GradingDetailsPanel.tsx
index 233579da..e29ed458 100644
--- a/client/web/src/pages/admin/assigned/grading/components/GradingDetailsPanel.tsx
+++ b/client/web/src/pages/admin/_shared/grading/GradingDetailsPanel.tsx
@@ -1,3 +1,4 @@
+import type { ReactNode } from "react";
 import { memo } from "react";
 
 import { Skeleton } from "@/components/ui/skeleton";
@@ -13,18 +14,16 @@ import {
 } from "@/pages/admin/all-applicants/components/detail-sections";
 import type { Application } from "@/types";
 
-import type { Review } from "../../types";
-
 interface GradingDetailsPanelProps {
   application: Application | null;
-  review: Review | null;
   loading: boolean;
+  children?: ReactNode;
 }
 
 export const GradingDetailsPanel = memo(function GradingDetailsPanel({
   application,
-  review,
   loading,
+  children,
 }: GradingDetailsPanelProps) {
   if (loading) {
     return (
@@ -52,20 +51,7 @@ export const GradingDetailsPanel = memo(function GradingDetailsPanel({
       <EventPreferencesSection application={application} />
       <LinksSection application={application} />
       <TimelineSection application={application} />
-
-      {review && (
-        <div>
-          <h3 className="text-sm font-medium text-muted-foreground mb-2">
-            Review Details
-          </h3>
-          <div className="grid grid-cols-2 gap-y-2 text-sm">
-            <span className="text-muted-foreground">Application ID</span>
-            <span className="font-mono text-xs">{review.application_id}</span>
-            <span className="text-muted-foreground">Assigned at</span>
-            <span>{new Date(review.assigned_at).toLocaleString()}</span>
-          </div>
-        </div>
-      )}
+      {children}
     </div>
   );
 });
diff --git a/client/web/src/pages/admin/_shared/grading/GradingPageLayout.tsx b/client/web/src/pages/admin/_shared/grading/GradingPageLayout.tsx
new file mode 100644
index 00000000..4caeeaa1
--- /dev/null
+++ b/client/web/src/pages/admin/_shared/grading/GradingPageLayout.tsx
@@ -0,0 +1,108 @@
+import { ArrowLeft, ChevronLeft, ChevronRight } from "lucide-react";
+import type { ReactNode } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+
+interface GradingPageLayoutProps {
+  backUrl: string;
+  loading: boolean;
+  headerContent: ReactNode;
+  currentIndex: number;
+  totalCount: number;
+  onNavigateNext: () => void;
+  onNavigatePrev: () => void;
+  canNavigatePrev: boolean;
+  canNavigateNext: boolean;
+  detailsPanel: ReactNode;
+  actionPanel: ReactNode;
+  emptyState: ReactNode;
+}
+
+export function GradingPageLayout({
+  backUrl,
+  loading,
+  headerContent,
+  currentIndex,
+  totalCount,
+  onNavigateNext,
+  onNavigatePrev,
+  canNavigatePrev,
+  canNavigateNext,
+  detailsPanel,
+  actionPanel,
+  emptyState,
+}: GradingPageLayoutProps) {
+  const navigate = useNavigate();
+
+  if (!loading && totalCount === 0) {
+    return <>{emptyState}</>;
+  }
+
+  return (
+    <div className="-m-4 flex flex-col h-[calc(100%+2rem)] min-h-0">
+      {/* Header */}
+      <div className="shrink-0 flex items-center gap-3 bg-gray-50 border-b px-4 py-3">
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          className="cursor-pointer"
+          onClick={() => navigate(backUrl)}
+        >
+          <ArrowLeft className="h-4 w-4" />
+        </Button>
+
+        {loading ? <Skeleton className="h-5 w-40" /> : headerContent}
+
+        <div className="ml-auto flex items-center gap-2">
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            className="cursor-pointer"
+            onClick={onNavigatePrev}
+            disabled={!canNavigatePrev}
+          >
+            <ChevronLeft className="h-4 w-4" />
+          </Button>
+          <span className="text-sm text-muted-foreground tabular-nums">
+            {totalCount > 0 ? `${currentIndex + 1} of ${totalCount}` : "-"}
+          </span>
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            className="cursor-pointer"
+            onClick={onNavigateNext}
+            disabled={!canNavigateNext}
+          >
+            <ChevronRight className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="flex flex-1 min-h-0">
+        {/* Left panel - Application details (75%) */}
+        <div className="w-3/4 overflow-auto border-r">{detailsPanel}</div>
+
+        {/* Right panel (25%) */}
+        <div className="w-1/4 flex flex-col bg-gray-50/50">
+          <div className="flex-1 overflow-auto">{actionPanel}</div>
+          {/* Navigation hint */}
+          <div className="shrink-0 border-t bg-gray-50 p-4 pt-2">
+            <p className="text-xs text-muted-foreground text-center mt-2">
+              Use{" "}
+              <kbd className="px-1 py-0.5 bg-muted rounded text-[10px] font-mono">
+                ←
+              </kbd>{" "}
+              <kbd className="px-1 py-0.5 bg-muted rounded text-[10px] font-mono">
+                →
+              </kbd>{" "}
+              arrow keys to navigate &middot; Esc to go back
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/client/web/src/pages/admin/_shared/grading/ReviewerNotesList.tsx b/client/web/src/pages/admin/_shared/grading/ReviewerNotesList.tsx
new file mode 100644
index 00000000..3047ffdc
--- /dev/null
+++ b/client/web/src/pages/admin/_shared/grading/ReviewerNotesList.tsx
@@ -0,0 +1,50 @@
+import { MessageSquare } from "lucide-react";
+
+import { Label } from "@/components/ui/label";
+import type { ReviewNote } from "@/pages/admin/assigned/types";
+
+interface ReviewerNotesListProps {
+  notes: ReviewNote[];
+  loading: boolean;
+}
+
+export function ReviewerNotesList({ notes, loading }: ReviewerNotesListProps) {
+  return (
+    <div>
+      <div className="flex items-center gap-1.5 mb-2.5">
+        <MessageSquare className="h-4 w-4 text-muted-foreground" />
+        <Label className="text-sm text-muted-foreground">
+          Reviewer Notes ({notes.length})
+        </Label>
+      </div>
+      {loading ? (
+        <div className="text-xs text-muted-foreground">Loading notes...</div>
+      ) : notes.length > 0 ? (
+        <div className="space-y-2.5">
+          {notes.map((note, idx) => (
+            <div
+              key={`${note.admin_id}-${idx}`}
+              className="bg-white border rounded-md p-3 text-sm"
+            >
+              <div className="flex items-center justify-between mb-1.5">
+                <span className="text-sm font-medium text-muted-foreground">
+                  {note.admin_email}
+                </span>
+                <span className="text-xs text-muted-foreground">
+                  {new Date(note.created_at).toLocaleDateString()}
+                </span>
+              </div>
+              <p className="text-sm leading-relaxed whitespace-pre-wrap">
+                {note.notes}
+              </p>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <p className="text-xs text-muted-foreground italic">
+          No reviewer notes
+        </p>
+      )}
+    </div>
+  );
+}
diff --git a/client/web/src/pages/admin/_shared/grading/index.ts b/client/web/src/pages/admin/_shared/grading/index.ts
new file mode 100644
index 00000000..c403ef82
--- /dev/null
+++ b/client/web/src/pages/admin/_shared/grading/index.ts
@@ -0,0 +1,5 @@
+export { GradingActionButtons } from "./GradingActionButtons";
+export { GradingDetailsPanel } from "./GradingDetailsPanel";
+export { GradingPageLayout } from "./GradingPageLayout";
+export { ReviewerNotesList } from "./ReviewerNotesList";
+export { useGradingKeyboardShortcuts } from "./useGradingKeyboardShortcuts";
diff --git a/client/web/src/pages/admin/assigned/grading/hooks/useGradingKeyboardShortcuts.ts b/client/web/src/pages/admin/_shared/grading/useGradingKeyboardShortcuts.ts
similarity index 52%
rename from client/web/src/pages/admin/assigned/grading/hooks/useGradingKeyboardShortcuts.ts
rename to client/web/src/pages/admin/_shared/grading/useGradingKeyboardShortcuts.ts
index ad7bcb6c..b897f44a 100644
--- a/client/web/src/pages/admin/assigned/grading/hooks/useGradingKeyboardShortcuts.ts
+++ b/client/web/src/pages/admin/_shared/grading/useGradingKeyboardShortcuts.ts
@@ -1,24 +1,26 @@
 import { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 
-import type { ReviewVote } from "../../types";
-
 interface UseGradingKeyboardShortcutsOptions {
-  submitting: boolean;
-  currentReviewId: string | null;
-  hasVoted: boolean;
+  disabled: boolean;
+  canAct: boolean;
+  escapeUrl: string;
   onNavigateNext: () => void;
   onNavigatePrev: () => void;
-  onVote: (vote: ReviewVote) => void;
+  onActionJ: () => void;
+  onActionK: () => void;
+  onActionL: () => void;
 }
 
 export function useGradingKeyboardShortcuts({
-  submitting,
-  currentReviewId,
-  hasVoted,
+  disabled,
+  canAct,
+  escapeUrl,
   onNavigateNext,
   onNavigatePrev,
-  onVote,
+  onActionJ,
+  onActionK,
+  onActionL,
 }: UseGradingKeyboardShortcutsOptions) {
   const navigate = useNavigate();
 
@@ -29,43 +31,44 @@ export function useGradingKeyboardShortcuts({
         activeElement instanceof HTMLTextAreaElement ||
         activeElement instanceof HTMLInputElement;
 
-      // Escape: Go back to assigned page
+      // Skip all shortcuts when typing in an input
+      if (isInputFocused) {
+        if (e.key === "Escape") {
+          (activeElement as HTMLElement).blur();
+        }
+        return;
+      }
+
+      // Escape: Go back
       if (e.key === "Escape") {
         e.preventDefault();
-        navigate("/admin/assigned");
+        navigate(escapeUrl);
         return;
       }
 
-      // Arrow keys: Navigate between reviews (only when not typing)
-      if (!isInputFocused) {
-        if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
-          e.preventDefault();
-          onNavigatePrev();
-          return;
-        }
-        if (e.key === "ArrowRight" || e.key === "ArrowDown") {
-          e.preventDefault();
-          onNavigateNext();
-          return;
-        }
+      // Arrow keys: Navigate between items
+      if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+        e.preventDefault();
+        onNavigatePrev();
+        return;
+      }
+      if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+        e.preventDefault();
+        onNavigateNext();
+        return;
       }
 
-      // Cmd/Ctrl + J/K/L: Vote shortcuts
-      if (
-        (e.metaKey || e.ctrlKey) &&
-        currentReviewId &&
-        !submitting &&
-        !hasVoted
-      ) {
+      // Cmd/Ctrl + J/K/L: Action shortcuts
+      if ((e.metaKey || e.ctrlKey) && canAct && !disabled) {
         if (e.key === "j") {
           e.preventDefault();
-          onVote("reject");
+          onActionJ();
         } else if (e.key === "k") {
           e.preventDefault();
-          onVote("waitlist");
+          onActionK();
         } else if (e.key === "l") {
           e.preventDefault();
-          onVote("accept");
+          onActionL();
         }
       }
     };
@@ -73,12 +76,14 @@ export function useGradingKeyboardShortcuts({
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [
-    submitting,
-    currentReviewId,
-    hasVoted,
+    disabled,
+    canAct,
+    escapeUrl,
     onNavigateNext,
     onNavigatePrev,
-    onVote,
+    onActionJ,
+    onActionK,
+    onActionL,
     navigate,
   ]);
 }
diff --git a/client/web/src/pages/admin/all-applicants/createStore.ts b/client/web/src/pages/admin/all-applicants/createStore.ts
new file mode 100644
index 00000000..5a319f79
--- /dev/null
+++ b/client/web/src/pages/admin/all-applicants/createStore.ts
@@ -0,0 +1,141 @@
+import { create } from "zustand";
+
+import {
+  fetchApplications as apiFetchApplications,
+  fetchApplicationStats,
+} from "./api";
+import type {
+  ApplicationListItem,
+  ApplicationSortBy,
+  ApplicationStats,
+  ApplicationStatus,
+  FetchParams,
+} from "./types";
+
+export interface ApplicationsState {
+  applications: ApplicationListItem[];
+  loading: boolean;
+  nextCursor: string | null;
+  prevCursor: string | null;
+  hasMore: boolean;
+  currentStatus: ApplicationStatus | null;
+  currentSearch: string;
+  currentSortBy?: ApplicationSortBy;
+  stats: ApplicationStats | null;
+  statsLoading: boolean;
+  fetchApplications: (
+    params?: FetchParams,
+    signal?: AbortSignal,
+  ) => Promise<void>;
+  fetchStats: (signal?: AbortSignal) => Promise<void>;
+  setStatusFilter: (status: ApplicationStatus | null) => void;
+  resetPagination: () => void;
+}
+
+interface ApplicationsStoreConfig {
+  defaultStatus: ApplicationStatus | null;
+  defaultSortBy?: ApplicationSortBy;
+}
+
+export function createApplicationsStore(config: ApplicationsStoreConfig) {
+  return create<ApplicationsState>((set, get) => ({
+    applications: [],
+    loading: false,
+    nextCursor: null,
+    prevCursor: null,
+    hasMore: false,
+    currentStatus: config.defaultStatus,
+    currentSearch: "",
+    currentSortBy: config.defaultSortBy,
+    stats: null,
+    statsLoading: false,
+
+    fetchApplications: async (params?: FetchParams, signal?: AbortSignal) => {
+      set({ loading: true });
+
+      let status: ApplicationStatus | null;
+      if (params && "status" in params && params.status !== undefined) {
+        status = params.status;
+      } else {
+        status = get().currentStatus;
+      }
+
+      let search: string;
+      if (params && "search" in params) {
+        search = params.search ?? "";
+      } else {
+        search = get().currentSearch;
+      }
+
+      let sortBy: ApplicationSortBy | undefined;
+      if (params && "sort_by" in params && params.sort_by) {
+        sortBy = params.sort_by;
+      } else {
+        sortBy = get().currentSortBy;
+      }
+
+      const res = await apiFetchApplications(
+        {
+          ...params,
+          status,
+          search: search || undefined,
+          sort_by: sortBy,
+        },
+        signal,
+      );
+
+      if (signal?.aborted) return;
+
+      if (res.status === 200 && res.data) {
+        set({
+          applications: res.data.applications,
+          nextCursor: res.data.next_cursor,
+          prevCursor: res.data.prev_cursor,
+          hasMore: res.data.has_more,
+          loading: false,
+          currentStatus: status,
+          currentSearch: search,
+          currentSortBy: sortBy,
+        });
+      } else {
+        set({
+          applications: [],
+          nextCursor: null,
+          prevCursor: null,
+          hasMore: false,
+          loading: false,
+        });
+      }
+    },
+
+    fetchStats: async (signal?: AbortSignal) => {
+      set({ statsLoading: true });
+
+      const res = await fetchApplicationStats(signal);
+
+      if (signal?.aborted) return;
+
+      if (res.status === 200 && res.data) {
+        set({ stats: res.data, statsLoading: false });
+      } else {
+        set({ stats: null, statsLoading: false });
+      }
+    },
+
+    setStatusFilter: (status) => {
+      set({ currentStatus: status });
+    },
+
+    resetPagination: () => {
+      set({
+        applications: [],
+        nextCursor: null,
+        prevCursor: null,
+        hasMore: false,
+        currentStatus: config.defaultStatus,
+        currentSearch: "",
+        currentSortBy: config.defaultSortBy,
+      });
+    },
+  }));
+}
diff --git a/client/web/src/pages/admin/all-applicants/store.ts b/client/web/src/pages/admin/all-applicants/store.ts
index 079b5fda..fe326511 100644
--- a/client/web/src/pages/admin/all-applicants/store.ts
+++ b/client/web/src/pages/admin/all-applicants/store.ts
@@ -1,123 +1,7 @@
-import { create } from "zustand";
+import { createApplicationsStore } from "./createStore";
 
-import {
-  fetchApplications as apiFetchApplications,
-  fetchApplicationStats,
-} from "./api";
-import type {
-  ApplicationListItem,
-  ApplicationStats,
-  ApplicationStatus,
-  FetchParams,
-} from "./types";
+export type { ApplicationsState } from "./createStore";
 
-export interface ApplicationsState {
-  applications: ApplicationListItem[];
-  loading: boolean;
-  nextCursor: string | null;
-  prevCursor: string | null;
-  hasMore: boolean;
-  currentStatus: ApplicationStatus | null;
-  currentSearch: string;
-  stats: ApplicationStats | null;
-  statsLoading: boolean;
-  fetchApplications: (
-    params?: FetchParams,
-    signal?: AbortSignal,
-  ) => Promise<void>;
-  fetchStats: (signal?: AbortSignal) => Promise<void>;
-  setStatusFilter: (status: ApplicationStatus | null) => void;
-  resetPagination: () => void;
-}
-
-export const useApplicationsStore = create<ApplicationsState>((set, get) => ({
-  applications: [],
-  loading: false,
-  nextCursor: null,
-  prevCursor: null,
-  hasMore: false,
-  currentStatus: null,
-  currentSearch: "",
-  stats: null,
-  statsLoading: false,
-
-  fetchApplications: async (params?: FetchParams, signal?: AbortSignal) => {
-    set({ loading: true });
-
-    // Determine status to use
-    let status: ApplicationStatus | null;
-    if (params && "status" in params) {
-      status = params.status ?? null;
-    } else {
-      status = get().currentStatus;
-    }
-
-    // Determine search to use
-    let search: string;
-    if (params && "search" in params) {
-      search = params.search ?? "";
-    } else {
-      search = get().currentSearch;
-    }
-
-    const res = await apiFetchApplications(
-      {
-        ...params,
-        status,
-        search: search || undefined,
-      },
-      signal,
-    );
-
-    if (signal?.aborted) return;
-
-    if (res.status === 200 && res.data) {
-      set({
-        applications: res.data.applications,
-        nextCursor: res.data.next_cursor,
-        prevCursor: res.data.prev_cursor,
-        hasMore: res.data.has_more,
-        loading: false,
-        currentStatus: status,
-        currentSearch: search,
-      });
-    } else {
-      set({
-        applications: [],
-        nextCursor: null,
-        prevCursor: null,
-        hasMore: false,
-        loading: false,
-      });
-    }
-  },
-
-  fetchStats: async (signal?: AbortSignal) => {
-    set({ statsLoading: true });
-
-    const res = await fetchApplicationStats(signal);
-
-    if (signal?.aborted) return;
-
-    if (res.status === 200 && res.data) {
-      set({ stats: res.data, statsLoading: false });
-    } else {
-      set({ stats: null, statsLoading: false });
-    }
-  },
-
-  setStatusFilter: (status) => {
-    set({ currentStatus: status });
-  },
-
-  resetPagination: () => {
-    set({
-      applications: [],
-      nextCursor: null,
-      prevCursor: null,
-      hasMore: false,
-      currentStatus: null,
-      currentSearch: "",
-    });
-  },
-}));
+export const useApplicationsStore = createApplicationsStore({
+  defaultStatus: null,
+});
diff --git a/client/web/src/pages/admin/assigned/AssignedPage.tsx b/client/web/src/pages/admin/assigned/AssignedPage.tsx
index e4fb9dea..005596f7 100644
--- a/client/web/src/pages/admin/assigned/AssignedPage.tsx
+++ b/client/web/src/pages/admin/assigned/AssignedPage.tsx
@@ -17,16 +17,12 @@ import {
 } from "@/components/ui/tooltip";
 import { ApplicationDetailPanel } from "@/pages/admin/all-applicants/components/ApplicationDetailPanel";
 import { useApplicationDetail } from "@/pages/admin/all-applicants/hooks/useApplicationDetail";
+import { formatName } from "@/pages/admin/all-applicants/utils";
 
 import { ReviewsTable } from "./components/ReviewsTable";
 import { refreshAssignedPage } from "./hooks/updateReviewPage";
 import { useReviewsStore } from "./store";
 
-function formatName(firstName: string | null, lastName: string | null) {
-  if (!firstName && !lastName) return "-";
-  return `${firstName ?? ""} ${lastName ?? ""}`.trim();
-}
-
 export default function AssignedPage() {
   const navigate = useNavigate();
   const { reviews, loading, fetchPendingReviews } = useReviewsStore();
diff --git a/client/web/src/pages/admin/assigned/components/ReviewsTable.tsx b/client/web/src/pages/admin/assigned/components/ReviewsTable.tsx
index deab3488..13d06d86 100644
--- a/client/web/src/pages/admin/assigned/components/ReviewsTable.tsx
+++ b/client/web/src/pages/admin/assigned/components/ReviewsTable.tsx
@@ -1,4 +1,5 @@
 import { Maximize2 } from "lucide-react";
+import { memo } from "react";
 
 import {
   Table,
@@ -8,6 +9,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import { formatName } from "@/pages/admin/all-applicants/utils";
 
 import type { Review } from "../types";
 import { VoteBadge } from "./VoteBadge";
@@ -19,12 +21,7 @@ interface ReviewsTableProps {
   onSelectReview: (id: string) => void;
 }
 
-function formatName(firstName: string | null, lastName: string | null) {
-  if (!firstName && !lastName) return "-";
-  return `${firstName ?? ""} ${lastName ?? ""}`.trim();
-}
-
-export function ReviewsTable({
+export const ReviewsTable = memo(function ReviewsTable({
   reviews,
   loading,
   selectedId,
@@ -90,4 +87,4 @@ export function ReviewsTable({
       </Table>
     </div>
   );
-}
+});
diff --git a/client/web/src/pages/admin/assigned/components/VotingPanel.tsx b/client/web/src/pages/admin/assigned/components/VotingPanel.tsx
deleted file mode 100644
index 74897f07..00000000
--- a/client/web/src/pages/admin/assigned/components/VotingPanel.tsx
+++ /dev/null
@@ -1,274 +0,0 @@
-import {
-  Check,
-  MessageSquare,
-  Minus,
-  Pencil,
-  ThumbsDown,
-  ThumbsUp,
-  X,
-} from "lucide-react";
-import { useState } from "react";
-import { toast } from "sonner";
-
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-
-import { setAIPercent } from "../api";
-import type { Review, ReviewNote, ReviewVote } from "../types";
-import { NotesTextarea } from "./NotesTextarea";
-import { VoteBadge } from "./VoteBadge";
-
-interface VotingPanelProps {
-  review: Review;
-  notes: string;
-  otherReviewerNotes: ReviewNote[];
-  notesLoading: boolean;
-  isExpanded: boolean;
-  submitting: boolean;
-  notesTextareaRef: React.RefObject<HTMLTextAreaElement | null>;
-  applicationId: string;
-  aiPercent: number | null;
-  onAiPercentUpdate: (percent: number) => void;
-  onNotesChange: (id: string, notes: string) => void;
-  onVote: (id: string, vote: ReviewVote) => void;
-}
-
-export function VotingPanel({
-  review,
-  notes,
-  otherReviewerNotes,
-  notesLoading,
-  isExpanded,
-  submitting,
-  notesTextareaRef,
-  applicationId,
-  aiPercent,
-  onAiPercentUpdate,
-  onNotesChange,
-  onVote,
-}: VotingPanelProps) {
-  const [editing, setEditing] = useState(false);
-  const [inputValue, setInputValue] = useState("");
-
-  function startEditing() {
-    setInputValue(aiPercent?.toString() ?? "");
-    setEditing(true);
-  }
-
-  function cancelEditing() {
-    setEditing(false);
-  }
-
-  async function saveEditing() {
-    const trimmed = inputValue.trim();
-    if (trimmed === "") {
-      toast.error("AI percentage is required");
-      return;
-    }
-    const percent = Number(trimmed);
-    if (!Number.isInteger(percent) || percent < 0 || percent > 100) {
-      toast.error("AI percent must be a whole number between 0 and 100");
-      return;
-    }
-
-    const result = await setAIPercent(applicationId, { ai_percent: percent });
-    if (result.success) {
-      onAiPercentUpdate(percent);
-      toast.success("AI percent saved");
-    } else {
-      toast.error(result.error ?? "Failed to set AI percent");
-    }
-    setEditing(false);
-  }
-  return (
-    <div className="space-y-3">
-      {/* Other Reviewers' Notes */}
-      {otherReviewerNotes.length > 0 && (
-        <div>
-          <div className="flex items-center gap-1.5 mb-2">
-            <MessageSquare className="h-3.5 w-3.5 text-muted-foreground" />
-            <Label className="text-xs text-muted-foreground">
-              Other Reviewers' Notes ({otherReviewerNotes.length})
-            </Label>
-          </div>
-          <div className="space-y-2">
-            {otherReviewerNotes.map((note, idx) => (
-              <div
-                key={`${note.admin_id}-${idx}`}
-                className="bg-white border rounded-md p-2 text-sm"
-              >
-                <div className="flex items-center justify-between mb-1">
-                  <span className="text-xs font-medium text-muted-foreground">
-                    {note.admin_email}
-                  </span>
-                  <span className="text-xs text-muted-foreground">
-                    {new Date(note.created_at).toLocaleDateString()}
-                  </span>
-                </div>
-                <p className="text-sm whitespace-pre-wrap">{note.notes}</p>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-      {notesLoading && otherReviewerNotes.length === 0 && (
-        <div className="text-xs text-muted-foreground">Loading notes...</div>
-      )}
-
-      {/* Your Notes */}
-      <div>
-        <div className="flex items-center justify-between">
-          <Label className="text-xs text-muted-foreground">Your Notes</Label>
-          {!review.vote && (
-            <span className="text-xs text-muted-foreground italic">
-              Write notes before casting your vote
-            </span>
-          )}
-        </div>
-        <NotesTextarea
-          ref={notesTextareaRef}
-          reviewId={review.id}
-          initialValue={notes}
-          disabled={submitting || !!review.vote}
-          rows={isExpanded ? 4 : 3}
-          onNotesChange={onNotesChange}
-        />
-      </div>
-
-      {/* AI Percent */}
-      <div>
-        <Label className="text-xs text-muted-foreground">AI Percent</Label>
-        {editing ? (
-          <div className="flex items-center gap-2 mt-1">
-            <Input
-              type="number"
-              min={0}
-              max={100}
-              value={inputValue}
-              onChange={(e) => setInputValue(e.target.value)}
-              className="h-7 w-24 text-sm"
-              autoFocus
-            />
-            <Button
-              size="icon"
-              variant="ghost"
-              className="h-7 w-7 cursor-pointer"
-              onClick={saveEditing}
-            >
-              <Check className="h-3.5 w-3.5" />
-            </Button>
-            <Button
-              size="icon"
-              variant="ghost"
-              className="h-7 w-7 cursor-pointer"
-              onClick={cancelEditing}
-            >
-              <X className="h-3.5 w-3.5" />
-            </Button>
-          </div>
-        ) : aiPercent != null ? (
-          <p className="text-sm mt-1">{aiPercent}%</p>
-        ) : (
-          <div className="flex items-center gap-2 mt-1">
-            <p className="text-sm text-muted-foreground italic">Not set</p>
-            <Button
-              size="icon"
-              variant="ghost"
-              className="h-6 w-6 cursor-pointer"
-              onClick={startEditing}
-            >
-              <Pencil className="h-3 w-3" />
-            </Button>
-          </div>
-        )}
-      </div>
-
-      {review.vote ? (
-        <div className="text-center py-2">
-          <p className="text-sm text-muted-foreground">
-            You voted: <VoteBadge vote={review.vote} />
-          </p>
-          {review.reviewed_at && (
-            <p className="text-xs text-muted-foreground mt-1">
-              {new Date(review.reviewed_at).toLocaleString()}
-            </p>
-          )}
-        </div>
-      ) : (
-        <>
-          <p className="text-xs text-muted-foreground">Cast your vote</p>
-          <div className={`flex gap-2 ${isExpanded ? "flex-col" : ""}`}>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="outline"
-                  className="flex-1 cursor-pointer hover:bg-red-50 hover:text-red-700 hover:border-red-300 disabled:opacity-50 disabled:cursor-not-allowed"
-                  onClick={() => onVote(review.id, "reject")}
-                  disabled={submitting}
-                >
-                  <ThumbsDown className="h-4 w-4 mr-1.5" />
-                  Reject
-                  {isExpanded && (
-                    <kbd className="ml-auto px-1.5 py-0.5 bg-muted rounded text-[10px] font-mono text-muted-foreground">
-                      ⌘J
-                    </kbd>
-                  )}
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>Reject (⌘J)</TooltipContent>
-            </Tooltip>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="outline"
-                  className="flex-1 cursor-pointer hover:bg-yellow-50 hover:text-yellow-700 hover:border-yellow-300 disabled:opacity-50 disabled:cursor-not-allowed"
-                  onClick={() => onVote(review.id, "waitlist")}
-                  disabled={submitting}
-                >
-                  <Minus className="h-4 w-4 mr-1.5" />
-                  Waitlist
-                  {isExpanded && (
-                    <kbd className="ml-auto px-1.5 py-0.5 bg-muted rounded text-[10px] font-mono text-muted-foreground">
-                      ⌘K
-                    </kbd>
-                  )}
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>Waitlist (⌘K)</TooltipContent>
-            </Tooltip>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="outline"
-                  className="flex-1 cursor-pointer hover:bg-green-50 hover:text-green-700 disabled:opacity-50 disabled:cursor-not-allowed"
-                  onClick={() => onVote(review.id, "accept")}
-                  disabled={submitting}
-                >
-                  <ThumbsUp className="h-4 w-4 mr-1.5" />
-                  Accept
-                  {isExpanded && (
-                    <kbd className="ml-auto px-1.5 py-0.5 bg-muted rounded text-[10px] font-mono text-muted-foreground">
-                      ⌘L
-                    </kbd>
-                  )}
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>Accept (⌘L)</TooltipContent>
-            </Tooltip>
-          </div>
-          {submitting && (
-            <p className="text-xs text-muted-foreground text-center">
-              Submitting vote...
-            </p>
-          )}
-        </>
-      )}
-    </div>
-  );
-}
diff --git a/client/web/src/pages/admin/assigned/grading/GradingPage.tsx b/client/web/src/pages/admin/assigned/grading/GradingPage.tsx
index 73040074..0f08e31e 100644
--- a/client/web/src/pages/admin/assigned/grading/GradingPage.tsx
+++ b/client/web/src/pages/admin/assigned/grading/GradingPage.tsx
@@ -1,22 +1,20 @@
-import { ArrowLeft, ChevronLeft, ChevronRight } from "lucide-react";
+import { ArrowLeft } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 import { useNavigate, useSearchParams } from "react-router-dom";
 
 import { Button } from "@/components/ui/button";
-import { Skeleton } from "@/components/ui/skeleton";
+import {
+  GradingDetailsPanel,
+  GradingPageLayout,
+  useGradingKeyboardShortcuts,
+} from "@/pages/admin/_shared/grading";
+import { formatName } from "@/pages/admin/all-applicants/utils";
 
 import { VoteBadge } from "../components/VoteBadge";
 import type { ReviewVote } from "../types";
-import { GradingDetailsPanel } from "./components/GradingDetailsPanel";
 import { GradingVotingPanel } from "./components/GradingVotingPanel";
-import { useGradingKeyboardShortcuts } from "./hooks/useGradingKeyboardShortcuts";
 import { useAdminGradingStore } from "./store";
 
-function formatName(firstName: string | null, lastName: string | null) {
-  if (!firstName && !lastName) return "-";
-  return `${firstName ?? ""} ${lastName ?? ""}`.trim();
-}
-
 export default function GradingPage() {
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
@@ -76,125 +74,85 @@ export default function GradingPage() {
   );
 
   useGradingKeyboardShortcuts({
-    submitting,
-    currentReviewId: currentReview?.id ?? null,
-    hasVoted: !!currentReview?.vote,
+    disabled: submitting,
+    canAct: !!currentReview?.id && !currentReview?.vote,
+    escapeUrl: "/admin/assigned",
     onNavigateNext: navigateNext,
     onNavigatePrev: navigatePrev,
-    onVote: handleVote,
+    onActionJ: () => handleVote("reject"),
+    onActionK: () => handleVote("waitlist"),
+    onActionL: () => handleVote("accept"),
   });
 
-  // Empty state
-  if (!loading && reviews.length === 0) {
-    return (
-      <div className="flex flex-col items-center justify-center h-full gap-4">
-        <p className="text-muted-foreground">No pending reviews to grade.</p>
-        <Button
-          variant="outline"
-          className="cursor-pointer"
-          onClick={() => navigate("/admin/assigned")}
-        >
-          <ArrowLeft className="h-4 w-4 mr-1.5" />
-          Back to Assigned
-        </Button>
-      </div>
-    );
-  }
-
   return (
-    <div className="-m-4 flex flex-col h-[calc(100%+2rem)] min-h-0">
-      {/* Header */}
-      <div className="shrink-0 flex items-center gap-3 bg-gray-50 border-b px-4 py-3">
-        <Button
-          variant="ghost"
-          size="icon-sm"
-          className="cursor-pointer"
-          onClick={() => navigate("/admin/assigned")}
-        >
-          <ArrowLeft className="h-4 w-4" />
-        </Button>
-
-        {loading ? (
-          <Skeleton className="h-5 w-40" />
-        ) : currentReview ? (
+    <GradingPageLayout
+      backUrl="/admin/assigned"
+      loading={loading}
+      headerContent={
+        currentReview ? (
           <>
             <p className="font-semibold">
               {formatName(currentReview.first_name, currentReview.last_name)}
             </p>
             <VoteBadge vote={currentReview.vote} />
           </>
-        ) : null}
-
-        <div className="ml-auto flex items-center gap-2">
-          <Button
-            variant="ghost"
-            size="icon-sm"
-            className="cursor-pointer"
-            onClick={navigatePrev}
-            disabled={loading || currentIndex <= 0}
-          >
-            <ChevronLeft className="h-4 w-4" />
-          </Button>
-          <span className="text-sm text-muted-foreground tabular-nums">
-            {reviews.length > 0
-              ? `${currentIndex + 1} of ${reviews.length}`
-              : "-"}
-          </span>
+        ) : null
+      }
+      currentIndex={currentIndex}
+      totalCount={reviews.length}
+      onNavigateNext={navigateNext}
+      onNavigatePrev={navigatePrev}
+      canNavigatePrev={!loading && currentIndex > 0}
+      canNavigateNext={!loading && currentIndex < reviews.length - 1}
+      detailsPanel={
+        <GradingDetailsPanel application={detail} loading={detailLoading}>
+          {currentReview && (
+            <div>
+              <h3 className="text-sm font-medium text-muted-foreground mb-2">
+                Review Details
+              </h3>
+              <div className="grid grid-cols-2 gap-y-2 text-sm">
+                <span className="text-muted-foreground">Application ID</span>
+                <span className="font-mono text-xs">
+                  {currentReview.application_id}
+                </span>
+                <span className="text-muted-foreground">Assigned at</span>
+                <span>
+                  {new Date(currentReview.assigned_at).toLocaleString()}
+                </span>
+              </div>
+            </div>
+          )}
+        </GradingDetailsPanel>
+      }
+      actionPanel={
+        currentReview ? (
+          <GradingVotingPanel
+            review={currentReview}
+            notes={localNotes}
+            otherReviewerNotes={otherNotes}
+            notesLoading={notesLoading}
+            submitting={submitting}
+            aiPercent={aiPercent}
+            onAiPercentUpdate={setAiPercent}
+            onNotesChange={setLocalNotes}
+            onVote={handleVote}
+          />
+        ) : null
+      }
+      emptyState={
+        <div className="flex flex-col items-center justify-center h-full gap-4">
+          <p className="text-muted-foreground">No pending reviews to grade.</p>
           <Button
-            variant="ghost"
-            size="icon-sm"
+            variant="outline"
             className="cursor-pointer"
-            onClick={navigateNext}
-            disabled={loading || currentIndex >= reviews.length - 1}
+            onClick={() => navigate("/admin/assigned")}
           >
-            <ChevronRight className="h-4 w-4" />
+            <ArrowLeft className="h-4 w-4 mr-1.5" />
+            Back to Assigned
           </Button>
         </div>
-      </div>
-
-      {/* Content */}
-      <div className="flex flex-1 min-h-0">
-        {/* Left panel - Application details (75%) */}
-        <div className="w-3/4 overflow-auto border-r">
-          <GradingDetailsPanel
-            application={detail}
-            review={currentReview}
-            loading={detailLoading}
-          />
-        </div>
-
-        {/* Right panel - Voting (25%) */}
-        <div className="w-1/4 flex flex-col bg-gray-50/50">
-          <div className="flex-1 overflow-auto">
-            {currentReview && (
-              <GradingVotingPanel
-                review={currentReview}
-                notes={localNotes}
-                otherReviewerNotes={otherNotes}
-                notesLoading={notesLoading}
-                submitting={submitting}
-                aiPercent={aiPercent}
-                onAiPercentUpdate={setAiPercent}
-                onNotesChange={setLocalNotes}
-                onVote={handleVote}
-              />
-            )}
-          </div>
-          {/* Navigation hint */}
-          <div className="shrink-0 border-t bg-gray-50 p-4 pt-2">
-            <p className="text-xs text-muted-foreground text-center mt-2">
-              Use{" "}
-              <kbd className="px-1 py-0.5 bg-muted rounded text-[10px] font-mono">
-                ←
-              </kbd>{" "}
-              <kbd className="px-1 py-0.5 bg-muted rounded text-[10px] font-mono">
-                →
-              </kbd>{" "}
-              arrow keys to navigate &middot; Esc to go back
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
+      }
+    />
   );
 }
diff --git a/client/web/src/pages/admin/assigned/grading/components/GradingVotingPanel.tsx b/client/web/src/pages/admin/assigned/grading/components/GradingVotingPanel.tsx
index 71ccfc5e..5adb3a48 100644
--- a/client/web/src/pages/admin/assigned/grading/components/GradingVotingPanel.tsx
+++ b/client/web/src/pages/admin/assigned/grading/components/GradingVotingPanel.tsx
@@ -1,13 +1,4 @@
-import {
-  Check,
-  Loader2,
-  MessageSquare,
-  Minus,
-  Pencil,
-  ThumbsDown,
-  ThumbsUp,
-  X,
-} from "lucide-react";
+import { Check, Pencil, X } from "lucide-react";
 import { memo, useRef, useState } from "react";
 import { toast } from "sonner";
 
@@ -15,10 +6,9 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
+  GradingActionButtons,
+  ReviewerNotesList,
+} from "@/pages/admin/_shared/grading";
 
 import { setAIPercent } from "../../api";
 import { NotesTextarea } from "../../components/NotesTextarea";
@@ -88,42 +78,7 @@ export const GradingVotingPanel = memo(function GradingVotingPanel({
   return (
     <div className="space-y-4 p-4">
       {/* Other Reviewers' Notes */}
-      <div>
-        <div className="flex items-center gap-1.5 mb-2.5">
-          <MessageSquare className="h-4 w-4 text-muted-foreground" />
-          <Label className="text-sm text-muted-foreground">
-            Reviewer Notes ({otherReviewerNotes.length})
-          </Label>
-        </div>
-        {notesLoading ? (
-          <div className="text-xs text-muted-foreground">Loading notes...</div>
-        ) : otherReviewerNotes.length > 0 ? (
-          <div className="space-y-2.5">
-            {otherReviewerNotes.map((note, idx) => (
-              <div
-                key={`${note.admin_id}-${idx}`}
-                className="bg-white border rounded-md p-3 text-sm"
-              >
-                <div className="flex items-center justify-between mb-1.5">
-                  <span className="text-sm font-medium text-muted-foreground">
-                    {note.admin_email}
-                  </span>
-                  <span className="text-xs text-muted-foreground">
-                    {new Date(note.created_at).toLocaleDateString()}
-                  </span>
-                </div>
-                <p className="text-sm leading-relaxed whitespace-pre-wrap">
-                  {note.notes}
-                </p>
-              </div>
-            ))}
-          </div>
-        ) : (
-          <p className="text-xs text-muted-foreground italic">
-            No reviewer notes
-          </p>
-        )}
-      </div>
+      <ReviewerNotesList notes={otherReviewerNotes} loading={notesLoading} />
 
       {/* Your Notes */}
       <div>
@@ -216,81 +171,19 @@ export const GradingVotingPanel = memo(function GradingVotingPanel({
           )}
         </div>
       ) : (
-        <div>
-          <Label className="text-xs text-muted-foreground">
-            Cast your vote
-          </Label>
-          <div className="flex flex-col gap-2 mt-2">
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="outline"
-                  className="w-full cursor-pointer hover:bg-red-50 hover:text-red-700 hover:border-red-300 disabled:opacity-50 disabled:cursor-not-allowed"
-                  onClick={() => onVote("reject")}
-                  disabled={submitting}
-                >
-                  {submitting ? (
-                    <Loader2 className="h-4 w-4 mr-1.5 animate-spin" />
-                  ) : (
-                    <ThumbsDown className="h-4 w-4 mr-1.5" />
-                  )}
-                  Reject
-                  <kbd className="ml-auto px-1.5 py-0.5 bg-muted rounded text-[10px] font-mono text-muted-foreground">
-                    ⌘J
-                  </kbd>
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>Reject (⌘J)</TooltipContent>
-            </Tooltip>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="outline"
-                  className="w-full cursor-pointer hover:bg-yellow-50 hover:text-yellow-700 hover:border-yellow-300 disabled:opacity-50 disabled:cursor-not-allowed"
-                  onClick={() => onVote("waitlist")}
-                  disabled={submitting}
-                >
-                  {submitting ? (
-                    <Loader2 className="h-4 w-4 mr-1.5 animate-spin" />
-                  ) : (
-                    <Minus className="h-4 w-4 mr-1.5" />
-                  )}
-                  Waitlist
-                  <kbd className="ml-auto px-1.5 py-0.5 bg-muted rounded text-[10px] font-mono text-muted-foreground">
-                    ⌘K
-                  </kbd>
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>Waitlist (⌘K)</TooltipContent>
-            </Tooltip>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="outline"
-                  className="w-full cursor-pointer hover:bg-green-50 hover:text-green-700 hover:border-green-300 disabled:opacity-50 disabled:cursor-not-allowed"
-                  onClick={() => onVote("accept")}
-                  disabled={submitting}
-                >
-                  {submitting ? (
-                    <Loader2 className="h-4 w-4 mr-1.5 animate-spin" />
-                  ) : (
-                    <ThumbsUp className="h-4 w-4 mr-1.5" />
-                  )}
-                  Accept
-                  <kbd className="ml-auto px-1.5 py-0.5 bg-muted rounded text-[10px] font-mono text-muted-foreground">
-                    ⌘L
-                  </kbd>
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>Accept (⌘L)</TooltipContent>
-            </Tooltip>
-          </div>
+        <>
+          <GradingActionButtons
+            disabled={submitting}
+            onReject={() => onVote("reject")}
+            onWaitlist={() => onVote("waitlist")}
+            onAccept={() => onVote("accept")}
+          />
           {submitting && (
             <p className="text-xs text-muted-foreground text-center mt-2">
               Submitting vote...
             </p>
           )}
-        </div>
+        </>
       )}
     </div>
   );
diff --git a/client/web/src/pages/admin/assigned/grading/store.ts b/client/web/src/pages/admin/assigned/grading/store.ts
index 3d194401..d613eadc 100644
--- a/client/web/src/pages/admin/assigned/grading/store.ts
+++ b/client/web/src/pages/admin/assigned/grading/store.ts
@@ -21,7 +21,6 @@ interface GradingState {
   notesLoading: boolean;
   submitting: boolean;
   localNotes: string;
-
   fetchReviews: () => Promise<void>;
   loadDetail: (applicationId: string) => Promise<void>;
   navigateNext: () => void;
@@ -43,6 +42,8 @@ const initialState = {
   localNotes: "",
 };
 
+let loadDetailSeq = 0;
+
 export const useAdminGradingStore = create<GradingState>((set, get) => ({
   ...initialState,
 
@@ -58,6 +59,7 @@ export const useAdminGradingStore = create<GradingState>((set, get) => ({
   },
 
   loadDetail: async (applicationId: string) => {
+    const requestId = ++loadDetailSeq;
     set({
       detailLoading: true,
       notesLoading: true,
@@ -71,6 +73,9 @@ export const useAdminGradingStore = create<GradingState>((set, get) => ({
       fetchReviewNotes(applicationId),
     ]);
 
+    // Guard against stale responses from rapid navigation
+    if (loadDetailSeq !== requestId) return;
+
     if (detailRes.status === 200 && detailRes.data) {
       set({ detail: detailRes.data, detailLoading: false });
     } else {
@@ -141,6 +146,7 @@ export const useAdminGradingStore = create<GradingState>((set, get) => ({
   },
 
   reset: () => {
+    loadDetailSeq = 0;
     set(initialState);
   },
 }));
diff --git a/client/web/src/pages/admin/assigned/hooks/useReviewKeyboardShortcuts.ts b/client/web/src/pages/admin/assigned/hooks/useReviewKeyboardShortcuts.ts
deleted file mode 100644
index c69a7513..00000000
--- a/client/web/src/pages/admin/assigned/hooks/useReviewKeyboardShortcuts.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-import { useEffect } from "react";
-
-import type { Review, ReviewVote } from "../types";
-
-interface UseReviewKeyboardShortcutsOptions {
-  isExpanded: boolean;
-  selectedId: string | null;
-  reviews: Review[];
-  submitting: boolean;
-  notesTextareaRef: React.RefObject<HTMLTextAreaElement | null>;
-  onVote: (id: string, vote: ReviewVote) => void;
-  onNavigate: (id: string) => void;
-  onCloseExpanded: () => void;
-}
-
-export function useReviewKeyboardShortcuts({
-  isExpanded,
-  selectedId,
-  reviews,
-  submitting,
-  notesTextareaRef,
-  onVote,
-  onNavigate,
-  onCloseExpanded,
-}: UseReviewKeyboardShortcutsOptions) {
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      const activeElement = document.activeElement;
-      const isInputFocused =
-        activeElement instanceof HTMLTextAreaElement ||
-        activeElement instanceof HTMLInputElement;
-
-      // Escape: Close expanded view
-      if (e.key === "Escape" && isExpanded) {
-        e.preventDefault();
-        onCloseExpanded();
-        return;
-      }
-
-      // Tab: Focus notes textarea in expanded view
-      if (e.key === "Tab" && isExpanded && selectedId && !isInputFocused) {
-        e.preventDefault();
-        notesTextareaRef.current?.focus();
-        return;
-      }
-
-      // Arrow keys: Navigate between reviews (only when not typing)
-      if (!isInputFocused && reviews.length > 0) {
-        const currentIndex = selectedId
-          ? reviews.findIndex((r) => r.id === selectedId)
-          : -1;
-
-        if (e.key === "ArrowUp" || e.key === "ArrowLeft") {
-          e.preventDefault();
-          if (currentIndex > 0) {
-            onNavigate(reviews[currentIndex - 1].id);
-          } else if (currentIndex === -1) {
-            onNavigate(reviews[reviews.length - 1].id);
-          }
-        } else if (e.key === "ArrowDown" || e.key === "ArrowRight") {
-          e.preventDefault();
-          if (currentIndex === -1) {
-            onNavigate(reviews[0].id);
-          } else if (currentIndex < reviews.length - 1) {
-            onNavigate(reviews[currentIndex + 1].id);
-          }
-        }
-      }
-
-      // Cmd/Ctrl + J/K/L: Vote shortcuts (only in expanded view with selected review)
-      if ((e.metaKey || e.ctrlKey) && isExpanded && selectedId) {
-        const selectedReview = reviews.find((r) => r.id === selectedId);
-        // Don't allow voting if already voted or submitting
-        if (selectedReview?.vote || submitting) return;
-
-        if (e.key === "j") {
-          e.preventDefault();
-          onVote(selectedId, "reject");
-        } else if (e.key === "k") {
-          e.preventDefault();
-          onVote(selectedId, "waitlist");
-        } else if (e.key === "l") {
-          e.preventDefault();
-          onVote(selectedId, "accept");
-        }
-      }
-    };
-
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [
-    isExpanded,
-    selectedId,
-    reviews,
-    submitting,
-    notesTextareaRef,
-    onVote,
-    onNavigate,
-    onCloseExpanded,
-  ]);
-}
diff --git a/client/web/src/pages/admin/completed/CompletedPage.tsx b/client/web/src/pages/admin/completed/CompletedPage.tsx
index 1c8d7bd2..2b00317d 100644
--- a/client/web/src/pages/admin/completed/CompletedPage.tsx
+++ b/client/web/src/pages/admin/completed/CompletedPage.tsx
@@ -9,6 +9,7 @@ import {
   CardHeader,
 } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
+import { formatName } from "@/pages/admin/all-applicants/utils";
 import { errorAlert, getRequest } from "@/shared/lib/api";
 import type { Application } from "@/types";
 
@@ -18,11 +19,6 @@ import { CompletedReviewsTable } from "./components/CompletedReviewsTable";
 import { useCompletedReviewsStore } from "./store";
 import type { NotesListResponse, ReviewNote } from "./types";
 
-function formatName(firstName: string | null, lastName: string | null) {
-  if (!firstName && !lastName) return "-";
-  return `${firstName ?? ""} ${lastName ?? ""}`.trim();
-}
-
 export default function CompletedPage() {
   const { reviews, loading, fetchCompletedReviews } =
     useCompletedReviewsStore();
diff --git a/client/web/src/pages/admin/completed/components/CompletedReviewsTable.tsx b/client/web/src/pages/admin/completed/components/CompletedReviewsTable.tsx
index 7ccd6893..c1760cd7 100644
--- a/client/web/src/pages/admin/completed/components/CompletedReviewsTable.tsx
+++ b/client/web/src/pages/admin/completed/components/CompletedReviewsTable.tsx
@@ -9,6 +9,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import { formatName } from "@/pages/admin/all-applicants/utils";
 
 import { VoteBadge } from "../../assigned/components/VoteBadge";
 import type { Review } from "../types";
@@ -20,11 +21,6 @@ interface CompletedReviewsTableProps {
   onSelectReview: (id: string) => void;
 }
 
-function formatName(firstName: string | null, lastName: string | null) {
-  if (!firstName && !lastName) return "-";
-  return `${firstName ?? ""} ${lastName ?? ""}`.trim();
-}
-
 export function CompletedReviewsTable({
   reviews,
   selectedId,
diff --git a/client/web/src/pages/superadmin/reviews/ReviewsPage.tsx b/client/web/src/pages/superadmin/reviews/ReviewsPage.tsx
index a8013897..d43a8cf5 100644
--- a/client/web/src/pages/superadmin/reviews/ReviewsPage.tsx
+++ b/client/web/src/pages/superadmin/reviews/ReviewsPage.tsx
@@ -89,7 +89,9 @@ export default function ReviewsPage() {
   );
   const fetchStats = useReviewApplicationsStore((s) => s.fetchStats);
 
-  const [emailStatus, setEmailStatus] = useState<string | null>(null);
+  const [emailStatus, setEmailStatus] = useState<ApplicationStatus | null>(
+    null,
+  );
   const [downloadingCsv, setDownloadingCsv] = useState(false);
   const [searchInput, setSearchInput] = useState(currentSearch);
   const [selectedApplicationId, setSelectedApplicationId] = useState<
@@ -388,7 +390,7 @@ export default function ReviewsPage() {
           <ReviewStatusTabs
             stats={stats}
             loading={tableLoading}
-            currentStatus={currentStatus}
+            currentStatus={currentStatus ?? "submitted"}
             onStatusChange={handleStatusFilter}
           />
         </div>
@@ -421,8 +423,8 @@ export default function ReviewsPage() {
               <CardDescription className="font-light flex items-center gap-1.5">
                 <span>{applications.length} application(s) on this page</span>
                 <span>filtered by</span>
-                <Badge className={getStatusColor(currentStatus)}>
-                  {currentStatus}
+                <Badge className={getStatusColor(currentStatus ?? "submitted")}>
+                  {currentStatus ?? "submitted"}
                 </Badge>
                 {currentSearch && <span>matching "{currentSearch}"</span>}
                 <span className="text-muted-foreground flex items-center gap-0.5">
@@ -430,7 +432,7 @@ export default function ReviewsPage() {
                   {currentSortBy === "accept_votes"
                     ? "accept votes"
                     : currentSortBy === "reject_votes"
-                      ? "reject votess"
+                      ? "reject votes"
                       : currentSortBy === "waitlist_votes"
                         ? "waitlist votes"
                         : "date created"}
@@ -473,7 +475,9 @@ export default function ReviewsPage() {
                     </p>
                     <RadioGroup
                       value={emailStatus ?? ""}
-                      onValueChange={(value) => setEmailStatus(value)}
+                      onValueChange={(value) =>
+                        setEmailStatus(value as ApplicationStatus)
+                      }
                       className="gap-2"
                     >
                       {(
@@ -538,7 +542,7 @@ export default function ReviewsPage() {
               loading={tableLoading}
               selectedId={selectedApplicationId}
               onSelectApplication={setSelectedApplicationId}
-              sortBy={currentSortBy}
+              sortBy={currentSortBy ?? "accept_votes"}
               onSortChange={handleSortChange}
             />
           </CardContent>
diff --git a/client/web/src/pages/superadmin/reviews/api.ts b/client/web/src/pages/superadmin/reviews/api.ts
index 53976c44..b7ddca85 100644
--- a/client/web/src/pages/superadmin/reviews/api.ts
+++ b/client/web/src/pages/superadmin/reviews/api.ts
@@ -1,3 +1,4 @@
+import type { ApplicationStatus } from "@/pages/admin/all-applicants/types";
 import { getRequest } from "@/shared/lib/api";
 
 interface ApplicantEmail {
@@ -11,7 +12,7 @@ interface EmailListResponse {
   count: number;
 }
 
-export async function fetchApplicantEmails(status: string) {
+export async function fetchApplicantEmails(status: ApplicationStatus) {
   return getRequest<EmailListResponse>(
     `/superadmin/applications/emails?status=${status}`,
     "applicant emails",
diff --git a/client/web/src/pages/superadmin/reviews/grading/GradingPage.tsx b/client/web/src/pages/superadmin/reviews/grading/GradingPage.tsx
index 4c8713cc..d02310f6 100644
--- a/client/web/src/pages/superadmin/reviews/grading/GradingPage.tsx
+++ b/client/web/src/pages/superadmin/reviews/grading/GradingPage.tsx
@@ -1,19 +1,21 @@
-import { ArrowLeft, ChevronLeft, ChevronRight } from "lucide-react";
+import { ArrowLeft } from "lucide-react";
 import { useCallback, useEffect } from "react";
 import { useNavigate, useSearchParams } from "react-router-dom";
 
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { Skeleton } from "@/components/ui/skeleton";
+import {
+  GradingDetailsPanel,
+  GradingPageLayout,
+  useGradingKeyboardShortcuts,
+} from "@/pages/admin/_shared/grading";
 import type {
   ApplicationSortBy,
   ApplicationStatus,
 } from "@/pages/admin/all-applicants/types";
 import { formatName, getStatusColor } from "@/pages/admin/all-applicants/utils";
 
-import { GradingDetailsPanel } from "./components/GradingDetailsPanel";
 import { GradingPanel } from "./components/GradingPanel";
-import { useGradingKeyboardShortcuts } from "./hooks/useGradingKeyboardShortcuts";
 import { useGradingStore } from "./store";
 
 export default function GradingPage() {
@@ -28,6 +30,8 @@ export default function GradingPage() {
   const notes = useGradingStore((s) => s.notes);
   const notesLoading = useGradingStore((s) => s.notesLoading);
   const grading = useGradingStore((s) => s.grading);
+  const nextCursor = useGradingStore((s) => s.nextCursor);
+  const prevCursor = useGradingStore((s) => s.prevCursor);
   const fetchApplications = useGradingStore((s) => s.fetchApplications);
   const loadDetail = useGradingStore((s) => s.loadDetail);
   const navigateNext = useGradingStore((s) => s.navigateNext);
@@ -79,48 +83,22 @@ export default function GradingPage() {
   );
 
   useGradingKeyboardShortcuts({
-    grading,
-    currentApplicationId: currentApp?.id ?? null,
+    disabled: grading,
+    canAct: !!currentApp?.id,
+    escapeUrl: "/admin/sa/reviews",
     onNavigateNext: navigateNext,
     onNavigatePrev: navigatePrev,
-    onGrade: handleGrade,
+    onActionJ: () => handleGrade("rejected"),
+    onActionK: () => handleGrade("waitlisted"),
+    onActionL: () => handleGrade("accepted"),
   });
 
-  // Empty state
-  if (!loading && applications.length === 0) {
-    return (
-      <div className="flex flex-col items-center justify-center h-full gap-4">
-        <p className="text-muted-foreground">
-          No applications match the current filters.
-        </p>
-        <Button
-          variant="outline"
-          className="cursor-pointer"
-          onClick={() => navigate("/admin/sa/reviews")}
-        >
-          <ArrowLeft className="h-4 w-4 mr-1.5" />
-          Back to Reviews
-        </Button>
-      </div>
-    );
-  }
-
   return (
-    <div className="-m-4 flex flex-col h-[calc(100%+2rem)] min-h-0">
-      {/* Header */}
-      <div className="shrink-0 flex items-center gap-3 bg-gray-50 border-b px-4 py-3">
-        <Button
-          variant="ghost"
-          size="icon-sm"
-          className="cursor-pointer"
-          onClick={() => navigate("/admin/sa/reviews")}
-        >
-          <ArrowLeft className="h-4 w-4" />
-        </Button>
-
-        {loading ? (
-          <Skeleton className="h-5 w-40" />
-        ) : currentApp ? (
+    <GradingPageLayout
+      backUrl="/admin/sa/reviews"
+      loading={loading}
+      headerContent={
+        currentApp ? (
           <>
             <p className="font-semibold">
               {formatName(currentApp.first_name, currentApp.last_name)}
@@ -129,72 +107,73 @@ export default function GradingPage() {
               {currentApp.status}
             </Badge>
           </>
-        ) : null}
-
-        <div className="ml-auto flex items-center gap-2">
-          <Button
-            variant="ghost"
-            size="icon-sm"
-            className="cursor-pointer"
-            onClick={navigatePrev}
-            disabled={loading}
-          >
-            <ChevronLeft className="h-4 w-4" />
-          </Button>
-          <span className="text-sm text-muted-foreground tabular-nums">
-            {applications.length > 0
-              ? `${currentIndex + 1} of ${applications.length}`
-              : "-"}
-          </span>
+        ) : null
+      }
+      currentIndex={currentIndex}
+      totalCount={applications.length}
+      onNavigateNext={navigateNext}
+      onNavigatePrev={navigatePrev}
+      canNavigatePrev={!loading && (currentIndex > 0 || !!prevCursor)}
+      canNavigateNext={
+        !loading && (currentIndex < applications.length - 1 || !!nextCursor)
+      }
+      detailsPanel={
+        <GradingDetailsPanel application={detail} loading={detailLoading}>
+          {currentApp && (
+            <div>
+              <h3 className="text-sm font-medium text-muted-foreground mb-2">
+                Review Stats
+              </h3>
+              <div className="space-y-2">
+                <p className="text-sm">
+                  {currentApp.reviews_completed} / {currentApp.reviews_assigned}{" "}
+                  reviews completed
+                </p>
+                <div className="flex items-center gap-2 flex-wrap">
+                  <Badge className="bg-green-100 text-green-800">
+                    {currentApp.accept_votes} accept
+                  </Badge>
+                  <Badge className="bg-red-100 text-red-800">
+                    {currentApp.reject_votes} reject
+                  </Badge>
+                  <Badge className="bg-yellow-100 text-yellow-800">
+                    {currentApp.waitlist_votes} waitlist
+                  </Badge>
+                  {currentApp.ai_percent != null && (
+                    <Badge variant="secondary">
+                      AI: {currentApp.ai_percent}%
+                    </Badge>
+                  )}
+                </div>
+              </div>
+            </div>
+          )}
+        </GradingDetailsPanel>
+      }
+      actionPanel={
+        <GradingPanel
+          listItem={currentApp}
+          notes={notes}
+          notesLoading={notesLoading}
+          grading={grading}
+          onGrade={handleGrade}
+        />
+      }
+      emptyState={
+        <div className="flex flex-col items-center justify-center h-full gap-4">
+          <p className="text-muted-foreground">
+            No applications match the current filters.
+          </p>
           <Button
-            variant="ghost"
-            size="icon-sm"
+            variant="outline"
             className="cursor-pointer"
-            onClick={navigateNext}
-            disabled={loading}
+            onClick={() => navigate("/admin/sa/reviews")}
           >
-            <ChevronRight className="h-4 w-4" />
+            <ArrowLeft className="h-4 w-4 mr-1.5" />
+            Back to Reviews
           </Button>
         </div>
-      </div>
-
-      {/* Content */}
-      <div className="flex flex-1 min-h-0">
-        {/* Left panel - Application details (75%) */}
-        <div className="w-3/4 overflow-auto border-r">
-          <GradingDetailsPanel
-            application={detail}
-            listItem={currentApp}
-            loading={detailLoading}
-          />
-        </div>
-
-        {/* Right panel - Grading (25%) */}
-        <div className="w-1/4 flex flex-col bg-gray-50/50">
-          <div className="flex-1 overflow-auto">
-            <GradingPanel
-              listItem={currentApp}
-              notes={notes}
-              notesLoading={notesLoading}
-              grading={grading}
-              onGrade={handleGrade}
-            />
-          </div>
-          {/* Navigation hint - pinned at bottom */}
-          <div className="shrink-0 border-t bg-gray-50 p-4 pt-2">
-            <p className="text-xs text-muted-foreground text-center mt-2">
-              Use{" "}
-              <kbd className="px-1 py-0.5 bg-muted rounded text-[10px] font-mono">
-                ←
-              </kbd>{" "}
-              <kbd className="px-1 py-0.5 bg-muted rounded text-[10px] font-mono">
-                →
-              </kbd>{" "}
-              arrow keys to navigate &middot; Esc to go back
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
+      }
+    />
   );
 }
diff --git a/client/web/src/pages/superadmin/reviews/grading/components/GradingDetailsPanel.tsx b/client/web/src/pages/superadmin/reviews/grading/components/GradingDetailsPanel.tsx
deleted file mode 100644
index 42043e56..00000000
--- a/client/web/src/pages/superadmin/reviews/grading/components/GradingDetailsPanel.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import { memo } from "react";
-
-import { Badge } from "@/components/ui/badge";
-import { Skeleton } from "@/components/ui/skeleton";
-import {
-  DemographicsSection,
-  EducationSection,
-  EventPreferencesSection,
-  ExperienceSection,
-  LinksSection,
-  PersonalInfoSection,
-  ShortAnswersSection,
-  TimelineSection,
-} from "@/pages/admin/all-applicants/components/detail-sections";
-import type { ApplicationListItem } from "@/pages/admin/all-applicants/types";
-import type { Application } from "@/types";
-
-interface GradingDetailsPanelProps {
-  application: Application | null;
-  listItem: ApplicationListItem | null;
-  loading: boolean;
-}
-
-export const GradingDetailsPanel = memo(function GradingDetailsPanel({
-  application,
-  listItem,
-  loading,
-}: GradingDetailsPanelProps) {
-  if (loading) {
-    return (
-      <div className="space-y-8 p-8">
-        {[...Array(4)].map((_, i) => (
-          <div key={i} className="space-y-2">
-            <Skeleton className="h-4 w-24" />
-            <Skeleton className="h-5 w-full" />
-            <Skeleton className="h-5 w-3/4" />
-          </div>
-        ))}
-      </div>
-    );
-  }
-
-  if (!application) return null;
-
-  return (
-    <div className="space-y-8 p-8 pb-10 text-base">
-      <PersonalInfoSection application={application} />
-      <DemographicsSection application={application} />
-      <EducationSection application={application} />
-      <ExperienceSection application={application} />
-      <ShortAnswersSection application={application} />
-      <EventPreferencesSection application={application} />
-      <LinksSection application={application} />
-      <TimelineSection application={application} />
-
-      {/* Review Stats */}
-      {listItem && (
-        <div>
-          <h3 className="text-sm font-medium text-muted-foreground mb-2">
-            Review Stats
-          </h3>
-          <div className="space-y-2">
-            <p className="text-sm">
-              {listItem.reviews_completed} / {listItem.reviews_assigned} reviews
-              completed
-            </p>
-            <div className="flex items-center gap-2 flex-wrap">
-              <Badge className="bg-green-100 text-green-800">
-                {listItem.accept_votes} accept
-              </Badge>
-              <Badge className="bg-red-100 text-red-800">
-                {listItem.reject_votes} reject
-              </Badge>
-              <Badge className="bg-yellow-100 text-yellow-800">
-                {listItem.waitlist_votes} waitlist
-              </Badge>
-              {listItem.ai_percent != null && (
-                <Badge variant="secondary">AI: {listItem.ai_percent}%</Badge>
-              )}
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-});
diff --git a/client/web/src/pages/superadmin/reviews/grading/components/GradingPanel.tsx b/client/web/src/pages/superadmin/reviews/grading/components/GradingPanel.tsx
index 7bb1f6c9..d2eee5f7 100644
--- a/client/web/src/pages/superadmin/reviews/grading/components/GradingPanel.tsx
+++ b/client/web/src/pages/superadmin/reviews/grading/components/GradingPanel.tsx
@@ -1,20 +1,12 @@
-import {
-  Loader2,
-  MessageSquare,
-  Minus,
-  ThumbsDown,
-  ThumbsUp,
-} from "lucide-react";
+import { Minus, ThumbsDown, ThumbsUp } from "lucide-react";
 import { memo } from "react";
 
 import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
+  GradingActionButtons,
+  ReviewerNotesList,
+} from "@/pages/admin/_shared/grading";
 import type { ApplicationListItem } from "@/pages/admin/all-applicants/types";
 import { getStatusColor } from "@/pages/admin/all-applicants/utils";
 import type { ReviewNote } from "@/pages/admin/assigned/types";
@@ -68,116 +60,25 @@ export const GradingPanel = memo(function GradingPanel({
             <Minus className="h-3.5 w-3.5 mr-1" />
             {listItem.waitlist_votes}
           </Badge>
+          {listItem.ai_percent != null && (
+            <Badge variant="secondary" className="text-sm px-2.5 py-1">
+              AI: {listItem.ai_percent}%
+            </Badge>
+          )}
         </div>
       </div>
 
       {/* Reviewer Notes */}
-      <div>
-        <div className="flex items-center gap-1.5 mb-2.5">
-          <MessageSquare className="h-4 w-4 text-muted-foreground" />
-          <Label className="text-sm text-muted-foreground">
-            Reviewer Notes ({notes.length})
-          </Label>
-        </div>
-        {notesLoading ? (
-          <div className="text-xs text-muted-foreground">Loading notes...</div>
-        ) : notes.length > 0 ? (
-          <div className="space-y-2.5">
-            {notes.map((note, idx) => (
-              <div
-                key={`${note.admin_id}-${idx}`}
-                className="bg-white border rounded-md p-3 text-sm"
-              >
-                <div className="flex items-center justify-between mb-1.5">
-                  <span className="text-sm font-medium text-muted-foreground">
-                    {note.admin_email}
-                  </span>
-                  <span className="text-xs text-muted-foreground">
-                    {new Date(note.created_at).toLocaleDateString()}
-                  </span>
-                </div>
-                <p className="text-sm leading-relaxed whitespace-pre-wrap">
-                  {note.notes}
-                </p>
-              </div>
-            ))}
-          </div>
-        ) : (
-          <p className="text-xs text-muted-foreground italic">
-            No reviewer notes
-          </p>
-        )}
-      </div>
+      <ReviewerNotesList notes={notes} loading={notesLoading} />
 
       {/* Grade Applicant */}
-      <div>
-        <Label className="text-xs text-muted-foreground">Grade Applicant</Label>
-        <div className="flex flex-col gap-2 mt-2">
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="outline"
-                className="w-full cursor-pointer hover:bg-red-50 hover:text-red-700 hover:border-red-300 disabled:opacity-50 disabled:cursor-not-allowed"
-                onClick={() => onGrade("rejected")}
-                disabled={grading}
-              >
-                {grading ? (
-                  <Loader2 className="h-4 w-4 mr-1.5 animate-spin" />
-                ) : (
-                  <ThumbsDown className="h-4 w-4 mr-1.5" />
-                )}
-                Reject
-                <kbd className="ml-auto px-1.5 py-0.5 bg-muted rounded text-[10px] font-mono text-muted-foreground">
-                  ⌘J
-                </kbd>
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>Reject (⌘J)</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="outline"
-                className="w-full cursor-pointer hover:bg-yellow-50 hover:text-yellow-700 hover:border-yellow-300 disabled:opacity-50 disabled:cursor-not-allowed"
-                onClick={() => onGrade("waitlisted")}
-                disabled={grading}
-              >
-                {grading ? (
-                  <Loader2 className="h-4 w-4 mr-1.5 animate-spin" />
-                ) : (
-                  <Minus className="h-4 w-4 mr-1.5" />
-                )}
-                Waitlist
-                <kbd className="ml-auto px-1.5 py-0.5 bg-muted rounded text-[10px] font-mono text-muted-foreground">
-                  ⌘K
-                </kbd>
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>Waitlist (⌘K)</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="outline"
-                className="w-full cursor-pointer hover:bg-green-50 hover:text-green-700 hover:border-green-300 disabled:opacity-50 disabled:cursor-not-allowed"
-                onClick={() => onGrade("accepted")}
-                disabled={grading}
-              >
-                {grading ? (
-                  <Loader2 className="h-4 w-4 mr-1.5 animate-spin" />
-                ) : (
-                  <ThumbsUp className="h-4 w-4 mr-1.5" />
-                )}
-                Accept
-                <kbd className="ml-auto px-1.5 py-0.5 bg-muted rounded text-[10px] font-mono text-muted-foreground">
-                  ⌘L
-                </kbd>
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>Accept (⌘L)</TooltipContent>
-          </Tooltip>
-        </div>
-      </div>
+      <GradingActionButtons
+        disabled={grading}
+        onReject={() => onGrade("rejected")}
+        onWaitlist={() => onGrade("waitlisted")}
+        onAccept={() => onGrade("accepted")}
+        label="Grade Applicant"
+      />
     </div>
   );
 });
diff --git a/client/web/src/pages/superadmin/reviews/grading/hooks/useGradingKeyboardShortcuts.ts b/client/web/src/pages/superadmin/reviews/grading/hooks/useGradingKeyboardShortcuts.ts
deleted file mode 100644
index ac4b1eca..00000000
--- a/client/web/src/pages/superadmin/reviews/grading/hooks/useGradingKeyboardShortcuts.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import { useEffect } from "react";
-import { useNavigate } from "react-router-dom";
-
-interface UseGradingKeyboardShortcutsOptions {
-  grading: boolean;
-  currentApplicationId: string | null;
-  onNavigateNext: () => void;
-  onNavigatePrev: () => void;
-  onGrade: (status: "accepted" | "rejected" | "waitlisted") => void;
-}
-
-export function useGradingKeyboardShortcuts({
-  grading,
-  currentApplicationId,
-  onNavigateNext,
-  onNavigatePrev,
-  onGrade,
-}: UseGradingKeyboardShortcutsOptions) {
-  const navigate = useNavigate();
-
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      const activeElement = document.activeElement;
-      const isInputFocused =
-        activeElement instanceof HTMLTextAreaElement ||
-        activeElement instanceof HTMLInputElement;
-
-      // Escape: Go back to reviews page
-      if (e.key === "Escape") {
-        e.preventDefault();
-        navigate("/admin/sa/reviews");
-        return;
-      }
-
-      // Arrow keys: Navigate between applications (only when not typing)
-      if (!isInputFocused) {
-        if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
-          e.preventDefault();
-          onNavigatePrev();
-          return;
-        }
-        if (e.key === "ArrowRight" || e.key === "ArrowDown") {
-          e.preventDefault();
-          onNavigateNext();
-          return;
-        }
-      }
-
-      // Cmd/Ctrl + J/K/L: Grade shortcuts
-      if ((e.metaKey || e.ctrlKey) && currentApplicationId && !grading) {
-        if (e.key === "j") {
-          e.preventDefault();
-          onGrade("rejected");
-        } else if (e.key === "k") {
-          e.preventDefault();
-          onGrade("waitlisted");
-        } else if (e.key === "l") {
-          e.preventDefault();
-          onGrade("accepted");
-        }
-      }
-    };
-
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [
-    grading,
-    currentApplicationId,
-    onNavigateNext,
-    onNavigatePrev,
-    onGrade,
-    navigate,
-  ]);
-}
diff --git a/client/web/src/pages/superadmin/reviews/grading/store.ts b/client/web/src/pages/superadmin/reviews/grading/store.ts
index 7f11cb99..10222bb7 100644
--- a/client/web/src/pages/superadmin/reviews/grading/store.ts
+++ b/client/web/src/pages/superadmin/reviews/grading/store.ts
@@ -35,7 +35,6 @@ interface GradingState {
   nextCursor: string | null;
   prevCursor: string | null;
   filterParams: FilterParams;
-
   fetchApplications: (params?: FetchParams) => Promise<void>;
   loadDetail: (applicationId: string) => Promise<void>;
   navigateNext: () => void;
@@ -61,6 +60,8 @@ const initialState = {
   filterParams: {} as FilterParams,
 };
 
+let loadDetailSeq = 0;
+
 export const useGradingStore = create<GradingState>((set, get) => ({
   ...initialState,
 
@@ -100,13 +101,22 @@ export const useGradingStore = create<GradingState>((set, get) => ({
   },
 
   loadDetail: async (applicationId: string) => {
-    set({ detailLoading: true, notesLoading: true, detail: null, notes: [] });
+    const requestId = ++loadDetailSeq;
+    set({
+      detailLoading: true,
+      notesLoading: true,
+      detail: null,
+      notes: [],
+    });
 
     const [detailRes, notesRes] = await Promise.all([
       fetchApplicationById(applicationId),
       fetchReviewNotes(applicationId),
     ]);
 
+    // Guard against stale responses from rapid navigation
+    if (loadDetailSeq !== requestId) return;
+
     if (detailRes.status === 200 && detailRes.data) {
       set({ detail: detailRes.data, detailLoading: false });
     } else {
@@ -193,6 +203,7 @@ export const useGradingStore = create<GradingState>((set, get) => ({
   },
 
   reset: () => {
+    loadDetailSeq = 0;
     set(initialState);
   },
 }));
diff --git a/client/web/src/pages/superadmin/reviews/store.ts b/client/web/src/pages/superadmin/reviews/store.ts
index 019c3681..f056f98f 100644
--- a/client/web/src/pages/superadmin/reviews/store.ts
+++ b/client/web/src/pages/superadmin/reviews/store.ts
@@ -1,118 +1,6 @@
-import { create } from "zustand";
+import { createApplicationsStore } from "@/pages/admin/all-applicants/createStore";
 
-import {
-  fetchApplications as apiFetchApplications,
-  fetchApplicationStats,
-} from "@/pages/admin/all-applicants/api";
-import type {
-  ApplicationListItem,
-  ApplicationSortBy,
-  ApplicationStats,
-  ApplicationStatus,
-  FetchParams,
-} from "@/pages/admin/all-applicants/types";
-
-export interface ReviewApplicationsState {
-  applications: ApplicationListItem[];
-  loading: boolean;
-  nextCursor: string | null;
-  prevCursor: string | null;
-  hasMore: boolean;
-  currentStatus: ApplicationStatus;
-  currentSearch: string;
-  currentSortBy: ApplicationSortBy;
-  stats: ApplicationStats | null;
-  statsLoading: boolean;
-  fetchApplications: (
-    params?: FetchParams,
-    signal?: AbortSignal,
-  ) => Promise<void>;
-  fetchStats: (signal?: AbortSignal) => Promise<void>;
-}
-
-export const useReviewApplicationsStore = create<ReviewApplicationsState>(
-  (set, get) => ({
-    applications: [],
-    loading: false,
-    nextCursor: null,
-    prevCursor: null,
-    hasMore: false,
-    currentStatus: "submitted",
-    currentSearch: "",
-    currentSortBy: "accept_votes",
-    stats: null,
-    statsLoading: false,
-
-    fetchApplications: async (params?: FetchParams, signal?: AbortSignal) => {
-      set({ loading: true });
-
-      let status: ApplicationStatus;
-      if (params && "status" in params && params.status) {
-        status = params.status;
-      } else {
-        status = get().currentStatus;
-      }
-
-      let search: string;
-      if (params && "search" in params) {
-        search = params.search ?? "";
-      } else {
-        search = get().currentSearch;
-      }
-
-      let sortBy: ApplicationSortBy;
-      if (params && "sort_by" in params && params.sort_by) {
-        sortBy = params.sort_by;
-      } else {
-        sortBy = get().currentSortBy;
-      }
-
-      const res = await apiFetchApplications(
-        {
-          ...params,
-          status,
-          search: search || undefined,
-          sort_by: sortBy,
-        },
-        signal,
-      );
-
-      if (signal?.aborted) return;
-
-      if (res.status === 200 && res.data) {
-        set({
-          applications: res.data.applications,
-          nextCursor: res.data.next_cursor,
-          prevCursor: res.data.prev_cursor,
-          hasMore: res.data.has_more,
-          loading: false,
-          currentStatus: status,
-          currentSearch: search,
-          currentSortBy: sortBy,
-        });
-      } else {
-        set({
-          applications: [],
-          nextCursor: null,
-          prevCursor: null,
-          hasMore: false,
-          loading: false,
-        });
-      }
-    },
-
-    fetchStats: async (signal?: AbortSignal) => {
-      set({ statsLoading: true });
-
-      const res = await fetchApplicationStats(signal);
-
-      if (signal?.aborted) return;
-
-      if (res.status === 200 && res.data) {
-        set({ stats: res.data, statsLoading: false });
-      } else {
-        set({ stats: null, statsLoading: false });
-      }
-    },
-  }),
-);
+export const useReviewApplicationsStore = createApplicationsStore({
+  defaultStatus: "submitted",
+  defaultSortBy: "accept_votes",
+});