diff --git a/apps/web/components/booking/pages/AvailabilityPage.tsx b/apps/web/components/booking/pages/AvailabilityPage.tsx
index 29c83cb774..09644bef3f 100644
--- a/apps/web/components/booking/pages/AvailabilityPage.tsx
+++ b/apps/web/components/booking/pages/AvailabilityPage.tsx
@@ -286,7 +286,7 @@ const useDateSelected = ({ timeZone }: { timeZone?: string }) => {
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [router.query.date]);
 
   const setSelectedDate = (newDate: Date) => {
     router.replace(
@@ -314,6 +314,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
   const { contracts } = useContracts();
   const availabilityDatePickerEmbedStyles = useEmbedStyles("availabilityDatePicker");
   const shouldAlignCentrallyInEmbed = useEmbedNonStylesConfig("align") !== "left";
+
   const shouldAlignCentrally = !isEmbed || shouldAlignCentrallyInEmbed;
   const isBackgroundTransparent = useIsBackgroundTransparent();
 
@@ -350,6 +351,10 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
     }
   }, [telemetry]);
 
+  // Avoid embed styling flicker. Till embed status is confirmed, don't render.
+  if (isEmbed === null) {
+    return null;
+  }
   // Recurring event sidebar requires more space
   const maxWidth = isAvailableTimesVisible
     ? recurringEventCount
diff --git a/apps/web/pages/[user]/[type].tsx b/apps/web/pages/[user]/[type].tsx
index fc0cb92023..713841026c 100644
--- a/apps/web/pages/[user]/[type].tsx
+++ b/apps/web/pages/[user]/[type].tsx
@@ -1,10 +1,13 @@
 import { UserPlan } from "@prisma/client";
 import dayjs from "dayjs";
-import { GetStaticPropsContext } from "next";
+import { GetStaticPropsContext, GetStaticPaths } from "next";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
 import { JSONObject } from "superjson/dist/types";
 import { z } from "zod";
 
 import { locationHiddenFilter, LocationObject } from "@calcom/app-store/locations";
+import { useIsEmbed } from "@calcom/embed-core/embed-iframe";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { getDefaultEvent, getGroupName, getUsernameList } from "@calcom/lib/defaultEvents";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -19,7 +22,14 @@ export type AvailabilityPageProps = inferSSRProps<typeof getStaticProps>;
 
 export default function Type(props: AvailabilityPageProps) {
   const { t } = useLocale();
-
+  const isEmbed = useIsEmbed();
+  useEffect(() => {
+    // Embed background is handled in _document.tsx but this particular page(/[user][/type] is statically rendered and thus doesn't have `embed` param at that time)
+    // So, for static pages, handle the embed background here. Make sure to always keep it consistent with _document.tsx
+    if (isEmbed) {
+      document.body.style.background = "transparent";
+    }
+  }, [isEmbed]);
   return props.away ? (
     <div className="h-screen dark:bg-neutral-900">
       <main className="mx-auto max-w-3xl px-4 py-24">
@@ -284,6 +294,7 @@ async function getDynamicGroupPageProps(context: GetStaticPropsContext) {
 const paramsSchema = z.object({ type: z.string(), user: z.string() });
 
 export const getStaticProps = async (context: GetStaticPropsContext) => {
+  console.log("STATIC CALL", context.params);
   const { user: userParam } = paramsSchema.parse(context.params);
   // dynamic groups are not generated at build time, but otherwise are probably cached until infinity.
   const isDynamicGroup = userParam.includes("+");
@@ -294,6 +305,6 @@ export const getStaticProps = async (context: GetStaticPropsContext) => {
   }
 };
 
-export const getStaticPaths = async () => {
+export const getStaticPaths: GetStaticPaths = async () => {
   return { paths: [], fallback: "blocking" };
 };
diff --git a/apps/web/pages/_document.tsx b/apps/web/pages/_document.tsx
index a927bd5f34..e447b9a46b 100644
--- a/apps/web/pages/_document.tsx
+++ b/apps/web/pages/_document.tsx
@@ -11,9 +11,13 @@ class MyDocument extends Document<Props> {
 
   render() {
     const props = this.props;
-    const { locale } = this.props.__NEXT_DATA__;
+    const { locale, gssp } = this.props.__NEXT_DATA__;
     const dir = locale === "ar" || locale === "he" ? "rtl" : "ltr";
 
+    // gssp -> getServerSideProps allow us to know that this page was rendered server side and thus would have ctx.req.url with embed query param(if it was there in the request)
+    // In that case only, we should consider embed to be enabled. For other cases it should be handled at client side and the component should ensure that flicker due to changing css doesn't occur
+    const isEmbedCorrectlyDetected = gssp && props.isEmbed;
+
     return (
       <Html lang={locale} dir={dir}>
         <Head>
@@ -28,8 +32,8 @@ class MyDocument extends Document<Props> {
 
         {/* Keep the embed hidden till parent initializes and gives it the appropriate styles */}
         <body
-          className={props.isEmbed ? "bg-transparent" : "bg-gray-100 dark:bg-neutral-900"}
-          style={props.isEmbed ? { display: "none" } : {}}>
+          className={isEmbedCorrectlyDetected ? "bg-transparent" : "bg-gray-100 dark:bg-neutral-900"}
+          style={isEmbedCorrectlyDetected ? { display: "none" } : {}}>
           <Main />
           <NextScript />
         </body>
diff --git a/packages/embeds/embed-core/src/embed-iframe.ts b/packages/embeds/embed-core/src/embed-iframe.ts
index 2b344b01cf..a28a15b9a7 100644
--- a/packages/embeds/embed-core/src/embed-iframe.ts
+++ b/packages/embeds/embed-core/src/embed-iframe.ts
@@ -229,7 +229,7 @@ export const useIsEmbed = () => {
   // We can't simply return isEmbed() from this method.
   // isEmbed() returns different values on server and browser, which messes up the hydration.
   // TODO: We can avoid using document.URL and instead use Router.
-  const [_isEmbed, setIsEmbed] = useState(false);
+  const [_isEmbed, setIsEmbed] = useState<boolean | null>(null);
   useEffect(() => {
     setIsEmbed(isEmbed());
   }, []);