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 e4e6b9516474b..8db99a89c0bae 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,8 +11,9 @@ import {
   EuiCardProps,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiText,
   EuiSpacer,
+  EuiText,
+  useIsWithinBreakpoints,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
@@ -35,9 +36,11 @@ export function ServiceGroupsCard({
   href,
   serviceGroupCounts,
 }: Props) {
+  const isMobile = useIsWithinBreakpoints(['xs', 's']);
+
   const activeAlertsHref = useObservabilityActiveAlertsHref(serviceGroup.kuery);
   const cardProps: EuiCardProps = {
-    style: { width: 286 },
+    style: { width: isMobile ? '100%' : 286 },
     icon: (
       <>
         {serviceGroupCounts?.alerts && (
@@ -104,7 +107,7 @@ export function ServiceGroupsCard({
   };
 
   return (
-    <EuiFlexItem key={serviceGroup.groupName}>
+    <EuiFlexItem key={serviceGroup.groupName} grow={false}>
       <EuiCard
         layout="vertical"
         {...cardProps}
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 51822a644dba5..2975e2795c261 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,14 +4,14 @@
  * 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 { APIReturnType } from '../../../../services/rest/create_call_apm_api';
+import { ServiceGroupsCard } from './service_group_card';
 
 interface Props {
   items: SavedServiceGroup[];
@@ -26,7 +26,7 @@ export function ServiceGroupsListItems({ items, serviceGroupCounts }: Props) {
   const environment = useDefaultEnvironment();
 
   return (
-    <EuiFlexGrid gutterSize="m">
+    <EuiFlexGroup gutterSize="m" wrap>
       {items.map((item) => (
         <ServiceGroupsCard
           key={item.id}
@@ -42,6 +42,6 @@ export function ServiceGroupsListItems({ items, serviceGroupCounts }: Props) {
           })}
         />
       ))}
-    </EuiFlexGrid>
+    </EuiFlexGroup>
   );
 }