diff --git a/app/(pages)/(hackers)/_components/AuthFormBackground/AuthFormBackground.tsx b/app/(pages)/(hackers)/_components/AuthFormBackground/AuthFormBackground.tsx
index 496b4f05..16b7b93a 100644
--- a/app/(pages)/(hackers)/_components/AuthFormBackground/AuthFormBackground.tsx
+++ b/app/(pages)/(hackers)/_components/AuthFormBackground/AuthFormBackground.tsx
@@ -5,10 +5,10 @@ import Image from 'next/image';
 import { usePathname } from 'next/navigation';
 
 import grass_bottom from '@public/hackers/login/grass_bottom.svg';
-import mascots from '@public/hackers/mvp/peeking_around_wall.svg';
 import VocalAngelCow from 'public/hackers/mvp/vocal_angel_cow.svg';
 import login_mascots_mobile from '@public/hackers/login/login_mascots_mobile.svg';
-import clouds_and_music from '@public/hackers/login/clouds_and_music.svg';
+import mascots_with_notes from '@public/hackers/login/mascots_with_notes.svg';
+import moving_clouds from '@public/hackers/login/moving_clouds.svg';
 
 export default function AuthFormBackground({
   title,
@@ -55,25 +55,26 @@ export default function AuthFormBackground({
 
         <div className="w-full">{children}</div>
       </div>
-      <div className="flex flex-1 flex-col justify-end relative md:bg-[linear-gradient(284deg,rgba(213,252,209,0.60)_9.72%,rgba(178,231,221,0.60)_44.61%,rgba(118,214,230,0.60)_79.5%)]">
+      <div className="flex flex-1 flex-col justify-end relative md:overflow-hidden md:bg-[linear-gradient(284deg,rgba(213,252,209,0.60)_9.72%,rgba(178,231,221,0.60)_44.61%,rgba(118,214,230,0.60)_79.5%)]">
         {/* DESKTOP ONLY */}
-        <Image
-          src={clouds_and_music}
-          alt="background clouds and music notes"
-          style={{ position: 'absolute', top: 0, right: 0, zIndex: 1 }}
-          className="hidden md:block w-full"
-        />
+        <div className="hidden md:block absolute top-0 left-0 w-[200%] z-[1] animate-moveClouds">
+          <Image
+            src={moving_clouds}
+            alt="background clouds and music notes"
+            width={2012}
+            height={783}
+            className="w-full"
+          />
+        </div>
         <Image
           src={grass_bottom}
           alt="grass asset"
-          style={{ position: 'relative', zIndex: 3 }}
-          className="hidden md:block w-full"
+          className="hidden md:block w-full relative z-[3]"
         />
         <Image
-          src={mascots}
+          src={mascots_with_notes}
           alt="mascots peeping"
-          style={{ position: 'absolute', right: 0, bottom: 0, zIndex: 5 }}
-          className="hidden md:block"
+          className="hidden md:block absolute right-0 bottom-0 z-[5]"
         />
         {/* MOBILE ONLY */}
         <Image
diff --git a/app/(pages)/_components/AuthForm/HackerAuthForm.module.scss b/app/(pages)/_components/AuthForm/HackerAuthForm.module.scss
index 45ac17a8..d9fafc49 100644
--- a/app/(pages)/_components/AuthForm/HackerAuthForm.module.scss
+++ b/app/(pages)/_components/AuthForm/HackerAuthForm.module.scss
@@ -16,10 +16,10 @@
 .fields {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  // gap: 12px; //commented out bc error message takes up the space instead (can revert when updating erro message design)
 
   @include tablet-l { //tailwind md
-    gap: 8px;
+    // gap: 8px; //commented bc of same message above
   }
 
   div {
@@ -103,6 +103,8 @@
 .error_msg {
   color: var(--text-error);
   font-size: 0.75rem;
+  line-height: 1.5;
   text-align: end;
   margin-top: 4px;
+  min-height: calc(0.75rem * 1.5 + 4px); // calcs space taken up by error message
 }
diff --git a/public/hackers/login/clouds_and_music.svg b/public/hackers/login/clouds_and_music.svg
deleted file mode 100644
index 5686ec86..00000000
--- a/public/hackers/login/clouds_and_music.svg
+++ /dev/null
@@ -1,31 +0,0 @@
-<svg width="677" height="668" viewBox="0 0 677 668" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g opacity="0.3">
-<rect x="-1198" y="246.178" width="1270.88" height="206.822" rx="100" fill="#EBF9FF"/>
-</g>
-<g opacity="0.5">
-<circle cx="59.3923" cy="59.3923" r="59.3923" transform="matrix(-1 1.23066e-09 -8.1095e-09 1 579.154 -116)" fill="#EBF9FF"/>
-<circle cx="30.8795" cy="30.8795" r="30.8795" transform="matrix(-1 1.23066e-09 -8.1095e-09 1 414.838 -58.9751)" fill="#EBF9FF"/>
-<rect width="306.09" height="49.8129" rx="24.9065" transform="matrix(-1 1.23066e-09 -8.1095e-09 1 630.092 -39.365)" fill="#EBF9FF"/>
-</g>
-<g opacity="0.3">
-<circle cx="149.601" cy="149.601" r="149.601" transform="matrix(-1 -1.23066e-09 -6.67576e-09 1 685.793 349)" fill="#EBF9FF"/>
-<circle cx="77.7813" cy="77.7813" r="77.7813" transform="matrix(-1 -1.23066e-09 -6.67576e-09 1 753.34 449.489)" fill="#EBF9FF"/>
-<ellipse cx="118.375" cy="116.956" rx="118.375" ry="116.956" transform="matrix(-1 -1.23066e-09 -6.67576e-09 1 450.734 401.234)" fill="#EBF9FF"/>
-<circle cx="77.7813" cy="77.7813" r="77.7813" transform="matrix(-1 -1.23066e-09 -6.67576e-09 1 271.891 492.641)" fill="#EBF9FF"/>
-<rect width="771" height="125.472" rx="60.6666" transform="matrix(-1 -1.23066e-09 -6.67576e-09 1 814.092 542.028)" fill="#EBF9FF"/>
-</g>
-<ellipse cx="443.588" cy="335.333" rx="8.11115" ry="6.29313" transform="rotate(-14.1104 443.588 335.333)" fill="white"/>
-<ellipse cx="464.752" cy="333.475" rx="8.11115" ry="6.29313" transform="rotate(-14.1104 464.752 333.475)" fill="white"/>
-<path d="M471.325 332.109L466.075 311.223L444.674 312.132L449.924 333.019" stroke="white" stroke-width="2.79695" stroke-linecap="round" stroke-linejoin="round"/>
-<ellipse cx="286.707" cy="461.893" rx="8.11115" ry="6.29313" fill="white"/>
-<path d="M293.414 461.191V439.655C295.372 442.498 300.071 448.213 303.203 448.325" stroke="white" stroke-width="2.79695" stroke-linecap="round" stroke-linejoin="round"/>
-<g clip-path="url(#clip0_2811_1044)">
-<ellipse cx="379.75" cy="225.768" rx="8.11115" ry="6.29313" transform="rotate(18.0245 379.75 225.768)" fill="white"/>
-<path d="M386.346 227.179L393.01 206.699C393.992 210.009 396.692 216.898 399.636 217.973" stroke="white" stroke-width="2.79695" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-<defs>
-<clipPath id="clip0_2811_1044">
-<rect width="34.4025" height="37.4791" fill="white" transform="translate(375.674 194) rotate(18.0245)"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/public/hackers/login/mascots_with_notes.svg b/public/hackers/login/mascots_with_notes.svg
new file mode 100644
index 00000000..46c4a1f0
--- /dev/null
+++ b/public/hackers/login/mascots_with_notes.svg
@@ -0,0 +1,110 @@
+<svg width="404" height="719" viewBox="0 0 404 719" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2853_1024)">
+<path d="M258.103 496.832C244.995 484.167 246.994 453.843 249.631 440.265C250.737 439.159 253.816 436.931 257.287 436.864C261.626 436.78 281.984 475.382 285.05 485.081C288.115 494.78 274.487 512.663 258.103 496.832Z" fill="#EFEFEF"/>
+<path d="M324.008 516.941C318.969 519.056 296.002 503.053 287.008 492.647L326.844 463.777C335.422 470.943 351.524 486.951 351.067 489.882C350.496 493.546 330.306 514.298 324.008 516.941Z" fill="#EFEFEF"/>
+<path d="M299.742 498.044C281.94 501.626 252.041 442.821 256.898 426.792C261.755 410.762 279.587 394.623 291.786 391.904C303.986 389.184 367.448 415.779 364.036 433.75C360.623 451.721 317.543 494.462 299.742 498.044Z" fill="white"/>
+<path d="M382.429 458.521C384.543 453.482 368.541 430.515 358.135 421.521L329.264 461.357C336.431 469.935 352.439 486.037 355.37 485.58C359.034 485.009 379.786 464.819 382.429 458.521Z" fill="white"/>
+<path d="M360.824 394.111C348.159 381.003 317.835 383.002 304.257 385.639C303.151 386.745 300.923 389.824 300.856 393.295C300.772 397.634 339.374 417.992 349.073 421.058C358.772 424.123 376.655 410.495 360.824 394.111Z" fill="white"/>
+<path d="M289.368 478.237C302.67 491.539 317.252 483.348 331.297 469.302C345.343 455.256 353.535 440.675 340.232 427.372C322.745 409.885 301.46 411.373 287.415 425.419C273.369 439.465 271.881 460.749 289.368 478.237Z" fill="#F4F4F4"/>
+<path d="M322.536 462.105C322.434 462.208 322.313 462.29 322.18 462.346C322.046 462.403 321.903 462.432 321.759 462.433L314.811 462.413C314.535 462.392 314.278 462.268 314.091 462.066C313.903 461.863 313.8 461.597 313.8 461.321C313.801 461.044 313.906 460.778 314.095 460.574C314.283 460.371 314.541 460.246 314.816 460.223L321.734 460.197C321.879 460.196 322.022 460.224 322.156 460.279C322.29 460.334 322.411 460.415 322.514 460.517C322.616 460.619 322.697 460.741 322.752 460.874C322.806 461.008 322.834 461.152 322.833 461.297C322.84 461.444 322.818 461.592 322.767 461.731C322.716 461.87 322.637 461.997 322.536 462.105Z" fill="#FFD2D2"/>
+<path d="M319.109 465.532C319.008 465.634 318.888 465.715 318.755 465.771C318.623 465.827 318.48 465.856 318.337 465.856C318.193 465.857 318.05 465.829 317.916 465.774C317.783 465.719 317.662 465.638 317.56 465.536C317.458 465.434 317.377 465.313 317.322 465.18C317.267 465.046 317.239 464.904 317.24 464.759L317.239 457.885C317.239 457.741 317.267 457.598 317.322 457.465C317.377 457.331 317.457 457.21 317.559 457.108C317.661 457.006 317.782 456.926 317.916 456.871C318.049 456.816 318.192 456.788 318.336 456.788C318.625 456.789 318.901 456.904 319.105 457.108C319.309 457.312 319.424 457.589 319.425 457.878L319.426 464.767C319.425 465.054 319.311 465.328 319.109 465.532Z" fill="#FFD2D2"/>
+<path d="M216.385 268.02C225.327 284.941 233.562 327.34 240.536 341.54L206.377 375.698C192.177 368.725 151.095 359.172 133.107 351.298C110.797 341.532 96.4755 314.164 114.092 296.547C128.638 282.002 159.471 299.207 174.247 310.158C163.297 295.382 146.59 264.05 160.637 250.003C178.253 232.386 205.006 246.489 216.385 268.02Z" fill="white"/>
+<path d="M186.436 445.116C212.462 471.142 249.631 451.233 284.318 416.547C319.005 381.86 337.654 353.341 291.462 307.149C272.16 287.847 267.218 282.819 248.797 282.819C242.802 282.819 229.05 287.403 225.172 295.865C223.056 303.975 204.514 307.854 190.07 322.298C155.383 356.985 139.946 398.626 186.436 445.116Z" fill="white"/>
+<path d="M265.474 350.618L273.453 358.597" stroke="black" stroke-width="10.5784" stroke-linecap="round"/>
+<path d="M205.135 410.958L213.114 418.936" stroke="black" stroke-width="10.5784" stroke-linecap="round"/>
+<path d="M289.839 352.617L282.359 360.097" stroke="white" stroke-width="21.1567" stroke-linecap="round"/>
+<path d="M275.503 351.91C274.43 352.67 272.2 355.007 271.858 358.279C271.517 361.55 272.638 364.4 273.241 365.415" stroke="#EFEFEF" stroke-width="3.52612" stroke-linecap="round"/>
+<path d="M289.839 352.617L282.359 360.097" stroke="#FFD2D2" stroke-width="14.1045" stroke-linecap="round"/>
+<path d="M217.103 437.884L209.623 445.364" stroke="#FFD2D2" stroke-width="14.1045" stroke-linecap="round"/>
+<path d="M247.751 409.689C252.245 414.183 254.504 416.442 262.732 408.214C270.96 399.986 269.102 398.128 264.207 393.233C259.312 388.338 247.828 384.222 243.284 388.766C238.74 393.31 243.258 405.196 247.751 409.689Z" fill="#FFD2D2"/>
+<path d="M243.283 388.766C240.359 391.69 241.189 397.653 243.348 402.731C246.242 401.678 249.178 399.826 251.76 397.244C254.369 394.635 256.233 391.665 257.279 388.742C252.164 386.523 246.247 385.802 243.283 388.766Z" fill="#EFEFEF"/>
+<path d="M238.342 379.746C237.363 380.725 237.322 381.581 237.119 382.601C236.099 382.805 235.242 382.845 234.263 383.824C233.04 385.048 233.612 387.041 234.672 387.495C236.1 388.107 238.615 387.632 240.791 386.273C242.15 384.098 242.625 381.582 242.013 380.155C241.558 379.094 239.565 378.522 238.342 379.746Z" fill="#FFD2D2"/>
+</g>
+<g clip-path="url(#clip1_2853_1024)">
+<path d="M290.356 380.429C306.985 387.893 334.395 374.772 346.022 367.278C346.638 365.841 347.563 362.154 346.336 358.907C344.802 354.847 301.399 350.287 291.255 351.045C281.111 351.802 269.571 371.099 290.356 380.429Z" fill="#EFD565"/>
+<path d="M370.204 458.352C364.744 458.139 350.692 433.929 346.938 420.697L395.243 411.367C399.989 421.487 407.817 442.8 406.164 445.264C404.098 448.343 377.03 458.618 370.204 458.352Z" fill="#EFD565"/>
+<path d="M356.198 430.971C338.55 426.694 336.304 360.763 347.481 348.288C358.657 335.812 381.639 328.722 393.844 331.412C406.05 334.103 452.327 385.027 441.639 399.872C430.952 414.717 373.845 435.248 356.198 430.971Z" fill="#FFE36C"/>
+<path d="M447.84 430.095C451.885 426.422 447.089 398.844 441.459 386.294L398.457 410.197C401.327 421.001 409.03 442.359 411.88 443.184C415.442 444.214 442.782 434.687 447.84 430.095Z" fill="#FFE36C"/>
+<path d="M455.479 362.588C449.54 345.356 421.213 334.352 407.792 331.004C406.322 331.538 403.002 333.387 401.474 336.505C399.564 340.402 425.945 375.167 433.441 382.044C440.936 388.921 462.903 384.127 455.479 362.588Z" fill="#FFE36C"/>
+<path d="M392.044 408.032C391.908 408.082 391.763 408.106 391.619 408.1C391.474 408.095 391.332 408.061 391.201 408.001L384.912 405.046C384.671 404.911 384.49 404.69 384.406 404.427C384.322 404.165 384.34 403.88 384.458 403.63C384.575 403.379 384.783 403.182 385.04 403.077C385.297 402.973 385.583 402.968 385.843 403.064L392.123 405.964C392.254 406.024 392.373 406.11 392.471 406.217C392.569 406.323 392.645 406.447 392.695 406.583C392.744 406.719 392.766 406.863 392.759 407.008C392.752 407.152 392.717 407.294 392.655 407.425C392.599 407.562 392.516 407.686 392.411 407.79C392.306 407.895 392.181 407.977 392.044 408.032Z" fill="#FFBB4D"/>
+<path d="M387.489 409.69C387.355 409.74 387.211 409.762 387.068 409.757C386.924 409.751 386.783 409.717 386.652 409.657C386.521 409.597 386.404 409.511 386.306 409.405C386.209 409.299 386.133 409.174 386.084 409.039C386.034 408.903 386.012 408.759 386.019 408.615C386.025 408.471 386.06 408.33 386.122 408.2L389.027 401.969C389.087 401.838 389.173 401.721 389.279 401.623C389.385 401.525 389.509 401.45 389.645 401.4C389.78 401.351 389.924 401.329 390.068 401.336C390.212 401.342 390.354 401.377 390.484 401.439C390.745 401.562 390.947 401.783 391.046 402.054C391.145 402.325 391.132 402.624 391.011 402.886L388.1 409.13C387.977 409.39 387.758 409.591 387.489 409.69Z" fill="#FFBB4D"/>
+<path d="M274.308 334.936C286.897 369.522 328.997 367.187 375.093 350.41C421.19 333.632 455.221 308.257 442.632 273.671C421.168 214.697 375.603 208.383 329.507 225.161C283.411 241.938 251.821 273.154 274.308 334.936Z" fill="#FFE36C"/>
+<path d="M418.961 301.424L409.021 305.042" stroke="#FFA052" stroke-width="14.1045" stroke-linecap="round"/>
+<path d="M308.955 341.463L299.014 345.081" stroke="#FFA052" stroke-width="14.1045" stroke-linecap="round"/>
+<path d="M390.396 284.802L394.256 295.406" stroke="black" stroke-width="10.5784" stroke-linecap="round"/>
+<path d="M310.212 313.987L314.071 324.59" stroke="black" stroke-width="10.5784" stroke-linecap="round"/>
+<path d="M338.954 320.787C341.152 326.826 349.655 326.648 358.988 323.251C368.321 319.855 374.949 314.525 372.751 308.486C370.553 302.447 360.361 297.986 351.028 301.383C341.695 304.779 336.756 314.748 338.954 320.787Z" fill="#FFBB4D"/>
+<path d="M333.678 197.542C326.87 210.115 324.734 222.215 326.337 231.937L343.342 223.611C350.344 220.183 354.196 209.056 350.081 198.751C345.965 188.446 337.14 191.148 333.678 197.542Z" fill="#FFE36C"/>
+<path d="M320.34 218.344C324.582 220.261 327.798 226.633 328.875 229.58C322.608 231.226 311.755 233.065 308.517 229.847C305.28 226.628 304.661 221.387 306.463 219.428C308.266 217.469 315.037 215.948 320.34 218.344Z" fill="#FFE36C"/>
+</g>
+<g clip-path="url(#clip2_2853_1024)">
+<ellipse cx="28.1891" cy="30.3773" rx="28.1891" ry="30.3773" transform="matrix(-0.99996 -0.00896114 -0.00896114 0.99996 396.713 349.529)" fill="#49B236"/>
+<ellipse cx="259.924" cy="436.788" rx="28.189" ry="30.3773" transform="rotate(-56.8657 259.924 436.788)" fill="#49B236"/>
+<path d="M314.956 564.304C306.076 548.387 316.765 519.94 323.22 507.706C324.598 506.968 328.19 505.726 331.532 506.666C335.709 507.842 344.024 550.684 344.151 560.855C344.278 571.027 326.057 584.2 314.956 564.304Z" fill="#4B9B3A"/>
+<path d="M372.221 602.629C366.787 603.195 349.434 581.23 343.836 568.665L390.323 552.56C396.461 561.903 407.24 581.886 405.954 584.56C404.347 587.902 379.015 601.922 372.221 602.629Z" fill="#4B9B3A"/>
+<path d="M354.464 577.517C336.387 575.794 324.788 510.852 334.077 496.914C343.365 482.976 365.105 472.689 377.569 473.617C390.034 474.545 443.083 518.37 434.615 534.584C426.147 550.798 372.54 579.241 354.464 577.517Z" fill="#49B236"/>
+<path d="M445.05 563.617C448.532 559.406 439.862 532.79 432.505 521.169L393.34 550.944C397.717 561.23 408.379 581.275 411.317 581.686C414.99 582.2 440.697 568.881 445.05 563.617Z" fill="#49B236"/>
+<path d="M443.012 495.71C434.683 479.498 405.079 472.635 391.318 471.229C389.939 471.967 386.916 474.27 385.847 477.573C384.511 481.702 415.568 512.361 423.965 518.103C432.362 523.844 453.424 515.975 443.012 495.71Z" fill="#49B236"/>
+<path d="M348.765 552.75C358.859 571.595 375.478 568.517 392.988 559.138C410.498 549.759 422.268 537.629 412.174 518.785C398.904 494.012 377.199 487.593 359.689 496.972C342.179 506.352 335.496 527.978 348.765 552.75Z" fill="#9CD43D"/>
+<path d="M386.685 549.714C386.557 549.783 386.418 549.826 386.274 549.841C386.13 549.857 385.984 549.844 385.846 549.803L379.201 547.772C378.943 547.673 378.733 547.48 378.612 547.232C378.491 546.984 378.469 546.699 378.55 546.435C378.631 546.17 378.808 545.945 379.048 545.805C379.287 545.665 379.57 545.62 379.84 545.678L386.469 547.655C386.608 547.696 386.737 547.764 386.85 547.856C386.962 547.947 387.055 548.06 387.123 548.187C387.191 548.314 387.234 548.454 387.247 548.598C387.261 548.742 387.246 548.888 387.203 549.026C387.167 549.169 387.103 549.304 387.014 549.422C386.925 549.54 386.813 549.639 386.685 549.714Z" fill="#49B236"/>
+<path d="M382.413 552.002C382.286 552.071 382.148 552.114 382.005 552.129C381.862 552.143 381.717 552.13 381.579 552.089C381.441 552.048 381.313 551.98 381.201 551.888C381.089 551.797 380.996 551.685 380.928 551.558C380.86 551.431 380.818 551.291 380.804 551.148C380.79 551.004 380.805 550.859 380.847 550.722L382.836 544.141C382.877 544.003 382.945 543.875 383.037 543.763C383.128 543.651 383.24 543.558 383.367 543.49C383.494 543.422 383.634 543.38 383.777 543.366C383.921 543.352 384.066 543.367 384.203 543.409C384.479 543.493 384.711 543.684 384.847 543.938C384.983 544.192 385.013 544.49 384.931 544.767L382.937 551.362C382.853 551.636 382.665 551.866 382.413 552.002Z" fill="#49B236"/>
+<path d="M256.851 494.669C274.414 527.457 316.376 518.972 360.299 495.445C404.221 471.917 434.801 441.544 417.238 408.756C392.008 361.655 344.781 360.952 300.859 384.479C256.937 408.007 229.623 443.838 256.851 494.669Z" fill="#49B236"/>
+<path d="M363.712 382.013L369.04 391.96" stroke="black" stroke-width="10.5784" stroke-linecap="round"/>
+<path d="M257.697 438L263.025 447.946" stroke="black" stroke-width="10.5784" stroke-linecap="round"/>
+<path d="M394.372 406.392L383.803 412.053" stroke="#9CD43D" stroke-width="14.1045" stroke-linecap="round"/>
+<path d="M279.365 467.995L268.797 473.656" stroke="#9CD43D" stroke-width="14.1045" stroke-linecap="round"/>
+<path d="M310.734 438.438C306.733 430.969 304.721 427.214 318.709 419.721C332.696 412.229 334.35 415.317 338.708 423.453C345.849 436.784 343.749 447.909 336.024 452.047C328.299 456.185 317.375 450.837 310.734 438.438Z" fill="#FFD2D2"/>
+<path d="M336.023 452.046C330.611 454.945 323.63 453.187 317.651 447.612C318.663 443.002 321.197 438.116 325.123 433.833C329.405 429.16 334.545 426.075 339.423 424.844C345.693 437.554 343.478 448.053 336.023 452.046Z" fill="#FF2D2D"/>
+</g>
+<g clip-path="url(#clip3_2853_1024)">
+<path d="M367.877 475.339C371.902 486.398 375.783 485.059 380.541 483.328C385.299 481.596 389.132 480.127 385.107 469.068C381.082 458.01 372.539 450.967 369.205 452.181C365.87 453.395 363.852 464.281 367.877 475.339Z" fill="#FFC145"/>
+<path d="M263.835 513.207C267.86 524.265 271.741 522.927 276.499 521.195C281.257 519.463 285.09 517.994 281.065 506.935C277.04 495.877 268.497 488.834 265.162 490.048C261.828 491.262 259.81 502.148 263.835 513.207Z" fill="#FFC145"/>
+<path d="M396.547 462.605C380.806 481.78 389.158 485.443 397.529 492.315C405.9 499.187 411.44 506.277 426.861 487.491C434.69 477.955 434.25 464.653 425.879 457.781C417.508 450.909 404.375 453.069 396.547 462.605Z" fill="white"/>
+<path d="M249.026 516.299C273.41 520.87 269.366 529.044 267.371 539.69C265.375 550.335 265.689 559.326 241.8 554.848C229.673 552.575 221.46 542.103 223.456 531.457C225.451 520.812 236.9 514.026 249.026 516.299Z" fill="black"/>
+<path d="M247.759 528.222C259.912 530.5 258.089 533.547 257.332 537.586C256.575 541.625 256.923 545.08 245.017 542.848C238.973 541.715 234.687 537.522 235.444 533.483C236.201 529.444 241.715 527.089 247.759 528.222Z" fill="#FFCACA"/>
+<path d="M405.776 470.709C397.931 480.266 401.286 481.429 404.462 484.036C407.639 486.644 409.592 489.514 417.278 480.151C421.18 475.398 421.768 469.431 418.592 466.824C415.416 464.217 409.678 465.956 405.776 470.709Z" fill="#FFCACA"/>
+<path d="M264.831 588.109C277.419 622.696 319.52 620.361 365.616 603.583C411.712 586.806 445.744 561.431 433.155 526.844C411.69 467.87 366.125 461.557 320.029 478.334C273.933 495.112 242.344 526.327 264.831 588.109Z" fill="white"/>
+<path d="M314.205 480.567C274.747 496.463 247.863 524.099 260.617 574.511C283.515 568.224 281.277 549.877 286.04 540.645C290.888 531.248 307.38 529.379 315.699 515.54C320.799 507.055 317.834 491.744 314.205 480.567Z" fill="black"/>
+<path d="M387.124 536.467L390.983 547.07" stroke="black" stroke-width="10.5784" stroke-linecap="round"/>
+<path d="M298.324 568.788L302.183 579.391" stroke="black" stroke-width="10.5784" stroke-linecap="round"/>
+<path d="M382.844 565.943C377.888 552.328 362.834 545.308 349.219 550.263L336.893 554.75C323.278 559.705 316.258 574.759 321.213 588.374C324.517 597.451 334.553 602.131 343.63 598.827L372.391 588.359C381.467 585.056 386.147 575.019 382.844 565.943Z" fill="#FFCACA"/>
+<path d="M362.732 566.358L365.385 573.647" stroke="black" stroke-width="7.05224" stroke-linecap="round"/>
+<path d="M336.224 576.006L338.877 583.296" stroke="black" stroke-width="7.05224" stroke-linecap="round"/>
+<path d="M416.412 555.075L406.471 558.693" stroke="#FFD2D2" stroke-width="14.1045" stroke-linecap="round"/>
+<path d="M297.789 598.25L287.849 601.868" stroke="#FFD2D2" stroke-width="14.1045" stroke-linecap="round"/>
+<path d="M354.227 661.028C350.337 664.206 340.399 670.012 331.767 667.815C323.136 665.618 318.391 660.532 317.098 658.264" stroke="black" stroke-width="5.64179"/>
+<path d="M321.93 656.663C320.792 662.932 313.835 666.514 308.777 661.455C302.676 655.355 302.623 649.847 303.532 648.938C304.252 648.22 305.879 650.72 306.359 650.552C306.838 650.385 302.041 644.721 305.266 643.399C309.765 641.555 323.309 649.061 321.93 656.663Z" fill="#A8A8A8"/>
+<path d="M440.618 668.929C439.242 662.766 399.491 589.827 392.698 587.829C385.905 585.832 334.027 606.571 330.793 614.835C327.559 623.098 338.456 662.582 373.717 690.438C413.012 721.481 441.993 675.093 440.618 668.929Z" fill="white"/>
+<path d="M377.853 715.475C374.147 711.46 374.68 691.497 364.807 682.682L416.907 672.063C422.29 681.859 418.399 712.911 416.907 715.475C415.042 718.68 382.084 720.059 377.853 715.475Z" fill="white"/>
+<path d="M378.089 655.995C386.45 672.847 399.424 671.454 412.951 664.742C426.478 658.03 435.436 648.542 427.074 631.69C416.082 609.536 398.895 602.437 385.368 609.149C371.841 615.861 367.097 633.842 378.089 655.995Z" fill="#FFD2D2"/>
+<path d="M410.392 655.844C410.267 655.917 410.129 655.965 409.986 655.985C409.842 656.005 409.696 655.996 409.557 655.96L402.851 654.142C402.59 654.051 402.373 653.864 402.245 653.62C402.116 653.376 402.085 653.092 402.157 652.826C402.23 652.559 402.4 652.328 402.635 652.181C402.869 652.033 403.151 651.979 403.423 652.029L410.111 653.794C410.251 653.83 410.383 653.894 410.498 653.982C410.613 654.069 410.71 654.179 410.782 654.304C410.854 654.429 410.901 654.568 410.919 654.711C410.937 654.855 410.927 655 410.888 655.14C410.857 655.284 410.797 655.421 410.712 655.542C410.627 655.663 410.518 655.766 410.392 655.844Z" fill="#FF8D8D"/>
+<path d="M406.195 658.267C406.071 658.34 405.934 658.387 405.791 658.407C405.649 658.426 405.504 658.417 405.365 658.38C405.226 658.344 405.095 658.28 404.98 658.192C404.866 658.105 404.77 657.995 404.698 657.87C404.625 657.745 404.579 657.608 404.56 657.465C404.542 657.322 404.552 657.176 404.59 657.037L406.368 650.397C406.405 650.258 406.469 650.127 406.557 650.012C406.644 649.898 406.754 649.802 406.878 649.729C407.003 649.657 407.141 649.611 407.284 649.592C407.427 649.574 407.572 649.584 407.712 649.622C407.99 649.697 408.227 649.88 408.372 650.13C408.516 650.38 408.556 650.676 408.482 650.955L406.699 657.61C406.624 657.887 406.443 658.123 406.195 658.267Z" fill="#FF8D8D"/>
+</g>
+<path d="M427.863 589.106C418.882 604.966 389.024 610.622 375.217 611.467C373.87 610.673 370.942 608.25 370.008 604.906C368.841 600.727 401.118 571.354 409.741 565.958C418.364 560.562 439.089 569.28 427.863 589.106Z" fill="white"/>
+<ellipse cx="170.588" cy="141.333" rx="8.11115" ry="6.29313" transform="rotate(-14.1104 170.588 141.333)" fill="white"/>
+<ellipse cx="191.753" cy="139.475" rx="8.11115" ry="6.29313" transform="rotate(-14.1104 191.753 139.475)" fill="white"/>
+<path d="M198.326 138.109L193.075 117.223L171.674 118.132L176.924 139.019" stroke="white" stroke-width="2.79695" stroke-linecap="round" stroke-linejoin="round"/>
+<ellipse cx="13.7061" cy="267.893" rx="8.11115" ry="6.29313" fill="white"/>
+<path d="M20.4136 267.191V245.655C22.3714 248.498 27.0703 254.213 30.2029 254.325" stroke="white" stroke-width="2.79695" stroke-linecap="round" stroke-linejoin="round"/>
+<g clip-path="url(#clip4_2853_1024)">
+<ellipse cx="106.75" cy="31.7678" rx="8.11115" ry="6.29313" transform="rotate(18.0245 106.75 31.7678)" fill="white"/>
+<path d="M113.345 33.1788L120.009 12.6992C120.991 16.009 123.691 22.8976 126.635 23.9733" stroke="white" stroke-width="2.79695" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_2853_1024">
+<rect width="229.903" height="321.582" fill="white" transform="matrix(-0.707107 0.707107 0.707107 0.707107 217.103 186.556)"/>
+</clipPath>
+<clipPath id="clip1_2853_1024">
+<rect width="214.388" height="284.205" fill="white" transform="matrix(-0.939693 0.34202 0.34202 0.939693 417.109 152)"/>
+</clipPath>
+<clipPath id="clip2_2853_1024">
+<rect width="198.168" height="260.228" fill="white" transform="matrix(-0.8815 0.472183 0.472183 0.8815 378.745 321.959)"/>
+</clipPath>
+<clipPath id="clip3_2853_1024">
+<rect width="222.146" height="423.278" fill="white" transform="matrix(-0.939693 0.34202 0.34202 0.939693 416.794 422.101)"/>
+</clipPath>
+<clipPath id="clip4_2853_1024">
+<rect width="34.4025" height="37.4791" fill="white" transform="translate(102.674) rotate(18.0245)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/hackers/login/moving_clouds.svg b/public/hackers/login/moving_clouds.svg
new file mode 100644
index 00000000..6a6ee263
--- /dev/null
+++ b/public/hackers/login/moving_clouds.svg
@@ -0,0 +1,30 @@
+<svg width="2013" height="784" viewBox="0 0 2013 784" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.3">
+<circle cx="458.078" cy="290.596" r="246.596" fill="#EBF9FF"/>
+<circle cx="228.352" cy="337.852" r="128.211" fill="#EBF9FF"/>
+<ellipse cx="794.066" cy="322.884" rx="195.124" ry="192.784" fill="#EBF9FF"/>
+<circle cx="1021.95" cy="408.983" r="128.211" fill="#EBF9FF"/>
+<rect y="362.178" width="1270.88" height="206.822" rx="100" fill="#EBF9FF"/>
+</g>
+<g opacity="0.8">
+<circle cx="597.28" cy="413.609" r="158.609" fill="#EBF9FF"/>
+<circle cx="449.545" cy="443.999" r="82.4645" fill="#EBF9FF"/>
+<ellipse cx="813.409" cy="434.375" rx="125.503" ry="123.998" fill="#EBF9FF"/>
+<circle cx="959.984" cy="489.753" r="82.4645" fill="#EBF9FF"/>
+<rect x="302.669" y="459.653" width="817.422" height="133.027" rx="66.5133" fill="#EBF9FF"/>
+</g>
+<g opacity="0.5">
+<circle cx="59.3923" cy="59.3923" r="59.3923" transform="matrix(-1 1.23066e-09 -8.1095e-09 1 1777.15 0)" fill="#EBF9FF"/>
+<circle cx="30.8795" cy="30.8795" r="30.8795" transform="matrix(-1 1.23066e-09 -8.1095e-09 1 1803.98 39.8962)" fill="#EBF9FF"/>
+<ellipse cx="46.9954" cy="46.4319" rx="46.9954" ry="46.4319" transform="matrix(-1 1.23066e-09 -8.1095e-09 1 1683.83 20.7366)" fill="#EBF9FF"/>
+<circle cx="30.8795" cy="30.8795" r="30.8795" transform="matrix(-1 1.23066e-09 -8.1095e-09 1 1612.84 57.0249)" fill="#EBF9FF"/>
+<rect width="306.09" height="49.8129" rx="24.9065" transform="matrix(-1 1.23066e-09 -8.1095e-09 1 1828.09 76.635)" fill="#EBF9FF"/>
+</g>
+<g opacity="0.3">
+<circle cx="149.601" cy="149.601" r="149.601" transform="matrix(-1 -1.23066e-09 -6.67576e-09 1 1883.79 465)" fill="#EBF9FF"/>
+<circle cx="77.7813" cy="77.7813" r="77.7813" transform="matrix(-1 -1.23066e-09 -6.67576e-09 1 1951.34 565.489)" fill="#EBF9FF"/>
+<ellipse cx="118.375" cy="116.956" rx="118.375" ry="116.956" transform="matrix(-1 -1.23066e-09 -6.67576e-09 1 1648.73 517.234)" fill="#EBF9FF"/>
+<circle cx="77.7813" cy="77.7813" r="77.7813" transform="matrix(-1 -1.23066e-09 -6.67576e-09 1 1469.89 608.641)" fill="#EBF9FF"/>
+<rect width="771" height="125.472" rx="60.6666" transform="matrix(-1 -1.23066e-09 -6.67576e-09 1 2012.09 658.028)" fill="#EBF9FF"/>
+</g>
+</svg>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 7402e54b..5b2a30cd 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -114,10 +114,19 @@ const config: Config = {
             height: '0',
           },
         },
+        moveClouds: {
+          from: {
+            transform: 'translateX(-25%)',
+          },
+          to: {
+            transform: 'translateX(-75%)',
+          },
+        },
       },
       animation: {
         'accordion-down': 'accordion-down 0.2s ease-out',
         'accordion-up': 'accordion-up 0.2s ease-out',
+        moveClouds: 'moveClouds 30s linear infinite',
       },
       fontFamily: {
         jakarta: ['var(--font-jakarta)'],