diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/__snapshots__/index.test.js.snap b/packages/jaeger-ui/src/components/Monitor/ServicesView/__snapshots__/index.test.js.snap
index 512a5226cf..498d0c9169 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/__snapshots__/index.test.js.snap
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/__snapshots__/index.test.js.snap
@@ -12,7 +12,7 @@ exports[`<MonitorATMServicesView> ATM snapshot test 1`] = `
         <h2
           className="service-selector-header"
         >
-          Choose service
+          Service
         </h2>
         <Field
           component={[Function]}
@@ -42,6 +42,61 @@ exports[`<MonitorATMServicesView> ATM snapshot test 1`] = `
           </Option>
         </Field>
       </Col>
+      <Col
+        span={6}
+      >
+        <h2
+          className="span-kind-selector-header"
+        >
+          Span Kind
+        </h2>
+        <Field
+          component={[Function]}
+          name="spanKind"
+          onChange={[Function]}
+          placeholder="Select A Span Kind"
+          props={
+            Object {
+              "className": "span-kind-selector",
+              "defaultValue": "server",
+              "disabled": null,
+              "loading": null,
+              "value": "server",
+            }
+          }
+        >
+          <Option
+            key="client"
+            value="client"
+          >
+            Client
+          </Option>
+          <Option
+            key="server"
+            value="server"
+          >
+            Server
+          </Option>
+          <Option
+            key="internal"
+            value="internal"
+          >
+            Internal
+          </Option>
+          <Option
+            key="producer"
+            value="producer"
+          >
+            Producer
+          </Option>
+          <Option
+            key="consumer"
+            value="consumer"
+          >
+            Consumer
+          </Option>
+        </Field>
+      </Col>
     </Row>
     <Row
       align="middle"
@@ -429,7 +484,7 @@ exports[`<MonitorATMServicesView> ATM snapshot test with no metrics 1`] = `
         <h2
           className="service-selector-header"
         >
-          Choose service
+          Service
         </h2>
         <Field
           component={[Function]}
@@ -446,6 +501,61 @@ exports[`<MonitorATMServicesView> ATM snapshot test with no metrics 1`] = `
           }
         />
       </Col>
+      <Col
+        span={6}
+      >
+        <h2
+          className="span-kind-selector-header"
+        >
+          Span Kind
+        </h2>
+        <Field
+          component={[Function]}
+          name="spanKind"
+          onChange={[Function]}
+          placeholder="Select A Span Kind"
+          props={
+            Object {
+              "className": "span-kind-selector",
+              "defaultValue": "server",
+              "disabled": null,
+              "loading": null,
+              "value": "server",
+            }
+          }
+        >
+          <Option
+            key="client"
+            value="client"
+          >
+            Client
+          </Option>
+          <Option
+            key="server"
+            value="server"
+          >
+            Server
+          </Option>
+          <Option
+            key="internal"
+            value="internal"
+          >
+            Internal
+          </Option>
+          <Option
+            key="producer"
+            value="producer"
+          >
+            Producer
+          </Option>
+          <Option
+            key="consumer"
+            value="consumer"
+          >
+            Consumer
+          </Option>
+        </Field>
+      </Col>
     </Row>
     <Row
       align="middle"
@@ -752,7 +862,7 @@ exports[`<MonitorATMServicesView> render one service latency 1`] = `
         <h2
           className="service-selector-header"
         >
-          Choose service
+          Service
         </h2>
         <Field
           component={[Function]}
@@ -769,6 +879,61 @@ exports[`<MonitorATMServicesView> render one service latency 1`] = `
           }
         />
       </Col>
+      <Col
+        span={6}
+      >
+        <h2
+          className="span-kind-selector-header"
+        >
+          Span Kind
+        </h2>
+        <Field
+          component={[Function]}
+          name="spanKind"
+          onChange={[Function]}
+          placeholder="Select A Span Kind"
+          props={
+            Object {
+              "className": "span-kind-selector",
+              "defaultValue": "server",
+              "disabled": null,
+              "loading": null,
+              "value": "server",
+            }
+          }
+        >
+          <Option
+            key="client"
+            value="client"
+          >
+            Client
+          </Option>
+          <Option
+            key="server"
+            value="server"
+          >
+            Server
+          </Option>
+          <Option
+            key="internal"
+            value="internal"
+          >
+            Internal
+          </Option>
+          <Option
+            key="producer"
+            value="producer"
+          >
+            Producer
+          </Option>
+          <Option
+            key="consumer"
+            value="consumer"
+          >
+            Consumer
+          </Option>
+        </Field>
+      </Col>
     </Row>
     <Row
       align="middle"
diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.css b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.css
index d3ffa40990..0e50c1c1bf 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.css
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.css
@@ -23,10 +23,20 @@ limitations under the License.
   font-weight: 800;
 }
 
+.span-kind-selector-header {
+  padding-left: 10px;
+  font-size: 18px;
+  font-weight: 800;
+}
+
+.span-kind-selector {
+  padding-left: 10px;
+}
+
 .operations-metrics-text {
   margin-top: 17px;
   margin-bottom: 14px;
-  font-size: 14;
+  font-size: 14px;
   font-weight: 400;
 }
 
diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.test.js b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.test.js
index 0442148dde..48c12ad90b 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.test.js
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.test.js
@@ -21,6 +21,7 @@ import {
   getLoopbackInterval,
   yAxisTickFormat,
   timeFrameOptions,
+  spanKindOptions,
 } from '.';
 import LoadingIndicator from '../../common/LoadingIndicator';
 import MonitorATMEmptyState from '../EmptyState';
@@ -292,10 +293,12 @@ describe('<MonitorATMServicesView>', () => {
   it('Should track all events', () => {
     const trackSelectServiceSpy = jest.spyOn(track, 'trackSelectService');
     const trackViewAllTracesSpy = jest.spyOn(track, 'trackViewAllTraces');
+    const trackSelectSpanKindSpy = jest.spyOn(track, 'trackSelectSpanKind');
     const trackSelectTimeframeSpy = jest.spyOn(track, 'trackSelectTimeframe');
     const trackSearchOperationSpy = jest.spyOn(track, 'trackSearchOperation');
 
     const newValue = 'newValue';
+    const [spanKindOption] = spanKindOptions;
     const [timeFrameOption] = timeFrameOptions;
 
     wrapper.setProps({
@@ -308,6 +311,9 @@ describe('<MonitorATMServicesView>', () => {
     wrapper.find('Field').first().simulate('change', null, newValue);
     expect(trackSelectServiceSpy).toHaveBeenCalledWith(newValue);
 
+    wrapper.find({ name: 'spanKind' }).simulate('change', null, spanKindOption.value);
+    expect(trackSelectSpanKindSpy).toHaveBeenCalledWith(spanKindOption.label);
+
     wrapper.find('Field').last().simulate('change', null, timeFrameOption.value);
     expect(trackSelectTimeframeSpy).toHaveBeenCalledWith(timeFrameOption.label);
 
@@ -316,6 +322,7 @@ describe('<MonitorATMServicesView>', () => {
 
     trackSelectServiceSpy.mockReset();
     trackViewAllTracesSpy.mockReset();
+    trackSelectSpanKindSpy.mockReset();
     trackSelectTimeframeSpy.mockReset();
     trackSearchOperationSpy.mockReset();
   });
@@ -361,6 +368,7 @@ describe('mapStateToProps()', () => {
       metrics: originInitialState,
       services: [],
       selectedService: 's1',
+      selectedSpanKind: 'server',
       selectedTimeFrame: 3600000,
     });
   });
diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.track.test.js b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.track.test.js
index 515a7a58f8..c784444f16 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.track.test.js
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.track.test.js
@@ -18,7 +18,9 @@ import {
   CATEGORY_SELECT_SERVICE,
   CATEGORY_SELECT_TIMEFRAME,
   CATEGORY_VIEW_ALL_TRACES,
+  CATEGORY_SELECT_SPAN_KIND,
   trackSelectService,
+  trackSelectSpanKind,
   trackSelectTimeframe,
   trackViewAllTraces,
   trackSearchOperation,
@@ -46,6 +48,12 @@ describe('ServicesView tracking', () => {
     expect(trackEvent).toHaveBeenCalledWith(CATEGORY_SELECT_SERVICE, serviceName);
   });
 
+  it('trackSelectSpanKind calls trackEvent with the match category and show action', () => {
+    const spanKind = 'producer';
+    trackSelectSpanKind(spanKind);
+    expect(trackEvent).toHaveBeenCalledWith(CATEGORY_SELECT_SPAN_KIND, spanKind);
+  });
+
   it('trackSelectTimeframe calls trackEvent with the match category and show action', () => {
     const timeframe = 'some-timeframe';
     trackSelectTimeframe(timeframe);
diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.track.tsx b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.track.tsx
index 0ae66ad4b9..680e3aac08 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.track.tsx
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.track.tsx
@@ -18,11 +18,13 @@ const SPM_CATEGORY_BASE = 'jaeger/ux/trace/spm';
 
 export const CATEGORY_VIEW_ALL_TRACES = `${SPM_CATEGORY_BASE}/view-all-traces`;
 export const CATEGORY_SELECT_SERVICE = `${SPM_CATEGORY_BASE}/select-service`;
+export const CATEGORY_SELECT_SPAN_KIND = `${SPM_CATEGORY_BASE}/select-span-kind`;
 export const CATEGORY_SELECT_TIMEFRAME = `${SPM_CATEGORY_BASE}/select-timeframe`;
 export const CATEGORY_SEARCH_OPERATION = `${SPM_CATEGORY_BASE}/search-operation`;
 
 export const trackViewAllTraces = () => trackEvent(CATEGORY_VIEW_ALL_TRACES, 'click');
 export const trackSelectService = (service: string) => trackEvent(CATEGORY_SELECT_SERVICE, service);
+export const trackSelectSpanKind = (spanKind: string) => trackEvent(CATEGORY_SELECT_SPAN_KIND, spanKind);
 export const trackSelectTimeframe = (timeframe: string) => trackEvent(CATEGORY_SELECT_TIMEFRAME, timeframe);
 export const trackSearchOperation = (searchQuery: string) =>
   trackEvent(CATEGORY_SEARCH_OPERATION, searchQuery);
diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
index e22a42bd6f..8ce0b037b6 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
@@ -37,6 +37,7 @@ import {
   Points,
   ServiceMetricsObject,
   ServiceOpsMetrics,
+  spanKinds,
 } from '../../../types/metrics';
 import prefixUrl from '../../../utils/prefix-url';
 import { convertToTimeUnit, convertTimeUnitToShortTerm, getSuitableTimeUnit } from '../../../utils/date';
@@ -46,6 +47,7 @@ import { getConfigValue } from '../../../utils/config/get-config';
 import {
   trackSearchOperation,
   trackSelectService,
+  trackSelectSpanKind,
   trackSelectTimeframe,
   trackViewAllTraces,
 } from './index.track';
@@ -64,6 +66,7 @@ type TReduxProps = {
   servicesLoading: boolean;
   metrics: MetricsReduxState;
   selectedService: string;
+  selectedSpanKind: spanKinds;
   selectedTimeFrame: number;
 };
 
@@ -94,6 +97,13 @@ export const timeFrameOptions = [
   { label: 'Last 24 hours', value: 24 * oneHourInMilliSeconds },
   { label: 'Last 2 days', value: 48 * oneHourInMilliSeconds },
 ];
+export const spanKindOptions = [
+  { label: 'Client', value: 'client' },
+  { label: 'Server', value: 'server' },
+  { label: 'Internal', value: 'internal' },
+  { label: 'Producer', value: 'producer' },
+  { label: 'Consumer', value: 'consumer' },
+];
 
 // export for tests
 export const getLoopbackInterval = (interval: number) => {
@@ -166,9 +176,13 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TPropsWithIn
   }
 
   componentDidUpdate(prevProps: TProps) {
-    const { selectedService, selectedTimeFrame, services } = this.props;
+    const { selectedService, selectedSpanKind, selectedTimeFrame, services } = this.props;
 
-    if (prevProps.selectedService !== selectedService || prevProps.selectedTimeFrame !== selectedTimeFrame) {
+    if (
+      prevProps.selectedService !== selectedService ||
+      prevProps.selectedSpanKind !== selectedSpanKind ||
+      prevProps.selectedTimeFrame !== selectedTimeFrame
+    ) {
       this.fetchMetrics();
     } else if (!_isEqual(prevProps.services, services)) {
       this.fetchMetrics();
@@ -201,6 +215,7 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TPropsWithIn
   fetchMetrics() {
     const {
       selectedService,
+      selectedSpanKind,
       selectedTimeFrame,
       fetchAllServiceMetrics,
       fetchAggregatedServiceMetrics,
@@ -210,6 +225,7 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TPropsWithIn
 
     if (currentService) {
       this.endTime = Date.now();
+      store.set('lastAtmSearchSpanKind', selectedSpanKind);
       store.set('lastAtmSearchTimeframe', selectedTimeFrame);
       store.set('lastAtmSearchService', this.getSelectedService());
 
@@ -219,6 +235,7 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TPropsWithIn
         lookback: selectedTimeFrame,
         step: 60 * 1000,
         ratePer: 10 * 60 * 1000,
+        spanKind: selectedSpanKind,
       };
 
       fetchAllServiceMetrics(currentService, metricQueryPayload);
@@ -234,7 +251,7 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TPropsWithIn
   }
 
   render() {
-    const { services, metrics, selectedTimeFrame, servicesLoading } = this.props;
+    const { services, metrics, selectedSpanKind, selectedTimeFrame, servicesLoading } = this.props;
     const serviceLatencies = metrics.serviceMetrics ? metrics.serviceMetrics.service_latencies : null;
     const displayTimeUnit = calcDisplayTimeUnit(serviceLatencies);
     const serviceErrorRate = metrics.serviceMetrics ? metrics.serviceMetrics.service_error_rate : null;
@@ -267,7 +284,7 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TPropsWithIn
         <div className="service-view-container">
           <Row>
             <Col span={6}>
-              <h2 className="service-selector-header">Choose service</h2>
+              <h2 className="service-selector-header">Service</h2>
               <Field
                 onChange={(e, newValue: string) => trackSelectService(newValue)}
                 name="service"
@@ -287,6 +304,31 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TPropsWithIn
                 ))}
               </Field>
             </Col>
+            <Col span={6}>
+              <h2 className="span-kind-selector-header">Span Kind</h2>
+              <Field
+                name="spanKind"
+                component={reduxFormFieldAdapter({ AntInputComponent: SearchableSelect })}
+                placeholder="Select A Span Kind"
+                onChange={(e, value: string) => {
+                  const { label } = spanKindOptions.find(option => option.value === value)!;
+                  trackSelectSpanKind(label);
+                }}
+                props={{
+                  className: 'span-kind-selector',
+                  defaultValue: 'server',
+                  value: selectedSpanKind,
+                  disabled: metrics.operationMetricsLoading,
+                  loading: metrics.operationMetricsLoading,
+                }}
+              >
+                {spanKindOptions.map(option => (
+                  <Option key={option.value} value={option.value}>
+                    {option.label}
+                  </Option>
+                ))}
+              </Field>
+            </Col>
           </Row>
           <Row align="middle">
             <Col span={16}>
@@ -435,6 +477,8 @@ export function mapStateToProps(state: ReduxState): TReduxProps {
     servicesLoading: services.loading,
     metrics,
     selectedService: serviceFormSelector(state, 'service') || store.get('lastAtmSearchService'),
+    selectedSpanKind:
+      serviceFormSelector(state, 'spanKind') || store.get('lastAtmSearchSpanKind') || 'server',
     selectedTimeFrame:
       serviceFormSelector(state, 'timeframe') || store.get('lastAtmSearchTimeframe') || oneHourInMilliSeconds,
   };
diff --git a/packages/jaeger-ui/src/types/metrics.tsx b/packages/jaeger-ui/src/types/metrics.tsx
index af694cf050..bef57b0d58 100644
--- a/packages/jaeger-ui/src/types/metrics.tsx
+++ b/packages/jaeger-ui/src/types/metrics.tsx
@@ -23,14 +23,16 @@ export type AvailableOpsMetrics =
   | 'service_operation_latencies'
   | 'service_operation_error_rate';
 
+export type spanKinds = 'unspecified' | 'internal' | 'server' | 'client' | 'producer' | 'consumer';
+
 export type MetricsAPIQueryParams = {
   quantile: number;
   groupByOperation?: boolean;
-  endTs?: number;
-  lookback?: number;
-  step?: number;
-  ratePer?: number;
-  spanKind?: 'unspecified' | 'internal' | 'server' | 'client' | 'producer' | 'consumer';
+  endTs: number;
+  lookback: number;
+  step: number;
+  ratePer: number;
+  spanKind: spanKinds;
 };
 
 export type LableObject = {