diff --git a/app/src/app.vue b/app/src/app.vue
index 1af46b55dd..aac919bf04 100644
--- a/app/src/app.vue
+++ b/app/src/app.vue
@@ -48,7 +48,7 @@ export default defineComponent({
 		const userStore = useUserStore();
 		const settingsStore = useSettingsStore();
 
-		const { hydrating, drawerOpen } = toRefs(appStore.state);
+		const { hydrating, sidebarOpen } = toRefs(appStore.state);
 
 		const brandStyle = computed(() => {
 			return {
@@ -73,9 +73,9 @@ export default defineComponent({
 				if (newWidth === oldWidth) return;
 
 				if (newWidth >= 1424) {
-					if (drawerOpen.value === false) drawerOpen.value = true;
+					if (sidebarOpen.value === false) sidebarOpen.value = true;
 				} else {
-					if (drawerOpen.value === true) drawerOpen.value = false;
+					if (sidebarOpen.value === true) sidebarOpen.value = false;
 				}
 			},
 			{ immediate: true }
diff --git a/app/src/components/register.ts b/app/src/components/register.ts
index f7a3d66826..53c643919b 100644
--- a/app/src/components/register.ts
+++ b/app/src/components/register.ts
@@ -22,8 +22,7 @@ import VInput from './v-input/';
 import VItemGroup, { VItem } from './v-item-group';
 import VList, { VListGroup, VListItem, VListItemContent, VListItemHint, VListItemIcon, VListItemText } from './v-list/';
 import VMenu from './v-menu/';
-import VModal from './v-modal/';
-import VModalHeading from './v-modal/v-modal-heading.vue';
+import VDrawer from './v-drawer/';
 import VNotice from './v-notice/';
 import VOverlay from './v-overlay/';
 import VPagination from './v-pagination/';
@@ -73,8 +72,7 @@ Vue.component('v-list-item-text', VListItemText);
 Vue.component('v-list-item', VListItem);
 Vue.component('v-list', VList);
 Vue.component('v-menu', VMenu);
-Vue.component('v-modal', VModal);
-Vue.component('v-modal-heading', VModalHeading);
+Vue.component('v-drawer', VDrawer);
 Vue.component('v-notice', VNotice);
 Vue.component('v-overlay', VOverlay);
 Vue.component('v-pagination', VPagination);
@@ -104,14 +102,14 @@ Vue.component('transition-expand', TransitionExpand);
 
 import RenderDisplay from '@/views/private/components/render-display';
 import RenderTemplate from '@/views/private/components/render-template';
-import DrawerDetail from '@/views/private/components/drawer-detail/';
-import FilterDrawerDetail from '@/views/private/components/filter-drawer-detail';
+import SidebarDetail from '@/views/private/components/sidebar-detail/';
+import FilterSidebarDetail from '@/views/private/components/filter-sidebar-detail';
 import UserPopover from '@/views/private/components/user-popover';
 import ValueNull from '@/views/private/components/value-null';
 
 Vue.component('render-display', RenderDisplay);
 Vue.component('render-template', RenderTemplate);
-Vue.component('filter-drawer-detail', FilterDrawerDetail);
-Vue.component('drawer-detail', DrawerDetail);
+Vue.component('filter-sidebar-detail', FilterSidebarDetail);
+Vue.component('sidebar-detail', SidebarDetail);
 Vue.component('user-popover', UserPopover);
 Vue.component('value-null', ValueNull);
diff --git a/app/src/components/transition/dialog/transition-dialog.vue b/app/src/components/transition/dialog/transition-dialog.vue
index 41ba222234..451d0ed13b 100644
--- a/app/src/components/transition/dialog/transition-dialog.vue
+++ b/app/src/components/transition/dialog/transition-dialog.vue
@@ -5,24 +5,34 @@
 </template>
 
 <style lang="scss">
-/** @NOTE this is not scoped on purpose. The children are outsisde of the tree (portal) */
+/** @NOTE this is not scoped on purpose. The children are outside of the tree (portal) */
 .dialog-enter-active,
 .dialog-leave-active {
 	transition: opacity var(--slow) var(--transition);
 
-	& > *:not(.v-overlay) {
+	&.center > *:not(.v-overlay) {
 		transform: translateY(0px);
 		transition: transform var(--slow) var(--transition-in);
 	}
+
+	&.right > *:not(.v-overlay) {
+		transform: translateX(0px);
+		transition: transform var(--slow) var(--transition-in);
+	}
 }
 
 .dialog-enter,
 .dialog-leave-to {
 	opacity: 0;
 
-	& > *:not(.v-overlay) {
+	&.center > *:not(.v-overlay) {
 		transform: translateY(50px);
 		transition: transform var(--slow) var(--transition-out);
 	}
+
+	&.right > *:not(.v-overlay) {
+		transform: translateX(50px);
+		transition: transform var(--slow) var(--transition-out);
+	}
 }
 </style>
diff --git a/app/src/components/v-dialog/v-dialog.vue b/app/src/components/v-dialog/v-dialog.vue
index 0a734c2630..a411cd4d69 100644
--- a/app/src/components/v-dialog/v-dialog.vue
+++ b/app/src/components/v-dialog/v-dialog.vue
@@ -3,7 +3,7 @@
 		<slot name="activator" v-bind="{ on: () => (_active = true) }" />
 
 		<portal to="dialog-outlet">
-			<div v-if="_active" class="container" :class="[className]" :key="id">
+			<div v-if="_active" class="container" :class="[className, placement]" :key="id">
 				<v-overlay active absolute @click="emitToggle" />
 				<slot />
 			</div>
@@ -30,6 +30,11 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		placement: {
+			type: String,
+			default: 'center',
+			validator: (val: string) => ['center', 'right'].includes(val),
+		},
 	},
 	setup(props, { emit }) {
 		const dialog = ref<HTMLElement | null>(null);
@@ -92,11 +97,32 @@ export default defineComponent({
 	left: 0;
 	z-index: 500;
 	display: flex;
-	align-items: center;
-	justify-content: center;
 	width: 100%;
 	height: 100%;
-	transition: opacity var(--medium) var(--transition);
+
+	::v-deep > * {
+		z-index: 2;
+		box-shadow: 0px 4px 12px rgba(38, 50, 56, 0.1);
+	}
+
+	&.center {
+		align-items: center;
+		justify-content: center;
+
+		&.nudge > ::v-deep *:not(:first-child) {
+			animation: nudge 200ms;
+		}
+	}
+
+	&.right {
+		align-items: center;
+		justify-content: flex-end;
+
+		&.nudge > ::v-deep *:not(:first-child) {
+			transform-origin: right;
+			animation: shake 200ms;
+		}
+	}
 
 	::v-deep .v-card {
 		--v-card-min-width: 540px;
@@ -112,15 +138,6 @@ export default defineComponent({
 	.v-overlay {
 		--v-overlay-z-index: 1;
 	}
-
-	&.nudge {
-		animation: nudge 200ms;
-	}
-
-	::v-deep > * {
-		z-index: 2;
-		box-shadow: 0px 4px 12px rgba(38, 50, 56, 0.1);
-	}
 }
 
 @keyframes nudge {
@@ -136,4 +153,18 @@ export default defineComponent({
 		transform: scale(1);
 	}
 }
+
+@keyframes shake {
+	0% {
+		transform: scaleX(1);
+	}
+
+	50% {
+		transform: scaleX(0.98);
+	}
+
+	100% {
+		transform: scaleX(1);
+	}
+}
 </style>
diff --git a/app/src/components/v-drawer/index.ts b/app/src/components/v-drawer/index.ts
new file mode 100644
index 0000000000..789569bf51
--- /dev/null
+++ b/app/src/components/v-drawer/index.ts
@@ -0,0 +1,4 @@
+import VDrawer from './v-drawer.vue';
+
+export { VDrawer };
+export default VDrawer;
diff --git a/app/src/components/v-modal/v-modal.vue b/app/src/components/v-drawer/v-drawer.vue
similarity index 53%
rename from app/src/components/v-modal/v-modal.vue
rename to app/src/components/v-drawer/v-drawer.vue
index fcce7ff4c3..1a5cb99bfd 100644
--- a/app/src/components/v-modal/v-modal.vue
+++ b/app/src/components/v-drawer/v-drawer.vue
@@ -1,20 +1,23 @@
 <template>
-	<v-dialog v-model="_active" @esc="$emit('esc')" :persistent="persistent">
+	<v-dialog v-model="_active" @esc="$emit('cancel')" :persistent="persistent" placement="right">
 		<template #activator="{ on }">
 			<slot name="activator" v-bind="{ on }" />
 		</template>
 
-		<article class="v-modal" :class="{ 'form-width': formWidth }">
-			<header class="header">
-				<v-icon class="menu-toggle" name="menu" @click="sidebarActive = !sidebarActive" />
-				<h2 class="title">{{ title }}</h2>
-				<slot name="subtitle">
-					<p v-if="subtitle" class="subtitle">{{ subtitle }}</p>
-				</slot>
-				<div class="spacer" />
-				<slot name="header:append" />
-			</header>
-			<div class="content" :class="{ 'no-padding': noPadding }">
+		<article class="v-drawer">
+			<v-button
+				v-if="showCancel"
+				class="cancel"
+				@click="$emit('cancel')"
+				icon
+				rounded
+				secondary
+				v-tooltip.bottom="$t('cancel')"
+			>
+				<v-icon name="close" />
+			</v-button>
+
+			<div class="content">
 				<v-overlay v-if="$slots.sidebar" absolute :active="sidebarActive" @click="sidebarActive = false" />
 				<nav
 					v-if="$slots.sidebar"
@@ -25,20 +28,40 @@
 					<slot name="sidebar" />
 				</nav>
 				<main ref="mainEl" class="main">
+					<header-bar :title="title">
+						<template #headline>
+							<slot name="subtitle">
+								<p v-if="subtitle" class="subtitle">{{ subtitle }}</p>
+							</slot>
+						</template>
+
+						<template #title-outer:prepend>
+							<v-button class="header-icon" rounded icon secondary disabled>
+								<v-icon :name="icon" />
+							</v-button>
+						</template>
+
+						<template #actions:prepend><slot name="actions:prepend" /></template>
+						<template #actions><slot name="actions" /></template>
+
+						<template #title:append><slot name="header:append" /></template>
+					</header-bar>
+
 					<slot />
 				</main>
 			</div>
-			<footer class="footer" v-if="$slots.footer || $scopedSlots.footer">
-				<slot name="footer" v-bind="{ close: () => (_active = false) }" />
-			</footer>
 		</article>
 	</v-dialog>
 </template>
 
 <script lang="ts">
 import { defineComponent, ref, computed, provide } from '@vue/composition-api';
+import HeaderBar from '@/views/private/components/header-bar/header-bar.vue';
 
 export default defineComponent({
+	components: {
+		HeaderBar,
+	},
 	model: {
 		prop: 'active',
 		event: 'toggle',
@@ -60,18 +83,12 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
-		noPadding: {
-			type: Boolean,
-			default: false,
-		},
-		formWidth: {
-			// If the modal is used to just render a form, it needs to be a little smaller to
-			// allow the form to be rendered in it's correct full size
-			type: Boolean,
-			default: false,
+		icon: {
+			type: String,
+			default: 'box',
 		},
 	},
-	setup(props, { emit }) {
+	setup(props, { emit, listeners }) {
 		const sidebarActive = ref(false);
 		const localActive = ref(false);
 
@@ -89,63 +106,47 @@ export default defineComponent({
 			},
 		});
 
-		return { sidebarActive, _active, mainEl };
+		const showCancel = computed(() => {
+			return listeners.hasOwnProperty('cancel');
+		});
+
+		return { sidebarActive, _active, mainEl, showCancel };
 	},
 });
 </script>
 
 <style>
 body {
-	--v-modal-max-width: 916px;
+	--v-drawer-max-width: 856px;
 }
 </style>
 
 <style lang="scss" scoped>
 @import '@/styles/mixins/breakpoint';
 
-.v-modal {
+.v-drawer {
+	position: relative;
 	display: flex;
 	flex-direction: column;
-	width: calc(100% - 16px);
-	max-width: var(--v-modal-max-width);
-	height: calc(100% - 16px);
-	max-height: 800px;
+	max-width: var(--v-drawer-max-width);
+	height: 100%;
 	background-color: var(--background-page);
-	border-radius: 4px;
+
+	.cancel {
+		position: absolute;
+		top: 32px;
+		left: -76px;
+	}
 
 	.spacer {
 		flex-grow: 1;
 	}
 
-	.header {
-		display: flex;
-		flex-shrink: 0;
-		align-items: center;
-		height: 60px;
-		padding: 0 16px;
-		border-bottom: 2px solid var(--background-normal);
-
-		.title {
-			margin-right: 12px;
-			font-size: 16px;
-		}
-
-		.subtitle {
-			color: var(--foreground-subdued);
-			font-size: 16px;
-		}
-
-		.menu-toggle {
-			margin-right: 8px;
-
-			@include breakpoint(medium) {
-				display: none;
-			}
-		}
-
-		@include breakpoint(medium) {
-			padding: 0 24px;
-		}
+	.header-icon {
+		--v-button-background-color: var(--background-normal);
+		--v-button-background-color-activated: var(--background-normal);
+		--v-button-background-color-hover: var(--background-normal-alt);
+		--v-button-color-disabled: var(--foreground-normal);
 	}
 
 	.content {
@@ -190,45 +191,20 @@ body {
 		}
 
 		.main {
+			--content-padding: 16px;
+			--content-padding-bottom: 32px;
+
 			flex-grow: 1;
-			padding: 16px 16px 32px;
 			overflow: auto;
 
 			@include breakpoint(medium) {
-				padding: 32px;
+				--content-padding: 32px;
 			}
 		}
-
-		&.no-padding .main {
-			padding: 0px;
-		}
-	}
-
-	.footer {
-		display: flex;
-		flex-shrink: 0;
-		align-items: center;
-		justify-content: flex-end;
-		height: 60px;
-		padding: 0 16px;
-		border-top: 2px solid var(--background-normal);
-
-		::v-deep > *:not(:last-child) {
-			margin-right: 8px;
-		}
-
-		@include breakpoint(medium) {
-			padding: 0 24px;
-		}
 	}
 
 	@include breakpoint(medium) {
 		width: calc(100% - 64px);
-		height: calc(100% - 64px);
 	}
 }
-
-.form-width {
-	--v-modal-max-width: 856px;
-}
 </style>
diff --git a/app/src/components/v-form/v-form.vue b/app/src/components/v-form/v-form.vue
index 959e66f79b..8535bb817b 100644
--- a/app/src/components/v-form/v-form.vue
+++ b/app/src/components/v-form/v-form.vue
@@ -139,10 +139,10 @@ export default defineComponent({
 			const gridClass = computed<string | null>(() => {
 				if (el.value === null) return null;
 
-				if (width.value > 588 && width.value <= 792) {
-					return 'grid';
-				} else {
+				if (width.value > 792) {
 					return 'grid with-fill';
+				} else {
+					return 'grid';
 				}
 
 				return null;
diff --git a/app/src/components/v-modal/index.ts b/app/src/components/v-modal/index.ts
deleted file mode 100644
index c3a4ca2b16..0000000000
--- a/app/src/components/v-modal/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import VModal from './v-modal.vue';
-
-export { VModal };
-export default VModal;
diff --git a/app/src/components/v-modal/readme.md b/app/src/components/v-modal/readme.md
deleted file mode 100644
index 9818b9ca27..0000000000
--- a/app/src/components/v-modal/readme.md
+++ /dev/null
@@ -1,73 +0,0 @@
-# Modal
-
-A modal is basically an elaborate pre-configured dialog. It supports an optional left sidebar that allows for easier tab usage.
-
-## Usage
-
-```html
-<v-modal title="My Modal" v-modal="active">
-	Hello, world!
-</v-modal>
-```
-
-```html
-<v-modal title="My Modal">
-	<template #activator="{ on }">
-		<v-button @click="on">Open modal</v-button>
-	</template>
-
-	Hello, world!
-</v-modal>
-```
-
-```html
-<v-modal title="My Modal" v-model="active">
-	<template #activator="{ on }">
-		<v-button @click="on">Open modal</v-button>
-	</template>
-
-	<template #sidebar>
-		<v-tabs vertical>
-			<v-tab>Hello</v-tab>
-			<v-tab>Page 2</v-tab>
-			<v-tab>Page 3</v-tab>
-		</v-tabs>
-	</template>
-
-	<v-tabs-items>
-		<v-tab-item>Hello, world!</v-tab-item>
-		<v-tab-item>I'm page 2!</v-tab-item>
-		<v-tab-item>I'm page 3!</v-tab-item>
-	</v-tabs-items>
-
-	<template #footer="{ close }">
-		<v-button @click="close">Close modal</v-button>
-	</template>
-</v-modal>
-```
-
-## Props
-
-| Prop         | Description                                                     | Default |
-|--------------|-----------------------------------------------------------------|---------|
-| `title`*     | Title for the modal                                             |         |
-| `subtitle`   | Optional subtitle for the modal                                 |         |
-| `active`     | If the modal is active. Used in `v-model`                       | `false` |
-| `persistent` | Prevent the user from exiting the modal by clicking the overlay | `false` |
-
-## Events
-
-| Event    | Description              | Value     |
-|----------|--------------------------|-----------|
-| `toggle` | Sync the `v-model` value | `boolean` |
-
-## Slots
-| Slot        | Description                                            | Data                    |
-|-------------|--------------------------------------------------------|-------------------------|
-| _default_   | Modal content                                          |                         |
-| `activator` | Element to enable the modal                            | `{ on: () => void }`    |
-| `sidebar`   | Sidebar content for the modal. Often used for `v-tabs` |                         |
-| `footer`    | Footer content. Often used for action buttons          | `{ close: () => void }` |
-
-## CSS Variables
-n/a
diff --git a/app/src/components/v-modal/v-modal-heading.vue b/app/src/components/v-modal/v-modal-heading.vue
deleted file mode 100644
index 87e523381e..0000000000
--- a/app/src/components/v-modal/v-modal-heading.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-	<div class="v-modal-heading">
-		<div class="type-title">{{ heading }}</div>
-		<div v-if="subheading" class="subheading">{{ subheading }}</div>
-	</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from '@vue/composition-api';
-
-export default defineComponent({
-	props: {
-		heading: {
-			type: String,
-			required: true,
-		},
-		subheading: {
-			type: String,
-			default: null,
-		},
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.v-modal-heading {
-	margin-bottom: 48px;
-
-	.subheading {
-		margin-top: 4px;
-		color: var(--foreground-subdued);
-	}
-}
-</style>
diff --git a/app/src/components/v-modal/v-modal.story.ts b/app/src/components/v-modal/v-modal.story.ts
deleted file mode 100644
index c9d9ba61b4..0000000000
--- a/app/src/components/v-modal/v-modal.story.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import withPadding from '../../../.storybook/decorators/with-padding';
-import readme from './readme.md';
-import { defineComponent, ref } from '@vue/composition-api';
-
-export default {
-	title: 'Components / Modal',
-	parameters: {
-		notes: readme,
-	},
-	decorators: [withPadding],
-};
-
-export const basic = () =>
-	defineComponent({
-		setup() {
-			const active = ref(false);
-			return { active };
-		},
-		template: `
-			<div>
-				<v-modal
-					v-model="active"
-					title="Creating New Collection"
-					subtitle="called Customers"
-				>
-					<template #activator="{ on }">
-						<v-button @click="on">Enable modal</v-button>
-					</template>
-
-					<p>Hello world!</p>
-
-					<template #footer="{ close }">
-						<v-button @click="close">Close modal</v-button>
-					</template>
-				</v-modal>
-				<portal-target name="outlet" />
-			</div>
-		`,
-	});
-
-export const withNav = () =>
-	defineComponent({
-		setup() {
-			const active = ref(false);
-			const current = ref(['hello']);
-			return { active, current };
-		},
-		template: `
-			<div>
-				<v-modal
-					v-model="active"
-					title="Creating New Collection"
-					subtitle="called Customers"
-				>
-					<template #activator="{ on }">
-						<v-button @click="on">Enable modal</v-button>
-					</template>
-
-					<template #sidebar>
-						<v-tabs v-model="current" vertical>
-							<v-tab value="hello">Hello</v-tab>
-							<v-tab value="introduce">Modal</v-tab>
-						</v-tabs>
-					</template>
-
-					<v-tabs-items v-model="current">
-						<v-tab-item value="hello">
-							<p>Hello world!</p>
-						</v-tab-item>
-
-						<v-tab-item value="introduce">
-							<p>I'm a modal with tabs</p>
-						</v-tab-item>
-					</v-tabs-items>
-
-
-					<template #footer="{ close }">
-						<v-button @click="close">Close modal</v-button>
-					</template>
-				</v-modal>
-				<portal-target name="outlet" />
-			</div>
-		`,
-	});
diff --git a/app/src/components/v-modal/v-modal.test.ts b/app/src/components/v-modal/v-modal.test.ts
deleted file mode 100644
index 944a497925..0000000000
--- a/app/src/components/v-modal/v-modal.test.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import VueCompositionAPI from '@vue/composition-api';
-
-import VModal from './v-modal.vue';
-import VDialog from '@/components/v-dialog/';
-import VIcon from '@/components/v-icon/';
-
-const localVue = createLocalVue();
-localVue.use(VueCompositionAPI);
-localVue.component('v-dialog', VDialog);
-localVue.component('v-icon', VIcon);
-
-describe('Components / Modal', () => {
-	it('Renders', () => {
-		const component = shallowMount(VModal, {
-			localVue,
-			propsData: {
-				title: 'My Modal',
-			},
-		});
-
-		expect(component.isVueInstance()).toBe(true);
-	});
-});
diff --git a/app/src/components/v-upload/v-upload.vue b/app/src/components/v-upload/v-upload.vue
index 0b7a9ef4a7..0b0d3b69e8 100644
--- a/app/src/components/v-upload/v-upload.vue
+++ b/app/src/components/v-upload/v-upload.vue
@@ -52,7 +52,7 @@
 					</v-list>
 				</v-menu>
 
-				<modal-collection
+				<drawer-collection
 					collection="directus_files"
 					:active="activeDialog === 'choose'"
 					@update:active="activeDialog = null"
@@ -88,12 +88,12 @@
 <script lang="ts">
 import { defineComponent, ref, computed, watch } from '@vue/composition-api';
 import uploadFiles from '@/utils/upload-files';
-import ModalCollection from '@/views/private/components/modal-collection';
+import DrawerCollection from '@/views/private/components/drawer-collection';
 import api from '@/api';
 import useItem from '@/composables/use-item';
 
 export default defineComponent({
-	components: { ModalCollection },
+	components: { DrawerCollection },
 	props: {
 		multiple: {
 			type: Boolean,
diff --git a/app/src/interfaces/file/file.vue b/app/src/interfaces/file/file.vue
index a44af12941..f1ef5bd0f6 100644
--- a/app/src/interfaces/file/file.vue
+++ b/app/src/interfaces/file/file.vue
@@ -79,7 +79,7 @@
 			</v-card>
 		</v-dialog>
 
-		<modal-collection
+		<drawer-collection
 			collection="directus_files"
 			:active="activeDialog === 'choose'"
 			@update:active="activeDialog = null"
@@ -112,7 +112,7 @@
 
 <script lang="ts">
 import { defineComponent, ref, watch, computed } from '@vue/composition-api';
-import ModalCollection from '@/views/private/components/modal-collection';
+import DrawerCollection from '@/views/private/components/drawer-collection';
 import api from '@/api';
 import readableMimeType from '@/utils/readable-mime-type';
 import getRootPath from '@/utils/get-root-path';
@@ -124,7 +124,7 @@ type FileInfo = {
 };
 
 export default defineComponent({
-	components: { ModalCollection },
+	components: { DrawerCollection },
 	props: {
 		value: {
 			type: String,
diff --git a/app/src/interfaces/files/files.vue b/app/src/interfaces/files/files.vue
index 816816208f..78daf1b616 100644
--- a/app/src/interfaces/files/files.vue
+++ b/app/src/interfaces/files/files.vue
@@ -34,7 +34,7 @@
 			</v-button>
 		</div>
 
-		<modal-item
+		<drawer-item
 			v-if="!disabled"
 			:active="editModalActive"
 			:collection="relationInfo.junctionCollection"
@@ -46,7 +46,7 @@
 			@update:active="cancelEdit"
 		/>
 
-		<modal-collection
+		<drawer-collection
 			v-if="!disabled"
 			:active.sync="selectModalActive"
 			:collection="relationInfo.relationCollection"
@@ -71,8 +71,8 @@
 <script lang="ts">
 import { defineComponent, ref, computed, toRefs, PropType } from '@vue/composition-api';
 import { Header as TableHeader } from '@/components/v-table/types';
-import ModalCollection from '@/views/private/components/modal-collection';
-import ModalItem from '@/views/private/components/modal-item';
+import DrawerCollection from '@/views/private/components/drawer-collection';
+import DrawerItem from '@/views/private/components/drawer-item';
 import { get } from 'lodash';
 import i18n from '@/lang';
 
@@ -83,7 +83,7 @@ import usePreview from '@/interfaces/many-to-many/use-preview';
 import useEdit from '@/interfaces/many-to-many/use-edit';
 
 export default defineComponent({
-	components: { ModalCollection, ModalItem },
+	components: { DrawerCollection, DrawerItem },
 	props: {
 		primaryKey: {
 			type: [Number, String],
diff --git a/app/src/interfaces/many-to-many/many-to-many.vue b/app/src/interfaces/many-to-many/many-to-many.vue
index 76f944c5a4..b7d55d7990 100644
--- a/app/src/interfaces/many-to-many/many-to-many.vue
+++ b/app/src/interfaces/many-to-many/many-to-many.vue
@@ -38,7 +38,7 @@
 			</v-button>
 		</div>
 
-		<modal-item
+		<drawer-item
 			v-if="!disabled"
 			:active="editModalActive"
 			:collection="relationInfo.junctionCollection"
@@ -50,7 +50,7 @@
 			@update:active="cancelEdit"
 		/>
 
-		<modal-collection
+		<drawer-collection
 			v-if="!disabled"
 			:active.sync="selectModalActive"
 			:collection="relationCollection.collection"
@@ -64,8 +64,8 @@
 
 <script lang="ts">
 import { defineComponent, ref, computed, watch, PropType, toRefs } from '@vue/composition-api';
-import ModalItem from '@/views/private/components/modal-item';
-import ModalCollection from '@/views/private/components/modal-collection';
+import DrawerItem from '@/views/private/components/drawer-item';
+import DrawerCollection from '@/views/private/components/drawer-collection';
 import { get } from 'lodash';
 
 import useActions from './use-actions';
@@ -75,7 +75,7 @@ import useEdit from './use-edit';
 import useSelection from './use-selection';
 
 export default defineComponent({
-	components: { ModalItem, ModalCollection },
+	components: { DrawerItem, DrawerCollection },
 	props: {
 		value: {
 			type: Array as PropType<(number | string | Record<string, any>)[] | null>,
diff --git a/app/src/interfaces/many-to-one/many-to-one.vue b/app/src/interfaces/many-to-one/many-to-one.vue
index 7691ea4c1a..b1ebb701be 100644
--- a/app/src/interfaces/many-to-one/many-to-one.vue
+++ b/app/src/interfaces/many-to-one/many-to-one.vue
@@ -82,7 +82,7 @@
 			</v-list>
 		</v-menu>
 
-		<modal-item
+		<drawer-item
 			v-if="!disabled"
 			:active.sync="editModalActive"
 			:collection="relatedCollection.collection"
@@ -91,7 +91,7 @@
 			@input="stageEdits"
 		/>
 
-		<modal-collection
+		<drawer-collection
 			v-if="!disabled"
 			:active.sync="selectModalActive"
 			:collection="relatedCollection.collection"
@@ -107,8 +107,8 @@ import { useCollectionsStore, useRelationsStore } from '@/stores/';
 import useCollection from '@/composables/use-collection';
 import getFieldsFromTemplate from '@/utils/get-fields-from-template';
 import api from '@/api';
-import ModalItem from '@/views/private/components/modal-item';
-import ModalCollection from '@/views/private/components/modal-collection';
+import DrawerItem from '@/views/private/components/drawer-item';
+import DrawerCollection from '@/views/private/components/drawer-collection';
 
 /**
  * @NOTE
@@ -119,7 +119,7 @@ import ModalCollection from '@/views/private/components/modal-collection';
  */
 
 export default defineComponent({
-	components: { ModalItem, ModalCollection },
+	components: { DrawerItem, DrawerCollection },
 	props: {
 		value: {
 			type: [Number, String, Object],
diff --git a/app/src/interfaces/one-to-many/one-to-many.vue b/app/src/interfaces/one-to-many/one-to-many.vue
index cf10f5c55f..73f2a4e05c 100644
--- a/app/src/interfaces/one-to-many/one-to-many.vue
+++ b/app/src/interfaces/one-to-many/one-to-many.vue
@@ -38,7 +38,7 @@
 			</v-button>
 		</div>
 
-		<modal-item
+		<drawer-item
 			v-if="!disabled"
 			:active="currentlyEditing !== null"
 			:collection="relatedCollection.collection"
@@ -48,7 +48,7 @@
 			@update:active="cancelEdit"
 		/>
 
-		<modal-collection
+		<drawer-collection
 			v-if="!disabled"
 			:active.sync="selectModalActive"
 			:collection="relatedCollection.collection"
@@ -65,14 +65,14 @@ import { defineComponent, ref, computed, watch, PropType } from '@vue/compositio
 import api from '@/api';
 import useCollection from '@/composables/use-collection';
 import { useCollectionsStore, useRelationsStore, useFieldsStore } from '@/stores/';
-import ModalItem from '@/views/private/components/modal-item';
-import ModalCollection from '@/views/private/components/modal-collection';
+import DrawerItem from '@/views/private/components/drawer-item';
+import DrawerCollection from '@/views/private/components/drawer-collection';
 import { Filter, Field } from '@/types';
 import { Header } from '@/components/v-table/types';
 import { isEqual } from 'lodash';
 
 export default defineComponent({
-	components: { ModalItem, ModalCollection },
+	components: { DrawerItem, DrawerCollection },
 	props: {
 		value: {
 			type: Array as PropType<(number | string | Record<string, any>)[] | null>,
diff --git a/app/src/interfaces/user/user.vue b/app/src/interfaces/user/user.vue
index d27b434db9..a8da9f1a2d 100644
--- a/app/src/interfaces/user/user.vue
+++ b/app/src/interfaces/user/user.vue
@@ -72,7 +72,7 @@
 			</v-list>
 		</v-menu>
 
-		<modal-item
+		<drawer-item
 			:active.sync="editModalActive"
 			collection="directus_users"
 			:primary-key="currentPrimaryKey"
@@ -81,7 +81,7 @@
 			v-if="!disabled"
 		/>
 
-		<modal-collection
+		<drawer-collection
 			:active.sync="selectModalActive"
 			collection="directus_users"
 			:selection="selection"
@@ -95,11 +95,11 @@
 import { defineComponent, computed, ref, watch, PropType } from '@vue/composition-api';
 import useCollection from '@/composables/use-collection';
 import api from '@/api';
-import ModalItem from '@/views/private/components/modal-item';
-import ModalCollection from '@/views/private/components/modal-collection';
+import DrawerItem from '@/views/private/components/drawer-item';
+import DrawerCollection from '@/views/private/components/drawer-collection';
 
 export default defineComponent({
-	components: { ModalItem, ModalCollection },
+	components: { DrawerItem, DrawerCollection },
 	props: {
 		value: {
 			type: String,
diff --git a/app/src/layouts/cards/cards.vue b/app/src/layouts/cards/cards.vue
index 07f6e46ed4..6075f8b781 100644
--- a/app/src/layouts/cards/cards.vue
+++ b/app/src/layouts/cards/cards.vue
@@ -46,8 +46,8 @@
 			</v-detail>
 		</portal>
 
-		<portal to="drawer">
-			<filter-drawer-detail v-model="_filters" :collection="collection" :loading="loading" />
+		<portal to="sidebar">
+			<filter-sidebar-detail v-model="_filters" :collection="collection" :loading="loading" />
 		</portal>
 
 		<portal to="actions:prepend">
diff --git a/app/src/layouts/tabular/tabular.vue b/app/src/layouts/tabular/tabular.vue
index ea4f236ef1..5b44c8e8ea 100644
--- a/app/src/layouts/tabular/tabular.vue
+++ b/app/src/layouts/tabular/tabular.vue
@@ -49,8 +49,8 @@
 			</div>
 		</portal>
 
-		<portal to="drawer">
-			<filter-drawer-detail v-model="_filters" :collection="collection" :loading="loading" />
+		<portal to="sidebar">
+			<filter-sidebar-detail v-model="_filters" :collection="collection" :loading="loading" />
 		</portal>
 
 		<portal to="actions:prepend">
diff --git a/app/src/modules/activity/routes/collection.vue b/app/src/modules/activity/routes/collection.vue
index 88db83f952..295a2b47fd 100644
--- a/app/src/modules/activity/routes/collection.vue
+++ b/app/src/modules/activity/routes/collection.vue
@@ -31,12 +31,12 @@
 
 		<router-view name="detail" :primary-key="primaryKey" />
 
-		<template #drawer>
-			<drawer-detail icon="info_outline" :title="$t('information')" close>
+		<template #sidebar>
+			<sidebar-detail icon="info_outline" :title="$t('information')" close>
 				<div class="page-description" v-html="marked($t('page_help_activity_collection'))" />
-			</drawer-detail>
-			<layout-drawer-detail @input="layout = $event" :value="layout" />
-			<portal-target name="drawer" />
+			</sidebar-detail>
+			<layout-sidebar-detail @input="layout = $event" :value="layout" />
+			<portal-target name="sidebar" />
 		</template>
 	</private-view>
 </template>
@@ -47,8 +47,8 @@ import ActivityNavigation from '../components/navigation.vue';
 import { i18n } from '@/lang';
 import usePreset from '@/composables/use-preset';
 import marked from 'marked';
-import FilterDrawerDetail from '@/views/private/components/filter-drawer-detail';
-import LayoutDrawerDetail from '@/views/private/components/layout-drawer-detail';
+import FilterSidebarDetail from '@/views/private/components/filter-sidebar-detail';
+import LayoutSidebarDetail from '@/views/private/components/layout-sidebar-detail';
 import SearchInput from '@/views/private/components/search-input';
 import { nanoid } from 'nanoid';
 
@@ -58,7 +58,7 @@ type Item = {
 
 export default defineComponent({
 	name: 'activity-collection',
-	components: { ActivityNavigation, FilterDrawerDetail, LayoutDrawerDetail, SearchInput },
+	components: { ActivityNavigation, FilterSidebarDetail, LayoutSidebarDetail, SearchInput },
 	props: {
 		primaryKey: {
 			type: String,
diff --git a/app/src/modules/activity/routes/item.vue b/app/src/modules/activity/routes/item.vue
index 7be7b344a8..dbe60c6285 100644
--- a/app/src/modules/activity/routes/item.vue
+++ b/app/src/modules/activity/routes/item.vue
@@ -1,14 +1,14 @@
 <template>
-	<v-modal active title="Activity Item" @toggle="close" @esc="close">
+	<v-drawer active title="Activity Item" @toggle="close" @cancel="close">
 		<v-progress-circular indeterminate v-if="loading" />
 
-		<template v-else-if="error">
+		<div class="content" v-else-if="error">
 			<v-notice type="danger">
 				{{ error }}
 			</v-notice>
-		</template>
+		</div>
 
-		<template v-else>
+		<div class="content" v-else>
 			<!-- @TODO add final design -->
 			<p class="type-label">User:</p>
 			<user-popover v-if="item.user" :user="item.user.id">
@@ -32,17 +32,18 @@
 
 			<p class="type-label">Item:</p>
 			<p>{{ item.item }}</p>
-		</template>
+		</div>
 
-		<template #footer>
-			<v-button v-if="openItemLink" :to="openItemLink">
-				<v-icon name="launch" left />
-				{{ $t('open') }}
+		<template #actions>
+			<v-button v-if="openItemLink" :to="openItemLink" icon rounded v-tooltip.bottom="$t('open')">
+				<v-icon name="launch" />
 			</v-button>
 
-			<v-button to="/activity">{{ $t('done') }}</v-button>
+			<v-button to="/activity" icon rounded v-tooltip.bottom="$t('done')">
+				<v-icon name="check" />
+			</v-button>
 		</template>
-	</v-modal>
+	</v-drawer>
 </template>
 
 <script lang="ts">
@@ -137,4 +138,10 @@ export default defineComponent({
 .type-label:not(:first-child) {
 	margin-top: 24px;
 }
+
+.content {
+	padding: var(--content-padding);
+	padding-top: 0;
+	padding-bottom: var(--content-padding);
+}
 </style>
diff --git a/app/src/modules/collections/routes/collection.vue b/app/src/modules/collections/routes/collection.vue
index c6eea2e940..1755c46524 100644
--- a/app/src/modules/collections/routes/collection.vue
+++ b/app/src/modules/collections/routes/collection.vue
@@ -203,8 +203,8 @@
 			</template>
 		</component>
 
-		<template #drawer>
-			<drawer-detail icon="info_outline" :title="$t('information')" close>
+		<template #sidebar>
+			<sidebar-detail icon="info_outline" :title="$t('information')" close>
 				<div
 					class="page-description"
 					v-html="
@@ -215,10 +215,10 @@
 						)
 					"
 				/>
-			</drawer-detail>
-			<layout-drawer-detail @input="layout = $event" :value="layout" />
-			<portal-target name="drawer" />
-			<export-drawer-detail
+			</sidebar-detail>
+			<layout-sidebar-detail @input="layout = $event" :value="layout" />
+			<portal-target name="sidebar" />
+			<export-sidebar-detail
 				:layout-query="layoutQuery"
 				:search-query="searchQuery"
 				:collection="currentCollection"
@@ -247,8 +247,8 @@ import { LayoutComponent } from '@/layouts/types';
 import CollectionsNotFound from './not-found.vue';
 import useCollection from '@/composables/use-collection';
 import usePreset from '@/composables/use-preset';
-import LayoutDrawerDetail from '@/views/private/components/layout-drawer-detail';
-import ExportDrawerDetail from '@/views/private/components/export-drawer-detail';
+import LayoutSidebarDetail from '@/views/private/components/layout-sidebar-detail';
+import ExportSidebarDetail from '@/views/private/components/export-sidebar-detail';
 import SearchInput from '@/views/private/components/search-input';
 import BookmarkAdd from '@/views/private/components/bookmark-add';
 import BookmarkEdit from '@/views/private/components/bookmark-edit';
@@ -265,8 +265,8 @@ export default defineComponent({
 	components: {
 		CollectionsNavigation,
 		CollectionsNotFound,
-		LayoutDrawerDetail,
-		ExportDrawerDetail,
+		LayoutSidebarDetail,
+		ExportSidebarDetail,
 		SearchInput,
 		BookmarkAdd,
 		BookmarkEdit,
@@ -591,14 +591,14 @@ export default defineComponent({
 	--v-button-background-color-hover: var(--background-normal-alt);
 }
 
-.layout {
-	--layout-offset-top: 64px;
-}
-
 .header-icon {
 	--v-button-color-disabled: var(--foreground-normal);
 }
 
+.layout {
+	--layout-offset-top: 64px;
+}
+
 .bookmark-controls {
 	.add,
 	.save,
diff --git a/app/src/modules/collections/routes/item.vue b/app/src/modules/collections/routes/item.vue
index 567877a50e..916317e30b 100644
--- a/app/src/modules/collections/routes/item.vue
+++ b/app/src/modules/collections/routes/item.vue
@@ -176,10 +176,10 @@
 			</v-card>
 		</v-dialog>
 
-		<template #drawer>
-			<drawer-detail icon="info_outline" :title="$t('information')" close>
+		<template #sidebar>
+			<sidebar-detail icon="info_outline" :title="$t('information')" close>
 				<div class="page-description" v-html="marked($t('page_help_collections_item'))" />
-			</drawer-detail>
+			</sidebar-detail>
 			<revisions-drawer-detail
 				v-if="
 					collectionInfo.meta &&
@@ -192,7 +192,7 @@
 				ref="revisionsDrawerDetail"
 				@revert="refresh"
 			/>
-			<comments-drawer-detail
+			<comments-sidebar-detail
 				v-if="
 					collectionInfo.meta &&
 					collectionInfo.meta.singleton === false &&
@@ -215,7 +215,7 @@ import router from '@/router';
 import CollectionsNotFound from './not-found.vue';
 import useCollection from '@/composables/use-collection';
 import RevisionsDrawerDetail from '@/views/private/components/revisions-drawer-detail';
-import CommentsDrawerDetail from '@/views/private/components/comments-drawer-detail';
+import CommentsSidebarDetail from '@/views/private/components/comments-sidebar-detail';
 import useItem from '@/composables/use-item';
 import SaveOptions from '@/views/private/components/save-options';
 import i18n from '@/lang';
@@ -236,7 +236,7 @@ export default defineComponent({
 		CollectionsNavigation,
 		CollectionsNotFound,
 		RevisionsDrawerDetail,
-		CommentsDrawerDetail,
+		CommentsSidebarDetail,
 		SaveOptions,
 	},
 	props: {
diff --git a/app/src/modules/collections/routes/overview.vue b/app/src/modules/collections/routes/overview.vue
index 9949152b92..eb3d0d28de 100644
--- a/app/src/modules/collections/routes/overview.vue
+++ b/app/src/modules/collections/routes/overview.vue
@@ -28,10 +28,10 @@
 			</template>
 		</v-info>
 
-		<template #drawer>
-			<drawer-detail icon="info_outline" :title="$t('information')" close>
+		<template #sidebar>
+			<sidebar-detail icon="info_outline" :title="$t('information')" close>
 				<div class="page-description" v-html="marked($t('page_help_collections_overview'))" />
-			</drawer-detail>
+			</sidebar-detail>
 		</template>
 	</private-view>
 </template>
diff --git a/app/src/modules/docs/routes/static.vue b/app/src/modules/docs/routes/static.vue
index 7a8f4445de..bb95f4741d 100644
--- a/app/src/modules/docs/routes/static.vue
+++ b/app/src/modules/docs/routes/static.vue
@@ -16,10 +16,10 @@
 			<markdown>{{ markdownWithoutTitle }}</markdown>
 		</div>
 
-		<template #drawer>
-			<drawer-detail icon="info_outline" :title="$t('information')" close>
+		<template #sidebar>
+			<sidebar-detail icon="info_outline" :title="$t('information')" close>
 				<div class="page-description" v-html="marked($t('page_help_docs_global'))" />
-			</drawer-detail>
+			</sidebar-detail>
 		</template>
 	</private-view>
 </template>
diff --git a/app/src/modules/files/components/file-info-drawer-detail.vue b/app/src/modules/files/components/file-info-sidebar-detail.vue
similarity index 94%
rename from app/src/modules/files/components/file-info-drawer-detail.vue
rename to app/src/modules/files/components/file-info-sidebar-detail.vue
index 347c6255d8..18081a21b1 100644
--- a/app/src/modules/files/components/file-info-drawer-detail.vue
+++ b/app/src/modules/files/components/file-info-sidebar-detail.vue
@@ -1,5 +1,5 @@
 <template>
-	<drawer-detail icon="info_outline" :title="$t('file_details')" close>
+	<sidebar-detail icon="info_outline" :title="$t('file_details')" close>
 		<dl v-if="file">
 			<div v-if="file.type">
 				<dt>{{ $t('type') }}</dt>
@@ -41,11 +41,11 @@
 				<dd>{{ file.checksum }}</dd>
 			</div>
 
-			<div v-if="user_created">
+			<div v-if="userCreated">
 				<dt>{{ $t('owner') }}</dt>
 				<dd>
-					<user-popover :user="user_created.id">
-						<router-link :to="user_created.link">{{ user_created.name }}</router-link>
+					<user-popover :user="userCreated.id">
+						<router-link :to="userCreated.link">{{ userCreated.name }}</router-link>
 					</user-popover>
 				</dd>
 			</div>
@@ -55,11 +55,11 @@
 				<dd>{{ modificationDate }}</dd>
 			</div>
 
-			<div v-if="user_modified">
+			<div v-if="userModified">
 				<dt>{{ $t('edited_by') }}</dt>
 				<dd>
-					<user-popover :user="user_modified.id">
-						<router-link :to="user_modified.link">{{ user_modified.name }}</router-link>
+					<user-popover :user="userModified.id">
+						<router-link :to="userModified.link">{{ userModified.name }}</router-link>
 					</user-popover>
 				</dd>
 			</div>
@@ -104,7 +104,7 @@
 		<v-divider />
 
 		<div class="page-description" v-html="marked($t('page_help_files_item'))" />
-	</drawer-detail>
+	</sidebar-detail>
 </template>
 
 <script lang="ts">
diff --git a/app/src/modules/files/routes/collection.vue b/app/src/modules/files/routes/collection.vue
index d2d471c748..98fe817c3e 100644
--- a/app/src/modules/files/routes/collection.vue
+++ b/app/src/modules/files/routes/collection.vue
@@ -126,12 +126,12 @@
 
 		<router-view name="addNew" :preset="queryFilters" @upload="refresh" />
 
-		<template #drawer>
-			<drawer-detail icon="info_outline" :title="$t('information')" close>
+		<template #sidebar>
+			<sidebar-detail icon="info_outline" :title="$t('information')" close>
 				<div class="page-description" v-html="marked($t('page_help_files_collection'))" />
-			</drawer-detail>
-			<layout-drawer-detail @input="layout = $event" :value="layout" />
-			<portal-target name="drawer" />
+			</sidebar-detail>
+			<layout-sidebar-detail @input="layout = $event" :value="layout" />
+			<portal-target name="sidebar" />
 		</template>
 
 		<template v-if="showDropEffect">
@@ -150,8 +150,8 @@ import { i18n } from '@/lang';
 import api from '@/api';
 import { LayoutComponent } from '@/layouts/types';
 import usePreset from '@/composables/use-preset';
-import FilterDrawerDetail from '@/views/private/components/filter-drawer-detail';
-import LayoutDrawerDetail from '@/views/private/components/layout-drawer-detail';
+import FilterSidebarDetail from '@/views/private/components/filter-sidebar-detail';
+import LayoutSidebarDetail from '@/views/private/components/layout-sidebar-detail';
 import AddFolder from '../components/add-folder.vue';
 import SearchInput from '@/views/private/components/search-input';
 import marked from 'marked';
@@ -171,7 +171,7 @@ type Item = {
 
 export default defineComponent({
 	name: 'files-collection',
-	components: { FilesNavigation, FilterDrawerDetail, LayoutDrawerDetail, AddFolder, SearchInput, FolderPicker },
+	components: { FilesNavigation, FilterSidebarDetail, LayoutSidebarDetail, AddFolder, SearchInput, FolderPicker },
 	props: {
 		queryFilters: {
 			type: Object as PropType<Record<string, string>>,
diff --git a/app/src/modules/files/routes/item.vue b/app/src/modules/files/routes/item.vue
index 948867d66a..61288d4a08 100644
--- a/app/src/modules/files/routes/item.vue
+++ b/app/src/modules/files/routes/item.vue
@@ -155,15 +155,15 @@
 			</v-card>
 		</v-dialog>
 
-		<template #drawer>
-			<file-info-drawer-detail :file="item" @move-folder="moveToDialogActive = true" />
+		<template #sidebar>
+			<file-info-sidebar-detail :file="item" @move-folder="moveToDialogActive = true" />
 			<revisions-drawer-detail
 				v-if="isBatch === false && isNew === false"
 				collection="directus_files"
 				:primary-key="primaryKey"
 				ref="revisionsDrawerDetail"
 			/>
-			<comments-drawer-detail
+			<comments-sidebar-detail
 				v-if="isBatch === false && isNew === false"
 				collection="directus_files"
 				:primary-key="primaryKey"
@@ -178,7 +178,7 @@ import FilesNavigation from '../components/navigation.vue';
 import { i18n } from '@/lang';
 import router from '@/router';
 import RevisionsDrawerDetail from '@/views/private/components/revisions-drawer-detail';
-import CommentsDrawerDetail from '@/views/private/components/comments-drawer-detail';
+import CommentsSidebarDetail from '@/views/private/components/comments-sidebar-detail';
 import useItem from '@/composables/use-item';
 import SaveOptions from '@/views/private/components/save-options';
 import FilePreview from '@/views/private/components/file-preview';
@@ -187,7 +187,7 @@ import { nanoid } from 'nanoid';
 import FileLightbox from '@/views/private/components/file-lightbox';
 import { useFieldsStore } from '@/stores/';
 import { Field } from '@/types';
-import FileInfoDrawerDetail from '../components/file-info-drawer-detail.vue';
+import FileInfoSidebarDetail from '../components/file-info-sidebar-detail.vue';
 import useFormFields from '@/composables/use-form-fields';
 import FolderPicker from '../components/folder-picker.vue';
 import api from '@/api';
@@ -216,12 +216,12 @@ export default defineComponent({
 	components: {
 		FilesNavigation,
 		RevisionsDrawerDetail,
-		CommentsDrawerDetail,
+		CommentsSidebarDetail,
 		SaveOptions,
 		FilePreview,
 		ImageEditor,
 		FileLightbox,
-		FileInfoDrawerDetail,
+		FileInfoSidebarDetail,
 		FolderPicker,
 		FilesNotFound,
 	},
diff --git a/app/src/modules/settings/routes/data-model/collections/collections.vue b/app/src/modules/settings/routes/data-model/collections/collections.vue
index 01deac0f75..eb49a6ab36 100644
--- a/app/src/modules/settings/routes/data-model/collections/collections.vue
+++ b/app/src/modules/settings/routes/data-model/collections/collections.vue
@@ -40,7 +40,7 @@
 					<v-icon
 						class="icon"
 						:class="{
-							hidden: item.meta && item.meta.hidden || false,
+							hidden: (item.meta && item.meta.hidden) || false,
 							system: item.collection.startsWith('directus_'),
 							unmanaged: item.meta === null && item.collection.startsWith('directus_') === false,
 						}"
@@ -52,7 +52,7 @@
 					<span
 						class="collection"
 						:class="{
-							hidden: item.meta && item.meta.hidden || false,
+							hidden: (item.meta && item.meta.hidden) || false,
 							system: item.collection.startsWith('directus_'),
 							unmanaged: item.meta === null && item.collection.startsWith('directus_') === false,
 						}"
@@ -86,10 +86,10 @@
 
 		<router-view name="add" />
 
-		<template #drawer>
-			<drawer-detail icon="info_outline" :title="$t('information')" close>
+		<template #sidebar>
+			<sidebar-detail icon="info_outline" :title="$t('information')" close>
 				<div class="page-description" v-html="marked($t('page_help_settings_datamodel_collections'))" />
-			</drawer-detail>
+			</sidebar-detail>
 			<collections-filter v-model="activeTypes" />
 		</template>
 	</private-view>
diff --git a/app/src/modules/settings/routes/data-model/collections/components/collections-filter.vue b/app/src/modules/settings/routes/data-model/collections/components/collections-filter.vue
index 14984957f8..a702ea7687 100644
--- a/app/src/modules/settings/routes/data-model/collections/components/collections-filter.vue
+++ b/app/src/modules/settings/routes/data-model/collections/components/collections-filter.vue
@@ -1,11 +1,11 @@
 <template>
-	<drawer-detail class="collections-filter" icon="filter_list" :title="$tc('collection', 2)">
+	<sidebar-detail class="collections-filter" icon="filter_list" :title="$tc('collection', 2)">
 		<div class="type-label label">{{ $t('collections_shown') }}</div>
 		<v-checkbox value="visible" v-model="_value" :label="$t('visible_collections')" />
 		<v-checkbox value="unmanaged" v-model="_value" :label="$t('unmanaged_collections')" />
 		<v-checkbox value="hidden" v-model="_value" :label="$t('hidden_collections')" />
 		<v-checkbox value="system" v-model="_value" :label="$t('system_collections')" />
-	</drawer-detail>
+	</sidebar-detail>
 </template>
 
 <script lang="ts">
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/actions.vue b/app/src/modules/settings/routes/data-model/field-detail/components/actions.vue
index 70638f2dff..d532e745ac 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/actions.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/actions.vue
@@ -1,14 +1,18 @@
 <template>
 	<div class="actions">
-		<v-button secondary @click="$emit('cancel')">
-			{{ $t('cancel') }}
+		<v-button
+			v-if="!isExisting && currentTabIndex < tabs.length - 1"
+			@click="nextTab"
+			:disabled="nextDisabled"
+			icon
+			rounded
+			v-tooltip.bottom="$t('next')"
+		>
+			<v-icon name="arrow_forward" />
 		</v-button>
-		<div class="spacer" />
-		<v-button v-if="!isExisting && currentTabIndex < tabs.length - 1" @click="nextTab" :disabled="nextDisabled">
-			{{ $t('next') }}
-		</v-button>
-		<v-button v-else @click="$emit('save')" :loading="saving">
-			{{ $t('save') }}
+
+		<v-button v-else @click="$emit('save')" :loading="saving" icon rounded v-tooltip.bottom="$t('save')">
+			<v-icon name="check" />
 		</v-button>
 	</div>
 </template>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/display.vue b/app/src/modules/settings/routes/data-model/field-detail/components/display.vue
index c593e38846..3451e1e38f 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/display.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/display.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<h2 class="type-title">{{ $t('display_setup_title') }}</h2>
+		<v-notice type="info">{{ $t('display_setup_title') }}</v-notice>
 
 		<v-fancy-select class="select" :items="selectItems" v-model="fieldData.meta.display" />
 
@@ -130,4 +130,8 @@ export default defineComponent({
 		text-decoration: underline;
 	}
 }
+
+.v-notice {
+	margin-bottom: 36px;
+}
 </style>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/field.vue b/app/src/modules/settings/routes/data-model/field-detail/components/field.vue
index d8a7dff43c..a6f81fa891 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/field.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/field.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<h2 class="type-title">{{ $t('schema_field_title') }}</h2>
+		<v-notice type="info">{{ $t('schema_field_title') }}</v-notice>
 
 		<div class="form">
 			<div class="field half-left" v-if="fieldData.meta">
@@ -103,4 +103,8 @@ export default defineComponent({
 .required {
 	--v-icon-color: var(--primary);
 }
+
+.v-notice {
+	margin-bottom: 36px;
+}
 </style>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/interface.vue b/app/src/modules/settings/routes/data-model/field-detail/components/interface.vue
index 6382a4d26e..7f3b4206a1 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/interface.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/interface.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<h2 class="type-title">{{ $t('interface_setup_title') }}</h2>
+		<v-notice type="info">{{ $t('interface_setup_title') }}</v-notice>
 
 		<v-fancy-select class="select" :items="selectItems" v-model="fieldData.meta.interface" />
 
@@ -139,4 +139,8 @@ export default defineComponent({
 		text-decoration: underline;
 	}
 }
+
+.v-notice {
+	margin-bottom: 36px;
+}
 </style>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/languages.vue b/app/src/modules/settings/routes/data-model/field-detail/components/languages.vue
deleted file mode 100644
index 8ce52a6edd..0000000000
--- a/app/src/modules/settings/routes/data-model/field-detail/components/languages.vue
+++ /dev/null
@@ -1,145 +0,0 @@
-<template>
-	<div>
-		<h2 class="type-title">{{ $t('configure_languages') }}</h2>
-		<div class="grid">
-			<div class="field">
-				<div class="type-label">{{ $t('translations_collection') }}</div>
-				<v-input disabled :value="relations[1].many_collection" />
-			</div>
-			<div class="field">
-				<div class="type-label">{{ $t('languages_collection') }}</div>
-				<v-input :class="{ matches: languagesCollectionExists }" db-safe key="languages-collection" v-model="relations[1].one_collection" :disabled="isExisting" :placeholder="$t('collection') + '...'">
-					<template #append>
-						<v-menu show-arrow placement="bottom-end">
-							<template #activator="{ toggle }">
-								<v-icon name="list_alt" @click="toggle" v-tooltip="$t('select_existing')" :disabled="isExisting" />
-							</template>
-
-							<v-list class="monospace">
-								<v-list-item
-									v-for="item in items"
-									:key="item.value"
-									:active="relations[1].one_collection === item.value"
-									:disabled="item.disabled"
-									@click="relations[1].one_collection = item.value"
-								>
-									<v-list-item-content>
-										{{ item.text }}
-									</v-list-item-content>
-								</v-list-item>
-							</v-list>
-						</v-menu>
-					</template>
-				</v-input>
-			</div>
-			<v-input :value="relations[1].many_field" :placeholder="$t('foreign_key') + '...'"/>
-			<v-input db-safe :disabled="languagesCollectionExists" v-model="relations[1].one_primary" :placeholder="$t('primary_key') + '...'" />
-			<v-icon class="arrow" name="arrow_back" />
-		</div>
-	</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, computed, watch } from '@vue/composition-api';
-import { Relation } from '@/types';
-import { Field } from '@/types';
-import { orderBy } from 'lodash';
-import useSync from '@/composables/use-sync';
-import { useCollectionsStore, useFieldsStore } from '@/stores';
-import i18n from '@/lang';
-
-import { state } from '../store';
-
-export default defineComponent({
-	props: {
-		type: {
-			type: String,
-			required: true,
-		},
-		collection: {
-			type: String,
-			required: true,
-		},
-		isExisting: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	setup(props, { emit }) {
-		const collectionsStore = useCollectionsStore();
-		const fieldsStore = useFieldsStore();
-
-		const { items } = useRelation();
-
-		const languagesCollectionExists = computed(() => {
-			return !!collectionsStore.getCollection(state.relations[1].one_collection);
-		});
-
-		return {
-			relations: state.relations,
-			items,
-			fieldData: state.fieldData,
-			languagesCollectionExists,
-		};
-
-		function useRelation() {
-			const availableCollections = computed(() => {
-				return orderBy(
-					collectionsStore.state.collections.filter((collection) => {
-						return collection.collection.startsWith('directus_') === false;
-					}),
-					['collection'],
-					['asc']
-				);
-			});
-
-			const items = computed(() =>
-				availableCollections.value.map((collection) => ({
-					text: collection.collection,
-					value: collection.collection,
-				}))
-			);
-
-			return { items };
-		}
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.grid {
-	--v-select-font-family: var(--family-monospace);
-	--v-input-font-family: var(--family-monospace);
-
-	position: relative;
-	display: grid;
-	grid-template-columns: repeat(2, minmax(0, 1fr));
-	gap: 12px 32px;
-	margin-top: 48px;
-
-	.v-input.matches {
-		--v-input-color: var(--primary);
-	}
-
-	.arrow {
-		--v-icon-color: var(--primary);
-
-		position: absolute;
-		bottom: 14px;
-		left: 50%;
-		transform: translateX(-50%);
-	}
-}
-
-.v-list {
-	--v-list-item-content-font-family: var(--family-monospace);
-}
-
-.v-divider {
-	margin: 48px 0;
-}
-
-.type-label {
-	margin-bottom: 8px;
-}
-</style>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue
index 34b7c18f5a..fd734b9fd2 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue
@@ -1,6 +1,7 @@
 <template>
 	<div>
-		<h2 class="type-title">{{ $t('configure_m2m') }}</h2>
+		<v-notice type="info">{{ $t('configure_m2m') }}</v-notice>
+
 		<div class="grid">
 			<div class="field">
 				<div class="type-label">{{ $t('this_collection') }}</div>
@@ -452,4 +453,8 @@ export default defineComponent({
 		transform: translateX(-50%);
 	}
 }
+
+.v-notice {
+	margin-bottom: 36px;
+}
 </style>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2o.vue b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2o.vue
index 53811a0266..ec286e0878 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2o.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2o.vue
@@ -1,6 +1,7 @@
 <template>
 	<div>
-		<h2 class="type-title">{{ $t('configure_m2o') }}</h2>
+		<v-notice type="info">{{ $t('configure_m2o') }}</v-notice>
+
 		<div class="grid">
 			<div class="field">
 				<div class="type-label">{{ $t('this_collection') }}</div>
@@ -255,4 +256,8 @@ export default defineComponent({
 .type-label {
 	margin-bottom: 8px;
 }
+
+.v-notice {
+	margin-bottom: 36px;
+}
 </style>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-o2m.vue b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-o2m.vue
index 336545a623..7f28918315 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-o2m.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-o2m.vue
@@ -1,6 +1,7 @@
 <template>
 	<div>
-		<h2 class="type-title">{{ $t('configure_o2m') }}</h2>
+		<v-notice type="info">{{ $t('configure_o2m') }}</v-notice>
+
 		<div class="grid">
 			<div class="field">
 				<div class="type-label">{{ $t('this_collection') }}</div>
@@ -380,4 +381,8 @@ export default defineComponent({
 		transform: translateX(-50%);
 	}
 }
+
+.v-notice {
+	margin-bottom: 36px;
+}
 </style>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/schema.vue b/app/src/modules/settings/routes/data-model/field-detail/components/schema.vue
index e154ef6bb7..d7d105de09 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/schema.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/schema.vue
@@ -1,6 +1,8 @@
 <template>
 	<div>
-		<h2 class="type-title">{{ $t('schema_setup_title') }}</h2>
+		<v-notice type="info">
+			{{ $t('schema_setup_title') }}
+		</v-notice>
 
 		<div class="form">
 			<div class="field">
@@ -392,10 +394,6 @@ export default defineComponent({
 @import '@/styles/mixins/breakpoint';
 @import '@/styles/mixins/form-grid';
 
-.type-title {
-	margin-bottom: 32px;
-}
-
 .form {
 	--v-form-vertical-gap: 32px;
 	--v-form-horizontal-gap: 32px;
@@ -416,4 +414,8 @@ export default defineComponent({
 	grid-gap: 12px;
 	grid-template-columns: 1fr 1fr;
 }
+
+.v-notice {
+	margin-bottom: 36px;
+}
 </style>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/translations.vue b/app/src/modules/settings/routes/data-model/field-detail/components/translations.vue
index 84255e1cd5..4b5535c4f7 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/translations.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/translations.vue
@@ -1,6 +1,7 @@
 <template>
 	<div>
-		<h2 class="type-title">{{ $t('configure_m2m') }}</h2>
+		<v-notice type="info">{{ $t('configure_m2m') }}</v-notice>
+
 		<div class="grid">
 			<div class="field">
 				<div class="type-label">{{ $t('this_collection') }}</div>
@@ -349,4 +350,8 @@ export default defineComponent({
 .v-list {
 	--v-list-item-content-font-family: var(--family-monospace);
 }
+
+.v-notice {
+	margin-bottom: 36px;
+}
 </style>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue b/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
index d3c58b5cfe..d4096792d8 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
@@ -28,11 +28,11 @@
 		</v-card>
 	</v-dialog>
 
-	<v-modal
+	<v-drawer
 		v-else
 		:active="true"
 		@toggle="cancelField"
-		@esc="cancelField"
+		@cancel="cancelField"
 		:title="
 			field === '+'
 				? $t('creating_new_field', { collection: collectionInfo.name })
@@ -45,49 +45,51 @@
 			<setup-tabs :current.sync="currentTab" :tabs="tabs" :type="localType" />
 		</template>
 
-		<setup-schema
-			v-if="currentTab[0] === 'schema'"
-			:is-existing="field !== '+'"
-			:collection="collection"
-			:type="localType"
-		/>
+		<div class="content">
+			<setup-schema
+				v-if="currentTab[0] === 'schema'"
+				:is-existing="field !== '+'"
+				:collection="collection"
+				:type="localType"
+			/>
 
-		<setup-field
-			v-if="currentTab[0] === 'field'"
-			:is-existing="field !== '+'"
-			:collection="collection"
-			:type="localType"
-		/>
+			<setup-field
+				v-if="currentTab[0] === 'field'"
+				:is-existing="field !== '+'"
+				:collection="collection"
+				:type="localType"
+			/>
 
-		<setup-relationship
-			v-if="currentTab[0] === 'relationship'"
-			:is-existing="field !== '+'"
-			:collection="collection"
-			:type="localType"
-		/>
+			<setup-relationship
+				v-if="currentTab[0] === 'relationship'"
+				:is-existing="field !== '+'"
+				:collection="collection"
+				:type="localType"
+			/>
 
-		<setup-translations
-			v-if="currentTab[0] === 'translations'"
-			:is-existing="field !== '+'"
-			:collection="collection"
-			:type="localType"
-		/>
+			<setup-translations
+				v-if="currentTab[0] === 'translations'"
+				:is-existing="field !== '+'"
+				:collection="collection"
+				:type="localType"
+			/>
 
-		<setup-interface
-			v-if="currentTab[0] === 'interface'"
-			:is-existing="field !== '+'"
-			:collection="collection"
-			:type="localType"
-		/>
+			<setup-interface
+				v-if="currentTab[0] === 'interface'"
+				:is-existing="field !== '+'"
+				:collection="collection"
+				:type="localType"
+			/>
 
-		<setup-display
-			v-if="currentTab[0] === 'display'"
-			:is-existing="field !== '+'"
-			:collection="collection"
-			:type="localType"
-		/>
+			<setup-display
+				v-if="currentTab[0] === 'display'"
+				:is-existing="field !== '+'"
+				:collection="collection"
+				:type="localType"
+			/>
+		</div>
 
-		<template #footer>
+		<template #actions>
 			<setup-actions
 				:saving="saving"
 				:collection="collection"
@@ -98,7 +100,7 @@
 				@cancel="cancelField"
 			/>
 		</template>
-	</v-modal>
+	</v-drawer>
 </template>
 
 <script lang="ts">
@@ -404,4 +406,10 @@ export default defineComponent({
 		color: var(--primary);
 	}
 }
+
+.content {
+	padding: var(--content-padding);
+	padding-top: 0;
+	padding-bottom: var(--content-padding);
+}
 </style>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/store.ts b/app/src/modules/settings/routes/data-model/field-detail/store.ts
index 8d4fb7eb03..33e0a73a6a 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/store.ts
+++ b/app/src/modules/settings/routes/data-model/field-detail/store.ts
@@ -474,7 +474,7 @@ function initLocalStore(collection: string, field: string, type: typeof localTyp
 								name: 'German',
 							},
 							{
-								code: 'fr-Fr',
+								code: 'fr-FR',
 								name: 'French',
 							},
 							{
diff --git a/app/src/modules/settings/routes/data-model/fields/fields.vue b/app/src/modules/settings/routes/data-model/fields/fields.vue
index 7efea758d9..71f9f43c0f 100644
--- a/app/src/modules/settings/routes/data-model/fields/fields.vue
+++ b/app/src/modules/settings/routes/data-model/fields/fields.vue
@@ -73,10 +73,10 @@
 			/>
 		</div>
 
-		<template #drawer>
-			<drawer-detail icon="info_outline" :title="$t('information')" close>
+		<template #sidebar>
+			<sidebar-detail icon="info_outline" :title="$t('information')" close>
 				<div class="page-description" v-html="marked($t('page_help_settings_datamodel_fields'))" />
-			</drawer-detail>
+			</sidebar-detail>
 		</template>
 	</private-view>
 </template>
diff --git a/app/src/modules/settings/routes/data-model/new-collection.vue b/app/src/modules/settings/routes/data-model/new-collection.vue
index c588dc59d2..5edb0c38b8 100644
--- a/app/src/modules/settings/routes/data-model/new-collection.vue
+++ b/app/src/modules/settings/routes/data-model/new-collection.vue
@@ -1,10 +1,10 @@
 <template>
-	<v-modal
+	<v-drawer
 		:title="$t('creating_new_collection')"
 		:active="true"
 		class="new-collection"
 		persistent
-		@esc="$router.push('/settings/data-model')"
+		@cancel="$router.push('/settings/data-model')"
 	>
 		<v-dialog :active="saveError !== null" @toggle="saveError = null" @esc="saveError = null">
 			<v-card class="selectable">
@@ -29,9 +29,10 @@
 			</v-tabs>
 		</template>
 
-		<v-tabs-items v-model="currentTab">
+		<v-tabs-items class="content" v-model="currentTab">
 			<v-tab-item value="collection">
-				<h2 class="type-title">{{ $t('creating_collection_info') }}</h2>
+				<v-notice type="info">{{ $t('creating_collection_info') }}</v-notice>
+
 				<div class="grid">
 					<div>
 						<div class="type-label">
@@ -83,7 +84,8 @@
 				</div>
 			</v-tab-item>
 			<v-tab-item value="system">
-				<h2 class="type-title">{{ $t('creating_collection_system') }}</h2>
+				<v-notice type="info">{{ $t('creating_collection_system') }}</v-notice>
+
 				<div class="grid system">
 					<div v-for="(info, field) in systemFields" :key="field">
 						<div class="type-label">{{ $t(info.label) }}</div>
@@ -106,23 +108,29 @@
 			</v-tab-item>
 		</v-tabs-items>
 
-		<template #footer>
-			<v-button secondary to="/settings/data-model">
-				{{ $t('cancel') }}
-			</v-button>
-			<div class="spacer" />
+		<template #actions>
 			<v-button
 				:disabled="!collectionName || collectionName.length === 0"
 				v-if="currentTab[0] === 'collection'"
 				@click="currentTab = ['system']"
+				v-tooltip.bottom="$t('next')"
+				icon
+				rounded
 			>
-				{{ $t('next') }}
+				<v-icon name="arrow_forward" />
 			</v-button>
-			<v-button v-if="currentTab[0] === 'system'" @click="save" :loading="saving">
-				{{ $t('finish_setup') }}
+			<v-button
+				v-if="currentTab[0] === 'system'"
+				@click="save"
+				:loading="saving"
+				v-tooltip.bottom="$t('finish_setup')"
+				icon
+				rounded
+			>
+				<v-icon name="check" />
 			</v-button>
 		</template>
-	</v-modal>
+	</v-drawer>
 </template>
 
 <script lang="ts">
@@ -469,4 +477,14 @@ export default defineComponent({
 .required {
 	color: var(--primary);
 }
+
+.content {
+	padding: var(--content-padding);
+	padding-top: 0;
+	padding-bottom: var(--content-padding);
+}
+
+.v-notice {
+	margin-bottom: 36px;
+}
 </style>
diff --git a/app/src/modules/settings/routes/presets/collection/collection.vue b/app/src/modules/settings/routes/presets/collection/collection.vue
index c2f96739e3..fefa474b4e 100644
--- a/app/src/modules/settings/routes/presets/collection/collection.vue
+++ b/app/src/modules/settings/routes/presets/collection/collection.vue
@@ -84,8 +84,8 @@
 			</v-table>
 		</div>
 
-		<template #drawer>
-			<presets-info-drawer-detail />
+		<template #sidebar>
+			<presets-info-sidebar-detail />
 		</template>
 	</private-view>
 </template>
@@ -102,7 +102,7 @@ import { getLayouts } from '@/layouts';
 import { TranslateResult } from 'vue-i18n';
 import router from '@/router';
 import ValueNull from '@/views/private/components/value-null';
-import PresetsInfoDrawerDetail from './components/presets-info-drawer-detail.vue';
+import PresetsInfoSidebarDetail from './components/presets-info-sidebar-detail.vue';
 
 type PresetRaw = {
 	id: number;
@@ -122,7 +122,7 @@ type Preset = {
 };
 
 export default defineComponent({
-	components: { SettingsNavigation, ValueNull, PresetsInfoDrawerDetail },
+	components: { SettingsNavigation, ValueNull, PresetsInfoSidebarDetail },
 	setup() {
 		const layouts = getLayouts();
 		const collectionsStore = useCollectionsStore();
diff --git a/app/src/modules/settings/routes/presets/collection/components/presets-info-drawer-detail.vue b/app/src/modules/settings/routes/presets/collection/components/presets-info-sidebar-detail.vue
similarity index 93%
rename from app/src/modules/settings/routes/presets/collection/components/presets-info-drawer-detail.vue
rename to app/src/modules/settings/routes/presets/collection/components/presets-info-sidebar-detail.vue
index ef05eb673a..a01ee8c494 100644
--- a/app/src/modules/settings/routes/presets/collection/components/presets-info-drawer-detail.vue
+++ b/app/src/modules/settings/routes/presets/collection/components/presets-info-sidebar-detail.vue
@@ -1,5 +1,5 @@
 <template>
-	<drawer-detail icon="info_outline" :title="$t('information')" close>
+	<sidebar-detail icon="info_outline" :title="$t('information')" close>
 		<dl>
 			<div>
 				<dt>{{ $t('bookmarks') }}</dt>
@@ -14,7 +14,7 @@
 		<v-divider />
 
 		<div class="page-description" v-html="marked($t('page_help_settings_presets_collection'))" />
-	</drawer-detail>
+	</sidebar-detail>
 </template>
 
 <script lang="ts">
diff --git a/app/src/modules/settings/routes/presets/item.vue b/app/src/modules/settings/routes/presets/item.vue
index d5a8f645c2..b7047bdcff 100644
--- a/app/src/modules/settings/routes/presets/item.vue
+++ b/app/src/modules/settings/routes/presets/item.vue
@@ -75,18 +75,18 @@
 			</div>
 		</div>
 
-		<template #drawer>
-			<drawer-detail icon="info_outline" :title="$t('information')" close>
+		<template #sidebar>
+			<sidebar-detail icon="info_outline" :title="$t('information')" close>
 				<div class="page-description" v-html="marked($t('page_help_settings_presets_item'))" />
-			</drawer-detail>
+			</sidebar-detail>
 
-			<portal-target class="layout-drawer" name="drawer" />
+			<portal-target class="layout-sidebar" name="sidebar" />
 
-			<drawer-detail class="layout-drawer" icon="layers" :title="$t('layout_options')">
+			<sidebar-detail class="layout-sidebar" icon="layers" :title="$t('layout_options')">
 				<div class="layout-options">
 					<portal-target name="layout-options" class="portal-contents" />
 				</div>
-			</drawer-detail>
+			</sidebar-detail>
 		</template>
 	</private-view>
 </template>
@@ -547,10 +547,10 @@ export default defineComponent({
 	overflow: auto;
 }
 
-.layout-drawer {
-	--drawer-detail-icon-color: var(--warning);
-	--drawer-detail-color: var(--warning);
-	--drawer-detail-color-active: var(--warning);
+.layout-sidebar {
+	--sidebar-detail-icon-color: var(--warning);
+	--sidebar-detail-color: var(--warning);
+	--sidebar-detail-color-active: var(--warning);
 	--v-form-vertical-gap: 24px;
 }
 
diff --git a/app/src/modules/settings/routes/project/components/project-info-drawer-detail.vue b/app/src/modules/settings/routes/project/components/project-info-sidebar-detail.vue
similarity index 94%
rename from app/src/modules/settings/routes/project/components/project-info-drawer-detail.vue
rename to app/src/modules/settings/routes/project/components/project-info-sidebar-detail.vue
index 338c0e4410..583a5ba2bf 100644
--- a/app/src/modules/settings/routes/project/components/project-info-drawer-detail.vue
+++ b/app/src/modules/settings/routes/project/components/project-info-sidebar-detail.vue
@@ -1,5 +1,5 @@
 <template>
-	<drawer-detail icon="info_outline" :title="$t('information')" close>
+	<sidebar-detail icon="info_outline" :title="$t('information')" close>
 		<dl v-if="parsedInfo">
 			<div>
 				<dt>{{ $t('directus_version') }}</dt>
@@ -34,7 +34,7 @@
 		<v-divider />
 
 		<div class="page-description" v-html="marked($t('page_help_settings_project'))" />
-	</drawer-detail>
+	</sidebar-detail>
 </template>
 
 <script lang="ts">
diff --git a/app/src/modules/settings/routes/project/project.vue b/app/src/modules/settings/routes/project/project.vue
index f2aa8acdb3..014f6a7e4e 100644
--- a/app/src/modules/settings/routes/project/project.vue
+++ b/app/src/modules/settings/routes/project/project.vue
@@ -21,8 +21,8 @@
 			<v-form :initial-values="initialValues" v-model="edits" :fields="fields" :primary-key="1" />
 		</div>
 
-		<template #drawer>
-			<project-info-drawer-detail />
+		<template #sidebar>
+			<project-info-sidebar-detail />
 		</template>
 	</private-view>
 </template>
@@ -32,11 +32,11 @@ import { defineComponent, ref, computed } from '@vue/composition-api';
 import SettingsNavigation from '../../components/navigation.vue';
 import useCollection from '@/composables/use-collection';
 import { useSettingsStore } from '@/stores';
-import ProjectInfoDrawerDetail from './components/project-info-drawer-detail.vue';
+import ProjectInfoSidebarDetail from './components/project-info-sidebar-detail.vue';
 import { clone } from 'lodash';
 
 export default defineComponent({
-	components: { SettingsNavigation, ProjectInfoDrawerDetail },
+	components: { SettingsNavigation, ProjectInfoSidebarDetail },
 	setup() {
 		const settingsStore = useSettingsStore();
 
diff --git a/app/src/modules/settings/routes/roles/collection.vue b/app/src/modules/settings/routes/roles/collection.vue
index 76fe7bfada..e52fac74e1 100644
--- a/app/src/modules/settings/routes/roles/collection.vue
+++ b/app/src/modules/settings/routes/roles/collection.vue
@@ -18,10 +18,10 @@
 			<settings-navigation />
 		</template>
 
-		<template #drawer>
-			<drawer-detail icon="info_outline" :title="$t('information')" close>
+		<template #sidebar>
+			<sidebar-detail icon="info_outline" :title="$t('information')" close>
 				<div class="page-description" v-html="marked($t('page_help_settings_roles_collection'))" />
-			</drawer-detail>
+			</sidebar-detail>
 		</template>
 
 		<div class="roles">
diff --git a/app/src/modules/settings/routes/roles/item/components/permissions-overview.vue b/app/src/modules/settings/routes/roles/item/components/permissions-overview.vue
index 40c3ce5753..c15e055126 100644
--- a/app/src/modules/settings/routes/roles/item/components/permissions-overview.vue
+++ b/app/src/modules/settings/routes/roles/item/components/permissions-overview.vue
@@ -136,15 +136,15 @@ export default defineComponent({
 				loading.value = true;
 
 				try {
-					const response = await api.get('/permissions', {
-						params: {
-							filter: {
-								role: {
-									_eq: props.role,
-								},
-							},
-						},
-					});
+					const params: any = { filter: { role: {} } };
+
+					if (props.role === null) {
+						params.filter.role = { _null: true };
+					} else {
+						params.filter.role = { _eq: props.role };
+					}
+
+					const response = await api.get('/permissions', params);
 
 					permissions.value = response.data.data;
 				} catch (err) {
diff --git a/app/src/modules/settings/routes/roles/item/components/role-info-drawer-detail.vue b/app/src/modules/settings/routes/roles/item/components/role-info-sidebar-detail.vue
similarity index 87%
rename from app/src/modules/settings/routes/roles/item/components/role-info-drawer-detail.vue
rename to app/src/modules/settings/routes/roles/item/components/role-info-sidebar-detail.vue
index 6a00dfd7f5..750edb87da 100644
--- a/app/src/modules/settings/routes/roles/item/components/role-info-drawer-detail.vue
+++ b/app/src/modules/settings/routes/roles/item/components/role-info-sidebar-detail.vue
@@ -1,5 +1,5 @@
 <template>
-	<drawer-detail icon="info_outline" :title="$t('information')" close>
+	<sidebar-detail icon="info_outline" :title="$t('information')" close>
 		<dl v-if="!isNew && role">
 			<div>
 				<dt>{{ $t('primary_key') }}</dt>
@@ -10,7 +10,7 @@
 		<v-divider />
 
 		<div class="page-description" v-html="marked($t('page_help_settings_roles_item'))" />
-	</drawer-detail>
+	</sidebar-detail>
 </template>
 
 <script lang="ts">
diff --git a/app/src/modules/settings/routes/roles/item/item.vue b/app/src/modules/settings/routes/roles/item/item.vue
index d16638977c..a4f6cda2ad 100644
--- a/app/src/modules/settings/routes/roles/item/item.vue
+++ b/app/src/modules/settings/routes/roles/item/item.vue
@@ -71,8 +71,8 @@
 			/>
 		</div>
 
-		<template #drawer>
-			<role-info-drawer-detail :role="item" />
+		<template #sidebar>
+			<role-info-sidebar-detail :role="item" />
 			<revisions-drawer-detail collection="directus_roles" :primary-key="primaryKey" />
 		</template>
 	</private-view>
@@ -86,7 +86,7 @@ import router from '@/router';
 import RevisionsDrawerDetail from '@/views/private/components/revisions-drawer-detail';
 import useItem from '@/composables/use-item';
 import { useUserStore } from '@/stores/';
-import RoleInfoDrawerDetail from './components/role-info-drawer-detail.vue';
+import RoleInfoSidebarDetail from './components/role-info-sidebar-detail.vue';
 import PermissionsOverview from './components/permissions-overview.vue';
 
 type Values = {
@@ -95,7 +95,7 @@ type Values = {
 
 export default defineComponent({
 	name: 'roles-item',
-	components: { SettingsNavigation, RevisionsDrawerDetail, RoleInfoDrawerDetail, PermissionsOverview },
+	components: { SettingsNavigation, RevisionsDrawerDetail, RoleInfoSidebarDetail, PermissionsOverview },
 	props: {
 		primaryKey: {
 			type: String,
diff --git a/app/src/modules/settings/routes/roles/permissions-detail/components/actions.vue b/app/src/modules/settings/routes/roles/permissions-detail/components/actions.vue
index 0dd5aa45cc..e19b68bfde 100644
--- a/app/src/modules/settings/routes/roles/permissions-detail/components/actions.vue
+++ b/app/src/modules/settings/routes/roles/permissions-detail/components/actions.vue
@@ -1,6 +1,8 @@
 <template>
 	<div class="actions">
-		<v-button @click="save" :loading="loading">{{ $t('save') }}</v-button>
+		<v-button @click="save" :loading="loading" icon rounded v-tooltip.bottom="$t('save')">
+			<v-icon name="check" />
+		</v-button>
 	</div>
 </template>
 
diff --git a/app/src/modules/settings/routes/roles/permissions-detail/components/fields.vue b/app/src/modules/settings/routes/roles/permissions-detail/components/fields.vue
index 79a9c11456..5577e8ac50 100644
--- a/app/src/modules/settings/routes/roles/permissions-detail/components/fields.vue
+++ b/app/src/modules/settings/routes/roles/permissions-detail/components/fields.vue
@@ -1,13 +1,14 @@
 <template>
 	<div>
-		<v-modal-heading
-			:heading="
+		<v-notice type="info">
+			{{
 				$t('fields_for_role', {
 					role: role ? role.name : $t('public'),
 					action: $t(permission.action).toLowerCase(),
 				})
-			"
-		/>
+			}}
+		</v-notice>
+
 		<p class="type-label">{{ $tc('field', 0) }}</p>
 		<interface-checkboxes v-model="fields" type="json" :choices="fieldsInCollection" />
 	</div>
@@ -83,4 +84,8 @@ export default defineComponent({
 .type-label {
 	margin-bottom: 8px;
 }
+
+.v-notice {
+	margin-bottom: 36px;
+}
 </style>
diff --git a/app/src/modules/settings/routes/roles/permissions-detail/components/permissions.vue b/app/src/modules/settings/routes/roles/permissions-detail/components/permissions.vue
index 33141e5053..f473b64a51 100644
--- a/app/src/modules/settings/routes/roles/permissions-detail/components/permissions.vue
+++ b/app/src/modules/settings/routes/roles/permissions-detail/components/permissions.vue
@@ -1,13 +1,14 @@
 <template>
 	<div>
-		<v-modal-heading
-			:heading="
+		<v-notice type="info">
+			{{
 				$t('permissions_for_role', {
 					action: $t(permission.action).toLowerCase(),
 					role: role ? role.name : $t('public'),
 				})
-			"
-		/>
+			}}
+		</v-notice>
+
 		<interface-code v-model="permissions" language="json" type="json" />
 	</div>
 </template>
@@ -47,3 +48,9 @@ export default defineComponent({
 	},
 });
 </script>
+
+<style lang="scss" scoped>
+.v-notice {
+	margin-bottom: 36px;
+}
+</style>
diff --git a/app/src/modules/settings/routes/roles/permissions-detail/components/presets.vue b/app/src/modules/settings/routes/roles/permissions-detail/components/presets.vue
index 0a56ffef5c..8057e67b50 100644
--- a/app/src/modules/settings/routes/roles/permissions-detail/components/presets.vue
+++ b/app/src/modules/settings/routes/roles/permissions-detail/components/presets.vue
@@ -1,13 +1,13 @@
 <template>
 	<div>
-		<v-modal-heading
-			:heading="
+		<v-notice type="info">
+			{{
 				$t('presets_for_role', {
 					action: $t(permission.action).toLowerCase(),
 					role: role ? role.name : $t('public'),
 				})
-			"
-		/>
+			}}
+		</v-notice>
 		<interface-code v-model="presets" language="json" type="json" />
 	</div>
 </template>
@@ -47,3 +47,9 @@ export default defineComponent({
 	},
 });
 </script>
+
+<style lang="scss" scoped>
+.v-notice {
+	margin-bottom: 36px;
+}
+</style>
diff --git a/app/src/modules/settings/routes/roles/permissions-detail/components/validation.vue b/app/src/modules/settings/routes/roles/permissions-detail/components/validation.vue
index 50f9a34c52..b83a80aceb 100644
--- a/app/src/modules/settings/routes/roles/permissions-detail/components/validation.vue
+++ b/app/src/modules/settings/routes/roles/permissions-detail/components/validation.vue
@@ -1,13 +1,14 @@
 <template>
 	<div>
-		<v-modal-heading
-			:heading="
+		<v-notice type="info">
+			{{
 				$t('validation_for_role', {
 					action: $t(permission.action).toLowerCase(),
 					role: role ? role.name : $t('public'),
 				})
-			"
-		/>
+			}}
+		</v-notice>
+
 		<interface-code v-model="validation" language="json" type="json" />
 	</div>
 </template>
@@ -47,3 +48,9 @@ export default defineComponent({
 	},
 });
 </script>
+
+<style lang="scss" scoped>
+.v-notice {
+	margin-bottom: 36px;
+}
+</style>
diff --git a/app/src/modules/settings/routes/roles/permissions-detail/permissions-detail.vue b/app/src/modules/settings/routes/roles/permissions-detail/permissions-detail.vue
index 5f125fc8b4..8f88f260c2 100644
--- a/app/src/modules/settings/routes/roles/permissions-detail/permissions-detail.vue
+++ b/app/src/modules/settings/routes/roles/permissions-detail/permissions-detail.vue
@@ -1,20 +1,20 @@
 <template>
-	<v-modal :title="modalTitle" :active="true" class="new-collection" persistent>
+	<v-drawer :title="modalTitle" :active="true" class="new-collection" persistent>
 		<template #sidebar v-if="!loading">
 			<tabs :current-tab.sync="currentTab" :tabs="tabs" />
 		</template>
 
-		<template v-if="!loading">
+		<div class="content" v-if="!loading">
 			<permissions v-if="currentTab[0] === 'permissions'" :permission.sync="permission" :role="role" />
 			<fields v-if="currentTab[0] === 'fields'" :permission.sync="permission" :role="role" />
 			<validation v-if="currentTab[0] === 'validation'" :permission.sync="permission" :role="role" />
 			<presets v-if="currentTab[0] === 'presets'" :permission.sync="permission" :role="role" />
-		</template>
+		</div>
 
-		<template #footer v-if="!loading">
+		<template #actions v-if="!loading">
 			<actions :role-key="roleKey" :permission="permission" @refresh="$emit('refresh', +permissionKey)" />
 		</template>
-	</v-modal>
+	</v-drawer>
 </template>
 
 <script lang="ts">
@@ -149,3 +149,11 @@ export default defineComponent({
 	},
 });
 </script>
+
+<style lang="scss" scoped>
+.content {
+	padding: var(--content-padding);
+	padding-top: 0;
+	padding-bottom: var(--content-padding);
+}
+</style>
diff --git a/app/src/modules/settings/routes/webhooks/collection.vue b/app/src/modules/settings/routes/webhooks/collection.vue
index 26b450af95..260d627605 100644
--- a/app/src/modules/settings/routes/webhooks/collection.vue
+++ b/app/src/modules/settings/routes/webhooks/collection.vue
@@ -85,12 +85,12 @@
 			</template>
 		</component>
 
-		<template #drawer>
-			<drawer-detail icon="info_outline" :title="$t('information')" close>
+		<template #sidebar>
+			<sidebar-detail icon="info_outline" :title="$t('information')" close>
 				<div class="page-description" v-html="marked($t('page_help_settings_webhooks_collection'))" />
-			</drawer-detail>
-			<layout-drawer-detail />
-			<portal-target name="drawer" />
+			</sidebar-detail>
+			<layout-sidebar-detail />
+			<portal-target name="sidebar" />
 		</template>
 	</private-view>
 </template>
@@ -98,7 +98,7 @@
 <script lang="ts">
 import { defineComponent, computed, ref } from '@vue/composition-api';
 import SettingsNavigation from '../../components/navigation.vue';
-import LayoutDrawerDetail from '@/views/private/components/layout-drawer-detail';
+import LayoutSidebarDetail from '@/views/private/components/layout-sidebar-detail';
 import marked from 'marked';
 import { LayoutComponent } from '@/layouts/types';
 import { usePreset } from '@/composables/use-preset';
@@ -112,7 +112,7 @@ type Item = {
 
 export default defineComponent({
 	name: 'webhooks-collection',
-	components: { SettingsNavigation, LayoutDrawerDetail, SearchInput },
+	components: { SettingsNavigation, LayoutSidebarDetail, SearchInput },
 	setup(props) {
 		const layoutRef = ref<LayoutComponent | null>(null);
 
diff --git a/app/src/modules/settings/routes/webhooks/item.vue b/app/src/modules/settings/routes/webhooks/item.vue
index 21e033bcae..bbcb6bd156 100644
--- a/app/src/modules/settings/routes/webhooks/item.vue
+++ b/app/src/modules/settings/routes/webhooks/item.vue
@@ -58,10 +58,10 @@
 			v-model="edits"
 		/>
 
-		<template #drawer>
-			<drawer-detail icon="info_outline" :title="$t('information')" close>
+		<template #sidebar>
+			<sidebar-detail icon="info_outline" :title="$t('information')" close>
 				<div class="page-description" v-html="marked($t('page_help_settings_webhooks_item'))" />
-			</drawer-detail>
+			</sidebar-detail>
 			<revisions-drawer-detail v-if="isNew === false" collection="directus_webhooks" :primary-key="primaryKey" />
 		</template>
 	</private-view>
diff --git a/app/src/modules/users/components/user-info-drawer-detail.vue b/app/src/modules/users/components/user-info-sidebar-detail.vue
similarity index 94%
rename from app/src/modules/users/components/user-info-drawer-detail.vue
rename to app/src/modules/users/components/user-info-sidebar-detail.vue
index 86c21f2262..73cc5cdccd 100644
--- a/app/src/modules/users/components/user-info-drawer-detail.vue
+++ b/app/src/modules/users/components/user-info-sidebar-detail.vue
@@ -1,5 +1,5 @@
 <template>
-	<drawer-detail icon="info_outline" :title="$t('information')" close>
+	<sidebar-detail icon="info_outline" :title="$t('information')" close>
 		<dl v-if="isNew === false && user">
 			<div v-if="user.id">
 				<dt>{{ $t('key') }}</dt>
@@ -32,7 +32,7 @@
 		<v-divider />
 
 		<div class="page-description" v-html="marked($t('page_help_users_item'))" />
-	</drawer-detail>
+	</sidebar-detail>
 </template>
 
 <script lang="ts">
diff --git a/app/src/modules/users/routes/collection.vue b/app/src/modules/users/routes/collection.vue
index 517dabb072..7c8d18c863 100644
--- a/app/src/modules/users/routes/collection.vue
+++ b/app/src/modules/users/routes/collection.vue
@@ -91,12 +91,12 @@
 			</template>
 		</component>
 
-		<template #drawer>
-			<drawer-detail icon="info_outline" :title="$t('information')" close>
+		<template #sidebar>
+			<sidebar-detail icon="info_outline" :title="$t('information')" close>
 				<div class="page-description" v-html="marked($t('page_help_users_collection'))" />
-			</drawer-detail>
-			<layout-drawer-detail @input="layout = $event" :value="layout" />
-			<portal-target name="drawer" />
+			</sidebar-detail>
+			<layout-sidebar-detail @input="layout = $event" :value="layout" />
+			<portal-target name="sidebar" />
 		</template>
 	</private-view>
 </template>
@@ -109,7 +109,7 @@ import { i18n } from '@/lang';
 import api from '@/api';
 import { LayoutComponent } from '@/layouts/types';
 import usePreset from '@/composables/use-preset';
-import LayoutDrawerDetail from '@/views/private/components/layout-drawer-detail';
+import LayoutSidebarDetail from '@/views/private/components/layout-sidebar-detail';
 import SearchInput from '@/views/private/components/search-input';
 import marked from 'marked';
 import useNavigation from '../composables/use-navigation';
@@ -120,7 +120,7 @@ type Item = {
 
 export default defineComponent({
 	name: 'users-collection',
-	components: { UsersNavigation, LayoutDrawerDetail, SearchInput },
+	components: { UsersNavigation, LayoutSidebarDetail, SearchInput },
 	props: {
 		queryFilters: {
 			type: Object as PropType<Record<string, string>>,
diff --git a/app/src/modules/users/routes/item.vue b/app/src/modules/users/routes/item.vue
index f0e0436f68..136b560334 100644
--- a/app/src/modules/users/routes/item.vue
+++ b/app/src/modules/users/routes/item.vue
@@ -143,15 +143,15 @@
 			</v-card>
 		</v-dialog>
 
-		<template #drawer>
-			<user-info-drawer-detail :is-new="isNew" :user="item" />
+		<template #sidebar>
+			<user-info-sidebar-detail :is-new="isNew" :user="item" />
 			<revisions-drawer-detail
 				v-if="isBatch === false && isNew === false"
 				collection="directus_users"
 				:primary-key="primaryKey"
 				ref="revisionsDrawerDetail"
 			/>
-			<comments-drawer-detail
+			<comments-sidebar-detail
 				v-if="isBatch === false && isNew === false"
 				collection="directus_users"
 				:primary-key="primaryKey"
@@ -167,14 +167,14 @@ import UsersNavigation from '../components/navigation.vue';
 import { i18n } from '@/lang';
 import router from '@/router';
 import RevisionsDrawerDetail from '@/views/private/components/revisions-drawer-detail';
-import CommentsDrawerDetail from '@/views/private/components/comments-drawer-detail';
+import CommentsSidebarDetail from '@/views/private/components/comments-sidebar-detail';
 import useItem from '@/composables/use-item';
 import SaveOptions from '@/views/private/components/save-options';
 import api from '@/api';
 import { useFieldsStore, useUserStore } from '@/stores/';
 import useFormFields from '@/composables/use-form-fields';
 import { Field } from '@/types';
-import UserInfoDrawerDetail from '../components/user-info-drawer-detail.vue';
+import UserInfoSidebarDetail from '../components/user-info-sidebar-detail.vue';
 import { getRootPath } from '@/utils/get-root-path';
 import useShortcut from '@/composables/use-shortcut';
 import { isAllowed } from '@/utils/is-allowed';
@@ -198,7 +198,7 @@ export default defineComponent({
 
 		return next();
 	},
-	components: { UsersNavigation, RevisionsDrawerDetail, SaveOptions, CommentsDrawerDetail, UserInfoDrawerDetail },
+	components: { UsersNavigation, RevisionsDrawerDetail, SaveOptions, CommentsSidebarDetail, UserInfoSidebarDetail },
 	props: {
 		primaryKey: {
 			type: String,
diff --git a/app/src/stores/app.ts b/app/src/stores/app.ts
index a96f52eb2a..6eab2083a6 100644
--- a/app/src/stores/app.ts
+++ b/app/src/stores/app.ts
@@ -3,7 +3,7 @@ import { createStore } from 'pinia';
 export const useAppStore = createStore({
 	id: 'appStore',
 	state: () => ({
-		drawerOpen: false,
+		sidebarOpen: false,
 		hydrated: false,
 		hydrating: false,
 		error: null,
diff --git a/app/src/views/private/components/comments-drawer-detail/index.ts b/app/src/views/private/components/comments-drawer-detail/index.ts
deleted file mode 100644
index c7fae8a3a3..0000000000
--- a/app/src/views/private/components/comments-drawer-detail/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import CommentsDrawerDetail from './comments-drawer-detail.vue';
-
-export { CommentsDrawerDetail };
-export default CommentsDrawerDetail;
diff --git a/app/src/views/private/components/comments-drawer-detail/readme.md b/app/src/views/private/components/comments-drawer-detail/readme.md
deleted file mode 100644
index 0f2f3b0fa9..0000000000
--- a/app/src/views/private/components/comments-drawer-detail/readme.md
+++ /dev/null
@@ -1,9 +0,0 @@
-# Comments Drawer
-
-Renders an comment timeline in a drawer section meant to be used in the drawer sidebar.
-
-## Usage
-
-```html
-<comments-drawer-detail collection="authors" primary-key="15" />
-```
diff --git a/app/src/views/private/components/comments-drawer-detail/comment-input.vue b/app/src/views/private/components/comments-sidebar-detail/comment-input.vue
similarity index 100%
rename from app/src/views/private/components/comments-drawer-detail/comment-input.vue
rename to app/src/views/private/components/comments-sidebar-detail/comment-input.vue
diff --git a/app/src/views/private/components/comments-drawer-detail/comment-item-header.vue b/app/src/views/private/components/comments-sidebar-detail/comment-item-header.vue
similarity index 100%
rename from app/src/views/private/components/comments-drawer-detail/comment-item-header.vue
rename to app/src/views/private/components/comments-sidebar-detail/comment-item-header.vue
diff --git a/app/src/views/private/components/comments-drawer-detail/comment-item.vue b/app/src/views/private/components/comments-sidebar-detail/comment-item.vue
similarity index 100%
rename from app/src/views/private/components/comments-drawer-detail/comment-item.vue
rename to app/src/views/private/components/comments-sidebar-detail/comment-item.vue
diff --git a/app/src/views/private/components/comments-drawer-detail/comments-drawer-detail.vue b/app/src/views/private/components/comments-sidebar-detail/comments-sidebar-detail.vue
similarity index 97%
rename from app/src/views/private/components/comments-drawer-detail/comments-drawer-detail.vue
rename to app/src/views/private/components/comments-sidebar-detail/comments-sidebar-detail.vue
index 19511c653f..e1102f4757 100644
--- a/app/src/views/private/components/comments-drawer-detail/comments-drawer-detail.vue
+++ b/app/src/views/private/components/comments-sidebar-detail/comments-sidebar-detail.vue
@@ -1,5 +1,5 @@
 <template>
-	<drawer-detail :title="$t('comments')" icon="chat_bubble_outline" :badge="count || null">
+	<sidebar-detail :title="$t('comments')" icon="chat_bubble_outline" :badge="count || null">
 		<comment-input :refresh="refresh" :collection="collection" :primary-key="primaryKey" />
 
 		<v-progress-linear indeterminate v-if="loading" />
@@ -15,7 +15,7 @@
 				<comment-item :refresh="refresh" :activity="item" :key="item.id" />
 			</template>
 		</template>
-	</drawer-detail>
+	</sidebar-detail>
 </template>
 
 <script lang="ts">
@@ -138,7 +138,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.drawer-detail {
+.sidebar-detail {
 	--v-badge-background-color: var(--foreground-normal);
 }
 
diff --git a/app/src/views/private/components/comments-sidebar-detail/index.ts b/app/src/views/private/components/comments-sidebar-detail/index.ts
new file mode 100644
index 0000000000..a3963bb569
--- /dev/null
+++ b/app/src/views/private/components/comments-sidebar-detail/index.ts
@@ -0,0 +1,4 @@
+import CommentsSidebarDetail from './comments-sidebar-detail.vue';
+
+export { CommentsSidebarDetail };
+export default CommentsSidebarDetail;
diff --git a/app/src/views/private/components/comments-sidebar-detail/readme.md b/app/src/views/private/components/comments-sidebar-detail/readme.md
new file mode 100644
index 0000000000..0284f91019
--- /dev/null
+++ b/app/src/views/private/components/comments-sidebar-detail/readme.md
@@ -0,0 +1,9 @@
+# Comments Sidebar
+
+Renders an comment timeline in a sidebar section meant to be used in the sidebar sidebar.
+
+## Usage
+
+```html
+<comments-sidebar-detail collection="authors" primary-key="15" />
+```
diff --git a/app/src/views/private/components/comments-drawer-detail/types.ts b/app/src/views/private/components/comments-sidebar-detail/types.ts
similarity index 100%
rename from app/src/views/private/components/comments-drawer-detail/types.ts
rename to app/src/views/private/components/comments-sidebar-detail/types.ts
diff --git a/app/src/views/private/components/drawer-button/index.ts b/app/src/views/private/components/drawer-button/index.ts
deleted file mode 100644
index 625da53f01..0000000000
--- a/app/src/views/private/components/drawer-button/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import DrawerButton from './drawer-button.vue';
-
-export { DrawerButton };
-export default DrawerButton;
diff --git a/app/src/views/private/components/modal-collection/modal-collection.vue b/app/src/views/private/components/drawer-collection/drawer-collection.vue
similarity index 93%
rename from app/src/views/private/components/modal-collection/modal-collection.vue
rename to app/src/views/private/components/drawer-collection/drawer-collection.vue
index 1521557baa..2ef3754287 100644
--- a/app/src/views/private/components/modal-collection/modal-collection.vue
+++ b/app/src/views/private/components/drawer-collection/drawer-collection.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-modal v-model="_active" :title="$t('select_item')" no-padding @esc="cancel">
+	<v-drawer v-model="_active" :title="$t('select_item')" @cancel="cancel">
 		<component
 			:is="`layout-${localLayout}`"
 			:collection="collection"
@@ -20,11 +20,12 @@
 			</template>
 		</component>
 
-		<template #footer>
-			<v-button @click="cancel" secondary>{{ $t('cancel') }}</v-button>
-			<v-button @click="save">{{ $t('save') }}</v-button>
+		<template #actions>
+			<v-button @click="save" icon rounded v-tooltip.bottom="$t('save')">
+				<v-icon name="check" />
+			</v-button>
 		</template>
-	</v-modal>
+	</v-drawer>
 </template>
 
 <script lang="ts">
diff --git a/app/src/views/private/components/drawer-collection/index.ts b/app/src/views/private/components/drawer-collection/index.ts
new file mode 100644
index 0000000000..2a1bf970b9
--- /dev/null
+++ b/app/src/views/private/components/drawer-collection/index.ts
@@ -0,0 +1,4 @@
+import DrawerCollection from './drawer-collection.vue';
+
+export { DrawerCollection };
+export default DrawerCollection;
diff --git a/app/src/views/private/components/drawer-detail-group/index.ts b/app/src/views/private/components/drawer-detail-group/index.ts
deleted file mode 100644
index 6f734301d1..0000000000
--- a/app/src/views/private/components/drawer-detail-group/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import DrawerDetailGroup from './drawer-detail-group.vue';
-
-export { DrawerDetailGroup };
-export default DrawerDetailGroup;
diff --git a/app/src/views/private/components/drawer-detail-group/readme.md b/app/src/views/private/components/drawer-detail-group/readme.md
deleted file mode 100644
index 5e135bab86..0000000000
--- a/app/src/views/private/components/drawer-detail-group/readme.md
+++ /dev/null
@@ -1,39 +0,0 @@
-# Drawer Detail Group
-
-Used in the private view to manage the active state of [the nested `drawer-detail` components](../drawer-detail/).
-
-## Usage
-
-```html
-<drawer-detail-group :drawer-open="drawerOpen">
-	<drawer-detail icon="person" title="Users" >
-		<!-- section content -->
-	</drawer-detail>
-	<drawer-detail icon="settings" title="Settings" >
-		<!-- section content -->
-	</drawer-detail>
-	<drawer-detail icon="map" title="Routes" >
-		<!-- section content -->
-	</drawer-detail>
-</drawer-detail-group>
-```
-
-## Drawer open state
-
-Once the drawer closes, all open drawer details should be closed. By watching the `drawer-open` prop, we can dynamically close all details.
-
-## Props
-| Prop          | Description                                              | Default |
-|---------------|----------------------------------------------------------|---------|
-| `drawer-open` | If the drawer sidebar in the private view is open or not | `false` |
-
-## Slots
-| Slot      | Description |
-|-----------|-------------|
-| _default_ |             |
-
-## Events
-n/a
-
-## CSS Variables
-n/a
diff --git a/app/src/views/private/components/drawer-detail/index.ts b/app/src/views/private/components/drawer-detail/index.ts
deleted file mode 100644
index 4763e379e1..0000000000
--- a/app/src/views/private/components/drawer-detail/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import DrawerDetail from './drawer-detail.vue';
-
-export { DrawerDetail };
-export default DrawerDetail;
diff --git a/app/src/views/private/components/modal-item/modal-item.vue b/app/src/views/private/components/drawer-item/drawer-item.vue
similarity index 88%
rename from app/src/views/private/components/modal-item/modal-item.vue
rename to app/src/views/private/components/drawer-item/drawer-item.vue
index 13cd56cc1a..7cff5a1c8c 100644
--- a/app/src/views/private/components/modal-item/modal-item.vue
+++ b/app/src/views/private/components/drawer-item/drawer-item.vue
@@ -1,31 +1,34 @@
 <template>
-	<v-modal v-model="_active" :title="title" persistent form-width @esc="cancel">
-		<template v-if="junctionField">
+	<v-drawer v-model="_active" :title="title" persistent @cancel="cancel">
+		<template #actions>
+			<v-button @click="save" icon rounded v-tooltip.bottom="$t('save')">
+				<v-icon name="check" />
+			</v-button>
+		</template>
+
+		<div class="drawer-item-content">
+			<template v-if="junctionField">
+				<v-form
+					:loading="loading"
+					:initial-values="item && item[junctionField]"
+					:collection="junctionRelatedCollection"
+					:primary-key="relatedPrimaryKey"
+					:edits="_edits[junctionField]"
+					@input="setJunctionEdits"
+				/>
+
+				<v-divider v-if="showDivider" />
+			</template>
+
 			<v-form
 				:loading="loading"
-				:initial-values="item && item[junctionField]"
-				:collection="junctionRelatedCollection"
-				:primary-key="relatedPrimaryKey"
-				:edits="_edits[junctionField]"
-				@input="setJunctionEdits"
+				:initial-values="item"
+				:collection="collection"
+				:primary-key="primaryKey"
+				v-model="_edits"
 			/>
-
-			<v-divider v-if="showDivider" />
-		</template>
-
-		<v-form
-			:loading="loading"
-			:initial-values="item"
-			:collection="collection"
-			:primary-key="primaryKey"
-			v-model="_edits"
-		/>
-
-		<template #footer>
-			<v-button @click="cancel" secondary>{{ $t('cancel') }}</v-button>
-			<v-button @click="save">{{ $t('save') }}</v-button>
-		</template>
-	</v-modal>
+		</div>
+	</v-drawer>
 </template>
 
 <script lang="ts">
@@ -288,4 +291,9 @@ export default defineComponent({
 .v-divider {
 	margin: 52px 0;
 }
+
+.drawer-item-content {
+	padding: var(--content-padding);
+	padding-bottom: var(--content-padding-bottom);
+}
 </style>
diff --git a/app/src/views/private/components/drawer-item/index.ts b/app/src/views/private/components/drawer-item/index.ts
new file mode 100644
index 0000000000..59f5de9096
--- /dev/null
+++ b/app/src/views/private/components/drawer-item/index.ts
@@ -0,0 +1,4 @@
+import DrawerItem from './drawer-item.vue';
+
+export { DrawerItem };
+export default DrawerItem;
diff --git a/app/src/views/private/components/export-drawer-detail/index.ts b/app/src/views/private/components/export-drawer-detail/index.ts
deleted file mode 100644
index 2599026d19..0000000000
--- a/app/src/views/private/components/export-drawer-detail/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import ExportDrawerDetail from './export-drawer-detail.vue';
-
-export { ExportDrawerDetail };
-export default ExportDrawerDetail;
diff --git a/app/src/views/private/components/export-drawer-detail/export-drawer-detail.vue b/app/src/views/private/components/export-sidebar-detail/export-sidebar-detail.vue
similarity index 83%
rename from app/src/views/private/components/export-drawer-detail/export-drawer-detail.vue
rename to app/src/views/private/components/export-sidebar-detail/export-sidebar-detail.vue
index a299228595..55f3935402 100644
--- a/app/src/views/private/components/export-drawer-detail/export-drawer-detail.vue
+++ b/app/src/views/private/components/export-sidebar-detail/export-sidebar-detail.vue
@@ -1,5 +1,5 @@
 <template>
-	<drawer-detail icon="save_alt" :title="$t('export_data')">
+	<sidebar-detail icon="save_alt" :title="$t('export_data')">
 		<div class="fields">
 			<div class="field full">
 				<p class="type-label">{{ $t('format') }}</p>
@@ -20,10 +20,12 @@
 			</div>
 
 			<div class="field full">
-				<v-button full-width @click="exportData">{{ $t('export_collection', { collection: collection.name }) }}</v-button>
+				<v-button full-width @click="exportData">
+					{{ $t('export_collection', { collection: collection.name }) }}
+				</v-button>
 			</div>
 		</div>
-	</drawer-detail>
+	</sidebar-detail>
 </template>
 
 <script lang="ts">
@@ -35,7 +37,7 @@ export default defineComponent({
 	props: {
 		layoutQuery: {
 			type: Object,
-			default: () => ({})
+			default: () => ({}),
 		},
 		searchQuery: {
 			type: String,
@@ -44,7 +46,7 @@ export default defineComponent({
 		collection: {
 			type: Object as PropType<Collection>,
 			required: true,
-		}
+		},
 	},
 	setup(props, { emit }) {
 		const format = ref('csv');
@@ -56,7 +58,7 @@ export default defineComponent({
 			const url = `/items/${props.collection.collection}`;
 
 			let params: Record<string, any> = {
-				access_token: api.defaults.headers.Authorization.substring(7)
+				access_token: api.defaults.headers.Authorization.substring(7),
 			};
 
 			if (format.value === 'csv') {
@@ -69,14 +71,16 @@ export default defineComponent({
 				params = {
 					...params,
 					...props.layoutQuery,
-				}
+				};
 
 				if (props.searchQuery) {
 					params.search = props.searchQuery;
 				}
 			}
 
-			const qs = Object.keys(params).map(key => `${key}=${params[key]}`).join('&');
+			const qs = Object.keys(params)
+				.map((key) => `${key}=${params[key]}`)
+				.join('&');
 			window.open(`${url}?${qs}`);
 		}
 	},
diff --git a/app/src/views/private/components/export-sidebar-detail/index.ts b/app/src/views/private/components/export-sidebar-detail/index.ts
new file mode 100644
index 0000000000..853ea70ed9
--- /dev/null
+++ b/app/src/views/private/components/export-sidebar-detail/index.ts
@@ -0,0 +1,4 @@
+import ExportSidebarDetail from './export-sidebar-detail.vue';
+
+export { ExportSidebarDetail };
+export default ExportSidebarDetail;
diff --git a/app/src/views/private/components/filter-drawer-detail/index.ts b/app/src/views/private/components/filter-drawer-detail/index.ts
deleted file mode 100644
index 16e78b47e7..0000000000
--- a/app/src/views/private/components/filter-drawer-detail/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import FilterDrawerDetail from './filter-drawer-detail.vue';
-
-export { FilterDrawerDetail };
-export default FilterDrawerDetail;
diff --git a/app/src/views/private/components/filter-drawer-detail/field-filter.vue b/app/src/views/private/components/filter-sidebar-detail/field-filter.vue
similarity index 100%
rename from app/src/views/private/components/filter-drawer-detail/field-filter.vue
rename to app/src/views/private/components/filter-sidebar-detail/field-filter.vue
diff --git a/app/src/views/private/components/filter-drawer-detail/field-list-item.vue b/app/src/views/private/components/filter-sidebar-detail/field-list-item.vue
similarity index 100%
rename from app/src/views/private/components/filter-drawer-detail/field-list-item.vue
rename to app/src/views/private/components/filter-sidebar-detail/field-list-item.vue
diff --git a/app/src/views/private/components/filter-drawer-detail/filter-input.vue b/app/src/views/private/components/filter-sidebar-detail/filter-input.vue
similarity index 100%
rename from app/src/views/private/components/filter-drawer-detail/filter-input.vue
rename to app/src/views/private/components/filter-sidebar-detail/filter-input.vue
diff --git a/app/src/views/private/components/filter-drawer-detail/filter-drawer-detail.vue b/app/src/views/private/components/filter-sidebar-detail/filter-sidebar-detail.vue
similarity index 99%
rename from app/src/views/private/components/filter-drawer-detail/filter-drawer-detail.vue
rename to app/src/views/private/components/filter-sidebar-detail/filter-sidebar-detail.vue
index 56f41cff68..9bd23fff36 100644
--- a/app/src/views/private/components/filter-drawer-detail/filter-drawer-detail.vue
+++ b/app/src/views/private/components/filter-sidebar-detail/filter-sidebar-detail.vue
@@ -1,5 +1,5 @@
 <template>
-	<drawer-detail
+	<sidebar-detail
 		:badge="filters.length > 0 ? filters.length : null"
 		icon="filter_list"
 		:title="$t('advanced_filter')"
@@ -39,7 +39,7 @@
 
 			<v-checkbox v-model="archived" :label="$t('show_archived_items')" />
 		</template>
-	</drawer-detail>
+	</sidebar-detail>
 </template>
 
 <script lang="ts">
diff --git a/app/src/views/private/components/filter-drawer-detail/get-available-operators-for-type.ts b/app/src/views/private/components/filter-sidebar-detail/get-available-operators-for-type.ts
similarity index 100%
rename from app/src/views/private/components/filter-drawer-detail/get-available-operators-for-type.ts
rename to app/src/views/private/components/filter-sidebar-detail/get-available-operators-for-type.ts
diff --git a/app/src/views/private/components/filter-sidebar-detail/index.ts b/app/src/views/private/components/filter-sidebar-detail/index.ts
new file mode 100644
index 0000000000..5d49ccb85b
--- /dev/null
+++ b/app/src/views/private/components/filter-sidebar-detail/index.ts
@@ -0,0 +1,4 @@
+import FilterSidebarDetail from './filter-sidebar-detail.vue';
+
+export { FilterSidebarDetail };
+export default FilterSidebarDetail;
diff --git a/app/src/views/private/components/filter-drawer-detail/types.ts b/app/src/views/private/components/filter-sidebar-detail/types.ts
similarity index 100%
rename from app/src/views/private/components/filter-drawer-detail/types.ts
rename to app/src/views/private/components/filter-sidebar-detail/types.ts
diff --git a/app/src/views/private/components/header-bar-actions/header-bar-actions.vue b/app/src/views/private/components/header-bar-actions/header-bar-actions.vue
index afef56f127..2bade5aa77 100644
--- a/app/src/views/private/components/header-bar-actions/header-bar-actions.vue
+++ b/app/src/views/private/components/header-bar-actions/header-bar-actions.vue
@@ -5,7 +5,7 @@
 		</v-button>
 
 		<div class="action-buttons">
-			<v-button class="drawer-toggle" icon rounded secondary outlined @click="$emit('toggle:drawer')">
+			<v-button class="sidebar-toggle" icon rounded secondary outlined @click="$emit('toggle:sidebar')">
 				<v-icon name="info" outline />
 			</v-button>
 
@@ -40,6 +40,7 @@ export default defineComponent({
 
 	.expand {
 		--v-icon-color: var(--foreground-normal);
+
 		flex-shrink: 0;
 		margin-right: 8px;
 
@@ -61,7 +62,7 @@ export default defineComponent({
 			margin-right: 8px;
 		}
 
-		.drawer-toggle {
+		.sidebar-toggle {
 			flex-shrink: 0;
 
 			@include breakpoint(medium) {
@@ -94,7 +95,7 @@ export default defineComponent({
 
 	@include breakpoint(medium) {
 		.action-buttons ::v-deep {
-			> *:not(.drawer-toggle) {
+			> *:not(.sidebar-toggle) {
 				display: inherit !important;
 			}
 		}
diff --git a/app/src/views/private/components/header-bar-actions/readme.md b/app/src/views/private/components/header-bar-actions/readme.md
index bd822dc18d..b65d1b8c6a 100644
--- a/app/src/views/private/components/header-bar-actions/readme.md
+++ b/app/src/views/private/components/header-bar-actions/readme.md
@@ -33,7 +33,7 @@ n/a
 ## Events
 | Event           | Description                                           | Value |
 |-----------------|-------------------------------------------------------|-------|
-| `toggle:drawer` | Emitted when the user clicks the toggle drawer button | --    |
+| `toggle:sidebar` | Emitted when the user clicks the toggle sidebar button | --    |
 
 ## CSS Variables
 n/a
diff --git a/app/src/views/private/components/header-bar/header-bar.story.ts b/app/src/views/private/components/header-bar/header-bar.story.ts
index f91096f55d..a56033793b 100644
--- a/app/src/views/private/components/header-bar/header-bar.story.ts
+++ b/app/src/views/private/components/header-bar/header-bar.story.ts
@@ -22,8 +22,8 @@ export const basic = () =>
 			title: {
 				default: text('Title', 'Hello World'),
 			},
-			showDrawerToggle: {
-				default: boolean('Show Drawer Toggle', false),
+			showSidebarToggle: {
+				default: boolean('Show Sidebar Toggle', false),
 			},
 			dense: {
 				default: boolean('Dense', false),
@@ -31,19 +31,19 @@ export const basic = () =>
 		},
 		setup() {
 			const navToggle = action('update:nav-open');
-			const drawerToggle = action('update:drawer-open');
+			const sidebarToggle = action('update:sidebar-open');
 
-			return { navToggle, drawerToggle };
+			return { navToggle, sidebarToggle };
 		},
 		template: `
 			<header-bar
 				:title="title"
 				:nav-open="false"
-				:drawer-open="false"
-				:show-drawer-toggle="showDrawerToggle"
+				:sidebar-open="false"
+				:show-sidebar-toggle="showSidebarToggle"
 				:dense="dense"
 				@update:nav-open="navToggle"
-				@update:drawer-open="drawerToggle"
+				@update:sidebar-open="sidebarToggle"
 			/>
 		`,
 	});
@@ -56,8 +56,8 @@ export const withBreadcrumb = () =>
 			title: {
 				default: text('Title', 'Hello World'),
 			},
-			showDrawerToggle: {
-				default: boolean('Show Drawer Toggle', false),
+			showSidebarToggle: {
+				default: boolean('Show Sidebar Toggle', false),
 			},
 			dense: {
 				default: boolean('Dense', false),
@@ -65,19 +65,19 @@ export const withBreadcrumb = () =>
 		},
 		setup() {
 			const navToggle = action('update:nav-open');
-			const drawerToggle = action('update:drawer-open');
+			const sidebarToggle = action('update:sidebar-open');
 
-			return { navToggle, drawerToggle };
+			return { navToggle, sidebarToggle };
 		},
 		template: `
 			<header-bar
 				:title="title"
 				:nav-open="false"
-				:drawer-open="false"
-				:show-drawer-toggle="showDrawerToggle"
+				:sidebar-open="false"
+				:show-sidebar-toggle="showSidebarToggle"
 				:dense="dense"
 				@update:nav-open="navToggle"
-				@update:drawer-open="drawerToggle"
+				@update:sidebar-open="sidebarToggle"
 			>
 				<template #headline>
 					<v-breadcrumb :items="[
@@ -103,8 +103,8 @@ export const withBackButton = () =>
 			title: {
 				default: text('Title', 'Hello World'),
 			},
-			showDrawerToggle: {
-				default: boolean('Show Drawer Toggle', false),
+			showSidebarToggle: {
+				default: boolean('Show Sidebar Toggle', false),
 			},
 			dense: {
 				default: boolean('Dense', false),
@@ -112,19 +112,19 @@ export const withBackButton = () =>
 		},
 		setup() {
 			const navToggle = action('update:nav-open');
-			const drawerToggle = action('update:drawer-open');
+			const sidebarToggle = action('update:sidebar-open');
 
-			return { navToggle, drawerToggle };
+			return { navToggle, sidebarToggle };
 		},
 		template: `
 			<header-bar
 				:title="title"
 				:nav-open="false"
-				:drawer-open="false"
-				:show-drawer-toggle="showDrawerToggle"
+				:sidebar-open="false"
+				:show-sidebar-toggle="showSidebarToggle"
 				:dense="dense"
 				@update:nav-open="navToggle"
-				@update:drawer-open="drawerToggle"
+				@update:sidebar-open="sidebarToggle"
 			>
 				<template #title-outer:prepend>
 					<v-button icon rounded secondary>
@@ -146,8 +146,8 @@ export const slots = () => {
 			title: {
 				default: text('Title', 'Hello World'),
 			},
-			showDrawerToggle: {
-				default: boolean('Show Drawer Toggle', false),
+			showSidebarToggle: {
+				default: boolean('Show Sidebar Toggle', false),
 			},
 			dense: {
 				default: boolean('Dense', false),
@@ -155,19 +155,19 @@ export const slots = () => {
 		},
 		setup() {
 			const navToggle = action('update:nav-open');
-			const drawerToggle = action('update:drawer-open');
+			const sidebarToggle = action('update:sidebar-open');
 
-			return { navToggle, drawerToggle };
+			return { navToggle, sidebarToggle };
 		},
 		template: `
 			<header-bar
 				:title="title"
 				:nav-open="false"
-				:drawer-open="false"
-				:show-drawer-toggle="showDrawerToggle"
+				:sidebar-open="false"
+				:show-sidebar-toggle="showSidebarToggle"
 				:dense="dense"
 				@update:nav-open="navToggle"
-				@update:drawer-open="drawerToggle"
+				@update:sidebar-open="sidebarToggle"
 			>
 				<template #title-outer:prepend>
 					<slot-label>title-outer:prepend</slot-label>
@@ -205,8 +205,8 @@ export const withActions = () =>
 			title: {
 				default: text('Title', 'Hello World'),
 			},
-			showDrawerToggle: {
-				default: boolean('Show Drawer Toggle', false),
+			showSidebarToggle: {
+				default: boolean('Show Sidebar Toggle', false),
 			},
 			dense: {
 				default: boolean('Dense', false),
@@ -214,19 +214,19 @@ export const withActions = () =>
 		},
 		setup() {
 			const navToggle = action('update:nav-open');
-			const drawerToggle = action('update:drawer-open');
+			const sidebarToggle = action('update:sidebar-open');
 
-			return { navToggle, drawerToggle };
+			return { navToggle, sidebarToggle };
 		},
 		template: `
 			<header-bar
 				:title="title"
 				:nav-open="false"
-				:drawer-open="false"
-				:show-drawer-toggle="showDrawerToggle"
+				:sidebar-open="false"
+				:show-sidebar-toggle="showSidebarToggle"
 				:dense="dense"
 				@update:nav-open="navToggle"
-				@update:drawer-open="drawerToggle"
+				@update:sidebar-open="sidebarToggle"
 			>
 				<template #actions>
 					<v-button rounded icon style="--v-button-background-color: var(--success);">
diff --git a/app/src/views/private/components/header-bar/header-bar.test.ts b/app/src/views/private/components/header-bar/header-bar.test.ts
index 504417f2bc..82dbfb848e 100644
--- a/app/src/views/private/components/header-bar/header-bar.test.ts
+++ b/app/src/views/private/components/header-bar/header-bar.test.ts
@@ -35,9 +35,9 @@ describe('Views / Private / Header Bar', () => {
 
 		expect(component.emitted('toggle:nav')?.[0]).toBeTruthy();
 
-		const drawerToggle = component.find('.drawer-toggle > .button');
-		drawerToggle.trigger('click');
+		const sidebarToggle = component.find('.sidebar-toggle > .button');
+		sidebarToggle.trigger('click');
 
-		expect(component.emitted('toggle:drawer')?.[0]).toBeTruthy();
+		expect(component.emitted('toggle:sidebar')?.[0]).toBeTruthy();
 	});
 });
diff --git a/app/src/views/private/components/header-bar/header-bar.vue b/app/src/views/private/components/header-bar/header-bar.vue
index fea44c6f36..1481112d62 100644
--- a/app/src/views/private/components/header-bar/header-bar.vue
+++ b/app/src/views/private/components/header-bar/header-bar.vue
@@ -26,7 +26,7 @@
 		<div class="spacer" />
 
 		<slot name="actions:prepend" />
-		<header-bar-actions @toggle:drawer="$emit('toggle:drawer')">
+		<header-bar-actions @toggle:sidebar="$emit('toggle:sidebar')">
 			<slot name="actions" />
 		</header-bar-actions>
 		<slot name="actions:append" />
@@ -169,7 +169,7 @@ export default defineComponent({
 		flex-grow: 1;
 	}
 
-	.drawer-toggle {
+	.sidebar-toggle {
 		flex-shrink: 0;
 		margin-left: 8px;
 
diff --git a/app/src/views/private/components/header-bar/readme.md b/app/src/views/private/components/header-bar/readme.md
index 5dd25628a7..4849844192 100644
--- a/app/src/views/private/components/header-bar/readme.md
+++ b/app/src/views/private/components/header-bar/readme.md
@@ -43,7 +43,7 @@ put any view critical actions in this slot.
 | Event           | Description                              | Value |
 |-----------------|------------------------------------------|-------|
 | `toggle:nav`    | When the nav toggle button is clicked    | --    |
-| `toggle:drawer` | When the drawer toggle button is clicked | --    |
+| `toggle:sidebar` | When the sidebar toggle button is clicked | --    |
 
 ## CSS Variables
 n/a
diff --git a/app/src/views/private/components/image-editor/image-editor.vue b/app/src/views/private/components/image-editor/image-editor.vue
index 5fa96c1958..0479664a6e 100644
--- a/app/src/views/private/components/image-editor/image-editor.vue
+++ b/app/src/views/private/components/image-editor/image-editor.vue
@@ -1,10 +1,10 @@
 <template>
-	<v-modal v-model="_active" class="modal" :title="$t('editing_image')" persistent no-padding @esc="_active = false">
+	<v-drawer v-model="_active" class="modal" :title="$t('editing_image')" persistent @cancel="_active = false">
 		<template #activator="activatorBinding">
 			<slot name="activator" v-bind="activatorBinding" />
 		</template>
 
-		<template #header:append>
+		<template #subtitle>
 			<span class="warning">{{ $t('changes_are_immediate_and_permanent') }}</span>
 		</template>
 
@@ -96,21 +96,22 @@
 			</div>
 		</div>
 
-		<template #footer="{ close }">
+		<template #actions:prepend>
 			<div class="dimensions" v-if="imageData">
-				<v-icon name="info_outline" />
 				{{ $n(imageData.width) }}x{{ $n(imageData.height) }}
 				<template v-if="imageData.width !== newDimensions.width || imageData.height !== newDimensions.height">
 					->
 					{{ $n(newDimensions.width) }}x{{ $n(newDimensions.height) }}
 				</template>
 			</div>
-
-			<div class="spacer" />
-			<v-button @click="close" secondary>{{ $t('cancel') }}</v-button>
-			<v-button @click="save" :loading="saving">{{ $t('save') }}</v-button>
 		</template>
-	</v-modal>
+
+		<template #actions>
+			<v-button @click="save" :loading="saving" icon rounded v-tooltip.bottom="$t('save')">
+				<v-icon name="check" />
+			</v-button>
+		</template>
+	</v-drawer>
 </template>
 
 <script lang="ts">
@@ -425,13 +426,13 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .modal {
-	--v-modal-content-padding-small: 0px;
-	--v-modal-content-padding: 0px;
+	--v-drawer-content-padding-small: 0px;
+	--v-drawer-content-padding: 0px;
 }
 
 .editor-container {
 	width: 100%;
-	height: 100%;
+	height: calc(100% - (65px + 24px + 24px)); // header height + 2x margin
 	overflow: hidden;
 	background-color: var(--background-subdued);
 
@@ -475,6 +476,7 @@ export default defineComponent({
 }
 
 .dimensions {
+	margin-right: 12px;
 	color: var(--foreground-subdued);
 	font-feature-settings: 'tnum';
 }
diff --git a/app/src/views/private/components/layout-drawer-detail/index.ts b/app/src/views/private/components/layout-drawer-detail/index.ts
deleted file mode 100644
index ae9cf53b4d..0000000000
--- a/app/src/views/private/components/layout-drawer-detail/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import LayoutDrawerDetail from './layout-drawer-detail.vue';
-
-export { LayoutDrawerDetail };
-export default LayoutDrawerDetail;
diff --git a/app/src/views/private/components/layout-sidebar-detail/index.ts b/app/src/views/private/components/layout-sidebar-detail/index.ts
new file mode 100644
index 0000000000..b6e404ba4f
--- /dev/null
+++ b/app/src/views/private/components/layout-sidebar-detail/index.ts
@@ -0,0 +1,4 @@
+import LayoutSidebarDetail from './layout-sidebar-detail.vue';
+
+export { LayoutSidebarDetail };
+export default LayoutSidebarDetail;
diff --git a/app/src/views/private/components/layout-drawer-detail/layout-drawer-detail.vue b/app/src/views/private/components/layout-sidebar-detail/layout-sidebar-detail.vue
similarity index 94%
rename from app/src/views/private/components/layout-drawer-detail/layout-drawer-detail.vue
rename to app/src/views/private/components/layout-sidebar-detail/layout-sidebar-detail.vue
index 01be008d31..76a5e2e181 100644
--- a/app/src/views/private/components/layout-drawer-detail/layout-drawer-detail.vue
+++ b/app/src/views/private/components/layout-sidebar-detail/layout-sidebar-detail.vue
@@ -1,5 +1,5 @@
 <template>
-	<drawer-detail icon="layers" :title="$t('layout_options')">
+	<sidebar-detail icon="layers" :title="$t('layout_options')">
 		<div class="layout-options">
 			<div class="field">
 				<div class="type-label">{{ $t('layout') }}</div>
@@ -12,7 +12,7 @@
 
 			<portal-target name="layout-options" class="portal-contents" />
 		</div>
-	</drawer-detail>
+	</sidebar-detail>
 </template>
 
 <script lang="ts">
diff --git a/app/src/views/private/components/modal-collection/index.ts b/app/src/views/private/components/modal-collection/index.ts
deleted file mode 100644
index 6dcda1e3c7..0000000000
--- a/app/src/views/private/components/modal-collection/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import ModalCollection from './modal-collection.vue';
-
-export { ModalCollection };
-export default ModalCollection;
diff --git a/app/src/views/private/components/modal-item/index.ts b/app/src/views/private/components/modal-item/index.ts
deleted file mode 100644
index 63677ebcd9..0000000000
--- a/app/src/views/private/components/modal-item/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import ModalItem from './modal-item.vue';
-
-export { ModalItem };
-export default ModalItem;
diff --git a/app/src/views/private/components/notifications-preview/notifications-preview.story.ts b/app/src/views/private/components/notifications-preview/notifications-preview.story.ts
index 34ee398a0d..39456baec9 100644
--- a/app/src/views/private/components/notifications-preview/notifications-preview.story.ts
+++ b/app/src/views/private/components/notifications-preview/notifications-preview.story.ts
@@ -2,7 +2,7 @@ import readme from './readme.md';
 import { defineComponent, ref } from '@vue/composition-api';
 import NotificationsPreview from './notifications-preview.vue';
 import NotificationItem from '../notification-item/';
-import DrawerButton from '../drawer-button/';
+import SidebarButton from '../sidebar-button/';
 import { NotificationRaw } from '@/types';
 import { i18n } from '@/lang';
 import withPadding from '../../../../../.storybook/decorators/with-padding';
@@ -47,13 +47,13 @@ export const basic = () =>
 	defineComponent({
 		i18n,
 		router: new VueRouter(),
-		components: { NotificationsPreview, NotificationItem, DrawerButton },
+		components: { NotificationsPreview, NotificationItem, SidebarButton },
 		setup() {
 			const notificationsStore = useNotificationsStore({});
 			const active = ref(false);
 
 			const appStore = useAppStore({});
-			appStore.state.drawerOpen = true;
+			appStore.state.sidebarOpen = true;
 
 			return { add, active };
 
diff --git a/app/src/views/private/components/notifications-preview/notifications-preview.vue b/app/src/views/private/components/notifications-preview/notifications-preview.vue
index efbe473682..8cd1471bcc 100644
--- a/app/src/views/private/components/notifications-preview/notifications-preview.vue
+++ b/app/src/views/private/components/notifications-preview/notifications-preview.vue
@@ -17,7 +17,7 @@
 			</div>
 		</transition-expand>
 
-		<drawer-button
+		<sidebar-button
 			:active="active"
 			@click="$emit('input', !active)"
 			v-tooltip.left="$t('notifications')"
@@ -25,23 +25,23 @@
 			icon="notifications"
 		>
 			{{ $t('notifications') }}
-		</drawer-button>
+		</sidebar-button>
 	</div>
 </template>
 
 <script lang="ts">
 import { defineComponent, computed, ref, watch } from '@vue/composition-api';
-import DrawerButton from '../drawer-button';
+import SidebarButton from '../sidebar-button';
 import NotificationItem from '../notification-item';
 import { useNotificationsStore } from '@/stores/';
 
 export default defineComponent({
-	components: { DrawerButton, NotificationItem },
+	components: { SidebarButton, NotificationItem },
 	model: {
 		prop: 'active',
 	},
 	props: {
-		drawerOpen: {
+		sidebarOpen: {
 			type: Boolean,
 			default: false,
 		},
@@ -82,7 +82,7 @@ export default defineComponent({
 	width: 100%;
 }
 
-.drawer-button {
+.sidebar-button {
 	background-color: var(--background-normal-alt);
 }
 
diff --git a/app/src/views/private/components/revisions-drawer-detail/readme.md b/app/src/views/private/components/revisions-drawer-detail/readme.md
index 3ef03bfc73..77250d016e 100644
--- a/app/src/views/private/components/revisions-drawer-detail/readme.md
+++ b/app/src/views/private/components/revisions-drawer-detail/readme.md
@@ -1,9 +1,9 @@
-# Activity Drawer
+# Activity Sidebar
 
-Renders an activity timeline in a drawer section meant to be used in the drawer sidebar.
+Renders an activity timeline in a sidebar section meant to be used in the sidebar sidebar.
 
 ## Usage
 
 ```html
-<activity-drawer-detail collection="authors" primary-key="15" />
+<activity-sidebar-detail collection="authors" primary-key="15" />
 ```
diff --git a/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-detail.vue b/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-detail.vue
index 15fbbb8256..757efa1ee8 100644
--- a/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-detail.vue
+++ b/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-detail.vue
@@ -1,5 +1,5 @@
 <template>
-	<drawer-detail
+	<sidebar-detail
 		:title="$t('revisions')"
 		icon="change_history"
 		:badge="!loading && revisions ? revisions.length : null"
@@ -26,14 +26,14 @@
 			</div>
 		</template>
 
-		<revisions-modal
+		<revisions-drawer
 			v-if="revisions"
 			:revisions="revisions"
 			:current.sync="modalCurrentRevision"
 			:active.sync="modalActive"
 			@revert="onRevert"
 		/>
-	</drawer-detail>
+	</sidebar-detail>
 </template>
 
 <script lang="ts">
@@ -47,10 +47,10 @@ import { TranslateResult } from 'vue-i18n';
 import i18n from '@/lang';
 import formatLocalized from '@/utils/localized-format';
 import RevisionItem from './revision-item.vue';
-import RevisionsModal from './revisions-modal.vue';
+import RevisionsDrawer from './revisions-drawer.vue';
 
 export default defineComponent({
-	components: { RevisionItem, RevisionsModal },
+	components: { RevisionItem, RevisionsDrawer },
 	props: {
 		collection: {
 			type: String,
@@ -191,7 +191,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.drawer-detail {
+.sidebar-detail {
 	--v-badge-color: var(--background-normal);
 	--v-badge-background-color: var(--foreground-normal);
 }
diff --git a/app/src/views/private/components/revisions-drawer-detail/revisions-modal-picker.vue b/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-picker.vue
similarity index 100%
rename from app/src/views/private/components/revisions-drawer-detail/revisions-modal-picker.vue
rename to app/src/views/private/components/revisions-drawer-detail/revisions-drawer-picker.vue
diff --git a/app/src/views/private/components/revisions-drawer-detail/revisions-modal-preview.vue b/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-preview.vue
similarity index 69%
rename from app/src/views/private/components/revisions-drawer-detail/revisions-modal-preview.vue
rename to app/src/views/private/components/revisions-drawer-detail/revisions-drawer-preview.vue
index f535273d77..aa4ad78931 100644
--- a/app/src/views/private/components/revisions-drawer-detail/revisions-modal-preview.vue
+++ b/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-preview.vue
@@ -1,6 +1,11 @@
 <template>
 	<div>
-		<v-modal-heading :heading="$t('revision_post_update')" :subheading="$t('no_relational_data')" />
+		<v-notice type="info">
+			{{ $t('revision_post_update') }}
+			<br />
+			{{ $t('no_relational_data') }}
+		</v-notice>
+
 		<v-form
 			disabled
 			:collection="revision.collection"
@@ -23,3 +28,9 @@ export default defineComponent({
 	},
 });
 </script>
+
+<style lang="scss" scoped>
+.v-notice {
+	margin-bottom: 36px;
+}
+</style>
diff --git a/app/src/views/private/components/revisions-drawer-detail/revisions-modal-updates-change.vue b/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-updates-change.vue
similarity index 100%
rename from app/src/views/private/components/revisions-drawer-detail/revisions-modal-updates-change.vue
rename to app/src/views/private/components/revisions-drawer-detail/revisions-drawer-updates-change.vue
diff --git a/app/src/views/private/components/revisions-drawer-detail/revisions-modal-updates.vue b/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-updates.vue
similarity index 83%
rename from app/src/views/private/components/revisions-drawer-detail/revisions-modal-updates.vue
rename to app/src/views/private/components/revisions-drawer-detail/revisions-drawer-updates.vue
index b80d9aa515..7f79ca90bb 100644
--- a/app/src/views/private/components/revisions-drawer-detail/revisions-modal-updates.vue
+++ b/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-updates.vue
@@ -1,11 +1,15 @@
 <template>
 	<div class="updates">
-		<v-modal-heading :heading="$t('changes_made')" :subheading="$t('no_relational_data')" />
+		<v-notice type="info">
+			{{ $t('changes_made') }}
+			<br />
+			{{ $t('no_relational_data') }}
+		</v-notice>
 
 		<div class="change" v-for="change in changes" :key="change.name">
 			<div class="type-label">{{ change.name }}</div>
-			<revisions-modal-updates-change deleted :changes="change.changes" />
-			<revisions-modal-updates-change added :changes="change.changes" />
+			<revisions-drawer-updates-change deleted :changes="change.changes" />
+			<revisions-drawer-updates-change added :changes="change.changes" />
 		</div>
 	</div>
 </template>
@@ -15,10 +19,10 @@ import { defineComponent, PropType, computed } from '@vue/composition-api';
 import { Revision } from './types';
 import { useFieldsStore } from '@/stores';
 import { diffWordsWithSpace, diffJson, diffArrays } from 'diff';
-import RevisionsModalUpdatesChange from './revisions-modal-updates-change.vue';
+import RevisionsDrawerUpdatesChange from './revisions-drawer-updates-change.vue';
 
 export default defineComponent({
-	components: { RevisionsModalUpdatesChange },
+	components: { RevisionsDrawerUpdatesChange },
 	props: {
 		revision: {
 			type: Object as PropType<Revision>,
@@ -92,4 +96,8 @@ export default defineComponent({
 .change-line {
 	margin-bottom: 4px;
 }
+
+.v-notice {
+	margin-bottom: 36px;
+}
 </style>
diff --git a/app/src/views/private/components/revisions-drawer-detail/revisions-modal.vue b/app/src/views/private/components/revisions-drawer-detail/revisions-drawer.vue
similarity index 73%
rename from app/src/views/private/components/revisions-drawer-detail/revisions-modal.vue
rename to app/src/views/private/components/revisions-drawer-detail/revisions-drawer.vue
index a1b6ac71bd..1da32cf910 100644
--- a/app/src/views/private/components/revisions-drawer-detail/revisions-modal.vue
+++ b/app/src/views/private/components/revisions-drawer-detail/revisions-drawer.vue
@@ -1,8 +1,8 @@
 <template>
 	<div>
-		<v-modal v-model="_active" :title="$t('item_revision')" @esc="_active = false">
+		<v-drawer v-model="_active" :title="$t('item_revision')" @cancel="_active = false">
 			<template #subtitle>
-				<revisions-modal-picker :revisions="revisions" :current.sync="_current" />
+				<revisions-drawer-picker :revisions="revisions" :current.sync="_current" />
 			</template>
 
 			<template #sidebar>
@@ -14,21 +14,23 @@
 			</template>
 
 			<div class="content">
-				<revisions-modal-preview v-if="currentTab[0] === 'preview'" :revision="currentRevision" />
-				<revisions-modal-updates
+				<revisions-drawer-preview v-if="currentTab[0] === 'preview'" :revision="currentRevision" />
+				<revisions-drawer-updates
 					v-if="currentTab[0] === 'updates'"
 					:revision="currentRevision"
 					:revisions="revisions"
 				/>
 			</div>
 
-			<template #footer="{ close }">
-				<v-button @click="confirmRevert = true" class="revert">
-					{{ $t('revert') }}
+			<template #actions>
+				<v-button @click="confirmRevert = true" class="revert" icon rounded v-tooltip.bottom="$t('revert')">
+					<v-icon name="restore" />
+				</v-button>
+				<v-button @click="_active = false" icon rounded v-tooltip.bottom="$t('done')">
+					<v-icon name="check" />
 				</v-button>
-				<v-button @click="close">{{ $t('done') }}</v-button>
 			</template>
-		</v-modal>
+		</v-drawer>
 
 		<v-dialog v-model="confirmRevert" :persistent="reverting" @esc="confirmRevert = false">
 			<v-card>
@@ -52,13 +54,13 @@ import { defineComponent, PropType, computed, ref } from '@vue/composition-api';
 import useSync from '@/composables/use-sync';
 import { Revision } from './types';
 import i18n from '@/lang';
-import RevisionsModalPicker from './revisions-modal-picker.vue';
-import RevisionsModalPreview from './revisions-modal-preview.vue';
-import RevisionsModalUpdates from './revisions-modal-updates.vue';
+import RevisionsDrawerPicker from './revisions-drawer-picker.vue';
+import RevisionsDrawerPreview from './revisions-drawer-preview.vue';
+import RevisionsDrawerUpdates from './revisions-drawer-updates.vue';
 import api from '@/api';
 
 export default defineComponent({
-	components: { RevisionsModalPicker, RevisionsModalPreview, RevisionsModalUpdates },
+	components: { RevisionsDrawerPicker, RevisionsDrawerPreview, RevisionsDrawerUpdates },
 	props: {
 		revisions: {
 			type: Array as PropType<Revision[]>,
@@ -139,4 +141,10 @@ export default defineComponent({
 	--v-button-background-color: var(--warning);
 	--v-button-background-color-hover: var(--warning-125);
 }
+
+.content {
+	padding: var(--content-padding);
+	padding-top: 0;
+	padding-bottom: var(--content-padding);
+}
 </style>
diff --git a/app/src/views/private/components/revisions-drawer-detail/revisions-modal-current.vue b/app/src/views/private/components/revisions-drawer-detail/revisions-modal-current.vue
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/app/src/views/private/components/sidebar-button/index.ts b/app/src/views/private/components/sidebar-button/index.ts
new file mode 100644
index 0000000000..80d49fdf08
--- /dev/null
+++ b/app/src/views/private/components/sidebar-button/index.ts
@@ -0,0 +1,4 @@
+import SidebarButton from './sidebar-button.vue';
+
+export { SidebarButton };
+export default SidebarButton;
diff --git a/app/src/views/private/components/drawer-button/readme.md b/app/src/views/private/components/sidebar-button/readme.md
similarity index 81%
rename from app/src/views/private/components/drawer-button/readme.md
rename to app/src/views/private/components/sidebar-button/readme.md
index 21895de97c..094d8de540 100644
--- a/app/src/views/private/components/drawer-button/readme.md
+++ b/app/src/views/private/components/sidebar-button/readme.md
@@ -1,11 +1,11 @@
-# Drawer Button
+# Sidebar Button
 
-Looks the same as a drawer detail, but can be used as a button / router link.
+Looks the same as a sidebar detail, but can be used as a button / router link.
 
 ## Usage
 
 ```html
-<drawer-button icon="info">Close Sidebar</drawer-button>
+<sidebar-button icon="info">Close Sidebar</sidebar-button>
 ```
 
 ## Props
diff --git a/app/src/views/private/components/drawer-button/drawer-button.story.ts b/app/src/views/private/components/sidebar-button/sidebar-button.story.ts
similarity index 63%
rename from app/src/views/private/components/drawer-button/drawer-button.story.ts
rename to app/src/views/private/components/sidebar-button/sidebar-button.story.ts
index 44009414c9..a58f701c8f 100644
--- a/app/src/views/private/components/drawer-button/drawer-button.story.ts
+++ b/app/src/views/private/components/sidebar-button/sidebar-button.story.ts
@@ -5,10 +5,10 @@ import withPadding from '../../../../../.storybook/decorators/with-padding';
 import withAltColors from '../../../../../.storybook/decorators/with-alt-colors';
 import { useAppStore } from '@/stores';
 
-import DrawerButton from './drawer-button.vue';
+import SidebarButton from './sidebar-button.vue';
 
 export default {
-	title: 'Views / Private / Components / Drawer Button',
+	title: 'Views / Private / Components / Sidebar Button',
 	parameters: {
 		notes: markdown,
 	},
@@ -17,25 +17,25 @@ export default {
 
 export const basic = () =>
 	defineComponent({
-		components: { DrawerButton },
+		components: { SidebarButton },
 		props: {
-			drawerOpen: {
-				default: boolean('Drawer Open', true),
+			sidebarOpen: {
+				default: boolean('Sidebar Open', true),
 			},
 		},
 		setup(props) {
 			const appStore = useAppStore();
 
-			appStore.state.drawerOpen = props.drawerOpen;
+			appStore.state.sidebarOpen = props.sidebarOpen;
 
 			watch(
-				() => props.drawerOpen,
+				() => props.sidebarOpen,
 				(newOpen) => {
-					appStore.state.drawerOpen = newOpen;
+					appStore.state.sidebarOpen = newOpen;
 				}
 			);
 		},
 		template: `
-			<drawer-button icon="info">Close Drawer</drawer-button>
+			<sidebar-button icon="info">Close Sidebar</sidebar-button>
 		`,
 	});
diff --git a/app/src/views/private/components/drawer-button/drawer-button.test.ts b/app/src/views/private/components/sidebar-button/sidebar-button.test.ts
similarity index 61%
rename from app/src/views/private/components/drawer-button/drawer-button.test.ts
rename to app/src/views/private/components/sidebar-button/sidebar-button.test.ts
index 1cdcb4fd6d..5bcd204fc4 100644
--- a/app/src/views/private/components/drawer-button/drawer-button.test.ts
+++ b/app/src/views/private/components/sidebar-button/sidebar-button.test.ts
@@ -1,19 +1,19 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import VueCompositionAPI from '@vue/composition-api';
 import VIcon from '@/components/v-icon/';
-import DrawerButton from './drawer-button.vue';
+import SidebarButton from './sidebar-button.vue';
 import { useAppStore } from '@/stores';
 
 const localVue = createLocalVue();
 localVue.use(VueCompositionAPI);
 localVue.component('v-icon', VIcon);
 
-describe('Views / Private / Components / Drawer Button', () => {
-	it('Does not render the title when the drawer is closed', () => {
+describe('Views / Private / Components / Sidebar Button', () => {
+	it('Does not render the title when the sidebar is closed', () => {
 		const appStore = useAppStore();
 
-		appStore.state.drawerOpen = false;
-		const component = shallowMount(DrawerButton, {
+		appStore.state.sidebarOpen = false;
+		const component = shallowMount(SidebarButton, {
 			localVue,
 		});
 
diff --git a/app/src/views/private/components/drawer-button/drawer-button.vue b/app/src/views/private/components/sidebar-button/sidebar-button.vue
similarity index 87%
rename from app/src/views/private/components/drawer-button/drawer-button.vue
rename to app/src/views/private/components/sidebar-button/sidebar-button.vue
index b28f57b6eb..5a85a3f0de 100644
--- a/app/src/views/private/components/drawer-button/drawer-button.vue
+++ b/app/src/views/private/components/sidebar-button/sidebar-button.vue
@@ -1,6 +1,6 @@
 <template>
 	<component
-		class="drawer-button"
+		class="sidebar-button"
 		:is="to ? 'router-link' : 'button'"
 		:class="{ active }"
 		@click="$emit('click', $event)"
@@ -8,7 +8,7 @@
 		<div class="icon">
 			<v-icon :name="icon" outline />
 		</div>
-		<div class="title" v-if="drawerOpen">
+		<div class="title" v-if="sidebarOpen">
 			<slot />
 		</div>
 	</component>
@@ -35,15 +35,15 @@ export default defineComponent({
 	},
 	setup() {
 		const appStore = useAppStore();
-		const { drawerOpen } = toRefs(appStore.state);
+		const { sidebarOpen } = toRefs(appStore.state);
 
-		return { drawerOpen };
+		return { sidebarOpen };
 	},
 });
 </script>
 
 <style lang="scss" scoped>
-.drawer-button {
+.sidebar-button {
 	position: relative;
 	flex-shrink: 0;
 	width: 100%;
diff --git a/app/src/views/private/components/sidebar-detail-group/index.ts b/app/src/views/private/components/sidebar-detail-group/index.ts
new file mode 100644
index 0000000000..f24c5228a8
--- /dev/null
+++ b/app/src/views/private/components/sidebar-detail-group/index.ts
@@ -0,0 +1,4 @@
+import SidebarDetailGroup from './sidebar-detail-group.vue';
+
+export { SidebarDetailGroup };
+export default SidebarDetailGroup;
diff --git a/app/src/views/private/components/sidebar-detail-group/readme.md b/app/src/views/private/components/sidebar-detail-group/readme.md
new file mode 100644
index 0000000000..74530d1c4d
--- /dev/null
+++ b/app/src/views/private/components/sidebar-detail-group/readme.md
@@ -0,0 +1,39 @@
+# Sidebar Detail Group
+
+Used in the private view to manage the active state of [the nested `sidebar-detail` components](../sidebar-detail/).
+
+## Usage
+
+```html
+<sidebar-detail-group :sidebar-open="sidebarOpen">
+	<sidebar-detail icon="person" title="Users" >
+		<!-- section content -->
+	</sidebar-detail>
+	<sidebar-detail icon="settings" title="Settings" >
+		<!-- section content -->
+	</sidebar-detail>
+	<sidebar-detail icon="map" title="Routes" >
+		<!-- section content -->
+	</sidebar-detail>
+</sidebar-detail-group>
+```
+
+## Sidebar open state
+
+Once the sidebar closes, all open sidebar details should be closed. By watching the `sidebar-open` prop, we can dynamically close all details.
+
+## Props
+| Prop          | Description                                              | Default |
+|---------------|----------------------------------------------------------|---------|
+| `sidebar-open` | If the sidebar sidebar in the private view is open or not | `false` |
+
+## Slots
+| Slot      | Description |
+|-----------|-------------|
+| _default_ |             |
+
+## Events
+n/a
+
+## CSS Variables
+n/a
diff --git a/app/src/views/private/components/drawer-detail-group/drawer-detail-group.story.ts b/app/src/views/private/components/sidebar-detail-group/sidebar-detail-group.story.ts
similarity index 55%
rename from app/src/views/private/components/drawer-detail-group/drawer-detail-group.story.ts
rename to app/src/views/private/components/sidebar-detail-group/sidebar-detail-group.story.ts
index 987dc63045..dda3e3485a 100644
--- a/app/src/views/private/components/drawer-detail-group/drawer-detail-group.story.ts
+++ b/app/src/views/private/components/sidebar-detail-group/sidebar-detail-group.story.ts
@@ -4,12 +4,12 @@ import withPadding from '../../../../../.storybook/decorators/with-padding';
 import withAltColors from '../../../../../.storybook/decorators/with-alt-colors';
 
 import { defineComponent } from '@vue/composition-api';
-import DrawerDetailGroup from './drawer-detail-group.vue';
-import DrawerDetail from '../drawer-detail';
+import SidebarDetailGroup from './sidebar-detail-group.vue';
+import SidebarDetail from '../sidebar-detail';
 import { useAppStore } from '@/stores';
 
 export default {
-	title: 'Views / Private / Components / Drawer Detail Group',
+	title: 'Views / Private / Components / Sidebar Detail Group',
 	decorators: [withKnobs, withAltColors, withPadding],
 	parameters: {
 		notes: markdown,
@@ -18,26 +18,26 @@ export default {
 
 export const basic = () =>
 	defineComponent({
-		components: { DrawerDetailGroup, DrawerDetail },
+		components: { SidebarDetailGroup, SidebarDetail },
 		setup() {
 			const appStore = useAppStore({});
-			appStore.state.drawerOpen = false;
+			appStore.state.sidebarOpen = false;
 		},
 		template: `
-		<drawer-detail-group>
-			<drawer-detail icon="person" title="People">
+		<sidebar-detail-group>
+			<sidebar-detail icon="person" title="People">
 				Hi there!
-			</drawer-detail>
-			<drawer-detail icon="settings" title="Settings">
+			</sidebar-detail>
+			<sidebar-detail icon="settings" title="Settings">
 				These sections can be whatever you want them to be
-			</drawer-detail>
-			<drawer-detail icon="sentiment_satisfied_alt" title="Fun times">
+			</sidebar-detail>
+			<sidebar-detail icon="sentiment_satisfied_alt" title="Fun times">
 				This is a third section in the sidebar
-			</drawer-detail>
-			<drawer-detail icon="forum" title="Comments">
+			</sidebar-detail>
+			<sidebar-detail icon="forum" title="Comments">
 				These sections can hold any markup:
 
 				<v-input placeholder="I'm an input" />
-			</drawer-detail>
-		</drawer-detail-group>`,
+			</sidebar-detail>
+		</sidebar-detail-group>`,
 	});
diff --git a/app/src/views/private/components/drawer-detail-group/drawer-detail-group.test.ts b/app/src/views/private/components/sidebar-detail-group/sidebar-detail-group.test.ts
similarity index 59%
rename from app/src/views/private/components/drawer-detail-group/drawer-detail-group.test.ts
rename to app/src/views/private/components/sidebar-detail-group/sidebar-detail-group.test.ts
index e3a0ebd12f..84be109b1b 100644
--- a/app/src/views/private/components/drawer-detail-group/drawer-detail-group.test.ts
+++ b/app/src/views/private/components/sidebar-detail-group/sidebar-detail-group.test.ts
@@ -1,24 +1,24 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import VueCompositionAPI from '@vue/composition-api';
-import DrawerDetailGroup from './drawer-detail-group.vue';
+import SidebarDetailGroup from './sidebar-detail-group.vue';
 import VItemGroup from '@/components/v-item-group';
 
 const localVue = createLocalVue();
 localVue.use(VueCompositionAPI);
 localVue.component('v-item-group', VItemGroup);
 
-describe('Views / Private / Drawer Detail Group', () => {
-	it('Resets the opened child details when the drawer closes', async () => {
-		const component = shallowMount(DrawerDetailGroup, {
+describe('Views / Private / Sidebar Detail Group', () => {
+	it('Resets the opened child details when the sidebar closes', async () => {
+		const component = shallowMount(SidebarDetailGroup, {
 			localVue,
 			propsData: {
-				drawerOpen: true,
+				sidebarOpen: true,
 			},
 		});
 
 		(component.vm as any).openDetail = ['test'];
 
-		component.setProps({ drawerOpen: false });
+		component.setProps({ sidebarOpen: false });
 		await component.vm.$nextTick();
 		expect((component.vm as any).openDetail).toEqual([]);
 	});
diff --git a/app/src/views/private/components/drawer-detail-group/drawer-detail-group.vue b/app/src/views/private/components/sidebar-detail-group/sidebar-detail-group.vue
similarity index 75%
rename from app/src/views/private/components/drawer-detail-group/drawer-detail-group.vue
rename to app/src/views/private/components/sidebar-detail-group/sidebar-detail-group.vue
index 70be0ece27..b88f4d3ade 100644
--- a/app/src/views/private/components/drawer-detail-group/drawer-detail-group.vue
+++ b/app/src/views/private/components/sidebar-detail-group/sidebar-detail-group.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-item-group class="drawer-detail-group" v-model="openDetail" scope="drawer-detail">
+	<v-item-group class="sidebar-detail-group" v-model="openDetail" scope="sidebar-detail">
 		<slot />
 	</v-item-group>
 </template>
@@ -9,17 +9,17 @@ import { defineComponent, ref, watch } from '@vue/composition-api';
 
 export default defineComponent({
 	props: {
-		drawerOpen: {
+		sidebarOpen: {
 			type: Boolean,
 			default: false,
 		},
 	},
 	setup(props) {
-		// By syncing the opened item here, we can force close the module once the drawer closes
+		// By syncing the opened item here, we can force close the module once the sidebar closes
 		const openDetail = ref<string[]>([]);
 
 		watch(
-			() => props.drawerOpen,
+			() => props.sidebarOpen,
 			(newOpenState) => {
 				if (newOpenState === false) {
 					openDetail.value = [];
@@ -35,7 +35,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.drawer-detail-group {
+.sidebar-detail-group {
 	display: contents;
 }
 </style>
diff --git a/app/src/views/private/components/sidebar-detail/index.ts b/app/src/views/private/components/sidebar-detail/index.ts
new file mode 100644
index 0000000000..901c0e2f65
--- /dev/null
+++ b/app/src/views/private/components/sidebar-detail/index.ts
@@ -0,0 +1,4 @@
+import SidebarDetail from './sidebar-detail.vue';
+
+export { SidebarDetail };
+export default SidebarDetail;
diff --git a/app/src/views/private/components/drawer-detail/readme.md b/app/src/views/private/components/sidebar-detail/readme.md
similarity index 67%
rename from app/src/views/private/components/drawer-detail/readme.md
rename to app/src/views/private/components/sidebar-detail/readme.md
index 723c0700cf..74b16e03e5 100644
--- a/app/src/views/private/components/drawer-detail/readme.md
+++ b/app/src/views/private/components/sidebar-detail/readme.md
@@ -1,20 +1,20 @@
-# Drawer Detail
+# Sidebar Detail
 
-Meant to be used in the drawer sidebar of the private view. Is used to register multiple sections in the drawer.
+Meant to be used in the sidebar sidebar of the private view. Is used to register multiple sections in the sidebar.
 
 ## Usage
 
 ```html
-<drawer-detail icon="person" title="Users" >
+<sidebar-detail icon="person" title="Users" >
 	<p>Users:</p>
 	<ul>
 		<li>Admin</li>
 	</ul>
-</drawer-detail>
+</sidebar-detail>
 ```
 
-The active state is managed by the same logic as v-item-group. The drawer detail state is managed by
-the private `drawer-detail-group` component in `private-view`.
+The active state is managed by the same logic as v-item-group. The sidebar detail state is managed by
+the private `sidebar-detail-group` component in `private-view`.
 
 ## Props
 | Prop     | Description                               | Default    |
diff --git a/app/src/views/private/components/drawer-detail/drawer-detail.story.ts b/app/src/views/private/components/sidebar-detail/sidebar-detail.story.ts
similarity index 78%
rename from app/src/views/private/components/drawer-detail/drawer-detail.story.ts
rename to app/src/views/private/components/sidebar-detail/sidebar-detail.story.ts
index 24cfad6fa0..bb626ffea4 100644
--- a/app/src/views/private/components/drawer-detail/drawer-detail.story.ts
+++ b/app/src/views/private/components/sidebar-detail/sidebar-detail.story.ts
@@ -6,7 +6,7 @@ import withAltColors from '../../../../../.storybook/decorators/with-alt-colors'
 import { useAppStore } from '@/stores';
 
 export default {
-	title: 'Views / Private / Components / Drawer Detail',
+	title: 'Views / Private / Components / Sidebar Detail',
 	decorators: [withKnobs, withAltColors, withPadding],
 	parameters: {
 		notes: markdown,
@@ -16,8 +16,8 @@ export default {
 export const basic = () =>
 	defineComponent({
 		props: {
-			drawerOpen: {
-				default: boolean('Drawer open', true),
+			sidebarOpen: {
+				default: boolean('Sidebar open', true),
 			},
 			icon: {
 				default: text('Icon', 'person'),
@@ -30,10 +30,10 @@ export const basic = () =>
 			const open = ref(false);
 			const appStore = useAppStore();
 
-			appStore.state.drawerOpen = true;
+			appStore.state.sidebarOpen = true;
 
 			watch(
-				() => props.drawerOpen,
+				() => props.sidebarOpen,
 				(newOpen) => (open.value = newOpen)
 			);
 
@@ -44,8 +44,8 @@ export const basic = () =>
 			});
 		},
 		template: `
-			<drawer-detail :title="title" :icon="icon">
+			<sidebar-detail :title="title" :icon="icon">
 				Content
-			</drawer-detail>
+			</sidebar-detail>
 		`,
 	});
diff --git a/app/src/views/private/components/drawer-detail/drawer-detail.test.ts b/app/src/views/private/components/sidebar-detail/sidebar-detail.test.ts
similarity index 86%
rename from app/src/views/private/components/drawer-detail/drawer-detail.test.ts
rename to app/src/views/private/components/sidebar-detail/sidebar-detail.test.ts
index b8a7480a97..2d75e6c344 100644
--- a/app/src/views/private/components/drawer-detail/drawer-detail.test.ts
+++ b/app/src/views/private/components/sidebar-detail/sidebar-detail.test.ts
@@ -1,6 +1,6 @@
 import { mount, createLocalVue } from '@vue/test-utils';
 import VueCompositionAPI, { ref } from '@vue/composition-api';
-import DrawerDetail from './drawer-detail.vue';
+import SidebarDetail from './sidebar-detail.vue';
 import * as GroupableComposable from '@/composables/groupable/groupable';
 import VIcon from '@/components/v-icon';
 import VDivider from '@/components/v-divider';
@@ -15,14 +15,14 @@ localVue.component('transition-expand', TransitionExpand);
 localVue.component('v-divider', VDivider);
 localVue.component('v-badge', VBadge);
 
-describe('Drawer Detail', () => {
+describe('Sidebar Detail', () => {
 	it('Uses the useGroupable composition', () => {
 		jest.spyOn(GroupableComposable, 'useGroupable');
 
 		const appStore = useAppStore({});
-		appStore.state.drawerOpen = false;
+		appStore.state.sidebarOpen = false;
 
-		mount(DrawerDetail, {
+		mount(SidebarDetail, {
 			localVue,
 			propsData: {
 				icon: 'person',
@@ -43,9 +43,9 @@ describe('Drawer Detail', () => {
 		jest.spyOn(GroupableComposable, 'useGroupable');
 
 		const appStore = useAppStore({});
-		appStore.state.drawerOpen = false;
+		appStore.state.sidebarOpen = false;
 
-		mount(DrawerDetail, {
+		mount(SidebarDetail, {
 			localVue,
 			propsData: {
 				icon: 'person',
@@ -59,6 +59,6 @@ describe('Drawer Detail', () => {
 				},
 			},
 		});
-		expect(GroupableComposable.useGroupable).toHaveBeenCalledWith('Users', 'drawer-detail');
+		expect(GroupableComposable.useGroupable).toHaveBeenCalledWith('Users', 'sidebar-detail');
 	});
 });
diff --git a/app/src/views/private/components/drawer-detail/drawer-detail.vue b/app/src/views/private/components/sidebar-detail/sidebar-detail.vue
similarity index 76%
rename from app/src/views/private/components/drawer-detail/drawer-detail.vue
rename to app/src/views/private/components/sidebar-detail/sidebar-detail.vue
index d9adffca68..f9c5246f28 100644
--- a/app/src/views/private/components/drawer-detail/drawer-detail.vue
+++ b/app/src/views/private/components/sidebar-detail/sidebar-detail.vue
@@ -1,16 +1,16 @@
 <template>
-	<div class="drawer-detail" :class="{ open: drawerOpen }">
+	<div class="sidebar-detail" :class="{ open: sidebarOpen }">
 		<button class="toggle" @click="toggle" :class="{ open: active }">
 			<div class="icon">
 				<v-badge bordered :value="badge" :disabled="!badge">
 					<v-icon :name="icon" outline />
 				</v-badge>
 			</div>
-			<div class="title" v-show="drawerOpen">
+			<div class="title" v-show="sidebarOpen">
 				{{ title }}
 			</div>
 		</button>
-		<div v-if="close" v-show="drawerOpen" class="close" @click="drawerOpen = false">
+		<div v-if="close" v-show="sidebarOpen" class="close" @click="sidebarOpen = false">
 			<v-icon name="close" />
 		</div>
 		<transition-expand class="scroll-container">
@@ -50,25 +50,25 @@ export default defineComponent({
 	setup(props) {
 		const { active, toggle } = useGroupable({
 			value: props.title,
-			group: 'drawer-detail',
+			group: 'sidebar-detail',
 		});
 		const appStore = useAppStore();
-		const { drawerOpen } = toRefs(appStore.state);
-		return { active, toggle, drawerOpen };
+		const { sidebarOpen } = toRefs(appStore.state);
+		return { active, toggle, sidebarOpen };
 	},
 });
 </script>
 
 <style>
 body {
-	--drawer-detail-icon-color: var(--foreground-normal);
-	--drawer-detail-color: var(--foreground-normal);
-	--drawer-detail-color-active: var(--primary);
+	--sidebar-detail-icon-color: var(--foreground-normal);
+	--sidebar-detail-color: var(--foreground-normal);
+	--sidebar-detail-color-active: var(--primary);
 }
 </style>
 
 <style lang="scss" scoped>
-.drawer-detail {
+.sidebar-detail {
 	--v-badge-offset-x: 2px;
 	--v-badge-offset-y: 4px;
 	--v-badge-border-color: var(--background-normal-alt);
@@ -80,11 +80,11 @@ body {
 		flex-shrink: 0;
 		width: 100%;
 		height: 64px;
-		color: var(--drawer-detail-color);
+		color: var(--sidebar-detail-color);
 		background-color: var(--background-normal-alt);
 
 		.icon {
-			--v-icon-color: var(--drawer-detail-icon-color);
+			--v-icon-color: var(--sidebar-detail-icon-color);
 
 			display: flex;
 			align-items: center;
@@ -95,9 +95,9 @@ body {
 
 		&.open,
 		&:hover {
-			color: var(--drawer-detail-color-active);
+			color: var(--sidebar-detail-color-active);
 			.icon {
-				--v-icon-color: var(--drawer-detail-color-active);
+				--v-icon-color: var(--sidebar-detail-color-active);
 			}
 		}
 	}
@@ -121,7 +121,7 @@ body {
 		}
 
 		&:hover {
-			color: var(--drawer-detail-color-active);
+			color: var(--sidebar-detail-color-active);
 		}
 	}
 
@@ -152,8 +152,8 @@ body {
 		padding: 16px;
 		::v-deep {
 			.page-description {
-				color: var(--foreground-subdued);
 				margin-bottom: 8px;
+				color: var(--foreground-subdued);
 
 				a {
 					color: var(--primary);
diff --git a/app/src/views/private/private-view.vue b/app/src/views/private/private-view.vue
index 16c7306b28..1340e7b011 100644
--- a/app/src/views/private/private-view.vue
+++ b/app/src/views/private/private-view.vue
@@ -11,7 +11,7 @@
 			</div>
 		</aside>
 		<div class="content" ref="contentEl">
-			<header-bar :title="title" @toggle:drawer="drawerOpen = !drawerOpen" @toggle:nav="navOpen = !navOpen">
+			<header-bar :title="title" @toggle:sidebar="sidebarOpen = !sidebarOpen" @toggle:nav="navOpen = !navOpen">
 				<template v-for="(_, scopedSlotName) in $scopedSlots" v-slot:[scopedSlotName]="slotData">
 					<slot :name="scopedSlotName" v-bind="slotData" />
 				</template>
@@ -23,36 +23,36 @@
 		</div>
 		<aside
 			role="contentinfo"
-			class="drawer alt-colors"
-			aria-label="Module Drawer"
-			:class="{ 'is-open': drawerOpen }"
-			@click="openDrawer"
+			class="sidebar alt-colors"
+			aria-label="Module Sidebar"
+			:class="{ 'is-open': sidebarOpen }"
+			@click="openSidebar"
 		>
 			<div class="flex-container">
-				<drawer-detail-group :drawer-open="drawerOpen">
-					<slot name="drawer" />
-				</drawer-detail-group>
+				<sidebar-detail-group :sidebar-open="sidebarOpen">
+					<slot name="sidebar" />
+				</sidebar-detail-group>
 
 				<div class="spacer" />
 
-				<notifications-preview v-model="notificationsPreviewActive" :drawer-open="drawerOpen" />
+				<notifications-preview v-model="notificationsPreviewActive" :sidebar-open="sidebarOpen" />
 			</div>
 		</aside>
 
 		<v-overlay class="nav-overlay" :active="navOpen" @click="navOpen = false" />
-		<v-overlay class="drawer-overlay" :active="drawerOpen" @click="drawerOpen = false" />
+		<v-overlay class="sidebar-overlay" :active="sidebarOpen" @click="sidebarOpen = false" />
 
-		<notifications-group v-if="notificationsPreviewActive === false" :dense="drawerOpen === false" />
+		<notifications-group v-if="notificationsPreviewActive === false" :dense="sidebarOpen === false" />
 	</div>
 </template>
 
 <script lang="ts">
 import { defineComponent, ref, provide, toRefs, computed } from '@vue/composition-api';
 import ModuleBar from './components/module-bar/';
-import DrawerDetailGroup from './components/drawer-detail-group/';
+import SidebarDetailGroup from './components/sidebar-detail-group/';
 import HeaderBar from './components/header-bar';
 import ProjectInfo from './components/project-info';
-import DrawerButton from './components/drawer-button/';
+import SidebarButton from './components/sidebar-button/';
 import NotificationsGroup from './components/notifications-group/';
 import NotificationsPreview from './components/notifications-preview/';
 import { useUserStore, useAppStore } from '@/stores';
@@ -62,10 +62,10 @@ import emitter, { Events } from '@/events';
 export default defineComponent({
 	components: {
 		ModuleBar,
-		DrawerDetailGroup,
+		SidebarDetailGroup,
 		HeaderBar,
 		ProjectInfo,
-		DrawerButton,
+		SidebarButton,
 		NotificationsGroup,
 		NotificationsPreview,
 	},
@@ -83,7 +83,7 @@ export default defineComponent({
 
 		const notificationsPreviewActive = ref(false);
 
-		const { drawerOpen } = toRefs(appStore.state);
+		const { sidebarOpen } = toRefs(appStore.state);
 
 		const theme = computed(() => {
 			return userStore.state.currentUser?.theme || 'auto';
@@ -95,14 +95,14 @@ export default defineComponent({
 			navOpen,
 			contentEl,
 			theme,
-			drawerOpen,
-			openDrawer,
+			sidebarOpen,
+			openSidebar,
 			notificationsPreviewActive,
 		};
 
-		function openDrawer(event: PointerEvent) {
+		function openSidebar(event: PointerEvent) {
 			if (event.target && (event.target as HTMLElement).classList.contains('close') === false) {
-				drawerOpen.value = true;
+				sidebarOpen.value = true;
 			}
 		}
 	},
@@ -129,7 +129,7 @@ export default defineComponent({
 		}
 	}
 
-	.drawer-overlay {
+	.sidebar-overlay {
 		--v-overlay-z-index: 29;
 
 		@include breakpoint(large) {
@@ -185,7 +185,7 @@ export default defineComponent({
 			display: contents;
 		}
 
-		// Offset for partially visible drawer
+		// Offset for partially visible sidebar
 		@include breakpoint(medium) {
 			margin-right: 64px;
 		}
@@ -195,7 +195,7 @@ export default defineComponent({
 		}
 	}
 
-	.drawer {
+	.sidebar {
 		position: fixed;
 		top: 0;
 		right: 0;