diff --git a/src/app/components/building-passport/RecommendationCard.tsx b/src/app/components/building-passport/RecommendationCard.tsx
index 52f85759..851e83c4 100644
--- a/src/app/components/building-passport/RecommendationCard.tsx
+++ b/src/app/components/building-passport/RecommendationCard.tsx
@@ -163,6 +163,11 @@ export function RecommendationModal({
   );
 }
 
+const selectionStyling =
+  "shadow active:shadow active:bg-brandmidblue w-full border rounded p-4 cursor-pointer text-gray-900 bg-gray-100 hover:bg-hoverblue hover:text-gray-100 transition-colors rounded-md flex flex-col justify-start";
+const noSelectionStyling =
+  "shadow active:shadow active:bg-brandmidblue w-full border rounded p-4 cursor-pointer text-gray-300 bg-white hover:bg-hoverblue hover:text-gray-100 transition-colors rounded-md flex flex-col justify-start";
+
 export default function RecommendationCard({
   componentType,
   recommendationData,
@@ -181,36 +186,51 @@ export default function RecommendationCard({
 
   return (
     <div
-      className="shadow active:shadow active:bg-brandmidblue w-full border rounded p-4 cursor-pointer text-gray-900 bg-gray-50 hover:bg-hoverblue hover:text-gray-100 transition-colors rounded-md flex flex-col justify-start"
+      className={cardComponent ? selectionStyling : noSelectionStyling}
       onClick={() => {
         setModalIsOpen(true);
       }}
     >
       <h2 className="font-bold mb-4 text-lg">{componentType}</h2>
-      <div className="mb-3">{cardComponent.description}</div>
-      <div className="text-blue-500 hover:text-blue-300">
-        Click for more options
+      <div className="mb-3">
+        {cardComponent ? (
+          cardComponent.description
+        ) : (
+          <div className="text-red-500">No measure selected</div>
+        )}
       </div>
-      <table className="w-full text-left">
-        <tbody>
-          <tr>
-            <td className="font-medium">Estimated Cost:</td>
-            <td>{"£" + formatNumber(cardComponent.estimatedCost)}</td>
-          </tr>
-          {cardComponent.newUValue && (
+      <div className="text-blue-500 hover:text-blue-300">
+        {cardComponent ? "Click for more options" : "Click to select"}
+      </div>
+      {cardComponent ? (
+        <table className="w-full text-left">
+          <tbody>
             <tr>
-              <td className="font-medium">New U-Value:</td>
-              <td>{cardComponent.newUValue}</td>
+              <td className="font-medium">Estimated Cost:</td>
+              <td>
+                {cardComponent
+                  ? "£" + formatNumber(cardComponent.estimatedCost)
+                  : ""}
+              </td>
             </tr>
-          )}
-          {cardComponent.sapPoints && (
-            <tr>
-              <td className="font-medium">SAP Points:</td>
-              <td>{cardComponent.sapPoints}</td>
-            </tr>
-          )}
-        </tbody>
-      </table>
+            {cardComponent.newUValue && (
+              <tr>
+                <td className="font-medium">New U-Value:</td>
+                <td>{cardComponent.newUValue}</td>
+              </tr>
+            )}
+            {cardComponent.sapPoints && (
+              <tr>
+                <td className="font-medium">SAP Points:</td>
+                <td>{cardComponent.sapPoints}</td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      ) : (
+        ""
+      )}
+
       <RecommendationModal
         title={componentType}
         isOpen={modalIsOpen}