diff --git a/web/source/settings/admin/emoji.js b/web/source/settings/admin/emoji.js
deleted file mode 100644
index ad7fcab06..000000000
--- a/web/source/settings/admin/emoji.js
+++ /dev/null
@@ -1,229 +0,0 @@
-/*
-	GoToSocial
-	Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
-
-	This program is free software: you can redistribute it and/or modify
-	it under the terms of the GNU Affero General Public License as published by
-	the Free Software Foundation, either version 3 of the License, or
-	(at your option) any later version.
-
-	This program is distributed in the hope that it will be useful,
-	but WITHOUT ANY WARRANTY; without even the implied warranty of
-	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-	GNU Affero General Public License for more details.
-
-	You should have received a copy of the GNU Affero General Public License
-	along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-
-"use strict";
-
-const Promise = require("bluebird");
-const React = require("react");
-const Redux = require("react-redux");
-const {Switch, Route, Link, Redirect, useRoute, useLocation} = require("wouter");
-
-const Submit = require("../components/submit");
-const FakeToot = require("../components/fake-toot");
-const { formFields } = require("../components/form-fields");
-
-const api = require("../lib/api");
-const adminActions = require("../redux/reducers/admin").actions;
-const submit = require("../lib/submit");
-const BackButton = require("../components/back-button");
-
-const base = "/settings/admin/custom-emoji";
-
-module.exports = function CustomEmoji() {
-	const dispatch = Redux.useDispatch();
-	const [loaded, setLoaded] = React.useState(false);
-
-	const [errorMsg, setError] = React.useState("");
-
-	React.useEffect(() => {
-		if (!loaded) {
-			Promise.try(() => {
-				return dispatch(api.admin.fetchCustomEmoji());
-			}).then(() => {
-				setLoaded(true);
-			}).catch((e) => {
-				setLoaded(true);
-				setError(e.message);
-			});
-		}
-	}, []);
-
-	if (!loaded) {
-		return (
-			<>
-				<h1>Custom Emoji</h1>
-				Loading...
-			</>
-		);
-	}
-
-	return (
-		<>
-			{errorMsg.length > 0 && 
-				<div className="error accent">{errorMsg}</div>
-			}
-			<Switch>
-				<Route path={`${base}/:emojiId`}>
-					<EmojiDetailWrapped />
-				</Route>
-				<EmojiOverview />
-			</Switch>
-		</>
-	);
-};
-
-function EmojiOverview() {
-	return (
-		<>
-			<h1>Custom Emoji</h1>
-			<EmojiList/>
-			<NewEmoji/>
-		</>
-	);
-}
-
-const NewEmojiForm = formFields(adminActions.updateNewEmojiVal, (state) => state.admin.newEmoji);
-function NewEmoji() {
-	const dispatch = Redux.useDispatch();
-	const newEmojiForm = Redux.useSelector((state) => state.admin.newEmoji);
-
-	const [errorMsg, setError] = React.useState("");
-	const [statusMsg, setStatus] = React.useState("");
-
-	const uploadEmoji = submit(
-		() => dispatch(api.admin.newEmoji()),
-		{
-			setStatus, setError,
-			onSuccess: function() {
-				URL.revokeObjectURL(newEmojiForm.image);
-				return Promise.all([
-					dispatch(adminActions.updateNewEmojiVal(["image", undefined])),
-					dispatch(adminActions.updateNewEmojiVal(["imageFile", undefined])),
-					dispatch(adminActions.updateNewEmojiVal(["shortcode", ""])),
-				]);
-			}
-		}
-	);
-
-	React.useEffect(() => {
-		if (newEmojiForm.shortcode.length == 0) {
-			if (newEmojiForm.imageFile != undefined) {
-				let [name, ext] = newEmojiForm.imageFile.name.split(".");
-				dispatch(adminActions.updateNewEmojiVal(["shortcode", name]));
-			}
-		}
-	});
-
-	let emojiOrShortcode = `:${newEmojiForm.shortcode}:`;
-
-	if (newEmojiForm.image != undefined) {
-		emojiOrShortcode = <img
-			className="emoji"
-			src={newEmojiForm.image}
-			title={`:${newEmojiForm.shortcode}:`}
-			alt={newEmojiForm.shortcode}
-		/>;
-	}
-
-	return (
-		<div>
-			<h2>Add new custom emoji</h2>
-
-			<FakeToot>
-				Look at this new custom emoji {emojiOrShortcode} isn&apos;t it cool?
-			</FakeToot>
-
-			<NewEmojiForm.File
-				id="image"
-				name="Image"
-				fileType="image/png,image/gif"
-				showSize={true}
-				maxSize={50 * 1000}
-			/>
-
-			<NewEmojiForm.TextInput
-				id="shortcode"
-				name="Shortcode (without : :), must be unique on the instance"
-				placeHolder="blobcat"
-			/>
-
-			<Submit onClick={uploadEmoji} label="Upload" errorMsg={errorMsg} statusMsg={statusMsg} />
-		</div>
-	);
-}
-
-function EmojiList() {
-	const emoji = Redux.useSelector((state) => state.admin.emoji);
-
-	return (
-		<div>
-			<h2>Overview</h2>
-			<div className="list emoji-list">
-				{Object.entries(emoji).map(([category, entries]) => {
-					return <EmojiCategory key={category} category={category} entries={entries}/>;
-				})}
-			</div>
-		</div>
-	);
-}
-
-function EmojiCategory({category, entries}) {
-	return (
-		<div className="entry">
-			<b>{category}</b>
-			<div className="emoji-group">
-				{entries.map((e) => {
-					return (
-						<Link key={e.id} to={`${base}/${e.id}`}>
-							{/* <Link key={e.static_url} to={`${base}`}> */}
-							<a>
-								<img src={e.url} alt={e.shortcode} title={`:${e.shortcode}:`}/>
-							</a>
-						</Link>
-					);
-				})}
-			</div>
-		</div>
-	);
-}
-
-function EmojiDetailWrapped() {
-	/* We wrap the component to generate formFields with a setter depending on the domain
-		 if formFields() is used inside the same component that is re-rendered with their state,
-		 inputs get re-created on every change, causing them to lose focus, and bad performance
-	*/
-	let [_match, {emojiId}] = useRoute(`${base}/:emojiId`);
-	const emojiById = Redux.useSelector((state) => state.admin.emojiById);
-	const emoji = emojiById[emojiId];
-	if (emoji == undefined) {
-		return (
-			<h1><BackButton to={base}/> Custom Emoji: </h1>
-		);
-	}
-
-	function alterEmoji([key, val]) {
-		return adminActions.updateDomainBlockVal([emojiId, key, val]);
-	}
-
-	const fields = formFields(alterEmoji, (state) => state.admin.blockedInstances[emojiId]);
-
-	return <EmojiDetail emoji={emoji} Form={fields} />;
-}
-
-function EmojiDetail({emoji, Form}) {
-	return (
-		<div>
-			<h1><BackButton to={base}/> Custom Emoji: {emoji.shortcode}</h1>
-			<p>
-				Editing custom emoji isn&apos;t implemented yet.<br/>
-				<a target="_blank" rel="noreferrer" href="https://github.com/superseriousbusiness/gotosocial/issues/797">View implementation progress.</a>
-			</p>
-			<img src={emoji.url} alt={emoji.shortcode} title={`:${emoji.shortcode}:`}/>
-		</div>
-	);
-}
\ No newline at end of file
diff --git a/web/source/settings/admin/emoji/detail.js b/web/source/settings/admin/emoji/detail.js
new file mode 100644
index 000000000..abdd38020
--- /dev/null
+++ b/web/source/settings/admin/emoji/detail.js
@@ -0,0 +1,89 @@
+/*
+	GoToSocial
+	Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+"use strict";
+
+const React = require("react");
+const Redux = require("react-redux");
+
+const { useRoute, Link, Redirect } = require("wouter");
+
+const adminActions = require("../../redux/reducers/admin").actions;
+const BackButton = require("../../components/back-button");
+const { formFields } = require("../../components/form-fields");
+
+const query = require("../../lib/query");
+
+const base = "/settings/admin/custom-emoji";
+
+/* We wrap the component to generate formFields with a setter depending on the domain
+	 if formFields() is used inside the same component that is re-rendered with their state,
+	 inputs get re-created on every change, causing them to lose focus, and bad performance
+*/
+module.exports = function EmojiDetailWrapped() {
+	let [_match, {emojiId}] = useRoute(`${base}/:emojiId`);
+	const {currentData: emoji, isLoading, error} = query.useGetEmojiQuery(emojiId);
+
+	return (<>
+		{error && <div className="error accent">{error.status}: {error.data.error}</div>}
+		{isLoading
+			? "Loading..."
+			: <EmojiDetail emoji={emoji}/>
+		}
+	</>);
+};
+
+function EmojiDetail({emoji, Form}) {
+	if (emoji == undefined) {
+		return (<>
+			<Link to={base}>
+				<a className="button">go back</a>
+			</Link>
+		</>);
+	}
+
+	return (
+		<div>
+			<h1><BackButton to={base}/> Custom Emoji: {emoji.shortcode}</h1>
+			<DeleteButton id={emoji.id}/>
+			<p>
+				Editing custom emoji isn&apos;t implemented yet.<br/>
+				<a target="_blank" rel="noreferrer" href="https://github.com/superseriousbusiness/gotosocial/issues/797">View implementation progress.</a>
+			</p>
+			<img src={emoji.url} alt={emoji.shortcode} title={`:${emoji.shortcode}:`}/>
+		</div>
+	);
+}
+
+function DeleteButton({id}) {
+	// TODO: confirmation dialog?
+	const [deleteEmoji, deleteResult] = query.useDeleteEmojiMutation();
+
+	let text = "Delete this emoji";
+	if (deleteResult.isLoading) {
+		text = "processing...";
+	}
+
+	if (deleteResult.isSuccess) {
+		return <Redirect to={base}/>;
+	}
+
+	return (
+		<button onClick={() => deleteEmoji(id)} disabled={deleteResult.isLoading}>{text}</button>
+	);
+}
\ No newline at end of file
diff --git a/web/source/settings/admin/emoji/index.js b/web/source/settings/admin/emoji/index.js
new file mode 100644
index 000000000..0fcda8264
--- /dev/null
+++ b/web/source/settings/admin/emoji/index.js
@@ -0,0 +1,40 @@
+/*
+	GoToSocial
+	Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+"use strict";
+
+const React = require("react");
+const {Switch, Route} = require("wouter");
+
+const EmojiOverview = require("./overview");
+const EmojiDetail = require("./detail");
+
+const base = "/settings/admin/custom-emoji";
+
+module.exports = function CustomEmoji() {
+	return (
+		<>
+			<Switch>
+				<Route path={`${base}/:emojiId`}>
+					<EmojiDetail />
+				</Route>
+				<EmojiOverview />
+			</Switch>
+		</>
+	);
+};
diff --git a/web/source/settings/admin/emoji/overview.js b/web/source/settings/admin/emoji/overview.js
new file mode 100644
index 000000000..bccb00ade
--- /dev/null
+++ b/web/source/settings/admin/emoji/overview.js
@@ -0,0 +1,177 @@
+/*
+	 GoToSocial
+	 Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
+
+	 This program is free software: you can redistribute it and/or modify
+	 it under the terms of the GNU Affero General Public License as published by
+	 the Free Software Foundation, either version 3 of the License, or
+	 (at your option) any later version.
+
+	 This program is distributed in the hope that it will be useful,
+	 but WITHOUT ANY WARRANTY; without even the implied warranty of
+	 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	 GNU Affero General Public License for more details.
+
+	 You should have received a copy of the GNU Affero General Public License
+	 along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+"use strict";
+
+const Promise = require("bluebird");
+const React = require("react");
+const Redux = require("react-redux");
+const {Link} = require("wouter");
+const defaultValue = require('default-value');
+
+const Submit = require("../../components/submit");
+const FakeToot = require("../../components/fake-toot");
+const { formFields } = require("../../components/form-fields");
+
+const api = require("../../lib/api");
+const adminActions = require("../../redux/reducers/admin").actions;
+const submit = require("../../lib/submit");
+
+const query = require("../../lib/query");
+
+const base = "/settings/admin/custom-emoji";
+
+module.exports = function EmojiOverview() {
+	const {
+		data: emoji,
+		isLoading,
+		error
+	} = query.useGetAllEmojiQuery({filter: "domain:local"});
+
+	return (
+		<>
+			<h1>Custom Emoji</h1>
+			{error && 
+				<div className="error accent">{error}</div>
+			}
+			{isLoading
+				? "Loading..."
+				: <>
+					<EmojiList emoji={emoji}/>
+					<NewEmoji/>
+				</>
+			}
+		</>
+	);
+};
+
+function EmojiList({emoji}) {
+	const byCategory = React.useMemo(() => {
+		const categories = {};
+
+		emoji.forEach((emoji) => {
+			let cat = defaultValue(emoji.category, "Unsorted");
+			categories[cat] = defaultValue(categories[cat], []);
+			categories[cat].push(emoji);
+		});
+
+		return categories;
+	}, [emoji]);
+	
+	return (
+		<div>
+			<h2>Overview</h2>
+			<div className="list emoji-list">
+				{emoji.length == 0 && "No local emoji yet"}
+				{Object.entries(byCategory).map(([category, entries]) => {
+					return <EmojiCategory key={category} category={category} entries={entries}/>;
+				})}
+			</div>
+		</div>
+	);
+}
+
+function EmojiCategory({category, entries}) {
+	return (
+		<div className="entry">
+			<b>{category}</b>
+			<div className="emoji-group">
+				{entries.map((e) => {
+					return (
+						<Link key={e.id} to={`${base}/${e.id}`}>
+							{/* <Link key={e.static_url} to={`${base}`}> */}
+							<a>
+								<img src={e.url} alt={e.shortcode} title={`:${e.shortcode}:`}/>
+							</a>
+						</Link>
+					);
+				})}
+			</div>
+		</div>
+	);
+}
+
+const NewEmojiForm = formFields(adminActions.updateNewEmojiVal, (state) => state.admin.newEmoji);
+function NewEmoji() {
+	const dispatch = Redux.useDispatch();
+	const newEmojiForm = Redux.useSelector((state) => state.admin.newEmoji);
+
+	const [errorMsg, setError] = React.useState("");
+	const [statusMsg, setStatus] = React.useState("");
+
+	const uploadEmoji = submit(
+		() => dispatch(api.admin.newEmoji()),
+		{
+			setStatus, setError,
+			onSuccess: function() {
+				URL.revokeObjectURL(newEmojiForm.image);
+				return Promise.all([
+					dispatch(adminActions.updateNewEmojiVal(["image", undefined])),
+					dispatch(adminActions.updateNewEmojiVal(["imageFile", undefined])),
+					dispatch(adminActions.updateNewEmojiVal(["shortcode", ""])),
+				]);
+			}
+		}
+	);
+
+	React.useEffect(() => {
+		if (newEmojiForm.shortcode.length == 0) {
+			if (newEmojiForm.imageFile != undefined) {
+				let [name, ext] = newEmojiForm.imageFile.name.split(".");
+				dispatch(adminActions.updateNewEmojiVal(["shortcode", name]));
+			}
+		}
+	});
+
+	let emojiOrShortcode = `:${newEmojiForm.shortcode}:`;
+
+	if (newEmojiForm.image != undefined) {
+		emojiOrShortcode = <img
+			className="emoji"
+			src={newEmojiForm.image}
+			title={`:${newEmojiForm.shortcode}:`}
+			alt={newEmojiForm.shortcode}
+		/>;
+	}
+
+	return (
+		<div>
+			<h2>Add new custom emoji</h2>
+
+			<FakeToot>
+				Look at this new custom emoji {emojiOrShortcode} isn&apos;t it cool?
+			</FakeToot>
+
+			<NewEmojiForm.File
+				id="image"
+				name="Image"
+				fileType="image/png,image/gif"
+				showSize={true}
+				maxSize={50 * 1000}
+			/>
+
+			<NewEmojiForm.TextInput
+				id="shortcode"
+				name="Shortcode (without : :), must be unique on the instance"
+				placeHolder="blobcat"
+			/>
+
+			<Submit onClick={uploadEmoji} label="Upload" errorMsg={errorMsg} statusMsg={statusMsg} />
+		</div>
+	);
+}
\ No newline at end of file
diff --git a/web/source/settings/index.js b/web/source/settings/index.js
index 34720e818..6a72dabe0 100644
--- a/web/source/settings/index.js
+++ b/web/source/settings/index.js
@@ -46,7 +46,7 @@ const nav = {
 		"Instance Settings": require("./admin/settings.js"),
 		"Actions": require("./admin/actions"),
 		"Federation": require("./admin/federation.js"),
-		"Custom Emoji": require("./admin/emoji.js"),
+		"Custom Emoji": require("./admin/emoji"),
 	}
 };
 
diff --git a/web/source/settings/lib/api/index.js b/web/source/settings/lib/api/index.js
index 20377824c..92c54dc0e 100644
--- a/web/source/settings/lib/api/index.js
+++ b/web/source/settings/lib/api/index.js
@@ -51,21 +51,7 @@ function apiCall(method, route, payload, type = "json") {
 					headers["Content-Type"] = "application/json";
 					body = JSON.stringify(payload);
 				} else if (type == "form") {
-					const formData = new FormData();
-					Object.entries(payload).forEach(([key, val]) => {
-						if (isPlainObject(val)) {
-							Object.entries(val).forEach(([key2, val2]) => {
-								if (val2 != undefined) {
-									formData.set(`${key}[${key2}]`, val2);
-								}
-							});
-						} else {
-							if (val != undefined) {
-								formData.set(key, val);
-							}
-						}
-					});
-					body = formData;
+					body = convertToForm(payload);
 				}
 			}
 
@@ -100,6 +86,24 @@ function apiCall(method, route, payload, type = "json") {
 	};
 }
 
+function convertToForm(payload) {
+	const formData = new FormData();
+	Object.entries(payload).forEach(([key, val]) => {
+		if (isPlainObject(val)) {
+			Object.entries(val).forEach(([key2, val2]) => {
+				if (val2 != undefined) {
+					formData.set(`${key}[${key2}]`, val2);
+				}
+			});
+		} else {
+			if (val != undefined) {
+				formData.set(key, val);
+			}
+		}
+	});
+	return formData;
+}
+
 function getChanges(state, keys) {
 	const { formKeys = [], fileKeys = [], renamedKeys = {} } = keys;
 	const update = {};
@@ -182,5 +186,6 @@ module.exports = {
 	user: require("./user")(submoduleArgs),
 	admin: require("./admin")(submoduleArgs),
 	apiCall,
+	convertToForm,
 	getChanges
 };
\ No newline at end of file
diff --git a/web/source/settings/lib/query/base.js b/web/source/settings/lib/query/base.js
new file mode 100644
index 000000000..4023e9fbd
--- /dev/null
+++ b/web/source/settings/lib/query/base.js
@@ -0,0 +1,55 @@
+/*
+	 GoToSocial
+	 Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
+
+	 This program is free software: you can redistribute it and/or modify
+	 it under the terms of the GNU Affero General Public License as published by
+	 the Free Software Foundation, either version 3 of the License, or
+	 (at your option) any later version.
+
+	 This program is distributed in the hope that it will be useful,
+	 but WITHOUT ANY WARRANTY; without even the implied warranty of
+	 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	 GNU Affero General Public License for more details.
+
+	 You should have received a copy of the GNU Affero General Public License
+	 along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+"use strict";
+
+const { createApi, fetchBaseQuery } = require("@reduxjs/toolkit/query/react");
+
+const { convertToForm } = require("../api");
+
+function instanceBasedQuery(args, api, extraOptions) {
+	const state = api.getState();
+	const {instance, token} = state.oauth;
+
+	if (args.baseUrl == undefined) {
+		args.baseUrl = instance;
+	}
+
+	if (args.asForm) {
+		delete args.asForm;
+		args.body = convertToForm(args.body);
+	}
+
+	return fetchBaseQuery({
+		baseUrl: args.baseUrl,
+		prepareHeaders: (headers) => {
+			if (token != undefined) {
+				headers.set('Authorization', token);
+			}
+			headers.set("Accept", "application/json");
+			return headers;
+		},
+	})(args, api, extraOptions);
+}
+
+module.exports = createApi({
+	reducerPath: "api",
+	baseQuery: instanceBasedQuery,
+	tagTypes: ["Emojis"],
+	endpoints: () => ({})
+});
\ No newline at end of file
diff --git a/web/source/settings/lib/query/custom-emoji.js b/web/source/settings/lib/query/custom-emoji.js
new file mode 100644
index 000000000..c448c2ec7
--- /dev/null
+++ b/web/source/settings/lib/query/custom-emoji.js
@@ -0,0 +1,70 @@
+/*
+	 GoToSocial
+	 Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
+
+	 This program is free software: you can redistribute it and/or modify
+	 it under the terms of the GNU Affero General Public License as published by
+	 the Free Software Foundation, either version 3 of the License, or
+	 (at your option) any later version.
+
+	 This program is distributed in the hope that it will be useful,
+	 but WITHOUT ANY WARRANTY; without even the implied warranty of
+	 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	 GNU Affero General Public License for more details.
+
+	 You should have received a copy of the GNU Affero General Public License
+	 along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+"use strict";
+
+const Promise = require("bluebird");
+
+const base = require("./base");
+const { getChanges } = require("../api");
+
+const endpoints = (build) => ({
+	getAllEmoji: build.query({
+		query: (params = {}) => ({
+			url: "/api/v1/admin/custom_emojis",
+			params: {
+				limit: 0,
+				...params
+			},
+			providesTags: (res) => 
+				res
+					? [...res.map((id) => ({type: "Emojis", id})), {type: "Emojis", id: "LIST"}]
+					: [{type: "Emojis", id: "LIST"}]
+		})
+	}),
+	getEmoji: build.query({
+		query: (id) => ({
+			url: `/api/v1/admin/custom_emojis/${id}`
+		}),
+		providesTags: (res, error, id) => [{type: "Emojis", id}]
+	}),
+	addEmoji: build.query({
+		query: (form) => {
+			const body = getChanges(form, {
+				formKeys: ["shortcode"],
+				fileKeys: ["image"]
+			});
+			return {
+				method: "POST",
+				url: `/api/v1/admin/custom_emojis`,
+				asForm: true,
+				body
+			};
+		},
+		providesTags: (res, error, id) => [{type: "Emojis", id}]
+	}),
+	deleteEmoji: build.mutation({
+		query: (id) => ({
+			method: "DELETE",
+			url: `/api/v1/admin/custom_emojis/${id}`
+		}),
+		invalidatesTags: (res, error, id) => [{type: "Emojis", id}]
+	})
+});
+
+module.exports = base.injectEndpoints({endpoints});
\ No newline at end of file
diff --git a/web/source/settings/lib/query/index.js b/web/source/settings/lib/query/index.js
new file mode 100644
index 000000000..5b15fd252
--- /dev/null
+++ b/web/source/settings/lib/query/index.js
@@ -0,0 +1,24 @@
+/*
+	 GoToSocial
+	 Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
+
+	 This program is free software: you can redistribute it and/or modify
+	 it under the terms of the GNU Affero General Public License as published by
+	 the Free Software Foundation, either version 3 of the License, or
+	 (at your option) any later version.
+
+	 This program is distributed in the hope that it will be useful,
+	 but WITHOUT ANY WARRANTY; without even the implied warranty of
+	 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	 GNU Affero General Public License for more details.
+
+	 You should have received a copy of the GNU Affero General Public License
+	 along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+"use strict";
+
+module.exports = {
+	...require("./base"),
+	...require("./custom-emoji.js")
+};
\ No newline at end of file
diff --git a/web/source/settings/redux/index.js b/web/source/settings/redux/index.js
index f18b8e452..43f5c007d 100644
--- a/web/source/settings/redux/index.js
+++ b/web/source/settings/redux/index.js
@@ -18,18 +18,20 @@
 
 "use strict";
 
-const { createStore, combineReducers, applyMiddleware } = require("redux");
-const { persistStore, persistReducer } = require("redux-persist");
-const thunk = require("redux-thunk").default;
-const { composeWithDevTools } = require("redux-devtools-extension");
+const { combineReducers } = require("redux");
+const { configureStore } = require("@reduxjs/toolkit");
+const {
+	persistStore,
+	persistReducer,
+	FLUSH,
+	REHYDRATE,
+	PAUSE,
+	PERSIST,
+	PURGE,
+	REGISTER,
+} = require("redux-persist");
 
-const persistConfig = {
-	key: "gotosocial-settings",
-	storage: require("redux-persist/lib/storage").default,
-	stateReconciler: require("redux-persist/lib/stateReconciler/autoMergeLevel2").default,
-	whitelist: ["oauth"],
-	blacklist: ["temporary"]
-};
+const query = require("../lib/query/base");
 
 const combinedReducers = combineReducers({
 	oauth: require("./reducers/oauth").reducer,
@@ -37,13 +39,27 @@ const combinedReducers = combineReducers({
 	temporary: require("./reducers/temporary").reducer,
 	user: require("./reducers/user").reducer,
 	admin: require("./reducers/admin").reducer,
+	[query.reducerPath]: query.reducer
 });
 
-const persistedReducer = persistReducer(persistConfig, combinedReducers);
-const composedEnhancer = composeWithDevTools(applyMiddleware(thunk));
+const persistedReducer = persistReducer({
+	key: "gotosocial-settings",
+	storage: require("redux-persist/lib/storage").default,
+	stateReconciler: require("redux-persist/lib/stateReconciler/autoMergeLevel2").default,
+	whitelist: ["oauth"],
+}, combinedReducers);
+
+const store = configureStore({
+	reducer: persistedReducer,
+	middleware: (getDefaultMiddleware) => {
+		return getDefaultMiddleware({
+			serializableCheck: {
+				ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER, "temporary/setScrollElement"]
+			}
+		}).concat(query.middleware);
+	}
+});
 
-// TODO: change to configureStore
-const store = createStore(persistedReducer, composedEnhancer);
 const persistor = persistStore(store);
 
 module.exports = { store, persistor };
\ No newline at end of file