diff --git a/api/src/database/migrations/20210910A-move-module-setup.ts b/api/src/database/migrations/20210910A-move-module-setup.ts
new file mode 100644
index 0000000000..774430cbcc
--- /dev/null
+++ b/api/src/database/migrations/20210910A-move-module-setup.ts
@@ -0,0 +1,55 @@
+import { Knex } from 'knex';
+
+export async function up(knex: Knex): Promise<void> {
+	await knex.schema.alterTable('directus_roles', (table) => {
+		table.dropColumn('module_list');
+	});
+
+	await knex.schema.alterTable('directus_settings', (table) => {
+		table.json('module_bar').defaultTo(
+			JSON.stringify([
+				{
+					type: 'module',
+					id: 'collections',
+					enabled: true,
+				},
+				{
+					type: 'module',
+					id: 'users',
+					enabled: true,
+				},
+				{
+					type: 'module',
+					id: 'files',
+					enabled: true,
+				},
+				{
+					type: 'module',
+					id: 'insights',
+					enabled: false,
+				},
+				{
+					type: 'module',
+					id: 'docs',
+					enabled: true,
+				},
+				{
+					type: 'module',
+					id: 'settings',
+					enabled: true,
+					locked: true,
+				},
+			])
+		);
+	});
+}
+
+export async function down(knex: Knex): Promise<void> {
+	await knex.schema.alterTable('directus_roles', (table) => {
+		table.json('module_list');
+	});
+
+	await knex.schema.alterTable('directus_settings', (table) => {
+		table.dropColumn('module_bar');
+	});
+}
diff --git a/api/src/database/system-data/fields/roles.yaml b/api/src/database/system-data/fields/roles.yaml
index 85880b0956..bb820c8be6 100644
--- a/api/src/database/system-data/fields/roles.yaml
+++ b/api/src/database/system-data/fields/roles.yaml
@@ -54,39 +54,6 @@ fields:
         - last_name
     width: full
 
-  - field: module_list
-    interface: list
-    options:
-      template: '{{ name }}'
-      addLabel: Add New Module...
-      fields:
-        - name: $t:field_options.directus_roles.fields.icon_name
-          field: icon
-          type: string
-          meta:
-            interface: select-icon
-            width: half
-        - name: $t:field_options.directus_roles.fields.name_name
-          field: name
-          type: string
-          meta:
-            interface: input
-            width: half
-            options:
-              iconRight: title
-              placeholder:
-        - name: $t:field_options.directus_roles.fields.link_name
-          field: link
-          type: string
-          meta:
-            interface: input
-            width: full
-            options:
-              iconRight: link
-              placeholder: $t:field_options.directus_roles.fields.link_placeholder
-    special: json
-    width: full
-
   - field: collection_list
     interface: list
     options:
diff --git a/api/src/database/system-data/fields/settings.yaml b/api/src/database/system-data/fields/settings.yaml
index 442cf0df05..88b2cdd7a5 100644
--- a/api/src/database/system-data/fields/settings.yaml
+++ b/api/src/database/system-data/fields/settings.yaml
@@ -332,3 +332,7 @@ fields:
                   type:
                     _neq: 'raster'
                 hidden: true
+
+  - field: module_bar
+    interface: system-modules
+    special: json
diff --git a/app/src/components/v-list/v-list-item.vue b/app/src/components/v-list/v-list-item.vue
index 8908c4cc89..dcdbf90996 100644
--- a/app/src/components/v-list/v-list-item.vue
+++ b/app/src/components/v-list/v-list-item.vue
@@ -138,6 +138,8 @@ body {
 	--v-list-item-min-height: 32px;
 	--v-list-item-max-height: auto;
 	--v-list-item-border-radius: var(--border-radius);
+	--v-list-item-border-color: var(--border-subdued);
+	--v-list-item-border-color-hover: var(--border-normal);
 	--v-list-item-color: var(--v-list-color, var(--foreground-normal));
 	--v-list-item-color-hover: var(--v-list-color-hover, var(--foreground-normal));
 	--v-list-item-color-active: var(--v-list-color-active, var(--foreground-normal));
@@ -223,26 +225,27 @@ body {
 	}
 
 	&.block {
+		--v-list-item-border-color: var(--border-subdued);
+		--v-list-item-background-color: var(--background-subdued);
+		--v-list-item-background-color-hover: var(--background-subdued);
+		--v-icon-color: var(--foreground-subdued);
+
 		position: relative;
 		display: flex;
 		height: var(--input-height);
 		margin: 0;
 		padding: 8px;
-		background-color: var(--background-subdued);
-		border: var(--border-width) solid var(--border-subdued);
+		background-color: var(--v-list-item-background-color);
+		border: var(--border-width) solid var(--v-list-item-border-color);
 		border-radius: var(--border-radius);
 		transition: border-color var(--fast) var(--transition);
 
-		:slotted(.v-icon) {
-			color: var(--foreground-subdued);
-
-			&:hover {
-				color: var(--foreground-normal);
-			}
-		}
-
 		:slotted(.drag-handle) {
 			cursor: grab;
+
+			&:hover {
+				color: var(--foreground-color);
+			}
 		}
 
 		:slotted(.drag-handle:active) {
@@ -254,8 +257,8 @@ body {
 		}
 
 		&:hover {
-			background-color: var(--background-subdued);
-			border: var(--border-width) solid var(--border-normal);
+			background-color: var(--v-list-item-background-color-hover);
+			border: var(--border-width) solid var(--v-list-item-border-color-hover);
 		}
 
 		&.sortable-chosen {
diff --git a/app/src/interfaces/_system/system-modules/index.ts b/app/src/interfaces/_system/system-modules/index.ts
new file mode 100644
index 0000000000..e0f9904bb3
--- /dev/null
+++ b/app/src/interfaces/_system/system-modules/index.ts
@@ -0,0 +1,12 @@
+import { defineInterface } from '@directus/shared/utils';
+import InterfaceSystemModules from './system-modules.vue';
+
+export default defineInterface({
+	id: 'system-modules',
+	name: '$t:module_bar',
+	icon: 'arrow_drop_down_circle',
+	component: InterfaceSystemModules,
+	types: ['json'],
+	options: [],
+	system: true,
+});
diff --git a/app/src/interfaces/_system/system-modules/system-modules.vue b/app/src/interfaces/_system/system-modules/system-modules.vue
new file mode 100644
index 0000000000..04dbb97801
--- /dev/null
+++ b/app/src/interfaces/_system/system-modules/system-modules.vue
@@ -0,0 +1,307 @@
+<template>
+	<div class="system-modules">
+		<v-list class="list">
+			<draggable
+				v-model="valuesWithData"
+				:force-fallback="true"
+				:set-data="hideDragImage"
+				item-key="id"
+				handle=".drag-handle"
+				:animation="150"
+			>
+				<template #item="{ element }">
+					<v-list-item
+						block
+						:class="{ enabled: element.enabled }"
+						:clickable="element.type === 'link'"
+						@click="element.type === 'link' ? edit(element.id) : undefined"
+					>
+						<v-icon class="drag-handle" name="drag_handle" />
+						<v-icon class="icon" :name="element.icon" />
+						<div class="info">
+							<div class="name">{{ element.name }}</div>
+							<div class="to">{{ element.to }}</div>
+						</div>
+						<div class="spacer" />
+						<v-icon v-if="element.locked === true" name="lock" />
+						<v-icon v-else-if="element.type === 'link'" name="clear" @click.stop="remove(element.id)" />
+						<v-icon
+							v-else
+							:name="element.enabled ? 'check_box' : 'check_box_outline_blank'"
+							clickable
+							@click.stop="updateItem(element, { enabled: !element.enabled })"
+						/>
+					</v-list-item>
+				</template>
+			</draggable>
+		</v-list>
+
+		<v-button @click="edit('+')">{{ t('add_link') }}</v-button>
+
+		<v-drawer
+			:title="t('custom_link')"
+			:model-value="!!editing"
+			icon="link"
+			@update:modelValue="editing = null"
+			@cancel="editing = null"
+		>
+			<template #actions>
+				<v-button v-tooltip.bottom="t('save')" icon rounded @click="save">
+					<v-icon name="check" />
+				</v-button>
+			</template>
+
+			<div class="drawer-content">
+				<v-form v-model="values" :initial-values="initialValues" :fields="linkFields" />
+			</div>
+		</v-drawer>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, computed, ref } from 'vue';
+import { getModules } from '@/modules';
+import { Settings, SettingsModuleBarModule, SettingsModuleBarLink } from '@directus/shared/types';
+import { hideDragImage } from '@/utils/hide-drag-image';
+import Draggable from 'vuedraggable';
+import { assign } from 'lodash';
+import { useI18n } from 'vue-i18n';
+import { nanoid } from 'nanoid';
+import { Field, DeepPartial } from '@directus/shared/types';
+
+type PreviewExtra = {
+	to: string;
+	name: string;
+	icon: string;
+};
+
+type PreviewValue = (SettingsModuleBarLink & PreviewExtra) | (SettingsModuleBarModule & PreviewExtra);
+
+const linkFields: DeepPartial<Field>[] = [
+	{
+		field: 'name',
+		name: '$t:name',
+		meta: {
+			required: true,
+			interface: 'input',
+			width: 'half-left',
+			options: {
+				placeholder: '$t:enter_a_name',
+			},
+		},
+	},
+	{
+		field: 'icon',
+		name: '$t:icon',
+		meta: {
+			required: true,
+			interface: 'select-icon',
+			width: 'half-right',
+		},
+	},
+	{
+		field: 'url',
+		name: '$t:url',
+		meta: {
+			required: true,
+			interface: 'input',
+			options: {
+				placeholder: '$t:url_example',
+			},
+		},
+	},
+];
+
+export default defineComponent({
+	name: 'SystemModules',
+	components: { Draggable },
+	props: {
+		value: {
+			type: Array as PropType<Settings['module_bar']>,
+			default: () => [],
+		},
+	},
+	emits: ['input'],
+	setup(props, { emit }) {
+		const { t } = useI18n();
+
+		const editing = ref<string | null>();
+		const values = ref<SettingsModuleBarLink | null>();
+		const initialValues = ref<SettingsModuleBarLink | null>();
+
+		const { modules: registeredModules } = getModules();
+
+		const availableModulesAsBarModule = computed<SettingsModuleBarModule[]>(() => {
+			return registeredModules.value
+				.filter((module) => module.hidden !== true)
+				.map(
+					(module): SettingsModuleBarModule => ({
+						type: 'module',
+						id: module.id,
+						enabled: false,
+					})
+				);
+		});
+
+		const valuesWithData = computed<PreviewValue[]>({
+			get() {
+				const savedModules = (props.value.filter((value) => value.type === 'module') as SettingsModuleBarModule[]).map(
+					(value) => value.id
+				);
+
+				return valueToPreview([
+					...props.value,
+					...availableModulesAsBarModule.value.filter(
+						(availableModuleAsBarModule) => savedModules.includes(availableModuleAsBarModule.id) === false
+					),
+				]);
+			},
+			set(previewValue: PreviewValue[]) {
+				emit('input', previewToValue(previewValue));
+			},
+		});
+
+		return {
+			t,
+			editing,
+			valuesWithData,
+			hideDragImage,
+			updateItem,
+			edit,
+			linkFields,
+			save,
+			values,
+			remove,
+			initialValues,
+		};
+
+		function valueToPreview(value: Settings['module_bar']): PreviewValue[] {
+			return value
+				.filter((part) => {
+					if (part.type === 'link') return true;
+					return !!registeredModules.value.find((module) => module.id === part.id);
+				})
+				.map((part) => {
+					if (part.type === 'link') {
+						return {
+							...part,
+							to: part.url,
+							icon: part.icon,
+							name: part.name,
+						};
+					}
+
+					const module = registeredModules.value.find((module) => module.id === part.id)!;
+
+					return {
+						...part,
+						to: module.link === undefined ? `/${module.id}` : '',
+						name: module.name,
+						icon: module.icon,
+					};
+				});
+		}
+
+		function previewToValue(preview: PreviewValue[]): Settings['module_bar'] {
+			return preview.map((previewValue) => {
+				if (previewValue.type === 'link') {
+					const { type, id, name, url, icon, enabled, locked } = previewValue;
+					return { type, id, name, url, icon, enabled, locked };
+				}
+
+				const { type, id, enabled, locked } = previewValue;
+				return { type, id, enabled, locked };
+			});
+		}
+
+		function updateItem(item: PreviewValue, updates: Partial<PreviewValue>): void {
+			valuesWithData.value = valuesWithData.value.map((previewValue) => {
+				if (previewValue === item) {
+					return assign({}, item, updates);
+				}
+
+				return previewValue;
+			});
+		}
+
+		function edit(id: string) {
+			editing.value = id;
+
+			let value: SettingsModuleBarLink;
+
+			if (id !== '+') {
+				value = props.value.find((val) => val.id === id) as SettingsModuleBarLink;
+			} else {
+				value = {
+					id: nanoid(),
+					type: 'link',
+					enabled: true,
+					url: '',
+					name: '',
+					icon: '',
+				};
+			}
+
+			values.value = value;
+			initialValues.value = value;
+		}
+
+		function save() {
+			if (editing.value === '+') {
+				emit('input', [...props.value, values.value]);
+			} else {
+				emit(
+					'input',
+					props.value.map((val) => (val.id === editing.value ? values.value : val))
+				);
+			}
+
+			values.value = null;
+			editing.value = null;
+		}
+
+		function remove(id: string) {
+			emit(
+				'input',
+				props.value.filter((val) => val.id !== id)
+			);
+		}
+	},
+});
+</script>
+
+<style scoped>
+.icon {
+	margin: 0 12px;
+}
+
+.v-list-item.enabled {
+	--v-list-item-border-color: var(--primary);
+	--v-list-item-color: var(--primary-125);
+	--v-list-item-background-color: var(--primary-10);
+	--v-list-item-border-color-hover: var(--primary-150);
+	--v-list-item-color-hover: var(--primary-125);
+	--v-list-item-background-color-hover: var(--primary-10);
+	--v-icon-color: var(--primary);
+	--v-icon-color-hover: var(--foreground-normal);
+}
+
+.to {
+	color: var(--foreground-subdued);
+	font-family: var(--family-monospace);
+}
+
+.enabled .to {
+	color: var(--primary-50);
+}
+
+.drawer-content {
+	padding: var(--content-padding);
+	padding-bottom: var(--content-padding-bottom);
+}
+
+.list {
+	margin-bottom: 8px;
+	padding: 0;
+}
+</style>
diff --git a/app/src/lang/translations/en-US.yaml b/app/src/lang/translations/en-US.yaml
index 07c0ffb751..20125929b3 100644
--- a/app/src/lang/translations/en-US.yaml
+++ b/app/src/lang/translations/en-US.yaml
@@ -23,10 +23,13 @@
 published: Published
 draft: Draft
 archived: Archived
+module_bar: Module Bar
+tile_size: Tile Size
 edit_field: Edit Field
 conditions: Conditions
 maps: Maps
 item_revision: Item Revision
+enter_a_name: Enter a Name...
 duplicate_field: Duplicate Field
 half_width: Half Width
 full_width: Full Width
@@ -57,6 +60,7 @@ create_user: Create User
 create_webhook: Create Webhook
 invite_users: Invite Users
 email_examples: "admin{'@'}example.com, user{'@'}example.com..."
+url_example: "https://example.com"
 invite: Invite
 email_already_invited: Email "{email}" has already been invited
 emails: Emails
@@ -220,6 +224,8 @@ add_m2m_to_collection: 'Add Many-to-Many to "{collection}"'
 choose_a_type: Choose a Type...
 determined_by_relationship: Determined by Relationship
 add_note: Add a helpful note for users...
+add_link: Add Link
+custom_link: Custom Link
 default_value: Default Value
 standard_field: Standard Field
 single_file: Single File
diff --git a/app/src/stores/settings.ts b/app/src/stores/settings.ts
index 6f467d1c40..ad05ada36c 100644
--- a/app/src/stores/settings.ts
+++ b/app/src/stores/settings.ts
@@ -4,11 +4,12 @@ import { notify } from '@/utils/notify';
 import { unexpectedError } from '@/utils/unexpected-error';
 import { merge } from 'lodash';
 import { defineStore } from 'pinia';
+import { Settings } from '@directus/shared/types';
 
 export const useSettingsStore = defineStore({
 	id: 'settingsStore',
 	state: () => ({
-		settings: null as null | Record<string, any>,
+		settings: null as null | Settings,
 	}),
 	actions: {
 		async hydrate() {
diff --git a/app/src/styles/_variables.scss b/app/src/styles/_variables.scss
index 7d5bf464fe..4fb49f0f38 100644
--- a/app/src/styles/_variables.scss
+++ b/app/src/styles/_variables.scss
@@ -1,5 +1,5 @@
 :root {
-	--brand: var(--primary); // will be overriden with directus_settings.project_color
+	--brand: var(--primary); // will be overridden with directus_settings.project_color
 	--white: #fff;
 	--black: #090c0d;
 	--transition: cubic-bezier(0.4, 0, 0.2, 1);
diff --git a/app/src/views/private/components/module-bar.vue b/app/src/views/private/components/module-bar.vue
new file mode 100644
index 0000000000..f6401ba9d2
--- /dev/null
+++ b/app/src/views/private/components/module-bar.vue
@@ -0,0 +1,109 @@
+<template>
+	<div class="module-bar">
+		<module-bar-logo />
+
+		<div class="modules">
+			<v-button
+				v-for="modulePart in modules"
+				:key="modulePart.id"
+				v-tooltip.right="modulePart.name"
+				icon
+				x-large
+				:to="modulePart.to"
+				:href="modulePart.url"
+				tile
+				:style="
+					modulePart.color
+						? {
+								'--v-button-color-active': modulePart.color,
+						  }
+						: null
+				"
+			>
+				<v-icon :name="modulePart.icon" outline />
+			</v-button>
+		</div>
+		<module-bar-avatar />
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from 'vue';
+import { getModules } from '@/modules/';
+import ModuleBarLogo from './module-bar-logo/';
+import ModuleBarAvatar from './module-bar-avatar/';
+import { useSettingsStore } from '@/stores/';
+import { translate } from '@/utils/translate-object-values';
+
+export default defineComponent({
+	components: {
+		ModuleBarLogo,
+		ModuleBarAvatar,
+	},
+	setup() {
+		const settingsStore = useSettingsStore();
+		const { modules: registeredModules } = getModules();
+
+		const registeredModuleIDs = computed(() => registeredModules.value.map((module) => module.id));
+
+		const modules = computed(() => {
+			if (!settingsStore.settings) return [];
+
+			return settingsStore.settings.module_bar
+				.filter((modulePart) => {
+					if (modulePart.type === 'link') return true;
+					return modulePart.enabled && registeredModuleIDs.value.includes(modulePart.id);
+				})
+				.map((modulePart) => {
+					if (modulePart.type === 'link') {
+						return translate(modulePart);
+					}
+
+					const module = registeredModules.value.find((module) => module.id === modulePart.id)!;
+
+					return {
+						...modulePart,
+						...registeredModules.value.find((module) => module.id === modulePart.id),
+						to: module.link === undefined ? `/${module.id}` : '',
+					};
+				});
+		});
+
+		return { modules };
+	},
+});
+</script>
+
+<style>
+body {
+	--module-background: #18222f;
+	--module-background-alt: var(--background-normal);
+	--module-icon: #8196b1;
+	--module-icon-alt: var(--foreground-normal-alt);
+}
+</style>
+
+<style lang="scss" scoped>
+.module-bar {
+	display: flex;
+	flex-direction: column;
+	width: 60px;
+	height: 100%;
+	background-color: var(--module-background);
+
+	.modules {
+		flex-grow: 1;
+		overflow-x: hidden;
+		overflow-y: auto;
+	}
+
+	.v-button {
+		--v-button-color: var(--module-icon);
+		--v-button-color-hover: var(--white);
+		--v-button-color-active: var(--module-icon-alt);
+		--v-button-background-color: var(--module-background);
+		--v-button-background-color-hover: var(--module-background);
+		--v-button-background-color-active: var(--module-background-alt);
+	}
+}
+</style>
diff --git a/app/src/views/private/components/module-bar/index.ts b/app/src/views/private/components/module-bar/index.ts
deleted file mode 100644
index 32b98805b4..0000000000
--- a/app/src/views/private/components/module-bar/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import ModuleBar from './module-bar.vue';
-
-export { ModuleBar };
-export default ModuleBar;
diff --git a/app/src/views/private/components/module-bar/module-bar.vue b/app/src/views/private/components/module-bar/module-bar.vue
deleted file mode 100644
index 5bd856bc3f..0000000000
--- a/app/src/views/private/components/module-bar/module-bar.vue
+++ /dev/null
@@ -1,125 +0,0 @@
-<template>
-	<div class="module-bar">
-		<module-bar-logo />
-		<div class="modules">
-			<v-button
-				v-for="module in internalModules"
-				:key="module.id"
-				v-tooltip.right="module.name"
-				icon
-				x-large
-				:to="module.to"
-				:href="module.href"
-				tile
-				:style="
-					module.color
-						? {
-								'--v-button-color-active': module.color,
-						  }
-						: null
-				"
-			>
-				<v-icon :name="module.icon" outline />
-			</v-button>
-		</div>
-		<module-bar-avatar />
-	</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, computed, unref } from 'vue';
-
-import { getModules } from '@/modules/';
-import ModuleBarLogo from '../module-bar-logo/';
-import ModuleBarAvatar from '../module-bar-avatar/';
-import { useUserStore } from '@/stores/';
-import { orderBy } from 'lodash';
-import { ModuleConfig } from '@directus/shared/types';
-
-export default defineComponent({
-	components: {
-		ModuleBarLogo,
-		ModuleBarAvatar,
-	},
-	setup() {
-		const userStore = useUserStore();
-		const { modules } = getModules();
-
-		const internalModules = computed(() => {
-			const customModuleListing = userStore.currentUser?.role.module_list;
-
-			const registeredModules = orderBy(
-				modules.value
-					.map((module: ModuleConfig) => ({
-						...module,
-						href: module.link,
-						to: module.link === undefined ? `/${module.id}` : '',
-					}))
-					.filter((module: ModuleConfig) => {
-						if (module.hidden !== undefined && unref(module.hidden) === true) {
-							return false;
-						}
-						return true;
-					}),
-				['order'],
-				['asc']
-			);
-
-			if (customModuleListing && Array.isArray(customModuleListing) && customModuleListing.length > 0) {
-				return [
-					...customModuleListing.map((custom) => {
-						if (custom.link?.startsWith('http') || custom.link?.startsWith('//')) {
-							return {
-								...custom,
-								href: custom.link,
-							};
-						} else {
-							return {
-								...custom,
-								to: custom.link,
-							};
-						}
-					}),
-					...registeredModules.filter((module) => module.persistent === true),
-				];
-			}
-			return registeredModules;
-		});
-		return { internalModules, modules };
-	},
-});
-</script>
-
-<style>
-body {
-	--module-background: #18222f;
-	--module-background-alt: var(--background-normal);
-	--module-icon: #8196b1;
-	--module-icon-alt: var(--foreground-normal-alt);
-}
-</style>
-
-<style lang="scss" scoped>
-.module-bar {
-	display: flex;
-	flex-direction: column;
-	width: 60px;
-	height: 100%;
-	background-color: var(--module-background);
-
-	.modules {
-		flex-grow: 1;
-		overflow-x: hidden;
-		overflow-y: auto;
-	}
-
-	.v-button {
-		--v-button-color: var(--module-icon);
-		--v-button-color-hover: var(--white);
-		--v-button-color-active: var(--module-icon-alt);
-		--v-button-background-color: var(--module-background);
-		--v-button-background-color-hover: var(--module-background);
-		--v-button-background-color-active: var(--module-background-alt);
-	}
-}
-</style>
diff --git a/app/src/views/private/components/module-bar/readme.md b/app/src/views/private/components/module-bar/readme.md
deleted file mode 100644
index 2e9272f6e1..0000000000
--- a/app/src/views/private/components/module-bar/readme.md
+++ /dev/null
@@ -1,25 +0,0 @@
-# Module bar
-
-The left most sidebar that holds the module navigation.
-
-## Usage
-
-```html
-<module-bar />
-```
-
-## Props
-
-n/a
-
-## Slots
-
-n/a
-
-## Events
-
-n/a
-
-## CSS Variables
-
-n/a
diff --git a/app/src/views/private/private-view.vue b/app/src/views/private/private-view.vue
index da3b25192e..00c8fcba42 100644
--- a/app/src/views/private/private-view.vue
+++ b/app/src/views/private/private-view.vue
@@ -64,7 +64,7 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, ref, provide, toRefs, computed } from 'vue';
-import ModuleBar from './components/module-bar/';
+import ModuleBar from './components/module-bar.vue';
 import SidebarDetailGroup from './components/sidebar-detail-group/';
 import HeaderBar from './components/header-bar';
 import ProjectInfo from './components/project-info';
diff --git a/docs/reference/api/system/roles.md b/docs/reference/api/system/roles.md
index 472d9597c6..59a6e7bd3e 100644
--- a/docs/reference/api/system/roles.md
+++ b/docs/reference/api/system/roles.md
@@ -44,9 +44,6 @@ CSV of IP addresses that have access to this role. Allows you to configure an al
 `enforce_tfa` **boolean**\
 Whether or not Two-Factor Authentication is required for users in this role.
 
-`module_list` **object**\
-Override for the module listing in the left most sidebar of the Admin App.
-
 `collection_list` **object**\
 Override for the collection listing in the navigation of the collections module in the Admin App.
 
@@ -71,7 +68,6 @@ The users in this role. One-to-many to [users](/reference/api/system/users/).
 	"description": null,
 	"ip_access": null,
 	"enforce_tfa": false,
-	"module_list": null,
 	"collection_list": null,
 	"admin_access": true,
 	"app_access": true,
diff --git a/packages/shared/src/types/index.ts b/packages/shared/src/types/index.ts
index 16e60a2ca2..efb94bacd2 100644
--- a/packages/shared/src/types/index.ts
+++ b/packages/shared/src/types/index.ts
@@ -13,4 +13,5 @@ export * from './misc';
 export * from './modules';
 export * from './permissions';
 export * from './presets';
+export * from './settings';
 export * from './users';
diff --git a/packages/shared/src/types/settings.ts b/packages/shared/src/types/settings.ts
new file mode 100644
index 0000000000..5c175ac137
--- /dev/null
+++ b/packages/shared/src/types/settings.ts
@@ -0,0 +1,47 @@
+export type SettingsModuleBarModule = {
+	type: 'module';
+	id: string;
+	enabled: boolean;
+	locked?: boolean;
+};
+
+export type SettingsModuleBarLink = {
+	type: 'link';
+	id: string;
+	url: string;
+	icon: string;
+	name: string;
+	enabled: boolean;
+	locked?: boolean;
+};
+
+export type Settings = {
+	id: 1;
+	project_name: string;
+	project_url: string | null;
+	project_color: string | null;
+	project_logo: string | null;
+	public_foreground: string | null;
+	public_background: string | null;
+	public_note: string | null;
+	auth_login_attempts: number;
+	auth_password_policy: string | null;
+	storage_asset_transform: string;
+	storage_asset_presets:
+		| {
+				key: string | null;
+				fit: 'contain' | 'cover' | 'inside' | 'outside' | null;
+				width: number | null;
+				height: number | null;
+				quality: number | null;
+				withoutEnlargement: boolean | null;
+				format: 'jpeg' | 'png' | 'webp' | 'tiff' | null;
+				transforms: any[] | null;
+		  }[]
+		| null;
+	custom_css: string | null;
+	storage_default_folder: string | null;
+	basemaps: any[] | null;
+	mapbox_key: string | null;
+	module_bar: (SettingsModuleBarLink | SettingsModuleBarModule)[];
+};
diff --git a/packages/shared/src/types/users.ts b/packages/shared/src/types/users.ts
index 2d1a6a4b3e..7c87de4b73 100644
--- a/packages/shared/src/types/users.ts
+++ b/packages/shared/src/types/users.ts
@@ -11,13 +11,6 @@ export type Role = {
 					collection: string;
 				}[];
 		  }[];
-	module_list:
-		| null
-		| {
-				link: string;
-				name: string;
-				icon: string;
-		  }[];
 	enforce_2fa: null | boolean;
 	external_id: null | string;
 	ip_whitelist: string[];
diff --git a/packages/specs/src/components/role.yaml b/packages/specs/src/components/role.yaml
index 9ae427f2f2..4b103ef948 100644
--- a/packages/specs/src/components/role.yaml
+++ b/packages/specs/src/components/role.yaml
@@ -28,13 +28,6 @@ properties:
     description: Whether or not this role enforces the use of 2FA.
     example: false
     type: boolean
-  module_list:
-    description: Custom override for the admin app module bar navigation.
-    example: null
-    type: array
-    items:
-      type: object
-    nullable: true
   collection_list:
     description: Custom override for the admin app collection navigation.
     example: null