diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f80fdb1699..28b8c2cee3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -471,6 +471,9 @@ importers:
       '@docusaurus/theme-classic':
         specifier: 3.1.0
         version: 3.1.0(@types/react@18.2.47)(eslint@8.56.0)(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.3)
+      '@docusaurus/theme-common':
+        specifier: ^3.1.0
+        version: 3.1.0(@docusaurus/types@3.1.0)(eslint@8.56.0)(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.3)
       '@easyops-cn/docusaurus-search-local':
         specifier: ^0.40.1
         version: 0.40.1(@docusaurus/theme-common@3.1.0)(@docusaurus/types@3.1.0)(eslint@8.56.0)(quill-delta@5.1.0)(react-dom@18.2.0)(react@18.2.0)(rxjs@7.8.1)(typescript@5.3.3)
diff --git a/website/package.json b/website/package.json
index 489090735f..ec51b3137a 100644
--- a/website/package.json
+++ b/website/package.json
@@ -21,6 +21,7 @@
     "@docusaurus/core": "^3.1.0",
     "@docusaurus/preset-classic": "^3.1.0",
     "@docusaurus/theme-classic": "3.1.0",
+    "@docusaurus/theme-common": "^3.1.0",
     "@easyops-cn/docusaurus-search-local": "^0.40.1",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.1.0",
diff --git a/website/src/components/HomepageFeatures/index.tsx b/website/src/components/HomepageFeatures/index.tsx
index 916a594042..a006a0d40d 100644
--- a/website/src/components/HomepageFeatures/index.tsx
+++ b/website/src/components/HomepageFeatures/index.tsx
@@ -1,15 +1,20 @@
+import { useColorMode } from "@docusaurus/theme-common";
 import Heading from "@theme/Heading";
 import clsx from "clsx";
 
 import boxImage from "../../../static/img/box.png";
+import boxDarkImage from "../../../static/img/box_dark.png";
 import chainImage from "../../../static/img/chain.png";
+import chainDarkImage from "../../../static/img/chain_dark.png";
 import chartImage from "../../../static/img/chart.png";
+import chartDarkImage from "../../../static/img/chart_dark.png";
 
 import styles from "./styles.module.css";
 
 interface FeatureItem {
   title: string;
   img: string;
+  imgDark: string;
   description: JSX.Element;
 }
 
@@ -17,6 +22,7 @@ const FeatureList: FeatureItem[] = [
   {
     title: "Highly secure",
     img: boxImage as string,
+    imgDark: boxDarkImage as string,
     description: (
       <>
         MACI was designed to be a secure voting system. It is built using smart contracts on the Ethereum blockchain,
@@ -27,6 +33,7 @@ const FeatureList: FeatureItem[] = [
   {
     title: "Protects privacy",
     img: chainImage as string,
+    imgDark: chainDarkImage as string,
     description: (
       <>
         With MACI, votes are encrypted before submitting them on-chain to ensure that your privacy is preserved when
@@ -37,6 +44,7 @@ const FeatureList: FeatureItem[] = [
   {
     title: "Powered by zk-SNARKs",
     img: chartImage as string,
+    imgDark: chartDarkImage as string,
     description: (
       <>
         MACI is powered by zk-SNARKs, a cutting edge cryptographic technology that ensures votes are counted correctly
@@ -46,19 +54,25 @@ const FeatureList: FeatureItem[] = [
   },
 ];
 
-const Feature = ({ title, img, description }: FeatureItem) => (
-  <div className={clsx("col col--4")}>
-    <div className="text--center">
-      <img alt={title} className={styles.featureSvg} src={img} />
-    </div>
+const Feature = ({ title, img, imgDark, description }: FeatureItem) => {
+  const { isDarkTheme } = useColorMode();
+
+  return (
+    <div className={clsx("col col--4")}>
+      <div className="text--center">
+        <img alt={title} className={styles.featureImg} src={isDarkTheme ? imgDark : img} />
+      </div>
 
-    <div className="text--center padding-horiz--md">
-      <Heading as="h3">{title}</Heading>
+      <div className="text--center padding-horiz--md">
+        <Heading as="h3" className={styles.featureTitle}>
+          {title}
+        </Heading>
 
-      <p>{description}</p>
+        <p>{description}</p>
+      </div>
     </div>
-  </div>
-);
+  );
+};
 
 const HomepageFeatures = (): JSX.Element => (
   <section className={styles.features}>
diff --git a/website/src/components/HomepageFeatures/styles.module.css b/website/src/components/HomepageFeatures/styles.module.css
index 9ddb23cb48..75ac46e089 100644
--- a/website/src/components/HomepageFeatures/styles.module.css
+++ b/website/src/components/HomepageFeatures/styles.module.css
@@ -5,6 +5,12 @@
   width: 100%;
 }
 
-.featureSvg {
+.featureImg {
   width: 200px;
 }
+
+.featureTitle {
+  text-decoration: underline;
+  text-decoration-color: var(--ifm-link-color);
+  text-underline-offset: 0.5rem;
+}
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index e1ea7d6403..159c2ded48 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -28,7 +28,7 @@
   --ifm-footer-background-color: #020203;
   --ifm-footer-color: #ffffff;
   --ifm-footer-link-color: #ffffff;
-  --ifm-footer-link-hover-color: #ffffff;
+  --ifm-footer-link-hover-color: #579bea;
   --ifm-link-color: #579bea;
   --ifm-color-hero: #fcfcfc;
   --ifm-font-family-base: DMSans;
@@ -59,6 +59,21 @@ h2 {
   color: var(--ifm-color-primary);
 }
 
+h3 {
+  font-family: ShareTechMono;
+  color: var(--ifm-color-primary);
+}
+
+h4 {
+  font-family: ShareTechMono;
+  color: var(--ifm-color-primary);
+  font-size: 1.25rem;
+}
+
+nav {
+  font-family: ShareTechMono;
+}
+
 @media screen and (max-width: 996px) {
   h1 {
     font-size: 2.5rem;
diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css
index f27e67d9ff..9c8445a9d3 100644
--- a/website/src/pages/index.module.css
+++ b/website/src/pages/index.module.css
@@ -9,23 +9,30 @@
   overflow: hidden;
   background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%),
     url("../../static/img/hero.svg");
-  background-position: center;
+  background-position: 0% 75%;
   background-repeat: no-repeat;
   background-size: cover;
   flex-direction: column;
   justify-content: center;
   align-items: start;
   padding: 8rem;
+  color: var(--ifm-color-hero);
+  font-family: ShareTechMono;
+  gap: 1rem;
 }
 
 .heroTitle {
   border: 2px solid white;
   border-radius: 4px;
-  padding: 0rem 0.5rem;
+  padding: 0rem 0.75rem;
+  font-size: 2.5rem;
+  line-height: 3.5rem;
+  letter-spacing: -0.1rem;
 }
 
-.heroColor {
-  color: var(--ifm-color-hero);
+.heroTagline {
+  font-size: 4.5rem;
+  line-height: 5rem;
 }
 
 .buttons {
@@ -46,9 +53,9 @@
 }
 
 .borderBlue {
-  width: max-content;
-  border-bottom: 3px solid var(--ifm-link-color);
-  box-sizing: content-box;
+  text-decoration: underline;
+  text-decoration-color: var(--ifm-link-color);
+  text-underline-offset: 0.5rem;
   margin-bottom: 1rem;
 }
 
@@ -60,4 +67,15 @@
   .introduction {
     padding: 1.5rem;
   }
+
+  .heroTitle {
+    font-size: 1.5rem;
+    line-height: 2.25rem;
+    padding: 0rem 0.5rem;
+  }
+
+  .heroTagline {
+    font-size: 2.5rem;
+    line-height: 3rem;
+  }
 }
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
index 1d8beadc26..8f067e61cd 100644
--- a/website/src/pages/index.tsx
+++ b/website/src/pages/index.tsx
@@ -13,15 +13,13 @@ interface HomepageHeaderProps {
 
 const HomepageHeader = ({ tagline, title }: HomepageHeaderProps) => (
   <header className={clsx("hero hero--dark", styles.heroBanner)}>
-    <div className={styles.heroTitle}>
-      <h2 className={styles.heroColor}>{title}</h2>
-    </div>
+    <div className={styles.heroTitle}>{title}</div>
 
-    <h1 className={styles.heroColor}>
+    <div className={styles.heroTagline}>
       {tagline}
 
       <span className={styles.blue}>.</span>
-    </h1>
+    </div>
   </header>
 );
 
diff --git a/website/static/img/box.png b/website/static/img/box.png
index 8971bee36b..7722a741db 100644
Binary files a/website/static/img/box.png and b/website/static/img/box.png differ
diff --git a/website/static/img/box_dark.png b/website/static/img/box_dark.png
new file mode 100644
index 0000000000..8971bee36b
Binary files /dev/null and b/website/static/img/box_dark.png differ
diff --git a/website/static/img/chain.png b/website/static/img/chain.png
index 438c2087d3..aadb1c1e56 100644
Binary files a/website/static/img/chain.png and b/website/static/img/chain.png differ
diff --git a/website/static/img/chain_dark.png b/website/static/img/chain_dark.png
new file mode 100644
index 0000000000..438c2087d3
Binary files /dev/null and b/website/static/img/chain_dark.png differ
diff --git a/website/static/img/chart.png b/website/static/img/chart.png
index c1a5477264..2db7aece7c 100644
Binary files a/website/static/img/chart.png and b/website/static/img/chart.png differ
diff --git a/website/static/img/chart_dark.png b/website/static/img/chart_dark.png
new file mode 100644
index 0000000000..c1a5477264
Binary files /dev/null and b/website/static/img/chart_dark.png differ