diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/intance_details.tsx b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/intance_details.tsx
index 27653570e3cf2..957faaca464c0 100644
--- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/intance_details.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/intance_details.tsx
@@ -5,12 +5,12 @@
  * 2.0.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiLoadingContent } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { isEmpty } from 'lodash';
 import { useHistory } from 'react-router-dom';
-import styled from 'styled-components';
+import { pct } from '../../../../style/variables';
 import { useApmServiceContext } from '../../../../context/apm_service/use_apm_service_context';
 import { useUrlParams } from '../../../../context/url_params_context/use_url_params';
 import { FETCH_STATUS, useFetcher } from '../../../../hooks/use_fetcher';
@@ -28,10 +28,6 @@ interface Props {
   serviceNodeName: string;
 }
 
-const StyledEuiLoadingSpinner = styled(EuiLoadingSpinner)`
-  margin-left: 50%;
-`;
-
 export function InstanceDetails({ serviceName, serviceNodeName }: Props) {
   const theme = useTheme();
   const history = useHistory();
@@ -72,7 +68,11 @@ export function InstanceDetails({ serviceName, serviceNodeName }: Props) {
     status === FETCH_STATUS.LOADING ||
     status === FETCH_STATUS.NOT_INITIATED
   ) {
-    return <StyledEuiLoadingSpinner />;
+    return (
+      <div style={{ width: pct(50) }}>
+        <EuiLoadingContent />
+      </div>
+    );
   }
 
   if (!data) {