diff --git a/x-pack/plugins/apm/public/components/app/service_groups/service_groups_list/service_group_card.tsx b/x-pack/plugins/apm/public/components/app/service_groups/service_groups_list/service_group_card.tsx
index bc8a424c922b9..dbe6a9185dc96 100644
--- a/x-pack/plugins/apm/public/components/app/service_groups/service_groups_list/service_group_card.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_groups/service_groups_list/service_group_card.tsx
@@ -11,6 +11,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiText,
+  useIsWithinBreakpoints,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
@@ -34,8 +35,10 @@ export function ServiceGroupsCard({
   href,
   servicesCount,
 }: Props) {
+  const isMobile = useIsWithinBreakpoints(['xs', 's']);
+
   const cardProps: EuiCardProps = {
-    style: { width: 286 },
+    style: { width: isMobile ? '100%' : 286 },
     icon: (
       <EuiAvatar
         name={serviceGroup.groupName}
@@ -80,8 +83,12 @@ export function ServiceGroupsCard({
   };
 
   return (
-    <EuiFlexItem key={serviceGroup.groupName}>
-      <EuiCard layout="vertical" {...cardProps} />
+    <EuiFlexItem key={serviceGroup.groupName} grow={false}>
+      <EuiCard
+        layout="vertical"
+        {...cardProps}
+        data-test-subj="serviceGroupCard"
+      />
     </EuiFlexItem>
   );
 }
diff --git a/x-pack/plugins/apm/public/components/app/service_groups/service_groups_list/service_groups_list.tsx b/x-pack/plugins/apm/public/components/app/service_groups/service_groups_list/service_groups_list.tsx
index 64935927b9363..f274e59bbd898 100644
--- a/x-pack/plugins/apm/public/components/app/service_groups/service_groups_list/service_groups_list.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_groups/service_groups_list/service_groups_list.tsx
@@ -4,13 +4,13 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import { EuiFlexGrid } from '@elastic/eui';
+import { EuiFlexGroup } from '@elastic/eui';
 import React from 'react';
 import { SavedServiceGroup } from '../../../../../common/service_groups';
-import { ServiceGroupsCard } from './service_group_card';
-import { useApmRouter } from '../../../../hooks/use_apm_router';
 import { useApmParams } from '../../../../hooks/use_apm_params';
+import { useApmRouter } from '../../../../hooks/use_apm_router';
 import { useDefaultEnvironment } from '../../../../hooks/use_default_environment';
+import { ServiceGroupsCard } from './service_group_card';
 
 interface Props {
   items: SavedServiceGroup[];
@@ -25,7 +25,7 @@ export function ServiceGroupsListItems({ items, servicesCounts }: Props) {
   const environment = useDefaultEnvironment();
 
   return (
-    <EuiFlexGrid gutterSize="m">
+    <EuiFlexGroup gutterSize="m" wrap>
       {items.map((item) => (
         <ServiceGroupsCard
           serviceGroup={item}
@@ -40,6 +40,6 @@ export function ServiceGroupsListItems({ items, servicesCounts }: Props) {
           })}
         />
       ))}
-    </EuiFlexGrid>
+    </EuiFlexGroup>
   );
 }