diff --git a/frontend/app/components/Client/Roles/Roles.tsx b/frontend/app/components/Client/Roles/Roles.tsx
index 7c978086b..1c2939928 100644
--- a/frontend/app/components/Client/Roles/Roles.tsx
+++ b/frontend/app/components/Client/Roles/Roles.tsx
@@ -80,7 +80,7 @@ function Roles(props: Props) {
             <Loader loading={loading}>
                 <div className={stl.wrapper}>
                     <div className={cn(stl.tabHeader, 'flex items-center')}>
-                        <div className="flex items-center mr-auto">
+                        <div className="flex items-center mr-auto px-5 pt-5">
                             <h3 className={cn(stl.tabTitle, 'text-2xl')}>Roles and Access</h3>
                             <Popup content="You don’t have the permissions to perform this action." disabled={isAdmin}>
                                 <Button variant="primary" onClick={() => setShowmModal(true)}>Add</Button>
@@ -90,7 +90,7 @@ function Roles(props: Props) {
 
                     <NoContent title="No roles are available." size="small" show={false}>
                         <div className={''}>
-                            <div className={cn('flex items-start py-3 border-b px-3 pr-20 font-medium')}>
+                            <div className={cn('flex items-start py-3 border-b px-5 pr-20 font-medium')}>
                                 <div className="" style={{ width: '20%' }}>
                                     Title
                                 </div>
diff --git a/frontend/app/components/Client/Roles/components/RoleItem/RoleItem.tsx b/frontend/app/components/Client/Roles/components/RoleItem/RoleItem.tsx
index 391e7ab93..b3d76b20e 100644
--- a/frontend/app/components/Client/Roles/components/RoleItem/RoleItem.tsx
+++ b/frontend/app/components/Client/Roles/components/RoleItem/RoleItem.tsx
@@ -26,7 +26,7 @@ interface Props {
 }
 function RoleItem({ role, deleteHandler, editHandler, isAdmin, permissions, projects }: Props) {
     return (
-        <div className={cn('flex items-start relative py-4 hover border-b last:border-none px-3 pr-20 group')}>
+        <div className={cn('flex items-start relative py-4 hover border-b last:border-none px-5 pr-20 group')}>
             <div className="flex" style={{ width: '20%' }}>
                 <Icon name="user-alt" size="16" marginRight="10" />
                 {role.name}