diff --git a/src/app/components/building-passport/RecommendationContainer.tsx b/src/app/components/building-passport/RecommendationContainer.tsx
index 5460541..d4ee30f 100644
--- a/src/app/components/building-passport/RecommendationContainer.tsx
+++ b/src/app/components/building-passport/RecommendationContainer.tsx
@@ -12,6 +12,7 @@ import { sapToEpc } from "@/app/utils";
 import { useState } from "react";
 import { sumRecommendationMetricMap } from "@/app/portfolio/[slug]/building-passport/[propertyId]/recommendations/utils";
 import { RecommendationMetricMap } from "@/types/recommendations";
+import RecommendationEpcSummaryCard from "./RecommendationEpcSummaryCard";
 
 interface RecommendationContainerProps {
   recommendations: Recommendation;
@@ -70,19 +71,10 @@ export default function RecommendationContainer({
           totalSapPoints={totalSapPoints}
         />
 
-        <table className="text-left bg-green-700 rounded-md text-gray-100">
-          <tbody>
-            <tr>
-              <td className="font-medium pl-4 py-2">Current EPC Rating:</td>
-              <td className="font-bold pr-2">{currentEpcRating}</td>
-            </tr>
-
-            <tr>
-              <td className="font-medium pl-4 py-2">Expected EPC Rating:</td>
-              <td className="font-bold pr-2">{expectedEpcRating}</td>
-            </tr>
-          </tbody>
-        </table>
+        <RecommendationEpcSummaryCard
+          currentEpcRating={currentEpcRating}
+          expectedEpcRating={expectedEpcRating}
+        />
       </div>
 
       <Separator className="mb-4" />
diff --git a/src/app/components/building-passport/RecommendationEpcSummaryCard.tsx b/src/app/components/building-passport/RecommendationEpcSummaryCard.tsx
new file mode 100644
index 0000000..3364e6b
--- /dev/null
+++ b/src/app/components/building-passport/RecommendationEpcSummaryCard.tsx
@@ -0,0 +1,25 @@
+interface RecommendationEpcSummaryCardProps {
+  currentEpcRating: string;
+  expectedEpcRating: string;
+}
+
+export default function RecommendationEpcSummaryCard({
+  currentEpcRating,
+  expectedEpcRating,
+}: RecommendationEpcSummaryCardProps) {
+  return (
+    <table className="text-left bg-green-700 rounded-md text-gray-100">
+      <tbody>
+        <tr>
+          <td className="font-medium pl-4 py-2">Current EPC Rating:</td>
+          <td className="font-bold pr-2">{currentEpcRating}</td>
+        </tr>
+
+        <tr>
+          <td className="font-medium pl-4 py-2">Expected EPC Rating:</td>
+          <td className="font-bold pr-2">{expectedEpcRating}</td>
+        </tr>
+      </tbody>
+    </table>
+  );
+}