diff --git a/app/globals.css b/app/globals.css
index 3a201945..04a3e253 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -17,6 +17,31 @@
   }
 }
 
+@keyframes shiny {
+  0% {
+    background-position: -1000px 0;
+  }
+  100% {
+    background-position: 1000px 0;
+  }
+}
+
+.shiny-text {
+  background: linear-gradient(
+    90deg,
+    #ffd700 0%,
+    #fff44f 25%,
+    #ffeb3b 50%,
+    #fff44f 75%,
+    #ffd700 100%
+  );
+  background-size: 200% auto;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: shiny 3s linear infinite;
+}
+
 @layer base {
   :root {
     --background: 0 0% 100%;
diff --git a/app/hire/dashboard/page.tsx b/app/hire/dashboard/page.tsx
index 38e32a2c..3b3e8371 100644
--- a/app/hire/dashboard/page.tsx
+++ b/app/hire/dashboard/page.tsx
@@ -10,7 +10,7 @@ import { Loader } from "@/components/ui/loader";
 import { useEmployerApplications, useOwnedJobs, useProfile } from "@/hooks/use-employer-api";
 import { useMobile } from "@/hooks/use-mobile";
 import { cn } from "@/lib/utils";
-import { Bell, Plus } from "lucide-react";
+import { Bell, Briefcase, Plus } from "lucide-react";
 import Link from "next/link";
 import { useState, useRef, useEffect } from "react";
 import { useAuthContext } from "../authctx";
@@ -18,6 +18,7 @@ import { Job } from "@/lib/db/db.types";
 import { FadeIn } from "@/components/animata/fade";
 import { useModal } from "@/hooks/use-modal";
 import { getNotificationPermission, requestNotificationPermission, checkNotificationSupport, shouldShowNotification, sendNotification } from "@/lib/notification-service";
+import { HeaderIcon, HeaderText } from "@/components/ui/text";
 
 function DashboardContent() {
   const { isMobile } = useMobile();
@@ -86,31 +87,34 @@ function DashboardContent() {
         </div>
       </NotifPermsModal>
       <div className={cn("flex-1 flex flex-col w-full py-4", isMobile ? "px-1" : "px-4")}>
-        <h3 className="text-primary tracking-tighter">Welcome back, {profile.data?.name}</h3>
+        <div className="flex flex-row items-center gap-3 mb-2">
+          <HeaderIcon icon={Briefcase} />
+          <HeaderText>Job listings</HeaderText>
+        </div>
         <div className="flex flex-col flex-1">
-              <div>
-                <div className="flex gap-4 mb-4">
-                  <span className="text-gray-500 pb-2"><span className="text-primary font-bold">{activeJobs.length}</span> active listing{activeJobs.length !== 1 ? "s" : ""}</span>
-                  <span className="text-gray-500 pb-2"><span className="text-primary font-bold">{inactiveJobs.length}</span> inactive listing{inactiveJobs.length !== 1 ? "s" : ""}</span>
-                </div>
-                <JobsContent
-                  applications={applications.employer_applications}
-                  jobs={ownedJobs}
-                  employerId={profile.data?.id || ""}
-                  updateJob={handleUpdateJob}
-                  isLoading={isLoading}
-                />
-                {isMobile && (
-                  <Link href="listings/create">
-                    <button
-                      aria-label="Create new listing"
-                      className="fixed bottom-8 right-2 bg-primary rounded-full p-5 z-10 shadow-xl z-[1000]"
-                    >
-                      <Plus className="h-5 w-5 text-white"/>
-                    </button>
-                  </Link>
-                )}
-              </div>
+          <div>
+            <div className="flex gap-4 mb-4">
+              <span className="text-gray-500 pb-2"><span className="text-primary font-bold">{activeJobs.length}</span> active listing{activeJobs.length !== 1 ? "s" : ""}</span>
+              <span className="text-gray-500 pb-2"><span className="text-primary font-bold">{inactiveJobs.length}</span> inactive listing{inactiveJobs.length !== 1 ? "s" : ""}</span>
+            </div>
+            <JobsContent
+              applications={applications.employer_applications}
+              jobs={ownedJobs}
+              employerId={profile.data?.id || ""}
+              updateJob={handleUpdateJob}
+              isLoading={isLoading}
+            />
+            {isMobile && (
+              <Link href="listings/create">
+                <button
+                  aria-label="Create new listing"
+                  className="fixed bottom-8 right-2 bg-primary rounded-full p-5 z-10 shadow-xl z-[1000]"
+                >
+                  <Plus className="h-5 w-5 text-white"/>
+                </button>
+              </Link>
+            )}
+          </div>
         </div>
       </div>
     </ContentLayout>
diff --git a/app/hire/forgot-password/page.tsx b/app/hire/forgot-password/page.tsx
index a789931d..84e8dc71 100644
--- a/app/hire/forgot-password/page.tsx
+++ b/app/hire/forgot-password/page.tsx
@@ -9,6 +9,8 @@ import { EmployerUserService } from "@/lib/api/services";
 import { cn } from "@/lib/utils";
 import { useAppContext } from "@/lib/ctx-app";
 import { AnimatePresence, motion } from "framer-motion";
+import { HeaderIcon, HeaderText } from "@/components/ui/text";
+import { HelpCircle } from "lucide-react";
 
 /**
  * Display the layout for the forgot password page.
@@ -68,9 +70,10 @@ const ForgotPasswordForm = ({}) => {
           className="w-full"
         >
           <Card className="flex flex-col gap-4">
-            <h2 className="text-3xl tracking-tighter font-bold text-gray-700">
-              Forgot password
-            </h2>
+          <div className="flex flex-row items-center gap-3 mb-2">
+            <HeaderIcon icon={HelpCircle} />
+            <HeaderText>Reset password</HeaderText>
+          </div>
             {error && (
               <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg">
                 <p className="text-sm text-red-600 justify-center">{error}</p>
@@ -86,7 +89,10 @@ const ForgotPasswordForm = ({}) => {
               onChange={(e) => setEmail(e.target.value)}
               value={email}
             />
-            <div className="flex justify-end items-center w-[100%]">
+            <div className="flex justify-between items-center w-[100%]">
+              <span className="text-sm text-gray-500">
+                Remember your password? <a className="text-blue-600 hover:text-blue-800 underline font-medium" href="/login">Log in here.</a>
+              </span>
               <Button
                 type="submit"
                 onClick={handle_request}
@@ -95,9 +101,6 @@ const ForgotPasswordForm = ({}) => {
                 {isLoading ? "Sending request..." : "Request password reset"}
               </Button>
             </div>
-            <span className="text-sm text-gray-500">
-              Remember your password? <a className="text-blue-600 hover:text-blue-800 underline font-medium" href="/login">Log in here.</a>
-            </span>
             <span className="text-muted-foreground text-sm">
               Need help? Contact us at <a href="tel://09276604999" className="text-blue-600 hover:text-blue-800 underline font-medium">0927 660 4999</a> or on <a href="viber://add?number=639276604999" className="text-blue-600 hover:text-blue-800 underline font-medium">Viber</a>.
             </span>
diff --git a/app/hire/help/page.tsx b/app/hire/help/page.tsx
index 32fa37aa..6a66f59a 100644
--- a/app/hire/help/page.tsx
+++ b/app/hire/help/page.tsx
@@ -3,9 +3,10 @@ import ContentLayout from "@/components/features/hire/content-layout";
 import { Card } from "@/components/ui/card";
 import { useAppContext } from "@/lib/ctx-app";
 import { cn } from "@/lib/utils";
-import { BadgeInfo, Bug, Calendar, Facebook, LucideMessageCircleMore, Mail, Phone } from "lucide-react";
+import { BadgeInfo, Bug, Calendar, Facebook, HelpCircle, LucideMessageCircleMore, Mail, Phone } from "lucide-react";
 import { AnimatePresence, motion } from "framer-motion";
 import Link from "next/link";
+import { HeaderIcon, HeaderText } from "@/components/ui/text";
 
 export default function HelpPage() {
   const { isMobile } = useAppContext();
@@ -25,7 +26,10 @@ export default function HelpPage() {
           transition={{ duration: 0.3, ease: "easeOut" }}
         >
 
-          <h3 className="text-primary tracking-tighter">Help center</h3>
+          <div className="flex flex-row items-center gap-3 mb-2">
+            <HeaderIcon icon={HelpCircle} />
+            <HeaderText>Help</HeaderText>
+          </div>
           <div className="grid gap-2 lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1">
             <Card
               className="flex flex-col gap-2"
diff --git a/app/hire/listings/details/page.tsx b/app/hire/listings/details/page.tsx
index 4f396d29..3d7b7010 100644
--- a/app/hire/listings/details/page.tsx
+++ b/app/hire/listings/details/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import ContentLayout from "@/components/features/hire/content-layout";
+import JobHeader from "@/components/features/hire/dashboard/JobHeader";
 import JobDetailsPage from "@/components/features/hire/listings/jobDetails";
 import { Loader } from "@/components/ui/loader";
 import { JobService } from "@/lib/api/services";
@@ -46,6 +47,10 @@ function JobDetailsPageRouteContent() {
       fetchJobData();
     }, [jobId]);
 
+  const handleJobUpdate = (updates: Partial<Job>) => {
+    setJobData(prev => prev ? { ...prev, ...updates } : null);
+  };
+
   if (loading || !jobData) {
     return (
       <ContentLayout>
@@ -55,11 +60,17 @@ function JobDetailsPageRouteContent() {
   }
 
   return (
-    <ContentLayout>
+    <ContentLayout className="!p-0">
       <div className="w-full h-full">
-        <JobDetailsPage
+        <JobHeader
           job={jobData}
+          onJobUpdate={handleJobUpdate}
         />
+        <div className="flex-1 overflow-auto pt-4 px-2 sm:px-8">
+          <JobDetailsPage
+            job={jobData}
+          />
+        </div>
       </div>
     </ContentLayout>
   )
diff --git a/app/hire/login/page.tsx b/app/hire/login/page.tsx
index 134cce9f..4d392434 100644
--- a/app/hire/login/page.tsx
+++ b/app/hire/login/page.tsx
@@ -12,9 +12,10 @@ import {
 } from "@/components/EditForm";
 
 import { Card } from "@/components/ui/card";
-import { MailCheck, TriangleAlert } from "lucide-react";
+import { MailCheck, TriangleAlert, User } from "lucide-react";
 import { Loader } from "@/components/ui/loader";
 import { AnimatePresence, motion } from "framer-motion";
+import { HeaderIcon, HeaderText } from "@/components/ui/text";
 
 export default function LoginPage() {
   return (
@@ -108,13 +109,14 @@ function LoginContent() {
         <div className="flex items-center w-full max-w-2xl h-full">
           <Card className="w-full">
             {/* Welcome Message */}
-            <div className="text-3xl tracking-tighter font-bold text-gray-700 mb-4">
-              Employer Login
+            <div className="flex flex-row items-center gap-3 mb-2">
+              <HeaderIcon icon={User} />
+              <HeaderText>Log in</HeaderText>
             </div>
             {/* Error Message */}
             {error && (
               <div className={cn(
-                "flex gap-2 items-center mb-4 p-3 bg-destructive/10 text-destructive border border-destructive/50 rounded-lg",
+                "flex gap-2 items-center mb-4 p-3 bg-destructive/10 text-destructive border border-destructive/50 rounded-[0.33em]",
                 isMobile ? "flex-col items-start" : ""
               )}>
                 <TriangleAlert size={isMobile ? 24 : 20} />
diff --git a/app/hire/register/page.tsx b/app/hire/register/page.tsx
index 6e4c203b..9b57a3b6 100644
--- a/app/hire/register/page.tsx
+++ b/app/hire/register/page.tsx
@@ -20,8 +20,9 @@ import { Loader } from "@/components/ui/loader";
 import { cn } from "@/lib/utils";
 import { useAppContext } from "@/lib/ctx-app";
 import Link from "next/link";
-import { TriangleAlert } from "lucide-react";
+import { TriangleAlert, User } from "lucide-react";
 import { AnimatePresence, motion } from "framer-motion";
+import { HeaderIcon, HeaderText } from "@/components/ui/text";
 
 const [EmployerRegisterForm, useEmployerRegisterForm] =
   createEditForm<Employer>();
@@ -189,14 +190,13 @@ const EmployerEditor = ({
           className="w-full"
         >
           <Card>
-            <div className="mb-4">
-              <h2 className="text-3xl tracking-tighter font-bold text-gray-700">
-                Employer Registration
-              </h2>
+            <div className="flex flex-row items-center gap-3 mb-2">
+              <HeaderIcon icon={User} />
+              <HeaderText>Register</HeaderText>
             </div>
             {missingFields.length > 0 && (
               <div className={cn(
-                "flex gap-2 items-center mb-4 p-3 bg-destructive/10 text-destructive border border-destructive/50 rounded-lg",
+                "flex gap-2 items-center mb-4 p-3 bg-destructive/10 text-destructive border border-destructive/50 rounded-[0.33em]",
                 isMobile ? "flex-col items-start" : ""
               )}>
                 <TriangleAlert size={isMobile ? 24 : 20} />
@@ -231,7 +231,6 @@ const EmployerEditor = ({
                 )}
               />
               <div>
-                <ErrorLabel value={formErrors.phone_number} />
                 <FormInput
                   label="Phone Number"
                   value={formData.phone_number ?? ""}
@@ -240,9 +239,9 @@ const EmployerEditor = ({
                     missingFields.find((field) => field === "Phone number") ? "border-destructive" : ""
                   )}
                 />
+                <ErrorLabel value={formErrors.phone_number} />
               </div>
               <div>
-                <ErrorLabel value={formErrors.email} />
                 <FormInput
                   label="Email"
                   value={formData.email ?? ""}
@@ -251,6 +250,7 @@ const EmployerEditor = ({
                     missingFields.find((field) => field === "Contact email") ? "border-destructive" : ""
                   )}
                 />
+                <ErrorLabel value={formErrors.email} />
               </div>
               <div>
                 <FormInput
@@ -268,16 +268,6 @@ const EmployerEditor = ({
             </div>
             <div className="mb-4 flex flex-col space-y-3">
               <div>
-                <FormInput
-                  label="Company Name (optional)"
-                  value={formData.name ?? ""}
-                  setter={fieldSetter("name")}
-                  required={false}
-                  maxLength={100}
-                />
-              </div>
-              <div>
-                <ErrorLabel value={formErrors.legal_entity_name} />
                 <FormInput
                   label="Legal Entity Name"
                   value={formData.legal_entity_name ?? ""}
@@ -288,6 +278,16 @@ const EmployerEditor = ({
                     missingFields.find((field) => field === "Legal entity name") ? "border-destructive" : ""
                   )}
                 />
+                <ErrorLabel value={formErrors.legal_entity_name} />
+              </div>
+              <div>
+                <FormInput
+                  label="Company Name (optional)"
+                  value={formData.name ?? ""}
+                  setter={fieldSetter("name")}
+                  required={false}
+                  maxLength={100}
+                />
               </div>
               <FormInput
                 label="Office City"
diff --git a/app/student/forms/page.tsx b/app/student/forms/page.tsx
index c2c6c796..3f89ae69 100644
--- a/app/student/forms/page.tsx
+++ b/app/student/forms/page.tsx
@@ -32,10 +32,12 @@ export default function FormsPage() {
 
   // Profile check only runs if authenticated
   useEffect(() => {
-    if (!isAuthenticated()) return; // Exit if not authenticated
+    if (!isAuthenticated()) {
+      return; // Exit if not authenticated
+    }
 
     if (!profile.data?.department && !profile.isPending)
-      router.push("/profile");
+      router.push("/profile/complete-profile");
   }, [isAuthenticated, profile.data?.department, profile.isPending, router]);
 
   // Query 1: Check for updates (cheap query - just a timestamp)
diff --git a/app/student/miro/page.tsx b/app/student/miro/page.tsx
index cb98db7b..b7539d80 100644
--- a/app/student/miro/page.tsx
+++ b/app/student/miro/page.tsx
@@ -11,6 +11,194 @@ import { InteractiveGridPattern } from "@/components/landingStudent/sections/1st
 import { ArrowRight, Circle } from "lucide-react";
 import { cn } from "@/lib/utils";
 import confetti from "canvas-confetti";
+import { AnimatedShinyText } from "@/components/ui/animated-shiny-text";
+
+function EventEndAnimation({
+  show,
+  onDone,
+}: {
+  show: boolean;
+  onDone?: () => void;
+}) {
+  const [step, setStep] = useState<5 | 4 | 3 | 2 | 1 | 0>(5);
+  const isAnimatingRef = useRef(false);
+
+  useEffect(() => {
+    if (!show || isAnimatingRef.current) return;
+
+    isAnimatingRef.current = true;
+    setStep(5);
+
+    const timeline = [
+      { t: 0, value: 5 },
+      { t: 1000, value: 4 },
+      { t: 2000, value: 3 },
+      { t: 3000, value: 2 },
+      { t: 4000, value: 1 },
+      { t: 5000, value: 0 },
+    ];
+
+    const timeouts: NodeJS.Timeout[] = [];
+
+    timeline.forEach((item) => {
+      timeouts.push(setTimeout(() => setStep(item.value as any), item.t));
+    });
+
+    // confetti at TIME'S UP
+    timeouts.push(
+      setTimeout(() => {
+        confetti({
+          particleCount: 300,
+          spread: 90,
+          startVelocity: 60,
+          scalar: 1.2,
+          origin: { y: 0.6 },
+        });
+
+        confetti({
+          particleCount: 180,
+          spread: 120,
+          startVelocity: 50,
+          scalar: 1,
+          origin: { y: 0.7 },
+        });
+      }, 5000),
+    );
+
+    timeouts.push(
+      setTimeout(() => {
+        isAnimatingRef.current = false;
+        onDone?.();
+      }, 6700),
+    );
+
+    return () => {
+      timeouts.forEach(clearTimeout);
+    };
+  }, [show]);
+
+  const text = step === 0 ? "TIME'S UP!" : step;
+
+  return (
+    <AnimatePresence>
+      {show && (
+        <motion.div
+          className="fixed inset-0 z-[10000] flex items-center justify-center pointer-events-none"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.25 }}
+        >
+          {/* Dark overlay */}
+          <motion.div
+            className="absolute inset-0 bg-black/60 backdrop-blur-sm"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+          />
+
+          {/* Red flash pulse */}
+          <motion.div
+            className="absolute inset-0 bg-red-600"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: step === 0 ? [0, 0.4, 0] : 0 }}
+            transition={{ duration: 0.4 }}
+          />
+
+          {/* Big countdown/text */}
+          <motion.div
+            key={text}
+            initial={{
+              scale: 0.2,
+              opacity: 0,
+              rotate: -12,
+              filter: "blur(12px)",
+            }}
+            animate={{
+              scale: [0.2, 1.35, 1],
+              opacity: [0, 1, 1],
+              rotate: [0, 0, 0],
+              filter: ["blur(12px)", "blur(0px)", "blur(0px)"],
+            }}
+            exit={{
+              scale: 2,
+              opacity: 0,
+              filter: "blur(16px)",
+            }}
+            transition={{
+              duration: 0.65,
+              ease: [0.2, 0.8, 0.2, 1],
+            }}
+            className="relative flex items-center justify-center"
+          >
+            {/* Glow ring */}
+            <motion.div
+              className="absolute rounded-full border border-red-400/30"
+              style={{
+                width: "min(65vw, 380px)",
+                height: "min(65vw, 380px)",
+              }}
+              animate={{
+                scale: [1, 1.15, 1],
+                opacity: [0.4, 0.7, 0.4],
+              }}
+              transition={{
+                duration: 1,
+                repeat: Infinity,
+                ease: "easeInOut",
+              }}
+            />
+
+            {/* Rotating red ring */}
+            <motion.div
+              className="absolute rounded-full border-[5px] border-transparent border-t-red-500 border-r-red-400"
+              style={{
+                width: "min(70vw, 420px)",
+                height: "min(70vw, 420px)",
+              }}
+              animate={{ rotate: 360 }}
+              transition={{
+                duration: 1,
+                repeat: Infinity,
+                ease: "linear",
+              }}
+            />
+
+            {/* Text */}
+            <motion.span
+              className="font-black tracking-tight drop-shadow-[0_0_25px_rgba(220,38,38,0.8)]"
+              style={{
+                fontSize: step === 0 ? "min(18vw, 160px)" : "min(30vw, 220px)",
+                lineHeight: 1,
+                color: "#DC2626",
+              }}
+              animate={{
+                x: step === 0 ? [0, -8, 8, -8, 8, 0] : 0,
+                y: step === 0 ? [0, -5, 5, -5, 5, 0] : 0,
+              }}
+              transition={{
+                duration: 0.5,
+                repeat: step === 0 ? 6 : 0,
+              }}
+            >
+              {text}
+            </motion.span>
+          </motion.div>
+
+          {/* Bottom caption */}
+          <motion.p
+            className="absolute bottom-16 text-sm sm:text-base font-mono text-white/60"
+            initial={{ opacity: 0, y: 8 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.15 }}
+          >
+            {step === 0 ? "Event has concluded." : "Time left..."}
+          </motion.p>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
 
 function CountdownDisplayAnimation({
   show,
@@ -556,7 +744,7 @@ export default function MiroThonLandingPage() {
   const discordLink = "https://discord.gg/QZ9mXJQm";
 
   const eventStart = useMemo(() => new Date("2026-02-13T18:00:00+08:00"), []); // REAL DATE
-  const eventEnd = useMemo(() => new Date("2026-02-14T23:59:00+08:00"), []);
+  const eventEnd = useMemo(() => new Date("2026-02-15T00:00:00+08:00"), []);
 
   const [countdown, setCountdown] = useState<Countdown>(
     getCountdown(eventStart),
@@ -567,18 +755,29 @@ export default function MiroThonLandingPage() {
     return now >= eventStart.getTime() && now < eventEnd.getTime();
   });
 
+  const [isEventPast, setIsEventPast] = useState(() => {
+    const now = new Date().getTime();
+    return now > eventEnd.getTime();
+  });
+
   const [showLaunchAnimation, setShowLaunchAnimation] = useState(false);
+  const [showEndAnimation, setShowEndAnimation] = useState(false);
   const wasLiveRef = useRef(false);
   const animationTriggeredRef = useRef(false);
+  const endAnimationTriggeredRef = useRef(false);
 
   useEffect(() => {
     const interval = setInterval(() => {
       const now = new Date().getTime();
       const isLive = now >= eventStart.getTime() && now < eventEnd.getTime();
+      const isPast = now > eventEnd.getTime();
       setIsEventLive(isLive);
+      setIsEventPast(isPast);
 
       // Calculate countdown, switching between start and end times
-      const newCountdown = getCountdown(isLive ? eventEnd : eventStart);
+      const newCountdown = getCountdown(
+        isPast ? eventStart : isLive ? eventEnd : eventStart,
+      );
       setCountdown(newCountdown);
 
       // Calculate total remaining seconds until eventStart
@@ -598,6 +797,22 @@ export default function MiroThonLandingPage() {
         animationTriggeredRef.current = true;
       }
 
+      // Trigger animation when 5 seconds remain before eventEnd
+      const secondsUntilEnd = eventEnd.getTime() - now;
+      const secondsUntilEndValue = Math.max(
+        0,
+        Math.floor(secondsUntilEnd / 1000),
+      );
+
+      if (
+        secondsUntilEndValue === 5 &&
+        !endAnimationTriggeredRef.current &&
+        isEventLive
+      ) {
+        setShowEndAnimation(true);
+        endAnimationTriggeredRef.current = true;
+      }
+
       // Reset animation trigger only when event goes live
       if (isLive && !wasLiveRef.current) {
         animationTriggeredRef.current = false;
@@ -621,6 +836,12 @@ export default function MiroThonLandingPage() {
         onDone={() => setShowLaunchAnimation(false)}
       />
 
+      {/* Event End Animation */}
+      <EventEndAnimation
+        show={showEndAnimation}
+        onDone={() => setShowEndAnimation(false)}
+      />
+
       {/* texture */}
       <div className="pointer-events-none fixed inset-0 -z-20" aria-hidden>
         <InteractiveGridPattern
@@ -702,7 +923,7 @@ export default function MiroThonLandingPage() {
             countdown.hours * 3600 +
             countdown.minutes * 60 +
             countdown.seconds;
-          const isUrgent = totalSeconds <= 60 && !isEventLive;
+          const isUrgent = totalSeconds <= 60;
 
           return (
             <motion.div
@@ -731,7 +952,22 @@ export default function MiroThonLandingPage() {
           {/* HEADLINE WITH INLINE LOGO */}
           <div className="max-w-5xl relative">
             <AnimatePresence mode="wait">
-              {isEventLive ? (
+              {isEventPast ? (
+                <motion.div
+                  key="past"
+                  initial={{ opacity: 0, scale: 0.95, y: 10 }}
+                  animate={{ opacity: 1, scale: 1, y: 0 }}
+                  exit={{ opacity: 0, scale: 0.95, y: -10 }}
+                  transition={{ duration: 0.5, ease: "easeInOut" }}
+                  className="flex flex-col items-center gap-4"
+                >
+                  <h1 className="text-5xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black leading-[1.05] tracking-tight relative">
+                    <AnimatedShinyText>
+                      You've crossed the finish line
+                    </AnimatedShinyText>
+                  </h1>
+                </motion.div>
+              ) : isEventLive ? (
                 <motion.div
                   key="live"
                   initial={{ opacity: 0, scale: 0.95, y: 10 }}
@@ -786,90 +1022,96 @@ export default function MiroThonLandingPage() {
               )}
             </AnimatePresence>
             {/* Sticky Note - Desktop: positioned bottom-right, Mobile: below */}
-            <motion.div
-              className={`relative xl:absolute mt-2 xl:mt-0 flex justify-center xl:justify-end ${isEventLive ? "xl:top-[15.5rem] xl:right-[5rem] xl:translate-y-1/3" : "xl:top-[11rem] xl:right-[13rem] xl:translate-y-1/3"}`}
-              style={{ rotate: "-3deg" }}
-              animate={{ rotate: [-3, 1, -2] }}
-              transition={{
-                duration: 4,
-                repeat: Infinity,
-                repeatType: "reverse",
-              }}
-            >
-              {!isEventLive && (
-                <span
-                  className="inline-block text-black/60 text-lg sm:text-xl md:text-2xl bg-yellow-100 px-3 py-1 sm:px-4 sm:py-2 rounded-[0.33em] shadow-lg"
-                  style={{
-                    boxShadow:
-                      "0 4px 6px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05)",
-                  }}
-                >
-                  (yes, that{" "}
-                  <a
-                    href="https://miro.com"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="hover:underline transition-all duration-200"
+            {!isEventPast && (
+              <motion.div
+                className={`relative xl:absolute mt-2 xl:mt-0 flex justify-center xl:justify-end ${isEventLive ? "xl:top-[15.5rem] xl:right-[5rem] xl:translate-y-1/3" : "xl:top-[11rem] xl:right-[13rem] xl:translate-y-1/3"}`}
+                style={{ rotate: "-3deg" }}
+                animate={{ rotate: [-3, 1, -2] }}
+                transition={{
+                  duration: 4,
+                  repeat: Infinity,
+                  repeatType: "reverse",
+                }}
+              >
+                {!isEventLive && (
+                  <span
+                    className="inline-block text-black/60 text-lg sm:text-xl md:text-2xl bg-yellow-100 px-3 py-1 sm:px-4 sm:py-2 rounded-[0.33em] shadow-lg"
+                    style={{
+                      boxShadow:
+                        "0 4px 6px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05)",
+                    }}
                   >
-                    Miro
-                  </a>
-                  )
-                </span>
-              )}
-            </motion.div>
+                    (yes, that{" "}
+                    <a
+                      href="https://miro.com"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="hover:underline transition-all duration-200"
+                    >
+                      Miro
+                    </a>
+                    )
+                  </span>
+                )}
+              </motion.div>
+            )}
           </div>
 
-          {/* COUNTDOWN/COUNTDOWN TIMER */}
-          <div className="mt-4 sm:mt-8 flex w-full max-w-full items-end justify-center gap-1 sm:gap-3 md:gap-4 lg:gap-6 overflow-x-auto pb-2">
-            {(() => {
-              const totalSeconds =
-                countdown.days * 86400 +
-                countdown.hours * 3600 +
-                countdown.minutes * 60 +
-                countdown.seconds;
-              const isUrgent = totalSeconds <= 60 && !isEventLive;
-
-              return (
-                <>
-                  <CountdownBlock
-                    label="Days"
-                    value={countdown.days}
-                    isUrgent={isUrgent}
-                  />
-                  <div className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black text-black/20 flex-shrink-0 mb-6">
-                    :
-                  </div>
-                  <CountdownBlock
-                    label="Hours"
-                    value={countdown.hours}
-                    isUrgent={isUrgent}
-                  />
-                  <div className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black text-black/20 flex-shrink-0 mb-6">
-                    :
-                  </div>
-                  <CountdownBlock
-                    label="Mins"
-                    value={countdown.minutes}
-                    isUrgent={isUrgent}
-                  />
-                  <div className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black text-black/20 flex-shrink-0 mb-6">
-                    :
-                  </div>
-                  <CountdownBlock
-                    label="Secs"
-                    value={countdown.seconds}
-                    isUrgent={isUrgent}
-                  />
-                </>
-              );
-            })()}
-          </div>
+          {/* COUNTDOWN/COUNTDOWN TIMER - Only show when event is live or before it starts */}
+          {!isEventPast && (
+            <div className="mt-4 sm:mt-8 flex w-full max-w-full items-end justify-center gap-1 sm:gap-3 md:gap-4 lg:gap-6 overflow-x-auto pb-2">
+              {(() => {
+                const totalSeconds =
+                  countdown.days * 86400 +
+                  countdown.hours * 3600 +
+                  countdown.minutes * 60 +
+                  countdown.seconds;
+                const isUrgent = totalSeconds <= 60;
+
+                return (
+                  <>
+                    <CountdownBlock
+                      label="Days"
+                      value={countdown.days}
+                      isUrgent={isUrgent}
+                    />
+                    <div className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black text-black/20 flex-shrink-0 mb-6">
+                      :
+                    </div>
+                    <CountdownBlock
+                      label="Hours"
+                      value={countdown.hours}
+                      isUrgent={isUrgent}
+                    />
+                    <div className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black text-black/20 flex-shrink-0 mb-6">
+                      :
+                    </div>
+                    <CountdownBlock
+                      label="Mins"
+                      value={countdown.minutes}
+                      isUrgent={isUrgent}
+                    />
+                    <div className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black text-black/20 flex-shrink-0 mb-6">
+                      :
+                    </div>
+                    <CountdownBlock
+                      label="Secs"
+                      value={countdown.seconds}
+                      isUrgent={isUrgent}
+                    />
+                  </>
+                );
+              })()}
+            </div>
+          )}
 
           {/* DESCRIPTION */}
           <p className="mt-4 sm:mt-6 max-w-2xl text-sm sm:text-base md:text-lg leading-relaxed text-black/70 font-mono">
             {isEventLive
               ? "Submit your work on Discord. Good luck!"
-              : "Can you build something in 30 hours that will impress Miro?"}
+              : isEventPast
+                ? "Thank you for participating in the Miro-thon"
+                : "Can you build something in 30 hours that will impress Miro?"}
           </p>
 
           {/* CTA BUTTONS */}
@@ -880,7 +1122,7 @@ export default function MiroThonLandingPage() {
                 className={`w-full h-14 text-lg font-bold bg-blue-600 text-white hover:bg-blue-500`}
                 onClick={openDiscord}
               >
-                {isEventLive ? "Join Discord" : "Join the Miro-thon!"}
+                Join Discord
                 <ArrowRight className="ml-2 h-5 w-5" />
               </Button>
             </MagneticButton>
@@ -1015,7 +1257,7 @@ export default function MiroThonLandingPage() {
         </motion.div>
       </section>
 
-      {/* TIME IS TICKING / EVENT LIVE SECTION */}
+      {/* TIME IS TICKING / EVENT LIVE / MIRO-THON CONCLUDED SECTION */}
       <section className="mx-auto w-full max-w-6xl px-6 pb-20">
         <motion.div
           initial={{ opacity: 0, y: 20 }}
@@ -1024,109 +1266,134 @@ export default function MiroThonLandingPage() {
           transition={{ duration: 0.6 }}
         >
           <div
-            className={`relative overflow-hidden rounded-[0.33em] border p-8 sm:p-12 ${isEventLive ? "border-red-600 bg-red-950" : "border-gray-800 bg-black"}`}
+            className={`relative overflow-hidden rounded-[0.33em] border p-8 sm:p-12 ${
+              isEventPast
+                ? "border-gray-800 bg-black"
+                : isEventLive
+                  ? "border-red-600 bg-red-950"
+                  : "border-gray-800 bg-black"
+            }`}
           >
             {/* Gradient background effect */}
             <div
-              className={`pointer-events-none absolute inset-0 ${isEventLive ? "bg-gradient-to-r from-red-600/10 via-transparent to-red-600/10" : "bg-gradient-to-r from-blue-600/10 via-transparent to-blue-600/10"}`}
+              className={`pointer-events-none absolute inset-0 ${
+                isEventPast
+                  ? "bg-gradient-to-r from-yellow-600/10 via-transparent to-yellow-600/10"
+                  : isEventLive
+                    ? "bg-gradient-to-r from-red-600/10 via-transparent to-red-600/10"
+                    : "bg-gradient-to-r from-blue-600/10 via-transparent to-blue-600/10"
+              }`}
             />
 
-            <div className="relative z-10 flex flex-col md:flex-row items-center justify-between gap-8 md:gap-12">
-              {/* Left: Title and Timer */}
-              <div className="flex flex-col gap-4 lg:gap-6 flex-1 w-full md:w-auto md:items-start items-center md:text-left text-center">
-                <div>
-                  {isEventLive ? (
-                    <h2 className="text-3xl md:text-4xl font-black text-white">
-                      The event is{" "}
-                      <span className="text-red-400">LIVE NOW</span>
-                    </h2>
-                  ) : (
-                    <h2 className="text-3xl md:text-4xl font-black text-white">
-                      Time is <span className="text-yellow-300">ticking</span>
-                    </h2>
-                  )}
-                </div>
-
-                {/* Countdown Timer */}
-                <div className="flex items-center justify-center md:justify-start gap-1 sm:gap-2 md:gap-3">
-                  <div className="flex flex-col items-center">
-                    <p
-                      className={`text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-black font-mono ${isEventLive ? "text-red-400" : "text-white"}`}
-                    >
-                      {String(countdown.days).padStart(2, "0")}
-                    </p>
-                    <p
-                      className={`mt-1 text-xs font-bold ${isEventLive ? "text-red-300/60" : "text-white/40"}`}
-                    >
-                      D
-                    </p>
-                  </div>
-                  <p
-                    className={`text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-black -mt-2 ${isEventLive ? "text-red-600/50" : "text-white/50"}`}
-                  >
-                    :
-                  </p>
-                  <div className="flex flex-col items-center">
-                    <p
-                      className={`text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-black font-mono ${isEventLive ? "text-red-400" : "text-white"}`}
-                    >
-                      {String(countdown.hours).padStart(2, "0")}
-                    </p>
-                    <p
-                      className={`mt-1 text-xs font-bold ${isEventLive ? "text-red-300/60" : "text-white/40"}`}
-                    >
-                      H
-                    </p>
+            {isEventPast ? (
+              // Miro-thon Concluded State
+              <div className="relative z-10 flex flex-col items-center justify-center text-center">
+                <h2 className="text-3xl md:text-4xl lg:text-5xl font-black text-white mb-4">
+                  Miro-thon Concluded
+                </h2>
+                <p className="text-white/70 font-mono text-base md:text-lg">
+                  Thank you for participating in the Miro-thon!
+                </p>
+              </div>
+            ) : (
+              // Live or Before Event State
+              <div className="relative z-10 flex flex-col md:flex-row items-center justify-between gap-8 md:gap-12">
+                {/* Left: Title and Timer */}
+                <div className="flex flex-col gap-4 lg:gap-6 flex-1 w-full md:w-auto md:items-start items-center md:text-left text-center">
+                  <div>
+                    {isEventLive ? (
+                      <h2 className="text-3xl md:text-4xl font-black text-white">
+                        The event is{" "}
+                        <span className="text-red-400">LIVE NOW</span>
+                      </h2>
+                    ) : (
+                      <h2 className="text-3xl md:text-4xl font-black text-white">
+                        Time is <span className="text-yellow-300">ticking</span>
+                      </h2>
+                    )}
                   </div>
-                  <p
-                    className={`text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-black -mt-2 ${isEventLive ? "text-red-600/50" : "text-white/50"}`}
-                  >
-                    :
-                  </p>
-                  <div className="flex flex-col items-center">
-                    <p
-                      className={`text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-black font-mono ${isEventLive ? "text-red-400" : "text-white"}`}
-                    >
-                      {String(countdown.minutes).padStart(2, "0")}
-                    </p>
+
+                  {/* Countdown Timer */}
+                  <div className="flex items-center justify-center md:justify-start gap-1 sm:gap-2 md:gap-3">
+                    <div className="flex flex-col items-center">
+                      <p
+                        className={`text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-black font-mono ${isEventLive ? "text-red-400" : "text-white"}`}
+                      >
+                        {String(countdown.days).padStart(2, "0")}
+                      </p>
+                      <p
+                        className={`mt-1 text-xs font-bold ${isEventLive ? "text-red-300/60" : "text-white/40"}`}
+                      >
+                        D
+                      </p>
+                    </div>
                     <p
-                      className={`mt-1 text-xs font-bold ${isEventLive ? "text-red-300/60" : "text-white/40"}`}
+                      className={`text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-black -mt-2 ${isEventLive ? "text-red-600/50" : "text-white/50"}`}
                     >
-                      M
+                      :
                     </p>
-                  </div>
-                  <p
-                    className={`text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-black -mt-2 ${isEventLive ? "text-red-600/50" : "text-white/50"}`}
-                  >
-                    :
-                  </p>
-                  <div className="flex flex-col items-center">
+                    <div className="flex flex-col items-center">
+                      <p
+                        className={`text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-black font-mono ${isEventLive ? "text-red-400" : "text-white"}`}
+                      >
+                        {String(countdown.hours).padStart(2, "0")}
+                      </p>
+                      <p
+                        className={`mt-1 text-xs font-bold ${isEventLive ? "text-red-300/60" : "text-white/40"}`}
+                      >
+                        H
+                      </p>
+                    </div>
                     <p
-                      className={`text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-black font-mono ${isEventLive ? "text-red-400" : "text-white"}`}
+                      className={`text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-black -mt-2 ${isEventLive ? "text-red-600/50" : "text-white/50"}`}
                     >
-                      {String(countdown.seconds).padStart(2, "0")}
+                      :
                     </p>
+                    <div className="flex flex-col items-center">
+                      <p
+                        className={`text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-black font-mono ${isEventLive ? "text-red-400" : "text-white"}`}
+                      >
+                        {String(countdown.minutes).padStart(2, "0")}
+                      </p>
+                      <p
+                        className={`mt-1 text-xs font-bold ${isEventLive ? "text-red-300/60" : "text-white/40"}`}
+                      >
+                        M
+                      </p>
+                    </div>
                     <p
-                      className={`mt-1 text-xs font-bold ${isEventLive ? "text-red-300/60" : "text-white/40"}`}
+                      className={`text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-black -mt-2 ${isEventLive ? "text-red-600/50" : "text-white/50"}`}
                     >
-                      S
+                      :
                     </p>
+                    <div className="flex flex-col items-center">
+                      <p
+                        className={`text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-black font-mono ${isEventLive ? "text-red-400" : "text-white"}`}
+                      >
+                        {String(countdown.seconds).padStart(2, "0")}
+                      </p>
+                      <p
+                        className={`mt-1 text-xs font-bold ${isEventLive ? "text-red-300/60" : "text-white/40"}`}
+                      >
+                        S
+                      </p>
+                    </div>
                   </div>
                 </div>
-              </div>
 
-              {/* Right: CTA Button */}
-              <MagneticButton className="w-full md:w-auto">
-                <Button
-                  size="lg"
-                  className={`w-full md:w-auto h-14 text-lg font-bold transition-colors duration-200 ${isEventLive ? "bg-red-600 text-white hover:bg-red-500" : "bg-yellow-400 text-black hover:bg-yellow-300"}`}
-                  onClick={openDiscord}
-                >
-                  {isEventLive ? "View Submissions" : "Join Now"}
-                  <ArrowRight className="ml-2 h-5 w-5" />
-                </Button>
-              </MagneticButton>
-            </div>
+                {/* Right: CTA Button */}
+                <MagneticButton className="w-full md:w-auto">
+                  <Button
+                    size="lg"
+                    className={`w-full md:w-auto h-14 text-lg font-bold transition-colors duration-200 ${isEventLive ? "bg-red-600 text-white hover:bg-red-500" : "bg-yellow-400 text-black hover:bg-yellow-300"}`}
+                    onClick={openDiscord}
+                  >
+                    {isEventLive ? "View Submissions" : "Join Now"}
+                    <ArrowRight className="ml-2 h-5 w-5" />
+                  </Button>
+                </MagneticButton>
+              </div>
+            )}
           </div>
         </motion.div>
       </section>
diff --git a/app/student/profile/page.tsx b/app/student/profile/page.tsx
index 6f56ad61..aeb53446 100644
--- a/app/student/profile/page.tsx
+++ b/app/student/profile/page.tsx
@@ -154,7 +154,7 @@ export default function ProfilePage() {
       !isProfileBaseComplete(profile.data) ||
       profile.data?.acknowledged_auto_apply === false
     ) {
-      router.push(`profile/complete-profile?dest=forms`);
+      router.push(`/forms`);
     }
   }, []);
 
diff --git a/components/features/hire/dashboard/ApplicationsCommandBar.tsx b/components/features/hire/dashboard/ApplicationsCommandBar.tsx
index 6747a574..036506ec 100644
--- a/components/features/hire/dashboard/ApplicationsCommandBar.tsx
+++ b/components/features/hire/dashboard/ApplicationsCommandBar.tsx
@@ -86,7 +86,7 @@ export function ApplicationsCommandBar({
       {visible && (
         <>
         <motion.div
-          className="fixed bottom-4 z-[100] shadow-xl w-max overflow-hidden rounded-md"
+          className="fixed bottom-4 z-[100] shadow-xl w-max overflow-hidden rounded-0.33em"
           initial={{ scale: 0.98, filter: "blur(4px)", opacity: 0, x: "-50%" }}
           animate={{ scale: 1, filter: "blur(0px)", opacity: 1, x: "-50%", backdropFilter: "blur(50%)" }}
           exit={{ scale: 0.98, filter: "blur(4px)", opacity: 0, x: "-50%" }}
diff --git a/components/features/hire/dashboard/ApplicationsContent.tsx b/components/features/hire/dashboard/ApplicationsContent.tsx
index d7b1fd36..b777d165 100644
--- a/components/features/hire/dashboard/ApplicationsContent.tsx
+++ b/components/features/hire/dashboard/ApplicationsContent.tsx
@@ -313,7 +313,7 @@ export const ApplicationsContent = forwardRef<
             </div>
           </div>
       ) : (
-        <table className="relative table-auto border-separate border-spacing-0 w-full bg-white border-gray-200 border text-sm rounded-md overflow-hidden">
+        <table className="relative table-auto border-separate border-spacing-0 w-full bg-white border-gray-200 border text-sm rounded-[0.33em] overflow-hidden">
           <thead className="bg-gray-100">
             <tr className="text-left">
               <th 
diff --git a/components/features/hire/dashboard/JobHeader.tsx b/components/features/hire/dashboard/JobHeader.tsx
index 1f3f931a..36db490f 100644
--- a/components/features/hire/dashboard/JobHeader.tsx
+++ b/components/features/hire/dashboard/JobHeader.tsx
@@ -4,9 +4,9 @@ import { useOwnedJobs } from "@/hooks/use-employer-api";
 import { useModal } from "@/hooks/use-modal";
 import { Job } from "@/lib/db/db.types";
 import { cn, formatDateWithoutTime } from "@/lib/utils";
-import { ArrowLeft, Edit, Info, Trash2 } from "lucide-react";
+import { ArrowLeft, Edit, Info, Trash2, Users } from "lucide-react";
 import Link from "next/link";
-import { useRouter } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
 import { useState } from "react";
 import { ListingsDeleteModal } from "../listings";
 import { useListingsBusinessLogic } from "@/hooks/hire/listings/use-listings-business-logic";
@@ -56,6 +56,7 @@ export default function JobHeader({
   };
 
   const { isMobile } = useAppContext();
+  const pathname = usePathname();
 
   return (
     <div className="sticky top-0 z-40 border-b border-gray-200 bg-white shadow-sm">
@@ -73,10 +74,10 @@ export default function JobHeader({
         <div className={cn(
           "flex items-center justify-between gap-4",
           isMobile
-          ? "flex-col"
+          ? "flex-col items-start"
           : ""
         )}>
-          <div className="flex gap-4">
+          <div className="flex justify-between gap-4">
             {/* back button */}
             <button
               onClick={handleJobBack}
@@ -111,51 +112,75 @@ export default function JobHeader({
               </span>
             </div>
           </div>
-          <div className="flex items-center gap-2 flex-shrink-0">
-            <div className="flex items-center gap-1">
-              <Link
-                href={{
-                  pathname: "/listings/details",
-                  query: { jobId: job.id },
-                }}
+          <div className="flex gap-1">
+            <Link
+              href={{
+                pathname: "/dashboard/manage",
+                query: { jobId: job.id },
+              }}
+            >
+              <Button
+                variant="ghost"
+                size="sm"
+                disabled={saving}
+                className={cn(
+                  "hover:bg-primary/10 gap-1",
+                  pathname === "/dashboard/manage"
+                  ? "bg-primary/10 text-primary"
+                  : ""
+                )}
               >
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  disabled={saving}
-                  className="hover:bg-primary/10 gap-1"
-                >
-                  <Info size={16} />
-                  <span>Preview</span>
-                </Button>
-              </Link>
-              <Link
-                href={{
-                  pathname: "/listings/edit",
-                  query: { jobId: job.id },
-                }}
+                <Users size={16} />
+                <span>Applicants</span>
+              </Button>
+            </Link>
+            <Link
+              href={{
+                pathname: "/listings/details",
+                query: { jobId: job.id },
+              }}
+            >
+              <Button
+                variant="ghost"
+                size="sm"
+                disabled={saving}
+                className={cn(
+                  "hover:bg-primary/10 gap-1",
+                  pathname === "/listings/details"
+                  ? "bg-primary/10 text-primary"
+                  : ""
+                )}
               >
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  disabled={saving}
-                  className="hover:bg-primary/10 gap-1"
-                >
-                  <Edit size={16} />
-                  <span>Edit</span>
-                </Button>
-              </Link>
+                <Info size={16} />
+                <span>Preview</span>
+              </Button>
+            </Link>
+            <Link
+              href={{
+                pathname: "/listings/edit",
+                query: { jobId: job.id },
+              }}
+            >
               <Button
                 variant="ghost"
                 size="sm"
                 disabled={saving}
-                className="hover:bg-destructive/10 hover:text-destructive gap-1"
-                onClick={handleJobDelete}
+                className="hover:bg-primary/10 gap-1"
               >
-                <Trash2 size={16} />
-                <span>Delete</span>
+                <Edit size={16} />
+                <span>Edit</span>
               </Button>
-            </div>
+            </Link>
+            <Button
+              variant="ghost"
+              size="sm"
+              disabled={saving}
+              className="hover:bg-destructive/10 hover:text-destructive gap-1"
+              onClick={handleJobDelete}
+            >
+              <Trash2 size={16} />
+              <span>Delete</span>
+            </Button>
           </div>
         </div>
       </div>
diff --git a/components/features/hire/listings/jobDetails.tsx b/components/features/hire/listings/jobDetails.tsx
index 2575b280..3f671665 100644
--- a/components/features/hire/listings/jobDetails.tsx
+++ b/components/features/hire/listings/jobDetails.tsx
@@ -37,12 +37,6 @@ const JobDetailsPage = ({
           isMobile ? "px-1" : ""
         )}
       >
-        <button
-          onClick={handleBack}
-          className="flex items-center text-gray-600 hover:text-gray-900 transition-colors m-4"
-        >
-          <ArrowLeft className="s-8" />
-        </button>
         <Card>
           <JobDetails
             job={job}
diff --git a/components/features/student/job/share-job-button.tsx b/components/features/student/job/share-job-button.tsx
index d93b1d14..5ab475f9 100644
--- a/components/features/student/job/share-job-button.tsx
+++ b/components/features/student/job/share-job-button.tsx
@@ -1,7 +1,7 @@
 "use client";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
-import { Check, Share } from "lucide-react";
+import { Check, Copy, CopyCheck, Share } from "lucide-react";
 import { useEffect, useState } from "react";
 
 export const ShareJobButton = ({ id }: { id: string }) => {
@@ -21,15 +21,20 @@ export const ShareJobButton = ({ id }: { id: string }) => {
 
   return (
     <Button
-      variant="ghost"
+      variant="outline"
       onClick={copyJobLink}
       name="Copy link"
       scheme="default"
       size="md"
-      className={cn("!p-4", clicked ? "text-supportive" : "text-gray-500")}
+      className={cn(
+        "!p-4", 
+        clicked 
+        ? "text-supportive border-supportive"
+        : ""
+      )}
     >
-      {clicked ? <Check /> : <Share />}
-      {clicked ? "Copied link" : "Share"}
+      {clicked ? <CopyCheck /> : <Copy />}
+      {clicked ? "Copied link" : "Copy link"}
     </Button>
   );
 };
diff --git a/components/features/student/resume-parser/ResumeUpload.tsx b/components/features/student/resume-parser/ResumeUpload.tsx
index 0b763e24..93a059b6 100644
--- a/components/features/student/resume-parser/ResumeUpload.tsx
+++ b/components/features/student/resume-parser/ResumeUpload.tsx
@@ -1,7 +1,10 @@
 import { RefObject, useRef, useState } from "react";
 import { AnimatePresence } from "framer-motion";
 import { ProcessingTransition } from "./ProcessingTransition";
-import { UploadIcon } from "lucide-react";
+import { TriangleAlert, UploadIcon } from "lucide-react";
+import { Toast } from "@/components/ui/toast";
+import { cn } from "@/lib/utils";
+import { useAppContext } from "@/lib/ctx-app";
 
 const ResumeUpload = ({
   ref,
@@ -10,7 +13,7 @@ const ResumeUpload = ({
   onComplete,
   isParsing,
   accept = ".pdf,application/pdf",
-  maxSizeMB = 5,
+  maxSizeMB = 2.5,
 }: {
   ref: RefObject<HTMLInputElement>;
   promise?: Promise<any>;
@@ -22,6 +25,8 @@ const ResumeUpload = ({
 }) => {
   const [file, setFile] = useState<File | null>(null);
   const [isDragging, setIsDragging] = useState(false);
+  const [fileTooBig, setFileTooBig] = useState(false);
+  const [noFile, setNoFile] = useState(false);
   const dragCounter = useRef(0);
 
   const triggerFileDialog = () => ref.current?.click();
@@ -31,7 +36,7 @@ const ResumeUpload = ({
     // simple checks
     const tooBig = f.size > maxSizeMB * 1024 * 1024;
     if (tooBig) {
-      alert(`File must be ≤ ${maxSizeMB}MB.`);
+      setFileTooBig(true);
       return;
     }
     // accept check (relies on extension or mime)
@@ -43,10 +48,12 @@ const ResumeUpload = ({
       (a) => !a.startsWith(".") && f.type.toLowerCase() === a
     );
     if (!(nameOk || mimeOk)) {
-      alert("Please upload a PDF file.");
+      setNoFile(true);
       return;
     }
 
+    setFileTooBig(false);
+    setNoFile(false);
     setFile(f);
     onSelect(f);
   };
@@ -83,12 +90,32 @@ const ResumeUpload = ({
     handleChosenFile(f);
   };
 
+  const { isMobile } = useAppContext();
+
   return (
     <AnimatePresence>
       {isParsing ? (
         <ProcessingTransition promise={promise} onComplete={onComplete} />
       ) : (
         <div className="flex flex-col items-center w-full mx-auto">
+          {fileTooBig &&
+            <div className={cn(
+              "flex gap-2 items-center mb-4 p-3 bg-destructive/10 text-destructive border border-destructive/50 rounded-[0.33em] w-full",
+              isMobile ? "flex-col items-start" : ""
+            )}>
+              <TriangleAlert size={isMobile ? 24 : 20} />
+              <span className="text-sm justify-center">Please upload a file smaller than 2.5 MB.</span>
+            </div>
+          }
+          {noFile &&
+            <div className={cn(
+              "flex gap-2 items-center mb-4 p-3 bg-destructive/10 text-destructive border border-destructive/50 rounded-[0.33em] w-full",
+              isMobile ? "flex-col items-start" : ""
+            )}>
+              <TriangleAlert size={isMobile ? 24 : 20} />
+              <span className="text-sm justify-center">Please upload your resume.</span>
+            </div>
+          }
           <div
             className={
               "flex flex-col items-center justify-center w-full h-48 border-2 border-dashed rounded-[0.33em] cursor-pointer transition-colors " +
diff --git a/components/ui/action-button.tsx b/components/ui/action-button.tsx
index 36d96bfe..ebeef1c8 100644
--- a/components/ui/action-button.tsx
+++ b/components/ui/action-button.tsx
@@ -26,7 +26,7 @@ export const ActionButton = ({
         className="
           group
           relative
-          flex justify-center items-center p-2 transition rounded-sm
+          flex justify-center items-center p-2 transition rounded-[0.33em]
           enabled:data-[destructive=true]:hover:text-red-600
           enabled:data-[destructive=true]:hover:bg-destructive/25
           enabled:data-[destructive=false]:hover:bg-primary/25
diff --git a/components/ui/animated-shiny-text.tsx b/components/ui/animated-shiny-text.tsx
index 87ed9c62..3417eaac 100644
--- a/components/ui/animated-shiny-text.tsx
+++ b/components/ui/animated-shiny-text.tsx
@@ -10,12 +10,7 @@ export function AnimatedShinyText({
 }) {
   // Inherits font-size/weight from parent; just paints the text
   return (
-    <span
-      className={cn(
-        "shiny-text bg-clip-text text-transparent inline-block align-baseline",
-        className
-      )}
-    >
+    <span className={cn("shiny-text inline-block align-baseline", className)}>
       {children}
     </span>
   );
diff --git a/components/ui/command-menu.tsx b/components/ui/command-menu.tsx
index 546e65f6..44c0597f 100644
--- a/components/ui/command-menu.tsx
+++ b/components/ui/command-menu.tsx
@@ -43,7 +43,7 @@ export const CommandMenu = ({
               onClick={item.onClick}
               disabled={item.disabled}
               className={cn(
-                "flex justify-center items-center rounded-sm gap-2 p-2",
+                "flex justify-center items-center rounded-[0.33em] gap-2 p-2",
                 "data-[button-layout=vertical]:flex-col",
                 item.destructive
                   ? "text-red-700 hover:bg-red-300/50 active:bg-red-400/75"
@@ -75,7 +75,7 @@ export const CommandMenu = ({
       role="toolbar"
       onClick={(e) => e.stopPropagation()}
       className={cn(
-        "flex gap-4 px-6 py-2 justify-center items-stretch text-xs bg-white border border-gray-300 rounded-md transition bg-clip-padding bg-clip-border",
+        "flex gap-4 px-6 py-2 justify-center items-stretch text-xs bg-white border border-gray-300 rounded-[0.33em] transition bg-clip-padding bg-clip-border",
         className,
       )}
     >
diff --git a/components/ui/labels.tsx b/components/ui/labels.tsx
index cf731a34..d5057251 100644
--- a/components/ui/labels.tsx
+++ b/components/ui/labels.tsx
@@ -165,7 +165,7 @@ export const EmployerPropertyLabel: ValueComponent = ({
 
 export const ErrorLabel: ValueComponent = ({ value, fallback }) => {
   return value ? (
-    <div className="flex items-center gap-1 text-destructive text-xs mb-1">
+    <div className="flex items-center gap-1 text-destructive text-xs m-1">
       <AlertCircle className="h-3 w-3" />
       <span>{value ?? fallback}</span>
     </div>
diff --git a/components/ui/status-badge.tsx b/components/ui/status-badge.tsx
index 872fc9d6..9846798f 100644
--- a/components/ui/status-badge.tsx
+++ b/components/ui/status-badge.tsx
@@ -18,7 +18,7 @@ export default function StatusBadge({
 
   return (
     <div className={cn(
-      "flex justify-center items-center gap-1 w-fit px-2 py-1 rounded-sm text-xs transition",
+      "flex justify-center items-center gap-1 w-fit px-2 py-1 rounded-[0.33em] text-xs transition",
       status.bgColor,
       status.fgColor,
     )}>
diff --git a/hooks/use-file.tsx b/hooks/use-file.tsx
index 026ffd42..2d8016ef 100644
--- a/hooks/use-file.tsx
+++ b/hooks/use-file.tsx
@@ -196,19 +196,32 @@ export const useFileUpload = ({
    */
   const upload = async (file?: File | null) => {
     if (!file) return false;
-
-    // Perform the file upload
-    setIsUploading(true);
-    const form = FileUploadFormBuilder.new(filename);
-    form.file(file);
-
-    // Check for success
-    const result = (await uploader(form.build())) as { success?: boolean };
-    setResponse(result);
-
-    if (!result.success) return;
-    if (!silent) alert("File uploaded successfully!");
-    setIsUploading(false);
+    
+    try {
+      // Perform the file upload
+      setIsUploading(true);
+      const form = FileUploadFormBuilder.new(filename);
+      form.file(file);
+  
+      // Check for success
+      const result = (await uploader(form.build())) as { success?: boolean };
+      setResponse(result);
+  
+      if (!result.success) {
+        if (!silent) alert("Upload failed.");
+        return false;
+      };
+
+      if (!silent) alert("File uploaded successfully!");
+      return true;
+    } catch (error) {
+      console.error("Upload failed: ", error);
+      setResponse({ success: false });
+      
+      if (!silent) alert("Upload failed. Please try again later.");
+    } finally {
+      setIsUploading(false);
+    }
   };
 
   return {