diff --git a/src/components/CareerExplorer.js b/src/components/CareerExplorer.js
index aaa3232..5303a32 100644
--- a/src/components/CareerExplorer.js
+++ b/src/components/CareerExplorer.js
@@ -291,8 +291,28 @@ function CareerExplorer({ handleCareerClick, userState, areaTitle }) {
     return weightMap[priority][response] || 1;
   };
   
+  const renderLoadingOverlay = () => {
+   if (!loading) return null;
+   return (
+     <div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-900 bg-opacity-50">
+       <div className="rounded bg-white p-6 shadow-lg">
+         <div className="mb-2 w-full max-w-md rounded bg-gray-200">
+           <div
+             className="h-2 rounded bg-blue-500 transition-all"
+             style={{ width: `${progress}%` }}
+           />
+         </div>
+         <p className="mt-1 text-center text-sm text-gray-600">
+           {progress}% — Loading Career Suggestions...
+         </p>
+       </div>
+     </div>
+   );
+ };
+
   return (
     <div className="career-explorer-container bg-white p-6 rounded shadow">
+      {renderLoadingOverlay()}
       {showModal && (
         <CareerPrioritiesModal
           userProfile={userProfile}