diff --git a/app/src/displays/format-title/format-title.story.ts b/app/src/displays/format-title/format-title.story.ts
deleted file mode 100644
index 5ec418ca3b..0000000000
--- a/app/src/displays/format-title/format-title.story.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { withKnobs, text } from '@storybook/addon-knobs';
-import readme from './readme.md';
-import withPadding from '../../../.storybook/decorators/with-padding';
-import { defineComponent, computed } from '@vue/composition-api';
-import handler from './handler';
-
-export default {
-	title: 'Displays / Format Title',
-	parameters: { notes: readme },
-	decorators: [withPadding, withKnobs],
-};
-
-export const basic = () =>
-	defineComponent({
-		props: {
-			val: {
-				default: text('Value', 'hello-world'),
-			},
-		},
-		setup(props) {
-			const value = computed<string | null>(() => handler(props.val, null, { type: 'string' }));
-			return { value };
-		},
-		template: `
-			<div>{{ value }}</div>
-		`,
-	});
diff --git a/app/src/displays/format-title/format-title.test.ts b/app/src/displays/format-title/format-title.test.ts
deleted file mode 100644
index c14a3c795f..0000000000
--- a/app/src/displays/format-title/format-title.test.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import handler from './handler';
-import formatTitle from '@directus/format-title';
-
-jest.mock('@directus/format-title');
-
-describe('Displays / Format Title', () => {
-	it('Runs the value through the title formatter', () => {
-		handler('test', null, { type: 'string' });
-		expect(formatTitle).toHaveBeenCalledWith('test');
-	});
-
-	it('Does not pass the value if the value is falsy', () => {
-		handler(null, null, { type: 'string' });
-		expect(formatTitle).not.toHaveBeenCalledWith(null);
-	});
-});
diff --git a/app/src/displays/format-title/handler.ts b/app/src/displays/format-title/handler.ts
deleted file mode 100644
index 3336fc4d1d..0000000000
--- a/app/src/displays/format-title/handler.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import formatTitle from '@directus/format-title';
-import { DisplayHandlerFunction } from '@/displays/types';
-
-const handler: DisplayHandlerFunction = (value) => (value ? formatTitle(value) : null);
-export default handler;
diff --git a/app/src/displays/format-title/index.ts b/app/src/displays/format-title/index.ts
deleted file mode 100644
index 32729f00f2..0000000000
--- a/app/src/displays/format-title/index.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { defineDisplay } from '@/displays/define';
-import handler from './handler';
-
-export default defineDisplay({
-	id: 'format-title',
-	name: 'Format Title',
-	icon: 'text_format',
-	handler: handler,
-	options: null,
-	types: ['string'],
-});
diff --git a/app/src/displays/format-title/readme.md b/app/src/displays/format-title/readme.md
deleted file mode 100644
index 9996b5a74d..0000000000
--- a/app/src/displays/format-title/readme.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# Format Title (Function)
-
-Runs the raw database value through the [Title Formatter](https://github.com/directus/format-title/)
-and displays the result.
-
diff --git a/app/src/displays/formatted-text/formatted-text.story.ts b/app/src/displays/formatted-text/formatted-text.story.ts
deleted file mode 100644
index ed94d362f1..0000000000
--- a/app/src/displays/formatted-text/formatted-text.story.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import withPadding from '../../../.storybook/decorators/with-padding';
-import { withKnobs, text, select, boolean } from '@storybook/addon-knobs';
-import readme from './readme.md';
-import { defineComponent } from '@vue/composition-api';
-
-export default {
-	title: 'Displays / Formatted Text',
-	decorators: [withPadding, withKnobs],
-	parameters: {
-		notes: readme,
-	},
-};
-
-export const basic = () =>
-	defineComponent({
-		props: {
-			value: {
-				default: text('Value', 'This is the value of the field'),
-			},
-			bold: {
-				default: boolean('Bold', false),
-			},
-			subdued: {
-				default: boolean('Subdued', false),
-			},
-			font: {
-				default: select('Font', ['sans-serif', 'serif', 'monospace'], 'sans-serif'),
-			},
-		},
-		template: `
-			<display-formatted-text
-				:value="value"
-				:bold="bold"
-				:subdued="subdued"
-				:font="font"
-			/>
-		`,
-	});
diff --git a/app/src/displays/formatted-text/formatted-text.test.ts b/app/src/displays/formatted-text/formatted-text.test.ts
deleted file mode 100644
index 485aa894b9..0000000000
--- a/app/src/displays/formatted-text/formatted-text.test.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import DisplayFormattedText from './formatted-text.vue';
-import { createLocalVue, shallowMount } from '@vue/test-utils';
-import VueCompositionAPI from '@vue/composition-api';
-
-const localVue = createLocalVue();
-localVue.use(VueCompositionAPI);
-
-describe('Displays / Formatted Text', () => {
-	it('Strips out HTML', () => {
-		const component = shallowMount(DisplayFormattedText, {
-			localVue,
-			propsData: {
-				value: '<p>Test</p>',
-			},
-		});
-
-		expect((component.vm as any).displayValue).toBe('Test');
-		expect(component.text()).toBe('Test');
-	});
-});
diff --git a/app/src/displays/formatted-text/index.ts b/app/src/displays/formatted-text/index.ts
deleted file mode 100644
index 26bf5fc910..0000000000
--- a/app/src/displays/formatted-text/index.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { defineDisplay } from '@/displays/define';
-import DisplayFormattedText from './formatted-text.vue';
-
-export default defineDisplay(({ i18n }) => ({
-	id: 'formatted-text',
-	name: i18n.t('formatted_text'),
-	types: ['string', 'text'],
-	icon: 'text_format',
-	handler: DisplayFormattedText,
-	options: [
-		{
-			field: 'bold',
-			name: i18n.t('bold'),
-			width: 'half',
-			interface: 'toggle',
-		},
-		{
-			field: 'subdued',
-			name: i18n.t('subdued'),
-			width: 'half',
-			interface: 'toggle',
-		},
-		{
-			field: 'font',
-			name: i18n.t('font'),
-			width: 'half',
-			interface: 'dropdown',
-			options: {
-				choices: [
-					{ text: i18n.t('sans_serif'), value: 'sans-serif' },
-					{ text: i18n.t('serif'), value: 'serif' },
-					{ text: i18n.t('monospace'), value: 'monospace' },
-				],
-			},
-		},
-	],
-}));
diff --git a/app/src/displays/formatted-text/formatted-text.vue b/app/src/displays/formatted-value/formatted-value.vue
similarity index 66%
rename from app/src/displays/formatted-text/formatted-text.vue
rename to app/src/displays/formatted-value/formatted-value.vue
index 8c2fdbf74f..8d1da01878 100644
--- a/app/src/displays/formatted-text/formatted-text.vue
+++ b/app/src/displays/formatted-value/formatted-value.vue
@@ -1,20 +1,14 @@
 <template>
-	<span
-		class="display-formatted-text"
-		:class="[
-			{
-				bold,
-				subdued,
-			},
-			font,
-		]"
-	>
+	<value-null v-if="!displayValue" />
+
+	<span v-else class="display-formatted-text" :class="[{ bold }, font]" :style="{ color }">
 		{{ displayValue }}
 	</span>
 </template>
 
 <script lang="ts">
 import { defineComponent, computed } from '@vue/composition-api';
+import formatTitle from '@directus/format-title';
 
 export default defineComponent({
 	props: {
@@ -22,17 +16,17 @@ export default defineComponent({
 			type: String,
 			default: null,
 		},
-		interfaceOptions: {
-			type: Object,
-			default: null,
+		formatTitle: {
+			type: Boolean,
+			default: true,
 		},
 		bold: {
 			type: Boolean,
 			default: false,
 		},
-		subdued: {
-			type: Boolean,
-			default: false,
+		color: {
+			type: String,
+			default: null,
 		},
 		font: {
 			type: String,
@@ -41,7 +35,17 @@ export default defineComponent({
 		},
 	},
 	setup(props) {
-		const displayValue = computed(() => props.value.replace(/(<([^>]+)>)/gi, ''));
+		const displayValue = computed(() => {
+			if (!props.value) return null;
+			let value = String(props.value);
+			value = props.value.replace(/(<([^>]+)>)/gi, '');
+
+			if (props.formatTitle) {
+				value = formatTitle(value);
+			}
+
+			return value;
+		});
 
 		return { displayValue };
 	},
diff --git a/app/src/displays/formatted-value/index.ts b/app/src/displays/formatted-value/index.ts
new file mode 100644
index 0000000000..3d31b130f7
--- /dev/null
+++ b/app/src/displays/formatted-value/index.ts
@@ -0,0 +1,60 @@
+import { defineDisplay } from '@/displays/define';
+import DisplayFormattedValue from './formatted-value.vue';
+
+export default defineDisplay(({ i18n }) => ({
+	id: 'formatted-value',
+	name: i18n.t('formatted_value'),
+	types: ['string', 'text'],
+	icon: 'text_format',
+	handler: DisplayFormattedValue,
+	options: [
+		{
+			field: 'formatTitle',
+			name: i18n.t('format_title'),
+			meta: {
+				width: 'half',
+				interface: 'toggle',
+				options: {
+					label: i18n.t('auto_format_casing'),
+				},
+			},
+			schema: {
+				default_value: true,
+			},
+		},
+		{
+			field: 'bold',
+			name: i18n.t('bold'),
+			meta: {
+				width: 'half',
+				interface: 'toggle',
+				options: {
+					label: i18n.t('use_bold_style'),
+				},
+			},
+		},
+		{
+			field: 'color',
+			name: i18n.t('color'),
+			meta: {
+				width: 'half',
+				interface: 'color',
+			},
+		},
+		{
+			field: 'font',
+			name: i18n.t('font'),
+			meta: {
+				width: 'half',
+				interface: 'dropdown',
+				options: {
+					choices: [
+						{ text: i18n.t('sans_serif'), value: 'sans-serif' },
+						{ text: i18n.t('serif'), value: 'serif' },
+						{ text: i18n.t('monospace'), value: 'monospace' },
+					],
+				},
+			},
+		},
+	],
+}));
diff --git a/app/src/displays/formatted-text/readme.md b/app/src/displays/formatted-value/readme.md
similarity index 100%
rename from app/src/displays/formatted-text/readme.md
rename to app/src/displays/formatted-value/readme.md
diff --git a/app/src/displays/index.ts b/app/src/displays/index.ts
index 618685ea66..8a42a15098 100644
--- a/app/src/displays/index.ts
+++ b/app/src/displays/index.ts
@@ -3,8 +3,7 @@ import DisplayCollection from './collection';
 import DisplayDateTime from './datetime';
 import DisplayFile from './file';
 import DisplayFilesize from './filesize';
-import DisplayFormattedText from './formatted-text';
-import DisplayFormatTitle from './format-title/';
+import DisplayFormattedValue from './formatted-value';
 import DisplayIcon from './icon/';
 import DisplayImage from './image';
 import DisplayMimeType from './mime-type';
@@ -18,13 +17,12 @@ import DisplayUser from './user';
 
 export const displays = [
 	DisplayRaw,
+	DisplayFormattedValue,
 	DisplayBadge,
 	DisplayCollection,
 	DisplayDateTime,
 	DisplayFile,
 	DisplayFilesize,
-	DisplayFormattedText,
-	DisplayFormatTitle,
 	DisplayIcon,
 	DisplayImage,
 	DisplayMimeType,
diff --git a/app/src/lang/en-US/index.json b/app/src/lang/en-US/index.json
index 4f3810bfd0..b2fd9b56fc 100644
--- a/app/src/lang/en-US/index.json
+++ b/app/src/lang/en-US/index.json
@@ -420,6 +420,12 @@
 
 	"enabled": "Enabled",
 
+	"use_bold_style": "Use bold style",
+
+	"formatted_value": "Formatted Value",
+	"format_title": "Format Title",
+	"auto_format_casing": "Auto-format casing",
+
 	"errors": {
 		"3": "Only super admins have access to this",
 		"4": "Super Admin Token not provided",
@@ -641,7 +647,6 @@
 	"status_dot": "Status (Dot)",
 	"status_badge": "Status (Badge)",
 	"tags": "Tags",
-	"formatted_text": "Formatted Text",
 	"format_text": "Format Text",
 
 	"bold": "Bold",