diff --git a/src/projects.ts b/src/projects.ts
index 2649362..c0cb849 100644
--- a/src/projects.ts
+++ b/src/projects.ts
@@ -3,8 +3,8 @@ import { ItemType } from './api/calculator-types-v1';
 
 const CLOTHES_DRYER_ICON = (
   selected: boolean,
-  w: number = 48,
-  h: number = 48,
+  w: number = 20,
+  h: number = 20,
 ) =>
   selected
     ? svg`<svg width="${w}" height="${h}" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -30,7 +30,7 @@ const CLOTHES_DRYER_ICON = (
 <path d="M8.78418 40.0195V42.4536C8.78418 43.0059 9.23189 43.4536 9.78418 43.4536H38.1699C38.7222 43.4536 39.1699 43.0059 39.1699 42.4536V40.0195" stroke="#4A00C3" stroke-width="1.5" stroke-linejoin="round"/>
 </svg>`;
 
-const COOKING_ICON = (selected: boolean, w: number = 48, h: number = 48) =>
+const COOKING_ICON = (selected: boolean, w: number = 20, h: number = 20) =>
   selected
     ? svg`<svg width="${w}" height="${h}" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
 <circle cx="30.8809" cy="15.8267" r="5.99316" fill="#F9D65B"/>
@@ -61,7 +61,7 @@ const COOKING_ICON = (selected: boolean, w: number = 48, h: number = 48) =>
 <path d="M29.7148 37.5476H28.4971" stroke="#4A00C3" stroke-width="1.5" stroke-linecap="round"/>
 </svg>`;
 
-const EV_ICON = (selected: boolean, w: number = 48, h: number = 48) =>
+const EV_ICON = (selected: boolean, w: number = 20, h: number = 20) =>
   selected
     ? svg`<svg width="${w}" height="${h}" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M36.9531 27.5291H31.2773" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
@@ -104,8 +104,8 @@ const EV_ICON = (selected: boolean, w: number = 48, h: number = 48) =>
 
 const ELECTRICAL_WIRING_ICON = (
   selected: boolean,
-  w: number = 48,
-  h: number = 48,
+  w: number = 20,
+  h: number = 20,
 ) =>
   selected
     ? svg`<svg width="${w}" height="${h}" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -149,7 +149,7 @@ const ELECTRICAL_WIRING_ICON = (
 <path d="M29.3486 39.6902L29.3486 45.415" stroke="#4A00C3" stroke-width="1.5" stroke-linecap="round"/>
 </svg>`;
 
-const HVAC_ICON = (selected: boolean, w: number = 48, h: number = 48) =>
+const HVAC_ICON = (selected: boolean, w: number = 20, h: number = 20) =>
   selected
     ? svg`<svg width="${w}" height="${h}" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M3.23251 27.5454H9.64975C9.70498 27.5454 9.74975 27.5901 9.74975 27.6454V42.8233C9.74975 42.8786 9.79452 42.9233 9.84975 42.9233H38.6664C38.7217 42.9233 38.7664 42.8786 38.7664 42.8233V27.6454C38.7664 27.5901 38.8112 27.5454 38.8664 27.5454H45.4233C45.511 27.5454 45.5562 27.4405 45.496 27.3767L24.4351 5.07685C24.3957 5.03512 24.3293 5.03506 24.2898 5.07673L3.15993 27.3766C3.09954 27.4403 3.14472 27.5454 3.23251 27.5454Z" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
@@ -178,7 +178,7 @@ const HVAC_ICON = (selected: boolean, w: number = 48, h: number = 48) =>
 </svg>
 `;
 
-const RENEWABLES_ICON = (selected: boolean, w: number = 48, h: number = 48) =>
+const RENEWABLES_ICON = (selected: boolean, w: number = 20, h: number = 20) =>
   selected
     ? svg`<svg width="${w}" height="${h}" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M27.8267 17.6152H19.4862C19.2325 17.6152 19.019 17.8052 18.9896 18.0572L17.9099 27.2954C17.8752 27.5925 18.1074 27.8534 18.4066 27.8534H28.3525C28.6398 27.8534 28.868 27.6118 28.8517 27.325L28.3259 18.0868C28.3108 17.8221 28.0918 17.6152 27.8267 17.6152Z" fill="#F9D65B"/>
@@ -197,7 +197,7 @@ const RENEWABLES_ICON = (selected: boolean, w: number = 48, h: number = 48) =>
 <path d="M9.09961 27.8999L38.4996 27.8999" stroke="#4A00C3" stroke-width="1.5" stroke-linecap="round"/>
 </svg>`;
 
-const WATER_HEATER_ICON = (selected: boolean, w: number = 48, h: number = 48) =>
+const WATER_HEATER_ICON = (selected: boolean, w: number = 20, h: number = 20) =>
   selected
     ? svg`<svg width="${w}" height="${h}" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M17 5C17 3.34315 18.3431 2 20 2H30C31.6569 2 33 3.34315 33 5V18H17V5Z" fill="#F9D65B"/>
@@ -229,7 +229,8 @@ export type Project =
   | 'heat_pump_clothes_dryer'
   | 'hvac'
   | 'ev'
-  | 'renewables'
+  | 'solar'
+  | 'battery'
   | 'heat_pump_water_heater'
   | 'cooking'
   | 'wiring';
@@ -259,9 +260,14 @@ export const PROJECTS: Record<Project, ProjectInfo> = {
     shortLabel: 'EV',
     icon: EV_ICON,
   },
-  renewables: {
-    items: ['rooftop_solar_installation', 'battery_storage_installation'],
-    label: 'Renewables',
+  solar: {
+    items: ['rooftop_solar_installation'],
+    label: 'Solar',
+    icon: RENEWABLES_ICON,
+  },
+  battery: {
+    items: ['battery_storage_installation'],
+    label: 'Battery storage',
     icon: RENEWABLES_ICON,
   },
   heat_pump_water_heater: {
diff --git a/src/state-incentive-details.ts b/src/state-incentive-details.ts
index cbe83a2..1b3e53e 100644
--- a/src/state-incentive-details.ts
+++ b/src/state-incentive-details.ts
@@ -158,68 +158,52 @@ export const cardStyles = css`
 export const iconTabStyles = css`
   .icon-tab-bar {
     display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+    justify-content: center;
 
-    /*
-     * Center the tabs horizontally, and let them scroll horizontally if
-     * they're wider than the container
-     */
-    justify-content: start;
-    width: min-content;
-    max-width: 100%;
-    overflow-x: auto;
-    margin: 0 auto 1.5rem auto;
+    width: 100%;
+    margin-bottom: 1.5rem;
   }
 
   button.icon-tab {
     /* Override default button styles */
     background-color: transparent;
-    border: 0;
     font-family: inherit;
     padding: 0;
     cursor: pointer;
 
     min-width: 6rem;
 
+    height: 3rem;
+    border: 1px solid #9b9b9b;
+    border-radius: 1.5rem;
+    padding: 0.75rem 1rem;
+
     /* Manage the gap between the icon and the caption */
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     gap: 0.5rem;
     align-items: center;
     justify-content: center;
 
-    & .background {
-      /* Get the icon centered in the rounded box */
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      width: 4rem;
-      height: 4rem;
-
-      border-radius: 0.75rem;
-      background: #fff;
-      box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.08);
-    }
     & .caption {
-      color: #846f24;
-      text-align: center;
-      font-size: 0.6875rem;
+      color: var(--color-purple-500, #4a00c3);
+      font-size: 1rem;
       font-weight: 500;
       line-height: 125%;
-      letter-spacing: 0.03438rem;
-      text-transform: uppercase;
+      white-space: nowrap;
     }
   }
 
   button.icon-tab--selected {
     cursor: default;
 
-    & .background {
-      background: var(--color-purple-500, #4a00c3);
-    }
+    background: var(--color-purple-500, #4a00c3);
+    border-color: var(--color-purple-500, #4a00c3);
+
     & .caption {
-      color: var(--color-purple-500, #4a00c3);
-      font-weight: 700;
+      color: white;
     }
   }
 `;
@@ -384,7 +368,7 @@ export const gridTemplate = (
         class="icon-tab ${selectedClass}"
         @click=${() => onTabSelected(project)}
       >
-        <div class="background">${PROJECTS[project].icon(isSelected)}</div>
+        ${PROJECTS[project].icon(isSelected)}
         <div class="caption">${shortLabel(project)}</div>
       </button>
     `;