fix

src/app/(user)/user/profile/[id]/page.tsx

@@ -285,8 +285,12 @@ export default function AgentProfileView() {
         <div className="w-full lg:w-[280px] flex-shrink-0 space-y-4 flex flex-col items-center lg:items-start">
           {/* Profile Image */}
           <div className="relative w-[200px] lg:w-[260px]">
-            <div className="w-[200px] h-[200px] lg:w-[260px] lg:h-[260px] rounded-[15px] overflow-hidden bg-[#e8e8e8]">
-              {getProfileImageUrl() ? (
+            <div className="w-[200px] h-[200px] lg:w-[260px] lg:h-[260px] rounded-[15px] overflow-hidden bg-[#e8e8e8] relative">
+              {/* Initials base layer */}
+              <div className="absolute inset-0 bg-[#c4d9d4] flex items-center justify-center rounded-[15px]">
+                <span className="font-bold text-[#00293d] text-[80px]">{agentProfile?.firstName?.[0]?.toUpperCase() || '?'}</span>
+              </div>
+              {getProfileImageUrl() && (
                 <>
                   {!imageLoaded && (
                     <div className="absolute inset-0 shimmer-loading rounded-[15px]" />
@@ -296,21 +300,11 @@ export default function AgentProfileView() {
                     ref={(el) => { if (el?.complete) { if (el.naturalWidth > 0) setImageLoaded(true); else setImageError(true); } }}
                     src={getProfileImageUrl()!}
                     alt="Profile"
-                    className={`w-full h-full object-cover transition-opacity duration-300 ${imageLoaded ? 'opacity-100' : 'opacity-0'}`}
+                    className={`absolute inset-0 w-full h-full object-cover transition-opacity duration-300 ${imageLoaded ? 'opacity-100' : 'opacity-0'}`}
                     onLoad={() => setImageLoaded(true)}
                     onError={() => setImageError(true)}
                   />
                 </>
-              ) : (
-                <div className="w-full h-full flex items-center justify-center">
-                  <Image
-                    src="/assets/icons/user-placeholder-icon.svg"
-                    alt="Profile"
-                    width={80}
-                    height={80}
-                    className="opacity-40"
-                  />
-                </div>
               )}
               {/* Gradient Overlay */}
               <div className="absolute inset-0 bg-gradient-to-t from-black/50 via-black/20 to-transparent pointer-events-none" />