Add all missing page skeletons and use them as fallback

Signed-off-by: Émile Ré <nemile.re@gmail.com>

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>

apps/console/src/components/PageHeader.tsx

@@ -56,8 +56,8 @@ export function PageHeading({
 
 const PageHeadingSkeleton: FC = () => {
   return (
-    <div className="py-[3px]">
+    <div className="py-[3px] w-2/5">
-      <div className="bg-muted animate rounded-lg w-60 h-7.5" />
+      <div className="bg-muted animate rounded-lg h-7.5" />
     </div>
   );
 };

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,13 +1127,7 @@ function ControlOverviewPageContent({
   };
 
   return (
-    <>
+    <PageTemplate
-      <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">
@@ -1170,7 +1163,7 @@ function ControlOverviewPageContent({
           </div>
         </div>
       }
-        />
+    >
       <div className="space-y-4 mb-8">
         <Card className="mt-4">
           <CardContent className="pt-6">
@@ -1189,10 +1182,7 @@ function ControlOverviewPageContent({
               <FileIcon className="w-4 h-4 mr-2 text-blue-500" />
               <span>Drag & drop files onto tasks to add evidence</span>
             </div>
-              <Dialog
+            <Dialog open={isCreateTaskOpen} onOpenChange={setIsCreateTaskOpen}>
-                open={isCreateTaskOpen}
-                onOpenChange={setIsCreateTaskOpen}
-              >
               <DialogTrigger asChild>
                 <Button size="sm" className="flex items-center gap-1">
                   <Plus className="w-4 h-4" />
@@ -1203,8 +1193,8 @@ function ControlOverviewPageContent({
                 <DialogHeader>
                   <DialogTitle>Create New Task</DialogTitle>
                   <DialogDescription>
-                      Add a new task to this control. Click save when
+                    Add a new task to this control. Click save when you&apos;re
-                      you&apos;re done.
+                    done.
                   </DialogDescription>
                 </DialogHeader>
                 <div className="space-y-4 py-4">
@@ -1253,9 +1243,7 @@ function ControlOverviewPageContent({
                           type="number"
                           min="0"
                           value={timeEstimateDays}
-                            onChange={(e) =>
+                          onChange={(e) => setTimeEstimateDays(e.target.value)}
-                              setTimeEstimateDays(e.target.value)
-                            }
                           placeholder="0"
                         />
                       </div>
@@ -1272,9 +1260,7 @@ function ControlOverviewPageContent({
                           min="0"
                           max="23"
                           value={timeEstimateHours}
-                            onChange={(e) =>
+                          onChange={(e) => setTimeEstimateHours(e.target.value)}
-                              setTimeEstimateHours(e.target.value)
-                            }
                           placeholder="0"
                         />
                       </div>
@@ -1647,10 +1633,7 @@ function ControlOverviewPageContent({
                           >
                             <div className="flex items-center gap-3">
                               <div className="bg-white p-2 rounded-md border border-gray-200">
-                                  {getFileIcon(
+                                {getFileIcon(evidence.mimeType, evidence.type)}
-                                    evidence.mimeType,
-                                    evidence.type
-                                  )}
                               </div>
                               <div>
                                 <div className="text-sm font-medium text-gray-800">
@@ -1672,9 +1655,7 @@ function ControlOverviewPageContent({
                                       <span>•</span>
                                     </>
                                   ) : null}
-                                    <span>
+                                  <span>{formatDate(evidence.createdAt)}</span>
-                                      {formatDate(evidence.createdAt)}
-                                    </span>
                                 </div>
                               </div>
                             </div>
@@ -1821,9 +1802,7 @@ function ControlOverviewPageContent({
                   <Textarea
                     id="evidence-description"
                     value={linkEvidenceDescription}
-                      onChange={(e) =>
+                    onChange={(e) => setLinkEvidenceDescription(e.target.value)}
-                        setLinkEvidenceDescription(e.target.value)
-                      }
                     placeholder="Describe this evidence (optional)"
                     className="min-h-[100px]"
                   />
@@ -1972,8 +1951,7 @@ function ControlOverviewPageContent({
             <DialogTitle>Delete Evidence</DialogTitle>
             <DialogDescription>
               Are you sure you want to delete the evidence &quot;
-                {evidenceToDelete?.filename}&quot;? This action cannot be
+              {evidenceToDelete?.filename}&quot;? This action cannot be undone.
-                undone.
             </DialogDescription>
           </DialogHeader>
           <DialogFooter>
@@ -1989,29 +1967,32 @@ function ControlOverviewPageContent({
           </DialogFooter>
         </DialogContent>
       </Dialog>
-      </div>
+    </PageTemplate>
-    </>
   );
 }
 
-function ControlOverviewPageFallback() {
+export function ControlOverviewPageSkeleton() {
   return (
-    <div className="min-h-screen bg-white p-6">
+    <PageTemplateSkeleton
-      <div className="mb-8">
+      actions={
-        <div className="h-8 w-48 bg-gray-100 animate-pulse rounded" />
+        <div className="flex items-center gap-2 w-1/3">
-        <div className="h-4 w-96 bg-gray-100 animate-pulse rounded mt-2" />
+          <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-6 w-48 bg-muted animate-pulse rounded mb-2" />
-              <div className="h-4 w-full bg-gray-100 animate-pulse rounded" />
+              <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>
   );

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,17 +181,10 @@ function CreateControlPageContent() {
   };
 
   return (
-    <>
+    <PageTemplate
-      <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"
-        />
+    >
-
       <Card className="max-w-2xl">
         <form onSubmit={handleSubmit} className="p-6 space-y-6">
           <EditableField
@@ -258,14 +250,24 @@ function CreateControlPageContent() {
           </div>
         </form>
       </Card>
-      </div>
+    </PageTemplate>
-    </>
+  );
+}
+
+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>
   );

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,18 +167,10 @@ function CreateFrameworkPageContent() {
   };
 
   return (
-    <>
+    <PageTemplate
-      <Helmet>
+      title="Create Framework"
-        <title>Create Framework - Probo</title>
+      description="Create a new framework to organize your controls"
-      </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>
-
       <Card className="max-w-2xl">
         <form onSubmit={handleSubmit} className="p-6 space-y-6">
           <EditableField
@@ -213,14 +205,24 @@ function CreateFrameworkPageContent() {
           </div>
         </form>
       </Card>
-      </div>
+    </PageTemplate>
-    </>
+  );
+}
+
+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>
   );

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,24 +149,12 @@ export default function CreateOrganizationPage() {
   };
 
   return (
-    <>
+    <PageTemplate
-      <Helmet>
+      title="Create Organization"
-        <title>Create Organization - Probo</title>
+      description="Create a new organization to manage your compliance and security needs."
-      </Helmet>
+    >
-
-      <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>
+        <Card className="max-w-2xl">
           <CardHeader>
             <CardTitle>Organization Details</CardTitle>
             <CardDescription>
@@ -177,7 +176,6 @@ export default function CreateOrganizationPage() {
           </CardContent>
         </Card>
       </form>
-      </div>
+    </PageTemplate>
-    </>
   );
 }

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,19 +149,12 @@ function CreatePeoplePageContent() {
   };
 
   return (
-    <>
+    <PageTemplate
-      <Helmet>
+      title="Create Person"
-        <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"
-        />
+    >
-
       <form onSubmit={handleSubmit}>
-          <div className="max-w-4xl space-y-6">
+        <div className="max-w-2xl space-y-6">
           <EditableField
             label="Full Name"
             value={formData.fullName}
@@ -192,14 +184,9 @@ function CreatePeoplePageContent() {
                     type="email"
                     value={email}
                     onChange={(e) => {
-                        const newEmails = [
+                      const newEmails = [...formData.additionalEmailAddresses];
-                          ...formData.additionalEmailAddresses,
-                        ];
                       newEmails[index] = e.target.value;
-                        handleFieldChange(
+                      handleFieldChange("additionalEmailAddresses", newEmails);
-                          "additionalEmailAddresses",
-                          newEmails
-                        );
                     }}
                   />
                   <Button
@@ -210,10 +197,7 @@ function CreatePeoplePageContent() {
                         formData.additionalEmailAddresses.filter(
                           (_, i) => i !== index
                         );
-                        handleFieldChange(
+                      handleFieldChange("additionalEmailAddresses", newEmails);
-                          "additionalEmailAddresses",
-                          newEmails
-                        );
                     }}
                   >
                     Remove
@@ -238,9 +222,7 @@ function CreatePeoplePageContent() {
           <Card className="p-6">
             <div className="space-y-4">
               <div className="space-y-2">
-                  <h2 className="text-lg font-medium">
+                <h2 className="text-lg font-medium">Additional Information</h2>
-                    Additional Information
-                  </h2>
                 <p className="text-sm text-gray-500">
                   Additional details about the person
                 </p>
@@ -298,11 +280,7 @@ function CreatePeoplePageContent() {
           </Card>
         </div>
         <div className="fixed bottom-6 right-6 flex gap-2">
-            <Button
+          <Button type="button" variant="outline" onClick={() => navigate(-1)}>
-              type="button"
-              variant="outline"
-              onClick={() => navigate(-1)}
-            >
             Cancel
           </Button>
           <Button
@@ -313,14 +291,24 @@ function CreatePeoplePageContent() {
           </Button>
         </div>
       </form>
-      </div>
+    </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>
   );

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,17 +155,10 @@ function CreatePolicyForm({
   };
 
   return (
-    <>
+    <PageTemplate
-      <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"
-        />
+    >
-
       <form onSubmit={handleSubmit}>
         <div className="grid gap-6">
           <Card>
@@ -234,10 +226,7 @@ function CreatePolicyForm({
               </div>
 
               <div className="space-y-2">
-                  <Label
+                <Label htmlFor="reviewDate" className="flex items-center gap-2">
-                    htmlFor="reviewDate"
-                    className="flex items-center gap-2"
-                  >
                   <Calendar className="h-4 w-4" />
                   Review Date
                 </Label>
@@ -267,25 +256,18 @@ function CreatePolicyForm({
           </div>
         </div>
       </form>
-      </div>
+    </PageTemplate>
-    </>
   );
 }
 
-function CreatePolicyPageFallback() {
+export function CreatePolicyPageSkeleton() {
   return (
-    <div className="container mx-auto py-6">
+    <PageTemplateSkeleton
-      <div className="flex items-center mb-6">
+      title="Create Policy"
-        <div className="mr-4">
+      description="Create a new policy for your organization"
-          <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>
       <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 />}>
+    <Suspense fallback={<CreatePolicyPageSkeleton />}>
-      {queryRef && <CreatePolicyForm queryRef={queryRef} />}
+      {<CreatePolicyForm queryRef={queryRef} />}
     </Suspense>
   );
 }

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} />}

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 { PageTemplate, PageTemplateSkeleton } from "@/components/PageTemplate";
-import { PageHeader } from "@/components/PageHeader";
 
 const FrameworkOverviewPageQuery = graphql`
   query FrameworkOverviewPageQuery($frameworkId: ID!) {
@@ -169,9 +168,7 @@ function FrameworkOverviewPageContent({
   };
 
   return (
-    <div className="container space-y-6">
+    <PageTemplate
-      <PageHeader
-        className="mb-10"
       title={framework.name ?? ""}
       description={framework.description ?? ""}
       actions={
@@ -193,8 +190,7 @@ function FrameworkOverviewPageContent({
           </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">
+    <PageTemplateSkeleton>
-      <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>
       <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 (
-    <>
+    <Suspense fallback={<FrameworkOverviewPageSkeleton />}>
-      <Helmet>
-        <title>Framework Overview - Probo Console</title>
-      </Helmet>
-      <Suspense fallback={<FrameworkOverviewPageFallback />}>
       {queryRef && <FrameworkOverviewPageContent queryRef={queryRef} />}
     </Suspense>
-    </>
   );
 }

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,14 +173,8 @@ function PeopleListContent({
   const pageInfo = peoplesConnection.peoples.pageInfo;
 
   return (
-    <>
+    <PageTemplate
-      <Helmet>
+      title="People"
-        <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={
@@ -197,8 +190,8 @@ function PeopleListContent({
           </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 (
+    <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>
+        <div className="rounded-xl border bg-card p-4 space-y-2">
-        <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="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
+              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 (
-    <>
+    <Suspense fallback={<PeopleListPageSkeleton />}>
-      <Helmet>
-        <title>People - Probo Console</title>
-      </Helmet>
-      <Suspense fallback={<PeopleListPageFallback />}>
       <PeopleListContent queryRef={queryRef} />
     </Suspense>
-    </>
   );
 }

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,12 +160,7 @@ function PeopleOverviewPageContent({
   };
 
   return (
-    <>
+    <PageTemplate title={formData.fullName}>
-      <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
@@ -196,14 +190,9 @@ function PeopleOverviewPageContent({
                     type="email"
                     value={email}
                     onChange={(e) => {
-                        const newEmails = [
+                      const newEmails = [...formData.additionalEmailAddresses];
-                          ...formData.additionalEmailAddresses,
-                        ];
                       newEmails[index] = e.target.value;
-                        handleFieldChange(
+                      handleFieldChange("additionalEmailAddresses", newEmails);
-                          "additionalEmailAddresses",
-                          newEmails
-                        );
                     }}
                   />
                   <Button
@@ -213,10 +202,7 @@ function PeopleOverviewPageContent({
                         formData.additionalEmailAddresses.filter(
                           (_, i) => i !== index
                         );
-                        handleFieldChange(
+                      handleFieldChange("additionalEmailAddresses", newEmails);
-                          "additionalEmailAddresses",
-                          newEmails
-                        );
                     }}
                   >
                     Remove
@@ -240,9 +226,7 @@ function PeopleOverviewPageContent({
           <Card className="p-6">
             <div className="space-y-4">
               <div className="space-y-2">
-                  <h2 className="text-lg font-medium">
+                <h2 className="text-lg font-medium">Additional Information</h2>
-                    Additional Information
-                  </h2>
                 <p className="text-sm text-gray-500">
                   Additional details about the person
                 </p>
@@ -311,14 +295,14 @@ function PeopleOverviewPageContent({
           </Button>
         </div>
       )}
-      </div>
+    </PageTemplate>
-    </>
   );
 }
 
-function PeopleOverviewPageFallback() {
+export function PeopleOverviewPageSkeleton() {
   return (
-    <div className="p-6 space-y-6">
+    <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" />
@@ -329,6 +313,7 @@ function PeopleOverviewPageFallback() {
           ))}
         </div>
       </div>
+    </PageTemplateSkeleton>
   );
 }
 
@@ -343,17 +328,12 @@ export default function PeopleOverviewPage() {
   }, [loadQuery, peopleId]);
 
   if (!queryRef) {
-    return <PeopleOverviewPageFallback />;
+    return <PeopleOverviewPageSkeleton />;
   }
 
   return (
-    <>
+    <Suspense fallback={<PeopleOverviewPageSkeleton />}>
-      <Helmet>
-        <title>People Overview - Probo Console</title>
-      </Helmet>
-      <Suspense fallback={<PeopleOverviewPageFallback />}>
       <PeopleOverviewPageContent queryRef={queryRef} />
     </Suspense>
-    </>
   );
 }

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,13 +219,7 @@ function PolicyListPageContent({
     });
 
   return (
-    <>
+    <PageTemplate
-      <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={
@@ -237,8 +230,7 @@ function PolicyListPageContent({
           </Link>
         </Button>
       }
-        />
+    >
-
       {/* Search and filter controls */}
       <div className="flex flex-col md:flex-row gap-4 mb-6">
         <div className="relative flex-1">
@@ -351,22 +343,17 @@ function PolicyListPageContent({
           </div>
         )}
       </div>
-      </div>
+    </PageTemplate>
-    </>
   );
 }
 
-function PolicyListPageFallback() {
+export function PolicyListPageSkeleton() {
   return (
-    <div className="container mx-auto py-6">
+    <PageTemplateSkeleton
-      <div className="flex justify-between items-center mb-6">
+      title="Policies"
-        <div>
+      description="Manage your organization's policies"
-          <div className="h-8 w-48 bg-muted animate-pulse rounded" />
+      actions={<div className="bg-muted animate-pulse h-9 w-1/6 rounded-lg" />}
-          <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>
-
       {/* 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 (
-    <>
+    <Suspense fallback={<PolicyListPageSkeleton />}>
-      <Helmet>
+      {<PolicyListPageContent queryRef={queryRef} />}
-        <title>Policies - Probo Console</title>
-      </Helmet>
-      <Suspense fallback={<PolicyListPageFallback />}>
-        {queryRef && <PolicyListPageContent queryRef={queryRef} />}
     </Suspense>
-    </>
   );
 }

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,19 +148,11 @@ function PolicyOverviewPageContent({
   };
 
   return (
-    <>
+    <PageTemplate
-      <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
+          <Badge variant={policy.status === "ACTIVE" ? "default" : "outline"}>
-                variant={policy.status === "ACTIVE" ? "default" : "outline"}
-              >
             {policy.status === "ACTIVE" ? "Active" : "Draft"}
           </Badge>
           {policy.owner && (
@@ -214,8 +205,7 @@ function PolicyOverviewPageContent({
           </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">
@@ -332,9 +322,7 @@ function PolicyOverviewPageContent({
                     <FileText className="h-4 w-4" />
                     <span className="text-sm">Last Updated</span>
                   </div>
-                    <p className="font-medium">
+                  <p className="font-medium">{formatDate(policy.updatedAt)}</p>
-                      {formatDate(policy.updatedAt)}
-                    </p>
                 </div>
 
                 <div>
@@ -380,8 +368,8 @@ function PolicyOverviewPageContent({
             <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
+                Permanently delete this policy and all of its data. This action
-                  action cannot be undone.
+                cannot be undone.
               </p>
               <Button
                 variant="destructive"
@@ -411,14 +399,21 @@ function PolicyOverviewPageContent({
           </Card>
         </div>
       </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>
   );

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 (
-    <>
+    <PageTemplate
-      <div className="container space-y-6">
-        <PageHeader
-          className="mb-17"
       title="Settings"
       description="Manage your details and personal preferences here"
-        />
+    >
-
+      <div className="space-y-6">
         <Card>
           <CardHeader>
             <CardTitle>Organization information</CardTitle>
@@ -519,13 +515,17 @@ function SettingsPageContent({
           </DialogFooter>
         </DialogContent>
       </Dialog>
-    </>
+    </PageTemplate>
   );
 }
 
-function SettingsPageFallback() {
+export function SettingsPageSkeleton() {
   return (
-    <div className="p-6 space-y-6">
+    <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" />
@@ -536,6 +536,7 @@ function SettingsPageFallback() {
           ))}
         </div>
       </div>
+    </PageTemplateSkeleton>
   );
 }
 
@@ -550,17 +551,12 @@ export default function SettingsPage() {
   }, [loadQuery, organizationId]);
 
   if (!queryRef) {
-    return <SettingsPageFallback />;
+    return <SettingsPageSkeleton />;
   }
 
   return (
-    <>
+    <Suspense fallback={<SettingsPageSkeleton />}>
-      <Helmet>
-        <title>Settings - Probo Console</title>
-      </Helmet>
-      <Suspense fallback={<SettingsPageFallback />}>
       <SettingsPageContent queryRef={queryRef} />
     </Suspense>
-    </>
   );
 }

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,17 +249,10 @@ function UpdateControlPageContent({
   };
 
   return (
-    <>
+    <PageTemplate
-      <Helmet>
-        <title>Update Control - Probo</title>
-      </Helmet>
-      <div className="container">
-        <PageHeader
-          className="mb-17"
       title="Update Control"
       description="Update the control details"
-        />
+    >
-
       <Card className="max-w-2xl">
         <form onSubmit={handleSubmit} className="p-6 space-y-6">
           <EditableField
@@ -292,9 +284,7 @@ function UpdateControlPageContent({
             </Label>
             <Select
               value={formData.importance}
-                onValueChange={(value) =>
+              onValueChange={(value) => handleFieldChange("importance", value)}
-                  handleFieldChange("importance", value)
-                }
             >
               <SelectTrigger>
                 <SelectValue placeholder="Select importance" />
@@ -337,13 +327,19 @@ function UpdateControlPageContent({
           </div>
         </form>
       </Card>
-      </div>
+    </PageTemplate>
-    </>
   );
 }
 
-function UpdateControlPageFallback() {
+export function UpdateControlPageSkeleton() {
-  return <div>Loading...</div>;
+  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>
   );

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,17 +198,10 @@ function UpdateFrameworkPageContent({
   };
 
   return (
-    <>
+    <PageTemplate
-      <Helmet>
-        <title>Update Framework - Probo</title>
-      </Helmet>
-      <div className="container">
-        <PageHeader
-          className="mb-17"
       title="Update Framework"
       description="Update the framework details"
-        />
+    >
-
       <Card className="max-w-2xl">
         <form onSubmit={handleSubmit} className="p-6 space-y-6">
           <EditableField
@@ -238,13 +230,19 @@ function UpdateFrameworkPageContent({
           </div>
         </form>
       </Card>
-      </div>
+    </PageTemplate>
-    </>
   );
 }
 
-function UpdateFrameworkPageFallback() {
+export function UpdateFrameworkPageSkeleton() {
-  return <div>Loading...</div>;
+  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>
   );

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,17 +147,7 @@ function UpdatePolicyPageContent({
   };
 
   return (
-    <>
+    <PageTemplate title="Update Policy" description="Update an existing policy">
-      <Helmet>
-        <title>Update Policy - Probo Console</title>
-      </Helmet>
-      <div className="container">
-        <PageHeader
-          className="mb-17"
-          title="Update Policy"
-          description="Update an existing policy"
-        />
-
       <form onSubmit={handleSubmit}>
         <div className="grid gap-6">
           <Card>
@@ -226,10 +215,7 @@ function UpdatePolicyPageContent({
               </div>
 
               <div className="space-y-2">
-                  <Label
+                <Label htmlFor="reviewDate" className="flex items-center gap-2">
-                    htmlFor="reviewDate"
-                    className="flex items-center gap-2"
-                  >
                   <Calendar className="h-4 w-4" />
                   Review Date
                 </Label>
@@ -261,14 +247,16 @@ function UpdatePolicyPageContent({
           </div>
         </div>
       </form>
-      </div>
+    </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>
   );

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,18 +239,11 @@ function VendorListContent({
   });
 
   return (
-    <>
+    <PageTemplate
-      <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."
-        />
+    >
-
       <div className="rounded-xl border bg-card p-4">
         <div className="flex items-center gap-2 mb-4">
           <Store className="h-5 w-5" />
@@ -269,9 +261,7 @@ function VendorListContent({
               if (value.trim() === "") {
                 setFilteredVendors([]);
               } else {
-                  const results = fuse
+                const results = fuse.search(value).map((result) => result.item);
-                    .search(value)
-                    .map((result) => result.item);
                 setFilteredVendors(results);
               }
             }}
@@ -462,14 +452,17 @@ function VendorListContent({
           });
         }}
       />
-      </div>
+    </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 (
-    <>
+    <Suspense fallback={<VendorListPageSkeleton />}>
-      <Helmet>
-        <title>Vendors - Probo Console</title>
-      </Helmet>
-      <Suspense fallback={<VendorListFallback />}>
       <VendorListContent queryRef={queryRef} />
     </Suspense>
-    </>
   );
 }

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,13 +204,8 @@ function VendorOverviewPageContent({
   };
 
   return (
-    <>
+    <PageTemplate title={formData.name}>
-      <Helmet>
+      <div className="max-w-2xl space-y-6">
-        <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}
@@ -238,9 +232,7 @@ function VendorOverviewPageContent({
                 label="Service Start At"
                 value={formData.serviceStartAt}
                 type="datetime-local"
-                  onChange={(value) =>
+                onChange={(value) => handleFieldChange("serviceStartAt", value)}
-                    handleFieldChange("serviceStartAt", value)
-                  }
               />
 
               <EditableField
@@ -326,9 +318,7 @@ function VendorOverviewPageContent({
                     Critical
                   </button>
                   <button
-                      onClick={() =>
+                    onClick={() => handleFieldChange("riskTier", "SIGNIFICANT")}
-                        handleFieldChange("riskTier", "SIGNIFICANT")
-                      }
                     className={cn(
                       "rounded-full px-4 py-1 text-sm transition-colors",
                       formData.riskTier === "SIGNIFICANT"
@@ -363,9 +353,7 @@ function VendorOverviewPageContent({
               <EditableField
                 label="Status Page URL"
                 value={formData.statusPageUrl || ""}
-                  onChange={(value) =>
+                onChange={(value) => handleFieldChange("statusPageUrl", value)}
-                    handleFieldChange("statusPageUrl", value)
-                  }
               />
 
               <EditableField
@@ -387,7 +375,6 @@ function VendorOverviewPageContent({
           </div>
         </Card>
       </div>
-      </div>
 
       {hasChanges && (
         <div className="fixed bottom-6 right-6 flex gap-2">
@@ -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 (
-    <>
+    <Suspense fallback={<VendorOverviewPageSkeleton />}>
-      <Helmet>
-        <title>Vendor Overview - Probo Console</title>
-      </Helmet>
-      <Suspense fallback={<VendorOverviewPageFallback />}>
       <VendorOverviewPageContent queryRef={queryRef} />
     </Suspense>
-    </>
   );
 }