diff --git a/package.json b/package.json
index ba14ef0e3f..d1e075d530 100644
--- a/package.json
+++ b/package.json
@@ -56,7 +56,7 @@
     "eslint": "^8.22.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-turbo": "^0.0.3",
-    "eslint-plugin-astro": "^0.17.1",
+    "eslint-plugin-astro": "^0.19.0",
     "eslint-plugin-no-only-tests": "^2.6.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.31.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 96ca42e1cd..4f9557eb0c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,7 +14,7 @@ importers:
       eslint: ^8.22.0
       eslint-config-prettier: ^8.5.0
       eslint-config-turbo: ^0.0.3
-      eslint-plugin-astro: ^0.17.1
+      eslint-plugin-astro: ^0.19.0
       eslint-plugin-no-only-tests: ^2.6.0
       eslint-plugin-prettier: ^4.2.1
       eslint-plugin-react: ^7.31.0
@@ -38,7 +38,7 @@ importers:
       eslint: 8.23.0
       eslint-config-prettier: 8.5.0_eslint@8.23.0
       eslint-config-turbo: 0.0.3_eslint@8.23.0
-      eslint-plugin-astro: 0.17.1_eslint@8.23.0
+      eslint-plugin-astro: 0.19.0_eslint@8.23.0
       eslint-plugin-no-only-tests: 2.6.0
       eslint-plugin-prettier: 4.2.1_tgumt6uwl2md3n6uqnggd6wvce
       eslint-plugin-react: 7.31.1_eslint@8.23.0
@@ -88,8 +88,8 @@ importers:
   www:
     specifiers:
       '@algolia/client-search': ^4.13.1
-      '@astrojs/react': ^1.1.0
-      '@astrojs/tailwind': ^1.0.0
+      '@astrojs/react': ^1.1.3
+      '@astrojs/tailwind': ^2.0.1
       '@docsearch/css': ^3.2.1
       '@docsearch/react': ^3.2.1
       '@nanostores/react': ^0.3.0
@@ -109,6 +109,7 @@ importers:
       react-dom: 18.0.0
       react-typist: ^2.0.5
       tailwind-scrollbar: ^2.0.1
+      tailwindcss: ^3.1.8
       typescript: ^4.8.2
     dependencies:
       '@algolia/client-search': 4.14.2
@@ -118,10 +119,10 @@ importers:
       astro-seo: 0.6.0
       clsx: 1.2.1
       nanostores: 0.6.0
-      tailwind-scrollbar: 2.0.1
+      tailwind-scrollbar: 2.0.1_tailwindcss@3.1.8
     devDependencies:
-      '@astrojs/react': 1.1.0_zpnidt7m3osuk7shl3s4oenomq
-      '@astrojs/tailwind': 1.0.0
+      '@astrojs/react': 1.1.3_zpnidt7m3osuk7shl3s4oenomq
+      '@astrojs/tailwind': 2.0.1_tailwindcss@3.1.8
       '@types/node': 18.7.13
       '@types/react': 18.0.17
       '@types/react-dom': 18.0.6
@@ -134,6 +135,7 @@ importers:
       react: 18.0.0
       react-dom: 18.0.0_react@18.0.0
       react-typist: 2.0.5_zpnidt7m3osuk7shl3s4oenomq
+      tailwindcss: 3.1.8
       typescript: 4.8.2
 
 packages:
@@ -328,8 +330,8 @@ packages:
       prismjs: 1.29.0
     dev: true
 
-  /@astrojs/react/1.1.0_zpnidt7m3osuk7shl3s4oenomq:
-    resolution: {integrity: sha512-T9/mEE/9yO36X3QeqzQjGMFXRH0f3vcBC9Jhxb3oGm5NlKm2m9Sg9GR52fcCtLRVR3ihc8qAElgEmQAAUTZ3KQ==}
+  /@astrojs/react/1.1.3_zpnidt7m3osuk7shl3s4oenomq:
+    resolution: {integrity: sha512-awhAEPvJslewJ3Txeapw6LiZtU8RqZrDiequeNDmwQt6iz4Ltn3nJPROKxv4cKesAHEpAZhXWM1q2HhpxWFW0Q==}
     engines: {node: ^14.18.0 || >=16.12.0}
     peerDependencies:
       react: ^17.0.2 || ^18.0.0
@@ -343,15 +345,15 @@ packages:
       - supports-color
     dev: true
 
-  /@astrojs/tailwind/1.0.0:
-    resolution: {integrity: sha512-hEpvKBJKCStaxRZt3ENDacQlzUTOvW1D7dfIUyTf7jMUK4O+y8Q7gdTjERf1HBEi/YXrYNX1zhAElwp6lvW5oQ==}
+  /@astrojs/tailwind/2.0.1_tailwindcss@3.1.8:
+    resolution: {integrity: sha512-fvruoVEvx0zQsVY2AVRrhvH25zp6xTF8Wb1Lu43KXLoxU7fHIB1fcTTRP+Qhd4f5EvuTmuPKaKwHmbrv8mTV9A==}
+    peerDependencies:
+      tailwindcss: ^3.0.24
     dependencies:
       '@proload/core': 0.3.2
       autoprefixer: 10.4.8_postcss@8.4.16
       postcss: 8.4.16
       tailwindcss: 3.1.8
-    transitivePeerDependencies:
-      - ts-node
     dev: true
 
   /@astrojs/telemetry/1.0.0:
@@ -1573,12 +1575,10 @@ packages:
       acorn: 7.4.1
       acorn-walk: 7.2.0
       xtend: 4.0.2
-    dev: true
 
   /acorn-walk/7.2.0:
     resolution: {integrity: sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==}
     engines: {node: '>=0.4.0'}
-    dev: true
 
   /acorn-walk/8.2.0:
     resolution: {integrity: sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==}
@@ -1589,7 +1589,6 @@ packages:
     resolution: {integrity: sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==}
     engines: {node: '>=0.4.0'}
     hasBin: true
-    dev: true
 
   /acorn/8.8.0:
     resolution: {integrity: sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==}
@@ -1703,7 +1702,6 @@ packages:
     dependencies:
       normalize-path: 3.0.0
       picomatch: 2.3.1
-    dev: true
 
   /arg/4.1.3:
     resolution: {integrity: sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==}
@@ -1711,7 +1709,6 @@ packages:
 
   /arg/5.0.2:
     resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
-    dev: true
 
   /argparse/1.0.10:
     resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
@@ -1809,6 +1806,20 @@ packages:
       - supports-color
     dev: true
 
+  /astro-eslint-parser/0.6.1:
+    resolution: {integrity: sha512-/VXNGeLDulCbBLOW13KHJ/DeRbo8RvreP8k1f2I4tN+/VHFggJcb6oGTkPkN7etzH1V8aKAwAh80yEVdc59/Pw==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    dependencies:
+      '@astrojs/compiler': 0.23.4
+      '@typescript-eslint/types': 5.35.1
+      astrojs-compiler-sync: 0.2.3_@astrojs+compiler@0.23.4
+      debug: 4.3.4
+      eslint-visitor-keys: 3.3.0
+      espree: 9.4.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /astro-seo/0.6.0:
     resolution: {integrity: sha512-nR+dJlAyQhX6s0oAmbBqPq3KCZax/zVAerFsclGiJQ2znOkS/7L+RGjziS4M9Q3OQxm3FMfqIKHp9Ns73Q81ww==}
     dev: false
@@ -1882,6 +1893,16 @@ packages:
       - ts-node
     dev: true
 
+  /astrojs-compiler-sync/0.2.3_@astrojs+compiler@0.23.4:
+    resolution: {integrity: sha512-9zh85DrHieEylj7ir0MBmalyClw420oBhxn/NYGRx7xXoepofNuUR6RjY7V4l1kiolhvJ/uWKfZNZcHm7VsY6g==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      '@astrojs/compiler': '>=0.18.0'
+    dependencies:
+      '@astrojs/compiler': 0.23.4
+      synckit: 0.8.4
+    dev: true
+
   /autoprefixer/10.4.8_postcss@8.4.16:
     resolution: {integrity: sha512-75Jr6Q/XpTqEf6D2ltS5uMewJIx5irCU1oBYJrWjFenq/m12WRRrz6g15L1EIoYvPLXTbEry7rDOwrcYNj77xw==}
     engines: {node: ^10 || ^12 || >=14}
@@ -1927,7 +1948,6 @@ packages:
   /binary-extensions/2.2.0:
     resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
     engines: {node: '>=8'}
-    dev: true
 
   /bl/5.0.0:
     resolution: {integrity: sha512-8vxFNZ0pflFfi0WXA3WQXlj6CaMEwsmh63I1CNp0q+wWv8sD0ARx1KovSQd0l2GkwrMIOyedq0EF1FxI+RCZLQ==}
@@ -2020,7 +2040,6 @@ packages:
   /camelcase-css/2.0.1:
     resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
     engines: {node: '>= 6'}
-    dev: true
 
   /camelcase-keys/6.2.2:
     resolution: {integrity: sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==}
@@ -2101,7 +2120,6 @@ packages:
       readdirp: 3.6.0
     optionalDependencies:
       fsevents: 2.3.2
-    dev: true
 
   /ci-info/3.3.2:
     resolution: {integrity: sha512-xmDt/QIAdeZ9+nfdPsaBCpMvHNLFiLdjj59qjqn+6iPe6YmHGQ35sBnQ8uslRBXFmXkiZQOJRjvQeoGppoTjjg==}
@@ -2329,7 +2347,6 @@ packages:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
     hasBin: true
-    dev: true
 
   /csstype/3.1.0:
     resolution: {integrity: sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==}
@@ -2434,7 +2451,6 @@ packages:
 
   /defined/1.0.0:
     resolution: {integrity: sha512-Y2caI5+ZwS5c3RiNDJ6u53VhQHv+hHKwhkI1iHvceKUHw9Df6EK2zRLfjejRgMuCuxK7PfSWIMwWecceVvThjQ==}
-    dev: true
 
   /dequal/2.0.3:
     resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
@@ -2458,11 +2474,9 @@ packages:
       acorn-node: 1.8.2
       defined: 1.0.0
       minimist: 1.2.6
-    dev: true
 
   /didyoumean/1.2.2:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
-    dev: true
 
   /diff/4.0.2:
     resolution: {integrity: sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==}
@@ -2482,7 +2496,6 @@ packages:
 
   /dlv/1.1.3:
     resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
-    dev: true
 
   /doctrine/2.1.0:
     resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
@@ -3073,6 +3086,23 @@ packages:
       - supports-color
     dev: true
 
+  /eslint-plugin-astro/0.19.0_eslint@8.23.0:
+    resolution: {integrity: sha512-XOvTgFlSThgUQwDMjbj9gTu75Sig5IWpseN1hsGputC9tiZ857CrMLK3UimWCwIS6n3hTYYPWIkpcucEU/o0Uw==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      eslint: '>=7.0.0'
+    dependencies:
+      '@typescript-eslint/types': 5.35.1
+      astro-eslint-parser: 0.6.1
+      eslint: 8.23.0
+      eslint-utils: 3.0.0_eslint@8.23.0
+      postcss: 8.4.16
+      postcss-selector-parser: 6.0.10
+      sourcemap-codec: 1.4.8
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /eslint-plugin-jsx-a11y/6.6.1_eslint@8.23.0:
     resolution: {integrity: sha512-sXgFVNHiWffBq23uiS/JaP6eVR622DqwB4yTzKvGZGcPq6/yZ3WmOZfuBks/vHWo9GaFOqC2ZK4i6+C35knx7Q==}
     engines: {node: '>=4.0'}
@@ -3512,12 +3542,10 @@ packages:
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /function-bind/1.1.1:
     resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
-    dev: true
 
   /function.prototype.name/1.1.5:
     resolution: {integrity: sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==}
@@ -3599,7 +3627,6 @@ packages:
     engines: {node: '>=10.13.0'}
     dependencies:
       is-glob: 4.0.3
-    dev: true
 
   /glob/7.1.6:
     resolution: {integrity: sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==}
@@ -3747,7 +3774,6 @@ packages:
     engines: {node: '>= 0.4.0'}
     dependencies:
       function-bind: 1.1.1
-    dev: true
 
   /hast-to-hyperscript/10.0.1:
     resolution: {integrity: sha512-dhIVGoKCQVewFi+vz3Vt567E4ejMppS1haBRL6TEmeLeJVB1i/FJIIg/e6s1Bwn0g5qtYojHEKvyGA+OZuyifw==}
@@ -3990,7 +4016,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       binary-extensions: 2.2.0
-    dev: true
 
   /is-boolean-object/1.1.2:
     resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==}
@@ -4028,7 +4053,6 @@ packages:
     resolution: {integrity: sha512-Erxj2n/LDAZ7H8WNJXd9tw38GYM3dv8rk8Zcs+jJuxYTW7sozH+SS8NtrSjVL1/vpLvWi1hxy96IzjJ3EHTJJg==}
     dependencies:
       has: 1.0.3
-    dev: true
 
   /is-date-object/1.0.5:
     resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==}
@@ -4326,7 +4350,6 @@ packages:
   /lilconfig/2.0.6:
     resolution: {integrity: sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==}
     engines: {node: '>=10'}
-    dev: true
 
   /lines-and-columns/1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
@@ -5011,7 +5034,6 @@ packages:
 
   /minimist/1.2.6:
     resolution: {integrity: sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==}
-    dev: true
 
   /mixme/0.5.4:
     resolution: {integrity: sha512-3KYa4m4Vlqx98GPdOHghxSdNtTvcP8E0kkaJ5Dlh+h2DRzF7zpuVVcA8B0QpKd11YJeP9QQ7ASkKzOeu195Wzw==}
@@ -5048,7 +5070,6 @@ packages:
     resolution: {integrity: sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
-    dev: true
 
   /nanostores/0.6.0:
     resolution: {integrity: sha512-CQpKE8wtaJAr66hbg32t0MOAeybzLywU6UsLAX18kyQL/bME+xwhjWpmrvJRBp5kueFy6hs2oHlt3HFpNP+JaA==}
@@ -5121,7 +5142,6 @@ packages:
   /normalize-path/3.0.0:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /normalize-range/0.1.2:
     resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
@@ -5150,7 +5170,6 @@ packages:
   /object-hash/3.0.0:
     resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
     engines: {node: '>= 6'}
-    dev: true
 
   /object-inspect/1.12.2:
     resolution: {integrity: sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==}
@@ -5400,7 +5419,6 @@ packages:
 
   /path-parse/1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
-    dev: true
 
   /path-to-regexp/6.2.1:
     resolution: {integrity: sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==}
@@ -5412,7 +5430,6 @@ packages:
 
   /picocolors/1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
-    dev: true
 
   /picomatch/2.3.1:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
@@ -5427,7 +5444,6 @@ packages:
   /pify/2.3.0:
     resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /pify/4.0.1:
     resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
@@ -5461,7 +5477,6 @@ packages:
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
       resolve: 1.22.1
-    dev: true
 
   /postcss-js/4.0.0_postcss@8.4.16:
     resolution: {integrity: sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==}
@@ -5471,7 +5486,6 @@ packages:
     dependencies:
       camelcase-css: 2.0.1
       postcss: 8.4.16
-    dev: true
 
   /postcss-load-config/3.1.4:
     resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
@@ -5504,7 +5518,6 @@ packages:
       lilconfig: 2.0.6
       postcss: 8.4.16
       yaml: 1.10.2
-    dev: true
 
   /postcss-nested/5.0.6_postcss@8.4.16:
     resolution: {integrity: sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==}
@@ -5514,7 +5527,6 @@ packages:
     dependencies:
       postcss: 8.4.16
       postcss-selector-parser: 6.0.10
-    dev: true
 
   /postcss-selector-parser/6.0.10:
     resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
@@ -5522,11 +5534,9 @@ packages:
     dependencies:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
-    dev: true
 
   /postcss-value-parser/4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
-    dev: true
 
   /postcss/8.4.16:
     resolution: {integrity: sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==}
@@ -5535,7 +5545,6 @@ packages:
       nanoid: 3.3.4
       picocolors: 1.0.0
       source-map-js: 1.0.2
-    dev: true
 
   /preferred-pm/3.0.3:
     resolution: {integrity: sha512-+wZgbxNES/KlJs9q40F/1sfOd/j7f1O9JaHcW5Dsn3aUUOZg3L2bjpVUcKV2jvtElYfoTuQiNeMfQJ4kwUAhCQ==}
@@ -5631,7 +5640,6 @@ packages:
   /quick-lru/5.1.1:
     resolution: {integrity: sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==}
     engines: {node: '>=10'}
-    dev: true
 
   /react-dom/18.0.0_react@18.0.0:
     resolution: {integrity: sha512-XqX7uzmFo0pUceWFCt7Gff6IyIMzFUn7QMZrbrQfGxtaxXZIcGQzoNpRLE3fQLnS4XzLLPMZX2T9TRcSrasicw==}
@@ -5667,7 +5675,6 @@ packages:
     resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
     dependencies:
       pify: 2.3.0
-    dev: true
 
   /read-pkg-up/7.0.1:
     resolution: {integrity: sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==}
@@ -5711,7 +5718,6 @@ packages:
     engines: {node: '>=8.10.0'}
     dependencies:
       picomatch: 2.3.1
-    dev: true
 
   /recast/0.20.5:
     resolution: {integrity: sha512-E5qICoPoNL4yU0H0NoBDntNB0Q5oMSNh9usFctYniLBluTthi3RsQVBXIJNbApOlvSwW/RGxIuokPcAc59J5fQ==}
@@ -5865,7 +5871,6 @@ packages:
       is-core-module: 2.10.0
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
-    dev: true
 
   /resolve/2.0.0-next.4:
     resolution: {integrity: sha512-iMDbmAWtfU+MHpxt/I5iWI7cY6YVEZUQ3MBgPQ++XD1PELuJHIl82xBmObyP2KyQmkNB2dsqF7seoQQiAn5yDQ==}
@@ -6163,7 +6168,6 @@ packages:
   /source-map-js/1.0.2:
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /source-map/0.6.1:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
@@ -6395,7 +6399,6 @@ packages:
   /supports-preserve-symlinks-flag/1.0.0:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
-    dev: true
 
   /synckit/0.7.3:
     resolution: {integrity: sha512-jNroMv7Juy+mJ/CHW5H6TzsLWpa1qck6sCHbkv8YTur+irSq2PjbvmGnm2gy14BUQ6jF33vyR4DPssHqmqsDQw==}
@@ -6413,11 +6416,13 @@ packages:
       tslib: 2.4.0
     dev: true
 
-  /tailwind-scrollbar/2.0.1:
+  /tailwind-scrollbar/2.0.1_tailwindcss@3.1.8:
     resolution: {integrity: sha512-OcR7qHBbux4k+k6bWqnEQFYFooLK/F4dhkBz6nvswIoaA9ancZ5h20e0tyV7ifSWLDCUBtpG+1NHRA8HMRH/wg==}
     engines: {node: '>=12.13.0'}
     peerDependencies:
       tailwindcss: 3.x
+    dependencies:
+      tailwindcss: 3.1.8
     dev: false
 
   /tailwindcss/3.1.8:
@@ -6449,7 +6454,6 @@ packages:
       resolve: 1.22.1
     transitivePeerDependencies:
       - ts-node
-    dev: true
 
   /term-size/2.2.1:
     resolution: {integrity: sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==}
@@ -7291,7 +7295,6 @@ packages:
   /xtend/4.0.2:
     resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
     engines: {node: '>=0.4'}
-    dev: true
 
   /y18n/4.0.3:
     resolution: {integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==}
@@ -7313,7 +7316,6 @@ packages:
   /yaml/1.10.2:
     resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
     engines: {node: '>= 6'}
-    dev: true
 
   /yaml/2.1.1:
     resolution: {integrity: sha512-o96x3OPo8GjWeSLF+wOAbrPfhFOGY0W00GNaxCDv+9hkcDJEnev1yh8S7pgHF0ik6zc8sQLuL8hjHjJULZp8bw==}
diff --git a/www/package.json b/www/package.json
index c6a1db37e1..2f546be78e 100644
--- a/www/package.json
+++ b/www/package.json
@@ -22,8 +22,8 @@
     "tailwind-scrollbar": "^2.0.1"
   },
   "devDependencies": {
-    "@astrojs/react": "^1.1.0",
-    "@astrojs/tailwind": "^1.0.0",
+    "@astrojs/react": "^1.1.3",
+    "@astrojs/tailwind": "^2.0.1",
     "@types/node": "^18.7.13",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
@@ -36,6 +36,7 @@
     "react": "18.0.0",
     "react-dom": "18.0.0",
     "react-typist": "^2.0.5",
+    "tailwindcss": "^3.1.8",
     "typescript": "^4.8.2"
   }
 }
diff --git a/www/public/makeScrollableCodeFocusable.js b/www/public/makeScrollableCodeFocusable.js
deleted file mode 100644
index 6fbf1eebee..0000000000
--- a/www/public/makeScrollableCodeFocusable.js
+++ /dev/null
@@ -1,3 +0,0 @@
-Array.from(document.getElementsByTagName("pre")).forEach((element) => {
-  element.setAttribute("tabindex", "0");
-});
diff --git a/www/src/components/blog/pageContent.astro b/www/src/components/blog/pageContent.astro
index 6aa74523c7..b1870dc236 100644
--- a/www/src/components/blog/pageContent.astro
+++ b/www/src/components/blog/pageContent.astro
@@ -15,9 +15,14 @@ const title = frontmatter.title;
 ---
 
 <article id="article" class="flex flex-col h-full w-full">
-  <section class="mb-16 markdown w-full">
-    <h1 id="overview">{title}</h1>
-    <nav class="flex sm:hidden pl-3">
+  <section class="mb-16 w-full">
+    <h1
+      id="overview"
+      class="mt-8 mb-4 text-3xl font-extrabold dark:text-t3-purple-100 px-3"
+    >
+      {title}
+    </h1>
+    <nav class="flex md:hidden pl-3">
       <TableOfContents client:media="(max-width: 50em)" headings={headings} />
     </nav>
     <article class="markdown w-full">
@@ -53,7 +58,7 @@ const title = frontmatter.title;
     block.className = "relative flex w-full h-full hover:cursor-pointer";
     let copyButton = document.createElement("button");
     copyButton.className =
-      "inline-flex absolute right-1 top-1 border border-slate-50 rounded-lg px-2 py-1 text-sm hover:text-slate-800 hover:bg-gray-100 focus:outline-none focus:shadow-outline text-brand-primary";
+      "inline-flex absolute right-1 top-1  rounded-lg px-2 py-1 text-sm text-slate-50 hover:bg-slate-100/25 focus:outline-none focus:shadow-outline text-brand-primary";
     copyButton.innerHTML = copySVG;
     copyButton.addEventListener("click", () => {
       let text = "";
diff --git a/www/src/components/footer/footer.astro b/www/src/components/footer/footer.astro
index 90e6d54896..8d940f5200 100644
--- a/www/src/components/footer/footer.astro
+++ b/www/src/components/footer/footer.astro
@@ -1,16 +1,20 @@
 ---
+import clsx from "clsx";
 import AvatarList from "../blog/avatarList.astro";
 export interface Props {
   path: string;
   isBlog: boolean;
 }
 const { path, isBlog } = Astro.props;
+const isLanding = path === "/";
 ---
 
 <footer
-  class={path === "/"
-    ? `mt-auto pb-8 pt-16 text-t3-purple-100 bg-[#131232] flex flex-col`
-    : `mt-auto pb-8 pt-16 text-slate-900 dark:text-t3-purple-100 bg-t3-purple-50 dark:bg-slate-900 flex flex-col`}
+  class={clsx("transition-colors mt-auto pb-8 pt-16 flex flex-col", {
+    "text-t3-purple-100 bg-[#131232]": isLanding,
+    "text-slate-900 dark:text-t3-purple-100 bg-t3-purple-50 dark:bg-slate-900 ":
+      !isLanding,
+  })}
 >
   {isBlog && <AvatarList path={path} />}
   <div
@@ -26,7 +30,13 @@ const { path, isBlog } = Astro.props;
           class="flex justify-center space-x-3 md:justify-start"
         >
           <div class="flex items-center justify-center">
-            <img src="/favicon.svg" width="60" height="60" alt="T3 Logo" />
+            <img
+              class="rounded-lg"
+              src="/favicon.svg"
+              width="60"
+              height="60"
+              alt="T3 Logo"
+            />
             <span class="text-2xl font-semibold pl-3">Create T3 App</span>
           </div>
         </a>
diff --git a/www/src/components/headCommon.astro b/www/src/components/headCommon.astro
index 3f6d326e8e..cd8157f23f 100644
--- a/www/src/components/headCommon.astro
+++ b/www/src/components/headCommon.astro
@@ -1,7 +1,3 @@
----
-import "../styles/index.css";
----
-
 <!-- Global Metadata -->
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width" />
@@ -21,7 +17,12 @@ import "../styles/index.css";
 />
 
 <!-- Scrollable a11y code helper -->
-<script src="/makeScrollableCodeFocusable.js" is:inline></script>
+<script is:inline>
+  const preTags = document.querySelectorAll("pre");
+  Array.from(preTags).forEach((element) => {
+    element.setAttribute("tabindex", "0");
+  });
+</script>
 
 <!-- This is intentionally inlined to avoid FOUC -->
 <script is:inline>
@@ -32,7 +33,9 @@ import "../styles/index.css";
     (!theme && window.matchMedia("(prefers-color-scheme: dark)").matches)
   ) {
     root.classList.add("dark");
+    root.classList.remove("light");
   } else {
+    root.classList.add("light");
     root.classList.remove("dark");
   }
 </script>
diff --git a/www/src/components/headSeo.astro b/www/src/components/headSeo.astro
index 23b2562c71..0fa5d03780 100644
--- a/www/src/components/headSeo.astro
+++ b/www/src/components/headSeo.astro
@@ -20,27 +20,17 @@ const imageAlt = frontmatter.image?.alt ?? OPEN_GRAPH.image.alt;
 <meta property="og:title" content={formattedContentTitle} />
 <meta property="og:type" content="article" />
 <meta property="og:url" content={canonicalUrl} />
-<meta
-  property="og:locale"
-  content={frontmatter.ogLocale ?? SITE.defaultLanguage}
-/>
+<meta property="og:locale" content={SITE.defaultLanguage} />
 <meta property="og:image" content={canonicalImageSrc} />
 <meta property="og:image:alt" content={imageAlt} />
-<meta
-  name="description"
-  property="og:description"
-  content={frontmatter.description ?? SITE.description}
-/>
+<meta name="description" property="og:description" content={SITE.description} />
 <meta property="og:site_name" content={SITE.title} />
 
 <!-- Twitter Tags -->
 <meta name="twitter:card" content="summary_large_image" />
 <meta name="twitter:site" content={OPEN_GRAPH.twitter} />
 <meta name="twitter:title" content={formattedContentTitle} />
-<meta
-  name="twitter:description"
-  content={frontmatter.description ?? SITE.description}
-/>
+<meta name="twitter:description" content={SITE.description} />
 <meta name="twitter:image" content={canonicalImageSrc} />
 <meta name="twitter:image:alt" content={imageAlt} />
 
diff --git a/www/src/components/landingPage/banner.astro b/www/src/components/landingPage/banner.astro
index fc0c3be5d7..56a70b7ec5 100644
--- a/www/src/components/landingPage/banner.astro
+++ b/www/src/components/landingPage/banner.astro
@@ -42,7 +42,7 @@
                 >
                   <a
                     href="/en/introduction"
-                    class="inline-flex items-center text-white rounded-full p-1 pr-2 sm:text-base lg:text-sm xl:text-base cursor-pointer"
+                    class="inline-flex items-center rounded-full p-1 pr-2 sm:text-base lg:text-sm xl:text-base cursor-pointer hover:no-underline"
                   >
                     <span
                       class="px-3 sm:px-5 py-1.5 text-slate-800 text-sm font-semibold leading-5 bg-t3-purple-100 rounded-full flex items-center justify-between hover:bg-t3-purple-200"
@@ -51,7 +51,7 @@
                       <svg
                         xmlns="http://www.w3.org/2000/svg"
                         viewBox="0 0 320 512"
-                        class="h-4 ml-2"
+                        class="h-4 ml-2 fill-slate-800"
                       >
                         <path
                           d="M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z"
@@ -63,10 +63,10 @@
                     href="https://github.com/t3-oss/create-t3-app"
                     target="_blank"
                     rel="noopener noreferrer"
-                    class="inline-flex items-center text-white rounded-full p-1 pr-2 sm:text-base lg:text-sm xl:text-base cursor-pointer bg-white/10 hover:bg-white/20"
+                    class="inline-flex items-center rounded-full p-1 pr-2 sm:text-base lg:text-sm xl:text-base cursor-pointer bg-white/10 hover:bg-white/20 hover:no-underline"
                   >
                     <span
-                      class="ml-1 px-2 py-0.5 text-sm flex items-center justify-between"
+                      class="ml-1 px-2 py-0.5 text-sm flex items-center justify-between text-white"
                     >
                       Github
                       <svg
diff --git a/www/src/components/landingPage/community/communityCard.astro b/www/src/components/landingPage/community/communityCard.astro
index 4f028d7b84..6bbc26b02d 100644
--- a/www/src/components/landingPage/community/communityCard.astro
+++ b/www/src/components/landingPage/community/communityCard.astro
@@ -12,7 +12,7 @@ const { text, title, href } = Astro.props;
   href={href}
   target="_blank"
   rel="noopener noreferrer"
-  class="py-8 flex flex-col items-center justify-center rounded-lg p-3 space-y-3 h-60 hover:bg-white/20 bg-white/10 transition-colors cursor-pointer w-full"
+  class="py-8 flex flex-col items-center justify-center rounded-lg p-3 space-y-3 h-60 hover:bg-white/20 bg-white/10 transition-colors cursor-pointer w-full hover:no-underline"
 >
   <div class="w-14 h-14"><slot name="icon" /></div>
   <h2 class="text-xl font-black">{title}</h2>
diff --git a/www/src/components/landingPage/stack/card.astro b/www/src/components/landingPage/stack/card.astro
index 584bf88b53..d35e36caf0 100644
--- a/www/src/components/landingPage/stack/card.astro
+++ b/www/src/components/landingPage/stack/card.astro
@@ -8,7 +8,11 @@ const { title, href } = Astro.props;
 ---
 
 <div class="relative bg-white/5 rounded-md flex flex-col justify-between">
-  <a href={href} target="_blank" rel="noopener noreferrer"
+  <a
+    href={href}
+    target="_blank"
+    rel="noopener noreferrer"
+    class="hover:no-underline"
     ><dt
       class="flex space-x-4 items-center bg-white/10 p-2 pl-6 rounded-tr-md rounded-tl-md hover:bg-white/20 transition-colors"
     >
diff --git a/www/src/components/navigation/MobileMenu.tsx b/www/src/components/navigation/MobileMenu.tsx
index 4f5906d7fa..4b5d18359e 100644
--- a/www/src/components/navigation/MobileMenu.tsx
+++ b/www/src/components/navigation/MobileMenu.tsx
@@ -2,50 +2,51 @@
 import Search from "./Search";
 import { useStore } from "@nanostores/react";
 import { atom } from "nanostores";
+import clsx from "clsx";
 
 export const MobileMenuState = atom(false);
 
-export default function MobileMenu() {
+const NavLink: React.FC<{
+  href: string;
+  title: string;
+  external?: boolean;
+}> = ({ href, title, external = false }) => (
+  <a
+    href={href}
+    className="inline-flex items-center border font-medium relative text-base px-4 py-2 rounded-md text-white border-transparent hover:text-gray-300"
+    {...(external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
+  >
+    {title}
+  </a>
+);
+
+const MobileMenu = () => {
   const $isMobileMenuOpen = useStore(MobileMenuState);
   return (
     <>
       <div
-        className={
-          $isMobileMenuOpen
-            ? `absolute flex flex-col items-start justify-start -mx-4 w-full mt-1 transform transition-transform duration-300 ease-in-out translate-y-16 z-50 bg-gray-900 shadow shadow-t3-purple-100 opacity-100`
-            : `absolute flex flex-col transform items-start justify-start w-full transition-transform duration-300 ease-in-out -translate-y-96 z-50 bg-gray-900 shadow shadow-t3-purple-100 opacity-0`
-        }
+        className={clsx(
+          "absolute flex flex-col mt-1 transform transition-transform duration-300 ease-in-out z-50 bg-base shadow shadow-t3-purple-100",
+          {
+            "-mx-4 mt-1 translate-y-16 opacity-100": $isMobileMenuOpen,
+            "-translate-y-96 opacity-0": !$isMobileMenuOpen,
+          },
+        )}
       >
         <div className="search-item w-full p-2">
           <Search />
         </div>
-        <a
-          className="inline-flex items-center border font-medium relative text-base px-4 py-2 rounded-md text-white border-transparent hover:text-gray-300"
-          href="/en/introduction"
-        >
-          <span className="">Docs</span>
-        </a>
-        <a
-          className="inline-flex items-center border font-medium relative text-base px-4 py-2 rounded-md text-white border-transparent hover:text-gray-300"
-          href="/en/faq"
-        >
-          <span className="">FAQ</span>
-        </a>
-        <a
-          className="inline-flex items-center border font-medium relative text-base px-4 py-2 rounded-md text-white border-transparent hover:text-gray-300"
+        <NavLink href="/en/introduction" title="Docs" />
+        <NavLink href="/en/faq" title="FAQ" />
+        <NavLink
           href="https://github.com/t3-oss/create-t3-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <span className="">Github</span>
-        </a>
-        <a
-          className="inline-flex items-center border font-medium relative text-base px-4 py-2 rounded-md text-white border-transparent hover:text-gray-300"
-          href="https://init.tips/"
-        >
-          <span className="">T3 Stack</span>
-        </a>
+          title="GitHub"
+          external
+        />
+        <NavLink href="https://init.tips" title="T3 Stack" external />
       </div>
     </>
   );
-}
+};
+
+export default MobileMenu;
diff --git a/www/src/components/navigation/MobileMenuButton.tsx b/www/src/components/navigation/MobileMenuButton.tsx
index 0a6023c09d..b7f3e66b05 100644
--- a/www/src/components/navigation/MobileMenuButton.tsx
+++ b/www/src/components/navigation/MobileMenuButton.tsx
@@ -2,14 +2,13 @@
 import { useStore } from "@nanostores/react";
 import { MobileMenuState } from "./MobileMenu";
 
-export default function MobileMenuButton() {
+const MobileMenuButton = () => {
   const $isMobileMenuOpen = useStore(MobileMenuState);
   return (
     <>
       <button
         type="button"
         aria-pressed={$isMobileMenuOpen ? "true" : "false"}
-        id="menu-toggle"
         className="dark:text-slate-50 block md:hidden"
         onClick={() => {
           MobileMenuState.set(!$isMobileMenuOpen);
@@ -34,4 +33,6 @@ export default function MobileMenuButton() {
       </button>
     </>
   );
-}
+};
+
+export default MobileMenuButton;
diff --git a/www/src/components/navigation/Search.tsx b/www/src/components/navigation/Search.tsx
index 3248bf5791..387c5132a2 100644
--- a/www/src/components/navigation/Search.tsx
+++ b/www/src/components/navigation/Search.tsx
@@ -16,7 +16,7 @@ const useDocSearchKeyboardEvents =
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   (docSearchReact as any).default.useDocSearchKeyboardEvents;
 
-export default function Search() {
+const Search: React.FC = () => {
   const [isOpen, setIsOpen] = useState(false);
   const searchButtonRef = useRef<HTMLButtonElement>(null);
   const [initialQuery, setInitialQuery] = useState("");
@@ -51,9 +51,9 @@ export default function Search() {
         type="button"
         ref={searchButtonRef}
         onClick={onOpen}
-        className="w-full flex items-center justify-between px-4 py-2 text-sm font-medium text-white dark:text-gray-700 dark:bg-t3-purple-100 bg-white/70 rounded-lg"
+        className="w-full flex items-center justify-between px-4 py-2 text-sm font-medium text-slate-900 dark:text-slate-100 dark:bg-slate-700 bg-t3-purple-200/50 rounded-lg"
       >
-        <div className="flex items-center justify-center text-slate-900 dark:stroke-slate-900">
+        <div className="flex items-center justify-center dark:text-slate-100 stroke-white">
           <svg width="24" height="24" fill="none">
             <path
               d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
@@ -64,10 +64,10 @@ export default function Search() {
             />
           </svg>
 
-          <span className="pl-1 lg:pl-3 text-slate-900">Search</span>
+          <span className="pl-1 lg:pl-3 dark:text-slate-100">Search</span>
         </div>
 
-        <span className="border px-1 rounded-md border-slate-900 text-slate-900">
+        <span className="border px-1 rounded-md dark:text-slate-100 border-slate-900 dark:border-slate-100">
           <span className="sr-only">Press </span>
 
           <kbd>/</kbd>
@@ -103,4 +103,6 @@ export default function Search() {
         )}
     </>
   );
-}
+};
+
+export default Search;
diff --git a/www/src/components/navigation/SidebarToggle.tsx b/www/src/components/navigation/SidebarToggle.tsx
index e8784fc791..ce809310d9 100644
--- a/www/src/components/navigation/SidebarToggle.tsx
+++ b/www/src/components/navigation/SidebarToggle.tsx
@@ -1,42 +1,37 @@
 /** @jsxImportSource react */
-import { useState, useEffect } from "react";
+import clsx from "clsx";
+import { useRef } from "react";
 
-export default function SidebarToggle({
-  currentPage,
-}: {
-  currentPage: string;
-}) {
-  const [sidebarShown, setSidebarShown] = useState(false);
+const SidebarToggle: React.FC<{ currentPage: string }> = ({ currentPage }) => {
+  const ref = useRef<HTMLButtonElement | null>(null);
+  const isLanding = currentPage === "/";
 
-  useEffect(() => {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const handleClick = () => {
     const body = document.querySelector("body")!;
-    if (sidebarShown) {
-      body.classList.add("mobile-sidebar-toggle");
-    } else {
+    if (body.classList.contains("mobile-sidebar-toggle")) {
+      ref.current?.setAttribute("aria-pressed", "false");
       body.classList.remove("mobile-sidebar-toggle");
+    } else {
+      ref.current?.setAttribute("aria-pressed", "true");
+      body.classList.add("mobile-sidebar-toggle");
     }
-  }, [sidebarShown]);
+  };
 
   return (
     <button
+      ref={ref}
       type="button"
-      aria-pressed={sidebarShown ? "true" : "false"}
-      id="menu-toggle"
-      onClick={() => setSidebarShown(!sidebarShown)}
-      className={
-        currentPage === "/"
-          ? `z-20 block md:hidden text-white`
-          : `z-20 block md:hidden text-black dark:text-white`
-      }
+      aria-pressed="false"
+      onClick={handleClick}
+      className={clsx("z-20 block md:hidden", {
+        "text-white": isLanding,
+        "text-black dark:text-white": !isLanding,
+      })}
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        width="2em"
-        height="2em"
-        fill="none"
+        className="h-10 w-10 stroke-current fill-transparent"
         viewBox="0 0 24 24"
-        stroke="currentColor"
       >
         <path
           strokeLinecap="round"
@@ -48,4 +43,6 @@ export default function SidebarToggle({
       <span className="sr-only">Toggle sidebar</span>
     </button>
   );
-}
+};
+
+export default SidebarToggle;
diff --git a/www/src/components/navigation/TableOfContents.tsx b/www/src/components/navigation/TableOfContents.tsx
index 22fd79e0c6..5583196c74 100644
--- a/www/src/components/navigation/TableOfContents.tsx
+++ b/www/src/components/navigation/TableOfContents.tsx
@@ -1,4 +1,5 @@
 import type { MarkdownHeading } from "astro";
+import clsx from "clsx";
 import { useEffect, useRef, useState } from "react";
 
 type ItemOffsets = {
@@ -55,11 +56,12 @@ export default function TableOfContents({
       <h2 className="text-lg my-4 font-semibold dark:text-white text-slate-900">
         On this page
       </h2>
-      <ul className="w-full border-l-2 border-t3-purple-300 marker:text-t3-purple-300  dark:border-t3-purple-200 my-1">
+      <ul className="w-full border-l-2 border-t3-purple-300 marker:text-t3-purple-300  dark:border-t3-purple-200 my-1 list-none">
         <li
-          className={`pl-1 ml-1 marker:bg-t3-purple-300 ${
-            activeId === "overview" ? "font-bold" : "font-normal"
-          }`.trim()}
+          className={clsx([
+            "pl-1 ml-1 list-none",
+            activeId === "overview" ? "font-bold" : "font-normal",
+          ])}
         >
           <a
             className="hover:text-t3-purple-700 dark:hover:text-t3-purple-100 text-t3-purple-500 dark:text-t3-purple-200 text-base"
@@ -75,15 +77,11 @@ export default function TableOfContents({
             return (
               <li key={i} className={`pl-${padding} ml-1 w-full list-none`}>
                 <a
-                  className={`hover:text-t3-purple-700 dark:hover:text-t3-purple-100 text-t3-purple-500 dark:text-t3-purple-200 marker:text-t3-purple-300 ${
-                    activeId === heading.slug ? "font-bold" : "font-normal"
-                  } ${
-                    padding < 3
-                      ? "text-base"
-                      : padding >= 3
-                      ? "text-sm"
-                      : "text-sm"
-                  }`}
+                  className={clsx([
+                    "hover:text-t3-purple-700 dark:hover:text-t3-purple-100 text-t3-purple-500 dark:text-t3-purple-200",
+                    activeId === heading.slug ? "font-bold" : "font-normal",
+                    padding < 3 ? "text-base" : "text-sm",
+                  ])}
                   href={`#${heading.slug}`}
                 >
                   {heading.text}
diff --git a/www/src/components/navigation/ThemeToggleButton.css b/www/src/components/navigation/ThemeToggleButton.css
deleted file mode 100644
index bd5297dd23..0000000000
--- a/www/src/components/navigation/ThemeToggleButton.css
+++ /dev/null
@@ -1,26 +0,0 @@
-.theme-toggle {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25em;
-  padding: 0.33em 0.67em;
-  border-radius: 99em;
-}
-
-.theme-toggle > label:focus-within {
-  outline: 2px solid transparent;
-  box-shadow: 0 0 0 0.08em var(--theme-accent), 0 0 0 0.12em white;
-}
-
-.theme-toggle > label {
-  color: var(--theme-code-inline-text);
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  opacity: 0.5;
-}
-
-.theme-toggle .checked {
-  color: var(--theme-accent);
-  opacity: 1;
-}
diff --git a/www/src/components/navigation/ThemeToggleButton.tsx b/www/src/components/navigation/ThemeToggleButton.tsx
index 7184ec08c5..4cd01f01ea 100644
--- a/www/src/components/navigation/ThemeToggleButton.tsx
+++ b/www/src/components/navigation/ThemeToggleButton.tsx
@@ -1,16 +1,15 @@
 /** @jsxImportSource react */
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import clsx from "clsx";
-import "./ThemeToggleButton.css";
 
-const themes = ["light", "dark"];
+const themes = ["light", "dark"] as const;
+type Theme = typeof themes[number];
+const LOCAL_STORAGE_KEY = "theme";
 
-const icons = [
+const SunIcon: React.FC = () => (
   <svg
-    key="dark"
     xmlns="http://www.w3.org/2000/svg"
-    width="20"
-    height="20"
+    className="h-6 w-6 fill-current stroke-current"
     viewBox="0 0 20 20"
     fill="currentColor"
   >
@@ -19,76 +18,60 @@ const icons = [
       d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
       clipRule="evenodd"
     />
-  </svg>,
+  </svg>
+);
+const MoonIcon: React.FC = () => (
   <svg
-    key="light"
     xmlns="http://www.w3.org/2000/svg"
-    width="20"
-    height="20"
+    className="h-6 w-6 fill-current stroke-current"
     viewBox="0 0 20 20"
-    fill="currentColor"
   >
     <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
-  </svg>,
-];
+  </svg>
+);
 
 export default function ThemeToggleButton() {
-  const [theme, setTheme] = useState<string | undefined>(undefined);
-  useEffect(() => {
-    const init = () => {
-      if (typeof theme !== "string" && !import.meta.env.SSR) {
-        const item = localStorage.getItem("theme");
-        if (item) {
-          return setTheme(item);
-        }
-        if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-          return setTheme("dark");
-        }
-        return setTheme("light");
-      }
-    };
+  const [theme, _setTheme] = useState<Theme>("dark");
 
-    init();
-  }, [theme]);
+  const setTheme = (theme: Theme) => {
+    _setTheme(theme);
+    localStorage.setItem(LOCAL_STORAGE_KEY, theme);
 
-  const handleChange = (t: string) => {
     const root = document.documentElement;
-    setTheme(t);
-    localStorage.setItem("theme", t);
-    if (t === "light") {
+    if (theme === "light") {
+      root.classList.add("light");
       root.classList.remove("dark");
     } else {
       root.classList.add("dark");
+      root.classList.remove("light");
     }
   };
 
   return (
-    <div className=" flex border border-slate-900 dark:border-white p-1 w-fit mx-auto rounded-full space-x-3">
-      {themes.map((t, i) => {
-        const icon = icons[i];
+    <div className=" flex bg-t3-purple-200/50 dark:bg-slate-700 p-1.5 w-fit mx-auto rounded-full space-x-3">
+      {themes.map((t) => {
         const checked = t === theme;
         return (
           <label
             key={t}
-            className={clsx([
-              "cursor-pointer",
-              checked && i === 0
-                ? `text-orange-500 stroke-orange-500`
-                : checked && i === 1
-                ? `text-blue-500 stroke-blue-500`
-                : `text-slate-900 dark:text-white`,
-            ])}
+            className={clsx(
+              "cursor-pointer text-slate-900 dark:text-slate-200",
+              {
+                "text-orange-500": checked,
+                "dark:text-blue-500": checked,
+              },
+            )}
           >
-            {icon}
+            {t === "dark" ? <MoonIcon /> : <SunIcon />}
             <input
               className="absolute invisible"
               type="radio"
               name="theme-toggle"
               checked={checked}
               value={t}
-              title={`Use ${t} theme`}
-              aria-label={`Use ${t} theme`}
-              onChange={() => handleChange(t)}
+              title={`Use ${t}-mode`}
+              aria-label={`Use ${t}-mode`}
+              onChange={() => setTheme(t)}
             />
           </label>
         );
diff --git a/www/src/components/navigation/leftSidebar.astro b/www/src/components/navigation/leftSidebar.astro
index 58a4e97339..d1d8b3f8df 100644
--- a/www/src/components/navigation/leftSidebar.astro
+++ b/www/src/components/navigation/leftSidebar.astro
@@ -1,4 +1,5 @@
 ---
+import clsx from "clsx";
 import { SIDEBAR } from "../../config";
 import Search from "./Search";
 
@@ -7,6 +8,7 @@ export interface Props {
 }
 
 const { currentPage } = Astro.props;
+const isLanding = currentPage === "/";
 const currentPageMatch = currentPage.slice(1);
 const langCode = "en";
 const sidebar = SIDEBAR[langCode];
@@ -14,14 +16,17 @@ const sidebar = SIDEBAR[langCode];
 
 <nav
   aria-labelledby="grid-left"
-  class={currentPage === "/"
-    ? `pt-3 pb-28 h-full`
-    : `md:overflow-hidden h-full pb-32`}
+  class={clsx("h-full", {
+    "pt-3 pb-28": isLanding,
+    "pb-32 md:overflow-hidden": !isLanding,
+  })}
 >
   <div class="max-w-lg mx-auto p-3 md:hidden">
+    <!-- Put Searchbar on Mobile Dropdown Navbar -->
     <Search client:idle />
   </div>
   <ul
+    id="nav-groups"
     class="p-8 h-full overflow-x-visible overflow-y-scroll scrollbar-thin scrollbar-thumb-rounded-sm scrollbar-track-rounded-sm scrollbar-thumb-t3-purple-300 scrollbar-track-slate-300 dark:scrollbar-thumb-t3-purple-50 dark:scrollbar-track-slate-600 sm:overflow-auto pb-32 dark:text-slate-50 text-slate-800"
   >
     {
@@ -29,38 +34,28 @@ const sidebar = SIDEBAR[langCode];
         <li>
           <div>
             <h2
-              class={
-                currentPage === "/"
-                  ? `text-2xl sm:text-xl my-2 text-slate-50`
-                  : `text-2xl sm:text-xl my-2 dark:text-slate-50 text-slate-900 `
-              }
+              class={clsx("text-2xl sm:text-xl my-2", {
+                // mobile menu on landing page
+                "text-slate-50": isLanding,
+              })}
             >
               {header}
             </h2>
             <ul>
               {children.map((child) => {
                 const url = Astro.site?.pathname + child.link;
+                const isActive = currentPageMatch === child.link;
                 return (
                   <li>
                     <a
                       href={url}
-                      aria-current={
-                        currentPageMatch === child.link ? "page" : false
-                      }
-                      class={`
-                        ${
-                          currentPageMatch === child.link
-                            ? "hover:text-t3-purple-400 dark:hover:text-t3-purple-100 text-t3-purple-300 dark:text-t3-purple-200 font-extrabold text-lg sm:text-base"
-                            : "hover:text-t3-purple-400 dark:hover:text-t3-purple-100 text-t3-purple-300 dark:text-t3-purple-200 text-lg sm:text-base"
-                        }
-                        
-                        transition-colors
-                        font-medium
-                        block
-                        py-2
-                        px-4
-                        rounded-md
-                      `}
+                      aria-current={isActive ? "page" : false}
+                      class={clsx(
+                        "text-t3-purple-300 dark:text-t3-purple-200 transition-colors font-medium block py-2 px-4 rounded-md hover:text-t3-purple-400 dark:hover:text-t3-purple-100 text-lg",
+                        {
+                          "font-extrabold": isActive,
+                        },
+                      )}
                     >
                       {child.text}
                     </a>
@@ -76,10 +71,11 @@ const sidebar = SIDEBAR[langCode];
 </nav>
 
 <script is:inline>
+  // Not sure what this script does tbf
   window.addEventListener("DOMContentLoaded", () => {
-    var target = document.querySelector('[aria-current="page"]');
+    const target = document.querySelector('[aria-current="page"]');
     if (target && target.offsetTop > window.innerHeight - 100) {
-      document.querySelector(".nav-groups").scrollTop = target.offsetTop;
+      document.querySelector("#nav-groups").scrollTop = target.offsetTop;
     }
   });
 </script>
diff --git a/www/src/components/navigation/moreMenu.astro b/www/src/components/navigation/moreMenu.astro
index e556a5083e..363591e545 100644
--- a/www/src/components/navigation/moreMenu.astro
+++ b/www/src/components/navigation/moreMenu.astro
@@ -1,87 +1,73 @@
 ---
 import * as CONFIG from "../../config";
-import ThemeToggleButton from "./ThemeToggleButton";
-//import ThemeToggleButton from "./ThemeToggleButton";
 
 export interface Props {
   editHref: string;
 }
 
 const { editHref } = Astro.props;
-const showMoreSection = CONFIG.COMMUNITY_INVITE_URL;
 ---
 
-<div class="flex flex-col w-full items-center sm:items-start pt-8">
-  {
-    showMoreSection && (
-      <h2 class="text-lg mr-4 sm:my-4 sm:mr-0 font-semibold dark:text-white text-slate-900">
-        More
-      </h2>
-    )
-  }
+<div class="flex flex-col w-full items-center pt-8">
+  <h2
+    class="text-lg mr-4 sm:my-4 sm:mr-0 font-semibold dark:text-white text-slate-900"
+  >
+    More
+  </h2>
+
   <ul>
-    {
-      editHref && (
-        <li
-          class={`hover:text-t3-purple-700 dark:hover:text-t3-purple-100 text-t3-purple-500 dark:text-t3-purple-200 border-t3-purple-300 dark:border-t3-purple-200 depth-2 border-l-2 hover:border-t3-purple-300`}
+    <li
+      class="hover:text-t3-purple-700 dark:hover:text-t3-purple-100 text-t3-purple-500 dark:text-t3-purple-200 border-t3-purple-300 dark:border-t3-purple-200 depth-2 border-l-2 hover:border-t3-purple-300"
+    >
+      <a class="flex items-center gap-2 pl-2" href={editHref} target="_blank">
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          data-prefix="fas"
+          data-icon="pen"
+          class="svg-inline--fa fa-pen fa-w-16"
+          role="img"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 512 512"
+          height="1em"
+          width="1em"
         >
-          <a class="flex pl-2" href={editHref} target="_blank">
-            <svg
-              aria-hidden="true"
-              focusable="false"
-              data-prefix="fas"
-              data-icon="pen"
-              class="svg-inline--fa fa-pen fa-w-16"
-              role="img"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 512 512"
-              height="1em"
-              width="1em"
-            >
-              <path
-                fill="currentColor"
-                d="M290.74 93.24l128.02 128.02-277.99 277.99-114.14 12.6C11.35 513.54-1.56 500.62.14 485.34l12.7-114.22 277.9-277.88zm207.2-19.06l-60.11-60.11c-18.75-18.75-49.16-18.75-67.91 0l-56.55 56.55 128.02 128.02 56.55-56.55c18.75-18.76 18.75-49.16 0-67.91z"
-              />
-            </svg>
-            <span>Edit this page</span>
-          </a>
-        </li>
-      )
-    }
-    {
-      CONFIG.COMMUNITY_INVITE_URL && (
-        <li
-          class={`hover:text-t3-purple-700 dark:hover:text-t3-purple-100 text-t3-purple-500 dark:text-t3-purple-200 border-t3-purple-300 dark:border-t3-purple-200 depth-2 border-l-2 hover:border-t3-purple-300`}
+          <path
+            fill="currentColor"
+            d="M290.74 93.24l128.02 128.02-277.99 277.99-114.14 12.6C11.35 513.54-1.56 500.62.14 485.34l12.7-114.22 277.9-277.88zm207.2-19.06l-60.11-60.11c-18.75-18.75-49.16-18.75-67.91 0l-56.55 56.55 128.02 128.02 56.55-56.55c18.75-18.76 18.75-49.16 0-67.91z"
+          ></path>
+        </svg>
+        <span>Edit this page</span>
+      </a>
+    </li>
+
+    <li
+      class="hover:text-t3-purple-700 dark:hover:text-t3-purple-100 text-t3-purple-500 dark:text-t3-purple-200 border-t3-purple-300 dark:border-t3-purple-200 depth-2 border-l-2 hover:border-t3-purple-300"
+    >
+      <a
+        class="flex items-center gap-2 pl-2"
+        href={CONFIG.COMMUNITY_INVITE_URL}
+        target="_blank"
+      >
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          data-prefix="fas"
+          data-icon="comment-alt"
+          class="svg-inline--fa fa-comment-alt fa-w-16"
+          role="img"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 512 512"
+          height="1em"
+          width="1em"
         >
-          <a
-            class="flex pl-2"
-            href={CONFIG.COMMUNITY_INVITE_URL}
-            target="_blank"
-          >
-            <svg
-              aria-hidden="true"
-              focusable="false"
-              data-prefix="fas"
-              data-icon="comment-alt"
-              class="svg-inline--fa fa-comment-alt fa-w-16"
-              role="img"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 512 512"
-              height="1em"
-              width="1em"
-            >
-              <path
-                fill="currentColor"
-                d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 9.8 11.2 15.5 19.1 9.7L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64z"
-              />
-            </svg>
-            <span>Join our community</span>
-          </a>
-        </li>
-      )
-    }
+          <path
+            fill="currentColor"
+            d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 9.8 11.2 15.5 19.1 9.7L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64z"
+          ></path>
+        </svg>
+        <span>Join our community</span>
+      </a>
+    </li>
   </ul>
-  <div class="m-8 text-center">
-    <ThemeToggleButton client:visible />
-  </div>
 </div>
diff --git a/www/src/components/navigation/navbar.astro b/www/src/components/navigation/navbar.astro
index f5dbdc842a..9a5b90d124 100644
--- a/www/src/components/navigation/navbar.astro
+++ b/www/src/components/navigation/navbar.astro
@@ -1,15 +1,13 @@
 ---
+import clsx from "clsx";
 import Search from "./Search";
 import SidebarToggle from "./SidebarToggle";
-
-export interface Props {
-  mode?: "landing" | "default";
-}
+import ThemeToggleButton from "./ThemeToggleButton";
 
 const currentPage = Astro.url.pathname;
-const { mode = "default" } = Astro.props;
+const isLanding = currentPage === "/";
 
-const navbarLinks: Array<{ href: string; label: string; newTab?: boolean }> = [
+const navbarLinks: Array<{ href: string; label: string }> = [
   {
     href: "/en/introduction",
     label: "Docs",
@@ -21,53 +19,64 @@ const navbarLinks: Array<{ href: string; label: string; newTab?: boolean }> = [
   {
     href: "https://github.com/t3-oss/create-t3-app",
     label: "Github",
-    newTab: true,
   },
   {
     href: "https://init.tips",
     label: "T3 Stack",
-    newTab: true,
   },
 ];
 ---
 
 <nav
-  class={currentPage === "/"
-    ? `flex flex-col relative justify-between items-center pt-6 z-50 text-slate-50`
-    : `flex flex-col relative justify-between items-center pt-6 bg-t3-purple-50 dark:bg-slate-900 z-50`}
+  class={clsx("flex flex-col relative justify-between items-center pt-6", {
+    "z-50 text-slate-50": isLanding,
+    "bg-t3-purple-50 dark:bg-slate-900 transition-colors": !isLanding,
+  })}
   aria-label="Global"
 >
   <div class="flex items-center justify-between w-full px-6 pb-2">
     <div class="flex justify-between items-center w-full md:w-auto">
       <div>
-        <a class="" href="/">
-          <img src="/favicon.svg" width="45" height="45" alt="T3 Logo" />
+        <a href="/">
+          <img
+            src="/favicon.svg"
+            width="45"
+            height="45"
+            alt="T3 Logo"
+            class="rounded-lg"
+          />
         </a>
       </div><div class="hidden -space-x-1 md:flex md:ml-10">
         {
           navbarLinks.map((navbarLink) => (
             <a
-              class={`inline-flex items-center border font-medium relative text-base px-3 py-2 rounded-md border-transparent ${
-                mode === "landing"
-                  ? "text-t3-purple-100 hover:text-t3-purple-300"
-                  : "text-t3-purple-500 dark:text-t3-purple-100 hover:text-t3-purple-400"
-              }`}
+              class={clsx(
+                "inline-flex items-center border font-medium relative text-base px-3 py-2 rounded-md border-transparent",
+                {
+                  "text-t3-purple-100 hover:text-t3-purple-300": isLanding,
+                  "text-t3-purple-500 dark:text-t3-purple-100 hover:text-t3-purple-400":
+                    !isLanding,
+                },
+              )}
               href={navbarLink.href}
-              target={navbarLink.newTab ? "_blank" : ""}
             >
-              <span class="">{navbarLink.label}</span>
+              {navbarLink.label}
             </a>
           ))
         }
       </div>
     </div>
-    <div>
-      <SidebarToggle currentPage={currentPage} client:idle />
-    </div>
-    <div
-      class="hidden md:block shadow-sm dark:shadow-md shadow-slate-500 dark:shadow-slate-500/10 rounded-lg w-full max-w-xs"
-    >
-      <Search client:load />
+    <div class="flex flex-grow justify-end items-center">
+      <div class={clsx("m-8 text-center", { hidden: isLanding })}>
+        <ThemeToggleButton client:load />
+      </div>
+
+      <div>
+        <SidebarToggle currentPage={currentPage} client:idle />
+      </div>
+      <div class="hidden md:block rounded-lg w-full max-w-xs">
+        <Search client:load />
+      </div>
     </div>
   </div>
 </nav>
diff --git a/www/src/components/navigation/rightSidebar.astro b/www/src/components/navigation/rightSidebar.astro
index 318a51e646..af0d229c15 100644
--- a/www/src/components/navigation/rightSidebar.astro
+++ b/www/src/components/navigation/rightSidebar.astro
@@ -11,7 +11,7 @@ export interface Props {
 const { headings, githubEditUrl } = Astro.props;
 ---
 
-<nav class="sidebar-nav hidden lg:block max-w-sm" aria-labelledby="grid-right">
+<nav class="sidebar-nav hidden md:block max-w-sm" aria-labelledby="grid-right">
   <div class="sidebar-nav-inner">
     <TableOfContents client:media="(min-width: 50em)" headings={headings} />
     <MoreMenu editHref={githubEditUrl} />
diff --git a/www/src/layouts/blog.astro b/www/src/layouts/blog.astro
index 595862d275..b7d5eb1975 100644
--- a/www/src/layouts/blog.astro
+++ b/www/src/layouts/blog.astro
@@ -31,27 +31,25 @@ const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;
     <HeadCommon />
     <HeadSEO frontmatter={frontmatter} canonicalUrl={canonicalURL} />
     <title>
-      {
-        frontmatter.title
-          ? `${frontmatter.title} • ${CONFIG.SITE.title}`
-          : CONFIG.SITE.title
-      }
+      {frontmatter.title} • {CONFIG.SITE.title}
     </title>
   </head>
 
   <body class="w-full">
-    <Navbar mode={"default"} />
+    <Navbar />
     <main
-      class="bg-t3-purple-50 dark:bg-slate-900 w-full justify-items-start place-content-start items-start grid grid-cols-1 sm:grid-cols-6 md:grid-cols-12 h-full relative"
+      class="bg-t3-purple-50 dark:bg-slate-900 w-full place-content-start items-start justify-items-start xl:justify-items-center grid grid-cols-1 sm:grid-cols-6 md:grid-cols-12 h-full relative gap-4 transition-colors"
     >
       <aside
         id="grid-left"
-        class="hidden sticky h-[100vh] bottom-0 top-8 z-10 bg-t3-purple-50 bg-blend-lighten dark:bg-slate-900 md:flex md:col-span-3 md:col-start-1 w-full"
+        class="hidden sticky h-[100vh] bottom-0 top-8 z-10 bg-t3-purple-50 bg-blend-lighten dark:bg-slate-900 sm:w-screen md:w-full md:flex md:col-span-4 lg:col-span-3 xl:col-span-2 w-full transition-colors"
         title="Site Navigation"
       >
         <LeftSidebar currentPage={currentPage} />
       </aside>
-      <div class="col-span-1 sm:col-span-6 md:col-start-4 md:col-span-6 w-full">
+      <div
+        class="col-span-1 sm:col-span-6 md:col-span-8 lg:col-span-6 xl:col-span-8 w-full max-w-screen-md"
+      >
         <PageContent
           frontmatter={frontmatter}
           headings={headings}
@@ -63,7 +61,7 @@ const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;
       <aside
         id="grid-right"
         title="Table of Contents"
-        class="hidden lg:block pt-1 md:col-start-10 md:col-span-2 sticky top-8"
+        class="hidden lg:block pt-1 md:col-span-2 lg:col-span-3 xl:col-span-2 sticky top-8 justify-self-start"
       >
         <RightSidebar headings={headings} githubEditUrl={githubEditUrl} />
       </aside>
diff --git a/www/src/layouts/landingPage.astro b/www/src/layouts/landingPage.astro
index 250350d1d1..9ca1a22c85 100644
--- a/www/src/layouts/landingPage.astro
+++ b/www/src/layouts/landingPage.astro
@@ -28,11 +28,11 @@ const currentPage = Astro.url.pathname;
     <meta name="generator" content={Astro.generator} />
   </head>
   <body>
-    <Navbar mode={"landing"} />
+    <Navbar />
     <div class="relative h-full">
       <aside
         id="grid-left"
-        class="hidden sticky h-[100vh] overflow-y-auto bottom-0 top-0 left-0 right-0 bg-gradient-to-b via-[#300171] from-gray-900 to-slate-900 z-10"
+        class="hidden sticky h-screen overflow-y-auto bottom-0 top-0 left-0 right-0 bg-gradient-to-b via-[#300171] from-gray-900 to-slate-900 z-10"
         title="Site Navigation"
       >
         <LeftSidebar currentPage={currentPage} />
diff --git a/www/src/pages/themeTest.astro b/www/src/pages/themeTest.astro
new file mode 100644
index 0000000000..380a86fed6
--- /dev/null
+++ b/www/src/pages/themeTest.astro
@@ -0,0 +1,21 @@
+---
+import ThemeToggleButton from "../components/navigation/ThemeToggleButton";
+import "../styles/global.css";
+---
+
+<main class="bg-base p-4 h-screen">
+  <h1 class="text-slate-50 text-2xl font-bold text-center py-4">
+    Testing Color Schemes
+  </h1>
+  <ThemeToggleButton client:load />
+  <div class="grid grid-cols-2 gap-4 mt-8 font-semibold">
+    <div class="p-4 bg-neutral text-slate-50">Neutral</div>
+    <div class="p-4 bg-primary">Primary</div>
+    <div class="p-4 bg-secondary">Secondary</div>
+    <div class="p-4 bg-accent">Accent</div>
+    <div class="p-4 bg-warning">Warning</div>
+    <div class="p-4 bg-error">Error</div>
+    <div class="p-4 bg-success">Success</div>
+    <div class="p-4 bg-info">Info</div>
+  </div>
+</main>
diff --git a/www/src/styles/global.css b/www/src/styles/global.css
index f17fcec372..1a55b6ae3e 100644
--- a/www/src/styles/global.css
+++ b/www/src/styles/global.css
@@ -3,6 +3,32 @@
 @tailwind utilities;
 
 @layer base {
+  /* Design System Theming */
+  html.light {
+    --color-base: 236 228 236;
+    --color-neutral: 29 40 58;
+    --color-primary: 122 98 246;
+    --color-secondary: 58 191 248;
+    --color-accent: 244 113 181;
+    --color-warning: 244 193 82;
+    --color-error: 251 111 132;
+    --color-success: 43 212 189;
+    --color-info: 12 166 233;
+  }
+
+  html.dark {
+    --color-base: 15 23 41;
+    --color-neutral: 29 40 58;
+    --color-primary: 122 98 246;
+    --color-secondary: 58 191 248;
+    --color-accent: 244 113 181;
+    --color-warning: 244 193 82;
+    --color-error: 251 111 132;
+    --color-success: 43 212 189;
+    --color-info: 12 166 233;
+  }
+
+  /* Typewriter */
   .cursor::after {
     display: block;
     content: "";
@@ -26,6 +52,43 @@
     }
   }
 
+  /* Base stylings */
+  *:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+  a:hover,
+  a:focus {
+    text-decoration: underline;
+  }
+
+  a:focus {
+    outline: 2px solid currentColor;
+    outline-offset: 0.25em;
+  }
+
+  article > section :is(ul, ol) > * + * {
+    margin-top: 0.75rem;
+  }
+
+  article > section li > :is(p, pre, blockquote):not(:first-child) {
+    margin-top: 1rem;
+  }
+
+  article > section :is(ul, ol) {
+    padding-left: 1em;
+  }
+
+  article > section nav :is(ul, ol) {
+    padding-left: inherit;
+  }
+
+  td,
+  th {
+    padding: 6px;
+    text-align: left;
+  }
+
   .mobile-sidebar-toggle {
     overflow: hidden;
   }
@@ -35,10 +98,10 @@
     top: 2rem;
   }
 
+  /* Markdown Styling */
   .markdown {
     @apply text-slate-900 dark:text-t3-purple-100 flex flex-col items-start justify-start w-full px-3 dark:selection:bg-t3-purple-100 dark:selection:text-slate-900 selection:bg-t3-purple-200 selection:text-t3-purple-500;
   }
-
   .markdown h1 {
     @apply mt-8 mb-4 text-3xl font-extrabold;
   }
@@ -46,7 +109,7 @@
     @apply mt-8 mb-4 text-2xl font-semibold;
   }
   .markdown h3 {
-    @apply mt-8 mb-4 text-xl font-semibold;
+    @apply mt-8 mb-0 text-xl font-semibold;
   }
   .markdown li {
     @apply list-disc;
@@ -66,8 +129,17 @@
   .markdown pre {
     @apply font-mono my-3 p-2 rounded-md sm:pt-2 pl-3 mx-auto;
   }
-  .markdown h3 {
-    @apply mb-0 font-semibold;
+
+  .markdown ol {
+    @apply w-full;
+  }
+
+  .markdown details {
+    @apply w-full bg-t3-purple-200/50 dark:bg-slate-700 px-3 pb-0.5 rounded-md;
+  }
+
+  .markdown summary {
+    @apply py-3;
   }
 
   .markdown p > img {
@@ -76,11 +148,9 @@
   .markdown table > tbody > tr > td > a {
     @apply break-all;
   }
-
   .markdown table {
     @apply max-w-full table-fixed;
   }
-
   .markdown blockquote a {
     @apply text-slate-900 dark:text-t3-purple-50;
   }
diff --git a/www/src/styles/index.css b/www/src/styles/index.css
deleted file mode 100644
index 4a97c21885..0000000000
--- a/www/src/styles/index.css
+++ /dev/null
@@ -1,382 +0,0 @@
-* {
-	box-sizing: border-box;
-	margin: 0;
-}
-
-/* Global focus outline reset */
-*:focus:not(:focus-visible) {
-	outline: none;
-}
-
-:root {
-	--user-font-scale: 1rem - 16px;
-	--max-width: calc(100% - 1rem);
-}
-
-@media (min-width: 50em) {
-	:root {
-		--max-width: 46em;
-	}
-}
-
-body {
-	display: flex;
-	flex-direction: column;
-	min-height: 100vh;
-	font-family: var(--font-body);
-	font-size: 1rem;
-	font-size: clamp(0.9rem, 0.75rem + 0.375vw + var(--user-font-scale), 1rem);
-	line-height: 1.5;
-	max-width: 100vw;
-}
-
-nav ul {
-	list-style: none;
-	padding: 0;
-}
-
-.content > section > * + * {
-	margin-top: 1.25rem;
-}
-
-.content > section > :first-child {
-	margin-top: 0;
-}
-
-/* Typography */
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-	margin-bottom: 1rem;
-	font-weight: bold;
-	line-height: 1;
-}
-
-h1,
-h2 {
-	max-width: 40ch;
-}
-
-:is(h2, h3):not(:first-child) {
-	margin-top: 3rem;
-}
-
-:is(h4, h5, h6):not(:first-child) {
-	margin-top: 2rem;
-}
-
-h1 {
-	font-size: 3.25rem;
-	font-weight: 800;
-}
-
-h2 {
-	font-size: 2.5rem;
-}
-
-h3 {
-	font-size: 1.75rem;
-}
-
-h4 {
-	font-size: 1.3rem;
-}
-
-h5 {
-	font-size: 1rem;
-}
-
-p {
-	line-height: 1.65em;
-}
-
-.content ul {
-	line-height: 1.1em;
-}
-
-/* p,
-.content ul {
-	color: var(--theme-text-light);
-} */
-
-small,
-.text_small {
-	font-size: 0.833rem;
-}
-
-a {
-	color: var(--theme-text-accent);
-	font-weight: 400;
-	text-underline-offset: 0.08em;
-	align-items: center;
-	gap: 0.5rem;
-}
-
-article > section :is(ul, ol) > * + * {
-	margin-top: 0.75rem;
-}
-
-article > section nav :is(ul, ol) > * + * {
-	margin-top: inherit;
-}
-
-article > section li > :is(p, pre, blockquote):not(:first-child) {
-	margin-top: 1rem;
-}
-
-article > section :is(ul, ol) {
-	padding-left: 1em;
-}
-
-article > section nav :is(ul, ol) {
-	padding-left: inherit;
-}
-
-article > section nav {
-	margin-top: 1rem;
-	margin-bottom: 2rem;
-}
-
-/* article > section ::marker {
-	font-weight: bold;
-	color: var(--theme-text-light);
-} */
-
-article > section iframe {
-	width: 100%;
-	height: auto;
-	aspect-ratio: 16 / 9;
-}
-
-a > code {
-	position: relative;
-	color: var(--theme-text-accent);
-	background: transparent;
-	text-underline-offset: var(--padding-block);
-}
-
-a > code::before {
-	content: '';
-	position: absolute;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-	display: block;
-	background: var(--theme-accent);
-	opacity: var(--theme-accent-opacity);
-	border-radius: var(--border-radius);
-}
-
-a:hover,
-a:focus {
-	text-decoration: underline;
-}
-
-a:focus {
-	outline: 2px solid currentColor;
-	outline-offset: 0.25em;
-}
-
-strong {
-	font-weight: 600;
-	color: inherit;
-}
-
-/* Supporting Content */
-
-code {
-	--border-radius: 3px;
-	--padding-block: 0.2rem;
-	--padding-inline: 0.33rem;
-
-	font-family: var(--font-mono);
-	font-size: 0.85em;
-	color: inherit;
-	background-color: var(--theme-code-inline-bg);
-	padding: var(--padding-block) var(--padding-inline);
-	margin: calc(var(--padding-block) * -1) -0.125em;
-	border-radius: var(--border-radius);
-	word-break: break-word;
-}
-
-pre.astro-code > code {
-	all: unset;
-}
-
-pre > code {
-	font-size: 1em;
-}
-
-table,
-pre {
-	position: relative;
-	--padding-block: 1rem;
-	--padding-inline: 2rem;
-	padding: var(--padding-block) var(--padding-inline);
-	padding-right: calc(var(--padding-inline) * 2);
-	margin-left: calc(var(--padding-inline) * -1);
-	margin-right: calc(var(--padding-inline) * -1);
-	font-family: var(--font-mono);
-
-	line-height: 1.5;
-	font-size: 0.85em;
-	overflow-y: hidden;
-	overflow-x: auto;
-}
-
-table {
-	width: 100%;
-	padding: var(--padding-block) 0;
-	margin: 0;
-	border-collapse: collapse;
-}
-
-/* Zebra striping */
-/* tr:nth-of-type(odd) {
-	background: var(--theme-bg-hover);
-} */
-th {
-	background: var(--color-black);
-	color: var(--theme-color);
-	font-weight: bold;
-}
-td,
-th {
-	padding: 6px;
-	text-align: left;
-}
-
-pre {
-	background-color: var(--theme-code-bg);
-	color: var(--theme-code-text);
-}
-
-blockquote code {
-	background-color: var(--theme-bg);
-}
-
-@media (min-width: 37.75em) {
-	pre {
-		--padding-inline: 1.25rem;
-		border-radius: 8px;
-		margin-left: 0;
-		margin-right: 0;
-	}
-}
-
-blockquote {
-	margin: 2rem 0;
-	padding: 1.25em 1.5rem;
-	border-left: 3px solid var(--theme-text-light);
-	background-color: var(--theme-bg-offset);
-	border-radius: 0 0.25rem 0.25rem 0;
-	line-height: 1.7;
-}
-
-img {
-	max-width: 100%;
-}
-
-.flex {
-	display: flex;
-	align-items: center;
-}
-
-button {
-	display: flex;
-	align-items: center;
-	justify-items: center;
-	gap: 0.25em;
-	padding: 0.33em 0.67em;
-	border: 0;
-	background: var(--theme-bg);
-	display: flex;
-	font-size: 1rem;
-	align-items: center;
-	gap: 0.25em;
-	border-radius: 99em;
-	color: var(--theme-text);
-	background-color: var(--theme-bg);
-}
-
-h2.heading {
-	font-size: 1rem;
-	font-weight: 700;
-	padding: 0.1rem 1rem;
-	text-transform: uppercase;
-	margin-bottom: 0.5rem;
-}
-
-.heading-link {
-	font-size: 1rem;
-	padding: 0.1rem 0 0.1rem 1rem;
-	border-left: 4px solid var(--theme-divider);
-}
-
-.heading-link:hover,
-.heading-link:focus {
-	border-left-color: var(--theme-accent);
-	color: var(--theme-accent);
-}
-/* .heading-link:focus-within {
-	color: var(--theme-text-light);
-	border-left-color: hsla(var(--color-gray-40), 1);
-} */
-.heading-link svg {
-	opacity: 0.6;
-}
-.heading-link:hover svg {
-	opacity: 0.8;
-}
-.heading-link a {
-	display: inline-flex;
-	gap: 0.5em;
-	width: 100%;
-	padding: 0.15em 0 0.15em 0;
-}
-
-.heading-link.depth-3 {
-	padding-left: 2rem;
-}
-.heading-link.depth-4 {
-	padding-left: 3rem;
-}
-
-.heading-link a {
-	font: inherit;
-	color: inherit;
-	text-decoration: none;
-}
-
-/* Screenreader Only Text */
-.sr-only {
-	position: absolute;
-	width: 1px;
-	height: 1px;
-	padding: 0;
-	margin: -1px;
-	overflow: hidden;
-	clip: rect(0, 0, 0, 0);
-	white-space: nowrap;
-	border-width: 0;
-}
-
-.focus\:not-sr-only:focus,
-.focus\:not-sr-only:focus-visible {
-	position: static;
-	width: auto;
-	height: auto;
-	padding: 0;
-	margin: 0;
-	overflow: visible;
-	clip: auto;
-	white-space: normal;
-}
-
-:target {
-	scroll-margin: calc(var(--theme-sidebar-offset, 5rem) + 2rem) 0 2rem;
-}
diff --git a/www/tailwind.config.cjs b/www/tailwind.config.cjs
index 4656163b7e..787f10416c 100644
--- a/www/tailwind.config.cjs
+++ b/www/tailwind.config.cjs
@@ -5,6 +5,16 @@ module.exports = {
   theme: {
     extend: {
       colors: {
+        base: "rgb(var(--color-base) / <alpha-value>)",
+        neutral: "rgb(var(--color-neutral) / <alpha-value>)",
+        primary: "rgb(var(--color-primary) / <alpha-value>)",
+        secondary: "rgb(var(--color-secondary) / <alpha-value>)",
+        accent: "rgb(var(--color-accent) / <alpha-value>)",
+        warning: "rgb(var(--color-warning) / <alpha-value>)",
+        error: "rgb(var(--color-error) / <alpha-value>)",
+        success: "rgb(var(--color-success) / <alpha-value>)",
+        info: "rgb(var(--color-info) / <alpha-value>)",
+
         "t3-purple-50": "#F3EEFF",
         "t3-purple-100": "#e8ddff",
         "t3-purple-200": "#c3b4fc",