diff --git a/packages/ui/src/recipes/CardsWithListBox.stories.tsx b/packages/ui/src/recipes/CardsWithListBox.stories.tsx
index 18d116f9e5..316159211a 100644
--- a/packages/ui/src/recipes/CardsWithListBox.stories.tsx
+++ b/packages/ui/src/recipes/CardsWithListBox.stories.tsx
@@ -142,18 +142,20 @@ interface ServiceListCardProps {
   title: string;
   items: ServiceItem[];
   description?: boolean;
+  icons?: boolean;
 }
 
 const ServiceListCard = ({
   title,
   items,
   description = false,
+  icons = true,
 }: ServiceListCardProps) => (
   <Card>
     <CardHeader>
       <Flex direction="row" align="center" justify="between" gap="2">
         <Flex direction="column" gap="1">
-          <Text variant="body-medium" weight="bold">
+          <Text variant="body-large" weight="bold">
             {title}
           </Text>
         </Flex>
@@ -165,7 +167,7 @@ const ServiceListCard = ({
           <ListBoxItem
             key={item.id}
             id={item.id}
-            icon={item.icon}
+            icon={icons ? item.icon : undefined}
             description={description ? item.description : undefined}
             menuItems={
               <>
@@ -217,6 +219,32 @@ export const Default = meta.story({
   ),
 });
 
+export const WithNoIcons = meta.story({
+  decorators: [withRouter],
+  args: {
+    icons: false,
+    description: true,
+  },
+  render: args => (
+    <Container pt="6">
+      <Grid.Root columns="2" gap="4">
+        <ServiceListCard
+          title="Frontend services"
+          items={frontendServices}
+          description={args.description}
+          icons={args.icons}
+        />
+        <ServiceListCard
+          title="Backend services"
+          items={backendServices}
+          description={args.description}
+          icons={args.icons}
+        />
+      </Grid.Root>
+    </Container>
+  ),
+});
+
 export const WithDescription = meta.story({
   args: {
     description: true,