diff --git a/package.json b/package.json
index 95d704f3a7..a510cf3b5b 100644
--- a/package.json
+++ b/package.json
@@ -17,11 +17,11 @@
     "docs:build": "vuepress build docs"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.0.0-rc.8",
-    "@vue/cli-plugin-eslint": "^3.0.0-rc.8",
-    "@vue/cli-plugin-pwa": "^3.0.0-rc.8",
-    "@vue/cli-service": "^3.0.0-rc.8",
-    "@vue/eslint-config-prettier": "^3.0.0-rc.8",
+    "@vue/cli-plugin-babel": "^3.0.0-rc.10",
+    "@vue/cli-plugin-eslint": "^3.0.0-rc.10",
+    "@vue/cli-plugin-pwa": "^3.0.0-rc.10",
+    "@vue/cli-service": "^3.0.0-rc.10",
+    "@vue/eslint-config-prettier": "^3.0.0-rc.10",
     "node-sass": "^4.9.2",
     "sass-loader": "^6.0.6",
     "vue-template-compiler": "^2.5.13",
@@ -29,7 +29,7 @@
   },
   "dependencies": {
     "@directus/format-title": "^1.2.0",
-    "@directus/sdk-js": "^3.0.0",
+    "@directus/sdk-js": "^3.1.0",
     "@rijk/jwt-payload": "^1.0.1",
     "axios": "^0.18.0",
     "body-scroll-lock": "^2.4.6",
diff --git a/src/components/activity-overview/activity-overview.vue b/src/components/activity/activity.vue
similarity index 98%
rename from src/components/activity-overview/activity-overview.vue
rename to src/components/activity/activity.vue
index 92d9acdbd6..e41aa27ecf 100644
--- a/src/components/activity-overview/activity-overview.vue
+++ b/src/components/activity/activity.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="v-activity-overview">
+  <div class="v-activity">
     <form
       v-show="show !== 'activity'"
       class="new-comment"
@@ -65,13 +65,11 @@
 
 <script>
 import snarkdown from "snarkdown";
-import EditForm from "../edit-form/edit-form.vue";
 import VDiff from "./diff.vue";
 
 export default {
-  name: "v-activity-overview",
+  name: "v-activity",
   components: {
-    EditForm,
     VDiff
   },
   data() {
@@ -178,7 +176,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.v-activity-overview {
+.v-activity {
   position: relative;
 
   &::before {
@@ -416,7 +414,7 @@ export default {
 </style>
 
 <style lang="scss">
-.v-activity-overview .content .comment {
+.v-activity .content .comment {
   a {
     color: var(--accent);
     text-decoration: none;
diff --git a/src/components/activity-overview/diff.vue b/src/components/activity/diff.vue
similarity index 100%
rename from src/components/activity-overview/diff.vue
rename to src/components/activity/diff.vue
diff --git a/src/components/extensions/readonly/readonly-fallback.vue b/src/components/extension/interface/display/display-fallback.vue
similarity index 59%
rename from src/components/extensions/readonly/readonly-fallback.vue
rename to src/components/extension/interface/display/display-fallback.vue
index 14c22f2da0..6710c75ed6 100644
--- a/src/components/extensions/readonly/readonly-fallback.vue
+++ b/src/components/extension/interface/display/display-fallback.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="v-readonly-fallback">{{ value }}</div>
+  <div class="v-ext-display-fallback">{{ value }}</div>
 </template>
 
 <script>
 export default {
-  name: "v-readonly-fallback",
+  name: "v-ext-display-fallback",
   props: {
     value: {
       type: null,
diff --git a/src/components/extension/interface/display/display-loading.vue b/src/components/extension/interface/display/display-loading.vue
new file mode 100644
index 0000000000..b75433cee2
--- /dev/null
+++ b/src/components/extension/interface/display/display-loading.vue
@@ -0,0 +1,9 @@
+<template>
+  <div class="v-ext-display-loading">LOADING</div>
+</template>
+
+<script>
+export default {
+  name: "v-ext-display-loading"
+};
+</script>
diff --git a/src/components/extensions/readonly/readonly.vue b/src/components/extension/interface/display/display.vue
similarity index 77%
rename from src/components/extensions/readonly/readonly.vue
rename to src/components/extension/interface/display/display.vue
index df54389ccf..8f6ff0c3b6 100644
--- a/src/components/extensions/readonly/readonly.vue
+++ b/src/components/extension/interface/display/display.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-readonly-fallback
+  <v-ext-display-fallback
     v-if="interfaceType === null"
     :name="name"
     :value="value"
@@ -9,7 +9,7 @@
     :required="required"
     :loading="loading"
     :options="optionsWithDefaults"
-    class="v-readonly" />
+    class="v-ext-display" />
   <component
     v-else
     :is="componentName"
@@ -21,18 +21,18 @@
     :required="required"
     :loading="loading"
     :options="optionsWithDefaults"
-    class="v-readonly" />
+    class="v-ext-display" />
 </template>
 
 <script>
 import Vue from "vue";
-import loadExtension from "../../../helpers/load-extension";
-import componentExists from "../../../helpers/component-exists";
-import VReadonlyFallback from "./readonly-fallback.vue";
-import VReadonlyLoading from "./readonly-loading.vue";
+import loadExtension from "../../../../helpers/load-extension";
+import componentExists from "../../../../helpers/component-exists";
+import VExtDisplayFallback from "./display-fallback.vue";
+import VExtDisplayLoading from "./display-loading.vue";
 
 export default {
-  name: "v-readonly",
+  name: "v-ext-display",
   props: {
     interfaceType: {
       type: String,
@@ -72,7 +72,7 @@ export default {
     }
   },
   components: {
-    VReadonlyFallback
+    VExtDisplayFallback
   },
   computed: {
     interfaces() {
@@ -82,7 +82,7 @@ export default {
       return this.interfaces && this.interfaces[this.interfaceType];
     },
     componentName() {
-      return `readonly-${this.interfaceType}`;
+      return `display-${this.interfaceType}`;
     },
     optionsWithDefaults() {
       if (!this.interfaceInfo) return {};
@@ -100,36 +100,36 @@ export default {
   },
   watch: {
     id() {
-      this.registerReadonly();
+      this.registerDisplay();
     }
   },
   created() {
-    this.registerReadonly();
+    this.registerDisplay();
   },
   methods: {
     /**
      * Register the extension as component (if it hasn't been registered before yet)
      */
-    registerReadonly() {
+    registerDisplay() {
       // If component already exists, do nothing
       if (componentExists(this.componentName)) return;
 
       // If the extension isn't known by the API (e.g. it's not in the store), register it with the
       //   fallback immediately
       if (!this.interfaceInfo) {
-        Vue.component(this.componentName, VReadonlyFallback);
+        Vue.component(this.componentName, VExtDisplayFallback);
         return;
       }
 
       const filePath = `${this.$api.url}/${this.interfaceInfo.path.replace(
         "meta.json",
-        "readonly.js"
+        "display.js"
       )}`;
 
       Vue.component(this.componentName, () => ({
         component: loadExtension(filePath),
-        error: VReadonlyFallback,
-        loading: VReadonlyLoading
+        error: VExtDisplayFallback,
+        loading: VExtDisplayLoading
       }));
     }
   }
diff --git a/src/components/extensions/interface/interface-fallback.vue b/src/components/extension/interface/input/input-fallback.vue
similarity index 80%
rename from src/components/extensions/interface/interface-fallback.vue
rename to src/components/extension/interface/input/input-fallback.vue
index 7aa9f5abb7..1ed286cee4 100644
--- a/src/components/extensions/interface/interface-fallback.vue
+++ b/src/components/extension/interface/input/input-fallback.vue
@@ -1,13 +1,13 @@
 <template>
   <v-input
     :value="value"
-    class="v-interface-fallback"
+    class="v-ext-input-fallback"
     @input="$emit('input', $event)" />
 </template>
 
 <script>
 export default {
-  name: "v-interface-fallback",
+  name: "v-ext-input-fallback",
   props: {
     value: {
       type: null,
@@ -19,13 +19,13 @@ export default {
     }
   },
   created() {
-    this.$notify.alert(this.$t("extension_error", { ext: this.interfaceName }));
+    this.$notify.alert(this.$t("extension_error", { ext: this.inputName }));
   }
 };
 </script>
 
 <style lang="scss" scoped>
-.v-interface-fallback {
+.v-ext-input-fallback {
   max-width: var(--width-normal);
 }
 </style>
diff --git a/src/components/extension/interface/input/input-loading.vue b/src/components/extension/interface/input/input-loading.vue
new file mode 100644
index 0000000000..1aa4edb8a8
--- /dev/null
+++ b/src/components/extension/interface/input/input-loading.vue
@@ -0,0 +1,9 @@
+<template>
+  <div class="v-ext-input-loading">LOADING</div>
+</template>
+
+<script>
+export default {
+  name: "v-ext-input-loading"
+};
+</script>
diff --git a/src/components/extensions/interface/interface.vue b/src/components/extension/interface/input/input.vue
similarity index 84%
rename from src/components/extensions/interface/interface.vue
rename to src/components/extension/interface/input/input.vue
index e8ab19bcbd..828a9eae56 100644
--- a/src/components/extensions/interface/interface.vue
+++ b/src/components/extension/interface/input/input.vue
@@ -1,7 +1,7 @@
 <template>
   <component
     :is="componentName"
-    :interface-name="id"
+    :input-name="id"
     :name="name"
     :value="value"
     :type="typeOrDefault"
@@ -14,7 +14,7 @@
     :relationship="relationship"
     :fields="fields"
     :values="values"
-    class="v-interface-extension"
+    class="v-ext-input"
     @input="$emit('input', $event)"
     @setfield="$emit('setfield', $event)">
     <slot />
@@ -23,13 +23,13 @@
 
 <script>
 import Vue from "vue";
-import loadExtension from "../../../helpers/load-extension";
-import componentExists from "../../../helpers/component-exists";
-import InterfaceFallback from "./interface-fallback.vue";
-import InterfaceLoading from "./interface-loading.vue";
+import loadExtension from "../../../../helpers/load-extension";
+import componentExists from "../../../../helpers/component-exists";
+import InputFallback from "./input-fallback.vue";
+import InputLoading from "./input-loading.vue";
 
 export default {
-  name: "v-interface-extension",
+  name: "v-ext-input",
   props: {
     id: {
       type: String,
@@ -92,7 +92,7 @@ export default {
       return this.interfaces && this.interfaces[this.id];
     },
     componentName() {
-      return `interface-${this.id}`;
+      return `input-${this.id}`;
     },
     typeOrDefault() {
       if (!this.interface) return null;
@@ -137,19 +137,19 @@ export default {
       // If the extension isn't known by the API (e.g. it's not in the store), register it with the
       //   fallback immediately
       if (!this.interface) {
-        Vue.component(this.componentName, InterfaceFallback);
+        Vue.component(this.componentName, InputFallback);
         return;
       }
 
       const filePath = `${this.$api.url}/${this.interface.path.replace(
         "meta.json",
-        "interface.js"
+        "input.js"
       )}`;
 
       Vue.component(this.componentName, () => ({
         component: loadExtension(filePath),
-        error: InterfaceFallback,
-        loading: InterfaceLoading
+        error: InputFallback,
+        loading: InputLoading
       }));
     }
   }
diff --git a/src/components/extension/layout/layout-options/layout-options-fallback.vue b/src/components/extension/layout/layout-options/layout-options-fallback.vue
new file mode 100644
index 0000000000..d82a896c50
--- /dev/null
+++ b/src/components/extension/layout/layout-options/layout-options-fallback.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="v-ext-layout-options-fallback" />
+</template>
+
+<script>
+export default {
+  name: "v-ext-layout-options-fallback",
+  props: {
+    layoutName: {
+      type: String,
+      default: ""
+    }
+  },
+  created() {
+    this.$notify.alert(this.$t("extension_error", { ext: this.layoutName }));
+  }
+};
+</script>
diff --git a/src/components/extensions/listing-options/listing-options-loading.vue b/src/components/extension/layout/layout-options/layout-options-loading.vue
similarity index 100%
rename from src/components/extensions/listing-options/listing-options-loading.vue
rename to src/components/extension/layout/layout-options/layout-options-loading.vue
diff --git a/src/components/extensions/listing-options/listing-options.vue b/src/components/extension/layout/layout-options/layout-options.vue
similarity index 66%
rename from src/components/extensions/listing-options/listing-options.vue
rename to src/components/extension/layout/layout-options/layout-options.vue
index 8aaf4716dc..c2ab521a95 100644
--- a/src/components/extensions/listing-options/listing-options.vue
+++ b/src/components/extension/layout/layout-options/layout-options.vue
@@ -7,8 +7,8 @@
     :loading="loading"
     :view-query="viewQuery"
     :selection="selection"
-    :listing-name="type"
-    class="listing-options-extension"
+    :layout-name="type"
+    class="v-ext-layout-options"
     @query="$emit('query', $event)"
     @select="$emit('select', $event)"
     @options="$emit('options', $event)" />
@@ -16,13 +16,13 @@
 
 <script>
 import Vue from "vue";
-import loadExtension from "../../../helpers/load-extension";
-import componentExists from "../../../helpers/component-exists";
-import ListingOptionsFallback from "./listing-options-fallback.vue";
-import ListingOptionsLoading from "./listing-options-loading.vue";
+import loadExtension from "../../../../helpers/load-extension";
+import componentExists from "../../../../helpers/component-exists";
+import VExtLayoutOptionsFallback from "./layout-options-fallback.vue";
+import VExtLayoutOptionsLoading from "./layout-options-loading.vue";
 
 export default {
-  name: "listing-options-extension",
+  name: "v-ext-layout-options",
   props: {
     type: {
       type: String,
@@ -50,14 +50,14 @@ export default {
     }
   },
   computed: {
-    listings() {
-      return this.$store.state.extensions.listings;
+    layouts() {
+      return this.$store.state.extensions.layouts;
     },
-    listing() {
-      return this.listings && this.listings[this.type];
+    layout() {
+      return this.layouts && this.layouts[this.type];
     },
     componentName() {
-      return `listing-options-${this.type}`;
+      return `layout-options-${this.type}`;
     },
     primaryKeyField() {
       if (!this.fields) return null;
@@ -75,36 +75,36 @@ export default {
   },
   watch: {
     type() {
-      this.registerListingOptions();
+      this.registerLayoutOptions();
     }
   },
   created() {
-    this.registerListingOptions();
+    this.registerLayoutOptions();
   },
   methods: {
     /**
      * Register the extension as component (if it hasn't been registered before yet)
      */
-    registerListingOptions() {
+    registerLayoutOptions() {
       // If component already exists, do nothing
       if (componentExists(this.componentName)) return;
 
       // If the extension isn't known by the API (e.g. it's not in the store), register it with the
       //   fallback immediately
-      if (!this.listing) {
-        Vue.component(this.componentName, ListingOptionsFallback);
+      if (!this.layout) {
+        Vue.component(this.componentName, VExtLayoutOptionsFallback);
         return;
       }
 
-      const filePath = `${this.$api.url}/${this.listing.path.replace(
+      const filePath = `${this.$api.url}/${this.layout.path.replace(
         "meta.json",
         "options.js"
       )}`;
 
       Vue.component(this.componentName, () => ({
         component: loadExtension(filePath),
-        error: ListingOptionsFallback,
-        loading: ListingOptionsLoading
+        error: VExtLayoutOptionsFallback,
+        loading: VExtLayoutOptionsLoading
       }));
     }
   }
diff --git a/src/components/extensions/listing/listing-fallback.vue b/src/components/extension/layout/layout/layout-fallback.vue
similarity index 77%
rename from src/components/extensions/listing/listing-fallback.vue
rename to src/components/extension/layout/layout/layout-fallback.vue
index e7b9f3b9ca..9479f34698 100644
--- a/src/components/extensions/listing/listing-fallback.vue
+++ b/src/components/extension/layout/layout/layout-fallback.vue
@@ -4,13 +4,14 @@
     :items="items"
     :columns="columns"
     :primaryKeyField="primaryKeyField"
+    :use-interfaces="true"
     link="__link__"
-    :use-interfaces="true" />
+    class="v-ext-layout-fallback" />
 </template>
 
 <script>
 export default {
-  name: "listing-fallback",
+  name: "v-ext-layout-fallback",
   props: {
     fields: {
       type: Object,
@@ -24,7 +25,7 @@ export default {
       type: String,
       required: true
     },
-    listingName: {
+    layoutName: {
       type: String,
       default: ""
     }
@@ -37,7 +38,7 @@ export default {
     }
   },
   created() {
-    this.$notify.alert(this.$t("extension_error", { ext: this.listingName }));
+    this.$notify.alert(this.$t("extension_error", { ext: this.layoutName }));
   }
 };
 </script>
diff --git a/src/components/extensions/listing/listing-loading.vue b/src/components/extension/layout/layout/layout-loading.vue
similarity index 76%
rename from src/components/extensions/listing/listing-loading.vue
rename to src/components/extension/layout/layout/layout-loading.vue
index d84644eb33..e7d5e8686f 100644
--- a/src/components/extensions/listing/listing-loading.vue
+++ b/src/components/extension/layout/layout/layout-loading.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="listing-loading">
+  <div class="v-layout-loading">
     <v-spinner
       line-fg-color="var(--light-gray)"
       line-bg-color="var(--lighter-gray)"
@@ -9,6 +9,6 @@
 
 <script>
 export default {
-  name: "listing-loading"
+  name: "v-layout-loading"
 };
 </script>
diff --git a/src/components/extensions/listing/listing.vue b/src/components/extension/layout/layout/layout.vue
similarity index 70%
rename from src/components/extensions/listing/listing.vue
rename to src/components/extension/layout/layout/layout.vue
index d4335cf045..34f924eb9c 100644
--- a/src/components/extensions/listing/listing.vue
+++ b/src/components/extension/layout/layout/layout.vue
@@ -1,6 +1,7 @@
 <template>
   <component
     :is="componentName"
+    :layout-name="viewType"
     :primary-key-field="primaryKeyField"
     :fields="fields"
     :items="items"
@@ -10,8 +11,7 @@
     :lazy-loading="lazyLoading"
     :selection="selection"
     :link="link"
-    :listing-name="viewType"
-    class="v-listing"
+    class="v-layout"
     @query="$emit('query', $event)"
     @select="$emit('select', $event)"
     @options="$emit('options', $event)"
@@ -20,13 +20,13 @@
 
 <script>
 import Vue from "vue";
-import loadExtension from "../../../helpers/load-extension";
-import componentExists from "../../../helpers/component-exists";
-import VListingFallback from "./listing-fallback.vue";
-import VListingLoading from "./listing-loading.vue";
+import loadExtension from "../../../../helpers/load-extension";
+import componentExists from "../../../../helpers/component-exists";
+import VExtLayoutFallback from "./layout-fallback.vue";
+import VExtLayoutLoading from "./layout-loading.vue";
 
 export default {
-  name: "v-listing",
+  name: "v-layout",
   props: {
     fields: {
       type: Object,
@@ -66,14 +66,14 @@ export default {
     }
   },
   computed: {
-    listings() {
-      return this.$store.state.extensions.listings;
+    layouts() {
+      return this.$store.state.extensions.layouts;
     },
-    listing() {
-      return this.listings && this.listings[this.viewType];
+    layout() {
+      return this.layouts && this.layouts[this.viewType];
     },
     componentName() {
-      return `listing-${this.viewType}`;
+      return `layout-${this.viewType}`;
     },
     primaryKeyField() {
       const fieldInfo = this.$lodash.filter(
@@ -86,36 +86,36 @@ export default {
   },
   watch: {
     viewType() {
-      this.registerListing();
+      this.registerLayout();
     }
   },
   created() {
-    this.registerListing();
+    this.registerLayout();
   },
   methods: {
     /**
      * Register the extension as component (if it hasn't been registered before yet)
      */
-    registerListing() {
+    registerLayout() {
       // If component already exists, do nothing
       if (componentExists(this.componentName)) return;
 
       // If the extension isn't known by the API (e.g. it's not in the store), register it with the
       //   fallback immediately
-      if (!this.listing) {
-        Vue.component(this.componentName, VListingFallback);
+      if (!this.layout) {
+        Vue.component(this.componentName, VExtLayoutFallback);
         return;
       }
 
-      const filePath = `${this.$api.url}/${this.listing.path.replace(
+      const filePath = `${this.$api.url}/${this.layout.path.replace(
         "meta.json",
-        "listing.js"
+        "layout.js"
       )}`;
 
       Vue.component(this.componentName, () => ({
         component: loadExtension(filePath),
-        error: VListingFallback,
-        loading: VListingLoading
+        error: VExtLayoutFallback,
+        loading: VExtLayoutLoading
       }));
     }
   }
diff --git a/src/components/extensions/page/page-fallback.vue b/src/components/extension/page/page-fallback.vue
similarity index 84%
rename from src/components/extensions/page/page-fallback.vue
rename to src/components/extension/page/page-fallback.vue
index 249a4c9393..376eac4ec9 100644
--- a/src/components/extensions/page/page-fallback.vue
+++ b/src/components/extension/page/page-fallback.vue
@@ -4,7 +4,7 @@
 
 <script>
 export default {
-  name: "v-page-fallback",
+  name: "v-ext-page-fallback",
   created() {
     this.$notify.alert(this.$t("extension_error", { ext: this.interfaceName }));
   }
diff --git a/src/components/extensions/page/page-loading.vue b/src/components/extension/page/page-loading.vue
similarity index 100%
rename from src/components/extensions/page/page-loading.vue
rename to src/components/extension/page/page-loading.vue
diff --git a/src/components/extensions/page/page.vue b/src/components/extension/page/page.vue
similarity index 98%
rename from src/components/extensions/page/page.vue
rename to src/components/extension/page/page.vue
index 19e3b4e33e..b222d03d5a 100644
--- a/src/components/extensions/page/page.vue
+++ b/src/components/extension/page/page.vue
@@ -12,7 +12,7 @@ import pageFallback from "./page-fallback.vue";
 import pageLoading from "./page-loading.vue";
 
 export default {
-  name: "v-page-extension",
+  name: "v-ext-page",
   props: {
     id: {
       type: String,
diff --git a/src/components/extensions/interface/interface-loading.vue b/src/components/extensions/interface/interface-loading.vue
deleted file mode 100644
index 3265e81252..0000000000
--- a/src/components/extensions/interface/interface-loading.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-  <div class="interface-loading">LOADING</div>
-</template>
-
-<script>
-export default {
-  name: "interface-loading"
-};
-</script>
diff --git a/src/components/extensions/listing-options/listing-options-fallback.vue b/src/components/extensions/listing-options/listing-options-fallback.vue
deleted file mode 100644
index e8c98933eb..0000000000
--- a/src/components/extensions/listing-options/listing-options-fallback.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <div class="options-fallback" />
-</template>
-
-<script>
-export default {
-  name: "options-fallback",
-  props: {
-    listingName: {
-      type: String,
-      default: ""
-    }
-  },
-  created() {
-    this.$notify.alert(this.$t("extension_error", { ext: this.listingName }));
-  }
-};
-</script>
diff --git a/src/components/extensions/readonly/readonly-loading.vue b/src/components/extensions/readonly/readonly-loading.vue
deleted file mode 100644
index 41f11c69b5..0000000000
--- a/src/components/extensions/readonly/readonly-loading.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-  <div class="v-readonly-loading">LOADING</div>
-</template>
-
-<script>
-export default {
-  name: "v-readonly-loading"
-};
-</script>
diff --git a/src/components/field-setup.vue b/src/components/field-setup.vue
index 71ab0bc11f..4fc2ac81b1 100644
--- a/src/components/field-setup.vue
+++ b/src/components/field-setup.vue
@@ -85,7 +85,7 @@
           :key="optionID">
           <label :for="optionID">{{ option.name }}</label>
           <p>{{ option.comment }}</p>
-          <v-interface
+          <v-ext-input
             :id="option.interface"
             :name="optionID"
             :type="option.type"
diff --git a/src/components/edit-form/field.vue b/src/components/form/field.vue
similarity index 99%
rename from src/components/edit-form/field.vue
rename to src/components/form/field.vue
index 57edea6c64..00dea54a55 100644
--- a/src/components/edit-form/field.vue
+++ b/src/components/form/field.vue
@@ -16,7 +16,7 @@
         </template>
         <small v-if="!readonly && field.comment">{{ field.comment }}</small>
         <div class="field-wrapper">
-          <v-interface
+          <v-ext-input
             :id="field.interface"
             :name="field.field"
             :required="Boolean(field.required)"
diff --git a/src/components/edit-form/edit-form.vue b/src/components/form/form.vue
similarity index 97%
rename from src/components/edit-form/edit-form.vue
rename to src/components/form/form.vue
index b03a500ad4..548a4cf8ce 100644
--- a/src/components/edit-form/edit-form.vue
+++ b/src/components/form/form.vue
@@ -4,7 +4,7 @@
     :title="$t('no_fields')"
     :body="$t('no_fields_body')"
     icon="error_outline" />
-  <form v-else class="edit-form flex-group">
+  <form v-else class="v-form flex-group">
     <div
       v-for="field in fieldsGrouped"
       :class="[
@@ -43,7 +43,7 @@ import VGroup from "./group.vue";
 import VError from "../error.vue";
 
 export default {
-  name: "edit-form",
+  name: "v-form",
   components: {
     VField,
     VGroup,
@@ -124,7 +124,7 @@ export default {
 </script>
 
 <style lang="scss">
-.edit-form {
+.v-form {
   width: 100%;
   max-width: 800px;
 
diff --git a/src/components/edit-form/group.vue b/src/components/form/group.vue
similarity index 97%
rename from src/components/edit-form/group.vue
rename to src/components/form/group.vue
index f317f24efa..56fd2a1fbf 100644
--- a/src/components/edit-form/group.vue
+++ b/src/components/form/group.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-interface
+  <v-ext-input
     :id="field.field"
     :name="field.field"
     :options="field.options"
@@ -30,7 +30,7 @@
           @stage-value="$emit('stageValue', $event)" />
       </div>
     </div>
-  </v-interface>
+  </v-ext-input>
 </template>
 
 <script>
diff --git a/src/components/header-bar/header-button.vue b/src/components/header/header-button.vue
similarity index 100%
rename from src/components/header-bar/header-button.vue
rename to src/components/header/header-button.vue
diff --git a/src/components/header-bar/header-bar.vue b/src/components/header/header.vue
similarity index 97%
rename from src/components/header-bar/header-bar.vue
rename to src/components/header/header.vue
index 05873e1c29..82bb27c220 100644
--- a/src/components/header-bar/header-bar.vue
+++ b/src/components/header/header.vue
@@ -1,5 +1,5 @@
 <template>
-  <header class="v-header-bar">
+  <header class="v-header">
     <button
       :disabled="navActive"
       class="nav-toggle"
@@ -30,7 +30,7 @@
 import { TOGGLE_NAV, TOGGLE_INFO } from "../../store/mutation-types";
 
 export default {
-  name: "v-header-bar",
+  name: "v-header",
   props: {
     title: {
       type: String,
@@ -76,7 +76,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.v-header-bar {
+.v-header {
   background-color: var(--darkest-gray);
   position: fixed;
   width: 100%;
diff --git a/src/components/item-listing/item-listing.vue b/src/components/items.vue
similarity index 98%
rename from src/components/item-listing/item-listing.vue
rename to src/components/items.vue
index 7a72c2abef..9bb88dac46 100644
--- a/src/components/item-listing/item-listing.vue
+++ b/src/components/items.vue
@@ -30,7 +30,7 @@
     :body="$t('no_results_body')"
     icon="search" />
 
-  <v-listing
+  <v-ext-layout
     v-else-if="fields.data && items.data"
     :fields="fields.data"
     :items="items.data"
@@ -48,10 +48,10 @@
 </template>
 
 <script>
-import formatFilters from "../../helpers/format-filters";
+import formatFilters from "../helpers/format-filters";
 
 export default {
-  name: "v-item-listing",
+  name: "v-items",
   props: {
     collection: {
       type: String,
diff --git a/src/components/permissions-widget/permissions-widget-header.vue b/src/components/permissions/permissions-header.vue
similarity index 100%
rename from src/components/permissions-widget/permissions-widget-header.vue
rename to src/components/permissions/permissions-header.vue
diff --git a/src/components/permissions-widget/permissions-widget-row.vue b/src/components/permissions/permissions-row.vue
similarity index 99%
rename from src/components/permissions-widget/permissions-widget-row.vue
rename to src/components/permissions/permissions-row.vue
index 1b522494d4..6f6531b6af 100644
--- a/src/components/permissions-widget/permissions-widget-row.vue
+++ b/src/components/permissions/permissions-row.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="v-permissions-widget-row">
+  <div class="v-permissions-row">
     <div v-if="!statuses" class="row">
       <div class="cell">
         <span v-tooltip="permissionName">{{ $helpers.formatTitle(permissionName) }}</span>
@@ -214,7 +214,7 @@
 import VPermissionsToggle from "./permissions-toggle.vue";
 
 export default {
-  name: "v-permissions-widget-row",
+  name: "v-permissions-row",
   components: {
     VPermissionsToggle
   },
@@ -379,7 +379,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.v-permissions-widget-row {
+.v-permissions-row {
   position: relative;
 }
 
diff --git a/src/components/permissions-widget/permissions-toggle.vue b/src/components/permissions/permissions-toggle.vue
similarity index 100%
rename from src/components/permissions-widget/permissions-toggle.vue
rename to src/components/permissions/permissions-toggle.vue
diff --git a/src/components/permissions-widget/permissions-widget.vue b/src/components/permissions/permissions.vue
similarity index 80%
rename from src/components/permissions-widget/permissions-widget.vue
rename to src/components/permissions/permissions.vue
index 785805a94f..1da9443eef 100644
--- a/src/components/permissions-widget/permissions-widget.vue
+++ b/src/components/permissions/permissions.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="permissions-widget">
-    <v-permissions-widget-header />
+  <div class="v-permissions">
+    <v-permissions-header />
 
     <div class="body">
-      <v-permissions-widget-row
+      <v-permissions-row
         v-for="(permission, name) in permissions"
         :permission="permission"
         :permission-name="name"
@@ -16,14 +16,14 @@
 </template>
 
 <script>
-import VPermissionsWidgetHeader from "./permissions-widget-header.vue";
-import VPermissionsWidgetRow from "./permissions-widget-row.vue";
+import VPermissionsHeader from "./permissions-header.vue";
+import VPermissionsRow from "./permissions-row.vue";
 
 export default {
-  name: "permissions-widget",
+  name: "v-permissions",
   components: {
-    VPermissionsWidgetHeader,
-    VPermissionsWidgetRow
+    VPermissionsHeader,
+    VPermissionsRow
   },
   props: {
     permissions: {
@@ -43,7 +43,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.permissions-widget {
+.v-permissions {
   background-color: var(--white);
   border-radius: var(--border-radius);
   border: var(--input-border-width) solid var(--lighter-gray);
diff --git a/src/components/search-filter/search-filter.vue b/src/components/search-filter/search-filter.vue
index 1568f253a7..62eb4ce9e7 100644
--- a/src/components/search-filter/search-filter.vue
+++ b/src/components/search-filter/search-filter.vue
@@ -101,13 +101,11 @@
 
 <script>
 import VBlocker from "../blocker.vue";
-import VHeaderButton from "../header-bar/header-button.vue";
 
 export default {
   name: "search-filter",
   components: {
-    VBlocker,
-    VHeaderButton
+    VBlocker
   },
   props: {
     fieldNames: {
diff --git a/src/components/table/table.vue b/src/components/table/table.vue
index 1f2970f623..63ef852d04 100644
--- a/src/components/table/table.vue
+++ b/src/components/table/table.vue
@@ -83,7 +83,7 @@
             <div
               v-if="row[field] === '' || $lodash.isNil(row[field])"
               class="empty">--</div>
-            <v-readonly
+            <v-ext-display
               v-else-if="useInterfaces && !$lodash.isNil(row[field])"
               :interface-type="fieldInfo.interface"
               :name="field"
@@ -123,7 +123,7 @@
               <div
                 v-if="row[field] === '' || $lodash.isNil(row[field])"
                 class="empty">--</div>
-              <v-readonly
+              <v-ext-display
                 v-else-if="useInterfaces && !$lodash.isNil(row[field])"
                 :interface-type="fieldInfo.interface"
                 :name="field"
diff --git a/src/globals.js b/src/globals.js
index 1b5716305f..fbfaf612bf 100644
--- a/src/globals.js
+++ b/src/globals.js
@@ -9,17 +9,17 @@ import VDetails from "./components/details.vue";
 import VTable from "./components/table/table.vue";
 
 // Extensions
-import VPage from "./components/extensions/page/page.vue";
-import VInterface from "./components/extensions/interface/interface.vue";
-import VReadonly from "./components/extensions/readonly/readonly.vue";
-import VListing from "./components/extensions/listing/listing.vue";
-import VListingOptions from "./components/extensions/listing-options/listing-options.vue";
+import VExtInput from "./components/extension/interface/input/input.vue";
+import VExtDisplay from "./components/extension/interface/display/display.vue";
+import VExtLayout from "./components/extension/layout/layout/layout.vue";
+import VExtLayoutOptions from "./components/extension/layout/layout-options/layout-options.vue";
+import VExtPage from "./components/extension/page/page.vue";
 
 // Item listing
-import VItemListing from "./components/item-listing/item-listing.vue";
+import VItems from "./components/items.vue";
 
 // Edit form
-import VEditForm from "./components/edit-form/edit-form.vue";
+import VForm from "./components/form/form.vue";
 
 // Form inputs
 import VButton from "./components/form-inputs/button.vue";
@@ -39,24 +39,24 @@ import VModal from "./components/modals/modal.vue";
 import VPrompt from "./components/modals/prompt.vue";
 
 // Page Chrome
-import VHeaderBar from "./components/header-bar/header-bar.vue";
-import VHeaderButton from "./components/header-bar/header-button.vue";
+import VHeader from "./components/header/header.vue";
+import VHeaderButton from "./components/header/header-button.vue";
 import VInfoSidebar from "./components/sidebars/info-sidebar.vue";
 
 import VError from "./components/error.vue";
 
 // Extensions
-Vue.component("v-page", VPage);
-Vue.component("v-interface", VInterface);
-Vue.component("v-readonly", VReadonly);
-Vue.component("v-listing", VListing);
-Vue.component("v-listing-options", VListingOptions);
+Vue.component("v-ext-page", VExtPage);
+Vue.component("v-ext-input", VExtInput);
+Vue.component("v-ext-display", VExtDisplay);
+Vue.component("v-ext-layout", VExtLayout);
+Vue.component("v-ext-layout-options", VExtLayoutOptions);
 
 // Item Listing
-Vue.component("v-item-listing", VItemListing);
+Vue.component("v-items", VItems);
 
 // Edit form
-Vue.component("v-edit-form", VEditForm);
+Vue.component("v-form", VForm);
 
 // Form inputs
 Vue.component("v-button", VButton);
@@ -76,7 +76,7 @@ Vue.component("v-modal", VModal);
 Vue.component("v-prompt", VPrompt);
 
 // Page Chrome
-Vue.component("v-header-bar", VHeaderBar);
+Vue.component("v-header", VHeader);
 Vue.component("v-header-button", VHeaderButton);
 Vue.component("v-info-sidebar", VInfoSidebar);
 
diff --git a/src/router.js b/src/router.js
index 82461c207e..e3a47a923f 100644
--- a/src/router.js
+++ b/src/router.js
@@ -7,9 +7,9 @@ import { i18n } from "./lang/";
 import EventBus from "./events/";
 import hydrateStore from "./hydrate";
 import Collections from "./routes/collections.vue";
-import ItemListing from "./routes/item-listing.vue";
+import Items from "./routes/items.vue";
 import FileLibrary from "./routes/file-library.vue";
-import Edit from "./routes/edit.vue";
+import Item from "./routes/item.vue";
 import Login from "./routes/login.vue";
 import NotFound from "./routes/not-found.vue";
 import Interfaces from "./routes/settings/interfaces.vue";
@@ -47,12 +47,12 @@ const router = new Router({
     {
       path: "/collections/:collection",
       props: true,
-      component: ItemListing
+      component: Items
     },
     {
       path: "/collections/:collection/:primaryKey",
       props: true,
-      component: Edit
+      component: Item
     },
     {
       path: "/ext/:id",
@@ -124,27 +124,27 @@ const router = new Router({
     },
     {
       path: "/collections/directus_files/:primaryKey",
-      component: Edit,
+      component: Item,
       alias: "/files/:primaryKey"
     },
     {
       path: "/collections/directus_users",
-      component: ItemListing,
+      component: Items,
       alias: "/users"
     },
     {
       path: "/collections/directus_users/:primaryKey",
-      component: Edit,
+      component: Item,
       alias: "/users/:primaryKey"
     },
     {
       path: "/collections/directus_activity",
-      component: ItemListing,
+      component: Items,
       alias: "/activity"
     },
     {
       path: "/collections/directus_activity/:primaryKey",
-      component: Edit,
+      component: Item,
       alias: "/activity/:primaryKey"
     },
     {
diff --git a/src/routes/collections.vue b/src/routes/collections.vue
index f2a550ab59..1b6ed5dbeb 100644
--- a/src/routes/collections.vue
+++ b/src/routes/collections.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="collections">
-    <v-header-bar :breadcrumb="[{
+    <v-header :breadcrumb="[{
       name: $t('collections'),
       path: '/collections'
     }]" />
diff --git a/src/routes/file-library.vue b/src/routes/file-library.vue
index 9c6f40cc7f..ef9985a1ee 100644
--- a/src/routes/file-library.vue
+++ b/src/routes/file-library.vue
@@ -1,7 +1,7 @@
 <template>
   <v-not-found v-if="notFound" />
   <div class="route-item-listing" v-else>
-    <v-header-bar info-toggle>
+    <v-header info-toggle>
       <template slot="title">
         <button
           :class="currentBookmark ? 'active' : null"
@@ -47,9 +47,9 @@
           :label="$t('new')"
           @click="newModal = true" />
       </template>
-    </v-header-bar>
+    </v-header>
 
-    <v-item-listing
+    <v-items
       v-if="preferences"
       ref="listing"
       :key="key"
@@ -76,7 +76,7 @@
           name="listing"
           @input="updatePreferences('view_type', $event)" />
       </template>
-      <v-listing-options
+      <v-ext-layout-options
         :key="`${collection}-${viewType}`"
         :type="viewType"
         :collection="collection"
@@ -140,7 +140,6 @@
 import formatTitle from "@directus/format-title";
 import shortid from "shortid";
 import store from "../store/";
-import VItemListing from "../components/item-listing/item-listing.vue";
 import VSearchFilter from "../components/search-filter/search-filter.vue";
 import VNotFound from "./not-found.vue";
 
@@ -154,7 +153,6 @@ export default {
     };
   },
   components: {
-    VItemListing,
     VSearchFilter,
     VNotFound
   },
diff --git a/src/routes/edit.vue b/src/routes/item.vue
similarity index 98%
rename from src/routes/edit.vue
rename to src/routes/item.vue
index 4809054ca2..4bb6ec0db7 100644
--- a/src/routes/edit.vue
+++ b/src/routes/item.vue
@@ -2,7 +2,7 @@
   <v-not-found v-if="notFound" />
 
   <div v-else-if="error">
-    <v-header-bar />
+    <v-header />
     <v-error
       v-if="error"
       icon="error_outline"
@@ -12,12 +12,12 @@
   </div>
 
   <div v-else-if="fields === null">
-    <v-header-bar />
+    <v-header />
     <v-loader area="content" />
   </div>
 
   <div v-else class="edit">
-    <v-header-bar :breadcrumb="breadcrumb" :info-toggle="!newItem">
+    <v-header :breadcrumb="breadcrumb" :info-toggle="!newItem">
       <template slot="buttons">
         <v-header-button
           v-if="!newItem && !singleItem"
@@ -50,7 +50,7 @@
           @click="save('leave')"
           @input="save" />
       </template>
-    </v-header-bar>
+    </v-header>
 
     <v-info-sidebar v-if="!newItem" wide>
       <div class="tabs">
@@ -64,7 +64,7 @@
           :class="{ active: activeTab === 'activity' }"
           @click="activeTab = 'activity'">{{ $t('activity') }}</button>
       </div>
-      <v-activity-overview
+      <v-activity
         :activity="activity"
         :revisions="revisions"
         :loading="activityLoading"
@@ -73,7 +73,7 @@
         @revert="revertActivity = $event" />
     </v-info-sidebar>
 
-    <v-edit-form
+    <v-form
       :fields="fields"
       :values="values"
       :collection="collection"
@@ -119,7 +119,7 @@
         @close="revertActivity = false">
         <div class="revert">
           <p>{{ $t('revert_copy', { date: $d(revertActivity.date, 'long') }) }}</p>
-          <v-edit-form
+          <v-form
             readonly
             :values="revertActivity.revision.data"
             :fields="fields" />
@@ -136,7 +136,7 @@ import EventBus from "../events/";
 import { i18n } from "../lang/";
 import VLoader from "../components/loader.vue";
 import VError from "../components/error.vue";
-import VActivityOverview from "../components/activity-overview/activity-overview.vue";
+import VActivity from "../components/activity/activity.vue";
 import formatTitle from "@directus/format-title";
 import VNotFound from "./not-found.vue";
 import store from "../store/";
@@ -159,7 +159,7 @@ export default {
     VLoader,
     VNotFound,
     VError,
-    VActivityOverview
+    VActivity
   },
   props: {
     collection: {
diff --git a/src/routes/item-listing.vue b/src/routes/items.vue
similarity index 98%
rename from src/routes/item-listing.vue
rename to src/routes/items.vue
index 27e242d149..11fa84920f 100644
--- a/src/routes/item-listing.vue
+++ b/src/routes/items.vue
@@ -1,7 +1,7 @@
 <template>
   <v-not-found v-if="notFound" />
   <div class="route-item-listing" v-else>
-    <v-header-bar info-toggle>
+    <v-header info-toggle>
       <template slot="title">
         <button
           :class="currentBookmark ? 'active' : null"
@@ -47,9 +47,9 @@
           :label="$t('new')"
           :to="`/collections/${collection}/+`" />
       </template>
-    </v-header-bar>
+    </v-header>
 
-    <v-item-listing
+    <v-items
       v-if="preferences"
       ref="listing"
       :collection="collection"
@@ -75,7 +75,7 @@
           name="listing"
           @input="updatePreferences('view_type', $event)" />
       </template>
-      <v-listing-options
+      <v-ext-layout-options
         :key="`${collection}-${viewType}`"
         :type="viewType"
         :collection="collection"
@@ -111,7 +111,6 @@
 import formatTitle from "@directus/format-title";
 import shortid from "shortid";
 import store from "../store/";
-import VItemListing from "../components/item-listing/item-listing.vue";
 import VSearchFilter from "../components/search-filter/search-filter.vue";
 import VNotFound from "./not-found.vue";
 
@@ -125,7 +124,6 @@ export default {
     };
   },
   components: {
-    VItemListing,
     VSearchFilter,
     VNotFound
   },
diff --git a/src/routes/modal-debug.vue b/src/routes/modal-debug.vue
index 2c6ac39f83..2f4f511559 100644
--- a/src/routes/modal-debug.vue
+++ b/src/routes/modal-debug.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="modal-debug">
-    <v-header-bar title="Debug yo modals" />
+    <v-header title="Debug yo modals" />
 
     <label>
       Title
diff --git a/src/routes/not-found.vue b/src/routes/not-found.vue
index 9a4d7c0049..ea23686328 100644
--- a/src/routes/not-found.vue
+++ b/src/routes/not-found.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="not-found">
-    <v-header-bar :title="$t('page_not_found')" />
+    <v-header :title="$t('page_not_found')" />
     <v-error
       :title="$t('page_not_found')"
       :body="$t('page_not_found_body')"
diff --git a/src/routes/page-extension.vue b/src/routes/page-extension.vue
index 666a1f6278..1e4029a3b3 100644
--- a/src/routes/page-extension.vue
+++ b/src/routes/page-extension.vue
@@ -1,6 +1,6 @@
 <template>
   <v-not-found v-if="exists === false" />
-  <v-page v-else :id="id" />
+  <v-ext-page v-else :id="id" />
 </template>
 
 <script>
diff --git a/src/routes/settings/collections.vue b/src/routes/settings/collections.vue
index 4cdb243ce0..5ef88492e1 100644
--- a/src/routes/settings/collections.vue
+++ b/src/routes/settings/collections.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="collections">
-    <v-header-bar :breadcrumb="breadcrumb">
+    <v-header :breadcrumb="breadcrumb">
       <template slot="buttons">
         <v-header-button
           icon="add"
@@ -9,7 +9,7 @@
           :label="$t('new')"
           @click="addNew = true" />
       </template>
-    </v-header-bar>
+    </v-header>
     <v-error
       v-if="items.length === 0"
       :title="$t('no_collections')"
diff --git a/src/routes/settings/fields.vue b/src/routes/settings/fields.vue
index 7d65015136..42ad07b399 100644
--- a/src/routes/settings/fields.vue
+++ b/src/routes/settings/fields.vue
@@ -1,7 +1,7 @@
 <template>
   <not-found v-if="!collectionInfo" />
   <div class="settings-fields" v-else>
-    <v-header-bar :breadcrumb="breadcrumb">
+    <v-header :breadcrumb="breadcrumb">
        <template slot="buttons">
         <v-header-button
           icon="close"
@@ -18,7 +18,7 @@
           :label="$t('save')"
           @click="save" />
       </template>
-    </v-header-bar>
+    </v-header>
 
     <label class="label">Collection Name</label>
     <v-input
@@ -53,7 +53,7 @@
 
     <v-button @click="startEditingField({})" class="new-field">New Field</v-button>
 
-    <v-edit-form
+    <v-form
       v-if="fields"
       :fields="directusFields"
       :values="collectionInfo"
@@ -91,7 +91,6 @@ import { keyBy } from "lodash";
 import formatTitle from "@directus/format-title";
 import shortid from "shortid";
 import store from "../../store/";
-import VEditForm from "../../components/edit-form/edit-form.vue";
 import api from "../../api.js";
 import NotFound from "../not-found.vue";
 import VFieldSetup from "../../components/field-setup.vue";
@@ -106,7 +105,6 @@ export default {
     };
   },
   components: {
-    VEditForm,
     NotFound,
     VFieldSetup
   },
diff --git a/src/routes/settings/global.vue b/src/routes/settings/global.vue
index d90ad658e7..2bfeb34f43 100644
--- a/src/routes/settings/global.vue
+++ b/src/routes/settings/global.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="settings-global">
-    <v-header-bar :breadcrumb="links">
+    <v-header :breadcrumb="links">
       <template slot="buttons">
         <v-header-button
           :disabled="!editing"
@@ -10,9 +10,9 @@
           color="action"
           @click="save('leave')" />
       </template>
-    </v-header-bar>
+    </v-header>
 
-    <edit-form
+    <v-form
       :fields="fields"
       :values="settings"
       @stage-value="stageValue" />
@@ -27,7 +27,6 @@ import store from "../../store/";
 import EventBus from "../../events/";
 import { i18n } from "../../lang/";
 import api from "../../api";
-import EditForm from "../../components/edit-form/edit-form.vue";
 
 export default {
   name: "settings-global",
@@ -36,9 +35,6 @@ export default {
       title: `${this.$t("settings")} | ${this.$t("settings_global")}`
     };
   },
-  components: {
-    EditForm
-  },
   data() {
     return {
       saving: false,
diff --git a/src/routes/settings/interface-debugger.vue b/src/routes/settings/interface-debugger.vue
index 10f4e16f49..d2bafb399a 100644
--- a/src/routes/settings/interface-debugger.vue
+++ b/src/routes/settings/interface-debugger.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="interface-debugger">
-    <v-header-bar :breadcrumb="links" />
+    <v-header :breadcrumb="links" />
 
     <div
       :style="{ width: width + 'px' }"
       class="interface">
-      <v-interface
+      <v-ext-input
         v-model="value"
         :id="id"
         :name="id"
@@ -34,7 +34,7 @@
 
         <label>Listing</label>
         <div class="listing">
-          <v-readonly
+          <v-ext-display
             v-model="value"
             :interface-type="id"
             :name="id"
@@ -186,7 +186,7 @@
           :key="optionID">
           <label :for="optionID">{{ option.name }}</label>
           <p>{{ option.comment }}</p>
-          <v-interface
+          <v-ext-input
             v-model="options[optionID]"
             :id="option.interface"
             :name="optionID"
@@ -212,14 +212,14 @@
 
         <div class="misc">
           <label for="fields">Fields</label>
-          <v-interface
+          <v-ext-input
             :value="JSON.stringify(fields, null, 4)"
             @input="customFields = JSON.parse($event)"
             id="code"
             :options="{ language: 'application/json' }"
             name="fields" />
           <label for="values">Values</label>
-          <v-interface
+          <v-ext-input
             :value="JSON.stringify(values, null, 4)"
             @input="customValues = JSON.parse($event)"
             id="code"
diff --git a/src/routes/settings/interfaces.vue b/src/routes/settings/interfaces.vue
index f377db6820..3bd86a8080 100644
--- a/src/routes/settings/interfaces.vue
+++ b/src/routes/settings/interfaces.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="interfaces">
-    <v-header-bar :breadcrumb="links" />
+    <v-header :breadcrumb="links" />
     <v-table
       :columns="columns"
       :items="items"
diff --git a/src/routes/settings/permissions.vue b/src/routes/settings/permissions.vue
index 318d22ccf1..7e1ebf5cb7 100644
--- a/src/routes/settings/permissions.vue
+++ b/src/routes/settings/permissions.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-if="error">
-    <v-header-bar />
+    <v-header />
     <v-error
       v-if="error"
       icon="error_outline"
@@ -10,7 +10,7 @@
   </div>
 
   <div class="settings-permissions" v-else>
-    <v-header-bar :breadcrumb="breadcrumb">
+    <v-header :breadcrumb="breadcrumb">
 
       <template slot="buttons">
         <v-header-button
@@ -29,10 +29,10 @@
           @click="save" />
       </template>
 
-    </v-header-bar>
+    </v-header>
     <h2 class="style-1">{{ $t("permissions") }}</h2>
 
-    <v-permissions-widget
+    <v-permissions
       v-if="permissions && statuses"
       :permissions="permissions"
       :statuses="statuses"
@@ -40,7 +40,7 @@
       @input="setPermission" />
 
     <h2 class="style-1">{{ $t("role_settings") }}</h2>
-    <v-edit-form
+    <v-form
       v-if="fields && role"
       :fields="fields"
       :values="role"
@@ -63,8 +63,7 @@
 import { keyBy, mapValues } from "lodash";
 import formatTitle from "@directus/format-title";
 import api from "../../api";
-import VEditForm from "../../components/edit-form/edit-form.vue";
-import VPermissionsWidget from "../../components/permissions-widget/permissions-widget.vue";
+import VPermissions from "../../components/permissions/permissions.vue";
 
 export default {
   name: "settings-permissions",
@@ -78,8 +77,7 @@ export default {
     };
   },
   components: {
-    VEditForm,
-    VPermissionsWidget
+    VPermissions
   },
   data() {
     return {
@@ -470,7 +468,7 @@ export default {
           //   filter by directus data type instead of interface name
           this.statuses = this.$lodash.keyBy(
             fields.filter(field => field.interface === "status").map(field => ({
-              mapping: field.options.status_mapping,
+              mapping: field.options.statusMapping,
               collection: field.collection
             })),
             "collection"
diff --git a/src/routes/settings/roles.vue b/src/routes/settings/roles.vue
index 954035f6be..ccb3269518 100644
--- a/src/routes/settings/roles.vue
+++ b/src/routes/settings/roles.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="settings-roles">
-    <v-header-bar :breadcrumb="breadcrumb">
+    <v-header :breadcrumb="breadcrumb">
       <template slot="buttons">
         <v-header-button
           icon="add"
@@ -9,7 +9,7 @@
           :label="$t('new')"
           :to="`/settings/roles/+`" />
       </template>
-    </v-header-bar>
+    </v-header>
     <v-table
       :items="items"
       :columns="fields"
diff --git a/src/routes/settings/settings.vue b/src/routes/settings/settings.vue
index 7099f7b0e7..06044cc251 100644
--- a/src/routes/settings/settings.vue
+++ b/src/routes/settings/settings.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="settings">
-    <v-header-bar :breadcrumb="links" />
+    <v-header :breadcrumb="links" />
 
     <v-details
       :title="$t('settings_interface')"
diff --git a/src/store/modules/extensions/actions.js b/src/store/modules/extensions/actions.js
index d39c864163..517c6f53da 100644
--- a/src/store/modules/extensions/actions.js
+++ b/src/store/modules/extensions/actions.js
@@ -58,8 +58,8 @@ export function getExtensions({ commit }, type) {
     case "interfaces":
       request = api.getInterfaces();
       break;
-    case "listings":
-      request = api.getListings();
+    case "layouts":
+      request = api.getLayouts();
       break;
     case "pages":
       request = api.getPages();
@@ -120,7 +120,7 @@ export function getExtensions({ commit }, type) {
 export function getAllExtensions({ dispatch }) {
   return Promise.all([
     dispatch("getExtensions", "interfaces"),
-    dispatch("getExtensions", "listings"),
+    dispatch("getExtensions", "layouts"),
     dispatch("getExtensions", "pages")
   ]);
 }
diff --git a/src/store/modules/extensions/index.js b/src/store/modules/extensions/index.js
index 7c9f3de879..79f46ccef7 100644
--- a/src/store/modules/extensions/index.js
+++ b/src/store/modules/extensions/index.js
@@ -2,8 +2,9 @@ import * as actions from "./actions";
 import mutations from "./mutations";
 
 const state = {
-  listings: {},
-  interfaces: {}
+  layouts: {},
+  interfaces: {},
+  pages: {}
 };
 
 export default {
diff --git a/src/store/modules/extensions/mutations.js b/src/store/modules/extensions/mutations.js
index ce65d3bb6c..f0d6f80894 100644
--- a/src/store/modules/extensions/mutations.js
+++ b/src/store/modules/extensions/mutations.js
@@ -1,12 +1,12 @@
 import { keyBy } from "lodash";
-import { SET_INTERFACES, SET_LISTINGS, SET_PAGES } from "../../mutation-types";
+import { SET_INTERFACES, SET_LAYOUTS, SET_PAGES } from "../../mutation-types";
 
 const mutations = {
   [SET_INTERFACES](state, interfaces) {
     state.interfaces = keyBy(interfaces, "id");
   },
-  [SET_LISTINGS](state, listings) {
-    state.listings = keyBy(listings, "id");
+  [SET_LAYOUTS](state, layouts) {
+    state.layouts = keyBy(layouts, "id");
   },
   [SET_PAGES](state, pages) {
     state.pages = keyBy(pages, "id");
diff --git a/src/store/mutation-types.js b/src/store/mutation-types.js
index 224e6f9856..21a81a3280 100644
--- a/src/store/mutation-types.js
+++ b/src/store/mutation-types.js
@@ -26,7 +26,7 @@ export const STAGE_VALUE = "📝 Stage Value";
 
 // Extensions
 export const SET_INTERFACES = "📦 Set Interfaces";
-export const SET_LISTINGS = "📦 Set Listings";
+export const SET_LAYOUTS = "📦 Set Layouts";
 export const SET_PAGES = "📦 Set Pages";
 
 // Fields