diff --git a/packages/api/src/guilds/getters.ts b/packages/api/src/guilds/getters.ts
index 3a1d02f..1f197f5 100644
--- a/packages/api/src/guilds/getters.ts
+++ b/packages/api/src/guilds/getters.ts
@@ -47,18 +47,15 @@ export const getGuild = async (
             .filter((x) => x !== undefined) as APIRole[]
         )?.position || -1;
 
-      const roles = guildRaw.roles
-        .map<Role>((role) => ({
-          id: role.id,
-          name: role.name,
-          color: role.color,
-          managed: role.managed,
-          position: role.position,
-          permissions: role.permissions,
-          safety: calculateRoleSafety(role, highestRolePosition),
-        }))
-        // sort so that highest is first
-        .sort((a, b) => b.position - a.position);
+      const roles = guildRaw.roles.map<Role>((role) => ({
+        id: role.id,
+        name: role.name,
+        color: role.color,
+        managed: role.managed,
+        position: role.position,
+        permissions: role.permissions,
+        safety: calculateRoleSafety(role, highestRolePosition),
+      }));
 
       const guild: Guild & OwnRoleInfo = {
         id,
diff --git a/packages/design-system/molecules/editable-role-list/EditableRoleList.tsx b/packages/design-system/molecules/editable-role-list/EditableRoleList.tsx
index 3eb17e3..d61dd74 100644
--- a/packages/design-system/molecules/editable-role-list/EditableRoleList.tsx
+++ b/packages/design-system/molecules/editable-role-list/EditableRoleList.tsx
@@ -1,8 +1,9 @@
 import { Popover } from '@roleypoly/design-system/atoms/popover';
 import { Role } from '@roleypoly/design-system/atoms/role';
 import { RoleSearch } from '@roleypoly/design-system/molecules/role-search';
+import { sortBy } from '@roleypoly/misc-utils/sortBy';
 import { Role as RoleT } from '@roleypoly/types';
-import { sortBy, uniq } from 'lodash';
+import { uniq } from 'lodash';
 import React from 'react';
 import { GoPlus } from 'react-icons/go';
 import { AddRoleButton, EditableRoleListStyled } from './EditableRoleList.styled';
@@ -38,7 +39,9 @@ export const EditableRoleList = (props: Props) => {
         <>
           {sortBy(
             props.roles.filter((r) => props.selectedRoles.includes(r.id)),
-            'position'
+            'position',
+            undefined,
+            true
           ).map((role) => (
             <Role
               key={role.id}
diff --git a/packages/design-system/molecules/picker-category/PickerCategory.tsx b/packages/design-system/molecules/picker-category/PickerCategory.tsx
index f8aada8..50e7aaf 100644
--- a/packages/design-system/molecules/picker-category/PickerCategory.tsx
+++ b/packages/design-system/molecules/picker-category/PickerCategory.tsx
@@ -47,7 +47,7 @@ export const PickerCategory = (props: CategoryProps) => (
       )}
     </Head>
     <Category>
-      {sortBy(props.roles, 'position').map((role, idx) => (
+      {sortBy(props.roles, 'position', undefined, true).map((role, idx) => (
         <Container key={idx}>
           <Role
             role={role}
diff --git a/packages/misc-utils/sortBy.ts b/packages/misc-utils/sortBy.ts
index 1be2c8d..d223071 100644
--- a/packages/misc-utils/sortBy.ts
+++ b/packages/misc-utils/sortBy.ts
@@ -1,8 +1,11 @@
 export const sortBy = <T, Key extends keyof T>(
   array: T[],
   key: Key,
-  predicate?: (a: T[typeof key], b: T[typeof key]) => number
+  predicate?: (a: T[typeof key], b: T[typeof key]) => number,
+  reverse?: boolean
 ) => {
+  let postmultiplier = reverse ? -1 : 1;
+
   return array.sort((a, b) => {
     if (predicate) {
       return predicate(a[key], b[key]);
@@ -13,9 +16,9 @@ export const sortBy = <T, Key extends keyof T>(
     }
 
     if (a[key] > b[key]) {
-      return 1;
+      return 1 * postmultiplier;
     }
 
-    return -1;
+    return -1 * postmultiplier;
   });
 };