diff --git a/docs/_sass/_colors.scss b/docs/_sass/_colors.scss
index ea6d129486fa..14fc24c41c32 100644
--- a/docs/_sass/_colors.scss
+++ b/docs/_sass/_colors.scss
@@ -1,17 +1,20 @@
 :root {
     --color-text: #002e22;
+    --color-text-body: #465751;
     --color-button-text: #FCFBF9;
     --color-text-supporting: #76847e;
     --color-icons: #a2a9a3;
-    --color-borders: #e6e1da;
+    --color-borders: #ebe6df;
     --color-highlightBG: #f8f4f0;
     --color-row-hover: #f2ede7;
-    --color-appBG: #fcfbf9;
+    --color-appBG: #faf8f5;
+    --color-surface: #ffffff;
+    --color-card-shadow: 0 8px 16px rgba(0, 0, 0, 0.01), 0 3px 6px rgba(0, 0, 0, 0.02);
     --color-success: #03d47c;
     --color-accent: #03d47c;
     --color-link: #0164BF;
     --color-link-hovered: #0676DE;
-    --color-button-background: #e6e1da;
+    --color-button-background: #ebe6df;
     --color-button-background-hover: #d8d1c7;
     --color-button-success-background: #03d47c;
     --color-button-success-background-hover: #00a862;
@@ -23,6 +26,7 @@
 @media (prefers-color-scheme: dark) {
     :root {
         --color-text: #e7ece9;
+        --color-text-body: #e7ece9;
         --color-button-text: #E7ECE9;
         --color-text-supporting: #afbbb0;
         --color-icons: #8b9c8f;
@@ -30,6 +34,8 @@
         --color-highlightBG: #072419;
         --color-row-hover: #0a2e25;
         --color-appBG: #061b09;
+        --color-surface: #072419;
+        --color-card-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.15);
         --color-success: #03d47c;
         --color-accent: #03d47c;
         --color-link: #5ab0ff;
diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss
index 3b451f020c46..870b11f5954d 100644
--- a/docs/_sass/_main.scss
+++ b/docs/_sass/_main.scss
@@ -188,7 +188,7 @@ button,
 input,
 select,
 textarea {
-    line-height: 1.33;
+    line-height: 1.4;
     font-weight: 400;
     font-family: 'Expensify Neue', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
     font-size: 16px;
@@ -244,12 +244,9 @@ button {
 
 #lhn {
     position: fixed;
-    background-color: var(--color-highlightBG);
+    background-color: var(--color-appBG);
     box-sizing: border-box;
     z-index: 1;
-    border-right-color: var(--color-borders);
-    border-right-width: 1px;
-    border-style: solid;
     width: 100%;
     height: auto;
     &.expanded {
@@ -360,6 +357,7 @@ button {
     min-height: 100vh;
     margin-left: 0;
     padding: 80px 24px 0px 24px;
+    background-color: var(--color-appBG);
 
     @include breakpoint($breakpoint-tablet) {
         margin-left: 320px;
@@ -387,16 +385,46 @@ button {
 
     h1 {
         &.title {
-            font-size: 2.25em;
+            font-size: 36px;
+            line-height: 1.15;
+            font-weight: 500;
             flex: 1;
+            margin-bottom: 0;
         }
     }
 
+    .article-toc-content.article {
+        max-width: 720px;
+    }
+
     h1.homepage-title {
         font-size: 2.5em;
     }
 
     .article {
+        color: var(--color-text-body);
+
+        hr {
+            background: var(--color-borders);
+            border: none;
+            display: block;
+            width: 100%;
+            height: 1px;
+            margin: 48px 0;
+        }
+
+        p {
+            padding-bottom: 0;
+            margin: 0 0 16px 0;
+        }
+
+        ul,
+        ol {
+            margin-top: 0;
+            margin-bottom: 20px;
+            padding-bottom: 0;
+        }
+
         .hidden {
             display: none;
         }
@@ -413,7 +441,17 @@ button {
         }
 
         li {
-            padding-bottom: 4px;
+            padding-bottom: 8px;
+
+            &:last-child {
+                padding-bottom: 0;
+            }
+        }
+
+        li > ul,
+        li > ol {
+            margin-top: 8px;
+            margin-bottom: 0;
         }
 
         ol {
@@ -425,7 +463,8 @@ button {
         }
 
         table {
-            margin-bottom: 20px;
+            margin-top: 8px;
+            margin-bottom: 28px;
             border-radius: 8px;
 
             // Box shadow is used here because border-radius and border-collapse don't work together. It leads to double borders.
@@ -470,45 +509,106 @@ button {
         h1,
         summary {
             font-size: 1.5em;
-            padding: 20px 0 12px 0;
+            margin-top: 40px;
+            padding: 0 0 12px 0;
+
+            &:first-child {
+                margin-top: 0;
+            }
+        }
+
+        hr + h1,
+        hr + summary {
+            margin-top: 0;
+            padding-top: 0;
         }
 
         h2 {
-            font-size: 1.125em;
+            font-size: 21px;
+            line-height: 1.33;
             font-weight: 500;
             font-family: 'Expensify New Kansas', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
+            color: var(--color-text);
+            margin-top: 32px;
+            margin-bottom: 12px;
+            padding: 0 0 10px 0;
+            border-bottom: 1px solid var(--color-borders);
+        }
+
+        h1 + h2,
+        hr + h1 + h2 {
+            margin-top: 24px;
         }
 
         h3 {
             font-size: 1em;
             font-family: 'Expensify Neue', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
+            font-weight: 700;
+            color: var(--color-text);
+            margin-top: 24px;
+            margin-bottom: 8px;
+            padding: 0;
         }
 
-        h2,
-        h3 {
-            margin: 0;
-            padding: 12px 0 12px 0;
+        p + h2,
+        ul + h2,
+        ol + h2,
+        table + h2,
+        pre + h2,
+        blockquote + h2,
+        .info + h2,
+        details + h2 {
+            margin-top: 40px;
+        }
+
+        h1 + p,
+        h2 + p,
+        h3 + p {
+            margin-top: 4px;
+        }
+
+        details {
+            margin: 12px 0 24px;
+        }
+
+        pre {
+            margin-top: 12px;
+            margin-bottom: 24px;
         }
 
         blockquote {
-            margin-top: 20px;
+            margin-top: 16px;
             margin-bottom: 20px;
-            padding-top: 20px;
-            padding-left: 5%;
-            border-left: 5px solid var(--color-button-background-hover);
+            padding: 4px 0 4px 16px;
+            border-left: 4px solid var(--color-borders);
+            color: var(--color-text-body);
+
+            p {
+                padding-bottom: 0;
+                margin: 0 0 8px 0;
+                font-size: inherit;
+                font-family: inherit;
+                line-height: inherit;
+                opacity: 1;
+
+                &:last-child {
+                    margin-bottom: 0;
+                }
+            }
+
+            p:first-child {
+                font-size: inherit;
+                font-family: inherit;
+                font-weight: inherit;
+                opacity: 1;
+            }
 
             em:before {
-                content: '\“\a';
-                white-space: pre;
-                font-size: 60px;
-                line-height: 1em;
-                color: var(--color-accent);
+                content: none;
             }
 
-            p:first-child {
-                font-size: large;
-                font-family: 'Expensify New Kansas', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
-                opacity: 0.8;
+            strong {
+                font-weight: 700;
             }
         }
 
@@ -519,7 +619,8 @@ button {
             gap: 20px;
             border-radius: 12px;
             padding: 20px;
-            margin-bottom: 20px;
+            margin-top: 8px;
+            margin-bottom: 28px;
             justify-content: space-between;
             * > ol,
             ul {
@@ -557,7 +658,8 @@ button {
 
         .info {
             padding: 12px;
-            margin-bottom: 20px;
+            margin-top: 8px;
+            margin-bottom: 24px;
             border-radius: 8px;
             background-color: var(--color-highlightBG);
             color: var(--color-text);
@@ -582,7 +684,8 @@ button {
 
         .video-container {
             position: relative;
-            margin-bottom: 20px;
+            margin-top: 8px;
+            margin-bottom: 28px;
         }
 
         .video-js {
@@ -852,10 +955,12 @@ button {
     font-weight: 700;
     cursor: pointer;
     color: var(--color-text);
-    background-color: var(--color-highlightBG);
+    background-color: var(--color-surface);
+    box-shadow: var(--color-card-shadow);
 
     &:hover {
-        background-color: var(--color-row-hover);
+        background-color: var(--color-surface);
+        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.02), 0 3px 6px rgba(0, 0, 0, 0.04);
     }
 
     .row {
@@ -1374,7 +1479,7 @@ button {
         cursor: default;
 
         &:hover {
-            background-color: var(--color-highlightBG);
+            background-color: var(--color-surface);
         }
 
         .icon {
@@ -1439,7 +1544,9 @@ button {
 
 .get-help {
     flex-wrap: wrap;
-    margin-top: 40px;
+    margin-top: 56px;
+    padding-top: 32px;
+    border-top: 1px solid var(--color-borders);
 }
 
 .disable-scrollbar {
@@ -1554,7 +1661,11 @@ button {
 .title-platform-tabs {
     display: flex;
     justify-content: space-between;
-    padding-bottom: 20px;
+    max-width: 720px;
+    padding-bottom: 24px;
+    margin-bottom: 32px;
+    border-bottom: 1px solid var(--color-borders);
+
     h1 {
         padding: 0;
     }
@@ -1579,7 +1690,7 @@ button {
     border-style: solid;
     border-width: 1px;
     border-color: var(--color-borders);
-    background-color: transparent;
+    background-color: var(--color-surface);
     border-radius: 4px;
     text-align: center;
     padding: 6px 12px;
diff --git a/docs/_sass/_search-bar.scss b/docs/_sass/_search-bar.scss
index e0984ceeb31a..f0c61b7311d9 100644
--- a/docs/_sass/_search-bar.scss
+++ b/docs/_sass/_search-bar.scss
@@ -25,6 +25,7 @@
     min-height: 52px;
     box-sizing: border-box;
     cursor: text;
+    background-color: var(--color-surface);
 
     &:focus-within {
         border-color: var(--color-button-success-background);
@@ -147,7 +148,6 @@
 .lhn-search-input-wrapper {
     height: 52px;
     min-height: 52px;
-    background-color: var(--color-appBG);
 }
 
 .search-no-results,