diff --git a/app/_assets/illustrations.ts b/app/_assets/illustrations.ts
index 8a97763..7fe81b7 100644
--- a/app/_assets/illustrations.ts
+++ b/app/_assets/illustrations.ts
@@ -1,7 +1,8 @@
 import { ImageExport } from "./assets";
 import netResume from "./illustrations/dotnet-resume.svg";
 import footer from "./illustrations/footer.svg";
-import foxRuns from "./illustrations/fox_runs.gif";
+import foxRunsDark from "./illustrations/fox_runs-dark.gif";
+import foxRunsLight from "./illustrations/fox_runs-light.gif";
 import fullstackResumeImg from "./illustrations/fullstack-resume.svg";
 import fox from "./illustrations/home-decor.svg";
 import itsMe from "./illustrations/its_me.webp";
@@ -35,9 +36,15 @@ export const footerImage: ImageExport =
 	alt: "A cartoon fox looking at a laptop"
 };
 
-export const spinner: ImageExport =
+export const spinnerDark: ImageExport =
 {
-	src: foxRuns,
+	src: foxRunsDark,
+	alt: "Cute cartoon fox runs to the left"
+};
+
+export const spinnerLight: ImageExport =
+{
+	src: foxRunsLight,
 	alt: "Cute cartoon fox runs to the left"
 };
 
@@ -80,7 +87,8 @@ export const projectsImg: ImageExport =
 const illustrations =
 {
 	footerImage,
-	spinner,
+	spinnerDark,
+	spinnerLight,
 	homeDecor,
 	profilePicture,
 	aboutPicture,
diff --git a/app/_assets/illustrations/fox_runs-dark.gif b/app/_assets/illustrations/fox_runs-dark.gif
new file mode 100644
index 0000000..18e6b68
Binary files /dev/null and b/app/_assets/illustrations/fox_runs-dark.gif differ
diff --git a/app/_assets/illustrations/fox_runs-light.gif b/app/_assets/illustrations/fox_runs-light.gif
new file mode 100644
index 0000000..39a092d
Binary files /dev/null and b/app/_assets/illustrations/fox_runs-light.gif differ
diff --git a/app/_assets/illustrations/fox_runs.gif b/app/_assets/illustrations/fox_runs.gif
deleted file mode 100644
index 2aeb12a..0000000
Binary files a/app/_assets/illustrations/fox_runs.gif and /dev/null differ
diff --git a/app/loading.module.scss b/app/loading.module.scss
index 7a9579d..5cfc178 100644
--- a/app/loading.module.scss
+++ b/app/loading.module.scss
@@ -10,5 +10,21 @@
 	{
 		width: 300px;
 		height: auto;
+
+		@media (prefers-color-scheme: dark)
+		{
+			&.light
+			{
+				display: none;
+			}
+		}
+
+		@media (prefers-color-scheme: light)
+		{
+			&.dark
+			{
+				display: none;
+			}
+		}
 	}
 }
diff --git a/app/loading.tsx b/app/loading.tsx
index 96edc62..6ed3c62 100644
--- a/app/loading.tsx
+++ b/app/loading.tsx
@@ -1,11 +1,12 @@
 import Image from "next/image";
 import React from "react";
-import { spinner } from "./_assets/illustrations";
+import { spinnerDark, spinnerLight } from "./_assets/illustrations";
 import cls from "./loading.module.scss";
 
 const LoadingPage: React.FC = () => (
 	<div className={ cls.root } role="alert" aria-label="Loading page">
-		<Image src={ spinner.src } alt={ spinner.alt } priority unoptimized />
+		<Image className={ cls.dark } src={ spinnerDark.src } alt={ spinnerDark.alt } priority unoptimized />
+		<Image className={ cls.light } src={ spinnerLight.src } alt={ spinnerLight.alt } priority unoptimized />
 	</div>
 );