diff --git a/public/assets/hackthehill-logo.svg b/public/assets/hackthehill-logo.svg
index 52ebea67..2cc4c64d 100644
--- a/public/assets/hackthehill-logo.svg
+++ b/public/assets/hackthehill-logo.svg
@@ -1 +1,35 @@
-<svg width="137" height="84" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M85.5 5.5h-.2v3h.2v-3ZM91.6 44.3H79.3V75h12.3V44.3ZM91.6 30.5H79.3v12.3h12.3V30.5Z" fill="#5C71AD"/><path d="M77 42.8h16.9l-.9 1.5H78l-1-1.5Z" fill="#3B4779"/><path d="M78.8 32.4c.2 0 .3-.1.3-.3 0-.2-.1-.3-.3-.3-.2 0-.3.1-.3.3 0 .1.1.3.3.3ZM92.1 32.4c.2 0 .3-.1.3-.3 0-.2-.1-.3-.3-.3-.2 0-.3.1-.3.3 0 .1.1.3.3.3Z" fill="#5C71AD"/><path d="m85.4 8.5 6.2 22H79.3l6.1-22Z" fill="#3B4779"/><path d="M86.1 7.7h-1.3v3h1.3v-3Z" fill="#3B4779"/><path d="M92.9 35.2h-1.7v7.6h1.7v-7.6ZM79.7 35.2H78v7.6h1.7v-7.6Z" fill="#BFCFF6"/><path d="M81.9 52.3c.2 0 .4-1.4.4-3.2 0-1.8-.2-3.2-.4-3.2s-.4 1.4-.4 3.2c0 1.8.2 3.2.4 3.2ZM84.2 52.3c.2 0 .4-1.4.4-3.2 0-1.8-.2-3.2-.4-3.2s-.4 1.4-.4 3.2c0 1.8.2 3.2.4 3.2ZM88.7 52.3c.2 0 .4-1.4.4-3.2 0-1.8-.2-3.2-.4-3.2s-.4 1.4-.4 3.2c0 1.8.2 3.2.4 3.2ZM86.5 52.3c.2 0 .4-1.4.4-3.2 0-1.8-.2-3.2-.4-3.2s-.4 1.4-.4 3.2c0 1.8.2 3.2.4 3.2Z" fill="#fff"/><path d="M89.3 3h-4v2.5h4V3Z" fill="#5C71AD"/><path d="m78.8 31.8-.9 3.6h1.8l-.9-3.6ZM92.1 31.8l-.9 3.6H93l-.9-3.6Z" fill="#3B4779"/><path d="M85.5 41.8c2.8 0 5.1-2.3 5.1-5.1s-2.3-5.1-5.1-5.1-5.1 2.3-5.1 5.1c0 2.9 2.3 5.1 5.1 5.1Z" fill="#BFCFF6"/><path d="M85.5 41.1c2.4 0 4.4-2 4.4-4.4 0-2.4-2-4.4-4.4-4.4-2.4 0-4.4 2-4.4 4.4 0 2.4 2 4.4 4.4 4.4Z" fill="#fff"/><path d="M85.4 37.3c.3 0 .5-.2.5-.5s-.2-.5-.5-.5-.4.3-.4.5.2.5.4.5Z" fill="#5C71AD"/><path d="m85.4 36.8-2 1.4M85.4 36.8l2.4 2.1" stroke="#5C71AD"/><path d="M73.3 75V41.6c0-9.4-6.7-15.1-16.4-15.1-6.3 0-12.1 3.2-13.9 7.4V10.5H30.5V75H43V47.9c0-6.3 3.5-11.5 9.7-11.5 5.7 0 8.1 2.2 8.1 9.3V75h12.5ZM110 75V10.5H97.5V75H110Zm17.7 0V10.5h-12.5V75h12.5Z" fill="#3B4779"/><path d="M26.6 60.2H16.5c-2.9 0-4.6 2.3-4.6 5.7 0 2.2 1 4.2 2.2 4.8H7V75h19.6v-4.3h-8.2c-1.9 0-3.5-1.2-3.5-3.4 0-2 .7-2.8 2.8-2.8h8.9v-4.3Zm-5.4-11.9c1.7 0 3.1 1.7 3.1 3.9 0 1.4-.5 2.1-1.6 2.1-1.2 0-1.8-.8-2.2-3.3-.3-1.6-.5-2.4-.8-2.8l1.5.1Zm5.4-4.3h-9.1c-3.6 0-5.7 1.8-5.7 7 0 5.3 2.1 7.1 5.1 7.2v-4c-1.3-.2-2.1-1-2.1-3 0-1.7.6-2.8 1.5-2.8 1 0 1.4.6 1.6 2.8.5 4.4 1 7.5 5.1 7.5 2.3 0 3.9-1.7 3.9-5.5 0-2.2-.7-3.9-1.7-5 .4 0 .9-.1 1.3-.3V44h.1Zm-5.2-12.3c1.5.2 2.4 1.5 2.4 3.2 0 1.7-1.5 3.2-4.6 3.2-3.1 0-4.2-1.5-4.2-3.4 0-1.6.9-2.9 2.4-3.1v-4.4c-3.4.3-5.5 3.2-5.5 7.4 0 4.6 2.2 7.7 7.4 7.7s7.7-3.1 7.7-7.5c0-4-2.2-7.1-5.6-7.5v4.4Zm5.2-20.6-9.1 5.4-5.2-5.5v5.3l5.5 5.4H7V26h19.6v-4.4H22l-1.9-2.1 6.5-3.6v-4.8ZM50.9 17.3c0 .8-.3 1.3-1.1 1.3-.7 0-1.1-.5-1.1-1.3v-2.7h3.8v-1.2h-3.8v-1.7H47v5.8c0 1.4.8 2.6 2.8 2.6 2 0 2.8-1.2 2.8-2.6v-1.8h-1.7v1.6Zm8.8 2.5v-4.6c0-1.3-1-2.1-2.4-2.1-.9 0-1.8.4-2.1 1V11h-1.8v8.8h1.8v-3.7c0-.9.5-1.6 1.4-1.6.8 0 1.2.3 1.2 1.3v4h1.9Zm2.6-3.8c.1-.9.7-1.4 1.4-1.4s1.4.5 1.4 1.4h-2.8Zm4.7 1c0-2.6-1.1-3.8-3.3-3.8-2.2 0-3.4 1.3-3.4 3.3 0 2.3 1.2 3.5 3.5 3.5 1.5 0 2.6-.7 3.1-2.1H65c-.1.4-.7.7-1.2.7-.9 0-1.5-.6-1.6-1.6H67Z" fill="#5C71AD"/></svg>
\ No newline at end of file
+<svg width="65" height="39" viewBox="0 0 65 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1_211)">
+<path d="M42.2305 1.37646H42.1657V3.01512H42.2954V1.37646H42.2305Z" fill="#C11F25"/>
+<path d="M45.5389 22.4168H38.9221V39.0655H45.5389V22.4168Z" fill="#C11F25"/>
+<path d="M45.5389 14.879H38.9221V21.5647H45.5389V14.879Z" fill="#C11F25"/>
+<path d="M37.6896 21.5647H46.7715L46.3174 22.3512H38.2086L37.6896 21.5647Z" fill="#84010B"/>
+<path d="M38.6627 15.9277C38.7924 15.9277 38.7924 15.8622 38.7924 15.7967C38.7924 15.6656 38.7275 15.6656 38.6627 15.6656C38.5978 15.6656 38.5329 15.7311 38.5329 15.7967C38.4681 15.7967 38.5329 15.9277 38.6627 15.9277Z" fill="#C11F25"/>
+<path d="M45.7984 15.9277C45.9281 15.9277 45.9282 15.8622 45.9282 15.7967C45.9282 15.6656 45.8633 15.6656 45.7984 15.6656C45.7335 15.6656 45.6687 15.7311 45.6687 15.7967C45.6687 15.7967 45.7335 15.9277 45.7984 15.9277Z" fill="#C11F25"/>
+<path d="M42.2305 2.94958L45.5389 14.879H38.9221L42.2305 2.94958Z" fill="#84010B"/>
+<path d="M42.5549 2.5563H41.8413V4.19496H42.5549V2.5563Z" fill="#84010B"/>
+<path d="M46.2525 17.4353H45.3443V21.5647H46.2525V17.4353Z" fill="#F6BFBF"/>
+<path d="M39.1168 17.4353H38.2086V21.5647H39.1168V17.4353Z" fill="#F6BFBF"/>
+<path d="M40.3493 26.7428C40.4791 26.7428 40.5439 25.9563 40.5439 25.0386C40.5439 24.0555 40.4142 23.3344 40.3493 23.3344C40.2196 23.3344 40.1547 24.121 40.1547 25.0386C40.0898 25.9563 40.2196 26.7428 40.3493 26.7428Z" fill="#EEE4D4"/>
+<path d="M41.5818 26.7428C41.7116 26.7428 41.7764 25.9563 41.7764 25.0386C41.7764 24.0555 41.6467 23.3344 41.5818 23.3344C41.517 23.3344 41.3872 24.121 41.3872 25.0386C41.3223 25.9563 41.4521 26.7428 41.5818 26.7428Z" fill="#EEE4D4"/>
+<path d="M43.982 26.7428C44.1118 26.7428 44.1766 25.9563 44.1766 25.0386C44.1766 24.0555 44.0469 23.3344 43.982 23.3344C43.9172 23.3344 43.7874 24.121 43.7874 25.0386C43.7874 25.9563 43.8523 26.7428 43.982 26.7428Z" fill="#EEE4D4"/>
+<path d="M42.8144 26.7428C42.9441 26.7428 43.009 25.9563 43.009 25.0386C43.009 24.0555 42.8792 23.3344 42.8144 23.3344C42.7495 23.3344 42.6198 24.121 42.6198 25.0386C42.5549 25.9563 42.6846 26.7428 42.8144 26.7428Z" fill="#EEE4D4"/>
+<path d="M44.3064 0H42.1657V1.37647H44.3064V0Z" fill="#C11F25"/>
+<path d="M38.6627 15.6L38.2086 17.5664H39.1816L38.6627 15.6Z" fill="#84010B"/>
+<path d="M45.7984 15.6L45.3443 17.5664H46.3174L45.7984 15.6Z" fill="#84010B"/>
+<path d="M42.2305 21.0403C43.7225 21.0403 44.9551 19.795 44.9551 18.2874C44.9551 16.7798 43.7225 15.5345 42.2305 15.5345C40.7385 15.5345 39.506 16.7798 39.506 18.2874C39.506 19.8605 40.7385 21.0403 42.2305 21.0403Z" fill="#F6BFBF"/>
+<path d="M42.2306 20.6471C43.528 20.6471 44.6308 19.5328 44.6308 18.2874C44.6308 16.9765 43.528 15.9277 42.2306 15.9277C40.9331 15.9277 39.8304 17.042 39.8304 18.2874C39.8952 19.5983 40.998 20.6471 42.2306 20.6471Z" fill="#EEE4D4"/>
+<path d="M42.2305 18.6151C42.3603 18.6151 42.49 18.484 42.49 18.3529C42.49 18.2219 42.3603 18.0908 42.2305 18.0908C42.1008 18.0908 42.0359 18.2219 42.0359 18.3529C41.9711 18.4185 42.1008 18.6151 42.2305 18.6151Z" fill="#C11F25"/>
+<path d="M42.2305 18.3529L41.1277 19.1395" stroke="#C11F25" stroke-width="0.758"/>
+<path d="M42.2305 18.3529L43.5279 19.4672" stroke="#C11F25" stroke-width="0.758"/>
+<path d="M35.6786 39V20.9093C35.6786 15.7966 32.0459 12.716 26.8563 12.716C23.483 12.716 20.3692 14.4202 19.3962 16.7143V4.06387H12.6497V39H19.3962V24.3177C19.3962 20.9093 21.2774 18.0908 24.6507 18.0908C27.6996 18.0908 28.997 19.2706 28.997 23.1378V39H35.6786Z" fill="#84010B"/>
+<path d="M55.4641 39V4.06387H48.7176V39H55.4641ZM65 39V4.06387H58.2535V39H65Z" fill="#84010B"/>
+<path d="M10.5739 31.0034H5.12475C3.56786 31.0034 2.65968 32.2487 2.65968 34.084C2.65968 35.2639 3.17864 36.3782 3.82735 36.7059H0V39.0655H10.5739V36.7059H6.16267C5.12475 36.7059 4.28144 36.0504 4.28144 34.8706C4.28144 33.7563 4.67066 33.363 5.77345 33.363H10.5739V31.0034ZM7.65469 24.5798C8.56287 24.5798 9.34132 25.4975 9.34132 26.6773C9.34132 27.4639 9.08184 27.7916 8.498 27.7916C7.8493 27.7916 7.52495 27.3328 7.33034 26.0218C7.2006 25.1697 7.07086 24.7109 6.87625 24.5143L7.65469 24.5798ZM10.5739 22.2202H5.64371C3.6976 22.2202 2.59481 23.2034 2.59481 26.0218C2.59481 28.9059 3.6976 29.8891 5.31936 29.9546V27.7916C4.60579 27.6605 4.21657 27.2672 4.21657 26.1529C4.21657 25.2353 4.54092 24.6454 4.99501 24.6454C5.51397 24.6454 5.77345 24.9731 5.83832 26.1529C6.0978 28.5126 6.35729 30.2168 8.56287 30.2168C9.79541 30.2168 10.6387 29.2992 10.6387 27.2672C10.6387 26.0874 10.2495 25.1697 9.73054 24.5798C9.92515 24.5798 10.1846 24.5143 10.4441 24.4487L10.5739 22.2202ZM7.78443 15.5345C8.56287 15.6655 9.08184 16.321 9.08184 17.2387C9.08184 18.1563 8.30339 18.9429 6.61677 18.9429C4.93014 18.9429 4.34631 18.1563 4.34631 17.1076C4.34631 16.2555 4.8004 15.5345 5.64371 15.4034V13.1092C3.82735 13.2403 2.65968 14.8134 2.65968 17.1076C2.65968 19.5983 3.82734 21.3025 6.61677 21.3025C9.40619 21.3025 10.7685 19.5983 10.7685 17.2387C10.7685 15.0756 9.6008 13.3714 7.78443 13.1748V15.5345ZM10.5739 4.3916L5.64371 7.34118L2.85429 4.32605V7.21008L5.83832 10.1597H0V12.4538H10.5739V10.0941H8.10878L7.07086 8.97983L10.5739 7.01344V4.3916Z" fill="#C11F25"/>
+<path d="M23.6128 7.73445C23.6128 8.19328 23.483 8.45546 23.0289 8.45546C22.6397 8.45546 22.4451 8.19328 22.4451 7.73445V6.29244H24.521V5.63697H22.4451V4.71933H21.5369V7.86555C21.5369 8.6521 21.991 9.30756 23.0289 9.30756C24.1317 9.30756 24.521 8.6521 24.521 7.86555V6.88235H23.6128V7.73445ZM28.3483 9.11092V6.62017C28.3483 5.89916 27.8293 5.50588 27.0509 5.50588C26.5968 5.50588 26.0778 5.70252 25.9481 6.03025V4.32605H24.975V9.11092H25.9481V7.07899C25.9481 6.62017 26.2076 6.22689 26.7265 6.22689C27.1806 6.22689 27.3752 6.35798 27.3752 6.9479V9.11092H28.3483ZM29.7754 7.07899C29.8403 6.62017 30.1647 6.29244 30.5539 6.29244C30.9431 6.29244 31.3323 6.55462 31.3323 7.07899H29.7754ZM32.3054 7.60336C32.3054 6.16134 31.7216 5.57143 30.5539 5.57143C29.3862 5.57143 28.7375 6.29244 28.7375 7.34118C28.7375 8.58655 29.3862 9.24202 30.6188 9.24202C31.3972 9.24202 32.0459 8.84874 32.3054 8.12773H31.2675C31.2026 8.32437 30.8782 8.52101 30.6188 8.52101C30.1647 8.52101 29.8403 8.19328 29.7754 7.66891H32.3054V7.60336Z" fill="#C11F25"/>
+</g>
+<defs>
+<clipPath id="clip0_1_211">
+<rect width="65" height="39" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/assets/home.svg b/public/assets/home.svg
index 24303b1f..b87d918c 100644
--- a/public/assets/home.svg
+++ b/public/assets/home.svg
@@ -1 +1,9 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 667 667"><path stroke="#000" stroke-linejoin="round" d="M333 89 110 334h446L333 89Z"/><path stroke="#000" stroke-linejoin="round" d="M141.5 334v247h132V426H333"/><path stroke="#000" stroke-linejoin="round" d="M524.5 334v247h-132V426H333"/><path fill="#3D4775" stroke="#3D4775" stroke-linejoin="round" stroke-width="52" d="M556.5 333 333 88v337h59.5v155h132V333h32Z"/><g clip-path="url(#a)"><path fill="#5570B2" stroke="#5570B2" stroke-linejoin="round" stroke-width="52" d="M110 333 333.5 88v337H274v155H142V333h-32Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h333v641H0z"/></clipPath></defs></svg>
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32.3619 19.3649L19.3648 5.11743V24.7149H22.8249V33.7286H30.501V19.3649H32.3619Z" fill="#84010B" stroke="#84010B" stroke-width="3.02394" stroke-linejoin="round"/>
+<mask id="mask0_1_260" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="38">
+<path d="M0 0H19.3649V37.2759H0V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_1_260)">
+<path d="M6.39664 19.3649L19.3938 5.11743V24.7149H15.9337V33.7286H8.25752V19.3649H6.39664Z" fill="#C11F25" stroke="#C11F25" stroke-width="3.02394" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/public/assets/maps.svg b/public/assets/maps.svg
index 0ffe7e8d..1a5bad6c 100644
--- a/public/assets/maps.svg
+++ b/public/assets/maps.svg
@@ -1 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 667 667"><path stroke="#3D4775" stroke-width="89" d="M291.933 389.005h99.865M217 158l35.5 33M462 244.758 337.416 142 198 261.643 340.382 499 418 376.945l44-132.187Z"/><circle cx="334.01" cy="266" r="70" stroke="#5570B2" stroke-width="50"/><path stroke="#5570B2" stroke-width="50" d="M508 290.5c-1.6 72.4-117.667 225.5-175.5 293-55.667-68.833-167.9-223.8-171.5-293-4.5-86.5 52.5-177 171.5-180.5S510 200 508 290.5Z"/></svg>
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.9767 22.6216H22.7841M12.6191 9.18804L14.6836 11.1071M26.8666 14.2333L19.6217 8.2576L11.5142 15.2152L19.7941 29.0181L24.3078 21.9203L26.8666 14.2333Z" stroke="#84010B" stroke-width="5.1756"/>
+<path d="M19.4236 19.5392C21.6717 19.5392 23.4942 17.7167 23.4942 15.4685C23.4942 13.2204 21.6717 11.3979 19.4236 11.3979C17.1754 11.3979 15.3529 13.2204 15.3529 15.4685C15.3529 17.7167 17.1754 19.5392 19.4236 19.5392Z" stroke="#C11F25" stroke-width="2.90764"/>
+<path d="M29.5415 16.8933C29.4485 21.1036 22.6989 30.0068 19.3357 33.9321C16.0986 29.9292 9.5719 20.9175 9.36255 16.8933C9.10086 11.8631 12.4156 6.60028 19.3357 6.39675C26.2559 6.19321 29.6579 11.6305 29.5415 16.8933Z" stroke="#C11F25" stroke-width="2.90764"/>
+</svg>
diff --git a/public/assets/resources.svg b/public/assets/resources.svg
index d844d096..32adee86 100644
--- a/public/assets/resources.svg
+++ b/public/assets/resources.svg
@@ -1 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 667 667"><path stroke="#5570B2" stroke-linecap="round" stroke-linejoin="round" stroke-width="57" d="M363.5 305c-8-11-32.2-32.1-65-28.5-32.8 3.6-141.667 112.833-192 167-9.333 16.333-20 58 12 94s83.333 31 105 24l81.5-80"/><path stroke="#3D4775" stroke-linecap="round" stroke-linejoin="round" stroke-width="57" d="M297 375.475c8 11 32.2 32.1 65 28.5 32.8-3.6 141.667-112.834 192-167 9.333-16.334 20-58-12-94s-83.333-31-105-24l-81.5 80"/></svg>
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.1384 17.7365C20.6732 17.0969 19.2659 15.8698 17.3585 16.0792C15.4511 16.2885 9.12018 22.6407 6.19318 25.7907C5.65044 26.7405 5.03013 29.1636 6.89102 31.257C8.7519 33.3505 11.7371 33.0598 12.9971 32.6527L17.7365 28.0005" stroke="#C11F25" stroke-width="3.31471" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.2712 21.8348C17.7364 22.4745 19.1437 23.7015 21.0511 23.4922C22.9585 23.2828 29.2895 16.9305 32.2165 13.7806C32.7592 12.8308 33.3795 10.4078 31.5186 8.31429C29.6577 6.22079 26.6726 6.51155 25.4126 6.91862L20.6731 11.5708" stroke="#84010B" stroke-width="3.31471" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/assets/schedule.svg b/public/assets/schedule.svg
index 25c4b795..c38f0401 100644
--- a/public/assets/schedule.svg
+++ b/public/assets/schedule.svg
@@ -1 +1,13 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 667 667"><circle cx="502.5" cy="499.5" r="109" stroke="#3D4775" stroke-width="57"/><path stroke="#3D4775" stroke-linecap="round" stroke-linejoin="round" stroke-width="57" d="M502 467v45.5h40.5"/><path stroke="#5570B2" stroke-linecap="round" stroke-linejoin="round" stroke-width="57" d="M311 571.5H101.5v-425h468v165"/><path stroke="#5570B2" stroke-linecap="round" stroke-linejoin="round" stroke-width="57" d="M202 102v90.5m0-90.5v90.5"/><path stroke="#5570B2" stroke-linecap="round" stroke-linejoin="round" stroke-width="57" d="M333 102v90.5m0-90.5v90.5"/><path stroke="#5570B2" stroke-linecap="round" stroke-linejoin="round" stroke-width="57" d="M472 102v90.5m0-90.5v90.5"/><circle cx="202" cy="304" r="30" fill="#5570B2"/><circle cx="202" cy="470" r="30" fill="#5570B2"/><circle cx="333" cy="304" r="30" fill="#5570B2"/><circle cx="328" cy="470" r="30" fill="#5570B2"/><circle cx="472" cy="304" r="30" fill="#5570B2"/></svg>
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M29.2218 35.386C32.7225 35.386 35.5604 32.5481 35.5604 29.0473C35.5604 25.5466 32.7225 22.7087 29.2218 22.7087C25.721 22.7087 22.8831 25.5466 22.8831 29.0473C22.8831 32.5481 25.721 35.386 29.2218 35.386Z" stroke="#84010B" stroke-width="3.31471"/>
+<path d="M29.1926 27.1573V29.8033H31.5478" stroke="#84010B" stroke-width="3.31471" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.0855 33.2343H5.90247V8.51941H33.118V18.1146" stroke="#C11F25" stroke-width="3.31471" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.7468 5.93158V11.1944" stroke="#C11F25" stroke-width="3.31471" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19.3648 5.93158V11.1944" stroke="#C11F25" stroke-width="3.31471" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M27.448 5.93158V11.1944" stroke="#C11F25" stroke-width="3.31471" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.7468 19.423C12.7103 19.423 13.4914 18.642 13.4914 17.6785C13.4914 16.7149 12.7103 15.9339 11.7468 15.9339C10.7833 15.9339 10.0023 16.7149 10.0023 17.6785C10.0023 18.642 10.7833 19.423 11.7468 19.423Z" fill="#C11F25"/>
+<path d="M11.7468 29.0764C12.7103 29.0764 13.4914 28.2953 13.4914 27.3318C13.4914 26.3683 12.7103 25.5872 11.7468 25.5872C10.7833 25.5872 10.0023 26.3683 10.0023 27.3318C10.0023 28.2953 10.7833 29.0764 11.7468 29.0764Z" fill="#C11F25"/>
+<path d="M19.3648 19.423C20.3283 19.423 21.1093 18.642 21.1093 17.6785C21.1093 16.7149 20.3283 15.9339 19.3648 15.9339C18.4013 15.9339 17.6202 16.7149 17.6202 17.6785C17.6202 18.642 18.4013 19.423 19.3648 19.423Z" fill="#C11F25"/>
+<path d="M19.0741 29.0764C20.0376 29.0764 20.8187 28.2953 20.8187 27.3318C20.8187 26.3683 20.0376 25.5872 19.0741 25.5872C18.1106 25.5872 17.3295 26.3683 17.3295 27.3318C17.3295 28.2953 18.1106 29.0764 19.0741 29.0764Z" fill="#C11F25"/>
+<path d="M27.448 19.423C28.4115 19.423 29.1926 18.642 29.1926 17.6785C29.1926 16.7149 28.4115 15.9339 27.448 15.9339C26.4845 15.9339 25.7035 16.7149 25.7035 17.6785C25.7035 18.642 26.4845 19.423 27.448 19.423Z" fill="#C11F25"/>
+</svg>
diff --git a/src/components/Error.tsx b/src/components/Error.tsx
index c2b09b5c..3909aff3 100644
--- a/src/components/Error.tsx
+++ b/src/components/Error.tsx
@@ -18,7 +18,7 @@ const Error = ({ message }: ErrorProps) => {
 			<Link href="mailto:development@hackthehill.com" target="_blank" rel="noreferrer">
 				<button
 					type="button"
-					className="transform cursor-pointer whitespace-nowrap rounded-normal border-2 border-light px-[calc(2*clamp(.75rem,1vmin,5rem))] py-[clamp(0.75rem,1vmin,5rem)] font-rubik text-[clamp(1rem,1vmin,5rem)] text-light shadow-[0_15px_25px_rgba(0,_0,_0,_0.15),_0_5px_10px_rgba(0,_0,_0,_0.05)] transition hover:bg-white/50"
+					className="transform  cursor-pointer whitespace-nowrap rounded-normal border-2 border-light-color px-[calc(2*clamp(.75rem,1vmin,5rem))] py-[clamp(0.75rem,1vmin,5rem)] font-rubik text-[clamp(1rem,1vmin,5rem)] text-light-color shadow-[0_15px_25px_rgba(0,_0,_0,_0.15),_0_5px_10px_rgba(0,_0,_0,_0.05)] transition hover:bg-white/50"
 				>
 					{t("contact-us")}
 				</button>
diff --git a/src/components/FormPage.tsx b/src/components/FormPage.tsx
index 09b10b1e..1bdc5d25 100644
--- a/src/components/FormPage.tsx
+++ b/src/components/FormPage.tsx
@@ -36,7 +36,7 @@ const FormPage = ({ children, onSubmit, error, invalid, loading, path, user, tit
 	return (
 		<>
 			<Head title={title} />
-			<main className="flex h-screen flex-col items-center justify-center bg-gradient bg-no-repeat text-center supports-[height:100cqh]:h-[100cqh] supports-[height:100svh]:h-[100svh]">
+			<main className="flex h-screen flex-col items-center justify-center bg-default-gradient bg-no-repeat text-center supports-[height:100cqh]:h-[100cqh] supports-[height:100svh]:h-[100svh]">
 				<form onSubmit={onSubmit} className="flex flex-col items-center justify-center gap-6 px-12 text-center">
 					<div className="flex flex-col items-center">
 						<Image
@@ -46,7 +46,7 @@ const FormPage = ({ children, onSubmit, error, invalid, loading, path, user, tit
 							height={128}
 							className="h-auto w-auto"
 						/>
-						<h1 className="font-coolvetica text-[clamp(1rem,3.5vmin,5rem)]  font-normal text-dark">
+						<h1 className="font-coolvetica text-[clamp(1rem,3.5vmin,5rem)]  font-normal text-dark-color">
 							Hack the Hill
 						</h1>
 					</div>
diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx
index 1fc4ba45..923bec5e 100644
--- a/src/components/Loading.tsx
+++ b/src/components/Loading.tsx
@@ -6,7 +6,7 @@ const Loading = () => {
 	return (
 		<div className="flex flex-col items-center justify-center">
 			<svg
-				className="h-10 w-10 animate-spin text-dark"
+				className="h-10 w-10 animate-spin text-dark-color"
 				xmlns="http://www.w3.org/2000/svg"
 				fill="none"
 				viewBox="0 0 24 24"
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
index 43686f4d..a5108e93 100644
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -15,12 +15,12 @@ const Navbar = ({ integrated }: NavbarProps) => {
 	const { data: sessionData } = useSession();
 	return (
 		<nav
-			className={`sticky top-0 z-10 flex gap-4 whitespace-nowrap bg-background1 p-4 ${
-				integrated ? "" : "border-b border-dark shadow-navbar"
+			className={`sticky top-0 z-10 flex gap-4 whitespace-nowrap bg-light-quaternary-color p-4 ${
+				integrated ? "" : "border-b border-dark-primary-color shadow-navbar"
 			}`}
 			aria-label="Main navigation"
 		>
-			<div className="flex w-full items-center justify-center font-coolvetica mobile:w-auto">
+			<div className="flex w-full items-center justify-start font-coolvetica mobile:w-auto mobile:justify-center">
 				<Link href="/">
 					<Image
 						className="hidden mobile:block"
@@ -33,9 +33,9 @@ const Navbar = ({ integrated }: NavbarProps) => {
 					<Image
 						className="block mobile:hidden"
 						priority
-						src="/assets/hackthehill-banner.svg"
-						height={238}
-						width={238}
+						src="/assets/hackthehill-logo.svg"
+						height={64}
+						width={64}
 						alt="Home"
 					/>
 				</Link>
@@ -46,7 +46,7 @@ const Navbar = ({ integrated }: NavbarProps) => {
 			</div>
 
 			<button
-				className="right-4 ml-auto flex whitespace-nowrap rounded-lg border border-dark bg-background1 px-4 py-2 font-coolvetica text-dark transition-colors hover:bg-background3 sm:visible logo-center:absolute"
+				className="hover:bg-light-quaternary right-4 ml-auto flex whitespace-nowrap rounded-lg border border-dark-primary-color bg-light-quaternary-color px-4 py-2 font-coolvetica text-dark-color transition-colors sm:visible logo-center:absolute"
 				onClick={sessionData ? () => void signOut() : () => void signIn()}
 			>
 				{sessionData ? "Sign out" : "Sign in"}
@@ -65,7 +65,7 @@ const BottomMenu = () => {
 
 	return (
 		<nav
-			className="sticky bottom-0 flex w-full items-center justify-evenly gap-4 whitespace-nowrap bg-background1 p-4 mobile:hidden xs:gap-8"
+			className="sticky bottom-0 flex w-full items-center justify-evenly gap-4 whitespace-nowrap bg-light-quaternary-color p-4 mobile:hidden xs:gap-8"
 			aria-label="Bottom navigation"
 		>
 			<Link href="/">
@@ -109,14 +109,17 @@ const Links = () => {
 
 	return (
 		<>
-			<Link href="/" className="mx-4 flex items-center font-coolvetica text-2xl text-dark hover:text-light">
+			<Link
+				href="/"
+				className="mx-4 flex items-center font-coolvetica text-2xl text-dark-primary-color hover:text-light-color"
+			>
 				Home
 			</Link>
 			{sessionData?.user && hackerQuery.data && (
 				<OnlyRole filter={role => role === Role.HACKER}>
 					<Link
 						href="/qr"
-						className="mx-4 flex items-center font-coolvetica text-2xl text-dark hover:text-light"
+						className="mx-4 flex items-center font-coolvetica text-2xl text-dark-primary-color hover:text-light-color"
 					>
 						QR
 					</Link>
@@ -124,16 +127,19 @@ const Links = () => {
 			)}
 			<Link
 				href="/schedule"
-				className="mx-4 flex items-center font-coolvetica text-2xl text-dark hover:text-light"
+				className="mx-4 flex items-center font-coolvetica text-2xl text-dark-primary-color hover:text-light-color"
 			>
 				Schedule
 			</Link>
-			<Link href="/maps" className="mx-4 flex items-center font-coolvetica text-2xl text-dark hover:text-light">
+			<Link
+				href="/maps"
+				className="mx-4 flex items-center font-coolvetica text-2xl text-dark-primary-color hover:text-light-color"
+			>
 				Maps
 			</Link>
 			<Link
 				href="/resources"
-				className="mx-4 flex items-center font-coolvetica text-2xl text-dark hover:text-light"
+				className="mx-4 flex items-center font-coolvetica text-2xl text-dark-primary-color hover:text-light-color"
 			>
 				Resources
 			</Link>
@@ -142,7 +148,7 @@ const Links = () => {
 					<OnlyRole filter={role => role === Role.ORGANIZER || role === Role.SPONSOR}>
 						<Link
 							href="/hackers"
-							className="mx-4 flex items-center font-coolvetica text-2xl text-dark hover:text-light"
+							className="mx-4 flex items-center font-coolvetica text-2xl text-dark-primary-color hover:text-light-color"
 						>
 							Hackers
 						</Link>
@@ -150,7 +156,7 @@ const Links = () => {
 					<OnlyRole filter={role => role === Role.ORGANIZER}>
 						<Link
 							href="/walk-in"
-							className="mx-4 flex items-center font-coolvetica text-2xl text-dark hover:text-light"
+							className="mx-4 flex items-center font-coolvetica text-2xl text-dark-primary-color hover:text-light-color"
 						>
 							Walk-In
 						</Link>
diff --git a/src/pages/confirm/index.tsx b/src/pages/confirm/index.tsx
index d9a12c74..296c3b55 100644
--- a/src/pages/confirm/index.tsx
+++ b/src/pages/confirm/index.tsx
@@ -100,16 +100,16 @@ const Confirm: NextPage = () => {
 		>
 			{isSubmitted ? (
 				<div className="flex flex-col items-center justify-center gap-6">
-					<h3 className="font-rubik text-[clamp(1rem,1vmin,5rem)] font-medium text-dark">
+					<h3 className="font-rubik text-[clamp(1rem,1vmin,5rem)] font-medium text-dark-color">
 						{t("thank-you-for-confirming-your-attendance")}
 					</h3>
-					<p className="font-rubik text-[clamp(1rem,1vmin,5rem)] font-medium text-dark">
+					<p className="font-rubik text-[clamp(1rem,1vmin,5rem)] font-medium text-dark-color">
 						{t("we-look-forward-to-seeing-you")}
 					</p>
 				</div>
 			) : (
 				<div className="flex max-w-[25rem] flex-col items-center gap-6">
-					<h3 className="font-rubik text-[clamp(1rem,1vmin,5rem)] font-medium text-dark">
+					<h3 className="font-rubik text-[clamp(1rem,1vmin,5rem)] font-medium text-dark-color">
 						{t("congratulations-for-your-acceptance", {
 							name: query.data?.firstName ?? "",
 						})}
@@ -124,7 +124,7 @@ const Confirm: NextPage = () => {
 								</p>
 								<button
 									type="button"
-									className="transform cursor-pointer whitespace-nowrap rounded-normal border-2 border-light px-[calc(2*clamp(.75rem,1vmin,5rem))] py-[clamp(0.75rem,1vmin,5rem)] font-rubik text-[clamp(1rem,1vmin,5rem)] text-light shadow-[0_15px_25px_rgba(0,_0,_0,_0.15),_0_5px_10px_rgba(0,_0,_0,_0.05)] transition hover:bg-white/50"
+									className="transform cursor-pointer whitespace-nowrap rounded-normal border-2 border-light-color px-[calc(2*clamp(.75rem,1vmin,5rem))] py-[clamp(0.75rem,1vmin,5rem)] font-rubik text-[clamp(1rem,1vmin,5rem)] text-light-color shadow-[0_15px_25px_rgba(0,_0,_0,_0.15),_0_5px_10px_rgba(0,_0,_0,_0.05)] transition hover:bg-white/50"
 									onClick={() => void signOut()}
 								>
 									{t("sign-out")}
@@ -133,7 +133,7 @@ const Confirm: NextPage = () => {
 						) : (
 							<button
 								type="button"
-								className="hover:bg-blue transform cursor-pointer whitespace-nowrap rounded-normal border-2 border-light px-[calc(2*clamp(.75rem,1vmin,5rem))] py-[clamp(0.75rem,1vmin,5rem)] font-rubik text-[clamp(1rem,1vmin,5rem)] text-light shadow-[0_15px_25px_rgba(0,_0,_0,_0.15),_0_5px_10px_rgba(0,_0,_0,_0.05)] transition hover:bg-white/50"
+								className="hover:bg-blue transform cursor-pointer whitespace-nowrap rounded-normal border-2 border-light-color px-[calc(2*clamp(.75rem,1vmin,5rem))] py-[clamp(0.75rem,1vmin,5rem)] font-rubik text-[clamp(1rem,1vmin,5rem)] text-light-color shadow-[0_15px_25px_rgba(0,_0,_0,_0.15),_0_5px_10px_rgba(0,_0,_0,_0.05)] transition hover:bg-white/50"
 								onClick={() => void signIn()}
 							>
 								{t("sign-in")}
@@ -142,7 +142,7 @@ const Confirm: NextPage = () => {
 					</div>
 					{query.data?.walkIn === false &&
 						(query.data?.onlyOnline ? (
-							<p className="font-rubik text-[clamp(1rem,1vmin,5rem)] font-medium text-dark">
+							<p className="font-rubik text-[clamp(1rem,1vmin,5rem)] font-medium text-dark-color">
 								{t("only-online")}
 							</p>
 						) : (
@@ -156,7 +156,7 @@ const Confirm: NextPage = () => {
 										value={AttendanceType.IN_PERSON}
 										checked={attendanceType === AttendanceType.IN_PERSON}
 										onChange={handleAttendanceTypeChange}
-										className="flex h-4 w-4 appearance-none items-center justify-center rounded-full border border-medium bg-transparent text-black after:m-0.5 after:block after:h-full after:w-full after:border-black after:leading-[calc(100%*3/4)] after:checked:content-check"
+										className="border-medium flex h-4 w-4 appearance-none items-center justify-center rounded-full border bg-transparent text-black after:m-0.5 after:block after:h-full after:w-full after:border-black after:leading-[calc(100%*3/4)] after:checked:content-check"
 									/>
 									<label
 										htmlFor="in-person"
@@ -173,7 +173,7 @@ const Confirm: NextPage = () => {
 										value={AttendanceType.ONLINE}
 										checked={attendanceType === AttendanceType.ONLINE}
 										onChange={handleAttendanceTypeChange}
-										className="flex h-4 w-4 appearance-none items-center justify-center rounded-full border border-medium bg-transparent text-black after:m-0.5 after:block after:h-full after:w-full after:border-black after:leading-[calc(100%*3/4)] after:checked:content-check"
+										className="border-medium flex h-4 w-4 appearance-none items-center justify-center rounded-full border bg-transparent text-black after:m-0.5 after:block after:h-full after:w-full after:border-black after:leading-[calc(100%*3/4)] after:checked:content-check"
 									/>
 									<label htmlFor="online" className="whitespace-nowrap text-[clamp(1rem,1vmin,5rem)]">
 										{t("attendanceType.online")}
@@ -187,7 +187,7 @@ const Confirm: NextPage = () => {
 										>
 											{t("t-shirt.label")}
 										</label>
-										<div className="rounded-2xl border border-medium px-4 py-2">
+										<div className="border-medium rounded-2xl border px-4 py-2">
 											<select
 												name="shirtSize"
 												id="shirtSize"
@@ -224,7 +224,7 @@ const Confirm: NextPage = () => {
 								name="terms"
 								checked={terms}
 								onChange={() => setTerms(!terms)}
-								className="h-4 w-4 appearance-none rounded-lg border border-medium bg-transparent text-black after:block after:h-full after:w-full after:border-black after:p-0.5 after:leading-[calc(100%*1/2)] after:checked:content-check"
+								className="border-medium h-4 w-4 appearance-none rounded-lg border bg-transparent text-black after:block after:h-full after:w-full after:border-black after:p-0.5 after:leading-[calc(100%*1/2)] after:checked:content-check"
 							/>
 							<label htmlFor="terms" className="flex-1">
 								<Trans
@@ -246,7 +246,7 @@ const Confirm: NextPage = () => {
 						{validationMessage && <p className="text-center text-red-500">{validationMessage}</p>}
 						<button
 							type="submit"
-							className="transform cursor-pointer whitespace-nowrap rounded-normal border-0 bg-light px-[calc(2*clamp(.75rem,1vmin,5rem))] py-[clamp(0.75rem,1vmin,5rem)] font-rubik text-[clamp(1rem,1vmin,5rem)] text-white shadow-[0_15px_25px_rgba(0,_0,_0,_0.15),_0_5px_10px_rgba(0,_0,_0,_0.05)] transition hover:bg-medium"
+							className="hover:bg-medium transform cursor-pointer whitespace-nowrap rounded-normal border-0 bg-light-color px-[calc(2*clamp(.75rem,1vmin,5rem))] py-[clamp(0.75rem,1vmin,5rem)] font-rubik text-[clamp(1rem,1vmin,5rem)] text-white shadow-[0_15px_25px_rgba(0,_0,_0,_0.15),_0_5px_10px_rgba(0,_0,_0,_0.05)] transition"
 						>
 							{t("confirm")}
 						</button>
diff --git a/src/pages/follow/index.tsx b/src/pages/follow/index.tsx
index 2df67e2f..37e6e730 100644
--- a/src/pages/follow/index.tsx
+++ b/src/pages/follow/index.tsx
@@ -52,19 +52,19 @@ const Follow: NextPage = () => {
 			user={null}
 			title={t("")}
 		>
-			<h3 className="font-rubik text-[clamp(1rem,1vmin,5rem)] font-medium text-dark">
+			<h3 className="font-rubik text-[clamp(1rem,1vmin,5rem)] font-medium text-dark-color">
 				{follow && !mutation.isLoading ? t("success", { email }) : t("confirm", { email })}
 			</h3>
 			{follow && !mutation.isLoading ? (
 				<a
-					className="cursor-pointer whitespace-nowrap rounded-[100px] border-none bg-light px-[calc(2*clamp(0.75rem,1vmin,5rem))] py-[clamp(0.75rem,1vmin,5rem)] font-rubik text-[clamp(1rem,1vmin,5rem)] text-white shadow-md transition-all duration-1000 hover:bg-medium"
+					className="hover:bg-medium cursor-pointer whitespace-nowrap rounded-[100px] border-none bg-light-color px-[calc(2*clamp(0.75rem,1vmin,5rem))] py-[clamp(0.75rem,1vmin,5rem)] font-rubik text-[clamp(1rem,1vmin,5rem)] text-white shadow-md transition-all duration-1000"
 					href="https://hackthehill.com"
 					rel="noreferrer"
 				>
 					{t("home")}
 				</a>
 			) : (
-				<button className="cursor-pointer whitespace-nowrap rounded-[100px] border-none bg-light px-[calc(2*clamp(0.75rem,1vmin,5rem))] py-[clamp(0.75rem,1vmin,5rem)] font-rubik text-[clamp(1rem,1vmin,5rem)] text-white shadow-md transition-all duration-1000 hover:bg-medium">
+				<button className="hover:bg-medium cursor-pointer whitespace-nowrap rounded-[100px] border-none bg-light-color px-[calc(2*clamp(0.75rem,1vmin,5rem))] py-[clamp(0.75rem,1vmin,5rem)] font-rubik text-[clamp(1rem,1vmin,5rem)] text-white shadow-md transition-all duration-1000">
 					{t("follow")}
 				</button>
 			)}
diff --git a/src/pages/hackers/hacker.tsx b/src/pages/hackers/hacker.tsx
index aff6a8b9..b4c9cca9 100644
--- a/src/pages/hackers/hacker.tsx
+++ b/src/pages/hackers/hacker.tsx
@@ -32,7 +32,7 @@ const Hacker: NextPage = () => {
 
 	if (hackerQuery.isLoading || hackerQuery.data == null) {
 		return (
-			<App className="h-full bg-gradient-to-b from-background2 to-background1 px-16 py-12">
+			<App className="h-full bg-default-gradient px-16 py-12">
 				<OnlyRole filter={role => role === Role.ORGANIZER || role === Role.SPONSOR}>
 					<Loading />
 				</OnlyRole>
@@ -45,7 +45,7 @@ const Hacker: NextPage = () => {
 		);
 	} else if (hackerQuery.isError) {
 		return (
-			<App className="h-full bg-gradient-to-b from-background2 to-background1 px-16 py-12">
+			<App className="h-full bg-default-gradient px-16 py-12">
 				<div className="flex flex-col items-center justify-center gap-4">
 					<Error message={hackerQuery.error.message} />
 				</div>
@@ -59,13 +59,13 @@ const Hacker: NextPage = () => {
 
 	if (presenceQuery.isLoading || presenceQuery.data == null) {
 		return (
-			<App className="h-full bg-gradient-to-b from-background2 to-background1 px-16 py-12">
+			<App className="h-full bg-default-gradient px-16 py-12">
 				<Loading />
 			</App>
 		);
 	} else if (presenceQuery.isError) {
 		return (
-			<App className="h-full bg-gradient-to-b from-background2 to-background1 px-16 py-12">
+			<App className="h-full bg-default-gradient px-16 py-12">
 				<div className="flex flex-col items-center justify-center gap-4">
 					<Error message={presenceQuery.error.message} />
 				</div>
@@ -79,7 +79,7 @@ const Hacker: NextPage = () => {
 
 	return (
 		<App
-			className="mx-auto h-full w-full overflow-y-auto bg-gradient-to-b from-background2 to-background1 px-4 py-12"
+			className="mx-auto h-full w-full overflow-y-auto bg-default-gradient px-4 py-12"
 			title={`${hackerQuery.data.firstName} ${hackerQuery.data.lastName}`}
 		>
 			<div className="mx-auto flex max-w-2xl flex-col gap-4">
@@ -380,7 +380,7 @@ const HackerView = ({ hackerData, presenceData: { id: _, hackerInfoId, ...presen
 
 	return (
 		<>
-			<h1 className="self-center font-coolvetica text-4xl font-normal text-dark">
+			<h1 className="self-center font-coolvetica text-4xl font-normal text-dark-color">
 				{hackerData.firstName} {hackerData.lastName} ({hackerData.gender})
 			</h1>
 
@@ -390,7 +390,7 @@ const HackerView = ({ hackerData, presenceData: { id: _, hackerInfoId, ...presen
 				{hackerData.graduationYear && `(${hackerData.graduationYear})`}
 			</p>
 			<OnlyRole filter={role => role === Role.ORGANIZER}>
-				<div className="grid grid-flow-row grid-cols-2 gap-4 rounded-lg bg-background2 p-4">
+				<div className="grid grid-flow-row grid-cols-2 gap-4 rounded-lg bg-light-tertiary-color p-4">
 					{Object.entries(presenceState).map(([key, value]) => (
 						<p key={key}>
 							<input
@@ -418,7 +418,7 @@ const HackerView = ({ hackerData, presenceData: { id: _, hackerInfoId, ...presen
 				{Object.keys(groupedData).map((category, index) => (
 					<div key={index}>
 						<div className="flex justify-center">
-							<h2 className="self-center px-3 py-2 font-[Coolvetica] text-2xl font-normal text-dark">
+							<h2 className="text-dark self-center px-3 py-2 font-[Coolvetica] text-2xl font-normal">
 								{category}
 							</h2>
 						</div>
@@ -429,7 +429,7 @@ const HackerView = ({ hackerData, presenceData: { id: _, hackerInfoId, ...presen
 									<select
 										id={item.name}
 										name={item.name}
-										className="col-md-6 w-[50%] rounded-[100px] border-none bg-background1 px-5 py-2 font-rubik text-dark shadow-md transition-all duration-500 hover:bg-background1/50"
+										className="col-md-6 bg-background1 text-dark hover:bg-background1/50 w-[50%] rounded-[100px] border-none px-5 py-2 font-rubik shadow-md transition-all duration-500"
 										value={inputValues[item.name] || ""}
 										onChange={e => {
 											handleInputChange(item.name, e.target.value);
@@ -447,7 +447,7 @@ const HackerView = ({ hackerData, presenceData: { id: _, hackerInfoId, ...presen
 										id={item.name}
 										name={item.name}
 										type={item.type}
-										className="/50 w-[50%] rounded-[100px] border-none bg-background1 px-4 py-2 font-rubik text-dark shadow-md outline-none	transition-all duration-500 hover:bg-background2"
+										className="/50 bg-background1 text-dark hover:bg-background2 w-[50%] rounded-[100px] border-none px-4 py-2 font-rubik shadow-md	outline-none transition-all duration-500"
 										defaultValue={
 											item.default_value !== null
 												? item.default_value
@@ -468,8 +468,8 @@ const HackerView = ({ hackerData, presenceData: { id: _, hackerInfoId, ...presen
 				))}
 
 				<div className="flex justify-between gap-8 py-4 ">
-					<input className="rounded-md border border-gray-400 bg-background2 p-2" type="file" />
-					<button className="ml-2 rounded-md bg-dark px-4 py-2 text-white hover:bg-gray-700">
+					<input className="bg-background2 rounded-md border border-gray-400 p-2" type="file" />
+					<button className="bg-dark ml-2 rounded-md px-4 py-2 text-white hover:bg-gray-700">
 						Upload your Resume
 					</button>
 				</div>
@@ -488,7 +488,7 @@ const HackerView = ({ hackerData, presenceData: { id: _, hackerInfoId, ...presen
 									href={value}
 									target="_blank"
 									rel="noreferrer"
-									className="flex items-center justify-center gap-2 rounded-md bg-dark px-4 py-2 text-white hover:bg-gray-700"
+									className="bg-dark flex items-center justify-center gap-2 rounded-md px-4 py-2 text-white hover:bg-gray-700"
 								>
 									{key}
 								</a>
@@ -499,7 +499,7 @@ const HackerView = ({ hackerData, presenceData: { id: _, hackerInfoId, ...presen
 				<OnlyRole filter={role => role === Role.ORGANIZER}>
 					<>
 						<div className="flex justify-center py-4">
-							<h2 className="self-center py-4 font-[Coolvetica] text-2xl font-normal text-dark ">
+							<h2 className="text-dark self-center py-4 font-[Coolvetica] text-2xl font-normal ">
 								Debug Information
 							</h2>
 						</div>
diff --git a/src/pages/hackers/index.tsx b/src/pages/hackers/index.tsx
index e26a5a99..c7a78c7e 100644
--- a/src/pages/hackers/index.tsx
+++ b/src/pages/hackers/index.tsx
@@ -58,7 +58,7 @@ const Hackers: NextPage = () => {
 
 	if (status === "loading") {
 		return (
-			<App className="h-full bg-gradient-to-b from-background2 to-background1 px-16 py-12">
+			<App className="h-full bg-default-gradient px-16 py-12">
 				<OnlyRole filter={role => role === Role.ORGANIZER || role === Role.SPONSOR}>
 					<Loading />
 				</OnlyRole>
@@ -71,7 +71,7 @@ const Hackers: NextPage = () => {
 		);
 	} else if (status === "error") {
 		return (
-			<App className="h-full bg-gradient-to-b from-background2 to-background1 px-16 py-12">
+			<App className="h-full bg-default-gradient px-16 py-12">
 				<div className="flex flex-col items-center justify-center gap-4">
 					<Error message={query.error?.message ?? ""} />
 				</div>
@@ -92,12 +92,8 @@ const Hackers: NextPage = () => {
 			  );
 
 	return (
-		<App
-			className="flex flex-col overflow-y-auto bg-gradient-to-b from-background2 to-background1"
-			integrated={true}
-			title={t("title")}
-		>
-			<div className="border-b border-dark bg-background1 px-4 pb-4 pt-2 shadow-navbar sm:px-20">
+		<App className="flex flex-col overflow-y-auto bg-default-gradient" integrated={true} title={t("title")}>
+			<div className="border-b border-dark-color bg-light-quaternary-color px-4 pb-4 pt-2 shadow-navbar sm:px-20">
 				<Search setSearch={setSearch} />
 			</div>
 			<div
@@ -119,7 +115,7 @@ const Hackers: NextPage = () => {
 				))}
 			</div>
 			{filteredQuery?.length == 0 && (
-				<div className="flex h-full w-full flex-col items-center justify-center gap-4 text-2xl text-dark">
+				<div className="flex h-full w-full flex-col items-center justify-center gap-4 text-2xl text-dark-color">
 					<svg className="h-20 w-20" fill="currentColor" viewBox="0 0 24 24">
 						<path d="M10 0h24v24H0z" fill="none" />
 						<path d="M14 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15h-2v-6h2v6zm0-8h-2V7h2v2z" />
@@ -137,7 +133,7 @@ const Card = ({ firstName, lastName, university, studyProgram, id }: CardProps)
 	return (
 		<Link
 			href={`/hackers/hacker?id=${id}`}
-			className="block w-full rounded-lg bg-dark p-6 text-white shadow hover:bg-medium"
+			className="hover:bg-medium block w-full rounded-lg bg-medium-primary-color p-6 text-white shadow"
 		>
 			<h3 className="text-2xl font-bold tracking-tight">{`${firstName} ${lastName}`}</h3>
 			<p>{university}</p>
@@ -154,8 +150,8 @@ const Search = ({ setSearch }: SearchProps) => {
 	const { t } = useTranslation("hackers");
 
 	return (
-		<div className="relative mx-auto flex max-w-xl flex-col">
-			<div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4 text-dark">
+		<div className="relative mx-auto flex max-w-xl flex-col ">
+			<div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4 text-dark-color">
 				<svg
 					aria-hidden="true"
 					className="h-5 w-5"
@@ -176,7 +172,7 @@ const Search = ({ setSearch }: SearchProps) => {
 				type="search"
 				id="search"
 				name="search"
-				className="block w-full rounded-lg bg-background2 p-4 pl-12 text-sm placeholder:text-dark"
+				className="block w-full rounded-lg bg-light-tertiary-color p-4 pl-12 text-sm placeholder:text-dark-color"
 				placeholder="Search Hackers"
 				onChange={event => setSearch(event.target.value)}
 			/>
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index a5b1489b..c1de1b8e 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -6,7 +6,6 @@ import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import Image from "next/image";
 
 import App from "../components/App";
-import Weather from "../components/Weather";
 
 export const getStaticProps: GetStaticProps = async ({ locale }) => {
 	return {
@@ -19,15 +18,13 @@ const Home: NextPage = () => {
 	const { data: sessionData } = useSession();
 
 	return (
-		<App className="relative flex flex-col items-center justify-center gap-2 overflow-clip bg-gradient1 px-8 py-6 sm:gap-8 short:px-16 short:py-12">
-			<Weather count={25} type="snowflake" />
-			<Weather count={3} type="cloud" />
+		<App className="relative flex flex-col items-center justify-center gap-2 overflow-clip bg-default-gradient px-8 py-6 sm:gap-8 short:px-16 short:py-12">
 			<Image priority className="z-10" src="/assets/mascot-waving.svg" alt="Mascot" width={225} height={225} />
 			<p className="z-10 text-center text-lg font-bold short:text-2xl">{t("welcome")}</p>
 			<p className="z-10 max-w-xl text-center text-sm short:text-base">{t("description")}</p>
 			{!sessionData && (
 				<button
-					className="z-10 whitespace-nowrap rounded-lg border border-dark bg-background1 px-4 py-2 font-coolvetica text-sm text-dark transition-colors hover:bg-background3 short:text-base"
+					className="z-10 whitespace-nowrap rounded-lg border border-dark-primary-color bg-light-quaternary-color px-4 py-2 font-coolvetica text-sm text-dark-color transition-colors hover:bg-light-tertiary-color short:text-base"
 					onClick={() => void signIn()}
 				>
 					{t("get-started")}
diff --git a/src/pages/maps/index.tsx b/src/pages/maps/index.tsx
index 135cdd73..34c102ea 100644
--- a/src/pages/maps/index.tsx
+++ b/src/pages/maps/index.tsx
@@ -18,14 +18,11 @@ const Maps = () => {
 	const MAX_FLOORS = 6;
 
 	return (
-		<App
-			className="flex h-0 flex-col items-center bg-gradient-to-b from-background2 to-background1"
-			title={t("title")}
-		>
+		<App className="flex h-0 flex-col items-center bg-default-gradient" title={t("title")}>
 			<div className="w-full justify-center overflow-y-auto mobile:px-0">
 				{[...Array(MAX_FLOORS).keys()].map(i => (
 					<>
-						<h1 className="py-3 text-center text-xl text-dark">
+						<h1 className="py-3 text-center text-xl text-dark-color">
 							{t("floor", {
 								floor: i,
 							})}
diff --git a/src/pages/qr/index.tsx b/src/pages/qr/index.tsx
index db49b302..a419bb0e 100644
--- a/src/pages/qr/index.tsx
+++ b/src/pages/qr/index.tsx
@@ -21,7 +21,7 @@ const QR = () => {
 
 	return (
 		<App
-			className="relative flex h-full flex-col items-center justify-center gap-16 bg-gradient2"
+			className="relative flex h-full flex-col items-center justify-center gap-16 bg-default-gradient"
 			title={t("title")}
 		>
 			<Weather count={30} type="snowflake" />
@@ -32,19 +32,23 @@ const QR = () => {
 							void router.push(data);
 						}}
 					/>
-					{!error && <p className="z-10 max-w-xl text-center text-lg font-bold text-dark">{t("scan-qr")}</p>}
+					{!error && (
+						<p className="z-10 max-w-xl text-center text-lg font-bold text-dark-color">{t("scan-qr")}</p>
+					)}
 				</OnlyRole>
 				<OnlyRole filter={role => role === Role.HACKER}>
 					<QRCode setError={setError} />
-					{!error && <p className="z-10 max-w-xl text-center text-lg font-bold text-dark">{t("use-qr")}</p>}
+					{!error && (
+						<p className="z-10 max-w-xl text-center text-lg font-bold text-dark-color">{t("use-qr")}</p>
+					)}
 				</OnlyRole>
 			</div>
 			{error && (
-				<div className="flex h-40 items-center justify-center text-dark">
+				<div className="flex h-40 items-center justify-center text-dark-color">
 					<p>You need to sign in to access the QR page.</p>
 				</div>
 			)}
-			<div className="h-56 w-full bg-light">
+			<div className="h-56 w-full bg-light-primary-color">
 				<Image
 					priority
 					className="z-10 -my-4 mx-auto"
diff --git a/src/pages/resources/index.tsx b/src/pages/resources/index.tsx
index 9268c204..b088b10b 100644
--- a/src/pages/resources/index.tsx
+++ b/src/pages/resources/index.tsx
@@ -263,7 +263,7 @@ const Resources: NextPage = () => {
 
 	return (
 		<App
-			className="flex h-full flex-col gap-10 overflow-y-auto bg-gradient-to-b from-background2 to-background1 py-12"
+			className="flex h-full flex-col gap-10 overflow-y-auto bg-default-gradient  py-12"
 			noIndex
 			title={t("title")}
 		>
diff --git a/src/pages/schedule/event.tsx b/src/pages/schedule/event.tsx
index 935c4cd7..641fccca 100644
--- a/src/pages/schedule/event.tsx
+++ b/src/pages/schedule/event.tsx
@@ -28,13 +28,13 @@ const Event: NextPage = () => {
 
 	if (query.isLoading || query.data == null || router.isFallback) {
 		return (
-			<App className="flex h-full w-full flex-col items-center justify-start gap-8 bg-background1 p-8">
+			<App className="flex h-full w-full flex-col items-center justify-start gap-8 bg-light-tertiary-color p-8">
 				<Loading />
 			</App>
 		);
 	} else if (query.isError) {
 		return (
-			<App className="flex h-full w-full flex-col items-center justify-start gap-8 bg-background1 p-8">
+			<App className="flex h-full w-full flex-col items-center justify-start gap-8 bg-light-tertiary-color p-8">
 				<div className="flex flex-col items-center justify-center gap-4">
 					<Error message={query.error.message} />
 				</div>
@@ -60,11 +60,14 @@ const Event: NextPage = () => {
 
 	return (
 		<App
-			className="relative flex h-full w-full flex-col items-center justify-start gap-8 overflow-y-auto bg-background1 p-8 text-center"
+			className="relative flex h-full w-full flex-col items-center justify-start gap-8 overflow-y-auto bg-light-tertiary-color p-8 text-center"
 			title={name}
 			integrated={true}
 		>
-			<button className="absolute right-4 top-0 text-dark hover:text-light" onClick={() => router.back()}>
+			<button
+				className="absolute right-4 top-0 text-dark-color hover:text-light-color"
+				onClick={() => router.back()}
+			>
 				<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 					<title>{t("close-event")}</title>
 					<path
@@ -84,7 +87,7 @@ const Event: NextPage = () => {
 				</svg>
 			</button>
 
-			<div className="flex flex-col font-coolvetica text-dark">
+			<div className="flex flex-col font-coolvetica text-dark-color">
 				<h1 className="text-4xl">{name}</h1>
 				<p className="text-lg">
 					{start.toLocaleDateString(dateLocale, {
@@ -115,7 +118,7 @@ const Event: NextPage = () => {
 					href={link}
 					target="_blank"
 					rel="noreferrer"
-					className="flex whitespace-nowrap rounded-lg border border-dark bg-background1 px-8 py-2 font-coolvetica text-dark transition-colors hover:bg-background3"
+					className="flex whitespace-nowrap rounded-lg border border-dark-color bg-light-primary-color px-8 py-2 font-coolvetica text-dark-color transition-colors hover:bg-dark-secondary-color"
 				>
 					{linkText}
 				</Link>
@@ -137,7 +140,7 @@ const Event: NextPage = () => {
 					href={tiktok}
 					target="_blank"
 					rel="noreferrer"
-					className="flex w-fit flex-row items-center justify-center gap-2 rounded-lg bg-white p-3 font-coolvetica text-dark"
+					className="flex w-fit flex-row items-center justify-center gap-2 rounded-lg bg-white p-3 font-coolvetica text-dark-color"
 				>
 					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" className="h-6 w-6">
 						<path d="M412.19 118.66a109.27 109.27 0 0 1-9.45-5.5 132.87 132.87 0 0 1-24.27-20.62c-18.1-20.71-24.86-41.72-27.35-56.43h.1C349.14 23.9 350 16 350.13 16h-82.44v318.78c0 4.28 0 8.51-.18 12.69 0 .52-.05 1-.08 1.56 0 .23 0 .47-.05.71v.18a70 70 0 0 1-35.22 55.56 68.8 68.8 0 0 1-34.11 9c-38.41 0-69.54-31.32-69.54-70s31.13-70 69.54-70a68.9 68.9 0 0 1 21.41 3.39l.1-83.94a153.14 153.14 0 0 0-118 34.52 161.79 161.79 0 0 0-35.3 43.53c-3.48 6-16.61 30.11-18.2 69.24-1 22.21 5.67 45.22 8.85 54.73v.2c2 5.6 9.75 24.71 22.38 40.82A167.53 167.53 0 0 0 115 470.66v-.2l.2.2c39.91 27.12 84.16 25.34 84.16 25.34 7.66-.31 33.32 0 62.46-13.81 32.32-15.31 50.72-38.12 50.72-38.12a158.46 158.46 0 0 0 27.64-45.93c7.46-19.61 9.95-43.13 9.95-52.53V176.49c1 .6 14.32 9.41 14.32 9.41s19.19 12.3 49.13 20.31c21.48 5.7 50.42 6.9 50.42 6.9v-81.84c-10.14 1.1-30.73-2.1-51.81-12.61Z" />
diff --git a/src/pages/schedule/index.tsx b/src/pages/schedule/index.tsx
index 283fb519..385df5c8 100644
--- a/src/pages/schedule/index.tsx
+++ b/src/pages/schedule/index.tsx
@@ -32,13 +32,13 @@ const Schedule: NextPage = () => {
 
 	if (query.isLoading || query.data == null) {
 		return (
-			<App className="h-full bg-gradient3 px-16 py-12">
+			<App className="h-full bg-default-gradient px-16 py-12">
 				<Loading />
 			</App>
 		);
 	} else if (query.isError) {
 		return (
-			<App className="h-full bg-gradient3 px-16 py-12">
+			<App className="h-full bg-default-gradient px-16 py-12">
 				<div className="flex flex-col items-center justify-center gap-4">
 					<Error message={query.error.message} />
 				</div>
@@ -53,15 +53,15 @@ const Schedule: NextPage = () => {
 	const eventColor = (eventType: string) => {
 		switch (eventType) {
 			case EventType.WORKSHOP:
-				return "bg-accent1 text-dark";
+				return "bg-dark-primary-color text-light-color";
 			case EventType.CAREER_FAIR:
-				return "bg-accent3 text-white";
+				return "bg-light-primary-color text-light-color";
 			case EventType.FOOD:
-				return "bg-accent2 text-dark";
+				return "bg-light-tertiary-color text-light-color";
 			case EventType.SOCIAL:
-				return "bg-accent4 text-white";
+				return "bg-medium-primary-color text-light-color";
 			default:
-				return "bg-accent1 text-dark";
+				return "bg-dark-primary-color text-light-color";
 		}
 	};
 
@@ -112,13 +112,13 @@ const Schedule: NextPage = () => {
 		}, [] as Event[][]);
 
 	return (
-		<App className="flex h-0 flex-col items-center bg-gradient3" integrated={true} title={t("title")}>
+		<App className="flex h-0 flex-col items-center bg-default-gradient" integrated={true} title={t("title")}>
 			<Tabs tab={tab} setTab={tab => void router.push(`/schedule?tab=${tab}`)} />
 			<div className="w-full overflow-y-auto p-4 mobile:px-0">
 				<div className="mx-auto flex max-w-2xl flex-col gap-4">
 					{events.map((event, i) => (
 						<div key={i} className="flex gap-4">
-							<div className="grid basis-1/3 place-content-center rounded-lg bg-dark/50 p-4 font-coolvetica text-2xl text-white">
+							<div className="bg-dark/50 grid basis-1/3 place-content-center rounded-lg p-4 font-coolvetica text-2xl text-white">
 								{event[0]?.start.toLocaleDateString(dateLocale, {
 									month: "short",
 									day: "numeric",
@@ -166,7 +166,7 @@ type TabsProps = {
 
 const Tabs = ({ tab, setTab }: TabsProps) => {
 	return (
-		<div className="w-full border-b border-dark bg-background1 px-4 pb-4 pt-2 shadow-navbar">
+		<div className="w-full border-b border-dark-color bg-light-quaternary-color px-4 pb-4 pt-2 shadow-navbar">
 			<div className="mx-auto grid max-w-2xl grid-cols-3 gap-3 sm:grid-cols-5">
 				{Object.keys(EventType)
 					.sort(a => (a === EventType.ALL ? -1 : 0))
@@ -202,7 +202,7 @@ const Tab = ({ type, active, onClick }: TabProps) => {
 
 	return (
 		<div
-			className={`flex cursor-pointer flex-row items-center justify-center gap-2 rounded-lg bg-dark p-2 font-coolvetica text-white outline sm:p-4 ${
+			className={`flex cursor-pointer flex-row items-center justify-center gap-2 rounded-lg bg-dark-color p-2 font-coolvetica text-white outline sm:p-4 ${
 				type === active ? "outline-4 outline-white" : "outline-0"
 			}`}
 			onClick={onClick}
diff --git a/src/pages/sponsorship/gmail-drafts.tsx b/src/pages/sponsorship/gmail-drafts.tsx
index 7ecd7ecb..f067f2ef 100644
--- a/src/pages/sponsorship/gmail-drafts.tsx
+++ b/src/pages/sponsorship/gmail-drafts.tsx
@@ -524,12 +524,12 @@ const SponsorshipGmailDrafts: NextPage = () => {
 	}, [templateID, organizerFullName, companyName, companyRepName, customTemplate, customizeTemplate]);
 
 	return (
-		<App className="overflow-y-auto bg-gradient3 p-8 sm:p-12" title={t("title")}>
+		<App className="bg-default-gradient overflow-y-auto p-8 sm:p-12" title={t("title")}>
 			<OnlyRole filter={role => role === Role.ORGANIZER}>
 				<form onSubmit={handleSubmit} className="m-auto flex w-fit flex-col items-center gap-4">
-					<h3 className="font-rubik text-4xl font-bold text-dark">{t("title")}</h3>
+					<h3 className="text-dark-color font-rubik text-4xl font-bold">{t("title")}</h3>
 					<div className="flex w-full flex-col items-center gap-2 sm:flex-row">
-						<label htmlFor="organizer-full-name" className="flex-[50%] font-rubik text-dark">
+						<label htmlFor="organizer-full-name" className="text-dark-color flex-[50%] font-rubik">
 							{t("organizer-full-name")}
 							<span className="text-red-500"> *</span>
 						</label>
@@ -537,21 +537,21 @@ const SponsorshipGmailDrafts: NextPage = () => {
 							id="organizer-full-name"
 							name="organizerFullName"
 							type="text"
-							className="w-full rounded-[100px] border-none bg-background1 px-4 py-2 font-rubik text-dark shadow-md transition-all duration-500 hover:bg-background1/50"
+							className="text-dark-color w-full rounded-[100px] border-none bg-light-primary-color px-4 py-2 font-rubik shadow-md transition-all duration-500 hover:bg-light-primary-color/50"
 							onChange={event => setOrganizerFullName(event.target.value)}
 							value={organizerFullName}
 							required
 						/>
 					</div>
 					<div className="flex w-full flex-col items-center gap-2 sm:flex-row">
-						<label htmlFor="template" className="flex-[50%] font-rubik text-dark">
+						<label htmlFor="template" className="text-dark-color flex-[50%] font-rubik">
 							{t("select-template")}
 							<span className="text-red-500"> *</span>
 						</label>
 						<select
 							id="template"
 							name="template"
-							className="w-full rounded-[100px] border-none bg-background1 px-4 py-2 font-rubik text-dark shadow-md transition-all duration-500 hover:bg-background1/50"
+							className="text-dark-color w-full rounded-[100px] border-none bg-light-primary-color px-4 py-2 font-rubik shadow-md transition-all duration-500 hover:bg-light-primary-color/50"
 							onChange={event => {
 								setTemplateID(event.target.value);
 								setCustomizeTemplate(event.target.value === "custom");
@@ -576,7 +576,7 @@ const SponsorshipGmailDrafts: NextPage = () => {
 					{!customizeTemplate && (
 						<>
 							<div className="flex w-full flex-col items-center gap-2 sm:flex-row">
-								<label htmlFor="company-name" className="flex-[50%] font-rubik text-dark">
+								<label htmlFor="company-name" className="text-dark-color flex-[50%] font-rubik">
 									{t("company-name")}
 									<span className="text-red-500"> *</span>
 								</label>
@@ -584,14 +584,14 @@ const SponsorshipGmailDrafts: NextPage = () => {
 									id="company-name"
 									name="companyName"
 									type="text"
-									className="w-full rounded-[100px] border-none bg-background1 px-4 py-2 font-rubik text-dark shadow-md transition-all duration-500 hover:bg-background1/50"
+									className="text-dark-color w-full rounded-[100px] border-none bg-light-primary-color px-4 py-2 font-rubik shadow-md transition-all duration-500 hover:bg-light-primary-color/50"
 									onChange={event => setCompanyName(event.target.value)}
 									value={companyName}
 									required
 								/>
 							</div>
 							<div className="flex w-full flex-col items-center gap-2 sm:flex-row">
-								<label htmlFor="company-rep-name" className="flex-[50%] font-rubik text-dark">
+								<label htmlFor="company-rep-name" className="text-dark-color flex-[50%] font-rubik">
 									{t("company-rep-name")}
 									<span className="text-red-500"> *</span>
 								</label>
@@ -599,7 +599,7 @@ const SponsorshipGmailDrafts: NextPage = () => {
 									id="company-rep-name"
 									name="companyRepName"
 									type="text"
-									className="w-full rounded-[100px] border-none bg-background1 px-4 py-2 font-rubik text-dark shadow-md transition-all duration-500 hover:bg-background1/50"
+									className="text-dark-color w-full rounded-[100px] border-none bg-light-primary-color px-4 py-2 font-rubik shadow-md transition-all duration-500 hover:bg-light-primary-color/50"
 									onChange={event => setCompanyRepName(event.target.value)}
 									value={companyRepName}
 									required
@@ -608,7 +608,7 @@ const SponsorshipGmailDrafts: NextPage = () => {
 						</>
 					)}
 					<div className="flex w-full flex-col items-center gap-2 sm:flex-row">
-						<label htmlFor="company-name" className="flex-[50%] font-rubik text-dark">
+						<label htmlFor="company-name" className="text-dark-color flex-[50%] font-rubik">
 							{t("company-email")}
 							<span className="text-red-500"> *</span>
 						</label>
@@ -616,21 +616,21 @@ const SponsorshipGmailDrafts: NextPage = () => {
 							id="company-email"
 							name="companyEmail"
 							type="email"
-							className="w-full rounded-[100px] border-none bg-background1 px-4 py-2 font-rubik text-dark shadow-md transition-all duration-500 hover:bg-background1/50"
+							className="text-dark-color w-full rounded-[100px] border-none bg-light-primary-color px-4 py-2 font-rubik shadow-md transition-all duration-500 hover:bg-light-primary-color/50"
 							onChange={event => setCompanyEmail(event.target.value)}
 							value={companyEmail}
 							required
 						/>
 					</div>
 					<div className="flex w-full flex-col items-center gap-2 sm:flex-row">
-						<label htmlFor="subject" className="flex-[50%] font-rubik text-dark">
+						<label htmlFor="subject" className="text-dark-color flex-[50%] font-rubik">
 							{t("subject")}
 							<span className="text-red-500"> *</span>
 						</label>
 						<input
 							id="subject"
 							name="subject"
-							className="w-full rounded-[100px] border-none bg-background1 px-4 py-2 font-rubik text-dark shadow-md transition-all duration-500 hover:bg-background1/50"
+							className="text-dark-color w-full rounded-[100px] border-none bg-light-primary-color px-4 py-2 font-rubik shadow-md transition-all duration-500 hover:bg-light-primary-color/50"
 							onChange={event => setSubject(event.target.value)}
 							value={subject}
 							required
@@ -640,7 +640,7 @@ const SponsorshipGmailDrafts: NextPage = () => {
 						<>
 							<div className="flex w-full flex-col items-center gap-2 sm:flex-row">
 								<div className="flex flex-col gap-1">
-									<label htmlFor="custom-template" className="flex-[50%] font-rubik text-dark">
+									<label htmlFor="custom-template" className="text-dark-color flex-[50%] font-rubik">
 										{t("custom-template")}
 									</label>
 									<small className="w-36 text-xs">{t("custom-template-note")}</small>
@@ -648,7 +648,7 @@ const SponsorshipGmailDrafts: NextPage = () => {
 								<textarea
 									id="custom-template"
 									name="customTemplate"
-									className="h-[200px] w-full rounded-md border-none bg-background1 px-4 py-2 font-rubik text-dark shadow-md transition-all duration-500 hover:bg-background1/50"
+									className="text-dark-color h-[200px] w-full rounded-md border-none bg-light-primary-color px-4 py-2 font-rubik shadow-md transition-all duration-500 hover:bg-light-primary-color/50"
 									onChange={event => setCustomTemplate(event.target.value)}
 									value={customTemplate}
 								/>
@@ -663,7 +663,7 @@ const SponsorshipGmailDrafts: NextPage = () => {
 					<div className="relative h-[500px] w-full rounded-md bg-white shadow-md" ref={emailPreview}>
 						<button
 							type="button"
-							className="absolute bottom-4 right-4 rounded-[100px] border-none bg-light px-4 py-2 font-rubik text-white shadow-md transition-all duration-1000 hover:bg-medium disabled:hover:bg-light"
+							className="bg-ligh-color hover:bg-medium absolute bottom-4 right-4 rounded-[100px] border-none px-4 py-2 font-rubik text-white shadow-md transition-all duration-1000 disabled:hover:bg-light-color"
 							onClick={() => void copyToClipBoard()}
 							disabled={copied}
 						>
@@ -673,7 +673,7 @@ const SponsorshipGmailDrafts: NextPage = () => {
 					</div>
 					<button
 						type="submit"
-						className="cursor-pointer whitespace-nowrap rounded-[100px] border-none bg-light px-8 py-2 font-rubik text-white shadow-md transition-all duration-1000 hover:bg-medium disabled:hover:bg-light"
+						className="hover:bg-medium cursor-pointer whitespace-nowrap rounded-[100px] border-none bg-light-color px-8 py-2 font-rubik text-white shadow-md transition-all duration-1000 disabled:hover:bg-light-color"
 						disabled={drafted}
 					>
 						{drafted ? t("created-draft-email") : t("create-draft-email")}
diff --git a/src/pages/unsubscribe/index.tsx b/src/pages/unsubscribe/index.tsx
index 9cf0842d..5b2bac31 100644
--- a/src/pages/unsubscribe/index.tsx
+++ b/src/pages/unsubscribe/index.tsx
@@ -67,14 +67,14 @@ const Unsubscribe: NextPage = () => {
 			user={query.data ?? null}
 			title={t("unsubscribe")}
 		>
-			<h3 className="font-rubik text-[clamp(1rem,1vmin,5rem)] font-medium text-dark">
+			<h3 className="font-rubik text-[clamp(1rem,1vmin,5rem)] font-medium text-dark-color">
 				{t("are-you-sure", {
 					email: query.data?.email as string,
 					unsubscribe: (isUnsubscribed ? t("resubscribe") : t("unsubscribe")).toLowerCase(),
 				})}
 			</h3>
 			<button
-				className="cursor-pointer whitespace-nowrap rounded-[100px] border-none bg-light px-[calc(2*clamp(0.75rem,1vmin,5rem))] py-[clamp(0.75rem,1vmin,5rem)] font-rubik text-[clamp(1rem,1vmin,5rem)] text-white shadow-md transition-all duration-1000 hover:bg-medium"
+				className="hover:bg-medium cursor-pointer whitespace-nowrap rounded-[100px] border-none bg-light-color px-[calc(2*clamp(0.75rem,1vmin,5rem))] py-[clamp(0.75rem,1vmin,5rem)] font-rubik text-[clamp(1rem,1vmin,5rem)] text-white shadow-md transition-all duration-1000"
 				disabled={query.isLoading}
 			>
 				{isUnsubscribed ? t("resubscribe") : t("unsubscribe")}
diff --git a/src/pages/walk-in/index.tsx b/src/pages/walk-in/index.tsx
index 0213599b..4e492962 100644
--- a/src/pages/walk-in/index.tsx
+++ b/src/pages/walk-in/index.tsx
@@ -200,14 +200,14 @@ const WalkIn: NextPage = () => {
 	} as const;
 
 	return (
-		<App className="overflow-y-auto bg-gradient3 p-8 sm:p-12" title={t("title")}>
+		<App className="overflow-y-auto bg-default-gradient p-8 sm:p-12" title={t("title")}>
 			<OnlyRole filter={role => role === Role.ORGANIZER}>
 				{success ? (
 					<div className="flex flex-col items-center gap-8">
-						<h3 className="font-rubik text-4xl font-bold text-dark">{t("title")}</h3>
+						<h3 className="font-rubik text-4xl font-bold text-dark-color">{t("title")}</h3>
 						<QRCode id={mutation.data?.id} />
 						<button
-							className="cursor-pointer whitespace-nowrap rounded-[100px] border-none bg-light px-8 py-2 font-rubik text-white shadow-md transition-all duration-1000 hover:bg-background2"
+							className="cursor-pointer whitespace-nowrap rounded-[100px] border-none bg-light-color px-8 py-2 font-rubik text-white shadow-md transition-all duration-1000 hover:bg-medium-primary-color"
 							onClick={() => setSuccess(false)}
 						>
 							{t("new")}
@@ -215,11 +215,11 @@ const WalkIn: NextPage = () => {
 					</div>
 				) : (
 					<form onSubmit={handleSubmit} className="flex flex-col items-center gap-8">
-						<h3 className="font-rubik text-4xl font-bold text-dark">{t("title")}</h3>
+						<h3 className="font-rubik text-4xl font-bold text-dark-color">{t("title")}</h3>
 						<div className="flex flex-col gap-4">
 							{fields.map(field => (
 								<div key={field.name} className="flex w-full flex-col items-center gap-2 sm:flex-row">
-									<label htmlFor={field.name} className="flex-[50%] font-rubik text-dark">
+									<label htmlFor={field.name} className="flex-[50%] font-rubik text-dark-color">
 										{t(field.name)}
 										{field.required && <span className="text-red-500"> *</span>}
 									</label>
@@ -227,7 +227,7 @@ const WalkIn: NextPage = () => {
 										<select
 											id={field.name}
 											name={field.name}
-											className="w-full rounded-[100px] border-none bg-background1 px-4 py-2 font-rubik text-dark shadow-md transition-all duration-500 hover:bg-background1/50"
+											className="w-full rounded-[100px] border-none bg-light-primary-color px-4 py-2 font-rubik text-dark-color shadow-md transition-all duration-500 hover:bg-light-primary-color/50"
 											required={field.required}
 										>
 											<option value="">{t("select")}</option>
@@ -242,7 +242,7 @@ const WalkIn: NextPage = () => {
 											id={field.name}
 											name={field.name}
 											type={field.type}
-											className="w-full rounded-[100px] border-none bg-background1 px-4 py-2 font-rubik text-dark shadow-md transition-all duration-500 hover:bg-background1/50"
+											className="w-full rounded-[100px] border-none bg-light-primary-color px-4 py-2 font-rubik text-dark-color shadow-md transition-all duration-500 hover:bg-light-primary-color/50"
 											required={field.required}
 											pattern={patterns[field.type]}
 										/>
@@ -255,7 +255,7 @@ const WalkIn: NextPage = () => {
 								<p className="text-center font-rubik text-red-500">{error}</p>
 							</div>
 						)}
-						<button className="cursor-pointer whitespace-nowrap rounded-[100px] border-none bg-light px-8 py-2 font-rubik text-white shadow-md transition-all duration-1000 hover:bg-medium">
+						<button className="hover:bg-medium cursor-pointer whitespace-nowrap rounded-[100px] border-none bg-light-color px-8 py-2 font-rubik text-white shadow-md transition-all duration-1000">
 							{t("submit")}
 						</button>
 					</form>
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index af0adb09..7e12c4d8 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -4,11 +4,8 @@ module.exports = {
 	theme: {
 		extend: {
 			backgroundImage: {
-				gradient:
-					"linear-gradient(0deg, rgba(239, 203, 255, 0) 15%, rgba(236, 211, 247, 0.7723) 48.85%, rgba(236, 210, 248, 0.7373) 48.86%, #ebd5f5 63.96%, #bfcbee 80.96%, #bfcbee 81.77%,#abeffa 100%)",
-				gradient1: "linear-gradient(180deg, #5C71AD 0%, #90A1D4 15.1%, #A4B4E2 79.69%, #B2C2ED 96.87%)",
-				gradient2: "linear-gradient(180deg, #BFCFF6 11.47%, #5C71AD 146.86%)",
-				gradient3: "linear-gradient(180deg, #90A1D4 80%, #BFCFF6 100%)",
+				"default-gradient": "linear-gradient(#C7734F, #EA8A60, #EE9E6F, #F6BC83)",
+				"medium-gradient": "linear-gradient(#f8cc8d, #dd484d)",
 			},
 			screens: {
 				"logo-center": "600px",
@@ -17,16 +14,17 @@ module.exports = {
 				xs: "400px",
 			},
 			colors: {
-				dark: "#3b4779",
-				medium: "#3f4e77",
-				light: "#5c71ad",
-				background1: "#BFCFF6",
-				background2: "#90A1D4",
-				background3: "#B2CEED",
-				accent1: "#FFFFFF",
-				accent2: "#BFCFF6",
-				accent3: "#5C71AD",
-				accent4: "#3B4779",
+				"light-color": "white",
+				"dark-color": "black",
+				"light-secondary-color": "#fff3b6",
+				"medium-secondary-color": "#f8cc8d",
+				"dark-secondary-color": "#f6bf70",
+				"light-tertiary-color": "#ea885f",
+				"light-primary-color": "#dd484d",
+				"medium-primary-color": "#c11f25",
+				"dark-primary-color": "#84010b",
+				"highlight-color": "#650014",
+				"light-quaternary-color": "#F5C18C",
 			},
 			content: {
 				check: `url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M470.6%20105.4c12.5%2012.5%2012.5%2032.8%200%2045.3l-256%20256c-12.5%2012.5-32.8%2012.5-45.3%200l-128-128c-12.5-12.5-12.5-32.8%200-45.3s32.8-12.5%2045.3%200L192%20338.7%20425.4%20105.4c12.5-12.5%2032.8-12.5%2045.3%200z%22%2F%3E%3C%2Fsvg%3E)`,