diff --git a/website/docusaurus.config.ts b/website/docusaurus.config.ts
index 3db14b4..b6bb2ad 100644
--- a/website/docusaurus.config.ts
+++ b/website/docusaurus.config.ts
@@ -65,10 +65,11 @@ const config: Config = {
     // Replace with your project's social card
     image: 'img/docusaurus-social-card.jpg',
     navbar: {
-      title: 'The S2 Standard',
+      title: 'S2 Docs',
       logo: {
         alt: 'S2 Standard',
         src: 'img/Logo-S2-no-text.svg',
+        srcDark: 'img/s2-logo-dark.svg'
       },
       items: [
         {
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 99ffbb1..d0809f2 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -1,12 +1,12 @@
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #123EB7;
-  --ifm-color-primary-dark: #002098;
-  --ifm-color-primary-darker: #002098;
-  --ifm-color-primary-darkest: #205d3b;
-  --ifm-color-primary-light: #4778FF;
-  --ifm-color-primary-lighter: #7286dd;
-  --ifm-color-primary-lightest: #e8eaf9;
+  --ifm-color-primary: #123eb7;
+  --ifm-color-primary-dark: #1038a5;
+  --ifm-color-primary-darker: #0f359c;
+  --ifm-color-primary-darkest: #0d2b80;
+  --ifm-color-primary-light: #1444c9;
+  --ifm-color-primary-lighter: #1547d2;
+  --ifm-color-primary-lightest: #1d53e9;
   --ifm-color-success: #2EA339;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 
@@ -18,13 +18,13 @@
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
-  --ifm-color-primary: #889EDB;
-  --ifm-color-primary-dark: #21af90;
-  --ifm-color-primary-darker: #1fa588;
-  --ifm-color-primary-darkest: #1a8870;
-  --ifm-color-primary-light: #29d5b0;
-  --ifm-color-primary-lighter: #32d8b4;
-  --ifm-color-primary-lightest: #4fddbf;
+  --ifm-color-primary: #8ac5ff;
+  --ifm-color-primary-dark: #63b2ff;
+  --ifm-color-primary-darker: #4fa8ff;
+  --ifm-color-primary-darkest: #148bff;
+  --ifm-color-primary-light: #b1d8ff;
+  --ifm-color-primary-lighter: #c5e2ff;
+  --ifm-color-primary-lightest: #ffffff;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
 
@@ -38,7 +38,7 @@ h1, h2, h3, h4, h5, h6 {
   }
 
   h2 {
-    font-size: 16pt;
+    font-size: 32pt;
   }
 }
 
diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css
index f36a56b..3e19884 100644
--- a/website/src/pages/index.module.css
+++ b/website/src/pages/index.module.css
@@ -22,8 +22,10 @@
   justify-content: center;
 } */
 
-.actionButton{
-  min-width: 280px;
+@media screen and (max-width: 996px){
+  .actionButton {
+    min-width: 280px;
+  }
 }
 
 .flexContainer{
@@ -35,3 +37,43 @@
 .systemImg {
   max-width: 40%;
 }
+
+/* Title styles for homepage hero - responsive */
+.title {
+  font-size: 3rem;
+  line-height: 1.05;
+  font-weight: 700;
+  margin: 0 0 1rem 0;
+}
+
+@media screen and (max-width: 996px) {
+  .title {
+    font-size: 2.4rem;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .title {
+    font-size: 1.8rem;
+    line-height: 1.1;
+  }
+}
+
+/* Subtitle styles for homepage hero - responsive */
+.subtitle {
+  font-size: 1.25rem;
+  line-height: 1.4;
+  margin: 0 0 1.25rem 0;
+}
+
+@media screen and (max-width: 996px) {
+  .subtitle {
+    font-size: 1.05rem;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .subtitle {
+    font-size: 0.95rem;
+  }
+}
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
index b5f72fb..8d4bd7c 100644
--- a/website/src/pages/index.tsx
+++ b/website/src/pages/index.tsx
@@ -4,6 +4,8 @@ import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
 import Heading from '@theme/Heading';
+import ThemedImage from '@theme/ThemedImage';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 
 import styles from './index.module.css';
 
@@ -14,17 +16,23 @@ function HomepageHeader() {
       <div className="container">
         <div className="row">
           <div className="col col--6">
-            <Heading as="h1" className="hero__title">
+            <Heading as="h1" className={styles.title}>
               {siteConfig.title}
             </Heading>
-            <p className="hero__subtitle padding-bottom--lg">{siteConfig.tagline}</p>
+            <p className="padding-bottom--lg">{siteConfig.tagline}</p>
             <div className={styles.flexContainer}>
-                <Link to="/docs/welcome" className={clsx("button button--primary button--lg shadow--md", styles.actionButton)}>Read the documentation</Link>
-                <Link to="/model-reference/reading-this-documentation" className={clsx("button button--outline button--primary button--lg", styles.actionButton)}>Data model reference</Link>
+                <Link to="/docs/welcome" className={clsx("button button--primary shadow--md", styles.actionButton)}>Read the documentation</Link>
+                <Link to="/model-reference/reading-this-documentation" className={clsx("button button--outline button--primary ", styles.actionButton)}>Data model reference</Link>
             </div>
           </div>
         <div className="col col--6">
-          <img src='img/CEM-system-1536x864.png' alt='S2-system'></img>
+          <ThemedImage
+            alt="My image"
+            sources={{
+              light: useBaseUrl('/img/CEM-system-1536x864.png'),
+              dark: useBaseUrl('/img/cem-home-dark.png'),
+            }}
+          />
         </div>
         </div>
       </div>
diff --git a/website/static/img/cem-home-dark.png b/website/static/img/cem-home-dark.png
new file mode 100644
index 0000000..fe254ea
Binary files /dev/null and b/website/static/img/cem-home-dark.png differ
diff --git a/website/static/img/s2-logo-dark.svg b/website/static/img/s2-logo-dark.svg
new file mode 100644
index 0000000..b4992b6
--- /dev/null
+++ b/website/static/img/s2-logo-dark.svg
@@ -0,0 +1 @@
+<svg width="163" height="164" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><defs><clipPath id="clip0"><rect x="936" y="278" width="163" height="164"/></clipPath></defs><g clip-path="url(#clip0)" transform="translate(-936 -278)"><path d="M162.768 324.439C159.215 324.439 155.714 324.21 152.277 323.774L152.277 323.774C150.315 323.519 148.379 323.193 146.468 322.809L146.468 322.809C134.42 320.364 123.342 315.265 113.868 308.145L113.868 308.145C107.695 303.51 102.198 298.013 97.5626 291.839L97.5626 291.839C90.4422 282.365 85.3436 271.288 82.8992 259.239L82.8992 259.239C81.8293 253.971 81.2686 248.52 81.2686 242.939L81.2686 242.939C81.2686 233.935 88.5644 226.639 97.5691 226.639L97.5691 226.639C106.573 226.639 113.868 233.935 113.868 242.939L113.868 242.939C113.868 248.657 114.853 254.141 116.652 259.239L116.652 259.239C121.562 273.133 132.574 284.145 146.468 289.055L146.468 289.055C151.567 290.854 157.05 291.839 162.768 291.839L162.768 291.839 198.152 291.839C202.84 291.839 207.377 292.497 211.668 293.736L211.668 293.736C215.508 294.832 219.153 296.39 222.536 298.346L222.536 298.346C232.571 304.129 240.355 313.368 244.268 324.439L244.268 324.439ZM148.346 265.939C144.565 261.205 144.283 255.991 144.451 253.304L144.451 253.304C144.654 250.069 147.445 247.615 150.675 247.815L150.675 247.815C153.909 248.018 156.366 250.804 156.163 254.039L156.163 254.039C156.114 254.842 156.144 256.897 157.516 258.614L157.516 258.614C158.95 260.409 161.414 261.292 163.782 260.869L163.782 260.869C166.616 260.36 169.01 257.784 169.351 254.877L169.351 254.877C169.643 252.379 168.258 250.321 167.764 249.679L167.764 249.679 137.648 213.173 175.808 213.173C179.049 213.173 181.676 215.8 181.676 219.041L181.676 219.041C181.676 222.281 179.049 224.909 175.808 224.909L175.808 224.909 162.544 224.909 176.871 242.277 176.963 242.39C178.445 244.28 181.808 249.415 181.006 256.244L181.006 256.244C180.057 264.338 173.826 270.99 165.855 272.42L165.855 272.42C164.793 272.61 163.724 272.703 162.658 272.703L162.658 272.703C157.15 272.703 151.769 270.223 148.346 265.939M211.668 242.939C211.668 237.221 210.684 231.738 208.884 226.639L208.884 226.639C203.974 212.745 192.962 201.733 179.069 196.824L179.069 196.824C173.97 195.024 168.486 194.04 162.768 194.04L162.768 194.04 127.385 194.04C122.696 194.04 118.159 193.381 113.868 192.142L113.868 192.142C110.028 191.047 106.383 189.489 103 187.533L103 187.533C92.9654 181.75 85.1812 172.511 81.2686 161.44L81.2686 161.44 162.768 161.44C166.322 161.44 169.823 161.668 173.259 162.105L173.259 162.105C175.221 162.359 177.158 162.685 179.069 163.07L179.069 163.07C191.117 165.515 202.194 170.613 211.668 177.733L211.668 177.733C217.842 182.369 223.338 187.865 227.974 194.04L227.974 194.04C235.094 203.513 240.192 214.59 242.637 226.639L242.637 226.639C243.707 231.907 244.268 237.358 244.268 242.939L244.268 242.939C244.268 251.943 236.972 259.239 227.967 259.239L227.967 259.239C218.963 259.239 211.668 251.943 211.668 242.939" stroke="#000000" stroke-width="1.77599" fill="#E5E7EB" fill-opacity="0.89804" transform="matrix(1 0 0 -1.00613 854.731 604.431)"/></g></svg>
\ No newline at end of file