diff --git a/public/assets/github-white-800.svg b/public/assets/github-white-800.svg
new file mode 100644
index 000000000..8a300468d
--- /dev/null
+++ b/public/assets/github-white-800.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 35 35" fill="none">
+  <path d="M17.5003 0C7.8314 0 0 8.03465 0 17.9439C0 25.8737 5.01357 32.598 11.9659 34.969C12.8409 35.1381 13.1615 34.5824 13.1615 34.1059C13.1615 33.6801 13.1471 32.5509 13.1396 31.0551C8.27165 32.1372 7.24487 28.6477 7.24487 28.6477C6.44847 26.577 5.29796 26.0228 5.29796 26.0228C3.71267 24.9107 5.42032 24.9335 5.42032 24.9335C7.17787 25.0584 8.10074 26.7824 8.10074 26.7824C9.66142 29.5258 12.1976 28.7333 13.1977 28.2754C13.3549 27.1141 13.8061 26.3245 14.3058 25.8758C10.4195 25.4271 6.3343 23.8836 6.3343 17.0087C6.3343 15.05 7.01244 13.4493 8.13561 12.1939C7.93873 11.7403 7.34809 9.91564 8.28874 7.44475C8.28874 7.44475 9.75439 6.96399 13.1013 9.28436C14.5014 8.88563 15.9889 8.68804 17.4764 8.67877C18.9639 8.68804 20.4515 8.88563 21.8515 9.28436C25.1766 6.96399 26.6422 7.44475 26.6422 7.44475C27.5829 9.91635 26.9922 11.7403 26.8172 12.1939C27.9329 13.4493 28.611 15.05 28.611 17.0087C28.611 23.9021 24.5203 25.4193 20.6265 25.8608C21.239 26.3994 21.8078 27.5 21.8078 29.1813C21.8078 31.5822 21.7859 33.5117 21.7859 34.0952C21.7859 34.5653 22.0921 35.1266 22.989 34.9476C29.9905 32.5923 35 25.863 35 17.9453C35.0007 8.03465 27.1652 0 17.5003 0Z" fill="#DADADA"/>
+</svg>
\ No newline at end of file
diff --git a/public/scroll-docs-white-800.svg b/public/scroll-docs-white-800.svg
new file mode 100644
index 000000000..5d75ae3e7
--- /dev/null
+++ b/public/scroll-docs-white-800.svg
@@ -0,0 +1,25 @@
+<svg width="144" height="22" viewBox="0 0 144 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3449_5072)">
+<path d="M31.5225 6.08045C29.9777 6.08045 28.7872 6.93644 28.7872 8.2072C28.7872 9.47796 29.7959 9.86625 31.0499 10.0957L32.6311 10.3428C34.7303 10.6781 36.1751 11.6135 36.1751 13.8374C36.1751 16.0612 34.2123 17.5173 31.7133 17.5173C29.4597 17.5173 27.3333 16.2289 27.0243 13.705C26.9971 13.4932 27.1697 13.3079 27.3878 13.3079H28.3329C28.5146 13.3079 28.6691 13.4403 28.6964 13.6167C28.8963 15.3993 30.323 16.1053 31.7224 16.1053C33.249 16.1053 34.4576 15.3729 34.4576 13.8903C34.4576 12.5666 33.4853 12.1077 32.1949 11.8695L30.6319 11.6047C28.4419 11.2517 27.0698 10.2281 27.0698 8.28662C27.0698 6.03632 29.0871 4.65967 31.5134 4.65967C33.449 4.65967 35.5844 5.71863 36.0025 8.23368C36.0388 8.44547 35.8662 8.64844 35.639 8.64844H34.6576C34.4849 8.64844 34.3304 8.52489 34.3032 8.35722C34.0215 6.68935 32.7674 6.08045 31.5225 6.08045Z" fill="#DADADA"/>
+<path d="M42.465 7.45703C44.8004 7.45703 46.4634 8.66602 47.054 10.6428C47.1177 10.8634 46.945 11.0928 46.6997 11.0928H45.6001C45.4456 11.0928 45.3093 10.9957 45.2548 10.8545C44.8459 9.72498 43.9008 9.08078 42.465 9.08078C40.5113 9.08078 39.4208 10.6251 39.4208 12.4871C39.4208 14.3491 40.5204 15.8935 42.465 15.8935C43.9008 15.8935 44.8459 15.2492 45.2548 14.1197C45.3093 13.9785 45.4456 13.8814 45.6001 13.8814H46.6997C46.945 13.8814 47.1177 14.1109 47.045 14.3315C46.4179 16.3965 44.8095 17.5172 42.465 17.5172C39.4572 17.5172 37.5489 15.2581 37.5489 12.4871C37.5398 9.72498 39.4572 7.45703 42.465 7.45703Z" fill="#DADADA"/>
+<path d="M48.8157 15.9109H51.1693V9.55708H49.0701C48.8702 9.55708 48.7067 9.39823 48.7067 9.20409V8.30397C48.7067 8.10982 48.8702 7.95098 49.0701 7.95098H51.9326C52.5324 7.95098 53.0231 8.42751 53.0231 9.00994V9.26586C53.541 8.05688 54.6588 7.75684 56.3944 7.75684C57.0578 7.75684 57.503 7.86273 57.7575 7.95098C57.9029 8.00393 57.9938 8.1363 57.9938 8.27749V9.21291C57.9938 9.45118 57.7575 9.62767 57.5212 9.54825C57.2123 9.45118 56.7761 9.36293 56.2036 9.36293C54.3498 9.36293 53.0321 10.5896 53.0321 12.7163V15.9109H56.0582C56.2581 15.9109 56.4217 16.0697 56.4217 16.2639V17.164C56.4217 17.3581 56.2581 17.517 56.0582 17.517H48.8248C48.6249 17.517 48.4613 17.3581 48.4613 17.164V16.2639C48.4522 16.0697 48.6158 15.9109 48.8157 15.9109Z" fill="#DADADA"/>
+<path d="M59.375 12.4871C59.375 9.72498 61.2651 7.45703 64.3366 7.45703C67.4081 7.45703 69.2982 9.71616 69.2982 12.4871C69.2982 15.2581 67.4081 17.5172 64.3366 17.5172C61.2651 17.5172 59.375 15.2581 59.375 12.4871ZM64.3366 15.8935C66.3085 15.8935 67.4444 14.3491 67.4444 12.4871C67.4444 10.6251 66.3085 9.08078 64.3366 9.08078C62.3647 9.08078 61.2288 10.6251 61.2288 12.4871C61.2288 14.3491 62.3647 15.8935 64.3366 15.8935Z" fill="#DADADA"/>
+<path d="M113.809 12.4871C113.809 9.72498 115.699 7.45703 118.77 7.45703C121.842 7.45703 123.732 9.71616 123.732 12.4871C123.732 15.2581 121.842 17.5172 118.77 17.5172C115.699 17.5172 113.809 15.2581 113.809 12.4871ZM118.77 15.8935C120.742 15.8935 121.878 14.3491 121.878 12.4871C121.878 10.6251 120.742 9.08078 118.77 9.08078C116.798 9.08078 115.662 10.6251 115.662 12.4871C115.662 14.3491 116.798 15.8935 118.77 15.8935Z" fill="#DADADA"/>
+<path d="M73.4059 15.9902H76.2502C76.4501 15.9902 76.6137 16.1491 76.6137 16.3432V17.1727C76.6137 17.3669 76.4501 17.5257 76.2502 17.5257H71.9883C71.7884 17.5257 71.6248 17.3669 71.6248 17.1727V6.28306H70.2072C70.0073 6.28306 69.8438 6.12421 69.8438 5.93007V5.10055C69.8438 4.9064 70.0073 4.74756 70.2072 4.74756H72.3064C72.9061 4.74756 73.3968 5.22409 73.3968 5.80652V15.9902H73.4059Z" fill="#DADADA"/>
+<path d="M79.695 15.9902H82.5393C82.7392 15.9902 82.9028 16.1491 82.9028 16.3432V17.1727C82.9028 17.3669 82.7392 17.5257 82.5393 17.5257H78.2774C78.0775 17.5257 77.9139 17.3669 77.9139 17.1727V6.28306H76.4963C76.2964 6.28306 76.1328 6.12421 76.1328 5.93007V5.10055C76.1328 4.9064 76.2964 4.74756 76.4963 4.74756H78.5954C79.1952 4.74756 79.6859 5.22409 79.6859 5.80652V15.9902H79.695Z" fill="#DADADA"/>
+<path d="M2.87155 8.48051C1.99009 7.66864 1.37216 6.6185 1.37216 5.37421V5.24184C1.44486 3.11509 3.24412 1.40309 5.43413 1.34132H19.3739C19.7374 1.35897 20.0281 1.60606 20.0281 1.96787V13.4223C20.3462 13.4753 20.5007 13.5194 20.8096 13.6253C21.055 13.7136 21.3912 13.8989 21.3912 13.8989V1.96787C21.373 0.882435 20.4825 0.00878906 19.3648 0.00878906H5.42505C2.41719 0.0529126 0 2.44441 0 5.37421C0 7.07738 0.799672 8.53346 2.10823 9.55713C2.1991 9.62772 2.28088 9.71597 2.51715 9.71597C2.92607 9.71597 3.21686 9.39828 3.19869 9.05412C3.1896 8.7629 3.06238 8.657 2.87155 8.48051Z" fill="#DADADA"/>
+<path d="M19.0099 14.1726H8.07801C7.34195 14.1814 6.75128 14.755 6.75128 15.4698V16.9965C6.76945 17.7025 7.38738 18.3025 8.12344 18.3025H8.9322V16.9965H8.12344V15.5051H8.56871C9.94997 15.5051 10.9677 16.7494 10.9677 18.0819C10.9677 19.2644 9.85909 20.7735 8.00531 20.6499C6.36053 20.544 5.46999 19.1232 5.46999 18.0819V5.1449C5.46999 4.56247 4.97928 4.08594 4.37952 4.08594H3.28906V5.40964H4.09782V18.0908C4.05239 20.6676 5.98795 21.9648 8.00531 21.9648L19.019 22.0001C21.2362 22.0001 23.0355 20.2528 23.0355 18.0908C23.0355 15.9287 21.2272 14.1726 19.0099 14.1726ZM21.6633 18.1702C21.6179 19.5557 20.4457 20.6676 19.0099 20.6676L11.3494 20.6411C11.9582 19.9528 12.3308 19.0615 12.3308 18.0908C12.3308 16.5641 11.3948 15.5139 11.3948 15.5139H19.019C20.482 15.5139 21.6724 16.67 21.6724 18.0908L21.6633 18.1702Z" fill="#DADADA"/>
+<path d="M16.0663 5.64793H7.82422V4.32422H16.0663C16.4389 4.32422 16.7478 4.61543 16.7478 4.98607C16.7478 5.35671 16.448 5.64793 16.0663 5.64793Z" fill="#DADADA"/>
+<path d="M16.0663 11.8779H7.82422V10.5542H16.0663C16.4389 10.5542 16.7478 10.8454 16.7478 11.2161C16.7478 11.5867 16.448 11.8779 16.0663 11.8779Z" fill="#DADADA"/>
+<path d="M17.5202 8.76316H7.82422V7.43945H17.5112C17.8837 7.43945 18.1927 7.73067 18.1927 8.10131C18.2018 8.46312 17.8928 8.76316 17.5202 8.76316Z" fill="#DADADA"/>
+<path d="M92.5 17.1727C92.5 17.3669 92.3364 17.5257 92.1365 17.5257H91.3635C91.1636 17.5257 91 17.3669 91 17.1727V5.10055C91 4.9064 91.1636 4.74756 91.3635 4.74756H92.1365C92.3364 4.74756 92.5 4.9064 92.5 5.10055V17.1727Z" fill="#DADADA"/>
+<path d="M106.583 4.74756H101.363C101.164 4.74756 101 4.9064 101 5.10055V5.93007C101 6.12421 101.164 6.28306 101.363 6.28306H103.463V15.992H101.363C101.164 15.992 101 16.1508 101 16.345V17.1745C101 17.3687 101.164 17.5275 101.363 17.5275H103.463V17.5257H106.583C110.738 17.5257 112.429 14.6595 112.429 11.1366C112.429 7.61382 110.737 4.74756 106.583 4.74756ZM106.583 15.992H105.211V6.28041H106.583C109.647 6.28041 110.681 8.43452 110.681 11.1358C110.681 13.837 109.646 15.992 106.583 15.992Z" fill="#DADADA"/>
+<path d="M130.029 7.46387C132.365 7.46387 134.028 8.67285 134.619 10.6496C134.682 10.8702 134.509 11.0996 134.264 11.0996H133.165C133.01 11.0996 132.874 11.0026 132.819 10.8614C132.41 9.73182 131.465 9.08761 130.029 9.08761C128.076 9.08761 126.985 10.6319 126.985 12.494C126.985 14.356 128.085 15.9003 130.029 15.9003C131.465 15.9003 132.41 15.2561 132.819 14.1265C132.874 13.9853 133.01 13.8883 133.165 13.8883H134.264C134.509 13.8883 134.682 14.1177 134.609 14.3383C133.982 16.4033 132.374 17.524 130.029 17.524C127.022 17.524 125.113 15.2649 125.113 12.494C125.104 9.73182 127.022 7.46387 130.029 7.46387Z" fill="#DADADA"/>
+<path d="M137.877 14.2649C138.016 15.5427 138.993 16.0846 140.129 16.0846C141.264 16.0846 142.181 15.5816 142.181 14.6135C142.181 13.7231 141.384 13.4327 140.508 13.2589L139.272 13.0462C137.538 12.7365 136.302 11.8849 136.302 10.3176C136.302 8.57563 138.076 7.45312 140.029 7.45312C141.981 7.45312 143.653 8.47679 143.894 10.4473C143.93 10.6556 143.76 10.8568 143.536 10.8568H142.57C142.4 10.8568 142.249 10.735 142.221 10.57C142.042 9.44663 141.105 8.88538 140.069 8.88538C139.032 8.88538 138.076 9.42721 138.076 10.2982C138.076 11.0527 138.754 11.3431 139.69 11.5178L140.946 11.7305C142.659 12.0208 144.054 12.8724 144.054 14.595C144.054 16.3175 142.38 17.5177 140.168 17.5177C137.836 17.5177 136.341 16.2981 136.122 14.3629C136.094 14.1414 136.274 13.9472 136.503 13.9472H137.492C137.682 13.9472 137.848 14.0814 137.877 14.2658V14.2649Z" fill="#DADADA"/>
+</g>
+<defs>
+<clipPath id="clip0_3449_5072">
+<rect width="144" height="22" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/svgs/header/sun.svg b/src/assets/svgs/header/sun.svg
index 33f100310..4d73add7b 100644
--- a/src/assets/svgs/header/sun.svg
+++ b/src/assets/svgs/header/sun.svg
@@ -1,3 +1,3 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10 1.25C10.3452 1.25 10.625 1.52982 10.625 1.875V3.75C10.625 4.09518 10.3452 4.375 10 4.375C9.65482 4.375 9.375 4.09518 9.375 3.75V1.875C9.375 1.52982 9.65482 1.25 10 1.25ZM10 13.125C11.7259 13.125 13.125 11.7259 13.125 10C13.125 8.27411 11.7259 6.875 10 6.875C8.27411 6.875 6.875 8.27411 6.875 10C6.875 11.7259 8.27411 13.125 10 13.125ZM10 14.375C12.4162 14.375 14.375 12.4162 14.375 10C14.375 7.58375 12.4162 5.625 10 5.625C7.58375 5.625 5.625 7.58375 5.625 10C5.625 12.4162 7.58375 14.375 10 14.375ZM10.625 16.25C10.625 15.9048 10.3452 15.625 10 15.625C9.65482 15.625 9.375 15.9048 9.375 16.25V18.125C9.375 18.4702 9.65482 18.75 10 18.75C10.3452 18.75 10.625 18.4702 10.625 18.125V16.25ZM1.25 10C1.25 9.65482 1.52982 9.375 1.875 9.375H3.75C4.09518 9.375 4.375 9.65482 4.375 10C4.375 10.3452 4.09518 10.625 3.75 10.625H1.875C1.52982 10.625 1.25 10.3452 1.25 10ZM16.25 9.375C15.9048 9.375 15.625 9.65482 15.625 10C15.625 10.3452 15.9048 10.625 16.25 10.625H18.125C18.4702 10.625 18.75 10.3452 18.75 10C18.75 9.65482 18.4702 9.375 18.125 9.375H16.25ZM13.9332 6.14263C13.6891 5.89855 13.6891 5.50282 13.9332 5.25874L15.259 3.93292C15.5031 3.68884 15.8988 3.68884 16.1429 3.93292C16.3869 4.17699 16.3869 4.57272 16.1429 4.8168L14.817 6.14263C14.573 6.3867 14.1772 6.3867 13.9332 6.14263ZM16.1428 15.259L14.8169 13.9332C14.5729 13.6891 14.1771 13.6891 13.9331 13.9332C13.689 14.1772 13.689 14.573 13.9331 14.817L15.2589 16.1429C15.503 16.3869 15.8987 16.3869 16.1428 16.1429C16.3868 15.8988 16.3868 15.5031 16.1428 15.259ZM3.93315 16.1426C3.68907 15.8985 3.68907 15.5028 3.93315 15.2587L5.25898 13.9329C5.50306 13.6888 5.89878 13.6888 6.14286 13.9329C6.38694 14.177 6.38694 14.5727 6.14286 14.8168L4.81704 16.1426C4.57296 16.3867 4.17723 16.3867 3.93315 16.1426ZM4.81694 3.93315C4.57286 3.68907 4.17714 3.68907 3.93306 3.93315C3.68898 4.17723 3.68898 4.57296 3.93306 4.81704L5.25888 6.14286C5.50296 6.38694 5.89869 6.38694 6.14277 6.14286C6.38684 5.89878 6.38684 5.50306 6.14277 5.25898L4.81694 3.93315Z" fill="#FFF8F3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 1.25C10.3452 1.25 10.625 1.52982 10.625 1.875V3.75C10.625 4.09518 10.3452 4.375 10 4.375C9.65482 4.375 9.375 4.09518 9.375 3.75V1.875C9.375 1.52982 9.65482 1.25 10 1.25ZM10 13.125C11.7259 13.125 13.125 11.7259 13.125 10C13.125 8.27411 11.7259 6.875 10 6.875C8.27411 6.875 6.875 8.27411 6.875 10C6.875 11.7259 8.27411 13.125 10 13.125ZM10 14.375C12.4162 14.375 14.375 12.4162 14.375 10C14.375 7.58375 12.4162 5.625 10 5.625C7.58375 5.625 5.625 7.58375 5.625 10C5.625 12.4162 7.58375 14.375 10 14.375ZM10.625 16.25C10.625 15.9048 10.3452 15.625 10 15.625C9.65482 15.625 9.375 15.9048 9.375 16.25V18.125C9.375 18.4702 9.65482 18.75 10 18.75C10.3452 18.75 10.625 18.4702 10.625 18.125V16.25ZM1.25 10C1.25 9.65482 1.52982 9.375 1.875 9.375H3.75C4.09518 9.375 4.375 9.65482 4.375 10C4.375 10.3452 4.09518 10.625 3.75 10.625H1.875C1.52982 10.625 1.25 10.3452 1.25 10ZM16.25 9.375C15.9048 9.375 15.625 9.65482 15.625 10C15.625 10.3452 15.9048 10.625 16.25 10.625H18.125C18.4702 10.625 18.75 10.3452 18.75 10C18.75 9.65482 18.4702 9.375 18.125 9.375H16.25ZM13.9332 6.14263C13.6891 5.89855 13.6891 5.50282 13.9332 5.25874L15.259 3.93292C15.5031 3.68884 15.8988 3.68884 16.1429 3.93292C16.3869 4.17699 16.3869 4.57272 16.1429 4.8168L14.817 6.14263C14.573 6.3867 14.1772 6.3867 13.9332 6.14263ZM16.1428 15.259L14.8169 13.9332C14.5729 13.6891 14.1771 13.6891 13.9331 13.9332C13.689 14.1772 13.689 14.573 13.9331 14.817L15.2589 16.1429C15.503 16.3869 15.8987 16.3869 16.1428 16.1429C16.3868 15.8988 16.3868 15.5031 16.1428 15.259ZM3.93315 16.1426C3.68907 15.8985 3.68907 15.5028 3.93315 15.2587L5.25898 13.9329C5.50306 13.6888 5.89878 13.6888 6.14286 13.9329C6.38694 14.177 6.38694 14.5727 6.14286 14.8168L4.81704 16.1426C4.57296 16.3867 4.17723 16.3867 3.93315 16.1426ZM4.81694 3.93315C4.57286 3.68907 4.17714 3.68907 3.93306 3.93315C3.68898 4.17723 3.68898 4.57296 3.93306 4.81704L5.25888 6.14286C5.50296 6.38694 5.89869 6.38694 6.14277 6.14286C6.38684 5.89878 6.38684 5.50306 6.14277 5.25898L4.81694 3.93315Z" fill="currentColor"/>
 </svg>
diff --git a/src/components/Aside.astro b/src/components/Aside.astro
index 848d2ae64..dbbb3891b 100644
--- a/src/components/Aside.astro
+++ b/src/components/Aside.astro
@@ -21,7 +21,7 @@ const icons = {
 
 <aside class={`content ${type}`} aria-label={title}>
   <div class="icon">
-    <span class="inline-block w-[1.5rem] h-[1.5rem] text-black dark:text-white">
+    <span class="inline-block w-[1.5rem] h-[1.5rem] text-black dark:text-white-800">
       <Fragment set:html={icons[type]} />
     </span>
   </div>
diff --git a/src/components/Footer/Subscribe/EmailInput.tsx b/src/components/Footer/Subscribe/EmailInput.tsx
index b177f6914..92fff969a 100644
--- a/src/components/Footer/Subscribe/EmailInput.tsx
+++ b/src/components/Footer/Subscribe/EmailInput.tsx
@@ -32,9 +32,9 @@ const EmailInput = (props) => {
         onKeyDown={handleEnter}
         className={clsx(
           styles.inputBase,
-          "dark:text-white",
+          "dark:text-white-800",
           "dark:bg-black",
-          "dark:border-white",
+          "dark:border-white-800",
           "placeholder:text-[#dcdcdc]",
           "placeholder:dark:text-[#FFF8F366]",
           "focus:outline-none"
diff --git a/src/components/Header/Header.astro b/src/components/Header/Header.astro
index 01fcada2d..8fba2dd44 100644
--- a/src/components/Header/Header.astro
+++ b/src/components/Header/Header.astro
@@ -53,7 +53,7 @@ const section = frontmatter?.section ?? ""
       <a href={localizePath("/home")}>
         <span
           class={clsx(
-            "inline-block w-[144px] h-[22px]  dark:bg-[url('/scroll-docs-white.svg')] bg-contain bg-no-repeat bg-center",
+            "inline-block w-[144px] h-[22px]  dark:bg-[url('/scroll-docs-white-800.svg')] bg-contain bg-no-repeat bg-center",
             dark ? "bg-[url('/scroll-docs-white.svg')]" : "bg-[url('/scroll-docs.svg')]"
           )}></span>
       </a>
@@ -83,7 +83,7 @@ const section = frontmatter?.section ?? ""
         <a href="https://github.com/scroll-tech/scroll-documentation" class="github-url" target="_blank" rel="nofollow">
           <span
             class={clsx(
-              "inline-block w-[35px] h-[35px] dark:bg-[url('/assets/github-white.svg')] bg-contain bg-no-repeat bg-center",
+              "inline-block w-[35px] h-[35px] dark:bg-[url('/assets/github-white-800.svg')] bg-contain bg-no-repeat bg-center",
               dark ? "bg-[url('/assets/github-white.svg')]" : "bg-[url('/assets/github.svg')]"
             )}></span>
         </a>
@@ -113,7 +113,7 @@ const section = frontmatter?.section ?? ""
   .nav-link {
     line-height: 32px;
     padding-top: 7px;
-    @apply text-black dark:text-white;
+    @apply text-black dark:text-white-800;
     color: var(--textColor);
     white-space: nowrap;
   }
diff --git a/src/components/Header/LanguageSelector/LanguageSelector.astro b/src/components/Header/LanguageSelector/LanguageSelector.astro
index c34f94314..b950f43d4 100644
--- a/src/components/Header/LanguageSelector/LanguageSelector.astro
+++ b/src/components/Header/LanguageSelector/LanguageSelector.astro
@@ -25,8 +25,14 @@ const getLabel = (language) => {
 }
 ---
 
-<div class={clsx("language-selector", dark && "dark")}>
-  <div class="current-language">
+<div class={clsx("language-selector")}>
+  <div
+    class={clsx(
+      "current-language",
+      "text-black border-black dark:text-white-800 dark:border-white-800",
+      dark ? "text-white border-white" : ""
+    )}
+  >
     <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
       <path
         d="M12.0886 2.19173C11.899 1.99095 11.5825 1.98187 11.3817 2.17145C11.181 2.36103 11.1719 2.67748 11.3615 2.87827L12.0886 2.19173ZM9.82896 1.70578C10.0724 1.83614 10.3754 1.74448 10.5058 1.50104C10.6361 1.25761 10.5445 0.954588 10.301 0.824224L9.82896 1.70578ZM6.475 0.71L6.83644 1.05549L6.83781 1.05405L6.475 0.71ZM6.51 13.325L6.84218 12.9513L6.84158 12.9508L6.51 13.325ZM7.43 13.27L7.8006 13.6056L7.80182 13.6043L7.43 13.27ZM11.3615 2.87827C12.3774 3.95429 13 5.40282 13 7H14C14 5.13718 13.2726 3.44571 12.0886 2.19173L11.3615 2.87827ZM13 7C13 10.3139 10.3139 13 7 13V14C10.8661 14 14 10.8661 14 7H13ZM7 13C3.68614 13 1 10.3139 1 7H0C0 10.8661 3.13386 14 7 14V13ZM1 7C1 3.68614 3.68614 1 7 1V0C3.13386 0 0 3.13386 0 7H1ZM7 1C8.02607 1 8.98516 1.25391 9.82896 1.70578L10.301 0.824224C9.31484 0.296094 8.19393 0 7 0V1ZM1.50005 4.99H12.965V3.99H1.50005V4.99ZM1.49999 9.995H12.97V8.995H1.49999V9.995ZM7.81355 0.406447C7.39863 -0.00847185 6.63779 -0.188318 6.11219 0.365954L6.83781 1.05405C6.86485 1.02554 6.89025 1.0169 6.92687 1.01975C6.97276 1.02331 7.04172 1.04883 7.10645 1.11355L7.81355 0.406447ZM6.11356 0.364509C5.02397 1.5044 4 3.93397 4 7.225H5C5 4.10603 5.97603 1.9556 6.83644 1.05549L6.11356 0.364509ZM4 7.225C4 10.5231 5.07388 12.7206 6.17842 13.6992L6.84158 12.9508C6.01612 12.2194 5 10.3369 5 7.225H4ZM6.17782 13.6987C6.65963 14.127 7.3826 14.0672 7.8006 13.6056L7.0594 12.9344C6.9974 13.0028 6.90037 13.003 6.84218 12.9513L6.17782 13.6987ZM7.80182 13.6043C8.80675 12.4865 10 10.6511 10 7.23H9C9 10.3689 7.92325 11.9735 7.05818 12.9357L7.80182 13.6043ZM10 7.23C10 3.85511 8.90599 1.49888 7.81355 0.406447L7.10645 1.11355C7.96401 1.97112 9 4.04489 9 7.23H10Z"
@@ -35,14 +41,23 @@ const getLabel = (language) => {
     <span>{getLabel(supportedLanguages[0])}</span>
   </div>
   <div class="options-modal">
-    <ul class="options-list">
+    <ul
+      class={clsx(
+        "options-list",
+        "bg-pure-white  border-black dark:border-white-800 dark:bg-black",
+        dark ? "!bg-pure-black !border-white dark:!border-white-800" : ""
+      )}
+    >
       {
         supportedLanguages.map((supportedLanguage, idx) => {
           let value = localizePath(pathname, supportedLanguage)
           const label = getLabel(supportedLanguage)
-
           return (
-            <li value={value} onclick={`if ("${value}" !== window.location.pathname) location.href = "${value}";`}>
+            <li
+              class={clsx("text-black dark:text-white-800", dark ? "text-white dark:text-white-800" : "")}
+              value={value}
+              onclick={`if ("${value}" !== window.location.pathname) location.href = "${value}";`}
+            >
               {idx === 0 ? (
                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                   <rect x="0.5" y="0.5" width="15" height="15" rx="7.5" stroke="currentColor" />
@@ -88,7 +103,6 @@ const getLabel = (language) => {
     justify-content: space-between;
     align-items: center;
     cursor: pointer;
-    @apply text-black dark:text-white border-black dark:border-white;
   }
 
   .options-list {
@@ -107,7 +121,6 @@ const getLabel = (language) => {
     justify-content: center;
     align-items: center;
     flex-direction: column;
-    @apply bg-pure-white dark:bg-black border-black dark:border-white;
   }
 
   .options-list li {
@@ -117,7 +130,6 @@ const getLabel = (language) => {
     align-items: center;
     flex-direction: row;
     padding: 8px 0px;
-    @apply text-black dark:text-white;
   }
 
   .options-list li svg,
diff --git a/src/components/Header/Search/Search.tsx b/src/components/Header/Search/Search.tsx
index 9f7af0010..76d736187 100644
--- a/src/components/Header/Search/Search.tsx
+++ b/src/components/Header/Search/Search.tsx
@@ -46,9 +46,9 @@ export default function Search() {
         className={clsx(
           styles.searchInput,
           "dark:bg-dark-normal",
-          "dark:text-white",
-          "hover:dark:text-white",
-          "focus:dark:text-white"
+          "dark:text-white-800",
+          "hover:dark:text-white-800",
+          "focus:dark:text-white-800"
         )}
       >
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
diff --git a/src/components/Header/Search/SearchInput.tsx b/src/components/Header/Search/SearchInput.tsx
index 1c6ae4564..a7368b637 100644
--- a/src/components/Header/Search/SearchInput.tsx
+++ b/src/components/Header/Search/SearchInput.tsx
@@ -38,8 +38,8 @@ export const SearchInput = ({ size, onClose }: { onClose: () => void }) => {
           styles.input,
           styles[size],
           ".focus-visible",
-          "dark:text-white",
-          "dark:border-white",
+          "dark:text-white-800",
+          "dark:border-white-800",
           "dark:!bg-[url(/assets/search-white.svg)]"
         )}
         onBlur={onClose}
diff --git a/src/components/Header/Search/SearchModal.tsx b/src/components/Header/Search/SearchModal.tsx
index fa01b48f1..236df8582 100644
--- a/src/components/Header/Search/SearchModal.tsx
+++ b/src/components/Header/Search/SearchModal.tsx
@@ -47,7 +47,7 @@ function EmptyQueryBoundary({ children, size, fallback }) {
                   <a
                     style={{ padding: "var(--space-1x) var(--space-2x)" }}
                     href={article.url}
-                    className={clsx(styles.hit, "paragraph-200", "recommended-match-hit", "dark:text-white")}
+                    className={clsx(styles.hit, "paragraph-200", "recommended-match-hit", "dark:text-white-800")}
                   >
                     {article.title}
                   </a>
@@ -67,7 +67,7 @@ function EmptyQueryBoundary({ children, size, fallback }) {
                       <a
                         style={{ padding: "var(--space-1x) var(--space-2x)" }}
                         href={article.url}
-                        className={clsx(styles.hit, "paragraph-200", "recently-viewed-match-hit", "dark:text-white")}
+                        className={clsx(styles.hit, "paragraph-200", "recently-viewed-match-hit", "dark:text-white-800")}
                       >
                         {article.title}
                       </a>
@@ -121,7 +121,7 @@ function CustomHits({ title, hitClassName, ...props }: UseHitsProps & { title: s
               <a
                 // style={{ padding: "var(--space-1x) var(--space-2x)" }}
                 href={hit.url}
-                className={clsx(styles.hit, hitClassName, "paragraph-200 dark:text-white")}
+                className={clsx(styles.hit, hitClassName, "paragraph-200 dark:text-white-800")}
                 dangerouslySetInnerHTML={{
                   __html: hit._highlightResult.title.value,
                 }}
diff --git a/src/components/Header/SidebarToggle.tsx b/src/components/Header/SidebarToggle.tsx
index 8009e8cec..caf2e2cb8 100644
--- a/src/components/Header/SidebarToggle.tsx
+++ b/src/components/Header/SidebarToggle.tsx
@@ -21,7 +21,7 @@ const MenuToggle: FunctionalComponent<{ dark: boolean }> = ({ dark }) => {
       type="button"
       aria-pressed={sidebarShown ? "true" : "false"}
       id="menu-toggle"
-      className={clsx(styles.button, "text-black", dark && "text-white", "dark:text-white")}
+      className={clsx(styles.button, "text-black", dark && "text-white", "dark:text-white-800")}
       onClick={() => setSidebarShown(!sidebarShown)}
     >
       {sidebarShown ? (
diff --git a/src/components/Header/ThemeModeToggle.tsx b/src/components/Header/ThemeModeToggle.tsx
index 5dab23c86..777d63a61 100644
--- a/src/components/Header/ThemeModeToggle.tsx
+++ b/src/components/Header/ThemeModeToggle.tsx
@@ -45,7 +45,7 @@ const ThemeModeToggle = (props) => {
     <button
       id="themeModeToggle"
       className={clsx(
-        "relative w-[35px] h-[35px] rounded-[5px] border-solid bg-transparent border border-black dark:border-white text-black dark:text-white",
+        "relative w-[35px] h-[35px] rounded-[5px] border-solid bg-transparent border border-black dark:border-white-800 text-black dark:text-white-800",
         dark && "border-white text-white"
       )}
       onClick={handleToggleThemeMode}
diff --git a/src/components/LeftSidebar/LeftSidebar.astro b/src/components/LeftSidebar/LeftSidebar.astro
index c81ccff34..f17e91cdd 100644
--- a/src/components/LeftSidebar/LeftSidebar.astro
+++ b/src/components/LeftSidebar/LeftSidebar.astro
@@ -135,7 +135,7 @@ const currentPageMatch = removeSlashes(currentPage.slice(1))
   .menu-separator {
     width: calc(100vw - 40px);
 
-    @apply border-0 border-t-[1px] border-solid border-black dark:border-white;
+    @apply border-0 border-t-[1px] border-solid border-black dark:border-white-800;
   }
   .sidebar-nav-groups.nav-groups > :first-child {
     @apply pt-[15px];
diff --git a/src/components/NavCard.astro b/src/components/NavCard.astro
index f91594a62..0845b8a84 100644
--- a/src/components/NavCard.astro
+++ b/src/components/NavCard.astro
@@ -20,9 +20,9 @@ const { icon, name, content, link } = Astro.props as Props
   </span>
   <span class="navs-item-title">{name}</span>
   <span class="navs-item-content">{content}</span>
-  <a class="navs-item-link text-[#C58D49] dark:text-white" href={link}>
+  <a class="navs-item-link text-[#C58D49] dark:text-white-800" href={link}>
     {t("ui.readMore")}
-    <span class="link-icon text-[#C58D49] dark:text-white">
+    <span class="link-icon text-[#C58D49] dark:text-white-800">
       <Fragment set:html={LinkSvg} />
     </span>
   </a>
@@ -42,7 +42,7 @@ const { icon, name, content, link } = Astro.props as Props
     width: 35px;
     height: 35px;
     align-items: center;
-    @apply text-black dark:text-white;
+    @apply text-black dark:text-white-800;
   }
 
   .navs-item-title {
diff --git a/src/components/PageContent/Feedback.tsx b/src/components/PageContent/Feedback.tsx
index b5f538837..7abbb47af 100644
--- a/src/components/PageContent/Feedback.tsx
+++ b/src/components/PageContent/Feedback.tsx
@@ -112,7 +112,7 @@ export const Feedback = () => {
           }}
         >
           {isSent ? (
-            <div className="text-dark dark:text-white" style={{ fontSize: "1rem", lineHeight: "normal" }}>
+            <div className="text-dark dark:text-white-800" style={{ fontSize: "1rem", lineHeight: "normal" }}>
               We appreciate your feedback! 🤎
             </div>
           ) : (
@@ -123,7 +123,7 @@ export const Feedback = () => {
             >
               <label
                 htmlFor="name"
-                className="text-dark dark:text-white"
+                className="text-dark dark:text-white-800"
                 style={{ fontSize: "1rem", lineHeight: "normal", marginBottom: "16px" }}
               >
                 Tell us more about your experience.
@@ -132,7 +132,7 @@ export const Feedback = () => {
                 <textarea
                   name="msg"
                   rows="4"
-                  className="text-black dark:text-white border-black dark:border-white bg-pure-white dark:bg-black"
+                  className="text-black dark:text-white-800 border-black dark:border-white-800 bg-pure-white dark:bg-black"
                   style={{
                     padding: "15px",
                     caretColor: "#C4C4C4",
diff --git a/src/components/SectionHeader/index.astro b/src/components/SectionHeader/index.astro
index 4a2e88b39..64bd8c332 100644
--- a/src/components/SectionHeader/index.astro
+++ b/src/components/SectionHeader/index.astro
@@ -7,7 +7,7 @@ const { title, content } = Astro.props as Props
 ---
 
 <>
-  <p class="title">{title}</p>
+  <h1 class="title">{title}</h1>
   <p class="content">{content}</p>
 </>
 
diff --git a/src/components/Tabs/Tabs.module.css b/src/components/Tabs/Tabs.module.css
index 2a1c43175..e080cd271 100644
--- a/src/components/Tabs/Tabs.module.css
+++ b/src/components/Tabs/Tabs.module.css
@@ -11,7 +11,7 @@
 
 button.primary,
 button.contentTabPrimary {
-  @apply text-link border-link border-0 border-b-4 border-solid;
+  @apply !text-link border-link border-0 border-b-4 border-solid;
 }
 
 button.secondary {
diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
index 664790ede..c1aa53361 100644
--- a/src/components/Tabs/Tabs.tsx
+++ b/src/components/Tabs/Tabs.tsx
@@ -65,7 +65,7 @@ export function Tabs({ sharedStore, ...slots }: Props) {
 
   return (
     <div class={styles.container}>
-      <div role="tablist" class={styles.tablist} onKeyDown={moveFocus}>
+      <div role="tablist" class={clsx(styles.tablist, 'dark:border-white-800')} onKeyDown={moveFocus}>
         {tabs.map(([key, content]) => (
           <button
             ref={(el) => (tabButtonRefs.current[key] = el)}
@@ -79,7 +79,11 @@ export function Tabs({ sharedStore, ...slots }: Props) {
             data-astro-tab
             id={key}
             key={key}
-            class={clsx(curr === getBaseKeyFromTab(key) ? styles.primary : styles.secondary, styles.tab)}
+            class={clsx(
+              curr === getBaseKeyFromTab(key) ? styles.primary : styles.secondary,
+              styles.tab,
+              "dark:text-white-800"
+            )}
           >
             {content}
           </button>
diff --git a/src/components/Tabs/TabsContent.tsx b/src/components/Tabs/TabsContent.tsx
index 5742968fe..b536d8838 100644
--- a/src/components/Tabs/TabsContent.tsx
+++ b/src/components/Tabs/TabsContent.tsx
@@ -64,7 +64,7 @@ export function TabsContent({ sharedStore, ...slots }: Props) {
 
   return (
     <div className={styles.contentContainer}>
-      <div role="tablist" class={styles.tablist} onKeyDown={moveFocus}>
+      <div role="tablist" class={clsx(styles.tablist, "dark:border-white-800")} onKeyDown={moveFocus}>
         {tabs.map(([key, content]) => (
           <button
             ref={(el) => (tabButtonRefs.current[key] = el)}
@@ -80,7 +80,8 @@ export function TabsContent({ sharedStore, ...slots }: Props) {
             key={key}
             class={clsx(
               curr === getBaseKeyFromTab(key) ? styles.contentTabPrimary : styles.contentTabSecondary,
-              styles.contentTab
+              styles.contentTab,
+              "dark:text-white-800"
             )}
           >
             {content}
@@ -100,4 +101,4 @@ export function TabsContent({ sharedStore, ...slots }: Props) {
       ))}
     </div>
   )
-}
\ No newline at end of file
+}
diff --git a/src/components/ToggleElement.astro b/src/components/ToggleElement.astro
index e2a53d2b5..58ba96588 100644
--- a/src/components/ToggleElement.astro
+++ b/src/components/ToggleElement.astro
@@ -50,7 +50,7 @@ const anchorHash = anchor.replace(/\s+/g, "-")
     overflow: hidden;
     font-weight: 600;
     padding-left: 0.3rem;
-    @apply text-black dark:text-white border-primary dark:border-dark-primary;
+    @apply text-black dark:text-white-800 border-primary dark:border-dark-primary;
   }
 
   details:hover {
diff --git a/src/components/Tooling/Content/AdditionalInfo/AdditionalInfo.tsx b/src/components/Tooling/Content/AdditionalInfo/AdditionalInfo.tsx
index e03c8333f..5b5dda0f0 100644
--- a/src/components/Tooling/Content/AdditionalInfo/AdditionalInfo.tsx
+++ b/src/components/Tooling/Content/AdditionalInfo/AdditionalInfo.tsx
@@ -38,7 +38,7 @@ const AdditionalInfo = ({ data, selectedTool, onClose }) => {
 
           {status === Status.HAS_ADDITIONAL_INFO && (
             <div className={clsx(styles.infoBox, 'bg-[#ffffff] dark:bg-black')}>
-              <div className={clsx(styles.title, "text-[#101010] dark:text-white")}>{selectedTool.remarkPluginFrontmatter.name}</div>
+              <div className={clsx(styles.title, "text-[#101010] dark:text-white-800")}>{selectedTool.remarkPluginFrontmatter.name}</div>
               <div className={styles.content}>{data}</div>
             </div>
           )}
diff --git a/src/components/Tooling/Content/Category/Category.tsx b/src/components/Tooling/Content/Category/Category.tsx
index 4d61e7218..df0b819af 100644
--- a/src/components/Tooling/Content/Category/Category.tsx
+++ b/src/components/Tooling/Content/Category/Category.tsx
@@ -11,7 +11,7 @@ const Category = ({ categories, value, onChange }) => {
             styles.item,
             value.includes(category)
             ? "text-white bg-black border-white dark:text-black dark:bg-white  dark:border-black"
-            : "border-black bg-[#ffffff] dark:bg-black dark:border-white",
+            : "border-black bg-[#ffffff] dark:bg-black dark:border-white-800",
           )}
           onClick={() => onChange(category)}
         >
diff --git a/src/components/Tooling/Content/List/List.tsx b/src/components/Tooling/Content/List/List.tsx
index 06a5b6335..9895bc14d 100644
--- a/src/components/Tooling/Content/List/List.tsx
+++ b/src/components/Tooling/Content/List/List.tsx
@@ -29,7 +29,7 @@ const List = ({ tools, onChange, selectedTool }) => {
           />
           <div className={styles.toolInfo}>
             <div className="flex justify-between items-center mb-[7px]">
-              <div className={clsx(styles.toolName, "dark:text-white dark:hover:text-white")}>
+              <div className={clsx(styles.toolName, "dark:text-white-800 dark:hover:text-white")}>
                 {tool.remarkPluginFrontmatter.name}
                 <svg
                   className="ml-[8px] mr-[25px] hover:opacity-70"
diff --git a/src/pages/en/home/ConnectUs.astro b/src/pages/en/home/ConnectUs.astro
index 7b0f46139..a9b3775c9 100644
--- a/src/pages/en/home/ConnectUs.astro
+++ b/src/pages/en/home/ConnectUs.astro
@@ -91,7 +91,7 @@ const mediaList = [
     height: 23px;
     background-size: contain;
     align-self: flex-end;
-    @apply text-black dark:text-white;
+    @apply text-black dark:text-white-800;
   }
 
   .media-item-icon {
diff --git a/src/pages/en/home/QuickStart.astro b/src/pages/en/home/QuickStart.astro
index 5c13bf51e..5f1626b35 100644
--- a/src/pages/en/home/QuickStart.astro
+++ b/src/pages/en/home/QuickStart.astro
@@ -8,7 +8,7 @@ const toolList = [
   { icon: "/svgs/Remix.svg", name: "Remix", link: "https://remix-project.org/", quickstartAnchor: "remix-web-ide" },
   {
     icon: EtherSvg,
-    color: "text-[#2A4B78] dark:text-white",
+    color: "text-[#2A4B78] dark:text-white-800",
     name: "EthersJS",
     link: "https://ethers.org/",
     quickstartAnchor: "ethersjs",
diff --git a/src/pages/en/home/index.astro b/src/pages/en/home/index.astro
index ae44695e9..25f4b7850 100644
--- a/src/pages/en/home/index.astro
+++ b/src/pages/en/home/index.astro
@@ -12,7 +12,7 @@ changeLanguage("en")
 <HomeLayout>
   <div class="header bg-black">
     <div class="inner">
-      <p class="header-title text-white">Welcome to<br /> Scroll Documentation</p>
+      <p class="header-title text-white dark:!text-white-900">Welcome to<br /> Scroll Documentation</p>
       <Search client:visible />
     </div>
   </div>
diff --git a/src/pages/es/home/ConnectUs.astro b/src/pages/es/home/ConnectUs.astro
index b16d3d88b..59d17bb48 100644
--- a/src/pages/es/home/ConnectUs.astro
+++ b/src/pages/es/home/ConnectUs.astro
@@ -91,7 +91,7 @@ const mediaList = [
     height: 23px;
     background-size: contain;
     align-self: flex-end;
-    @apply text-black dark:text-white;
+    @apply text-black dark:text-white-800;
   }
 
   .media-item-icon {
diff --git a/src/pages/es/home/QuickStart.astro b/src/pages/es/home/QuickStart.astro
index f36f5590e..3afbc6469 100644
--- a/src/pages/es/home/QuickStart.astro
+++ b/src/pages/es/home/QuickStart.astro
@@ -8,7 +8,7 @@ const toolList = [
   { icon: "/svgs/Remix.svg", name: "Remix", link: "https://remix-project.org/", quickstartAnchor: "remix-web-ide" },
   {
     icon: EtherSvg,
-    color: "text-[#2A4B78] dark:text-white",
+    color: "text-[#2A4B78] dark:text-white-800",
     name: "EthersJS",
     link: "https://ethers.org/",
     quickstartAnchor: "ethersjs",
diff --git a/src/pages/es/home/index.astro b/src/pages/es/home/index.astro
index 9fa12781a..43ac7830f 100644
--- a/src/pages/es/home/index.astro
+++ b/src/pages/es/home/index.astro
@@ -12,7 +12,7 @@ changeLanguage("es")
 <HomeLayout>
   <div class="header bg-black">
     <div class="inner">
-      <p class="header-title text-white">Bienvenido a la<br /> Documentación de Scroll</p>
+      <p class="header-title text-white dark:!text-white-900">Bienvenido a la<br /> Documentación de Scroll</p>
       <Search client:visible />
     </div>
   </div>
diff --git a/src/pages/tr/home/ConnectUs.astro b/src/pages/tr/home/ConnectUs.astro
index bcc78345d..d532ef984 100644
--- a/src/pages/tr/home/ConnectUs.astro
+++ b/src/pages/tr/home/ConnectUs.astro
@@ -91,7 +91,7 @@ const mediaList = [
     height: 23px;
     background-size: contain;
     align-self: flex-end;
-    @apply text-black dark:text-white;
+    @apply text-black dark:text-white-800;
   }
 
   .media-item-icon {
diff --git a/src/pages/tr/home/QuickStart.astro b/src/pages/tr/home/QuickStart.astro
index cf3aaf0e2..cb7903fcf 100644
--- a/src/pages/tr/home/QuickStart.astro
+++ b/src/pages/tr/home/QuickStart.astro
@@ -8,7 +8,7 @@ const toolList = [
   { icon: "/svgs/Remix.svg", name: "Remix", link: "https://remix-project.org/", quickstartAnchor: "remix-web-ide" },
   {
     icon: EtherSvg,
-    color: "text-[#2A4B78] dark:text-white",
+    color: "text-[#2A4B78] dark:text-white-800",
     name: "EthersJS",
     link: "https://ethers.org/",
     quickstartAnchor: "ethersjs",
diff --git a/src/pages/tr/home/index.astro b/src/pages/tr/home/index.astro
index dfab9cde7..b9c4b6a7a 100644
--- a/src/pages/tr/home/index.astro
+++ b/src/pages/tr/home/index.astro
@@ -12,7 +12,7 @@ changeLanguage("tr")
 <HomeLayout>
   <div class="header bg-black">
     <div class="inner">
-      <p class="header-title text-white">Scroll Dokümantasyonu'na <br /> Hoş Geldiniz!</p>
+      <p class="header-title text-white dark:!text-white-900">Scroll Dokümantasyonu'na <br /> Hoş Geldiniz!</p>
       <Search client:visible />
     </div>
   </div>
diff --git a/src/pages/zh/home/ConnectUs.astro b/src/pages/zh/home/ConnectUs.astro
index 2e091e244..6fcec127e 100644
--- a/src/pages/zh/home/ConnectUs.astro
+++ b/src/pages/zh/home/ConnectUs.astro
@@ -88,7 +88,7 @@ const mediaList = [
     height: 23px;
     background-size: contain;
     align-self: flex-end;
-    @apply text-black dark:text-white;
+    @apply text-black dark:text-white-800;
   }
 
   .media-item-icon {
diff --git a/src/pages/zh/home/QuickStart.astro b/src/pages/zh/home/QuickStart.astro
index 7bbb6f7c8..feba03658 100644
--- a/src/pages/zh/home/QuickStart.astro
+++ b/src/pages/zh/home/QuickStart.astro
@@ -8,7 +8,7 @@ const toolList = [
   { icon: "/svgs/Remix.svg", name: "Remix", link: "https://remix-project.org/", quickstartAnchor: "remix-web-ide" },
   {
     icon: EtherSvg,
-    color: "text-[#2A4B78] dark:text-white",
+    color: "text-[#2A4B78] dark:text-white-800",
     name: "EthersJS",
     link: "https://ethers.org/",
     quickstartAnchor: "ethersjs",
diff --git a/src/pages/zh/home/index.astro b/src/pages/zh/home/index.astro
index 69913ad1f..6e9c68739 100644
--- a/src/pages/zh/home/index.astro
+++ b/src/pages/zh/home/index.astro
@@ -12,7 +12,7 @@ changeLanguage("zh")
 <HomeLayout>
   <div class="header bg-black">
     <div class="inner">
-      <p class="header-title text-white">欢迎来到<br /> Scroll 的文档</p>
+      <p class="header-title text-white dark:!text-white-900">欢迎来到<br /> Scroll 的文档</p>
       <Search client:visible />
     </div>
   </div>
diff --git a/src/styles/design-system/components/typography.css b/src/styles/design-system/components/typography.css
index 6b2d37987..c210912b3 100644
--- a/src/styles/design-system/components/typography.css
+++ b/src/styles/design-system/components/typography.css
@@ -57,7 +57,11 @@
 
 /* Paragraph  */
 :where(body, p) {
-  @apply leading-[1.5] font-normal font-text text-black dark:text-white tracking-[0.09px];
+  @apply leading-[1.5] font-normal font-text text-black dark:text-white-800 tracking-[0.09px];
+}
+
+:where(h1) {
+  @apply dark:text-white-900;
 }
 
 :where(p) {
@@ -66,7 +70,7 @@
 
 /* Text  */
 :where(span, label) {
-  @apply font-text font-normal text-black dark:text-white leading-[1rem] text-[0.875rem];
+  @apply font-text font-normal text-black dark:text-white-800 leading-[1rem] text-[0.875rem];
 }
 
 :where(button, input, select, textarea) {
@@ -77,7 +81,7 @@
 
 /* Heading styles */
 :where(.heading, .heading-100, .heading-200, .heading-300, .heading-400, .heading-500, .heading-600) {
-  @apply font-text leading-[1.3] font-medium text-black dark:text-white;
+  @apply font-text leading-[1.3] font-medium text-black dark:text-white-800;
 }
 
 :where(.heading-100) {
diff --git a/src/styles/index.css b/src/styles/index.css
index 3550e9363..e9ff59c02 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -210,7 +210,7 @@ table {
   margin: 0;
   border-collapse: collapse;
   line-height: 2;
-  @apply text-black dark:text-white font-text border-none bg-pure-white dark:bg-black;
+  @apply text-black dark:text-white-800 font-text border-none bg-pure-white dark:bg-black;
   border-radius: 10px;
   position: relative;
   z-index: 1;
@@ -245,7 +245,7 @@ table code {
 
 th {
   font-weight: bold;
-  @apply text-black dark:text-white;
+  @apply text-black dark:text-white-800;
 }
 td,
 th {
@@ -300,7 +300,7 @@ h2.heading {
   /* margin-left: 1rem; */
   /* border-color: var(--black-100); */
 
-  @apply border-0 border-l-[4px] border-solid border-black dark:border-white;
+  @apply border-0 border-l-[4px] border-solid border-black dark:border-white-800;
 }
 
 .header-link.active,
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 4cb08cb15..ce8668bdf 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -24,7 +24,7 @@ module.exports = {
       },
       backgroundColor: {
         normal: "#FFF0DD",
-        "dark-normal": "#262626",
+        "dark-normal": "#1D1D1D",
         highlight: "#FFDEB5",
         "dark-highlight": "#3b3b3b",
         "callout-note": "#FFF8F3",
@@ -171,7 +171,13 @@ module.exports = {
 
         // theme
         black: "#101010",
-        white: "#FFF8F3",
+        // white: "#FFF8F3",
+
+        white: {
+          DEFAULT: "#FFF8F3",
+          800: "#DADADA",
+          900: "#EDEDED",
+        },
 
         "pure-black": "#000",
         "pure-white": "#fff",