From b7851e6e53e794f5ec2301b3c98435cbf694832a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20L=C3=B3pez?= <zomars@me.com>
Date: Wed, 2 Aug 2023 02:35:48 -0700
Subject: [PATCH] refactor: next/router hooks with next/navigation hooks
 (#9105)

Co-authored-by: Alex van Andel <me@alexvanandel.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: Bailey Pumfleet <bailey@pumfleet.co.uk>
Co-authored-by: Peer Richelsen <peer@cal.com>
Co-authored-by: Hariom Balhara <hariombalhara@gmail.com>
---
 apps/web/components/AppListCard.tsx           |  20 +-
 apps/web/components/AppsShell.tsx             |  26 -
 apps/web/components/BookingsShell.tsx         |  31 --
 apps/web/components/Embed.tsx                 | 257 ++++-----
 apps/web/components/NavTabs.tsx               |  99 ----
 apps/web/components/SettingsShell.tsx         |  60 ---
 apps/web/components/apps/App.tsx              | 491 +-----------------
 apps/web/components/apps/AppPage.tsx          | 367 +++++++++++++
 .../components/apps/InstallAppButtonChild.tsx | 124 +++++
 .../components/apps/layouts/AppsLayout.tsx    |   2 +-
 .../components/auth/layouts/AdminLayout.tsx   |   6 +-
 .../web/components/booking/AvailableTimes.tsx | 228 --------
 .../booking/BookingDescriptionPayment.tsx     |  38 --
 .../components/booking/BookingListItem.tsx    |  21 +-
 apps/web/components/booking/CancelBooking.tsx |   7 +-
 apps/web/components/booking/SlotPicker.tsx    | 198 -------
 apps/web/components/booking/TimeOptions.tsx   |  41 --
 .../components/booking/TimezoneDropdown.tsx   |  26 -
 apps/web/components/booking/UserAvatars.tsx   |  44 --
 .../components/eventtype/EventAdvancedTab.tsx |   4 +-
 .../eventtype/EventTypeSingleLayout.tsx       |   4 +-
 .../steps-views/SetupAvailability.tsx         |   5 +-
 .../steps-views/UserProfile.tsx               |   2 +-
 apps/web/components/setup/StepDone.tsx        |   2 +-
 apps/web/components/team/screens/Team.tsx     |   9 +-
 .../UsernameAvailability/PremiumTextfield.tsx |  16 +-
 .../ui/UsernameAvailability/index.tsx         |   6 +-
 apps/web/lib/app-providers.tsx                |  39 +-
 apps/web/lib/hooks/usePublicPage.ts           |   6 +-
 apps/web/lib/hooks/useRouterQuery.ts          |  33 +-
 apps/web/lib/hooks/useToggleQuery.tsx         |  28 +-
 apps/web/package.json                         |   1 -
 apps/web/pages/404.tsx                        |  19 +-
 apps/web/pages/500.tsx                        |  10 +-
 apps/web/pages/[user].tsx                     |  13 +-
 apps/web/pages/apps/[slug]/[...pages].tsx     |   6 +-
 apps/web/pages/apps/[slug]/setup.tsx          |  13 +-
 apps/web/pages/apps/categories/[category].tsx |   6 +-
 apps/web/pages/apps/installed/[category].tsx  |   7 +-
 apps/web/pages/auth/error.tsx                 |  14 +-
 apps/web/pages/auth/forgot-password/index.tsx |   2 +-
 apps/web/pages/auth/login.tsx                 |   7 +-
 apps/web/pages/auth/logout.tsx                |   2 +-
 apps/web/pages/auth/saml-idp.tsx              |  10 +-
 apps/web/pages/auth/setup/index.tsx           |  18 +-
 apps/web/pages/auth/sso/[provider].tsx        |   5 +-
 apps/web/pages/auth/sso/direct.tsx            |   2 +-
 apps/web/pages/auth/verify-email.tsx          |   2 +-
 apps/web/pages/auth/verify.tsx                |  30 +-
 apps/web/pages/availability/[schedule].tsx    |  34 +-
 apps/web/pages/availability/index.tsx         |   2 +-
 apps/web/pages/booking/[uid].tsx              |  33 +-
 apps/web/pages/bookings/[status].tsx          |   8 +-
 apps/web/pages/event-types/index.tsx          |  66 ++-
 .../web/pages/getting-started/[[...step]].tsx |  17 +-
 apps/web/pages/settings/billing/index.tsx     |   6 +-
 .../pages/settings/my-account/calendars.tsx   |   2 +-
 .../web/pages/settings/my-account/general.tsx |  11 +-
 .../settings/organizations/[id]/about.tsx     |   6 +-
 .../settings/organizations/[id]/add-teams.tsx |   9 +-
 .../organizations/[id]/onboard-admins.tsx     |  10 +-
 .../organizations/[id]/set-password.tsx       |   6 +-
 apps/web/pages/signup.tsx                     |  16 +-
 apps/web/pages/team/[slug].tsx                |  12 +-
 apps/web/playwright/event-types.e2e.ts        |   2 +
 .../applecalendar/pages/setup/index.tsx       |   2 +-
 .../caldavcalendar/pages/setup/index.tsx      |   2 +-
 .../app-store/closecom/pages/setup/index.tsx  |   2 +-
 packages/app-store/components.tsx             |   2 +-
 .../pages/setup/index.tsx                     |   2 +-
 .../pages/setup/index.tsx                     |   2 +-
 .../exchangecalendar/pages/setup/index.tsx    |   2 +-
 .../routing-forms/components/FormActions.tsx  |  51 +-
 .../pages/forms/[...appPages].tsx             |  53 +-
 .../pages/layout-handler/[...appPages].tsx    |  14 +-
 .../pages/routing-link/[...appPages].tsx      |  10 +-
 .../app-store/sendgrid/pages/setup/index.tsx  |   2 +-
 .../components/EventTypeAppCardInterface.tsx  |   8 +-
 .../embeds/embed-core/src/embed-iframe.ts     |  40 +-
 packages/features/apps/AdminAppsList.tsx      |  10 +-
 .../apps/components/DisconnectIntegration.tsx |   8 +-
 .../BookEventForm/BookEventForm.tsx           |  30 +-
 .../event-meta}/AvailableEventLocations.tsx   |   0
 .../components/event-meta/Details.tsx         |   2 +-
 .../components/AboutOrganizationForm.tsx      |   8 +-
 .../components/AddNewOrgAdminsForm.tsx        |   8 +-
 .../components/AddNewTeamsForm.tsx            |  10 +-
 .../components/CreateANewOrganizationForm.tsx |   2 +-
 .../components/OrgUpgradeBanner.tsx           |   2 +-
 .../components/SetPasswordForm.tsx            |   8 +-
 .../pages/settings/appearance.tsx             |   2 +-
 .../organizations/pages/settings/general.tsx  |   2 +-
 .../organizations/pages/settings/profile.tsx  |  38 +-
 .../ee/payments/components/Payment.tsx        |  13 +-
 .../features/ee/sso/page/teams-sso-view.tsx   |   9 +-
 .../features/ee/sso/page/user-sso-view.tsx    |   2 +-
 .../ee/teams/components/AddNewTeamMembers.tsx |  16 +-
 .../teams/components/CreateANewTeamForm.tsx   |   6 +-
 .../GoogleWorkspaceInviteButton.tsx           |  10 +-
 .../ee/teams/components/TeamListItem.tsx      |   8 +-
 .../ee/teams/components/TeamsListing.tsx      |   8 +-
 .../teams/components/TeamsUpgradeBanner.tsx   |   2 +-
 .../ee/teams/pages/team-appearance-view.tsx   |   6 +-
 .../ee/teams/pages/team-billing-view.tsx      |   6 +-
 .../ee/teams/pages/team-members-view.tsx      |  15 +-
 .../ee/teams/pages/team-profile-view.tsx      |  18 +-
 .../features/ee/users/components/UserForm.tsx |  34 +-
 .../ee/users/components/UsersTable.tsx        |   9 +-
 .../ee/users/pages/users-add-view.tsx         |   5 +-
 .../ee/users/pages/users-edit-view.tsx        |  15 +-
 .../features/ee/users/server/trpc-router.ts   |   3 +-
 .../ee/workflows/components/EmptyScreen.tsx   |   6 +-
 .../components/EventWorkflowsTab.tsx          |   2 +-
 .../components/WorkflowDetailsPage.tsx        |  11 +-
 .../workflows/components/WorkflowListPage.tsx |   2 +-
 .../ee/workflows/lib/actionHelperFunctions.ts |  10 +-
 .../lib/reminders/emailReminderManager.ts     | 110 ++--
 .../lib/reminders/reminderScheduler.ts        |  10 +-
 .../features/ee/workflows/pages/index.tsx     |  13 +-
 .../features/ee/workflows/pages/workflow.tsx  |  26 +-
 .../components/CreateEventTypeDialog.tsx      |   2 +-
 .../eventtypes/components/DuplicateDialog.tsx |  21 +-
 .../insights/context/FiltersProvider.tsx      |  79 ++-
 packages/features/kbar/Kbar.tsx               |   2 +-
 .../components/NewScheduleButton.tsx          |   2 +-
 .../settings/layouts/SettingsLayout.tsx       |  48 +-
 .../features/shell/NProgressPageIndicator.tsx |  80 ---
 packages/features/shell/Shell.tsx             |  76 ++-
 .../webhooks/pages/webhook-edit-view.tsx      | 171 +++---
 .../webhooks/pages/webhook-new-view.tsx       |   9 +-
 .../features/webhooks/pages/webhooks-view.tsx |   9 +-
 packages/lib/bookingSuccessRedirect.ts        |  68 +--
 packages/lib/hooks/useParamsWithFallback.ts   |  13 +
 packages/lib/hooks/useRouterQuery.ts          |  36 ++
 packages/lib/hooks/useTypedQuery.ts           |  34 +-
 packages/lib/hooks/useUrlMatchesCurrentUrl.ts |  19 +
 packages/lib/i18n.ts                          |   8 +
 packages/lib/package.json                     |   1 +
 packages/types/next.d.ts                      |   7 +
 packages/ui/components/apps/AllApps.tsx       |  23 +-
 packages/ui/components/apps/AppCard.tsx       |  13 +-
 .../ui/components/breadcrumb/Breadcrumb.tsx   |   8 +-
 .../components/createButton/CreateButton.tsx  |  32 +-
 packages/ui/components/dialog/Dialog.tsx      |  50 +-
 packages/ui/components/dialog/dialog.test.tsx |  18 +-
 .../ui/components/form/wizard/WizardForm.tsx  |   7 +-
 packages/ui/components/head-seo/HeadSeo.tsx   |   4 +-
 .../navigation/tabs/HorizontalTabItem.tsx     |   5 +-
 .../navigation/tabs/VerticalTabItem.tsx       |   6 +-
 packages/ui/layouts/WizardLayout.tsx          |   8 +-
 packages/ui/package.json                      |   1 +
 yarn.lock                                     | 163 +++---
 152 files changed, 1802 insertions(+), 2565 deletions(-)
 delete mode 100644 apps/web/components/AppsShell.tsx
 delete mode 100644 apps/web/components/BookingsShell.tsx
 delete mode 100644 apps/web/components/NavTabs.tsx
 delete mode 100644 apps/web/components/SettingsShell.tsx
 create mode 100644 apps/web/components/apps/AppPage.tsx
 create mode 100644 apps/web/components/apps/InstallAppButtonChild.tsx
 delete mode 100644 apps/web/components/booking/AvailableTimes.tsx
 delete mode 100644 apps/web/components/booking/BookingDescriptionPayment.tsx
 delete mode 100644 apps/web/components/booking/SlotPicker.tsx
 delete mode 100644 apps/web/components/booking/TimeOptions.tsx
 delete mode 100644 apps/web/components/booking/TimezoneDropdown.tsx
 delete mode 100644 apps/web/components/booking/UserAvatars.tsx
 rename {apps/web/components/booking => packages/features/bookings/components/event-meta}/AvailableEventLocations.tsx (100%)
 delete mode 100644 packages/features/shell/NProgressPageIndicator.tsx
 create mode 100644 packages/lib/hooks/useParamsWithFallback.ts
 create mode 100644 packages/lib/hooks/useRouterQuery.ts
 create mode 100644 packages/lib/hooks/useUrlMatchesCurrentUrl.ts

diff --git a/apps/web/components/AppListCard.tsx b/apps/web/components/AppListCard.tsx
index ddc2075fbb..604891a43b 100644
--- a/apps/web/components/AppListCard.tsx
+++ b/apps/web/components/AppListCard.tsx
@@ -1,4 +1,4 @@
-import { useRouter } from "next/router";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import type { ReactNode } from "react";
 import { useEffect, useRef, useState } from "react";
 import { z } from "zod";
@@ -10,7 +10,15 @@ import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery";
 import { Badge, ListItemText, Avatar } from "@calcom/ui";
 import { AlertCircle } from "@calcom/ui/components/icon";
 
-type ShouldHighlight = { slug: string; shouldHighlight: true } | { shouldHighlight?: never; slug?: never };
+type ShouldHighlight =
+  | {
+      slug: string;
+      shouldHighlight: true;
+    }
+  | {
+      shouldHighlight?: never;
+      slug?: never;
+    };
 
 type AppListCardProps = {
   logo?: string;
@@ -47,14 +55,16 @@ export default function AppListCard(props: AppListCardProps) {
   const router = useRouter();
   const [highlight, setHighlight] = useState(shouldHighlight && hl === slug);
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
 
   useEffect(() => {
     if (shouldHighlight && highlight) {
       const timer = setTimeout(() => {
         setHighlight(false);
-        const url = new URL(window.location.href);
-        url.searchParams.delete("hl");
-        router.replace(url.pathname, undefined, { shallow: true });
+        const _searchParams = new URLSearchParams(searchParams);
+        _searchParams.delete("hl");
+        router.replace(`${pathname}?${_searchParams.toString()}`);
       }, 3000);
       timeoutRef.current = timer;
     }
diff --git a/apps/web/components/AppsShell.tsx b/apps/web/components/AppsShell.tsx
deleted file mode 100644
index 1c6230eaf3..0000000000
--- a/apps/web/components/AppsShell.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { useSession } from "next-auth/react";
-import React from "react";
-
-import NavTabs from "./NavTabs";
-
-const tabs = [
-  {
-    name: "app_store",
-    href: "/apps",
-  },
-  {
-    name: "installed_apps",
-    href: "/apps/installed",
-  },
-];
-
-export default function AppsShell({ children }: { children: React.ReactNode }) {
-  const { status } = useSession();
-
-  return (
-    <>
-      <div className="mb-12 block lg:hidden">{status === "authenticated" && <NavTabs tabs={tabs} />}</div>
-      <main className="pb-6">{children}</main>
-    </>
-  );
-}
diff --git a/apps/web/components/BookingsShell.tsx b/apps/web/components/BookingsShell.tsx
deleted file mode 100644
index 5382c98aac..0000000000
--- a/apps/web/components/BookingsShell.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from "react";
-
-import NavTabs from "./NavTabs";
-
-const tabs = [
-  {
-    name: "upcoming",
-    href: "/bookings/upcoming",
-  },
-  {
-    name: "recurring",
-    href: "/bookings/recurring",
-  },
-  {
-    name: "past",
-    href: "/bookings/past",
-  },
-  {
-    name: "cancelled",
-    href: "/bookings/cancelled",
-  },
-];
-
-export default function BookingsShell({ children }: { children: React.ReactNode }) {
-  return (
-    <>
-      <NavTabs tabs={tabs} />
-      <main>{children}</main>
-    </>
-  );
-}
diff --git a/apps/web/components/Embed.tsx b/apps/web/components/Embed.tsx
index cee32c4ad7..8372db4ec6 100644
--- a/apps/web/components/Embed.tsx
+++ b/apps/web/components/Embed.tsx
@@ -2,8 +2,7 @@ import { Collapsible, CollapsibleContent } from "@radix-ui/react-collapsible";
 import classNames from "classnames";
 import { useSession } from "next-auth/react";
 import type { TFunction } from "next-i18next";
-import type { NextRouter } from "next/router";
-import { useRouter } from "next/router";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import type { MutableRefObject, RefObject } from "react";
 import { createRef, forwardRef, useRef, useState } from "react";
 import type { ControlProps } from "react-select";
@@ -13,7 +12,7 @@ import { shallow } from "zustand/shallow";
 import type { Dayjs } from "@calcom/dayjs";
 import dayjs from "@calcom/dayjs";
 import { AvailableTimes } from "@calcom/features/bookings";
-import { useInitializeBookerStore, useBookerStore } from "@calcom/features/bookings/Booker/store";
+import { useBookerStore, useInitializeBookerStore } from "@calcom/features/bookings/Booker/store";
 import type { BookerLayout } from "@calcom/features/bookings/Booker/types";
 import { useEvent, useScheduleForEvent } from "@calcom/features/bookings/Booker/utils/event";
 import { useTimePreferences } from "@calcom/features/bookings/lib/timePreferences";
@@ -21,30 +20,29 @@ import DatePicker from "@calcom/features/calendars/DatePicker";
 import { useFlagMap } from "@calcom/features/flags/context/provider";
 import { useNonEmptyScheduleDays } from "@calcom/features/schedules";
 import { useSlotsForDate } from "@calcom/features/schedules/lib/use-schedule/useSlotsForDate";
-import { CAL_URL } from "@calcom/lib/constants";
-import { APP_NAME, EMBED_LIB_URL, IS_SELF_HOSTED, WEBAPP_URL } from "@calcom/lib/constants";
+import { APP_NAME, CAL_URL, EMBED_LIB_URL, IS_SELF_HOSTED, WEBAPP_URL } from "@calcom/lib/constants";
 import { weekdayToWeekIndex } from "@calcom/lib/date-fns";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { BookerLayouts } from "@calcom/prisma/zod-utils";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
-import { TimezoneSelect } from "@calcom/ui";
 import {
   Button,
+  ColorPicker,
   Dialog,
   DialogClose,
-  DialogFooter,
   DialogContent,
+  DialogFooter,
   HorizontalTabs,
   Label,
+  Select,
   showToast,
   Switch,
   TextArea,
   TextField,
-  ColorPicker,
-  Select,
+  TimezoneSelect,
 } from "@calcom/ui";
-import { Code, Trello, Sun, ArrowLeft, ArrowDown, ArrowUp } from "@calcom/ui/components/icon";
+import { ArrowDown, ArrowLeft, ArrowUp, Code, Sun, Trello } from "@calcom/ui/components/icon";
 
 type EventType = RouterOutputs["viewer"]["eventTypes"]["get"]["eventType"] | undefined;
 type EmbedType = "inline" | "floating-popup" | "element-click" | "email";
@@ -87,25 +85,31 @@ const getDimension = (dimension: string) => {
   return dimension;
 };
 
-const goto = (router: NextRouter, searchParams: Record<string, string>) => {
-  const newQuery = new URLSearchParams(router.asPath.split("?")[1]);
-  Object.keys(searchParams).forEach((key) => {
-    newQuery.set(key, searchParams[key]);
-  });
-  router.push(`${router.asPath.split("?")[0]}?${newQuery.toString()}`, undefined, {
-    shallow: true,
-  });
-};
+function useRouterHelpers() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
 
-const removeQueryParams = (router: NextRouter, queryParams: string[]) => {
-  const params = new URLSearchParams(window.location.search);
+  const goto = (newSearchParams: Record<string, string>) => {
+    const newQuery = new URLSearchParams(searchParams);
+    Object.keys(newSearchParams).forEach((key) => {
+      newQuery.set(key, newSearchParams[key]);
+    });
+    router.push(`${pathname}?${newQuery.toString()}`);
+  };
 
-  queryParams.forEach((param) => {
-    params.delete(param);
-  });
+  const removeQueryParams = (queryParams: string[]) => {
+    const params = new URLSearchParams(searchParams);
 
-  router.push(`${router.asPath.split("?")[0]}?${params.toString()}`);
-};
+    queryParams.forEach((param) => {
+      params.delete(param);
+    });
+
+    router.push(`${pathname}?${params.toString()}`);
+  };
+
+  return { goto, removeQueryParams };
+}
 
 const getQueryParam = (queryParam: string) => {
   const params = new URLSearchParams(window.location.search);
@@ -325,6 +329,8 @@ ${uiInstructionCode}`;
   },
 };
 
+type EmbedCommonProps = { embedType: EmbedType; calLink: string; previewState: PreviewState };
+
 const getEmbedTypeSpecificString = ({
   embedFramework,
   embedType,
@@ -332,10 +338,7 @@ const getEmbedTypeSpecificString = ({
   previewState,
 }: {
   embedFramework: EmbedFramework;
-  embedType: EmbedType;
-  calLink: string;
-  previewState: PreviewState;
-}) => {
+} & EmbedCommonProps) => {
   const frameworkCodes = Codes[embedFramework];
   if (!frameworkCodes) {
     throw new Error(`No code available for the framework:${embedFramework}`);
@@ -823,77 +826,74 @@ const tabs = [
     href: "embedTabName=embed-code",
     icon: Code,
     type: "code",
-    Component: forwardRef<
-      HTMLTextAreaElement | HTMLIFrameElement | null,
-      { embedType: EmbedType; calLink: string; previewState: PreviewState }
-    >(function EmbedHtml({ embedType, calLink, previewState }, ref) {
-      const { t } = useLocale();
-      if (ref instanceof Function || !ref) {
-        return null;
-      }
-      if (ref.current && !(ref.current instanceof HTMLTextAreaElement)) {
-        return null;
-      }
-      return (
-        <>
-          <div>
-            <small className="text-subtle flex py-4">
-              {t("place_where_cal_widget_appear", { appName: APP_NAME })}
-            </small>
-          </div>
-          <TextArea
-            data-testid="embed-code"
-            ref={ref as typeof ref & MutableRefObject<HTMLTextAreaElement>}
-            name="embed-code"
-            className="text-default bg-default selection:bg-subtle h-[calc(100%-50px)] font-mono"
-            style={{ resize: "none", overflow: "auto" }}
-            readOnly
-            value={
-              `<!-- Cal ${embedType} embed code begins -->\n` +
-              (embedType === "inline"
-                ? `<div style="width:${getDimension(previewState.inline.width)};height:${getDimension(
-                    previewState.inline.height
-                  )};overflow:scroll" id="my-cal-inline"></div>\n`
-                : "") +
-              `<script type="text/javascript">
+    Component: forwardRef<HTMLTextAreaElement | HTMLIFrameElement | null, EmbedCommonProps>(
+      function EmbedHtml({ embedType, calLink, previewState }, ref) {
+        const { t } = useLocale();
+        if (ref instanceof Function || !ref) {
+          return null;
+        }
+        if (ref.current && !(ref.current instanceof HTMLTextAreaElement)) {
+          return null;
+        }
+        return (
+          <>
+            <div>
+              <small className="text-subtle flex py-4">
+                {t("place_where_cal_widget_appear", { appName: APP_NAME })}
+              </small>
+            </div>
+            <TextArea
+              data-testid="embed-code"
+              ref={ref as typeof ref & MutableRefObject<HTMLTextAreaElement>}
+              name="embed-code"
+              className="text-default bg-default selection:bg-subtle h-[calc(100%-50px)] font-mono"
+              style={{ resize: "none", overflow: "auto" }}
+              readOnly
+              value={
+                `<!-- Cal ${embedType} embed code begins -->\n` +
+                (embedType === "inline"
+                  ? `<div style="width:${getDimension(previewState.inline.width)};height:${getDimension(
+                      previewState.inline.height
+                    )};overflow:scroll" id="my-cal-inline"></div>\n`
+                  : "") +
+                `<script type="text/javascript">
 ${getEmbedSnippetString()}
 ${getEmbedTypeSpecificString({ embedFramework: "HTML", embedType, calLink, previewState })}
 </script>
 <!-- Cal ${embedType} embed code ends -->`
-            }
-          />
-          <p className="text-subtle hidden text-sm">{t("need_help_embedding")}</p>
-        </>
-      );
-    }),
+              }
+            />
+            <p className="text-subtle hidden text-sm">{t("need_help_embedding")}</p>
+          </>
+        );
+      }
+    ),
   },
   {
     name: "React",
     href: "embedTabName=embed-react",
     icon: Code,
     type: "code",
-    Component: forwardRef<
-      HTMLTextAreaElement | HTMLIFrameElement | null,
-      { embedType: EmbedType; calLink: string; previewState: PreviewState }
-    >(function EmbedReact({ embedType, calLink, previewState }, ref) {
-      const { t } = useLocale();
-      if (ref instanceof Function || !ref) {
-        return null;
-      }
-      if (ref.current && !(ref.current instanceof HTMLTextAreaElement)) {
-        return null;
-      }
-      return (
-        <>
-          <small className="text-subtle flex py-4">{t("create_update_react_component")}</small>
-          <TextArea
-            data-testid="embed-react"
-            ref={ref as typeof ref & MutableRefObject<HTMLTextAreaElement>}
-            name="embed-react"
-            className="text-default bg-default selection:bg-subtle h-[calc(100%-50px)] font-mono"
-            readOnly
-            style={{ resize: "none", overflow: "auto" }}
-            value={`/* First make sure that you have installed the package */
+    Component: forwardRef<HTMLTextAreaElement | HTMLIFrameElement | null, EmbedCommonProps>(
+      function EmbedReact({ embedType, calLink, previewState }, ref) {
+        const { t } = useLocale();
+        if (ref instanceof Function || !ref) {
+          return null;
+        }
+        if (ref.current && !(ref.current instanceof HTMLTextAreaElement)) {
+          return null;
+        }
+        return (
+          <>
+            <small className="text-subtle flex py-4">{t("create_update_react_component")}</small>
+            <TextArea
+              data-testid="embed-react"
+              ref={ref as typeof ref & MutableRefObject<HTMLTextAreaElement>}
+              name="embed-react"
+              className="text-default bg-default selection:bg-subtle h-[calc(100%-50px)] font-mono"
+              readOnly
+              style={{ resize: "none", overflow: "auto" }}
+              value={`/* First make sure that you have installed the package */
 
 /* If you are using yarn */
 // yarn add @calcom/embed-react
@@ -902,20 +902,21 @@ ${getEmbedTypeSpecificString({ embedFramework: "HTML", embedType, calLink, previ
 // npm install @calcom/embed-react
 ${getEmbedTypeSpecificString({ embedFramework: "react", embedType, calLink, previewState })}
 `}
-          />
-        </>
-      );
-    }),
+            />
+          </>
+        );
+      }
+    ),
   },
   {
     name: "Preview",
     href: "embedTabName=embed-preview",
     icon: Trello,
     type: "iframe",
-    Component: forwardRef<
-      HTMLIFrameElement | HTMLTextAreaElement | null,
-      { calLink: string; embedType: EmbedType; previewState: PreviewState }
-    >(function Preview({ calLink, embedType }, ref) {
+    Component: forwardRef<HTMLIFrameElement | HTMLTextAreaElement | null, EmbedCommonProps>(function Preview(
+      { calLink, embedType },
+      ref
+    ) {
       if (ref instanceof Function || !ref) {
         return null;
       }
@@ -943,7 +944,16 @@ Cal("init", {origin:"${WEBAPP_URL}"});
 `;
 }
 
-const ThemeSelectControl = ({ children, ...props }: ControlProps<{ value: Theme; label: string }, false>) => {
+const ThemeSelectControl = ({
+  children,
+  ...props
+}: ControlProps<
+  {
+    value: Theme;
+    label: string;
+  },
+  false
+>) => {
   return (
     <components.Control {...props}>
       <Sun className="text-subtle mr-2 h-4 w-4" />
@@ -954,8 +964,7 @@ const ThemeSelectControl = ({ children, ...props }: ControlProps<{ value: Theme;
 
 const ChooseEmbedTypesDialogContent = () => {
   const { t } = useLocale();
-  const router = useRouter();
-
+  const { goto } = useRouterHelpers();
   return (
     <DialogContent className="rounded-lg p-10" type="creation" size="lg">
       <div className="mb-2">
@@ -973,7 +982,7 @@ const ChooseEmbedTypesDialogContent = () => {
             key={index}
             data-testid={embed.type}
             onClick={() => {
-              goto(router, {
+              goto({
                 embedType: embed.type,
               });
             }}>
@@ -1375,8 +1384,10 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
   embedType: EmbedType;
   embedUrl: string;
 }) => {
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
   const { t } = useLocale();
-  const router = useRouter();
+  const { goto, removeQueryParams } = useRouterHelpers();
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const dialogContentRef = useRef<HTMLDivElement>(null);
   const flags = useFlagMap();
@@ -1395,10 +1406,10 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
   );
 
   const s = (href: string) => {
-    const searchParams = new URLSearchParams(router.asPath.split("?")[1] || "");
+    const _searchParams = new URLSearchParams(searchParams);
     const [a, b] = href.split("=");
-    searchParams.set(a, b);
-    return `${router.asPath.split("?")[0]}?${searchParams.toString()}`;
+    _searchParams.set(a, b);
+    return `${pathname?.split("?")[0]}?${_searchParams.toString()}`;
   };
   const parsedTabs = tabs.map((t) => ({ ...t, href: s(t.href) }));
   const embedCodeRefs: Record<(typeof tabs)[0]["name"], RefObject<HTMLTextAreaElement>> = {};
@@ -1429,12 +1440,12 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
   });
 
   const close = () => {
-    removeQueryParams(router, ["dialog", ...queryParamsForDialog]);
+    removeQueryParams(["dialog", ...queryParamsForDialog]);
   };
 
   // Use embed-code as default tab
-  if (!router.query.embedTabName) {
-    goto(router, {
+  if (!searchParams?.get("embedTabName")) {
+    goto({
       embedTabName: "embed-code",
     });
   }
@@ -1568,7 +1579,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
             <button
               className="h-6 w-6"
               onClick={() => {
-                removeQueryParams(router, ["embedType", "embedTabName"]);
+                removeQueryParams(["embedType", "embedTabName"]);
               }}>
               <ArrowLeft className="mr-4 w-4" />
             </button>
@@ -1865,7 +1876,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                 <div
                   key={tab.href}
                   className={classNames(
-                    router.query.embedTabName === tab.href.split("=")[1]
+                    searchParams?.get("embedTabName") === tab.href.split("=")[1]
                       ? "flex flex-grow flex-col"
                       : "hidden"
                   )}>
@@ -1886,7 +1897,11 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                       />
                     )}
                   </div>
-                  <div className={router.query.embedTabName == "embed-preview" ? "mt-2 block" : "hidden"} />
+                  <div
+                    className={
+                      searchParams?.get("embedTabName") === "embed-preview" ? "mt-2 block" : "hidden"
+                    }
+                  />
                   <DialogFooter className="mt-10 flex-row-reverse gap-x-2" showDivider>
                     <DialogClose />
                     {tab.type === "code" ? (
@@ -1925,7 +1940,9 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                     }
                   />
                 </div>
-                <div className={router.query.embedTabName == "embed-preview" ? "mt-2 block" : "hidden"} />
+                <div
+                  className={searchParams?.get("embedTabName") === "embed-preview" ? "mt-2 block" : "hidden"}
+                />
                 <DialogFooter className="mt-10 flex-row-reverse gap-x-2" showDivider>
                   <DialogClose />
                   <Button
@@ -1945,15 +1962,15 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
 };
 
 export const EmbedDialog = () => {
-  const router = useRouter();
-  const embedUrl: string = router.query.embedUrl as string;
+  const searchParams = useSearchParams();
+  const embedUrl = searchParams?.get("embedUrl") as string;
   return (
     <Dialog name="embed" clearQueryParamsOnClose={queryParamsForDialog}>
-      {!router.query.embedType ? (
+      {!searchParams?.get("embedType") ? (
         <ChooseEmbedTypesDialogContent />
       ) : (
         <EmbedTypeCodeAndPreviewDialogContent
-          embedType={router.query.embedType as EmbedType}
+          embedType={searchParams?.get("embedType") as EmbedType}
           embedUrl={embedUrl}
         />
       )}
@@ -1976,10 +1993,10 @@ export const EmbedButton = <T extends React.ElementType>({
   eventId,
   ...props
 }: EmbedButtonProps<T> & React.ComponentPropsWithoutRef<T>) => {
-  const router = useRouter();
+  const { goto } = useRouterHelpers();
   className = classNames("hidden lg:inline-flex", className);
   const openEmbedModal = () => {
-    goto(router, {
+    goto({
       dialog: "embed",
       eventId: eventId ? eventId.toString() : "",
       embedUrl,
diff --git a/apps/web/components/NavTabs.tsx b/apps/web/components/NavTabs.tsx
deleted file mode 100644
index 2218bef880..0000000000
--- a/apps/web/components/NavTabs.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import { noop } from "lodash";
-import type { LinkProps } from "next/link";
-import Link from "next/link";
-import { useRouter } from "next/router";
-import type { FC, MouseEventHandler } from "react";
-import { Fragment } from "react";
-
-import { PermissionContainer } from "@calcom/features/auth/PermissionContainer";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-
-import classNames from "@lib/classNames";
-import type { SVGComponent } from "@lib/types/SVGComponent";
-
-export interface NavTabProps {
-  tabs: {
-    name: string;
-    /** If you want to change the path as per current tab */
-    href?: string;
-    /** If you want to change query param tabName as per current tab */
-    tabName?: string;
-    icon?: SVGComponent;
-    adminRequired?: boolean;
-    className?: string;
-  }[];
-  linkProps?: Omit<LinkProps, "href">;
-}
-
-const NavTabs: FC<NavTabProps> = ({ tabs, linkProps, ...props }) => {
-  const router = useRouter();
-  const { t } = useLocale();
-  return (
-    <>
-      <nav
-        className="no-scrollbar -mb-px flex space-x-5 overflow-x-scroll rtl:space-x-reverse sm:rtl:space-x-reverse"
-        aria-label="Tabs"
-        {...props}>
-        {tabs.map((tab) => {
-          if ((tab.tabName && tab.href) || (!tab.tabName && !tab.href)) {
-            throw new Error("Use either tabName or href");
-          }
-          let href = "";
-          let isCurrent;
-          if (tab.href) {
-            href = tab.href;
-            isCurrent = router.asPath === tab.href;
-          } else if (tab.tabName) {
-            href = "";
-            isCurrent = router.query.tabName === tab.tabName;
-          }
-
-          const onClick: MouseEventHandler = tab.tabName
-            ? (e) => {
-                e.preventDefault();
-                router.push({
-                  query: {
-                    ...router.query,
-                    tabName: tab.tabName,
-                  },
-                });
-              }
-            : noop;
-
-          const Component = tab.adminRequired ? PermissionContainer : Fragment;
-          const className = tab.className || "";
-          return (
-            <Component key={tab.name}>
-              <Link key={tab.name} href={href} {...linkProps} legacyBehavior>
-                <a
-                  onClick={onClick}
-                  className={classNames(
-                    isCurrent
-                      ? "text-emphasis border-gray-900"
-                      : "hover:border-default hover:text-default text-subtle border-transparent",
-                    "group inline-flex items-center border-b-2 px-1 py-4 text-sm font-medium",
-                    className
-                  )}
-                  aria-current={isCurrent ? "page" : undefined}>
-                  {tab.icon && (
-                    <tab.icon
-                      className={classNames(
-                        isCurrent ? "text-emphasis" : "group-hover:text-subtle text-muted",
-                        "-ml-0.5 hidden h-4 w-4 ltr:mr-2 rtl:ml-2 sm:inline-block"
-                      )}
-                      aria-hidden="true"
-                    />
-                  )}
-                  <span>{t(tab.name)}</span>
-                </a>
-              </Link>
-            </Component>
-          );
-        })}
-      </nav>
-      <hr className="border-subtle" />
-    </>
-  );
-};
-
-export default NavTabs;
diff --git a/apps/web/components/SettingsShell.tsx b/apps/web/components/SettingsShell.tsx
deleted file mode 100644
index fb53eb7e04..0000000000
--- a/apps/web/components/SettingsShell.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import type { ComponentProps } from "react";
-import React from "react";
-
-import Shell from "@calcom/features/shell/Shell";
-import { ErrorBoundary } from "@calcom/ui";
-import { CreditCard, Key, Lock, Terminal, User, Users } from "@calcom/ui/components/icon";
-
-import NavTabs from "./NavTabs";
-
-const tabs = [
-  {
-    name: "profile",
-    href: "/settings/my-account/profile",
-    icon: User,
-  },
-  {
-    name: "teams",
-    href: "/settings/teams",
-    icon: Users,
-  },
-  {
-    name: "security",
-    href: "/settings/security",
-    icon: Key,
-  },
-  {
-    name: "developer",
-    href: "/settings/developer",
-    icon: Terminal,
-  },
-  {
-    name: "billing",
-    href: "/settings/billing",
-    icon: CreditCard,
-  },
-  {
-    name: "admin",
-    href: "/settings/admin",
-    icon: Lock,
-    adminRequired: true,
-  },
-];
-
-export default function SettingsShell({
-  children,
-  ...rest
-}: { children: React.ReactNode } & ComponentProps<typeof Shell>) {
-  return (
-    <Shell {...rest} hideHeadingOnMobile>
-      <div className="sm:mx-auto">
-        <NavTabs tabs={tabs} />
-      </div>
-      <main className="max-w-4xl">
-        <>
-          <ErrorBoundary>{children}</ErrorBoundary>
-        </>
-      </main>
-    </Shell>
-  );
-}
diff --git a/apps/web/components/apps/App.tsx b/apps/web/components/apps/App.tsx
index b756af691b..6ad0c4b60b 100644
--- a/apps/web/components/apps/App.tsx
+++ b/apps/web/components/apps/App.tsx
@@ -1,392 +1,17 @@
-import Link from "next/link";
-import type { IframeHTMLAttributes } from "react";
-import React, { useState } from "react";
-
-import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
-import { InstallAppButton, AppDependencyComponent } from "@calcom/app-store/components";
-import { doesAppSupportTeamInstall } from "@calcom/app-store/utils";
-import DisconnectIntegration from "@calcom/features/apps/components/DisconnectIntegration";
-import { Spinner } from "@calcom/features/calendars/weeklyview/components/spinner/Spinner";
 import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
-import type { UserAdminTeams } from "@calcom/features/ee/teams/lib/getUserAdminTeams";
 import Shell from "@calcom/features/shell/Shell";
-import classNames from "@calcom/lib/classNames";
-import { CAL_URL } from "@calcom/lib/constants";
-import { APP_NAME, COMPANY_NAME, SUPPORT_MAIL_ADDRESS } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import type { RouterOutputs } from "@calcom/trpc/react";
-import { trpc } from "@calcom/trpc/react";
-import type { App as AppType, AppFrontendPayload } from "@calcom/types/App";
-import type { ButtonProps } from "@calcom/ui";
-import { Button, showToast, SkeletonButton, SkeletonText, HeadSeo, Badge } from "@calcom/ui";
-import {
-  Dropdown,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuPortal,
-  DropdownMenuLabel,
-  DropdownItem,
-  Avatar,
-} from "@calcom/ui";
-import { BookOpen, Check, ExternalLink, File, Flag, Mail, Shield } from "@calcom/ui/components/icon";
+import { HeadSeo } from "@calcom/ui";
 
-/* These app slugs all require Google Cal to be installed */
-
-const Component = ({
-  name,
-  type,
-  logo,
-  slug,
-  variant,
-  body,
-  categories,
-  author,
-  price = 0,
-  commission,
-  isGlobal = false,
-  feeType,
-  docs,
-  website,
-  email,
-  tos,
-  privacy,
-  teamsPlanRequired,
-  descriptionItems,
-  isTemplate,
-  dependencies,
-  concurrentMeetings,
-}: Parameters<typeof App>[0]) => {
-  const { t, i18n } = useLocale();
-  const hasDescriptionItems = descriptionItems && descriptionItems.length > 0;
-
-  const mutation = useAddAppMutation(null, {
-    onSuccess: (data) => {
-      if (data?.setupPending) return;
-      showToast(t("app_successfully_installed"), "success");
-    },
-    onError: (error) => {
-      if (error instanceof Error) showToast(error.message || t("app_could_not_be_installed"), "error");
-    },
-  });
-
-  const priceInDollar = Intl.NumberFormat("en-US", {
-    style: "currency",
-    currency: "USD",
-    useGrouping: false,
-  }).format(price);
-
-  const [existingCredentials, setExistingCredentials] = useState<number[]>([]);
-  const [showDisconnectIntegration, setShowDisconnectIntegration] = useState(false);
-  const appDbQuery = trpc.viewer.appCredentialsByType.useQuery(
-    { appType: type },
-    {
-      onSettled(data) {
-        const credentialsCount = data?.credentials.length || 0;
-        setShowDisconnectIntegration(
-          data?.userAdminTeams.length ? credentialsCount >= data?.userAdminTeams.length : credentialsCount > 0
-        );
-        setExistingCredentials(data?.credentials.map((credential) => credential.id) || []);
-      },
-    }
-  );
-
-  const dependencyData = trpc.viewer.appsRouter.queryForDependencies.useQuery(dependencies, {
-    enabled: !!dependencies,
-  });
-
-  const disableInstall =
-    dependencyData.data && dependencyData.data.some((dependency) => !dependency.installed);
-
-  // const disableInstall = requiresGCal && !gCalInstalled.data;
-
-  // variant not other allows, an app to be shown in calendar category without requiring an actual calendar connection e.g. vimcal
-  // Such apps, can only be installed once.
-  const allowedMultipleInstalls = categories.indexOf("calendar") > -1 && variant !== "other";
-
-  return (
-    <div className="relative flex-1 flex-col items-start justify-start px-4 md:flex md:px-8 lg:flex-row lg:px-0">
-      {hasDescriptionItems && (
-        <div className="align-center bg-subtle -ml-4 -mr-4 mb-4 flex min-h-[450px] w-auto basis-3/5 snap-x snap-mandatory flex-row overflow-auto whitespace-nowrap p-4  md:-ml-8 md:-mr-8 md:mb-8 md:p-8 lg:mx-0 lg:mb-0 lg:max-w-2xl lg:flex-col lg:justify-center lg:rounded-md">
-          {descriptionItems ? (
-            descriptionItems.map((descriptionItem, index) =>
-              typeof descriptionItem === "object" ? (
-                <div
-                  key={`iframe-${index}`}
-                  className="mr-4 max-h-full min-h-[315px] min-w-[90%] max-w-full snap-center last:mb-0 lg:mb-4 lg:mr-0 [&_iframe]:h-full [&_iframe]:min-h-[315px] [&_iframe]:w-full">
-                  <iframe allowFullScreen {...descriptionItem.iframe} />
-                </div>
-              ) : (
-                <img
-                  key={descriptionItem}
-                  src={descriptionItem}
-                  alt={`Screenshot of app ${name}`}
-                  className="mr-4 h-auto max-h-80 max-w-[90%] snap-center rounded-md object-contain last:mb-0 md:max-h-min lg:mb-4 lg:mr-0  lg:max-w-full"
-                />
-              )
-            )
-          ) : (
-            <SkeletonText />
-          )}
-        </div>
-      )}
-      <div
-        className={classNames(
-          "sticky top-0 -mt-4 max-w-xl basis-2/5 pb-12 text-sm lg:pb-0",
-          hasDescriptionItems && "lg:ml-8"
-        )}>
-        <div className="mb-8 flex pt-4">
-          <header>
-            <div className="mb-4 flex items-center">
-              <img
-                className={classNames(logo.includes("-dark") && "dark:invert", "min-h-16 min-w-16 h-16 w-16")}
-                src={logo}
-                alt={name}
-              />
-              <h1 className="font-cal text-emphasis ml-4 text-3xl">{name}</h1>
-            </div>
-            <h2 className="text-default text-sm font-medium">
-              <Link
-                href={`categories/${categories[0]}`}
-                className="bg-subtle text-emphasis rounded-md p-1 text-xs capitalize">
-                {categories[0]}
-              </Link>{" "}
-              •{" "}
-              <a target="_blank" rel="noreferrer" href={website}>
-                {t("published_by", { author })}
-              </a>
-            </h2>
-            {isTemplate && (
-              <Badge variant="red" className="mt-4">
-                Template - Available in Dev Environment only for testing
-              </Badge>
-            )}
-          </header>
-        </div>
-        {!appDbQuery.isLoading ? (
-          isGlobal ||
-          (existingCredentials.length > 0 && allowedMultipleInstalls ? (
-            <div className="flex space-x-3">
-              <Button StartIcon={Check} color="secondary" disabled>
-                {existingCredentials.length > 0
-                  ? t("active_install", { count: existingCredentials.length })
-                  : t("default")}
-              </Button>
-              {!isGlobal && (
-                <InstallAppButton
-                  type={type}
-                  disableInstall={disableInstall}
-                  teamsPlanRequired={teamsPlanRequired}
-                  render={({ useDefaultComponent, ...props }) => {
-                    if (useDefaultComponent) {
-                      props = {
-                        ...props,
-                        onClick: () => {
-                          mutation.mutate({ type, variant, slug });
-                        },
-                        loading: mutation.isLoading,
-                      };
-                    }
-                    return (
-                      <InstallAppButtonChild
-                        appCategories={categories}
-                        userAdminTeams={appDbQuery.data?.userAdminTeams}
-                        addAppMutationInput={{ type, variant, slug }}
-                        concurrentMeetings={concurrentMeetings}
-                        multiInstall
-                        {...props}
-                      />
-                    );
-                  }}
-                />
-              )}
-            </div>
-          ) : showDisconnectIntegration ? (
-            <DisconnectIntegration
-              buttonProps={{ color: "secondary" }}
-              label={t("disconnect")}
-              credentialId={existingCredentials[0]}
-              onSuccess={() => {
-                appDbQuery.refetch();
-              }}
-            />
-          ) : (
-            <InstallAppButton
-              type={type}
-              disableInstall={disableInstall}
-              teamsPlanRequired={teamsPlanRequired}
-              render={({ useDefaultComponent, ...props }) => {
-                if (useDefaultComponent) {
-                  props = {
-                    ...props,
-                    onClick: () => {
-                      mutation.mutate({ type, variant, slug });
-                    },
-                    loading: mutation.isLoading,
-                  };
-                }
-                return (
-                  <InstallAppButtonChild
-                    appCategories={categories}
-                    userAdminTeams={appDbQuery.data?.userAdminTeams}
-                    addAppMutationInput={{ type, variant, slug }}
-                    credentials={appDbQuery.data?.credentials}
-                    concurrentMeetings={concurrentMeetings}
-                    {...props}
-                  />
-                );
-              }}
-            />
-          ))
-        ) : (
-          <SkeletonButton className="h-10 w-24" />
-        )}
-
-        {dependencies &&
-          (!dependencyData.isLoading ? (
-            <div className="mt-6">
-              <AppDependencyComponent appName={name} dependencyData={dependencyData.data} />
-            </div>
-          ) : (
-            <SkeletonButton className="mt-6 h-20 grow" />
-          ))}
-
-        {price !== 0 && (
-          <span className="block text-right">
-            {feeType === "usage-based" ? commission + "% + " + priceInDollar + "/booking" : priceInDollar}
-            {feeType === "monthly" && "/" + t("month")}
-          </span>
-        )}
-
-        <div className="prose-sm prose prose-a:text-default prose-headings:text-emphasis prose-code:text-default prose-strong:text-default text-default mt-8">
-          {body}
-        </div>
-        <h4 className="text-emphasis mt-8 font-semibold ">{t("pricing")}</h4>
-        <span className="text-default">
-          {teamsPlanRequired ? (
-            t("teams_plan_required")
-          ) : price === 0 ? (
-            t("free_to_use_apps")
-          ) : (
-            <>
-              {Intl.NumberFormat(i18n.language, {
-                style: "currency",
-                currency: "USD",
-                useGrouping: false,
-              }).format(price)}
-              {feeType === "monthly" && "/" + t("month")}
-            </>
-          )}
-        </span>
-
-        <h4 className="text-emphasis mb-2 mt-8 font-semibold ">{t("contact")}</h4>
-        <ul className="prose-sm -ml-1 -mr-1 leading-5">
-          {docs && (
-            <li>
-              <a
-                target="_blank"
-                rel="noreferrer"
-                className="text-emphasis text-sm font-normal no-underline hover:underline"
-                href={docs}>
-                <BookOpen className="text-subtle -mt-1 mr-1 inline h-4 w-4" />
-                {t("documentation")}
-              </a>
-            </li>
-          )}
-          {website && (
-            <li>
-              <a
-                target="_blank"
-                rel="noreferrer"
-                className="text-emphasis font-normal no-underline hover:underline"
-                href={website}>
-                <ExternalLink className="text-subtle -mt-px mr-1 inline h-4 w-4" />
-                {website.replace("https://", "")}
-              </a>
-            </li>
-          )}
-          {email && (
-            <li>
-              <a
-                target="_blank"
-                rel="noreferrer"
-                className="text-emphasis font-normal no-underline hover:underline"
-                href={"mailto:" + email}>
-                <Mail className="text-subtle -mt-px mr-1 inline h-4 w-4" />
-
-                {email}
-              </a>
-            </li>
-          )}
-          {tos && (
-            <li>
-              <a
-                target="_blank"
-                rel="noreferrer"
-                className="text-emphasis font-normal no-underline hover:underline"
-                href={tos}>
-                <File className="text-subtle -mt-px mr-1 inline h-4 w-4" />
-                {t("terms_of_service")}
-              </a>
-            </li>
-          )}
-          {privacy && (
-            <li>
-              <a
-                target="_blank"
-                rel="noreferrer"
-                className="text-emphasis font-normal no-underline hover:underline"
-                href={privacy}>
-                <Shield className="text-subtle -mt-px mr-1 inline h-4 w-4" />
-                {t("privacy_policy")}
-              </a>
-            </li>
-          )}
-        </ul>
-        <hr className="border-subtle my-8 border" />
-        <span className="leading-1 text-subtle block text-xs">
-          {t("every_app_published", { appName: APP_NAME, companyName: COMPANY_NAME })}
-        </span>
-        <a className="mt-2 block text-xs text-red-500" href={`mailto:${SUPPORT_MAIL_ADDRESS}`}>
-          <Flag className="inline h-3 w-3" /> {t("report_app")}
-        </a>
-      </div>
-    </div>
-  );
-};
+import type { AppPageProps } from "./AppPage";
+import { AppPage } from "./AppPage";
 
 const ShellHeading = () => {
   const { t } = useLocale();
   return <span className="block py-2">{t("app_store")}</span>;
 };
 
-export default function App(props: {
-  name: string;
-  description: AppType["description"];
-  type: AppType["type"];
-  isGlobal?: AppType["isGlobal"];
-  logo: string;
-  slug: string;
-  variant: string;
-  body: React.ReactNode;
-  categories: string[];
-  author: string;
-  pro?: boolean;
-  price?: number;
-  commission?: number;
-  feeType?: AppType["feeType"];
-  docs?: string;
-  website?: string;
-  email: string; // required
-  tos?: string;
-  privacy?: string;
-  licenseRequired: AppType["licenseRequired"];
-  teamsPlanRequired: AppType["teamsPlanRequired"];
-  descriptionItems?: Array<string | { iframe: IframeHTMLAttributes<HTMLIFrameElement> }>;
-  isTemplate?: boolean;
-  disableInstall?: boolean;
-  dependencies?: string[];
-  concurrentMeetings?: boolean;
-}) {
+export default function WrappedApp(props: AppPageProps) {
   return (
     <Shell smallHeading isPublic hideHeadingOnMobile heading={<ShellHeading />} backPath="/apps" withoutSeo>
       <HeadSeo
@@ -396,115 +21,11 @@ export default function App(props: {
       />
       {props.licenseRequired ? (
         <LicenseRequired>
-          <Component {...props} />
+          <AppPage {...props} />
         </LicenseRequired>
       ) : (
-        <Component {...props} />
+        <AppPage {...props} />
       )}
     </Shell>
   );
 }
-
-const InstallAppButtonChild = ({
-  userAdminTeams,
-  addAppMutationInput,
-  appCategories,
-  multiInstall,
-  credentials,
-  concurrentMeetings,
-  ...props
-}: {
-  userAdminTeams?: UserAdminTeams;
-  addAppMutationInput: { type: AppFrontendPayload["type"]; variant: string; slug: string };
-  appCategories: string[];
-  multiInstall?: boolean;
-  credentials?: RouterOutputs["viewer"]["appCredentialsByType"]["credentials"];
-  concurrentMeetings?: boolean;
-} & ButtonProps) => {
-  const { t } = useLocale();
-
-  const mutation = useAddAppMutation(null, {
-    onSuccess: (data) => {
-      if (data?.setupPending) return;
-      showToast(t("app_successfully_installed"), "success");
-    },
-    onError: (error) => {
-      if (error instanceof Error) showToast(error.message || t("app_could_not_be_installed"), "error");
-    },
-  });
-
-  if (!userAdminTeams?.length || !doesAppSupportTeamInstall(appCategories, concurrentMeetings)) {
-    return (
-      <Button
-        data-testid="install-app-button"
-        {...props}
-        // @TODO: Overriding color and size prevent us from
-        // having to duplicate InstallAppButton for now.
-        color="primary"
-        size="base">
-        {multiInstall ? t("install_another") : t("install_app")}
-      </Button>
-    );
-  }
-
-  return (
-    <Dropdown>
-      <DropdownMenuTrigger asChild>
-        <Button
-          data-testid="install-app-button"
-          {...props}
-          // @TODO: Overriding color and size prevent us from
-          // having to duplicate InstallAppButton for now.
-          color="primary"
-          size="base">
-          {multiInstall ? t("install_another") : t("install_app")}
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuPortal>
-        <DropdownMenuContent
-          onInteractOutside={(event) => {
-            if (mutation.isLoading) event.preventDefault();
-          }}>
-          {mutation.isLoading && (
-            <div className="z-1 fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
-              <Spinner />
-            </div>
-          )}
-          <DropdownMenuLabel>{t("install_app_on")}</DropdownMenuLabel>
-          {userAdminTeams.map((team) => {
-            const isInstalled =
-              credentials &&
-              credentials.some((credential) =>
-                credential?.teamId ? credential?.teamId === team.id : credential.userId === team.id
-              );
-
-            return (
-              <DropdownItem
-                type="button"
-                data-testid={team.isUser ? "install-app-button-personal" : "anything else"}
-                key={team.id}
-                disabled={isInstalled}
-                StartIcon={(props) => (
-                  <Avatar
-                    alt={team.logo || ""}
-                    imageSrc={team.logo || `${CAL_URL}/${team.logo}/avatar.png`} // if no image, use default avatar
-                    size="sm"
-                    {...props}
-                  />
-                )}
-                onClick={() => {
-                  mutation.mutate(
-                    team.isUser ? addAppMutationInput : { ...addAppMutationInput, teamId: team.id }
-                  );
-                }}>
-                <p>
-                  {team.name} {isInstalled && `(${t("installed")})`}
-                </p>
-              </DropdownItem>
-            );
-          })}
-        </DropdownMenuContent>
-      </DropdownMenuPortal>
-    </Dropdown>
-  );
-};
diff --git a/apps/web/components/apps/AppPage.tsx b/apps/web/components/apps/AppPage.tsx
new file mode 100644
index 0000000000..992c29fef6
--- /dev/null
+++ b/apps/web/components/apps/AppPage.tsx
@@ -0,0 +1,367 @@
+import Link from "next/link";
+import type { IframeHTMLAttributes } from "react";
+import React, { useState } from "react";
+
+import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
+import { AppDependencyComponent, InstallAppButton } from "@calcom/app-store/components";
+import DisconnectIntegration from "@calcom/features/apps/components/DisconnectIntegration";
+import classNames from "@calcom/lib/classNames";
+import { APP_NAME, COMPANY_NAME, SUPPORT_MAIL_ADDRESS } from "@calcom/lib/constants";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc/react";
+import type { App as AppType } from "@calcom/types/App";
+import { Badge, Button, showToast, SkeletonButton, SkeletonText } from "@calcom/ui";
+import { BookOpen, Check, ExternalLink, File, Flag, Mail, Shield } from "@calcom/ui/components/icon";
+
+import { InstallAppButtonChild } from "./InstallAppButtonChild";
+
+export type AppPageProps = {
+  name: string;
+  description: AppType["description"];
+  type: AppType["type"];
+  isGlobal?: AppType["isGlobal"];
+  logo: string;
+  slug: string;
+  variant: string;
+  body: React.ReactNode;
+  categories: string[];
+  author: string;
+  pro?: boolean;
+  price?: number;
+  commission?: number;
+  feeType?: AppType["feeType"];
+  docs?: string;
+  website?: string;
+  email: string; // required
+  tos?: string;
+  privacy?: string;
+  licenseRequired: AppType["licenseRequired"];
+  teamsPlanRequired: AppType["teamsPlanRequired"];
+  descriptionItems?: Array<string | { iframe: IframeHTMLAttributes<HTMLIFrameElement> }>;
+  isTemplate?: boolean;
+  disableInstall?: boolean;
+  dependencies?: string[];
+  concurrentMeetings: AppType["concurrentMeetings"];
+};
+
+export const AppPage = ({
+  name,
+  type,
+  logo,
+  slug,
+  variant,
+  body,
+  categories,
+  author,
+  price = 0,
+  commission,
+  isGlobal = false,
+  feeType,
+  docs,
+  website,
+  email,
+  tos,
+  privacy,
+  teamsPlanRequired,
+  descriptionItems,
+  isTemplate,
+  dependencies,
+  concurrentMeetings,
+}: AppPageProps) => {
+  const { t, i18n } = useLocale();
+  const hasDescriptionItems = descriptionItems && descriptionItems.length > 0;
+
+  const mutation = useAddAppMutation(null, {
+    onSuccess: (data) => {
+      if (data?.setupPending) return;
+      showToast(t("app_successfully_installed"), "success");
+    },
+    onError: (error) => {
+      if (error instanceof Error) showToast(error.message || t("app_could_not_be_installed"), "error");
+    },
+  });
+
+  const priceInDollar = Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    useGrouping: false,
+  }).format(price);
+
+  const [existingCredentials, setExistingCredentials] = useState<number[]>([]);
+  const [showDisconnectIntegration, setShowDisconnectIntegration] = useState(false);
+  const appDbQuery = trpc.viewer.appCredentialsByType.useQuery(
+    { appType: type },
+    {
+      onSettled(data) {
+        const credentialsCount = data?.credentials.length || 0;
+        setShowDisconnectIntegration(
+          data?.userAdminTeams.length ? credentialsCount >= data?.userAdminTeams.length : credentialsCount > 0
+        );
+        setExistingCredentials(data?.credentials.map((credential) => credential.id) || []);
+      },
+    }
+  );
+
+  const dependencyData = trpc.viewer.appsRouter.queryForDependencies.useQuery(dependencies, {
+    enabled: !!dependencies,
+  });
+
+  const disableInstall =
+    dependencyData.data && dependencyData.data.some((dependency) => !dependency.installed);
+
+  // const disableInstall = requiresGCal && !gCalInstalled.data;
+
+  // variant not other allows, an app to be shown in calendar category without requiring an actual calendar connection e.g. vimcal
+  // Such apps, can only be installed once.
+  const allowedMultipleInstalls = categories.indexOf("calendar") > -1 && variant !== "other";
+
+  return (
+    <div className="relative flex-1 flex-col items-start justify-start px-4 md:flex md:px-8 lg:flex-row lg:px-0">
+      {hasDescriptionItems && (
+        <div className="align-center bg-subtle -ml-4 -mr-4 mb-4 flex min-h-[450px] w-auto basis-3/5 snap-x snap-mandatory flex-row overflow-auto whitespace-nowrap p-4  md:-ml-8 md:-mr-8 md:mb-8 md:p-8 lg:mx-0 lg:mb-0 lg:max-w-2xl lg:flex-col lg:justify-center lg:rounded-md">
+          {descriptionItems ? (
+            descriptionItems.map((descriptionItem, index) =>
+              typeof descriptionItem === "object" ? (
+                <div
+                  key={`iframe-${index}`}
+                  className="mr-4 max-h-full min-h-[315px] min-w-[90%] max-w-full snap-center last:mb-0 lg:mb-4 lg:mr-0 [&_iframe]:h-full [&_iframe]:min-h-[315px] [&_iframe]:w-full">
+                  <iframe allowFullScreen {...descriptionItem.iframe} />
+                </div>
+              ) : (
+                <img
+                  key={descriptionItem}
+                  src={descriptionItem}
+                  alt={`Screenshot of app ${name}`}
+                  className="mr-4 h-auto max-h-80 max-w-[90%] snap-center rounded-md object-contain last:mb-0 md:max-h-min lg:mb-4 lg:mr-0  lg:max-w-full"
+                />
+              )
+            )
+          ) : (
+            <SkeletonText />
+          )}
+        </div>
+      )}
+      <div
+        className={classNames(
+          "sticky top-0 -mt-4 max-w-xl basis-2/5 pb-12 text-sm lg:pb-0",
+          hasDescriptionItems && "lg:ml-8"
+        )}>
+        <div className="mb-8 flex pt-4">
+          <header>
+            <div className="mb-4 flex items-center">
+              <img
+                className={classNames(logo.includes("-dark") && "dark:invert", "min-h-16 min-w-16 h-16 w-16")}
+                src={logo}
+                alt={name}
+              />
+              <h1 className="font-cal text-emphasis ml-4 text-3xl">{name}</h1>
+            </div>
+            <h2 className="text-default text-sm font-medium">
+              <Link
+                href={`categories/${categories[0]}`}
+                className="bg-subtle text-emphasis rounded-md p-1 text-xs capitalize">
+                {categories[0]}
+              </Link>{" "}
+              •{" "}
+              <a target="_blank" rel="noreferrer" href={website}>
+                {t("published_by", { author })}
+              </a>
+            </h2>
+            {isTemplate && (
+              <Badge variant="red" className="mt-4">
+                Template - Available in Dev Environment only for testing
+              </Badge>
+            )}
+          </header>
+        </div>
+        {!appDbQuery.isLoading ? (
+          isGlobal ||
+          (existingCredentials.length > 0 && allowedMultipleInstalls ? (
+            <div className="flex space-x-3">
+              <Button StartIcon={Check} color="secondary" disabled>
+                {existingCredentials.length > 0
+                  ? t("active_install", { count: existingCredentials.length })
+                  : t("default")}
+              </Button>
+              {!isGlobal && (
+                <InstallAppButton
+                  type={type}
+                  disableInstall={disableInstall}
+                  teamsPlanRequired={teamsPlanRequired}
+                  render={({ useDefaultComponent, ...props }) => {
+                    if (useDefaultComponent) {
+                      props = {
+                        ...props,
+                        onClick: () => {
+                          mutation.mutate({ type, variant, slug });
+                        },
+                        loading: mutation.isLoading,
+                      };
+                    }
+                    return (
+                      <InstallAppButtonChild
+                        appCategories={categories}
+                        userAdminTeams={appDbQuery.data?.userAdminTeams}
+                        addAppMutationInput={{ type, variant, slug }}
+                        multiInstall
+                        concurrentMeetings={concurrentMeetings}
+                        {...props}
+                      />
+                    );
+                  }}
+                />
+              )}
+            </div>
+          ) : showDisconnectIntegration ? (
+            <DisconnectIntegration
+              buttonProps={{ color: "secondary" }}
+              label={t("disconnect")}
+              credentialId={existingCredentials[0]}
+              onSuccess={() => {
+                appDbQuery.refetch();
+              }}
+            />
+          ) : (
+            <InstallAppButton
+              type={type}
+              disableInstall={disableInstall}
+              teamsPlanRequired={teamsPlanRequired}
+              render={({ useDefaultComponent, ...props }) => {
+                if (useDefaultComponent) {
+                  props = {
+                    ...props,
+                    onClick: () => {
+                      mutation.mutate({ type, variant, slug });
+                    },
+                    loading: mutation.isLoading,
+                  };
+                }
+                return (
+                  <InstallAppButtonChild
+                    appCategories={categories}
+                    userAdminTeams={appDbQuery.data?.userAdminTeams}
+                    addAppMutationInput={{ type, variant, slug }}
+                    credentials={appDbQuery.data?.credentials}
+                    concurrentMeetings={concurrentMeetings}
+                    {...props}
+                  />
+                );
+              }}
+            />
+          ))
+        ) : (
+          <SkeletonButton className="h-10 w-24" />
+        )}
+
+        {dependencies &&
+          (!dependencyData.isLoading ? (
+            <div className="mt-6">
+              <AppDependencyComponent appName={name} dependencyData={dependencyData.data} />
+            </div>
+          ) : (
+            <SkeletonButton className="mt-6 h-20 grow" />
+          ))}
+
+        {price !== 0 && (
+          <span className="block text-right">
+            {feeType === "usage-based" ? commission + "% + " + priceInDollar + "/booking" : priceInDollar}
+            {feeType === "monthly" && "/" + t("month")}
+          </span>
+        )}
+
+        <div className="prose-sm prose prose-a:text-default prose-headings:text-emphasis prose-code:text-default prose-strong:text-default text-default mt-8">
+          {body}
+        </div>
+        <h4 className="text-emphasis mt-8 font-semibold ">{t("pricing")}</h4>
+        <span className="text-default">
+          {teamsPlanRequired ? (
+            t("teams_plan_required")
+          ) : price === 0 ? (
+            t("free_to_use_apps")
+          ) : (
+            <>
+              {Intl.NumberFormat(i18n.language, {
+                style: "currency",
+                currency: "USD",
+                useGrouping: false,
+              }).format(price)}
+              {feeType === "monthly" && "/" + t("month")}
+            </>
+          )}
+        </span>
+
+        <h4 className="text-emphasis mb-2 mt-8 font-semibold ">{t("contact")}</h4>
+        <ul className="prose-sm -ml-1 -mr-1 leading-5">
+          {docs && (
+            <li>
+              <a
+                target="_blank"
+                rel="noreferrer"
+                className="text-emphasis text-sm font-normal no-underline hover:underline"
+                href={docs}>
+                <BookOpen className="text-subtle -mt-1 mr-1 inline h-4 w-4" />
+                {t("documentation")}
+              </a>
+            </li>
+          )}
+          {website && (
+            <li>
+              <a
+                target="_blank"
+                rel="noreferrer"
+                className="text-emphasis font-normal no-underline hover:underline"
+                href={website}>
+                <ExternalLink className="text-subtle -mt-px mr-1 inline h-4 w-4" />
+                {website.replace("https://", "")}
+              </a>
+            </li>
+          )}
+          {email && (
+            <li>
+              <a
+                target="_blank"
+                rel="noreferrer"
+                className="text-emphasis font-normal no-underline hover:underline"
+                href={"mailto:" + email}>
+                <Mail className="text-subtle -mt-px mr-1 inline h-4 w-4" />
+
+                {email}
+              </a>
+            </li>
+          )}
+          {tos && (
+            <li>
+              <a
+                target="_blank"
+                rel="noreferrer"
+                className="text-emphasis font-normal no-underline hover:underline"
+                href={tos}>
+                <File className="text-subtle -mt-px mr-1 inline h-4 w-4" />
+                {t("terms_of_service")}
+              </a>
+            </li>
+          )}
+          {privacy && (
+            <li>
+              <a
+                target="_blank"
+                rel="noreferrer"
+                className="text-emphasis font-normal no-underline hover:underline"
+                href={privacy}>
+                <Shield className="text-subtle -mt-px mr-1 inline h-4 w-4" />
+                {t("privacy_policy")}
+              </a>
+            </li>
+          )}
+        </ul>
+        <hr className="border-subtle my-8 border" />
+        <span className="leading-1 text-subtle block text-xs">
+          {t("every_app_published", { appName: APP_NAME, companyName: COMPANY_NAME })}
+        </span>
+        <a className="mt-2 block text-xs text-red-500" href={`mailto:${SUPPORT_MAIL_ADDRESS}`}>
+          <Flag className="inline h-3 w-3" /> {t("report_app")}
+        </a>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/web/components/apps/InstallAppButtonChild.tsx b/apps/web/components/apps/InstallAppButtonChild.tsx
new file mode 100644
index 0000000000..1a0f4464a0
--- /dev/null
+++ b/apps/web/components/apps/InstallAppButtonChild.tsx
@@ -0,0 +1,124 @@
+import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
+import { doesAppSupportTeamInstall } from "@calcom/app-store/utils";
+import { Spinner } from "@calcom/features/calendars/weeklyview/components/spinner/Spinner";
+import type { UserAdminTeams } from "@calcom/features/ee/teams/lib/getUserAdminTeams";
+import { CAL_URL } from "@calcom/lib/constants";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import type { RouterOutputs } from "@calcom/trpc/react";
+import type { AppFrontendPayload } from "@calcom/types/App";
+import type { ButtonProps } from "@calcom/ui";
+import {
+  Avatar,
+  Button,
+  Dropdown,
+  DropdownItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  showToast,
+} from "@calcom/ui";
+
+export const InstallAppButtonChild = ({
+  userAdminTeams,
+  addAppMutationInput,
+  appCategories,
+  multiInstall,
+  credentials,
+  concurrentMeetings,
+  ...props
+}: {
+  userAdminTeams?: UserAdminTeams;
+  addAppMutationInput: { type: AppFrontendPayload["type"]; variant: string; slug: string };
+  appCategories: string[];
+  multiInstall?: boolean;
+  credentials?: RouterOutputs["viewer"]["appCredentialsByType"]["credentials"];
+  concurrentMeetings?: boolean;
+} & ButtonProps) => {
+  const { t } = useLocale();
+
+  const mutation = useAddAppMutation(null, {
+    onSuccess: (data) => {
+      if (data?.setupPending) return;
+      showToast(t("app_successfully_installed"), "success");
+    },
+    onError: (error) => {
+      if (error instanceof Error) showToast(error.message || t("app_could_not_be_installed"), "error");
+    },
+  });
+
+  if (!userAdminTeams?.length || !doesAppSupportTeamInstall(appCategories, concurrentMeetings)) {
+    return (
+      <Button
+        data-testid="install-app-button"
+        {...props}
+        // @TODO: Overriding color and size prevent us from
+        // having to duplicate InstallAppButton for now.
+        color="primary"
+        size="base">
+        {multiInstall ? t("install_another") : t("install_app")}
+      </Button>
+    );
+  }
+
+  return (
+    <Dropdown>
+      <DropdownMenuTrigger asChild>
+        <Button
+          data-testid="install-app-button"
+          {...props}
+          // @TODO: Overriding color and size prevent us from
+          // having to duplicate InstallAppButton for now.
+          color="primary"
+          size="base">
+          {multiInstall ? t("install_another") : t("install_app")}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuPortal>
+        <DropdownMenuContent
+          onInteractOutside={(event) => {
+            if (mutation.isLoading) event.preventDefault();
+          }}>
+          {mutation.isLoading && (
+            <div className="z-1 fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
+              <Spinner />
+            </div>
+          )}
+          <DropdownMenuLabel>{t("install_app_on")}</DropdownMenuLabel>
+          {userAdminTeams.map((team) => {
+            const isInstalled =
+              credentials &&
+              credentials.some((credential) =>
+                credential?.teamId ? credential?.teamId === team.id : credential.userId === team.id
+              );
+
+            return (
+              <DropdownItem
+                type="button"
+                data-testid={team.isUser ? "install-app-button-personal" : "anything else"}
+                key={team.id}
+                disabled={isInstalled}
+                StartIcon={(props) => (
+                  <Avatar
+                    alt={team.logo || ""}
+                    imageSrc={team.logo || `${CAL_URL}/${team.logo}/avatar.png`} // if no image, use default avatar
+                    size="sm"
+                    {...props}
+                  />
+                )}
+                onClick={() => {
+                  mutation.mutate(
+                    team.isUser ? addAppMutationInput : { ...addAppMutationInput, teamId: team.id }
+                  );
+                }}>
+                <p>
+                  {team.name} {isInstalled && `(${t("installed")})`}
+                </p>
+              </DropdownItem>
+            );
+          })}
+        </DropdownMenuContent>
+      </DropdownMenuPortal>
+    </Dropdown>
+  );
+};
diff --git a/apps/web/components/apps/layouts/AppsLayout.tsx b/apps/web/components/apps/layouts/AppsLayout.tsx
index 03dd7244c1..56d64dd7b9 100644
--- a/apps/web/components/apps/layouts/AppsLayout.tsx
+++ b/apps/web/components/apps/layouts/AppsLayout.tsx
@@ -1,5 +1,5 @@
 import { useSession } from "next-auth/react";
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import type { ComponentProps } from "react";
 import React from "react";
 
diff --git a/apps/web/components/auth/layouts/AdminLayout.tsx b/apps/web/components/auth/layouts/AdminLayout.tsx
index 8cd9ef5658..7289c08f0c 100644
--- a/apps/web/components/auth/layouts/AdminLayout.tsx
+++ b/apps/web/components/auth/layouts/AdminLayout.tsx
@@ -1,5 +1,5 @@
 import { useSession } from "next-auth/react";
-import { useRouter } from "next/router";
+import { usePathname, useRouter } from "next/navigation";
 import type { ComponentProps } from "react";
 import React, { useEffect } from "react";
 
@@ -10,9 +10,9 @@ import { ErrorBoundary } from "@calcom/ui";
 
 export default function AdminLayout({
   children,
-
   ...rest
 }: { children: React.ReactNode } & ComponentProps<typeof Shell>) {
+  const pathname = usePathname();
   const session = useSession();
   const router = useRouter();
 
@@ -23,7 +23,7 @@ export default function AdminLayout({
     }
   }, [session, router]);
 
-  const isAppsPage = router.asPath.startsWith("/settings/admin/apps");
+  const isAppsPage = pathname?.startsWith("/settings/admin/apps");
   return (
     <SettingsLayout {...rest}>
       <div className="divide-subtle mx-auto flex max-w-4xl flex-row divide-y">
diff --git a/apps/web/components/booking/AvailableTimes.tsx b/apps/web/components/booking/AvailableTimes.tsx
deleted file mode 100644
index a861c9a3df..0000000000
--- a/apps/web/components/booking/AvailableTimes.tsx
+++ /dev/null
@@ -1,228 +0,0 @@
-import { useAutoAnimate } from "@formkit/auto-animate/react";
-import Link from "next/link";
-import { useRouter } from "next/router";
-import type { FC } from "react";
-import { useEffect, useState, useCallback } from "react";
-
-import type { Dayjs } from "@calcom/dayjs";
-import dayjs from "@calcom/dayjs";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import useMediaQuery from "@calcom/lib/hooks/useMediaQuery";
-import { TimeFormat } from "@calcom/lib/timeFormat";
-import { nameOfDay } from "@calcom/lib/weekday";
-import { trpc } from "@calcom/trpc/react";
-import type { Slot } from "@calcom/trpc/server/routers/viewer/slots/types";
-import { SkeletonContainer, SkeletonText, ToggleGroup } from "@calcom/ui";
-
-import classNames from "@lib/classNames";
-import { timeZone } from "@lib/clock";
-
-type AvailableTimesProps = {
-  timeFormat: TimeFormat;
-  onTimeFormatChange: (is24Hour: boolean) => void;
-  eventTypeId: number;
-  recurringCount: number | undefined;
-  eventTypeSlug: string;
-  date?: Dayjs;
-  seatsPerTimeSlot?: number | null;
-  bookingAttendees?: number | null;
-  slots?: Slot[];
-  isLoading: boolean;
-  duration: number;
-};
-
-const AvailableTimes: FC<AvailableTimesProps> = ({
-  slots = [],
-  isLoading,
-  date,
-  eventTypeId,
-  eventTypeSlug,
-  recurringCount,
-  timeFormat,
-  onTimeFormatChange,
-  seatsPerTimeSlot,
-  bookingAttendees,
-  duration,
-}) => {
-  const reserveSlotMutation = trpc.viewer.public.slots.reserveSlot.useMutation();
-  const [slotPickerRef] = useAutoAnimate<HTMLDivElement>();
-  const { t, i18n } = useLocale();
-  const router = useRouter();
-  const { rescheduleUid } = router.query;
-
-  const [brand, setBrand] = useState("#292929");
-
-  useEffect(() => {
-    setBrand(getComputedStyle(document.documentElement).getPropertyValue("--brand-color").trim());
-  }, []);
-  const isMobile = useMediaQuery("(max-width: 768px)");
-  const ref = useCallback(
-    (node: HTMLDivElement) => {
-      if (isMobile) {
-        node?.scrollIntoView({ behavior: "smooth" });
-      }
-    },
-    [isMobile]
-  );
-
-  const reserveSlot = (slot: Slot) => {
-    // Prevent double clicking
-    if (reserveSlotMutation.isLoading || reserveSlotMutation.isSuccess) {
-      return;
-    }
-    reserveSlotMutation.mutate({
-      slotUtcStartDate: slot.time,
-      eventTypeId,
-      slotUtcEndDate: dayjs(slot.time).utc().add(duration, "minutes").format(),
-      bookingUid: slot.bookingUid,
-    });
-  };
-
-  return (
-    <div ref={slotPickerRef}>
-      {!!date ? (
-        <div className="mt-8 flex h-full w-full flex-col rounded-md px-4 text-center sm:mt-0 sm:p-4 md:-mb-5 md:min-w-[200px] md:p-4 lg:min-w-[300px]">
-          <div className="mb-4 flex items-center text-left text-base">
-            <div className="mr-4">
-              <span className="text-emphasis font-semibold">
-                {nameOfDay(i18n.language, Number(date.format("d")), "short")}
-              </span>
-              <span className="text-subtle">
-                , {date.toDate().toLocaleString(i18n.language, { month: "short" })} {date.format(" D ")}
-              </span>
-            </div>
-            <div className="ml-auto">
-              <ToggleGroup
-                onValueChange={(timeFormat) => onTimeFormatChange(timeFormat === "24")}
-                defaultValue={timeFormat === TimeFormat.TWELVE_HOUR ? "12" : "24"}
-                options={[
-                  { value: "12", label: t("12_hour_short") },
-                  { value: "24", label: t("24_hour_short") },
-                ]}
-              />
-            </div>
-          </div>
-          <div
-            ref={ref}
-            className="scroll-bar scrollbar-track-w-20 relative -mb-4 flex-grow overflow-y-auto sm:block md:h-[364px]">
-            {slots.length > 0 &&
-              slots.map((slot) => {
-                type BookingURL = {
-                  pathname: string;
-                  query: Record<string, string | number | string[] | undefined | TimeFormat>;
-                };
-                const bookingUrl: BookingURL = {
-                  pathname: router.pathname.endsWith("/embed") ? "../book" : "book",
-                  query: {
-                    ...router.query,
-                    date: dayjs.utc(slot.time).tz(timeZone()).format(),
-                    type: eventTypeId,
-                    slug: eventTypeSlug,
-                    timeFormat,
-                    /** Treat as recurring only when a count exist and it's not a rescheduling workflow */
-                    count: recurringCount && !rescheduleUid ? recurringCount : undefined,
-                  },
-                };
-
-                if (rescheduleUid) {
-                  bookingUrl.query.rescheduleUid = rescheduleUid as string;
-                }
-
-                // If event already has an attendee add booking id
-                if (slot.bookingUid) {
-                  bookingUrl.query.bookingUid = slot.bookingUid;
-                }
-
-                let slotFull, notEnoughSeats;
-
-                if (slot.attendees && seatsPerTimeSlot) slotFull = slot.attendees >= seatsPerTimeSlot;
-                if (slot.attendees && bookingAttendees && seatsPerTimeSlot) {
-                  notEnoughSeats = slot.attendees + bookingAttendees > seatsPerTimeSlot;
-                }
-
-                const isHalfFull =
-                  slot.attendees && seatsPerTimeSlot && slot.attendees / seatsPerTimeSlot >= 0.5;
-                const isNearlyFull =
-                  slot.attendees && seatsPerTimeSlot && slot.attendees / seatsPerTimeSlot >= 0.83;
-
-                const colorClass = isNearlyFull
-                  ? "text-rose-600"
-                  : isHalfFull
-                  ? "text-yellow-500"
-                  : "text-emerald-400";
-
-                return (
-                  <div data-slot-owner={(slot.userIds || []).join(",")} key={`${dayjs(slot.time).format()}`}>
-                    {/* ^ data-slot-owner is helpful in debugging and used to identify the owners of the slot. Owners are the users which have the timeslot in their schedule. It doesn't consider if a user has that timeslot booked */}
-                    {/* Current there is no way to disable Next.js Links */}
-                    {seatsPerTimeSlot && slot.attendees && (slotFull || notEnoughSeats) ? (
-                      <div
-                        className={classNames(
-                          "text-default bg-default border-subtle mb-2 block rounded-sm border py-2 font-medium opacity-25",
-                          brand === "#fff" || brand === "#ffffff" ? "" : ""
-                        )}
-                        data-testid="time"
-                        data-disabled="true">
-                        {dayjs(slot.time).tz(timeZone()).format(timeFormat)}
-                        {notEnoughSeats ? (
-                          <p className="text-sm">{t("not_enough_seats")}</p>
-                        ) : slots ? (
-                          <p className="text-sm">{t("booking_full")}</p>
-                        ) : null}
-                      </div>
-                    ) : (
-                      <Link
-                        href={bookingUrl}
-                        prefetch={false}
-                        className={classNames(
-                          " bg-default dark:bg-muted border-default hover:bg-subtle hover:border-brand-default text-emphasis mb-2 block rounded-md border py-2 text-sm font-medium",
-                          brand === "#fff" || brand === "#ffffff" ? "" : ""
-                        )}
-                        onClick={() => reserveSlot(slot)}
-                        data-testid="time"
-                        data-disabled="false">
-                        {dayjs(slot.time).tz(timeZone()).format(timeFormat)}
-                        {!!seatsPerTimeSlot && (
-                          <p className={`${colorClass} text-sm`}>
-                            {slot.attendees ? seatsPerTimeSlot - slot.attendees : seatsPerTimeSlot} /{" "}
-                            {seatsPerTimeSlot}{" "}
-                            {t("seats_available", {
-                              count: slot.attendees ? seatsPerTimeSlot - slot.attendees : seatsPerTimeSlot,
-                            })}
-                          </p>
-                        )}
-                      </Link>
-                    )}
-                  </div>
-                );
-              })}
-
-            {!isLoading && !slots.length && (
-              <div className="-mt-4 flex h-full w-full flex-col content-center items-center justify-center">
-                <h1 className="text-emphasis my-6 text-xl">{t("all_booked_today")}</h1>
-              </div>
-            )}
-
-            {isLoading && !slots.length && (
-              <>
-                <SkeletonContainer className="mb-2">
-                  <SkeletonText className="h-5 w-full" />
-                </SkeletonContainer>
-                <SkeletonContainer className="mb-2">
-                  <SkeletonText className="h-5 w-full" />
-                </SkeletonContainer>
-                <SkeletonContainer className="mb-2">
-                  <SkeletonText className="h-5 w-full" />
-                </SkeletonContainer>
-              </>
-            )}
-          </div>
-        </div>
-      ) : null}
-    </div>
-  );
-};
-
-AvailableTimes.displayName = "AvailableTimes";
-
-export default AvailableTimes;
diff --git a/apps/web/components/booking/BookingDescriptionPayment.tsx b/apps/web/components/booking/BookingDescriptionPayment.tsx
deleted file mode 100644
index b4e7f171ab..0000000000
--- a/apps/web/components/booking/BookingDescriptionPayment.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { i18n } from "next-i18next";
-import type { TFunction } from "next-i18next";
-
-import getPaymentAppData from "@calcom/lib/getPaymentAppData";
-import { CreditCard } from "@calcom/ui/components/icon";
-
-const BookingDescriptionPayment = (props: {
-  eventType: Parameters<typeof getPaymentAppData>[0];
-  t: TFunction;
-  i18n: typeof i18n;
-}) => {
-  const paymentAppData = getPaymentAppData(props.eventType);
-  if (!paymentAppData || paymentAppData.price <= 0) return null;
-
-  const params = {
-    amount: paymentAppData.price / 100.0,
-    formatParams: { amount: { currency: paymentAppData.currency } },
-  };
-
-  return (
-    <p className="text-bookinglight -ml-2 px-2 text-sm ">
-      <CreditCard className="-mt-1 ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
-      {paymentAppData.paymentOption === "HOLD" ? (
-        <>{props.t("no_show_fee_amount", params)}</>
-      ) : (
-        <>
-          {/* If undefined this will default to the browser locale */}
-          {new Intl.NumberFormat(i18n?.language, {
-            style: "currency",
-            currency: paymentAppData.currency,
-          }).format(paymentAppData.price / 100)}
-        </>
-      )}
-    </p>
-  );
-};
-
-export default BookingDescriptionPayment;
diff --git a/apps/web/components/booking/BookingListItem.tsx b/apps/web/components/booking/BookingListItem.tsx
index b48e87c1b7..4fd4681c22 100644
--- a/apps/web/components/booking/BookingListItem.tsx
+++ b/apps/web/components/booking/BookingListItem.tsx
@@ -1,4 +1,4 @@
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import { useState } from "react";
 
 import type { EventLocationType } from "@calcom/app-store/locations";
@@ -158,7 +158,7 @@ function BookingListItem(booking: BookingItemProps) {
       id: "cancel",
       label: isTabRecurring && isRecurring ? t("cancel_all_remaining") : t("cancel"),
       /* When cancelling we need to let the UI and the API know if the intention is to
-         cancel all remaining bookings or just that booking instance. */
+               cancel all remaining bookings or just that booking instance. */
       href: `/booking/${booking.uid}?cancel=true${
         isTabRecurring && isRecurring ? "&allRemainingBookings=true" : ""
       }${booking.seatsReferences.length ? `&seatReferenceUid=${getSeatReferenceUid()}` : ""}
@@ -239,7 +239,12 @@ function BookingListItem(booking: BookingItemProps) {
     },
   });
 
-  const saveLocation = (newLocationType: EventLocationType["type"], details: { [key: string]: string }) => {
+  const saveLocation = (
+    newLocationType: EventLocationType["type"],
+    details: {
+      [key: string]: string;
+    }
+  ) => {
     let newLocation = newLocationType as string;
     const eventLocationType = getEventLocationType(newLocationType);
     if (eventLocationType?.organizerInputType) {
@@ -255,13 +260,11 @@ function BookingListItem(booking: BookingItemProps) {
     .sort((date1: Date, date2: Date) => date1.getTime() - date2.getTime());
 
   const onClickTableData = () => {
-    router.push({
-      pathname: `/booking/${booking.uid}`,
-      query: {
-        allRemainingBookings: isTabRecurring,
-        email: booking.attendees[0] ? booking.attendees[0].email : undefined,
-      },
+    const urlSearchParams = new URLSearchParams({
+      allRemainingBookings: isTabRecurring.toString(),
     });
+    if (booking.attendees[0]) urlSearchParams.set("email", booking.attendees[0].email);
+    router.push(`/booking/${booking.uid}?${urlSearchParams.toString()}`);
   };
 
   const title = booking.title;
diff --git a/apps/web/components/booking/CancelBooking.tsx b/apps/web/components/booking/CancelBooking.tsx
index 89819a2d4f..76297831fa 100644
--- a/apps/web/components/booking/CancelBooking.tsx
+++ b/apps/web/components/booking/CancelBooking.tsx
@@ -1,4 +1,4 @@
-import { useRouter } from "next/router";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useCallback, useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -26,6 +26,9 @@ type Props = {
 };
 
 export default function CancelBooking(props: Props) {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const asPath = `${pathname}?${searchParams.toString()}`;
   const [cancellationReason, setCancellationReason] = useState<string>("");
   const { t } = useLocale();
   const router = useRouter();
@@ -97,7 +100,7 @@ export default function CancelBooking(props: Props) {
                   });
 
                   if (res.status >= 200 && res.status < 300) {
-                    await router.replace(router.asPath);
+                    router.replace(asPath);
                   } else {
                     setLoading(false);
                     setError(
diff --git a/apps/web/components/booking/SlotPicker.tsx b/apps/web/components/booking/SlotPicker.tsx
deleted file mode 100644
index 31a0451da1..0000000000
--- a/apps/web/components/booking/SlotPicker.tsx
+++ /dev/null
@@ -1,198 +0,0 @@
-import type { EventType } from "@prisma/client";
-import dynamic from "next/dynamic";
-import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
-import type { z } from "zod";
-
-import type { Dayjs } from "@calcom/dayjs";
-import dayjs from "@calcom/dayjs";
-import DatePicker from "@calcom/features/calendars/DatePicker";
-import classNames from "@calcom/lib/classNames";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import type { TimeFormat } from "@calcom/lib/timeFormat";
-import type { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
-import { trpc } from "@calcom/trpc/react";
-
-import useRouterQuery from "@lib/hooks/useRouterQuery";
-
-const AvailableTimes = dynamic(() => import("@components/booking/AvailableTimes"));
-
-const getRefetchInterval = (refetchCount: number): number => {
-  const intervals = [3000, 3000, 5000, 10000, 20000, 30000] as const;
-  return intervals[refetchCount] || intervals[intervals.length - 1];
-};
-
-const useSlots = ({
-  eventTypeId,
-  eventTypeSlug,
-  startTime,
-  endTime,
-  usernameList,
-  timeZone,
-  duration,
-  enabled = true,
-}: {
-  eventTypeId: number;
-  eventTypeSlug: string;
-  startTime?: Dayjs;
-  endTime?: Dayjs;
-  usernameList: string[];
-  timeZone?: string;
-  duration?: string;
-  enabled?: boolean;
-}) => {
-  const [refetchCount, setRefetchCount] = useState(0);
-  const refetchInterval = getRefetchInterval(refetchCount);
-  const { data, isLoading, isPaused, fetchStatus } = trpc.viewer.public.slots.getSchedule.useQuery(
-    {
-      eventTypeId,
-      eventTypeSlug,
-      usernameList,
-      startTime: startTime?.toISOString() || "",
-      endTime: endTime?.toISOString() || "",
-      timeZone,
-      duration,
-    },
-    {
-      enabled: !!startTime && !!endTime && enabled,
-      refetchInterval,
-      trpc: { context: { skipBatch: true } },
-    }
-  );
-  useEffect(() => {
-    if (!!data && fetchStatus === "idle") {
-      setRefetchCount(refetchCount + 1);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fetchStatus, data]);
-
-  // The very first time isPaused is set if auto-fetch is disabled, so isPaused should also be considered a loading state.
-  return { slots: data?.slots || {}, isLoading: isLoading || isPaused };
-};
-
-export const SlotPicker = ({
-  eventType,
-  timeFormat,
-  onTimeFormatChange,
-  timeZone,
-  recurringEventCount,
-  users,
-  seatsPerTimeSlot,
-  bookingAttendees,
-  weekStart = 0,
-}: {
-  eventType: Pick<
-    EventType & { metadata: z.infer<typeof EventTypeMetaDataSchema> },
-    "id" | "schedulingType" | "slug" | "length" | "metadata"
-  >;
-  timeFormat: TimeFormat;
-  onTimeFormatChange: (is24Hour: boolean) => void;
-  timeZone?: string;
-  seatsPerTimeSlot?: number;
-  bookingAttendees?: number;
-  recurringEventCount?: number;
-  users: string[];
-  weekStart?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-}) => {
-  const [selectedDate, setSelectedDate] = useState<Dayjs>();
-  const [browsingDate, setBrowsingDate] = useState<Dayjs>();
-  let { duration = eventType.length.toString() } = useRouterQuery("duration");
-  const { date, setQuery: setDate } = useRouterQuery("date");
-  const { month, setQuery: setMonth } = useRouterQuery("month");
-  const router = useRouter();
-
-  if (!eventType.metadata?.multipleDuration) {
-    duration = eventType.length.toString();
-  }
-
-  useEffect(() => {
-    if (!router.isReady) return;
-
-    // Etc/GMT is not actually a timeZone, so handle this select option explicitly to prevent a hard crash.
-    if (timeZone === "Etc/GMT") {
-      setBrowsingDate(dayjs.utc(month).set("date", 1).set("hour", 0).set("minute", 0).set("second", 0));
-      if (date) {
-        setSelectedDate(dayjs.utc(date));
-      }
-    } else {
-      // Set the start of the month without shifting time like startOf() may do.
-      setBrowsingDate(
-        dayjs.tz(month, timeZone).set("date", 1).set("hour", 0).set("minute", 0).set("second", 0)
-      );
-      if (date) {
-        // It's important to set the date immediately to the timeZone, dayjs(date) will convert to browsertime.
-        setSelectedDate(dayjs.tz(date, timeZone));
-      }
-    }
-  }, [router.isReady, month, date, duration, timeZone]);
-
-  const { i18n, isLocaleReady } = useLocale();
-  const { slots: monthSlots, isLoading } = useSlots({
-    eventTypeId: eventType.id,
-    eventTypeSlug: eventType.slug,
-    usernameList: users,
-    startTime: dayjs().startOf("day"),
-    endTime: browsingDate?.endOf("month"),
-    timeZone,
-    duration,
-  });
-  const { slots: selectedDateSlots, isLoading: _isLoadingSelectedDateSlots } = useSlots({
-    eventTypeId: eventType.id,
-    eventTypeSlug: eventType.slug,
-    usernameList: users,
-    startTime: selectedDate?.startOf("day"),
-    endTime: selectedDate?.endOf("day"),
-    timeZone,
-    duration,
-    /** Prevent refetching is we already have this data from month slots */
-    enabled: !!selectedDate,
-  });
-
-  /** Hide skeleton if we have the slot loaded in the month query */
-  const isLoadingSelectedDateSlots = (() => {
-    if (!selectedDate) return _isLoadingSelectedDateSlots;
-    if (!!selectedDateSlots[selectedDate.format("YYYY-MM-DD")]) return false;
-    if (!!monthSlots[selectedDate.format("YYYY-MM-DD")]) return false;
-    return false;
-  })();
-
-  return (
-    <>
-      <DatePicker
-        isLoading={isLoading}
-        className={classNames(
-          "mt-8 px-4 pb-4 sm:mt-0 md:min-w-[300px] md:px-4 lg:min-w-[455px]",
-          selectedDate ? " border-subtle sm:border-r sm:p-4 sm:pr-6" : "sm:p-4"
-        )}
-        includedDates={Object.keys(monthSlots).filter((k) => monthSlots[k].length > 0)}
-        locale={isLocaleReady ? i18n.language : "en"}
-        selected={selectedDate}
-        onChange={(newDate) => {
-          setDate(newDate.format("YYYY-MM-DD"));
-        }}
-        onMonthChange={(newMonth) => {
-          setMonth(newMonth.format("YYYY-MM"));
-        }}
-        browsingDate={browsingDate}
-        weekStart={weekStart}
-      />
-      <AvailableTimes
-        isLoading={isLoadingSelectedDateSlots}
-        slots={
-          selectedDate &&
-          (selectedDateSlots[selectedDate.format("YYYY-MM-DD")] ||
-            monthSlots[selectedDate.format("YYYY-MM-DD")])
-        }
-        date={selectedDate}
-        timeFormat={timeFormat}
-        onTimeFormatChange={onTimeFormatChange}
-        eventTypeId={eventType.id}
-        eventTypeSlug={eventType.slug}
-        seatsPerTimeSlot={seatsPerTimeSlot}
-        bookingAttendees={bookingAttendees}
-        recurringCount={recurringEventCount}
-        duration={parseInt(duration)}
-      />
-    </>
-  );
-};
diff --git a/apps/web/components/booking/TimeOptions.tsx b/apps/web/components/booking/TimeOptions.tsx
deleted file mode 100644
index e50cab498b..0000000000
--- a/apps/web/components/booking/TimeOptions.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import type { FC } from "react";
-import { useEffect, useState } from "react";
-
-import type { ITimezoneOption } from "@calcom/ui";
-import { TimezoneSelect } from "@calcom/ui";
-
-import { timeZone } from "../../lib/clock";
-
-type Props = {
-  onSelectTimeZone: (selectedTimeZone: string) => void;
-};
-
-const TimeOptions: FC<Props> = ({ onSelectTimeZone }) => {
-  const [selectedTimeZone, setSelectedTimeZone] = useState("");
-
-  useEffect(() => {
-    setSelectedTimeZone(timeZone());
-  }, []);
-
-  useEffect(() => {
-    if (selectedTimeZone && timeZone() && selectedTimeZone !== timeZone()) {
-      onSelectTimeZone(timeZone(selectedTimeZone));
-    }
-  }, [selectedTimeZone, onSelectTimeZone]);
-
-  return !!selectedTimeZone ? (
-    <TimezoneSelect
-      id="timeZone"
-      classNames={{
-        singleValue: () => "text-default",
-        dropdownIndicator: () => "text-default",
-        menu: () => "!w-64 max-w-[90vw] shadow-dropdown bg-default border-subtle border rounded-md mt-1",
-      }}
-      variant="minimal"
-      value={selectedTimeZone}
-      onChange={(tz: ITimezoneOption) => setSelectedTimeZone(tz.value)}
-    />
-  ) : null;
-};
-
-export default TimeOptions;
diff --git a/apps/web/components/booking/TimezoneDropdown.tsx b/apps/web/components/booking/TimezoneDropdown.tsx
deleted file mode 100644
index 239ca6c673..0000000000
--- a/apps/web/components/booking/TimezoneDropdown.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Globe } from "@calcom/ui/components/icon";
-
-import { timeZone as localStorageTimeZone } from "@lib/clock";
-
-import TimeOptions from "@components/booking/TimeOptions";
-
-export function TimezoneDropdown({
-  onChangeTimeZone,
-}: {
-  onChangeTimeZone: (newTimeZone: string) => void;
-  timeZone?: string;
-}) {
-  const handleSelectTimeZone = (newTimeZone: string) => {
-    onChangeTimeZone(newTimeZone);
-    localStorageTimeZone(newTimeZone);
-  };
-
-  return (
-    <>
-      <div className="dark:focus-within:bg-darkgray-200  dark:hover:bg-darkgray-200 !mt-3 flex w-full max-w-[20rem] items-center rounded-[4px] px-1 text-sm font-medium focus-within:bg-gray-200 hover:bg-gray-100 lg:max-w-[12rem] [&_p]:focus-within:text-gray-900 dark:[&_p]:focus-within:text-white [&_svg]:focus-within:text-gray-900 dark:[&_svg]:focus-within:text-white">
-        <Globe className="dark:text-darkgray-600 flex h-4 w-4 text-gray-600 ltr:mr-2 rtl:ml-2" />
-        <TimeOptions onSelectTimeZone={handleSelectTimeZone} />
-      </div>
-    </>
-  );
-}
diff --git a/apps/web/components/booking/UserAvatars.tsx b/apps/web/components/booking/UserAvatars.tsx
deleted file mode 100644
index da87a2aba4..0000000000
--- a/apps/web/components/booking/UserAvatars.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { CAL_URL } from "@calcom/lib/constants";
-import type { AvatarGroupProps } from "@calcom/ui";
-import { AvatarGroup } from "@calcom/ui";
-
-export const UserAvatars = ({
-  profile,
-  users,
-  ...props
-}: {
-  profile: { image: string | null; name?: string | null; username?: string | null };
-  showMembers: boolean;
-  users: { username: string | null; name?: string | null }[];
-} & Pick<AvatarGroupProps, "size" | "truncateAfter">) => {
-  const showMembers = !users.find((user) => user.name === profile.name) && props.showMembers;
-  return (
-    <AvatarGroup
-      items={
-        [
-          {
-            image: profile.image,
-            alt: profile.name,
-            title: profile.name,
-            href: profile.username ? `${CAL_URL}/${profile.username}` : undefined,
-          },
-          ...(showMembers
-            ? users.map((user) => ({
-                title: user.name,
-                image: `${CAL_URL}/${user.username}/avatar.png`,
-                alt: user.name || undefined,
-                href: user.username ? `${CAL_URL}/${user.username}` : undefined,
-              }))
-            : []),
-        ].filter((item) => !!item.image) as {
-          image: string;
-          alt?: string;
-          title?: string;
-          href?: string;
-        }[]
-      }
-      size="sm"
-      truncateAfter={props.truncateAfter}
-    />
-  );
-};
diff --git a/apps/web/components/eventtype/EventAdvancedTab.tsx b/apps/web/components/eventtype/EventAdvancedTab.tsx
index 9d5d63fe18..c42564ccd6 100644
--- a/apps/web/components/eventtype/EventAdvancedTab.tsx
+++ b/apps/web/components/eventtype/EventAdvancedTab.tsx
@@ -25,6 +25,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { Prisma } from "@calcom/prisma/client";
 import { trpc } from "@calcom/trpc/react";
 import {
+  Alert,
   Button,
   CheckboxField,
   Label,
@@ -32,9 +33,8 @@ import {
   showToast,
   TextField,
   Tooltip,
-  Alert,
 } from "@calcom/ui";
-import { Edit, Copy } from "@calcom/ui/components/icon";
+import { Copy, Edit } from "@calcom/ui/components/icon";
 
 import RequiresConfirmationController from "./RequiresConfirmationController";
 
diff --git a/apps/web/components/eventtype/EventTypeSingleLayout.tsx b/apps/web/components/eventtype/EventTypeSingleLayout.tsx
index cd0e682412..1bbd8bf0b4 100644
--- a/apps/web/components/eventtype/EventTypeSingleLayout.tsx
+++ b/apps/web/components/eventtype/EventTypeSingleLayout.tsx
@@ -1,7 +1,7 @@
 import { Webhook as TbWebhook } from "lucide-react";
 import type { TFunction } from "next-i18next";
 import { Trans } from "next-i18next";
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import type { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
 import { useMemo, useState, Suspense } from "react";
 import type { UseFormReturn } from "react-hook-form";
@@ -148,7 +148,7 @@ function EventTypeSingleLayout({
     onSuccess: async () => {
       await utils.viewer.eventTypes.invalidate();
       showToast(t("event_type_deleted_successfully"), "success");
-      await router.push("/event-types");
+      router.push("/event-types");
       setDeleteDialogOpen(false);
     },
     onError: (err) => {
diff --git a/apps/web/components/getting-started/steps-views/SetupAvailability.tsx b/apps/web/components/getting-started/steps-views/SetupAvailability.tsx
index 6ad80e030f..257386f93e 100644
--- a/apps/web/components/getting-started/steps-views/SetupAvailability.tsx
+++ b/apps/web/components/getting-started/steps-views/SetupAvailability.tsx
@@ -1,4 +1,3 @@
-import { useRouter } from "next/router";
 import { useForm } from "react-hook-form";
 
 import { Schedule } from "@calcom/features/schedules";
@@ -21,12 +20,10 @@ const SetupAvailability = (props: ISetupAvailabilityProps) => {
   const { t } = useLocale();
   const { nextStep } = props;
 
-  const router = useRouter();
-
   const queryAvailability = trpc.viewer.availability.schedule.get.useQuery(
     { scheduleId: defaultScheduleId! },
     {
-      enabled: router.isReady && !!defaultScheduleId,
+      enabled: !!defaultScheduleId,
     }
   );
 
diff --git a/apps/web/components/getting-started/steps-views/UserProfile.tsx b/apps/web/components/getting-started/steps-views/UserProfile.tsx
index 2a769137fa..d1b1fa1d65 100644
--- a/apps/web/components/getting-started/steps-views/UserProfile.tsx
+++ b/apps/web/components/getting-started/steps-views/UserProfile.tsx
@@ -1,4 +1,4 @@
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import type { FormEvent } from "react";
 import { useRef, useState } from "react";
 import { useForm } from "react-hook-form";
diff --git a/apps/web/components/setup/StepDone.tsx b/apps/web/components/setup/StepDone.tsx
index 2bd6a82b97..da0e67d42d 100644
--- a/apps/web/components/setup/StepDone.tsx
+++ b/apps/web/components/setup/StepDone.tsx
@@ -1,4 +1,4 @@
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import type { Dispatch, SetStateAction } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
diff --git a/apps/web/components/team/screens/Team.tsx b/apps/web/components/team/screens/Team.tsx
index cfe2748a15..6975383871 100644
--- a/apps/web/components/team/screens/Team.tsx
+++ b/apps/web/components/team/screens/Team.tsx
@@ -1,25 +1,24 @@
 import Link from "next/link";
-import { useRouter } from "next/router";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
 import { md } from "@calcom/lib/markdownIt";
 import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
 import type { TeamWithMembers } from "@calcom/lib/server/queries/teams";
 import { Avatar } from "@calcom/ui";
 
-type TeamType = NonNullable<TeamWithMembers>;
+type TeamType = Omit<NonNullable<TeamWithMembers>, "inviteToken">;
 type MembersType = TeamType["members"];
 type MemberType = MembersType[number] & { safeBio: string | null };
-
 type TeamTypeWithSafeHtml = Omit<TeamType, "members" | "inviteToken"> & { members: MemberType[] };
 
 const Member = ({ member, teamName }: { member: MemberType; teamName: string | null }) => {
+  const routerQuery = useRouterQuery();
   const { t } = useLocale();
-  const router = useRouter();
   const isBioEmpty = !member.bio || !member.bio.replace("<p><br></p>", "").length;
 
   // We don't want to forward orgSlug and user which are route params to the next route
-  const { slug: _slug, orgSlug: _orgSlug, user: _user, ...queryParamsToForward } = router.query;
+  const { slug: _slug, orgSlug: _orgSlug, user: _user, ...queryParamsToForward } = routerQuery;
 
   return (
     <Link key={member.id} href={{ pathname: `/${member.username}`, query: queryParamsToForward }}>
diff --git a/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx b/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
index 672054fe6a..3901f1d8f6 100644
--- a/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
+++ b/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
@@ -1,7 +1,7 @@
 import classNames from "classnames";
 import { debounce, noop } from "lodash";
 import { useSession } from "next-auth/react";
-import { useRouter } from "next/router";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import type { RefCallback } from "react";
 import { useEffect, useMemo, useState } from "react";
 
@@ -46,6 +46,9 @@ const obtainNewUsernameChangeCondition = ({
 };
 
 const PremiumTextfield = (props: ICustomUsernameProps) => {
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+  const router = useRouter();
   const { t } = useLocale();
   const { data: session, update } = useSession();
   const {
@@ -61,8 +64,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
   const [user] = trpc.viewer.me.useSuspenseQuery();
   const [usernameIsAvailable, setUsernameIsAvailable] = useState(false);
   const [markAsError, setMarkAsError] = useState(false);
-  const router = useRouter();
-  const { paymentStatus: recentAttemptPaymentStatus } = router.query;
+  const recentAttemptPaymentStatus = searchParams?.get("recentAttemptPaymentStatus");
   const [openDialogSaveUsername, setOpenDialogSaveUsername] = useState(false);
   const { data: stripeCustomer } = trpc.viewer.stripeCustomer.useQuery();
   const isCurrentUsernamePremium =
@@ -120,7 +122,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
 
   const paymentLink = `/api/integrations/stripepayment/subscription?intentUsername=${
     inputUsernameValue || usernameFromStripe
-  }&action=${usernameChangeCondition}&callbackUrl=${WEBAPP_URL}${router.asPath}`;
+  }&action=${usernameChangeCondition}&callbackUrl=${WEBAPP_URL}${pathname}`;
 
   const ActionButtons = () => {
     if (paymentRequired) {
@@ -223,7 +225,11 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
             onChange={(event) => {
               event.preventDefault();
               // Reset payment status
-              delete router.query.paymentStatus;
+              const _searchParams = new URLSearchParams(searchParams);
+              _searchParams.delete("paymentStatus");
+              if (searchParams.toString() !== _searchParams.toString()) {
+                router.replace(`${pathname}?${_searchParams.toString()}`);
+              }
               setInputUsernameValue(event.target.value);
             }}
             data-testid="username-input"
diff --git a/apps/web/components/ui/UsernameAvailability/index.tsx b/apps/web/components/ui/UsernameAvailability/index.tsx
index 19483d6f21..caee14bdef 100644
--- a/apps/web/components/ui/UsernameAvailability/index.tsx
+++ b/apps/web/components/ui/UsernameAvailability/index.tsx
@@ -1,4 +1,4 @@
-import { useRouter } from "next/router";
+import { useSearchParams } from "next/navigation";
 import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 
@@ -35,12 +35,12 @@ export const UsernameAvailabilityField = ({
   onSuccessMutation,
   onErrorMutation,
 }: UsernameAvailabilityFieldProps) => {
-  const router = useRouter();
+  const searchParams = useSearchParams();
   const [user] = trpc.viewer.me.useSuspenseQuery();
   const [currentUsernameState, setCurrentUsernameState] = useState(user.username || "");
   const { username: usernameFromQuery, setQuery: setUsernameFromQuery } = useRouterQuery("username");
   const { username: currentUsername, setQuery: setCurrentUsername } =
-    router.query["username"] && user.username === null
+    searchParams?.get("username") && user.username === null
       ? { username: usernameFromQuery, setQuery: setUsernameFromQuery }
       : { username: currentUsernameState || "", setQuery: setCurrentUsernameState };
   const formMethods = useForm({
diff --git a/apps/web/lib/app-providers.tsx b/apps/web/lib/app-providers.tsx
index d9d5683ff9..fe7075f975 100644
--- a/apps/web/lib/app-providers.tsx
+++ b/apps/web/lib/app-providers.tsx
@@ -6,8 +6,7 @@ import type { SSRConfig } from "next-i18next";
 import { appWithTranslation } from "next-i18next";
 import { ThemeProvider } from "next-themes";
 import type { AppProps as NextAppProps, AppProps as NextJsAppProps } from "next/app";
-import type { NextRouter } from "next/router";
-import { useRouter } from "next/router";
+import type { ParsedUrlQuery } from "querystring";
 import type { ComponentProps, PropsWithChildren, ReactNode } from "react";
 
 import { OrgBrandingProvider } from "@calcom/features/ee/organizations/context/provider";
@@ -23,20 +22,26 @@ import type { WithNonceProps } from "@lib/withNonce";
 
 import { useViewerI18n } from "@components/I18nLanguageHandler";
 
-const I18nextAdapter = appWithTranslation<NextJsAppProps<SSRConfig> & { children: React.ReactNode }>(
-  ({ children }) => <>{children}</>
-);
+const I18nextAdapter = appWithTranslation<
+  NextJsAppProps<SSRConfig> & {
+    children: React.ReactNode;
+  }
+>(({ children }) => <>{children}</>);
 
 // Workaround for https://github.com/vercel/next.js/issues/8592
 export type AppProps = Omit<
-  NextAppProps<WithNonceProps & { themeBasis?: string } & Record<string, unknown>>,
+  NextAppProps<
+    WithNonceProps & {
+      themeBasis?: string;
+    } & Record<string, unknown>
+  >,
   "Component"
 > & {
   Component: NextAppProps["Component"] & {
     requiresLicense?: boolean;
     isThemeSupported?: boolean;
-    isBookingPage?: boolean | ((arg: { router: NextRouter }) => boolean);
-    getLayout?: (page: React.ReactElement, router: NextRouter) => ReactNode;
+    isBookingPage?: boolean | ((arg: { router: NextAppProps["router"] }) => boolean);
+    getLayout?: (page: React.ReactElement, router: NextAppProps["router"]) => ReactNode;
     PageWrapper?: (props: AppProps) => JSX.Element;
   };
 
@@ -48,7 +53,7 @@ type AppPropsWithChildren = AppProps & {
   children: ReactNode;
 };
 
-const getEmbedNamespace = (query: ReturnType<typeof useRouter>["query"]) => {
+const getEmbedNamespace = (query: ParsedUrlQuery) => {
   // Mostly embed query param should be available on server. Use that there.
   // Use the most reliable detection on client
   return typeof window !== "undefined" ? window.getEmbedNamespace() : (query.embed as string) || null;
@@ -89,20 +94,19 @@ const enum ThemeSupport {
 }
 
 type CalcomThemeProps = PropsWithChildren<
-  Pick<AppProps["pageProps"], "nonce" | "themeBasis"> &
+  Pick<AppProps, "router"> &
+    Pick<AppProps["pageProps"], "nonce" | "themeBasis"> &
     Pick<AppProps["Component"], "isBookingPage" | "isThemeSupported">
 >;
 const CalcomThemeProvider = (props: CalcomThemeProps) => {
-  const router = useRouter();
-
   // Use namespace of embed to ensure same namespaced embed are displayed with same theme. This allows different embeds on the same website to be themed differently
   // One such example is our Embeds Demo and Testing page at http://localhost:3100
   // Having `getEmbedNamespace` defined on window before react initializes the app, ensures that embedNamespace is available on the first mount and can be used as part of storageKey
-  const embedNamespace = getEmbedNamespace(router.query);
+  const embedNamespace = getEmbedNamespace(props.router.query);
   const isEmbedMode = typeof embedNamespace === "string";
 
   return (
-    <ThemeProvider {...getThemeProviderProps({ props, isEmbedMode, embedNamespace, router })}>
+    <ThemeProvider {...getThemeProviderProps({ props, isEmbedMode, embedNamespace })}>
       {/* Embed Mode can be detected reliably only on client side here as there can be static generated pages as well which can't determine if it's embed mode at backend */}
       {/* color-scheme makes background:transparent not work in iframe which is required by embed. */}
       {typeof window !== "undefined" && !isEmbedMode && (
@@ -148,16 +152,14 @@ function getThemeProviderProps({
   props,
   isEmbedMode,
   embedNamespace,
-  router,
 }: {
   props: Omit<CalcomThemeProps, "children">;
   isEmbedMode: boolean;
   embedNamespace: string | null;
-  router: NextRouter;
 }) {
   const isBookingPage = (() => {
     if (typeof props.isBookingPage === "function") {
-      return props.isBookingPage({ router: router });
+      return props.isBookingPage({ router: props.router });
     }
     return props.isBookingPage;
   })();
@@ -263,7 +265,8 @@ const AppProviders = (props: AppPropsWithChildren) => {
               themeBasis={props.pageProps.themeBasis}
               nonce={props.pageProps.nonce}
               isThemeSupported={props.Component.isThemeSupported}
-              isBookingPage={props.Component.isBookingPage}>
+              isBookingPage={props.Component.isBookingPage}
+              router={props.router}>
               <FeatureFlagsProvider>
                 <OrgBrandProvider>
                   <MetaProvider>{props.children}</MetaProvider>
diff --git a/apps/web/lib/hooks/usePublicPage.ts b/apps/web/lib/hooks/usePublicPage.ts
index d10ae13a25..b8b0d6e7ee 100644
--- a/apps/web/lib/hooks/usePublicPage.ts
+++ b/apps/web/lib/hooks/usePublicPage.ts
@@ -1,9 +1,9 @@
-import { useRouter } from "next/router";
+import { usePathname } from "next/navigation";
 
 export default function usePublicPage() {
-  const router = useRouter();
+  const pathname = usePathname();
   const isPublicPage = ["/[user]", "/booking", "/cancel", "/reschedule"].find((route) =>
-    router.pathname.startsWith(route)
+    pathname?.startsWith(route)
   );
   return isPublicPage;
 }
diff --git a/apps/web/lib/hooks/useRouterQuery.ts b/apps/web/lib/hooks/useRouterQuery.ts
index 72d1072fcc..56b321c1fa 100644
--- a/apps/web/lib/hooks/useRouterQuery.ts
+++ b/apps/web/lib/hooks/useRouterQuery.ts
@@ -1,36 +1,17 @@
-import { useRouter } from "next/router";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 
 export default function useRouterQuery<T extends string>(name: T) {
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
   const router = useRouter();
-  const existingQueryParams = router.asPath.split("?")[1];
-
-  const urlParams = new URLSearchParams(existingQueryParams);
-  const query: Record<string, string | string[]> = {};
-  // Following error is thrown by Typescript:
-  // 'Type 'URLSearchParams' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher'
-  // We should change the target to higher ES2019 atleast maybe
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-expect-error
-  for (const [key, value] of urlParams) {
-    if (!query[key]) {
-      query[key] = value;
-    } else {
-      let queryValue = query[key];
-      if (queryValue instanceof Array) {
-        queryValue.push(value);
-      } else {
-        queryValue = query[key] = [queryValue];
-        queryValue.push(value);
-      }
-    }
-  }
 
   const setQuery = (newValue: string | number | null | undefined) => {
-    router.replace({ query: { ...router.query, [name]: newValue } }, undefined, { shallow: true });
-    router.replace({ query: { ...router.query, ...query, [name]: newValue } }, undefined, { shallow: true });
+    const _searchParams = new URLSearchParams(searchParams);
+    _searchParams.set(name, newValue as string);
+    router.replace(`${pathname}?${_searchParams.toString()}`);
   };
 
-  return { [name]: query[name], setQuery } as {
+  return { [name]: searchParams.get(name), setQuery } as {
     [K in T]: string | undefined;
   } & { setQuery: typeof setQuery };
 }
diff --git a/apps/web/lib/hooks/useToggleQuery.tsx b/apps/web/lib/hooks/useToggleQuery.tsx
index 065e11366d..29e3f4fabf 100644
--- a/apps/web/lib/hooks/useToggleQuery.tsx
+++ b/apps/web/lib/hooks/useToggleQuery.tsx
@@ -1,31 +1,9 @@
-import { useRouter } from "next/router";
-import { useMemo } from "react";
+import { useSearchParams } from "next/navigation";
 
 export function useToggleQuery(name: string) {
-  const router = useRouter();
-
-  const hrefOff = useMemo(() => {
-    const query = {
-      ...router.query,
-    };
-    delete query[name];
-    return {
-      query,
-    };
-  }, [router.query, name]);
-  const hrefOn = useMemo(() => {
-    const query = {
-      ...router.query,
-      [name]: "1",
-    };
-    return {
-      query,
-    };
-  }, [router.query, name]);
+  const searchParams = useSearchParams();
 
   return {
-    hrefOn,
-    hrefOff,
-    isOn: router.query[name] === "1",
+    isOn: searchParams?.get(name) === "1",
   };
 }
diff --git a/apps/web/package.json b/apps/web/package.json
index a5ffc36f5c..91e78ffb0c 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -58,7 +58,6 @@
     "@radix-ui/react-tooltip": "^1.0.0",
     "@stripe/react-stripe-js": "^1.10.0",
     "@stripe/stripe-js": "^1.35.0",
-    "@tanem/react-nprogress": "^5.0.44",
     "@tanstack/react-query": "^4.3.9",
     "@tremor/react": "^2.0.0",
     "@types/turndown": "^5.0.1",
diff --git a/apps/web/pages/404.tsx b/apps/web/pages/404.tsx
index ec14c8be1b..61a6f4a804 100644
--- a/apps/web/pages/404.tsx
+++ b/apps/web/pages/404.tsx
@@ -1,10 +1,10 @@
 import type { GetStaticPropsContext } from "next";
 import Link from "next/link";
-import { useRouter } from "next/router";
-import React, { useEffect, useState } from "react";
+import { usePathname } from "next/navigation";
+import { useEffect, useState } from "react";
 
 import { orgDomainConfig, subdomainSuffix } from "@calcom/features/ee/organizations/lib/orgDomains";
-import { DOCS_URL, JOIN_DISCORD, WEBSITE_URL, IS_CALCOM } from "@calcom/lib/constants";
+import { DOCS_URL, IS_CALCOM, JOIN_DISCORD, WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HeadSeo } from "@calcom/ui";
 import { BookOpen, Check, ChevronRight, FileText, Shield } from "@calcom/ui/components/icon";
@@ -22,9 +22,8 @@ enum pageType {
 }
 
 export default function Custom404() {
+  const pathname = usePathname();
   const { t } = useLocale();
-
-  const router = useRouter();
   const [username, setUsername] = useState<string>("");
   const [currentPageType, setCurrentPageType] = useState<pageType>(pageType.USER);
 
@@ -52,7 +51,7 @@ export default function Custom404() {
   const [url, setUrl] = useState(`${WEBSITE_URL}/signup`);
   useEffect(() => {
     const { isValidOrgDomain, currentOrgDomain } = orgDomainConfig(window.location.host);
-    const [routerUsername] = router.asPath.replace("%20", "-").split(/[?#]/);
+    const [routerUsername] = pathname?.replace("%20", "-").split(/[?#]/);
     if (!isValidOrgDomain || !currentOrgDomain) {
       const splitPath = routerUsername.split("/");
       if (splitPath[1] === "team" && splitPath.length === 3) {
@@ -78,14 +77,14 @@ export default function Custom404() {
     }
   }, []);
 
-  const isSuccessPage = router.asPath.startsWith("/booking");
-  const isSubpage = router.asPath.includes("/", 2) || isSuccessPage;
-  const isSignup = router.asPath.startsWith("/signup");
+  const isSuccessPage = pathname?.startsWith("/booking");
+  const isSubpage = pathname?.includes("/", 2) || isSuccessPage;
+  const isSignup = pathname?.startsWith("/signup");
   /**
    * If we're on 404 and the route is insights it means it is disabled
    * TODO: Abstract this for all disabled features
    **/
-  const isInsights = router.asPath.startsWith("/insights");
+  const isInsights = pathname?.startsWith("/insights");
   if (isInsights) {
     return (
       <>
diff --git a/apps/web/pages/500.tsx b/apps/web/pages/500.tsx
index cd1af130e9..eb73583245 100644
--- a/apps/web/pages/500.tsx
+++ b/apps/web/pages/500.tsx
@@ -1,5 +1,5 @@
 import Head from "next/head";
-import { useRouter } from "next/router";
+import { useSearchParams } from "next/navigation";
 
 import { APP_NAME, WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -9,8 +9,8 @@ import { Copy } from "@calcom/ui/components/icon";
 import PageWrapper from "@components/PageWrapper";
 
 export default function Error500() {
+  const searchParams = useSearchParams();
   const { t } = useLocale();
-  const router = useRouter();
 
   return (
     <div className="bg-subtle flex h-screen">
@@ -25,20 +25,20 @@ export default function Error500() {
           Something went wrong on our end. Get in touch with our support team, and we’ll get it fixed right
           away for you.
         </p>
-        {router.query.error && (
+        {searchParams?.get("error") && (
           <div className="mb-8 flex flex-col">
             <p className="text-default mb-4 max-w-2xl text-sm">
               Please provide the following text when contacting support to better help you:
             </p>
             <pre className="bg-emphasis text-emphasis w-full max-w-2xl whitespace-normal break-words rounded-md p-4">
-              {router.query.error}
+              {searchParams?.get("error")}
               <br />
               <Button
                 color="secondary"
                 className="mt-2 border-0 font-sans font-normal hover:bg-gray-300"
                 StartIcon={Copy}
                 onClick={() => {
-                  navigator.clipboard.writeText(router.query.error as string);
+                  navigator.clipboard.writeText(searchParams?.get("error") as string);
                   showToast("Link copied!", "success");
                 }}>
                 {t("copy")}
diff --git a/apps/web/pages/[user].tsx b/apps/web/pages/[user].tsx
index 70cadf56ee..a19b89cbf8 100644
--- a/apps/web/pages/[user].tsx
+++ b/apps/web/pages/[user].tsx
@@ -2,7 +2,6 @@ import type { DehydratedState } from "@tanstack/react-query";
 import classNames from "classnames";
 import type { GetServerSideProps, InferGetServerSidePropsType } from "next";
 import Link from "next/link";
-import { useRouter } from "next/router";
 import { Toaster } from "react-hot-toast";
 import type { z } from "zod";
 
@@ -18,6 +17,7 @@ import { EventTypeDescriptionLazy as EventTypeDescription } from "@calcom/featur
 import EmptyPage from "@calcom/features/eventtypes/components/EmptyPage";
 import { getUsernameList } from "@calcom/lib/defaultEvents";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
 import useTheme from "@calcom/lib/hooks/useTheme";
 import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
 import { stripMarkdown } from "@calcom/lib/stripMarkdown";
@@ -39,7 +39,6 @@ export function UserPage(props: InferGetServerSidePropsType<typeof getServerSide
   const [user] = users; //To be used when we only have a single user, not dynamic group
   useTheme(profile.theme);
   const { t } = useLocale();
-  const router = useRouter();
 
   const isBioEmpty = !user.bio || !user.bio.replace("<p><br></p>", "").length;
 
@@ -47,9 +46,13 @@ export function UserPage(props: InferGetServerSidePropsType<typeof getServerSide
   const eventTypeListItemEmbedStyles = useEmbedStyles("eventTypeListItem");
   const shouldAlignCentrallyInEmbed = useEmbedNonStylesConfig("align") !== "left";
   const shouldAlignCentrally = !isEmbed || shouldAlignCentrallyInEmbed;
-  const query = { ...router.query };
-  delete query.user; // So it doesn't display in the Link (and make tests fail)
-  delete query.orgSlug;
+  const {
+    // So it doesn't display in the Link (and make tests fail)
+    user: _user,
+    orgSlug: _orgSlug,
+    ...query
+  } = useRouterQuery();
+  const nameOrUsername = user.name || user.username || "";
 
   /*
    const telemetry = useTelemetry();
diff --git a/apps/web/pages/apps/[slug]/[...pages].tsx b/apps/web/pages/apps/[slug]/[...pages].tsx
index e770f894c3..9729904aff 100644
--- a/apps/web/pages/apps/[slug]/[...pages].tsx
+++ b/apps/web/pages/apps/[slug]/[...pages].tsx
@@ -1,10 +1,10 @@
 import type { GetServerSidePropsContext } from "next";
-import { useRouter } from "next/router";
 
 import { getAppWithMetadata } from "@calcom/app-store/_appRegistry";
 import RoutingFormsRoutingConfig from "@calcom/app-store/routing-forms/pages/app-routing.config";
 import TypeformRoutingConfig from "@calcom/app-store/typeform/pages/app-routing.config";
 import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+import { useParamsWithFallback } from "@calcom/lib/hooks/useParamsWithFallback";
 import prisma from "@calcom/prisma";
 import type { AppGetServerSideProps } from "@calcom/types/AppGetServerSideProps";
 
@@ -59,8 +59,8 @@ function getRoute(appName: string, pages: string[]) {
 
 const AppPage: AppPageType["default"] = function AppPage(props) {
   const appName = props.appName;
-  const router = useRouter();
-  const pages = router.query.pages as string[];
+  const params = useParamsWithFallback();
+  const pages = (params.pages || []) as string[];
   const route = getRoute(appName, pages);
 
   const componentProps = {
diff --git a/apps/web/pages/apps/[slug]/setup.tsx b/apps/web/pages/apps/[slug]/setup.tsx
index ca9b08138b..3ffd9d3285 100644
--- a/apps/web/pages/apps/[slug]/setup.tsx
+++ b/apps/web/pages/apps/[slug]/setup.tsx
@@ -1,6 +1,6 @@
 import type { GetStaticPaths, InferGetStaticPropsType } from "next";
 import { useSession } from "next-auth/react";
-import { useRouter } from "next/router";
+import { useRouter, useSearchParams } from "next/navigation";
 
 import { AppSetupPage } from "@calcom/app-store/_pages/setup";
 import { getStaticProps } from "@calcom/app-store/_pages/setup/_getStaticProps";
@@ -9,8 +9,9 @@ import { HeadSeo } from "@calcom/ui";
 import PageWrapper from "@components/PageWrapper";
 
 export default function SetupInformation(props: InferGetStaticPropsType<typeof getStaticProps>) {
+  const searchParams = useSearchParams();
   const router = useRouter();
-  const slug = router.query.slug as string;
+  const slug = searchParams?.get("slug") as string;
   const { status } = useSession();
 
   if (status === "loading") {
@@ -18,12 +19,10 @@ export default function SetupInformation(props: InferGetStaticPropsType<typeof g
   }
 
   if (status === "unauthenticated") {
-    router.replace({
-      pathname: "/auth/login",
-      query: {
-        callbackUrl: `/apps/${slug}/setup`,
-      },
+    const urlSearchParams = new URLSearchParams({
+      callbackUrl: `/apps/${slug}/setup`,
     });
+    router.replace(`/auth/login?${urlSearchParams.toString()}`);
   }
 
   return (
diff --git a/apps/web/pages/apps/categories/[category].tsx b/apps/web/pages/apps/categories/[category].tsx
index 0d80c0002d..c56a483dfd 100644
--- a/apps/web/pages/apps/categories/[category].tsx
+++ b/apps/web/pages/apps/categories/[category].tsx
@@ -1,7 +1,7 @@
 import { Prisma } from "@prisma/client";
 import type { GetStaticPropsContext, InferGetStaticPropsType } from "next";
 import Link from "next/link";
-import { useRouter } from "next/router";
+import { useSearchParams } from "next/navigation";
 
 import { getAppRegistry } from "@calcom/app-store/_appRegistry";
 import Shell from "@calcom/features/shell/Shell";
@@ -13,9 +13,9 @@ import { AppCard, SkeletonText } from "@calcom/ui";
 import PageWrapper from "@components/PageWrapper";
 
 export default function Apps({ apps }: InferGetStaticPropsType<typeof getStaticProps>) {
+  const searchParams = useSearchParams();
   const { t, isLocaleReady } = useLocale();
-  const router = useRouter();
-  const { category } = router.query;
+  const category = searchParams?.get("category");
 
   return (
     <>
diff --git a/apps/web/pages/apps/installed/[category].tsx b/apps/web/pages/apps/installed/[category].tsx
index 1e43bbe59e..ae12e3d96e 100644
--- a/apps/web/pages/apps/installed/[category].tsx
+++ b/apps/web/pages/apps/installed/[category].tsx
@@ -1,4 +1,4 @@
-import { useRouter } from "next/router";
+import { useSearchParams } from "next/navigation";
 import { useCallback, useReducer, useState } from "react";
 import z from "zod";
 
@@ -350,10 +350,9 @@ type ModalState = {
 };
 
 export default function InstalledApps() {
+  const searchParams = useSearchParams();
   const { t } = useLocale();
-  const router = useRouter();
-  const category = router.query.category as querySchemaType["category"];
-
+  const category = searchParams?.get("category") as querySchemaType["category"];
   const categoryList: AppCategories[] = Object.values(AppCategories).filter((category) => {
     // Exclude calendar and other from categoryList, we handle those slightly differently below
     return !(category in { other: null, calendar: null });
diff --git a/apps/web/pages/auth/error.tsx b/apps/web/pages/auth/error.tsx
index cfa30f288d..20e5f77516 100644
--- a/apps/web/pages/auth/error.tsx
+++ b/apps/web/pages/auth/error.tsx
@@ -1,11 +1,10 @@
 import type { GetStaticPropsContext } from "next";
 import Link from "next/link";
-import { useRouter } from "next/router";
-import type { ReactElement } from "react";
+import { useSearchParams } from "next/navigation";
 import z from "zod";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, SkeletonText } from "@calcom/ui";
+import { Button } from "@calcom/ui";
 import { X } from "@calcom/ui/components/icon";
 
 import PageWrapper from "@components/PageWrapper";
@@ -19,13 +18,10 @@ const querySchema = z.object({
 
 export default function Error() {
   const { t } = useLocale();
-  const router = useRouter();
-  const { error } = querySchema.parse(router.query);
+  const searchParams = useSearchParams();
+  const { error } = querySchema.parse(searchParams);
   const isTokenVerificationError = error?.toLowerCase() === "verification";
-  let errorMsg: string | ReactElement = <SkeletonText />;
-  if (router.isReady) {
-    errorMsg = isTokenVerificationError ? t("token_invalid_expired") : t("error_during_login");
-  }
+  const errorMsg = isTokenVerificationError ? t("token_invalid_expired") : t("error_during_login");
 
   return (
     <AuthContainer title="" description="">
diff --git a/apps/web/pages/auth/forgot-password/index.tsx b/apps/web/pages/auth/forgot-password/index.tsx
index 2c7fbbc2be..445be08be7 100644
--- a/apps/web/pages/auth/forgot-password/index.tsx
+++ b/apps/web/pages/auth/forgot-password/index.tsx
@@ -3,7 +3,7 @@ import type { GetServerSidePropsContext } from "next";
 import { getCsrfToken } from "next-auth/react";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import Link from "next/link";
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import type { CSSProperties, SyntheticEvent } from "react";
 import React from "react";
 
diff --git a/apps/web/pages/auth/login.tsx b/apps/web/pages/auth/login.tsx
index 98b98209eb..4847ceb9fb 100644
--- a/apps/web/pages/auth/login.tsx
+++ b/apps/web/pages/auth/login.tsx
@@ -4,7 +4,7 @@ import { jwtVerify } from "jose";
 import type { GetServerSidePropsContext } from "next";
 import { getCsrfToken, signIn } from "next-auth/react";
 import Link from "next/link";
-import { useRouter } from "next/router";
+import { useRouter, useSearchParams } from "next/navigation";
 import type { CSSProperties } from "react";
 import { useState } from "react";
 import { FormProvider, useForm } from "react-hook-form";
@@ -49,6 +49,7 @@ export default function Login({
   samlProductID,
   totpEmail,
 }: inferSSRProps<typeof _getServerSideProps> & WithNonceProps) {
+  const searchParams = useSearchParams();
   const { t } = useLocale();
   const router = useRouter();
   const formSchema = z
@@ -77,7 +78,7 @@ export default function Login({
 
   const telemetry = useTelemetry();
 
-  let callbackUrl = typeof router.query?.callbackUrl === "string" ? router.query.callbackUrl : "";
+  let callbackUrl = searchParams.get("callbackUrl") || "";
 
   if (/"\//.test(callbackUrl)) callbackUrl = callbackUrl.substring(1);
 
@@ -169,7 +170,7 @@ export default function Login({
                 <EmailField
                   id="email"
                   label={t("email_address")}
-                  defaultValue={totpEmail || (router.query.email as string)}
+                  defaultValue={totpEmail || (searchParams?.get("email") as string)}
                   placeholder="john.doe@example.com"
                   required
                   {...register("email")}
diff --git a/apps/web/pages/auth/logout.tsx b/apps/web/pages/auth/logout.tsx
index b655fe1d49..154d85f9b6 100644
--- a/apps/web/pages/auth/logout.tsx
+++ b/apps/web/pages/auth/logout.tsx
@@ -1,6 +1,6 @@
 import type { GetServerSidePropsContext } from "next";
 import { signOut, useSession } from "next-auth/react";
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import { useEffect } from "react";
 
 import { WEBSITE_URL } from "@calcom/lib/constants";
diff --git a/apps/web/pages/auth/saml-idp.tsx b/apps/web/pages/auth/saml-idp.tsx
index 21489f124b..77b0ac0650 100644
--- a/apps/web/pages/auth/saml-idp.tsx
+++ b/apps/web/pages/auth/saml-idp.tsx
@@ -1,19 +1,15 @@
 import { signIn } from "next-auth/react";
-import { useRouter } from "next/router";
+import { useSearchParams } from "next/navigation";
 import { useEffect } from "react";
 
 import PageWrapper from "@components/PageWrapper";
 
 // To handle the IdP initiated login flow callback
 export default function Page() {
-  const router = useRouter();
+  const searchParams = useSearchParams();
 
   useEffect(() => {
-    if (!router.isReady) {
-      return;
-    }
-
-    const { code } = router.query;
+    const code = searchParams?.get("code");
 
     signIn("saml-idp", {
       callbackUrl: "/",
diff --git a/apps/web/pages/auth/setup/index.tsx b/apps/web/pages/auth/setup/index.tsx
index 1488108ea6..1fe903613f 100644
--- a/apps/web/pages/auth/setup/index.tsx
+++ b/apps/web/pages/auth/setup/index.tsx
@@ -1,5 +1,5 @@
 import type { GetServerSidePropsContext } from "next";
-import { useRouter } from "next/router";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useState } from "react";
 
 import AdminAppsList from "@calcom/features/apps/AdminAppsList";
@@ -19,15 +19,25 @@ import EnterpriseLicense from "@components/setup/EnterpriseLicense";
 
 import { ssrInit } from "@server/lib/ssr";
 
+function useSetStep() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+  const setStep = (newStep = 1) => {
+    const _searchParams = new URLSearchParams(searchParams);
+    _searchParams.set("step", newStep.toString());
+    router.replace(`${pathname}?${_searchParams.toString()}`);
+  };
+  return setStep;
+}
+
 export function Setup(props: inferSSRProps<typeof getServerSideProps>) {
   const { t } = useLocale();
   const router = useRouter();
   const [value, setValue] = useState(props.isFreeLicense ? "FREE" : "EE");
   const isFreeLicense = value === "FREE";
   const [isEnabledEE, setIsEnabledEE] = useState(!props.isFreeLicense);
-  const setStep = (newStep: number) => {
-    router.replace(`/auth/setup?step=${newStep || 1}`, undefined, { shallow: true });
-  };
+  const setStep = useSetStep();
 
   const steps: React.ComponentProps<typeof WizardForm>["steps"] = [
     {
diff --git a/apps/web/pages/auth/sso/[provider].tsx b/apps/web/pages/auth/sso/[provider].tsx
index accb5fe890..8d8082fa8f 100644
--- a/apps/web/pages/auth/sso/[provider].tsx
+++ b/apps/web/pages/auth/sso/[provider].tsx
@@ -1,6 +1,6 @@
 import type { GetServerSidePropsContext } from "next";
 import { signIn } from "next-auth/react";
-import { useRouter } from "next/router";
+import { useRouter, useSearchParams } from "next/navigation";
 import { useEffect } from "react";
 
 import { getPremiumMonthlyPlanPriceId } from "@calcom/app-store/stripepayment/lib/utils";
@@ -27,11 +27,12 @@ import { ssrInit } from "@server/lib/ssr";
 export type SSOProviderPageProps = inferSSRProps<typeof getServerSideProps>;
 
 export default function Provider(props: SSOProviderPageProps) {
+  const searchParams = useSearchParams();
   const router = useRouter();
 
   useEffect(() => {
     if (props.provider === "saml") {
-      const email = typeof router.query?.email === "string" ? router.query?.email : null;
+      const email = searchParams?.get("email");
 
       if (!email) {
         router.push("/auth/error?error=" + "Email not provided");
diff --git a/apps/web/pages/auth/sso/direct.tsx b/apps/web/pages/auth/sso/direct.tsx
index 66551c62d4..d3b5ce8d84 100644
--- a/apps/web/pages/auth/sso/direct.tsx
+++ b/apps/web/pages/auth/sso/direct.tsx
@@ -1,5 +1,5 @@
 import { signIn } from "next-auth/react";
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import { useEffect } from "react";
 
 import { samlProductID, samlTenantID } from "@calcom/features/ee/sso/lib/saml";
diff --git a/apps/web/pages/auth/verify-email.tsx b/apps/web/pages/auth/verify-email.tsx
index b18a05de5e..8c66de182f 100644
--- a/apps/web/pages/auth/verify-email.tsx
+++ b/apps/web/pages/auth/verify-email.tsx
@@ -1,6 +1,6 @@
 import { MailOpenIcon } from "lucide-react";
 import { useSession } from "next-auth/react";
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import { useEffect } from "react";
 
 import { APP_NAME } from "@calcom/lib/constants";
diff --git a/apps/web/pages/auth/verify.tsx b/apps/web/pages/auth/verify.tsx
index fa41ad4d5e..48c52773d8 100644
--- a/apps/web/pages/auth/verify.tsx
+++ b/apps/web/pages/auth/verify.tsx
@@ -1,14 +1,14 @@
 import { signIn } from "next-auth/react";
 import Head from "next/head";
-import { useRouter } from "next/router";
-import * as React from "react";
-import { useEffect, useState, useRef } from "react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useRef, useState } from "react";
 import z from "zod";
 
 import { APP_NAME, WEBAPP_URL } from "@calcom/lib/constants";
+import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
 import { trpc } from "@calcom/trpc/react";
 import { Button, showToast } from "@calcom/ui";
-import { Check, MailOpen, AlertTriangle } from "@calcom/ui/components/icon";
+import { AlertTriangle, Check, MailOpen } from "@calcom/ui/components/icon";
 
 import Loader from "@components/Loader";
 import PageWrapper from "@components/PageWrapper";
@@ -54,8 +54,11 @@ const querySchema = z.object({
 });
 
 export default function Verify() {
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
   const router = useRouter();
-  const { t, sessionId, stripeCustomerId } = querySchema.parse(router.query);
+  const routerQuery = useRouterQuery();
+  const { t, sessionId, stripeCustomerId } = querySchema.parse(routerQuery);
   const [secondsLeft, setSecondsLeft] = useState(30);
   const { data } = trpc.viewer.public.stripeCheckoutSession.useQuery({
     stripeCustomerId,
@@ -88,7 +91,7 @@ export default function Verify() {
     }
   }, [secondsLeft]);
 
-  if (!router.isReady || !data) {
+  if (!data) {
     // Loading state
     return <Loader />;
   }
@@ -106,7 +109,7 @@ export default function Verify() {
       <Head>
         <title>
           {/* @note: Ternary can look ugly ant his might be extracted later but I think at 3 it's not yet worth
-          it or too hard to read. */}
+        it or too hard to read. */}
           {hasPaymentFailed
             ? "Your payment failed"
             : sessionId
@@ -155,16 +158,9 @@ export default function Verify() {
                 e.preventDefault();
                 setSecondsLeft(30);
                 // Update query params with t:timestamp, shallow: true doesn't re-render the page
-                router.push(
-                  router.asPath,
-                  {
-                    query: {
-                      ...router.query,
-                      t: Date.now(),
-                    },
-                  },
-                  { shallow: true }
-                );
+                const _searchParams = new URLSearchParams(searchParams);
+                _searchParams.set("t", `${Date.now()}`);
+                router.replace(`${pathname}?${_searchParams.toString()}`);
                 return await sendVerificationLogin(customer.email, customer.username);
               }}>
               {secondsLeft > 0 ? `Resend in ${secondsLeft} seconds` : "Send another mail"}
diff --git a/apps/web/pages/availability/[schedule].tsx b/apps/web/pages/availability/[schedule].tsx
index 134fc520da..f7721b2627 100644
--- a/apps/web/pages/availability/[schedule].tsx
+++ b/apps/web/pages/availability/[schedule].tsx
@@ -1,7 +1,6 @@
-import { useRouter } from "next/router";
+import { useRouter, useSearchParams } from "next/navigation";
 import { useState } from "react";
 import { Controller, useFieldArray, useForm } from "react-hook-form";
-import { z } from "zod";
 
 import dayjs from "@calcom/dayjs";
 import { DateOverrideInputDialog, DateOverrideList } from "@calcom/features/schedules";
@@ -9,13 +8,20 @@ import Schedule from "@calcom/features/schedules/components/Schedule";
 import Shell from "@calcom/features/shell/Shell";
 import { availabilityAsString } from "@calcom/lib/availability";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery";
 import { HttpError } from "@calcom/lib/http-error";
 import { trpc } from "@calcom/trpc/react";
 import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
 import type { Schedule as ScheduleType, TimeRange, WorkingHours } from "@calcom/types/schedule";
 import {
   Button,
+  ConfirmationDialogContent,
+  Dialog,
+  DialogTrigger,
+  Dropdown,
+  DropdownItem,
+  DropdownMenuContent,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
   Form,
   Label,
   showToast,
@@ -24,26 +30,14 @@ import {
   Switch,
   TimezoneSelect,
   Tooltip,
-  Dialog,
-  DialogTrigger,
-  DropdownMenuSeparator,
-  Dropdown,
-  DropdownMenuContent,
-  DropdownItem,
-  DropdownMenuTrigger,
-  ConfirmationDialogContent,
   VerticalDivider,
 } from "@calcom/ui";
-import { Info, Plus, Trash, MoreHorizontal } from "@calcom/ui/components/icon";
+import { Info, MoreHorizontal, Plus, Trash } from "@calcom/ui/components/icon";
 
 import PageWrapper from "@components/PageWrapper";
 import { SelectSkeletonLoader } from "@components/availability/SkeletonLoader";
 import EditableHeading from "@components/ui/EditableHeading";
 
-const querySchema = z.object({
-  schedule: z.coerce.number().positive().optional(),
-});
-
 type AvailabilityFormValues = {
   name: string;
   schedule: ScheduleType;
@@ -93,15 +87,13 @@ const DateOverride = ({ workingHours }: { workingHours: WorkingHours[] }) => {
 };
 
 export default function Availability() {
+  const searchParams = useSearchParams();
   const { t, i18n } = useLocale();
   const router = useRouter();
   const utils = trpc.useContext();
   const me = useMeQuery();
-  const {
-    data: { schedule: scheduleId },
-  } = useTypedQuery(querySchema);
-
-  const { fromEventType } = router.query;
+  const scheduleId = searchParams?.get("schedule") ? Number(searchParams.get("schedule")) : -1;
+  const fromEventType = searchParams?.get("fromEventType");
   const { timeFormat } = me.data || { timeFormat: null };
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const { data: schedule, isLoading } = trpc.viewer.availability.schedule.get.useQuery(
diff --git a/apps/web/pages/availability/index.tsx b/apps/web/pages/availability/index.tsx
index 22911c8818..7a31265697 100644
--- a/apps/web/pages/availability/index.tsx
+++ b/apps/web/pages/availability/index.tsx
@@ -1,5 +1,5 @@
 import { useAutoAnimate } from "@formkit/auto-animate/react";
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 
 import { NewScheduleButton, ScheduleListItem } from "@calcom/features/schedules";
 import Shell from "@calcom/features/shell/Shell";
diff --git a/apps/web/pages/booking/[uid].tsx b/apps/web/pages/booking/[uid].tsx
index 8983f9a8e4..04de58e60e 100644
--- a/apps/web/pages/booking/[uid].tsx
+++ b/apps/web/pages/booking/[uid].tsx
@@ -4,7 +4,7 @@ import { createEvent } from "ics";
 import type { GetServerSidePropsContext } from "next";
 import { useSession } from "next-auth/react";
 import Link from "next/link";
-import { useRouter } from "next/router";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useEffect, useState } from "react";
 import { RRule } from "rrule";
 import { z } from "zod";
@@ -39,6 +39,7 @@ import {
 import { getDefaultEvent } from "@calcom/lib/defaultEvents";
 import useGetBrandingColours from "@calcom/lib/getBrandColours";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
 import useTheme from "@calcom/lib/hooks/useTheme";
 import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
 import { maybeGetBookingUidFromSeat } from "@calcom/lib/server/maybeGetBookingUidFromSeat";
@@ -47,11 +48,9 @@ import { localStorage } from "@calcom/lib/webstorage";
 import prisma from "@calcom/prisma";
 import type { Prisma } from "@calcom/prisma/client";
 import { BookingStatus } from "@calcom/prisma/enums";
-import { bookingMetadataSchema } from "@calcom/prisma/zod-utils";
-import { customInputSchema, EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
-import { Button, EmailInput, HeadSeo, Badge, useCalcomTheme, Alert } from "@calcom/ui";
-import { X, ExternalLink, ChevronLeft, Check, Calendar } from "@calcom/ui/components/icon";
-import { AlertCircle } from "@calcom/ui/components/icon";
+import { bookingMetadataSchema, customInputSchema, EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
+import { Alert, Badge, Button, EmailInput, HeadSeo, useCalcomTheme } from "@calcom/ui";
+import { AlertCircle, Calendar, Check, ChevronLeft, ExternalLink, X } from "@calcom/ui/components/icon";
 
 import { timeZone } from "@lib/clock";
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
@@ -99,6 +98,9 @@ const querySchema = z.object({
 export default function Success(props: SuccessProps) {
   const { t } = useLocale();
   const router = useRouter();
+  const routerQuery = useRouterQuery();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
   const {
     allRemainingBookings,
     isSuccessBookingPage,
@@ -106,7 +108,7 @@ export default function Success(props: SuccessProps) {
     formerTime,
     email,
     seatReferenceUid,
-  } = querySchema.parse(router.query);
+  } = querySchema.parse(routerQuery);
 
   const attendeeTimeZone = props?.bookingInfo?.attendees.find(
     (attendee) => attendee.email === email
@@ -145,24 +147,17 @@ export default function Success(props: SuccessProps) {
   const [calculatedDuration, setCalculatedDuration] = useState<number | undefined>(undefined);
 
   function setIsCancellationMode(value: boolean) {
-    const query_ = { ...router.query };
+    const _searchParams = new URLSearchParams(searchParams);
 
     if (value) {
-      query_.cancel = "true";
+      _searchParams.set("cancel", "true");
     } else {
-      if (query_.cancel) {
-        delete query_.cancel;
+      if (_searchParams.get("cancel")) {
+        _searchParams.delete("cancel");
       }
     }
 
-    router.replace(
-      {
-        pathname: router.pathname,
-        query: { ...query_ },
-      },
-      undefined,
-      { scroll: false }
-    );
+    router.replace(`${pathname}?${_searchParams.toString()}`);
   }
 
   let evtName = props.eventType.eventName;
diff --git a/apps/web/pages/bookings/[status].tsx b/apps/web/pages/bookings/[status].tsx
index ddc86e65ed..1f04434229 100644
--- a/apps/web/pages/bookings/[status].tsx
+++ b/apps/web/pages/bookings/[status].tsx
@@ -1,6 +1,5 @@
 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import type { GetStaticPaths, GetStaticProps } from "next";
-import { useRouter } from "next/router";
 import { Fragment } from "react";
 import { z } from "zod";
 
@@ -9,6 +8,7 @@ import BookingLayout from "@calcom/features/bookings/layout/BookingLayout";
 import type { filterQuerySchema } from "@calcom/features/bookings/lib/useFilterQuery";
 import { useFilterQuery } from "@calcom/features/bookings/lib/useFilterQuery";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { useParamsWithFallback } from "@calcom/lib/hooks/useParamsWithFallback";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
 import { Alert, Button, EmptyScreen } from "@calcom/ui";
@@ -47,9 +47,9 @@ const querySchema = z.object({
 });
 
 export default function Bookings() {
+  const params = useParamsWithFallback();
   const { data: filterQuery } = useFilterQuery();
-  const router = useRouter();
-  const { status } = router.isReady ? querySchema.parse(router.query) : { status: "upcoming" as const };
+  const { status } = params ? querySchema.parse(params) : { status: "upcoming" as const };
   const { t } = useLocale();
 
   const query = trpc.viewer.bookings.get.useInfiniteQuery(
@@ -62,7 +62,7 @@ export default function Bookings() {
     },
     {
       // first render has status `undefined`
-      enabled: router.isReady,
+      enabled: true,
       getNextPageParam: (lastPage) => lastPage.nextCursor,
     }
   );
diff --git a/apps/web/pages/event-types/index.tsx b/apps/web/pages/event-types/index.tsx
index 1f74a6f25c..dedc08d7a2 100644
--- a/apps/web/pages/event-types/index.tsx
+++ b/apps/web/pages/event-types/index.tsx
@@ -2,9 +2,9 @@ import { useAutoAnimate } from "@formkit/auto-animate/react";
 import type { User } from "@prisma/client";
 import { Trans } from "next-i18next";
 import Link from "next/link";
-import { useRouter } from "next/router";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import type { FC } from "react";
-import { useEffect, useState, memo } from "react";
+import { memo, useEffect, useState } from "react";
 import { z } from "zod";
 
 import { useOrgBranding } from "@calcom/features/ee/organizations/context/provider";
@@ -19,18 +19,21 @@ import { APP_NAME, CAL_URL, WEBAPP_URL } from "@calcom/lib/constants";
 import { useBookerUrl } from "@calcom/lib/hooks/useBookerUrl";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useMediaQuery from "@calcom/lib/hooks/useMediaQuery";
+import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
 import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery";
 import { HttpError } from "@calcom/lib/http-error";
 import { SchedulingType } from "@calcom/prisma/enums";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc, TRPCClientError } from "@calcom/trpc/react";
 import {
+  Alert,
   Avatar,
   AvatarGroup,
   Badge,
   Button,
   ButtonGroup,
   ConfirmationDialogContent,
+  CreateButton,
   Dialog,
   Dropdown,
   DropdownItem,
@@ -40,15 +43,13 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
   EmptyScreen,
+  HeadSeo,
+  HorizontalTabs,
+  Label,
   showToast,
+  Skeleton,
   Switch,
   Tooltip,
-  CreateButton,
-  HorizontalTabs,
-  HeadSeo,
-  Skeleton,
-  Label,
-  Alert,
 } from "@calcom/ui";
 import {
   ArrowDown,
@@ -63,8 +64,8 @@ import {
   MoreHorizontal,
   Trash,
   Upload,
-  Users,
   User as UserIcon,
+  Users,
 } from "@calcom/ui/components/icon";
 
 import useMeQuery from "@lib/hooks/useMeQuery";
@@ -202,6 +203,8 @@ const MemoizedItem = memo(Item);
 export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeListProps): JSX.Element => {
   const { t } = useLocale();
   const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
   const orgBranding = useOrgBranding();
   const [parent] = useAutoAnimate<HTMLUListElement>();
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
@@ -292,25 +295,19 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
 
   // inject selection data into url for correct router history
   const openDuplicateModal = (eventType: EventType, group: EventTypeGroup) => {
-    const query = {
-      ...router.query,
-      dialog: "duplicate",
-      title: eventType.title,
-      description: eventType.description,
-      slug: eventType.slug,
-      id: eventType.id,
-      length: eventType.length,
-      pageSlug: group.profile.slug,
-    };
-
-    router.push(
-      {
-        pathname: router.pathname,
-        query,
-      },
-      undefined,
-      { shallow: true }
-    );
+    const newSearchParams = new URLSearchParams(searchParams);
+    function setParamsIfDefined(key: string, value: string | number | boolean | null | undefined) {
+      if (value) newSearchParams.set(key, value.toString());
+      if (value === null) newSearchParams.delete(key);
+    }
+    setParamsIfDefined("dialog", "duplicate");
+    setParamsIfDefined("title", eventType.title);
+    setParamsIfDefined("description", eventType.description);
+    setParamsIfDefined("slug", eventType.slug);
+    setParamsIfDefined("id", eventType.id);
+    setParamsIfDefined("length", eventType.length);
+    setParamsIfDefined("pageSlug", group.profile.slug);
+    router.push(`${pathname}?${newSearchParams.toString()}`);
   };
 
   const deleteMutation = trpc.viewer.eventTypes.delete.useMutation({
@@ -845,8 +842,7 @@ const Main = ({
   filters: ReturnType<typeof getTeamsFiltersFromQuery>;
 }) => {
   const isMobile = useMediaQuery("(max-width: 768px)");
-  const router = useRouter();
-
+  const searchParams = useSearchParams();
   const orgBranding = useOrgBranding();
 
   if (!data || status === "loading") {
@@ -897,20 +893,20 @@ const Main = ({
       )}
       {data.eventTypeGroups.length === 0 && <CreateFirstEventTypeView />}
       <EmbedDialog />
-      {router.query.dialog === "duplicate" && <DuplicateDialog />}
+      {searchParams?.get("dialog") === "duplicate" && <DuplicateDialog />}
     </>
   );
 };
 
 const EventTypesPage = () => {
   const { t } = useLocale();
-  const router = useRouter();
+  const searchParams = useSearchParams();
   const { open } = useIntercom();
-  const { query } = router;
   const { data: user } = useMeQuery();
   const [showProfileBanner, setShowProfileBanner] = useState(false);
   const orgBranding = useOrgBranding();
-  const filters = getTeamsFiltersFromQuery(router.query);
+  const routerQuery = useRouterQuery();
+  const filters = getTeamsFiltersFromQuery(routerQuery);
 
   // TODO: Maybe useSuspenseQuery to focus on success case only? Remember that it would crash the page when there is an error in query. Also, it won't support skeleton
   const { data, status, error } = trpc.viewer.eventTypes.getByViewer.useQuery(filters && { filters }, {
@@ -926,7 +922,7 @@ const EventTypesPage = () => {
   }
 
   useEffect(() => {
-    if (query?.openIntercom && query?.openIntercom === "true") {
+    if (searchParams?.get("openIntercom") === "true") {
       open();
     }
     setShowProfileBanner(
diff --git a/apps/web/pages/getting-started/[[...step]].tsx b/apps/web/pages/getting-started/[[...step]].tsx
index 46811b4ac2..35c413a29f 100644
--- a/apps/web/pages/getting-started/[[...step]].tsx
+++ b/apps/web/pages/getting-started/[[...step]].tsx
@@ -1,7 +1,7 @@
 import type { GetServerSidePropsContext } from "next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import Head from "next/head";
-import { useRouter } from "next/router";
+import { usePathname, useRouter } from "next/navigation";
 import type { CSSProperties } from "react";
 import { Suspense } from "react";
 import { z } from "zod";
@@ -9,6 +9,7 @@ import { z } from "zod";
 import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import { APP_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { useParamsWithFallback } from "@calcom/lib/hooks/useParamsWithFallback";
 import prisma from "@calcom/prisma";
 import { trpc } from "@calcom/trpc";
 import { Button, StepCard, Steps } from "@calcom/ui";
@@ -47,11 +48,12 @@ const stepRouteSchema = z.object({
 
 // TODO: Refactor how steps work to be contained in one array/object. Currently we have steps,initalsteps,headers etc. These can all be in one place
 const OnboardingPage = () => {
+  const pathname = usePathname();
+  const params = useParamsWithFallback();
   const router = useRouter();
   const [user] = trpc.viewer.me.useSuspenseQuery();
   const { t } = useLocale();
-
-  const result = stepRouteSchema.safeParse(router.query);
+  const result = stepRouteSchema.safeParse(params);
   const currentStep = result.success ? result.data.step[0] : INITIAL_STEP;
   const from = result.success ? result.data.from : "";
 
@@ -96,12 +98,7 @@ const OnboardingPage = () => {
 
   const goToIndex = (index: number) => {
     const newStep = steps[index];
-    router.push(
-      {
-        pathname: `/getting-started/${stepTransform(newStep)}`,
-      },
-      undefined
-    );
+    router.push(`/getting-started/${stepTransform(newStep)}`);
   };
 
   const currentStepIndex = steps.indexOf(currentStep);
@@ -118,7 +115,7 @@ const OnboardingPage = () => {
           "--cal-brand-subtle": "#9CA3AF",
         } as CSSProperties
       }
-      key={router.asPath}>
+      key={pathname}>
       <Head>
         <title>{`${APP_NAME} - ${t("getting_started")}`}</title>
         <link rel="icon" href="/favicon.ico" />
diff --git a/apps/web/pages/settings/billing/index.tsx b/apps/web/pages/settings/billing/index.tsx
index 97fea524c1..2f3f2a9a6f 100644
--- a/apps/web/pages/settings/billing/index.tsx
+++ b/apps/web/pages/settings/billing/index.tsx
@@ -1,4 +1,4 @@
-import { useRouter } from "next/router";
+import { usePathname } from "next/navigation";
 
 import { useIntercom } from "@calcom/features/ee/support/lib/intercom/useIntercom";
 import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
@@ -33,10 +33,10 @@ const CtaRow = ({ title, description, className, children }: CtaRowProps) => {
 };
 
 const BillingView = () => {
+  const pathname = usePathname();
   const { t } = useLocale();
   const { open } = useIntercom();
-  const router = useRouter();
-  const returnTo = router.asPath;
+  const returnTo = pathname;
   const billingHref = `/api/integrations/stripepayment/portal?returnTo=${WEBAPP_URL}${returnTo}`;
 
   const onContactSupportClick = async () => {
diff --git a/apps/web/pages/settings/my-account/calendars.tsx b/apps/web/pages/settings/my-account/calendars.tsx
index c63125a35b..60154fa7e7 100644
--- a/apps/web/pages/settings/my-account/calendars.tsx
+++ b/apps/web/pages/settings/my-account/calendars.tsx
@@ -1,6 +1,6 @@
 import { Trans } from "next-i18next";
 import Link from "next/link";
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import { Fragment } from "react";
 
 import DisconnectIntegration from "@calcom/features/apps/components/DisconnectIntegration";
diff --git a/apps/web/pages/settings/my-account/general.tsx b/apps/web/pages/settings/my-account/general.tsx
index a386314e48..9c48012b55 100644
--- a/apps/web/pages/settings/my-account/general.tsx
+++ b/apps/web/pages/settings/my-account/general.tsx
@@ -1,9 +1,8 @@
-import { useRouter } from "next/router";
-import { useMemo } from "react";
 import { Controller, useForm } from "react-hook-form";
 
 import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { localeOptions } from "@calcom/lib/i18n";
 import { nameOfDay } from "@calcom/lib/weekday";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
@@ -68,7 +67,6 @@ const GeneralQueryView = () => {
 };
 
 const GeneralView = ({ localeProp, user }: GeneralViewProps) => {
-  const router = useRouter();
   const utils = trpc.useContext();
   const { t } = useLocale();
 
@@ -87,13 +85,6 @@ const GeneralView = ({ localeProp, user }: GeneralViewProps) => {
     },
   });
 
-  const localeOptions = useMemo(() => {
-    return (router.locales || []).map((locale) => ({
-      value: locale,
-      label: new Intl.DisplayNames(locale, { type: "language" }).of(locale) || "",
-    }));
-  }, [router.locales]);
-
   const timeFormatOptions = [
     { value: 12, label: t("12_hour") },
     { value: 24, label: t("24_hour") },
diff --git a/apps/web/pages/settings/organizations/[id]/about.tsx b/apps/web/pages/settings/organizations/[id]/about.tsx
index f08e8bdb41..5c310c0741 100644
--- a/apps/web/pages/settings/organizations/[id]/about.tsx
+++ b/apps/web/pages/settings/organizations/[id]/about.tsx
@@ -1,8 +1,6 @@
-import { useRouter } from "next/router";
-
 import { AboutOrganizationForm } from "@calcom/features/ee/organizations/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { WizardLayout, Meta } from "@calcom/ui";
+import { Meta, WizardLayout } from "@calcom/ui";
 
 import PageWrapper from "@components/PageWrapper";
 
@@ -10,8 +8,6 @@ export { getServerSideProps } from "@calcom/features/ee/organizations/pages/orga
 
 const AboutOrganizationPage = () => {
   const { t } = useLocale();
-  const router = useRouter();
-  if (!router.isReady) return null;
   return (
     <>
       <Meta title={t("about_your_organization")} description={t("about_your_organization_description")} />
diff --git a/apps/web/pages/settings/organizations/[id]/add-teams.tsx b/apps/web/pages/settings/organizations/[id]/add-teams.tsx
index 16728ba4d4..d7a071d925 100644
--- a/apps/web/pages/settings/organizations/[id]/add-teams.tsx
+++ b/apps/web/pages/settings/organizations/[id]/add-teams.tsx
@@ -1,9 +1,8 @@
-import type { NextRouter } from "next/router";
-import { useRouter } from "next/router";
+import type { AppProps as NextAppProps } from "next/app";
 
 import { AddNewTeamsForm } from "@calcom/features/ee/organizations/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { WizardLayout, Meta } from "@calcom/ui";
+import { Meta, WizardLayout } from "@calcom/ui";
 
 import PageWrapper from "@components/PageWrapper";
 
@@ -11,8 +10,6 @@ export { getServerSideProps } from "@calcom/features/ee/organizations/pages/orga
 
 const AddNewTeamsPage = () => {
   const { t } = useLocale();
-  const router = useRouter();
-  if (!router.isReady) return null;
   return (
     <>
       <Meta title={t("create_your_teams")} description={t("create_your_teams_description")} />
@@ -21,7 +18,7 @@ const AddNewTeamsPage = () => {
   );
 };
 
-AddNewTeamsPage.getLayout = (page: React.ReactElement, router: NextRouter) => (
+AddNewTeamsPage.getLayout = (page: React.ReactElement, router: NextAppProps["router"]) => (
   <>
     <WizardLayout
       currentStep={5}
diff --git a/apps/web/pages/settings/organizations/[id]/onboard-admins.tsx b/apps/web/pages/settings/organizations/[id]/onboard-admins.tsx
index 5c2294e0b7..9689f8bc66 100644
--- a/apps/web/pages/settings/organizations/[id]/onboard-admins.tsx
+++ b/apps/web/pages/settings/organizations/[id]/onboard-admins.tsx
@@ -1,9 +1,8 @@
-import type { NextRouter } from "next/router";
-import { useRouter } from "next/router";
+import type { AppProps as NextAppProps } from "next/app";
 
 import { AddNewOrgAdminsForm } from "@calcom/features/ee/organizations/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { WizardLayout, Meta } from "@calcom/ui";
+import { Meta, WizardLayout } from "@calcom/ui";
 
 import PageWrapper from "@components/PageWrapper";
 
@@ -11,8 +10,7 @@ export { getServerSideProps } from "@calcom/features/ee/organizations/pages/orga
 
 const OnboardTeamMembersPage = () => {
   const { t } = useLocale();
-  const router = useRouter();
-  if (!router.isReady) return null;
+
   return (
     <>
       <Meta
@@ -24,7 +22,7 @@ const OnboardTeamMembersPage = () => {
   );
 };
 
-OnboardTeamMembersPage.getLayout = (page: React.ReactElement, router: NextRouter) => (
+OnboardTeamMembersPage.getLayout = (page: React.ReactElement, router: NextAppProps["router"]) => (
   <WizardLayout
     currentStep={4}
     maxSteps={5}
diff --git a/apps/web/pages/settings/organizations/[id]/set-password.tsx b/apps/web/pages/settings/organizations/[id]/set-password.tsx
index 9291aa9184..ded908eae4 100644
--- a/apps/web/pages/settings/organizations/[id]/set-password.tsx
+++ b/apps/web/pages/settings/organizations/[id]/set-password.tsx
@@ -1,8 +1,6 @@
-import { useRouter } from "next/router";
-
 import { SetPasswordForm } from "@calcom/features/ee/organizations/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { WizardLayout, Meta } from "@calcom/ui";
+import { Meta, WizardLayout } from "@calcom/ui";
 
 import PageWrapper from "@components/PageWrapper";
 
@@ -10,8 +8,6 @@ export { getServerSideProps } from "@calcom/features/ee/organizations/pages/orga
 
 const SetPasswordPage = () => {
   const { t } = useLocale();
-  const router = useRouter();
-  if (!router.isReady) return null;
   return (
     <>
       <Meta title={t("set_a_password")} description={t("set_a_password_description")} />
diff --git a/apps/web/pages/signup.tsx b/apps/web/pages/signup.tsx
index 2184a8295e..a7e80c6475 100644
--- a/apps/web/pages/signup.tsx
+++ b/apps/web/pages/signup.tsx
@@ -1,7 +1,7 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import type { GetServerSidePropsContext } from "next";
 import { signIn } from "next-auth/react";
-import { useRouter } from "next/router";
+import { useSearchParams } from "next/navigation";
 import type { CSSProperties } from "react";
 import type { SubmitHandler } from "react-hook-form";
 import { FormProvider, useForm } from "react-hook-form";
@@ -40,10 +40,10 @@ type FormValues = z.infer<typeof signupSchema>;
 type SignupProps = inferSSRProps<typeof getServerSideProps>;
 
 export default function Signup({ prepopulateFormValues, token, orgSlug }: SignupProps) {
-  const { t, i18n } = useLocale();
-  const router = useRouter();
-  const flags = useFlagMap();
+  const searchParams = useSearchParams();
   const telemetry = useTelemetry();
+  const { t, i18n } = useLocale();
+  const flags = useFlagMap();
   const methods = useForm<FormValues>({
     resolver: zodResolver(signupSchema),
     defaultValues: prepopulateFormValues,
@@ -79,8 +79,8 @@ export default function Signup({ prepopulateFormValues, token, orgSlug }: Signup
         await signIn<"credentials">("credentials", {
           ...data,
           callbackUrl: `${
-            router.query.callbackUrl
-              ? `${WEBAPP_URL}/${router.query.callbackUrl}`
+            searchParams?.get("callbackUrl")
+              ? `${WEBAPP_URL}/${searchParams.get("callbackUrl")}`
               : `${WEBAPP_URL}/${verifyOrGettingStarted}`
           }?from=signup`,
         });
@@ -160,8 +160,8 @@ export default function Signup({ prepopulateFormValues, token, orgSlug }: Signup
                       className="w-full justify-center"
                       onClick={() =>
                         signIn("Cal.com", {
-                          callbackUrl: router.query.callbackUrl
-                            ? `${WEBAPP_URL}/${router.query.callbackUrl}`
+                          callbackUrl: searchParams?.get("callbackUrl")
+                            ? `${WEBAPP_URL}/${searchParams.get("callbackUrl")}`
                             : `${WEBAPP_URL}/getting-started`,
                         })
                       }>
diff --git a/apps/web/pages/team/[slug].tsx b/apps/web/pages/team/[slug].tsx
index 812c6fcb44..f3491857ae 100644
--- a/apps/web/pages/team/[slug].tsx
+++ b/apps/web/pages/team/[slug].tsx
@@ -1,7 +1,7 @@
 import classNames from "classnames";
 import type { GetServerSidePropsContext } from "next";
 import Link from "next/link";
-import { useRouter } from "next/router";
+import { usePathname } from "next/navigation";
 import { useEffect } from "react";
 
 import { sdkActionManager, useIsEmbed } from "@calcom/embed-core/embed-iframe";
@@ -10,6 +10,7 @@ import EventTypeDescription from "@calcom/features/eventtypes/components/EventTy
 import { getFeatureFlagMap } from "@calcom/features/flags/server/utils";
 import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
 import useTheme from "@calcom/lib/hooks/useTheme";
 import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
 import { getTeamWithMembers } from "@calcom/lib/server/queries/teams";
@@ -32,11 +33,12 @@ export type PageProps = inferSSRProps<typeof getServerSideProps>;
 
 function TeamPage({ team, isUnpublished, markdownStrippedBio, isValidOrgDomain }: PageProps) {
   useTheme(team.theme);
+  const routerQuery = useRouterQuery();
+  const pathname = usePathname();
   const showMembers = useToggleQuery("members");
   const { t } = useLocale();
   const isEmbed = useIsEmbed();
   const telemetry = useTelemetry();
-  const router = useRouter();
   const teamName = team.name || "Nameless Team";
   const isBioEmpty = !team.bio || !team.bio.replace("<p><br></p>", "").length;
   const metadata = teamMetadataSchema.parse(team.metadata);
@@ -46,7 +48,7 @@ function TeamPage({ team, isUnpublished, markdownStrippedBio, isValidOrgDomain }
       telemetryEventTypes.pageView,
       collectPageParameters("/team/[slug]", { isTeamBooking: true })
     );
-  }, [telemetry, router.asPath]);
+  }, [telemetry, pathname]);
 
   if (isUnpublished) {
     const slug = team.slug || metadata?.requestedSlug;
@@ -61,7 +63,7 @@ function TeamPage({ team, isUnpublished, markdownStrippedBio, isValidOrgDomain }
   }
 
   // slug is a route parameter, we don't want to forward it to the next route
-  const { slug: _slug, orgSlug: _orgSlug, user: _user, ...queryParamsToForward } = router.query;
+  const { slug: _slug, orgSlug: _orgSlug, user: _user, ...queryParamsToForward } = routerQuery;
 
   const EventTypes = () => (
     <ul className="border-subtle rounded-md border">
@@ -223,8 +225,8 @@ function TeamPage({ team, isUnpublished, markdownStrippedBio, isValidOrgDomain }
                         href={{
                           pathname: `${isValidOrgDomain ? "" : "/team"}/${team.slug}`,
                           query: {
-                            members: "1",
                             ...queryParamsToForward,
+                            members: "1",
                           },
                         }}
                         shallow={true}>
diff --git a/apps/web/playwright/event-types.e2e.ts b/apps/web/playwright/event-types.e2e.ts
index fedf4688c4..fd4d563d63 100644
--- a/apps/web/playwright/event-types.e2e.ts
+++ b/apps/web/playwright/event-types.e2e.ts
@@ -76,6 +76,8 @@ test.describe("Event Types tests", () => {
 
       await page.click(`[data-testid=event-type-options-${eventTypeId}]`);
       await page.click(`[data-testid=event-type-duplicate-${eventTypeId}]`);
+      // Wait for the dialog to appear so we can get the URL
+      await page.waitForSelector('[data-testid="dialog-title"]');
 
       const url = page.url();
       const params = new URLSearchParams(url);
diff --git a/packages/app-store/applecalendar/pages/setup/index.tsx b/packages/app-store/applecalendar/pages/setup/index.tsx
index 3678a982a6..ac77a2eedf 100644
--- a/packages/app-store/applecalendar/pages/setup/index.tsx
+++ b/packages/app-store/applecalendar/pages/setup/index.tsx
@@ -1,4 +1,4 @@
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { Toaster } from "react-hot-toast";
diff --git a/packages/app-store/caldavcalendar/pages/setup/index.tsx b/packages/app-store/caldavcalendar/pages/setup/index.tsx
index 5e18e6619d..9e6fad02da 100644
--- a/packages/app-store/caldavcalendar/pages/setup/index.tsx
+++ b/packages/app-store/caldavcalendar/pages/setup/index.tsx
@@ -1,4 +1,4 @@
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { Toaster } from "react-hot-toast";
diff --git a/packages/app-store/closecom/pages/setup/index.tsx b/packages/app-store/closecom/pages/setup/index.tsx
index 9441819c6e..d782141b8d 100644
--- a/packages/app-store/closecom/pages/setup/index.tsx
+++ b/packages/app-store/closecom/pages/setup/index.tsx
@@ -1,5 +1,5 @@
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { Toaster } from "react-hot-toast";
diff --git a/packages/app-store/components.tsx b/packages/app-store/components.tsx
index 638098c4fd..5a5043a367 100644
--- a/packages/app-store/components.tsx
+++ b/packages/app-store/components.tsx
@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import { useEffect, useRef } from "react";
 
 import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
diff --git a/packages/app-store/exchange2013calendar/pages/setup/index.tsx b/packages/app-store/exchange2013calendar/pages/setup/index.tsx
index 1509adba57..382a17fe1f 100644
--- a/packages/app-store/exchange2013calendar/pages/setup/index.tsx
+++ b/packages/app-store/exchange2013calendar/pages/setup/index.tsx
@@ -1,4 +1,4 @@
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { Toaster } from "react-hot-toast";
diff --git a/packages/app-store/exchange2016calendar/pages/setup/index.tsx b/packages/app-store/exchange2016calendar/pages/setup/index.tsx
index 273a28086a..866cbd48c5 100644
--- a/packages/app-store/exchange2016calendar/pages/setup/index.tsx
+++ b/packages/app-store/exchange2016calendar/pages/setup/index.tsx
@@ -1,4 +1,4 @@
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { Toaster } from "react-hot-toast";
diff --git a/packages/app-store/exchangecalendar/pages/setup/index.tsx b/packages/app-store/exchangecalendar/pages/setup/index.tsx
index f6c890cd44..6597cdc700 100644
--- a/packages/app-store/exchangecalendar/pages/setup/index.tsx
+++ b/packages/app-store/exchangecalendar/pages/setup/index.tsx
@@ -1,5 +1,5 @@
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { Toaster } from "react-hot-toast";
diff --git a/packages/app-store/routing-forms/components/FormActions.tsx b/packages/app-store/routing-forms/components/FormActions.tsx
index 10fcc42238..f12433ed79 100644
--- a/packages/app-store/routing-forms/components/FormActions.tsx
+++ b/packages/app-store/routing-forms/components/FormActions.tsx
@@ -1,9 +1,7 @@
 import type { App_RoutingForms_Form } from "@prisma/client";
-import type { NextRouter } from "next/router";
-import { useRouter } from "next/router";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { createContext, forwardRef, useContext, useState } from "react";
-import { useForm } from "react-hook-form";
-import { Controller } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 import { v4 as uuidv4 } from "uuid";
 import { z } from "zod";
 
@@ -11,6 +9,7 @@ import { useOrgBranding } from "@calcom/features/ee/organizations/context/provid
 import { classNames } from "@calcom/lib";
 import { CAL_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
 import { trpc } from "@calcom/trpc/react";
 import type { ButtonProps } from "@calcom/ui";
 import {
@@ -25,11 +24,11 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
   Form,
+  SettingsToggle,
   showToast,
   Switch,
   TextAreaField,
   TextField,
-  SettingsToggle,
 } from "@calcom/ui";
 import { MoreHorizontal } from "@calcom/ui/components/icon";
 
@@ -45,23 +44,23 @@ const newFormModalQuerySchema = z.object({
   target: z.string().optional(),
 });
 
-const openModal = (router: NextRouter, option: z.infer<typeof newFormModalQuerySchema>) => {
-  const query = {
-    ...router.query,
-    dialog: "new-form",
-    ...option,
+export const useOpenModal = () => {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const openModal = (option: z.infer<typeof newFormModalQuerySchema>) => {
+    const newQuery = new URLSearchParams(searchParams);
+    newQuery.set("dialog", "new-form");
+    Object.keys(option).forEach((key) => {
+      newQuery.set(key, option[key as keyof typeof option] || "");
+    });
+    router.push(`${pathname}?${newQuery.toString()}`);
   };
-  router.push(
-    {
-      pathname: router.pathname,
-      query,
-    },
-    undefined,
-    { shallow: true }
-  );
+  return openModal;
 };
 
 function NewFormDialog({ appUrl }: { appUrl: string }) {
+  const routerQuery = useRouterQuery();
   const { t } = useLocale();
   const router = useRouter();
   const utils = trpc.useContext();
@@ -84,7 +83,7 @@ function NewFormDialog({ appUrl }: { appUrl: string }) {
     shouldConnect: boolean;
   }>();
 
-  const { action, target } = router.query as z.infer<typeof newFormModalQuerySchema>;
+  const { action, target } = routerQuery as z.infer<typeof newFormModalQuerySchema>;
 
   const formToDuplicate = action === "duplicate" ? target : null;
   const teamId = action === "new" ? Number(target) : null;
@@ -158,7 +157,6 @@ function NewFormDialog({ appUrl }: { appUrl: string }) {
 }
 
 const dropdownCtx = createContext<{ dropdown: boolean }>({ dropdown: false });
-
 export const FormActionsDropdown = ({
   children,
   disabled,
@@ -196,6 +194,7 @@ function Dialogs({
   deleteDialogFormId: string | null;
 }) {
   const utils = trpc.useContext();
+  const router = useRouter();
   const { t } = useLocale();
   const deleteMutation = trpc.viewer.appRoutingForms.deleteForm.useMutation({
     onMutate: async ({ id: formId }) => {
@@ -216,6 +215,7 @@ function Dialogs({
     onSuccess: () => {
       showToast(t("form_deleted"), "success");
       setDeleteDialogOpen(false);
+      router.push(`${appUrl}/forms`);
     },
     onSettled: () => {
       utils.viewer.appRoutingForms.forms.invalidate();
@@ -412,7 +412,7 @@ export const FormAction = forwardRef(function FormAction<T extends typeof Button
   });
 
   const { t } = useLocale();
-  const router = useRouter();
+  const openModal = useOpenModal();
   const actionData: Record<
     FormActionType,
     ButtonProps & { as?: React.ElementType; render?: FormActionProps<unknown>["render"] }
@@ -427,7 +427,7 @@ export const FormAction = forwardRef(function FormAction<T extends typeof Button
       },
     },
     duplicate: {
-      onClick: () => openModal(router, { action: "duplicate", target: routingForm?.id }),
+      onClick: () => openModal({ action: "duplicate", target: routingForm?.id }),
     },
     embed: {
       as: EmbedButton,
@@ -446,7 +446,7 @@ export const FormAction = forwardRef(function FormAction<T extends typeof Button
       loading: _delete.isLoading,
     },
     create: {
-      onClick: () => createAction({ router, teamId: null }),
+      onClick: () => openModal({ action: "new", target: "" }),
     },
     copyRedirectUrl: {
       onClick: () => {
@@ -486,7 +486,6 @@ export const FormAction = forwardRef(function FormAction<T extends typeof Button
     ...action,
     ...(additionalProps as ButtonProps),
   } as ButtonProps & { render?: FormActionProps<unknown>["render"] };
-
   if (actionProps.render) {
     return actionProps.render({
       routingForm,
@@ -517,7 +516,3 @@ export const FormAction = forwardRef(function FormAction<T extends typeof Button
     </DropdownMenuItem>
   );
 });
-
-export const createAction = ({ router, teamId }: { router: NextRouter; teamId: number | null }) => {
-  openModal(router, { action: "new", target: teamId ? String(teamId) : "" });
-};
diff --git a/packages/app-store/routing-forms/pages/forms/[...appPages].tsx b/packages/app-store/routing-forms/pages/forms/[...appPages].tsx
index 54345f2012..9f7a7dca42 100644
--- a/packages/app-store/routing-forms/pages/forms/[...appPages].tsx
+++ b/packages/app-store/routing-forms/pages/forms/[...appPages].tsx
@@ -1,5 +1,4 @@
 // TODO: i18n
-import { useRouter } from "next/router";
 import { useEffect } from "react";
 import { useFormContext } from "react-hook-form";
 
@@ -14,6 +13,7 @@ import { WEBAPP_URL } from "@calcom/lib/constants";
 import useApp from "@calcom/lib/hooks/useApp";
 import { useHasPaidPlan } from "@calcom/lib/hooks/useHasPaidPlan";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
 import { trpc } from "@calcom/trpc/react";
 import type {
   AppGetServerSidePropsContext,
@@ -21,46 +21,54 @@ import type {
   AppSsrInit,
   AppUser,
 } from "@calcom/types/AppGetServerSideProps";
-import { Badge, ButtonGroup, EmptyScreen, List, ListLinkItem, Tooltip, Button } from "@calcom/ui";
-import { CreateButtonWithTeamsList } from "@calcom/ui";
 import {
-  GitMerge,
-  ExternalLink,
-  Link as LinkIcon,
-  Edit,
-  Download,
-  Code,
-  Copy,
-  Trash,
-  Menu,
-  MessageCircle,
-  FileText,
-  Shuffle,
+  Badge,
+  Button,
+  ButtonGroup,
+  CreateButtonWithTeamsList,
+  EmptyScreen,
+  List,
+  ListLinkItem,
+  Tooltip,
+} from "@calcom/ui";
+import {
   BarChart,
   CheckCircle,
+  Code,
+  Copy,
+  Download,
+  Edit,
+  ExternalLink,
+  FileText,
+  GitMerge,
+  Link as LinkIcon,
   Mail,
+  Menu,
+  MessageCircle,
+  Shuffle,
+  Trash,
 } from "@calcom/ui/components/icon";
 
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
 
 import {
-  createAction,
   FormAction,
   FormActionsDropdown,
   FormActionsProvider,
+  useOpenModal,
 } from "../../components/FormActions";
 import type { RoutingFormWithResponseCount } from "../../components/SingleForm";
 import { isFallbackRoute } from "../../lib/isFallbackRoute";
 
 function NewFormButton() {
   const { t } = useLocale();
-  const router = useRouter();
+  const openModal = useOpenModal();
   return (
     <CreateButtonWithTeamsList
       subtitle={t("create_routing_form_on").toUpperCase()}
       data-testid="new-routing-form"
       createFunction={(teamId) => {
-        createAction({ router, teamId: teamId ?? null });
+        openModal({ action: "new", target: teamId ? String(teamId) : "" });
       }}
     />
   );
@@ -68,17 +76,18 @@ function NewFormButton() {
 
 export default function RoutingForms({
   appUrl,
-}: inferSSRProps<typeof getServerSideProps> & { appUrl: string }) {
+}: inferSSRProps<typeof getServerSideProps> & {
+  appUrl: string;
+}) {
   const { t } = useLocale();
   const { hasPaidPlan } = useHasPaidPlan();
-  const router = useRouter();
-
+  const routerQuery = useRouterQuery();
   const hookForm = useFormContext<RoutingFormWithResponseCount>();
   useEffect(() => {
     hookForm.reset({});
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  const filters = getTeamsFiltersFromQuery(router.query);
+  const filters = getTeamsFiltersFromQuery(routerQuery);
 
   const queryRes = trpc.viewer.appRoutingForms.forms.useQuery({
     filters,
diff --git a/packages/app-store/routing-forms/pages/layout-handler/[...appPages].tsx b/packages/app-store/routing-forms/pages/layout-handler/[...appPages].tsx
index fd078c8b0b..778a4fd825 100644
--- a/packages/app-store/routing-forms/pages/layout-handler/[...appPages].tsx
+++ b/packages/app-store/routing-forms/pages/layout-handler/[...appPages].tsx
@@ -1,9 +1,9 @@
 import type { GetServerSidePropsContext } from "next";
-import type { NextRouter } from "next/router";
-import { useRouter } from "next/router";
+import type { AppProps as NextAppProps } from "next/app";
 import React from "react";
-import { useForm, FormProvider } from "react-hook-form";
+import { FormProvider, useForm } from "react-hook-form";
 
+import { useParamsWithFallback } from "@calcom/lib/hooks/useParamsWithFallback";
 import type { AppPrisma, AppSsrInit, AppUser } from "@calcom/types/AppGetServerSideProps";
 
 import type { AppProps } from "@lib/app-providers";
@@ -15,7 +15,7 @@ type Component = {
   default: React.ComponentType & Pick<AppProps["Component"], "getLayout">;
   getServerSideProps?: (context: GetServerSidePropsContext, ...rest: GetServerSidePropsRestArgs) => void;
 };
-const getComponent = (route: string | NextRouter): Component => {
+const getComponent = (route: string | NextAppProps["router"]): Component => {
   const defaultRoute = "forms";
   const routeKey =
     typeof route === "string" ? route || defaultRoute : route?.query?.pages?.[0] || defaultRoute;
@@ -23,9 +23,9 @@ const getComponent = (route: string | NextRouter): Component => {
 };
 
 export default function LayoutHandler(props: { [key: string]: unknown }) {
+  const params = useParamsWithFallback();
   const methods = useForm();
-  const router = useRouter();
-  const pageKey = router?.query?.pages?.[0] || "forms";
+  const pageKey = params?.pages?.[0] || "forms";
   const PageComponent = getComponent(pageKey).default;
   return (
     <FormProvider {...methods}>
@@ -34,7 +34,7 @@ export default function LayoutHandler(props: { [key: string]: unknown }) {
   );
 }
 
-LayoutHandler.getLayout = (page: React.ReactElement, router: NextRouter) => {
+LayoutHandler.getLayout = (page: React.ReactElement, router: NextAppProps["router"]) => {
   const component = getComponent(router).default;
   if (component && "getLayout" in component) {
     return component.getLayout?.(page, router);
diff --git a/packages/app-store/routing-forms/pages/routing-link/[...appPages].tsx b/packages/app-store/routing-forms/pages/routing-link/[...appPages].tsx
index 5d7c2035fe..e5be7f2703 100644
--- a/packages/app-store/routing-forms/pages/routing-link/[...appPages].tsx
+++ b/packages/app-store/routing-forms/pages/routing-link/[...appPages].tsx
@@ -1,5 +1,5 @@
 import Head from "next/head";
-import { useRouter } from "next/router";
+import { useRouter, useSearchParams } from "next/navigation";
 import type { FormEvent } from "react";
 import { useEffect, useRef, useState } from "react";
 import { Toaster } from "react-hot-toast";
@@ -295,14 +295,16 @@ export const getServerSideProps = async function getServerSideProps(
 };
 
 const usePrefilledResponse = (form: Props["form"]) => {
-  const router = useRouter();
-
+  const searchParams = useSearchParams();
   const prefillResponse: Response = {};
 
   // Prefill the form from query params
   form.fields?.forEach((field) => {
+    const valuesFromQuery = searchParams?.getAll(getFieldIdentifier(field)).filter(Boolean);
+    // We only want to keep arrays if the field is a multi-select
+    const value = valuesFromQuery.length > 1 ? valuesFromQuery : valuesFromQuery[0];
     prefillResponse[field.id] = {
-      value: router.query[getFieldIdentifier(field)] || "",
+      value: value || "",
       label: field.label,
     };
   });
diff --git a/packages/app-store/sendgrid/pages/setup/index.tsx b/packages/app-store/sendgrid/pages/setup/index.tsx
index 87d0986fb9..010d447d77 100644
--- a/packages/app-store/sendgrid/pages/setup/index.tsx
+++ b/packages/app-store/sendgrid/pages/setup/index.tsx
@@ -1,5 +1,5 @@
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { Toaster } from "react-hot-toast";
diff --git a/packages/app-store/stripepayment/components/EventTypeAppCardInterface.tsx b/packages/app-store/stripepayment/components/EventTypeAppCardInterface.tsx
index 972d68bb19..5d836866e7 100644
--- a/packages/app-store/stripepayment/components/EventTypeAppCardInterface.tsx
+++ b/packages/app-store/stripepayment/components/EventTypeAppCardInterface.tsx
@@ -1,4 +1,4 @@
-import { useRouter } from "next/router";
+import { usePathname } from "next/navigation";
 
 import { useAppContextWithSchema } from "@calcom/app-store/EventTypeAppContext";
 import AppCard from "@calcom/app-store/_components/AppCard";
@@ -6,7 +6,7 @@ import useIsAppEnabled from "@calcom/app-store/_utils/useIsAppEnabled";
 import type { EventTypeAppCardComponent } from "@calcom/app-store/types";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Alert, TextField, Select } from "@calcom/ui";
+import { Alert, Select, TextField } from "@calcom/ui";
 
 import { paymentOptions } from "../lib/constants";
 import type { appDataSchema } from "../zod";
@@ -14,7 +14,7 @@ import type { appDataSchema } from "../zod";
 type Option = { value: string; label: string };
 
 const EventTypeAppCard: EventTypeAppCardComponent = function EventTypeAppCard({ app, eventType }) {
-  const { asPath } = useRouter();
+  const pathname = usePathname();
   const [getAppData, setAppData, LockedIcon, disabled] = useAppContextWithSchema<typeof appDataSchema>();
   const price = getAppData("price");
   const currency = getAppData("currency");
@@ -37,7 +37,7 @@ const EventTypeAppCard: EventTypeAppCardComponent = function EventTypeAppCard({
       .trim();
   return (
     <AppCard
-      returnTo={WEBAPP_URL + asPath}
+      returnTo={WEBAPP_URL + pathname}
       setAppData={setAppData}
       app={app}
       disableSwitch={disabled}
diff --git a/packages/embeds/embed-core/src/embed-iframe.ts b/packages/embeds/embed-core/src/embed-iframe.ts
index 12f7658719..28aad1d821 100644
--- a/packages/embeds/embed-core/src/embed-iframe.ts
+++ b/packages/embeds/embed-core/src/embed-iframe.ts
@@ -1,6 +1,6 @@
-import { useRouter } from "next/router";
+import { useSearchParams } from "next/navigation";
 import type { CSSProperties } from "react";
-import { useState, useEffect } from "react";
+import { useEffect, useRef, useState, useCallback } from "react";
 
 import type { Message } from "./embed";
 import { sdkActionManager } from "./sdk-event";
@@ -177,14 +177,35 @@ function isValidNamespace(ns: string | null | undefined) {
   return typeof ns !== "undefined" && ns !== null;
 }
 
-export const useEmbedTheme = () => {
-  const router = useRouter();
-  const [theme, setTheme] = useState(embedStore.theme || (router.query.theme as typeof embedStore.theme));
+/**
+ * It handles any URL change done through Web history API as well
+ * History API is currenty being used by Booker/utils/query-param
+ */
+const useUrlChange = (callback: (newUrl: string) => void) => {
+  const currentFullUrl = isBrowser ? new URL(document.URL) : null;
+  const pathname = currentFullUrl?.pathname ?? "";
+  const searchParams = currentFullUrl?.searchParams ?? null;
+  const lastKnownUrl = useRef(`${pathname}?${searchParams}`);
   useEffect(() => {
-    router.events.on("routeChangeComplete", () => {
-      sdkActionManager?.fire("__routeChanged", {});
-    });
-  }, [router.events]);
+    const newUrl = `${pathname}?${searchParams}`;
+    if (lastKnownUrl.current !== newUrl) {
+      lastKnownUrl.current = newUrl;
+      callback(newUrl);
+    }
+  }, [pathname, searchParams, callback]);
+};
+
+export const useEmbedTheme = () => {
+  const searchParams = useSearchParams();
+  const [theme, setTheme] = useState(
+    embedStore.theme || (searchParams?.get("theme") as typeof embedStore.theme)
+  );
+
+  const onUrlChange = useCallback(() => {
+    sdkActionManager?.fire("__routeChanged", {});
+  }, []);
+  useUrlChange(onUrlChange);
+
   embedStore.setTheme = setTheme;
   return theme;
 };
@@ -363,7 +384,6 @@ const methods = {
 };
 
 export type InterfaceWithParent = {
-  // Ensure that only one argument is read by the method
   [key in keyof typeof methods]: (firstAndOnlyArg: Parameters<(typeof methods)[key]>[number]) => void;
 };
 
diff --git a/packages/features/apps/AdminAppsList.tsx b/packages/features/apps/AdminAppsList.tsx
index 927b26def6..51f7d30c55 100644
--- a/packages/features/apps/AdminAppsList.tsx
+++ b/packages/features/apps/AdminAppsList.tsx
@@ -1,6 +1,6 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { noop } from "lodash";
-import { useRouter } from "next/router";
+import { useSearchParams } from "next/navigation";
 import type { FC } from "react";
 import { useReducer, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
@@ -27,8 +27,8 @@ import {
   SkeletonButton,
   SkeletonContainer,
   SkeletonText,
-  TextField,
   Switch,
+  TextField,
 } from "@calcom/ui";
 import { AlertCircle, Edit } from "@calcom/ui/components/icon";
 
@@ -265,13 +265,13 @@ interface EditModalState extends Pick<App, "keys"> {
 }
 
 const AdminAppsListContainer = () => {
+  const searchParams = useSearchParams();
   const { t } = useLocale();
-  const router = useRouter();
-  const { category } = querySchema.parse(router.query);
+  const category = searchParams.get("category") || AppCategories.calendar;
 
   const { data: apps, isLoading } = trpc.viewer.appsRouter.listLocal.useQuery(
     { category },
-    { enabled: router.isReady }
+    { enabled: searchParams !== null }
   );
 
   const [modalState, setModalState] = useReducer(
diff --git a/packages/features/apps/components/DisconnectIntegration.tsx b/packages/features/apps/components/DisconnectIntegration.tsx
index fc071e5d62..c955f7403c 100644
--- a/packages/features/apps/components/DisconnectIntegration.tsx
+++ b/packages/features/apps/components/DisconnectIntegration.tsx
@@ -3,13 +3,7 @@ import { useState } from "react";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import type { ButtonProps } from "@calcom/ui";
-import {
-  Button,
-  ConfirmationDialogContent,
-  Dialog,
-  DialogTrigger,
-  showToast,
-} from "@calcom/ui";
+import { Button, ConfirmationDialogContent, Dialog, DialogTrigger, showToast } from "@calcom/ui";
 import { Trash } from "@calcom/ui/components/icon";
 
 export default function DisconnectIntegration({
diff --git a/packages/features/bookings/Booker/components/BookEventForm/BookEventForm.tsx b/packages/features/bookings/Booker/components/BookEventForm/BookEventForm.tsx
index 5e8700ee9b..31886fddaf 100644
--- a/packages/features/bookings/Booker/components/BookEventForm/BookEventForm.tsx
+++ b/packages/features/bookings/Booker/components/BookEventForm/BookEventForm.tsx
@@ -3,7 +3,7 @@ import type { UseMutationResult } from "@tanstack/react-query";
 import { useMutation } from "@tanstack/react-query";
 import { useSession } from "next-auth/react";
 import type { TFunction } from "next-i18next";
-import { useRouter } from "next/router";
+import { useRouter, useSearchParams } from "next/navigation";
 import { useEffect, useMemo, useRef, useState } from "react";
 import type { FieldError } from "react-hook-form";
 import { useForm } from "react-hook-form";
@@ -14,23 +14,24 @@ import { createPaymentLink } from "@calcom/app-store/stripepayment/lib/client";
 import dayjs from "@calcom/dayjs";
 import { VerifyCodeDialog } from "@calcom/features/bookings/components/VerifyCodeDialog";
 import {
-  useTimePreferences,
-  mapBookingToMutationInput,
   createBooking,
   createRecurringBooking,
+  mapBookingToMutationInput,
   mapRecurringBookingToMutationInput,
+  useTimePreferences,
 } from "@calcom/features/bookings/lib";
 import { getBookingFieldsWithSystemFields } from "@calcom/features/bookings/lib/getBookingFields";
 import getBookingResponsesSchema, {
   getBookingResponsesPartialSchema,
 } from "@calcom/features/bookings/lib/getBookingResponsesSchema";
 import { getFullName } from "@calcom/features/form-builder/utils";
-import { bookingSuccessRedirect } from "@calcom/lib/bookingSuccessRedirect";
+import { useBookingSuccessRedirect } from "@calcom/lib/bookingSuccessRedirect";
 import { MINUTES_TO_BOOK } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
 import { HttpError } from "@calcom/lib/http-error";
 import { trpc } from "@calcom/trpc";
-import { Form, Button, Alert, EmptyScreen, showToast } from "@calcom/ui";
+import { Alert, Button, EmptyScreen, Form, showToast } from "@calcom/ui";
 import { Calendar } from "@calcom/ui/components/icon";
 
 import { useBookerStore } from "../../store";
@@ -43,7 +44,10 @@ type BookEventFormProps = {
 };
 
 export const BookEventForm = ({ onCancel }: BookEventFormProps) => {
+  const searchParams = useSearchParams();
+  const routerQuery = useRouterQuery();
   const session = useSession();
+  const bookingSuccessRedirect = useBookingSuccessRedirect();
   const reserveSlotMutation = trpc.viewer.public.slots.reserveSlot.useMutation({
     trpc: { context: { skipBatch: true } },
   });
@@ -113,10 +117,10 @@ export const BookEventForm = ({ onCancel }: BookEventFormProps) => {
     });
 
     const parsedQuery = querySchema.parse({
-      ...router.query,
+      ...routerQuery,
       // `guest` because we need to support legacy URL with `guest` query param support
       // `guests` because the `name` of the corresponding bookingField is `guests`
-      guests: router.query.guests || router.query.guest,
+      guests: searchParams?.getAll("guests") || searchParams?.getAll("guest"),
     });
 
     const defaultUserValues = {
@@ -204,11 +208,11 @@ export const BookEventForm = ({ onCancel }: BookEventFormProps) => {
   });
 
   const createBookingMutation = useMutation(createBooking, {
-    onSuccess: async (responseData) => {
+    onSuccess: (responseData) => {
       const { uid, paymentUid } = responseData;
       const fullName = getFullName(bookingForm.getValues("responses.name"));
       if (paymentUid) {
-        return await router.push(
+        return router.push(
           createPaymentLink({
             paymentUid,
             date: timeslot,
@@ -234,7 +238,6 @@ export const BookEventForm = ({ onCancel }: BookEventFormProps) => {
       };
 
       return bookingSuccessRedirect({
-        router,
         successRedirectUrl: eventType?.successRedirectUrl || "",
         query,
         bookingUid: uid,
@@ -264,7 +267,6 @@ export const BookEventForm = ({ onCancel }: BookEventFormProps) => {
       };
 
       return bookingSuccessRedirect({
-        router,
         successRedirectUrl: eventType?.successRedirectUrl || "",
         query,
         bookingUid: uid,
@@ -347,12 +349,12 @@ export const BookEventForm = ({ onCancel }: BookEventFormProps) => {
       rescheduleUid: rescheduleUid || undefined,
       bookingUid: (bookingData && bookingData.uid) || seatedEventData?.bookingUid || undefined,
       username: username || "",
-      metadata: Object.keys(router.query)
+      metadata: Object.keys(routerQuery)
         .filter((key) => key.startsWith("metadata"))
         .reduce(
           (metadata, key) => ({
             ...metadata,
-            [key.substring("metadata[".length, key.length - 1)]: router.query[key],
+            [key.substring("metadata[".length, key.length - 1)]: searchParams?.get(key),
           }),
           {}
         ),
@@ -368,7 +370,7 @@ export const BookEventForm = ({ onCancel }: BookEventFormProps) => {
   };
 
   if (!eventType) {
-    console.warn("No event type found for event", router.query);
+    console.warn("No event type found for event", routerQuery);
     return <Alert severity="warning" message={t("error_booking_event")} />;
   }
 
diff --git a/apps/web/components/booking/AvailableEventLocations.tsx b/packages/features/bookings/components/event-meta/AvailableEventLocations.tsx
similarity index 100%
rename from apps/web/components/booking/AvailableEventLocations.tsx
rename to packages/features/bookings/components/event-meta/AvailableEventLocations.tsx
diff --git a/packages/features/bookings/components/event-meta/Details.tsx b/packages/features/bookings/components/event-meta/Details.tsx
index 933c54be06..997bfeaadd 100644
--- a/packages/features/bookings/components/event-meta/Details.tsx
+++ b/packages/features/bookings/components/event-meta/Details.tsx
@@ -5,10 +5,10 @@ import classNames from "@calcom/lib/classNames";
 import getPaymentAppData from "@calcom/lib/getPaymentAppData";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Clock, CheckSquare, RefreshCcw, CreditCard } from "@calcom/ui/components/icon";
-import { AvailableEventLocations } from "@calcom/web/components/booking/AvailableEventLocations";
 
 import type { PublicEvent } from "../../types";
 import { EventDetailBlocks } from "../../types";
+import { AvailableEventLocations } from "./AvailableEventLocations";
 import { EventDuration } from "./Duration";
 import { EventOccurences } from "./Occurences";
 import { EventPrice } from "./Price";
diff --git a/packages/features/ee/organizations/components/AboutOrganizationForm.tsx b/packages/features/ee/organizations/components/AboutOrganizationForm.tsx
index 24ee3218b3..57500159fc 100644
--- a/packages/features/ee/organizations/components/AboutOrganizationForm.tsx
+++ b/packages/features/ee/organizations/components/AboutOrganizationForm.tsx
@@ -1,11 +1,12 @@
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import z from "zod";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
 import { trpc } from "@calcom/trpc/react";
-import { Avatar, Button, Form, ImageUploader, Alert, Label, TextAreaField } from "@calcom/ui";
+import { Alert, Avatar, Button, Form, ImageUploader, Label, TextAreaField } from "@calcom/ui";
 import { ArrowRight, Plus } from "@calcom/ui/components/icon";
 
 const querySchema = z.object({
@@ -15,7 +16,8 @@ const querySchema = z.object({
 export const AboutOrganizationForm = () => {
   const { t } = useLocale();
   const router = useRouter();
-  const { id: orgId } = querySchema.parse(router.query);
+  const routerQuery = useRouterQuery();
+  const { id: orgId } = querySchema.parse(routerQuery);
   const [serverErrorMessage, setServerErrorMessage] = useState<string | null>(null);
   const [image, setImage] = useState("");
 
diff --git a/packages/features/ee/organizations/components/AddNewOrgAdminsForm.tsx b/packages/features/ee/organizations/components/AddNewOrgAdminsForm.tsx
index 40e52e0e0a..a8a4bcf40c 100644
--- a/packages/features/ee/organizations/components/AddNewOrgAdminsForm.tsx
+++ b/packages/features/ee/organizations/components/AddNewOrgAdminsForm.tsx
@@ -1,12 +1,13 @@
 import { ArrowRight } from "lucide-react";
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import { Controller, useForm } from "react-hook-form";
 import { z } from "zod";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
 import { MembershipRole } from "@calcom/prisma/enums";
 import { trpc } from "@calcom/trpc/react";
-import { Button, showToast, TextAreaField, Form } from "@calcom/ui";
+import { Button, Form, showToast, TextAreaField } from "@calcom/ui";
 
 const querySchema = z.object({
   id: z.string().transform((val) => parseInt(val)),
@@ -15,7 +16,8 @@ const querySchema = z.object({
 export const AddNewOrgAdminsForm = () => {
   const { t, i18n } = useLocale();
   const router = useRouter();
-  const { id: orgId } = querySchema.parse(router.query);
+  const routerQuery = useRouterQuery();
+  const { id: orgId } = querySchema.parse(routerQuery);
   const newAdminsFormMethods = useForm<{
     emails: string[];
   }>();
diff --git a/packages/features/ee/organizations/components/AddNewTeamsForm.tsx b/packages/features/ee/organizations/components/AddNewTeamsForm.tsx
index 299eeee559..0a12b701c8 100644
--- a/packages/features/ee/organizations/components/AddNewTeamsForm.tsx
+++ b/packages/features/ee/organizations/components/AddNewTeamsForm.tsx
@@ -1,13 +1,14 @@
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import { useState } from "react";
-import { useForm, useFieldArray } from "react-hook-form";
+import { useFieldArray, useForm } from "react-hook-form";
 import { z } from "zod";
 
 import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
 import { trpc } from "@calcom/trpc/react";
 import { Button, showToast, TextField } from "@calcom/ui";
-import { Plus, X, ArrowRight } from "@calcom/ui/components/icon";
+import { ArrowRight, Plus, X } from "@calcom/ui/components/icon";
 
 const querySchema = z.object({
   id: z.string().transform((val) => parseInt(val)),
@@ -26,7 +27,8 @@ const schema = z.object({
 export const AddNewTeamsForm = () => {
   const { t } = useLocale();
   const router = useRouter();
-  const { id: orgId } = querySchema.parse(router.query);
+  const routerQuery = useRouterQuery();
+  const { id: orgId } = querySchema.parse(routerQuery);
   const [counter, setCounter] = useState(1);
 
   const { register, control, handleSubmit, formState, trigger, setValue, getValues } = useForm({
diff --git a/packages/features/ee/organizations/components/CreateANewOrganizationForm.tsx b/packages/features/ee/organizations/components/CreateANewOrganizationForm.tsx
index 989db7d408..955778a996 100644
--- a/packages/features/ee/organizations/components/CreateANewOrganizationForm.tsx
+++ b/packages/features/ee/organizations/components/CreateANewOrganizationForm.tsx
@@ -1,5 +1,5 @@
 import { signIn } from "next-auth/react";
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 
diff --git a/packages/features/ee/organizations/components/OrgUpgradeBanner.tsx b/packages/features/ee/organizations/components/OrgUpgradeBanner.tsx
index 9b9a18e5ad..b3c2dd2dc6 100644
--- a/packages/features/ee/organizations/components/OrgUpgradeBanner.tsx
+++ b/packages/features/ee/organizations/components/OrgUpgradeBanner.tsx
@@ -1,4 +1,4 @@
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
diff --git a/packages/features/ee/organizations/components/SetPasswordForm.tsx b/packages/features/ee/organizations/components/SetPasswordForm.tsx
index 29f721f67a..6511da927e 100644
--- a/packages/features/ee/organizations/components/SetPasswordForm.tsx
+++ b/packages/features/ee/organizations/components/SetPasswordForm.tsx
@@ -1,13 +1,14 @@
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { z } from "zod";
 
 import { isPasswordValid } from "@calcom/features/auth/lib/isPasswordValid";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
 import { trpc } from "@calcom/trpc/react";
-import { Button, Form, Alert, PasswordField } from "@calcom/ui";
+import { Alert, Button, Form, PasswordField } from "@calcom/ui";
 import { ArrowRight } from "@calcom/ui/components/icon";
 
 const querySchema = z.object({
@@ -33,7 +34,8 @@ const formSchema = z.object({
 export const SetPasswordForm = () => {
   const { t } = useLocale();
   const router = useRouter();
-  const { id: orgId } = querySchema.parse(router.query);
+  const routerQuery = useRouterQuery();
+  const { id: orgId } = querySchema.parse(routerQuery);
 
   const [serverErrorMessage, setServerErrorMessage] = useState<string | null>(null);
 
diff --git a/packages/features/ee/organizations/pages/settings/appearance.tsx b/packages/features/ee/organizations/pages/settings/appearance.tsx
index eba88f035b..fcc5c860e2 100644
--- a/packages/features/ee/organizations/pages/settings/appearance.tsx
+++ b/packages/features/ee/organizations/pages/settings/appearance.tsx
@@ -1,4 +1,4 @@
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import { Controller, useForm } from "react-hook-form";
 
 import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
diff --git a/packages/features/ee/organizations/pages/settings/general.tsx b/packages/features/ee/organizations/pages/settings/general.tsx
index f6d7b6c613..c0be3c1c3f 100644
--- a/packages/features/ee/organizations/pages/settings/general.tsx
+++ b/packages/features/ee/organizations/pages/settings/general.tsx
@@ -1,4 +1,4 @@
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import { Controller, useForm } from "react-hook-form";
 
 import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
diff --git a/packages/features/ee/organizations/pages/settings/profile.tsx b/packages/features/ee/organizations/pages/settings/profile.tsx
index 0a111aa9f5..8a3ef50de5 100644
--- a/packages/features/ee/organizations/pages/settings/profile.tsx
+++ b/packages/features/ee/organizations/pages/settings/profile.tsx
@@ -1,7 +1,7 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import type { Prisma } from "@prisma/client";
 import { LinkIcon } from "lucide-react";
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import { useState, useLayoutEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { z } from "zod";
@@ -223,24 +223,24 @@ const OrgProfileView = () => {
             </div>
           )}
           {/* Disable Org disbanding */}
-          {/* <hr className="border-subtle my-8 border" /> 
-           <div className="text-default mb-3 text-base font-semibold">{t("danger_zone")}</div>
-          {currentOrganisation?.user.role === "OWNER" ? (
-            <Dialog>
-              <DialogTrigger asChild>
-                <Button color="destructive" className="border" StartIcon={Trash2}>
-                  {t("disband_org")}
-                </Button>
-              </DialogTrigger>
-              <ConfirmationDialogContent
-                variety="danger"
-                title={t("disband_org")}
-                confirmBtnText={t("confirm")}
-                onConfirm={deleteTeam}>
-                {t("disband_org_confirmation_message")}
-              </ConfirmationDialogContent>
-            </Dialog>
-          ) : null} */}
+          {/* <hr className="border-subtle my-8 border" />
+             <div className="text-default mb-3 text-base font-semibold">{t("danger_zone")}</div>
+            {currentOrganisation?.user.role === "OWNER" ? (
+              <Dialog>
+                <DialogTrigger asChild>
+                  <Button color="destructive" className="border" StartIcon={Trash2}>
+                    {t("disband_org")}
+                  </Button>
+                </DialogTrigger>
+                <ConfirmationDialogContent
+                  variety="danger"
+                  title={t("disband_org")}
+                  confirmBtnText={t("confirm")}
+                  onConfirm={deleteTeam}>
+                  {t("disband_org_confirmation_message")}
+                </ConfirmationDialogContent>
+              </Dialog>
+            ) : null} */}
           {/* LEAVE ORG should go above here ^ */}
         </>
       )}
diff --git a/packages/features/ee/payments/components/Payment.tsx b/packages/features/ee/payments/components/Payment.tsx
index 09b66a5504..cfe0f74be4 100644
--- a/packages/features/ee/payments/components/Payment.tsx
+++ b/packages/features/ee/payments/components/Payment.tsx
@@ -1,14 +1,14 @@
 import type { Payment } from "@prisma/client";
-import { useElements, useStripe, PaymentElement, Elements } from "@stripe/react-stripe-js";
+import { Elements, PaymentElement, useElements, useStripe } from "@stripe/react-stripe-js";
 import type stripejs from "@stripe/stripe-js";
 import type { StripeElementLocale } from "@stripe/stripe-js";
-import { useRouter } from "next/router";
+import { useRouter, useSearchParams } from "next/navigation";
 import type { SyntheticEvent } from "react";
 import { useEffect, useState } from "react";
 
 import getStripe from "@calcom/app-store/stripepayment/lib/client";
 import type { StripePaymentData, StripeSetupIntentData } from "@calcom/app-store/stripepayment/lib/server";
-import { bookingSuccessRedirect } from "@calcom/lib/bookingSuccessRedirect";
+import { useBookingSuccessRedirect } from "@calcom/lib/bookingSuccessRedirect";
 import { CAL_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, CheckboxField } from "@calcom/ui";
@@ -35,11 +35,13 @@ type States =
 const PaymentForm = (props: Props) => {
   const { t, i18n } = useLocale();
   const router = useRouter();
+  const searchParams = useSearchParams();
   const [state, setState] = useState<States>({ status: "idle" });
   const stripe = useStripe();
   const elements = useElements();
   const paymentOption = props.payment.paymentOption;
   const [holdAcknowledged, setHoldAcknowledged] = useState<boolean>(paymentOption === "HOLD" ? false : true);
+  const bookingSuccessRedirect = useBookingSuccessRedirect();
 
   useEffect(() => {
     elements?.update({ locale: i18n.language as StripeElementLocale });
@@ -48,13 +50,13 @@ const PaymentForm = (props: Props) => {
   const handleSubmit = async (ev: SyntheticEvent) => {
     ev.preventDefault();
 
-    if (!stripe || !elements || !router.isReady) return;
+    if (!stripe || !elements) return;
     setState({ status: "processing" });
 
     let payload;
     const params: { [k: string]: any } = {
       uid: props.bookingUid,
-      email: router.query.email,
+      email: searchParams.get("email"),
     };
     if (paymentOption === "HOLD" && "setupIntent" in props.payment.data) {
       payload = await stripe.confirmSetup({
@@ -86,7 +88,6 @@ const PaymentForm = (props: Props) => {
       }
 
       return bookingSuccessRedirect({
-        router,
         successRedirectUrl: props.eventType.successRedirectUrl,
         query: params,
         bookingUid: props.bookingUid,
diff --git a/packages/features/ee/sso/page/teams-sso-view.tsx b/packages/features/ee/sso/page/teams-sso-view.tsx
index fb74262dde..26ab7d0a36 100644
--- a/packages/features/ee/sso/page/teams-sso-view.tsx
+++ b/packages/features/ee/sso/page/teams-sso-view.tsx
@@ -1,20 +1,21 @@
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import { useEffect } from "react";
 
 import { HOSTED_CAL_FEATURES } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { useParamsWithFallback } from "@calcom/lib/hooks/useParamsWithFallback";
 import { trpc } from "@calcom/trpc/react";
-import { AppSkeletonLoader as SkeletonLoader } from "@calcom/ui";
-import { Meta } from "@calcom/ui";
+import { AppSkeletonLoader as SkeletonLoader, Meta } from "@calcom/ui";
 
 import { getLayout } from "../../../settings/layouts/SettingsLayout";
 import SSOConfiguration from "../components/SSOConfiguration";
 
 const SAMLSSO = () => {
+  const params = useParamsWithFallback();
   const { t } = useLocale();
   const router = useRouter();
 
-  const teamId = Number(router.query.id);
+  const teamId = Number(params.id);
 
   const { data: team, isLoading } = trpc.viewer.teams.get.useQuery(
     { teamId },
diff --git a/packages/features/ee/sso/page/user-sso-view.tsx b/packages/features/ee/sso/page/user-sso-view.tsx
index 2efe499355..b3f0ac9ef1 100644
--- a/packages/features/ee/sso/page/user-sso-view.tsx
+++ b/packages/features/ee/sso/page/user-sso-view.tsx
@@ -1,4 +1,4 @@
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import { useEffect } from "react";
 
 import { HOSTED_CAL_FEATURES } from "@calcom/lib/constants";
diff --git a/packages/features/ee/teams/components/AddNewTeamMembers.tsx b/packages/features/ee/teams/components/AddNewTeamMembers.tsx
index c8e5ba3d10..1acfa756e2 100644
--- a/packages/features/ee/teams/components/AddNewTeamMembers.tsx
+++ b/packages/features/ee/teams/components/AddNewTeamMembers.tsx
@@ -1,5 +1,5 @@
 import { useSession } from "next-auth/react";
-import { useRouter } from "next/router";
+import { useRouter, useSearchParams } from "next/navigation";
 import { useState } from "react";
 import { z } from "zod";
 
@@ -33,10 +33,13 @@ type FormValues = {
 };
 
 const AddNewTeamMembers = () => {
+  const searchParams = useSearchParams();
   const session = useSession();
-  const router = useRouter();
-  const { id: teamId } = router.isReady ? querySchema.parse(router.query) : { id: -1 };
-  const teamQuery = trpc.viewer.teams.get.useQuery({ teamId }, { enabled: router.isReady });
+  const teamId = searchParams?.get("id") ? Number(searchParams.get("id")) : -1;
+  const teamQuery = trpc.viewer.teams.get.useQuery(
+    { teamId },
+    { enabled: session.status === "authenticated" }
+  );
   if (session.status === "loading" || !teamQuery.data) return <AddNewTeamMemberSkeleton />;
 
   return <AddNewTeamMembersForm defaultValues={{ members: teamQuery.data.members }} teamId={teamId} />;
@@ -49,16 +52,17 @@ export const AddNewTeamMembersForm = ({
   defaultValues: FormValues;
   teamId: number;
 }) => {
+  const searchParams = useSearchParams();
   const { t, i18n } = useLocale();
 
   const router = useRouter();
   const utils = trpc.useContext();
 
-  const showDialog = router.query.inviteModal === "true";
+  const showDialog = searchParams?.get("inviteModal") === "true";
   const [memberInviteModal, setMemberInviteModal] = useState(showDialog);
   const [inviteLinkSettingsModal, setInviteLinkSettingsModal] = useState(false);
 
-  const { data: team, isLoading } = trpc.viewer.teams.get.useQuery({ teamId });
+  const { data: team, isLoading } = trpc.viewer.teams.get.useQuery({ teamId }, { enabled: !!teamId });
 
   const inviteMemberMutation = trpc.viewer.teams.inviteMember.useMutation();
 
diff --git a/packages/features/ee/teams/components/CreateANewTeamForm.tsx b/packages/features/ee/teams/components/CreateANewTeamForm.tsx
index 2c32d8ead1..1a766c1aea 100644
--- a/packages/features/ee/teams/components/CreateANewTeamForm.tsx
+++ b/packages/features/ee/teams/components/CreateANewTeamForm.tsx
@@ -1,4 +1,4 @@
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { z } from "zod";
@@ -6,6 +6,7 @@ import { z } from "zod";
 import { extractDomainFromWebsiteUrl } from "@calcom/ee/organizations/lib/utils";
 import { getSafeRedirectUrl } from "@calcom/lib/getSafeRedirectUrl";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { useParamsWithFallback } from "@calcom/lib/hooks/useParamsWithFallback";
 import slugify from "@calcom/lib/slugify";
 import { telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { trpc } from "@calcom/trpc/react";
@@ -24,7 +25,8 @@ export const CreateANewTeamForm = () => {
   const { t } = useLocale();
   const router = useRouter();
   const telemetry = useTelemetry();
-  const parsedQuery = querySchema.safeParse(router.query);
+  const params = useParamsWithFallback();
+  const parsedQuery = querySchema.safeParse(params);
   const [serverErrorMessage, setServerErrorMessage] = useState<string | null>(null);
   const orgBranding = useOrgBranding();
 
diff --git a/packages/features/ee/teams/components/GoogleWorkspaceInviteButton.tsx b/packages/features/ee/teams/components/GoogleWorkspaceInviteButton.tsx
index 1c14fe4659..67e5b8af0a 100644
--- a/packages/features/ee/teams/components/GoogleWorkspaceInviteButton.tsx
+++ b/packages/features/ee/teams/components/GoogleWorkspaceInviteButton.tsx
@@ -1,12 +1,12 @@
 import { UsersIcon, XIcon } from "lucide-react";
-import { useRouter } from "next/router";
-import { useState } from "react";
 import type { PropsWithChildren } from "react";
+import { useState } from "react";
 
 import { useFlagMap } from "@calcom/features/flags/context/provider";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { useParamsWithFallback } from "@calcom/lib/hooks/useParamsWithFallback";
 import { trpc } from "@calcom/trpc";
-import { Button, Tooltip, showToast } from "@calcom/ui";
+import { Button, showToast, Tooltip } from "@calcom/ui";
 
 const GoogleIcon = () => (
   <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -35,11 +35,11 @@ function gotoUrl(url: string, newTab?: boolean) {
 export function GoogleWorkspaceInviteButton(
   props: PropsWithChildren<{ onSuccess: (data: string[]) => void }>
 ) {
-  const router = useRouter();
   const featureFlags = useFlagMap();
   const utils = trpc.useContext();
   const { t } = useLocale();
-  const teamId = Number(router.query.id);
+  const params = useParamsWithFallback();
+  const teamId = Number(params.id);
   const [googleWorkspaceLoading, setGoogleWorkspaceLoading] = useState(false);
   const { data: credential } = trpc.viewer.googleWorkspace.checkForGWorkspace.useQuery();
   const { data: hasGcalInstalled } = trpc.viewer.appsRouter.checkGlobalKeys.useQuery({
diff --git a/packages/features/ee/teams/components/TeamListItem.tsx b/packages/features/ee/teams/components/TeamListItem.tsx
index e80da3a9f8..290795d69e 100644
--- a/packages/features/ee/teams/components/TeamListItem.tsx
+++ b/packages/features/ee/teams/components/TeamListItem.tsx
@@ -1,5 +1,6 @@
 import Link from "next/link";
-import { useRouter } from "next/router";
+import { useSearchParams } from "next/navigation";
+import { useRouter } from "next/navigation";
 import { useState } from "react";
 
 import InviteLinkSettingsModal from "@calcom/ee/teams/components/InviteLinkSettingsModal";
@@ -52,13 +53,12 @@ interface Props {
 }
 
 export default function TeamListItem(props: Props) {
+  const searchParams = useSearchParams();
   const { t, i18n } = useLocale();
-
-  const router = useRouter();
   const utils = trpc.useContext();
   const team = props.team;
 
-  const showDialog = router.query.inviteModal === "true";
+  const showDialog = searchParams?.get("inviteModal") === "true";
   const [openMemberInvitationModal, setOpenMemberInvitationModal] = useState(showDialog);
   const [openInviteLinkSettingsModal, setOpenInviteLinkSettingsModal] = useState(false);
 
diff --git a/packages/features/ee/teams/components/TeamsListing.tsx b/packages/features/ee/teams/components/TeamsListing.tsx
index af2be89dc0..12613a90a8 100644
--- a/packages/features/ee/teams/components/TeamsListing.tsx
+++ b/packages/features/ee/teams/components/TeamsListing.tsx
@@ -1,4 +1,4 @@
-import { useRouter } from "next/router";
+import { useRouter, useSearchParams } from "next/navigation";
 import { useEffect, useMemo, useState } from "react";
 
 import { APP_NAME, WEBAPP_URL } from "@calcom/lib/constants";
@@ -12,6 +12,8 @@ import SkeletonLoaderTeamList from "./SkeletonloaderTeamList";
 import TeamList from "./TeamList";
 
 export function TeamsListing() {
+  const searchParams = useSearchParams();
+  const token = searchParams?.get("token");
   const { t } = useLocale();
   const trpcContext = trpc.useContext();
   const router = useRouter();
@@ -79,9 +81,9 @@ export function TeamsListing() {
 
   useEffect(() => {
     if (!router) return;
-    if (router.query.token) inviteMemberByToken({ token: router.query.token as string });
+    if (token) inviteMemberByToken({ token });
     else setInviteTokenChecked(true);
-  }, [router, inviteMemberByToken, setInviteTokenChecked]);
+  }, [router, inviteMemberByToken, setInviteTokenChecked, token]);
 
   if (isLoading || !inviteTokenChecked) {
     return <SkeletonLoaderTeamList />;
diff --git a/packages/features/ee/teams/components/TeamsUpgradeBanner.tsx b/packages/features/ee/teams/components/TeamsUpgradeBanner.tsx
index 80d4458c07..58441a6337 100644
--- a/packages/features/ee/teams/components/TeamsUpgradeBanner.tsx
+++ b/packages/features/ee/teams/components/TeamsUpgradeBanner.tsx
@@ -1,4 +1,4 @@
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
diff --git a/packages/features/ee/teams/pages/team-appearance-view.tsx b/packages/features/ee/teams/pages/team-appearance-view.tsx
index 3bf3a0eda8..3ce599ab4c 100644
--- a/packages/features/ee/teams/pages/team-appearance-view.tsx
+++ b/packages/features/ee/teams/pages/team-appearance-view.tsx
@@ -1,8 +1,9 @@
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import { Controller, useForm } from "react-hook-form";
 
 import { APP_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { useParamsWithFallback } from "@calcom/lib/hooks/useParamsWithFallback";
 import { MembershipRole } from "@calcom/prisma/enums";
 import { trpc } from "@calcom/trpc/react";
 import {
@@ -52,6 +53,7 @@ interface TeamAppearanceValues {
 }
 
 const ProfileView = () => {
+  const params = useParamsWithFallback();
   const { t } = useLocale();
   const router = useRouter();
   const utils = trpc.useContext();
@@ -67,7 +69,7 @@ const ProfileView = () => {
   });
 
   const { data: team, isLoading } = trpc.viewer.teams.get.useQuery(
-    { teamId: Number(router.query.id) },
+    { teamId: Number(params.id) },
     {
       onError: () => {
         router.push("/settings");
diff --git a/packages/features/ee/teams/pages/team-billing-view.tsx b/packages/features/ee/teams/pages/team-billing-view.tsx
index 104e022e8d..b81c006958 100644
--- a/packages/features/ee/teams/pages/team-billing-view.tsx
+++ b/packages/features/ee/teams/pages/team-billing-view.tsx
@@ -1,4 +1,4 @@
-import { useRouter } from "next/router";
+import { usePathname } from "next/navigation";
 
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -8,9 +8,9 @@ import { ExternalLink } from "@calcom/ui/components/icon";
 import { getLayout } from "../../../settings/layouts/SettingsLayout";
 
 const BillingView = () => {
+  const pathname = usePathname();
   const { t } = useLocale();
-  const router = useRouter();
-  const returnTo = router.asPath;
+  const returnTo = pathname;
   const billingHref = `/api/integrations/stripepayment/portal?returnTo=${WEBAPP_URL}${returnTo}`;
   return (
     <>
diff --git a/packages/features/ee/teams/pages/team-members-view.tsx b/packages/features/ee/teams/pages/team-members-view.tsx
index 72a463dcfe..4255a798d3 100644
--- a/packages/features/ee/teams/pages/team-members-view.tsx
+++ b/packages/features/ee/teams/pages/team-members-view.tsx
@@ -1,12 +1,13 @@
 import { useSession } from "next-auth/react";
-import { useRouter } from "next/router";
+import { useRouter, useSearchParams } from "next/navigation";
 import { useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { useParamsWithFallback } from "@calcom/lib/hooks/useParamsWithFallback";
 import { MembershipRole } from "@calcom/prisma/enums";
-import { trpc } from "@calcom/trpc/react";
 import type { RouterOutputs } from "@calcom/trpc/react";
-import { Button, Meta, TextField, showToast } from "@calcom/ui";
+import { trpc } from "@calcom/trpc/react";
+import { Button, Meta, showToast, TextField } from "@calcom/ui";
 import { Plus } from "@calcom/ui/components/icon";
 
 import { getLayout } from "../../../settings/layouts/SettingsLayout";
@@ -64,16 +65,18 @@ function MembersList(props: MembersListProps) {
 }
 
 const MembersView = () => {
+  const searchParams = useSearchParams();
   const { t, i18n } = useLocale();
 
   const router = useRouter();
   const session = useSession();
 
   const utils = trpc.useContext();
+  const params = useParamsWithFallback();
 
-  const teamId = Number(router.query.id);
+  const teamId = Number(params.id);
 
-  const showDialog = router.query.inviteModal === "true";
+  const showDialog = searchParams?.get("inviteModal") === "true";
   const [showMemberInvitationModal, setShowMemberInvitationModal] = useState(showDialog);
   const [showInviteLinkSettingsModal, setInviteLinkSettingsModal] = useState(false);
 
@@ -84,7 +87,7 @@ const MembersView = () => {
         distinctUser: true,
       },
       {
-        enabled: router.isReady,
+        enabled: searchParams !== null,
       }
     );
 
diff --git a/packages/features/ee/teams/pages/team-profile-view.tsx b/packages/features/ee/teams/pages/team-profile-view.tsx
index 6e9f7470a5..f5fed28698 100644
--- a/packages/features/ee/teams/pages/team-profile-view.tsx
+++ b/packages/features/ee/teams/pages/team-profile-view.tsx
@@ -2,8 +2,8 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import type { Prisma } from "@prisma/client";
 import { useSession } from "next-auth/react";
 import Link from "next/link";
-import { useRouter } from "next/router";
-import { useState, useLayoutEffect } from "react";
+import { useRouter } from "next/navigation";
+import { useLayoutEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { z } from "zod";
 
@@ -12,29 +12,31 @@ import { getOrgFullDomain } from "@calcom/features/ee/organizations/lib/orgDomai
 import { IS_TEAM_BILLING_ENABLED, WEBAPP_URL } from "@calcom/lib/constants";
 import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { useParamsWithFallback } from "@calcom/lib/hooks/useParamsWithFallback";
 import { md } from "@calcom/lib/markdownIt";
 import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
 import objectKeys from "@calcom/lib/objectKeys";
 import turndown from "@calcom/lib/turndownService";
 import { MembershipRole } from "@calcom/prisma/enums";
 import { trpc } from "@calcom/trpc/react";
-import { SkeletonContainer, SkeletonText } from "@calcom/ui";
 import {
   Avatar,
   Button,
   ConfirmationDialogContent,
   Dialog,
   DialogTrigger,
+  Editor,
   Form,
   ImageUploader,
   Label,
   LinkIconButton,
   Meta,
   showToast,
+  SkeletonContainer,
+  SkeletonText,
   TextField,
-  Editor,
 } from "@calcom/ui";
-import { ExternalLink, Link as LinkIcon, Trash2, LogOut } from "@calcom/ui/components/icon";
+import { ExternalLink, Link as LinkIcon, LogOut, Trash2 } from "@calcom/ui/components/icon";
 
 import { getLayout } from "../../../settings/layouts/SettingsLayout";
 
@@ -53,6 +55,8 @@ const teamProfileFormSchema = z.object({
 });
 
 const ProfileView = () => {
+  const params = useParamsWithFallback();
+  const teamId = Number(params.id);
   const { t } = useLocale();
   const router = useRouter();
   const utils = trpc.useContext();
@@ -79,9 +83,9 @@ const ProfileView = () => {
   });
 
   const { data: team, isLoading } = trpc.viewer.teams.get.useQuery(
-    { teamId: Number(router.query.id) },
+    { teamId },
     {
-      enabled: !!router.query.id,
+      enabled: !!teamId,
       onError: () => {
         router.push("/settings");
       },
diff --git a/packages/features/ee/users/components/UserForm.tsx b/packages/features/ee/users/components/UserForm.tsx
index 5eb165a4b3..898641ab0e 100644
--- a/packages/features/ee/users/components/UserForm.tsx
+++ b/packages/features/ee/users/components/UserForm.tsx
@@ -1,11 +1,20 @@
 import { noop } from "lodash";
-import { useRouter } from "next/router";
-import { useMemo } from "react";
 import { Controller, useForm } from "react-hook-form";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { localeOptions } from "@calcom/lib/i18n";
 import { nameOfDay } from "@calcom/lib/weekday";
-import { Button, EmailField, Form, Label, Select, TextField, TimezoneSelect } from "@calcom/ui";
+import {
+  Avatar,
+  Button,
+  EmailField,
+  Form,
+  ImageUploader,
+  Label,
+  Select,
+  TextField,
+  TimezoneSelect,
+} from "@calcom/ui";
 
 import type { UserAdminRouterOutputs } from "../server/trpc-router";
 
@@ -38,16 +47,8 @@ export const UserForm = ({
   onSubmit: (data: FormValues) => void;
   submitLabel?: string;
 }) => {
-  const router = useRouter();
   const { t } = useLocale();
 
-  const localeOptions = useMemo(() => {
-    return (router.locales || []).map((locale) => ({
-      value: locale,
-      label: new Intl.DisplayNames(locale, { type: "language" }).of(locale) || "",
-    }));
-  }, [router.locales]);
-
   const timeFormatOptions = [
     { value: 12, label: t("12_hour") },
     { value: 24, label: t("24_hour") },
@@ -73,7 +74,7 @@ export const UserForm = ({
     { value: "GOOGLE", label: "GOOGLE" },
     { value: "SAML", label: "SAML" },
   ];
-
+  const defaultLocale = defaultValues?.locale || localeOptions[0].value;
   const form = useForm<FormValues>({
     defaultValues: {
       avatar: defaultValues?.avatar,
@@ -82,8 +83,8 @@ export const UserForm = ({
       email: defaultValues?.email,
       bio: defaultValues?.bio,
       locale: {
-        value: defaultValues?.locale || localeOptions[0].value,
-        label: localeOptions.find((option) => option.value === localeProp)?.label || "",
+        value: defaultLocale,
+        label: new Intl.DisplayNames(defaultLocale, { type: "language" }).of(defaultLocale) || "",
       },
       timeFormat: {
         value: defaultValues?.timeFormat || 12,
@@ -111,8 +112,7 @@ export const UserForm = ({
 
   return (
     <Form form={form} className="space-y-4" handleSubmit={onSubmit}>
-      {/* TODO: Enable Avatar uploader in a follow up */}
-      {/*  <div className="flex items-center">
+      <div className="flex items-center">
         <Controller
           control={form.control}
           name="avatar"
@@ -133,7 +133,7 @@ export const UserForm = ({
             </>
           )}
         />
-      </div> */}
+      </div>
       <Controller
         name="role"
         control={form.control}
diff --git a/packages/features/ee/users/components/UsersTable.tsx b/packages/features/ee/users/components/UsersTable.tsx
index 25afc60a14..1f46b63459 100644
--- a/packages/features/ee/users/components/UsersTable.tsx
+++ b/packages/features/ee/users/components/UsersTable.tsx
@@ -32,16 +32,17 @@ function UsersTableBare() {
       showToast("User has been deleted", "success");
       // Lets not invalidated the whole cache, just remove the user from the cache.
       // usefull cause in prod this will be fetching 100k+ users
-      utils.viewer.admin.listPaginated.setInfiniteData({ limit: FETCH_LIMIT }, (data) => {
-        if (!data) {
+      // FIXME: Tested locally and it doesnt't work, need to investigate
+      utils.viewer.admin.listPaginated.setInfiniteData({ limit: FETCH_LIMIT }, (cachedData) => {
+        if (!cachedData) {
           return {
             pages: [],
             pageParams: [],
           };
         }
         return {
-          ...data,
-          pages: data.pages.map((page) => ({
+          ...cachedData,
+          pages: cachedData.pages.map((page) => ({
             ...page,
             rows: page.rows.filter((row) => row.id !== userToDelete),
           })),
diff --git a/packages/features/ee/users/pages/users-add-view.tsx b/packages/features/ee/users/pages/users-add-view.tsx
index dedd817784..052e546443 100644
--- a/packages/features/ee/users/pages/users-add-view.tsx
+++ b/packages/features/ee/users/pages/users-add-view.tsx
@@ -1,4 +1,4 @@
-import { useRouter } from "next/router";
+import { usePathname, useRouter } from "next/navigation";
 
 import { getParserWithGeneric } from "@calcom/prisma/zod-utils";
 import { trpc } from "@calcom/trpc/react";
@@ -10,13 +10,14 @@ import { UserForm } from "../components/UserForm";
 import { userBodySchema } from "../schemas/userBodySchema";
 
 const UsersAddView = () => {
+  const pathname = usePathname();
   const router = useRouter();
   const utils = trpc.useContext();
   const mutation = trpc.viewer.users.add.useMutation({
     onSuccess: async () => {
       showToast("User added successfully", "success");
       await utils.viewer.users.list.invalidate();
-      router.replace(router.asPath.replace("/add", ""));
+      router.replace(pathname?.replace("/add", ""));
     },
     onError: (err) => {
       console.error(err.message);
diff --git a/packages/features/ee/users/pages/users-edit-view.tsx b/packages/features/ee/users/pages/users-edit-view.tsx
index 57a747956d..2da6d2126e 100644
--- a/packages/features/ee/users/pages/users-edit-view.tsx
+++ b/packages/features/ee/users/pages/users-edit-view.tsx
@@ -1,7 +1,8 @@
-import { useRouter } from "next/router";
+import { usePathname, useRouter } from "next/navigation";
 import { z } from "zod";
 
 import NoSSR from "@calcom/core/components/NoSSR";
+import { useParamsWithFallback } from "@calcom/lib/hooks/useParamsWithFallback";
 import { getParserWithGeneric } from "@calcom/prisma/zod-utils";
 import { trpc } from "@calcom/trpc/react";
 import { Meta, showToast } from "@calcom/ui";
@@ -14,8 +15,8 @@ import { userBodySchema } from "../schemas/userBodySchema";
 const userIdSchema = z.object({ id: z.coerce.number() });
 
 const UsersEditPage = () => {
-  const router = useRouter();
-  const input = userIdSchema.safeParse(router.query);
+  const params = useParamsWithFallback();
+  const input = userIdSchema.safeParse(params);
 
   if (!input.success) return <div>Invalid input</div>;
 
@@ -23,16 +24,16 @@ const UsersEditPage = () => {
 };
 
 const UsersEditView = ({ userId }: { userId: number }) => {
+  const pathname = usePathname();
   const router = useRouter();
   const [data] = trpc.viewer.users.get.useSuspenseQuery({ userId });
   const { user } = data;
   const utils = trpc.useContext();
   const mutation = trpc.viewer.users.update.useMutation({
     onSuccess: async () => {
-      await utils.viewer.users.list.invalidate();
-      await utils.viewer.users.get.invalidate();
+      Promise.all([utils.viewer.users.list.invalidate(), utils.viewer.users.get.invalidate()]);
       showToast("User updated successfully", "success");
-      router.replace(`${router.asPath.split("/users/")[0]}/users`);
+      router.replace(`${pathname?.split("/users/")[0]}/users`);
     },
     onError: (err) => {
       console.error(err.message);
@@ -52,8 +53,6 @@ const UsersEditView = ({ userId }: { userId: number }) => {
               ...parsedValues,
               userId: user.id,
             };
-            // TODO: Add support for avatar in the API
-            delete data.avatar;
             // Don't send username if it's the same as the current one
             if (user.username === data.username) delete data.username;
             mutation.mutate(data);
diff --git a/packages/features/ee/users/server/trpc-router.ts b/packages/features/ee/users/server/trpc-router.ts
index eee2b45a31..e15103460d 100644
--- a/packages/features/ee/users/server/trpc-router.ts
+++ b/packages/features/ee/users/server/trpc-router.ts
@@ -30,8 +30,7 @@ const userBodySchema = User.pick({
   identityProvider: true,
   // away: true,
   role: true,
-  // @note: disallowing avatar changes via API for now. We can add it later if needed. User should upload image via UI.
-  // avatar: true,
+  avatar: true,
 });
 
 /** This helps to prevent reaching the 4MB payload limit by avoiding base64 and instead passing the avatar url */
diff --git a/packages/features/ee/workflows/components/EmptyScreen.tsx b/packages/features/ee/workflows/components/EmptyScreen.tsx
index d8a62e0b92..4536f981ae 100644
--- a/packages/features/ee/workflows/components/EmptyScreen.tsx
+++ b/packages/features/ee/workflows/components/EmptyScreen.tsx
@@ -1,11 +1,11 @@
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HttpError } from "@calcom/lib/http-error";
 import { trpc } from "@calcom/trpc/react";
 import type { SVGComponent } from "@calcom/types/SVGComponent";
-import { showToast, EmptyScreen as ClassicEmptyScreen, CreateButtonWithTeamsList } from "@calcom/ui";
-import { Smartphone, Mail, Zap } from "@calcom/ui/components/icon";
+import { CreateButtonWithTeamsList, EmptyScreen as ClassicEmptyScreen, showToast } from "@calcom/ui";
+import { Mail, Smartphone, Zap } from "@calcom/ui/components/icon";
 
 type WorkflowExampleType = {
   Icon: SVGComponent;
diff --git a/packages/features/ee/workflows/components/EventWorkflowsTab.tsx b/packages/features/ee/workflows/components/EventWorkflowsTab.tsx
index b303594553..324aa07ab8 100644
--- a/packages/features/ee/workflows/components/EventWorkflowsTab.tsx
+++ b/packages/features/ee/workflows/components/EventWorkflowsTab.tsx
@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 
 import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager";
diff --git a/packages/features/ee/workflows/components/WorkflowDetailsPage.tsx b/packages/features/ee/workflows/components/WorkflowDetailsPage.tsx
index 43066a9eff..2a951fdb5f 100644
--- a/packages/features/ee/workflows/components/WorkflowDetailsPage.tsx
+++ b/packages/features/ee/workflows/components/WorkflowDetailsPage.tsx
@@ -1,4 +1,4 @@
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import type { Dispatch, SetStateAction } from "react";
 import { useMemo, useState } from "react";
 import type { UseFormReturn } from "react-hook-form";
@@ -163,7 +163,12 @@ export default function WorkflowDetailsPage(props: Props) {
         <div className="bg-muted border-subtle w-full rounded-md border p-3 py-5 md:ml-3 md:p-8">
           {form.getValues("trigger") && (
             <div>
-              <WorkflowStepContainer form={form} user={props.user} teamId={teamId} readOnly={props.readOnly} />
+              <WorkflowStepContainer
+                form={form}
+                user={props.user}
+                teamId={teamId}
+                readOnly={props.readOnly}
+              />
             </div>
           )}
           {form.getValues("steps") && (
@@ -211,7 +216,7 @@ export default function WorkflowDetailsPage(props: Props) {
         isOpenDialog={deleteDialogOpen}
         setIsOpenDialog={setDeleteDialogOpen}
         workflowId={workflowId}
-        additionalFunction={async () => await router.push("/workflows")}
+        additionalFunction={async () => router.push("/workflows")}
       />
     </>
   );
diff --git a/packages/features/ee/workflows/components/WorkflowListPage.tsx b/packages/features/ee/workflows/components/WorkflowListPage.tsx
index 41e655b49b..9131e69979 100644
--- a/packages/features/ee/workflows/components/WorkflowListPage.tsx
+++ b/packages/features/ee/workflows/components/WorkflowListPage.tsx
@@ -1,6 +1,6 @@
 import type { Workflow, WorkflowStep, Membership } from "@prisma/client";
 import Link from "next/link";
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import { useState } from "react";
 
 import classNames from "@calcom/lib/classNames";
diff --git a/packages/features/ee/workflows/lib/actionHelperFunctions.ts b/packages/features/ee/workflows/lib/actionHelperFunctions.ts
index 52b072cc4c..fc24562993 100644
--- a/packages/features/ee/workflows/lib/actionHelperFunctions.ts
+++ b/packages/features/ee/workflows/lib/actionHelperFunctions.ts
@@ -1,7 +1,7 @@
 import type { WorkflowTriggerEvents } from "@prisma/client";
-import { WorkflowActions, WorkflowTemplates } from "@prisma/client";
 
 import type { TimeFormat } from "@calcom/lib/timeFormat";
+import { WorkflowActions, WorkflowTemplates } from "@calcom/prisma/enums";
 
 import {
   whatsappEventCancelledTemplate,
@@ -10,6 +10,14 @@ import {
   whatsappReminderTemplate,
 } from "../lib/reminders/templates/whatsapp";
 
+export function shouldScheduleEmailReminder(action: WorkflowActions) {
+  return action === WorkflowActions.EMAIL_ATTENDEE || action === WorkflowActions.EMAIL_HOST;
+}
+
+export function shouldScheduleSMSReminder(action: WorkflowActions) {
+  return action === WorkflowActions.SMS_ATTENDEE || action === WorkflowActions.SMS_NUMBER;
+}
+
 export function isSMSAction(action: WorkflowActions) {
   return action === WorkflowActions.SMS_ATTENDEE || action === WorkflowActions.SMS_NUMBER;
 }
diff --git a/packages/features/ee/workflows/lib/reminders/emailReminderManager.ts b/packages/features/ee/workflows/lib/reminders/emailReminderManager.ts
index 08060a413d..e60746429c 100644
--- a/packages/features/ee/workflows/lib/reminders/emailReminderManager.ts
+++ b/packages/features/ee/workflows/lib/reminders/emailReminderManager.ts
@@ -6,8 +6,12 @@ import dayjs from "@calcom/dayjs";
 import logger from "@calcom/lib/logger";
 import prisma from "@calcom/prisma";
 import type { TimeUnit } from "@calcom/prisma/enums";
-import { WorkflowActions, WorkflowMethods, WorkflowTemplates } from "@calcom/prisma/enums";
-import { WorkflowTriggerEvents } from "@calcom/prisma/enums";
+import {
+  WorkflowActions,
+  WorkflowMethods,
+  WorkflowTemplates,
+  WorkflowTriggerEvents,
+} from "@calcom/prisma/enums";
 import { bookingMetadataSchema } from "@calcom/prisma/zod-utils";
 
 import type { BookingInfo, timeUnitLowerCase } from "./smsReminderManager";
@@ -26,6 +30,18 @@ if (process.env.SENDGRID_API_KEY) {
   client.setApiKey(sendgridAPIKey);
 }
 
+async function getBatchId() {
+  if (!process.env.SENDGRID_API_KEY) {
+    console.info("No sendgrid API key provided, returning DUMMY_BATCH_ID");
+    return "DUMMY_BATCH_ID";
+  }
+  const batchIdResponse = await client.request({
+    url: "/v3/mail/batch",
+    method: "POST",
+  });
+  return batchIdResponse[1].batch_id as string;
+}
+
 export const scheduleEmailReminder = async (
   evt: BookingInfo,
   triggerEvent: WorkflowTriggerEvents,
@@ -59,7 +75,6 @@ export const scheduleEmailReminder = async (
 
   if (!process.env.SENDGRID_API_KEY || !process.env.SENDGRID_EMAIL) {
     console.error("Sendgrid credentials are missing from the .env file");
-    return;
   }
 
   const sandboxMode = process.env.NEXT_PUBLIC_IS_E2E ? true : false;
@@ -133,10 +148,30 @@ export const scheduleEmailReminder = async (
   // Allows debugging generated email content without waiting for sendgrid to send emails
   log.debug(`Sending Email for trigger ${triggerEvent}`, JSON.stringify(emailContent));
 
-  const batchIdResponse = await client.request({
-    url: "/v3/mail/batch",
-    method: "POST",
-  });
+  const batchId = await getBatchId();
+
+  function sendEmail(data: Partial<MailData>) {
+    if (!process.env.SENDGRID_API_KEY) {
+      console.info("No sendgrid API key provided, skipping email");
+      return Promise.resolve();
+    }
+    return sgMail.send({
+      to: data.to,
+      from: {
+        email: senderEmail,
+        name: sender,
+      },
+      subject: emailContent.emailSubject,
+      html: emailContent.emailBody,
+      batchId,
+      replyTo: evt.organizer.email,
+      mailSettings: {
+        sandboxMode: {
+          enable: sandboxMode,
+        },
+      },
+    });
+  }
 
   if (
     triggerEvent === WorkflowTriggerEvents.NEW_EVENT ||
@@ -144,43 +179,11 @@ export const scheduleEmailReminder = async (
     triggerEvent === WorkflowTriggerEvents.RESCHEDULE_EVENT
   ) {
     try {
-      if (Array.isArray(sendTo)) {
-        for (const email of sendTo) {
-          await sgMail.send({
-            to: email,
-            from: {
-              email: senderEmail,
-              name: sender,
-            },
-            subject: emailContent.emailSubject,
-            html: emailContent.emailBody,
-            batchId: batchIdResponse[1].batch_id,
-            replyTo: evt.organizer.email,
-            mailSettings: {
-              sandboxMode: {
-                enable: sandboxMode,
-              },
-            },
-          });
-        }
-      } else {
-        await sgMail.send({
-          to: sendTo,
-          from: {
-            email: senderEmail,
-            name: sender,
-          },
-          subject: emailContent.emailSubject,
-          html: emailContent.emailBody,
-          batchId: batchIdResponse[1].batch_id,
-          replyTo: evt.organizer.email,
-          mailSettings: {
-            sandboxMode: {
-              enable: sandboxMode,
-            },
-          },
-        });
-      }
+      if (!sendTo) throw new Error("No email addresses provided");
+      const addressees = Array.isArray(sendTo) ? sendTo : [sendTo];
+      const promises = addressees.map((email) => sendEmail({ to: email }));
+      // TODO: Maybe don't await for this?
+      await Promise.all(promises);
     } catch (error) {
       console.log("Error sending Email");
     }
@@ -196,24 +199,11 @@ export const scheduleEmailReminder = async (
       !scheduledDate.isAfter(currentDate.add(72, "hour"))
     ) {
       try {
-        await sgMail.send({
+        // If sendEmail failed then workflowReminer will not be created, failing E2E tests
+        await sendEmail({
           to: sendTo,
-          from: {
-            email: senderEmail,
-            name: sender,
-          },
-          subject: emailContent.emailSubject,
-          html: emailContent.emailBody,
-          batchId: batchIdResponse[1].batch_id,
           sendAt: scheduledDate.unix(),
-          replyTo: evt.organizer.email,
-          mailSettings: {
-            sandboxMode: {
-              enable: sandboxMode,
-            },
-          },
         });
-
         await prisma.workflowReminder.create({
           data: {
             bookingUid: uid,
@@ -221,7 +211,7 @@ export const scheduleEmailReminder = async (
             method: WorkflowMethods.EMAIL,
             scheduledDate: scheduledDate.toDate(),
             scheduled: true,
-            referenceId: batchIdResponse[1].batch_id,
+            referenceId: batchId,
             seatReferenceId: seatReferenceUid,
           },
         });
diff --git a/packages/features/ee/workflows/lib/reminders/reminderScheduler.ts b/packages/features/ee/workflows/lib/reminders/reminderScheduler.ts
index 3e531218cd..746ea7423f 100644
--- a/packages/features/ee/workflows/lib/reminders/reminderScheduler.ts
+++ b/packages/features/ee/workflows/lib/reminders/reminderScheduler.ts
@@ -2,13 +2,12 @@ import type { Workflow, WorkflowsOnEventTypes, WorkflowStep } from "@prisma/clie
 
 import { isWhatsappAction } from "@calcom/features/ee/workflows/lib/actionHelperFunctions";
 import { SENDER_ID, SENDER_NAME } from "@calcom/lib/constants";
-import { WorkflowMethods, WorkflowTriggerEvents } from "@calcom/prisma/enums";
-import { WorkflowActions } from "@calcom/prisma/enums";
+import { WorkflowActions, WorkflowMethods, WorkflowTriggerEvents } from "@calcom/prisma/enums";
 import type { CalendarEvent } from "@calcom/types/Calendar";
 
-import { scheduleEmailReminder, deleteScheduledEmailReminder } from "./emailReminderManager";
-import { scheduleSMSReminder, deleteScheduledSMSReminder } from "./smsReminderManager";
-import { scheduleWhatsappReminder, deleteScheduledWhatsappReminder } from "./whatsappReminderManager";
+import { deleteScheduledEmailReminder, scheduleEmailReminder } from "./emailReminderManager";
+import { deleteScheduledSMSReminder, scheduleSMSReminder } from "./smsReminderManager";
+import { deleteScheduledWhatsappReminder, scheduleWhatsappReminder } from "./whatsappReminderManager";
 
 type ExtendedCalendarEvent = CalendarEvent & {
   metadata?: { videoCallUrl: string | undefined };
@@ -199,7 +198,6 @@ export interface SendCancelledRemindersArgs {
 
 export const sendCancelledReminders = async (args: SendCancelledRemindersArgs) => {
   const { workflows, smsReminderNumber, evt, hideBranding } = args;
-
   if (!workflows.length) return;
 
   for (const workflowRef of workflows) {
diff --git a/packages/features/ee/workflows/pages/index.tsx b/packages/features/ee/workflows/pages/index.tsx
index f309d8d5fc..73a084a1eb 100644
--- a/packages/features/ee/workflows/pages/index.tsx
+++ b/packages/features/ee/workflows/pages/index.tsx
@@ -1,5 +1,5 @@
 import { useSession } from "next-auth/react";
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import type { Dispatch, SetStateAction } from "react";
 import { useState } from "react";
 
@@ -7,9 +7,10 @@ import Shell from "@calcom/features/shell/Shell";
 import { classNames } from "@calcom/lib";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
 import { HttpError } from "@calcom/lib/http-error";
 import { trpc } from "@calcom/trpc/react";
-import { AnimatedPopover, Avatar, showToast, CreateButtonWithTeamsList } from "@calcom/ui";
+import { AnimatedPopover, Avatar, CreateButtonWithTeamsList, showToast } from "@calcom/ui";
 
 import { FilterResults } from "../../../filters/components/FilterResults";
 import { TeamsFilter } from "../../../filters/components/TeamsFilter";
@@ -23,12 +24,8 @@ function WorkflowsPage() {
   const { t } = useLocale();
   const session = useSession();
   const router = useRouter();
-  const [checkedFilterItems, setCheckedFilterItems] = useState<{ userId: number | null; teamIds: number[] }>({
-    userId: session.data?.user.id || null,
-    teamIds: [],
-  });
-
-  const filters = getTeamsFiltersFromQuery(router.query);
+  const routerQuery = useRouterQuery();
+  const filters = getTeamsFiltersFromQuery(routerQuery);
 
   const queryRes = trpc.viewer.workflows.filteredList.useQuery({
     filters,
diff --git a/packages/features/ee/workflows/pages/workflow.tsx b/packages/features/ee/workflows/pages/workflow.tsx
index f42367235e..0d61c57b73 100644
--- a/packages/features/ee/workflows/pages/workflow.tsx
+++ b/packages/features/ee/workflows/pages/workflow.tsx
@@ -2,7 +2,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import type { WorkflowStep } from "@prisma/client";
 import { isValidPhoneNumber } from "libphonenumber-js";
 import { useSession } from "next-auth/react";
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
@@ -11,15 +11,20 @@ import Shell from "@calcom/features/shell/Shell";
 import { classNames } from "@calcom/lib";
 import { SENDER_ID } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { useParamsWithFallback } from "@calcom/lib/hooks/useParamsWithFallback";
 import { HttpError } from "@calcom/lib/http-error";
-import { TimeUnit, WorkflowActions, WorkflowTemplates } from "@calcom/prisma/enums";
-import { WorkflowTriggerEvents, MembershipRole } from "@calcom/prisma/enums";
+import {
+  MembershipRole,
+  TimeUnit,
+  WorkflowActions,
+  WorkflowTemplates,
+  WorkflowTriggerEvents,
+} from "@calcom/prisma/enums";
 import { stringOrNumber } from "@calcom/prisma/zod-utils";
 import { trpc } from "@calcom/trpc/react";
+import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
 import type { MultiSelectCheckboxesOptionType as Option } from "@calcom/ui";
-import { Alert, Button, Form, showToast, Badge } from "@calcom/ui";
-
-import useMeQuery from "@lib/hooks/useMeQuery";
+import { Alert, Badge, Button, Form, showToast } from "@calcom/ui";
 
 import LicenseRequired from "../../common/components/LicenseRequired";
 import SkeletonLoader from "../components/SkeletonLoaderEdit";
@@ -82,6 +87,7 @@ function WorkflowPage() {
   const { t, i18n } = useLocale();
   const session = useSession();
   const router = useRouter();
+  const params = useParamsWithFallback();
 
   const [selectedEventTypes, setSelectedEventTypes] = useState<Option[]>([]);
   const [isAllDataLoaded, setIsAllDataLoaded] = useState(false);
@@ -92,7 +98,7 @@ function WorkflowPage() {
     resolver: zodResolver(formSchema),
   });
 
-  const { workflow: workflowId } = router.isReady ? querySchema.parse(router.query) : { workflow: -1 };
+  const { workflow: workflowId } = params ? querySchema.parse(params) : { workflow: -1 };
   const utils = trpc.useContext();
 
   const userQuery = useMeQuery();
@@ -106,7 +112,7 @@ function WorkflowPage() {
   } = trpc.viewer.workflows.get.useQuery(
     { id: +workflowId },
     {
-      enabled: router.isReady && !!workflowId,
+      enabled: !!workflowId,
     }
   );
 
@@ -186,7 +192,7 @@ function WorkflowPage() {
           "success"
         );
       }
-      await router.push("/workflows");
+      router.push("/workflows");
     },
     onError: (err) => {
       if (err instanceof HttpError) {
@@ -245,7 +251,7 @@ function WorkflowPage() {
             });
           }
           updateMutation.mutate({
-            id: parseInt(router.query.workflow as string, 10),
+            id: workflowId,
             name: values.name,
             activeOn: activeOnEventTypeIds,
             steps: values.steps,
diff --git a/packages/features/eventtypes/components/CreateEventTypeDialog.tsx b/packages/features/eventtypes/components/CreateEventTypeDialog.tsx
index c4bf578973..36d8a4efdc 100644
--- a/packages/features/eventtypes/components/CreateEventTypeDialog.tsx
+++ b/packages/features/eventtypes/components/CreateEventTypeDialog.tsx
@@ -1,6 +1,6 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { isValidPhoneNumber } from "libphonenumber-js";
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import { useEffect } from "react";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
diff --git a/packages/features/eventtypes/components/DuplicateDialog.tsx b/packages/features/eventtypes/components/DuplicateDialog.tsx
index 03e3dd663b..053079d970 100644
--- a/packages/features/eventtypes/components/DuplicateDialog.tsx
+++ b/packages/features/eventtypes/components/DuplicateDialog.tsx
@@ -1,4 +1,5 @@
-import { useRouter } from "next/router";
+import { useSearchParams } from "next/navigation";
+import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
@@ -32,6 +33,7 @@ const querySchema = z.object({
 });
 
 const DuplicateDialog = () => {
+  const searchParams = useSearchParams();
   const { t } = useLocale();
   const router = useRouter();
   const [firstRender, setFirstRender] = useState(true);
@@ -49,14 +51,17 @@ const DuplicateDialog = () => {
   const { register } = form;
 
   useEffect(() => {
-    if (router.query.dialog === "duplicate") {
-      form.setValue("id", Number(router.query.id as string) || -1);
-      form.setValue("title", (router.query.title as string) || "");
-      form.setValue("slug", t("event_type_duplicate_copy_text", { slug: router.query.slug as string }));
-      form.setValue("description", (router.query.description as string) || "");
-      form.setValue("length", Number(router.query.length) || 30);
+    if (searchParams?.get("dialog") === "duplicate") {
+      form.setValue("id", Number(searchParams?.get("id") as string) || -1);
+      form.setValue("title", (searchParams?.get("title") as string) || "");
+      form.setValue(
+        "slug",
+        t("event_type_duplicate_copy_text", { slug: searchParams?.get("slug") as string })
+      );
+      form.setValue("description", (searchParams?.get("description") as string) || "");
+      form.setValue("length", Number(searchParams?.get("length")) || 30);
     }
-  }, [router.query.dialog]);
+  }, [searchParams?.get("dialog")]);
 
   const duplicateMutation = trpc.viewer.eventTypes.duplicate.useMutation({
     onSuccess: async ({ eventType }) => {
diff --git a/packages/features/insights/context/FiltersProvider.tsx b/packages/features/insights/context/FiltersProvider.tsx
index 2b75008747..9f480e707f 100644
--- a/packages/features/insights/context/FiltersProvider.tsx
+++ b/packages/features/insights/context/FiltersProvider.tsx
@@ -1,4 +1,4 @@
-import { useRouter } from "next/router";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useState } from "react";
 import { z } from "zod";
 
@@ -8,35 +8,36 @@ import type { FilterContextType } from "./provider";
 import { FilterProvider } from "./provider";
 
 export function FiltersProvider({ children }: { children: React.ReactNode }) {
-  // useRouter to get initial values from query params
+  // searchParams to get initial values from query params
+  const searchParams = useSearchParams();
   const router = useRouter();
-  const { startTime, endTime, teamId, userId, eventTypeId, filter, memberUserId } = router.query;
+  const pathname = usePathname();
   const querySchema = z.object({
-    startTime: z.string().optional(),
-    endTime: z.string().optional(),
-    teamId: z.coerce.number().optional(),
-    userId: z.coerce.number().optional(),
-    memberUserId: z.coerce.number().optional(),
-    eventTypeId: z.coerce.number().optional(),
-    filter: z.enum(["event-type", "user"]).optional(),
+    startTime: z.string().nullable(),
+    endTime: z.string().nullable(),
+    teamId: z.coerce.number().nullable(),
+    userId: z.coerce.number().nullable(),
+    memberUserId: z.coerce.number().nullable(),
+    eventTypeId: z.coerce.number().nullable(),
+    filter: z.enum(["event-type", "user"]).nullable(),
   });
 
   let startTimeParsed,
     endTimeParsed,
-    teamIdParsed: number | undefined,
+    teamIdParsed: number | undefined | null,
     userIdParsed,
     eventTypeIdParsed,
     filterParsed,
     memberUserIdParsed;
 
   const safe = querySchema.safeParse({
-    startTime,
-    endTime,
-    teamId,
-    userId,
-    eventTypeId,
-    filter,
-    memberUserId,
+    startTime: searchParams.get("startTime"),
+    endTime: searchParams.get("endTime"),
+    teamId: searchParams.get("teamId"),
+    userId: searchParams.get("userId"),
+    eventTypeId: searchParams.get("eventTypeId"),
+    filter: searchParams.get("filter"),
+    memberUserId: searchParams.get("memberUserId"),
   });
 
   if (!safe.success) {
@@ -115,24 +116,19 @@ export function FiltersProvider({ children }: { children: React.ReactNode }) {
             dateRange,
           } = newConfigFilters;
           const [startTime, endTime] = dateRange || [null, null];
-
-          const mergedQueryParams = {
-            ...(router.query || {}),
-            ...(selectedMemberUserId !== undefined && { memberUserId: selectedMemberUserId }),
-            ...(selectedTeamId !== undefined && { teamId: selectedTeamId }),
-            ...(selectedUserId !== undefined && { userId: selectedUserId }),
-            ...(selectedEventTypeId !== undefined && { eventTypeId: selectedEventTypeId }),
-            ...(selectedFilter !== undefined &&
-              selectedFilter &&
-              selectedFilter?.length > 0 && { filter: selectedFilter[0] }),
-            ...(isAll !== undefined && { isAll }),
-            ...(startTime !== undefined && startTime && { startTime: startTime.toISOString() }),
-            ...(endTime !== undefined && endTime && { endTime: endTime.toISOString() }),
-          };
-
-          router.push({
-            query: mergedQueryParams,
-          });
+          const newSearchParams = new URLSearchParams(searchParams);
+          function setParamsIfDefined(key: string, value: string | number | boolean | null | undefined) {
+            if (value !== undefined && value !== null) newSearchParams.set(key, value.toString());
+          }
+          setParamsIfDefined("memberUserId", selectedMemberUserId);
+          setParamsIfDefined("teamId", selectedTeamId);
+          setParamsIfDefined("userId", selectedUserId);
+          setParamsIfDefined("eventTypeId", selectedEventTypeId);
+          setParamsIfDefined("isAll", isAll);
+          setParamsIfDefined("startTime", startTime?.toISOString());
+          setParamsIfDefined("endTime", endTime?.toISOString());
+          setParamsIfDefined("filter", selectedFilter?.[0]);
+          router.push(`${pathname}?${newSearchParams.toString()}`);
         },
         clearFilters: () => {
           const { initialConfig } = configFilters;
@@ -152,12 +148,11 @@ export function FiltersProvider({ children }: { children: React.ReactNode }) {
             initialConfig,
           });
 
-          router.push({
-            query: {
-              ...(teamId && { teamId: teamId }),
-              ...(userId && { userId: userId }),
-            },
-          });
+          const newSearchParams = new URLSearchParams();
+          if (teamId) newSearchParams.set("teamId", teamId.toString());
+          if (userId) newSearchParams.set("userId", userId.toString());
+
+          router.push(`${pathname}?${newSearchParams.toString()}`);
         },
       }}>
       {children}
diff --git a/packages/features/kbar/Kbar.tsx b/packages/features/kbar/Kbar.tsx
index 65c76e2018..ad13715865 100644
--- a/packages/features/kbar/Kbar.tsx
+++ b/packages/features/kbar/Kbar.tsx
@@ -10,7 +10,7 @@ import {
   useRegisterActions,
 } from "kbar";
 import type { Action } from "kbar";
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import { useMemo } from "react";
 
 import { appStoreMetadata } from "@calcom/app-store/appStoreMetaData";
diff --git a/packages/features/schedules/components/NewScheduleButton.tsx b/packages/features/schedules/components/NewScheduleButton.tsx
index f223b80235..4ae4d07ace 100644
--- a/packages/features/schedules/components/NewScheduleButton.tsx
+++ b/packages/features/schedules/components/NewScheduleButton.tsx
@@ -1,4 +1,4 @@
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
diff --git a/packages/features/settings/layouts/SettingsLayout.tsx b/packages/features/settings/layouts/SettingsLayout.tsx
index 57c6297c64..6236e1612d 100644
--- a/packages/features/settings/layouts/SettingsLayout.tsx
+++ b/packages/features/settings/layouts/SettingsLayout.tsx
@@ -1,7 +1,7 @@
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible";
 import { useSession } from "next-auth/react";
 import Link from "next/link";
-import { useRouter } from "next/router";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import type { ComponentProps } from "react";
 import React, { Suspense, useEffect, useState } from "react";
 
@@ -10,26 +10,25 @@ import { classNames } from "@calcom/lib";
 import { HOSTED_CAL_FEATURES, WEBAPP_URL } from "@calcom/lib/constants";
 import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { IdentityProvider } from "@calcom/prisma/enums";
-import { MembershipRole, UserPermissionRole } from "@calcom/prisma/enums";
+import { IdentityProvider, MembershipRole, UserPermissionRole } from "@calcom/prisma/enums";
 import { trpc } from "@calcom/trpc/react";
 import useAvatarQuery from "@calcom/trpc/react/hooks/useAvatarQuery";
 import type { VerticalTabItemProps } from "@calcom/ui";
 import { Badge, Button, ErrorBoundary, Skeleton, useMeta, VerticalTabItem } from "@calcom/ui";
 import {
-  User,
-  Key,
-  CreditCard,
-  Terminal,
-  Users,
-  Loader,
-  Lock,
   ArrowLeft,
+  Building,
   ChevronDown,
   ChevronRight,
-  Plus,
+  CreditCard,
+  Key,
+  Loader,
+  Lock,
   Menu,
-  Building,
+  Plus,
+  Terminal,
+  User,
+  Users,
 } from "@calcom/ui/components/icon";
 
 const tabs: VerticalTabItemProps[] = [
@@ -193,20 +192,23 @@ const SettingsSidebarContainer = ({
   navigationIsOpenedOnMobile,
   bannersHeight,
 }: SettingsSidebarContainerProps) => {
+  const searchParams = useSearchParams();
   const { t } = useLocale();
-  const router = useRouter();
   const tabsWithPermissions = useTabs();
   const [teamMenuState, setTeamMenuState] =
     useState<{ teamId: number | undefined; teamMenuOpen: boolean }[]>();
 
   const { data: teams } = trpc.viewer.teams.list.useQuery();
-  const { data: currentOrg } = trpc.viewer.organizations.listCurrent.useQuery();
+  const session = useSession();
+  const { data: currentOrg } = trpc.viewer.organizations.listCurrent.useQuery(undefined, {
+    enabled: !!session.data?.user?.organizationId,
+  });
 
   useEffect(() => {
     if (teams) {
       const teamStates = teams?.map((team) => ({
         teamId: team.id,
-        teamMenuOpen: String(team.id) === router.query.id,
+        teamMenuOpen: String(team.id) === searchParams?.get("id"),
       }));
       setTeamMenuState(teamStates);
       setTimeout(() => {
@@ -216,7 +218,7 @@ const SettingsSidebarContainer = ({
         tabMembers?.scrollIntoView({ behavior: "smooth" });
       }, 100);
     }
-  }, [router.query.id, teams]);
+  }, [searchParams?.get("id"), teams]);
 
   return (
     <nav
@@ -363,11 +365,11 @@ const SettingsSidebarContainer = ({
                               <>
                                 {/* TODO */}
                                 {/* <VerticalTabItem
-                              name={t("general")}
-                              href={`${WEBAPP_URL}/settings/my-account/appearance`}
-                              textClassNames="px-3 text-emphasis font-medium text-sm"
-                              disableChevron
-                            /> */}
+                                  name={t("general")}
+                                  href={`${WEBAPP_URL}/settings/my-account/appearance`}
+                                  textClassNames="px-3 text-emphasis font-medium text-sm"
+                                  disableChevron
+                                /> */}
                                 <VerticalTabItem
                                   name={t("appearance")}
                                   href={`/settings/teams/${team.id}/appearance`}
@@ -445,7 +447,7 @@ export default function SettingsLayout({
   children,
   ...rest
 }: { children: React.ReactNode } & ComponentProps<typeof Shell>) {
-  const router = useRouter();
+  const pathname = usePathname();
   const state = useState(false);
   const { t } = useLocale();
   const [sideContainerOpen, setSideContainerOpen] = state;
@@ -467,7 +469,7 @@ export default function SettingsLayout({
     if (sideContainerOpen) {
       setSideContainerOpen(!sideContainerOpen);
     }
-  }, [router.asPath]);
+  }, [pathname]);
 
   return (
     <Shell
diff --git a/packages/features/shell/NProgressPageIndicator.tsx b/packages/features/shell/NProgressPageIndicator.tsx
deleted file mode 100644
index 9281e2a28f..0000000000
--- a/packages/features/shell/NProgressPageIndicator.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { useNProgress } from "@tanem/react-nprogress";
-import type { NextRouter } from "next/router";
-import type { PropsWithChildren } from "react";
-import { useEffect, useState, forwardRef } from "react";
-
-import { classNames } from "@calcom/lib";
-
-interface NProgressOptions {
-  isAnimating: boolean;
-}
-
-export type NProgressProps = PropsWithChildren<NProgressOptions>;
-
-const NProgress = forwardRef<HTMLDivElement, NProgressProps>(({ isAnimating, ...rest }, ref) => {
-  const { animationDuration, isFinished, progress } = useNProgress({
-    isAnimating,
-  });
-
-  return (
-    <div
-      {...rest}
-      ref={ref}
-      className={classNames("fixed left-0 top-0 w-full", isFinished ? "opacity-0" : "opacity-100")}
-      style={{
-        transition: `opacity ${animationDuration}ms linear`,
-      }}>
-      <div
-        className="bg-brand-emphasis h-0.5 w-full"
-        style={{
-          marginLeft: `${(-1 + progress) * 100}%`,
-          transition: `margin-left ${animationDuration}ms linear`,
-        }}
-      />
-    </div>
-  );
-});
-
-NProgress.displayName = "NProgress";
-
-export const NProgressNextRouter = ({ router }: { router: NextRouter }) => {
-  const [state, setState] = useState({
-    isRouteChanging: false,
-    loadingKey: 0,
-  });
-
-  useEffect(() => {
-    const handleRouteChangeStart = () => {
-      setState((prevState) => ({
-        ...prevState,
-        isRouteChanging: true,
-        loadingKey: prevState.loadingKey ^ 1,
-      }));
-    };
-
-    const handleRouteChangeEnd = () => {
-      setState((prevState) => ({
-        ...prevState,
-        isRouteChanging: false,
-      }));
-    };
-
-    router.events.on("routeChangeStart", handleRouteChangeStart);
-    router.events.on("routeChangeComplete", handleRouteChangeEnd);
-    router.events.on("routeChangeError", handleRouteChangeEnd);
-
-    return () => {
-      router.events.off("routeChangeStart", handleRouteChangeStart);
-      router.events.off("routeChangeComplete", handleRouteChangeEnd);
-      router.events.off("routeChangeError", handleRouteChangeEnd);
-    };
-  }, [router.events]);
-
-  const isAnimating = state.isRouteChanging;
-
-  return (
-    <>
-      <NProgress isAnimating={isAnimating} key={state.loadingKey} />
-    </>
-  );
-};
diff --git a/packages/features/shell/Shell.tsx b/packages/features/shell/Shell.tsx
index 3102a204dc..437f660be2 100644
--- a/packages/features/shell/Shell.tsx
+++ b/packages/features/shell/Shell.tsx
@@ -2,10 +2,9 @@ import type { User as UserAuth } from "next-auth";
 import { signOut, useSession } from "next-auth/react";
 import dynamic from "next/dynamic";
 import Link from "next/link";
-import type { NextRouter } from "next/router";
-import { useRouter } from "next/router";
-import type { Dispatch, ReactNode, SetStateAction, ReactElement } from "react";
-import React, { Fragment, useEffect, useState, useRef, useMemo, cloneElement } from "react";
+import { usePathname, useRouter } from "next/navigation";
+import type { Dispatch, ReactElement, ReactNode, SetStateAction } from "react";
+import React, { cloneElement, Fragment, useEffect, useMemo, useRef, useState } from "react";
 import { Toaster } from "react-hot-toast";
 
 import dayjs from "@calcom/dayjs";
@@ -36,6 +35,7 @@ import type { SVGComponent } from "@calcom/types/SVGComponent";
 import {
   Avatar,
   Button,
+  ButtonOrLink,
   Credits,
   Dropdown,
   DropdownItem,
@@ -47,18 +47,19 @@ import {
   ErrorBoundary,
   HeadSeo,
   Logo,
+  showToast,
   SkeletonText,
   Tooltip,
-  showToast,
   useCalcomTheme,
-  ButtonOrLink,
 } from "@calcom/ui";
 import {
   ArrowLeft,
   ArrowRight,
   BarChart,
   Calendar,
+  ChevronDown,
   Clock,
+  Copy,
   Download,
   ExternalLink,
   FileText,
@@ -69,18 +70,15 @@ import {
   Map,
   Moon,
   MoreHorizontal,
-  ChevronDown,
-  Copy,
   Settings,
+  User as UserIcon,
   Users,
   Zap,
-  User as UserIcon,
 } from "@calcom/ui/components/icon";
 import { Discord } from "@calcom/ui/components/icon/Discord";
 
 import { useOrgBranding } from "../ee/organizations/context/provider";
 import FreshChatProvider from "../ee/support/lib/freshchat/FreshChatProvider";
-import { NProgressNextRouter } from "./NProgressPageIndicator";
 import { TeamInviteBadge } from "./TeamInviteBadge";
 
 // need to import without ssr to prevent hydration errors
@@ -120,12 +118,9 @@ function useRedirectToLoginIfUnauthenticated(isPublic = false) {
     }
 
     if (!loading && !session) {
-      router.replace({
-        pathname: "/auth/login",
-        query: {
-          callbackUrl: `${WEBAPP_URL}${location.pathname}${location.search}`,
-        },
-      });
+      const urlSearchParams = new URLSearchParams();
+      urlSearchParams.set("callbackUrl", `${WEBAPP_URL}${location.pathname}${location.search}`);
+      router.replace(`/auth/login?${urlSearchParams.toString()}`);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [loading, session, isPublic]);
@@ -161,7 +156,6 @@ function AppTop({ setBannersHeight }: { setBannersHeight: Dispatch<SetStateActio
 
   return (
     <div ref={bannerRef} className="sticky top-0 z-10 w-full divide-y divide-black">
-      <NProgressNextRouter router={router} />
       <TeamsUpgradeBanner />
       <OrgUpgradeBanner />
       <ImpersonatingBanner />
@@ -185,9 +179,7 @@ function useRedirectToOnboardingIfNeeded() {
 
   useEffect(() => {
     if (isRedirectingToOnboarding && !needsEmailVerification) {
-      router.replace({
-        pathname: "/getting-started",
-      });
+      router.replace("/getting-started");
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isRedirectingToOnboarding, needsEmailVerification]);
@@ -513,11 +505,11 @@ export type NavigationItemType = {
   isCurrent?: ({
     item,
     isChild,
-    router,
+    pathname,
   }: {
     item: Pick<NavigationItemType, "href">;
     isChild?: boolean;
-    router: NextRouter;
+    pathname: string;
   }) => boolean;
 };
 
@@ -535,10 +527,7 @@ const navigation: NavigationItemType[] = [
     href: "/bookings/upcoming",
     icon: Calendar,
     badge: <UnconfirmedBookingBadge />,
-    isCurrent: ({ router }) => {
-      const path = router.asPath.split("?")[0];
-      return path.startsWith("/bookings");
-    },
+    isCurrent: ({ pathname }) => pathname?.startsWith("/bookings"),
   },
   {
     name: "availability",
@@ -556,30 +545,27 @@ const navigation: NavigationItemType[] = [
     name: "apps",
     href: "/apps",
     icon: Grid,
-    isCurrent: ({ router, item }) => {
-      const path = router.asPath.split("?")[0];
+    isCurrent: ({ pathname: path, item }) => {
       // During Server rendering path is /v2/apps but on client it becomes /apps(weird..)
-      return path.startsWith(item.href) || path.startsWith("/v2" + item.href);
+      return path?.startsWith(item.href) || path?.startsWith("/v2" + item.href);
     },
     child: [
       {
         name: "app_store",
         href: "/apps",
-        isCurrent: ({ router, item }) => {
-          const path = router.asPath.split("?")[0];
+        isCurrent: ({ pathname: path, item }) => {
           // During Server rendering path is /v2/apps but on client it becomes /apps(weird..)
           return (
-            (path.startsWith(item.href) || path.startsWith("/v2" + item.href)) && !path.includes("/installed")
+            (path?.startsWith(item.href) || path?.startsWith("/v2" + item.href)) &&
+            !path.includes("/installed")
           );
         },
       },
       {
         name: "installed_apps",
         href: "/apps/installed/calendar",
-        isCurrent: ({ router }) => {
-          const path = router.asPath;
-          return path.startsWith("/apps/installed/") || path.startsWith("/v2/apps/installed/");
-        },
+        isCurrent: ({ pathname: path }) =>
+          path?.startsWith("/apps/installed/") || path?.startsWith("/v2/apps/installed/"),
       },
     ],
   },
@@ -592,9 +578,7 @@ const navigation: NavigationItemType[] = [
     name: "Routing Forms",
     href: "/routing-forms/forms",
     icon: FileText,
-    isCurrent: ({ router }) => {
-      return router.asPath.startsWith("/routing-forms/");
-    },
+    isCurrent: ({ pathname }) => pathname?.startsWith("/routing-forms/"),
   },
   {
     name: "workflows",
@@ -647,8 +631,8 @@ function useShouldDisplayNavigationItem(item: NavigationItemType) {
   return true;
 }
 
-const defaultIsCurrent: NavigationItemType["isCurrent"] = ({ isChild, item, router }) => {
-  return isChild ? item.href === router.asPath : item.href ? router.asPath.startsWith(item.href) : false;
+const defaultIsCurrent: NavigationItemType["isCurrent"] = ({ isChild, item, pathname }) => {
+  return isChild ? item.href === pathname : item.href ? pathname?.startsWith(item.href) : false;
 };
 
 const NavigationItem: React.FC<{
@@ -658,9 +642,9 @@ const NavigationItem: React.FC<{
 }> = (props) => {
   const { item, isChild } = props;
   const { t, isLocaleReady } = useLocale();
-  const router = useRouter();
+  const pathname = usePathname();
   const isCurrent: NavigationItemType["isCurrent"] = item.isCurrent || defaultIsCurrent;
-  const current = isCurrent({ isChild: !!isChild, item, router });
+  const current = isCurrent({ isChild: !!isChild, item, pathname });
   const shouldDisplayNavigationItem = useShouldDisplayNavigationItem(props.item);
 
   if (!shouldDisplayNavigationItem) return null;
@@ -699,7 +683,7 @@ const NavigationItem: React.FC<{
         </Link>
       </Tooltip>
       {item.child &&
-        isCurrent({ router, isChild, item }) &&
+        isCurrent({ pathname, isChild, item }) &&
         item.child.map((item, index) => <NavigationItem index={index} key={item.name} item={item} isChild />)}
     </Fragment>
   );
@@ -736,10 +720,10 @@ const MobileNavigationItem: React.FC<{
   isChild?: boolean;
 }> = (props) => {
   const { item, isChild } = props;
-  const router = useRouter();
+  const pathname = usePathname();
   const { t, isLocaleReady } = useLocale();
   const isCurrent: NavigationItemType["isCurrent"] = item.isCurrent || defaultIsCurrent;
-  const current = isCurrent({ isChild: !!isChild, item, router });
+  const current = isCurrent({ isChild: !!isChild, item, pathname });
   const shouldDisplayNavigationItem = useShouldDisplayNavigationItem(props.item);
 
   if (!shouldDisplayNavigationItem) return null;
diff --git a/packages/features/webhooks/pages/webhook-edit-view.tsx b/packages/features/webhooks/pages/webhook-edit-view.tsx
index b3c84975df..0bf8b35ba0 100644
--- a/packages/features/webhooks/pages/webhook-edit-view.tsx
+++ b/packages/features/webhooks/pages/webhook-edit-view.tsx
@@ -1,5 +1,4 @@
-import { useRouter } from "next/router";
-import z from "zod";
+import { useRouter, useSearchParams } from "next/navigation";
 
 import { APP_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -11,105 +10,97 @@ import type { WebhookFormSubmitData } from "../components/WebhookForm";
 import WebhookForm from "../components/WebhookForm";
 import { subscriberUrlReserved } from "../lib/subscriberUrlReserved";
 
-const querySchema = z.object({ id: z.string() });
-
 const EditWebhook = () => {
+  const searchParams = useSearchParams();
+  const id = searchParams.get("id");
+
+  if (!id) return <SkeletonContainer />;
+
+  // I think we should do SSR for this page
+  return <Component webhookId={id} />;
+};
+
+function Component({ webhookId }: { webhookId: string }) {
   const { t } = useLocale();
   const utils = trpc.useContext();
   const router = useRouter();
-
-  function Component({ webhookId }: { webhookId: string }) {
-    const { data: installedApps, isLoading } = trpc.viewer.integrations.useQuery(
-      { variant: "other", onlyInstalled: true },
-      {
-        suspense: true,
-        enabled: router.isReady,
-      }
-    );
-    const { data: webhook } = trpc.viewer.webhook.get.useQuery(
-      { webhookId },
-      {
-        suspense: true,
-        enabled: router.isReady,
-      }
-    );
-    const { data: webhooks } = trpc.viewer.webhook.list.useQuery(undefined, {
+  const { data: installedApps, isLoading } = trpc.viewer.integrations.useQuery(
+    { variant: "other", onlyInstalled: true },
+    {
       suspense: true,
-      enabled: router.isReady,
-    });
-    const editWebhookMutation = trpc.viewer.webhook.edit.useMutation({
-      async onSuccess() {
-        await utils.viewer.webhook.list.invalidate();
-        showToast(t("webhook_updated_successfully"), "success");
-        router.back();
-      },
-      onError(error) {
-        showToast(`${error.message}`, "error");
-      },
-    });
+      enabled: !!webhookId,
+    }
+  );
+  const { data: webhook } = trpc.viewer.webhook.get.useQuery(
+    { webhookId },
+    {
+      suspense: true,
+      enabled: !!webhookId,
+    }
+  );
+  const { data: webhooks } = trpc.viewer.webhook.list.useQuery(undefined, {
+    suspense: true,
+    enabled: !!webhookId,
+  });
+  const editWebhookMutation = trpc.viewer.webhook.edit.useMutation({
+    async onSuccess() {
+      await utils.viewer.webhook.list.invalidate();
+      showToast(t("webhook_updated_successfully"), "success");
+      router.back();
+    },
+    onError(error) {
+      showToast(`${error.message}`, "error");
+    },
+  });
 
-    if (isLoading || !webhook) return <SkeletonContainer />;
+  if (isLoading || !webhook) return <SkeletonContainer />;
 
-    return (
-      <>
-        <Meta
-          title={t("edit_webhook")}
-          description={t("add_webhook_description", { appName: APP_NAME })}
-          backButton
-        />
-        <WebhookForm
-          webhook={webhook}
-          noRoutingFormTriggers={!!webhook.teamId}
-          onSubmit={(values: WebhookFormSubmitData) => {
-            if (
-              subscriberUrlReserved({
-                subscriberUrl: values.subscriberUrl,
-                id: webhook.id,
-                webhooks,
-                teamId: webhook.teamId ?? undefined,
-                userId: webhook.userId ?? undefined,
-              })
-            ) {
-              showToast(t("webhook_subscriber_url_reserved"), "error");
-              return;
-            }
-
-            if (values.changeSecret) {
-              values.secret = values.newSecret.length ? values.newSecret : null;
-            }
-
-            if (!values.payloadTemplate) {
-              values.payloadTemplate = null;
-            }
-
-            editWebhookMutation.mutate({
-              id: webhook.id,
+  return (
+    <>
+      <Meta
+        title={t("edit_webhook")}
+        description={t("add_webhook_description", { appName: APP_NAME })}
+        backButton
+      />
+      <WebhookForm
+        webhook={webhook}
+        noRoutingFormTriggers={!!webhook.teamId}
+        onSubmit={(values: WebhookFormSubmitData) => {
+          if (
+            subscriberUrlReserved({
               subscriberUrl: values.subscriberUrl,
-              eventTriggers: values.eventTriggers,
-              active: values.active,
-              payloadTemplate: values.payloadTemplate,
-              secret: values.secret,
-            });
-          }}
-          apps={installedApps?.items.map((app) => app.slug)}
-        />
-      </>
-    );
-  }
+              id: webhook.id,
+              webhooks,
+              teamId: webhook.teamId ?? undefined,
+              userId: webhook.userId ?? undefined,
+            })
+          ) {
+            showToast(t("webhook_subscriber_url_reserved"), "error");
+            return;
+          }
 
-  if (!router.isReady) return null;
+          if (values.changeSecret) {
+            values.secret = values.newSecret.length ? values.newSecret : null;
+          }
 
-  const parsed = querySchema.safeParse(router.query);
+          if (!values.payloadTemplate) {
+            values.payloadTemplate = null;
+          }
 
-  if (!parsed.success) {
-    throw new Error("Invalid query");
-  }
-
-  // tRPC useQuery needs webhookId to be available and it becomes available only after router.isReady is true
-  // It causes this requirement of a new component.
-  // I think we should do SSR for this page
-  return <Component webhookId={parsed.data.id} />;
-};
+          editWebhookMutation.mutate({
+            id: webhook.id,
+            subscriberUrl: values.subscriberUrl,
+            eventTriggers: values.eventTriggers,
+            active: values.active,
+            payloadTemplate: values.payloadTemplate,
+            secret: values.secret,
+          });
+        }}
+        apps={installedApps?.items.map((app) => app.slug)}
+      />
+    </>
+  );
+}
 
 EditWebhook.getLayout = getLayout;
 
diff --git a/packages/features/webhooks/pages/webhook-new-view.tsx b/packages/features/webhooks/pages/webhook-new-view.tsx
index 08c4ea38d7..c7da3b97ad 100644
--- a/packages/features/webhooks/pages/webhook-new-view.tsx
+++ b/packages/features/webhooks/pages/webhook-new-view.tsx
@@ -1,5 +1,5 @@
 import { useSession } from "next-auth/react";
-import { useRouter } from "next/router";
+import { useRouter, useSearchParams } from "next/navigation";
 
 import { APP_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -12,23 +12,24 @@ import WebhookForm from "../components/WebhookForm";
 import { subscriberUrlReserved } from "../lib/subscriberUrlReserved";
 
 const NewWebhookView = () => {
+  const searchParams = useSearchParams();
   const { t } = useLocale();
   const utils = trpc.useContext();
   const router = useRouter();
   const session = useSession();
 
-  const teamId = router.query.teamId ? +router.query.teamId : undefined;
+  const teamId = searchParams?.get("teamId") ? Number(searchParams.get("teamId")) : undefined;
 
   const { data: installedApps, isLoading } = trpc.viewer.integrations.useQuery(
     { variant: "other", onlyInstalled: true },
     {
       suspense: true,
-      enabled: router.isReady,
+      enabled: session.status === "authenticated",
     }
   );
   const { data: webhooks } = trpc.viewer.webhook.list.useQuery(undefined, {
     suspense: true,
-    enabled: router.isReady,
+    enabled: session.status === "authenticated",
   });
 
   const createWebhookMutation = trpc.viewer.webhook.create.useMutation({
diff --git a/packages/features/webhooks/pages/webhooks-view.tsx b/packages/features/webhooks/pages/webhooks-view.tsx
index ce72459e8f..4b08d314c8 100644
--- a/packages/features/webhooks/pages/webhooks-view.tsx
+++ b/packages/features/webhooks/pages/webhooks-view.tsx
@@ -1,4 +1,5 @@
-import { useRouter } from "next/router";
+import { useSession } from "next-auth/react";
+import { useRouter } from "next/navigation";
 import { Suspense } from "react";
 
 import { APP_NAME, WEBAPP_URL } from "@calcom/lib/constants";
@@ -6,8 +7,7 @@ import { useBookerUrl } from "@calcom/lib/hooks/useBookerUrl";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import type { WebhooksByViewer } from "@calcom/trpc/server/routers/viewer/webhook/getByViewer.handler";
-import { Meta, EmptyScreen, CreateButtonWithTeamsList } from "@calcom/ui";
-import { Avatar } from "@calcom/ui";
+import { Avatar, CreateButtonWithTeamsList, EmptyScreen, Meta } from "@calcom/ui";
 import { Link as LinkIcon } from "@calcom/ui/components/icon";
 
 import { getLayout } from "../../settings/layouts/SettingsLayout";
@@ -16,10 +16,11 @@ import { WebhookListItem, WebhookListSkeleton } from "../components";
 const WebhooksView = () => {
   const { t } = useLocale();
   const router = useRouter();
+  const session = useSession();
 
   const { data } = trpc.viewer.webhook.getByViewer.useQuery(undefined, {
     suspense: true,
-    enabled: router.isReady,
+    enabled: session.status === "authenticated",
   });
 
   return (
diff --git a/packages/lib/bookingSuccessRedirect.ts b/packages/lib/bookingSuccessRedirect.ts
index ee1c357f04..5e93c3e1f9 100644
--- a/packages/lib/bookingSuccessRedirect.ts
+++ b/packages/lib/bookingSuccessRedirect.ts
@@ -1,33 +1,43 @@
-import type { NextRouter } from "next/router";
+import type { Booking, EventType } from "@prisma/client";
+import { useRouter, useSearchParams } from "next/navigation";
 
-import type { Booking, EventType } from ".prisma/client";
-
-export const bookingSuccessRedirect = async ({
-  successRedirectUrl,
-  bookingUid,
-  query,
-  router,
-}: {
-  successRedirectUrl: EventType["successRedirectUrl"];
-  bookingUid: Booking["uid"] | undefined;
+function getNewSeachParams(args: {
   query: Record<string, string | null | undefined | boolean>;
-  router: NextRouter;
-}) => {
-  if (successRedirectUrl) {
-    const url = new URL(successRedirectUrl);
-    Object.entries(query).forEach(([key, value]) => {
-      if (value === null || value === undefined) {
-        return;
-      }
-      url.searchParams.append(key, String(value));
-    });
-
-    // Using parent ensures, Embed iframe would redirect outside of the iframe.
-    window.parent.location.href = url.toString();
-    return;
-  }
-  return router.push({
-    pathname: `/booking/${bookingUid}`,
-    query,
+  searchParams?: URLSearchParams;
+}) {
+  const { query, searchParams } = args;
+  const newSearchParams = new URLSearchParams(searchParams);
+  Object.entries(query).forEach(([key, value]) => {
+    if (value === null || value === undefined) {
+      return;
+    }
+    newSearchParams.append(key, String(value));
   });
+  return newSearchParams;
+}
+
+export const useBookingSuccessRedirect = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const bookingSuccessRedirect = ({
+    successRedirectUrl,
+    bookingUid,
+    query,
+  }: {
+    successRedirectUrl: EventType["successRedirectUrl"];
+    bookingUid: Booking["uid"] | undefined;
+    query: Record<string, string | null | undefined | boolean>;
+  }) => {
+    if (successRedirectUrl) {
+      const url = new URL(successRedirectUrl);
+      // Using parent ensures, Embed iframe would redirect outside of the iframe.
+      const newSearchParams = getNewSeachParams({ query, searchParams });
+      window.parent.location.href = `${url.toString()}?${newSearchParams.toString()}`;
+      return;
+    }
+    const newSearchParams = getNewSeachParams({ query });
+    return router.push(`/booking/${bookingUid}?${newSearchParams.toString()}`);
+  };
+
+  return bookingSuccessRedirect;
 };
diff --git a/packages/lib/hooks/useParamsWithFallback.ts b/packages/lib/hooks/useParamsWithFallback.ts
new file mode 100644
index 0000000000..53dd1bb498
--- /dev/null
+++ b/packages/lib/hooks/useParamsWithFallback.ts
@@ -0,0 +1,13 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import { useRouter } from "next/router";
+
+/**
+ * This hook is a workaround until pages are migrated to app directory.
+ */
+export function useParamsWithFallback() {
+  const router = useRouter();
+  const params = useParams();
+  return params || router.query;
+}
diff --git a/packages/lib/hooks/useRouterQuery.ts b/packages/lib/hooks/useRouterQuery.ts
new file mode 100644
index 0000000000..587bd8083e
--- /dev/null
+++ b/packages/lib/hooks/useRouterQuery.ts
@@ -0,0 +1,36 @@
+import { useSearchParams } from "next/navigation";
+
+/**
+ * An alternative to Object.fromEntries that allows duplicate keys.
+ */
+function fromEntriesWithDuplicateKeys(entries: ReturnType<ReturnType<typeof useSearchParams>["entries"]>) {
+  const result: Record<string, string | string[]> = {};
+  // Consider setting atleast ES2015 as target
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  for (const [key, value] of entries) {
+    if (result.hasOwnProperty(key)) {
+      let currentValue = result[key];
+      if (!Array.isArray(currentValue)) {
+        currentValue = [currentValue];
+      }
+      currentValue.push(value);
+      result[key] = currentValue;
+    } else {
+      result[key] = value;
+    }
+  }
+  return result;
+}
+
+/**
+ * This hook returns the query object from the router. It is an attempt to
+ * keep the original query object from the old useRouter hook.
+ * At least until everything is properly migrated to the new router.
+ * @returns {Object} routerQuery
+ */
+export const useRouterQuery = () => {
+  const searchParams = useSearchParams();
+  const routerQuery = fromEntriesWithDuplicateKeys(searchParams.entries());
+  return routerQuery;
+};
diff --git a/packages/lib/hooks/useTypedQuery.ts b/packages/lib/hooks/useTypedQuery.ts
index 2119ae1a9f..1d64d56349 100644
--- a/packages/lib/hooks/useTypedQuery.ts
+++ b/packages/lib/hooks/useTypedQuery.ts
@@ -1,10 +1,16 @@
-import { useRouter } from "next/router";
+import { usePathname, useRouter } from "next/navigation";
 import { useCallback, useMemo } from "react";
 import { z } from "zod";
 
-type OptionalKeys<T> = { [K in keyof T]-?: Record<string, unknown> extends Pick<T, K> ? K : never }[keyof T];
+import { useRouterQuery } from "./useRouterQuery";
 
-type FilteredKeys<T, U> = { [K in keyof T as T[K] extends U ? K : never]: T[K] };
+type OptionalKeys<T> = {
+  [K in keyof T]-?: Record<string, unknown> extends Pick<T, K> ? K : never;
+}[keyof T];
+
+type FilteredKeys<T, U> = {
+  [K in keyof T as T[K] extends U ? K : never]: T[K];
+};
 
 // Take array as a string and return zod array
 export const queryNumberArray = z
@@ -31,8 +37,9 @@ export function useTypedQuery<T extends z.AnyZodObject>(schema: T) {
   type OutputOptionalKeys = OptionalKeys<Output>;
   type ArrayOutput = FilteredKeys<FullOutput, Array<unknown>>;
   type ArrayOutputKeys = keyof ArrayOutput;
-
-  const { query: unparsedQuery, ...router } = useRouter();
+  const router = useRouter();
+  const unparsedQuery = useRouterQuery();
+  const pathname = usePathname();
   const parsedQuerySchema = schema.safeParse(unparsedQuery);
 
   let parsedQuery: Output = useMemo(() => {
@@ -46,19 +53,18 @@ export function useTypedQuery<T extends z.AnyZodObject>(schema: T) {
   const setQuery = useCallback(
     function setQuery<J extends OutputKeys>(key: J, value: Output[J]) {
       // Remove old value by key so we can merge new value
-      const { [key]: _, ...newQuery } = parsedQuery;
-      const newValue = { ...newQuery, [key]: value };
-      const search = new URLSearchParams(newValue).toString();
-      router.replace({ query: search }, undefined, { shallow: true });
+      const search = new URLSearchParams(parsedQuery);
+      search.set(String(key), String(value));
+      router.replace(`${pathname}?${search.toString()}`);
     },
     [parsedQuery, router]
   );
 
   // Delete a key from the query
   function removeByKey(key: OutputOptionalKeys) {
-    const { [key]: _, ...newQuery } = parsedQuery;
-    const search = new URLSearchParams(newQuery).toString();
-    router.replace({ query: search }, undefined, { shallow: true });
+    const search = new URLSearchParams(parsedQuery);
+    search.delete(String(key));
+    router.replace(`${pathname}?${search.toString()}`);
   }
 
   // push item to existing key
@@ -89,9 +95,7 @@ export function useTypedQuery<T extends z.AnyZodObject>(schema: T) {
 
   // Remove all query params from the URL
   function removeAllQueryParams() {
-    const { asPath } = router;
-    const newPath = asPath.split("?")[0];
-    router.replace(newPath, undefined, { shallow: true });
+    router.replace(pathname);
   }
 
   return {
diff --git a/packages/lib/hooks/useUrlMatchesCurrentUrl.ts b/packages/lib/hooks/useUrlMatchesCurrentUrl.ts
new file mode 100644
index 0000000000..5526f2fbe2
--- /dev/null
+++ b/packages/lib/hooks/useUrlMatchesCurrentUrl.ts
@@ -0,0 +1,19 @@
+"use client";
+
+import { usePathname, useSearchParams } from "next/navigation";
+
+export const useUrlMatchesCurrentUrl = (url: string) => {
+  // I don't know why usePathname ReturnType doesn't include null.
+  // It can certainly have null value https://nextjs.org/docs/app/api-reference/functions/use-pathname#:~:text=usePathname%20can%20return%20null%20when%20a%20fallback%20route%20is%20being%20rendered%20or%20when%20a%20pages%20directory%20page%20has%20been%20automatically%20statically%20optimized%20by%20Next.js%20and%20the%20router%20is%20not%20ready.
+  const pathname = usePathname() as null | string;
+  const searchParams = useSearchParams();
+  const query = searchParams.toString();
+  let pathnameWithQuery;
+  if (query) {
+    pathnameWithQuery = `${pathname}?${query}`;
+  } else {
+    pathnameWithQuery = pathname;
+  }
+  // TODO: It should actually re-order the params before comparing ?a=1&b=2 should match with ?b=2&a=1
+  return pathnameWithQuery ? pathnameWithQuery.includes(url) : false;
+};
diff --git a/packages/lib/i18n.ts b/packages/lib/i18n.ts
index d58df3006b..1213f7aecb 100644
--- a/packages/lib/i18n.ts
+++ b/packages/lib/i18n.ts
@@ -13,3 +13,11 @@ export function getLocaleFromHeaders(req: IncomingMessage): string {
   }
   return preferredLocale ?? i18n.defaultLocale;
 }
+
+// Workaround for using router.locales from old router
+export const locales = i18n.locales as string[];
+
+export const localeOptions = locales.map((locale) => ({
+  value: locale,
+  label: new Intl.DisplayNames(locale, { type: "language" }).of(locale) || "",
+}));
diff --git a/packages/lib/package.json b/packages/lib/package.json
index 5ccf2614b7..1683a06975 100644
--- a/packages/lib/package.json
+++ b/packages/lib/package.json
@@ -21,6 +21,7 @@
     "ical.js": "^1.4.0",
     "ics": "^2.37.0",
     "jimp": "^0.16.1",
+    "next-collect": "^0.2.1",
     "next-i18next": "^13.2.2",
     "react-hot-toast": "^2.3.0",
     "rrule": "^2.7.1",
diff --git a/packages/types/next.d.ts b/packages/types/next.d.ts
index 81d073bf5a..6e13587cc8 100644
--- a/packages/types/next.d.ts
+++ b/packages/types/next.d.ts
@@ -22,3 +22,10 @@ export declare module "next" {
     pagination: { take: number; skip: number };
   }
 }
+
+export declare module "next/navigation" {
+  interface Params {
+    [key: string]: string;
+  }
+  export declare function useParams(): Params | null;
+}
diff --git a/packages/ui/components/apps/AllApps.tsx b/packages/ui/components/apps/AllApps.tsx
index 71c93c221a..f2710f77e6 100644
--- a/packages/ui/components/apps/AllApps.tsx
+++ b/packages/ui/components/apps/AllApps.tsx
@@ -1,5 +1,5 @@
 import { useAutoAnimate } from "@formkit/auto-animate/react";
-import { useRouter } from "next/router";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import type { UIEvent } from "react";
 import { useEffect, useRef, useState } from "react";
 
@@ -53,6 +53,8 @@ interface CategoryTabProps {
 }
 
 function CategoryTab({ selectedCategory, categories, searchText }: CategoryTabProps) {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
   const { t } = useLocale();
   const router = useRouter();
   const { ref, calculateScroll, leftVisible, rightVisible } = useShouldShowArrows();
@@ -92,7 +94,7 @@ function CategoryTab({ selectedCategory, categories, searchText }: CategoryTabPr
         ref={ref}>
         <li
           onClick={() => {
-            router.replace(router.asPath.split("?")[0], undefined, { shallow: true });
+            router.replace(pathname);
           }}
           className={classNames(
             selectedCategory === null ? "bg-emphasis text-default" : "bg-muted text-emphasis",
@@ -105,11 +107,11 @@ function CategoryTab({ selectedCategory, categories, searchText }: CategoryTabPr
             key={pos}
             onClick={() => {
               if (selectedCategory === cat) {
-                router.replace(router.asPath.split("?")[0], undefined, { shallow: true });
+                router.replace(pathname);
               } else {
-                router.replace(router.asPath.split("?")[0] + `?category=${cat}`, undefined, {
-                  shallow: true,
-                });
+                const _searchParams = new URLSearchParams(searchParams);
+                _searchParams.set("category", cat);
+                router.replace(`${pathname}?${_searchParams.toString()}`);
               }
             }}
             className={classNames(
@@ -133,10 +135,11 @@ function CategoryTab({ selectedCategory, categories, searchText }: CategoryTabPr
 }
 
 export function AllApps({ apps, searchText, categories, userAdminTeams }: AllAppsPropsType) {
-  const router = useRouter();
+  const searchParams = useSearchParams();
   const { t } = useLocale();
   const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
   const [appsContainerRef, enableAnimation] = useAutoAnimate<HTMLDivElement>();
+  const categoryQuery = searchParams?.get("category");
 
   if (searchText) {
     enableAnimation && enableAnimation(false);
@@ -144,12 +147,10 @@ export function AllApps({ apps, searchText, categories, userAdminTeams }: AllApp
 
   useEffect(() => {
     const queryCategory =
-      typeof router.query.category === "string" && categories.includes(router.query.category)
-        ? router.query.category
-        : null;
+      typeof categoryQuery === "string" && categories.includes(categoryQuery) ? categoryQuery : null;
     setSelectedCategory(queryCategory);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [router.query.category]);
+  }, [categoryQuery]);
 
   const filteredApps = apps
     .filter((app) =>
diff --git a/packages/ui/components/apps/AppCard.tsx b/packages/ui/components/apps/AppCard.tsx
index 5dd4a2365e..7f7024e75e 100644
--- a/packages/ui/components/apps/AppCard.tsx
+++ b/packages/ui/components/apps/AppCard.tsx
@@ -1,4 +1,5 @@
-import { useRouter } from "next/router";
+import { usePathname } from "next/navigation";
+import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 
 import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
@@ -35,7 +36,6 @@ interface AppCardProps {
 
 export function AppCard({ app, credentials, searchText, userAdminTeams }: AppCardProps) {
   const { t } = useLocale();
-
   const allowedMultipleInstalls = app.categories && app.categories.indexOf("calendar") > -1;
   const appAdded = (credentials && credentials.length) || 0;
 
@@ -78,9 +78,9 @@ export function AppCard({ app, credentials, searchText, userAdminTeams }: AppCar
         </h3>
       </div>
       {/* TODO: add reviews <div className="flex text-sm text-default">
-          <span>{props.rating} stars</span> <StarIcon className="ml-1 mt-0.5 h-4 w-4 text-yellow-600" />
-          <span className="pl-1 text-subtle">{props.reviews} reviews</span>
-        </div> */}
+            <span>{props.rating} stars</span> <StarIcon className="ml-1 mt-0.5 h-4 w-4 text-yellow-600" />
+            <span className="pl-1 text-subtle">{props.reviews} reviews</span>
+          </div> */}
       <p
         className="text-default mt-2 flex-grow text-sm"
         style={{
@@ -189,11 +189,12 @@ const InstallAppButtonChild = ({
 } & ButtonProps) => {
   const { t } = useLocale();
   const router = useRouter();
+  const pathname = usePathname();
 
   const mutation = useAddAppMutation(null, {
     onSuccess: (data) => {
       // Refresh SSR page content without actual reload
-      router.replace(router.asPath);
+      router.replace(pathname);
       if (data?.setupPending) return;
       showToast(t("app_successfully_installed"), "success");
     },
diff --git a/packages/ui/components/breadcrumb/Breadcrumb.tsx b/packages/ui/components/breadcrumb/Breadcrumb.tsx
index 050185ab45..7792657c90 100644
--- a/packages/ui/components/breadcrumb/Breadcrumb.tsx
+++ b/packages/ui/components/breadcrumb/Breadcrumb.tsx
@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { useRouter } from "next/router";
+import { usePathname } from "next/navigation";
 import { Children, Fragment, useEffect, useState } from "react";
 
 type BreadcrumbProps = {
@@ -44,11 +44,11 @@ export const BreadcrumbItem = ({ children, href, listProps }: BreadcrumbItemProp
 };
 
 export const BreadcrumbContainer = () => {
-  const router = useRouter();
+  const pathname = usePathname();
   const [, setBreadcrumbs] = useState<{ href: string; label: string }[]>();
 
   useEffect(() => {
-    const rawPath = router.asPath.split("?")[0]; // this will ignore any query params for now?
+    const rawPath = pathname; // Pathname doesn't include search params anymore
 
     let pathArray = rawPath.split("/");
     pathArray.shift();
@@ -63,7 +63,7 @@ export const BreadcrumbContainer = () => {
       };
     });
     setBreadcrumbs(allBreadcrumbs);
-  }, [router.asPath]);
+  }, [pathname]);
 };
 
 export default Breadcrumb;
diff --git a/packages/ui/components/createButton/CreateButton.tsx b/packages/ui/components/createButton/CreateButton.tsx
index 03715f5b9d..7d3a52df31 100644
--- a/packages/ui/components/createButton/CreateButton.tsx
+++ b/packages/ui/components/createButton/CreateButton.tsx
@@ -1,4 +1,4 @@
-import { useRouter } from "next/router";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 
 import { useBookerUrl } from "@calcom/lib/hooks/useBookerUrl";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -38,6 +38,8 @@ export type CreateBtnProps = {
 export function CreateButton(props: CreateBtnProps) {
   const { t } = useLocale();
   const router = useRouter();
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
   const bookerUrl = useBookerUrl();
 
   const {
@@ -56,23 +58,17 @@ export function CreateButton(props: CreateBtnProps) {
 
   // inject selection data into url for correct router history
   const openModal = (option: Option) => {
-    const query = {
-      ...router.query,
-      dialog: "new",
-      eventPage: option.slug,
-      teamId: option.teamId,
-    };
-    if (!option.teamId) {
-      delete query.teamId;
+    const _searchParams = new URLSearchParams(searchParams);
+    function setParamsIfDefined(key: string, value: string | number | boolean | null | undefined) {
+      if (value !== undefined && value !== null) _searchParams.set(key, value.toString());
     }
-    router.push(
-      {
-        pathname: router.pathname,
-        query,
-      },
-      undefined,
-      { shallow: true }
-    );
+    setParamsIfDefined("dialog", "new");
+    setParamsIfDefined("eventPage", option.slug);
+    setParamsIfDefined("teamId", option.teamId);
+    if (!option.teamId) {
+      _searchParams.delete("teamId");
+    }
+    router.push(`${pathname}?${_searchParams.toString()}`);
   };
 
   return (
@@ -138,7 +134,7 @@ export function CreateButton(props: CreateBtnProps) {
           </DropdownMenuContent>
         </Dropdown>
       )}
-      {router.query.dialog === "new" && CreateDialog}
+      {searchParams.get("dialog") === "new" && CreateDialog}
     </>
   );
 }
diff --git a/packages/ui/components/dialog/Dialog.tsx b/packages/ui/components/dialog/Dialog.tsx
index 57fbe23984..71fd9d894b 100644
--- a/packages/ui/components/dialog/Dialog.tsx
+++ b/packages/ui/components/dialog/Dialog.tsx
@@ -1,5 +1,5 @@
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { useRouter } from "next/router";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import type { ReactNode } from "react";
 import React, { useState } from "react";
 
@@ -14,44 +14,56 @@ export type DialogProps = React.ComponentProps<(typeof DialogPrimitive)["Root"]>
   name?: string;
   clearQueryParamsOnClose?: string[];
 };
+
+const enum DIALOG_STATE {
+  // Dialog is there in the DOM but not visible.
+  CLOSED = "CLOSED",
+  // State from the time b/w the Dialog is dismissed and the time the "dialog" query param is removed from the URL.
+  CLOSING = "CLOSING",
+  // Dialog is visible.
+  OPEN = "OPEN",
+}
+
 export function Dialog(props: DialogProps) {
   const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const newSearchParams = new URLSearchParams(searchParams);
   const { children, name, ...dialogProps } = props;
-  // only used if name is set
-  const [open, setOpen] = useState(!!dialogProps.open);
 
+  // only used if name is set
+  const [dialogState, setDialogState] = useState(dialogProps.open ? DIALOG_STATE.OPEN : DIALOG_STATE.CLOSED);
+  const shouldOpenDialog = newSearchParams.get("dialog") === name;
   if (name) {
     const clearQueryParamsOnClose = ["dialog", ...(props.clearQueryParamsOnClose || [])];
     dialogProps.onOpenChange = (open) => {
       if (props.onOpenChange) {
         props.onOpenChange(open);
       }
+
       // toggles "dialog" query param
       if (open) {
-        router.query["dialog"] = name;
+        newSearchParams.set("dialog", name);
       } else {
-        const query = router.query;
         clearQueryParamsOnClose.forEach((queryParam) => {
-          delete query[queryParam];
+          newSearchParams.delete(queryParam);
         });
-        router.push(
-          {
-            pathname: router.pathname,
-            query,
-          },
-          undefined,
-          { shallow: true }
-        );
+        router.push(`${pathname}?${newSearchParams.toString()}`);
       }
-      setOpen(open);
+      setDialogState(open ? DIALOG_STATE.OPEN : DIALOG_STATE.CLOSING);
     };
-    // handles initial state
-    if (!open && router.query["dialog"] === name) {
-      setOpen(true);
+
+    if (dialogState === DIALOG_STATE.CLOSED && shouldOpenDialog) {
+      setDialogState(DIALOG_STATE.OPEN);
     }
+
+    if (dialogState === DIALOG_STATE.CLOSING && !shouldOpenDialog) {
+      setDialogState(DIALOG_STATE.CLOSED);
+    }
+
     // allow overriding
     if (!("open" in dialogProps)) {
-      dialogProps.open = open;
+      dialogProps.open = dialogState === DIALOG_STATE.OPEN ? true : false;
     }
   }
 
diff --git a/packages/ui/components/dialog/dialog.test.tsx b/packages/ui/components/dialog/dialog.test.tsx
index 51de49d427..994b821e04 100644
--- a/packages/ui/components/dialog/dialog.test.tsx
+++ b/packages/ui/components/dialog/dialog.test.tsx
@@ -1,20 +1,18 @@
 import { render, screen } from "@testing-library/react";
 import { vi } from "vitest";
 
-import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogClose } from "./Dialog";
+import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader } from "./Dialog";
 
-vi.mock("next/router", () => ({
+vi.mock("next/navigation", () => ({
+  usePathname() {
+    return "";
+  },
+  useSearchParams() {
+    return new URLSearchParams();
+  },
   useRouter() {
     return {
-      route: "/",
-      pathname: "",
-      query: "",
-      asPath: "",
       push: vi.fn(),
-      events: {
-        on: vi.fn(),
-        off: vi.fn(),
-      },
       beforePopState: vi.fn(() => null),
       prefetch: vi.fn(() => null),
     };
diff --git a/packages/ui/components/form/wizard/WizardForm.tsx b/packages/ui/components/form/wizard/WizardForm.tsx
index 377d9779ba..9aa9df385f 100644
--- a/packages/ui/components/form/wizard/WizardForm.tsx
+++ b/packages/ui/components/form/wizard/WizardForm.tsx
@@ -1,5 +1,5 @@
 import { noop } from "lodash";
-import { useRouter } from "next/router";
+import { useRouter, useSearchParams } from "next/navigation";
 import type { Dispatch, SetStateAction } from "react";
 import { useEffect, useState } from "react";
 
@@ -27,12 +27,13 @@ function WizardForm<T extends DefaultStep>(props: {
   finishLabel?: string;
   stepLabel?: React.ComponentProps<typeof Steps>["stepLabel"];
 }) {
+  const searchParams = useSearchParams();
   const { href, steps, nextLabel = "Next", finishLabel = "Finish", prevLabel = "Back", stepLabel } = props;
   const router = useRouter();
-  const step = parseInt((router.query.step as string) || "1");
+  const step = parseInt((searchParams?.get("step") as string) || "1");
   const currentStep = steps[step - 1];
   const setStep = (newStep: number) => {
-    router.replace(`${href}?step=${newStep || 1}`, undefined, { shallow: true });
+    router.replace(`${href}?step=${newStep || 1}`);
   };
   const [currentStepIsLoading, setCurrentStepIsLoading] = useState(false);
 
diff --git a/packages/ui/components/head-seo/HeadSeo.tsx b/packages/ui/components/head-seo/HeadSeo.tsx
index 3891960d5c..a45db2f0a5 100644
--- a/packages/ui/components/head-seo/HeadSeo.tsx
+++ b/packages/ui/components/head-seo/HeadSeo.tsx
@@ -1,7 +1,7 @@
 import { merge } from "lodash";
 import type { NextSeoProps } from "next-seo";
 import { NextSeo } from "next-seo";
-import { useRouter } from "next/router";
+import { usePathname } from "next/navigation";
 
 import type { AppImageProps, MeetingImageProps } from "@calcom/lib/OgImages";
 import { constructAppImage, constructGenericImage, constructMeetingImage } from "@calcom/lib/OgImages";
@@ -69,9 +69,9 @@ const buildSeoMeta = (pageProps: {
 };
 
 export const HeadSeo = (props: HeadSeoProps): JSX.Element => {
+  const path = usePathname();
   // The below code sets the defaultUrl for our canonical tags
   // Get the router's path
-  const path = useRouter().asPath;
   const selfHostedOrigin = WEBSITE_URL || "https://cal.com";
   // Set the default URL to either the current URL (if self-hosted) or https://cal.com canonical URL
   const defaultUrl = IS_CALCOM
diff --git a/packages/ui/components/navigation/tabs/HorizontalTabItem.tsx b/packages/ui/components/navigation/tabs/HorizontalTabItem.tsx
index cbdcf4ba2d..a6698503ac 100644
--- a/packages/ui/components/navigation/tabs/HorizontalTabItem.tsx
+++ b/packages/ui/components/navigation/tabs/HorizontalTabItem.tsx
@@ -1,8 +1,8 @@
 import Link from "next/link";
-import { useRouter } from "next/router";
 
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { useUrlMatchesCurrentUrl } from "@calcom/lib/hooks/useUrlMatchesCurrentUrl";
 import type { SVGComponent } from "@calcom/types/SVGComponent";
 
 import { Avatar } from "../../avatar";
@@ -28,9 +28,8 @@ const HorizontalTabItem = function ({
   ...props
 }: HorizontalTabItemProps) {
   const { t, isLocaleReady } = useLocale();
-  const { asPath } = useRouter();
 
-  const isCurrent = asPath === href;
+  const isCurrent = useUrlMatchesCurrentUrl(href);
 
   return (
     <Link
diff --git a/packages/ui/components/navigation/tabs/VerticalTabItem.tsx b/packages/ui/components/navigation/tabs/VerticalTabItem.tsx
index 642157300a..a349be01a9 100644
--- a/packages/ui/components/navigation/tabs/VerticalTabItem.tsx
+++ b/packages/ui/components/navigation/tabs/VerticalTabItem.tsx
@@ -1,9 +1,9 @@
 import Link from "next/link";
-import { useRouter } from "next/router";
 import { Fragment } from "react";
 
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { useUrlMatchesCurrentUrl } from "@calcom/lib/hooks/useUrlMatchesCurrentUrl";
 import type { SVGComponent } from "@calcom/types/SVGComponent";
 
 import { ChevronRight, ExternalLink } from "../../icon";
@@ -39,8 +39,8 @@ const VerticalTabItem = ({
   ...props
 }: VerticalTabItemProps) => {
   const { t } = useLocale();
-  const { asPath } = useRouter();
-  const isCurrent = asPath.startsWith(href);
+  const isCurrent = useUrlMatchesCurrentUrl(href);
+
   return (
     <Fragment key={name}>
       {!props.hidden && (
diff --git a/packages/ui/layouts/WizardLayout.tsx b/packages/ui/layouts/WizardLayout.tsx
index 03a58ee02e..ca4b9d69be 100644
--- a/packages/ui/layouts/WizardLayout.tsx
+++ b/packages/ui/layouts/WizardLayout.tsx
@@ -1,11 +1,11 @@
 import { noop } from "lodash";
-import { useRouter } from "next/router";
+import { usePathname } from "next/navigation";
 import React, { useEffect, useState } from "react";
 import { Toaster } from "react-hot-toast";
 
 import { APP_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { StepCard, Steps, Button, SkeletonText } from "@calcom/ui";
+import { Button, SkeletonText, StepCard, Steps } from "@calcom/ui";
 
 export function WizardLayout({
   children,
@@ -17,7 +17,7 @@ export function WizardLayout({
 } & { maxSteps?: number; currentStep?: number; isOptionalCallback?: () => void }) {
   const { t, isLocaleReady } = useLocale();
   const [meta, setMeta] = useState({ title: "", subtitle: " " });
-  const router = useRouter();
+  const pathname = usePathname();
   const { title, subtitle } = meta;
 
   useEffect(() => {
@@ -25,7 +25,7 @@ export function WizardLayout({
       title: window.document.title,
       subtitle: window.document.querySelector('meta[name="description"]')?.getAttribute("content") || "",
     });
-  }, [router.asPath]);
+  }, [pathname]);
 
   return (
     <div
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 36a639775a..cb6da6730d 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -38,6 +38,7 @@
     "downshift": "^6.1.9",
     "lucide-react": "^0.171.0",
     "next": "^13.4.6",
+    "next-seo": "^4.26.0",
     "react": "^18.2.0",
     "react-colorful": "^5.6.0",
     "react-feather": "^2.0.10",
diff --git a/yarn.lock b/yarn.lock
index 5e9f87a80e..5945263c38 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4332,6 +4332,7 @@ __metadata:
     ical.js: ^1.4.0
     ics: ^2.37.0
     jimp: ^0.16.1
+    next-collect: ^0.2.1
     next-i18next: ^13.2.2
     react-hot-toast: ^2.3.0
     rrule: ^2.7.1
@@ -4700,6 +4701,7 @@ __metadata:
     downshift: ^6.1.9
     lucide-react: ^0.171.0
     next: ^13.4.6
+    next-seo: ^4.26.0
     react: ^18.2.0
     react-colorful: ^5.6.0
     react-feather: ^2.0.10
@@ -4783,7 +4785,6 @@ __metadata:
     "@radix-ui/react-tooltip": ^1.0.0
     "@stripe/react-stripe-js": ^1.10.0
     "@stripe/stripe-js": ^1.35.0
-    "@tanem/react-nprogress": ^5.0.44
     "@tanstack/react-query": ^4.3.9
     "@testing-library/react": ^13.3.0
     "@tremor/react": ^2.0.0
@@ -9475,29 +9476,29 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sentry-internal/tracing@npm:7.52.1":
-  version: 7.52.1
-  resolution: "@sentry-internal/tracing@npm:7.52.1"
+"@sentry-internal/tracing@npm:7.53.1":
+  version: 7.53.1
+  resolution: "@sentry-internal/tracing@npm:7.53.1"
   dependencies:
-    "@sentry/core": 7.52.1
-    "@sentry/types": 7.52.1
-    "@sentry/utils": 7.52.1
+    "@sentry/core": 7.53.1
+    "@sentry/types": 7.53.1
+    "@sentry/utils": 7.53.1
     tslib: ^1.9.3
-  checksum: 6693f95ced8b06853eac46edc841206ceb972f83890fd18095dabe22500b93c2e0642fede3210a56b93d78143cf85a57bf726985697086d1de6846408d309adc
+  checksum: 99fadf422e619faeea436a96b37088ba10850f8e77fca10d7fea6de0c3f1d60b0e8ec1da3b9230f4213fa25f044c99aba585562447ddca0a443d7cbd88c3b81d
   languageName: node
   linkType: hard
 
-"@sentry/browser@npm:7.52.1":
-  version: 7.52.1
-  resolution: "@sentry/browser@npm:7.52.1"
+"@sentry/browser@npm:7.53.1":
+  version: 7.53.1
+  resolution: "@sentry/browser@npm:7.53.1"
   dependencies:
-    "@sentry-internal/tracing": 7.52.1
-    "@sentry/core": 7.52.1
-    "@sentry/replay": 7.52.1
-    "@sentry/types": 7.52.1
-    "@sentry/utils": 7.52.1
+    "@sentry-internal/tracing": 7.53.1
+    "@sentry/core": 7.53.1
+    "@sentry/replay": 7.53.1
+    "@sentry/types": 7.53.1
+    "@sentry/utils": 7.53.1
     tslib: ^1.9.3
-  checksum: 29304f0b3bc24de191aaead914eea3df5ad523277068fa77fed5e86747d40e61e02a1e323b6e3c22166c82e46623a44be6d5238bffe729df62d8dc10e8e36156
+  checksum: 6250949dfbef169669d9e932515f0d965f449ef82be5fb6b813ab170944cef033c758857a3412aa1a1023d77622f88d8599df8e4b0ea126479f8713bd4aa1838
   languageName: node
   linkType: hard
 
@@ -9517,40 +9518,40 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sentry/core@npm:7.52.1":
-  version: 7.52.1
-  resolution: "@sentry/core@npm:7.52.1"
+"@sentry/core@npm:7.53.1":
+  version: 7.53.1
+  resolution: "@sentry/core@npm:7.53.1"
   dependencies:
-    "@sentry/types": 7.52.1
-    "@sentry/utils": 7.52.1
+    "@sentry/types": 7.53.1
+    "@sentry/utils": 7.53.1
     tslib: ^1.9.3
-  checksum: 3acd6770c6214823bcc24c5f333587da8973198280f2181c8dc8f9b7ad9fc4f2e691695b09aa858d8c41fac52df60bf9cff039a34cd50f36309f8cd1dd2c7ce7
+  checksum: 5d42bc30a59cb4459eb99441b631e3f9daec5b2e98c24377aae0329127f8c474a9c32353a96e3f4765e3fb18370756e85f6b873cd26bd591e0040917b7fa9cf4
   languageName: node
   linkType: hard
 
-"@sentry/integrations@npm:7.52.1":
-  version: 7.52.1
-  resolution: "@sentry/integrations@npm:7.52.1"
+"@sentry/integrations@npm:7.53.1":
+  version: 7.53.1
+  resolution: "@sentry/integrations@npm:7.53.1"
   dependencies:
-    "@sentry/types": 7.52.1
-    "@sentry/utils": 7.52.1
+    "@sentry/types": 7.53.1
+    "@sentry/utils": 7.53.1
     localforage: ^1.8.1
     tslib: ^1.9.3
-  checksum: ffac1a593273a42d8864a8562ca1d165cb586b542ac5af23915df9113a14b9861ffc1e1cd62308357a4e7c135c5c884ba171a8e232cde16626a0c58aa4b59059
+  checksum: 55fc930af665afa07f81591f8898c8c10518696d48ec6d9f0864fc05fa5ef754868644f50362bac15734dff93592397ec022d80ded8754b97d64009e63a30712
   languageName: node
   linkType: hard
 
 "@sentry/nextjs@npm:^7.20.0":
-  version: 7.52.1
-  resolution: "@sentry/nextjs@npm:7.52.1"
+  version: 7.53.1
+  resolution: "@sentry/nextjs@npm:7.53.1"
   dependencies:
     "@rollup/plugin-commonjs": 24.0.0
-    "@sentry/core": 7.52.1
-    "@sentry/integrations": 7.52.1
-    "@sentry/node": 7.52.1
-    "@sentry/react": 7.52.1
-    "@sentry/types": 7.52.1
-    "@sentry/utils": 7.52.1
+    "@sentry/core": 7.53.1
+    "@sentry/integrations": 7.53.1
+    "@sentry/node": 7.53.1
+    "@sentry/react": 7.53.1
+    "@sentry/types": 7.53.1
+    "@sentry/utils": 7.53.1
     "@sentry/webpack-plugin": 1.20.0
     chalk: 3.0.0
     rollup: 2.78.0
@@ -9563,66 +9564,66 @@ __metadata:
   peerDependenciesMeta:
     webpack:
       optional: true
-  checksum: 48457c7286d7806ea6aff26d4c7ebfffdeec6efc9686d063370c436bd0cd6fa604de395be931d32ffd49263c21f81d2ae52ceed198f05a8e187ceb0cea552fa4
+  checksum: 3b23a986b99b69453426f32f851eb3140d7ed29f066d2bf2d2562b72b8ca786fffa0c7903f0ab6f9a83ec1defaa2f7ec58db62515f4b95bd436ce33c862644db
   languageName: node
   linkType: hard
 
-"@sentry/node@npm:7.52.1":
-  version: 7.52.1
-  resolution: "@sentry/node@npm:7.52.1"
+"@sentry/node@npm:7.53.1":
+  version: 7.53.1
+  resolution: "@sentry/node@npm:7.53.1"
   dependencies:
-    "@sentry-internal/tracing": 7.52.1
-    "@sentry/core": 7.52.1
-    "@sentry/types": 7.52.1
-    "@sentry/utils": 7.52.1
+    "@sentry-internal/tracing": 7.53.1
+    "@sentry/core": 7.53.1
+    "@sentry/types": 7.53.1
+    "@sentry/utils": 7.53.1
     cookie: ^0.4.1
     https-proxy-agent: ^5.0.0
     lru_map: ^0.3.3
     tslib: ^1.9.3
-  checksum: 27db143a6a27b5e93414599fc75ecd30d4b5e003883adf15c695fdd8c5eab35d57eb2df63b5ed1a7898266015c39e9b42b58bc5aa7c9644148fcabba3aa55736
+  checksum: e1b3c342c75a2a5883d6f1a52bc975bd6fb06643d2c26fd302cc0cfd23ca09509374f8c3afbe16208d007dc862e58b96946125dfebd3ba5856aa791cff04cea2
   languageName: node
   linkType: hard
 
-"@sentry/react@npm:7.52.1":
-  version: 7.52.1
-  resolution: "@sentry/react@npm:7.52.1"
+"@sentry/react@npm:7.53.1":
+  version: 7.53.1
+  resolution: "@sentry/react@npm:7.53.1"
   dependencies:
-    "@sentry/browser": 7.52.1
-    "@sentry/types": 7.52.1
-    "@sentry/utils": 7.52.1
+    "@sentry/browser": 7.53.1
+    "@sentry/types": 7.53.1
+    "@sentry/utils": 7.53.1
     hoist-non-react-statics: ^3.3.2
     tslib: ^1.9.3
   peerDependencies:
     react: 15.x || 16.x || 17.x || 18.x
-  checksum: 597f5261615cfe7438bea6fdd1493701e69a9582ec688580d84adeffa8af16724326da4b34045865d2d7ade1e1698c19d0542cd4b61a5dc6b41d8d8dd538c937
+  checksum: ee08c6a851cae421a134d62e217c192a961930254ea8775e1960420307f4ff08b659405bd883b12698a55085ad1070ac58e618f5799a7edc775368382e807e2d
   languageName: node
   linkType: hard
 
-"@sentry/replay@npm:7.52.1":
-  version: 7.52.1
-  resolution: "@sentry/replay@npm:7.52.1"
+"@sentry/replay@npm:7.53.1":
+  version: 7.53.1
+  resolution: "@sentry/replay@npm:7.53.1"
   dependencies:
-    "@sentry/core": 7.52.1
-    "@sentry/types": 7.52.1
-    "@sentry/utils": 7.52.1
-  checksum: fdb74aa7632a5f474d38722bf8a14fa6c7a524f7379404c24662f042d376954d68c0ac3bfb7c22eea5ef4678431864fef7b0b98ccabf30f3b13ade0b3cdf5fad
+    "@sentry/core": 7.53.1
+    "@sentry/types": 7.53.1
+    "@sentry/utils": 7.53.1
+  checksum: c3757077a971183f5f9f87006449a110c0f951c76a777aa45cb2f057100ec5bc8fcf50e4c58e8117ddc0f44fdaada101384a45b2b5c427048b4ce57eb780711d
   languageName: node
   linkType: hard
 
-"@sentry/types@npm:7.52.1":
-  version: 7.52.1
-  resolution: "@sentry/types@npm:7.52.1"
-  checksum: 9afbba9239107024207418755d189972887c2cd5c3948157531c520be202b5efcd1542b1864120b3d1a535e7f61ebbef802b64ad0cd7ad02d2d8d669454f5abb
+"@sentry/types@npm:7.53.1":
+  version: 7.53.1
+  resolution: "@sentry/types@npm:7.53.1"
+  checksum: 5f76d7d66d5df5d48f66a755e18ae133ea02a9405093b652eb4921ca62c3114343561a2d8067f2be6d9df8dd32d10e30d3ce58150f795600680e6230fb136681
   languageName: node
   linkType: hard
 
-"@sentry/utils@npm:7.52.1":
-  version: 7.52.1
-  resolution: "@sentry/utils@npm:7.52.1"
+"@sentry/utils@npm:7.53.1":
+  version: 7.53.1
+  resolution: "@sentry/utils@npm:7.53.1"
   dependencies:
-    "@sentry/types": 7.52.1
+    "@sentry/types": 7.53.1
     tslib: ^1.9.3
-  checksum: 5e0b8c95db28350fcdcd871ad22c0d2eab4c541be4d5652b2c4018937640d8482fd3fc4fd02967ef5be367ee720735fbc902e50087746d6f59a2bbf2beaf2273
+  checksum: d9556f161a0eed0e1bb279bac12b99492b6212d9b6cabebbcb2d0f196f99b96c319305ec347d8f06382e2dde5782d5ba20a00f762fbfd4e8699e9100ef921804
   languageName: node
   linkType: hard
 
@@ -11450,19 +11451,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@tanem/react-nprogress@npm:^5.0.44":
-  version: 5.0.44
-  resolution: "@tanem/react-nprogress@npm:5.0.44"
-  dependencies:
-    "@babel/runtime": ^7.22.5
-    hoist-non-react-statics: ^3.3.2
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: ada4f28cdad5aad378f5721561a6863f0b58fd0934a76fc9cd4b3c0a6961e359f267254362bbdbdaf89537358dba38465ef0b699154cf8d12c3a9e43a9980a4f
-  languageName: node
-  linkType: hard
-
 "@tanstack/query-core@npm:4.3.8":
   version: 4.3.8
   resolution: "@tanstack/query-core@npm:4.3.8"
@@ -27036,6 +27024,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"next-seo@npm:^4.26.0":
+  version: 4.29.0
+  resolution: "next-seo@npm:4.29.0"
+  peerDependencies:
+    next: ^8.1.1-canary.54 || >=9.0.0
+    react: ">=16.0.0"
+    react-dom: ">=16.0.0"
+  checksum: c725138f2b0a17a4b09afddeeb6d4e1b291220bbd083e8855f7c7646dfb14a742c8dd5a9fd8d5abea4e5a7b978675746b9ce54b119b7d6ceb060a880aace5db8
+  languageName: node
+  linkType: hard
+
 "next-seo@npm:^6.0.0":
   version: 6.1.0
   resolution: "next-seo@npm:6.1.0"