diff --git a/frontend/app/compile/page.tsx b/frontend/app/compile/page.tsx
index 1bcdb5c..8090378 100644
--- a/frontend/app/compile/page.tsx
+++ b/frontend/app/compile/page.tsx
@@ -1,9 +1,9 @@
 "use client";
 
-import { useState, useEffect, Suspense } from "react";
+import { useState, useEffect, useRef, Suspense } from "react";
 import { useSearchParams } from "next/navigation";
 import Link from "next/link";
-import { ArrowRight, Loader2, Link as LinkIcon, FileText, AlertCircle } from "lucide-react";
+import { ArrowRight, Loader2, Link as LinkIcon, FileText, AlertCircle, CheckCircle } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { parseJobDescription, compileResume, type ParsedJD, type CompileResponse } from "@/lib/api";
@@ -17,16 +17,45 @@ function CompilePageContent() {
   const [isParsingJD, setIsParsingJD] = useState(false);
   const [parsedJD, setParsedJD] = useState<ParsedJD | null>(null);
   const [isCompiling, setIsCompiling] = useState(false);
+  const [compileStep, setCompileStep] = useState(0);
   const [compileResult, setCompileResult] = useState<CompileResponse | null>(null);
   const [error, setError] = useState<string | null>(null);
+  const [isValidUrl, setIsValidUrl] = useState(true);
+  const stepTimerRef = useRef<NodeJS.Timeout | null>(null);
 
-  // Redirect if no master version
   useEffect(() => {
     if (!masterVersion) {
       // Could redirect to vault
     }
   }, [masterVersion]);
 
+  useEffect(() => {
+    if (isCompiling) {
+      setCompileStep(0);
+      stepTimerRef.current = setInterval(() => {
+        setCompileStep((prev) => (prev < 2 ? prev + 1 : prev));
+      }, 3000);
+    } else {
+      if (stepTimerRef.current) {
+        clearInterval(stepTimerRef.current);
+        stepTimerRef.current = null;
+      }
+      setCompileStep(0);
+    }
+    return () => {
+      if (stepTimerRef.current) clearInterval(stepTimerRef.current);
+    };
+  }, [isCompiling]);
+
+  const handleUrlInputChange = (value: string) => {
+    setJdInput(value);
+    if (value.trim() === "") {
+      setIsValidUrl(true);
+    } else {
+      setIsValidUrl(/^https?:\/\/.+/.test(value.trim()));
+    }
+  };
+
   const handleParseJD = async () => {
     if (!jdInput.trim()) return;
 
@@ -93,7 +122,7 @@ function CompilePageContent() {
         <Link href="/vault" className="text-blue-600 hover:underline text-sm mb-2 inline-block">
           &larr; Back to Upload
         </Link>
-        <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
+        <h1 className="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white">
           Add Job Description
         </h1>
         <p className="text-gray-600 dark:text-gray-300 mt-2">
@@ -126,11 +155,11 @@ function CompilePageContent() {
           </CardHeader>
           <CardContent className="space-y-4">
             {/* Input Mode Toggle */}
-            <div className="flex gap-2">
+            <div className="flex flex-wrap gap-2">
               <Button
                 variant={inputMode === "url" ? "default" : "outline"}
                 size="sm"
-                onClick={() => setInputMode("url")}
+                onClick={() => { setInputMode("url"); setIsValidUrl(true); }}
                 className="gap-2"
               >
                 <LinkIcon className="w-4 h-4" />
@@ -139,7 +168,7 @@ function CompilePageContent() {
               <Button
                 variant={inputMode === "text" ? "default" : "outline"}
                 size="sm"
-                onClick={() => setInputMode("text")}
+                onClick={() => { setInputMode("text"); setIsValidUrl(true); }}
                 className="gap-2"
               >
                 <FileText className="w-4 h-4" />
@@ -149,13 +178,24 @@ function CompilePageContent() {
 
             {/* Input Field */}
             {inputMode === "url" ? (
-              <input
-                type="url"
-                placeholder="https://careers.example.com/job/123"
-                value={jdInput}
-                onChange={(e) => setJdInput(e.target.value)}
-                className="w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-700"
-              />
+              <div>
+                <input
+                  type="url"
+                  placeholder="https://careers.example.com/job/123"
+                  value={jdInput}
+                  onChange={(e) => handleUrlInputChange(e.target.value)}
+                  className={`w-full px-4 py-3 border rounded-lg focus:ring-2 dark:bg-gray-800 dark:border-gray-700 ${
+                    !isValidUrl
+                      ? "border-red-500 focus:ring-red-500 focus:border-red-500"
+                      : "focus:ring-blue-500 focus:border-blue-500"
+                  }`}
+                />
+                {!isValidUrl && (
+                  <p className="text-sm text-red-500 mt-1">
+                    Please enter a valid URL starting with http:// or https://
+                  </p>
+                )}
+              </div>
             ) : (
               <textarea
                 placeholder="Paste the full job description here..."
@@ -175,7 +215,7 @@ function CompilePageContent() {
 
             <Button
               onClick={handleParseJD}
-              disabled={!jdInput.trim() || isParsingJD}
+              disabled={!jdInput.trim() || isParsingJD || (inputMode === "url" && !isValidUrl)}
               className="w-full"
             >
               {isParsingJD ? (
@@ -256,7 +296,7 @@ function CompilePageContent() {
             </div>
           )}
 
-          <div className="flex justify-center">
+          <div className="flex flex-col items-center gap-4">
             <Button
               size="lg"
               onClick={handleCompile}
@@ -275,6 +315,37 @@ function CompilePageContent() {
                 </>
               )}
             </Button>
+
+            {isCompiling && (
+              <div className="w-full max-w-sm space-y-2 text-sm">
+                {[
+                  "Scoring bullets against job requirements...",
+                  "Optimizing selection...",
+                  "Generating PDF...",
+                ].map((label, i) => (
+                  <div key={i} className="flex items-center gap-2">
+                    {i < compileStep ? (
+                      <CheckCircle className="w-4 h-4 text-green-500 flex-shrink-0" />
+                    ) : i === compileStep ? (
+                      <Loader2 className="w-4 h-4 animate-spin text-blue-500 flex-shrink-0" />
+                    ) : (
+                      <div className="w-4 h-4 rounded-full border border-muted-foreground/30 flex-shrink-0" />
+                    )}
+                    <span
+                      className={
+                        i < compileStep
+                          ? "text-green-600 line-through"
+                          : i === compileStep
+                          ? "text-foreground font-medium"
+                          : "text-muted-foreground"
+                      }
+                    >
+                      Step {i + 1}: {label}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            )}
           </div>
         </div>
       )}
diff --git a/frontend/app/review/[compileId]/page.tsx b/frontend/app/review/[compileId]/page.tsx
index 72e5e39..449dabb 100644
--- a/frontend/app/review/[compileId]/page.tsx
+++ b/frontend/app/review/[compileId]/page.tsx
@@ -3,9 +3,10 @@
 import { useState, useEffect } from "react";
 import { useParams } from "next/navigation";
 import Link from "next/link";
-import { Download, FileText, CheckCircle, Info, Loader2 } from "lucide-react";
+import { Download, FileText, CheckCircle, Info, Loader2, AlertCircle } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
 import { getCompileResult, getPdfUrl, type CompileResponse, type ScoredUnit, type Provenance } from "@/lib/api";
 
 export default function ReviewPage() {
@@ -36,8 +37,53 @@ export default function ReviewPage() {
 
   if (isLoading) {
     return (
-      <div className="flex items-center justify-center min-h-screen">
-        <Loader2 className="w-8 h-8 animate-spin text-blue-600" />
+      <div className="container mx-auto py-8 px-4 space-y-6">
+        <div>
+          <Skeleton className="h-4 w-32 mb-4" />
+          <Skeleton className="h-9 w-64 mb-2" />
+          <Skeleton className="h-4 w-48" />
+        </div>
+        <Card>
+          <CardContent className="pt-6">
+            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 text-center">
+              {Array.from({ length: 3 }).map((_, i) => (
+                <div key={i}>
+                  <Skeleton className="h-9 w-16 mx-auto mb-2" />
+                  <Skeleton className="h-4 w-24 mx-auto" />
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+        <div className="grid lg:grid-cols-2 gap-6">
+          <Card>
+            <CardHeader>
+              <Skeleton className="h-6 w-40 mb-2" />
+              <Skeleton className="h-4 w-56" />
+            </CardHeader>
+            <CardContent className="space-y-3">
+              {Array.from({ length: 4 }).map((_, i) => (
+                <div key={i} className="p-4 border rounded-lg">
+                  <Skeleton className="h-4 w-24 mb-2" />
+                  <Skeleton className="h-4 w-full" />
+                  <Skeleton className="h-4 w-5/6 mt-1" />
+                </div>
+              ))}
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader>
+              <Skeleton className="h-6 w-36 mb-2" />
+              <Skeleton className="h-4 w-48" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-center py-12">
+                <Skeleton className="w-12 h-12 rounded-full mx-auto mb-4" />
+                <Skeleton className="h-4 w-64 mx-auto" />
+              </div>
+            </CardContent>
+          </Card>
+        </div>
       </div>
     );
   }
@@ -67,23 +113,23 @@ export default function ReviewPage() {
         <Link href="/compile" className="text-blue-600 hover:underline text-sm mb-2 inline-block">
           &larr; Back to Job Description
         </Link>
-        <div className="flex items-center justify-between">
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
           <div>
-            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
+            <h1 className="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white">
               Review & Export
             </h1>
             <p className="text-gray-600 dark:text-gray-300 mt-2">
               Compile ID: {compileId}
             </p>
           </div>
-          <div className="flex gap-3">
-            <Button variant="outline" asChild>
+          <div className="flex flex-col sm:flex-row gap-3 w-full sm:w-auto">
+            <Button variant="outline" asChild className="w-full sm:w-auto">
               <a href={`/api/provenance/${compileId}`} download>
                 <FileText className="w-4 h-4 mr-2" />
                 Source Data (JSON)
               </a>
             </Button>
-            <Button asChild>
+            <Button asChild className="w-full sm:w-auto">
               <a href={getPdfUrl(compileId)} download>
                 <Download className="w-4 h-4 mr-2" />
                 Download PDF
@@ -96,9 +142,9 @@ export default function ReviewPage() {
       {/* Coverage Stats */}
       <Card className="mb-6">
         <CardContent className="pt-6">
-          <div className="grid grid-cols-3 gap-4 text-center">
+          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 text-center">
             <div>
-              <div className="text-3xl font-bold text-blue-600">
+              <div className="text-2xl sm:text-3xl font-bold text-blue-600">
                 {result.selected_units.length}
               </div>
               <div className="text-sm text-gray-600 dark:text-gray-300">
@@ -106,7 +152,7 @@ export default function ReviewPage() {
               </div>
             </div>
             <div>
-              <div className="text-3xl font-bold text-green-600">
+              <div className="text-2xl sm:text-3xl font-bold text-green-600">
                 {Math.round(result.coverage.coverage_score * 100)}%
               </div>
               <div className="text-sm text-gray-600 dark:text-gray-300">
@@ -114,7 +160,7 @@ export default function ReviewPage() {
               </div>
             </div>
             <div>
-              <div className="text-3xl font-bold text-purple-600">
+              <div className="text-2xl sm:text-3xl font-bold text-purple-600">
                 {result.coverage.must_haves_matched}/{result.coverage.must_haves_total}
               </div>
               <div className="text-sm text-gray-600 dark:text-gray-300">
@@ -136,48 +182,57 @@ export default function ReviewPage() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <div className="space-y-3 max-h-[600px] overflow-y-auto">
-              {result.selected_units.map((unit) => (
-                <div
-                  key={unit.unit_id}
-                  onClick={() => setSelectedUnit(unit)}
-                  className={`p-4 border rounded-lg cursor-pointer transition-all ${
-                    selectedUnit?.unit_id === unit.unit_id
-                      ? "border-blue-500 bg-blue-50 dark:bg-blue-900/20"
-                      : "hover:border-gray-400"
-                  }`}
-                >
-                  <div className="flex items-center justify-between mb-2">
-                    <div className="flex items-center gap-2">
-                      <span className="px-2 py-0.5 bg-gray-100 dark:bg-gray-800 rounded text-xs capitalize">
-                        {unit.section}
-                      </span>
-                      {unit.org && (
-                        <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
-                          {unit.org}
+            {result.selected_units.length === 0 ? (
+              <div className="text-center py-12">
+                <AlertCircle className="w-12 h-12 mx-auto mb-4 text-muted-foreground opacity-50" />
+                <p className="text-muted-foreground">
+                  No bullets matched this job description. Try uploading a more detailed resume or adjusting the job description.
+                </p>
+              </div>
+            ) : (
+              <div className="space-y-3 max-h-[600px] overflow-y-auto">
+                {result.selected_units.map((unit) => (
+                  <div
+                    key={unit.unit_id}
+                    onClick={() => setSelectedUnit(unit)}
+                    className={`p-4 border rounded-lg cursor-pointer transition-all ${
+                      selectedUnit?.unit_id === unit.unit_id
+                        ? "border-blue-500 bg-blue-50 dark:bg-blue-900/20"
+                        : "hover:border-gray-400"
+                    }`}
+                  >
+                    <div className="flex items-center justify-between mb-2">
+                      <div className="flex items-center gap-2">
+                        <span className="px-2 py-0.5 bg-gray-100 dark:bg-gray-800 rounded text-xs capitalize">
+                          {unit.section}
                         </span>
-                      )}
-                    </div>
-                    <div className="flex items-center gap-1">
-                      <span
-                        className={`px-2 py-0.5 rounded text-xs font-medium ${
-                          unit.llm_score >= 8
-                            ? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
-                            : unit.llm_score >= 6
-                            ? "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"
-                            : "bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200"
-                        }`}
-                      >
-                        Score: {unit.llm_score.toFixed(1)}
-                      </span>
+                        {unit.org && (
+                          <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
+                            {unit.org}
+                          </span>
+                        )}
+                      </div>
+                      <div className="flex items-center gap-1">
+                        <span
+                          className={`px-2 py-0.5 rounded text-xs font-medium ${
+                            unit.llm_score >= 8
+                              ? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
+                              : unit.llm_score >= 6
+                              ? "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"
+                              : "bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200"
+                          }`}
+                        >
+                          Score: {unit.llm_score.toFixed(1)}
+                        </span>
+                      </div>
                     </div>
+                    <p className="text-gray-800 dark:text-gray-200 text-sm">
+                      {unit.text}
+                    </p>
                   </div>
-                  <p className="text-gray-800 dark:text-gray-200 text-sm">
-                    {unit.text}
-                  </p>
-                </div>
-              ))}
-            </div>
+                ))}
+              </div>
+            )}
           </CardContent>
         </Card>
 
diff --git a/frontend/app/vault/page.tsx b/frontend/app/vault/page.tsx
index 831d6c6..a676324 100644
--- a/frontend/app/vault/page.tsx
+++ b/frontend/app/vault/page.tsx
@@ -23,6 +23,7 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
 import { FileUpload } from "@/components/file-upload";
 import {
   uploadResume,
@@ -287,7 +288,7 @@ export default function VaultPage() {
           animate={{ opacity: 1, y: 0 }}
           className="text-center mb-8"
         >
-          <h1 className="text-3xl font-bold text-foreground mb-2">
+          <h1 className="text-2xl sm:text-3xl font-bold text-foreground mb-2">
             Upload Your Resumes
           </h1>
           <p className="text-muted-foreground max-w-lg mx-auto">
@@ -350,6 +351,42 @@ export default function VaultPage() {
                 : `${selectedFiles.length} file${selectedFiles.length !== 1 ? "s" : ""} ready to process`
               }
             </p>
+
+            {isLoading && (
+              <div className="max-w-4xl mx-auto mt-8 space-y-6">
+                <Card>
+                  <CardContent className="pt-6">
+                    <div className="flex items-center gap-3">
+                      <Skeleton className="w-10 h-10 rounded-full" />
+                      <div className="space-y-2 flex-1">
+                        <Skeleton className="h-5 w-3/4" />
+                        <Skeleton className="h-4 w-1/2" />
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+                <Card>
+                  <CardContent className="pt-6 space-y-3">
+                    <Skeleton className="h-4 w-full" />
+                    <Skeleton className="h-4 w-5/6" />
+                    <Skeleton className="h-4 w-4/6" />
+                    <Skeleton className="h-4 w-3/4" />
+                  </CardContent>
+                </Card>
+                <Card>
+                  <CardContent className="pt-6">
+                    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                      {Array.from({ length: 4 }).map((_, i) => (
+                        <div key={i} className="text-center p-4 bg-muted/50 rounded-lg">
+                          <Skeleton className="h-8 w-12 mx-auto mb-2" />
+                          <Skeleton className="h-4 w-16 mx-auto" />
+                        </div>
+                      ))}
+                    </div>
+                  </CardContent>
+                </Card>
+              </div>
+            )}
           </motion.div>
         )}
 
@@ -512,11 +549,20 @@ export default function VaultPage() {
                 </div>
               </CardHeader>
               <CardContent>
-                <div className="space-y-3 max-h-[500px] overflow-y-auto pr-2">
-                  {result.atomic_units.map((unit, index) => (
-                    <BulletCard key={unit.id} unit={unit} index={index} />
-                  ))}
-                </div>
+                {result.atomic_units.length === 0 ? (
+                  <div className="text-center py-12">
+                    <FileText className="w-12 h-12 mx-auto mb-4 text-muted-foreground opacity-50" />
+                    <p className="text-muted-foreground">
+                      No content could be extracted from your resume. This may happen with scanned or image-based PDFs. Try uploading a text-based PDF.
+                    </p>
+                  </div>
+                ) : (
+                  <div className="space-y-3 max-h-[500px] overflow-y-auto pr-2">
+                    {result.atomic_units.map((unit, index) => (
+                      <BulletCard key={unit.id} unit={unit} index={index} />
+                    ))}
+                  </div>
+                )}
               </CardContent>
             </Card>
 
diff --git a/frontend/components/ui/skeleton.tsx b/frontend/components/ui/skeleton.tsx
new file mode 100644
index 0000000..2cdf440
--- /dev/null
+++ b/frontend/components/ui/skeleton.tsx
@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils";
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };