diff --git a/x-pack/plugins/apm/public/components/shared/service_icons/icon_popover.tsx b/x-pack/plugins/apm/public/components/shared/service_icons/icon_popover.tsx
index 19abd2059c903..ac7c38dc2f888 100644
--- a/x-pack/plugins/apm/public/components/shared/service_icons/icon_popover.tsx
+++ b/x-pack/plugins/apm/public/components/shared/service_icons/icon_popover.tsx
@@ -6,13 +6,15 @@
  */
 
 import {
-  EuiButtonEmpty,
-  EuiIcon,
+  EuiButtonIcon,
   EuiLoadingContent,
   EuiPopover,
   EuiPopoverTitle,
 } from '@elastic/eui';
+import { rgba } from 'polished';
 import React from 'react';
+import styled from 'styled-components';
+import { PopoverItem } from '.';
 import { FETCH_STATUS } from '../../../hooks/use_fetcher';
 
 interface IconPopoverProps {
@@ -22,12 +24,18 @@ interface IconPopoverProps {
   onClose: () => void;
   detailsFetchStatus: FETCH_STATUS;
   isOpen: boolean;
-  icon: {
-    type?: string;
-    size?: 's' | 'm' | 'l';
-    color?: string;
-  };
+  icon: PopoverItem['icon'];
 }
+
+const StyledButtonIcon = styled(EuiButtonIcon)`
+  &.serviceIcon_button {
+    box-shadow: ${({ theme }) => {
+      const shadowColor = theme.eui.euiShadowColor;
+      return `0px 0.7px 1.4px ${rgba(shadowColor, 0.07)},
+      0px 1.9px 4px ${rgba(shadowColor, 0.05)},
+      0px 4.5px 10px ${rgba(shadowColor, 0.05)} !important;`;
+    }}
+`;
 export function IconPopover({
   icon,
   title,
@@ -46,13 +54,16 @@ export function IconPopover({
       anchorPosition="downCenter"
       ownFocus={false}
       button={
-        <EuiButtonEmpty onClick={onClick} data-test-subj={`popover_${title}`}>
-          <EuiIcon
-            type={icon.type}
-            size={icon.size ?? 'l'}
-            color={icon.color}
-          />
-        </EuiButtonEmpty>
+        <StyledButtonIcon
+          display="fill"
+          color="ghost"
+          onClick={onClick}
+          iconType={icon.type}
+          iconSize={icon.size ?? 'l'}
+          className="serviceIcon_button"
+          data-test-subj={`popover_${title}`}
+          size="m"
+        />
       }
       isOpen={isOpen}
       closePopover={onClose}
diff --git a/x-pack/plugins/apm/public/components/shared/service_icons/index.tsx b/x-pack/plugins/apm/public/components/shared/service_icons/index.tsx
index 77639ea1f6d72..b0c6a66d849d8 100644
--- a/x-pack/plugins/apm/public/components/shared/service_icons/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/service_icons/index.tsx
@@ -49,11 +49,10 @@ export function getContainerIcon(container?: ContainerType) {
 
 type Icons = 'service' | 'container' | 'cloud' | 'alerts';
 
-interface PopoverItem {
+export interface PopoverItem {
   key: Icons;
   icon: {
     type?: string;
-    color?: string;
     size?: 's' | 'm' | 'l';
   };
   isVisible: boolean;
diff --git a/x-pack/plugins/apm/public/components/shared/service_icons/service_icons.stories.tsx b/x-pack/plugins/apm/public/components/shared/service_icons/service_icons.stories.tsx
new file mode 100644
index 0000000000000..41a63eae56d52
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/shared/service_icons/service_icons.stories.tsx
@@ -0,0 +1,130 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import { EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { CoreStart } from '../../../../../../../src/core/public';
+import { createKibanaReactContext } from '../../../../../../../src/plugins/kibana_react/public';
+import {
+  APIReturnType,
+  createCallApmApi,
+} from '../../../services/rest/createCallApmApi';
+import { ServiceIcons } from './';
+
+type ServiceDetailsReturnType =
+  APIReturnType<'GET /internal/apm/services/{serviceName}/metadata/details'>;
+type ServiceIconsReturnType =
+  APIReturnType<'GET /internal/apm/services/{serviceName}/metadata/icons'>;
+
+interface Args {
+  serviceName: string;
+  start: string;
+  end: string;
+  icons: ServiceIconsReturnType;
+  details: ServiceDetailsReturnType;
+}
+
+const stories: Meta<Args> = {
+  title: 'shared/ServiceIcons',
+  component: ServiceIcons,
+  decorators: [
+    (StoryComponent, { args }) => {
+      const { icons, details, serviceName } = args;
+
+      const coreMock = {
+        http: {
+          get: (endpoint: string) => {
+            switch (endpoint) {
+              case `/internal/apm/services/${serviceName}/metadata/icons`:
+                return icons;
+              default:
+                return details;
+            }
+          },
+        },
+        notifications: { toasts: { add: () => {} } },
+        uiSettings: { get: () => true },
+      } as unknown as CoreStart;
+
+      const KibanaReactContext = createKibanaReactContext(coreMock);
+
+      createCallApmApi(coreMock);
+
+      return (
+        <KibanaReactContext.Provider>
+          <StoryComponent />
+        </KibanaReactContext.Provider>
+      );
+    },
+  ],
+};
+export default stories;
+
+export const Example: Story<Args> = ({ serviceName, start, end }) => {
+  return (
+    <EuiFlexGroup>
+      <EuiFlexItem>
+        <EuiTitle size="l">
+          <h1 data-test-subj="apmMainTemplateHeaderServiceName">
+            <EuiFlexGroup justifyContent="spaceBetween">
+              <EuiFlexItem>
+                <EuiFlexGroup>
+                  <EuiFlexItem grow={false}>
+                    <EuiTitle size="l">
+                      <h1 data-test-subj="apmMainTemplateHeaderServiceName">
+                        {serviceName}
+                      </h1>
+                    </EuiTitle>
+                  </EuiFlexItem>
+                  <EuiFlexItem grow={false}>
+                    <ServiceIcons
+                      serviceName={serviceName}
+                      start={start}
+                      end={end}
+                    />
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </h1>
+        </EuiTitle>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
+Example.args = {
+  serviceName: 'opbeans-java',
+  start: '2021-09-10T13:59:00.000Z',
+  end: '2021-09-10T14:14:04.789Z',
+  icons: {
+    agentName: 'java',
+    containerType: 'Kubernetes',
+    cloudProvider: 'gcp',
+  },
+  details: {
+    service: {
+      versions: ['2021-12-22 17:03:27'],
+      runtime: { name: 'Java', version: '11.0.11' },
+      agent: {
+        name: 'java',
+        version: '1.28.3-SNAPSHOT.UNKNOWN',
+      },
+    },
+    container: {
+      os: 'Linux',
+      type: 'Kubernetes',
+      isContainerized: true,
+      totalNumberInstances: 1,
+    },
+    cloud: {
+      provider: 'gcp',
+      projectName: 'elastic-observability',
+      availabilityZones: ['us-central1-c'],
+      machineTypes: ['n1-standard-4'],
+    },
+  },
+};