diff --git a/src/dev/storybook/aliases.ts b/src/dev/storybook/aliases.ts
index 85bfd4a7a4d26..f6378d9940bba 100644
--- a/src/dev/storybook/aliases.ts
+++ b/src/dev/storybook/aliases.ts
@@ -25,5 +25,6 @@ export const storybookAliases = {
   embeddable: 'src/plugins/embeddable/scripts/storybook.js',
   infra: 'x-pack/legacy/plugins/infra/scripts/storybook.js',
   security_solution: 'x-pack/plugins/security_solution/scripts/storybook.js',
+  tags: 'x-pack/plugins/tags/scripts/storybook.js',
   ui_actions_enhanced: 'x-pack/plugins/ui_actions_enhanced/scripts/storybook.js',
 };
diff --git a/src/plugins/bfetch/common/api.ts b/src/plugins/bfetch/common/api.ts
new file mode 100644
index 0000000000000..c329cc0dc9626
--- /dev/null
+++ b/src/plugins/bfetch/common/api.ts
@@ -0,0 +1,25 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export type ApiMethod<Payload = unknown, Result = unknown> = (payload: Payload) => Promise<Result>;
+
+export interface ApiMethodRequest<Payload = unknown> {
+  name: string;
+  payload: Payload;
+}
diff --git a/src/plugins/bfetch/common/index.ts b/src/plugins/bfetch/common/index.ts
index 085b8e7c58a67..067c8bdf16056 100644
--- a/src/plugins/bfetch/common/index.ts
+++ b/src/plugins/bfetch/common/index.ts
@@ -21,3 +21,4 @@ export * from './util';
 export * from './streaming';
 export * from './buffer';
 export * from './batch';
+export * from './api';
diff --git a/src/plugins/bfetch/public/mocks.ts b/src/plugins/bfetch/public/mocks.ts
index f457b9ae5d671..c7c13159b809e 100644
--- a/src/plugins/bfetch/public/mocks.ts
+++ b/src/plugins/bfetch/public/mocks.ts
@@ -28,6 +28,7 @@ const createSetupContract = (): Setup => {
   const setupContract: Setup = {
     fetchStreaming: jest.fn(),
     batchedFunction: jest.fn(),
+    createApi: jest.fn(),
   };
   return setupContract;
 };
@@ -36,6 +37,7 @@ const createStartContract = (): Start => {
   const startContract: Start = {
     fetchStreaming: jest.fn(),
     batchedFunction: jest.fn(),
+    createApi: jest.fn(),
   };
 
   return startContract;
diff --git a/src/plugins/bfetch/public/plugin.ts b/src/plugins/bfetch/public/plugin.ts
index 5f01957c0908e..800f45cff6884 100644
--- a/src/plugins/bfetch/public/plugin.ts
+++ b/src/plugins/bfetch/public/plugin.ts
@@ -18,8 +18,9 @@
  */
 
 import { CoreStart, PluginInitializerContext, CoreSetup, Plugin } from 'src/core/public';
+import { Ensure } from '@kbn/utility-types';
 import { fetchStreaming as fetchStreamingStatic, FetchStreamingParams } from './streaming';
-import { removeLeadingSlash } from '../common';
+import { removeLeadingSlash, ApiMethod } from '../common';
 import {
   createStreamingBatchedFunction,
   BatchedFunc,
@@ -37,6 +38,12 @@ export interface BfetchPublicContract {
   batchedFunction: <Payload, Result extends object>(
     params: StreamingBatchedFunctionParams<Payload, Result>
   ) => BatchedFunc<Payload, Result>;
+  createApi: <Api extends object>(
+    url: string
+  ) => <K extends keyof Api>(
+    name: K,
+    payload: Parameters<Ensure<Api[K], ApiMethod>>[0]
+  ) => ReturnType<Ensure<Api[K], ApiMethod>>;
 }
 
 export type BfetchPublicSetup = BfetchPublicContract;
@@ -61,9 +68,15 @@ export class BfetchPublicPlugin
     const fetchStreaming = this.fetchStreaming(version, basePath);
     const batchedFunction = this.batchedFunction(fetchStreaming);
 
+    const createApi: BfetchPublicContract['createApi'] = ((url: string) => {
+      const fn = batchedFunction({ url });
+      return async (name, payload) => await fn({ name, payload } as unknown);
+    }) as BfetchPublicContract['createApi'];
+
     this.contract = {
       fetchStreaming,
       batchedFunction,
+      createApi,
     };
 
     return this.contract;
diff --git a/src/plugins/bfetch/server/mocks.ts b/src/plugins/bfetch/server/mocks.ts
index 5a772d641493d..80b404e61d85f 100644
--- a/src/plugins/bfetch/server/mocks.ts
+++ b/src/plugins/bfetch/server/mocks.ts
@@ -29,6 +29,7 @@ const createSetupContract = (): Setup => {
     addBatchProcessingRoute: jest.fn(),
     addStreamingResponseRoute: jest.fn(),
     createStreamingRequestHandler: jest.fn(),
+    createApiRoute: jest.fn(),
   };
   return setupContract;
 };
diff --git a/src/plugins/bfetch/server/plugin.ts b/src/plugins/bfetch/server/plugin.ts
index c27f34b8233cb..12b628db2247d 100644
--- a/src/plugins/bfetch/server/plugin.ts
+++ b/src/plugins/bfetch/server/plugin.ts
@@ -26,6 +26,7 @@ import {
   KibanaRequest,
   RouteMethod,
   RequestHandler,
+  RequestHandlerContext,
 } from 'src/core/server';
 import { schema } from '@kbn/config-schema';
 import { Subject } from 'rxjs';
@@ -39,6 +40,7 @@ import {
 } from '../common';
 import { StreamingRequestHandler } from './types';
 import { createNDJSONStream } from './streaming';
+import { ApiMethod, ApiMethodRequest } from '../common';
 
 // eslint-disable-next-line
 export interface BfetchServerSetupDependencies {}
@@ -54,12 +56,20 @@ export interface BatchProcessingRouteParams<BatchItemData, BatchItemResult> {
 export interface BfetchServerSetup {
   addBatchProcessingRoute: <BatchItemData extends object, BatchItemResult extends object>(
     path: string,
-    handler: (request: KibanaRequest) => BatchProcessingRouteParams<BatchItemData, BatchItemResult>
+    handler: (
+      request: KibanaRequest,
+      context: RequestHandlerContext
+    ) => BatchProcessingRouteParams<BatchItemData, BatchItemResult>
   ) => void;
+
   addStreamingResponseRoute: <Payload, Response>(
     path: string,
-    params: (request: KibanaRequest) => StreamingResponseHandler<Payload, Response>
+    params: (
+      request: KibanaRequest,
+      context: RequestHandlerContext
+    ) => StreamingResponseHandler<Payload, Response>
   ) => void;
+
   /**
    * Create a streaming request handler to be able to use an Observable to return chunked content to the client.
    * This is meant to be used with the `fetchStreaming` API of the `bfetch` client-side plugin.
@@ -83,7 +93,6 @@ export interface BfetchServerSetup {
    *     return results$;
    *   })
    * )}
-   *
    * ```
    *
    * @param streamHandler
@@ -91,6 +100,24 @@ export interface BfetchServerSetup {
   createStreamingRequestHandler: <Response, P, Q, B, Method extends RouteMethod = any>(
     streamHandler: StreamingRequestHandler<Response, P, Q, B, Method>
   ) => RequestHandler<P, Q, B, Method>;
+
+  /**
+   * Creates a batch processing route that can route between a map of API methods.
+   *
+   * @example
+   * ```ts
+   * plugins.bfetch.createApiRoute('/calculator', {
+   *   add: async ({a, b}) => ({ result: a + b }),
+   *   subtract: async ({a, b}) => ({ result: a - b }),
+   *   multiply: async ({a, b}) => ({ result: a * b }),
+   *   divide: async ({a, b}) => ({ result: a / b }),
+   * });
+   * ```
+   *
+   * @param path
+   * @param api
+   */
+  createApiRoute: (path: string, api: Record<string, ApiMethod<object, object>>) => void;
 }
 
 // eslint-disable-next-line
@@ -119,10 +146,22 @@ export class BfetchServerPlugin
     const addBatchProcessingRoute = this.addBatchProcessingRoute(addStreamingResponseRoute);
     const createStreamingRequestHandler = this.createStreamingRequestHandler({ logger });
 
+    const createApiRoute: BfetchServerSetup['createApiRoute'] = (path, api) => {
+      addBatchProcessingRoute(path, (request) => ({
+        onBatchItem: async ({ name, payload }: ApiMethodRequest<object>) => {
+          if (typeof name !== 'string') throw new Error('Api method name should be a string.');
+          if (!api.hasOwnProperty(name))
+            throw new Error(`Api method [name = ${name}] does not exist.`);
+          return await api[name](payload);
+        },
+      }));
+    };
+
     return {
       addBatchProcessingRoute,
       addStreamingResponseRoute,
       createStreamingRequestHandler,
+      createApiRoute,
     };
   }
 
@@ -147,7 +186,7 @@ export class BfetchServerPlugin
         },
       },
       async (context, request, response) => {
-        const handlerInstance = handler(request);
+        const handlerInstance = handler(request, context);
         const data = request.body;
         return response.ok({
           headers: streamingHeaders,
@@ -181,13 +220,16 @@ export class BfetchServerPlugin
     E extends ErrorLike = ErrorLike
   >(
     path: string,
-    handler: (request: KibanaRequest) => BatchProcessingRouteParams<BatchItemData, BatchItemResult>
+    handler: (
+      request: KibanaRequest,
+      context: RequestHandlerContext
+    ) => BatchProcessingRouteParams<BatchItemData, BatchItemResult>
   ) => {
     addStreamingResponseRoute<
       BatchRequestData<BatchItemData>,
       BatchResponseItem<BatchItemResult, E>
-    >(path, (request) => {
-      const handlerInstance = handler(request);
+    >(path, (request, context) => {
+      const handlerInstance = handler(request, context);
       return {
         getResponseStream: ({ batch }) => {
           const subject = new Subject<BatchResponseItem<BatchItemResult, E>>();
diff --git a/src/plugins/dashboard/public/application/actions/clone_panel_action.test.tsx b/src/plugins/dashboard/public/application/actions/clone_panel_action.test.tsx
index e7534fa09aa3f..44cf548985728 100644
--- a/src/plugins/dashboard/public/application/actions/clone_panel_action.test.tsx
+++ b/src/plugins/dashboard/public/application/actions/clone_panel_action.test.tsx
@@ -62,6 +62,7 @@ beforeEach(async () => {
     overlays: coreStart.overlays,
     savedObjectMetaData: {} as any,
     uiActions: {} as any,
+    getRenderBeforeDashboard: () => () => null,
   };
   const input = getSampleDashboardInput({
     panels: {
diff --git a/src/plugins/dashboard/public/application/application.ts b/src/plugins/dashboard/public/application/application.ts
index 08eeb19dcda93..8c83134fd490b 100644
--- a/src/plugins/dashboard/public/application/application.ts
+++ b/src/plugins/dashboard/public/application/application.ts
@@ -47,6 +47,8 @@ import { SavedObjectLoader, SavedObjectsStart } from '../../../saved_objects/pub
 import 'angular-sanitize';
 // required for ngRoute
 import 'angular-route';
+import { DashboardContainer } from './embeddable';
+import { TagPickerType } from '../plugin';
 
 export interface RenderDeps {
   pluginInitializerContext: PluginInitializerContext;
@@ -74,6 +76,9 @@ export interface RenderDeps {
   scopedHistory: () => ScopedHistory;
   savedObjects: SavedObjectsStart;
   restorePreviousUrl: () => void;
+  renderBeforeDashboard: (dashboard: DashboardContainer) => React.ReactNode;
+  renderTags: (kid: string) => React.ReactNode;
+  getTagPicker: () => TagPickerType;
 }
 
 let angularModuleInstance: IModule | null = null;
diff --git a/src/plugins/dashboard/public/application/embeddable/dashboard_container.tsx b/src/plugins/dashboard/public/application/embeddable/dashboard_container.tsx
index f1ecd0f221926..750a11d3557a5 100644
--- a/src/plugins/dashboard/public/application/embeddable/dashboard_container.tsx
+++ b/src/plugins/dashboard/public/application/embeddable/dashboard_container.tsx
@@ -89,6 +89,7 @@ export interface DashboardContainerOptions {
   SavedObjectFinder: React.ComponentType<any>;
   ExitFullScreenButton: React.ComponentType<any>;
   uiActions: UiActionsStart;
+  getRenderBeforeDashboard: () => (dashboard: DashboardContainer) => React.ReactNode;
 }
 
 export type DashboardReactContextValue = KibanaReactContextValue<DashboardContainerOptions>;
@@ -115,6 +116,7 @@ export class DashboardContainer extends Container<InheritedChildInput, Dashboard
       options.embeddable.getEmbeddableFactory,
       parent
     );
+
     this.embeddablePanel = options.embeddable.getEmbeddablePanel(stateTransfer);
   }
 
@@ -188,6 +190,7 @@ export class DashboardContainer extends Container<InheritedChildInput, Dashboard
     ReactDOM.render(
       <I18nProvider>
         <KibanaContextProvider services={this.options}>
+          {this.options.getRenderBeforeDashboard()(this)}
           <DashboardViewport
             renderEmpty={this.renderEmpty}
             container={this}
diff --git a/src/plugins/dashboard/public/application/embeddable/dashboard_container_factory.tsx b/src/plugins/dashboard/public/application/embeddable/dashboard_container_factory.tsx
index 4107a00ba80ce..a461067e48fde 100644
--- a/src/plugins/dashboard/public/application/embeddable/dashboard_container_factory.tsx
+++ b/src/plugins/dashboard/public/application/embeddable/dashboard_container_factory.tsx
@@ -41,6 +41,7 @@ interface StartServices {
   SavedObjectFinder: React.ComponentType<any>;
   ExitFullScreenButton: React.ComponentType<any>;
   uiActions: UiActionsStart;
+  getRenderBeforeDashboard: () => (dashboard: DashboardContainer) => React.ReactNode;
 }
 
 export type DashboardContainerFactory = EmbeddableFactory<
diff --git a/src/plugins/dashboard/public/application/legacy_app.js b/src/plugins/dashboard/public/application/legacy_app.js
index 8b8fdcb7a76ac..7e7005722c2b6 100644
--- a/src/plugins/dashboard/public/application/legacy_app.js
+++ b/src/plugins/dashboard/public/application/legacy_app.js
@@ -41,6 +41,8 @@ export function initDashboardApp(app, deps) {
   app.directive('dashboardListing', function (reactDirective) {
     return reactDirective(DashboardListing, [
       ['core', { watchDepth: 'reference' }],
+      ['renderTags', { watchDepth: 'reference' }],
+      ['tagPicker', { watchDepth: 'reference' }],
       ['createItem', { watchDepth: 'reference' }],
       ['getViewUrl', { watchDepth: 'reference' }],
       ['editItem', { watchDepth: 'reference' }],
@@ -138,6 +140,12 @@ export function initDashboardApp(app, deps) {
           addHelpMenuToAppChrome(deps.chrome, deps.core.docLinks);
           $scope.core = deps.core;
 
+          $scope.renderTags = (data) => {
+            const kid = `kid:::so:saved_objects/dashboard/${data.id}`;
+            return deps.renderTags(kid);
+          };
+          $scope.tagPicker = deps.getTagPicker();
+
           $scope.$on('$destroy', () => {
             stopSyncingQueryServiceStateWithUrl();
           });
diff --git a/src/plugins/dashboard/public/application/listing/dashboard_listing.js b/src/plugins/dashboard/public/application/listing/dashboard_listing.js
index c8cb551fbe561..280ec4e2d6b46 100644
--- a/src/plugins/dashboard/public/application/listing/dashboard_listing.js
+++ b/src/plugins/dashboard/public/application/listing/dashboard_listing.js
@@ -42,6 +42,7 @@ export class DashboardListing extends React.Component {
     return (
       <I18nProvider>
         <TableListView
+          TagPicker={this.props.tagPicker}
           headingId="dashboardListingHeading"
           createItem={this.props.hideWriteControls ? null : this.props.createItem}
           findItems={this.props.findItems}
@@ -174,13 +175,22 @@ export class DashboardListing extends React.Component {
         dataType: 'string',
         sortable: true,
       },
+      {
+        name: 'Tags',
+        sortable: false,
+        render: (data) => {
+          return this.props.renderTags(data);
+        },
+      },
     ];
     return tableColumns;
   }
 }
 
 DashboardListing.propTypes = {
+  renderTags: PropTypes.func.isRequired,
   createItem: PropTypes.func.isRequired,
+  tagPicker: PropTypes.func.isRequired,
   findItems: PropTypes.func.isRequired,
   deleteItems: PropTypes.func.isRequired,
   editItem: PropTypes.func.isRequired,
diff --git a/src/plugins/dashboard/public/application/listing/dashboard_listing_ng_wrapper.html b/src/plugins/dashboard/public/application/listing/dashboard_listing_ng_wrapper.html
index ba05c138a0cba..3dcf076770ad1 100644
--- a/src/plugins/dashboard/public/application/listing/dashboard_listing_ng_wrapper.html
+++ b/src/plugins/dashboard/public/application/listing/dashboard_listing_ng_wrapper.html
@@ -1,6 +1,8 @@
 <dashboard-listing
   core="core"
   create-item="create"
+  render-tags="renderTags"
+  tag-picker="tagPicker"
   get-view-url="getViewUrl"
   edit-item="editItem"
   find-items="find"
diff --git a/src/plugins/dashboard/public/index.ts b/src/plugins/dashboard/public/index.ts
index 17968dd0281e6..9a527e1fd5927 100644
--- a/src/plugins/dashboard/public/index.ts
+++ b/src/plugins/dashboard/public/index.ts
@@ -31,7 +31,7 @@ export {
 } from './application';
 export { DashboardConstants, createDashboardEditUrl } from './dashboard_constants';
 
-export { DashboardStart, DashboardUrlGenerator } from './plugin';
+export { DashboardSetup, DashboardStart, DashboardUrlGenerator } from './plugin';
 export { DASHBOARD_APP_URL_GENERATOR, createDashboardUrlGenerator } from './url_generator';
 export { addEmbeddableToDashboardUrl } from './url_utils/url_helper';
 export { SavedObjectDashboard } from './saved_dashboards';
diff --git a/src/plugins/dashboard/public/plugin.tsx b/src/plugins/dashboard/public/plugin.tsx
index 041a02a251e8a..5055a4d7b029a 100644
--- a/src/plugins/dashboard/public/plugin.tsx
+++ b/src/plugins/dashboard/public/plugin.tsx
@@ -73,6 +73,7 @@ import {
   RenderDeps,
   ReplacePanelAction,
   ReplacePanelActionContext,
+  DashboardContainer,
 } from './application';
 import {
   createDashboardUrlGenerator,
@@ -115,7 +116,16 @@ interface StartDependencies {
   savedObjects: SavedObjectsStart;
 }
 
-export type Setup = void;
+export type TagPickerType = React.ComponentType<{
+  selected: string[];
+  onChange: (selected: string[]) => void;
+}>;
+
+export interface DashboardSetup {
+  setRenderBeforeDashboard: (renderer: (dashboard: DashboardContainer) => React.ReactNode) => void;
+  setRenderTags: (renderer: (kid: string) => React.ReactNode) => void;
+  setTagPicker: (TagPicker: TagPickerType) => void;
+}
 
 export interface DashboardStart {
   getSavedDashboardLoader: () => SavedObjectLoader;
@@ -136,7 +146,7 @@ declare module '../../../plugins/ui_actions/public' {
 }
 
 export class DashboardPlugin
-  implements Plugin<Setup, DashboardStart, SetupDependencies, StartDependencies> {
+  implements Plugin<DashboardSetup, DashboardStart, SetupDependencies, StartDependencies> {
   constructor(private initializerContext: PluginInitializerContext) {}
 
   private appStateUpdater = new BehaviorSubject<AppUpdater>(() => ({}));
@@ -146,10 +156,18 @@ export class DashboardPlugin
 
   private dashboardUrlGenerator?: DashboardUrlGenerator;
 
+  private renderBeforeDashboard: (dashboard: DashboardContainer) => React.ReactNode = () => null;
+  private getRenderBeforeDashboard: () => (dashboard: DashboardContainer) => React.ReactNode = () =>
+    this.renderBeforeDashboard;
+
+  private renderTags: (kid: string) => React.ReactNode = (kid) => kid;
+
+  private TagPicker: TagPickerType = () => null;
+
   public setup(
     core: CoreSetup<StartDependencies, DashboardStart>,
     { share, uiActions, embeddable, home, kibanaLegacy, data, usageCollection }: SetupDependencies
-  ): Setup {
+  ): DashboardSetup {
     const expandPanelAction = new ExpandPanelAction();
     uiActions.registerAction(expandPanelAction);
     uiActions.attachAction(CONTEXT_MENU_TRIGGER, expandPanelAction.id);
@@ -203,6 +221,7 @@ export class DashboardPlugin
         SavedObjectFinder: getSavedObjectFinder(coreStart.savedObjects, coreStart.uiSettings),
         ExitFullScreenButton,
         uiActions: deps.uiActions,
+        getRenderBeforeDashboard: this.getRenderBeforeDashboard,
       };
     };
 
@@ -296,6 +315,9 @@ export class DashboardPlugin
           scopedHistory: () => this.currentHistory!,
           savedObjects,
           restorePreviousUrl,
+          renderBeforeDashboard: this.renderBeforeDashboard,
+          renderTags: this.renderTags,
+          getTagPicker: () => this.TagPicker,
         };
         // make sure the index pattern list is up to date
         await dataStart.indexPatterns.clearCache();
@@ -354,6 +376,18 @@ export class DashboardPlugin
         category: FeatureCatalogueCategory.DATA,
       });
     }
+
+    return {
+      setRenderBeforeDashboard: (renderer) => {
+        this.renderBeforeDashboard = renderer;
+      },
+      setRenderTags: (renderer) => {
+        this.renderTags = renderer;
+      },
+      setTagPicker: (TagPicker) => {
+        this.TagPicker = TagPicker;
+      },
+    };
   }
 
   private addEmbeddableToDashboard(
diff --git a/src/plugins/dashboard/public/saved_dashboards/saved_dashboard.ts b/src/plugins/dashboard/public/saved_dashboards/saved_dashboard.ts
index f3bdfd8e17f0a..62fec6a2d8f11 100644
--- a/src/plugins/dashboard/public/saved_dashboards/saved_dashboard.ts
+++ b/src/plugins/dashboard/public/saved_dashboards/saved_dashboard.ts
@@ -63,6 +63,12 @@ export function createSavedDashboardClass(
       timeRestore: 'boolean',
       timeTo: 'keyword',
       timeFrom: 'keyword',
+      _tags: {
+        type: 'object',
+        properties: {
+          tagId: { type: 'keyword' },
+        },
+      },
       refreshInterval: {
         type: 'object',
         properties: {
diff --git a/src/plugins/dashboard/server/saved_objects/dashboard.ts b/src/plugins/dashboard/server/saved_objects/dashboard.ts
index 14d2c822a421e..b34c9bbe202cd 100644
--- a/src/plugins/dashboard/server/saved_objects/dashboard.ts
+++ b/src/plugins/dashboard/server/saved_objects/dashboard.ts
@@ -56,6 +56,12 @@ export const dashboardSavedObjectType: SavedObjectsType = {
           value: { type: 'integer' },
         },
       },
+      _tags: {
+        type: 'object',
+        properties: {
+          tagId: { type: 'keyword' },
+        },
+      },
       timeFrom: { type: 'keyword' },
       timeRestore: { type: 'boolean' },
       timeTo: { type: 'keyword' },
diff --git a/src/plugins/extensions/kibana.json b/src/plugins/extensions/kibana.json
new file mode 100644
index 0000000000000..8db62662c1d57
--- /dev/null
+++ b/src/plugins/extensions/kibana.json
@@ -0,0 +1,8 @@
+{
+  "id": "extensions",
+  "version": "kibana",
+  "server": false,
+  "ui": true,
+  "requiredPlugins": [],
+  "optionalPlugins": []
+}
diff --git a/src/plugins/extensions/public/index.ts b/src/plugins/extensions/public/index.ts
new file mode 100644
index 0000000000000..cff60b81e850c
--- /dev/null
+++ b/src/plugins/extensions/public/index.ts
@@ -0,0 +1,24 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { ExtensionsPlugin } from './plugin';
+
+export const plugin = () => new ExtensionsPlugin();
+
+export { ExtensionsPlugin, ExtensionsPluginSetup, ExtensionsPluginStart } from './plugin';
diff --git a/src/plugins/extensions/public/plugin.ts b/src/plugins/extensions/public/plugin.ts
new file mode 100644
index 0000000000000..878ccd1afc17f
--- /dev/null
+++ b/src/plugins/extensions/public/plugin.ts
@@ -0,0 +1,51 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { Plugin } from 'kibana/public';
+
+export interface ExtensionsTags {
+  TagList?: React.ComponentType<{ kid: string }>;
+  TagListEditable?: React.ComponentType<{ kid: string }>;
+}
+
+export interface ExtensionsPluginSetup {
+  readonly tags: ExtensionsTags;
+}
+
+export interface ExtensionsPluginStart {
+  readonly tags: ExtensionsTags;
+}
+
+export class ExtensionsPlugin
+  implements Plugin<ExtensionsPluginSetup, ExtensionsPluginStart, object, object> {
+  private readonly tags: ExtensionsTags = {};
+
+  setup(): ExtensionsPluginSetup {
+    return {
+      tags: this.tags,
+    };
+  }
+
+  start(): ExtensionsPluginStart {
+    return {
+      tags: this.tags,
+    };
+  }
+}
diff --git a/src/plugins/kibana_react/public/index.ts b/src/plugins/kibana_react/public/index.ts
index 7f8bf6c04cecc..c85d74b53f292 100644
--- a/src/plugins/kibana_react/public/index.ts
+++ b/src/plugins/kibana_react/public/index.ts
@@ -28,6 +28,7 @@ export * from './split_panel';
 export * from './react_router_navigate';
 export { ValidatedDualRange, Value } from './validated_range';
 export * from './notifications';
+export * from './toasts';
 export { Markdown, MarkdownSimple } from './markdown';
 export { reactToUiComponent, uiToReactComponent } from './adapters';
 export { useUrlTracker } from './use_url_tracker';
diff --git a/src/plugins/kibana_react/public/table_list_view/table_list_view.tsx b/src/plugins/kibana_react/public/table_list_view/table_list_view.tsx
index 2fa1debf51b5c..c2e867f1dbabb 100644
--- a/src/plugins/kibana_react/public/table_list_view/table_list_view.tsx
+++ b/src/plugins/kibana_react/public/table_list_view/table_list_view.tsx
@@ -70,6 +70,7 @@ export interface TableListViewProps {
    * If the table is not empty, this component renders its own h1 element using the same id.
    */
   headingId?: string;
+  TagPicker?: React.FC<{ selected: string[]; onChange: (selected: string[]) => void }>;
 }
 
 export interface TableListViewState {
@@ -83,6 +84,7 @@ export interface TableListViewState {
   filter: string;
   selectedIds: string[];
   totalItems: number;
+  tags: string[];
 }
 
 // saved object client does not support sorting by title because title is only mapped as analyzed
@@ -112,6 +114,7 @@ class TableListView extends React.Component<TableListViewProps, TableListViewSta
       showLimitError: false,
       filter: props.initialFilter,
       selectedIds: [],
+      tags: [],
     };
   }
 
@@ -130,7 +133,14 @@ class TableListView extends React.Component<TableListViewProps, TableListViewSta
 
   debouncedFetch = debounce(async (filter: string) => {
     try {
-      const response = await this.props.findItems(filter);
+      let tagFilter = '';
+      if (this.state.tags.length) {
+        tagFilter = `attributes._tags.tagId:("${this.state.tags.join('" | "')}")`;
+      }
+      const query = filter
+        ? `(title:(${filter}*) | description:(${filter}*)) + (${tagFilter})`
+        : tagFilter;
+      const response = await this.props.findItems(query);
 
       if (!this._isMounted) {
         return;
@@ -459,18 +469,28 @@ class TableListView extends React.Component<TableListViewProps, TableListViewSta
       />
     );
     return (
-      <EuiInMemoryTable
-        itemId="id"
-        items={this.state.items}
-        columns={(columns as unknown) as Array<EuiBasicTableColumn<object>>} // EuiBasicTableColumn is stricter than Column
-        pagination={this.pagination}
-        loading={this.state.isFetchingItems}
-        message={noItemsMessage}
-        selection={selection}
-        search={search}
-        sorting={true}
-        data-test-subj="itemsInMemTable"
-      />
+      <>
+        {!!this.props.TagPicker && (
+          <this.props.TagPicker
+            selected={this.state.tags}
+            onChange={(tags) => {
+              this.setState({ tags }, this.fetchItems);
+            }}
+          />
+        )}
+        <EuiInMemoryTable
+          itemId="id"
+          items={this.state.items}
+          columns={(columns as unknown) as Array<EuiBasicTableColumn<object>>} // EuiBasicTableColumn is stricter than Column
+          pagination={this.pagination}
+          loading={this.state.isFetchingItems}
+          message={noItemsMessage}
+          selection={selection}
+          search={search}
+          sorting={true}
+          data-test-subj="itemsInMemTable"
+        />
+      </>
     );
   }
 
@@ -540,11 +560,7 @@ class TableListView extends React.Component<TableListViewProps, TableListViewSta
 
   render() {
     return (
-      <EuiPage
-        data-test-subj={this.props.entityName + 'LandingPage'}
-        className="itemListing__page"
-        restrictWidth
-      >
+      <EuiPage data-test-subj={this.props.entityName + 'LandingPage'} className="itemListing__page">
         <EuiPageBody
           aria-labelledby={this.state.hasInitialFetchReturned ? this.props.headingId : undefined}
         >
diff --git a/src/plugins/kibana_react/public/toasts/context.tsx b/src/plugins/kibana_react/public/toasts/context.tsx
new file mode 100644
index 0000000000000..4f33f19c70a95
--- /dev/null
+++ b/src/plugins/kibana_react/public/toasts/context.tsx
@@ -0,0 +1,76 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { createContext, useContext, useMemo } from 'react';
+import { CoreStart, Toast } from '../../../../core/public';
+import { toMountPoint } from '../util';
+
+const context = createContext<CoreStart['notifications']['toasts'] | undefined>(undefined);
+
+export const ToastsProvider = context.Provider;
+
+export interface ToastsParams {
+  title?: React.ReactNode;
+  text?: React.ReactNode;
+  color?: Toast['color'];
+  iconType?: Toast['iconType'];
+  toastLifeTimeMs?: Toast['toastLifeTimeMs'];
+  onClose?: Toast['onClose'];
+}
+
+export const useToasts = () => {
+  const toasts = useContext(context)!;
+  const api = useMemo(
+    () => ({
+      add: ({ title, text, ...rest }: ToastsParams) =>
+        toasts.add({
+          ...rest,
+          title: title ? toMountPoint(<>{title}</>) : undefined,
+          text: text ? toMountPoint(<>{text || null}</>) : undefined,
+        }),
+      addDanger: ({ title, text, ...rest }: ToastsParams) =>
+        toasts.addDanger({
+          ...rest,
+          title: title ? toMountPoint(<>{title}</>) : undefined,
+          text: text ? toMountPoint(<>{text || null}</>) : undefined,
+        }),
+      addInfo: ({ title, text, ...rest }: ToastsParams) =>
+        toasts.addInfo({
+          ...rest,
+          title: title ? toMountPoint(<>{title}</>) : undefined,
+          text: text ? toMountPoint(<>{text || null}</>) : undefined,
+        }),
+      addSuccess: ({ title, text, ...rest }: ToastsParams) =>
+        toasts.addSuccess({
+          ...rest,
+          title: title ? toMountPoint(<>{title}</>) : undefined,
+          text: text ? toMountPoint(<>{text || null}</>) : undefined,
+        }),
+      addWarning: ({ title, text, ...rest }: ToastsParams) =>
+        toasts.addWarning({
+          ...rest,
+          title: title ? toMountPoint(<>{title}</>) : undefined,
+          text: text ? toMountPoint(<>{text || null}</>) : undefined,
+        }),
+      addError: toasts.addError.bind(toasts),
+    }),
+    [toasts]
+  );
+  return api;
+};
diff --git a/src/plugins/kibana_react/public/toasts/index.tsx b/src/plugins/kibana_react/public/toasts/index.tsx
new file mode 100644
index 0000000000000..7c4b4957913c0
--- /dev/null
+++ b/src/plugins/kibana_react/public/toasts/index.tsx
@@ -0,0 +1,20 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export { ToastsProvider, ToastsParams, useToasts } from './context';
diff --git a/src/plugins/saved_objects/public/saved_object/saved_object_loader.ts b/src/plugins/saved_objects/public/saved_object/saved_object_loader.ts
index 9e7346f3b673c..d7373684f9ec1 100644
--- a/src/plugins/saved_objects/public/saved_object/saved_object_loader.ts
+++ b/src/plugins/saved_objects/public/saved_object/saved_object_loader.ts
@@ -129,11 +129,11 @@ export class SavedObjectLoader {
     return this.savedObjectsClient
       .find<Record<string, unknown>>({
         type: this.lowercaseType,
-        search: search ? `${search}*` : undefined,
+        search: search ? `${search}` : undefined,
         perPage: size,
         page: 1,
-        searchFields: ['title^3', 'description'],
-        defaultSearchOperator: 'AND',
+        searchFields: ['title^3', 'description', '_tags.tagId'],
+        // defaultSearchOperator: 'AND',
         fields,
       } as SavedObjectsFindOptions)
       .then((resp) => {
diff --git a/src/plugins/saved_objects_management/public/management_section/objects_table/components/json_flyout.tsx b/src/plugins/saved_objects_management/public/management_section/objects_table/components/json_flyout.tsx
new file mode 100644
index 0000000000000..8a0083fb50a20
--- /dev/null
+++ b/src/plugins/saved_objects_management/public/management_section/objects_table/components/json_flyout.tsx
@@ -0,0 +1,93 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import {
+  EuiTitle,
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiFlyoutHeader,
+  EuiIcon,
+  EuiToolTip,
+  EuiCodeBlock,
+} from '@elastic/eui';
+import { IBasePath } from 'src/core/public';
+import { SavedObjectsClientContract, SavedObject } from 'src/core/public';
+import useMountedState from 'react-use/lib/useMountedState';
+import { getDefaultTitle, getSavedObjectLabel } from '../../../lib';
+
+export interface JsonFlyoutProps {
+  basePath: IBasePath;
+  savedObject: SavedObject<unknown>;
+  savedObjectsClient: SavedObjectsClientContract;
+  close: () => void;
+}
+
+export const JsonFlyout: React.FC<JsonFlyoutProps> = ({
+  close,
+  savedObject,
+  savedObjectsClient,
+}) => {
+  const [so, setSo] = React.useState<SavedObject<unknown>>(savedObject);
+  const isMounted = useMountedState();
+  React.useEffect(() => {
+    savedObjectsClient.get<unknown>(savedObject.type, savedObject.id).then((newSo) => {
+      if (!isMounted()) return;
+      setSo(newSo);
+    });
+  }, [savedObjectsClient, savedObject, isMounted]);
+
+  return (
+    <EuiFlyout onClose={close}>
+      <EuiFlyoutHeader hasBorder>
+        <EuiTitle size="m">
+          <h2>
+            <EuiToolTip position="top" content={getSavedObjectLabel(savedObject.type)}>
+              <EuiIcon
+                aria-label={getSavedObjectLabel(savedObject.type)}
+                size="m"
+                type={(savedObject as any).meta.icon || 'apps'}
+              />
+            </EuiToolTip>
+            &nbsp;&nbsp;
+            {(savedObject as any).meta.title || getDefaultTitle(savedObject)}
+          </h2>
+        </EuiTitle>
+      </EuiFlyoutHeader>
+
+      <EuiFlyoutBody>
+        <EuiCodeBlock language="js" fontSize="m" paddingSize="m" isCopyable>
+          {JSON.stringify(
+            {
+              ...{
+                id: so.id,
+                type: so.type,
+                references: so.references,
+                attributes: so.attributes,
+              },
+              ...(so.namespaces ? { namespaces: so.namespaces } : {}),
+            },
+            null,
+            4
+          )}
+        </EuiCodeBlock>
+      </EuiFlyoutBody>
+    </EuiFlyout>
+  );
+};
diff --git a/src/plugins/saved_objects_management/public/management_section/objects_table/components/table.test.tsx b/src/plugins/saved_objects_management/public/management_section/objects_table/components/table.test.tsx
index 6b209a62e1b98..48d0c93376cad 100644
--- a/src/plugins/saved_objects_management/public/management_section/objects_table/components/table.test.tsx
+++ b/src/plugins/saved_objects_management/public/management_section/objects_table/components/table.test.tsx
@@ -79,6 +79,7 @@ const defaultProps: TableProps = {
   onTableChange: () => {},
   isSearching: false,
   onShowRelationships: () => {},
+  onShowJSON: () => {},
   canDelete: true,
 };
 
diff --git a/src/plugins/saved_objects_management/public/management_section/objects_table/components/table.tsx b/src/plugins/saved_objects_management/public/management_section/objects_table/components/table.tsx
index 719729cee2602..cb183ad5849ac 100644
--- a/src/plugins/saved_objects_management/public/management_section/objects_table/components/table.tsx
+++ b/src/plugins/saved_objects_management/public/management_section/objects_table/components/table.tsx
@@ -65,6 +65,7 @@ export interface TableProps {
   onTableChange: (table: any) => void;
   isSearching: boolean;
   onShowRelationships: (object: SavedObjectWithMetadata) => void;
+  onShowJSON: (object: SavedObjectWithMetadata) => void;
   canGoInApp: (obj: SavedObjectWithMetadata) => boolean;
 }
 
@@ -143,6 +144,7 @@ export class Table extends PureComponent<TableProps, TableState> {
       onTableChange,
       goInspectObject,
       onShowRelationships,
+      onShowJSON,
       basePath,
       actionRegistry,
     } = this.props;
@@ -162,7 +164,7 @@ export class Table extends PureComponent<TableProps, TableState> {
           defaultMessage: 'Type',
         }),
         multiSelect: 'or',
-        options: filterOptions,
+        options: [...filterOptions].sort((a, b) => (a.value > b.value ? 1 : -1)),
       },
       // Add this back in once we have tag support
       // {
@@ -261,6 +263,14 @@ export class Table extends PureComponent<TableProps, TableState> {
             onClick: (object) => onShowRelationships(object),
             'data-test-subj': 'savedObjectsTableAction-relationships',
           },
+          {
+            name: 'Raw JSON',
+            description: 'View saved object raw JSON',
+            type: 'icon',
+            icon: 'editorCodeBlock',
+            onClick: (object) => onShowJSON(object),
+            'data-test-subj': 'savedObjectsTableAction-preview',
+          },
           ...actionRegistry.getAll().map((action) => {
             return {
               ...action.euiAction,
diff --git a/src/plugins/saved_objects_management/public/management_section/objects_table/saved_objects_table.tsx b/src/plugins/saved_objects_management/public/management_section/objects_table/saved_objects_table.tsx
index 340c0e3237f91..a82924a79d526 100644
--- a/src/plugins/saved_objects_management/public/management_section/objects_table/saved_objects_table.tsx
+++ b/src/plugins/saved_objects_management/public/management_section/objects_table/saved_objects_table.tsx
@@ -75,6 +75,7 @@ import {
 } from '../../services';
 import { Header, Table, Flyout, Relationships } from './components';
 import { DataPublicPluginStart } from '../../../../../plugins/data/public';
+import { JsonFlyout } from './components/json_flyout';
 
 interface ExportAllOption {
   id: string;
@@ -109,6 +110,7 @@ export interface SavedObjectsTableState {
   isSearching: boolean;
   filteredItemCount: number;
   isShowingRelationships: boolean;
+  isShowingJSON: boolean;
   relationshipObject?: SavedObjectWithMetadata;
   isShowingDeleteConfirmModal: boolean;
   isShowingExportAllOptionsModal: boolean;
@@ -139,6 +141,7 @@ export class SavedObjectsTable extends Component<SavedObjectsTableProps, SavedOb
       isSearching: false,
       filteredItemCount: 0,
       isShowingRelationships: false,
+      isShowingJSON: false,
       relationshipObject: undefined,
       isShowingDeleteConfirmModal: false,
       isShowingExportAllOptionsModal: false,
@@ -305,6 +308,13 @@ export class SavedObjectsTable extends Component<SavedObjectsTableProps, SavedOb
     });
   };
 
+  onShowJSON = (object: SavedObjectWithMetadata) => {
+    this.setState({
+      isShowingJSON: true,
+      relationshipObject: object,
+    });
+  };
+
   onHideRelationships = () => {
     this.setState({
       isShowingRelationships: false,
@@ -312,6 +322,13 @@ export class SavedObjectsTable extends Component<SavedObjectsTableProps, SavedOb
     });
   };
 
+  onHideJSON = () => {
+    this.setState({
+      isShowingJSON: false,
+      relationshipObject: undefined,
+    });
+  };
+
   onExport = async (includeReferencesDeep: boolean) => {
     const { selectedSavedObjects } = this.state;
     const { notifications, http } = this.props;
@@ -494,6 +511,21 @@ export class SavedObjectsTable extends Component<SavedObjectsTableProps, SavedOb
     );
   }
 
+  renderJSON() {
+    if (!this.state.isShowingJSON) {
+      return null;
+    }
+
+    return (
+      <JsonFlyout
+        basePath={this.props.http.basePath}
+        savedObject={this.state.relationshipObject!}
+        close={this.onHideJSON}
+        savedObjectsClient={this.props.savedObjectsClient}
+      />
+    );
+  }
+
   renderDeleteConfirmModal() {
     const { isShowingDeleteConfirmModal, isDeleting, selectedSavedObjects } = this.state;
 
@@ -726,6 +758,7 @@ export class SavedObjectsTable extends Component<SavedObjectsTableProps, SavedOb
       <EuiPageContent horizontalPosition="center">
         {this.renderFlyout()}
         {this.renderRelationships()}
+        {this.renderJSON()}
         {this.renderDeleteConfirmModal()}
         {this.renderExportAllOptionsModal()}
         <Header
@@ -755,6 +788,7 @@ export class SavedObjectsTable extends Component<SavedObjectsTableProps, SavedOb
             totalItemCount={filteredItemCount}
             isSearching={isSearching}
             onShowRelationships={this.onShowRelationships}
+            onShowJSON={this.onShowJSON}
             canGoInApp={this.props.canGoInApp}
           />
         </RedirectAppLinks>
diff --git a/src/plugins/visualize/kibana.json b/src/plugins/visualize/kibana.json
index c27cfec24b332..ef1785e519ad2 100644
--- a/src/plugins/visualize/kibana.json
+++ b/src/plugins/visualize/kibana.json
@@ -9,7 +9,8 @@
     "navigation",
     "savedObjects",
     "visualizations",
-    "embeddable"
+    "embeddable",
+    "extensions"
   ],
   "optionalPlugins": ["home", "share"]
 }
diff --git a/src/plugins/visualize/public/application/components/visualize_editor.tsx b/src/plugins/visualize/public/application/components/visualize_editor.tsx
index c571a5fb078bc..220fe68dd6e8d 100644
--- a/src/plugins/visualize/public/application/components/visualize_editor.tsx
+++ b/src/plugins/visualize/public/application/components/visualize_editor.tsx
@@ -80,6 +80,13 @@ export const VisualizeEditor = () => {
 
   return (
     <div className={`app-container visEditor visEditor--${savedVisInstance?.vis.type.name}`}>
+      <div style={{ padding: 8 }}>
+        {!!visualizationIdFromUrl && !!services.extensions.tags.TagListEditable && (
+          <services.extensions.tags.TagListEditable
+            kid={`kid:::so:saved_objects/visualization/${visualizationIdFromUrl}`}
+          />
+        )}
+      </div>
       {savedVisInstance && appState && currentAppState && (
         <VisualizeTopNav
           currentAppState={currentAppState}
diff --git a/src/plugins/visualize/public/application/components/visualize_listing.tsx b/src/plugins/visualize/public/application/components/visualize_listing.tsx
index cbfbd6e0e3ab6..2a097ed2d8606 100644
--- a/src/plugins/visualize/public/application/components/visualize_listing.tsx
+++ b/src/plugins/visualize/public/application/components/visualize_listing.tsx
@@ -43,6 +43,7 @@ export const VisualizeListing = () => {
       savedObjectsPublic,
       uiSettings,
       visualizeCapabilities,
+      extensions,
     },
   } = useKibana<VisualizeServices>();
   const { pathname } = useLocation();
@@ -95,7 +96,11 @@ export const VisualizeListing = () => {
   );
 
   const noItemsFragment = useMemo(() => getNoItemsMessage(createNewVis), [createNewVis]);
-  const tableColumns = useMemo(() => getTableColumns(application, history), [application, history]);
+  const tableColumns = useMemo(() => getTableColumns(application, history, extensions), [
+    application,
+    history,
+    extensions,
+  ]);
 
   const fetchItems = useCallback(
     (filter) => {
diff --git a/src/plugins/visualize/public/application/types.ts b/src/plugins/visualize/public/application/types.ts
index a6adaf1f3c62b..7c1bcd0f22a6e 100644
--- a/src/plugins/visualize/public/application/types.ts
+++ b/src/plugins/visualize/public/application/types.ts
@@ -44,6 +44,7 @@ import { SharePluginStart } from 'src/plugins/share/public';
 import { SavedObjectsStart, SavedObject } from 'src/plugins/saved_objects/public';
 import { EmbeddableStart } from 'src/plugins/embeddable/public';
 import { KibanaLegacyStart } from 'src/plugins/kibana_legacy/public';
+import { ExtensionsPluginSetup } from 'src/plugins/extensions/public';
 import { ConfigSchema } from '../../config';
 
 export type PureVisState = SavedVisState;
@@ -93,6 +94,7 @@ export interface EditorRenderProps {
 
 export interface VisualizeServices extends CoreStart {
   embeddable: EmbeddableStart;
+  extensions: ExtensionsPluginSetup;
   history: History;
   kbnUrlStateStorage: IKbnUrlStateStorage;
   kibanaLegacy: KibanaLegacyStart;
diff --git a/src/plugins/visualize/public/application/utils/get_table_columns.tsx b/src/plugins/visualize/public/application/utils/get_table_columns.tsx
index 805c039d9773b..b6ba92aaad30e 100644
--- a/src/plugins/visualize/public/application/utils/get_table_columns.tsx
+++ b/src/plugins/visualize/public/application/utils/get_table_columns.tsx
@@ -25,6 +25,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 
 import { ApplicationStart } from 'kibana/public';
 import { VisualizationListItem } from 'src/plugins/visualizations/public';
+import { ExtensionsPluginSetup } from 'src/plugins/extensions/public';
 
 const getBadge = (item: VisualizationListItem) => {
   if (item.stage === 'beta') {
@@ -80,7 +81,11 @@ const renderItemTypeIcon = (item: VisualizationListItem) => {
   return icon;
 };
 
-export const getTableColumns = (application: ApplicationStart, history: History) => [
+export const getTableColumns = (
+  application: ApplicationStart,
+  history: History,
+  extensions: ExtensionsPluginSetup
+) => [
   {
     field: 'title',
     name: i18n.translate('visualize.listing.table.titleColumnName', {
@@ -116,6 +121,20 @@ export const getTableColumns = (application: ApplicationStart, history: History)
       </span>
     ),
   },
+  ...(extensions.tags.TagList
+    ? [
+        {
+          field: '',
+          name: 'Tags',
+          sortable: false,
+          render: (record: VisualizationListItem) =>
+            !!extensions.tags.TagList ? (
+              <extensions.tags.TagList kid={`kid:::so:saved_objects/visualization/${record.id}`} />
+            ) : null,
+        },
+      ]
+    : ([] as any)),
+  ,
   {
     field: 'description',
     name: i18n.translate('visualize.listing.table.descriptionColumnName', {
diff --git a/src/plugins/visualize/public/plugin.ts b/src/plugins/visualize/public/plugin.ts
index fd9a67599414f..662fab5b716f7 100644
--- a/src/plugins/visualize/public/plugin.ts
+++ b/src/plugins/visualize/public/plugin.ts
@@ -31,6 +31,7 @@ import {
   ScopedHistory,
 } from 'kibana/public';
 
+import { ExtensionsPluginSetup, ExtensionsPluginStart } from 'src/plugins/extensions/public';
 import { Storage, createKbnUrlTracker, createKbnUrlStateStorage } from '../../kibana_utils/public';
 import { DataPublicPluginStart, DataPublicPluginSetup, esFilters } from '../../data/public';
 import { NavigationPublicPluginStart as NavigationStart } from '../../navigation/public';
@@ -52,12 +53,14 @@ export interface VisualizePluginStartDependencies {
   embeddable: EmbeddableStart;
   kibanaLegacy: KibanaLegacyStart;
   savedObjects: SavedObjectsStart;
+  extensions: ExtensionsPluginSetup;
 }
 
 export interface VisualizePluginSetupDependencies {
   home?: HomePublicPluginSetup;
   kibanaLegacy: KibanaLegacySetup;
   data: DataPublicPluginSetup;
+  extensions: ExtensionsPluginStart;
 }
 
 export interface FeatureFlagConfig {
@@ -75,7 +78,7 @@ export class VisualizePlugin
 
   public async setup(
     core: CoreSetup<VisualizePluginStartDependencies>,
-    { home, kibanaLegacy, data }: VisualizePluginSetupDependencies
+    { home, kibanaLegacy, data, extensions }: VisualizePluginSetupDependencies
   ) {
     const {
       appMounted,
@@ -146,6 +149,7 @@ export class VisualizePlugin
 
         const services: VisualizeServices = {
           ...coreStart,
+          extensions,
           history,
           kbnUrlStateStorage: createKbnUrlStateStorage({
             history,
diff --git a/x-pack/.i18nrc.json b/x-pack/.i18nrc.json
index 596ba17d343c0..120d08b7f8c62 100644
--- a/x-pack/.i18nrc.json
+++ b/x-pack/.i18nrc.json
@@ -44,6 +44,7 @@
     "xpack.securitySolution": "plugins/security_solution",
     "xpack.snapshotRestore": "plugins/snapshot_restore",
     "xpack.spaces": ["legacy/plugins/spaces", "plugins/spaces"],
+    "xpack.tags": ["plugins/tags"],
     "xpack.taskManager": "legacy/plugins/task_manager",
     "xpack.transform": "plugins/transform",
     "xpack.triggersActionsUI": "plugins/triggers_actions_ui",
diff --git a/x-pack/examples/tags_examples/README.md b/x-pack/examples/tags_examples/README.md
new file mode 100644
index 0000000000000..42d4c111c4bc3
--- /dev/null
+++ b/x-pack/examples/tags_examples/README.md
@@ -0,0 +1,2 @@
+# `tags` plugin examples
+
diff --git a/x-pack/examples/tags_examples/kibana.json b/x-pack/examples/tags_examples/kibana.json
new file mode 100644
index 0000000000000..1035ac5fd2ac7
--- /dev/null
+++ b/x-pack/examples/tags_examples/kibana.json
@@ -0,0 +1,10 @@
+{
+  "id": "tagsExamples",
+  "version": "0.0.1",
+  "kibanaVersion": "kibana",
+  "configPath": ["tags_examples"],
+  "server": false,
+  "ui": true,
+  "requiredPlugins": ["tags", "developerExamples"],
+  "optionalPlugins": []
+}
diff --git a/x-pack/examples/tags_examples/package.json b/x-pack/examples/tags_examples/package.json
new file mode 100644
index 0000000000000..0f283830f3aca
--- /dev/null
+++ b/x-pack/examples/tags_examples/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "tags_examples",
+  "version": "1.0.0",
+  "main": "target/examples/tags_examples",
+  "kibana": {
+    "version": "kibana",
+    "templateVersion": "1.0.0"
+  },
+  "license": "Apache-2.0",
+  "scripts": {
+    "kbn": "node ../../scripts/kbn.js",
+    "build": "rm -rf './target' && tsc"
+  },
+  "devDependencies": {
+    "typescript": "3.9.5"
+  }
+}
diff --git a/x-pack/examples/tags_examples/public/application/components/index.ts b/x-pack/examples/tags_examples/public/application/components/index.ts
new file mode 100644
index 0000000000000..224217e860e94
--- /dev/null
+++ b/x-pack/examples/tags_examples/public/application/components/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './page';
diff --git a/x-pack/examples/tags_examples/public/application/components/page/index.tsx b/x-pack/examples/tags_examples/public/application/components/page/index.tsx
new file mode 100644
index 0000000000000..aba2acd660369
--- /dev/null
+++ b/x-pack/examples/tags_examples/public/application/components/page/index.tsx
@@ -0,0 +1,41 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import * as React from 'react';
+import {
+  EuiPage,
+  EuiPageBody,
+  EuiPageContent,
+  EuiPageContentBody,
+  EuiPageHeader,
+  EuiPageHeaderSection,
+  EuiTitle,
+} from '@elastic/eui';
+
+export interface PageProps {
+  title?: React.ReactNode;
+}
+
+export const Page: React.FC<PageProps> = ({ title = 'Untitled', children }) => {
+  return (
+    <EuiPage style={{ maxWidth: 1200, margin: '0 auto' }}>
+      <EuiPageBody>
+        <EuiPageHeader>
+          <EuiPageHeaderSection>
+            <EuiTitle size="l">
+              <h1>{title}</h1>
+            </EuiTitle>
+          </EuiPageHeaderSection>
+        </EuiPageHeader>
+        <EuiPageContent>
+          <EuiPageContentBody style={{ maxWidth: 800, margin: '0 auto' }}>
+            {children}
+          </EuiPageContentBody>
+        </EuiPageContent>
+      </EuiPageBody>
+    </EuiPage>
+  );
+};
diff --git a/x-pack/examples/tags_examples/public/application/containers/app/app.tsx b/x-pack/examples/tags_examples/public/application/containers/app/app.tsx
new file mode 100644
index 0000000000000..7be3170c400e7
--- /dev/null
+++ b/x-pack/examples/tags_examples/public/application/containers/app/app.tsx
@@ -0,0 +1,20 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { Page } from '../../components';
+import { TagListExample } from '../tag_list_example';
+
+// eslint-disable-next-line
+export interface Props {}
+
+export const App: React.FC<Props> = () => {
+  return (
+    <Page title={'Tags examples'}>
+      <TagListExample />
+    </Page>
+  );
+};
diff --git a/x-pack/examples/tags_examples/public/application/containers/app/index.ts b/x-pack/examples/tags_examples/public/application/containers/app/index.ts
new file mode 100644
index 0000000000000..1460fdfef37e6
--- /dev/null
+++ b/x-pack/examples/tags_examples/public/application/containers/app/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './app';
diff --git a/x-pack/examples/tags_examples/public/application/containers/app/lazy.tsx b/x-pack/examples/tags_examples/public/application/containers/app/lazy.tsx
new file mode 100644
index 0000000000000..f12e16cbab9e5
--- /dev/null
+++ b/x-pack/examples/tags_examples/public/application/containers/app/lazy.tsx
@@ -0,0 +1,20 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { lazy, Suspense } from 'react';
+import { Props } from './app';
+
+const AppLazy = lazy(() =>
+  import('./app').then((module) => ({
+    default: module.App,
+  }))
+);
+
+export const App: React.FC<Props> = (props) => (
+  <Suspense fallback={<></>}>
+    <AppLazy {...props} />
+  </Suspense>
+);
diff --git a/x-pack/examples/tags_examples/public/application/containers/tag_list_example/index.ts b/x-pack/examples/tags_examples/public/application/containers/tag_list_example/index.ts
new file mode 100644
index 0000000000000..8966175373cc3
--- /dev/null
+++ b/x-pack/examples/tags_examples/public/application/containers/tag_list_example/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './tag_list_example';
diff --git a/x-pack/examples/tags_examples/public/application/containers/tag_list_example/tag_list_example.tsx b/x-pack/examples/tags_examples/public/application/containers/tag_list_example/tag_list_example.tsx
new file mode 100644
index 0000000000000..5c8d37a3a65cf
--- /dev/null
+++ b/x-pack/examples/tags_examples/public/application/containers/tag_list_example/tag_list_example.tsx
@@ -0,0 +1,70 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { useState } from 'react';
+import { EuiTitle, EuiCode, EuiBadge } from '@elastic/eui';
+import { TagList, TagPicker, TagListEditable } from '../../../../../../plugins/tags/public';
+
+export const TagListExample: React.FC = () => {
+  const [selected, setSelected] = useState<string[]>([]);
+
+  return (
+    <div>
+      <div>
+        <EuiTitle size="m">
+          <h2>Tag</h2>
+        </EuiTitle>
+        <br />
+        <EuiCode>{"<Tag id={'33333333-3333-3333-3333-333333333333'} />"}</EuiCode>
+        <br />
+        <br />
+        <EuiBadge color={'#0077ff'}>Hello world</EuiBadge>
+        <br />
+        <br />
+      </div>
+
+      <div>
+        <EuiTitle size="m">
+          <h2>TagList</h2>
+        </EuiTitle>
+        <br />
+        <EuiCode>{"<TagList kid={'123'} />"}</EuiCode>
+        <br />
+        <br />
+        <EuiBadge color={'#00ff77'}>foo</EuiBadge>
+        <EuiBadge color={'#77ff00'}>bar</EuiBadge>
+        <br />
+        <br />
+      </div>
+
+      <div>
+        <EuiTitle size="m">
+          <h2>TagPicker</h2>
+        </EuiTitle>
+        <br />
+        <EuiCode>{'<TagPicker />'}</EuiCode>
+        <br />
+        <br />
+        <TagPicker selected={selected} onChange={setSelected} />
+        <br />
+        <br />
+      </div>
+
+      <div>
+        <EuiTitle size="m">
+          <h2>TagListEditable</h2>
+        </EuiTitle>
+        <br />
+        <EuiCode>{"<TagListEditable kid={'123'} />"}</EuiCode>
+        <br />
+        <br />
+        <TagListEditable kid={'kid:::test:/test/722b74f0-b882-11e8-a6d9-xxxxxxxxx'} />
+        <br />
+        <br />
+      </div>
+    </div>
+  );
+};
diff --git a/x-pack/examples/tags_examples/public/index.ts b/x-pack/examples/tags_examples/public/index.ts
new file mode 100644
index 0000000000000..33a6a6cca5531
--- /dev/null
+++ b/x-pack/examples/tags_examples/public/index.ts
@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { TagsExamplesPlugin } from './plugin';
+
+export const plugin = () => new TagsExamplesPlugin();
diff --git a/x-pack/examples/tags_examples/public/mount.tsx b/x-pack/examples/tags_examples/public/mount.tsx
new file mode 100644
index 0000000000000..eee2495f9c5f8
--- /dev/null
+++ b/x-pack/examples/tags_examples/public/mount.tsx
@@ -0,0 +1,24 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import * as React from 'react';
+import { render, unmountComponentAtNode } from 'react-dom';
+import { CoreSetup, AppMountParameters } from 'kibana/public';
+import { StartDependencies } from './plugin';
+import { App } from './application/containers/app/lazy';
+
+export const mount = (coreSetup: CoreSetup<StartDependencies>) => async ({
+  element,
+}: AppMountParameters) => {
+  const [, plugins] = await coreSetup.getStartServices();
+  const reactElement = (
+    <plugins.tags.ui.Provider>
+      <App />
+    </plugins.tags.ui.Provider>
+  );
+  render(reactElement, element);
+  return () => unmountComponentAtNode(element);
+};
diff --git a/x-pack/examples/tags_examples/public/plugin.ts b/x-pack/examples/tags_examples/public/plugin.ts
new file mode 100644
index 0000000000000..6f3a93b3baed5
--- /dev/null
+++ b/x-pack/examples/tags_examples/public/plugin.ts
@@ -0,0 +1,50 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { Plugin, CoreSetup, CoreStart, AppNavLinkStatus } from '../../../../src/core/public';
+import { TagsPluginSetup, TagsPluginStart } from '../../../plugins/tags/public';
+import { DeveloperExamplesSetup } from '../../../../examples/developer_examples/public';
+import { mount } from './mount';
+
+export interface SetupDependencies {
+  tags: TagsPluginSetup;
+  developerExamples: DeveloperExamplesSetup;
+}
+
+export interface StartDependencies {
+  tags: TagsPluginStart;
+}
+
+export class TagsExamplesPlugin
+  implements Plugin<void, void, SetupDependencies, StartDependencies> {
+  public setup(core: CoreSetup<StartDependencies>, { tags, developerExamples }: SetupDependencies) {
+    core.application.register({
+      id: 'tags-examples',
+      title: 'Tags Examples',
+      navLinkStatus: AppNavLinkStatus.hidden,
+      mount: mount(core),
+    });
+
+    developerExamples.register({
+      appId: 'tags-examples',
+      title: 'Tags',
+      description: 'Examples showcasing tags plugin',
+      links: [
+        {
+          label: 'README',
+          href: 'https://github.com/elastic/kibana/tree/master/x-pack/plugins/tags',
+          iconType: 'logoGithub',
+          size: 's',
+          target: '_blank',
+        },
+      ],
+    });
+  }
+
+  public start(core: CoreStart, plugins: StartDependencies) {}
+
+  public stop() {}
+}
diff --git a/x-pack/examples/tags_examples/tsconfig.json b/x-pack/examples/tags_examples/tsconfig.json
new file mode 100644
index 0000000000000..d508076b33199
--- /dev/null
+++ b/x-pack/examples/tags_examples/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./target",
+    "skipLibCheck": true
+  },
+  "include": [
+    "index.ts",
+    "public/**/*.ts",
+    "public/**/*.tsx",
+    "server/**/*.ts",
+    "../../typings/**/*",
+  ],
+  "exclude": []
+}
diff --git a/x-pack/plugins/dashboard_enhanced/kibana.json b/x-pack/plugins/dashboard_enhanced/kibana.json
index 3a95419d2f2fe..40812c29d1d1f 100644
--- a/x-pack/plugins/dashboard_enhanced/kibana.json
+++ b/x-pack/plugins/dashboard_enhanced/kibana.json
@@ -3,6 +3,6 @@
   "version": "kibana",
   "server": false,
   "ui": true,
-  "requiredPlugins": ["data", "uiActionsEnhanced", "embeddable", "dashboard", "share"],
+  "requiredPlugins": ["data", "uiActionsEnhanced", "embeddable", "dashboard", "share", "tags"],
   "configPath": ["xpack", "dashboardEnhanced"]
 }
diff --git a/x-pack/plugins/dashboard_enhanced/public/plugin.ts b/x-pack/plugins/dashboard_enhanced/public/plugin.ts
index 854a4964ffe15..d635cfb263ef3 100644
--- a/x-pack/plugins/dashboard_enhanced/public/plugin.ts
+++ b/x-pack/plugins/dashboard_enhanced/public/plugin.ts
@@ -5,17 +5,21 @@
  */
 
 import { CoreStart, CoreSetup, Plugin, PluginInitializerContext } from 'src/core/public';
+import { createElement as h } from 'react';
 import { SharePluginStart, SharePluginSetup } from '../../../../src/plugins/share/public';
 import { EmbeddableSetup, EmbeddableStart } from '../../../../src/plugins/embeddable/public';
 import { DashboardDrilldownsService } from './services';
 import { DataPublicPluginStart } from '../../../../src/plugins/data/public';
 import { AdvancedUiActionsSetup, AdvancedUiActionsStart } from '../../ui_actions_enhanced/public';
-import { DashboardStart } from '../../../../src/plugins/dashboard/public';
+import { TagsPluginSetup, TagsPluginStart } from '../../tags/public';
+import { DashboardSetup, DashboardStart } from '../../../../src/plugins/dashboard/public';
 
 export interface SetupDependencies {
   uiActionsEnhanced: AdvancedUiActionsSetup;
   embeddable: EmbeddableSetup;
   share: SharePluginSetup;
+  dashboard: DashboardSetup;
+  tags: TagsPluginSetup;
 }
 
 export interface StartDependencies {
@@ -24,6 +28,7 @@ export interface StartDependencies {
   embeddable: EmbeddableStart;
   share: SharePluginStart;
   dashboard: DashboardStart;
+  tags: TagsPluginStart;
 }
 
 // eslint-disable-next-line
@@ -43,6 +48,19 @@ export class DashboardEnhancedPlugin
       enableDrilldowns: true,
     });
 
+    plugins.dashboard.setRenderBeforeDashboard((dashboard) =>
+      h(
+        'div',
+        { style: { padding: 8 } },
+        h(plugins.tags.ui.TagListEditable, {
+          kid: `kid:::so:saved_objects/dashboard/${dashboard.getInput().id}`,
+        })
+      )
+    );
+
+    plugins.dashboard.setRenderTags((kid) => h(plugins.tags.ui.TagList, { kid }));
+    plugins.dashboard.setTagPicker(plugins.tags.ui.TagPicker);
+
     return {};
   }
 
diff --git a/x-pack/plugins/tags/README.md b/x-pack/plugins/tags/README.md
new file mode 100644
index 0000000000000..92d922ec1d1a2
--- /dev/null
+++ b/x-pack/plugins/tags/README.md
@@ -0,0 +1,3 @@
+# Kibana tags
+
+The Kibana tags plugin provides a common way to manage and attach tags to objects.
diff --git a/x-pack/plugins/tags/common/constants.ts b/x-pack/plugins/tags/common/constants.ts
new file mode 100644
index 0000000000000..c349b1ab4d0e1
--- /dev/null
+++ b/x-pack/plugins/tags/common/constants.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export const TAGS_API_PATH = '/api/tags';
diff --git a/x-pack/plugins/tags/common/index.ts b/x-pack/plugins/tags/common/index.ts
new file mode 100644
index 0000000000000..22a6320666278
--- /dev/null
+++ b/x-pack/plugins/tags/common/index.ts
@@ -0,0 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './constants';
+export * from './tags';
+export * from './tag_attachments';
+export * from './key_value';
diff --git a/x-pack/plugins/tags/common/key_value.test.ts b/x-pack/plugins/tags/common/key_value.test.ts
new file mode 100644
index 0000000000000..b0dd84f8c60b2
--- /dev/null
+++ b/x-pack/plugins/tags/common/key_value.test.ts
@@ -0,0 +1,57 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { parseTag } from './key_value';
+
+describe('parseTag', () => {
+  test('simpleg non-key-value tag key contains the whole tag and value is empty', () => {
+    const result = parseTag('Staging');
+    expect(result).toEqual({
+      key: 'Staging',
+      value: '',
+    });
+  });
+
+  test('parses key-value tag into key and value', () => {
+    const result = parseTag('Team:👍 AppArch');
+    expect(result).toEqual({
+      key: 'Team',
+      value: '👍 AppArch',
+    });
+  });
+
+  test('trims whitespace in a key-value tag', () => {
+    const result = parseTag(' Team : Canvas ');
+    expect(result).toEqual({
+      key: 'Team',
+      value: 'Canvas',
+    });
+  });
+
+  test('key-value tag can have empty value when it has extra whitespace', () => {
+    const result = parseTag(' Team :  ');
+    expect(result).toEqual({
+      key: 'Team',
+      value: '',
+    });
+  });
+
+  test('key-value tag without extra whitespace can have empty value', () => {
+    const result = parseTag('Environment:');
+    expect(result).toEqual({
+      key: 'Environment',
+      value: '',
+    });
+  });
+
+  test('in key-value tag with multiple colons, the first colon is used as key separator', () => {
+    const result = parseTag('Environment:Production:123');
+    expect(result).toEqual({
+      key: 'Environment',
+      value: 'Production:123',
+    });
+  });
+});
diff --git a/x-pack/plugins/tags/common/key_value.ts b/x-pack/plugins/tags/common/key_value.ts
new file mode 100644
index 0000000000000..bb23b0acb111e
--- /dev/null
+++ b/x-pack/plugins/tags/common/key_value.ts
@@ -0,0 +1,41 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export interface TagKeyValue {
+  key: string;
+  value: string;
+}
+
+/**
+ * Tag title can contain a colon ":", in that case we treat it as a key-value
+ * tag. The text before the first colon is assumed to be the key and the rest
+ * is the value. If tag is not a key-value tag (it has no colon) then the key
+ * is assumed to be the whole tag and the value is empty string.
+ *
+ * @example
+ *
+ * Tag title    | Key-value
+ * ------------ | ---------------------------------
+ * Team:AppArch | { key: 'Team', value: 'AppArch' }
+ * Production   | { key: 'Production', value: '' }
+ *
+ * @param title Plain text tag title as entered by user.
+ * @return Object representing tag parsed into key-value.
+ */
+export const parseTag = (title: string): TagKeyValue => {
+  const colonIndex = title.indexOf(':');
+
+  if (colonIndex < 0)
+    return {
+      key: title,
+      value: '',
+    };
+
+  return {
+    key: title.substr(0, colonIndex).trim(),
+    value: title.substr(colonIndex + 1).trim(),
+  };
+};
diff --git a/x-pack/plugins/tags/common/kid.test.ts b/x-pack/plugins/tags/common/kid.test.ts
new file mode 100644
index 0000000000000..571764557c784
--- /dev/null
+++ b/x-pack/plugins/tags/common/kid.test.ts
@@ -0,0 +1,76 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { parseKID, formatKID } from './kid';
+
+describe('parseKID()', () => {
+  test('parses correct fully specified KID', () => {
+    const kid = parseKID('kid:default:expressions:expr:functions/kibana_context');
+    expect(kid).toEqual({
+      space: 'default',
+      plugin: 'expressions',
+      service: 'expr',
+      path: ['functions', 'kibana_context'],
+    });
+  });
+
+  test('parses partially specified KIDs', () => {
+    const kid1 = parseKID('kid::canvas::elements/123');
+    expect(kid1).toEqual({
+      space: '',
+      plugin: 'canvas',
+      service: '',
+      path: ['elements', '123'],
+    });
+
+    const kid2 = parseKID('kid:::so:saved_object/dashboard/123');
+    expect(kid2).toEqual({
+      space: '',
+      plugin: '',
+      service: 'so',
+      path: ['saved_object', 'dashboard', '123'],
+    });
+  });
+
+  test('throws on invalid kid protocol', () => {
+    expect(() =>
+      parseKID('kidz:default:expressions:expr:functions/kibana_context')
+    ).toThrowErrorMatchingInlineSnapshot(`"Expected KID protocol to be \\"kid\\"."`);
+  });
+
+  test('throws when KID to few parts', () => {
+    expect(() => parseKID('kid:default:expressions:expr')).toThrowErrorMatchingInlineSnapshot(
+      `"Invalid number of parts in KID."`
+    );
+    expect(() => parseKID('kid:default')).toThrowErrorMatchingInlineSnapshot(
+      `"Invalid number of parts in KID."`
+    );
+  });
+
+  test('throws if KID is not a string', () => {
+    expect(() => parseKID(123 as any)).toThrowErrorMatchingInlineSnapshot(
+      `"KID must be a string."`
+    );
+  });
+
+  test('throws if KID string is too long', () => {
+    expect(() =>
+      parseKID('kid:default:expressions:expr:functions' + '/kibana_context'.repeat(1000))
+    ).toThrowErrorMatchingInlineSnapshot(`"KID stirng too long."`);
+  });
+});
+
+describe('formatKID()', () => {
+  test('formats fully specified KID', () => {
+    const kid = formatKID({
+      space: 'test',
+      plugin: 'data',
+      service: 'query',
+      path: ['saved_query', 'bar'],
+    });
+    expect(kid).toBe('kid:test:data:query:saved_query/bar');
+  });
+});
diff --git a/x-pack/plugins/tags/common/kid.ts b/x-pack/plugins/tags/common/kid.ts
new file mode 100644
index 0000000000000..16c349e91871e
--- /dev/null
+++ b/x-pack/plugins/tags/common/kid.ts
@@ -0,0 +1,60 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+/**
+ * Utilities to work with KIDs (Kibana IDs). Kibana ID is a global resource
+ * identifier without a Kibana deployment.
+ *
+ * KID format:
+ *
+ * ```
+ * kid:<space>:<plugin>:<service>:<path>
+ * ```
+ *
+ * Consider an index pattern with ID 123, its ID in `indexPatterns` service in `data` plugin:
+ *
+ * ```
+ * kid:default:data:ip:index_pattern/123
+ * ```
+ *
+ * Index pattern is actually stored in saved object service, the KID
+ * of that resource in saved object service:
+ *
+ * ```
+ * kid:default::so:saved_object/index_pattern/123
+ * ```
+ */
+export interface KID {
+  space: string;
+  plugin: string;
+  service: string;
+  path: string[];
+}
+
+export const parseKID = (str: string) => {
+  if (typeof str !== 'string') throw new TypeError('KID must be a string.');
+  if (str.length < 8) throw new Error('KID string too short.');
+  if (str.length > 2048) throw new Error('KID stirng too long.');
+
+  const parts = str.split(/[\/\:]/);
+
+  if (parts.length < 5) throw new Error('Invalid number of parts in KID.');
+
+  const [protocol, space, plugin, service, ...path] = parts;
+
+  if (protocol !== 'kid') throw new Error('Expected KID protocol to be "kid".');
+
+  return {
+    space,
+    plugin,
+    service,
+    path,
+  };
+};
+
+export const formatKID = ({ space = '', plugin = '', service = '', path = [] }: KID): string => {
+  return `kid:${space}:${plugin}:${service}:${path.join('/')}`;
+};
diff --git a/x-pack/plugins/tags/common/tag_attachments.ts b/x-pack/plugins/tags/common/tag_attachments.ts
new file mode 100644
index 0000000000000..95b46b9d85be2
--- /dev/null
+++ b/x-pack/plugins/tags/common/tag_attachments.ts
@@ -0,0 +1,80 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { RawTagWithId } from './tags';
+
+/**
+ * Represents a tag attachemnt to KID (Kibana ID) as stored in
+ * Saved Object client.
+ */
+export interface RawTagAttachment {
+  tagId: string;
+  kid: string;
+  createdBy: string | null;
+  createdAt: string;
+}
+
+/** Tag attachment together with saved object ID. */
+export interface RawTagAttachmentWithId extends RawTagAttachment {
+  id: string;
+}
+
+export interface TagAttachmentClientCreateParams {
+  attachments: Array<Pick<RawTagAttachment, 'tagId' | 'kid'>>;
+}
+
+export interface TagAttachmentClientCreateResult {
+  attachments: RawTagAttachmentWithId[];
+}
+
+export interface TagAttachmentClientDeleteParams {
+  kid: string;
+  tagId: string;
+}
+
+export interface TagAttachmentClientSetParams {
+  kid: string;
+  tagIds: string[];
+}
+
+export interface TagAttachmentClientSetResult {
+  attachments: RawTagAttachmentWithId[];
+}
+
+export interface TagAttachmentClientGetResourceTagsParams {
+  kid: string;
+}
+
+export interface TagAttachmentClientGetResourceTagsResult {
+  attachments: RawTagAttachmentWithId[];
+  tags: RawTagWithId[];
+}
+
+export interface TagAttachmentClientFindResourcesParams {
+  tagIds: string[];
+  kidPrefix: string;
+  perPage: number;
+  page: number;
+}
+
+export interface TagAttachmentClientFindResourcesResult {
+  attachments: RawTagAttachmentWithId[];
+}
+
+/**
+ * CRUD + List/Find API for tag attachments.
+ */
+export interface ITagAttachmentsClient {
+  create(params: TagAttachmentClientCreateParams): Promise<TagAttachmentClientCreateResult>;
+  set(params: TagAttachmentClientSetParams): Promise<TagAttachmentClientSetResult>;
+  del(params: TagAttachmentClientDeleteParams): Promise<void>;
+  getAttachedTags(
+    params: TagAttachmentClientGetResourceTagsParams
+  ): Promise<TagAttachmentClientGetResourceTagsResult>;
+  findResources(
+    params: TagAttachmentClientFindResourcesParams
+  ): Promise<TagAttachmentClientFindResourcesResult>;
+}
diff --git a/x-pack/plugins/tags/common/tags.ts b/x-pack/plugins/tags/common/tags.ts
new file mode 100644
index 0000000000000..471f2fa974afe
--- /dev/null
+++ b/x-pack/plugins/tags/common/tags.ts
@@ -0,0 +1,65 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export interface RawTag {
+  enabled: boolean;
+  title: string;
+  description: string;
+  key: string;
+  value: string;
+  color: '' | string;
+  createdBy: string | null;
+  updatedBy: string | null;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface RawTagWithId extends RawTag {
+  id: string;
+}
+
+export interface TagsClientCreateParams {
+  tag: Pick<RawTagWithId, 'id' | 'title' | 'description' | 'color'>;
+}
+
+export interface TagsClientCreateResult {
+  tag: RawTagWithId;
+}
+
+export interface TagsClientReadParams {
+  id: string;
+}
+
+export interface TagsClientReadResult {
+  tag: RawTagWithId;
+}
+
+export interface TagsClientUpdateParams {
+  patch: Pick<RawTagWithId, 'id' | 'title' | 'description' | 'color'>;
+}
+
+export interface TagsClientUpdateResult {
+  patch: Partial<RawTag>;
+}
+
+export interface TagsClientDeleteParams {
+  id: string;
+}
+
+export interface TagsClientGetAllResult {
+  tags: RawTagWithId[];
+}
+
+/**
+ * CRUD + List/Find API for tags.
+ */
+export interface ITagsClient {
+  create(params: TagsClientCreateParams): Promise<TagsClientCreateResult>;
+  read(params: TagsClientReadParams): Promise<TagsClientReadResult>;
+  update(params: TagsClientUpdateParams): Promise<TagsClientUpdateResult>;
+  del(params: TagsClientDeleteParams): Promise<void>;
+  getAll(): Promise<TagsClientGetAllResult>;
+}
diff --git a/x-pack/plugins/tags/kibana.json b/x-pack/plugins/tags/kibana.json
new file mode 100644
index 0000000000000..863f8d76ae55b
--- /dev/null
+++ b/x-pack/plugins/tags/kibana.json
@@ -0,0 +1,10 @@
+{
+  "id": "tags",
+  "server": true,
+  "ui": true,
+  "version": "8.0.0",
+  "kibanaVersion": "kibana",
+  "configPath": ["xpack", "tags"],
+  "requiredPlugins": ["management", "bfetch", "extensions"],
+  "optionalPlugins": ["security"]
+}
diff --git a/x-pack/plugins/tags/public/application/containers/tags_app/index.ts b/x-pack/plugins/tags/public/application/containers/tags_app/index.ts
new file mode 100644
index 0000000000000..a6a89f7d06650
--- /dev/null
+++ b/x-pack/plugins/tags/public/application/containers/tags_app/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './tags_app';
diff --git a/x-pack/plugins/tags/public/application/containers/tags_app/pages/landing_page/empty.tsx b/x-pack/plugins/tags/public/application/containers/tags_app/pages/landing_page/empty.tsx
new file mode 100644
index 0000000000000..fe6ed7ff90c73
--- /dev/null
+++ b/x-pack/plugins/tags/public/application/containers/tags_app/pages/landing_page/empty.tsx
@@ -0,0 +1,22 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { EuiEmptyPrompt } from '@elastic/eui';
+
+export const Empty: React.FC = () => {
+  return (
+    <EuiEmptyPrompt
+      iconType="tag"
+      title={<h1>Find resources by tag</h1>}
+      body={
+        <>
+          <p>Select tags on the left to find attached resources</p>
+        </>
+      }
+    />
+  );
+};
diff --git a/x-pack/plugins/tags/public/application/containers/tags_app/pages/landing_page/index.ts b/x-pack/plugins/tags/public/application/containers/tags_app/pages/landing_page/index.ts
new file mode 100644
index 0000000000000..9c8a7155fd66f
--- /dev/null
+++ b/x-pack/plugins/tags/public/application/containers/tags_app/pages/landing_page/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './landing_page';
diff --git a/x-pack/plugins/tags/public/application/containers/tags_app/pages/landing_page/landing_page.tsx b/x-pack/plugins/tags/public/application/containers/tags_app/pages/landing_page/landing_page.tsx
new file mode 100644
index 0000000000000..cbb1b7aa609f4
--- /dev/null
+++ b/x-pack/plugins/tags/public/application/containers/tags_app/pages/landing_page/landing_page.tsx
@@ -0,0 +1,91 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { useMemo } from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiSideNav, EuiPanel, EuiHorizontalRule } from '@elastic/eui';
+import { useTagsApp } from '../../../../context';
+import { Tag as TagUi } from '../../../../../containers/tag';
+import { TagPicker } from '../../../../../containers/tag_picker';
+import { Tag } from '../../../../../services/tags_service/tag_manager/tag';
+import { ResultsList } from './results_list';
+
+export const LandinPage: React.FC = () => {
+  const { manager, useQueryParam } = useTagsApp();
+  const tags = manager.useTagsList();
+  const [uriTags, setUriTags] = useQueryParam('tags');
+  const selected = useMemo(() => (uriTags ? uriTags.split('_') : []), [uriTags]);
+  const setSelected = (newSelection: string[]) =>
+    newSelection.length ? setUriTags(newSelection.join('_')) : setUriTags(null);
+
+  const grouped = useMemo(() => {
+    const categories: Record<string, Tag[]> = {};
+    const remaining: Tag[] = [];
+    for (const tag of tags) {
+      if (tag.data.value) {
+        if (!categories[tag.data.key]) categories[tag.data.key] = [];
+        categories[tag.data.key].push(tag);
+      } else remaining.push(tag);
+    }
+    return {
+      categories: Object.entries(categories).sort((a, b) => (a[0] > b[0] ? 1 : -1)),
+      remaining,
+    };
+  }, [tags]);
+
+  return (
+    <div style={{ maxWidth: 1100, margin: '32px auto' }}>
+      <EuiFlexGroup>
+        <EuiFlexItem grow={false}>
+          <EuiSideNav
+            style={{ width: 192 }}
+            items={grouped.categories.map(([name, tagsList]) => ({
+              name,
+              id: name,
+              items: tagsList.map((tag) => ({
+                name: tag.data.title,
+                id: tag.id,
+                renderItem: () => (
+                  <div style={{ padding: '4px 0' }}>
+                    <TagUi id={tag.id} />
+                  </div>
+                ),
+              })),
+            }))}
+          />
+          <EuiHorizontalRule />
+          <div style={{ marginTop: -8 }}>
+            <EuiSideNav
+              style={{ width: 192 }}
+              items={[
+                {
+                  name: '',
+                  id: 'remainingTags',
+                  items: grouped.remaining.map((tag) => ({
+                    name: tag.data.title,
+                    id: tag.id,
+                    renderItem: () => (
+                      <div style={{ padding: '4px 0' }}>
+                        <TagUi id={tag.id} />
+                      </div>
+                    ),
+                  })),
+                },
+              ]}
+            />
+          </div>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <div style={{ marginTop: -8, paddingBottom: 16 }}>
+            <TagPicker fullWidth selected={selected} onChange={setSelected} />
+          </div>
+          <EuiPanel paddingSize="l">
+            <ResultsList tagIds={selected} />
+          </EuiPanel>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </div>
+  );
+};
diff --git a/x-pack/plugins/tags/public/application/containers/tags_app/pages/landing_page/results_list.tsx b/x-pack/plugins/tags/public/application/containers/tags_app/pages/landing_page/results_list.tsx
new file mode 100644
index 0000000000000..93b2c8dc2f77a
--- /dev/null
+++ b/x-pack/plugins/tags/public/application/containers/tags_app/pages/landing_page/results_list.tsx
@@ -0,0 +1,126 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { useEffect, useState, useMemo } from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiTitle, EuiSpacer } from '@elastic/eui';
+import useMountedState from 'react-use/lib/useMountedState';
+import { useTagsApp } from '../../../../context';
+import { Empty } from './empty';
+
+export interface Props {
+  tagIds: string[];
+}
+
+export const ResultsList: React.FC<Props> = ({ tagIds }) => {
+  const { tags, kid } = useTagsApp();
+  const isMounted = useMountedState();
+  const [kids, setKids] = useState<string[] | null>(null);
+  const [error, setError] = useState<Error | null>(null);
+  useEffect(() => {
+    tags
+      .attachments!.findResources({
+        tagIds,
+        kidPrefix: 'kid:',
+        page: 1,
+        perPage: 100,
+      })
+      .then(
+        (response) => {
+          if (!isMounted()) return;
+          setKids(response.attachments.map((item) => item.kid));
+        },
+        (newError) => {
+          if (!isMounted()) return;
+          setError(newError);
+        }
+      );
+  }, [isMounted, tags.attachments, tagIds]);
+
+  const grouped = useMemo<{
+    dashboards: string[];
+    visualizations: string[];
+    other: string[];
+  }>(() => {
+    const dashboards: string[] = [];
+    const visualizations: string[] = [];
+    const other: string[] = [];
+    if (!kids || !kids.length) return { dashboards, visualizations, other };
+    for (const item of kids) {
+      if (item.indexOf('kid:::so:saved_objects/dashboard/') > -1) dashboards.push(item);
+      else if (item.indexOf('kid:::so:saved_objects/visualization/') > -1)
+        visualizations.push(item);
+      else other.push(item);
+    }
+    return { dashboards, visualizations, other };
+  }, [kids]);
+
+  if (error || !kids) return null;
+
+  return (
+    <>
+      {!!kids.length ? (
+        <>
+          {!!grouped.dashboards.length && (
+            <>
+              <EuiFlexGroup gutterSize="l">
+                <EuiFlexItem>
+                  <EuiTitle size="s">
+                    <h6>Dashboards</h6>
+                  </EuiTitle>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+              <EuiFlexGroup gutterSize="l">
+                {grouped.dashboards.map((resuldKid) => (
+                  <EuiFlexItem key={resuldKid} style={{ maxWidth: 200 }}>
+                    <kid.Card kid={resuldKid} />
+                  </EuiFlexItem>
+                ))}
+              </EuiFlexGroup>
+              <EuiSpacer />
+            </>
+          )}
+          {!!grouped.visualizations.length && (
+            <>
+              <EuiFlexGroup gutterSize="l">
+                <EuiFlexItem>
+                  <EuiTitle size="s">
+                    <h6>Visualizations</h6>
+                  </EuiTitle>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+              <EuiFlexGroup gutterSize="l">
+                {grouped.visualizations.map((resuldKid) => (
+                  <EuiFlexItem key={resuldKid} style={{ maxWidth: 200 }}>
+                    <kid.Card kid={resuldKid} />
+                  </EuiFlexItem>
+                ))}
+              </EuiFlexGroup>
+              <EuiSpacer />
+            </>
+          )}
+          {!!grouped.other.length &&
+            grouped.other.map((resuldKid) => (
+              <EuiFlexGroup gutterSize="l">
+                <EuiTitle size="s">
+                  <h6>Other</h6>
+                </EuiTitle>
+                <EuiSpacer />
+                <EuiFlexItem key={resuldKid} style={{ maxWidth: 200 }}>
+                  <kid.Card kid={resuldKid} />
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            ))}
+        </>
+      ) : (
+        <EuiFlexGroup gutterSize="xl">
+          <EuiFlexItem>
+            <Empty />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      )}
+    </>
+  );
+};
diff --git a/x-pack/plugins/tags/public/application/containers/tags_app/tags_app.tsx b/x-pack/plugins/tags/public/application/containers/tags_app/tags_app.tsx
new file mode 100644
index 0000000000000..e864509c91108
--- /dev/null
+++ b/x-pack/plugins/tags/public/application/containers/tags_app/tags_app.tsx
@@ -0,0 +1,22 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { LandinPage } from './pages/landing_page';
+import { TagsAppServices } from '../../services';
+import { TagsAppProvider } from '../../context';
+
+export interface Props {
+  services: TagsAppServices;
+}
+
+export const TagsApp: React.FC<Props> = ({ services }) => {
+  return (
+    <TagsAppProvider services={services}>
+      <LandinPage />
+    </TagsAppProvider>
+  );
+};
diff --git a/x-pack/plugins/tags/public/application/context/index.ts b/x-pack/plugins/tags/public/application/context/index.ts
new file mode 100644
index 0000000000000..536d901c632be
--- /dev/null
+++ b/x-pack/plugins/tags/public/application/context/index.ts
@@ -0,0 +1,8 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export { useTagsApp } from './tags_app_context';
+export { TagsAppProvider } from './provider';
diff --git a/x-pack/plugins/tags/public/application/context/provider.tsx b/x-pack/plugins/tags/public/application/context/provider.tsx
new file mode 100644
index 0000000000000..7c85bee38abc6
--- /dev/null
+++ b/x-pack/plugins/tags/public/application/context/provider.tsx
@@ -0,0 +1,25 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { Router } from 'react-router-dom';
+import { context } from './tags_app_context';
+import { TagsAppServices } from '../services';
+import { TagsProvider } from '../../context';
+
+export interface Props {
+  services: TagsAppServices;
+}
+
+export const TagsAppProvider: React.FC<Props> = ({ services, children }) => {
+  return (
+    <context.Provider value={services}>
+      <TagsProvider value={services.tags}>
+        <Router history={services.history}>{children}</Router>
+      </TagsProvider>
+    </context.Provider>
+  );
+};
diff --git a/x-pack/plugins/tags/public/application/context/tags_app_context.ts b/x-pack/plugins/tags/public/application/context/tags_app_context.ts
new file mode 100644
index 0000000000000..bd7f1f82574db
--- /dev/null
+++ b/x-pack/plugins/tags/public/application/context/tags_app_context.ts
@@ -0,0 +1,11 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { createContext, useContext } from 'react';
+import { TagsAppServices } from '../services';
+
+export const context = createContext<TagsAppServices | undefined>(undefined);
+export const useTagsApp = () => useContext(context)!;
diff --git a/x-pack/plugins/tags/public/application/index.ts b/x-pack/plugins/tags/public/application/index.ts
new file mode 100644
index 0000000000000..68dd889852444
--- /dev/null
+++ b/x-pack/plugins/tags/public/application/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './lazy';
diff --git a/x-pack/plugins/tags/public/application/lazy.tsx b/x-pack/plugins/tags/public/application/lazy.tsx
new file mode 100644
index 0000000000000..d79a233efa02d
--- /dev/null
+++ b/x-pack/plugins/tags/public/application/lazy.tsx
@@ -0,0 +1,20 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { lazy, Suspense } from 'react';
+import { Props } from './containers/tags_app';
+
+const TagsAppLazy = lazy(() =>
+  import('./containers/tags_app').then((module) => ({
+    default: module.TagsApp,
+  }))
+);
+
+export const TagsApp: React.FC<Props> = (props) => (
+  <Suspense fallback={<></>}>
+    <TagsAppLazy {...props} />
+  </Suspense>
+);
diff --git a/x-pack/plugins/tags/public/application/services/index.ts b/x-pack/plugins/tags/public/application/services/index.ts
new file mode 100644
index 0000000000000..18efb3d09ce2c
--- /dev/null
+++ b/x-pack/plugins/tags/public/application/services/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './tags_app_services';
diff --git a/x-pack/plugins/tags/public/application/services/tags_app_services.ts b/x-pack/plugins/tags/public/application/services/tags_app_services.ts
new file mode 100644
index 0000000000000..2ec4d8619d546
--- /dev/null
+++ b/x-pack/plugins/tags/public/application/services/tags_app_services.ts
@@ -0,0 +1,62 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { ScopedHistory } from 'kibana/public';
+import React from 'react';
+import { TagsServiceContract, TagManager, KidService } from '../../services';
+
+/* eslint-disable react-hooks/rules-of-hooks */
+
+export interface Params {
+  readonly tags: TagsServiceContract;
+  readonly kid: KidService;
+  readonly history: ScopedHistory;
+}
+
+export class TagsAppServices {
+  public readonly tags: TagsServiceContract;
+  public readonly manager: TagManager;
+  public readonly kid: KidService;
+  public readonly history: ScopedHistory;
+
+  constructor(params: Params) {
+    this.tags = params.tags;
+    this.manager = params.tags.manager!;
+    this.kid = params.kid;
+    this.history = params.history;
+  }
+
+  public readonly useQueryParam = (
+    key: string
+  ): [string | null, (value: string | null) => void] => {
+    const [value, setValue] = React.useState<string | null>(
+      new URLSearchParams(location.search).get(key) || null
+    );
+
+    React.useEffect(() => {
+      setValue(new URLSearchParams(location.search).get(key) || null);
+      const unregister = this.history.listen((location) => {
+        setValue(new URLSearchParams(location.search).get(key));
+      });
+      return () => unregister();
+    }, [key]);
+
+    const set = React.useCallback(
+      (newValue: string | null) => {
+        const params = new URLSearchParams(this.history.location.search);
+        if (newValue === null) params.delete(key);
+        else params.set(key, newValue);
+        const search = params.toString();
+        this.history.push({
+          search,
+        });
+      },
+      [key]
+    );
+
+    return [value, set];
+  };
+}
diff --git a/x-pack/plugins/tags/public/components/create_new_tag_form/create_new_tag_form.tsx b/x-pack/plugins/tags/public/components/create_new_tag_form/create_new_tag_form.tsx
new file mode 100644
index 0000000000000..d9792333416bb
--- /dev/null
+++ b/x-pack/plugins/tags/public/components/create_new_tag_form/create_new_tag_form.tsx
@@ -0,0 +1,142 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { useMemo } from 'react';
+import {
+  EuiForm,
+  EuiFormRow,
+  EuiFieldText,
+  EuiButton,
+  EuiSpacer,
+  EuiColorPicker,
+  EuiTextArea,
+} from '@elastic/eui';
+import { EuiFlexGroup } from '@elastic/eui';
+import { EuiFlexItem } from '@elastic/eui';
+import { EuiButtonEmpty } from '@elastic/eui';
+import { Link } from 'react-router-dom';
+import { EuiHorizontalRule } from '@elastic/eui';
+import { EuiDescribedFormGroup } from '@elastic/eui';
+import { EuiCode } from '@elastic/eui';
+import { txtTitle, txtColor, txtDescription, txtSubmit, txtCancel } from './i18n';
+import { Tag } from '../../components/tag';
+import { parseTag } from '../../../common';
+
+export interface Props {
+  title: string;
+  color?: string;
+  description?: string;
+  disabled?: boolean;
+  submitText?: string;
+  onTitleChange: (title: string) => void;
+  onColorChange?: (color: string) => void;
+  onDescriptionChange?: (description: string) => void;
+  onSubmit: () => void;
+}
+
+export const CreateNewTagForm: React.FC<Props> = ({
+  title,
+  color,
+  description,
+  disabled,
+  submitText = txtSubmit,
+  onTitleChange,
+  onColorChange,
+  onDescriptionChange,
+  onSubmit,
+}) => {
+  const { key, value } = useMemo(() => parseTag(title), [title]);
+
+  return (
+    <EuiForm
+      component="form"
+      onSubmit={(e) => {
+        e.preventDefault();
+        onSubmit();
+      }}
+    >
+      <EuiDescribedFormGroup
+        title={<h3>Display</h3>}
+        description={
+          <>
+            <div>This is how your tag will look like.</div>
+            <EuiSpacer size={'s'} />
+            {!!key && <Tag tag={{ title, key, value, color: color || 'transparent' }} />}
+          </>
+        }
+      >
+        <EuiFormRow
+          label={txtTitle}
+          helpText={
+            <>
+              Use colon <EuiCode paddingSize={'s'}>:</EuiCode> to create a key-value tag. Max. 256
+              characters.
+            </>
+          }
+        >
+          <EuiFieldText
+            name="first"
+            value={title}
+            onChange={(e) => onTitleChange(e.target.value)}
+            autoFocus
+            aria-label={txtTitle}
+            disabled={disabled}
+          />
+        </EuiFormRow>
+
+        {!!onColorChange && (
+          <EuiFormRow label={txtColor}>
+            <EuiColorPicker
+              color={color}
+              onChange={(newColor) => onColorChange(newColor)}
+              aria-label={txtColor}
+              disabled={disabled}
+            />
+          </EuiFormRow>
+        )}
+      </EuiDescribedFormGroup>
+
+      {!!onDescriptionChange && (
+        <EuiDescribedFormGroup
+          title={<h3>Extra</h3>}
+          description={<>Describe how your tag should be used.</>}
+        >
+          <EuiFormRow label={txtDescription}>
+            <EuiTextArea
+              value={description}
+              onChange={(e) => onDescriptionChange(e.target.value)}
+              aria-label={txtDescription}
+              disabled={disabled}
+            />
+          </EuiFormRow>
+        </EuiDescribedFormGroup>
+      )}
+
+      <EuiHorizontalRule />
+
+      <EuiFlexGroup>
+        <EuiFlexItem grow={false}>
+          <EuiButton
+            fill
+            color="secondary"
+            iconType="check"
+            type="submit"
+            data-test-subj="submitButton"
+            disabled={disabled || !title}
+            isLoading={disabled}
+          >
+            {submitText}
+          </EuiButton>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <Link to={'/'}>
+            <EuiButtonEmpty color="primary">{txtCancel}</EuiButtonEmpty>
+          </Link>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiForm>
+  );
+};
diff --git a/x-pack/plugins/tags/public/components/create_new_tag_form/i18n.ts b/x-pack/plugins/tags/public/components/create_new_tag_form/i18n.ts
new file mode 100644
index 0000000000000..fee695e0e6ba3
--- /dev/null
+++ b/x-pack/plugins/tags/public/components/create_new_tag_form/i18n.ts
@@ -0,0 +1,27 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const txtTitle = i18n.translate('xpack.tags.creanteNewTagForm.title', {
+  defaultMessage: 'Title',
+});
+
+export const txtColor = i18n.translate('xpack.tags.creanteNewTagForm.color', {
+  defaultMessage: 'Color',
+});
+
+export const txtDescription = i18n.translate('xpack.tags.creanteNewTagForm.description', {
+  defaultMessage: 'Description',
+});
+
+export const txtSubmit = i18n.translate('xpack.tags.creanteNewTagForm.submit', {
+  defaultMessage: 'Save',
+});
+
+export const txtCancel = i18n.translate('xpack.tags.creanteNewTagForm.cancel', {
+  defaultMessage: 'Cancel',
+});
diff --git a/x-pack/plugins/tags/public/components/create_new_tag_form/index.ts b/x-pack/plugins/tags/public/components/create_new_tag_form/index.ts
new file mode 100644
index 0000000000000..0c8e80bb2ee4b
--- /dev/null
+++ b/x-pack/plugins/tags/public/components/create_new_tag_form/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './create_new_tag_form';
diff --git a/x-pack/plugins/tags/public/components/kid_card/index.ts b/x-pack/plugins/tags/public/components/kid_card/index.ts
new file mode 100644
index 0000000000000..752d5ce23d183
--- /dev/null
+++ b/x-pack/plugins/tags/public/components/kid_card/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './kid_card';
diff --git a/x-pack/plugins/tags/public/components/kid_card/kid_card.tsx b/x-pack/plugins/tags/public/components/kid_card/kid_card.tsx
new file mode 100644
index 0000000000000..7fd78dda4b84a
--- /dev/null
+++ b/x-pack/plugins/tags/public/components/kid_card/kid_card.tsx
@@ -0,0 +1,25 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { EuiCard, EuiIcon } from '@elastic/eui';
+import { KidInfo } from '../../services';
+
+export interface Props {
+  info: KidInfo;
+}
+
+export const KidCard: React.FC<Props> = ({ info }) => {
+  return (
+    <EuiCard
+      titleSize={'xs'}
+      icon={info.euiIcon ? <EuiIcon size="l" type={info.euiIcon} /> : undefined}
+      title={info.name || 'Untitled'}
+      description={info.description || ''}
+      onClick={() => (info.goto ? info.goto() : undefined)}
+    />
+  );
+};
diff --git a/x-pack/plugins/tags/public/components/page/index.ts b/x-pack/plugins/tags/public/components/page/index.ts
new file mode 100644
index 0000000000000..224217e860e94
--- /dev/null
+++ b/x-pack/plugins/tags/public/components/page/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './page';
diff --git a/x-pack/plugins/tags/public/components/page/page.examples.tsx b/x-pack/plugins/tags/public/components/page/page.examples.tsx
new file mode 100644
index 0000000000000..29f2642c4cf33
--- /dev/null
+++ b/x-pack/plugins/tags/public/components/page/page.examples.tsx
@@ -0,0 +1,11 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { Page } from './page';
+
+storiesOf('management/Page', module).add('default', () => <Page id={'Test'} title={'My page'} />);
diff --git a/x-pack/plugins/tags/public/components/page/page.tsx b/x-pack/plugins/tags/public/components/page/page.tsx
new file mode 100644
index 0000000000000..cac79b5f8939f
--- /dev/null
+++ b/x-pack/plugins/tags/public/components/page/page.tsx
@@ -0,0 +1,54 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import {
+  EuiPageContent,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiTitle,
+  EuiText,
+  EuiSpacer,
+  EuiHorizontalRule,
+} from '@elastic/eui';
+
+export interface Props {
+  id: string;
+  title: React.ReactNode;
+  subtitle?: React.ReactNode;
+  callToAction?: React.ReactNode;
+  separator?: boolean;
+}
+
+export const Page: React.FC<Props> = ({
+  id,
+  title,
+  subtitle,
+  callToAction,
+  separator,
+  children,
+}) => {
+  return (
+    <EuiPageContent horizontalPosition="center" data-test-subj={`TagsManagementPage-${id}`}>
+      <EuiFlexGroup justifyContent={'spaceBetween'}>
+        <EuiFlexItem grow={false}>
+          <EuiTitle size="m">
+            <h1>{title}</h1>
+          </EuiTitle>
+          {!!subtitle && (
+            <EuiText color="subdued" size="s">
+              {subtitle}
+            </EuiText>
+          )}
+        </EuiFlexItem>
+        {!!callToAction && <EuiFlexItem grow={false}>{callToAction}</EuiFlexItem>}
+      </EuiFlexGroup>
+      {!!separator && <EuiHorizontalRule />}
+      <EuiSpacer size={separator ? 'm' : 'l'} />
+      <div data-test-subj={`TagsManagementPageContent`}>{children}</div>
+    </EuiPageContent>
+  );
+};
diff --git a/x-pack/plugins/tags/public/components/tag/index.ts b/x-pack/plugins/tags/public/components/tag/index.ts
new file mode 100644
index 0000000000000..3848bb9ec9854
--- /dev/null
+++ b/x-pack/plugins/tags/public/components/tag/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './tag';
diff --git a/x-pack/plugins/tags/public/components/tag/tag.tsx b/x-pack/plugins/tags/public/components/tag/tag.tsx
new file mode 100644
index 0000000000000..6a2c0805dcd68
--- /dev/null
+++ b/x-pack/plugins/tags/public/components/tag/tag.tsx
@@ -0,0 +1,30 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { EuiBadge } from '@elastic/eui';
+import { RawTagWithId } from '../../../common';
+
+export type TagView = Pick<RawTagWithId, 'color' | 'title'> &
+  Partial<Pick<RawTagWithId, 'key' | 'value'>>;
+
+export interface Props {
+  tag: TagView;
+}
+
+export const Tag: React.FC<Props> = React.memo(({ tag }) => {
+  const content = tag.key ? (
+    <>
+      {tag.key}
+      {!!tag.value ? ':' : null}
+      {!!tag.value ? <strong> {tag.value}</strong> : null}
+    </>
+  ) : (
+    tag.title
+  );
+
+  return <EuiBadge color={tag.color}>{content}</EuiBadge>;
+});
diff --git a/x-pack/plugins/tags/public/components/tag_list/index.ts b/x-pack/plugins/tags/public/components/tag_list/index.ts
new file mode 100644
index 0000000000000..b4a7ce47f572d
--- /dev/null
+++ b/x-pack/plugins/tags/public/components/tag_list/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './tag_list';
diff --git a/x-pack/plugins/tags/public/components/tag_list/tag_list.tsx b/x-pack/plugins/tags/public/components/tag_list/tag_list.tsx
new file mode 100644
index 0000000000000..468010a662b98
--- /dev/null
+++ b/x-pack/plugins/tags/public/components/tag_list/tag_list.tsx
@@ -0,0 +1,25 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { Tag, TagView } from '../tag/tag';
+
+export interface Props {
+  tags: TagView[];
+}
+
+export const TagList: React.FC<Props> = React.memo(({ tags }) => {
+  return (
+    <EuiFlexGroup wrap responsive={false} gutterSize="xs">
+      {tags.map((tag) => (
+        <EuiFlexItem key={tag.title} grow={false}>
+          <Tag tag={tag} />
+        </EuiFlexItem>
+      ))}
+    </EuiFlexGroup>
+  );
+});
diff --git a/x-pack/plugins/tags/public/components/tag_picker/i18n.ts b/x-pack/plugins/tags/public/components/tag_picker/i18n.ts
new file mode 100644
index 0000000000000..fa70e07eba22d
--- /dev/null
+++ b/x-pack/plugins/tags/public/components/tag_picker/i18n.ts
@@ -0,0 +1,11 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const txtPlaceholder = i18n.translate('xpack.tags.components.tagPicker.placeholder', {
+  defaultMessage: 'Select tags',
+});
diff --git a/x-pack/plugins/tags/public/components/tag_picker/index.ts b/x-pack/plugins/tags/public/components/tag_picker/index.ts
new file mode 100644
index 0000000000000..abbd2486f6a82
--- /dev/null
+++ b/x-pack/plugins/tags/public/components/tag_picker/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './tag_picker';
diff --git a/x-pack/plugins/tags/public/components/tag_picker/tag_picker.tsx b/x-pack/plugins/tags/public/components/tag_picker/tag_picker.tsx
new file mode 100644
index 0000000000000..063cf5fc0dd96
--- /dev/null
+++ b/x-pack/plugins/tags/public/components/tag_picker/tag_picker.tsx
@@ -0,0 +1,71 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { useMemo, useCallback } from 'react';
+import {
+  EuiHighlight,
+  EuiHealth,
+  EuiComboBox,
+  EuiComboBoxProps,
+  EuiComboBoxOptionOption,
+} from '@elastic/eui';
+import { TagView } from '../tag/tag';
+import { txtPlaceholder } from './i18n';
+
+export interface PickerTagView extends TagView {
+  id: string;
+}
+
+export interface TagPickerProps extends Pick<EuiComboBoxProps<PickerTagView>, 'fullWidth'> {
+  isDisabled?: boolean;
+  tags: PickerTagView[];
+  selected: string[];
+  onChange: (selected: string[]) => void;
+}
+
+export const TagPicker: React.FC<TagPickerProps> = React.memo(
+  ({ isDisabled, tags, selected, onChange, ...rest }) => {
+    const options = useMemo<Array<EuiComboBoxOptionOption<PickerTagView>>>(() => {
+      return tags.map((value) => ({
+        key: value.id,
+        label: value.title,
+        color: value.color,
+        value,
+      }));
+    }, [tags]);
+
+    const selectedOptions = useMemo<Array<EuiComboBoxOptionOption<PickerTagView>>>(() => {
+      return options.filter((option) => selected.indexOf(option.value!.id) > -1);
+    }, [options, selected]);
+
+    const handleChange = useCallback(
+      (newSelection: Array<EuiComboBoxOptionOption<PickerTagView>>) => {
+        onChange(newSelection.map(({ value }) => value!.id));
+      },
+      [onChange]
+    );
+
+    return (
+      <EuiComboBox<PickerTagView>
+        {...rest}
+        isDisabled={isDisabled}
+        placeholder={txtPlaceholder}
+        options={options}
+        selectedOptions={selectedOptions}
+        onChange={handleChange}
+        renderOption={({ label, color }, searchValue, contentClassName) => {
+          return (
+            <EuiHealth color={color}>
+              <span className={contentClassName}>
+                <EuiHighlight search={searchValue}>{label}</EuiHighlight>
+              </span>
+            </EuiHealth>
+          );
+        }}
+      />
+    );
+  }
+);
diff --git a/x-pack/plugins/tags/public/containers/create_new_tag_form/create_new_tag_form.tsx b/x-pack/plugins/tags/public/containers/create_new_tag_form/create_new_tag_form.tsx
new file mode 100644
index 0000000000000..dcbf6c2b57480
--- /dev/null
+++ b/x-pack/plugins/tags/public/containers/create_new_tag_form/create_new_tag_form.tsx
@@ -0,0 +1,65 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { useState } from 'react';
+import { takeUntil } from 'rxjs/operators';
+import { useToasts } from '../../../../../../src/plugins/kibana_react/public';
+import { CreateNewTagForm as CreateNewTagFormUi } from '../../components/create_new_tag_form';
+import { txtTagCreated, txtCouldNotCreate } from './i18n';
+import { useUnmount$ } from '../../hooks/use_unmount';
+import { useTags } from '../../context';
+
+const defaultColor = '#548034';
+
+export interface Props {
+  onCreate?: () => void;
+}
+
+export const CreateNewTagForm: React.FC<Props> = ({ onCreate }) => {
+  const { manager } = useTags();
+  const unmount$ = useUnmount$();
+  const toasts = useToasts();
+  const [title, setTitle] = useState('');
+  const [color, setColor] = useState(defaultColor);
+  const [description, setDescription] = useState('');
+  const [disabled, setDisabled] = useState(false);
+
+  const handleSubmit = async () => {
+    setDisabled(true);
+    manager
+      .create$({
+        title,
+        color,
+        description,
+      })
+      .pipe(takeUntil(unmount$))
+      .subscribe(
+        () => {},
+        (error) => {
+          toasts.addError(error, { title: txtCouldNotCreate });
+          setDisabled(false);
+        }
+      );
+    toasts.addSuccess({
+      title: txtTagCreated,
+    });
+    if (onCreate) onCreate();
+  };
+
+  return (
+    <CreateNewTagFormUi
+      title={title}
+      color={color}
+      description={description}
+      disabled={disabled}
+      submitText={'Create tag'}
+      onTitleChange={setTitle}
+      onColorChange={setColor}
+      onDescriptionChange={setDescription}
+      onSubmit={handleSubmit}
+    />
+  );
+};
diff --git a/x-pack/plugins/tags/public/containers/create_new_tag_form/i18n.ts b/x-pack/plugins/tags/public/containers/create_new_tag_form/i18n.ts
new file mode 100644
index 0000000000000..6b2f2007874d6
--- /dev/null
+++ b/x-pack/plugins/tags/public/containers/create_new_tag_form/i18n.ts
@@ -0,0 +1,15 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const txtTagCreated = i18n.translate('xpack.tags.creanteNewTagForm.tagCreated', {
+  defaultMessage: 'Tag created',
+});
+
+export const txtCouldNotCreate = i18n.translate('xpack.tags.creanteNewTagForm.couldNotCreate', {
+  defaultMessage: 'Could not create tag',
+});
diff --git a/x-pack/plugins/tags/public/containers/create_new_tag_form/index.ts b/x-pack/plugins/tags/public/containers/create_new_tag_form/index.ts
new file mode 100644
index 0000000000000..0c8e80bb2ee4b
--- /dev/null
+++ b/x-pack/plugins/tags/public/containers/create_new_tag_form/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './create_new_tag_form';
diff --git a/x-pack/plugins/tags/public/containers/tag/index.ts b/x-pack/plugins/tags/public/containers/tag/index.ts
new file mode 100644
index 0000000000000..3848bb9ec9854
--- /dev/null
+++ b/x-pack/plugins/tags/public/containers/tag/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './tag';
diff --git a/x-pack/plugins/tags/public/containers/tag/tag.tsx b/x-pack/plugins/tags/public/containers/tag/tag.tsx
new file mode 100644
index 0000000000000..66c45ca001125
--- /dev/null
+++ b/x-pack/plugins/tags/public/containers/tag/tag.tsx
@@ -0,0 +1,22 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { useTags } from '../../context';
+import { Tag as TagUi } from '../../components/tag';
+
+export interface TagProps {
+  id: string;
+}
+
+export const Tag: React.FC<TagProps> = React.memo(({ id }) => {
+  const { manager } = useTags();
+  const tag = manager!.useTag(id);
+
+  if (!tag) return null;
+
+  return <TagUi tag={tag} />;
+});
diff --git a/x-pack/plugins/tags/public/containers/tag_list/index.ts b/x-pack/plugins/tags/public/containers/tag_list/index.ts
new file mode 100644
index 0000000000000..b4a7ce47f572d
--- /dev/null
+++ b/x-pack/plugins/tags/public/containers/tag_list/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './tag_list';
diff --git a/x-pack/plugins/tags/public/containers/tag_list/tag_list.tsx b/x-pack/plugins/tags/public/containers/tag_list/tag_list.tsx
new file mode 100644
index 0000000000000..da2a0919471dd
--- /dev/null
+++ b/x-pack/plugins/tags/public/containers/tag_list/tag_list.tsx
@@ -0,0 +1,37 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { EuiBadge, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { useTags } from '../../context';
+import { Tag } from '../tag';
+
+export interface TagListProps {
+  kid: string;
+  onEditClick?: () => void;
+}
+
+export const TagList: React.FC<TagListProps> = React.memo(({ kid, onEditClick }) => {
+  const { manager } = useTags();
+  const attachments = manager!.useResource(kid);
+
+  return (
+    <>
+      <EuiFlexGroup wrap responsive={false} gutterSize="xs">
+        {attachments.map(({ data }) => (
+          <EuiFlexItem key={data.id} grow={false}>
+            <Tag key={data.tagId} id={data.tagId} />
+          </EuiFlexItem>
+        ))}
+      </EuiFlexGroup>
+      {!!onEditClick && (
+        <EuiBadge onClick={onEditClick} onClickAriaLabel="Edit tags">
+          {'...'}
+        </EuiBadge>
+      )}
+    </>
+  );
+});
diff --git a/x-pack/plugins/tags/public/containers/tag_list_editable/index.ts b/x-pack/plugins/tags/public/containers/tag_list_editable/index.ts
new file mode 100644
index 0000000000000..1c4befbecf3d0
--- /dev/null
+++ b/x-pack/plugins/tags/public/containers/tag_list_editable/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './tag_list_editable';
diff --git a/x-pack/plugins/tags/public/containers/tag_list_editable/tag_list_editable.tsx b/x-pack/plugins/tags/public/containers/tag_list_editable/tag_list_editable.tsx
new file mode 100644
index 0000000000000..356d2d099dba8
--- /dev/null
+++ b/x-pack/plugins/tags/public/containers/tag_list_editable/tag_list_editable.tsx
@@ -0,0 +1,25 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { useState } from 'react';
+import { TagList } from '../tag_list';
+import { TagPickerForResource } from '../tag_picker_for_resource';
+
+export interface TagListEditableProps {
+  kid: string;
+}
+
+export const TagListEditable: React.FC<TagListEditableProps> = React.memo(({ kid }) => {
+  const [edit, setEdit] = useState(false);
+
+  if (!edit) {
+    return <TagList kid={kid} onEditClick={() => setEdit(true)} />;
+  }
+
+  return (
+    <TagPickerForResource kid={kid} onSave={() => setEdit(false)} onCancel={() => setEdit(false)} />
+  );
+});
diff --git a/x-pack/plugins/tags/public/containers/tag_picker/index.ts b/x-pack/plugins/tags/public/containers/tag_picker/index.ts
new file mode 100644
index 0000000000000..abbd2486f6a82
--- /dev/null
+++ b/x-pack/plugins/tags/public/containers/tag_picker/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './tag_picker';
diff --git a/x-pack/plugins/tags/public/containers/tag_picker/tag_picker.tsx b/x-pack/plugins/tags/public/containers/tag_picker/tag_picker.tsx
new file mode 100644
index 0000000000000..89be26cdd67cf
--- /dev/null
+++ b/x-pack/plugins/tags/public/containers/tag_picker/tag_picker.tsx
@@ -0,0 +1,35 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { useMemo } from 'react';
+import {
+  TagPicker as TagPickerUi,
+  TagPickerProps as TagPickerPropsUi,
+} from '../../components/tag_picker';
+import { useTags } from '../../context';
+
+export type TagPickerProps = Omit<TagPickerPropsUi, 'tags'>;
+
+export const TagPicker: React.FC<TagPickerProps> = (props) => {
+  const { manager } = useTags();
+  const initializing = manager!.useInitializing();
+  const tags = manager!.useTags();
+  const rawTags = useMemo(
+    () =>
+      Object.values(tags)
+        .map(({ data }) => data)
+        .sort((a, b) => (a.title.toLowerCase() > b.title.toLowerCase() ? 1 : -1)),
+    [tags]
+  );
+
+  if (initializing) return null;
+
+  if (!rawTags.length) {
+    return <div>Not tags setup! Go to mangement app to add tags.</div>;
+  }
+
+  return <TagPickerUi {...props} tags={rawTags} />;
+};
diff --git a/x-pack/plugins/tags/public/containers/tag_picker_for_resource/i18n.ts b/x-pack/plugins/tags/public/containers/tag_picker_for_resource/i18n.ts
new file mode 100644
index 0000000000000..b0a8190cc85c3
--- /dev/null
+++ b/x-pack/plugins/tags/public/containers/tag_picker_for_resource/i18n.ts
@@ -0,0 +1,15 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const txtSave = i18n.translate('xpack.tags.containers.tagPickerForResource.save', {
+  defaultMessage: 'Save',
+});
+
+export const txtCancel = i18n.translate('xpack.tags.containers.tagPickerForResource.cancel', {
+  defaultMessage: 'Cancel',
+});
diff --git a/x-pack/plugins/tags/public/containers/tag_picker_for_resource/index.ts b/x-pack/plugins/tags/public/containers/tag_picker_for_resource/index.ts
new file mode 100644
index 0000000000000..e4bd52eda9e59
--- /dev/null
+++ b/x-pack/plugins/tags/public/containers/tag_picker_for_resource/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './tag_picker_for_resource';
diff --git a/x-pack/plugins/tags/public/containers/tag_picker_for_resource/tag_picker_for_resource.tsx b/x-pack/plugins/tags/public/containers/tag_picker_for_resource/tag_picker_for_resource.tsx
new file mode 100644
index 0000000000000..aa489276c9b0e
--- /dev/null
+++ b/x-pack/plugins/tags/public/containers/tag_picker_for_resource/tag_picker_for_resource.tsx
@@ -0,0 +1,82 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { useState, useEffect } from 'react';
+import { takeUntil } from 'rxjs/operators';
+import { EuiButton, EuiButtonEmpty } from '@elastic/eui';
+import { EuiSpacer } from '@elastic/eui';
+import { EuiFlexGroup } from '@elastic/eui';
+import { EuiFlexItem } from '@elastic/eui';
+import { TagPicker } from '../tag_picker';
+import { useTags } from '../../context';
+import { RawTagAttachmentWithId } from '../../../common';
+import { useUnmount$ } from '../../hooks/use_unmount';
+import { txtSave, txtCancel } from './i18n';
+
+export interface TagPickerForResourceProps {
+  kid: string;
+  onSave: (selected: string[]) => void;
+  onCancel: () => void;
+}
+
+export const TagPickerForResource: React.FC<TagPickerForResourceProps> = ({
+  kid,
+  onSave,
+  onCancel,
+  ...rest
+}) => {
+  const unmount$ = useUnmount$();
+  const { manager } = useTags();
+  const resource = manager!.useResource(kid);
+  const [attachments, setAttachments] = useState<RawTagAttachmentWithId[] | null>(null);
+  const [error, setError] = useState<Error | null>(null);
+  const [selected, setSelected] = useState<string[]>([]);
+
+  useEffect(() => {
+    manager!
+      .getResourceDataAttachments$(kid)
+      .pipe(takeUntil(unmount$))
+      .subscribe((response) => {
+        const loadedAttachments = response.map(({ data }) => data);
+        setAttachments(loadedAttachments);
+        setSelected(loadedAttachments.map(({ tagId }) => tagId));
+      }, setError);
+  }, [unmount$, manager, kid]);
+
+  if (!attachments && !error) {
+    return (
+      <TagPicker isDisabled selected={resource.map(({ data }) => data.tagId)} onChange={() => {}} />
+    );
+  }
+
+  if (error) {
+    return <div>could not load resource tag attachments: {error.message}</div>;
+  }
+
+  const handleSave = () => {
+    manager!.setAttachments$(kid, selected);
+    onSave(selected);
+  };
+
+  return (
+    <>
+      <TagPicker {...rest} selected={selected} onChange={setSelected} />
+      <EuiSpacer size={'s'} />
+      <EuiFlexGroup gutterSize="s">
+        <EuiFlexItem grow={false}>
+          <EuiButton fill size={'s'} onClick={handleSave}>
+            {txtSave}
+          </EuiButton>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButtonEmpty size={'s'} color={'danger'} onClick={onCancel}>
+            {txtCancel}
+          </EuiButtonEmpty>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </>
+  );
+};
diff --git a/x-pack/plugins/tags/public/containers/update_tag_form/i18n.ts b/x-pack/plugins/tags/public/containers/update_tag_form/i18n.ts
new file mode 100644
index 0000000000000..691b30179ddd0
--- /dev/null
+++ b/x-pack/plugins/tags/public/containers/update_tag_form/i18n.ts
@@ -0,0 +1,15 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const txtTagUpdated = i18n.translate('xpack.tags.creanteNewTagForm.tagUpdated', {
+  defaultMessage: 'Tag updated',
+});
+
+export const txtCouldNotUpdate = i18n.translate('xpack.tags.creanteNewTagForm.couldNotCreate', {
+  defaultMessage: 'Could not update tag',
+});
diff --git a/x-pack/plugins/tags/public/containers/update_tag_form/index.ts b/x-pack/plugins/tags/public/containers/update_tag_form/index.ts
new file mode 100644
index 0000000000000..a8d98aa18ca8b
--- /dev/null
+++ b/x-pack/plugins/tags/public/containers/update_tag_form/index.ts
@@ -0,0 +1,8 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './update_tag_form';
+export * from './update_tag_by_id_form';
diff --git a/x-pack/plugins/tags/public/containers/update_tag_form/update_tag_by_id_form.tsx b/x-pack/plugins/tags/public/containers/update_tag_form/update_tag_by_id_form.tsx
new file mode 100644
index 0000000000000..d62a482049ad2
--- /dev/null
+++ b/x-pack/plugins/tags/public/containers/update_tag_form/update_tag_by_id_form.tsx
@@ -0,0 +1,22 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { UpdateTagForm, UpdateTagFormProps } from './update_tag_form';
+import { useTags } from '../../context';
+
+export interface UpdateTagByIdFormProps extends Omit<UpdateTagFormProps, 'tag'> {
+  id: string;
+}
+
+export const UpdateTagByIdForm: React.FC<UpdateTagByIdFormProps> = ({ id, ...rest }) => {
+  const { manager } = useTags();
+  const tag = manager.useTag(id);
+
+  if (!tag) return null;
+
+  return <UpdateTagForm {...rest} tag={tag} />;
+};
diff --git a/x-pack/plugins/tags/public/containers/update_tag_form/update_tag_form.tsx b/x-pack/plugins/tags/public/containers/update_tag_form/update_tag_form.tsx
new file mode 100644
index 0000000000000..a65bdbd049b67
--- /dev/null
+++ b/x-pack/plugins/tags/public/containers/update_tag_form/update_tag_form.tsx
@@ -0,0 +1,62 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { useState } from 'react';
+import { takeUntil } from 'rxjs/operators';
+import { RawTagWithId } from '../../../common';
+import { useToasts } from '../../../../../../src/plugins/kibana_react/public';
+import { CreateNewTagForm as CreateNewTagFormUi } from '../../components/create_new_tag_form';
+import { txtTagUpdated, txtCouldNotUpdate } from './i18n';
+import { useUnmount$ } from '../../hooks/use_unmount';
+import { useTags } from '../../context';
+
+export interface UpdateTagFormProps {
+  tag: RawTagWithId;
+  onDone?: () => void;
+}
+
+export const UpdateTagForm: React.FC<UpdateTagFormProps> = ({ tag, onDone }) => {
+  const { manager } = useTags();
+  const unmount$ = useUnmount$();
+  const toasts = useToasts();
+  const [title, setTitle] = useState(tag.title);
+  const [color, setColor] = useState(tag.color);
+  const [description, setDescription] = useState(tag.description);
+  const [disabled, setDisabled] = useState(false);
+
+  const handleSubmit = async () => {
+    setDisabled(true);
+    manager
+      .update$({ id: tag.id, title, color, description })
+      .pipe(takeUntil(unmount$))
+      .subscribe(
+        () => {},
+        (error) => {
+          toasts.addError(error, { title: txtCouldNotUpdate });
+          setDisabled(false);
+        }
+      );
+
+    toasts.addSuccess({
+      title: txtTagUpdated,
+    });
+
+    if (onDone) onDone();
+  };
+
+  return (
+    <CreateNewTagFormUi
+      title={title}
+      color={color}
+      description={description}
+      disabled={disabled}
+      onTitleChange={setTitle}
+      onColorChange={setColor}
+      onDescriptionChange={setDescription}
+      onSubmit={handleSubmit}
+    />
+  );
+};
diff --git a/x-pack/plugins/tags/public/context/index.ts b/x-pack/plugins/tags/public/context/index.ts
new file mode 100644
index 0000000000000..5b741825cc3ab
--- /dev/null
+++ b/x-pack/plugins/tags/public/context/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './tags_provider';
diff --git a/x-pack/plugins/tags/public/context/tags_provider.ts b/x-pack/plugins/tags/public/context/tags_provider.ts
new file mode 100644
index 0000000000000..29cb40650942e
--- /dev/null
+++ b/x-pack/plugins/tags/public/context/tags_provider.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { createElement as h, createContext, useContext } from 'react';
+import { TagsServiceContract } from '../services';
+
+type ContextValue = TagsServiceContract;
+
+const context = createContext<ContextValue | undefined>(undefined);
+
+export const TagsProvider = context.Provider;
+export const useTags = () => useContext(context)!;
+export const createTagsProvider = (value: ContextValue): React.FC => ({ children }) =>
+  h(TagsProvider, { value, children });
diff --git a/x-pack/plugins/tags/public/hooks/use_unmount.ts b/x-pack/plugins/tags/public/hooks/use_unmount.ts
new file mode 100644
index 0000000000000..f7ec1732cb0dc
--- /dev/null
+++ b/x-pack/plugins/tags/public/hooks/use_unmount.ts
@@ -0,0 +1,21 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { useMemo, useEffect } from 'react';
+import { Observable, Subject } from 'rxjs';
+
+export const useUnmount$ = (): Observable<true> => {
+  const observable = useMemo(() => new Subject<true>(), []);
+
+  useEffect(() => {
+    return () => {
+      observable.next(true);
+      observable.complete();
+    };
+  });
+
+  return observable;
+};
diff --git a/x-pack/plugins/tags/public/index.ts b/x-pack/plugins/tags/public/index.ts
new file mode 100644
index 0000000000000..3515f86d72fa2
--- /dev/null
+++ b/x-pack/plugins/tags/public/index.ts
@@ -0,0 +1,24 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { TagsPlugin } from './plugin';
+import { PluginInitializerContext } from '../../../../src/core/public';
+
+export { RawTag, RawTagWithId, ITagsClient, TagsClientCreateParams } from '../common';
+
+export const plugin = (initContext: PluginInitializerContext) => new TagsPlugin(initContext);
+
+export {
+  TagsPluginSetup,
+  TagsPluginStart,
+  TagsPluginSetupDependencies,
+  TagsPluginStartDependencies,
+} from './plugin';
+
+export { Tag, TagProps } from './containers/tag';
+export { TagList, TagListProps } from './containers/tag_list';
+export { TagPicker, TagPickerProps } from './containers/tag_picker';
+export { TagListEditable, TagListEditableProps } from './containers/tag_list_editable';
diff --git a/x-pack/plugins/tags/public/management/containers/create_new_page/create_new_page.tsx b/x-pack/plugins/tags/public/management/containers/create_new_page/create_new_page.tsx
new file mode 100644
index 0000000000000..5cf5f48120b6d
--- /dev/null
+++ b/x-pack/plugins/tags/public/management/containers/create_new_page/create_new_page.tsx
@@ -0,0 +1,34 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { EuiButtonToggle } from '@elastic/eui';
+import { Page } from '../page';
+import { txtTitle, txtSubtitle, txtGoBack } from './i18n';
+import { CreateNewTagForm } from '../../../containers/create_new_tag_form';
+import { useServices } from '../../context';
+
+export const CreateNewPage: React.FC = () => {
+  const { params } = useServices();
+
+  return (
+    <Page
+      id={'CreateNew'}
+      title={txtTitle}
+      subtitle={<p>{txtSubtitle}</p>}
+      breadcrumbs={[{ text: txtTitle }]}
+      separator
+      callToAction={
+        <Link to={'/'}>
+          <EuiButtonToggle label={txtGoBack} iconType={'arrowLeft'} isEmpty />
+        </Link>
+      }
+    >
+      <CreateNewTagForm onCreate={() => params.history.push('/')} />
+    </Page>
+  );
+};
diff --git a/x-pack/plugins/tags/public/management/containers/create_new_page/i18n.ts b/x-pack/plugins/tags/public/management/containers/create_new_page/i18n.ts
new file mode 100644
index 0000000000000..c2eb60ac07571
--- /dev/null
+++ b/x-pack/plugins/tags/public/management/containers/create_new_page/i18n.ts
@@ -0,0 +1,19 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const txtTitle = i18n.translate('xpack.tags.creanteNewPage.title', {
+  defaultMessage: 'Create a tag',
+});
+
+export const txtSubtitle = i18n.translate('xpack.tags.creanteNewPage.subtitle', {
+  defaultMessage: 'Create a descriptive colorful tag to better organize your content.',
+});
+
+export const txtGoBack = i18n.translate('xpack.tags.creanteNewPage.goBack', {
+  defaultMessage: 'Back to Tags',
+});
diff --git a/x-pack/plugins/tags/public/management/containers/create_new_page/index.tsx b/x-pack/plugins/tags/public/management/containers/create_new_page/index.tsx
new file mode 100644
index 0000000000000..c065ca4c049e6
--- /dev/null
+++ b/x-pack/plugins/tags/public/management/containers/create_new_page/index.tsx
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './create_new_page';
diff --git a/x-pack/plugins/tags/public/management/containers/landing_page/empty.tsx b/x-pack/plugins/tags/public/management/containers/landing_page/empty.tsx
new file mode 100644
index 0000000000000..f7bb5b3ddae8c
--- /dev/null
+++ b/x-pack/plugins/tags/public/management/containers/landing_page/empty.tsx
@@ -0,0 +1,32 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { EuiEmptyPrompt } from '@elastic/eui';
+import { EuiButton } from '@elastic/eui';
+import { Link } from 'react-router-dom';
+import { txtSubtitle, txtCreateATag } from './i18n';
+
+export const Empty: React.FC = () => {
+  return (
+    <EuiEmptyPrompt
+      iconType="tag"
+      title={<h1>Create your first tag</h1>}
+      body={
+        <>
+          <p>{txtSubtitle}</p>
+        </>
+      }
+      actions={
+        <Link to={'/create'}>
+          <EuiButton fill iconType="plusInCircle">
+            {txtCreateATag}
+          </EuiButton>
+        </Link>
+      }
+    />
+  );
+};
diff --git a/x-pack/plugins/tags/public/management/containers/landing_page/footer.tsx b/x-pack/plugins/tags/public/management/containers/landing_page/footer.tsx
new file mode 100644
index 0000000000000..90352ea38fac7
--- /dev/null
+++ b/x-pack/plugins/tags/public/management/containers/landing_page/footer.tsx
@@ -0,0 +1,59 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { EuiHorizontalRule, EuiText, EuiLink } from '@elastic/eui';
+import { useServices } from '../../context';
+
+const defaultTags: Array<{ color: string; title: string; description: string }> = [
+  { color: '#B44B6E', title: 'Environment:Production', description: 'Production environment.' },
+  { color: '#B44B6E', title: 'Environment:Staging', description: 'Staging environment.' },
+  {
+    color: '#B44B6E',
+    title: 'Environment:QA',
+    description: 'Testing and qulity assurance environment.',
+  },
+  { color: '#378400', title: 'Feature:Landing page', description: '' },
+  { color: '#378400', title: 'Feature:Load balancer', description: '' },
+  { color: '#378400', title: 'Feature:GraphQL', description: '' },
+  { color: '#378400', title: 'Feature:Sing up form', description: '' },
+  { color: '#378400', title: 'Feature:API', description: '' },
+  { color: '#378400', title: 'Feature:Message Broker', description: '' },
+  { color: '#378400', title: 'Feature:Analytics', description: '' },
+  { color: '#D5BB0F', title: 'Team:Design', description: '' },
+  { color: '#D5BB0F', title: 'Team:Marketing', description: '' },
+  { color: '#378400', title: 'Feature:Reporting', description: '' },
+  { color: '#D5BB0F', title: 'Team:Backend', description: '' },
+  { color: '#378400', title: 'Feature:Payments', description: '' },
+  { color: '#D5BB0F', title: 'Team:Frontend', description: '' },
+  { color: '#D5BB0F', title: 'Team:Infrastructure', description: '' },
+  { color: '#CA8EAE', title: 'chart', description: '' },
+  { color: '#6092C0', title: 'filter', description: '' },
+  { color: '#da205e', title: 'graphic', description: '' },
+  { color: '#0b7f00', title: 'presentation', description: '' },
+  { color: '#49009e', title: 'proportion', description: '' },
+  { color: '#dcb400', title: 'report', description: '' },
+  { color: '#6b6b6b', title: 'text', description: '' },
+];
+
+export const Footer = () => {
+  const { manager } = useServices();
+
+  const handleSampleTagsClick = () => {
+    for (const tag of defaultTags) manager.create$(tag).subscribe();
+  };
+
+  return (
+    <>
+      <EuiHorizontalRule />
+      <EuiText className="eui-textCenter">
+        <p>
+          Install <EuiLink onClick={handleSampleTagsClick}>sample tags</EuiLink> for this space.
+        </p>
+      </EuiText>
+    </>
+  );
+};
diff --git a/x-pack/plugins/tags/public/management/containers/landing_page/i18n.ts b/x-pack/plugins/tags/public/management/containers/landing_page/i18n.ts
new file mode 100644
index 0000000000000..99f4694cb4f92
--- /dev/null
+++ b/x-pack/plugins/tags/public/management/containers/landing_page/i18n.ts
@@ -0,0 +1,19 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const txtTitle = i18n.translate('xpack.tags.landingPage.title', {
+  defaultMessage: 'Tags',
+});
+
+export const txtSubtitle = i18n.translate('xpack.tags.landingPage.subtitle', {
+  defaultMessage: 'Tags help you organize content throughout Kibana.',
+});
+
+export const txtCreateATag = i18n.translate('xpack.tags.landingPage.createATag', {
+  defaultMessage: 'Create tag',
+});
diff --git a/x-pack/plugins/tags/public/management/containers/landing_page/index.tsx b/x-pack/plugins/tags/public/management/containers/landing_page/index.tsx
new file mode 100644
index 0000000000000..9c8a7155fd66f
--- /dev/null
+++ b/x-pack/plugins/tags/public/management/containers/landing_page/index.tsx
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './landing_page';
diff --git a/x-pack/plugins/tags/public/management/containers/landing_page/landing_page.tsx b/x-pack/plugins/tags/public/management/containers/landing_page/landing_page.tsx
new file mode 100644
index 0000000000000..a5a226b27651f
--- /dev/null
+++ b/x-pack/plugins/tags/public/management/containers/landing_page/landing_page.tsx
@@ -0,0 +1,45 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { useMemo } from 'react';
+import { Link } from 'react-router-dom';
+import { EuiButton } from '@elastic/eui';
+import { Page } from '../page';
+import { TagTable } from '../tag_table';
+import { txtTitle, txtSubtitle, txtCreateATag } from './i18n';
+import { useServices } from '../../context';
+import { Empty } from './empty';
+import { Footer } from './footer';
+
+const callToAction = (
+  <Link to={'/create'}>
+    <EuiButton iconType="plusInCircle" fill>
+      {txtCreateATag}
+    </EuiButton>
+  </Link>
+);
+
+export const LandingPage: React.FC = () => {
+  const { manager } = useServices();
+  const initializing = manager.useInitializing();
+  const tagMap = manager.useTags();
+  const tags = useMemo(() => Object.values(tagMap).map(({ data }) => data), [tagMap]);
+
+  return (
+    <>
+      <Page
+        id={'TagTable'}
+        title={txtTitle}
+        subtitle={tags.length ? <p>{txtSubtitle}</p> : undefined}
+        callToAction={tags.length ? callToAction : undefined}
+      >
+        {!initializing && !!tags.length && <TagTable />}
+        {!initializing && !tags.length && <Empty />}
+      </Page>
+      <Footer />
+    </>
+  );
+};
diff --git a/x-pack/plugins/tags/public/management/containers/page/index.ts b/x-pack/plugins/tags/public/management/containers/page/index.ts
new file mode 100644
index 0000000000000..224217e860e94
--- /dev/null
+++ b/x-pack/plugins/tags/public/management/containers/page/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './page';
diff --git a/x-pack/plugins/tags/public/management/containers/page/page.tsx b/x-pack/plugins/tags/public/management/containers/page/page.tsx
new file mode 100644
index 0000000000000..3bc22884a41e1
--- /dev/null
+++ b/x-pack/plugins/tags/public/management/containers/page/page.tsx
@@ -0,0 +1,26 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { useEffect } from 'react';
+import { Breadcrumb } from '@elastic/eui';
+import { Page as PageUi, Props as PropsUi } from '../../../components/page';
+import { useServices } from '../../context';
+
+const crumb: Breadcrumb = { text: 'Tags', href: '/' };
+
+export interface Props extends PropsUi {
+  breadcrumbs?: Breadcrumb[];
+}
+
+export const Page: React.FC<Props> = ({ breadcrumbs, ...rest }) => {
+  const services = useServices();
+
+  useEffect(() => {
+    services.params.setBreadcrumbs([crumb, ...(breadcrumbs || [])]);
+  }, [services, breadcrumbs]);
+
+  return <PageUi {...rest} />;
+};
diff --git a/x-pack/plugins/tags/public/management/containers/tag_table/i18n.ts b/x-pack/plugins/tags/public/management/containers/tag_table/i18n.ts
new file mode 100644
index 0000000000000..59616447293fa
--- /dev/null
+++ b/x-pack/plugins/tags/public/management/containers/tag_table/i18n.ts
@@ -0,0 +1,35 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const txtTag = i18n.translate('xpack.tags.tag_table.tag', {
+  defaultMessage: 'Tag',
+});
+
+export const txtTitle = i18n.translate('xpack.tags.tag_table.title', {
+  defaultMessage: 'Title',
+});
+
+export const txtDescription = i18n.translate('xpack.tags.tag_table.description', {
+  defaultMessage: 'Description',
+});
+
+export const txtActions = i18n.translate('xpack.tags.tag_table.actions', {
+  defaultMessage: 'Actions',
+});
+
+export const txtEditSomething = (something: string) =>
+  i18n.translate('xpack.tags.tag_table.editSomething', {
+    defaultMessage: 'Edit {something}',
+    values: { something },
+  });
+
+export const txtDeleteSomething = (something: string) =>
+  i18n.translate('xpack.tags.tag_table.deleteSomething', {
+    defaultMessage: 'Delete {something}',
+    values: { something },
+  });
diff --git a/x-pack/plugins/tags/public/management/containers/tag_table/index.tsx b/x-pack/plugins/tags/public/management/containers/tag_table/index.tsx
new file mode 100644
index 0000000000000..53be02a39cf06
--- /dev/null
+++ b/x-pack/plugins/tags/public/management/containers/tag_table/index.tsx
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './tag_table';
diff --git a/x-pack/plugins/tags/public/management/containers/tag_table/tag_table.tsx b/x-pack/plugins/tags/public/management/containers/tag_table/tag_table.tsx
new file mode 100644
index 0000000000000..2ee32459efa89
--- /dev/null
+++ b/x-pack/plugins/tags/public/management/containers/tag_table/tag_table.tsx
@@ -0,0 +1,124 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { useMemo, useState } from 'react';
+import { EuiInMemoryTable, EuiButton, EuiButtonIcon, EuiTextColor, EuiLink } from '@elastic/eui';
+import { Link } from 'react-router-dom';
+import { RawTagWithId } from '../../../../common';
+import { useServices } from '../../context';
+import {
+  txtTag,
+  txtTitle,
+  txtDescription,
+  txtActions,
+  txtEditSomething,
+  txtDeleteSomething,
+} from './i18n';
+import { Tag } from '../../../components/tag';
+
+const pagination = {
+  initialPageSize: 25,
+  pageSizeOptions: [25, 100],
+};
+
+export const TagTable: React.FC = () => {
+  const { manager } = useServices();
+  const initializing = manager.useInitializing();
+  const tagMap = manager.useTags();
+  const tags = useMemo(() => Object.values(tagMap).map(({ data }) => data), [tagMap]);
+  const [selection, onSelectionChange] = useState<RawTagWithId[]>([]);
+
+  return (
+    <EuiInMemoryTable<RawTagWithId>
+      itemId={'id'}
+      items={tags}
+      columns={[
+        {
+          field: 'title',
+          name: txtTitle,
+          truncateText: true,
+          sortable: (tag) => tag.title.toLowerCase(),
+          render: (value: string, tag: RawTagWithId) => (
+            <Link to={`/edit/${tag.id}`}>
+              <EuiLink>{tag.title}</EuiLink>
+            </Link>
+          ),
+        },
+        {
+          name: txtTag,
+          render: (tag: RawTagWithId) => (
+            <Link to={`/edit/${tag.id}`}>
+              <Tag tag={tag} />
+            </Link>
+          ),
+        },
+        {
+          field: 'description',
+          name: txtDescription,
+          truncateText: true,
+          sortable: true,
+          render: (value: string, record: RawTagWithId) => (
+            <EuiTextColor color="subdued">{record.description}</EuiTextColor>
+          ),
+        },
+        {
+          name: txtActions,
+          actions: [
+            {
+              render: (tag) => (
+                <Link to={`/edit/${tag.id}`}>
+                  <EuiButtonIcon
+                    aria-label={txtEditSomething(tag.title)}
+                    color={'primary'}
+                    iconType={'pencil'}
+                  />
+                </Link>
+              ),
+            },
+            {
+              render: (tag) => (
+                <EuiButtonIcon
+                  aria-label={txtDeleteSomething(tag.title)}
+                  color={'danger'}
+                  iconType={'trash'}
+                  onClick={() => manager.delete$([tag.id])}
+                />
+              ),
+            },
+          ],
+        },
+      ]}
+      hasActions
+      pagination={pagination}
+      sorting={{
+        sort: {
+          field: 'title',
+          direction: 'asc',
+        },
+      }}
+      search={{
+        box: {
+          placeholder: 'Search',
+        },
+        toolsLeft: !selection.length ? undefined : (
+          <EuiButton
+            color="danger"
+            iconType="trash"
+            onClick={() => manager.delete$(selection.map(({ id }) => id))}
+          >
+            Delete {selection.length} tags
+          </EuiButton>
+        ),
+      }}
+      loading={initializing}
+      message={undefined}
+      selection={{
+        onSelectionChange,
+        selectable: () => true,
+      }}
+    />
+  );
+};
diff --git a/x-pack/plugins/tags/public/management/containers/tags_management_section/index.tsx b/x-pack/plugins/tags/public/management/containers/tags_management_section/index.tsx
new file mode 100644
index 0000000000000..68dd889852444
--- /dev/null
+++ b/x-pack/plugins/tags/public/management/containers/tags_management_section/index.tsx
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './lazy';
diff --git a/x-pack/plugins/tags/public/management/containers/tags_management_section/lazy.tsx b/x-pack/plugins/tags/public/management/containers/tags_management_section/lazy.tsx
new file mode 100644
index 0000000000000..8a65407bdfe56
--- /dev/null
+++ b/x-pack/plugins/tags/public/management/containers/tags_management_section/lazy.tsx
@@ -0,0 +1,20 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { lazy, Suspense } from 'react';
+import { Props } from './tags_management_section';
+
+const TagsManagementSectionLazy = lazy(() =>
+  import('./tags_management_section').then((module) => ({
+    default: module.TagsManagementSection,
+  }))
+);
+
+export const TagsManagementSection: React.FC<Props> = (props) => (
+  <Suspense fallback={<></>}>
+    <TagsManagementSectionLazy {...props} />
+  </Suspense>
+);
diff --git a/x-pack/plugins/tags/public/management/containers/tags_management_section/section.tsx b/x-pack/plugins/tags/public/management/containers/tags_management_section/section.tsx
new file mode 100644
index 0000000000000..be33fbf399442
--- /dev/null
+++ b/x-pack/plugins/tags/public/management/containers/tags_management_section/section.tsx
@@ -0,0 +1,23 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { Route, Switch } from 'react-router-dom';
+import { LandingPage } from '../landing_page';
+import { CreateNewPage } from '../create_new_page';
+import { UpdateTagPage } from '../update_tag_page';
+
+export const Section: React.FC = () => {
+  return (
+    <div data-test-subj="TagsManagementSection">
+      <Switch>
+        <Route path={['', '/']} exact component={LandingPage} />
+        <Route path="/create" component={CreateNewPage} />
+        <Route path="/edit/:id" component={UpdateTagPage} />
+      </Switch>
+    </div>
+  );
+};
diff --git a/x-pack/plugins/tags/public/management/containers/tags_management_section/tags_management_section.tsx b/x-pack/plugins/tags/public/management/containers/tags_management_section/tags_management_section.tsx
new file mode 100644
index 0000000000000..9c73162ed6108
--- /dev/null
+++ b/x-pack/plugins/tags/public/management/containers/tags_management_section/tags_management_section.tsx
@@ -0,0 +1,33 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { TagsManagementServices } from '../../services';
+import { Provider } from '../../context';
+import { Section } from './section';
+
+export interface Props {
+  services: TagsManagementServices;
+}
+
+export const TagsManagementSection: React.FC<Props> = ({ services }) => {
+  // React.useEffect(() => {
+  //   services.params.tags.attachments.create({
+  //     attachments: [
+  //       {
+  //         tagId: 'a5cf7800-bd1d-11ea-b218-3176b6a06bb5',
+  //         kid: 'kid:::so:saved_object/dashboard/722b74f0-b882-11e8-a6d9-e546fe2bba5f',
+  //       },
+  //     ],
+  //   });
+  // }, [services]);
+
+  return (
+    <Provider services={services}>
+      <Section />
+    </Provider>
+  );
+};
diff --git a/x-pack/plugins/tags/public/management/containers/update_tag_page/i18n.ts b/x-pack/plugins/tags/public/management/containers/update_tag_page/i18n.ts
new file mode 100644
index 0000000000000..008aa4592f653
--- /dev/null
+++ b/x-pack/plugins/tags/public/management/containers/update_tag_page/i18n.ts
@@ -0,0 +1,19 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const txtTitle = i18n.translate('xpack.tags.creanteNewPage.title', {
+  defaultMessage: 'Update tag',
+});
+
+export const txtSubtitle = i18n.translate('xpack.tags.creanteNewPage.subtitle', {
+  defaultMessage: 'Create a descriptive colorful tag to better organize your content.',
+});
+
+export const txtGoBack = i18n.translate('xpack.tags.creanteNewPage.goBack', {
+  defaultMessage: 'Back to Tags',
+});
diff --git a/x-pack/plugins/tags/public/management/containers/update_tag_page/index.tsx b/x-pack/plugins/tags/public/management/containers/update_tag_page/index.tsx
new file mode 100644
index 0000000000000..91d5cc221fa29
--- /dev/null
+++ b/x-pack/plugins/tags/public/management/containers/update_tag_page/index.tsx
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './update_tag_page';
diff --git a/x-pack/plugins/tags/public/management/containers/update_tag_page/update_tag_page.tsx b/x-pack/plugins/tags/public/management/containers/update_tag_page/update_tag_page.tsx
new file mode 100644
index 0000000000000..416420b248790
--- /dev/null
+++ b/x-pack/plugins/tags/public/management/containers/update_tag_page/update_tag_page.tsx
@@ -0,0 +1,34 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { Link, RouteComponentProps } from 'react-router-dom';
+import { EuiButtonToggle } from '@elastic/eui';
+import { Page } from '../page';
+import { txtTitle, txtSubtitle, txtGoBack } from './i18n';
+import { useServices } from '../../context';
+import { UpdateTagByIdForm } from '../../../containers/update_tag_form';
+
+export const UpdateTagPage: React.FC<RouteComponentProps<{ id: string }>> = (props) => {
+  const { params } = useServices();
+
+  return (
+    <Page
+      id={'UpdateTag'}
+      title={txtTitle}
+      subtitle={<p>{txtSubtitle}</p>}
+      breadcrumbs={[{ text: txtTitle }]}
+      separator
+      callToAction={
+        <Link to={'/'}>
+          <EuiButtonToggle label={txtGoBack} iconType={'arrowLeft'} isEmpty />
+        </Link>
+      }
+    >
+      <UpdateTagByIdForm id={props.match.params.id} onDone={() => params.history.push('/')} />
+    </Page>
+  );
+};
diff --git a/x-pack/plugins/tags/public/management/context/index.ts b/x-pack/plugins/tags/public/management/context/index.ts
new file mode 100644
index 0000000000000..0386d13313871
--- /dev/null
+++ b/x-pack/plugins/tags/public/management/context/index.ts
@@ -0,0 +1,8 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export { useServices } from './services';
+export { Provider } from './provider';
diff --git a/x-pack/plugins/tags/public/management/context/provider.tsx b/x-pack/plugins/tags/public/management/context/provider.tsx
new file mode 100644
index 0000000000000..e90ea5b30dead
--- /dev/null
+++ b/x-pack/plugins/tags/public/management/context/provider.tsx
@@ -0,0 +1,26 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { Router } from 'react-router-dom';
+import { ToastsProvider } from '../../../../../../src/plugins/kibana_react/public';
+import { TagsManagementServices } from '../services';
+import { ServicesProvider } from './services';
+import { TagsProvider } from '../../context';
+
+export interface Props {
+  services: TagsManagementServices;
+}
+
+export const Provider: React.FC<Props> = ({ services, children }) => (
+  <TagsProvider value={services.params.tags}>
+    <ServicesProvider value={services}>
+      <ToastsProvider value={services.params.toasts}>
+        <Router history={services.params.history}>{children}</Router>
+      </ToastsProvider>
+    </ServicesProvider>
+  </TagsProvider>
+);
diff --git a/x-pack/plugins/tags/public/management/context/services.ts b/x-pack/plugins/tags/public/management/context/services.ts
new file mode 100644
index 0000000000000..528dac5db4461
--- /dev/null
+++ b/x-pack/plugins/tags/public/management/context/services.ts
@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { createContext, useContext } from 'react';
+import { TagsManagementServices } from '../services/tags_management_services';
+
+const context = createContext<TagsManagementServices | null>(null);
+
+export const ServicesProvider = context.Provider;
+export const useServices = () => useContext(context)!;
diff --git a/x-pack/plugins/tags/public/management/index.ts b/x-pack/plugins/tags/public/management/index.ts
new file mode 100644
index 0000000000000..894959f5dc6de
--- /dev/null
+++ b/x-pack/plugins/tags/public/management/index.ts
@@ -0,0 +1,8 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export { TagsManagementServices } from './services';
+export { TagsManagementSection } from './containers/tags_management_section';
diff --git a/x-pack/plugins/tags/public/management/services/index.ts b/x-pack/plugins/tags/public/management/services/index.ts
new file mode 100644
index 0000000000000..63b54138051f4
--- /dev/null
+++ b/x-pack/plugins/tags/public/management/services/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './tags_management_services';
diff --git a/x-pack/plugins/tags/public/management/services/tags_management_services.ts b/x-pack/plugins/tags/public/management/services/tags_management_services.ts
new file mode 100644
index 0000000000000..90f9b8ed6191d
--- /dev/null
+++ b/x-pack/plugins/tags/public/management/services/tags_management_services.ts
@@ -0,0 +1,23 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { ScopedHistory, ChromeBreadcrumb, CoreSetup } from 'kibana/public';
+import { TagsServiceContract, TagManager } from '../../services';
+
+export interface Params {
+  history: ScopedHistory;
+  setBreadcrumbs: (crumbs: ChromeBreadcrumb[]) => void;
+  tags: TagsServiceContract;
+  toasts: CoreSetup['notifications']['toasts'];
+}
+
+export class TagsManagementServices {
+  public readonly manager: TagManager;
+
+  constructor(public readonly params: Params) {
+    this.manager = params.tags.manager!;
+  }
+}
diff --git a/x-pack/plugins/tags/public/plugin.ts b/x-pack/plugins/tags/public/plugin.ts
new file mode 100644
index 0000000000000..b6380a0e96b86
--- /dev/null
+++ b/x-pack/plugins/tags/public/plugin.ts
@@ -0,0 +1,207 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { createElement as h } from 'react';
+import { render, unmountComponentAtNode } from 'react-dom';
+import { i18n } from '@kbn/i18n';
+import {
+  PluginInitializerContext,
+  CoreSetup,
+  CoreStart,
+  Plugin,
+  DEFAULT_APP_CATEGORIES,
+  AppMountParameters,
+} from '../../../../src/core/public';
+import {
+  ManagementSetup,
+  ManagementStart,
+  ManagementSectionId,
+} from '../../../../src/plugins/management/public';
+import {
+  ExtensionsPluginSetup,
+  ExtensionsPluginStart,
+} from '../../../../src/plugins/extensions/public';
+import { TagsManagementServices, TagsManagementSection } from './management';
+import { TagsService, TagsServiceContract, KidService } from './services';
+import { Tag, TagProps } from './containers/tag';
+import { createTagsProvider } from './context';
+import { TagListProps, TagList } from './containers/tag_list';
+import { TagPickerProps, TagPicker } from './containers/tag_picker';
+import { TagListEditableProps, TagListEditable } from './containers/tag_list_editable';
+import { TagsApp } from './application';
+import { TagsAppServices } from './application/services';
+
+export interface TagsPluginSetupDependencies {
+  extensions: ExtensionsPluginSetup;
+  management: ManagementSetup;
+}
+
+export interface TagsPluginStartDependencies {
+  extensions: ExtensionsPluginStart;
+  management: ManagementStart;
+}
+
+export interface TagsPluginSetup {
+  tags: TagsServiceContract;
+  ui: {
+    Provider: React.ComponentType;
+    Tag: React.ComponentType<TagProps>;
+    TagList: React.ComponentType<TagListProps>;
+    TagPicker: React.ComponentType<TagPickerProps>;
+    TagListEditable: React.ComponentType<TagListEditableProps>;
+  };
+}
+
+export interface TagsPluginStart {
+  tags: TagsServiceContract;
+  ui: {
+    Provider: React.ComponentType;
+    Tag: React.ComponentType<TagProps>;
+    TagList: React.ComponentType<TagListProps>;
+    TagPicker: React.ComponentType<TagPickerProps>;
+    TagListEditable: React.ComponentType<TagListEditableProps>;
+  };
+}
+
+export class TagsPlugin
+  implements
+    Plugin<
+      TagsPluginSetup,
+      TagsPluginStart,
+      TagsPluginSetupDependencies,
+      TagsPluginStartDependencies
+    > {
+  private readonly tagsService = new TagsService();
+  private readonly kid = new KidService();
+
+  constructor(initializerContext: PluginInitializerContext) {}
+
+  public setup(
+    core: CoreSetup<TagsPluginStartDependencies, unknown>,
+    plugins: TagsPluginSetupDependencies
+  ): TagsPluginSetup {
+    const { http, notifications } = core;
+
+    this.kid.registerInfoProvider('so', async (kid) => {
+      if (kid.path.length === 3 && kid.path[0] === 'saved_objects') {
+        const [, type, id] = kid.path;
+        const [coreStart] = await core.getStartServices();
+        if (type === 'dashboard') {
+          const savedObject = await coreStart.savedObjects.client.get<{
+            title: string;
+            description: string;
+          }>(type, id);
+          return {
+            euiIcon: 'dashboardApp',
+            name: savedObject.attributes.title,
+            description: savedObject.attributes.description,
+            goto: () =>
+              coreStart.application.navigateToApp('dashboards', {
+                path: `/dashboards#/view/${savedObject.id}`,
+              }),
+          };
+        }
+        if (type === 'visualization') {
+          const savedObject = await coreStart.savedObjects.client.get<{
+            title: string;
+            description: string;
+          }>(type, id);
+          return {
+            euiIcon: 'visualizeApp',
+            name: savedObject.attributes.title,
+            description: savedObject.attributes.description,
+            goto: () =>
+              coreStart.application.navigateToApp('visualize', {
+                path: `/visualize#/edit/${savedObject.id}`,
+              }),
+          };
+        }
+        return {
+          name: 'Unknown',
+          euiIcon: 'empty',
+        };
+      }
+      return {
+        name: 'Unknown',
+        euiIcon: 'empty',
+      };
+    });
+
+    const tags = this.tagsService.setup({ http });
+
+    const kibanaSection = plugins.management.sections.getSection(ManagementSectionId.Kibana);
+
+    kibanaSection.registerApp({
+      id: 'tags',
+      euiIconType: 'tag',
+      order: 0,
+      title: i18n.translate('xpack.tags.Tags', {
+        defaultMessage: 'Tags',
+      }),
+      mount: ({ element, history, setBreadcrumbs }) => {
+        const services = new TagsManagementServices({
+          history,
+          setBreadcrumbs,
+          tags,
+          toasts: notifications.toasts,
+        });
+        render(h(TagsManagementSection, { services }), element);
+        return () => {
+          unmountComponentAtNode(element);
+        };
+      },
+    });
+
+    const Provider = createTagsProvider(tags);
+
+    core.application.register({
+      id: 'tags',
+      title: 'Tags',
+      icon: 'tag',
+      order: 1,
+      category: DEFAULT_APP_CATEGORIES.management,
+      mount: async ({ element, history }: AppMountParameters) => {
+        const services = new TagsAppServices({ tags, history, kid: this.kid });
+        render(h(TagsApp, { services }), element);
+        return () => {
+          unmountComponentAtNode(element);
+        };
+      },
+    });
+
+    const setup: TagsPluginSetup = {
+      tags,
+      ui: {
+        Provider,
+        Tag: (props) => h(Provider, {}, h(Tag, props)),
+        TagList: (props) => h(Provider, {}, h(TagList, props)),
+        TagPicker: (props) => h(Provider, {}, h(TagPicker, props)),
+        TagListEditable: (props) => h(Provider, {}, h(TagListEditable, props)),
+      },
+    };
+
+    plugins.extensions.tags.TagList = setup.ui.TagList;
+    plugins.extensions.tags.TagListEditable = setup.ui.TagListEditable;
+
+    return setup;
+  }
+
+  public start(core: CoreStart, plugins: TagsPluginStartDependencies): TagsPluginStart {
+    const tags = this.tagsService;
+    const Provider = createTagsProvider(tags);
+
+    return {
+      tags,
+      ui: {
+        Provider,
+        Tag: (props) => h(Provider, {}, h(Tag, props)),
+        TagList: (props) => h(Provider, {}, h(TagList, props)),
+        TagPicker: (props) => h(Provider, {}, h(TagPicker, props)),
+        TagListEditable: (props) => h(Provider, {}, h(TagListEditable, props)),
+      },
+    };
+  }
+}
diff --git a/x-pack/plugins/tags/public/services/index.ts b/x-pack/plugins/tags/public/services/index.ts
new file mode 100644
index 0000000000000..e70efe2462fa1
--- /dev/null
+++ b/x-pack/plugins/tags/public/services/index.ts
@@ -0,0 +1,8 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './tags_service';
+export * from './kid_service';
diff --git a/x-pack/plugins/tags/public/services/kid_service/index.ts b/x-pack/plugins/tags/public/services/kid_service/index.ts
new file mode 100644
index 0000000000000..79eb517b0639a
--- /dev/null
+++ b/x-pack/plugins/tags/public/services/kid_service/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './kid_service';
diff --git a/x-pack/plugins/tags/public/services/kid_service/kid_service.ts b/x-pack/plugins/tags/public/services/kid_service/kid_service.ts
new file mode 100644
index 0000000000000..37463e96368a7
--- /dev/null
+++ b/x-pack/plugins/tags/public/services/kid_service/kid_service.ts
@@ -0,0 +1,61 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+/* eslint-disable react-hooks/rules-of-hooks */
+
+import React, { createElement as h } from 'react';
+import { parseKID, KID } from '../../../common/kid';
+import { KidCard } from '../../components/kid_card';
+
+export interface KidInfo {
+  name?: string;
+  description?: string;
+  euiIcon?: string;
+  type?: string;
+  editURL?: string;
+  viewURL?: string;
+  goto?: () => void;
+}
+
+export type KidInfoProvider = (kid: KID) => Promise<KidInfo>;
+
+export interface CardProps {
+  kid: string;
+}
+
+export class KidService {
+  private readonly infoProviders = new Map<string, KidInfoProvider>();
+
+  public readonly registerInfoProvider = (service: string, provider: KidInfoProvider) => {
+    this.infoProviders.set(service, provider);
+  };
+
+  public readonly getInfo = async (kid: string): Promise<KidInfo> => {
+    const parsed = parseKID(kid);
+    const { service } = parsed;
+    const provider = this.infoProviders.get(service);
+    if (!provider)
+      throw new Error(`KID info provider for service [service = ${service}] not found.`);
+    return await provider(parsed);
+  };
+
+  public readonly Card: React.FC<CardProps> = ({ kid }) => {
+    const [info, setInfo] = React.useState<KidInfo | null>(null);
+    const [error, setError] = React.useState<Error | null>(null);
+
+    React.useEffect(() => {
+      this.getInfo(kid).then(setInfo, setError);
+    }, [kid]);
+
+    if (error) {
+      return h('div', {}, `Could not resolve KID: ${kid}`);
+    }
+
+    if (!info) return null;
+
+    return h(KidCard, { info }, 'kid...');
+  };
+}
diff --git a/x-pack/plugins/tags/public/services/tags_service/index.ts b/x-pack/plugins/tags/public/services/tags_service/index.ts
new file mode 100644
index 0000000000000..5958df19a0680
--- /dev/null
+++ b/x-pack/plugins/tags/public/services/tags_service/index.ts
@@ -0,0 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './tags_client';
+export * from './tag_attachments_client';
+export * from './tag_manager';
+export * from './tags_service';
diff --git a/x-pack/plugins/tags/public/services/tags_service/tag_attachments_client.ts b/x-pack/plugins/tags/public/services/tags_service/tag_attachments_client.ts
new file mode 100644
index 0000000000000..344ce9172cabf
--- /dev/null
+++ b/x-pack/plugins/tags/public/services/tags_service/tag_attachments_client.ts
@@ -0,0 +1,67 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import {
+  TAGS_API_PATH,
+  ITagAttachmentsClient,
+  TagAttachmentClientCreateParams,
+  TagAttachmentClientCreateResult,
+  TagAttachmentClientGetResourceTagsParams,
+  TagAttachmentClientGetResourceTagsResult,
+  TagAttachmentClientDeleteParams,
+  TagAttachmentClientFindResourcesParams,
+  TagAttachmentClientFindResourcesResult,
+  TagAttachmentClientSetParams,
+  TagAttachmentClientSetResult,
+} from '../../../common';
+import { HttpSetup, HttpStart } from '../../../../../../src/core/public';
+
+export interface TagAttachmentsClientParams {
+  http: HttpSetup | HttpStart;
+}
+
+export class TagAttachmentsClient implements ITagAttachmentsClient {
+  private readonly path = TAGS_API_PATH;
+
+  constructor(private readonly params: TagAttachmentsClientParams) {}
+
+  public async create(
+    params: TagAttachmentClientCreateParams
+  ): Promise<TagAttachmentClientCreateResult> {
+    return await this.params.http.post<TagAttachmentClientCreateResult>(`${this.path}/attachment`, {
+      body: JSON.stringify(params),
+    });
+  }
+
+  public async set(params: TagAttachmentClientSetParams): Promise<TagAttachmentClientSetResult> {
+    return await this.params.http.put<TagAttachmentClientSetResult>(`${this.path}/attachment`, {
+      body: JSON.stringify(params),
+    });
+  }
+
+  public async del({ tagId, kid }: TagAttachmentClientDeleteParams): Promise<void> {
+    return await this.params.http.delete(`${this.path}/tag/${tagId}/attachment/${btoa(kid)}`);
+  }
+
+  public async getAttachedTags({
+    kid,
+  }: TagAttachmentClientGetResourceTagsParams): Promise<TagAttachmentClientGetResourceTagsResult> {
+    return await this.params.http.get<TagAttachmentClientGetResourceTagsResult>(
+      `${this.path}/resource/${btoa(kid)}/tags`
+    );
+  }
+
+  public async findResources(
+    params: TagAttachmentClientFindResourcesParams
+  ): Promise<TagAttachmentClientFindResourcesResult> {
+    return await this.params.http.post<TagAttachmentClientFindResourcesResult>(
+      `${this.path}/find_resources`,
+      {
+        body: JSON.stringify(params),
+      }
+    );
+  }
+}
diff --git a/x-pack/plugins/tags/public/services/tags_service/tag_manager/index.ts b/x-pack/plugins/tags/public/services/tags_service/tag_manager/index.ts
new file mode 100644
index 0000000000000..8df0b7f8b0666
--- /dev/null
+++ b/x-pack/plugins/tags/public/services/tags_service/tag_manager/index.ts
@@ -0,0 +1,8 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './types';
+export * from './tag_manager';
diff --git a/x-pack/plugins/tags/public/services/tags_service/tag_manager/resources.ts b/x-pack/plugins/tags/public/services/tags_service/tag_manager/resources.ts
new file mode 100644
index 0000000000000..531be673a2b55
--- /dev/null
+++ b/x-pack/plugins/tags/public/services/tags_service/tag_manager/resources.ts
@@ -0,0 +1,52 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+/* eslint-disable max-classes-per-file */
+
+import { BehaviorSubject } from 'rxjs';
+import { TagAttachment } from './tag_attachment';
+
+export class Resource {
+  public readonly attachments$: BehaviorSubject<TagAttachment[]>;
+
+  constructor(public readonly kid: string, attachments: TagAttachment[] = []) {
+    this.attachments$ = new BehaviorSubject<TagAttachment[]>(attachments);
+  }
+
+  public set(attachments: TagAttachment[]) {
+    this.attachments$.next(attachments);
+  }
+}
+
+export type ResourceMap = Record<string, Resource>;
+
+export class Resources {
+  public readonly data$ = new BehaviorSubject<ResourceMap>({});
+
+  public get data() {
+    return this.data$.getValue();
+  }
+
+  public get(kid: string): Resource | undefined {
+    const { data } = this;
+    if (!data.hasOwnProperty(kid)) return undefined;
+    return data[kid];
+  }
+
+  public set(kid: string, attachments: TagAttachment[]) {
+    const resource = this.get(kid);
+    if (resource) {
+      resource.set(attachments);
+      return;
+    }
+    this.add(new Resource(kid, attachments));
+  }
+
+  public add(resource: Resource) {
+    const { data } = this;
+    this.data$.next({ ...data, [resource.kid]: resource });
+  }
+}
diff --git a/x-pack/plugins/tags/public/services/tags_service/tag_manager/tag.ts b/x-pack/plugins/tags/public/services/tags_service/tag_manager/tag.ts
new file mode 100644
index 0000000000000..1f698cf44ade6
--- /dev/null
+++ b/x-pack/plugins/tags/public/services/tags_service/tag_manager/tag.ts
@@ -0,0 +1,31 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { BehaviorSubject } from 'rxjs';
+import { RawTagWithId, parseTag } from '../../../../common';
+
+export class Tag {
+  public readonly data$: BehaviorSubject<RawTagWithId>;
+
+  public get data(): RawTagWithId {
+    return this.data$.getValue();
+  }
+
+  public get id(): string {
+    return this.data.id;
+  }
+
+  constructor(data: RawTagWithId) {
+    this.data$ = new BehaviorSubject<RawTagWithId>(data);
+  }
+
+  public patch(patch: Partial<RawTagWithId>) {
+    const { data } = this;
+    const title = patch.title === undefined ? data.title : patch.title;
+    const { key, value } = parseTag(title);
+    this.data$.next({ ...data, ...patch, key, value });
+  }
+}
diff --git a/x-pack/plugins/tags/public/services/tags_service/tag_manager/tag_attachment.ts b/x-pack/plugins/tags/public/services/tags_service/tag_manager/tag_attachment.ts
new file mode 100644
index 0000000000000..abff6d8d0c549
--- /dev/null
+++ b/x-pack/plugins/tags/public/services/tags_service/tag_manager/tag_attachment.ts
@@ -0,0 +1,24 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { BehaviorSubject } from 'rxjs';
+import { RawTagAttachmentWithId } from '../../../../common';
+
+export class TagAttachment {
+  public readonly data$: BehaviorSubject<RawTagAttachmentWithId>;
+
+  public get data(): RawTagAttachmentWithId {
+    return this.data$.getValue();
+  }
+
+  public get id(): string {
+    return this.data.id;
+  }
+
+  constructor(data: RawTagAttachmentWithId) {
+    this.data$ = new BehaviorSubject<RawTagAttachmentWithId>(data);
+  }
+}
diff --git a/x-pack/plugins/tags/public/services/tags_service/tag_manager/tag_attachments.ts b/x-pack/plugins/tags/public/services/tags_service/tag_manager/tag_attachments.ts
new file mode 100644
index 0000000000000..2f435aeb65140
--- /dev/null
+++ b/x-pack/plugins/tags/public/services/tags_service/tag_manager/tag_attachments.ts
@@ -0,0 +1,40 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { BehaviorSubject } from 'rxjs';
+import { TagAttachment } from './tag_attachment';
+import { RawTagAttachmentWithId } from '../../../../common';
+
+export type TagAttachmentMap = Record<string, TagAttachment>;
+
+export class TagAttachments {
+  public readonly data$ = new BehaviorSubject<TagAttachmentMap>({});
+
+  public get data() {
+    return this.data$.getValue();
+  }
+
+  public add(attachments: RawTagAttachmentWithId[]): TagAttachmentMap {
+    const newData: TagAttachmentMap = {};
+    for (const rawAttachment of attachments) {
+      const attachment = new TagAttachment(rawAttachment);
+      newData[attachment.id] = attachment;
+    }
+    const data: TagAttachmentMap = { ...this.data$.getValue(), ...newData };
+    this.data$.next(data);
+    return data;
+  }
+
+  public get = (id: string): TagAttachment | undefined => {
+    const { data } = this;
+    if (!data.hasOwnProperty(id)) return undefined;
+    return data[id];
+  };
+
+  public getMany(ids: string[]): TagAttachment[] {
+    return ids.map(this.get).filter(Boolean) as TagAttachment[];
+  }
+}
diff --git a/x-pack/plugins/tags/public/services/tags_service/tag_manager/tag_list.ts b/x-pack/plugins/tags/public/services/tags_service/tag_manager/tag_list.ts
new file mode 100644
index 0000000000000..de2b4042f4556
--- /dev/null
+++ b/x-pack/plugins/tags/public/services/tags_service/tag_manager/tag_list.ts
@@ -0,0 +1,126 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+/* eslint-disable react-hooks/rules-of-hooks */
+
+import { useMemo } from 'react';
+import { BehaviorSubject, Observable, of, throwError, iif } from 'rxjs';
+import { map, switchMap } from 'rxjs/operators';
+import useObservable from 'react-use/lib/useObservable';
+import { RawTagWithId } from '../../../../common';
+import { Tag } from './tag';
+import { TagsManagerParams } from './types';
+
+export type TagMap = Record<string, Tag>;
+
+export type TagListState = 'start' | 'loading' | 'reloading' | 'error' | 'data';
+
+export class TagList {
+  constructor(private readonly params: TagsManagerParams) {}
+
+  public readonly state$ = new BehaviorSubject<TagListState>('start');
+
+  public readonly error$ = new BehaviorSubject<Error | null>(null);
+
+  private readonly data$$ = new BehaviorSubject<TagMap>({});
+  public get data$(): BehaviorSubject<TagMap> {
+    if (this.state$.getValue() === 'start') {
+      this.state$.next('loading');
+      this.params.tags.getAll().then(
+        (response) => {
+          const tags: Record<string, Tag> = {};
+          for (const rawTag of response.tags) tags[rawTag.id] = new Tag(rawTag);
+          this.data$$.next(tags);
+          this.state$.next('data');
+        },
+        (error) => {
+          this.error$.next(error);
+          this.state$.next('error');
+        }
+      );
+    }
+    return this.data$$;
+  }
+
+  public get data() {
+    return this.data$$.getValue();
+  }
+
+  public tag(tagId: string): Tag | undefined {
+    const { data } = this;
+    if (!data.hasOwnProperty(tagId)) return undefined;
+    return data[tagId];
+  }
+
+  public readonly initializing$ = this.state$.pipe(
+    map((state) => state === 'start' || state === 'loading')
+  );
+
+  public tag$(tagId: string): Observable<Tag> {
+    return this.data$.pipe(
+      map((tags) => {
+        const tag = tags[tagId];
+        if (!tag) throw new Error('Tag not found.');
+        return tag;
+      })
+    );
+  }
+
+  public tagData$(tagId: string): Observable<RawTagWithId> {
+    return this.tag$(tagId).pipe(switchMap((tag) => tag.data$));
+  }
+
+  public add(rawTags: RawTagWithId[]): TagMap {
+    const newTags: TagMap = {};
+    for (const rawTag of rawTags) {
+      const tag = new Tag(rawTag);
+      newTags[tag.id] = tag;
+    }
+    const data = { ...this.data$$.getValue(), ...newTags };
+    this.data$$.next(data);
+    return data;
+  }
+
+  public remove(tagIds: string[]): TagMap {
+    const { data } = this;
+    const newData: TagMap = {};
+    for (const tag of Object.values(data)) if (tagIds.indexOf(tag.id) === -1) newData[tag.id] = tag;
+    this.data$$.next(newData);
+    return newData;
+  }
+
+  public delete(ids: string[]): Tag[] {
+    const tags = this.data$$.getValue();
+    const newTags: TagMap = {};
+    const deletedTags: Tag[] = [];
+    for (const tag of Object.values(tags))
+      if (!ids.includes(tag.id)) newTags[tag.id] = tag;
+      else deletedTags.push(tag);
+    this.data$$.next(newTags);
+    return deletedTags;
+  }
+
+  public insert(tags: Tag[]) {
+    const oldTags = this.data$$.getValue();
+    const newTags: TagMap = {};
+    for (const tag of tags) newTags[tag.id] = tag;
+    this.data$$.next({ ...oldTags, ...newTags });
+  }
+
+  public readonly useInitializing = () => {
+    return useObservable(this.initializing$, true);
+  };
+
+  public readonly useData = () => {
+    const observable = useMemo(() => this.data$, []);
+    return useObservable(observable, observable.getValue());
+  };
+
+  public readonly useTag = (tagId: string): RawTagWithId | null => {
+    const observable = useMemo(() => this.tagData$(tagId), [tagId]);
+    return useObservable(observable, null);
+  };
+}
diff --git a/x-pack/plugins/tags/public/services/tags_service/tag_manager/tag_manager.ts b/x-pack/plugins/tags/public/services/tags_service/tag_manager/tag_manager.ts
new file mode 100644
index 0000000000000..df52f3d16760d
--- /dev/null
+++ b/x-pack/plugins/tags/public/services/tags_service/tag_manager/tag_manager.ts
@@ -0,0 +1,169 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { map, share, tap, switchMap, take } from 'rxjs/operators';
+import { Observable, from, of } from 'rxjs';
+import { useMemo } from 'react';
+import useObservable from 'react-use/lib/useObservable';
+import { v4 as uuidv4 } from 'uuid';
+import {
+  RawTagWithId,
+  TagsClientCreateParams,
+  parseTag,
+  TagsClientUpdateParams,
+} from '../../../../common';
+import { TagsManagerParams } from './types';
+import { TagList } from './tag_list';
+import { Tag } from './tag';
+import { TagAttachments } from './tag_attachments';
+import { Resources, Resource } from './resources';
+import { TagAttachment } from './tag_attachment';
+
+/* eslint-disable react-hooks/rules-of-hooks */
+
+export class TagManager {
+  constructor(private readonly params: TagsManagerParams) {}
+
+  private readonly tags = new TagList(this.params);
+  private readonly attachments = new TagAttachments();
+  private readonly resources = new Resources();
+
+  public readonly useInitializing = this.tags.useInitializing;
+  public readonly useTags = this.tags.useData;
+  public readonly useTag = this.tags.useTag;
+
+  public readonly useTagsList = () => {
+    const tagMap = this.useTags();
+    const tagList = useMemo(() => Object.values(tagMap), [tagMap]);
+    return tagList;
+  };
+
+  public create$(tag: Omit<TagsClientCreateParams['tag'], 'id'>): Observable<Tag> {
+    const { tags: client } = this.params;
+
+    // Add tag optimistically to UI.
+    const id = uuidv4();
+    const { key, value } = parseTag(tag.title);
+    const at = new Date().toISOString();
+    const optimisticTag: RawTagWithId = {
+      id,
+      createdAt: at,
+      updatedAt: at,
+      createdBy: '',
+      updatedBy: '',
+      enabled: true,
+      key,
+      value,
+      ...tag,
+    };
+    this.tags.add([optimisticTag]);
+
+    const observable = from(client.create({ tag: { ...tag, id } })).pipe(
+      share(),
+      map((response) => {
+        const tags = this.tags.add([response.tag]);
+        return tags[response.tag.id]!;
+      })
+    );
+
+    // Remove optimistically created tag on error.
+    observable.subscribe({
+      error: (error) => {
+        this.tags.remove([id]);
+      },
+    });
+
+    return observable;
+  }
+
+  public update$(patch: TagsClientUpdateParams['patch']): Observable<RawTagWithId> {
+    let oldData: Partial<RawTagWithId> = {};
+    const observable = this.tags.tag$(patch.id).pipe(
+      take(1),
+      tap((tag) => {
+        oldData = tag.data;
+        tag.patch(patch);
+      }),
+      switchMap((tag) => from(this.params.tags.update({ patch })).pipe(share())),
+      tap((response) => {
+        this.tags.tag(patch.id)!.patch(response.patch);
+      })
+    );
+
+    observable.subscribe(() => {});
+
+    return this.tags.tagData$(patch.id);
+  }
+
+  private getAttachedTags$(kid: string) {
+    return from(this.params.attachments.getAttachedTags({ kid })).pipe(
+      share(),
+      tap((response) => {
+        this.tags.add(response.tags);
+        this.attachments.add(response.attachments);
+        const attachments = this.attachments.getMany(response.attachments.map(({ id }) => id));
+        this.resources.set(
+          kid,
+          attachments.sort((a, b) => {
+            const aTag = this.tags.tag(a.data.tagId);
+            const bTag = this.tags.tag(b.data.tagId);
+            if (!aTag || !bTag) return 0;
+            return aTag.data.title > bTag.data.title ? 1 : -1;
+          })
+        );
+      })
+    );
+  }
+
+  public getResource$(kid: string): Observable<Resource> {
+    const resource = this.resources.get(kid);
+    if (resource) return of(resource);
+    return this.getAttachedTags$(kid).pipe(map(() => this.resources.get(kid)!));
+  }
+
+  public getResourceDataAttachments$(kid: string): Observable<TagAttachment[]> {
+    return this.getResource$(kid).pipe(switchMap((resource) => resource.attachments$));
+  }
+
+  public setAttachments$(kid: string, tagIds: string[]) {
+    const observable = from(this.params.attachments.set({ kid, tagIds })).pipe(share());
+
+    observable.subscribe(({ attachments }) => {
+      const data = this.attachments.add(attachments);
+      this.resources.set(
+        kid,
+        attachments
+          .map(({ id }) => data[id])
+          .sort((a, b) => {
+            const aTag = this.tags.tag(a.data.tagId);
+            const bTag = this.tags.tag(b.data.tagId);
+            if (!aTag || !bTag) return 0;
+            return aTag.data.title > bTag.data.title ? 1 : -1;
+          })
+      );
+    });
+
+    return observable;
+  }
+
+  public useResource(kid: string): TagAttachment[] {
+    const observable = useMemo(() => this.getResourceDataAttachments$(kid), [kid]);
+    return useObservable(observable, []);
+  }
+
+  public delete$(ids: string[]): Observable<void> {
+    const { tags: client } = this.params;
+    const deletedTags = this.tags.delete(ids);
+    const promise = Promise.all(ids.map((id) => client.del({ id }))).then(() => undefined);
+    const observable = from(promise).pipe(share());
+
+    observable.subscribe({
+      error: () => this.tags.insert(deletedTags),
+    });
+
+    return observable;
+  }
+}
diff --git a/x-pack/plugins/tags/public/services/tags_service/tag_manager/types.ts b/x-pack/plugins/tags/public/services/tags_service/tag_manager/types.ts
new file mode 100644
index 0000000000000..41e1a6393b2ff
--- /dev/null
+++ b/x-pack/plugins/tags/public/services/tags_service/tag_manager/types.ts
@@ -0,0 +1,12 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { ITagsClient, ITagAttachmentsClient } from '../../../../common';
+
+export interface TagsManagerParams {
+  tags: ITagsClient;
+  attachments: ITagAttachmentsClient;
+}
diff --git a/x-pack/plugins/tags/public/services/tags_service/tags_client.ts b/x-pack/plugins/tags/public/services/tags_service/tags_client.ts
new file mode 100644
index 0000000000000..afe19f2154077
--- /dev/null
+++ b/x-pack/plugins/tags/public/services/tags_service/tags_client.ts
@@ -0,0 +1,54 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import {
+  ITagsClient,
+  TAGS_API_PATH,
+  TagsClientCreateParams,
+  TagsClientCreateResult,
+  TagsClientReadParams,
+  TagsClientReadResult,
+  TagsClientGetAllResult,
+  TagsClientDeleteParams,
+  TagsClientUpdateParams,
+  TagsClientUpdateResult,
+} from '../../../common';
+import { HttpSetup, HttpStart } from '../../../../../../src/core/public';
+
+export interface TagsClientParams {
+  http: HttpSetup | HttpStart;
+}
+
+export class TagsClient implements ITagsClient {
+  private readonly path = TAGS_API_PATH;
+
+  constructor(private readonly params: TagsClientParams) {}
+
+  public async create(params: TagsClientCreateParams): Promise<TagsClientCreateResult> {
+    return await this.params.http.post<TagsClientCreateResult>(`${this.path}/tag`, {
+      body: JSON.stringify(params),
+    });
+  }
+
+  public async read({ id }: TagsClientReadParams): Promise<TagsClientReadResult> {
+    return await this.params.http.get<TagsClientReadResult>(`${this.path}/tag/${id}`);
+  }
+
+  public async update({ patch }: TagsClientUpdateParams): Promise<TagsClientUpdateResult> {
+    const { id, ...rest } = patch;
+    return await this.params.http.post<TagsClientUpdateResult>(`${this.path}/tag/${id}`, {
+      body: JSON.stringify({ patch: rest }),
+    });
+  }
+
+  public async del({ id }: TagsClientDeleteParams): Promise<void> {
+    await this.params.http.delete<TagsClientGetAllResult>(`${this.path}/tag/${id}`);
+  }
+
+  public async getAll(): Promise<TagsClientGetAllResult> {
+    return await this.params.http.get<TagsClientGetAllResult>(`${this.path}/tag`);
+  }
+}
diff --git a/x-pack/plugins/tags/public/services/tags_service/tags_service.ts b/x-pack/plugins/tags/public/services/tags_service/tags_service.ts
new file mode 100644
index 0000000000000..a4628fac4f340
--- /dev/null
+++ b/x-pack/plugins/tags/public/services/tags_service/tags_service.ts
@@ -0,0 +1,28 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { PublicContract } from '@kbn/utility-types';
+import { TagsClientParams, TagsClient } from './tags_client';
+import { TagManager } from './tag_manager';
+import { TagAttachmentsClient } from './tag_attachments_client';
+
+export type TagsServiceSetupParams = TagsClientParams;
+
+export class TagsService {
+  public tags!: TagsClient;
+  public attachments!: TagAttachmentsClient;
+  public manager!: TagManager;
+
+  setup(params: TagsServiceSetupParams): TagsServiceContract {
+    const tags = (this.tags = new TagsClient(params));
+    const attachments = (this.attachments = new TagAttachmentsClient(params));
+    this.manager = new TagManager({ tags, attachments });
+
+    return this;
+  }
+}
+
+export type TagsServiceContract = PublicContract<Omit<TagsService, 'setup'>>;
diff --git a/x-pack/plugins/tags/scripts/storybook.js b/x-pack/plugins/tags/scripts/storybook.js
new file mode 100644
index 0000000000000..cb7ee4b252c7c
--- /dev/null
+++ b/x-pack/plugins/tags/scripts/storybook.js
@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { join } from 'path';
+
+// eslint-disable-next-line
+require('@kbn/storybook').runStorybookCli({
+  name: 'tags',
+  storyGlobs: [join(__dirname, '..', 'public', 'components', '**', '*.examples.tsx')],
+});
diff --git a/x-pack/plugins/tags/server/index.ts b/x-pack/plugins/tags/server/index.ts
new file mode 100644
index 0000000000000..a5dfba1e5d740
--- /dev/null
+++ b/x-pack/plugins/tags/server/index.ts
@@ -0,0 +1,19 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { TagsPlugin } from './plugin';
+import { PluginInitializerContext } from '../../../../src/core/server';
+
+export { RawTag, RawTagWithId, ITagsClient, TagsClientCreateParams } from '../common';
+
+export const plugin = (initContext: PluginInitializerContext) => new TagsPlugin(initContext);
+
+export {
+  TagsPluginSetup,
+  TagsPluginStart,
+  TagsPluginSetupDependencies,
+  TagsPluginStartDependencies,
+} from './plugin';
diff --git a/x-pack/plugins/tags/server/plugin.ts b/x-pack/plugins/tags/server/plugin.ts
new file mode 100644
index 0000000000000..c7ba0e1c2b735
--- /dev/null
+++ b/x-pack/plugins/tags/server/plugin.ts
@@ -0,0 +1,158 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import {
+  Logger,
+  PluginInitializerContext,
+  CoreSetup,
+  CoreStart,
+  Plugin,
+  IContextProvider,
+  RequestHandler,
+} from '../../../../src/core/server';
+import { TagsRequestHandlerContext } from './types';
+import { setupRoutes } from './router';
+import { tagMappings, tagAttachmentMappings } from './saved_objects';
+import { TagsClientProvider } from './tags';
+import { TagAttachmentsClientProvider } from './tag_attachments';
+import { SecurityPluginSetup } from '../../security/server';
+import { BfetchServerSetup, BfetchServerStart } from '../../../../src/plugins/bfetch/server';
+import {
+  TAGS_API_PATH,
+  TagAttachmentClientGetResourceTagsParams,
+  TagAttachmentClientGetResourceTagsResult,
+} from '../common';
+
+export interface TagsPluginSetupDependencies {
+  bfetch: BfetchServerSetup;
+  security?: SecurityPluginSetup;
+}
+
+export interface TagsPluginStartDependencies {
+  bfetch: BfetchServerStart;
+  security?: undefined;
+}
+
+export interface TagsPluginSetup {
+  createTagsClient: TagsClientProvider['create'];
+  createAttachmentsClient: TagAttachmentsClientProvider['create'];
+}
+
+export interface TagsPluginStart {
+  createTagsClient: TagsClientProvider['create'];
+  createAttachmentsClient: TagAttachmentsClientProvider['create'];
+}
+
+export class TagsPlugin
+  implements
+    Plugin<
+      TagsPluginSetup,
+      TagsPluginStart,
+      TagsPluginSetupDependencies,
+      TagsPluginStartDependencies
+    > {
+  private readonly logger: Logger;
+  private tagsClientProvider?: TagsClientProvider;
+  private attachmentsClientProvider?: TagAttachmentsClientProvider;
+
+  constructor(initializerContext: PluginInitializerContext) {
+    this.logger = initializerContext.logger.get('plugins', 'tags');
+  }
+
+  public setup(
+    core: CoreSetup<TagsPluginStartDependencies, unknown>,
+    plugins: TagsPluginSetupDependencies
+  ): TagsPluginSetup {
+    const { logger } = this;
+    const { http, savedObjects } = core;
+
+    logger.debug('setup()');
+
+    this.tagsClientProvider = new TagsClientProvider({ logger });
+    this.attachmentsClientProvider = new TagAttachmentsClientProvider({ logger });
+
+    savedObjects.registerType({
+      name: 'tag',
+      hidden: false,
+      namespaceType: 'single',
+      mappings: tagMappings,
+      management: {
+        importableAndExportable: true,
+        icon: 'tag',
+        getTitle: (savedObject) => savedObject.attributes.title,
+        defaultSearchField: 'title',
+      },
+    });
+
+    savedObjects.registerType({
+      name: 'tag_attachment',
+      hidden: false,
+      namespaceType: 'single',
+      mappings: tagAttachmentMappings,
+      management: {
+        importableAndExportable: true,
+        icon: 'merge',
+        getTitle: (savedObject) =>
+          savedObject.attributes.tagId + ' : ' + savedObject.attributes.kid,
+        defaultSearchField: 'tagId',
+      },
+    });
+
+    const router = http.createRouter();
+
+    http.registerRouteHandlerContext('tags', this.createRouteHandlerContext(core, plugins));
+    setupRoutes({ router });
+
+    // Batch and stream back tags attached to KID resources as we will execute
+    // this API call many times.
+    plugins.bfetch.addBatchProcessingRoute<
+      TagAttachmentClientGetResourceTagsParams,
+      TagAttachmentClientGetResourceTagsResult
+    >(`${TAGS_API_PATH}/_bfetch/get_attached_tags`, (request, { tags }) => ({
+      onBatchItem: async (params) => {
+        if (!tags) throw new Error('Tags request context not set up.');
+        return await tags.attachmentsClient.getAttachedTags(params);
+      },
+    }));
+
+    return {
+      createTagsClient: this.tagsClientProvider.create,
+      createAttachmentsClient: this.attachmentsClientProvider.create,
+    };
+  }
+
+  public start(core: CoreStart, plugins: TagsPluginStartDependencies): TagsPluginStart {
+    this.logger.debug('start()');
+
+    return {
+      createTagsClient: this.tagsClientProvider!.create,
+      createAttachmentsClient: this.attachmentsClientProvider!.create,
+    };
+  }
+
+  private createRouteHandlerContext = (
+    setupCore: CoreSetup,
+    setupPlugins: TagsPluginSetupDependencies
+  ): IContextProvider<RequestHandler<unknown, unknown, unknown>, 'tags'> => {
+    return async (context, request) => {
+      const [core] = await setupCore.getStartServices();
+      const { savedObjects } = core;
+      const savedObjectsClient = savedObjects.getScopedClient(request);
+      const params = {
+        savedObjectsClient,
+        user: setupPlugins.security?.authc.getCurrentUser(request),
+      };
+      const tagsClient = this.tagsClientProvider!.create(params);
+      const attachmentsClient = this.attachmentsClientProvider!.create({ tagsClient, ...params });
+      const tagsContext: TagsRequestHandlerContext = {
+        tagsClient,
+        attachmentsClient,
+      };
+
+      return tagsContext;
+    };
+  };
+}
diff --git a/x-pack/plugins/tags/server/router/index.ts b/x-pack/plugins/tags/server/router/index.ts
new file mode 100644
index 0000000000000..df90ca11fedf0
--- /dev/null
+++ b/x-pack/plugins/tags/server/router/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './setup_routes';
diff --git a/x-pack/plugins/tags/server/router/routes/create_attachments.ts b/x-pack/plugins/tags/server/router/routes/create_attachments.ts
new file mode 100644
index 0000000000000..1091cd25101aa
--- /dev/null
+++ b/x-pack/plugins/tags/server/router/routes/create_attachments.ts
@@ -0,0 +1,35 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { schema } from '@kbn/config-schema';
+import { TAGS_API_PATH } from '../../../common/constants';
+import { assertTagsContext } from './util/assert_tags_context';
+import { handleBoomErrors } from './util/handle_boom_errors';
+import { RouteParams } from '../types';
+
+export const createAttachments = ({ router }: RouteParams) => {
+  router.post(
+    {
+      path: `${TAGS_API_PATH}/attachment`,
+      validate: {
+        body: schema.object({
+          attachments: schema.arrayOf(
+            schema.object({
+              tagId: schema.string(),
+              kid: schema.string(),
+            })
+          ),
+        }),
+      },
+    },
+    handleBoomErrors(
+      assertTagsContext(async ({ tags }, req, res) => {
+        const body = await tags.attachmentsClient.create(req.body);
+        return res.ok({ body });
+      })
+    )
+  );
+};
diff --git a/x-pack/plugins/tags/server/router/routes/create_tag.ts b/x-pack/plugins/tags/server/router/routes/create_tag.ts
new file mode 100644
index 0000000000000..f2f750b6e033d
--- /dev/null
+++ b/x-pack/plugins/tags/server/router/routes/create_tag.ts
@@ -0,0 +1,35 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { schema } from '@kbn/config-schema';
+import { TAGS_API_PATH } from '../../../common/constants';
+import { assertTagsContext } from './util/assert_tags_context';
+import { RouteParams } from '../types';
+import { handleBoomErrors } from './util/handle_boom_errors';
+
+export const createTag = ({ router }: RouteParams) => {
+  router.post(
+    {
+      path: `${TAGS_API_PATH}/tag`,
+      validate: {
+        body: schema.object({
+          tag: schema.object({
+            id: schema.string(),
+            title: schema.string(),
+            description: schema.string(),
+            color: schema.string(),
+          }),
+        }),
+      },
+    },
+    handleBoomErrors(
+      assertTagsContext(async ({ tags }, req, res) => {
+        const body = await tags.tagsClient.create(req.body);
+        return res.ok({ body });
+      })
+    )
+  );
+};
diff --git a/x-pack/plugins/tags/server/router/routes/delete_attachment.ts b/x-pack/plugins/tags/server/router/routes/delete_attachment.ts
new file mode 100644
index 0000000000000..df79edde0883d
--- /dev/null
+++ b/x-pack/plugins/tags/server/router/routes/delete_attachment.ts
@@ -0,0 +1,35 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { schema } from '@kbn/config-schema';
+import { TAGS_API_PATH } from '../../../common/constants';
+import { assertTagsContext } from './util/assert_tags_context';
+import { RouteParams } from '../types';
+import { handleBoomErrors } from './util/handle_boom_errors';
+
+export const deleteAttachment = ({ router }: RouteParams) => {
+  router.delete(
+    {
+      path: `${TAGS_API_PATH}/tag/{tagId}/attachment/{kid}`,
+      validate: {
+        params: schema.object({
+          tagId: schema.string(),
+          kid: schema.string(),
+        }),
+      },
+    },
+    handleBoomErrors(
+      assertTagsContext(async ({ tags }, req, res) => {
+        const { tagId, kid } = req.params;
+        await tags.attachmentsClient.del({
+          tagId,
+          kid: Buffer.from(kid, 'base64').toString('utf8'),
+        });
+        return res.ok();
+      })
+    )
+  );
+};
diff --git a/x-pack/plugins/tags/server/router/routes/delete_tag.ts b/x-pack/plugins/tags/server/router/routes/delete_tag.ts
new file mode 100644
index 0000000000000..27e84ad818e9b
--- /dev/null
+++ b/x-pack/plugins/tags/server/router/routes/delete_tag.ts
@@ -0,0 +1,31 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { schema } from '@kbn/config-schema';
+import { TAGS_API_PATH } from '../../../common/constants';
+import { assertTagsContext } from './util/assert_tags_context';
+import { RouteParams } from '../types';
+import { handleBoomErrors } from './util/handle_boom_errors';
+
+export const deleteTag = ({ router }: RouteParams) => {
+  router.delete(
+    {
+      path: `${TAGS_API_PATH}/tag/{id}`,
+      validate: {
+        params: schema.object({
+          id: schema.string(),
+        }),
+      },
+    },
+    handleBoomErrors(
+      assertTagsContext(async ({ tags }, req, res) => {
+        const { id } = req.params;
+        await tags.tagsClient.del({ id });
+        return res.ok();
+      })
+    )
+  );
+};
diff --git a/x-pack/plugins/tags/server/router/routes/find_resources.ts b/x-pack/plugins/tags/server/router/routes/find_resources.ts
new file mode 100644
index 0000000000000..f8af670f1a968
--- /dev/null
+++ b/x-pack/plugins/tags/server/router/routes/find_resources.ts
@@ -0,0 +1,33 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { schema } from '@kbn/config-schema';
+import { TAGS_API_PATH } from '../../../common/constants';
+import { assertTagsContext } from './util/assert_tags_context';
+import { RouteParams } from '../types';
+import { handleBoomErrors } from './util/handle_boom_errors';
+
+export const findResources = ({ router }: RouteParams) => {
+  router.post(
+    {
+      path: `${TAGS_API_PATH}/find_resources`,
+      validate: {
+        body: schema.object({
+          tagIds: schema.arrayOf(schema.string()),
+          kidPrefix: schema.string(),
+          perPage: schema.number(),
+          page: schema.number(),
+        }),
+      },
+    },
+    handleBoomErrors(
+      assertTagsContext(async ({ tags }, req, res) => {
+        const body = await tags.attachmentsClient.findResources(req.body);
+        return res.ok({ body });
+      })
+    )
+  );
+};
diff --git a/x-pack/plugins/tags/server/router/routes/get_all_tags.ts b/x-pack/plugins/tags/server/router/routes/get_all_tags.ts
new file mode 100644
index 0000000000000..acca6865ca44f
--- /dev/null
+++ b/x-pack/plugins/tags/server/router/routes/get_all_tags.ts
@@ -0,0 +1,25 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { TAGS_API_PATH } from '../../../common/constants';
+import { assertTagsContext } from './util/assert_tags_context';
+import { RouteParams } from '../types';
+import { handleBoomErrors } from './util/handle_boom_errors';
+
+export const getAllTags = ({ router }: RouteParams) => {
+  router.get(
+    {
+      path: `${TAGS_API_PATH}/tag`,
+      validate: {},
+    },
+    handleBoomErrors(
+      assertTagsContext(async ({ tags }, req, res) => {
+        const body = await tags.tagsClient.getAll();
+        return res.ok({ body });
+      })
+    )
+  );
+};
diff --git a/x-pack/plugins/tags/server/router/routes/get_resource_tags.ts b/x-pack/plugins/tags/server/router/routes/get_resource_tags.ts
new file mode 100644
index 0000000000000..a34ba933a4e2b
--- /dev/null
+++ b/x-pack/plugins/tags/server/router/routes/get_resource_tags.ts
@@ -0,0 +1,33 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { schema } from '@kbn/config-schema';
+import { TAGS_API_PATH } from '../../../common/constants';
+import { assertTagsContext } from './util/assert_tags_context';
+import { RouteParams } from '../types';
+import { handleBoomErrors } from './util/handle_boom_errors';
+
+export const getResourceTags = ({ router }: RouteParams) => {
+  router.get(
+    {
+      path: `${TAGS_API_PATH}/resource/{kid}/tags`,
+      validate: {
+        params: schema.object({
+          kid: schema.string(),
+        }),
+      },
+    },
+    handleBoomErrors(
+      assertTagsContext(async ({ tags }, req, res) => {
+        const { kid } = req.params;
+        const body = await tags.attachmentsClient.getAttachedTags({
+          kid: Buffer.from(kid, 'base64').toString('utf8'),
+        });
+        return res.ok({ body });
+      })
+    )
+  );
+};
diff --git a/x-pack/plugins/tags/server/router/routes/read_tag.ts b/x-pack/plugins/tags/server/router/routes/read_tag.ts
new file mode 100644
index 0000000000000..642c192c64e32
--- /dev/null
+++ b/x-pack/plugins/tags/server/router/routes/read_tag.ts
@@ -0,0 +1,30 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { schema } from '@kbn/config-schema';
+import { TAGS_API_PATH } from '../../../common/constants';
+import { assertTagsContext } from './util/assert_tags_context';
+import { RouteParams } from '../types';
+import { handleBoomErrors } from './util/handle_boom_errors';
+
+export const readTag = ({ router }: RouteParams) => {
+  router.get(
+    {
+      path: `${TAGS_API_PATH}/tag/{id}`,
+      validate: {
+        params: schema.object({
+          id: schema.string(),
+        }),
+      },
+    },
+    handleBoomErrors(
+      assertTagsContext(async ({ tags }, req, res) => {
+        const body = await tags.tagsClient.read(req.params);
+        return res.ok({ body });
+      })
+    )
+  );
+};
diff --git a/x-pack/plugins/tags/server/router/routes/set_attachments.ts b/x-pack/plugins/tags/server/router/routes/set_attachments.ts
new file mode 100644
index 0000000000000..d89744bb1d0e6
--- /dev/null
+++ b/x-pack/plugins/tags/server/router/routes/set_attachments.ts
@@ -0,0 +1,31 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { schema } from '@kbn/config-schema';
+import { TAGS_API_PATH } from '../../../common/constants';
+import { assertTagsContext } from './util/assert_tags_context';
+import { handleBoomErrors } from './util/handle_boom_errors';
+import { RouteParams } from '../types';
+
+export const setAttachments = ({ router }: RouteParams) => {
+  router.put(
+    {
+      path: `${TAGS_API_PATH}/attachment`,
+      validate: {
+        body: schema.object({
+          kid: schema.string(),
+          tagIds: schema.arrayOf(schema.string()),
+        }),
+      },
+    },
+    handleBoomErrors(
+      assertTagsContext(async ({ tags }, req, res) => {
+        const body = await tags.attachmentsClient.set(req.body);
+        return res.ok({ body });
+      })
+    )
+  );
+};
diff --git a/x-pack/plugins/tags/server/router/routes/update_tag.ts b/x-pack/plugins/tags/server/router/routes/update_tag.ts
new file mode 100644
index 0000000000000..4b1c3915e2544
--- /dev/null
+++ b/x-pack/plugins/tags/server/router/routes/update_tag.ts
@@ -0,0 +1,38 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { schema } from '@kbn/config-schema';
+import { TAGS_API_PATH } from '../../../common/constants';
+import { assertTagsContext } from './util/assert_tags_context';
+import { RouteParams } from '../types';
+import { handleBoomErrors } from './util/handle_boom_errors';
+
+export const updateTag = ({ router }: RouteParams) => {
+  router.post(
+    {
+      path: `${TAGS_API_PATH}/tag/{id}`,
+      validate: {
+        params: schema.object({
+          id: schema.string(),
+        }),
+        body: schema.object({
+          patch: schema.object({
+            title: schema.string(),
+            description: schema.string(),
+            color: schema.string(),
+          }),
+        }),
+      },
+    },
+    handleBoomErrors(
+      assertTagsContext(async ({ tags }, req, res) => {
+        const { id } = req.params;
+        const body = await tags.tagsClient.update({ patch: { ...req.body.patch, id } });
+        return res.ok({ body });
+      })
+    )
+  );
+};
diff --git a/x-pack/plugins/tags/server/router/routes/util/assert_tags_context.ts b/x-pack/plugins/tags/server/router/routes/util/assert_tags_context.ts
new file mode 100644
index 0000000000000..a3208c0ebdd3f
--- /dev/null
+++ b/x-pack/plugins/tags/server/router/routes/util/assert_tags_context.ts
@@ -0,0 +1,19 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { RequestHandler, RouteMethod, RequestHandlerContext } from 'src/core/server';
+import { TagsRouteContext, TagsRequestHandler } from '../../types';
+
+const isTagsRouteContext = (context: RequestHandlerContext): context is TagsRouteContext =>
+  !!context.tags;
+
+export const assertTagsContext = <A, B, C, D extends RouteMethod>(
+  handler: TagsRequestHandler<A, B, C, D>
+): RequestHandler<A, B, C, D> => (context, request, response) => {
+  return isTagsRouteContext(context)
+    ? handler(context, request, response)
+    : response.badRequest({ body: 'TagsRequestHandlerContext is not registered.' });
+};
diff --git a/x-pack/plugins/tags/server/router/routes/util/handle_boom_errors.ts b/x-pack/plugins/tags/server/router/routes/util/handle_boom_errors.ts
new file mode 100644
index 0000000000000..da1ba37868915
--- /dev/null
+++ b/x-pack/plugins/tags/server/router/routes/util/handle_boom_errors.ts
@@ -0,0 +1,27 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { RequestHandler, RouteMethod, RequestHandlerContext } from 'src/core/server';
+import { isBoom } from 'boom';
+
+export const handleBoomErrors = <A, B, C, D extends RouteMethod>(
+  handler: RequestHandler<A, B, C, D>
+): RequestHandler<A, B, C, D> => async (context, request, response) => {
+  try {
+    return await handler(context, request, response);
+  } catch (error) {
+    if (isBoom(error)) {
+      return response.badRequest({
+        body: {
+          message: error.message,
+          attributes: error.data,
+        },
+      });
+    }
+
+    throw error;
+  }
+};
diff --git a/x-pack/plugins/tags/server/router/setup_routes.ts b/x-pack/plugins/tags/server/router/setup_routes.ts
new file mode 100644
index 0000000000000..6e85e09911af9
--- /dev/null
+++ b/x-pack/plugins/tags/server/router/setup_routes.ts
@@ -0,0 +1,30 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { createTag } from './routes/create_tag';
+import { readTag } from './routes/read_tag';
+import { updateTag } from './routes/update_tag';
+import { getAllTags } from './routes/get_all_tags';
+import { deleteTag } from './routes/delete_tag';
+import { getResourceTags } from './routes/get_resource_tags';
+import { createAttachments } from './routes/create_attachments';
+import { setAttachments } from './routes/set_attachments';
+import { deleteAttachment } from './routes/delete_attachment';
+import { findResources } from './routes/find_resources';
+import { RouteParams } from './types';
+
+export const setupRoutes = (params: RouteParams) => {
+  createTag(params);
+  readTag(params);
+  updateTag(params);
+  deleteTag(params);
+  getAllTags(params);
+  getResourceTags(params);
+  createAttachments(params);
+  setAttachments(params);
+  deleteAttachment(params);
+  findResources(params);
+};
diff --git a/x-pack/plugins/tags/server/router/types.ts b/x-pack/plugins/tags/server/router/types.ts
new file mode 100644
index 0000000000000..c5b737012fcb6
--- /dev/null
+++ b/x-pack/plugins/tags/server/router/types.ts
@@ -0,0 +1,33 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import {
+  RouteMethod,
+  KibanaResponseFactory,
+  RequestHandlerContext,
+  KibanaRequest,
+  IKibanaResponse,
+  IRouter,
+} from 'src/core/server';
+
+export interface RouteParams {
+  router: IRouter;
+}
+
+export type TagsRouteContext = RequestHandlerContext &
+  Required<Pick<RequestHandlerContext, 'tags'>>;
+
+export type TagsRequestHandler<
+  P = unknown,
+  Q = unknown,
+  B = unknown,
+  Method extends RouteMethod = any,
+  ResponseFactory extends KibanaResponseFactory = KibanaResponseFactory
+> = (
+  context: TagsRouteContext,
+  request: KibanaRequest<P, Q, B, Method>,
+  response: ResponseFactory
+) => IKibanaResponse<any> | Promise<IKibanaResponse<any>>;
diff --git a/x-pack/plugins/tags/server/saved_objects/index.ts b/x-pack/plugins/tags/server/saved_objects/index.ts
new file mode 100644
index 0000000000000..ca8ce194cc536
--- /dev/null
+++ b/x-pack/plugins/tags/server/saved_objects/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './mappings';
diff --git a/x-pack/plugins/tags/server/saved_objects/mappings.ts b/x-pack/plugins/tags/server/saved_objects/mappings.ts
new file mode 100644
index 0000000000000..4be15a253137c
--- /dev/null
+++ b/x-pack/plugins/tags/server/saved_objects/mappings.ts
@@ -0,0 +1,82 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export const tagMappings = {
+  properties: {
+    enabled: {
+      type: 'boolean',
+    },
+    title: {
+      type: 'text',
+      fields: {
+        keyword: {
+          type: 'keyword',
+        },
+      },
+    },
+    description: {
+      type: 'text',
+      fields: {
+        keyword: {
+          type: 'keyword',
+        },
+      },
+    },
+    key: {
+      type: 'text',
+      fields: {
+        keyword: {
+          type: 'keyword',
+        },
+      },
+    },
+    value: {
+      type: 'text',
+      fields: {
+        keyword: {
+          type: 'keyword',
+        },
+      },
+    },
+    color: {
+      type: 'text',
+      fields: {
+        keyword: {
+          type: 'keyword',
+        },
+      },
+    },
+    createdBy: {
+      type: 'keyword',
+    },
+    updatedBy: {
+      type: 'keyword',
+    },
+    createdAt: {
+      type: 'date',
+    },
+    updatedAt: {
+      type: 'date',
+    },
+  },
+};
+
+export const tagAttachmentMappings = {
+  properties: {
+    tagId: {
+      type: 'keyword',
+    },
+    kid: {
+      type: 'keyword',
+    },
+    createdBy: {
+      type: 'keyword',
+    },
+    createdAt: {
+      type: 'date',
+    },
+  },
+};
diff --git a/x-pack/plugins/tags/server/tag_attachments/index.ts b/x-pack/plugins/tags/server/tag_attachments/index.ts
new file mode 100644
index 0000000000000..da4eaef3dca47
--- /dev/null
+++ b/x-pack/plugins/tags/server/tag_attachments/index.ts
@@ -0,0 +1,8 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './tag_attachments_client';
+export * from './tag_attachments_client_provider';
diff --git a/x-pack/plugins/tags/server/tag_attachments/tag_attachments_client.ts b/x-pack/plugins/tags/server/tag_attachments/tag_attachments_client.ts
new file mode 100644
index 0000000000000..49f9915279176
--- /dev/null
+++ b/x-pack/plugins/tags/server/tag_attachments/tag_attachments_client.ts
@@ -0,0 +1,211 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { Logger, SavedObjectsClientContract, SavedObject } from 'src/core/server';
+import Boom from 'boom';
+import { AuthenticatedUser } from '../../../security/server';
+import {
+  RawTagAttachment,
+  RawTagAttachmentWithId,
+  ITagAttachmentsClient,
+  TagAttachmentClientCreateParams,
+  TagAttachmentClientCreateResult,
+  TagAttachmentClientGetResourceTagsParams,
+  TagAttachmentClientGetResourceTagsResult,
+  TagAttachmentClientDeleteParams,
+  TagAttachmentClientFindResourcesParams,
+  TagAttachmentClientFindResourcesResult,
+  TagAttachmentClientSetParams,
+  TagAttachmentClientSetResult,
+} from '../../common';
+import {
+  validateTagId,
+  validateKID,
+  validateTagIds,
+  validatePerPage,
+  validatePage,
+} from '../util/validators';
+import { TagsClient } from '../tags';
+import { parseKID } from '../../common/kid';
+
+export type TagAttachmentSavedObject = SavedObject<RawTagAttachment>;
+
+export interface TagAttachmentsClientParams {
+  logger: Logger;
+  savedObjectsClient: SavedObjectsClientContract;
+  user: AuthenticatedUser | null | undefined;
+  tagsClient: TagsClient;
+}
+
+export class TagAttachmentsClient implements ITagAttachmentsClient {
+  public readonly type = 'tag_attachment';
+
+  constructor(private readonly params: TagAttachmentsClientParams) {}
+
+  private readonly toTagAttachment = (
+    savedObject: TagAttachmentSavedObject
+  ): RawTagAttachmentWithId => {
+    return {
+      id: savedObject.id,
+      ...savedObject.attributes,
+    };
+  };
+
+  private getId(tagId: string, kid: string) {
+    return `${tagId}|${kid}`;
+  }
+
+  private readonly createAttachment = async ({
+    tagId,
+    kid,
+  }: Pick<RawTagAttachment, 'tagId' | 'kid'>): Promise<RawTagAttachmentWithId> => {
+    validateTagId(tagId);
+    validateKID(kid);
+
+    const { savedObjectsClient, user } = this.params;
+    const at = new Date().toISOString();
+    const username = user ? user.username : null;
+
+    const id = this.getId(tagId, kid);
+    const rawAttachment: RawTagAttachment = {
+      tagId,
+      kid,
+      createdAt: at,
+      createdBy: username,
+    };
+    const savedObject: TagAttachmentSavedObject = await savedObjectsClient.create<RawTagAttachment>(
+      this.type,
+      rawAttachment,
+      { id }
+    );
+
+    return this.toTagAttachment(savedObject);
+  };
+
+  public async create({
+    attachments,
+  }: TagAttachmentClientCreateParams): Promise<TagAttachmentClientCreateResult> {
+    if (!Array.isArray(attachments)) throw Boom.badRequest('Expected a list of attachments.');
+
+    const results = await Promise.all(attachments.map(this.createAttachment));
+
+    return { attachments: results };
+  }
+
+  public async set({
+    kid,
+    tagIds,
+  }: TagAttachmentClientSetParams): Promise<TagAttachmentClientSetResult> {
+    validateKID(kid);
+    validateTagIds(tagIds);
+
+    const existingAttachments = await this.getAttachedTags({ kid });
+    const attachedTags: string[] = existingAttachments.tags.map((tag) => tag.id);
+
+    const tagsAlreadyAttached: string[] = [];
+    const tagsToAttach: string[] = [];
+    const tagsToDetach: string[] = [];
+
+    for (const tag of tagIds) {
+      const tagAlreadyAttached = attachedTags.indexOf(tag) > -1;
+      if (!tagAlreadyAttached) tagsToAttach.push(tag);
+    }
+
+    for (const tag of attachedTags) {
+      const tagPresentInNewSet = tagIds.indexOf(tag) > -1;
+      if (tagPresentInNewSet) tagsAlreadyAttached.push(tag);
+      else tagsToDetach.push(tag);
+    }
+
+    await Promise.all(tagsToDetach.map((tagId) => this.del({ kid, tagId })));
+    const { attachments: newAttachments } = await this.create({
+      attachments: tagsToAttach.map((tagId) => ({
+        kid,
+        tagId,
+      })),
+    });
+
+    const existingAttachmentsToKeep = existingAttachments.attachments.filter(
+      ({ tagId }) => tagsAlreadyAttached.indexOf(tagId) > -1
+    );
+
+    const attachments = [...existingAttachmentsToKeep, ...newAttachments];
+
+    const { path } = parseKID(kid);
+    const [, type, id] = path;
+
+    // TODO: this will be moved out of here, instead the `tags` plugin
+    // will emit "set_attachmets" event and other plugins will be able
+    // to subscribe to it.
+    try {
+      await this.params.savedObjectsClient.update(type, id, {
+        _tags: attachments.map(({ tagId }) => ({ tagId })),
+      });
+    } catch (error) {
+      // eslint-disable-next-line
+      console.error(error);
+    }
+
+    return {
+      attachments,
+    };
+  }
+
+  public async del({ kid, tagId }: TagAttachmentClientDeleteParams): Promise<void> {
+    validateKID(kid);
+    validateTagId(tagId);
+
+    const id = this.getId(tagId, kid);
+    const { savedObjectsClient } = this.params;
+
+    await savedObjectsClient.delete(this.type, id);
+  }
+
+  public async getAttachedTags({
+    kid,
+  }: TagAttachmentClientGetResourceTagsParams): Promise<TagAttachmentClientGetResourceTagsResult> {
+    validateKID(kid);
+
+    const { savedObjectsClient, tagsClient } = this.params;
+
+    const { saved_objects } = await savedObjectsClient.find<RawTagAttachmentWithId>({
+      type: this.type,
+      search: `attributes.kid:(${kid})`,
+      perPage: 100,
+    });
+
+    const ids: string[] = saved_objects.map(({ attributes }) => attributes.tagId);
+    const { tags } = await tagsClient.readBulk({ ids });
+
+    return {
+      attachments: saved_objects.map(this.toTagAttachment),
+      tags,
+    };
+  }
+
+  public async findResources({
+    tagIds,
+    kidPrefix,
+    perPage,
+    page,
+  }: TagAttachmentClientFindResourcesParams): Promise<TagAttachmentClientFindResourcesResult> {
+    validateTagIds(tagIds);
+    // validateKID(kidPrefix);
+    validatePerPage(perPage);
+    validatePage(page);
+
+    const { savedObjectsClient } = this.params;
+
+    const { saved_objects } = await savedObjectsClient.find<RawTagAttachmentWithId>({
+      type: this.type,
+      search: `attributes.tagId:("${tagIds.join('" & "')}") & attributes.kid:("${kidPrefix}*")`,
+      perPage: 100,
+      page: 1,
+    });
+
+    return { attachments: saved_objects.map(this.toTagAttachment) };
+  }
+}
diff --git a/x-pack/plugins/tags/server/tag_attachments/tag_attachments_client_provider.ts b/x-pack/plugins/tags/server/tag_attachments/tag_attachments_client_provider.ts
new file mode 100644
index 0000000000000..0031b6007a899
--- /dev/null
+++ b/x-pack/plugins/tags/server/tag_attachments/tag_attachments_client_provider.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { TagAttachmentsClient, TagAttachmentsClientParams } from './tag_attachments_client';
+
+export class TagAttachmentsClientProvider {
+  constructor(private readonly initParams: Pick<TagAttachmentsClientParams, 'logger'>) {}
+
+  public readonly create = (
+    remainingParams: Pick<TagAttachmentsClientParams, 'savedObjectsClient' | 'user' | 'tagsClient'>
+  ): TagAttachmentsClient => {
+    return new TagAttachmentsClient({ ...this.initParams, ...remainingParams });
+  };
+}
diff --git a/x-pack/plugins/tags/server/tags/index.ts b/x-pack/plugins/tags/server/tags/index.ts
new file mode 100644
index 0000000000000..11da9f682f969
--- /dev/null
+++ b/x-pack/plugins/tags/server/tags/index.ts
@@ -0,0 +1,8 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './tags_client';
+export * from './tags_client_provider';
diff --git a/x-pack/plugins/tags/server/tags/tags_client.ts b/x-pack/plugins/tags/server/tags/tags_client.ts
new file mode 100644
index 0000000000000..405bb3fc29c60
--- /dev/null
+++ b/x-pack/plugins/tags/server/tags/tags_client.ts
@@ -0,0 +1,176 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import {
+  Logger,
+  SavedObjectsClientContract,
+  SavedObject,
+  SavedObjectsBulkGetObject,
+} from 'src/core/server';
+import Boom from 'boom';
+import { AuthenticatedUser } from '../../../security/server';
+import {
+  RawTag,
+  RawTagWithId,
+  ITagsClient,
+  TagsClientCreateParams,
+  TagsClientDeleteParams,
+  TagsClientReadParams,
+  TagsClientReadResult,
+  TagsClientUpdateParams,
+  TagsClientUpdateResult,
+  parseTag,
+} from '../../common';
+import {
+  validateTagTitle,
+  validateTagDescription,
+  validateTagColor,
+  validateTagId,
+} from '../util/validators';
+
+export type TagSavedObject = SavedObject<RawTag>;
+
+export interface TagsClientParams {
+  logger: Logger;
+  savedObjectsClient: SavedObjectsClientContract;
+  user: AuthenticatedUser | null | undefined;
+}
+
+export class TagsClient implements ITagsClient {
+  public readonly type = 'tag';
+
+  constructor(private readonly params: TagsClientParams) {}
+
+  private readonly savedObjectToTag = (savedObject: TagSavedObject): RawTagWithId => {
+    return {
+      id: savedObject.id,
+      ...savedObject.attributes,
+    };
+  };
+
+  public async create({ tag }: TagsClientCreateParams): Promise<{ tag: RawTagWithId }> {
+    const { id, title, description, color } = tag;
+
+    validateTagId(id);
+    validateTagTitle(title);
+    validateTagDescription(description);
+    validateTagColor(color);
+
+    const { savedObjectsClient, user } = this.params;
+    const at = new Date().toISOString();
+    const username = user ? user.username : null;
+    const { key, value } = parseTag(title);
+
+    const rawTag: RawTag = {
+      enabled: true,
+      title,
+      description,
+      color,
+      key,
+      value,
+      createdAt: at,
+      updatedAt: at,
+      createdBy: username,
+      updatedBy: username,
+    };
+    const savedObject: TagSavedObject = await savedObjectsClient.create<RawTag>(this.type, rawTag, {
+      id,
+    });
+
+    return { tag: this.savedObjectToTag(savedObject) };
+  }
+
+  public async read({ id }: TagsClientReadParams): Promise<TagsClientReadResult> {
+    validateTagId(id);
+
+    const { savedObjectsClient } = this.params;
+    const savedObject: TagSavedObject = await savedObjectsClient.get(this.type, id);
+
+    return { tag: this.savedObjectToTag(savedObject) };
+  }
+
+  /**
+   * Read multiple tags in once request.
+   */
+  public async readBulk({ ids }: { ids: string[] }): Promise<{ tags: RawTagWithId[] }> {
+    const { savedObjectsClient } = this.params;
+    const bulkGetObjects: SavedObjectsBulkGetObject[] = ids.map((id) => ({
+      type: this.type,
+      id,
+    }));
+    const { saved_objects } = await savedObjectsClient.bulkGet<RawTag>(bulkGetObjects);
+
+    return { tags: saved_objects.map(this.savedObjectToTag) };
+  }
+
+  public async update({ patch }: TagsClientUpdateParams): Promise<TagsClientUpdateResult> {
+    const { id, title, description, color } = patch;
+
+    validateTagId(id);
+    if (title !== undefined) validateTagTitle(title);
+    if (description !== undefined) validateTagDescription(description);
+    if (color !== undefined) validateTagColor(color);
+
+    const { savedObjectsClient, user } = this.params;
+    const at = new Date().toISOString();
+    const username = user ? user.username : null;
+
+    let needsUpdate = false;
+    const attributePatch: Partial<RawTag> = {
+      updatedAt: at,
+      updatedBy: username,
+    };
+
+    if (title !== undefined) {
+      needsUpdate = true;
+      const { key, value } = parseTag(title);
+      attributePatch.title = title;
+      attributePatch.key = key;
+      attributePatch.value = value;
+    }
+
+    if (description !== undefined) {
+      needsUpdate = true;
+      attributePatch.description = description;
+    }
+
+    if (color !== undefined) {
+      needsUpdate = true;
+      attributePatch.color = color;
+    }
+
+    if (!needsUpdate) throw Boom.badRequest('Empty patch, nothing to update.');
+
+    const savedObjectUpdate = await savedObjectsClient.update<Partial<RawTag>>(
+      this.type,
+      id,
+      attributePatch
+    );
+
+    return { patch: savedObjectUpdate.attributes };
+  }
+
+  public async del({ id }: TagsClientDeleteParams): Promise<void> {
+    validateTagId(id);
+
+    const { savedObjectsClient } = this.params;
+
+    await savedObjectsClient.delete(this.type, id);
+  }
+
+  public async getAll(): Promise<{ tags: RawTagWithId[] }> {
+    const { savedObjectsClient } = this.params;
+
+    const result = await savedObjectsClient.find<RawTag>({
+      type: this.type,
+      perPage: 1000,
+    });
+
+    return {
+      tags: result.saved_objects.map(this.savedObjectToTag),
+    };
+  }
+}
diff --git a/x-pack/plugins/tags/server/tags/tags_client_provider.ts b/x-pack/plugins/tags/server/tags/tags_client_provider.ts
new file mode 100644
index 0000000000000..7e5dfc6dc716b
--- /dev/null
+++ b/x-pack/plugins/tags/server/tags/tags_client_provider.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { TagsClient, TagsClientParams } from './tags_client';
+
+export class TagsClientProvider {
+  constructor(private readonly initParams: Pick<TagsClientParams, 'logger'>) {}
+
+  public readonly create = (
+    remainingParams: Pick<TagsClientParams, 'savedObjectsClient' | 'user'>
+  ): TagsClient => {
+    return new TagsClient({ ...this.initParams, ...remainingParams });
+  };
+}
diff --git a/x-pack/plugins/tags/server/types.ts b/x-pack/plugins/tags/server/types.ts
new file mode 100644
index 0000000000000..fc2b40dabab38
--- /dev/null
+++ b/x-pack/plugins/tags/server/types.ts
@@ -0,0 +1,19 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { TagsClient } from './tags';
+import { TagAttachmentsClient } from './tag_attachments';
+
+export interface TagsRequestHandlerContext {
+  tagsClient: TagsClient;
+  attachmentsClient: TagAttachmentsClient;
+}
+
+declare module 'src/core/server' {
+  interface RequestHandlerContext {
+    tags?: TagsRequestHandlerContext;
+  }
+}
diff --git a/x-pack/plugins/tags/server/util/validators.test.ts b/x-pack/plugins/tags/server/util/validators.test.ts
new file mode 100644
index 0000000000000..04dd0dcb9b600
--- /dev/null
+++ b/x-pack/plugins/tags/server/util/validators.test.ts
@@ -0,0 +1,104 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import {
+  validateTagTitle,
+  validateTagDescription,
+  validateTagColor,
+  validateTagId,
+} from './validators';
+
+describe('validateTagTitle()', () => {
+  test('succeeds on valid title', () => {
+    validateTagTitle('Production Env');
+  });
+
+  test('throws if title too short', () => {
+    expect(() => validateTagTitle('')).toThrowErrorMatchingInlineSnapshot(
+      `"Tag title is too short."`
+    );
+  });
+
+  test('throws if title is too long', () => {
+    const title = 'hello'.repeat(100);
+    expect(() => validateTagTitle(title)).toThrowErrorMatchingInlineSnapshot(
+      `"Tag title is too long."`
+    );
+  });
+});
+
+describe('validateTagDescription()', () => {
+  test('succeeds on valid description', () => {
+    validateTagDescription('This is a tag for production environment.');
+  });
+
+  test('throws if title is too long', () => {
+    const title = 'extremely long description'.repeat(20000);
+    expect(() => validateTagDescription(title)).toThrowErrorMatchingInlineSnapshot(
+      `"Tag description is too long."`
+    );
+  });
+});
+
+describe('validateTagColor()', () => {
+  test('succeeds on valid colors', () => {
+    validateTagColor('#000000');
+    validateTagColor('#fffFFF');
+    validateTagColor('#234983');
+  });
+
+  test('allows empty string as color', () => {
+    validateTagColor('');
+  });
+
+  test('throws if number if provided', () => {
+    expect(() => validateTagColor(123 as any)).toThrowErrorMatchingInlineSnapshot(
+      `"Expected color to be a string."`
+    );
+  });
+
+  test('throws if color not preceded with hash', () => {
+    expect(() => validateTagColor('faAABb')).toThrowErrorMatchingInlineSnapshot(
+      `"Expected color to start with a hash."`
+    );
+  });
+
+  test('throws on invalid color string length', () => {
+    expect(() => validateTagColor('#faAABba')).toThrowErrorMatchingInlineSnapshot(
+      `"Expected color to be 6-digit HEX string."`
+    );
+    expect(() => validateTagColor('#faAAB')).toThrowErrorMatchingInlineSnapshot(
+      `"Expected color to be 6-digit HEX string."`
+    );
+  });
+
+  test('throws on invalid HEX char', () => {
+    expect(() => validateTagColor('#faAABz')).toThrowErrorMatchingInlineSnapshot(
+      `"Invalid digit in tag color."`
+    );
+  });
+});
+
+describe('validateTagId()', () => {
+  test('validates UUID', () => {
+    validateTagId('09fd1de9-5ca5-47d0-9124-7724c97b6267');
+  });
+
+  test('throws on invalid UUID', () => {
+    expect(() => validateTagId(123 as any)).toThrowErrorMatchingInlineSnapshot(
+      `"UUID must be a string."`
+    );
+    expect(() => validateTagId('adsf')).toThrowErrorMatchingInlineSnapshot(
+      `"Invalid UUID string length."`
+    );
+    expect(() =>
+      validateTagId('09fd1de9-5ca5-47d0-9124-7724c97b6267XXX')
+    ).toThrowErrorMatchingInlineSnapshot(`"Invalid UUID string length."`);
+    expect(() =>
+      validateTagId('09fd1de9a5ca5d47d049124d7724c97b6267')
+    ).toThrowErrorMatchingInlineSnapshot(`"Invalid UUID."`);
+  });
+});
diff --git a/x-pack/plugins/tags/server/util/validators.ts b/x-pack/plugins/tags/server/util/validators.ts
new file mode 100644
index 0000000000000..274ba98a7824e
--- /dev/null
+++ b/x-pack/plugins/tags/server/util/validators.ts
@@ -0,0 +1,74 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import Boom from 'boom';
+import { parseKID } from '../../common/kid';
+
+export const validateTagIds = (ids: string[]) => {
+  if (!Array.isArray(ids)) throw Boom.badRequest('Expected tags IDs to be an array.');
+  ids.forEach(validateTagId);
+};
+
+export const validateKID = (kid: string) => parseKID(kid);
+
+export const validateTagTitle = (title: string) => {
+  if (typeof title !== 'string') throw Boom.badRequest('Tag title must be a string');
+  if (title.length < 1) throw Boom.badRequest('Tag title is too short.');
+  if (title.length > 64) throw Boom.badRequest('Tag title is too long.');
+};
+
+export const validateTagDescription = (description: string) => {
+  if (typeof description !== 'string') throw Boom.badRequest('Tag description must be a string');
+  if (description.length > 16e3) throw Boom.badRequest('Tag description is too long.');
+};
+
+const HEX_CHARS = '0123456789abcdef';
+
+/**
+ * Verifies that tag color is in RGB HEX color format. The color should be a
+ * hash followed by exactly 6 HEX digits. Alpha channels and short notation 3
+ * digit colors are not supported.
+ *
+ * @param color RGB color in HEX format.
+ */
+export const validateTagColor = (color: string) => {
+  if (!color) return '';
+
+  if (typeof color !== 'string') throw Boom.badRequest('Expected color to be a string.');
+  if (color[0] !== '#') throw Boom.badRequest('Expected color to start with a hash.');
+  if (color.length !== 7) throw Boom.badRequest('Expected color to be 6-digit HEX string.');
+
+  color = color.toLocaleLowerCase();
+
+  for (let i = 1; i < color.length; i++) {
+    const char = color[i];
+    if (HEX_CHARS.indexOf(char) === -1) throw Boom.badRequest('Invalid digit in tag color.');
+  }
+};
+
+export const validatePerPage = (perPage: number) => {
+  if (typeof perPage !== 'number')
+    throw Boom.badRequest('Expected perPage parameter to be a number');
+  if (perPage < 1) throw Boom.badRequest('Too few results per page.');
+  if (perPage > 100) throw Boom.badRequest('Too many requests per page.');
+  if (perPage !== Math.round(perPage)) throw Boom.badRequest('Invalid perPage parameter.');
+};
+
+export const validatePage = (page: number) => {
+  if (typeof page !== 'number') throw Boom.badRequest('Expected page parameter to be a number');
+  if (page < 1 || page > 1000) throw Boom.badRequest('Invalid page.');
+  if (page !== Math.round(page)) throw Boom.badRequest('Invalid page parameter.');
+};
+
+const UUID_REGEX = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
+
+export const validateUUID = (uuid: string) => {
+  if (typeof uuid !== 'string') throw Boom.badRequest('UUID must be a string.');
+  if (uuid.length !== 36) throw Boom.badRequest('Invalid UUID string length.');
+  if (!UUID_REGEX.test(uuid)) throw Boom.badRequest('Invalid UUID.');
+};
+
+export const validateTagId = (tagId: string) => validateUUID(tagId);