diff --git a/README.md b/README.md
index 5c6ecf2..4a1c077 100644
--- a/README.md
+++ b/README.md
@@ -27,6 +27,7 @@ resources:
 | Key                  | Type                 | Description                                                                                                                                                                                                 | Example                                                                                                                                          |
 | -------------------- | -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
 | heading              | \_string             | array\_                                                                                                                                                                                                     | The heading to display. Set to false to hide header (**Note**: Also remember to escape!). Can also be an array, with icons.                      | `heading: "\U0001F6CB Living room"` |
+| heading_entity              | \_string             | array\_                                                                                                                                                                                                     | Entity to control on heading click. See heading entity section.                      | `heading: "\U0001F6CB Living room"` |
 | background           | _string_             | A valid CSS color to use as the background                                                                                                                                                                  | `background: "#EDE7B0"`, `background: red`                                                                                                       |
 | color                | _string_             | A valid CSS color to use as the text color                                                                                                                                                                  | `color: "#EDE7B0"`, `color: red`                                                                                                                 |
 | link                 | _string_             | A link, to a different view in HA for example                                                                                                                                                               | `link: /lovelace/living_room`                                                                                                                    |
@@ -68,6 +69,29 @@ type: custom:banner-card
 heading: [mdi:shower, Bathroom, mdi:paper-roll]
 ```
 
+### heading_entity
+You can speficy an entity and optionally a custom action to execute if the user clicks on the heading. Example:
+```yaml
+- type: custom:banner-card
+  heading: 
+    - mdi:shower
+    - Bathroom
+  heading_entity: switch.living_room
+```
+
+The example above toggles the switch `switch.living_room` on every click on the heading. As long as you don't specify a heading color, the heading color will automatically change depending on the entity state.
+
+You can also specify a custom action action as described in [Using entity action](#using-entity-action):
+```yaml
+- type: custom:banner-card
+  heading: 
+    - mdi:shower
+    - Bathroom
+  heading_entity:
+    entity: switch.living_room
+    action:
+      service: switch.turn_on
+```
 ### map_state
 
 You can use `map_state` to force a value or icon to be rendered when the entity has a certain state. It either supports a full object where you can override any key for the entity, like `value`, `name`, `unit` and so on, or a shorthand string that maps to `value`.
diff --git a/src/index.js b/src/index.js
index 07a780c..bd131bb 100644
--- a/src/index.js
+++ b/src/index.js
@@ -60,6 +60,7 @@ class BannerCard extends LitElement {
   constructor() {
     super();
     this.config = {};
+    this.heading_entity = {};
     this.entities = [];
     this._hass = {};
   }
@@ -79,6 +80,9 @@ class BannerCard extends LitElement {
         "var(--bc-heading-color-light)",
         "var(--bc-heading-color-dark)"
       );
+    
+    this.headerNotActiveColor = this.color;
+    this.headerActiveColor = `var(--paper-item-icon-active-color, ${this.color.match(/(var\(.+\))|(.+)/)[1]})`;
 
     const rowSizeType = typeof config.row_size;
     if (rowSizeType !== "undefined") {
@@ -101,6 +105,26 @@ class BannerCard extends LitElement {
     this.entityValues = (this.entities || [])
       .filter((conf) => filterEntity(conf, hass.states))
       .map((conf) => this.parseEntity(conf));
+
+    if (this.config.heading_entity) {
+      if (typeof this.config.heading_entity === "string") {
+        this.heading_entity = this.parseEntity({
+          entity: this.config.heading_entity
+        });
+      } else {
+        this.heading_entity = this.parseEntity(this.config.heading_entity);
+      }
+
+      if (!this.config.color && this.color) {
+        // no user defined color specified BUT a heading entity
+        //   -> colorize the heading depending on the heading entity state
+        if (this.heading_entity.state === "on") {
+          this.color = this.headerActiveColor;
+        } else {
+          this.color = this.headerNotActiveColor;
+        }
+      }
+    }
   }
 
   parseEntity(config) {
@@ -175,7 +199,27 @@ class BannerCard extends LitElement {
       heading = [heading];
     }
 
-    const onClick = () => this.config.link && this.navigate(this.config.link);
+    const onClick = () => {
+      if (this.config.link) {
+        this.navigate(this.config.link);
+      } else if (this.heading_entity.entity) {
+        if (this.heading_entity.action) {
+          const { service, ...serviceData } = this.heading_entity.action;
+          const [domain, action] = service.split(".");
+          this._hass.callService(domain, action, {
+            entity_id: this.heading_entity.entity,
+            ...serviceData,
+          });
+        } else {
+          this._hass.callService(
+            this.heading_entity.domain,
+            "toggle",
+            { entity_id: this.heading_entity.entity }
+          );
+        }
+      }
+    };
+
     return html`
       <h2 class="heading" @click=${onClick} style="color: ${this.color};">
         ${heading.map((fragment) => {