diff --git a/src/pages/settings/server/Roles.tsx b/src/pages/settings/server/Roles.tsx
index a46c87bd..7527bb51 100644
--- a/src/pages/settings/server/Roles.tsx
+++ b/src/pages/settings/server/Roles.tsx
@@ -70,6 +70,10 @@ export const Roles = observer(({ server }: Props) => {
         }
     `;
 
+    const DeleteRoleButton = styled(Button)`
+        margin: 16px 0;
+    `;
+
     return (
         <PermissionsLayout
             server={server}
@@ -266,12 +270,12 @@ export const Roles = observer(({ server }: Props) => {
                                 <h1>
                                     <Text id="app.settings.categories.danger_zone" />
                                 </h1>
-                                <Button
+                                <DeleteRoleButton
                                     palette="error"
                                     compact
                                     onClick={deleteRole}>
                                     <Text id="app.settings.permissions.delete_role" />
-                                </Button>
+                                </DeleteRoleButton>
                             </>
                         )}
                     </div>