diff --git a/packages/app-admin-ui/client/classes/List.js b/packages/app-admin-ui/client/classes/List.js
index 3e8e2421547..dbe57ee0c05 100644
--- a/packages/app-admin-ui/client/classes/List.js
+++ b/packages/app-admin-ui/client/classes/List.js
@@ -15,6 +15,7 @@ export default class List {
   constructor(config, adminMeta, views, listHooks = {}) {
     this.config = config;
     this.adminMeta = adminMeta;
+    this.hooks = listHooks;
 
     // TODO: undo this
     Object.assign(this, config);
diff --git a/packages/app-admin-ui/client/pages/Item/ItemTitle.js b/packages/app-admin-ui/client/pages/Item/ItemTitle.js
index c3ed94dd6d7..e49b5198b12 100644
--- a/packages/app-admin-ui/client/pages/Item/ItemTitle.js
+++ b/packages/app-admin-ui/client/pages/Item/ItemTitle.js
@@ -69,11 +69,15 @@ export let ItemTitle = memo(function ItemTitle({ titleText, adminPath }) {
         {itemHeaderActions ? (
           itemHeaderActions({ ItemId, AddNewItem })
         ) : (
-          <div>
-            <ItemId />
-            <AddNewItem />
-          </div>
-        )}
+            <div>
+              <ItemId />
+              <AddNewItem />
+            </div>
+          )}
+        {(list.hooks.components &&
+          list.hooks.components.ItemTitle &&
+          list.hooks.components.ItemTitle.map(TitleComponent => <TitleComponent {...{ ItemId, AddNewItem, list }} />)) ||
+          null}
       </FlexGroup>
     </HeaderInset>
   );
diff --git a/packages/app-admin-ui/client/pages/Item/index.js b/packages/app-admin-ui/client/pages/Item/index.js
index 4fc83678c83..6e365e74fc2 100644
--- a/packages/app-admin-ui/client/pages/Item/index.js
+++ b/packages/app-admin-ui/client/pages/Item/index.js
@@ -282,7 +282,13 @@ const ItemDetails = withRouter(
       return (
         <Fragment>
           {itemHasChanged && <PreventNavigation />}
-          <ItemTitle id={item.id} list={list} adminPath={adminPath} titleText={savedData._label_} />
+          <ItemTitle
+            item={item}
+            id={item.id}
+            list={list}
+            adminPath={adminPath}
+            titleText={savedData._label_}
+          />
           <Card css={{ marginBottom: '3em', paddingBottom: 0 }}>
             <Form>
               <AutocompleteCaptor />
diff --git a/packages/app-admin-ui/client/providers/AdminMeta.js b/packages/app-admin-ui/client/providers/AdminMeta.js
index 5d3f44d0ec7..4d5cc622cea 100644
--- a/packages/app-admin-ui/client/providers/AdminMeta.js
+++ b/packages/app-admin-ui/client/providers/AdminMeta.js
@@ -55,6 +55,7 @@ function readAdminMeta() {
   let hooks = {};
   if (typeof hookView === 'function') {
     [hooks] = readViews([hookView]);
+    adminMeta.hooks = hooks;
   }
   if (!hasInitialisedLists) {
     let viewsToLoad = new Set();
diff --git a/packages/field-views-loader/index.js b/packages/field-views-loader/index.js
index c3008693ed3..81b1ec02a14 100644
--- a/packages/field-views-loader/index.js
+++ b/packages/field-views-loader/index.js
@@ -53,6 +53,9 @@ module.exports = function() {
         [listPath]: {  // e.g "User"
           ...
           access: { create, read, update, delete, auth },
+          components: {
+            ////....
+          },
           views: {
             [fieldPath]: {  // e.g 'email'
               Controller: 'absolute/path/to/controller',