diff --git a/packages/features/users/components/UserTable/EditSheet/DisplayInfo.tsx b/packages/features/users/components/UserTable/EditSheet/DisplayInfo.tsx
index 075699ec33..4f52ba690b 100644
--- a/packages/features/users/components/UserTable/EditSheet/DisplayInfo.tsx
+++ b/packages/features/users/components/UserTable/EditSheet/DisplayInfo.tsx
@@ -1,68 +1,43 @@
 import { classNames } from "@calcom/lib";
-import { useCopy } from "@calcom/lib/hooks/useCopy";
-import type { BadgeProps } from "@calcom/ui";
-import { Badge, Button, Label } from "@calcom/ui";
+import type { IconName } from "@calcom/ui";
+import { Badge, Icon } from "@calcom/ui";
 
-type DisplayInfoType<T extends boolean> = {
+type DisplayInfoType = {
   label: string;
-  value: T extends true ? string[] : string;
-  asBadge?: boolean;
-  isArray?: T;
-  displayCopy?: boolean;
-  badgeColor?: BadgeProps["variant"];
-} & (T extends false
-  ? { displayCopy?: boolean; displayCount?: never }
-  : { displayCopy?: never; displayCount?: number }); // Only show displayCopy if its not an array is false
+  icon?: IconName;
+  value: string | string[];
+  coloredBadges?: boolean;
+};
 
-export function DisplayInfo<T extends boolean>({
-  label,
-  value,
-  asBadge,
-  isArray,
-  displayCopy,
-  displayCount,
-  badgeColor,
-}: DisplayInfoType<T>) {
-  const { copyToClipboard, isCopied } = useCopy();
-  const values = (isArray ? value : [value]) as string[];
+const badgeColors = ["warning", "success", "green", "gray", "blue", "red", "error"] as const;
+
+export function DisplayInfo({ label, icon, value, coloredBadges }: DisplayInfoType) {
+  const displayAsBadges = Array.isArray(value);
 
   return (
-    <div className="flex flex-col">
-      <Label className="text-subtle mb-1 text-xs font-semibold uppercase leading-none">
-        {label} {displayCount && `(${displayCount})`}
-      </Label>
-      <div className={classNames(asBadge ? "mt-0.5 flex space-x-2" : "flex flex-col")}>
-        <>
-          {values.map((v) => {
-            const content = (
-              <span
-                className={classNames(
-                  "text-emphasis inline-flex items-center gap-1 font-normal leading-5",
-                  asBadge ? "text-xs" : "text-sm"
-                )}>
-                {v}
-                {displayCopy && (
-                  <Button
-                    size="sm"
-                    variant="icon"
-                    onClick={() => copyToClipboard(v)}
-                    color="minimal"
-                    className="text-subtle rounded-md"
-                    StartIcon={isCopied ? "clipboard-check" : "clipboard"}
-                  />
-                )}
-              </span>
-            );
-
-            return asBadge ? (
-              <Badge variant={badgeColor} size="sm">
-                {content}
-              </Badge>
-            ) : (
-              content
-            );
-          })}
-        </>
+    <div className="flex items-center gap-6">
+      <div className="flex w-[110px] items-center gap-2">
+        {icon ? <Icon className="text-subtle h-4 w-4" name={icon} /> : null}
+        <label className="text-subtle text-sm font-medium">{label}</label>
+      </div>
+      <div className="flex flex-1">
+        {displayAsBadges ? (
+          <div className="flex flex-wrap gap-2">
+            {value.map((v, idx) => {
+              return coloredBadges ? (
+                <Badge variant={badgeColors[idx % badgeColors.length]} key={v}>
+                  {v}
+                </Badge>
+              ) : (
+                <Badge variant="gray">{v}</Badge>
+              );
+            })}
+          </div>
+        ) : (
+          <span className={classNames("text-emphasis inline-flex items-center gap-1 font-medium leading-5")}>
+            {value}
+          </span>
+        )}
       </div>
     </div>
   );
diff --git a/packages/features/users/components/UserTable/EditSheet/EditUserSheet.tsx b/packages/features/users/components/UserTable/EditSheet/EditUserSheet.tsx
index 34d64272b6..aa14919ce1 100644
--- a/packages/features/users/components/UserTable/EditSheet/EditUserSheet.tsx
+++ b/packages/features/users/components/UserTable/EditSheet/EditUserSheet.tsx
@@ -5,26 +5,19 @@ import { useOrgBranding } from "@calcom/ee/organizations/context/provider";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import {
-  Avatar,
-  Label,
-  Loader,
-  Sheet,
-  SheetContent,
-  SheetBody,
-  Skeleton,
-  SheetHeader,
-  SheetDescription,
-  SheetTitle,
-  SheetFooter,
-} from "@calcom/ui";
+import { Avatar, Loader, Sheet, SheetContent, SheetBody, SheetHeader, SheetFooter } from "@calcom/ui";
 
 import type { Action, State } from "../UserListTable";
 import { DisplayInfo } from "./DisplayInfo";
 import { EditForm } from "./EditUserForm";
+import { OrganizationBanner } from "./OrganizationBanner";
 import { SheetFooterControls } from "./SheetFooterControls";
 import { useEditMode } from "./store";
 
+function removeProtocol(url: string) {
+  return url.replace(/^(https?:\/\/)/, "");
+}
+
 export function EditUserSheet({ state, dispatch }: { state: State; dispatch: Dispatch<Action> }) {
   const { t } = useLocale();
   const { user: selectedUser } = state.editSheet;
@@ -47,67 +40,55 @@ export function EditUserSheet({ state, dispatch }: { state: State; dispatch: Dis
         setEditMode(false);
         dispatch({ type: "CLOSE_MODAL" });
       }}>
-      <SheetContent>
+      <SheetContent className="bg-muted">
         {!isPending && loadedUser ? (
           <>
             {!editMode ? (
               <>
-                <SheetHeader>
-                  <Avatar
-                    asChild
-                    className="h-[36px] w-[36px]"
-                    alt={`${loadedUser?.name} avatar`}
-                    imageSrc={loadedUser.avatarUrl}
-                  />
-                  <SheetTitle>
-                    <Skeleton loading={isPending} as="p" waitForTranslation={false}>
-                      <span className="text-emphasis text-lg font-semibold">
-                        {loadedUser?.name ?? "Nameless User"}
-                      </span>
-                    </Skeleton>
-                  </SheetTitle>
-                  <SheetDescription>
-                    <Skeleton loading={isPending} as="p" waitForTranslation={false}>
-                      <p className="subtle text-sm font-normal">
-                        {orgBranding?.fullDomain ?? WEBAPP_URL}/{loadedUser?.username}
-                      </p>
-                    </Skeleton>
-                  </SheetDescription>
-                </SheetHeader>
-                <SheetBody className="flex flex-col space-y-5">
-                  <DisplayInfo label={t("email")} value={loadedUser?.email ?? ""} displayCopy />
-                  <DisplayInfo
-                    label={t("bio")}
-                    badgeColor="gray"
-                    value={loadedUser?.bio ? loadedUser?.bio : t("user_has_no_bio")}
-                  />
-                  <DisplayInfo label={t("role")} value={loadedUser?.role ?? ""} asBadge badgeColor="blue" />
-                  <DisplayInfo label={t("timezone")} value={loadedUser?.timeZone ?? ""} />
-                  <div className="flex flex-col">
-                    <Label className="text-subtle mb-1 text-xs font-semibold uppercase leading-none">
-                      {t("availability_schedules")}
-                    </Label>
-                    <div className="flex flex-col">
-                      {schedulesNames
-                        ? schedulesNames.map((scheduleName) => (
-                            <span
-                              key={scheduleName}
-                              className="text-emphasis inline-flex items-center gap-1 text-sm font-normal leading-5">
-                              {scheduleName}
-                            </span>
-                          ))
-                        : t("user_has_no_schedules")}
+                <SheetHeader showCloseButton={false}>
+                  <div className="border-sublte bg-default w-full rounded-xl border p-4">
+                    <OrganizationBanner />
+                    <div className="bg-default ml-3 w-fit translate-y-[-50%] rounded-full p-1 ring-1 ring-[#0000000F]">
+                      <Avatar
+                        asChild
+                        size="lg"
+                        alt={`${loadedUser?.name} avatar`}
+                        imageSrc={loadedUser.avatarUrl}
+                      />
                     </div>
+                    <h2 className="text-emphasis font-sans text-2xl font-semibold">
+                      {loadedUser?.name || "Nameless User"}
+                    </h2>
+                    <p className="text-subtle max-h-[3em] overflow-hidden text-ellipsis text-sm font-normal">
+                      {loadedUser?.bio || "This user does not have a bio..."}
+                    </p>
+                  </div>
+                </SheetHeader>
+                <SheetBody className="flex flex-col space-y-8 p-4">
+                  <div className="flex flex-col space-y-4">
+                    <h3 className="text-emphasis mb-1 text-base font-semibold">{t("profile")}</h3>
+                    <DisplayInfo
+                      label="Cal"
+                      value={removeProtocol(
+                        `${orgBranding?.fullDomain ?? WEBAPP_URL}/${loadedUser?.username}`
+                      )}
+                      icon="external-link"
+                    />
+                    <DisplayInfo label={t("email")} value={loadedUser?.email ?? ""} icon="at-sign" />
+                    <DisplayInfo label={t("role")} value={[loadedUser?.role ?? ""]} icon="fingerprint" />
+                    <DisplayInfo label={t("timezone")} value={loadedUser?.timeZone ?? ""} icon="clock" />
+                    <DisplayInfo
+                      label={t("teams")}
+                      value={!teamNames || teamNames.length === 0 ? "" : teamNames}
+                      icon="users"
+                      coloredBadges
+                    />
+                    <DisplayInfo
+                      label={t("availability")}
+                      value={!schedulesNames || schedulesNames.length === 0 ? "" : schedulesNames}
+                      icon="calendar"
+                    />
                   </div>
-
-                  <DisplayInfo
-                    label={t("teams")}
-                    displayCount={teamNames?.length ?? 0}
-                    value={
-                      teamNames && teamNames?.length === 0 ? [t("user_isnt_in_any_teams")] : teamNames ?? "" // TS wtf
-                    }
-                    asBadge={teamNames && teamNames?.length > 0}
-                  />
                 </SheetBody>
                 <SheetFooter>
                   <SheetFooterControls />
diff --git a/packages/features/users/components/UserTable/EditSheet/OrganizationBanner.tsx b/packages/features/users/components/UserTable/EditSheet/OrganizationBanner.tsx
new file mode 100644
index 0000000000..22f0f6267a
--- /dev/null
+++ b/packages/features/users/components/UserTable/EditSheet/OrganizationBanner.tsx
@@ -0,0 +1,24 @@
+import { trpc } from "@calcom/trpc/react";
+
+export function OrganizationBanner() {
+  const {
+    data: currentOrganisation,
+    isPending: isPendingOrg,
+    error,
+  } = trpc.viewer.organizations.listCurrent.useQuery(undefined, {});
+
+  return (
+    <>
+      <div
+        className="block w-full rounded-lg ring-1 ring-[#0000000F]"
+        style={{
+          background: "linear-gradient(to top right, var(--cal-bg-emphasis), var(--cal-bg))",
+          height: currentOrganisation && currentOrganisation?.bannerUrl ? "auto" : "110px",
+        }}>
+        {currentOrganisation && currentOrganisation?.bannerUrl && (
+          <img src={currentOrganisation?.bannerUrl} alt="Organization Banner" className="rounded-lg" />
+        )}
+      </div>
+    </>
+  );
+}
diff --git a/packages/features/users/components/UserTable/EditSheet/SheetFooterControls.tsx b/packages/features/users/components/UserTable/EditSheet/SheetFooterControls.tsx
index fc4244d397..bc899b074a 100644
--- a/packages/features/users/components/UserTable/EditSheet/SheetFooterControls.tsx
+++ b/packages/features/users/components/UserTable/EditSheet/SheetFooterControls.tsx
@@ -13,14 +13,13 @@ function EditModeFooter() {
       <Button
         color="secondary"
         type="button"
-        className="justify-center md:w-1/5"
         onClick={() => {
           setEditMode(false);
         }}>
         {t("cancel")}
       </Button>
 
-      <Button type="submit" className="w-full justify-center" form="edit-user-form" loading={isPending}>
+      <Button type="submit" className="w-fit" form="edit-user-form" loading={isPending}>
         {t("update")}
       </Button>
     </>
@@ -34,7 +33,7 @@ function MoreInfoFooter() {
   return (
     <>
       <SheetClose asChild>
-        <Button color="secondary" type="button" className="w-full justify-center lg:w-1/5">
+        <Button color="secondary" type="button" className="justify-center">
           {t("close")}
         </Button>
       </SheetClose>
@@ -43,8 +42,6 @@ function MoreInfoFooter() {
         onClick={() => {
           setEditMode(true);
         }}
-        className="w-full justify-center gap-2"
-        variant="icon"
         key="EDIT_BUTTON"
         StartIcon="pencil">
         {t("edit")}
diff --git a/packages/ui/components/badge/Badge.tsx b/packages/ui/components/badge/Badge.tsx
index c0d268f099..35c76e326e 100644
--- a/packages/ui/components/badge/Badge.tsx
+++ b/packages/ui/components/badge/Badge.tsx
@@ -14,7 +14,7 @@ export const badgeStyles = cva("font-medium inline-flex items-center justify-cen
       orange: "bg-attention text-attention",
       success: "bg-success text-success",
       green: "bg-success text-success",
-      gray: "bg-subtle text-emphasis",
+      gray: "bg-emphasis text-emphasis",
       blue: "bg-info text-info",
       red: "bg-error text-error",
       error: "bg-error text-error",
diff --git a/packages/ui/components/sheet/sheet.tsx b/packages/ui/components/sheet/sheet.tsx
index e5cdcfd11a..c5a2d16847 100644
--- a/packages/ui/components/sheet/sheet.tsx
+++ b/packages/ui/components/sheet/sheet.tsx
@@ -68,7 +68,7 @@ const SheetContent = React.forwardRef<
           ref={forwardedRef}
           className={classNames(
             // base
-            "fixed inset-y-2 mx-auto flex w-[95vw] flex-1 flex-col overflow-y-auto rounded-md border p-4 shadow-lg focus:outline-none max-sm:inset-x-2 sm:inset-y-2 sm:right-2 sm:max-w-lg sm:p-6",
+            "fixed inset-y-2 mx-auto flex w-[95vw] flex-1 flex-col overflow-y-auto rounded-xl border p-4 shadow-lg focus:outline-none max-sm:inset-x-2 sm:inset-y-2 sm:right-2 sm:max-w-lg sm:p-6",
             // border color
             "border-subtle",
             // background color
@@ -86,21 +86,21 @@ const SheetContent = React.forwardRef<
 
 SheetContent.displayName = "SheetContent";
 
-const SheetHeader = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<"div">>(
-  ({ children, className, ...props }, ref) => {
-    return (
-      <div
-        ref={ref}
-        className="border-subtle flex items-start justify-between gap-x-4 border-b pb-2"
-        {...props}>
-        <div className={classNames("mt-1 flex flex-col gap-y-1", className)}>{children}</div>
+const SheetHeader = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<"div"> & { showCloseButton?: boolean }
+>(({ children, className, showCloseButton = true, ...props }, ref) => {
+  return (
+    <div ref={ref} className="flex items-start justify-between gap-x-4 pb-2" {...props}>
+      <div className={classNames("mt-1 flex flex-col gap-y-1", className)}>{children}</div>
+      {showCloseButton && (
         <SheetPrimitives.Close asChild>
           <Button variant="icon" StartIcon="x" color="minimal" className="aspect-square p-1" />
         </SheetPrimitives.Close>
-      </div>
-    );
-  }
-);
+      )}
+    </div>
+  );
+});
 
 SheetHeader.displayName = "Sheet.Header";