diff --git a/src/components/WorkInProgress.tsx b/src/components/WorkInProgress.tsx
index b129808..e846985 100644
--- a/src/components/WorkInProgress.tsx
+++ b/src/components/WorkInProgress.tsx
@@ -3,13 +3,15 @@ import type {FunctionComponent} from "react";
 const WorkInProgress: FunctionComponent = () => {
     return <div className="w-full my-10 flex justify-center">
         <div
-            className="bg-zinc-850 border border-zinc-700 rounded-md max-w-screen-md w-full m-1 p-5 flex flex-col items-center justify-center">
-            <p className="font-semibold text-3xl sm:text-4xl pb-2">Work In Progress</p>
+            className="bg-zinc-850 border border-zinc-700 rounded-md max-w-[23rem] sm:max-w-[25rem] mx-3 w-full p-5 flex flex-col items-center justify-center">
+            <span className="bg-gradient-to-r from-orange-500 via-fuchsia-600 to-cyan-500 text-transparent font-semibold bg-clip-text text-3xl sm:text-4xl pb-2 text-center">
+                Work In Progress
+            </span>
             <p className="text-lg text-center">
                 This website is a work-in progress.
                 <br/>
                 Unfortunately, this page hasn&apos;t been finished yet. Check back later.
-        </p>
+            </p>
         </div>
     </div>
 }