diff --git a/CHANGELOG.md b/CHANGELOG.md
index 99ecdc245..32e3f7f32 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,8 @@
 
 ### Removed
 
+- [BREAKING] `Section`: removed the component and replaced the instances with either a `Box` or a full-width `Banner` ([@farazatarodi](https://github.com/farazatarodi) in [#2558](https://github.com/teamleadercrm/ui/pull/2558))
+
 ### Fixed
 
 ### Dependency updates
diff --git a/src/components/banner/Banner.tsx b/src/components/banner/Banner.tsx
index 541f85d27..f5485f659 100644
--- a/src/components/banner/Banner.tsx
+++ b/src/components/banner/Banner.tsx
@@ -1,13 +1,19 @@
 import React from 'react';
+import cx from 'classnames';
 
-import Box from '../box';
-import Island, { IslandProps } from '../island';
-import Section, { SectionProps } from '../section';
+import Box, { BoxProps, Padding } from '../box';
 import IconButton from '../iconButton';
 import theme from './theme.css';
 import { IconCloseMediumOutline } from '@teamleader/ui-icons';
+import { COLORS, SIZES } from '../../constants';
 
-export interface BannerProps extends SectionProps, IslandProps {
+const PADDINGS: Record<'small' | 'medium' | 'large', Padding> = {
+  small: 3,
+  medium: 4,
+  large: 5,
+};
+
+export interface BannerProps extends Omit<BoxProps, 'size'> {
   /** The content to display inside the banner. */
   children?: React.ReactNode;
   /** A class name for the wrapper to give custom styles. */
@@ -18,13 +24,33 @@ export interface BannerProps extends SectionProps, IslandProps {
   onClose?: React.MouseEventHandler<HTMLButtonElement>;
   /** If true, component will take the full width of it's container. */
   fullWidth?: boolean;
+  /** The color for the Banner background and border */
+  color?: Exclude<typeof COLORS[number], 'teal'> | 'white';
+  /** The size of the Banner component */
+  size?: Exclude<typeof SIZES[number], 'tiny' | 'smallest' | 'hero' | 'fullscreen'>;
 }
 
-const Banner = ({ children, className, color = 'white', icon, onClose, fullWidth, ...others }: BannerProps) => {
-  const Element = fullWidth ? Section : Island;
+const Banner = ({
+  children,
+  className,
+  color = 'white',
+  size = 'medium',
+  icon,
+  onClose,
+  fullWidth,
+  ...others
+}: BannerProps) => {
+  const classNames = cx(className, theme[color], theme['banner'], { [theme['banner_full-width']]: fullWidth });
 
   return (
-    <Element data-teamleader-ui="banner" className={className} color={color} {...others}>
+    <Box
+      data-teamleader-ui="banner"
+      className={classNames}
+      color={color}
+      padding={PADDINGS[size]}
+      borderRadius={fullWidth ? 'square' : 'rounded'}
+      {...others}
+    >
       <div className={theme['inner']}>
         {icon && <span className={theme['icon']}>{icon}</span>}
         <Box flex={1} element="span" paddingRight={onClose && 7}>
@@ -39,7 +65,7 @@ const Banner = ({ children, className, color = 'white', icon, onClose, fullWidth
           />
         )}
       </div>
-    </Element>
+    </Box>
   );
 };
 
diff --git a/src/components/banner/__tests__/__snapshots__/Banner.spec.tsx.snap b/src/components/banner/__tests__/__snapshots__/Banner.spec.tsx.snap
index 3a13d866f..5c9afc9f9 100644
--- a/src/components/banner/__tests__/__snapshots__/Banner.spec.tsx.snap
+++ b/src/components/banner/__tests__/__snapshots__/Banner.spec.tsx.snap
@@ -3,9 +3,10 @@
 exports[`Component - Banner renders 1`] = `
 <DocumentFragment>
   <div
-    class="box background-color-neutral-lightest padding-bottom-4 padding-left-4 padding-right-4 padding-top-4 white"
-    data-teamleader-ui="island"
-    style="border-bottom: 1px solid #e4e4e6; border-left: 1px solid #e4e4e6; border-right: 1px solid #e4e4e6; border-top: 1px solid #e4e4e6; border-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;"
+    class="box padding-bottom-4 padding-left-4 padding-right-4 padding-top-4 white banner"
+    color="white"
+    data-teamleader-ui="banner"
+    style="border-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;"
   >
     <div
       class="inner"
diff --git a/src/components/banner/theme.css b/src/components/banner/theme.css
index 0973e9307..29ee9c0e8 100644
--- a/src/components/banner/theme.css
+++ b/src/components/banner/theme.css
@@ -1,6 +1,15 @@
 @import '@teamleader/ui-colors';
 @import '@teamleader/ui-utilities';
 
+.banner {
+  border: 1px solid;
+
+  &_full-width {
+    border: 0px solid;
+    border-bottom-width: 1px;
+  }
+}
+
 .icon {
   margin-right: var(--spacer-small);
   display: flex;
@@ -17,3 +26,45 @@
   top: -3px;
   right: -3px;
 }
+
+.white {
+  background-color: var(--color-white);
+  border-color: var(--color-neutral);
+  color: var(--color-teal-darkest);
+}
+
+.neutral {
+  background-color: var(--color-neutral-light);
+  border-color: var(--color-neutral);
+  color: var(--color-teal-darkest);
+}
+
+.mint {
+  background-color: var(--color-mint-lightest);
+  border-color: var(--color-mint);
+  color: var(--color-mint-darkest);
+}
+
+.violet {
+  background-color: var(--color-violet-lightest);
+  border-color: var(--color-violet);
+  color: var(--color-violet-darkest);
+}
+
+.ruby {
+  background-color: var(--color-ruby-lightest);
+  border-color: var(--color-ruby);
+  color: var(--color-ruby-darkest);
+}
+
+.gold {
+  background-color: var(--color-gold-lightest);
+  border-color: var(--color-gold);
+  color: var(--color-gold-darkest);
+}
+
+.aqua {
+  background-color: var(--color-aqua-lightest);
+  border-color: var(--color-aqua);
+  color: var(--color-aqua-darkest);
+}
diff --git a/src/components/detailPage/DetailPageHeader.tsx b/src/components/detailPage/DetailPageHeader.tsx
index 931aa4899..42f9ffb9d 100644
--- a/src/components/detailPage/DetailPageHeader.tsx
+++ b/src/components/detailPage/DetailPageHeader.tsx
@@ -6,7 +6,6 @@ import { BadgedLinkProps } from '../badgedLink/BadgedLink';
 import { Box } from '../box';
 import Container from '../container';
 import { ContainerProps } from '../container/Container';
-import Section from '../section';
 import { Heading1, TextBody } from '../typography';
 import theme from './theme.css';
 
@@ -28,7 +27,15 @@ const DetailPageHeader: GenericComponent<DetailPageHeaderProps> = ({
   ...others
 }) => {
   return (
-    <Container data-teamleader-ui="detail-page-header" {...others} element={Section}>
+    <Container
+      data-teamleader-ui="detail-page-header"
+      backgroundColor="neutral"
+      backgroundTint="lightest"
+      borderBottomWidth={1}
+      borderTint="normal"
+      padding={4}
+      {...others}
+    >
       <Box className={theme['header-inner']} display="flex">
         {backLinkProps && (
           <TextBody className={theme['back-link']}>
diff --git a/src/components/detailPage/__tests__/__snapshots__/DetailPage.spec.tsx.snap b/src/components/detailPage/__tests__/__snapshots__/DetailPage.spec.tsx.snap
index f0ce8c826..9d2042c27 100644
--- a/src/components/detailPage/__tests__/__snapshots__/DetailPage.spec.tsx.snap
+++ b/src/components/detailPage/__tests__/__snapshots__/DetailPage.spec.tsx.snap
@@ -6,10 +6,10 @@ exports[`Component - DetailPage renders 1`] = `
     class="box"
     data-teamleader-ui="detail-page"
   >
-    <section
-      class="box padding-bottom-4 padding-left-4 padding-right-4 padding-top-4 section box container white"
+    <div
+      class="box background-color-neutral-lightest padding-bottom-4 padding-left-4 padding-right-4 padding-top-4 container"
       data-teamleader-ui="detail-page-header"
-      style="box-sizing: content-box;"
+      style="border-bottom: 1px solid #e4e4e6; box-sizing: content-box;"
     >
       <div
         class="box display-flex header-inner"
@@ -48,7 +48,7 @@ exports[`Component - DetailPage renders 1`] = `
           </button>
         </div>
       </div>
-    </section>
+    </div>
     <div
       class="box padding-bottom-8 padding-top-6 container is-fixed"
       data-teamleader-ui="detail-page-body"
diff --git a/src/components/dialog/Header.tsx b/src/components/dialog/Header.tsx
index c7305f741..fa9a3d7a4 100644
--- a/src/components/dialog/Header.tsx
+++ b/src/components/dialog/Header.tsx
@@ -1,12 +1,13 @@
 import React, { ReactNode } from 'react';
 import { IconCloseMediumOutline } from '@teamleader/ui-icons';
 
-import Section from '../section';
 import IconButton from '../iconButton';
 import Icon from '../icon';
 
 import theme from './theme.css';
 import { GenericComponent } from '../../@types/types';
+import Box from '../box';
+import cx from 'classnames';
 
 export interface HeaderProps {
   /** The content to display inside the dialog. */
@@ -15,11 +16,25 @@ export interface HeaderProps {
   icon?: ReactNode;
   /** Callback function that is fired when the close icon clicked. */
   onCloseClick?: () => void;
+  /** A class name for the wrapper to give custom styles. */
+  className?: string;
 }
 
-const Header: GenericComponent<HeaderProps> = ({ icon, onCloseClick, children, ...rest }) => {
+const Header: GenericComponent<HeaderProps> = ({ icon, onCloseClick, children, className, ...rest }) => {
+  const classNames = cx(className, theme['header']);
+
   return (
-    <Section display="flex" alignItems="center" color="neutral" {...rest}>
+    <Box
+      display="flex"
+      alignItems="center"
+      padding={4}
+      backgroundColor="neutral"
+      backgroundTint="light"
+      borderBottomWidth={1}
+      borderTint="normal"
+      className={classNames}
+      {...rest}
+    >
       {icon && (
         <Icon color="teal" tint="darkest" marginRight={3}>
           {icon}
@@ -34,7 +49,7 @@ const Header: GenericComponent<HeaderProps> = ({ icon, onCloseClick, children, .
           className={theme['close-icon']}
         />
       )}
-    </Section>
+    </Box>
   );
 };
 
diff --git a/src/components/dialog/__tests__/Dialog.spec.tsx b/src/components/dialog/__tests__/Dialog.spec.tsx
index 9cce90745..ce63cccd6 100644
--- a/src/components/dialog/__tests__/Dialog.spec.tsx
+++ b/src/components/dialog/__tests__/Dialog.spec.tsx
@@ -61,7 +61,7 @@ describe('Component - Dialog', () => {
     );
 
     expect(handleOnClose).not.toBeCalled();
-    const closeButton = screen.baseElement.querySelector('section button[type="button"]');
+    const closeButton = screen.baseElement.querySelector('div button[type="button"]');
 
     await user.click(closeButton!);
     expect(handleOnClose).toBeCalledTimes(1);
diff --git a/src/components/dialog/__tests__/__snapshots__/Dialog.spec.tsx.snap b/src/components/dialog/__tests__/__snapshots__/Dialog.spec.tsx.snap
index dbc72bc16..fb03a33a0 100644
--- a/src/components/dialog/__tests__/__snapshots__/Dialog.spec.tsx.snap
+++ b/src/components/dialog/__tests__/__snapshots__/Dialog.spec.tsx.snap
@@ -29,9 +29,9 @@ exports[`Component - Dialog renders 1`] = `
           <div
             class="inner"
           >
-            <section
-              class="box align-items-center display-flex padding-bottom-4 padding-left-4 padding-right-4 padding-top-4 section neutral"
-              data-teamleader-ui="section"
+            <div
+              class="box align-items-center background-color-neutral-light display-flex padding-bottom-4 padding-left-4 padding-right-4 padding-top-4 header"
+              style="border-bottom: 1px solid #e4e4e6;"
             >
               <span
                 class="box align-items-center display-flex margin-right-3 teal darkest"
@@ -88,7 +88,7 @@ exports[`Component - Dialog renders 1`] = `
                   </svg>
                 </span>
               </button>
-            </section>
+            </div>
             <div
               class="box display-flex flex-direction-column"
               style="overflow-y: auto;"
diff --git a/src/components/dialog/theme.css b/src/components/dialog/theme.css
index 82cb5b5d4..fbb38a8a4 100644
--- a/src/components/dialog/theme.css
+++ b/src/components/dialog/theme.css
@@ -99,3 +99,7 @@
     0px -4px 8px rgba(130, 130, 140, 0.09);
   z-index: 2;
 }
+
+.header {
+  color: var(--color-teal-darkest);
+}
diff --git a/src/components/marketingDialog/__tests__/__snapshots__/MarketingDialog.spec.tsx.snap b/src/components/marketingDialog/__tests__/__snapshots__/MarketingDialog.spec.tsx.snap
index fc07048f3..ebb3c4d97 100644
--- a/src/components/marketingDialog/__tests__/__snapshots__/MarketingDialog.spec.tsx.snap
+++ b/src/components/marketingDialog/__tests__/__snapshots__/MarketingDialog.spec.tsx.snap
@@ -25,9 +25,9 @@ exports[`Component - Dialog renders 1`] = `
               class="box display-flex flex-direction-column"
               style="overflow-y: auto;"
             >
-              <section
-                class="box align-items-center display-flex padding-bottom-4 padding-left-4 padding-right-4 padding-top-4 section neutral"
-                data-teamleader-ui="section"
+              <div
+                class="box align-items-center background-color-neutral-light display-flex padding-bottom-4 padding-left-4 padding-right-4 padding-top-4 header"
+                style="border-bottom: 1px solid #e4e4e6;"
               >
                 <h3
                   class="box heading heading-3 darkest"
@@ -61,7 +61,7 @@ exports[`Component - Dialog renders 1`] = `
                     </svg>
                   </span>
                 </button>
-              </section>
+              </div>
               <div
                 class="box align-items-center display-flex flex-direction-row justify-content-space-between padding-bottom-6 padding-left-6 padding-right-6 padding-top-6"
                 style="overflow-y: auto;"
diff --git a/src/components/section/Section.tsx b/src/components/section/Section.tsx
deleted file mode 100644
index 09e6283ff..000000000
--- a/src/components/section/Section.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import cx from 'classnames';
-import React, { ReactNode } from 'react';
-import { GenericComponent } from '../../@types/types';
-import { COLORS, SIZES } from '../../constants';
-import Box from '../box';
-import { BoxProps, Padding } from '../box/Box';
-import theme from './theme.css';
-
-const PADDINGS: Record<'small' | 'medium' | 'large', Padding> = {
-  small: 3,
-  medium: 4,
-  large: 5,
-};
-
-export interface SectionProps extends Omit<BoxProps, 'ref'> {
-  children?: ReactNode;
-  color?: Exclude<typeof COLORS[number], 'teal'> | 'white';
-  size?: Exclude<typeof SIZES[number], 'tiny' | 'fullscreen' | 'smallest' | 'hero'>;
-}
-
-const Section: GenericComponent<SectionProps> = ({
-  children,
-  className,
-  color = 'white',
-  size = 'medium',
-  ...rest
-}) => {
-  const classNames = cx(theme['section'], className as string, theme[color]);
-
-  return (
-    <Box data-teamleader-ui="section" className={classNames} element="section" padding={PADDINGS[size]} {...rest}>
-      {children}
-    </Box>
-  );
-};
-
-export default Section;
diff --git a/src/components/section/__tests__/Section.spec.tsx b/src/components/section/__tests__/Section.spec.tsx
deleted file mode 100644
index 2248110e1..000000000
--- a/src/components/section/__tests__/Section.spec.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import Section from '../Section';
-
-describe('Component - Section', () => {
-  it('renders', async () => {
-    const { asFragment } = render(<Section>This is a Section</Section>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-});
diff --git a/src/components/section/__tests__/__snapshots__/Section.spec.tsx.snap b/src/components/section/__tests__/__snapshots__/Section.spec.tsx.snap
deleted file mode 100644
index f9d00cdcc..000000000
--- a/src/components/section/__tests__/__snapshots__/Section.spec.tsx.snap
+++ /dev/null
@@ -1,12 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Component - Section renders 1`] = `
-<DocumentFragment>
-  <section
-    class="box padding-bottom-4 padding-left-4 padding-right-4 padding-top-4 section white"
-    data-teamleader-ui="section"
-  >
-    This is a Section
-  </section>
-</DocumentFragment>
-`;
diff --git a/src/components/section/index.ts b/src/components/section/index.ts
deleted file mode 100644
index ecf986b32..000000000
--- a/src/components/section/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import Section, { SectionProps } from './Section';
-
-export default Section;
-export type { SectionProps };
diff --git a/src/components/section/section.stories.tsx b/src/components/section/section.stories.tsx
deleted file mode 100644
index 9d76747f1..000000000
--- a/src/components/section/section.stories.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-import { addStoryInGroup, LOW_LEVEL_BLOCKS } from '../../../.storybook/utils';
-import { Section, TextBody } from '../../index';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-
-export default {
-  component: Section,
-  title: addStoryInGroup(LOW_LEVEL_BLOCKS, 'Section'),
-} as ComponentMeta<typeof Section>;
-
-export const Basic: ComponentStory<typeof Section> = (args) => (
-  <Section {...args}>
-    <TextBody>I am a section</TextBody>
-  </Section>
-);
diff --git a/src/components/section/theme.css b/src/components/section/theme.css
deleted file mode 100644
index bac1b9df2..000000000
--- a/src/components/section/theme.css
+++ /dev/null
@@ -1,48 +0,0 @@
-@import '@teamleader/ui-colors';
-@import '@teamleader/ui-utilities';
-
-.section {
-  border-bottom: 1px solid;
-}
-
-.white {
-  background-color: var(--color-white);
-  border-color: var(--color-neutral);
-  color: var(--color-teal-darkest);
-}
-
-.neutral {
-  background-color: var(--color-neutral-light);
-  border-color: var(--color-neutral);
-  color: var(--color-teal-darkest);
-}
-
-.mint {
-  background-color: var(--color-mint-lightest);
-  border-color: var(--color-mint);
-  color: var(--color-mint-darkest);
-}
-
-.violet {
-  background-color: var(--color-violet-lightest);
-  border-color: var(--color-violet);
-  color: var(--color-violet-darkest);
-}
-
-.ruby {
-  background-color: var(--color-ruby-lightest);
-  border-color: var(--color-ruby);
-  color: var(--color-ruby-darkest);
-}
-
-.gold {
-  background-color: var(--color-gold-lightest);
-  border-color: var(--color-gold);
-  color: var(--color-gold-darkest);
-}
-
-.aqua {
-  background-color: var(--color-aqua-lightest);
-  border-color: var(--color-aqua);
-  color: var(--color-aqua-darkest);
-}
diff --git a/src/index.ts b/src/index.ts
index 825ed8f81..e75710806 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -89,7 +89,6 @@ import Popover, { PopoverProps } from './components/popover';
 import PoweredByButton, { PoweredByButtonProps } from './components/poweredByButton';
 import ProgressTracker, { ProgressTrackerProps } from './components/progressTracker';
 import { RadioButton, RadioButtonProps, RadioGroup, RadioGroupProps } from './components/radio';
-import Section, { SectionProps } from './components/section';
 import Select, {
   AsyncSelect,
   AsyncSelectProps,
@@ -238,7 +237,6 @@ export {
   ProgressTracker,
   RadioButton,
   RadioGroup,
-  Section,
   Select,
   SplitButton,
   StatusLabel,
@@ -355,7 +353,6 @@ export type {
   ProgressTrackerProps,
   RadioButtonProps,
   RadioGroupProps,
-  SectionProps,
   SelectComponentsProps,
   SelectProps,
   SelectRef,