diff --git a/apps/web/components/dialogs/ai-expand-concept-prompt-dialog.component.tsx b/apps/web/components/dialogs/ai-expand-concept-prompt-dialog.component.tsx
index 55bbed4..4637c9c 100644
--- a/apps/web/components/dialogs/ai-expand-concept-prompt-dialog.component.tsx
+++ b/apps/web/components/dialogs/ai-expand-concept-prompt-dialog.component.tsx
@@ -72,6 +72,7 @@ export default function AiExpandConceptPromptDialogComponent({
   }, [open, content]);
 
   return (
+    // @ts-ignore
     <Transition.Root show={open} as={Fragment}>
       <Dialog
         as="div"
@@ -81,6 +82,7 @@ export default function AiExpandConceptPromptDialogComponent({
       >
         <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
           <Transition.Child
+            // @ts-ignore
             as={Fragment}
             enter="ease-out duration-300"
             enterFrom="opacity-0"
@@ -100,6 +102,7 @@ export default function AiExpandConceptPromptDialogComponent({
             &#8203;
           </span>
           <Transition.Child
+            // @ts-ignore
             as={Fragment}
             enter="ease-out duration-300"
             enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
diff --git a/apps/web/components/dialogs/ai-prood-read-dialog.component.tsx b/apps/web/components/dialogs/ai-prood-read-dialog.component.tsx
index cd70f2d..1a8eae9 100644
--- a/apps/web/components/dialogs/ai-prood-read-dialog.component.tsx
+++ b/apps/web/components/dialogs/ai-prood-read-dialog.component.tsx
@@ -65,6 +65,7 @@ export default function AiProofReadDialogComponent({ open, setOpen, content }) {
   }, [open, content]);
 
   return (
+    // @ts-ignore
     <Transition.Root show={open} as={Fragment}>
       <Dialog
         as="div"
@@ -74,6 +75,7 @@ export default function AiProofReadDialogComponent({ open, setOpen, content }) {
       >
         <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
           <Transition.Child
+            // @ts-ignore
             as={Fragment}
             enter="ease-out duration-300"
             enterFrom="opacity-0"
@@ -93,6 +95,7 @@ export default function AiProofReadDialogComponent({ open, setOpen, content }) {
             &#8203;
           </span>
           <Transition.Child
+            // @ts-ignore
             as={Fragment}
             enter="ease-out duration-300"
             enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
diff --git a/apps/web/components/dialogs/ai-suggest-title-prompt-dialog.component.tsx b/apps/web/components/dialogs/ai-suggest-title-prompt-dialog.component.tsx
index 9b14cb2..c2b24d9 100644
--- a/apps/web/components/dialogs/ai-suggest-title-prompt-dialog.component.tsx
+++ b/apps/web/components/dialogs/ai-suggest-title-prompt-dialog.component.tsx
@@ -1,9 +1,9 @@
+import { SpinnerWithSpacing } from "@changes-page/ui";
+import { convertMarkdownToPlainText } from "@changes-page/utils";
 import { Dialog, Transition } from "@headlessui/react";
-import React, { Fragment, useEffect, useRef, useState } from "react";
-import { promptSuggestTitle } from "../../utils/useAiAssistant";
 import { LightningBoltIcon } from "@heroicons/react/solid";
-import { convertMarkdownToPlainText } from "@changes-page/utils";
-import { SpinnerWithSpacing } from "@changes-page/ui";
+import { Fragment, useEffect, useRef, useState } from "react";
+import { promptSuggestTitle } from "../../utils/useAiAssistant";
 import { notifyError } from "../core/toast.component";
 
 export default function AiSuggestTitlePromptDialogComponent({
@@ -37,6 +37,7 @@ export default function AiSuggestTitlePromptDialogComponent({
   }, [open, content]);
 
   return (
+    // @ts-ignore
     <Transition.Root show={open} as={Fragment}>
       <Dialog
         as="div"
@@ -46,6 +47,7 @@ export default function AiSuggestTitlePromptDialogComponent({
       >
         <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
           <Transition.Child
+            // @ts-ignore
             as={Fragment}
             enter="ease-out duration-300"
             enterFrom="opacity-0"
@@ -65,6 +67,7 @@ export default function AiSuggestTitlePromptDialogComponent({
             &#8203;
           </span>
           <Transition.Child
+            // @ts-ignore
             as={Fragment}
             enter="ease-out duration-300"
             enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
diff --git a/apps/web/components/dialogs/confirm-delete-dialog.component.tsx b/apps/web/components/dialogs/confirm-delete-dialog.component.tsx
index d460084..c94075f 100644
--- a/apps/web/components/dialogs/confirm-delete-dialog.component.tsx
+++ b/apps/web/components/dialogs/confirm-delete-dialog.component.tsx
@@ -1,10 +1,10 @@
 /* This example requires Tailwind CSS v2.0+ */
+import { Spinner } from "@changes-page/ui";
 import { Dialog, Transition } from "@headlessui/react";
 import { ExclamationIcon } from "@heroicons/react/outline";
 import classNames from "classnames";
 import Head from "next/head";
 import { Fragment, useRef, useState } from "react";
-import { Spinner } from "@changes-page/ui";
 
 export default function ConfirmDeleteDialog({
   itemName,
@@ -25,7 +25,7 @@ export default function ConfirmDeleteDialog({
           <meta name="theme-color" content="#dc2626" />
         </Head>
       )}
-
+      {/* @ts-ignore */}
       <Transition.Root show={open} as={Fragment}>
         <Dialog
           as="div"
@@ -35,6 +35,7 @@ export default function ConfirmDeleteDialog({
         >
           <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
             <Transition.Child
+              // @ts-ignore
               as={Fragment}
               enter="ease-out duration-300"
               enterFrom="opacity-0"
@@ -54,6 +55,7 @@ export default function ConfirmDeleteDialog({
               &#8203;
             </span>
             <Transition.Child
+              // @ts-ignore
               as={Fragment}
               enter="ease-out duration-300"
               enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
diff --git a/apps/web/components/dialogs/date-time-prompt-dialog.component.tsx b/apps/web/components/dialogs/date-time-prompt-dialog.component.tsx
index d5c7a6b..2ff20d7 100644
--- a/apps/web/components/dialogs/date-time-prompt-dialog.component.tsx
+++ b/apps/web/components/dialogs/date-time-prompt-dialog.component.tsx
@@ -42,6 +42,7 @@ export default function DateTimePromptDialog({
   }, [open]);
 
   return (
+    // @ts-ignore
     <Transition.Root show={open} as={Fragment}>
       <Dialog
         as="div"
@@ -51,6 +52,7 @@ export default function DateTimePromptDialog({
       >
         <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
           <Transition.Child
+            // @ts-ignore
             as={Fragment}
             enter="ease-out duration-300"
             enterFrom="opacity-0"
@@ -70,6 +72,7 @@ export default function DateTimePromptDialog({
             &#8203;
           </span>
           <Transition.Child
+            // @ts-ignore
             as={Fragment}
             enter="ease-out duration-300"
             enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
diff --git a/apps/web/components/dialogs/manage-team-dialog.component.tsx b/apps/web/components/dialogs/manage-team-dialog.component.tsx
index 2f377fe..b406c09 100644
--- a/apps/web/components/dialogs/manage-team-dialog.component.tsx
+++ b/apps/web/components/dialogs/manage-team-dialog.component.tsx
@@ -85,6 +85,7 @@ export default function ManageTeamDialog({
   });
 
   return (
+    // @ts-ignore
     <Transition.Root show={open} as={Fragment}>
       <Dialog
         as="div"
@@ -94,6 +95,7 @@ export default function ManageTeamDialog({
       >
         <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
           <Transition.Child
+            // @ts-ignore
             as={Fragment}
             enter="ease-out duration-300"
             enterFrom="opacity-0"
@@ -113,6 +115,7 @@ export default function ManageTeamDialog({
             &#8203;
           </span>
           <Transition.Child
+            // @ts-ignore
             as={Fragment}
             enter="ease-out duration-300"
             enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
diff --git a/apps/web/components/dialogs/warning-dialog.component.tsx b/apps/web/components/dialogs/warning-dialog.component.tsx
index aa0900e..806ac95 100644
--- a/apps/web/components/dialogs/warning-dialog.component.tsx
+++ b/apps/web/components/dialogs/warning-dialog.component.tsx
@@ -1,9 +1,9 @@
 /* This example requires Tailwind CSS v2.0+ */
+import { Spinner } from "@changes-page/ui";
 import { Dialog, Transition } from "@headlessui/react";
 import { ExclamationIcon } from "@heroicons/react/outline";
 import classNames from "classnames";
 import { Fragment, useRef } from "react";
-import { Spinner } from "@changes-page/ui";
 
 export default function WarningDialog({
   title,
@@ -16,6 +16,7 @@ export default function WarningDialog({
   const cancelButtonRef = useRef(null);
 
   return (
+    // @ts-ignore
     <Transition.Root show={open} as={Fragment}>
       <Dialog
         as="div"
@@ -25,6 +26,7 @@ export default function WarningDialog({
       >
         <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
           <Transition.Child
+            // @ts-ignore
             as={Fragment}
             enter="ease-out duration-300"
             enterFrom="opacity-0"
@@ -44,6 +46,7 @@ export default function WarningDialog({
             &#8203;
           </span>
           <Transition.Child
+            // @ts-ignore
             as={Fragment}
             enter="ease-out duration-300"
             enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
diff --git a/apps/web/components/dialogs/widget-code-dialog.tsx b/apps/web/components/dialogs/widget-code-dialog.tsx
index dc6c68e..a137202 100644
--- a/apps/web/components/dialogs/widget-code-dialog.tsx
+++ b/apps/web/components/dialogs/widget-code-dialog.tsx
@@ -18,6 +18,7 @@ export default function WidgetCodeDialog({ urlSlug, open, setOpen }) {
   );
 
   return (
+    // @ts-ignore
     <Transition.Root show={open} as={Fragment}>
       <Dialog
         as="div"
@@ -27,6 +28,7 @@ export default function WidgetCodeDialog({ urlSlug, open, setOpen }) {
       >
         <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
           <Transition.Child
+            // @ts-ignore
             as={Fragment}
             enter="ease-out duration-300"
             enterFrom="opacity-0"
@@ -46,6 +48,7 @@ export default function WidgetCodeDialog({ urlSlug, open, setOpen }) {
             &#8203;
           </span>
           <Transition.Child
+            // @ts-ignore
             as={Fragment}
             enter="ease-out duration-300"
             enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
diff --git a/apps/web/components/forms/post-form.component.tsx b/apps/web/components/forms/post-form.component.tsx
index 607efd7..96fefb0 100644
--- a/apps/web/components/forms/post-form.component.tsx
+++ b/apps/web/components/forms/post-form.component.tsx
@@ -204,6 +204,7 @@ export default function PostFormComponent({
 
                     <Transition
                       show={open}
+                      // @ts-ignore
                       as={Fragment}
                       leave="transition ease-in duration-100"
                       leaveFrom="opacity-100"
@@ -319,6 +320,7 @@ export default function PostFormComponent({
                 </Menu.Button>
 
                 <Transition
+                  // @ts-ignore
                   as={Fragment}
                   leave="transition ease-in duration-100"
                   leaveFrom="opacity-100"
@@ -586,6 +588,7 @@ export default function PostFormComponent({
             <div className="relative bg-slate-50 dark:bg-slate-900">
               {!editNotes ? (
                 formik.values.notes ? (
+                  // @ts-ignore
                   <ReactMarkdown className="pt-4 mx-auto px-6 prose dark:prose-invert prose-indigo max-w-full">
                     {formik.values.notes}
                   </ReactMarkdown>
diff --git a/apps/web/components/layout/blog-layout.component.tsx b/apps/web/components/layout/blog-layout.component.tsx
index 66a7cfb..dc95904 100644
--- a/apps/web/components/layout/blog-layout.component.tsx
+++ b/apps/web/components/layout/blog-layout.component.tsx
@@ -201,6 +201,7 @@ export default function BlogLayout({
             ) : null}
 
             <div className="blog-content-override prose dark:prose-invert prose-indigo mx-auto mt-6 max-w-[70ch]">
+              {/* @ts-ignore */}
               <ReactMarkdown
                 rehypePlugins={[
                   rehypeRaw,
diff --git a/apps/web/components/layout/header.component.tsx b/apps/web/components/layout/header.component.tsx
index ecb5006..b444bec 100644
--- a/apps/web/components/layout/header.component.tsx
+++ b/apps/web/components/layout/header.component.tsx
@@ -212,6 +212,7 @@ export default function HeaderComponent() {
                           </div>
                           <Transition
                             show={open}
+                            // @ts-ignore
                             as={Fragment}
                             enter="transition ease-out duration-100"
                             enterFrom="transform opacity-0 scale-95"
diff --git a/apps/web/components/layout/page.component.tsx b/apps/web/components/layout/page.component.tsx
index ae7d530..61bbcfd 100644
--- a/apps/web/components/layout/page.component.tsx
+++ b/apps/web/components/layout/page.component.tsx
@@ -126,6 +126,7 @@ export default function Page({
                         </Menu.Button>
 
                         <Transition
+                          // @ts-ignore
                           as={Fragment}
                           enter="transition ease-out duration-200"
                           enterFrom="transform opacity-0 scale-95"
@@ -169,6 +170,7 @@ export default function Page({
               <div className="hidden sm:block">
                 <nav className="-mb-px flex space-x-8">
                   {tabs.map((tab) => (
+                    // @ts-ignore
                     <Link
                       key={tab.name}
                       href={tab.href}
diff --git a/apps/web/components/marketing/changelog.tsx b/apps/web/components/marketing/changelog.tsx
index 19131f8..2501482 100644
--- a/apps/web/components/marketing/changelog.tsx
+++ b/apps/web/components/marketing/changelog.tsx
@@ -1,8 +1,8 @@
+import { IPost } from "@changes-page/supabase/types/page";
 import { Transition } from "@headlessui/react";
+import { SpeakerphoneIcon } from "@heroicons/react/outline";
 import { useRouter } from "next/router";
 import { Fragment, useEffect, useState } from "react";
-import { IPost } from "@changes-page/supabase/types/page";
-import { SpeakerphoneIcon } from "@heroicons/react/outline";
 
 type IPostWithUrl = IPost & { url: string };
 
@@ -44,6 +44,7 @@ export default function Changelog() {
     <>
       <Transition
         show
+        // @ts-ignore
         as={Fragment}
         enter="transform ease-out duration-300 transition"
         enterFrom="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
diff --git a/apps/web/components/post/post-options.tsx b/apps/web/components/post/post-options.tsx
index cfbec47..2bac0d0 100644
--- a/apps/web/components/post/post-options.tsx
+++ b/apps/web/components/post/post-options.tsx
@@ -1,16 +1,16 @@
-import { Menu, Transition } from "@headlessui/react";
-import { Fragment } from "react";
-import classNames from "classnames";
 import { PostStatus } from "@changes-page/supabase/types/page";
-import { MenuItem } from "../core/menu.component";
+import { Menu, Transition } from "@headlessui/react";
+import { LocationMarkerIcon as RemovePinIcon } from "@heroicons/react/outline";
 import {
   LocationMarkerIcon as AddPinIcon,
   ExternalLinkIcon,
   PencilAltIcon,
   TrashIcon,
 } from "@heroicons/react/solid";
-import { LocationMarkerIcon as RemovePinIcon } from "@heroicons/react/outline";
+import classNames from "classnames";
+import { Fragment } from "react";
 import { ROUTES } from "../../data/routes.data";
+import { MenuItem } from "../core/menu.component";
 
 const PostOptions = ({
   post,
@@ -23,6 +23,7 @@ const PostOptions = ({
   floating = false,
 }) => (
   <Transition
+    // @ts-ignore
     as={Fragment}
     enter="transition ease-out duration-100"
     enterFrom="transform opacity-0 scale-95"
diff --git a/apps/web/components/post/post.tsx b/apps/web/components/post/post.tsx
index f13bad0..1dc93d5 100644
--- a/apps/web/components/post/post.tsx
+++ b/apps/web/components/post/post.tsx
@@ -310,6 +310,7 @@ export function Post({
             </span>
 
             <div className="prose dark:prose-invert text-gray-900 dark:text-gray-300 break-words">
+              {/* @ts-ignore */}
               <ReactMarkdown
                 rehypePlugins={[
                   rehypeRaw,
diff --git a/apps/web/components/roadmap/RoadmapItemModal.tsx b/apps/web/components/roadmap/RoadmapItemModal.tsx
index 0edb94c..1cabafa 100644
--- a/apps/web/components/roadmap/RoadmapItemModal.tsx
+++ b/apps/web/components/roadmap/RoadmapItemModal.tsx
@@ -43,9 +43,11 @@ export default function RoadmapItemModal({
   );
 
   return (
+    // @ts-ignore
     <Transition appear show={isOpen} as={Fragment}>
       <Dialog as="div" className="relative z-10" onClose={onClose}>
         <Transition.Child
+          // @ts-ignore
           as={Fragment}
           enter="ease-out duration-300"
           enterFrom="opacity-0"
@@ -60,6 +62,7 @@ export default function RoadmapItemModal({
         <div className="fixed inset-0 overflow-y-auto">
           <div className="flex min-h-full items-end justify-center p-0 text-center sm:items-center sm:p-4">
             <Transition.Child
+              // @ts-ignore
               as={Fragment}
               enter="ease-out duration-300"
               enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
diff --git a/apps/web/middleware.ts b/apps/web/middleware.ts
index 9424aa5..a01d504 100644
--- a/apps/web/middleware.ts
+++ b/apps/web/middleware.ts
@@ -1,20 +1,20 @@
-import { createMiddlewareClient } from "@supabase/auth-helpers-nextjs";
 import type { NextRequest } from "next/server";
 import { NextResponse } from "next/server";
+import { createMiddlewareClient } from "./utils/supabase/middleware";
 
 export async function middleware(req: NextRequest) {
-  // We need to create a response and hand it to the supabase client to be able to modify the response headers.
-  const res = NextResponse.next();
-  const supabase = createMiddlewareClient({ req, res });
+  const { supabase, response } = createMiddlewareClient(req);
+
+  await supabase.auth.getSession();
+
   const {
-    data: { session },
-  } = await supabase.auth.getSession();
+    data: { user },
+  } = await supabase.auth.getUser();
 
-  if (session?.user) {
-    return res;
+  if (user) {
+    return response;
   }
 
-  // Auth condition not met, redirect to home page.
   const redirectUrl = req.nextUrl.clone();
   redirectUrl.pathname = "/login";
   redirectUrl.searchParams.set(`redirectedFrom`, req.nextUrl.pathname);
diff --git a/apps/web/next.config.js b/apps/web/next.config.js
index f624830..7ebed06 100644
--- a/apps/web/next.config.js
+++ b/apps/web/next.config.js
@@ -66,9 +66,6 @@ const moduleExports = {
       "cdn.sanity.io",
     ],
   },
-  typescript: {
-    ignoreBuildErrors: true,
-  },
   // PostHog rewrites for ingest and static assets
   async rewrites() {
     return [
diff --git a/apps/web/package.json b/apps/web/package.json
index a9138ae..f670558 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -21,13 +21,13 @@
     "@sanity/client": "^5.4.2",
     "@sanity/image-url": "^1.0.2",
     "@sentry/nextjs": "^7.77.0",
-    "@supabase/auth-helpers-nextjs": "^0.8.7",
-    "@supabase/auth-helpers-react": "^0.4.2",
     "@supabase/auth-ui-react": "^0.4.7",
     "@supabase/auth-ui-shared": "^0.1.8",
+    "@supabase/ssr": "^0.7.0",
     "@supabase/supabase-js": "^2.39.3",
     "@tailwindcss/typography": "^0.5.1",
     "@types/canvas-confetti": "^1.6.4",
+    "@types/validator": "^13.15.3",
     "@vercel/og": "^0.0.20",
     "canvas-confetti": "^1.9.3",
     "chrono-node": "^2.7.6",
@@ -67,6 +67,7 @@
     "use-debounce": "^7.0.1",
     "use-file-picker": "^1.4.1",
     "uuid": "^8.3.2",
+    "validator": "^13.15.15",
     "yup": "^1.3.3"
   },
   "devDependencies": {
@@ -79,6 +80,6 @@
     "postcss": "^8.4.5",
     "prettier": "^2.3.2",
     "tailwindcss": "^3.0.15",
-    "typescript": "^4"
+    "typescript": "^5"
   }
-}
+}
\ No newline at end of file
diff --git a/apps/web/pages/_app.tsx b/apps/web/pages/_app.tsx
index 5ce57f4..7116e1d 100644
--- a/apps/web/pages/_app.tsx
+++ b/apps/web/pages/_app.tsx
@@ -1,12 +1,10 @@
-import { createPagesBrowserClient } from "@supabase/auth-helpers-nextjs";
-import { SessionContextProvider } from "@supabase/auth-helpers-react";
 import dynamic from "next/dynamic";
 import localFont from "next/font/local";
 import Head from "next/head";
 import { Router } from "next/router";
 import posthog from "posthog-js";
 import { PostHogProvider } from "posthog-js/react";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import "../styles/global.css";
 import { UserContextProvider } from "../utils/useUser";
 
@@ -32,7 +30,6 @@ const geist = localFont({
 
 export default function App({ Component, pageProps }) {
   const getLayout = Component.getLayout || ((page) => page);
-  const [supabaseClient] = useState(() => createPagesBrowserClient());
 
   useEffect(() => {
     posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
@@ -63,15 +60,10 @@ export default function App({ Component, pageProps }) {
           --geist-font: ${geist.style.fontFamily};
         }
       `}</style>
-      <SessionContextProvider
-        supabaseClient={supabaseClient}
-        initialSession={pageProps.initialSession}
-      >
-        <UserContextProvider>
-          {getLayout(<Component {...pageProps} />)}
-          <ProgressBar />
-        </UserContextProvider>
-      </SessionContextProvider>
+      <UserContextProvider initialSession={pageProps.initialSession}>
+        {getLayout(<Component {...pageProps} />)}
+        <ProgressBar />
+      </UserContextProvider>
     </PostHogProvider>
   );
 }
diff --git a/apps/web/pages/api/ai/get-streaming-url.ts b/apps/web/pages/api/ai/get-streaming-url.ts
index 8ce28c4..63b6948 100644
--- a/apps/web/pages/api/ai/get-streaming-url.ts
+++ b/apps/web/pages/api/ai/get-streaming-url.ts
@@ -1,17 +1,11 @@
-import { IErrorResponse } from "@changes-page/supabase/types/api";
-import type { NextApiRequest, NextApiResponse } from "next";
 import { createSignedStreamingUrl } from "../../../utils/manageprompt";
-import { getSupabaseServerClient } from "../../../utils/supabase/supabase-admin";
+import { withAuth } from "../../../utils/withAuth";
 
-const expandConcept = async (
-  req: NextApiRequest,
-  res: NextApiResponse<{ url: string } | IErrorResponse>
-) => {
+const expandConcept = withAuth<{ url: string }>(async (req, res) => {
   if (req.method === "POST") {
     const { workflowId } = req.body;
-    try {
-      await getSupabaseServerClient({ req, res });
 
+    try {
       const url = await createSignedStreamingUrl(workflowId);
 
       return res.status(200).json({ url });
@@ -25,6 +19,6 @@ const expandConcept = async (
     res.setHeader("Allow", "POST");
     res.status(405).end("Method Not Allowed");
   }
-};
+});
 
 export default expandConcept;
diff --git a/apps/web/pages/api/ai/suggest-title.ts b/apps/web/pages/api/ai/suggest-title.ts
index 2919460..109132c 100644
--- a/apps/web/pages/api/ai/suggest-title.ts
+++ b/apps/web/pages/api/ai/suggest-title.ts
@@ -1,18 +1,11 @@
-import { IErrorResponse } from "@changes-page/supabase/types/api";
-import type { NextApiRequest, NextApiResponse } from "next";
 import { runWorkflow } from "../../../utils/manageprompt";
-import { getSupabaseServerClient } from "../../../utils/supabase/supabase-admin";
+import { withAuth } from "../../../utils/withAuth";
 
-const suggestTitle = async (
-  req: NextApiRequest,
-  res: NextApiResponse<string[] | IErrorResponse>
-) => {
+const suggestTitle = withAuth<string[]>(async (req, res) => {
   if (req.method === "POST") {
     const { content } = req.body;
 
     try {
-      await getSupabaseServerClient({ req, res });
-
       const result = await runWorkflow("wf_e1eb79b1dc017ca189506d799453caae", {
         content,
       });
@@ -30,6 +23,6 @@ const suggestTitle = async (
     res.setHeader("Allow", "POST");
     res.status(405).end("Method Not Allowed");
   }
-};
+});
 
 export default suggestTitle;
diff --git a/apps/web/pages/api/auth/callback.ts b/apps/web/pages/api/auth/callback.ts
index 1f9e6d3..ebb4091 100644
--- a/apps/web/pages/api/auth/callback.ts
+++ b/apps/web/pages/api/auth/callback.ts
@@ -1,18 +1,47 @@
-import { createPagesServerClient } from "@supabase/auth-helpers-nextjs";
 import { NextApiHandler } from "next";
 import { ROUTES } from "../../../data/routes.data";
-import { Database } from "@changes-page/supabase/types";
+import { createServerClientForAPI } from "../../../utils/supabase/server";
 
 const callback: NextApiHandler = async (req, res) => {
   const code = req.query.code;
   const redirectedFrom = req.query.redirectedFrom;
 
-  if (typeof code === "string") {
-    const supabase = createPagesServerClient<Database>({ req, res });
-    await supabase.auth.exchangeCodeForSession(code);
+  if (typeof code !== "string") {
+    return res.redirect(
+      `/login?error=${encodeURIComponent("Missing or invalid code")}`
+    );
   }
 
-  res.redirect(redirectedFrom ? `${redirectedFrom}` : ROUTES.PAGES);
+  const supabase = createServerClientForAPI({ req, res });
+
+  try {
+    const { data, error } = await supabase.auth.exchangeCodeForSession(code);
+
+    if (error) {
+      console.error("Auth callback error:", error);
+      return res.redirect(`/login?error=${encodeURIComponent(error.message)}`);
+    }
+
+    if (!data.session) {
+      console.error("Auth callback: No session created");
+      return res.redirect(
+        `/login?error=${encodeURIComponent("No session created")}`
+      );
+    }
+  } catch (err) {
+    console.error("Auth callback exception:", err);
+    return res.redirect(
+      `/login?error=${encodeURIComponent("Authentication failed")}`
+    );
+  }
+
+  const redirectTo =
+    typeof redirectedFrom === "string" &&
+    Object.values(ROUTES).includes(redirectedFrom)
+      ? redirectedFrom
+      : ROUTES.PAGES;
+
+  res.redirect(redirectTo);
 };
 
 export default callback;
diff --git a/apps/web/pages/api/billing/create-billing-portal.ts b/apps/web/pages/api/billing/create-billing-portal.ts
index 5a4ab92..2fdb8a1 100644
--- a/apps/web/pages/api/billing/create-billing-portal.ts
+++ b/apps/web/pages/api/billing/create-billing-portal.ts
@@ -1,45 +1,41 @@
-import { IErrorResponse } from "@changes-page/supabase/types/api";
-import type { NextApiRequest, NextApiResponse } from "next";
 import { apiRateLimiter } from "../../../utils/rate-limit";
-import { getSupabaseServerClient } from "../../../utils/supabase/supabase-admin";
 import { createOrRetrieveCustomer } from "../../../utils/useDatabase";
+import { withAuth } from "../../../utils/withAuth";
 import { getAppBaseURL } from "./../../../utils/helpers";
 const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY);
 
-const createBillingSession = async (
-  req: NextApiRequest,
-  res: NextApiResponse<{ url: string } | IErrorResponse>
-) => {
-  if (req.method === "POST") {
-    await apiRateLimiter(req, res);
-    const { return_url } = req.body;
+const createBillingSession = withAuth<{ url: string }>(
+  async (req, res, { user }) => {
+    if (req.method === "POST") {
+      await apiRateLimiter(req, res);
+      const { return_url } = req.body;
 
-    try {
-      const { user } = await getSupabaseServerClient({ req, res });
-      const customer = await createOrRetrieveCustomer(user.id, user.email);
+      try {
+        const customer = await createOrRetrieveCustomer(user.id, user.email);
 
-      console.log(
-        "createBillingSession",
-        user?.id,
-        "create billing session for existing user"
-      );
+        console.log(
+          "createBillingSession",
+          user?.id,
+          "create billing session for existing user"
+        );
 
-      const { url } = await stripe.billingPortal.sessions.create({
-        customer,
-        return_url: return_url || `${getAppBaseURL()}/account/billing`,
-      });
+        const { url } = await stripe.billingPortal.sessions.create({
+          customer,
+          return_url: return_url || `${getAppBaseURL()}/account/billing`,
+        });
 
-      return res.status(201).json({ url });
-    } catch (err) {
-      console.log("createBillingSession", err);
-      res
-        .status(500)
-        .json({ error: { statusCode: 500, message: err.message } });
+        return res.status(201).json({ url });
+      } catch (err) {
+        console.log("createBillingSession", err);
+        res
+          .status(500)
+          .json({ error: { statusCode: 500, message: err.message } });
+      }
+    } else {
+      res.setHeader("Allow", "POST");
+      res.status(405).end("Method Not Allowed");
     }
-  } else {
-    res.setHeader("Allow", "POST");
-    res.status(405).end("Method Not Allowed");
   }
-};
+);
 
 export default createBillingSession;
diff --git a/apps/web/pages/api/billing/enable-email-notifications.ts b/apps/web/pages/api/billing/enable-email-notifications.ts
index 73a3316..9ebfde3 100644
--- a/apps/web/pages/api/billing/enable-email-notifications.ts
+++ b/apps/web/pages/api/billing/enable-email-notifications.ts
@@ -1,67 +1,84 @@
-import type { NextApiRequest, NextApiResponse } from "next";
 import Stripe from "stripe";
-import { IErrorResponse } from "@changes-page/supabase/types/api";
-import { getSupabaseServerClient } from "../../../utils/supabase/supabase-admin";
 import { getUserById } from "../../../utils/useDatabase";
+import { withAuth } from "../../../utils/withAuth";
 
 const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY);
 
-const enableEmailNotifications = async (
-  req: NextApiRequest,
-  res: NextApiResponse<{ status: string } | IErrorResponse>
-) => {
-  if (req.method === "PUT") {
-    try {
-      const { user } = await getSupabaseServerClient({ req, res });
+const enableEmailNotifications = withAuth<{ status: string }>(
+  async (req, res, { user }) => {
+    if (req.method === "PUT") {
+      try {
+        const priceId = process.env.EMAIL_NOTIFICATION_STRIPE_PRICE_ID;
+        if (!priceId) {
+          return res.status(500).json({
+            error: {
+              statusCode: 500,
+              message: "Internal error: Price ID not configured.",
+            },
+          });
+        }
 
-      const { stripe_subscription_id, stripe_subscription } = await getUserById(
-        user.id
-      );
+        const { stripe_subscription_id, stripe_subscription } =
+          await getUserById(user.id);
 
-      if (
-        !stripe_subscription ||
-        (stripe_subscription as unknown as Stripe.Subscription)?.status ===
-          "canceled"
-      ) {
-        return res.status(400).json({
-          error: {
-            statusCode: 400,
-            message:
-              "You have canceled your subscription. Please reactivate it to continue using this feature.",
-          },
-        });
-      }
+        if (
+          !stripe_subscription ||
+          (stripe_subscription as unknown as Stripe.Subscription)?.status ===
+            "canceled"
+        ) {
+          return res.status(400).json({
+            error: {
+              statusCode: 400,
+              message:
+                "You have canceled your subscription. Please reactivate it to continue using this feature.",
+            },
+          });
+        }
 
-      const subscription = await stripe.subscriptions.retrieve(
-        stripe_subscription_id
-      );
+        if (!stripe_subscription_id) {
+          return res.status(400).json({
+            error: {
+              statusCode: 400,
+              message: "Missing Stripe subscription",
+            },
+          });
+        }
 
-      // Ignore if already added to subscription
-      if (
-        subscription.items.data.find(
-          (item) =>
-            item.price.id === process.env.EMAIL_NOTIFICATION_STRIPE_PRICE_ID
-        )
-      ) {
-        return res.status(200).json({ status: "ok" });
-      }
+        const subscription = await stripe.subscriptions.retrieve(
+          stripe_subscription_id
+        );
 
-      await stripe.subscriptionItems.create({
-        subscription: stripe_subscription_id,
-        price: process.env.EMAIL_NOTIFICATION_STRIPE_PRICE_ID,
-      });
+        // Ignore if already added to subscription
+        if (
+          subscription.items.data.find(
+            (item: Stripe.SubscriptionItem) => item.price.id === priceId
+          )
+        ) {
+          return res.status(200).json({ status: "ok" });
+        }
 
-      return res.status(201).json({ status: "ok" });
-    } catch (err) {
-      console.log("createBillingSession", err);
-      res
-        .status(500)
-        .json({ error: { statusCode: 500, message: err.message } });
+        await stripe.subscriptionItems.create(
+          {
+            subscription: stripe_subscription_id,
+            price: priceId,
+          },
+          {
+            idempotencyKey: `sub:${stripe_subscription_id}:price:${priceId}`,
+          }
+        );
+
+        return res.status(201).json({ status: "ok" });
+      } catch (err) {
+        console.log("createBillingSession", err);
+        res
+          .status(500)
+          .json({ error: { statusCode: 500, message: err.message } });
+      }
+    } else {
+      res.setHeader("Allow", "PUT");
+      res.status(405).end("Method Not Allowed");
     }
-  } else {
-    res.setHeader("Allow", "PUT");
-    res.status(405).end("Method Not Allowed");
   }
-};
+);
 
 export default enableEmailNotifications;
diff --git a/apps/web/pages/api/billing/index.ts b/apps/web/pages/api/billing/index.ts
index ad97cb1..353d5ba 100644
--- a/apps/web/pages/api/billing/index.ts
+++ b/apps/web/pages/api/billing/index.ts
@@ -1,20 +1,13 @@
-import { IErrorResponse } from "@changes-page/supabase/types/api";
-import type { NextApiRequest, NextApiResponse } from "next";
 import Stripe from "stripe";
 import { IBillingInfo } from "../../../data/user.interface";
-import { getSupabaseServerClient } from "../../../utils/supabase/supabase-admin";
 import { getUserById } from "../../../utils/useDatabase";
+import { withAuth } from "../../../utils/withAuth";
 
 const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY);
 
-const getBillingStatus = async (
-  req: NextApiRequest,
-  res: NextApiResponse<IBillingInfo | IErrorResponse>
-) => {
+const getBillingStatus = withAuth<IBillingInfo>(async (req, res, { user }) => {
   if (req.method === "GET") {
     try {
-      const { user } = await getSupabaseServerClient({ req, res });
-
       const {
         pro_gifted,
         stripe_customer_id,
@@ -143,6 +136,6 @@ const getBillingStatus = async (
     res.setHeader("Allow", "GET");
     res.status(405).end("Method Not Allowed");
   }
-};
+});
 
 export default getBillingStatus;
diff --git a/apps/web/pages/api/billing/jobs/report-usage.ts b/apps/web/pages/api/billing/jobs/report-usage.ts
index 0ba3f31..3a8fa99 100644
--- a/apps/web/pages/api/billing/jobs/report-usage.ts
+++ b/apps/web/pages/api/billing/jobs/report-usage.ts
@@ -5,6 +5,11 @@ import { Stripe } from "stripe";
 import { v4 } from "uuid";
 import { getPagesCount } from "../../../../utils/useDatabase";
 
+type UserWithSubscription = {
+  id: string;
+  stripe_subscription: Stripe.Subscription;
+};
+
 const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY);
 
 export const VALID_STRIPE_PRICE_IDS = [
@@ -15,7 +20,7 @@ export const VALID_STRIPE_PRICE_IDS = [
 ];
 
 const reportUsageJob = async (
-  req: NextApiRequest,
+  _: NextApiRequest,
   res: NextApiResponse<{ status: string } | IErrorResponse>
 ) => {
   try {
@@ -25,16 +30,16 @@ const reportUsageJob = async (
 
     const { data: users, error } = await supabaseAdmin
       .from("users")
-      .select("id,stripe_subscription,stripe_subscription->>status")
-      .filter("stripe_subscription->>status", "in", '("active","trialing")');
+      .select("id,stripe_subscription")
+      .filter("stripe_subscription->>status", "in", '("active","trialing")')
+      .overrideTypes<UserWithSubscription[]>();
 
     if (error) throw error;
 
     console.log(`Job ${jobId} - Found ${users?.length} users`);
 
     for (const user of users ?? []) {
-      const subscription =
-        user.stripe_subscription as unknown as Stripe.Subscription;
+      const subscription = user.stripe_subscription;
 
       console.log(
         `Job ${jobId} - Processing user ${user.id} with status ${subscription.status}`
diff --git a/apps/web/pages/api/billing/redirect-to-checkout.ts b/apps/web/pages/api/billing/redirect-to-checkout.ts
index 5e63382..5fac6ae 100644
--- a/apps/web/pages/api/billing/redirect-to-checkout.ts
+++ b/apps/web/pages/api/billing/redirect-to-checkout.ts
@@ -1,25 +1,19 @@
-import type { NextApiRequest, NextApiResponse } from "next";
 import { getAppBaseURL } from "../../../utils/helpers";
 import { apiRateLimiter } from "../../../utils/rate-limit";
-import { getSupabaseServerClient } from "../../../utils/supabase/supabase-admin";
 import {
   createOrRetrieveCustomer,
   getUserById,
 } from "../../../utils/useDatabase";
+import { withAuth } from "../../../utils/withAuth";
 
 const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY);
 
-const redirectToCheckout = async (
-  req: NextApiRequest,
-  res: NextApiResponse
-) => {
+const redirectToCheckout = withAuth(async (req, res, { user }) => {
   if (req.method === "GET") {
     await apiRateLimiter(req, res);
     const { return_url } = req.query;
 
     try {
-      const { user } = await getSupabaseServerClient({ req, res });
-
       const {
         stripe_customer_id,
         stripe_subscription,
@@ -44,7 +38,8 @@ const redirectToCheckout = async (
           return_url: return_url || `${getAppBaseURL()}/pages`,
         });
 
-        return res.redirect(307, url);
+        res.redirect(307, url);
+        return;
       }
 
       console.log(
@@ -84,7 +79,8 @@ const redirectToCheckout = async (
         cancel_url: return_url || getAppBaseURL(),
       });
 
-      return res.redirect(307, url);
+      res.redirect(307, url);
+      return;
     } catch (err) {
       console.log("createCheckout", err);
       res
@@ -95,6 +91,6 @@ const redirectToCheckout = async (
     res.setHeader("Allow", "GET");
     res.status(405).end("Method Not Allowed");
   }
-};
+});
 
 export default redirectToCheckout;
diff --git a/apps/web/pages/api/emails/subscribers/export-csv.ts b/apps/web/pages/api/emails/subscribers/export-csv.ts
index e2db8d2..b265b7f 100644
--- a/apps/web/pages/api/emails/subscribers/export-csv.ts
+++ b/apps/web/pages/api/emails/subscribers/export-csv.ts
@@ -1,19 +1,14 @@
 import { supabaseAdmin } from "@changes-page/supabase/admin";
 import { Parser } from "@json2csv/plainjs";
-import { NextApiRequest, NextApiResponse } from "next";
 import { apiRateLimiter } from "../../../../utils/rate-limit";
-import { getSupabaseServerClient } from "../../../../utils/supabase/supabase-admin";
+import { withAuth } from "../../../../utils/withAuth";
 
-const getSubscribersExportCsv = async (
-  req: NextApiRequest,
-  res: NextApiResponse
-) => {
+const getSubscribersExportCsv = withAuth(async (req, res, { user }) => {
   if (req.method === "GET") {
     try {
       await apiRateLimiter(req, res);
-      const { user } = await getSupabaseServerClient({ req, res });
 
-      const { page_id } = req.query;
+      const page_id = String(req.query.page_id);
 
       await supabaseAdmin
         .from("pages")
@@ -54,6 +49,6 @@ const getSubscribersExportCsv = async (
     res.setHeader("Allow", "POST,PUT");
     res.status(405).end("Method Not Allowed");
   }
-};
+});
 
 export default getSubscribersExportCsv;
diff --git a/apps/web/pages/api/emails/subscribers/index.ts b/apps/web/pages/api/emails/subscribers/index.ts
index 3fd9e52..499775b 100644
--- a/apps/web/pages/api/emails/subscribers/index.ts
+++ b/apps/web/pages/api/emails/subscribers/index.ts
@@ -1,45 +1,41 @@
 import { supabaseAdmin } from "@changes-page/supabase/admin";
-import { NextApiRequest, NextApiResponse } from "next";
-import { getSupabaseServerClient } from "../../../../utils/supabase/supabase-admin";
+import { withAuth } from "../../../../utils/withAuth";
 
-const getEmailSubscribers = async (
-  req: NextApiRequest,
-  res: NextApiResponse
-) => {
-  if (req.method === "GET") {
-    try {
-      const { user } = await getSupabaseServerClient({ req, res });
+const getEmailSubscribers = withAuth<{ count: number }>(
+  async (req, res, { user }) => {
+    if (req.method === "GET") {
+      try {
+        const page_id = String(req.query.page_id);
 
-      const { page_id } = req.query;
+        await supabaseAdmin
+          .from("pages")
+          .select("id")
+          .eq("id", page_id)
+          .eq("user_id", user.id)
+          .single();
 
-      await supabaseAdmin
-        .from("pages")
-        .select("id")
-        .eq("id", page_id)
-        .eq("user_id", user.id)
-        .single();
+        const { count, error } = await supabaseAdmin
+          .from("page_email_subscribers")
+          .select("page_id", { count: "exact" })
+          .eq("page_id", page_id);
 
-      const { count, error } = await supabaseAdmin
-        .from("page_email_subscribers")
-        .select("page_id", { count: "exact" })
-        .eq("page_id", page_id);
+        if (error) {
+          console.error(error);
+          throw new Error("Failed to get email subscribers");
+        }
 
-      if (error) {
-        console.error(error);
-        throw new Error("Failed to get email subscribers");
+        return res.status(200).json({ count });
+      } catch (err) {
+        console.log("getEmailSubscribers: Error:", err);
+        res
+          .status(500)
+          .json({ error: { statusCode: 500, message: err.message } });
       }
-
-      return res.status(200).json({ count });
-    } catch (err) {
-      console.log("getEmailSubscribers: Error:", err);
-      res
-        .status(500)
-        .json({ error: { statusCode: 500, message: err.message } });
+    } else {
+      res.setHeader("Allow", "POST,PUT");
+      res.status(405).end("Method Not Allowed");
     }
-  } else {
-    res.setHeader("Allow", "POST,PUT");
-    res.status(405).end("Method Not Allowed");
   }
-};
+);
 
 export default getEmailSubscribers;
diff --git a/apps/web/pages/api/integrations/zapier/trigger-new-post.tsx b/apps/web/pages/api/integrations/zapier/trigger-new-post.tsx
index 2d17308..bd23176 100644
--- a/apps/web/pages/api/integrations/zapier/trigger-new-post.tsx
+++ b/apps/web/pages/api/integrations/zapier/trigger-new-post.tsx
@@ -1,6 +1,6 @@
 import { supabaseAdmin } from "@changes-page/supabase/admin";
 import { IErrorResponse } from "@changes-page/supabase/types/api";
-import { IPost } from "@changes-page/supabase/types/page";
+import { IPost, PostStatus } from "@changes-page/supabase/types/page";
 import type { NextApiRequest, NextApiResponse } from "next";
 import { getPageUrl, getPostUrl } from "../../../../utils/hooks/usePageUrl";
 import {
@@ -40,7 +40,7 @@ export default async function handler(
       .from("posts")
       .select("id,title,content,tags,created_at")
       .eq("page_id", String(pageDetails.id))
-      .eq("status", String(status))
+      .eq("status", status as PostStatus)
       .order("created_at", { ascending: false })
       .range(offset, limit - 1 + offset);
 
diff --git a/apps/web/pages/api/pages/new.ts b/apps/web/pages/api/pages/new.ts
index ee05531..7e47cc7 100644
--- a/apps/web/pages/api/pages/new.ts
+++ b/apps/web/pages/api/pages/new.ts
@@ -1,27 +1,20 @@
-import { IErrorResponse } from "@changes-page/supabase/types/api";
 import { IPage } from "@changes-page/supabase/types/page";
-import type { NextApiRequest, NextApiResponse } from "next";
 import { NewPageSchema } from "../../../data/schema";
 import { apiRateLimiter } from "../../../utils/rate-limit";
-import { getSupabaseServerClient } from "../../../utils/supabase/supabase-admin";
 import {
   createPage,
   getUserById,
   updateSubscriptionUsage,
 } from "../../../utils/useDatabase";
+import { withAuth } from "../../../utils/withAuth";
 
-const createNewPage = async (
-  req: NextApiRequest,
-  res: NextApiResponse<IPage | IErrorResponse>
-) => {
+const createNewPage = withAuth<IPage>(async (req, res, { user }) => {
   if (req.method === "POST") {
     await apiRateLimiter(req, res);
 
     const { url_slug, title, description, type } = req.body;
 
     try {
-      const { user } = await getSupabaseServerClient({ req, res });
-
       const { has_active_subscription } = await getUserById(user.id);
       if (!has_active_subscription) {
         return res.status(403).json({
@@ -65,6 +58,6 @@ const createNewPage = async (
     res.setHeader("Allow", "POST");
     res.status(405).end("Method Not Allowed");
   }
-};
+});
 
 export default createNewPage;
diff --git a/apps/web/pages/api/pages/reactions.ts b/apps/web/pages/api/pages/reactions.ts
index 6ec582d..ad1b5e0 100644
--- a/apps/web/pages/api/pages/reactions.ts
+++ b/apps/web/pages/api/pages/reactions.ts
@@ -1,58 +1,46 @@
 import { supabaseAdmin } from "@changes-page/supabase/admin";
-import type { NextApiRequest, NextApiResponse } from "next";
-import { getSupabaseServerClient } from "../../../utils/supabase/supabase-admin";
+import { withAuth } from "../../../utils/withAuth";
 
-export default async function getPostReactions(
-  req: NextApiRequest,
-  res: NextApiResponse<{ ok: boolean; aggregate: any }>
-) {
-  let { post_id } = req.query;
+export default withAuth<{ ok: boolean; aggregate: any }>(
+  async function getPostReactions(req, res) {
+    let { post_id } = req.query;
 
-  try {
-    const { user } = await getSupabaseServerClient({ req, res });
-    if (!user) {
-      return res.status(401).json({
-        ok: false,
-        aggregate: null,
-      });
-    }
+    try {
+      const { data: aggregate, error: aggregateError } =
+        await supabaseAdmin.rpc("post_reactions_aggregate", {
+          postid: String(post_id),
+        });
 
-    const { data: aggregate, error: aggregateError } = await supabaseAdmin.rpc(
-      "post_reactions_aggregate",
-      {
-        postid: String(post_id),
+      if (aggregateError) {
+        console.error("getPostReactions [Error]", aggregateError);
       }
-    );
 
-    if (aggregateError) {
-      console.error("getPostReactions [Error]", aggregateError);
-    }
+      if (!aggregate?.length) {
+        res.status(200).json({
+          ok: true,
+          aggregate: {
+            thumbs_up: 0,
+            thumbs_down: 0,
+            heart: 0,
+            sad: 0,
+            rocket: 0,
+          },
+        });
+      }
 
-    if (!aggregate?.length) {
       res.status(200).json({
         ok: true,
         aggregate: {
-          thumbs_up: 0,
-          thumbs_down: 0,
-          heart: 0,
-          sad: 0,
-          rocket: 0,
+          thumbs_up: aggregate[0].thumbs_up_count,
+          thumbs_down: aggregate[0].thumbs_down_count,
+          heart: aggregate[0].heart_count,
+          sad: aggregate[0].sad_count,
+          rocket: aggregate[0].rocket_count,
         },
       });
+    } catch (e: Error | any) {
+      console.log("getPostReactions [Error]", e);
+      res.status(500).json({ ok: false, aggregate: null });
     }
-
-    res.status(200).json({
-      ok: true,
-      aggregate: {
-        thumbs_up: aggregate[0].thumbs_up_count,
-        thumbs_down: aggregate[0].thumbs_down_count,
-        heart: aggregate[0].heart_count,
-        sad: aggregate[0].sad_count,
-        rocket: aggregate[0].rocket_count,
-      },
-    });
-  } catch (e: Error | any) {
-    console.log("getPostReactions [Error]", e);
-    res.status(500).json({ ok: false, aggregate: null });
   }
-}
+);
diff --git a/apps/web/pages/api/pages/settings/add-domain.ts b/apps/web/pages/api/pages/settings/add-domain.ts
index c1b688c..a16bf5c 100644
--- a/apps/web/pages/api/pages/settings/add-domain.ts
+++ b/apps/web/pages/api/pages/settings/add-domain.ts
@@ -1,10 +1,8 @@
-import { NextApiRequest, NextApiResponse } from "next";
 import { apiRateLimiter } from "../../../../utils/rate-limit";
-import { getSupabaseServerClient } from "../../../../utils/supabase/supabase-admin";
+import { withAuth } from "../../../../utils/withAuth";
 
-async function addDomain(req: NextApiRequest, res: NextApiResponse) {
+const addDomain = withAuth(async (req, res, { user }) => {
   await apiRateLimiter(req, res);
-  const { user } = await getSupabaseServerClient({ req, res });
 
   const { domain } = req.body;
 
@@ -49,6 +47,6 @@ async function addDomain(req: NextApiRequest, res: NextApiResponse) {
       success: true,
     });
   }
-}
+});
 
 export default addDomain;
diff --git a/apps/web/pages/api/pages/settings/check-domain.ts b/apps/web/pages/api/pages/settings/check-domain.ts
index 18db62f..d0951dd 100644
--- a/apps/web/pages/api/pages/settings/check-domain.ts
+++ b/apps/web/pages/api/pages/settings/check-domain.ts
@@ -1,10 +1,8 @@
-import { NextApiRequest, NextApiResponse } from "next";
 import { apiRateLimiter } from "../../../../utils/rate-limit";
-import { getSupabaseServerClient } from "../../../../utils/supabase/supabase-admin";
+import { withAuth } from "../../../../utils/withAuth";
 
-async function checkDomain(req: NextApiRequest, res: NextApiResponse) {
+const checkDomain = withAuth<{ valid: boolean }>(async (req, res, { user }) => {
   await apiRateLimiter(req, res);
-  const { user } = await getSupabaseServerClient({ req, res });
 
   const { domain } = req.query;
 
@@ -34,6 +32,6 @@ async function checkDomain(req: NextApiRequest, res: NextApiResponse) {
   res.status(200).json({
     valid,
   });
-}
+});
 
 export default checkDomain;
diff --git a/apps/web/pages/api/pages/settings/index.ts b/apps/web/pages/api/pages/settings/index.ts
index 72ba978..27e30b2 100644
--- a/apps/web/pages/api/pages/settings/index.ts
+++ b/apps/web/pages/api/pages/settings/index.ts
@@ -1,19 +1,12 @@
-import { IErrorResponse } from "@changes-page/supabase/types/api";
 import { IPageSettings } from "@changes-page/supabase/types/page";
-import type { NextApiRequest, NextApiResponse } from "next";
-import { getSupabaseServerClient } from "../../../../utils/supabase/supabase-admin";
 import { createOrRetrievePageSettings } from "../../../../utils/useDatabase";
+import { withAuth } from "../../../../utils/withAuth";
 
-const getPageSettings = async (
-  req: NextApiRequest,
-  res: NextApiResponse<IPageSettings | IErrorResponse>
-) => {
+const getPageSettings = withAuth<IPageSettings>(async (req, res, { user }) => {
   if (req.method === "GET") {
     const { page_id } = req.query;
 
     try {
-      const { user } = await getSupabaseServerClient({ req, res });
-
       console.log("getPageSettings", user?.id);
 
       const data = await createOrRetrievePageSettings(String(page_id));
@@ -29,6 +22,6 @@ const getPageSettings = async (
     res.setHeader("Allow", "POST");
     res.status(405).end("Method Not Allowed");
   }
-};
+});
 
 export default getPageSettings;
diff --git a/apps/web/pages/api/pages/settings/remove-domain.ts b/apps/web/pages/api/pages/settings/remove-domain.ts
index 137d9cb..5e05738 100644
--- a/apps/web/pages/api/pages/settings/remove-domain.ts
+++ b/apps/web/pages/api/pages/settings/remove-domain.ts
@@ -1,28 +1,47 @@
-import { NextApiRequest, NextApiResponse } from "next";
-import { getSupabaseServerClient } from "../../../../utils/supabase/supabase-admin";
+import { supabaseAdmin } from "@changes-page/supabase/admin";
+import isFQDN from "validator/lib/isFQDN";
+import { withAuth } from "../../../../utils/withAuth";
 
-async function removeDomain(req: NextApiRequest, res: NextApiResponse) {
-  const { user } = await getSupabaseServerClient({ req, res });
+const removeDomain = withAuth<{ success: boolean }>(
+  async (req, res, { user }) => {
+    const { domain } = req.body;
 
-  const { domain } = req.body;
+    console.log("removeDomain", user?.id, `domain: ${domain}`);
 
-  console.log("removeDomain", user?.id, `domain: ${domain}`);
+    if (
+      typeof domain !== "string" ||
+      !isFQDN(domain, { require_tld: true, allow_underscores: false })
+    ) {
+      return res.status(400).json({ success: false });
+    }
 
-  const response = await fetch(
-    `https://api.vercel.com/v8/projects/${process.env.VERCEL_PAGES_PROJECT_ID}/domains/${domain}?teamId=${process.env.VERCEL_TEAM_ID}`,
-    {
-      headers: {
-        Authorization: `Bearer ${process.env.VERCEL_AUTH_TOKEN}`,
-      },
-      method: "DELETE",
+    // check custom domain ownership
+    const { data, error } = await supabaseAdmin
+      .from("page_settings")
+      .select("page_id,custom_domain, pages(user_id)")
+      .eq("custom_domain", domain)
+      .single();
+    if (!data || error || data?.pages?.user_id !== user.id) {
+      return res.status(400).json({ success: false });
     }
-  );
 
-  await response.json();
+    const safeDomain = data.custom_domain;
+    const response = await fetch(
+      `https://api.vercel.com/v8/projects/${process.env.VERCEL_PAGES_PROJECT_ID}/domains/${safeDomain}?teamId=${process.env.VERCEL_TEAM_ID}`,
+      {
+        headers: {
+          Authorization: `Bearer ${process.env.VERCEL_AUTH_TOKEN}`,
+        },
+        method: "DELETE",
+      }
+    );
+
+    await response.json();
 
-  res.status(200).json({
-    success: true,
-  });
-}
+    res.status(200).json({
+      success: true,
+    });
+  }
+);
 
 export default removeDomain;
diff --git a/apps/web/pages/api/posts/index.ts b/apps/web/pages/api/posts/index.ts
index 1c31ed0..c8e9f1c 100644
--- a/apps/web/pages/api/posts/index.ts
+++ b/apps/web/pages/api/posts/index.ts
@@ -1,11 +1,10 @@
 import { PostStatus } from "@changes-page/supabase/types/page";
-import { NextApiRequest, NextApiResponse } from "next";
 import { NewPostSchema } from "../../../data/schema";
 import { apiRateLimiter } from "../../../utils/rate-limit";
-import { getSupabaseServerClient } from "../../../utils/supabase/supabase-admin";
 import { createPost } from "../../../utils/useDatabase";
+import { withAuth } from "../../../utils/withAuth";
 
-const createNewPost = async (req: NextApiRequest, res: NextApiResponse) => {
+const createNewPost = withAuth(async (req, res, { user, supabase }) => {
   if (req.method === "POST") {
     const {
       page_id,
@@ -24,8 +23,6 @@ const createNewPost = async (req: NextApiRequest, res: NextApiResponse) => {
     try {
       await apiRateLimiter(req, res);
 
-      const { user, supabase } = await getSupabaseServerClient({ req, res });
-
       const isValid = await NewPostSchema.isValid({
         page_id,
         title: title.trim(),
@@ -94,6 +91,6 @@ const createNewPost = async (req: NextApiRequest, res: NextApiResponse) => {
     res.setHeader("Allow", "POST,PUT");
     res.status(405).end("Method Not Allowed");
   }
-};
+});
 
 export default createNewPost;
diff --git a/apps/web/pages/api/teams/invite/accept/index.ts b/apps/web/pages/api/teams/invite/accept/index.ts
index 0b435c5..b8941cd 100644
--- a/apps/web/pages/api/teams/invite/accept/index.ts
+++ b/apps/web/pages/api/teams/invite/accept/index.ts
@@ -1,9 +1,8 @@
 import { supabaseAdmin } from "@changes-page/supabase/admin";
-import { NextApiRequest, NextApiResponse } from "next";
 import { apiRateLimiter } from "../../../../../utils/rate-limit";
-import { getSupabaseServerClient } from "../../../../../utils/supabase/supabase-admin";
+import { withAuth } from "../../../../../utils/withAuth";
 
-const acceptInvite = async (req: NextApiRequest, res: NextApiResponse) => {
+const acceptInvite = withAuth(async (req, res, { user, supabase }) => {
   if (req.method === "POST") {
     const { invite_id } = req.body;
     if (!invite_id) {
@@ -15,13 +14,6 @@ const acceptInvite = async (req: NextApiRequest, res: NextApiResponse) => {
     try {
       await apiRateLimiter(req, res);
 
-      const { user, supabase } = await getSupabaseServerClient({ req, res });
-      if (!user) {
-        return res.status(401).json({
-          error: { statusCode: 401, message: "Unauthorized" },
-        });
-      }
-
       const { data: invite } = await supabase
         .from("team_invitations")
         .select("*")
@@ -64,6 +56,6 @@ const acceptInvite = async (req: NextApiRequest, res: NextApiResponse) => {
     res.setHeader("Allow", "POST,PUT");
     res.status(405).end("Method Not Allowed");
   }
-};
+});
 
 export default acceptInvite;
diff --git a/apps/web/pages/api/teams/invite/index.ts b/apps/web/pages/api/teams/invite/index.ts
index 1e4c52b..e66b923 100644
--- a/apps/web/pages/api/teams/invite/index.ts
+++ b/apps/web/pages/api/teams/invite/index.ts
@@ -1,98 +1,92 @@
 import { supabaseAdmin } from "@changes-page/supabase/admin";
-import { NextApiRequest, NextApiResponse } from "next";
 import { ROUTES } from "../../../../data/routes.data";
 import { getAppBaseURL } from "../../../../utils/helpers";
 import inngestClient from "../../../../utils/inngest";
 import { apiRateLimiter } from "../../../../utils/rate-limit";
-import { getSupabaseServerClient } from "../../../../utils/supabase/supabase-admin";
 import { getUserById } from "../../../../utils/useDatabase";
+import { withAuth } from "../../../../utils/withAuth";
 
-const inviteUser = async (req: NextApiRequest, res: NextApiResponse) => {
-  if (req.method === "POST") {
-    const { team_id, email } = req.body;
-    if (!team_id || !email) {
-      return res.status(400).json({
-        error: { statusCode: 400, message: "Invalid request" },
-      });
-    }
-
-    try {
-      await apiRateLimiter(req, res);
-
-      const { user, supabase } = await getSupabaseServerClient({ req, res });
-      if (!user) {
-        return res.status(401).json({
-          error: { statusCode: 401, message: "Unauthorized" },
+const inviteUser = withAuth<{ ok: boolean }>(
+  async (req, res, { user, supabase }) => {
+    if (req.method === "POST") {
+      const { team_id, email } = req.body;
+      if (!team_id || !email) {
+        return res.status(400).json({
+          error: { statusCode: 400, message: "Invalid request" },
         });
       }
 
-      const { has_active_subscription } = await getUserById(user.id);
-      if (!has_active_subscription) {
-        return res.status(403).json({
-          error: { statusCode: 403, message: "Missing subscription" },
-        });
-      }
+      try {
+        await apiRateLimiter(req, res);
 
-      if (user.email === email) {
-        return res.status(400).json({
-          error: { statusCode: 400, message: "You cannot invite yourself" },
-        });
-      }
+        const { has_active_subscription } = await getUserById(user.id);
+        if (!has_active_subscription) {
+          return res.status(403).json({
+            error: { statusCode: 403, message: "Missing subscription" },
+          });
+        }
 
-      const { data: team } = await supabase
-        .from("teams")
-        .select("*")
-        .eq("id", team_id)
-        .eq("owner_id", user.id)
-        .single();
+        if (user.email === email) {
+          return res.status(400).json({
+            error: { statusCode: 400, message: "You cannot invite yourself" },
+          });
+        }
 
-      if (!team) {
-        return res.status(403).json({
-          error: { statusCode: 403, message: "Team not found" },
-        });
-      }
+        const { data: team } = await supabase
+          .from("teams")
+          .select("*")
+          .eq("id", team_id)
+          .eq("owner_id", user.id)
+          .single();
 
-      const { data: invitation, error: invitationError } = await supabaseAdmin
-        .from("team_invitations")
-        .insert({
-          team_id,
-          inviter_id: user.id,
-          email,
-          role: "editor",
-          status: "pending",
-        })
-        .select()
-        .single();
+        if (!team) {
+          return res.status(403).json({
+            error: { statusCode: 403, message: "Team not found" },
+          });
+        }
 
-      if (!invitation) {
-        return res.status(500).json({
-          error: { statusCode: 500, message: "Failed to create invitation" },
-        });
-      }
+        const { data: invitation, error: invitationError } = await supabaseAdmin
+          .from("team_invitations")
+          .insert({
+            team_id,
+            inviter_id: user.id,
+            email,
+            role: "editor",
+            status: "pending",
+          })
+          .select()
+          .single();
+
+        if (!invitation || invitationError) {
+          return res.status(500).json({
+            error: { statusCode: 500, message: "Failed to create invitation" },
+          });
+        }
 
-      await inngestClient.send({
-        name: "email/team.invite",
-        data: {
-          email,
-          payload: {
-            owner_name: user.user_metadata?.name ?? user.email,
-            team_name: team.name,
-            confirm_link: `${getAppBaseURL()}${ROUTES.TEAMS}`,
+        await inngestClient.send({
+          name: "email/team.invite",
+          data: {
+            email,
+            payload: {
+              owner_name: user.user_metadata?.name ?? user.email,
+              team_name: team.name,
+              confirm_link: `${getAppBaseURL()}${ROUTES.TEAMS}`,
+            },
           },
-        },
-      });
+        });
 
-      return res.status(201).json({ ok: true });
-    } catch (err) {
-      console.log("inviteUser", err);
-      res
-        .status(500)
-        .json({ error: { statusCode: 500, message: err.message } });
+        return res.status(201).json({ ok: true });
+      } catch (err) {
+        console.log("inviteUser", err);
+        res
+          .status(500)
+          .json({ error: { statusCode: 500, message: err.message } });
+      }
+    } else {
+      res.setHeader("Allow", "POST,PUT");
+      res.status(405).end("Method Not Allowed");
     }
-  } else {
-    res.setHeader("Allow", "POST,PUT");
-    res.status(405).end("Method Not Allowed");
   }
-};
+);
 
 export default inviteUser;
diff --git a/apps/web/pages/api/teams/member/[id]/index.ts b/apps/web/pages/api/teams/member/[id]/index.ts
index 47091ac..7d04744 100644
--- a/apps/web/pages/api/teams/member/[id]/index.ts
+++ b/apps/web/pages/api/teams/member/[id]/index.ts
@@ -1,13 +1,9 @@
 import { supabaseAdmin } from "@changes-page/supabase/admin";
-import { NextApiRequest, NextApiResponse } from "next";
 import { apiRateLimiter } from "../../../../../utils/rate-limit";
-import { getSupabaseServerClient } from "../../../../../utils/supabase/supabase-admin";
 import { getUserById } from "../../../../../utils/useDatabase";
+import { withAuth } from "../../../../../utils/withAuth";
 
-const getTeamMemberDetails = async (
-  req: NextApiRequest,
-  res: NextApiResponse
-) => {
+const getTeamMemberDetails = withAuth(async (req, res, { user }) => {
   if (req.method === "GET") {
     const { id } = req.query;
     if (!id) {
@@ -19,8 +15,6 @@ const getTeamMemberDetails = async (
     try {
       await apiRateLimiter(req, res);
 
-      const { user } = await getSupabaseServerClient({ req, res });
-
       const { has_active_subscription } = await getUserById(user.id);
       if (!has_active_subscription) {
         return res.status(403).json({
@@ -31,7 +25,7 @@ const getTeamMemberDetails = async (
       const { data: teamMember, error: teamMemberError } = await supabaseAdmin
         .from("team_members")
         .select("*")
-        .eq("id", id)
+        .eq("id", String(id))
         .single();
 
       if (teamMemberError) {
@@ -62,6 +56,6 @@ const getTeamMemberDetails = async (
     res.setHeader("Allow", "GET");
     res.status(405).end("Method Not Allowed");
   }
-};
+});
 
 export default getTeamMemberDetails;
diff --git a/apps/web/pages/free-tools/release-calendar.tsx b/apps/web/pages/free-tools/release-calendar.tsx
index 91a2a15..83c5a4d 100644
--- a/apps/web/pages/free-tools/release-calendar.tsx
+++ b/apps/web/pages/free-tools/release-calendar.tsx
@@ -1,9 +1,14 @@
-import { CalendarIcon, RefreshIcon, ViewGridIcon, ViewListIcon, PresentationChartLineIcon } from "@heroicons/react/solid";
+import {
+  CalendarIcon,
+  PresentationChartLineIcon,
+  RefreshIcon,
+  ViewGridIcon,
+  ViewListIcon,
+} from "@heroicons/react/solid";
 import classNames from "classnames";
 import { InferGetServerSidePropsType } from "next";
 import Head from "next/head";
-import Link from "next/link";
-import { useCallback, useState, useEffect } from "react";
+import { useCallback, useEffect, useState } from "react";
 import {
   createToastWrapper,
   notifyError,
@@ -38,25 +43,25 @@ export default function ReleaseCalendar({
 
   // Load data from localStorage on mount
   useEffect(() => {
-    if (typeof window !== 'undefined') {
+    if (typeof window !== "undefined") {
       try {
-        const savedReleases = localStorage.getItem('release-calendar-data');
+        const savedReleases = localStorage.getItem("release-calendar-data");
         if (savedReleases) {
           setReleases(JSON.parse(savedReleases));
         }
       } catch (error) {
-        console.error('Failed to load releases from localStorage:', error);
+        console.error("Failed to load releases from localStorage:", error);
       }
     }
   }, []);
 
   // Save data to localStorage whenever releases change
   useEffect(() => {
-    if (typeof window !== 'undefined') {
+    if (typeof window !== "undefined") {
       try {
-        localStorage.setItem('release-calendar-data', JSON.stringify(releases));
+        localStorage.setItem("release-calendar-data", JSON.stringify(releases));
       } catch (error) {
-        console.error('Failed to save releases to localStorage:', error);
+        console.error("Failed to save releases to localStorage:", error);
       }
     }
   }, [releases]);
@@ -64,7 +69,7 @@ export default function ReleaseCalendar({
   const [showAddForm, setShowAddForm] = useState(false);
   const [editingRelease, setEditingRelease] = useState<Release | null>(null);
   const [presentationMode, setPresentationMode] = useState(false);
-  
+
   // Form state
   const [formData, setFormData] = useState({
     version: "",
@@ -75,7 +80,6 @@ export default function ReleaseCalendar({
     description: "",
   });
 
-
   // Generate unique ID for releases
   const generateId = useCallback(() => {
     return Date.now().toString(36) + Math.random().toString(36).substr(2);
@@ -83,7 +87,11 @@ export default function ReleaseCalendar({
 
   // Add or update release
   const handleSaveRelease = useCallback(() => {
-    if (!formData.version.trim() || !formData.date.trim() || !formData.title.trim()) {
+    if (
+      !formData.version.trim() ||
+      !formData.date.trim() ||
+      !formData.title.trim()
+    ) {
       notifyError("Please fill in version, date, and title fields");
       return;
     }
@@ -99,10 +107,12 @@ export default function ReleaseCalendar({
     };
 
     if (editingRelease) {
-      setReleases(prev => prev.map(r => r.id === editingRelease.id ? releaseData : r));
+      setReleases((prev) =>
+        prev.map((r) => (r.id === editingRelease.id ? releaseData : r))
+      );
       notifySuccess("Release updated successfully");
     } else {
-      setReleases(prev => [...prev, releaseData]);
+      setReleases((prev) => [...prev, releaseData]);
       notifySuccess("Release added successfully");
     }
 
@@ -135,7 +145,7 @@ export default function ReleaseCalendar({
 
   // Delete release
   const handleDeleteRelease = useCallback((id: string) => {
-    setReleases(prev => prev.filter(r => r.id !== id));
+    setReleases((prev) => prev.filter((r) => r.id !== id));
     notifySuccess("Release deleted successfully");
   }, []);
 
@@ -154,15 +164,15 @@ export default function ReleaseCalendar({
     setEditingRelease(null);
     setPresentationMode(false);
     // Clear localStorage
-    if (typeof window !== 'undefined') {
-      localStorage.removeItem('release-calendar-data');
+    if (typeof window !== "undefined") {
+      localStorage.removeItem("release-calendar-data");
     }
     notifySuccess("All data cleared");
   }, []);
 
   // Toggle presentation mode
   const togglePresentationMode = useCallback(() => {
-    setPresentationMode(prev => !prev);
+    setPresentationMode((prev) => !prev);
     if (!presentationMode) {
       // Hide forms when entering presentation mode
       setShowAddForm(false);
@@ -173,13 +183,13 @@ export default function ReleaseCalendar({
   // Exit presentation mode with Escape key
   useEffect(() => {
     const handleKeyPress = (event: KeyboardEvent) => {
-      if (event.key === 'Escape' && presentationMode) {
+      if (event.key === "Escape" && presentationMode) {
         setPresentationMode(false);
       }
     };
 
-    document.addEventListener('keydown', handleKeyPress);
-    return () => document.removeEventListener('keydown', handleKeyPress);
+    document.addEventListener("keydown", handleKeyPress);
+    return () => document.removeEventListener("keydown", handleKeyPress);
   }, [presentationMode]);
 
   // Generate sample data
@@ -189,88 +199,116 @@ export default function ReleaseCalendar({
       {
         id: generateId(),
         version: "2.1.0",
-        date: new Date(today.getTime() + 7 * 24 * 60 * 60 * 1000).toISOString().split('T')[0],
+        date: new Date(today.getTime() + 7 * 24 * 60 * 60 * 1000)
+          .toISOString()
+          .split("T")[0],
         title: "New Dashboard Features",
         type: "minor",
         status: "planned",
-        description: "Enhanced analytics dashboard with real-time metrics"
+        description: "Enhanced analytics dashboard with real-time metrics",
       },
       {
         id: generateId(),
         version: "2.0.1",
-        date: new Date(today.getTime() - 5 * 24 * 60 * 60 * 1000).toISOString().split('T')[0],
+        date: new Date(today.getTime() - 5 * 24 * 60 * 60 * 1000)
+          .toISOString()
+          .split("T")[0],
         title: "Bug Fixes",
         type: "patch",
         status: "released",
-        description: "Fixed authentication issues and improved performance"
+        description: "Fixed authentication issues and improved performance",
       },
       {
         id: generateId(),
         version: "2.2.0",
-        date: new Date(today.getTime() + 21 * 24 * 60 * 60 * 1000).toISOString().split('T')[0],
+        date: new Date(today.getTime() + 21 * 24 * 60 * 60 * 1000)
+          .toISOString()
+          .split("T")[0],
         title: "API v3 Launch",
         type: "major",
         status: "in-progress",
-        description: "Complete API overhaul with breaking changes"
+        description: "Complete API overhaul with breaking changes",
       },
       {
         id: generateId(),
         version: "2.1.1",
-        date: new Date(today.getTime() + 14 * 24 * 60 * 60 * 1000).toISOString().split('T')[0],
+        date: new Date(today.getTime() + 14 * 24 * 60 * 60 * 1000)
+          .toISOString()
+          .split("T")[0],
         title: "Security Patch",
         type: "hotfix",
         status: "planned",
-        description: "Critical security vulnerability fix"
-      }
+        description: "Critical security vulnerability fix",
+      },
     ];
     setReleases(sampleReleases);
     notifySuccess("Sample data loaded");
   }, [generateId]);
 
-
-
   // Sort releases by date
-  const sortedReleases = [...releases].sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
+  const sortedReleases = [...releases].sort(
+    (a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()
+  );
 
   // Get release type styles and emojis
   const getReleaseTypeStyles = (type: Release["type"]) => {
     switch (type) {
-      case "major": return "bg-red-600 text-white font-semibold";
-      case "minor": return "bg-blue-600 text-white font-semibold";
-      case "patch": return "bg-green-600 text-white font-semibold";
-      case "hotfix": return "bg-orange-600 text-white font-semibold";
-      default: return "bg-gray-600 text-white font-semibold";
+      case "major":
+        return "bg-red-600 text-white font-semibold";
+      case "minor":
+        return "bg-blue-600 text-white font-semibold";
+      case "patch":
+        return "bg-green-600 text-white font-semibold";
+      case "hotfix":
+        return "bg-orange-600 text-white font-semibold";
+      default:
+        return "bg-gray-600 text-white font-semibold";
     }
   };
 
   const getReleaseTypeEmoji = (type: Release["type"]) => {
     switch (type) {
-      case "major": return "🚀";
-      case "minor": return "✨";
-      case "patch": return "🔧";
-      case "hotfix": return "🚨";
-      default: return "📦";
+      case "major":
+        return "🚀";
+      case "minor":
+        return "✨";
+      case "patch":
+        return "🔧";
+      case "hotfix":
+        return "🚨";
+      default:
+        return "📦";
     }
   };
 
   // Get status styles and emojis
   const getStatusStyles = (status: Release["status"]) => {
     switch (status) {
-      case "planned": return "bg-gray-700 text-white border-gray-600";
-      case "in-progress": return "bg-yellow-600 text-white border-yellow-500";
-      case "released": return "bg-green-600 text-white border-green-500";
-      case "delayed": return "bg-red-600 text-white border-red-500";
-      default: return "bg-gray-700 text-white border-gray-600";
+      case "planned":
+        return "bg-gray-700 text-white border-gray-600";
+      case "in-progress":
+        return "bg-yellow-600 text-white border-yellow-500";
+      case "released":
+        return "bg-green-600 text-white border-green-500";
+      case "delayed":
+        return "bg-red-600 text-white border-red-500";
+      default:
+        return "bg-gray-700 text-white border-gray-600";
     }
   };
 
   const getStatusEmoji = (status: Release["status"]) => {
     switch (status) {
-      case "planned": return "📅";
-      case "in-progress": return "⚡";
-      case "released": return "✅";
-      case "delayed": return "⏰";
-      default: return "📋";
+      case "planned":
+        return "📅";
+      case "in-progress":
+        return "⚡";
+      case "released":
+        return "✅";
+      case "delayed":
+        return "⏰";
+      default:
+        return "📋";
     }
   };
 
@@ -281,13 +319,18 @@ export default function ReleaseCalendar({
           <title>{title}</title>
         </Head>
         {createToastWrapper(theme)}
-        
+
         {/* Presentation Header */}
         <div className="bg-gray-800 border-b border-gray-700 px-6 py-4">
           <div className="flex items-center justify-between max-w-7xl mx-auto">
             <div>
-              <h1 className="text-2xl font-bold text-white">Release Timeline - Presentation Mode</h1>
-              <p className="text-gray-400 text-sm">Press ESC to exit • Use view toggle to switch between timeline and calendar</p>
+              <h1 className="text-2xl font-bold text-white">
+                Release Timeline - Presentation Mode
+              </h1>
+              <p className="text-gray-400 text-sm">
+                Press ESC to exit • Use view toggle to switch between timeline
+                and calendar
+              </p>
             </div>
             <div className="flex items-center gap-4">
               {/* View Mode Toggle */}
@@ -332,57 +375,77 @@ export default function ReleaseCalendar({
           {releases.length === 0 ? (
             <div className="text-center py-20">
               <CalendarIcon className="mx-auto h-16 w-16 text-gray-400 mb-6" />
-              <p className="text-gray-400 text-xl mb-4">No releases to present</p>
-              <p className="text-gray-500 text-lg">Exit presentation mode to add releases</p>
+              <p className="text-gray-400 text-xl mb-4">
+                No releases to present
+              </p>
+              <p className="text-gray-500 text-lg">
+                Exit presentation mode to add releases
+              </p>
             </div>
           ) : viewMode === "timeline" ? (
             <div className="space-y-8">
-              <h2 className="text-3xl font-bold text-white text-center mb-12">Release Timeline</h2>
+              <h2 className="text-3xl font-bold text-white text-center mb-12">
+                Release Timeline
+              </h2>
               <div className="relative">
                 {/* Main timeline line */}
                 <div className="absolute left-8 top-0 bottom-0 w-1 bg-gray-600"></div>
-                
+
                 <div className="space-y-12">
                   {sortedReleases.map((release, index) => (
                     <div key={release.id} className="relative">
                       {/* Timeline dot */}
-                      <div className={classNames(
-                        "absolute left-5 w-8 h-8 rounded-full border-4 border-gray-900",
-                        getReleaseTypeStyles(release.type)
-                      )}></div>
-                      
+                      <div
+                        className={classNames(
+                          "absolute left-5 w-8 h-8 rounded-full border-4 border-gray-900",
+                          getReleaseTypeStyles(release.type)
+                        )}
+                      ></div>
+
                       {/* Content */}
                       <div className="ml-20">
-                        <div className={classNames(
-                          "relative p-8 shadow-2xl transform rotate-1 hover:rotate-0 transition-transform duration-300",
-                          // Sticky note colors based on release type
-                          release.type === "major" ? "bg-red-200" :
-                          release.type === "minor" ? "bg-blue-200" :
-                          release.type === "patch" ? "bg-green-200" :
-                          release.type === "hotfix" ? "bg-orange-200" :
-                          "bg-yellow-200"
-                        )}>
+                        <div
+                          className={classNames(
+                            "relative p-8 shadow-2xl transform rotate-1 hover:rotate-0 transition-transform duration-300",
+                            // Sticky note colors based on release type
+                            release.type === "major"
+                              ? "bg-red-200"
+                              : release.type === "minor"
+                              ? "bg-blue-200"
+                              : release.type === "patch"
+                              ? "bg-green-200"
+                              : release.type === "hotfix"
+                              ? "bg-orange-200"
+                              : "bg-yellow-200"
+                          )}
+                        >
                           {/* Tape effect */}
                           <div className="absolute -top-3 left-6 w-20 h-8 bg-gray-400/30 rounded transform -rotate-12"></div>
                           <div className="absolute -top-3 right-12 w-16 h-6 bg-gray-400/30 rounded transform rotate-6"></div>
-                          
+
                           {/* Shadow effect */}
                           <div className="absolute inset-0 bg-black/10 rounded transform translate-x-2 translate-y-2 -z-10"></div>
-                          
+
                           <div className="flex flex-col lg:flex-row lg:items-start justify-between gap-6">
                             <div className="flex-1 min-w-0">
                               <div className="flex flex-wrap items-center gap-3 mb-4">
-                                <span className={classNames(
-                                  "px-4 py-2 text-sm font-semibold rounded-full uppercase flex items-center gap-2 shadow-md",
-                                  getReleaseTypeStyles(release.type)
-                                )}>
-                                  <span className="text-lg">{getReleaseTypeEmoji(release.type)}</span>
+                                <span
+                                  className={classNames(
+                                    "px-4 py-2 text-sm font-semibold rounded-full uppercase flex items-center gap-2 shadow-md",
+                                    getReleaseTypeStyles(release.type)
+                                  )}
+                                >
+                                  <span className="text-lg">
+                                    {getReleaseTypeEmoji(release.type)}
+                                  </span>
                                   {release.type}
                                 </span>
-                                <span className={classNames(
-                                  "px-4 py-2 text-sm font-medium rounded-full border flex items-center gap-2 shadow-md",
-                                  getStatusStyles(release.status)
-                                )}>
+                                <span
+                                  className={classNames(
+                                    "px-4 py-2 text-sm font-medium rounded-full border flex items-center gap-2 shadow-md",
+                                    getStatusStyles(release.status)
+                                  )}
+                                >
                                   <span>{getStatusEmoji(release.status)}</span>
                                   {release.status.replace("-", " ")}
                                 </span>
@@ -391,12 +454,15 @@ export default function ReleaseCalendar({
                                 {release.version} - {release.title}
                               </h3>
                               <p className="text-gray-700 text-lg mb-4 font-medium">
-                                {new Date(release.date).toLocaleDateString('en-US', {
-                                  weekday: 'long',
-                                  year: 'numeric',
-                                  month: 'long',
-                                  day: 'numeric'
-                                })}
+                                {new Date(release.date).toLocaleDateString(
+                                  "en-US",
+                                  {
+                                    weekday: "long",
+                                    year: "numeric",
+                                    month: "long",
+                                    day: "numeric",
+                                  }
+                                )}
                               </p>
                               {release.description && (
                                 <p className="text-gray-800 text-lg leading-relaxed break-words">
@@ -405,7 +471,7 @@ export default function ReleaseCalendar({
                               )}
                             </div>
                           </div>
-                          
+
                           {/* Sticky note lines */}
                           <div className="absolute bottom-6 left-8 right-8">
                             <div className="border-b border-gray-400/30 mb-2"></div>
@@ -422,62 +488,94 @@ export default function ReleaseCalendar({
           ) : (
             // Calendar View
             <div className="space-y-8">
-              <h2 className="text-3xl font-bold text-white text-center mb-12">Release Calendar</h2>
+              <h2 className="text-3xl font-bold text-white text-center mb-12">
+                Release Calendar
+              </h2>
               {(() => {
                 // Get current month or the month with releases
                 const today = new Date();
-                const releaseMonths = sortedReleases.length > 0 
-                  ? [...new Set(sortedReleases.map(r => new Date(r.date).toISOString().slice(0, 7)))]
-                  : [today.toISOString().slice(0, 7)];
-                
-                return releaseMonths.map(monthStr => {
-                  const [year, month] = monthStr.split('-').map(Number);
+                const releaseMonths =
+                  sortedReleases.length > 0
+                    ? [
+                        ...Array.from(
+                          new Set(
+                            sortedReleases.map((r) =>
+                              new Date(r.date).toISOString().slice(0, 7)
+                            )
+                          )
+                        ),
+                      ]
+                    : [today.toISOString().slice(0, 7)];
+
+                return releaseMonths.map((monthStr) => {
+                  const [year, month] = monthStr.split("-").map(Number);
                   const firstDay = new Date(year, month - 1, 1);
-                  const lastDay = new Date(year, month, 0);
                   const startDate = new Date(firstDay);
                   startDate.setDate(startDate.getDate() - firstDay.getDay()); // Start from Sunday
-                  
-                  const monthReleases = sortedReleases.filter(r => 
-                    new Date(r.date).toISOString().slice(0, 7) === monthStr
+
+                  const monthReleases = sortedReleases.filter(
+                    (r) =>
+                      new Date(r.date).toISOString().slice(0, 7) === monthStr
                   );
-                  
+
                   // Generate calendar days
                   const calendarDays = [];
                   const currentDate = new Date(startDate);
-                  
-                  for (let i = 0; i < 42; i++) { // 6 weeks * 7 days
-                    const dayReleases = monthReleases.filter(r => 
-                      new Date(r.date).toDateString() === currentDate.toDateString()
+
+                  for (let i = 0; i < 42; i++) {
+                    // 6 weeks * 7 days
+                    const dayReleases = monthReleases.filter(
+                      (r) =>
+                        new Date(r.date).toDateString() ===
+                        currentDate.toDateString()
                     );
-                    
+
                     calendarDays.push({
                       date: new Date(currentDate),
                       isCurrentMonth: currentDate.getMonth() === month - 1,
-                      isToday: currentDate.toDateString() === today.toDateString(),
-                      releases: dayReleases
+                      isToday:
+                        currentDate.toDateString() === today.toDateString(),
+                      releases: dayReleases,
                     });
-                    
+
                     currentDate.setDate(currentDate.getDate() + 1);
                   }
-                  
+
                   return (
-                    <div key={monthStr} className="bg-white/5 rounded-lg p-8 border border-white/10">
+                    <div
+                      key={monthStr}
+                      className="bg-white/5 rounded-lg p-8 border border-white/10"
+                    >
                       {/* Calendar Header */}
                       <div className="mb-8">
                         <h3 className="text-4xl font-bold text-white text-center">
-                          {firstDay.toLocaleDateString('en-US', { month: 'long', year: 'numeric' })}
+                          {firstDay.toLocaleDateString("en-US", {
+                            month: "long",
+                            year: "numeric",
+                          })}
                         </h3>
                       </div>
-                      
+
                       {/* Days of Week Header */}
                       <div className="grid grid-cols-7 gap-3 mb-4">
-                        {['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'].map(day => (
-                          <div key={day} className="text-center text-lg font-semibold text-gray-400 py-3">
+                        {[
+                          "Sunday",
+                          "Monday",
+                          "Tuesday",
+                          "Wednesday",
+                          "Thursday",
+                          "Friday",
+                          "Saturday",
+                        ].map((day) => (
+                          <div
+                            key={day}
+                            className="text-center text-lg font-semibold text-gray-400 py-3"
+                          >
                             {day}
                           </div>
                         ))}
                       </div>
-                      
+
                       {/* Calendar Grid */}
                       <div className="grid grid-cols-7 gap-3">
                         {calendarDays.map((day, index) => (
@@ -485,20 +583,26 @@ export default function ReleaseCalendar({
                             key={index}
                             className={classNames(
                               "min-h-[120px] p-3 border border-white/10 rounded-lg relative",
-                              day.isCurrentMonth ? "bg-white/5" : "bg-gray-800/50",
+                              day.isCurrentMonth
+                                ? "bg-white/5"
+                                : "bg-gray-800/50",
                               day.isToday ? "ring-2 ring-indigo-500" : "",
                               day.releases.length > 0 ? "bg-indigo-900/20" : ""
                             )}
                           >
                             {/* Date Number */}
-                            <div className={classNames(
-                              "text-lg font-medium mb-2",
-                              day.isCurrentMonth ? "text-white" : "text-gray-500",
-                              day.isToday ? "text-indigo-400 font-bold" : ""
-                            )}>
+                            <div
+                              className={classNames(
+                                "text-lg font-medium mb-2",
+                                day.isCurrentMonth
+                                  ? "text-white"
+                                  : "text-gray-500",
+                                day.isToday ? "text-indigo-400 font-bold" : ""
+                              )}
+                            >
                               {day.date.getDate()}
                             </div>
-                            
+
                             {/* Releases for this day */}
                             <div className="space-y-1">
                               {day.releases.slice(0, 3).map((release, idx) => (
@@ -506,18 +610,34 @@ export default function ReleaseCalendar({
                                   key={release.id}
                                   className={classNames(
                                     "text-sm px-2 py-1 rounded cursor-pointer transition-all hover:scale-105 flex items-center gap-2 font-medium",
-                                    release.type === "major" ? "bg-red-600 text-white" :
-                                    release.type === "minor" ? "bg-blue-600 text-white" :
-                                    release.type === "patch" ? "bg-green-600 text-white" :
-                                    release.type === "hotfix" ? "bg-orange-600 text-white" :
-                                    "bg-gray-600 text-white"
+                                    release.type === "major"
+                                      ? "bg-red-600 text-white"
+                                      : release.type === "minor"
+                                      ? "bg-blue-600 text-white"
+                                      : release.type === "patch"
+                                      ? "bg-green-600 text-white"
+                                      : release.type === "hotfix"
+                                      ? "bg-orange-600 text-white"
+                                      : "bg-gray-600 text-white"
                                   )}
-                                  title={`${release.version} - ${release.title}${release.description ? '\n' + release.description : ''}`}
+                                  title={`${release.version} - ${
+                                    release.title
+                                  }${
+                                    release.description
+                                      ? "\n" + release.description
+                                      : ""
+                                  }`}
                                 >
-                                  <span>{getReleaseTypeEmoji(release.type)}</span>
+                                  <span>
+                                    {getReleaseTypeEmoji(release.type)}
+                                  </span>
                                   <div className="flex-1 min-w-0">
-                                    <div className="truncate">{release.version}</div>
-                                    <div className="truncate text-xs opacity-90">{release.title}</div>
+                                    <div className="truncate">
+                                      {release.version}
+                                    </div>
+                                    <div className="truncate text-xs opacity-90">
+                                      {release.title}
+                                    </div>
                                   </div>
                                 </div>
                               ))}
@@ -530,20 +650,29 @@ export default function ReleaseCalendar({
                           </div>
                         ))}
                       </div>
-                      
+
                       {/* Month Legend */}
                       {monthReleases.length > 0 && (
                         <div className="mt-8 pt-6 border-t border-white/10">
-                          <h4 className="text-xl font-semibold text-white mb-4">Releases this month:</h4>
+                          <h4 className="text-xl font-semibold text-white mb-4">
+                            Releases this month:
+                          </h4>
                           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                            {monthReleases.map(release => (
-                              <div key={release.id} className="flex items-center justify-between bg-white/5 rounded-lg p-4">
+                            {monthReleases.map((release) => (
+                              <div
+                                key={release.id}
+                                className="flex items-center justify-between bg-white/5 rounded-lg p-4"
+                              >
                                 <div className="flex items-center gap-4">
-                                  <span className={classNames(
-                                    "px-3 py-1 text-sm font-medium rounded uppercase flex items-center gap-2",
-                                    getReleaseTypeStyles(release.type)
-                                  )}>
-                                    <span>{getReleaseTypeEmoji(release.type)}</span>
+                                  <span
+                                    className={classNames(
+                                      "px-3 py-1 text-sm font-medium rounded uppercase flex items-center gap-2",
+                                      getReleaseTypeStyles(release.type)
+                                    )}
+                                  >
+                                    <span>
+                                      {getReleaseTypeEmoji(release.type)}
+                                    </span>
                                     {release.type}
                                   </span>
                                   <div>
@@ -551,9 +680,11 @@ export default function ReleaseCalendar({
                                       {release.version} - {release.title}
                                     </div>
                                     <div className="text-gray-400 text-sm">
-                                      {new Date(release.date).toLocaleDateString('en-US', {
-                                        month: 'long',
-                                        day: 'numeric'
+                                      {new Date(
+                                        release.date
+                                      ).toLocaleDateString("en-US", {
+                                        month: "long",
+                                        day: "numeric",
                                       })}
                                     </div>
                                     {release.description && (
@@ -586,25 +717,25 @@ export default function ReleaseCalendar({
         <meta name="description" content={description} />
         <meta name="keywords" content={keywords} />
         <link rel="canonical" href={canonicalUrl} />
-        
+
         {/* Open Graph Meta Tags */}
         <meta property="og:title" content={title} />
         <meta property="og:description" content={description} />
         <meta property="og:type" content="website" />
         <meta property="og:url" content={canonicalUrl} />
         <meta property="og:site_name" content="Changes.page" />
-        
+
         {/* Twitter Card Meta Tags */}
         <meta name="twitter:card" content="summary_large_image" />
         <meta name="twitter:title" content={title} />
         <meta name="twitter:description" content={description} />
         <meta name="twitter:site" content="@techulus" />
-        
+
         {/* Additional SEO Meta Tags */}
         <meta name="robots" content="index, follow" />
         <meta name="author" content="Changes.page" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        
+
         {/* Structured Data */}
         <script
           type="application/ld+json"
@@ -612,22 +743,22 @@ export default function ReleaseCalendar({
             __html: JSON.stringify({
               "@context": "https://schema.org",
               "@type": "WebApplication",
-              "name": "Release Calendar & Timeline Visualizer",
-              "description": description,
-              "url": canonicalUrl,
-              "applicationCategory": "DeveloperApplication",
-              "operatingSystem": "All",
-              "offers": {
+              name: "Release Calendar & Timeline Visualizer",
+              description: description,
+              url: canonicalUrl,
+              applicationCategory: "DeveloperApplication",
+              operatingSystem: "All",
+              offers: {
                 "@type": "Offer",
-                "price": "0",
-                "priceCurrency": "USD"
+                price: "0",
+                priceCurrency: "USD",
               },
-              "creator": {
+              creator: {
                 "@type": "Organization",
-                "name": "Changes.page",
-                "url": "https://changes.page"
-              }
-            })
+                name: "Changes.page",
+                url: "https://changes.page",
+              },
+            }),
           }}
         />
       </Head>
@@ -636,7 +767,6 @@ export default function ReleaseCalendar({
       <div className="relative isolate bg-gray-900">
         <div className="mx-auto max-w-7xl px-6 py-12 sm:py-16 lg:px-8">
           <div className="mx-auto max-w-6xl">
-            
             {/* Controls */}
             <div className="mb-6 flex flex-wrap items-center justify-between gap-4">
               <div className="flex items-center gap-4">
@@ -736,7 +866,12 @@ export default function ReleaseCalendar({
                     <input
                       type="text"
                       value={formData.version}
-                      onChange={(e) => setFormData(prev => ({ ...prev, version: e.target.value }))}
+                      onChange={(e) =>
+                        setFormData((prev) => ({
+                          ...prev,
+                          version: e.target.value,
+                        }))
+                      }
                       placeholder="1.0.0"
                       className="w-full rounded-md border-0 bg-white/5 px-3 py-2 text-white shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-indigo-500 text-sm"
                     />
@@ -749,7 +884,12 @@ export default function ReleaseCalendar({
                     <input
                       type="date"
                       value={formData.date}
-                      onChange={(e) => setFormData(prev => ({ ...prev, date: e.target.value }))}
+                      onChange={(e) =>
+                        setFormData((prev) => ({
+                          ...prev,
+                          date: e.target.value,
+                        }))
+                      }
                       className="w-full rounded-md border-0 bg-white/5 px-3 py-2 text-white shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-indigo-500 text-sm"
                     />
                   </div>
@@ -761,7 +901,12 @@ export default function ReleaseCalendar({
                     <input
                       type="text"
                       value={formData.title}
-                      onChange={(e) => setFormData(prev => ({ ...prev, title: e.target.value }))}
+                      onChange={(e) =>
+                        setFormData((prev) => ({
+                          ...prev,
+                          title: e.target.value,
+                        }))
+                      }
                       placeholder="New Features"
                       className="w-full rounded-md border-0 bg-white/5 px-3 py-2 text-white shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-indigo-500 text-sm"
                     />
@@ -773,7 +918,12 @@ export default function ReleaseCalendar({
                     </label>
                     <select
                       value={formData.type}
-                      onChange={(e) => setFormData(prev => ({ ...prev, type: e.target.value as Release["type"] }))}
+                      onChange={(e) =>
+                        setFormData((prev) => ({
+                          ...prev,
+                          type: e.target.value as Release["type"],
+                        }))
+                      }
                       className="w-full rounded-md border-0 bg-white/5 px-3 py-2 text-white shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-indigo-500 text-sm"
                     >
                       <option value="major">Major</option>
@@ -789,7 +939,12 @@ export default function ReleaseCalendar({
                     </label>
                     <select
                       value={formData.status}
-                      onChange={(e) => setFormData(prev => ({ ...prev, status: e.target.value as Release["status"] }))}
+                      onChange={(e) =>
+                        setFormData((prev) => ({
+                          ...prev,
+                          status: e.target.value as Release["status"],
+                        }))
+                      }
                       className="w-full rounded-md border-0 bg-white/5 px-3 py-2 text-white shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-indigo-500 text-sm"
                     >
                       <option value="planned">Planned</option>
@@ -806,7 +961,12 @@ export default function ReleaseCalendar({
                     <input
                       type="text"
                       value={formData.description}
-                      onChange={(e) => setFormData(prev => ({ ...prev, description: e.target.value }))}
+                      onChange={(e) =>
+                        setFormData((prev) => ({
+                          ...prev,
+                          description: e.target.value,
+                        }))
+                      }
                       placeholder="Brief description..."
                       className="w-full rounded-md border-0 bg-white/5 px-3 py-2 text-white shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-indigo-500 text-sm"
                     />
@@ -824,13 +984,14 @@ export default function ReleaseCalendar({
               </div>
             )}
 
-
             {/* Release Visualization */}
             <div className="bg-white/5 rounded-lg p-6">
               {releases.length === 0 ? (
                 <div className="text-center py-12">
                   <CalendarIcon className="mx-auto h-12 w-12 text-gray-400 mb-4" />
-                  <p className="text-gray-400 text-lg mb-2">No releases planned yet</p>
+                  <p className="text-gray-400 text-lg mb-2">
+                    No releases planned yet
+                  </p>
                   <p className="text-gray-500 text-sm mb-6">
                     Add your first release or load sample data to get started
                   </p>
@@ -843,53 +1004,71 @@ export default function ReleaseCalendar({
                 </div>
               ) : viewMode === "timeline" ? (
                 <div className="space-y-6">
-                  <h3 className="text-lg font-semibold text-white mb-6">Release Timeline</h3>
+                  <h3 className="text-lg font-semibold text-white mb-6">
+                    Release Timeline
+                  </h3>
                   <div className="relative">
                     {/* Main timeline line */}
                     <div className="absolute left-6 top-0 bottom-0 w-0.5 bg-gray-600"></div>
-                    
+
                     <div className="space-y-8">
                       {sortedReleases.map((release, index) => (
                         <div key={release.id} className="relative">
                           {/* Timeline dot */}
-                          <div className={classNames(
-                            "absolute left-4 w-5 h-5 rounded-full border-4 border-gray-900",
-                            getReleaseTypeStyles(release.type)
-                          )}></div>
-                          
+                          <div
+                            className={classNames(
+                              "absolute left-4 w-5 h-5 rounded-full border-4 border-gray-900",
+                              getReleaseTypeStyles(release.type)
+                            )}
+                          ></div>
+
                           {/* Content */}
                           <div className="ml-16">
-                            <div className={classNames(
-                              "relative p-6 shadow-lg transform rotate-1 hover:rotate-0 transition-transform duration-200",
-                              // Sticky note colors based on release type
-                              release.type === "major" ? "bg-red-200" :
-                              release.type === "minor" ? "bg-blue-200" :
-                              release.type === "patch" ? "bg-green-200" :
-                              release.type === "hotfix" ? "bg-orange-200" :
-                              "bg-yellow-200"
-                            )}>
+                            <div
+                              className={classNames(
+                                "relative p-6 shadow-lg transform rotate-1 hover:rotate-0 transition-transform duration-200",
+                                // Sticky note colors based on release type
+                                release.type === "major"
+                                  ? "bg-red-200"
+                                  : release.type === "minor"
+                                  ? "bg-blue-200"
+                                  : release.type === "patch"
+                                  ? "bg-green-200"
+                                  : release.type === "hotfix"
+                                  ? "bg-orange-200"
+                                  : "bg-yellow-200"
+                              )}
+                            >
                               {/* Tape effect */}
                               <div className="absolute -top-2 left-4 w-16 h-6 bg-gray-400/30 rounded transform -rotate-12"></div>
                               <div className="absolute -top-2 right-8 w-12 h-5 bg-gray-400/30 rounded transform rotate-6"></div>
-                              
+
                               {/* Shadow effect */}
                               <div className="absolute inset-0 bg-black/5 rounded transform translate-x-1 translate-y-1 -z-10"></div>
-                              
+
                               <div className="flex flex-col sm:flex-row sm:items-start justify-between gap-4">
                                 <div className="flex-1 min-w-0">
                                   <div className="flex flex-wrap items-center gap-2 mb-3">
-                                    <span className={classNames(
-                                      "px-3 py-1 text-xs font-semibold rounded-full uppercase flex items-center gap-1 shadow-sm",
-                                      getReleaseTypeStyles(release.type)
-                                    )}>
-                                      <span>{getReleaseTypeEmoji(release.type)}</span>
+                                    <span
+                                      className={classNames(
+                                        "px-3 py-1 text-xs font-semibold rounded-full uppercase flex items-center gap-1 shadow-sm",
+                                        getReleaseTypeStyles(release.type)
+                                      )}
+                                    >
+                                      <span>
+                                        {getReleaseTypeEmoji(release.type)}
+                                      </span>
                                       {release.type}
                                     </span>
-                                    <span className={classNames(
-                                      "px-3 py-1 text-xs font-medium rounded-full border flex items-center gap-1 shadow-sm",
-                                      getStatusStyles(release.status)
-                                    )}>
-                                      <span>{getStatusEmoji(release.status)}</span>
+                                    <span
+                                      className={classNames(
+                                        "px-3 py-1 text-xs font-medium rounded-full border flex items-center gap-1 shadow-sm",
+                                        getStatusStyles(release.status)
+                                      )}
+                                    >
+                                      <span>
+                                        {getStatusEmoji(release.status)}
+                                      </span>
                                       {release.status.replace("-", " ")}
                                     </span>
                                   </div>
@@ -897,12 +1076,15 @@ export default function ReleaseCalendar({
                                     {release.version} - {release.title}
                                   </h4>
                                   <p className="text-gray-700 text-sm mb-3 font-medium">
-                                    {new Date(release.date).toLocaleDateString('en-US', {
-                                      weekday: 'long',
-                                      year: 'numeric',
-                                      month: 'long',
-                                      day: 'numeric'
-                                    })}
+                                    {new Date(release.date).toLocaleDateString(
+                                      "en-US",
+                                      {
+                                        weekday: "long",
+                                        year: "numeric",
+                                        month: "long",
+                                        day: "numeric",
+                                      }
+                                    )}
                                   </p>
                                   {release.description && (
                                     <p className="text-gray-800 text-sm leading-relaxed break-words">
@@ -918,14 +1100,16 @@ export default function ReleaseCalendar({
                                     Edit
                                   </button>
                                   <button
-                                    onClick={() => handleDeleteRelease(release.id)}
+                                    onClick={() =>
+                                      handleDeleteRelease(release.id)
+                                    }
                                     className="px-3 py-1 text-red-700 hover:text-red-800 hover:bg-red-100/50 rounded-full text-sm font-medium transition-colors shadow-sm"
                                   >
                                     Delete
                                   </button>
                                 </div>
                               </div>
-                              
+
                               {/* Sticky note lines */}
                               <div className="absolute bottom-4 left-6 right-6">
                                 <div className="border-b border-gray-400/20 mb-1"></div>
@@ -942,62 +1126,96 @@ export default function ReleaseCalendar({
               ) : (
                 // Calendar View
                 <div className="space-y-6">
-                  <h3 className="text-lg font-semibold text-white mb-6">Release Calendar</h3>
+                  <h3 className="text-lg font-semibold text-white mb-6">
+                    Release Calendar
+                  </h3>
                   {(() => {
                     // Get current month or the month with releases
                     const today = new Date();
-                    const releaseMonths = sortedReleases.length > 0 
-                      ? [...new Set(sortedReleases.map(r => new Date(r.date).toISOString().slice(0, 7)))]
-                      : [today.toISOString().slice(0, 7)];
-                    
-                    return releaseMonths.map(monthStr => {
-                      const [year, month] = monthStr.split('-').map(Number);
+                    const releaseMonths =
+                      sortedReleases.length > 0
+                        ? Array.from(
+                            new Set(
+                              sortedReleases.map((r) =>
+                                new Date(r.date).toISOString().slice(0, 7)
+                              )
+                            )
+                          )
+                        : [today.toISOString().slice(0, 7)];
+
+                    return releaseMonths.map((monthStr) => {
+                      const [year, month] = monthStr.split("-").map(Number);
                       const firstDay = new Date(year, month - 1, 1);
                       const lastDay = new Date(year, month, 0);
                       const startDate = new Date(firstDay);
-                      startDate.setDate(startDate.getDate() - firstDay.getDay()); // Start from Sunday
-                      
-                      const monthReleases = sortedReleases.filter(r => 
-                        new Date(r.date).toISOString().slice(0, 7) === monthStr
+                      startDate.setDate(
+                        startDate.getDate() - firstDay.getDay()
+                      ); // Start from Sunday
+
+                      const monthReleases = sortedReleases.filter(
+                        (r) =>
+                          new Date(r.date).toISOString().slice(0, 7) ===
+                          monthStr
                       );
-                      
+
                       // Generate calendar days
                       const calendarDays = [];
                       const currentDate = new Date(startDate);
-                      
-                      for (let i = 0; i < 42; i++) { // 6 weeks * 7 days
-                        const dayReleases = monthReleases.filter(r => 
-                          new Date(r.date).toDateString() === currentDate.toDateString()
+
+                      for (let i = 0; i < 42; i++) {
+                        // 6 weeks * 7 days
+                        const dayReleases = monthReleases.filter(
+                          (r) =>
+                            new Date(r.date).toDateString() ===
+                            currentDate.toDateString()
                         );
-                        
+
                         calendarDays.push({
                           date: new Date(currentDate),
                           isCurrentMonth: currentDate.getMonth() === month - 1,
-                          isToday: currentDate.toDateString() === today.toDateString(),
-                          releases: dayReleases
+                          isToday:
+                            currentDate.toDateString() === today.toDateString(),
+                          releases: dayReleases,
                         });
-                        
+
                         currentDate.setDate(currentDate.getDate() + 1);
                       }
-                      
+
                       return (
-                        <div key={monthStr} className="bg-white/5 rounded-lg p-6 border border-white/10">
+                        <div
+                          key={monthStr}
+                          className="bg-white/5 rounded-lg p-6 border border-white/10"
+                        >
                           {/* Calendar Header */}
                           <div className="mb-6">
                             <h4 className="text-xl font-bold text-white text-center">
-                              {firstDay.toLocaleDateString('en-US', { month: 'long', year: 'numeric' })}
+                              {firstDay.toLocaleDateString("en-US", {
+                                month: "long",
+                                year: "numeric",
+                              })}
                             </h4>
                           </div>
-                          
+
                           {/* Days of Week Header */}
                           <div className="grid grid-cols-7 gap-2 mb-2">
-                            {['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(day => (
-                              <div key={day} className="text-center text-sm font-semibold text-gray-400 py-2">
+                            {[
+                              "Sun",
+                              "Mon",
+                              "Tue",
+                              "Wed",
+                              "Thu",
+                              "Fri",
+                              "Sat",
+                            ].map((day) => (
+                              <div
+                                key={day}
+                                className="text-center text-sm font-semibold text-gray-400 py-2"
+                              >
                                 {day}
                               </div>
                             ))}
                           </div>
-                          
+
                           {/* Calendar Grid */}
                           <div className="grid grid-cols-7 gap-2">
                             {calendarDays.map((day, index) => (
@@ -1005,40 +1223,62 @@ export default function ReleaseCalendar({
                                 key={index}
                                 className={classNames(
                                   "min-h-[80px] p-2 border border-white/10 rounded relative",
-                                  day.isCurrentMonth ? "bg-white/5" : "bg-gray-800/50",
+                                  day.isCurrentMonth
+                                    ? "bg-white/5"
+                                    : "bg-gray-800/50",
                                   day.isToday ? "ring-2 ring-indigo-500" : "",
-                                  day.releases.length > 0 ? "bg-indigo-900/20" : ""
+                                  day.releases.length > 0
+                                    ? "bg-indigo-900/20"
+                                    : ""
                                 )}
                               >
                                 {/* Date Number */}
-                                <div className={classNames(
-                                  "text-sm font-medium mb-1",
-                                  day.isCurrentMonth ? "text-white" : "text-gray-500",
-                                  day.isToday ? "text-indigo-400 font-bold" : ""
-                                )}>
+                                <div
+                                  className={classNames(
+                                    "text-sm font-medium mb-1",
+                                    day.isCurrentMonth
+                                      ? "text-white"
+                                      : "text-gray-500",
+                                    day.isToday
+                                      ? "text-indigo-400 font-bold"
+                                      : ""
+                                  )}
+                                >
                                   {day.date.getDate()}
                                 </div>
-                                
+
                                 {/* Releases for this day */}
                                 <div className="space-y-1">
-                                  {day.releases.slice(0, 2).map((release, idx) => (
-                                    <div
-                                      key={release.id}
-                                      className={classNames(
-                                        "text-xs px-2 py-1 rounded cursor-pointer transition-all hover:scale-105 truncate flex items-center gap-1",
-                                        release.type === "major" ? "bg-red-600 text-white" :
-                                        release.type === "minor" ? "bg-blue-600 text-white" :
-                                        release.type === "patch" ? "bg-green-600 text-white" :
-                                        release.type === "hotfix" ? "bg-orange-600 text-white" :
-                                        "bg-gray-600 text-white"
-                                      )}
-                                      onClick={() => handleEditRelease(release)}
-                                      title={`${release.version} - ${release.title}`}
-                                    >
-                                      <span>{getReleaseTypeEmoji(release.type)}</span>
-                                      <span className="truncate">{release.version}</span>
-                                    </div>
-                                  ))}
+                                  {day.releases
+                                    .slice(0, 2)
+                                    .map((release, idx) => (
+                                      <div
+                                        key={release.id}
+                                        className={classNames(
+                                          "text-xs px-2 py-1 rounded cursor-pointer transition-all hover:scale-105 truncate flex items-center gap-1",
+                                          release.type === "major"
+                                            ? "bg-red-600 text-white"
+                                            : release.type === "minor"
+                                            ? "bg-blue-600 text-white"
+                                            : release.type === "patch"
+                                            ? "bg-green-600 text-white"
+                                            : release.type === "hotfix"
+                                            ? "bg-orange-600 text-white"
+                                            : "bg-gray-600 text-white"
+                                        )}
+                                        onClick={() =>
+                                          handleEditRelease(release)
+                                        }
+                                        title={`${release.version} - ${release.title}`}
+                                      >
+                                        <span>
+                                          {getReleaseTypeEmoji(release.type)}
+                                        </span>
+                                        <span className="truncate">
+                                          {release.version}
+                                        </span>
+                                      </div>
+                                    ))}
                                   {day.releases.length > 2 && (
                                     <div className="text-xs text-gray-400 px-2">
                                       +{day.releases.length - 2} more
@@ -1048,20 +1288,29 @@ export default function ReleaseCalendar({
                               </div>
                             ))}
                           </div>
-                          
+
                           {/* Month Legend */}
                           {monthReleases.length > 0 && (
                             <div className="mt-6 pt-4 border-t border-white/10">
-                              <h5 className="text-sm font-semibold text-white mb-3">Releases this month:</h5>
+                              <h5 className="text-sm font-semibold text-white mb-3">
+                                Releases this month:
+                              </h5>
                               <div className="space-y-2">
-                                {monthReleases.map(release => (
-                                  <div key={release.id} className="flex items-center justify-between bg-white/5 rounded p-2">
+                                {monthReleases.map((release) => (
+                                  <div
+                                    key={release.id}
+                                    className="flex items-center justify-between bg-white/5 rounded p-2"
+                                  >
                                     <div className="flex items-center gap-3">
-                                      <span className={classNames(
-                                        "px-2 py-1 text-xs font-medium rounded uppercase flex items-center gap-1",
-                                        getReleaseTypeStyles(release.type)
-                                      )}>
-                                        <span>{getReleaseTypeEmoji(release.type)}</span>
+                                      <span
+                                        className={classNames(
+                                          "px-2 py-1 text-xs font-medium rounded uppercase flex items-center gap-1",
+                                          getReleaseTypeStyles(release.type)
+                                        )}
+                                      >
+                                        <span>
+                                          {getReleaseTypeEmoji(release.type)}
+                                        </span>
                                         {release.type}
                                       </span>
                                       <div>
@@ -1069,22 +1318,28 @@ export default function ReleaseCalendar({
                                           {release.version} - {release.title}
                                         </div>
                                         <div className="text-gray-400 text-xs">
-                                          {new Date(release.date).toLocaleDateString('en-US', {
-                                            month: 'short',
-                                            day: 'numeric'
+                                          {new Date(
+                                            release.date
+                                          ).toLocaleDateString("en-US", {
+                                            month: "short",
+                                            day: "numeric",
                                           })}
                                         </div>
                                       </div>
                                     </div>
                                     <div className="flex items-center gap-2">
                                       <button
-                                        onClick={() => handleEditRelease(release)}
+                                        onClick={() =>
+                                          handleEditRelease(release)
+                                        }
                                         className="text-indigo-400 hover:text-indigo-300 text-xs px-2 py-1 rounded hover:bg-indigo-400/10"
                                       >
                                         Edit
                                       </button>
                                       <button
-                                        onClick={() => handleDeleteRelease(release.id)}
+                                        onClick={() =>
+                                          handleDeleteRelease(release.id)
+                                        }
                                         className="text-red-400 hover:text-red-300 text-xs px-2 py-1 rounded hover:bg-red-400/10"
                                       >
                                         Delete
@@ -1113,11 +1368,13 @@ export default function ReleaseCalendar({
 export async function getServerSideProps() {
   return {
     props: {
-      title: "Free Release Calendar Creator Online - Timeline Visualizer | Changes.page",
+      title:
+        "Free Release Calendar Creator Online - Timeline Visualizer | Changes.page",
       description:
         "Create release calendars online with our free release calendar creator app. Plan software releases with interactive timeline and calendar views. Track milestones and manage release schedules.",
-      keywords: "release calendar creator online, release calendar creator app, free release calendar, online release calendar, release timeline creator, software release calendar, release planning calendar, create release calendar, release calendar generator, release schedule creator, project release calendar, deployment calendar creator",
+      keywords:
+        "release calendar creator online, release calendar creator app, free release calendar, online release calendar, release timeline creator, software release calendar, release planning calendar, create release calendar, release calendar generator, release schedule creator, project release calendar, deployment calendar creator",
       canonicalUrl: "https://changes.page/free-tools/release-calendar",
     },
   };
-}
\ No newline at end of file
+}
diff --git a/apps/web/pages/integrations/zapier.tsx b/apps/web/pages/integrations/zapier.tsx
index 6bb94f6..4a247d0 100644
--- a/apps/web/pages/integrations/zapier.tsx
+++ b/apps/web/pages/integrations/zapier.tsx
@@ -1,17 +1,16 @@
-import { GetServerSidePropsContext } from "next";
 import Head from "next/head";
 import FooterComponent from "../../components/layout/footer.component";
 import HeaderComponent from "../../components/layout/header.component";
 import Page from "../../components/layout/page.component";
-import { getSupabaseServerClient } from "../../utils/supabase/supabase-admin";
+import { withSupabase } from "../../utils/supabase/withSupabase";
 
-export async function getServerSideProps(ctx: GetServerSidePropsContext) {
-  const { user } = await getSupabaseServerClient(ctx);
-
-  return {
-    props: { email: user?.email },
-  };
-}
+export const getServerSideProps = withSupabase<{ email: string }>(
+  async (_, { user }) => {
+    return {
+      props: { email: user?.email },
+    };
+  }
+);
 
 export default function Zapier({ email }: { email?: string }) {
   return (
diff --git a/apps/web/pages/onboarding/open-page.tsx b/apps/web/pages/onboarding/open-page.tsx
index dda1824..b43b3b8 100644
--- a/apps/web/pages/onboarding/open-page.tsx
+++ b/apps/web/pages/onboarding/open-page.tsx
@@ -1,14 +1,14 @@
 import { supabaseAdmin } from "@changes-page/supabase/admin";
 import { SpinnerWithSpacing } from "@changes-page/ui";
-import { GetServerSideProps, GetServerSidePropsContext } from "next";
 import { ROUTES } from "../../data/routes.data";
-import { getSupabaseServerClient } from "../../utils/supabase/supabase-admin";
-
-export const getServerSideProps: GetServerSideProps = async (
-  ctx: GetServerSidePropsContext
-) => {
-  const { user } = await getSupabaseServerClient(ctx);
+import { withSupabase } from "../../utils/supabase/withSupabase";
 
+export const getServerSideProps = withSupabase<{
+  redirect: {
+    permanent: boolean;
+    destination: string;
+  };
+}>(async (ctx, { user }) => {
   if (!user) {
     return {
       redirect: {
@@ -40,7 +40,7 @@ export const getServerSideProps: GetServerSideProps = async (
       destination: `${ROUTES.PAGES}/${pages[0].id}/${path ?? ""}`,
     },
   };
-};
+});
 
 function LoadingPage() {
   return <SpinnerWithSpacing />;
diff --git a/apps/web/pages/pages/[page_id]/[post_id].tsx b/apps/web/pages/pages/[page_id]/[post_id].tsx
index 24891d6..30bf136 100644
--- a/apps/web/pages/pages/[page_id]/[post_id].tsx
+++ b/apps/web/pages/pages/[page_id]/[post_id].tsx
@@ -11,19 +11,26 @@ import AuthLayout from "../../../components/layout/auth-layout.component";
 import Page from "../../../components/layout/page.component";
 import { ROUTES } from "../../../data/routes.data";
 import { NewPostSchema } from "../../../data/schema";
-import { getSupabaseServerClient } from "../../../utils/supabase/supabase-admin";
+import { withSupabase } from "../../../utils/supabase/withSupabase";
 import { createOrRetrievePageSettings } from "../../../utils/useDatabase";
 import { useUserData } from "../../../utils/useUser";
 
-export async function getServerSideProps({ params, req, res }) {
-  const { page_id, post_id } = params;
+export const getServerSideProps = withSupabase(async (ctx, { supabase }) => {
+  const { page_id, post_id } = ctx.params;
 
-  const { supabase } = await getSupabaseServerClient({ req, res });
-  const settings = await createOrRetrievePageSettings(String(page_id));
+  if (!page_id || Array.isArray(page_id)) {
+    return { notFound: true };
+  }
+
+  if (!post_id || Array.isArray(post_id)) {
+    return { notFound: true };
+  }
+
+  const settings = await createOrRetrievePageSettings(page_id);
   const { data: post } = await supabase
     .from("posts")
     .select("*")
-    .eq("id", post_id as string)
+    .eq("id", post_id)
     .single();
 
   return {
@@ -34,7 +41,7 @@ export async function getServerSideProps({ params, req, res }) {
       settings,
     },
   };
-}
+});
 
 export default function EditPost({
   page_id,
@@ -61,7 +68,7 @@ export default function EditPost({
       await supabase.from("posts").update(newPost).match({ id: post_id });
 
       await supabase.from("page_audit_logs").insert({
-        page_id: page_id,
+        page_id: String(page_id),
         actor_id: user.id,
         action: `Updated Post: ${newPost.title}`,
         changes: newPost,
diff --git a/apps/web/pages/pages/[page_id]/analytics.tsx b/apps/web/pages/pages/[page_id]/analytics.tsx
index a3d40ff..7021a3f 100644
--- a/apps/web/pages/pages/[page_id]/analytics.tsx
+++ b/apps/web/pages/pages/[page_id]/analytics.tsx
@@ -5,7 +5,7 @@ import Image from "next/image";
 import AuthLayout from "../../../components/layout/auth-layout.component";
 import Page from "../../../components/layout/page.component";
 import { ROUTES } from "../../../data/routes.data";
-import { getSupabaseServerClient } from "../../../utils/supabase/supabase-admin";
+import { withSupabase } from "../../../utils/supabase/withSupabase";
 import { getPageAnalytics } from "../../../utils/useDatabase";
 import { getPage } from "../../../utils/useSSR";
 
@@ -183,16 +183,18 @@ const StatsTable = ({ data = [], title, total = 5 }) => {
   );
 };
 
-export async function getServerSideProps({ req, res, query }) {
-  const { page_id, range } = query;
+export const getServerSideProps = withSupabase(async (ctx, { supabase }) => {
+  const page_id = ctx.params?.page_id;
+  if (!page_id || Array.isArray(page_id)) {
+    return { notFound: true };
+  }
 
-  const { supabase } = await getSupabaseServerClient({ req, res });
   const page = await getPage(supabase, page_id);
 
-  const rangeNum = Number(range) || 7;
+  const range = Number(ctx.query.range) || 7;
 
-  const date = new Date(Date.now() - rangeNum * 24 * 60 * 60 * 1000);
-  const prevDate = new Date(Date.now() - rangeNum * 2 * 24 * 60 * 60 * 1000);
+  const date = new Date(Date.now() - range * 24 * 60 * 60 * 1000);
+  const prevDate = new Date(Date.now() - range * 2 * 24 * 60 * 60 * 1000);
 
   console.log(`Fetching stats for page ${page_id} from ${date.toISOString()}`);
 
@@ -202,18 +204,21 @@ export async function getServerSideProps({ req, res, query }) {
     .eq("page_id", page_id)
     .gte("created_at", prevDate.toISOString());
 
-  const currentPeriodViews = allPageViews?.filter(
-    (view) => new Date(view.created_at) >= date
-  ) || [];
-  
-  const previousPeriodViews = allPageViews?.filter(
-    (view) => new Date(view.created_at) >= prevDate && new Date(view.created_at) < date
-  ) || [];
+  const currentPeriodViews =
+    allPageViews?.filter((view) => new Date(view.created_at) >= date) || [];
+
+  const previousPeriodViews =
+    allPageViews?.filter(
+      (view) =>
+        new Date(view.created_at) >= prevDate &&
+        new Date(view.created_at) < date
+    ) || [];
 
   const page_views = currentPeriodViews.length;
-  const visitors = new Set(currentPeriodViews.map(v => v.visitor_id)).size;
+  const visitors = new Set(currentPeriodViews.map((v) => v.visitor_id)).size;
   const prev_page_views = previousPeriodViews.length;
-  const prev_visitors = new Set(previousPeriodViews.map(v => v.visitor_id)).size;
+  const prev_visitors = new Set(previousPeriodViews.map((v) => v.visitor_id))
+    .size;
 
   // Calculate growth rates
   const pageViewsGrowth =
@@ -256,10 +261,10 @@ export async function getServerSideProps({ req, res, query }) {
   ];
 
   // Get device type data by analyzing user agents
-  const deviceData = await getDeviceAnalytics(page_id, rangeNum);
+  const deviceData = await getDeviceAnalytics(page_id, range);
 
   // Get peak hours data
-  const peakHoursData = await getPeakHoursAnalytics(page_id, rangeNum);
+  const peakHoursData = await getPeakHoursAnalytics(page_id, range);
 
   const metrics = ["browsers", "os", "referrers"];
   const metricsData = await Promise.all(
@@ -277,7 +282,7 @@ export async function getServerSideProps({ req, res, query }) {
       peakHoursData,
     },
   };
-}
+});
 
 export default function PageAnalytics({
   page,
diff --git a/apps/web/pages/pages/[page_id]/audit-logs.tsx b/apps/web/pages/pages/[page_id]/audit-logs.tsx
index 4473332..9c3291e 100644
--- a/apps/web/pages/pages/[page_id]/audit-logs.tsx
+++ b/apps/web/pages/pages/[page_id]/audit-logs.tsx
@@ -12,14 +12,17 @@ import { InferGetServerSidePropsType } from "next";
 import AuthLayout from "../../../components/layout/auth-layout.component";
 import Page from "../../../components/layout/page.component";
 import { ROUTES } from "../../../data/routes.data";
-import { getSupabaseServerClient } from "../../../utils/supabase/supabase-admin";
+import { withSupabase } from "../../../utils/supabase/withSupabase";
 import { getPage } from "../../../utils/useSSR";
 
-export async function getServerSideProps({ req, res, query }) {
-  const { page_id } = query;
+export const getServerSideProps = withSupabase(async (ctx, { supabase }) => {
+  const page_id = ctx.params?.page_id;
+  if (!page_id || Array.isArray(page_id)) {
+    return { notFound: true };
+  }
 
-  const { supabase } = await getSupabaseServerClient({ req, res });
   const page = await getPage(supabase, page_id);
+
   const { data: audit_logs } = await supabaseAdmin
     .from("page_audit_logs")
     .select("*, actor:actor_id(full_name)")
@@ -34,7 +37,7 @@ export async function getServerSideProps({ req, res, query }) {
       audit_logs: audit_logs ?? [],
     },
   };
-}
+});
 
 export default function PageAnalytics({
   page,
diff --git a/apps/web/pages/pages/[page_id]/edit.tsx b/apps/web/pages/pages/[page_id]/edit.tsx
index ff8d7b2..1b22d6f 100644
--- a/apps/web/pages/pages/[page_id]/edit.tsx
+++ b/apps/web/pages/pages/[page_id]/edit.tsx
@@ -12,20 +12,22 @@ import Page from "../../../components/layout/page.component";
 import { ROUTES } from "../../../data/routes.data";
 import { NewPageSchema } from "../../../data/schema";
 import { httpPost } from "../../../utils/http";
-import { getSupabaseServerClient } from "../../../utils/supabase/supabase-admin";
+import { withSupabase } from "../../../utils/supabase/withSupabase";
 import { getPage } from "../../../utils/useSSR";
 import { useUserData } from "../../../utils/useUser";
 
-export async function getServerSideProps({ req, res, params }) {
-  const { page_id } = params;
+export const getServerSideProps = withSupabase(async (ctx, { supabase }) => {
+  const { page_id } = ctx.params;
+  if (!page_id || Array.isArray(page_id)) {
+    return { notFound: true };
+  }
 
-  const { supabase } = await getSupabaseServerClient({ req, res });
-  const page = await getPage(supabase, params.page_id as string);
+  const page = await getPage(supabase, page_id);
 
   return {
     props: { page_id, page },
   };
-}
+});
 
 export default function EditPage({
   page_id,
diff --git a/apps/web/pages/pages/[page_id]/index.tsx b/apps/web/pages/pages/[page_id]/index.tsx
index 11c35b1..b89b0a8 100644
--- a/apps/web/pages/pages/[page_id]/index.tsx
+++ b/apps/web/pages/pages/[page_id]/index.tsx
@@ -41,15 +41,17 @@ import { ROUTES } from "../../../data/routes.data";
 import usePageSettings from "../../../utils/hooks/usePageSettings";
 import usePageUrl from "../../../utils/hooks/usePageUrl";
 import usePosts from "../../../utils/hooks/usePosts";
-import { getSupabaseServerClient } from "../../../utils/supabase/supabase-admin";
+import { withSupabase } from "../../../utils/supabase/withSupabase";
 import { createOrRetrievePageSettings } from "../../../utils/useDatabase";
 import { getPage } from "../../../utils/useSSR";
 import { useUserData } from "../../../utils/useUser";
 
-export async function getServerSideProps({ req, res, params }) {
-  const { page_id } = params;
+export const getServerSideProps = withSupabase(async (ctx, { supabase }) => {
+  const { page_id } = ctx.params;
+  if (!page_id || Array.isArray(page_id)) {
+    return { notFound: true };
+  }
 
-  const { supabase } = await getSupabaseServerClient({ req, res });
   const page = await getPage(supabase, page_id).catch((e) => {
     console.error("Failed to get page", e);
     return null;
@@ -61,7 +63,7 @@ export async function getServerSideProps({ req, res, params }) {
     };
   }
 
-  const settings = await createOrRetrievePageSettings(String(page_id));
+  const settings = await createOrRetrievePageSettings(page_id);
 
   return {
     props: {
@@ -70,7 +72,7 @@ export async function getServerSideProps({ req, res, params }) {
       settings,
     },
   };
-}
+});
 
 export default function PageDetail({
   page,
diff --git a/apps/web/pages/pages/[page_id]/roadmap/[board_id].tsx b/apps/web/pages/pages/[page_id]/roadmap/[board_id].tsx
index 8fa097b..a020edb 100644
--- a/apps/web/pages/pages/[page_id]/roadmap/[board_id].tsx
+++ b/apps/web/pages/pages/[page_id]/roadmap/[board_id].tsx
@@ -5,17 +5,21 @@ import { SecondaryButton } from "../../../../components/core/buttons.component";
 import AuthLayout from "../../../../components/layout/auth-layout.component";
 import Page from "../../../../components/layout/page.component";
 import RoadmapBoard from "../../../../components/roadmap/RoadmapBoard";
-import { getSupabaseServerClient } from "../../../../utils/supabase/supabase-admin";
+import { withSupabase } from "../../../../utils/supabase/withSupabase";
 import { createOrRetrievePageSettings } from "../../../../utils/useDatabase";
 import { getPage } from "../../../../utils/useSSR";
 
-export async function getServerSideProps({ req, res, params }) {
-  const { page_id, board_id } = params;
+export const getServerSideProps = withSupabase(async (ctx, { supabase }) => {
+  const { page_id } = ctx.params;
+  if (!page_id || Array.isArray(page_id)) {
+    return { notFound: true };
+  }
+
+  const { board_id } = ctx.params;
+  if (!board_id || Array.isArray(board_id)) {
+    return { notFound: true };
+  }
 
-  const { supabase } = await getSupabaseServerClient({
-    req,
-    res,
-  });
   const page = await getPage(supabase, page_id).catch((e) => {
     console.error("Failed to get page", e);
     return null;
@@ -27,7 +31,7 @@ export async function getServerSideProps({ req, res, params }) {
     };
   }
 
-  const settings = await createOrRetrievePageSettings(String(page_id));
+  const settings = await createOrRetrievePageSettings(page_id);
 
   const { data: board, error: boardError } = await supabase
     .from("roadmap_boards")
@@ -86,7 +90,7 @@ export async function getServerSideProps({ req, res, params }) {
       categories: categories || [],
     },
   };
-}
+});
 
 export default function RoadmapBoardDetails({
   page_id,
diff --git a/apps/web/pages/pages/[page_id]/roadmap/[board_id]/settings.tsx b/apps/web/pages/pages/[page_id]/roadmap/[board_id]/settings.tsx
index 0de6d04..4caf2bb 100644
--- a/apps/web/pages/pages/[page_id]/roadmap/[board_id]/settings.tsx
+++ b/apps/web/pages/pages/[page_id]/roadmap/[board_id]/settings.tsx
@@ -12,16 +12,24 @@ import AuthLayout from "../../../../../components/layout/auth-layout.component";
 import Page from "../../../../../components/layout/page.component";
 import usePageSettings from "../../../../../utils/hooks/usePageSettings";
 import { getPageUrl } from "../../../../../utils/hooks/usePageUrl";
-import { getSupabaseServerClient } from "../../../../../utils/supabase/supabase-admin";
+import { withSupabase } from "../../../../../utils/supabase/withSupabase";
 import { createOrRetrievePageSettings } from "../../../../../utils/useDatabase";
 import { getPage } from "../../../../../utils/useSSR";
 import { useUserData } from "../../../../../utils/useUser";
 
-export async function getServerSideProps({ req, res, params, query }) {
-  const { page_id, board_id } = params;
-  const { tab = "board" } = query;
+export const getServerSideProps = withSupabase(async (ctx, { supabase }) => {
+  const { page_id } = ctx.params;
+  if (!page_id || Array.isArray(page_id)) {
+    return { notFound: true };
+  }
+
+  const { board_id } = ctx.params;
+  if (!board_id || Array.isArray(board_id)) {
+    return { notFound: true };
+  }
+
+  const { tab = "board" } = ctx.query;
 
-  const { supabase } = await getSupabaseServerClient({ req, res });
   const page = await getPage(supabase, page_id).catch((e) => {
     console.error("Failed to get page", e);
     return null;
@@ -33,7 +41,7 @@ export async function getServerSideProps({ req, res, params, query }) {
     };
   }
 
-  const settings = await createOrRetrievePageSettings(String(page_id));
+  const settings = await createOrRetrievePageSettings(page_id);
 
   // Fetch the specific roadmap board
   const { data: board, error: boardError } = await supabase
@@ -83,7 +91,7 @@ export async function getServerSideProps({ req, res, params, query }) {
       initialTab: tab,
     },
   };
-}
+});
 
 export default function BoardSettings({
   page,
diff --git a/apps/web/pages/pages/[page_id]/roadmap/index.tsx b/apps/web/pages/pages/[page_id]/roadmap/index.tsx
index 1855749..cb45b77 100644
--- a/apps/web/pages/pages/[page_id]/roadmap/index.tsx
+++ b/apps/web/pages/pages/[page_id]/roadmap/index.tsx
@@ -1,18 +1,20 @@
 import { PlusIcon } from "@heroicons/react/solid";
 import { InferGetServerSidePropsType } from "next";
-import { useMemo, type JSX } from "react";
 import Link from "next/link";
+import { useMemo, type JSX } from "react";
 import { PrimaryRouterButton } from "../../../../components/core/buttons.component";
 import AuthLayout from "../../../../components/layout/auth-layout.component";
 import Page from "../../../../components/layout/page.component";
 import { ROUTES } from "../../../../data/routes.data";
-import { getSupabaseServerClient } from "../../../../utils/supabase/supabase-admin";
+import { withSupabase } from "../../../../utils/supabase/withSupabase";
 import { getPage } from "../../../../utils/useSSR";
 
-export async function getServerSideProps({ req, res, params }) {
-  const { page_id } = params;
+export const getServerSideProps = withSupabase(async (ctx, { supabase }) => {
+  const { page_id } = ctx.params;
+  if (!page_id || Array.isArray(page_id)) {
+    return { notFound: true };
+  }
 
-  const { supabase } = await getSupabaseServerClient({ req, res });
   const page = await getPage(supabase, page_id).catch((e) => {
     console.error("Failed to get page", e);
     return null;
@@ -41,7 +43,7 @@ export async function getServerSideProps({ req, res, params }) {
       boards: boards || [],
     },
   };
-}
+});
 
 export default function RoadmapPage({
   page,
@@ -132,7 +134,7 @@ export default function RoadmapPage({
                           {board.is_public ? "Public" : "Private"}
                         </span>
                       </div>
-                      
+
                       {board.description && (
                         <p className="mt-2 text-sm text-gray-600 dark:text-gray-400 line-clamp-2">
                           {board.description}
@@ -142,17 +144,30 @@ export default function RoadmapPage({
 
                     <div className="flex items-center space-x-4 text-sm text-gray-500 dark:text-gray-400">
                       <div className="text-right">
-                        <p className="text-xs uppercase tracking-wide font-medium">Created</p>
+                        <p className="text-xs uppercase tracking-wide font-medium">
+                          Created
+                        </p>
                         <p>
-                          {new Date(board.created_at).toLocaleDateString("en-US", {
-                            year: "numeric",
-                            month: "short",
-                            day: "numeric",
-                          })}
+                          {new Date(board.created_at).toLocaleDateString(
+                            "en-US",
+                            {
+                              year: "numeric",
+                              month: "short",
+                              day: "numeric",
+                            }
+                          )}
                         </p>
                       </div>
-                      <svg className="h-5 w-5 text-gray-400 group-hover:text-gray-500" fill="currentColor" viewBox="0 0 20 20">
-                        <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
+                      <svg
+                        className="h-5 w-5 text-gray-400 group-hover:text-gray-500"
+                        fill="currentColor"
+                        viewBox="0 0 20 20"
+                      >
+                        <path
+                          fillRule="evenodd"
+                          d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                          clipRule="evenodd"
+                        />
                       </svg>
                     </div>
                   </div>
diff --git a/apps/web/pages/pages/[page_id]/roadmap/new.tsx b/apps/web/pages/pages/[page_id]/roadmap/new.tsx
index f9a5e79..59bc26f 100644
--- a/apps/web/pages/pages/[page_id]/roadmap/new.tsx
+++ b/apps/web/pages/pages/[page_id]/roadmap/new.tsx
@@ -1,18 +1,18 @@
 import { InferGetServerSidePropsType } from "next";
 import { useRouter } from "next/router";
-import { useMemo, useState, type JSX } from "react";
+import { useState, type JSX } from "react";
 import AuthLayout from "../../../../components/layout/auth-layout.component";
 import Page from "../../../../components/layout/page.component";
-import usePageSettings from "../../../../utils/hooks/usePageSettings";
-import { getSupabaseServerClient } from "../../../../utils/supabase/supabase-admin";
-import { createOrRetrievePageSettings } from "../../../../utils/useDatabase";
+import { withSupabase } from "../../../../utils/supabase/withSupabase";
 import { getPage } from "../../../../utils/useSSR";
 import { useUserData } from "../../../../utils/useUser";
 
-export async function getServerSideProps({ req, res, params }) {
-  const { page_id } = params;
+export const getServerSideProps = withSupabase(async (ctx, { supabase }) => {
+  const page_id = ctx.params?.page_id;
+  if (!page_id || Array.isArray(page_id)) {
+    return { notFound: true };
+  }
 
-  const { supabase } = await getSupabaseServerClient({ req, res });
   const page = await getPage(supabase, page_id).catch((e) => {
     console.error("Failed to get page", e);
     return null;
@@ -24,30 +24,19 @@ export async function getServerSideProps({ req, res, params }) {
     };
   }
 
-  const settings = await createOrRetrievePageSettings(String(page_id));
-
   return {
     props: {
       page_id,
       page,
-      settings,
     },
   };
-}
+});
 
 export default function NewRoadmapBoard({
-  page,
   page_id,
-  settings: serverSettings,
 }: InferGetServerSidePropsType<typeof getServerSideProps>) {
   const router = useRouter();
-  const { supabase, user } = useUserData();
-  const { settings: clientSettings } = usePageSettings(page_id, false);
-
-  const settings = useMemo(
-    () => clientSettings ?? serverSettings,
-    [serverSettings, clientSettings]
-  );
+  const { supabase } = useUserData();
 
   const [formData, setFormData] = useState({
     title: "",
diff --git a/apps/web/pages/pages/[page_id]/settings/[activeTab].tsx b/apps/web/pages/pages/[page_id]/settings/[activeTab].tsx
index 0e4cb0a..a590f8c 100644
--- a/apps/web/pages/pages/[page_id]/settings/[activeTab].tsx
+++ b/apps/web/pages/pages/[page_id]/settings/[activeTab].tsx
@@ -10,7 +10,7 @@ import SocialLinksSettings from "../../../../components/page-settings/social-lin
 import StyleSettings from "../../../../components/page-settings/style";
 import { ROUTES } from "../../../../data/routes.data";
 import usePageSettings from "../../../../utils/hooks/usePageSettings";
-import { getSupabaseServerClient } from "../../../../utils/supabase/supabase-admin";
+import { withSupabase } from "../../../../utils/supabase/withSupabase";
 import { createOrRetrievePageSettings } from "../../../../utils/useDatabase";
 import { getPage } from "../../../../utils/useSSR";
 
@@ -21,22 +21,28 @@ const IntegrationsSettings = dynamic(
   }
 );
 
-export async function getServerSideProps({ req, res, params }) {
-  const { page_id } = params;
+export const getServerSideProps = withSupabase(async (ctx, { supabase }) => {
+  const { page_id } = ctx.params;
+  if (!page_id || Array.isArray(page_id)) {
+    return { notFound: true };
+  }
+
+  const page = await getPage(supabase, page_id).catch(() => null);
+  if (!page) {
+    return { notFound: true };
+  }
 
-  const { supabase } = await getSupabaseServerClient({ req, res });
-  const page = await getPage(supabase, page_id);
-  const settings = await createOrRetrievePageSettings(String(page_id));
+  const settings = await createOrRetrievePageSettings(page_id);
 
   return {
     props: {
       page,
       settings,
       page_id,
-      activeTab: params.activeTab,
+      activeTab: ctx.params?.activeTab,
     },
   };
-}
+});
 
 export default function PageSettings({
   page,
diff --git a/apps/web/pages/pages/index.tsx b/apps/web/pages/pages/index.tsx
index 286274c..0a3ee2c 100644
--- a/apps/web/pages/pages/index.tsx
+++ b/apps/web/pages/pages/index.tsx
@@ -1,7 +1,7 @@
 import { PageType, PageTypeToLabel } from "@changes-page/supabase/types/page";
 import { PlusIcon, UserGroupIcon } from "@heroicons/react/solid";
 import classNames from "classnames";
-import { GetServerSidePropsContext, InferGetServerSidePropsType } from "next";
+import { InferGetServerSidePropsType } from "next";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect, type JSX } from "react";
@@ -14,12 +14,10 @@ import Page from "../../components/layout/page.component";
 import Changelog from "../../components/marketing/changelog";
 import { ROUTES } from "../../data/routes.data";
 import { getAppBaseURL } from "../../utils/helpers";
-import { getSupabaseServerClient } from "../../utils/supabase/supabase-admin";
+import { withSupabase } from "../../utils/supabase/withSupabase";
 import { useUserData } from "../../utils/useUser";
 
-export async function getServerSideProps(ctx: GetServerSidePropsContext) {
-  const { supabase } = await getSupabaseServerClient(ctx);
-
+export const getServerSideProps = withSupabase(async (_, { supabase }) => {
   const { data: pages, error } = await supabase
     .from("pages")
     .select(
@@ -41,7 +39,7 @@ export async function getServerSideProps(ctx: GetServerSidePropsContext) {
       error,
     },
   };
-}
+});
 
 export default function Pages({
   pages,
diff --git a/apps/web/utils/hooks/usePosts.ts b/apps/web/utils/hooks/usePosts.ts
index 69238f8..145923a 100644
--- a/apps/web/utils/hooks/usePosts.ts
+++ b/apps/web/utils/hooks/usePosts.ts
@@ -1,4 +1,4 @@
-import { IPost } from "@changes-page/supabase/types/page";
+import { IPost, PostStatus } from "@changes-page/supabase/types/page";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import { useDebounce } from "use-debounce";
@@ -41,7 +41,7 @@ export default function usePagePosts(
       .range(0 + offset, PAGINATION_LIMIT - 1 + offset);
 
     if (status) {
-      query = query.eq("status", String(status));
+      query = query.eq("status", status as PostStatus);
     }
 
     if (pinnedPostId && !status) {
diff --git a/apps/web/utils/supabase/client.ts b/apps/web/utils/supabase/client.ts
new file mode 100644
index 0000000..9bfd5ba
--- /dev/null
+++ b/apps/web/utils/supabase/client.ts
@@ -0,0 +1,15 @@
+import { Database } from "@changes-page/supabase/types";
+import { createBrowserClient } from "@supabase/ssr";
+
+export function createClient() {
+  const url = process.env.NEXT_PUBLIC_SUPABASE_URL;
+  const anon = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+
+  if (!url || !anon) {
+    throw new Error(
+      "Supabase env missing: set NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY"
+    );
+  }
+
+  return createBrowserClient<Database>(url, anon);
+}
diff --git a/apps/web/utils/supabase/middleware.ts b/apps/web/utils/supabase/middleware.ts
new file mode 100644
index 0000000..51d3cfe
--- /dev/null
+++ b/apps/web/utils/supabase/middleware.ts
@@ -0,0 +1,40 @@
+import { Database } from "@changes-page/supabase/types";
+import { createServerClient } from "@supabase/ssr";
+import { NextRequest, NextResponse } from "next/server";
+
+export function createMiddlewareClient(request: NextRequest) {
+  let response = NextResponse.next({
+    request: {
+      headers: request.headers,
+    },
+  });
+
+  const supabase = createServerClient<Database>(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+    {
+      cookies: {
+        getAll() {
+          return request.cookies.getAll();
+        },
+        setAll(cookiesToSet) {
+          cookiesToSet.forEach(({ name, value, options }) => {
+            request.cookies.set({ name, value, ...options });
+          });
+          
+          response = NextResponse.next({
+            request: {
+              headers: request.headers,
+            },
+          });
+          
+          cookiesToSet.forEach(({ name, value, options }) => {
+            response.cookies.set({ name, value, ...options });
+          });
+        },
+      },
+    }
+  );
+
+  return { supabase, response };
+}
\ No newline at end of file
diff --git a/apps/web/utils/supabase/server.ts b/apps/web/utils/supabase/server.ts
new file mode 100644
index 0000000..1049c04
--- /dev/null
+++ b/apps/web/utils/supabase/server.ts
@@ -0,0 +1,64 @@
+import { Database } from "@changes-page/supabase/types";
+import { createServerClient, serializeCookieHeader } from "@supabase/ssr";
+import {
+  GetServerSidePropsContext,
+  NextApiRequest,
+  NextApiResponse,
+} from "next/types";
+
+export function createServerClientSSR({ req, res }: GetServerSidePropsContext) {
+  return createServerClient<Database>(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+    {
+      cookies: {
+        getAll() {
+          return Object.keys(req.cookies).map((name) => ({
+            name,
+            value: req.cookies[name] || "",
+          }));
+        },
+        setAll(cookiesToSet) {
+          res.setHeader(
+            "Set-Cookie",
+            cookiesToSet.map(({ name, value, options }) =>
+              serializeCookieHeader(name, value, options)
+            )
+          );
+        },
+      },
+    }
+  );
+}
+
+export function createServerClientForAPI({
+  req,
+  res,
+}: {
+  req: NextApiRequest;
+  res: NextApiResponse;
+}) {
+  const supabase = createServerClient<Database>(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+    {
+      cookies: {
+        getAll() {
+          return Object.keys(req.cookies).map((name) => ({
+            name,
+            value: req.cookies[name] || "",
+          }));
+        },
+        setAll(cookiesToSet) {
+          res.setHeader(
+            "Set-Cookie",
+            cookiesToSet.map(({ name, value, options }) =>
+              serializeCookieHeader(name, value, options)
+            )
+          );
+        },
+      },
+    }
+  );
+  return supabase;
+}
diff --git a/apps/web/utils/supabase/static.ts b/apps/web/utils/supabase/static.ts
new file mode 100644
index 0000000..15a8ffe
--- /dev/null
+++ b/apps/web/utils/supabase/static.ts
@@ -0,0 +1,10 @@
+import { createClient as createClientPrimitive } from "@supabase/supabase-js";
+
+export function createClient() {
+  const supabase = createClientPrimitive(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
+  );
+
+  return supabase;
+}
diff --git a/apps/web/utils/supabase/supabase-admin.ts b/apps/web/utils/supabase/supabase-admin.ts
deleted file mode 100644
index 251b4bb..0000000
--- a/apps/web/utils/supabase/supabase-admin.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Database } from "@changes-page/supabase/types";
-import {
-  createPagesServerClient,
-  Session,
-  User,
-} from "@supabase/auth-helpers-nextjs";
-import { SupabaseClient } from "@supabase/supabase-js";
-import {
-  GetServerSidePropsContext,
-  NextApiRequest,
-  NextApiResponse,
-} from "next";
-
-export const getSupabaseServerClient = async (
-  context:
-    | GetServerSidePropsContext
-    | {
-        req: NextApiRequest;
-        res: NextApiResponse;
-      }
-): Promise<{
-  supabase: SupabaseClient<Database>;
-  session: Session;
-  user: User;
-}> => {
-  const supabase = createPagesServerClient(context);
-
-  const {
-    data: { session },
-  } = await supabase.auth.getSession();
-
-  return {
-    supabase,
-    session,
-    user: session?.user,
-  };
-};
diff --git a/apps/web/utils/supabase/withSupabase.ts b/apps/web/utils/supabase/withSupabase.ts
new file mode 100644
index 0000000..1b206ba
--- /dev/null
+++ b/apps/web/utils/supabase/withSupabase.ts
@@ -0,0 +1,32 @@
+import { Database } from "@changes-page/supabase/types";
+import { SupabaseClient, User } from "@supabase/supabase-js";
+import { GetServerSidePropsContext, GetServerSidePropsResult } from "next";
+import { createServerClientSSR } from "./server";
+
+type SupabaseHandler<P = any> = (
+  context: GetServerSidePropsContext,
+  { supabase, user }: { supabase: SupabaseClient<Database>; user: User }
+) => Promise<GetServerSidePropsResult<P>>;
+
+export function withSupabase<P = any>(handler: SupabaseHandler<P>) {
+  return async (context: GetServerSidePropsContext) => {
+    const supabase = createServerClientSSR(context);
+
+    const {
+      data: { user },
+      error,
+    } = await supabase.auth.getUser();
+
+    if (!user || error) {
+      const next = encodeURIComponent(context.resolvedUrl || "/");
+      return {
+        redirect: {
+          destination: `/login?redirectedFrom=${next}`,
+          permanent: false,
+        },
+      } as GetServerSidePropsResult<P>;
+    }
+
+    return handler(context, { supabase, user });
+  };
+}
diff --git a/apps/web/utils/useDatabase.ts b/apps/web/utils/useDatabase.ts
index b1646da..c15b5b2 100644
--- a/apps/web/utils/useDatabase.ts
+++ b/apps/web/utils/useDatabase.ts
@@ -206,9 +206,7 @@ export const updateSubscriptionUsage = async (
   }
 };
 
-export const createOrRetrievePageSettings = async (
-  page_id: string
-) => {
+export const createOrRetrievePageSettings = async (page_id: string) => {
   const { data: pageSettings } = await supabaseAdmin
     .from("page_settings")
     .select("*")
@@ -218,10 +216,7 @@ export const createOrRetrievePageSettings = async (
   if (pageSettings) return pageSettings;
 
   const { data: newPageSettings, error: createPageSettingsError } =
-    await supabaseAdmin
-      .from("page_settings")
-      .insert([{ page_id }])
-      .select();
+    await supabaseAdmin.from("page_settings").insert([{ page_id }]).select();
 
   if (createPageSettingsError) throw createPageSettingsError;
 
@@ -335,7 +330,7 @@ export const reportEmailUsage = async (
 export async function getPageAnalytics(
   page_id: string,
   metric: string,
-  range: string
+  range: number
 ) {
   let functionName:
     | "page_view_browsers"
@@ -357,10 +352,7 @@ export async function getPageAnalytics(
       break;
   }
 
-  // date {range} days ago
-  const date = new Date(
-    Date.now() - (Number(range) || 7) * 24 * 60 * 60 * 1000
-  );
+  const date = new Date(Date.now() - (range || 7) * 24 * 60 * 60 * 1000);
   console.log(
     `Fetching ${metric} for page ${page_id} for last ${range} days: ${date.toISOString()}`
   );
@@ -374,4 +366,3 @@ export async function getPageAnalytics(
 
   return data as unknown as IAnalyticsData[];
 }
-
diff --git a/apps/web/utils/useSSR.ts b/apps/web/utils/useSSR.ts
index 34d723e..fd15fa4 100644
--- a/apps/web/utils/useSSR.ts
+++ b/apps/web/utils/useSSR.ts
@@ -1,6 +1,7 @@
-import { SupabaseClient } from "@supabase/auth-helpers-nextjs";
+import { SupabaseClient } from "@supabase/supabase-js";
+import { Database } from "@changes-page/supabase/types";
 
-export async function getPage(supabase: SupabaseClient, id: string) {
+export async function getPage(supabase: SupabaseClient<Database>, id: string) {
   const { data: page } = await supabase
     .from("pages")
     .select("id,title,type,description,url_slug,user_id")
diff --git a/apps/web/utils/useUser.tsx b/apps/web/utils/useUser.tsx
index 7d3762d..90b7d65 100644
--- a/apps/web/utils/useUser.tsx
+++ b/apps/web/utils/useUser.tsx
@@ -1,10 +1,10 @@
 import { Database } from "@changes-page/supabase/types";
-import { Session, SupabaseClient, User } from "@supabase/auth-helpers-nextjs";
 import {
-  useSession,
-  useSupabaseClient,
-  useUser,
-} from "@supabase/auth-helpers-react";
+  AuthError,
+  Session,
+  SupabaseClient,
+  User,
+} from "@supabase/supabase-js";
 import { useRouter } from "next/router";
 import posthog from "posthog-js";
 import {
@@ -16,17 +16,17 @@ import {
 } from "react";
 import { notifyError, notifyInfo } from "../components/core/toast.component";
 import { ROUTES } from "../data/routes.data";
-import { IBillingInfo, IUser } from "../data/user.interface";
+import { IBillingInfo } from "../data/user.interface";
 import { httpGet } from "../utils/http";
+import { createClient } from "./supabase/client";
 
 const UserContext = createContext<{
   loading: boolean;
   session: Session | null;
   user: User | null;
-  billingDetails: IBillingInfo;
-  fetchBilling: () => void;
-  fetchUser: () => Promise<IUser>;
-  signOut: () => Promise<{ error: Error | null }>;
+  billingDetails: IBillingInfo | null;
+  fetchBilling: () => Promise<IBillingInfo | null>;
+  signOut: () => Promise<{ error: AuthError | null }>;
   supabase: SupabaseClient<Database>;
 }>({
   loading: true,
@@ -34,25 +34,31 @@ const UserContext = createContext<{
   user: null,
   billingDetails: null,
   fetchBilling: () => null,
-  fetchUser: () => null,
   signOut: () => null,
   supabase: null,
 });
 
-export const UserContextProvider = (props: any) => {
-  const supabase = useSupabaseClient();
-  const session = useSession();
-  const user = useUser();
+export const UserContextProvider = ({
+  children,
+  initialSession = null,
+}: {
+  children: React.ReactNode;
+  initialSession?: Session | null;
+}) => {
+  const [supabase] = useState(() => createClient());
+  const [session, setSession] = useState<Session | null>(initialSession);
+  const [user, setUser] = useState<User | null>(initialSession?.user ?? null);
+  const [loading, setLoading] = useState(!initialSession);
+  const [billingDetails, setBillingDetails] = useState<IBillingInfo | null>(
+    null
+  );
 
   const router = useRouter();
-  const [loading, setLoading] = useState(true);
-  const [billingDetails, setBillingDetails] = useState<IBillingInfo>(null);
 
   const fetchBilling = useCallback(async () => {
     return httpGet({ url: `/api/billing` })
       .then((billingDetails) => {
         setBillingDetails(billingDetails);
-
         return billingDetails;
       })
       .catch((error) => {
@@ -61,6 +67,43 @@ export const UserContextProvider = (props: any) => {
       });
   }, []);
 
+  const signOut = useCallback(async () => {
+    const { error } = await supabase.auth.signOut();
+
+    posthog.reset();
+    setBillingDetails(null);
+    await router.replace(ROUTES.HOME);
+
+    notifyInfo("Logout completed");
+
+    return { error };
+  }, [supabase, router]);
+
+  useEffect(() => {
+    // Get initial session
+    const getInitialSession = async () => {
+      const {
+        data: { session },
+      } = await supabase.auth.getSession();
+      setSession(session);
+      setUser(session?.user ?? null);
+      setLoading(false);
+    };
+
+    getInitialSession();
+
+    // Listen for auth changes
+    const {
+      data: { subscription },
+    } = supabase.auth.onAuthStateChange(async (_, session) => {
+      setSession(session);
+      setUser(session?.user ?? null);
+      setLoading(false);
+    });
+
+    return () => subscription.unsubscribe();
+  }, [supabase]);
+
   useEffect(() => {
     if (user) {
       fetchBilling().then(() => {
@@ -79,29 +122,20 @@ export const UserContextProvider = (props: any) => {
     loading,
     session,
     user,
-
     billingDetails,
     fetchBilling,
-
-    signOut: async () => {
-      await router.replace(ROUTES.HOME);
-      await supabase.auth.signOut();
-
-      setBillingDetails(null);
-
-      notifyInfo("Logout completed");
-    },
-
+    signOut,
     supabase,
   };
 
-  return <UserContext.Provider value={value} {...props} />;
+  // @ts-ignore
+  return <UserContext.Provider value={value}>{children}</UserContext.Provider>;
 };
 
 export const useUserData = () => {
   const context = useContext(UserContext);
   if (context === undefined) {
-    throw new Error(`useUser must be used within a UserContextProvider.`);
+    throw new Error(`useUserData must be used within a UserContextProvider.`);
   }
   return context;
 };
diff --git a/apps/web/utils/withAuth.ts b/apps/web/utils/withAuth.ts
new file mode 100644
index 0000000..f3d86d1
--- /dev/null
+++ b/apps/web/utils/withAuth.ts
@@ -0,0 +1,40 @@
+import { Database } from "@changes-page/supabase/types";
+import { IErrorResponse } from "@changes-page/supabase/types/api";
+import { SupabaseClient, User } from "@supabase/supabase-js";
+import type { NextApiRequest, NextApiResponse } from "next";
+import { createServerClientForAPI } from "./supabase/server";
+
+type AuthenticatedHandler<T = unknown> = (
+  req: NextApiRequest,
+  res: NextApiResponse<T | IErrorResponse>,
+  { supabase, user }: { supabase: SupabaseClient<Database>; user: User }
+) => Promise<void> | void;
+
+export function withAuth<T = unknown>(handler: AuthenticatedHandler<T>) {
+  return async (
+    req: NextApiRequest,
+    res: NextApiResponse<T | IErrorResponse>
+  ) => {
+    try {
+      const supabase = createServerClientForAPI({ req, res });
+
+      const {
+        data: { user },
+        error,
+      } = await supabase.auth.getUser();
+
+      if (!user || error) {
+        return res.status(401).json({
+          error: { statusCode: 401, message: "Unauthorized" },
+        });
+      }
+
+      return handler(req, res, { supabase, user });
+    } catch (error) {
+      console.error("Auth wrapper error:", error);
+      return res.status(500).json({
+        error: { statusCode: 500, message: "Internal server error" },
+      });
+    }
+  };
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a2e9d45..d5e4a99 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -243,18 +243,15 @@ importers:
       '@sentry/nextjs':
         specifier: ^7.77.0
         version: 7.120.3(next@14.2.28(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
-      '@supabase/auth-helpers-nextjs':
-        specifier: ^0.8.7
-        version: 0.8.7(@supabase/supabase-js@2.49.4)
-      '@supabase/auth-helpers-react':
-        specifier: ^0.4.2
-        version: 0.4.2(@supabase/supabase-js@2.49.4)
       '@supabase/auth-ui-react':
         specifier: ^0.4.7
         version: 0.4.7(@supabase/supabase-js@2.49.4)
       '@supabase/auth-ui-shared':
         specifier: ^0.1.8
         version: 0.1.8(@supabase/supabase-js@2.49.4)
+      '@supabase/ssr':
+        specifier: ^0.7.0
+        version: 0.7.0(@supabase/supabase-js@2.49.4)
       '@supabase/supabase-js':
         specifier: ^2.39.3
         version: 2.49.4
@@ -264,6 +261,9 @@ importers:
       '@types/canvas-confetti':
         specifier: ^1.6.4
         version: 1.9.0
+      '@types/validator':
+        specifier: ^13.15.3
+        version: 13.15.3
       '@vercel/og':
         specifier: ^0.0.20
         version: 0.0.20
@@ -281,7 +281,7 @@ importers:
         version: 2.20.0
       eslint-config-next:
         specifier: ^14.0.4
-        version: 14.2.28(eslint@7.32.0)(typescript@4.9.5)
+        version: 14.2.28(eslint@7.32.0)(typescript@5.8.3)
       eventsource-parser:
         specifier: ^0.0.5
         version: 0.0.5
@@ -296,7 +296,7 @@ importers:
         version: 3.88.2
       inngest:
         specifier: ^1.5.4
-        version: 1.10.1(typescript@4.9.5)
+        version: 1.10.1(typescript@5.8.3)
       mime-types:
         specifier: ^2.1.34
         version: 2.1.35
@@ -381,6 +381,9 @@ importers:
       uuid:
         specifier: ^8.3.2
         version: 8.3.2
+      validator:
+        specifier: ^13.15.15
+        version: 13.15.15
       yup:
         specifier: ^1.3.3
         version: 1.6.1
@@ -413,8 +416,8 @@ importers:
         specifier: ^3.0.15
         version: 3.4.17
       typescript:
-        specifier: ^4
-        version: 4.9.5
+        specifier: ^5
+        version: 5.8.3
 
   packages/supabase:
     dependencies:
@@ -1691,24 +1694,6 @@ packages:
   '@streamparser/json@0.0.12':
     resolution: {integrity: sha512-+kmRpd+EeTFd3qNt1AoKphJqbAN26ZDsbiwqjBFeoAmdCyiUO19xMXPtYi9vovAj9a7OAJnvWtiHkwwjU2Fx4Q==}
 
-  '@supabase/auth-helpers-nextjs@0.8.7':
-    resolution: {integrity: sha512-iYdOjFo0GkRvha340l8JdCiBiyXQuG9v8jnq7qMJ/2fakrskRgHTCOt7ryWbip1T6BExcWKC8SoJrhCzPOxhhg==}
-    deprecated: This package is now deprecated - please use the @supabase/ssr package instead.
-    peerDependencies:
-      '@supabase/supabase-js': ^2.19.0
-
-  '@supabase/auth-helpers-react@0.4.2':
-    resolution: {integrity: sha512-zRj1leYMKJVYQeHFvZiUzlmHM+ATWFR/V7Q9F0yXSWEnMcNHL0CKnIBqhkjtSQ2trE+YaoCvFEHjxISppxIZXQ==}
-    deprecated: This package is now deprecated - please use the @supabase/ssr package instead.
-    peerDependencies:
-      '@supabase/supabase-js': ^2.19.0
-
-  '@supabase/auth-helpers-shared@0.6.3':
-    resolution: {integrity: sha512-xYQRLFeFkL4ZfwC7p9VKcarshj3FB2QJMgJPydvOY7J5czJe6xSG5/wM1z63RmAzGbCkKg+dzpq61oeSyWiGBQ==}
-    deprecated: This package is now deprecated - please use the @supabase/ssr package instead.
-    peerDependencies:
-      '@supabase/supabase-js': ^2.19.0
-
   '@supabase/auth-js@2.69.1':
     resolution: {integrity: sha512-FILtt5WjCNzmReeRLq5wRs3iShwmnWgBvxHfqapC/VoljJl+W8hDAyFmf1NVw3zH+ZjZ05AKxiKxVeb0HNWRMQ==}
 
@@ -1735,6 +1720,11 @@ packages:
   '@supabase/realtime-js@2.11.2':
     resolution: {integrity: sha512-u/XeuL2Y0QEhXSoIPZZwR6wMXgB+RQbJzG9VErA3VghVt7uRfSVsjeqd7m5GhX3JR6dM/WRmLbVR8URpDWG4+w==}
 
+  '@supabase/ssr@0.7.0':
+    resolution: {integrity: sha512-G65t5EhLSJ5c8hTCcXifSL9Q/ZRXvqgXeNo+d3P56f4U1IxwTqjB64UfmfixvmMcjuxnq2yGqEWVJqUcO+AzAg==}
+    peerDependencies:
+      '@supabase/supabase-js': ^2.43.4
+
   '@supabase/storage-js@2.7.1':
     resolution: {integrity: sha512-asYHcyDR1fKqrMpytAS1zjyEfvxuOIp1CIXX7ji4lHHcJKqyk+sLl/Vxgm4sN6u8zvuUtae9e4kDxQP2qrwWBA==}
 
@@ -1974,6 +1964,9 @@ packages:
   '@types/uuid@9.0.8':
     resolution: {integrity: sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==}
 
+  '@types/validator@13.15.3':
+    resolution: {integrity: sha512-7bcUmDyS6PN3EuD9SlGGOxM77F8WLVsrwkxyWxKnxzmXoequ6c7741QBrANq6htVRGOITJ7z72mTP6Z4XyuG+Q==}
+
   '@types/ws@8.18.1':
     resolution: {integrity: sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==}
 
@@ -2474,6 +2467,10 @@ packages:
   cookie-es@1.2.2:
     resolution: {integrity: sha512-+W7VmiVINB+ywl1HGXJXmrqkOhpKrIiVZV6tQuV54ZyQC7MMuBt81Vc336GMLoHBq5hV/F9eXgt5Mnx0Rha5Fg==}
 
+  cookie@1.0.2:
+    resolution: {integrity: sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==}
+    engines: {node: '>=18'}
+
   core-js@3.42.0:
     resolution: {integrity: sha512-Sz4PP4ZA+Rq4II21qkNqOEDTDrCvcANId3xpIgB34NDkWc3UduWj2dqEtN9yZIq8Dk3HyPI33x9sqqU5C8sr0g==}
 
@@ -3478,9 +3475,6 @@ packages:
   jju@1.4.0:
     resolution: {integrity: sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==}
 
-  jose@4.15.9:
-    resolution: {integrity: sha512-1vUQX+IdDMVPj4k8kOxgUqlcK518yluMuGZwqlr44FS1ppZB/5GWh4rZG89erpOBOJjU/OBsnCVFfapsRz6nEA==}
-
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
@@ -4636,9 +4630,6 @@ packages:
     resolution: {integrity: sha512-6a6dNqipzbCPlTFgztfNP2oG+IGcflMe/01zSzGrQcxGMKbIjOemBBD85pH92klWaJavAUWxAh9Z0aU28zxW6A==}
     deprecated: Rolling release, please update to 0.2.0
 
-  set-cookie-parser@2.7.1:
-    resolution: {integrity: sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==}
-
   set-function-length@1.2.2:
     resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
     engines: {node: '>= 0.4'}
@@ -5149,6 +5140,10 @@ packages:
   v8-compile-cache@2.4.0:
     resolution: {integrity: sha512-ocyWc3bAHBB/guyqJQVI5o4BZkPhznPYUG2ea80Gond/BgNWpap8TOmLSeeQG7bnh2KMISxskdADG59j7zruhw==}
 
+  validator@13.15.15:
+    resolution: {integrity: sha512-BgWVbCI72aIQy937xbawcs+hrVaN/CZ2UwutgaJ36hGqRrLNM+f5LUT/YPRbo8IV/ASeFzXszezV+y2+rq3l8A==}
+    engines: {node: '>= 0.10'}
+
   vary@1.1.2:
     resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
     engines: {node: '>= 0.8'}
@@ -6423,21 +6418,6 @@ snapshots:
 
   '@streamparser/json@0.0.12': {}
 
-  '@supabase/auth-helpers-nextjs@0.8.7(@supabase/supabase-js@2.49.4)':
-    dependencies:
-      '@supabase/auth-helpers-shared': 0.6.3(@supabase/supabase-js@2.49.4)
-      '@supabase/supabase-js': 2.49.4
-      set-cookie-parser: 2.7.1
-
-  '@supabase/auth-helpers-react@0.4.2(@supabase/supabase-js@2.49.4)':
-    dependencies:
-      '@supabase/supabase-js': 2.49.4
-
-  '@supabase/auth-helpers-shared@0.6.3(@supabase/supabase-js@2.49.4)':
-    dependencies:
-      '@supabase/supabase-js': 2.49.4
-      jose: 4.15.9
-
   '@supabase/auth-js@2.69.1':
     dependencies:
       '@supabase/node-fetch': 2.6.15
@@ -6477,6 +6457,11 @@ snapshots:
       - bufferutil
       - utf-8-validate
 
+  '@supabase/ssr@0.7.0(@supabase/supabase-js@2.49.4)':
+    dependencies:
+      '@supabase/supabase-js': 2.49.4
+      cookie: 1.0.2
+
   '@supabase/storage-js@2.7.1':
     dependencies:
       '@supabase/node-fetch': 2.6.15
@@ -6721,29 +6706,14 @@ snapshots:
 
   '@types/uuid@9.0.8': {}
 
+  '@types/validator@13.15.3': {}
+
   '@types/ws@8.18.1':
     dependencies:
       '@types/node': 18.19.100
 
   '@types/yoga-layout@1.9.2': {}
 
-  '@typescript-eslint/eslint-plugin@8.32.0(@typescript-eslint/parser@8.32.0(eslint@7.32.0)(typescript@4.9.5))(eslint@7.32.0)(typescript@4.9.5)':
-    dependencies:
-      '@eslint-community/regexpp': 4.12.1
-      '@typescript-eslint/parser': 8.32.0(eslint@7.32.0)(typescript@4.9.5)
-      '@typescript-eslint/scope-manager': 8.32.0
-      '@typescript-eslint/type-utils': 8.32.0(eslint@7.32.0)(typescript@4.9.5)
-      '@typescript-eslint/utils': 8.32.0(eslint@7.32.0)(typescript@4.9.5)
-      '@typescript-eslint/visitor-keys': 8.32.0
-      eslint: 7.32.0
-      graphemer: 1.4.0
-      ignore: 5.3.2
-      natural-compare: 1.4.0
-      ts-api-utils: 2.1.0(typescript@4.9.5)
-      typescript: 4.9.5
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/eslint-plugin@8.32.0(@typescript-eslint/parser@8.32.0(eslint@7.32.0)(typescript@5.8.3))(eslint@7.32.0)(typescript@5.8.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.1
@@ -6761,18 +6731,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.32.0(eslint@7.32.0)(typescript@4.9.5)':
-    dependencies:
-      '@typescript-eslint/scope-manager': 8.32.0
-      '@typescript-eslint/types': 8.32.0
-      '@typescript-eslint/typescript-estree': 8.32.0(typescript@4.9.5)
-      '@typescript-eslint/visitor-keys': 8.32.0
-      debug: 4.4.0
-      eslint: 7.32.0
-      typescript: 4.9.5
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/parser@8.32.0(eslint@7.32.0)(typescript@5.8.3)':
     dependencies:
       '@typescript-eslint/scope-manager': 8.32.0
@@ -6790,17 +6748,6 @@ snapshots:
       '@typescript-eslint/types': 8.32.0
       '@typescript-eslint/visitor-keys': 8.32.0
 
-  '@typescript-eslint/type-utils@8.32.0(eslint@7.32.0)(typescript@4.9.5)':
-    dependencies:
-      '@typescript-eslint/typescript-estree': 8.32.0(typescript@4.9.5)
-      '@typescript-eslint/utils': 8.32.0(eslint@7.32.0)(typescript@4.9.5)
-      debug: 4.4.0
-      eslint: 7.32.0
-      ts-api-utils: 2.1.0(typescript@4.9.5)
-      typescript: 4.9.5
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/type-utils@8.32.0(eslint@7.32.0)(typescript@5.8.3)':
     dependencies:
       '@typescript-eslint/typescript-estree': 8.32.0(typescript@5.8.3)
@@ -6814,20 +6761,6 @@ snapshots:
 
   '@typescript-eslint/types@8.32.0': {}
 
-  '@typescript-eslint/typescript-estree@8.32.0(typescript@4.9.5)':
-    dependencies:
-      '@typescript-eslint/types': 8.32.0
-      '@typescript-eslint/visitor-keys': 8.32.0
-      debug: 4.4.0
-      fast-glob: 3.3.3
-      is-glob: 4.0.3
-      minimatch: 9.0.5
-      semver: 7.7.1
-      ts-api-utils: 2.1.0(typescript@4.9.5)
-      typescript: 4.9.5
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/typescript-estree@8.32.0(typescript@5.8.3)':
     dependencies:
       '@typescript-eslint/types': 8.32.0
@@ -6842,17 +6775,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.32.0(eslint@7.32.0)(typescript@4.9.5)':
-    dependencies:
-      '@eslint-community/eslint-utils': 4.7.0(eslint@7.32.0)
-      '@typescript-eslint/scope-manager': 8.32.0
-      '@typescript-eslint/types': 8.32.0
-      '@typescript-eslint/typescript-estree': 8.32.0(typescript@4.9.5)
-      eslint: 7.32.0
-      typescript: 4.9.5
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/utils@8.32.0(eslint@7.32.0)(typescript@5.8.3)':
     dependencies:
       '@eslint-community/eslint-utils': 4.7.0(eslint@7.32.0)
@@ -7311,6 +7233,8 @@ snapshots:
 
   cookie-es@1.2.2: {}
 
+  cookie@1.0.2: {}
+
   core-js@3.42.0: {}
 
   cors@2.8.5:
@@ -7629,26 +7553,6 @@ snapshots:
 
   escape-string-regexp@5.0.0: {}
 
-  eslint-config-next@14.2.28(eslint@7.32.0)(typescript@4.9.5):
-    dependencies:
-      '@next/eslint-plugin-next': 14.2.28
-      '@rushstack/eslint-patch': 1.11.0
-      '@typescript-eslint/eslint-plugin': 8.32.0(@typescript-eslint/parser@8.32.0(eslint@7.32.0)(typescript@4.9.5))(eslint@7.32.0)(typescript@4.9.5)
-      '@typescript-eslint/parser': 8.32.0(eslint@7.32.0)(typescript@4.9.5)
-      eslint: 7.32.0
-      eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.31.0)(eslint@7.32.0)
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.32.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@3.10.1)(eslint@7.32.0)
-      eslint-plugin-jsx-a11y: 6.10.2(eslint@7.32.0)
-      eslint-plugin-react: 7.37.5(eslint@7.32.0)
-      eslint-plugin-react-hooks: 5.0.0-canary-7118f5dd7-20230705(eslint@7.32.0)
-    optionalDependencies:
-      typescript: 4.9.5
-    transitivePeerDependencies:
-      - eslint-import-resolver-webpack
-      - eslint-plugin-import-x
-      - supports-color
-
   eslint-config-next@14.2.28(eslint@7.32.0)(typescript@5.8.3):
     dependencies:
       '@next/eslint-plugin-next': 14.2.28
@@ -7658,7 +7562,7 @@ snapshots:
       eslint: 7.32.0
       eslint-import-resolver-node: 0.3.9
       eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.31.0)(eslint@7.32.0)
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.32.0(eslint@7.32.0)(typescript@5.8.3))(eslint@7.32.0)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.32.0(eslint@7.32.0)(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1)(eslint@7.32.0)
       eslint-plugin-jsx-a11y: 6.10.2(eslint@7.32.0)
       eslint-plugin-react: 7.37.5(eslint@7.32.0)
       eslint-plugin-react-hooks: 5.0.0-canary-7118f5dd7-20230705(eslint@7.32.0)
@@ -7688,18 +7592,7 @@ snapshots:
       tinyglobby: 0.2.13
       unrs-resolver: 1.7.2
     optionalDependencies:
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.32.0(eslint@7.32.0)(typescript@5.8.3))(eslint@7.32.0)
-    transitivePeerDependencies:
-      - supports-color
-
-  eslint-module-utils@2.12.0(@typescript-eslint/parser@8.32.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@7.32.0):
-    dependencies:
-      debug: 3.2.7
-    optionalDependencies:
-      '@typescript-eslint/parser': 8.32.0(eslint@7.32.0)(typescript@4.9.5)
-      eslint: 7.32.0
-      eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.31.0)(eslint@7.32.0)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.32.0(eslint@7.32.0)(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1)(eslint@7.32.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -7714,36 +7607,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.32.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@3.10.1)(eslint@7.32.0):
-    dependencies:
-      '@rtsao/scc': 1.1.0
-      array-includes: 3.1.8
-      array.prototype.findlastindex: 1.2.6
-      array.prototype.flat: 1.3.3
-      array.prototype.flatmap: 1.3.3
-      debug: 3.2.7
-      doctrine: 2.1.0
-      eslint: 7.32.0
-      eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.32.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@7.32.0)
-      hasown: 2.0.2
-      is-core-module: 2.16.1
-      is-glob: 4.0.3
-      minimatch: 3.1.2
-      object.fromentries: 2.0.8
-      object.groupby: 1.0.3
-      object.values: 1.2.1
-      semver: 6.3.1
-      string.prototype.trimend: 1.0.9
-      tsconfig-paths: 3.15.0
-    optionalDependencies:
-      '@typescript-eslint/parser': 8.32.0(eslint@7.32.0)(typescript@4.9.5)
-    transitivePeerDependencies:
-      - eslint-import-resolver-typescript
-      - eslint-import-resolver-webpack
-      - supports-color
-
-  eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.32.0(eslint@7.32.0)(typescript@5.8.3))(eslint@7.32.0):
+  eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.32.0(eslint@7.32.0)(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1)(eslint@7.32.0):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.8
@@ -8549,7 +8413,7 @@ snapshots:
     transitivePeerDependencies:
       - encoding
 
-  inngest@1.10.1(typescript@4.9.5):
+  inngest@1.10.1(typescript@5.8.3):
     dependencies:
       buffer: 6.0.3
       canonicalize: 1.0.8
@@ -8562,7 +8426,7 @@ snapshots:
       queue-microtask: 1.2.3
       serialize-error-cjs: 0.1.4
       type-fest: 3.13.1
-      typescript: 4.9.5
+      typescript: 5.8.3
       zod: 3.24.4
     transitivePeerDependencies:
       - encoding
@@ -8746,8 +8610,6 @@ snapshots:
 
   jju@1.4.0: {}
 
-  jose@4.15.9: {}
-
   js-tokens@4.0.0: {}
 
   js-yaml@3.14.1:
@@ -10347,8 +10209,6 @@ snapshots:
 
   serialize-error-cjs@0.1.4: {}
 
-  set-cookie-parser@2.7.1: {}
-
   set-function-length@1.2.2:
     dependencies:
       define-data-property: 1.1.4
@@ -10767,10 +10627,6 @@ snapshots:
 
   try-to-catch@3.0.1: {}
 
-  ts-api-utils@2.1.0(typescript@4.9.5):
-    dependencies:
-      typescript: 4.9.5
-
   ts-api-utils@2.1.0(typescript@5.8.3):
     dependencies:
       typescript: 5.8.3
@@ -11007,6 +10863,8 @@ snapshots:
 
   v8-compile-cache@2.4.0: {}
 
+  validator@13.15.15: {}
+
   vary@1.1.2: {}
 
   vfile-location@4.1.0: