diff --git a/src/app/portfolio/[slug]/components/propertyTableColumns.tsx b/src/app/portfolio/[slug]/components/propertyTableColumns.tsx
index 6f9efb5..50ff5b5 100644
--- a/src/app/portfolio/[slug]/components/propertyTableColumns.tsx
+++ b/src/app/portfolio/[slug]/components/propertyTableColumns.tsx
@@ -61,12 +61,10 @@ function Pill({
    EPC letter bubble
 ------------------------------------------------------------------------ */
 const EpcLetterBubble = ({ letter }: { letter: string }) => {
-  if (!letter) return <div className="w-6 h-6" />;
+  if (!letter) return <div className="w-5 h-5" />;
   return (
     <div
-      className={`inline-flex items-center justify-center w-6 h-6 rounded-full ${getEpcColorClass(
-        letter
-      )} text-white text-m font-bold shadow-outline-black`}
+      className={`inline-flex items-center justify-center w-5 h-5 rounded-full text-xs font-bold text-white ${getEpcColorClass(letter)}`}
     >
       {letter}
     </div>
diff --git a/src/app/utils.ts b/src/app/utils.ts
index 484a59d..f1b2dcc 100644
--- a/src/app/utils.ts
+++ b/src/app/utils.ts
@@ -67,6 +67,20 @@ export const getEpcColorClass = (letter: string) => {
   }
 };
 
+/** Border + text colour classes for a transparent-background EPC badge */
+export const getEpcAccentClasses = (letter: string) => {
+  switch (letter.toUpperCase()) {
+    case "A": return "border-epc_a text-epc_a";
+    case "B": return "border-epc_b text-epc_b";
+    case "C": return "border-epc_c text-epc_c";
+    case "D": return "border-epc_d text-epc_d";
+    case "E": return "border-epc_e text-epc_e";
+    case "F": return "border-epc_f text-epc_f";
+    case "G": return "border-epc_g text-epc_g";
+    default:  return "border-slate-300 text-slate-400";
+  }
+};
+
 export const getRating = (rating: number | null): Rating => {
   if (rating == null) {
     return "N/A";