diff --git a/src/design-system/molecules/picker-category/PickerCategory.tsx b/src/design-system/molecules/picker-category/PickerCategory.tsx
index 3457170..07c4b1a 100644
--- a/src/design-system/molecules/picker-category/PickerCategory.tsx
+++ b/src/design-system/molecules/picker-category/PickerCategory.tsx
@@ -5,6 +5,7 @@ import {
     Role as RPCRole,
     RoleSafety,
 } from 'roleypoly/common/types';
+import { sortBy } from 'roleypoly/common/utils/sortBy';
 import { Role } from 'roleypoly/design-system/atoms/role';
 import { AmbientLarge, LargeText } from 'roleypoly/design-system/atoms/typography';
 import styled from 'styled-components';
@@ -50,7 +51,7 @@ export const PickerCategory = (props: CategoryProps) => (
             )}
         </Head>
         <Category>
-            {props.roles.map((role, idx) => (
+            {sortBy(props.roles, 'position').map((role, idx) => (
                 <Container key={idx}>
                     <Role
                         role={role}