diff --git a/src/features/Profiles/Components/Avatar/Avatar.tsx b/src/features/Profiles/Components/Avatar/Avatar.tsx
index 5ceae65..73d9518 100644
--- a/src/features/Profiles/Components/Avatar/Avatar.tsx
+++ b/src/features/Profiles/Components/Avatar/Avatar.tsx
@@ -16,7 +16,9 @@ export default function Avatar({ src, alt, className, width = 40, renderTooltip
         setTooltipRef,
         setTriggerRef,
         visible,
-    } = usePopperTooltip();
+    } = usePopperTooltip({
+
+    });
 
     return (
         <>
@@ -28,7 +30,7 @@ export default function Avatar({ src, alt, className, width = 40, renderTooltip
                 (renderTooltip && visible) && (
                     <div
                         ref={setTooltipRef}
-                        {...getTooltipProps({ className: 'tooltip-container' })}
+                        {...getTooltipProps({ className: 'tooltip-container z-10' })}
                     >
                         <div {...getArrowProps({ className: 'tooltip-arrow' })} />
                         {renderTooltip()}
diff --git a/src/features/Projects/pages/ProjectPage/Components/MakersCard/MakersCard.tsx b/src/features/Projects/pages/ProjectPage/Components/MakersCard/MakersCard.tsx
index 7a9e2b5..29c86f0 100644
--- a/src/features/Projects/pages/ProjectPage/Components/MakersCard/MakersCard.tsx
+++ b/src/features/Projects/pages/ProjectPage/Components/MakersCard/MakersCard.tsx
@@ -2,6 +2,7 @@ import { Link } from 'react-router-dom'
 import Badge from 'src/Components/Badge/Badge'
 import Card from 'src/Components/Card/Card'
 import Avatar from 'src/features/Profiles/Components/Avatar/Avatar'
+import { sortMembersByRole } from 'src/features/Projects/utils/helperFunctions'
 import { ProjectDetailsQuery } from 'src/graphql'
 import { createRoute } from 'src/utils/routing'
 
@@ -20,7 +21,7 @@ export default function MakersCard({ members, recruit_roles }: Props) {
             <div className="mt-16">
                 <div className="flex flex-wrap gap-8">
                     {members.length === 0 && <p className="text-body4 text-gray-500">Not listed</p>}
-                    {members.map(m => <Link key={m.user.id} to={createRoute({ type: "profile", id: m.user.id, username: m.user.name })}>
+                    {sortMembersByRole(members).map(m => <Link key={m.user.id} to={createRoute({ type: "profile", id: m.user.id, username: m.user.name })}>
                         <Avatar
                             width={40}
                             src={m.user.avatar}
diff --git a/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx b/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx
index 6963b36..94d7772 100644
--- a/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx
+++ b/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx
@@ -23,6 +23,7 @@ import Avatar from 'src/features/Profiles/Components/Avatar/Avatar';
 import { Link } from 'react-router-dom';
 import { createRoute } from 'src/utils/routing';
 import { IoMdClose } from 'react-icons/io';
+import { sortMembersByRole } from 'src/features/Projects/utils/helperFunctions';
 
 
 interface Props extends ModalCard {
@@ -231,14 +232,14 @@ export default function ProjectDetailsCard({ direction, projectId, ...props }: P
                     </div>}
 
                 {project.members.length > 0 &&
-                    <div>
+                    <div className='relative'>
                         <p className="text-body6 uppercase font-medium text-gray-400 mb-8">MAKERS</p>
                         <div className="flex flex-wrap gap-8">
-                            {project.members.map(m => <Link key={m.user.id} to={createRoute({ type: "profile", id: m.user.id, username: m.user.name })}>
+                            {sortMembersByRole(project.members).map(m => <Link key={m.user.id} to={createRoute({ type: "profile", id: m.user.id, username: m.user.name })}>
                                 <Avatar
                                     width={40}
                                     src={m.user.avatar}
-                                    renderTooltip={() => <div className='bg-white px-12 py-8 border border-gray-200 rounded-12 flex flex-wrap gap-12 shadow-lg'>
+                                    renderTooltip={() => <div className='bg-white px-12 py-8 border border-gray-200 rounded-12 flex flex-wrap gap-12 shadow-lg relative z-10'>
                                         <Avatar width={48} src={m.user.avatar} />
                                         <div className='overflow-hidden'>
                                             <p className={`text-black font-medium overflow-hidden text-ellipsis`}>{m.user.name}</p>
diff --git a/src/features/Projects/utils/helperFunctions.ts b/src/features/Projects/utils/helperFunctions.ts
new file mode 100644
index 0000000..0c44550
--- /dev/null
+++ b/src/features/Projects/utils/helperFunctions.ts
@@ -0,0 +1,11 @@
+import { Team_Member_Role } from "src/graphql";
+
+export function sortMembersByRole<T extends { role: Team_Member_Role }>(members: T[]) {
+    return [...members].sort((a, b) => {
+        if (a.role === b.role) return 0
+        if (a.role === Team_Member_Role.Owner) return -1;
+        if (b.role === Team_Member_Role.Owner) return +1;
+        if (a.role === Team_Member_Role.Admin) return -1;
+        return +1;
+    })
+}
\ No newline at end of file