diff --git a/packages/jaeger-ui/src/components/Monitoring/ServicesView/__snapshots__/index.test.js.snap b/packages/jaeger-ui/src/components/Monitoring/ServicesView/__snapshots__/index.test.js.snap
index 69dca5cfdd..24125dbaa7 100644
--- a/packages/jaeger-ui/src/components/Monitoring/ServicesView/__snapshots__/index.test.js.snap
+++ b/packages/jaeger-ui/src/components/Monitoring/ServicesView/__snapshots__/index.test.js.snap
@@ -21,6 +21,7 @@ exports[`<MonitoringATMServicesView> ATM snapshot test 1`] = `
         placeholder="Select A Service"
         props={
           Object {
+            "className": "select-a-service-input",
             "clearable": false,
             "disabled": null,
             "options": Array [
@@ -34,10 +35,6 @@ exports[`<MonitoringATMServicesView> ATM snapshot test 1`] = `
               },
             ],
             "required": true,
-            "style": Object {
-              "fontSize": 14,
-              "width": "100%",
-            },
             "value": "s1",
           }
         }
@@ -53,7 +50,7 @@ exports[`<MonitoringATMServicesView> ATM snapshot test 1`] = `
       <p
         className="operations-metrics-text"
       >
-        Aggregation of all "
+        95th percentile aggregation of all "
         s1
         " metrics in selected timeframe.
          
@@ -75,6 +72,7 @@ exports[`<MonitoringATMServicesView> ATM snapshot test 1`] = `
         placeholder="Select A Timeframe"
         props={
           Object {
+            "className": "select-a-timeframe-input",
             "clearable": false,
             "defaultValue": Object {
               "label": "Last Hour",
@@ -108,10 +106,6 @@ exports[`<MonitoringATMServicesView> ATM snapshot test 1`] = `
               },
             ],
             "required": true,
-            "style": Object {
-              "fontSize": 14,
-              "width": 128,
-            },
             "value": 3600000,
           }
         }
@@ -176,7 +170,7 @@ exports[`<MonitoringATMServicesView> ATM snapshot test 1`] = `
             },
           ]
         }
-        name="Latency"
+        name="Latency, ms"
         showHorizontalLines={true}
         showLegend={true}
         width={300}
@@ -207,7 +201,7 @@ exports[`<MonitoringATMServicesView> ATM snapshot test 1`] = `
             "serviceName": "cartservice",
           }
         }
-        name="Error rate %"
+        name="Error rate, %"
         width={300}
         yDomain={
           Array [
@@ -242,7 +236,7 @@ exports[`<MonitoringATMServicesView> ATM snapshot test 1`] = `
             "serviceName": "cartservice",
           }
         }
-        name="Requests"
+        name="Requests rate, req/s"
         showHorizontalLines={true}
         width={300}
       />
@@ -261,44 +255,29 @@ exports[`<MonitoringATMServicesView> ATM snapshot test 1`] = `
         <h2
           className="table-header"
         >
-          Operations under 
+          95th percentile operations metrics under 
           s1
         </h2>
          
         <span
-          style={
-            Object {
-              "fontSize": 14,
-              "fontWeight": 400,
-            }
-          }
+          className="over-the-last"
         >
-          Over the last 
-           hour
+          Over the 
+          last hour
         </span>
       </Col>
       <Col
+        className="select-operation-column"
         span={8}
-        style={
-          Object {
-            "display": "inline-flex",
-            "justifyContent": "flex-end",
-          }
-        }
       >
         <Search
+          className="select-operation-input"
           disabled={false}
           enterButton={false}
           inputPrefixCls="ant-input"
           onChange={[Function]}
           placeholder="Search operation"
           prefixCls="ant-input-search"
-          style={
-            Object {
-              "fontSize": 14,
-              "width": 218,
-            }
-          }
           value=""
         />
       </Col>
diff --git a/packages/jaeger-ui/src/components/Monitoring/ServicesView/__snapshots__/serviceGraph.test.js.snap b/packages/jaeger-ui/src/components/Monitoring/ServicesView/__snapshots__/serviceGraph.test.js.snap
index fa32b3b088..567b2a6932 100644
--- a/packages/jaeger-ui/src/components/Monitoring/ServicesView/__snapshots__/serviceGraph.test.js.snap
+++ b/packages/jaeger-ui/src/components/Monitoring/ServicesView/__snapshots__/serviceGraph.test.js.snap
@@ -161,7 +161,7 @@ exports[`<ServiceGraph> Base graph should be displayed  1`] = `
       <div
         style={
           Object {
-            "width": 70,
+            "width": 140,
           }
         }
       />
@@ -275,7 +275,7 @@ exports[`<ServiceGraph> Base graph with custom color should be displayed 1`] = `
       <div
         style={
           Object {
-            "width": 70,
+            "width": 140,
           }
         }
       />
@@ -393,7 +393,7 @@ exports[`<ServiceGraph> Base graph with horizontal lines should be displayed 1`]
       <div
         style={
           Object {
-            "width": 70,
+            "width": 140,
           }
         }
       />
@@ -507,7 +507,7 @@ exports[`<ServiceGraph> Base graph with legends should be displayed 1`] = `
       <div
         style={
           Object {
-            "width": 70,
+            "width": 140,
           }
         }
       />
@@ -642,7 +642,7 @@ exports[`<ServiceGraph> Crosshair map test 1`] = `
       <div
         style={
           Object {
-            "width": 70,
+            "width": 140,
           }
         }
       />
diff --git a/packages/jaeger-ui/src/components/Monitoring/ServicesView/index.css b/packages/jaeger-ui/src/components/Monitoring/ServicesView/index.css
index 476f83cc54..f04b2eba0c 100644
--- a/packages/jaeger-ui/src/components/Monitoring/ServicesView/index.css
+++ b/packages/jaeger-ui/src/components/Monitoring/ServicesView/index.css
@@ -33,6 +33,8 @@ limitations under the License.
 .timeframe-selector {
   display: inline-flex;
   justify-content: flex-end;
+  position: absolute;
+  bottom: 14px;
 }
 
 .operation-table-block {
@@ -45,3 +47,28 @@ limitations under the License.
   font-size: 18;
   font-weight: 700;
 }
+
+.select-a-service-input {
+  font-size: 14px;
+  width: 100%;
+}
+
+.select-a-timeframe-input {
+  font-size: 14px;
+  width: 128px;
+}
+
+.over-the-last {
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.select-operation-column {
+  display: inline-flex;
+  justify-content: flex-end;
+}
+
+.select-operation-input {
+  font-size: 14px;
+  width: 218px;
+}
diff --git a/packages/jaeger-ui/src/components/Monitoring/ServicesView/index.test.js b/packages/jaeger-ui/src/components/Monitoring/ServicesView/index.test.js
index dd33ecb446..1811b8dd42 100644
--- a/packages/jaeger-ui/src/components/Monitoring/ServicesView/index.test.js
+++ b/packages/jaeger-ui/src/components/Monitoring/ServicesView/index.test.js
@@ -18,6 +18,7 @@ import {
   MonitoringATMServicesViewImpl as MonitoringATMServicesView,
   mapStateToProps,
   mapDispatchToProps,
+  getLoopbackInterval,
 } from '.';
 import LoadingIndicator from '../../common/LoadingIndicator';
 import MonitoringATMEmptyState from '../EmptyState';
@@ -74,6 +75,7 @@ describe('<MonitoringATMServicesView>', () => {
     expect(mockFetchAggregatedServiceMetrics).not.toHaveBeenCalled();
     wrapper.setProps({
       services: ['s1', 's2'],
+      selectedService: 's1',
       metrics: {
         ...originInitialState,
         serviceMetrics,
@@ -160,3 +162,17 @@ describe('mapDispatchToProps()', () => {
     });
   });
 });
+
+describe('getLoopbackInterval()', () => {
+  it('undefined value', () => {
+    expect(getLoopbackInterval()).toBe('');
+  });
+
+  it('timeframe NOT exists', () => {
+    expect(getLoopbackInterval(111)).toBe('');
+  });
+
+  it('timeframe exists', () => {
+    expect(getLoopbackInterval(48 * 3600000)).toBe('last 2 days');
+  });
+});
diff --git a/packages/jaeger-ui/src/components/Monitoring/ServicesView/index.tsx b/packages/jaeger-ui/src/components/Monitoring/ServicesView/index.tsx
index 9d379d4ae4..a6c76a3554 100644
--- a/packages/jaeger-ui/src/components/Monitoring/ServicesView/index.tsx
+++ b/packages/jaeger-ui/src/components/Monitoring/ServicesView/index.tsx
@@ -62,6 +62,26 @@ const AdaptedVirtualSelect = reduxFormFieldAdapter({
 });
 
 const serviceFormSelector = formValueSelector('serviceForm');
+const oneHourInMilliSeconds = 3600000;
+const timeFrameOptions = [
+  { label: 'Last Hour', value: oneHourInMilliSeconds },
+  { label: 'Last 2 hour', value: 2 * oneHourInMilliSeconds },
+  { label: 'Last 6 hour', value: 6 * oneHourInMilliSeconds },
+  { label: 'Last 12 hour', value: 12 * oneHourInMilliSeconds },
+  { label: 'Last 24 hours', value: 24 * oneHourInMilliSeconds },
+  { label: 'Last 2 days', value: 48 * oneHourInMilliSeconds },
+];
+
+// export for tests
+export const getLoopbackInterval = (interval: number) => {
+  if (!interval) return '';
+
+  const timeFrameObj = timeFrameOptions.find(t => t.value === interval);
+
+  if (timeFrameObj === undefined) return '';
+
+  return timeFrameObj.label.toLowerCase();
+};
 
 // export for tests
 export class MonitoringATMServicesViewImpl extends React.PureComponent<TProps, StateType> {
@@ -88,15 +108,11 @@ export class MonitoringATMServicesViewImpl extends React.PureComponent<TProps, S
   }
 
   componentDidUpdate(nextProps: TProps) {
-    const { selectedService, selectedTimeFrame, services } = this.props;
+    const { selectedService, selectedTimeFrame } = this.props;
 
     if (nextProps.selectedService !== selectedService || nextProps.selectedTimeFrame !== selectedTimeFrame) {
       this.fetchMetrics();
     }
-
-    if (nextProps.services !== services) {
-      this.fetchMetrics();
-    }
   }
 
   componentWillUnmount() {
@@ -160,9 +176,6 @@ export class MonitoringATMServicesViewImpl extends React.PureComponent<TProps, S
       return <MonitoringATMEmptyState configureStatus={false} sendDataStatus={false} />;
     }
 
-    const timeframeInHours = selectedTimeFrame / 3600000;
-    const timePeriod = timeframeInHours <= 1 ? '' : timeframeInHours.toFixed(0);
-
     this.isReady = true;
 
     return (
@@ -175,7 +188,7 @@ export class MonitoringATMServicesViewImpl extends React.PureComponent<TProps, S
               component={AdaptedVirtualSelect}
               placeholder="Select A Service"
               props={{
-                style: { fontSize: 14, width: '100%' },
+                className: 'select-a-service-input',
                 value: this.getSelectedService(),
                 disabled: metrics.operationMetricsLoading,
                 clearable: false,
@@ -188,7 +201,8 @@ export class MonitoringATMServicesViewImpl extends React.PureComponent<TProps, S
         <Row>
           <Col span={16}>
             <p className="operations-metrics-text">
-              Aggregation of all &quot;{this.getSelectedService()}&quot; metrics in selected timeframe.{' '}
+              95th percentile aggregation of all &quot;{this.getSelectedService()}&quot; metrics in selected
+              timeframe.{' '}
               <a
                 href={`/search?end=${Date.now()}000&limit=20&lookback=${selectedTimeFrame /
                   (3600 *
@@ -206,19 +220,12 @@ export class MonitoringATMServicesViewImpl extends React.PureComponent<TProps, S
               component={AdaptedVirtualSelect}
               placeholder="Select A Timeframe"
               props={{
-                style: { fontSize: 14, width: 128 },
-                defaultValue: { label: 'Last Hour', value: 3600000 },
+                className: 'select-a-timeframe-input',
+                defaultValue: timeFrameOptions[0],
                 value: selectedTimeFrame,
                 disabled: metrics.operationMetricsLoading,
                 clearable: false,
-                options: [
-                  { label: 'Last Hour', value: 3600000 },
-                  { label: 'Last 2 hour', value: 2 * 3600000 },
-                  { label: 'Last 6 hour', value: 6 * 3600000 },
-                  { label: 'Last 12 hour', value: 12 * 3600000 },
-                  { label: 'Last 24 hours', value: 24 * 3600000 },
-                  { label: 'Last 2 days', value: 48 * 3600000 },
-                ],
+                options: timeFrameOptions,
                 required: true,
               }}
             />
@@ -235,7 +242,7 @@ export class MonitoringATMServicesViewImpl extends React.PureComponent<TProps, S
                 metrics.serviceError.service_latencies_95
               }
               loading={metrics.loading === true}
-              name="Latency"
+              name="Latency, ms"
               width={this.state.graphWidth}
               metricsData={metrics.serviceMetrics!.service_latencies}
               showLegend
@@ -248,7 +255,7 @@ export class MonitoringATMServicesViewImpl extends React.PureComponent<TProps, S
               key="errRate"
               error={metrics.serviceError.service_error_rate}
               loading={metrics.loading === true}
-              name="Error rate %"
+              name="Error rate, %"
               width={this.state.graphWidth}
               metricsData={metrics.serviceMetrics!.service_error_rate}
               marginClassName="error-rate-margins"
@@ -261,7 +268,7 @@ export class MonitoringATMServicesViewImpl extends React.PureComponent<TProps, S
               key="requests"
               loading={metrics.loading === true}
               error={metrics.serviceError.service_call_rate}
-              name="Requests"
+              name="Requests rate, req/s"
               width={this.state.graphWidth}
               metricsData={metrics.serviceMetrics!.service_call_rate}
               showHorizontalLines
@@ -273,20 +280,15 @@ export class MonitoringATMServicesViewImpl extends React.PureComponent<TProps, S
         <Row className="operation-table-block">
           <Row>
             <Col span={16}>
-              <h2 className="table-header">Operations under {this.getSelectedService()}</h2>{' '}
-              <span
-                style={{
-                  fontSize: 14,
-                  fontWeight: 400,
-                }}
-              >
-                Over the last {timePeriod} hour{timePeriod === '' ? '' : 's'}
-              </span>
+              <h2 className="table-header">
+                95th percentile operations metrics under {this.getSelectedService()}
+              </h2>{' '}
+              <span className="over-the-last">Over the {getLoopbackInterval(selectedTimeFrame)}</span>
             </Col>
-            <Col span={8} style={{ display: 'inline-flex', justifyContent: 'flex-end' }}>
+            <Col span={8} className="select-operation-column">
               <Search
                 placeholder="Search operation"
-                style={{ fontSize: 14, width: 218 }}
+                className="select-operation-input"
                 value={this.state.searchOps}
                 disabled={metrics.operationMetricsLoading === true}
                 onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
@@ -330,7 +332,7 @@ export function mapStateToProps(state: ReduxState): TReduxProps {
     metrics,
     selectedService: serviceFormSelector(state, 'service') || store.get('lastAtmSearchService'),
     selectedTimeFrame:
-      serviceFormSelector(state, 'timeframe') || store.get('lastAtmSearchTimeframe') || 3600000,
+      serviceFormSelector(state, 'timeframe') || store.get('lastAtmSearchTimeframe') || oneHourInMilliSeconds,
   };
 }
 
diff --git a/packages/jaeger-ui/src/components/Monitoring/ServicesView/operationDetailsTable/__snapshots__/index.test.js.snap b/packages/jaeger-ui/src/components/Monitoring/ServicesView/operationDetailsTable/__snapshots__/index.test.js.snap
index 607d193867..aa19d5f153 100644
--- a/packages/jaeger-ui/src/components/Monitoring/ServicesView/operationDetailsTable/__snapshots__/index.test.js.snap
+++ b/packages/jaeger-ui/src/components/Monitoring/ServicesView/operationDetailsTable/__snapshots__/index.test.js.snap
@@ -83,6 +83,7 @@ exports[`<OperationTableDetails> Table rendered successfully 1`] = `
                 autoAdjustOverflow={true}
                 mouseEnterDelay={0.1}
                 mouseLeaveDelay={0.1}
+                overlayClassName="impact-tooltip"
                 placement="top"
                 prefixCls="ant-tooltip"
                 title="The result of multiplying avg. duration and requests per minute, showing the most used and slowest endpoints"
diff --git a/packages/jaeger-ui/src/components/Monitoring/ServicesView/operationDetailsTable/index.css b/packages/jaeger-ui/src/components/Monitoring/ServicesView/operationDetailsTable/index.css
index e62bf535fe..574f19d95d 100644
--- a/packages/jaeger-ui/src/components/Monitoring/ServicesView/operationDetailsTable/index.css
+++ b/packages/jaeger-ui/src/components/Monitoring/ServicesView/operationDetailsTable/index.css
@@ -75,6 +75,10 @@ td.header-item {
   display: flex;
 }
 
+.impact-tooltip .ant-tooltip-inner {
+  word-break: keep-all;
+}
+
 .view-trace-button {
   width: 200px;
   height: 30px;
diff --git a/packages/jaeger-ui/src/components/Monitoring/ServicesView/operationDetailsTable/index.tsx b/packages/jaeger-ui/src/components/Monitoring/ServicesView/operationDetailsTable/index.tsx
index 2c2d99006c..b325a5312c 100644
--- a/packages/jaeger-ui/src/components/Monitoring/ServicesView/operationDetailsTable/index.tsx
+++ b/packages/jaeger-ui/src/components/Monitoring/ServicesView/operationDetailsTable/index.tsx
@@ -127,6 +127,7 @@ export class OperationTableDetails extends React.PureComponent<TProps, TState> {
             <span style={{ float: 'left', color: '#459798' }}>
               Impact &nbsp;
               <Tooltip
+                overlayClassName="impact-tooltip"
                 placement="top"
                 title="The result of multiplying avg. duration and requests per minute, showing the most used and slowest endpoints"
               >
diff --git a/packages/jaeger-ui/src/components/Monitoring/ServicesView/serviceGraph.tsx b/packages/jaeger-ui/src/components/Monitoring/ServicesView/serviceGraph.tsx
index 8f8de53d04..5ec386c294 100644
--- a/packages/jaeger-ui/src/components/Monitoring/ServicesView/serviceGraph.tsx
+++ b/packages/jaeger-ui/src/components/Monitoring/ServicesView/serviceGraph.tsx
@@ -62,7 +62,7 @@ export const tickFormat = (v: number) => {
 export class ServiceGraphImpl extends React.PureComponent<TProps> {
   height = 242;
   colors: string[] = ['#DCA3D2', '#EA9977', '#869ADD'];
-  state = {
+  state: { crosshairValues: TCrossHairValues[] } = {
     crosshairValues: [],
   };
 
@@ -165,7 +165,11 @@ export class ServiceGraphImpl extends React.PureComponent<TProps> {
         <YAxis />
         {this.renderLines()}
         <Crosshair values={this.state.crosshairValues}>
-          <div style={{ width: 70 }}>
+          <div style={{ width: 140 }}>
+            {this.state.crosshairValues[0] &&
+              `${new Date(this.state.crosshairValues[0].x).toLocaleDateString()} ${new Date(
+                this.state.crosshairValues[0].x
+              ).toLocaleTimeString()}`}
             {this.state.crosshairValues.map((d: TCrossHairValues) =>
               showLegend ? (
                 <div key={d.label}>
@@ -181,10 +185,12 @@ export class ServiceGraphImpl extends React.PureComponent<TProps> {
           <DiscreteColorLegend
             className="legend-label"
             orientation="horizontal"
-            items={this.getData().map((d: ServiceMetricsObject, idx: number) => ({
-              color: this.colors[idx],
-              title: `${d.quantile * 100}th`,
-            }))}
+            items={this.getData()
+              .map((d: ServiceMetricsObject, idx: number) => ({
+                color: this.colors[idx],
+                title: `${d.quantile * 100}th`,
+              }))
+              .reverse()}
           />
         ) : null}
       </XYPlot>