diff --git a/ang/crmContactcats.ang.php b/ang/crmContactcats.ang.php
index b35d1e7..61ff161 100644
--- a/ang/crmContactcats.ang.php
+++ b/ang/crmContactcats.ang.php
@@ -20,4 +20,8 @@ return [
     'api4',
   ],
   'settings' => [],
+  'basePages' => ['civicrm/search', 'civicrm/admin/search'],
+  'exports' => [
+    'contactcats_category_display' => 'E',
+  ],
 ];
diff --git a/ang/crmSearchDisplayContactCat.ang.php b/ang/crmSearchDisplayContactCat.ang.php
new file mode 100644
index 0000000..8abd092
--- /dev/null
+++ b/ang/crmSearchDisplayContactCat.ang.php
@@ -0,0 +1,22 @@
+<?php
+
+// Angular module crmSearchDisplayContactCat.
+// @see https://docs.civicrm.org/dev/en/latest/hooks/hook_civicrm_angularModules
+
+return [
+  'js' => [
+    'ang/crmSearchDisplayContactCat.js',
+    'ang/crmSearchDisplayContactCat/*.js',
+    // 'ang/crmSearchDisplayContactCat/*/*.js',
+  ],
+  'css' => [
+    'ang/crmSearchDisplayContactCat.css',
+  ],
+  'partials' => [
+    'ang/crmSearchDisplayContactCat',
+  ],
+  'requires' => ['crmUi', 'crmUtil', 'ngRoute'],
+  'settings' => [],
+  'basePages' => ['civicrm/search', 'civicrm/admin/search'],
+  'exports' => ['crmSearchAdminDisplayContactCat', 'crmSearchDisplayContactCat'],
+];
diff --git a/ang/crmSearchDisplayContactCat.css b/ang/crmSearchDisplayContactCat.css
new file mode 100644
index 0000000..3e97d42
--- /dev/null
+++ b/ang/crmSearchDisplayContactCat.css
@@ -0,0 +1 @@
+/* Add any CSS rules for Angular module "crmContactcats" */
diff --git a/ang/crmSearchDisplayContactCat.js b/ang/crmSearchDisplayContactCat.js
new file mode 100644
index 0000000..3986962
--- /dev/null
+++ b/ang/crmSearchDisplayContactCat.js
@@ -0,0 +1,73 @@
+console.log(123);
+// see https://docs.civicrm.org/dev/en/latest/searchkit/displays/
+(function(angular, $, _) {
+  // Declare a list of dependencies.
+  angular.module('crmSearchDisplayContactCat', CRM.angRequires('crmSearchDisplayContactCat'));
+  // angular.module('crmContactcats').component();
+
+  // This is to be the display
+  // NOTE: the component name is {CamelCaseNameFromOptionValue}
+  // Standard seems to be to name crmSearchDisplay{YourName}
+  angular.module("crmSearchDisplayContactCat").component("crmSearchDisplayContactCat", {
+    templateUrl: "~/crmSearchDisplayContactCat/crmSearchDisplayContactCat.html",
+    bindings: {
+      apiEntity: '@',
+      search: '<',
+      display: '<',
+      apiParams: '<',
+      settings: '<',
+      filters: '<',
+      totalCount: '=?'
+    },
+    // controller: function($scope, $timeout, crmApi4, crmStatus, $document) {
+    controller: function($scope, $element, searchDisplayBaseTrait, searchDisplayTasksTrait) {
+      // Mix in required traits
+      ctrl = angular.extend(this, _.cloneDeep(searchDisplayBaseTrait), _.cloneDeep(searchDisplayTasksTrait));
+      console.log("hello display");
+      var ts = ($scope.ts = CRM.ts(null)),
+        ctrl = this;
+
+      // this.$onInit gets run after the this controller is called, and after the bindings have been applied.
+      this.$onInit = function() {
+        console.log("calling initializeDisplay");
+        this.initializeDisplay($scope, $element);
+      };
+    }
+  });
+
+  // This is to be the admin settings for the display
+  // NOTE: the component name is 'searchAdminDisplay'{CamelCaseValueFromOptionValue}
+  angular.module("crmSearchDisplayContactCat").component("searchAdminDisplayContactCat", {
+    templateUrl: "~/crmSearchDisplayContactCat/searchAdminDisplayContactCat.html",
+    bindings: {
+      display: '<',
+      apiEntity: '<',
+      apiParams: '<'
+    },
+    require: {
+      parent: '^crmSearchAdminDisplay'
+    },
+    controller: function($scope, searchMeta, crmUiHelp) {
+      console.log("hello admin");
+      let ctrl = this;
+      // var ts = ($scope.ts = CRM.ts(null)),
+      //   ctrl = this;
+      this.getColTypes = function() {
+        return ctrl.parent.colTypes;
+      };
+      // this.$onInit gets run after the this controller is called, and after the bindings have been applied.
+      this.$onInit = async function() {
+        if (!ctrl.display.settings) {
+          console.log("applying display.settings as was nonwl");
+          ctrl.display.settings = {
+            something: 'nothing',
+            limit: ctrl.parent.getDefaultLimit(),
+            sort: ctrl.parent.getDefaultSort(),
+            pager: {}
+          };
+        }
+        ctrl.parent.initColumns({});
+      };
+    }});
+
+})(angular, CRM.$, CRM._);
diff --git a/ang/crmSearchDisplayContactCat/crmSearchDisplayContactCat.html b/ang/crmSearchDisplayContactCat/crmSearchDisplayContactCat.html
new file mode 100644
index 0000000..49fd2a9
--- /dev/null
+++ b/ang/crmSearchDisplayContactCat/crmSearchDisplayContactCat.html
@@ -0,0 +1,18 @@
+<div class="crm-search-display crm-search-display-contact-cat">
+  <p>This is the crmSearchDisplayContactCat thing</p>
+  <div class="form-inline">
+    <div class="btn-group" ng-include="'~/crmSearchDisplay/SearchButton.html'" ></div>
+    <div class="form-group pull-right" ng-include="'~/crmSearchDisplay/toolbar.html'" ng-if="$ctrl.toolbar"></div>
+  </div>
+  <ol style="list-style: disc;">
+    <li ng-repeat="(rowIndex, row) in $ctrl.results" class="{{:: row.cssClass }}">
+      <span style="color:{{row.data['ContactCategory_ContactCategoryDefinition_category_definition_id_01.color']}};" >
+        <i class="crm-i {{row.data['ContactCategory_ContactCategoryDefinition_category_definition_id_01.icon']}}" ></i>
+        {{row.data['category_definition_id:label']}}
+      </span>
+    </li>
+
+  </ol>
+  <div ng-include="'~/crmSearchDisplay/Pager.html'"></div>
+</div>
+
diff --git a/ang/crmSearchDisplayContactCat/searchAdminDisplayContactCat.html b/ang/crmSearchDisplayContactCat/searchAdminDisplayContactCat.html
new file mode 100644
index 0000000..ce01362
--- /dev/null
+++ b/ang/crmSearchDisplayContactCat/searchAdminDisplayContactCat.html
@@ -0,0 +1 @@
+hello
diff --git a/managed/OptionValue_crm_search_display_contact_cat.mgd.php b/managed/OptionValue_crm_search_display_contact_cat.mgd.php
new file mode 100644
index 0000000..1f6aafd
--- /dev/null
+++ b/managed/OptionValue_crm_search_display_contact_cat.mgd.php
@@ -0,0 +1,66 @@
+<?php
+use CRM_Contactcats_ExtensionUtil as E;
+
+return [
+  [
+    'name' => 'OptionValue_crm_search_display_contact_cat',
+    'entity' => 'OptionValue',
+    'cleanup' => 'unused',
+    'update' => 'unmodified',
+    'params' => [
+      'version' => 4,
+      'values' => [
+        'option_group_id.name' => 'search_display_type',
+        'label' => E::ts('Category'),
+        'value' => 'contact-cat',
+        'name' => 'crm-search-display-contact-cat',
+        'weight' => 6,
+        'description' => E::ts('Shows the current and previous categories for this contact'),
+        'icon' => 'fa-tag',
+      ],
+      'match' => [
+        'option_group_id',
+        'name',
+      ],
+    ],
+  ],
+  // Weird, so this bit belongs elsewhere
+  [
+    'name' => 'OptionValue_crm_search_display_contact_cat_SearchDisplay_Category_per_contact_Category_1',
+    'entity' => 'SearchDisplay',
+    'cleanup' => 'unused',
+    'update' => 'unmodified',
+    'params' => [
+      'version' => 4,
+      'values' => [
+        'name' => 'Category_per_contact_Category_1',
+        'label' => E::ts('Category Category'),
+        'saved_search_id.name' => 'Category_per_contact',
+        'type' => 'contact-cat',
+        'settings' => [
+          'something' => 'nothing',
+          'limit' => 50,
+          'sort' => [],
+          'pager' => [],
+          // not sure about the columns bit.
+          'columns' => [
+            [
+              'type' => 'field',
+              'key' => 'id',
+              'dataType' => 'Integer',
+            ],
+            [
+              'type' => 'field',
+              'key' => 'category_definition_id:label',
+              'dataType' => 'Integer',
+            ],
+          ],
+        ],
+      ],
+      'match' => [
+        'saved_search_id',
+        'name',
+      ],
+    ],
+  ],
+];