From 65532f18f5ac58417b80a57b71934cebdb3c8a7e Mon Sep 17 00:00:00 2001
From: ragnep <ragneinfo@gmail.com>
Date: Mon, 23 Mar 2026 15:51:11 +0200
Subject: [PATCH 1/2] wip

Signed-off-by: ragnep <ragneinfo@gmail.com>
---
 components/waves/layout/WavesLayout.tsx       |  15 +-
 components/waves/public/LoggedOutSkeleton.tsx | 173 ++++++++++++++++++
 components/waves/public/PublicWaveShell.tsx   | 164 ++---------------
 .../waves/public/usePublicWaveShellState.ts   |   2 +
 4 files changed, 198 insertions(+), 156 deletions(-)
 create mode 100644 components/waves/public/LoggedOutSkeleton.tsx

diff --git a/components/waves/layout/WavesLayout.tsx b/components/waves/layout/WavesLayout.tsx
index 6f3c7548a2..ce3fbbc313 100644
--- a/components/waves/layout/WavesLayout.tsx
+++ b/components/waves/layout/WavesLayout.tsx
@@ -54,6 +54,10 @@ function getNotAuthenticatedContent({
   readonly isApp: boolean;
   readonly publicWaveShellState: PublicWaveShellState;
 }): ReactNode {
+  if (isApp) {
+    return <ConnectWallet />;
+  }
+
   if (activeWaveId === null || publicWaveShellState.status === "unavailable") {
     return <ConnectWallet />;
   }
@@ -64,14 +68,6 @@ function getNotAuthenticatedContent({
     </div>
   );
 
-  if (isApp) {
-    return (
-      <div className="tw-flex-1" id="waves-content">
-        {publicShell}
-      </div>
-    );
-  }
-
   return (
     <div className="tw-flex-1" id="waves-content">
       <WavesDesktop
@@ -93,7 +89,8 @@ function WavesLayoutContent({ children }: { readonly children: ReactNode }) {
   const searchParams = useSearchParams();
   const activeWaveId = getActiveWaveIdFromUrl({ pathname, searchParams });
   const publicWaveShellState = usePublicWaveShellState(activeWaveId, {
-    enabled: contentState === "not-authenticated" && activeWaveId !== null,
+    enabled:
+      !isApp && contentState === "not-authenticated" && activeWaveId !== null,
   });
 
   const containerClassName =
diff --git a/components/waves/public/LoggedOutSkeleton.tsx b/components/waves/public/LoggedOutSkeleton.tsx
new file mode 100644
index 0000000000..0b694247b3
--- /dev/null
+++ b/components/waves/public/LoggedOutSkeleton.tsx
@@ -0,0 +1,173 @@
+const PREVIEW_ROWS = [
+  {
+    id: "preview-1",
+    nameWidth: "tw-w-24",
+    timeWidth: "tw-w-12",
+    lines: ["tw-w-5/6", "tw-w-2/5"],
+    hasAttachment: false,
+    reactions: 0,
+    opacityClass: "tw-opacity-90",
+  },
+  {
+    id: "preview-2",
+    nameWidth: "tw-w-32",
+    timeWidth: "tw-w-16",
+    lines: ["tw-w-11/12", "tw-w-full", "tw-w-4/5", "tw-w-3/5"],
+    hasAttachment: true,
+    reactions: 2,
+    opacityClass: "tw-opacity-60",
+  },
+  {
+    id: "preview-3",
+    nameWidth: "tw-w-20",
+    timeWidth: "tw-w-10",
+    lines: ["tw-w-1/3"],
+    hasAttachment: false,
+    reactions: 1,
+    opacityClass: "tw-opacity-90",
+  },
+  {
+    id: "preview-4",
+    nameWidth: "tw-w-28",
+    timeWidth: "tw-w-14",
+    lines: ["tw-w-3/4", "tw-w-5/6", "tw-w-2/5"],
+    hasAttachment: false,
+    reactions: 0,
+    opacityClass: "tw-opacity-60",
+  },
+  {
+    id: "preview-5",
+    nameWidth: "tw-w-36",
+    timeWidth: "tw-w-12",
+    lines: ["tw-w-3/5"],
+    hasAttachment: true,
+    reactions: 3,
+    opacityClass: "tw-opacity-90",
+  },
+  {
+    id: "preview-6",
+    nameWidth: "tw-w-24",
+    timeWidth: "tw-w-12",
+    lines: ["tw-w-full", "tw-w-4/5", "tw-w-11/12", "tw-w-1/5"],
+    hasAttachment: false,
+    reactions: 0,
+    opacityClass: "tw-opacity-60",
+  },
+  {
+    id: "preview-7",
+    nameWidth: "tw-w-20",
+    timeWidth: "tw-w-14",
+    lines: ["tw-w-1/2"],
+    hasAttachment: false,
+    reactions: 0,
+    opacityClass: "tw-opacity-90",
+  },
+] as const;
+
+const REACTION_KEYS = ["first", "second", "third", "fourth"] as const;
+
+function SkeletonRows({ rowKeyPrefix }: { readonly rowKeyPrefix: string }) {
+  return (
+    <>
+      {PREVIEW_ROWS.map((row) => (
+        <div
+          key={`${rowKeyPrefix}-${row.id}`}
+          className={`tw-mx-auto tw-flex tw-w-full tw-max-w-5xl tw-items-start tw-gap-4 ${row.opacityClass}`}
+        >
+          <div className="tw-size-11 tw-flex-shrink-0 tw-rounded-full tw-bg-iron-600 tw-shadow-sm" />
+
+          <div className="tw-flex-1 tw-space-y-1.5 tw-pt-0.5">
+            <div className="tw-mb-2 tw-flex tw-items-baseline tw-gap-3">
+              <div
+                className={`tw-h-3.5 tw-rounded-md tw-bg-iron-500 ${row.nameWidth}`}
+              />
+              <div
+                className={`tw-h-2.5 tw-rounded-md tw-bg-iron-700 ${row.timeWidth}`}
+              />
+            </div>
+
+            <div className="tw-w-full tw-space-y-2.5">
+              {row.lines.map((lineWidth) => (
+                <div
+                  key={lineWidth}
+                  className={`tw-h-3 tw-rounded-sm tw-bg-iron-500 ${lineWidth}`}
+                />
+              ))}
+            </div>
+
+            {row.hasAttachment && (
+              <div className="tw-mt-3 tw-h-48 tw-w-full tw-max-w-80 tw-rounded-lg tw-border tw-border-solid tw-border-iron-700 tw-bg-iron-800 tw-shadow-sm" />
+            )}
+
+            {row.reactions > 0 && (
+              <div className="tw-flex tw-gap-2 tw-pt-2">
+                {REACTION_KEYS.slice(0, row.reactions).map((reactionKey) => (
+                  <div
+                    key={reactionKey}
+                    className="tw-h-6 tw-w-10 tw-rounded-full tw-border tw-border-solid tw-border-iron-700 tw-bg-iron-800"
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      ))}
+    </>
+  );
+}
+
+function PlaceholderSkeleton() {
+  return (
+    <div className="tw-flex tw-h-full tw-select-none tw-flex-col tw-opacity-50 tw-blur-md">
+      <div className="tw-flex-1 tw-overflow-hidden">
+        <div className="tw-flex tw-h-full tw-flex-col tw-justify-end tw-gap-6">
+          <SkeletonRows rowKeyPrefix="primary" />
+          <SkeletonRows rowKeyPrefix="extended" />
+        </div>
+      </div>
+
+      <div className="tw-pt-8">
+        <div className="tw-mx-auto tw-w-full tw-max-w-5xl tw-rounded-xl tw-border tw-border-solid tw-border-iron-800/80 tw-bg-black/35 tw-p-3.5 tw-shadow-[0_24px_60px_rgba(0,0,0,0.4)]">
+          <div className="tw-flex tw-items-end tw-gap-3">
+            <div className="tw-flex-1 tw-rounded-xl tw-border tw-border-solid tw-border-iron-600 tw-bg-iron-800/95 tw-p-3 tw-shadow-sm">
+              <div className="tw-mb-3 tw-space-y-2">
+                <div className="tw-h-3 tw-w-2/5 tw-rounded-sm tw-bg-iron-400" />
+                <div className="tw-h-3 tw-w-1/3 tw-rounded-sm tw-bg-iron-600" />
+              </div>
+
+              <div className="tw-flex tw-items-center tw-justify-between tw-gap-3">
+                <div className="tw-flex tw-items-center tw-gap-2">
+                  <div className="tw-h-8 tw-w-8 tw-rounded-full tw-bg-iron-700" />
+                  <div className="tw-h-8 tw-w-8 tw-rounded-full tw-bg-iron-700" />
+                  <div className="tw-h-8 tw-w-20 tw-rounded-full tw-bg-iron-700" />
+                </div>
+
+                <div className="tw-h-7 tw-w-7 tw-rounded-full tw-bg-iron-700" />
+              </div>
+            </div>
+
+            <div className="tw-flex tw-h-11 tw-w-11 tw-flex-shrink-0 tw-rounded-xl tw-border tw-border-solid tw-border-iron-600 tw-bg-iron-700" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function LoggedOutSkeleton() {
+  return (
+    <div
+      aria-hidden="true"
+      className="tw-pointer-events-none tw-absolute tw-inset-0 tw-overflow-hidden"
+    >
+      <div className="tw-absolute tw-left-1/4 tw-top-1/4 tw-size-96 tw-rounded-full tw-bg-white/5 tw-mix-blend-screen tw-blur-3xl" />
+      <div className="tw-absolute tw-bottom-1/4 tw-right-1/4 tw-size-96 tw-scale-125 tw-rounded-full tw-bg-iron-400/5 tw-mix-blend-screen tw-blur-3xl" />
+
+      <div className="tw-absolute tw-inset-0 tw-overflow-hidden tw-p-6 md:tw-p-8">
+        <PlaceholderSkeleton />
+      </div>
+
+      <div className="tw-absolute tw-inset-0 tw-bg-gradient-to-b tw-from-black/60 tw-via-black/30 tw-to-black" />
+    </div>
+  );
+}
diff --git a/components/waves/public/PublicWaveShell.tsx b/components/waves/public/PublicWaveShell.tsx
index 5236831408..2201ecc444 100644
--- a/components/waves/public/PublicWaveShell.tsx
+++ b/components/waves/public/PublicWaveShell.tsx
@@ -3,8 +3,10 @@
 import ConnectWallet from "@/components/common/ConnectWallet";
 import SpinnerLoader from "@/components/common/SpinnerLoader";
 import HeaderUserConnect from "@/components/header/user/HeaderUserConnect";
+import WavePicture from "@/components/waves/WavePicture";
 import { formatCount } from "@/helpers/format.helpers";
 import { LockClosedIcon } from "@heroicons/react/24/outline";
+import LoggedOutSkeleton from "./LoggedOutSkeleton";
 import {
   type PublicWaveShellData,
   usePublicWaveShellState,
@@ -14,73 +16,6 @@ interface PublicWaveShellProps {
   readonly waveId: string;
 }
 
-const LOCKED_PREVIEW_ROWS = [
-  {
-    id: "preview-1",
-    nameWidth: "tw-w-24",
-    timeWidth: "tw-w-12",
-    lines: ["tw-w-5/6", "tw-w-2/5"],
-    hasAttachment: false,
-    reactions: 0,
-    opacityClass: "tw-opacity-90",
-  },
-  {
-    id: "preview-2",
-    nameWidth: "tw-w-32",
-    timeWidth: "tw-w-16",
-    lines: ["tw-w-11/12", "tw-w-full", "tw-w-4/5", "tw-w-3/5"],
-    hasAttachment: true,
-    reactions: 2,
-    opacityClass: "tw-opacity-60",
-  },
-  {
-    id: "preview-3",
-    nameWidth: "tw-w-20",
-    timeWidth: "tw-w-10",
-    lines: ["tw-w-1/3"],
-    hasAttachment: false,
-    reactions: 1,
-    opacityClass: "tw-opacity-90",
-  },
-  {
-    id: "preview-4",
-    nameWidth: "tw-w-28",
-    timeWidth: "tw-w-14",
-    lines: ["tw-w-3/4", "tw-w-5/6", "tw-w-2/5"],
-    hasAttachment: false,
-    reactions: 0,
-    opacityClass: "tw-opacity-60",
-  },
-  {
-    id: "preview-5",
-    nameWidth: "tw-w-36",
-    timeWidth: "tw-w-12",
-    lines: ["tw-w-3/5"],
-    hasAttachment: true,
-    reactions: 3,
-    opacityClass: "tw-opacity-90",
-  },
-  {
-    id: "preview-6",
-    nameWidth: "tw-w-24",
-    timeWidth: "tw-w-12",
-    lines: ["tw-w-full", "tw-w-4/5", "tw-w-11/12", "tw-w-1/5"],
-    hasAttachment: false,
-    reactions: 0,
-    opacityClass: "tw-opacity-60",
-  },
-  {
-    id: "preview-7",
-    nameWidth: "tw-w-20",
-    timeWidth: "tw-w-14",
-    lines: ["tw-w-1/2"],
-    hasAttachment: false,
-    reactions: 0,
-    opacityClass: "tw-opacity-90",
-  },
-] as const;
-const REACTION_KEYS = ["first", "second", "third", "fourth"] as const;
-
 function compactDescriptionText(text: string): string {
   const normalized = text
     .replaceAll(/https?:\/\/\S+/g, "")
@@ -96,70 +31,6 @@ function compactDescriptionText(text: string): string {
   return `${shortened.slice(0, safeBoundary > 180 ? safeBoundary : 237)}...`;
 }
 
-function PublicWaveLockedPreview() {
-  return (
-    <div
-      aria-hidden="true"
-      className="tw-pointer-events-none tw-absolute tw-inset-0 tw-overflow-hidden"
-    >
-      <div className="tw-absolute tw-left-1/4 tw-top-1/4 tw-size-96 tw-rounded-full tw-bg-white/5 tw-mix-blend-screen tw-blur-3xl" />
-      <div className="tw-absolute tw-bottom-1/4 tw-right-1/4 tw-size-96 tw-scale-125 tw-rounded-full tw-bg-iron-400/5 tw-mix-blend-screen tw-blur-3xl" />
-
-      <div className="tw-absolute tw-inset-0 tw-overflow-hidden tw-p-6 md:tw-p-8">
-        <div className="tw-flex tw-h-full tw-select-none tw-flex-col tw-justify-end tw-gap-6 tw-opacity-50 tw-blur-md">
-          {LOCKED_PREVIEW_ROWS.map((row) => (
-            <div
-              key={row.id}
-              className={`tw-mx-auto tw-flex tw-w-full tw-max-w-5xl tw-items-start tw-gap-4 ${row.opacityClass}`}
-            >
-              <div className="tw-size-11 tw-flex-shrink-0 tw-rounded-full tw-bg-iron-600 tw-shadow-sm" />
-
-              <div className="tw-flex-1 tw-space-y-1.5 tw-pt-0.5">
-                <div className="tw-mb-2 tw-flex tw-items-baseline tw-gap-3">
-                  <div
-                    className={`tw-h-3.5 tw-rounded-md tw-bg-iron-400 ${row.nameWidth}`}
-                  />
-                  <div
-                    className={`tw-h-2.5 tw-rounded-md tw-bg-iron-700 ${row.timeWidth}`}
-                  />
-                </div>
-
-                <div className="tw-w-full tw-space-y-2.5">
-                  {row.lines.map((lineWidth) => (
-                    <div
-                      key={lineWidth}
-                      className={`tw-h-3 tw-rounded-sm tw-bg-iron-300 ${lineWidth}`}
-                    />
-                  ))}
-                </div>
-
-                {row.hasAttachment && (
-                  <div className="tw-mt-3 tw-h-48 tw-w-full tw-max-w-80 tw-rounded-lg tw-border tw-border-solid tw-border-iron-700 tw-bg-iron-800 tw-shadow-sm" />
-                )}
-
-                {row.reactions > 0 && (
-                  <div className="tw-flex tw-gap-2 tw-pt-2">
-                    {REACTION_KEYS.slice(0, row.reactions).map(
-                      (reactionKey) => (
-                        <div
-                          key={reactionKey}
-                          className="tw-h-6 tw-w-10 tw-rounded-full tw-border tw-border-solid tw-border-iron-700 tw-bg-iron-800"
-                        />
-                      )
-                    )}
-                  </div>
-                )}
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      <div className="tw-absolute tw-inset-0 tw-bg-gradient-to-b tw-from-black/60 tw-via-black/30 tw-to-black" />
-    </div>
-  );
-}
-
 function PublicWaveLoadingState() {
   return (
     <div className="tw-flex tw-min-h-full tw-flex-1 tw-flex-col tw-items-center tw-justify-center tw-py-8">
@@ -185,12 +56,12 @@ function PublicWaveShellContent({
   return (
     <div className="tw-relative tw-flex tw-h-full tw-min-h-0 tw-min-w-0 tw-flex-col tw-overflow-hidden tw-bg-black">
       <div className="tw-relative tw-min-h-0 tw-flex-1 tw-overflow-hidden">
-        <PublicWaveLockedPreview />
+        <LoggedOutSkeleton />
         <div className="tw-pointer-events-none tw-absolute tw-left-1/2 tw-top-1/2 tw-size-96 -tw-translate-x-1/2 -tw-translate-y-1/2 tw-scale-125 tw-rounded-full tw-bg-white/10 tw-blur-3xl" />
 
         <div className="tw-absolute tw-inset-0 tw-z-10 tw-overflow-y-auto tw-px-4 tw-py-8 tw-scrollbar-thin tw-scrollbar-track-iron-800 tw-scrollbar-thumb-iron-500 desktop-hover:hover:tw-scrollbar-thumb-iron-300 lg:tw-px-8">
           <div className="tw-flex tw-min-h-full tw-items-center tw-justify-center">
-            <section className="tw-group tw-relative tw-z-10 tw-flex tw-w-full tw-max-w-xl tw-flex-col tw-overflow-hidden tw-rounded-xl tw-border tw-border-solid tw-border-iron-800 tw-bg-iron-950 tw-shadow-2xl">
+            <section className="tw-group tw-relative tw-z-10 tw-flex tw-w-full tw-max-w-lg tw-flex-col tw-overflow-hidden tw-rounded-xl tw-border tw-border-solid tw-border-iron-800 tw-bg-iron-950 tw-shadow-2xl">
               <div className="tw-absolute tw-inset-x-0 tw-top-0 tw-h-px tw-bg-gradient-to-r tw-from-transparent tw-via-white/10 tw-to-transparent tw-opacity-80" />
               <div
                 className="tw-pointer-events-none tw-absolute tw-inset-0 tw-opacity-5 tw-mix-blend-overlay"
@@ -201,26 +72,25 @@ function PublicWaveShellContent({
               />
 
               <div className="tw-relative tw-z-10 tw-flex tw-flex-col tw-items-center tw-px-6 tw-pb-10 tw-pt-10 tw-text-center md:tw-px-10">
-                <div className="tw-mb-8 tw-flex tw-items-center tw-gap-2.5 tw-rounded-lg tw-border tw-border-solid tw-border-iron-800 tw-bg-[#151515] tw-px-3 tw-py-1.5 tw-shadow-inner">
-                  <LockClosedIcon
-                    className="tw-size-3.5 tw-text-iron-300"
-                    strokeWidth={2.5}
-                  />
-                  <div className="tw-h-3 tw-w-[1px] tw-bg-iron-700" />
-                  <span className="tw-text-[10px] tw-font-bold tw-uppercase tw-tracking-widest tw-text-iron-400">
-                    Members Only
-                  </span>
+                <div className="tw-mb-1 tw-flex tw-max-w-md tw-flex-col tw-items-center tw-justify-center tw-gap-4">
+                  <div className="tw-size-12 tw-flex-shrink-0 tw-overflow-hidden tw-rounded-full tw-ring-1 tw-ring-white/10 sm:tw-size-14">
+                    <WavePicture
+                      name={wave.name}
+                      picture={wave.picture}
+                      contributors={[]}
+                    />
+                  </div>
+                  <h2 className="tw-mb-2 tw-bg-gradient-to-b tw-from-white tw-to-iron-400 tw-bg-clip-text tw-text-xl tw-font-semibold tw-leading-[1.05] tw-tracking-tighter tw-text-transparent sm:tw-text-2xl md:tw-text-3xl">
+                    {wave.name}
+                  </h2>
                 </div>
-                <h2 className="tw-mb-4 tw-bg-gradient-to-b tw-from-white tw-to-iron-400 tw-bg-clip-text tw-text-xl tw-font-semibold tw-leading-[1.05] tw-tracking-tighter tw-text-transparent sm:tw-text-2xl md:tw-text-3xl">
-                  {wave.name}
-                </h2>
                 {hasDescription && (
-                  <p className="tw-mb-10 tw-max-w-md tw-text-pretty tw-text-sm tw-font-normal tw-text-iron-400 md:tw-text-base">
+                  <p className="tw-mb-10 tw-pb-0 tw-max-w-md tw-text-pretty tw-text-sm tw-font-normal tw-text-iron-400 md:tw-text-md">
                     {description}
                   </p>
                 )}
 
-                <div className="tw-mb-10 tw-flex tw-w-full tw-items-center tw-justify-center tw-gap-8 tw-px-4 md:tw-gap-12">
+                <div className="tw-mb-8 tw-flex tw-w-full tw-items-center tw-justify-center tw-gap-8 tw-px-4 md:tw-gap-12">
                   <div className="tw-flex tw-w-20 tw-flex-col tw-items-center tw-gap-1.5">
                     <span className="tw-text-lg tw-font-semibold tw-text-white md:tw-text-xl">
                       {memberCount}
diff --git a/components/waves/public/usePublicWaveShellState.ts b/components/waves/public/usePublicWaveShellState.ts
index 75719811a2..508b82c656 100644
--- a/components/waves/public/usePublicWaveShellState.ts
+++ b/components/waves/public/usePublicWaveShellState.ts
@@ -7,6 +7,7 @@ import { useWaveById } from "@/hooks/useWaveById";
 export interface PublicWaveShellData {
   readonly id: string;
   readonly name: string;
+  readonly picture: string | null;
   readonly descriptionPreview: string | null;
   readonly membersCount: number;
   readonly postsCount: number;
@@ -25,6 +26,7 @@ function getPublicWaveShellDataFromApiWave(wave: ApiWave): PublicWaveShellData {
   return {
     id: wave.id,
     name: wave.name,
+    picture: wave.picture ?? null,
     descriptionPreview: getWaveDescriptionPreviewText(wave),
     membersCount: wave.metrics.subscribers_count,
     postsCount: wave.metrics.drops_count,

From 38a3cd4836c6487c98637f405e09a9f056bfd1b7 Mon Sep 17 00:00:00 2001
From: ragnep <ragneinfo@gmail.com>
Date: Mon, 23 Mar 2026 16:13:23 +0200
Subject: [PATCH 2/2] wip

Signed-off-by: ragnep <ragneinfo@gmail.com>
---
 components/waves/public/PublicWaveShell.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/waves/public/PublicWaveShell.tsx b/components/waves/public/PublicWaveShell.tsx
index 2201ecc444..08c0c63865 100644
--- a/components/waves/public/PublicWaveShell.tsx
+++ b/components/waves/public/PublicWaveShell.tsx
@@ -61,7 +61,7 @@ function PublicWaveShellContent({
 
         <div className="tw-absolute tw-inset-0 tw-z-10 tw-overflow-y-auto tw-px-4 tw-py-8 tw-scrollbar-thin tw-scrollbar-track-iron-800 tw-scrollbar-thumb-iron-500 desktop-hover:hover:tw-scrollbar-thumb-iron-300 lg:tw-px-8">
           <div className="tw-flex tw-min-h-full tw-items-center tw-justify-center">
-            <section className="tw-group tw-relative tw-z-10 tw-flex tw-w-full tw-max-w-lg tw-flex-col tw-overflow-hidden tw-rounded-xl tw-border tw-border-solid tw-border-iron-800 tw-bg-iron-950 tw-shadow-2xl">
+            <section className="tw-group tw-relative tw-z-10 tw-flex tw-w-full tw-max-w-lg tw-flex-col tw-overflow-hidden tw-rounded-xl tw-border tw-border-solid tw-border-white/5 tw-bg-iron-950 tw-shadow-2xl">
               <div className="tw-absolute tw-inset-x-0 tw-top-0 tw-h-px tw-bg-gradient-to-r tw-from-transparent tw-via-white/10 tw-to-transparent tw-opacity-80" />
               <div
                 className="tw-pointer-events-none tw-absolute tw-inset-0 tw-opacity-5 tw-mix-blend-overlay"
@@ -73,14 +73,14 @@ function PublicWaveShellContent({
 
               <div className="tw-relative tw-z-10 tw-flex tw-flex-col tw-items-center tw-px-6 tw-pb-10 tw-pt-10 tw-text-center md:tw-px-10">
                 <div className="tw-mb-1 tw-flex tw-max-w-md tw-flex-col tw-items-center tw-justify-center tw-gap-4">
-                  <div className="tw-size-12 tw-flex-shrink-0 tw-overflow-hidden tw-rounded-full tw-ring-1 tw-ring-white/10 sm:tw-size-14">
+                  <div className="tw-size-12 tw-flex-shrink-0 tw-overflow-hidden tw-rounded-full tw-ring-1 tw-ring-white/10 tw-ring-offset-4 tw-ring-offset-iron-950 tw-shadow-2xl sm:tw-size-14">
                     <WavePicture
                       name={wave.name}
                       picture={wave.picture}
                       contributors={[]}
                     />
                   </div>
-                  <h2 className="tw-mb-2 tw-bg-gradient-to-b tw-from-white tw-to-iron-400 tw-bg-clip-text tw-text-xl tw-font-semibold tw-leading-[1.05] tw-tracking-tighter tw-text-transparent sm:tw-text-2xl md:tw-text-3xl">
+                  <h2 className="tw-mb-2 tw-text-white tw-text-xl tw-font-semibold tw-leading-[1.05] tw-tracking-tighter tw-text-transparent sm:tw-text-2xl md:tw-text-3xl">
                     {wave.name}
                   </h2>
                 </div>