diff --git a/microsite/docusaurus.config.js b/microsite/docusaurus.config.js
index b7d8453e21..2e5c6f6251 100644
--- a/microsite/docusaurus.config.js
+++ b/microsite/docusaurus.config.js
@@ -55,7 +55,7 @@ module.exports = {
           path: 'blog',
         },
         theme: {
-          customCss: 'src/css/customTheme.css',
+          customCss: 'src/theme/customTheme.scss',
         },
         gtag: {
           trackingID: 'G-KSEVGGNCJW',
diff --git a/microsite/src/components/bannerSection/bannerSection.module.scss b/microsite/src/components/bannerSection/bannerSection.module.scss
index 2beabf9738..64f4967d11 100644
--- a/microsite/src/components/bannerSection/bannerSection.module.scss
+++ b/microsite/src/components/bannerSection/bannerSection.module.scss
@@ -1,5 +1,41 @@
+@use 'src/theme/variables';
+
 .bannerSection {
+  --diagonalBorderHeight: 40px;
+
   display: block;
+  background: var(--ifm-background-color);
+
+  @media (min-width: variables.$desktopUpBreakpoint) {
+    --diagonalBorderHeight: 80px;
+  }
+
+  &:global(:is(.diagonalBorder, .diagonalBottomBorder)) {
+    padding-bottom: var(--diagonalBorderHeight);
+
+    & + section {
+      margin-top: calc(var(--diagonalBorderHeight) * -1);
+      padding-top: var(--diagonalBorderHeight);
+    }
+  }
+
+  &:global(.diagonalBorder) {
+    clip-path: polygon(
+      0 var(--diagonalBorderHeight),
+      100% 0,
+      100% calc(100% - var(--diagonalBorderHeight)),
+      0 100%
+    );
+  }
+
+  &:global(.diagonalBottomBorder) {
+    clip-path: polygon(
+      0 0,
+      100% 0,
+      100% calc(100% - var(--diagonalBorderHeight)),
+      0 100%
+    );
+  }
 
   &:global(.greyBackground) {
     background: linear-gradient(90.49deg, #121212 15.36%, #282828 70.44%);
diff --git a/microsite/src/components/bannerSection/bannerSection.tsx b/microsite/src/components/bannerSection/bannerSection.tsx
index 64c8d246c8..5dc99eecf0 100644
--- a/microsite/src/components/bannerSection/bannerSection.tsx
+++ b/microsite/src/components/bannerSection/bannerSection.tsx
@@ -6,6 +6,8 @@ import bannerStyles from './bannerSection.module.scss';
 export type IBannerSectionProps = PropsWithChildren<{
   className?: string;
   greyBackground?: boolean;
+  diagonalBorder?: boolean;
+  diagonalBottomBorder?: boolean;
   greenGradientBackground?: boolean;
   greenBottomGradientBackground?: boolean;
   greenCallToActionGradientBackground?: boolean;
@@ -15,6 +17,8 @@ export const BannerSection = ({
   children,
   className,
   greyBackground = false,
+  diagonalBorder = false,
+  diagonalBottomBorder = false,
   greenGradientBackground = false,
   greenBottomGradientBackground = false,
   greenCallToActionGradientBackground = false,
@@ -22,6 +26,8 @@ export const BannerSection = ({
   <section
     className={clsx(bannerStyles.bannerSection, className, {
       greyBackground,
+      diagonalBorder,
+      diagonalBottomBorder,
       greenGradientBackground,
       greenBottomGradientBackground,
       greenCallToActionGradientBackground,
diff --git a/microsite/src/components/bannerSection/bannerSectionGrid.module.scss b/microsite/src/components/bannerSection/bannerSectionGrid.module.scss
index c57b82ac57..233f7b6ffa 100644
--- a/microsite/src/components/bannerSection/bannerSectionGrid.module.scss
+++ b/microsite/src/components/bannerSection/bannerSectionGrid.module.scss
@@ -1,4 +1,4 @@
-$desktopUpBreakpoint: 997px;
+@use 'src/theme/variables';
 
 .sectionGridContainer {
   gap: 2rem;
@@ -14,7 +14,7 @@ $desktopUpBreakpoint: 997px;
   display: grid;
   align-items: center;
 
-  @media (min-width: $desktopUpBreakpoint) {
+  @media (min-width: variables.$desktopUpBreakpoint) {
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   }
 }
diff --git a/microsite/src/pages/community/index.tsx b/microsite/src/pages/community/index.tsx
index d334b04ee2..82dd69d1a0 100644
--- a/microsite/src/pages/community/index.tsx
+++ b/microsite/src/pages/community/index.tsx
@@ -131,7 +131,7 @@ const Community = () => {
   return (
     <Layout>
       <div className={clsx(communityStyles.communityPage)}>
-        <BannerSection greyBackground>
+        <BannerSection diagonalBottomBorder greyBackground>
           <BannerSectionGrid>
             <ContentBlock
               className="padding-right--xl"
@@ -169,7 +169,7 @@ const Community = () => {
           </BannerSectionGrid>
         </BannerSection>
 
-        <BannerSection greenBottomGradientBackground>
+        <BannerSection diagonalBorder greenBottomGradientBackground>
           <BannerSectionGrid
             header={
               <>
@@ -199,7 +199,7 @@ const Community = () => {
           </BannerSectionGrid>
         </BannerSection>
 
-        <BannerSection greyBackground>
+        <BannerSection diagonalBorder greyBackground>
           <BannerSectionGrid
             header={<h2 className="text--primary">Community initiatives</h2>}
           >
@@ -223,7 +223,7 @@ const Community = () => {
           </BannerSectionGrid>
         </BannerSection>
 
-        <BannerSection>
+        <BannerSection diagonalBorder>
           <BannerSectionGrid
             header={
               <h2 className="text--primary">Trainings and Certifications</h2>
diff --git a/microsite/src/pages/demos/index.tsx b/microsite/src/pages/demos/index.tsx
index 2ca77e5c89..1221c38a63 100644
--- a/microsite/src/pages/demos/index.tsx
+++ b/microsite/src/pages/demos/index.tsx
@@ -167,6 +167,8 @@ const Demos = () => {
         {demoItems.map((demoItem, index) => (
           <BannerSection
             key={index}
+            diagonalBottomBorder={index === 0}
+            diagonalBorder={index > 0 && index < demoItems.length - 1}
             greyBackground={index % 2 === 0}
             className={demosStyles.banner}
           >
diff --git a/microsite/src/pages/home/_home.tsx b/microsite/src/pages/home/_home.tsx
index ea22062d28..deb0d4cd6f 100644
--- a/microsite/src/pages/home/_home.tsx
+++ b/microsite/src/pages/home/_home.tsx
@@ -28,7 +28,7 @@ const HomePage = () => {
   return (
     <Layout>
       <div className={homeStyles.homePage}>
-        <BannerSection greyBackground>
+        <BannerSection diagonalBottomBorder greyBackground>
           <BannerSectionGrid
             header={
               !hiddenNewsletterBanner && (
@@ -99,7 +99,7 @@ const HomePage = () => {
           </BannerSectionGrid>
         </BannerSection>
 
-        <BannerSection>
+        <BannerSection diagonalBorder>
           <BannerSectionGrid>
             <ContentBlock
               title="The Speed Paradox"
@@ -125,7 +125,7 @@ const HomePage = () => {
           </BannerSectionGrid>
         </BannerSection>
 
-        <BannerSection greenGradientBackground>
+        <BannerSection diagonalBorder greenGradientBackground>
           <div className={homeStyles.catalogContainer}>
             <div className="catalogTitle">
               <img
@@ -183,7 +183,7 @@ const HomePage = () => {
           </div>
         </BannerSection>
 
-        <BannerSection greenCallToActionGradientBackground>
+        <BannerSection diagonalBorder greenCallToActionGradientBackground>
           <div className="padding--lg text--center">
             <h1>Learn more about the software catalog</h1>
 
@@ -196,7 +196,7 @@ const HomePage = () => {
           </div>
         </BannerSection>
 
-        <BannerSection greenBottomGradientBackground>
+        <BannerSection diagonalBorder greenBottomGradientBackground>
           <div className={homeStyles.softwareTemplatesContainer}>
             <div className="softwareTemplatesTitle">
               <img
@@ -247,7 +247,7 @@ const HomePage = () => {
           </div>
         </BannerSection>
 
-        <BannerSection greenCallToActionGradientBackground>
+        <BannerSection diagonalBorder greenCallToActionGradientBackground>
           <div className="padding--lg text--center">
             <h1>Build your own software templates</h1>
 
@@ -260,7 +260,7 @@ const HomePage = () => {
           </div>
         </BannerSection>
 
-        <BannerSection greenBottomGradientBackground>
+        <BannerSection diagonalBorder greenBottomGradientBackground>
           <div className={homeStyles.softwareTemplatesContainer}>
             <div className="softwareTemplatesTitle">
               <img
@@ -307,7 +307,7 @@ const HomePage = () => {
           </div>
         </BannerSection>
 
-        <BannerSection greenCallToActionGradientBackground>
+        <BannerSection diagonalBorder greenCallToActionGradientBackground>
           <div className="padding--lg text--center">
             <h1>Learn more about TechDocs</h1>
 
@@ -320,7 +320,7 @@ const HomePage = () => {
           </div>
         </BannerSection>
 
-        <BannerSection greenGradientBackground>
+        <BannerSection diagonalBorder greenGradientBackground>
           <div className={homeStyles.softwareTemplatesContainer}>
             <div className="softwareTemplatesTitle">
               <img
@@ -368,7 +368,7 @@ const HomePage = () => {
           </div>
         </BannerSection>
 
-        <BannerSection greenCallToActionGradientBackground>
+        <BannerSection diagonalBorder greenCallToActionGradientBackground>
           <div className="padding--lg text--center">
             <h1>Learn more about Backstage Search</h1>
 
@@ -381,7 +381,7 @@ const HomePage = () => {
           </div>
         </BannerSection>
 
-        <BannerSection greenBottomGradientBackground>
+        <BannerSection diagonalBorder greenBottomGradientBackground>
           <BannerSectionGrid
             className={homeStyles.kubernetesSectionContainer}
             header={
@@ -424,7 +424,7 @@ const HomePage = () => {
           </BannerSectionGrid>
         </BannerSection>
 
-        <BannerSection greenCallToActionGradientBackground>
+        <BannerSection diagonalBorder greenCallToActionGradientBackground>
           <div className="padding--lg text--center">
             <h1>Learn more about the K8s plugin</h1>
 
@@ -437,7 +437,7 @@ const HomePage = () => {
           </div>
         </BannerSection>
 
-        <BannerSection greenBottomGradientBackground>
+        <BannerSection diagonalBorder greenBottomGradientBackground>
           <div className={homeStyles.softwareTemplatesContainer}>
             <div className="softwareTemplatesTitle">
               <img
@@ -496,7 +496,7 @@ const HomePage = () => {
           </div>
         </BannerSection>
 
-        <BannerSection greenCallToActionGradientBackground>
+        <BannerSection diagonalBorder greenCallToActionGradientBackground>
           <div className="padding--lg text--center">
             <h1>Build a plugin</h1>
 
diff --git a/microsite/src/pages/home/home.module.scss b/microsite/src/pages/home/home.module.scss
index 57f2b9acde..5877f7b5f5 100644
--- a/microsite/src/pages/home/home.module.scss
+++ b/microsite/src/pages/home/home.module.scss
@@ -1,4 +1,4 @@
-$desktopUpBreakpoint: 997px;
+@use '../../theme/variables.scss';
 
 .homePage {
   font-size: 1.25rem;
@@ -70,7 +70,7 @@ $desktopUpBreakpoint: 997px;
 }
 
 .catalogContainer {
-  @media (min-width: $desktopUpBreakpoint) {
+  @media (min-width: variables.$desktopUpBreakpoint) {
     grid-template-columns: repeat(4, 1fr);
 
     picture {
@@ -85,7 +85,7 @@ $desktopUpBreakpoint: 997px;
 }
 
 .softwareTemplatesContainer {
-  @media (min-width: $desktopUpBreakpoint) {
+  @media (min-width: variables.$desktopUpBreakpoint) {
     grid: repeat(2, auto) / repeat(4, 1fr);
 
     picture {
diff --git a/microsite/src/css/customTheme.css b/microsite/src/theme/customTheme.scss
similarity index 100%
rename from microsite/src/css/customTheme.css
rename to microsite/src/theme/customTheme.scss
diff --git a/microsite/src/theme/variables.scss b/microsite/src/theme/variables.scss
new file mode 100644
index 0000000000..3d74e59c9c
--- /dev/null
+++ b/microsite/src/theme/variables.scss
@@ -0,0 +1,2 @@
+$xlUpBreakpoint: 1441px;
+$desktopUpBreakpoint: 997px;