diff --git a/app/features/team/routes/t.$customUrl.tsx b/app/features/team/routes/t.$customUrl.tsx
index d694f5758..14fdf1e44 100644
--- a/app/features/team/routes/t.$customUrl.tsx
+++ b/app/features/team/routes/t.$customUrl.tsx
@@ -19,6 +19,7 @@ import type { DetailedTeamMember, TeamResultPeek } from "../team-types";
 import { Avatar } from "~/components/Avatar";
 import { useTranslation } from "~/hooks/useTranslation";
 import { Flag } from "~/components/Flag";
+import clsx from "clsx";
 
 export const meta: MetaFunction = ({
   data,
@@ -78,11 +79,14 @@ function TeamBanner() {
 
   return (
     <div
-      className="team__banner"
+      className={clsx("team__banner", {
+        team__banner__placeholder: !team.bannerSrc,
+      })}
       style={
         {
-          // xxx: some fallback banner image
-          "--team-banner-img": team.bannerSrc ? `url("${team.bannerSrc}")` : "",
+          "--team-banner-img": team.bannerSrc
+            ? `url("${team.bannerSrc}")`
+            : undefined,
         } as any
       }
     >
diff --git a/app/features/team/team.css b/app/features/team/team.css
index 5fdd7935a..227edbb21 100644
--- a/app/features/team/team.css
+++ b/app/features/team/team.css
@@ -15,6 +15,11 @@
   padding: var(--s-5);
 }
 
+.team__banner__placeholder {
+  height: 12rem;
+  background-color: var(--theme-transparent);
+}
+
 .team__banner__flags {
   grid-area: flags;
   margin-top: -5px;