diff --git a/apps/web/pages/[user].tsx b/apps/web/pages/[user].tsx
index ed5375f41b..d88e9d7a87 100644
--- a/apps/web/pages/[user].tsx
+++ b/apps/web/pages/[user].tsx
@@ -13,6 +13,7 @@ import {
   useEmbedStyles,
   useIsEmbed,
 } from "@calcom/embed-core/embed-iframe";
+import EmptyPage from "@calcom/features/eventtypes/components/EmptyPage";
 import CustomBranding from "@calcom/lib/CustomBranding";
 import defaultEvents, {
   getDynamicEventDescription,
@@ -103,7 +104,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
       telemetry.event(telemetryEventTypes.embedView, collectPageParameters("/[user]"));
     }
   }, [telemetry, router.asPath]);
-
+  const isEventListEmpty = eventTypes.length === 0;
   return (
     <>
       <HeadSeo
@@ -148,7 +149,11 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
             </div>
           )}
           <div
-            className="rounded-md border border-neutral-200 dark:border-neutral-700 dark:hover:border-neutral-600"
+            className={classNames(
+              "rounded-md ",
+              !isEventListEmpty &&
+                "border border-neutral-200 dark:border-neutral-700 dark:hover:border-neutral-600"
+            )}
             data-testid="event-types">
             {user.away ? (
               <div className="overflow-hidden rounded-sm border dark:border-gray-900">
@@ -195,16 +200,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
               ))
             )}
           </div>
-          {eventTypes.length === 0 && (
-            <div className="overflow-hidden rounded-sm border dark:border-gray-900">
-              <div className="p-8 text-center text-gray-400 dark:text-white">
-                <h2 className="font-cal mb-2 text-3xl text-gray-600 dark:text-white">
-                  {t("uh_oh") as string}
-                </h2>
-                <p className="mx-auto max-w-md">{t("no_event_types_have_been_setup") as string}</p>
-              </div>
-            </div>
-          )}
+          {isEventListEmpty && <EmptyPage name={user.name ?? "User"} />}
         </main>
         <Toaster position="bottom-right" />
       </div>
diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json
index ebfcb46371..7b11851a85 100644
--- a/apps/web/public/static/locales/en/common.json
+++ b/apps/web/public/static/locales/en/common.json
@@ -1326,5 +1326,7 @@
   "saml_sp_acs_url_copied": "ACS URL copied!",
   "saml_sp_entity_id_copied": "SP Entity ID copied!",
   "saml_btn_configure": "Configure",
-  "add_calendar": "Add Calendar"
+  "add_calendar": "Add Calendar",
+  "no_event_types": "No event types setup",
+  "no_event_types_description": "{{name}} has not setup any event types for you to book."
 }
diff --git a/packages/features/eventtypes/components/EmptyPage.tsx b/packages/features/eventtypes/components/EmptyPage.tsx
new file mode 100644
index 0000000000..be7e1874a7
--- /dev/null
+++ b/packages/features/eventtypes/components/EmptyPage.tsx
@@ -0,0 +1,44 @@
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+
+const SkeletonEventType = () => {
+  return (
+    <div className="dark:bg-darkgray-100 h-24 w-full bg-white">
+      <div className="p-5">
+        <div className="flex space-x-2">
+          <div className="dark:bg-darkgray-400 h-2 w-1/6 rounded-md bg-neutral-200" />
+          <div className="dark:bg-darkgray-400 h-2 w-1/6 rounded-md bg-neutral-200" />
+        </div>
+        <div className="flex space-x-2 py-2">
+          <div className="dark:bg-darkgray-400 h-2 w-1/12 rounded-md bg-neutral-200" />
+          <div className="dark:bg-darkgray-400 h-2 w-1/6 rounded-md bg-neutral-200" />
+          <div className="dark:bg-darkgray-400 h-2 w-1/12 rounded-md bg-neutral-200" />
+        </div>
+        <div className="flex space-x-2 py-1">
+          <div className="dark:bg-darkgray-200 h-6 w-1/6 rounded-md bg-neutral-300" />
+          <div className="dark:bg-darkgray-200 h-6 w-1/6 rounded-md bg-neutral-300" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+function EmptyPage({ name }: { name: string }) {
+  const { t } = useLocale();
+  return (
+    <div className="relative text-center">
+      <div className="dark:divide-darkgray-100 flex flex-col divide-y-2 blur-[3px]">
+        <SkeletonEventType />
+        <SkeletonEventType />
+        <SkeletonEventType />
+      </div>
+      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transform">
+        <h3 className="text-lg font-semibold text-gray-600 dark:text-white">{t("no_event_types")} </h3>
+        <h4 className="text-sm leading-normal text-gray-600 dark:text-white">
+          {t("no_event_types_description", { name })}
+        </h4>
+      </div>
+    </div>
+  );
+}
+
+export default EmptyPage;