From 8ad5f7bf55df95123709f0f3c1bbe2e9118f4b9a Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@gmail.com>
Date: Tue, 6 Jan 2026 18:26:49 +0100
Subject: [PATCH] feat: add organization banner to user profile page (#26514)

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 .../modules/users/views/users-public-view.tsx | 91 ++++++++++---------
 1 file changed, 50 insertions(+), 41 deletions(-)

diff --git a/apps/web/modules/users/views/users-public-view.tsx b/apps/web/modules/users/views/users-public-view.tsx
index c20d2a5717..7fae8d32fb 100644
--- a/apps/web/modules/users/views/users-public-view.tsx
+++ b/apps/web/modules/users/views/users-public-view.tsx
@@ -1,25 +1,24 @@
 "use client";
 
-import classNames from "classnames";
-import type { InferGetServerSidePropsType } from "next";
-import Link from "next/link";
-import { Toaster } from "sonner";
-
 import {
   sdkActionManager,
   useEmbedNonStylesConfig,
   useEmbedStyles,
   useIsEmbed,
 } from "@calcom/embed-core/embed-iframe";
-import { EventTypeDescriptionLazy as EventTypeDescription } from "@calcom/web/modules/event-types/components";
-import EmptyPage from "@calcom/web/modules/event-types/components/EmptyPage";
 import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
 import useTheme from "@calcom/lib/hooks/useTheme";
 import { UserAvatar } from "@calcom/ui/components/avatar";
 import { Icon } from "@calcom/ui/components/icon";
+import { OrgBanner } from "@calcom/ui/components/organization-banner";
 import { UnpublishedEntity } from "@calcom/ui/components/unpublished-entity";
-
+import { EventTypeDescriptionLazy as EventTypeDescription } from "@calcom/web/modules/event-types/components";
+import EmptyPage from "@calcom/web/modules/event-types/components/EmptyPage";
 import type { getServerSideProps } from "@server/lib/[user]/getServerSideProps";
+import classNames from "classnames";
+import type { InferGetServerSidePropsType } from "next";
+import Link from "next/link";
+import { Toaster } from "sonner";
 
 export type PageProps = InferGetServerSidePropsType<typeof getServerSideProps>;
 export function UserPage(props: PageProps) {
@@ -60,41 +59,51 @@ export function UserPage(props: PageProps) {
           className={classNames(
             shouldAlignCentrally ? "mx-auto" : "",
             isEmbed ? "border-booker border-booker-width  bg-default rounded-md" : "",
-            "max-w-3xl px-4 py-24"
+            "max-w-3xl px-4 py-12"
           )}>
-          <div className="border-subtle bg-default text-default mb-8 rounded-xl border p-4">
-            <UserAvatar
-              size="lg"
-              user={{
-                avatarUrl: user.avatarUrl,
-                profile: user.profile,
-                name: profile.name,
-                username: profile.username,
-              }}
-            />
-            <h1 className="font-cal text-emphasis mb-1 mt-4 text-xl" data-testid="name-title">
-              {profile.name}
-              {!isOrg && user.verified && (
-                <Icon
-                  name="badge-check"
-                  className="mx-1 -mt-1 inline h-6 w-6 fill-blue-500 text-white dark:text-black"
-                />
-              )}
-              {isOrg && (
-                <Icon
-                  name="badge-check"
-                  className="mx-1 -mt-1 inline h-6 w-6 fill-yellow-500 text-white dark:text-black"
-                />
-              )}
-            </h1>
-            {!isBioEmpty && (
-              <>
-                <div
-                  className="text-default wrap-break-word text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
-                  dangerouslySetInnerHTML={{ __html: props.safeBio }}
-                />
-              </>
+          <div className="border-subtle bg-default text-default mb-8 overflow-hidden rounded-xl border">
+            {isOrg && user.profile.organization?.bannerUrl && (
+              <OrgBanner
+                alt={user.profile.organization.name ?? "Organization banner"}
+                imageSrc={user.profile.organization.bannerUrl}
+                className="p-1 border border-subtle rounded-xl w-full object-cover"
+              />
             )}
+            <div className="p-4">
+              <UserAvatar
+                size="lg"
+                user={{
+                  avatarUrl: user.avatarUrl,
+                  profile: user.profile,
+                  name: profile.name,
+                  username: profile.username,
+                }}
+                className={isOrg && user.profile.organization?.bannerUrl ? "-mt-14" : ""}
+              />
+              <h1 className={classNames("font-cal text-emphasis mb-1 text-xl", isOrg && user.profile.organization?.bannerUrl ? "" : "mt-4")} data-testid="name-title">
+                {profile.name}
+                {!isOrg && user.verified && (
+                  <Icon
+                    name="badge-check"
+                    className="mx-1 -mt-1 inline h-6 w-6 fill-blue-500 text-white dark:text-black"
+                  />
+                )}
+                {isOrg && (
+                  <Icon
+                    name="badge-check"
+                    className="mx-1 -mt-1 inline h-6 w-6 fill-yellow-500 text-white dark:text-black"
+                  />
+                )}
+              </h1>
+              {!isBioEmpty && (
+                <>
+                  <div
+                    className="text-default wrap-break-word text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
+                    dangerouslySetInnerHTML={{ __html: props.safeBio }}
+                  />
+                </>
+              )}
+            </div>
           </div>
 
           <div