diff --git a/apps/site/src/app/(main)/guest-login/GuestLogin.tsx b/apps/site/src/app/(main)/guest-login/GuestLogin.tsx
index 1fb65b76..2446fd14 100644
--- a/apps/site/src/app/(main)/guest-login/GuestLogin.tsx
+++ b/apps/site/src/app/(main)/guest-login/GuestLogin.tsx
@@ -1,8 +1,11 @@
+import Image from "next/image";
 import { redirect } from "next/navigation";
 
 import GuestLoginVerificationForm from "./components/GuestLoginVerificationForm";
 import getUserIdentity from "@/lib/utils/getUserIdentity";
 
+import clouds from "@/assets/images/starry_clouds.png";
+
 async function GuestLogin({
 	searchParams,
 }: {
@@ -20,6 +23,11 @@ async function GuestLogin({
 
 	return (
 		<div className="min-h-screen flex flex-col items-center justify-center">
+			<Image
+				src={clouds}
+				alt="Background clouds"
+				className="absolute top-0 min-w-[1500px] xl:min-w-[100vw] xl:w-[100vw] z-[-1] h-[200vh]"
+			/>
 			<h1 className="font-display text-3xl md:text-5xl mb-20">
 				Enter Passphrase
 			</h1>
diff --git a/apps/site/src/app/(main)/login/Login.tsx b/apps/site/src/app/(main)/login/Login.tsx
index 4659571b..c1015411 100644
--- a/apps/site/src/app/(main)/login/Login.tsx
+++ b/apps/site/src/app/(main)/login/Login.tsx
@@ -1,6 +1,8 @@
+import Image from "next/image";
 import { redirect } from "next/navigation";
 import getUserIdentity from "@/lib/utils/getUserIdentity";
 import LoginForm from "./components/LoginForm";
+import clouds from "@/assets/images/starry_clouds.png";
 
 async function Login({
 	searchParams,
@@ -17,7 +19,12 @@ async function Login({
 	}
 
 	return (
-		<div className="min-h-screen flex flex-col items-center justify-center">
+		<div className="min-h-screen flex flex-col items-center justify-center overflow-hidden">
+			<Image
+				src={clouds}
+				alt="Background clouds"
+				className="absolute top-0 min-w-[1500px] xl:min-w-[100vw] xl:w-[100vw] z-[-1] h-[200vh]"
+			/>
 			<h1 className="font-display text-3xl md:text-5xl mb-20">Log In</h1>
 			<LoginForm return_to={return_to} />
 		</div>
diff --git a/apps/site/src/app/(main)/portal/@applicant/ApplicantPortal.tsx b/apps/site/src/app/(main)/portal/@applicant/ApplicantPortal.tsx
index 143fcc5d..12e68f79 100644
--- a/apps/site/src/app/(main)/portal/@applicant/ApplicantPortal.tsx
+++ b/apps/site/src/app/(main)/portal/@applicant/ApplicantPortal.tsx
@@ -1,3 +1,4 @@
+import Image from "next/image";
 import { redirect } from "next/navigation";
 
 import getUserIdentity from "@/lib/utils/getUserIdentity";
@@ -8,6 +9,7 @@ import SignWaiver from "./components/SignWaiver";
 import ReturnHome from "./components/ReturnHome";
 import VerticalTimeline from "./components/timeline/VerticalTimeline";
 import BackgroundStars from "./components/BackgroundStars";
+import clouds from "@/assets/images/starry_clouds.png";
 
 // TODO: use common Status enum from userRecord.ts
 
@@ -46,8 +48,15 @@ async function Portal() {
 	const rejected = status === PortalStatus.rejected;
 
 	return (
-		<div className="relative">
-			<BackgroundStars className="left-[-15%] top-[21%]" />
+		<div>
+			<Image
+				src={clouds}
+				alt="Background clouds"
+				className="absolute top-0 min-w-[1500px] xl:min-w-[100vw] xl:w-[100vw] z-[-1] h-[200vh]"
+			/>
+			<BackgroundStars className="absolute left-[6%] top-[45%]" />
+			<BackgroundStars className="right-[6%] bottom-[12%]" />
+
 			<div className="bg-transparent text-black max-w-6xl rounded-2xl p-6 flex flex-col mb-24 w-full">
 				<h2 className="font-bold font-display text-[var(--color-white)] mb-4 md:mb-[42px] text-[15px] sm:text-2xl md:text-[40px] md:leading-10">
 					{roleToDisplay} Application Status
@@ -60,7 +69,6 @@ async function Portal() {
 				)}
 				{rejected && <ReturnHome />}
 			</div>
-			<BackgroundStars className="right-[-15%] bottom-[21%]" />
 		</div>
 	);
 }
diff --git a/apps/site/src/lib/components/forms/shared/ApplicationFlow.tsx b/apps/site/src/lib/components/forms/shared/ApplicationFlow.tsx
index ba5a2d67..d4996552 100644
--- a/apps/site/src/lib/components/forms/shared/ApplicationFlow.tsx
+++ b/apps/site/src/lib/components/forms/shared/ApplicationFlow.tsx
@@ -1,3 +1,4 @@
+import Image from "next/image";
 import { PropsWithChildren } from "react";
 import { redirect } from "next/navigation";
 
@@ -8,6 +9,7 @@ import ApplicationsClosed from "./ApplicationsClosed/ApplicationsClosed";
 import ApplyConfirm from "./ApplyConfirmation/ApplyConfirm";
 import Title from "./Title/Title";
 import getUserIdentity from "@/lib/utils/getUserIdentity";
+import clouds from "@/assets/images/starry_clouds.png";
 
 export const revalidate = 60;
 
@@ -48,6 +50,11 @@ export default async function ApplicationFlow({
 	);
 	return (
 		<div className="flex flex-col items-center justify-center gap-10 min-h-screen">
+			<Image
+				src={clouds}
+				alt="Background clouds"
+				className="absolute top-0 min-w-[1500px] xl:min-w-[100vw] xl:w-[100vw] z-[-1] h-[200vh]"
+			/>
 			{!applicationsOpened || deadlinePassed ? (
 				<ApplicationsClosed />
 			) : (