diff --git a/src/components/about/FourValues.tsx b/src/components/about/FourValues.tsx
index 0e24eb328..0d9615afc 100644
--- a/src/components/about/FourValues.tsx
+++ b/src/components/about/FourValues.tsx
@@ -2,25 +2,32 @@ import styles from "./styles.module.css";
 import { ValueCard } from "@site/src/components/about/ValueCard";
 import { valuesDetails } from "./Values/valuesDetails";
 
-
 export default function FourValues() {
   return (
     <div className={styles.four_values_container}>
       <div className="row">
         <div className="col">
-          <h1 className={"padding-none" + " "+ "full-flex-centered"}>Our values </h1>
+          <h1 className={"padding-none" + " " + "full-flex-centered"}>
+            Our values{" "}
+          </h1>
         </div>
       </div>
       <ul
-        className={"row" + " " + "padding-none" + " " + styles.row_with_margins+" "+ "flex-full-centered"}
+        className={
+          "row" +
+          " " +
+          "padding-none" +
+          " " +
+          styles.row_with_margins +
+          " " +
+          "flex-full-centered"
+        }
       >
         {valuesDetails.map((value, index) => (
           <li className="cards-list" key={index}>
             <div className="col">
               <div className={styles.value_card_container}>
-                <ValueCard
-                  value={value}
-                />
+                <ValueCard value={value} />
               </div>
             </div>
           </li>
@@ -28,4 +35,4 @@ export default function FourValues() {
       </ul>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/about/SmallPortraitCard.tsx b/src/components/about/SmallPortraitCard.tsx
index df09eaf71..27f387c78 100644
--- a/src/components/about/SmallPortraitCard.tsx
+++ b/src/components/about/SmallPortraitCard.tsx
@@ -5,7 +5,7 @@ import { useRef, useState } from "react";
 import LargePortraitCard from "./LargePortraitCard";
 
 const contentStyle = {
-  background: "var(--ifm-background-color-large-portrait-card)",
+  background: "white",
   borderRadius: "10px",
 };
 
diff --git a/src/components/about/SubTeam.tsx b/src/components/about/SubTeam.tsx
index b380dfe5d..9863704fc 100644
--- a/src/components/about/SubTeam.tsx
+++ b/src/components/about/SubTeam.tsx
@@ -10,7 +10,7 @@ export default function SubTeam ({
 }) {
   return (
     <div className={styles.subteam_component}>
-      <h2 className="text-centered"> {description}</h2>
+      <h2 className="text--center"> {description}</h2>
       <div className={"container" + " " + styles.subteam_container}>
         <ul
           className={
diff --git a/src/components/about/ValueCard.tsx b/src/components/about/ValueCard.tsx
index 461f26906..61ca6caad 100644
--- a/src/components/about/ValueCard.tsx
+++ b/src/components/about/ValueCard.tsx
@@ -2,18 +2,19 @@ import styles from "./styles.module.css";
 
 export function ValueCard({ value }) {
   return (
-    <div className={"card " + styles.value_card}>
+    <div className={"card" + " " + styles.value_card}>
       <div
-        className={"flex-full-centered"}
+        className={"card__header flex-full-centered"}
         style={{ marginBottom: "var(--ifm-spacing-lg)" }}
       >
         <value.pictureComponent alt={value.alt} />
       </div>
-      <div className={styles.value_header}>{value.name}</div>
-      <div className={styles.value_text}>
-        <value.DescriptionMD className={styles.value_component} />
+
+      <div className={"card__body"}>
+        <div className={styles.value_header}>{value.name}</div>
+        <value.DescriptionMD className={styles.value_value_text} />
       </div>
     </div>
   );
 }
- export default ValueCard;
\ No newline at end of file
+export default ValueCard;
diff --git a/src/components/about/index.tsx b/src/components/about/index.tsx
index 97dfd0d0c..7a5af1460 100644
--- a/src/components/about/index.tsx
+++ b/src/components/about/index.tsx
@@ -28,7 +28,7 @@ export function About() {
 
           <div className="row">
             <div className="col col--10 col--offset-1">
-              <h1 className="text-centered">Meet the QuantStack team</h1>
+              <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.
@@ -62,7 +62,7 @@ export function About() {
       <div className={styles.join_the_team_container}>
         <h1
           className={
-            "text-centered" +
+            "text--center" +
             " " +
             "padding-none" +
             " " +
diff --git a/src/components/about/styles.module.css b/src/components/about/styles.module.css
index 1e8fe5aff..a7fe31b88 100644
--- a/src/components/about/styles.module.css
+++ b/src/components/about/styles.module.css
@@ -1,8 +1,8 @@
 .small_portrait_card {
   width: 279px;
   height: 388px;
-  background-color: var(--ifm-background-color-small-portrait-card);
-  color: var(--ifm-text-color-small-portrait-card);
+  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-md);
@@ -29,249 +29,171 @@
   line-height: 28px;
   text-align: center;
 }
-@media only screen and (max-width: 996px) {
-  /* mobile */
-  .h2_custom {
-    padding: var(--ifm-spacing-lg) var(--ifm-spacing-2xl);
-  }
 
-  .join_the_team_container {
-    background-color: var(--ifm-color-secondary-s1);
-    padding: var(--ifm-spacing-3xl) var(--ifm-spacing-xl);
-    margin: 0;
-  }
-
-  .join_the_team_text {
-    background-color: var(--ifm-color-secondary-s1);
-  }
-
-  .value_header {
-    font-family: var(--ifm-font-family-rubik-one);
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 16px;
-    text-align: center;
-    margin-bottom: var(--ifm-spacing-xl);
-    color: var(--ifm-text-color-value-card-white);
-  }
-
-  .value_text {
-    font-family: var(--ifm-font-family-roboto);
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 20px; /* 142.857% */
-    letter-spacing: 0.25px;
-  }
-
-  .value_text p {
-    color: var(--ifm-text-color-value-card-white);
-    text-align: center;
-  }
-
-  .value_card {
-    padding: var(--ifm-spacing-2xl) var(--ifm-spacing-lg);
-    border: none;
-    border-radius: 0;
-    border: transparent;
-  }
-
-  .value_card_white {
-    background-color: var(--ifm-background-color-value-card-white);
-    color: var(--ifm-text-color-value-card-white);
-  }
-
-  .value_card_yellow {
-    background-color: var(--ifm-background-color-value-card-yellow);
-    color: var(--ifm-text-color-value-card-yellow);
-  }
-
-  .bio_container {
-    text-align: justify;
-    font-family: var(--ifm-font-family-roboto);
-    font-size: var(--ifm--font-size-normal);
-    font-style: normal;
-    font-weight: 400;
-    line-height: 24px; /* 133.333% */
-    letter-spacing: 0.5px;
-    padding: var(--ifm-spacing-4xl) var(--ifm-spacing-2xl);
-  }
+.value_header {
+  font-family: var(--ifm-font-family-rubik-one);
+  font-size: var(--ifm-font-size-secondary-title);
+  font-style: normal;
+  font-weight: 600;
+  line-height: 28px;
+  text-align: center;
+  margin-bottom: var(--ifm-spacing-xl);
+  color: var(--ifm-text-color-on-primary-p1);
 }
 
-@media only screen and (min-width: 996px) {
-  /* Desktop */
-  .value_header {
-    font-family: var(--ifm-font-family-rubik-one);
-    font-size: var(--ifm-font-size-secondary-title);
-    font-style: normal;
-    font-weight: 600;
-    line-height: 28px;
-    text-align: center;
-    margin-bottom: var(--ifm-spacing-xl);
-  }
-
-  div .value_header {
-    color: var(--ifm-text-color-value-card-white);
-  }
-
-  .value_text {
-    font-family: var(--ifm-font-family-roboto);
-    font-size: 6px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 20px; /* 142.857% */
-    letter-spacing: 0.25px;
-  }
-
-  .value_text p {
-    color: var(--ifm-text-color-value-card-yellow);
-    text-align: center;
-  }
+.value_text p {
+  font-family: var(--ifm-font-family-roboto);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: 0.25px;
+  color: var(--ifm-text-color-on-primary-p1);
+}
 
-  .row_with_margins {
-    margin-top: var(--ifm-spacing-4xl) 0;
-  }
+.row_with_margins {
+  margin-top: var(--ifm-spacing-4xl) 0;
+}
 
-  div .row {
-    margin-left: 0;
-    margin-right: 0;
-  }
+div .row {
+  margin-left: 0;
+  margin-right: 0;
+}
 
-  .about_container {
-    margin-top: var(--ifm-spacing-6xl);
-  }
+.about_container {
+  margin-top: var(--ifm-spacing-6xl);
+}
 
-  .value_card {
-    height: 516px;
-    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-background-color-value-card-yellow);
-    margin-bottom: var(--ifm-spacing-xl);
-  }
+.value_card {
+  height: 540px;
+  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);
+}
 
-  .large_portrait_card {
-    width: 1000px;
-    /*background-color: var(--ifm-background-color-large-portrait-card);*/
-    border-radius: 10px;
-    box-shadow: 0px 1px 10px 0 rgba(1, 0, 0, 0.17);
-    padding: var(--ifm-spacing-xl) var(--ifm-spacing-2xl);
-  }
+.large_portrait_card {
+  width: 1000px;
+  /*background-color: white;*/
+  border-radius: 10px;
+  box-shadow: 0px 1px 10px 0 rgba(1, 0, 0, 0.17);
+  padding: var(--ifm-spacing-xl) var(--ifm-spacing-2xl);
+}
 
-  .bio_container {
-    font-family: var(--ifm-font-family-roboto);
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 24px; /* 133.333% */
-    letter-spacing: 0.5px;
-  }
+.bio_container {
+  font-family: var(--ifm-font-family-roboto);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px; /* 133.333% */
+  letter-spacing: 0.5px;
+}
 
-  .bio_container p {
-    color: var(--ifm-text-color-large-portrait-card);
-  }
+.bio_container p {
+  color: var(--ifm-color-primary-p2);
+}
 
-  .small_card_complete_name {
-    font-size: 16px;
-    font-family: var(--ifm-font-family-roboto);
-    color: var(--ifm-text-color-large-portrait-card);
-    font-style: normal;
-    font-weight: 500;
-    line-height: 24px; /* 150% */
-    letter-spacing: 0.15px;
-    margin: var(--ifm-spacing-xs) 0;
-  }
+.small_card_complete_name {
+  font-size: 16px;
+  font-family: var(--ifm-font-family-roboto);
+  color: var(--ifm-color-primary-p2);
+  font-style: normal;
+  font-weight: 500;
+  line-height: 24px; /* 150% */
+  letter-spacing: 0.15px;
+  margin: var(--ifm-spacing-xs) 0;
+}
 
-  .small_card_position {
-    font-size: var(--ifm--font-size-normal);
-    font-family: var(--ifm-font-family-roboto);
-    color: var(---ifm-text-color);
-    font-style: normal;
-    font-weight: 600;
-    line-height: 24px; /* 133.333% */
-    letter-spacing: 0.5px;
-    color: var(--ifm-text-color-small-portrait-card);
-  }
+.small_card_position {
+  font-size: var(--ifm--font-size-normal);
+  font-family: var(--ifm-font-family-roboto);
+  color: var(---ifm-text-color);
+  font-style: normal;
+  font-weight: 600;
+  line-height: 24px; /* 133.333% */
+  letter-spacing: 0.5px;
+  color: var(--ifm-color-primary-p2);
+}
 
-  .large_card_complete_name {
-    font-family: var(--ifm-font-family-roboto);
-    font-size: 32px;
-    color: var(---ifm-text-color);
-    font-style: normal;
-    font-weight: 400;
-    line-height: 40px;
-    color: var(--ifm-text-color-large-portrait-card);
-  }
+.large_card_complete_name {
+  font-family: var(--ifm-font-family-roboto);
+  font-size: 32px;
+  color: var(---ifm-text-color);
+  font-style: normal;
+  font-weight: 400;
+  line-height: 40px;
+  color: var(--ifm-color-primary-p2);
+}
 
-  div .large_card_complete_name {
-    color: var(--ifm-text-color-large-portrait-card);
-  }
+div .large_card_complete_name {
+  color: var(--ifm-color-primary-p2);
+}
 
-  .large_card_position {
-    font-size: var(--ifm--font-size-normal);
-    font-family: var(--ifm-font-family-roboto);
-    color: var(--ifm-text-color-large-portrait-card);
-    font-style: normal;
-    font-weight: 400;
-    line-height: 24px; /* 133.333% */
-    letter-spacing: 0.5px;
-  }
+.large_card_position {
+  font-size: var(--ifm--font-size-normal);
+  font-family: var(--ifm-font-family-roboto);
+  color: var(--ifm-color-primary-p2);
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px; /* 133.333% */
+  letter-spacing: 0.5px;
+}
 
-  a {
-    color: var(--ifm-text-color-large-portrait-card);
-  }
+a {
+  color: var(--ifm-color-primary-p2);
+}
 
-  div .large_card_position {
-    color: var(--ifm-text-color-large-portrait-card);
-  }
+div .large_card_position {
+  color: var(--ifm-color-primary-p2);
+}
 
-  .social_icons {
-    margin-top: 10px;
-    margin-bottom: 10px;
-  }
+.social_icons {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
 
-  .githubname {
-    font-size: var(--ifm-font-size-normal);
-    font-family: var(--ifm-font-family-roboto);
-    font-style: normal;
-    font-weight: 400;
-    line-height: 24px; /* 133.333% */
-    letter-spacing: 0.5px;
-    color: var(--ifm-text-color-small-portrait-card);
-  }
+.githubname {
+  font-size: var(--ifm-font-size-normal);
+  font-family: var(--ifm-font-family-roboto);
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px; /* 133.333% */
+  letter-spacing: 0.5px;
+  color: var(--ifm-color-primary-p2);
+}
 
-  .subteam_container {
-    margin-top: var(--ifm-spacing-2xl);
-  }
+.subteam_container {
+  margin-top: var(--ifm-spacing-2xl);
+}
 
-  .four_values_container {
-    margin-bottom: var(--ifm-spacing-5xl);
-  }
+.four_values_container {
+  margin-bottom: var(--ifm-spacing-5xl);
+}
 
-  .join_the_team_container {
-    font-family: var(--ifm-font-family-roboto);
-    font-size: 28px;
-    font-style: normal;
-    text-align: center;
-    font-weight: 400;
-    line-height: 36px; /* 128.571% */
-    color: var(--ifm-color-secondary-s3);
-    padding: var(--ifm-spacing-2xl) var(--ifm-spacing-2xl);
-    max-width: none;
-    background-color: var(--ifm-background-color-blue-banner);
-  }
+.join_the_team_container {
+  font-family: var(--ifm-font-family-roboto);
+  font-size: 28px;
+  font-style: normal;
+  text-align: center;
+  font-weight: 400;
+  line-height: 36px; /* 128.571% */
+  color: var(--ifm-color-secondary-s2);
+  padding: var(--ifm-spacing-2xl) var(--ifm-spacing-2xl);
+  max-width: none;
+  background-color: var(--ifm-color-secondary-s1);
+}
 
-  div .join_the_team_title {
-    color: var(--ifm-text-color-blue-banner);
-  }
+div .join_the_team_title {
+  color: var(--ifm-color-secondary-s2);
+}
 
-  .join_the_team_text {
-    margin-bottom: var(--ifm-spacing-2xl);
-  }
+.join_the_team_text {
+  margin-bottom: var(--ifm-spacing-2xl);
+}
 
-  div .join_the_team_text {
-    color: var(--ifm-text-color-blue-banner);
-  }
+div .join_the_team_text {
+  color: var(--ifm-color-secondary-s2);
 }
+/*}*/
diff --git a/src/components/blog/BlogpostCard.tsx b/src/components/blog/BlogpostCard.tsx
index ed2d02192..69f14fc0d 100644
--- a/src/components/blog/BlogpostCard.tsx
+++ b/src/components/blog/BlogpostCard.tsx
@@ -8,10 +8,9 @@ import useBaseUrl from "@docusaurus/useBaseUrl";
 export default function BlogpostCard({ blogpost, timeIndex }) {
   return (
     <div
-      className={"card " + styles.blogpost_card}
+      className={"card" + " " + styles.blogpost_card}
       style={{ marginBottom: "var(--ifm-spacing-lg)" }}
     >
-   
       <Link href={blogpost.url}>
         <div className="container">
           <div
@@ -25,29 +24,33 @@ export default function BlogpostCard({ blogpost, timeIndex }) {
               "margin-none"
             }
           ></div>
-
-          <div className="flex-full-centered" style = {{height: "180px"}}>
-            <div className={styles.blogpost_image}>
+          <div className="card__header">
+            <div
+              className={styles.blogpost_image + " " + "flex-full-centered"}
+              style={{ height: "180px" }}
+            >
               <img
                 src={useBaseUrl(blogpost.image)}
                 id={blogpost.imageID}
                 width={blogpost.imageRenderedWidth}
                 height={blogpost.imageRenderedHeight}
-                alt={"Illustration for the blog post"}
+                alt={"Illustration for the blog post."}
               />
             </div>
-          </div>
 
-          <div className={styles.blogpost_header}>{blogpost.title}</div>
+            <div className={styles.blogpost_header}>{blogpost.title}</div>
+          </div>
 
-          <div className={styles.blogpost_summary}>
-            {blogpost.summary.length < 200
-              ? blogpost.summary
-              : blogpost.summary.substring(0, 200) + "..."}
+          <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"
+            className={"row card__footer"}
             style={{ marginBottom: "var(--ifm-spacing-md)" }}
           >
             <div className="col" style={{ padding: "0px" }}>
diff --git a/src/components/blog/styles.module.css b/src/components/blog/styles.module.css
index 869255f4b..e6c1d0aa0 100644
--- a/src/components/blog/styles.module.css
+++ b/src/components/blog/styles.module.css
@@ -40,7 +40,7 @@ div .blogpost_date {
   text-align: justify;
   margin-bottom: var(--ifm-spacing-sm);
   height: 140px;
-  color: var(--ifm-text-color-card);
+  color: var(--ifm-text-color);
 }
 
 .blogpost_header {
@@ -53,7 +53,7 @@ div .blogpost_date {
   letter-spacing: -0.198px;
   height: 48px;
   margin: var(--ifm-spacing-xl) 0;
-  color: var(--ifm-text-color-card);
+  color: var(--ifm-text-color);
 }
 
 .blogpost_date {
@@ -65,7 +65,7 @@ div .blogpost_date {
   line-height: 16px;
   letter-spacing: -0.132px;
   text-align: left;
-  color: var(--ifm-text-color-card);
+  color: var(--ifm-text-color);
 }
 
 .blogpost_authors {
@@ -75,7 +75,7 @@ div .blogpost_date {
   font-weight: 400;
   line-height: 16px;
   text-align: left;
-  color: var(--ifm-text-color-card);
+  color: var(--ifm-text-color);
 }
 
 .search_input {
@@ -90,13 +90,6 @@ div .blogpost_date {
     var(--ifm-spacing-lg);
 }
 
-@media only screen and (max-width: 996px) {
-  /*Mobile */
-}
-
-@media only screen and (min-width: 996px) {
-  /*Desktop */
-  .blogposts_container {
-    margin: var(--ifm-spacing-6xl) 0;
-  }
+.blogposts_container {
+  margin: var(--ifm-spacing-6xl) 0;
 }
diff --git a/src/components/careers/Header.tsx b/src/components/careers/Header.tsx
index cb775d300..475d3f23c 100644
--- a/src/components/careers/Header.tsx
+++ b/src/components/careers/Header.tsx
@@ -4,7 +4,7 @@ import GroupPhotoJupyterConUrl from "@site/static/img/group/group-photo.png";
 export default function Header() {
     return (
       <div className={styles.careers_header}>
-        <h1 className="text-centered">Join the QuantStack team!</h1>
+        <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>
diff --git a/src/components/careers/VisitWTJProfile.tsx b/src/components/careers/VisitWTJProfile.tsx
index a541166c2..70456763f 100644
--- a/src/components/careers/VisitWTJProfile.tsx
+++ b/src/components/careers/VisitWTJProfile.tsx
@@ -6,7 +6,7 @@ export default function VisitWTJProfile() {
     <div className={styles.WTJ_profile_container}>
       <h1
         className={
-          "text-centered" +
+          "text--center" +
           " " +
           "padding-none" +
           " " +
diff --git a/src/components/careers/styles.module.css b/src/components/careers/styles.module.css
index c4b919845..933e2b092 100644
--- a/src/components/careers/styles.module.css
+++ b/src/components/careers/styles.module.css
@@ -27,78 +27,17 @@
 }
 
 div .learn_more_WTJ {
-  color: var(--ifm-text-color-blue-banner);
+  color: var(--ifm-color-secondary-s2);
   margin-bottom: var(--ifm-spacing-2xl);
 }
 
 .link_to_WTJ {
-  background-color: var(--ifm-background-color-button-blue-banner);
-  color: var(--ifm-text-color-button-blue-banner);
+  background-color: var(--ifm-color-secondary-s2);
+  color: white;
   width: 358px;
   font-weight: 700;
 }
 
-@media only screen and (max-width: 400px) {
-  /*Mobile */
-  .careers_container {
-    margin-top: var(--ifm-spacing-2xl);
-  }
-
-  .join_the_team_text {
-    text-align: center;
-    font-size: 12px;
-    font-family: var(--ifm-font-family-roboto);
-    color: var(--ifm-color-primary-p2);
-    text-align: center;
-    font-style: normal;
-    font-weight: 400;
-    padding: var(--ifm-spacing-xl) var(--ifm-spacing-2xl);
-  }
-
-  .interview_card {
-    width: 300px;
-    height: 270px;
-    background-color: var(--ifm-background-color);
-    border-radius: 10px;
-    box-shadow: 0px 0px 8px 1px #c8c8c7;
-    padding: var(--ifm-spacing-sm);
-    text-align: center;
-    margin-bottom: var(--ifm-spacing-xl);
-  }
-
-  .interview_name {
-    color: var(--ifm-text-color);
-    text-align: center;
-    font-family: var(--ifm-font-family-roboto);
-    font-size: 20px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 36px; /* 128.571% */
-  }
-
-  .interview_position {
-    color: var(--ifm-text-color);
-    text-align: center;
-    font-family: var(--ifm-font-family-roboto);
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 24px; /* 133.333% */
-    letter-spacing: 0.5px;
-  }
-
-  .WTJ_profile_container {
-    margin-top: var(--ifm-spacing-2xl);
-    background-color: var(--ifm-background-color-blue-banner);
-    padding: var(--ifm-spacing-2xl) var(--ifm-spacing-2xl);
-    font-family: var(--ifm-font-family-roboto);
-    font-size: 16px;
-    text-align: center;
-  }
-}
-
-@media only screen and (min-width: 400px) {
-  /*Desktop */
   .careers_container {
     margin-top: var(--ifm-spacing-6xl);
   }
@@ -161,7 +100,7 @@ div .learn_more_WTJ {
 
   .WTJ_profile_container {
     margin: var(--ifm-spacing-6xl) 0 var((--ifm-spacing-2xl)) 0;
-    background-color: var(--ifm-background-color-blue-banner);
+    background-color: var(--ifm-color-secondary-s1);
     padding: var(--ifm-spacing-2xl) var(--ifm-spacing-2xl);
     font-family: var(--ifm-font-family-roboto);
     font-size: 28px;
@@ -178,5 +117,3 @@ div .learn_more_WTJ {
     line-height: 150%; /* 72px */
     letter-spacing: 2.112px;
   }
-
-}
diff --git a/src/components/contact/styles.module.css b/src/components/contact/styles.module.css
index 8b78f75b3..816e08148 100644
--- a/src/components/contact/styles.module.css
+++ b/src/components/contact/styles.module.css
@@ -1,8 +1,7 @@
-
 .send_button {
   width: 258px;
   height: 59px;
-  background: var(--ifm-color-blue-contact-send-button);
+  background: var(--ifm-color-blue-jupyter);
 }
 
 .send_button_container {
@@ -10,57 +9,27 @@
   width: 508px;
   margin-top: var(--ifm-spacing-2xl);
 }
-
-@media only screen and (max-width: 996px) {
-  /*Mobile */
-  .contact_container {
-    margin: var(--ifm-spacing-5xl) 0;
-    text-align: center;
-  }
-
-  .form_label {
-    font-size: 12px;
-    color: var(---ifm-text-color);
-    background-color: var(--ifm-color-orange-light);
-  }
-
-  .small_input {
-    width: 297px;
-    height: 56px;
-    border-radius: 4px;
-  }
-
-  .large_input {
-    width: 297px;
-    height: 220px;
-    border-radius: 4px;
-  }
+.contact_container {
+  margin: var(--ifm-spacing-5xl) 0;
 }
 
-@media only screen and (min-width: 996px) {
-  /*Desktop */
-  .contact_container {
-    margin: var(--ifm-spacing-5xl) 0;
-  }
-
-  .contact_form {
-    margin-top: var(--ifm-spacing-xl);
-  }
+.contact_form {
+  margin-top: var(--ifm-spacing-xl);
+}
 
-  .form_label {
-    font-size: 12px;
-    color: var(--ifm-text-color);
-    background-color: var(--ifm-background-color);
-  }
-  .small_input {
-    width: 508px;
-    height: 56px;
-    border-radius: 4px;
-  }
+.form_label {
+  font-size: 12px;
+  color: var(--ifm-text-color);
+  background-color: var(--ifm-background-color);
+}
+.small_input {
+  width: 508px;
+  height: 56px;
+  border-radius: 4px;
+}
 
-  .large_input {
-    width: 508px;
-    height: 220px;
-    border-radius: 4px;
-  }
-}
\ No newline at end of file
+.large_input {
+  width: 508px;
+  height: 220px;
+  border-radius: 4px;
+}
diff --git a/src/components/home/AboutQS/index.tsx b/src/components/home/AboutQS/index.tsx
index dcb47d854..01d795f21 100644
--- a/src/components/home/AboutQS/index.tsx
+++ b/src/components/home/AboutQS/index.tsx
@@ -6,13 +6,9 @@ export default function AboutQS() {
   return (
     <div className={"container" + " " + styles.about_us_container}>
       <div
-        className={
-          "row" + " " + "flex-full-centered" + " " + "padding-none"
-        }
+        className={"row" + " " + "flex-full-centered" + " " + "padding-none"}
       >
-        <div
-          className={"col" + " " + "padding-none" + " " + "margin-none"}
-        >
+        <div className={"col" + " " + "padding-none" + " " + "margin-none"}>
           <div className={styles.text_container}>
             We are a team of expert of open-source developers, the very same
             people behind a number of technologies that you already use.
@@ -20,29 +16,29 @@ export default function AboutQS() {
         </div>
       </div>
       <div
-        className={
-          "row" + " " + "flex-full-centered" + " " + "padding-none"
-        }
+        className={"row" + " " + "flex-full-centered" + " " + "padding-none"}
       >
-        <div
-          className={"col" + " " + "padding-none" + " " + "margin-none"}
-        >
-          <div className="flex-full-centered" style={{marginBottom: "var(--ifm-spacing-2xl)"}}>
-            <img src={GroupPhotoUrl} alt={"Picture showing a group of Quantstack people in front of Saint-Maur's office, in Paris area."} />
+        <div className={"col" + " " + "padding-none" + " " + "margin-none"}>
+          <div
+            className="flex-full-centered"
+            style={{ marginBottom: "var(--ifm-spacing-2xl)" }}
+          >
+            <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"
-        }
+        className={"row" + " " + "flex-full-centered" + " " + "padding-none"}
       >
-        <div
-          className={"col" + " " + "padding-none"}
-        >
+        <div className={"col" + " " + "padding-none"}>
           <LinkToAboutUs label={"LEARN MORE ABOUT US"} />
-          
-         <div className="spacing-2xl"/>
+
+          <div className="spacing-2xl" />
         </div>
       </div>
     </div>
diff --git a/src/components/home/AboutQS/styles.module.css b/src/components/home/AboutQS/styles.module.css
index ae8e3c836..50e8015e7 100644
--- a/src/components/home/AboutQS/styles.module.css
+++ b/src/components/home/AboutQS/styles.module.css
@@ -1,28 +1,15 @@
 .about_us_container {
   margin-top: var(--ifm-spacing-2xl);
-  background-color: var(--ifm-background-color-about-qs-banner);
+  background-color: var(--ifm-color-primary-p1);
 }
 
 div .text_container {
-  color: var(--ifm-text-color-about-qs-banner);
+  color: var(--ifm-color-primary-p2);
 }
 
-@media only screen and (max-width: 996px) {
-  /* Mobile */
-  .text_container {
-    font-size: 14px;
-    text-align: center;
-    margin-bottom: var(--ifm-spacing-lg);
-    padding: var(--ifm-spacing-2xl) var(--ifm-spacing-2xl);
-  }
-}
-
-@media only screen and (min-width: 996px) {
-  /* Desktop */
-  .text_container {
-    font-size: 24px;
-    text-align: center;
-    margin-bottom: var(--ifm-spacing-lg);
-    padding: var(--ifm-spacing-5xl) var(--ifm-spacing-5xl);
-  }
+.text_container {
+  font-size: 24px;
+  text-align: center;
+  margin-bottom: var(--ifm-spacing-lg);
+  padding: var(--ifm-spacing-5xl) var(--ifm-spacing-5xl);
 }
diff --git a/src/components/home/Hero/styles.module.css b/src/components/home/Hero/styles.module.css
index 199ee5187..0bf5ac7ed 100644
--- a/src/components/home/Hero/styles.module.css
+++ b/src/components/home/Hero/styles.module.css
@@ -1,58 +1,37 @@
 @media only screen and (max-width: 996px) {
   /*Mobile*/
-  .hero_container {
-    margin: var(--ifm-spacing-xl) var(--ifm-spacing-xl) 0 var(--ifm-spacing-xl);
-  }
-
-  .h2_custom {
-    color: var(--ifm-color-secondary-s2);
-    text-align: center;
-    margin: 0;
-  }
-
   .logos_carousel {
     display: none;
   }
-
-  .subheader {
-    text-align: center;
-  }
-
-  .astronaut_container {
-    width: 150px
-  }
 }
 
-@media only screen and (min-width: 996px) {
-  /* Desktop */
-  .hero_container {
-    margin: var(--ifm-spacing-5xl) 0 var(--ifm-spacing-xl) 0;
-  }
+.hero_container {
+  margin: var(--ifm-spacing-5xl) 0 var(--ifm-spacing-xl) 0;
+}
 
-  .table_with_8_customers {
-    margin-bottom: var(--ifm-spacing-xl);
-  }
+.table_with_8_customers {
+  margin-bottom: var(--ifm-spacing-xl);
+}
 
-  .customer_logo {
-    filter: grayscale(1);
-    width: 100px;
-  }
+.customer_logo {
+  filter: grayscale(1);
+  width: 100px;
+}
 
-  .worked_with {
-    font-size: var(--ifm-font-size-normal);
-    color: var(--ifm-color_neutral-n1);
-    text-align: center;
-    margin: var(--ifm-spacing-2xl) 0;
-  }
+.worked_with {
+  font-size: var(--ifm-font-size-normal);
+  color: var(--ifm-color_neutral-n1);
+  text-align: center;
+  margin: var(--ifm-spacing-2xl) 0;
+}
 
-  .h2_custom {
-    color: var(--ifm-color-secondary-s2);
-  }
+.h2_custom {
+  color: var(--ifm-color-blue-jupyter);
+}
 
-  .sub_header {
-    text-align: left;
-  }
-  .astronaut_container {
-    width: 300px
-  }
+.sub_header {
+  text-align: left;
+}
+.astronaut_container {
+  width: 300px;
 }
diff --git a/src/components/home/LearnMore/index.tsx b/src/components/home/LearnMore/index.tsx
index 24a259310..9467dc5ae 100644
--- a/src/components/home/LearnMore/index.tsx
+++ b/src/components/home/LearnMore/index.tsx
@@ -4,7 +4,7 @@ import LinkToContact from "../LinkToContact";
 export default function LearnMore() {
   return (
     <div className={styles.learn_more_container}>
-      <h1 className={"text-centered"+" "+ "padding-none" + " " +"h1-margin-none"+ " "+ styles.learn_more_title}> WANT TO LEARN MORE?</h1>
+      <h1 className={"text--center"+" "+ "padding-none" + " " +"h1-margin-none"+ " "+ styles.learn_more_title}> WANT TO LEARN MORE?</h1>
 
       <div className={styles.learn_more_text}>
         Schedule a meeting and benefit from our expertise on Jupyter,
diff --git a/src/components/home/LearnMore/styles.module.css b/src/components/home/LearnMore/styles.module.css
index a16f482f3..7619d9aec 100644
--- a/src/components/home/LearnMore/styles.module.css
+++ b/src/components/home/LearnMore/styles.module.css
@@ -1,45 +1,24 @@
 div .learn_more_text {
-  color: var(--ifm-text-color-blue-banner);
+  color: var(--ifm-color-secondary-s2);
 }
 
 div .learn_more_title {
-  color: var(--ifm-text-color-blue-banner);
+  color: var(--ifm-color-secondary-s2);
 }
 
 .learn_more_container {
-  background-color: var(--ifm-background-color-blue-banner);
+  background-color: var(--ifm-color-secondary-s1);
   text-align: center;
-  padding: var(--ifm-spacing-2xl)
+  padding: var(--ifm-spacing-2xl);
 }
 
-
-@media only screen and (max-width: 996px) {
-  /*Mobile */
-  .learn_more_text {
-    text-align: center;
-    font-family: var(--ifm-font-family-roboto);
-    font-size: 14x;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 36px; /* 128.571% */
-    padding: var(--ifm-spacing-lg);
-    color: var(--ifm-text-color-blue-banner);
-  }
-  
-}
-
-@media only screen and (min-width: 996px) {
-  /*Desktop */
-  .learn_more_text {
-    text-align: center;
-    font-family: var(--ifm-font-family-roboto);
-    font-size: 28px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 36px; /* 128.571% */
-    padding: var(--ifm-spacing-2xl);
-    color: var(--ifm-text-color-blue-banner);
-  }
-  
-
+.learn_more_text {
+  text-align: center;
+  font-family: var(--ifm-font-family-roboto);
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 36px; /* 128.571% */
+  padding: var(--ifm-spacing-2xl);
+  color: var(--ifm-color-secondary-s2);
 }
diff --git a/src/components/home/News/styles.module.css b/src/components/home/News/styles.module.css
index cb5c9c61c..f3ff14725 100644
--- a/src/components/home/News/styles.module.css
+++ b/src/components/home/News/styles.module.css
@@ -3,23 +3,17 @@
   .news_container {
     display: none;
   }
-
 }
 
-@media only screen and (min-width: 996px) {
-  /*Desktop */
-  .news_container {
-    margin: var(--ifm-spacing-5xl) 0 var(--ifm-spacing-2xl) 0 ;
-  }
-
-  .blog_button {
-    background-color: var(--ifm-color-orange-jupyter);
-  }
+.news_container {
+  margin: var(--ifm-spacing-5xl) 0 var(--ifm-spacing-2xl) 0;
+}
 
-  .h2_custom {
-    text-align: center;
-    margin-bottom: var(--ifm-spacing-2xl)
-  }
-  
+.blog_button {
+  background-color: var(--ifm-color-orange-jupyter);
+}
 
+.h2_custom {
+  text-align: center;
+  margin-bottom: var(--ifm-spacing-2xl);
 }
diff --git a/src/components/home/ProjectsOverview/Robotics.tsx b/src/components/home/ProjectsOverview/Robotics.tsx
index 3cb39e8a5..858327ca3 100644
--- a/src/components/home/ProjectsOverview/Robotics.tsx
+++ b/src/components/home/ProjectsOverview/Robotics.tsx
@@ -8,22 +8,32 @@ export default function RoboticsProjects() {
       <div className={"row"}>
         <div
           className={
-            "col col--5 col--offset-1" +
-            " " +
-            "flex-full-centered" +
-            " " +
-            styles.col_project_overview_with_padding
+            "col col--5 col--offset-1" + " " + 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--5" + " " + 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--5" +
+            " " +
+            "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>
   );
diff --git a/src/components/home/ProjectsOverview/RoboticsReverse.tsx b/src/components/home/ProjectsOverview/RoboticsReverse.tsx
new file mode 100644
index 000000000..3cb39e8a5
--- /dev/null
+++ b/src/components/home/ProjectsOverview/RoboticsReverse.tsx
@@ -0,0 +1,30 @@
+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={"container" + " " + styles.project_container}>
+      <div className={"row"}>
+        <div
+          className={
+            "col col--5 col--offset-1" +
+            " " +
+            "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--5" + " " + 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/SupplyChain.tsx b/src/components/home/ProjectsOverview/SupplyChain.tsx
index 91da55339..301d7b40e 100644
--- a/src/components/home/ProjectsOverview/SupplyChain.tsx
+++ b/src/components/home/ProjectsOverview/SupplyChain.tsx
@@ -6,20 +6,10 @@ export default function SupplyChainProjects() {
   return (
     <div className={"container" + " " + styles.project_container}>
       <div className={"row"}>
+        
         <div
           className={
-            "col col--5 col--offset-1" +
-            " " +
-            "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--5" + " " + styles.col_project_overview_with_padding
+            "col col--5 col--offset-1" + " " + styles.col_project_overview_with_padding
           }
         >
           <h1 className="padding-none">Software supply chain </h1>
@@ -29,6 +19,17 @@ export default function SupplyChainProjects() {
           <div className="spacing-2xl"></div>
           <SupplyChainMD />
         </div>
+        <div
+          className={
+            "col col--5" +
+            " " +
+            "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>
   );
diff --git a/src/components/home/ProjectsOverview/SupplyChainReversed.tsx b/src/components/home/ProjectsOverview/SupplyChainReversed.tsx
new file mode 100644
index 000000000..91da55339
--- /dev/null
+++ b/src/components/home/ProjectsOverview/SupplyChainReversed.tsx
@@ -0,0 +1,35 @@
+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={"container" + " " + styles.project_container}>
+      <div className={"row"}>
+        <div
+          className={
+            "col col--5 col--offset-1" +
+            " " +
+            "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--5" + " " + styles.col_project_overview_with_padding
+          }
+        >
+          <h1 className="padding-none">Software supply chain </h1>
+          <h2 className={styles.h2_custom}>
+            We are the main organisation supporting the mamba package manager.
+          </h2>
+          <div className="spacing-2xl"></div>
+          <SupplyChainMD />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/home/ProjectsOverview/styles.module.css b/src/components/home/ProjectsOverview/styles.module.css
index 5ca84bee7..2fef72356 100644
--- a/src/components/home/ProjectsOverview/styles.module.css
+++ b/src/components/home/ProjectsOverview/styles.module.css
@@ -1,25 +1,11 @@
-@media only screen and (max-width: 996px) {
-  /*Mobile */
-  .row_custom {
-    flex-direction: column-reverse;
-  }
-
-  .project_desktop {
-    display: none;
-  }
+.project_desktop {
+  margin-bottom: var(--ifm-spacing-3xl);
 }
 
-@media only screen and (min-width: 996px) {
-  /*Desktop */
-  .project_desktop {
-    margin-bottom: var(--ifm-spacing-3xl);
-  }
-
-  .h2_custom {
-    color: var(--ifm-color-secondary-s2);
-  }
+.h2_custom {
+  color: var(--ifm-color-blue-jupyter);
+}
 
-  .col_project_overview_with_padding {
-    padding: var(--ifm-spacing-4xl) var(--ifm-spacing-3xl);
-  }
+.col_project_overview_with_padding {
+  padding: var(--ifm-spacing-4xl) var(--ifm-spacing-3xl);
 }
diff --git a/src/components/home/WhatWeDo/styles.module.css b/src/components/home/WhatWeDo/styles.module.css
index 8033e4cea..a12014ea2 100644
--- a/src/components/home/WhatWeDo/styles.module.css
+++ b/src/components/home/WhatWeDo/styles.module.css
@@ -1,5 +1,11 @@
-.topics_header {
+@media only screen and (max-width: 996px) {
+  /*Mobile*/
+  .header {
+    display: none;
+  }
+}
 
+.topics_header {
   font-family: var(--ifm-font-family-rubik-one);
   font-size: var(--ifm-font-size-secondary-title);
   font-style: normal;
@@ -10,71 +16,24 @@
 }
 
 div .topics_header {
-  color: var(--ifm-text-color-topics-card);
+  color: var(--ifm-color-neutral-n2);
 }
 
-.topics_text {
-  text-align: center;
-  font-family: var(--ifm-font-family-roboto);
-  font-size: 6px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 20px; /* 142.857% */
-  letter-spacing: 0.25px;
-}
-
-.topics_text p {
-  color: var(--ifm-text-color-topics-card);
+.header {
+  color: var(--ifm-text-color-on-primary-p1);
 }
-
-@media only screen and (max-width: 996px) {
-  /*Mobile*/
-  .header {
-    display: none;
-  }
-
-  .link_to_services_desktop {
-    display: none;
-  }
-
-  .topics_card {
-    padding: var(--ifm-spacing-2xl) var(--ifm-spacing-lg);
-    border: none;
-    border-radius: 0;
-    border: transparent;;
-  }
-
-  .topics_card_yellow {
-    background-color: var(--ifm-background-color-topics-card-yellow);
-    color: var(--ifm-text-color-topics-card-yellow);
-  }
-
-  .topics_card_white {
-    background-color: var(--ifm-background-color-topics-card-white);
-    color: var(--ifm-text-color-topics-card-white);
-  }
+.whatwedo_container {
+  background-color: var(--ifm-color-primary-p1);
+  padding: var(--ifm-spacing-2xl);
+  margin-top: var(--ifm-spacing-5xl);
 }
 
-@media only screen and (min-width: 996px) {
-  /* Desktop */
-
-  .header {
-    color: var(--ifm-text-color-on-primary-p1)
-  }
-  .whatwedo_container {
-    background-color: var(--ifm-color-primary-p1);
-    padding: var(--ifm-spacing-2xl);
-    margin-top: var(--ifm-spacing-5xl);
-  }
-
-
-  .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-background-color-topics-card);
-    margin-bottom: var(--ifm-spacing-2xl);
-  }
+.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-orange-light);
+  margin-bottom: var(--ifm-spacing-2xl);
 }
diff --git a/src/components/home/styles.module.css b/src/components/home/styles.module.css
index 05bed7962..9003e776a 100644
--- a/src/components/home/styles.module.css
+++ b/src/components/home/styles.module.css
@@ -1,26 +1,6 @@
-
-
-@media only screen and (max-width: 996px) {
-  /* Mobile */
-  .link_to {
-    background-color: var(--ifm-background-color-button-home);
-    color: var(--ifm-text-color-button-home);
-    width: 358px;
-    font-weight: 700;
-  }
-
-  .link_to_contact_home {
-    background-color: var(--ifm-color-primary-p2);
-    width: 358px;
-    font-weight: 700;
-  }
-}
-@media only screen and (min-width: 996px) {
-  /* Desktop */
-  .link_to {
-    background-color: var(--ifm-background-color-button-home);
-    color: var(--ifm-text-color-button-home);
-    width: 358px;
-    font-weight: 700;
-  }
+.link_to {
+  background-color: var(--ifm-color-orange-jupyter);
+  color: var(--ifm-text-color-on-primary-p1);
+  width: 358px;
+  font-weight: 700;
 }
diff --git a/src/components/projects/Header.tsx b/src/components/projects/Header.tsx
index 221c7f2a3..268459f71 100644
--- a/src/components/projects/Header.tsx
+++ b/src/components/projects/Header.tsx
@@ -3,7 +3,7 @@ import HeaderMD from "./descriptions/Header.md";
 
 export default function Header() {
     return (
-      <div className={"container" + " " + styles.header_container}>
+      <div className={"container"}>
         <div className="row">
           <div className={"col" + " " + "padding-none"}>
             <h1 className={styles.h1_custom}>Working in the open</h1>
diff --git a/src/components/projects/ProjectCard.tsx b/src/components/projects/ProjectCard.tsx
index 1a618f223..39a92fbec 100644
--- a/src/components/projects/ProjectCard.tsx
+++ b/src/components/projects/ProjectCard.tsx
@@ -4,8 +4,8 @@ export default function ProjectCard({ project }): JSX.Element {
   /*if (project.reverse === "false") {*/
     return (
       <div className={"container" + " " + styles.project_container}>
-        <div className={"row" + " " + "horizontally-centered"}>
-          <div className={"col col--6" + " " + styles.col_project_text}>
+        <div className={"row row--no-gutters" + " " + "horizontally-centered"}>
+          <div className={"col col--6 col--offset-1" + " " + styles.col_project_text}>
             <div className={styles.project_title}>{project.title}</div>
             <div className={styles.project_description}>
               <project.ProjectMD />
diff --git a/src/components/projects/index.tsx b/src/components/projects/index.tsx
index 7031d142e..3017102c1 100644
--- a/src/components/projects/index.tsx
+++ b/src/components/projects/index.tsx
@@ -6,12 +6,11 @@ import AllProjects from "./AllProjects";
 export default function Projects() {
   return (
     <div>
-      <div className={"main-container-with-margins"}>
-        <div>
-          <Header />
-          <AllProjects />
-        </div>
+      <div>
+        <Header />
+        <AllProjects />
       </div>
+
       <div>
         <div className={styles.schedule_container}>
           <ScheduleAMeeting />
diff --git a/src/components/projects/styles.module copy.css b/src/components/projects/styles.module copy.css
new file mode 100644
index 000000000..3c09ade7e
--- /dev/null
+++ b/src/components/projects/styles.module copy.css	
@@ -0,0 +1,199 @@
+.h1_custom {
+  padding: 0;
+}
+
+div .schedule_container {
+  background-color: var(--ifm-color-secondary-s1);
+}
+
+/*@media only screen and (max-width: 480px) {
+  /*Mobile */
+  .project_container {
+    padding: var(--ifm-spacing-sm) var(--ifm-spacing-lg);
+    margin-bottom: var(--ifm-spacing-xs);
+    width: 200px;
+    height: 100px;
+    background-color: var(--ifm-color-orange-light);
+  }
+
+  .header_text {
+    font-family: var(--ifm-font-family-roboto);
+    color: var(--ifm-color-primary-p2);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px; 
+    letter-spacing: 0.25px;
+    text-align: center;
+    padding: 0 var(--ifm-spacing-lg);
+  }
+
+  .project_title_small {
+    margin-top: var(--ifm-spacing-md);
+    color: var(--ifm-color-neutral-n1);
+    font-family: var(--ifm-font-family-roboto);
+    font-size: var(--ifm-font-size-normal);
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px; 
+    letter-spacing: 0.5px;
+    width: 150px;
+    text-align: center;
+  }
+
+  .header_container {
+    padding: var(--ifm-spacing-lg) 0;
+    background-color: var(--ifm-color-primary-p1);
+  }
+
+  .ul.row.row_all_projects {
+    padding-left: 0;
+  }
+
+  .schedule_container {
+    padding: var(--ifm-spacing-2xl) var(--ifm-spacing-3xl);
+  }
+
+  .schedule_text {
+    font-family: var(--ifm-font-family-roboto);
+    color: var(--ifm-color-secondary-s2);
+    font-size: 14px;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px; 
+    letter-spacing: 0.1px;
+    text-align: center;
+    margin-bottom: var(--ifm-spacing-2xl);
+  }
+
+  .project_image_container {
+    padding: var(--ifm-spacing-xl) 0;
+    text-align: center;
+  }
+
+  .project_title_popup {
+    padding: 8px 32px 8px 20px;
+    text-align: left;
+    color: var(--ifm-text-color);
+    font-family: var(--ifm-font-family-bebas-neue);
+    font-size: 24px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 150%; 
+    letter-spacing: 1.056px;
+    height: 52px;
+  }
+
+  .project_description_container {
+    padding: var(--ifm-spacing-xl) var(--ifm-spacing-3xl);
+  }
+/*}
+
+/*@media only screen and (min-width: 996px) {
+  /*Desktop */
+  .project_container {
+    margin-bottom: var(--ifm-spacing-lg);
+    margin-left: 0;
+    padding: 0;
+    /*background-color: var(--ifm-color-orange-light);*/
+    /*border-radius: 10px;
+    box-shadow: 0px 0px 8px 1px #d0cb54;*/
+  }
+
+  .project_title {
+    margin-bottom: var(--ifm-spacing-md);
+    font-family: var(--ifm-font-family-bebas-neue);
+    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);
+  }
+
+  .project_description {
+    /*padding: var(--ifm-spacing-md) var(--ifm-spacing-xl);*/
+    text-align: center;
+  }
+
+  .project_description p {
+    color: var(--ifm-color-primary-p2);
+  }
+
+  /*.row_project {
+    background-color: var(--ifm-color-orange-light);
+    border-radius: 10px;
+    box-shadow: 0px 0px 8px 1px #d0cb54;
+    width: 1200px;
+  }*/
+
+  .col_project_text {
+    background-color: var(--ifm-color-orange-light);
+    padding: var(--ifm-spacing-4xl) var(--ifm-spacing-3xl);
+    border-radius: 10px;
+    /*box-shadow: 0px 0px 8px 1px #d0cb54;*/
+  }
+
+  .col_project_picture_left {
+    margin-right: var(--ifm-spacing-lg);
+    border-radius: 10px;
+  }
+
+  .col_project_picture_right {
+    margin-left: var(--ifm-spacing-lg);
+    border-radius: 10px;
+  }
+
+  .col_schedule {
+    padding: var(--ifm-spacing-2xl) var(--ifm-spacing-2xl);
+    margin: 0;
+    max-width: none;
+  }
+
+  .header_text {
+    font-family: var(--ifm-font-family-roboto);
+    color: var(--ifm-color-primary-p2);
+    font-size: 22px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 28px; /* 142.857% */
+    text-align: center;
+    margin-bottom: var(--ifm-spacing-6xl);
+  }
+
+  .header_container {
+    margin-top: var(--ifm-spacing-6xl);
+    padding: 0;
+  }
+
+  .schedule_text {
+    font-family: var(--ifm-font-family-bebas-neue);
+    font-size: var(--ifm-font-size-secondary-title);
+    font-style: normal;
+    font-weight: 800;
+    line-height: 150%;
+    text-align: center;
+    margin-bottom: var(--ifm-spacing-2xl);
+  }
+
+  div .schedule_text {
+    color: var(--ifm-color-secondary-s2);
+  }
+
+  .link_to_button_custom {
+    margin: var(--ifm-spacing-lg) 0;
+  }
+
+  .schedule_a_meeting_container {
+    margin-top: var(--ifm-spacing-7xl);
+  }
+
+  .all_projects_desktop_container {
+    margin-left: var(--ifm-spacing-6xl);
+    margin-right: var(--ifm-spacing-6xl);
+  }
+/*}
diff --git a/src/components/projects/styles.module.css b/src/components/projects/styles.module.css
index 0dfbc4fea..677fb667c 100644
--- a/src/components/projects/styles.module.css
+++ b/src/components/projects/styles.module.css
@@ -1,200 +1,102 @@
 .h1_custom {
-  padding: 0;
+  padding-left: var(--ifm-spacing-4xl);
+  margin-top: var(--ifm-spacing-6xl);
 }
 
 div .schedule_container {
-  background-color: var(--ifm-background-color-blue-banner);
-}
-
-/*@media only screen and (max-width: 996px) {
-  /*Mobile */
-  /*.project_container {
-    padding: var(--ifm-spacing-sm) var(--ifm-spacing-lg);
-    margin-bottom: var(--ifm-spacing-xs);
-    width: 200px;
-    height: 100px;
-    background-color: var(--ifm-background-color-project-card);
-  }
-
-  .header_text {
-    font-family: var(--ifm-font-family-roboto);
-    color: var(--ifm-text-color-project-card);
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 20px; 
-    letter-spacing: 0.25px;
-    text-align: center;
-    padding: 0 var(--ifm-spacing-lg);
-  }
-
-  .project_title_small {
-    margin-top: var(--ifm-spacing-md);
-    color: var(--ifm-color-neutral-n1);
-    font-family: var(--ifm-font-family-roboto);
-    font-size: var(--ifm-font-size-normal);
-    font-style: normal;
-    font-weight: 400;
-    line-height: 24px; 
-    letter-spacing: 0.5px;
-    width: 150px;
-    text-align: center;
-  }
-
-  .header_container {
-    padding: var(--ifm-spacing-lg) 0;
-    background-color: var(--ifm-color-primary-p1);
-  }
-
-  .ul.row.row_all_projects {
-    padding-left: 0;
-  }
-
-  .schedule_container {
-    padding: var(--ifm-spacing-2xl) var(--ifm-spacing-3xl);
-  }
-
-  .schedule_text {
-    font-family: var(--ifm-font-family-roboto);
-    color: var(--ifm-text-color-blue-banner);
-    font-size: 14px;
-    font-family: Roboto;
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 20px; 
-    letter-spacing: 0.1px;
-    text-align: center;
-    margin-bottom: var(--ifm-spacing-2xl);
-  }
-
-  .project_image_container {
-    padding: var(--ifm-spacing-xl) 0;
-    text-align: center;
-  }
-
-  .project_title_popup {
-    padding: 8px 32px 8px 20px;
-    text-align: left;
-    color: var(--ifm-text-color);
-    font-family: var(--ifm-font-family-bebas-neue);
-    font-size: 24px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 150%; 
-    letter-spacing: 1.056px;
-    height: 52px;
-  }
-
-  .project_description_container {
-    padding: var(--ifm-spacing-xl) var(--ifm-spacing-3xl);
-  }
-}*/
-
-/*@media only screen and (min-width: 996px) {
-  /*Desktop */
-  .project_container {
-    margin-bottom: var(--ifm-spacing-lg);
-    margin-left: 0;
-    padding: 0;
-    /*background-color: var(--ifm-background-color-project-card);*/
-    /*border-radius: 10px;
-    box-shadow: 0px 0px 8px 1px #d0cb54;*/
-  }
-
-  .project_title {
-    margin-bottom: var(--ifm-spacing-md);
-    font-family: var(--ifm-font-family-bebas-neue);
-    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-text-color-project-card);
-  }
-
-  .project_description {
-    /*padding: var(--ifm-spacing-md) var(--ifm-spacing-xl);*/
-    text-align: center;
-  }
-
-  .project_description p {
-    color: var(--ifm-text-color-project-card);
-  }
-
-  /*.row_project {
-    background-color: var(--ifm-background-color-project-card);
+  background-color: var(--ifm-color-secondary-s1);
+}
+
+.project_container {
+  margin-bottom: var(--ifm-spacing-lg);
+  margin-left: 0;
+  padding: 0;
+}
+
+.project_title {
+  margin-bottom: var(--ifm-spacing-md);
+  font-family: var(--ifm-font-family-bebas-neue);
+  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: center;
+}
+
+.project_description p {
+  color: var(--ifm-color-primary-p2);
+}
+
+/*.row_project {
+    background-color: var(--ifm-color-orange-light);
     border-radius: 10px;
     box-shadow: 0px 0px 8px 1px #d0cb54;
     width: 1200px;
   }*/
 
-  .col_project_text {
-    background-color: var(--ifm-background-color-project-card);
-    padding: var(--ifm-spacing-4xl) var(--ifm-spacing-3xl);
-    border-radius: 10px;
-    /*box-shadow: 0px 0px 8px 1px #d0cb54;*/
-  }
+.col_project_text {
+  background-color: var(--ifm-color-orange-light);
+  padding: var(--ifm-spacing-4xl) var(--ifm-spacing-3xl);
+  border-radius: 10px;
+  /*box-shadow: 0px 0px 8px 1px #d0cb54;*/
+}
 
-  .col_project_picture_left {
-    margin-right: var(--ifm-spacing-lg);
-    border-radius: 10px;
-  }
+.col_project_picture_left {
+  margin: none;
+  border-radius: 10px;
+}
 
-  .col_project_picture_right {
-    margin-left: var(--ifm-spacing-lg);
-    border-radius: 10px;
-  }
-
-  .col_schedule {
-    padding: var(--ifm-spacing-2xl) var(--ifm-spacing-2xl);
-    margin: 0;
-    max-width: none;
-  }
-
-  .header_text {
-    font-family: var(--ifm-font-family-roboto);
-    color: var(--ifm-text-color-project-card);
-    font-size: 22px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 28px; /* 142.857% */
-    text-align: center;
-    margin-bottom: var(--ifm-spacing-6xl);
-  }
-
-  .header_container {
-    margin-top: var(--ifm-spacing-6xl);
-    padding: 0;
-  }
-
-  .schedule_text {
-    font-family: var(--ifm-font-family-bebas-neue);
-    font-size: var(--ifm-font-size-secondary-title);
-    font-style: normal;
-    font-weight: 800;
-    line-height: 150%;
-    text-align: center;
-    margin-bottom: var(--ifm-spacing-2xl);
-  }
-
-  div .schedule_text {
-    color: var(--ifm-text-color-blue-banner);
-  }
-
-  .link_to_button_custom {
-    margin: var(--ifm-spacing-lg) 0;
-  }
-
-  .schedule_a_meeting_container {
-    margin-top: var(--ifm-spacing-7xl);
-  }
-
-  .all_projects_desktop_container {
-    margin-left: var(--ifm-spacing-6xl);
-    margin-right: var(--ifm-spacing-6xl);
-  }
-/*}*/
+.col_project_picture_right {
+  border-radius: 10px;
+}
+
+.col_schedule {
+  padding: var(--ifm-spacing-2xl) var(--ifm-spacing-2xl);
+  margin: 0;
+  max-width: none;
+}
+
+.header_text {
+  font-family: var(--ifm-font-family-roboto);
+  color: var(--ifm-color-primary-p2);
+  font-size: 22px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 28px; /* 142.857% */
+  text-align: center;
+  margin-bottom: var(--ifm-spacing-6xl);
+  padding: var(--ifm-spacing-lg) var(--ifm-spacing-4xl)
+}
+
+
+.schedule_text {
+  font-family: var(--ifm-font-family-bebas-neue);
+  font-size: var(--ifm-font-size-secondary-title);
+  font-style: normal;
+  font-weight: 800;
+  line-height: 150%;
+  text-align: center;
+  margin-bottom: var(--ifm-spacing-2xl);
+}
+
+div .schedule_text {
+  color: var(--ifm-color-secondary-s2);
+}
+
+.link_to_button_custom {
+  margin: var(--ifm-spacing-lg) 0;
+}
+
+.schedule_a_meeting_container {
+  margin-top: var(--ifm-spacing-7xl);
+}
diff --git a/src/components/services/styles.module.css b/src/components/services/styles.module.css
index 310fea811..be06f4a4b 100644
--- a/src/components/services/styles.module.css
+++ b/src/components/services/styles.module.css
@@ -1,46 +1,4 @@
-@media only screen and (max-width: 996px) {
-  /*Mobile */
-  .services_header_text {
-    padding: var(--ifm-spacing-xl) var(--ifm-spacing-2xl);
-  }
-
-  .services_title {
-    margin-top: var(--ifm-spacing-xl);
-  }
 
-  .services_description {
-    padding: 0 var(--ifm-spacing-2xl);
-  }
-
-  .transition {
-    font-family: var(--ifm-font-family-bebas-neue);
-    font-size: 24px;
-    font-style: normal;
-    font-weight: bolder;
-    line-height: 150%;
-    letter-spacing: 1.056px;
-    color: var(--ifm-color-indigo-i1);
-    text-align: center;
-    padding: var(--ifm-spacing-xl) var(--ifm-spacing-2xl);
-  }
-
-  .sign_a_support_container {
-    font-family: var(--ifm-font-family-roboto);
-    font-size: 14px;
-    text-align: center;
-    background-color: var(--ifm-background-color-blue-banner);
-    color: var(--ifm-text-color-blue-banner);
-    padding: var(--ifm-spacing-2xl) var(--ifm-spacing-2xl);
-  }
-
-  .sign_a_support_text {
-    margin-bottom: var(--ifm-spacing-2xl);
-    color: var(---ifm-text-color-blue-banner);
-  }
-}
-
-@media only screen and (min-width: 996px) {
-  /*Desktop */
   .service_container {
     margin-top: var(--ifm-spacing-6xl);
   }
@@ -50,13 +8,13 @@
     font-size: var(--ifm-font-size-secondary-title);
     font-weight: 800;
 
-    color: var(--ifm-color-secondary-s3);
+    color: var(--ifm-color-secondary-s2);
     padding: var(--ifm-spacing-2xl) 0;
     margin-top: var(--ifm-spacing-7xl);
   }
 
   div .sign_a_support_container {
-    background-color: var(--ifm-background-color-blue-banner);
+    background-color: var(--ifm-color-secondary-s1);
   }
 
   .sign_a_support_text {
@@ -64,7 +22,7 @@
   }
 
   div .sign_a_support_text {
-    color: var(--ifm-text-color-blue-banner);
+    color: var(--ifm-color-secondary-s2);
   }
 
   .h2_custom {
@@ -79,6 +37,5 @@
     line-height: 150%;
     text-align: center;
     margin-top: var(--ifm-spacing-4xl);
-    color: var(--ifm-text-color-services-transition);
+    color: var(--ifm-color-indigo-i1);
   }
-}
diff --git a/src/css/custom.css b/src/css/custom.css
index c718fd0a4..78020ec6b 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -11,58 +11,27 @@
   --ifm-color-grey-condaforge: #7a7865;
   --ifm-color-orange-light: #fef9ec;
   --ifm-color-indigo-i1: rgb(79, 82, 255);
-  --ifm-color-blue-b1: #b8c3ffff;
   --ifm-color-primary-p1: #f6f195;
   --ifm-color-primary-p2: #1c1c16;
-  --ifm-color-primary-p3: #1e1c00;
   --ifm-text-color-on-primary-p1: #1e1c00;
 
   --ifm-color-secondary-s1: #a0c9ff;
-  /*--ifm-color-secondary-s2: #1861a1;*/
-  --ifm-color-secondary-s2: var(--ifm-color-blue-jupyter);
-  --ifm-color-secondary-s3: #002646;
+  --ifm-color-secondary-s2: #002646;
 
   --ifm-color-neutral-n1: #605e58;
   --ifm-color-neutral-n2: #371300;
 
   --ifm-text-color: var(--ifm-color-primary-p2);
-  --ifm-text-color-main-title: var(--ifm-color-primary-p2);
-  --ifm-background-color-value-card-yellow:var(--ifm-color-primary-p1);
   --ifm-background-color: white;
-  --ifm-background-color-value-card-white: white;
-  --ifm-text-color-value-card-white: var(--ifm-color-primary-p2);
-  --ifm-background-color-topics-card: #fef9ec;
-  --ifm-text-color-topics-card: var(--ifm-color-neutral-n2);
-  --ifm-background-color-topics-card-yellow: var(--ifm-color-primary-p1);
-  --ifm-text-color-topics-card-yellow: var(--ifm-color-neutral-n2);
-  --ifm-background-color-topics-card-white: white;
-  --ifm-text-color-topics-card-white: var(--ifm-color-neutral-n2);
-  --ifm-background-color-small-portrait-card: white;
-  --ifm-text-color-small-portrait-card: var(--ifm-color-primary-p2);
-  --ifm-background-color-large-portrait-card: white;
-  --ifm-text-color-large-portrait-card: var(--ifm-color-primary-p2);
-  --ifm-background-color-project-card: var(--ifm-color-orange-light);
-  --ifm-text-color-project-card: var(--ifm-color-primary-p2);
-  --ifm-color-text-on-primary-p1: var(--ifm-color-primary-p2);
-  --ifm-text-color-services-transition: var(--ifm-color-indigo-i1);
-  --ifm-background-color-blue-banner:var(--ifm-color-secondary-s1);
-  --ifm-text-color-blue-banner: var(--ifm-color-secondary-s3);
-  --ifm-background-color-about-qs-banner: var(--ifm-color-primary-p1);
-  --ifm-text-color-about-qs-banner: var(--ifm-color-primary-p2);
 
   /* footer */
   --ifm-background-color-footer: var(--ifm-color-primary-p1);
   --ifm-text-color-footer: black;
 
-  /* buttons */
-  --ifm-background-color-button-home: var(--ifm-color-orange-jupyter);
-  --ifm-text-color-button-home: var( --ifm-color-primary-p3);
-  --ifm-background-color-button-blue-banner: var(--ifm-color-secondary-s3);
-  --ifm-text-color-button-blue-banner: white;
-  --ifm-color-blue-contact-send-button: var(--ifm-color-blue-jupyter);
+  /*popup overlay*/
   --ifm-background-color-popup-overlay: grey;
 
-/* Font sizes */
+  /* Font sizes */
   --ifm-font-size-small: 14px;
   --ifm-font-size-normal: 18px;
   --ifm-font-size-medium: 24px;
@@ -115,158 +84,49 @@
   flex-direction: column-reverse;
 }
 
-.text-centered {
-  text-align: center;
+ul {
+  padding-left: 0;
 }
 
-.text-left-aligned {
-  text-align: start;
+.main-container-with-margins {
+  margin-left: 96px;
+  margin-right: 96px;
+  display: flex;
+  justify-content: center;
 }
 
-.text-left-aligned-padding-none {
+h1 {
+  color: var(--ifm-color-primary-p2);
+  font-family: var(--ifm-font-family-bebas-neue);
+  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: 0;
-}
-
-.text-centered-padding-none {
-  text-align: center;
-  padding: 0;
+  padding: 8px 36px 8px 20px;
 }
 
-ul {
-  padding-left: 0;
+h2 {
+  font-family: var(--ifm-font-family-bebas-neue);
+  font-size: var(--ifm-font-size-secondary-title);
+  font-style: normal;
+  font-weight: bolder;
+  line-height: 150%;
+  text-align: start;
 }
 
-@media only screen and (max-width: 996px) {
-  /*Mobile */
-  .main-container-with-margins {
-    margin: 0;
-    display: flex;
-    justify-content: center;
-  }
-
-  h1 {
-    color: var(--ifm-text-color-main-title);
-    font-family: var(--ifm-font-family-bebas-neue);
-    font-size: 24px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 150%; /* 36px */
-    letter-spacing: 1.056px;
-    text-align: center;
-    padding: 0;
-  }
-
-  h2 {
-    color: var(--ifm-text-color-main-title);
-    font-family: var(--ifm-font-family-bebas-neue);
-    font-size: 24px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 150%; /* 36px */
-    letter-spacing: 1.056px;
-    text-align: center;
-    padding: 0;
-  }
-
-  h3 {
-    font-family: var(--ifm-font-family-bebas-neue);
-    font-size: 24px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 150%; /* 36px */
-    letter-spacing: 1.056px;
-    text-align: center;
-  }
-
-  p {
-    font-family: var(--ifm-font-family-roboto);
-    font-size: 14px;
-    /* color: var(--ifm-color-primary-p3);*/
-    font-style: normal;
-    line-height: 150%;
-    line-height: 20px; /* 142.857% */
-    letter-spacing: 0.25px;
-    text-align: justify;
-  }
-
-  li {
-    font-size: 14px;
-  }
-  .header-page-mobile {
-    height: 64px;
-  }
+p {
+  font-family: var(--ifm-font-family-roboto);
+  font-size: var(--ifm-font-size-normal);
+  font-style: normal;
+  letter-spacing: 0.25px;
+  text-align: justify;
 }
 
-@media only screen and (min-width: 996px) {
-  /*Desktop */
-  .main-container-with-margins {
-    margin-left: 96px;
-    margin-right: 96px;
-    display: flex;
-    justify-content: center;
-  }
-
-  .main-container-with-larger-margins {
-    margin-left: 288px;
-    margin-right: 288px;
-    display: flex;
-    justify-content: center;
-  }
-
-  h1 {
-    color: var(--ifm-text-color-main-title);
-    font-family: var(--ifm-font-family-bebas-neue);
-    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;
-  }
-
-  h2 {
-    font-family: var(--ifm-font-family-bebas-neue);
-    font-size: var(--ifm-font-size-secondary-title);
-    font-style: normal;
-    font-weight: bolder;
-    line-height: 150%;
-    text-align: start;
-  }
-
-  p {
-    font-family: var(--ifm-font-family-roboto);
-    font-size: var(--ifm-font-size-normal);
-    /* color: var(--ifm-color-primary-p3);*/
-    font-style: normal;
-    line-height: 150%;
-    line-height: 20px; /* 142.857% */
-    letter-spacing: 0.25px;
-    text-align: justify;
-  }
-
-  .container {
-    max-width: none;
-    padding: 0;
-  }
-
-  p {
-    font-family: var(--ifm-font-family-roboto);
-    font-size: var(--ifm-font-size-normal);
-    /*color: var(--ifm-color-primary-p3);*/
-    font-style: normal;
-    line-height: 150%;
-    text-align: justify;
-  }
-
-  /*div {
-    color: black;
-  }*/
-
-  /* [data-theme="dark"] div {
-    color: #fff;
-  }*/
+.container {
+  max-width: none;
+  padding: 0;
 }
 
 @media (min-width: 1440px) {
@@ -275,21 +135,16 @@ ul {
   }
 }
 
-@media (min-width: 2200px) {
+@media (min-width: 1880px) {
   .row {
     max-width: none;
   }
-
-  /* .row .row-project {
-    width: 1624px;
-  }*/
 }
 
-.main-container-with-larger-margins {
-  margin-left: 288px;
-  margin-right: 288px;
-  display: flex;
-  justify-content: center;
+@media (max-width: 996px) {
+  .main-container-with-margins {
+    margin: 0;
+  }
 }
 
 .social-media-links {
@@ -358,8 +213,8 @@ ul {
   height: 56px;
   font-family: var(--ifm-font-family-roboto);
   border-radius: 35px;
-  background: var(--ifm-background-color-button-blue-banner);
-  color: var(--ifm-text-color-button-blue-banner);
+  background: var(--ifm-color-secondary-s2);
+  color: white;
   font-size: 16px;
   font-style: normal;
   font-weight: 600;
@@ -379,9 +234,6 @@ ul {
   margin-top: var(--ifm-spacing-2xl);
 }
 
-.footer {
-  color: red;
-}
 .quantstack-address {
   color: var(--ifm-text-color-footer);
 }