diff --git a/app/css/interceptor.css b/app/css/interceptor.css
index 88289d4f..dcf22ff2 100644
--- a/app/css/interceptor.css
+++ b/app/css/interceptor.css
@@ -415,6 +415,16 @@ a.dropdown-item.is-active, button.dropdown-item.is-active {
 .card-header-icon {
 	background-color: transparent;
 	color: var(--text-color);
+
+	.icon:has(svg[aria-label=chevron-icon]) {
+		width: 1rem;
+		height: 1rem;
+		transition: transform 200ms;
+
+		.card-header:has(+ .card-content) & {
+			transform: rotateX(180deg);
+		}
+	}
 }
 
 .card-header-icon:disabled {
diff --git a/app/ts/components/pages/InterceptorAccess.tsx b/app/ts/components/pages/InterceptorAccess.tsx
index 5979c8db..0f7e86bf 100644
--- a/app/ts/components/pages/InterceptorAccess.tsx
+++ b/app/ts/components/pages/InterceptorAccess.tsx
@@ -17,6 +17,7 @@ import { Page } from '../../types/exportedSettingsTypes.js'
 import { ReadonlySignal, useComputed, useSignal } from '@preact/signals'
 import { RpcEntries } from '../../types/rpc.js'
 import { ModifyAddressWindowState } from '../../types/visualizer-types.js'
+import { ChevronIcon } from '../subcomponents/icons.js'
 
 function Title({ icon, title} : {icon: string | undefined, title: string}) {
 	return <span style = 'font-weight: 900; line-height: 48px'>
@@ -52,7 +53,7 @@ function AssociatedTogether({ associatedAddresses, renameAddressCallBack }: { as
 					}
 				</p>
 				<div class = 'card-header-icon'>
-					<span class = 'icon' style = 'color: var(--text-color); font-weight: unset; font-size: 0.8em;'> V </span>
+					<span class = 'icon'><ChevronIcon /></span>
 				</div>
 			</header>
 			{ !showLogs
diff --git a/app/ts/components/pages/PersonalSign.tsx b/app/ts/components/pages/PersonalSign.tsx
index 0de71fc8..9f46cf07 100644
--- a/app/ts/components/pages/PersonalSign.tsx
+++ b/app/ts/components/pages/PersonalSign.tsx
@@ -19,7 +19,7 @@ import { QuarantineReasons } from '../simulationExplaining/Transactions.js'
 import { GnosisSafeVisualizer } from '../simulationExplaining/customExplainers/GnosisSafeVisualizer.js'
 import { EditEnsNamedHashCallBack } from '../subcomponents/ens.js'
 import { ViewSelector, ViewSelector as Viewer } from '../subcomponents/ViewSelector.js'
-import { XMarkIcon } from '../subcomponents/icons.js'
+import { ChevronIcon, XMarkIcon } from '../subcomponents/icons.js'
 import { TransactionInput } from '../subcomponents/ParsedInputData.js'
 import { ErrorComponent } from '../subcomponents/Error.js'
 import { PendingTransactionOrSignableMessage } from '../../types/accessRequest.js'
@@ -358,7 +358,7 @@ function ExtraDetails({ visualizedPersonalSignRequest, renameAddressCallBack }:
 				Extra details
 			</p>
 			<div class = 'card-header-icon'>
-				<span class = 'icon' style = 'color: var(--text-color); font-weight: unset; font-size: 0.8em;'> V </span>
+				<span class = 'icon'><ChevronIcon /></span>
 			</div>
 		</header>
 		{ !showSummary
@@ -387,7 +387,7 @@ function RawMessage({ visualizedPersonalSignRequest }: ExtraDetailsCardParams) {
 				Raw message
 			</p>
 			<div class = 'card-header-icon'>
-				<span class = 'icon' style = 'color: var(--text-color); font-weight: unset; font-size: 0.8em;'> V </span>
+				<span class = 'icon'><ChevronIcon /></span>
 			</div>
 		</header>
 		{ !showSummary
diff --git a/app/ts/components/simulationExplaining/SimulationSummary.tsx b/app/ts/components/simulationExplaining/SimulationSummary.tsx
index 79d8ce07..ac94aaf5 100644
--- a/app/ts/components/simulationExplaining/SimulationSummary.tsx
+++ b/app/ts/components/simulationExplaining/SimulationSummary.tsx
@@ -18,7 +18,7 @@ import { Website } from '../../types/websiteAccessTypes.js'
 import { extractTokenEvents } from '../../background/metadataUtils.js'
 import { EditEnsNamedHashCallBack } from '../subcomponents/ens.js'
 import { EnrichedEthereumInputData } from '../../types/EnrichedEthereumData.js'
-import { XMarkIcon } from '../subcomponents/icons.js'
+import { ChevronIcon, XMarkIcon } from '../subcomponents/icons.js'
 import { TransactionInput } from '../subcomponents/ParsedInputData.js'
 import { sendPopupMessageToBackgroundPage } from '../../background/backgroundUtils.js'
 import { IntegerInput } from '../subcomponents/AutosizingInput.js'
@@ -428,7 +428,7 @@ export function TokenLogAnalysisCard({ simTx, renameAddressCallBack }: TokenLogA
 					{ tokenResults.length === 0 ? `No ${ tokenEventsPlural }` : `${ tokenResults.length > 1 ? `${ upperCaseFirstCharacter(convertNumberToCharacterRepresentationIfSmallEnough(tokenResults.length)) } ${ tokenEventsPlural }` : tokenEventsSingular }` }
 				</p>
 				<div class = 'card-header-icon'>
-					<span class = 'icon' style = 'color: var(--text-color); font-weight: unset; font-size: 0.8em;'> V </span>
+					<span class = 'icon'><ChevronIcon /></span>
 				</div>
 			</header>
 			{ !showLogs
@@ -463,7 +463,7 @@ export function NonTokenLogAnalysisCard({ simTx, addressMetaData, renameAddressC
 					{ nonTokenLogs.length === 0 ? 'No non-token events' : `${ upperCaseFirstCharacter(convertNumberToCharacterRepresentationIfSmallEnough(nonTokenLogs.length)) } non-token event${ nonTokenLogs.length > 1 ? 's' : '' }` }
 				</p>
 				<div class = 'card-header-icon'>
-					<span class = 'icon' style = 'color: var(--text-color); font-weight: unset; font-size: 0.8em;'> V </span>
+					<span class = 'icon'><ChevronIcon /></span>
 				</div>
 			</header>
 			{ !showLogs
@@ -510,7 +510,7 @@ export function TransactionsAccountChangesCard({ simTx, renameAddressCallBack, a
 				{ numberOfChanges === 0 ? 'No changes in accounts' : `${  upperCaseFirstCharacter(convertNumberToCharacterRepresentationIfSmallEnough(numberOfChanges)) } account${ numberOfChanges > 1 ? 's' : '' } changing` }
 			</p>
 			<div class = 'card-header-icon'>
-				<span class = 'icon' style = 'color: var(--text-color); font-weight: unset; font-size: 0.8em;'> V </span>
+				<span class = 'icon'><ChevronIcon /></span>
 			</div>
 		</header>
 		{ !showSummary
@@ -698,7 +698,7 @@ export function SimulationSummary(param: SimulationSummaryParams) {
 							{ notOwnAddresses.length === 0 ? 'No changes in other accounts' : `${ upperCaseFirstCharacter(convertNumberToCharacterRepresentationIfSmallEnough(notOwnAddresses.length)) } other account${ notOwnAddresses.length > 1 ? 's' : '' } changing` }
 						</p>
 						<div class = 'card-header-icon'>
-							<span class = 'icon' style = 'color: var(--text-color); font-weight: unset; font-size: 0.8em;'> V </span>
+							<span class = 'icon'><ChevronIcon /></span>
 						</div>
 					</header>
 					{ !showOtherAccountChanges
@@ -755,7 +755,7 @@ export function RawTransactionDetailsCard({ transaction, renameAddressCallBack,
 				Raw transaction information
 			</p>
 			<div class = 'card-header-icon'>
-				<span class = 'icon' style = 'color: var(--text-color); font-weight: unset; font-size: 0.8em;'> V </span>
+				<span class = 'icon'><ChevronIcon /></span>
 			</div>
 		</header>
 		{ !showSummary
diff --git a/app/ts/components/subcomponents/icons.tsx b/app/ts/components/subcomponents/icons.tsx
index 4799ae61..0313b1aa 100644
--- a/app/ts/components/subcomponents/icons.tsx
+++ b/app/ts/components/subcomponents/icons.tsx
@@ -54,3 +54,5 @@ export const CopyIcon = () => <svg width = '1em' height = '1em' viewBox = '0 0 2
 export const EditIcon = () => <svg width = '1em' height = '1em' viewBox = '0 0 24 24' fill = 'none' xmlns = 'http://www.w3.org/2000/svg'><path fill-rule = 'evenodd' clip-rule = 'evenodd' d = 'M10 3H7v2H4a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h3v2h3zM7 8v8H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z' fill = 'currentColor' /><path d = 'M19 16h-7v3h8a3 3 0 0 0 3-3V8a3 3 0 0 0-3-3h-8v3h7a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1' fill = 'currentColor' /></svg>
 
 export const CheckIcon = () => <svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M22.08 6.04 8.478 20.163l-6.558-6.81 2.16-2.081 4.398 4.566L19.92 3.959z" fill="currentColor"/></svg>
+
+export const ChevronIcon = () => <svg role = 'img' aria-label = 'chevron-icon' width = '1em' height = '1em' viewBox = '0 0 16 16' fill = 'none' xmlns = 'http://www.w3.org/2000/svg'><path d = 'm2 5.333 6 6 6-6' stroke = 'currentColor' strokeWidth = { 1.5 } /></svg>