diff --git a/src/components/AvatarMeetingsListItem/AvatarMeetingsListItem.tsx b/src/components/AvatarMeetingsListItem/AvatarMeetingsListItem.tsx
index aeed696d4..7c23f6b8f 100644
--- a/src/components/AvatarMeetingsListItem/AvatarMeetingsListItem.tsx
+++ b/src/components/AvatarMeetingsListItem/AvatarMeetingsListItem.tsx
@@ -47,16 +47,30 @@ const AvatarMeetingsListItem: FC<Props> = (props: Props) => {
     switch (schedulerState) {
       case SCHEDULER_STATES.available:
         return (
-          <Icon name="scheduler-available" fillColor="var(--mds-color-theme-text-success-normal)" {...iconProps} />
+          <Icon
+            name="scheduler-available"
+            fillColor="var(--mds-color-theme-text-success-normal)"
+            {...iconProps}
+          />
         );
 
       case SCHEDULER_STATES.unavailable:
         return (
-          <Icon name="scheduler-unavailable" fillColor="var(--mds-color-theme-text-warning-normal)" {...iconProps} />
+          <Icon
+            name="scheduler-unavailable"
+            fillColor="var(--mds-color-theme-text-warning-normal)"
+            {...iconProps}
+          />
         );
 
       case SCHEDULER_STATES.unknown:
-        return <Icon name="scheduler-unknown" fillColor="var(--mds-color-theme-text-error-normal)" {...iconProps} />;
+        return (
+          <Icon
+            name="scheduler-unknown"
+            fillColor="var(--mds-color-theme-text-error-normal)"
+            {...iconProps}
+          />
+        );
 
       case SCHEDULER_STATES.quietHours:
         return (
diff --git a/src/components/Icon/Icon.unit.test.tsx b/src/components/Icon/Icon.unit.test.tsx
index 6e526509c..84bc4da35 100644
--- a/src/components/Icon/Icon.unit.test.tsx
+++ b/src/components/Icon/Icon.unit.test.tsx
@@ -62,7 +62,9 @@ describe('<Icon />', () => {
 
       const ariaLabel = 'This participant is muted';
 
-      container = await mountAndWait(<Icon name="draft-indicator" weight="bold" ariaLabel={ariaLabel} />);
+      container = await mountAndWait(
+        <Icon name="draft-indicator" weight="bold" ariaLabel={ariaLabel} />
+      );
 
       expect(container).toMatchSnapshot();
     });
@@ -72,7 +74,9 @@ describe('<Icon />', () => {
 
       const ariaLabel = 'This participant is muted';
 
-      container = await mountAndWait(<Icon name="draft-indicator" weight="bold" aria-label={ariaLabel} />);
+      container = await mountAndWait(
+        <Icon name="draft-indicator" weight="bold" aria-label={ariaLabel} />
+      );
 
       expect(container).toMatchSnapshot();
     });
@@ -205,7 +209,9 @@ describe('<Icon />', () => {
 
       const title = 'You have a draft message';
 
-      const wrapper = await mountAndWait(<Icon name="draft-indicator" weight="bold" title={title} />);
+      const wrapper = await mountAndWait(
+        <Icon name="draft-indicator" weight="bold" title={title} />
+      );
       const element = wrapper.find(Icon).getDOMNode();
 
       expect(element.getAttribute('title')).toBe(title);
diff --git a/src/components/Icon/Icon.utils.test.ts b/src/components/Icon/Icon.utils.test.ts
index e3bb5033a..e709d95dd 100644
--- a/src/components/Icon/Icon.utils.test.ts
+++ b/src/components/Icon/Icon.utils.test.ts
@@ -15,6 +15,8 @@ describe('getResolvedSVGName', () => {
     ['icon-name', 'thin', true, 'icon-name'],
     ['icon-name', 'filled', true, 'icon-name'],
   ])('returns the correct name for %s, %s, %s', (name, weight, weightless, expected) => {
-    expect(getResolvedSVGName(name as InferredIconName, weight as IconWeight, weightless)).toEqual(expected);
+    expect(getResolvedSVGName(name as InferredIconName, weight as IconWeight, weightless)).toEqual(
+      expected
+    );
   });
 });
diff --git a/src/components/Icon/Icon.utils.ts b/src/components/Icon/Icon.utils.ts
index 878b989f5..769e58860 100644
--- a/src/components/Icon/Icon.utils.ts
+++ b/src/components/Icon/Icon.utils.ts
@@ -8,5 +8,8 @@ import { DEFAULTS } from './Icon.constants';
  * @param weightless - marks that this icon doesn't have a weight
  * @returns - resolved name of the icon
  */
-export const getResolvedSVGName = (name: InferredIconName, weight: IconWeight, weightless: boolean): string =>
-  weightless ? `${String(name)}` : `${String(name)}-${weight || DEFAULTS.WEIGHT}`;
+export const getResolvedSVGName = (
+  name: InferredIconName,
+  weight: IconWeight,
+  weightless: boolean
+): string => (weightless ? `${String(name)}` : `${String(name)}-${weight || DEFAULTS.WEIGHT}`);
diff --git a/src/components/MeetingListItem/MeetingListItem.tsx b/src/components/MeetingListItem/MeetingListItem.tsx
index 9d15d90e6..8ca517fe6 100644
--- a/src/components/MeetingListItem/MeetingListItem.tsx
+++ b/src/components/MeetingListItem/MeetingListItem.tsx
@@ -1,9 +1,4 @@
-import React, {
-  FC,
-  forwardRef,
-  useRef,
-  RefObject,
-} from 'react';
+import React, { FC, forwardRef, useRef, RefObject } from 'react';
 import classnames from 'classnames';
 
 import { STYLE, DEFAULTS } from './MeetingListItem.constants';
@@ -40,7 +35,12 @@ const MeetingListItem: FC<Props> = forwardRef(
         size={large ? 70 : 50}
         {...rest}
       >
-        <MeetingRowContent color={color} isDisabled={isDisabled} buttonGroup={buttonGroup} image={image}>
+        <MeetingRowContent
+          color={color}
+          isDisabled={isDisabled}
+          buttonGroup={buttonGroup}
+          image={image}
+        >
           {children}
         </MeetingRowContent>
       </ListItemBase>
diff --git a/src/components/MeetingRowContent/MeetingRowContent.stories.args.ts b/src/components/MeetingRowContent/MeetingRowContent.stories.args.ts
index 59f0df02d..f703e8911 100644
--- a/src/components/MeetingRowContent/MeetingRowContent.stories.args.ts
+++ b/src/components/MeetingRowContent/MeetingRowContent.stories.args.ts
@@ -5,11 +5,11 @@ export default {
   ...commonStyles,
   ...commonAriaPressProps,
   children: {
-    description: 'Provides the child nodes for this element.', 
+    description: 'Provides the child nodes for this element.',
     control: { type: 'none' },
     table: {
       type: {
-        summary: 'ReactNode', 
+        summary: 'ReactNode',
       },
       defaultValue: {
         summary: 'undefined',
diff --git a/src/components/MeetingRowContent/MeetingRowContent.stories.tsx b/src/components/MeetingRowContent/MeetingRowContent.stories.tsx
index ea1cb88eb..b585b0c68 100644
--- a/src/components/MeetingRowContent/MeetingRowContent.stories.tsx
+++ b/src/components/MeetingRowContent/MeetingRowContent.stories.tsx
@@ -1,5 +1,9 @@
 import React from 'react';
-import { MultiTemplate, MultiTemplateWithLabel, Template } from '../../storybook/helper.stories.templates';
+import {
+  MultiTemplate,
+  MultiTemplateWithLabel,
+  Template,
+} from '../../storybook/helper.stories.templates';
 import { DocumentationPage } from '../../storybook/helper.stories.docs';
 import StyleDocs from '../../storybook/docs.stories.style.mdx';
 
@@ -26,8 +30,11 @@ export default {
   },
 };
 
-const Example = Template<MeetingRowContentProps>((args: MeetingRowContentProps) => <div style={{position:'relative'}} ><MeetingRowContent {...args} /></div>
-).bind({});
+const Example = Template<MeetingRowContentProps>((args: MeetingRowContentProps) => (
+  <div style={{ position: 'relative' }}>
+    <MeetingRowContent {...args} />
+  </div>
+)).bind({});
 
 Example.argTypes = { ...argTypes };
 
@@ -61,8 +68,11 @@ Example.args = {
 /**
  * Common variants story. This renders multiple variants of a single component.
  */
-const Common = MultiTemplateWithLabel<MeetingRowContentProps>((args: MeetingRowContentProps) => <div style={{position:'relative'}} ><MeetingRowContent {...args} /></div>
-).bind({});
+const Common = MultiTemplateWithLabel<MeetingRowContentProps>((args: MeetingRowContentProps) => (
+  <div style={{ position: 'relative' }}>
+    <MeetingRowContent {...args} />
+  </div>
+)).bind({});
 
 Common.argTypes = { ...argTypes };
 delete Common.argTypes.children;
@@ -257,8 +267,11 @@ Common.parameters = {
 };
 
 const Colors = MultiTemplate<MeetingRowContentProps>((args: MeetingRowContentProps) => {
-
-  return <div style={{position:'relative'}} ><MeetingRowContent {...args} /></div>;
+  return (
+    <div style={{ position: 'relative' }}>
+      <MeetingRowContent {...args} />
+    </div>
+  );
 }).bind({});
 
 Colors.argTypes = { ...argTypes };
diff --git a/src/components/MeetingRowContent/MeetingRowContent.style.scss b/src/components/MeetingRowContent/MeetingRowContent.style.scss
index 2c5d1a68c..3ee1cf4d8 100644
--- a/src/components/MeetingRowContent/MeetingRowContent.style.scss
+++ b/src/components/MeetingRowContent/MeetingRowContent.style.scss
@@ -1,88 +1,88 @@
 .md-meeting-row-content-start-section {
-    display: flex;
-    align-items: center;
+  display: flex;
+  align-items: center;
 
-    &.md-meeting-row-content-start-section-no-image {
-      margin-right: 0 !important;
-    }
+  &.md-meeting-row-content-start-section-no-image {
+    margin-right: 0 !important;
+  }
 
-    .md-meeting-row-content-border {
-      position: absolute;
-      left: 0;
-      top: 0;
-      height: 100%;
-      width: 0.3rem;
-      border-radius: 0.5rem 0 0 0.5rem;
-      margin-right: 0.5rem;
+  .md-meeting-row-content-border {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 0.3rem;
+    border-radius: 0.5rem 0 0 0.5rem;
+    margin-right: 0.5rem;
 
-      &[data-color='AcceptedActive'] {
-        background-color: var(--mds-color-theme-button-join-normal);
-      }
+    &[data-color='AcceptedActive'] {
+      background-color: var(--mds-color-theme-button-join-normal);
+    }
 
-      &[data-color='AcceptedInactive'] {
-        background-color: var(--mds-color-theme-background-secondary-active);
-      }
+    &[data-color='AcceptedInactive'] {
+      background-color: var(--mds-color-theme-background-secondary-active);
+    }
 
-      &[data-color='TentativeActive'] {
-        background: webkit-repeating-linear-gradient(
-          -45deg,
-          transparent,
-          transparent 7%,
-          var(--mds-color-theme-button-join-normal) 7%,
-          var(--mds-color-theme-button-join-normal) 14%
-        );
-        background: -o-repeating-linear-gradient(
-          -45deg,
-          transparent,
-          transparent 7%,
-          var(--mds-color-theme-button-join-normal) 7%,
-          var(--mds-color-theme-button-join-normal) 14%
-        );
-        background: repeating-linear-gradient(
-          -45deg,
-          transparent,
-          transparent 7%,
-          var(--mds-color-theme-button-join-normal) 7%,
-          var(--mds-color-theme-button-join-normal) 14%
-        );
-      }
+    &[data-color='TentativeActive'] {
+      background: webkit-repeating-linear-gradient(
+        -45deg,
+        transparent,
+        transparent 7%,
+        var(--mds-color-theme-button-join-normal) 7%,
+        var(--mds-color-theme-button-join-normal) 14%
+      );
+      background: -o-repeating-linear-gradient(
+        -45deg,
+        transparent,
+        transparent 7%,
+        var(--mds-color-theme-button-join-normal) 7%,
+        var(--mds-color-theme-button-join-normal) 14%
+      );
+      background: repeating-linear-gradient(
+        -45deg,
+        transparent,
+        transparent 7%,
+        var(--mds-color-theme-button-join-normal) 7%,
+        var(--mds-color-theme-button-join-normal) 14%
+      );
+    }
 
-      &[data-color='TentativeInactive'] {
-        background: webkit-repeating-linear-gradient(
-          -45deg,
-          transparent,
-          transparent 7%,
-          var(--mds-color-theme-background-secondary-active) 7%,
-          var(--mds-color-theme-background-secondary-active) 14%
-        );
-        background: -o-repeating-linear-gradient(
-          -45deg,
-          transparent,
-          transparent 7%,
-          var(--mds-color-theme-background-secondary-active) 7%,
-          var(--mds-color-theme-background-secondary-active) 14%
-        );
-        background: repeating-linear-gradient(
-          -45deg,
-          transparent,
-          transparent 7%,
-          var(--mds-color-theme-background-secondary-active) 7%,
-          var(--mds-color-theme-background-secondary-active) 14%
-        );
-      }
-    }   
+    &[data-color='TentativeInactive'] {
+      background: webkit-repeating-linear-gradient(
+        -45deg,
+        transparent,
+        transparent 7%,
+        var(--mds-color-theme-background-secondary-active) 7%,
+        var(--mds-color-theme-background-secondary-active) 14%
+      );
+      background: -o-repeating-linear-gradient(
+        -45deg,
+        transparent,
+        transparent 7%,
+        var(--mds-color-theme-background-secondary-active) 7%,
+        var(--mds-color-theme-background-secondary-active) 14%
+      );
+      background: repeating-linear-gradient(
+        -45deg,
+        transparent,
+        transparent 7%,
+        var(--mds-color-theme-background-secondary-active) 7%,
+        var(--mds-color-theme-background-secondary-active) 14%
+      );
+    }
+  }
 }
 
 .md-meeting-row-content-middle-section {
-    .md-text-wrapper:first-of-type {
-        margin-bottom: -0.25rem;
-    }
+  .md-text-wrapper:first-of-type {
+    margin-bottom: -0.25rem;
+  }
 }
 
 .md-meeting-row-content-end-section {
-    .md-button-group-wrapper > .md-icon-wrapper > svg {
-        path {
-        fill: var(--mds-color-theme-text-secondary-normal);
-        }
+  .md-button-group-wrapper > .md-icon-wrapper > svg {
+    path {
+      fill: var(--mds-color-theme-text-secondary-normal);
     }
-}
\ No newline at end of file
+  }
+}
diff --git a/src/components/MeetingRowContent/MeetingRowContent.unit.test.tsx b/src/components/MeetingRowContent/MeetingRowContent.unit.test.tsx
index 7128b34d0..2d6f2bbd0 100644
--- a/src/components/MeetingRowContent/MeetingRowContent.unit.test.tsx
+++ b/src/components/MeetingRowContent/MeetingRowContent.unit.test.tsx
@@ -31,16 +31,15 @@ describe('<MeetingRowContent />', () => {
       expect(container).toMatchSnapshot();
     });
 
-
     it('should match snapshot with buttonGroup', () => {
       expect.assertions(1);
 
       const buttonGroup = (
         <ButtonGroup spaced>
           <ButtonHyperlink key="link">Link</ButtonHyperlink>
-            <div key="participants-list" style={{ paddingRight: 0 }}>
-              17
-            </div>
+          <div key="participants-list" style={{ paddingRight: 0 }}>
+            17
+          </div>
           <Icon key="participants-icon" name="participant-list" scale={16} />
           <ButtonPill key="join-button" color="join">
             Join
@@ -68,23 +67,24 @@ describe('<MeetingRowContent />', () => {
     it('should have border color classname', () => {
       expect.assertions(1);
 
-      const element = mount(<MeetingRowContent color={MeetingMarker.TentativeActive}/>);
+      const element = mount(<MeetingRowContent color={MeetingMarker.TentativeActive} />);
 
-      const borderDiv =  element.find('.md-meeting-row-content-middle-section').at(1).getDOMNode();
+      const borderDiv = element.find('.md-meeting-row-content-middle-section').at(1).getDOMNode();
 
-      expect(borderDiv.classList.contains('md-meeting-row-content-middle-section-TentativeActive')).toBe(true);
+      expect(
+        borderDiv.classList.contains('md-meeting-row-content-middle-section-TentativeActive')
+      ).toBe(true);
     });
 
     it('should render children as expected', () => {
       expect.assertions(1);
 
-      const container = mount(
-        <MeetingRowContent>
-          Test Children
-        </MeetingRowContent>
-      );
+      const container = mount(<MeetingRowContent>Test Children</MeetingRowContent>);
 
-      const middleSection = container.find('.md-meeting-row-content-middle-section').first().getDOMNode();
+      const middleSection = container
+        .find('.md-meeting-row-content-middle-section')
+        .first()
+        .getDOMNode();
 
       expect(middleSection.textContent).toBe('Test Children');
     });
@@ -123,7 +123,7 @@ describe('<MeetingRowContent />', () => {
           buttonGroup={
             <ButtonGroup>
               <ButtonPill key="1" />
-              <ButtonCircle key="2"/>
+              <ButtonCircle key="2" />
               <Avatar key="4" />
             </ButtonGroup>
           }
@@ -135,9 +135,7 @@ describe('<MeetingRowContent />', () => {
       const avatar = container.find(Avatar).at(0).getDOMNode();
 
       expect(buttonPill.getAttribute('data-size')).toBe('28');
-      expect(buttonCircle.getAttribute('data-size')).toBe(
-        '32'
-      );
+      expect(buttonCircle.getAttribute('data-size')).toBe('32');
       expect(avatar.getAttribute('data-size')).toBe('32');
     });
   });
diff --git a/src/components/Menu/Menu.constants.ts b/src/components/Menu/Menu.constants.ts
index 9d9fa489f..f75bbd7fd 100644
--- a/src/components/Menu/Menu.constants.ts
+++ b/src/components/Menu/Menu.constants.ts
@@ -5,11 +5,13 @@ const CLASS_PREFIX = 'md-menu';
 
 const STYLE = {
   wrapper: `${CLASS_PREFIX}-wrapper`,
+  separator: `${CLASS_PREFIX}-separator`,
 };
 
 const DEFAULTS = {
   ITEM_SIZE: 40 as ListItemBaseSize,
   ITEM_SHAPE: 'rectangle' as const,
+  HAS_SEPARATORS: false,
   TICK_POSITION: 'right' as TickPosition,
 };
 
diff --git a/src/components/Menu/Menu.stories.args.ts b/src/components/Menu/Menu.stories.args.ts
index 81ac3b9fa..a0c476d17 100644
--- a/src/components/Menu/Menu.stories.args.ts
+++ b/src/components/Menu/Menu.stories.args.ts
@@ -136,6 +136,20 @@ export default {
       defaultValue: 'multiple',
     },
   },
+  hasSeparators: {
+    description:
+      'Wheather the menu should display separator lines between groups (sections/selectionGroups)',
+    default: false,
+    control: { type: 'boolean' },
+    table: {
+      type: {
+        summary: 'boolean',
+      },
+      defaultValue: {
+        summary: 'false',
+      },
+    },
+  },
   tickPosition: {
     defaultValue: DEFAULTS.TICK_POSITION,
     description: 'Position of the tick when selected, none when no tick',
diff --git a/src/components/Menu/Menu.stories.tsx b/src/components/Menu/Menu.stories.tsx
index 194e3eaa2..a25eecd21 100644
--- a/src/components/Menu/Menu.stories.tsx
+++ b/src/components/Menu/Menu.stories.tsx
@@ -12,7 +12,7 @@ import { action } from '@storybook/addon-actions';
 import Flex from '../Flex';
 import Avatar from '../Avatar';
 import { PresenceType } from '../Avatar/Avatar.types';
-import { ListHeader, ListItemBaseSection, Icon } from '..';
+import { Icon, Text } from '..';
 import './Menu.stories.style.scss';
 
 export default {
@@ -81,39 +81,19 @@ Sections.parameters = {
       itemSize: 32,
       onSelectionChange: menuOnSelectionChange,
       onAction: menuOnAction,
+      hasSeparators: true,
       children: [
-        <Section
-          key="0"
-          title={
-            <ListHeader outline={false}>
-              <ListItemBaseSection position="fill">Europe</ListItemBaseSection>
-            </ListHeader>
-          }
-        >
+        <Section key="0" title="Europe">
           <Item key="00">Spain</Item>
           <Item key="01">France</Item>
           <Item key="02">Italy</Item>
         </Section>,
-        <Section
-          key="1"
-          title={
-            <ListHeader outline={true} outlinePosition="top" outlineColor="secondary">
-              <ListItemBaseSection position="fill">Asia</ListItemBaseSection>
-            </ListHeader>
-          }
-        >
+        <Section key="1" title="Asia">
           <Item key="10">India</Item>
           <Item key="11">China</Item>
           <Item key="12">Japan</Item>
         </Section>,
-        <Section
-          key="2"
-          title={
-            <ListHeader outline={true} outlinePosition="top" outlineColor="secondary">
-              <ListItemBaseSection position="fill">America</ListItemBaseSection>
-            </ListHeader>
-          }
-        >
+        <Section key="2" title="America">
           <Item key="13">USA</Item>
           <Item key="14">Mexico</Item>
           <Item key="15">Canada</Item>
@@ -142,6 +122,7 @@ SelectionGroups.parameters = {
       tickPosition: 'left',
       onSelectionChange: menuOnSelectionChange,
       onAction: menuOnAction,
+      hasSeparators: 'true',
       children: [
         <SelectionGroup
           key="0"
@@ -154,14 +135,10 @@ SelectionGroups.parameters = {
             console.log('selectionOnAction1', rest);
           }}
           title={
-            <ListHeader outline={false}>
-              <ListItemBaseSection position="start">
-                <Icon scale={16} name="speaker" strokeColor="none" />
-              </ListItemBaseSection>
-              <ListItemBaseSection position="fill">
-                Speaker (you can choose many)
-              </ListItemBaseSection>
-            </ListHeader>
+            <Flex direction="row" alignItems="center" xgap="0.25rem">
+              <Icon scale={16} name="speaker" strokeColor="none" />
+              <Text>Speaker (you can choose many)</Text>
+            </Flex>
           }
         >
           <Item key="00">System default speaker</Item>
@@ -182,16 +159,10 @@ SelectionGroups.parameters = {
             console.log('selectionOnAction2', rest);
           }}
           title={
-            <>
-              <ListHeader outline={true} outlinePosition="top" outlineColor="secondary">
-                <ListItemBaseSection position="start">
-                  <Icon scale={16} name="microphone" strokeColor="none" />
-                </ListItemBaseSection>
-                <ListItemBaseSection position="fill">
-                  Microphone (you can choose one)
-                </ListItemBaseSection>
-              </ListHeader>
-            </>
+            <Flex direction="row" alignItems="center" xgap="0.25rem">
+              <Icon scale={16} name="microphone" strokeColor="none" />
+              <Text>Microphone (you can choose one)</Text>
+            </Flex>
           }
         >
           <Item key="10">No Microphone</Item>
@@ -218,16 +189,10 @@ SelectionGroups.parameters = {
             console.log('selectionOnAction3', rest);
           }}
           title={
-            <>
-              <ListHeader outline={true} outlinePosition="top" outlineColor="secondary">
-                <ListItemBaseSection position="start">
-                  <Icon scale={16} name="adjust-microphone" strokeColor="none" />
-                </ListItemBaseSection>
-                <ListItemBaseSection position="fill">
-                  Webex smart audio (You can choose one)
-                </ListItemBaseSection>
-              </ListHeader>
-            </>
+            <Flex direction="row" alignItems="center" xgap="0.25rem">
+              <Icon scale={16} name="adjust-microphone" strokeColor="none" />
+              <Text>Webex smart audio (You can choose one)</Text>
+            </Flex>
           }
         >
           {(item) => (
@@ -256,14 +221,10 @@ SelectionGroups.parameters = {
             console.log('selectionOnAction4', rest);
           }}
           title={
-            <>
-              <ListHeader outline={true} outlinePosition="top" outlineColor="secondary">
-                <ListItemBaseSection position="start">
-                  <Icon scale={16} name="accessibility" strokeColor="none" />
-                </ListItemBaseSection>
-                <ListItemBaseSection position="fill">Layout</ListItemBaseSection>
-              </ListHeader>
-            </>
+            <Flex direction="row" alignItems="center" xgap="0.25rem">
+              <Icon scale={16} name="accessibility" strokeColor="none" />
+              <Text>Layout</Text>
+            </Flex>
           }
         >
           {(item) => (
diff --git a/src/components/Menu/Menu.style.scss b/src/components/Menu/Menu.style.scss
index 80a64c5f3..0aee40ecc 100644
--- a/src/components/Menu/Menu.style.scss
+++ b/src/components/Menu/Menu.style.scss
@@ -6,4 +6,12 @@
   > ul {
     margin-left: 0;
   }
+
+  .md-menu-separator {
+    border-bottom: 1px solid var(--mds-color-theme-outline-primary-normal);
+    // the separator is drawn after the list item
+    // so need to move it back up a bit
+    margin-top: 0.25rem;
+    margin-bottom: 0.5rem;
+  }
 }
diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
index e5ba450a0..a8e79b4d9 100644
--- a/src/components/Menu/Menu.tsx
+++ b/src/components/Menu/Menu.tsx
@@ -50,6 +50,7 @@ const Menu = <T extends object>(props: Props<T>, providedRef: RefObject<HTMLDivE
     tickPosition = DEFAULTS.TICK_POSITION,
     itemShape = DEFAULTS.ITEM_SHAPE,
     itemSize = DEFAULTS.ITEM_SIZE,
+    hasSeparators = DEFAULTS.HAS_SEPARATORS,
     ariaLabelledby,
   } = props;
 
@@ -68,21 +69,36 @@ const Menu = <T extends object>(props: Props<T>, providedRef: RefObject<HTMLDivE
 
   const itemArray = Array.from(state.collection.getKeys());
 
+  const lastGroupIndex = itemArray
+    .map((key) => state.collection.getItem(key).hasChildNodes)
+    .lastIndexOf(true);
+
   const renderItem = useCallback(
-    <T extends object>(item: Node<T>, state: TreeState<T>) => {
+    <T extends object>(item: Node<T>, index: number, state: TreeState<T>) => {
+      const isLastGroup = index === lastGroupIndex;
       if (item.type === 'section') {
         if (item.props?.selectionGroup) {
           return (
-            <MenuSelectionGroup
-              item={item}
-              state={state}
-              onAction={_props.onAction}
-              key={item.key}
-              {...item.props}
-            />
+            <>
+              <MenuSelectionGroup
+                item={item}
+                state={state}
+                onAction={_props.onAction}
+                key={item.key}
+                {...item.props}
+              />
+              {hasSeparators && !isLastGroup && (
+                <div role="separator" className={STYLE.separator} />
+              )}
+            </>
           );
         }
-        return <MenuSection key={item.key} item={item} state={state} onAction={_props.onAction} />;
+        return (
+          <>
+            <MenuSection key={item.key} item={item} state={state} onAction={_props.onAction} />
+            {hasSeparators && !isLastGroup && <div role="separator" className={STYLE.separator} />}
+          </>
+        );
       } else {
         // collection.getKeys() return all keys (including sub-keys of child elements)
         // and we don't want to render items twice
@@ -123,9 +139,9 @@ const Menu = <T extends object>(props: Props<T>, providedRef: RefObject<HTMLDivE
         aria-labelledby={ariaLabelledby}
         {...menuProps}
       >
-        {itemArray.map((key) => {
+        {itemArray.map((key, index) => {
           const item = state.collection.getItem(key) as Node<T>;
-          return renderItem(item, state);
+          return renderItem(item, index, state);
         })}
       </div>
     </MenuAppearanceContext.Provider>
diff --git a/src/components/Menu/Menu.types.ts b/src/components/Menu/Menu.types.ts
index 8208c01e0..f383a9731 100644
--- a/src/components/Menu/Menu.types.ts
+++ b/src/components/Menu/Menu.types.ts
@@ -50,6 +50,11 @@ export interface Props<T> extends AriaMenuProps<T> {
    */
   ariaLabelledby?: string;
 
+  /**
+   * Wheather the menu should display separator lines between groups (sections/selectionGroups)
+   */
+  hasSeparators?: boolean;
+
   /**
    * Custom class for overriding this component's items CSS when selected.
    */
diff --git a/src/components/Menu/Menu.unit.test.tsx b/src/components/Menu/Menu.unit.test.tsx
index ffdce6e0e..18b2abfb1 100644
--- a/src/components/Menu/Menu.unit.test.tsx
+++ b/src/components/Menu/Menu.unit.test.tsx
@@ -152,6 +152,16 @@ describe('<Menu />', () => {
       expect(container).toMatchSnapshot();
     });
 
+    it('should match snapshot with hasSeparators', () => {
+      expect.assertions(1);
+
+      const hasSeparators = true;
+
+      const container = mount(<Menu {...defaultProps} hasSeparators={hasSeparators} />);
+
+      expect(container).toMatchSnapshot();
+    });
+
     it('should match snapshot with tickPosition', () => {
       expect.assertions(1);
 
@@ -269,6 +279,60 @@ describe('<Menu />', () => {
       expect(element.getAttribute('data-shape')).toBe(itemShape);
     });
 
+    it('should have rendered separators between groups when hasSeparators is true', () => {
+      expect.assertions(3);
+
+      const { queryAllByRole } = render(
+        <Menu {...defaultProps} hasSeparators>
+          <Section title="Section 1" key="s1" aria-label="section1">
+            <Item key="one">One</Item>
+            <Item key="two">Two</Item>
+          </Section>
+          <SelectionGroup title="Selection 2" key="s2" aria-label="section2" selectionMode="single">
+            <Item key="three">Three</Item>
+            <Item key="foud">Four</Item>
+          </SelectionGroup>
+          <Section title="Section 3" key="s3" aria-label="section3">
+            <Item key="five">Five</Item>
+            <Item key="six">Six</Item>
+          </Section>
+        </Menu>
+      );
+
+      const separators = queryAllByRole('separator');
+      expect(separators.length).toBe(2);
+      expect(separators[0].outerHTML).toEqual(
+        '<div role="separator" class="md-menu-separator"></div>'
+      );
+      expect(separators[1].outerHTML).toEqual(
+        '<div role="separator" class="md-menu-separator"></div>'
+      );
+    });
+
+    it('should not have rendered separators between groups when hasSeparators is false', () => {
+      expect.assertions(1);
+
+      const { queryAllByRole } = render(
+        <Menu {...defaultProps}>
+          <Section title="Section 1" key="s1" aria-label="section1">
+            <Item key="one">One</Item>
+            <Item key="two">Two</Item>
+          </Section>
+          <SelectionGroup title="Selection 2" key="s2" aria-label="section2" selectionMode="single">
+            <Item key="three">Three</Item>
+            <Item key="foud">Four</Item>
+          </SelectionGroup>
+          <Section title="Section 3" key="s3" aria-label="section3">
+            <Item key="five">Five</Item>
+            <Item key="six">Six</Item>
+          </Section>
+        </Menu>
+      );
+
+      const separators = queryAllByRole('separator');
+      expect(separators.length).toBe(0);
+    });
+
     it('should have rendered tickPlaceholder when tickPosition left is provided', () => {
       expect.assertions(1);
 
diff --git a/src/components/Menu/Menu.unit.test.tsx.snap b/src/components/Menu/Menu.unit.test.tsx.snap
index 4548b1b1f..3284296a5 100644
--- a/src/components/Menu/Menu.unit.test.tsx.snap
+++ b/src/components/Menu/Menu.unit.test.tsx.snap
@@ -1439,6 +1439,486 @@ exports[`<Menu /> snapshot should match snapshot with className 2`] = `
 </_Menu>
 `;
 
+exports[`<Menu /> snapshot should match snapshot with hasSeparators 1`] = `
+<_Menu
+  aria-label="Menu component"
+  hasSeparators={true}
+>
+  <div
+    aria-label="Menu component"
+    className="md-menu-wrapper"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onKeyDownCapture={[Function]}
+    onMouseDown={[Function]}
+    role="menu"
+    tabIndex={0}
+  >
+    <MenuItem
+      item={
+        Object {
+          "aria-label": undefined,
+          "childNodes": Object {
+            Symbol(Symbol.iterator): [Function],
+          },
+          "hasChildNodes": false,
+          "index": 0,
+          "key": "one",
+          "level": 0,
+          "nextKey": "two",
+          "parentKey": null,
+          "prevKey": undefined,
+          "props": Object {
+            "children": "One",
+          },
+          "rendered": "One",
+          "shouldInvalidate": undefined,
+          "textValue": "One",
+          "type": "item",
+          "value": undefined,
+          "wrapper": undefined,
+        }
+      }
+      key="one"
+      state={
+        Object {
+          "collection": $f4c7caecb598119f63e2918a55ec91a9$export$TreeCollection {
+            "firstKey": "one",
+            "iterable": Object {
+              Symbol(Symbol.iterator): [Function],
+            },
+            "keyMap": Map {
+              "one" => Object {
+                "aria-label": undefined,
+                "childNodes": Object {
+                  Symbol(Symbol.iterator): [Function],
+                },
+                "hasChildNodes": false,
+                "index": 0,
+                "key": "one",
+                "level": 0,
+                "nextKey": "two",
+                "parentKey": null,
+                "prevKey": undefined,
+                "props": Object {
+                  "children": "One",
+                },
+                "rendered": "One",
+                "shouldInvalidate": undefined,
+                "textValue": "One",
+                "type": "item",
+                "value": undefined,
+                "wrapper": undefined,
+              },
+              "two" => Object {
+                "aria-label": undefined,
+                "childNodes": Object {
+                  Symbol(Symbol.iterator): [Function],
+                },
+                "hasChildNodes": false,
+                "index": 1,
+                "key": "two",
+                "level": 0,
+                "nextKey": undefined,
+                "parentKey": null,
+                "prevKey": "one",
+                "props": Object {
+                  "children": "Two",
+                },
+                "rendered": "Two",
+                "shouldInvalidate": undefined,
+                "textValue": "Two",
+                "type": "item",
+                "value": undefined,
+                "wrapper": undefined,
+              },
+            },
+            "lastKey": "two",
+          },
+          "disabledKeys": Set {},
+          "expandedKeys": Set {},
+          "selectionManager": SelectionManager {
+            "_isSelectAll": null,
+            "allowsCellSelection": false,
+            "collection": $f4c7caecb598119f63e2918a55ec91a9$export$TreeCollection {
+              "firstKey": "one",
+              "iterable": Object {
+                Symbol(Symbol.iterator): [Function],
+              },
+              "keyMap": Map {
+                "one" => Object {
+                  "aria-label": undefined,
+                  "childNodes": Object {
+                    Symbol(Symbol.iterator): [Function],
+                  },
+                  "hasChildNodes": false,
+                  "index": 0,
+                  "key": "one",
+                  "level": 0,
+                  "nextKey": "two",
+                  "parentKey": null,
+                  "prevKey": undefined,
+                  "props": Object {
+                    "children": "One",
+                  },
+                  "rendered": "One",
+                  "shouldInvalidate": undefined,
+                  "textValue": "One",
+                  "type": "item",
+                  "value": undefined,
+                  "wrapper": undefined,
+                },
+                "two" => Object {
+                  "aria-label": undefined,
+                  "childNodes": Object {
+                    Symbol(Symbol.iterator): [Function],
+                  },
+                  "hasChildNodes": false,
+                  "index": 1,
+                  "key": "two",
+                  "level": 0,
+                  "nextKey": undefined,
+                  "parentKey": null,
+                  "prevKey": "one",
+                  "props": Object {
+                    "children": "Two",
+                  },
+                  "rendered": "Two",
+                  "shouldInvalidate": undefined,
+                  "textValue": "Two",
+                  "type": "item",
+                  "value": undefined,
+                  "wrapper": undefined,
+                },
+              },
+              "lastKey": "two",
+            },
+            "state": Object {
+              "childFocusStrategy": null,
+              "disabledKeys": Set {},
+              "disallowEmptySelection": undefined,
+              "focusedKey": null,
+              "isFocused": false,
+              "selectedKeys": Set {},
+              "selectionMode": "none",
+              "setFocused": [Function],
+              "setFocusedKey": [Function],
+              "setSelectedKeys": [Function],
+            },
+          },
+          "toggleKey": [Function],
+        }
+      }
+    >
+      <ListItemBase
+        aria-disabled={false}
+        aria-labelledby={null}
+        className="md-menu-item-wrapper"
+        data-key="one"
+        isDisabled={false}
+        isPadded={true}
+        onClick={[Function]}
+        onDragStart={[Function]}
+        onFocus={[Function]}
+        onKeyUp={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        onTouchCancel={[Function]}
+        onTouchEnd={[Function]}
+        onTouchMove={[Function]}
+        onTouchStart={[Function]}
+        role="menuitem"
+        shape="rectangle"
+        size={40}
+        tabIndex={-1}
+      >
+        <FocusRing
+          isInset={false}
+        >
+          <FocusRing
+            focusClass="md-focus-ring-wrapper children"
+            focusRingClass="md-focus-ring-wrapper children"
+            isInset={false}
+          >
+            <li
+              aria-disabled={false}
+              aria-labelledby={null}
+              className="md-menu-item-wrapper md-list-item-base-wrapper"
+              data-allow-text-select={false}
+              data-disabled={false}
+              data-interactive={true}
+              data-key="one"
+              data-padded={true}
+              data-shape="rectangle"
+              data-size={40}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onDragStart={[Function]}
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onKeyUp={[Function]}
+              onMouseDown={[Function]}
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
+              onMouseUp={[Function]}
+              onTouchCancel={[Function]}
+              onTouchEnd={[Function]}
+              onTouchMove={[Function]}
+              onTouchStart={[Function]}
+              role="menuitem"
+              tabIndex={-1}
+            >
+              <ListItemBaseSection
+                position="fill"
+                title="One"
+              >
+                <div
+                  data-position="fill"
+                  title="One"
+                >
+                  One
+                </div>
+              </ListItemBaseSection>
+            </li>
+          </FocusRing>
+        </FocusRing>
+      </ListItemBase>
+    </MenuItem>
+    <MenuItem
+      item={
+        Object {
+          "aria-label": undefined,
+          "childNodes": Object {
+            Symbol(Symbol.iterator): [Function],
+          },
+          "hasChildNodes": false,
+          "index": 1,
+          "key": "two",
+          "level": 0,
+          "nextKey": undefined,
+          "parentKey": null,
+          "prevKey": "one",
+          "props": Object {
+            "children": "Two",
+          },
+          "rendered": "Two",
+          "shouldInvalidate": undefined,
+          "textValue": "Two",
+          "type": "item",
+          "value": undefined,
+          "wrapper": undefined,
+        }
+      }
+      key="two"
+      state={
+        Object {
+          "collection": $f4c7caecb598119f63e2918a55ec91a9$export$TreeCollection {
+            "firstKey": "one",
+            "iterable": Object {
+              Symbol(Symbol.iterator): [Function],
+            },
+            "keyMap": Map {
+              "one" => Object {
+                "aria-label": undefined,
+                "childNodes": Object {
+                  Symbol(Symbol.iterator): [Function],
+                },
+                "hasChildNodes": false,
+                "index": 0,
+                "key": "one",
+                "level": 0,
+                "nextKey": "two",
+                "parentKey": null,
+                "prevKey": undefined,
+                "props": Object {
+                  "children": "One",
+                },
+                "rendered": "One",
+                "shouldInvalidate": undefined,
+                "textValue": "One",
+                "type": "item",
+                "value": undefined,
+                "wrapper": undefined,
+              },
+              "two" => Object {
+                "aria-label": undefined,
+                "childNodes": Object {
+                  Symbol(Symbol.iterator): [Function],
+                },
+                "hasChildNodes": false,
+                "index": 1,
+                "key": "two",
+                "level": 0,
+                "nextKey": undefined,
+                "parentKey": null,
+                "prevKey": "one",
+                "props": Object {
+                  "children": "Two",
+                },
+                "rendered": "Two",
+                "shouldInvalidate": undefined,
+                "textValue": "Two",
+                "type": "item",
+                "value": undefined,
+                "wrapper": undefined,
+              },
+            },
+            "lastKey": "two",
+          },
+          "disabledKeys": Set {},
+          "expandedKeys": Set {},
+          "selectionManager": SelectionManager {
+            "_isSelectAll": null,
+            "allowsCellSelection": false,
+            "collection": $f4c7caecb598119f63e2918a55ec91a9$export$TreeCollection {
+              "firstKey": "one",
+              "iterable": Object {
+                Symbol(Symbol.iterator): [Function],
+              },
+              "keyMap": Map {
+                "one" => Object {
+                  "aria-label": undefined,
+                  "childNodes": Object {
+                    Symbol(Symbol.iterator): [Function],
+                  },
+                  "hasChildNodes": false,
+                  "index": 0,
+                  "key": "one",
+                  "level": 0,
+                  "nextKey": "two",
+                  "parentKey": null,
+                  "prevKey": undefined,
+                  "props": Object {
+                    "children": "One",
+                  },
+                  "rendered": "One",
+                  "shouldInvalidate": undefined,
+                  "textValue": "One",
+                  "type": "item",
+                  "value": undefined,
+                  "wrapper": undefined,
+                },
+                "two" => Object {
+                  "aria-label": undefined,
+                  "childNodes": Object {
+                    Symbol(Symbol.iterator): [Function],
+                  },
+                  "hasChildNodes": false,
+                  "index": 1,
+                  "key": "two",
+                  "level": 0,
+                  "nextKey": undefined,
+                  "parentKey": null,
+                  "prevKey": "one",
+                  "props": Object {
+                    "children": "Two",
+                  },
+                  "rendered": "Two",
+                  "shouldInvalidate": undefined,
+                  "textValue": "Two",
+                  "type": "item",
+                  "value": undefined,
+                  "wrapper": undefined,
+                },
+              },
+              "lastKey": "two",
+            },
+            "state": Object {
+              "childFocusStrategy": null,
+              "disabledKeys": Set {},
+              "disallowEmptySelection": undefined,
+              "focusedKey": null,
+              "isFocused": false,
+              "selectedKeys": Set {},
+              "selectionMode": "none",
+              "setFocused": [Function],
+              "setFocusedKey": [Function],
+              "setSelectedKeys": [Function],
+            },
+          },
+          "toggleKey": [Function],
+        }
+      }
+    >
+      <ListItemBase
+        aria-disabled={false}
+        aria-labelledby={null}
+        className="md-menu-item-wrapper"
+        data-key="two"
+        isDisabled={false}
+        isPadded={true}
+        onClick={[Function]}
+        onDragStart={[Function]}
+        onFocus={[Function]}
+        onKeyUp={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        onTouchCancel={[Function]}
+        onTouchEnd={[Function]}
+        onTouchMove={[Function]}
+        onTouchStart={[Function]}
+        role="menuitem"
+        shape="rectangle"
+        size={40}
+        tabIndex={-1}
+      >
+        <FocusRing
+          isInset={false}
+        >
+          <FocusRing
+            focusClass="md-focus-ring-wrapper children"
+            focusRingClass="md-focus-ring-wrapper children"
+            isInset={false}
+          >
+            <li
+              aria-disabled={false}
+              aria-labelledby={null}
+              className="md-menu-item-wrapper md-list-item-base-wrapper"
+              data-allow-text-select={false}
+              data-disabled={false}
+              data-interactive={true}
+              data-key="two"
+              data-padded={true}
+              data-shape="rectangle"
+              data-size={40}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onDragStart={[Function]}
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onKeyUp={[Function]}
+              onMouseDown={[Function]}
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
+              onMouseUp={[Function]}
+              onTouchCancel={[Function]}
+              onTouchEnd={[Function]}
+              onTouchMove={[Function]}
+              onTouchStart={[Function]}
+              role="menuitem"
+              tabIndex={-1}
+            >
+              <ListItemBaseSection
+                position="fill"
+                title="Two"
+              >
+                <div
+                  data-position="fill"
+                  title="Two"
+                >
+                  Two
+                </div>
+              </ListItemBaseSection>
+            </li>
+          </FocusRing>
+        </FocusRing>
+      </ListItemBase>
+    </MenuItem>
+  </div>
+</_Menu>
+`;
+
 exports[`<Menu /> snapshot should match snapshot with id 1`] = `
 <_Menu
   aria-label="Menu component"
diff --git a/src/components/MenuSelectionGroup/MenuSelectionGroup.types.ts b/src/components/MenuSelectionGroup/MenuSelectionGroup.types.ts
index c523f1817..efb4d7943 100644
--- a/src/components/MenuSelectionGroup/MenuSelectionGroup.types.ts
+++ b/src/components/MenuSelectionGroup/MenuSelectionGroup.types.ts
@@ -39,9 +39,9 @@ export interface Props<T> extends SelectionGroupProps<T> {
    */
   className?: string;
 
-    /**
+  /**
    * Size of the list item
-   * 
+   *
    */
   itemSize?: ListItemBaseSize;
 }
diff --git a/src/storybook/helper.stories.templates.tsx b/src/storybook/helper.stories.templates.tsx
index 03e6207ea..0ab1edec9 100644
--- a/src/storybook/helper.stories.templates.tsx
+++ b/src/storybook/helper.stories.templates.tsx
@@ -145,7 +145,7 @@ function MultiTemplateWithLabel<Props>(Component: FC): Story<Props> {
             <Wrapper key={index}>
               <Component {...args} {...variant} />
             </Wrapper>
-            ) : (
+          ) : (
             <Component key={index} {...args} {...variant} />
           )}
         </div>