UI design on member detail page

src/components/TeamMemberDetails/TeamMemberDetailsPage.tsx

@@ -90,28 +90,18 @@ export function TeamMemberDetailsPage() {
 
   return (
     <>
-      <div>
+      <div className="flex items-center gap-3 mb-8">
-        <div className="flex items-center gap-4">
+        <img
-          <img
+          src={avatarUrl}
-            src={avatarUrl}
+          alt={memberProgress?.name}
-            alt={memberProgress?.name}
+          className="h-14 w-14 rounded-full"
-            className="h-24 w-24 rounded-full"
+        />
-          />
+        <div>
-          <div>
+          <h1 className="mt-1 text-2xl font-medium">{memberProgress?.name}</h1>
-            <MemberRoleBadge
+          <p className="text-sm text-gray-500">{memberProgress?.email}</p>
-              className="sm:inline-flex"
-              role={memberProgress?.role!}
-            />
-            <h1 className="mt-1 text-2xl font-medium">
-              {memberProgress?.name}
-            </h1>
-            <p className="text-sm text-gray-500">{memberProgress?.email}</p>
-          </div>
         </div>
       </div>
 
-      <hr className="my-8 border-gray-200" />
-
       {memberProgress?.progresses && memberProgress?.progresses?.length > 0 ? (
         <>
           <h2 className="mb-3 text-xs uppercase text-gray-400">