diff --git a/website/.gitignore b/website/.gitignore
index 88ed02814c9..6590cef2430 100644
--- a/website/.gitignore
+++ b/website/.gitignore
@@ -67,9 +67,7 @@ typings/
 .next/
 out/
 next-env.d.ts
-
-# Image optimization build output
-/public/optimized/
+/public
 
 # Mac files
 .DS_Store
diff --git a/website/src/components/article-elements.tsx b/website/src/components/article-elements.tsx
index 1f156ee9fec..d1f79d07ae6 100644
--- a/website/src/components/article-elements.tsx
+++ b/website/src/components/article-elements.tsx
@@ -107,7 +107,7 @@ export const ArticleContent = styled.div`
   > p,
   > ol > li,
   > ul > li {
-    text-align: justify;
+    text-align: left;
   }
 
   > p,
diff --git a/website/src/components/articles/responsive-article-menu.tsx b/website/src/components/articles/responsive-article-menu.tsx
index 3bcc1a0de97..2246ade4347 100644
--- a/website/src/components/articles/responsive-article-menu.tsx
+++ b/website/src/components/articles/responsive-article-menu.tsx
@@ -113,6 +113,8 @@ const Button = styled.button`
   flex-direction: row;
   align-items: center;
   gap: 8px;
+  min-height: 44px;
+  padding: 0 12px;
   font-size: 0.875rem;
   color: ${THEME_COLORS.link};
   transition: color 0.2s ease-in-out;
diff --git a/website/src/components/misc/content-section.tsx b/website/src/components/misc/content-section.tsx
index d8cdee86736..2a7fb0c581c 100644
--- a/website/src/components/misc/content-section.tsx
+++ b/website/src/components/misc/content-section.tsx
@@ -242,6 +242,7 @@ const VisibleArea = styled.div`
   flex-direction: column;
   align-items: center;
   gap: 36px;
+  width: 100%;
   max-width: ${MAX_CONTENT_WIDTH}px;
   perspective: 1px;
   overflow: visible;
diff --git a/website/src/components/misc/dialog.tsx b/website/src/components/misc/dialog.tsx
index f1d606b3e71..9e0671b3365 100644
--- a/website/src/components/misc/dialog.tsx
+++ b/website/src/components/misc/dialog.tsx
@@ -4,7 +4,7 @@ import { Link } from "./link";
 export const Dialog = styled.div<{ $show: boolean }>`
   position: fixed;
   bottom: 0;
-  z-index: 30;
+  z-index: 20;
   width: 100vw;
   background-color: #aba0ff;
   display: ${({ $show }) => ($show ? "visible" : "none")};
@@ -14,7 +14,7 @@ export const DialogButton = styled.button`
   border-radius: var(--border-radius);
   max-width: 160px;
   padding: 10px;
-  height: 40px;
+  height: 44px;
   font-size: var(--font-size);
   color: #e9e7f4;
   background-color: #2e2857;
@@ -34,7 +34,7 @@ export const DialogLinkButton = styled(Link)`
   justify-content: center;
   border-radius: var(--button-border-radius);
   max-width: 140px;
-  height: 20px;
+  height: 24px;
   padding: 10px;
   color: #e9e7f4;
   background-color: #2e2857;
diff --git a/website/src/components/misc/pagination.tsx b/website/src/components/misc/pagination.tsx
index d1c8262769f..67b99e8d4dd 100644
--- a/website/src/components/misc/pagination.tsx
+++ b/website/src/components/misc/pagination.tsx
@@ -59,9 +59,9 @@ const PageLink = styled(NextLink)`
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  width: 30px;
-  height: 30px;
-  line-height: 30px;
+  min-width: 44px;
+  min-height: 44px;
+  line-height: 44px;
   border: 2px solid ${THEME_COLORS.primaryButtonBorder};
   border-radius: var(--button-border-radius);
   font-family: ${FONT_FAMILY_HEADING};
diff --git a/website/src/components/misc/plan.tsx b/website/src/components/misc/plan.tsx
index eb4ea18c306..9b6f20cecb9 100644
--- a/website/src/components/misc/plan.tsx
+++ b/website/src/components/misc/plan.tsx
@@ -54,8 +54,7 @@ function Plan({
           <PlanPrice>
             {typeof price === "number" ? (
               <>
-                {fromPrice && <PlanFromText>from </PlanFromText>}
-                ${price}
+                {fromPrice && <PlanFromText>from </PlanFromText>}${price}
                 {period && <PlanPeriod>/{period}</PlanPeriod>}
               </>
             ) : (
@@ -87,14 +86,11 @@ const PlansContainer = styled.div<{
   readonly $maxColumns: number;
 }>`
   display: grid;
-  grid-template-columns: repeat(
-    ${({ $maxColumns }) => $maxColumns},
-    minmax(200px, 300px)
-  );
-  grid-template-rows: min-content 1px auto min-content;
+  grid-template-columns: 1fr;
+  grid-template-rows: auto;
   border: 1px solid #37353f;
   border-radius: var(--box-border-radius);
-  width: ${MAX_CONTENT_WIDTH};
+  width: 100%;
   backdrop-filter: blur(2px);
   background-image: radial-gradient(
     ellipse at bottom,
@@ -103,6 +99,15 @@ const PlansContainer = styled.div<{
   );
   box-shadow: 0 0 120px 60px #fdfdfd12;
   overflow: visible;
+
+  @media only screen and (min-width: 768px) {
+    grid-template-columns: repeat(
+      ${({ $maxColumns }) => $maxColumns},
+      minmax(200px, 1fr)
+    );
+    grid-template-rows: min-content 1px auto min-content;
+    max-width: ${MAX_CONTENT_WIDTH}px;
+  }
 `;
 
 const PlanHeader = styled.div`
@@ -110,12 +115,21 @@ const PlanHeader = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  grid-row: 1;
   gap: 48px;
   box-sizing: border-box;
-  border-left: 1px solid #211f31;
+  border-top: 1px solid #211f31;
   padding: 82px 32px 60px;
   overflow: visible;
+
+  &:first-child {
+    border-top: none;
+  }
+
+  @media only screen and (min-width: 768px) {
+    grid-row: 1;
+    border-top: none;
+    border-left: 1px solid #211f31;
+  }
 `;
 
 const PlanTitleContainer = styled.div.attrs({
@@ -170,11 +184,9 @@ const PlanPeriod = styled.span`
 `;
 
 const PlanSeparator = styled.div`
-  grid-row: 2;
   margin-right: auto;
   margin-left: auto;
   box-sizing: border-box;
-  border-left: 1px solid #211f31;
   width: 50%;
   height: 1px;
   background-image: linear-gradient(
@@ -185,6 +197,10 @@ const PlanSeparator = styled.div`
     #ffffff4d 78%,
     #ffffff00 100%
   );
+
+  @media only screen and (min-width: 768px) {
+    grid-row: 2;
+  }
 `;
 
 const PlanFeatures = styled.ul.attrs({
@@ -194,12 +210,15 @@ const PlanFeatures = styled.ul.attrs({
   flex-direction: column;
   align-items: flex-start;
   justify-content: flex-start;
-  grid-row: 3;
   box-sizing: border-box;
   margin: 0;
-  border-left: 1px solid #211f31;
   padding: 64px 32px 32px;
   list-style-type: none;
+
+  @media only screen and (min-width: 768px) {
+    grid-row: 3;
+    border-left: 1px solid #211f31;
+  }
 `;
 
 const PlanFeature = styled.li`
@@ -217,9 +236,12 @@ const PlanFooter = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  grid-row: 4;
   box-sizing: border-box;
   margin: 0;
-  border-left: 1px solid #211f31;
   padding: 32px;
+
+  @media only screen and (min-width: 768px) {
+    grid-row: 4;
+    border-left: 1px solid #211f31;
+  }
 `;
diff --git a/website/src/components/widgets/community-section.tsx b/website/src/components/widgets/community-section.tsx
index 141177aac13..7be64c4cd26 100644
--- a/website/src/components/widgets/community-section.tsx
+++ b/website/src/components/widgets/community-section.tsx
@@ -22,8 +22,7 @@ export const CommunityVisualization: FC = () => {
         <GraphContent>
           <GraphTitle>A Growing Community</GraphTitle>
           <GraphText>
-            Be part of our expanding community. A place for sharing, learning,
-            <br />
+            Be part of our expanding community. A place for sharing, learning,{" "}
             and evolving together, driving forward the future of GraphQL
             technologies.
           </GraphText>
@@ -69,10 +68,11 @@ const VisibleArea = styled.div`
   height: 100%;
   max-width: ${MAX_CONTENT_WIDTH}px;
   gap: 16px;
-  overflow: visible;
+  overflow: hidden;
 
   @media only screen and (min-width: 992px) {
     gap: 24px;
+    overflow: visible;
   }
 `;
 
@@ -85,6 +85,7 @@ const Graph = styled.div`
   border: 1px solid ${THEME_COLORS.boxBorder};
   border-radius: var(--box-border-radius);
   backdrop-filter: blur(2px);
+  overflow: hidden;
   background-image: linear-gradient(
     to bottom,
     #e043da1d,
@@ -100,8 +101,14 @@ const GraphContent = styled.div`
   flex: 0 0 auto;
   flex-direction: column;
   align-items: flex-start;
-  width: 670px;
-  padding: 40px;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 24px;
+
+  @media only screen and (min-width: 992px) {
+    width: 670px;
+    padding: 40px;
+  }
 `;
 
 const GraphTitle = styled.h2`
@@ -126,17 +133,20 @@ const GraphText = styled.p.attrs({
 const CommunityIllustration = styled(CommunityIllustrationSvg)`
   position: absolute;
   z-index: -1;
+  width: 100%;
+  height: auto;
 `;
 
 const Numbers = styled.div`
   position: relative;
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
   flex: 1 1 200px;
-  flex-direction: rows;
   gap: 16px;
   border: 1px solid ${THEME_COLORS.boxBorder};
   border-radius: var(--box-border-radius);
   backdrop-filter: blur(2px);
+  padding: 24px 0;
   background-image: linear-gradient(
     to right top,
     #9b9aa51d,
@@ -147,7 +157,10 @@ const Numbers = styled.div`
   );
 
   @media only screen and (min-width: 992px) {
+    display: flex;
+    flex-direction: row;
     gap: 24px;
+    padding: 0;
   }
 `;
 
diff --git a/website/src/components/widgets/newsletter-section.tsx b/website/src/components/widgets/newsletter-section.tsx
index d07ff2524c3..891d0fa7a04 100644
--- a/website/src/components/widgets/newsletter-section.tsx
+++ b/website/src/components/widgets/newsletter-section.tsx
@@ -146,7 +146,7 @@ const Newsletter = styled.div`
   }
 `;
 
-const NewsletterTitle = styled.h3`
+const NewsletterTitle = styled.h2`
   flex: 0 0 auto;
   margin-bottom: 24px;
 
@@ -184,7 +184,7 @@ const Media = styled.div`
   );
 `;
 
-const MediaTitle = styled.h3`
+const MediaTitle = styled.h2`
   flex: 0 0 auto;
   margin-bottom: 32px;
 `;
@@ -206,6 +206,11 @@ const MediaBox = styled.div`
 `;
 
 const MediaConnectLink = styled(Link)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 44px;
+  min-height: 44px;
   text-decoration: none;
   color: ${THEME_COLORS.footerLink};
   transition: color 0.2s ease-in-out;
diff --git a/website/src/page-components/index.tsx b/website/src/page-components/index.tsx
index 471ad630c20..c6bfbfbc039 100644
--- a/website/src/page-components/index.tsx
+++ b/website/src/page-components/index.tsx
@@ -148,7 +148,9 @@ const IndexPage: FC<IndexPageProps> = ({ recentPosts }) => {
 
 export default IndexPage;
 
-const Fusion = styled(FusionSvg)`
+const Fusion = styled(FusionSvg).attrs({
+  viewBox: "0 0 1246 1153",
+})`
   animation: 0.5s ease-in-out ${FADE_IN} forwards,
     0.5s ease-in-out ${ZOOM_IN} forwards;
   opacity: 0;
diff --git a/website/src/page-components/platform/ecosystem.tsx b/website/src/page-components/platform/ecosystem.tsx
index ff59f9dc7b0..2c7977a09b1 100644
--- a/website/src/page-components/platform/ecosystem.tsx
+++ b/website/src/page-components/platform/ecosystem.tsx
@@ -82,7 +82,7 @@ const EcosystemPage: FC<EcosystemPageProps> = ({ recentPosts }) => {
             <Card>
               <CardOffer>
                 <header>
-                  <h5>Authentication Flows</h5>
+                  <h3>Authentication Flows</h3>
                 </header>
                 <p>
                   Choose between various authentication flows like basic, bearer
@@ -93,7 +93,7 @@ const EcosystemPage: FC<EcosystemPageProps> = ({ recentPosts }) => {
             <Card>
               <CardOffer>
                 <header>
-                  <h5>Organization Workspaces</h5>
+                  <h3>Organization Workspaces</h3>
                 </header>
                 <p>
                   Organize your GraphQL APIs and collaborate with colleagues
@@ -104,7 +104,7 @@ const EcosystemPage: FC<EcosystemPageProps> = ({ recentPosts }) => {
             <Card>
               <CardOffer>
                 <header>
-                  <h5>Document Synchronization</h5>
+                  <h3>Document Synchronization</h3>
                 </header>
                 <p>
                   Keep your documents safe across all your devices and your
@@ -115,9 +115,9 @@ const EcosystemPage: FC<EcosystemPageProps> = ({ recentPosts }) => {
             <Card>
               <CardOffer>
                 <header>
-                  <h5>
+                  <h3>
                     PWA <SrOnly>(Progressive Web Application)</SrOnly> Support
-                  </h5>
+                  </h3>
                 </header>
                 <p>
                   Use your favorite Browser to install Nitro as a PWA on your
@@ -128,7 +128,7 @@ const EcosystemPage: FC<EcosystemPageProps> = ({ recentPosts }) => {
             <Card>
               <CardOffer>
                 <header>
-                  <h5>Beautiful Themes</h5>
+                  <h3>Beautiful Themes</h3>
                 </header>
                 <p>
                   Choose your single preferred theme or let the system
@@ -139,7 +139,7 @@ const EcosystemPage: FC<EcosystemPageProps> = ({ recentPosts }) => {
             <Card>
               <CardOffer>
                 <header>
-                  <h5>GraphQL File Upload</h5>
+                  <h3>GraphQL File Upload</h3>
                 </header>
                 <p>
                   Implements the latest version of the{" "}
@@ -153,9 +153,9 @@ const EcosystemPage: FC<EcosystemPageProps> = ({ recentPosts }) => {
             <Card>
               <CardOffer>
                 <header>
-                  <h5>
+                  <h3>
                     Subscriptions over SSE <SrOnly>(Server-Sent Events)</SrOnly>
-                  </h5>
+                  </h3>
                 </header>
                 <p>
                   Supports{" "}
@@ -169,7 +169,7 @@ const EcosystemPage: FC<EcosystemPageProps> = ({ recentPosts }) => {
             <Card>
               <CardOffer>
                 <header>
-                  <h5>Performant GraphQL IDE</h5>
+                  <h3>Performant GraphQL IDE</h3>
                 </header>
                 <p>
                   Lagging apps can be frustrating. We do not accept that and
@@ -181,9 +181,9 @@ const EcosystemPage: FC<EcosystemPageProps> = ({ recentPosts }) => {
             <Card>
               <CardOffer>
                 <header>
-                  <h5>
+                  <h3>
                     Subscriptions over WS <SrOnly>(WebSockets)</SrOnly>
-                  </h5>
+                  </h3>
                 </header>
                 <p>
                   Supports{" "}
diff --git a/website/src/page-components/products/nitro.tsx b/website/src/page-components/products/nitro.tsx
index fb129947f1a..1fa7b531832 100644
--- a/website/src/page-components/products/nitro.tsx
+++ b/website/src/page-components/products/nitro.tsx
@@ -90,7 +90,7 @@ const NitroPage: FC<NitroPageProps> = ({ recentPosts }) => {
           <Card>
             <CardOffer>
               <header>
-                <h5>Authentication Flows</h5>
+                <h3>Authentication Flows</h3>
               </header>
               <p>
                 Choose between various authentication flows like basic, bearer
@@ -101,7 +101,7 @@ const NitroPage: FC<NitroPageProps> = ({ recentPosts }) => {
           <Card>
             <CardOffer>
               <header>
-                <h5>Organization Workspaces</h5>
+                <h3>Organization Workspaces</h3>
               </header>
               <p>
                 Organize your GraphQL APIs and collaborate with colleagues
@@ -112,7 +112,7 @@ const NitroPage: FC<NitroPageProps> = ({ recentPosts }) => {
           <Card>
             <CardOffer>
               <header>
-                <h5>Document Synchronization</h5>
+                <h3>Document Synchronization</h3>
               </header>
               <p>
                 Keep your documents safe across all your devices and your teams.
@@ -122,9 +122,9 @@ const NitroPage: FC<NitroPageProps> = ({ recentPosts }) => {
           <Card>
             <CardOffer>
               <header>
-                <h5>
+                <h3>
                   PWA <SrOnly>(Progressive Web Application)</SrOnly> Support
-                </h5>
+                </h3>
               </header>
               <p>
                 Use your favorite Browser to install Nitro as a PWA on your
@@ -135,7 +135,7 @@ const NitroPage: FC<NitroPageProps> = ({ recentPosts }) => {
           <Card>
             <CardOffer>
               <header>
-                <h5>Beautiful Themes</h5>
+                <h3>Beautiful Themes</h3>
               </header>
               <p>
                 Choose your single preferred theme or let the system
@@ -146,7 +146,7 @@ const NitroPage: FC<NitroPageProps> = ({ recentPosts }) => {
           <Card>
             <CardOffer>
               <header>
-                <h5>GraphQL File Upload</h5>
+                <h3>GraphQL File Upload</h3>
               </header>
               <p>
                 Implements the latest version of the{" "}
@@ -160,9 +160,9 @@ const NitroPage: FC<NitroPageProps> = ({ recentPosts }) => {
           <Card>
             <CardOffer>
               <header>
-                <h5>
+                <h3>
                   Subscriptions over SSE <SrOnly>(Server-Sent Events)</SrOnly>
-                </h5>
+                </h3>
               </header>
               <p>
                 Supports{" "}
@@ -176,7 +176,7 @@ const NitroPage: FC<NitroPageProps> = ({ recentPosts }) => {
           <Card>
             <CardOffer>
               <header>
-                <h5>Performant GraphQL IDE</h5>
+                <h3>Performant GraphQL IDE</h3>
               </header>
               <p>
                 Lagging apps can be frustrating. We do not accept that and keep
@@ -188,9 +188,9 @@ const NitroPage: FC<NitroPageProps> = ({ recentPosts }) => {
           <Card>
             <CardOffer>
               <header>
-                <h5>
+                <h3>
                   Subscriptions over WS <SrOnly>(WebSockets)</SrOnly>
-                </h5>
+                </h3>
               </header>
               <p>
                 Supports{" "}
@@ -597,7 +597,7 @@ const DownloadLink = styled.a.attrs({
   & > span {
     margin-top: -8px;
     font-size: 0.875rem;
-    opacity: 0.75;
+    opacity: 1;
   }
 
   :hover {
diff --git a/website/src/style/global-style.tsx b/website/src/style/global-style.tsx
index 003e4bb6fe8..9d3af72a1d5 100644
--- a/website/src/style/global-style.tsx
+++ b/website/src/style/global-style.tsx
@@ -318,12 +318,9 @@ export const GlobalStyle = createGlobalStyle`
     margin-bottom: 16px;
   }
 
-  /* Inline code style */
+  /* Inline code style (handled by prism-style.tsx) */
   :not(pre) > code {
     border: 1px solid ${THEME_COLORS.boxBorder};
-    border-radius: var(--button-border-box);
-    background-color: initial;
-    color: ${THEME_COLORS.text};
   }
 
   a.anchor {
diff --git a/website/src/style/prism-theme.css b/website/src/style/prism-theme.css
index a8dc2950b63..cb0bfe269f4 100644
--- a/website/src/style/prism-theme.css
+++ b/website/src/style/prism-theme.css
@@ -5,13 +5,15 @@
  * Ported for PrismJS by Simon Jespersen [https://github.com/simjes]
  */
 
+code,
 code[class*="language-"],
+pre,
 pre[class*="language-"] {
-  background: #27212e;
+  background-color: #eb64b927;
   color: #ffffff;
   font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; /* this is the default */
   /* The following properties are standard, please leave them as they are */
-  font-size: 1em;
+  font-size: 1rem;
   direction: ltr;
   text-align: left;
   white-space: pre;
@@ -32,7 +34,7 @@ code[class*="language-"]::-moz-selection,
 code[class*="language-"] ::-moz-selection,
 pre[class*="language-"]::-moz-selection,
 pre[class*="language-"] ::-moz-selection {
-  background: #eb64b927;
+  background-color: #eb64b927;
   color: inherit;
 }
 
@@ -40,11 +42,12 @@ code[class*="language-"]::selection,
 code[class*="language-"] ::selection,
 pre[class*="language-"]::selection,
 pre[class*="language-"] ::selection {
-  background: #eb64b927;
+  background-color: #eb64b927;
   color: inherit;
 }
 
 /* Properties specific to code blocks */
+pre,
 pre[class*="language-"] {
   padding: 1em; /* this is standard */
   margin: 0.5em 0; /* this is the default */
@@ -53,9 +56,10 @@ pre[class*="language-"] {
 }
 
 /* Properties specific to inline code */
+:not(pre) > code,
 :not(pre) > code[class*="language-"] {
-  padding: 0.2em 0.3em;
-  border-radius: 0.5rem;
+  border-radius: 0.25rem;
+  padding: 0.0625rem 0.25rem;
   white-space: normal; /* this is standard */
 }