1 files changed, 36 insertions, 16 deletions

diff --git a/gui/src/components/profile/Profile.tsx b/gui/src/components/profile/Profile.tsx
index b5f22e9..ab65a7b 100644
--- a/gui/src/components/profile/Profile.tsx
+++ b/gui/src/components/profile/Profile.tsx
@@ -16,6 +16,7 @@ const Loader: React.FC<Props> = (props) => {
     profiles: s.profiles,
   }));
   const profile = profiles.get(props.userString);
+  console.log({ profiles });
 
   if (props.isMe) return <ProfileEditor {...props} profile={profile} />;
   else return <Profile profile={profile} {...props} />;
@@ -32,31 +33,50 @@ function Profile({
   // Initialize state with existing profile or defaults
 
   // View-only mode for other users' profiles - no editing allowed
+  const bannerImage = profile?.other?.banner || profile?.other?.Banner;
   const customFields = profile?.other ? Object.entries(profile.other) : [];
   return (
-    <div className="profile view-mode">
-      <div className="profile-picture">
-        <Avatar
-          user={user}
-          userString={userString}
-          size={120}
-          picOnly={true}
-          profile={profile}
-        />
+    <div className="profile">
+      {bannerImage && (
+        <div className="user-banner">
+          <img src={bannerImage} alt="Profile banner" />
+        </div>
+      )}
+      <div className="flex items-center gap-4">
+        <div className="profile-picture">
+          <Avatar
+            user={user}
+            userString={userString}
+            size={120}
+            picOnly={true}
+            profile={profile}
+          />
+        </div>
+        <h2 className="text-4xl">{profile?.name || userString}</h2>
       </div>
       <div className="profile-info">
-        <h2>{profile?.name || userString}</h2>
         {profile?.about && <p className="profile-about">{profile.about}</p>}
 
         {customFields.length > 0 && (
           <div className="profile-custom-fields">
             <h4>Additional Info</h4>
-            {customFields.map(([key, value], index) => (
-              <div key={index} className="custom-field-view">
-                <span className="field-key">{key}:</span>
-                <span className="field-value">{value}</span>
-              </div>
-            ))}
+
+            {customFields.map(([key, value], index) => {
+              if (key.toLocaleLowerCase() === "banner") return null;
+              const isURL = URL.parse(value);
+              return (
+                <div key={index} className="custom-field-view">
+                  <span className="field-key">{key}:</span>
+                  {isURL ? (
+                    <a className="field-value" href={value} target="_blank">
+                      {value}
+                    </a>
+                  ) : (
+                    <span className="field-value">{value}</span>
+                  )}
+                </div>
+              );
+            })}
           </div>
         )}
       </div>