diff --git a/website/src/components/layout/header.tsx b/website/src/components/layout/header.tsx
index 705e014a2f4..24c50693c79 100644
--- a/website/src/components/layout/header.tsx
+++ b/website/src/components/layout/header.tsx
@@ -437,51 +437,55 @@ const DeveloperNavItem: FC<DeveloperNavItemProps> = ({ products, tools }) => {
   const [subNav, navHandlers, linkHandlers] = useSubNav((hideSubNav) => (
     <>
       <SubNavMain>
-        <SubNavTitle>Documentation</SubNavTitle>
-        {products.map((product, index) => (
-          <SubNavLink
-            key={index}
-            to={`/docs/${product!.path!}/`}
-            onClick={hideSubNav}
-          >
-            <IconContainer size={16}>
-              <AngleRightIconSvg />
+        <SubNavGroup>
+          <SubNavTitle>Documentation</SubNavTitle>
+          {products.map((product, index) => (
+            <SubNavLink
+              key={index}
+              to={`/docs/${product!.path!}/`}
+              onClick={hideSubNav}
+            >
+              <IconContainer size={16}>
+                <AngleRightIconSvg />
+              </IconContainer>
+              {product!.title}
+            </SubNavLink>
+          ))}
+        </SubNavGroup>
+        <SubNavSeparator />
+        <SubNavGroup>
+          <SubNavTitle>More Resources</SubNavTitle>
+          <SubNavLink to="/blog" onClick={hideSubNav}>
+            <IconContainer size={20}>
+              <NewspaperIconSvg />
             </IconContainer>
-            {product!.title}
+            Blog
           </SubNavLink>
-        ))}
-        <SubNavSeparator />
-        <SubNavTitle>More Resources</SubNavTitle>
-        <SubNavLink to="/blog" onClick={hideSubNav}>
-          <IconContainer size={20}>
-            <NewspaperIconSvg />
-          </IconContainer>
-          Blog
-        </SubNavLink>
-        <SubNavLink to={tools.slack!} onClick={hideSubNav}>
-          <IconContainer size={20}>
-            <SlackIconSvg />
-          </IconContainer>
-          Slack / Community
-        </SubNavLink>
-        <SubNavLink to={tools.twitter!} onClick={hideSubNav}>
-          <IconContainer size={20}>
-            <TwitterIconSvg />
-          </IconContainer>
-          Twitter
-        </SubNavLink>
-        <SubNavLink to={tools.youtube!} onClick={hideSubNav}>
-          <IconContainer size={20}>
-            <YouTubeIconSvg />
-          </IconContainer>
-          YouTube Channel
-        </SubNavLink>
-        <SubNavLink to={tools.github!} onClick={hideSubNav}>
-          <IconContainer size={20}>
-            <GithubIconSvg />
-          </IconContainer>
-          GitHub
-        </SubNavLink>
+          <SubNavLink to={tools.slack!} onClick={hideSubNav}>
+            <IconContainer size={20}>
+              <SlackIconSvg />
+            </IconContainer>
+            Slack / Community
+          </SubNavLink>
+          <SubNavLink to={tools.twitter!} onClick={hideSubNav}>
+            <IconContainer size={20}>
+              <TwitterIconSvg />
+            </IconContainer>
+            Twitter
+          </SubNavLink>
+          <SubNavLink to={tools.youtube!} onClick={hideSubNav}>
+            <IconContainer size={20}>
+              <YouTubeIconSvg />
+            </IconContainer>
+            YouTube Channel
+          </SubNavLink>
+          <SubNavLink to={tools.github!} onClick={hideSubNav}>
+            <IconContainer size={20}>
+              <GithubIconSvg />
+            </IconContainer>
+            GitHub
+          </SubNavLink>
+        </SubNavGroup>
       </SubNavMain>
       <SubNavAdditionalInfo>
         <SubNavTitle>Upcoming Workshop</SubNavTitle>
@@ -544,11 +548,8 @@ const ServicesNavItem: FC = () => {
             Our expertise.
           </TeaserHero>
           <TeaserDescription>
-            <p>
-              <strong>ChilliCream</strong> helps you unlock the full potential
-              of your technology investments, fulfilling its promise to
-              transform your company.
-            </p>
+            <strong>ChilliCream</strong> helps you unlock your full potential,
+            delivering on its promise to transform your business.
           </TeaserDescription>
         </TeaserLink>
       </SubNavAdditionalInfo>
@@ -721,6 +722,7 @@ const SubNav = styled.div`
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
+  min-width: 100%;
   border-radius: var(--border-radius);
   background-color: ${THEME_COLORS.background};
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
@@ -738,29 +740,44 @@ const SubNavMain = styled.div`
   display: flex;
   flex: 1 1 55%;
   flex-direction: column;
-  padding: 15px 0;
+`;
+
+const SubNavGroup = styled.div`
+  margin: 10px 0;
+
+  @media only screen and ((min-width: 600px) and (min-height: 430px)) {
+    margin: 15px 0;
+  }
 `;
 
 const SubNavTitle = styled.h1`
-  margin: 5px 30px 10px;
+  margin: 5px 15px 10px;
   font-size: 0.75em;
   font-weight: 600;
   letter-spacing: 0.05em;
   color: ${THEME_COLORS.heading};
   transition: color 0.2s ease-in-out;
+
+  @media only screen and ((min-width: 600px) and (min-height: 430px)) {
+    margin: 5px 30px 10px;
+  }
 `;
 
 const SubNavSeparator = styled.div`
-  margin: 10px 20px;
+  margin: 0 10px;
   height: 1px;
   background-color: ${THEME_COLORS.backgroundAlt};
+
+  @media only screen and ((min-width: 600px) and (min-height: 430px)) {
+    margin: 5px 20px;
+  }
 `;
 
 const SubNavLink = styled(Link)`
   display: flex;
   flex-direction: row;
   align-items: center;
-  margin: 6px 30px;
+  margin: 5px 15px;
   font-size: 0.833em;
   color: ${THEME_COLORS.text};
   transition: color 0.2s ease-in-out;
@@ -781,6 +798,10 @@ const SubNavLink = styled(Link)`
       fill: ${THEME_COLORS.primary};
     }
   }
+
+  @media only screen and ((min-width: 600px) and (min-height: 430px)) {
+    margin: 5px 30px;
+  }
 `;
 
 const TileLinkTitle = styled.h1`
@@ -801,11 +822,11 @@ const TileLinkDescription = styled.p`
 const TileLink = styled(Link)`
   display: flex;
   flex-direction: column;
-  margin: 5px 20px;
+  margin: 5px 10px;
   border-radius: var(--border-radius);
   width: auto;
   min-height: 60px;
-  padding: 10px;
+  padding: 5px 10px;
   background-color: ${THEME_COLORS.background};
   transition: background-color 0.2s ease-in-out;
 
@@ -817,6 +838,11 @@ const TileLink = styled(Link)`
       color: ${THEME_COLORS.background};
     }
   }
+
+  @media only screen and ((min-width: 600px) and (min-height: 430px)) {
+    margin: 5px 20px;
+    padding: 10px;
+  }
 `;
 
 const SubNavAdditionalInfo = styled.div`
@@ -824,8 +850,12 @@ const SubNavAdditionalInfo = styled.div`
   flex: 1 1 45%;
   flex-direction: column;
   border-radius: 0 var(--border-radius) var(--border-radius) 0;
-  padding: 25px 0;
+  padding: 10px 0;
   background-color: ${THEME_COLORS.backgroundAlt};
+
+  @media only screen and ((min-width: 600px) and (min-height: 430px)) {
+    padding: 25px 0;
+  }
 `;
 
 const TeaserHero = styled.h1`
@@ -835,7 +865,8 @@ const TeaserHero = styled.h1`
   text-align: center;
   font-size: 1em;
   line-height: 1.5em;
-  max-width: 400px;
+  max-width: 80%;
+  margin: auto;
   aspect-ratio: 16/9;
   border-radius: var(--border-radius);
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
@@ -843,10 +874,14 @@ const TeaserHero = styled.h1`
   color: ${THEME_COLORS.textContrast};
   background-color: ${THEME_COLORS.primary};
   background: linear-gradient(180deg, ${THEME_COLORS.primary} 0%, #3d5f9f 100%);
+
+  @media only screen and ((min-width: 600px) and (min-height: 430px)) {
+    max-width: 400px;
+  }
 `;
 
 const TeaserLink = styled(Link)`
-  margin: 5px 30px;
+  margin: 5px 15px;
 
   .gatsby-image-wrapper {
     pointer-events: none;
@@ -866,16 +901,26 @@ const TeaserLink = styled(Link)`
       box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
     }
   }
+
+  @media only screen and ((min-width: 600px) and (min-height: 430px)) {
+    margin: 5px 30px;
+  }
 `;
 
 const TeaserImage = styled.div`
   overflow: visible;
+  max-width: 80%;
+  margin: auto;
 
   .gatsby-image-wrapper {
     border-radius: var(--border-radius);
     box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
     transition: box-shadow 0.2s ease-in-out;
   }
+
+  @media only screen and ((min-width: 600px) and (min-height: 430px)) {
+    max-width: fit-content;
+  }
 `;
 
 const TeaserMetadata = styled.div`
@@ -889,7 +934,7 @@ const TeaserMetadata = styled.div`
 `;
 
 const TeaserTitle = styled.h2`
-  margin: 0 0 15px;
+  margin: 0;
   font-size: 1em;
   line-height: 1.5em;
   color: ${THEME_COLORS.text};
@@ -897,9 +942,6 @@ const TeaserTitle = styled.h2`
 `;
 
 const TeaserDescription = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
   margin: 15px 0 7px;
   font-size: 0.833em;
   line-height: 1.5em;