diff --git a/src/components/ProjectDetail.tsx b/src/components/ProjectDetail.tsx
index e25b4c9..68d8680 100644
--- a/src/components/ProjectDetail.tsx
+++ b/src/components/ProjectDetail.tsx
@@ -19,23 +19,20 @@ const ProjectDetail: React.FC<ProjectDetailProps> = ({
   const navigate = useNavigate();
   const { isVendor } = useAuth();
 
-  // Calculate overall risk level based on issues
-  const calculateRiskLevel = () => {
-    if (!report.issues || report.issues.length === 0) return "Low";
-
-    const highRiskCount = report.issues.filter(
-      (issue) => issue.riskRating >= 5
-    ).length;
-    if (highRiskCount > 0) return "High";
-
-    const mediumRiskCount = report.issues.filter(
-      (issue) => issue.riskRating >= 3 && issue.riskRating < 5
-    ).length;
-    if (mediumRiskCount > 0) return "Medium";
-
-    return "Low";
+  // Get criticality rating from assessment
+  const getCriticalityRating = () => {
+    return report.assessment?.sprintPlanning?.rating || "N/A";
   };
 
+  // Get schedule status based on variance days
+  const getScheduleStatus = () => {
+    if (report.varianceDays === undefined || report.varianceDays === null) {
+      return "N/A";
+    }
+    if (report.varianceDays === 0) return "On Time";
+    if (report.varianceDays > 0) return "Behind Schedule";
+    return "Ahead of Schedule";
+  };
   // Handle delete report
   const handleDeleteReport = async () => {
     if (
@@ -56,7 +53,8 @@ const ProjectDetail: React.FC<ProjectDetailProps> = ({
     }
   };
 
-  const riskLevel = calculateRiskLevel();
+  const criticalityRating = getCriticalityRating();
+  const scheduleStatus = getScheduleStatus();
 
   return (
     <div className="text-decoration-none">
@@ -64,7 +62,8 @@ const ProjectDetail: React.FC<ProjectDetailProps> = ({
         <div className="card-body bg-light">
           <div className="row">
             <div className="col-md-3">
-              <h3 className="mb-3">MONTHLY REPORT {index}</h3>
+              <h4 className="mb-3">REPORT: {report.month || "N/A"}</h4>
+              <div className="mb-2"></div>
             </div>
             <div className="col-md-3"></div>
             <div className="col-md-3"></div>
@@ -131,50 +130,42 @@ const ProjectDetail: React.FC<ProjectDetailProps> = ({
 
           <div className="row">
             <div className="col-md-6">
-              <div className="mb-2">
-                <strong>Month:</strong> {report.month || "N/A"}
-              </div>
-              <div className="mb-2">
+              <div className="mb-3">
                 <strong>Report Date:</strong>{" "}
                 {report.date
                   ? new Date(report.date).toLocaleDateString()
                   : "N/A"}
               </div>
-              <div>
+              <div className="mb-3">
                 <strong>Criticality Rating:</strong>{" "}
                 <span
                   className={`badge ${
-                    riskLevel === "High"
+                    criticalityRating === "High"
                       ? "bg-danger"
-                      : riskLevel === "Medium"
+                      : criticalityRating === "Medium"
                       ? "bg-warning"
-                      : "bg-success"
+                      : criticalityRating === "Low"
+                      ? "bg-success"
+                      : "bg-secondary"
                   }`}
                 >
-                  {riskLevel}
+                  {criticalityRating}
+                </span>
+              </div>
+              <div className="mb-3">
+                <strong>Schedule Status:</strong>{" "}
+                <span
+                  className={`badge ${
+                    scheduleStatus === "Behind Schedule"
+                      ? "bg-danger"
+                      : scheduleStatus === "On Time"
+                      ? "bg-success"
+                      : "bg-info"
+                  }`}
+                >
+                  {scheduleStatus}
                 </span>
               </div>
-            </div>
-
-            <div className="col-md-6">
-              {report.scheduleStatus && (
-                <div className="mb-3">
-                  <div>
-                    <strong>Schedule Status:</strong>{" "}
-                    <span
-                      className={`badge ${
-                        riskLevel === "High"
-                          ? "bg-danger"
-                          : riskLevel === "Medium"
-                          ? "bg-warning"
-                          : "bg-success"
-                      }`}
-                    >
-                      {riskLevel}
-                    </span>
-                  </div>
-                </div>
-              )}
             </div>
           </div>
         </div>
diff --git a/src/pages/ProjectDetailPage.tsx b/src/pages/ProjectDetailPage.tsx
index f415f63..e8e64b1 100644
--- a/src/pages/ProjectDetailPage.tsx
+++ b/src/pages/ProjectDetailPage.tsx
@@ -16,6 +16,9 @@ const ProjectDetailPage: React.FC = () => {
   const { projectId } = useParams<{ projectId: string }>();
   const [project, setProject] = useState<ProjectData | null>(null);
   const [reports, setReports] = useState<ReportData[]>([]);
+  const [mostRecentReport, setMostRecentReport] = useState<ReportData | null>(
+    null
+  );
   const [isLoading, setIsLoading] = useState(true);
   const [isFirestoreProject, setIsFirestoreProject] = useState(false);
   const { isETSEmployee, isVendor, currentUser } = useAuth();
@@ -64,7 +67,18 @@ const ProjectDetailPage: React.FC = () => {
                 } as ReportData)
             );
             console.log("Loaded reports from Firestore:", reportsList.length);
+
+            const sortedReports = [...reportsList].sort((a, b) => {
+              const dateA = a.date || a.createdAt?.toDate?.() || new Date(0);
+              const dateB = b.date || b.createdAt?.toDate?.() || new Date(0);
+              return new Date(dateB).getTime() - new Date(dateA).getTime();
+            });
+
             setReports(reportsList);
+
+            if (sortedReports.length > 0) {
+              setMostRecentReport(sortedReports[0]);
+            }
           });
 
           setIsLoading(false);
@@ -108,7 +122,6 @@ const ProjectDetailPage: React.FC = () => {
     );
   }
 
-  // Check if the current vendor is assigned to this project after project is loaded
   const isVendorAssignedToProject =
     isVendor && project.vendorId === currentUser?.uid;
 
@@ -167,8 +180,17 @@ const ProjectDetailPage: React.FC = () => {
         </div>
       </div>
 
-      {/* Project info card */}
-      <div className="card mb-4">{/* Project details */}</div>
+      {mostRecentReport && mostRecentReport.background && (
+        <div className="card mb-4">
+          <div className="card-body">
+            <h4 className="mb-3">Project Overview:</h4>
+
+            <p className="mb-0">{mostRecentReport.background}</p>
+          </div>
+        </div>
+      )}
+
+      <div className="card mb-4"></div>
 
       <h2 className="mt-5 mb-4">IV&V Monthly Reports</h2>