diff --git a/src/app/components/building-passport/RecommendationCard.tsx b/src/app/components/building-passport/RecommendationCard.tsx
index 65018c52..f04b8973 100644
--- a/src/app/components/building-passport/RecommendationCard.tsx
+++ b/src/app/components/building-passport/RecommendationCard.tsx
@@ -1,6 +1,6 @@
 "use client";
 import { ComponentRecommendation } from "@/app/db/schema/recommendations";
-import { Fragment, useState } from "react";
+import { Dispatch, Fragment, SetStateAction, useState } from "react";
 import { formatNumber } from "@/app/utils";
 import { Dialog, Transition } from "@headlessui/react";
 import RecommendationTable from "@/app/components/building-passport/RecommendationTable";
@@ -45,16 +45,15 @@ export function RecommendationModal({
   isOpen = false,
   setIsOpen,
   recommendationData,
+  setCardComponent,
 }: {
   title: string;
   isOpen: boolean;
   setIsOpen: (isOpen: boolean) => void;
   recommendationData: ComponentRecommendation[];
+  setCardComponent: Dispatch<SetStateAction<ComponentRecommendation>>;
 }) {
-  const [portfolioName, setPortfolioName] = useState("");
-  const [budget, setBudget] = useState<undefined | number>(undefined);
-  const [selectedOutcome, setSelectedOutcome] = useState<string>("None");
-  const [buttonDisabled, setButtonDisabled] = useState(true);
+  const [saveButtonDisabled, setSaveButtonDisabled] = useState(true);
 
   // Find the row where default is true
   const defaultRowIndex = recommendationData.findIndex((d) => d.default);
@@ -70,13 +69,15 @@ export function RecommendationModal({
     setRowSelection({ [defaultRowIndex]: true });
   }
 
-  function handlePortfolioNameChange(e: React.ChangeEvent<HTMLInputElement>) {
-    if (e.target.value.length > 0) {
-      setButtonDisabled(false);
-    } else {
-      setButtonDisabled(true);
-    }
-    setPortfolioName(e.target.value);
+  function saveChanges() {
+    // disable the button to prevent multiple clicks
+    // TODO: Add a loading state to show we're saving
+    setSaveButtonDisabled(true);
+    setIsOpen(false);
+    // Update the card component data
+    const newIndex = parseInt(Object.keys(rowSelection)[0]);
+
+    setCardComponent(recommendationData[newIndex]);
   }
 
   return (
@@ -119,6 +120,7 @@ export function RecommendationModal({
                     defaultRowIndex={defaultRowIndex}
                     rowSelection={rowSelection}
                     setRowSelection={setRowSelection}
+                    setSaveButtonDisabled={setSaveButtonDisabled}
                   />
                   <div className="mt-4 flex justify-end gap-2">
                     <button
@@ -141,8 +143,8 @@ export function RecommendationModal({
                     <button
                       type="button"
                       className="inline-flex justify-center rounded-md border border-transparent bg-brandblue px-4 py-2 text-sm font-medium text-gray-100 hover:bg-hoverblue focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-brandblue"
-                      onClick={closeModal}
-                      disabled={buttonDisabled}
+                      onClick={saveChanges}
+                      disabled={saveButtonDisabled}
                     >
                       Save
                     </button>
@@ -175,13 +177,16 @@ export default function RecommendationCard({
 
   return (
     <div
-      className="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="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"
       onClick={() => {
         setModalIsOpen(true);
       }}
     >
       <h2 className="font-bold mb-4 text-lg">{componentType}</h2>
-      <p className="mb-3">{cardComponent.description}</p>
+      <div className="mb-3">{cardComponent.description}</div>
+      <div className="text-blue-500 hover:text-blue-300">
+        Click for more options
+      </div>
       <table className="w-full text-left">
         <tbody>
           <tr>
@@ -201,6 +206,7 @@ export default function RecommendationCard({
         isOpen={modalIsOpen}
         setIsOpen={setModalIsOpen}
         recommendationData={recommendationData}
+        setCardComponent={setCardComponent}
       />
     </div>
   );
diff --git a/src/app/components/building-passport/RecommendationTable.tsx b/src/app/components/building-passport/RecommendationTable.tsx
index fc5d9cca..1bff68a0 100644
--- a/src/app/components/building-passport/RecommendationTable.tsx
+++ b/src/app/components/building-passport/RecommendationTable.tsx
@@ -17,7 +17,7 @@ import {
 } from "@/app/shadcn_components/ui/table";
 
 import { ComponentRecommendation } from "@/app/db/schema/recommendations";
-import { Dispatch, SetStateAction } from "react";
+import { Dispatch, SetStateAction, useEffect } from "react";
 
 interface DataTableProps<T extends ComponentRecommendation> {
   columns: ColumnDef<T>[];
@@ -31,6 +31,7 @@ interface DataTableProps<T extends ComponentRecommendation> {
       [x: number]: boolean;
     }>
   >;
+  setSaveButtonDisabled: Dispatch<SetStateAction<boolean>>;
 }
 
 export default function RecommendationTable<T extends ComponentRecommendation>({
@@ -39,6 +40,7 @@ export default function RecommendationTable<T extends ComponentRecommendation>({
   defaultRowIndex,
   rowSelection,
   setRowSelection,
+  setSaveButtonDisabled,
 }: DataTableProps<T>) {
   // Initialise the table
 
@@ -47,17 +49,6 @@ export default function RecommendationTable<T extends ComponentRecommendation>({
     columns,
     getCoreRowModel: getCoreRowModel(),
     onRowSelectionChange: setRowSelection,
-    // onRowSelectionChange: (RowSelectionState) => {
-    //   // This is a hack but we cast RowSelectionState's type into a function so we can avoid typescript errors
-    //   // but this allows us the functionality we need to prevent de-selecting already selected rows
-    //   const RowSelectionStateCallable = RowSelectionState as Function;
-    //   const rowSelection = Object(RowSelectionStateCallable());
-
-    //   if (Object.keys(rowSelection).length !== 0) {
-    //     console.log("in here?");
-    //     setRowSelection(rowSelection);
-    //   }
-    // },
     enableMultiRowSelection: false,
     enableSubRowSelection: false,
     state: {
@@ -65,6 +56,24 @@ export default function RecommendationTable<T extends ComponentRecommendation>({
     },
   });
 
+  // Add a useEffect hook to monitor changes to rowSelection
+  // we use the useEffect to perform the side effect of enabling/disabling the save button
+  useEffect(() => {
+    // Get the keys of the rowSelection object
+    const keys = Object.keys(rowSelection);
+
+    // If rowSelection contains keys, get the index of the selected row, otherwise set to -1
+    const selectedRowIndex = keys.length > 0 ? parseInt(keys[0], 10) : -1;
+
+    // If the selected row index is different from the default row index, enable the save button
+    if (selectedRowIndex !== defaultRowIndex) {
+      setSaveButtonDisabled(false);
+    } else {
+      // If the selected row index is the same as the default row index, disable the save button
+      setSaveButtonDisabled(true);
+    }
+  }, [rowSelection, defaultRowIndex, setSaveButtonDisabled]);
+
   return (
     <div className="rounded-md border">
       <Table>
diff --git a/src/app/components/building-passport/Toolbar.tsx b/src/app/components/building-passport/Toolbar.tsx
index e07d787b..5ff4648f 100644
--- a/src/app/components/building-passport/Toolbar.tsx
+++ b/src/app/components/building-passport/Toolbar.tsx
@@ -4,6 +4,7 @@ import {
   Cog6ToothIcon,
   NewspaperIcon,
   HomeModernIcon,
+  WrenchScrewdriverIcon,
   LightBulbIcon,
 } from "@heroicons/react/24/outline";
 import {
@@ -50,7 +51,7 @@ export function Toolbar({ propertyMeta, portfolioId }: ToolbarProps) {
       className={navigationMenuTriggerStyle() + " ml-3 mr-2"}
       href={`/portfolio/${portfolioId}/building-passport/${propertyId}/recommendations`}
     >
-      <HomeModernIcon className="h-4 w-4 mr-2" />
+      <WrenchScrewdriverIcon className="h-4 w-4 mr-2" />
       Retrofit Recommendations
     </NavigationMenuLink>
   );
diff --git a/src/app/portfolio/[slug]/building-passport/[propertyId]/recommendations/page.tsx b/src/app/portfolio/[slug]/building-passport/[propertyId]/recommendations/page.tsx
index 5be43f26..d36607a5 100644
--- a/src/app/portfolio/[slug]/building-passport/[propertyId]/recommendations/page.tsx
+++ b/src/app/portfolio/[slug]/building-passport/[propertyId]/recommendations/page.tsx
@@ -1,7 +1,4 @@
-import {
-  Recommendation,
-  ComponentRecommendation,
-} from "@/app/db/schema/recommendations";
+import { Recommendation } from "@/app/db/schema/recommendations";
 import RecommendationCard from "@/app/components/building-passport/RecommendationCard";
 
 export default function Recommendations() {