diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index 27ee2b857..4b80fe21d 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -20,6 +20,8 @@ const config: Config = {
   organizationName: "/HaudinFlorence/", // Usually your GitHub org/user name.
   projectName: "quantstack.github.io", // Usually your repo name.
 
+  clientModules: [require.resolve("./src/clientModules/navbarScroll.ts")],
+
   onBrokenLinks: "warn",
   onBrokenMarkdownLinks: "warn",
   staticDirectories: ["static"],
@@ -107,6 +109,12 @@ const config: Config = {
       },
 
       items: [
+        {
+          to: "/",
+          className: "custom_navbar_item",
+          label: "Home",
+          position: "left",
+        },
         {
           to: "/projects/",
           className: "custom_navbar_item",
@@ -122,7 +130,7 @@ const config: Config = {
         {
           to: "/about/",
           className: "custom_navbar_item",
-          label: "About us",
+          label: "About",
           position: "left",
         },
         {
@@ -139,15 +147,15 @@ const config: Config = {
         },
         {
           to: "/fundable/",
-          label: "Fundable projects",
-          position: "right",
-          className: "fundable_projects"
+          className: "custom_navbar_item",
+          label: "Sponsor",
+          position: "left",
         },
         {
           to: "/contact/",
-          label: "Contact us",
-          position: "right",
-          className: "contact",
+          className: "custom_navbar_item",
+          label: "Contact",
+          position: "left",
         },
         {
           to: "https://github.com/QuantStack",
diff --git a/flake.lock b/flake.lock
new file mode 100644
index 000000000..0b0400ab4
--- /dev/null
+++ b/flake.lock
@@ -0,0 +1,27 @@
+{
+  "nodes": {
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1778443072,
+        "narHash": "sha256-zi7/fsqM/kFdNuED//4WOCUtezGtKKqRNORjMvfwjnA=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "da5ad661ba4e5ef59ba743f0d112cbc30e474f32",
+        "type": "github"
+      },
+      "original": {
+        "owner": "NixOS",
+        "ref": "nixos-unstable",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "root": {
+      "inputs": {
+        "nixpkgs": "nixpkgs"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}
diff --git a/flake.nix b/flake.nix
new file mode 100644
index 000000000..4a1005f9e
--- /dev/null
+++ b/flake.nix
@@ -0,0 +1,24 @@
+{
+  inputs.nixpkgs.url = "github:NixOS/nixpkgs/nixos-unstable";
+
+  outputs = { self, nixpkgs }:
+    let
+      system = "x86_64-linux";
+      pkgs = nixpkgs.legacyPackages.${system};
+    in {
+      devShells.${system}.default = pkgs.mkShell {
+        buildInputs = with pkgs; [
+          nodejs_20
+          python3
+          pkg-config
+          cairo
+          pango
+          libpng
+          libjpeg
+          giflib
+          librsvg
+          pixman
+        ];
+      };
+    };
+}
diff --git a/src/clientModules/navbarScroll.ts b/src/clientModules/navbarScroll.ts
new file mode 100644
index 000000000..abe20e05a
--- /dev/null
+++ b/src/clientModules/navbarScroll.ts
@@ -0,0 +1,20 @@
+const THRESHOLD = 20;
+
+function update(): void {
+  const scrolled = window.scrollY > THRESHOLD;
+  const isHome = window.location.pathname === "/";
+  document.documentElement.toggleAttribute("data-navbar-scrolled", scrolled);
+  document.documentElement.toggleAttribute(
+    "data-navbar-home-top",
+    isHome && !scrolled
+  );
+}
+
+export function onRouteDidUpdate(): void {
+  update();
+}
+
+if (typeof window !== "undefined") {
+  window.addEventListener("scroll", update, { passive: true });
+  update();
+}
diff --git a/src/components/about/FourValues.tsx b/src/components/about/FourValues.tsx
index c34c1f266..073b139f1 100644
--- a/src/components/about/FourValues.tsx
+++ b/src/components/about/FourValues.tsx
@@ -1,26 +1,18 @@
-import styles from "./styles.module.css";
+import CardGrid from "../layout/CardGrid";
 import { ValueCard } from "@site/src/components/about/ValueCard";
 import { valuesDetails } from "./Values/valuesDetails";
 
 export default function FourValues() {
   return (
-    <div>
-      <div className="row">
-        <div className="col">
-          <h1 className={"padding-none" + " " + "full-flex-centered"}>
-            Our values{" "}
-          </h1>
-        </div>
-      </div>
-      <ul className="row padding-none flex-full-centered row-with-margins">
+    <>
+      <h2>Our values</h2>
+      <CardGrid cols={4}>
         {valuesDetails.map((value, index) => (
-          <li className="cards-list" key={index}>
-            <div className="col">
-              <ValueCard value={value} />
-            </div>
+          <li key={index}>
+            <ValueCard value={value} />
           </li>
         ))}
-      </ul>
-    </div>
+      </CardGrid>
+    </>
   );
 }
diff --git a/src/components/about/SmallPortraitCard.tsx b/src/components/about/SmallPortraitCard.tsx
index 55ffb31a0..de9477576 100644
--- a/src/components/about/SmallPortraitCard.tsx
+++ b/src/components/about/SmallPortraitCard.tsx
@@ -1,6 +1,7 @@
 import styles from "./styles.module.css";
 import { useHistory } from "@docusaurus/router";
 import Avatar from "./Avatar";
+import Card from "../layout/Card";
 
 export function SmallPortraitCard({ person }) {
   const history = useHistory();
@@ -9,34 +10,22 @@ export function SmallPortraitCard({ person }) {
     const completeName = person.completeName.replace(/\s+/g, '');
     const completeNameWithoutAccents = completeName
       .normalize("NFD")
-      .replace(/[\u0300-\u036f]/g, '');
+      .replace(/[̀-ͯ]/g, '');
     history.push({
       pathname: `/about/${completeNameWithoutAccents}`,
-      state: { fromAbout: true, scrollY: window.scrollY, },
+      state: { fromAbout: true, scrollY: window.scrollY },
     });
   }
 
   return (
-    <div onClick={openDialog}>
-      <div className={"card" + " " + styles.small_portrait_card}>
-        <div className="card__header">
-          <Avatar person={person} />
-          <div
-            className={
-              "flex-full-centered" + " " + styles.small_card_complete_name
-            }
-          >
-            {person.completeName}
-          </div>
-        </div>
-        <div className="card__body">
-          <div
-            className={"flex-full-centered" + " " + styles.small_card_position}
-          >
-            {person.position}
-          </div>
-        </div>
+    <Card hover onClick={openDialog} className={styles.small_portrait_card}>
+      <Avatar person={person} />
+      <div className={"flex-full-centered " + styles.small_card_complete_name}>
+        {person.completeName}
       </div>
-    </div>
+      <div className={"flex-full-centered " + styles.small_card_position}>
+        {person.position}
+      </div>
+    </Card>
   );
 }
diff --git a/src/components/about/SubTeam.tsx b/src/components/about/SubTeam.tsx
index 2522e3dcd..e86655c1b 100644
--- a/src/components/about/SubTeam.tsx
+++ b/src/components/about/SubTeam.tsx
@@ -1,21 +1,18 @@
 import styles from "./styles.module.css";
 import { SmallPortraitCard } from "./SmallPortraitCard";
+import CardGrid from "../layout/CardGrid";
 
 export default function SubTeam({ subTeamName, subTeam }) {
   return (
     <div className={styles.subteam_container}>
-      <h2 className={"text--center"}> {subTeamName}</h2>
-      <div className={"container"}>
-        <ul className="row padding-none flex-full-centered row-with-margin-top">
-          {subTeam.map((person, index) => (
-            <li className="cards-list" key={person.pageName}>
-              <div className="col">
-                <SmallPortraitCard person={person} />
-              </div>
-            </li>
-          ))}
-        </ul>
-      </div>
+      <h3 className="text--center">{subTeamName}</h3>
+      <CardGrid cols={3}>
+        {subTeam.map((person) => (
+          <li key={person.pageName}>
+            <SmallPortraitCard person={person} />
+          </li>
+        ))}
+      </CardGrid>
     </div>
   );
 }
diff --git a/src/components/about/ValueCard.tsx b/src/components/about/ValueCard.tsx
index 1507c2633..becb832eb 100644
--- a/src/components/about/ValueCard.tsx
+++ b/src/components/about/ValueCard.tsx
@@ -1,22 +1,17 @@
 import styles from "./styles.module.css";
+import Card from "../layout/Card";
 
 export function ValueCard({ value }) {
   return (
-    <div className={"card" + " " + styles.value_card}>
-      <div
-        className={"card__header flex-full-centered"}
-        style={{ marginBottom: "var(--ifm-spacing-lg)" }}
-      >
+    <Card className={styles.value_card}>
+      <div className={styles.value_icon}>
         <value.pictureComponent alt={value.alt} />
       </div>
-
-      <div className={"card__body"}>
-        <div className={styles.value_header}>{value.name}</div>
-        <div className={styles.value_text}>
-          <value.DescriptionMD />
-        </div>
+      <div className={styles.value_header}>{value.name}</div>
+      <div className={styles.value_text}>
+        <value.DescriptionMD />
       </div>
-    </div>
+    </Card>
   );
 }
 export default ValueCard;
diff --git a/src/components/about/index.tsx b/src/components/about/index.tsx
index 8fe977970..921851d6b 100644
--- a/src/components/about/index.tsx
+++ b/src/components/about/index.tsx
@@ -2,6 +2,8 @@ import styles from "./styles.module.css";
 import { teams } from "./Team/team";
 import FourValues from "./FourValues";
 import SubTeam from "./SubTeam";
+import Section from "../layout/Section";
+import Banner from "../layout/Banner";
 import LinkToContact from "../home/LinkToContact";
 
 export function getTeamByPageName(name: string) {
@@ -14,50 +16,40 @@ export function getTeamByPageName(name: string) {
   return null;
 }
 
- 
 export function About() {
   return (
-    <div>
-      <div className="main-container-with-margins">
-        <div className="container upper-container-with-margin-top">
-          <div className={"row"}>
-            <div className={"col flex-full-centered"}>
-              <FourValues />
-            </div>
-          </div>
-         
-
-          <div className="row">
-            <div className="col col--10 col--offset-1">
-              <h1 className="text--center">Meet the QuantStack team</h1>
-              <div className={styles.team_description}>
-                A team of outliers, leaders in software projects adopted at the
-                global scale, benefiting millions of people worldwide.
-              </div>
-            </div>
-          </div>
- 
-          <div className="row">
-            <div className="col">
-              <SubTeam
-                subTeamName={"The leadership team"}
-                subTeam={teams.leadershipTeam}
-              />
-              <SubTeam subTeamName={"The core team"} subTeam={teams.coreTeam} />
-              <SubTeam
-                subTeamName={"QuantStack collaborators"}
-                subTeam={teams.QSCollaboratorsTeam}
-              />
-            </div>
-          </div>
+    <>
+      <Section pageTop bg="yellow">
+        <h1>About QuantStack</h1>
+        <p>A small team of outliers — core maintainers of projects adopted globally by researchers, engineers, and educators. We believe open-source is the most powerful way to make high-quality tools available to everyone.</p>
+      </Section>
+      <Section>
+        <FourValues />
+      </Section>
+      <Section>
+        <h2>Meet the QuantStack team</h2>
+        <div className={styles.team_description}>
+          A team of outliers, leaders in software projects adopted at the
+          global scale, benefiting millions of people worldwide.
         </div>
-      </div>
-      <div className="blue-banner-container">
-        <div className="blue-banner-header">Join the team</div>
+        <SubTeam
+          subTeamName={"The leadership team"}
+          subTeam={teams.leadershipTeam}
+        />
+        <SubTeam subTeamName={"The core team"} subTeam={teams.coreTeam} />
+        <SubTeam
+          subTeamName={"QuantStack collaborators"}
+          subTeam={teams.QSCollaboratorsTeam}
+        />
+      </Section>
+      <Banner
+        bg="dark"
+        title="Join the team"
+        cta={<LinkToContact label={"JOIN THE TEAM!"} />}
+      >
         QuantStack is seeking talents in the open-source scientific computing
         community. Join a team committed to open-science and free software.
-        <LinkToContact label={"JOIN THE TEAM!"} />
-      </div>
-    </div>
+      </Banner>
+    </>
   );
 }
diff --git a/src/components/about/styles.module.css b/src/components/about/styles.module.css
index 823403f57..7e91a7ca8 100644
--- a/src/components/about/styles.module.css
+++ b/src/components/about/styles.module.css
@@ -4,7 +4,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(0, 0, 0, 0.3);
+  background-color: var(--ifm-overlay-background);
   z-index: 1000;
 }
 
@@ -13,28 +13,23 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  background-color: white;
+  background-color: var(--ifm-bg-neutral);
   border: 1px solid #ccc;
-  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
+  box-shadow: var(--ifm-shadow-dialog);
   border-radius: 20px;
   z-index: 4000;
 }
 
 .small_portrait_card {
-  width: 279px;
   height: 320px;
-  background-color: white;
-  color: var(--ifm-color-primary-p2);
-  border-radius: 8px;
-  box-shadow: 0px 0px 8px 1px #c8c8c7;
   padding: var(--ifm-spacing-lg) var(--ifm-spacing-xs);
-  margin-bottom: var(--ifm-spacing-xl);
+  align-items: center;
 }
 
-.small_portrait_card:hover {
-  border: solid 1px gray;
-  cursor: pointer;
-  text-decoration: #0000ee underline;
+.value_icon {
+  display: flex;
+  justify-content: center;
+  margin-bottom: var(--ifm-spacing-lg);
 }
 
 .value_text p {
@@ -45,7 +40,8 @@
   line-height: 20px;
   letter-spacing: 0.25px;
   color: var(--ifm-text-color-on-primary-p1);
-  text-align: justify;
+  text-align: left;
+  margin-bottom: var(--ifm-spacing-xs);
 }
 
 div .row {
@@ -79,7 +75,6 @@ div .row {
 .small_card_position {
   font-size: 16px;
   font-family: var(--ifm-font-family-roboto);
-  color: var(---ifm-text-color);
   font-style: normal;
   font-weight: 400;
   line-height: 24px;
@@ -92,7 +87,6 @@ div .row {
 .large_card_complete_name {
   font-family: var(--ifm-font-family-roboto);
   font-size: 28px;
-  color: var(---ifm-text-color);
   font-style: normal;
   font-weight: 400;
   line-height: 40px;
@@ -100,7 +94,7 @@ div .row {
 }
 
 .large_card_position {
-  font-size: var(--ifm--font-size-normal);
+  font-size: var(--ifm-font-size-normal);
   font-family: var(--ifm-font-family-roboto);
   color: var(--ifm-color-primary-p2);
   font-style: normal;
@@ -109,10 +103,6 @@ div .row {
   letter-spacing: 0.5px;
 }
 
-a {
-  color: var(--ifm-color-primary-p2);
-}
-
 div .large_card_position {
   color: var(--ifm-color-primary-p2);
 }
@@ -157,36 +147,19 @@ div .join_the_team_text {
   padding-right: 5px;
 }
 
-.card {
-  border: 1px solid #ccc;
-  padding: 16px;
-  margin: 16px;
-  cursor: pointer;
-  border-radius: 8px;
-  transition: box-shadow 0.2s;
-}
 
-.small_portrait_card:hover {
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
-}
 
 @media only screen and (max-width: 996px) {
   /*Mobile*/
   .value_card {
-    height: 420px;
-    width: 264px;
     padding: var(--ifm-spacing-lg) var(--ifm-spacing-md);
-    border-radius: 8px;
-    box-shadow: 0px 0px 8px 1px #c8c8c7;
-    background-color: var(--ifm-color-primary-p1);
-    margin-bottom: var(--ifm-spacing-xl);
   }
 
   .value_header {
-    font-family: var(--ifm-font-family-rubik-one);
+    font-family: var(--ifm-font-family-roboto);
     font-size: 20px;
     font-style: normal;
-    font-weight: 400;
+    font-weight: 700;
     line-height: 20px;
     text-align: center;
     margin-bottom: var(--ifm-spacing-xl);
@@ -194,7 +167,7 @@ div .join_the_team_text {
   }
 
   .value_text p {
-    text-align: justify;
+    text-align: left;
     padding: 0;
   }
 
@@ -241,20 +214,18 @@ div .join_the_team_text {
 @media only screen and (min-width: 996px) {
   /*Desktop*/
   .value_card {
-    height: 460px;
-    width: 264px;
     padding: var(--ifm-spacing-2xl) var(--ifm-spacing-lg);
-    border-radius: 8px;
-    box-shadow: 0px 0px 8px 1px #c8c8c7;
-    background-color: var(--ifm-color-primary-p1);
-    margin-bottom: var(--ifm-spacing-xl);
+  }
+
+  .values_row > li {
+    flex: 1 1 0;
   }
 
   .value_header {
-    font-family: var(--ifm-font-family-rubik-one);
+    font-family: var(--ifm-font-family-roboto);
     font-size: var(--ifm-font-size-secondary-title);
     font-style: normal;
-    font-weight: 400;
+    font-weight: 700;
     line-height: 28px;
     text-align: center;
     margin-bottom: var(--ifm-spacing-xl);
@@ -267,7 +238,7 @@ div .join_the_team_text {
   }
 
   .subteam_container {
-    margin: var(--ifm-spacing-5xl) var(--ifm-spacing-6xl);
+    margin: var(--ifm-spacing-5xl) 0;
   }
 
   .team_description {
diff --git a/src/components/blog/BlogpostCard.tsx b/src/components/blog/BlogpostCard.tsx
index 4ea8a6a92..f867eecb1 100644
--- a/src/components/blog/BlogpostCard.tsx
+++ b/src/components/blog/BlogpostCard.tsx
@@ -1,63 +1,31 @@
-// src/components/Card.js
-
 import React from "react";
 import styles from "./styles.module.css";
 import Link from "@docusaurus/Link";
 import useBaseUrl from "@docusaurus/useBaseUrl";
+import Card from "../layout/Card";
 
 export default function BlogpostCard({ blogpost, timeIndex }) {
   return (
-    <div
-      className={"card" + " " + styles.blogpost_card}
-      style={{ marginBottom: "var(--ifm-spacing-lg)" }}
-    >
+    <Card hover className={styles.blogpost_card}>
       <Link href={blogpost.url}>
-        <div className="container">
-          <div
-            className={
-              "row" +
-              " " +
-              "flex-full-centered" +
-              " " +
-              "padding-none" +
-              " " +
-              "margin-none"
-            }
-          ></div>
-          <div className="card__header">
-            <div
-              className={styles.blogpost_image + " " + "flex-full-centered"}
-              style={{ height: "180px" }}
-            >
-              <img
-                src={useBaseUrl(blogpost.image)}
-                id={blogpost.imageID}
-                alt={"Illustration for the blog post."}
-              />
-            </div>
-
-            <div className={styles.blogpost_header}>{blogpost.title}</div>
-          </div>
-
-          <div className={"card__body"}>
-            <div className={styles.blogpost_summary}>
-              {blogpost.summary.length < 200
-                ? blogpost.summary
-                : blogpost.summary.substring(0, 200) + "..."}
-            </div>
-          </div>
-
-          <div
-            className={"row card__footer"}
-            style={{ marginBottom: "var(--ifm-spacing-md)" }}
-          >
-            <div className="col" style={{ padding: "0px" }}>
-              <div className={styles.blogpost_date}>{blogpost.date}</div>
-              <div className={styles.blogpost_authors}>{blogpost.authors}</div>
-            </div>
-          </div>
+        <div className={styles.blogpost_image + " flex-full-centered"}>
+          <img
+            src={useBaseUrl(blogpost.image)}
+            id={blogpost.imageID}
+            alt={"Illustration for the blog post."}
+          />
+        </div>
+        <div className={styles.blogpost_header}>{blogpost.title}</div>
+        <div className={styles.blogpost_summary}>
+          {blogpost.summary.length < 200
+            ? blogpost.summary
+            : blogpost.summary.substring(0, 200) + "..."}
+        </div>
+        <div className={styles.blogpost_footer}>
+          <div className={styles.blogpost_date}>{blogpost.date}</div>
+          <div className={styles.blogpost_authors}>{blogpost.authors}</div>
         </div>
       </Link>
-    </div>
+    </Card>
   );
 }
diff --git a/src/components/blog/index.tsx b/src/components/blog/index.tsx
index 5ab140bb5..df18d9422 100644
--- a/src/components/blog/index.tsx
+++ b/src/components/blog/index.tsx
@@ -3,6 +3,8 @@ import React, { useState } from "react";
 import BlogpostCard from "./BlogpostCard";
 import { blogpostsDetails } from "./blogpostsDetails";
 import AtomOrange from "/img/icons/RSSOrange.svg";
+import Section from "../layout/Section";
+import CardGrid from "../layout/CardGrid";
 
 export default function BlogsComponent() {
   const numberOfBlogs = blogpostsDetails.length;
@@ -22,46 +24,41 @@ export default function BlogsComponent() {
   };
 
   return (
-    <div className="main-container-with-margins">
-      <div className="container upper-container-with-margin-top">
-        <div className={"row row-with-margin-bottom"}>
-          <div
-            className={"col col--8 col--offset-2"}
-          >
-            <div className="flex-full-centered">
-              <h1 className="padding-none margin-none">
-                Featured Posts by QuantStack Contributors
-              </h1>
-            <div style={{padding:"0 10px"}}>
-              <a href={"/atom.xml"}>
-                <AtomOrange width={"42px"} height={"42px"} />
-              </a>
-              </div>
-            </div>
-            <div>
-              <input
-                className={styles.search_input}
-                type="search"
-                placeholder="Search for blog posts"
-                onChange={handleChange}
-              />
-            </div>
+    <>
+      <Section pageTop bg="yellow">
+        <div className="flex-full-centered">
+          <h1 className="padding-none margin-none">
+            Featured Posts by QuantStack Contributors
+          </h1>
+          <div style={{ padding: "0 10px" }}>
+            <a href={"/atom.xml"}>
+              <AtomOrange width={"42px"} height={"42px"} />
+            </a>
           </div>
         </div>
+        <p className="text--center">Technical deep-dives, release notes, and perspectives from maintainers at the source. Read about the decisions, trade-offs, and discoveries that go into the tools powering modern science.</p>
+      </Section>
+      <Section>
+        <div>
+          <input
+            className={styles.search_input}
+            type="search"
+            placeholder="Search for blog posts"
+            onChange={handleChange}
+          />
+        </div>
 
-        <ul className={"row" + " " + "flex-full-centered"}>
+        <CardGrid cols={3}>
           {filteredBlogPosts.map((blogpost, index) => (
-            <li className="cards-list" key={index}>
-              <div className="col">
-                <BlogpostCard
-                  blogpost={blogpost}
-                  timeIndex={numberOfBlogs - index}
-                ></BlogpostCard>
-              </div>
+            <li key={index}>
+              <BlogpostCard
+                blogpost={blogpost}
+                timeIndex={numberOfBlogs - index}
+              />
             </li>
           ))}
-        </ul>
-      </div>
-    </div>
+        </CardGrid>
+      </Section>
+    </>
   );
 }
diff --git a/src/components/blog/styles.module.css b/src/components/blog/styles.module.css
index 92bbe7adb..52c26719a 100644
--- a/src/components/blog/styles.module.css
+++ b/src/components/blog/styles.module.css
@@ -1,80 +1,55 @@
 .blogpost_image {
   filter: grayscale(1);
+  height: 180px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .blogpost_card {
   height: 556px;
-  width: 369px;
-  border-radius: 8px;
-  box-shadow: 4px 4px 18px -1px #dee0fc;
   padding: var(--ifm-spacing-xl);
-  background: var(--ifm-background-color-card);
-}
-
-.blogpost_card:hover {
-  border: 1px solid #cbc7b1;
-}
-
-div .blogpost_header {
-  color: var(--ifm-text-color);
-}
-div .blogpost_summary {
-  color: var(--ifm-text-color);
-}
-
-div .blogpost_authors {
-  color: var(--ifm-text-color);
-}
-
-div .blogpost_date {
-  color: var(--ifm-text-color);
 }
 
 .blogpost_summary {
-  font-family: var(--ifm-font-family-roboto);
   font-size: 14px;
-  font-style: normal;
   font-weight: 300;
-  line-height: 150%; /* 21px */
+  line-height: 150%;
   letter-spacing: -0.154px;
   text-align: justify;
   margin-bottom: var(--ifm-spacing-sm);
   height: 124px;
   color: var(--ifm-text-color);
+  flex: 1;
 }
 
 .blogpost_header {
-  color: var(---ifm-text-color);
-  font-family: var(--ifm-font-family-roboto);
   font-size: 16px;
-  font-style: normal;
   font-weight: 600;
-  line-height: 150%; /* 27px */
+  line-height: 150%;
   letter-spacing: -0.198px;
   height: 64px;
   margin: var(--ifm-spacing-xl) 0;
   color: var(--ifm-text-color);
 }
 
+.blogpost_footer {
+  margin-top: auto;
+  padding-top: var(--ifm-spacing-sm);
+}
+
 .blogpost_date {
-  color: var(---ifm-text-color);
-  font-family: var(--ifm-font-family-roboto);
   font-size: 12px;
-  font-style: normal;
   font-weight: 800;
   line-height: 16px;
   letter-spacing: -0.132px;
-  text-align: left;
   color: var(--ifm-text-color);
 }
 
 .blogpost_authors {
-  font-family: var(--ifm-font-family-roboto);
   font-size: 12px;
-  font-style: normal;
   font-weight: 400;
   line-height: 16px;
-  text-align: left;
   color: var(--ifm-text-color);
 }
 
@@ -86,7 +61,6 @@ div .blogpost_date {
   background-repeat: no-repeat;
   background-position: 8px;
   border-radius: 8px;
-  padding: var(--ifm-spacing-xs) var(--ifm-spacing-lg) var(--ifm-spacing-xs)
-    var(--ifm-spacing-lg);
+  padding: var(--ifm-spacing-xs) var(--ifm-spacing-lg) var(--ifm-spacing-xs) var(--ifm-spacing-lg);
   margin: var(--ifm-spacing-lg) 0;
 }
diff --git a/src/components/careers/VisitWTJProfile.tsx b/src/components/careers/VisitWTJProfile.tsx
index 2fdf1a938..c516ab91b 100644
--- a/src/components/careers/VisitWTJProfile.tsx
+++ b/src/components/careers/VisitWTJProfile.tsx
@@ -1,10 +1,10 @@
+import Banner from "../layout/Banner";
 import LinkToWTJ from "./LinkToWTJ";
 
 export default function VisitWTJProfile() {
   return (
-    <div className="blue-banner-container">
+    <Banner bg="dark" cta={<LinkToWTJ label="OPEN OUR PROFILE" />}>
       Learn more on our Welcome to the Jungle web page.
-      <LinkToWTJ label={"OPEN OUR PROFILE"} />
-    </div>
+    </Banner>
   );
 }
diff --git a/src/components/careers/index.tsx b/src/components/careers/index.tsx
index 09e00b3a3..b57fdbbe6 100644
--- a/src/components/careers/index.tsx
+++ b/src/components/careers/index.tsx
@@ -1,62 +1,36 @@
 import styles from "./styles.module.css";
+import Section from "../layout/Section";
 import { interviewDetails } from "./interviewDetails";
 import Interviews from "./Interviews";
-import Header from "./Header";
 import VisitWTJProfile from "./VisitWTJProfile";
 import JoinTheTeam from "./JoinTheTeam";
 import GroupPhotoJupyterConUrl from "@site/static/img/group/group-photo.png";
 
 export default function Careers() {
   return (
-    <div>
-      <div className="main-container-with-margins">
-        <div className="container upper-container-with-margin-top">
-          <div
-            className={
-              "row padding-none flex-full-centered"
-            }
-          >
-            <div className="col">
-              <h1 className="text--center">Join the QuantStack team!</h1>
-              <div
-                className={
-                  styles.group_photo_container + " " + "flex-full-centered"
-                }
-              >
-                <img
-                  src={GroupPhotoJupyterConUrl}
-                  alt={
-                    "Picture showing QuantStack people gathered at the Jupytercon in Paris in May 2023."
-                  }
-                />
-              </div>
-            </div>
-          </div>
-          <div
-            className={
-              "row flex-full-centered" +
-              " " +
-              styles.join_the_team_container
-        
-            }
-          >
-            <div className="col col--10 col--offset-1">
-              <JoinTheTeam />
-            </div>
-            <div className={"row" + " " + "flex-full-container"}>
-              <div className="col col--8 col--offset-2">
-                <div className={styles.interviews_container}>
-                  <Interviews
-                    details={interviewDetails}
-                    description={"Working at QuantStack"}
-                  />
-                </div>
-              </div>
-            </div>
+    <>
+      <Section pageTop bg="yellow">
+        <h1>Join the QuantStack team!</h1>
+        <p>Build software used by millions — as a core contributor, not a user. Join a team that shapes the scientific computing ecosystem from the inside.</p>
+      </Section>
+      <Section>
+        <div className={styles.group_photo_container + " flex-full-centered"}>
+          <img
+            src={GroupPhotoJupyterConUrl}
+            alt="Picture showing QuantStack people gathered at the Jupytercon in Paris in May 2023."
+          />
+        </div>
+        <div className={styles.join_the_team_container}>
+          <JoinTheTeam />
+          <div className={styles.interviews_container}>
+            <Interviews
+              details={interviewDetails}
+              description={"Working at QuantStack"}
+            />
           </div>
         </div>
-      </div>
+      </Section>
       <VisitWTJProfile />
-    </div>
+    </>
   );
 }
diff --git a/src/components/careers/styles.module.css b/src/components/careers/styles.module.css
index 70b0576ef..f1c84717a 100644
--- a/src/components/careers/styles.module.css
+++ b/src/components/careers/styles.module.css
@@ -27,18 +27,17 @@
 }
 
 .link_to_WTJ {
-  background-color: var(--ifm-color-secondary-s2);
+  background-color: var(--ifm-bg-emphasis);
   color: white;
-  width: 358px;
   font-weight: 700;
 }
 
 .interview_card {
   width: 280px;
   height: 300px;
-  background-color: var(--ifm-background-color);
+  background-color: var(--ifm-bg-neutral);
   border-radius: 10px;
-  box-shadow: 0px 0px 8px 1px #c8c8c7;
+  box-shadow: var(--ifm-shadow-card);
   padding: var(--ifm-spacing-sm);
   text-align: center;
   margin-bottom: var(--ifm-spacing-xl);
diff --git a/src/components/contact/index.tsx b/src/components/contact/index.tsx
index eb0614f2d..d353d168c 100644
--- a/src/components/contact/index.tsx
+++ b/src/components/contact/index.tsx
@@ -1,33 +1,23 @@
-import styles from "./styles.module.css";
+import SplitSection from "../layout/SplitSection";
 import ContactForm from "./ContactForm";
-import { useEffect, useState } from "react";
 import ContactIllustration from "/img/illustrations/contact.svg";
 
 export function Contact() {
   return (
-    <div className="container upper-container-with-margin-top">
-      <h1 className={"padding-none text--center"}> Contact us</h1>
-      <div className={"row"}>
-        <div
-          className="col col--5 col--offset-1 flex-full-centered"
-          style={{
-            padding: "var(--ifm-spacing-xl)",
-          }}
-        >
-          <ContactIllustration
-            height={"460px"}
-            alt={
-              "Illustration for the contact page with a woman, a mobile phone and an envelope."
-            }
-          />
-        </div>
-        <div
-          className={"col col--5 flex-full-centered padding-none margin-none"}
-        >
-          <ContactForm />
-        </div>
-      </div>
-    </div>
+    <SplitSection
+      ratio="50/50"
+      pageTop
+      reverse
+      image={
+        <ContactIllustration
+          height={"460px"}
+          alt="Illustration for the contact page with a woman, a mobile phone and an envelope."
+        />
+      }
+    >
+      <h1>Contact us</h1>
+      <ContactForm />
+    </SplitSection>
   );
 }
 export default Contact;
diff --git a/src/components/contact/styles.module.css b/src/components/contact/styles.module.css
index ef330c1fb..ffa40e1a6 100644
--- a/src/components/contact/styles.module.css
+++ b/src/components/contact/styles.module.css
@@ -13,7 +13,7 @@
 .form_label {
   font-size: 12px;
   color: var(--ifm-text-color);
-  background-color: var(--ifm-background-color);
+  background-color: var(--ifm-bg-neutral);
 }
 
 
diff --git a/src/components/fundable/FundableProjectCard.tsx b/src/components/fundable/FundableProjectCard.tsx
new file mode 100644
index 000000000..6491b80fe
--- /dev/null
+++ b/src/components/fundable/FundableProjectCard.tsx
@@ -0,0 +1,35 @@
+import styles from "./styles.module.css";
+import { useHistory } from "@docusaurus/router";
+import ProgressBar from "./ProgressBar";
+import Card from "../layout/Card";
+
+export default function FundableProjectCard({ project }) {
+  const history = useHistory();
+
+  function open() {
+    history.push({
+      pathname: `/fundable/${project.pageName}`,
+      state: { fromFundable: true, scrollY: window.scrollY },
+    });
+  }
+
+  const desc = project.shortDescription.length > 160
+    ? project.shortDescription.substring(0, 160) + "…"
+    : project.shortDescription;
+
+  return (
+    <Card hover onClick={open} className={styles.fund_card}>
+      <div className={styles.fund_card_category}>{project.category}</div>
+      <div className={styles.fund_card_title}>{project.title}</div>
+      <p className={styles.fund_card_desc}>{desc}</p>
+      <div className={styles.fund_card_footer}>
+        <div className={styles.fund_card_price}>{project.price}</div>
+        <ProgressBar value={project.currentFundingPercentage} color="var(--ifm-color-secondary-s1)" />
+        <div className={styles.fund_card_pct}>
+          {project.currentFundingPercentage}% funded
+          {project.currentNbOfFunders > 0 && ` · ${project.currentNbOfFunders} funder${project.currentNbOfFunders > 1 ? "s" : ""}`}
+        </div>
+      </div>
+    </Card>
+  );
+}
diff --git a/src/components/fundable/index.tsx b/src/components/fundable/index.tsx
index 976fa64de..048fe2b14 100644
--- a/src/components/fundable/index.tsx
+++ b/src/components/fundable/index.tsx
@@ -1,73 +1,84 @@
+import { useState, useEffect } from "react";
 import styles from "./styles.module.css";
+import Section from "../layout/Section";
+import CardGrid from "../layout/CardGrid";
 import { fundableProjectsDetails } from "./projectsDetails";
-import ProjectCategory from "./ProjectCategory";
-import MenuSidebar from "./MenuSideBar";
+import FundableProjectCard from "./FundableProjectCard";
 import LinkToContact from "../home/LinkToContact";
 
+const ALL_PROJECTS = Object.values(fundableProjectsDetails).flat();
+const CATEGORIES = ["All", ...new Set(ALL_PROJECTS.map((p) => p.category))];
+
 export function getCategoryFromProjectPageName(pageName: string) {
-  for (const [categoryName, projectsByCategory] of Object.entries(fundableProjectsDetails)) {
-    const project = projectsByCategory.find((project) => project.pageName === pageName);
-    if (project) {
-      return projectsByCategory;
-    }
+  for (const projects of Object.values(fundableProjectsDetails)) {
+    const found = projects.find((p) => p.pageName === pageName);
+    if (found) return projects;
   }
   return null;
 }
 
 export function MainAreaFundableProjects() {
-  return (
-    <div>
-      <h1 style={{ padding: "0" }}>Check out our projects available for funding!</h1>
+  const [active, setActive] = useState(() => {
+    if (typeof window === "undefined") return "All";
+    const param = new URLSearchParams(window.location.search).get("category");
+    return CATEGORIES.includes(param) ? param : "All";
+  });
 
-      <section id="jupyter-ecosystem">
-        <ProjectCategory
-          projectCategoryName={"Jupyter ecosystem"}
-          projectCategory={fundableProjectsDetails.jupyterEcosystem}
-        />
-      </section>
-      <section id="package-management">
-        <ProjectCategory
-          projectCategoryName={"Package management"}
-          projectCategory={fundableProjectsDetails.packageManagement}
-        />
-      </section>
-       <section id="scientific-computing">
-        <ProjectCategory
-          projectCategoryName={"Scientific computing"}
-          projectCategory={fundableProjectsDetails.scientificComputing}
-        />
-      </section>
-      <section id="apache-arrow">
-        <ProjectCategory
-          projectCategoryName={"Apache Arrow and Parquet"}
-          projectCategory={fundableProjectsDetails.apacheArrow}
-        />
-      </section>
-      <section id="propose-and-fund-a-project">
-        <h2 className={styles.project_category_header} style={{ margin: "0px" }}>Can't find a project?</h2>
-        <p style={{ marginTop: "var(--ifm-spacing-lg)" }}>If you have a project in mind that you think would be relevant to our expertise, please contact us to discuss it.</p>
-        <LinkToContact label={"CONTACT US!"} />
-      </section>
-    </div>
-  )
-}
+  useEffect(() => {
+    const url = new URL(window.location.href);
+    if (active === "All") {
+      url.searchParams.delete("category");
+    } else {
+      url.searchParams.set("category", active);
+    }
+    window.history.replaceState(null, "", url.toString());
+  }, [active]);
+
+  const visible = active === "All"
+    ? ALL_PROJECTS
+    : ALL_PROJECTS.filter((p) => p.category === active);
 
-export default function FundableProjects() {
   return (
+    <>
+      <div className={styles.filter_tags}>
+        {CATEGORIES.map((cat) => (
+          <button
+            key={cat}
+            className={styles.filter_tag + (active === cat ? " " + styles.filter_tag_active : "")}
+            onClick={() => setActive(cat)}
+          >
+            {cat}
+          </button>
+        ))}
+      </div>
+
+      <CardGrid cols={3}>
+        {visible.map((project) => (
+          <li key={project.pageName}>
+            <FundableProjectCard project={project} />
+          </li>
+        ))}
+      </CardGrid>
 
-    <div className="container upper-container-with-margin-top">
-      <div className="row">
-        <div className={"col col--2" + " " + styles.menu_sidebar}>
-          <MenuSidebar />
-        </div>
-        <div className={"col col--10 col" + " " + styles.main_area_desktop} >
-          <MainAreaFundableProjects />
-        </div >
-        <div className={"col col--12" + " " + styles.main_area_mobile} >
-          <MainAreaFundableProjects />
-        </div>
+      <div className={styles.propose_section}>
+        <h2>Can't find a project?</h2>
+        <p>If you have a project in mind that you think would be relevant to our expertise, please contact us to discuss it.</p>
+        <LinkToContact label="CONTACT US!" />
       </div>
-    </div >
+    </>
+  );
+}
 
+export default function FundableProjects() {
+  return (
+    <>
+      <Section pageTop bg="yellow">
+        <h1>Sponsor open-source work</h1>
+        <p>High-demand open-source features with detailed plans already in place — the work is scoped, the need is proven, only funding is missing. Back a project and get it shipped.</p>
+      </Section>
+      <Section>
+        <MainAreaFundableProjects />
+      </Section>
+    </>
   );
 }
diff --git a/src/components/fundable/styles.module.css b/src/components/fundable/styles.module.css
index a327b4996..c0f16fe70 100644
--- a/src/components/fundable/styles.module.css
+++ b/src/components/fundable/styles.module.css
@@ -1,11 +1,104 @@
+/* ── Filter + grid layout ──────────────────────────────── */
+
+.filter_tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ifm-spacing-sm);
+  margin-bottom: var(--ifm-spacing-xl);
+}
+
+.filter_tag {
+  padding: 6px var(--ifm-spacing-md);
+  border-radius: 20px;
+  border: 1.5px solid var(--ifm-color-secondary-s3);
+  background: transparent;
+  color: var(--ifm-color-secondary-s3);
+  font-family: var(--ifm-font-family-roboto);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s, border-color 0.15s;
+}
+
+.filter_tag:hover {
+  background: var(--ifm-color-secondary-s1);
+  color: var(--ifm-color-secondary-s2);
+  border-color: var(--ifm-color-secondary-s1);
+}
+
+.filter_tag_active {
+  background: var(--ifm-bg-emphasis);
+  color: white;
+  border-color: var(--ifm-bg-emphasis);
+}
+
+
+.fund_card {
+  gap: var(--ifm-spacing-sm);
+}
+
+.fund_card_category {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  color: var(--ifm-color-secondary-s3);
+}
+
+.fund_card_title {
+  font-family: var(--ifm-font-family-roboto);
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--ifm-color-primary-p2);
+  line-height: 1.4;
+}
+
+.fund_card_desc {
+  font-size: 13px !important;
+  color: var(--ifm-color-neutral-n1);
+  line-height: 1.5;
+  flex: 1;
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+.fund_card_footer {
+  margin-top: auto;
+  padding-top: var(--ifm-spacing-sm);
+  border-top: 1px solid var(--ifm-color-neutral-n3);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.fund_card_price {
+  font-family: var(--ifm-font-family-roboto);
+  font-size: 17px;
+  font-weight: 700;
+  color: var(--ifm-color-primary-p2);
+}
+
+.fund_card_pct {
+  font-size: 12px;
+  color: var(--ifm-color-neutral-n1);
+}
+
+.propose_section {
+  border-top: 1px solid var(--ifm-color-neutral-n3);
+  padding-top: var(--ifm-spacing-2xl);
+  margin-top: var(--ifm-spacing-xl);
+}
+
+/* ── Legacy card (kept for SmallProjectCard / ProjectCategory) ── */
+
 .small_project_card:hover {
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
 }
 
 .project_category_header {
-  font-family: var(--ifm-font-family-rubik-one);
+  font-family: var(--ifm-font-family-roboto);
   font-style: normal;
-  font-weight: 400;
+  font-weight: 700;
   line-height: 20px;
   text-align: center;
   margin-bottom: var(--ifm-spacing-xl);
@@ -15,7 +108,7 @@
 
 .project_title {
   color: var(--ifm-text-color-main-title);
-  font-family: var(--ifm-font-family-bebas-neue);
+  font-family: var(--ifm-font-family-roboto);
   font-size: 32px;
   font-style: normal;
   font-weight: 600;
@@ -43,7 +136,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(0, 0, 0, 0.3);
+  background-color: var(--ifm-overlay-background);
   z-index: 1000;
 }
 
@@ -52,7 +145,7 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  background-color: white;
+  background-color: var(--ifm-bg-neutral);
   border: 1px solid #ccc;
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
   border-radius: 20px;
@@ -96,7 +189,6 @@
 .link_to_get_a_quote {
   background-color: var(--ifm-color-orange-jupyter);
   color: white;
-  width: 358px;
   font-weight: 700;
 }
 
@@ -106,41 +198,6 @@
   margin: var(--ifm-spacing-md) 0;
 }
 
-.menu_sidebar {
-  padding: 1rem;
-  overflow-y: auto;
-}
-
-.menu_sidebar_item {
-  font-family: var(--ifm-font-family-roboto);
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 48px;
-  /* 300% */
-  letter-spacing: 0.15px;
-}
-
-.menu_sidebar_container {
-  position: fixed;
-  display: flex;
-  height: auto;
-}
-
-.menu_sidebar_indicator {
-  display: inline-block;
-  width: 6px;
-  height: 20px;
-  border-radius: 4px;
-  background-color: transparent;
-  margin-right: 10px;
-  transition: background-color 0.3s ease;
-  vertical-align: middle;
-}
-
-.active_section .menu_sidebar_indicator {
-  background-color: #D9D9D9;
-}
 
 .send_button {
   width: 258px;
@@ -158,7 +215,7 @@
 .form_label {
   font-size: 12px;
   color: var(--ifm-text-color);
-  background-color: var(--ifm-background-color);
+  background-color: var(--ifm-bg-neutral);
 }
 
 .project_information_container {
@@ -302,14 +359,6 @@
     padding: var(--ifm-spacing-md);
   }
 
-  .main_area_desktop {
-    display: none
-  }
-
-  .menu_sidebar {
-    display: none
-  }
-
   .small_project_card {
     width: 90vw;
     margin-bottom: var(--ifm-spacing-lg);
@@ -409,10 +458,6 @@
     max-height: 95vh;
   }
 
-  .main_area_desktop {
-    display: none
-  }
-
   .small_input {
     width: 400px;
     height: 56px;
@@ -435,10 +480,6 @@
     height: 200px;
   }
 
-  .menu_sidebar {
-    display: none
-  }
-
   .get_a_quote_dialog {
     width: 80vw;
     padding: 40px;
@@ -486,14 +527,6 @@
     max-height: 95vh;
   }
 
-  .main_area_mobile {
-    display: none;
-  }
-
-  .main_area_desktop {
-    padding-left: 80px;
-  }
-
   .small_input {
     width: 400px;
     height: 56px;
diff --git a/src/components/home/AboutQS/index.tsx b/src/components/home/AboutQS/index.tsx
index 14e5903d6..ee507cc4c 100644
--- a/src/components/home/AboutQS/index.tsx
+++ b/src/components/home/AboutQS/index.tsx
@@ -4,32 +4,21 @@ import LinkToAboutUs from "../LinkToAboutUs";
 
 export default function AboutQS() {
   return (
-    <div className={"container" + " " + styles.aboutQS_container}>
-      <div className={"row flex-full-centered padding-none"}>
-        <div className={"col padding-none margin-none"}>
-          <div className={styles.aboutQS_text}>
-            We are a team of expert of open-source developers, the very same
-            people behind a number of technologies that you already use.
-          </div>
+    <div className={styles.aboutQS_outer}>
+      <div className="page-content">
+        <p className={styles.aboutQS_text}>
+          We are a team of expert open-source developers, the very same
+          people behind a number of technologies that you already use.
+        </p>
+        <div className="flex-full-centered">
+          <img
+            src={GroupPhotoUrl}
+            alt="Picture showing a group of QuantStack people in front of Saint-Maur's office, in Paris area."
+            style={{ width: "100%", maxWidth: "900px" }}
+          />
         </div>
-      </div>
-      <div className={"row flex-full-centered padding-none"}>
-        <div className={"col padding-none margin-none"}>
-          <div className="flex-full-centered">
-            <img
-              src={GroupPhotoUrl}
-              alt={
-                "Picture showing a group of Quantstack people in front of Saint-Maur's office, in Paris area."
-              }
-            />
-          </div>
-        </div>
-      </div>
-      <div className={"row flex-full-centered padding-none"}>
-        <div className={"col padding-none"}>
-          <div className={styles.learn_more_button_container}>
-            <LinkToAboutUs label={"LEARN MORE ABOUT US"} />
-          </div>
+        <div className={styles.learn_more_button_container}>
+          <LinkToAboutUs label="LEARN MORE ABOUT US" />
         </div>
       </div>
     </div>
diff --git a/src/components/home/AboutQS/styles.module.css b/src/components/home/AboutQS/styles.module.css
index 90fa260f8..5db47c655 100644
--- a/src/components/home/AboutQS/styles.module.css
+++ b/src/components/home/AboutQS/styles.module.css
@@ -1,30 +1,38 @@
-@media only screen and (max-width: 996px) {
-  .aboutQS_container {
-    background-color: var(--ifm-color-secondary-s2);
-    color: white;
-    padding: var(--ifm-spacing-2xl) var(--ifm-spacing-2xl) 0
-      var(--ifm-spacing-2xl);
-    text-align: center;
-  }
+.aboutQS_outer {
+  background: var(--ifm-bg-emphasis);
+  color: white;
+  padding: var(--ifm-spacing-2xl) 0;
+}
 
-  .aboutQS_text {
-    font-size: 14px;
-    text-align: center;
-    margin-bottom: var(--ifm-spacing-xl);
-  }
+.aboutQS_text {
+  font-size: 14px;
+  text-align: center;
+  margin-bottom: var(--ifm-spacing-xl);
+}
+
+.learn_more_button_container {
+  display: flex;
+  justify-content: center;
+  margin-top: var(--ifm-spacing-xl);
+}
+
+.learn_more_button_container :global(.link-to-button) {
+  background: var(--ifm-color-accent-yellow);
+  color: var(--ifm-color-primary-p2);
+}
+
+.learn_more_button_container :global(.link-to-button):hover {
+  color: var(--ifm-color-primary-p2);
+  box-shadow: 0 8px 28px rgba(252, 241, 43, 0.5);
 }
 
-@media only screen and (min-width: 996px) {
-  .aboutQS_container {
-    background-color: var(--ifm-color-primary-p1);
-    color: var(--ifm-color-primary-p2);
-    padding: var(--ifm-spacing-2xl) var(--ifm-spacing-5xl) 0
-      var(--ifm-spacing-5xl);
+@media (min-width: 996px) {
+  .aboutQS_outer {
+    padding: var(--ifm-spacing-4xl) 0;
   }
 
   .aboutQS_text {
     font-size: 24px;
-    text-align: center;
     margin-bottom: var(--ifm-spacing-lg);
   }
 }
diff --git a/src/components/home/Hero/Banner.tsx b/src/components/home/Hero/Banner.tsx
index f70731341..bad3f969f 100644
--- a/src/components/home/Hero/Banner.tsx
+++ b/src/components/home/Hero/Banner.tsx
@@ -9,7 +9,7 @@ export default function Banner() {
             <div className={styles.banner_container_small}>
                 <div className={styles.banner_text_overlay}>
                     <div className={styles.banner_text_overlay_title}>Introducing <span className={styles.notebook_link}>Notebook.link</span></div>
-                    <div className={styles.banner_text_overlay_subtile}>The future of notebook sharing</div>
+                    <div className={styles.banner_text_overlay_subtitle}>The future of notebook sharing</div>
                     <LinkToNotebookLink label={"Get started"} />
                 </div>
             </div>
@@ -17,21 +17,21 @@ export default function Banner() {
                 
                 <div className={styles.banner_text_overlay}>
                     <div className={styles.banner_text_overlay_title}>Introducing <span className={styles.notebook_link}>Notebook.link</span></div>
-                    <div className={styles.banner_text_overlay_subtile}>The future of notebook sharing</div>
+                    <div className={styles.banner_text_overlay_subtitle}>The future of notebook sharing</div>
                     <LinkToNotebookLink label={"Get started"} />
                 </div>
             </div>
             <div className={styles.banner_container_large}>
                 <div className={styles.banner_text_overlay}>
                     <div className={styles.banner_text_overlay_title}>Introducing <span className={styles.notebook_link}>Notebook.link</span></div>
-                    <div className={styles.banner_text_overlay_subtile}>The future of notebook sharing</div>
+                    <div className={styles.banner_text_overlay_subtitle}>The future of notebook sharing</div>
                     <LinkToNotebookLink label={"Get started"} />
                 </div>
             </div>
             <div className={styles.banner_container_very_large}>
                 <div className={styles.banner_text_overlay}>
                     <div className={styles.banner_text_overlay_title}>Introducing <span className={styles.notebook_link}>Notebook.link</span></div>
-                    <div className={styles.banner_text_overlay_subtile}>The future of notebook sharing</div>
+                    <div className={styles.banner_text_overlay_subtitle}>The future of notebook sharing</div>
                     <LinkToNotebookLink label={"Get started"} />
                 </div>
             </div>
diff --git a/src/components/home/Hero/LogosTableBy8.tsx b/src/components/home/Hero/LogosTableBy8.tsx
deleted file mode 100644
index 1f485e89e..000000000
--- a/src/components/home/Hero/LogosTableBy8.tsx
+++ /dev/null
@@ -1,382 +0,0 @@
-import styles from "./styles.module.css";
-import BloombergLogoUrl from "@site/static/img/logos/Bloomberg.png";
-import SGLogoUrl from "@site/static/img/logos/SG.png";
-import RapyutaLogoUrl from "@site/static/img/logos/Rapyuta.png";
-import CFMLogoUrl from "@site/static/img/logos/CFM.png";
-import EngieLogoUrl from "@site/static/img/logos/Engie.png";
-import JRCLogoUrl from "@site/static/img/logos/JRC.png";
-import ERDCLogoUrl from "@site/static/img/logos/ERDC.png";
-import PandaLogoUrl from "@site/static/img/logos/Panda.png";
-import UniversiteParisCiteLogoUrl from "@site/static/img/logos/UniversiteParisCite.png";
-import AirbusLogoUrl from "@site/static/img/logos/Airbus.png";
-import INRIALogoUrl from "@site/static/img/logos/INRIA.png";
-import CNAMLogoUrl from "@site/static/img/logos/CNAM.png";
-import NatixisLogoUrl from "@site/static/img/logos/Natixis.png";
-import NumfocusLogoUrl from "@site/static/img/logos/Numfocus.png";
-import RobocorpLogoUrl from "@site/static/img/logos/Robocorp.png";
-import CalPolyLogoUrl from "@site/static/img/logos/CalPoly.png";
-import MaxFordhamLogoUrl from "@site/static/img/logos/MaxFordham.png";
-import GainTheoryUrl from "@site/static/img/logos/GainTheory.png";
-import EnthoughtLogoUrl from "@site/static/img/logos/Enthought.png";
-import CressetLogoUrl from "@site/static/img/logos/Cresset.png";
-import TDKLogoUrl from "@site/static/img/logos/TDK.png";
-import HarvardLogoUrl from "@site/static/img/logos/Harvard.png";
-import EMBLLogoUrl from "@site/static/img/logos/EMBL.png";
-import QuantCoUrl from "@site/static/img/logos/QuantCo.png";
-import VoltronDataLogoUrl from "@site/static/img/logos/VoltronData.png";
-import SafranLogoUrl from "@site/static/img/logos/Safran.png";
-import DEShawLogoUrl from "@site/static/img/logos/DEShaw.png";
-import UniversiteParisSaclayLogoUrl from "@site/static/img/logos/UniversiteParisSaclay.png";
-import UnitedRoboticsLogoUrl from "@site/static/img/logos/UnitedRobotics.png";
-import CEALogoUrl from "@site/static/img/logos/CEA.png";
-import EcolePolytechniqueLogoUrl from "@site/static/img/logos/EcolePolytechnique.png";
-import ESALogoUrl from "@site/static/img/logos/ESA.png";
-import CNESLogoUrl from "@site/static/img/logos/CNES.png";
-import GatesFoundationLogoUrl from "@site/static/img/logos/GatesFoundation.png";
-import SovereignTechAgencyLogoUrl from "@site/static/img/logos/SovereignTechAgency.png";
-
-import Slider from "react-slick";
-// Import css files
-import "slick-carousel/slick/slick.css";
-import "slick-carousel/slick/slick-theme.css";
-
-export default function SimpleSlider() {
-  let settings = {
-    dots: true,
-    infinite: true,
-    speed: 1000,
-    slidesToShow: 1,
-    slidesToScroll: 1,
-    arrows: false,
-    autoplay: true,
-  };
-  return (
-    <Slider {...settings} style={{ maxWidth: "1500px", justifyContent: "center" }}>
-      <div>
-        <LogosTable1 />
-      </div>
-      <div>
-        <LogosTable2 />
-      </div>
-      <div>
-        <LogosTable3 />
-      </div>
-      <div>
-        <LogosTable4 />
-      </div>
-      <div>
-        <LogosTable5 />
-      </div>
-    </Slider>
-  );
-}
-
-export function LogosTable1() {
-  return (
-    <div className={"container" + " " + styles.table_with_8_customers}>
-      <div className="row row--no-gutters">
-        <div className={"col col--3 flex-full-centered"}>
-          <img
-            src={BloombergLogoUrl}
-            className={styles.customer_logo}
-            alt={"Logo of Bloomberg."}
-          />
-        </div>
-        <div className={"col col--3 flex-full-centered"}>
-          <img
-            src={SGLogoUrl}
-            className={styles.customer_logo}
-            alt={"Logo of Société Générale bank."}
-          />
-        </div>
-        <div className={"col col--3 flex-full-centered"}>
-          <img
-            src={RapyutaLogoUrl}
-            className={styles.customer_logo}
-            alt={"Logo of Rapyuta company."}
-          />
-        </div>
-        <div className="col col--3 flex-full-centered">
-          <img
-            src={CFMLogoUrl}
-            className={styles.customer_logo}
-            alt={"Logo of CFM) "}
-          />
-        </div>
-      </div>
-      <div className="row row--no-gutters">
-        <div className="col col--3 flex-full-centered">
-          <img
-            src={EngieLogoUrl}
-            className={styles.customer_logo}
-            alt={"Logo of Engie company."}
-          />
-        </div>
-        <div className="col col--3 flex-full-centered">
-          <img
-            src={JRCLogoUrl}
-            className={styles.customer_logo}
-            alt={"Logo of JRC."}
-            style={{ width: "100px" }}
-          />
-        </div>
-
-        <div className="col col--3 flex-full-centered">
-          <img
-            src={ERDCLogoUrl}
-            className={styles.customer_logo}
-            alt={"Logo of ERDC."}
-          />
-        </div>
-        <div className="col col--3 flex-full-centered">
-          <img
-            src={PandaLogoUrl}
-            className={styles.customer_logo}
-            alt={"Logo of Panda company."}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export function LogosTable2() {
-  return (
-    <div className={"container" + " " + styles.table_with_8_customers}>
-      <div className="row row--no-gutters">
-        <div className="col col--3 flex-full-centered">
-          <img
-            src={UniversiteParisCiteLogoUrl}
-            className={styles.customer_logo}
-            alt={"Logo of Paris Cité Université."}
-          />
-        </div>
-        <div className="col col--3 flex-full-centered">
-          <img
-            src={AirbusLogoUrl}
-            className={styles.customer_logo}
-            alt={"Logo of Airbus company."}
-          />
-        </div>
-        <div className="col col--3 flex-full-centered">
-          <img
-            src={INRIALogoUrl}
-            className={styles.customer_logo}
-            alt={"Logo of INRIA."}
-          />
-        </div>
-        <div className="col col--3 flex-full-centered">
-          <img
-            src={CNAMLogoUrl}
-            className={styles.customer_logo}
-            alt={"Logo of CNAM."}
-          />
-        </div>
-      </div>
-      <div className="row row--no-gutters">
-        <div className="col col--3 flex-full-centered">
-          <img
-            src={NatixisLogoUrl}
-            className={styles.customer_logo}
-            alt={"Logo of Natixis bank."}
-          />
-        </div>
-        <div className="col col--3 flex-full-centered">
-          <img
-            src={NumfocusLogoUrl}
-            className={styles.customer_logo}
-            alt={"Logo of Numfocus foundation."}
-          />
-        </div>
-        <div className="col col--3 flex-full-centered">
-          <img
-            src={RobocorpLogoUrl}
-            className={styles.customer_logo}
-            alt={"Logo of Robocorp company."}
-          />
-        </div>
-        <div className="col col--3 flex-full-centered">
-          <img
-            src={CalPolyLogoUrl}
-            className={styles.customer_logo}
-            alt={"Logo of CalPoly University."}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export function LogosTable3() {
-  return (
-    <div className={"container" + " " + styles.table_with_8_customers}>
-      <div className="row row--no-gutters">
-        <div className="col col--3 flex-full-centered">
-          <img
-            src={MaxFordhamLogoUrl}
-            className={styles.customer_logo}
-            alt={"Logo of MaxFordham company."}
-          />
-        </div>
-        <div className="col col--3 flex-full-centered">
-          <img
-            src={GainTheoryUrl}
-            className={styles.customer_logo}
-            alt={"Logo of Gain Theory company."}
-            style={{ width: "60px" }}
-          />
-        </div>
-
-        <div className="col col--3 flex-full-centered">
-          <img
-            src={EnthoughtLogoUrl}
-            className={styles.customer_logo}
-            alt={"Logo of Enthought company."}
-          />
-        </div>
-        <div className="col col--3 flex-full-centered">
-          <img
-            src={CressetLogoUrl}
-            className={styles.customer_logo}
-            alt={"Logo of Cresset company."}
-          />
-        </div>
-      </div>
-      <div className="row row--no-gutters">
-        <div className="col col--3 flex-full-centered">
-          <img
-            src={TDKLogoUrl}
-            className={styles.customer_logo}
-            alt={"Logo of TDK company."}
-            style={{ width: "60px" }}
-          />
-        </div>
-        <div className="col col--3 flex-full-centered">
-          <img
-            src={HarvardLogoUrl}
-            className={styles.customer_logo}
-            alt={"Logo of Harvard University."}
-          />
-        </div>
-        <div className="col col--3 flex-full-centered">
-          <img
-            src={EMBLLogoUrl}
-            className={styles.customer_logo}
-            alt={"Logo of EMBL."}
-          />
-        </div>
-        <div className="col col--3 flex-full-centered">
-          <img
-            src={QuantCoUrl}
-            className={styles.customer_logo}
-            alt={"Logo of QuantCo company."}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export function LogosTable4() {
-  return (
-    <div className={"container" + " " + styles.table_with_8_customers}>
-      <div className="row row--no-gutters">
-        <div className="col col--3 flex-full-centered">
-          <img
-            src={VoltronDataLogoUrl}
-            className={styles.customer_logo}
-            alt={"Logo of Voltron Data company."}
-            style={{ width: "140px" }}
-          />
-        </div>
-        <div className="col col--3 flex-full-centered">
-          <img
-            src={SafranLogoUrl}
-            className={styles.customer_logo}
-            alt={"Logo of Safran company."}
-          />
-        </div>
-        <div className="col col--3 flex-full-centered">
-          <img
-            src={DEShawLogoUrl}
-            className={styles.customer_logo}
-            alt={"Logo of DE Shaw company."}
-          />
-        </div>
-        <div className="col col--3 flex-full-centered">
-          <img
-            src={UniversiteParisSaclayLogoUrl}
-            className={styles.customer_logo}
-            alt={"Logo of Université Paris Saclay."}
-          />
-        </div>
-      </div>
-      <div className="row row--no-gutters">
-        <div className="col col--3 flex-full-centered">
-          <img
-            src={UnitedRoboticsLogoUrl}
-            className={styles.customer_logo}
-            alt={"Logo of United Robotics company."}
-          />
-        </div>
-        <div className="col col--3 flex-full-centered">
-          <img
-            src={CEALogoUrl}
-            className={styles.customer_logo}
-            style={{ width: "60px" }}
-            alt={"Logo of CEA."}
-          />
-        </div>
-        <div className="col col--3 flex-full-centered">
-          <img
-            src={EcolePolytechniqueLogoUrl}
-            className={styles.customer_logo}
-            alt={"Logo of Ecole Polytechnique."}
-            style={{ width: "80px" }}
-          />
-        </div>
-        <div className="col col--3 flex-full-centered">
-          <img
-            src={ESALogoUrl}
-            className={styles.customer_logo}
-            alt={"Logo of ESA."}
-            style={{ width: "80px" }}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export function LogosTable5() {
-  return (
-    <div className={"container" + " " + styles.table_with_8_customers}>
-      <div className="row row--no-gutters">
-        <div className="col col--3 flex-full-centered">
-          <img
-            src={CNESLogoUrl}
-            className={styles.customer_logo}
-            alt={"Logo of CNES."}
-            style={{ width: "80px" }}
-          />
-        </div>
-        <div className="col col--3 flex-full-centered">
-          <img
-            src={GatesFoundationLogoUrl}
-            className={styles.customer_logo}
-            alt={"Logo of Gates Foundation."}
-            style={{ width: "120px" }}
-          />
-        </div>
-        <div className="col col--3 flex-full-centered">
-          <img
-            src={SovereignTechAgencyLogoUrl}
-            className={styles.customer_logo}
-            alt={"Logo of the Sovereign Tech Agency."}
-            style={{ width: "100px" }}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/home/Hero/index.tsx b/src/components/home/Hero/index.tsx
index 8dfa4ea7a..d111e2ba4 100644
--- a/src/components/home/Hero/index.tsx
+++ b/src/components/home/Hero/index.tsx
@@ -1,58 +1,31 @@
 import styles from "./styles.module.css";
-import SimpleSlider from "./LogosTableBy8";
 import Astronaut from "/img/quantstack/astronaut.svg";
 import Banner from "./Banner";
 
-
 export function Hero() {
   return (
     <div className={styles.hero_container}>
-      <Banner/>
-      <div className={styles.banner_image}>
-      </div>
-      <div className="main-container-with-margins">
-        <div>
-          <div className={"row row--no-gutters flex-full-centered"}>
-            <div className="col col--6 col--offset-1">
-              <h1 className="padding-none">
-                Open-source for discovery, science, and education
-              </h1>
-              <p className={styles.subheader}>
-                A team behind major open-source projects of the scientific
-                computing ecosystem
-              </p>
-              <h2 className={styles.h2_custom}>
-                Jupyter, Conda-forge, Mamba, Voilà, Xtensor and more.
-              </h2>
-            </div>
-
-            <div
-              className={
-                "col col--3 col--offset-1 flex-full-centered" +
-                " " +
-                styles.astronaut_column
-              }
-            >
-              <Astronaut
-                alt={"Astronaut mascot of QuantStack"}
-                width={"300px"}
-                height={"300px"}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-      <div className="main-container-with-margins">
-        <div className={"container" + " " + styles.logos_carousel}>
-          <div className="row">
-            <div className="col col--12 col">
-              <div className={styles.worked_with}> We have worked with </div>
-            </div>
+      <Banner />
+      <div className="page-content">
+        <div className={styles.hero_body}>
+          <div className={styles.hero_text}>
+            <h1 className="padding-none">
+              Open-source for discovery, science, and education
+            </h1>
+            <p className={styles.sub_header}>
+              A team behind major open-source projects of the scientific
+              computing ecosystem
+            </p>
+            <p className={styles.tech_tagline}>
+              Jupyter, Conda-forge, Mamba, Voilà, Xtensor and more.
+            </p>
           </div>
-          <div className="row" >
-            <div className="col col--12" style={{display:"flex", justifyContent: "center"}}>
-              <SimpleSlider />
-            </div>
+          <div className={styles.hero_image}>
+            <Astronaut
+              alt="Astronaut mascot of QuantStack"
+              width="300px"
+              height="300px"
+            />
           </div>
         </div>
       </div>
diff --git a/src/components/home/Hero/styles.module.css b/src/components/home/Hero/styles.module.css
index 89e31f669..4c211c8d5 100644
--- a/src/components/home/Hero/styles.module.css
+++ b/src/components/home/Hero/styles.module.css
@@ -1,5 +1,7 @@
-.h2_custom {
+.tech_tagline {
   color: var(--ifm-color-blue-jupyter);
+  font-size: var(--ifm-font-size-secondary-title);
+  font-weight: 700;
 }
 
 .sub_header {
@@ -7,13 +9,39 @@
 }
 
 .hero_container {
-  background-color: var(--ifm-color-primary-p0);
+  background-color: var(--ifm-bg-brand);
   padding-bottom: var(--ifm-spacing-3xl);
+  margin-top: calc(-1 * var(--ifm-navbar-height));
+}
+
+.hero_body {
+  display: flex;
+  align-items: center;
+  gap: var(--ifm-spacing-2xl);
+  padding: var(--ifm-spacing-xl) 0 var(--ifm-spacing-3xl);
+}
+
+.hero_text {
+  flex: 3;
+  min-width: 0;
 }
 
-.row_max_width {
-  max-width: 1500px;
+.hero_image {
+  flex: 2;
   display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@media (max-width: 996px) {
+  .hero_body {
+    flex-direction: column;
+    padding: var(--ifm-spacing-xl) 0;
+  }
+
+  .hero_image {
+    display: none;
+  }
 }
 
 .banner_container_small {
@@ -72,12 +100,11 @@
 }
 
 .banner_text_overlay {
-  margin-top: 50px;
+  margin-top: calc(var(--ifm-navbar-height) + 96px);
   margin-left: auto;
   margin-right: auto;
   text-align: center;
   color: white;
-  /* or whatever contrasts with your SVG */
   font-size: 2rem;
   font-family: var(--ifm-font-family-kode-mono);
 }
@@ -95,7 +122,7 @@
 }
 
 .notebook_link {
-  color: #FCF12B;
+  color: var(--ifm-color-accent-yellow);
   font-weight: 700;
   font-style: bold;
   line-height: 100%;
@@ -103,123 +130,58 @@
 }
 
 :global(.link-to-button).link_to_notebook_link {
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(135deg,
-      #5242FF,
-      #2A2A2A);
-  color: white;
-  width: 358px;
+  background: var(--ifm-color-accent-yellow);
+  color: var(--ifm-color-primary-p2);
+  width: auto;
+  padding: 14px 40px;
   font-weight: 700;
   font-family: var(--ifm-font-family-roboto);
-  font-weight: 600;
-  font-size: 24px;
+  font-size: 18px;
+  letter-spacing: 0.5px;
+  border-radius: 35px;
+  animation: notebookLinkGlow 2.5s ease-in-out infinite;
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
 }
 
-@media only screen and (max-width: 576px) {
+:global(.link-to-button).link_to_notebook_link:hover {
+  transform: scale(1.05);
+  animation: none;
+  box-shadow: 0 0 32px rgba(252, 241, 43, 0.85);
+}
 
-  /*Mobile*/
-  .logos_carousel {
-    display: none;
+@keyframes notebookLinkGlow {
+  0%, 100% {
+    box-shadow: 0 0 10px rgba(252, 241, 43, 0.3), 0 0 24px rgba(252, 241, 43, 0.12);
   }
-
-  .banner_container_medium {
-    display: none
+  50% {
+    box-shadow: 0 0 22px rgba(252, 241, 43, 0.7), 0 0 48px rgba(252, 241, 43, 0.3);
   }
+}
 
-  .banner_container_large {
-    display: none
-  }
 
-  .banner_container_very_large {
-    display: none
-  }
+@media only screen and (max-width: 576px) {
+  .banner_container_medium { display: none }
+  .banner_container_large { display: none }
+  .banner_container_very_large { display: none }
 }
 
 @media screen and (min-width: 576px) and (max-width: 996px) {
-
-  /*Tablet*/
-  .logos_carousel {
-    display: none;
-  }
-
-  .banner_container_small {
-    display: none
-  }
-
-  .banner_container_large {
-    display: none
-  }
-
-  .banner_container_very_large {
-    display: none
-  }
+  .banner_container_small { display: none }
+  .banner_container_large { display: none }
+  .banner_container_very_large { display: none }
 }
 
 @media screen and (min-width: 996px) and (max-width: 1511px) {
-
-  /*Desktop: small screen*/
-  .table_with_8_customers {
-    margin-bottom: var(--ifm-spacing-xl);
-  }
-
-  .customer_logo {
-    filter: grayscale(1);
-    width: 100px;
-  }
-
-  .worked_with {
-    font-size: 24px;
-    font-weight: 200;
-    font-family: var(--ifm-font-family-rubik-one);
-    color: var(--ifm-color-primary-p2);
-    text-align: center;
-    margin: var(--ifm-spacing-2xl) 0;
-  }
-
-  .banner_container_small {
-    display: none
-  }
-
-  .banner_container_medium {
-    display: none
-  }
-
-  .banner_container_very_large {
-    display: none
-  }
+  .banner_container_small { display: none }
+  .banner_container_medium { display: none }
+  .banner_container_very_large { display: none }
 }
 
 @media only screen and (min-width: 1511px) {
-  /* Desktop : large screen*/
-  .table_with_8_customers {
-    margin-bottom: var(--ifm-spacing-xl);
-  }
-
-  .customer_logo {
-    filter: grayscale(1);
-    width: 100px;
-  }
-
-  .worked_with {
-    font-size: 24px;
-    font-weight: 200;
-    font-family: var(--ifm-font-family-rubik-one);
-    color: var(--ifm-color-primary-p2);
-    text-align: center;
-    margin: var(--ifm-spacing-2xl) 0;
-  }
-
-  .banner_container_small {
-    display: none
-  }
-
-  .banner_container_medium {
-    display: none
-  }
-
-  .banner_container_large {
-    display: none
-  }
+  .banner_container_small { display: none }
+  .banner_container_medium { display: none }
+  .banner_container_large { display: none }
 }
\ No newline at end of file
diff --git a/src/components/home/Home.tsx b/src/components/home/Home.tsx
index 9c3c95ca3..0a224030b 100644
--- a/src/components/home/Home.tsx
+++ b/src/components/home/Home.tsx
@@ -1,5 +1,6 @@
 
 import Hero from "./Hero";
+import TrustedBy from "./TrustedBy";
 import WhatWeDo from "./WhatWeDo";
 import ProjectsOverview from "./ProjectsOverview";
 import AboutQS from "./AboutQS";
@@ -11,6 +12,7 @@ export function Home(): JSX.Element {
   return (
    <>
       <Hero />
+      <TrustedBy />
       <WhatWeDo />
       <ProjectsOverview />
       <AboutQS />
diff --git a/src/components/home/LearnMore/index.tsx b/src/components/home/LearnMore/index.tsx
index ce20d37e8..4376b8751 100644
--- a/src/components/home/LearnMore/index.tsx
+++ b/src/components/home/LearnMore/index.tsx
@@ -1,13 +1,15 @@
+import Banner from "../../layout/Banner";
 import LinkToContact from "../LinkToContact";
-import styles from "./styles.module.css";
 
 export default function LearnMore() {
   return (
-    <div className={"blue-banner-container" + " " + styles.learn_more_container}>
-      <div className="blue-banner-header">Want to learn more?</div>
+    <Banner
+      bg="dark"
+      title="Want to learn more?"
+      cta={<LinkToContact label={"SCHEDULE A MEETING"} />}
+    >
       Schedule a meeting and benefit from our expertise on Jupyter, Conda-forge,
       high-performance computing, and open-source development.
-      <LinkToContact label={"SCHEDULE A MEETING"} />
-    </div>
+    </Banner>
   );
 }
diff --git a/src/components/home/News/index.tsx b/src/components/home/News/index.tsx
index fa594a3e2..b2d1a5927 100644
--- a/src/components/home/News/index.tsx
+++ b/src/components/home/News/index.tsx
@@ -1,46 +1,30 @@
+import styles from "./styles.module.css";
 import BlogpostCard from "../../blog/BlogpostCard";
 import { blogpostsDetails } from "../../blog/blogpostsDetails";
-import styles from "./styles.module.css";
+import CardGrid from "../../layout/CardGrid";
+import Section from "../../layout/Section";
 import LinkToBlogs from "../LinkToBlogs";
 
 export default function News() {
   const numberOfBlogs = blogpostsDetails.length;
   return (
-    <div className={"container" + " " + styles.news_container}>
-      <div className={"row flex-full-centerd"}>
-        <div className="col col--10 col--offset-1">
-          <h2 className="text--center">Recent blog contributions</h2>
+    <div className={styles.news_wrapper}>
+      <Section>
+        <h2 className="text--center">Recent blog contributions</h2>
+        <CardGrid cols={3}>
+          {[0, 1, 2].map((i) => (
+            <li key={i}>
+              <BlogpostCard
+                blogpost={blogpostsDetails[i]}
+                timeIndex={numberOfBlogs - i}
+              />
+            </li>
+          ))}
+        </CardGrid>
+        <div className="flex-full-centered" style={{ marginTop: "var(--ifm-spacing-xl)" }}>
+          <LinkToBlogs label="READ MORE POSTS" />
         </div>
-        <div className="spacing-2xl"></div>
-      </div>
-      <ul className={"row flex-full-centered"}>
-        <li className="cards-list">
-          <div className="col">
-            <BlogpostCard
-              blogpost={blogpostsDetails[0]}
-              timeIndex={numberOfBlogs}
-            />
-          </div>
-        </li>
-        <li className="cards-list">
-          <div className="col col--2 col--offset-1">
-            <BlogpostCard
-              blogpost={blogpostsDetails[1]}
-              timeIndex={numberOfBlogs - 1}
-            />
-          </div>
-        </li>
-        <li className="cards-list">
-          <div className="col col--2 col--offset-1">
-            <BlogpostCard
-              blogpost={blogpostsDetails[2]}
-              timeIndex={numberOfBlogs - 2}
-            />
-          </div>
-        </li>
-      </ul>
-
-      <LinkToBlogs label={"READ MORE POSTS"} />
+      </Section>
     </div>
   );
 }
diff --git a/src/components/home/News/styles.module.css b/src/components/home/News/styles.module.css
index 2096f772d..ef3cf3ffe 100644
--- a/src/components/home/News/styles.module.css
+++ b/src/components/home/News/styles.module.css
@@ -1,10 +1,5 @@
-@media only screen and (max-width: 996px) {
-  /*Mobile */
-  .news_container {
+@media (max-width: 996px) {
+  .news_wrapper {
     display: none;
   }
 }
-
-.news_container {
-  margin-top: var(--ifm-spacing-2xl);
-}
diff --git a/src/components/home/ProjectsOverview/Computing.tsx b/src/components/home/ProjectsOverview/Computing.tsx
index 1ce02eaaf..b1a93cb13 100644
--- a/src/components/home/ProjectsOverview/Computing.tsx
+++ b/src/components/home/ProjectsOverview/Computing.tsx
@@ -1,26 +1,16 @@
+import SplitSection from "../../layout/SplitSection";
 import styles from "./styles.module.css";
-import ComputingMD from "@site/src/components/home/ProjectsOverview/descriptions/Computing.md";
+import ComputingMD from "./descriptions/Computing.md";
 import XTensorXSIMDPicture from "@site/static/img/projects/xtensor_xsimd.svg";
 
 export default function ComputingProjects() {
   return (
-    <div className={styles.container_projects}>
-      <div className="row-max-width">
-        <div
-          className={"col col--6" + " " + styles.col_project_overview_with_padding}
-        >
-          <h1 className="padding-none">Scientific computing </h1>
-          <h2 className={styles.h2_custom}>
-            Supporting the development of several C++ scientific computing
-            packages.
-          </h2>
-
-          <ComputingMD />
-        </div>
-        <div className={"col col--6 flex-full-centered"+ " " + styles.col_project_overview_with_padding}>
-          <XTensorXSIMDPicture width={"500px"}/>
-        </div>
-      </div>
-    </div>
+    <SplitSection
+image={<XTensorXSIMDPicture style={{ maxWidth: "100%" }} />}
+    >
+      <h2 className="padding-none">Scientific computing</h2>
+      <p className={styles.tagline}>Supporting the development of several C++ scientific computing packages.</p>
+      <ComputingMD />
+    </SplitSection>
   );
 }
diff --git a/src/components/home/ProjectsOverview/DataAnalysis.tsx b/src/components/home/ProjectsOverview/DataAnalysis.tsx
index 577026a13..4c0a81194 100644
--- a/src/components/home/ProjectsOverview/DataAnalysis.tsx
+++ b/src/components/home/ProjectsOverview/DataAnalysis.tsx
@@ -1,24 +1,17 @@
+import SplitSection from "../../layout/SplitSection";
 import styles from "./styles.module.css";
-import DataAnalysisMD from "@site/src/components/home/ProjectsOverview/descriptions/DataAnalysis.md";
+import DataAnalysisMD from "./descriptions/DataAnalysis.md";
 import ApacheArrowPicture from "@site/static/img/projects/apache_arrow.svg";
 
 export default function DataAnalysisProjects() {
   return (
-    <div className={styles.container_projects + " "+ styles.project_light_yellow} style={{paddingBottom : "0px"}}>
-     <div className="row-max-width">
-        <div
-          className={"col col--6" + " " + styles.col_project_overview_with_padding}
-        >
-          <h1 className="padding-none">Data Analysis </h1>
-          <h2 className={styles.h2_custom}>
-            Supporting the development of key data analysis technologies.
-          </h2>
-          <DataAnalysisMD />
-        </div>
-        <div className={"col col--6"+ " " + "flex-full-centered" + " " + styles.col_project_overview_with_padding}>
-          <ApacheArrowPicture width={"500px"}/>
-        </div>
-      </div>
-    </div>
+    <SplitSection
+      reverse
+      image={<ApacheArrowPicture style={{ maxWidth: "100%" }} />}
+    >
+      <h2 className="padding-none">Data Analysis</h2>
+      <p className={styles.tagline}>Supporting the development of key data analysis technologies.</p>
+      <DataAnalysisMD />
+    </SplitSection>
   );
 }
diff --git a/src/components/home/ProjectsOverview/Jupyter.tsx b/src/components/home/ProjectsOverview/Jupyter.tsx
index 580800442..5cb8ee116 100644
--- a/src/components/home/ProjectsOverview/Jupyter.tsx
+++ b/src/components/home/ProjectsOverview/Jupyter.tsx
@@ -1,28 +1,16 @@
+import SplitSection from "../../layout/SplitSection";
 import styles from "./styles.module.css";
 import JupyterMD from "./descriptions/Jupyter.md";
 import JupyterPictureUrl from "@site/static/img/projects/jupyterlab_examples.png";
 
 export default function JupyterProject() {
   return (
-    <div
-      className={styles.container_projects}
-      style={{
-        marginTop: "var(--ifm-spacing-4xl)",
-      }}
+    <SplitSection
+image={<img src={JupyterPictureUrl} alt={"Picture showing two jupyterlab user interfaces"} style={{ maxWidth: "100%" }} />}
     >
-      <div className="row-max-width">
-        <div className={"col col--6" + " " + styles.col_project_overview_with_padding}>
-          <h1 className="padding-none">Jupyter project </h1>
-          <h2 className={styles.h2_custom}>We strive to sustain the project in the long term.</h2>
-         <JupyterMD/>
-        </div>
-
-        <div
-          className={"col col--6 flex-full-centered"+" " +styles.col_project_overview_with_padding}
-        >
-          <img src={JupyterPictureUrl} width={"540px"} alt={"Picture showing two jupyterlab user interfaces"}/>
-        </div>
-      </div>
-    </div>
+      <h2 className="padding-none">Jupyter project</h2>
+      <p className={styles.tagline}>We strive to sustain the project in the long term.</p>
+      <JupyterMD />
+    </SplitSection>
   );
 }
diff --git a/src/components/home/ProjectsOverview/Robotics.tsx b/src/components/home/ProjectsOverview/Robotics.tsx
index 3374bb199..f73f6a870 100644
--- a/src/components/home/ProjectsOverview/Robotics.tsx
+++ b/src/components/home/ProjectsOverview/Robotics.tsx
@@ -1,40 +1,17 @@
+import SplitSection from "../../layout/SplitSection";
 import styles from "./styles.module.css";
-import RoboticsMD from "@site/src/components/home/ProjectsOverview/descriptions/Robotics.md";
+import RoboticsMD from "./descriptions/Robotics.md";
 import RoboticsPictureUrl from "@site/static/img/projects/robotics.png";
 
 export default function RoboticsProjects() {
   return (
-    <div className={styles.container_projects + " "+ styles.project_light_yellow}>
-      <div className="row-max-width">
-        <div
-          className={
-            "col col--6" + " " + styles.col_project_overview_with_padding
-          }
-        >
-          <h1 className="padding-none">Robotics </h1>
-          <h2 className={styles.h2_custom}>
-            We just kicked off a new initiative to Robotics education.
-          </h2>
-          <RoboticsMD />
-        </div>
-        <div
-          className={
-            "col col--6" +
-            " " +
-            "flex-full-centered" +
-            " " +
-            styles.col_project_overview_with_padding
-          }
-        >
-          <img
-            src={RoboticsPictureUrl}
-            width={"640px"}
-            alt={
-              "Picture showing two jupyterlab user interfaces displaying robotics projects."
-            }
-          />
-        </div>
-      </div>
-    </div>
+    <SplitSection
+      reverse
+      image={<img src={RoboticsPictureUrl} alt={"Picture showing two jupyterlab user interfaces displaying robotics projects."} style={{ maxWidth: "100%" }} />}
+    >
+      <h2 className="padding-none">Robotics</h2>
+      <p className={styles.tagline}>We just kicked off a new initiative to Robotics education.</p>
+      <RoboticsMD />
+    </SplitSection>
   );
 }
diff --git a/src/components/home/ProjectsOverview/RoboticsReverse.tsx b/src/components/home/ProjectsOverview/RoboticsReverse.tsx
deleted file mode 100644
index 54a99d39e..000000000
--- a/src/components/home/ProjectsOverview/RoboticsReverse.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import styles from "./styles.module.css";
-import RoboticsMD from "@site/src/components/home/ProjectsOverview/descriptions/Robotics.md";
-import RoboticsPictureUrl from "@site/static/img/projects/robotics.png";
-
-export default function RoboticsProjects() {
-  return (
-    <div className={styles.container_projects}>
-      <div className="row-max-width">
-        <div
-          className={
-            "col col--6 flex-full-centered" +
-            " " +
-            styles.col_project_overview_with_padding
-          }
-        >
-          <img src={RoboticsPictureUrl} width={"640px"} alt={"Picture showing two jupyterlab user interfaces displaying robotics projects."}/>
-        </div>
-        <div className={"col col--6" + " " + styles.col_project_overview_with_padding}>
-          <h1 className="padding-none">Robotics </h1>
-          <h2 className={styles.h2_custom}>
-            We just kicked off a new initiative to Robotics education.
-          </h2>
-          <RoboticsMD />
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/home/ProjectsOverview/SpecialProjects.tsx b/src/components/home/ProjectsOverview/SpecialProjects.tsx
index e624bf2f8..d74056611 100644
--- a/src/components/home/ProjectsOverview/SpecialProjects.tsx
+++ b/src/components/home/ProjectsOverview/SpecialProjects.tsx
@@ -1,24 +1,16 @@
+import SplitSection from "../../layout/SplitSection";
 import styles from "./styles.module.css";
-import SpecialProjectsMD from "@site/src/components/home/ProjectsOverview/descriptions/SpecialProjects.md";
+import SpecialProjectsMD from "./descriptions/SpecialProjects.md";
 import SpecialProjectsPictureUrl from "@site/static/img/projects/special_projects.png";
 
 export default function SpecialProjects() {
-    return (
-      <div className={styles.container_projects + " " + styles.project_yellow}>
-        <div className="row-max-width">
-          <div className={"col col--6" + " " + styles.col_project_overview_with_padding}>
-            <h1 className="padding-none">Special projects</h1>
-            <h2 className={styles.h2_custom}>
-              Applications built from the ground up and addressing a complete use
-              case.
-            </h2>
-            
-             <SpecialProjectsMD/> 
-          </div>
-          <div className={"col col--6 flex-full-centered"+ " "+ styles.col_project_overview_with_padding}>
-            <img src={SpecialProjectsPictureUrl} height={"595px"} alt={"Picture showing examples of Jupyter CAD projects in Jupyterlab."} />
-          </div>
-        </div>
-      </div>
-    );
-  }
\ No newline at end of file
+  return (
+    <SplitSection
+image={<img src={SpecialProjectsPictureUrl} alt={"Picture showing examples of Jupyter CAD projects in Jupyterlab."} style={{ maxWidth: "100%", maxHeight: "500px", objectFit: "contain" }} />}
+    >
+      <h2 className="padding-none">Special projects</h2>
+      <p className={styles.tagline}>Applications built from the ground up and addressing a complete use case.</p>
+      <SpecialProjectsMD />
+    </SplitSection>
+  );
+}
diff --git a/src/components/home/ProjectsOverview/SupplyChain.tsx b/src/components/home/ProjectsOverview/SupplyChain.tsx
index 98c5f4162..84a340da4 100644
--- a/src/components/home/ProjectsOverview/SupplyChain.tsx
+++ b/src/components/home/ProjectsOverview/SupplyChain.tsx
@@ -1,39 +1,17 @@
+import SplitSection from "../../layout/SplitSection";
 import styles from "./styles.module.css";
 import SupplyChainMD from "./descriptions/SupplyChain.md";
 import MambaPictureUrl from "@site/static/img/projects/mamba_console.png";
 
 export default function SupplyChainProjects() {
   return (
-    <div className={styles.container_projects + " " + styles.project_light_yellow}>
-      <div className="row-max-width">
-        <div
-          className={
-            "col col--6" +
-            " " +
-            styles.col_project_overview_with_padding
-          }
-        >
-          <h1 className="padding-none">Software supply chain </h1>
-          <h2 className={styles.h2_custom}>
-            We are the main organization supporting the mamba package manager.
-          </h2>
-          <div className="spacing-2xl"></div>
-          <SupplyChainMD />
-        </div>
-        <div
-          className={
-            "col col--6 flex-full-centered" +
-            " " +
-            styles.col_project_overview_with_padding
-          }
-        >
-          <img
-            src={MambaPictureUrl}
-            width={"486px"}
-            alt={"Picture showing a terminal in which mamba commands are run."}
-          />
-        </div>
-      </div>
-    </div>
+    <SplitSection
+      reverse
+      image={<img src={MambaPictureUrl} alt={"Picture showing a terminal in which mamba commands are run."} style={{ maxWidth: "100%" }} />}
+    >
+      <h2 className="padding-none">Software supply chain</h2>
+      <p className={styles.tagline}>We are the main organization supporting the mamba package manager.</p>
+      <SupplyChainMD />
+    </SplitSection>
   );
 }
diff --git a/src/components/home/ProjectsOverview/SupplyChainReversed.tsx b/src/components/home/ProjectsOverview/SupplyChainReversed.tsx
deleted file mode 100644
index 33d06cd57..000000000
--- a/src/components/home/ProjectsOverview/SupplyChainReversed.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import styles from "./styles.module.css";
-import SupplyChainMD from "./descriptions/SupplyChain.md";
-import MambaPictureUrl from "@site/static/img/projects/mamba_console.png";
-
-export default function SupplyChainProjects() {
-  return (
-    <div className={styles.container_projects}>
-      <div className="row-max-width">
-        <div
-          className={
-            "col col--6 flex-full-centered" +
-            " " +
-            styles.col_project_overview_with_padding
-          }
-        >
-          <img src={MambaPictureUrl} width={"486px"} alt={"Picture showing a terminal in which mamba commands are run."} />
-        </div>
-        <div
-          className={
-            "col col--6" + " " + styles.col_project_overview_with_padding
-          }
-        >
-          <h1 className="padding-none">Software supply chain </h1>
-          <h2 className={styles.h2_custom}>
-            We are the main organization supporting the mamba package manager.
-          </h2>
-          <div className="spacing-2xl"></div>
-          <SupplyChainMD />
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/home/ProjectsOverview/index.tsx b/src/components/home/ProjectsOverview/index.tsx
index 29ff08841..d86a39117 100644
--- a/src/components/home/ProjectsOverview/index.tsx
+++ b/src/components/home/ProjectsOverview/index.tsx
@@ -4,11 +4,15 @@ import SpecialProjects from "./SpecialProjects";
 import RoboticsProjects from "./Robotics";
 import ComputingProjects from "./Computing";
 import DataAnalysisProjects from "./DataAnalysis";
+import Section from "../../layout/Section";
 import styles from "./styles.module.css";
 
 export default function ProjectsOverview() {
   return (
     <div className={styles.projects_overview_container}>
+      <Section>
+        <h2 className="text--center">Our open-source projects</h2>
+      </Section>
       <JupyterProject />
       <SupplyChainProjects />
       <SpecialProjects />
diff --git a/src/components/home/ProjectsOverview/styles.module.css b/src/components/home/ProjectsOverview/styles.module.css
index 81f624a1a..edf10811a 100644
--- a/src/components/home/ProjectsOverview/styles.module.css
+++ b/src/components/home/ProjectsOverview/styles.module.css
@@ -4,23 +4,6 @@
   }
 }
 
-.h2_custom {
+.tagline {
   color: var(--ifm-color-blue-jupyter);
 }
-
-.col_project_overview_with_padding {
-  padding: var(--ifm-spacing-4xl) var(--ifm-spacing-3xl);
-}
-
-.project_yellow {
-  background-color: var(--ifm-color-primary-p1);
-}
-
-.project_light_yellow {
-  background-color: var(--ifm-color-primary-p0);
-}
-.container_projects {
-  padding: 0;
-  display: flex;
-  justify-content: center;
-}
\ No newline at end of file
diff --git a/src/components/home/TrustedBy/LogoGrid.tsx b/src/components/home/TrustedBy/LogoGrid.tsx
new file mode 100644
index 000000000..554ec0a9c
--- /dev/null
+++ b/src/components/home/TrustedBy/LogoGrid.tsx
@@ -0,0 +1,84 @@
+import styles from "./styles.module.css";
+import BloombergLogoUrl from "@site/static/img/logos/Bloomberg.png";
+import SGLogoUrl from "@site/static/img/logos/SG.png";
+import RapyutaLogoUrl from "@site/static/img/logos/Rapyuta.png";
+import CFMLogoUrl from "@site/static/img/logos/CFM.png";
+import EngieLogoUrl from "@site/static/img/logos/Engie.png";
+import JRCLogoUrl from "@site/static/img/logos/JRC.png";
+import ERDCLogoUrl from "@site/static/img/logos/ERDC.png";
+import PandaLogoUrl from "@site/static/img/logos/Panda.png";
+import UniversiteParisCiteLogoUrl from "@site/static/img/logos/UniversiteParisCite.png";
+import AirbusLogoUrl from "@site/static/img/logos/Airbus.png";
+import INRIALogoUrl from "@site/static/img/logos/INRIA.png";
+import CNAMLogoUrl from "@site/static/img/logos/CNAM.png";
+import NatixisLogoUrl from "@site/static/img/logos/Natixis.png";
+import NumfocusLogoUrl from "@site/static/img/logos/Numfocus.png";
+import RobocorpLogoUrl from "@site/static/img/logos/Robocorp.png";
+import CalPolyLogoUrl from "@site/static/img/logos/CalPoly.png";
+import MaxFordhamLogoUrl from "@site/static/img/logos/MaxFordham.png";
+import GainTheoryUrl from "@site/static/img/logos/GainTheory.png";
+import EnthoughtLogoUrl from "@site/static/img/logos/Enthought.png";
+import CressetLogoUrl from "@site/static/img/logos/Cresset.png";
+import TDKLogoUrl from "@site/static/img/logos/TDK.png";
+import HarvardLogoUrl from "@site/static/img/logos/Harvard.png";
+import EMBLLogoUrl from "@site/static/img/logos/EMBL.png";
+import QuantCoUrl from "@site/static/img/logos/QuantCo.png";
+import VoltronDataLogoUrl from "@site/static/img/logos/VoltronData.png";
+import SafranLogoUrl from "@site/static/img/logos/Safran.png";
+import DEShawLogoUrl from "@site/static/img/logos/DEShaw.png";
+import UniversiteParisSaclayLogoUrl from "@site/static/img/logos/UniversiteParisSaclay.png";
+import UnitedRoboticsLogoUrl from "@site/static/img/logos/UnitedRobotics.png";
+import CEALogoUrl from "@site/static/img/logos/CEA.png";
+import EcolePolytechniqueLogoUrl from "@site/static/img/logos/EcolePolytechnique.png";
+import ESALogoUrl from "@site/static/img/logos/ESA.png";
+import CNESLogoUrl from "@site/static/img/logos/CNES.png";
+import GatesFoundationLogoUrl from "@site/static/img/logos/GatesFoundation.png";
+import SovereignTechAgencyLogoUrl from "@site/static/img/logos/SovereignTechAgency.png";
+
+const logos = [
+  { src: BloombergLogoUrl, alt: "Bloomberg" },
+  { src: SGLogoUrl, alt: "Société Générale" },
+  { src: AirbusLogoUrl, alt: "Airbus" },
+  { src: DEShawLogoUrl, alt: "DE Shaw" },
+  { src: HarvardLogoUrl, alt: "Harvard University" },
+  { src: GatesFoundationLogoUrl, alt: "Gates Foundation" },
+  { src: SovereignTechAgencyLogoUrl, alt: "Sovereign Tech Agency" },
+  { src: NatixisLogoUrl, alt: "Natixis" },
+  { src: CFMLogoUrl, alt: "CFM" },
+  { src: NumfocusLogoUrl, alt: "NumFocus" },
+  { src: INRIALogoUrl, alt: "INRIA" },
+  { src: EngieLogoUrl, alt: "Engie" },
+  { src: EMBLLogoUrl, alt: "EMBL" },
+  { src: ESALogoUrl, alt: "ESA" },
+  { src: CEALogoUrl, alt: "CEA" },
+  { src: EcolePolytechniqueLogoUrl, alt: "École Polytechnique" },
+  { src: UniversiteParisCiteLogoUrl, alt: "Université Paris Cité" },
+  { src: UniversiteParisSaclayLogoUrl, alt: "Université Paris-Saclay" },
+  { src: CNAMLogoUrl, alt: "CNAM" },
+  { src: CalPolyLogoUrl, alt: "Cal Poly" },
+  { src: RapyutaLogoUrl, alt: "Rapyuta" },
+  { src: VoltronDataLogoUrl, alt: "Voltron Data" },
+  { src: QuantCoUrl, alt: "QuantCo" },
+  { src: EnthoughtLogoUrl, alt: "Enthought" },
+  { src: SafranLogoUrl, alt: "Safran" },
+  { src: UnitedRoboticsLogoUrl, alt: "United Robotics" },
+  { src: RobocorpLogoUrl, alt: "Robocorp" },
+  { src: TDKLogoUrl, alt: "TDK" },
+  { src: CressetLogoUrl, alt: "Cresset" },
+  { src: MaxFordhamLogoUrl, alt: "MaxFordham" },
+  { src: GainTheoryUrl, alt: "Gain Theory" },
+  { src: JRCLogoUrl, alt: "JRC" },
+  { src: ERDCLogoUrl, alt: "ERDC" },
+  { src: PandaLogoUrl, alt: "Panda" },
+  { src: CNESLogoUrl, alt: "CNES" },
+];
+
+export default function LogoGrid() {
+  return (
+    <div className={styles.logo_grid}>
+      {logos.map(({ src, alt }) => (
+        <img key={alt} src={src} alt={`Logo of ${alt}`} className={styles.customer_logo} />
+      ))}
+    </div>
+  );
+}
diff --git a/src/components/home/TrustedBy/index.tsx b/src/components/home/TrustedBy/index.tsx
new file mode 100644
index 000000000..3ffbba3eb
--- /dev/null
+++ b/src/components/home/TrustedBy/index.tsx
@@ -0,0 +1,13 @@
+import styles from "./styles.module.css";
+import LogoGrid from "./LogoGrid";
+
+export default function TrustedBy() {
+  return (
+    <div className={styles.trusted_by_outer}>
+      <div className="page-content">
+        <h2 className="text--center">Trusted by</h2>
+        <LogoGrid />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/home/TrustedBy/styles.module.css b/src/components/home/TrustedBy/styles.module.css
new file mode 100644
index 000000000..dc57c9091
--- /dev/null
+++ b/src/components/home/TrustedBy/styles.module.css
@@ -0,0 +1,22 @@
+.trusted_by_outer {
+  background-color: var(--ifm-bg-neutral);
+  padding: var(--ifm-spacing-2xl) 0;
+}
+
+.logo_grid {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: var(--ifm-spacing-xl) var(--ifm-spacing-2xl);
+  padding: var(--ifm-spacing-lg) 0;
+}
+
+.customer_logo {
+  height: 36px;
+  width: auto;
+  filter: grayscale(1);
+  opacity: 0.75;
+  object-fit: contain;
+  mix-blend-mode: multiply;
+}
diff --git a/src/components/home/WhatWeDo/Topics.tsx b/src/components/home/WhatWeDo/Topics.tsx
index 16478e2c0..639b1df7d 100644
--- a/src/components/home/WhatWeDo/Topics.tsx
+++ b/src/components/home/WhatWeDo/Topics.tsx
@@ -3,25 +3,22 @@ import { TopicsCard } from "./TopicsCard";
 import JupyterMD from "./topics/Jupyter.md";
 import SupplyChainMD from "./topics/SupplyChain.md";
 import ComputingMD from "./topics/Computing.md";
+import CardGrid from "../../layout/CardGrid";
 
 const TopicsDescriptions = [JupyterMD, SupplyChainMD, ComputingMD];
 
 export function Topics() {
   return (
-    <div>
-      <div className="container flex-full-centered">
-        <ul className="row flex-full-centered">
-          {topicsDetails.map((topics, index) => (
-            <li className="cards-list" key={index}>
-              <TopicsCard
-                topics={topics}
-                TopicsDescriptionMD={TopicsDescriptions[index]}
-              />
-            </li>
-          ))}
-        </ul>
-      </div>
-    </div>
+    <CardGrid cols={3}>
+      {topicsDetails.map((topics, index) => (
+        <li key={index}>
+          <TopicsCard
+            topics={topics}
+            TopicsDescriptionMD={TopicsDescriptions[index]}
+          />
+        </li>
+      ))}
+    </CardGrid>
   );
 }
 
diff --git a/src/components/home/WhatWeDo/TopicsCard.tsx b/src/components/home/WhatWeDo/TopicsCard.tsx
index d1557e3c0..0213bafe6 100644
--- a/src/components/home/WhatWeDo/TopicsCard.tsx
+++ b/src/components/home/WhatWeDo/TopicsCard.tsx
@@ -1,15 +1,12 @@
 import styles from "./styles.module.css";
+import Card from "../../layout/Card";
 
 export function TopicsCard({ topics, TopicsDescriptionMD }) {
   return (
-    <div className={"card" + " " + styles.topics_card}>
-      <div className={"card__header" + " " + styles.topics_header}>
-        {topics.name}
-      </div>
-      <div className="card__body">
-        <TopicsDescriptionMD />
-      </div>
-    </div>
+    <Card bg="transparent" className={styles.topics_card}>
+      <div className={styles.topics_header}>{topics.name}</div>
+      <div><TopicsDescriptionMD /></div>
+    </Card>
   );
 }
 
diff --git a/src/components/home/WhatWeDo/index.tsx b/src/components/home/WhatWeDo/index.tsx
index 6e43cbb8c..bb8c3ba2f 100644
--- a/src/components/home/WhatWeDo/index.tsx
+++ b/src/components/home/WhatWeDo/index.tsx
@@ -5,24 +5,17 @@ import LinkToProjects from "../LinkToProjects";
 
 export function WhatWeDo() {
   return (
-    <div className={"container" + styles.whatwedo_container}>
-      <div className="row flex-full-centered">
+    <div className={styles.whatwedo_outer}>
+      <div className="page-content">
         <div className={styles.services_link_mobile}>
-          <LinkToServices label={"DISCOVER OUR SERVICES"} />
+          <LinkToServices label="DISCOVER OUR SERVICES" />
         </div>
-      </div>
-      <div className={"row flex-full-centered"}>
-        <h1 className={styles.header}> What we do </h1>
-      </div>
-      <div className={"row flex-full-centered"}>
+        <h2 className={styles.header}>What we do</h2>
         <Topics />
-      </div>
-      <div className="row flex-full-centered">
         <div className={styles.projects_link}>
-          <LinkToProjects label={"DISCOVER ALL OF OUR PROJECTS"} />
-
+          <LinkToProjects label="DISCOVER ALL OF OUR PROJECTS" />
           <div className={styles.services_link_desktop}>
-            <LinkToServices label={"DISCOVER OUR SERVICES"} />
+            <LinkToServices label="DISCOVER OUR SERVICES" />
           </div>
         </div>
       </div>
diff --git a/src/components/home/WhatWeDo/styles.module.css b/src/components/home/WhatWeDo/styles.module.css
index 353f6dada..a269fd3be 100644
--- a/src/components/home/WhatWeDo/styles.module.css
+++ b/src/components/home/WhatWeDo/styles.module.css
@@ -1,72 +1,43 @@
 .topics_header {
-  font-family: var(--ifm-font-family-rubik-one);
+  font-family: var(--ifm-font-family-roboto);
   font-size: var(--ifm-font-size-secondary-title);
-  font-style: normal;
-  font-weight: 400;
+  font-weight: 700;
   line-height: 28px;
   text-align: center;
   margin-bottom: var(--ifm-spacing-xl);
-}
-
-div .topics_header {
   color: var(--ifm-color-neutral-n2);
 }
 
-@media only screen and (max-width: 996px) {
-  /*Mobile*/
-  .header {
-    display: none;
-  }
-
-  .whatwedo_container {
-    /*background-color: var(--ifm-color-primary-p1);*/
-    padding: 0;
-    margin-top: 0;
+@media (max-width: 996px) {
+  .whatwedo_outer {
+    padding: var(--ifm-spacing-xl) 0;
   }
 
-  .topics_card {
-    width: 80%;
-    text-align: justify;
-    background-color: var(--ifm-color-primary-p0);
-    margin: var(--ifm-spacing-lg) auto var(--ifm-spacing-lg) auto ;
-  }
-
-  .topics_card .p {
-    padding: var(--ifm-spacing-xs) var(--ifm-spacing-xs);
-  }
-
-
   .services_link_desktop {
     display: none;
-   }
+  }
 }
 
-@media only screen and (min-width: 996px) {
+@media (min-width: 996px) {
   .header {
     color: var(--ifm-color-primary-p2);
+    text-align: center;
   }
 
-  .projects_link{
-   display: none;
+  .projects_link {
+    display: none;
   }
 
   .services_link_mobile {
     display: none;
-   }
+  }
 
-  .whatwedo_container {
-    background-color: var(--ifm-color-primary-p1);
-    padding: var(--ifm-spacing-3xl) var(--ifm-spacing-2xl) 0
-      var(--ifm-spacing-2xl);
+  .whatwedo_outer {
+    background: var(--ifm-bg-brand);
+    padding: var(--ifm-spacing-3xl) 0;
   }
 
   .topics_card {
-    height: 462px;
-    width: 350px;
     padding: var(--ifm-spacing-2xl) var(--ifm-spacing-lg);
-    border-radius: 8px;
-    box-shadow: 0px 0px 8px 1px #c8c8c7;
-    background-color: var(--ifm-color-primary-p0);
-    margin: 0 var(--ifm-spacing-lg) var(--ifm-spacing-xl) var(--ifm-spacing-lg);
   }
 }
diff --git a/src/components/home/styles.module.css b/src/components/home/styles.module.css
index 54c987305..7bf0cd0f9 100644
--- a/src/components/home/styles.module.css
+++ b/src/components/home/styles.module.css
@@ -1,48 +1,41 @@
 
 @media only screen and (max-width: 996px) {
-  /*Mobile*/
   .link_to {
     background-color: var(--ifm-color-primary-p1);
     color: var(--ifm-text-color-on-primary-p1);
-    width: 358px;
-    font-weight: 700;
   }
 
   .link_to_services {
     background-color: var(--ifm-color-primary-p1);
     color: var(--ifm-text-color-on-primary-p1);
-    width: 358px;
-    font-weight: 700;
   }
 
   .link_to_about_us {
     background-color: var(--ifm-color-primary-p1);
     color: var(--ifm-text-color-on-primary-p1);
-    width: 358px;
-    font-weight: 700;
+  }
+
+  .link_to:hover,
+  .link_to_services:hover,
+  .link_to_about_us:hover {
+    color: var(--ifm-text-color-on-primary-p1);
+    box-shadow: 0 8px 24px rgba(246, 241, 149, 0.5);
   }
 }
 
 @media only screen and (min-width: 996px) {
   .link_to {
-    background-color: var(--ifm-color-secondary-s2);
+    background-color: var(--ifm-bg-emphasis);
     color: white;
-    width: 358px;
-    font-weight: 700;
   }
 
   .link_to_services {
     background-color: var(--ifm-color-blue-jupyter);
     color: white;
-    width: 358px;
-    font-weight: 700;
   }
 
-
   .link_to_about_us {
-    background-color: var(--ifm-color-secondary-s2);
+    background-color: var(--ifm-bg-emphasis);
     color: white;
-    width: 358px;
-    font-weight: 700;
   }
 }
diff --git a/src/components/layout/Banner.tsx b/src/components/layout/Banner.tsx
new file mode 100644
index 000000000..a1e959f65
--- /dev/null
+++ b/src/components/layout/Banner.tsx
@@ -0,0 +1,24 @@
+import clsx from "clsx";
+import styles from "./styles.module.css";
+import type { ReactNode } from "react";
+
+type Props = {
+  bg?: "dark" | "light";
+  title?: string;
+  cta?: ReactNode;
+  children: ReactNode;
+};
+
+export default function Banner({ bg = "dark", title, cta, children }: Props) {
+  return (
+    <div className={clsx(styles.banner, styles[`banner_${bg}`])}>
+      {title && (
+        <div className={clsx(styles.banner_title, styles[`banner_title_${bg}`])}>
+          {title}
+        </div>
+      )}
+      <div className={styles.banner_body}>{children}</div>
+      {cta && <div>{cta}</div>}
+    </div>
+  );
+}
diff --git a/src/components/layout/Card.tsx b/src/components/layout/Card.tsx
new file mode 100644
index 000000000..22075073b
--- /dev/null
+++ b/src/components/layout/Card.tsx
@@ -0,0 +1,28 @@
+import clsx from "clsx";
+import styles from "./styles.module.css";
+import React from "react";
+
+type Props = {
+  bg?: "white" | "yellow" | "transparent";
+  hover?: boolean;
+  className?: string;
+  onClick?: () => void;
+  children: React.ReactNode;
+};
+
+export default function Card({ bg = "white", hover = false, className, onClick, children }: Props) {
+  return (
+    <div
+      className={clsx(
+        styles.card,
+        bg === "yellow" && styles.card_yellow,
+        bg === "transparent" && styles.card_transparent,
+        hover && styles.card_hover,
+        className
+      )}
+      onClick={onClick}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/src/components/layout/CardGrid.tsx b/src/components/layout/CardGrid.tsx
new file mode 100644
index 000000000..e090e54a3
--- /dev/null
+++ b/src/components/layout/CardGrid.tsx
@@ -0,0 +1,24 @@
+import clsx from "clsx";
+import styles from "./styles.module.css";
+import type { ReactNode } from "react";
+
+type Props = {
+  cols?: 2 | 3 | 4;
+  children: ReactNode;
+  className?: string;
+};
+
+export default function CardGrid({ cols = 3, children, className }: Props) {
+  return (
+    <ul
+      className={clsx(
+        styles.card_grid,
+        cols === 2 && styles.card_grid_2,
+        cols === 4 && styles.card_grid_4,
+        className,
+      )}
+    >
+      {children}
+    </ul>
+  );
+}
diff --git a/src/components/layout/Section.tsx b/src/components/layout/Section.tsx
new file mode 100644
index 000000000..e40afd487
--- /dev/null
+++ b/src/components/layout/Section.tsx
@@ -0,0 +1,33 @@
+import clsx from "clsx";
+import styles from "./styles.module.css";
+import type { ReactNode } from "react";
+
+type Props = {
+  bg?: "white" | "yellow" | "dark";
+  spacing?: "normal" | "tight" | "loose";
+  pageTop?: boolean;
+  children: ReactNode;
+  className?: string;
+};
+
+export default function Section({
+  bg = "white",
+  spacing = "normal",
+  pageTop = false,
+  children,
+  className,
+}: Props) {
+  return (
+    <div
+      className={clsx(
+        styles.section,
+        styles[`section_${bg}`],
+        spacing !== "normal" && styles[`section_${spacing}`],
+        pageTop && styles.section_page_top,
+        className,
+      )}
+    >
+      <div className="page-content">{children}</div>
+    </div>
+  );
+}
diff --git a/src/components/layout/SplitSection.tsx b/src/components/layout/SplitSection.tsx
new file mode 100644
index 000000000..f9cdae657
--- /dev/null
+++ b/src/components/layout/SplitSection.tsx
@@ -0,0 +1,39 @@
+import clsx from "clsx";
+import styles from "./styles.module.css";
+import Section from "./Section";
+import type { ReactNode } from "react";
+
+type Props = {
+  image: ReactNode;
+  reverse?: boolean;
+  ratio?: "60/40" | "50/50";
+  bg?: "white" | "yellow" | "dark";
+  spacing?: "normal" | "tight" | "loose";
+  pageTop?: boolean;
+  children: ReactNode;
+};
+
+export default function SplitSection({
+  image,
+  reverse = false,
+  ratio = "60/40",
+  bg = "white",
+  spacing = "normal",
+  pageTop = false,
+  children,
+}: Props) {
+  return (
+    <Section bg={bg} spacing={spacing} pageTop={pageTop}>
+      <div
+        className={clsx(
+          styles.split,
+          reverse && styles.split_reverse,
+          ratio === "50/50" && styles.split_50,
+        )}
+      >
+        <div className={styles.split_text}>{children}</div>
+        <div className={styles.split_image}>{image}</div>
+      </div>
+    </Section>
+  );
+}
diff --git a/src/components/layout/styles.module.css b/src/components/layout/styles.module.css
new file mode 100644
index 000000000..4d553a5ca
--- /dev/null
+++ b/src/components/layout/styles.module.css
@@ -0,0 +1,249 @@
+/* ─── Section ─── */
+
+.section {
+  width: 100%;
+  padding: var(--ifm-spacing-4xl) 0;
+}
+
+.section_page_top {
+  margin-top: calc(-1 * var(--ifm-navbar-height));
+  padding-top: calc(var(--ifm-spacing-3xl) + var(--ifm-navbar-height));
+}
+
+.section_white {
+  background: var(--ifm-bg-neutral);
+}
+
+.section_yellow {
+  background: var(--ifm-bg-brand);
+}
+
+.section_dark {
+  background: var(--ifm-bg-emphasis);
+  color: white;
+}
+
+.section_tight {
+  padding: var(--ifm-spacing-2xl) 0;
+}
+
+.section_loose {
+  padding: var(--ifm-spacing-5xl) 0;
+}
+
+@media (max-width: 996px) {
+  .section {
+    padding: var(--ifm-spacing-3xl) 0;
+  }
+
+  .section_page_top {
+    padding-top: calc(var(--ifm-spacing-2xl) + var(--ifm-navbar-height));
+  }
+}
+
+/* ─── SplitSection ─── */
+
+.split {
+  display: flex;
+  align-items: center;
+  gap: var(--ifm-spacing-2xl);
+}
+
+.split_reverse {
+  flex-direction: row-reverse;
+}
+
+.split_text {
+  flex: 3;
+  min-width: 0;
+}
+
+.split_image {
+  flex: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+}
+
+.split_50 > .split_text {
+  flex: 1;
+}
+
+.split_50 > .split_image {
+  flex: 1;
+}
+
+@media (max-width: 996px) {
+  .split {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .split_reverse {
+    flex-direction: column;
+  }
+
+  .split_text,
+  .split_image {
+    width: 100%;
+  }
+}
+
+/* ─── Card ─── */
+
+.card {
+  background: var(--ifm-bg-neutral);
+  border-radius: 10px;
+  padding: var(--ifm-spacing-lg);
+  box-shadow: var(--ifm-shadow-card);
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
+
+.card_yellow {
+  background: var(--ifm-bg-brand);
+}
+
+.card_transparent {
+  background: transparent;
+  box-shadow: none;
+}
+
+.card_hover {
+  cursor: pointer;
+  border: 1px solid transparent;
+  transition: box-shadow 0.2s, border-color 0.2s;
+}
+
+.card_hover:hover {
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  border-color: var(--ifm-color-neutral-n3);
+}
+
+@media (min-width: 996px) {
+  .card {
+    padding: var(--ifm-spacing-xl) var(--ifm-spacing-lg);
+  }
+}
+
+/* ─── CardGrid ─── */
+
+.card_grid {
+  display: grid;
+  gap: var(--ifm-spacing-xl);
+  grid-template-columns: repeat(3, 1fr);
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.card_grid li {
+  margin-left: 0;
+}
+
+.card_grid_2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.card_grid_4 {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+@media (max-width: 996px) {
+  .card_grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .card_grid_4 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .card_grid_2 {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 600px) {
+  .card_grid {
+    grid-template-columns: 1fr;
+  }
+
+  .card_grid_4 {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* ─── Banner ─── */
+
+.banner {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: var(--ifm-spacing-lg);
+  padding: var(--ifm-spacing-4xl) var(--ifm-spacing-4xl);
+  font-family: var(--ifm-font-family-roboto);
+  font-weight: 500;
+  line-height: 150%;
+}
+
+.banner_dark {
+  background: var(--ifm-bg-emphasis);
+  color: white;
+  font-size: 28px;
+}
+
+.banner_dark :global(.link-to-button) {
+  background: var(--ifm-color-accent-yellow);
+  color: var(--ifm-color-primary-p2);
+}
+
+.banner_dark :global(.link-to-button):hover {
+  color: var(--ifm-color-primary-p2);
+  box-shadow: 0 8px 28px rgba(252, 241, 43, 0.5);
+}
+
+
+.banner_title {
+  font-style: normal;
+  font-weight: 600;
+  line-height: 150%;
+  letter-spacing: 2.112px;
+  margin-bottom: var(--ifm-spacing-md);
+}
+
+.banner_title_dark {
+  font-size: 48px;
+  color: var(--ifm-color-primary-p1);
+}
+
+.banner_title_light {
+  font-size: 32px;
+  color: var(--ifm-color-primary-p2);
+}
+
+.banner_body {
+  max-width: 800px;
+}
+
+@media (max-width: 996px) {
+  .banner {
+    padding: var(--ifm-spacing-2xl) var(--ifm-spacing-lg);
+    font-size: 16px;
+    line-height: 20px;
+    letter-spacing: 0.1px;
+  }
+
+  .banner_title {
+    font-size: 32px;
+    letter-spacing: 2.112px;
+  }
+
+  .banner_title_dark {
+    font-size: 32px;
+  }
+}
diff --git a/src/components/projects/AllProjects.tsx b/src/components/projects/AllProjects.tsx
index 8ed3881c3..6b1e718d1 100644
--- a/src/components/projects/AllProjects.tsx
+++ b/src/components/projects/AllProjects.tsx
@@ -4,22 +4,14 @@ import styles from "./styles.module.css";
 
 export default function AllProjects() {
   return (
-    <div
-      className={
-        "container flex-full-centered" + " " + styles.all_projects_container
-      }
-    >
-      <ul className="row --no-gutters">
-        {projectsDetails.map((project, index) => {
-          return (
-            <li className="projects-list" key={index}>
-              <div className="col" style={{ paddingLeft: "0" }}>
-                <ProjectCard project={project} />
-              </div>
-            </li>
-          );
-        })}
-      </ul>
-    </div>
-  )
+    <>
+      {projectsDetails.map((project, index) => (
+        <ProjectCard
+          key={index}
+          project={project}
+          bg="white"
+        />
+      ))}
+    </>
+  );
 }
diff --git a/src/components/projects/Header.tsx b/src/components/projects/Header.tsx
index 0d9f7a57e..4422c1a3e 100644
--- a/src/components/projects/Header.tsx
+++ b/src/components/projects/Header.tsx
@@ -1,17 +1,14 @@
+import Section from "../layout/Section";
 import styles from "./styles.module.css";
 import HeaderMD from "./descriptions/Header.md";
 
 export default function Header() {
   return (
-    <div className={"container" + " " + styles.header_container}>
-      <div className="row">
-        <div className="col padding-none">
-          <h1 className={styles.header_title}>Working in the open</h1>
-          <div className={styles.header_text}>
-            <HeaderMD />
-          </div>
-        </div>
+    <Section pageTop bg="yellow">
+      <h1 className={styles.header_title}>Working in the open</h1>
+      <div className={styles.header_text}>
+        <HeaderMD />
       </div>
-    </div>
+    </Section>
   );
 }
diff --git a/src/components/projects/ProjectCard.tsx b/src/components/projects/ProjectCard.tsx
index f921b5890..6fe2c83c5 100644
--- a/src/components/projects/ProjectCard.tsx
+++ b/src/components/projects/ProjectCard.tsx
@@ -1,35 +1,34 @@
 import styles from "./styles.module.css";
+import SplitSection from "../layout/SplitSection";
+
+type Props = {
+  project: any;
+  bg?: "white";
+};
+
+export default function ProjectCard({ project, bg = "light" }: Props) {
+  const picClass = styles[`project_picture_${project.name}`] ?? "";
+  const isReverse = project.reverse === "true";
 
-export default function ProjectCard({ project }): JSX.Element {
-  const prefix = "project_picture_";
-  const base = `${prefix}${project.name}` 
   return (
-    <div className="container">
-      <div className="row row--no-gutters">
-        <div
-          className={"col col--6 col col--offset-1" + " " + styles.project_text}
-        >
-          <div className={styles.project_title}>{project.title}</div>
-          <div className={styles.project_description}>
-            <project.ProjectMD />
-          </div>
-        </div>
-        <div
-          className={
-            "col col--4 flex-full-centered padding-none" +
-            " " +
-            styles[base]
-          }
-        >
-          <div className={styles.col_project_picture}></div>
+    <SplitSection
+      bg={bg}
+      reverse={isReverse}
+      ratio="60/40"
+      image={
+        <div className={picClass}>
           <img
             src={project.pictureRoute}
-            width={project.pictureWidth}
-            height={project.pictureHeight}
             alt={project.pictureAltText}
+            className={styles.project_logo}
           />
         </div>
+      }
+    >
+      <div className={styles.project_title}>{project.title}</div>
+      <div className={styles.project_description}>
+        <project.ProjectMD />
       </div>
-    </div>
+    </SplitSection>
   );
 }
diff --git a/src/components/projects/ScheduleAMeeting.tsx b/src/components/projects/ScheduleAMeeting.tsx
index c83539b7b..b73369dd3 100644
--- a/src/components/projects/ScheduleAMeeting.tsx
+++ b/src/components/projects/ScheduleAMeeting.tsx
@@ -1,12 +1,11 @@
-import styles from "./styles.module.css";
+import Banner from "../layout/Banner";
 import LinkToContact from "../home/LinkToContact";
 
 export default function ScheduleAMeeting() {
   return (
-    <div className="blue-banner-container">
+    <Banner bg="dark" cta={<LinkToContact label="CONTACT US!" />}>
       Schedule a meeting and benefit from our experience in Python, C++,
       in-browser data visualization, and high-performance computing.
-      <LinkToContact label={"CONTACT US!"} />
-    </div>
+    </Banner>
   );
 }
diff --git a/src/components/projects/descriptions/Header.md b/src/components/projects/descriptions/Header.md
index 1c87c9b4f..70d5a13dd 100644
--- a/src/components/projects/descriptions/Header.md
+++ b/src/components/projects/descriptions/Header.md
@@ -1,9 +1,2 @@
-Projects developed at QuantStack have reached millions of end users,
-from healthcare to education, from aerospace to geosciences, and
-from data sciences to robotics.
-
-
-Open-source development is a unique
-way to break down collaboration barriers and reach users with
-unexpected use cases. Enabling customization and extensions of the
-tools enables this diversity of applications.
+From aerospace to genomics, our tools reach millions across every scientific discipline.
+We build in the open so that anyone — from an unexpected startup to a national lab — can build on what we create.
diff --git a/src/components/projects/descriptions/projectsDetails.ts b/src/components/projects/descriptions/projectsDetails.ts
index 54417eadb..2d72395b1 100644
--- a/src/components/projects/descriptions/projectsDetails.ts
+++ b/src/components/projects/descriptions/projectsDetails.ts
@@ -49,7 +49,7 @@ export const projectsDetails = [
     pictureHeight: "63px",
     pictureAltText: "Picture for Apache Arrow project showing the logo made of arrows.",
     ProjectMD: ApacheArrowMD,
-    reverse:"false"
+    reverse:"true"
   },
   {
     name: "robotics",
@@ -59,6 +59,6 @@ export const projectsDetails = [
     pictureHeight: "210px",
     pictureAltText: "Picture for robotics project showing an illustration with a robotics device.",
     ProjectMD: RoboticsMD,
-    reverse:"true"
+    reverse:"false"
   },
 ];
diff --git a/src/components/projects/index.tsx b/src/components/projects/index.tsx
index fc43e6173..5821a456a 100644
--- a/src/components/projects/index.tsx
+++ b/src/components/projects/index.tsx
@@ -6,11 +6,8 @@ import AllProjects from "./AllProjects";
 export default function Projects() {
   return (
     <>
-      <div className="horizontally-centered">
-        <Header />
-        <AllProjects />
-      </div>
-
+      <Header />
+      <AllProjects />
       <ScheduleAMeeting />
     </>
   );
diff --git a/src/components/projects/styles.module.css b/src/components/projects/styles.module.css
index 362f0f78c..01d9d9f7a 100644
--- a/src/components/projects/styles.module.css
+++ b/src/components/projects/styles.module.css
@@ -1,45 +1,80 @@
 
 .project_title {
-  margin-bottom: var(--ifm-spacing-md);
-  margin-top: var(--ifm-spacing-xl);
-  font-family: var(--ifm-font-family-bebas-neue);
+  margin-bottom: var(--ifm-spacing-sm);
+  margin-top: var(--ifm-spacing-md);
+  font-family: var(--ifm-font-family-roboto);
   font-size: var(--ifm-font-size-secondary-title);
   font-style: normal;
   font-weight: bolder;
   line-height: 150%;
   text-align: start;
-}
-
-div .project_title {
   color: var(--ifm-color-primary-p2);
-  padding-left: var(--ifm-spacing-xl);
 }
 
 .project_description {
-  padding: var(--ifm-spacing-md) var(--ifm-spacing-xl);
-  text-align: justify;
+  text-align: left;
 }
 
 .project_description p {
   color: var(--ifm-color-primary-p2);
 }
 
-@media only screen and (max-width: 996px) {
-  /*Mobile*/
-  .all_projects_container {
-    margin-bottom:  var(--ifm-spacing-3xl);
-    
-  }
+/* Logo wrapper — border is on the inner box, not the full column */
+.project_logo {
+  max-width: 160px;
+  max-height: 160px;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+  display: block;
+}
 
-  .header_container {
-    padding-top: var(--ifm-spacing-2xl);
-    background-color: var(--ifm-color-primary-p1);
-  }
+.project_picture_jupyter {
+  border: solid 1px var(--ifm-color-orange-jupyter);
+  border-radius: 10px;
+  padding: var(--ifm-spacing-lg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 
-  .header_title {
-    padding-left: none;
-  }
+.project_picture_xtensorxsimd {
+  border: solid 1px var(--ifm-color-green-xtensor);
+  border-radius: 10px;
+  padding: var(--ifm-spacing-lg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.project_picture_condaforge {
+  border: solid 1px var(--ifm-color-grey-condaforge);
+  border-radius: 10px;
+  padding: var(--ifm-spacing-lg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.project_picture_apache_arrow {
+  border: solid 1px black;
+  border-radius: 10px;
+  padding: var(--ifm-spacing-lg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.project_picture_robotics {
+  border: solid 1px rgb(146, 95, 218);
+  border-radius: 10px;
+  padding: var(--ifm-spacing-lg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 
+@media only screen and (max-width: 996px) {
   .header_text {
     font-family: var(--ifm-font-family-roboto);
     color: var(--ifm-color-primary-p2);
@@ -48,55 +83,20 @@ div .project_title {
     font-weight: 400;
     line-height: 20px;
     letter-spacing: 0.25px;
-    text-align: justify;
     margin-bottom: var(--ifm-spacing-lg);
-    padding: var(--ifm-spacing-lg) var(--ifm-spacing-xl);
-  }
-
-  .project_text {
-    background-color: white;
-    text-align: justify;
-  }
-
-  .project_picture_jupyter {
-    border: none;
-    margin-bottom: var(--ifm-spacing-xl);
-  }
-
-  .project_picture_xtensorxsimd {
-    border: none;
-    margin-bottom: var(--ifm-spacing-xl);
-  }
-
-  .project_picture_condaforge {
-    border: none;
-    margin-bottom: var(--ifm-spacing-xl);
-  }
-
-  .project_picture_apache_arrow {
-    border: none;
-    margin-bottom: var(--ifm-spacing-xl);
   }
 
+  .project_picture_jupyter,
+  .project_picture_xtensorxsimd,
+  .project_picture_condaforge,
+  .project_picture_apache_arrow,
   .project_picture_robotics {
     border: none;
-    margin-bottom: var(--ifm-spacing-xl);
+    padding: var(--ifm-spacing-md);
   }
 }
 
 @media only screen and (min-width: 996px) {
-  /*Desktop*/
-
-  .all_projects_container {
-    margin:  0 0 var(--ifm-spacing-5xl) 0 ;
-  }
-  .header_container {
-    margin-top: var(--ifm-spacing-6xl);
-  }
-  .header_title {
-    padding-left: var(--ifm-spacing-4xl);
-  }
-
   .header_text {
     font-family: var(--ifm-font-family-roboto);
     color: var(--ifm-color-primary-p2);
@@ -104,44 +104,6 @@ div .project_title {
     font-style: normal;
     font-weight: 400;
     line-height: 28px;
-    margin-bottom: var(--ifm-spacing-3xl);
-    padding: var(--ifm-spacing-lg) var(--ifm-spacing-4xl);
-  }
-
-  .project_text {
-    background-color: var(--ifm-color-orange-light);
-    padding: var(--ifm-spacing-4xl) var(--ifm-spacing-3xl);
-    margin-bottom: var(--ifm-spacing-lg);
-    border-radius: 10px;
-  }
-
-  .project_picture_jupyter {
-    border: solid 1px var(--ifm-color-orange-jupyter);
-    margin-bottom: var(--ifm-spacing-lg);
-    border-radius: 10px;
-  }
-
-  .project_picture_xtensorxsimd {
-    border: solid 1px var(--ifm-color-green-xtensor);
-    margin-bottom: var(--ifm-spacing-lg);
-    border-radius: 10px;
-  }
-
-  .project_picture_condaforge {
-    border: solid 1px var(--ifm-color-grey-condaforge);
-    margin-bottom: var(--ifm-spacing-lg);
-    border-radius: 10px;
-  }
-
-  .project_picture_apache_arrow {
-    border: solid 1px black;
-    margin-bottom: var(--ifm-spacing-lg);
-    border-radius: 10px;
-  }
-
-  .project_picture_robotics {
-    border: solid 1px rgb(146, 95, 218);
-    margin-bottom: var(--ifm-spacing-lg);
-    border-radius: 10px;
+    margin-bottom: var(--ifm-spacing-xl);
   }
 }
diff --git a/src/components/services/Header.tsx b/src/components/services/Header.tsx
index 0bc1d7aba..c3832d3e5 100644
--- a/src/components/services/Header.tsx
+++ b/src/components/services/Header.tsx
@@ -1,18 +1,15 @@
+import Section from "../layout/Section";
+import LinkToContact from "../home/LinkToContact";
 import styles from "./styles.module.css";
 
 export default function Header() {
   return (
-    <div className="main-container-with-margins">
-      <div className="container">
-        <div className="row">
-          <div className="col col--10 col--offset-1">
-            <h1 className={styles.services_header_text}>
-              Hire QuantStack to build upon the Jupyter, Mamba, and the PyData
-              ecosystem.
-            </h1>
-          </div>
-        </div>
-      </div>
-    </div>
+    <Section pageTop bg="yellow">
+      <h1 className={styles.services_header_text}>
+        Hire QuantStack for expert engineering at the frontier of open-source.
+      </h1>
+      <p>Expert-led development from the people who built and maintain the tools you depend on. Whether you need a custom feature, a support retainer, or hands-on engineering, you work directly with the upstream maintainers.</p>
+      <LinkToContact label="Get in touch" />
+    </Section>
   );
 }
diff --git a/src/components/services/SpecialProjects.tsx b/src/components/services/SpecialProjects.tsx
index 13f298f51..3af04072a 100644
--- a/src/components/services/SpecialProjects.tsx
+++ b/src/components/services/SpecialProjects.tsx
@@ -1,28 +1,21 @@
+import SplitSection from "../layout/SplitSection";
 import SpecialProjectsMD from "./descriptions/SpecialProjects.md";
 import SpecialProjectsIllustration from "@site/static/img/illustrations/special_projects.svg";
 
 export default function SpecialProjects() {
   return (
-    <>
-      <div className="main-container-with-margins">
-        <div className="container upper-container-with-margin-top">
-          <div className="row">
-            <div className={"col col--4 col--offset-2"} style={{textAlign:"justify"}}>
-              <h2>Special projects</h2>
-              <SpecialProjectsMD />
-            </div>
-            <div className={"col col--5 flex-full-centered"}>
-              <SpecialProjectsIllustration
-                alt={
-                  "Picture showing an illustration of a group of people working together in an office."
-                }
-                height={"300px"}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-      <div className="spacing-4xl" />
-    </>
+    <SplitSection
+      ratio="50/50"
+      bg="white"
+      image={
+        <SpecialProjectsIllustration
+          alt="Picture showing an illustration of a group of people working together in an office."
+          height={"300px"}
+        />
+      }
+    >
+      <h2>Special projects</h2>
+      <SpecialProjectsMD />
+    </SplitSection>
   );
 }
diff --git a/src/components/services/Support.tsx b/src/components/services/Support.tsx
index 82a9a2d73..e23f2aa27 100644
--- a/src/components/services/Support.tsx
+++ b/src/components/services/Support.tsx
@@ -1,22 +1,21 @@
+import SplitSection from "../layout/SplitSection";
 import SupportMD from "./descriptions/Support.md";
 import SupportIllustration from "/img/illustrations/support.svg";
 
 export default function Support() {
   return (
-    <div className="main-container-with-margins">
-      <div className="container upper-container-with-margin-top">
-        <div className="row">
-          <div className="col col--4 col--offset-1">
-            <div className="flex-full-centered" style={{marginBottom:"var(--ifm-spacing-xl)"}}>
-              <SupportIllustration  height={"280px"} alt="Illustration for the support section, showing symbolically a person indicating the direction to take." />
-            </div>
-          </div>
-          <div className={"col col--6"} style={{textAlign:"justify"}}>
-            <h2>Professional Support</h2>
-            <SupportMD />
-          </div>
-        </div>
-      </div>
-    </div>
+    <SplitSection
+      ratio="50/50"
+      reverse
+      image={
+        <SupportIllustration
+          height={"280px"}
+          alt="Illustration for the support section, showing symbolically a person indicating the direction to take."
+        />
+      }
+    >
+      <h2>Professional Support</h2>
+      <SupportMD />
+    </SplitSection>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/services/index.tsx b/src/components/services/index.tsx
index 911b924d0..16357dc27 100644
--- a/src/components/services/index.tsx
+++ b/src/components/services/index.tsx
@@ -1,23 +1,18 @@
-import styles from "./styles.module.css";
 import Support from "./Support";
 import SpecialProjects from "./SpecialProjects";
 import Header from "./Header";
+import Banner from "../layout/Banner";
 import LinkToContact from "../home/LinkToContact";
 
 export default function Services() {
   return (
-    <div className="upper-container-with-margin-top">
+    <>
       <Header />
       <Support />
       <SpecialProjects />
-      <div className="blue-banner-container">
-        <div
-          className={"flex-full-centered blue-banner-text"}
-        >
-          Sign a support retainer for QuantStack services in our ecosystem.
-        </div>
-        <LinkToContact label={"CONTACT US!"} />
-      </div>
-    </div>
+      <Banner bg="dark" cta={<LinkToContact label={"CONTACT US!"} />}>
+        Sign a support retainer for QuantStack services in our ecosystem.
+      </Banner>
+    </>
   );
 }
diff --git a/src/css/custom.css b/src/css/custom.css
index 803abaaa8..703830092 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -1,8 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto");
-@import url("https://fonts.cdnfonts.com/css/bebas-neue");
-@import url("https://fonts.cdnfonts.com/css/rubik-one");
-@import url("https://fonts.cdnfonts.com/css/roboto-flex");
-@import url("https://fonts.googleapis.com/css2?family=Dosis");
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700;800;900&display=swap");
 @import url('https://fonts.googleapis.com/css2?family=Kode+Mono:wght@400;500;600;700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
 
@@ -25,9 +21,24 @@
 
   --ifm-color-neutral-n1: #605e58;
   --ifm-color-neutral-n2: #371300;
+  --ifm-color-neutral-n3: #c8c8c7;
+
+  --ifm-color-accent-yellow: #FCF12B;
+  --ifm-color-accent-indigo: #5242FF;
+  --ifm-color-accent-dark: #2A2A2A;
+
+  --ifm-shadow-card: 0px 2px 12px rgba(160, 140, 40, 0.15);
+  --ifm-shadow-dialog: 0 8px 16px rgba(0, 0, 0, 0.2);
+  --ifm-overlay-background: rgba(0, 0, 0, 0.3);
 
   --ifm-text-color: var(--ifm-color-primary-p2);
-  --ifm-background-color: white;
+  --ifm-background-color: var(--ifm-bg-neutral);
+
+  /* Semantic background roles */
+  --ifm-bg-neutral: #ffffff;                         /* default reading surface */
+  --ifm-bg-brand: var(--ifm-color-primary-p0);       /* brand identity — yellow */
+  --ifm-bg-emphasis: var(--ifm-color-secondary-s2);  /* CTA / strong contrast — navy */
+
 
   /* footer */
   --ifm-background-color-footer: var(--ifm-color-primary-p1);
@@ -45,10 +56,6 @@
 
   /*Font families */
   --ifm-font-family-roboto: "Roboto";
-  --ifm-font-family-roboto-flex: "Roboto Flex";
-  --ifm-font-family-bebas-neue: "Bebas Neue";
-  --ifm-font-family-rubik-one: "Rubik One";
-  --ifm-font-family-dosis: "Dosis";
   --ifm-font-family-kode-mono: "Kode Mono";
   --ifm-font-family-inter: "Inter";
 
@@ -69,6 +76,8 @@
   --ifm-spacing-8xl: 400px;
 
   --ifm-navbar-item-padding-horizontal: 2px;
+
+  --ifm-content-width: 1200px;
 }
 
 .flex-full-centered {
@@ -94,10 +103,6 @@
   padding: 0;
 }
 
-.row-reverse {
-  flex-direction: column-reverse;
-}
-
 ul {
   padding-left: 0;
   margin-left: 0;
@@ -108,12 +113,6 @@ ul {
   padding: 0;
 }
 
-.row-max-width {
-  max-width: 1500px;
-  display: flex;
-}
-
-
 /***footer*****/
 .footer__item {
   color: var(--ifm-text-color-footer);
@@ -162,13 +161,6 @@ ul {
   color: var(--ifm-text-color-footer);
 }
 
-.footer-astronaut {
-  display: flex;
-  width: 35px;
-  height: 35px;
-  padding: 10px;
-}
-
 @media (min-width: 1440px) {
   .container {
     max-width: none;
@@ -177,34 +169,9 @@ ul {
 
 /******  Class that are specific for smaller screens*/
 @media (max-width: 996px) {
-  .main-container-with-margins {
-    margin-left: 42px;
-    margin-right: 42px;
-  }
-
-  .upper-container-with-margin-top {
-    margin-top: var(--ifm-spacing-2xl);
-  }
-
-  .row-with-margin-top {
-    margin-top: var(--ifm-spacing-xl);
-  }
-
-  .row-with-margin-bottom {
-    margin-bottom: var(--ifm-spacing-xl);
-  }
-
-  .row-with-margins {
-    margin: var(--ifm-spacing-xl) 0;
-  }
-
-  .col {
-    padding: 0;
-  }
-
   h1 {
     color: var(--ifm-text-color-main-title);
-    font-family: var(--ifm-font-family-bebas-neue);
+    font-family: var(--ifm-font-family-roboto);
     font-size: 32px;
     font-style: normal;
     font-weight: 600;
@@ -216,7 +183,7 @@ ul {
   }
 
   h2 {
-    font-family: var(--ifm-font-family-bebas-neue);
+    font-family: var(--ifm-font-family-roboto);
     font-size: 24px;
     font-style: normal;
     font-weight: bolder;
@@ -239,97 +206,29 @@ ul {
     margin-left: 24px;
   }
 
-  .blue-banner-container {
-    font-family: var(--ifm-font-family-roboto);
-    font-size: 16px;
-    font-weight: 500;
-    color: var(--ifm-color-secondary-s2);
-    padding: var(--ifm-spacing-2xl) var(--ifm-spacing-lg) 0 var(--ifm-spacing-lg);
-    background-color: var(--ifm-color-secondary-s1);
-    line-height: 20px;
-    letter-spacing: 0.1px;
-    text-align: center;
-  }
-
-  .blue-banner-header {
-    text-align: center;
-    font-family: var(--ifm-font-family-bebas-neue);
-    font-size: 32px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 150%;
-    letter-spacing: 2.112px;
-    background-color: var(--ifm-color-secondary-s1);
-    color: var(--ifm-color-secondary-s2);
-  }
-
   .link-to-button {
-    width: 258px;
-    height: 56px;
-    font-family: var(--ifm-font-family-roboto);
-    border-radius: 35px;
-    background: var(--ifm-color-secondary-s2);
-    color: white;
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 150%;
-    letter-spacing: -0.176px;
-    padding: 16px 36px;
-    border: none;
-    text-align: center;
     margin-top: var(--ifm-spacing-lg);
     margin-bottom: var(--ifm-spacing-lg);
   }
-
-  .link-box {
-    height: 59px;
-    width: auto;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
 }
 
 /******  Class that are specific to larger screens*/
 @media (min-width: 996px) {
-  .main-container-with-margins {
-    margin-left: 96px;
-    margin-right: 96px;
-    display: flex;
-    justify-content: center;
-  }
-
-  .upper-container-with-margin-top {
-    margin-top: var(--ifm-spacing-6xl);
-  }
-
-  .row-with-margin-top {
-    margin-top: var(--ifm-spacing-2xl);
-  }
-
-  .row-with-margin-bottom {
-    margin-bottom: var(--ifm-spacing-2xl);
-  }
-
-  .row-with-margins {
-    margin: var(--ifm-spacing-2xl) 0;
-  }
-
   h1 {
     color: var(--ifm-color-primary-p2);
-    font-family: var(--ifm-font-family-bebas-neue);
+    font-family: var(--ifm-font-family-roboto);
     font-size: var(--ifm-font-size-main-title);
     font-style: normal;
     font-weight: 800;
     line-height: 150%;
     letter-spacing: 2.112px;
     text-align: start;
-    padding: 8px 36px 8px 20px;
+    padding: 0;
+    margin: var(--ifm-spacing-md) 0;
   }
 
   h2 {
-    font-family: var(--ifm-font-family-bebas-neue);
+    font-family: var(--ifm-font-family-roboto);
     font-size: var(--ifm-font-size-secondary-title);
     font-style: normal;
     font-weight: bolder;
@@ -342,155 +241,48 @@ ul {
     font-size: var(--ifm-font-size-normal);
     font-style: normal;
     letter-spacing: 0.25px;
-    text-align: justify;
-  }
-
-  .blue-banner-container {
-    text-align: center;
-    font-family: var(--ifm-font-family-roboto);
-    font-size: 28px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 150%;
-    background-color: var(--ifm-color-secondary-s1);
-    color: var(--ifm-color-secondary-s2);
-    padding: var(--ifm-spacing-2xl) var(--ifm-spacing-4xl) 0 var(--ifm-spacing-4xl);
-  }
-
-  .blue-banner-header {
-    text-align: center;
-    font-family: var(--ifm-font-family-bebas-neue);
-    font-size: 48px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 150%;
-    letter-spacing: 2.112px;
-    background-color: var(--ifm-color-secondary-s1);
-    color: var(--ifm-color-secondary-s2);
-    margin-bottom: var(--ifm-spacing-2xl);
+    text-align: left;
   }
 
   .link-to-button {
-    width: 258px;
-    height: 56px;
-    font-family: var(--ifm-font-family-roboto);
-    border-radius: 35px;
-    background: var(--ifm-color-secondary-s2);
-    color: white;
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 150%;
-    letter-spacing: -0.176px;
-    padding: 16px 36px;
-    border: none;
-    text-align: center;
     margin-top: var(--ifm-spacing-2xl);
     margin-bottom: var(--ifm-spacing-2xl);
   }
-
-  .link-box {
-    height: 59px;
-    width: auto;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
 }
 
 /***********************************************************/
 
-.social-media-links {
-  margin-left: var(--ifm-spacing-3xl);
-  text-align: start;
-}
-
-.spacing-none {
-  height: var(--ifm-spacing-none);
-}
-
-.spacing-2xs {
-  height: var(--ifm-spacing-2xs);
-}
-
-.spacing-xs {
-  height: var(--ifm-spacing-xs);
-}
-
-.spacing-sm {
-  height: var(--ifm-spacing-sm);
-}
-
-.spacing-md {
-  height: var(--ifm-spacing-md);
-}
-
-.spacing-lg {
-  height: var(--ifm-spacing-lg);
-}
-
-.spacing-xl {
-  height: var(--ifm-spacing-xl);
-}
-
-.spacing-2xl {
-  height: var(--ifm-spacing-2xl);
-}
-
-.spacing-3xl {
-  height: var(--ifm-spacing-3xl);
-}
-
-.spacing-4xl {
-  height: var(--ifm-spacing-4xl);
-}
-
-.spacing-5xl {
-  height: var(--ifm-spacing-5xl);
-}
-
-.spacing-6xl {
-  height: var(--ifm-spacing-6xl);
-}
-
-.spacing-7xl {
-  height: var(--ifm-spacing-7xl);
-}
-
-.spacing-8xl {
-  height: var(--ifm-spacing-8xl);
-}
-
 .link-to-button {
-  width: 258px;
-  height: 56px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: auto;
   font-family: var(--ifm-font-family-roboto);
   border-radius: 35px;
   background: var(--ifm-color-secondary-s2);
   color: white;
-  font-size: 16px;
+  font-size: 15px;
   font-style: normal;
-  font-weight: 600;
-  line-height: 150%;
-  letter-spacing: -0.176px;
-  padding: 16px 36px;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+  padding: 14px 36px;
   border: none;
   text-align: center;
-  margin-top: var(--ifm-spacing-2xl);
-  margin-bottom: var(--ifm-spacing-2xl);
+  cursor: pointer;
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+  text-decoration: none;
 }
 
-.link-box {
-  height: 59px;
-  width: auto;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.link-to-button:hover {
+  color: white;
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(0, 38, 70, 0.35);
+  text-decoration: none;
 }
 
-.social-media-links {
-  margin-left: var(--ifm-spacing-3xl);
-  text-align: start;
+.link-to-button:active {
+  transform: translateY(0);
+  box-shadow: none;
 }
 
 /*
@@ -548,7 +340,7 @@ so they are already assumed to be clickable anyway */
 .pagination-nav__link:active,
 a.card:active,
 a.menu__link:active {
-  background: white;
+  background: var(--ifm-bg-neutral);
   color: #000;
 }
 
@@ -568,43 +360,72 @@ a.menu__link:active {
   transform: scale(1);
 }
 
-.contact {
-  background-color: var(--ifm-color-primary-p1);
-  color: var(--ifm-color-text-on-primary-p1);
-  font-size: 14px;
-  border-radius: 4px;
-  font-weight: bolder;
-  font-style: normal;
-  margin: var(--ifm-navbar-item-padding-vertical) 4px;
-  padding: 8px;
+/* Scroll-adaptive navbar */
+.navbar {
+  transition: background-color 0.25s ease, box-shadow 0.25s ease;
+  background-color: var(--ifm-navbar-background-color);
 }
 
-.contact:hover {
-  background-color: white;
+html:not([data-navbar-scrolled]) .navbar {
+  background-color: transparent !important;
+  box-shadow: none !important;
 }
 
-.fundable_projects {
-  background-color: var(--ifm-color-secondary-s1);
-  font-size: 14px;
-  color: black;
-  border-radius: 4px;
-  font-weight: bolder;
-  font-style: normal;
-  margin: var(--ifm-navbar-item-padding-vertical) 4px;
-  padding: 8px;
+html[data-navbar-scrolled] .navbar {
+  background-color: var(--ifm-bg-neutral) !important;
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08) !important;
 }
 
-.fundable_projects:hover {
-  background-color: var(--ifm-color-primary-p0);
+/* Home page at top: white links over dark hero */
+html[data-navbar-home-top] .navbar__link,
+html[data-navbar-home-top] .custom_navbar_item {
+  color: white;
+}
+
+html[data-navbar-home-top] .custom_navbar_item:hover {
+  background-color: rgba(255, 255, 255, 0.15);
+  color: white;
+}
+
+html[data-navbar-home-top] .navbar__link:hover {
+  color: var(--ifm-color-primary-p1);
+}
+
+.navbar__inner {
+  position: relative;
+}
+
+.navbar__inner .navbar__brand {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.theme-layout-navbar-left {
+  flex: 1;
+  justify-content: center;
 }
 
+@media (max-width: 996px) {
+  .theme-layout-navbar-left {
+    justify-content: flex-end;
+  }
+}
+
+.theme-layout-navbar-right {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
 
 .custom_navbar_item {
   font-family: var(--ifm-font-family-roboto);
-  width: 117px;
   height: 36px;
   padding: 6px 14px;
   text-align: center;
+  white-space: nowrap;
 }
 
 .custom_navbar_item:hover {
@@ -613,19 +434,11 @@ a.menu__link:active {
   border-radius: 4px;
 }
 
-.navbar__link:hover {
+html[data-navbar-scrolled] .navbar__link:hover,
+html:not([data-navbar-home-top]) .navbar__link:hover {
   color: black;
 }
 
-.astronaut-footer {
-  background: url(@site/static/img/quantstack/astronaut-footer.svg);
-  content: "";
-  display: flex;
-  height: 240px;
-  width: 240px;
-  background-repeat: no-repeat;
-}
-
 .rss-circle-icon:hover {
   opacity: 0.6;
 }
@@ -701,38 +514,17 @@ a.menu__link:active {
   border: 0px solid;
 }
 
-.cards-list {
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
-}
-
-ul.row {
-  margin: 0;
-  padding: 0;
-}
-
-.projects-list {
-  list-style-type: none;
-  padding: none;
-  margin-left: 0;
+.page-content {
+  max-width: var(--ifm-content-width);
   width: 100%;
+  margin: 0 auto;
+  padding-left: var(--ifm-spacing-2xl);
+  padding-right: var(--ifm-spacing-2xl);
 }
 
-.row {
-  display: flex;
-  flex-wrap: wrap;
-  margin: 0 0;
-}
-
-.items-list {
-  list-style-type: none;
-}
-
-.custom-progress-bar::-webkit-progress-value {
-  background-color: var(--ifm-color-primary-p1);
-}
-
-.custom-progress-bar::-webkit-progress-bar {
-  background-color: #eee;
+@media (max-width: 996px) {
+  .page-content {
+    padding-left: var(--ifm-spacing-lg);
+    padding-right: var(--ifm-spacing-lg);
+  }
 }
diff --git a/static/img/socialmedias/Bluesky.svg b/static/img/socialmedias/Bluesky.svg
index fdd1feeba..53f7fe9c1 100644
--- a/static/img/socialmedias/Bluesky.svg
+++ b/static/img/socialmedias/Bluesky.svg
@@ -12,7 +12,7 @@
      id="g1"
      transform="matrix(0.88888887,0,0,0.88888896,-0.44444234,3.9736433e-7)">
     <ellipse
-       style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.972886;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       style="opacity:1;fill:none;fill-opacity:0;stroke:none;stroke-width:0.972886;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0"
        id="path1012"
        cx="18.499998"
        cy="17.999998"
diff --git a/static/img/socialmedias/GH.svg b/static/img/socialmedias/GH.svg
index 44a7bdd30..a8758e8af 100644
--- a/static/img/socialmedias/GH.svg
+++ b/static/img/socialmedias/GH.svg
@@ -21,8 +21,8 @@
          cx="18.9795"
          cy="18"
          r="17.5"
-         fill="#ffffff"
-         stroke="#000000" />
+         fill="none"
+         stroke="none" />
       <path
          id="Vector"
          d="m 25.3387,13.306705 c 0.2037,-0.6574 0.2691,-1.3498 0.1919,-2.0336 -0.0771,-0.6839 -0.2951,-1.3443996 -0.6403,-1.9397996 -0.0585,-0.1013 -0.1427,-0.1855 -0.2441,-0.244 -0.1013,-0.0585 -0.2163,-0.08932 -0.3334,-0.0893 -0.7765,-0.00161 -1.5426,0.1784 -2.2371,0.5257 -0.6946,0.3472 -1.2983,0.8520996 -1.7629,1.4742996 h -2 c -0.4646,-0.6222 -1.0683,-1.1270996 -1.7628,-1.4742996 -0.6945,-0.3473 -1.4607,-0.52731 -2.2372,-0.5257 -0.117,-2e-5 -0.232,0.0308 -0.3334,0.0893 -0.1014,0.0585 -0.1855,0.1427 -0.2441,0.244 -0.3451,0.5954 -0.5631,1.2558996 -0.6403,1.9397996 -0.0771,0.6838 -0.0118,1.3762 0.192,2.0336 -0.4119,0.7189 -0.6325,1.5315 -0.6408,2.36 v 0.6666 c 0.0014,1.128 0.4109,2.2174 1.1528,3.0671 0.742,0.8496 1.7663,1.4021 2.8838,1.5554 -0.4561,0.5838 -0.7037,1.3034 -0.7033,2.0442 v 0.6667 h -2 c -0.5304,0 -1.0391,-0.2107 -1.4142,-0.5858 -0.3751,-0.3751 -0.5858,-0.8838 -0.5858,-1.4142 0,-0.4378 -0.0862,-0.8712 -0.2537,-1.2756 -0.1676,-0.4045 -0.4131,-0.7719 -0.7226,-1.0815 -0.3095,-0.3095 -0.677,-0.555 -1.08143,-0.7225 -0.40442,-0.1675 -0.83787,-0.2538 -1.27561,-0.2538 -0.17681,0 -0.34638,0.0703 -0.47141,0.1953 -0.12502,0.125 -0.19526,0.2946 -0.19526,0.4714 0,0.1768 0.07024,0.3464 0.19526,0.4714 0.12503,0.125 0.2946,0.1953 0.47141,0.1953 0.53043,0 1.03914,0.2107 1.41424,0.5858 0.375,0.375 0.5858,0.8837 0.5858,1.4142 0,0.884 0.3511,1.7319 0.9763,2.357 0.6251,0.6251 1.4729,0.9763 2.357,0.9763 h 2 v 1.3333 c 0,0.1768 0.0702,0.3464 0.1953,0.4714 0.125,0.1251 0.2945,0.1953 0.4714,0.1953 0.1768,0 0.3463,-0.0702 0.4714,-0.1953 0.125,-0.125 0.1952,-0.2946 0.1952,-0.4714 v -3.3333 c 0,-0.5304 0.2107,-1.0391 0.5858,-1.4142 0.3751,-0.3751 0.8838,-0.5858 1.4142,-0.5858 0.5305,0 1.0392,0.2107 1.4142,0.5858 0.3751,0.3751 0.5858,0.8838 0.5858,1.4142 v 3.3333 c 0,0.1768 0.0703,0.3464 0.1953,0.4714 0.125,0.1251 0.2946,0.1953 0.4714,0.1953 0.1768,0 0.3464,-0.0702 0.4714,-0.1953 0.125,-0.125 0.1953,-0.2946 0.1953,-0.4714 v -3.3333 c 4e-4,-0.7408 -0.2472,-1.4604 -0.7034,-2.0442 1.1176,-0.1533 2.1419,-0.7058 2.8838,-1.5554 0.742,-0.8497 1.1515,-1.9391 1.1529,-3.0671 v -0.6666 c -0.0083,-0.8285 -0.2289,-1.6411 -0.6408,-2.36 z m -0.6925,3.0266 c 0,0.8841 -0.3512,1.7319 -0.9764,2.3571 -0.6251,0.6251 -1.4729,0.9763 -2.357,0.9763 h -4 c -0.884,0 -1.7319,-0.3512 -2.357,-0.9763 -0.6251,-0.6252 -0.9763,-1.473 -0.9763,-2.3571 v -0.6666 c 0.0082,-0.6667 0.2078,-1.3169 0.575,-1.8734 0.0685,-0.0902 0.1128,-0.1964 0.1288,-0.3085 0.0161,-0.1121 0.0033,-0.2265 -0.0371,-0.3323 -0.1737,-0.4478 -0.2573,-0.9255 -0.246,-1.4057 0.0113,-0.4802 0.1173,-0.9534 0.3118,-1.3926 0.5456,0.0587 1.071,0.2394 1.5372,0.5288 0.4663,0.2894 0.8614,0.68 1.1561,1.1428 0.0601,0.094 0.1427,0.1713 0.2404,0.225 0.0977,0.0538 0.2073,0.0821 0.3188,0.0825 h 2.6958 c 0.1119,0 0.222,-0.0281 0.3202,-0.0819 0.0982,-0.0537 0.1812,-0.1313 0.2415,-0.2256 0.2947,-0.4629 0.6898,-0.8535 1.1561,-1.1429 0.4662,-0.2894 0.9916,-0.4701 1.5372,-0.5287 0.1943,0.4393 0.2999,0.9126 0.3109,1.3927 0.0111,0.4802 -0.0728,0.9579 -0.2467,1.4056 -0.0403,0.1048 -0.0538,0.218 -0.0392,0.3293 0.0145,0.1114 0.0567,0.2173 0.1225,0.3082 0.3709,0.5564 0.5734,1.208 0.5834,1.8767 z"
diff --git a/static/img/socialmedias/LinkedIn.svg b/static/img/socialmedias/LinkedIn.svg
index e6d14a5cc..4980b0042 100644
--- a/static/img/socialmedias/LinkedIn.svg
+++ b/static/img/socialmedias/LinkedIn.svg
@@ -21,8 +21,8 @@
          cx="18.9795"
          cy="18"
          r="17.5"
-         fill="#ffffff"
-         stroke="#000000" />
+         fill="none"
+         stroke="none" />
       <path
          id="Vector"
          d="m 10.9795,14.6667 h 3.3333 V 26 h -3.3333 z m 1.6567,-1.3334 h -0.0187 c -0.9947,0 -1.638,-0.7413 -1.638,-1.6673 0,-0.946 0.6633,-1.666 1.676,-1.666 1.014,0 1.6387,0.72 1.6573,1.666 0,0.9253 -0.6433,1.6673 -1.6766,1.6673 z M 26.9795,26 h -3.3333 v -6.066 c 0,-1.4653 -0.8167,-2.4653 -2.128,-2.4653 -1.0007,0 -1.542,0.6746 -1.8047,1.3266 -0.096,0.2334 -0.0673,0.8787 -0.0673,1.2047 v 6 H 16.3128 V 14.6667 h 3.3334 v 1.744 c 0.4806,-0.744 1.2333,-1.744 3.1586,-1.744 2.3854,0 4.174,1.5 4.174,4.8493 z"
diff --git a/static/img/socialmedias/Mastodon.svg b/static/img/socialmedias/Mastodon.svg
index 664f1e556..2aaf70b87 100644
--- a/static/img/socialmedias/Mastodon.svg
+++ b/static/img/socialmedias/Mastodon.svg
@@ -16,7 +16,7 @@
        id="g2"
        transform="matrix(0.8888889,0,0,0.888889,1.9270827,1.8749976)">
       <ellipse
-         style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.91208;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         style="fill:none;fill-opacity:0;stroke:none;stroke-width:0.91208;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0"
          id="path1012"
          cx="17.343746"
          cy="16.874996"
diff --git a/static/img/socialmedias/RSS.svg b/static/img/socialmedias/RSS.svg
index 5994afc6c..42580b2c9 100644
--- a/static/img/socialmedias/RSS.svg
+++ b/static/img/socialmedias/RSS.svg
@@ -35,8 +35,8 @@
        cx="18.9795"
        cy="18"
        r="17.5"
-       fill="#ffffff"
-       stroke="#000000" /></g><g
+       fill="none"
+       stroke="none" /></g><g
      id="g4"
      transform="translate(-23.746109,121.63073)"><path
        style="fill:#000000;stroke-width:0.059049"