diff --git a/resources/scripts/components/admin/roles/NewRoleButton.tsx b/resources/scripts/components/admin/roles/NewRoleButton.tsx
index 662e3fabc..9aae2bd8b 100644
--- a/resources/scripts/components/admin/roles/NewRoleButton.tsx
+++ b/resources/scripts/components/admin/roles/NewRoleButton.tsx
@@ -1,14 +1,14 @@
+import { Form, Formik, FormikHelpers } from 'formik';
 import React, { useState } from 'react';
+import tw from 'twin.macro';
+import { object, string } from 'yup';
 import createRole from '@/api/admin/roles/createRole';
-import { AdminContext } from '@/state/admin';
+import getRoles from '@/api/admin/roles/getRoles';
+import FlashMessageRender from '@/components/FlashMessageRender';
 import Button from '@/components/elements/Button';
 import Field from '@/components/elements/Field';
 import Modal from '@/components/elements/Modal';
-import FlashMessageRender from '@/components/FlashMessageRender';
 import useFlash from '@/plugins/useFlash';
-import { Form, Formik, FormikHelpers } from 'formik';
-import tw from 'twin.macro';
-import { object, string } from 'yup';
 
 interface Values {
     name: string,
@@ -26,8 +26,7 @@ const schema = object().shape({
 export default () => {
     const [ visible, setVisible ] = useState(false);
     const { clearFlashes, clearAndAddHttpError } = useFlash();
-
-    const appendRole = AdminContext.useStoreActions(actions => actions.roles.appendRole);
+    const { mutate } = getRoles();
 
     const submit = ({ name, description }: Values, { setSubmitting }: FormikHelpers<Values>) => {
         clearFlashes('role:create');
@@ -35,7 +34,7 @@ export default () => {
 
         createRole(name, description)
             .then(role => {
-                appendRole(role);
+                mutate(data => ({ ...data!, items: data!.items.concat(role) }), false);
                 setVisible(false);
             })
             .catch(error => {
diff --git a/resources/scripts/state/admin/roles.ts b/resources/scripts/state/admin/roles.ts
index b3c251815..ffcf83b3b 100644
--- a/resources/scripts/state/admin/roles.ts
+++ b/resources/scripts/state/admin/roles.ts
@@ -1,39 +1,16 @@
 import { action, Action } from 'easy-peasy';
-import { Role } from '@/api/admin/roles/getRoles';
 
 export interface AdminRoleStore {
-    data: Role[];
     selectedRoles: number[];
 
-    setRoles: Action<AdminRoleStore, Role[]>;
-    appendRole: Action<AdminRoleStore, Role>;
-    removeRole: Action<AdminRoleStore, number>;
-
     setSelectedRoles: Action<AdminRoleStore, number[]>;
     appendSelectedRole: Action<AdminRoleStore, number>;
     removeSelectedRole: Action<AdminRoleStore, number>;
 }
 
 const roles: AdminRoleStore = {
-    data: [],
     selectedRoles: [],
 
-    setRoles: action((state, payload) => {
-        state.data = payload;
-    }),
-
-    appendRole: action((state, payload) => {
-        if (state.data.find(role => role.id === payload.id)) {
-            state.data = state.data.map(role => role.id === payload.id ? payload : role);
-        } else {
-            state.data = [ ...state.data, payload ];
-        }
-    }),
-
-    removeRole: action((state, payload) => {
-        state.data = [ ...state.data.filter(role => role.id !== payload) ];
-    }),
-
     setSelectedRoles: action((state, payload) => {
         state.selectedRoles = payload;
     }),