diff --git a/src/app/_components/user-showcase.tsx b/src/app/_components/user-showcase.tsx
index 17ea0c7..4a7e318 100644
--- a/src/app/_components/user-showcase.tsx
+++ b/src/app/_components/user-showcase.tsx
@@ -7,22 +7,26 @@ export default function UserShowcase({
   spookify,
   images,
 }: {
-  display_name: string;
+  display_name?: string;
   spookify: boolean;
-  images: { url: string }[];
+  images?: { url: string }[];
 }) {
   const imageSource = images && images[0];
   return (
-    <div className="flex">
+    <div className="flex w-full gap-2 rounded-xl bg-white bg-opacity-5 px-8 py-16 backdrop-blur-lg backdrop-filter">
       <img
-        className="h-16 w-16 rounded-full"
+        className="h-32 w-32 rounded-full"
         src={imageSource?.url || "https://via.placeholder.com/150"}
         alt={display_name}
       />
-      <div className="ml-2 flex flex-col justify-center">
-        <TypographyH2 className="font-bold">
-          {display_name} {spookify && "Spooky"} Showcase
-        </TypographyH2>
+      <div className="font-climateCrisis flex flex-col justify-center">
+        <TypographyH1 className="text-3xl font-bold tracking-wide text-lime-600 lg:text-4xl">
+          {display_name}
+        </TypographyH1>
+        <TypographyH1 className="text-3xl font-bold tracking-wide lg:text-4xl">
+          {spookify && <span className="text-fuchsia-700">Spooky</span>}{" "}
+          Showcase
+        </TypographyH1>
       </div>
     </div>
   );