diff --git a/apps/console/src/App.tsx b/apps/console/src/App.tsx
index b89b5a546..30b083065 100644
--- a/apps/console/src/App.tsx
+++ b/apps/console/src/App.tsx
@@ -13,6 +13,23 @@ import AuthLayout from "./layouts/AuthLayout";
 import { RelayEnvironment } from "./RelayEnvironment";
 import VisitorErrorBoundary from "./components/VisitorErrorBoundary";
 import { FrameworkListPageSkeleton } from "./pages/FrameworkListPage";
+import { ControlOverviewPageSkeleton } from "./pages/ControlOverviewPage";
+import { CreateControlPageSkeleton } from "./pages/CreateControlPage";
+import { UpdateFrameworkPageSkeleton } from "./pages/UpdateFrameworkPage";
+import { UpdateControlPageSkeleton } from "./pages/UpdateControlPage";
+import { CreateFrameworkPageSkeleton } from "./pages/CreateFrameworkPage";
+import { CreateOrganizationPageSkeleton } from "./pages/CreateOrganizationPage";
+import { CreatePeoplePageSkeleton } from "./pages/CreatePeoplePage";
+import { CreatePolicyPageSkeleton } from "./pages/CreatePolicyPage";
+import { FrameworkOverviewPageSkeleton } from "./pages/FrameworkOverviewPage";
+import { PeopleListPageSkeleton } from "./pages/PeopleListPage";
+import { PeopleOverviewPageSkeleton } from "./pages/PeopleOverviewPage";
+import { PolicyListPageSkeleton } from "./pages/PolicyListPage";
+import { PolicyOverviewPageSkeleton } from "./pages/PolicyOverviewPage";
+import { UpdatePolicyPageSkeleton } from "./pages/UpdatePolicyPage";
+import { VendorListPageSkeleton } from "./pages/VendorListPage";
+import { VendorOverviewPageSkeleton } from "./pages/VendorOverviewPage";
+import { SettingsPageSkeleton } from "./pages/SettingsPage";
 
 posthog.init(process.env.POSTHOG_KEY!, {
   api_host: process.env.POSTHOG_HOST,
@@ -85,7 +102,7 @@ function App() {
                     <Route
                       path="create"
                       element={
-                        <Suspense>
+                        <Suspense fallback={<CreateOrganizationPageSkeleton />}>
                           <ErrorBoundaryWithLocation>
                             <CreateOrganizationPage />
                           </ErrorBoundaryWithLocation>
@@ -106,7 +123,7 @@ function App() {
                       <Route
                         path="people"
                         element={
-                          <Suspense>
+                          <Suspense fallback={<PeopleListPageSkeleton />}>
                             <ErrorBoundaryWithLocation>
                               <PeopleListPage />
                             </ErrorBoundaryWithLocation>
@@ -116,7 +133,7 @@ function App() {
                       <Route
                         path="people/create"
                         element={
-                          <Suspense>
+                          <Suspense fallback={<CreatePeoplePageSkeleton />}>
                             <ErrorBoundaryWithLocation>
                               <CreatePeoplePage />
                             </ErrorBoundaryWithLocation>
@@ -126,7 +143,7 @@ function App() {
                       <Route
                         path="people/:peopleId"
                         element={
-                          <Suspense>
+                          <Suspense fallback={<PeopleOverviewPageSkeleton />}>
                             <ErrorBoundaryWithLocation>
                               <PeopleOverviewPage />
                             </ErrorBoundaryWithLocation>
@@ -136,7 +153,7 @@ function App() {
                       <Route
                         path="vendors"
                         element={
-                          <Suspense>
+                          <Suspense fallback={<VendorListPageSkeleton />}>
                             <ErrorBoundaryWithLocation>
                               <VendorListPage />
                             </ErrorBoundaryWithLocation>
@@ -156,7 +173,7 @@ function App() {
                       <Route
                         path="frameworks/create"
                         element={
-                          <Suspense>
+                          <Suspense fallback={<CreateFrameworkPageSkeleton />}>
                             <ErrorBoundaryWithLocation>
                               <CreateFrameworkPage />
                             </ErrorBoundaryWithLocation>
@@ -166,7 +183,9 @@ function App() {
                       <Route
                         path="frameworks/:frameworkId"
                         element={
-                          <Suspense>
+                          <Suspense
+                            fallback={<FrameworkOverviewPageSkeleton />}
+                          >
                             <ErrorBoundaryWithLocation>
                               <FrameworkOverviewPage />
                             </ErrorBoundaryWithLocation>
@@ -176,7 +195,7 @@ function App() {
                       <Route
                         path="frameworks/:frameworkId/update"
                         element={
-                          <Suspense>
+                          <Suspense fallback={<UpdateFrameworkPageSkeleton />}>
                             <ErrorBoundaryWithLocation>
                               <UpdateFrameworkPage />
                             </ErrorBoundaryWithLocation>
@@ -186,7 +205,7 @@ function App() {
                       <Route
                         path="frameworks/:frameworkId/controls/create"
                         element={
-                          <Suspense>
+                          <Suspense fallback={<CreateControlPageSkeleton />}>
                             <ErrorBoundaryWithLocation>
                               <CreateControlPage />
                             </ErrorBoundaryWithLocation>
@@ -196,7 +215,7 @@ function App() {
                       <Route
                         path="frameworks/:frameworkId/controls/:controlId"
                         element={
-                          <Suspense>
+                          <Suspense fallback={<ControlOverviewPageSkeleton />}>
                             <ErrorBoundaryWithLocation>
                               <ControlOverviewPage />
                             </ErrorBoundaryWithLocation>
@@ -206,7 +225,7 @@ function App() {
                       <Route
                         path="frameworks/:frameworkId/controls/:controlId/update"
                         element={
-                          <Suspense>
+                          <Suspense fallback={<UpdateControlPageSkeleton />}>
                             <ErrorBoundaryWithLocation>
                               <UpdateControlPage />
                             </ErrorBoundaryWithLocation>
@@ -216,7 +235,7 @@ function App() {
                       <Route
                         path="vendors/:vendorId"
                         element={
-                          <Suspense>
+                          <Suspense fallback={<VendorOverviewPageSkeleton />}>
                             <ErrorBoundaryWithLocation>
                               <VendorOverviewPage />
                             </ErrorBoundaryWithLocation>
@@ -227,7 +246,7 @@ function App() {
                       <Route
                         path="policies"
                         element={
-                          <Suspense>
+                          <Suspense fallback={<PolicyListPageSkeleton />}>
                             <ErrorBoundaryWithLocation>
                               <PolicyListPage />
                             </ErrorBoundaryWithLocation>
@@ -237,7 +256,7 @@ function App() {
                       <Route
                         path="policies/create"
                         element={
-                          <Suspense>
+                          <Suspense fallback={<CreatePolicyPageSkeleton />}>
                             <ErrorBoundaryWithLocation>
                               <CreatePolicyPage />
                             </ErrorBoundaryWithLocation>
@@ -247,7 +266,7 @@ function App() {
                       <Route
                         path="policies/:policyId"
                         element={
-                          <Suspense>
+                          <Suspense fallback={<PolicyOverviewPageSkeleton />}>
                             <ErrorBoundaryWithLocation>
                               <PolicyOverviewPage />
                             </ErrorBoundaryWithLocation>
@@ -257,7 +276,7 @@ function App() {
                       <Route
                         path="policies/:policyId/update"
                         element={
-                          <Suspense>
+                          <Suspense fallback={<UpdatePolicyPageSkeleton />}>
                             <ErrorBoundaryWithLocation>
                               <UpdatePolicyPage />
                             </ErrorBoundaryWithLocation>
@@ -267,7 +286,7 @@ function App() {
                       <Route
                         path="settings"
                         element={
-                          <Suspense>
+                          <Suspense fallback={<SettingsPageSkeleton />}>
                             <ErrorBoundaryWithLocation>
                               <SettingsPage />
                             </ErrorBoundaryWithLocation>
diff --git a/apps/console/src/components/PageHeader.tsx b/apps/console/src/components/PageHeader.tsx
index fed913cba..b24c8e7ad 100644
--- a/apps/console/src/components/PageHeader.tsx
+++ b/apps/console/src/components/PageHeader.tsx
@@ -56,8 +56,8 @@ export function PageHeading({
 
 const PageHeadingSkeleton: FC = () => {
   return (
-    <div className="py-[3px]">
-      <div className="bg-muted animate rounded-lg w-60 h-7.5" />
+    <div className="py-[3px] w-2/5">
+      <div className="bg-muted animate rounded-lg h-7.5" />
     </div>
   );
 };
diff --git a/apps/console/src/pages/ControlOverviewPage.tsx b/apps/console/src/pages/ControlOverviewPage.tsx
index e8909bd2c..00a2683d5 100644
--- a/apps/console/src/pages/ControlOverviewPage.tsx
+++ b/apps/console/src/pages/ControlOverviewPage.tsx
@@ -64,7 +64,6 @@ import { Textarea } from "@/components/ui/textarea";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Label } from "@/components/ui/label";
 
-import { Helmet } from "react-helmet-async";
 import type { ControlOverviewPageQuery as ControlOverviewPageQueryType } from "./__generated__/ControlOverviewPageQuery.graphql";
 import type { ControlOverviewPageUpdateTaskStateMutation as ControlOverviewPageUpdateTaskStateMutationType } from "./__generated__/ControlOverviewPageUpdateTaskStateMutation.graphql";
 import type { ControlOverviewPageCreateTaskMutation as ControlOverviewPageCreateTaskMutationType } from "./__generated__/ControlOverviewPageCreateTaskMutation.graphql";
@@ -75,7 +74,7 @@ import type { ControlOverviewPageAssignTaskMutation as ControlOverviewPageAssign
 import type { ControlOverviewPageUnassignTaskMutation as ControlOverviewPageUnassignTaskMutationType } from "./__generated__/ControlOverviewPageUnassignTaskMutation.graphql";
 import type { ControlOverviewPageOrganizationQuery$data } from "./__generated__/ControlOverviewPageOrganizationQuery.graphql";
 import type { ControlOverviewPageUpdateControlStateMutation as ControlOverviewPageUpdateControlStateMutationType } from "./__generated__/ControlOverviewPageUpdateControlStateMutation.graphql";
-import { PageHeader } from "@/components/PageHeader";
+import { PageTemplate, PageTemplateSkeleton } from "@/components/PageTemplate";
 
 // Function to format ISO8601 duration to human-readable format
 const formatDuration = (isoDuration: string): string => {
@@ -1128,890 +1127,872 @@ function ControlOverviewPageContent({
   };
 
   return (
-    <>
-      <Helmet>
-        <title>{data.control.name || "Control"} - Probo</title>
-      </Helmet>
-      <div className="container">
-        <PageHeader
-          className="mb-17"
-          title={data.control.name ?? ""}
-          actions={
-            <div className="flex items-center gap-2">
-              <Button variant="outline" size="sm" onClick={handleEditControl}>
-                Edit Control
-              </Button>
-              <Select
-                defaultValue={data.control.state}
-                onValueChange={handleControlStateChange}
-              >
-                <SelectTrigger className="w-[160px] h-8 text-sm">
-                  <div
-                    className={`${getStateColor(
-                      data.control.state
-                    )} px-2 py-0.5 rounded-full text-sm w-full text-center`}
-                  >
-                    {formatState(data.control.state)}
-                  </div>
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="NOT_STARTED">Not Started</SelectItem>
-                  <SelectItem value="IN_PROGRESS">In Progress</SelectItem>
-                  <SelectItem value="IMPLEMENTED">Implemented</SelectItem>
-                  <SelectItem value="NOT_APPLICABLE">Not Applicable</SelectItem>
-                </SelectContent>
-              </Select>
+    <PageTemplate
+      title={data.control.name ?? ""}
+      actions={
+        <div className="flex items-center gap-2">
+          <Button variant="outline" size="sm" onClick={handleEditControl}>
+            Edit Control
+          </Button>
+          <Select
+            defaultValue={data.control.state}
+            onValueChange={handleControlStateChange}
+          >
+            <SelectTrigger className="w-[160px] h-8 text-sm">
               <div
-                className={`${getImportanceColor(
-                  data.control.importance
-                )} px-3 py-1 rounded-full text-sm`}
+                className={`${getStateColor(
+                  data.control.state
+                )} px-2 py-0.5 rounded-full text-sm w-full text-center`}
               >
-                {formatImportance(data.control.importance)}
+                {formatState(data.control.state)}
               </div>
-            </div>
-          }
-        />
-        <div className="space-y-4 mb-8">
-          <Card className="mt-4">
-            <CardContent className="pt-6">
-              <div className="prose prose-gray prose-sm md:prose-base text-gray-600 max-w-3xl">
-                <ReactMarkdown>{data.control.description}</ReactMarkdown>
-              </div>
-            </CardContent>
-          </Card>
-        </div>
-
-        <div>
-          <div className="flex items-center justify-between mb-6">
-            <h2 className="text-xl font-semibold">Tasks</h2>
-            <div className="flex items-center gap-3">
-              <div className="text-sm text-gray-500 flex items-center bg-gray-50 px-3 py-1.5 rounded-md border border-gray-200">
-                <FileIcon className="w-4 h-4 mr-2 text-blue-500" />
-                <span>Drag & drop files onto tasks to add evidence</span>
-              </div>
-              <Dialog
-                open={isCreateTaskOpen}
-                onOpenChange={setIsCreateTaskOpen}
-              >
-                <DialogTrigger asChild>
-                  <Button size="sm" className="flex items-center gap-1">
-                    <Plus className="w-4 h-4" />
-                    <span>Add Task</span>
-                  </Button>
-                </DialogTrigger>
-                <DialogContent>
-                  <DialogHeader>
-                    <DialogTitle>Create New Task</DialogTitle>
-                    <DialogDescription>
-                      Add a new task to this control. Click save when
-                      you&apos;re done.
-                    </DialogDescription>
-                  </DialogHeader>
-                  <div className="space-y-4 py-4">
-                    <div className="space-y-2">
-                      <label htmlFor="name" className="text-sm font-medium">
-                        Task Name
-                      </label>
-                      <Input
-                        id="name"
-                        value={newTaskName}
-                        onChange={(e) => setNewTaskName(e.target.value)}
-                        placeholder="Enter task name"
-                      />
-                    </div>
-                    <div className="space-y-2">
-                      <label
-                        htmlFor="description"
-                        className="text-sm font-medium"
-                      >
-                        Description (optional)
-                      </label>
-                      <Textarea
-                        id="description"
-                        value={newTaskDescription}
-                        onChange={(e) => setNewTaskDescription(e.target.value)}
-                        placeholder="Enter task description"
-                      />
-                    </div>
-                    <div className="space-y-2">
-                      <label
-                        htmlFor="timeEstimate"
-                        className="text-sm font-medium"
-                      >
-                        Time Estimate (optional)
-                      </label>
-                      <div className="grid grid-cols-3 gap-4">
-                        <div>
-                          <label
-                            htmlFor="days"
-                            className="text-xs text-gray-500 block mb-1"
-                          >
-                            Days
-                          </label>
-                          <Input
-                            id="days"
-                            type="number"
-                            min="0"
-                            value={timeEstimateDays}
-                            onChange={(e) =>
-                              setTimeEstimateDays(e.target.value)
-                            }
-                            placeholder="0"
-                          />
-                        </div>
-                        <div>
-                          <label
-                            htmlFor="hours"
-                            className="text-xs text-gray-500 block mb-1"
-                          >
-                            Hours
-                          </label>
-                          <Input
-                            id="hours"
-                            type="number"
-                            min="0"
-                            max="23"
-                            value={timeEstimateHours}
-                            onChange={(e) =>
-                              setTimeEstimateHours(e.target.value)
-                            }
-                            placeholder="0"
-                          />
-                        </div>
-                        <div>
-                          <label
-                            htmlFor="minutes"
-                            className="text-xs text-gray-500 block mb-1"
-                          >
-                            Minutes
-                          </label>
-                          <Input
-                            id="minutes"
-                            type="number"
-                            min="0"
-                            max="59"
-                            value={timeEstimateMinutes}
-                            onChange={(e) =>
-                              setTimeEstimateMinutes(e.target.value)
-                            }
-                            placeholder="0"
-                          />
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <DialogFooter>
-                    <Button
-                      variant="outline"
-                      onClick={() => setIsCreateTaskOpen(false)}
-                    >
-                      Cancel
-                    </Button>
-                    <Button onClick={handleCreateTask}>Create Task</Button>
-                  </DialogFooter>
-                </DialogContent>
-              </Dialog>
-            </div>
-          </div>
-          <div className={`space-y-2 ${isDraggingFile ? "space-y-4" : ""}`}>
-            {tasks.map((task) => (
-              <div
-                key={task?.id}
-                className="rounded-md overflow-hidden border border-gray-200"
-              >
-                <div
-                  className={`flex items-center gap-3 py-4 px-2 hover:bg-gray-50 group relative transition-all duration-200 ${
-                    isDraggingFile && draggedOverTaskId !== task?.id
-                      ? "border-dashed border-blue-300 bg-blue-50 bg-opacity-30"
-                      : ""
-                  } ${
-                    draggedOverTaskId === task?.id
-                      ? "bg-blue-50 border-2 border-blue-400 shadow-md"
-                      : ""
-                  }`}
-                  onDragOver={(e) => task?.id && handleDragOver(e, task.id)}
-                  onDragLeave={handleDragLeave}
-                  onDrop={(e) => task?.id && handleDrop(e, task.id)}
-                >
-                  {isDraggingFile && draggedOverTaskId !== task?.id && (
-                    <div className="absolute inset-0 flex items-center justify-center rounded-md z-10">
-                      <div className="flex items-center gap-2 text-blue-600 bg-white px-3 py-1.5 rounded-lg shadow-xs">
-                        <FileIcon className="w-4 h-4" />
-                        <p className="text-sm font-medium">Drop file here</p>
-                      </div>
-                    </div>
-                  )}
-
-                  {draggedOverTaskId === task?.id && (
-                    <div className="absolute inset-0 flex items-center justify-center rounded-md z-10 bg-blue-50 bg-opacity-90 backdrop-blur-sm border-2 border-dashed border-blue-400">
-                      <div className="flex items-center gap-2 text-blue-600 bg-white p-5 rounded-lg shadow-md">
-                        <FileText className="w-4 h-4 text-blue-500" />
-                        <p className="text-sm font-medium text-center">
-                          Drop file to add as evidence
-                        </p>
-                      </div>
-                    </div>
-                  )}
-
-                  {uploadingTaskId === task?.id && (
-                    <div className="absolute inset-0 flex items-center justify-center bg-white bg-opacity-95 rounded-md z-10 backdrop-blur-sm">
-                      <div className="flex flex-col items-center gap-3 text-blue-600">
-                        <Loader2 className="w-10 h-10 animate-spin text-blue-500" />
-                        <p className="font-medium">Adding document...</p>
-                        <p className="text-sm text-gray-500">Please wait</p>
-                      </div>
-                    </div>
-                  )}
-
-                  <div
-                    className={`w-5 h-5 rounded border flex items-center justify-center cursor-pointer ${
-                      task?.state === "DONE"
-                        ? "border-gray-400 bg-gray-100"
-                        : "border-gray-300"
-                    } ${isDraggingFile ? "opacity-50" : ""}`}
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      if (task?.id && task?.state) {
-                        handleTaskClick(task.id, task.state, task.version);
-                      }
-                    }}
-                  >
-                    {task?.state === "DONE" && (
-                      <CheckCircle2 className="w-4 h-4 text-gray-500" />
-                    )}
-                  </div>
-                  <div
-                    className={`flex-1 flex items-center justify-between ${
-                      isDraggingFile ? "opacity-50" : ""
-                    }`}
-                  >
-                    <div>
-                      <h3
-                        className={`text-sm ${
-                          task?.state === "DONE"
-                            ? "text-gray-500 line-through"
-                            : "text-gray-900"
-                        }`}
-                      >
-                        {task?.name}
-                      </h3>
-                      {task?.timeEstimate && (
-                        <p
-                          className={`text-xs mt-1 flex items-center ${
-                            task?.state === "DONE"
-                              ? "text-gray-400 line-through"
-                              : "text-blue-500"
-                          }`}
-                        >
-                          <span className="inline-block w-4 h-4 mr-1">⏱️</span>
-                          <span>{formatDuration(task.timeEstimate)}</span>
-                        </p>
-                      )}
-                      {task?.assignedTo && (
-                        <p className="text-xs mt-1 flex items-center text-gray-600">
-                          <User className="w-3 h-3 mr-1" />
-                          <span>{task.assignedTo.fullName}</span>
-                        </p>
-                      )}
-                    </div>
-                    <div className="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
-                      {/* People Selector */}
-                      <Popover
-                        open={peoplePopoverOpen[task?.id || ""]}
-                        onOpenChange={(open: boolean) => {
-                          if (task?.id) {
-                            setPeoplePopoverOpen((prev) => ({
-                              ...prev,
-                              [task.id]: open,
-                            }));
-                          }
-                        }}
-                      >
-                        <PopoverTrigger asChild>
-                          <button
-                            type="button"
-                            className="text-gray-400 hover:text-blue-600"
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              if (task?.id) {
-                                setPeoplePopoverOpen((prev) => ({
-                                  ...prev,
-                                  [task.id]: !prev[task.id],
-                                }));
-                              }
-                            }}
-                          >
-                            {task?.assignedTo ? (
-                              <UserMinus className="w-4 h-4" />
-                            ) : (
-                              <UserPlus className="w-4 h-4" />
-                            )}
-                          </button>
-                        </PopoverTrigger>
-                        <PopoverContent className="w-[250px] p-0" align="end">
-                          {task?.assignedTo ? (
-                            <div className="p-4 space-y-4">
-                              <div className="flex items-center gap-2">
-                                <User className="w-4 h-4 text-gray-500" />
-                                <div className="text-sm">
-                                  <p className="font-medium">
-                                    {task.assignedTo.fullName}
-                                  </p>
-                                  <p className="text-xs text-gray-500">
-                                    {task.assignedTo.primaryEmailAddress}
-                                  </p>
-                                </div>
-                              </div>
-                              <Button
-                                type="button"
-                                variant="destructive"
-                                size="sm"
-                                className="w-full"
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  if (task?.id) {
-                                    handleUnassignPerson(task.id);
-                                  }
-                                }}
-                              >
-                                <UserMinus className="w-4 h-4 mr-2" />
-                                Unassign
-                              </Button>
-                            </div>
-                          ) : (
-                            <div className="max-h-[300px] overflow-y-auto">
-                              <div className="p-2 border-b">
-                                <input
-                                  type="text"
-                                  placeholder="Search people to assign..."
-                                  className="w-full px-3 py-2 text-sm border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
-                                  value={peopleSearch[task?.id || ""] || ""}
-                                  onChange={(e) => {
-                                    if (task?.id) {
-                                      setPeopleSearch((prev) => ({
-                                        ...prev,
-                                        [task.id]: e.target.value,
-                                      }));
-                                    }
-                                  }}
-                                />
-                              </div>
-                              <div className="px-3 py-2 text-xs text-gray-500">
-                                Click on a person to assign them to this task
-                              </div>
-                              <div className="py-1">
-                                {!organizationData?.organization?.peoples?.edges?.some(
-                                  (edge) => {
-                                    if (!edge?.node) return false;
-                                    const searchTerm = (
-                                      peopleSearch[task?.id || ""] || ""
-                                    ).toLowerCase();
-                                    return (
-                                      !searchTerm ||
-                                      edge.node.fullName
-                                        .toLowerCase()
-                                        .includes(searchTerm) ||
-                                      edge.node.primaryEmailAddress
-                                        .toLowerCase()
-                                        .includes(searchTerm)
-                                    );
-                                  }
-                                ) && (
-                                  <div className="py-6 text-center text-sm">
-                                    No people found.
-                                  </div>
-                                )}
-                                {organizationData?.organization?.peoples?.edges?.map(
-                                  (edge) => {
-                                    if (!edge?.node) return null;
-
-                                    const searchTerm = (
-                                      peopleSearch[task?.id || ""] || ""
-                                    ).toLowerCase();
-                                    if (
-                                      searchTerm &&
-                                      !edge.node.fullName
-                                        .toLowerCase()
-                                        .includes(searchTerm) &&
-                                      !edge.node.primaryEmailAddress
-                                        .toLowerCase()
-                                        .includes(searchTerm)
-                                    ) {
-                                      return null;
-                                    }
-
-                                    return (
-                                      <div
-                                        key={edge.node.id}
-                                        className="px-2 py-1 hover:bg-blue-50 cursor-pointer"
-                                      >
-                                        <button
-                                          type="button"
-                                          className="flex items-center w-full text-left"
-                                          onClick={() => {
-                                            if (task?.id) {
-                                              handleAssignPerson(
-                                                task.id,
-                                                edge.node.id
-                                              );
-                                              setPeoplePopoverOpen((prev) => ({
-                                                ...prev,
-                                                [task.id]: false,
-                                              }));
-                                            }
-                                          }}
-                                        >
-                                          <User className="mr-2 h-4 w-4 text-blue-500 flex-shrink-0" />
-                                          <div>
-                                            <p className="font-medium">
-                                              {edge.node.fullName}
-                                            </p>
-                                            <p className="text-xs text-gray-500">
-                                              {edge.node.primaryEmailAddress}
-                                            </p>
-                                          </div>
-                                        </button>
-                                      </div>
-                                    );
-                                  }
-                                )}
-                              </div>
-                            </div>
-                          )}
-                        </PopoverContent>
-                      </Popover>
-
-                      <button
-                        type="button"
-                        className="text-gray-400 hover:text-blue-600"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          if (task?.id && task?.name) {
-                            handleUploadEvidence(task.id, task.name);
-                          }
-                        }}
-                        title="Add Evidence"
-                      >
-                        <FileText className="w-4 h-4" />
-                      </button>
-                      <button
-                        type="button"
-                        className="text-gray-400 hover:text-red-600"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          if (task?.id && task?.name) {
-                            handleDeleteTask(task.id, task.name);
-                          }
-                        }}
-                      >
-                        <Trash2 className="w-4 h-4" />
-                      </button>
-                    </div>
-                  </div>
-                </div>
-
-                {/* Evidence section */}
-                {task?.evidences?.edges && task.evidences.edges.length > 0 && (
-                  <>
-                    <div
-                      className="bg-gray-50 border-t border-gray-200 px-4 py-2.5 flex justify-between items-center cursor-pointer hover:bg-gray-100 transition-colors"
-                      onClick={() => task.id && toggleEvidenceList(task.id)}
-                    >
-                      <div className="flex items-center gap-2">
-                        <FileIcon className="w-4 h-4 text-blue-500" />
-                        <span className="text-sm font-medium text-gray-700">
-                          {task.evidences.edges.length}{" "}
-                          {task.evidences.edges.length === 1
-                            ? "Evidence"
-                            : "Evidences"}
-                        </span>
-                      </div>
-                      {expandedEvidenceTaskId === task.id ? (
-                        <ChevronUp className="w-4 h-4 text-gray-500" />
-                      ) : (
-                        <ChevronDown className="w-4 h-4 text-gray-500" />
-                      )}
-                    </div>
-
-                    {expandedEvidenceTaskId === task.id && (
-                      <div className="bg-white border-t border-gray-200 p-3 space-y-2.5">
-                        {task.evidences.edges.map((edge) => {
-                          if (!edge) return null;
-                          const evidence = edge.node;
-                          if (!evidence) return null;
-
-                          return (
-                            <div
-                              key={evidence.id}
-                              className="flex items-center justify-between p-3 rounded-md border border-gray-200 hover:border-blue-300 hover:shadow-sm transition-all bg-gray-50"
-                            >
-                              <div className="flex items-center gap-3">
-                                <div className="bg-white p-2 rounded-md border border-gray-200">
-                                  {getFileIcon(
-                                    evidence.mimeType,
-                                    evidence.type
-                                  )}
-                                </div>
-                                <div>
-                                  <div className="text-sm font-medium text-gray-800">
-                                    {evidence.filename}
-                                  </div>
-                                  <div className="text-xs text-gray-500 flex items-center gap-2 mt-0.5">
-                                    {evidence.type === "FILE" ? (
-                                      <>
-                                        <span className="font-medium text-gray-600">
-                                          {formatFileSize(evidence.size)}
-                                        </span>
-                                        <span>•</span>
-                                      </>
-                                    ) : evidence.url ? (
-                                      <>
-                                        <span className="font-medium text-blue-600 truncate max-w-[200px]">
-                                          {evidence.url}
-                                        </span>
-                                        <span>•</span>
-                                      </>
-                                    ) : null}
-                                    <span>
-                                      {formatDate(evidence.createdAt)}
-                                    </span>
-                                  </div>
-                                </div>
-                              </div>
-                              <div className="flex items-center gap-1">
-                                {evidence.type === "FILE" ? (
-                                  <>
-                                    {evidence.mimeType.startsWith("image/") ? (
-                                      <button
-                                        onClick={() =>
-                                          handlePreviewEvidence(evidence)
-                                        }
-                                        className="p-1.5 rounded-full hover:bg-white hover:shadow-sm transition-all"
-                                        title="Preview Image"
-                                      >
-                                        <Eye className="w-4 h-4 text-blue-600" />
-                                      </button>
-                                    ) : (
-                                      <button
-                                        onClick={(e) => {
-                                          e.preventDefault();
-                                          handlePreviewEvidence(evidence);
-                                        }}
-                                        className="p-1.5 rounded-full hover:bg-white hover:shadow-sm transition-all"
-                                        title="Download"
-                                      >
-                                        <Download className="w-4 h-4 text-blue-600" />
-                                      </button>
-                                    )}
-                                  </>
-                                ) : evidence.url ? (
-                                  <button
-                                    onClick={(e) => {
-                                      e.preventDefault();
-                                      if (evidence.url) {
-                                        window.open(evidence.url, "_blank");
-                                      }
-                                    }}
-                                    className="p-1.5 rounded-full hover:bg-white hover:shadow-sm transition-all"
-                                    title="Open Link"
-                                  >
-                                    <Link2 className="w-4 h-4 text-blue-600" />
-                                  </button>
-                                ) : null}
-                                <button
-                                  onClick={(e) => {
-                                    e.preventDefault();
-                                    if (task?.id) {
-                                      handleDeleteEvidence(
-                                        evidence.id,
-                                        evidence.filename,
-                                        task.id
-                                      );
-                                    }
-                                  }}
-                                  className="p-1.5 rounded-full hover:bg-red-50 hover:shadow-sm transition-all"
-                                  title="Delete"
-                                >
-                                  <Trash2 className="w-4 h-4 text-red-500" />
-                                </button>
-                              </div>
-                            </div>
-                          );
-                        })}
-                      </div>
-                    )}
-                  </>
-                )}
-              </div>
-            ))}
-
-            {tasks.length === 0 && (
-              <div className="text-center py-8 text-gray-500">
-                <p>No tasks yet. Click &quot;Add Task&quot; to create one.</p>
-              </div>
-            )}
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="NOT_STARTED">Not Started</SelectItem>
+              <SelectItem value="IN_PROGRESS">In Progress</SelectItem>
+              <SelectItem value="IMPLEMENTED">Implemented</SelectItem>
+              <SelectItem value="NOT_APPLICABLE">Not Applicable</SelectItem>
+            </SelectContent>
+          </Select>
+          <div
+            className={`${getImportanceColor(
+              data.control.importance
+            )} px-3 py-1 rounded-full text-sm`}
+          >
+            {formatImportance(data.control.importance)}
           </div>
         </div>
+      }
+    >
+      <div className="space-y-4 mb-8">
+        <Card className="mt-4">
+          <CardContent className="pt-6">
+            <div className="prose prose-gray prose-sm md:prose-base text-gray-600 max-w-3xl">
+              <ReactMarkdown>{data.control.description}</ReactMarkdown>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
 
-        {/* Evidence Add Dialog */}
-        <Dialog open={evidenceDialogOpen} onOpenChange={setEvidenceDialogOpen}>
-          <DialogContent className="sm:max-w-[525px]">
-            <DialogHeader>
-              <DialogTitle>Add Evidence</DialogTitle>
-              <DialogDescription>
-                Choose the type of evidence you want to add to this task.
-              </DialogDescription>
-            </DialogHeader>
-
-            <Tabs
-              value={activeTab}
-              onValueChange={(value: string) =>
-                setActiveTab(value as "file" | "link")
-              }
-            >
-              <TabsList className="grid w-full grid-cols-2">
-                <TabsTrigger value="file">Document</TabsTrigger>
-                <TabsTrigger value="link">Link</TabsTrigger>
-              </TabsList>
-
-              <TabsContent value="file" className="space-y-4">
-                <div className="space-y-4 pt-4">
-                  <p>Select a document to add as evidence.</p>
-                  <Button
-                    onClick={() => {
-                      if (hiddenFileInputRef.current) {
-                        hiddenFileInputRef.current.click();
-                        setEvidenceDialogOpen(false);
-                      }
-                    }}
-                    className="w-full"
-                  >
-                    Select Document
-                  </Button>
-                </div>
-              </TabsContent>
-
-              <TabsContent value="link" className="space-y-4 pt-4">
-                <div className="space-y-4">
-                  <div className="grid w-full items-center gap-1.5">
-                    <Label htmlFor="evidence-name">Name</Label>
+      <div>
+        <div className="flex items-center justify-between mb-6">
+          <h2 className="text-xl font-semibold">Tasks</h2>
+          <div className="flex items-center gap-3">
+            <div className="text-sm text-gray-500 flex items-center bg-gray-50 px-3 py-1.5 rounded-md border border-gray-200">
+              <FileIcon className="w-4 h-4 mr-2 text-blue-500" />
+              <span>Drag & drop files onto tasks to add evidence</span>
+            </div>
+            <Dialog open={isCreateTaskOpen} onOpenChange={setIsCreateTaskOpen}>
+              <DialogTrigger asChild>
+                <Button size="sm" className="flex items-center gap-1">
+                  <Plus className="w-4 h-4" />
+                  <span>Add Task</span>
+                </Button>
+              </DialogTrigger>
+              <DialogContent>
+                <DialogHeader>
+                  <DialogTitle>Create New Task</DialogTitle>
+                  <DialogDescription>
+                    Add a new task to this control. Click save when you&apos;re
+                    done.
+                  </DialogDescription>
+                </DialogHeader>
+                <div className="space-y-4 py-4">
+                  <div className="space-y-2">
+                    <label htmlFor="name" className="text-sm font-medium">
+                      Task Name
+                    </label>
                     <Input
-                      id="evidence-name"
-                      value={linkEvidenceName}
-                      onChange={(e) => setLinkEvidenceName(e.target.value)}
-                      placeholder="Name for this evidence"
+                      id="name"
+                      value={newTaskName}
+                      onChange={(e) => setNewTaskName(e.target.value)}
+                      placeholder="Enter task name"
                     />
                   </div>
-
-                  <div className="grid w-full items-center gap-1.5">
-                    <Label htmlFor="evidence-url">URL</Label>
-                    <Input
-                      id="evidence-url"
-                      value={linkEvidenceUrl}
-                      onChange={(e) => setLinkEvidenceUrl(e.target.value)}
-                      placeholder="https://example.com"
-                      type="url"
-                    />
-                  </div>
-
-                  <div className="grid w-full items-center gap-1.5">
-                    <Label htmlFor="evidence-description">
+                  <div className="space-y-2">
+                    <label
+                      htmlFor="description"
+                      className="text-sm font-medium"
+                    >
                       Description (optional)
-                    </Label>
+                    </label>
                     <Textarea
-                      id="evidence-description"
-                      value={linkEvidenceDescription}
-                      onChange={(e) =>
-                        setLinkEvidenceDescription(e.target.value)
-                      }
-                      placeholder="Describe this evidence (optional)"
-                      className="min-h-[100px]"
+                      id="description"
+                      value={newTaskDescription}
+                      onChange={(e) => setNewTaskDescription(e.target.value)}
+                      placeholder="Enter task description"
                     />
                   </div>
-                </div>
-              </TabsContent>
-            </Tabs>
-
-            <DialogFooter>
-              <Button
-                variant="outline"
-                onClick={() => setEvidenceDialogOpen(false)}
-              >
-                Cancel
-              </Button>
-              {activeTab === "link" && (
-                <Button onClick={handleLinkEvidenceSubmit}>Add Link</Button>
-              )}
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
-
-        {/* Hidden file input for direct uploads */}
-        <input
-          type="file"
-          ref={hiddenFileInputRef}
-          onChange={handleFileSelected}
-          style={{ display: "none" }}
-          accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.txt"
-        />
-
-        {/* Delete Task Confirmation Dialog */}
-        <Dialog open={isDeleteTaskOpen} onOpenChange={setIsDeleteTaskOpen}>
-          <DialogContent>
-            <DialogHeader>
-              <DialogTitle>Delete Task</DialogTitle>
-              <DialogDescription>
-                Are you sure you want to delete the task &quot;
-                {taskToDelete?.name}&quot;? This action cannot be undone.
-              </DialogDescription>
-            </DialogHeader>
-            <DialogFooter>
-              <Button
-                variant="outline"
-                onClick={() => setIsDeleteTaskOpen(false)}
-              >
-                Cancel
-              </Button>
-              <Button variant="destructive" onClick={confirmDeleteTask}>
-                Delete
-              </Button>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
-
-        {/* Add the Preview Modal */}
-        <Dialog open={isPreviewModalOpen} onOpenChange={setIsPreviewModalOpen}>
-          <DialogContent className="sm:max-w-4xl">
-            <DialogHeader>
-              <DialogTitle className="flex items-center justify-between">
-                <span>{previewEvidence?.filename}</span>
-                <button
-                  onClick={() => setIsPreviewModalOpen(false)}
-                  className="rounded-full p-1 hover:bg-gray-100"
-                >
-                  <X className="w-5 h-5" />
-                </button>
-              </DialogTitle>
-              <DialogDescription>
-                Preview of the evidence file. You can view or download the file
-                from here.
-              </DialogDescription>
-            </DialogHeader>
-            <div className="flex flex-col items-center justify-center min-h-[300px] bg-gray-50 rounded-md p-4">
-              {isLoadingFileUrl ? (
-                <div className="flex flex-col items-center gap-2">
-                  <Loader2 className="w-8 h-8 animate-spin text-blue-500" />
-                  <p className="text-gray-500">Loading preview...</p>
-                </div>
-              ) : previewEvidence?.fileUrl ? (
-                previewEvidence.mimeType.startsWith("image/") ? (
-                  <img
-                    src={previewEvidence.fileUrl}
-                    alt={previewEvidence.filename}
-                    className="max-h-[70vh] object-contain"
-                  />
-                ) : previewEvidence.mimeType.includes("pdf") ? (
-                  <iframe
-                    src={previewEvidence.fileUrl}
-                    className="w-full h-[70vh]"
-                    title={previewEvidence.filename}
-                  />
-                ) : (
-                  <div className="flex flex-col items-center gap-4">
-                    <FileGeneric className="w-16 h-16 text-gray-400" />
-                    <p className="text-gray-600">
-                      Preview not available for this file type
-                    </p>
-                    <Button
-                      onClick={() => {
-                        if (previewEvidence?.fileUrl) {
-                          window.open(previewEvidence.fileUrl, "_blank");
-                        }
-                      }}
+                  <div className="space-y-2">
+                    <label
+                      htmlFor="timeEstimate"
+                      className="text-sm font-medium"
                     >
-                      Download File
-                    </Button>
+                      Time Estimate (optional)
+                    </label>
+                    <div className="grid grid-cols-3 gap-4">
+                      <div>
+                        <label
+                          htmlFor="days"
+                          className="text-xs text-gray-500 block mb-1"
+                        >
+                          Days
+                        </label>
+                        <Input
+                          id="days"
+                          type="number"
+                          min="0"
+                          value={timeEstimateDays}
+                          onChange={(e) => setTimeEstimateDays(e.target.value)}
+                          placeholder="0"
+                        />
+                      </div>
+                      <div>
+                        <label
+                          htmlFor="hours"
+                          className="text-xs text-gray-500 block mb-1"
+                        >
+                          Hours
+                        </label>
+                        <Input
+                          id="hours"
+                          type="number"
+                          min="0"
+                          max="23"
+                          value={timeEstimateHours}
+                          onChange={(e) => setTimeEstimateHours(e.target.value)}
+                          placeholder="0"
+                        />
+                      </div>
+                      <div>
+                        <label
+                          htmlFor="minutes"
+                          className="text-xs text-gray-500 block mb-1"
+                        >
+                          Minutes
+                        </label>
+                        <Input
+                          id="minutes"
+                          type="number"
+                          min="0"
+                          max="59"
+                          value={timeEstimateMinutes}
+                          onChange={(e) =>
+                            setTimeEstimateMinutes(e.target.value)
+                          }
+                          placeholder="0"
+                        />
+                      </div>
+                    </div>
                   </div>
-                )
-              ) : (
-                <div className="flex flex-col items-center gap-2">
-                  <FileGeneric className="w-12 h-12 text-gray-400" />
-                  <p className="text-gray-500">Failed to load preview</p>
                 </div>
-              )}
-            </div>
-            <DialogFooter>
-              <Button
-                variant="outline"
-                onClick={() => setIsPreviewModalOpen(false)}
+                <DialogFooter>
+                  <Button
+                    variant="outline"
+                    onClick={() => setIsCreateTaskOpen(false)}
+                  >
+                    Cancel
+                  </Button>
+                  <Button onClick={handleCreateTask}>Create Task</Button>
+                </DialogFooter>
+              </DialogContent>
+            </Dialog>
+          </div>
+        </div>
+        <div className={`space-y-2 ${isDraggingFile ? "space-y-4" : ""}`}>
+          {tasks.map((task) => (
+            <div
+              key={task?.id}
+              className="rounded-md overflow-hidden border border-gray-200"
+            >
+              <div
+                className={`flex items-center gap-3 py-4 px-2 hover:bg-gray-50 group relative transition-all duration-200 ${
+                  isDraggingFile && draggedOverTaskId !== task?.id
+                    ? "border-dashed border-blue-300 bg-blue-50 bg-opacity-30"
+                    : ""
+                } ${
+                  draggedOverTaskId === task?.id
+                    ? "bg-blue-50 border-2 border-blue-400 shadow-md"
+                    : ""
+                }`}
+                onDragOver={(e) => task?.id && handleDragOver(e, task.id)}
+                onDragLeave={handleDragLeave}
+                onDrop={(e) => task?.id && handleDrop(e, task.id)}
               >
-                Close
-              </Button>
-              {previewEvidence?.fileUrl && (
-                <Button
-                  onClick={() => {
-                    if (previewEvidence?.fileUrl) {
-                      window.open(previewEvidence.fileUrl, "_blank");
+                {isDraggingFile && draggedOverTaskId !== task?.id && (
+                  <div className="absolute inset-0 flex items-center justify-center rounded-md z-10">
+                    <div className="flex items-center gap-2 text-blue-600 bg-white px-3 py-1.5 rounded-lg shadow-xs">
+                      <FileIcon className="w-4 h-4" />
+                      <p className="text-sm font-medium">Drop file here</p>
+                    </div>
+                  </div>
+                )}
+
+                {draggedOverTaskId === task?.id && (
+                  <div className="absolute inset-0 flex items-center justify-center rounded-md z-10 bg-blue-50 bg-opacity-90 backdrop-blur-sm border-2 border-dashed border-blue-400">
+                    <div className="flex items-center gap-2 text-blue-600 bg-white p-5 rounded-lg shadow-md">
+                      <FileText className="w-4 h-4 text-blue-500" />
+                      <p className="text-sm font-medium text-center">
+                        Drop file to add as evidence
+                      </p>
+                    </div>
+                  </div>
+                )}
+
+                {uploadingTaskId === task?.id && (
+                  <div className="absolute inset-0 flex items-center justify-center bg-white bg-opacity-95 rounded-md z-10 backdrop-blur-sm">
+                    <div className="flex flex-col items-center gap-3 text-blue-600">
+                      <Loader2 className="w-10 h-10 animate-spin text-blue-500" />
+                      <p className="font-medium">Adding document...</p>
+                      <p className="text-sm text-gray-500">Please wait</p>
+                    </div>
+                  </div>
+                )}
+
+                <div
+                  className={`w-5 h-5 rounded border flex items-center justify-center cursor-pointer ${
+                    task?.state === "DONE"
+                      ? "border-gray-400 bg-gray-100"
+                      : "border-gray-300"
+                  } ${isDraggingFile ? "opacity-50" : ""}`}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    if (task?.id && task?.state) {
+                      handleTaskClick(task.id, task.state, task.version);
                     }
                   }}
                 >
-                  Download
-                </Button>
-              )}
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
+                  {task?.state === "DONE" && (
+                    <CheckCircle2 className="w-4 h-4 text-gray-500" />
+                  )}
+                </div>
+                <div
+                  className={`flex-1 flex items-center justify-between ${
+                    isDraggingFile ? "opacity-50" : ""
+                  }`}
+                >
+                  <div>
+                    <h3
+                      className={`text-sm ${
+                        task?.state === "DONE"
+                          ? "text-gray-500 line-through"
+                          : "text-gray-900"
+                      }`}
+                    >
+                      {task?.name}
+                    </h3>
+                    {task?.timeEstimate && (
+                      <p
+                        className={`text-xs mt-1 flex items-center ${
+                          task?.state === "DONE"
+                            ? "text-gray-400 line-through"
+                            : "text-blue-500"
+                        }`}
+                      >
+                        <span className="inline-block w-4 h-4 mr-1">⏱️</span>
+                        <span>{formatDuration(task.timeEstimate)}</span>
+                      </p>
+                    )}
+                    {task?.assignedTo && (
+                      <p className="text-xs mt-1 flex items-center text-gray-600">
+                        <User className="w-3 h-3 mr-1" />
+                        <span>{task.assignedTo.fullName}</span>
+                      </p>
+                    )}
+                  </div>
+                  <div className="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                    {/* People Selector */}
+                    <Popover
+                      open={peoplePopoverOpen[task?.id || ""]}
+                      onOpenChange={(open: boolean) => {
+                        if (task?.id) {
+                          setPeoplePopoverOpen((prev) => ({
+                            ...prev,
+                            [task.id]: open,
+                          }));
+                        }
+                      }}
+                    >
+                      <PopoverTrigger asChild>
+                        <button
+                          type="button"
+                          className="text-gray-400 hover:text-blue-600"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            if (task?.id) {
+                              setPeoplePopoverOpen((prev) => ({
+                                ...prev,
+                                [task.id]: !prev[task.id],
+                              }));
+                            }
+                          }}
+                        >
+                          {task?.assignedTo ? (
+                            <UserMinus className="w-4 h-4" />
+                          ) : (
+                            <UserPlus className="w-4 h-4" />
+                          )}
+                        </button>
+                      </PopoverTrigger>
+                      <PopoverContent className="w-[250px] p-0" align="end">
+                        {task?.assignedTo ? (
+                          <div className="p-4 space-y-4">
+                            <div className="flex items-center gap-2">
+                              <User className="w-4 h-4 text-gray-500" />
+                              <div className="text-sm">
+                                <p className="font-medium">
+                                  {task.assignedTo.fullName}
+                                </p>
+                                <p className="text-xs text-gray-500">
+                                  {task.assignedTo.primaryEmailAddress}
+                                </p>
+                              </div>
+                            </div>
+                            <Button
+                              type="button"
+                              variant="destructive"
+                              size="sm"
+                              className="w-full"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                if (task?.id) {
+                                  handleUnassignPerson(task.id);
+                                }
+                              }}
+                            >
+                              <UserMinus className="w-4 h-4 mr-2" />
+                              Unassign
+                            </Button>
+                          </div>
+                        ) : (
+                          <div className="max-h-[300px] overflow-y-auto">
+                            <div className="p-2 border-b">
+                              <input
+                                type="text"
+                                placeholder="Search people to assign..."
+                                className="w-full px-3 py-2 text-sm border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
+                                value={peopleSearch[task?.id || ""] || ""}
+                                onChange={(e) => {
+                                  if (task?.id) {
+                                    setPeopleSearch((prev) => ({
+                                      ...prev,
+                                      [task.id]: e.target.value,
+                                    }));
+                                  }
+                                }}
+                              />
+                            </div>
+                            <div className="px-3 py-2 text-xs text-gray-500">
+                              Click on a person to assign them to this task
+                            </div>
+                            <div className="py-1">
+                              {!organizationData?.organization?.peoples?.edges?.some(
+                                (edge) => {
+                                  if (!edge?.node) return false;
+                                  const searchTerm = (
+                                    peopleSearch[task?.id || ""] || ""
+                                  ).toLowerCase();
+                                  return (
+                                    !searchTerm ||
+                                    edge.node.fullName
+                                      .toLowerCase()
+                                      .includes(searchTerm) ||
+                                    edge.node.primaryEmailAddress
+                                      .toLowerCase()
+                                      .includes(searchTerm)
+                                  );
+                                }
+                              ) && (
+                                <div className="py-6 text-center text-sm">
+                                  No people found.
+                                </div>
+                              )}
+                              {organizationData?.organization?.peoples?.edges?.map(
+                                (edge) => {
+                                  if (!edge?.node) return null;
 
-        {/* Add Delete Evidence Confirmation Dialog */}
-        <Dialog
-          open={isDeleteEvidenceOpen}
-          onOpenChange={setIsDeleteEvidenceOpen}
-        >
-          <DialogContent>
-            <DialogHeader>
-              <DialogTitle>Delete Evidence</DialogTitle>
-              <DialogDescription>
-                Are you sure you want to delete the evidence &quot;
-                {evidenceToDelete?.filename}&quot;? This action cannot be
-                undone.
-              </DialogDescription>
-            </DialogHeader>
-            <DialogFooter>
-              <Button
-                variant="outline"
-                onClick={() => setIsDeleteEvidenceOpen(false)}
-              >
-                Cancel
-              </Button>
-              <Button variant="destructive" onClick={confirmDeleteEvidence}>
-                Delete
-              </Button>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
+                                  const searchTerm = (
+                                    peopleSearch[task?.id || ""] || ""
+                                  ).toLowerCase();
+                                  if (
+                                    searchTerm &&
+                                    !edge.node.fullName
+                                      .toLowerCase()
+                                      .includes(searchTerm) &&
+                                    !edge.node.primaryEmailAddress
+                                      .toLowerCase()
+                                      .includes(searchTerm)
+                                  ) {
+                                    return null;
+                                  }
+
+                                  return (
+                                    <div
+                                      key={edge.node.id}
+                                      className="px-2 py-1 hover:bg-blue-50 cursor-pointer"
+                                    >
+                                      <button
+                                        type="button"
+                                        className="flex items-center w-full text-left"
+                                        onClick={() => {
+                                          if (task?.id) {
+                                            handleAssignPerson(
+                                              task.id,
+                                              edge.node.id
+                                            );
+                                            setPeoplePopoverOpen((prev) => ({
+                                              ...prev,
+                                              [task.id]: false,
+                                            }));
+                                          }
+                                        }}
+                                      >
+                                        <User className="mr-2 h-4 w-4 text-blue-500 flex-shrink-0" />
+                                        <div>
+                                          <p className="font-medium">
+                                            {edge.node.fullName}
+                                          </p>
+                                          <p className="text-xs text-gray-500">
+                                            {edge.node.primaryEmailAddress}
+                                          </p>
+                                        </div>
+                                      </button>
+                                    </div>
+                                  );
+                                }
+                              )}
+                            </div>
+                          </div>
+                        )}
+                      </PopoverContent>
+                    </Popover>
+
+                    <button
+                      type="button"
+                      className="text-gray-400 hover:text-blue-600"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        if (task?.id && task?.name) {
+                          handleUploadEvidence(task.id, task.name);
+                        }
+                      }}
+                      title="Add Evidence"
+                    >
+                      <FileText className="w-4 h-4" />
+                    </button>
+                    <button
+                      type="button"
+                      className="text-gray-400 hover:text-red-600"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        if (task?.id && task?.name) {
+                          handleDeleteTask(task.id, task.name);
+                        }
+                      }}
+                    >
+                      <Trash2 className="w-4 h-4" />
+                    </button>
+                  </div>
+                </div>
+              </div>
+
+              {/* Evidence section */}
+              {task?.evidences?.edges && task.evidences.edges.length > 0 && (
+                <>
+                  <div
+                    className="bg-gray-50 border-t border-gray-200 px-4 py-2.5 flex justify-between items-center cursor-pointer hover:bg-gray-100 transition-colors"
+                    onClick={() => task.id && toggleEvidenceList(task.id)}
+                  >
+                    <div className="flex items-center gap-2">
+                      <FileIcon className="w-4 h-4 text-blue-500" />
+                      <span className="text-sm font-medium text-gray-700">
+                        {task.evidences.edges.length}{" "}
+                        {task.evidences.edges.length === 1
+                          ? "Evidence"
+                          : "Evidences"}
+                      </span>
+                    </div>
+                    {expandedEvidenceTaskId === task.id ? (
+                      <ChevronUp className="w-4 h-4 text-gray-500" />
+                    ) : (
+                      <ChevronDown className="w-4 h-4 text-gray-500" />
+                    )}
+                  </div>
+
+                  {expandedEvidenceTaskId === task.id && (
+                    <div className="bg-white border-t border-gray-200 p-3 space-y-2.5">
+                      {task.evidences.edges.map((edge) => {
+                        if (!edge) return null;
+                        const evidence = edge.node;
+                        if (!evidence) return null;
+
+                        return (
+                          <div
+                            key={evidence.id}
+                            className="flex items-center justify-between p-3 rounded-md border border-gray-200 hover:border-blue-300 hover:shadow-sm transition-all bg-gray-50"
+                          >
+                            <div className="flex items-center gap-3">
+                              <div className="bg-white p-2 rounded-md border border-gray-200">
+                                {getFileIcon(evidence.mimeType, evidence.type)}
+                              </div>
+                              <div>
+                                <div className="text-sm font-medium text-gray-800">
+                                  {evidence.filename}
+                                </div>
+                                <div className="text-xs text-gray-500 flex items-center gap-2 mt-0.5">
+                                  {evidence.type === "FILE" ? (
+                                    <>
+                                      <span className="font-medium text-gray-600">
+                                        {formatFileSize(evidence.size)}
+                                      </span>
+                                      <span>•</span>
+                                    </>
+                                  ) : evidence.url ? (
+                                    <>
+                                      <span className="font-medium text-blue-600 truncate max-w-[200px]">
+                                        {evidence.url}
+                                      </span>
+                                      <span>•</span>
+                                    </>
+                                  ) : null}
+                                  <span>{formatDate(evidence.createdAt)}</span>
+                                </div>
+                              </div>
+                            </div>
+                            <div className="flex items-center gap-1">
+                              {evidence.type === "FILE" ? (
+                                <>
+                                  {evidence.mimeType.startsWith("image/") ? (
+                                    <button
+                                      onClick={() =>
+                                        handlePreviewEvidence(evidence)
+                                      }
+                                      className="p-1.5 rounded-full hover:bg-white hover:shadow-sm transition-all"
+                                      title="Preview Image"
+                                    >
+                                      <Eye className="w-4 h-4 text-blue-600" />
+                                    </button>
+                                  ) : (
+                                    <button
+                                      onClick={(e) => {
+                                        e.preventDefault();
+                                        handlePreviewEvidence(evidence);
+                                      }}
+                                      className="p-1.5 rounded-full hover:bg-white hover:shadow-sm transition-all"
+                                      title="Download"
+                                    >
+                                      <Download className="w-4 h-4 text-blue-600" />
+                                    </button>
+                                  )}
+                                </>
+                              ) : evidence.url ? (
+                                <button
+                                  onClick={(e) => {
+                                    e.preventDefault();
+                                    if (evidence.url) {
+                                      window.open(evidence.url, "_blank");
+                                    }
+                                  }}
+                                  className="p-1.5 rounded-full hover:bg-white hover:shadow-sm transition-all"
+                                  title="Open Link"
+                                >
+                                  <Link2 className="w-4 h-4 text-blue-600" />
+                                </button>
+                              ) : null}
+                              <button
+                                onClick={(e) => {
+                                  e.preventDefault();
+                                  if (task?.id) {
+                                    handleDeleteEvidence(
+                                      evidence.id,
+                                      evidence.filename,
+                                      task.id
+                                    );
+                                  }
+                                }}
+                                className="p-1.5 rounded-full hover:bg-red-50 hover:shadow-sm transition-all"
+                                title="Delete"
+                              >
+                                <Trash2 className="w-4 h-4 text-red-500" />
+                              </button>
+                            </div>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  )}
+                </>
+              )}
+            </div>
+          ))}
+
+          {tasks.length === 0 && (
+            <div className="text-center py-8 text-gray-500">
+              <p>No tasks yet. Click &quot;Add Task&quot; to create one.</p>
+            </div>
+          )}
+        </div>
       </div>
-    </>
+
+      {/* Evidence Add Dialog */}
+      <Dialog open={evidenceDialogOpen} onOpenChange={setEvidenceDialogOpen}>
+        <DialogContent className="sm:max-w-[525px]">
+          <DialogHeader>
+            <DialogTitle>Add Evidence</DialogTitle>
+            <DialogDescription>
+              Choose the type of evidence you want to add to this task.
+            </DialogDescription>
+          </DialogHeader>
+
+          <Tabs
+            value={activeTab}
+            onValueChange={(value: string) =>
+              setActiveTab(value as "file" | "link")
+            }
+          >
+            <TabsList className="grid w-full grid-cols-2">
+              <TabsTrigger value="file">Document</TabsTrigger>
+              <TabsTrigger value="link">Link</TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="file" className="space-y-4">
+              <div className="space-y-4 pt-4">
+                <p>Select a document to add as evidence.</p>
+                <Button
+                  onClick={() => {
+                    if (hiddenFileInputRef.current) {
+                      hiddenFileInputRef.current.click();
+                      setEvidenceDialogOpen(false);
+                    }
+                  }}
+                  className="w-full"
+                >
+                  Select Document
+                </Button>
+              </div>
+            </TabsContent>
+
+            <TabsContent value="link" className="space-y-4 pt-4">
+              <div className="space-y-4">
+                <div className="grid w-full items-center gap-1.5">
+                  <Label htmlFor="evidence-name">Name</Label>
+                  <Input
+                    id="evidence-name"
+                    value={linkEvidenceName}
+                    onChange={(e) => setLinkEvidenceName(e.target.value)}
+                    placeholder="Name for this evidence"
+                  />
+                </div>
+
+                <div className="grid w-full items-center gap-1.5">
+                  <Label htmlFor="evidence-url">URL</Label>
+                  <Input
+                    id="evidence-url"
+                    value={linkEvidenceUrl}
+                    onChange={(e) => setLinkEvidenceUrl(e.target.value)}
+                    placeholder="https://example.com"
+                    type="url"
+                  />
+                </div>
+
+                <div className="grid w-full items-center gap-1.5">
+                  <Label htmlFor="evidence-description">
+                    Description (optional)
+                  </Label>
+                  <Textarea
+                    id="evidence-description"
+                    value={linkEvidenceDescription}
+                    onChange={(e) => setLinkEvidenceDescription(e.target.value)}
+                    placeholder="Describe this evidence (optional)"
+                    className="min-h-[100px]"
+                  />
+                </div>
+              </div>
+            </TabsContent>
+          </Tabs>
+
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setEvidenceDialogOpen(false)}
+            >
+              Cancel
+            </Button>
+            {activeTab === "link" && (
+              <Button onClick={handleLinkEvidenceSubmit}>Add Link</Button>
+            )}
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Hidden file input for direct uploads */}
+      <input
+        type="file"
+        ref={hiddenFileInputRef}
+        onChange={handleFileSelected}
+        style={{ display: "none" }}
+        accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.txt"
+      />
+
+      {/* Delete Task Confirmation Dialog */}
+      <Dialog open={isDeleteTaskOpen} onOpenChange={setIsDeleteTaskOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Delete Task</DialogTitle>
+            <DialogDescription>
+              Are you sure you want to delete the task &quot;
+              {taskToDelete?.name}&quot;? This action cannot be undone.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setIsDeleteTaskOpen(false)}
+            >
+              Cancel
+            </Button>
+            <Button variant="destructive" onClick={confirmDeleteTask}>
+              Delete
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Add the Preview Modal */}
+      <Dialog open={isPreviewModalOpen} onOpenChange={setIsPreviewModalOpen}>
+        <DialogContent className="sm:max-w-4xl">
+          <DialogHeader>
+            <DialogTitle className="flex items-center justify-between">
+              <span>{previewEvidence?.filename}</span>
+              <button
+                onClick={() => setIsPreviewModalOpen(false)}
+                className="rounded-full p-1 hover:bg-gray-100"
+              >
+                <X className="w-5 h-5" />
+              </button>
+            </DialogTitle>
+            <DialogDescription>
+              Preview of the evidence file. You can view or download the file
+              from here.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex flex-col items-center justify-center min-h-[300px] bg-gray-50 rounded-md p-4">
+            {isLoadingFileUrl ? (
+              <div className="flex flex-col items-center gap-2">
+                <Loader2 className="w-8 h-8 animate-spin text-blue-500" />
+                <p className="text-gray-500">Loading preview...</p>
+              </div>
+            ) : previewEvidence?.fileUrl ? (
+              previewEvidence.mimeType.startsWith("image/") ? (
+                <img
+                  src={previewEvidence.fileUrl}
+                  alt={previewEvidence.filename}
+                  className="max-h-[70vh] object-contain"
+                />
+              ) : previewEvidence.mimeType.includes("pdf") ? (
+                <iframe
+                  src={previewEvidence.fileUrl}
+                  className="w-full h-[70vh]"
+                  title={previewEvidence.filename}
+                />
+              ) : (
+                <div className="flex flex-col items-center gap-4">
+                  <FileGeneric className="w-16 h-16 text-gray-400" />
+                  <p className="text-gray-600">
+                    Preview not available for this file type
+                  </p>
+                  <Button
+                    onClick={() => {
+                      if (previewEvidence?.fileUrl) {
+                        window.open(previewEvidence.fileUrl, "_blank");
+                      }
+                    }}
+                  >
+                    Download File
+                  </Button>
+                </div>
+              )
+            ) : (
+              <div className="flex flex-col items-center gap-2">
+                <FileGeneric className="w-12 h-12 text-gray-400" />
+                <p className="text-gray-500">Failed to load preview</p>
+              </div>
+            )}
+          </div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setIsPreviewModalOpen(false)}
+            >
+              Close
+            </Button>
+            {previewEvidence?.fileUrl && (
+              <Button
+                onClick={() => {
+                  if (previewEvidence?.fileUrl) {
+                    window.open(previewEvidence.fileUrl, "_blank");
+                  }
+                }}
+              >
+                Download
+              </Button>
+            )}
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Add Delete Evidence Confirmation Dialog */}
+      <Dialog
+        open={isDeleteEvidenceOpen}
+        onOpenChange={setIsDeleteEvidenceOpen}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Delete Evidence</DialogTitle>
+            <DialogDescription>
+              Are you sure you want to delete the evidence &quot;
+              {evidenceToDelete?.filename}&quot;? This action cannot be undone.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setIsDeleteEvidenceOpen(false)}
+            >
+              Cancel
+            </Button>
+            <Button variant="destructive" onClick={confirmDeleteEvidence}>
+              Delete
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </PageTemplate>
   );
 }
 
-function ControlOverviewPageFallback() {
+export function ControlOverviewPageSkeleton() {
   return (
-    <div className="min-h-screen bg-white p-6">
-      <div className="mb-8">
-        <div className="h-8 w-48 bg-gray-100 animate-pulse rounded" />
-        <div className="h-4 w-96 bg-gray-100 animate-pulse rounded mt-2" />
-      </div>
+    <PageTemplateSkeleton
+      actions={
+        <div className="flex items-center gap-2 w-1/3">
+          <div className="bg-muted animate-pulse h-8 w-1/3 rounded-lg" />
+          <div className="bg-muted animate-pulse h-8 w-1/3 rounded-lg" />
+          <div className="bg-muted animate-pulse h-8 w-1/3 rounded-full" />
+        </div>
+      }
+    >
       <div className="space-y-4">
         {[1, 2, 3].map((i) => (
           <Card key={i}>
             <CardContent className="p-6">
-              <div className="h-6 w-48 bg-gray-100 animate-pulse rounded mb-2" />
-              <div className="h-4 w-full bg-gray-100 animate-pulse rounded" />
+              <div className="h-6 w-48 bg-muted animate-pulse rounded mb-2" />
+              <div className="h-4 w-full bg-muted animate-pulse rounded" />
             </CardContent>
           </Card>
         ))}
       </div>
-    </div>
+    </PageTemplateSkeleton>
   );
 }
 
@@ -2028,11 +2009,11 @@ export default function ControlOverviewPage() {
   }, [controlId, loadQuery]);
 
   if (!queryRef) {
-    return <ControlOverviewPageFallback />;
+    return <ControlOverviewPageSkeleton />;
   }
 
   return (
-    <Suspense fallback={<ControlOverviewPageFallback />}>
+    <Suspense fallback={<ControlOverviewPageSkeleton />}>
       <ControlOverviewPageContent queryRef={queryRef} />
     </Suspense>
   );
diff --git a/apps/console/src/pages/CreateControlPage.tsx b/apps/console/src/pages/CreateControlPage.tsx
index ed4e95343..148e173d6 100644
--- a/apps/console/src/pages/CreateControlPage.tsx
+++ b/apps/console/src/pages/CreateControlPage.tsx
@@ -1,7 +1,6 @@
 import { Suspense, useState } from "react";
 import { useNavigate, useParams } from "react-router";
 import { graphql, useMutation, ConnectionHandler } from "react-relay";
-import { Helmet } from "react-helmet-async";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
@@ -21,7 +20,7 @@ import {
   CreateControlPageCreateControlMutation,
   ControlImportance,
 } from "./__generated__/CreateControlPageCreateControlMutation.graphql";
-import { PageHeader } from "@/components/PageHeader";
+import { PageTemplate, PageTemplateSkeleton } from "@/components/PageTemplate";
 
 const createControlMutation = graphql`
   mutation CreateControlPageCreateControlMutation(
@@ -182,90 +181,93 @@ function CreateControlPageContent() {
   };
 
   return (
-    <>
-      <Helmet>
-        <title>Create Control - Probo</title>
-      </Helmet>
-      <div className="container">
-        <PageHeader
-          className="mb-17"
-          title="Create Control"
-          description="Create a new control for your framework"
-        />
+    <PageTemplate
+      title="Create Control"
+      description="Create a new control for your framework"
+    >
+      <Card className="max-w-2xl">
+        <form onSubmit={handleSubmit} className="p-6 space-y-6">
+          <EditableField
+            label="Name"
+            value={formData.name}
+            onChange={(value) => handleFieldChange("name", value)}
+            required
+          />
 
-        <Card className="max-w-2xl">
-          <form onSubmit={handleSubmit} className="p-6 space-y-6">
-            <EditableField
-              label="Name"
-              value={formData.name}
-              onChange={(value) => handleFieldChange("name", value)}
-              required
-            />
+          <EditableField
+            label="Category"
+            value={formData.category}
+            onChange={(value) => handleFieldChange("category", value)}
+            required
+            helpText="The category this control belongs to"
+          />
 
-            <EditableField
-              label="Category"
-              value={formData.category}
-              onChange={(value) => handleFieldChange("category", value)}
-              required
-              helpText="The category this control belongs to"
-            />
+          <EditableField
+            label="Description"
+            value={formData.description}
+            onChange={(value) => handleFieldChange("description", value)}
+            required
+            multiline
+            helpText="Provide a detailed description of the control"
+          />
 
-            <EditableField
-              label="Description"
-              value={formData.description}
-              onChange={(value) => handleFieldChange("description", value)}
-              required
-              multiline
-              helpText="Provide a detailed description of the control"
-            />
+          <div className="space-y-2">
+            <Label htmlFor="importance" className="text-sm font-medium">
+              Importance
+            </Label>
+            <Select
+              value={formData.importance}
+              onValueChange={(value) =>
+                handleFieldChange("importance", value as ControlImportance)
+              }
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="Select importance" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="MANDATORY">Mandatory</SelectItem>
+                <SelectItem value="PREFERRED">Preferred</SelectItem>
+                <SelectItem value="ADVANCED">Advanced</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
 
-            <div className="space-y-2">
-              <Label htmlFor="importance" className="text-sm font-medium">
-                Importance
-              </Label>
-              <Select
-                value={formData.importance}
-                onValueChange={(value) =>
-                  handleFieldChange("importance", value as ControlImportance)
-                }
-              >
-                <SelectTrigger>
-                  <SelectValue placeholder="Select importance" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="MANDATORY">Mandatory</SelectItem>
-                  <SelectItem value="PREFERRED">Preferred</SelectItem>
-                  <SelectItem value="ADVANCED">Advanced</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
+          <div className="flex justify-end gap-3">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() =>
+                navigate(
+                  `/organizations/${organizationId}/frameworks/${frameworkId}`
+                )
+              }
+            >
+              Cancel
+            </Button>
+            <Button type="submit" disabled={isInFlight}>
+              {isInFlight ? "Creating..." : "Create Control"}
+            </Button>
+          </div>
+        </form>
+      </Card>
+    </PageTemplate>
+  );
+}
 
-            <div className="flex justify-end gap-3">
-              <Button
-                type="button"
-                variant="outline"
-                onClick={() =>
-                  navigate(
-                    `/organizations/${organizationId}/frameworks/${frameworkId}`
-                  )
-                }
-              >
-                Cancel
-              </Button>
-              <Button type="submit" disabled={isInFlight}>
-                {isInFlight ? "Creating..." : "Create Control"}
-              </Button>
-            </div>
-          </form>
-        </Card>
-      </div>
-    </>
+export function CreateControlPageSkeleton() {
+  return (
+    <PageTemplateSkeleton
+      title="Create Control"
+      description="Create a new control for your framework"
+    >
+      <div className="max-w-2xl aspect-square bg-muted rounded-xl animate-pulse" />
+    </PageTemplateSkeleton>
   );
 }
 
 export default function CreateControlPage() {
   return (
-    <Suspense fallback={<div>Loading...</div>}>
+    <Suspense fallback={<CreateControlPageSkeleton />}>
       <CreateControlPageContent />
     </Suspense>
   );
diff --git a/apps/console/src/pages/CreateFrameworkPage.tsx b/apps/console/src/pages/CreateFrameworkPage.tsx
index e3ea495df..a243c4d80 100644
--- a/apps/console/src/pages/CreateFrameworkPage.tsx
+++ b/apps/console/src/pages/CreateFrameworkPage.tsx
@@ -1,7 +1,6 @@
 import { Suspense, useState } from "react";
 import { useNavigate, useParams } from "react-router";
 import { graphql, useMutation, ConnectionHandler } from "react-relay";
-import { Helmet } from "react-helmet-async";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
@@ -11,6 +10,7 @@ import { useToast } from "@/hooks/use-toast";
 import { HelpCircle } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { CreateFrameworkPageCreateFrameworkMutation } from "./__generated__/CreateFrameworkPageCreateFrameworkMutation.graphql";
+import { PageTemplate, PageTemplateSkeleton } from "@/components/PageTemplate";
 
 const createFrameworkMutation = graphql`
   mutation CreateFrameworkPageCreateFrameworkMutation(
@@ -69,7 +69,7 @@ function EditableField({
           }
           className={cn(
             "w-full resize-none",
-            required && !value && "border-red-500",
+            required && !value && "border-red-500"
           )}
           placeholder={`Enter ${label.toLowerCase()}`}
           rows={4}
@@ -101,7 +101,7 @@ function CreateFrameworkPageContent() {
 
   const [commit, isInFlight] =
     useMutation<CreateFrameworkPageCreateFrameworkMutation>(
-      createFrameworkMutation,
+      createFrameworkMutation
     );
 
   const handleFieldChange = (field: keyof typeof formData, value: unknown) => {
@@ -125,7 +125,7 @@ function CreateFrameworkPageContent() {
 
     const connectionId = ConnectionHandler.getConnectionID(
       organizationId!,
-      "FrameworkListPage_frameworks",
+      "FrameworkListPage_frameworks"
     );
 
     commit({
@@ -153,7 +153,7 @@ function CreateFrameworkPageContent() {
         });
 
         navigate(
-          `/organizations/${organizationId}/frameworks/${data.createFramework.frameworkEdge.node.id}`,
+          `/organizations/${organizationId}/frameworks/${data.createFramework.frameworkEdge.node.id}`
         );
       },
       onError(error) {
@@ -167,60 +167,62 @@ function CreateFrameworkPageContent() {
   };
 
   return (
-    <>
-      <Helmet>
-        <title>Create Framework - Probo</title>
-      </Helmet>
-      <div className="container mx-auto py-6">
-        <div className="mb-6">
-          <h1 className="text-2xl font-bold">Create Framework</h1>
-          <p className="text-muted-foreground">
-            Create a new framework to organize your controls
-          </p>
-        </div>
+    <PageTemplate
+      title="Create Framework"
+      description="Create a new framework to organize your controls"
+    >
+      <Card className="max-w-2xl">
+        <form onSubmit={handleSubmit} className="p-6 space-y-6">
+          <EditableField
+            label="Name"
+            value={formData.name}
+            onChange={(value) => handleFieldChange("name", value)}
+            required
+          />
 
-        <Card className="max-w-2xl">
-          <form onSubmit={handleSubmit} className="p-6 space-y-6">
-            <EditableField
-              label="Name"
-              value={formData.name}
-              onChange={(value) => handleFieldChange("name", value)}
-              required
-            />
+          <EditableField
+            label="Description"
+            value={formData.description}
+            onChange={(value) => handleFieldChange("description", value)}
+            required
+            multiline
+            helpText="Provide a detailed description of the framework"
+          />
 
-            <EditableField
-              label="Description"
-              value={formData.description}
-              onChange={(value) => handleFieldChange("description", value)}
-              required
-              multiline
-              helpText="Provide a detailed description of the framework"
-            />
+          <div className="flex justify-end gap-3">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() =>
+                navigate(`/organizations/${organizationId}/frameworks`)
+              }
+            >
+              Cancel
+            </Button>
+            <Button type="submit" disabled={isInFlight}>
+              {isInFlight ? "Creating..." : "Create Framework"}
+            </Button>
+          </div>
+        </form>
+      </Card>
+    </PageTemplate>
+  );
+}
 
-            <div className="flex justify-end gap-3">
-              <Button
-                type="button"
-                variant="outline"
-                onClick={() =>
-                  navigate(`/organizations/${organizationId}/frameworks`)
-                }
-              >
-                Cancel
-              </Button>
-              <Button type="submit" disabled={isInFlight}>
-                {isInFlight ? "Creating..." : "Create Framework"}
-              </Button>
-            </div>
-          </form>
-        </Card>
-      </div>
-    </>
+export function CreateFrameworkPageSkeleton() {
+  return (
+    <PageTemplateSkeleton
+      title="Create Framework"
+      description="Create a new framework to organize your controls"
+    >
+      <div className="max-w-2xl aspect-square bg-muted rounded-xl animate-pulse" />
+    </PageTemplateSkeleton>
   );
 }
 
 export default function CreateFrameworkPage() {
   return (
-    <Suspense fallback={<div>Loading...</div>}>
+    <Suspense fallback={<CreateFrameworkPageSkeleton />}>
       <CreateFrameworkPageContent />
     </Suspense>
   );
diff --git a/apps/console/src/pages/CreateOrganizationPage.tsx b/apps/console/src/pages/CreateOrganizationPage.tsx
index 26bf0a2bc..8b8acefdf 100644
--- a/apps/console/src/pages/CreateOrganizationPage.tsx
+++ b/apps/console/src/pages/CreateOrganizationPage.tsx
@@ -6,7 +6,6 @@ import {
   useMutation,
   useLazyLoadQuery,
 } from "react-relay";
-import { Helmet } from "react-helmet-async";
 import { Button } from "@/components/ui/button";
 import {
   Card,
@@ -21,6 +20,7 @@ import { useToast } from "@/hooks/use-toast";
 import { HelpCircle } from "lucide-react";
 import { CreateOrganizationPageCreateOrganizationMutation } from "./__generated__/CreateOrganizationPageCreateOrganizationMutation.graphql";
 import { CreateOrganizationPageViewerQuery } from "./__generated__/CreateOrganizationPageViewerQuery.graphql";
+import { PageTemplate, PageTemplateSkeleton } from "@/components/PageTemplate";
 
 const createOrganizationMutation = graphql`
   mutation CreateOrganizationPageCreateOrganizationMutation(
@@ -81,16 +81,27 @@ function EditableField({
   );
 }
 
+export function CreateOrganizationPageSkeleton() {
+  return (
+    <PageTemplateSkeleton
+      title="Create Organization"
+      description="Create a new organization to manage your compliance and security needs."
+    >
+      <div className="max-w-2xl aspect-square bg-muted rounded-xl animate-pulse" />
+    </PageTemplateSkeleton>
+  );
+}
+
 export default function CreateOrganizationPage() {
   const navigate = useNavigate();
   const { toast } = useToast();
   const data = useLazyLoadQuery<CreateOrganizationPageViewerQuery>(
     viewerQuery,
-    {},
+    {}
   );
   const [createOrganization] =
     useMutation<CreateOrganizationPageCreateOrganizationMutation>(
-      createOrganizationMutation,
+      createOrganizationMutation
     );
   const [formData, setFormData] = useState({
     name: "",
@@ -114,7 +125,7 @@ export default function CreateOrganizationPage() {
         connections: [
           ConnectionHandler.getConnectionID(
             data.viewer.id,
-            "OrganizationSwitcher_organizations",
+            "OrganizationSwitcher_organizations"
           ),
         ],
       },
@@ -138,46 +149,33 @@ export default function CreateOrganizationPage() {
   };
 
   return (
-    <>
-      <Helmet>
-        <title>Create Organization - Probo</title>
-      </Helmet>
+    <PageTemplate
+      title="Create Organization"
+      description="Create a new organization to manage your compliance and security needs."
+    >
+      <form onSubmit={handleSubmit}>
+        <Card className="max-w-2xl">
+          <CardHeader>
+            <CardTitle>Organization Details</CardTitle>
+            <CardDescription>
+              Enter the basic information about your organization.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-6">
+            <EditableField
+              label="Organization Name"
+              value={formData.name}
+              onChange={(value) => handleFieldChange("name", value)}
+              helpText="The name of your organization as it will appear throughout the platform."
+              required
+            />
 
-      <div className="space-y-6">
-        <div>
-          <h1 className="text-2xl font-semibold tracking-tight">
-            Create Organization
-          </h1>
-          <p className="text-muted-foreground">
-            Create a new organization to manage your compliance and security
-            needs.
-          </p>
-        </div>
-
-        <form onSubmit={handleSubmit}>
-          <Card>
-            <CardHeader>
-              <CardTitle>Organization Details</CardTitle>
-              <CardDescription>
-                Enter the basic information about your organization.
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-6">
-              <EditableField
-                label="Organization Name"
-                value={formData.name}
-                onChange={(value) => handleFieldChange("name", value)}
-                helpText="The name of your organization as it will appear throughout the platform."
-                required
-              />
-
-              <Button type="submit" className="w-full">
-                Create Organization
-              </Button>
-            </CardContent>
-          </Card>
-        </form>
-      </div>
-    </>
+            <Button type="submit" className="w-full">
+              Create Organization
+            </Button>
+          </CardContent>
+        </Card>
+      </form>
+    </PageTemplate>
   );
 }
diff --git a/apps/console/src/pages/CreatePeoplePage.tsx b/apps/console/src/pages/CreatePeoplePage.tsx
index ea2569a99..afb9c065a 100644
--- a/apps/console/src/pages/CreatePeoplePage.tsx
+++ b/apps/console/src/pages/CreatePeoplePage.tsx
@@ -1,7 +1,6 @@
 import { Suspense, useState } from "react";
 import { useNavigate, useParams } from "react-router";
 import { graphql, useMutation, ConnectionHandler } from "react-relay";
-import { Helmet } from "react-helmet-async";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
@@ -10,7 +9,7 @@ import { useToast } from "@/hooks/use-toast";
 import { HelpCircle } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { CreatePeoplePageCreatePeopleMutation } from "./__generated__/CreatePeoplePageCreatePeopleMutation.graphql";
-import { PageHeader } from "@/components/PageHeader";
+import { PageTemplate, PageTemplateSkeleton } from "@/components/PageTemplate";
 
 const createPeopleMutation = graphql`
   mutation CreatePeoplePageCreatePeopleMutation(
@@ -150,177 +149,166 @@ function CreatePeoplePageContent() {
   };
 
   return (
-    <>
-      <Helmet>
-        <title>Create Person - Probo Console</title>
-      </Helmet>
-      <div className="container">
-        <PageHeader
-          className="mb-17"
-          title="Add a Person"
-          description="Add a new person interacting with organization"
-        />
+    <PageTemplate
+      title="Create Person"
+      description="Add a new person interacting with organization"
+    >
+      <form onSubmit={handleSubmit}>
+        <div className="max-w-2xl space-y-6">
+          <EditableField
+            label="Full Name"
+            value={formData.fullName}
+            onChange={(value) => handleFieldChange("fullName", value)}
+            required
+          />
 
-        <form onSubmit={handleSubmit}>
-          <div className="max-w-4xl space-y-6">
-            <EditableField
-              label="Full Name"
-              value={formData.fullName}
-              onChange={(value) => handleFieldChange("fullName", value)}
-              required
-            />
+          <EditableField
+            label="Primary Email"
+            value={formData.primaryEmailAddress}
+            type="email"
+            onChange={(value) =>
+              handleFieldChange("primaryEmailAddress", value)
+            }
+            required
+          />
 
-            <EditableField
-              label="Primary Email"
-              value={formData.primaryEmailAddress}
-              type="email"
-              onChange={(value) =>
-                handleFieldChange("primaryEmailAddress", value)
-              }
-              required
-            />
-
-            <div className="space-y-2">
-              <div className="flex items-center gap-2">
-                <HelpCircle className="h-4 w-4 text-gray-400" />
-                <Label className="text-sm">Additional Email Addresses</Label>
-              </div>
-              <div className="space-y-2">
-                {formData.additionalEmailAddresses.map((email, index) => (
-                  <div key={index} className="flex gap-2">
-                    <Input
-                      type="email"
-                      value={email}
-                      onChange={(e) => {
-                        const newEmails = [
-                          ...formData.additionalEmailAddresses,
-                        ];
-                        newEmails[index] = e.target.value;
-                        handleFieldChange(
-                          "additionalEmailAddresses",
-                          newEmails
-                        );
-                      }}
-                    />
-                    <Button
-                      type="button"
-                      variant="outline"
-                      onClick={() => {
-                        const newEmails =
-                          formData.additionalEmailAddresses.filter(
-                            (_, i) => i !== index
-                          );
-                        handleFieldChange(
-                          "additionalEmailAddresses",
-                          newEmails
-                        );
-                      }}
-                    >
-                      Remove
-                    </Button>
-                  </div>
-                ))}
-                <Button
-                  type="button"
-                  variant="outline"
-                  onClick={() => {
-                    handleFieldChange("additionalEmailAddresses", [
-                      ...formData.additionalEmailAddresses,
-                      "",
-                    ]);
-                  }}
-                >
-                  Add Email
-                </Button>
-              </div>
+          <div className="space-y-2">
+            <div className="flex items-center gap-2">
+              <HelpCircle className="h-4 w-4 text-gray-400" />
+              <Label className="text-sm">Additional Email Addresses</Label>
             </div>
+            <div className="space-y-2">
+              {formData.additionalEmailAddresses.map((email, index) => (
+                <div key={index} className="flex gap-2">
+                  <Input
+                    type="email"
+                    value={email}
+                    onChange={(e) => {
+                      const newEmails = [...formData.additionalEmailAddresses];
+                      newEmails[index] = e.target.value;
+                      handleFieldChange("additionalEmailAddresses", newEmails);
+                    }}
+                  />
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={() => {
+                      const newEmails =
+                        formData.additionalEmailAddresses.filter(
+                          (_, i) => i !== index
+                        );
+                      handleFieldChange("additionalEmailAddresses", newEmails);
+                    }}
+                  >
+                    Remove
+                  </Button>
+                </div>
+              ))}
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => {
+                  handleFieldChange("additionalEmailAddresses", [
+                    ...formData.additionalEmailAddresses,
+                    "",
+                  ]);
+                }}
+              >
+                Add Email
+              </Button>
+            </div>
+          </div>
+
+          <Card className="p-6">
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <h2 className="text-lg font-medium">Additional Information</h2>
+                <p className="text-sm text-gray-500">
+                  Additional details about the person
+                </p>
+              </div>
 
-            <Card className="p-6">
               <div className="space-y-4">
                 <div className="space-y-2">
-                  <h2 className="text-lg font-medium">
-                    Additional Information
-                  </h2>
-                  <p className="text-sm text-gray-500">
-                    Additional details about the person
-                  </p>
-                </div>
-
-                <div className="space-y-4">
-                  <div className="space-y-2">
-                    <div className="flex items-center gap-2">
-                      <HelpCircle className="h-4 w-4 text-gray-400" />
-                      <Label className="text-sm">Kind</Label>
-                    </div>
-                    <div className="flex gap-2">
-                      <button
-                        type="button"
-                        onClick={() => handleFieldChange("kind", "EMPLOYEE")}
-                        className={cn(
-                          "rounded-full px-4 py-1 text-sm transition-colors",
-                          formData.kind === "EMPLOYEE"
-                            ? "bg-blue-100 text-blue-900 ring-2 ring-blue-600 ring-offset-2"
-                            : "bg-gray-100 text-gray-900 hover:bg-gray-200"
-                        )}
-                      >
-                        Employee
-                      </button>
-                      <button
-                        type="button"
-                        onClick={() => handleFieldChange("kind", "CONTRACTOR")}
-                        className={cn(
-                          "rounded-full px-4 py-1 text-sm transition-colors",
-                          formData.kind === "CONTRACTOR"
-                            ? "bg-purple-100 text-purple-900 ring-2 ring-purple-600 ring-offset-2"
-                            : "bg-gray-100 text-gray-900 hover:bg-gray-200"
-                        )}
-                      >
-                        Contractor
-                      </button>
-                      <button
-                        type="button"
-                        onClick={() =>
-                          handleFieldChange("kind", "SERVICE_ACCOUNT")
-                        }
-                        className={cn(
-                          "rounded-full px-4 py-1 text-sm transition-colors",
-                          formData.kind === "SERVICE_ACCOUNT"
-                            ? "bg-green-100 text-green-900 ring-2 ring-green-600 ring-offset-2"
-                            : "bg-gray-100 text-gray-900 hover:bg-gray-200"
-                        )}
-                      >
-                        Service Account
-                      </button>
-                    </div>
+                  <div className="flex items-center gap-2">
+                    <HelpCircle className="h-4 w-4 text-gray-400" />
+                    <Label className="text-sm">Kind</Label>
+                  </div>
+                  <div className="flex gap-2">
+                    <button
+                      type="button"
+                      onClick={() => handleFieldChange("kind", "EMPLOYEE")}
+                      className={cn(
+                        "rounded-full px-4 py-1 text-sm transition-colors",
+                        formData.kind === "EMPLOYEE"
+                          ? "bg-blue-100 text-blue-900 ring-2 ring-blue-600 ring-offset-2"
+                          : "bg-gray-100 text-gray-900 hover:bg-gray-200"
+                      )}
+                    >
+                      Employee
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => handleFieldChange("kind", "CONTRACTOR")}
+                      className={cn(
+                        "rounded-full px-4 py-1 text-sm transition-colors",
+                        formData.kind === "CONTRACTOR"
+                          ? "bg-purple-100 text-purple-900 ring-2 ring-purple-600 ring-offset-2"
+                          : "bg-gray-100 text-gray-900 hover:bg-gray-200"
+                      )}
+                    >
+                      Contractor
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() =>
+                        handleFieldChange("kind", "SERVICE_ACCOUNT")
+                      }
+                      className={cn(
+                        "rounded-full px-4 py-1 text-sm transition-colors",
+                        formData.kind === "SERVICE_ACCOUNT"
+                          ? "bg-green-100 text-green-900 ring-2 ring-green-600 ring-offset-2"
+                          : "bg-gray-100 text-gray-900 hover:bg-gray-200"
+                      )}
+                    >
+                      Service Account
+                    </button>
                   </div>
                 </div>
               </div>
-            </Card>
-          </div>
-          <div className="fixed bottom-6 right-6 flex gap-2">
-            <Button
-              type="button"
-              variant="outline"
-              onClick={() => navigate(-1)}
-            >
-              Cancel
-            </Button>
-            <Button
-              type="submit"
-              className="bg-primary text-primary-foreground hover:bg-primary/90"
-            >
-              Create Person
-            </Button>
-          </div>
-        </form>
-      </div>
-    </>
+            </div>
+          </Card>
+        </div>
+        <div className="fixed bottom-6 right-6 flex gap-2">
+          <Button type="button" variant="outline" onClick={() => navigate(-1)}>
+            Cancel
+          </Button>
+          <Button
+            type="submit"
+            className="bg-primary text-primary-foreground hover:bg-primary/90"
+          >
+            Create Person
+          </Button>
+        </div>
+      </form>
+    </PageTemplate>
+  );
+}
+
+export function CreatePeoplePageSkeleton() {
+  return (
+    <PageTemplateSkeleton
+      title="Create Person"
+      description="Add a new person interacting with organization"
+    >
+      <div className="max-w-2xl aspect-square bg-muted rounded-xl animate-pulse" />
+    </PageTemplateSkeleton>
   );
 }
 
 export default function CreatePeoplePage() {
   return (
-    <Suspense fallback={null}>
+    <Suspense fallback={<CreatePeoplePageSkeleton />}>
       <CreatePeoplePageContent />
     </Suspense>
   );
diff --git a/apps/console/src/pages/CreatePolicyPage.tsx b/apps/console/src/pages/CreatePolicyPage.tsx
index 1b274a69a..e4cc4ae5a 100644
--- a/apps/console/src/pages/CreatePolicyPage.tsx
+++ b/apps/console/src/pages/CreatePolicyPage.tsx
@@ -8,7 +8,6 @@ import {
   usePreloadedQuery,
   PreloadedQuery,
 } from "react-relay";
-import { Helmet } from "react-helmet-async";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -21,7 +20,7 @@ import PeopleSelector from "@/components/PeopleSelector";
 import { Suspense } from "react";
 import type { CreatePolicyPageMutation } from "./__generated__/CreatePolicyPageMutation.graphql";
 import type { CreatePolicyPageQuery as CreatePolicyPageQueryType } from "./__generated__/CreatePolicyPageQuery.graphql";
-import { PageHeader } from "@/components/PageHeader";
+import { PageTemplate, PageTemplateSkeleton } from "@/components/PageTemplate";
 
 const CreatePolicyQuery = graphql`
   query CreatePolicyPageQuery($organizationId: ID!) {
@@ -156,136 +155,119 @@ function CreatePolicyForm({
   };
 
   return (
-    <>
-      <Helmet>
-        <title>Create Policy - Probo Console</title>
-      </Helmet>
-      <div className="container">
-        <PageHeader
-          className="mb-17"
-          title="Create Policy"
-          description="Create a new policy for your organization"
-        />
+    <PageTemplate
+      title="Create Policy"
+      description="Create a new policy for your organization"
+    >
+      <form onSubmit={handleSubmit}>
+        <div className="grid gap-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>Policy Information</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="name">Policy Name</Label>
+                <Input
+                  id="name"
+                  placeholder="Enter policy name"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  required
+                />
+              </div>
 
-        <form onSubmit={handleSubmit}>
-          <div className="grid gap-6">
-            <Card>
-              <CardHeader>
-                <CardTitle>Policy Information</CardTitle>
-              </CardHeader>
-              <CardContent className="space-y-4">
-                <div className="space-y-2">
-                  <Label htmlFor="name">Policy Name</Label>
-                  <Input
-                    id="name"
-                    placeholder="Enter policy name"
-                    value={name}
-                    onChange={(e) => setName(e.target.value)}
-                    required
+              <div className="space-y-2">
+                <Label htmlFor="content">Policy Content</Label>
+                <div className="min-h-[300px]">
+                  <PolicyEditor
+                    initialContent={content}
+                    onChange={(html) => setContent(html)}
                   />
                 </div>
+              </div>
 
-                <div className="space-y-2">
-                  <Label htmlFor="content">Policy Content</Label>
-                  <div className="min-h-[300px]">
-                    <PolicyEditor
-                      initialContent={content}
-                      onChange={(html) => setContent(html)}
-                    />
+              <div className="space-y-2">
+                <Label>Status</Label>
+                <RadioGroup
+                  value={status}
+                  onValueChange={(value: "DRAFT" | "ACTIVE") =>
+                    setStatus(value)
+                  }
+                  className="flex space-x-4"
+                >
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem value="DRAFT" id="draft" />
+                    <Label htmlFor="draft" className="cursor-pointer">
+                      Draft
+                    </Label>
                   </div>
-                </div>
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem value="ACTIVE" id="active" />
+                    <Label htmlFor="active" className="cursor-pointer">
+                      Active
+                    </Label>
+                  </div>
+                </RadioGroup>
+              </div>
 
-                <div className="space-y-2">
-                  <Label>Status</Label>
-                  <RadioGroup
-                    value={status}
-                    onValueChange={(value: "DRAFT" | "ACTIVE") =>
-                      setStatus(value)
-                    }
-                    className="flex space-x-4"
-                  >
-                    <div className="flex items-center space-x-2">
-                      <RadioGroupItem value="DRAFT" id="draft" />
-                      <Label htmlFor="draft" className="cursor-pointer">
-                        Draft
-                      </Label>
-                    </div>
-                    <div className="flex items-center space-x-2">
-                      <RadioGroupItem value="ACTIVE" id="active" />
-                      <Label htmlFor="active" className="cursor-pointer">
-                        Active
-                      </Label>
-                    </div>
-                  </RadioGroup>
-                </div>
+              <div className="space-y-2">
+                <Label htmlFor="owner" className="flex items-center gap-2">
+                  <User className="h-4 w-4" />
+                  Policy Owner
+                </Label>
+                <PeopleSelector
+                  organizationRef={data.organization}
+                  selectedPersonId={ownerId}
+                  onSelect={setOwnerId}
+                  placeholder="Select policy owner"
+                  required
+                />
+              </div>
 
-                <div className="space-y-2">
-                  <Label htmlFor="owner" className="flex items-center gap-2">
-                    <User className="h-4 w-4" />
-                    Policy Owner
-                  </Label>
-                  <PeopleSelector
-                    organizationRef={data.organization}
-                    selectedPersonId={ownerId}
-                    onSelect={setOwnerId}
-                    placeholder="Select policy owner"
-                    required
-                  />
-                </div>
+              <div className="space-y-2">
+                <Label htmlFor="reviewDate" className="flex items-center gap-2">
+                  <Calendar className="h-4 w-4" />
+                  Review Date
+                </Label>
+                <Input
+                  id="reviewDate"
+                  type="date"
+                  value={reviewDate}
+                  onChange={(e) => setReviewDate(e.target.value)}
+                />
+              </div>
+            </CardContent>
+          </Card>
 
-                <div className="space-y-2">
-                  <Label
-                    htmlFor="reviewDate"
-                    className="flex items-center gap-2"
-                  >
-                    <Calendar className="h-4 w-4" />
-                    Review Date
-                  </Label>
-                  <Input
-                    id="reviewDate"
-                    type="date"
-                    value={reviewDate}
-                    onChange={(e) => setReviewDate(e.target.value)}
-                  />
-                </div>
-              </CardContent>
-            </Card>
-
-            <div className="flex justify-end gap-4">
-              <Button
-                type="button"
-                variant="outline"
-                onClick={() =>
-                  navigate(`/organizations/${organizationId}/policies`)
-                }
-              >
-                Cancel
-              </Button>
-              <Button type="submit" disabled={isSubmitting}>
-                {isSubmitting ? "Creating..." : "Create Policy"}
-              </Button>
-            </div>
+          <div className="flex justify-end gap-4">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() =>
+                navigate(`/organizations/${organizationId}/policies`)
+              }
+            >
+              Cancel
+            </Button>
+            <Button type="submit" disabled={isSubmitting}>
+              {isSubmitting ? "Creating..." : "Create Policy"}
+            </Button>
           </div>
-        </form>
-      </div>
-    </>
+        </div>
+      </form>
+    </PageTemplate>
   );
 }
 
-function CreatePolicyPageFallback() {
+export function CreatePolicyPageSkeleton() {
   return (
-    <div className="container mx-auto py-6">
-      <div className="flex items-center mb-6">
-        <div className="mr-4">
-          <div className="h-12 w-12 bg-muted animate-pulse rounded-lg" />
-        </div>
-        <div>
-          <div className="h-8 w-48 bg-muted animate-pulse rounded mb-2" />
-          <div className="h-4 w-64 bg-muted animate-pulse rounded" />
-        </div>
-      </div>
+    <PageTemplateSkeleton
+      title="Create Policy"
+      description="Create a new policy for your organization"
+    >
       <div className="bg-muted animate-pulse rounded-lg h-[600px]" />
-    </div>
+    </PageTemplateSkeleton>
   );
 }
 
@@ -300,9 +282,13 @@ export default function CreatePolicyPage() {
     }
   }, [organizationId, loadQuery]);
 
+  if (!queryRef) {
+    return <CreatePolicyPageSkeleton />;
+  }
+
   return (
-    <Suspense fallback={<CreatePolicyPageFallback />}>
-      {queryRef && <CreatePolicyForm queryRef={queryRef} />}
+    <Suspense fallback={<CreatePolicyPageSkeleton />}>
+      {<CreatePolicyForm queryRef={queryRef} />}
     </Suspense>
   );
 }
diff --git a/apps/console/src/pages/FrameworkListPage.tsx b/apps/console/src/pages/FrameworkListPage.tsx
index 360a39852..41ec9edee 100644
--- a/apps/console/src/pages/FrameworkListPage.tsx
+++ b/apps/console/src/pages/FrameworkListPage.tsx
@@ -320,6 +320,10 @@ export default function FrameworkListPage() {
     loadQuery({ organizationId: organizationId! });
   }, [loadQuery, organizationId]);
 
+  if (!queryRef) {
+    return <FrameworkListPageSkeleton />;
+  }
+
   return (
     <Suspense fallback={<FrameworkListPageSkeleton />}>
       {queryRef && <FrameworkListPageContent queryRef={queryRef} />}
diff --git a/apps/console/src/pages/FrameworkOverviewPage.tsx b/apps/console/src/pages/FrameworkOverviewPage.tsx
index e51d34304..1f6480995 100644
--- a/apps/console/src/pages/FrameworkOverviewPage.tsx
+++ b/apps/console/src/pages/FrameworkOverviewPage.tsx
@@ -20,8 +20,7 @@ import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Progress } from "@/components/ui/progress";
 import type { FrameworkOverviewPageQuery as FrameworkOverviewPageQueryType } from "./__generated__/FrameworkOverviewPageQuery.graphql";
-import { Helmet } from "react-helmet-async";
-import { PageHeader } from "@/components/PageHeader";
+import { PageTemplate, PageTemplateSkeleton } from "@/components/PageTemplate";
 
 const FrameworkOverviewPageQuery = graphql`
   query FrameworkOverviewPageQuery($frameworkId: ID!) {
@@ -169,32 +168,29 @@ function FrameworkOverviewPageContent({
   };
 
   return (
-    <div className="container space-y-6">
-      <PageHeader
-        className="mb-10"
-        title={framework.name ?? ""}
-        description={framework.description ?? ""}
-        actions={
-          <div className="flex gap-4">
-            <Button variant="outline" asChild>
-              <Link
-                to={`/organizations/${organizationId}/frameworks/${framework.id}/update`}
-              >
-                Edit Framework
-              </Link>
-            </Button>
-            <Button asChild>
-              <Link
-                to={`/organizations/${organizationId}/frameworks/${framework.id}/controls/create`}
-              >
-                <Plus className="mr-2 h-4 w-4" />
-                Create Control
-              </Link>
-            </Button>
-          </div>
-        }
-      />
-
+    <PageTemplate
+      title={framework.name ?? ""}
+      description={framework.description ?? ""}
+      actions={
+        <div className="flex gap-4">
+          <Button variant="outline" asChild>
+            <Link
+              to={`/organizations/${organizationId}/frameworks/${framework.id}/update`}
+            >
+              Edit Framework
+            </Link>
+          </Button>
+          <Button asChild>
+            <Link
+              to={`/organizations/${organizationId}/frameworks/${framework.id}/controls/create`}
+            >
+              <Plus className="mr-2 h-4 w-4" />
+              Create Control
+            </Link>
+          </Button>
+        </div>
+      }
+    >
       <div className="grid gap-6">
         {categories.map((category) => {
           const isExpanded = expandedCategories.includes(category.id);
@@ -326,17 +322,13 @@ function FrameworkOverviewPageContent({
           );
         })}
       </div>
-    </div>
+    </PageTemplate>
   );
 }
 
-function FrameworkOverviewPageFallback() {
+export function FrameworkOverviewPageSkeleton() {
   return (
-    <div className="min-h-screen bg-background p-6">
-      <div className="mb-8">
-        <div className="h-8 w-48 bg-muted animate-pulse rounded" />
-        <div className="h-4 w-96 bg-muted animate-pulse rounded mt-2" />
-      </div>
+    <PageTemplateSkeleton>
       <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
         {[1, 2, 3].map((i) => (
           <Card key={i}>
@@ -351,7 +343,7 @@ function FrameworkOverviewPageFallback() {
           </Card>
         ))}
       </div>
-    </div>
+    </PageTemplateSkeleton>
   );
 }
 
@@ -365,14 +357,13 @@ export default function FrameworkOverviewPage() {
     loadQuery({ frameworkId: frameworkId! });
   }, [loadQuery, frameworkId]);
 
+  if (!queryRef) {
+    return <FrameworkOverviewPageSkeleton />;
+  }
+
   return (
-    <>
-      <Helmet>
-        <title>Framework Overview - Probo Console</title>
-      </Helmet>
-      <Suspense fallback={<FrameworkOverviewPageFallback />}>
-        {queryRef && <FrameworkOverviewPageContent queryRef={queryRef} />}
-      </Suspense>
-    </>
+    <Suspense fallback={<FrameworkOverviewPageSkeleton />}>
+      {queryRef && <FrameworkOverviewPageContent queryRef={queryRef} />}
+    </Suspense>
   );
 }
diff --git a/apps/console/src/pages/PeopleListPage.tsx b/apps/console/src/pages/PeopleListPage.tsx
index 223321f0e..e8a27c4d1 100644
--- a/apps/console/src/pages/PeopleListPage.tsx
+++ b/apps/console/src/pages/PeopleListPage.tsx
@@ -13,12 +13,11 @@ import { Badge } from "@/components/ui/badge";
 import { UserPlus, Trash2, ChevronRight } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Link } from "react-router";
-import { Helmet } from "react-helmet-async";
 import type { PeopleListPageQuery as PeopleListPageQueryType } from "./__generated__/PeopleListPageQuery.graphql";
 import type { PeopleListPageDeletePeopleMutation } from "./__generated__/PeopleListPageDeletePeopleMutation.graphql";
 import { PeopleListPagePaginationQuery } from "./__generated__/PeopleListPagePaginationQuery.graphql";
 import { PeopleListPage_peoples$key } from "./__generated__/PeopleListPage_peoples.graphql";
-import { PageHeader } from "@/components/PageHeader";
+import { PageTemplate, PageTemplateSkeleton } from "@/components/PageTemplate";
 
 const ITEMS_PER_PAGE = 25;
 
@@ -174,31 +173,25 @@ function PeopleListContent({
   const pageInfo = peoplesConnection.peoples.pageInfo;
 
   return (
-    <>
-      <Helmet>
-        <title>People - Probo</title>
-      </Helmet>
-      <div className="container space-y-6">
-        <PageHeader
-          className="mb-17"
-          title="Employees"
-          description="Keep track of your company's workforce and their progress
-            towards completing tasks assigned to them."
-          actions={
-            <Button
-              asChild
-              variant="outline"
-              style={{ borderRadius: "0.5rem" }}
-              className="gap-2"
-            >
-              <Link to={`/organizations/${organizationId}/people/create`}>
-                <UserPlus className="h-4 w-4" />
-                Add a person
-              </Link>
-            </Button>
-          }
-        />
-
+    <PageTemplate
+      title="People"
+      description="Keep track of your company's workforce and their progress
+      towards completing tasks assigned to them."
+      actions={
+        <Button
+          asChild
+          variant="outline"
+          style={{ borderRadius: "0.5rem" }}
+          className="gap-2"
+        >
+          <Link to={`/organizations/${organizationId}/people/create`}>
+            <UserPlus className="h-4 w-4" />
+            Add a person
+          </Link>
+        </Button>
+      }
+    >
+      <div className="space-y-6">
         <div className="space-y-2">
           {peoples.map((person) => (
             <Link
@@ -296,27 +289,32 @@ function PeopleListContent({
           }}
         />
       </div>
-    </>
+    </PageTemplate>
   );
 }
 
-function PeopleListPageFallback() {
+export function PeopleListPageSkeleton() {
   return (
-    <div className="space-y-6">
-      <div>
-        <div className="h-8 w-48 bg-muted animate-pulse rounded" />
-        <div className="h-4 w-96 bg-muted animate-pulse rounded mt-1" />
+    <PageTemplateSkeleton
+      title="People"
+      description="Keep track of your company's workforce and their progress towards completing tasks assigned to them."
+      actions={<div className="bg-muted animate-pulse h-9 w-1/6 rounded-lg" />}
+    >
+      <div className="space-y-6">
+        <div className="rounded-xl border bg-card p-4 space-y-2">
+          <div className="h-5 w-32 bg-muted animate-pulse rounded" />
+          <div className="h-10 w-full bg-muted animate-pulse rounded" />
+        </div>
+        <div className="space-y-2">
+          {[1, 2, 3].map((i) => (
+            <div
+              key={i}
+              className="h-[72px] bg-muted animate-pulse rounded-xl"
+            />
+          ))}
+        </div>
       </div>
-      <div className="rounded-xl border bg-card p-4 space-y-4">
-        <div className="h-5 w-32 bg-muted animate-pulse rounded" />
-        <div className="h-10 w-full bg-muted animate-pulse rounded" />
-      </div>
-      <div className="space-y-2">
-        {[1, 2, 3].map((i) => (
-          <div key={i} className="h-[72px] bg-muted animate-pulse rounded-xl" />
-        ))}
-      </div>
-    </div>
+    </PageTemplateSkeleton>
   );
 }
 
@@ -341,17 +339,12 @@ export default function PeopleListPage() {
   }, [loadQuery, organizationId, searchParams]);
 
   if (!queryRef) {
-    return <PeopleListPageFallback />;
+    return <PeopleListPageSkeleton />;
   }
 
   return (
-    <>
-      <Helmet>
-        <title>People - Probo Console</title>
-      </Helmet>
-      <Suspense fallback={<PeopleListPageFallback />}>
-        <PeopleListContent queryRef={queryRef} />
-      </Suspense>
-    </>
+    <Suspense fallback={<PeopleListPageSkeleton />}>
+      <PeopleListContent queryRef={queryRef} />
+    </Suspense>
   );
 }
diff --git a/apps/console/src/pages/PeopleOverviewPage.tsx b/apps/console/src/pages/PeopleOverviewPage.tsx
index 132e5d516..1979136b4 100644
--- a/apps/console/src/pages/PeopleOverviewPage.tsx
+++ b/apps/console/src/pages/PeopleOverviewPage.tsx
@@ -16,9 +16,8 @@ import {
 import { Suspense, useEffect, useState, useCallback } from "react";
 import type { PeopleOverviewPageQuery as PeopleOverviewPageQueryType } from "./__generated__/PeopleOverviewPageQuery.graphql";
 import { useParams } from "react-router";
-import { Helmet } from "react-helmet-async";
 import { cn } from "@/lib/utils";
-import { PageHeader } from "@/components/PageHeader";
+import { PageTemplate, PageTemplateSkeleton } from "@/components/PageTemplate";
 
 const peopleOverviewPageQuery = graphql`
   query PeopleOverviewPageQuery($peopleId: ID!) {
@@ -161,174 +160,160 @@ function PeopleOverviewPageContent({
   };
 
   return (
-    <>
-      <Helmet>
-        <title>Person - Probo</title>
-      </Helmet>
-      <div className="container">
-        <PageHeader className="mb-17" title={formData.fullName} />
-        <div className="space-y-6">
-          <div className="mx-auto max-w-4xl space-y-6">
-            <EditableField
-              label="Full Name"
-              value={formData.fullName}
-              onChange={(value) => handleFieldChange("fullName", value)}
-            />
+    <PageTemplate title={formData.fullName}>
+      <div className="space-y-6">
+        <div className="mx-auto max-w-4xl space-y-6">
+          <EditableField
+            label="Full Name"
+            value={formData.fullName}
+            onChange={(value) => handleFieldChange("fullName", value)}
+          />
 
-            <EditableField
-              label="Primary Email"
-              value={formData.primaryEmailAddress}
-              type="email"
-              onChange={(value) =>
-                handleFieldChange("primaryEmailAddress", value)
-              }
-            />
+          <EditableField
+            label="Primary Email"
+            value={formData.primaryEmailAddress}
+            type="email"
+            onChange={(value) =>
+              handleFieldChange("primaryEmailAddress", value)
+            }
+          />
 
-            <div className="space-y-2">
-              <div className="flex items-center gap-2">
-                <HelpCircle className="h-4 w-4 text-gray-400" />
-                <Label className="text-sm">Additional Email Addresses</Label>
-              </div>
-              <div className="space-y-2">
-                {formData.additionalEmailAddresses.map((email, index) => (
-                  <div key={index} className="flex gap-2">
-                    <Input
-                      type="email"
-                      value={email}
-                      onChange={(e) => {
-                        const newEmails = [
-                          ...formData.additionalEmailAddresses,
-                        ];
-                        newEmails[index] = e.target.value;
-                        handleFieldChange(
-                          "additionalEmailAddresses",
-                          newEmails
-                        );
-                      }}
-                    />
-                    <Button
-                      variant="outline"
-                      onClick={() => {
-                        const newEmails =
-                          formData.additionalEmailAddresses.filter(
-                            (_, i) => i !== index
-                          );
-                        handleFieldChange(
-                          "additionalEmailAddresses",
-                          newEmails
-                        );
-                      }}
-                    >
-                      Remove
-                    </Button>
-                  </div>
-                ))}
-                <Button
-                  variant="outline"
-                  onClick={() => {
-                    handleFieldChange("additionalEmailAddresses", [
-                      ...formData.additionalEmailAddresses,
-                      "",
-                    ]);
-                  }}
-                >
-                  Add Email
-                </Button>
-              </div>
+          <div className="space-y-2">
+            <div className="flex items-center gap-2">
+              <HelpCircle className="h-4 w-4 text-gray-400" />
+              <Label className="text-sm">Additional Email Addresses</Label>
             </div>
+            <div className="space-y-2">
+              {formData.additionalEmailAddresses.map((email, index) => (
+                <div key={index} className="flex gap-2">
+                  <Input
+                    type="email"
+                    value={email}
+                    onChange={(e) => {
+                      const newEmails = [...formData.additionalEmailAddresses];
+                      newEmails[index] = e.target.value;
+                      handleFieldChange("additionalEmailAddresses", newEmails);
+                    }}
+                  />
+                  <Button
+                    variant="outline"
+                    onClick={() => {
+                      const newEmails =
+                        formData.additionalEmailAddresses.filter(
+                          (_, i) => i !== index
+                        );
+                      handleFieldChange("additionalEmailAddresses", newEmails);
+                    }}
+                  >
+                    Remove
+                  </Button>
+                </div>
+              ))}
+              <Button
+                variant="outline"
+                onClick={() => {
+                  handleFieldChange("additionalEmailAddresses", [
+                    ...formData.additionalEmailAddresses,
+                    "",
+                  ]);
+                }}
+              >
+                Add Email
+              </Button>
+            </div>
+          </div>
+
+          <Card className="p-6">
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <h2 className="text-lg font-medium">Additional Information</h2>
+                <p className="text-sm text-gray-500">
+                  Additional details about the person
+                </p>
+              </div>
 
-            <Card className="p-6">
               <div className="space-y-4">
                 <div className="space-y-2">
-                  <h2 className="text-lg font-medium">
-                    Additional Information
-                  </h2>
-                  <p className="text-sm text-gray-500">
-                    Additional details about the person
-                  </p>
-                </div>
-
-                <div className="space-y-4">
-                  <div className="space-y-2">
-                    <div className="flex items-center gap-2">
-                      <HelpCircle className="h-4 w-4 text-gray-400" />
-                      <Label className="text-sm">Kind</Label>
-                    </div>
-                    <div className="flex gap-2">
-                      <button
-                        onClick={() => handleFieldChange("kind", "EMPLOYEE")}
-                        className={cn(
-                          "rounded-full px-4 py-1 text-sm transition-colors",
-                          formData.kind === "EMPLOYEE"
-                            ? "bg-blue-100 text-blue-900 ring-2 ring-blue-600 ring-offset-2"
-                            : "bg-gray-100 text-gray-900 hover:bg-gray-200"
-                        )}
-                      >
-                        Employee
-                      </button>
-                      <button
-                        onClick={() => handleFieldChange("kind", "CONTRACTOR")}
-                        className={cn(
-                          "rounded-full px-4 py-1 text-sm transition-colors",
-                          formData.kind === "CONTRACTOR"
-                            ? "bg-purple-100 text-purple-900 ring-2 ring-purple-600 ring-offset-2"
-                            : "bg-gray-100 text-gray-900 hover:bg-gray-200"
-                        )}
-                      >
-                        Contractor
-                      </button>
-                      <button
-                        onClick={() =>
-                          handleFieldChange("kind", "SERVICE_ACCOUNT")
-                        }
-                        className={cn(
-                          "rounded-full px-4 py-1 text-sm transition-colors",
-                          formData.kind === "SERVICE_ACCOUNT"
-                            ? "bg-green-100 text-green-900 ring-2 ring-green-600 ring-offset-2"
-                            : "bg-gray-100 text-gray-900 hover:bg-gray-200"
-                        )}
-                      >
-                        Service Account
-                      </button>
-                    </div>
+                  <div className="flex items-center gap-2">
+                    <HelpCircle className="h-4 w-4 text-gray-400" />
+                    <Label className="text-sm">Kind</Label>
+                  </div>
+                  <div className="flex gap-2">
+                    <button
+                      onClick={() => handleFieldChange("kind", "EMPLOYEE")}
+                      className={cn(
+                        "rounded-full px-4 py-1 text-sm transition-colors",
+                        formData.kind === "EMPLOYEE"
+                          ? "bg-blue-100 text-blue-900 ring-2 ring-blue-600 ring-offset-2"
+                          : "bg-gray-100 text-gray-900 hover:bg-gray-200"
+                      )}
+                    >
+                      Employee
+                    </button>
+                    <button
+                      onClick={() => handleFieldChange("kind", "CONTRACTOR")}
+                      className={cn(
+                        "rounded-full px-4 py-1 text-sm transition-colors",
+                        formData.kind === "CONTRACTOR"
+                          ? "bg-purple-100 text-purple-900 ring-2 ring-purple-600 ring-offset-2"
+                          : "bg-gray-100 text-gray-900 hover:bg-gray-200"
+                      )}
+                    >
+                      Contractor
+                    </button>
+                    <button
+                      onClick={() =>
+                        handleFieldChange("kind", "SERVICE_ACCOUNT")
+                      }
+                      className={cn(
+                        "rounded-full px-4 py-1 text-sm transition-colors",
+                        formData.kind === "SERVICE_ACCOUNT"
+                          ? "bg-green-100 text-green-900 ring-2 ring-green-600 ring-offset-2"
+                          : "bg-gray-100 text-gray-900 hover:bg-gray-200"
+                      )}
+                    >
+                      Service Account
+                    </button>
                   </div>
                 </div>
               </div>
-            </Card>
-          </div>
+            </div>
+          </Card>
         </div>
-
-        {hasChanges && (
-          <div className="fixed bottom-6 right-6 flex gap-2">
-            <Button variant="outline" onClick={handleCancel}>
-              Cancel
-            </Button>
-            <Button
-              onClick={handleSave}
-              className="bg-primary text-primary-foreground hover:bg-primary/90"
-            >
-              Save Changes
-            </Button>
-          </div>
-        )}
       </div>
-    </>
+
+      {hasChanges && (
+        <div className="fixed bottom-6 right-6 flex gap-2">
+          <Button variant="outline" onClick={handleCancel}>
+            Cancel
+          </Button>
+          <Button
+            onClick={handleSave}
+            className="bg-primary text-primary-foreground hover:bg-primary/90"
+          >
+            Save Changes
+          </Button>
+        </div>
+      )}
+    </PageTemplate>
   );
 }
 
-function PeopleOverviewPageFallback() {
+export function PeopleOverviewPageSkeleton() {
   return (
-    <div className="p-6 space-y-6">
-      <div className="space-y-1">
-        <div className="h-8 w-48 bg-muted animate-pulse rounded" />
-        <div className="h-4 w-96 bg-muted animate-pulse rounded" />
+    <PageTemplateSkeleton>
+      <div className="space-y-6">
+        <div className="space-y-1">
+          <div className="h-8 w-48 bg-muted animate-pulse rounded" />
+          <div className="h-4 w-96 bg-muted animate-pulse rounded" />
+        </div>
+        <div className="space-y-2">
+          {[1, 2].map((i) => (
+            <div key={i} className="h-20 bg-muted animate-pulse rounded-lg" />
+          ))}
+        </div>
       </div>
-      <div className="space-y-2">
-        {[1, 2].map((i) => (
-          <div key={i} className="h-20 bg-muted animate-pulse rounded-lg" />
-        ))}
-      </div>
-    </div>
+    </PageTemplateSkeleton>
   );
 }
 
@@ -343,17 +328,12 @@ export default function PeopleOverviewPage() {
   }, [loadQuery, peopleId]);
 
   if (!queryRef) {
-    return <PeopleOverviewPageFallback />;
+    return <PeopleOverviewPageSkeleton />;
   }
 
   return (
-    <>
-      <Helmet>
-        <title>People Overview - Probo Console</title>
-      </Helmet>
-      <Suspense fallback={<PeopleOverviewPageFallback />}>
-        <PeopleOverviewPageContent queryRef={queryRef} />
-      </Suspense>
-    </>
+    <Suspense fallback={<PeopleOverviewPageSkeleton />}>
+      <PeopleOverviewPageContent queryRef={queryRef} />
+    </Suspense>
   );
 }
diff --git a/apps/console/src/pages/PolicyListPage.tsx b/apps/console/src/pages/PolicyListPage.tsx
index 8ae1bef5d..26d5430cf 100644
--- a/apps/console/src/pages/PolicyListPage.tsx
+++ b/apps/console/src/pages/PolicyListPage.tsx
@@ -7,7 +7,6 @@ import {
 } from "react-relay";
 import { Card, CardContent, CardFooter } from "@/components/ui/card";
 import { Link, useParams } from "react-router";
-import { Helmet } from "react-helmet-async";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import {
@@ -34,7 +33,7 @@ import {
 import { Badge } from "@/components/ui/badge";
 import { format } from "date-fns";
 import type { PolicyListPageQuery as PolicyListPageQueryType } from "./__generated__/PolicyListPageQuery.graphql";
-import { PageHeader } from "@/components/PageHeader";
+import { PageTemplate, PageTemplateSkeleton } from "@/components/PageTemplate";
 
 const PolicyListPageQuery = graphql`
   query PolicyListPageQuery($organizationId: ID!) {
@@ -220,153 +219,141 @@ function PolicyListPageContent({
     });
 
   return (
-    <>
-      <Helmet>
-        <title>Policies - Probo</title>
-      </Helmet>
-      <div className="container space-y-6">
-        <PageHeader
-          className="mb-17"
-          title="Policies"
-          description="Manage your organization's policies"
-          actions={
-            <Button asChild>
-              <Link to={`/organizations/${organizationId}/policies/create`}>
-                <Plus className="mr-2 h-4 w-4" />
-                Create Policy
-              </Link>
-            </Button>
-          }
-        />
-
-        {/* Search and filter controls */}
-        <div className="flex flex-col md:flex-row gap-4 mb-6">
-          <div className="relative flex-1">
-            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-            <Input
-              placeholder="Search policies..."
-              className="pl-10"
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-            />
-          </div>
-
-          <div className="flex gap-2">
-            <Select value={statusFilter} onValueChange={setStatusFilter}>
-              <SelectTrigger className="w-[180px]">
-                <div className="flex items-center gap-2">
-                  <Filter className="h-4 w-4" />
-                  <SelectValue placeholder="Filter by status" />
-                </div>
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="ALL">All Statuses</SelectItem>
-                <SelectItem value="ACTIVE">Active</SelectItem>
-                <SelectItem value="DRAFT">Draft</SelectItem>
-              </SelectContent>
-            </Select>
-
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button variant="outline" className="flex items-center gap-2">
-                  <ArrowUpDown className="h-4 w-4" />
-                  Sort
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end">
-                <DropdownMenuItem onClick={() => setSortBy("name-asc")}>
-                  Name (A-Z)
-                </DropdownMenuItem>
-                <DropdownMenuItem onClick={() => setSortBy("name-desc")}>
-                  Name (Z-A)
-                </DropdownMenuItem>
-                <DropdownMenuItem onClick={() => setSortBy("updated-desc")}>
-                  Recently Updated
-                </DropdownMenuItem>
-                <DropdownMenuItem onClick={() => setSortBy("updated-asc")}>
-                  Oldest Updated
-                </DropdownMenuItem>
-                <DropdownMenuItem onClick={() => setSortBy("created-desc")}>
-                  Recently Created
-                </DropdownMenuItem>
-                <DropdownMenuItem onClick={() => setSortBy("created-asc")}>
-                  Oldest Created
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </div>
+    <PageTemplate
+      title="Policies"
+      description="Manage your organization's policies"
+      actions={
+        <Button asChild>
+          <Link to={`/organizations/${organizationId}/policies/create`}>
+            <Plus className="mr-2 h-4 w-4" />
+            Create Policy
+          </Link>
+        </Button>
+      }
+    >
+      {/* Search and filter controls */}
+      <div className="flex flex-col md:flex-row gap-4 mb-6">
+        <div className="relative flex-1">
+          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            placeholder="Search policies..."
+            className="pl-10"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+          />
         </div>
 
-        {/* Results summary */}
-        <div className="mb-4 text-sm text-muted-foreground">
-          Showing {filteredPolicies.length} of {policies.length} policies
-        </div>
+        <div className="flex gap-2">
+          <Select value={statusFilter} onValueChange={setStatusFilter}>
+            <SelectTrigger className="w-[180px]">
+              <div className="flex items-center gap-2">
+                <Filter className="h-4 w-4" />
+                <SelectValue placeholder="Filter by status" />
+              </div>
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="ALL">All Statuses</SelectItem>
+              <SelectItem value="ACTIVE">Active</SelectItem>
+              <SelectItem value="DRAFT">Draft</SelectItem>
+            </SelectContent>
+          </Select>
 
-        {/* Policy grid */}
-        <div className="space-y-6">
-          {filteredPolicies.length > 0 ? (
-            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-              {filteredPolicies.map((policy) => (
-                <Link
-                  key={policy.id}
-                  to={`/organizations/${organizationId}/policies/${policy.id}`}
-                  className="group"
-                >
-                  <PolicyCard
-                    title={policy.name}
-                    content={policy.content}
-                    status={policy.status}
-                    updatedAt={policy.updatedAt}
-                  />
-                </Link>
-              ))}
-            </div>
-          ) : (
-            <div className="text-center py-12 border rounded-lg bg-muted/20">
-              <FileText className="mx-auto h-8 w-8 text-muted-foreground mb-3" />
-              <h3 className="text-lg font-medium">No policies found</h3>
-              <p className="text-muted-foreground mb-4">
-                {searchQuery || statusFilter !== "ALL"
-                  ? "Try adjusting your search or filters"
-                  : "Create your first policy to get started"}
-              </p>
-              {searchQuery || statusFilter !== "ALL" ? (
-                <Button
-                  variant="outline"
-                  onClick={() => {
-                    setSearchQuery("");
-                    setStatusFilter("ALL");
-                  }}
-                >
-                  Clear filters
-                </Button>
-              ) : (
-                <Button asChild>
-                  <Link to={`/organizations/${organizationId}/policies/create`}>
-                    <Plus className="mr-2 h-4 w-4" />
-                    Create Policy
-                  </Link>
-                </Button>
-              )}
-            </div>
-          )}
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline" className="flex items-center gap-2">
+                <ArrowUpDown className="h-4 w-4" />
+                Sort
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem onClick={() => setSortBy("name-asc")}>
+                Name (A-Z)
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => setSortBy("name-desc")}>
+                Name (Z-A)
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => setSortBy("updated-desc")}>
+                Recently Updated
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => setSortBy("updated-asc")}>
+                Oldest Updated
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => setSortBy("created-desc")}>
+                Recently Created
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => setSortBy("created-asc")}>
+                Oldest Created
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
         </div>
       </div>
-    </>
+
+      {/* Results summary */}
+      <div className="mb-4 text-sm text-muted-foreground">
+        Showing {filteredPolicies.length} of {policies.length} policies
+      </div>
+
+      {/* Policy grid */}
+      <div className="space-y-6">
+        {filteredPolicies.length > 0 ? (
+          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+            {filteredPolicies.map((policy) => (
+              <Link
+                key={policy.id}
+                to={`/organizations/${organizationId}/policies/${policy.id}`}
+                className="group"
+              >
+                <PolicyCard
+                  title={policy.name}
+                  content={policy.content}
+                  status={policy.status}
+                  updatedAt={policy.updatedAt}
+                />
+              </Link>
+            ))}
+          </div>
+        ) : (
+          <div className="text-center py-12 border rounded-lg bg-muted/20">
+            <FileText className="mx-auto h-8 w-8 text-muted-foreground mb-3" />
+            <h3 className="text-lg font-medium">No policies found</h3>
+            <p className="text-muted-foreground mb-4">
+              {searchQuery || statusFilter !== "ALL"
+                ? "Try adjusting your search or filters"
+                : "Create your first policy to get started"}
+            </p>
+            {searchQuery || statusFilter !== "ALL" ? (
+              <Button
+                variant="outline"
+                onClick={() => {
+                  setSearchQuery("");
+                  setStatusFilter("ALL");
+                }}
+              >
+                Clear filters
+              </Button>
+            ) : (
+              <Button asChild>
+                <Link to={`/organizations/${organizationId}/policies/create`}>
+                  <Plus className="mr-2 h-4 w-4" />
+                  Create Policy
+                </Link>
+              </Button>
+            )}
+          </div>
+        )}
+      </div>
+    </PageTemplate>
   );
 }
 
-function PolicyListPageFallback() {
+export function PolicyListPageSkeleton() {
   return (
-    <div className="container mx-auto py-6">
-      <div className="flex justify-between items-center mb-6">
-        <div>
-          <div className="h-8 w-48 bg-muted animate-pulse rounded" />
-          <div className="h-4 w-96 bg-muted animate-pulse rounded mt-1" />
-        </div>
-        <div className="h-10 w-36 bg-muted animate-pulse rounded" />
-      </div>
-
+    <PageTemplateSkeleton
+      title="Policies"
+      description="Manage your organization's policies"
+      actions={<div className="bg-muted animate-pulse h-9 w-1/6 rounded-lg" />}
+    >
       {/* Search and filter controls skeleton */}
       <div className="flex flex-col md:flex-row gap-4 mb-6">
         <div className="flex-1 h-10 bg-muted animate-pulse rounded" />
@@ -407,7 +394,7 @@ function PolicyListPageFallback() {
           </Card>
         ))}
       </div>
-    </div>
+    </PageTemplateSkeleton>
   );
 }
 
@@ -421,14 +408,13 @@ export default function PolicyListPage() {
     loadQuery({ organizationId: organizationId! });
   }, [loadQuery, organizationId]);
 
+  if (!queryRef) {
+    return <PolicyListPageSkeleton />;
+  }
+
   return (
-    <>
-      <Helmet>
-        <title>Policies - Probo Console</title>
-      </Helmet>
-      <Suspense fallback={<PolicyListPageFallback />}>
-        {queryRef && <PolicyListPageContent queryRef={queryRef} />}
-      </Suspense>
-    </>
+    <Suspense fallback={<PolicyListPageSkeleton />}>
+      {<PolicyListPageContent queryRef={queryRef} />}
+    </Suspense>
   );
 }
diff --git a/apps/console/src/pages/PolicyOverviewPage.tsx b/apps/console/src/pages/PolicyOverviewPage.tsx
index a5bf197e3..c5eefe494 100644
--- a/apps/console/src/pages/PolicyOverviewPage.tsx
+++ b/apps/console/src/pages/PolicyOverviewPage.tsx
@@ -15,10 +15,9 @@ import { Badge } from "@/components/ui/badge";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import type { PolicyOverviewPageQuery as PolicyOverviewPageQueryType } from "./__generated__/PolicyOverviewPageQuery.graphql";
 import type { PolicyOverviewPageDeleteMutation } from "./__generated__/PolicyOverviewPageDeleteMutation.graphql";
-import { Helmet } from "react-helmet-async";
 import "../styles/policy-content.css";
 import { useToast } from "@/hooks/use-toast";
-import { PageHeader } from "@/components/PageHeader";
+import { PageTemplate, PageTemplateSkeleton } from "@/components/PageTemplate";
 
 const PolicyOverviewPageQuery = graphql`
   query PolicyOverviewPageQuery($policyId: ID!) {
@@ -149,276 +148,272 @@ function PolicyOverviewPageContent({
   };
 
   return (
-    <>
-      <Helmet>
-        <title>{policy.name} - Probo Console</title>
-      </Helmet>
-      <div className="container">
-        <PageHeader
-          className="mb-17"
-          title={policy.name ?? ""}
-          description={
-            <div className="flex items-center gap-2 text-muted-foreground">
-              <Badge
-                variant={policy.status === "ACTIVE" ? "default" : "outline"}
+    <PageTemplate
+      title={policy.name ?? ""}
+      description={
+        <div className="flex items-center gap-2 text-muted-foreground">
+          <Badge variant={policy.status === "ACTIVE" ? "default" : "outline"}>
+            {policy.status === "ACTIVE" ? "Active" : "Draft"}
+          </Badge>
+          {policy.owner && (
+            <div className="flex items-center gap-1">
+              <User className="h-3 w-3" />
+              <Link
+                to={`/organizations/${organizationId}/people/${policy.owner.id}`}
+                className="hover:underline"
               >
-                {policy.status === "ACTIVE" ? "Active" : "Draft"}
-              </Badge>
-              {policy.owner && (
-                <div className="flex items-center gap-1">
-                  <User className="h-3 w-3" />
+                {policy.owner.fullName}
+              </Link>
+            </div>
+          )}
+          {policy.reviewDate && (
+            <div className="flex items-center gap-1">
+              <Calendar className="h-3 w-3" />
+              <span>Review: {formatDate(policy.reviewDate)}</span>
+            </div>
+          )}
+        </div>
+      }
+      actions={
+        <div className="flex gap-2">
+          <Button variant="outline" size="sm" asChild>
+            <Link
+              to={`/organizations/${organizationId}/policies/${policy.id}/update`}
+            >
+              <Edit className="h-4 w-4 mr-2" />
+              Edit
+            </Link>
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => {
+              // Logic to download policy content as PDF or text
+              const element = document.createElement("a");
+              const file = new Blob([policy.content || ""], {
+                type: "text/plain",
+              });
+              element.href = URL.createObjectURL(file);
+              element.download = `${policy.name}.txt`;
+              document.body.appendChild(element);
+              element.click();
+              document.body.removeChild(element);
+            }}
+          >
+            <Download className="h-4 w-4 mr-2" />
+            Download
+          </Button>
+        </div>
+      }
+    >
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <div className="lg:col-span-2">
+          <Card className="border shadow-sm">
+            <CardContent className="p-6">
+              <div className="flex items-center gap-3 mb-4">
+                <div className="p-2 rounded-md bg-slate-100">
+                  <Shield className="h-6 w-6" />
+                </div>
+                <div className="flex gap-2">
+                  {policy.status && (
+                    <Badge
+                      className={`px-3 py-1 rounded-md font-medium ${
+                        policy.status === "ACTIVE"
+                          ? "bg-green-100 text-green-700 hover:bg-green-200"
+                          : policy.status === "DRAFT"
+                          ? "bg-yellow-100 text-yellow-700 hover:bg-yellow-200"
+                          : "bg-gray-100 text-gray-700 hover:bg-gray-200"
+                      }`}
+                    >
+                      {policy.status === "ACTIVE"
+                        ? "Active"
+                        : policy.status === "DRAFT"
+                        ? "Draft"
+                        : policy.status}
+                    </Badge>
+                  )}
+                </div>
+              </div>
+
+              <h1 className="text-3xl font-bold mb-3">{policy.name}</h1>
+
+              <p className="text-muted-foreground mb-6">
+                {getDescription(policy.content)}
+              </p>
+
+              <Tabs
+                defaultValue="content"
+                value={activeTab}
+                onValueChange={setActiveTab}
+                className="mb-6"
+              >
+                <TabsList className="border-b w-full rounded-none bg-transparent p-0 h-auto">
+                  <TabsTrigger
+                    value="content"
+                    className={`rounded-none border-b-2 border-transparent px-4 py-2 font-medium ${
+                      activeTab === "content"
+                        ? "border-primary text-primary"
+                        : "text-muted-foreground"
+                    }`}
+                  >
+                    Policy Content
+                  </TabsTrigger>
+                  <TabsTrigger
+                    value="history"
+                    className={`rounded-none border-b-2 border-transparent px-4 py-2 font-medium ${
+                      activeTab === "history"
+                        ? "border-primary text-primary"
+                        : "text-muted-foreground"
+                    }`}
+                  >
+                    Version History
+                  </TabsTrigger>
+                  <TabsTrigger
+                    value="approvals"
+                    className={`rounded-none border-b-2 border-transparent px-4 py-2 font-medium ${
+                      activeTab === "approvals"
+                        ? "border-primary text-primary"
+                        : "text-muted-foreground"
+                    }`}
+                  >
+                    Approvals
+                  </TabsTrigger>
+                </TabsList>
+
+                <TabsContent value="content" className="pt-6">
+                  <div className="prose prose-sm md:prose-base lg:prose-lg max-w-none">
+                    <div
+                      className="policy-content"
+                      dangerouslySetInnerHTML={{
+                        __html: policy.content || "",
+                      }}
+                    />
+                  </div>
+                </TabsContent>
+
+                <TabsContent value="history" className="pt-6">
+                  <div className="text-center py-12">
+                    <p className="text-muted-foreground">
+                      Version history will be available soon.
+                    </p>
+                  </div>
+                </TabsContent>
+
+                <TabsContent value="approvals" className="pt-6">
+                  <div className="text-center py-12">
+                    <p className="text-muted-foreground">
+                      Approval workflow will be available soon.
+                    </p>
+                  </div>
+                </TabsContent>
+              </Tabs>
+            </CardContent>
+          </Card>
+        </div>
+
+        <div className="lg:col-span-1">
+          <Card className="border shadow-sm mb-6">
+            <CardContent className="p-6">
+              <h2 className="text-xl font-semibold mb-6">Policy Details</h2>
+
+              <div className="space-y-6">
+                <div>
+                  <div className="flex items-center gap-2 text-muted-foreground mb-1">
+                    <FileText className="h-4 w-4" />
+                    <span className="text-sm">Last Updated</span>
+                  </div>
+                  <p className="font-medium">{formatDate(policy.updatedAt)}</p>
+                </div>
+
+                <div>
+                  <div className="flex items-center gap-2 text-muted-foreground mb-1">
+                    <FileText className="h-4 w-4" />
+                    <span className="text-sm">Review Due</span>
+                  </div>
+                  <p className="font-medium">
+                    {policy.reviewDate
+                      ? formatDate(policy.reviewDate)
+                      : "Not set"}
+                  </p>
+                </div>
+
+                <div>
+                  <div className="flex items-center gap-2 text-muted-foreground mb-1">
+                    <User className="h-4 w-4" />
+                    <span className="text-sm">Owner</span>
+                  </div>
                   <Link
-                    to={`/organizations/${organizationId}/people/${policy.owner.id}`}
+                    to={`/organizations/${organizationId}/people/${policy.owner?.id}`}
                     className="hover:underline"
                   >
-                    {policy.owner.fullName}
+                    <p className="font-medium">
+                      {policy.owner ? policy.owner.fullName : "Not assigned"}
+                    </p>
                   </Link>
                 </div>
-              )}
-              {policy.reviewDate && (
-                <div className="flex items-center gap-1">
-                  <Calendar className="h-3 w-3" />
-                  <span>Review: {formatDate(policy.reviewDate)}</span>
-                </div>
-              )}
-            </div>
-          }
-          actions={
-            <div className="flex gap-2">
-              <Button variant="outline" size="sm" asChild>
-                <Link
-                  to={`/organizations/${organizationId}/policies/${policy.id}/update`}
-                >
-                  <Edit className="h-4 w-4 mr-2" />
-                  Edit
-                </Link>
-              </Button>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Button asChild className="w-full">
+            <Link
+              to={`/organizations/${organizationId}/policies/${policy.id}/update`}
+            >
+              <Edit className="mr-2 h-4 w-4" />
+              Edit Policy
+            </Link>
+          </Button>
+
+          <Card className="border shadow-sm mt-6 bg-red-50">
+            <CardContent className="p-6">
+              <h3 className="text-red-500 font-semibold mb-3">Danger Zone</h3>
+              <p className="text-sm text-muted-foreground mb-4">
+                Permanently delete this policy and all of its data. This action
+                cannot be undone.
+              </p>
               <Button
-                variant="outline"
-                size="sm"
-                onClick={() => {
-                  // Logic to download policy content as PDF or text
-                  const element = document.createElement("a");
-                  const file = new Blob([policy.content || ""], {
-                    type: "text/plain",
-                  });
-                  element.href = URL.createObjectURL(file);
-                  element.download = `${policy.name}.txt`;
-                  document.body.appendChild(element);
-                  element.click();
-                  document.body.removeChild(element);
-                }}
+                variant="destructive"
+                className="w-full"
+                onClick={handleDeletePolicy}
+                disabled={isDeleting}
               >
-                <Download className="h-4 w-4 mr-2" />
-                Download
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  className="mr-2"
+                >
+                  <path d="M3 6h18"></path>
+                  <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
+                  <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
+                </svg>
+                {isDeleting ? "Deleting..." : "Delete Policy"}
               </Button>
-            </div>
-          }
-        />
-
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-          <div className="lg:col-span-2">
-            <Card className="border shadow-sm">
-              <CardContent className="p-6">
-                <div className="flex items-center gap-3 mb-4">
-                  <div className="p-2 rounded-md bg-slate-100">
-                    <Shield className="h-6 w-6" />
-                  </div>
-                  <div className="flex gap-2">
-                    {policy.status && (
-                      <Badge
-                        className={`px-3 py-1 rounded-md font-medium ${
-                          policy.status === "ACTIVE"
-                            ? "bg-green-100 text-green-700 hover:bg-green-200"
-                            : policy.status === "DRAFT"
-                            ? "bg-yellow-100 text-yellow-700 hover:bg-yellow-200"
-                            : "bg-gray-100 text-gray-700 hover:bg-gray-200"
-                        }`}
-                      >
-                        {policy.status === "ACTIVE"
-                          ? "Active"
-                          : policy.status === "DRAFT"
-                          ? "Draft"
-                          : policy.status}
-                      </Badge>
-                    )}
-                  </div>
-                </div>
-
-                <h1 className="text-3xl font-bold mb-3">{policy.name}</h1>
-
-                <p className="text-muted-foreground mb-6">
-                  {getDescription(policy.content)}
-                </p>
-
-                <Tabs
-                  defaultValue="content"
-                  value={activeTab}
-                  onValueChange={setActiveTab}
-                  className="mb-6"
-                >
-                  <TabsList className="border-b w-full rounded-none bg-transparent p-0 h-auto">
-                    <TabsTrigger
-                      value="content"
-                      className={`rounded-none border-b-2 border-transparent px-4 py-2 font-medium ${
-                        activeTab === "content"
-                          ? "border-primary text-primary"
-                          : "text-muted-foreground"
-                      }`}
-                    >
-                      Policy Content
-                    </TabsTrigger>
-                    <TabsTrigger
-                      value="history"
-                      className={`rounded-none border-b-2 border-transparent px-4 py-2 font-medium ${
-                        activeTab === "history"
-                          ? "border-primary text-primary"
-                          : "text-muted-foreground"
-                      }`}
-                    >
-                      Version History
-                    </TabsTrigger>
-                    <TabsTrigger
-                      value="approvals"
-                      className={`rounded-none border-b-2 border-transparent px-4 py-2 font-medium ${
-                        activeTab === "approvals"
-                          ? "border-primary text-primary"
-                          : "text-muted-foreground"
-                      }`}
-                    >
-                      Approvals
-                    </TabsTrigger>
-                  </TabsList>
-
-                  <TabsContent value="content" className="pt-6">
-                    <div className="prose prose-sm md:prose-base lg:prose-lg max-w-none">
-                      <div
-                        className="policy-content"
-                        dangerouslySetInnerHTML={{
-                          __html: policy.content || "",
-                        }}
-                      />
-                    </div>
-                  </TabsContent>
-
-                  <TabsContent value="history" className="pt-6">
-                    <div className="text-center py-12">
-                      <p className="text-muted-foreground">
-                        Version history will be available soon.
-                      </p>
-                    </div>
-                  </TabsContent>
-
-                  <TabsContent value="approvals" className="pt-6">
-                    <div className="text-center py-12">
-                      <p className="text-muted-foreground">
-                        Approval workflow will be available soon.
-                      </p>
-                    </div>
-                  </TabsContent>
-                </Tabs>
-              </CardContent>
-            </Card>
-          </div>
-
-          <div className="lg:col-span-1">
-            <Card className="border shadow-sm mb-6">
-              <CardContent className="p-6">
-                <h2 className="text-xl font-semibold mb-6">Policy Details</h2>
-
-                <div className="space-y-6">
-                  <div>
-                    <div className="flex items-center gap-2 text-muted-foreground mb-1">
-                      <FileText className="h-4 w-4" />
-                      <span className="text-sm">Last Updated</span>
-                    </div>
-                    <p className="font-medium">
-                      {formatDate(policy.updatedAt)}
-                    </p>
-                  </div>
-
-                  <div>
-                    <div className="flex items-center gap-2 text-muted-foreground mb-1">
-                      <FileText className="h-4 w-4" />
-                      <span className="text-sm">Review Due</span>
-                    </div>
-                    <p className="font-medium">
-                      {policy.reviewDate
-                        ? formatDate(policy.reviewDate)
-                        : "Not set"}
-                    </p>
-                  </div>
-
-                  <div>
-                    <div className="flex items-center gap-2 text-muted-foreground mb-1">
-                      <User className="h-4 w-4" />
-                      <span className="text-sm">Owner</span>
-                    </div>
-                    <Link
-                      to={`/organizations/${organizationId}/people/${policy.owner?.id}`}
-                      className="hover:underline"
-                    >
-                      <p className="font-medium">
-                        {policy.owner ? policy.owner.fullName : "Not assigned"}
-                      </p>
-                    </Link>
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-
-            <Button asChild className="w-full">
-              <Link
-                to={`/organizations/${organizationId}/policies/${policy.id}/update`}
-              >
-                <Edit className="mr-2 h-4 w-4" />
-                Edit Policy
-              </Link>
-            </Button>
-
-            <Card className="border shadow-sm mt-6 bg-red-50">
-              <CardContent className="p-6">
-                <h3 className="text-red-500 font-semibold mb-3">Danger Zone</h3>
-                <p className="text-sm text-muted-foreground mb-4">
-                  Permanently delete this policy and all of its data. This
-                  action cannot be undone.
-                </p>
-                <Button
-                  variant="destructive"
-                  className="w-full"
-                  onClick={handleDeletePolicy}
-                  disabled={isDeleting}
-                >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="16"
-                    height="16"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    className="mr-2"
-                  >
-                    <path d="M3 6h18"></path>
-                    <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
-                    <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
-                  </svg>
-                  {isDeleting ? "Deleting..." : "Delete Policy"}
-                </Button>
-              </CardContent>
-            </Card>
-          </div>
+            </CardContent>
+          </Card>
         </div>
       </div>
-    </>
+    </PageTemplate>
   );
 }
 
-function PolicyOverviewPageFallback() {
+export function PolicyOverviewPageSkeleton() {
   return (
-    <div className="container mx-auto py-6">
+    <PageTemplateSkeleton
+      withDescription
+      actions={
+        <div className="flex gap-2 w-1/3">
+          <div className="bg-muted animate-pulse h-8 w-1/2 rounded-lg" />
+          <div className="bg-muted animate-pulse h-8 w-1/2 rounded-lg" />
+        </div>
+      }
+    >
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
         <div className="lg:col-span-2">
           <Card className="border shadow-sm">
@@ -505,7 +500,7 @@ function PolicyOverviewPageFallback() {
           </Card>
         </div>
       </div>
-    </div>
+    </PageTemplateSkeleton>
   );
 }
 
@@ -520,8 +515,12 @@ export default function PolicyOverviewPage() {
     loadQuery({ policyId: policyId! });
   }, [loadQuery, policyId]);
 
+  if (!queryRef) {
+    return <PolicyOverviewPageSkeleton />;
+  }
+
   return (
-    <Suspense fallback={<PolicyOverviewPageFallback />}>
+    <Suspense fallback={<PolicyOverviewPageSkeleton />}>
       {queryRef && <PolicyOverviewPageContent queryRef={queryRef} />}
     </Suspense>
   );
diff --git a/apps/console/src/pages/SettingsPage.tsx b/apps/console/src/pages/SettingsPage.tsx
index 4f630a442..ddbd5672f 100644
--- a/apps/console/src/pages/SettingsPage.tsx
+++ b/apps/console/src/pages/SettingsPage.tsx
@@ -14,7 +14,6 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Helmet } from "react-helmet-async";
 import { Suspense, useEffect, useState, useRef } from "react";
 import {
   graphql,
@@ -39,7 +38,7 @@ import type { SettingsPageQuery as SettingsPageQueryType } from "./__generated__
 import type { SettingsPageUpdateOrganizationMutation as SettingsPageUpdateOrganizationMutationType } from "./__generated__/SettingsPageUpdateOrganizationMutation.graphql";
 import type { SettingsPageInviteUserMutation as SettingsPageInviteUserMutationType } from "./__generated__/SettingsPageInviteUserMutation.graphql";
 import type { SettingsPageRemoveUserMutation as SettingsPageRemoveUserMutationType } from "./__generated__/SettingsPageRemoveUserMutation.graphql";
-import { PageHeader } from "@/components/PageHeader";
+import { PageTemplate, PageTemplateSkeleton } from "@/components/PageTemplate";
 
 const settingsPageQuery = graphql`
   query SettingsPageQuery($organizationID: ID!) {
@@ -290,14 +289,11 @@ function SettingsPageContent({
   };
 
   return (
-    <>
-      <div className="container space-y-6">
-        <PageHeader
-          className="mb-17"
-          title="Settings"
-          description="Manage your details and personal preferences here"
-        />
-
+    <PageTemplate
+      title="Settings"
+      description="Manage your details and personal preferences here"
+    >
+      <div className="space-y-6">
         <Card>
           <CardHeader>
             <CardTitle>Organization information</CardTitle>
@@ -519,23 +515,28 @@ function SettingsPageContent({
           </DialogFooter>
         </DialogContent>
       </Dialog>
-    </>
+    </PageTemplate>
   );
 }
 
-function SettingsPageFallback() {
+export function SettingsPageSkeleton() {
   return (
-    <div className="p-6 space-y-6">
-      <div className="space-y-1">
-        <div className="h-8 w-48 bg-muted animate-pulse rounded" />
-        <div className="h-4 w-96 bg-muted animate-pulse rounded" />
+    <PageTemplateSkeleton
+      title="Settings"
+      description="Manage your details and personal preferences here"
+    >
+      <div className="space-y-6">
+        <div className="space-y-1">
+          <div className="h-8 w-48 bg-muted animate-pulse rounded" />
+          <div className="h-4 w-96 bg-muted animate-pulse rounded" />
+        </div>
+        <div className="space-y-2">
+          {[1, 2].map((i) => (
+            <div key={i} className="h-64 bg-muted animate-pulse rounded-lg" />
+          ))}
+        </div>
       </div>
-      <div className="space-y-2">
-        {[1, 2].map((i) => (
-          <div key={i} className="h-64 bg-muted animate-pulse rounded-lg" />
-        ))}
-      </div>
-    </div>
+    </PageTemplateSkeleton>
   );
 }
 
@@ -550,17 +551,12 @@ export default function SettingsPage() {
   }, [loadQuery, organizationId]);
 
   if (!queryRef) {
-    return <SettingsPageFallback />;
+    return <SettingsPageSkeleton />;
   }
 
   return (
-    <>
-      <Helmet>
-        <title>Settings - Probo Console</title>
-      </Helmet>
-      <Suspense fallback={<SettingsPageFallback />}>
-        <SettingsPageContent queryRef={queryRef} />
-      </Suspense>
-    </>
+    <Suspense fallback={<SettingsPageSkeleton />}>
+      <SettingsPageContent queryRef={queryRef} />
+    </Suspense>
   );
 }
diff --git a/apps/console/src/pages/UpdateControlPage.tsx b/apps/console/src/pages/UpdateControlPage.tsx
index b5bd638f5..08df64d5e 100644
--- a/apps/console/src/pages/UpdateControlPage.tsx
+++ b/apps/console/src/pages/UpdateControlPage.tsx
@@ -7,7 +7,6 @@ import {
   PreloadedQuery,
   useQueryLoader,
 } from "react-relay";
-import { Helmet } from "react-helmet-async";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
@@ -28,7 +27,7 @@ import type {
   ControlState,
   ControlImportance,
 } from "./__generated__/UpdateControlPageUpdateControlMutation.graphql";
-import { PageHeader } from "@/components/PageHeader";
+import { PageTemplate, PageTemplateSkeleton } from "@/components/PageTemplate";
 
 const updateControlMutation = graphql`
   mutation UpdateControlPageUpdateControlMutation($input: UpdateControlInput!) {
@@ -250,100 +249,97 @@ function UpdateControlPageContent({
   };
 
   return (
-    <>
-      <Helmet>
-        <title>Update Control - Probo</title>
-      </Helmet>
-      <div className="container">
-        <PageHeader
-          className="mb-17"
-          title="Update Control"
-          description="Update the control details"
-        />
+    <PageTemplate
+      title="Update Control"
+      description="Update the control details"
+    >
+      <Card className="max-w-2xl">
+        <form onSubmit={handleSubmit} className="p-6 space-y-6">
+          <EditableField
+            label="Name"
+            value={formData.name}
+            onChange={(value) => handleFieldChange("name", value)}
+            required
+          />
 
-        <Card className="max-w-2xl">
-          <form onSubmit={handleSubmit} className="p-6 space-y-6">
-            <EditableField
-              label="Name"
-              value={formData.name}
-              onChange={(value) => handleFieldChange("name", value)}
-              required
-            />
+          <EditableField
+            label="Description"
+            value={formData.description}
+            onChange={(value) => handleFieldChange("description", value)}
+            required
+            multiline
+            helpText="Provide a detailed description of the control"
+          />
 
-            <EditableField
-              label="Description"
-              value={formData.description}
-              onChange={(value) => handleFieldChange("description", value)}
-              required
-              multiline
-              helpText="Provide a detailed description of the control"
-            />
+          <EditableField
+            label="Category"
+            value={formData.category}
+            onChange={(value) => handleFieldChange("category", value)}
+            required
+          />
 
-            <EditableField
-              label="Category"
-              value={formData.category}
-              onChange={(value) => handleFieldChange("category", value)}
-              required
-            />
+          <div className="space-y-2">
+            <Label htmlFor="importance" className="text-sm font-medium">
+              Importance
+            </Label>
+            <Select
+              value={formData.importance}
+              onValueChange={(value) => handleFieldChange("importance", value)}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="Select importance" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="MANDATORY">Mandatory</SelectItem>
+                <SelectItem value="PREFERRED">Preferred</SelectItem>
+                <SelectItem value="ADVANCED">Advanced</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
 
-            <div className="space-y-2">
-              <Label htmlFor="importance" className="text-sm font-medium">
-                Importance
-              </Label>
-              <Select
-                value={formData.importance}
-                onValueChange={(value) =>
-                  handleFieldChange("importance", value)
-                }
-              >
-                <SelectTrigger>
-                  <SelectValue placeholder="Select importance" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="MANDATORY">Mandatory</SelectItem>
-                  <SelectItem value="PREFERRED">Preferred</SelectItem>
-                  <SelectItem value="ADVANCED">Advanced</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
+          <div className="space-y-2">
+            <Label htmlFor="state" className="text-sm font-medium">
+              State
+            </Label>
+            <Select
+              value={formData.state}
+              onValueChange={(value) => handleFieldChange("state", value)}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="Select state" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="NOT_STARTED">Not Started</SelectItem>
+                <SelectItem value="IN_PROGRESS">In Progress</SelectItem>
+                <SelectItem value="NOT_APPLICABLE">Not Applicable</SelectItem>
+                <SelectItem value="IMPLEMENTED">Implemented</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
 
-            <div className="space-y-2">
-              <Label htmlFor="state" className="text-sm font-medium">
-                State
-              </Label>
-              <Select
-                value={formData.state}
-                onValueChange={(value) => handleFieldChange("state", value)}
-              >
-                <SelectTrigger>
-                  <SelectValue placeholder="Select state" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="NOT_STARTED">Not Started</SelectItem>
-                  <SelectItem value="IN_PROGRESS">In Progress</SelectItem>
-                  <SelectItem value="NOT_APPLICABLE">Not Applicable</SelectItem>
-                  <SelectItem value="IMPLEMENTED">Implemented</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-
-            <div className="flex justify-end gap-3">
-              <Button type="button" variant="outline" onClick={handleCancel}>
-                Cancel
-              </Button>
-              <Button type="submit" disabled={isInFlight || !hasChanges}>
-                {isInFlight ? "Updating..." : "Update Control"}
-              </Button>
-            </div>
-          </form>
-        </Card>
-      </div>
-    </>
+          <div className="flex justify-end gap-3">
+            <Button type="button" variant="outline" onClick={handleCancel}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={isInFlight || !hasChanges}>
+              {isInFlight ? "Updating..." : "Update Control"}
+            </Button>
+          </div>
+        </form>
+      </Card>
+    </PageTemplate>
   );
 }
 
-function UpdateControlPageFallback() {
-  return <div>Loading...</div>;
+export function UpdateControlPageSkeleton() {
+  return (
+    <PageTemplateSkeleton
+      title="Update Control"
+      description="Update the control details"
+    >
+      <div className="max-w-2xl aspect-square bg-muted rounded-xl animate-pulse" />
+    </PageTemplateSkeleton>
+  );
 }
 
 export default function UpdateControlPage() {
@@ -358,11 +354,11 @@ export default function UpdateControlPage() {
   }, [controlId, loadQuery]);
 
   if (!queryRef) {
-    return <UpdateControlPageFallback />;
+    return <UpdateControlPageSkeleton />;
   }
 
   return (
-    <Suspense fallback={<UpdateControlPageFallback />}>
+    <Suspense fallback={<UpdateControlPageSkeleton />}>
       <UpdateControlPageContent queryRef={queryRef} />
     </Suspense>
   );
diff --git a/apps/console/src/pages/UpdateFrameworkPage.tsx b/apps/console/src/pages/UpdateFrameworkPage.tsx
index b9312e237..c8ae89536 100644
--- a/apps/console/src/pages/UpdateFrameworkPage.tsx
+++ b/apps/console/src/pages/UpdateFrameworkPage.tsx
@@ -7,7 +7,6 @@ import {
   PreloadedQuery,
   useQueryLoader,
 } from "react-relay";
-import { Helmet } from "react-helmet-async";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
@@ -18,7 +17,7 @@ import { HelpCircle } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { UpdateFrameworkPageUpdateFrameworkMutation } from "./__generated__/UpdateFrameworkPageUpdateFrameworkMutation.graphql";
 import { UpdateFrameworkPageQuery as UpdateFrameworkPageQueryType } from "./__generated__/UpdateFrameworkPageQuery.graphql";
-import { PageHeader } from "@/components/PageHeader";
+import { PageTemplate, PageTemplateSkeleton } from "@/components/PageTemplate";
 
 const updateFrameworkMutation = graphql`
   mutation UpdateFrameworkPageUpdateFrameworkMutation(
@@ -199,52 +198,51 @@ function UpdateFrameworkPageContent({
   };
 
   return (
-    <>
-      <Helmet>
-        <title>Update Framework - Probo</title>
-      </Helmet>
-      <div className="container">
-        <PageHeader
-          className="mb-17"
-          title="Update Framework"
-          description="Update the framework details"
-        />
+    <PageTemplate
+      title="Update Framework"
+      description="Update the framework details"
+    >
+      <Card className="max-w-2xl">
+        <form onSubmit={handleSubmit} className="p-6 space-y-6">
+          <EditableField
+            label="Name"
+            value={formData.name}
+            onChange={(value) => handleFieldChange("name", value)}
+            required
+          />
 
-        <Card className="max-w-2xl">
-          <form onSubmit={handleSubmit} className="p-6 space-y-6">
-            <EditableField
-              label="Name"
-              value={formData.name}
-              onChange={(value) => handleFieldChange("name", value)}
-              required
-            />
+          <EditableField
+            label="Description"
+            value={formData.description}
+            onChange={(value) => handleFieldChange("description", value)}
+            required
+            multiline
+            helpText="Provide a detailed description of the framework"
+          />
 
-            <EditableField
-              label="Description"
-              value={formData.description}
-              onChange={(value) => handleFieldChange("description", value)}
-              required
-              multiline
-              helpText="Provide a detailed description of the framework"
-            />
-
-            <div className="flex justify-end gap-3">
-              <Button type="button" variant="outline" onClick={handleCancel}>
-                Cancel
-              </Button>
-              <Button type="submit" disabled={isInFlight}>
-                {isInFlight ? "Updating..." : "Update Framework"}
-              </Button>
-            </div>
-          </form>
-        </Card>
-      </div>
-    </>
+          <div className="flex justify-end gap-3">
+            <Button type="button" variant="outline" onClick={handleCancel}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={isInFlight}>
+              {isInFlight ? "Updating..." : "Update Framework"}
+            </Button>
+          </div>
+        </form>
+      </Card>
+    </PageTemplate>
   );
 }
 
-function UpdateFrameworkPageFallback() {
-  return <div>Loading...</div>;
+export function UpdateFrameworkPageSkeleton() {
+  return (
+    <PageTemplateSkeleton
+      title="Update Framework"
+      description="Update the framework details"
+    >
+      <div className="max-w-2xl aspect-square bg-muted rounded-xl animate-pulse" />
+    </PageTemplateSkeleton>
+  );
 }
 
 export default function UpdateFrameworkPage() {
@@ -259,11 +257,11 @@ export default function UpdateFrameworkPage() {
   }, [frameworkId, loadQuery]);
 
   if (!queryRef) {
-    return <UpdateFrameworkPageFallback />;
+    return <UpdateFrameworkPageSkeleton />;
   }
 
   return (
-    <Suspense fallback={<UpdateFrameworkPageFallback />}>
+    <Suspense fallback={<UpdateFrameworkPageSkeleton />}>
       <UpdateFrameworkPageContent queryRef={queryRef} />
     </Suspense>
   );
diff --git a/apps/console/src/pages/UpdatePolicyPage.tsx b/apps/console/src/pages/UpdatePolicyPage.tsx
index 69189f9b2..177d447d0 100644
--- a/apps/console/src/pages/UpdatePolicyPage.tsx
+++ b/apps/console/src/pages/UpdatePolicyPage.tsx
@@ -7,7 +7,6 @@ import {
   useQueryLoader,
   PreloadedQuery,
 } from "react-relay";
-import { Helmet } from "react-helmet-async";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -20,7 +19,7 @@ import PolicyEditor from "@/components/PolicyEditor";
 import PeopleSelector from "@/components/PeopleSelector";
 import type { UpdatePolicyPageQuery as UpdatePolicyPageQueryType } from "./__generated__/UpdatePolicyPageQuery.graphql";
 import type { UpdatePolicyPageMutation as UpdatePolicyPageMutationType } from "./__generated__/UpdatePolicyPageMutation.graphql";
-import { PageHeader } from "@/components/PageHeader";
+import { PageTemplate, PageTemplateSkeleton } from "@/components/PageTemplate";
 
 const UpdatePolicyPageQuery = graphql`
   query UpdatePolicyPageQuery($policyId: ID!, $organizationId: ID!) {
@@ -148,127 +147,116 @@ function UpdatePolicyPageContent({
   };
 
   return (
-    <>
-      <Helmet>
-        <title>Update Policy - Probo Console</title>
-      </Helmet>
-      <div className="container">
-        <PageHeader
-          className="mb-17"
-          title="Update Policy"
-          description="Update an existing policy"
-        />
+    <PageTemplate title="Update Policy" description="Update an existing policy">
+      <form onSubmit={handleSubmit}>
+        <div className="grid gap-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>Policy Information</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="name">Policy Name</Label>
+                <Input
+                  id="name"
+                  placeholder="Enter policy name"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  required
+                />
+              </div>
 
-        <form onSubmit={handleSubmit}>
-          <div className="grid gap-6">
-            <Card>
-              <CardHeader>
-                <CardTitle>Policy Information</CardTitle>
-              </CardHeader>
-              <CardContent className="space-y-4">
-                <div className="space-y-2">
-                  <Label htmlFor="name">Policy Name</Label>
-                  <Input
-                    id="name"
-                    placeholder="Enter policy name"
-                    value={name}
-                    onChange={(e) => setName(e.target.value)}
-                    required
+              <div className="space-y-2">
+                <Label htmlFor="content">Policy Content</Label>
+                <div className="min-h-[300px]">
+                  <PolicyEditor
+                    initialContent={content}
+                    onChange={(html) => setContent(html)}
                   />
                 </div>
+              </div>
 
-                <div className="space-y-2">
-                  <Label htmlFor="content">Policy Content</Label>
-                  <div className="min-h-[300px]">
-                    <PolicyEditor
-                      initialContent={content}
-                      onChange={(html) => setContent(html)}
-                    />
+              <div className="space-y-2">
+                <Label>Status</Label>
+                <RadioGroup
+                  value={status}
+                  onValueChange={(value) =>
+                    setStatus(value as "DRAFT" | "ACTIVE")
+                  }
+                  className="flex space-x-4"
+                >
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem value="DRAFT" id="draft" />
+                    <Label htmlFor="draft" className="cursor-pointer">
+                      Draft
+                    </Label>
                   </div>
-                </div>
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem value="ACTIVE" id="active" />
+                    <Label htmlFor="active" className="cursor-pointer">
+                      Active
+                    </Label>
+                  </div>
+                </RadioGroup>
+              </div>
 
-                <div className="space-y-2">
-                  <Label>Status</Label>
-                  <RadioGroup
-                    value={status}
-                    onValueChange={(value) =>
-                      setStatus(value as "DRAFT" | "ACTIVE")
-                    }
-                    className="flex space-x-4"
-                  >
-                    <div className="flex items-center space-x-2">
-                      <RadioGroupItem value="DRAFT" id="draft" />
-                      <Label htmlFor="draft" className="cursor-pointer">
-                        Draft
-                      </Label>
-                    </div>
-                    <div className="flex items-center space-x-2">
-                      <RadioGroupItem value="ACTIVE" id="active" />
-                      <Label htmlFor="active" className="cursor-pointer">
-                        Active
-                      </Label>
-                    </div>
-                  </RadioGroup>
-                </div>
+              <div className="space-y-2">
+                <Label htmlFor="owner" className="flex items-center gap-2">
+                  <User className="h-4 w-4" />
+                  Policy Owner
+                </Label>
+                <PeopleSelector
+                  organizationRef={data.organization}
+                  selectedPersonId={ownerId}
+                  onSelect={setOwnerId}
+                  placeholder="Select policy owner"
+                  required
+                />
+              </div>
 
-                <div className="space-y-2">
-                  <Label htmlFor="owner" className="flex items-center gap-2">
-                    <User className="h-4 w-4" />
-                    Policy Owner
-                  </Label>
-                  <PeopleSelector
-                    organizationRef={data.organization}
-                    selectedPersonId={ownerId}
-                    onSelect={setOwnerId}
-                    placeholder="Select policy owner"
-                    required
-                  />
-                </div>
+              <div className="space-y-2">
+                <Label htmlFor="reviewDate" className="flex items-center gap-2">
+                  <Calendar className="h-4 w-4" />
+                  Review Date
+                </Label>
+                <Input
+                  id="reviewDate"
+                  type="date"
+                  value={reviewDate}
+                  onChange={(e) => setReviewDate(e.target.value)}
+                />
+              </div>
+            </CardContent>
+          </Card>
 
-                <div className="space-y-2">
-                  <Label
-                    htmlFor="reviewDate"
-                    className="flex items-center gap-2"
-                  >
-                    <Calendar className="h-4 w-4" />
-                    Review Date
-                  </Label>
-                  <Input
-                    id="reviewDate"
-                    type="date"
-                    value={reviewDate}
-                    onChange={(e) => setReviewDate(e.target.value)}
-                  />
-                </div>
-              </CardContent>
-            </Card>
-
-            <div className="flex justify-end gap-4">
-              <Button
-                type="button"
-                variant="outline"
-                onClick={() =>
-                  navigate(
-                    `/organizations/${organizationId}/policies/${policyId}`
-                  )
-                }
-              >
-                Cancel
-              </Button>
-              <Button type="submit" disabled={isSubmitting}>
-                {isSubmitting ? "Updating..." : "Update Policy"}
-              </Button>
-            </div>
+          <div className="flex justify-end gap-4">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() =>
+                navigate(
+                  `/organizations/${organizationId}/policies/${policyId}`
+                )
+              }
+            >
+              Cancel
+            </Button>
+            <Button type="submit" disabled={isSubmitting}>
+              {isSubmitting ? "Updating..." : "Update Policy"}
+            </Button>
           </div>
-        </form>
-      </div>
-    </>
+        </div>
+      </form>
+    </PageTemplate>
   );
 }
 
-function UpdatePolicyPageFallback() {
+export function UpdatePolicyPageSkeleton() {
   return (
-    <div className="container mx-auto py-6">
+    <PageTemplateSkeleton
+      title="Update Policy"
+      description="Update an existing policy"
+    >
       <div className="flex items-center mb-6">
         <div className="mr-4">
           <div className="h-12 w-12 bg-muted animate-pulse rounded-lg" />
@@ -279,7 +267,7 @@ function UpdatePolicyPageFallback() {
         </div>
       </div>
       <div className="bg-muted animate-pulse rounded-lg h-[600px]" />
-    </div>
+    </PageTemplateSkeleton>
   );
 }
 
@@ -295,8 +283,12 @@ export default function UpdatePolicyPage() {
     }
   }, [organizationId, policyId, loadQuery]);
 
+  if (!queryRef) {
+    return <UpdatePolicyPageSkeleton />;
+  }
+
   return (
-    <Suspense fallback={<UpdatePolicyPageFallback />}>
+    <Suspense fallback={<UpdatePolicyPageSkeleton />}>
       {queryRef && <UpdatePolicyPageContent queryRef={queryRef} />}
     </Suspense>
   );
diff --git a/apps/console/src/pages/VendorListPage.tsx b/apps/console/src/pages/VendorListPage.tsx
index d86398062..f08b590f6 100644
--- a/apps/console/src/pages/VendorListPage.tsx
+++ b/apps/console/src/pages/VendorListPage.tsx
@@ -16,13 +16,12 @@ import { Button } from "@/components/ui/button";
 import { Link } from "react-router";
 import Fuse from "fuse.js";
 import type { VendorListPageQuery as VendorListPageQueryType } from "./__generated__/VendorListPageQuery.graphql";
-import { Helmet } from "react-helmet-async";
 import { VendorListPageCreateVendorMutation } from "./__generated__/VendorListPageCreateVendorMutation.graphql";
 import { VendorListPageDeleteVendorMutation } from "./__generated__/VendorListPageDeleteVendorMutation.graphql";
 import { VendorListPagePaginationQuery } from "./__generated__/VendorListPagePaginationQuery.graphql";
 import { VendorListPage_vendors$key } from "./__generated__/VendorListPage_vendors.graphql";
 import { useToast } from "@/hooks/use-toast";
-import { PageHeader } from "@/components/PageHeader";
+import { PageTemplate, PageTemplateSkeleton } from "@/components/PageTemplate";
 
 const ITEMS_PER_PAGE = 25;
 
@@ -240,97 +239,52 @@ function VendorListContent({
   });
 
   return (
-    <>
-      <Helmet>
-        <title>Vendors - Probo</title>
-      </Helmet>
-      <div className="space-y-6">
-        <PageHeader
-          className="mb-17"
-          title="Vendors"
-          description="Vendors are third-party services that your company uses. Add them to
-            keep track of their risk and compliance status."
-        />
+    <PageTemplate
+      title="Vendors"
+      description="Vendors are third-party services that your company uses. Add them to
+      keep track of their risk and compliance status."
+    >
+      <div className="rounded-xl border bg-card p-4">
+        <div className="flex items-center gap-2 mb-4">
+          <Store className="h-5 w-5" />
+          <h3 className="font-medium">Add a vendor</h3>
+        </div>
+        <div className="flex gap-2 relative">
+          <Input
+            type="text"
+            placeholder="Type vendor's name"
+            value={searchTerm}
+            style={{ borderRadius: "0.3rem" }}
+            onChange={(e) => {
+              const value = e.target.value;
+              setSearchTerm(value);
+              if (value.trim() === "") {
+                setFilteredVendors([]);
+              } else {
+                const results = fuse.search(value).map((result) => result.item);
+                setFilteredVendors(results);
+              }
+            }}
+          />
 
-        <div className="rounded-xl border bg-card p-4">
-          <div className="flex items-center gap-2 mb-4">
-            <Store className="h-5 w-5" />
-            <h3 className="font-medium">Add a vendor</h3>
-          </div>
-          <div className="flex gap-2 relative">
-            <Input
-              type="text"
-              placeholder="Type vendor's name"
-              value={searchTerm}
-              style={{ borderRadius: "0.3rem" }}
-              onChange={(e) => {
-                const value = e.target.value;
-                setSearchTerm(value);
-                if (value.trim() === "") {
-                  setFilteredVendors([]);
-                } else {
-                  const results = fuse
-                    .search(value)
-                    .map((result) => result.item);
-                  setFilteredVendors(results);
-                }
-              }}
-            />
-
-            {searchTerm.trim() !== "" && (
-              <>
-                {filteredVendors.length > 0 ? (
-                  <div
-                    style={{ borderRadius: "0.3rem" }}
-                    className="absolute top-full left-0 mt-1 w-[calc(100%-100px)] max-h-48 overflow-y-auto border bg-popover shadow-md z-10"
-                  >
-                    {filteredVendors.map((vendor: VendorItem) => (
-                      <button
-                        key={vendor.id}
-                        className="w-full px-3 py-2 text-left hover:bg-accent"
-                        onClick={() => {
-                          createVendor({
-                            variables: {
-                              connections: [vendorsConnection.vendors.__id],
-                              input: {
-                                organizationId: data.organization.id,
-                                name: vendor.name,
-                                description: "",
-                                serviceStartAt: new Date().toISOString(),
-                                serviceCriticality: "LOW",
-                                riskTier: "GENERAL",
-                              },
-                            },
-                            onCompleted() {
-                              setSearchTerm("");
-                              setFilteredVendors([]);
-                              toast({
-                                title: "Vendor added",
-                                description:
-                                  "The vendor has been added successfully",
-                              });
-                            },
-                          });
-                        }}
-                      >
-                        {vendor.name}
-                      </button>
-                    ))}
-                  </div>
-                ) : (
-                  <div
-                    style={{ borderRadius: "0.3rem" }}
-                    className="absolute top-full left-0 mt-1 w-[calc(100%-100px)] border bg-popover shadow-md z-10"
-                  >
+          {searchTerm.trim() !== "" && (
+            <>
+              {filteredVendors.length > 0 ? (
+                <div
+                  style={{ borderRadius: "0.3rem" }}
+                  className="absolute top-full left-0 mt-1 w-[calc(100%-100px)] max-h-48 overflow-y-auto border bg-popover shadow-md z-10"
+                >
+                  {filteredVendors.map((vendor: VendorItem) => (
                     <button
-                      className="w-full px-3 py-2 text-left hover:bg-accent flex items-center gap-2"
+                      key={vendor.id}
+                      className="w-full px-3 py-2 text-left hover:bg-accent"
                       onClick={() => {
                         createVendor({
                           variables: {
                             connections: [vendorsConnection.vendors.__id],
                             input: {
                               organizationId: data.organization.id,
-                              name: searchTerm.trim(),
+                              name: vendor.name,
                               description: "",
                               serviceStartAt: new Date().toISOString(),
                               serviceCriticality: "LOW",
@@ -341,135 +295,174 @@ function VendorListContent({
                             setSearchTerm("");
                             setFilteredVendors([]);
                             toast({
-                              title: "Vendor created",
+                              title: "Vendor added",
                               description:
-                                "The new vendor has been created successfully",
+                                "The vendor has been added successfully",
                             });
                           },
                         });
                       }}
                     >
-                      <span className="font-medium">Create new vendor:</span>{" "}
-                      {searchTerm}
+                      {vendor.name}
                     </button>
-                  </div>
-                )}
-              </>
-            )}
-          </div>
-        </div>
-
-        <div className="space-y-2">
-          {vendors.map((vendor) => (
-            <Link
-              key={vendor?.id}
-              to={`/organizations/${organizationId}/vendors/${vendor?.id}`}
-              className="block"
-            >
-              <div className="flex items-center justify-between p-4 rounded-xl border bg-card hover:bg-accent/5 transition-colors">
-                <div className="flex items-center gap-3">
-                  <Avatar className="h-8 w-8">
-                    <AvatarFallback>{vendor?.name?.[0]}</AvatarFallback>
-                  </Avatar>
-                  <div className="flex items-center gap-2">
-                    <p className="font-medium">{vendor?.name}</p>
-                    {vendor?.description && (
-                      <>
-                        <span className="text-muted-foreground">•</span>
-                        <p className="text-sm text-muted-foreground">
-                          {vendor.description}
-                        </p>
-                      </>
-                    )}
-                  </div>
+                  ))}
                 </div>
-                <div className="flex items-center gap-2">
-                  <Badge
-                    variant="secondary"
-                    className={
-                      vendor.riskTier === "CRITICAL"
-                        ? "bg-red-100 text-red-900 rounded-full px-3 py-0.5 text-xs font-medium"
-                        : vendor?.riskTier === "SIGNIFICANT"
-                        ? "bg-yellow-100 text-yellow-900 rounded-full px-3 py-0.5 text-xs font-medium"
-                        : "bg-green-100 text-green-900 rounded-full px-3 py-0.5 text-xs font-medium"
-                    }
-                  >
-                    {vendor.riskTier}
-                  </Badge>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="h-8 w-8 text-muted-foreground hover:bg-transparent hover:[&>svg]:text-destructive"
-                    onClick={(e) => {
-                      e.preventDefault(); // Prevent navigation
-                      if (
-                        window.confirm(
-                          "Are you sure you want to delete this vendor?"
-                        )
-                      ) {
-                        deleteVendor({
-                          variables: {
-                            connections: [vendorsConnection.vendors.__id],
-                            input: {
-                              vendorId: vendor.id,
-                            },
+              ) : (
+                <div
+                  style={{ borderRadius: "0.3rem" }}
+                  className="absolute top-full left-0 mt-1 w-[calc(100%-100px)] border bg-popover shadow-md z-10"
+                >
+                  <button
+                    className="w-full px-3 py-2 text-left hover:bg-accent flex items-center gap-2"
+                    onClick={() => {
+                      createVendor({
+                        variables: {
+                          connections: [vendorsConnection.vendors.__id],
+                          input: {
+                            organizationId: data.organization.id,
+                            name: searchTerm.trim(),
+                            description: "",
+                            serviceStartAt: new Date().toISOString(),
+                            serviceCriticality: "LOW",
+                            riskTier: "GENERAL",
                           },
-                          onCompleted() {
-                            toast({
-                              title: "Vendor deleted",
-                              description:
-                                "The vendor has been deleted successfully",
-                            });
-                          },
-                        });
-                      }
+                        },
+                        onCompleted() {
+                          setSearchTerm("");
+                          setFilteredVendors([]);
+                          toast({
+                            title: "Vendor created",
+                            description:
+                              "The new vendor has been created successfully",
+                          });
+                        },
+                      });
                     }}
                   >
-                    <Trash2 className="h-4 w-4 transition-colors" />
-                  </Button>
-                  <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                    <span className="font-medium">Create new vendor:</span>{" "}
+                    {searchTerm}
+                  </button>
+                </div>
+              )}
+            </>
+          )}
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        {vendors.map((vendor) => (
+          <Link
+            key={vendor?.id}
+            to={`/organizations/${organizationId}/vendors/${vendor?.id}`}
+            className="block"
+          >
+            <div className="flex items-center justify-between p-4 rounded-xl border bg-card hover:bg-accent/5 transition-colors">
+              <div className="flex items-center gap-3">
+                <Avatar className="h-8 w-8">
+                  <AvatarFallback>{vendor?.name?.[0]}</AvatarFallback>
+                </Avatar>
+                <div className="flex items-center gap-2">
+                  <p className="font-medium">{vendor?.name}</p>
+                  {vendor?.description && (
+                    <>
+                      <span className="text-muted-foreground">•</span>
+                      <p className="text-sm text-muted-foreground">
+                        {vendor.description}
+                      </p>
+                    </>
+                  )}
                 </div>
               </div>
-            </Link>
-          ))}
-        </div>
-
-        <LoadAboveButton
-          isLoading={isLoadingPrevious}
-          hasMore={hasPrevious}
-          onLoadMore={() => {
-            startTransition(() => {
-              setSearchParams((prev) => {
-                prev.set("before", pageInfo?.startCursor || "");
-                prev.delete("after");
-                return prev;
-              });
-              loadPrevious(ITEMS_PER_PAGE);
-            });
-          }}
-        />
-        <LoadBelowButton
-          isLoading={isLoadingNext}
-          hasMore={hasNext}
-          onLoadMore={() => {
-            startTransition(() => {
-              setSearchParams((prev) => {
-                prev.set("after", pageInfo?.endCursor || "");
-                prev.delete("before");
-                return prev;
-              });
-              loadNext(ITEMS_PER_PAGE);
-            });
-          }}
-        />
+              <div className="flex items-center gap-2">
+                <Badge
+                  variant="secondary"
+                  className={
+                    vendor.riskTier === "CRITICAL"
+                      ? "bg-red-100 text-red-900 rounded-full px-3 py-0.5 text-xs font-medium"
+                      : vendor?.riskTier === "SIGNIFICANT"
+                      ? "bg-yellow-100 text-yellow-900 rounded-full px-3 py-0.5 text-xs font-medium"
+                      : "bg-green-100 text-green-900 rounded-full px-3 py-0.5 text-xs font-medium"
+                  }
+                >
+                  {vendor.riskTier}
+                </Badge>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-8 w-8 text-muted-foreground hover:bg-transparent hover:[&>svg]:text-destructive"
+                  onClick={(e) => {
+                    e.preventDefault(); // Prevent navigation
+                    if (
+                      window.confirm(
+                        "Are you sure you want to delete this vendor?"
+                      )
+                    ) {
+                      deleteVendor({
+                        variables: {
+                          connections: [vendorsConnection.vendors.__id],
+                          input: {
+                            vendorId: vendor.id,
+                          },
+                        },
+                        onCompleted() {
+                          toast({
+                            title: "Vendor deleted",
+                            description:
+                              "The vendor has been deleted successfully",
+                          });
+                        },
+                      });
+                    }
+                  }}
+                >
+                  <Trash2 className="h-4 w-4 transition-colors" />
+                </Button>
+                <ChevronRight className="h-4 w-4 text-muted-foreground" />
+              </div>
+            </div>
+          </Link>
+        ))}
       </div>
-    </>
+
+      <LoadAboveButton
+        isLoading={isLoadingPrevious}
+        hasMore={hasPrevious}
+        onLoadMore={() => {
+          startTransition(() => {
+            setSearchParams((prev) => {
+              prev.set("before", pageInfo?.startCursor || "");
+              prev.delete("after");
+              return prev;
+            });
+            loadPrevious(ITEMS_PER_PAGE);
+          });
+        }}
+      />
+      <LoadBelowButton
+        isLoading={isLoadingNext}
+        hasMore={hasNext}
+        onLoadMore={() => {
+          startTransition(() => {
+            setSearchParams((prev) => {
+              prev.set("after", pageInfo?.endCursor || "");
+              prev.delete("before");
+              return prev;
+            });
+            loadNext(ITEMS_PER_PAGE);
+          });
+        }}
+      />
+    </PageTemplate>
   );
 }
 
-function VendorListFallback() {
+export function VendorListPageSkeleton() {
   return (
-    <div className="space-y-6">
+    <PageTemplateSkeleton
+      title="Vendors"
+      description="Vendors are third-party services that your company uses. Add them to
+      keep track of their risk and compliance status."
+    >
       <div>
         <div className="h-8 w-48 bg-muted animate-pulse rounded" />
         <div className="h-4 w-96 bg-muted animate-pulse rounded mt-1" />
@@ -486,7 +479,7 @@ function VendorListFallback() {
           <div key={i} className="h-[72px] bg-muted animate-pulse rounded-xl" />
         ))}
       </div>
-    </div>
+    </PageTemplateSkeleton>
   );
 }
 
@@ -511,17 +504,12 @@ export default function VendorListPage() {
   }, [loadQuery, organizationId]);
 
   if (!queryRef) {
-    return <VendorListFallback />;
+    return <VendorListPageSkeleton />;
   }
 
   return (
-    <>
-      <Helmet>
-        <title>Vendors - Probo Console</title>
-      </Helmet>
-      <Suspense fallback={<VendorListFallback />}>
-        <VendorListContent queryRef={queryRef} />
-      </Suspense>
-    </>
+    <Suspense fallback={<VendorListPageSkeleton />}>
+      <VendorListContent queryRef={queryRef} />
+    </Suspense>
   );
 }
diff --git a/apps/console/src/pages/VendorOverviewPage.tsx b/apps/console/src/pages/VendorOverviewPage.tsx
index 0c9ad4023..b094d1651 100644
--- a/apps/console/src/pages/VendorOverviewPage.tsx
+++ b/apps/console/src/pages/VendorOverviewPage.tsx
@@ -16,9 +16,8 @@ import {
 import { Suspense, useEffect, useState, useCallback } from "react";
 import type { VendorOverviewPageQuery as VendorOverviewPageQueryType } from "./__generated__/VendorOverviewPageQuery.graphql";
 import { useParams } from "react-router";
-import { Helmet } from "react-helmet-async";
 import { cn } from "@/lib/utils";
-import { PageHeader } from "@/components/PageHeader";
+import { PageTemplate, PageTemplateSkeleton } from "@/components/PageTemplate";
 
 const vendorOverviewPageQuery = graphql`
   query VendorOverviewPageQuery($vendorId: ID!) {
@@ -205,188 +204,176 @@ function VendorOverviewPageContent({
   };
 
   return (
-    <>
-      <Helmet>
-        <title>Vendor - Probo</title>
-      </Helmet>
-      <div className="container">
-        <PageHeader className="mb-17" title={formData.name} />
-        <div className="max-w-4xl space-y-6">
-          <EditableField
-            label="Name"
-            value={formData.name}
-            onChange={(value) => handleFieldChange("name", value)}
-          />
+    <PageTemplate title={formData.name}>
+      <div className="max-w-2xl space-y-6">
+        <EditableField
+          label="Name"
+          value={formData.name}
+          onChange={(value) => handleFieldChange("name", value)}
+        />
 
-          <EditableField
-            label="Description"
-            value={formData.description}
-            onChange={(value) => handleFieldChange("description", value)}
-          />
+        <EditableField
+          label="Description"
+          value={formData.description}
+          onChange={(value) => handleFieldChange("description", value)}
+        />
+
+        <Card className="p-6">
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <h2 className="text-lg font-medium">Service Information</h2>
+              <p className="text-sm text-gray-500">
+                Basic information about the vendor service
+              </p>
+            </div>
 
-          <Card className="p-6">
             <div className="space-y-4">
+              <EditableField
+                label="Service Start At"
+                value={formData.serviceStartAt}
+                type="datetime-local"
+                onChange={(value) => handleFieldChange("serviceStartAt", value)}
+              />
+
+              <EditableField
+                label="Service Termination At"
+                value={formData.serviceTerminationAt}
+                type="datetime-local"
+                onChange={(value) =>
+                  handleFieldChange("serviceTerminationAt", value)
+                }
+              />
+
               <div className="space-y-2">
-                <h2 className="text-lg font-medium">Service Information</h2>
+                <div className="flex items-center gap-2">
+                  <HelpCircle className="h-4 w-4 text-gray-400" />
+                  <Label className="text-sm">Service Criticality</Label>
+                </div>
+                <div className="flex gap-2">
+                  <button
+                    onClick={() =>
+                      handleFieldChange("serviceCriticality", "LOW")
+                    }
+                    className={cn(
+                      "rounded-full px-4 py-1 text-sm transition-colors",
+                      formData.serviceCriticality === "LOW"
+                        ? "bg-green-100 text-green-900 ring-2 ring-green-600 ring-offset-2"
+                        : "bg-gray-100 text-gray-900 hover:bg-gray-200"
+                    )}
+                  >
+                    Low
+                  </button>
+                  <button
+                    onClick={() =>
+                      handleFieldChange("serviceCriticality", "MEDIUM")
+                    }
+                    className={cn(
+                      "rounded-full px-4 py-1 text-sm transition-colors",
+                      formData.serviceCriticality === "MEDIUM"
+                        ? "bg-yellow-100 text-yellow-900 ring-2 ring-yellow-600 ring-offset-2"
+                        : "bg-gray-100 text-gray-900 hover:bg-gray-200"
+                    )}
+                  >
+                    Medium
+                  </button>
+                  <button
+                    onClick={() =>
+                      handleFieldChange("serviceCriticality", "HIGH")
+                    }
+                    className={cn(
+                      "rounded-full px-4 py-1 text-sm transition-colors",
+                      formData.serviceCriticality === "HIGH"
+                        ? "bg-red-100 text-red-900 ring-2 ring-red-600 ring-offset-2"
+                        : "bg-gray-100 text-gray-900 hover:bg-gray-200"
+                    )}
+                  >
+                    High
+                  </button>
+                </div>
                 <p className="text-sm text-gray-500">
-                  Basic information about the vendor service
+                  {formData.serviceCriticality === "HIGH" &&
+                    "Critical service - downtime severely impacts end-users"}
+                  {formData.serviceCriticality === "MEDIUM" &&
+                    "Important service - downtime moderately affects end-users"}
+                  {formData.serviceCriticality === "LOW" &&
+                    "Non-critical service - minimal end-user impact if down"}
                 </p>
               </div>
 
-              <div className="space-y-4">
-                <EditableField
-                  label="Service Start At"
-                  value={formData.serviceStartAt}
-                  type="datetime-local"
-                  onChange={(value) =>
-                    handleFieldChange("serviceStartAt", value)
-                  }
-                />
-
-                <EditableField
-                  label="Service Termination At"
-                  value={formData.serviceTerminationAt}
-                  type="datetime-local"
-                  onChange={(value) =>
-                    handleFieldChange("serviceTerminationAt", value)
-                  }
-                />
-
-                <div className="space-y-2">
-                  <div className="flex items-center gap-2">
-                    <HelpCircle className="h-4 w-4 text-gray-400" />
-                    <Label className="text-sm">Service Criticality</Label>
-                  </div>
-                  <div className="flex gap-2">
-                    <button
-                      onClick={() =>
-                        handleFieldChange("serviceCriticality", "LOW")
-                      }
-                      className={cn(
-                        "rounded-full px-4 py-1 text-sm transition-colors",
-                        formData.serviceCriticality === "LOW"
-                          ? "bg-green-100 text-green-900 ring-2 ring-green-600 ring-offset-2"
-                          : "bg-gray-100 text-gray-900 hover:bg-gray-200"
-                      )}
-                    >
-                      Low
-                    </button>
-                    <button
-                      onClick={() =>
-                        handleFieldChange("serviceCriticality", "MEDIUM")
-                      }
-                      className={cn(
-                        "rounded-full px-4 py-1 text-sm transition-colors",
-                        formData.serviceCriticality === "MEDIUM"
-                          ? "bg-yellow-100 text-yellow-900 ring-2 ring-yellow-600 ring-offset-2"
-                          : "bg-gray-100 text-gray-900 hover:bg-gray-200"
-                      )}
-                    >
-                      Medium
-                    </button>
-                    <button
-                      onClick={() =>
-                        handleFieldChange("serviceCriticality", "HIGH")
-                      }
-                      className={cn(
-                        "rounded-full px-4 py-1 text-sm transition-colors",
-                        formData.serviceCriticality === "HIGH"
-                          ? "bg-red-100 text-red-900 ring-2 ring-red-600 ring-offset-2"
-                          : "bg-gray-100 text-gray-900 hover:bg-gray-200"
-                      )}
-                    >
-                      High
-                    </button>
-                  </div>
-                  <p className="text-sm text-gray-500">
-                    {formData.serviceCriticality === "HIGH" &&
-                      "Critical service - downtime severely impacts end-users"}
-                    {formData.serviceCriticality === "MEDIUM" &&
-                      "Important service - downtime moderately affects end-users"}
-                    {formData.serviceCriticality === "LOW" &&
-                      "Non-critical service - minimal end-user impact if down"}
-                  </p>
+              <div className="space-y-2">
+                <div className="flex items-center gap-2">
+                  <HelpCircle className="h-4 w-4 text-gray-400" />
+                  <Label className="text-sm">Risk Tier</Label>
                 </div>
-
-                <div className="space-y-2">
-                  <div className="flex items-center gap-2">
-                    <HelpCircle className="h-4 w-4 text-gray-400" />
-                    <Label className="text-sm">Risk Tier</Label>
-                  </div>
-                  <div className="flex gap-2">
-                    <button
-                      onClick={() => handleFieldChange("riskTier", "CRITICAL")}
-                      className={cn(
-                        "rounded-full px-4 py-1 text-sm transition-colors",
-                        formData.riskTier === "CRITICAL"
-                          ? "bg-red-100 text-red-900 ring-2 ring-red-600 ring-offset-2"
-                          : "bg-gray-100 text-gray-900 hover:bg-gray-200"
-                      )}
-                    >
-                      Critical
-                    </button>
-                    <button
-                      onClick={() =>
-                        handleFieldChange("riskTier", "SIGNIFICANT")
-                      }
-                      className={cn(
-                        "rounded-full px-4 py-1 text-sm transition-colors",
-                        formData.riskTier === "SIGNIFICANT"
-                          ? "bg-yellow-100 text-yellow-900 ring-2 ring-yellow-600 ring-offset-2"
-                          : "bg-gray-100 text-gray-900 hover:bg-gray-200"
-                      )}
-                    >
-                      Significant
-                    </button>
-                    <button
-                      onClick={() => handleFieldChange("riskTier", "GENERAL")}
-                      className={cn(
-                        "rounded-full px-4 py-1 text-sm transition-colors",
-                        formData.riskTier === "GENERAL"
-                          ? "bg-green-100 text-green-900 ring-2 ring-green-600 ring-offset-2"
-                          : "bg-gray-100 text-gray-900 hover:bg-gray-200"
-                      )}
-                    >
-                      General
-                    </button>
-                  </div>
-                  <p className="text-sm text-gray-500">
-                    {formData.riskTier === "CRITICAL" &&
-                      "Handles sensitive data, critical for platform operation"}
-                    {formData.riskTier === "SIGNIFICANT" &&
-                      "No user data access, but important for platform management"}
-                    {formData.riskTier === "GENERAL" &&
-                      "General vendor with minimal risk"}
-                  </p>
+                <div className="flex gap-2">
+                  <button
+                    onClick={() => handleFieldChange("riskTier", "CRITICAL")}
+                    className={cn(
+                      "rounded-full px-4 py-1 text-sm transition-colors",
+                      formData.riskTier === "CRITICAL"
+                        ? "bg-red-100 text-red-900 ring-2 ring-red-600 ring-offset-2"
+                        : "bg-gray-100 text-gray-900 hover:bg-gray-200"
+                    )}
+                  >
+                    Critical
+                  </button>
+                  <button
+                    onClick={() => handleFieldChange("riskTier", "SIGNIFICANT")}
+                    className={cn(
+                      "rounded-full px-4 py-1 text-sm transition-colors",
+                      formData.riskTier === "SIGNIFICANT"
+                        ? "bg-yellow-100 text-yellow-900 ring-2 ring-yellow-600 ring-offset-2"
+                        : "bg-gray-100 text-gray-900 hover:bg-gray-200"
+                    )}
+                  >
+                    Significant
+                  </button>
+                  <button
+                    onClick={() => handleFieldChange("riskTier", "GENERAL")}
+                    className={cn(
+                      "rounded-full px-4 py-1 text-sm transition-colors",
+                      formData.riskTier === "GENERAL"
+                        ? "bg-green-100 text-green-900 ring-2 ring-green-600 ring-offset-2"
+                        : "bg-gray-100 text-gray-900 hover:bg-gray-200"
+                    )}
+                  >
+                    General
+                  </button>
                 </div>
-
-                <EditableField
-                  label="Status Page URL"
-                  value={formData.statusPageUrl || ""}
-                  onChange={(value) =>
-                    handleFieldChange("statusPageUrl", value)
-                  }
-                />
-
-                <EditableField
-                  label="Terms of Service URL"
-                  value={formData.termsOfServiceUrl || ""}
-                  onChange={(value) =>
-                    handleFieldChange("termsOfServiceUrl", value)
-                  }
-                />
-
-                <EditableField
-                  label="Privacy Policy URL"
-                  value={formData.privacyPolicyUrl || ""}
-                  onChange={(value) =>
-                    handleFieldChange("privacyPolicyUrl", value)
-                  }
-                />
+                <p className="text-sm text-gray-500">
+                  {formData.riskTier === "CRITICAL" &&
+                    "Handles sensitive data, critical for platform operation"}
+                  {formData.riskTier === "SIGNIFICANT" &&
+                    "No user data access, but important for platform management"}
+                  {formData.riskTier === "GENERAL" &&
+                    "General vendor with minimal risk"}
+                </p>
               </div>
+
+              <EditableField
+                label="Status Page URL"
+                value={formData.statusPageUrl || ""}
+                onChange={(value) => handleFieldChange("statusPageUrl", value)}
+              />
+
+              <EditableField
+                label="Terms of Service URL"
+                value={formData.termsOfServiceUrl || ""}
+                onChange={(value) =>
+                  handleFieldChange("termsOfServiceUrl", value)
+                }
+              />
+
+              <EditableField
+                label="Privacy Policy URL"
+                value={formData.privacyPolicyUrl || ""}
+                onChange={(value) =>
+                  handleFieldChange("privacyPolicyUrl", value)
+                }
+              />
             </div>
-          </Card>
-        </div>
+          </div>
+        </Card>
       </div>
 
       {hasChanges && (
@@ -402,13 +389,13 @@ function VendorOverviewPageContent({
           </Button>
         </div>
       )}
-    </>
+    </PageTemplate>
   );
 }
 
-function VendorOverviewPageFallback() {
+export function VendorOverviewPageSkeleton() {
   return (
-    <div className="p-6 space-y-6">
+    <PageTemplateSkeleton>
       <div className="space-y-1">
         <div className="h-8 w-48 bg-muted animate-pulse rounded" />
         <div className="h-4 w-96 bg-muted animate-pulse rounded" />
@@ -418,7 +405,7 @@ function VendorOverviewPageFallback() {
           <div key={i} className="h-20 bg-muted animate-pulse rounded-lg" />
         ))}
       </div>
-    </div>
+    </PageTemplateSkeleton>
   );
 }
 
@@ -433,17 +420,12 @@ export default function VendorOverviewPage() {
   }, [loadQuery, vendorId]);
 
   if (!queryRef) {
-    return <VendorOverviewPageFallback />;
+    return <VendorOverviewPageSkeleton />;
   }
 
   return (
-    <>
-      <Helmet>
-        <title>Vendor Overview - Probo Console</title>
-      </Helmet>
-      <Suspense fallback={<VendorOverviewPageFallback />}>
-        <VendorOverviewPageContent queryRef={queryRef} />
-      </Suspense>
-    </>
+    <Suspense fallback={<VendorOverviewPageSkeleton />}>
+      <VendorOverviewPageContent queryRef={queryRef} />
+    </Suspense>
   );
 }