diff --git a/src/lib/Components/StateLogic.svelte b/src/lib/Components/StateLogic.svelte
index 0077c434..0d8f8f5e 100644
--- a/src/lib/Components/StateLogic.svelte
+++ b/src/lib/Components/StateLogic.svelte
@@ -49,6 +49,10 @@
 		{@html title}
 	{/if}
 
+	<!--  Climate -->
+{:else if getDomain(entity_id) === 'climate' && attributes?.hvac_action}
+	{$lang(attributes?.hvac_action)}
+
 	<!--  Humidifier -->
 {:else if getDomain(entity_id) === 'humidifier' && entity?.state === 'on' && attributes?.action}
 	{$lang('humidifier_' + attributes?.action)}
diff --git a/src/lib/Main/Button.svelte b/src/lib/Main/Button.svelte
index b080a46e..10f97a0d 100644
--- a/src/lib/Main/Button.svelte
+++ b/src/lib/Main/Button.svelte
@@ -8,6 +8,7 @@
 		lang,
 		motion,
 		onStates,
+		climateHvacActionToMode,
 		ripple,
 		states
 	} from '$lib/Stores';
@@ -71,7 +72,9 @@
 	// icon is image if extension, e.g. test.png
 	$: image = icon?.includes('.');
 
-	$: stateOn = $onStates?.includes(entity?.state);
+	$: stateOn = $onStates?.includes(
+        attributes?.hvac_action ? $climateHvacActionToMode?.[attributes?.hvac_action] : entity?.state
+    );
 
 	/**
 	 * Toggles the state of the specified entity
diff --git a/src/lib/Stores.ts b/src/lib/Stores.ts
index 42d1a63c..25a452c8 100644
--- a/src/lib/Stores.ts
+++ b/src/lib/Stores.ts
@@ -46,6 +46,17 @@ export const onStates = readable([
 	'gas'
 ]);
 
+// climate states
+export const climateHvacActionToMode = readable<Record<string, string>>({
+	cooling: 'cool',
+	drying: 'dry',
+	fan: 'fan_only',
+	preheating: 'heat',
+	heating: 'heat',
+	idle: 'off',
+	off: 'off'
+});
+
 // drawer
 export const drawerSearch = writable<string | undefined>();
 export const focusSearch = writable<boolean>(false);