diff --git a/packages/react/src/components/avatar/avatar.tsx b/packages/react/src/components/avatar/avatar.tsx
index 7795d09e2a..7fee59d5dd 100644
--- a/packages/react/src/components/avatar/avatar.tsx
+++ b/packages/react/src/components/avatar/avatar.tsx
@@ -1,9 +1,9 @@
 import { ReactElement, useMemo } from 'react';
 import styled, { css, FlattenInterpolation, ThemeProps } from 'styled-components';
+import { useTranslation } from '../../i18n/use-translation';
 import { Theme } from '../../themes';
 import { getInitialsFromUsername } from '../../utils/user';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
-import { useTranslation } from '../../i18n/use-translation';
 import { Icon } from '../icon/icon';
 
 export type AvatarSize = 'xsmall' | 'small' | 'medium' | 'large'
diff --git a/packages/react/src/components/bento-menu-button/bento-menu-button.test.tsx.snap b/packages/react/src/components/bento-menu-button/bento-menu-button.test.tsx.snap
index 543ada270d..62efca0b7a 100644
--- a/packages/react/src/components/bento-menu-button/bento-menu-button.test.tsx.snap
+++ b/packages/react/src/components/bento-menu-button/bento-menu-button.test.tsx.snap
@@ -94,6 +94,28 @@ exports[`BentoMenuButton Matches Snapshot (tag="nav") 1`] = `
   color: #FFFFFF;
 }
 
+.c4 {
+  background-color: #FFFFFF;
+  border: 1px solid #60666E;
+  border-radius: var(--border-radius);
+  box-shadow: 0 10px 20px 0 rgba(0,0,0,0.19);
+  color: #000000;
+  list-style-type: none;
+  position: absolute;
+  width: 100%;
+}
+
+.c0 {
+  position: relative;
+}
+
+.c6 {
+  max-width: 350px;
+  min-width: 200px;
+  right: 0;
+  width: initial;
+}
+
 .c18 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -443,28 +465,6 @@ exports[`BentoMenuButton Matches Snapshot (tag="nav") 1`] = `
   pointer-events: none;
 }
 
-.c4 {
-  background-color: #FFFFFF;
-  border: 1px solid #60666E;
-  border-radius: var(--border-radius);
-  box-shadow: 0 10px 20px 0 rgba(0,0,0,0.19);
-  color: #000000;
-  list-style-type: none;
-  position: absolute;
-  width: 100%;
-}
-
-.c0 {
-  position: relative;
-}
-
-.c6 {
-  max-width: 350px;
-  min-width: 200px;
-  right: 0;
-  width: initial;
-}
-
 .c1 .c5 {
   border-radius: var(--border-radius-2x);
   box-sizing: border-box;
@@ -853,6 +853,28 @@ exports[`BentoMenuButton Matches Snapshot 1`] = `
   color: #FFFFFF;
 }
 
+.c4 {
+  background-color: #FFFFFF;
+  border: 1px solid #60666E;
+  border-radius: var(--border-radius);
+  box-shadow: 0 10px 20px 0 rgba(0,0,0,0.19);
+  color: #000000;
+  list-style-type: none;
+  position: absolute;
+  width: 100%;
+}
+
+.c0 {
+  position: relative;
+}
+
+.c6 {
+  max-width: 350px;
+  min-width: 200px;
+  right: 0;
+  width: initial;
+}
+
 .c18 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -1202,28 +1224,6 @@ exports[`BentoMenuButton Matches Snapshot 1`] = `
   pointer-events: none;
 }
 
-.c4 {
-  background-color: #FFFFFF;
-  border: 1px solid #60666E;
-  border-radius: var(--border-radius);
-  box-shadow: 0 10px 20px 0 rgba(0,0,0,0.19);
-  color: #000000;
-  list-style-type: none;
-  position: absolute;
-  width: 100%;
-}
-
-.c0 {
-  position: relative;
-}
-
-.c6 {
-  max-width: 350px;
-  min-width: 200px;
-  right: 0;
-  width: initial;
-}
-
 .c1 .c5 {
   border-radius: var(--border-radius-2x);
   box-sizing: border-box;
diff --git a/packages/react/src/components/bento-menu-button/bento-menu-button.tsx b/packages/react/src/components/bento-menu-button/bento-menu-button.tsx
index 2c588cdff1..c3c23ae599 100644
--- a/packages/react/src/components/bento-menu-button/bento-menu-button.tsx
+++ b/packages/react/src/components/bento-menu-button/bento-menu-button.tsx
@@ -1,14 +1,14 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import { FunctionComponent, useRef } from 'react';
 import styled from 'styled-components';
+import { useTranslation } from '../../i18n/use-translation';
+import { useDeviceContext } from '../device-context-provider/device-context-provider';
+import { DropdownMenuButton, StyledDropdownMenu } from '../dropdown-menu-button/dropdown-menu-button';
 import { ExternalItem, ExternalItemProps, GroupItem, NavItem, NavItemProps } from '../dropdown-menu/list-items';
-import { HtmlLink, StyledNavItem } from '../dropdown-menu/list-items/nav-item';
 import { StyledExternalLink } from '../dropdown-menu/list-items/external-item';
-import { DropdownMenuButton, StyledDropdownMenu } from '../dropdown-menu-button/dropdown-menu-button';
-import { Icon } from '../icon/icon';
-import { useTranslation } from '../../i18n/use-translation';
 import { StyledHeading } from '../dropdown-menu/list-items/group-item';
-import { useDeviceContext } from '../device-context-provider/device-context-provider';
+import { HtmlLink, StyledNavItem } from '../dropdown-menu/list-items/nav-item';
+import { Icon } from '../icon/icon';
 
 const StyledDropdownMenuButton = styled(DropdownMenuButton)`
     ${StyledDropdownMenu} {
diff --git a/packages/react/src/components/breadcrumb/breadcrumb.test.tsx b/packages/react/src/components/breadcrumb/breadcrumb.test.tsx
index 6ab72b6514..95712da749 100644
--- a/packages/react/src/components/breadcrumb/breadcrumb.test.tsx
+++ b/packages/react/src/components/breadcrumb/breadcrumb.test.tsx
@@ -1,6 +1,6 @@
 import { shallow } from 'enzyme';
-import { mountWithProviders } from '../../test-utils/renderer';
 import { findByTestId, getByTestId } from '../../test-utils/enzyme-selectors';
+import { mountWithProviders } from '../../test-utils/renderer';
 import { Breadcrumb } from './breadcrumb';
 
 const defaultHistory = [
diff --git a/packages/react/src/components/breadcrumb/breadcrumb.tsx b/packages/react/src/components/breadcrumb/breadcrumb.tsx
index 726dd48800..907fb70f9b 100644
--- a/packages/react/src/components/breadcrumb/breadcrumb.tsx
+++ b/packages/react/src/components/breadcrumb/breadcrumb.tsx
@@ -1,11 +1,11 @@
-import { ReactElement, KeyboardEvent, useState, useRef, useCallback, useEffect } from 'react';
+import { KeyboardEvent, ReactElement, useCallback, useEffect, useRef, useState } from 'react';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import { eventIsInside } from '../../utils/events';
 import { IconButton } from '../buttons/icon-button';
+import { NavMenu } from '../nav-menu/nav-menu';
 import { NavMenuOption } from '../nav-menu/nav-menu-option';
 import { RouteLink } from '../route-link/route-link';
-import { NavMenu } from '../nav-menu/nav-menu';
 
 export type BreadcrumbElement = NavMenuOption;
 
diff --git a/packages/react/src/components/buttons/abstract-button.tsx b/packages/react/src/components/buttons/abstract-button.tsx
index df3e8c5dfb..dbd0e06fdb 100755
--- a/packages/react/src/components/buttons/abstract-button.tsx
+++ b/packages/react/src/components/buttons/abstract-button.tsx
@@ -1,11 +1,4 @@
-import {
-    ButtonHTMLAttributes,
-    EventHandler,
-    forwardRef,
-    MouseEvent,
-    Ref,
-    useCallback,
-} from 'react';
+import { ButtonHTMLAttributes, EventHandler, forwardRef, MouseEvent, Ref, useCallback } from 'react';
 import styled, { css, FlattenInterpolation, ThemeProps } from 'styled-components';
 import { Theme } from '../../themes';
 import { focus } from '../../utils/css-state';
diff --git a/packages/react/src/components/buttons/button.tsx b/packages/react/src/components/buttons/button.tsx
index b850430586..e75df98e8f 100644
--- a/packages/react/src/components/buttons/button.tsx
+++ b/packages/react/src/components/buttons/button.tsx
@@ -1,4 +1,4 @@
-import { forwardRef, MouseEvent, KeyboardEvent, ReactElement, ReactNode, Ref } from 'react';
+import { forwardRef, KeyboardEvent, MouseEvent, ReactElement, ReactNode, Ref } from 'react';
 import styled from 'styled-components';
 import { Theme } from '../../themes';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
diff --git a/packages/react/src/components/buttons/icon-button.tsx b/packages/react/src/components/buttons/icon-button.tsx
index 43cfd339a2..feae69e4b9 100644
--- a/packages/react/src/components/buttons/icon-button.tsx
+++ b/packages/react/src/components/buttons/icon-button.tsx
@@ -1,9 +1,9 @@
 import { forwardRef, KeyboardEvent, MouseEvent, ReactElement, Ref } from 'react';
 import styled from 'styled-components';
+import { AvatarProps } from '../avatar/avatar';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
 import { Icon, IconName, IconProps } from '../icon/icon';
 import { AbstractButton, getButtonTypeStyles } from './abstract-button';
-import { AvatarProps } from '../avatar/avatar';
 
 type ButtonType = 'primary' | 'secondary' | 'tertiary' | 'destructive';
 
diff --git a/packages/react/src/components/card-link/card-link.tsx b/packages/react/src/components/card-link/card-link.tsx
index 3ba90a37c0..a165696668 100644
--- a/packages/react/src/components/card-link/card-link.tsx
+++ b/packages/react/src/components/card-link/card-link.tsx
@@ -1,8 +1,8 @@
 import { ReactElement } from 'react';
-import styled from 'styled-components';
 import { Link } from 'react-router-dom';
-import { Icon } from '../icon/icon';
+import styled from 'styled-components';
 import { focus } from '../../utils/css-state';
+import { Icon } from '../icon/icon';
 
 const StyledIcon = styled(Icon)`
     color: ${({ theme }) => theme.greys['dark-grey']};
diff --git a/packages/react/src/components/checkbox/checkbox.tsx b/packages/react/src/components/checkbox/checkbox.tsx
index 4a8879504e..e34af4b153 100644
--- a/packages/react/src/components/checkbox/checkbox.tsx
+++ b/packages/react/src/components/checkbox/checkbox.tsx
@@ -1,12 +1,4 @@
-import {
-    ChangeEvent,
-    forwardRef,
-    FunctionComponent,
-    Ref,
-    useEffect,
-    useImperativeHandle,
-    useRef,
-} from 'react';
+import { ChangeEvent, forwardRef, FunctionComponent, Ref, useEffect, useImperativeHandle, useRef } from 'react';
 import styled, { css } from 'styled-components';
 import { focus } from '../../utils/css-state';
 import { Icon } from '../icon/icon';
diff --git a/packages/react/src/components/chooser-card/chooser-card.test.tsx b/packages/react/src/components/chooser-card/chooser-card.test.tsx
index fda1499376..0b5f160c51 100644
--- a/packages/react/src/components/chooser-card/chooser-card.test.tsx
+++ b/packages/react/src/components/chooser-card/chooser-card.test.tsx
@@ -1,6 +1,6 @@
 import { shallow } from 'enzyme';
 import { getByTestId } from '../../test-utils/enzyme-selectors';
-import { renderWithProviders, mountWithTheme } from '../../test-utils/renderer';
+import { mountWithTheme, renderWithProviders } from '../../test-utils/renderer';
 import { ChooserCard } from './chooser-card';
 
 jest.mock('../../utils/uuid');
diff --git a/packages/react/src/components/chooser-card/chooser-card.tsx b/packages/react/src/components/chooser-card/chooser-card.tsx
index f5bccf06ce..5ea6c33c62 100644
--- a/packages/react/src/components/chooser-card/chooser-card.tsx
+++ b/packages/react/src/components/chooser-card/chooser-card.tsx
@@ -1,17 +1,8 @@
-import {
-    ChangeEvent,
-    ReactElement,
-    ReactNode,
-    useCallback,
-    useEffect,
-    useMemo,
-    useRef,
-    useState,
-} from 'react';
+import { ChangeEvent, ReactElement, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { eventIsInside } from '../../utils/events';
 import { v4 as uuid } from '../../utils/uuid';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
 import * as S from './styled-components';
-import { eventIsInside } from '../../utils/events';
 
 interface ChooserCardProps {
     checked?: boolean;
diff --git a/packages/react/src/components/datepicker/datepicker.tsx b/packages/react/src/components/datepicker/datepicker.tsx
index 58fc3c34a9..e5ae86a5dd 100644
--- a/packages/react/src/components/datepicker/datepicker.tsx
+++ b/packages/react/src/components/datepicker/datepicker.tsx
@@ -22,6 +22,7 @@ import { Button } from '../buttons/button';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
 import { FieldContainer } from '../field-container/field-container';
 import { Icon } from '../icon/icon';
+import { TooltipProps } from '../tooltip/tooltip';
 import { CalendarHeader } from './calendar-header';
 import {
     DayOfWeek,
@@ -34,7 +35,6 @@ import {
     setLocaleFirstDayOfWeek,
     SupportedLocale,
 } from './utils/datepicker-utils';
-import { TooltipProps } from '../tooltip/tooltip';
 
 interface StyledDatePickerProps extends ReactDatePickerProps {
     isMobile: boolean;
diff --git a/packages/react/src/components/dropdown-menu-button/dropdown-menu-button.test.tsx b/packages/react/src/components/dropdown-menu-button/dropdown-menu-button.test.tsx
index b46426feeb..573710574b 100644
--- a/packages/react/src/components/dropdown-menu-button/dropdown-menu-button.test.tsx
+++ b/packages/react/src/components/dropdown-menu-button/dropdown-menu-button.test.tsx
@@ -2,8 +2,8 @@ import { shallow } from 'enzyme';
 import { ReactElement } from 'react';
 import { getByTestId } from '../../test-utils/enzyme-selectors';
 import { mountWithProviders, renderWithProviders } from '../../test-utils/renderer';
-import { DropdownMenuButton } from './dropdown-menu-button';
 import { ExternalItem, GroupItem, GroupItemProps, NavItem } from '../dropdown-menu/list-items';
+import { DropdownMenuButton } from './dropdown-menu-button';
 
 jest.mock('../../utils/uuid');
 
diff --git a/packages/react/src/components/dropdown-menu-button/dropdown-menu-button.test.tsx.snap b/packages/react/src/components/dropdown-menu-button/dropdown-menu-button.test.tsx.snap
index 7586a3078d..62bc769eeb 100644
--- a/packages/react/src/components/dropdown-menu-button/dropdown-menu-button.test.tsx.snap
+++ b/packages/react/src/components/dropdown-menu-button/dropdown-menu-button.test.tsx.snap
@@ -59,71 +59,6 @@ exports[`DropdownMenuButton Matches Snapshot (defaultOpen) 1`] = `
   color: inherit;
 }
 
-.c5 {
-  background-color: #FFFFFF;
-  border: 1px solid #60666E;
-  border-radius: var(--border-radius);
-  box-shadow: 0 10px 20px 0 rgba(0,0,0,0.19);
-  color: #000000;
-  list-style-type: none;
-  position: absolute;
-  width: 100%;
-}
-
-.c2 {
-  background-color: transparent;
-  border-color: transparent;
-  color: #FFFFFF;
-}
-
-.c2:focus {
-  outline: none;
-}
-
-.c2:focus {
-  outline: none;
-  border-color: #006296;
-  box-shadow: 0 0 0 2px #84C6EA;
-}
-
-.c2:hover,
-.c2[aria-expanded="true"] {
-  background-color: #003A5A;
-  color: #FFFFFF;
-}
-
-.c2:disabled {
-  background-color: transparent;
-  color: #003A5A;
-}
-
-.c2:focus {
-  background-color: #012639;
-  border-color: #006296;
-  color: #FFFFFF;
-}
-
-.c0 {
-  position: relative;
-}
-
-.c3 {
-  font-size: 0.875rem;
-  font-weight: var(--font-normal);
-  text-transform: unset;
-}
-
-.c4 {
-  margin-left: var(--spacing-1x);
-}
-
-.c6 {
-  max-width: 350px;
-  min-width: 200px;
-  right: 0;
-  width: initial;
-}
-
 .c13 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -445,6 +380,71 @@ exports[`DropdownMenuButton Matches Snapshot (defaultOpen) 1`] = `
   pointer-events: none;
 }
 
+.c2 {
+  background-color: transparent;
+  border-color: transparent;
+  color: #FFFFFF;
+}
+
+.c2:focus {
+  outline: none;
+}
+
+.c2:focus {
+  outline: none;
+  border-color: #006296;
+  box-shadow: 0 0 0 2px #84C6EA;
+}
+
+.c2:hover,
+.c2[aria-expanded="true"] {
+  background-color: #003A5A;
+  color: #FFFFFF;
+}
+
+.c2:disabled {
+  background-color: transparent;
+  color: #003A5A;
+}
+
+.c2:focus {
+  background-color: #012639;
+  border-color: #006296;
+  color: #FFFFFF;
+}
+
+.c5 {
+  background-color: #FFFFFF;
+  border: 1px solid #60666E;
+  border-radius: var(--border-radius);
+  box-shadow: 0 10px 20px 0 rgba(0,0,0,0.19);
+  color: #000000;
+  list-style-type: none;
+  position: absolute;
+  width: 100%;
+}
+
+.c0 {
+  position: relative;
+}
+
+.c3 {
+  font-size: 0.875rem;
+  font-weight: var(--font-normal);
+  text-transform: unset;
+}
+
+.c4 {
+  margin-left: var(--spacing-1x);
+}
+
+.c6 {
+  max-width: 350px;
+  min-width: 200px;
+  right: 0;
+  width: initial;
+}
+
 <div
   aria-label=""
   class="c0"
@@ -755,71 +755,6 @@ exports[`DropdownMenuButton Matches Snapshot 1`] = `
   color: inherit;
 }
 
-.c5 {
-  background-color: #FFFFFF;
-  border: 1px solid #60666E;
-  border-radius: var(--border-radius);
-  box-shadow: 0 10px 20px 0 rgba(0,0,0,0.19);
-  color: #000000;
-  list-style-type: none;
-  position: absolute;
-  width: 100%;
-}
-
-.c2 {
-  background-color: transparent;
-  border-color: transparent;
-  color: #FFFFFF;
-}
-
-.c2:focus {
-  outline: none;
-}
-
-.c2:focus {
-  outline: none;
-  border-color: #006296;
-  box-shadow: 0 0 0 2px #84C6EA;
-}
-
-.c2:hover,
-.c2[aria-expanded="true"] {
-  background-color: #003A5A;
-  color: #FFFFFF;
-}
-
-.c2:disabled {
-  background-color: transparent;
-  color: #003A5A;
-}
-
-.c2:focus {
-  background-color: #012639;
-  border-color: #006296;
-  color: #FFFFFF;
-}
-
-.c0 {
-  position: relative;
-}
-
-.c3 {
-  font-size: 0.875rem;
-  font-weight: var(--font-normal);
-  text-transform: unset;
-}
-
-.c4 {
-  margin-left: var(--spacing-1x);
-}
-
-.c6 {
-  max-width: 350px;
-  min-width: 200px;
-  right: 0;
-  width: initial;
-}
-
 .c13 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -1141,6 +1076,71 @@ exports[`DropdownMenuButton Matches Snapshot 1`] = `
   pointer-events: none;
 }
 
+.c2 {
+  background-color: transparent;
+  border-color: transparent;
+  color: #FFFFFF;
+}
+
+.c2:focus {
+  outline: none;
+}
+
+.c2:focus {
+  outline: none;
+  border-color: #006296;
+  box-shadow: 0 0 0 2px #84C6EA;
+}
+
+.c2:hover,
+.c2[aria-expanded="true"] {
+  background-color: #003A5A;
+  color: #FFFFFF;
+}
+
+.c2:disabled {
+  background-color: transparent;
+  color: #003A5A;
+}
+
+.c2:focus {
+  background-color: #012639;
+  border-color: #006296;
+  color: #FFFFFF;
+}
+
+.c5 {
+  background-color: #FFFFFF;
+  border: 1px solid #60666E;
+  border-radius: var(--border-radius);
+  box-shadow: 0 10px 20px 0 rgba(0,0,0,0.19);
+  color: #000000;
+  list-style-type: none;
+  position: absolute;
+  width: 100%;
+}
+
+.c0 {
+  position: relative;
+}
+
+.c3 {
+  font-size: 0.875rem;
+  font-weight: var(--font-normal);
+  text-transform: unset;
+}
+
+.c4 {
+  margin-left: var(--spacing-1x);
+}
+
+.c6 {
+  max-width: 350px;
+  min-width: 200px;
+  right: 0;
+  width: initial;
+}
+
 <div
   aria-label=""
   class="c0"
diff --git a/packages/react/src/components/dropdown-menu-button/dropdown-menu-button.tsx b/packages/react/src/components/dropdown-menu-button/dropdown-menu-button.tsx
index 807725470e..d2bc8a7610 100644
--- a/packages/react/src/components/dropdown-menu-button/dropdown-menu-button.tsx
+++ b/packages/react/src/components/dropdown-menu-button/dropdown-menu-button.tsx
@@ -12,16 +12,16 @@ import {
 } from 'react';
 import styled from 'styled-components';
 import { useTranslation } from '../../i18n/use-translation';
+import { getRootDocument } from '../../utils/dom';
 import { eventIsInside } from '../../utils/events';
 import { v4 as uuid } from '../../utils/uuid';
+import { AvatarProps } from '../avatar/avatar';
+import { Button, ButtonType } from '../buttons/button';
+import { IconButton } from '../buttons/icon-button';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
-import { Icon, IconProps } from '../icon/icon';
 import { DropdownMenu } from '../dropdown-menu/dropdown-menu';
 import { GroupItemProps } from '../dropdown-menu/list-items';
-import { getRootDocument } from '../../utils/dom';
-import { AvatarProps } from '../avatar/avatar';
-import { IconButton } from '../buttons/icon-button';
-import { Button, ButtonType } from '../buttons/button';
+import { Icon, IconProps } from '../icon/icon';
 
 const StyledDiv = styled.div`
     position: relative;
diff --git a/packages/react/src/components/dropdown-menu/list-items/external-item.tsx b/packages/react/src/components/dropdown-menu/list-items/external-item.tsx
index 534773c106..ebc3598b91 100644
--- a/packages/react/src/components/dropdown-menu/list-items/external-item.tsx
+++ b/packages/react/src/components/dropdown-menu/list-items/external-item.tsx
@@ -1,8 +1,8 @@
 import { ReactElement } from 'react';
 import styled from 'styled-components';
+import { focus } from '../../../utils/css-state';
 import { DeviceContextProps, useDeviceContext } from '../../device-context-provider/device-context-provider';
 import { ExternalLink, ExternalLinkProps } from '../../external-link/external-link';
-import { focus } from '../../../utils/css-state';
 
 export interface ExternalItemProps extends ExternalLinkProps {
     label: string;
diff --git a/packages/react/src/components/dropdown-menu/list-items/group-item.tsx b/packages/react/src/components/dropdown-menu/list-items/group-item.tsx
index 9770fa185f..f571fb4f6f 100644
--- a/packages/react/src/components/dropdown-menu/list-items/group-item.tsx
+++ b/packages/react/src/components/dropdown-menu/list-items/group-item.tsx
@@ -1,8 +1,8 @@
 import { ReactElement, VoidFunctionComponent } from 'react';
 import styled from 'styled-components';
-import { NavItemProps } from './nav-item';
-import { Heading, HeadingProps } from '../../heading/heading';
 import { useDataAttributes } from '../../../hooks/use-data-attributes';
+import { Heading, HeadingProps } from '../../heading/heading';
+import { NavItemProps } from './nav-item';
 
 export interface GroupItemProps {
     id?: string;
diff --git a/packages/react/src/components/dropdown-menu/list-items/nav-item.test.tsx b/packages/react/src/components/dropdown-menu/list-items/nav-item.test.tsx
index d358b2eb4f..b12ffc4550 100644
--- a/packages/react/src/components/dropdown-menu/list-items/nav-item.test.tsx
+++ b/packages/react/src/components/dropdown-menu/list-items/nav-item.test.tsx
@@ -1,6 +1,6 @@
 import { shallow } from 'enzyme';
-import { NavItem } from './nav-item';
 import { getByTestId } from '../../../test-utils/enzyme-selectors';
+import { NavItem } from './nav-item';
 
 describe('NavItem', () => {
     it('displays screen-reader-only text when router link opens in a new tab (target="_blank")', () => {
diff --git a/packages/react/src/components/dropdown-menu/list-items/nav-item.tsx b/packages/react/src/components/dropdown-menu/list-items/nav-item.tsx
index 7577a1f092..0d4632c74c 100644
--- a/packages/react/src/components/dropdown-menu/list-items/nav-item.tsx
+++ b/packages/react/src/components/dropdown-menu/list-items/nav-item.tsx
@@ -1,12 +1,12 @@
 import { forwardRef, MouseEvent, ReactElement, Ref } from 'react';
-import styled, { css } from 'styled-components';
 import { NavLink, NavLinkProps } from 'react-router-dom';
+import styled, { css } from 'styled-components';
+import { useTranslation } from '../../../i18n/use-translation';
+import { focus } from '../../../utils/css-state';
 import { DeviceContextProps, useDeviceContext } from '../../device-context-provider/device-context-provider';
 import { IconName } from '../../icon/icon';
-import { ItemContent } from './item-content';
-import { focus } from '../../../utils/css-state';
 import { ScreenReaderOnlyText } from '../../screen-reader-only-text/ScreenReaderOnlyText';
-import { useTranslation } from '../../../i18n/use-translation';
+import { ItemContent } from './item-content';
 
 export interface NavItemProps {
     value: string;
diff --git a/packages/react/src/components/external-link/external-link.tsx b/packages/react/src/components/external-link/external-link.tsx
index b6ad5db924..c677ae7ac6 100644
--- a/packages/react/src/components/external-link/external-link.tsx
+++ b/packages/react/src/components/external-link/external-link.tsx
@@ -1,10 +1,10 @@
 import { MouseEvent, ReactElement, useCallback } from 'react';
 import styled from 'styled-components';
+import { useTranslation } from '../../i18n/use-translation';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
 import { Icon, IconName } from '../icon/icon';
 import { StyledLink } from '../route-link/styles/styled-link';
 import { ScreenReaderOnlyText } from '../screen-reader-only-text/ScreenReaderOnlyText';
-import { useTranslation } from '../../i18n/use-translation';
 
 const LeftIcon = styled(Icon)`
     margin-right: var(--spacing-1x);
diff --git a/packages/react/src/components/global-banner/global-banner.test.tsx b/packages/react/src/components/global-banner/global-banner.test.tsx
index c705b58b14..9a672b51bb 100644
--- a/packages/react/src/components/global-banner/global-banner.test.tsx
+++ b/packages/react/src/components/global-banner/global-banner.test.tsx
@@ -1,6 +1,6 @@
+import { getByTestId } from '../../test-utils/enzyme-selectors';
 import { mountWithTheme, renderWithProviders } from '../../test-utils/renderer';
 import { ActionButton, GlobalBanner, GlobalBannerType } from './global-banner';
-import { getByTestId } from '../../test-utils/enzyme-selectors';
 
 const defaultActionButton: ActionButton = {
     label: 'Test button',
diff --git a/packages/react/src/components/application-menu/application-menu-content.tsx b/packages/react/src/components/global-header/global-header-content.tsx
similarity index 100%
rename from packages/react/src/components/application-menu/application-menu-content.tsx
rename to packages/react/src/components/global-header/global-header-content.tsx
diff --git a/packages/react/src/components/application-menu/application-menu.test.tsx b/packages/react/src/components/global-header/global-header.test.tsx
similarity index 72%
rename from packages/react/src/components/application-menu/application-menu.test.tsx
rename to packages/react/src/components/global-header/global-header.test.tsx
index 4b4c308bb6..1e6150a22a 100644
--- a/packages/react/src/components/application-menu/application-menu.test.tsx
+++ b/packages/react/src/components/global-header/global-header.test.tsx
@@ -1,15 +1,15 @@
 import { shallow } from 'enzyme';
 import { getByTestId } from '../../test-utils/enzyme-selectors';
-import { renderWithProviders, mountWithProviders } from '../../test-utils/renderer';
-import { ApplicationMenu } from './application-menu';
+import { mountWithProviders, renderWithProviders } from '../../test-utils/renderer';
 import { SkipLinkProps } from '../skip-link/skip-link';
+import { GlobalHeader } from './global-header';
 
-describe('Application Menu', () => {
+describe('Global Header', () => {
     it('Matches the snapshot (desktop)', () => {
         const tree = renderWithProviders(
-            <ApplicationMenu mobileDrawerContent={(<p>Test</p>)}>
+            <GlobalHeader mobileDrawerContent={(<p>Test</p>)}>
                 Hello, World!
-            </ApplicationMenu>,
+            </GlobalHeader>,
         );
 
         expect(tree).toMatchSnapshot();
@@ -17,9 +17,9 @@ describe('Application Menu', () => {
 
     it('Matches the snapshot (mobile)', () => {
         const tree = renderWithProviders(
-            <ApplicationMenu mobileDrawerContent={(<p>Test</p>)}>
+            <GlobalHeader mobileDrawerContent={(<p>Test</p>)}>
                 Hello, World!
-            </ApplicationMenu>,
+            </GlobalHeader>,
             'mobile',
         );
 
@@ -28,9 +28,9 @@ describe('Application Menu', () => {
 
     it('mobileDrawerContent prop adds a side drawer and burger button in mobile', () => {
         const tree = renderWithProviders(
-            <ApplicationMenu mobileDrawerContent={(<p>Test</p>)}>
+            <GlobalHeader mobileDrawerContent={(<p>Test</p>)}>
                 Hello, World!
-            </ApplicationMenu>,
+            </GlobalHeader>,
             'mobile',
         );
 
@@ -40,9 +40,9 @@ describe('Application Menu', () => {
     describe('SkipLink', () => {
         it('should not exist when skipLink is not defined', () => {
             const wrapper = shallow(
-                <ApplicationMenu>
+                <GlobalHeader>
                     Test
-                </ApplicationMenu>,
+                </GlobalHeader>,
             );
 
             expect(getByTestId(wrapper, 'skip-link').exists()).toBe(false);
@@ -55,9 +55,9 @@ describe('Application Menu', () => {
             };
 
             const wrapper = shallow(
-                <ApplicationMenu skipLink={skipLink}>
+                <GlobalHeader skipLink={skipLink}>
                     Test
-                </ApplicationMenu>,
+                </GlobalHeader>,
             );
 
             const skipLinkRef = getByTestId(wrapper, 'skip-link');
@@ -68,20 +68,20 @@ describe('Application Menu', () => {
 
     describe('logo', () => {
         it('should use react-router-link when usesReactRouter is true', () => {
-            const wrapper = shallow(<ApplicationMenu usesReactRouter>test</ApplicationMenu>);
+            const wrapper = shallow(<GlobalHeader usesReactRouter>test</GlobalHeader>);
 
             expect(getByTestId(wrapper, 'logo-react-router-link').exists()).toBe(true);
         });
 
         it('should use html-link when usesReactRouter is false', () => {
-            const wrapper = shallow(<ApplicationMenu usesReactRouter={false}>test</ApplicationMenu>);
+            const wrapper = shallow(<GlobalHeader usesReactRouter={false}>test</GlobalHeader>);
 
             expect(getByTestId(wrapper, 'logo-html-link').exists()).toBe(true);
         });
 
         it('contains app-title when appTitleDesktop prop is set given device is desktop', () => {
             const wrapper = mountWithProviders(
-                <ApplicationMenu appTitleDesktop="test">test</ApplicationMenu>,
+                <GlobalHeader appTitleDesktop="test">test</GlobalHeader>,
                 { wrappingComponentProps: { staticDevice: 'desktop' } },
             );
 
@@ -90,7 +90,7 @@ describe('Application Menu', () => {
 
         it('does not contain app-title when device is mobile', () => {
             const wrapper = mountWithProviders(
-                <ApplicationMenu appTitleDesktop="test">test</ApplicationMenu>,
+                <GlobalHeader appTitleDesktop="test">test</GlobalHeader>,
                 { wrappingComponentProps: { staticDevice: 'mobile' } },
             );
 
diff --git a/packages/react/src/components/application-menu/application-menu.test.tsx.snap b/packages/react/src/components/global-header/global-header.test.tsx.snap
similarity index 96%
rename from packages/react/src/components/application-menu/application-menu.test.tsx.snap
rename to packages/react/src/components/global-header/global-header.test.tsx.snap
index c1dfdefc73..5b1f10a043 100644
--- a/packages/react/src/components/application-menu/application-menu.test.tsx.snap
+++ b/packages/react/src/components/global-header/global-header.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Application Menu Matches the snapshot (desktop) 1`] = `
+exports[`Global Header Matches the snapshot (desktop) 1`] = `
 .c2 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -95,7 +95,7 @@ exports[`Application Menu Matches the snapshot (desktop) 1`] = `
 </header>
 `;
 
-exports[`Application Menu Matches the snapshot (mobile) 1`] = `
+exports[`Global Header Matches the snapshot (mobile) 1`] = `
 .c4 {
   background-color: #FFFFFF;
   box-shadow: 0 6px 10px 0 rgba(0,0,0,0.1);
@@ -234,7 +234,7 @@ exports[`Application Menu Matches the snapshot (mobile) 1`] = `
 </header>
 `;
 
-exports[`Application Menu mobileDrawerContent prop adds a side drawer and burger button in mobile 1`] = `
+exports[`Global Header mobileDrawerContent prop adds a side drawer and burger button in mobile 1`] = `
 .c4 {
   background-color: #FFFFFF;
   box-shadow: 0 6px 10px 0 rgba(0,0,0,0.1);
diff --git a/packages/react/src/components/application-menu/application-menu.tsx b/packages/react/src/components/global-header/global-header.tsx
similarity index 96%
rename from packages/react/src/components/application-menu/application-menu.tsx
rename to packages/react/src/components/global-header/global-header.tsx
index 830a3d5d8e..1946b676c8 100644
--- a/packages/react/src/components/application-menu/application-menu.tsx
+++ b/packages/react/src/components/global-header/global-header.tsx
@@ -4,7 +4,7 @@ import styled, { css } from 'styled-components';
 import { focus } from '../../utils/css-state';
 import { DeviceType, useDeviceContext } from '../device-context-provider/device-context-provider';
 import { SkipLink, SkipLinkProps } from '../skip-link/skip-link';
-import { Content } from './application-menu-content';
+import { Content } from './global-header-content';
 import { Logo, LogoName } from './logo';
 
 const getPadding = (device: DeviceType): string => {
@@ -79,7 +79,7 @@ const StyledSkipLink = styled(SkipLink)<ComponentProps<typeof SkipLink> & { isMo
     }
 `;
 
-interface ApplicationMenuProps {
+interface GlobalHeaderProps {
     /** Set the app name to get the proper logos */
     appName?: LogoName;
     /** Sets app title which appears next to logo on desktop */
@@ -99,7 +99,7 @@ interface ApplicationMenuProps {
     usesReactRouter?: boolean;
 }
 
-export function ApplicationMenu({
+export function GlobalHeader({
     appName = 'default',
     appTitleDesktop,
     children,
@@ -109,7 +109,7 @@ export function ApplicationMenu({
     mobileDrawerContent,
     skipLink,
     usesReactRouter = true,
-}: ApplicationMenuProps): ReactElement {
+}: GlobalHeaderProps): ReactElement {
     const { device, isMobile } = useDeviceContext();
     const appLogo = customLogo ?? <Logo name={appName} mobile={isMobile} />;
 
diff --git a/packages/react/src/components/application-menu/logo.tsx b/packages/react/src/components/global-header/logo.tsx
similarity index 100%
rename from packages/react/src/components/application-menu/logo.tsx
rename to packages/react/src/components/global-header/logo.tsx
diff --git a/packages/react/src/components/global-navigation/global-navigation.test.tsx b/packages/react/src/components/global-navigation/global-navigation.test.tsx
index 7c022208e9..d9ef8c5034 100644
--- a/packages/react/src/components/global-navigation/global-navigation.test.tsx
+++ b/packages/react/src/components/global-navigation/global-navigation.test.tsx
@@ -1,8 +1,8 @@
 import { shallow } from 'enzyme';
+import { getByTestId } from '../../test-utils/enzyme-selectors';
 import { mountWithProviders, renderWithProviders } from '../../test-utils/renderer';
-import { GlobalNavigation, GlobalNavigationItem } from './global-navigation';
 import { IconButtonProps } from '../buttons/icon-button';
-import { getByTestId } from '../../test-utils/enzyme-selectors';
+import { GlobalNavigation, GlobalNavigationItem } from './global-navigation';
 
 const items: GlobalNavigationItem[] = [
     {
diff --git a/packages/react/src/components/global-navigation/global-navigation.tsx b/packages/react/src/components/global-navigation/global-navigation.tsx
index 6ab706cbc3..9ba58bf49c 100644
--- a/packages/react/src/components/global-navigation/global-navigation.tsx
+++ b/packages/react/src/components/global-navigation/global-navigation.tsx
@@ -3,8 +3,8 @@ import { NavLink, NavLinkProps } from 'react-router-dom';
 import styled from 'styled-components';
 import { focus } from '../../utils/css-state';
 import { eventIsInside } from '../../utils/events';
+import { IconButton, IconButtonProps } from '../buttons/icon-button';
 import { Icon, IconName } from '../icon/icon';
-import { IconButtonProps, IconButton } from '../buttons/icon-button';
 
 /* TODO change when updating thematization */
 const lightBlue = '#E0F0F9';
diff --git a/packages/react/src/components/label/label.test.tsx b/packages/react/src/components/label/label.test.tsx
index b95bee1794..1cc1f09c8e 100644
--- a/packages/react/src/components/label/label.test.tsx
+++ b/packages/react/src/components/label/label.test.tsx
@@ -1,6 +1,6 @@
 import { mountWithTheme, renderWithTheme } from '../../test-utils/renderer';
-import { Label } from './label';
 import { Tooltip } from '../tooltip/tooltip';
+import { Label } from './label';
 
 describe('Label', () => {
     test('contains tooltip when tooltip prop is defined', () => {
diff --git a/packages/react/src/components/lozenge/lozenge.test.tsx b/packages/react/src/components/lozenge/lozenge.test.tsx
index 11903b519a..119412876f 100644
--- a/packages/react/src/components/lozenge/lozenge.test.tsx
+++ b/packages/react/src/components/lozenge/lozenge.test.tsx
@@ -1,7 +1,7 @@
 import { shallow } from 'enzyme';
 import { getByTestId } from '../../test-utils/enzyme-selectors';
-import { Lozenge } from './lozenge';
 import { renderWithTheme } from '../../test-utils/renderer';
+import { Lozenge } from './lozenge';
 
 describe('Lozenge', () => {
     test('has icon when icon prop is specified', () => {
diff --git a/packages/react/src/components/menu-button/menu-button.test.tsx b/packages/react/src/components/menu-button/menu-button.test.tsx
index c436a51dc9..4da2ac2521 100644
--- a/packages/react/src/components/menu-button/menu-button.test.tsx
+++ b/packages/react/src/components/menu-button/menu-button.test.tsx
@@ -2,10 +2,10 @@ import { shallow } from 'enzyme';
 import { getByTestId } from '../../test-utils/enzyme-selectors';
 import { waitForComponentToPaint } from '../../test-utils/enzyme-utils';
 import { mountWithTheme } from '../../test-utils/renderer';
-import { MenuOption } from '../menu/menu';
-import { MenuButton } from './menu-button';
 import { Button } from '../buttons/button';
 import { IconButton } from '../buttons/icon-button';
+import { MenuOption } from '../menu/menu';
+import { MenuButton } from './menu-button';
 
 function givenOptions(): MenuOption[] {
     return [
diff --git a/packages/react/src/components/menu-button/menu-button.tsx b/packages/react/src/components/menu-button/menu-button.tsx
index df9e3f4cde..515255bb71 100644
--- a/packages/react/src/components/menu-button/menu-button.tsx
+++ b/packages/react/src/components/menu-button/menu-button.tsx
@@ -1,11 +1,11 @@
 import { FunctionComponent, KeyboardEvent, useState } from 'react';
-import styled from 'styled-components';
 import { usePopperTooltip } from 'react-popper-tooltip';
-import { Menu, MenuOption } from '../menu/menu';
+import styled from 'styled-components';
+import { menuDimensions } from '../../tokens/menuDimensions';
 import { Button, ButtonType } from '../buttons/button';
-import { Icon, IconName } from '../icon/icon';
 import { IconButton } from '../buttons/icon-button';
-import { menuDimensions } from '../../tokens/menuDimensions';
+import { Icon, IconName } from '../icon/icon';
+import { Menu, MenuOption } from '../menu/menu';
 
 const StyledMenu = styled(Menu)`
     max-width: ${menuDimensions.maxWidth};
diff --git a/packages/react/src/components/menu/menu.tsx b/packages/react/src/components/menu/menu.tsx
index d097341629..c6b2224ad9 100644
--- a/packages/react/src/components/menu/menu.tsx
+++ b/packages/react/src/components/menu/menu.tsx
@@ -1,8 +1,8 @@
 import {
     createRef,
-    KeyboardEvent,
     forwardRef,
     Fragment,
+    KeyboardEvent,
     ReactElement,
     Ref,
     RefObject,
@@ -12,10 +12,10 @@ import {
     useState,
 } from 'react';
 import styled from 'styled-components';
-import { v4 as uuid } from '../../utils/uuid';
+import { getNextElementInArray, getPreviousElementInArray } from '../../utils/array';
 import { isLetterOrNumber } from '../../utils/regex';
+import { v4 as uuid } from '../../utils/uuid';
 import { DeviceContextProps, useDeviceContext } from '../device-context-provider/device-context-provider';
-import { getNextElementInArray, getPreviousElementInArray } from '../../utils/array';
 import { Icon } from '../icon/icon';
 
 function getMaxHeight(numberOfVisibleItems: number): string {
diff --git a/packages/react/src/components/modal/modal-dialog.test.tsx b/packages/react/src/components/modal/modal-dialog.test.tsx
index 4e5eebf486..929feb6b9e 100644
--- a/packages/react/src/components/modal/modal-dialog.test.tsx
+++ b/packages/react/src/components/modal/modal-dialog.test.tsx
@@ -1,9 +1,9 @@
 import { fireEvent, RenderResult } from '@testing-library/react';
 import { doNothing } from '../../test-utils/callbacks';
-import { DeviceType } from '../device-context-provider/device-context-provider';
-import { ModalDialog, ModalDialogProps } from './modal-dialog';
 import { getByTestId as enzymeGetByTestId } from '../../test-utils/enzyme-selectors';
 import { mountWithProviders, renderPortalWithProviders } from '../../test-utils/renderer';
+import { DeviceType } from '../device-context-provider/device-context-provider';
+import { ModalDialog, ModalDialogProps } from './modal-dialog';
 
 jest.mock('../../utils/uuid');
 
diff --git a/packages/react/src/components/modal/modal-dialog.test.tsx.snap b/packages/react/src/components/modal/modal-dialog.test.tsx.snap
index 6919568c1b..5823040c50 100644
--- a/packages/react/src/components/modal/modal-dialog.test.tsx.snap
+++ b/packages/react/src/components/modal/modal-dialog.test.tsx.snap
@@ -110,6 +110,41 @@ exports[`Modal-Dialog Matches snapshot (custom button labels) 1`] = `
   color: inherit;
 }
 
+.c12 {
+  background-color: transparent;
+  border-color: transparent;
+  color: #60666E;
+  padding: 0;
+  width: 32px;
+}
+
+.c12:focus {
+  outline: none;
+}
+
+.c12:focus {
+  outline: none;
+  border-color: #006296;
+  box-shadow: 0 0 0 2px #84C6EA;
+}
+
+.c12:hover,
+.c12[aria-expanded="true"] {
+  background-color: #DBDEE1;
+  color: #000000;
+}
+
+.c12:disabled {
+  background-color: transparent;
+  color: #B7BBC2;
+}
+
+.c12:focus {
+  background-color: #FFFFFF;
+  border-color: #006296;
+  color: #60666E;
+}
+
 .c9 {
   background-color: #006296;
   border-color: #006296;
@@ -170,39 +205,11 @@ exports[`Modal-Dialog Matches snapshot (custom button labels) 1`] = `
   color: #60666E;
 }
 
-.c12 {
-  background-color: transparent;
-  border-color: transparent;
-  color: #60666E;
-  padding: 0;
-  width: 32px;
-}
-
-.c12:focus {
-  outline: none;
-}
-
-.c12:focus {
-  outline: none;
-  border-color: #006296;
-  box-shadow: 0 0 0 2px #84C6EA;
-}
-
-.c12:hover,
-.c12[aria-expanded="true"] {
-  background-color: #DBDEE1;
-  color: #000000;
-}
-
-.c12:disabled {
-  background-color: transparent;
-  color: #B7BBC2;
-}
-
-.c12:focus {
-  background-color: #FFFFFF;
-  border-color: #006296;
-  color: #60666E;
+.c2 {
+  font-size: 1.5rem;
+  font-weight: var(--font-normal);
+  line-height: 2.25rem;
+  margin: 0;
 }
 
 .c0 {
@@ -263,13 +270,6 @@ exports[`Modal-Dialog Matches snapshot (custom button labels) 1`] = `
   padding: var(--spacing-5x) var(--spacing-4x) 0;
 }
 
-.c2 {
-  font-size: 1.5rem;
-  font-weight: var(--font-normal);
-  line-height: 2.25rem;
-  margin: 0;
-}
-
 .c3 {
   font-size: 1rem;
   font-weight: var(--font-normal);
@@ -678,6 +678,41 @@ exports[`Modal-Dialog Matches snapshot (not titles) 1`] = `
   color: inherit;
 }
 
+.c8 {
+  background-color: transparent;
+  border-color: transparent;
+  color: #60666E;
+  padding: 0;
+  width: 32px;
+}
+
+.c8:focus {
+  outline: none;
+}
+
+.c8:focus {
+  outline: none;
+  border-color: #006296;
+  box-shadow: 0 0 0 2px #84C6EA;
+}
+
+.c8:hover,
+.c8[aria-expanded="true"] {
+  background-color: #DBDEE1;
+  color: #000000;
+}
+
+.c8:disabled {
+  background-color: transparent;
+  color: #B7BBC2;
+}
+
+.c8:focus {
+  background-color: #FFFFFF;
+  border-color: #006296;
+  color: #60666E;
+}
+
 .c5 {
   background-color: #006296;
   border-color: #006296;
@@ -738,41 +773,6 @@ exports[`Modal-Dialog Matches snapshot (not titles) 1`] = `
   color: #60666E;
 }
 
-.c8 {
-  background-color: transparent;
-  border-color: transparent;
-  color: #60666E;
-  padding: 0;
-  width: 32px;
-}
-
-.c8:focus {
-  outline: none;
-}
-
-.c8:focus {
-  outline: none;
-  border-color: #006296;
-  box-shadow: 0 0 0 2px #84C6EA;
-}
-
-.c8:hover,
-.c8[aria-expanded="true"] {
-  background-color: #DBDEE1;
-  color: #000000;
-}
-
-.c8:disabled {
-  background-color: transparent;
-  color: #B7BBC2;
-}
-
-.c8:focus {
-  background-color: #FFFFFF;
-  border-color: #006296;
-  color: #60666E;
-}
-
 .c0 {
   background-color: #FFFFFF;
   border: 1px solid #60666E;
@@ -989,6 +989,41 @@ exports[`Modal-Dialog Matches snapshot (only subtitle) 1`] = `
   color: inherit;
 }
 
+.c11 {
+  background-color: transparent;
+  border-color: transparent;
+  color: #60666E;
+  padding: 0;
+  width: 32px;
+}
+
+.c11:focus {
+  outline: none;
+}
+
+.c11:focus {
+  outline: none;
+  border-color: #006296;
+  box-shadow: 0 0 0 2px #84C6EA;
+}
+
+.c11:hover,
+.c11[aria-expanded="true"] {
+  background-color: #DBDEE1;
+  color: #000000;
+}
+
+.c11:disabled {
+  background-color: transparent;
+  color: #B7BBC2;
+}
+
+.c11:focus {
+  background-color: #FFFFFF;
+  border-color: #006296;
+  color: #60666E;
+}
+
 .c8 {
   background-color: #006296;
   border-color: #006296;
@@ -1049,41 +1084,6 @@ exports[`Modal-Dialog Matches snapshot (only subtitle) 1`] = `
   color: #60666E;
 }
 
-.c11 {
-  background-color: transparent;
-  border-color: transparent;
-  color: #60666E;
-  padding: 0;
-  width: 32px;
-}
-
-.c11:focus {
-  outline: none;
-}
-
-.c11:focus {
-  outline: none;
-  border-color: #006296;
-  box-shadow: 0 0 0 2px #84C6EA;
-}
-
-.c11:hover,
-.c11[aria-expanded="true"] {
-  background-color: #DBDEE1;
-  color: #000000;
-}
-
-.c11:disabled {
-  background-color: transparent;
-  color: #B7BBC2;
-}
-
-.c11:focus {
-  background-color: #FFFFFF;
-  border-color: #006296;
-  color: #60666E;
-}
-
 .c0 {
   background-color: #FFFFFF;
   border: 1px solid #60666E;
@@ -1326,6 +1326,41 @@ exports[`Modal-Dialog Matches snapshot (only title) 1`] = `
   color: inherit;
 }
 
+.c11 {
+  background-color: transparent;
+  border-color: transparent;
+  color: #60666E;
+  padding: 0;
+  width: 32px;
+}
+
+.c11:focus {
+  outline: none;
+}
+
+.c11:focus {
+  outline: none;
+  border-color: #006296;
+  box-shadow: 0 0 0 2px #84C6EA;
+}
+
+.c11:hover,
+.c11[aria-expanded="true"] {
+  background-color: #DBDEE1;
+  color: #000000;
+}
+
+.c11:disabled {
+  background-color: transparent;
+  color: #B7BBC2;
+}
+
+.c11:focus {
+  background-color: #FFFFFF;
+  border-color: #006296;
+  color: #60666E;
+}
+
 .c8 {
   background-color: #006296;
   border-color: #006296;
@@ -1386,39 +1421,11 @@ exports[`Modal-Dialog Matches snapshot (only title) 1`] = `
   color: #60666E;
 }
 
-.c11 {
-  background-color: transparent;
-  border-color: transparent;
-  color: #60666E;
-  padding: 0;
-  width: 32px;
-}
-
-.c11:focus {
-  outline: none;
-}
-
-.c11:focus {
-  outline: none;
-  border-color: #006296;
-  box-shadow: 0 0 0 2px #84C6EA;
-}
-
-.c11:hover,
-.c11[aria-expanded="true"] {
-  background-color: #DBDEE1;
-  color: #000000;
-}
-
-.c11:disabled {
-  background-color: transparent;
-  color: #B7BBC2;
-}
-
-.c11:focus {
-  background-color: #FFFFFF;
-  border-color: #006296;
-  color: #60666E;
+.c2 {
+  font-size: 1.5rem;
+  font-weight: var(--font-normal);
+  line-height: 2.25rem;
+  margin: 0;
 }
 
 .c0 {
@@ -1479,13 +1486,6 @@ exports[`Modal-Dialog Matches snapshot (only title) 1`] = `
   padding: var(--spacing-5x) var(--spacing-4x) 0;
 }
 
-.c2 {
-  font-size: 1.5rem;
-  font-weight: var(--font-normal);
-  line-height: 2.25rem;
-  margin: 0;
-}
-
 .c6 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1634,6 +1634,49 @@ exports[`Modal-Dialog Matches snapshot (opened, desktop) 1`] = `
   color: inherit;
 }
 
+.c13 {
+  background-color: transparent;
+  border-color: transparent;
+  color: #60666E;
+  padding: 0;
+  width: 32px;
+}
+
+.c13:focus {
+  outline: none;
+}
+
+.c13:focus {
+  outline: none;
+  border-color: #006296;
+  box-shadow: 0 0 0 2px #84C6EA;
+}
+
+.c13:hover,
+.c13[aria-expanded="true"] {
+  background-color: #DBDEE1;
+  color: #000000;
+}
+
+.c13:disabled {
+  background-color: transparent;
+  color: #B7BBC2;
+}
+
+.c13:focus {
+  background-color: #FFFFFF;
+  border-color: #006296;
+  color: #60666E;
+}
+
+.c0 {
+  box-sizing: border-box;
+  position: fixed;
+  z-index: 100000;
+  bottom: var(--spacing-2x);
+  right: var(--spacing-2x);
+}
+
 .c10 {
   background-color: #006296;
   border-color: #006296;
@@ -1694,39 +1737,11 @@ exports[`Modal-Dialog Matches snapshot (opened, desktop) 1`] = `
   color: #60666E;
 }
 
-.c13 {
-  background-color: transparent;
-  border-color: transparent;
-  color: #60666E;
-  padding: 0;
-  width: 32px;
-}
-
-.c13:focus {
-  outline: none;
-}
-
-.c13:focus {
-  outline: none;
-  border-color: #006296;
-  box-shadow: 0 0 0 2px #84C6EA;
-}
-
-.c13:hover,
-.c13[aria-expanded="true"] {
-  background-color: #DBDEE1;
-  color: #000000;
-}
-
-.c13:disabled {
-  background-color: transparent;
-  color: #B7BBC2;
-}
-
-.c13:focus {
-  background-color: #FFFFFF;
-  border-color: #006296;
-  color: #60666E;
+.c3 {
+  font-size: 1.5rem;
+  font-weight: var(--font-normal);
+  line-height: 2.25rem;
+  margin: 0;
 }
 
 .c1 {
@@ -1787,13 +1802,6 @@ exports[`Modal-Dialog Matches snapshot (opened, desktop) 1`] = `
   padding: var(--spacing-5x) var(--spacing-4x) 0;
 }
 
-.c3 {
-  font-size: 1.5rem;
-  font-weight: var(--font-normal);
-  line-height: 2.25rem;
-  margin: 0;
-}
-
 .c4 {
   font-size: 1rem;
   font-weight: var(--font-normal);
@@ -1817,14 +1825,6 @@ exports[`Modal-Dialog Matches snapshot (opened, desktop) 1`] = `
   margin-right: var(--spacing-1x);
 }
 
-.c0 {
-  box-sizing: border-box;
-  position: fixed;
-  z-index: 100000;
-  bottom: var(--spacing-2x);
-  right: var(--spacing-2x);
-}
-
 <body
   class="ReactModal__Body--open"
   style="overflow: hidden;"
@@ -2009,6 +2009,41 @@ exports[`Modal-Dialog Matches snapshot (opened, mobile) 1`] = `
   color: inherit;
 }
 
+.c12 {
+  background-color: transparent;
+  border-color: transparent;
+  color: #60666E;
+  padding: 0;
+  width: 48px;
+}
+
+.c12:focus {
+  outline: none;
+}
+
+.c12:focus {
+  outline: none;
+  border-color: #006296;
+  box-shadow: 0 0 0 2px #84C6EA;
+}
+
+.c12:hover,
+.c12[aria-expanded="true"] {
+  background-color: #DBDEE1;
+  color: #000000;
+}
+
+.c12:disabled {
+  background-color: transparent;
+  color: #B7BBC2;
+}
+
+.c12:focus {
+  background-color: #FFFFFF;
+  border-color: #006296;
+  color: #60666E;
+}
+
 .c9 {
   background-color: #006296;
   border-color: #006296;
@@ -2069,39 +2104,11 @@ exports[`Modal-Dialog Matches snapshot (opened, mobile) 1`] = `
   color: #60666E;
 }
 
-.c12 {
-  background-color: transparent;
-  border-color: transparent;
-  color: #60666E;
-  padding: 0;
-  width: 48px;
-}
-
-.c12:focus {
-  outline: none;
-}
-
-.c12:focus {
-  outline: none;
-  border-color: #006296;
-  box-shadow: 0 0 0 2px #84C6EA;
-}
-
-.c12:hover,
-.c12[aria-expanded="true"] {
-  background-color: #DBDEE1;
-  color: #000000;
-}
-
-.c12:disabled {
-  background-color: transparent;
-  color: #B7BBC2;
-}
-
-.c12:focus {
-  background-color: #FFFFFF;
-  border-color: #006296;
-  color: #60666E;
+.c2 {
+  font-size: 1.5rem;
+  font-weight: var(--font-normal);
+  line-height: 2.25rem;
+  margin: 0;
 }
 
 .c0 {
@@ -2162,13 +2169,6 @@ exports[`Modal-Dialog Matches snapshot (opened, mobile) 1`] = `
   padding: var(--spacing-5x) var(--spacing-2x) 0;
 }
 
-.c2 {
-  font-size: 1.5rem;
-  font-weight: var(--font-normal);
-  line-height: 2.25rem;
-  margin: 0;
-}
-
 .c3 {
   font-size: 1.125rem;
   font-weight: var(--font-normal);
diff --git a/packages/react/src/components/modal/modal-dialog.tsx b/packages/react/src/components/modal/modal-dialog.tsx
index 68a49b6d4a..7805e4291d 100644
--- a/packages/react/src/components/modal/modal-dialog.tsx
+++ b/packages/react/src/components/modal/modal-dialog.tsx
@@ -4,9 +4,9 @@ import { useTranslation } from '../../i18n/use-translation';
 import { v4 as uuid } from '../../utils/uuid';
 import { Button } from '../buttons/button';
 import { DeviceContextProps, useDeviceContext } from '../device-context-provider/device-context-provider';
-import { Modal } from './modal';
 import { Heading } from '../heading/heading';
 import { Icon, IconName } from '../icon/icon';
+import { Modal } from './modal';
 
 type MobileDeviceContextProps = Pick<DeviceContextProps, 'isMobile'>
 
diff --git a/packages/react/src/components/nav-menu-button/nav-menu-button.test.tsx b/packages/react/src/components/nav-menu-button/nav-menu-button.test.tsx
index ee1a0b08a2..b6e40b698d 100644
--- a/packages/react/src/components/nav-menu-button/nav-menu-button.test.tsx
+++ b/packages/react/src/components/nav-menu-button/nav-menu-button.test.tsx
@@ -1,11 +1,8 @@
 import { shallow } from 'enzyme';
 import { getByTestId } from '../../test-utils/enzyme-selectors';
-import {
-    mountWithProviders,
-    renderWithProviders,
-} from '../../test-utils/renderer';
-import { NavMenuButton } from './nav-menu-button';
+import { mountWithProviders, renderWithProviders } from '../../test-utils/renderer';
 import { IconButton } from '../buttons/icon-button';
+import { NavMenuButton } from './nav-menu-button';
 
 jest.mock('../../utils/uuid');
 
diff --git a/packages/react/src/components/pagination/pagination.tsx b/packages/react/src/components/pagination/pagination.tsx
index b6943ade34..327c853797 100644
--- a/packages/react/src/components/pagination/pagination.tsx
+++ b/packages/react/src/components/pagination/pagination.tsx
@@ -1,4 +1,4 @@
-import { ReactElement, useState, VoidFunctionComponent, useEffect } from 'react';
+import { ReactElement, useEffect, useState, VoidFunctionComponent } from 'react';
 import styled from 'styled-components';
 import { useTranslation } from '../../i18n/use-translation';
 import { focus } from '../../utils/css-state';
diff --git a/packages/react/src/components/phone-input/phone-input.tsx b/packages/react/src/components/phone-input/phone-input.tsx
index 1c80d61875..99978e528f 100644
--- a/packages/react/src/components/phone-input/phone-input.tsx
+++ b/packages/react/src/components/phone-input/phone-input.tsx
@@ -1,23 +1,23 @@
 import {
-    useState,
     ChangeEvent,
-    ReactElement,
-    useMemo,
-    useRef,
     KeyboardEvent,
-    useLayoutEffect,
     MouseEvent,
+    ReactElement,
     useCallback,
+    useLayoutEffect,
+    useMemo,
+    useRef,
+    useState,
 } from 'react';
 import styled from 'styled-components';
+import { useDeviceContext } from '../device-context-provider/device-context-provider';
+import { TextInput } from '../text-input/text-input';
 import {
     findNextInsertPositionFromPatternInputDiff,
     getPreviousPlaceholderIndex,
     hasAnyDecimalChar,
 } from './phone-input-char-finder';
-import { formatFromPattern, removeNonDigits, removeDigitOnMaskCharRemoval } from './phone-input-value-formater';
-import { TextInput } from '../text-input/text-input';
-import { useDeviceContext } from '../device-context-provider/device-context-provider';
+import { formatFromPattern, removeDigitOnMaskCharRemoval, removeNonDigits } from './phone-input-value-formater';
 import { getMaskFromSplitIndex, getValueFromSplitIndex, trimCharAfterMaxLength } from './phone-input-value-parser';
 
 interface PhoneInputProps {
diff --git a/packages/react/src/components/route-link/route-link.tsx b/packages/react/src/components/route-link/route-link.tsx
index cdd21fbf34..090d84b9fa 100644
--- a/packages/react/src/components/route-link/route-link.tsx
+++ b/packages/react/src/components/route-link/route-link.tsx
@@ -1,10 +1,10 @@
 import { MouseEvent, ReactElement } from 'react';
-import styled from 'styled-components';
 
 import { NavLink } from 'react-router-dom';
+import styled from 'styled-components';
+import { useDeviceContext } from '../device-context-provider/device-context-provider';
 import { Icon, IconName } from '../icon/icon';
 import { StyledLink } from './styles/styled-link';
-import { useDeviceContext } from '../device-context-provider/device-context-provider';
 
 const Link = styled(StyledLink)<{ $isMobile: boolean, $hasLabel: boolean }>`
     color: ${({ disabled, theme }) => (disabled ? theme.main['primary-1.2'] : theme.main['primary-1.1'])};
diff --git a/packages/react/src/components/search/search-input.tsx b/packages/react/src/components/search/search-input.tsx
index 70ac587eed..f8e789f57f 100644
--- a/packages/react/src/components/search/search-input.tsx
+++ b/packages/react/src/components/search/search-input.tsx
@@ -1,14 +1,6 @@
 import SearchIcon from 'feather-icons/dist/icons/search.svg';
 import XIcon from 'feather-icons/dist/icons/x.svg';
-import {
-    FocusEvent,
-    ChangeEvent,
-    KeyboardEvent,
-    useCallback,
-    useMemo,
-    useRef,
-    VoidFunctionComponent,
-} from 'react';
+import { ChangeEvent, FocusEvent, KeyboardEvent, useCallback, useMemo, useRef, VoidFunctionComponent } from 'react';
 import styled from 'styled-components';
 import { useTranslation } from '../../i18n/use-translation';
 import { Theme } from '../../themes';
diff --git a/packages/react/src/components/sectional-banner/sectional-banner.tsx b/packages/react/src/components/sectional-banner/sectional-banner.tsx
index 23daea08a5..5718266cbc 100644
--- a/packages/react/src/components/sectional-banner/sectional-banner.tsx
+++ b/packages/react/src/components/sectional-banner/sectional-banner.tsx
@@ -1,10 +1,4 @@
-import {
-    ComponentProps,
-    ComponentType,
-    FunctionComponent,
-    useMemo,
-    VoidFunctionComponent,
-} from 'react';
+import { ComponentProps, ComponentType, FunctionComponent, useMemo, VoidFunctionComponent } from 'react';
 import styled, { css, ThemedCssFunction } from 'styled-components';
 import { useTranslation } from '../../i18n/use-translation';
 import { Theme } from '../../themes';
diff --git a/packages/react/src/components/status/status.test.tsx b/packages/react/src/components/status/status.test.tsx
index 8471e8f83d..563634e8ec 100644
--- a/packages/react/src/components/status/status.test.tsx
+++ b/packages/react/src/components/status/status.test.tsx
@@ -1,5 +1,5 @@
-import { Status, StatusType } from './status';
 import { mountWithTheme } from '../../test-utils/renderer';
+import { Status, StatusType } from './status';
 
 const statusTypesArray: StatusType[] = ['enabled', 'disabled', 'blocked'];
 
diff --git a/packages/react/src/components/stepper-input/stepper-input.tsx b/packages/react/src/components/stepper-input/stepper-input.tsx
index bb9a839e70..3fabf18783 100644
--- a/packages/react/src/components/stepper-input/stepper-input.tsx
+++ b/packages/react/src/components/stepper-input/stepper-input.tsx
@@ -1,22 +1,14 @@
-import {
-    ChangeEvent,
-    DetailedHTMLProps,
-    InputHTMLAttributes,
-    ReactElement,
-    RefObject,
-    useRef,
-    useMemo,
-} from 'react';
+import { ChangeEvent, DetailedHTMLProps, InputHTMLAttributes, ReactElement, RefObject, useMemo, useRef } from 'react';
 import styled from 'styled-components';
 
 import { useTranslation } from '../../i18n/use-translation';
-import { Theme } from '../../themes/theme';
+import { Theme } from '../../themes';
 import { v4 as uuid } from '../../utils/uuid';
 import { DeviceContextProps, useDeviceContext } from '../device-context-provider/device-context-provider';
 import { FieldContainer } from '../field-container/field-container';
 import { responsiveInputsStyle } from '../text-input/styles/inputs';
-import { StepperButtons } from './stepper-buttons';
 import { TooltipProps } from '../tooltip/tooltip';
+import { StepperButtons } from './stepper-buttons';
 
 const Wrapper = styled.div`
     display: flex;
diff --git a/packages/react/src/components/table/table.test.tsx.snap b/packages/react/src/components/table/table.test.tsx.snap
index e223984b72..d9e62da59d 100644
--- a/packages/react/src/components/table/table.test.tsx.snap
+++ b/packages/react/src/components/table/table.test.tsx.snap
@@ -889,15 +889,6 @@ exports[`Table has rowNumbers styles 1`] = `
 `;
 
 exports[`Table has selectable rows styles 1`] = `
-.c9 {
-  border-top: 1px solid #DBDEE1;
-  background-color: #FFFFFF;
-}
-
-.c9 td {
-  background-color: inherit;
-}
-
 .c6 {
   color: #FFFFFF;
   display: none;
@@ -984,6 +975,15 @@ exports[`Table has selectable rows styles 1`] = `
   margin-top: var(--spacing-1x);
 }
 
+.c9 {
+  border-top: 1px solid #DBDEE1;
+  background-color: #FFFFFF;
+}
+
+.c9 td {
+  background-color: inherit;
+}
+
 .c0 {
   border-collapse: collapse;
   width: 100%;
diff --git a/packages/react/src/components/table/table.tsx b/packages/react/src/components/table/table.tsx
index 3dd610bbf8..9e70d57910 100644
--- a/packages/react/src/components/table/table.tsx
+++ b/packages/react/src/components/table/table.tsx
@@ -2,6 +2,7 @@ import { ReactElement, useCallback, useEffect, useRef, useState } from 'react';
 import {
     CellProps,
     Column,
+    Hooks,
     Row,
     TableState,
     useRowSelect,
@@ -9,14 +10,13 @@ import {
     useSortBy,
     UseSortByColumnOptions,
     useTable,
-    Hooks,
 } from 'react-table';
 import styled, { css } from 'styled-components';
 import { Theme } from '../../themes';
+import { Checkbox } from '../checkbox/checkbox';
 import { DeviceType, useDeviceContext } from '../device-context-provider/device-context-provider';
 import { SortableColumnHeading } from './sortable-column-heading';
 import { TableRow } from './table-row';
-import { Checkbox } from '../checkbox/checkbox';
 import { calculateStickyPosition } from './utils/table-utils';
 
 type RowSize = 'small' | 'medium';
diff --git a/packages/react/src/components/table/utils/table-utils.test.ts b/packages/react/src/components/table/utils/table-utils.test.ts
index b31a60e187..9f0388d4a7 100644
--- a/packages/react/src/components/table/utils/table-utils.test.ts
+++ b/packages/react/src/components/table/utils/table-utils.test.ts
@@ -1,6 +1,4 @@
-import {
-    calculateStickyColumns, calculateStickyHeader,
-} from './table-utils';
+import { calculateStickyColumns, calculateStickyHeader } from './table-utils';
 
 function getTable(): HTMLTableElement {
     const table: HTMLTableElement = document.createElement('table');
diff --git a/packages/react/src/components/tabs/tab-button.tsx b/packages/react/src/components/tabs/tab-button.tsx
index 29b446a2af..a971949641 100644
--- a/packages/react/src/components/tabs/tab-button.tsx
+++ b/packages/react/src/components/tabs/tab-button.tsx
@@ -1,8 +1,8 @@
-import { KeyboardEvent, ReactElement, forwardRef, Ref } from 'react';
+import { forwardRef, KeyboardEvent, ReactElement, Ref } from 'react';
 import styled, { css } from 'styled-components';
 import { focus, focusVisibleReset } from '../../utils/css-state';
-import { Icon, IconName } from '../icon/icon';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
+import { Icon, IconName } from '../icon/icon';
 
 interface IsSelected {
     $isSelected: boolean;
diff --git a/packages/react/src/components/text-area/text-area.test.tsx b/packages/react/src/components/text-area/text-area.test.tsx
index 2cc916b9e5..64294afea2 100644
--- a/packages/react/src/components/text-area/text-area.test.tsx
+++ b/packages/react/src/components/text-area/text-area.test.tsx
@@ -1,8 +1,8 @@
 import { shallow } from 'enzyme';
 import { doNothing } from '../../test-utils/callbacks';
-import { getByTestId, findByTestId } from '../../test-utils/enzyme-selectors';
-import { TextArea } from './text-area';
+import { findByTestId, getByTestId } from '../../test-utils/enzyme-selectors';
 import { mountWithTheme, renderWithTheme } from '../../test-utils/renderer';
+import { TextArea } from './text-area';
 
 jest.mock('../../utils/uuid');
 
diff --git a/packages/react/src/components/text-area/text-area.tsx b/packages/react/src/components/text-area/text-area.tsx
index 519d0382c1..e3cc76948d 100644
--- a/packages/react/src/components/text-area/text-area.tsx
+++ b/packages/react/src/components/text-area/text-area.tsx
@@ -1,10 +1,10 @@
-import { ChangeEvent, FocusEvent, ReactElement, useState, useMemo } from 'react';
+import { ChangeEvent, FocusEvent, ReactElement, useMemo, useState } from 'react';
 import styled from 'styled-components';
 import { useTranslation } from '../../i18n/use-translation';
+import { Theme } from '../../themes';
 import { v4 as uuid } from '../../utils/uuid';
 import { FieldContainer } from '../field-container/field-container';
 import { inputsStyle } from '../text-input/styles/inputs';
-import { Theme } from '../../themes';
 import { TooltipProps } from '../tooltip/tooltip';
 
 const StyledTextArea = styled.textarea`
diff --git a/packages/react/src/components/text-input/text-input.tsx b/packages/react/src/components/text-input/text-input.tsx
index 5f87ceaf85..6f85d93560 100644
--- a/packages/react/src/components/text-input/text-input.tsx
+++ b/packages/react/src/components/text-input/text-input.tsx
@@ -19,8 +19,8 @@ import { useTranslation } from '../../i18n/use-translation';
 import { v4 as uuid } from '../../utils/uuid';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
 import { FieldContainer } from '../field-container/field-container';
-import { inputsStyle } from './styles/inputs';
 import { TooltipProps } from '../tooltip/tooltip';
+import { inputsStyle } from './styles/inputs';
 
 const Input = styled.input<{ isMobile: boolean }>`
     ${({ theme, isMobile }) => inputsStyle(theme, isMobile)}
diff --git a/packages/react/src/components/toggle-switch/toggle-switch.test.tsx b/packages/react/src/components/toggle-switch/toggle-switch.test.tsx
index 048387b001..91256d175d 100644
--- a/packages/react/src/components/toggle-switch/toggle-switch.test.tsx
+++ b/packages/react/src/components/toggle-switch/toggle-switch.test.tsx
@@ -1,7 +1,7 @@
 import { shallow } from 'enzyme';
+import { getByTestId } from '../../test-utils/enzyme-selectors';
 import { mountWithProviders, renderWithProviders, renderWithTheme } from '../../test-utils/renderer';
 import { ToggleSwitch } from './toggle-switch';
-import { getByTestId } from '../../test-utils/enzyme-selectors';
 
 jest.mock('../../utils/uuid');
 
diff --git a/packages/react/src/components/toggle-switch/toggle-switch.tsx b/packages/react/src/components/toggle-switch/toggle-switch.tsx
index 5fe9913d66..214de1a7e9 100644
--- a/packages/react/src/components/toggle-switch/toggle-switch.tsx
+++ b/packages/react/src/components/toggle-switch/toggle-switch.tsx
@@ -1,8 +1,8 @@
 import { ReactElement, useMemo } from 'react';
 import styled from 'styled-components';
-import { v4 as uuid } from '../../utils/uuid';
-import { focus } from '../../utils/css-state';
 import { Theme } from '../../themes';
+import { focus } from '../../utils/css-state';
+import { v4 as uuid } from '../../utils/uuid';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
 
 interface StyledLabelProps {
diff --git a/packages/react/src/components/user-profile/user-profile.test.tsx b/packages/react/src/components/user-profile/user-profile.test.tsx
index 7273b67dea..52c82f31ff 100644
--- a/packages/react/src/components/user-profile/user-profile.test.tsx
+++ b/packages/react/src/components/user-profile/user-profile.test.tsx
@@ -1,7 +1,7 @@
-import { mountWithProviders, renderWithProviders } from '../../test-utils/renderer';
-import { UserProfile, getFirstFocusableItem } from './user-profile';
 import { getByTestId } from '../../test-utils/enzyme-selectors';
+import { mountWithProviders, renderWithProviders } from '../../test-utils/renderer';
 import { NavItemProps } from '../dropdown-menu/list-items';
+import { getFirstFocusableItem, UserProfile } from './user-profile';
 
 jest.mock('../../utils/uuid');
 
diff --git a/packages/react/src/components/user-profile/user-profile.test.tsx.snap b/packages/react/src/components/user-profile/user-profile.test.tsx.snap
index cbf9d54b02..fcc48eb058 100644
--- a/packages/react/src/components/user-profile/user-profile.test.tsx.snap
+++ b/packages/react/src/components/user-profile/user-profile.test.tsx.snap
@@ -86,17 +86,6 @@ exports[`UserProfile Matches Snapshot (defaultOpen) 1`] = `
   width: 24px;
 }
 
-.c7 {
-  background-color: #FFFFFF;
-  border: 1px solid #60666E;
-  border-radius: var(--border-radius);
-  box-shadow: 0 10px 20px 0 rgba(0,0,0,0.19);
-  color: #000000;
-  list-style-type: none;
-  position: absolute;
-  width: 100%;
-}
-
 .c2 {
   background-color: transparent;
   border-color: transparent;
@@ -130,6 +119,17 @@ exports[`UserProfile Matches Snapshot (defaultOpen) 1`] = `
   color: #FFFFFF;
 }
 
+.c7 {
+  background-color: #FFFFFF;
+  border: 1px solid #60666E;
+  border-radius: var(--border-radius);
+  box-shadow: 0 10px 20px 0 rgba(0,0,0,0.19);
+  color: #000000;
+  list-style-type: none;
+  position: absolute;
+  width: 100%;
+}
+
 .c0 {
   position: relative;
 }
@@ -575,17 +575,6 @@ exports[`UserProfile Matches Snapshot (desktop) 1`] = `
   width: 24px;
 }
 
-.c7 {
-  background-color: #FFFFFF;
-  border: 1px solid #60666E;
-  border-radius: var(--border-radius);
-  box-shadow: 0 10px 20px 0 rgba(0,0,0,0.19);
-  color: #000000;
-  list-style-type: none;
-  position: absolute;
-  width: 100%;
-}
-
 .c2 {
   background-color: transparent;
   border-color: transparent;
@@ -619,6 +608,17 @@ exports[`UserProfile Matches Snapshot (desktop) 1`] = `
   color: #FFFFFF;
 }
 
+.c7 {
+  background-color: #FFFFFF;
+  border: 1px solid #60666E;
+  border-radius: var(--border-radius);
+  box-shadow: 0 10px 20px 0 rgba(0,0,0,0.19);
+  color: #000000;
+  list-style-type: none;
+  position: absolute;
+  width: 100%;
+}
+
 .c0 {
   position: relative;
 }
@@ -1545,17 +1545,6 @@ exports[`UserProfile Matches Snapshot (tag="nav") 1`] = `
   width: 24px;
 }
 
-.c7 {
-  background-color: #FFFFFF;
-  border: 1px solid #60666E;
-  border-radius: var(--border-radius);
-  box-shadow: 0 10px 20px 0 rgba(0,0,0,0.19);
-  color: #000000;
-  list-style-type: none;
-  position: absolute;
-  width: 100%;
-}
-
 .c2 {
   background-color: transparent;
   border-color: transparent;
@@ -1589,6 +1578,17 @@ exports[`UserProfile Matches Snapshot (tag="nav") 1`] = `
   color: #FFFFFF;
 }
 
+.c7 {
+  background-color: #FFFFFF;
+  border: 1px solid #60666E;
+  border-radius: var(--border-radius);
+  box-shadow: 0 10px 20px 0 rgba(0,0,0,0.19);
+  color: #000000;
+  list-style-type: none;
+  position: absolute;
+  width: 100%;
+}
+
 .c0 {
   position: relative;
 }
diff --git a/packages/react/src/hooks/use-id.ts b/packages/react/src/hooks/use-id.ts
index b4830313eb..b43af1b185 100644
--- a/packages/react/src/hooks/use-id.ts
+++ b/packages/react/src/hooks/use-id.ts
@@ -1,4 +1,4 @@
-import { useRef, useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 
 const INITIAL_VALUE = 1;
 
diff --git a/packages/react/src/icons/alert-filled.svg b/packages/react/src/icons/alert-filled.svg
index 6aa87633ec..f89e973a5c 100644
--- a/packages/react/src/icons/alert-filled.svg
+++ b/packages/react/src/icons/alert-filled.svg
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <title>Icon/Alert-filled</title>
     <g id="Assets" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g transform="translate(-103.000000, -183.000000)" id="Group">
diff --git a/packages/react/src/icons/warning-filled.svg b/packages/react/src/icons/warning-filled.svg
index 28771c64fa..adeb8d706c 100644
--- a/packages/react/src/icons/warning-filled.svg
+++ b/packages/react/src/icons/warning-filled.svg
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg viewBox="0 0 16 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg viewBox="0 0 16 14" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <title>Icon/Warning-filled</title>
     <g id="Assets" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g transform="translate(-142.000000, -183.000000)" id="Group">
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index c61ae6a714..ecb12429ec 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -42,8 +42,10 @@ export { ChooserCard } from './components/chooser-card/chooser-card';
 export { EnsoSpinner } from './components/enso-spinner/enso-spinner';
 export { ExternalLink } from './components/external-link/external-link';
 export { Heading } from './components/heading/heading';
-export { ApplicationMenu } from './components/application-menu/application-menu';
+export { GlobalHeader } from './components/global-header/global-header';
 export { DropdownMenuButton } from './components/dropdown-menu-button/dropdown-menu-button';
+export { ExternalItemProps } from './components/dropdown-menu/list-items/external-item';
+export { NavItemProps } from './components/dropdown-menu/list-items/nav-item';
 export { Icon } from './components/icon/icon';
 export { SectionalBanner, SectionalBannerType } from './components/sectional-banner/sectional-banner';
 export * from './components/progress/progress';
diff --git a/packages/react/src/test-utils/enzyme-utils.ts b/packages/react/src/test-utils/enzyme-utils.ts
index 0f464c5587..08c3ce2e34 100644
--- a/packages/react/src/test-utils/enzyme-utils.ts
+++ b/packages/react/src/test-utils/enzyme-utils.ts
@@ -1,5 +1,5 @@
-import { act } from 'react-dom/test-utils';
 import { ReactWrapper } from 'enzyme';
+import { act } from 'react-dom/test-utils';
 
 export async function waitForComponentToPaint<P = {}>(
     wrapper: ReactWrapper<P>,
diff --git a/packages/react/src/test-utils/renderer.tsx b/packages/react/src/test-utils/renderer.tsx
index 90046a13a7..0bfc8979bb 100644
--- a/packages/react/src/test-utils/renderer.tsx
+++ b/packages/react/src/test-utils/renderer.tsx
@@ -1,9 +1,9 @@
+import { render as testingLibRender, RenderResult } from '@testing-library/react';
 import { CommonWrapper, mount, MountRendererProps, ReactWrapper, render } from 'enzyme';
 import { Component, FunctionComponent, ReactElement, ReactPortal } from 'react';
 import ReactDOM from 'react-dom';
 import { act } from 'react-dom/test-utils';
 import { MemoryRouter } from 'react-router-dom';
-import { render as testingLibRender, RenderResult } from '@testing-library/react';
 import { DesignSystem, DesignSystemProps } from '../components/design-system';
 import { DeviceType } from '../components/device-context-provider/device-context-provider';
 import { ThemeWrapper } from '../components/theme-wrapper/theme-wrapper';
diff --git a/packages/storybook/stories/avatar.stories.tsx b/packages/storybook/stories/avatar.stories.tsx
index 665e5bff42..394743aabd 100644
--- a/packages/storybook/stories/avatar.stories.tsx
+++ b/packages/storybook/stories/avatar.stories.tsx
@@ -1,7 +1,7 @@
 import { Avatar } from '@equisoft/design-elements-react';
 import { Story } from '@storybook/react';
-import { DesktopDecorator, MobileDecorator } from './utils/device-context-decorator';
 import AvatarImg from './assets/avatars.png';
+import { DesktopDecorator, MobileDecorator } from './utils/device-context-decorator';
 
 export default {
     title: 'Data/Avatar',
diff --git a/packages/storybook/stories/bento-menu-button.stories.tsx b/packages/storybook/stories/bento-menu-button.stories.tsx
index b0f9496db0..3de153849e 100644
--- a/packages/storybook/stories/bento-menu-button.stories.tsx
+++ b/packages/storybook/stories/bento-menu-button.stories.tsx
@@ -1,10 +1,9 @@
-import { ApplicationMenu, BentoMenuButton } from '@equisoft/design-elements-react';
+import { BentoMenuButton, ExternalItemProps, GlobalHeader, NavItemProps } from '@equisoft/design-elements-react';
 import { Story } from '@storybook/react';
 import styled from 'styled-components';
 import { decorateWith } from './utils/decorator';
 import { DesktopDecorator, MobileDecorator } from './utils/device-context-decorator';
 import { RouterDecorator } from './utils/router-decorator';
-import { ExternalItemProps, NavItemProps } from '../../react/src/components/dropdown-menu/list-items';
 
 const StyledDiv = styled.div`
     height: 540px;
@@ -64,21 +63,21 @@ const resources: ExternalItemProps[] = [
 ];
 
 export const Desktop: Story = () => (
-    <ApplicationMenu>
+    <GlobalHeader>
         <BentoMenuButton productLinks={products} externalLinks={resources} />
-    </ApplicationMenu>
+    </GlobalHeader>
 );
 Desktop.decorators = [DesktopDecorator];
 
 export const Mobile: Story = () => (
-    <ApplicationMenu>
+    <GlobalHeader>
         <BentoMenuButton productLinks={products} externalLinks={resources} />
-    </ApplicationMenu>
+    </GlobalHeader>
 );
 Mobile.decorators = [MobileDecorator];
 
 export const WithNavContainer: Story = () => (
-    <ApplicationMenu>
+    <GlobalHeader>
         <BentoMenuButton tag="nav" productLinks={products} externalLinks={resources} />
-    </ApplicationMenu>
+    </GlobalHeader>
 );
diff --git a/packages/storybook/stories/datepicker.stories.tsx b/packages/storybook/stories/datepicker.stories.tsx
index 5b3712a291..6a33a1d9f7 100644
--- a/packages/storybook/stories/datepicker.stories.tsx
+++ b/packages/storybook/stories/datepicker.stories.tsx
@@ -2,8 +2,8 @@ import { Button, Datepicker, DatepickerHandles } from '@equisoft/design-elements
 import { Story } from '@storybook/react';
 import { FormEvent, useRef } from 'react';
 import styled from 'styled-components';
-import { rawCodeParameters } from './utils/parameters';
 import { decorateWith } from './utils/decorator';
+import { rawCodeParameters } from './utils/parameters';
 import { ShadowDomDecorator } from './utils/shadow-dom-decorator';
 
 const Container = styled.div`
diff --git a/packages/storybook/stories/application-menu.stories.tsx b/packages/storybook/stories/global-header.stories.tsx
similarity index 69%
rename from packages/storybook/stories/application-menu.stories.tsx
rename to packages/storybook/stories/global-header.stories.tsx
index 60c59ae3b2..9056bde60f 100644
--- a/packages/storybook/stories/application-menu.stories.tsx
+++ b/packages/storybook/stories/global-header.stories.tsx
@@ -1,4 +1,4 @@
-import { ApplicationMenu, UserProfile } from '@equisoft/design-elements-react';
+import { GlobalHeader, UserProfile } from '@equisoft/design-elements-react';
 import { Story } from '@storybook/react';
 import { ReactElement, VoidFunctionComponent } from 'react';
 import CustomLogoSvg from './assets/customLogo.svg';
@@ -6,8 +6,8 @@ import { MobileDecorator } from './utils/device-context-decorator';
 import { RouterDecorator } from './utils/router-decorator';
 
 export default {
-    title: 'Structure/Application Menu',
-    component: ApplicationMenu,
+    title: 'Structure/Global Header',
+    component: GlobalHeader,
     decorators: [RouterDecorator],
 };
 
@@ -23,46 +23,46 @@ const drawerContent: ReactElement = (
 );
 
 export const Normal: Story = () => (
-    <ApplicationMenu>
+    <GlobalHeader>
         <p>Hello world</p>
-    </ApplicationMenu>
+    </GlobalHeader>
 );
 
 export const WithAppName: Story = () => (
-    <ApplicationMenu appName="analyze">
+    <GlobalHeader appName="analyze">
         <p>Hello world</p>
-    </ApplicationMenu>
+    </GlobalHeader>
 );
 
 const CustomLogo: VoidFunctionComponent = () => <img src={CustomLogoSvg} />;
 
 export const WithCustomLogo: Story = () => (
-    <ApplicationMenu customLogo={<CustomLogo />}>
+    <GlobalHeader customLogo={<CustomLogo />}>
         <p>Hello world</p>
-    </ApplicationMenu>
+    </GlobalHeader>
 );
 
 export const WithAppTitleDesktop: Story = () => (
-    <ApplicationMenu appTitleDesktop="App title">
+    <GlobalHeader appTitleDesktop="App title">
         <p>Hello world</p>
-    </ApplicationMenu>
+    </GlobalHeader>
 );
 
 export const WithMobileDrawer: Story = () => (
-    <ApplicationMenu mobileDrawerContent={drawerContent}>
+    <GlobalHeader mobileDrawerContent={drawerContent}>
         <p>Hello world</p>
-    </ApplicationMenu>
+    </GlobalHeader>
 );
 WithMobileDrawer.decorators = [MobileDecorator];
 
 export const WithSkipLink: Story = () => (
-    <ApplicationMenu skipLink={{ href: '#' }}>
+    <GlobalHeader skipLink={{ href: '#' }}>
         <p>Hello world</p>
-    </ApplicationMenu>
+    </GlobalHeader>
 );
 
 export const WithSkipLinkAndUserProfile: Story = () => (
-    <ApplicationMenu skipLink={{ href: '#' }}>
+    <GlobalHeader skipLink={{ href: '#' }}>
         <p>Hello world</p>
         <UserProfile
             username="Mon user"
@@ -72,11 +72,11 @@ export const WithSkipLinkAndUserProfile: Story = () => (
             },
             ]}
         />
-    </ApplicationMenu>
+    </GlobalHeader>
 );
 
 export const WithoutReactRouter: Story = () => (
-    <ApplicationMenu usesReactRouter={false} logoHref="https://www.google.com/">
+    <GlobalHeader usesReactRouter={false} logoHref="https://www.google.com/">
         <p>Hello world</p>
-    </ApplicationMenu>
+    </GlobalHeader>
 );
diff --git a/packages/storybook/stories/global-navigation.stories.tsx b/packages/storybook/stories/global-navigation.stories.tsx
index 2538fd69ad..6cef26b6ae 100644
--- a/packages/storybook/stories/global-navigation.stories.tsx
+++ b/packages/storybook/stories/global-navigation.stories.tsx
@@ -1,9 +1,9 @@
 import { GlobalNavigation, GlobalNavigationItem } from '@equisoft/design-elements-react';
 import { Story } from '@storybook/react';
 import { IconButtonProps } from '../../react/dist/components/buttons/icon-button';
+import { rawCodeParameters } from './utils/parameters';
 import { RouterDecorator } from './utils/router-decorator';
 import { ShadowDomDecorator } from './utils/shadow-dom-decorator';
-import { rawCodeParameters } from './utils/parameters';
 
 export default {
     title: 'Structure/Global Navigation',
diff --git a/packages/storybook/stories/menu-button.stories.tsx b/packages/storybook/stories/menu-button.stories.tsx
index 259c4e71d6..6d0030b99c 100644
--- a/packages/storybook/stories/menu-button.stories.tsx
+++ b/packages/storybook/stories/menu-button.stories.tsx
@@ -1,6 +1,6 @@
-import styled from 'styled-components';
 import { MenuButton } from '@equisoft/design-elements-react';
 import { Story } from '@storybook/react';
+import styled from 'styled-components';
 import { decorateWith } from './utils/decorator';
 
 const StyledDiv = styled.div`
diff --git a/packages/storybook/stories/nav-menu-button.stories.tsx b/packages/storybook/stories/nav-menu-button.stories.tsx
index d197e75676..4e51b97720 100644
--- a/packages/storybook/stories/nav-menu-button.stories.tsx
+++ b/packages/storybook/stories/nav-menu-button.stories.tsx
@@ -1,4 +1,4 @@
-import { ApplicationMenu, NavMenuButton, NavMenuOption } from '@equisoft/design-elements-react';
+import { GlobalHeader, NavMenuButton, NavMenuOption } from '@equisoft/design-elements-react';
 import { Story } from '@storybook/react';
 import styled from 'styled-components';
 import { decorateWith } from './utils/decorator';
@@ -96,79 +96,79 @@ const optionsDisabled: NavMenuOption[] = [
 ];
 
 export const Desktop: Story = () => (
-    <ApplicationMenu>
+    <GlobalHeader>
         <NavMenuButton options={options}>Menu</NavMenuButton>
-    </ApplicationMenu>
+    </GlobalHeader>
 );
 Desktop.decorators = [DesktopDecorator];
 
 export const DesktopIconOnly: Story = () => (
     <StyledDiv>
-        <ApplicationMenu>
+        <GlobalHeader>
             <NavMenuButton iconOnly iconName="home" options={options} />
-        </ApplicationMenu>
+        </GlobalHeader>
     </StyledDiv>
 );
 DesktopIconOnly.decorators = [DesktopDecorator];
 
 export const DesktopWithIcon: Story = () => (
     <StyledDiv>
-        <ApplicationMenu>
+        <GlobalHeader>
             <NavMenuButton iconName="home" options={options}>Home</NavMenuButton>
-        </ApplicationMenu>
+        </GlobalHeader>
     </StyledDiv>
 );
 DesktopWithIcon.decorators = [DesktopDecorator];
 
 export const DesktopInsideShadowDom: Story = () => (
-    <ApplicationMenu>
+    <GlobalHeader>
         <NavMenuButton options={options}>Menu</NavMenuButton>
-    </ApplicationMenu>
+    </GlobalHeader>
 );
 DesktopInsideShadowDom.decorators = [DesktopDecorator, ShadowDomDecorator];
 
 export const Mobile: Story = () => (
-    <ApplicationMenu>
+    <GlobalHeader>
         <NavMenuButton options={options}>Menu</NavMenuButton>
-    </ApplicationMenu>
+    </GlobalHeader>
 );
 Mobile.decorators = [MobileDecorator];
 
 export const MobileIconOnly: Story = () => (
     <StyledDiv>
-        <ApplicationMenu>
+        <GlobalHeader>
             <NavMenuButton iconOnly iconName="home" options={options} />
-        </ApplicationMenu>
+        </GlobalHeader>
     </StyledDiv>
 );
 MobileIconOnly.decorators = [MobileDecorator];
 
 export const DefaultOpen: Story = () => (
-    <ApplicationMenu>
+    <GlobalHeader>
         <NavMenuButton defaultOpen options={options}>Menu</NavMenuButton>
-    </ApplicationMenu>
+    </GlobalHeader>
 );
 
 export const WithNavContainer: Story = () => (
-    <ApplicationMenu>
+    <GlobalHeader>
         <NavMenuButton tag="nav" options={options}>Menu</NavMenuButton>
-    </ApplicationMenu>
+    </GlobalHeader>
 );
 
 export const WithOptionIcons: Story = () => (
-    <ApplicationMenu>
+    <GlobalHeader>
         <NavMenuButton options={optionsWithIcons}>Menu</NavMenuButton>
-    </ApplicationMenu>
+    </GlobalHeader>
 );
 
 export const WithHtmlLinks: Story = () => (
-    <ApplicationMenu>
+    <GlobalHeader>
         <NavMenuButton options={optionsWithHtmlLinks}>Menu</NavMenuButton>
-    </ApplicationMenu>
+    </GlobalHeader>
 );
 
 export const WithDisabledOptions: Story = () => (
-    <ApplicationMenu>
+    <GlobalHeader>
         <NavMenuButton options={optionsDisabled}>Menu</NavMenuButton>
-    </ApplicationMenu>
+    </GlobalHeader>
 );
diff --git a/packages/storybook/stories/phone-input.stories.tsx b/packages/storybook/stories/phone-input.stories.tsx
index 57d3d9b42b..f8b2cfb003 100644
--- a/packages/storybook/stories/phone-input.stories.tsx
+++ b/packages/storybook/stories/phone-input.stories.tsx
@@ -1,6 +1,5 @@
-import { Story } from '@storybook/react';
-
 import { PhoneInput } from '@equisoft/design-elements-react';
+import { Story } from '@storybook/react';
 import { DesktopDecorator, MobileDecorator } from './utils/device-context-decorator';
 
 export default {
diff --git a/packages/storybook/stories/stepper-input.stories.tsx b/packages/storybook/stories/stepper-input.stories.tsx
index a5e0dae96b..8de575f5e3 100644
--- a/packages/storybook/stories/stepper-input.stories.tsx
+++ b/packages/storybook/stories/stepper-input.stories.tsx
@@ -1,6 +1,6 @@
 import { StepperInput } from '@equisoft/design-elements-react';
-import { useState } from 'react';
 import { Story } from '@storybook/react';
+import { useState } from 'react';
 import { rawCodeParameters } from './utils/parameters';
 
 export default {
diff --git a/packages/storybook/stories/tooltip.stories.tsx b/packages/storybook/stories/tooltip.stories.tsx
index 76a010be80..eb290fa6a8 100644
--- a/packages/storybook/stories/tooltip.stories.tsx
+++ b/packages/storybook/stories/tooltip.stories.tsx
@@ -1,8 +1,8 @@
 import {
-    ApplicationMenu,
+    GlobalHeader,
     IconButton,
-    NavMenuOption,
     NavMenuButton,
+    NavMenuOption,
     Select,
     Tooltip,
     TooltipPlacement,
@@ -11,8 +11,8 @@ import { Story } from '@storybook/react';
 import { useState } from 'react';
 import styled from 'styled-components';
 import { DesktopDecorator } from './utils/device-context-decorator';
-import { RouterDecorator } from './utils/router-decorator';
 import { rawCodeParameters } from './utils/parameters';
+import { RouterDecorator } from './utils/router-decorator';
 
 const Container = styled.div`
     height: 100px;
@@ -97,11 +97,11 @@ export const WithNavMenuButton: Story = () => {
 
     return (
         <Container>
-            <ApplicationMenu>
+            <GlobalHeader>
                 <Tooltip label="Label" desktopPlacement="bottom" disabled={isMenuOpen} delayed>
                     <NavMenuButton iconOnly iconName="info" options={options} onMenuVisibilityChanged={setMenuOpen} />
                 </Tooltip>
-            </ApplicationMenu>
+            </GlobalHeader>
         </Container>
     );
 };
diff --git a/packages/storybook/stories/user-profile.stories.tsx b/packages/storybook/stories/user-profile.stories.tsx
index 974c302f65..7950b68a0e 100644
--- a/packages/storybook/stories/user-profile.stories.tsx
+++ b/packages/storybook/stories/user-profile.stories.tsx
@@ -1,10 +1,9 @@
+import { GlobalHeader, NavItemProps, UserProfile } from '@equisoft/design-elements-react';
+import { Story } from '@storybook/react';
 import { ComponentType } from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import styled from 'styled-components';
-import { Story } from '@storybook/react';
-import { ApplicationMenu, UserProfile } from '@equisoft/design-elements-react';
 import { DesktopDecorator, MobileDecorator } from './utils/device-context-decorator';
-import { NavItemProps } from '../../react/src/components/dropdown-menu/list-items';
 
 const StyledDiv = styled.div`
     height: 200px;
@@ -17,9 +16,9 @@ export default {
         (StoryComponent: ComponentType) => (
             <Router>
                 <StyledDiv>
-                    <ApplicationMenu>
+                    <GlobalHeader>
                         <StoryComponent />
-                    </ApplicationMenu>
+                    </GlobalHeader>
                 </StyledDiv>
             </Router>
         ),