diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index 793d7725b..3e7c43bc5 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -202,7 +202,7 @@ const config: Config = {
             {
               html: `
               
-               <div class="quantstack-address">
+               <div class="div .quantstack-address">
                       16, avenue Curti <br/>
                       94100 Saint-Maur-des-Fossés <br/>
                       France
diff --git a/src/components/about/styles.module.css b/src/components/about/styles.module.css
index 9b1a14ea2..5e657abfe 100644
--- a/src/components/about/styles.module.css
+++ b/src/components/about/styles.module.css
@@ -240,7 +240,7 @@
   }
 
   .four_values_container {
-    margin: var(--ifm-spacing-5xl) 0;
+    margin-bottom: var(--ifm-spacing-5xl);
   }
 
   .join_the_team_container {
diff --git a/src/components/blog/BlogpostCard.tsx b/src/components/blog/BlogpostCard.tsx
index 2e369743b..f21661e24 100644
--- a/src/components/blog/BlogpostCard.tsx
+++ b/src/components/blog/BlogpostCard.tsx
@@ -11,7 +11,7 @@ export default function BlogpostCard({ blogpost, timeIndex }) {
       className={"card " + styles.blogpost_card}
       style={{ marginBottom: "var(--ifm-spacing-lg)" }}
     >
-      <div className={styles.blog_time_index}>{timeIndex}</div>
+   
       <Link href={blogpost.url}>
         <div className="container">
           <div
diff --git a/src/components/blog/styles.module.css b/src/components/blog/styles.module.css
index 0acb856b5..869255f4b 100644
--- a/src/components/blog/styles.module.css
+++ b/src/components/blog/styles.module.css
@@ -8,20 +8,29 @@
   border-radius: 8px;
   box-shadow: 4px 4px 18px -1px #dee0fc;
   padding: var(--ifm-spacing-xl);
-  background:var(--ifm-background-color-card);
+  background: var(--ifm-background-color-card);
 }
 
 .blogpost_card:hover {
   border: 1px solid #cbc7b1;
 }
 
-.blog_time_index {
-  font-size: 10px;
-  font-family: var(--ifm-font-family-roboto);
+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 {
-  color: var(---ifm-text-color);
   font-family: var(--ifm-font-family-roboto);
   font-size: 14px;
   font-style: normal;
@@ -31,6 +40,7 @@
   text-align: justify;
   margin-bottom: var(--ifm-spacing-sm);
   height: 140px;
+  color: var(--ifm-text-color-card);
 }
 
 .blogpost_header {
@@ -43,6 +53,7 @@
   letter-spacing: -0.198px;
   height: 48px;
   margin: var(--ifm-spacing-xl) 0;
+  color: var(--ifm-text-color-card);
 }
 
 .blogpost_date {
@@ -54,6 +65,7 @@
   line-height: 16px;
   letter-spacing: -0.132px;
   text-align: left;
+  color: var(--ifm-text-color-card);
 }
 
 .blogpost_authors {
@@ -63,6 +75,7 @@
   font-weight: 400;
   line-height: 16px;
   text-align: left;
+  color: var(--ifm-text-color-card);
 }
 
 .search_input {
@@ -84,6 +97,6 @@
 @media only screen and (min-width: 996px) {
   /*Desktop */
   .blogposts_container {
-   margin: var(--ifm-spacing-6xl) 0;
+    margin: var(--ifm-spacing-6xl) 0;
   }
 }
diff --git a/src/components/careers/Header.tsx b/src/components/careers/Header.tsx
index cdc44affd..375f806d1 100644
--- a/src/components/careers/Header.tsx
+++ b/src/components/careers/Header.tsx
@@ -5,7 +5,7 @@ export default function Header() {
     return (
       <div className={styles.careers_header}>
         <h1 className="text-centered">Join the QuantStack team!</h1>
-        <div className={styles.group_photo_container}>
+        <div className={styles.group_photo_container + " " + "flex-full-centered"}>
           <img src={GroupPhotoJupyterConUrl} />
         </div>
       </div>
diff --git a/src/components/careers/Interviews.tsx b/src/components/careers/Interviews.tsx
index 156ed51e8..85ff5692e 100644
--- a/src/components/careers/Interviews.tsx
+++ b/src/components/careers/Interviews.tsx
@@ -6,7 +6,7 @@ export default function Interviews({ details, description }) {
     <div className={styles.subteam_component}>
       <h2 className={styles.h2_custom}>{description}</h2>
       <div className="container">
-        <ul className="row">
+        <ul className={"row" + " "+ "flex-full-centered"}>
           {details.map((person, index) => (
             <li className="cards-list" key={index}>
               <div className="col col--2">
diff --git a/src/components/careers/styles.module.css b/src/components/careers/styles.module.css
index ec58bb751..c37fbf92e 100644
--- a/src/components/careers/styles.module.css
+++ b/src/components/careers/styles.module.css
@@ -104,8 +104,8 @@ div .learn_more_WTJ {
   }
 
   .interview_card {
-    width: 300px;
-    height: 340px;
+    width: 280px;
+    height: 300px;
     background-color: var(--ifm-background-color);
     border-radius: 10px;
     box-shadow: 0px 0px 8px 1px #c8c8c7;
diff --git a/src/components/projects/desktop/AllProjectsDesktop.tsx b/src/components/projects/desktop/AllProjectsDesktop.tsx
index 2146c93e2..3e7d7ceb3 100644
--- a/src/components/projects/desktop/AllProjectsDesktop.tsx
+++ b/src/components/projects/desktop/AllProjectsDesktop.tsx
@@ -15,7 +15,7 @@ const ProjectsDescriptions = [
 
 export function AllProjectsDeskTop() {
   return (
-    <div className="container">
+    <div className={"container"}>
       <ul className={"row"}>
         {projectsDetails.map((project, index) => (
           <li className="cards-list" key={index}>
diff --git a/src/components/projects/desktop/ProjectDesktop.tsx b/src/components/projects/desktop/ProjectDesktop.tsx
index e84ccef0c..9cb8e6438 100644
--- a/src/components/projects/desktop/ProjectDesktop.tsx
+++ b/src/components/projects/desktop/ProjectDesktop.tsx
@@ -7,10 +7,10 @@ export default function ProjectDesktop({
   if (project.reverse === "false") {
     return (
       <div className={"container" + " " + styles.project_container}>
-        <div className={"row" + " " + "padding-none" + " " + "margin-none"+" "+ styles.row_project}>
+        <div className={"row"}>
           <div
             className={
-              "col col--6" + " " + styles.col_project_text
+              "col col--6 col--offset-1" + " " + styles.col_project_text
             }
           >
             <div className={styles.project_title}>{project.title}</div>
@@ -20,7 +20,7 @@ export default function ProjectDesktop({
           </div>
           <div
             className={
-              "col col--5" +
+              "col col--4" +
               " " +
               "flex-full-centered" +
               " " +
@@ -43,17 +43,19 @@ export default function ProjectDesktop({
   } else if (project.reverse === "true") {
     return (
       <div className={"container" + " " + styles.project_container}>
-        <div className={"row" + " " + "padding-none" + " " + "margin-none" + " "+ styles.row_project}>
+          <div className={"row"}>
           <div
             className={
-              "col col--5" +
+              "col col--4" +
               " " +
-             "flex-full-centered" + " "+ "padding-none"+
+              "flex-full-centered" +
+              " " +
+              "padding-none" +
               " " +
               styles.col_project_picture_left
             }
             /*style={{ border: project.pictureBorderDesktop }}*/
-            style={{border: "Opx"}}
+            style={{ border: "0px" }}
           >
             <div className={styles.project_picture}>
               <img
@@ -64,7 +66,7 @@ export default function ProjectDesktop({
             </div>
           </div>
 
-          <div className={"col col--6" + " " + styles.col_project_text}>
+          <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}>
               <ProjectDescriptionMD />
diff --git a/src/components/projects/index.tsx b/src/components/projects/index.tsx
index c00d42a45..df6bb4487 100644
--- a/src/components/projects/index.tsx
+++ b/src/components/projects/index.tsx
@@ -21,7 +21,7 @@ export default function Projects() {
 
   return (
     <div>
-      <div className="main-container-with-margins">
+      <div className={"main-container-with-larger-margins"}>
         <div>
           <HeaderComponent />
 
diff --git a/src/components/projects/mobile/AllProjectsMobile.tsx b/src/components/projects/mobile/AllProjectsMobile.tsx
index 0ee67c055..625292370 100644
--- a/src/components/projects/mobile/AllProjectsMobile.tsx
+++ b/src/components/projects/mobile/AllProjectsMobile.tsx
@@ -7,8 +7,8 @@ export default function AllProjectsMobile () {
   return (
     <div>
       <div className="main-container-with-margins">
-        <div className="container">
-          <ul className={"row"}>
+        <div className={"container"}>
+          <ul className={"row" + " " + "flex-full-centered"}>
             {projectsDetails.map((project, index) => (
               <li className="cards-list" key={index}>
                 <div className="col">
diff --git a/src/components/projects/styles.module.css b/src/components/projects/styles.module.css
index 483e722d6..1ee89f542 100644
--- a/src/components/projects/styles.module.css
+++ b/src/components/projects/styles.module.css
@@ -11,14 +11,14 @@ div .schedule_container {
   .project_container {
     padding: var(--ifm-spacing-sm) var(--ifm-spacing-lg);
     margin-bottom: var(--ifm-spacing-xs);
-    width: 100px;
+    width: 200px;
     height: 100px;
-    background-color: var(--ifm-color-orange-light);
+    background-color: var(--ifm-background-color-project-card);
   }
 
   .header_text {
     font-family: var(--ifm-font-family-roboto);
-    color: var(--ifm-color-neutral-n2);
+    color: var(--ifm-text-color-project-card);
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
@@ -56,7 +56,7 @@ div .schedule_container {
 
   .schedule_text {
     font-family: var(--ifm-font-family-roboto);
-    color: var(--ifm-color-secondary-s3);
+    color: var(--ifm-text-color-blue-banner);
     font-size: 14px;
     font-family: Roboto;
     font-size: 14px;
@@ -85,6 +85,10 @@ div .schedule_container {
     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) {
@@ -93,6 +97,9 @@ div .schedule_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 {
@@ -119,11 +126,12 @@ div .schedule_container {
     color: var(--ifm-text-color-project-card);
   }
 
-  .row_project {
+  /*.row_project {
     background-color: var(--ifm-background-color-project-card);
     border-radius: 10px;
     box-shadow: 0px 0px 8px 1px #d0cb54;
-  }
+    width: 1200px;
+  }*/
 
   .col_project_text {
     background-color: var(--ifm-background-color-project-card);
@@ -134,8 +142,7 @@ div .schedule_container {
 
   .col_project_picture_left {
     margin-right: var(--ifm-spacing-lg);
-    /*border-radius: 10px;*/
-    /*border: solid 2px;*/
+    border-radius: 10px;
   }
 
   .col_project_picture_right {
@@ -151,7 +158,7 @@ div .schedule_container {
 
   .header_text {
     font-family: var(--ifm-font-family-roboto);
-    color: var(--ifm-color-neutral-n1);
+    color: var(--ifm-text-color-project-card);
     font-size: 22px;
     font-style: normal;
     font-weight: 400;
@@ -178,7 +185,7 @@ div .schedule_container {
   div .schedule_text {
     color: var(--ifm-text-color-blue-banner);
   }
-  
+
   .link_to_button_custom {
     margin: var(--ifm-spacing-lg) 0;
   }
@@ -186,4 +193,9 @@ div .schedule_container {
   .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/services/SpecialProjects.tsx b/src/components/services/SpecialProjects.tsx
index ceaa0b3e4..a28a63a7b 100644
--- a/src/components/services/SpecialProjects.tsx
+++ b/src/components/services/SpecialProjects.tsx
@@ -18,17 +18,18 @@ export function SpecialProjectsIllustration() {
   );
 }
 
-
 export function SpecialProjectsDesktop() {
   return (
-    <div className={"container" + " " + styles.service_container}>
-      <div className="row row--no-gutters">
-        <div className="col col--4 col--offset-1">
-          <h2>Special projects</h2>
-          <SpecialProjectsMD />
-        </div>
-        <div className="col col--5 col--offset-1">
-         <SpecialProjectsIllustration/>
+    <div className="main-container-with-margins">
+      <div className={"container" + " " + styles.service_container}>
+        <div className="row">
+          <div className="col col--4 col--offset-2">
+            <h2>Special projects</h2>
+            <SpecialProjectsMD />
+          </div>
+          <div className="col col--5">
+            <SpecialProjectsIllustration />
+          </div>
         </div>
       </div>
     </div>
@@ -42,7 +43,6 @@ export function SpecialProjectsMobile() {
         <div className="col">
           <div className="flex-full-centered">
             <SpecialProjectsIllustration />
-           
           </div>
         </div>
       </div>
diff --git a/src/components/services/Support.tsx b/src/components/services/Support.tsx
index ccd227d3a..0990ff283 100644
--- a/src/components/services/Support.tsx
+++ b/src/components/services/Support.tsx
@@ -9,7 +9,7 @@ const breakpointValue: number = 996;
 export function SupportIllustration() {
   return (
     <ThemedImage
-      alt="Astronaut logo of QuantStack"
+      alt="Illustration for the support section, showing symbolically a person indicating the direction to take."
       sources={{
         light: useBaseUrl("/img/illustrations/support-light.svg"),
         dark: useBaseUrl("/img/illustrations/support-dark.svg"),
diff --git a/src/components/services/styles.module.css b/src/components/services/styles.module.css
index cd3a33344..310fea811 100644
--- a/src/components/services/styles.module.css
+++ b/src/components/services/styles.module.css
@@ -1,9 +1,3 @@
-
-div .transition {
-  color: var(--ifm-background-color-blue-banner);
-}
-
-
 @media only screen and (max-width: 996px) {
   /*Mobile */
   .services_header_text {
@@ -55,7 +49,7 @@ div .transition {
     font-family: var(--ifm-font-family-bebas-neue);
     font-size: var(--ifm-font-size-secondary-title);
     font-weight: 800;
-   
+
     color: var(--ifm-color-secondary-s3);
     padding: var(--ifm-spacing-2xl) 0;
     margin-top: var(--ifm-spacing-7xl);
@@ -85,5 +79,6 @@ div .transition {
     line-height: 150%;
     text-align: center;
     margin-top: var(--ifm-spacing-4xl);
+    color: var(--ifm-text-color-services-transition);
   }
 }
diff --git a/src/css/custom.css b/src/css/custom.css
index cd8ce74c1..b71bb6524 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -81,9 +81,11 @@
   --ifm-color-text-on-primary-p1: #1c1c16;
   --ifm-color-text-on-primary-p1-dark-mode: black;
 
+  --ifm-text-color-services-transition: var(--ifm-color-indigo-i1);
+  --ifm-text-color-services-transition-dark-mode: #a0c9ff;
+
   --ifm-background-color-blue-banner: #a0c9ff;
-  /*--ifm-background-color-blue-banner-dark-mode: #0c37b7;*/
-  --ifm-background-color-blue-banner-dark-mode: rgb(79, 82, 255);
+  --ifm-background-color-blue-banner-dark-mode: #2C2E9D;
   --ifm-text-color-blue-banner: #002646;
   --ifm-text-color-blue-banner-dark-mode: #dde1ff;
 
@@ -179,6 +181,8 @@
     --ifm-background-value-topics-card-white-dark-mode
   );
 
+  --ifm-text-color-services-transition: var(--ifm-text-color-services-transition-dark-mode);
+
   --ifm-background-color-value-card-yellow: var(
     --ifm-background-color-value-card-yellow-dark-mode
   );
@@ -348,6 +352,13 @@ ul {
     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);
@@ -403,21 +414,37 @@ ul {
     text-align: justify;
   }
 
-  div {
+  /*div {
     color: black;
-  }
+  }*/
 
-  [data-theme="dark"] div {
+ /* [data-theme="dark"] div {
     color: #fff;
-  }
+  }*/
 }
 
+
 @media (min-width: 1440px) {
   .container {
     max-width: none;
   }
 }
 
+@media (min-width: 2200px) {
+  .row {
+   width: 1624px;
+  }
+
+  .main-container-with-larger-margins {
+    .main-container-with-larger-margins {
+      margin-left: 288px;
+      margin-right: 288px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+}
+
 .social-media-links {
   margin-left: var(--ifm-spacing-3xl);
   text-align: start;
@@ -505,15 +532,19 @@ ul {
   margin-top: var(--ifm-spacing-2xl);
 }
 
-div .quantstack-address {
+
+.footer {
+  color: red;
+}
+.quantstack-address {
   color: var(--ifm-text-color-footer);
 }
 
-div .footer__item {
+.footer__item {
   color: var(--ifm-text-color-footer);
 }
 
-div .footer__copyright {
+.footer__copyright {
   color: var(--ifm-text-color-footer);
 }
 
@@ -535,7 +566,7 @@ div .footer__copyright {
   color: var(--ifm-text-color-footer);
 }
 
-div .footer__title {
+.footer__title {
   color: var(--ifm-text-color-footer);
 }
 
@@ -551,7 +582,7 @@ div .footer__title {
   height: 240px;
 }
 
-div .footer__link-item {
+.footer__link-item {
   color: var(--ifm-text-color-footer);
 }