diff --git a/apps/web/app/(app)/environments/[environmentId]/settings/members/components/AddMemberModal.tsx b/apps/web/app/(app)/environments/[environmentId]/settings/members/components/AddMemberModal.tsx
index dcf9433c6c..ef0591ad71 100644
--- a/apps/web/app/(app)/environments/[environmentId]/settings/members/components/AddMemberModal.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/settings/members/components/AddMemberModal.tsx
@@ -56,25 +56,6 @@ export default function AddMemberModal({
             </div>
           </div>
         </div>
-        {!canDoRoleManagement &&
-          (isFormbricksCloud ? (
-            <div className="mx-6 mt-2">
-              <UpgradePlanNotice
-                message="To manage access roles for your team"
-                url={`/environments/${environmentId}/settings/billing`}
-                textForUrl="Upgrade to the App Surveys plan."
-              />
-            </div>
-          ) : (
-            <div className="mx-6 mt-2">
-              <UpgradePlanNotice
-                message="To manage access roles for your team,"
-                url="mailto:hola@formbricks.com"
-                textForUrl="get a self-hosted license (free to get started)."
-              />
-            </div>
-          ))}
-
         <form onSubmit={handleSubmit(submitEventClass)}>
           <div className="flex justify-between rounded-lg p-6">
             <div className="w-full space-y-4">
@@ -95,7 +76,23 @@ export default function AddMemberModal({
                   {...register("email", { required: true })}
                 />
               </div>
-              {canDoRoleManagement && <AddMemberRole control={control} />}
+              <div>
+                <AddMemberRole control={control} canDoRoleManagement={canDoRoleManagement} />
+                {!canDoRoleManagement &&
+                  (!isFormbricksCloud ? (
+                    <UpgradePlanNotice
+                      message="To manage access roles,"
+                      url={`/environments/${environmentId}/settings/billing`}
+                      textForUrl="please add your credit card (free)."
+                    />
+                  ) : (
+                    <UpgradePlanNotice
+                      message="To manage access roles for your team,"
+                      url="https://formbricks.com/docs/self-hosting/license"
+                      textForUrl="get a self-hosting license (free)."
+                    />
+                  ))}
+              </div>
             </div>
           </div>
           <div className="flex justify-end border-t border-slate-200 p-6">
diff --git a/apps/web/app/(app)/environments/[environmentId]/settings/members/components/EditMemberships/EditMemberships.tsx b/apps/web/app/(app)/environments/[environmentId]/settings/members/components/EditMemberships/EditMemberships.tsx
index d3e1b42e2f..a00da73cf2 100644
--- a/apps/web/app/(app)/environments/[environmentId]/settings/members/components/EditMemberships/EditMemberships.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/settings/members/components/EditMemberships/EditMemberships.tsx
@@ -1,5 +1,4 @@
 import MembersInfo from "@/app/(app)/environments/[environmentId]/settings/members/components/EditMemberships/MembersInfo";
-import React from "react";
 
 import { getRoleManagementPermission } from "@formbricks/ee/lib/service";
 import { getInvitesByTeamId } from "@formbricks/lib/invite/service";
@@ -29,11 +28,10 @@ export async function EditMemberships({
   return (
     <div>
       <div className="rounded-lg border border-slate-200">
-        <div className="grid-cols-20 grid h-12 content-center rounded-t-lg bg-slate-100 text-left text-sm font-semibold text-slate-900">
-          <div className="col-span-2"></div>
+        <div className="grid-cols-20 grid h-12 content-center rounded-t-lg bg-slate-100 px-4 text-left text-sm font-semibold text-slate-900">
           <div className="col-span-5">Fullname</div>
           <div className="col-span-5">Email</div>
-          {canDoRoleManagement && <div className="col-span-3">Role</div>}
+          {canDoRoleManagement && <div className="col-span-5">Role</div>}
           <div className="col-span-5"></div>
         </div>
 
diff --git a/apps/web/app/(app)/environments/[environmentId]/settings/members/components/EditMemberships/MembersInfo.tsx b/apps/web/app/(app)/environments/[environmentId]/settings/members/components/EditMemberships/MembersInfo.tsx
index f13b848e44..39aca86d94 100644
--- a/apps/web/app/(app)/environments/[environmentId]/settings/members/components/EditMemberships/MembersInfo.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/settings/members/components/EditMemberships/MembersInfo.tsx
@@ -1,12 +1,10 @@
 import MemberActions from "@/app/(app)/environments/[environmentId]/settings/members/components/EditMemberships/MemberActions";
 import { isInviteExpired } from "@/app/lib/utils";
-import React from "react";
 
 import { EditMembershipRole } from "@formbricks/ee/RoleManagement/components/EditMembershipRole";
 import { TInvite } from "@formbricks/types/invites";
 import { TMember, TMembershipRole } from "@formbricks/types/memberships";
 import { TTeam } from "@formbricks/types/teams";
-import { ProfileAvatar } from "@formbricks/ui/Avatars";
 import { Badge } from "@formbricks/ui/Badge";
 
 type MembersInfoProps = {
@@ -39,15 +37,8 @@ const MembersInfo = async ({
     <div className="grid-cols-20" id="membersInfoWrapper">
       {allMembers.map((member) => (
         <div
-          className="singleMemberInfo grid-cols-20 grid h-auto w-full content-center rounded-lg p-0.5 py-2 text-left text-sm text-slate-900"
+          className="singleMemberInfo grid-cols-20 grid h-auto w-full content-center rounded-lg px-4 py-3 text-left text-sm text-slate-900"
           key={member.email}>
-          <div className="h-58 col-span-2 pl-4">
-            {isInvitee(member) ? (
-              <ProfileAvatar userId={member.email} />
-            ) : (
-              <ProfileAvatar userId={member.userId} />
-            )}
-          </div>
           <div className="ph-no-capture col-span-5 flex flex-col justify-center break-all">
             <p>{member.name}</p>
           </div>
@@ -55,7 +46,7 @@ const MembersInfo = async ({
             {member.email}
           </div>
 
-          <div className="ph-no-capture col-span-3 flex flex-col items-start justify-center break-all">
+          <div className="ph-no-capture col-span-5 flex flex-col items-start justify-center break-all">
             {canDoRoleManagement && allMembers?.length > 0 && (
               <EditMembershipRole
                 isAdminOrOwner={isUserAdminOrOwner}
diff --git a/apps/web/app/(app)/environments/[environmentId]/settings/members/components/EditMemberships/TeamActions.tsx b/apps/web/app/(app)/environments/[environmentId]/settings/members/components/EditMemberships/TeamActions.tsx
index c4ac03264f..d37c135218 100644
--- a/apps/web/app/(app)/environments/[environmentId]/settings/members/components/EditMemberships/TeamActions.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/settings/members/components/EditMemberships/TeamActions.tsx
@@ -5,8 +5,9 @@ import {
   leaveTeamAction,
 } from "@/app/(app)/environments/[environmentId]/settings/members/actions";
 import AddMemberModal from "@/app/(app)/environments/[environmentId]/settings/members/components/AddMemberModal";
+import { XIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
-import React, { useState } from "react";
+import { useState } from "react";
 import toast from "react-hot-toast";
 
 import { TMembershipRole } from "@formbricks/types/memberships";
@@ -70,7 +71,11 @@ export default function TeamActions({
     <>
       <div className="mb-6 text-right">
         {role !== "owner" && (
-          <Button variant="minimal" className="mr-2" onClick={() => setLeaveTeamModalOpen(true)}>
+          <Button
+            EndIcon={XIcon}
+            variant="secondary"
+            className="mr-2"
+            onClick={() => setLeaveTeamModalOpen(true)}>
             Leave Team
           </Button>
         )}
diff --git a/packages/ee/RoleManagement/components/AddMemberRole.tsx b/packages/ee/RoleManagement/components/AddMemberRole.tsx
index 2c9fbeb1ae..c552a81af0 100644
--- a/packages/ee/RoleManagement/components/AddMemberRole.tsx
+++ b/packages/ee/RoleManagement/components/AddMemberRole.tsx
@@ -17,11 +17,12 @@ enum MembershipRole {
   Viewer = "viewer",
 }
 
-type AddMemberRole = {
+type AddMemberRoleProps = {
   control: Control<{ name: string; email: string; role: MembershipRole }, any>;
+  canDoRoleManagement: boolean;
 };
 
-export const AddMemberRole = ({ control }: AddMemberRole) => {
+export const AddMemberRole = ({ control, canDoRoleManagement }: AddMemberRoleProps) => {
   return (
     <Controller
       name="role"
@@ -29,9 +30,18 @@ export const AddMemberRole = ({ control }: AddMemberRole) => {
       render={({ field: { onChange, value } }) => (
         <div>
           <Label>Role</Label>
-          <Select value={value} onValueChange={(v) => onChange(v as MembershipRole)}>
+          <Select
+            value={value}
+            onValueChange={(v) => onChange(v as MembershipRole)}
+            disabled={!canDoRoleManagement}>
             <SelectTrigger className="capitalize">
-              <SelectValue placeholder={<span className="text-slate-400">Select role</span>} />
+              <SelectValue
+                placeholder={
+                  <span className="text-slate-400">
+                    {canDoRoleManagement ? "Select role" : "Select role (Pro Feature)"}
+                  </span>
+                }
+              />
             </SelectTrigger>
             <SelectContent>
               <SelectGroup>
diff --git a/packages/ui/Alert/index.tsx b/packages/ui/Alert/index.tsx
index bc474d04b4..87774db367 100644
--- a/packages/ui/Alert/index.tsx
+++ b/packages/ui/Alert/index.tsx
@@ -4,7 +4,7 @@ import * as React from "react";
 import { cn } from "@formbricks/lib/cn";
 
 const alertVariants = cva(
-  "relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11",
+  "relative w-full rounded-lg border p-3 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11",
   {
     variants: {
       variant: {
@@ -45,4 +45,4 @@ const AlertDescription = React.forwardRef<
 ));
 AlertDescription.displayName = "AlertDescription";
 
-export { Alert, AlertTitle, AlertDescription };
+export { Alert, AlertDescription, AlertTitle };
diff --git a/packages/ui/Select/index.tsx b/packages/ui/Select/index.tsx
index 834df7e4e4..7758a53075 100644
--- a/packages/ui/Select/index.tsx
+++ b/packages/ui/Select/index.tsx
@@ -89,11 +89,11 @@ SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 export {
   Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
   SelectContent,
-  SelectLabel,
+  SelectGroup,
   SelectItem,
+  SelectLabel,
   SelectSeparator,
+  SelectTrigger,
+  SelectValue,
 };
diff --git a/packages/ui/UpgradePlanNotice/index.tsx b/packages/ui/UpgradePlanNotice/index.tsx
index 1afe516f76..9785bc509b 100644
--- a/packages/ui/UpgradePlanNotice/index.tsx
+++ b/packages/ui/UpgradePlanNotice/index.tsx
@@ -1,7 +1,7 @@
-import { LightBulbIcon } from "@heroicons/react/24/outline";
 import Link from "next/link";
 
 import { Alert, AlertDescription } from "../Alert";
+import { Badge } from "../Badge";
 
 export const UpgradePlanNotice = ({
   message,
@@ -13,12 +13,14 @@ export const UpgradePlanNotice = ({
   textForUrl: string;
 }) => {
   return (
-    <Alert className="flex items-center">
-      <LightBulbIcon className="h-5 w-5 text-slate-500" />
-      <AlertDescription>
-        <span className="mr-2 text-sm text-slate-500">{message}</span>
+    <Alert className="mt-1.5 flex items-center bg-slate-50">
+      <Badge size="tiny" text="Pro" type="success" />
+      <AlertDescription className="ml-2">
+        <span className="mr-1 text-slate-600">{message}</span>
         <span className="underline">
-          <Link href={url}>{textForUrl}</Link>
+          <Link href={url} target="_blank">
+            {textForUrl}
+          </Link>
         </span>
       </AlertDescription>
     </Alert>