diff --git a/src/components/GrantRequest/TeamMemberItem.css b/src/components/GrantRequest/BreakdownItem.css
similarity index 86%
rename from src/components/GrantRequest/TeamMemberItem.css
rename to src/components/GrantRequest/BreakdownItem.css
index e5751526a..f2380ad2d 100644
--- a/src/components/GrantRequest/TeamMemberItem.css
+++ b/src/components/GrantRequest/BreakdownItem.css
@@ -1,4 +1,4 @@
-.TeamMemberItem {
+.BreakdownItem {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -12,7 +12,7 @@
   cursor: pointer;
 }
 
-.TeamMemberItem__Concept {
+.BreakdownItem__Title {
   margin: 0;
   font-weight: var(--weight-semi-bold);
   font-size: 15px;
@@ -20,7 +20,7 @@
   color: var(--black-700);
 }
 
-.TeamMemberItem__Duration {
+.BreakdownItem__Subtitle {
   margin: 0;
   font-weight: var(--weight-normal);
   font-size: 11px;
@@ -29,14 +29,14 @@
   color: var(--black-600);
 }
 
-.TeamMemberItem__BudgetContainer {
+.BreakdownItem__Container {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 18px;
 }
 
-.TeamMemberItem__Budget {
+.BreakdownItem__Extra {
   font-weight: var(--weight-normal);
   font-size: 15px;
   line-height: 28px;
diff --git a/src/components/GrantRequest/BreakdownItem.tsx b/src/components/GrantRequest/BreakdownItem.tsx
new file mode 100644
index 000000000..a7477f37c
--- /dev/null
+++ b/src/components/GrantRequest/BreakdownItem.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+
+import ChevronRightCircleOutline from '../Icon/ChevronRightCircleOutline'
+
+import './BreakdownItem.css'
+
+interface Props {
+  title: string
+  subtitle: string
+  extra?: string
+  onClick: () => void
+}
+
+function BreakdownItem({ title, subtitle, extra, onClick }: Props) {
+  return (
+    <div role="button" className="BreakdownItem" onClick={onClick}>
+      <div>
+        <h3 className="BreakdownItem__Title">{title}</h3>
+        <span className="BreakdownItem__Subtitle">{subtitle}</span>
+      </div>
+      <div className="BreakdownItem__Container">
+        {extra && <span className="BreakdownItem__Extra">{extra}</span>}
+        <ChevronRightCircleOutline />
+      </div>
+    </div>
+  )
+}
+
+export default BreakdownItem
diff --git a/src/components/GrantRequest/BudgetBreakdownConcept.css b/src/components/GrantRequest/BudgetBreakdownConcept.css
deleted file mode 100644
index 5c94b02eb..000000000
--- a/src/components/GrantRequest/BudgetBreakdownConcept.css
+++ /dev/null
@@ -1,58 +0,0 @@
-.BudgetBreakdownConcept {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background: var(--white-900);
-  margin-bottom: 23px;
-  padding: 0 16px;
-  height: 64px;
-  border: 1px solid var(--black-300);
-  box-shadow: 0px 1px 4px var(--alpha-black-300);
-  border-radius: 8px;
-  cursor: pointer;
-}
-
-.BudgetBreakdownConcept__Concept {
-  margin: 0;
-  font-weight: var(--weight-semi-bold);
-  font-size: 15px;
-  letter-spacing: 0.4px;
-  color: var(--black-700);
-}
-
-.BudgetBreakdownConcept__Duration {
-  margin: 0;
-  font-weight: var(--weight-normal);
-  font-size: 11px;
-  letter-spacing: 0.4px;
-  text-transform: uppercase;
-  color: var(--black-600);
-}
-
-.BudgetBreakdownConcept__BudgetContainer {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 18px;
-}
-
-.BudgetBreakdownConcept__Budget {
-  font-weight: var(--weight-normal);
-  font-size: 15px;
-  line-height: 28px;
-  display: flex;
-  align-items: flex-end;
-  text-align: right;
-  letter-spacing: 0.4px;
-  color: var(--black-600);
-}
-
-.BudgetBreakdownConcept__DeleteButton {
-  display: flex;
-  align-items: center;
-  border: none;
-  background: none;
-  margin: 0;
-  padding: 0;
-  cursor: pointer;
-}
diff --git a/src/components/GrantRequest/BudgetBreakdownConcept.tsx b/src/components/GrantRequest/BudgetBreakdownConcept.tsx
deleted file mode 100644
index c35f1adab..000000000
--- a/src/components/GrantRequest/BudgetBreakdownConcept.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react'
-
-import { BudgetBreakdownConcept as BudgetBreakdownConceptType } from '../../entities/Grant/types'
-import { CURRENCY_FORMAT_OPTIONS } from '../../helpers'
-import ChevronRightCircleOutline from '../Icon/ChevronRightCircleOutline'
-
-import './BudgetBreakdownConcept.css'
-
-interface Props {
-  item: BudgetBreakdownConceptType
-  onClick: () => void
-}
-
-const BudgetBreakdownConcept = ({ item, onClick }: Props) => {
-  const { concept, estimatedBudget, duration } = item
-
-  return (
-    <div role="button" className="BudgetBreakdownConcept" onClick={onClick}>
-      <div>
-        <h3 className="BudgetBreakdownConcept__Concept">{concept}</h3>
-        <span className="BudgetBreakdownConcept__Duration">{duration} months</span>
-      </div>
-      <div className="BudgetBreakdownConcept__BudgetContainer">
-        <span className="BudgetBreakdownConcept__Budget">
-          {Number(estimatedBudget).toLocaleString(undefined, CURRENCY_FORMAT_OPTIONS)}
-        </span>
-        <ChevronRightCircleOutline />
-      </div>
-    </div>
-  )
-}
-
-export default BudgetBreakdownConcept
diff --git a/src/components/GrantRequest/GrantRequestDueDiligenceSection.tsx b/src/components/GrantRequest/GrantRequestDueDiligenceSection.tsx
index 8cd27c01d..f0161cfc0 100644
--- a/src/components/GrantRequest/GrantRequestDueDiligenceSection.tsx
+++ b/src/components/GrantRequest/GrantRequestDueDiligenceSection.tsx
@@ -8,6 +8,7 @@ import {
   GrantRequestDueDiligence,
 } from '../../entities/Grant/types'
 import { userModifiedForm } from '../../entities/Proposal/utils'
+import { CURRENCY_FORMAT_OPTIONS } from '../../helpers'
 import useFormatMessage from '../../hooks/useFormatMessage'
 import SubLabel from '../Common/SubLabel'
 import Label from '../Common/Typography/Label'
@@ -15,7 +16,7 @@ import ProjectRequestSection from '../ProjectRequest/ProjectRequestSection'
 
 import AddBox from './AddBox'
 import AddBudgetBreakdownModal from './AddBudgetBreakdownModal'
-import BudgetBreakdownConcept from './BudgetBreakdownConcept'
+import BreakdownItem from './BreakdownItem'
 import './GrantRequestDueDiligenceSection.css'
 
 export const INITIAL_GRANT_REQUEST_DUE_DILIGENCE_STATE: GrantRequestDueDiligence = {
@@ -97,9 +98,11 @@ export default function GrantRequestDueDiligenceSection({
         {t('page.submit_grant.due_diligence.budget_breakdown_detail', { value: fundingLeftToDisclose })}
       </SubLabel>
       {dueDiligenceState.budgetBreakdown.map((item, index) => (
-        <BudgetBreakdownConcept
+        <BreakdownItem
           key={`${item.concept}-${index}`}
-          item={item}
+          title={item.concept}
+          subtitle={t('page.proposal_view.grant.breakdown_subtitle', { duration: item.duration })}
+          extra={Number(item.estimatedBudget).toLocaleString(undefined, CURRENCY_FORMAT_OPTIONS)}
           onClick={() => {
             setSelectedBudgetBreakdownConcept(item)
             setModalOpen(true)
diff --git a/src/components/GrantRequest/GrantRequestTeamSection.tsx b/src/components/GrantRequest/GrantRequestTeamSection.tsx
index 6f3fd8758..658888827 100644
--- a/src/components/GrantRequest/GrantRequestTeamSection.tsx
+++ b/src/components/GrantRequest/GrantRequestTeamSection.tsx
@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useState } from 'react'
 
 import isEmpty from 'lodash/isEmpty'
 
-import { GrantRequest, GrantRequestTeam, TeamMember } from '../../entities/Grant/types'
+import { GrantRequestTeam, TeamMember } from '../../entities/Grant/types'
 import { userModifiedForm } from '../../entities/Proposal/utils'
 import useFormatMessage from '../../hooks/useFormatMessage'
 import SubLabel from '../Common/SubLabel'
@@ -11,7 +11,7 @@ import ProjectRequestSection from '../ProjectRequest/ProjectRequestSection'
 
 import AddBox from './AddBox'
 import AddTeamMemberModal from './AddTeamMemberModal'
-import TeamMemberItem from './TeamMemberItem'
+import BreakdownItem from './BreakdownItem'
 
 export const INITIAL_GRANT_REQUEST_TEAM_STATE: GrantRequestTeam = {
   members: [],
@@ -76,9 +76,10 @@ export default function GrantRequestTeamSection({ sectionNumber, onValidation, i
       <Label>{t('page.submit_grant.team.members_label')}</Label>
       <SubLabel>{t('page.submit_grant.team.members_detail')}</SubLabel>
       {teamState.members.map((item, index) => (
-        <TeamMemberItem
+        <BreakdownItem
           key={`${item.name}-${index}`}
-          item={item}
+          title={item.name}
+          subtitle={item.role}
           onClick={() => {
             setSelectedTeamMember(item)
             setModalOpen(true)
diff --git a/src/components/GrantRequest/TeamMemberItem.tsx b/src/components/GrantRequest/TeamMemberItem.tsx
deleted file mode 100644
index 507069e93..000000000
--- a/src/components/GrantRequest/TeamMemberItem.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react'
-
-import { TeamMember } from '../../entities/Grant/types'
-import ChevronRightCircleOutline from '../Icon/ChevronRightCircleOutline'
-
-import './TeamMemberItem.css'
-
-interface Props {
-  item: TeamMember
-  onClick: () => void
-}
-
-const TeamMemberItem = ({ item, onClick }: Props) => {
-  const { name, role } = item
-
-  return (
-    <div role="button" className="TeamMemberItem" onClick={onClick}>
-      <div>
-        <h3 className="TeamMemberItem__Concept">{name}</h3>
-        <span className="TeamMemberItem__Duration">{role}</span>
-      </div>
-      <ChevronRightCircleOutline />
-    </div>
-  )
-}
-
-export default TeamMemberItem