diff --git a/src/components/CareerModal.js b/src/components/CareerModal.js
index 02bbbe2..9c0ddb8 100644
--- a/src/components/CareerModal.js
+++ b/src/components/CareerModal.js
@@ -120,39 +120,88 @@ function CareerModal({ career, careerDetails, closeModal, addCareerToList }) {
 
           {/* Economic Projections */}
           <div className="md:w-1/2 overflow-x-auto">
-            <h3 className="text-lg font-semibold mb-2">Economic Projections:</h3>
+            <h3 className="text-lg font-semibold mb-2">Economic Projections</h3>
+
             <table className="w-full text-left border border-gray-300 rounded">
               <thead className="bg-gray-100">
                 <tr>
-                  <th className="px-3 py-2 border-b">Region</th>
-                  <th className="px-3 py-2 border-b">Current Jobs</th>
-                  <th className="px-3 py-2 border-b">Jobs in 10 yrs</th>
-                  <th className="px-3 py-2 border-b">Growth %</th>
-                  <th className="px-3 py-2 border-b">Annual Openings</th>
+                  <th className="px-3 py-2 border-b"></th>
+                  {/* If we have state data, show a column for it */}
+                  {careerDetails.economicProjections.state && (
+                    <th className="px-3 py-2 border-b">
+                      {careerDetails.economicProjections.state.area}
+                    </th>
+                  )}
+                  {/* If we have national data, show a column for it */}
+                  {careerDetails.economicProjections.national && (
+                    <th className="px-3 py-2 border-b">National</th>
+                  )}
                 </tr>
               </thead>
               <tbody>
-                {careerDetails.economicProjections.state && (
-                  <tr>
-                    <td className="px-3 py-2 border-b">{careerDetails.economicProjections.state.area}</td>
-                    <td className="px-3 py-2 border-b">{careerDetails.economicProjections.state.base.toLocaleString()}</td>
-                    <td className="px-3 py-2 border-b">{careerDetails.economicProjections.state.projection.toLocaleString()}</td>
-                    <td className="px-3 py-2 border-b">{careerDetails.economicProjections.state.percentChange}%</td>
-                    <td className="px-3 py-2 border-b">{careerDetails.economicProjections.state.annualOpenings.toLocaleString()}</td>
-                  </tr>
-                )}
-                {careerDetails.economicProjections.national && (
-                  <tr>
-                    <td className="px-3 py-2 border-b">National</td>
-                    <td className="px-3 py-2 border-b">{careerDetails.economicProjections.national.base.toLocaleString()}</td>
-                    <td className="px-3 py-2 border-b">{careerDetails.economicProjections.national.projection.toLocaleString()}</td>
-                    <td className="px-3 py-2 border-b">{careerDetails.economicProjections.national.percentChange}%</td>
-                    <td className="px-3 py-2 border-b">{careerDetails.economicProjections.national.annualOpenings.toLocaleString()}</td>
-                  </tr>
-                )}
+                {/* Row for Current Jobs */}
+                <tr>
+                  <td className="px-3 py-2 border-b font-semibold">Current Jobs</td>
+                  {careerDetails.economicProjections.state && (
+                    <td className="px-3 py-2 border-b">
+                      {careerDetails.economicProjections.state.base.toLocaleString()}
+                    </td>
+                  )}
+                  {careerDetails.economicProjections.national && (
+                    <td className="px-3 py-2 border-b">
+                      {careerDetails.economicProjections.national.base.toLocaleString()}
+                    </td>
+                  )}
+                </tr>
+
+                {/* Row for Jobs in 10 yrs */}
+                <tr>
+                  <td className="px-3 py-2 border-b font-semibold">Jobs in 10 yrs</td>
+                  {careerDetails.economicProjections.state && (
+                    <td className="px-3 py-2 border-b">
+                      {careerDetails.economicProjections.state.projection.toLocaleString()}
+                    </td>
+                  )}
+                  {careerDetails.economicProjections.national && (
+                    <td className="px-3 py-2 border-b">
+                      {careerDetails.economicProjections.national.projection.toLocaleString()}
+                    </td>
+                  )}
+                </tr>
+
+                {/* Row for Growth % */}
+                <tr>
+                  <td className="px-3 py-2 border-b font-semibold">Growth %</td>
+                  {careerDetails.economicProjections.state && (
+                    <td className="px-3 py-2 border-b">
+                      {careerDetails.economicProjections.state.percentChange}%
+                    </td>
+                  )}
+                  {careerDetails.economicProjections.national && (
+                    <td className="px-3 py-2 border-b">
+                      {careerDetails.economicProjections.national.percentChange}%
+                    </td>
+                  )}
+                </tr>
+
+                {/* Row for Annual Openings */}
+                <tr>
+                  <td className="px-3 py-2 border-b font-semibold">Annual Openings</td>
+                  {careerDetails.economicProjections.state && (
+                    <td className="px-3 py-2 border-b">
+                      {careerDetails.economicProjections.state.annualOpenings.toLocaleString()}
+                    </td>
+                  )}
+                  {careerDetails.economicProjections.national && (
+                    <td className="px-3 py-2 border-b">
+                      {careerDetails.economicProjections.national.annualOpenings.toLocaleString()}
+                    </td>
+                  )}
+                </tr>
               </tbody>
             </table>
           </div>
+
         </div>
       </div>
     </div>