diff --git a/forms-flow-admin/src/components/roles/roles.tsx b/forms-flow-admin/src/components/roles/roles.tsx
index fbec370b..418d5d75 100644
--- a/forms-flow-admin/src/components/roles/roles.tsx
+++ b/forms-flow-admin/src/components/roles/roles.tsx
@@ -473,7 +473,7 @@ const Roles = React.memo((props: any) => {
           >
             <div className="user-list" onClick={(e) => handleClick(e, rowData)}>
               <p><Translation>{(t) => t("View")}</Translation></p>
-              <i className="fa fa-caret-down ml-1" />
+              <i className="fa fa-caret-down ml-2" />
             </div>
           </OverlayTrigger>
         );
@@ -535,7 +535,7 @@ const Roles = React.memo((props: any) => {
             )}
           </div>
           <Button variant="primary" className="font-size col-xl-2 col-lg-3 col-md-3 col-sm-4" onClick={handleShowRoleModal}>
-            <i className="fa fa-l fa-plus-circle mr-1" /> <Translation>{(t) => t("Create New Role")}</Translation>
+            <i className="fa fa-l fa-plus-circle mr-2" /> <Translation>{(t) => t("Create New Role")}</Translation>
           </Button>
         </div>
         {!props?.loading ? (
diff --git a/forms-flow-admin/src/components/users/users.tsx b/forms-flow-admin/src/components/users/users.tsx
index 52082382..984d06c2 100644
--- a/forms-flow-admin/src/components/users/users.tsx
+++ b/forms-flow-admin/src/components/users/users.tsx
@@ -315,7 +315,7 @@ const Users = React.memo((props: any) => {
             }
           >
             <Button variant="primary" onClick={() => addRole(rowData)}>
-              <i className="fa fa-l fa-plus-circle mr-1" /> <Translation>{(t) => t("Add Role")}</Translation>
+              <i className="fa fa-l fa-plus-circle mr-2" /> <Translation>{(t) => t("Add Role")}</Translation>
             </Button>
           </OverlayTrigger>
         );