diff --git a/custom_updater.json b/custom_updater.json
index 902889c..e75239d 100644
--- a/custom_updater.json
+++ b/custom_updater.json
@@ -1,9 +1,8 @@
 {
   "power-wheel-card": {
-    "updated_at": "2019-03-13",
-    "version": "0.0.12",
+    "changelog": "https://github.com/gurbyz/custom-cards-lovelace/blob/master/power-wheel-card/CHANGELOG.md",
     "remote_location": "https://raw.githubusercontent.com/gurbyz/custom-cards-lovelace/master/power-wheel-card/power-wheel-card.js",
-    "visit_repo": "https://github.com/gurbyz/custom-cards-lovelace/tree/master/power-wheel-card",
-    "changelog": "https://github.com/gurbyz/custom-cards-lovelace/blob/master/power-wheel-card/CHANGELOG.md"
+    "version": "0.0.13",
+    "visit_repo": "https://github.com/gurbyz/custom-cards-lovelace/tree/master/power-wheel-card"
   }
 }
\ No newline at end of file
diff --git a/power-wheel-card/CHANGELOG.md b/power-wheel-card/CHANGELOG.md
index 14b57d5..6af6839 100644
--- a/power-wheel-card/CHANGELOG.md
+++ b/power-wheel-card/CHANGELOG.md
@@ -1,5 +1,15 @@
 Changelog
 ====
+## 0.0.13
+### New features
+* Split energy rates for consuming from the grid and producing to the grid.
+  * Use new card parameters `energy_consumption_rate` and optional `energy_production_rate`.
+  * **DEPRECATED.** Current card parameter `energy_price` is deprecated and its value will be used as value for `energy_consumption_rate` for a while.
+  Please replace `energy_price` by `energy_consumption_rate` in your setup.
+### Improvements
+* Hide values near arrows in more cases.
+* Code improvements.
+
 ## 0.0.12
 ### Improvements
 * Replaced ES6 *rest destructuring* language constructs to support iOS10.3 on iPad4.
diff --git a/power-wheel-card/README.md b/power-wheel-card/README.md
index e740092..646cb0d 100644
--- a/power-wheel-card/README.md
+++ b/power-wheel-card/README.md
@@ -23,7 +23,7 @@ Features of the custom power-wheel-card:
   Input for the calculation is the energy that you consumed from the grid and the energy that you produced to the grid.
 * Calculates the energy that your home is consuming: home energy.
   Input for the calculation is the energy that your solar panels produced and the energy that you consumed from and produced to the grid.
-* Calculates the costs/savings for all the energy values.
+* Calculates the costs/savings for all the energy values. Takes into account different rates for consuming and producing energy from and to the grid.
 * Displays the transition between these power, energy and money values as arrows.
   E.g. if your solar power panels produce power, the arrow from solar to home turns active.
   And if your solar power panels produce enough power to deliver some back to the grid, the arrow from solar to grid turns active.
@@ -150,9 +150,11 @@ The toggle functions to switch to the *money view* will be disabled.
 
 But if you want the *money view*:
 1. Comply to all the requirements of the *energy view* first.
-2. Supply the card parameter `energy_price`.
+1. Supply the card parameter `energy_consumption_rate`.
+1. (Optional) If you have a different rate for producing energy back to the grid, you can also supply the card parameter `energy_production_rate`.
 
-> The power-wheel-card has **one** price for the energy. If your energy price is depending on the (time of) day, please supply the average price for high and low tariff or choose to not use the *money view*. 
+> The power-wheel-card only has rates for the energy depending on whether you consume or produce it.
+If your energy rate is depending on the (time of) day, please supply the average rates for high and low tariff or choose to not use the *money view*. 
 
 
 ## Instructions
@@ -199,8 +201,10 @@ There are many more card parameters available, but it's advised to start with th
 |solar_energy_entity|string|optional|Default the *energy view* will not be enabled.|Entity id of your solar energy sensor. E.g. `sensor.YOUR_SOLAR_ENERGY_SENSOR`. See requirements above.|
 |grid_energy_consumption_entity (D)|string|optional, always together with E|Default the *energy view* will not be enabled.|Entity id of your sensor for energy that's consumed from the grid. E.g. `sensor.YOUR_GRID_ENERGY_CONSUMPTION_SENSOR`. See requirements above.|
 |grid_energy_production_entity (E)|string|optional, always together with D|Default the *energy view* will not be enabled.|Entity id of your sensor for energy that's produced to the grid. E.g. `sensor.YOUR_GRID_ENERGY_PRODUCTION_SENSOR`. See requirements above.|
-|energy_price|float|optional|Default the *money view* will not be enabled.|The price of your energy per unit of energy. E.g. `0.20`.|
-|money_unit|string|optional|`"€"`|The unit of `energy_price`. This unit will be used for displaying all money values.|
+|energy_consumption_rate|float|optional|Default the *money view* will not be enabled.|The rate of your energy consumed from the grid per unit of energy. E.g. `0.20`.|
+|energy_production_rate|float|optional|The value of `energy_consumption_rate`.|The rate of your energy produced to the grid per unit of energy. E.g. `0.15`.|
+|energy_price *(deprecated)*|float|optional| |Deprecated. Please use `energy_consumption_rate` and evt. the optional `energy_production_rate` as of version 0.0.13.|
+|money_unit|string|optional|`"€"`|The unit of `energy_consumption_rate` and `energy_production_rate`. This unit will be used for displaying all money values.|
 |solar_icon|string|optional|The icon of your own customized solar sensor(s). If not available, then `"mdi:weather-sunny"` will be used.|Icon for solar power and energy.|
 |grid_icon|string|optional|The icon of your own customized grid sensor(s) if its entity parameter is set. If not available, then `"mdi:transmission-tower"` will be used.|Icon for grid power and energy.|
 |home_icon|string|optional|The icon of your own customized home sensor(s) if its entity parameter is set. If not available, then `"mdi:home"` will be used.|Icon for home power and energy.|
@@ -265,7 +269,8 @@ A more advanced example for in the `ui-lovelace.yaml` file:
   solar_energy_entity: sensor.YOUR_SOLAR_ENERGY_SENSOR
   grid_energy_consumption_entity: sensor.YOUR_GRID_ENERGY_CONSUMPTION_SENSOR
   grid_energy_production_entity: sensor.YOUR_GRID_ENERGY_PRODUCTION_SENSOR
-  energy_price: 0.20
+  energy_consumption_rate: 0.20
+  energy_production_rate: 0.15
   money_unit: "$"
   solar_icon: "mdi:white-balance-sunny"
   grid_icon: "mdi:flash"
diff --git a/power-wheel-card/power-wheel-card.js b/power-wheel-card/power-wheel-card.js
index a9fe096..68ae036 100644
--- a/power-wheel-card/power-wheel-card.js
+++ b/power-wheel-card/power-wheel-card.js
@@ -5,7 +5,7 @@
  *
  */
 
-const __VERSION = "0.0.12";
+const __VERSION = "0.0.13";
 
 const LitElement = Object.getPrototypeOf(customElements.get("home-assistant-main"));
 const html = LitElement.prototype.html;
@@ -121,7 +121,7 @@ class PowerWheelCard extends LitElement {
   
   /* Card functions */
 
-  _generateClass(value) {
+  static _generateClass(value) {
     return value > 0 ? 'producing' : ((value < 0) ? 'consuming' : 'inactive');
   }
 
@@ -133,7 +133,7 @@ class PowerWheelCard extends LitElement {
     const valueStr = typeof val === 'undefined' ? 'unavailable' : this._generateValueStr(val, decimals);
     const stateObj = this.hass.states[entity];
     const icon = configIcon ? configIcon : (stateObj && stateObj.attributes.icon ? stateObj.attributes.icon : defaultIcon);
-    const classValue = this._generateClass(val);
+    const classValue = PowerWheelCard._generateClass(val);
 
     return {
       stateObj,
@@ -224,7 +224,7 @@ class PowerWheelCard extends LitElement {
     }
   }
 
-  _logConsole(message) {
+  static _logConsole(message) {
     // if (this.config.debug) {
       console.info(`%cpower-wheel-card%c\n${message}`, "color: green; font-weight: bold", "");
     // }
@@ -313,14 +313,14 @@ class PowerWheelCard extends LitElement {
     }
   }
 
-  firstUpdated() {
+  firstUpdated(changedProperties) {
     if (this.config.debug) {
       let line = `Version: ${__VERSION}\nLovelace resource: ${this._lovelaceResource()}\nHA version: ${this.hass.config.version}`;
       line += `\nAgent: ${navigator.userAgent}`;
       line += `\nReport issues here: https://github.com/gurbyz/custom-cards-lovelace/issues`;
-      line += `\nProcessed config: ${JSON.stringify(this.config, '', ' ')}\nRegistered sensors: ${JSON.stringify(this.sensors, '', ' ')}`;
-      line += `\nViews object: ${JSON.stringify(this.views, '', ' ')}`;
-      this._logConsole(line);
+      line += `\nProcessed config: ${JSON.stringify(this.config, null, ' ')}\nRegistered sensors: ${JSON.stringify(this.sensors, null, ' ')}`;
+      line += `\nViews object: ${JSON.stringify(this.views, null, ' ')}`;
+      PowerWheelCard._logConsole(line);
       this._addMessage('warn', `[${__VERSION}] Debug mode is on.`);
     }
     this._validateSensors();
@@ -330,6 +330,9 @@ class PowerWheelCard extends LitElement {
       this.config.grid_energy_consumption_entity, this.config.grid_energy_production_entity);
     this.views.money.unit = this.config.money_unit;
     this.views = Object.assign({}, this.views);
+    // if (this.config.energy_price) {
+    //   this._addMessage('warn', 'Deprecated card parameter \'energy_price\' is used.');
+    // }
   }
 
   _sensorChangeDetected(oldValue) {
@@ -354,12 +357,22 @@ class PowerWheelCard extends LitElement {
 
   render() {
     if (this.view === 'money' && this.views.money.capable) {
-      this.data.solar.val = this.config.energy_price * this._calculateSolarValue(this.config.solar_energy_entity);
-      this.data.grid2home.val = this.config.energy_price * this._calculateGrid2HomeValue(this.config.grid_energy_consumption_entity, this.config.grid_energy_entity);
-      this.data.solar2grid.val = this.config.energy_price * this._calculateSolar2GridValue(this.config.grid_energy_production_entity, this.config.grid_energy_entity);
+      // Calculate energy values first
+      this.data.solar.val = this._calculateSolarValue(this.config.solar_energy_entity);
+      this.data.grid2home.val = this._calculateGrid2HomeValue(this.config.grid_energy_consumption_entity, this.config.grid_energy_entity);
+      this.data.solar2grid.val = this._calculateSolar2GridValue(this.config.grid_energy_production_entity, this.config.grid_energy_entity);
       this.data.grid.val = this._calculateGridValue(this.config.grid_energy_entity);
       this.data.home.val = this._calculateHomeValue(this.config.home_energy_entity);
       this.data.solar2home.val = this._calculateSolar2HomeValue();
+
+      // Convert energy values into money values
+      this.data.solar2grid.val *= this.config.energy_production_rate;
+      this.data.grid2home.val *= this.config.energy_consumption_rate;
+      this.data.solar2home.val *= this.config.energy_consumption_rate;
+      this.data.solar.val = this.data.solar2grid.val + this.data.solar2home.val;
+      this.data.grid.val = this.data.solar2grid.val - this.data.grid2home.val;
+      this.data.home.val = - this.data.grid2home.val - this.data.solar2home.val;
+
       this.data.solar = this._makePositionObject(this.data.solar.val, this.config.solar_energy_entity, this.config.solar_icon,
         'mdi:weather-sunny', this.config.money_decimals);
       this.data.grid = this._makePositionObject(this.data.grid.val, this.config.grid_energy_entity, this.config.grid_icon,
@@ -376,6 +389,7 @@ class PowerWheelCard extends LitElement {
       this.data.grid.val = this._calculateGridValue(this.config.grid_energy_entity);
       this.data.home.val = this._calculateHomeValue(this.config.home_energy_entity);
       this.data.solar2home.val = this._calculateSolar2HomeValue();
+
       this.data.solar = this._makePositionObject(this.data.solar.val, this.config.solar_energy_entity, this.config.solar_icon,
           'mdi:weather-sunny', this.config.energy_decimals);
       this.data.grid = this._makePositionObject(this.data.grid.val, this.config.grid_energy_entity, this.config.grid_icon,
@@ -392,6 +406,7 @@ class PowerWheelCard extends LitElement {
       this.data.grid.val = this._calculateGridValue(this.config.grid_power_entity);
       this.data.home.val = this._calculateHomeValue();
       this.data.solar2home.val = this._calculateSolar2HomeValue();
+
       this.data.solar = this._makePositionObject(this.data.solar.val, this.config.solar_power_entity, this.config.solar_icon,
           'mdi:weather-sunny', this.config.power_decimals);
       this.data.grid = this._makePositionObject(this.data.grid.val, this.config.grid_power_entity, this.config.grid_icon,
@@ -434,12 +449,12 @@ class PowerWheelCard extends LitElement {
             ${this._cell('solar', this.data.solar, 'position')}
           </div>
           <div class="row">
-            ${this._cell('solar2grid', this.data.solar2grid, 'arrow', this.data.solar.val)}
-            ${this._cell('solar2home', this.data.solar2home, 'arrow', this.data.solar.val)}
+            ${this._cell('solar2grid', this.data.solar2grid, 'arrow', this.data.solar.val, this.data.grid.val)}
+            ${this._cell('solar2home', this.data.solar2home, 'arrow', this.data.solar.val, this.data.home.val)}
           </div>
           <div class="row">
             ${this._cell('grid', this.data.grid, 'position')}
-            ${this._cell('grid2home', this.data.grid2home, 'arrow', this.data.grid.val)}
+            ${this._cell('grid2home', this.data.grid2home, 'arrow', this.data.grid.val, this.data.home.val)}
             ${this._cell('home', this.data.home, 'position')}
           </div>
         </div>
@@ -449,14 +464,14 @@ class PowerWheelCard extends LitElement {
   
   /* Template functions */
 
-  _cell(id, cellObj, cellType, hideValue) {
+  _cell(id, cellObj, cellType, hideValue1, hideValue2) {
     return html`
       <div id="cell-${id}"
             class="cell ${cellType} ${cellObj.hasSensor ? 'sensor' : ''}" 
             @click="${cellObj.hasSensor ? () => this._handleClick(cellObj.stateObj) : () => {}}"
             title="${cellObj.hasSensor ? `More info${cellObj.stateObj.attributes.friendly_name ? ':\n' + cellObj.stateObj.attributes.friendly_name : ''}` : ''}">
         <ha-icon id="icon-${id}" class="${cellObj.classValue}" icon="${cellObj.icon}"></ha-icon>
-        <div id="value-${id}" class="value">${cellType === 'arrow' && (cellObj.val === 0 || cellObj.val === Math.abs(hideValue)) ? '' : cellObj.valueStr}</div>
+        <div id="value-${id}" class="value">${cellType === 'arrow' && (cellObj.val === 0 || Math.abs(cellObj.val) === Math.abs(hideValue1) || Math.abs(cellObj.val) === Math.abs(hideValue2)) ? '' : cellObj.valueStr}</div>
       </div>
     `;
   }
@@ -575,6 +590,12 @@ class PowerWheelCard extends LitElement {
     }
     config.auto_toggle_view_period = config.auto_toggle_view_period ? config.auto_toggle_view_period : 10;
     config.debug = config.debug ? config.debug : false;
+    if (config.energy_price && config.energy_consumption_rate === undefined) {
+      config.energy_consumption_rate = config.energy_price;
+    }
+    if (config.energy_production_rate === undefined && config.energy_consumption_rate) {
+      config.energy_production_rate = config.energy_consumption_rate;
+    }
 
     this.views.power = {
       title: config.title_power,
@@ -592,7 +613,7 @@ class PowerWheelCard extends LitElement {
       title: config.title_money,
       oneGridSensor: this.views.energy.oneGridSensor,
       twoGridSensors: this.views.energy.twoGridSensors,
-      capable: this.views.energy.capable && !!config.energy_price,
+      capable: this.views.energy.capable && !!config.energy_consumption_rate,
     };
     this.autoToggleView = config.initial_auto_toggle_view;
     this.sensors = this._getSensors(config);
diff --git a/power-wheel-card/test/auto_toggle.html b/power-wheel-card/test/auto_toggle.html
index 428c198..1ff0d6e 100644
--- a/power-wheel-card/test/auto_toggle.html
+++ b/power-wheel-card/test/auto_toggle.html
@@ -27,7 +27,7 @@
         solar_energy_entity: "sensor.solar_energy",
         grid_energy_consumption_entity: "sensor.grid_energy_consumption",
         grid_energy_production_entity: "sensor.grid_energy_production",
-        energy_price: 1.00,
+        energy_consumption_rate: 1.00,
         initial_auto_toggle_view: true,
         auto_toggle_view_period: 1,
       };
diff --git a/power-wheel-card/test/basic_config.html b/power-wheel-card/test/basic_config.html
index acb988c..2742189 100644
--- a/power-wheel-card/test/basic_config.html
+++ b/power-wheel-card/test/basic_config.html
@@ -196,8 +196,8 @@
         assert.equal(card.shadowRoot.querySelector('#value-solar').innerText, '500', 'Solar should have correct value');
         assert.equal(card.shadowRoot.querySelector('#value-grid').innerText, '50', 'Grid should have correct value');
         assert.equal(card.shadowRoot.querySelector('#value-home').innerText, '-450', 'Home should have correct value');
-        assert.equal(card.shadowRoot.querySelector('#value-solar2grid').innerText, '50', 'Solar2Grid arrow should have correct value');
-        assert.equal(card.shadowRoot.querySelector('#value-solar2home').innerText, '450', 'Solar2Home arrow should have correct value');
+        assert.equal(card.shadowRoot.querySelector('#value-solar2grid').innerText, '', 'Solar2Grid arrow should have correct value');
+        assert.equal(card.shadowRoot.querySelector('#value-solar2home').innerText, '', 'Solar2Home arrow should have correct value');
         assert.equal(card.shadowRoot.querySelector('#value-grid2home').innerText, '', 'Grid2Home arrow shouldn\'t have a value');
         done();
       });
@@ -259,7 +259,7 @@
         assert.equal(card.shadowRoot.querySelector('#value-grid').innerText, '-5', 'Grid should have correct value');
         assert.equal(card.shadowRoot.querySelector('#value-home').innerText, '0', 'Home should have correct value');
         assert.equal(card.shadowRoot.querySelector('#value-solar2grid').innerText, '', 'Solar2Grid arrow shouldn\'t have a value');
-        assert.equal(card.shadowRoot.querySelector('#value-solar2home').innerText, '5', 'Solar2Home arrow should have a value');
+        assert.equal(card.shadowRoot.querySelector('#value-solar2home').innerText, '', 'Solar2Home arrow should have a value');
         assert.equal(card.shadowRoot.querySelector('#value-grid2home').innerText, '', 'Grid2Home arrow shouldn\'t have a value');
         done();
       });
diff --git a/power-wheel-card/test/basic_one_grid_sensor.html b/power-wheel-card/test/basic_one_grid_sensor.html
index c0e45a2..ddae27f 100644
--- a/power-wheel-card/test/basic_one_grid_sensor.html
+++ b/power-wheel-card/test/basic_one_grid_sensor.html
@@ -141,8 +141,8 @@
         assert.equal(card.shadowRoot.querySelector('#value-solar').innerText, '500', 'Solar should have correct value');
         assert.equal(card.shadowRoot.querySelector('#value-grid').innerText, '50', 'Grid should have correct value');
         assert.equal(card.shadowRoot.querySelector('#value-home').innerText, '-450', 'Home should have correct value');
-        assert.equal(card.shadowRoot.querySelector('#value-solar2grid').innerText, '50', 'Solar2Grid arrow should have correct value');
-        assert.equal(card.shadowRoot.querySelector('#value-solar2home').innerText, '450', 'Solar2Home arrow should have correct value');
+        assert.equal(card.shadowRoot.querySelector('#value-solar2grid').innerText, '', 'Solar2Grid arrow should have correct value');
+        assert.equal(card.shadowRoot.querySelector('#value-solar2home').innerText, '', 'Solar2Home arrow should have correct value');
         assert.equal(card.shadowRoot.querySelector('#value-grid2home').innerText, '', 'Grid2Home arrow shouldn\'t have a value');
         done();
       });
@@ -204,7 +204,7 @@
         assert.equal(card.shadowRoot.querySelector('#value-grid').innerText, '-5', 'Grid should have correct value');
         assert.equal(card.shadowRoot.querySelector('#value-home').innerText, '0', 'Home should have correct value');
         assert.equal(card.shadowRoot.querySelector('#value-solar2grid').innerText, '', 'Solar2Grid arrow shouldn\'t have a value');
-        assert.equal(card.shadowRoot.querySelector('#value-solar2home').innerText, '5', 'Solar2Home arrow should have a value');
+        assert.equal(card.shadowRoot.querySelector('#value-solar2home').innerText, '', 'Solar2Home arrow should have a value');
         assert.equal(card.shadowRoot.querySelector('#value-grid2home').innerText, '', 'Grid2Home arrow shouldn\'t have a value');
         done();
       });
diff --git a/power-wheel-card/test/basic_one_grid_sensor_switched_polarity.html b/power-wheel-card/test/basic_one_grid_sensor_switched_polarity.html
index 841e566..f882558 100644
--- a/power-wheel-card/test/basic_one_grid_sensor_switched_polarity.html
+++ b/power-wheel-card/test/basic_one_grid_sensor_switched_polarity.html
@@ -141,8 +141,8 @@
         assert.equal(card.shadowRoot.querySelector('#value-solar').innerText, '500', 'Solar should have correct value');
         assert.equal(card.shadowRoot.querySelector('#value-grid').innerText, '50', 'Grid should have correct value');
         assert.equal(card.shadowRoot.querySelector('#value-home').innerText, '-450', 'Home should have correct value');
-        assert.equal(card.shadowRoot.querySelector('#value-solar2grid').innerText, '50', 'Solar2Grid arrow should have correct value');
-        assert.equal(card.shadowRoot.querySelector('#value-solar2home').innerText, '450', 'Solar2Home arrow should have correct value');
+        assert.equal(card.shadowRoot.querySelector('#value-solar2grid').innerText, '', 'Solar2Grid arrow should have correct value');
+        assert.equal(card.shadowRoot.querySelector('#value-solar2home').innerText, '', 'Solar2Home arrow should have correct value');
         assert.equal(card.shadowRoot.querySelector('#value-grid2home').innerText, '', 'Grid2Home arrow shouldn\'t have a value');
         done();
       });
@@ -204,7 +204,7 @@
         assert.equal(card.shadowRoot.querySelector('#value-grid').innerText, '-5', 'Grid should have correct value');
         assert.equal(card.shadowRoot.querySelector('#value-home').innerText, '0', 'Home should have correct value');
         assert.equal(card.shadowRoot.querySelector('#value-solar2grid').innerText, '', 'Solar2Grid arrow shouldn\'t have a value');
-        assert.equal(card.shadowRoot.querySelector('#value-solar2home').innerText, '5', 'Solar2Home arrow should have a value');
+        assert.equal(card.shadowRoot.querySelector('#value-solar2home').innerText, '', 'Solar2Home arrow should have a value');
         assert.equal(card.shadowRoot.querySelector('#value-grid2home').innerText, '', 'Grid2Home arrow shouldn\'t have a value');
         done();
       });
diff --git a/power-wheel-card/test/color_icons.html b/power-wheel-card/test/color_icons.html
index 8e58528..e4d65e8 100644
--- a/power-wheel-card/test/color_icons.html
+++ b/power-wheel-card/test/color_icons.html
@@ -29,7 +29,7 @@
         solar_energy_entity: "sensor.solar_energy",
         grid_energy_consumption_entity: "sensor.grid_energy_consumption",
         grid_energy_production_entity: "sensor.grid_energy_production",
-        energy_price: 0.20,
+        energy_consumption_rate: 0.20,
         money_unit: '$',
       };
       hass = {
@@ -110,7 +110,7 @@
 
     const setCardConsumedAndProducedToGrid = () => {
       hass.states['sensor.grid_energy_consumption'].state = "1";
-      hass.states['sensor.grid_energy_production'].state = "0.5";
+      hass.states['sensor.grid_energy_production'].state = "0.4";
       card.setAttribute('hass', JSON.stringify(hass));
     };
 
@@ -154,8 +154,8 @@
         assert.equal(card.shadowRoot.querySelector('#value-solar').innerText, '500', 'Solar should have correct value');
         assert.equal(card.shadowRoot.querySelector('#value-grid').innerText, '50', 'Grid should have correct value');
         assert.equal(card.shadowRoot.querySelector('#value-home').innerText, '450', 'Home should have correct value');
-        assert.equal(card.shadowRoot.querySelector('#value-solar2grid').innerText, '50', 'Solar2Grid arrow should have correct value');
-        assert.equal(card.shadowRoot.querySelector('#value-solar2home').innerText, '450', 'Solar2Home arrow should have correct value');
+        assert.equal(card.shadowRoot.querySelector('#value-solar2grid').innerText, '', 'Solar2Grid arrow should have correct value');
+        assert.equal(card.shadowRoot.querySelector('#value-solar2home').innerText, '', 'Solar2Home arrow should have correct value');
         assert.equal(card.shadowRoot.querySelector('#value-grid2home').innerText, '', 'Grid2Home arrow shouldn\'t have a value');
         done();
       });
@@ -200,7 +200,7 @@
         assert.equal(card.shadowRoot.querySelector('#value-grid').innerText, '5', 'Grid should have correct value');
         assert.equal(card.shadowRoot.querySelector('#value-home').innerText, '0', 'Home should have correct value');
         assert.equal(card.shadowRoot.querySelector('#value-solar2grid').innerText, '', 'Solar2Grid arrow shouldn\'t have a value');
-        assert.equal(card.shadowRoot.querySelector('#value-solar2home').innerText, '5', 'Solar2Home arrow should have a value');
+        assert.equal(card.shadowRoot.querySelector('#value-solar2home').innerText, '', 'Solar2Home arrow should have a value');
         assert.equal(card.shadowRoot.querySelector('#value-grid2home').innerText, '', 'Grid2Home arrow shouldn\'t have a value');
         done();
       });
@@ -228,8 +228,8 @@
         assert.equal(card.shadowRoot.querySelector('#value-solar').innerText, '5.000', 'Solar should have correct value');
         assert.equal(card.shadowRoot.querySelector('#value-grid').innerText, '0.500', 'Grid should have correct value');
         assert.equal(card.shadowRoot.querySelector('#value-home').innerText, '4.500', 'Home should have correct value');
-        assert.equal(card.shadowRoot.querySelector('#value-solar2grid').innerText, '0.500', 'Solar2Grid arrow should have a correct value');
-        assert.equal(card.shadowRoot.querySelector('#value-solar2home').innerText, '4.500', 'Solar2Home arrow should have correct value');
+        assert.equal(card.shadowRoot.querySelector('#value-solar2grid').innerText, '', 'Solar2Grid arrow should have a correct value');
+        assert.equal(card.shadowRoot.querySelector('#value-solar2home').innerText, '', 'Solar2Home arrow should have correct value');
         assert.equal(card.shadowRoot.querySelector('#value-grid2home').innerText, '', 'Grid2Home arrow shouldn\'t have a value');
         done();
       });
@@ -241,10 +241,10 @@
 
       flush(() => {
         assert.equal(card.shadowRoot.querySelector('#value-solar').innerText, '5.000', 'Solar should have correct value');
-        assert.equal(card.shadowRoot.querySelector('#value-grid').innerText, '0.500', 'Grid should have correct value');
-        assert.equal(card.shadowRoot.querySelector('#value-home').innerText, '5.500', 'Home should have correct value');
-        assert.equal(card.shadowRoot.querySelector('#value-solar2grid').innerText, '0.500', 'Solar2Grid arrow should have correct value');
-        assert.equal(card.shadowRoot.querySelector('#value-solar2home').innerText, '4.500', 'Solar2Home arrow should have correct value');
+        assert.equal(card.shadowRoot.querySelector('#value-grid').innerText, '0.600', 'Grid should have correct value');
+        assert.equal(card.shadowRoot.querySelector('#value-home').innerText, '5.600', 'Home should have correct value');
+        assert.equal(card.shadowRoot.querySelector('#value-solar2grid').innerText, '0.400', 'Solar2Grid arrow should have correct value');
+        assert.equal(card.shadowRoot.querySelector('#value-solar2home').innerText, '4.600', 'Solar2Home arrow should have correct value');
         assert.equal(card.shadowRoot.querySelector('#value-grid2home').innerText, '1.000', 'Grid2Home arrow should have correct value');
         done();
       });
@@ -272,8 +272,8 @@
         assert.equal(card.shadowRoot.querySelector('#value-solar').innerText, '1.00', 'Solar should have correct value');
         assert.equal(card.shadowRoot.querySelector('#value-grid').innerText, '0.10', 'Grid should have correct value');
         assert.equal(card.shadowRoot.querySelector('#value-home').innerText, '0.90', 'Home should have correct value');
-        assert.equal(card.shadowRoot.querySelector('#value-solar2grid').innerText, '0.10', 'Solar2Grid arrow should have a correct value');
-        assert.equal(card.shadowRoot.querySelector('#value-solar2home').innerText, '0.90', 'Solar2Home arrow should have correct value');
+        assert.equal(card.shadowRoot.querySelector('#value-solar2grid').innerText, '', 'Solar2Grid arrow should have a correct value');
+        assert.equal(card.shadowRoot.querySelector('#value-solar2home').innerText, '', 'Solar2Home arrow should have correct value');
         assert.equal(card.shadowRoot.querySelector('#value-grid2home').innerText, '', 'Grid2Home arrow shouldn\'t have a value');
         done();
       });
@@ -285,10 +285,10 @@
 
       flush(() => {
         assert.equal(card.shadowRoot.querySelector('#value-solar').innerText, '1.00', 'Solar should have correct value');
-        assert.equal(card.shadowRoot.querySelector('#value-grid').innerText, '0.10', 'Grid should have correct value');
-        assert.equal(card.shadowRoot.querySelector('#value-home').innerText, '1.10', 'Home should have correct value');
-        assert.equal(card.shadowRoot.querySelector('#value-solar2grid').innerText, '0.10', 'Solar2Grid arrow should have correct value');
-        assert.equal(card.shadowRoot.querySelector('#value-solar2home').innerText, '0.90', 'Solar2Home arrow should have correct value');
+        assert.equal(card.shadowRoot.querySelector('#value-grid').innerText, '0.12', 'Grid should have correct value');
+        assert.equal(card.shadowRoot.querySelector('#value-home').innerText, '1.12', 'Home should have correct value');
+        assert.equal(card.shadowRoot.querySelector('#value-solar2grid').innerText, '0.08', 'Solar2Grid arrow should have correct value');
+        assert.equal(card.shadowRoot.querySelector('#value-solar2home').innerText, '0.92', 'Solar2Home arrow should have correct value');
         assert.equal(card.shadowRoot.querySelector('#value-grid2home').innerText, '0.20', 'Grid2Home arrow should have correct value');
         done();
       });
diff --git a/power-wheel-card/test/decimals.html b/power-wheel-card/test/decimals.html
index e219dd5..ed9fbad 100644
--- a/power-wheel-card/test/decimals.html
+++ b/power-wheel-card/test/decimals.html
@@ -30,7 +30,7 @@
         power_decimals: 2,
         energy_decimals: 1,
         money_decimals: 3,
-        energy_price: 1.00,
+        energy_consumption_rate: 1.00,
         color_icons: false,
       };
       hass = {
diff --git a/power-wheel-card/test/energy_capable.html b/power-wheel-card/test/energy_capable.html
index 5d4acce..9853597 100644
--- a/power-wheel-card/test/energy_capable.html
+++ b/power-wheel-card/test/energy_capable.html
@@ -91,7 +91,7 @@
 
     const setCardConsumedAndProducedToGrid = () => {
       hass.states['sensor.grid_energy_consumption'].state = "1";
-      hass.states['sensor.grid_energy_production'].state = "0.5";
+      hass.states['sensor.grid_energy_production'].state = "0.4";
       card.setAttribute('hass', JSON.stringify(hass));
     };
 
@@ -181,8 +181,8 @@
         assert.equal(card.shadowRoot.querySelector('#value-solar').innerText, '5.000', 'Solar should have correct value');
         assert.equal(card.shadowRoot.querySelector('#value-grid').innerText, '0.500', 'Grid should have correct value');
         assert.equal(card.shadowRoot.querySelector('#value-home').innerText, '-4.500', 'Home should have correct value');
-        assert.equal(card.shadowRoot.querySelector('#value-solar2grid').innerText, '0.500', 'Solar2Grid arrow should have a correct value');
-        assert.equal(card.shadowRoot.querySelector('#value-solar2home').innerText, '4.500', 'Solar2Home arrow should have correct value');
+        assert.equal(card.shadowRoot.querySelector('#value-solar2grid').innerText, '', 'Solar2Grid arrow should have a correct value');
+        assert.equal(card.shadowRoot.querySelector('#value-solar2home').innerText, '', 'Solar2Home arrow should have correct value');
         assert.equal(card.shadowRoot.querySelector('#value-grid2home').innerText, '', 'Grid2Home arrow shouldn\'t have a value');
         done();
       });
@@ -210,10 +210,10 @@
 
       flush(() => {
         assert.equal(card.shadowRoot.querySelector('#value-solar').innerText, '5.000', 'Solar should have correct value');
-        assert.equal(card.shadowRoot.querySelector('#value-grid').innerText, '-0.500', 'Grid should have correct value');
-        assert.equal(card.shadowRoot.querySelector('#value-home').innerText, '-5.500', 'Home should have correct value');
-        assert.equal(card.shadowRoot.querySelector('#value-solar2grid').innerText, '0.500', 'Solar2Grid arrow should have correct value');
-        assert.equal(card.shadowRoot.querySelector('#value-solar2home').innerText, '4.500', 'Solar2Home arrow should have correct value');
+        assert.equal(card.shadowRoot.querySelector('#value-grid').innerText, '-0.600', 'Grid should have correct value');
+        assert.equal(card.shadowRoot.querySelector('#value-home').innerText, '-5.600', 'Home should have correct value');
+        assert.equal(card.shadowRoot.querySelector('#value-solar2grid').innerText, '0.400', 'Solar2Grid arrow should have correct value');
+        assert.equal(card.shadowRoot.querySelector('#value-solar2home').innerText, '4.600', 'Solar2Home arrow should have correct value');
         assert.equal(card.shadowRoot.querySelector('#value-grid2home').innerText, '1.000', 'Grid2Home arrow should have correct value');
         done();
       });
diff --git a/power-wheel-card/test/money_capable.html b/power-wheel-card/test/money_capable.html
index 3b216cd..272b11b 100644
--- a/power-wheel-card/test/money_capable.html
+++ b/power-wheel-card/test/money_capable.html
@@ -18,6 +18,7 @@
     let card, hass, config;
 
     /** Tests are based on energy_capable. **/
+    /** Some tests are extended in money_energy_production_rate. **/
 
     setup(() => {
       card = fixture('simple');
@@ -29,7 +30,7 @@
         solar_energy_entity: "sensor.solar_energy",
         grid_energy_consumption_entity: "sensor.grid_energy_consumption",
         grid_energy_production_entity: "sensor.grid_energy_production",
-        energy_price: 0.20,
+        energy_consumption_rate: 0.20,
         money_unit: '$',
         initial_view: "money",
         color_icons: false,
@@ -92,7 +93,7 @@
 
     const setCardConsumedAndProducedToGrid = () => {
       hass.states['sensor.grid_energy_consumption'].state = "1";
-      hass.states['sensor.grid_energy_production'].state = "0.5";
+      hass.states['sensor.grid_energy_production'].state = "0.4";
       card.setAttribute('hass', JSON.stringify(hass));
     };
 
@@ -104,6 +105,7 @@
       flush(() => {
         assert.equal(card.config.money_unit, '$', 'Card parameter money_unit should be set');
         assert.equal(card.config.initial_view, 'money', 'Card parameter initial_view should be set');
+        assert.equal(card.config.energy_production_rate, 0.20, 'Card parameter energy_production_rate should be set');
         done();
       });
     });
@@ -197,8 +199,8 @@
         assert.equal(card.shadowRoot.querySelector('#value-solar').innerText, '1.00', 'Solar should have correct value');
         assert.equal(card.shadowRoot.querySelector('#value-grid').innerText, '0.10', 'Grid should have correct value');
         assert.equal(card.shadowRoot.querySelector('#value-home').innerText, '-0.90', 'Home should have correct value');
-        assert.equal(card.shadowRoot.querySelector('#value-solar2grid').innerText, '0.10', 'Solar2Grid arrow should have a correct value');
-        assert.equal(card.shadowRoot.querySelector('#value-solar2home').innerText, '0.90', 'Solar2Home arrow should have correct value');
+        assert.equal(card.shadowRoot.querySelector('#value-solar2grid').innerText, '', 'Solar2Grid arrow should have a correct value');
+        assert.equal(card.shadowRoot.querySelector('#value-solar2home').innerText, '', 'Solar2Home arrow should have correct value');
         assert.equal(card.shadowRoot.querySelector('#value-grid2home').innerText, '', 'Grid2Home arrow shouldn\'t have a value');
         done();
       });
@@ -226,10 +228,10 @@
 
       flush(() => {
         assert.equal(card.shadowRoot.querySelector('#value-solar').innerText, '1.00', 'Solar should have correct value');
-        assert.equal(card.shadowRoot.querySelector('#value-grid').innerText, '-0.10', 'Grid should have correct value');
-        assert.equal(card.shadowRoot.querySelector('#value-home').innerText, '-1.10', 'Home should have correct value');
-        assert.equal(card.shadowRoot.querySelector('#value-solar2grid').innerText, '0.10', 'Solar2Grid arrow should have correct value');
-        assert.equal(card.shadowRoot.querySelector('#value-solar2home').innerText, '0.90', 'Solar2Home arrow should have correct value');
+        assert.equal(card.shadowRoot.querySelector('#value-grid').innerText, '-0.12', 'Grid should have correct value');
+        assert.equal(card.shadowRoot.querySelector('#value-home').innerText, '-1.12', 'Home should have correct value');
+        assert.equal(card.shadowRoot.querySelector('#value-solar2grid').innerText, '0.08', 'Solar2Grid arrow should have correct value');
+        assert.equal(card.shadowRoot.querySelector('#value-solar2home').innerText, '0.92', 'Solar2Home arrow should have correct value');
         assert.equal(card.shadowRoot.querySelector('#value-grid2home').innerText, '0.20', 'Grid2Home arrow should have correct value');
         done();
       });
diff --git a/power-wheel-card/test/money_energy_production_rate.html b/power-wheel-card/test/money_energy_production_rate.html
new file mode 100644
index 0000000..23446cf
--- /dev/null
+++ b/power-wheel-card/test/money_energy_production_rate.html
@@ -0,0 +1,226 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <script src="../../bower_components/webcomponentsjs/webcomponents-loader.js"></script>
+  <script src="../../bower_components/web-component-tester/browser.js"></script>
+  <script type="module" src="../../test/home-assistant-main-mock.js"></script>
+  <script type="module" src="../power-wheel-card.js"></script>
+</head>
+<body>
+<test-fixture id="simple">
+  <template>
+    <power-wheel-card></power-wheel-card>
+  </template>
+</test-fixture>
+<script>
+  suite('<power-wheel-card> with split energy rates', () => {
+    let card, hass, config;
+
+    /** Tests are based on money_capable. **/
+
+    setup(() => {
+      card = fixture('simple');
+      config = {
+        type: "custom:power-wheel-card",
+        solar_power_entity: "sensor.solar_power",
+        grid_power_consumption_entity: "sensor.grid_power_consumption",
+        grid_power_production_entity: "sensor.grid_power_production",
+        solar_energy_entity: "sensor.solar_energy",
+        grid_energy_consumption_entity: "sensor.grid_energy_consumption",
+        grid_energy_production_entity: "sensor.grid_energy_production",
+        energy_consumption_rate: 0.50,
+        energy_production_rate: 0.20,
+        money_unit: '$',
+        initial_view: "money",
+        color_icons: false,
+      };
+      hass = {
+        states: {
+          "sensor.solar_power" : {
+            attributes: {
+              unit_of_measurement: "W",
+            },
+            entity_id: "sensor.solar_power",
+            state: "500.1",
+          },
+          "sensor.grid_power_consumption" : {
+            attributes: {
+              unit_of_measurement: "W",
+            },
+            entity_id: "sensor.grid_power_consumption",
+            state: "1799.9",
+          },
+          "sensor.grid_power_production" : {
+            attributes: {
+              unit_of_measurement: "W",
+            },
+            entity_id: "sensor.grid_power_production",
+            state: "0",
+          },
+          "sensor.solar_energy" : {
+            attributes: {
+              unit_of_measurement: "kWh",
+            },
+            entity_id: "sensor.solar_energy",
+            state: "5",
+          },
+          "sensor.grid_energy_consumption" : {
+            attributes: {
+              unit_of_measurement: "kWh",
+            },
+            entity_id: "sensor.grid_energy_consumption",
+            state: "18",
+          },
+          "sensor.grid_energy_production" : {
+            attributes: {
+              unit_of_measurement: "kWh",
+            },
+            entity_id: "sensor.grid_energy_production",
+            state: "0",
+          },
+        },
+      };
+      card.setAttribute('hass', JSON.stringify(hass));
+      card.setConfig(config);
+    });
+
+    const setCardProducedToGridOnly = () => {
+      hass.states['sensor.grid_energy_consumption'].state = "0";
+      hass.states['sensor.grid_energy_production'].state = "0.5";
+      card.setAttribute('hass', JSON.stringify(hass));
+    };
+
+    const setCardConsumedAndProducedToGrid = () => {
+      hass.states['sensor.grid_energy_consumption'].state = "1";
+      hass.states['sensor.grid_energy_production'].state = "0.4";
+      card.setAttribute('hass', JSON.stringify(hass));
+    };
+
+    test('has config values', (done) => {
+      flush(() => {
+        assert.equal(card.config.money_unit, '$', 'Card parameter money_unit should be set');
+        assert.equal(card.config.initial_view, 'money', 'Card parameter initial_view should be set');
+        assert.equal(card.config.energy_production_rate, 0.20, 'Card parameter energy_production_rate should be set');
+        done();
+      });
+    });
+
+    test('has set card property values after setConfig', (done) => {
+      flush(() => {
+        assert.deepEqual(card.sensors, [ "sensor.solar_power", "sensor.grid_power_consumption", "sensor.grid_power_production", "sensor.solar_energy", "sensor.grid_energy_consumption", "sensor.grid_energy_production" ], 'Card property sensors should be set');
+        assert.equal(card.view, 'money', 'Card property view should be set');
+        assert.isTrue(card.views.energy.capable, 'Card property views should have value set for energy capable');
+        assert.isTrue(card.views.money.capable, 'Card property views should have value set for money capable');
+        done();
+      });
+    });
+
+    test('has no warnings or errors', (done) => {
+      flush(() => {
+        assert.equal(card.shadowRoot.querySelectorAll('.message').length, 0, 'Number of messages should be zero');
+        done();
+      });
+    });
+
+    test('displays values', (done) => {
+      flush(() => {
+        assert.equal(card.shadowRoot.querySelector('#title').innerText, "Power wheel");
+        assert.equal(card.shadowRoot.querySelector('#unit').innerText, "$", 'Unit should be set to money');
+        done();
+      });
+    });
+
+    test('displays values when having consumed from the grid only', (done) => {
+      flush(() => {
+        assert.equal(card.shadowRoot.querySelector('#value-solar').innerText, '2.50', 'Solar should have correct value');
+        assert.equal(card.shadowRoot.querySelector('#value-grid').innerText, '-9.00', 'Grid should have correct value');
+        assert.equal(card.shadowRoot.querySelector('#value-home').innerText, '-11.50', 'Home should have correct value');
+        assert.equal(card.shadowRoot.querySelector('#value-solar2grid').innerText, '', 'Solar2Grid arrow shouldn\'t have a value');
+        assert.equal(card.shadowRoot.querySelector('#value-solar2home').innerText, '', 'Solar2Home arrow shouldn\'t have a value');
+        assert.equal(card.shadowRoot.querySelector('#value-grid2home').innerText, '', 'Grid2Home arrow shouldn\'t have a value');
+        done();
+      });
+    });
+
+    test('has ui elements when having consumed from the grid only', (done) => {
+      flush(() => {
+        assert.isTrue(card.shadowRoot.querySelector('#icon-solar').classList.contains('producing'), 'Solar icon should be producing');
+        assert.isTrue(card.shadowRoot.querySelector('#icon-grid').classList.contains('consuming'), 'Grid icon should be consuming');
+        assert.isTrue(card.shadowRoot.querySelector('#icon-home').classList.contains('consuming'), 'Home icon should be consuming');
+        assert.equal(card.shadowRoot.querySelector('#icon-solar2grid').getAttribute('icon'), 'mdi:arrow-bottom-left', 'Solar2Grid icon should be normal icon');
+        assert.equal(card.shadowRoot.querySelector('#icon-solar2home').getAttribute('icon'), 'mdi:arrow-bottom-right', 'Solar2Home icon should be normal icon');
+        assert.equal(card.shadowRoot.querySelector('#icon-grid2home').getAttribute('icon'), 'mdi:arrow-right', 'Grid2Home icon should be normal icon');
+        assert.isTrue(card.shadowRoot.querySelector('#icon-solar2grid').classList.contains('inactive'), 'Solar2Grid arrow icon should be inactive');
+        assert.isTrue(card.shadowRoot.querySelector('#icon-solar2home').classList.contains('active'), 'Solar2Home arrow icon should be active');
+        assert.isTrue(card.shadowRoot.querySelector('#icon-grid2home').classList.contains('active'), 'Grid2Home arrow icon should be active');
+        done();
+      });
+    });
+
+    test('displays values when having produced to the grid only', (done) => {
+      setCardProducedToGridOnly();
+
+      flush(() => {
+        assert.equal(card.shadowRoot.querySelector('#value-solar').innerText, '2.35', 'Solar should have correct value');
+        assert.equal(card.shadowRoot.querySelector('#value-grid').innerText, '0.10', 'Grid should have correct value');
+        assert.equal(card.shadowRoot.querySelector('#value-home').innerText, '-2.25', 'Home should have correct value');
+        assert.equal(card.shadowRoot.querySelector('#value-solar2grid').innerText, '', 'Solar2Grid arrow should have a correct value');
+        assert.equal(card.shadowRoot.querySelector('#value-solar2home').innerText, '', 'Solar2Home arrow should have correct value');
+        assert.equal(card.shadowRoot.querySelector('#value-grid2home').innerText, '', 'Grid2Home arrow shouldn\'t have a value');
+        done();
+      });
+    });
+
+    test('has ui elements when having produced to the grid only', (done) => {
+      setCardProducedToGridOnly();
+
+      flush(() => {
+        assert.isTrue(card.shadowRoot.querySelector('#icon-solar').classList.contains('producing'), 'Solar icon should be producing');
+        assert.isTrue(card.shadowRoot.querySelector('#icon-grid').classList.contains('producing'), 'Grid icon should be producing');
+        assert.isTrue(card.shadowRoot.querySelector('#icon-home').classList.contains('consuming'), 'Home icon should be consuming');
+        assert.equal(card.shadowRoot.querySelector('#icon-solar2grid').getAttribute('icon'), 'mdi:arrow-bottom-left', 'Solar2Grid icon should be normal icon');
+        assert.equal(card.shadowRoot.querySelector('#icon-solar2home').getAttribute('icon'), 'mdi:arrow-bottom-right', 'Solar2Home icon should be normal icon');
+        assert.equal(card.shadowRoot.querySelector('#icon-grid2home').getAttribute('icon'), 'mdi:arrow-right', 'Grid2Home icon should be normal icon');
+        assert.isTrue(card.shadowRoot.querySelector('#icon-solar2grid').classList.contains('active'), 'Solar2Grid arrow icon should be active');
+        assert.isTrue(card.shadowRoot.querySelector('#icon-solar2home').classList.contains('active'), 'Solar2Home arrow icon should be active');
+        assert.isTrue(card.shadowRoot.querySelector('#icon-grid2home').classList.contains('inactive'), 'Grid2Home arrow icon should be inactive');
+        done();
+      });
+    });
+
+    test('displays values when having consumed from and produced to the grid', (done) => {
+      setCardConsumedAndProducedToGrid();
+
+      flush(() => {
+        assert.equal(card.shadowRoot.querySelector('#value-solar').innerText, '2.38', 'Solar should have correct value');
+        assert.equal(card.shadowRoot.querySelector('#value-grid').innerText, '-0.42', 'Grid should have correct value');
+        assert.equal(card.shadowRoot.querySelector('#value-home').innerText, '-2.80', 'Home should have correct value');
+        assert.equal(card.shadowRoot.querySelector('#value-solar2grid').innerText, '0.08', 'Solar2Grid arrow should have correct value');
+        assert.equal(card.shadowRoot.querySelector('#value-solar2home').innerText, '2.30', 'Solar2Home arrow should have correct value');
+        assert.equal(card.shadowRoot.querySelector('#value-grid2home').innerText, '0.50', 'Grid2Home arrow should have correct value');
+        done();
+      });
+    });
+
+    test('has ui elements when having consumed from and produced to the grid', (done) => {
+      setCardConsumedAndProducedToGrid();
+
+      flush(() => {
+        assert.isTrue(card.shadowRoot.querySelector('#icon-solar').classList.contains('producing'), 'Solar icon should be producing');
+        assert.isTrue(card.shadowRoot.querySelector('#icon-grid').classList.contains('consuming'), 'Grid icon should be consuming');
+        assert.isTrue(card.shadowRoot.querySelector('#icon-home').classList.contains('consuming'), 'Home icon should be consuming');
+        assert.equal(card.shadowRoot.querySelector('#icon-solar2grid').getAttribute('icon'), 'mdi:arrow-bottom-left', 'Solar2Grid icon should be normal icon');
+        assert.equal(card.shadowRoot.querySelector('#icon-solar2home').getAttribute('icon'), 'mdi:arrow-bottom-right', 'Solar2Home icon should be normal icon');
+        assert.equal(card.shadowRoot.querySelector('#icon-grid2home').getAttribute('icon'), 'mdi:arrow-right', 'Grid2Home icon should be normal icon');
+        assert.isTrue(card.shadowRoot.querySelector('#icon-solar2grid').classList.contains('active'), 'Solar2Grid arrow icon should be active');
+        assert.isTrue(card.shadowRoot.querySelector('#icon-solar2home').classList.contains('active'), 'Solar2Home arrow icon should be active');
+        assert.isTrue(card.shadowRoot.querySelector('#icon-grid2home').classList.contains('active'), 'Grid2Home arrow icon should be active');
+        done();
+      });
+    });
+
+  });
+</script>
+</body>
+</html>
diff --git a/power-wheel-card/test/titles.html b/power-wheel-card/test/titles.html
index cf3847b..8cf0e5b 100644
--- a/power-wheel-card/test/titles.html
+++ b/power-wheel-card/test/titles.html
@@ -31,7 +31,7 @@
         solar_energy_entity: "sensor.solar_energy",
         grid_energy_consumption_entity: "sensor.grid_energy_consumption",
         grid_energy_production_entity: "sensor.grid_energy_production",
-        energy_price: 0.20,
+        energy_consumption_rate: 0.20,
       };
       hass = {
         states: {
diff --git a/test/index.html b/test/index.html
index ffb8e73..ef4e615 100644
--- a/test/index.html
+++ b/test/index.html
@@ -21,6 +21,7 @@
     '../power-wheel-card/test/energy_one_grid_sensor.html',
     '../power-wheel-card/test/energy_one_grid_sensor_switched_polarity.html',
     '../power-wheel-card/test/money_capable.html',
+    '../power-wheel-card/test/money_energy_production_rate.html',
     '../power-wheel-card/test/auto_toggle.html',
     '../power-wheel-card/test/debug_mode.html',
   ]);