diff --git a/web/components/profile/profile-info.tsx b/web/components/profile/profile-info.tsx
index 671f31ff..4e0e3249 100644
--- a/web/components/profile/profile-info.tsx
+++ b/web/components/profile/profile-info.tsx
@@ -141,7 +141,9 @@ export function ProfileInfo(props: {
           >
             {user.name?.charAt(0).toUpperCase()}
           </div>
-          <div className={clsx('min-w-0 flex-1', !profile.pinned_url && 'ml-6')}>
+          <div
+            className={clsx('min-w-0 flex-1 animate-profile-appear', !profile.pinned_url && 'ml-6')}
+          >
             <ProfileHeader
               user={user}
               userActivity={userActivity}
diff --git a/web/styles/globals.css b/web/styles/globals.css
index 3d94c972..d9ad6dd7 100644
--- a/web/styles/globals.css
+++ b/web/styles/globals.css
@@ -542,6 +542,21 @@ ol > li::marker {
   animation: fade-out-slow 3s ease-out forwards;
 }
 
+@keyframes profile-appear {
+  from {
+    opacity: 0;
+    transform: translateY(16px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.animate-profile-appear {
+  animation: profile-appear 0.7s ease-out;
+}
+
 .guidance {
   opacity: 0.7;
   font-size: 14px;